:root {
    --header-height: 4.5rem; /* 72px */
    --page-level-header-min-height: 8.1875rem; /* 131px */
    --footer-height: 2.6875rem; /* 43px */
    --reserved-min-svh-height:
            calc(var(--header-height)
               + var(--page-level-header-min-height)
               + var(--footer-height)
               + 2rem); /* the 2 rem is the block padding of the "home-layout" container under the header */
    --tab-content-grid-max-height: calc(100svh - (14.5rem + var(--reserved-min-svh-height)) );
}

html, body {
    height: 100%;
}

body {
    overflow: hidden;
}

#app {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100lvh;
}

@media print {
    #app {
        overflow: auto;
        max-height: unset;
    }
}

.oc-numeric {
    font-variant-numeric: tabular-nums;
}

*::-webkit-scrollbar-track {
    border-radius: 0.625rem;
    background-color:transparent;
}

*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--clr-2mn, #adadad);
    border-radius: 0.625rem;
    max-height: 100px;
}

.smooth-change {
    transition: all 500ms ease-in-out;
}

.mesh {
    background: url("../image/dw1-gradient-mesh.webp"), var(--clr-mesh-average);
}

.mesh,
.modal-curtain {
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.glass:not(.e-dlg-container, .e-btn) {
    border-radius: 8px;
    background: #ffffffcc;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--glass-shadow);

    &.frame {
        padding: 0.75rem; /* 12px */
    }

    &.card:not(.oc-full-coverage-modal),
    &.modal:not(.e-dlg-container, .oc-full-coverage-modal),
    &.dialog:not(.oc-full-coverage-modal) {
        padding: 1rem 1.5rem; /* 16px 24px */
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(15px);
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0.01;
        background: url("../SVG/noise.svg");
        mix-blend-mode: multiply;
        z-index: -1;
    }
}

mark {
    color: black;
    background-color: var(--clr-1s_70, #00A894b3);
    outline: 2px solid var(--clr-1s_70, #00A894b3);
}

.oc-self-right { margin-left: auto; }

.oc-soft-disable {
    pointer-events: none;
}

.oc-fixed {
    position: fixed !important;
}
.oc-relative {
    position: relative !important;
}
.oc-absolute {
    position: absolute !important;
}

.e-skeleton.e-shimmer-wave:not(#a)::after {
    background-image: linear-gradient(90deg, transparent calc(50% - 100px), #dae0e0 50%, transparent calc(50% + 100px));
}

.e-skeleton.e-shimmer-wave.green-shimmer:not(#a) {
    background-color: #5A9C95cc;

    &::after {
        background-image: linear-gradient(90deg, transparent calc(50% - 100px), #00A894b3 50%, transparent calc(50% + 100px));
    }
}

button:focus-visible {
    outline-offset: 2px;
    outline: 2px solid var(--clr-1s, #00A894);
}

.screen-reader-only{
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

.oc-self-left { margin-right: auto; }
.oc-self-center { margin-inline: auto; }
.oc-self-right { margin-left: auto; }

.e-input-group .e-clear-icon::before,
.e-input-group.e-control-wrapper .e-clear-icon::before {
    content: var(--svg-close-icon-green) !important;
}

.e-dialog .e-btn:hover .e-icon-dlg-close::before {
    opacity: 75%;
}

.branded-link,
.faux-link {
    color: var(--clr-1p, #005b5e);
    text-decoration: underline;
    cursor: pointer;
    max-width: 100%;

    &:hover {
        opacity: 75%;
    }
    
    &.underline-on-hover {
        text-decoration: none;
        
        &:hover {
            text-decoration: underline;
        }
    }
}

.oc-text-right { text-align: right; }
.oc-text-center { text-align: center; }
.oc-text-left { text-align: left; }

.icon-button {
    flex-shrink: 0;
}

.width-fit {
    width: fit-content;
}

@media (prefers-reduced-motion: no-preference) {
    .icon-button img {
        transform-origin: center;
        transition: transform 250ms ease-in-out;
    }

    .icon-button:hover img {
        transform: scale(1.25);
    }
}

@media (prefers-reduced-motion: reduce) {
    .icon-button:hover img {
        opacity: 75%;
    }
}

@media(prefers-contrast: more) {
    button:not(.icon-button) {
        outline: 2px solid gray;
    }

    .mesh {
        background: white;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .glass:not(.e-dlg-container, .e-btn) {
        background: white;
    }
}