.loader-popup{
    position: fixed;
    padding: 1rem 1.5rem;
    top: -4rem;
    left: 50%;
    transform: translate(-50%, 0%);
    max-width: 30rem; // 30rem
    max-height:20rem;
    background: rgb(223, 79, 74);
    box-shadow: 0 1rem 4rem 0 $color_blue_normal_6;
    border-radius:1rem;
    visibility: hidden;
    z-index: 0;
    opacity: 0;
    transition:all .2s ease-in;

    @media all and (max-width: 500px) {
        width: 55%;
    }

    @media all and (max-width: 450px) {
        width: 60%;
    }

    @media all and (max-width: 420px) {
        width: 65%;
    }
    @media all and (max-width: 400px) {
        width: 70%;
    }

    @media all and (max-width: 350px) {
        width: 80%;
    }

    &.show{
        visibility: visible;
        z-index: 15;
        top: 2rem;
        opacity: 1;
    }


    & .title{
        color:rgb(255, 255, 255);
        text-align: center;
        font-size: 1.1rem;
        font-weight: 500;
        padding-left: 1rem;
    }

    & .iconbox{
        position: relative;
        overflow: hidden;
        width:3em;
        height:3rem;
        background: #eee;
        border-radius: 50rem;
        transition: all .2s linear;

        &:not(:nth-child(3)):before{
            position: absolute;
            content: "";
            top:0;
            left:0;
            width:100%;
            height:100%;
            border-color:$color_red_normal_4 $color_red_normal_4 $color_red_normal_4 $color_red_normal;
            border-width: .4rem;
            border-style: solid;
            border-radius: 4rem;
            animation: loader .6s linear infinite;
        }

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


        & i{
            font-size: 1.5rem;
            font-style: normal;

            &.fa-close{
                color: #444;
            }
        }

        &:nth-child(3){
            background: #fff;

            &:hover{
                background: $color_blue_normal_2;
                & i{
                    &.fa-close{
                        color: $color_blue_normal;
                    }
                }
            }
        }
    }
}