/*
1. GENERAL
2. PRE LOADER
3. STATUS
4. MODELOS
*/

/* ---------------------------------- */
/* *            GENERAL             * */
/* ---------------------------------- */
* {
    box-sizing: border-box;
}

body {
    height: 100vh;
    background-image: url('../imagens/bg.webp');
}

.conteudo {
    height: 90%;
    display: flex;
    align-items: center;
}

.glassmorphism {
    background: rgba(1, 4, 46, 0.5);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.arquivos {
    width: 100%;
    background-color: #fff;
    border: solid 1px #555;
    border-radius: 5px;
}

/* ---------------------------------- */
/* *           PRE LOADER           * */
/* ---------------------------------- */
.loader_bg {
    position: fixed;
    z-index: 999999;
    background-color: #000324;
    width: 100%;
    height: 100%;
    /* filter: blur(5px) */
}

.loader {
    border: 0 solid transparent;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
}

.loader:before,
.loader:after {
    content: '';
    border: 1em solid #880650;
    border-radius: 50%;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader 1.6s linear infinite;
    opacity: 0;
    filter: blur(7px);
}

.loader:before {
    animation-delay: .6s;
}

@keyframes loader {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(.8);
        opacity: 0;
    }
}

.shake-bottom {
    -webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
    animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@-webkit-keyframes shake-bottom {

    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

@keyframes shake-bottom {

    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

/* ---------------------------------- */
/* *             STATUS             * */
/* ---------------------------------- */
.status {
    height: 4rem;
    border-bottom: solid 1px #6c757d;
    background: rgba(1, 4, 46, 0.5);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(10px);
}

.status .item-etapa {
    display: flex;
}

.status .item-etapa .icone {
    background-color: gray;
    color: #000;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    position: relative;
}

.status .item-etapa .icone.ativo {
    background-color: green;
    color: #fff;
}

.status .item-etapa .icone .yes,
.status .item-etapa .icone .no {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.status .item-etapa .icone .yes {
    display: none;
}

.status .item-etapa .icone .no {
    font-weight: 900;
    display: block;
}

.status .item-etapa .icone.checado .yes {
    display: block;
}

.status .item-etapa .icone.checado .no {
    display: none;
}

.status .item-etapa .texto {
    margin-left: 1rem;
    font-weight: 900;
    color: #fff;
}

/* ---------------------------------- */
/* *            MODELOS             * */
/* ---------------------------------- */
.modelo .modelo-conteudo .modelo-carrossel {
    display: flex;
    justify-content: center;
}

.modelo .modelo-conteudo .modelo-carrossel .modelo-form {
    position: absolute;
    top: 3px;
    left: 5px;
    z-index: 1;
    cursor: pointer;
}

.modelo .modelo-conteudo .modelo-carrossel .slick-slide {
    position: relative;
}

.modelo .modelo-conteudo .modelo-carrossel .slick-arrow {
    background-color: #0062cc;
    border-radius: 50%;
    z-index: 1;
    width: 30px;
    height: 30px;
    border: none;
}

.modelo .modelo-conteudo .modelo-carrossel .slick-prev {
    left: 0;
}
.modelo .modelo-conteudo .modelo-carrossel .slick-next {
    right: 0;
}
/* .modelo .modelo-conteudo .modelo-carrossel .slick-prev:before,
.modelo .modelo-conteudo .modelo-carrossel .slick-next:before {
    color: #fff;
} */

.modelo .modelo-conteudo .modelo-carrossel .slick-list {
    width: 95%;
}

.modelo .modelo-conteudo .modelo-carrossel .slick-list .slick-slide {
    display: flex;
    justify-content: center;
}

.modelo .modelo-conteudo .modelo-carrossel .slick-list .slick-slide img {
    max-width: 200px;
    cursor: grab;
}
.modelo .modelo-conteudo .modelo-carrossel .slick-list .slick-slide img:active {
    cursor: grabbing;
}
.modelo .modelo-conteudo .modelo-carrossel .slick-dots {
    bottom: -55px;
}

.modelo .modelo-conteudo .modelo-carrossel .slick-dots li button:before {
    color: #A25F49;
}