/* Variables */
:root {
    --height-100: 100%;
}

/* 
    Base overrides
    Want body to fill the entire height of the page.
    Css reset is done by fluent-ui through appFluent.css
*/
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Utilities in use over several pages */

.no-vertical-scroll {
    overflow-y: hidden;
}

.no-horizontal-scroll {
    overflow-x: hidden;
}

.no-scroll {
    overflow: hidden;
}

.flex-vertical {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.flex-horizontal {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.height-inherit {
    height: inherit;
}

.visible {
    visibility: visible;
}

.hidden {
    visibility: hidden;
}

@keyframes blink-border {
    0%, 100% {
        border-color: var(--highlight-bg);
        border-width: 3px;
    }

    50% {
        border-color: var(--accent-fill-rest);
        border-width: 3px;
    }
}
.fluent-toast-provider{
    z-index: 1000 !important;
}

.blink-border {
    border: 3px solid var(--highlight-bg);
    animation: blink-border 1.5s step-end 2;
    -webkit-animation: blink-border 1.5s step-end 2;
    box-sizing: border-box;
    transition: border-color 0.1s, border-width 0.1s;
}