@charset "UTF-8";

/* CSS Header */
header {
  background-color:var(--3rd-color);
  position: relative;
}

@media screen and (min-width: 992px) {
  header {
    padding-top: 2rem;
  }
}

header .greeting {
  padding: 2rem 0 1.5rem 0;
  background-image:url("../img/main_aist2.svg");
  background-position:right bottom;
  background-size:auto 80%;
  background-repeat:no-repeat;
  border-bottom:0.1rem solid #EFEFEF;
}

@media (max-width: 765px) {
  .navbar {padding: 0 10px;}
  header .greeting {background-size:50% auto;}
  .heading-sm.fw-semibold {padding: 15px 10px 0 10px; }
  .heading-sm.fw-semibold span {  display:block;}
}

header .logo-greeting {
  display: flex;
  height: 100%;
  position: relative;
  z-index: 2;
}

header .logo-greeting img {width:10rem;}

header .logo-greeting .greeting-vector {
  position: absolute;
  right: 0;
}

.greeting .overview {
  margin-top: 1.125rem;
}

.greeting .overview .overview-card {
  margin-top: 1.125rem;
}

.overview-card .text-number {
  margin-right:0.2rem;
  color: #333;
  font-feature-settings: "clig" off, "liga" off;
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
  letter-spacing: -0.15rem;
}

.overview-card .text-category {
  color: #333;
  font-feature-settings: "clig" off, "liga" off;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.overview-card .text-status {
  margin-top: 0.2rem;
  color: var(--gray-typography-300);
  font-feature-settings: "clig" off, "liga" off;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

.greeting .overview .text-title {
  color: var(--white-color);
  font-feature-settings: "clig" off, "liga" off;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.greeting .content {
  color: #333;
  font-feature-settings: "clig" off, "liga" off;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  margin-top: 0.4375rem;
}
.greeting .content span {
  display:inline-block;
  font-weight:600;
}

.greeting .welcome-back {
  color: #333;
  font-feature-settings: "clig" off, "liga" off;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

.greeting .welcome-back .welcome-name {
  color:var(--1st-color);
  font-feature-settings: "clig" off, "liga" off;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

/* Card css */

.total-sell-card {
  padding: 1.5rem;
  margin-top: 2rem;
}

.top-region-card,
.latest-view-card {
  padding: 1.5rem;
}

.total-sell-card .form-select-custom {
  color: var(--blue-darknut-500);
  font-feature-settings: "clig" off, "liga" off;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%;
  padding: 0.5rem 2.75rem 0.5rem 1.25rem;
  width: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--blue-darknut-500);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.14446 5.54352C2.36011 5.29192 2.73889 5.26279 2.99048 5.47844L8.2 9.94374L13.4095 5.47844C13.6611 5.26279 14.0399 5.29193 14.2555 5.54352C14.4712 5.79512 14.4421 6.17389 14.1905 6.38955L8.59047 11.1895C8.36578 11.3821 8.03422 11.3821 7.80952 11.1895L2.20954 6.38955C1.95794 6.17389 1.9288 5.79511 2.14446 5.54352Z' fill='%23017EF3'/%3E%3C/svg%3E") !important;
}

.card-title {
  color: var(--gray-typography-800);
  font-feature-settings: "clig" off, "liga" off;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 155%;
}

.card-sub-title {
  color: var(--gray-typography-300);
  font-feature-settings: "clig" off, "liga" off;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

/* Footer css */

footer {
  margin-top: 1.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--gray-typography-50);
  background: var(--gray-25);
}

footer .text-copy-right {
  color: var(--light-text-secondary, rgba(58, 53, 65, 0.6));
  font-feature-settings: "clig" off, "liga" off;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.15px;
}

footer a {
  color: var(--gray-typography-800);
  font-feature-settings: "clig" off, "liga" off;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.15px;
  margin: 0rem 0.5rem;
}

/* Navbar css */

@keyframes changeArrowDownColor {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    content: url("../img/icon/arrow-down-active.svg");
  }
}

@keyframes changeArrowRightColor {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    content: url("../img/icon/arrow-right-active.svg");
  }
}

/* 
 * Override Navbar styling
 */

.navbar {
  position: static;
  background-color: #FFF;
  border-top: 1px solid var(--1st-color);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding: 0 2rem;
  height: 4.24rem;
}

.navbar-light {
  position: static;
  background-color: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}
.navbar-dark {
  --bs-navbar-hover-color: var(--1st-color);
}

.navbar-brand
               {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 155%; /* 27.9px */
  padding: 0;
  color:#333 !important;
}

.navbar-brand img {max-height:1.6rem;}





.navbar-collapse {
  justify-content: center;
}

.navbar-collapse .mega-dropdown {
  position: static;
}

.navbar-nav {
  gap: 1.5rem;
}

.navbar-collapse .nav-link,
.navbar-collapse .dropdown-item,
.navbar-collapse .item-heading span {
  font-size: 0.875rem;
  line-height: 2rem;
  font-style: normal;
  font-weight: 400;
}

.navbar-collapse .nav-link {
  --bs-navbar-nav-link-padding-x: 0.25rem;
  --bs-navbar-nav-link-padding-y: 1.5rem;
  position: relative;
  font-weight: 500;
  padding-top: var(--bs-navbar-nav-link-padding-y);
  padding-bottom: var(--bs-navbar-nav-link-padding-y);
  color:#666;
  transition: all 0.25s ease;
}
.navbar-collapse .nav-link:hover {color:#000;}

.navbar-collapse .item-heading span {
  font-weight: 500;
  border-bottom: 1px solid;
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--gray-typography-400);
}

.navbar-collapse .item-heading.no-border span {
  border: none;
  padding: 0.25rem;
}

.navbar-collapse .nav-link::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  height: 1px;
  z-index: 0;
  background-color: var(--blue-darknut-500);
  transition: all 0.15s ease-out;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--blue-darknut-500);
}

.navbar-nav .nav-link.active::before,
.navbar-nav .nav-link.show::before {
  visibility: visible;
  opacity: 1;
}

.dropdown-toggle::after {
  content: "";
  border: none;
  --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.14446 5.54157C2.36011 5.28997 2.73889 5.26084 2.99048 5.47649L8.2 9.94179L13.4095 5.47649C13.6611 5.26084 14.0399 5.28997 14.2555 5.54157C14.4712 5.79316 14.4421 6.17194 14.1905 6.38759L8.59047 11.1876C8.36578 11.3802 8.03422 11.3802 7.80952 11.1876L2.20954 6.38759C1.95794 6.17194 1.9288 5.79316 2.14446 5.54157Z" fill="%23758195"/></svg>');
  display: inline-block;
  width: 1rem;
  height: 1rem;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  vertical-align: middle;
  transform: translateY(-1px);
}

.dropdown-mega-menu {
  top: 4.25rem !important;
  width: 100%;
  bottom: 0;
  background-color: var(--gray-typography-800);
  background-clip: initial;
  border-radius: 0;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.dropdown-mega-menu .container {
  display: flex;
  justify-content: space-between;
}

.dropdown-mega-menu .dropdown-menu {
  position: relative !important;
  top: inherit;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: none;
  gap: 0.75rem;
  color: white;
}

.dropdown-mega-menu .dropdown-menu:hover > .item-heading span {
  color: white;
}

.dropdown-mega-menu .dropdown-item {
  width: auto;
  display: inline-block;
  color: var(--gray-typography-200) !important;
  padding: 0.25rem;
  transition: all 0.25s ease;
}

.dropdown-mega-menu .dropdown-item:hover {
  background-color: transparent;
  color: white !important;
}

.dropdown-mega-menu .dropdown-item {
  color: white;
}

.user-panel {
  background-color: transparent;
}

.user-panel .icon-search-alt {
  font-size: 1.375rem;
  color: var(--gray-typography-300);
}

.noti {
  position: relative;
}

.noti.has-noti::after {
  content: "";
  position: absolute;
  top: 0.75rem !important;
  right: 0.625rem !important;
  width: 0.75rem !important;
  height: 0.75rem !important;
  border: 1px solid var(--white-color) !important;
  background-color: var(--danger-500) !important;
  border-radius: 100% !important;
  display: block !important;
}

.user-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-dropdown::after {
  content: url(../img/icon/arrow-down.svg);
  transform: translateY(1px);
}

.navbar .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}



/*
 * Vertical-Navbar styling
 */
body {background-image:linear-gradient(to right, #FFF 181px, rgba(0,0,0,0.2) 181px, #FFF 182px);}
main {margin-left:182px;background-color:#FFF;}
header {margin-left:182px;}
.authentication-form.error-page main {margin-left:0; height: 100vh !important;}
.authentication-form.error-page header {margin-left:0;}
.authentication-form.login-page main {margin-left:0; height: 100vh !important;}
.authentication-form.login-page header {margin-left:0;}

.v-navbar ul,
.v-navbar li {padding:0;margin:0;list-style:none;}
.v-navbar a {text-decoration:none;color:#666;font-size:12px;}

.v-navbar {position:absolute;left:0;top:0;margin:0;padding:0;width:180px;height:100%;z-index:1000;
  background-color:#FFF;transition: all linear 500ms;}

.v-navbar li a {display:block;padding:10px 0px 10px 50px;font-weight:600;}
.v-navbar .container {margin:0;padding:0;}
.v-navbar .logo li {display:flex;position:relative;padding:18px 10px;}
.v-navbar .logo li a {display:block;margin-left:10px;padding:0;height:32px;font-size:24px;font-weight:800;color:#222;line-height:32px;}
.v-navbar ul {border-bottom:1px solid rgba(0,0,0,0.05);}

.my-info-set {display:flex;position:absolute;top:10px;right:10px;z-index:900;}
.my-info-set button.btn {padding:0 4px;}
.my-info-set .lang {margin:-10px 8px 0 0;font-size:12px;}
.my-info-set .lang .flag {display:inline-block;margin:-3px 4px 0 0;width:18px;height:18px;vertical-align:middle;border-radius:10rem;
  background-position:center center;background-repeat:no-repeat;background-size:80% 80%;}
.lang .flag.english {background-image:url('../img/icon/english.png');}
.lang .flag.korea {background-image:url('../img/icon/korea.png');}
.lang .flag.japan {background-image:url('../img/icon/japan.png');}
.lang .flag.vietnam {background-image:url('../img/icon/vietnam.png');}
.lang .flag.china {background-image:url('../img/icon/china.png');}
.dropdown-menu a {padding:10px;width:auto;border-bottom:1px dashed #EFEFEF;}




.v-navbar .menu-icon {display:block;width:32px;height:32px;
  background-image: url('../img/icon/menu.png');
  background-position: center center;background-repeat:no-repeat;background-size:50% 50%;}
.v-navbar .close-icon {display:none;position:absolute;top:5px;right:10px;width:32px;height:32px;
  background-image: url('../img/icon/close.png');
  background-position: center center;background-repeat:no-repeat;background-size:50% 50%;}

.v-navbar .container > ul > li {background-position: 19px 11px;background-repeat:no-repeat;background-size:16px 16px;}
.v-navbar .container > ul > li.member {background-image: url('../img/icon/member.png');}
.v-navbar .container > ul > li.teacher {background-image: url('../img/icon/teacher.png');}
.v-navbar .container > ul > li.school {background-image: url('../img/icon/school.png');}
.v-navbar .container > ul > li.textbook {background-image: url('../img/icon/textbook.png');}
.v-navbar .container > ul > li.lesson {background-image: url('../img/icon/lesson.png');}
.v-navbar .container > ul > li.goods {background-image: url('../img/icon/goods.png');}
.v-navbar .container > ul > li.subscription {background-image: url('../img/icon/subscription.png');}
.v-navbar .container > ul > li.agency {background-image: url('../img/icon/agency.png');}
.v-navbar .container > ul > li.coupon {background-image: url('../img/icon/coupon.png');}
.v-navbar .container > ul > li.survey {background-image: url('../img/icon/survey.png');}
.v-navbar .container > ul > li.mail {background-image: url('../img/icon/mail.png');}
.v-navbar .container > ul > li.system {background-image: url('../img/icon/system.png');}

.v-navbar .container > ul > li > ul.d2menu  {display:none;}
.v-navbar .container > ul > li > ul.d2menu.on  {display:block;}
.v-navbar ul.d2menu > li > a {padding: 5px 0px 5px 50px;font-size:11px;font-weight:400;color:#999;}
.v-navbar ul.d2menu > li:last-child {padding-bottom:10px;}
.menu-toggle {
  position:absolute;top:6px;left:22px;
  display:none;width:48px;height:48px;
  background-image: url('../img/icon/menu.png');
  background-position: center center;background-repeat:no-repeat;background-size:50% 50%;z-index:10000;
}

@media screen and (max-width: 1280px) {
  body {background-image:none;}
  main {margin-left:0;}
  header {margin-left:0;}
  .v-navbar {left:-180px;}
  .menu-toggle {display:block;}
  .v-navbar.open {left:0px;border-right:1px solid #DDD;}
  .v-navbar .close-icon {display:block;}
  .breadcrumb {
    margin-top:40px;
  }
}

@media screen and (max-width: 992px) {

  .greeting .welcome-back {
    margin-top:40px;
  }
}












/* Modal CSS */
.modal {
  --bs-modal-width: 600px;
  --bs-modal-padding: 1.5rem;
}

/* Table css */
.table-outer {
  border: 1px solid var(--gray-100);
  border-radius: 0.5rem;
  overflow: auto;
}

.table-sort {
  cursor: pointer;
}

.table-sort i.sort-alt {
  vertical-align: text-bottom;
}

.table-outer .table {
  margin: 0;
  white-space: nowrap;
}

.table-navigation {
  position: sticky;
  padding: 0.875rem 1.5rem;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  left: 0;
}

.table-navigation .btn-ghost-secondary {
  --bs-btn-border-radius: 0.5rem;
  --bs-button-padding-x: 0;
  --bs-button-padding-y: 0;
  --bs-btn-hover-bg: var(--gray-50);
  --bs-btn-active-bg: var(--gray-50);
  --bs-btn-hover-border-color: var(--gray-100);
  --bs-btn-active-border-color: var(--gray-100);
  --bs-btn-color: var(--gray-typography-500);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.26875rem */
}

.table-navigation .page {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--gray-typography-500, #445164);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-width: 0.125rem;
}

.table-navigation .active > .page,
.table-navigation .page:hover {
  --bs-btn-bg: var(--gray-50);
  --bs-btn-color: var(--gray-typography-500, #445164);
  --bs-btn-border-color: var(--gray-100);
}

.view-all-content {
  white-space: nowrap;
}

.view-all-btn {
  padding: 0.5rem 1.25rem !important;
}

.view-all-btn:hover {
  border-color: var(--primary);
}

.table-custom td,
.table-custom th {
  border: none;
  border-bottom: 1px solid var(--gray-100);
}

.badge-success i.up-arrow-alt {
  width: 0.75rem;
  height: 0.75rem;
}

.search-box-icon {
  position: relative;
}

.search-box-icon .form-control {
  --bs-border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  padding-left: 2.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 145%;
}

.search-box-icon i.icon-search-alt {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-55%);
  left: 1.25rem;
}

.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-ms-input-placeholder,
.form-control::placeholder {
  font-size: 0.875rem;
  color: var(--gray-typography-400);
  font-weight: 400;
  line-height: 145%;
}

.form-control,
.form-select {
  --bs-border-radius: 0.5rem;
  --bs-border-color: var(--gray-200);
  --bs-body-color: var(--gray-typography-400);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border: 1px solid var(--danger-500, #dd3409);
  box-shadow: 0px 0px 2px 2px #f1ae9d;
}

.invalid-feedback,
.valid-feedback {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 20.3px */
  margin-top: 0.5rem;
  color: var(--gray-typography-400, #697483);
}

.invalid-feedback::before,
.valid-feedback::before {
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  transform: translateY(-1px);
  margin-right: 4px;
  color: initial;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.invalid-feedback::before {
  content: "\e968";
  color: var(--warning-500);
}
.valid-feedback::before {
  content: "\e967";
  color: var(--success-500);
}

.form-control[type="file"] {
  padding: 0.375rem 0.75rem;
}

.form-control-sm[type="file"] {
  padding: 0.25rem 0.5rem;
}

.form-control-lg[type="file"] {
  padding: 0.5rem 1rem;
}

.form-label {
  color: var(--gray-typography-600);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%;
}

.form-check .form-label {
  padding-left: 0 !important;
}

.form-control.form-control-underlined {
  border: none;
  border-bottom: 1px solid;
  border-color: var(--global-input-border-color);
  border-radius: 0;
  padding: 0.5rem 0 !important;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.form-control.form-control-underlined:focus {
  border-color: var(--global-primary) !important;
}
.form-control::file-selector-button {
  background-color: var(--global-input-group-addon-bg) !important;
}
.form-control:disabled::file-selector-button {
  background-color: var(--global-input-disabled-group-addon-bg) !important;
  color: var(--global-input-disabled-group-addon-color);
}

.form-floating > label {
  color: var(--gray-typography-400, #697483);
  font-feature-settings: "clig" off, "liga" off;
  /* Text sm (14_145)/Regular */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 1.26875rem */
}
.form-floating .form-control {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.form-floating .form-control-underlined + label {
  padding: 0;
}

.form-floating {
  position: relative;
  padding-left: 1px;
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
  height: calc(2.875rem + 2px);
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem 1rem;
  overflow: hidden;
  text-align: start;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid transparent;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: opacity 0.1s ease-in-out,
    -webkit-transform 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
  -o-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out,
    -webkit-transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}

.form-floating .form-control:focus + label,
.form-floating .form-control:not(:placeholder-shown) + label,
.form-floating .form-select:focus + label,
.form-floating .form-select:not(:placeholder-shown) + label {
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext {
  padding: 1rem 1rem;
}
.form-floating > .form-control::-webkit-input-placeholder,
.form-floating > .form-control-plaintext::-webkit-input-placeholder {
  color: transparent;
}
.form-floating > .form-control::-moz-placeholder,
.form-floating > .form-control-plaintext::-moz-placeholder {
  color: transparent;
}
.form-floating > .form-control:-ms-input-placeholder,
.form-floating > .form-control-plaintext:-ms-input-placeholder {
  color: transparent;
}
.form-floating > .form-control::-ms-input-placeholder,
.form-floating > .form-control-plaintext::-ms-input-placeholder {
  color: transparent;
}
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder-shown),
.form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
  padding-top: 22.5px;
  padding-bottom: 9.5px;
}
.form-floating > .form-control:not(:-ms-input-placeholder),
.form-floating > .form-control-plaintext:not(:-ms-input-placeholder) {
  padding-top: 22.5px;
  padding-bottom: 9.5px;
}
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 22.5px;
  padding-bottom: 9.5px;
}
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 22.5px;
  padding-bottom: 9.5px;
}
.form-floating > .form-select {
  padding-top: 22.5px;
  padding-bottom: 9.5px;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.4rem) translateX(0.15rem);
}
.form-floating > .form-control:not(:-ms-input-placeholder) ~ label {
  opacity: 0.65;
  -ms-transform: scale(0.85) translateY(-0.4rem) translateX(0.15rem);
  transform: scale(0.85) translateY(-0.4rem) translateX(0.15rem);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  -webkit-transform: scale(0.85) translateY(-0.4rem) translateX(0.15rem);
  -ms-transform: scale(0.85) translateY(-0.4rem) translateX(0.15rem);
  transform: scale(0.85) translateY(-0.4rem) translateX(0.1rem);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  -webkit-transform: scale(0.85) translateY(-0.4rem) translateX(0.15rem);
  transform: scale(0.85) translateY(-0.4rem) translateX(0.15rem);
}
.form-floating > .form-control-plaintext ~ label {
  border-width: 1px 0;
}

.form-floating.has-icon > label,
.form-floating.center-label > label {
  color: var(--gray-typography-400, #697483);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 1.26875rem */
  text-transform: capitalize;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.form-floating.has-icon .form-control:focus ~ label,
.form-floating.has-icon .form-control:not(:placeholder-shown) ~ label {
  transform: scale(0.85) translateY(-0.4rem) translateX(0.5rem);
}

.form-floating.center-label .form-control:focus ~ label,
.form-floating.center-label .form-control:not(:placeholder-shown) ~ label {
  transform: scale(0.85) translateY(-0.4rem) translateX(0.2rem);
}

.form-floating.has-icon .form-control:focus ~ label::after,
.form-floating.has-icon .form-control:not(:placeholder-shown) ~ label::after {
  inset: 1rem;
  background-color: transparent;
}

.form-floating.has-icon > .form-control,
.form-floating.has-icon > label {
  padding-left: 2.5rem;
}

.form-floating.has-icon .form-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  font-size: 1.25rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: var(--gray-800);
}

.input-group-text {
  background-color: var(--gray-100);
  color: var(--gray-typography-800);
}

.form-icon-container {
  position: relative;
}

.form-icon-container:has(.form-icon) .form-icon-input,
.form-icon-container:has(.form-icon) .form-icon-label {
  padding-left: 2.5rem;
}

.form-icon-container:has(.form-icon-right) .form-icon-input,
.form-icon-container:has(.form-icon-right) .form-icon-label {
  padding-right: 2.5rem;
}

.form-icon-container:has(.form-icon-right) .form-control:valid,
.form-icon-container:has(.form-icon-right) .form-control:invalid {
  background-image: none;
}

.form-icon-container .form-icon {
  position: absolute;
  top: 0.85rem;
  left: 1rem;
  color: var(--gray-typography-400);
}

.form-icon-container .form-icon-right {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--gray-typography-400);
}

code {
  font-size: inherit;
}

pre {
  padding: 0.75rem 3.125rem;
  margin: 0;
  display: flex;
  max-width: 100%;
  height: auto;
  overflow: auto;
}

pre,
code {
  white-space: pre-wrap;
}

pre code {
  text-align: left;
  white-space-collapse: collapse;
}

/* Sign In Css */

.divider {
  background: var(--gray-100);
}

.divider-content-center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: var(--white-color);
  font-size: 0.75rem;
  color: var(--gray-typography-800);
  white-space: nowrap;
}

.authentication-form {
  position: relative;
}

.authentication-form header {
  padding: 1.375rem;
  background: var(--2nd-color);
  min-height: 3.5rem;
}

.authentication-form header .logo-text {
  color: var(--blue-darknut-500);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 155%;
}
.authentication-form header .logo-text img {max-height:1.6rem;}
.authentication-form header .text-sm {margin-top:0.4rem;line-height:1.2rem;color: var(--gray-typography-100);}
.authentication-form header .text-sm a {color: var(--white-color);}

.authentication-form main {
  height: calc(100vh - 4.5rem);
}


.authentication-form .authentication-card {
  width: 100%;
  margin: 0 auto;
}

.authentication-form .authentication-card .btn-base {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.authentication-form .authentication-card .btn {
  --bs-btn-padding-y: 0.75rem;
}

/* Modal Css */

.modal-confirm .modal-header {
  border-bottom: none;
  padding: 1.5rem 1.5rem 0;
  flex-direction: column;
  justify-content: center;
  align-items: baseline;
  gap: 1rem;
}

.modal-confirm .modal-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-confirm .modal-icon img {
  width: 1.6rem;
  height: 1.6rem;
  filter: brightness(0) saturate(100%) invert(100%) sepia(91%) saturate(38%) hue-rotate(254deg) brightness(110%) contrast(110%);
}

.modal-confirm .modal-body {
  padding: 0.75rem 1.5rem 1.5rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 115%; /* 16.1px */
}

.modal-confirm .modal-footer {
  padding: 0 1.5rem 1.5rem;
  border-top: none;
  gap: 1rem;
}

.modal-confirm .modal-footer button {
  margin: 0;
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}

.modal-confirm .modal-title {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 135%; /* 32.4px */
}

.modal-confirm .btn-close {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
}

@media screen and (min-width: 576px) {
  .authentication-form .authentication-card {
    width: 28.125rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (max-width: 992px) {
  .navbar-nav {
    gap: 0;
  }

  .navbar-collapse .nav-link {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0;
  }

  .navbar-nav .dropdown-menu {
    border: none;
    padding: 1rem 0;
    background-color: rgba(0, 0, 0, 0.25);
  }

  .navbar-nav .dropdown-menu .dropdown-menu {
    padding: 0.625rem;
  }

  .dropdown-mega-menu .container {
    flex-direction: column;
    gap: 1rem;
  }

  .navbar-collapse .dropdown-item {
    color: var(--gray-typography-400);
  }
}

.table-navigation.has-view-all {
  gap: 2.125rem;
}

/* Breadcrumb */
.breadcrumb {
  --bs-breadcrumb-font-size: 0.875rem;
  --bs-breadcrumb-line-height: 145%;
  --bs-breadcrumb-font-weight: 500;
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.15715 1.60834C4.34585 1.4466 4.62993 1.46846 4.79167 1.65715L8.39167 5.85714C8.53611 6.02566 8.53611 6.27433 8.39167 6.44285L4.79167 10.6428C4.62993 10.8315 4.34585 10.8534 4.15715 10.6917C3.96846 10.5299 3.9466 10.2458 4.10834 10.0571L7.45732 6.15L4.10834 2.24286C3.9466 2.05417 3.96846 1.77008 4.15715 1.60834Z' fill='currentColor'/%3E%3C/svg%3E");
  --bs-breadcrumb-divider-color: var(--gray-800);

  line-height: var(--bs-breadcrumb-line-height);
  font-weight: var(--bs-breadcrumb-font-weight);
}
.breadcrumb a {
  color: var(--gray-typography-400);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb-item + .breadcrumb-item::before {
  --svg: var(--bs-breadcrumb-divider);
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  vertical-align: middle;
  float: none;
  transform: translateY(-1px);
  padding: 0;
  margin-right: var(--bs-breadcrumb-item-padding-x);
}
.breadcrumb a:hover {
  text-decoration: underline;
  color: var(--blue-darknut-500);
  font-weight: 600;
}
.breadcrumb-item.active {
  color: var(--gray-typography-800);
  font-weight: 600;
}
.page-main-title {
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 2.275rem */
  margin-bottom: 1rem;
  color: var(--gray-typography-800, #1b2533);
}

.table-navigation.has-view-all > .btn {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.26875rem */
}

.table-navigation.has-view-all > .btn i {
  display: none;
}

@media screen and (max-width: 992px) {
  .table-navigation.has-view-all {
    gap: 1rem;
  }
  .table-navigation.has-view-all > .nav {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .table-navigation > .nav {
    display: none;
  }

  .table-navigation.has-view-all > .btn {
    position: relative;
    height: 40px;
  }

  .table-navigation.has-view-all > .btn i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-indent: 0;
    margin: 0 !important;
    display: block;
  }

  .table-navigation.has-view-all > .btn {
    text-indent: -99999px;
    gap: 0;
    width: auto;
  }
}

@media screen and (max-width: 576px) {
  .table-navigation.has-view-all {
    flex: 1;
    width: 100%;
    margin: 0;
    padding-left: 0;
  }

  .table-navigation.has-view-all > .btn {
    flex: 1;
  }
}

/* Lock Screen css*/

/*-----------------------------------------------
|   Scrollbar style for windows
-----------------------------------------------*/
.scrollbar,
.scrollbar-overlay {
  overflow: auto;
}

.scrollbar::-webkit-scrollbar,
.scrollbar-overlay::-webkit-scrollbar {
  visibility: hidden;
  -webkit-appearance: none;
  width: 0.375rem;
  height: 0.375rem;
  background-color: transparent;
}

.scrollbar::-webkit-scrollbar-thumb,
.scrollbar-overlay::-webkit-scrollbar-thumb {
  visibility: hidden;
  border-radius: 0.1875rem;
  background-color: var(--scrollbar-bg);
}

.scrollbar:hover::-webkit-scrollbar,
.scrollbar:hover::-webkit-scrollbar-thumb,
.scrollbar:focus::-webkit-scrollbar,
.scrollbar:focus::-webkit-scrollbar-thumb,
.scrollbar-overlay:hover::-webkit-scrollbar,
.scrollbar-overlay:hover::-webkit-scrollbar-thumb,
.scrollbar-overlay:focus::-webkit-scrollbar,
.scrollbar-overlay:focus::-webkit-scrollbar-thumb {
  visibility: visible;
}

/*-----------------------------------------------
|   Simplebar
-----------------------------------------------*/
.simplebar-track.simplebar-vertical {
  width: 0.625rem;
}

.simplebar-scrollbar::before {
  background: var(--scrollbar-bg);
}
.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}

.simplebar-content-wrapper::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Nav vertical */

.nav-vertical .nav-link:visited,
.nav-vertical .nav-link:active,
.nav-vertical .nav-link:focus,
.nav-vertical .nav-link:hover {
  background-color: #e3e6ed;
}

.nav-vertical .nav-link {
  padding: 0.5rem;
  border-radius: 0.375rem;
  color: var(--gray-typography-800);
}

.nav-vertical .nav-link.active {
  background-color: var(--blue-darknut-25);
  color: var(--blue-darknut-500);
}

/* CSS Form custom */

input[type="date"]::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.3335 9.33268C11.7017 9.33268 12.0002 9.03421 12.0002 8.66602C12.0002 8.29783 11.7017 7.99935 11.3335 7.99935C10.9653 7.99935 10.6668 8.29783 10.6668 8.66602C10.6668 9.03421 10.9653 9.33268 11.3335 9.33268Z' fill='%23758195'/%3E%3Cpath d='M11.3335 11.9993C11.7017 11.9993 12.0002 11.7009 12.0002 11.3327C12.0002 10.9645 11.7017 10.666 11.3335 10.666C10.9653 10.666 10.6668 10.9645 10.6668 11.3327C10.6668 11.7009 10.9653 11.9993 11.3335 11.9993Z' fill='%23758195'/%3E%3Cpath d='M8.66683 8.66602C8.66683 9.03421 8.36835 9.33268 8.00016 9.33268C7.63197 9.33268 7.3335 9.03421 7.3335 8.66602C7.3335 8.29783 7.63197 7.99935 8.00016 7.99935C8.36835 7.99935 8.66683 8.29783 8.66683 8.66602Z' fill='%23758195'/%3E%3Cpath d='M8.66683 11.3327C8.66683 11.7009 8.36835 11.9993 8.00016 11.9993C7.63197 11.9993 7.3335 11.7009 7.3335 11.3327C7.3335 10.9645 7.63197 10.666 8.00016 10.666C8.36835 10.666 8.66683 10.9645 8.66683 11.3327Z' fill='%23758195'/%3E%3Cpath d='M4.66683 9.33268C5.03502 9.33268 5.3335 9.03421 5.3335 8.66602C5.3335 8.29783 5.03502 7.99935 4.66683 7.99935C4.29864 7.99935 4.00016 8.29783 4.00016 8.66602C4.00016 9.03421 4.29864 9.33268 4.66683 9.33268Z' fill='%23758195'/%3E%3Cpath d='M4.66683 11.9993C5.03502 11.9993 5.3335 11.7009 5.3335 11.3327C5.3335 10.9645 5.03502 10.666 4.66683 10.666C4.29864 10.666 4.00016 10.9645 4.00016 11.3327C4.00016 11.7009 4.29864 11.9993 4.66683 11.9993Z' fill='%23758195'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.66683 1.16602C4.94297 1.16602 5.16683 1.38987 5.16683 1.66602V2.1745C5.60816 2.16601 6.09438 2.16601 6.62914 2.16602H9.37111C9.90587 2.16601 10.3922 2.16601 10.8335 2.1745V1.66602C10.8335 1.38987 11.0574 1.16602 11.3335 1.16602C11.6096 1.16602 11.8335 1.38987 11.8335 1.66602V2.21741C12.0068 2.23062 12.1709 2.24723 12.3262 2.26811C13.1078 2.37319 13.7404 2.5946 14.2393 3.09351C14.7382 3.59242 14.9597 4.22505 15.0647 5.00667C15.1668 5.76614 15.1668 6.73655 15.1668 7.96171V9.37029C15.1668 10.5954 15.1668 11.5659 15.0647 12.3254C14.9597 13.107 14.7382 13.7396 14.2393 14.2385C13.7404 14.7374 13.1078 14.9588 12.3262 15.0639C11.5667 15.166 10.5963 15.166 9.37114 15.166H6.62922C5.40406 15.166 4.43362 15.166 3.67415 15.0639C2.89253 14.9588 2.2599 14.7374 1.76099 14.2385C1.26208 13.7396 1.04067 13.107 0.935586 12.3254C0.833478 11.5659 0.833486 10.5955 0.833496 9.37029V7.96174C0.833486 6.73656 0.833478 5.76614 0.935586 5.00667C1.04067 4.22505 1.26208 3.59242 1.76099 3.09351C2.2599 2.5946 2.89253 2.37319 3.67415 2.26811C3.82943 2.24723 3.99353 2.23062 4.16683 2.21741V1.66602C4.16683 1.38987 4.39069 1.16602 4.66683 1.16602ZM3.8074 3.25919C3.13667 3.34937 2.75024 3.51848 2.4681 3.80062C2.18596 4.08276 2.01685 4.46919 1.92667 5.13991C1.9114 5.25351 1.89863 5.37309 1.88795 5.49935H14.1124C14.1017 5.37309 14.0889 5.25351 14.0737 5.13991C13.9835 4.46919 13.8144 4.08276 13.5322 3.80062C13.2501 3.51848 12.8637 3.34936 12.1929 3.25919C11.5078 3.16708 10.6047 3.16602 9.3335 3.16602H6.66683C5.39562 3.16602 4.49251 3.16708 3.8074 3.25919ZM1.8335 7.99935C1.8335 7.43001 1.83371 6.9345 1.84222 6.49935H14.1581C14.1666 6.9345 14.1668 7.43001 14.1668 7.99935V9.33268C14.1668 10.6039 14.1658 11.507 14.0737 12.1921C13.9835 12.8628 13.8144 13.2493 13.5322 13.5314C13.2501 13.8136 12.8637 13.9827 12.1929 14.0728C11.5078 14.165 10.6047 14.166 9.3335 14.166H6.66683C5.39562 14.166 4.4925 14.165 3.8074 14.0728C3.13667 13.9827 2.75024 13.8136 2.4681 13.5314C2.18596 13.2493 2.01685 12.8628 1.92667 12.1921C1.83456 11.507 1.8335 10.6039 1.8335 9.33268V7.99935Z' fill='%23758195'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.14446 5.54303C2.36011 5.29144 2.73889 5.2623 2.99048 5.47795L8.2 9.94325L13.4095 5.47795C13.6611 5.2623 14.0399 5.29144 14.2555 5.54303C14.4712 5.79463 14.4421 6.17341 14.1905 6.38906L8.59047 11.189C8.36578 11.3816 8.03422 11.3816 7.80952 11.189L2.20954 6.38906C1.95794 6.17341 1.9288 5.79463 2.14446 5.54303Z' fill='%23758195'/%3E%3C/svg%3E") !important;
}

button[aria-expanded="true"] .icon-chevron-down-alt::before {
  content: "\e941";
}

/* -------------------------------------------------------------------------- */
/*                                   Choices                                  */
/* -------------------------------------------------------------------------- */

.choices .choices__inner {
  border-radius: 0.375rem;
  line-height: 1.5rem !important;
  font-size: 1rem;
  background-color: var(--white-color) !important;
  min-height: var(--choices-inner-min-height) !important;
  background-size: 9px 12px;
  border: 1px solid #cbd0dd;
  padding: 6px 3.5rem 6px 1rem;
  -webkit-box-shadow: inset 0 1px 2px transparent;
  box-shadow: inset 0 1px 2px transparent;
}
.choices .choices__input--cloned {
  padding: 0;
  font-size: 0.8rem;
  /* color: var(--input-color); */
  background-color: var(--white-color) !important;
  vertical-align: top;
  margin-bottom: 0;
}
.choices .choices__list--dropdown {
  border: 1px solid var(--gray-200) !important;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  background-color: var(--white-color);
  z-index: 99;
}
.choices .choices__list--dropdown .choices__item--selectable {
  padding: 2px 1rem;
  padding-right: 20px;
  font-size: 1rem !important;
  background-color: var(--global-gray-200);
  color: var(--global-body-color);
}
.choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #0062ff;
  color: var(--white-color);
}
.choices .choices__list {
  margin-top: 0 !important;
}
.choices .choices__list .has-no-choices {
  background-color: var(--global-choices-item-has-no-choices-bg);
}
.choices .choices__list--multiple .choices__item {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.64rem !important;
  border: 0;
  background-color: var(--choices-item-bg) !important;
  border-radius: 4px;
  margin-bottom: 0 !important;
  color: var(--blue-darknut-700);
  font-weight: 500;
  line-height: 1;
  font-size: 0.875rem !important;
}
.choices .choices__list--single {
  padding: 0 !important;
}
.choices .choices__list--single .choices__button {
  background-color: transparent !important;
}

.choices[data-type*="select-multiple"] .choices__button,
.choices[data-type*="text"] .choices__button {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.03922 9.49232C8.95091 9.49232 8.82803 9.46928 8.71284 9.35793L5.99808 6.64317L3.28332 9.35793C3.20269 9.44624 3.08365 9.49232 2.95694 9.49232C2.86862 9.49232 2.74575 9.46928 2.63055 9.35793C2.54608 9.27345 2.5 9.15826 2.5 9.03154C2.5 8.90483 2.54608 8.79347 2.63055 8.70516L5.34531 5.9904L2.63823 3.27948C2.55376 3.19501 2.50768 3.07981 2.50768 2.9531C2.50768 2.82639 2.55376 2.71887 2.63823 2.63055C2.72271 2.54608 2.8379 2.5 2.96462 2.5C3.09133 2.5 3.20269 2.54608 3.291 2.63055L6.00576 5.34531L8.71668 2.63055C8.80115 2.54608 8.91635 2.5 9.04306 2.5C9.16978 2.5 9.28113 2.54608 9.36945 2.63055C9.45392 2.71503 9.5 2.83022 9.5 2.95694C9.5 3.08365 9.45392 3.19501 9.36945 3.28332L6.65469 5.99808L9.36945 8.71284C9.45392 8.79731 9.5 8.91251 9.5 9.03922C9.5 9.16594 9.45392 9.27729 9.36945 9.36561C9.25809 9.47696 9.13138 9.5 9.04306 9.5L9.03922 9.49232Z' fill='%230165C2'/%3E%3C/svg%3E%0A");
  background-color: transparent !important;
  padding: 0px !important;
  background-size: 0.75rem !important;
  margin: 0;
  margin-left: 0.375rem;
  border: none;
  transition: all 0.25s ease;
}

.choices[data-type*="select-one"] .choices__button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.0657 15.8199C14.9185 15.8199 14.7137 15.7815 14.5217 15.5959L9.99713 11.0713L5.47253 15.5959C5.33814 15.7431 5.13975 15.8199 4.92856 15.8199C4.78136 15.8199 4.57657 15.7815 4.38458 15.5959C4.24379 15.4551 4.16699 15.2631 4.16699 15.0519C4.16699 14.8407 4.24379 14.6551 4.38458 14.5079L8.90917 9.98335L4.39738 5.46516C4.25659 5.32436 4.17979 5.13237 4.17979 4.92118C4.17979 4.70999 4.25659 4.5308 4.39738 4.38361C4.53818 4.24281 4.73017 4.16602 4.94136 4.16602C5.15255 4.16602 5.33814 4.24281 5.48533 4.38361L10.0099 8.9082L14.5281 4.38361C14.6689 4.24281 14.8609 4.16602 15.0721 4.16602C15.2833 4.16602 15.4689 4.24281 15.6161 4.38361C15.7569 4.5244 15.8337 4.71639 15.8337 4.92758C15.8337 5.13877 15.7569 5.32436 15.6161 5.47156L11.0915 9.99615L15.6161 14.5207C15.7569 14.6615 15.8337 14.8535 15.8337 15.0647C15.8337 15.2759 15.7569 15.4615 15.6161 15.6087C15.4305 15.7943 15.2193 15.8327 15.0721 15.8327L15.0657 15.8199Z' fill='%23758195'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 35px;
}

.choices[data-type*="select-one"].is-open::after {
  margin-top: -0.3125rem;
  transform: rotate(180deg);
}

.choices[data-type*="select-one"]::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.14446 5.54352C2.36011 5.29192 2.73889 5.26279 2.99048 5.47844L8.2 9.94374L13.4095 5.47844C13.6611 5.26279 14.0399 5.29193 14.2555 5.54352C14.4712 5.79512 14.4421 6.17389 14.1905 6.38955L8.59047 11.1895C8.36578 11.3821 8.03422 11.3821 7.80952 11.1895L2.20954 6.38955C1.95794 6.17389 1.9288 5.79512 2.14446 5.54352Z' fill='%23758195'/%3E%3C/svg%3E");
  border: none;
  height: auto;
  width: auto;
  right: 0.625rem;
  top: 0.6rem;
  margin-top: 0rem;
}

.firefox .choices[data-type*="select-multiple"] .choices__button,
.firefox .choices[data-type*="text"] .choices__button {
  background-position: -2px 0px;
}

.choices[data-type*="select-one"] .choices__input {
  padding-left: 1rem;
  padding-right: 1rem;
}
.choices[data-type*="select-one"] .choices__inner {
  padding-bottom: 5px !important;
}

.is-focused .choices__inner,
.is-open .choices__inner {
  border-radius: 0.375rem !important;
  border-color: #0062ff !important;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(0, 98, 255, 0.25) !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 98, 255, 0.25) !important;
  outline: 0;
}

.choices-select-container {
  position: relative;
}
.choices-select-container .choices__inner {
  padding-left: 2.5rem;
}
.choices-select-container .choices-icon {
  position: absolute;
  left: 1rem;
}

.choices__item .choices__item--choice .has-no-results {
  background-color: red !important;
}

.was-validated .choices.valid .choices__inner {
  border-color: var(--success-500) !important;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%233DD598' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .choices[data-type="select-one"].valid .choices__inner {
  background-position: right calc(0.375em + 1.55rem) center;
}
.was-validated .choices.invalid {
  margin-bottom: 0;
}
.was-validated .choices.invalid .choices__inner {
  border-color: var(--danger-500) !important;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23E20404'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23E20404' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .choices.invalid + .invalid-feedback {
  display: block;
}
.was-validated .choices[data-type="select-one"].invalid .choices__inner {
  background-position: right calc(0.375em + 1.55rem) center;
}
.was-validated .choices[data-type*="select-one"] .choices__button {
  margin-right: 3.75rem !important;
}

/* -------------------------------------------------------------------------- */
/*                                  Dropzone                                  */
/* -------------------------------------------------------------------------- */
.dropzone {
  position: relative;
  background-color: var(--global-gray-soft);
  border: 0;
  border-radius: 0.5rem;
  min-height: auto;
}
.dropzone.dropzone-has-default .dz-message {
  border-color: transparent;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.dropzone.dropzone-has-default .dz-message:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.dropzone .dz-preview {
  min-height: auto;
  margin: 0;
}
.dropzone .dz-remove {
  position: absolute;
  right: -6px;
  top: -6px;
  color: var(--white-color);
  z-index: 1000;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
}
.dropzone .dz-remove * {
  cursor: pointer;
}

.dropzone h6[data-dz-name] {
  color: var(--gray-typography-800);
  font-size: 0.875rem;
  font-weight: 500;
}

.dropzone p[data-dz-size],
.dropzone p[data-dz-size] * {
  color: var(--gray-typography-400);
  font-size: 0.75rem;
  font-weight: 400;
}

.dropzone .dz-message {
  position: relative;
  padding: 5rem 2rem;
  margin: 0;
  border: 2px dashed var(--gray-200);
  border-radius: 0.5rem;
}
.dropzone.dropzone-single.dz-file-processing .dz-message {
  display: none;
}
.dropzone.dropzone-single.dz-file-processing.dz-file-complete .dz-message {
  display: block;
}
.dropzone.dropzone-single.dz-file-processing.dz-file-complete
  .dz-default-image {
  opacity: 0;
}
.dropzone.dropzone-single .dz-processing .dz-message-text {
  opacity: 0 !important;
}
.dropzone.dropzone-single .dz-progress {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
  -webkit-animation: none !important;
  animation: none !important;
  width: 9.375rem !important;
  height: 0.5rem !important;
  margin: 0 !important;
  -webkit-transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  top: auto !important;
  bottom: 1.5rem;
}
.dropzone.dropzone-single.dz-max-files-reached .dz-message {
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--white-color);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border-color: transparent;
}
.dropzone.dropzone-single.dz-max-files-reached .dz-remove {
  opacity: 1;
}
.dropzone.dropzone-single.dz-max-files-reached:hover .dz-message,
.dropzone.dropzone-single.dz-max-files-reached:focus .dz-message {
  opacity: 1;
}
.dropzone.dropzone-single .dz-processing .dz-progress {
  opacity: 1;
}
.dropzone.dropzone-single .dz-complete .dz-progress {
  opacity: 0;
}
.dropzone .dz-preview-single {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}
.dropzone .dz-preview-single:hover {
  z-index: auto;
}
.dropzone .dz-preview-single .dz-preview-cover {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 0 !important;
  overflow: hidden;
}
.dropzone .dz-preview-single .dz-preview-cover .dz-errormessage {
  position: absolute;
  left: 0;
  bottom: 0;
}
.dropzone .dz-preview-single .dz-preview-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0.5rem;
}
.dropzone.dropzone-multiple {
  border: none;
  background: var(--white-color);
}
.dropzone.dropzone-multiple .dz-message {
  padding: 3rem 2rem;
  border: 1px dashed var(--gray-200);
  border-radius: 0.5rem;
}
.dropzone.dropzone-multiple .btn *,
.dropzone.dropzone-multiple .google-map-control-btn .zoomIn *,
.google-map-control-btn .dropzone.dropzone-multiple .zoomIn *,
.dropzone.dropzone-multiple .google-map-control-btn .zoomOut *,
.google-map-control-btn .dropzone.dropzone-multiple .zoomOut *,
.dropzone.dropzone-multiple .tox .tox-dialog__footer .tox-button--secondary *,
.tox .tox-dialog__footer .dropzone.dropzone-multiple .tox-button--secondary *,
.dropzone.dropzone-multiple .tox .tox-button-secondary *,
.tox .dropzone.dropzone-multiple .tox-button-secondary *,
.dropzone.dropzone-multiple .tox .tox-button *,
.tox .dropzone.dropzone-multiple .tox-button *,
.dropzone.dropzone-multiple [data-list] .page *,
[data-list] .dropzone.dropzone-multiple .page *,
.dropzone.dropzone-multiple .table-list .page *,
.table-list .dropzone.dropzone-multiple .page * {
  cursor: pointer;
}
.dropzone.dropzone-multiple .media:first-child {
  margin-top: 1.5rem;
}
.dropzone.dropzone-multiple .dz-image-container {
  padding: 1rem;
}
.dropzone.dropzone-multiple .dz-image {
  height: 2rem;
  width: 2rem;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0;
}
.dropzone.dropzone-multiple .dz-progress {
  opacity: 0;
  position: relative !important;
  -webkit-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
  -webkit-animation: none !important;
  animation: none !important;
  width: 6.25rem !important;
  height: 0.5rem !important;
  margin-top: 0;
  margin-left: 1rem !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}
.dropzone.dropzone-multiple .dz-complete .dz-progress {
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
  opacity: 1;
}
.dropzone.dz-drag-hover .dz-message {
  border-color: var(--global-primary);
}
.dropzone .dz-progress {
  background: var(--global-gray-200) !important;
}
.dropzone .dz-progress .dz-upload {
  background: var(--global-primary) !important;
}

.dropzone-area {
  border: 1px dashed var(--global-gray-400);
  border-radius: 0.375rem;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
}

.dropzone-file-bg {
  background: var(--blue-darknut-50);
  padding: 1.5rem;
  border-radius: 50%;
}

/* Rating */

.star-rating {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.62796 4.50633C8.6835 2.61279 9.21127 1.66602 10.0003 1.66602C10.7894 1.66602 11.3171 2.61279 12.3727 4.50633L12.6458 4.99621C12.9457 5.5343 13.0957 5.80334 13.3295 5.98085C13.5634 6.15837 13.8546 6.22427 14.4371 6.35606L14.9674 6.47604C17.0171 6.93981 18.042 7.1717 18.2858 7.95579C18.5296 8.73989 17.831 9.55691 16.4336 11.191L16.0721 11.6137C15.675 12.078 15.4764 12.3102 15.3871 12.5974C15.2978 12.8847 15.3278 13.1944 15.3878 13.814L15.4425 14.378C15.6538 16.5582 15.7594 17.6483 15.121 18.1329C14.4827 18.6175 13.5231 18.1756 11.6039 17.292L11.1074 17.0634C10.5621 16.8123 10.2894 16.6867 10.0003 16.6867C9.71128 16.6867 9.4386 16.8123 8.89323 17.0634L8.39672 17.292C6.47755 18.1756 5.51797 18.6175 4.87962 18.1329C4.24126 17.6483 4.34689 16.5582 4.55816 14.378L4.61281 13.814C4.67285 13.1944 4.70286 12.8847 4.61354 12.5974C4.52422 12.3102 4.32568 12.078 3.92859 11.6137L3.56707 11.191C2.1697 9.55691 1.47101 8.73989 1.71484 7.95579C1.95867 7.1717 2.98354 6.93981 5.03327 6.47604L5.56356 6.35606C6.14603 6.22427 6.43727 6.15837 6.67111 5.98085C6.90495 5.80334 7.05493 5.5343 7.35488 4.99621L7.62796 4.50633Z' fill='%23EAECF0'/%3E%3C/svg%3E") !important;
}

.star-rating .star-value {
  background-image: url("../img/icon/star.svg") !important;
}

/* Form validation */

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: none;
}
.form-select.is-invalid,
.was-validated .form-select:invalid {
  border-color: var(--danger-500);
  background-image: none;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--success-500);
  background-image: none;
}
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: var(--success-500);
  box-shadow: var(--focus-success);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--danger-500);
  background-image: none;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: var(--danger-500);
  box-shadow: var(--focus-danger);
}

.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label,
.invalid-feedback {
  color: var(--danger-500);
}

.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label,
.valid-feedback {
  color: var(--success-500);
}

/*-----------------------------------------------
|   Tinymce
-----------------------------------------------*/

.tox.tox-tinymce {
  border: 1px solid var(--gray-200);
}
.tox .tox-edit-area {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}
.tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type) {
  border: none !important;
}
.tox .tox-toolbar__group:first-child {
  padding-left: 0 !important;
}
.tox .tox-editor-header {
  margin-bottom: 0.25rem;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 0.5313rem 0.8125rem !important;
}
.tox .tox-editor-header .tox-toolbar-overlord {
  background-color: transparent !important;
}
.tox .tox-editor-header .tox-toolbar-overlord .tox-toolbar__primary {
  background-color: transparent !important;
}
[dir="rtl"]
  .tox
  .tox-editor-header
  .tox-toolbar-overlord
  .tox-toolbar__primary {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.tox .tox-sidebar-wrap {
  overflow: hidden;
  border-top: 1px solid var(--gray-200);
  overflow: hidden;
}
.tox .tox-menu,
.tox .tox-dialog {
  border-radius: 0.375rem !important;
  border-color: var(--gray-200) !important;
  background-color: var(--white-color) !important;
}
.tox .tox-dialog__header,
.tox .tox-dialog__footer {
  background: var(--white-color) !important;
  padding: 0.5rem 1rem 2rem !important;
}
.tox .tox-collection__item--active,
.tox .tox-collection__item-accessory {
  background-color: var(--global-gray-200) !important;
  color: var(--global-body-color) !important;
}
.tox .tox-dialog__title {
  color: var(--global-body-color) !important;
}
.tox .tox-form__group {
  margin-bottom: 1rem !important;
}
.tox .tox-label {
  color: var(--gray-typography-700) !important;
  margin-bottom: 0.25rem !important;
}
.tox .tox-textfield {
  background-color: var(--white-color) !important;
  color: var(--global-body-color) !important;
  border-color: var(--gray-200) !important;
  padding: 0.5rem 1rem !important;
}
.tox .tox-textfield:focus {
  border-color: #0062ff !important;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(0, 98, 255, 0.25) !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 98, 255, 0.25) !important;
}
.tox .tox-listbox {
  background-color: var(--white-color) !important;
  color: var(--global-body-color) !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  border-color: var(--gray-200) !important;
}
.tox .tox-listbox.tox-listbox--select:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.tox .tox-collection--list .tox-collection__item {
  background-color: transparent !important;
  color: var(--gray-800) !important;
}
.tox .tox-collection--list .tox-collection__item--active {
  background-color: var(--gray-200) !important;
}
.tox .tox-button--naked {
  color: var(--global-body-color) !important;
}
.tox .tox-button--naked:hover:not(:disabled) {
  background-color: var(--gray-200) !important;
  border-color: var(--gray-200) !important;
}
.tox .tox-icon {
  color: var(--gray-800) !important;
}
.tox .tox-dialog {
  border-radius: 0.375rem !important;
  border-color: var(--gray-200) !important;
  background-color: var(--white-color) !important;
}
.tox .tox-dialog__header,
.tox .tox-dialog__footer {
  background-color: var(--white-color) !important;
  border-color: var(--gray-200) !important;
}
.tox .tox-toolbar__overflow {
  padding-left: 1rem !important;
  background-color: var(--gray-100) !important;
  background-image: none !important;
}

.tox .tox-tbtn {
  height: 1.5rem !important;
  width: 1.5rem !important;
}
.tox .tox-tbtn span svg {
  fill: var(--gray-800) !important;
}
.tox .tox-tbtn span svg:hover,
.tox .tox-tbtn span svg:focus {
  fill: var(--gray-800) !important;
}
.tox .tox-tbtn:hover,
.tox .tox-tbtn:focus {
  background: var(--gray-200) !important;
}

.tox .tox-tbtn--enabled {
  background: var(--global-gray-300) !important;
}
.tox .tox-tbtn--enabled span svg {
  fill: var(--gray-800) !important;
}
.tox .tox-tbtn--enabled:hover,
.tox .tox-tbtn--enabled:focus {
  background: var(--gray-200) !important;
}

.tox .tox-edit-area__iframe {
  background-color: var(--white-color) !important;
}

/* Create new form */

.create-new-form .choices__inner {
  height: 3.625rem;
  overflow: auto;
}

/* ---------------- Tab custom ---------------- */

.global-tab {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--gray-typography-400);
  gap: 0.625rem;
}
.global-tab .global-tab-item .nav-link {
  padding: 0.625rem 0.5rem;
  min-width: 7.5rem;
  text-align: center;
}
.global-tab .global-tab-item.active {
  border-radius: 0.5rem;
  color: var(--gray-typography-800);
  background: var(--blue-darknut-50);
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/*                                   Avatar                                   */
/* -------------------------------------------------------------------------- */
.avatar {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.avatar .avatar-placeholder {
  background: var(--gray-200);
}
.avatar .avatar-name {
  position: absolute;
  text-align: center;
  color: var(--blue-darknut-500);
  background-color: var(--blue-darknut-50);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  display: block;
  box-shadow: 0px 8px 32px -2px rgba(27, 37, 51, 0.06);
}
.avatar .avatar-name > span {
  position: absolute;
  top: 53%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  font-weight: 900 !important;
}
.avatar .avatar-emoji {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.avatar .avatar-emoji > span {
  -webkit-transform: translateY(2%);
  -ms-transform: translateY(2%);
  transform: translateY(2%);
  display: inline-block;
}
.avatar img {
  display: block;
}
.avatar img,
.avatar .avatar-name {
  width: 100%;
  height: 100%;
}
.avatar img {
  -o-object-fit: cover;
  object-fit: cover;
}
.avatar.avatar-bordered.avatar-s img,
.avatar.avatar-bordered.avatar-s .avatar-name {
  border: 1px solid;
}
.avatar.avatar-bordered.avatar-m img,
.avatar.avatar-bordered.avatar-m .avatar-name {
  border: 1px solid;
}
.avatar.avatar-bordered.avatar-l img,
.avatar.avatar-bordered.avatar-l .avatar-name {
  border: 2px solid var(--white-color);
}
.avatar.avatar-bordered.avatar-xl img,
.avatar.avatar-bordered.avatar-xl .avatar-name {
  border: 3px solid var(--white-color);
}
.avatar[class*="status-"]:before {
  content: "";
  position: absolute;
  border-radius: 100%;
  z-index: 1;
}
.avatar.status-online:before {
  background-color: var(--success-500);
}
.avatar.status-offline:before {
  background-color: var(--global-secondary);
}
.avatar.status-away:before {
  background-color: var(--global-warning);
}
.avatar.status-do-not-disturb:before {
  background-color: var(--danger-500);
}
.avatar .avatar-button {
  background-color: var(--global-avatar-button-bg) !important;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border: 1px solid var(--global-avatar-button-bg);
  font-size: 12px;
}
.avatar .avatar-button:hover,
.avatar .avatar-button:focus {
  background-color: var(--global-avatar-button-hover-bg) !important;
}

.avatar:hover .overlay-icon {
  opacity: 1;
}

.avatar-s {
  height: 1.5rem;
  width: 1.5rem;
}
.avatar-s .avatar-name {
  font-size: 0.7894736842rem;
  line-height: 1.2;
}
.avatar-s .avatar-emoji {
  font-size: 1.5rem;
}
.avatar-s[class*="status-"]:before {
  border: 1px solid var(--white-color);
  height: 6px;
  width: 6px;
  right: 1px;
  bottom: 1px;
}
.avatar-s .rounded-soft {
  border-radius: 0.25rem !important;
}
.avatar-s .rounded-none {
  border-radius: 0 !important;
}

.avatar-m {
  height: 2rem;
  width: 2rem;
}
.avatar-m .avatar-name {
  font-size: 1.0526315789rem;
  line-height: 1.2;
}
.avatar-m .avatar-emoji {
  font-size: 2rem;
}

.avatar-m[class*="status-"]:before {
  border: 1px solid var(--white-color);
  height: 8px;
  width: 8px;
  right: 1px;
  bottom: 1px;
}
.avatar-m .rounded-soft {
  border-radius: 0.3333333333rem !important;
}
.avatar-m .rounded-none {
  border-radius: 0 !important;
}

.avatar-l {
  height: 2.5rem;
  width: 2.5rem;
}
.avatar-l .avatar-name {
  font-size: 1.3157894737rem;
  line-height: 1.2;
}
.avatar-l .avatar-emoji {
  font-size: 2.5rem;
}
.avatar-l[class*="status-"]:before {
  border: 1px solid var(--white-color);
  height: 9px;
  width: 9px;
  right: 2px;
  bottom: 2px;
}
.avatar-l .rounded-soft {
  border-radius: 0.4166666667rem !important;
}
.avatar-l .rounded-none {
  border-radius: 0 !important;
}

.avatar-xl {
  height: 3rem;
  width: 3rem;
}
.avatar-xxl {
  width: 3.5rem;
  height: 3.5rem;
}
.avatar-xl .avatar-name {
  font-size: 1.5789473684rem;
  line-height: 1.2;
}
.avatar-xl .avatar-emoji {
  font-size: 3rem;
}
.avatar-xl[class*="status-"]:before {
  border: 2px solid var(--white-color);
  height: 12px;
  width: 12px;
  right: 1px;
  bottom: 1px;
}
.avatar-xl .rounded-soft {
  border-radius: 0.5rem !important;
}
.avatar-xl .rounded-none {
  border-radius: 0 !important;
}

.avatar-2xl {
  height: 3.5rem;
  width: 3.5rem;
}
.avatar-2xl .avatar-name {
  font-size: 1.8421052632rem;
  line-height: 1.2;
}
.avatar-2xl .avatar-emoji {
  font-size: 3.5rem;
}
.avatar-2xl[class*="status-"]:before {
  border: 2px solid var(--white-color);
  height: 16px;
  width: 16px;
  right: -3px;
  bottom: -3px;
}
.avatar-2xl .rounded-soft {
  border-radius: 0.5833333333rem !important;
}
.avatar-2xl .rounded-none {
  border-radius: 0 !important;
}

.avatar-3xl {
  height: 4.5rem;
  width: 4.5rem;
}
.avatar-3xl .avatar-name {
  font-size: 2.3684210526rem;
  line-height: 1.2;
}
.avatar-3xl .avatar-emoji {
  font-size: 4.5rem;
}
.avatar-3xl[class*="status-"]:before {
  border: 3px solid var(--white-color);
  height: 18px;
  width: 18px;
  right: 0;
  bottom: 0;
}
.avatar-3xl .rounded-soft {
  border-radius: 0.75rem !important;
}
.avatar-3xl .rounded-none {
  border-radius: 0 !important;
}

.avatar-4xl {
  height: 6rem;
  width: 6rem;
}
.avatar-4xl .avatar-name {
  font-size: 3.1578947368rem;
  line-height: 1.2;
}
.avatar-4xl .avatar-emoji {
  font-size: 6rem;
}
.avatar-4xl[class*="status-"]:before {
  border: 3px solid var(--white-color);
  height: 24px;
  width: 24px;
  right: 3px;
  bottom: 3px;
}
.avatar-4xl .rounded-soft {
  border-radius: 1rem !important;
}
.avatar-4xl .rounded-none {
  border-radius: 0 !important;
}

.avatar-5xl {
  height: 9.375rem;
  width: 9.375rem;
}
.avatar-5xl .avatar-name {
  font-size: 4.9342105263rem;
  line-height: 1.2;
}
.avatar-5xl .avatar-emoji {
  font-size: 9.375rem;
}
.avatar-5xl[class*="status-"]:before {
  border: 4px solid var(--white-color);
  height: 32px;
  width: 32px;
  right: 8px;
  bottom: 8px;
}
.avatar-5xl .rounded-soft {
  border-radius: 1.5625rem !important;
}
.avatar-5xl .rounded-none {
  border-radius: 0 !important;
}

.avatar-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.avatar-group .dropdown-toggle:not(:first-child) .avatar-s,
.avatar-group .dropdown-toggle:not(:first-child) .avatar-m,
.avatar-group .dropdown-toggle:not(:first-child) .avatar-l,
.avatar-group .dropdown-toggle:not(:first-child) .avatar-xl,
.avatar-group .dropdown-toggle:not(:first-child) .avatar-2xl {
  margin-left: -0.5rem;
}
.avatar-group .avatar-s:not(:first-child),
.avatar-group .avatar-m:not(:first-child),
.avatar-group .avatar-l:not(:first-child),
.avatar-group .avatar-xl:not(:first-child),
.avatar-group .avatar-2xl:not(:first-child) {
  margin-left: -0.5rem;
}
.avatar-group .avatar-3xl:not(:first-child) {
  margin-left: -1rem;
}
.avatar-group .avatar-4xl:not(:first-child) {
  margin-left: -1.5rem;
}
.avatar-group .avatar-5xl:not(:first-child) {
  margin-left: -2rem;
}
.avatar-group-dense .avatar-s:not(:first-child) {
  margin-left: -0.6rem;
}
.avatar-group-dense .avatar-m:not(:first-child) {
  margin-left: -0.8rem;
}
.avatar-group-dense .avatar-l:not(:first-child),
.avatar-group-dense .avatar-xl:not(:first-child),
.avatar-group-dense .avatar-2xl:not(:first-child) {
  margin-left: -1rem;
}
.avatar-group-dense .avatar-3xl:not(:first-child) {
  margin-left: -1.5rem;
}
.avatar-group-dense .avatar-4xl:not(:first-child) {
  margin-left: -2.2rem;
}
.avatar-group-dense .avatar-5xl:not(:first-child) {
  margin-left: -3.6rem;
}

.avatar-dropdown-menu .nav .nav-link:hover {
  background: var(--gray-100);
}

/*-----------------------------------------------
|   Dropdown
-----------------------------------------------*/
.dropdown-menu {
  font-size: 0.8rem;
}

.dropdown-caret-none:after,
.dropdown-caret-none:before {
  display: none !important;
}

.dropdown-md {
  min-width: 16.625rem;
}

.btn-dropdown-action {
  background: none;
  outline: none;
  border: none;
}

.btn-dropdown-action ~ .dropdown-menu .dropdown-item {
  font-size: 0.875rem;
  color: var(--gray-typography-700);
  padding: 0.625rem 1rem;
}

/* -------------------------------------------------------------------------- */
/*                                  Flatpickr                                 */
/* -------------------------------------------------------------------------- */
.flatpickr-input-container {
  position: relative;
}
.flatpickr-input-container .flatpickr-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  -webkit-transform: translateY(-12px);
  -ms-transform: translateY(-12px);
  transform: translateY(-12px);
}
.flatpickr-input-container .form-floating input {
  padding-left: 2.5rem;
}
.flatpickr-input-container.flatpickr-input-sm .flatpickr-icon {
  -webkit-transform: translateY(-13px);
  -ms-transform: translateY(-13px);
  transform: translateY(-13px);
}

/* Todo list css */

.table-todo-list {
  border: 1px solid var(--gray-100);
  border-radius: 0.5rem;
}

/*-----------------------------------------------
|   Remove spinner from Input[type="number"]
-----------------------------------------------*/
.input-spin-none::-webkit-outer-spin-button,
.input-spin-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-spin-none[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

.form-check-line-through + label {
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.form-check-line-through:checked + label {
  color: var(--gray-typography-400) !important;
  text-decoration: line-through;
}

/* Date picker */
.flatpickr-calendar.open {
  max-width: 100%;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--gray-200);
  background: #fff;
  width: auto !important;
  box-shadow: 0px 32px 80px -4px rgba(27, 37, 51, 0.12);
}

.flatpickr-calendar:not(.datetime-type) {
  max-width: 21.875rem;
}

.flatpickr-calendar > .wrapped-content {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
}

.flatpickr-calendar > .wrapped-content .date-system {
  max-width: 314px;
  margin-right: 24px;
  padding-right: 24px;
  border-right: 1px solid #eaecf0;
}

.flatpickr-rContainer {
  width: 100%;
}

.flatpickr-calendar .apply-btn {
  margin-top: 2rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.2688rem */
  width: 100%;
}

.flatpickr-calendar.time-type {
  max-width: 12.25rem !important;
  padding: 0.75rem;
}

.flatpickr-calendar.noCalendar.hasTime .apply-btn {
  margin-top: 0.75rem;
}

.flatpickr-calendar.hasTime > *:not(.apply-btn) {
  flex: 1 0 auto;
}

.flatpickr-calendar:before,
.flatpickr-calendar:after {
  display: none;
}

.flatpickr-months {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-bottom: 1.5rem;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: static;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month {
  height: 32px;
  z-index: 1;
}

.flatpickr-months .flatpickr-month {
  overflow: inherit;
}

.month-year-selector {
  position: absolute;
  background: #fff;
  top: 100%;
  display: flex;
  font-size: 1rem;
  gap: 1rem;
  box-shadow: 0px 32px 80px -4px rgba(27, 37, 51, 0.12);
}

.month-year-selector > * {
  flex: 1 1 50%;
  border: 1px solid var(--gray-100) !important;
}

.month-year-selector select,
.month-year-selector input {
  text-align: center !important;
  max-width: inherit;
}

.flatpickr-current-month-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 0.25rem;
}

.flatpickr-current-month {
  padding: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  left: 0;
}

.flatpickr-current-month .numInputWrapper {
  width: auto;
}

.flatpickr-current-month-custom {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.flatpickr-current-month input.cur-year {
  padding: 0;
  height: 100%;
}

.numInputWrapper span {
  display: none;
}

.numInputWrapper:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background-color: transparent;
}

.flatpickr-calendar > span {
  position: absolute;
  height: 32px;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  transition: all 0.25s ease;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--blue-darknut-500);
}

.flatpickr-weekdays {
  height: auto;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  gap: 0.25rem;
}

.flatpickr-weekdaycontainer .flatpickr-weekday {
  text-indent: -999px;
  position: relative;
  padding: 0.5rem 0.75rem;
  height: 2rem;
}

.flatpickr-weekdaycontainer .flatpickr-weekday::before {
  content: "TE";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  text-indent: 0;
  color: var(--gray-typography-300);
}

.flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(1):before {
  content: "Su";
}
.flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(2):before {
  content: "Mo";
}
.flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(3):before {
  content: "Tu";
}
.flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(4):before {
  content: "We";
}
.flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(5):before {
  content: "Th";
}
.flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(6):before {
  content: "Fr";
}
.flatpickr-weekdaycontainer .flatpickr-weekday:nth-child(7):before {
  content: "Sa";
}

.flatpickr-days {
  margin-top: 0.5rem;
  width: 100% !important;
}

.dayContainer {
  min-width: initial;
  max-width: 100%;
  width: 100%;
  gap: 0.25rem;
}

.dayContainer > span {
  flex: 0 0 calc(100% / 7 - 0.25rem);
  max-width: 2.5rem;
  max-width: initial;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%;
  width: auto;
  height: 2.5rem;
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: none;
  color: var(--gray-typography-500);
  box-shadow: none !important;
}

.flatpickr-time {
  max-height: inherit;
  line-height: initial;
  display: initial;
  flex: 1;
  height: 100% !important;
  border: none !important;
  width: 100%;
  max-width: 172px;
  overflow: visible;
  height: 100%;
}

.flatpickr-time > *:not(.custom-time-picker),
.flatpickr-calendar .measurement {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -999px;
  top: -999px;
  white-space: nowrap;
}

.custom-time-picker {
  width: 100%;
  justify-content: center;
  align-items: center;
}

.custom-time-picker > h3 {
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
}

.custom-time-picker-content {
  position: relative;
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.custom-time-picker .column {
  display: flex;
  flex-direction: column;
  width: 3.25rem;
  height: calc(2.25rem * 5 + 1.5rem * 2 + 36px);
  justify-content: space-between;
  gap: 18px;
}

.flatpickr-calendar.hasTime.noCalendar .custom-time-picker .column {
  height: calc(2.25rem * 5 + 1.5rem * 2 + 0.5rem);
  gap: 0.25rem;
}

.flatpickr-calendar.hasTime.noCalendar .custom-time-picker h3 {
  display: none;
}

.custom-time-picker .options-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.custom-time-picker .options-wrapper .options {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  height: calc(36px * 5);
}

.custom-time-picker .options-wrapper .options span {
  width: 100%;
  height: 2.25rem;
  cursor: pointer;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.2688rem */
  user-select: none;
}

.custom-time-picker .options-wrapper .options span.selected {
  background-color: var(--blue-darknut-50);
  color: var(--blue-darknut-500);
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange,
.flatpickr-day.inRange,
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0.5rem;
}

.dayContainer > span:hover {
  background-color: var(--gray-50);
  color: var(--gray-typography-500);
}

.flatpickr-day.inRange {
  background-color: var(--blue-darknut-50) !important;
}

.dayContainer > span.today {
  background-color: #e6e6e6 !important;
  color: var(--gray-typography-500) !important;
}
.dayContainer > span.selected {
  background: var(--blue-darknut-500) !important;
  color: #fff !important;
}

.dayContainer > span.prevMonthDay,
.dayContainer > span.nextMonthDay {
  color: var(--gray-typography-100);
}

.custom-time-picker .column .arrow-button {
  cursor: pointer;
  display: flex;
  padding: 0.25rem 0rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-radius: 0.25rem;
  background: var(--gray-50);
  user-select: none;
}

.custom-time-picker .options-wrapper::before,
.custom-time-picker .options-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 0;
}

.custom-time-picker .options-wrapper::before {
  top: 0;
  background: linear-gradient(360deg, #ffffff00, #ffffff);
  z-index: 1;
}

.custom-time-picker .options-wrapper::after {
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

/* Wizard form */
.steps {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--gray-200, #d6dae1);
  overflow: hidden;
}

.steps .step {
  position: relative;
  flex: 1 1 auto;
  padding-left: 24px;
  background-color: var(--gray-50);
  z-index: 0;
}

.steps .step > span {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 1.5rem */
  color: var(--gray-typography-800);
  display: block;
  padding: 0.75rem 0.75rem 0.75rem 0.5rem;
  background-color: var(--gray-50);
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.steps .step > svg {
  position: absolute;
  right: -15px;
  top: 50%;
  width: 16px;
  font-size: 100%;
  transform: translateY(-50%);
  stroke-width: 1.6px;
  stroke: var(--gray-200);
}

.steps .step:last-child > svg {
  display: none;
}

.steps .step.current,
.steps .step.current > span,
.steps .step.completed,
.steps .step.completed > span,
.steps .step:hover,
.steps .step:hover > span {
  background-color: var(--blue-darknut-500);
  color: var(--gray-typography-25);
}

.steps .step.current > svg > path,
.steps .step:hover > svg > path,
.steps .step.completed > svg > path {
  fill: var(--blue-darknut-500);
}

.step-form {
  position: relative;
}

.step-form .final {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 2rem;
}

.step-form .final img {
  max-width: 100%;
  height: auto;
  display: block;
}

.step-form .final h4 {
  color: var(--gray-typography-800);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 24px */
  margin: 0;
}

.step-form .final p {
  color: var(--gray-typography-400);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 20.3px */
  margin: 0;
}

.step-form .final .start-over-btn {
  display: flex;
  width: 8.5625rem;
  height: 2.25rem;
  align-items: flex-start;
  max-width: 100%;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 20.3px */
  margin: 0 auto;
  justify-content: center;
}

.step-form > [data-step]:not(.active) {
  display: none;
}

.step-navigation-btns {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 1rem;
}

.step-navigation-btns .btn {
  display: flex;
  padding: 8px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 137px;
  height: 36px;
}

@media screen and (max-width: 768px) {
  .step-navigation-btns .btn {
    width: auto;
    flex: 1;
  }

  .steps .step {
    display: none;
  }

  .steps .step.current,
  .steps .step.current + .step {
    display: block;
  }
}

/* ------------Email ------------------- */

.phoenix-offcanvas-container {
  position: relative;
  overflow: hidden;
}

.phoenix-offcanvas {
  position: absolute;
  overflow: auto;
  top: 0;
  bottom: 0;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  z-index: 10;
}
.phoenix-offcanvas.phoenix-offcanvas-fixed {
  position: fixed;
  left: 0;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}
.phoenix-offcanvas.phoenix-offcanvas-start {
  left: 0;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}
.phoenix-offcanvas.phoenix-offcanvas-end {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  right: 0;
}
.phoenix-offcanvas.phoenix-offcanvas-top {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}
.phoenix-offcanvas.phoenix-offcanvas-bottom {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}
.phoenix-offcanvas.show {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
.phoenix-offcanvas.show ~ .phoenix-offcanvas-backdrop {
  position: fixed;
  top: 92px;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.1);
  z-index: 8;
}

.email-container .email-sender {
  color: var(--gray-typography-800);
  font-weight: 600;
  font-size: 0.875rem;
}

.email-container .email-subject {
  color: var(--gray-typography-600);
  font-weight: normal;
  font-size: 0.875rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
}

.email-container .email-contents {
  font-size: 0.75rem;
  padding-left: 0rem;
  margin-bottom: 0rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 400;
  color: var(--gray-typography-400);
}

.email-container .email-item {
  border-top: 1px solid #e3e6ed;
  position: relative;
  padding: 0.75rem;
}

.email-container .email-item:hover {
  background: var(--gray-50, #f5f6f7);
}

.email-container .email-item:hover .hover-actions {
  display: block;
  position: relative;
}

.email-container .email-item.active {
  background: #f5f8ff;
}

.email-container .email-time-receive {
  text-transform: uppercase;
  color: var(--gray-typography-400);
  font-size: 0.875rem;
  font-weight: 500;
}

.email-container .email-attachment {
  --line-color: #cbd0dd;
  --card-color-200: #f5f7fa;
  background-color: var(--card-color-200);
  border: 1px solid var(--line-color);
  border-radius: 0.4375rem;
  padding: 0.1875rem 0.5rem;
}

.email-container .email-attachment .text-warning {
  color: var(--global-warning-600);
}

@media (max-width: 575.98px) {
  .email-container .search-box {
    width: 100%;
  }
}

.email-sidebar {
  padding: 2rem;
}
.email-sidebar .nav-link {
  color: var(--global-gray-900);
  font-weight: 600;
}
.email-sidebar .nav-link:hover {
  color: var(--global-gray-1100);
}
.email-sidebar .nav-link .nav-item-count {
  margin-bottom: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-typography-500);
}
.email-sidebar .nav-link.active {
  color: var(--global-primary);
}
.email-sidebar .nav-link.active .nav-item-count {
  color: var(--global-primary);
}
@media (min-width: 992px) {
  .email-sidebar {
    position: sticky !important;
    padding: 0 !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    height: auto !important;
  }
}

.btn-compose {
  padding: 0.75rem 1.75rem;
}

.email-sidebar-width {
  width: 18.75rem;
}
@media (min-width: 992px) {
  .email-sidebar-width {
    width: 17.3125rem;
  }
}

.email-content {
  height: calc(100vh - 278px);
  overflow-x: hidden;
}
.email-content .email-detail-content {
  height: calc(100% - 74px);
}

.email-sidebar .email-content {
  height: 100%;
}
@media (min-width: 992px) {
  .email-sidebar .email-content {
    height: auto;
  }
}

.email-textarea + .tox {
  min-height: 250px;
}
.email-textarea + .tox .tox-editor-header {
  margin: 0 !important;
  padding: 0 !important;
}

.email-container .email-toolbar {
  top: 0;
  margin-bottom: 0;
}

.email-container .toolbar-item,
.email-container .toolbar-item:hover {
  color: var(--gray-typography-400);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
}

.email-container .toolbar-item.active,
.email-container .toolbar-item.active:hover {
  color: var(--blue-darknut-500);
  font-weight: 600;
}

.email-container .toolbar-item.active .nav-item-count {
  padding: 0.25rem 0.375rem;
  min-width: 1.75rem;
  text-align: center;
  border-radius: 0.25rem;
  background: var(--blue-darknut-100, #cce5fd);
}

.inbox-link {
  color: inherit;
  text-decoration: none;
}

.flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.shrink-darknut-500 {
  color: var(--blue-darknut-500);
}

.shrink-orange-500 {
  --brand-color-orange-500: #ff823f;
  color: var(--brand-color-orange-500);
}

.shrink-success-500 {
  color: var(--success-500);
}

.shrink-yellow-500 {
  --brand-color-yellow-500: #fbbc1d;
  color: var(--brand-color-yellow-500);
}

.hover-actions {
  display: none;
  position: absolute;
}
.hover-actions.show {
  display: inline-block;
}
.hover-actions.show + .hover-hide {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

/* Projects */

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.project-card-header.detail {
  align-items: start;
  flex-direction: column;
  gap: 4px;
}

.project-card .chart > div:not(.chart-info) {
  margin: 0 auto;
}

.project-card .chart-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 20.3px */
  margin-top: 1.375rem;
}

.project-card .chart-info .chart-info-item {
  display: flex;
  justify-content: space-between;
  color: var(--gray-typography-800, #1b2533);
}

.project-card .chart-info .chart-info-item > div {
  color: var(--gray-typography-400, #697483);
}

.project-card-header .card-subtitle {
  color: var(--gray-typography-300, #8f97a2);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 12px */
  margin-top: 4px;
}

.project-card .tag {
  color: var(--gray-typography-500, #445164);
  font-feature-settings: "clig" off, "liga" off;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 12px */
  padding: 4px 6px;
  background: var(--gray-50);
  border-radius: 4px;
}

.project-card-header .card-title {
  margin: 0;
}

.project-card-header .btn-view-project {
  width: 32px;
  height: 32px;
  font-size: 1rem;
  padding: 8px;
  border-radius: 8px;
  background: var(--blue-darknut-500, #017ef3);
  box-shadow: 0px 4px 16px -2px rgba(27, 37, 51, 0.06);
  line-height: 1;
  opacity: 0;
  transform: scale(0);
  visibility: hidden;
}

.project-card,
.project-card-header .btn-view-project {
  transition: all 0.25s ease;
}

.project-card:hover {
  box-shadow: 0px 16px 48px -4px rgba(27, 37, 51, 0.08);
  border: 1px solid var(--gray-200);
}

.project-card:hover .project-card-header .btn-view-project {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

.project-property-name,
.project-property-value {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 20.3px */
  color: var(--gray-typography-400);
  display: flex;
  align-items: center;
}

.project-property-name > i {
  font-size: 1rem;
  margin-right: 2px;
}

.project-property-value {
  color: var(--gray-typography-800);
}

.project-view-modal .modal-header {
  height: 150px;
  position: relative;
  background: var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 24px 94px 24px;
}

.project-view-modal .modal-body {
  padding: 2.5rem;

  @media screen and (max-width: 768px) {
    padding: 2rem;
  }

  @media screen and (max-width: 480px) {
    padding: 1rem;
  }
}

.project-view-modal .modal-header .btn {
  margin: 0;
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--gray-50, #f5f6f7);
  opacity: 1;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 12px */
}

.project-view-modal .modal-header .btn-close {
  width: 32px;
  height: 32px;
  font-size: 1rem;
  box-sizing: border-box;
  position: sticky;
  top: 24px;
}

.project-view-modal .project-desc i {
  font-size: 1rem;
}

.comment-editor-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
}

.comment-editor-toolbar {
  position: relative;
  border-bottom: 1px solid var(--gray-200);
}

.comment-editor-tool {
  padding: 0 0.75rem;
  height: 2.1875rem;
  line-height: 2.1875rem;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: var(--gray-200);
  border-width: 1px;
  border-style: solid;
  border-radius: 0;
  font-size: 1rem;
  color: var(--gray-800);
  transition: all 0.25s ease;
}

.comment-editor-tool:hover {
  background-color: var(--gray-100);
  border-color: transparent var(--gray-200) transparent transparent;
}

.comment-editor {
  border: none;
  border-radius: 0.5rem !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  min-height: 5.125rem !important;
}

.todo-list,
.file-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  max-height: 22.5rem;
  padding-left: 0.25rem;
}

.add-task-btn {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 20.3px */
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  color: var(--blue-darknut-500);
  align-items: center;
  margin-left: auto;
  gap: 8px;
}

.todo-item,
.file-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 1rem 0;
}

.todo-item:not(:last-child),
.file-item:not(:last-child) {
  border-bottom: 1px solid var(--gray-100);
}

.todo-item:first-child,
.file-item:first-child {
  border-top: 1px solid var(--gray-100);
}

.todo-item-content,
.file-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-right: 1rem;
}

.todo-item-title,
.file-item-title {
  margin: 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 20.3px */
  color: var(--gray-typography-700);
}

.todo-item.checked .todo-item-title {
  color: var(--gray-typography-400);
  text-decoration: line-through;
  text-decoration-line: strikethrough;
}

.todo-item-info,
.file-item-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-typography-400);
}

@media screen and (max-width: 768px) {
  .file-item-info {
    margin-top: 1rem;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

.todo-item-info span,
.file-item-info span {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 15.6px */
}

.todo-item-info span:first-child,
.file-item-info span:first-child {
  color: var(--black-color);
}

.todo-item-info span i,
.file-item-info span i {
  color: var(--gray-typography-400);
}

.file-item-info span:not(:last-child) {
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid var(--gray-100);

  @media screen and (max-width: 768px) {
    margin-right: 0;
    padding-right: 0;
    border: none;
  }
}

.todo-item-info i {
  color: var(--gray-800);
}

.todo-item .badge {
  padding: 4px 8px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 115%; /* 16.1px */
  border-radius: 4px;
}

.file-item .avatar {
  margin-right: 12px;
}

.file-item .avatar-name {
  background-color: #fff;
  font-size: 1.5rem;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}

.timeline {
  position: relative;
  z-index: 0;
}

.timeline-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.timeline-item {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0.75rem 0;

  @media screen and (max-width: 768px) {
    padding-left: 4rem;
  }

  @media screen and (max-width: 567px) {
    padding-left: 2rem;
    flex-wrap: wrap;
  }
}

.timeline-datetime {
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  flex: 0;
  min-width: 6.6875rem;

  @media screen and (max-width: 567px) {
    padding: 0;
  }
}

.timeline-header {
  display: flex;
  padding: 0rem 1.625rem;
  justify-content: start;
  align-items: center;
  gap: 0.625rem;
  color: var(--gray-typography-800, #1b2533);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 155%;
  /* 1.74375rem */
}

.timeline-date {
  color: var(--gray-typography-800, #1b2533);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 20.3px */
}

.timeline-time {
  color: var(--gray-typography-400, #697483);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 15.6px */
  margin-top: 4px;
}

.timeline-item-title {
  color: var(--gray-typography-800, #1b2533);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}

.timeline-item-info {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 15.6px */
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  color: var(--gray-typography-400, #697483);
}

.timeline-item-desc {
  color: var(--neutral-black, #000);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 20.3px */
}

.timeline-vertical-line {
  position: relative;
  margin-left: 1rem;
  margin-right: 2rem;
  width: 2rem;
  height: 100%;
  flex-shrink: 0;
  display: block;
  align-self: stretch;

  @media screen and (max-width: 768px) {
    position: absolute;
    left: 0;
    top: 0.75rem;
    height: auto;
    margin: 0;
  }

  @media screen and (max-width: 567px) {
    left: -1rem;
  }
}

.timeline-icon {
  width: 100%;
  height: 2rem;

  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;

  z-index: 1;
}

.timeline-icon::after {
  width: 2rem;
  height: 2rem;
}

.timeline-icon::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Ccircle cx='16' cy='16' r='15' stroke='%23017EF3' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='5' fill='%23017EF3'/%3E%3C/svg%3E");
}

.completed .timeline-icon::after {
  content: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23017EF3'/%3E%3Cpath d='M10.166 16.834L13.4993 20.1673L21.8327 11.834' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.timeline-dotline {
  position: absolute;
  width: 1px;
  border-left: 1px dashed #017ef3;
  top: 0.75rem;
  bottom: 0;
  left: 110px;
  z-index: -1;

  @media screen and (max-width: 768px) {
    left: 1rem;
  }
}

.timeline-item-content {
  flex: 1 1 auto;

  @media screen and (max-width: 768px) {
    flex-basis: 100%;
  }
}

/* Profile */

.profile {
  position: relative;
  overflow: hidden;
}

.profile__cover {
  position: relative;
  height: 15rem;
  overflow: hidden;
}

.profile__cover img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.profile__cover + div {
  margin-top: -4.125rem;
}

.profile__detail {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 1.875rem;
  position: relative;

  @media screen and (max-width: 1200px) {
    flex-direction: column;
    margin: 0 !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 1rem;
  }
}

.profile__avatar {
  position: relative;
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
  border: 2px solid #fff;
  box-shadow: 0px 24px 64px -4px rgba(27, 37, 51, 0.1);
  flex-shrink: 0;

  @media screen and (max-width: 1200px) {
    width: 7rem;
    height: 7rem;
  }
}

.profile__buttons {
  @media screen and (max-width: 1200px) {
    margin: 0;
    width: 100%;
    justify-content: center;
  }
}

.profile__avatar .avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
}

.profile__info {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.5rem;
  gap: 0.5rem;

  @media screen and (max-width: 1200px) {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 1rem;
  }
}

.profile__name {
  margin: 0;
  color: var(--gray-typography-800, #1b2533);
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 125%; /* 2.5rem */
  letter-spacing: -0.0313rem;
}

.profile__aka {
  color: var(--gray-typography-600, #323e4f);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 1.5rem */
}

.profile__info__detail {
  color: var(--gray-typography-400, #697483);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%;
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.profile__info__detail .value {
  color: var(--gray-typography-800, #697483);
}

.profile__button {
  display: flex;
  padding: 0.5rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.2688rem */
}

.profile__button.btn-more {
  background: var(--gray-50, #f5f6f7);
  color: var(--gray-typography-700, #242f3e);
}

.profile__sidebar {
  width: 23.5625rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  @media screen and (max-width: 992px) {
    margin: 0 auto;
  }
}

.profile__sidebar .card {
  padding: 1.5rem;
}

.profile__sidebar .card-body {
  padding: 0;
}

.profile__sidebar .card-title {
  color: var(--gray-typography-800, #1b2533);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 155%; /* 27.9px */
  margin-bottom: 0.5rem;
}

.profile__sidebar .card-text {
  color: var(--gray-typography-800, #1b2533);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 20.3px */
  margin: 0;
}

aside .profile__button {
  border: none;
}

aside .profile__button:hover,
aside .profile__button.active {
  background: var(--blue-darknut-25, #f2f9fe);
  color: var(--blue-darknut-500) !important;
}

aside .profile__button:hover > *,
aside .profile__button.active > * {
  color: var(--blue-darknut-500) !important;
}

.error-page main {
  background-color: #f1f1f1;
  background-image: url("../img/sample/sleeping.webp");
  background-position: bottom right;
  background-repeat: no-repeat;
  z-index: 0;

  @media screen and (max-width: 1024px) {
    background-image: none;
  }
}

.error-page svg {
  max-width: 100%;
}

.error-center {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 100%;
  width: 28.125rem;
  padding: 0 1.5rem;
}

.error-center-title {
  color: var(--gray-typography-800, #1b2533);
  text-align: center;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 3rem */
  letter-spacing: -0.0625rem;
  margin: 0;
}

.error-center-desc {
  color: var(--gray-typography-500, #445164);
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 1.5rem */
  margin: 0;
}

.btn-error-home {
  display: flex;
  padding: 0.75rem 1.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--neutral-white, var(--Color, #fff));
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 1.5rem */
  margin-top: 2rem;
}

.navigation-btn {
  max-width: 100%;
  width: 9.375rem;
  position: relative;
}

.article__media {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0.5rem;
}

/* Icons */
.icon-list-container {
  --item-per-row: 4;
  --item-gap: 1.58rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.58rem;
  justify-content: space-between;

  @media screen and (max-width: 992px) {
    --item-per-row: 2;
  }

  @media screen and (max-width: 600px) {
    --item-per-row: 1;
  }
}

.icon-item {
  padding: 0.62rem 1rem;
  flex: 1 0 auto;
  width: calc(100% / var(--item-per-row) - var(--item-gap));
  max-width: calc(100% / var(--item-per-row) - var(--item-gap));
}

.icon-content {
  padding: 0.69rem 0rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.63rem;
}

.icon-content-name {
  padding: 0.38rem;
  text-align: center;
  border-radius: 0.375rem;
  border: 1px solid var(--gray-200, #d6dae1);
  background: var(--gray-25, #fafafa);
  color: var(--gray-typography-800, #1b2533);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 0.975rem */
  width: 100%;
  user-select: none;
}

.icon-content-name:active {
  border-radius: 0.375rem;
  border: 1px solid var(--blue-darknut-400, #3498f5);
  background: var(--gray-100, #eaecf0);
  /* Focused/Blue */
  box-shadow: 0px 0px 2px 2px #99cbfa;
}

/* Toast */
.toast-outer {
  position: fixed;
  z-index: 99999;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Swiper Carousel */
.swiper-theme-container {
  position: relative;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 1rem;
  left: auto;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 1rem;
  right: auto;
}

.swiper-button-next,
.swiper-button-prev {
  width: 2.75rem;
  height: 2.75rem;
  background-color: rgba(152, 162, 179, 0.3);
  border-radius: 6.25rem;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}

.swiper-button-next > span,
.swiper-button-prev > span {
  font-size: 2rem;
  color: var(--white-color);
}

/* Full Calendar */

.fc .fc-toolbar.fc-header-toolbar {
  position: relative;
  width: 100%;
  height: 2.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  @media screen and (max-width: 768px) {
    height: auto;
  }
}

.fc-toolbar-chunk {
  position: relative;
  display: flex;
  gap: 0.5rem;
}

.fc-toolbar-chunk .btn {
  --bs-btn-bg: var(--white-color);
  --bs-btn-border-color: var(--gray-100);
  --bs-btn-color: var(--gray-typography-800);
  --bs-btn-disabled-bg: var(--white-color);
  --bs-btn-disabled-border-color: var(--gray-100);
  --bs-btn-disabled-color: var(--gray-300);
  --bs-btn-hover-bg: var(--gray-100);
  --bs-btn-hover-border-color: var(--gray-100);
  --bs-btn-hover-color: var(--gray-typography-800);
  --bs-btn-active-bg: var(--gray-100);
  --bs-btn-active-border-color: var(--gray-100);
  --bs-btn-active-color: var(--gray-typography-800);
  text-transform: capitalize;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
}

.fc-toolbar-chunk .fc-dayGridMonth-button,
.fc-toolbar-chunk .fc-timeGridWeek-button,
.fc-toolbar-chunk .fc-timeGridDay-button {
  color: var(--gray-typography-800, #1b2533);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 0.975rem */
  padding: 0.5rem 1rem;
}

.fc-toolbar-chunk:nth-child(2) {
  @media screen and (max-width: 768px) {
    order: 1;
    flex-basis: 100%;
    justify-content: center;
    margin-top: 1rem;
  }
}

.fc-toolbar-title {
  color: #000;

  text-align: center;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 155%; /* 1.74375rem */
}

.fc-daygrid-day {
  height: 10.10688rem;
}

.fc .fc-daygrid-day-top {
  flex-direction: row;
  margin: 1rem 0 0 1rem;
  color: var(--gray-typography-800, #1b2533);
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 1.5rem */
}

.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
  background: var(--blue-darknut-25, #f2f9fe);
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-top > a {
  border-radius: 6.25rem;
  background: var(--blue-darknut-500, #017ef3);
  display: flex;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0.625rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  color: var(--gray-typography-25, #f6f6f7);
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 1.5rem */
}

.fc-next-button::after,
.fc-prev-button::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fc-next-button,
.fc-prev-button {
  position: relative;
  padding: 0 !important;
  width: 2.25rem;
  height: 2.25rem;
}

.fc .fc-scroller {
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* overflow: auto !important; */
}

.fc .fc-scroller::-webkit-scrollbar {
  display: none;
}

.fc .fc-daygrid-body,
.fc-col-header,
.fc-scrollgrid-sync-table,
.fc-timegrid-body,
.fc .fc-scrollgrid-section-body table,
.fc .fc-scrollgrid-section-footer table {
  width: 100% !important;
}

.fc-prev-button::after {
  --svg: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75646 2.85238C6.51058 2.6065 6.11192 2.6065 5.86603 2.85238L0.828995 7.88942C0.583109 8.13531 0.583109 8.53396 0.828995 8.77985L5.86603 13.8169C6.11192 14.0628 6.51058 14.0628 6.75646 13.8169C7.00235 13.571 7.00235 13.1723 6.75646 12.9265L2.79427 8.96426H14.7063C15.054 8.96426 15.3359 8.68237 15.3359 8.33464C15.3359 7.9869 15.054 7.70501 14.7063 7.70501H2.79427L6.75646 3.74281C7.00235 3.49693 7.00235 3.09827 6.75646 2.85238Z" fill="%23758195"/></svg>');
}
.fc-next-button::after {
  --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.24354 2.85238C9.48942 2.6065 9.88808 2.6065 10.134 2.85238L15.171 7.88942C15.4169 8.13531 15.4169 8.53397 15.171 8.77985L10.134 13.8169C9.88808 14.0628 9.48942 14.0628 9.24354 13.8169C8.99765 13.571 8.99765 13.1723 9.24354 12.9265L13.2057 8.96426H1.29369C0.945957 8.96426 0.664062 8.68237 0.664062 8.33464C0.664062 7.9869 0.945957 7.70501 1.29369 7.70501H13.2057L9.24354 3.74281C8.99765 3.49693 8.99765 3.09827 9.24354 2.85238Z" fill="%23758195"/></svg>');
}

.fc-col-header-cell {
  background: var(--gray-50, #f5f6f7);
}

.fc-theme-bootstrap5 .fc-list,
.fc-theme-bootstrap5 .fc-scrollgrid,
.fc-theme-bootstrap5 td,
.fc-theme-bootstrap5 th {
  border-color: var(--gray-100);
  text-align: left;
  width: auto;
}

.fc-theme-bootstrap5 .fc-scrollgrid {
  border-color: var(--gray-100);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  overflow: hidden;
}

.fc-col-header-cell > .fc-scrollgrid-sync-inner {
  padding: 0.75rem 1rem;
}

.fc-col-header-cell > .fc-scrollgrid-sync-inner > a {
  color: var(--gray-typography-800, #1b2533);
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 145%; /* 1.26875rem */
}

.fc .fc-day-other {
  position: relative;
  overflow: hidden;
}

.fc .fc-day-other::after {
  --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="162" height="163" viewBox="0 0 162 163" fill="none"><g opacity="0.5"><path d="M-19.8594 -52.1713V-42.9337L25.5662 -69.1602H9.56621L-19.8594 -52.1713Z" fill="white"/><path d="M52.8675 -69.1602L-19.8594 -27.1713V-17.9337L68.8675 -69.1602H52.8675Z" fill="white"/><path d="M96.1688 -69.1602L-19.8594 -2.17129V7.06631L112.169 -69.1602H96.1688Z" fill="white"/><path d="M139.47 -69.1602L-19.8594 22.8287V32.0663L155.47 -69.1602H139.47Z" fill="white"/><path d="M180.141 -67.6413L-19.8594 47.8287V57.0663L180.141 -58.4037V-67.6413Z" fill="white"/><path d="M180.141 -42.6413L-19.8594 72.8287V82.0663L180.141 -33.4037V-42.6413Z" fill="white"/><path d="M180.141 -17.6413L-19.8594 97.8287V107.066L180.141 -8.40373V-17.6413Z" fill="white"/><path d="M180.141 7.35866L-19.8594 122.829V132.066L180.141 16.5963V7.35866Z" fill="white"/><path d="M180.141 32.3587L-19.8594 147.829V157.066L180.141 41.5963V32.3587Z" fill="white"/><path d="M180.141 57.3587L-19.8594 172.829V182.066L180.141 66.5963V57.3587Z" fill="white"/><path d="M180.141 82.3587L-19.8594 197.829V207.066L180.141 91.5963V82.3587Z" fill="white"/><path d="M180.141 107.359L-19.8594 222.829V230.84H-17.7351L180.141 116.596V107.359Z" fill="white"/><path d="M180.141 132.359L9.56622 230.84H25.5662L180.141 141.596V132.359Z" fill="white"/><path d="M180.141 157.359L52.8675 230.84H68.8675L180.141 166.596V157.359Z" fill="white"/><path d="M180.141 182.359L96.1688 230.84H112.169L180.141 191.596V182.359Z" fill="white"/><path d="M180.141 207.359L139.47 230.84H155.47L180.141 216.596V207.359Z" fill="white"/></g></svg>');
  content: "";
  display: inline-block;
  width: 12.5rem;
  height: 18.75rem;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--gray-100);
}

.fc .fc-timegrid-slot {
  height: auto !important;
  padding: 0.75rem 1rem;
}

.fc .fc-timegrid-axis-frame {
  justify-content: flex-start;
  padding: 0.75rem 1rem;
}

/* Popover */
.custom-popover {
  background-color: var(--gray-typography-800);
  --bs-popover-max-width: auto;
  --bs-popover-header-bg: var(--gray-typography-800);
  --bs-popover-header-color: var(--white-color);
  --bs-popover-body-color: var(--gray-typography-200);
  --bs-popover-header-padding-x: 0.5rem;
  --bs-popover-header-padding-y: 0.5rem;
  --bs-popover-body-padding-y: 0.5rem;
  --bs-popover-body-padding-x: 0.5rem;

  border: none;
}

.popover-arrow::after {
  border-right-color: var(--gray-typography-800) !important;
}

/* Off Canvas */
.offcanvas-width {
  width: 30rem;
}

/* chat widget */
.chat-box-container {
  --bs-chat-box-width: 25rem;

  position: fixed;
  right: 2.5rem;
  bottom: 2.5rem;

  width: var(--bs-chat-box-width);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  z-index: 999;
}

.chat-box {
  display: flex;
  flex-direction: column;
  align-items: start;
  background-color: var(--white-color);
  border-radius: 0.5rem;
  padding: 0;
  gap: 1rem;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2rem);
  transition: all 0.25s ease;

  &.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.chat-box .card-header {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border: none;
}

.chat-box *[data-chat-box-submit] .active-state {
  display: none;
}
.chat-box *[data-chat-box-submit].active .active-state {
  display: block;
}
.chat-box *[data-chat-box-submit].active .normal-state {
  display: none;
}

.chatbox-header {
  padding: 1rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  background-color: var(--blue-darknut-500);
}

.chatbox-body {
  display: flex;
  flex-direction: column;
  gap: 7.3125rem;
}

.chatbox-footer {
  border-top: 1px solid var(--gray-100);
  display: flex;
  padding: 1rem;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--white-color);
}

.chatbox-input {
  flex-grow: 1;
  background-color: transparent;
  outline: none !important;
  border: none;
  font-size: 0.875rem;
}

.chatbox-message {
  display: flex;
  padding: 0.5rem 0.75rem;
  justify-content: flex-end;
  align-items: center;
  border-radius: 0.5rem;
  border: 1px solid var(--gray-100);
  background-color: var(--gray-25);
  color: var(--blue-darknut-500, #017ef3);
  text-align: right;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.26875rem */
}

.chat-toggle-btn,
.chat-toggle-btn:active,
.chat-toggle-btn.active {
  padding: 0.5rem 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  border: 1px solid var(--gray-100);
  background-color: var(--white-color);
  color: var(--gray-typography-800, #1b2533);
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.26875rem */
  gap: 0.58rem;
  box-shadow: 0px 4px 16px -2px rgba(27, 37, 51, 0.06);
}

.chat-toggle-btn.active {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-toggle-btn:hover,
.chat-toggle-btn:active {
  background-color: var(--white-color) !important;
  border: 1px solid var(--gray-100) !important;
}

.chat-toggle-btn .active {
  display: none;
}
.chat-toggle-btn.active div:first-child {
  display: none;
}
.chat-toggle-btn.active .active {
  display: block;
}

.chat {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  height: calc(100vh - (4.24rem + 2.625rem + 3rem));
  overflow: hidden;
}

.chat-inbox {
  display: flex;
  width: 23.5625rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;

  @media screen and (max-width: 1200px) {
    width: 18rem;
  }

  @media screen and (max-width: 1024px) {
    width: auto;
    flex-shrink: 0;
    flex-grow: 0;
  }

  @media screen and (max-width: 576px) {
    position: absolute;
    left: 0;
    top: 0;
    width: 20rem;
    height: 100%;
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;

    &.show {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
      z-index: 99;
      width: 100%;
      background-color: var(--white-color);
    }
  }
}

.chat-message-box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0.5rem;
  border: 1px solid var(--gray-100, #eaecf0);
  position: relative;
}

.chat-message-box .tab-pane {
  position: absolute;
  inset: 0 0 0 0;
  z-index: -1;
}

.chat-message-box .tab-pane.active {
  z-index: 5;
}

.chat-inbox-search {
  display: flex;
  padding: 0.5rem 1.5rem;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 0;
  border-radius: 0.5rem;
  border: 1px solid var(--gray-200, #d6dae1);
  width: 100%;

  @media screen and (max-width: 1024px) {
    display: none;
  }

  @media screen and (max-width: 576px) {
    display: flex;
  }
}

.chat-inbox-search input {
  flex: 1;
}

.chat-inbox-search input {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.26875rem */
  border: none;
  outline: none;
  padding: 0;
}

.chat-inbox-search input::placeholder {
  color: var(--gray-typography-200, #b4b9c1);
}

.chat-inbox-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--gray-100, #eaecf0);
}

.chat-inbox-content > nav,
.chat-inbox-content > nav > div {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;

  @media screen and (max-width: 1024px) {
    display: none;
  }

  @media screen and (max-width: 576px) {
    display: flex;
  }
}

.chat-inbox-content .chat-inbox-type-btn {
  flex: 1;
  display: flex;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex: 1 0 0;
  border: none;
  outline: none;
  background-color: transparent;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-typography-800, #1b2533);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.26875rem */
  transition: all 0.25s ease;
}

.chat-inbox-content > nav .chat-inbox-type-btn:not(:last-child) {
  border-right: 1px solid var(--gray-100);
}

.chat-inbox-content > nav .chat-inbox-type-btn:hover,
.chat-inbox-content > nav .chat-inbox-type-btn.active,
.chat-inbox-content > nav .chat-inbox-type-btn:active {
  background-color: var(--gray-100);
}

.chat-inbox-content .tab-content {
  flex: 1;
  width: 100%;
  overflow: auto;
}

.chat-inbox-list {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.chat-list-item {
  display: flex;
  padding: 1rem;
  align-items: center;
  align-self: stretch;
  flex-wrap: nowrap;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  user-select: none;

  @media screen and (max-width: 1024px) {
    justify-content: center;
  }

  @media screen and (max-width: 576px) {
    justify-content: flex-start;
  }
}

.chat-message-nav {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: var(--gray-typography-500);
  gap: 0.5rem;

  @media screen and (min-width: 1024px) {
    display: none;
  }

  @media screen and (max-width: 576px) {
    display: none;
  }
}

.chat-list-item.active,
.chat-list-item:hover {
  background: var(--gray-typography-25, #f6f6f7);
}

.chat-list-item .avatar {
  flex-shrink: 0;
  position: relative;
}

.chat-list-item .avatar.active::after {
  --svg: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="11" height="11" rx="5.5" fill="%23017EF3"/><rect x="0.5" y="0.5" width="11" height="11" rx="5.5" stroke="white"/></svg>');
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  border-radius: 50%;
  border: 1px solid var(--white-color);
  color: var(--blue-darknut-500);
  position: absolute;
  right: 0;
  bottom: 0;
}

.chat-list-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  margin-left: 0.75rem;
  margin-right: 0.5rem;
  min-width: 0;

  @media screen and (max-width: 1024px) {
    display: none;
  }

  @media screen and (max-width: 576px) {
    display: flex;
  }
}

.chat-list-item-content h4 {
  color: var(--gray-typography-500, #445164);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.26875rem */
  margin: 0;
}

.chat-list-item-content p {
  overflow: hidden;
  color: var(--gray-typography-400, #697483);
  text-overflow: ellipsis;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 0.975rem */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  margin: 0;
}

.unread .chat-list-item-content h4 {
  font-weight: 600;
  color: var(--gray-typography-800, #1b2533);
}

.unread .chat-list-item-content p {
  color: var(--gray-typography-700, #242f3e);
}

.chat-list-item-meta {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0.5rem;
  align-self: stretch;

  @media screen and (max-width: 1024px) {
    display: none;
  }

  @media screen and (max-width: 576px) {
    display: flex;
  }
}

.chat-list-item-meta small {
  color: var(--gray-typography-400, #697483);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 0.975rem */
}

.chat-message-box .card {
  border: 0;
  padding: 0;
  height: 100%;
}

.chat-message-box .card-header {
  padding: 1rem 1.5rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.chat-message-box .card-title {
  margin-bottom: 0;
  color: var(--gray-typography-800, #1b2533);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 1.5rem */
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.message-box-info {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex: 1 1 100%;

  @media screen and (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  @media screen and (max-width: 576px) {
    padding-left: 1.5rem;
  }
}

.show-nav-btn {
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 1.5rem 0.5rem;
  display: flex;
  align-items: center;

  @media screen and (min-width: 576px) {
    display: none;
  }
}

.message-box-info .user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;

  @media screen and (max-width: 576px) {
    width: 100%;
    justify-content: space-between;
  }
}

.message-box-info .user-info-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.message-box-info .user-info-status small {
  color: var(--gray-typography-400, #697483);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 0.975rem */
}

.message-box-info .user-info::after,
.message-box-info .user-info-status::before,
.message-box-actions .btn::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.message-box-info .user-info::after {
  --svg: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.14446 5.54157C2.36011 5.28997 2.73889 5.26084 2.99048 5.47649L8.2 9.94179L13.4095 5.47649C13.6611 5.26084 14.0399 5.28997 14.2555 5.54157C14.4712 5.79316 14.4421 6.17194 14.1905 6.38759L8.59047 11.1876C8.36578 11.3802 8.03422 11.3802 7.80952 11.1876L2.20954 6.38759C1.95794 6.17194 1.9288 5.79316 2.14446 5.54157Z" fill="%238F97A2"/></svg>');
  color: var(--gray-typography-300);
  flex-shrink: 0;
}

.message-box-info .user-info-status::before {
  --svg: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8.0013" cy="8.0013" r="3.33333" fill="%23189877"/></svg>');
  color: var(--success-500);
}

.message-box-actions .message-action-call {
  --svg: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_5104_31505)"><path d="M6.20243 1.87446L6.79735 2.94048C7.33425 3.9025 7.11872 5.16451 6.27312 6.01011C6.27312 6.01012 6.27312 6.01012 6.27312 6.01012C6.27296 6.01028 5.24757 7.03596 7.10711 8.8955C8.96574 10.7541 9.99137 9.7306 9.99248 9.72949C9.99252 9.72945 9.9925 9.72947 9.99253 9.72943C10.8381 8.88388 12.1001 8.66837 13.0621 9.20525L14.1281 9.80018C15.5808 10.6109 15.7524 12.6481 14.4755 13.925C13.7083 14.6922 12.7683 15.2892 11.7293 15.3286C9.98018 15.3949 7.00972 14.9523 4.03003 11.9726C1.05034 8.99288 0.607665 6.02242 0.673974 4.2733C0.713364 3.23427 1.31037 2.29435 2.07762 1.5271C3.35449 0.250227 5.39171 0.421786 6.20243 1.87446Z" fill="white"/></g><defs><clipPath id="clip0_5104_31505"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
}

.message-box-actions .message-action-videocall {
  --svg: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.33203 7.66797V8.33464C1.33203 10.5263 1.33203 11.6221 1.93734 12.3597C2.04815 12.4947 2.17196 12.6185 2.30698 12.7293C3.04455 13.3346 4.14038 13.3346 6.33203 13.3346C8.52369 13.3346 9.61951 13.3346 10.3571 12.7293C10.4921 12.6185 10.6159 12.4947 10.7267 12.3597C11.1944 11.7898 11.3008 11.006 11.3249 9.66797L11.7709 9.88742C13.0682 10.5361 13.7168 10.8604 14.1911 10.5673C14.6654 10.2741 14.6654 9.54895 14.6654 8.09857V7.90404C14.6654 6.45366 14.6654 5.72847 14.1911 5.43535C13.7168 5.14224 13.0682 5.46655 11.7709 6.11518L11.3249 6.33465C11.3008 4.99665 11.1944 4.21284 10.7267 3.64292C10.6159 3.5079 10.4921 3.38409 10.3571 3.27327C9.61951 2.66797 8.52369 2.66797 6.33203 2.66797C4.14038 2.66797 3.04455 2.66797 2.30698 3.27327C2.17196 3.38409 2.04815 3.5079 1.93734 3.64292C1.33203 4.38049 1.33203 5.47631 1.33203 7.66797Z" fill="white"/></svg>');
}

.message-box-actions .message-action-more {
  --svg: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_5104_25998)"><path d="M6.16797 3.33333C6.16797 2.32 6.98797 1.5 8.0013 1.5C9.01464 1.5 9.83464 2.32 9.83464 3.33333C9.83464 4.34667 9.01464 5.16667 8.0013 5.16667C6.98797 5.16667 6.16797 4.34667 6.16797 3.33333ZM8.83464 3.33333C8.83464 2.87333 8.4613 2.5 8.0013 2.5C7.5413 2.5 7.16797 2.87333 7.16797 3.33333C7.16797 3.79333 7.5413 4.16667 8.0013 4.16667C8.4613 4.16667 8.83464 3.79333 8.83464 3.33333Z" fill="%23758195"/><path d="M6.16797 12.6667C6.16797 11.6533 6.98797 10.8333 8.0013 10.8333C9.01464 10.8333 9.83464 11.6533 9.83464 12.6667C9.83464 13.68 9.01464 14.5 8.0013 14.5C6.98797 14.5 6.16797 13.68 6.16797 12.6667ZM8.83464 12.6667C8.83464 12.2067 8.4613 11.8333 8.0013 11.8333C7.5413 11.8333 7.16797 12.2067 7.16797 12.6667C7.16797 13.1267 7.5413 13.5 8.0013 13.5C8.4613 13.5 8.83464 13.1267 8.83464 12.6667Z" fill="%23758195"/><path d="M6.16797 8C6.16797 6.98667 6.98797 6.16667 8.0013 6.16667C9.01464 6.16667 9.83464 6.98667 9.83464 8C9.83464 9.01333 9.01464 9.83333 8.0013 9.83333C6.98797 9.83333 6.16797 9.01333 6.16797 8ZM8.83464 8C8.83464 7.54 8.4613 7.16667 8.0013 7.16667C7.5413 7.16667 7.16797 7.54 7.16797 8C7.16797 8.46 7.5413 8.83333 8.0013 8.83333C8.4613 8.83333 8.83464 8.46 8.83464 8Z" fill="%23758195"/></g><defs><clipPath id="clip0_5104_25998"><rect width="3.66667" height="13" fill="white" transform="translate(6.16797 1.5)"/></clipPath></defs></svg>');
}

.message-box-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;

  @media screen and (max-width: 576px) {
    display: none;
  }
}

.message-box-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-message-box .card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  align-items: stretch;
  flex: 1 0 0;
  overflow: auto;
}

.chat-message-box .chat-message {
  width: 100%;
  display: flex;
  gap: 1rem;
  max-width: 75%;

  &.sent {
    justify-content: flex-end;
    margin-left: auto;
  }

  .avatar {
    flex-shrink: 0;
  }

  .chat-message-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  @media screen and (max-width: 768px) {
    max-width: 100%;
  }
}

.chat-message-box .scrollbar {
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
}

.chat-message-box .scrollbar > div {
  padding: 1.5rem 1.875rem;

  @media screen and (max-width: 576px) {
    padding: 1rem;
  }
}

.sent-message-body {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  align-items: flex-start;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--gray-100, #eaecf0);
  background: var(--gray-25, #fafafa);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.26875rem */
}

.sent-message-body p {
  color: currentColor;
  font-feature-settings: "clig" off, "liga" off;
  /* Text sm (14_145)/Medium */
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.26875rem */
}

.sent .sent-message-body p {
  text-align: right;
}

.sent-message-body img {
  max-width: 8.1875rem;
  max-height: 8.1875rem;
  display: block;
  object-fit: cover;
  height: auto;
}

.sent .sent-message-body {
  background-color: var(--blue-darknut-500, #017ef3);
  color: var(--gray-typography-25, #f6f6f7);
  align-items: flex-end;
}

.message-timestamp {
  color: var(--gray-typography-400, #697483);
  text-align: right;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 0.625rem */
  margin-right: auto;
  padding: 0 0.75rem;
}

.sent .message-timestamp {
  margin-right: 0;
  margin-left: auto;
}

.chat-message-box .modal-footer {
  justify-content: flex-start;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-100, #eaecf0);
  gap: 1.5rem;

  @media screen and (max-width: 576px) {
    padding: 1rem;
  }
}

.message-input {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.message-input .form-control {
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 1.26875rem */
  padding: 0;
}

.message-input .form-control::placeholder {
  color: var(--gray-typography-400, #697483);
}

.chat-message-box .modal-footer .btn {
  color: var(--blue-darknut-500, #017ef3);
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 145%; /* 1.26875rem */
  padding: 0;
  background-color: transparent;
}

/* Dark mode */

[data-bs-theme="dark"] .card {
  background-color: var(--gray-typography-700);
  border: 1px solid var(--gray-typography-700);
}

[data-bs-theme="dark"] main {
  background: #101722;
}

[data-bs-theme="dark"] .dark-gray-300 {
  color: var(--gray-typography-300) !important;
}

[data-bs-theme="dark"] .dark-gray-25 {
  color: var(--gray-typography-25) !important;
}

[data-bs-theme="dark"] .dark-form-select {
  border: 1px solid var(--gray-typography-25);
  color: var(--gray-typography-25);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.14446 5.54157C2.36011 5.28997 2.73889 5.26084 2.99048 5.47649L8.2 9.94179L13.4095 5.47649C13.6611 5.26084 14.0399 5.28997 14.2555 5.54157C14.4712 5.79316 14.4421 6.17194 14.1905 6.38759L8.59047 11.1876C8.36578 11.3802 8.03422 11.3802 7.80952 11.1876L2.20954 6.38759C1.95794 6.17194 1.9288 5.79316 2.14446 5.54157Z" fill="%23758195"/></svg>') !important;
}

[data-bs-theme="dark"] .dark-gray-200 {
  color: var(--gray-typography-200) !important;
}

[data-bs-theme="dark"] .dark-border-bottom {
  border-bottom: 1px solid var(--gray-typography-500) !important;
}

[data-bs-theme="dark"] .card-title {
  color: var(--gray-typography-25) !important;
  margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .search-box-icon .form-control {
  border: 1px solid var(--gray-typography-500);
  color: var(--gray-typography-200) !important;
}

[data-bs-theme="dark"] .btn.btn-base {
  border: 1px solid var(--gray-typography-500);
  color: var(--gray-typography-25);
}

[data-bs-theme="dark"] .btn.btn-base:hover {
  background-color: transparent;
}

[data-bs-theme="dark"] .table-outer {
  border: 1px solid var(--gray-typography-500);
}
[data-bs-theme="dark"] .table-outer th {
  border-bottom: 1px solid var(--gray-typography-500) !important;
  background: var(--gray-typography-800) !important;
  padding: 0.875rem 1.5rem !important;
  height: 2.5rem;
  color: var(--gray-typography-200) !important;
}

[data-bs-theme="dark"] .table-outer input {
  border-radius: 0.375rem;
  border: 1.5px solid var(--gray-200, #d6dae1);
  background-color: var(--white-color);
  width: 1.25rem;
  height: 1.25rem;
}

[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="%230d6efd" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 10 3 3 6-6"/></svg>');
}

[data-bs-theme="dark"] .table-outer td {
  height: 4.5rem;
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid var(--gray-typography-500);
  background-color: transparent;
}

[data-bs-theme="dark"] .table-outer td span,
[data-bs-theme="dark"] .table-outer td h3 {
  color: var(--gray-typography-25) !important;
}

[data-bs-theme="dark"] .table-navigation {
  padding: 0.75rem 1.5rem;
}

[data-bs-theme="dark"] .table-navigation .active .btn {
  padding: 0.625rem 0.75rem;
  color: var(--gray-typography-800) !important;
  background-color: var(--gray-50) !important;
  border: 2px solid var(--gray-100) !important;
}

[data-bs-theme="dark"] .table-navigation .active .btn:hover {
  padding: 0.625rem 0.75rem;
  color: var(--gray-typography-800) !important;
  background-color: var(--gray-50) !important;
  border: 2px solid var(--gray-100) !important;
}

[data-bs-theme="dark"] .table-navigation .page {
  color: var(--gray-typography-200) !important;
}

[data-bs-theme="dark"] .second-table td span + span {
  color: var(--gray-typography-300) !important;
}

.file-uploader {
  display: flex;
  height: 9.4375rem;
  padding: 0 1.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  align-self: stretch;
  border-radius: 0.75rem;
  border: 1px dashed var(--gray-200, #d6dae1);
}

.file-uploader-icon {
  display: flex;
  width: 2.8125rem;
  height: 2.8125rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 12.5rem;
  background: var(--blue-darknut-50, #e6f2fe);
  color: var(--blue-darknut-500);
}

.file-uploader-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.file-uploader h4 {
  color: var(--gray-typography-800, #1b2533);
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 1.5rem */
  margin: 0;
}

.file-uploader span {
  color: var(--blue-darknut-500, #017ef3);
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 115%; /* 1.00625rem */
}

.settings {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--gray-100, #eaecf0);
  overflow: hidden;
}

.setting-tabs {
  display: flex;
  width: 11.0625rem;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-right: 1px solid var(--gray-100, #eaecf0);
}

.setting-tabs li {
  width: 100%;
}

.setting-tabs .nav-link {
  display: flex;
  padding: 1rem;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  width: 100%;
  border-bottom: 1px solid var(--gray-100, #eaecf0);
  color: var(--gray-typography-500, #445164);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 1.26875rem */
}

.setting-tabs li:last-child > .nav-link {
  border-bottom: none;
}

.setting-tabs li:hover > .nav-link {
  background: var(--gray-50, #f5f6f7);
}

.setting-tabs .nav-link.active {
  background: var(--gray-50, #f5f6f7);
  color: var(--gray-typography-800, #1b2533);
  font-weight: 600;
}

.setting-tab-contents {
  flex: 1 1 auto;
  overflow: auto;
  height: 100%;
}

.setting-tab-contents .tab-content {
  padding: 1rem 1.5rem;
  max-height: 100%;
}

.fc-h-event {
  border-radius: 0.5rem;
  border: 1px solid var(--gray-100, #eaecf0);
  background: var(--gray-50, #f5f6f7);
}

.fc-daygrid-day-events {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4375rem;
  align-self: stretch;
}

.fc-daygrid-event-harness {
  min-width: calc(100% - 2rem);
  margin: 0 1rem;
}

.fc-event-main-frame {
  color: var(--gray-typography-800, #1b2533);
  font-feature-settings: "clig" off, "liga" off;
  /* Text xs (12_130)/Regular */
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 0.975rem */
}

.fc-h-event .fc-event-main {
  color: currentColor;
  display: flex;
  padding: 0.25rem 0.5rem;
  align-items: center;
  gap: 0.25rem;
  align-self: stretch;
}

.fc-h-event .fc-event-main::before {
  --svg: url('data:image/svg+xml,<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8.02865" cy="8.71224" r="3.33333" fill="%23189877"/></svg>');
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fc .fc-toolbar-title {
  text-align: center;
}

.create-new-form .class-tab input[type="checkbox"] {display:none;}
.create-new-form .class-tab input[type="checkbox"] + label {
  display:inline-block;
  width:100%;
  padding:1.2rem 0.75rem;
  height: calc(2.875rem + 2px);
  line-height: 1.25rem;
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  font-size: 1rem;
  color:#999;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.create-new-form .class-tab input[type="checkbox"] + label:before {
  display:inline-block;
  content:"";
  margin-top:-0.2rem;
  margin-right:0.2rem;
  background-color:#FFF;
  border:0.1rem solid #999;
  width:1rem;
  height:1rem;
  border-radius:0.2rem;
  vertical-align:middle;
}
.create-new-form .class-tab input[type="checkbox"]:checked + label {
  color:#FFF;
  border:0.1rem solid var(--2nd-color);
  background-color:var(--2nd-color);
}
.create-new-form .class-tab input[type="checkbox"]:checked + label:before {
  display:inline-block;
  content:"";
  margin-right:0.2rem;
  background-color:var(--1st-color);
}
.class-text-book {background-color:rgba(255,0,0,0.03);}
.class-situation {background-color:rgba(0,0,255,0.03);}



.project-card-header .badge {position:absolute;right:1.6rem;top:1.6rem;}
.summary-count span {display:block;width:100%;font-size:0.8rem;line-height:2.4rem;color:#999;}
.summary-count span.number {font-size:2.4rem;font-weight:900;color:#333;line-height:3.2rem;border-bottom:0.1rem solid #EFEFEF;}
.bg-2nd {background-color:var(--2nd-color);}
div.user-avatar {display:inline-block;width:40px;height:40px;
  line-height:36px;
  font-size:14px;
  font-weight:900;
  text-align:center;
  color:#FFF;
  background-color:var(--1st-color);
  border-radius:10rem;
  border:0.2rem solid var(--2nd-color);
}
.table-outer.scrollbar {padding:0;}
.heading-sm.fw-semibold {color:#333;}
.heading-sm.fw-semibold span {font-size:16px !important;color:var(--1st-color);}
.chart-example {position: relative;max-width: 100%;height: 21.6rem;overflow: hidden;}