/* SCROLL ELEMENTS */
/* /////////////////////////////////////////////////////////////////////////////////////////// */

:root {
  --scrollbar-size: 12px;
  --scrollbar-track: var(--fw-white-100);
  --scrollbar-track-hover: var(--fw-white-100);
  --scrollbar-thumb: var(--fw-white-250);
  --scrollbar-thumb-hover: var(--fw-white-350);
  --scrollbar-thumb-active: var(--fw-white-400);
  --scrollbar-thumb-border: 3px solid transparent;
  --scrollbar-thumb-box-shadow: none;
  --scrollbar-button-size: 0px;
  --scrollbar-button: var(--fw-white-100);
  --scrollbar-button-hover: var(--fw-white-200);
  --scrollbar-corner: var(--fw-white-100);

  --scrollbar-horizontal-size: var(--scrollbar-size);
  --scrollbar-horizontal-track: var(--scrollbar-track);
  --scrollbar-horizontal-track-hover: var(--scrollbar-track-hover);
  --scrollbar-horizontal-thumb: var(--scrollbar-thumb);
  --scrollbar-horizontal-thumb-hover: var(--scrollbar-thumb-hover);
  --scrollbar-horizontal-thumb-active: var(--scrollbar-thumb-active);
  --scrollbar-horizontal-thumb-border: var(--scrollbar-thumb-border);
  --scrollbar-horizontal-thumb-box-shadow: var(--scrollbar-thumb-box-shadow);
  --scrollbar-horizontal-button-size: var(--scrollbar-button-size);
  --scrollbar-horizontal-button: var(--scrollbar-button);
  --scrollbar-horizontal-button-hover: var(--scrollbar-button-hover);
}

/* FORM FIELD VARIABLES */
/* /////////////////////////////////////////////////////////////////////////////////////////// */

:root {
  --form-field-background: var(--fw-white-100);
  --form-field-background-hover: var(--fw-white-100);
  --form-field-background-focus: var(--fw-white-100);
  --form-field-background-disabled: var(--fw-white-150);
  --form-field-border: 1px solid var(--fw-border-color);
  --form-field-border-hover: 1px solid var(--fw-white-500);
  --form-field-border-focus: 1px solid var(--primary-300);
  --form-field-border-disabled: 1px solid var(--fw-white-200);
  --form-field-text: var(--fw-black-300);
  --form-field-text-disabled: var(--fw-white-400);
  --form-field-placeholder: var(--fw-black-450);
  --form-field-placeholder-disabled: var(--fw-white-400);
  --form-field-font-family: "Albert Sans", sans-serif;
  --form-field-font-size: 0.9rem;
  --form-field-font-weight: 400;
  --form-field-border-radius: 6px;
  --form-field-padding: 10px 10px;
  --form-field-line-height: 20px;
}

/* NAVIGATION VARIABLES */
/* /////////////////////////////////////////////////////////////////////////////////////////// */

:root {
  --header-navigation-background: var(--fw-white-150);
  --header-navigation-border: 1px solid var(--fw-white-250);
  --header-navigation-color: var(--fw-black-400);

  --header-navigation-item-background: transparent;
  --header-navigation-item-border: none;
  --header-navigation-item-color: var(--fw-black-400);
  --header-navigation-item-hover-background: var(--fw-white-100);
  --header-navigation-item-hover-border: none;
  --header-navigation-item-hover-color: var(--fw-black-000);
  --header-navigation-item-active-background: transparent;
  --header-navigation-item-active-border: none;
  --header-navigation-item-active-color: var(--fw-black-000);

  --sidebar-navigation-background: var(--fw-white-100);
  --sidebar-navigation-border: 1px solid var(--fw-white-300);
  --sidebar-navigation-color: var(--fw-black-400);

  --sidebar-navigation-item-background: transparent;
  --sidebar-navigation-item-border: none;
  --sidebar-navigation-item-color: var(--fw-black-400);
  --sidebar-navigation-item-hover-background: var(--fw-white-100);
  --sidebar-navigation-item-hover-border: none;
  --sidebar-navigation-item-hover-color: var(--fw-black-000);
  --sidebar-navigation-item-active-background: transparent;
  --sidebar-navigation-item-active-border: none;
  --sidebar-navigation-item-active-color: var(--fw-black-000);

  --slider-drawer-navigation-background: var(--fw-white-150);
  --slider-drawer-navigation-border: 1px solid var(--fw-white-250);
  --slider-drawer-navigation-color: var(--fw-black-400);

  --slider-drawer-navigation-item-background: transparent;
  --slider-drawer-navigation-item-border: none;
  --slider-drawer-navigation-item-color: var(--fw-black-400);
  --slider-drawer-navigation-item-hover-background: var(--fw-white-100);
  --slider-drawer-navigation-item-hover-border: none;
  --slider-drawer-navigation-item-hover-color: var(--fw-black-000);
  --slider-drawer-navigation-item-active-background: transparent;
  --slider-drawer-navigation-item-active-border: none;
  --slider-drawer-navigation-item-active-color: var(--fw-black-000);

  --top-bar-background: var(--fw-white-100);
  --top-bar-border: 1px solid var(--fw-white-300);
  --top-bar-color: var(--fw-black-400);

  --function-button-background: transparent;
  --function-button-border: none;
  --function-button-color: var(--fw-black-400);

  --function-button-hover-background: var(--fw-white-200);
  --function-button-hover-border: none;
  --function-button-hover-color: var(--fw-black-000);

  --function-button-active-background: var(--primary-600);
  --function-button-active-border: none;
  --function-button-active-color: var(--fw-static-white-000);

  --tab-element-background: var(--fw-white-100);
  --tab-element-border: 3px solid transparent;
  --tab-element-color: var(--fw-white-500);

  --tab-element-hover-background: var(--fw-white-100);
  --tab-element-hover-border: 3px solid var(--fw-white-350);
  --tab-element-hover-color: var(--fw-black-400);

  --tab-element-selected-background: var(--fw-white-100);
  --tab-element-selected-border: 3px solid var(--primary-500);
  --tab-element-selected-color: var(--fw-black-300);
}

/* SLIDER DRAWER VARIABLES */
/* /////////////////////////////////////////////////////////////////////////////////////////// */

:root {
  --backdrop-overlay-background: #1d2125c7;

  --slider-drawer-background: var(--fw-white-000);
  --slider-drawer-border: none;
  --slider-drawer-color: var(--fw-black-450);
  --slider-drawer-box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  --slider-drawer-border-radius: 5px;
  --slider-drawer-backdrop-background: var(--backdrop-overlay-background);
  --slider-drawer-resize-handle-background: color-mix(in oklab, var(--fw-black-450) 42%, transparent);
  --slider-drawer-resize-handle-hover-background: color-mix(in oklab, var(--fw-black-450) 68%, transparent);
  --slider-drawer-close-background: var(--fw-white-200);
  --slider-drawer-close-border: none;
  --slider-drawer-close-color: var(--fw-black-450);
  --slider-drawer-close-hover-background: rgba(0, 0, 0, 0.2);
  --slider-drawer-close-hover-border: none;
  --slider-drawer-close-hover-color: var(--fw-black-300);

  --side-slider-background: var(--fw-white-000);
  --side-slider-border: 1px solid var(--fw-white-150);
  --side-slider-color: var(--fw-black-450);
  --side-slider-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --side-slider-border-radius: 5px;
  --side-slider-backdrop-background: var(--backdrop-overlay-background);
  --side-slider-close-background: var(--fw-white-000);
  --side-slider-close-border: 1px solid var(--fw-white-100);
  --side-slider-close-color: var(--fw-black-450);
  --side-slider-close-hover-background: var(--fw-white-150);
  --side-slider-close-hover-border: 1px solid var(--fw-white-100);
  --side-slider-close-hover-color: var(--fw-black-300);

  --inline-slider-drawer-background: var(--fw-white-000);
  --inline-slider-drawer-border: 1px solid var(--fw-white-300);
  --inline-slider-drawer-color: var(--fw-black-450);
  --inline-slider-drawer-header-background: var(--fw-white-050);
  --inline-slider-drawer-header-border: none;
  --inline-slider-drawer-header-color: var(--fw-black-450);
  --inline-slider-drawer-header-hover-background: var(--fw-white-100);
  --inline-slider-drawer-header-hover-border: none;
  --inline-slider-drawer-header-hover-color: var(--fw-black-300);
  --inline-slider-drawer-panel-border: 1px solid var(--fw-white-250);
  --inline-slider-drawer-count-background: var(--fw-white-200);
  --inline-slider-drawer-count-border: none;
  --inline-slider-drawer-count-color: var(--fw-black-450);
  --inline-slider-drawer-chevron-color: var(--fw-black-450);
}

/* Firefox supports thumb and track colors, but not scrollbar-part hover states. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
}

/* Chromium, Edge and desktop Safari. Mobile Safari controls overlay scrollbars. */
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-track:hover {
  background: var(--scrollbar-track-hover);
}

*::-webkit-scrollbar-thumb {
  min-width: var(--scrollbar-size);
  min-height: var(--scrollbar-size);
  border: var(--scrollbar-thumb-border);
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
  box-shadow: var(--scrollbar-thumb-box-shadow);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-button {
  width: var(--scrollbar-button-size);
  height: var(--scrollbar-button-size);
  background: var(--scrollbar-button);
}

*::-webkit-scrollbar-button:hover {
  background: var(--scrollbar-button-hover);
}

*::-webkit-scrollbar-button:active {
  background: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner,
*::-webkit-resizer {
  background: var(--scrollbar-corner);
}

/* Horizontal scrollbar overrides for Chromium, Edge and desktop Safari. */
*::-webkit-scrollbar:horizontal {
  height: var(--scrollbar-horizontal-size);
  background: var(--scrollbar-horizontal-track);
}

*::-webkit-scrollbar-track:horizontal,
*::-webkit-scrollbar-track-piece:horizontal {
  background: var(--scrollbar-horizontal-track);
}

*::-webkit-scrollbar-track:horizontal:hover {
  background: var(--scrollbar-horizontal-track-hover);
}

*::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--scrollbar-horizontal-size);
  border: var(--scrollbar-horizontal-thumb-border);
  background-color: var(--scrollbar-horizontal-thumb);
  box-shadow: var(--scrollbar-horizontal-thumb-box-shadow);
}

*::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: var(--scrollbar-horizontal-thumb-hover);
}

*::-webkit-scrollbar-thumb:horizontal:active {
  background-color: var(--scrollbar-horizontal-thumb-active);
}

*::-webkit-scrollbar-button:horizontal {
  width: var(--scrollbar-horizontal-button-size);
  height: var(--scrollbar-horizontal-size);
  background: var(--scrollbar-horizontal-button);
}

*::-webkit-scrollbar-button:horizontal:hover {
  background: var(--scrollbar-horizontal-button-hover);
}

*::-webkit-scrollbar-button:horizontal:active {
  background: var(--scrollbar-horizontal-thumb-active);
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.nooverflow {
  overflow-y: hidden;
  overflow-x: hidden;
}


/* .container {
    max-width: 1215px !important;
} */

.fas,
.far,
.fab {
  /* width: 8px; */
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#sidebar_load-2 .fas,
#sidebar_load-2 .far,
#sidebar_load-2 .fab {
  width: 15px;
}