.loader-footer {
    position: absolute;
    height: calc(100% - 3rem);
    width: 100%;
    display: none;

    .loader-inlog {
        position: absolute;
        display: block;
    }
}

.footer-detalhes {
    .loader-footer {
        height: 100%;
    }
}

.loader-inlog {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 99;
    align-items: center;
    justify-content: center;
    display: none;
    .socket {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50%;
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
        transform: rotate(90deg) scale(0.5);
    }
    .hex-brick {
        background: #0038a8;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 5px;
        border-radius: 50%;
        animation-name: fade-loading;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    .h2 {
        transform: rotate(60deg);
    }
    .h3 {
        transform: rotate(-60deg);
    }
    .gel {
        height: 30px;
        width: 30px;
        transition: all .3s;
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .gel.r1 .hex-brick {
        width: 15px;
        height: 15px;
    }
    .gel.r2 .hex-brick {
        width: 12px;
        height: 12px;
    }
    .gel.r3 .hex-brick {
        width: 7px;
        height: 7px;
    }
    .center-gel {
        margin-left: -16px;
        margin-top: -16px;
        animation-name: pulse-loading;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    .c1 {
        margin-left: -40px;
        margin-top: -12px;
    }
    .c2 {
        margin-left: -26px;
        margin-top: -36px;
    }
    .c3 {
        margin-left: 2px;
        margin-top: -36px;
    }
    .c4 {
        margin-left: 15px;
        margin-top: -12px;
    }
    .c5 {
        margin-left: -26px;
        margin-top: 12.5px;
    }
    .c6 {
        margin-left: 2px;
        margin-top: 13px;
    }
    .c7 {
        margin-left: -49px;
        margin-top: -32.5px;
    }
    .c8 {
        margin-left: 30px;
        margin-top: -32px;
    }
    .c9 {
        margin-left: -10px;
        margin-top: 36px;
    }
    .c10 {
        margin-left: -49px;
        margin-top: 13px;
    }
    .c11 {
        margin-left: 30px;
        margin-top: 14px;
    }
    .c12 {
        margin-left: -10px;
        margin-top: -55px;
    }
    .c13 {
        margin-left: -36px;
        margin-top: -55px;
    }
    .c14 {
        margin-left: 17px;
        margin-top: -55px;
    }
    .c15 {
        margin-left: -36px;
        margin-top: 36px;
    }
    .c16 {
        margin-left: 17px;
        margin-top: 36px;
    }
    .c17 {
        margin-left: -62px;
        margin-top: -10px;
    }
    .c18 {
        margin-left: 43px;
        margin-top: -10px;
    }
    .c19 {
        margin-left: -63px;
        margin-top: -99px;
    }
    .c20 {
        margin-left: 33px;
        margin-top: -99px;
    }
    .c21 {
        margin-left: 4px;
        margin-top: -74px;
    }
    .c22 {
        margin-left: -23px;
        margin-top: -75px;
    }
    .c23 {
        margin-left: -63px;
        margin-top: 69px;
    }
    .c24 {
        margin-left: 33px;
        margin-top: 69px;
    }
    .c25 {
        margin-left: 4px;
        margin-top: 55px;
    }
    .c26 {
        margin-left: -23px;
        margin-top: 56px;
    }
    .c27 {
        margin-left: -79px;
        margin-top: -15px;
    }
    .c28 {
        margin-left: -73px;
        margin-top: -30px;
    }
    .c29 {
        margin-left: -72px;
        margin-top: 16px;
    }
    .c30 {
        margin-left: 46px;
        margin-top: 38px;
    }
    .c31 {
        margin-left: -60px;
        margin-top: -53px;
    }
    .c32 {
        margin-left: -111px;
        margin-top: -15px;
    }
    .c33 {
        margin-left: 58px;
        margin-top: -30px;
    }
    .c34 {
        margin-left: 58px;
        margin-top: 16px;
    }
    .c35 {
        margin-left: -60px;
        margin-top: 38px;
    }
    .c36 {
        margin-left: 46px;
        margin-top: -53px;
    }
    .c37 {
        margin-left: 81px;
        margin-top: -15px;
    }
    .r1 {
        animation-name: pulse-loading;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: .2s;
    }
    .r2 {
        animation-name: pulse-loading;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: .4s;
    }
    .r3 {
        animation-name: pulse-loading;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: .6s;
    }
    .r1 > .hex-brick {
        animation-name: fade-loading;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: .2s;
    }
    .r2 > .hex-brick {
        animation-name: fade-loading;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: .4s;
    }
    .r3 > .hex-brick {
        animation-name: fade-loading;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: .6s;
    }
    @keyframes pulse-loading {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        50% {
            -webkit-transform: scale(0.01);
            transform: scale(0.01);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    @keyframes fade-loading {
        0% {
            background: #0038a8;
        }
        50% {
            background: #606060;
        }
        100% {
            background: #0038a8;
        }
    }
}

.pre-loader-inlog {
    @extend .loader-inlog;
    z-index: -1;
    display: block;
}
