/* ==========================================================================
   Scrollbar Customization
   ========================================================================== */
 
body {  
    scrollbar-width: thin; /* For Safari and Chrome */
    scrollbar-color: rgba(67, 125, 132, 0.5) transparent;/* 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;
}