@charset "UTF-8";html {
  height: 100%;
}
html * {
  font-family: Pretendard, NotoSansArabic, sans-serif;
  /* -webkit-user-drag: element; */
}
html:lang(ar) {
  height: 100%;
}
html:lang(ar) * {
  /* font-family: NotoSansArabic, Pretendard, sans-serif; */
  /* font-family: Pretendard; */
  /* -webkit-user-drag: element; */
  font-family: NotoSans, Pretendard, sans-serif;
}
body {
  margin: 0;
  height: inherit;
  /* font-family: Pretendard, NotoSansArabic, "돋움", Dotum, sans-serif !important; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body > .root {
  height: 100%;
  overflow-y: hidden;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.react-tooltip {
  z-index: 500 !important;
}
.react-datepicker-popper {
  z-index: 4 !important;
}
.divider {
  border-bottom: 1px solid #e9ecef;
}
.layout-title {
  padding: 0 32px;
  height: 96px;
  min-height: 96px;
  width: calc(100% - 64px);
  align-items: center;
  justify-content: space-between;
}
.fasooTabs-headers.fullWidth {
  width: 100%;
}
label {
  /* display: inline-flex !important; */
  max-width: none !important;
  margin-bottom: 0px !important;
  font-weight: normal !important;
}
iframe {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
.loading-indicator:before {
  content: "";
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8) url("/assets/progress_circle-B6o5iq6q.gif");
  background-position-x: center;
  background-position-y: center;
  background-size: 30px;
  background-repeat: no-repeat;
}

.loading-indicator:after {
  position: fixed;
  width: 100%;
  top: 50%;
  left: 0;
  z-index: 1001;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.progress-root {
  display: none;
}
.progress-root.on {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5050;
}

@keyframes ldio-j3o061p6lyr {
  0% {
    opacity: 1;
    backface-visibility: hidden;
    transform: translateZ(0) scale(0.6, 0.6);
  }
  100% {
    opacity: 0;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}
.ldio-j3o061p6lyr div > div {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b94e2;
  animation: ldio-j3o061p6lyr 1s linear infinite;
}

.ldio-j3o061p6lyr div:nth-child(1) > div {
  left: 124px;
  top: 92px;
  animation-delay: -0.875s;
}

.ldio-j3o061p6lyr > div:nth-child(1) {
  transform: rotate(0deg);
  transform-origin: 132px 100px;
}

.ldio-j3o061p6lyr div:nth-child(2) > div {
  left: 115px;
  top: 115px;
  animation-delay: -0.75s;
}

.ldio-j3o061p6lyr > div:nth-child(2) {
  transform: rotate(45deg);
  transform-origin: 123px 123px;
}

.ldio-j3o061p6lyr div:nth-child(3) > div {
  left: 92px;
  top: 124px;
  animation-delay: -0.625s;
}

.ldio-j3o061p6lyr > div:nth-child(3) {
  transform: rotate(90deg);
  transform-origin: 100px 132px;
}

.ldio-j3o061p6lyr div:nth-child(4) > div {
  left: 69px;
  top: 115px;
  animation-delay: -0.5s;
}

.ldio-j3o061p6lyr > div:nth-child(4) {
  transform: rotate(135deg);
  transform-origin: 77px 123px;
}

.ldio-j3o061p6lyr div:nth-child(5) > div {
  left: 60px;
  top: 92px;
  animation-delay: -0.375s;
}

.ldio-j3o061p6lyr > div:nth-child(5) {
  transform: rotate(180deg);
  transform-origin: 68px 100px;
}

.ldio-j3o061p6lyr div:nth-child(6) > div {
  left: 69px;
  top: 69px;
  animation-delay: -0.25s;
}

.ldio-j3o061p6lyr > div:nth-child(6) {
  transform: rotate(225deg);
  transform-origin: 77px 77px;
}

.ldio-j3o061p6lyr div:nth-child(7) > div {
  left: 92px;
  top: 60px;
  animation-delay: -0.125s;
}

.ldio-j3o061p6lyr > div:nth-child(7) {
  transform: rotate(270deg);
  transform-origin: 100px 68px;
}

.ldio-j3o061p6lyr div:nth-child(8) > div {
  left: 115px;
  top: 69px;
  animation-delay: 0s;
}

.ldio-j3o061p6lyr > div:nth-child(8) {
  transform: rotate(315deg);
  transform-origin: 123px 77px;
}

.loadingio-spinner-spin-3p9ce1185f9 {
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
}

.ldio-j3o061p6lyr {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}

.ldio-j3o061p6lyr div {
  box-sizing: content-box;
}

/* generated by https://loading.io/ */
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

/** 그림자 효과를 사용하여 사용자에게 해당 객체의 우선 순위나 계층이 높다는 시각적 신호를 제공합니다. */
.elev {
  border: 1px solid #e9ecef;
  /** 대부분의 케이스에서 사용 */
}
.elev.sd-0 {
  box-shadow: none;
}
.elev {
  /** FAB */
}
.elev.sd-100 {
  box-shadow: 0px 1px 4px 0px rgba(25, 31, 40, 0.1215686275);
}
.elev {
  /** Select option group */
}
.elev.sd-200 {
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
}
.elev {
  /** Pop-up / Modal / Date Picker / Dropdown / Toast / Client */
}
.elev.sd-300 {
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
}
.elev {
  /** Cards */
}
.elev.sd-400 {
  box-shadow: 0px 4px 16px 0px rgba(25, 31, 40, 0.2);
}
.elev {
  /** Tooltips */
}
.elev.sd-500 {
  box-shadow: 0px 8px 20px 0px rgba(25, 31, 40, 0.2392156863);
}

/** 아래의 Cursor 컨포넌트는 UI 개발이 아닌 디자인 설계 단계에서 사용되며, 
디자이너가 각 요소에 적절한 커서를 적용함으로써 사용자 상호작용을 직관적으로 파악할 수 있도록 합니다. */
.cursor.pointer {
  cursor: pointer;
}
.cursor.grab {
  cursor: grab;
}
.cursor.grabbing {
  cursor: grabbing;
}
.cursor.text {
  cursor: text;
}
.cursor.zoomIn {
  cursor: zoom-in;
}
.cursor.zoomOut {
  cursor: zoom-out;
}

.mg.ml-auto {
  margin-inline-start: auto;
}
.mg.ml-2 {
  margin-inline-start: 2px;
}
.mg.ml-4 {
  margin-inline-start: 4px;
}
.mg.ml-6 {
  margin-inline-start: 6px;
}
.mg.ml-8 {
  margin-inline-start: 8px;
}
.mg.ml-10 {
  margin-inline-start: 10px;
}
.mg.ml-12 {
  margin-inline-start: 12px;
}
.mg.ml-14 {
  margin-inline-start: 14px;
}
.mg.ml-16 {
  margin-inline-start: 16px;
}
.mg.ml-20 {
  margin-inline-start: 20px;
}
.mg.ml-24 {
  margin-inline-start: 24px;
}
.mg.ml-28 {
  margin-inline-start: 28px;
}
.mg.ml-32 {
  margin-inline-start: 32px;
}
.mg.ml-36 {
  margin-inline-start: 36px;
}
.mg.ml-40 {
  margin-inline-start: 40px;
}
.mg.ml-48 {
  margin-inline-start: 48px;
}
.mg.ml-64 {
  margin-inline-start: 64px;
}
.mg.ml-80 {
  margin-inline-start: 80px;
}
.mg.ml-144 {
  margin-inline-start: 144px;
}
.mg.mr-auto {
  margin-inline-end: auto;
}
.mg.mr-2 {
  margin-inline-end: 2px;
}
.mg.mr-4 {
  margin-inline-end: 4px;
}
.mg.mr-6 {
  margin-inline-end: 6px;
}
.mg.mr-8 {
  margin-inline-end: 8px;
}
.mg.mr-10 {
  margin-inline-end: 10px;
}
.mg.mr-12 {
  margin-inline-end: 12px;
}
.mg.mr-16 {
  margin-inline-end: 16px;
}
.mg.mr-20 {
  margin-inline-end: 20px;
}
.mg.mr-24 {
  margin-inline-end: 24px;
}
.mg.mr-28 {
  margin-inline-end: 28px;
}
.mg.mr-32 {
  margin-inline-end: 32px;
}
.mg.mr-36 {
  margin-inline-end: 36px;
}
.mg.mr-40 {
  margin-inline-end: 40px;
}
.mg.mr-48 {
  margin-inline-end: 48px;
}
.mg.mr-64 {
  margin-inline-end: 64px;
}
.mg.mr-80 {
  margin-inline-end: 80px;
}
.mg.mr-144 {
  margin-inline-end: 144px;
}
.mg.mb-auto {
  margin-bottom: auto;
}
.mg.mb-2 {
  margin-bottom: 2px;
}
.mg.mb-4 {
  margin-bottom: 4px;
}
.mg.mb-6 {
  margin-bottom: 6px;
}
.mg.mb-8 {
  margin-bottom: 8px;
}
.mg.mb-10 {
  margin-bottom: 10px;
}
.mg.mb-12 {
  margin-bottom: 12px;
}
.mg.mb-16 {
  margin-bottom: 16px;
}
.mg.mb-20 {
  margin-bottom: 20px;
}
.mg.mb-24 {
  margin-bottom: 24px;
}
.mg.mb-28 {
  margin-bottom: 28px;
}
.mg.mb-32 {
  margin-bottom: 32px;
}
.mg.mb-36 {
  margin-bottom: 36px;
}
.mg.mb-40 {
  margin-bottom: 40px;
}
.mg.mb-48 {
  margin-bottom: 48px;
}
.mg.mb-64 {
  margin-bottom: 64px;
}
.mg.mb-80 {
  margin-bottom: 80px;
}
.mg.mb-144 {
  margin-bottom: 144px;
}
.mg.mt-auto {
  margin-top: auto;
}
.mg.mt-2 {
  margin-top: 2px;
}
.mg.mt-4 {
  margin-top: 4px;
}
.mg.mt-6 {
  margin-top: 6px;
}
.mg.mt-8 {
  margin-top: 8px;
}
.mg.mt-10 {
  margin-top: 10px;
}
.mg.mt-12 {
  margin-top: 12px;
}
.mg.mt-16 {
  margin-top: 16px;
}
.mg.mt-18 {
  margin-top: 18px;
}
.mg.mt-20 {
  margin-top: 20px;
}
.mg.mt-24 {
  margin-top: 24px;
}
.mg.mt-28 {
  margin-top: 28px;
}
.mg.mt-32 {
  margin-top: 32px;
}
.mg.mt-36 {
  margin-top: 36px;
}
.mg.mt-40 {
  margin-top: 40px;
}
.mg.mt-48 {
  margin-top: 48px;
}
.mg.mt-64 {
  margin-top: 64px;
}
.mg.mt-80 {
  margin-top: 80px;
}
.mg.mt-144 {
  margin-top: 144px;
}

.pd.pl-auto {
  padding-inline-start: auto;
}
.pd.pl-2 {
  padding-inline-start: 2px;
}
.pd.pl-4 {
  padding-inline-start: 4px;
}
.pd.pl-6 {
  padding-inline-start: 6px;
}
.pd.pl-8 {
  padding-inline-start: 8px;
}
.pd.pl-10 {
  padding-inline-start: 10px;
}
.pd.pl-12 {
  padding-inline-start: 12px;
}
.pd.pl-16 {
  padding-inline-start: 16px;
}
.pd.pl-20 {
  padding-inline-start: 20px;
}
.pd.pl-24 {
  padding-inline-start: 24px;
}
.pd.pl-28 {
  padding-inline-start: 28px;
}
.pd.pl-32 {
  padding-inline-start: 32px;
}
.pd.pl-36 {
  padding-inline-start: 36px;
}
.pd.pl-40 {
  padding-inline-start: 40px;
}
.pd.pl-48 {
  padding-inline-start: 48px;
}
.pd.pl-64 {
  padding-inline-start: 64px;
}
.pd.pl-80 {
  padding-inline-start: 80px;
}
.pd.pl-144 {
  padding-inline-start: 144px;
}
.pd.pr-auto {
  padding-right: auto;
}
.pd.pr-2 {
  padding-right: 2px;
}
.pd.pr-4 {
  padding-right: 4px;
}
.pd.pr-6 {
  padding-right: 6px;
}
.pd.pr-8 {
  padding-right: 8px;
}
.pd.pr-10 {
  padding-right: 10px;
}
.pd.pr-12 {
  padding-right: 12px;
}
.pd.pr-16 {
  padding-right: 16px;
}
.pd.pr-20 {
  padding-right: 20px;
}
.pd.pr-24 {
  padding-right: 24px;
}
.pd.pr-28 {
  padding-right: 28px;
}
.pd.pr-32 {
  padding-right: 32px;
}
.pd.pr-36 {
  padding-right: 36px;
}
.pd.pr-40 {
  padding-right: 40px;
}
.pd.pr-48 {
  padding-right: 48px;
}
.pd.pr-64 {
  padding-right: 64px;
}
.pd.pr-80 {
  padding-right: 80px;
}
.pd.pr-144 {
  padding-right: 144px;
}
.pd.pb-auto {
  padding-bottom: auto;
}
.pd.pb-2 {
  padding-bottom: 2px;
}
.pd.pb-4 {
  padding-bottom: 4px;
}
.pd.pb-6 {
  padding-bottom: 6px;
}
.pd.pb-8 {
  padding-bottom: 8px;
}
.pd.pb-10 {
  padding-bottom: 10px;
}
.pd.pb-12 {
  padding-bottom: 12px;
}
.pd.pb-16 {
  padding-bottom: 16px;
}
.pd.pb-20 {
  padding-bottom: 20px;
}
.pd.pb-24 {
  padding-bottom: 24px;
}
.pd.pb-28 {
  padding-bottom: 28px;
}
.pd.pb-32 {
  padding-bottom: 32px;
}
.pd.pb-36 {
  padding-bottom: 36px;
}
.pd.pb-40 {
  padding-bottom: 40px;
}
.pd.pb-48 {
  padding-bottom: 48px;
}
.pd.pb-64 {
  padding-bottom: 64px;
}
.pd.pb-80 {
  padding-bottom: 80px;
}
.pd.pb-144 {
  padding-bottom: 144px;
}
.pd.pt-auto {
  padding-top: auto;
}
.pd.pt-2 {
  padding-top: 2px;
}
.pd.pt-4 {
  padding-top: 4px;
}
.pd.pt-6 {
  padding-top: 6px;
}
.pd.pt-8 {
  padding-top: 8px;
}
.pd.pt-10 {
  padding-top: 10px;
}
.pd.pt-12 {
  padding-top: 12px;
}
.pd.pt-16 {
  padding-top: 16px;
}
.pd.pt-20 {
  padding-top: 20px;
}
.pd.pt-24 {
  padding-top: 24px;
}
.pd.pt-28 {
  padding-top: 28px;
}
.pd.pt-32 {
  padding-top: 32px;
}
.pd.pt-36 {
  padding-top: 36px;
}
.pd.pt-40 {
  padding-top: 40px;
}
.pd.pt-48 {
  padding-top: 48px;
}
.pd.pt-64 {
  padding-top: 64px;
}
.pd.pt-80 {
  padding-top: 80px;
}
.pd.pt-144 {
  padding-top: 144px;
}
.pd.pd-8 {
  padding: 8px;
}
.pd.pd-16 {
  padding: 16px;
}

.gap-2 {
  gap: 2px;
}
.gap-4 {
  gap: 4px;
}
.gap-6 {
  gap: 6px;
}
.gap-8 {
  gap: 8px;
}
.gap-10 {
  gap: 10px;
}
.gap-12 {
  gap: 12px;
}
.gap-16 {
  gap: 16px;
}
.gap-20 {
  gap: 20px;
}
.gap-24 {
  gap: 24px;
}
.gap-28 {
  gap: 28px;
}
.gap-32 {
  gap: 32px;
}
.gap-36 {
  gap: 36px;
}
.gap-40 {
  gap: 40px;
}
.gap-48 {
  gap: 48px;
}
.gap-64 {
  gap: 64px;
}
.gap-80 {
  gap: 80px;
}
.gap-144 {
  gap: 144px;
}

.overflow-visible {
  overflow: visible;
}
.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow-y: auto;
  padding-right: 4px;
  overflow-x: hidden;
}
.overflow-scroll::-webkit-scrollbar-thumb {
  background: transparent;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
}

.hover-text-underline:hover {
  text-decoration: underline;
  cursor: pointer;
}

.text-align--center {
  text-align: center;
}
.text-align--left {
  text-align: left;
}
.text-align--right {
  text-align: right;
}

button {
  outline: none;
  cursor: pointer;
  font: inherit;
}

body {
  font-family: "Pretendard", "NotoSansKR", 돋움, Dotum, Sans-Serief !important;
}

.sb-show-main {
  font-family: "Pretendard" !important;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.accordions {
  width: 100%;
  padding-inline-start: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.accordions-noborder .accordions-label {
  margin-inline-start: 4px;
}
.accordions-noborder .accordions-label--left {
  margin-inline-start: 6px;
}
.accordions-border {
  display: flex;
  width: inherit;
  height: inherit;
  align-items: center;
}
.accordions-border.hasBorder {
  border-bottom: 1px solid #e9ecef;
}
.accordions-label {
  margin-inline-start: 8px;
}
.accordions-label--left {
  margin-inline-start: 12px;
}
.accordions-label--right {
  margin-inline-start: auto;
  margin-inline-end: 16px;
}
.accordions-tag {
  margin-inline-start: 12px;
}
.accordions:hover:not(.disabled) {
  cursor: pointer;
  border-radius: 8px;
  background-color: #e9ecef;
}
.accordions:hover:not(.disabled).hasBackground {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.box-root {
  display: flex;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.typography {
  color: #252d38;
  line-height: normal;
}
.typography-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}
.typography-type--d1 {
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
}
.typography-type--d2 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}
.typography-type--d3 {
  font-size: 22px;
  line-height: 31px;
  font-weight: 700;
}
.typography-type--h1 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.typography-type--h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.typography-type--h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}
.typography-type--subtitle1 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.typography-type--subtitle2 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}
.typography-type--subtitle3 {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}
.typography-type--body1_rg {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.typography-type--body1_md {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.typography-type--body1_underline {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-decoration: underline;
}
.typography-type--body2_rg {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.typography-type--body2_md {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.typography-type--body2_underline {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: underline;
}
.typography-type--body2_rg_long {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}
.typography-type--body2_md_long {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
.typography-type--body2_underline_long {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  text-decoration: underline;
}
.typography-type--body3_rg {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}
.typography-type--body3_md {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}
.typography-type--body3_underline {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: underline;
}
.typography-type--body4_rg {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}
.typography-type--body4_md {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
.typography-type--body4_underline {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  text-decoration: underline;
}
.typography-type--caption_rg {
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
}
.typography-type--caption1_rg {
  font-size: 11px;
  line-height: 12px;
  font-weight: 400;
}
.typography-type--caption2_bold {
  font-size: 11px;
  line-height: 12px;
  font-weight: 700;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.fasooNewTooltip {
  user-select: none;
  -webkit-user-drag: none;
  padding: 6px 10px !important;
  background-color: #4b596b !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  color: #ffffff !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  text-align: center !important;
  z-index: 1;
  opacity: 1 !important;
}
.fasooNewTooltip.breakWord {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}
.fasooNewTooltip-success-label {
  display: block;
  font-weight: 700;
  color: #589bfa;
}
.fasooNewTooltip-error-label {
  display: block;
  font-weight: 700;
  color: #f77e6e;
}

.overflow-toolip-text {
  position: relative;
  overflow: hidden;
}
.overflow-toolip-text > span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.fasooToggle {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.fasooToggle-root {
  display: inline-block;
}
.fasooToggle.fasooToggle-size--sm .fasooToggle-unit {
  width: 28px;
  height: 16px;
}
.fasooToggle.fasooToggle-size--sm .fasooToggle-unit:after {
  content: "";
  width: 12px;
  height: 12px;
}
.fasooToggle.fasooToggle-size--sm.checked .fasooToggle-unit:after {
  inset-inline-start: 14px;
}
.fasooToggle-position--left .fasooToggle-txt {
  margin-inline-end: 8px;
}
.fasooToggle:first-child {
  margin-inline-start: 0;
}
.fasooToggle > label > input[type=checkbox] {
  display: none;
}
.fasooToggle .fasooToggle-unit {
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: #05c072;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.fasooToggle .fasooToggle-unit:after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #ffffff;
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  transition: left 0.5s;
}
.fasooToggle .fasooToggle-txt {
  vertical-align: middle;
  margin-inline-start: 8px;
}
.fasooToggle .fasooToggle-txt-none {
  color: #252d38;
}
.fasooToggle .fasooToggle-txt-on {
  color: #05c072;
}
.fasooToggle .fasooToggle-txt-off {
  color: #717985;
}
.fasooToggle.checked .fasooToggle-unit {
  background: #05c072;
}
.fasooToggle.checked .fasooToggle-unit:after {
  inset-inline-start: 18px;
}
.fasooToggle.unchecked .fasooToggle-unit {
  background: #717985;
}
.fasooToggle.disabled.checked .fasooToggle-unit {
  background: #b6e8cf;
  cursor: default;
}
.fasooToggle.disabled .fasooToggle-unit {
  background: #d1d6db;
  cursor: default;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
}
.avatar-cursor--default {
  cursor: default;
}
.avatar-cursor--pointer {
  cursor: pointer;
}
.avatar-shape--user {
  border-radius: 50%;
}
.avatar-shape--team {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.avatar-shape--workgroup {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.avatar.outline {
  border: 2px solid #ffffff !important;
}
.avatar-online {
  background-color: #05c072;
  border: 2px solid #ffffff;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
}
.avatar-size--20.avatar {
  width: 18px;
  height: 18px;
  min-width: 18px;
  max-width: 18px;
  min-height: 18px;
  max-height: 18px;
  font-size: 11px;
}
.avatar-size--20.avatar-shape--workgroup, .avatar-size--20.avatar-shape--team {
  border-radius: 8px;
}
.avatar-size--24.avatar {
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: 22px;
  min-height: 22px;
  max-height: 22px;
  font-size: 11px;
}
.avatar-size--24.avatar-shape--workgroup, .avatar-size--24.avatar-shape--team {
  border-radius: 8px;
}
.avatar-size--32.avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  max-width: 30px;
  min-height: 30px;
  max-height: 30px;
  font-size: 13px;
}
.avatar-size--32.avatar-shape--workgroup, .avatar-size--32.avatar-shape--team {
  border-radius: 12px;
}
.avatar-size--40.avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  max-width: 38px;
  min-height: 38px;
  max-height: 38px;
  font-size: 16px;
}
.avatar-size--40.avatar-shape--workgroup, .avatar-size--40.avatar-shape--team {
  border-radius: 16px;
}
.avatar-size--48.avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;
  max-width: 46px;
  min-height: 46px;
  max-height: 46px;
  font-size: 20px;
}
.avatar-size--48.avatar-shape--workgroup, .avatar-size--48.avatar-shape--team {
  border-radius: 20px;
}
.avatar-color--user_red.avatar {
  background-color: #feeae7;
  color: #ef5e4b;
  border: 1px solid rgba(239, 94, 75, 0.1);
}
.avatar-color--user_orange.avatar {
  background-color: #fef0de;
  color: #faa131;
  border: 1px solid rgba(250, 161, 49, 0.1);
}
.avatar-color--user_purple.avatar {
  background-color: #ece8ff;
  color: #8057ee;
  border: 1px solid rgba(128, 87, 238, 0.1);
}
.avatar-color--user_cyan.avatar {
  background-color: #daf9f9;
  color: #23a8a5;
  border: 1px solid rgba(35, 168, 165, 0.1);
}
.avatar-color--user_light_blue.avatar {
  background-color: #d9e7ff;
  color: #2f6ae9;
  border: 1px solid rgba(47, 106, 233, 0.1);
}
.avatar-color--user_yellow_orange.avatar {
  background-color: #fdf3d9;
  color: #d49c13;
  border: 1px solid rgba(212, 156, 19, 0.1);
}
.avatar-color--user_green.avatar {
  background-color: #dcf5e8;
  color: #05c072;
  border: 1px solid rgba(5, 192, 114, 0.1);
}
.avatar-color--user_deep_green.avatar {
  background-color: #e8f2d9;
  color: #64931a;
  border: 1px solid rgba(100, 147, 26, 0.1);
}
.avatar-color--user_deep_blue.avatar {
  background-color: #e4eaf9;
  color: #3e6ac8;
  border: 1px solid rgba(62, 106, 200, 0.1);
}
.avatar-color--user_pink.avatar {
  background-color: #fce8ed;
  color: #e9648a;
  border: 1px solid rgba(233, 100, 138, 0.1);
}
.avatar-color--user_cool_gray.avatar {
  background-color: #e4ebf2;
  color: #7287a2;
  border: 1px solid rgba(114, 135, 162, 0.1);
}
.avatar-color--user_other.avatar {
  background-color: #e4ebf2;
  color: #7287a2;
  border: 1px solid rgba(114, 135, 162, 0.1);
}
.avatar-color--team_red.avatar {
  background-color: #f77e6e;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_orange.avatar {
  background-color: #fcaf5c;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_purple.avatar {
  background-color: #9b77fc;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_cyan.avatar {
  background-color: #57cbc8;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_light_blue.avatar {
  background-color: #5e92f5;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_yellow_orange.avatar {
  background-color: #f6c243;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_green.avatar {
  background-color: #45ce85;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_deep_green.avatar {
  background-color: #8dbf3f;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_deep_blue.avatar {
  background-color: #3e6ac8;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_pink.avatar {
  background-color: #e9648a;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_cool_gray.avatar {
  background-color: #becbdd;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--team_other.avatar {
  background-color: #becbdd;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_green.avatar {
  background-color: #45ce85;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_deepGreen.avatar {
  background-color: #2d9a60;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_cyan.avatar {
  background-color: #57cbc8;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_deep_cyan.avatar {
  background-color: #149a97;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_yellow_orange.avatar {
  background-color: #f6c243;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_blue.avatar {
  background-color: #5e92f5;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_deep_blue.avatar {
  background-color: #3e6ac8;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_purple.avatar {
  background-color: #7548f0;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_deep_purple.avatar {
  background-color: #4d24ba;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_navy.avatar {
  background-color: #28538b;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_deep_navy.avatar {
  background-color: #719bd1;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_cool_gray.avatar {
  background-color: #becbdd;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_gray.avatar {
  background-color: #4b596b;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.avatar-color--workgroup_red.avatar {
  background-color: #becbdd;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.avatarGroup {
  display: flex;
  position: relative;
}
.avatarGroup .outline {
  border: 2px solid white;
}
.avatarGroup .outline:not(.avatarGroup-team) {
  border-radius: 50%;
}
.avatarGroup-size--20.avatarGroup-team, .avatarGroup-size--24.avatarGroup-team {
  border-radius: 8px;
}
.avatarGroup-size--32.avatarGroup-team {
  border-radius: 12px;
}
.avatarGroup-size--40.avatarGroup-team {
  border-radius: 16px;
}
.avatarGroup-size--48.avatarGroup-team {
  border-radius: 20px;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.badge {
  background-color: #ef5e4b;
  text-align: center;
}
.badge-noti {
  border-radius: 999px;
  width: 6px;
  height: 6px;
}
.badge-noti.badge-outline {
  box-shadow: 0 0 0 2px #ffffff;
}
.badge-count {
  padding: 2px 4px;
  border-radius: 10px;
  color: #ffffff;
  min-width: 16px;
  min-height: 16px;
  max-width: 32px;
  max-height: 32px;
  align-items: center;
  width: fit-content;
  height: fit-content;
  box-sizing: border-box;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.button {
  border-color: transparent;
  cursor: pointer;
  height: fit-content;
  border-radius: 8px;
  align-items: center;
  box-sizing: border-box;
}
.button-w {
  width: 100%;
}
.button > span + svg {
  margin-inline-start: auto;
}
.button-disable {
  cursor: auto;
}
.button-style--fill, .button-style--fill-round {
  border: 1px solid transparent;
}
.button-style--fill.button-type--primary, .button-style--fill-round.button-type--primary {
  background-color: #05c072;
}
.button-style--fill.button-type--primary > *,
.button-style--fill.button-type--primary > * > *, .button-style--fill-round.button-type--primary > *,
.button-style--fill-round.button-type--primary > * > * {
  color: #ffffff !important;
  fill: white;
}
.button-style--fill.button-type--primary:hover, .button-style--fill-round.button-type--primary:hover {
  background-color: #139f56;
}
.button-style--fill.button-type--primary.button-state--hover, .button-style--fill-round.button-type--primary.button-state--hover {
  background-color: #139f56;
}
.button-style--fill.button-type--primary.button-state--disable, .button-style--fill-round.button-type--primary.button-state--disable {
  background-color: #b6e8cf;
}
.button-style--fill.button-type--error, .button-style--fill-round.button-type--error {
  background-color: #feeae7;
}
.button-style--fill.button-type--error > *,
.button-style--fill.button-type--error > * > *, .button-style--fill-round.button-type--error > *,
.button-style--fill-round.button-type--error > * > * {
  color: #ef5e4b !important;
  fill: #ef5e4b;
}
.button-style--fill.button-type--error:hover, .button-style--fill-round.button-type--error:hover {
  background-color: #ef5e4b;
}
.button-style--fill.button-type--error:hover > *,
.button-style--fill.button-type--error:hover > * > *, .button-style--fill-round.button-type--error:hover > *,
.button-style--fill-round.button-type--error:hover > * > * {
  color: white !important;
  fill: white;
}
.button-style--fill.button-type--error.button-state--hover, .button-style--fill-round.button-type--error.button-state--hover {
  background-color: #ef5e4b;
}
.button-style--fill.button-type--error.button-state--hover > *,
.button-style--fill.button-type--error.button-state--hover > * > *, .button-style--fill-round.button-type--error.button-state--hover > *,
.button-style--fill-round.button-type--error.button-state--hover > * > * {
  color: white !important;
  fill: white;
}
.button-style--fill.button-type--error.button-state--disable, .button-style--fill-round.button-type--error.button-state--disable {
  background-color: #feeae7;
}
.button-style--fill.button-type--error.button-state--disable > *,
.button-style--fill.button-type--error.button-state--disable > * > *, .button-style--fill-round.button-type--error.button-state--disable > *,
.button-style--fill-round.button-type--error.button-state--disable > * > * {
  color: white !important;
  fill: white;
}
.button-style--fill.button-type--reverse, .button-style--fill-round.button-type--reverse {
  background-color: #eaf9f1;
}
.button-style--fill.button-type--reverse > *,
.button-style--fill.button-type--reverse > * > *, .button-style--fill-round.button-type--reverse > *,
.button-style--fill-round.button-type--reverse > * > * {
  color: #05c072 !important;
  fill: #05c072;
}
.button-style--fill.button-type--reverse:hover, .button-style--fill-round.button-type--reverse:hover {
  background-color: #05c072;
}
.button-style--fill.button-type--reverse:hover > *,
.button-style--fill.button-type--reverse:hover > * > *, .button-style--fill-round.button-type--reverse:hover > *,
.button-style--fill-round.button-type--reverse:hover > * > * {
  color: white !important;
  fill: white;
}
.button-style--fill.button-type--reverse.button-state--hover, .button-style--fill-round.button-type--reverse.button-state--hover {
  background-color: #05c072;
}
.button-style--fill.button-type--reverse.button-state--hover > *,
.button-style--fill.button-type--reverse.button-state--hover > * > *, .button-style--fill-round.button-type--reverse.button-state--hover > *,
.button-style--fill-round.button-type--reverse.button-state--hover > * > * {
  color: white !important;
  fill: white;
}
.button-style--fill.button-type--reverse.button-state--disable, .button-style--fill-round.button-type--reverse.button-state--disable {
  background-color: #eaf9f1;
}
.button-style--fill.button-type--reverse.button-state--disable > *,
.button-style--fill.button-type--reverse.button-state--disable > * > *, .button-style--fill-round.button-type--reverse.button-state--disable > *,
.button-style--fill-round.button-type--reverse.button-state--disable > * > * {
  color: white !important;
  fill: white;
}
.button-style--fill.button-type--secondary, .button-style--fill-round.button-type--secondary {
  background-color: #e9ecef;
}
.button-style--fill.button-type--secondary:hover, .button-style--fill-round.button-type--secondary:hover {
  background-color: #d1d6db;
}
.button-style--fill.button-type--secondary.button-state--hover, .button-style--fill-round.button-type--secondary.button-state--hover {
  background-color: #d1d6db;
}
.button-style--fill.button-type--secondary.button-state--disable, .button-style--fill-round.button-type--secondary.button-state--disable {
  background-color: #e9ecef;
}
.button-style--fill.button-type--secondary.button-state--disable > *,
.button-style--fill.button-type--secondary.button-state--disable > * > *, .button-style--fill-round.button-type--secondary.button-state--disable > *,
.button-style--fill-round.button-type--secondary.button-state--disable > * > * {
  color: #d1d6db !important;
  fill: #d1d6db;
}
.button-style--fill-round {
  border-radius: 20px !important;
  border: 1px solid transparent;
}
.button-style--link {
  padding: 5px 7px !important;
  background-color: transparent;
  border: 1px solid transparent;
  height: 32px !important;
}
.button-style--link:hover:not(.button-state--noHover) {
  background-color: #e9ecef;
}
.button-style--link.button-state--hover {
  background-color: #e9ecef;
}
.button-style--link.button-state--disable {
  background-color: transparent;
}
.button-style--link.button-state--disable > *,
.button-style--link.button-state--disable > * > * {
  color: #d1d6db !important;
  fill: #d1d6db;
}
.button-style--link.button-state--select {
  background-color: transparent;
}
.button-style--link.button-state--select.button-size--md {
  padding: 8px 22px;
}
.button-style--link.button-state--select > *,
.button-style--link.button-state--select > * > * {
  color: #05c072 !important;
  fill: #05c072;
}
.button-style--link.button-type--error > *,
.button-style--link.button-type--error > * > * {
  color: #ef5e4b !important;
  fill: #ef5e4b;
}
.button-style--link.button-type--error:hover {
  background-color: #feeae7;
}
.button-style--link.button-type--error:hover > *,
.button-style--link.button-type--error:hover > * > * {
  color: #ef5e4b !important;
  fill: #ef5e4b;
}
.button-style--link.button-type--secondary > *,
.button-style--link.button-type--secondary > * > * {
  color: #05c072 !important;
  fill: #05c072;
}
.button-style--link.button-type--secondary:hover {
  background-color: #eaf9f1;
}
.button-style--link.button-type--secondary:hover > *,
.button-style--link.button-type--secondary:hover > * > * {
  color: #05c072 !important;
  fill: #05c072;
}
.button-style--link.button-type--secondary.button-state--disable {
  background-color: transparent;
}
.button-style--link.button-type--secondary.button-state--disable > *,
.button-style--link.button-type--secondary.button-state--disable > * > * {
  color: #b6e8cf !important;
  fill: #b6e8cf;
}
.button-style--text {
  padding: 0px !important;
  background-color: transparent;
}
.button-style--text:hover:not(.button-state--noHover) {
  text-decoration: underline;
}
.button-style--text.button-state--hover {
  text-decoration: underline;
}
.button-style--round {
  border-radius: 20px;
  background-color: #ffffff;
  border: 1px solid #d1d6db;
  margin: 0px 1px 0px 1px;
}
.button-style--round:hover {
  background-color: #e9ecef;
}
.button-style--round.button-state--hover {
  background-color: #e9ecef;
}
.button-style--round.button-state--disable {
  background-color: transparent;
}
.button-style--round.button-state--disable > *,
.button-style--round.button-state--disable > * > * {
  color: #d1d6db !important;
  fill: #d1d6db;
}
.button-style--round.button-state--select {
  margin: 0px;
  border: 2px solid #05c072;
  background-color: #eaf9f1;
}
.button-style--round.button-state--select.button-size--md {
  padding: 8px 22px;
}
.button-style--round.button-state--select > *,
.button-style--round.button-state--select > * > * {
  color: #05c072 !important;
  fill: #05c072;
}
.button-style--round.button-state--clicked {
  border: 1px solid #05c072;
  background-color: #ffffff;
}
.button-style--line {
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #d1d6db;
}
.button-style--line:hover {
  background-color: #e9ecef;
}
.button-style--line.button-state--hover {
  background-color: #e9ecef;
}
.button-style--line.button-state--disable {
  background-color: #e9ecef;
}
.button-style--line.button-state--disable > *,
.button-style--line.button-state--disable > * > * {
  color: #d1d6db !important;
  fill: #d1d6db;
}
.button-style--line.button-state--select {
  border: 2px solid #05c072;
  background-color: #eaf9f1;
}
.button-style--line.button-state--select.button-size--md {
  padding: 8px 22px;
}
.button-style--line.button-state--select > *,
.button-style--line.button-state--select > * > * {
  color: #05c072 !important;
  fill: #05c072;
}
.button-style--line.button-state--clicked {
  border: 1px solid #05c072;
  background-color: #ffffff;
}
.button-style--icon {
  border: 1px solid transparent;
}
.button-style--icon:hover {
  background-color: #e9ecef;
}
.button-style--icon.button-state--hover {
  background-color: #e9ecef;
}
.button-style--icon.button-state--disable {
  background-color: transparent;
}
.button-style--icon.button-state--disable > *,
.button-style--icon.button-state--disable > * > * {
  fill: #d1d6db;
}
.button-style--icon.button-state--select {
  background-color: transparent;
}
.button-style--icon.button-state--select > *,
.button-style--icon.button-state--select > * > * {
  fill: #05c072;
}
.button-style--table-icon {
  border: 1px solid transparent;
}
.button-style--table-icon:hover {
  background-color: #d1d6db;
}
.button-style--table-icon.button-state--hover {
  background-color: #d1d6db;
}
.button-style--table-icon.button-state--disable {
  background-color: transparent;
}
.button-style--table-icon.button-state--disable > *,
.button-style--table-icon.button-state--disable > * > * {
  fill: #d1d6db;
}
.button-style--table-icon.button-state--select {
  background-color: transparent;
}
.button-style--table-icon.button-state--select > *,
.button-style--table-icon.button-state--select > * > * {
  fill: #05c072;
}
.button-state--disable {
  cursor: not-allowed;
}
.button-state--noClick {
  cursor: default;
}
.button-align--center {
  text-align: center;
}
.button-align--left {
  text-align: start;
}
.button-align--right {
  text-align: end;
}
.button-size--min {
  padding: 5px 7px;
  border-radius: 6px;
}
.button-size--min.hasIcon {
  padding: 6px 4px;
}
.button-size--min {
  height: 26px;
}
.button-size--sm {
  padding: 5px 11px;
  border-radius: 6px;
}
.button-size--sm.hasIcon {
  padding: 5px;
}
.button-size--sm {
  height: 32px;
}
.button-size--xsm {
  padding: 0px 6px !important;
  border-radius: 6px;
}
.button-size--xsm.hasIcon {
  padding: 0px;
}
.button-size--md {
  padding: 9px 23px;
}
.button-size--md.hasIcon {
  padding: 10px;
}
.button-size--md.button-style--table-icon, .button-size--md.button-style--icon {
  padding: 5px !important;
  height: 32px;
}
.button-size--md {
  height: 40px;
}
.button-size--lg {
  padding: 9px 31px;
}
.button-size--lg.hasIcon {
  padding: 9px 15px;
}
.button-size--lg.button-style--table-icon, .button-size--lg.button-style--icon {
  padding: 9px !important;
}
.button-size--lg {
  height: 40px;
}
.button-size--xlg {
  padding: 13px;
  height: 48px;
}
.button-size--rd {
  padding: 9px 15px;
}
.button-size--rd.hasIcon {
  padding: 10px;
}

:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.fds_out_canvas {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.fds_canvas {
  flex: 1;
}
.fds_canvas-header {
  min-width: 370px;
  height: 48px;
  align-items: center;
  background-color: #f6f8fa;
}
.fds_canvas-header > div > span {
  position: relative;
  top: -1px;
}
.fds_canvas-header input {
  text-align: right;
}
.fds_canvas-header .rotate90 > svg {
  transform: rotate(90deg);
}
.fds_canvas-webAssembly {
  width: 100%;
  height: calc(100% - 48px);
  min-width: 370px;
}
.fds_canvas-webAssembly-pdfThumbnail {
  width: 156px;
  min-width: 156px;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: #e9ecef;
}
.fds_canvas-webAssembly-pdfThumbnail > div {
  overflow-y: hidden;
  overflow-x: hidden;
}
.fds_canvas-webAssembly-pdfThumbnail-img {
  margin: 16px 20px 4px 20px;
  width: 108px;
  box-sizing: content-box;
  align-items: center;
  justify-content: center;
  background-color: #e9ecef;
  border: 3px solid transparent;
}
.fds_canvas-webAssembly-pdfThumbnail-img > div {
  cursor: pointer;
}
.fds_canvas-webAssembly-pdfThumbnail-img .selectPage {
  border: 3px solid #25c16f !important;
}
.fds_canvas-webAssembly-thumbnail {
  width: 156px;
  min-width: 156px;
  height: 100%;
  padding: 0px 0px 24px 0px;
  box-sizing: border-box;
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
  flex-direction: column;
  border-right: 1px solid #d1d6db;
  background-color: #e9ecef;
}
.fds_canvas-webAssembly-thumbnail-full {
  border-right: 0px !important;
  width: 0px !important;
  min-width: 0px !important;
}
.fds_canvas-webAssembly-thumbnail-img {
  margin: 16px 20px 4px 20px;
  width: 108px;
  box-sizing: content-box;
  align-items: center;
  justify-content: center;
  background-color: #e9ecef;
  border: 3px solid transparent;
}
.fds_canvas-webAssembly-thumbnail-img > img {
  width: 100% !important;
  height: auto !important;
}
.fds_canvas-webAssembly-thumbnail .pointer {
  cursor: pointer;
}
.fds_canvas-webAssembly-thumbnail .selectPage {
  border: 3px solid #25c16f !important;
}
.fds_canvas-webAssembly-thumbnail-label {
  height: 20px;
  width: 156px;
  align-items: center;
  justify-content: center;
}
.fds_canvas-webAssembly-annotaion {
  background-color: #ffffff;
  margin-bottom: 8px;
  padding: 4px 8px;
  align-items: center;
}
.fds_canvas-webAssembly-sheet {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
  flex-direction: row;
  height: 36px;
  margin: 2px 0px 8px 0px;
  border-bottom: 1px solid #d1d6db;
}
.fds_canvas-webAssembly-sheet-tab {
  padding: 8px 4px;
  align-items: center;
  cursor: pointer;
  background-color: #d1d6db;
  box-sizing: border-box;
  border-top: 2px solid #d1d6db;
}
.fds_canvas-webAssembly-sheet-tab-on {
  background-color: #ffffff !important;
}
.fds_canvas-webAssembly-sheet-tab > span > p {
  margin: 0px !important;
}
.fds_canvas-webAssembly-sheet-overlay-ar {
  position: absolute;
  left: 84px;
  height: 37px;
  margin-top: 2px;
  width: 36px;
  background: linear-gradient(90deg, #d1d6db 30.56%, rgba(209, 214, 219, 0) 100%);
  pointer-events: none; /* 클릭 막지 않음 */
}
.fds_canvas-webAssembly-sheet-overlay {
  position: absolute;
  right: 84px;
  height: 37px;
  margin-top: 2px;
  width: 36px;
  background: linear-gradient(270deg, #d1d6db 30.56%, rgba(209, 214, 219, 0) 100%);
  pointer-events: none; /* 클릭 막지 않음 */
}
.fds_canvas-webAssembly-sheet-endButton {
  margin-top: 2px;
  align-items: center;
  height: 37px;
  width: 84px;
  background-color: #d1d6db;
}
.fds_canvas-webAssembly-sheet-endButton-disable {
  cursor: default;
}
.fds_canvas-webAssembly-sheet-endButton-disable:hover {
  background-color: #d1d6db;
}
.fds_canvas-webAssembly-sheet-endButton-disable > svg > path {
  fill: #b5bbc2;
}
.fds_canvas-webAssembly-sheet-endLine {
  height: 38px;
  width: 84px;
  border-bottom: 1px solid #d1d6db;
}
.fds_canvas-webAssembly-sheet::-webkit-scrollbar {
  display: none;
}
.fds_canvas-webAssembly-body {
  background-color: #e9ecef;
}
.fds_canvas-webAssembly-body-canvas {
  position: relative;
}
.fds_canvas-webAssembly-body-canvas-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fds_canvas-webAssembly-body-canvas {
  justify-content: center;
}
.fds_canvas-webAssembly-body-canvas-center {
  align-items: center;
}
.fds_canvas-webAssembly-body-canvas-top {
  align-items: flex-start;
  overflow-y: scroll;
}
.fds_canvas-webAssembly-body-canvas-left {
  justify-content: flex-start;
  overflow-x: scroll;
}
.fds_canvas-webAssembly-body .rotate90 > svg {
  transform: rotate(90deg);
  transform-origin: center;
  display: block;
}
@media (max-width: 767px) {
  .fds_canvas .mobile-view {
    display: none !important;
  }
}
.fds_canvas .mobile-paging {
  display: none !important;
}
@media (max-width: 767px) {
  .fds_canvas .mobile-paging {
    display: block !important;
    background-color: #ffffff;
    height: 44px;
    z-index: 1;
  }
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.inputField {
  border-radius: 8px;
  border: 1px solid #d1d6db;
  transition: border-color 0.2s ease;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  outline-width: 0;
  outline: none;
  box-sizing: border-box;
}
.inputField-label--sm {
  margin-bottom: 4px;
}
.inputField-label--md {
  margin-bottom: 6px;
}
.inputField-label--lg {
  margin-bottom: 8px;
}
.inputField-label--search {
  margin-bottom: 8px;
}
.inputField-size--xsm {
  padding: 1px 7px;
}
.inputField-size--sm {
  padding: 5px 7px;
}
.inputField-size--md {
  padding: 9px 12px;
}
.inputField-size--md.hasLeadingIcon {
  padding-inline-start: 36px !important;
}
.inputField-size--lg {
  padding: 14px 12px;
}
.inputField-size--search {
  padding: 6px 6px 6px 12px;
  background-color: #f6f8fa;
  height: 32px;
  border-color: transparent;
  padding-inline-end: 210px;
}
.inputField:hover:not(.disabled, .inputField-size--search) {
  border-color: #b5bbc2;
}
.inputField:active:not(.disabled, .inputField-size--search), .inputField:focus:not(.disabled, .inputField-size--search), .inputField:focus-visible:not(.disabled, .inputField-size--search) {
  border-color: #05c072;
}
.inputField::placeholder {
  color: #b5bbc2;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.inputField.disabled {
  background-color: #e9ecef;
  color: #717985;
}
.inputField.disabled::placeholder {
  color: #d1d6db;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.inputField.isError {
  border-color: #ef5e4b !important;
}
.inputField.hasLeadingIcon {
  padding-inline-start: 32px;
}
.inputField.hasTrailingIcon:not(.inputField-size--search) {
  padding-inline-end: 32px;
}

.input {
  position: relative;
}
.input .leadingIcon {
  position: absolute;
}
.input .leadingIcon--sm {
  top: 6px;
  inset-inline-start: 8px;
}
.input .leadingIcon--md {
  top: 10px;
  inset-inline-start: 12px;
}
.input .leadingIcon--lg {
  top: 14px;
  inset-inline-start: 12px;
}
.input .leadingIcon--search {
  top: 6px;
  inset-inline-end: 8px;
}
.input .trailingIcon {
  position: absolute;
}
.input .trailingIcon--sm {
  top: 6px;
  inset-inline-end: 8px;
}
.input .trailingIcon--md {
  top: 10px;
  inset-inline-end: 12px;
}
.input .trailingIcon--lg {
  top: 14px;
  inset-inline-end: 12px;
}
.input .trailingIcon--search {
  top: 6px;
  inset-inline-end: 8px;
}
.input .wordAfterValue {
  position: absolute;
  font-size: 14px;
  line-height: 15px;
  top: calc((100% - 14px) / 2);
}

/* Chrome, Safari, Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.calendarSelect-header .dropdown > * > span {
  font-weight: 700;
}
.calendarSelect .react-datepicker {
  border: none;
  border-radius: 0;
  top: -3px;
  border-color: #e9ecef !important;
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
  border-radius: 10px !important;
}
.calendarSelect .react-datepicker .react-datepicker__header {
  background-color: #ffffff;
  color: #ffffff;
  padding: 20px 24px 0;
  border-bottom: none;
  border-radius: 10px;
}
.calendarSelect .react-datepicker .react-datepicker__header .react-datepicker__day-names {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin-top: 12px;
  margin-bottom: -6px;
}
.calendarSelect .react-datepicker .react-datepicker__header .react-datepicker__day-names .react-datepicker__day-name {
  color: #717985;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin: 0;
}
.calendarSelect .react-datepicker__week .react-datepicker__day--in-range:first-of-type {
  border-radius: 99px 0 0 99px;
}
.calendarSelect .react-datepicker__week .react-datepicker__day--in-range:last-of-type {
  border-radius: 0 99px 99px 0;
}
.calendarSelect .react-datepicker__triangle {
  display: none;
}
.calendarSelect .react-datepicker .react-datepicker__day {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0;
}
.calendarSelect .react-datepicker .react-datepicker__day > span {
  color: #252d38;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.calendarSelect .react-datepicker .react-datepicker__day:hover {
  background-color: transparent;
}
.calendarSelect .react-datepicker .react-datepicker__day--outside-month {
  cursor: default;
  visibility: hidden;
}
.calendarSelect .react-datepicker .react-datepicker__day:hover .datepicker--customDay {
  border-radius: 999px;
  background-color: #e9ecef;
  height: 40px;
  width: 40px;
}
.calendarSelect .react-datepicker .react-datepicker__day--keyboard-selected {
  outline: none;
  background-color: transparent;
}
.calendarSelect .react-datepicker .sunday {
  color: rgb(255, 0, 0);
}
.calendarSelect .react-datepicker .saturday {
  color: blue;
}
.calendarSelect .react-datepicker .react-datepicker__day--disabled {
  color: #b5bbc2;
}
.calendarSelect .react-datepicker .react-datepicker__day--selected {
  background-color: #05c072 !important;
  color: #ffffff !important;
  font-weight: 400;
  border-radius: 999px !important;
  border-color: none;
  outline: none;
}
.calendarSelect .react-datepicker .react-datepicker__day--today {
  background-color: #eaf9f1;
  font-weight: 400;
  border-radius: 999px;
}
.calendarSelect .react-datepicker .react-datepicker__day--in-selecting-range,
.calendarSelect .react-datepicker .react-datepicker__day--in-range {
  background-color: #eaf9f1;
  border-radius: 0;
  position: relative;
  color: #252d38;
}
.calendarSelect .react-datepicker .react-datepicker__day--in-selecting-range:hover,
.calendarSelect .react-datepicker .react-datepicker__day--in-range:hover {
  background-color: #eaf9f1;
}
.calendarSelect .react-datepicker .react-datepicker__day--range-start {
  background-color: transparent;
}
.calendarSelect .react-datepicker .react-datepicker__day--range-start > .datepicker--customDay {
  background-color: #05c072 !important;
  color: #ffffff;
  border-radius: 999px;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendarSelect .react-datepicker .react-datepicker__day--range-start::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 40px;
  background-color: #eaf9f1;
  z-index: 1;
  top: 0;
}
.calendarSelect .react-datepicker .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: #eaf9f1;
}
.calendarSelect .react-datepicker .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range):first-of-type {
  border-radius: 99px 0 0 99px;
}
.calendarSelect .react-datepicker .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range):last-of-type {
  border-radius: 0 99px 99px 0;
}
.calendarSelect .react-datepicker .react-datepicker__day--in-selecting-range--end {
  background-color: blue;
}
.calendarSelect .react-datepicker .react-datepicker__day--range-end {
  background-color: transparent;
}
.calendarSelect .react-datepicker .react-datepicker__day--range-end:hover .datepicker--customDay {
  background-color: #05c072 !important;
  color: #ffffff;
}
.calendarSelect .react-datepicker .react-datepicker__day--range-end > .datepicker--customDay {
  background-color: #05c072 !important;
  color: #ffffff;
  border-radius: 999px;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendarSelect .react-datepicker .react-datepicker__day--range-end::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 40px;
  background-color: #eaf9f1;
  z-index: 1;
  top: 0;
  inset-inline-start: 0;
}
.calendarSelect .react-datepicker__triangle {
  display: none;
}
.calendarSelect .datepicker--customDay {
  border-radius: 999px !important;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendarSelect.isClient .react-datepicker__children-container {
  display: none;
}
.calendarSelect.isClient .react-datepicker__header {
  padding-top: 17px !important;
}
.calendarSelect.isClient .react-datepicker__day-names {
  margin-top: 8px !important;
  height: 38px;
}
.calendarSelect.isClient .react-datepicker__day {
  height: 38px !important;
  line-height: 38px !important;
}
.calendarSelect .react-datepicker__children-container {
  width: 100% !important;
}
.calendarSelect .react-datepicker__children-container > * {
  width: calc(100% - 20px);
  display: inline-flex;
}
.calendarSelect .react-datepicker__children-container .calendar-footer {
  width: 100%;
  height: 60px;
  border-top: 1px solid #e9ecef;
  justify-content: flex-end;
  align-items: flex-end;
}
.calendarSelect--sm .react-datepicker {
  left: 4px !important;
}
.calendarSelect--sm .button-style--link {
  padding: 5px !important;
}
.calendarSelect--sm .react-datepicker__month {
  padding-bottom: 14px;
}
.calendarSelect--sm .react-datepicker__month-container {
  width: 286px;
}
.calendarSelect--sm .datepicker--customDay {
  height: 32px !important;
  width: 32px !important;
}
.calendarSelect--sm .react-datepicker__week {
  padding: 1px;
}
.calendarSelect--sm .react-datepicker__day {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
}
.calendarSelect--sm .react-datepicker__day-name {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
}
.calendarSelect--sm .react-datepicker__day:hover .datepicker--customDay {
  height: 32px !important;
  width: 32px !important;
}
.calendarSelect--sm .react-datepicker__day--range-start > .datepicker--customDay,
.calendarSelect--sm .react-datepicker__day--range-end > .datepicker--customDay {
  width: 32px !important;
  height: 32px !important;
}
.calendarSelect--sm .react-datepicker__day--range-start::after,
.calendarSelect--sm .react-datepicker__day--range-end::after {
  width: 16px;
  height: 32px;
}

.datePicker-input.disabled {
  background-color: #e9ecef;
}
.datePicker-input--sm {
  height: 32px !important;
}
.datePicker-input--md {
  height: 40px;
}

.timePicker {
  border-top: 1px solid #e9ecef;
  margin: 0 14px;
  align-items: center !important;
  justify-content: flex-start !important;
}

.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.dropdown {
  position: relative;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.dropdown-body {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #d1d6db;
  background-color: #ffffff;
  overflow: auto;
  position: absolute;
  z-index: 100;
}
.dropdown-body::-webkit-scrollbar {
  width: 4px;
  height: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}
.dropdown-body:hover::-webkit-scrollbar {
  opacity: 1;
}
.dropdown-body::-webkit-scrollbar-button:start:decrement, .dropdown-body::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  width: 0;
  background: transform;
}
.dropdown-body::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
  border-inline-end: 8px solid transparent;
  -webkit-border-radius: 4px;
}
.dropdown-body::-webkit-scrollbar-thumb:after {
  content: "";
  width: 20px;
  background: #ffffff;
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
}
.dropdown-body {
  border: 1px solid #e9ecef;
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
  box-sizing: border-box;
}
.dropdown-body-right {
  inset-inline-end: 0;
}
.dropdown-item.isSVGMargin > svg {
  margin-inline-end: 8px;
}
.dropdown-item {
  padding: 10px 8px;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
}
.dropdown-item > svg {
  min-width: 20px;
}
.dropdown-item:hover {
  background-color: #e9ecef;
}
.dropdown-item:hover.dropdown-item--warning {
  background-color: #feeae7;
}
.dropdown-item:focus {
  background-color: #e9ecef;
  outline: none;
}
.dropdown-item:active {
  background-color: #eaf9f1;
}
.dropdown-item--divider {
  width: 100%;
  border-bottom: 1px solid #e9ecef;
  margin: 4px 0;
}
.dropdown-item--warning > span {
  color: #ef5e4b !important;
}
.dropdown-item--warning > svg > path {
  fill: #ef5e4b !important;
}
.dropdown-item--warning > p {
  color: #ef5e4b !important;
}
.dropdown-item--info > span {
  color: #b5bbc2 !important;
}
.dropdown-item--info > svg > path {
  fill: #b5bbc2 !important;
}
.dropdown-item--info > p {
  color: #b5bbc2 !important;
}
.dropdown-disabled {
  padding: 10px 8px;
  align-items: center;
  border-radius: 8px;
}
.dropdown-disabled > svg {
  margin-inline-end: 8px;
  min-width: 20px;
}
.dropdown-disabled > span {
  color: #d1d6db !important;
}
.dropdown-disabled > svg > path {
  fill: #d1d6db !important;
}
.dropdown-disabled > p {
  color: #d1d6db !important;
}
.dropdown-checkColor {
  background-color: #eaf9f1;
}
.dropdown-checkSubColor {
  background-color: #e9ecef;
}
.dropdown-textLeft {
  text-align: start;
}
.dropdown-textRight {
  text-align: end;
}
.dropdown-textCenter {
  text-align: center;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.checkbox-item {
  width: 18px;
  height: 18px;
  border: 1px solid #d1d6db;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  cursor: pointer;
}
.checkbox-item > * > * {
  fill: #d1d6db;
}
.checkbox-item:hover {
  border-color: #05c072;
}
.checkbox-item-type--check {
  border-radius: 6px;
}
.checkbox-item-type--select {
  border-radius: 999px;
}
.checkbox-item.checked {
  background-color: #05c072 !important;
  border-color: #05c072 !important;
}
.checkbox-item.checked > * > * {
  fill: #ffffff;
}
.checkbox-item.checked.disabled {
  background-color: #b6e8cf !important;
  border-color: #b6e8cf !important;
}
.checkbox-item.checked.disabled > * > * {
  fill: #ffffff;
}
.checkbox-item.disabled {
  background-color: #e9ecef;
}
.checkbox-item.disabled > * > * {
  fill: #d1d6db;
}
.checkbox-item.indeterminated {
  background-color: #05c072;
  border-color: #05c072;
}
.checkbox-item.indeterminated > * > * {
  fill: #ffffff;
}
.checkbox-item.indeterminated.disabled {
  background-color: #b6e8cf;
  border-color: #b6e8cf;
  cursor: not-allowed;
}
.checkbox-item.indeterminated.disabled > * > * {
  fill: #ffffff;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.timepicker {
  position: relative;
}
.timepicker .timeHeader {
  padding: 10px 13px;
  border: 1px solid #d1d6db;
  border-radius: 8px;
}
.timepicker .timeHeader.isOn {
  border-color: #05c072;
}
.timepicker .timeHeader.isDisabled {
  cursor: not-allowed;
  pointer-events: none;
  background-color: #e9ecef;
}
.timepicker > .dropdown-body {
  padding: 0;
}
.timepicker-dropdown--upper {
  padding: 0 24px;
}
.timepicker-dropdown--under {
  flex-direction: column;
  padding: 0 24px 20px;
  align-items: center;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.datePicker-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d6db;
  border-radius: 8px;
  background-color: white;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  color: #252d38;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}
.datePicker-input:focus-visible {
  outline: 1px solid #05c072;
}
.datePicker-input:focus {
  outline: 1px solid #05c072;
}
.datePicker-input.focused {
  border-color: #05c072;
}

.calendarRange.isSameDay .react-datepicker .react-datepicker__day--range-start::after,
.calendarRange.isSameDay .react-datepicker .react-datepicker__day--range-end::after {
  background-color: transparent !important;
}
.calendarRange.isClient > .first .react-datepicker {
  position: fixed;
  transform: translate(0, -50%);
}
.calendarRange.isClient > .last .react-datepicker {
  position: fixed;
  transform: translate(-50%, -50%);
}
.calendarRange .react-datepicker {
  top: 0px;
  border: none;
  border-radius: 0;
  border-color: #e9ecef !important;
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
  border-radius: 10px !important;
  padding-bottom: 19px;
}
.calendarRange .react-datepicker .react-datepicker__header {
  background-color: #ffffff;
  color: #ffffff;
  padding: 20px 24px 0;
  border-bottom: none;
  border-radius: 0;
}
.calendarRange .react-datepicker .react-datepicker__header .react-datepicker__day-names {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin-top: 12px;
}
.calendarRange .react-datepicker .react-datepicker__header .react-datepicker__day-names .react-datepicker__day-name {
  color: #717985;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin: 0 !important;
}
.calendarRange .react-datepicker__week .react-datepicker__day--in-range:first-of-type {
  border-radius: 99px 0 0 99px;
}
.calendarRange .react-datepicker__week .react-datepicker__day--in-range:last-of-type {
  border-radius: 0 99px 99px 0;
}
.calendarRange .react-datepicker__triangle {
  display: none;
}
.calendarRange .react-datepicker .react-datepicker__day {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0;
}
.calendarRange .react-datepicker .react-datepicker__day > span {
  color: #252d38;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.calendarRange .react-datepicker .react-datepicker__day:hover {
  background-color: transparent;
}
.calendarRange .react-datepicker .react-datepicker__day--outside-month {
  cursor: default;
  visibility: hidden;
}
.calendarRange .react-datepicker .react-datepicker__day:hover .datepicker--customDay {
  border-radius: 999px;
  background-color: #e9ecef;
  height: 40px;
  width: 40px;
}
.calendarRange .react-datepicker .react-datepicker__day--keyboard-selected {
  outline: none;
  background-color: transparent;
  color: #05c072;
}
.calendarRange .react-datepicker .sunday {
  color: rgb(255, 0, 0);
}
.calendarRange .react-datepicker .saturday {
  color: blue;
}
.calendarRange .react-datepicker .react-datepicker__day--weekend {
  color: #252d38;
}
.calendarRange .react-datepicker .react-datepicker__day--disabled {
  color: #b5bbc2 !important;
}
.calendarRange .react-datepicker .react-datepicker__day--disabled > * {
  color: #b5bbc2 !important;
}
.calendarRange .react-datepicker .react-datepicker__day--selected {
  color: #ffffff !important;
  font-weight: 400;
  border-radius: 999px;
  border-color: none;
  outline: none;
}
.calendarRange .react-datepicker .react-datepicker__day--today {
  background-color: #eaf9f1 !important;
  font-weight: 400;
  border-radius: 999px;
}
.calendarRange .react-datepicker .react-datepicker__day--in-selecting-range,
.calendarRange .react-datepicker .react-datepicker__day--in-range {
  background-color: #eaf9f1 !important;
  border-radius: 0;
  position: relative;
  color: #252d38;
}
.calendarRange .react-datepicker .react-datepicker__day--in-selecting-range:hover:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end),
.calendarRange .react-datepicker .react-datepicker__day--in-range:hover:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end) {
  background-color: #eaf9f1;
}
.calendarRange .react-datepicker .react-datepicker__day--selected > .datepicker--customDay,
.calendarRange .react-datepicker .react-datepicker__day--selecting-range-start > .datepicker--customDay,
.calendarRange .react-datepicker .react-datepicker__day--selecting-range-end > .datepicker--customDay {
  background-color: #05c072 !important;
  color: #ffffff;
  border-radius: 999px;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendarRange .react-datepicker .react-datepicker__day--range-start {
  background-color: transparent !important;
}
.calendarRange .react-datepicker .react-datepicker__day--range-start > .datepicker--customDay {
  background-color: #05c072 !important;
  color: #ffffff;
  border-radius: 999px;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendarRange .react-datepicker .react-datepicker__day--range-start::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 40px;
  background-color: #eaf9f1;
  z-index: 1;
  top: 0;
}
.calendarRange .react-datepicker .react-datepicker__day--range-start:hover {
  background-color: transparent;
}
.calendarRange .react-datepicker .react-datepicker__day--range-end {
  background-color: transparent !important;
}
.calendarRange .react-datepicker .react-datepicker__day--range-end:hover .datepicker--customDay {
  background-color: #05c072 !important;
  color: #ffffff;
}
.calendarRange .react-datepicker .react-datepicker__day--range-end > .datepicker--customDay {
  background-color: #05c072 !important;
  color: #ffffff;
  border-radius: 999px;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendarRange .react-datepicker .react-datepicker__day--range-end::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 40px;
  background-color: #eaf9f1;
  z-index: 1;
  top: 0;
  left: 0;
}
.calendarRange .react-datepicker .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: #eaf9f1;
}
.calendarRange .react-datepicker .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range):first-of-type {
  border-radius: 99px 0 0 99px;
}
.calendarRange .react-datepicker .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range):last-of-type {
  border-radius: 0 99px 99px 0;
}
.calendarRange .react-datepicker .dropdown > * > span {
  font-weight: 700;
}
.calendarRange .react-datepicker__triangle {
  display: none;
}
.calendarRange .datepicker--customDay {
  color: #252d38;
  border-radius: 999px !important;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendarRange .react-datepicker__children-container {
  width: 100% !important;
}
.calendarRange .react-datepicker__children-container > div {
  display: inline-flex;
  width: calc(100% - 20px);
  height: 60px;
  border-top: 1px solid #e9ecef;
  justify-content: flex-end;
  align-items: flex-end;
}

:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.virtuoso-grid-list {
  width: calc(100% - 8px);
  display: grid;
  gap: 16px;
  padding-inline-end: 8px;
}
.virtuoso-grid-list .virtuoso-grid-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 10px;
  overflow: visible;
  text-align: start;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #d1d6db;
  background-color: #f6f8fa;
}
.virtuoso-grid-list .virtuoso-grid-item:hover {
  border: 1px solid #e9ecef;
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
}
.virtuoso-grid-list .virtuoso-grid-item > div {
  height: 100%;
}

.cards-color--white .virtuoso-grid-item {
  background-color: #ffffff;
}
.cards-color--white .virtuoso-grid-item:hover {
  background-color: #e9ecef;
}
.cards-size-sm .virtuoso-grid-list {
  grid-template-columns: repeat(auto-fill, minmax(223px, 1fr)); /* 카드의 최소 너비와 자동 조정 */
}
.cards-size-sm .virtuoso-grid-item {
  flex: 1 0 223px;
  min-width: 223px;
  height: 299px;
}
.cards-size-smd .virtuoso-grid-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* 카드의 최소 너비와 자동 조정 */
}
.cards-size-smd .virtuoso-grid-item {
  flex: 1 0 260px;
  min-width: 260px;
  height: 108px;
}
.cards-size-md .virtuoso-grid-list {
  grid-template-columns: repeat(auto-fill, minmax(302px, 1fr)); /* 카드의 최소 너비와 자동 조정 */
}
.cards-size-md .virtuoso-grid-item {
  flex: 1 0 302px;
  min-width: 302px;
  height: 378px;
}
.cards-size-lg .virtuoso-grid-list {
  grid-template-columns: repeat(auto-fill, minmax(462px, 1fr)); /* 카드의 최소 너비와 자동 조정 */
}
.cards-size-lg .virtuoso-grid-item {
  flex: 1 0 462px;
  min-width: 462px;
  height: 538px;
}
.cards-size-docAgent .virtuoso-grid-list {
  grid-template-columns: repeat(auto-fill, minmax(359px, 1fr)); /* 카드의 최소 너비와 자동 조정 */
}
.cards-size-docAgent .virtuoso-grid-item {
  flex: 1 0 359px;
  min-width: 359px;
  height: 140px;
}
.cards-size-video .virtuoso-grid-list {
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); /* 카드의 최소 너비와 자동 조정 */
}
.cards-size-video .virtuoso-grid-item {
  flex: 1 0 272px;
  min-width: 272px;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.chatItem {
  padding-top: 20px;
}

.chatFirst {
  height: 16px;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.inifinteScroll > * {
  width: calc(100% - 4px);
  padding-inline-end: 4px;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.chip {
  align-items: center;
  max-width: 100%;
  width: fit-content;
  border-radius: 999px;
}
.chip-text {
  padding: 0 4px;
}
.chip-size--sm {
  padding: 2px 8px;
  min-height: 24px;
}
.chip-size--md {
  padding: 6px 8px;
  min-height: 32px;
}
.chip-close {
  cursor: pointer;
}
.chip-close:hover > * > * {
  fill: #252d38;
}
.chip-close-state--error > * > * {
  fill: #ef5e4b;
}
.chip-type--with_avatar {
  background-color: #e9ecef;
  align-items: center;
  padding: 0 8px 0 0;
}
.chip-type--fill {
  background-color: #e9ecef;
}
.chip-type--outline {
  border: 1px solid #d1d6db;
}
.chip-type--emphasis {
  border: 1px solid;
}
.chip-state--error {
  border-color: #feeae7;
  background-color: #feeae7;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.drag {
  cursor: grab;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.filter {
  border: 1px solid #d1d6db;
  padding: 16px 24px 20px 24px;
  background-color: #f6f8fa;
  border-radius: 12px;
  flex-direction: column;
}
.filter-float {
  border: 1px solid #e9ecef;
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
}
.filter-header {
  padding-bottom: 4px;
  border-bottom: 1px solid #d1d6db;
}
.filter-body {
  margin: 16px 0 24px;
  overflow: auto;
  width: 100%;
  height: 100%;
  padding-inline-end: 20px;
}
.filter-body > div {
  width: 100%;
}
.filter-body > div > * + * {
  margin-top: 28px;
}
.filter-body .filter-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #717985;
}
.filter-body .filter-content {
  width: 100%;
  margin-top: 6px;
}
.filter-footer {
  margin-top: auto;
  padding-top: 8px;
}

:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.header {
  background-color: white;
  align-items: center;
  justify-content: space-between;
}
.header.isBorderBottom {
  border-bottom: 1px solid #e9ecef;
}
.header-left {
  overflow: visible;
  margin-inline-end: 8px;
}
.header-main {
  /* 아이콘은 툴팁 안생기는 현상때문에 강제 주입*/
}
.header-main > span:last-child {
  height: 20px;
}
.header-main--label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-type--pageHeader {
  padding: 0 32px;
}
.header-rightButtons > * + * {
  margin-inline-start: 10px;
}
.header-path {
  cursor: pointer;
}
.header-path:hover > span {
  color: #252d38 !important;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.tag {
  font-size: 11px;
  line-height: 12px;
  font-weight: 400;
  text-align: center;
  align-items: center;
}
.tag-box {
  padding: 2px 4px;
  width: fit-content;
}
.tag > .bullet {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  margin: 5px;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.inputArea {
  border-radius: 8px;
  font-family: "Pretendard";
  border: 1px solid #d1d6db;
  box-sizing: border-box;
  height: 100%;
  outline: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  resize: none;
}
.inputArea-size--sm {
  padding: 9px 11px;
}
.inputArea-size--md {
  padding: 12px;
}
.inputArea-size--lg {
  padding: 14px 12px;
}
.inputArea:hover:not(.disabled) {
  border-color: #b5bbc2;
}
.inputArea:active:not(.disabled), .inputArea:focus:not(.disabled), .inputArea:focus-visible:not(.disabled) {
  outline-width: 0;
  border: 1px solid #05c072;
}
.inputArea::placeholder {
  color: #b5bbc2;
}
.inputArea.disabled {
  background-color: #e9ecef;
  color: #717985;
}
.inputArea.disabled::placeholder {
  color: #d1d6db;
}
.inputArea.isError {
  border-color: #ef5e4b !important;
}
.inputArea-counter-wrapper {
  position: relative;
  border: 1px solid #d1d6db;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 50px;
  box-sizing: border-box;
  clip: rect(auto, auto, calc(100% - 40px), auto);
}
.inputArea-counter-wrapper:has(.inputArea-counter-area:focus) {
  border-color: #05c072;
}
.inputArea-counter-wrapper:hover {
  border-color: #b5bbc2;
}
.inputArea-counter-wrapper.disabled {
  border-color: #d1d6db;
}
.inputArea-counter-wrapper.disabled .inputArea-counter-text {
  background-color: #e9ecef;
}
.inputArea-counter-wrapper.isError {
  border-color: #ef5e4b !important;
}
.inputArea-counter-area {
  position: absolute;
  top: 0;
  width: 100%;
  border: none;
  border-radius: 0;
}
.inputArea-counter-area:focus {
  border: none !important;
}
.inputArea-counter-area {
  padding-bottom: 0px !important;
}
.inputArea-counter-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  justify-content: end;
  align-items: center;
  background-color: #ffffff;
}
.inputArea-counter-text-count {
  margin-inline-end: 12px;
}
.inputArea-trailingIcon {
  position: absolute;
  right: 24px;
  top: calc((100% - 25px) / 2);
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.lnb {
  height: 100vh;
  width: 100%;
  padding: 28px 12px 10px;
  background-color: #f6f8fa;
  overflow-y: auto;
  overflow-x: hidden;
  border-inline-end: 4px solid transparent !important;
}
.lnb.hasOpenButton {
  padding: 12px;
}
.lnb.hasOpenButton.isClosed {
  width: 40px !important;
}
.lnb.hasOpenButton.isClosed > span > div {
  min-width: 20px;
}
.lnb-button {
  width: auto;
  padding: 10px 12px;
  cursor: pointer;
  margin-bottom: 4px;
  border-radius: 8px;
}
.lnb-button > * + * {
  margin-inline-start: 12px;
}
.lnb-button.selected {
  background-color: #05c072;
}
.lnb-button.selected > *,
.lnb-button.selected > * > *,
.lnb-button.selected > * > * > * {
  fill: #ffffff;
  color: #ffffff;
  font-weight: 700;
}
.lnb-button.selected > .hasStroke > * {
  stroke: #ffffff;
}
.lnb-button.hidden {
  visibility: hidden;
}
.lnb-button:hover:not(.selected) > *,
.lnb-button:hover:not(.selected) > * > *,
.lnb-button:hover:not(.selected) > * > * > * {
  fill: #05c072;
  color: #05c072;
}
.lnb-button:hover:not(.selected) > .hasStroke > * {
  stroke: #05c072;
}
.lnb-label {
  margin: 20px 12px 8px;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.fds-modal-backdrop-root.on {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  background-color: #000000;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  opacity: 0.2;
}

.fds-modal-root-NEW {
  display: none;
}
.fds-modal-root-NEW.on {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fds-modal-root-NEW.isClient > .inner {
  border-radius: 0px !important;
}
.fds-modal-root-NEW > .borderNone {
  position: relative;
  background: #ffffff;
  max-height: 100%;
}
.fds-modal-root-NEW.showScrollbar .fds-modal-body.overflow-scroll::-webkit-scrollbar-thumb {
  background: #b5bbc2;
}
.fds-modal-root-NEW > .inner {
  position: relative;
  background: #ffffff;
  border: 1px solid #e9ecef;
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
  border-radius: 8px;
  max-height: 100%;
  overflow-y: auto;
}
.fds-modal-root-NEW > .inner:hover .fds-modal-body.overflow-scroll::-webkit-scrollbar-thumb {
  background: #b5bbc2;
}
.fds-modal-root-NEW .fds-modal-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
}
.fds-modal-root-NEW .fds-modal-header-pd20 {
  padding: 20px 28px 19px 28px;
}
.fds-modal-root-NEW .fds-modal-header-pd16 {
  padding: 16px 28px 15px 28px;
}
.fds-modal-root-NEW .fds-modal-header-title {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.fds-modal-root-NEW .fds-modal-header-title-main {
  color: #252d38;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  height: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.fds-modal-root-NEW .fds-modal-header-title-main-button {
  margin-inline-end: 8px;
}
.fds-modal-root-NEW .fds-modal-header-title-main-number {
  color: #b5bbc2;
  margin-inline-start: 8px;
}
.fds-modal-root-NEW .fds-modal-header-title-sub {
  color: #717985;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  height: 18px;
  margin-top: 4px;
}
.fds-modal-root-NEW .fds-modal-header-divider {
  border-bottom: 1px solid #e9ecef;
}
.fds-modal-root-NEW .fds-modal-header.dynamic-header-divider {
  border-bottom: 1px solid #e9ecef;
}
.fds-modal-root-NEW .fds-modal-body {
  height: 100%;
}
.fds-modal-root-NEW .fds-modal-body-msg {
  white-space: break-spaces;
  color: #717985;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.fds-modal-root-NEW .fds-modal-body-msg.isMobile {
  color: #252d38;
}
.fds-modal-root-NEW .fds-modal-footer {
  padding: 23px 28px 24px 28px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid transparent;
}
.fds-modal-root-NEW .fds-modal-footer--mobile {
  cursor: pointer;
  border-top: 1px solid #d1d6db;
}
.fds-modal-root-NEW .fds-modal-footer--mobile > div > * {
  width: 50%;
  align-items: center;
  justify-content: center;
}
.fds-modal-root-NEW .fds-modal-footer--mobile > div > * + * {
  border-inline-start: 1px solid #d1d6db;
}
.fds-modal-root-NEW .fds-modal-footer > div > div {
  margin-inline-start: 8px;
}
.fds-modal-root-NEW .fds-modal-footer-divider {
  border-top: 1px solid #e9ecef;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.pageIndicator {
  display: flex;
  justify-content: center;
  list-style: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.pageIndicator > * + * {
  margin-inline-start: 8px;
}
.pageIndicator_item {
  color: #717985;
  width: 32px;
  height: 32px;
  align-items: center;
  display: flex;
  cursor: pointer;
  justify-content: center;
}
.pageIndicator_item:hover {
  color: #05c072;
  background-color: #eaf9f1;
  border-radius: 50%;
}
.pageIndicator_cursor_disabled {
  color: #ffffff;
  width: 32px;
  height: 32px;
  align-items: center;
  display: flex;
  justify-content: center;
}
.pageIndicator_cursor {
  color: #ffffff;
  width: 32px;
  height: 32px;
  align-items: center;
  display: flex;
  cursor: pointer;
  justify-content: center;
}
.pageIndicator_cursor:hover {
  background-color: #e9ecef;
  border-radius: 50%;
}
.pageIndicator_currPage {
  color: #ffffff;
  background-color: #05c072;
  border-radius: 50%;
}

.pageIndicator-box {
  height: 64px;
  align-items: center;
  justify-content: space-between;
  display: inline-flex;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.popup {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid #d1d6db;
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
  z-index: 50;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.radio-item {
  width: 19px;
  min-width: 19px;
  height: 19px;
  border: 1px solid #d1d6db;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 999px;
  cursor: pointer;
}
.radio-item > * > * {
  fill: #d1d6db;
}
.radio-item:hover {
  border-color: #05c072;
}
.radio-item.checked {
  background-color: #05c072;
}
.radio-item.checked > * > * {
  fill: #ffffff;
}
.radio-item.checked.disabled {
  background-color: #b6e8cf;
  border-color: #b6e8cf;
}
.radio-item.checked.disabled > * > * {
  fill: #ffffff;
}
.radio-item.disabled {
  background-color: #e9ecef;
}
.radio-item.disabled > * > * {
  fill: #d1d6db;
}
.radio-item-left-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-inline-end: 8px;
}
.radio-item-right-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-inline-start: 8px;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.fasooSkeleton {
  background: linear-gradient(90deg, #f6f8fa 25%, #d1d6db 50%, #f6f8fa 75%);
  background-size: 200% 100%;
  animation: fasooSkeleton-shimmer 1.4s infinite;
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
}
.fasooSkeleton-text {
  border-radius: 4px;
}

@keyframes fasooSkeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.fasooSpinner,
.fasooSpinner:after {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.fasooSpinner {
  margin: 0;
  position: relative;
  text-indent: -9999em;
  border-top: 2.4px solid #e9ecef;
  border-inline-end: 2.4px solid #e9ecef;
  border-bottom: 2.4px solid #e9ecef;
  border-inline-start: 2.4px solid;
  border-style: solid;
  border-color: #e9ecef;
  border-left-color: #05c072;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.2s infinite linear;
  animation: load8 1.2s infinite linear;
  color: #05c072;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.fasooSpinnerBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fasooSpinnerBox > span {
  display: inline-block;
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.fasooTable {
  width: 100%;
}
.fasooTable-row-border-bottom {
  position: relative;
}
.fasooTable-row-border-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e9ecef;
}
.fasooTable-row-border-boundary {
  border: 1px solid #d1d6db !important;
  border-collapse: separate !important;
  margin-bottom: 8px;
}
.fasooTable-row-border-boundary.fasooTable-row-color_bg_interactive_primary_hover--theme {
  border-color: #05c072 !important;
}

.fasooTable-window {
  width: calc(100% + 6px);
}
.fasooTable-window > div {
  scrollbar-gutter: stable;
}
.fasooTable-window > div > div {
  margin-inline-start: 1px !important;
  margin-top: 1px !important;
  width: calc(100% - 2px) !important;
  height: calc(100% - 1px) !important;
}

.fasooTable-spacing {
  border-spacing: 0 8px;
}
.fasooTable-spacing > .fasooTable-header {
  margin-bottom: 8px;
}

.fasooTable-noneSpacing {
  border-collapse: collapse;
}

.fasooTable-header {
  display: flex;
  width: 100%;
  background-color: #f6f8fa;
  border-radius: 8px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.fasooTable-header-arrow {
  margin-inline-start: 4px;
}

.fasooTable-header > div:first-child {
  border-start-start-radius: 8px;
  border-bottom-left-radius: 8px;
}

.fasooTable-header > div:last-child {
  border-start-end-radius: 8px;
  border-bottom-right-radius: 8px;
}

.fasooTable-row {
  display: flex;
  position: relative;
  border: 1px solid transparent;
}
.fasooTable-row-color_bg_secondary {
  background-color: #f6f8fa;
}
.fasooTable-row-color_bg_loading_disabled {
  background-color: #fef0de;
}
.fasooTable-row-color_bg_interactive_secondary {
  background-color: #ffffff;
}
.fasooTable-row-color_bg_interactive_secondary_hover {
  background-color: #e9ecef;
}
.fasooTable-row-color_bg_interactive_primary_hover {
  background-color: #e9ecef;
}
.fasooTable-row-color_bg_interactive_primary_hover--theme {
  background-color: #eaf9f1;
}
.fasooTable-row-color_bg_interactive_selected {
  background-color: #eaf9f1;
}
.fasooTable-row-hover:hover {
  background-color: #e9ecef;
}
.fasooTable-row-hover:hover .fasooTable-cell-hover {
  margin: 2px 0px 2px 0px;
  height: calc(100% - 4px);
  opacity: 1;
  background: linear-gradient(270deg, #e9ecef 85%, rgba(233, 236, 239, 0.5) 100%);
  border-radius: 10px;
  padding-inline-start: 16px;
}
.fasooTable-row-hover:hover .fasooTable-cell-hover .button-style--icon:hover {
  background-color: #d1d6db !important;
}
.fasooTable-row-hover:hover .fasooTable-checkbox {
  opacity: 1 !important;
}
.fasooTable-row-hover:hover .fasooTable-cell-item-hide {
  opacity: 1 !important;
}
.fasooTable-row-clickable {
  cursor: pointer;
  pointer-events: visible;
}
.fasooTable-row-highlight {
  animation: highlightFade 3.5s forwards;
}
.fasooTable-row-highlight:hover {
  background-color: #fef0de;
}

@keyframes highlightFade {
  0%, 57.14% {
    background-color: #fef0de;
  }
  100% {
    background-color: transparent;
  }
}
.fasooTable-row-sm {
  height: 40px;
}

.fasooTable-row-md {
  height: 52px;
}

.fasooTable-row-lg {
  height: 72px;
}

.fasooTable-row-xl {
  height: 96px;
}

.fasooTable-content-bound {
  padding-bottom: 8px;
}
.fasooTable-content-bound:hover {
  border-radius: 10px;
  background-color: #e9ecef;
}
.fasooTable-content-bound:hover .fasooTable-row-content {
  background-color: #d1d6db;
}
.fasooTable-content-bound:hover .fasooTable-cell-hover {
  margin: 2px 0px 2px 0px;
  height: calc(100% - 4px);
  opacity: 1;
  background: linear-gradient(270deg, #e9ecef 85%, rgba(233, 236, 239, 0.5) 100%);
  border-radius: 10px;
  padding-inline-start: 16px;
}
.fasooTable-content-bound:hover .fasooTable-cell-hover .button-style--icon:hover {
  background-color: #d1d6db !important;
}
.fasooTable-content-bound:hover .fasooTable-checkbox {
  opacity: 1 !important;
}

.fasooTable-row-content {
  max-height: 60px;
  margin-inline-start: 64px;
  margin-inline-end: 16px;
  background-color: #f6f8fa;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: #717985;
}
.fasooTable-row-content > span {
  height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fasooTable-row-children {
  margin-inline-start: 64px;
  margin-inline-end: 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: #717985;
}
.fasooTable-row-children > span {
  height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fasooTable-row.fasooTable-row-sm {
  border-radius: 8px;
}

.fasooTable-row.fasooTable-row-md {
  border-radius: 10px;
}

.fasooTable-row.fasooTable-row-lg {
  border-radius: 10px;
}

.fasooTable-cell {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fasooTable-cell-first {
  border-start-start-radius: 8px;
  border-bottom-left-radius: 8px;
}
.fasooTable-cell-last {
  border-start-end-radius: 8px;
  border-bottom-right-radius: 8px;
}
.fasooTable-cell-item {
  width: 100%;
  height: 100%;
  margin: 0 16px 0 0;
  display: flex;
  align-items: center;
}
.fasooTable-cell-item.noPadding {
  margin: 0 !important;
  padding: 0 !important;
}
.fasooTable-cell-item-sideMenu {
  margin-inline-start: auto;
  width: 16px;
  align-items: center;
  cursor: pointer;
}
.fasooTable-cell-item-hide {
  opacity: 0;
}
.fasooTable-cell-text {
  width: 100%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: normal;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}
.fasooTable-cell-text span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #252d38;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.fasooTable-cell-click {
  cursor: pointer;
}
.fasooTable-cell-click:hover {
  text-decoration: underline;
}
.fasooTable-cell-mainText {
  color: #252d38;
}
.fasooTable-cell-hover {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 8px;
  border-radius: 10px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}

.fasooTable-header .fasooTable-cell {
  height: 40px;
  color: #717985;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}

.fasooTable-checkbox-header {
  margin-inline-start: 14px;
}
.fasooTable-checkbox-header-show {
  opacity: 1;
}

.fasooTable-checkbox {
  margin-inline-start: 12px;
  opacity: 0;
}
.fasooTable-checkbox-show {
  opacity: 1;
}

.flexible-width {
  width: 100%;
}

.fasooTable-skeleton-bar {
  background: linear-gradient(90deg, transparent, #d1d6db 50%, transparent);
  background-size: 200% 100%;
  animation: fasooTable-shimmer 3.4s infinite;
}

@keyframes fasooTable-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.fasooTable-more {
  position: absolute;
}
.fasooTable-more-menu {
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.fasooTabs-headers {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.fasooTabs-headers > li {
  cursor: pointer;
}
.fasooTabs-headers.leftFullWidth {
  border-bottom: 1px solid #e9ecef;
}
.fasooTabs-headers.leftFullWidth .fasooTabs.off {
  border-bottom: 0;
}
.fasooTabs-headers.leftFullWidth > li {
  margin-inline-end: 28px;
}
.fasooTabs-headers.leftFullWidth > li:last-child {
  margin-inline-end: 0;
}
.fasooTabs-headers.buttonWith > li {
  margin-inline-end: 8px;
}
.fasooTabs-headers.buttonWith > li:last-child {
  margin-inline-end: 0;
}
.fasooTabs-headers.nomalWidth > li {
  margin-inline-end: 28px;
}
.fasooTabs-headers.nomalWidth > li:last-child {
  margin-inline-end: 0;
}
.fasooTabs-headers.fullWidth {
  justify-content: space-between;
  padding: auto;
}
.fasooTabs-headers.fullWidth > li {
  width: 100%;
}
.fasooTabs-text-lg {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.fasooTabs-text-lg.on, .fasooTabs-text-lg.off {
  padding-bottom: 9px !important;
}
.fasooTabs-text-md {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}
.fasooTabs-text-md.on, .fasooTabs-text-md.off {
  padding-bottom: 6px !important;
}
.fasooTabs.on {
  color: #252d38;
  border-bottom: 2px solid #252d38;
  padding-bottom: 8px;
  z-index: 1;
}
.fasooTabs.on.theme {
  color: #05c072 !important;
  border-color: #05c072 !important;
}
.fasooTabs.off {
  color: #b5bbc2;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 8px;
  z-index: 1;
}
.fasooTabs.primary {
  color: #252d38 !important;
}
.fasooTabs.secondary {
  color: #b5bbc2 !important;
}
.fasooTabs-newAlert {
  vertical-align: top;
  margin-inline-start: 2px;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.fasooToast {
  z-index: 3050;
}
.fasooToast-clientRoot {
  width: 80%;
  align-content: center;
  min-width: 60vw;
  max-width: 100%;
  min-height: 42px;
  margin: 30px auto;
  box-sizing: border-box;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.fasooToast-root {
  max-width: 620px;
  width: calc(100% - 80px);
  align-content: center;
  min-width: 400px;
  min-height: 42px;
  margin: 30px auto;
  box-sizing: border-box;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.fasooToast-root.isMobile {
  min-width: 100%;
}
.fasooToast-addInRoot {
  width: 303px;
  min-height: 42px;
  margin: 8px auto;
  box-sizing: border-box;
  border-radius: 8px;
  padding-top: 4px;
}
.fasooToast.on {
  display: block;
}
.fasooToast.on .button:hover {
  filter: brightness(1.15);
}
.fasooToast__type--success {
  background: #3182f6;
}
.fasooToast__type--success .button {
  background-color: #3182f6;
}
.fasooToast__type--warning {
  background: #faa131;
}
.fasooToast__type--warning .button {
  background-color: #faa131;
}
.fasooToast__type--error {
  background: #ef5e4b;
}
.fasooToast__type--error .button {
  background-color: #ef5e4b;
}
.fasooToast > .toast-inner {
  display: flex;
  align-items: center;
  min-height: 42px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding: 0 16px;
  color: #ffffff;
}
.fasooToast > .toast-inner > .icon-root {
  flex: 0 0 auto;
}
.fasooToast > .toast-inner > p {
  padding: 0 4px;
  flex: 1 1 auto;
  word-break: keep-all;
  word-wrap: normal;
}
.fasooToast > .toast-inner > .icon-button-root {
  flex: 0 0 auto;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.topBar {
  padding: 10px 32px 10px 16px;
  position: absolute;
  display: inline-flex;
  flex-direction: row;
  width: 100%;
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}
.topBar-left {
  text-align: start;
  align-items: center;
  display: inline-flex;
  width: 256px;
}
.topBar-left span {
  display: inline-flex;
  align-items: center;
}
.topBar-right {
  margin-inline-start: auto;
  align-items: center;
  display: inline-flex;
}
.topBar-right span {
  display: inline-flex;
  align-items: center;
}
.topBar-right > div > * {
  margin-inline-start: 0px;
}
.topBar-right > div > *:last-child {
  margin-inline-start: 24px;
}
.topBar-middle {
  margin-inline-start: 0;
  align-items: center;
  display: inline-flex;
}
.topBar-middle span {
  display: inline-flex;
  align-items: center;
}
.topBar-logo {
  max-height: 28px;
  cursor: pointer;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.tree-item {
  padding: 10px 10px 10px 8px;
  border-radius: 10px;
  display: flex;
  vertical-align: middle;
}
.tree-item:hover {
  background: #b6e8cf;
}
.tree-item--hoverGray:hover {
  background: #e9ecef;
}
.tree-item-accordion {
  width: 32px;
  height: 32px;
  margin-inline-end: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.tree-item-avatar {
  width: 32px;
  height: 32px;
  margin-inline-end: 8px;
}
.tree-item-user, .tree-item-dept {
  height: 32px;
  margin-inline-end: 4px;
  display: flex;
  align-items: center;
}
.tree-item-user-text, .tree-item-dept-text {
  color: #252d38;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.tree-item-user-text.isDisabled, .tree-item-dept-text.isDisabled {
  color: #b5bbc2;
}
.tree-item-user-pointer, .tree-item-dept-pointer {
  cursor: pointer;
}
.tree-item-check {
  margin-inline-start: 8px;
  height: 32px;
  display: flex;
  align-items: center;
}
.tree-item-selected {
  background: #eaf9f1;
}

.icon-hover--green:hover path {
  fill: #139f56;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.treeSideDoc-item {
  padding: 4px 10px 4px 8px;
  border-radius: 10px;
  display: flex;
  vertical-align: middle;
}
.treeSideDoc-item:hover {
  cursor: pointer;
  background: transparent;
}
.treeSideDoc-item:hover > div > svg > path {
  fill: #05c072;
}
.treeSideDoc-item:hover > div > span {
  color: #05c072;
}
.treeSideDoc-item-accordion {
  height: 32px;
  margin-inline-end: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.treeSideDoc-item-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
}
.treeSideDoc-item-dept, .treeSideDoc-item-user {
  height: 32px;
  margin-inline-end: 4px;
  display: flex;
  align-items: center;
}
.treeSideDoc-item-dept-text, .treeSideDoc-item-user-text {
  color: #717985;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.treeSideDoc-item-check {
  margin-inline-start: 8px;
  width: 20px;
  height: 32px;
  display: flex;
  align-items: center;
}
.treeSideDoc-item-selected {
  background: #05c072 !important;
}
.treeSideDoc-item-selected > div > svg > path {
  fill: #ffffff !important;
}
.treeSideDoc-item-selected > div > span {
  color: #ffffff !important;
}
.driveTree-New--depth-0 {
  padding-inline-start: 4px;
}
.driveTree-New--depth-1 {
  padding-inline-start: 8px;
}
.driveTree-New--depth-2 {
  padding-inline-start: 12px;
}
.driveTree-New--depth-3 {
  padding-inline-start: 16px;
}
.driveTree-New--depth-4 {
  padding-inline-start: 20px;
}
.driveTree-New--depth-5 {
  padding-inline-start: 24px;
}
.driveTree-New--depth-6 {
  padding-inline-start: 28px;
}
.driveTree-New--depth-7 {
  padding-inline-start: 32px;
}
.driveTree-New--depth-8 {
  padding-inline-start: 36px;
}
.driveTree-New--depth-9 {
  padding-inline-start: 40px;
}
.driveTree-New--depth-10 {
  padding-inline-start: 44px;
}
.driveTree-New--depth-11 {
  padding-inline-start: 48px;
}
.driveTree-New--depth-12 {
  padding-inline-start: 52px;
}
.driveTree-New--depth-13 {
  padding-inline-start: 56px;
}
.driveTree-New--depth-14 {
  padding-inline-start: 60px;
}
.driveTree-New--depth-15 {
  padding-inline-start: 64px;
}
.driveTree-New--depth-16 {
  padding-inline-start: 68px;
}
.driveTree-New--depth-17 {
  padding-inline-start: 72px;
}
.driveTree-New--depth-18 {
  padding-inline-start: 76px;
}
.driveTree-New--depth-19 {
  padding-inline-start: 80px;
}
.driveTree-New--depth-20 {
  padding-inline-start: 84px;
}
.driveTree-New--depth-21 {
  padding-inline-start: 88px;
}
.driveTree-New--depth-22 {
  padding-inline-start: 92px;
}
.driveTree-New--depth-23 {
  padding-inline-start: 96px;
}
.driveTree-New--depth-24 {
  padding-inline-start: 100px;
}
.driveTree-New--depth-25 {
  padding-inline-start: 104px;
}
.driveTree-New--depth-26 {
  padding-inline-start: 108px;
}
.driveTree-New--depth-27 {
  padding-inline-start: 112px;
}
.driveTree-New--depth-28 {
  padding-inline-start: 116px;
}
.driveTree-New--depth-29 {
  padding-inline-start: 120px;
}
.driveTree-New--depth-30 {
  padding-inline-start: 124px;
}

.driveTreeWithRadio-New--depth-0 {
  padding-inline-start: 4px;
}
.driveTreeWithRadio-New--depth-1 {
  padding-inline-start: 8px;
}
.driveTreeWithRadio-New--depth-2 {
  padding-inline-start: 12px;
}
.driveTreeWithRadio-New--depth-3 {
  padding-inline-start: 16px;
}
.driveTreeWithRadio-New--depth-4 {
  padding-inline-start: 20px;
}
.driveTreeWithRadio-New--depth-5 {
  padding-inline-start: 24px;
}
.driveTreeWithRadio-New--depth-6 {
  padding-inline-start: 28px;
}
.driveTreeWithRadio-New--depth-7 {
  padding-inline-start: 32px;
}
.driveTreeWithRadio-New--depth-8 {
  padding-inline-start: 36px;
}
.driveTreeWithRadio-New--depth-9 {
  padding-inline-start: 40px;
}
.driveTreeWithRadio-New--depth-10 {
  padding-inline-start: 44px;
}
.driveTreeWithRadio-New--depth-11 {
  padding-inline-start: 48px;
}
.driveTreeWithRadio-New--depth-12 {
  padding-inline-start: 52px;
}
.driveTreeWithRadio-New--depth-13 {
  padding-inline-start: 56px;
}
.driveTreeWithRadio-New--depth-14 {
  padding-inline-start: 60px;
}
.driveTreeWithRadio-New--depth-15 {
  padding-inline-start: 64px;
}
.driveTreeWithRadio-New--depth-16 {
  padding-inline-start: 68px;
}
.driveTreeWithRadio-New--depth-17 {
  padding-inline-start: 72px;
}
.driveTreeWithRadio-New--depth-18 {
  padding-inline-start: 76px;
}
.driveTreeWithRadio-New--depth-19 {
  padding-inline-start: 80px;
}
.driveTreeWithRadio-New--depth-20 {
  padding-inline-start: 84px;
}
.driveTreeWithRadio-New--depth-21 {
  padding-inline-start: 88px;
}
.driveTreeWithRadio-New--depth-22 {
  padding-inline-start: 92px;
}
.driveTreeWithRadio-New--depth-23 {
  padding-inline-start: 96px;
}
.driveTreeWithRadio-New--depth-24 {
  padding-inline-start: 100px;
}
.driveTreeWithRadio-New--depth-25 {
  padding-inline-start: 104px;
}
.driveTreeWithRadio-New--depth-26 {
  padding-inline-start: 108px;
}
.driveTreeWithRadio-New--depth-27 {
  padding-inline-start: 112px;
}
.driveTreeWithRadio-New--depth-28 {
  padding-inline-start: 116px;
}
.driveTreeWithRadio-New--depth-29 {
  padding-inline-start: 120px;
}
.driveTreeWithRadio-New--depth-30 {
  padding-inline-start: 124px;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.accordion-drive-root-new .accordion-drive__item-root {
  width: auto;
}
.accordion-drive-root-new .accordion-drive__item--clicked {
  background-color: #05c072;
  font-weight: 600;
  color: #ffffff;
  border-radius: 8px;
}
.accordion-drive-root-new .accordion-drive__item--clicked-span {
  color: #ffffff;
}
.accordion-drive-root-new .accordion-drive__item__header {
  border-radius: 8px;
  white-space: nowrap !important;
}
.accordion-drive-root-new .accordion-drive__item__header > div {
  box-sizing: border-box;
  border: 0;
  background: none;
  height: 40px;
}
.accordion-drive-root-new .accordion-drive__item__header > div > button {
  box-sizing: border-box;
  border: 0;
  background: none;
  height: 40px;
  text-align: start;
  padding: 0px;
}
.accordion-drive-root-new .accordion-drive__item__header > div > button > span {
  line-height: 20px;
  max-width: 300px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap !important;
  display: inline-block;
}
.accordion-drive-root-new .accordion-drive__item__header > div > button > b {
  color: #05c072;
  margin-inline-start: 4px;
}
.accordion-drive-root-new .accordion-drive__item__header > div > button > * {
  vertical-align: middle;
}
.accordion-drive-root-new .accordion-drive__item__body {
  display: none;
}
.accordion-drive-root-new .accordion-drive__item__body .tit-area .first {
  margin-top: -10px;
}
.accordion-drive-root-new .accordion-drive__item__body .btn-area {
  margin: 15px 0 10px;
}
.accordion-drive-root-new .accordion-drive__item__body .btn-area > * + * {
  margin-inline-start: 10px;
}
.accordion-drive-root-new .accordion-drive__item__body:after {
  content: "";
  display: block;
  clear: both;
}
.accordion-drive-root-new .accordion-drive__item__body .left-area {
  float: left;
}
.accordion-drive-root-new .accordion-drive__item__body .left-area > .tit {
  line-height: 30px;
  display: inline-block;
}
.accordion-drive-root-new .accordion-drive__item__body .left-area > .count {
  margin-inline-start: 16px;
}
.accordion-drive-root-new .accordion-drive__item__body > .right-area {
  float: inline-end;
}
.accordion-drive-root-new .accordion-drive__item--fixed-icon .accordion-drive__item__header {
  position: relative;
}
.accordion-drive-root-new .accordion-drive__item--fixed-icon .accordion-drive__item__header > button {
  padding-inline-start: 25px;
}
.accordion-drive-root-new .accordion-drive__item--fixed-icon .accordion-drive__item__header > button svg.icon-root {
  position: absolute;
  margin-inline-start: 0;
  inset-inline-start: 0px;
}
.accordion-drive-root-new .accordion-drive__item--bordered .accordion-drive__item__body {
  border: 1px solid #d1d6db;
}
.accordion-drive-root-new .accordion-drive__item--selected--radio {
  background-color: #ffffff;
  border-radius: 8px;
}
.accordion-drive-root-new .accordion-drive__item--selected--radio > div > span > div > button > svg > path {
  fill: #05c072;
}
.accordion-drive-root-new .accordion-drive__item--selected--radio > div > span > div > button > span {
  color: #05c072;
}
.accordion-drive-root-new .accordion-drive__item--selected--div {
  background-color: #05c072;
  border-radius: 8px;
}
.accordion-drive-root-new .accordion-drive__item--selected--span {
  background-color: #05c072;
  border-radius: 8px;
}
.accordion-drive-root-new .accordion-drive__item--selected > div > span > div > button > svg > path {
  fill: #ffffff;
}
.accordion-drive-root-new .accordion-drive__item--selected > div > span > div > button > span {
  color: #ffffff !important;
}
.accordion-drive-root-new .accordion-drive__item--on .accordion-drive__item__header {
  border-bottom: 0;
}
.accordion-drive-root-new .accordion-drive__item--on .accordion-drive__item__header > button > svg:first-child {
  transform: rotate(90deg);
}
.accordion-drive-root-new .accordion-drive__item--on .accordion-drive__item__header > button > span > svg:first-child {
  transform: rotate(90deg);
}
.accordion-drive-root-new .accordion-drive__item--on > .accordion-drive__item__body {
  display: block;
}
.accordion-drive-root-new .accordion-drive__item--disabled .accordion-drive__item__header > button {
  cursor: default;
  color: #d1d6db;
}
.accordion-drive-root-new .accordion-drive__item--disabled .accordion-drive__item__header > button:hover {
  background-color: transparent;
}
.accordion-drive-root-new .accordion-drive__item--disabled .accordion-drive__item__header > button > svg {
  opacity: 0.4;
}

.hoverClass:hover {
  background-color: #f6f8fa !important;
}
.hoverClass:hover > span > div > button > svg > path {
  fill: #05c072;
}
.hoverClass:hover > span > div > button > span {
  color: #05c072 !important;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.sidemenuNew {
  padding: 10px 12px;
  background-color: #f6f8fa;
  color: #717985;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.sidemenuNew-title {
  margin: 20px 0 8px 12px;
}
.sidemenuNew-Item {
  width: 100%;
  height: 40px;
  cursor: pointer;
  padding: 10px 12px;
}
.sidemenuNew-Item > span > span {
  height: 20px;
  display: block;
}
.sidemenuNew-Item--icon {
  display: flex;
  align-items: center;
  width: 20px;
}
.sidemenuNew-Item--on {
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  background-color: #ffffff;
  border-radius: 8px;
}
.sidemenuNew-Item--on > span > span {
  display: block;
}
.sidemenuNew-Item--on > span {
  color: #ffffff !important;
  font-weight: 600;
}
.sidemenuNew-Item--on > span > svg,
.sidemenuNew-Item--on > span > div > svg,
.sidemenuNew-Item--on > span > span > svg,
.sidemenuNew-Item--on > span > span > div > svg {
  fill: #ffffff;
}
.sidemenuNew-Item--on > span > svg path,
.sidemenuNew-Item--on > span > svg rect,
.sidemenuNew-Item--on > span > div > svg path,
.sidemenuNew-Item--on > span > div > svg rect,
.sidemenuNew-Item--on > span > span > svg path,
.sidemenuNew-Item--on > span > span > svg rect,
.sidemenuNew-Item--on > span > span > div > svg path,
.sidemenuNew-Item--on > span > span > div > svg rect {
  fill: #ffffff;
}
.sidemenuNew-Item--on > span > svg g > path,
.sidemenuNew-Item--on > span > div > svg g > path,
.sidemenuNew-Item--on > span > span > svg g > path,
.sidemenuNew-Item--on > span > span > div > svg g > path {
  fill: #ffffff;
}
.sidemenuNew-Item--on > span > svg circle,
.sidemenuNew-Item--on > span > div > svg circle,
.sidemenuNew-Item--on > span > span > svg circle,
.sidemenuNew-Item--on > span > span > div > svg circle {
  fill: #ffffff;
}
.sidemenuNew-Item:hover > span {
  color: #05c072 !important;
}
.sidemenuNew-Item:hover > span > svg,
.sidemenuNew-Item:hover > span > div > svg,
.sidemenuNew-Item:hover > span > span > svg,
.sidemenuNew-Item:hover > span > span > div > svg {
  fill: #05c072;
}
.sidemenuNew-Item:hover > span > svg path,
.sidemenuNew-Item:hover > span > svg rect,
.sidemenuNew-Item:hover > span > div > svg path,
.sidemenuNew-Item:hover > span > div > svg rect,
.sidemenuNew-Item:hover > span > span > svg path,
.sidemenuNew-Item:hover > span > span > svg rect,
.sidemenuNew-Item:hover > span > span > div > svg path,
.sidemenuNew-Item:hover > span > span > div > svg rect {
  fill: #05c072;
}
.sidemenuNew-Item:hover > span > svg g > path,
.sidemenuNew-Item:hover > span > div > svg g > path,
.sidemenuNew-Item:hover > span > span > svg g > path,
.sidemenuNew-Item:hover > span > span > div > svg g > path {
  fill: #05c072;
}
.sidemenuNew-Item:hover > span > svg circle,
.sidemenuNew-Item:hover > span > div > svg circle,
.sidemenuNew-Item:hover > span > span > svg circle,
.sidemenuNew-Item:hover > span > span > div > svg circle {
  fill: #05c072;
}
.sidemenuNew-Item--count {
  height: 16px;
  padding: 2px 5px;
  margin-left: auto;
  color: #717985;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.sidemenuNew-Item--text {
  margin-left: 15px;
}
.sidemenuNew-Item--text-icon {
  margin-left: 15px;
}
.sidemenuNew-Item--dropdown {
  margin-left: auto;
}
.sidemenuNew-Item--dropdown_up {
  margin-left: auto;
  transform: rotate(180deg);
}
.sidemenuNew-group {
  width: 100%;
  height: 175px;
  padding: 5px 10px;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}
.sidemenuNew-accordion {
  width: 100%;
  height: 40px;
  cursor: pointer;
  background-color: #f6f8fa;
  padding: 10px 12px 10px 0px;
}
.sidemenuNew-accordion-item {
  width: 100%;
  height: 40px;
  cursor: pointer;
  padding: 10px 12px 10px 0px;
}
.sidemenuNew-accordion-item--icon {
  display: flex;
  align-items: center;
  width: 20px;
}
.sidemenuNew-accordion-item--on {
  width: 100%;
  height: 40px;
  padding: 10px 12px 10px 0px;
  background-color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
}
.sidemenuNew-accordion-item--on > span {
  color: #ffffff !important;
  font-weight: 700;
}
.sidemenuNew-accordion-item--on > div > svg,
.sidemenuNew-accordion-item--on > span > div > svg {
  fill: #ffffff;
}
.sidemenuNew-accordion-item--on > div > svg path,
.sidemenuNew-accordion-item--on > div > svg rect,
.sidemenuNew-accordion-item--on > span > div > svg path,
.sidemenuNew-accordion-item--on > span > div > svg rect {
  fill: #ffffff;
}
.sidemenuNew-accordion-item--on > div > svg g > path,
.sidemenuNew-accordion-item--on > span > div > svg g > path {
  fill: #ffffff;
}
.sidemenuNew-accordion-item--on > div > svg circle,
.sidemenuNew-accordion-item--on > span > div > svg circle {
  fill: #ffffff;
}
.sidemenuNew-accordion-item--text {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 104px !important;
}
.sidemenuNew-accordion-item:hover > span {
  color: #05c072 !important;
}
.sidemenuNew-accordion-item:hover > svg,
.sidemenuNew-accordion-item:hover > div > svg,
.sidemenuNew-accordion-item:hover > span > svg,
.sidemenuNew-accordion-item:hover > span > div > svg {
  fill: #05c072;
}
.sidemenuNew-accordion-item:hover > svg path,
.sidemenuNew-accordion-item:hover > svg rect,
.sidemenuNew-accordion-item:hover > div > svg path,
.sidemenuNew-accordion-item:hover > div > svg rect,
.sidemenuNew-accordion-item:hover > span > svg path,
.sidemenuNew-accordion-item:hover > span > svg rect,
.sidemenuNew-accordion-item:hover > span > div > svg path,
.sidemenuNew-accordion-item:hover > span > div > svg rect {
  fill: #05c072;
}
.sidemenuNew-accordion-item:hover > svg g > path,
.sidemenuNew-accordion-item:hover > div > svg g > path,
.sidemenuNew-accordion-item:hover > span > svg g > path,
.sidemenuNew-accordion-item:hover > span > div > svg g > path {
  fill: #05c072;
}
.sidemenuNew-accordion-item:hover > svg circle,
.sidemenuNew-accordion-item:hover > div > svg circle,
.sidemenuNew-accordion-item:hover > span > svg circle,
.sidemenuNew-accordion-item:hover > span > div > svg circle {
  fill: #05c072;
}
.sidemenuNew-accordion--on-text {
  width: 100%;
  height: 40px;
  padding: 10px 8px 10px 0px;
  cursor: pointer;
}
.sidemenuNew-accordion--on-text > span {
  color: #05c072 !important;
  font-weight: 700;
}
.sidemenuNew-accordion--on-text > svg,
.sidemenuNew-accordion--on-text > div > svg,
.sidemenuNew-accordion--on-text > span > svg,
.sidemenuNew-accordion--on-text > span > div > svg {
  fill: #05c072;
}
.sidemenuNew-accordion--on-text > svg path,
.sidemenuNew-accordion--on-text > svg rect,
.sidemenuNew-accordion--on-text > div > svg path,
.sidemenuNew-accordion--on-text > div > svg rect,
.sidemenuNew-accordion--on-text > span > svg path,
.sidemenuNew-accordion--on-text > span > svg rect,
.sidemenuNew-accordion--on-text > span > div > svg path,
.sidemenuNew-accordion--on-text > span > div > svg rect {
  fill: #05c072;
}
.sidemenuNew-accordion--on-text > svg g > path,
.sidemenuNew-accordion--on-text > div > svg g > path,
.sidemenuNew-accordion--on-text > span > svg g > path,
.sidemenuNew-accordion--on-text > span > div > svg g > path {
  fill: #05c072;
}
.sidemenuNew-accordion--on-text > svg circle,
.sidemenuNew-accordion--on-text > div > svg circle,
.sidemenuNew-accordion--on-text > span > svg circle,
.sidemenuNew-accordion--on-text > span > div > svg circle {
  fill: #05c072;
}
.sidemenuNew-accordion--on {
  width: 100%;
  height: 40px;
  background-color: #f6f8fa;
  padding: 10px 8px 10px 0px;
  cursor: pointer;
}
.sidemenuNew-accordion--on > span {
  color: #ffffff !important;
  font-weight: 700;
}
.sidemenuNew-accordion--on > svg,
.sidemenuNew-accordion--on > div > svg,
.sidemenuNew-accordion--on > span > svg,
.sidemenuNew-accordion--on > span > div > svg {
  fill: #ffffff;
}
.sidemenuNew-accordion--on > svg path,
.sidemenuNew-accordion--on > svg rect,
.sidemenuNew-accordion--on > div > svg path,
.sidemenuNew-accordion--on > div > svg rect,
.sidemenuNew-accordion--on > span > svg path,
.sidemenuNew-accordion--on > span > svg rect,
.sidemenuNew-accordion--on > span > div > svg path,
.sidemenuNew-accordion--on > span > div > svg rect {
  fill: #ffffff;
}
.sidemenuNew-accordion--on > svg g > path,
.sidemenuNew-accordion--on > div > svg g > path,
.sidemenuNew-accordion--on > span > svg g > path,
.sidemenuNew-accordion--on > span > div > svg g > path {
  fill: #ffffff;
}
.sidemenuNew-accordion--on > svg circle,
.sidemenuNew-accordion--on > div > svg circle,
.sidemenuNew-accordion--on > span > svg circle,
.sidemenuNew-accordion--on > span > div > svg circle {
  fill: #ffffff;
}
.sidemenuNew-accordion:hover > span {
  color: #05c072 !important;
}
.sidemenuNew-accordion:hover > svg,
.sidemenuNew-accordion:hover > div > svg,
.sidemenuNew-accordion:hover > span > svg,
.sidemenuNew-accordion:hover > span > div > svg {
  fill: #05c072;
}
.sidemenuNew-accordion:hover > svg path,
.sidemenuNew-accordion:hover > svg rect,
.sidemenuNew-accordion:hover > div > svg path,
.sidemenuNew-accordion:hover > div > svg rect,
.sidemenuNew-accordion:hover > span > svg path,
.sidemenuNew-accordion:hover > span > svg rect,
.sidemenuNew-accordion:hover > span > div > svg path,
.sidemenuNew-accordion:hover > span > div > svg rect {
  fill: #05c072;
}
.sidemenuNew-accordion:hover > svg g > path,
.sidemenuNew-accordion:hover > div > svg g > path,
.sidemenuNew-accordion:hover > span > svg g > path,
.sidemenuNew-accordion:hover > span > div > svg g > path {
  fill: #05c072;
}
.sidemenuNew-accordion:hover > svg circle,
.sidemenuNew-accordion:hover > div > svg circle,
.sidemenuNew-accordion:hover > span > svg circle,
.sidemenuNew-accordion:hover > span > div > svg circle {
  fill: #05c072;
}
.sidemenuNew-bottom-ci {
  position: absolute;
  padding: 16px;
  width: 240px;
  height: 48px;
  color: #b5bbc2;
  bottom: 0px;
  align-items: center;
  background-color: #f6f8fa;
  border-right: 1px solid #b5bbc2;
}

.resizeableMenuNew {
  cursor: ew-resize;
  z-index: 1;
  height: 100%;
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  width: 3px;
  background-color: #f6f8fa;
}
.resizeableMenuNew-center {
  width: 4px;
  height: 80px;
  background: #0c8346;
  border-radius: 999px;
  margin-left: 2px;
  margin-right: 2px;
}

.sidemenu2New {
  padding: 10px 12px;
  background-color: #f6f8fa;
  color: #717985;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.sidemenu2New-title {
  margin: 20px 0 8px 12px;
}
.sidemenu2New-Item {
  width: 100%;
  height: 40px;
  cursor: pointer;
  padding: 10px 12px;
}
.sidemenu2New-Item--icon {
  display: flex;
  align-items: center;
  width: 20px;
}
.sidemenu2New-Item > span > span {
  height: 20px;
  display: block;
}
.sidemenu2New-Item--on {
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: #05c072;
}
.sidemenu2New-Item--on > span > span {
  height: 20px;
  display: block;
}
.sidemenu2New-Item--on > span {
  color: #ffffff !important;
  font-weight: 600;
}
.sidemenu2New-Item--on > span > svg,
.sidemenu2New-Item--on > span > div > svg,
.sidemenu2New-Item--on > span > span > svg,
.sidemenu2New-Item--on > span > span > div > svg {
  fill: #ffffff;
}
.sidemenu2New-Item--on > span > svg path,
.sidemenu2New-Item--on > span > svg rect,
.sidemenu2New-Item--on > span > div > svg path,
.sidemenu2New-Item--on > span > div > svg rect,
.sidemenu2New-Item--on > span > span > svg path,
.sidemenu2New-Item--on > span > span > svg rect,
.sidemenu2New-Item--on > span > span > div > svg path,
.sidemenu2New-Item--on > span > span > div > svg rect {
  fill: #ffffff;
}
.sidemenu2New-Item--on > span > svg g > path,
.sidemenu2New-Item--on > span > div > svg g > path,
.sidemenu2New-Item--on > span > span > svg g > path,
.sidemenu2New-Item--on > span > span > div > svg g > path {
  fill: #ffffff;
}
.sidemenu2New-Item--on > span > svg circle,
.sidemenu2New-Item--on > span > div > svg circle,
.sidemenu2New-Item--on > span > span > svg circle,
.sidemenu2New-Item--on > span > span > div > svg circle {
  fill: #ffffff;
}
.sidemenu2New-Item:hover > span {
  color: #05c072 !important;
}
.sidemenu2New-Item:hover > span > svg,
.sidemenu2New-Item:hover > span > div > svg,
.sidemenu2New-Item:hover > span > span > svg,
.sidemenu2New-Item:hover > span > span > div > svg {
  fill: #05c072;
}
.sidemenu2New-Item:hover > span > svg path,
.sidemenu2New-Item:hover > span > svg rect,
.sidemenu2New-Item:hover > span > div > svg path,
.sidemenu2New-Item:hover > span > div > svg rect,
.sidemenu2New-Item:hover > span > span > svg path,
.sidemenu2New-Item:hover > span > span > svg rect,
.sidemenu2New-Item:hover > span > span > div > svg path,
.sidemenu2New-Item:hover > span > span > div > svg rect {
  fill: #05c072;
}
.sidemenu2New-Item:hover > span > svg g > path,
.sidemenu2New-Item:hover > span > div > svg g > path,
.sidemenu2New-Item:hover > span > span > svg g > path,
.sidemenu2New-Item:hover > span > span > div > svg g > path {
  fill: #05c072;
}
.sidemenu2New-Item:hover > span > svg circle,
.sidemenu2New-Item:hover > span > div > svg circle,
.sidemenu2New-Item:hover > span > span > svg circle,
.sidemenu2New-Item:hover > span > span > div > svg circle {
  fill: #05c072;
}
.sidemenu2New-Item--count {
  height: 16px;
  padding: 2px 5px;
  margin-left: auto;
  color: #717985;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.sidemenu2New-Item--text {
  margin-left: 12px;
}
.sidemenu2New-Item--text-icon {
  margin-left: 12px;
}
.sidemenu2New-Item--dropdown {
  margin-left: auto;
}
.sidemenu2New-Item--dropdown_up {
  margin-left: auto;
  transform: rotate(180deg);
}
.sidemenu2New-group {
  width: 100%;
  height: 175px;
  padding: 5px 10px;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}
.sidemenu2New-accordion {
  width: 100%;
  height: 40px;
  cursor: pointer;
  background-color: #f6f8fa;
  padding: 10px 12px 10px 0px;
}
.sidemenu2New-accordion-item {
  width: 100%;
  height: 40px;
  cursor: pointer;
  padding: 10px 12px 10px 0px;
}
.sidemenu2New-accordion-item--icon {
  display: flex;
  align-items: center;
  width: 20px;
}
.sidemenu2New-accordion-item--on {
  width: 100%;
  height: 40px;
  padding: 10px 12px 10px 0px;
  border-radius: 8px;
  background-color: #05c072;
  cursor: pointer;
}
.sidemenu2New-accordion-item--on > span {
  color: #ffffff !important;
  font-weight: 700;
}
.sidemenu2New-accordion-item--on > div > svg,
.sidemenu2New-accordion-item--on > span > div > svg {
  fill: #ffffff;
}
.sidemenu2New-accordion-item--on > div > svg path,
.sidemenu2New-accordion-item--on > div > svg rect,
.sidemenu2New-accordion-item--on > span > div > svg path,
.sidemenu2New-accordion-item--on > span > div > svg rect {
  fill: #ffffff;
}
.sidemenu2New-accordion-item--on > div > svg g > path,
.sidemenu2New-accordion-item--on > span > div > svg g > path {
  fill: #ffffff;
}
.sidemenu2New-accordion-item--on > div > svg circle,
.sidemenu2New-accordion-item--on > span > div > svg circle {
  fill: #ffffff;
}
.sidemenu2New-accordion-item--text {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 104px !important;
}
.sidemenu2New-accordion-item:hover > span {
  color: #05c072 !important;
}
.sidemenu2New-accordion-item:hover > svg,
.sidemenu2New-accordion-item:hover > div > svg,
.sidemenu2New-accordion-item:hover > span > svg,
.sidemenu2New-accordion-item:hover > span > div > svg {
  fill: #05c072;
}
.sidemenu2New-accordion-item:hover > svg path,
.sidemenu2New-accordion-item:hover > svg rect,
.sidemenu2New-accordion-item:hover > div > svg path,
.sidemenu2New-accordion-item:hover > div > svg rect,
.sidemenu2New-accordion-item:hover > span > svg path,
.sidemenu2New-accordion-item:hover > span > svg rect,
.sidemenu2New-accordion-item:hover > span > div > svg path,
.sidemenu2New-accordion-item:hover > span > div > svg rect {
  fill: #05c072;
}
.sidemenu2New-accordion-item:hover > svg g > path,
.sidemenu2New-accordion-item:hover > div > svg g > path,
.sidemenu2New-accordion-item:hover > span > svg g > path,
.sidemenu2New-accordion-item:hover > span > div > svg g > path {
  fill: #05c072;
}
.sidemenu2New-accordion-item:hover > svg circle,
.sidemenu2New-accordion-item:hover > div > svg circle,
.sidemenu2New-accordion-item:hover > span > svg circle,
.sidemenu2New-accordion-item:hover > span > div > svg circle {
  fill: #05c072;
}
.sidemenu2New-accordion--on-text {
  width: 100%;
  height: 40px;
  padding: 10px 12px 10px 0px;
  border-radius: 8px;
  cursor: pointer;
}
.sidemenu2New-accordion--on-text > span {
  color: #05c072 !important;
  font-weight: 700;
}
.sidemenu2New-accordion--on-text > svg,
.sidemenu2New-accordion--on-text > div > svg,
.sidemenu2New-accordion--on-text > span > svg,
.sidemenu2New-accordion--on-text > span > div > svg {
  fill: #05c072;
}
.sidemenu2New-accordion--on-text > svg path,
.sidemenu2New-accordion--on-text > svg rect,
.sidemenu2New-accordion--on-text > div > svg path,
.sidemenu2New-accordion--on-text > div > svg rect,
.sidemenu2New-accordion--on-text > span > svg path,
.sidemenu2New-accordion--on-text > span > svg rect,
.sidemenu2New-accordion--on-text > span > div > svg path,
.sidemenu2New-accordion--on-text > span > div > svg rect {
  fill: #05c072;
}
.sidemenu2New-accordion--on-text > svg g > path,
.sidemenu2New-accordion--on-text > div > svg g > path,
.sidemenu2New-accordion--on-text > span > svg g > path,
.sidemenu2New-accordion--on-text > span > div > svg g > path {
  fill: #05c072;
}
.sidemenu2New-accordion--on-text > svg circle,
.sidemenu2New-accordion--on-text > div > svg circle,
.sidemenu2New-accordion--on-text > span > svg circle,
.sidemenu2New-accordion--on-text > span > div > svg circle {
  fill: #05c072;
}
.sidemenu2New-accordion--on {
  width: 100%;
  height: 40px;
  padding: 10px 12px 10px 0px;
  border-radius: 8px;
  background-color: #05c072;
  cursor: pointer;
}
.sidemenu2New-accordion--on > span {
  color: #ffffff !important;
  font-weight: 700;
}
.sidemenu2New-accordion--on > svg,
.sidemenu2New-accordion--on > div > svg,
.sidemenu2New-accordion--on > span > svg,
.sidemenu2New-accordion--on > span > div > svg {
  fill: #ffffff;
}
.sidemenu2New-accordion--on > svg path,
.sidemenu2New-accordion--on > svg rect,
.sidemenu2New-accordion--on > div > svg path,
.sidemenu2New-accordion--on > div > svg rect,
.sidemenu2New-accordion--on > span > svg path,
.sidemenu2New-accordion--on > span > svg rect,
.sidemenu2New-accordion--on > span > div > svg path,
.sidemenu2New-accordion--on > span > div > svg rect {
  fill: #ffffff;
}
.sidemenu2New-accordion--on > svg g > path,
.sidemenu2New-accordion--on > div > svg g > path,
.sidemenu2New-accordion--on > span > svg g > path,
.sidemenu2New-accordion--on > span > div > svg g > path {
  fill: #ffffff;
}
.sidemenu2New-accordion--on > svg circle,
.sidemenu2New-accordion--on > div > svg circle,
.sidemenu2New-accordion--on > span > svg circle,
.sidemenu2New-accordion--on > span > div > svg circle {
  fill: #ffffff;
}
.sidemenu2New-accordion:hover > span {
  color: #05c072 !important;
}
.sidemenu2New-accordion:hover > svg,
.sidemenu2New-accordion:hover > div > svg,
.sidemenu2New-accordion:hover > span > svg,
.sidemenu2New-accordion:hover > span > div > svg {
  fill: #05c072;
}
.sidemenu2New-accordion:hover > svg path,
.sidemenu2New-accordion:hover > svg rect,
.sidemenu2New-accordion:hover > div > svg path,
.sidemenu2New-accordion:hover > div > svg rect,
.sidemenu2New-accordion:hover > span > svg path,
.sidemenu2New-accordion:hover > span > svg rect,
.sidemenu2New-accordion:hover > span > div > svg path,
.sidemenu2New-accordion:hover > span > div > svg rect {
  fill: #05c072;
}
.sidemenu2New-accordion:hover > svg g > path,
.sidemenu2New-accordion:hover > div > svg g > path,
.sidemenu2New-accordion:hover > span > svg g > path,
.sidemenu2New-accordion:hover > span > div > svg g > path {
  fill: #05c072;
}
.sidemenu2New-accordion:hover > svg circle,
.sidemenu2New-accordion:hover > div > svg circle,
.sidemenu2New-accordion:hover > span > svg circle,
.sidemenu2New-accordion:hover > span > div > svg circle {
  fill: #05c072;
}
.sidemenu2New-bottom-ci {
  position: absolute;
  padding: 16px;
  width: 240px;
  height: 48px;
  color: #b5bbc2;
  bottom: 0px;
  align-items: center;
  background-color: #f6f8fa;
  border-right: 1px solid #b5bbc2;
}

:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

/** 그림자 효과를 사용하여 사용자에게 해당 객체의 우선 순위나 계층이 높다는 시각적 신호를 제공합니다. */
.elev {
  border: 1px solid #e9ecef;
  /** 대부분의 케이스에서 사용 */
}
.elev.sd-0 {
  box-shadow: none;
}
.elev {
  /** FAB */
}
.elev.sd-100 {
  box-shadow: 0px 1px 4px 0px rgba(25, 31, 40, 0.1215686275);
}
.elev {
  /** Select option group */
}
.elev.sd-200 {
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
}
.elev {
  /** Pop-up / Modal / Date Picker / Dropdown / Toast / Client */
}
.elev.sd-300 {
  box-shadow: 0px 2px 8px 0px rgba(25, 31, 40, 0.1215686275);
}
.elev {
  /** Cards */
}
.elev.sd-400 {
  box-shadow: 0px 4px 16px 0px rgba(25, 31, 40, 0.2);
}
.elev {
  /** Tooltips */
}
.elev.sd-500 {
  box-shadow: 0px 8px 20px 0px rgba(25, 31, 40, 0.2392156863);
}

/** 아래의 Cursor 컨포넌트는 UI 개발이 아닌 디자인 설계 단계에서 사용되며, 
디자이너가 각 요소에 적절한 커서를 적용함으로써 사용자 상호작용을 직관적으로 파악할 수 있도록 합니다. */
.cursor.pointer {
  cursor: pointer;
}
.cursor.grab {
  cursor: grab;
}
.cursor.grabbing {
  cursor: grabbing;
}
.cursor.text {
  cursor: text;
}
.cursor.zoomIn {
  cursor: zoom-in;
}
.cursor.zoomOut {
  cursor: zoom-out;
}

.mg.ml-auto {
  margin-inline-start: auto;
}
.mg.ml-2 {
  margin-inline-start: 2px;
}
.mg.ml-4 {
  margin-inline-start: 4px;
}
.mg.ml-6 {
  margin-inline-start: 6px;
}
.mg.ml-8 {
  margin-inline-start: 8px;
}
.mg.ml-10 {
  margin-inline-start: 10px;
}
.mg.ml-12 {
  margin-inline-start: 12px;
}
.mg.ml-14 {
  margin-inline-start: 14px;
}
.mg.ml-16 {
  margin-inline-start: 16px;
}
.mg.ml-20 {
  margin-inline-start: 20px;
}
.mg.ml-24 {
  margin-inline-start: 24px;
}
.mg.ml-28 {
  margin-inline-start: 28px;
}
.mg.ml-32 {
  margin-inline-start: 32px;
}
.mg.ml-36 {
  margin-inline-start: 36px;
}
.mg.ml-40 {
  margin-inline-start: 40px;
}
.mg.ml-48 {
  margin-inline-start: 48px;
}
.mg.ml-64 {
  margin-inline-start: 64px;
}
.mg.ml-80 {
  margin-inline-start: 80px;
}
.mg.ml-144 {
  margin-inline-start: 144px;
}
.mg.mr-auto {
  margin-inline-end: auto;
}
.mg.mr-2 {
  margin-inline-end: 2px;
}
.mg.mr-4 {
  margin-inline-end: 4px;
}
.mg.mr-6 {
  margin-inline-end: 6px;
}
.mg.mr-8 {
  margin-inline-end: 8px;
}
.mg.mr-10 {
  margin-inline-end: 10px;
}
.mg.mr-12 {
  margin-inline-end: 12px;
}
.mg.mr-16 {
  margin-inline-end: 16px;
}
.mg.mr-20 {
  margin-inline-end: 20px;
}
.mg.mr-24 {
  margin-inline-end: 24px;
}
.mg.mr-28 {
  margin-inline-end: 28px;
}
.mg.mr-32 {
  margin-inline-end: 32px;
}
.mg.mr-36 {
  margin-inline-end: 36px;
}
.mg.mr-40 {
  margin-inline-end: 40px;
}
.mg.mr-48 {
  margin-inline-end: 48px;
}
.mg.mr-64 {
  margin-inline-end: 64px;
}
.mg.mr-80 {
  margin-inline-end: 80px;
}
.mg.mr-144 {
  margin-inline-end: 144px;
}
.mg.mb-auto {
  margin-bottom: auto;
}
.mg.mb-2 {
  margin-bottom: 2px;
}
.mg.mb-4 {
  margin-bottom: 4px;
}
.mg.mb-6 {
  margin-bottom: 6px;
}
.mg.mb-8 {
  margin-bottom: 8px;
}
.mg.mb-10 {
  margin-bottom: 10px;
}
.mg.mb-12 {
  margin-bottom: 12px;
}
.mg.mb-16 {
  margin-bottom: 16px;
}
.mg.mb-20 {
  margin-bottom: 20px;
}
.mg.mb-24 {
  margin-bottom: 24px;
}
.mg.mb-28 {
  margin-bottom: 28px;
}
.mg.mb-32 {
  margin-bottom: 32px;
}
.mg.mb-36 {
  margin-bottom: 36px;
}
.mg.mb-40 {
  margin-bottom: 40px;
}
.mg.mb-48 {
  margin-bottom: 48px;
}
.mg.mb-64 {
  margin-bottom: 64px;
}
.mg.mb-80 {
  margin-bottom: 80px;
}
.mg.mb-144 {
  margin-bottom: 144px;
}
.mg.mt-auto {
  margin-top: auto;
}
.mg.mt-2 {
  margin-top: 2px;
}
.mg.mt-4 {
  margin-top: 4px;
}
.mg.mt-6 {
  margin-top: 6px;
}
.mg.mt-8 {
  margin-top: 8px;
}
.mg.mt-10 {
  margin-top: 10px;
}
.mg.mt-12 {
  margin-top: 12px;
}
.mg.mt-16 {
  margin-top: 16px;
}
.mg.mt-18 {
  margin-top: 18px;
}
.mg.mt-20 {
  margin-top: 20px;
}
.mg.mt-24 {
  margin-top: 24px;
}
.mg.mt-28 {
  margin-top: 28px;
}
.mg.mt-32 {
  margin-top: 32px;
}
.mg.mt-36 {
  margin-top: 36px;
}
.mg.mt-40 {
  margin-top: 40px;
}
.mg.mt-48 {
  margin-top: 48px;
}
.mg.mt-64 {
  margin-top: 64px;
}
.mg.mt-80 {
  margin-top: 80px;
}
.mg.mt-144 {
  margin-top: 144px;
}

.pd.pl-auto {
  padding-inline-start: auto;
}
.pd.pl-2 {
  padding-inline-start: 2px;
}
.pd.pl-4 {
  padding-inline-start: 4px;
}
.pd.pl-6 {
  padding-inline-start: 6px;
}
.pd.pl-8 {
  padding-inline-start: 8px;
}
.pd.pl-10 {
  padding-inline-start: 10px;
}
.pd.pl-12 {
  padding-inline-start: 12px;
}
.pd.pl-16 {
  padding-inline-start: 16px;
}
.pd.pl-20 {
  padding-inline-start: 20px;
}
.pd.pl-24 {
  padding-inline-start: 24px;
}
.pd.pl-28 {
  padding-inline-start: 28px;
}
.pd.pl-32 {
  padding-inline-start: 32px;
}
.pd.pl-36 {
  padding-inline-start: 36px;
}
.pd.pl-40 {
  padding-inline-start: 40px;
}
.pd.pl-48 {
  padding-inline-start: 48px;
}
.pd.pl-64 {
  padding-inline-start: 64px;
}
.pd.pl-80 {
  padding-inline-start: 80px;
}
.pd.pl-144 {
  padding-inline-start: 144px;
}
.pd.pr-auto {
  padding-right: auto;
}
.pd.pr-2 {
  padding-right: 2px;
}
.pd.pr-4 {
  padding-right: 4px;
}
.pd.pr-6 {
  padding-right: 6px;
}
.pd.pr-8 {
  padding-right: 8px;
}
.pd.pr-10 {
  padding-right: 10px;
}
.pd.pr-12 {
  padding-right: 12px;
}
.pd.pr-16 {
  padding-right: 16px;
}
.pd.pr-20 {
  padding-right: 20px;
}
.pd.pr-24 {
  padding-right: 24px;
}
.pd.pr-28 {
  padding-right: 28px;
}
.pd.pr-32 {
  padding-right: 32px;
}
.pd.pr-36 {
  padding-right: 36px;
}
.pd.pr-40 {
  padding-right: 40px;
}
.pd.pr-48 {
  padding-right: 48px;
}
.pd.pr-64 {
  padding-right: 64px;
}
.pd.pr-80 {
  padding-right: 80px;
}
.pd.pr-144 {
  padding-right: 144px;
}
.pd.pb-auto {
  padding-bottom: auto;
}
.pd.pb-2 {
  padding-bottom: 2px;
}
.pd.pb-4 {
  padding-bottom: 4px;
}
.pd.pb-6 {
  padding-bottom: 6px;
}
.pd.pb-8 {
  padding-bottom: 8px;
}
.pd.pb-10 {
  padding-bottom: 10px;
}
.pd.pb-12 {
  padding-bottom: 12px;
}
.pd.pb-16 {
  padding-bottom: 16px;
}
.pd.pb-20 {
  padding-bottom: 20px;
}
.pd.pb-24 {
  padding-bottom: 24px;
}
.pd.pb-28 {
  padding-bottom: 28px;
}
.pd.pb-32 {
  padding-bottom: 32px;
}
.pd.pb-36 {
  padding-bottom: 36px;
}
.pd.pb-40 {
  padding-bottom: 40px;
}
.pd.pb-48 {
  padding-bottom: 48px;
}
.pd.pb-64 {
  padding-bottom: 64px;
}
.pd.pb-80 {
  padding-bottom: 80px;
}
.pd.pb-144 {
  padding-bottom: 144px;
}
.pd.pt-auto {
  padding-top: auto;
}
.pd.pt-2 {
  padding-top: 2px;
}
.pd.pt-4 {
  padding-top: 4px;
}
.pd.pt-6 {
  padding-top: 6px;
}
.pd.pt-8 {
  padding-top: 8px;
}
.pd.pt-10 {
  padding-top: 10px;
}
.pd.pt-12 {
  padding-top: 12px;
}
.pd.pt-16 {
  padding-top: 16px;
}
.pd.pt-20 {
  padding-top: 20px;
}
.pd.pt-24 {
  padding-top: 24px;
}
.pd.pt-28 {
  padding-top: 28px;
}
.pd.pt-32 {
  padding-top: 32px;
}
.pd.pt-36 {
  padding-top: 36px;
}
.pd.pt-40 {
  padding-top: 40px;
}
.pd.pt-48 {
  padding-top: 48px;
}
.pd.pt-64 {
  padding-top: 64px;
}
.pd.pt-80 {
  padding-top: 80px;
}
.pd.pt-144 {
  padding-top: 144px;
}
.pd.pd-8 {
  padding: 8px;
}
.pd.pd-16 {
  padding: 16px;
}

.gap-2 {
  gap: 2px;
}
.gap-4 {
  gap: 4px;
}
.gap-6 {
  gap: 6px;
}
.gap-8 {
  gap: 8px;
}
.gap-10 {
  gap: 10px;
}
.gap-12 {
  gap: 12px;
}
.gap-16 {
  gap: 16px;
}
.gap-20 {
  gap: 20px;
}
.gap-24 {
  gap: 24px;
}
.gap-28 {
  gap: 28px;
}
.gap-32 {
  gap: 32px;
}
.gap-36 {
  gap: 36px;
}
.gap-40 {
  gap: 40px;
}
.gap-48 {
  gap: 48px;
}
.gap-64 {
  gap: 64px;
}
.gap-80 {
  gap: 80px;
}
.gap-144 {
  gap: 144px;
}

.overflow-visible {
  overflow: visible;
}
.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow-y: auto;
  padding-right: 4px;
  overflow-x: hidden;
}
.overflow-scroll::-webkit-scrollbar-thumb {
  background: transparent;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
}

.hover-text-underline:hover {
  text-decoration: underline;
  cursor: pointer;
}

.text-align--center {
  text-align: center;
}
.text-align--left {
  text-align: left;
}
.text-align--right {
  text-align: right;
}

button {
  outline: none;
  cursor: pointer;
  font: inherit;
}

.tour-wrapper {
  display: inline-block;
  height: fit-content;
  width: fit-content;
}

.tour-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 90vw;
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  z-index: 9999;
  box-sizing: border-box;
  box-shadow: 0px 4px 16px 0px #d1d6db;
}
.tour-card-tutorial {
  border-radius: 10px;
}

.tour-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
}
.category__select {
  position: relative;
  flex-direction: column;
}
.category__select__title {
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}
.category__select__chips {
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 602px;
}
.dropdown-filter-title {
  padding: 6px 8px;
}
.dropdown-filter-search {
  padding: 8px 8px 0px 8px;
}
.dropdown-filter-body {
  padding: 8px;
  flex-wrap: wrap;
}
.dropdown-filter-footer {
  padding: 8px 0 4px 0;
  border-top: 1px solid #e9ecef;
}
.dropdown-filter-title {
  padding: 6px 8px;
}
.dropdown-filter-body {
  padding: 8px;
  flex-wrap: wrap;
}
.dropdown-filter-footer {
  padding: 8px 0 4px 0;
  border-top: 1px solid #e9ecef;
}
:root-color {
  --color_brand_10: map.get($theme, 10);
  --color_brand_20: map.get($theme, 20);
  --color_brand_30: map.get($theme, 30);
  --color_brand_40: map.get($theme, 40);
  --color_brand_50: map.get($theme, 50);
  --color_brand_60: map.get($theme, 60);
  --color_brand_70: map.get($theme, 70);
  --color_brand_80: map.get($theme, 80);
  --color_brand_90: map.get($theme, 90);
  --color_brand_100: map.get($theme, 100);
  --color_success_20: map.get($theme, 21);
  --color_success_30: map.get($theme, 31);
  --color_success_50: map.get($theme, 51);
  --color_success_60: map.get($theme, 61);
  --color_success_80: map.get($theme, 81);
}

.layout-root {
  display: inherit;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 60px);
  overflow: hidden;
}

.layout-top {
  top: 0;
  inset-inline-start: 0;
  height: 60px;
  width: 100%;
  border-bottom: 1px solid #e9ecef;
  background-color: #ffffff;
  z-index: 6;
}

.layout-left {
  position: fixed;
  inset-inline-start: 0;
  height: calc(100% - 60px);
}

.layout-right {
  position: fixed;
  inset-inline-end: 0;
}

.body-left {
  inset-inline-start: 0;
  position: absolute;
  width: calc(100% - 240px);
  height: calc(100% - 60px);
  overflow: auto;
  margin-inline-start: 240px;
}
.body-left::-webkit-scrollbar {
  width: 4px;
  height: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}
.body-left:hover::-webkit-scrollbar {
  opacity: 1;
}
.body-left::-webkit-scrollbar-button:start:decrement, .body-left::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  width: 0;
  background: transform;
}
.body-left::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
  border-inline-end: 8px solid transparent;
  -webkit-border-radius: 4px;
}
.body-left::-webkit-scrollbar-thumb:after {
  content: "";
  width: 20px;
  background: #ffffff;
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
}
.header {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 10px 16px;
}
.header-left {
  width: 248px;
  text-align: start;
}
.header-right {
  margin-inline-start: auto;
}
.header-right span {
  display: inline-flex;
  align-items: center;
}
.header-right span > * + * {
  margin-inline-start: 4px;
}
.header-middle {
  margin-inline-start: 0;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root {
  --gradient-direction: 270deg;
}

[dir=rtl] {
  --gradient-direction: 90deg;
}

.ecoheader {
  height: 60px;
  min-height: 60px;
  padding: 0 16px;
  align-items: center;
  border-bottom: 1px solid #dadee5;
}
.ecoheader-notification {
  cursor: pointer;
  width: 32px;
  align-items: center;
  justify-items: center;
}
.ecoheader-notification .dropdown-body {
  padding: 0;
  z-index: 1000;
}
.ecoheader-service {
  width: 32px;
  justify-items: center;
  cursor: pointer;
}
.ecoheader-service .dropdown-body {
  z-index: 1000;
}
.ecoheader-profile {
  cursor: pointer;
}
.ecoheader-profile--userInfo {
  padding: 20px 8px 15px 8px;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 4px;
}
.ecoheader-profile .dropdown-body:not(.lang) {
  padding: 0 8px 7px 8px;
  z-index: 1000;
}
.ecoheader-profile .lang {
  z-index: 1001;
}
.ecoheader-profile .dropdown-item {
  padding: 8px;
}

.sidemenu {
  padding-bottom: 10px;
  padding: 28px 8px 28px 12px;
  background-color: #f6f8fa;
  flex-direction: column;
  overflow-y: auto;
  width: 240px;
  box-sizing: border-box;
}
.sidemenu-workspace {
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #edeff3;
  margin-inline-start: -8px;
  padding-inline-end: 8px;
  align-items: center;
}
.sidemenu-workspace--item {
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.sidemenu-top {
  flex-direction: column;
  height: calc(100% - 16px);
  overflow-y: scroll !important;
}
.sidemenu .sidemenuNew-accordion {
  padding-inline-start: 12px;
  box-sizing: border-box;
}
.sidemenu .sidemenuNew-Item--text {
  margin-left: 4px;
}
.sidemenu::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.sidemenu:hover::-webkit-scrollbar-thumb {
  background: #b5bbc2;
}
.sidemenu-button {
  padding: 10px 12px;
  cursor: pointer;
  height: 40px;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.sidemenu-button.hasIcon {
  padding-inline-end: 2px;
}
.sidemenu-button.selected {
  background-color: #05c072;
}
.sidemenu-button.selected svg > path,
.sidemenu-button.selected > div > svg > circle {
  fill: white !important;
}
.sidemenu-button.selected > span {
  color: white !important;
}
.sidemenu-button.selected .button-style--icon:hover {
  background-color: #12ae65;
}
.sidemenu-button:hover:not(.selected) > svg > path,
.sidemenu-button:hover:not(.selected) > div > svg > circle {
  fill: #05c072 !important;
}
.sidemenu-button:hover:not(.selected) > span {
  color: #05c072 !important;
}

.body {
  width: 100%;
  overflow: auto;
}
.body > *:not(.isExpired) {
  min-width: 1225px;
}
.body {
  box-sizing: border-box;
}

p {
  margin: 0;
}

.fasooTable-cell-item-sideMenu {
  width: 20px;
}

.hover-scroll {
  overflow: auto;
}
.hover-scroll::-webkit-scrollbar {
  height: 6px;
  width: 4px;
}
.hover-scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
}
.hover-scroll:hover {
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
.hover-scroll:hover::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #b5bbc2;
}

.fasooTable-row {
  width: calc(100% - 2px);
}

.uploadFileList {
  position: absolute;
  bottom: 0;
  inset-inline-end: 32px;
  width: calc(100% - 64px);
  background-color: white;
}

.aiChat-badge {
  position: absolute;
  cursor: pointer;
  inset-inline-end: 20px;
  bottom: 16px;
}

.aiChat-float {
  position: absolute;
  inset-inline-end: 20px;
  bottom: 20px;
  border-radius: 10px;
  z-index: 501;
  width: 400px;
  min-width: 400px;
  max-width: 400px;
  height: 86%;
  max-height: 742px;
}
.aiChat-float .aiChat {
  border-radius: 20px;
}
.aiChat-float .aiChat-body {
  border-radius: 0 0 20px 20px;
}
.aiChat-float .aiChat-header {
  border: none;
  border-radius: 20px 20px 0 0;
}

.aiChat-dragItems {
  display: none;
  position: absolute;
  z-index: 502;
  transition-duration: 0.25s;
  transition-property: opacity;
}
.aiChat-notAllowed {
  position: absolute;
  z-index: 503;
  inset-inline-start: -21px;
}
.aiChat-mainItem {
  box-sizing: border-box;
  width: 240px;
  height: 48px;
  padding: 8px 16px;
  align-items: center;
  justify-content: center;
  user-select: none;
  border-radius: 8px;
  border: 1px solid var(--text-icon-1-black, #252d38);
  background: #ffffff;
  box-shadow: 0px 4px 12px 0px rgba(25, 31, 40, 0.12);
  position: absolute;
  z-index: 502;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiChat-otherItems {
  display: flex;
  position: absolute;
  width: 240px;
  margin-inline-start: 2px;
  margin-top: 2px;
  min-height: 48px;
  padding: 8px 16px;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid var(--text-icon-1-black, #252d38);
  background: var(--text-icon-3-description, #b5bbc2);
  box-sizing: border-box;
}
.aiChat-number {
  margin-inline-start: 228px;
  margin-top: -10px;
  border-radius: 999px;
  background: #25c16f;
  position: absolute;
  z-index: 503;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
}

.rightAppLink {
  border-inline-start: 1px solid #d1d6db;
  padding: 28px 8px 8px 8px;
  box-sizing: border-box;
}
.rightAppLink > * {
  margin-bottom: 16px;
}

.dragAcceptPage {
  background: rgba(0, 0, 0, 0.5490196078);
  height: calc(100% - 163px);
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 240px;
  right: 310px;
  bottom: 0;
}

.fasooNewTooltip {
  z-index: 51;
  word-wrap: break-word;
}
.fasooNewTooltip > * {
  word-wrap: break-word;
}

.button-size--lg.button-style--round {
  padding: 9px 15px;
}

.fasooTable-row-md {
  box-sizing: border-box;
}

.Wsidemenu-workspaces {
  align-items: center;
  min-width: 49px;
  border-right: 1px solid #edeff3;
  padding: 8px;
  flex-direction: column;
  overflow: auto;
  background-color: #f6f8fa;
  box-sizing: border-box;
}
.Wsidemenu-workspaces .setting-button .setting-button-list {
  padding: 8px;
  width: 300px !important;
}
.Wsidemenu-workspaces .setting-button > button {
  background-color: transparent;
}
.Wsidemenu-workgroups--header {
  width: 100%;
  border-bottom: 1px solid #edeff3;
  padding: 12px 0;
}
.Wsidemenu-workgroups--main {
  padding: 8px;
  border-bottom: 1px solid #edeff3;
}
.Wsidemenu-workgroups--main > * {
  padding: 4px 12px;
  width: 100%;
  cursor: pointer;
  height: 46px;
  background-color: #ebe5ff;
  border-radius: 8px;
  align-items: center;
}
.Wsidemenu-workgroups--main > * + * {
  margin-top: 4px;
}
.Wsidemenu-storage {
  flex-direction: column;
  padding-top: 10px;
}
.Wsidemenu-storage .tenancySize > span {
  font-size: 12px !important;
}
.Wsidemenu-storage progress {
  appearance: none;
  width: calc(100% - 10px);
}
.Wsidemenu-storage progress::-webkit-progress-bar {
  background: #dcf5e8;
  border-radius: 8px;
  height: 8px;
}
.Wsidemenu-storage progress::-webkit-progress-value {
  border-radius: 8px;
  background: #05c072;
  height: 8px;
}
.Wsidemenu .side-menu-root {
  padding: 8px;
  width: 100%;
  min-width: 100%;
}

.toast-root-wapper:lang(ar) {
  inset-inline-start: 20% !important;
  transform: translateX(-20%) !important;
}

img {
  -webkit-user-drag: none; /* Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none; /* Standard */
}

.resizeableMenuNew {
  min-width: 8px;
}

.hover-color--green:hover {
  background-color: #eaf9f1 !important;
}

.sidemenuNew {
  padding: 10px 0 10px 12px !important;
}

.overflow-hidden {
  overflow: hidden;
}

.toast-root-wapper {
  width: 50%;
}

.scroll-important::-webkit-scrollbar-thumb {
  background: #b5bbc2 !important;
  border-radius: 4px;
}

.fasooSkeleton {
  background: linear-gradient(90deg, transparent, #e9ecef 5%, transparent);
  background-size: 200% 100%;
  animation: fasooSkeleton-shimmer 3.4s infinite;
  border-radius: 17.5px;
  display: block;
  flex-shrink: 0;
}
.fasooSkeleton-text {
  border-radius: 4px;
}

.fasooTable-skeleton-bar {
  background: linear-gradient(90deg, transparent, #e9ecef 5%, transparent);
  background-size: 200% 100%;
  animation: fasooSkeleton-shimmer 3.4s infinite;
}

@keyframes fasooSkeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.hover-actions {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 1;
  z-index: 50;
  width: 100px;
  background: linear-gradient(var(--gradient-direction), #e9ecef 85%, rgba(233, 236, 239, 0.5) 100%);
  align-items: center;
  justify-content: end;
  height: 100%;
  display: none !important;
}

.mg.mt-13 {
  margin-top: 13px;
}
.mg.mb-13 {
  margin-bottom: 13px;
}

.button-style--fill.button-state--select {
  background-color: #eaf9f1;
}
.button-style--fill.button-state--select > *,
.button-style--fill.button-state--select > * > * {
  color: #05c072 !important;
  fill: #05c072;
}
.button-style--fill.button-state--select:hover > *,
.button-style--fill.button-state--select:hover > * > * {
  color: white !important;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.fav {
  flex-direction: column;
}
.fav-filter {
  padding: 12px 0 16px 32px;
  align-items: center;
}
.fav-checkbox {
  flex-direction: column;
  padding: 1px 0;
}
.fav-checkbox--bottom {
  margin-top: auto;
  justify-content: flex-end;
  border-top: 1px solid #e9ecef;
  padding: 12px 8px 4px 0px;
}
.fav .fasooTable-row {
  cursor: pointer;
}
.fav .dropdown-body {
  padding: 7px;
}
.fav-body {
  padding: 0 32px;
  height: calc(100% - 202px);
  flex-direction: column;
}
.fav-dateFilter {
  flex-direction: column;
  height: 80px;
}
.fav-dateFilter > * {
  padding: 10px 8px;
  justify-content: left !important;
}
.fav-dateFilter .checkboxDiv > span {
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre !important;
}
.fav-workgroups {
  flex-direction: column;
  max-height: 284px;
  overflow: auto;
}
.fav-workgroups .checkboxDiv {
  padding: 10px 8px;
  justify-content: flex-start !important;
  width: 100%;
  box-sizing: border-box;
}
.fav-workgroups .checkboxDiv > span {
  white-space: pre !important;
}
.fav-workgroups .checkboxDiv:not(.logDropdown) > span {
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav .fasooTable-window > div > div {
  width: calc(100% - 3px) !important;
}
.fav .fasooTable-row-lg {
  height: 78px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.documentBottom-body {
  padding: 0 32px;
}
.documentBottom-list {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  min-height: 0;
}
.documentBottom-list.isFavorite .cards-size-sm .virtuoso-grid-item {
  height: 282px !important;
}
.documentBottom-list .cards-size-sm .virtuoso-grid-item {
  height: 260px;
}
.documentBottom-list .virtuoso-grid-list .virtuoso-grid-item {
  border-color: transparent;
}
.documentBottom-cards {
  margin-top: 16px;
}
.documentBottom-cardHeader {
  height: 40px;
  background-color: #f6f8fa;
  border-radius: 8px;
  padding: 0 16px 0 12px;
  align-items: center;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.docAside {
  flex-direction: column;
  margin-inline-start: 32px;
  overflow: scroll;
  min-width: 264px;
  width: 264px;
  max-width: 264px;
  margin-top: 44px;
}
.docAside.log {
  margin-top: 0 !important;
  height: 100%;
}
.docAside .rejectMessage {
  border: 1px solid #d1d6db;
  border-radius: 8px;
  padding: 12px;
  height: 80px;
  overflow: auto;
  word-break: break-word;
}
.docAside.isPreview {
  padding-top: 33px;
  margin-top: 0;
  margin-inline-start: 16px;
  padding-inline-end: 12px;
  width: 312px;
  max-width: 312px;
  height: 100%;
  box-sizing: border-box;
}
.docAside::-webkit-scrollbar {
  height: 6px;
  width: 4px;
}
.docAside::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
}
.docAside:hover {
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
.docAside:hover::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #b5bbc2;
}
.docAside-graybox {
  background-color: #f6f8fa;
  border-radius: 10px;
  padding: 16px 20px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.docAside-thumbnail {
  justify-content: center;
  overflow: hidden;
  max-height: 124px;
  width: 100%;
  position: relative;
}
.docAside-thumbnail > .star {
  position: absolute;
  inset-inline-end: 8px;
  top: 8px;
}
.docAside-titleBar {
  display: flex;
  align-items: flex-end;
  max-width: 100%;
}
.docAside-title {
  display: -webkit-box;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
.docAside-revision {
  display: inline-flex;
  margin-inline-start: 2px;
  align-self: flex-end;
}
.docAside-history {
  height: 100%;
  flex-direction: column;
  display: flex;
}
.docAside-historyItem {
  margin-bottom: 4px;
  border-radius: 10px;
  position: relative;
}
.docAside-historyItem.revision {
  padding: 6px 8px;
  align-items: center;
  height: 40px;
  max-height: 40px;
}
.docAside-historyItem.revision:hover {
  background-color: #e9ecef;
}
.docAside-historyItem.revision:hover .docAside-actions {
  visibility: visible;
}
.docAside-historyItem.log {
  padding: 6px 8px 6px 0;
}
.docAside-historyItem.log b {
  font-weight: 400;
}
.docAside-actions {
  background: linear-gradient(var(--gradient-direction), #e9ecef 85%, rgba(233, 236, 239, 0.5) 100%);
  position: absolute;
  inset-inline-end: 8px;
  visibility: hidden;
  width: 120px;
  height: calc(100% - 12px);
  align-items: center;
  justify-content: flex-end;
}
.docAside-actions .button-style--icon:hover {
  background-color: #d1d6db !important;
}

.hover-text-underline:hover {
  text-decoration: underline;
  cursor: pointer;
}

.ellipse-2line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.policy-tool-tip {
  width: 340px;
}
.policy-tool-tip-root {
  display: none;
}
.policy-tool-tip .tbl {
  border-collapse: collapse;
  line-height: 1.4;
}
.policy-tool-tip .tbl.tbl__fixedHeader tr th {
  position: sticky;
  top: 0;
  z-index: 9;
}
.policy-tool-tip th,
.policy-tool-tip td {
  border-width: 0;
}
.policy-tool-tip th[align=center],
.policy-tool-tip td[align=center] {
  text-align: center;
}
.policy-tool-tip th {
  font-weight: normal;
  color: #717985;
  text-align: left;
  height: 40px;
  background-color: #f6f8fa;
}
.policy-tool-tip td {
  white-space: nowrap;
}
.policy-tool-tip td > span.view-normal {
  text-align: right;
  display: inline-block;
}
.policy-tool-tip td > span.view-hover {
  text-align: right;
  display: none;
}
.policy-tool-tip td > span.view-hover .setting-button {
  padding-inline-end: 20px;
}
.policy-tool-tip td > span.view-hover .setting-button .setting-button-list {
  min-width: 248px;
}
.policy-tool-tip td > span.view-hover .setting-button .setting-button-list ul > * > li,
.policy-tool-tip td > span.view-hover .setting-button .setting-button-list ul > li {
  padding: 2px 0;
}
.policy-tool-tip td > span.view-hover .setting-button .setting-button-list ul > * > li > span > svg,
.policy-tool-tip td > span.view-hover .setting-button .setting-button-list ul > li > span > svg {
  margin-top: -2px;
  margin-inline-end: 4px;
}
.policy-tool-tip td > span.view-hover {
  z-index: 1;
}
.policy-tool-tip td {
  height: 52px;
}
.policy-tool-tip th:nth-child(1) {
  border-radius: 8px 0px 0px 8px;
}
.policy-tool-tip th:last-child {
  border-radius: 0px 8px 8px 0px;
}
.policy-tool-tip .tbl.tbl__primary tr th,
.policy-tool-tip .tbl.tbl__primary tr td {
  word-break: break-word;
}
.policy-tool-tip-first {
  margin-top: 10px;
}
.policy-tool-tip-check-area {
  vertical-align: middle;
  margin-bottom: 10px;
  margin-top: 10px;
  padding-inline-end: 10px;
  width: 30px;
  align-items: baseline;
}
.policy-tool-tip-content-area {
  width: 300px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.policy-tool-tip.on {
  display: flex;
}
.policy-tool-tip.deny > div {
  width: auto;
}
.policy-tool-tip > div {
  position: fixed;
  width: 520px;
  padding: 8px 10px;
  display: inline-block;
  word-break: break-all;
  z-index: 1111;
  background: #ffffff;
  color: black;
  border: 1px solid #d1d6db;
  box-shadow: 0px 4px 12px rgba(25, 31, 40, 0.12);
  border-radius: 10px;
}
.policy-tool-tip > div > span {
  display: block;
  line-height: 16px;
}
.policy-tool-tip th {
  font-size: 12px;
}
.policy-tool-tip td {
  font-size: 13px;
}
.policy-tool-tip th,
.policy-tool-tip td {
  text-align: center !important;
}
.policy-tool-tip {
  bottom: 0;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.revisionTag {
  background-color: #eaf9f1;
  color: #05c072;
  font-size: 12px;
  font-weight: 400;
  align-items: center;
  justify-content: center;
  height: fit-content;
  width: fit-content;
}
.revisionTag.sm {
  min-width: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 12px;
}
.revisionTag.md {
  min-width: 32px;
  width: 32px;
  height: 32px;
  line-height: 18px;
  border-radius: 12px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.workspaceAvatar {
  cursor: pointer;
  box-sizing: border-box;
}
.workspaceAvatar.clicked {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
}
.workspaceAvatar.isDefault {
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root {
  --gradient-direction: 270deg;
}

[dir=rtl] {
  --gradient-direction: 90deg;
}

.shareLinkModal-docInfo {
  background-color: #f6f8fa;
  padding: 12px 16px;
  border-radius: 10px;
}
.shareLinkModal-linkType {
  margin: 14px 0;
}
.shareLinkModal-linkType > * {
  width: 50%;
  justify-content: flex-start !important;
}
.shareLinkModal-link {
  background-color: #eaf9f1;
  border-radius: 10px;
  height: 42px;
  align-items: center;
  padding: 0 14px;
  width: calc(100% - 24px);
}
.shareLinkModal-urlAction {
  margin-bottom: 14px;
}
.shareLinkModal-divider {
  border-bottom: 1px solid #e9ecef;
  margin: 20px 0;
}

.changeMaster {
  flex-direction: column;
}
.changeMaster-header {
  padding: 16px 0;
  width: 100%;
}
.changeMaster > * {
  padding-inline-start: 28px !important;
  padding-inline-end: 28px !important;
}
.changeMaster-members {
  flex-direction: column;
  overflow: auto;
  padding-inline-end: 5px;
  width: calc(100% + 5px);
  height: 414px;
}
.changeMaster-members::-webkit-scrollbar {
  height: 6px;
  width: 4px;
}
.changeMaster-members::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
}
.changeMaster-members:hover {
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
.changeMaster-members:hover::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #b5bbc2;
}
.changeMaster-footer {
  display: flex;
  justify-content: flex-end;
  height: 88px;
  align-items: center;
}
.changeMaster-footer--divider {
  width: calc(100% + 56px);
  margin-inline-start: -28px;
  border-top: 1px solid #e9ecef;
}

.readRequest {
  flex-direction: column;
}
.readRequest-header {
  padding: 16px 0;
}
.readRequest > * > *:not(.readRequest-footer),
.readRequest .readRequest-footer > *:not(.readRequest-footer--divider) {
  margin-inline-start: 28px;
  margin-inline-end: 28px;
}
.readRequest-setting .calendarSelect {
  position: fixed !important;
}
.readRequest-members {
  overflow: auto;
  padding-inline-end: 10px;
  width: 482px;
}
.readRequest-members::-webkit-scrollbar {
  height: 6px;
  width: 4px;
}
.readRequest-members::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
}
.readRequest-members:hover::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #b5bbc2;
}
.readRequest-date {
  height: 72px;
  background-color: #f6f8fa;
  box-sizing: border-box;
  align-items: center;
  padding-inline-start: 16px;
  border-radius: 12px;
}
.readRequest-msg {
  flex-direction: column;
}
.readRequest-footer--divider {
  padding-top: 12px;
  border-top: 1px solid #e9ecef;
}
.readRequest-history .fasooTable-window > div > div {
  width: calc(100% - 3px) !important;
}
.readRequest-history .fds-modal-body {
  margin: 0 28px !important;
  padding: 0 !important;
}

.table-hover {
  padding: 6px;
  border-radius: 6px;
}
.table-hover:hover {
  background-color: #d1d6db;
}

.dropzone {
  position: relative;
}
.dropzone-info {
  background-color: #f6f8fa;
  width: 484px;
  height: 352px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  display: flex;
}
.dropzone-dragging {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  inset-inline-start: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
}

.manualUpload-uploadInfo {
  background-color: #f6f8fa;
  border-radius: 10px;
  padding: 12px 16px;
}
.manualUpload .fds-modal-footer {
  padding: 24px 28px 24px 20px;
}
.manualUpload .fds-modal-root-NEW .fds-modal-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.commentModal-comments {
  margin-top: 20px;
  height: calc(100% - 60px);
  width: calc(100% - 4px);
  padding-inline-end: 4px;
  overflow-y: auto;
}
.commentModal-comments::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.commentModal-comments::-webkit-scrollbar-button:start:decrement, .commentModal-comments::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  width: 0;
  background: transform;
}
.commentModal-comments::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.commentModal-comments::-webkit-scrollbar-thumb:after {
  content: "";
  width: 20px;
  background: #ffffff;
  position: absolute;
  top: 2px;
}
.commentModal-comment {
  margin-bottom: 12px;
  flex-direction: column;
}
.commentModal-comment--msg {
  margin-inline-start: 36px;
  margin-top: 4px;
  background-color: #f6f8fa;
  padding: 10px;
  border-radius: 8px;
  white-space: normal;
  word-break: break-all;
  width: fit-content;
}

.folderMoveModal .cards-size-smd .virtuoso-grid-item {
  height: 48px;
  width: 100%;
  border: none;
  background-color: white;
  padding: 0 8px;
}
.folderMoveModal .cards-size-smd .virtuoso-grid-item:hover {
  background-color: white;
  box-shadow: none;
  cursor: default;
}
.folderMoveModal .cards-size-smd .virtuoso-grid-list {
  grid-template-columns: auto;
}
.folderMoveModal .virtuoso-grid-list {
  gap: 0;
}

.shareMeetingLink-body {
  background-color: #f6f8fa;
  padding: 28px;
  flex-direction: column;
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.fds-modal-root-NEW > .inner {
  box-sizing: border-box;
}

.fileAuth-header {
  padding: 0 28px !important;
}
.fileAuth-table .fasooTable-cell-text {
  overflow: visible;
}
.fileAuth-table .fasooTable-cell-last .fasooTable-cell-text {
  text-align: right;
}
.fileAuth .fasooTable-cell-last {
  margin-inline-start: auto;
}

.docAuthDropdown > .button-type--primary {
  margin-inline-start: auto;
}
.docAuthDropdown .button-style--link:hover:not(.button-state--noHover) {
  background-color: #d1d6db;
}

.fasooTable-cell-item {
  padding: 0 16px 0 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.fasooTable-cell-item .noPadding {
  padding: 0 !important;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.chooseType {
  height: 262px;
  box-sizing: border-box;
  padding-bottom: 23px;
}
.chooseType > * {
  cursor: pointer;
  box-shadow: 0px 1px 4px 0px rgba(25, 31, 40, 0.1215686275);
  width: 178px;
  height: 171px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}
.chooseType > *:hover {
  background-color: #dcf5e8;
  border: 1px solid #05c072;
}
.chooseType > * + * {
  margin-inline-start: 28px;
}

.newWorkgroup {
  width: 100%;
}
.newWorkgroup .fds-modal-root-NEW .fds-modal-body {
  padding-bottom: 0 !important;
}
.newWorkgroup-members {
  flex-direction: column;
  border: 1px solid #d1d6db;
  border-radius: 4px;
  box-sizing: border-box;
  min-height: 208px;
  max-height: 208px;
}
.newWorkgroup-members > .newWorkgroup-members--list > * {
  min-height: 56px;
  box-sizing: border-box;
}
.newWorkgroup-members > .newWorkgroup-members--list:not(.SELECT_RECEIVER) > * {
  padding: 0 10px;
}
.newWorkgroup-members .newWorkgroup-members--list {
  max-height: 208px;
  overflow: auto;
}
.newWorkgroup-members .newWorkgroup-members--list::-webkit-scrollbar {
  height: 6px;
  width: 4px;
}
.newWorkgroup-members .newWorkgroup-members--list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
}
.newWorkgroup-members .newWorkgroup-members--list:hover {
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
.newWorkgroup-members .newWorkgroup-members--list:hover::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #b5bbc2;
}
.newWorkgroup-members--header {
  height: 40px;
  border-radius: 3px 3px 0px 0px;
  background-color: #f6f8fa;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
}
.newWorkgroup-members--user {
  height: 100%;
  border-radius: 10px;
  align-items: center;
  box-sizing: border-box;
}
.newWorkgroup-members--user.selected {
  background-color: #eaf9f1;
}

.existWorkgroup {
  width: 100%;
}
.existWorkgroup .fds-modal-root-NEW .fds-modal-body {
  padding-bottom: 0 !important;
}
.existWorkgroup-members {
  flex-direction: column;
  min-height: 206px;
  height: 288px;
  overflow: auto;
  margin-top: 12px;
  padding-inline-end: 4px;
}
.existWorkgroup-members::-webkit-scrollbar {
  height: 6px;
  width: 4px;
}
.existWorkgroup-members::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
}
.existWorkgroup-members:hover {
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
.existWorkgroup-members:hover::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #b5bbc2;
}
.existWorkgroup-member {
  min-height: 48px;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-fileList {
  padding: 7px 15px;
  min-height: 34px;
  overflow: auto;
  margin-top: 20px;
  border: 1px solid #d1d6db;
  border-radius: 8px;
  overflow: auto;
  flex-flow: wrap;
  box-sizing: border-box;
  height: 50px;
}
.upload-fileList .upload-file {
  margin-inline-end: 8px;
  background-color: #ebeff2;
  border-radius: 12px;
  margin-bottom: 8px;
  height: 20px;
  align-items: center;
  padding-inline-end: 12px;
  padding-inline-start: 8px;
  overflow: hidden;
}

.workgroupAuth {
  margin-inline-start: -8px !important;
}

.unregist {
  background-color: #ffe3e7;
  border-radius: 4px;
  height: 16px;
  font-size: 12px !important;
  line-height: 100% !important;
  padding: 2px 4px;
  align-self: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  margin-inline-start: 8px;
  overflow: visible !important;
}

.selectUserModal.fds-modal-root-NEW .fds-modal-body {
  padding: 0 !important;
  margin: 0 !important;
}
.selectUserModal.fds-modal-root-NEW .fds-modal-body .tree-item-check {
  width: auto;
}
.selectUserModal-tree {
  padding: 8px 20px 0 20px;
  height: calc(100% - 48px);
  overflow: auto;
}
.selectUserModal-external {
  height: calc(100% - 48px);
  box-sizing: border-box;
  flex-direction: column;
  padding: 8px 0 8px 20px;
}
.selectUserModal-external--users {
  height: 50px;
  min-height: 50px;
  border-radius: 10px;
  padding: 8px;
  box-sizing: border-box;
  margin-inline-end: 20px;
}
.selectUserModal-external--users.selected {
  background-color: #eaf9f1;
}
.selectUserModal-external--users:hover {
  background-color: #e9ecef;
}
.selectUserModal-left {
  height: 100%;
  border-inline-end: 1px solid #e9ecef;
}
.selectUserModal-left .fasooTabs-headers {
  height: fit-content;
}
.selectUserModal-left {
  flex-direction: column;
}
.selectUserModal-right {
  flex-direction: column;
}
.selectUserModal-right--header {
  height: 40px;
  min-height: 40px;
  width: 100%;
  padding: 0 20px 0 28px;
  align-items: flex-end;
  box-sizing: border-box;
}
.selectUserModal-right--userList {
  flex-direction: column;
  overflow: auto;
}
.selectUserModal-right--userList > * {
  height: 60px;
  min-height: 60px;
  margin: 0 20px;
  padding: 0 8px;
  align-items: center;
}

.authModal .inner,
.workgroupAddModal .inner {
  overflow-y: hidden !important;
}
.authModal .inner > div,
.workgroupAddModal .inner > div {
  height: calc(100% - 6px);
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}
.authModal.fds-modal-root-NEW .fds-modal-body,
.workgroupAddModal.fds-modal-root-NEW .fds-modal-body {
  padding-bottom: 0px !important;
  padding-top: 7px !important;
  box-sizing: border-box;
  max-height: calc(100% - 156px);
}

.htmlCalendar .datePicker-input {
  height: 32px;
  padding: 6px 8px;
}

.workgroupAddModal progress {
  appearance: none;
  width: 100%;
}
.workgroupAddModal .inner {
  overflow-y: hidden !important;
}
.workgroupAddModal .inner > div {
  height: calc(100% - 6px);
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}
.workgroupAddModal progress::-webkit-progress-bar {
  background: #e9ecef;
  border-radius: 8px;
  height: 4px;
}
.workgroupAddModal progress::-webkit-progress-value {
  border-radius: 8px;
  background: #05c072;
  height: 4px;
}

.selectReciever-dropdown {
  display: flex;
  height: 100%;
  align-content: center;
  align-items: center;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.userSearchField {
  position: relative;
}
.userSearchField-recommend {
  top: auto;
  left: auto;
  margin-top: 44px;
  background-color: white;
  border: 1px solid #d1d6db;
  border-radius: 10px;
  padding: 8px 0 8px 8px;
  box-sizing: border-box;
  z-index: 10;
}
.userSearchField-user {
  cursor: pointer;
  width: calc(100% - 20px);
  border-radius: 8px;
  padding: 10px 8px;
}
.userSearchField-user:hover {
  background-color: #e9ecef;
}
.userSearchField-sm .virtuoso-grid-item {
  width: 272px !important;
}
.userSearchField-md .virtuoso-grid-item {
  width: 100% !important;
}
.userSearchField .virtuoso-grid-item {
  height: 52px !important;
  min-width: auto !important;
  border: 1px solid transparent !important;
}
.userSearchField .virtuoso-grid-item:hover {
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.userSearchField .virtuoso-grid-list {
  gap: 0 !important;
}

.chips {
  flex-wrap: wrap;
  max-height: 256px;
}
.chips > * {
  padding: 2px 8px;
  background-color: #e9ecef;
  border-radius: 20px;
  height: 24px;
  box-sizing: border-box;
  align-items: center;
  margin-inline-end: 10px;
  margin-bottom: 10px;
}
.chips > *:hover .chips-close > * {
  fill: #252d38 !important;
}
.chips-close {
  cursor: pointer;
}
.chips-close > * {
  fill: #b5bbc2;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.advanced_items {
  padding: 16px;
  flex-direction: column;
  background-color: #f6f8fa;
  border-radius: 12px;
  margin-top: 20px;
}
.advanced_items > * + * {
  margin-top: 16px;
}
.advanced_items .item > * {
  justify-content: flex-start !important;
}

.screenWaterMark {
  background-color: #dcf5e8;
  padding: 12px 4px 12px 12px;
  border-radius: 8px;
  margin-inline-start: 28px;
  margin-top: 8px;
  width: calc(100% - 52px);
}.createNewFolder .fds-modal-header-title {
  width: calc(100% - 20px);
}
.createNewFolder svg {
  min-width: 16px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.docCard {
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e9ecef;
  border-radius: 10px;
}
.docCard.selected {
  border-color: #05c072;
}
.docCard.selected > .docCard-under {
  background-color: #eaf9f1;
}
.docCard.selected > .box-root.docCard-upper--checkbox {
  display: flex;
}
.docCard.asided > .docCard-under {
  background-color: #eaf9f1;
}
.docCard.asided > .box-root.docCard-upper--checkbox {
  display: flex;
}
.docCard-upper {
  height: 184px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.docCard-upper--checkbox.box-root {
  position: absolute;
  inset-inline-start: 16px;
  top: 16px;
  display: none;
}
.docCard-upper--checkbox.box-root.isChecked {
  display: flex;
}
.docCard-thumbnail {
  width: 228px;
  height: 152px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.docCard-under {
  min-height: 44px;
  width: calc(100% - 20px);
  min-height: 44px;
  align-items: center;
  background-color: white;
  padding: 16px 4px 16px 16px;
}
.docCard-under--date {
  margin-top: 5px;
}
.docCard-comment {
  position: absolute;
  inset-inline-end: 48px;
  top: 12px;
}
.docCard-setting.box-root {
  position: absolute;
  inset-inline-end: 8px;
  top: 8px;
  display: none;
}
.docCard-title > span {
  display: inline-grid;
}
.docCard:hover .box-root.docCard-setting,
.docCard:hover .box-root.docCard-upper--checkbox,
.docCard:hover .box-root.docCard-bookmark {
  display: flex;
}
.docCard-bookmark.box-root {
  display: none;
}
.docCard-bookmark.box-root.isOn {
  display: flex;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.deleteTag {
  background-color: #feeae7;
  color: #ef5e4b;
  font-size: 12px;
  font-weight: 400;
  align-items: center;
  justify-content: center;
  height: fit-content;
  min-width: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 12px;
}.meetingBottom-bookmark.box-root {
  display: none;
}
.meetingBottom-bookmark.box-root.isOn {
  display: flex;
}
.meetingBottom.client .fasooTable-header {
  height: 0px;
}

.fasooTable-row:hover .meetingBottom-bookmark {
  display: flex;
}

.meeting-desc {
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.meetingAside {
  flex-direction: column;
  margin-inline-start: 32px;
  overflow: auto;
  min-width: 260px;
  width: 260px;
  max-width: 260px;
  padding-inline-end: 20px;
}
.meetingAside::-webkit-scrollbar {
  height: 6px;
}
.meetingAside::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
}
.meetingAside:hover {
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
.meetingAside:hover::-webkit-scrollbar {
  height: 6px;
  width: 4px;
}
.meetingAside:hover::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #b5bbc2;
}
.meetingAside-graybox {
  align-items: center;
  background-color: #f6f8fa;
  border-radius: 10px;
  padding: 16px 20px;
  flex-direction: column;
  text-align: center;
}
.meetingAside-thumbnail {
  justify-content: center;
  overflow: hidden;
  height: 124px;
  width: 100%;
  position: relative;
}
.meetingAside-participant {
  padding: 11px 0;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.meetingDetailModal-header {
  padding: 0px 12px;
  height: 32px;
  align-items: center;
  background-color: #f6f8fa;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.meetingDetailModal .fds-modal-body {
  padding: 0 28px !important;
}.appRegisterModal.fds-modal-root-NEW .fds-modal-body-msg {
  white-space: normal;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.profileModal.fds-modal-root-NEW .fds-modal-body {
  margin: 0 !important;
  padding: 0 !important;
}
.profileModal-sidemenu {
  padding: 12px;
  width: 216px;
}
.profileModal-body {
  width: calc(100% - 240px);
  height: 100%;
  padding: 24px 28px;
  flex-direction: column;
  box-sizing: border-box;
}
.profileModal-divider {
  border-bottom: 1px solid #e9ecef;
  width: 100%;
  margin-top: 8px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.dropdown-checkbox {
  flex-direction: column;
  padding: 1px 0;
}
.dropdown-checkbox--bottom {
  margin-top: auto;
  justify-content: flex-end;
  border-top: 1px solid #e9ecef;
  padding: 11px 8px 4px 0px;
}.myInbox {
  flex-direction: column;
}
.myInbox .dropdown-body {
  padding: 7px;
}
.myInbox-body {
  padding: 0 32px;
  height: calc(100% - 133px);
  flex-direction: column;
}
.myInbox .fasooTable-window > div > div {
  width: calc(100% - 3px) !important;
}.requestHistory.body {
  display: flex;
  flex-direction: column;
}
.requestHistory-filter {
  display: flex;
  align-items: center;
  padding: 12px 0 16px 32px;
  flex-shrink: 0;
}
.requestHistory-filterWrap {
  flex-wrap: wrap;
}
.requestHistory-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 10px 16px;
  border: 1px solid #d1d6db;
  border-radius: 20px;
  background: white;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
  font-family: inherit;
}
.requestHistory-pill:hover {
  background: #f6f8fa;
}
.requestHistory-resetButton {
  flex-shrink: 0;
}
.requestHistory-count {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 28px 12px;
  flex-shrink: 0;
}
.requestHistory-table {
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 28px;
}
.requestHistory-table .docAside {
  margin-top: 0;
}
.requestHistory-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.requestHistory-actions {
  display: flex;
  gap: 8px;
}
.requestHistory-tailAction {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
}
.requestHistory-statusFilter {
  display: flex;
  gap: 8px;
}.fileNameDropdown .typography {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre !important;
}
.fileNameDropdown-body {
  display: inline-block;
}
.fileNameDropdown-title {
  padding: 7px 8px;
}
.fileNameDropdown-title .typography {
  color: var(--Color-text-secondary);
}
.fileNameDropdown-search {
  margin: 8px;
}
.fileNameDropdown-footer {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 8px 4px;
  border-top: 1px solid #e9ecef;
}.userSearchDropdown .typography {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre !important;
}.request-approve-modal__applicant {
  padding: 9px 8px;
  background-color: #fff;
}
.request-approve-modal__doc-card {
  margin-top: 16px;
  align-items: center;
  border: 1px solid #e5e9ee;
  border-radius: 12px;
  padding: 12px;
  background-color: #fff;
}
.request-approve-modal__comment-box {
  margin-top: 10px;
  border-radius: 12px;
  padding: 12px;
  background-color: #f4f6f8;
  width: calc(100% - 24px);
}
.request-approve-modal__permission-list {
  gap: 14px;
}
.request-approve-modal__limit-row {
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e5e9ee;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}.trash {
  flex-direction: column;
}
.trash .dropdown-body {
  padding: 7px;
}
.trash-body {
  padding: 0 32px;
  height: calc(100% - 133px);
  flex-direction: column;
}
.trash .fasooTable-window > div > div {
  width: calc(100% - 3px) !important;
}
.trash .fasooTable-row {
  cursor: pointer;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.workgrouplist {
  flex-direction: column;
}
.workgrouplist > * {
  padding-inline-start: 32px;
  padding-inline-end: 32px;
}
.workgrouplist .fasooTable-row {
  cursor: pointer;
}
.workgrouplist .fasooTable-window > div > div {
  width: calc(100% - 3px) !important;
}
.workgrouplist-filter {
  height: 56px;
}
.workgrouplist-filter--bottom {
  justify-content: flex-end;
  border-top: 1px solid #e9ecef;
  padding: 12px 8px 4px 0px;
}
.workgrouplist .virtuoso-grid-list .virtuoso-grid-item:hover {
  box-shadow: none;
}

.cardHeader {
  height: 40px;
  background-color: #f6f8fa;
  border-radius: 8px;
  padding: 0 24px;
  align-items: center;
  box-sizing: border-box;
}

.react-tooltip {
  z-index: 100;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.workgroupModal.fds-modal-root-NEW .fds-modal-body {
  padding: 0 !important;
  margin: 0 !important;
}
.workgroupModal-body {
  width: calc(100% - 296px);
  padding: 24px 28px;
  flex-direction: column;
  overflow: auto;
}
.workgroupModal-body--header {
  border-bottom: 1px solid #e9ecef;
  width: 100%;
  margin-top: 8px;
}
.workgroupModal-body--items {
  flex-direction: column;
}
.workgroupModal-body--items > * + * {
  margin-top: 24px;
}

.memberTag {
  padding-inline-start: 16px;
}

.workgroupInfo-deleteModal .fds-modal-body-msg {
  line-height: 22px;
}
.workgroupInfo-deleteInfo {
  width: 484px;
  background-color: #f6f8fa;
  padding: 16px 12px;
  border-radius: 8px;
  box-sizing: border-box;
}

.workgroupInfoSetting-linkExpireDate {
  background-color: #f6f8fa;
  border-radius: 12px;
  margin-top: 12px;
  padding: 16px;
  width: 460px;
  box-sizing: border-box;
}

.accordions-label--left {
  margin-inline-start: 6px !important;
}.workgroupCard {
  padding: 16px;
  position: relative;
  flex-direction: column;
}
.workgroupCard-dropdown {
  position: absolute;
  top: 8px;
  inset-inline-end: 9px;
}
.workgroupCard .star {
  cursor: pointer;
}
.workgroupCard .star-isNotFilled {
  display: none;
}
.workgroupCard:hover .star-isNotFilled {
  display: flex;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.workgroup {
  padding: 0 32px;
  flex-direction: column;
}
.workgroup .isExpired {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  flex-direction: column;
  z-index: 100;
  min-width: 840px;
  overflow: auto;
}
.workgroup .isExpired-header {
  background-color: #4b596b;
  padding: 0 16px;
  opacity: 100%;
  width: calc(100% - 32px);
  z-index: 4;
}
.workgroup .isExpired-background {
  background: white;
  z-index: 3;
  opacity: 90%;
  height: calc(100% - 56px);
  width: 100%;
}

.expiredDate .calendarSelect {
  position: fixed !important;
  top: 50px !important;
  margin-inline-start: -10px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.workgroupHome {
  height: calc(100% - 139px);
  box-sizing: border-box;
  padding-top: 12px;
  overflow: auto;
}
.workgroupHome-members {
  margin-top: 12px;
  border: 1px solid #e9ecef;
  padding: 16px;
  border-radius: 10px;
  width: 23%;
  min-height: calc(100% - 32px);
  height: fit-content;
  box-sizing: border-box;
}
.workgroupHome-log {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 0 16px;
  flex-direction: column;
  margin-top: 8px;
  margin-bottom: 32px;
}
.workgroupHome-log--buffer {
  border-inline-start: 1px solid #d1d6db;
}
.workgroupHome-myTasks > * {
  border: 1px solid #e9ecef;
  padding: 16px;
  border-radius: 10px;
}
.workgroupHome-myTasks > * + * {
  margin-inline-start: 20px;
}
.workgroupHome-myTasks--icon {
  background-color: #05c072;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 76px;
}
.workgroupHome-calendar {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 20px 16px;
  margin-top: 12px;
}
.workgroupHome-calendar > * {
  width: calc((100% - 48px) / 2);
  margin-inline-start: 16px;
}
.workgroupHome-calendar > * + * {
  margin-inline-start: 32px;
}
.workgroupHome-calendar--item {
  flex-direction: column;
  padding: 12px 16px;
  background-color: #f6f8fa;
  border-radius: 10px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}
.workgroupHome-calendar--more {
  position: absolute;
  right: -11px;
  top: -8px;
}

.workgroupCalendar.ko .rdp-dropdowns {
  flex-direction: row-reverse;
}
.workgroupCalendar .rdp-dropdowns span {
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 700;
}
.workgroupCalendar .button-style--link {
  height: 36px !important;
}
.workgroupCalendar .rdp-weekday {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #7287a2;
  opacity: 100%;
}
.workgroupCalendar .rdp-month {
  justify-items: center;
}
.workgroupCalendar .rdp-day {
  place-items: center;
  position: relative;
}
.workgroupCalendar .rdp-day .rdp-day_button {
  max-width: 32px;
  max-height: 32px;
  padding-bottom: 4px;
}
.workgroupCalendar .rdp-month_caption {
  height: fit-content;
}
.workgroupCalendar .rdp-nav {
  width: 100%;
  height: fit-content;
}
.workgroupCalendar .rdp-button_next {
  position: absolute;
  inset-inline-end: 0;
}
.workgroupCalendar .rdp-outside {
  opacity: 100%;
}
.workgroupCalendar .rdp-outside .rdp-day_button {
  color: #7287a2;
}
.workgroupCalendar .rdp-chevron {
  fill: #252d38;
}
.workgroupCalendar .rdp-today:not(.rdp-outside) {
  color: #252d38;
  background-color: transparent;
}
.workgroupCalendar .rdp-today:not(.rdp-outside) .rdp-day_button {
  background-color: #dcf5e8;
  border-radius: 8px;
}
.workgroupCalendar .rdp-day_button {
  color: #252d38;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.workgroupCalendar .rdp-selected .rdp-day_button {
  color: white;
  font-weight: 700;
  background-color: #05c072 !important;
  border-radius: 8px;
  border: 0;
}
.workgroupCalendar .rdp-dropdowns {
  flex-direction: row;
}
.workgroupCalendar .rdp-dropdowns > span {
  position: absolute;
}
.workgroupCalendar .rdp-dropdowns > span:nth-child(2) {
  right: 0;
  margin-inline-end: 16px;
}
.workgroupCalendar .rdp-dropdowns > span:nth-child(2) > * {
  outline: none;
  box-shadow: none;
  border: none;
}
.workgroupCalendar .rdp-dropdowns .dropdown-body p {
  font-weight: 400 !important;
}
.workgroupCalendar .day-with-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.workgroupCalendar .dot-container {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  position: absolute;
  bottom: 7px;
  width: 100%;
  place-self: center;
  justify-content: center;
}
.workgroupCalendar .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.workgroupCalendar select {
  outline: none;
  box-shadow: none;
  border: none;
}
.workgroupCalendar .rdp-month_grid {
  table-layout: fixed;
  margin-top: 16px;
  width: 100%;
}
.workgroupCalendar {
  --rdp-dropdown-gap: 16px !important;
  --rdp-day-height: 40px !important;
}/* Variables declaration */
.rdp-root {
  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */

  --rdp-day-height: 44px; /* The height of the day cells. */
  --rdp-day-width: 44px; /* The width of the day cells. */

  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
  --rdp-day_button-height: 42px; /* The height of the day cells. */
  --rdp-day_button-width: 42px; /* The width of the day cells. */

  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */

  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */

  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */

  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */

  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
  --rdp-range_middle-color: inherit; /* The color of the range text. */

  --rdp-range_start-color: white; /* The color of the range text. */
  --rdp-range_start-background: linear-gradient(
    var(--rdp-gradient-direction),
    transparent 50%,
    var(--rdp-range_middle-background-color) 50%
  ); /* Used for the background of the start of the selected range. */
  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */

  --rdp-range_end-background: linear-gradient(
    var(--rdp-gradient-direction),
    var(--rdp-range_middle-background-color) 50%,
    transparent 50%
  ); /* Used for the background of the end of the selected range. */
  --rdp-range_end-color: white; /* The color of the range text. */
  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */

  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */

  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-gradient-direction: 90deg;

  --rdp-animation_duration: 0.3s;
  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
}

.rdp-root[dir="rtl"] {
  --rdp-gradient-direction: -90deg;
}

.rdp-root[data-broadcast-calendar="true"] {
  --rdp-outside-opacity: unset;
}

/* Root of the component. */
.rdp-root {
  position: relative; /* Required to position the navigation toolbar. */
  box-sizing: border-box;
}

.rdp-root * {
  box-sizing: border-box;
}

.rdp-day {
  width: var(--rdp-day-width);
  height: var(--rdp-day-height);
  text-align: center;
}

.rdp-day_button {
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  justify-content: center;
  align-items: center;
  display: flex;

  width: var(--rdp-day_button-width);
  height: var(--rdp-day_button-height);
  border: var(--rdp-day_button-border);
  border-radius: var(--rdp-day_button-border-radius);
}

.rdp-day_button:disabled {
  cursor: revert;
}

.rdp-caption_label {
  z-index: 1;

  position: relative;
  display: inline-flex;
  align-items: center;

  white-space: nowrap;
  border: 0;
}

.rdp-dropdown:focus-visible ~ .rdp-caption_label {
  outline: 5px auto Highlight;
  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */
  outline: 5px auto -webkit-focus-ring-color;
}

.rdp-button_next,
.rdp-button_previous {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  appearance: none;

  width: var(--rdp-nav_button-width);
  height: var(--rdp-nav_button-height);
}

.rdp-button_next:disabled,
.rdp-button_next[aria-disabled="true"],
.rdp-button_previous:disabled,
.rdp-button_previous[aria-disabled="true"] {
  cursor: revert;

  opacity: var(--rdp-nav_button-disabled-opacity);
}

.rdp-chevron {
  display: inline-block;
  fill: var(--rdp-accent-color);
}

.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
  transform: rotate(180deg);
  transform-origin: 50%;
}

.rdp-dropdowns {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rdp-dropdown-gap);
}
.rdp-dropdown {
  z-index: 2;

  /* Reset */
  opacity: 0;
  appearance: none;
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: inherit;
  border: none;
  line-height: inherit;
}

.rdp-dropdown_root {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-month_caption {
  display: flex;
  align-content: center;
  height: var(--rdp-nav-height);
  font-weight: bold;
  font-size: large;
}

.rdp-root[data-nav-layout="around"] .rdp-month,
.rdp-root[data-nav-layout="after"] .rdp-month {
  position: relative;
}

.rdp-root[data-nav-layout="around"] .rdp-month_caption {
  justify-content: center;
  margin-inline-start: var(--rdp-nav_button-width);
  margin-inline-end: var(--rdp-nav_button-width);
  position: relative;
}

.rdp-root[data-nav-layout="around"] .rdp-button_previous {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
}

.rdp-root[data-nav-layout="around"] .rdp-button_next {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
  justify-content: center;
}

.rdp-months {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rdp-months-gap);
  max-width: fit-content;
}

.rdp-month_grid {
  border-collapse: collapse;
}

.rdp-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;

  display: flex;
  align-items: center;

  height: var(--rdp-nav-height);
}

.rdp-weekday {
  opacity: var(--rdp-weekday-opacity);
  padding: var(--rdp-weekday-padding);
  font-weight: 500;
  font-size: smaller;
  text-align: var(--rdp-weekday-text-align);
  text-transform: var(--rdp-weekday-text-transform);
}

.rdp-week_number {
  opacity: var(--rdp-week_number-opacity);
  font-weight: 400;
  font-size: small;
  height: var(--rdp-week_number-height);
  width: var(--rdp-week_number-width);
  border: var(--rdp-week_number-border);
  border-radius: var(--rdp-week_number-border-radius);
  text-align: var(--rdp-weeknumber-text-align);
}

/* DAY MODIFIERS */
.rdp-today:not(.rdp-outside) {
  color: var(--rdp-today-color);
}

.rdp-selected {
  font-weight: bold;
  font-size: large;
}

.rdp-selected .rdp-day_button {
  border: var(--rdp-selected-border);
}

.rdp-outside {
  opacity: var(--rdp-outside-opacity);
}

.rdp-disabled:not(.rdp-selected) {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-hidden {
  visibility: hidden;
  color: var(--rdp-range_start-color);
}

.rdp-range_start {
  background: var(--rdp-range_start-background);
}

.rdp-range_start .rdp-day_button {
  background-color: var(--rdp-range_start-date-background-color);
  color: var(--rdp-range_start-color);
}

.rdp-range_middle {
  background-color: var(--rdp-range_middle-background-color);
}

.rdp-range_middle .rdp-day_button {
  border: unset;
  border-radius: unset;
  color: var(--rdp-range_middle-color);
}

.rdp-range_end {
  background: var(--rdp-range_end-background);
  color: var(--rdp-range_end-color);
}

.rdp-range_end .rdp-day_button {
  color: var(--rdp-range_start-color);
  background-color: var(--rdp-range_end-date-background-color);
}

.rdp-range_start.rdp-range_end {
  background: revert;
}

.rdp-focusable {
  cursor: pointer;
}

@keyframes rdp-slide_in_left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rdp-slide_in_right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rdp-slide_out_left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes rdp-slide_out_right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.rdp-weeks_before_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_before_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_after_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_after_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

@keyframes rdp-fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rdp-fade_out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.rdp-caption_after_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_after_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_before_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_before_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.workgroupLog-filters {
  box-sizing: border-box;
  min-height: 68px;
}
.workgroupLog-filters > * + * {
  margin-inline-start: 12px;
}
.workgroupLog-filters--docOnly.button-state--select {
  margin-inline-start: 12px !important;
}
.workgroupLog .fasooNewTooltip {
  text-align: left !important;
}

.compressed-target {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compressed-dateCustomFilter {
  flex-direction: column;
  box-sizing: border-box;
}
.compressed-dateCustomFilter--header {
  padding-inline-start: 24px;
  padding-inline-end: 18px;
  align-items: center;
  height: 68px;
  width: 100%;
  box-sizing: border-box;
}
.compressed-dateCustomFilter--body {
  padding: 0 24px;
  margin-bottom: 20px;
}
.compressed-dateCustomFilter--body > div > * + * {
  margin-inline-start: 8px;
}
.compressed-dateCustomFilter--footer {
  margin: 0 24px;
  border-top: 1px solid #e9ecef;
  justify-content: end;
  padding-top: 12px;
}
.compressed-dateCustomFilter--footer > * + * {
  margin-inline-start: 10px;
}
.compressed-simpleActions {
  margin-inline-start: 20px;
}
.compressed-simpleActions > span {
  display: flex;
}
.compressed-simpleActions > span > * + * {
  margin-inline-start: 16px;
}
.compressed-item {
  border-inline-start: 1px solid #d1d6db;
  padding-inline-start: 17px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.compressed-item .isLast {
  margin-bottom: 8px;
}
.compressed-item--body {
  border-inline-start: 1px solid #d1d6db;
  padding-inline-start: 17px;
  width: 100%;
  position: relative;
}
.compressed-item--body .isLast {
  margin-bottom: 8px;
}
.compressed-item--depth2 {
  border-left: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
  width: calc(100% - 10px);
  min-height: 40px;
  box-sizing: border-box;
  padding: 8px 24px 8px 24px;
}
.compressed-item--depth2:hover {
  background: #e9ecef;
}
.compressed-item--depth2:hover .actionButtons {
  visibility: visible;
}
.compressed-item--depth2.selected {
  background-color: #e9ecef;
}
.compressed-item--depth2.isOpen {
  background-color: #f6f8fa;
}
.compressed-item--depth2.isLast {
  border-bottom: 1px solid #e9ecef;
  border-radius: 0 0 10px 10px;
}
.compressed-item--depth2 > .actionButtons {
  visibility: hidden;
  position: absolute;
  width: 50px;
  justify-content: flex-end;
  background: linear-gradient(270deg, #e9ecef 82.61%, rgba(233, 236, 239, 0) 100%);
  inset-inline-end: 0px;
  transform: translate(-15px, -5px);
}
.compressed-item--depth2 > .actionButtons.ar {
  transform: translate(15px, -5px);
}
.compressed-item--depth1 {
  border: 1px solid #e9ecef;
  padding: 4px;
  border-radius: 10px;
  width: 100%;
  min-height: 40px;
  align-items: center;
  box-sizing: border-box;
}
.compressed-item--depth1.selected {
  background-color: #e9ecef;
}
.compressed-item--depth1.isOpen {
  background-color: #f6f8fa;
  border-radius: 10px 10px 0 0 !important;
}
.compressed-item--depth1:hover {
  background: #e9ecef;
}
.compressed-item--depth1:hover .actionButtons {
  visibility: visible;
}
.compressed-item--depth1 > .actionButtons {
  visibility: hidden;
  position: absolute;
  inset-inline-end: 5px;
  width: 50px;
  justify-content: flex-end;
  background: linear-gradient(270deg, #e9ecef 82.61%, rgba(233, 236, 239, 0) 100%);
}
.compressed-item--icon {
  width: 12px;
  height: 12px;
  background-color: #e9ecef;
  border-radius: 100%;
  position: absolute;
  inset-inline-start: -6.5px;
  top: 15px;
}
.compressed-item--icon.clicked {
  background-color: #7287a2;
}

.dropdown-checkbox {
  flex-direction: column;
  padding: 1px 0;
}
.dropdown-checkbox--bottom {
  margin-top: auto;
  justify-content: flex-end;
  border-top: 1px solid #e9ecef;
  padding: 11px 8px 4px 0px;
}

.fileSharePolicy,
.workgroupFilePolicy {
  align-items: flex-start;
}
.fileSharePolicy .typography-type--subtitle3,
.workgroupFilePolicy .typography-type--subtitle3 {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  text-align: start;
  word-break: break-word;
}
.fileSharePolicy .typography-type--body4_rg,
.workgroupFilePolicy .typography-type--body4_rg {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

.chatLog {
  background-color: #f6f8fa;
  padding: 10px;
  border-radius: 8px;
  margin-top: 20px;
}

.logTooptip {
  margin-inline-start: 4px;
  margin-bottom: -4px;
}

.width16 {
  min-width: 16px;
}

.alignContent-center {
  align-content: center;
}

.iconList > * + * {
  margin-inline-start: 20px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.workgroupAside {
  flex-direction: column;
  margin-inline-start: 32px;
  overflow: scroll;
  min-width: 260px;
  width: 260px;
  max-width: 260px;
  padding-inline-end: 20px;
  height: 100%;
}
.workgroupAside::-webkit-scrollbar {
  height: 6px;
  width: 4px;
}
.workgroupAside::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
}
.workgroupAside:hover {
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
.workgroupAside:hover::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #b5bbc2;
}
.workgroupAside-graybox {
  width: 100%;
  height: 134px;
  background-color: #f6f8fa;
  border-radius: 10px;
  padding: 16px 8px;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.workgroupFile {
  flex-direction: column;
}
.workgroupFile-filter {
  height: 56px;
  align-items: flex-end;
}
.workgroupFile .documentBottom-body {
  padding: 0;
}

.requestSubMenu {
  z-index: 1;
  background-color: white;
  box-shadow: 0px 4px 12px 0px rgba(25, 31, 40, 0.1215686275);
  border-radius: 8px;
  border: 1px solid #d1d6db;
}

.upperaction {
  overflow: visible;
}

.dropzone-fileList {
  padding: 16px;
  width: calc(100% - 32px);
  overflow: auto;
}
.dropzone-fileList > * {
  height: 56px;
  min-height: 56px;
  background-color: white;
  border-radius: 10px;
  padding: 8px 16px;
  box-sizing: border-box;
  position: relative;
  margin: 0 16px;
}
.dropzone-fileList > * + * {
  margin-top: 10px;
}
.dropzone-fileItem.success::after {
  content: "";
  width: calc(100% - 6px);
  border-bottom: 3px solid #05c072;
  position: absolute;
  bottom: 0px;
  inset-inline-start: 3px;
  border-radius: 0 0 20px 20px;
}
.dropzone-fileItem.failed::after {
  content: "";
  width: calc(100% - 6px);
  border-bottom: 3px solid #ef5e4b;
  position: absolute;
  bottom: 0px;
  inset-inline-start: 3px;
  border-radius: 0 0 20px 20px;
}

.workgroup-dropzone {
  overflow-x: hidden;
  overflow-y: auto;
}
.workgroup-dropzone .dropzone-dragging {
  height: calc(100% - 240px);
  bottom: 0 !important;
  border-radius: 0;
}

.accept .workgroup-dropzone-dragging {
  display: flex;
  position: absolute;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  width: 100%;
  inset-inline-start: 0;
  height: calc(100% - 240px);
  bottom: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.accept .workgroup-dropzone-dragging > div {
  position: absolute;
  top: 30%;
  inset-inline-start: 35%;
}
.accept .workgroup-dropzone-dragging > div > div > span {
  width: 100%;
  text-align: center;
}

.false .workgroup-dropzone-dragging {
  display: none;
}.workgroupChat {
  padding-top: 24px;
  height: calc(100% - 175px);
}
.workgroupChat-members {
  width: 292px;
  min-width: 292px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-inline-start: 32px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.meetingForm {
  flex-direction: column;
  width: 846px;
}
.meetingForm-body {
  height: calc(100% - 100px);
  overflow: auto;
}
.meetingForm-footer {
  border-top: 1px solid #e9ecef;
  margin-top: 20px;
}
.meetingForm--user {
  border: 1px solid #d1d6db;
  border-radius: 8px;
  margin-top: 8px;
  padding: 8px;
  flex-direction: column;
  overflow: auto;
}
.meetingForm .calendarSelect .react-datepicker {
  width: 336px;
}
.meetingForm .calendarSelect .react-datepicker__children-container .calendar-footer {
  margin: 0 14px 14px;
  box-sizing: border-box;
  width: auto;
}

.recurrence {
  margin-top: 12px;
  padding: 20px;
  background-color: #f6f8fa;
  border-radius: 16px;
  width: 824px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root {
  --gradient-direction: 270deg;
}

[dir=rtl] {
  --gradient-direction: 90deg;
}

.progress-bar {
  z-index: 1110;
}
.progress-bar__view {
  box-shadow: 0px 4px 12px rgba(25, 31, 40, 0.12);
}
.progress-bar.is-expanded .progress-bar__body {
  display: none;
}
.progress-bar.is-failed .progress-bar__header {
  background-color: #d44f4c;
}
.progress-bar.progress-position--bottom {
  position: fixed;
  bottom: 0;
}
.progress-bar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  min-height: 60px;
  color: #ffffff;
  background-color: #05c072;
  box-shadow: 0px 4px 12px rgba(25, 31, 40, 0.12);
  border-radius: 12px 12px 0px 0px;
  margin-top: 20px;
  box-sizing: border-box;
  width: calc(100vw - 304px);
}
.progress-bar__header.oci {
  width: calc(100vw - 352px);
}
.progress-bar__header-msg {
  display: block;
  white-space: nowrap;
  margin-inline-end: 20px;
}
.progress-bar__header-total {
  display: block;
  background: rgba(255, 255, 255, 0.1);
  height: 4px;
  border-radius: 2px;
  width: 100%;
  position: relative;
}
.progress-bar__header-inner {
  display: block;
  background: #ffffff;
  border-radius: 2px;
  width: 0%;
  height: 100%;
  transition: width 0.6s ease-in;
}
.progress-bar__header-action {
  display: flex;
  margin-inline-start: 20px;
}
.progress-bar__header-action.isError .button-size--md.hasIcon:hover {
  background-color: #f77e6e;
}
.progress-bar__header-action .button-size--md.hasIcon:hover {
  background-color: #12ae65;
}
.progress-bar__body {
  max-height: 320px;
  width: calc(100vw - 304px);
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #ffffff;
}
.progress-bar__body::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.progress-bar__body::-webkit-scrollbar-button:start:decrement, .progress-bar__body::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  width: 0;
  background: transform;
}
.progress-bar__body::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.progress-bar__body::-webkit-scrollbar-thumb:after {
  content: "";
  width: 20px;
  background: #ffffff;
  position: absolute;
  top: 2px;
}
.progress-bar__body.oci {
  width: calc(100vw - 352px);
}
.progress-bar__item {
  display: flex;
  display: flex;
  padding: 10px 20px;
  min-height: 52px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}
.progress-bar__item-col {
  display: flex;
  align-items: center;
  width: 50%;
  max-width: 50%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.progress-bar__item-status {
  margin-inline-start: auto;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.aiChat {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: white;
}
.aiChat.preview .aiChat-header {
  min-height: 44px;
  box-sizing: border-box;
}
.aiChat.preview .aiChat-body {
  height: calc(100% - 44px);
}
.aiChat.float {
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid rgb(181, 187, 194) !important;
}
.aiChat.float .aiChat-header {
  min-height: 48px;
  box-sizing: border-box;
}
.aiChat.float .aiChat-header.scrollActive {
  border-bottom: 1px solid #edeff3 !important;
}
.aiChat.float .aiChat-body {
  max-height: calc(100% - 48px);
  height: 100%;
  min-height: calc(100% - 245px);
}
.aiChat-bubbles {
  flex-wrap: wrap;
}
.aiChat-bubbles > * {
  margin-inline-end: 7px;
}
.aiChat-receviedFiles {
  background-color: white;
  padding: 16px 14px;
  flex-direction: column;
  margin: 0;
}
.aiChat-receviedFiles.scrollActive {
  box-shadow: 0px 5px 4px -4px rgba(0, 0, 0, 0.16);
}
.aiChat-receviedFile {
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
}
.aiChat-receviedFile:hover {
  border-radius: 8px;
  background: #ebeff2;
}
.aiChat-header {
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #edeff3;
  padding: 0 12px;
}
.aiChat-body {
  display: flex;
  flex-direction: column;
  background: linear-gradient(172deg, #ffffff 11.67%, #effaf4 100%);
  position: relative;
  margin-top: 5px;
  max-height: calc(100% - 48px);
  min-height: calc(100% - 222px);
}
.aiChat-body--content {
  flex-direction: column;
  padding: 4px 16px 16px;
  overflow: auto;
}
.aiChat-systemLog {
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 8px;
  border-radius: 8px;
  align-items: center;
  margin-top: 16px;
  line-height: normal;
  background-color: #fef0de;
}
.aiChat-systemLog > span {
  width: calc(100% - 28px) !important;
}
.aiChat-systemLog > * {
  color: #faa131 !important;
  stroke: #faa131;
}
.aiChat-systemLog > * > * {
  stroke: #faa131;
}
.aiChat-systemLog.DOC_CHANGED {
  background-color: #dcf5e8;
}
.aiChat-systemLog.DOC_CHANGED > * {
  color: #25c16f !important;
  stroke: #25c16f;
}
.aiChat-systemLog.DOC_CHANGED > * > * {
  stroke: #25c16f;
}
.aiChat-textField {
  position: absolute;
  width: 100%;
  align-items: center;
  justify-items: center;
  bottom: 0;
  min-height: 58px;
  padding-bottom: 8px;
  align-items: center;
  box-sizing: border-box;
}
.aiChat-textField .inputArea-trailingIcon {
  top: calc((100% - 32px) / 2);
}
.aiChat-textField.isEn textarea {
  min-height: 90px;
}
.aiChat-textField.isKo textarea {
  min-height: 50px;
}
.aiChat-textField.isAr textarea {
  min-height: 70px;
}
.aiChat-textField textarea {
  width: calc(100% - 30px) !important;
  padding-inline-end: 62px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1607843137);
  border-color: #25c16f !important;
}
.aiChat-drag {
  box-sizing: border-box;
  width: calc(100% - 32px);
  margin: 16px;
  min-height: calc(100% - 121px);
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px dashed #25c16f;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
  background: #ffffff;
  display: flex;
}
.aiChat-drag > span {
  white-space: break-spaces;
}
.aiChat {
  border: 1px solid #edeff3;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline-start: 8px;
}

.loading span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: rgba(37, 193, 111, 0.25);
  border-radius: 50%;
  animation: loading 1s linear infinite;
  background-color: #25c16f;
}

.loading span:nth-child(1) {
  animation-delay: 0s;
}

.loading span:nth-child(2) {
  animation-delay: 0.2s;
  margin: 0px 4px;
}

.loading span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loading {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
.aiChatBubble {
  border-radius: 2px 8px 8px 8px;
  border: 1px solid #25c16f;
  width: fit-content;
  font-size: 14px;
  line-height: 20px;
  white-space: normal;
  max-width: calc(100% - 35px);
  word-break: break-all;
  word-wrap: break-word;
}
.aiChatBubble.default {
  padding: 8px;
  color: #25c16f;
  background-color: white;
}
.aiChatBubble.question {
  padding: 12px;
  background-color: rgba(37, 193, 111, 0.15);
}

.AIChatIconMenu {
  align-items: center;
  justify-content: center;
}
.AIChatIconMenu.black {
  background: #252d38;
}
.AIChatIconMenu.color {
  background: linear-gradient(45deg, #25c16f 13.39%, #3182f6 100%);
}
.AIChatIconMenu.sm {
  width: 20px;
  height: 20px;
}
.AIChatIconMenu.sm > svg {
  width: 11px;
  height: 11px;
}
.AIChatIconMenu.md {
  width: 24px;
  height: 24px;
}
.AIChatIconMenu.md > svg {
  width: 14px;
  height: 14px;
}
.AIChatIconMenu.lg {
  width: 56px;
  height: 56px;
}
.AIChatIconMenu.lg > svg {
  width: 32px;
  height: 32px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.home {
  padding: 32px 32px 11px 32px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
}
.home .recent {
  border: 1px solid #e9ecef;
  margin-top: 12px;
  box-sizing: border-box;
  align-items: flex-start;
  background-color: white;
  border-radius: 12px;
  padding: 11px;
  box-sizing: border-box;
  position: relative;
}
.home .recent.chat {
  padding: 11px 9px;
}
.home .recent:hover {
  background-color: #ebeff2;
}
.home .recent:hover .hover-actions {
  display: flex !important;
}
.home .inifinteScroll {
  height: inherit;
}
.home-body {
  width: 100%;
  height: calc(100% - 64px);
  flex-direction: row;
}
.home-body--left {
  width: calc((100% - 20px) * 2 / 3);
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
}
.home-body--right {
  width: calc((100% - 20px) * 1 / 3);
  border-radius: 16px;
  border: 1px solid #e9ecef;
  padding: 24px 16px 16px 16px;
  box-sizing: border-box;
}
.home-workgroupLog {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  height: fit-content;
  flex-direction: column;
}
.home-workgroupLog--header {
  min-height: 48px;
  width: 100%;
  background-color: #f6f8fa;
  padding: 0 12px;
  align-items: center;
  border-radius: 12px 12px 0 0;
  box-sizing: border-box;
}
.home-workgroupLog--body {
  padding: 0 16px;
  flex-direction: column;
}
.home-fav {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  height: calc(100% - 42px);
}
.home-fav--actions {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  right: 12px;
}
.home-fav--actions > * + * {
  margin-inline-start: 4px;
}
.home-fav--items {
  position: relative;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 12px;
  flex: 1 1 calc(50% - 40px);
  min-width: 0;
  max-width: calc(50% - 8px);
  margin-bottom: 8px;
  margin-inline-end: 8px;
  height: calc((100% - 8px) / 2);
  box-sizing: border-box;
  flex-direction: column;
}
.home-fav--items:hover {
  background-color: #e9ecef;
}
.home-fav--items:hover .home-fav--actions {
  visibility: visible;
}
.home .home-fav:has(> .home-fav--items:only-child) .home-fav--items,
.home .home-fav:has(> .home-fav--items:nth-child(2):last-child) .home-fav--items {
  max-width: 100%;
  flex-basis: 100%;
}
.home .requestComment {
  border-radius: 4px;
  background-color: #f6f8fa;
  padding: 4px 8px;
  width: stretch;
  margin-top: 4px;
}
.home-myTask {
  padding: 16px;
  border-radius: 16px;
  height: 300px;
  background-color: #dcf5e8;
  width: calc((100% - 20px) / 2);
  flex-direction: column;
  box-sizing: border-box;
}
.home-myTask .badge-count {
  justify-content: center;
}
.home-myTask--btn .typography {
  margin: 0 !important;
}
.home-myTask--live {
  padding: 2px 4px;
  position: absolute;
  border-radius: 4px;
  background-color: #ef5e4b;
  bottom: -8px;
}
.home-myTask--footer {
  margin-top: auto;
}
.home-myTask--footer .comment {
  display: -webkit-box;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.home-myTask--footer > * {
  justify-items: center;
  align-items: center;
  background-color: #f6f8fa;
  border-radius: 8px;
  padding: 4px 0;
}
.home-myTask--footer > * + * {
  margin-inline-start: 8px;
}
.home-myTask--icon {
  background-color: #dcf5e8;
  padding: 10px;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  position: relative;
}
.home-myTask--body {
  background-color: white;
  margin-top: 12px;
  height: calc(100% - 36px);
  border-radius: 12px;
  padding: 16px;
}
.home-borderBox {
  padding: 16px;
  border-radius: 16px;
  height: 300px;
  border: 1px solid #e9ecef;
  width: calc((100% - 20px) / 2);
  flex-direction: column;
  box-sizing: border-box;
}
.home-borderBox--content {
  border-radius: 8px;
  background-color: #f6f8fa;
  height: 126px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 4.5px;
}
.home-empty {
  width: 100%;
  height: 100%;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-sizing: border-box;
}
.home-startButton {
  padding: 5px 7px !important;
}
.home-startButton > .home-icon {
  background-color: #eaf9f1;
  padding: 4px;
  border-radius: 6px;
  box-sizing: border-box;
  width: 28px;
}
.home-startButton .typography {
  font-weight: 500;
}
.home-startButton > * + * {
  margin-inline-start: 10px !important;
}.cardDir {
  cursor: pointer;
  border-radius: 50%;
  height: fit-content;
}
.cardDir:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root {
  --gradient-direction: 270deg;
}

[dir=rtl] {
  --gradient-direction: 90deg;
}

.linkAppPortal {
  display: flex;
  flex-direction: column;
  position: fixed;
  width: 310px;
  height: calc(100% - 60px);
  background-color: #ffffff;
  inset-inline-end: 0;
  z-index: 50;
  border-inline-start: 1px solid #d1d6db;
  display: flex;
  flex-direction: column;
}
.linkAppPortal-header {
  padding: 0 16px;
  width: 100%;
  min-height: 48px;
  align-items: center;
  border-bottom: 1px solid #d1d6db;
  box-sizing: border-box;
}
.linkAppPortal-header > * + * {
  margin-inline-start: 16px;
}
.linkAppPortal .dropzone-box {
  display: none;
}
.linkAppPortal .dropzone-box.isDragActive {
  display: block;
  position: absolute;
  width: 100vw;
  height: calc(100vh - 267px);
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
}
.linkAppPortal .dropzone-box.isDragActive > div {
  position: absolute;
  top: 30%;
  left: 35%;
}
.linkAppPortal .dropzone-box.isDragActive > div > div > span {
  width: 100%;
  text-align: center;
}
.linkAppPortal-dropzone {
  background: rgba(0, 0, 0, 0.5490196078);
  position: absolute;
  height: calc(100% - 150px);
  width: 100%;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  bottom: 0;
}
.linkAppPortal-dropzone.accept {
  display: block;
}
.linkAppPortal-bottomButtons {
  border-top: 1px solid #e9ecef;
  justify-content: flex-end;
  align-items: center;
  height: 88px;
}
.linkAppPortal-outlook {
  overflow: auto;
}
.linkAppPortal-outlook::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.linkAppPortal-outlook::-webkit-scrollbar-button:start:decrement, .linkAppPortal-outlook::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  width: 0;
  background: transform;
}
.linkAppPortal-outlook::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.linkAppPortal-outlook::-webkit-scrollbar-thumb:after {
  content: "";
  width: 20px;
  background: #ffffff;
  position: absolute;
  top: 2px;
}
.linkAppPortal-outlook--detail {
  height: calc(100% - 100px);
  padding: 0 16px;
}
.linkAppPortal-outlook--detail.newpage {
  padding-top: 24px;
  height: 100% !important;
}
.linkAppPortal-outlook--detail > .bottom {
  width: calc(100% + 12px);
  padding-inline-end: 12px;
  overflow: auto;
}
.linkAppPortal-outlook--detail > .bottom::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.linkAppPortal-outlook--detail > .bottom::-webkit-scrollbar-button:start:decrement, .linkAppPortal-outlook--detail > .bottom::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  width: 0;
  background: transform;
}
.linkAppPortal-outlook--detail > .bottom::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.linkAppPortal-outlook--detail > .bottom::-webkit-scrollbar-thumb:after {
  content: "";
  width: 20px;
  background: #ffffff;
  position: absolute;
  top: 2px;
}
.linkAppPortal-outlook--detail .attachment {
  display: flex;
  padding: 14px 16px;
  align-items: center;
  border-bottom: 1px solid #e9ecef;
  cursor: pointer;
}
.linkAppPortal-outlook--detail .attachment > .checkbox-root {
  margin-inline-end: 16px;
}
.linkAppPortal-outlook--detail .attachment-download {
  visibility: hidden;
  margin-inline-start: auto;
  background: linear-gradient(270deg, #e9ecef 82.61%, rgba(233, 236, 239, 0) 100%);
}
.linkAppPortal-outlook--detail .attachment.selected {
  background-color: #eaf9f1;
}
.linkAppPortal-outlook--detail .attachment:hover {
  background-color: #e9ecef;
}
.linkAppPortal-outlook--detail .attachment:hover .attachment-download {
  visibility: visible;
}
.linkAppPortal-outlook .innerThumbnail .img {
  width: -webkit-fill-available;
}
.linkAppPortal-outlook .mail {
  cursor: pointer;
  margin-bottom: 16px;
}
.linkAppPortal-outlook .mail > .header {
  padding: 6px 8px;
  background-color: #f6f8fa;
}
.linkAppPortal-outlook .mail > .body {
  display: flex;
  align-items: center;
  padding: 16px;
  height: 68px;
  width: 100%;
  border-bottom: 1px solid #e9ecef;
}
.linkAppPortal-outlook .mail > .body.selected {
  background-color: #eaf9f1;
}
.linkAppPortal-outlook .mail > .body:hover {
  background-color: #e9ecef;
}
.linkAppPortal-outlook .mail .checkbox-root {
  margin-inline-end: 16px;
}
.linkAppPortal-outlook .header:nth-of-type(0) {
  margin-top: 16px;
}
.linkAppPortal-login {
  padding: 40px 16px 0 16px;
}

.uploadAttachmentModal-items {
  height: 436px;
  overflow: auto;
  width: calc(100% + 8px);
  padding-inline-end: 8px;
}
.uploadAttachmentModal-items::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.uploadAttachmentModal-items::-webkit-scrollbar-button:start:decrement, .uploadAttachmentModal-items::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  width: 0;
  background: transform;
}
.uploadAttachmentModal-items::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.uploadAttachmentModal-items::-webkit-scrollbar-thumb:after {
  content: "";
  width: 20px;
  background: #ffffff;
  position: absolute;
  top: 2px;
}
.uploadAttachmentModal-items > * {
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  height: 48px;
  width: 100%;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root {
  --gradient-direction: 270deg;
}

[dir=rtl] {
  --gradient-direction: 90deg;
}

.dropbox {
  padding-top: 8px;
  height: calc(100% - 48px);
  flex-direction: column;
  box-sizing: border-box;
}
.dropbox .divider {
  border-top: 0;
}
.dropbox-topBar {
  padding: 8px 16px 0 16px;
  box-sizing: border-box;
  width: 100%;
  flex-direction: column;
}
.dropbox-topBar > .divider {
  margin: 8px 0 !important;
}
.dropbox-topBar--menus > * {
  margin-inline-start: 8px;
}
.dropbox-path {
  padding: 0 16px;
  box-sizing: border-box;
  margin-bottom: 8px;
  width: 100%;
}
.dropbox-items {
  height: calc(100% - 294px);
  overflow: auto;
}
.dropbox-items::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.dropbox-items::-webkit-scrollbar-button:start:decrement, .dropbox-items::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  width: 0;
  background: transform;
}
.dropbox-items::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.dropbox-items::-webkit-scrollbar-thumb:after {
  content: "";
  width: 20px;
  background: #ffffff;
  position: absolute;
  top: 2px;
}
.dropbox-item {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: calc(100% - 32px);
  align-self: center;
  box-sizing: border-box;
}
.dropbox-item.simple {
  box-sizing: border-box;
  padding: 8px;
  height: 40px;
  margin-top: 8px;
}
.dropbox-item.detail {
  padding: 20px 8px;
  box-sizing: border-box;
  height: 60px;
  margin-top: 8px;
}
.dropbox-item.checked {
  background-color: #eaf9f1;
  border-color: #05c072;
}
.dropbox-item > * + * {
  margin-inline-start: 12px;
}
.dropbox-item--body {
  width: 174px;
}
.dropbox-bottom {
  margin-top: auto;
  height: 88px;
  border-top: 1px solid #e9ecef;
  align-items: center;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.notification {
  width: 100%;
  flex-direction: column;
  cursor: default;
  position: relative;
}
.notification-header {
  padding-inline-start: 28px;
  padding-inline-end: 20px;
  align-items: center;
  height: 64px;
  width: 100%;
  box-sizing: border-box;
}
.notification-item {
  margin-inline-start: 14px;
}
.notification-item--dot {
  margin-top: 26px;
}
.notification-item--body {
  border-radius: 8px;
  width: 400px;
  padding: 12px 8px;
  position: relative;
  cursor: pointer;
}
.notification-item--body.isFile {
  cursor: default;
}
.notification-item--body .notification-actions {
  position: absolute;
  inset-inline-end: 9px;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 1;
  width: 100px;
  background: linear-gradient(var(--gradient-direction), #e9ecef 85%, rgba(233, 236, 239, 0.5) 100%);
  align-items: center;
  justify-content: end;
  height: 100%;
  display: none;
}
.notification-item--body:hover {
  background-color: #e9ecef;
}
.notification-item--body:hover .notification-actions {
  display: flex;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.headerSearch {
  width: min(360px, 100vw - 273px);
  position: absolute;
  display: flex;
  z-index: 3;
  left: clamp(150px, 100vw - 483px, 272px);
  top: 9px;
  border-radius: 10px;
  background-color: white;
}
.headerSearch .inputField {
  background-color: #f6f8fa;
  border: none !important;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}
.headerSearch .inputField.hasLeadingIcon {
  padding-inline-start: 36px;
}
.headerSearch.active {
  border: 1px solid #d1d6db !important;
  box-shadow: 0px 4px 12px 0px rgba(25, 31, 40, 0.1215686275);
}
.headerSearch.active .headerSearch-under,
.headerSearch.active .headerSearch-divider {
  display: flex;
}
.headerSearch.active .inputField {
  cursor: default;
  background-color: white;
}
.headerSearch-divider.box-root {
  border-top: 1px solid #e9ecef;
  align-self: center;
  width: calc(100% - 24px);
  display: none;
}
.headerSearch-under.box-root {
  width: 100%;
  box-sizing: border-box;
  background-color: white;
  border-radius: 10px;
  flex-direction: column;
  padding: 8px 12px 10px 12px;
  align-self: center;
  display: none;
  cursor: pointer;
}
.headerSearch-under--recommend > * + * {
  margin-top: 8px;
}
.headerSearch-under--button {
  margin-inline-start: auto;
  cursor: pointer;
}
.headerSearch-under--button:hover {
  background-color: #d1d6db;
}
.headerSearch-under--button {
  border-radius: 8px;
}
.headerSearch-under--item.box-root {
  width: 100%;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  padding: 10px 0 10px 4px;
}
.headerSearch-under--item.box-root:hover {
  background-color: #e9ecef;
  border-radius: 8px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.workspaceAvatar {
  cursor: pointer;
  box-sizing: border-box;
}
.workspaceAvatar.clicked {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
}
.workspaceAvatar.isDefault {
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
}.linkPortal {
  width: 100%;
  min-width: 1230px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.adminWorkgroupLog {
  padding: 32px 32px 20px 32px;
  width: 100%;
  overflow-y: auto;
}
.adminWorkgroupLog .fasooTable-row {
  cursor: default;
}
.adminWorkgroupLog-title {
  min-height: 60px;
}
.adminWorkgroupLog-filter {
  height: 40px;
}
.adminWorkgroupLog .policyTooltip .__react_component_tooltip {
  border-radius: 7px;
  width: 400px;
  padding: 18px 16px;
}
.adminWorkgroupLog .policyTooltip .content_header {
  display: inline-flex;
  align-items: center;
}
.adminWorkgroupLog .policyTooltip .content_header .bluedot {
  width: 7px;
  height: 7px;
  background-color: #3182f6;
}
.adminWorkgroupLog .policyTooltip .content_header .userInfo {
  margin-inline-start: 17px;
}
.adminWorkgroupLog .policyTooltip .content_file {
  margin-bottom: 20px;
}
.adminWorkgroupLog .policyTooltip .content_body {
  display: flex;
  flex-direction: column;
}
.adminWorkgroupLog .policyTooltip .content_body .line {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
}
.adminWorkgroupLog .policyTooltip .content_body .line_body {
  margin-inline-start: 17px;
}
.adminWorkgroupLog .policyTooltip .content_body .line_body-advanced {
  display: flex;
  flex-direction: column;
  margin-inline-start: 7px;
}
.adminWorkgroupLog .policyTooltip .content_body .line-advanced {
  display: inline-flex;
  margin-top: 20px;
}
.adminWorkgroupLog .policyTooltip .content_body .line-advanced_body {
  margin-inline-start: 17px;
}
.adminWorkgroupLog .policyTooltip .content_body .line-advanced_body-advanced {
  display: flex;
  flex-direction: column;
  margin-inline-start: 25px;
}
.adminWorkgroupLog .policyTooltip .content_body .line-withoutSpace {
  display: inline-flex;
  align-items: center;
}
.adminWorkgroupLog .policyTooltip .content_body .line-withoutSpace_body {
  margin-inline-start: 17px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root {
  --gradient-direction: 270deg;
}

[dir=rtl] {
  --gradient-direction: 90deg;
}

.adminFilter {
  height: 40px;
  align-items: center;
}
.adminFilter-user {
  display: inline-block;
}
.adminFilter-user-title {
  padding: 7px 8px;
  align-items: center;
  color: #717985;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
}
.adminFilter-user-search {
  margin: 8px 8px 8px 8px;
}
.adminFilter-user-footer {
  margin-top: 4px;
  justify-content: end;
  border-top: 1px solid var(--Color-border-primary, #e9ecef);
  padding: 12px 8px 4px 8px;
  gap: 10px;
}.adminDept {
  padding: 32px 32px 0 32px;
  width: 100%;
}
.adminDept-title {
  min-height: 60px;
}
.adminDept .fasooTable-row {
  cursor: default;
}
.adminDept-body {
  height: calc(100% - 60px);
}
.adminDept-body-tab {
  width: 299px;
  border-top: 1px solid var(--divider-1-line, #edeff3);
  border-bottom: 1px solid var(--divider-1-line, #edeff3);
  padding-top: 20px;
}
.adminDept-body-tree {
  width: 291px;
  height: calc(100% - 5px);
  border-right: 1px solid var(--divider-1-line, #edeff3);
  padding-right: 8px;
}
.adminDept-body-tree-dept {
  margin-top: 8px;
  margin-inline-end: -8px;
  padding-right: 8px;
  overflow-y: scroll;
  height: 100%;
}
.adminDept-body-contents {
  width: calc(100% - 300px);
  margin-bottom: 24px;
  display: block;
}
.adminDept-body-contents-title {
  height: 47px;
  border-top: 1px solid var(--divider-1-line, #edeff3);
  border-bottom: 1px solid var(--divider-1-line, #edeff3);
  align-items: center;
  padding: 0px 0px 0px 24px;
}
.adminDept-body-contents-title > div {
  gap: 8px;
}
.adminDept-body-contents-body {
  height: calc(100% - 49px);
  margin-inline-end: -24px;
  padding: 24px 24px 0px 24px;
  overflow-y: scroll;
  display: block;
}
.adminDept-body-contents-body-manager {
  gap: 8px;
  height: 40px;
  align-items: center;
}
.adminDept-body-contents-body-userList {
  height: 40px;
  align-items: center;
  justify-content: space-between;
}
.adminDept-body-contents-body-userList > div {
  gap: 8px;
}
.adminDept-body-contents-body-userList-oci {
  height: 40px;
  align-items: center;
  justify-content: space-between;
}
.adminDept-body-contents-body-userList-oci > div {
  gap: 8px;
}
.adminDept-body-contents-body-externalList {
  height: 40px;
  align-items: center;
  justify-content: space-between;
}
.adminDept-body-contents-body-externalList > div {
  gap: 8px;
}
.adminDept-body-contents-body-deptList {
  height: 40px;
  margin-top: 12px;
  align-items: center;
}
.adminDept-body-contents-body-userInfo {
  margin-top: 12px;
}
.adminDept-body-contents-body-userInfo > div {
  min-height: 52px;
  border-top: 1px solid var(--divider-1-line, #edeff3);
  align-items: center;
}
.adminDept-body-contents-body-userInfo > div > div {
  width: 240px;
}
.adminDept-body-contents-body-userInfo > div:last-of-type {
  border-bottom: 1px solid var(--divider-1-line, #edeff3);
}
.adminDept .avatarManager > span {
  position: absolute !important;
  bottom: -5px !important;
  inset-inline-end: -5px !important;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root {
  --gradient-direction: 270deg;
}

[dir=rtl] {
  --gradient-direction: 90deg;
}

.adminConfig {
  padding: 32px 32px 32px 32px;
  width: 100%;
}
.adminConfig-tab {
  overflow-y: scroll;
}
.adminConfig-tab > * {
  border-bottom: 1px solid #edeff3;
}
.adminConfig-selectBox {
  flex-direction: column;
  width: 82px;
  align-items: center;
  justify-content: center;
  background-color: #f9f9fb;
  margin-left: 60px;
}
.adminConfig-selectBox.view {
  background-color: transparent;
  margin-left: 0;
  margin-right: 60px;
}
.adminConfig-policy {
  padding-left: 32px;
  width: 100%;
  flex-direction: column;
}
.adminConfig-policy.view .underline {
  border-bottom: none;
}
.adminConfig-policy--major {
  width: 100%;
}
.adminConfig-policy--major.underline {
  border-bottom: 1px solid #e9ecef;
}
.adminConfig-policy--detail {
  width: 100%;
  align-items: center;
  padding: 16px 0;
}
.adminConfig-policy--detail.underline {
  border-bottom: 1px solid #e9ecef;
}
.adminConfig-policy--detail .drmPolicy {
  background-color: #f6f8fa;
  border-radius: 12px;
  padding: 16px;
  margin-left: 58px;
  width: 100%;
}
.adminConfig .fasooTabs-headers.leftFullWidth {
  width: 100%;
}
.adminConfig-graybox {
  box-sizing: border-box;
  background-color: #f6f8fa;
  padding: 16px;
  border-radius: 12px;
}
.adminConfig-title {
  min-height: 60px;
}
.adminConfig-filter {
  height: 40px;
}
.adminConfig-subject {
  box-sizing: border-box;
  min-width: 240px;
  width: 240px;
  min-height: 52px;
  padding: 12px 0px;
  align-items: center;
}
.adminConfig-info {
  width: calc(100% - 240px);
  min-height: 32px;
  padding: 16px 32px;
  align-items: center;
  justify-content: center;
}
.adminConfig-info--divider {
  border-bottom: 1px solid #e9ecef;
  margin: 24px 0;
}
.adminConfig-info > * {
  width: 100%;
}
.adminConfig-info-box {
  width: 650px;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
  padding: 12px 0px;
}
.adminConfig-info-box-gap12 {
  gap: 12px;
  padding: 8px 0px;
}
.adminConfig-info-colorBox {
  box-sizing: border-box;
  background-color: #dcf5e8;
  padding: 16px;
  flex-direction: column;
  border-radius: 8px;
}
.adminConfig-info-colorBox2 {
  box-sizing: border-box;
  background-color: #eaf9f1;
  padding: 16px;
  border-radius: 8px;
  align-items: center;
}.adminDocLog {
  padding: 32px 32px 0 32px;
  width: 100%;
  overflow-y: auto;
}
.adminDocLog-title {
  min-height: 60px;
}
.adminDocLog-filter {
  height: 40px;
}
.adminDocLog.adminPage .fasooTable-row {
  cursor: default;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root {
  --gradient-direction: 270deg;
}

[dir=rtl] {
  --gradient-direction: 90deg;
}

.adminWorkgroup {
  padding: 32px 32px 20px 32px;
  width: 100%;
  overflow-y: auto;
}
.adminWorkgroup-title {
  min-height: 60px;
}
.adminWorkgroup-filter {
  height: 40px;
}
.adminWorkgroup .fasooTable-row {
  cursor: default;
}

.adminWorkgroupChangeModal-master {
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 8px;
  background-color: #f6f8fa;
}
.adminWorkgroupChangeModal-tree {
  margin-top: 12px;
  overflow-y: scroll;
}.registerLog {
  padding: 32px 32px 32px 32px;
  width: 100%;
  overflow-y: auto;
}
.registerLog-title {
  min-height: 60px;
}
.registerLog-filter {
  height: 40px;
}
.registerLog .fasooTable-row {
  cursor: default;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root {
  --gradient-direction: 270deg;
}

[dir=rtl] {
  --gradient-direction: 90deg;
}

.adminHome {
  padding: 32px 32px 32px 32px;
  width: 100%;
  overflow-y: auto;
}
.adminHome_top--icon {
  background-color: #eaf9f1;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  margin: 17px 0;
}
.adminHome_top--body {
  height: 80%;
  width: 100%;
}
.adminHome_top--box {
  height: 160px;
  border-radius: 5px;
  border: solid 1px #e6e6e9;
  padding: 20px;
  flex: 1 1 auto;
}
.adminHome_top--columnDivider {
  background-color: #e6e6e9;
  width: 1px;
  height: 35px;
}
.adminHome_top--rowDivider {
  background-color: #e6e6e9;
  width: 100%;
  height: 1px;
}
.adminHome_top--rowBox {
  width: 60%;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.adminHome_top > * + * {
  margin-inline-start: 10px;
}
.adminHome_body {
  margin-top: 36px;
  padding: 12px;
  flex-direction: column;
  border-radius: 5px;
  border: solid 1px #e6e6e9;
}
.adminHome_body-select {
  margin: 10px 0 20px 0;
  padding: 0 10px;
}
.adminHome_body .tag-box {
  padding: 6px 10px;
  margin-top: 42px;
}
.adminHome_bottom {
  margin-top: 32px;
  width: 100%;
  flex: auto;
  gap: 30px;
}
.adminHome_bottom-rank {
  width: calc(50% - 15px);
}
.adminHome_bottom-rank--title {
  padding-bottom: 15px;
}
.adminHome_bottom-rank table {
  border-collapse: collapse;
  font-size: 14px;
}
.adminHome_bottom-rank thead {
  height: 40px;
  border: 0px;
}
.adminHome_bottom-rank thead > tr > th {
  background-color: #f6f8fa;
  text-align: start;
  padding: 6px;
}
.adminHome_bottom-rank tbody > tr > td {
  align-items: center;
  border-bottom: 1px solid #f6f8fa;
  height: 40px;
  white-space: pre;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 6px;
  max-width: 300px;
}

.premiumCards {
  width: 100%;
  margin-top: 35px;
  justify-content: center;
}
.premiumCards .premiumCard {
  background-color: #f7fcf7;
  border-radius: 18px;
  box-sizing: border-box;
  width: 317px;
  align-items: center;
  padding: 18px 0;
}
.premiumCards .premiumCard img {
  border-radius: 13px;
}
.premiumCards .morePower {
  background-color: #eaf9f1;
  border: 1px solid rgba(134, 222, 176, 0.5019607843);
  border-radius: 17px;
  margin-top: 10px;
  height: 80px;
  align-items: center;
  padding-inline-start: 18px;
}.adminSetting {
  padding: 32px 32px 32px 32px;
  width: 100%;
  overflow-y: auto;
}
.adminSetting-title {
  min-height: 60px;
}
.adminSetting .fasooTable-row {
  cursor: default;
}

.typeModal-title {
  margin-bottom: 10px;
  display: block;
}
.typeModal-topBox {
  justify-content: space-between;
  margin-bottom: 10px;
  display: flex;
}
.typeModal-box {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.typeModal-text {
  width: 70%;
}
.typeModal-right {
  width: 70%;
  justify-content: flex-end;
}
.typeModal-ipBox {
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}.whitelabel {
  padding: 32px 32px 32px 32px;
  width: 100%;
  overflow-y: auto;
}
.whitelabel-title {
  min-height: 60px;
}
.whitelabel_loginBody {
  display: flex;
  padding: 16px 0px 16px 0;
  flex-direction: column;
  align-self: stretch;
  border-top: 1px solid var(--divider-1-line, #edeff3);
}
.whitelabel_bottom {
  border-top: 1px solid var(--divider-1-line, #edeff3);
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
}
.whitelabel_image {
  border: 1px solid var(--divider-1-line, #edeff3);
}
.whitelabel_image_loginBiImage {
  width: 360px;
  height: 60px;
  padding: 2px 62.309px 2px 63px;
}
.whitelabel_image_subImage {
  padding: 4px 13.216px 4px 14px;
}
.whitelabel_image_mainImage {
  width: 200px;
  height: 40px;
  padding: 5px 71px 4.218px 0px;
}
.whitelabel_image_emailImage {
  width: 200px;
  height: 40px;
  padding: 0px 16.685px 0px 15.685px;
}
.whitelabel_image_serviceImage {
  width: 200px;
  height: 40px;
  padding: 0px 16.685px 0px 15.685px;
}.positionRole {
  padding: 32px 32px 32px 32px;
  width: 100%;
  overflow-y: auto;
}
.positionRole-title {
  min-height: 60px;
}
.positionRole .fasooTable-row {
  cursor: default;
}.adminTrash {
  padding: 32px 32px 32px 32px;
  width: 100%;
  overflow-y: auto;
}
.adminTrash-title {
  min-height: 60px;
}
.adminTrash-filter {
  height: 40px;
}
.adminTrash .fasooTable-row {
  cursor: default;
}.adminLoginLog {
  padding: 32px 32px 32px 32px;
  width: 100%;
  overflow-y: auto;
}
.adminLoginLog-title {
  min-height: 60px;
}
.adminLoginLog-filter {
  height: 40px;
}
.adminLoginLog .fasooTable-row {
  cursor: default;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.storage {
  overflow-y: auto;
  padding: 32px;
  width: 100%;
}
.storage_body {
  flex-direction: column;
}
.storage .fasooTable-row {
  cursor: default;
}

.storageDetail-body {
  flex-direction: column;
  margin-top: 30px;
}
.storageDetail-body > * + * {
  margin-top: 20px;
}
.storageDetail-titleBtn {
  margin-left: auto;
}
.storageDetail-titleBtn > div > * + * {
  margin-left: 10px;
}
.storageDetail-label {
  padding: 0px 16px;
  width: 80px;
}
.storageDetail-row > * {
  align-items: center;
  border-bottom: 1px solid #f6f8fa;
  height: 52px;
  white-space: pre;
  text-overflow: ellipsis;
}
.storageDetail-row > *:last-child {
  width: calc(100% - 80px);
}
.storageDetail-nameText {
  width: 64%;
  margin-left: 10px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.adminMacAddressManage {
  padding: 32px 32px 20px 32px;
  width: 100%;
  overflow-y: auto;
}
.adminMacAddressManage .fasooTable-row {
  cursor: default;
}
.adminMacAddressManage-title {
  min-height: 60px;
}
.adminMacAddressManage-filter {
  height: 40px;
}
.adminMacAddressManage-workgroupCount {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.adminMacAddressManage-rowActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
}
.adminMacAddressManage-dropdown {
  position: fixed;
  z-index: 1000;
  width: 200px;
  background: #ffffff;
  border: 1px solid #d1d6db;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(25, 31, 40, 0.12);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adminMacAddressManage-dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.adminMacAddressManage-dropdown-item:hover {
  background: #e9ecef;
}
.adminMacAddressManage-workgroupOverlay {
  position: fixed;
  inset: 0;
  z-index: 999;
}
.adminMacAddressManage-workgroupPopup {
  position: fixed;
  z-index: 1000;
  width: 252px;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0px 4px 12px 0px rgba(25, 31, 40, 0.12);
  padding-bottom: 4px;
  overflow: hidden;
}
.adminMacAddressManage-workgroupPopup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px 24px;
  border-bottom: 1px solid #e9ecef;
}
.adminMacAddressManage-workgroupPopup-close {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #b5bbc2;
}
.adminMacAddressManage-workgroupPopup-close:hover {
  color: #252d38;
}
.adminMacAddressManage-workgroupPopup-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 204px;
  overflow-y: auto;
  padding: 12px 16px;
}
.adminMacAddressManage-workgroupPopup-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.adminWebRevisionManage {
  padding: 32px 32px 20px 32px;
  width: 100%;
  overflow-y: auto;
}
.adminWebRevisionManage .fasooTable-row {
  cursor: default;
}
.adminWebRevisionManage-title {
  min-height: 60px;
}
.adminWebRevisionManage-subHeader {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.adminWebRevisionManage-subHeader-count {
  display: flex;
  align-items: center;
  gap: 4px;
}
.adminWebRevisionManage-subHeader-search {
  width: 240px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.api-reference {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a2e;
}
.api-reference__header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}
.api-reference__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 40px;
  min-height: 80px;
}
.api-reference__header-left {
  display: flex;
  align-items: center;
}
.api-reference__header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.api-reference__logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}
.api-reference__header-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 16px;
}
.api-reference__header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.api-reference__header-label {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.api-reference__total-badge {
  font-size: 11px;
  font-weight: 600;
  color: #93c5fd;
  background: rgba(147, 197, 253, 0.15);
  border: 1px solid rgba(147, 197, 253, 0.3);
  border-radius: 20px;
  padding: 2px 10px;
}
.api-reference__auth-status {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}
.api-reference__auth-status.is-ready {
  color: #4ade80;
}
.api-reference__config-btn {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.api-reference__config-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}
.api-reference__header-version {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
}
.api-reference__config-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
}
.api-reference__config-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 20px 40px;
}
.api-reference__config-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 220px;
}
.api-reference__config-field label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.api-reference__config-field label span {
  font-weight: 400;
  text-transform: none;
  color: rgba(255, 255, 255, 0.35);
}
.api-reference__config-input-row {
  display: flex;
  gap: 6px;
}
.api-reference__config-input-row input {
  flex: 1;
}
.api-reference__config-input-row button {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #93c5fd;
  background: rgba(147, 197, 253, 0.1);
  border: 1px solid rgba(147, 197, 253, 0.25);
  border-radius: 5px;
  padding: 0 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.api-reference__config-input-row button:hover {
  background: rgba(147, 197, 253, 0.2);
}
.api-reference__config-field > input, .api-reference__config-input-row input {
  font-size: 12px;
  font-family: "SFMono-Regular", Consolas, monospace;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.api-reference__config-field > input::placeholder, .api-reference__config-input-row input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.api-reference__config-field > input:focus, .api-reference__config-input-row input:focus {
  border-color: rgba(147, 197, 253, 0.5);
  background: rgba(255, 255, 255, 0.1);
}
.api-reference__body {
  display: flex;
  flex: 1;
  max-width: 1340px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  gap: 40px;
}
.api-reference__sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 24px 0;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.api-reference__sidebar::-webkit-scrollbar {
  width: 4px;
}
.api-reference__sidebar::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}
.api-reference__sidebar-section {
  margin-bottom: 20px;
}
.api-reference__sidebar-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  padding: 0 12px;
  margin: 0 0 6px;
}
.api-reference__sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 12px;
  font-size: 13.5px;
  color: #374151;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.api-reference__sidebar-item:hover {
  background: #f3f4f6;
  color: #1a1a2e;
}
.api-reference__sidebar-item.is-active {
  background: #eff6ff;
  color: #3182f6;
  font-weight: 600;
}
.api-reference__sidebar-item.is-active .api-reference__sidebar-count {
  background: #dbeafe;
  color: #3182f6;
}
.api-reference__sidebar-count {
  font-size: 11px;
  background: #f3f4f6;
  color: #9ca3af;
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 22px;
  text-align: center;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.api-reference__content {
  flex: 1;
  min-width: 0;
  max-width: 860px;
  padding: 32px 0 80px;
}
.api-reference__section {
  margin-bottom: 56px;
  scroll-margin-top: 88px;
}
.api-reference__section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8eaed;
}
.api-reference__section-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}
.api-reference__section-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.api-reference__section-badge--user {
  background: #eff6ff;
  color: #3182f6;
}
.api-reference__section-badge--admin {
  background: #fdf4ff;
  color: #9333ea;
}
.api-reference__endpoint-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.api-reference__endpoint {
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.api-reference__endpoint.is-open {
  border-color: #05c072;
  box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.08);
}
.api-reference__endpoint-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.api-reference__endpoint-row:hover {
  background: #f8f9fa;
}
.api-reference__endpoint-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.api-reference__endpoint-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1a2e;
}
.api-reference__endpoint-url {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: #6b7280;
  word-break: break-all;
}
.api-reference__endpoint-arrow {
  font-size: 10px;
  color: #9ca3af;
  flex-shrink: 0;
}
.api-reference__tryit {
  padding: 8px 16px 16px;
  border-top: 1px solid #f0f1f3;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.api-reference__tryit-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.api-reference__tryit-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin: 0;
}
.api-reference__tryit-label span {
  font-weight: 400;
  text-transform: none;
  color: #9ca3af;
}
.api-reference__tryit-params {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.api-reference__tryit-param {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  gap: 10px;
}
.api-reference__tryit-param-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 7px;
}
.api-reference__tryit-param-label .name {
  font-size: 12px;
  font-weight: 600;
  font-family: "SFMono-Regular", Consolas, monospace;
  color: #1a1a2e;
}
.api-reference__tryit-param-label .type {
  font-size: 10px;
  font-weight: 500;
  color: #9333ea;
  background: #fdf4ff;
  border-radius: 3px;
  padding: 1px 5px;
  width: fit-content;
}
.api-reference__tryit-param-label .required {
  font-size: 11px;
  color: #ef4444;
  font-weight: 700;
}
.api-reference__tryit-param input, .api-reference__tryit-param select {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-family: "SFMono-Regular", Consolas, monospace;
  color: #1a1a2e;
  background: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 6px 10px;
  outline: none;
  transition: border-color 0.15s;
}
.api-reference__tryit-param input:focus, .api-reference__tryit-param select:focus {
  border-color: #05c072;
  background: #ffffff;
}
.api-reference__tryit-param input::placeholder, .api-reference__tryit-param select::placeholder {
  color: #c0c7d0;
}
.api-reference__tryit-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.api-reference__tryit-add {
  font-size: 11px;
  font-weight: 600;
  color: #3182f6;
  background: none;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 2px 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.api-reference__tryit-add:hover {
  background: #eff6ff;
}
.api-reference__tryit-query-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.api-reference__tryit-query-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.api-reference__tryit-query-row input {
  flex: 1;
  font-size: 12px;
  font-family: "SFMono-Regular", Consolas, monospace;
  color: #1a1a2e;
  background: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 6px 10px;
  outline: none;
  transition: border-color 0.15s;
}
.api-reference__tryit-query-row input:focus {
  border-color: #05c072;
  background: #ffffff;
}
.api-reference__tryit-query-row input::placeholder {
  color: #c0c7d0;
}
.api-reference__tryit-query-eq {
  font-size: 13px;
  color: #9ca3af;
  flex-shrink: 0;
}
.api-reference__tryit-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #9ca3af;
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.api-reference__tryit-remove:hover {
  color: #ef4444;
  background: #fef2f2;
  border-color: #fecaca;
}
.api-reference__tryit-body {
  width: 100%;
  font-size: 12px;
  font-family: "SFMono-Regular", Consolas, monospace;
  color: #1a1a2e;
  background: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.api-reference__tryit-body:focus {
  border-color: #05c072;
  background: #ffffff;
}
.api-reference__tryit-body::placeholder {
  color: #c0c7d0;
}
.api-reference__tryit-headers {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: 6px;
  padding: 10px 12px;
}
.api-reference__tryit-headers .key {
  font-size: 11px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-weight: 600;
  color: #6b7280;
}
.api-reference__tryit-headers .val {
  font-size: 11px;
  font-family: "SFMono-Regular", Consolas, monospace;
  color: #374151;
  word-break: break-all;
}
.api-reference__params-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  border: 1px solid #e8eaed;
  border-radius: 6px;
  overflow: hidden;
}
.api-reference__params-table thead tr {
  background: #f3f4f6;
}
.api-reference__params-table th {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  text-align: left;
  border-bottom: 1px solid #e8eaed;
  white-space: nowrap;
}
.api-reference__params-table td {
  padding: 9px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f1f3;
  color: #374151;
}
.api-reference__params-table tbody tr:last-child td {
  border-bottom: none;
}
.api-reference__params-table tbody tr:hover td {
  background: #fafafa;
}
.api-reference__params-table code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #1a1a2e;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}
.api-reference__param-type {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  font-family: "SFMono-Regular", Consolas, monospace;
  color: #9333ea;
  background: #fdf4ff;
  border: 1px solid #e9d5ff;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.api-reference__param-required {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 4px;
  padding: 1px 6px;
}
.api-reference__param-optional {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: blue;
  background: lightblue;
  border-radius: 4px;
  padding: 1px 6px;
}
.api-reference__param-desc {
  color: #6b7280;
  font-size: 12.5px;
  line-height: 1.5;
}
.api-reference__tryit-execute {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: #3182f6;
  border: none;
  border-radius: 6px;
  padding: 8px 22px;
  cursor: pointer;
  transition: background 0.15s;
}
.api-reference__tryit-execute:hover:not(:disabled) {
  background: #2563eb;
}
.api-reference__tryit-execute:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}
.api-reference__response {
  border: 1px solid #e8eaed;
  border-radius: 6px;
  overflow: hidden;
}
.api-reference__response-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8eaed;
}
.api-reference__response-status {
  font-size: 12px;
  font-weight: 700;
  font-family: "SFMono-Regular", Consolas, monospace;
  padding: 2px 8px;
  border-radius: 4px;
}
.api-reference__response-status.is-ok {
  background: #d1fae5;
  color: #065f46;
}
.api-reference__response-status.is-err {
  background: #fee2e2;
  color: #991b1b;
}
.api-reference__response-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
}
.api-reference__response-body {
  margin: 0;
  padding: 12px;
  font-size: 12px;
  font-family: "SFMono-Regular", Consolas, monospace;
  color: #1a1a2e;
  background: #ffffff;
  max-height: 360px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.api-reference__method-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 22px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.api-reference .method-get {
  background: #dbeafe;
  color: #1d4ed8;
}
.api-reference .method-post {
  background: #d1fae5;
  color: #065f46;
}
.api-reference .method-put {
  background: #ffedd5;
  color: #9a3412;
}
.api-reference .method-delete {
  background: #fee2e2;
  color: #991b1b;
}
.api-reference .method-patch {
  background: #fef3c7;
  color: #92400e;
}
.api-reference .dropdwon-versoin > div:nth-child(1) {
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
  background-color: rgba(147, 197, 253, 0.1) !important;
  border-radius: 20px !important;
  height: 25px;
}
.api-reference .dropdwon-versoin > div:nth-child(1) > span {
  color: #93c5fd !important;
}
.api-reference .dropdwon-versoin > div:nth-child(1) > svg > path {
  fill: #93c5fd;
}
.api-reference .dropdwon-versoin .dropdown-item:hover {
  background-color: rgba(147, 197, 253, 0.1) !important;
}.checkSignup {
  flex-direction: column;
  align-items: center;
}
.checkSignup .fasooTabs > li {
  padding-bottom: 6px;
  height: 20px;
}
.checkSignup-sendMail--request {
  margin-top: 34px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.clientEco {
  height: 614px;
  max-width: 480px;
}
.clientEco .fasooTabs .off, .clientEco .fasooTabs .on {
  z-index: 0 !important;
}
.clientEco-divider {
  border-bottom: 2px solid #d1d6db;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 16px;
}
.clientEco-groups {
  position: relative;
  width: 50px;
}
.clientEco-groups > *:first-child {
  z-index: 2;
  top: -16px;
  position: absolute;
}
.clientEco-groups > *:last-child {
  z-index: 1;
  top: -16px;
  position: absolute;
  inset-inline-start: 20px;
}
.clientEco-tabs {
  border-bottom: 1px solid #e9ecef;
}
.clientEco-tabs .fasooTabs-headers.leftFullWidth {
  border-bottom: none;
}
.clientEco-sidemenu {
  background-color: #f8f9fa;
  padding: 14px 10px;
  flex-direction: column;
  width: 64px;
  box-sizing: border-box;
  align-items: center;
  overflow: auto;
  border-inline-end: 1px solid #e9ecef;
}
.clientEco-sidemenu .clicked {
  border: 3px solid #25c16f !important;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  position: absolute;
  left: -5.8px;
  top: -6px;
  border-radius: 16px;
}
.clientEco-header {
  padding: 20px;
  box-sizing: border-box;
}
.clientEco-workgroup {
  position: relative;
}
.clientEco-workgroup .avatar-shape--workgroup {
  min-width: 29px;
  min-height: 29px;
  cursor: pointer;
}

.clientBookmark-header {
  height: 88px;
  padding: 0 20px;
}

.clientWorkgroupBody {
  flex-direction: column;
}
.clientWorkgroupBody-header {
  background-color: #f6f8fa;
  height: 40px;
  width: 100%;
  align-items: center;
  padding-inline-start: 20px;
  box-sizing: border-box;
}
.clientWorkgroupBody .inifinteScroll-item {
  justify-content: center;
  display: flex;
}

.clientMeeting {
  flex-direction: column;
}
.clientMeeting .fasooTable-row-md {
  height: 56px;
  box-sizing: border-box;
}
.clientMeeting .fasooTable-window {
  padding-top: 10px;
  padding-bottom: 1px;
}

.clientFile-filter {
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.clientFile-filter:active {
  cursor: grabbing;
}
.clientFile-filter > * + * {
  margin-inline-start: 12px !important;
}
.clientFile-filter span {
  white-space: pre !important;
}
.clientFile-item {
  height: 56px;
  width: 392px;
  background-color: white;
  border-radius: 10px;
  align-items: center;
  padding: 11px 6px 11px 12px;
  box-sizing: border-box;
  position: relative;
}
.clientFile-item:hover {
  background-color: #ebeff2;
}
.clientFile-item:hover .hover-actions {
  display: flex !important;
}

.clientDetail {
  padding: 24px 28px;
  box-sizing: border-box;
}
.clientDetail-header > * + * {
  margin-inline-start: 4px;
}
.clientDetail-header > * {
  height: fit-content;
}

.clientHistory-items {
  overflow: auto;
  height: 429px;
}
.clientHistory-item {
  padding: 10px 12px;
  height: 62px;
  border-radius: 10px;
  box-sizing: border-box;
  flex-direction: column;
  position: relative;
}
.clientHistory-item:hover {
  background-color: #e9ecef;
}
.clientHistory-item:hover .hover-actions {
  width: 50px;
  display: flex !important;
}

.calendarRange .react-datepicker .react-datepicker__header {
  border-radius: 10px;
}

.calendarRange.isClient > .last .react-datepicker {
  transform: translate(-100%, -50%) !important;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

:root {
  --gradient-direction: 270deg;
}

[dir=rtl] {
  --gradient-direction: 90deg;
}

.docDetailModal {
  box-sizing: border-box;
}
.docDetailModal-header {
  padding: 0px 12px;
  height: 32px;
  align-items: center;
  background-color: #f6f8fa;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.docDetailModal .tab {
  border-bottom: 1px solid #f6f8fa;
}
.docDetailModal .fds-modal-body {
  padding: 0 28px !important;
}

.docDetailModal {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.docDetailModal::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.docDetailModal::-webkit-scrollbar-button:start:decrement, .docDetailModal::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  width: 0;
  background: transform;
}
.docDetailModal::-webkit-scrollbar-thumb {
  background: #b5bbc2;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.docDetailModal::-webkit-scrollbar-thumb:after {
  content: "";
  width: 20px;
  background: #ffffff;
  position: absolute;
  top: 2px;
}
.docDetailModal {
  overflow-y: scroll;
}
.docDetailModal-body {
  position: absolute;
  z-index: 2;
  min-width: 1366px;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
}
.docDetailModal-body-logo {
  height: 4vh;
  max-height: 50px;
  margin-top: 60px;
  margin-bottom: 40px;
}
.docDetailModal-body-detail {
  margin-top: auto;
  position: relative;
}
.docDetailModal-body-ci {
  margin-top: auto;
}
.docDetailModal-body-hand {
  cursor: pointer;
}
.docDetailModal-body-download-notice {
  position: absolute;
  z-index: -1;
  background-color: #ffffff;
  border: 2px solid #86deb0;
  border-radius: 5px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #252d38;
  box-shadow: 0px 0px 4.5px rgba(5, 192, 114, 0.5);
  white-space: nowrap;
}
.docDetailModal-body.mobile {
  display: none;
  justify-content: center;
  min-width: 100%;
}
@media (max-width: 767px) {
  .docDetailModal-body.desktop {
    display: none;
  }
  .docDetailModal-body.mobile {
    display: flex;
  }
}
.docDetailModal path,
.docDetailModal rect {
  transition: fill 0.3s ease, fill-opacity 0.3s ease;
}
.docDetailModal-outBox {
  z-index: 3;
  position: absolute;
  width: 358px;
}
.docDetailModal-outBox-button {
  top: 50%;
  left: 260px;
  transform: translateY(calc(-50% - 20px));
}
.docDetailModal-outBox-in {
  width: 358px;
  height: 125px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.downloadClient {
  margin-top: 32px;
  position: absolute;
  height: calc(100vh - 32px);
  width: 100%;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.downloadClient-info {
  background-color: #f6f8fa;
  width: 360px;
  padding: 16px;
  margin-top: 16px;
}
.downloadClient-graybox {
  padding: 18px 21px 24px 21px;
  background-color: #f6f8fa;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  max-width: 500px;
  box-sizing: border-box;
}
.downloadClient-graybox--items {
  margin-top: 16px;
  width: 100%;
}
.downloadClient-graybox--items > * + * {
  margin-inline-start: 16px;
}
.downloadClient-graybox--item {
  align-items: center;
  width: calc((100% - 32px) / 3);
  background-color: #4b596b;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.downloadClient-guides {
  margin-top: 60px;
}
.downloadClient-guides > * + * {
  margin-inline-start: 29px;
}
.downloadClient-guides > * {
  cursor: pointer;
  border-radius: 20px;
  width: 301px;
  height: 182px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.downloadClient-guides > .windows:hover {
  background-color: #dff6ea;
}
.downloadClient-guides > .mac:hover {
  background-color: #fff0dc;
}
.downloadClient-guides > .video:hover {
  background-color: #deeaff;
}
.downloadClient-downloads {
  justify-content: center;
  flex-direction: row;
  width: 100%;
}
.downloadClient-downloads > * + * {
  margin-inline-start: 28px;
}
.downloadClient-downloads > * {
  background-color: #fafbfc;
  border-radius: 20px;
  max-width: 466px;
  width: 100%;
  height: 120px;
  align-items: center;
  padding: 0 28px;
  justify-content: space-between;
  box-sizing: border-box;
}
@media (max-width: 970px) {
  .downloadClient .service-guides,
  .downloadClient .service-downloads {
    flex-direction: column;
    align-items: center;
  }
  .downloadClient .service-guides > * + *,
  .downloadClient .service-downloads > * + * {
    margin-inline-start: 0;
    margin-top: 20px;
  }
}.error {
  flex-direction: column;
}
.error-header {
  width: 100%;
  height: 80px;
  min-height: 80px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #dadee5;
  box-sizing: border-box;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.deleteTag {
  background-color: #feeae7;
  color: #ef5e4b;
  font-size: 12px;
  font-weight: 400;
  align-items: center;
  justify-content: center;
  height: fit-content;
  min-width: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 12px;
}.HTMLLogin {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  box-sizing: border-box;
}
.HTMLLogin-inputField .input .trailingIcon--md {
  top: 13px;
}
.HTMLLogin-inputField .inputField {
  height: 48px;
}
.HTMLLogin .getEmail {
  max-width: 388px;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.HTMLLogin .getEmail::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1054px) {
  .HTMLLogin .typography-type--h1 {
    font-size: 18px;
    line-height: 26px;
  }
  .HTMLLogin .typography-type--body1_md {
    font-size: 14px;
    line-height: 20px;
  }
}

.requestChip {
  background-color: #e9ecef;
  padding: 2px 8px;
  border-radius: 15px;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.login {
  align-items: center;
  justify-content: center;
}
.login-button {
  cursor: pointer;
}
.login-button:hover {
  text-decoration: underline;
}
.login .divider {
  margin-top: 30px;
  margin-bottom: 18px;
}
.login-right {
  margin-inline-start: 12.5%;
}
.login-inputField.ar input {
  text-align: right;
}
.login-inputField input {
  direction: ltr;
}
.login-password.ar input {
  text-align: right;
  padding-left: 62px;
}
.login-password input {
  padding-right: 62px;
  direction: ltr;
}
.login input {
  height: 48px;
}

@media (max-width: 1054px) {
  .login-left {
    width: 100% !important;
  }
  .login-right {
    display: none !important;
  }
}
.isMobileView > * {
  width: 320px !important;
  min-width: 320px !important;
}
.isMobileView > * .fds-modal-body {
  padding: 0 20px 24px 20px !important;
}
.isMobileView > * .fds-modal-header {
  padding: 20px 20px 19px 20px !important;
}
.isMobileView > * .fds-modal-body-msg {
  word-break: auto-phrase;
}
.isMobileView > * .otpCode {
  width: calc(100% - 69px) !important;
}
.isMobileView > * .otpCode .inputField {
  padding-inline-end: 54px !important;
}
.isMobileView > * .fds-modal-header-title-main {
  height: auto;
  white-space: break-spaces;
}
.isMobileView > * .esetLoginModal-step {
  padding: 12px 12px 12px 8px !important;
  min-height: 84px;
  height: auto;
}

@media (max-width: 320px) {
  .isMobileView > * {
    width: calc(100% - 54px) !important;
    min-width: calc(100% - 54px) !important;
  }
}
.googleOtpModal-key {
  background-color: #f6f8fa;
  border-radius: 16px;
  padding: 16px 20px;
  margin: 20px 0;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

.pwViewBtn {
  cursor: pointer;
}

.esetLoginModal-step {
  background-color: #f6f8fa;
  border-radius: 16px;
  padding: 0 24px 0 30px;
  align-content: center;
  width: 100%;
  height: 120px;
  box-sizing: border-box;
  align-items: center;
}
.esetLoginModal-step > .stepCircle {
  background-color: #05c072;
  min-width: 28px;
  min-height: 28px;
  line-height: 28px;
  text-align: center;
  align-content: center;
  border-radius: 50%;
}

@media (max-width: 767px) {
  .findPassword .inputField {
    background: #f6f8fa;
    border: none;
  }
  .findPassword .fds-modal-body {
    padding-bottom: 28px !important;
  }
}.title {
  margin-top: 20px !important;
  margin-bottom: 13px;
  font-size: 22px;
  color: #28292b;
}

.subTitle {
  margin-top: 30px !important;
  margin-bottom: 18px;
  font-size: 18px;
  color: #28292b;
}

.contents {
  margin-top: 10px;
  font-size: 14px;
  color: #797b82;
  line-height: 150%;
  white-space: normal;
}

.wsTable {
  display: block;
  width: 100%;
  margin-top: 10px;
  table-layout: fixed;
  border: 0px solid #797b82;
}
.wsTable > thead > tr {
  width: 100%;
  height: 40px;
  border: 1px solid #f1f1f1;
}
.wsTable > thead > * > .th {
  text-align: center;
  padding: 5px 5px;
  background-color: #f5f5f5;
  border: 1px solid #797b82;
  width: 35%;
  font-weight: 700;
  font-size: 16px;
}
.wsTable > tbody > tr > .th {
  text-align: center;
  padding: 5px 5px;
  background-color: #f5f5f5;
  border: 1px solid #797b82;
  width: 35%;
  font-weight: 700;
  font-size: 16px;
}
.wsTable > tbody > tr > .td {
  margin-top: 10px;
  font-size: 14px;
  color: #797b82;
  line-height: 150%;
  border: 1px solid #797b82;
  padding: 15px 5px;
  font-style: normal;
  font-weight: 500;
  white-space: normal;
}

.wsTermsPage {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.wsTermsPage::-webkit-scrollbar {
  width: 5px;
}
.wsTermsPage::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #b5b5b5;
}

.title {
  margin-top: 20px !important;
  margin-bottom: 13px;
  font-size: 22px;
  color: #28292b;
}

.subTitle {
  margin-top: 30px !important;
  margin-bottom: 18px;
  font-size: 18px;
  color: #28292b;
}

.contents {
  margin-top: 10px;
  font-size: 14px;
  color: #797b82;
  line-height: 150%;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

@media print {
  .preview * {
    display: none !important;
  }
  .preview ::after {
    display: block;
  }
}
.preview {
  flex-direction: column;
}
.preview-header {
  min-height: 68px;
  height: 67px;
  padding: 0 28px;
  align-items: center;
  border-bottom: 1px solid #e9ecef;
  box-sizing: border-box;
}
.preview-header--actions > * + * {
  margin-inline-start: 8px;
}
.preview-body {
  position: relative;
  width: 100%;
}
.preview-right {
  inset-inline-end: 0;
  height: 100%;
}
.preview-right--btns {
  flex-direction: column;
  padding: 12px 11px;
  border-inline-start: 1px solid #e9ecef;
  border-inline-end: 1px solid #e9ecef;
}
.preview-iframe {
  width: 100%;
}
.preview__wtmkStyle {
  inset-inline-start: 25%;
  position: fixed;
  margin-inline-start: calc(var(--variable-width));
  top: 59%;
  font-size: 16pt;
  opacity: 0.2;
  filter: alpha(opacity=20);
  text-shadow: 1px 1px 2px;
  user-select: none;
  transform: rotate(-30deg);
  z-index: 99;
  pointer-events: none;
}

.previewAside {
  width: 344px;
}
.previewAside > .isPreview {
  height: 100%;
  width: 100%;
  max-width: 100%;
}
.previewAside-comment {
  width: calc(100% - 32px);
  flex-direction: column;
  margin-top: 32px;
  padding: 0 16px;
}
.previewAside-comment--register {
  margin-inline-start: 8px;
  padding: 9px 15px;
}
.previewAside-comment--register > span {
  white-space: nowrap !important;
}
.previewAside-comment--memo {
  margin-top: 4px;
  background-color: #f6f8fa;
  padding: 10px;
  border-radius: 8px;
  word-break: break-word;
  margin-inline-start: 36px;
}
.previewAside-comment--list {
  max-height: calc(100% - 81px);
  overflow: auto;
  padding-inline-end: 4px;
  width: calc(100% + 4px);
  margin-top: 12px;
}
.previewAside-comment--list > * {
  margin-bottom: 12px;
}
.previewAside-comment--list::-webkit-scrollbar {
  height: 6px;
  width: 4px;
}
.previewAside-comment--list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
}
.previewAside-comment--list:hover {
  transition-duration: 1s;
  transition-timing-function: ease-out;
}
.previewAside-comment--list:hover::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #b5bbc2;
}

@media (max-width: 767px) {
  .preview-right {
    display: none !important;
  }
}.service {
  width: 100%;
  height: 100%;
}
.service-left {
  width: 44%;
  background-color: #f7fbfe;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.service-left > div {
  position: relative;
}
.service-left--logo {
  position: absolute;
  top: -96px;
}
.service-left--star1 {
  position: absolute;
  top: -49px;
  inset-inline-start: 22px;
}
.service-left--star2 {
  position: absolute;
  inset-inline-start: 443px;
  top: -160px;
}
.service-button {
  margin-inline-start: 4px;
  color: rgb(5, 192, 114);
  text-decoration: underline;
  cursor: pointer;
}
.service .clientAndGuide {
  cursor: pointer;
  max-width: 190px;
}
.service-right {
  height: 100%;
  padding: 0 80px 0 75px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.service-right--body {
  justify-content: center;
  flex-direction: column;
  border-inline-start: 4px dashed #66dcab;
  padding-inline-start: 56px;
  position: relative;
  max-width: 611px;
}
.service-right--body > div + div {
  margin-top: 50px;
}
.service-right--body > div {
  height: 64px;
  align-items: center;
}
.service-right--body .edge {
  height: 50px;
}
.service-right--body img {
  position: absolute;
  inset-inline-start: -34px;
}
.service-right--divider {
  position: absolute;
  height: 100%;
  border: 4px dashed #66dcab;
}

@media (max-width: 1054px) {
  .service-left {
    display: none !important;
  }
  .service-right {
    width: 100%;
    padding: 0 30px 0 35px;
  }
  .service-right .typography-type--h2 {
    font-size: 16px;
    line-height: 20px;
  }
  .service-right .service-right--body > div + div {
    margin-top: 40px;
  }
  .clientAndGuides {
    margin-top: 50px !important;
  }
  .clientAndGuide {
    width: 33%;
  }
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.signup {
  flex-direction: column;
  align-items: center;
  overflow: auto;
}
.signup .fasooTabs > li {
  padding-bottom: 6px;
  height: 20px;
}
.signup-checkbox {
  justify-items: left;
}
.signup-checkbox > span {
  color: #717985;
}
.signup-checkbox.oci:hover {
  text-decoration: underline;
  cursor: pointer;
}
.signup .checkbox-item {
  min-width: 18px;
}
.signup-stepper {
  align-items: flex-start;
  margin-top: 50px;
  position: relative;
  margin-bottom: 50px;
}
.signup-stepper-step {
  gap: 12px;
  width: 101px;
  position: absolute;
}
.signup-stepper-line {
  flex: 1;
  height: 1px;
  background: #e9ecef;
  margin-top: 12px;
  width: 300px;
  position: absolute;
}
.signup-stepper-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #d1d6db;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.signup-stepper-circle.active {
  background: #05c072;
  border-color: #05c072;
}
.signup-download-box {
  padding: 18px 24px 24px;
  background-color: #f6f8fa;
  border-radius: 16px;
  width: 500px;
  box-sizing: border-box;
}
.signup-download-btn {
  align-items: center;
  width: 200px;
  background-color: #4b596b;
  padding: 6px 12px;
  border-radius: 6px;
  justify-content: center;
  cursor: pointer;
}
.signup-complete-info {
  background-color: #f6f8fa;
  width: 360px;
  padding: 16px;
}
.signup-mailBody {
  border: 1px solid #d1d6db;
  border-radius: 10px;
  padding: 48px;
  margin-top: 40px;
  flex-direction: column;
  box-sizing: border-box;
}
.signup-mailBody > .divider {
  margin: 12px 0;
  width: 100%;
  background: #f1f1f1;
}

.mailVerify {
  width: 100%;
  height: 100%;
}
.mailVerify .divider {
  width: 100%;
  height: 1px;
  margin: 20px auto;
  border-width: 0;
  background: #f1f1f1;
}
.mailVerify-body {
  height: calc(100% - 60px);
  align-items: center;
  justify-content: center;
}
.mailVerify-welcome {
  margin: 40px 0 48px 0;
  align-items: center;
  justify-content: center;
}:root-color {
  --color_brand_10: map-get($theme, 10);
  --color_brand_20: map-get($theme, 20);
  --color_brand_30: map-get($theme, 30);
  --color_brand_40: map-get($theme, 40);
  --color_brand_50: map-get($theme, 50);
  --color_brand_60: map-get($theme, 60);
  --color_brand_70: map-get($theme, 70);
  --color_brand_80: map-get($theme, 80);
  --color_brand_90: map-get($theme, 90);
  --color_brand_100: map-get($theme, 100);
  --color_success_20: map-get($theme, 21);
  --color_success_30: map-get($theme, 31);
  --color_success_50: map-get($theme, 51);
  --color_success_60: map-get($theme, 61);
  --color_success_80: map-get($theme, 81);
}

.noAuthPreview {
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.noAuthPreview .divider {
  border: none;
  border-bottom: 1px solid #d1d6db;
}
.noAuthPreview-header {
  padding: 10px 28px;
  border-bottom: 1px solid #dadee5;
  height: 69px;
  width: 100%;
  align-items: center;
  box-sizing: border-box;
}.check_password {
  padding-top: 188px;
}
@media (max-width: 767px) {
  .check_password {
    justify-content: center;
    padding-top: 0;
    height: 100%;
  }
}