#loading { display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; background-color: #afafaf8a; z-index: 200000; opacity: 1; text-align: center; }

#loading > .loading-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

[id^=loading_] > .loading-content { position: relative; top: 50%; transform: translateY(-50%); }

.loading-content { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; }

.loading-spinner { width: 42px; height: 42px; border: 4px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: loading-spin .8s linear infinite; }

.loading-text { font-size: 18px; font-weight: 600; letter-spacing: 0; }

.loading-progress { position: relative; top: 52% !important; width: 100%; }

.loading-progress-bar { width: 200px; height: 2px; position: absolute; background: linear-gradient(90deg, purple 0%, white 0%); left: 50%; transform: translateX(-50%); }

.loading-progress-text { color: white; position: absolute; left: 50%; transform: translateX(-50%); }

[id^=loading_] { display: none; position: absolute; right: 0; top: 0px; width: 100%; height: 100%; background-color: #afafaf8a; z-index: 100000; opacity: 1; text-align: center; }

@keyframes loading-spin { to { transform: rotate(360deg); } }

@media screen and (max-width: 1024px) {
    
    #loading,[id^=loading_] { display: none; position: fixed; right: 0; width: 100%; background-color: #afafaf8a; z-index: 200000; opacity: 1; text-align: center; }

    #loading > .loading-content { top: 50%; }

    [id^=loading_] > .loading-content { top: 50%; }

}