* {
    box-sizing: border-box;
    /* outline: 1px dashed #f00; */
}

html, body {
    margin: 0;
    width: 100vw;
    height: 100vw;
}
iframe {
    display: block; /* iframes are inline by default */
    background: #000;
    border: none; /* Reset default border */
    width: 100vw;
    height: 100vw;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #eeeeee;
    height:100%;
}

canvas {
    width: 100%;
    height: 100%;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

pre,
div.error {
    background-color: #e5e5e5;
    padding: 1rem;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    margin: 1rem 0;
    max-height: 250px;
}

    pre.fixed,
    div.error.fixed {
        height: 200px;
    }

code {
    background-color: #e5e5e5;
    display: inline-block;
    padding: 0px 6px;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

:root {
    --navbar-height: 70px;
    --footer-height: 40px;
    --container-main-height: calc(100vh - var(--navbar-height) - var(--footer-height));
}

html[data-bs-theme='dark'] {
    --bg-color-primary: #003f66;
    --bg-color-secondary: #2e3943;
    --bg-color-secondary-hover: #384552;
    --bg-color-secondary-active: #1d242a;
    --color-primary: #f8f9fa;
    --color-secondary: #f8f9fa;
}

html[data-bs-theme='light'] {
    --bg-color-primary: #005c94;
    --bg-color-secondary: #f8f9fa;
    --bg-color-secondary-hover: #edf0f2;
    --bg-color-secondary-active: #e1e6ea;
    --color-primary: white;
    --color-secondary: #003f66;
}

    html[data-bs-theme='dark'] .show-on-light-theme,
    html[data-bs-theme='light'] .show-on-dark-theme {
        display: none;
    }

.row-head {
    margin: 4rem 0;
}

.navbar {
    background-color: var(--bg-color-primary);
    min-height: var(--navbar-height);
    max-height: var(--navbar-height);
    color: var(--color-primary);
}

.container-main {
    min-height: var(--container-main-height);
    max-height: var(--container-main-height);
    overflow-y: auto;
}

.quick-link {
    cursor: pointer;
    text-decoration: none;
    background-color: var(--bg-color-secondary);
}

    .quick-link .card-body {
        color: var(--color-secondary);
    }

    .quick-link:hover {
        background-color: var(--bg-color-secondary-hover);
    }

    .quick-link:active {
        background-color: var(--bg-color-secondary-active);
    }

.footer-container {
    background-color: var(--bg-color-primary);
    min-height: var(--footer-height);
    max-height: var(--footer-height);
    color: var(--color-primary);
}