/* LOADE FO PAGE SCREEN */
#load-screen {
       background: whitesmoke;
       position: fixed;
       z-index: 10000;
       top: 0px;
       width: 100%;
       height: 100vh;
}

/* HTML: <div class="loader"></div> */
#loading {
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
       bottom: 0;
       margin: auto;
       width: 60px;
       padding: 8px;
       aspect-ratio: 1;
       border-radius: 50%;
       background: blue;
       --_m:
              conic-gradient(#0000 10%, #000),
              linear-gradient(#000 0 0) content-box;
       -webkit-mask: var(--_m);
       mask: var(--_m);
       -webkit-mask-composite: source-out;
       mask-composite: subtract;
       animation: l3 1s infinite linear;
}

@keyframes l3 {
       to {
              transform: rotate(1turn)
       }
}


/* LOADER FILE UPLOAD */
#loaderUpload {
       width: 100%;
}

#loaderUpload #loaderProgress {
       display: flex;
       justify-content: center;
       gap: 0.3rem;
}

/* comment display none out test for displaying loader */
.loader-upload {
       display: none;
       text-align: center;
       width: 100%;
       margin: 0.5rem auto;
}

.loader-upload .uploading-text {
       animation: flash 2s infinite;
       color: var(--pallete11);
}

/* From Uiverse.io */
.loader-upload svg {
       width: 1.5rem;
       transform-origin: center;
       animation: rotate4 2s linear infinite;
}

.loader-upload circle {
       fill: none;
       stroke: hsl(214, 82%, 50%);
       stroke-width: 4;
       stroke-dasharray: 1, 200;
       stroke-dashoffset: 0;
       stroke-linecap: round;
       animation: dash4 1.5s ease-in-out infinite;
}

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

@keyframes dash4 {
       0% {
              stroke-dasharray: 1, 200;
              stroke-dashoffset: 0;
       }

       50% {
              stroke-dasharray: 90, 200;
              stroke-dashoffset: -35px;
       }

       100% {
              stroke-dashoffset: -125px;
       }
}

/* display progress bar */
.progress {
       min-width: 70%;
       height: 20px;
       background-color: #f3f3f3;
       border-radius: 0.5rem;
       overflow: hidden;
       margin-top: 0.2rem;
}

.progress-bar {
       height: 100%;
       background-color: #007bff;
       text-align: center;
       color: white;
       font-size: 0.9em;
       transition: width 0.2s;
}


@media screen and (min-width: 350px) and (max-width: 576px) {

       #loading {
              width: 250px;
              height: 250px;
              margin: 30% auto;
              background: url(../admin_assets/img/loader.gif);
              background-size: 10%;
              background-repeat: no-repeat;
              background-position: center;
       }

}