html, body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
}


.font-pacifica {
    font-family: pacifica-condensed, sans-serif !important;
    font-weight: 400 !important;
}

.loader {
    height: 40px;
    animation: l6 2s infinite linear;
    background: var(--c), var(--c), var(--c), var(--c);
    background-size: 33.4% 50%;
    aspect-ratio: 1.5;
    --c: no-repeat linear-gradient(#F7B267 0 0);
}

@keyframes l6 {
    0% {
        background-position: 0 0, 50% 0, 0 100%, 50% 100%
    }
    12.5% {
        background-position: 0 0, 100% 0, 0 100%, 50% 100%
    }
    25% {
        background-position: 0 0, 100% 0, 0 100%, 50% 0
    }
    37.5% {
        background-position: 0 0, 100% 0, 50% 100%, 50% 0
    }
    50% {
        background-position: 0 100%, 100% 0, 50% 100%, 50% 0
    }
    62.5% {
        background-position: 0 100%, 100% 0, 50% 100%, 0 0
    }
    75% {
        background-position: 0 100%, 100% 100%, 50% 100%, 0 0
    }
    87.5% {
        background-position: 0 100%, 100% 100%, 50% 0, 0 0
    }
    100% {
        background-position: 0 100%, 50% 100%, 50% 0, 0 0
    }
}


.loader-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: start;
    width: 100%;
    height: 100vh;
    padding-top: 20vh;
    background-color: #0E1621;
    gap: 2rem;
}

.loader-title {
    font-size: 3rem;
    color: rgba(255, 255, 255, 1);
}

.default-form-card {
    width: 100%;
    min-width: 300px;
    max-width: 523px;
    padding: 40px 32px 24px 32px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--mud-palette-white);
}

.nav-link {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 66px;
}


/* -------- MudBlazor overrides ---------*/
.field-no-outline .mud-input-outlined-border {
    border-width: 0 !important;
}

.mud-radio.mud-radio-content-placement-end.full-width {
    flex-grow: 1;
    width: 100%;

    .mud-radio-content {
        display: block;
        flex-grow: 1;
        width: 100%;
    }
}

.dark-label .mud-input-label {
    background-color: var(--mud-palette-background);
}

.transparent-label .mud-input-label {
    background-color: transparent;
}

.mud-breadcrumbs > .mud-breadcrumb-item:last-child > a {
    color: var(--mud-palette-white) !important;
}

/* ------- Custom colors --------*/

:root {
    --darker-purple: #28283A;
    --dark-purple: #2D2D4B;
    --bright-purple: #5B46FF;
    --medium-purple: #6E5CFE;
    --purple: #ACA2FF;
    --dark-yellow: #F39937;
    --yellow: #F7B267;
    --light-yellow: #FFD9A8;
    --dark-grey: #1D1D2C;
    --dark-grey-bg: #0E1621;
    --dark-grey-border: #33323E;

    --mud-palette-primary: var(--yellow) !important;
    --mud-palette-primary-darken: var(--dark-yellow) !important;
    --mud-palette-primary-lighten: var(--light-yellow) !important;
    --mud-palette-primary-text: var(--dark-grey) !important;
    --mud-palette-secondary: var(--purple) !important;
    --mud-palette-secondary-darken: var(--medium-purple) !important;
    --mud-palette-secondary-lighten: var(--bright-purple) !important;
    --mud-palette-background-grey: var(--dark-grey) !important;
    --mud-palette-surface: var(--dark-grey) !important;
    --mud-palette-appbar-background: var(--dark-grey) !important;
    --mud-palette-drawer-background: var(--dark-grey) !important;
    --mud-palette-background: var(--dark-grey-bg) !important;

}