/* Override ngx-perfect-scrollbar styles */
body perfect-scrollbar {
    overflow: initial;
}

perfect-scrollbar {
}

/* Custom changes for Split assignment */
perfect-scrollbar.noScroll .ps {
    overflow: unset !important;
}

perfect-scrollbar.scrollShown > .ps.ps--active-y > .ps__rail-y {
    left: 512px !important;
}

perfect-scrollbar .ps {
}
perfect-scrollbar .ps .ps-content {
}

perfect-scrollbar .ps .ps-overlay {
}

/* Top blur */
perfect-scrollbar.ps-show-active > .ps.ps--active-y > .ps-overlay:not(.ps-at-top) .ps-indicator-top {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%) !important;
}

/* Bottom blur */
perfect-scrollbar.ps-show-active > .ps.ps--active-y > .ps-overlay:not(.ps-at-bottom) .ps-indicator-bottom {
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%) !important;
}

/* Remove gray scrollbar background, which occupies all space and is visible on hover.*/
perfect-scrollbar .ps .ps__rail-y,
perfect-scrollbar .ps .ps__rail-x {
    background-color: transparent !important;
}

perfect-scrollbar .ps .ps__rail-y .ps__thumb-y {
    /* Scroll width, while not hovered */
    width: 3px !important;
    /* Offset from the right */
    right: 3px !important;
}
perfect-scrollbar .ps .ps__rail-y:focus > .ps__thumb-y,
perfect-scrollbar .ps .ps__rail-y:hover > .ps__thumb-y {
    /* Scroll width when hovered */
    width: 6px !important;
}

perfect-scrollbar > .ps.ps--active-x.ps--active-y > .ps__rail-y  {
    z-index: 5;
}