/* [data-bs-theme="dark"] .startup-loading-card {
    background: linear-gradient(60deg, #1a1a1a, #3d3d3d) !important;
} */

/* [data-bs-theme="dark"] .startup-loading-card-title,
[data-bs-theme="dark"] .startup-loading-card-desc {
    color: white;
} */

.startup-loading-card {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--viewport-height);
    width: 100vw;
    background: linear-gradient(60deg, #ffffff, #cbcbcb);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.theme--dark .startup-loading-card {
    background: linear-gradient(60deg, #1b1b1b, #282828);
}

.startup-loading-card.startup-center {
    height: 100dvh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.startup-loading-card-title {
    font-family: 'Cairo';
    font-weight: 600;
    padding: 10px;
    color: #1a1a1a;
    font-size: 4rem !important;
}

.startup-loading-card-desc {
    font-family: 'Cairo';
    font-weight: 400;
    font-size: 20px;
}

.loading-spinner {
    z-index: 100;
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: -0.125em;
    border: 4px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}
/* [data-bs-theme="dark"] .loading-spinner {
    color: white
} */
.loading-spinner {
    color: black
}
/* [data-bs-theme="light"] .loading-spinner {
    color: black
} */

.loading-progress {
    position: relative;
    display: block;
    width: 7rem;
    height: 7rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #ffffff;
        stroke-width: 0.7rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

/* [data-bs-theme="dark"] .loading-progress circle {
    stroke: #1a1a1a;
} */

/* .loading-progress circle:last-child {
    stroke: #1a1a1a;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
} */
.loading-progress circle:last-child {
    stroke: #1a1a1a;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
  }
  
/* [data-bs-theme="dark"] .loading-progress circle:last-child {
    stroke: #fff !important;
} */

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}