/* ==========================================================================
   Scrollbar Customization
   ========================================================================== */
 
body {  
    scrollbar-width: thin; /* For Safari and Chrome */
    scrollbar-color: rgba(67, 125, 132, 0.5) transparent;/* For Chrome */
    scrollbar-gutter: stable both-edges; /* For Chrome */
    
} 
/* For Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px; /* Thin scrollbar */
}



/*========================================================================
    Body Fade Overlay
========================================================================== */

.body-fade-overlay {
  position: sticky;
  top: 0px;
  height: 34px;
  background: linear-gradient(to bottom, #F5F7FD, transparent);
  pointer-events: none;
  z-index: 100;
}

.body-fade-overlay.fade-sm {
  top: 0px !important;
  height: 16px !important;
}


.panel-fade-overlay {
  position: sticky;
  top: 0px;
  height: 34px;
  background: linear-gradient(to bottom, #ffffff, transparent);
  pointer-events: none;
  z-index: 100;
}



/* ==========================================================================
   State Utilities
   ========================================================================== */

.invisible {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0ms;
}
.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 500ms ease-in-out;
}
.protected {
    pointer-events: none;
    opacity: 0.75;
}

.cursor-pointer {
    cursor: pointer;
}



/* Elevate a container while one of its dropdown controls is in use. */
.dropdown-layer {
    position: relative;
    z-index: 1;
}

.dropdown-layer:focus-within,
.dropdown-layer .dropdown.show {
    z-index: 25;
}