.loader {
    width: 100vw;
    height: 100vh;
    background: #f8f8f8;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
}

    .loader span {
        width: 40px;
        height: 40px;
        border-radius: 32px;
        backface-visibility: hidden;
        position: absolute;
        animation-name: move;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 0.8);
        animation-iteration-count: infinite;
        animation-duration: 3s;
        top: calc(50% - 32px);
        left: calc(50% + 16px);
        transform-origin: -32px center;
    }

    .loader label {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        position: fixed;
        top: calc(50% + 70px);
        left: calc(50% - 70px);
        font-size: 20px;
    }

        .loader label b {
            color: #4ca5e0;
        }

    .loader span:nth-child(1) {
        background: rgba(38,76,128,0.1);
        animation-delay: -0.5s;
        opacity: 0;
    }

    .loader span:nth-child(2) {
        background: rgba(38,76,128,0.3);
        animation-delay: -1s;
        opacity: 0;
    }

    .loader span:nth-child(3) {
        background: rgba(38,76,128,0.5);
        animation-delay: -1.5s;
        opacity: 0;
    }

    .loader span:nth-child(4) {
        background: rgba(38,76,128,0.7);
        animation-delay: -2s;
        opacity: 0;
    }

    .loader span:nth-child(5) {
        background: rgba(38,76,128,0.9);
        animation-delay: -2.5s;
        opacity: 0;
    }

    .loader span:nth-child(6) {
        background: rgba(38,76,128,0.1);
        animation-delay: -3s;
        opacity: 0;
    }

    .loader.context {
        width: 300px;
        height: 250px;
        left: calc(50% - 150px);
        top: calc(50% - 125px);
        background: #fff;
        border: 1px solid #ccc;
    }

        .loader.context label::after {
            content: "Espere, por favor";
            display: block;
            font-size: 0.9rem;
            margin: -5px 0 0 0;
            text-align: center;
            width: 100%;
            color: #5c5c5c;
        }

.loader.context span{ top: calc(50% - 64px); }
.loader.context label{ top: calc(50% + 32px); }

@keyframes move {
    0% {
        transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
    }

    30% {
        opacity: 1;
    }

    100% {
        z-index: 10;
        transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
    }
}

@media (max-width: 1024px) {
    #FormInforme[action*="seleccion"] .panelClass2, #FormInforme[action*="avanzado"] .panelClass {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block;
        height: 100vh;
    }

    .panelClass2 + .panelClass[height="100%"] {
        border: 0 none;
        width: calc(100vw - 290px);
    }

    #FormInforme[action*="avanzado"] .panelClass + .panelClass {
        width: calc(100vw - 289px) !important;
        display: table-cell;
    }
}