:root {
    --bw-loading-background: #ffffff;
    --bw-loading-overlay: rgba(156, 157, 156, 0.16);
    --bw-loading-spinner-track: rgba(0, 174, 239, 0.15);
    --bw-loading-spinner-head: rgba(0, 174, 239, 0.8);
    --bw-loading-spinner-color: var(--mud-palette-primary, #004050);
}

.bw-preload-dark-mode {
    --bw-loading-background: var(--bw-navigation-background, #004050);
    --bw-loading-overlay: rgba(16, 24, 32, 0.78);
    --bw-loading-spinner-track: rgba(243, 247, 251, 0.18);
    --bw-loading-spinner-head: rgba(243, 247, 251, 0.84);
    --bw-loading-spinner-color: #f3f7fb;
}

body:has(#loadingScreen) {
    background-color: var(--bw-loading-background);
}

.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 60px;
    width: 60px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid var(--bw-loading-spinner-track);
    border-right: 6px solid var(--bw-loading-spinner-track);
    border-bottom: 6px solid var(--bw-loading-spinner-track);
    border-top: 6px solid var(--bw-loading-spinner-head);
    border-radius: 100%;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.spinner-overlay {
    background-color: var(--bw-loading-overlay);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index:10000;
}

.loading-screen {
    position: absolute;
    top: 30vh;
    width: 100%;
    text-align: center;
}

.loading-logo {
    width: 237px;
    height: 41px;
    margin-bottom: 5px;
}

.loading-logo-dark {
    display: none;
}

.bw-dark-mode .loading-logo-light,
.bw-preload-dark-mode .loading-logo-light {
    display: none;
}

.bw-dark-mode .loading-logo-dark,
.bw-preload-dark-mode .loading-logo-dark {
    display: inline-block;
}

.loading-spinner-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.loading-spinner {
    color: var(--bw-loading-spinner-color);
}