/* pendant le chargement du popup*/

.center-loader-popup {
    padding: 2rem 1rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%) scale(0);
    background: rgb(255, 255, 255);
    box-shadow: 0 1rem 4rem 0 rgba(0, 0, 0, 0.2);
    width: 20rem;
    z-index: 0;
    border-radius: 1rem;
    text-align: center;
    font-size: 1.4rem;
    line-height: normal;
    color:$color_red_normal;
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease-in;

    &.show{
        visibility: visible;
        opacity: 1;
        z-index: 20;
        transform: translate(-50%, -50%) scale(1);
    }

    & img {
        width: 15rem;
        border-radius: 1rem;
    }

    &.mini{ 
        width: 25rem;
        box-shadow: 0 1rem 6rem 0 rgba(0, 0, 0, 0.4);
        display: flex;
        flex-direction: row;
        justify-content: space-between !important;
        align-items: center;
        flex-wrap: nowrap;
        padding: 1rem  1rem  1rem  1rem;
        border: .1rem solid rgba(227, 52, 47, 0.1);

        .load-popup-box{
            position: relative;
            padding:2rem;
            border-color: $color_red_normal #ccc #ccc #ccc; 
            border-width: .6rem;
            border-style: solid;
            border-radius: 10rem;
            animation: rotateloading 1s linear infinite;
        }

        & img {
            display: none;
        }
    }

    & div:last-child{

        &::after{
            position: absolute;

            content: "...";
            font-size: 2.1rem;
            color:red;
            font-family: 800;
            margin-top: -.6rem;
            margin-left: .5rem;
            animation: chargementpoint 2s infinite;
        }
    }
}

@keyframes chargementpoint{
    0%,10%{
        content: "";
    }
    40%{
        content: ".";
    }
    60%{
        content: "..";
    }
    80%,100%{
        content: "...";
    }
}

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