@import "bootstrap.min.css";
@import "bootstrap-icons.min.css";
/*
STICKY ROW
Normal css box-shadow works for the header as it is a single html element
*/

tr.sticky {
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 0 6px rgba(0,0,0,0.25);
}


/*
STICKY COLUMN
Avoid undesirable overlapping shadows by creating a faux shadow on the ::after psudo-element instead of using the css box-shadow property.
*/

th.sticky,
td.sticky {
    position: sticky;
    left: 0;
    background: #fdfdfd;
}

th.sticky::after,
td.sticky::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 0;
    bottom: -1px;
    width: 5px;
    background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 100%);
}

th.sticky::before,
td.sticky::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 0;
    bottom: -1px;
    width: 5px;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);
}

.three-d-button {
    transition: transform 200ms, box-shadow 200ms;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.76);
}
.three-d-button:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.76);
    transition: transform 100ms, box-shadow 100ms;
}
.three-d-button:active {
    transform: translateY(-2px);
    box-shadow: 0px 2px 0px 0px rgba(0,0,0,1);
}

.collapsible {
    cursor: pointer;
}
.collapsible_chevron {
    display: inline-block;
    transition: transform 300ms;
}

.select-pill {
    position: relative;
    background-color: white;
    box-shadow: 1px 1px 0px 1px rgba(0, 0, 0, 0.2);
    width: fit-content;
    padding: 0 !important;
}
.select-pill button:hover {
    background-color: rgba(0,0,0,0.1);
}

.select-pill button {
    transition: background-color 200ms;
}

.select-pill button {
    height: 100%;
    padding: 8px 24px;
    width: 6rem;
}
.active-background {
    position: absolute;
    height: 100%;
    width: 6rem;
    left: 0;
    background-color: var(--bs-primary);
}
.navbar .nav-link {
    transition: opacity 200ms;
}
.navbar .nav-link:hover {
    opacity: 0.8;
}

@media (min-width: 2000px) {
    .container {
        max-width: 90vw;
    }
}

.version-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    color: #CCC;
}
#loader {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px;
}

.spinner {
     color: var(--bs-primary);
     font-size: 45px;
     text-indent: -9999em;
     width: 1em;
     height: 1em;
     border-radius: 50%;
     transform: translateZ(0);
     animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;
 }

@keyframes mltShdSpin {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em,
        0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em,
        0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em,
        -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em,
        -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
        -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
        -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
        -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
        -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em,
        0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes round {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}