:root {
  --bodyColor: #fbfbfb;
  /* -------------------------------------------------------------------------- */
  /*                                   TopVars                                  */
  /* -------------------------------------------------------------------------- */
  --topAreaBgColor: #2a3294;
  --topAreaColor: #fff;
  /* -------------------------------------------------------------------------- */
  /*                                  leftVars                                  */
  /* -------------------------------------------------------------------------- */
  --leftAreaBgColor: #fff;
  --leftAreaColor: #fff;
  /* -------------------------------------------------------------------------- */
  /*                                 contentVars                                */
  /* -------------------------------------------------------------------------- */
  --contentAreaBgColor: #fff;
  --contentAreaColor: #000;

  /* -------------------------------------------------------------------------- */
  /*                                   General                                  */
  /* -------------------------------------------------------------------------- */
  --generalBorderColor: 1px solid #dee2e6 !important;
  --colorUnset: unset !important;
  --borderWhite: 1px solid #fff;
  --formPlaceHolderColor: #acacac;
  --defaultBolderColor: #ced4da !important;
  --defaultLinkColor: #333;
  --defaultFontColor: #333333;

  /* -------------------------------------------------------------------------- */
  /*                                 Basic Color                                */
  /* -------------------------------------------------------------------------- */
  --red: #de0000 !important;
  --green: #008000 !important;
  --white: #fff !important;
  --purple: #800080 !important;

  /* -------------------------------------------------------------------------- */
  /*                                 Navs & menu                                */
  /* -------------------------------------------------------------------------- */
  --navBarDarkCustomColor: hsla(0, 0%, 100%, 0.55);
  --navMainColor: #333333;
  --navColor: #0047ab !important;
  --navColorText: #c2c2c2;
  --navActiveBg: #f3f6fa;
  --navActiveBorder: #eef2f8;
  --menuBarColor: #5c5c5c;
  --menubaractivecolor: #5f6871;
  --menuBarBgColor: #f6f8fb;
  --menuBarBorderColor: #cce6cc;
  --menuBarBorderCircle: 1px solid #eeeeee !important;
  --btnFillColor: #002f72 !important;
  --btnFillColorText: #fff !important;
  --btnFillImage: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%)
    contrast(102%);
  --btnFillColorHover: #fff !important;

  --btnLineBgColor: #fff !important;
  --btnLineImage: brightness(0) saturate(100%) invert(11%) sepia(62%) saturate(7496%) hue-rotate(209deg) brightness(94%)
    contrast(101%);
  --btnLineImageHover: invert(9%) sepia(70%) saturate(5469%) hue-rotate(208deg) brightness(86%) contrast(103%);

  --dropDownColor: #f0f2f4;
  --dropDownHoverColor: #16181b;
  --dropDownHoverBgColor: #f8f9fa;
  --formColor: #5a5b5d;
  /* -------------------------------------------------------------------------- */
  /*                                    Login                                   */
  /* -------------------------------------------------------------------------- */
  --loginBgColor: #1d5fbb;
  --loginBgImage: linear-gradient(180deg, #1d5fbb 0%, #000080 68%);

  /* -------------------------------------------------------------------------- */
  /*                                   Select2                                  */
  /* -------------------------------------------------------------------------- */
  --filterColor: #212529;
  --select2BgColor: #fff;
  --select2BorderColor: 1px solid #ced4da !important;
  --select2BgTrack: #f8f8f8;
  --select2BgThumb: #c2c2c8;
  --select2BgThumbHover: #afafb4;
  --select2BgDisabled: #eee;
  --select2BgOptionSelected: #f6f9fc !important;
}

body {
  background-color: var(--bodyColor);
  border-color: var(--defaultBolderColor);
}

/* -------------------------------------------------------------------------- */
/*                                 NavBar Menu                                */
/* -------------------------------------------------------------------------- */
.offcanvas {
  color: var(--navMainColor);
}

.offcanvas .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--navColor);
  background-color: var(--colorUnset);
  border-bottom: 2px solid var(--navColor);
}

.offcanvas .nav-link {
  color: var(--navColorText);
}

.offcanvas .accordion-button:not(.collapsed) {
  color: var(--navMainColor);
  background-color: var(--colorUnset);
  box-shadow: unset !important;
}

.offcanvas .accordion-button:not(.collapsed)::after {
  background-image: url(/img/custom/caret-down.svg);
}

.offcanvas .accordion-button::after {
  background-image: url(/img/custom/caret-down.svg);
  background-size: 0.9rem;
}

.offcanvas hr {
  background-color: var(--generalBorderColor);
}

.topArea {
  background-color: #25a18e;
  color: var(--topAreaColor);
}

.main-navbar .border-circle {
  border: var(--menuBarBorderCircle);
}

/* -------------------------------------------------------------------------- */
/*                                  Left area                                 */
/* -------------------------------------------------------------------------- */

.leftArea {
  border-right: 1px solid #80808040;
  /* background-color: #52b788; */
}

/* .leftArea .menu-link img.menu-arrow {
  filter: brightness(0) saturate(100%) invert(13%) sepia(8%) saturate(897%) hue-rotate(173deg) brightness(101%)
    contrast(90%) !important;
} */

.leftArea .menu-link,
.leftArea .active .menu-link[aria-expanded],
.leftArea .active ul .menu-link {
  color: #333;
  background-color: unset;
}

.leftArea .menu-link:hover,
.leftArea .active .menu-link[aria-expanded]:hover,
.leftArea .active ul .menu-link:hover,
.leftArea .menu-link.hover,
.leftArea .menu-link.active {
  background-color: #d8f3dc;
  color: #333;
}

.leftArea .menu-link img,
.leftArea .menu-link i {
  filter: brightness(0) invert(73%) sepia(12%) saturate(1043%) hue-rotate(98deg) brightness(94%) contrast(94%);
}

.leftArea .active .menu-link,
.menubar-enabled.leftArea-collapsed .leftArea .active .menu-link[aria-expanded],
.leftArea .active ul .active .menu-link {
  background-color: #25a18e;
  color: #fff;
}

.leftArea .active .menu-link i,
.menubar-enabled.leftArea-collapsed .leftArea .active .menu-link[aria-expanded] img {
  filter: brightness(0) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.leftArea .menu-item ul .menu-link.active .menu-label {
  color: var(--navColor);
}

/* .leftArea .menu-item ul .menu-link {
  color: #fff;
} */

.navbar-dark .navbar-nav .nav-icon,
.navbar-dark .navbar-nav .nav-link {
  color: var(--navBarDarkCustomColor);
}

.dropdown-menu,
.card-header,
.list-group-item {
  border-top-color: var(--dropDownColor) !important;
  border-bottom-color: var(--dropDownColor) !important;
  border-left-color: var(--dropDownColor) !important;
  border-right-color: var(--dropDownColor) !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--dropDownHoverColor);
  background-color: var(--dropDownHoverBgColor);
}

.filter-white {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(12%) hue-rotate(300deg) brightness(106%)
    contrast(104%);
}

.filter-dark {
  filter: brightness(0) saturate(100%) invert(9%) sepia(25%) saturate(0%) hue-rotate(221deg) brightness(108%)
    contrast(75%) !important;
}

/* -------------------------------------------------------------------------- */
/*                                Content Area                                */
/* -------------------------------------------------------------------------- */
.contentArea {
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--contentAreaBgColor);
}

/* -------------------------------------------------------------------------- */
/*                                    Miscs                                   */
/* -------------------------------------------------------------------------- */
.background.img-wrap {
  background-color: var(--loginBgColor);
  background-image: var(--loginBgImage);
}

.background.img-wrap.vector {
  background-color: var(--colorUnset);
}

/* -------------------------------------------------------------------------- */
/*                                    Forms                                   */
/* -------------------------------------------------------------------------- */
form {
  color: var(--formColor);
}

.form-wrap .form-control::placeholder {
  color: var(--formPlaceHolderColor);
}

/* -------------------------------------------------------------------------- */
/*                               Links & Buttons                              */
/* -------------------------------------------------------------------------- */
a:hover {
  color: var(--navColor);
}

/* -------------------------------------------------------------------------- */
/*                                   Images                                   */
/* -------------------------------------------------------------------------- */
.image-circle {
  background-color: var(--white);
}

/* -------------------------------------------------------------------------- */
/*                                   Select2                                  */
/* -------------------------------------------------------------------------- */
.select2-container {
  color: var(--filterColor);
  background-color: var(--white);
  background-repeat: no-repeat;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.selection {
  color: var(--filterColor);
  background-color: var(--select2BgColor);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border: var(--generalBorderColor);
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  color: var(--filterColor);
  background-color: var(--select2BgColor);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-dropdown {
  border: var(--select2BorderColor);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: var(--select2BorderColor);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected {
  background-color: var(--select2BgOptionSelected);
  color: var(--colorUnset);
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track {
  background: var(--select2BgTrack);
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
  background: var(--select2BgThumb);
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: var(--select2BgThumbHover);
}

.select2-container--default.select2-container--disabled .selection {
  background-color: var(--select2BgDisabled);
  cursor: default;
}

/* -------------------------------------------------------------------------- */
/*                                  DropDOwn                                  */
/* -------------------------------------------------------------------------- */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--navColor);
}

.dropdown-toggle::after {
  background-image: url("/img/custom/caret-down.svg");
  background-repeat: no-repeat;
  transition: transform 0.2s ease-in-out;
}