:root {

    /* Border Colors --border-color-light: var(--color-light); */
    /* dividers, tables, etc . --border-color: var(--color-medium); */
    /* text inputs, etc .  PRIMARY COLORS ---------------------------------------------------- --color-primary: #00658a; */
    /* (base) main color --color-darkest: #002533; */
    /* used for heading text --color-dark: #435D65; */
    /* used for secondary text --color-medium: #819DA7; */
    /* used for non-decorative borders (text inputs, etc .) --color-light: #DAE4E7; */
    /* used for decorative borders (divider, tables, etc .) --color-lightest: #F1F3F4; */
    /* used for alternate backgrounds --color-extreme-lightest: #F9FAFA; */
    /* used for table header backgrounds  NEUTRALS ---------------------------------------------------- --color-gray-50: #f9f9f9; */
    --color-gray-100: #f2f2f2;
    --color-gray-200: #e9e9e9;
    --color-gray-300: #d9d9d9;
    --color-gray-400: #b5b5b5;
    --color-gray-500: #959595;
    --color-gray-600: #6d6d6d;
    --color-gray-700: #5a5a5a;
    --color-gray-800: #3b3b3b;
    --color-gray-900: #1b1b1b;


    /* SEMANTIC COLORS ---------------------------------------------------- */
    /* Success */
    --color-green: #53C71A;
    --color-green-light: #EEFFE5;
    --color-green-dark: #143D00;

    /* Warning */
    --color-orange: #FFB65C;
    --color-orange-light: #FFEDD6;
    --color-orange-dark: #703E00;


    /* Error */
    --color-red: #DE350B;
    --color-red-light: #FFEFEB;
    --color-red-dark: #701600;

    /* Information */
    --color-blue: #2196F3;
    --color-blue-light: #E6F3FF;
    --color-blue-dark: #0D3C61;

    --running-light: #e6f8ff;
    --running-dark: #004964;
    --running: #01b6fb;
}

html, body {
    font-family: Arial, sans-serif;
}

.mud-appbar .mud-toolbar-appbar {
    height: 64px !important;
}

#blazor-error-ui {
    display: none;
}

body {
    margin: 0;
}

.lds-roller {
    color: #00658a;
}

.lds-roller,
.lds-roller div,
.lds-roller div:after {
    box-sizing: border-box;
}

.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.spinner {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7.2px;
    height: 7.2px;
    border-radius: 50%;
    background: currentColor;
    margin: -3.6px 0 0 -3.6px;
}

.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
    top: 62.62742px;
    left: 62.62742px;
}

.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
    top: 67.71281px;
    left: 56px;
}

.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
    top: 70.90963px;
    left: 48.28221px;
}

.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
    top: 70.90963px;
    left: 31.71779px;
}

.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
    top: 67.71281px;
    left: 24px;
}

.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
    top: 62.62742px;
    left: 17.37258px;
}

.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12.28719px;
}

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}