@font-face {
    font-family: 'Roboto';
    src: url('../Content/Roboto/Roboto-Regular.ttf');
}
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
}
label{
    color:black;
}
.custom-loader {
    --r1: 154%;
    --r2: 68.5%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -125px;
    top: 50%;
    margin-top: -120px;
    background: radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%,#243361 80%), radial-gradient(var(--r1) var(--r2) at bottom,#243361 79.5%,#0000 80%), radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%,#243361 80%), #E4E4ED;
    background-size: 50.5% 220%;
    background-position: -100% 0%,0% 0%,100% 0%;
    background-repeat: no-repeat;
    animation: p9 4s infinite linear;
}

@keyframes p9 {
    33% {
        background-position: 0% 33%,100% 33%,200% 33%
    }

    66% {
        background-position: -100% 66%,0% 66%,100% 66%
    }

    100% {
        background-position: 0% 100%,100% 100%,200% 100%
    }
}
.navbar li {
    color: black;
}
.navbar a {
    color: #243361;
}
.full {
    color: #243361;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: 140px;
    font-family: 'Roboto', sans-serif;
}

.full {
    width: 100vw;
}
.loader-espol {
    background: url('Recursos/ESPOL_Loading_lightv2.gif') no-repeat transparent center;
    width: 100%;
    position: relative;
    height: 400px;
    background-size: contain;
}
.full-label {
    position: absolute;
    top: 80%;
    width: 100%;
}

#popup .modal-content {
    background: transparent; 
    border: none; 
    box-shadow: none;
}
@media (prefers-color-scheme: dark) {
    html [data-theme='dark'] body {
        background: black;
    }

    html[data-theme='dark'] .loader-espol {
        background: url('Recursos/ESPOL_Loading_darkv2.gif') no-repeat transparent center;
        background-size:contain;
    }
    html[data-theme='dark'] label{
        color:white;
    }

    html[data-theme='dark'] .custom-loader {
        --r1: 154%;
        --r2: 68.5%;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        margin-left: -125px;
        top: 50%;
        margin-top: -120px;
        background: radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%,#FDB029 80%), radial-gradient(var(--r1) var(--r2) at bottom,#FDB029 79.5%,#0000 80%), radial-gradient(var(--r1) var(--r2) at top,#0000 79.5%,#FDB029 80%), #Fff;
        background-size: 50.5% 220%;
        background-position: -100% 0%,0% 0%,100% 0%;
        background-repeat: no-repeat;
        animation: p9 4s infinite linear;
    }

    html[data-theme='dark'] .full, html[data-theme='dark'] .navbar li
    {
        color: white;
    }
    html[data-theme='dark'] .navbar a{
        color:#FDB029;
    }
}
h1, h4 {
    margin: auto;
}

/* Contenedor centrado en pantalla */
.loading-si {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; /* Ajusta según el tamaño de las imágenes */
    height: 100px;
    background-size: cover;
    animation: loadingAnimation 1.4s steps(28) infinite;
}

.loading-si-relative {
    position: relative;
    width: auto; /* Ajusta según el tamaño de las imágenes */
    height: auto;
    background-size: cover;
    animation: loadingAnimation 1.4s steps(28) infinite;
}

@keyframes loadingAnimation {
    0% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00000.png');
    }

    3.57% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00001.png');
    }

    7.14% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00002.png');
    }

    10.71% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00003.png');
    }

    14.28% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00004.png');
    }

    17.85% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00005.png');
    }

    21.42% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00006.png');
    }

    25% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00007.png');
    }

    28.57% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00008.png');
    }

    32.14% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00009.png');
    }

    35.71% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00010.png');
    }

    39.28% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00011.png');
    }

    42.85% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00012.png');
    }

    46.42% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00013.png');
    }

    50% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00014.png');
    }

    53.57% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00015.png');
    }

    57.14% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00016.png');
    }

    60.71% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00017.png');
    }

    64.28% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00018.png');
    }

    67.85% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00019.png');
    }

    71.42% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00020.png');
    }

    75% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00021.png');
    }

    78.57% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00022.png');
    }

    82.14% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00023.png');
    }

    85.71% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00024.png');
    }

    89.28% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00025.png');
    }

    92.85% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00026.png');
    }

    96.42% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00027.png');
    }

    100% {
        background-image: url('Recursos/loadingSi/foco animado (SI) 2_00000.png');
    }
}