/* ================================= */
/*        CHARGEMENT DU Réseau       */
/* ================================= */

.sysmi-loader {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:#050505;
    color:white;

}


.loader-circle {
    width:120px;
    height:120px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;

    border:4px solid transparent;
    background:
        linear-gradient(#050505,#050505) padding-box,
        linear-gradient(
            45deg,
            #ff00aa,
            #00ff88
        ) border-box;
    box-shadow:
        0 0 20px #ff00aa,
        0 0 40px #00ff88;
    animation:rotateCircle 3s linear infinite;
}


.loader-logo {
    width:130px;
    height:130px;
    object-fit:contain;
    animation:rotateLogo 3s linear infinite;
}


@keyframes rotateCircle {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@keyframes rotateLogo {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(-360deg);
    }
}


.sysmi-loader p {

    margin-top:30px;
    color:#aaa;
    animation:fade 1.5s infinite;
}


@keyframes fade {
    50% {
        opacity:.3;
    }
}



/* ================================= */
/*       CHARGEMENT D'UNE PAGE       */
/* ================================= */

.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    color:white;
    font-size:18px;
    font-weight:600;
    z-index:9999;
}



.dots {
    display:flex;
    gap:5px;
}


.dots i {
    width:8px;
    height:8px;
    background:#ff00aa;
    border-radius:50%;
    display:block;
    box-shadow:
        0 0 10px #ff00aa;
    animation:
        loadingDots 1.4s infinite ease-in-out;
}


.dots i:nth-child(2) {

    animation-delay:.2s;

    background:#00ff88;

    box-shadow:
        0 0 10px #00ff88;

}


.dots i:nth-child(3) {

    animation-delay:.4s;

}


@keyframes loadingDots {


    0%,80%,100% {

        transform:scale(.5);

        opacity:.4;

    }


    40% {

        transform:scale(1.2);

        opacity:1;

    }

}