@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --primary-color: #1a1c20;
    --secondary-color: #bfbfbf;
    --tertiary-color: #0a0b0c;
}

html {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.20rem;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    color: var(--secondary-color);
}

@media only screen and (max-width: 768px) {
    html {
        font-size: 1rem;
        line-height: 1.25;
    }
}

    body {
        margin: 0;
    }

    article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
        display: block
    }

    aside, footer, header, main {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    a, .btn-link {
        color: #fafafa;
    }

        a:hover {
            color: #fafafa;
        }

    .span {
        outline: none;
    }

    .btn-primary {
        color: #fff;
        background-color: #1b6ec2;
        border-color: #1861ac;
    }

    .content {
        padding-top: 1.1rem;
    }

    .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;
        }

    .loader {
        background-color: var(--primary-color);
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .background,
    .spinner {
        position: absolute;
        display: inline-block;
        height: 100%;
        width: 100%;
    }

    .background {
        border-radius: 50%;
        background-image: linear-gradient(0deg, #0f1013, #252730);
        box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;
    }

    .logo {
        z-index: 2;
    }

    .spinner {
        border-radius: 50%;
        border-top: 3px solid var(--secondary-color);
        box-shadow: 0 -8px 8px var(--primary-color);
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    code {
        background: var(--secondary-color);
        color: var(--primary-color);
        page-break-inside: avoid;
        font-family: monospace;
        max-width: 100%;
        overflow: auto;
        padding: 1em 1.5em;
        display: block;
        word-wrap: break-word;
        unicode-bidi: isolate;
        white-space: pre;
        margin: 1em 0px;
    }

    pre {
        background: var(--secondary-color);
        color: var(--primary-color);
        page-break-inside: avoid;
        font-family: monospace;
        max-width: 100%;
        overflow: auto;
        padding: 1em 1.5em;
        display: block;
        word-wrap: break-word;
        unicode-bidi: isolate;
        white-space: pre;
        margin: 1em 0px;
    }