/* Minification failed. Returning unminified contents.
(6848,43): run-time error CSS1030: Expected identifier, found '>'
(6848,45): run-time error CSS1030: Expected identifier, found '.'
(6848,50): run-time error CSS1031: Expected selector, found ')'
(6848,50): run-time error CSS1025: Expected comma or open brace, found ')'
 */

body#mvbroker::after {
    content: '';
    background: #1D1D1D;
    //background: linear-gradient(90deg, #121317 0%, #2e3560 90%, #44397a 100%);
    opacity: .7;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}



#mvbroker header .logo-geral img {
    width: 80%;
}





@media screen and (max-width: 1000px) {
}



.item.detalhes .imovel {
    display: flex;
    gap: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%;
}

.item.detalhes .imovel .imagem {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0,0,0, .05);
    flex-shrink: 0;
}

.item.detalhes .imovel .imagem .controles .imagens {
    display: none;
}

.item.detalhes .imovel .imagem .controles {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 90px;
}

.item.detalhes .imovel .imagem .controles .controle {
    background: rgba(0, 0, 0,.7);
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    transition: .2s ease-in-out;
}

.item.detalhes .imovel .imagem .controles .controle.left {
    transform: translateX(-15px);
}

.item.detalhes .imovel .imagem .controles .controle.right {
    transform: translateX(15px);
}


.item.detalhes .imovel .imagem .controles .controle:hover {
    opacity: .7;
}

.item.detalhes .imovel .imagem .controles .controle .icone {
    width: 15px;
    fill: #fff;
    flex-shrink: 0;
}

.item.detalhes .imovel .imagem .foto-container {
    height: 200px;
    width: 200px;
    overflow: hidden;
    border-radius: 10px;
}


.item.detalhes .imovel .informacoes {
    flex-grow: 1;
}


.item.detalhes .imovel .titulo {
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 25px;
}



.item.detalhes .imovel .container-campos {
    display: flex;
    gap: 10px;
}

.item.detalhes .imovel .campos {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.item.detalhes .imovel .campos .linha {
    flex-wrap: wrap;
    display: flex;
    gap: 15px;
}

.item.detalhes .imovel .campos .linha .campo .legenda {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 1px;
}

.item.detalhes .imovel .campos .linha .campo .valor {
    font-weight: 200;
    font-size: 11px;
    margin-top: 5px;
    color: grey;
    /*    white-space: nowrap;*/
}

.item.detalhes .imovel .campos .linha .campo .valor.nowrap {
    white-space: nowrap;
}



.item.detalhes .imovel .botoes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}





/*-----------------------------------*/

.item.detalhes .imovel .imagem {
    position: relative;
    overflow: hidden;
    width: 400px;
    min-height: 225px;
    cursor: zoom-in;
}



.item.detalhes .imovel .status {
    display: flex;
    margin-bottom: auto;
    flex-wrap: wrap;
    text-align: center;
    gap: 10px;
    /**/
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
}

.item.detalhes .imovel .status .tag {
    border-radius: 100px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid transparent;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    font-weight: 600;
    background-color: lightgrey;
}






.item.detalhes .imovel .carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.item.detalhes .imovel .carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* Initially hide all slides except the active one */
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    backface-visibility: hidden;
}

.item.detalhes .imovel .carousel-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Animation Classes */

@keyframes imovel_slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes imovel_slideOutLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes imovel_slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes imovel_slideOutRight {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

.item.detalhes .imovel .slide-in-right {
    animation: imovel_slideInRight 0.4s ease-in-out forwards;
}

.item.detalhes .imovel .slide-out-left {
    animation: imovel_slideOutLeft 0.4s ease-in-out forwards;
}

.item.detalhes .imovel .slide-in-left {
    animation: imovel_slideInLeft 0.4s ease-in-out forwards;
}

.item.detalhes .imovel .slide-out-right {
    animation: imovel_slideOutRight 0.4s ease-in-out forwards;
}

.item.detalhes .imovel .controle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 2em;
    color: rgba(255, 255, 255, 0.7);
    user-select: none;
    z-index: 3;
}

.item.detalhes .imovel .controle.left {
    left: 10px;
}

.item.detalhes .imovel .controle.right {
    right: 10px;
}




@media (max-width: 1000px) {
    #modal-image {
        max-width: 100% !important;
    }

    .modal-control {
        z-index: 9999;
    }


    .item.detalhes .imovel .titulo {
        margin-bottom: 15px;
    }

    .item.detalhes .imovel .imagem {
        flex-shrink: 0;
        width: 100%;
        height: 225px;
    }


    .item.detalhes .imovel {
        flex-direction: column;
        padding: 0px;
        gap: 15px;
    }

    .item.detalhes .imovel .campos {
        gap: 15px;
    }

    .item.detalhes .imovel .campos .linha {
        flex-wrap: wrap;
        gap: 15px;
    }
}

.abas {
    display: flex;
    margin-left: 25px;
    margin-right: 25px;
    overflow-x: auto;
}

.abas::-webkit-scrollbar {
    height: 5px;
    background-color: transparent;
}

.abas::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .1);
}

#corpo .menu ~ .container-pagina .abas {
    margin-left: 0px;
}

.abas:first-child {
    margin-top: 25px;
}

.abas .aba {
    width: 100%;
    padding: 25px;
    text-align: center;
    background-color: rgba(0, 0, 0, .1);
    transition: .2s ease-in-out;
    color: rgba(255, 255, 255, .7);
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid;
    border-color: transparent;
    cursor: pointer;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 75px;
}




.abas .aba:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, .05);
}

.abas .aba:hover {
    background-color: rgba(0, 0, 0, .2);
    border-right-color: transparent;
}

.abas .aba.ativa {
    color: #fff;
    border-color: rgba(255, 255, 255, .05);
    background-color: rgba(0, 0, 0, .3);
    /**/
    /*position: sticky;
    left: 0;
    right: 0;*/
}


.abas .aba .icone {
    height: 20px;
    width: 20px;
    margin-right: 10px;
    fill: rgba(255, 255, 255, .7);
    display: flex;
    flex-shrink: 0;
    justify-content: center;
}

.abas .aba.ativa .icone {
    fill: #fff;
}


.abas .aba .icone .emoji {
    display: flex;
    align-items: center;
    font-size: 21px;
    height: 100%;
    width: 100%;
    justify-content: center;
    line-height: 0;
}






.abas .aba .icone.grupo .icone {
    flex-shrink: 0;
    position: absolute;
    width: 15px;
    height: 15px;
}


.abas .aba .icone.grupo .icone:nth-child(1) {
    bottom: 7px;
    left: 0;
}


.abas .aba .icone.grupo .icone:nth-child(2) {
    bottom: -1px;
    left: -7px;
}

.abas .aba .icone.grupo .icone:nth-child(3) {
    bottom: -1px;
    left: 7px;
}


#corpo .menu ~ .container-pagina .secao-superior ~ .abas {
    margin-left: 0px;
    background-color: rgba(0, 0, 0, .2);
}


#corpo .menu ~ .container-pagina .secao-superior ~ .abas ~ .pagina {
    background: rgba(0, 0, 0, 0.45);
}




.abas .aba .numero {
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    flex-shrink: 0;
    letter-spacing: 1px;
    margin-top: 0px;
    background: rgba(255, 255, 255, .1);
    padding: 2px;
    padding-left: 5px;
    border-radius: 4px;
    padding-right: 4px;
    margin-top: 2px;
    text-align: center;
}

.abas .aba .numero.importante {
    background: #f44336;
    color: #fff;
}

.abas .aba.ativa .numero.importante {
    background-color: rgba(255, 255, 255, .05);
}

.abas .aba .numero.invisivel {
    opacity: .1;
}


.abas .aba .container-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.abas .aba .container-label .auxiliar {
    font-weight: 200;
    color: rgba(255, 255, 255, .7);
    margin-top: 5px;
    font-size: 12px;
    white-space: nowrap;
}

@media screen and (max-width: 1000px) {

    .abas:first-child {
        margin-top: 0px;
    }

    .abas {
        margin-left: 0px;
        margin-right: 0px;
    }

    .abas::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        background-color: transparent;
    }

    .abas::-webkit-scrollbar-thumb {
        background: transparent;
    }

    .abas .aba {
        height: 60px;
    }

    .abas .aba .icone {
        display: flex;
        height: 25px;
        width: 25px;
        margin-right: 0px;
        margin-top: 0px;
    }

    .abas .aba .container-label {
        display: none;
    }

    .abas .aba .numero {
        margin-left: 15px;
    }
}

.ajax {
}


.ajax:not(.carregado) .barra {
    height: 75px;
    /*    background-color: rgba(255, 255, 255, .05);*/
    background-color: rgba(0, 0, 0, .05);
    border-radius: 10px;
    animation: carregando 1s ease infinite alternate;
    transition: .2s ease-in-out;
    overflow: hidden;
    min-width: 200px;
    display: block;
}

.ajax:not(.carregado) .barra:not(:last-child) {
    margin-bottom: 10px;
}


.ajax:not(.carregado).html {
}

@keyframes carregando {
    0% {
        /*        background-color: rgba(255, 255, 255, .05);*/
        background-color: rgba(0, 0, 0, .05);
    }

    100% {
        /*        background-color: rgba(255, 255, 255, .1);*/
        background-color: rgba(0, 0, 0, .1);
    }
}


/*Bolinha correndo*/
.ajax:not(.carregado) .barra::after {
    content: "";
    width: 100px;
    height: 100%;
    position: absolute;
    left: 0;
    animation: andando .5s ease-in-out infinite;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .05), transparent);
}


@keyframes andando {
    0% {
        left: 0;
    }

    100% {
        left: calc(100% + 15px);
        left: 100%;
    }
}



.ajax.carregado {
}


.ajax.erro {
    background: #F44336;
    color: #fff;
    border-radius: 10px;
    padding: 10px;
}



.alerta-geral {
    display: flex;
    justify-content: center;
    padding: 25px;
    flex-direction: column;
}

#modal .alerta-geral {
    padding: 0px;
    width: 100%;
}

.alerta-geral .alerta:not(:last-child)
{
    margin-bottom: 10px;
}






.alerta-geral + .secao-superior {
    padding-top: 0px;
}

.alerta-geral .alerta {
    overflow: hidden;
    height: 50px;
    background-color: #d64946;
    display: flex;
    align-items: center;
    border-radius: 10px;
    width: 100%;
    color: #fff;
    fill: #fff;
    font-weight: 500;
}


.alerta-geral .alerta.cinza {
    background-color: #adadad;

}


.alerta-geral .alerta.cinza.ghost {
    background-color: transparent;
    color: grey;
    fill: grey;
    border: 2px solid;
}

.alerta-geral .alerta.cinza.transparente {
    background-color: transparent;
    color: grey;
    fill: grey;
   
}

.alerta-geral .alerta.cinza.transparente .container-esquerda {
    padding-left: 0px;
}



.alerta-geral .alerta.neutro .importante {
    color: #1d1d1f;
}


.alerta-geral .alerta.verde {
    background-color: #4caf50;
}

.alerta-geral .alerta.verde .importante {
    color: #4caf50;
}

.alerta-geral .alerta.amarelo {
    background-color: #ff9800;
}

.alerta-geral .alerta.amarelo .importante {
    color: #ff9800;
}


.alerta-geral .alerta.roxo {
    background-color: #7d21de;
}

.alerta-geral .alerta.roxo .importante {
    color: #7d21de;
}



.alerta-geral .alerta.roxo.ghost {
    background-color: transparent;
    color: #7d21de;
    fill: #7d21de;
    border: 2px solid;
}



.alerta-geral .alerta.neutro {
    color: #1d1d1f;
    fill: #1d1d1f;
    background-color: rgba(0, 0, 0, .05);
}

.alerta-geral .alerta.neutro.transparente {
    background-color: transparent;
    padding: 0px;
}

.alerta-geral .alerta.neutro.ghost {
    background-color: transparent;
    border: 1px solid rgba(0,0,0, .1);
}



.alerta-geral .alerta.laranja {
    background-color: #e77a1d;
}


.alerta-geral .alerta.laranja.ghost {
    background-color: transparent;
    color: #e77a1d;
    fill: #e77a1d;
    border: 2px solid;
}









.container-esquerda {
    display: flex;
    align-items: center;
    height: 50px;
    padding-left: 25px;
    padding-right: 25px;
}

.alerta-geral .alerta .container-esquerda > .icone {
    height: 20px;
    width: 20px;
    fill: inherit;
    display: block;
    flex-shrink: 0;
}

.alerta-geral .alerta .container-esquerda > .label {
    margin-left: 10px;
    line-height: 24px;
}



.alerta-geral .alerta .importante {
    background: rgba(255,255,255, .9);
    color: #d64946;
    padding: 5px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 4px;
    font-weight: 500;
    margin-left: 2px;
    margin-right: 2px;
}


.alerta-geral .container-direita {
    margin-left: auto;
    margin-left: auto;
    background: rgba(255, 255, 255, .05);
    padding-left: 25px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 25px;
}

.alerta-geral .container-direita .principal {

    margin-left: auto;
    font-weight: 600;
}

.alerta-geral .container-direita .secundario {
    font-weight: 100;
}

.alerta-geral .container-direita a {
    transition: .2s ease-in-out;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alerta-geral .container-direita a:not(:last-child) {
    margin-right: 25px;
    padding-right: 25px;
    border-right: 1px solid rgba(255, 255, 255, .05);
}



.alerta-geral .container-direita a:hover {
    opacity: .8;
}



@media screen and (max-width: 1000px) {

    .alerta-geral {
        padding: 0px;
        padding-bottom: 5px;
    }

    .alerta-geral .alerta {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }

    .alerta-geral .alerta:not(:last-child) {
        margin-bottom: 5px;
    }



    .alerta-geral .alerta .container-esquerda > .icone {
        height: 25px;
        width: 25px;
    }

    .alerta-geral .alerta .container-esquerda > .label {
        margin-left: 15px;
    }

    .alerta-geral .container-direita {
        margin-left: 0px;
        margin-top: 15px;
        border-radius: 10px;
        width: 100%;
        text-align: center;
        padding: 0;

    }
    
    .alerta-geral .container-direita a {
        width: 100%;
    }

    .alerta-geral .container-direita .principal {
        margin-left: 0px;
    }

    .alerta-geral .container-direita a:not(:last-child) {
        margin-right: 0px;
        padding-right: 0px;
    }

    .alerta-geral .alerta .importante {
        padding: 0px;
        padding-left: 3px;
        padding-right: 3px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .container-esquerda {
        padding: 0;
    }
}

@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */



@keyframes press {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(.95, .95, .95);
        transform: scale3d(.95, .95, .95);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes press-light {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(.98, .98, .98);
        transform: scale3d(.98, .98, .98);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


.press {
    -webkit-animation-name: press;
    animation-name: press;
}

.press-light {
    -webkit-animation-name: press-light;
    animation-name: press-light;
}


@-webkit-keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

@-webkit-keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}



@-webkit-keyframes pulse-light {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.02, 1.02, 1.02);
        transform: scale3d(1.02, 1.02, 1.02);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse-light {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.02, 1.02, 1.02);
        transform: scale3d(1.02, 1.02, 1.02);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse-light {
    -webkit-animation-name: pulse-light;
    animation-name: pulse-light;
}




@-webkit-keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

@-webkit-keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@-webkit-keyframes jello {
    from, 11.1%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

@keyframes jello {
    from, 11.1%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center;
}

@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.heartBeat {
    -webkit-animation-name: heartBeat;
    animation-name: heartBeat;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

.bounceOut {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
    from {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    from {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.flipOutY {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

@keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

@keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

@keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: hinge;
    animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }

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

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }

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

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

@keyframes rollOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.delay-05s {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
}

.animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}

.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
    .animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
}

.btn-container {
    display: flex;
    align-items: center;
    gap: 25px;
}

.btn-container.coluna {
    flex-direction: column;
}


.btn-container.direita {
    justify-content: flex-end;
}

.btn-container.centro {
    justify-content: center;
}



.btn-container .campo.direita {
    text-align: right;
}
.btn-container .campo.centro{
    text-align: center;
}

.btn-container .auto {
    margin-left: auto;
}


.btn-container .campo .label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: grey;
    margin-bottom: 5px;
}

.btn-container .campo .inp {
    color: #da6601;
    font-weight: 400;
    width: 100%;
    border: 0px;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
    background-color: transparent;
    height: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    transition: .2s ease-in-out;
    min-width: 200px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
}

.btn-container .campo .inp:focus {
    outline: none;
}




.btn {
    white-space: nowrap;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    transition: .2s ease-in-out;
    cursor: pointer;
    padding-left: 25px;
    padding-right: 25px;
    height: 46px;
    margin-bottom: 4px;
}


.btn.inativo {
    pointer-events: none;
    opacity: .7;
}


.btn.ghost,
.btn.label {
    margin-bottom: 0px;
}


.btn.ghost {
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
    border: 2px solid;
}

.btn.ghost:hover {
    box-shadow: 0 40px 29px -19px rgba(0, 0, 0, .1);
}


.btn.importante {
    font-weight: 500;
}

.btn:hover {
    transform: translateY(-5px);
}

.btn.redondo {
    border-radius: 100px;
    padding-left: 50px;
    padding-right: 50px;
}

.btn.mini {
    zoom: .8;
    font-weight: 500;
}

.btn.mini.ghost {
    margin-top: 0px;
}

.btn.mini.label {
    margin-top: 0px;
    padding: 0px;
    height: auto;
}

.btn.mini.label:hover {
    transform: none;
    opacity: .7;
}




.btn.label + .btn.label {
    padding-left: 0px;
}



.btn.laranja:not(.label):not(.ghost),
.pagina-detalhes .caixa > .btn-container .btn.laranja:not(.label):not(.ghost) {
    color: #fff;
    fill: #fff;
    background-color: #e77a1d;
    box-shadow: 0 4px 0 0 #d76400;
}

.btn.laranja:not(.label):not(.ghost):hover {
    color: #fff;
    fill: #fff;
    background-color: #e77a1d;
    box-shadow: 0 40px 29px -19px #d76400;
}


.btn.laranja.ghost, .btn.laranja.label {
    color: #e77a1d;
    fill: #e77a1d;
}




.btn.cadastrar {
    color: #fff;
    fill: #fff;
    background-color: rgba(255, 255, 255, .05);
    height: 50px;
    margin-top: 0px;
}


.btn.cadastrar:hover {
    color: #ef8933;
    fill: #ef8933;
}






.btn.vermelho:not(.ghost):not(.label) {
    color: #fff;
    fill: #fff;
    background-color: #F44336;
    box-shadow: 0 4px 0 0 #c31f14;
}

.btn.vermelho:not(.ghost):not(.label):hover {
    box-shadow: 0 40px 29px -19px #c31f14;
}


.btn.vermelho.ghost, .btn.vermelho.label {
    color: #F44336;
    fill: #F44336;
}




.btn.cinza:not(.ghost):not(.label) {
    color: #fff;
    fill: #fff;
    background-color: darkgrey;
    box-shadow: 0 4px 0 0 grey;
}

.btn.cinza:not(.ghost):not(.label):hover {
    box-shadow: 0 40px 29px -19px grey;
}

.btn.cinza.ghost, .btn.vermelho.label {
    color: rgba(0,0,0, .4);
    fill: rgba(0,0,0, .4);
}


.btn.verde {
    color: #fff;
    fill: #fff;
    background-color: #4caf50;
    box-shadow: 0 4px 0 0 #368739;
}

.btn.verde:hover {
    box-shadow: 0 40px 29px -19px #368739;
}



.btn.rosa {
    color: #fff;
    fill: #fff;
    background-color: #e91e63;
    box-shadow: 0 4px 0 0 #b8003e;
}

.btn.rosa:hover {
    box-shadow: 0 40px 29px -19px #b8003e;
}


.btn.roxo {
    color: #fff;
    fill: #fff;
    background-color: #7d21de;
    box-shadow: 0 4px 0 0 #561798;
}

.btn.roxo:hover {
    box-shadow: 0 40px 29px -19px #561798;
}



.btn.neutro:not(.ghost) {
    background-color: rgba(0, 0, 0, .05);
    color: #1d1d1f;
    fill: #1d1d1f;
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
}

.btn.neutro:not(.ghost):hover {
    box-shadow: 0 40px 29px -19px rgba(0, 0, 0, .1);
}

.btn.neutro.ghost {
    border-color: rgba(0,0,0, .1);
    background-color: transparent;
    box-shadow: none;
    /*height: 50px;*/
    /*margin-top: 0px;*/
    color: rgba(0,0,0, .7);
    fill: rgba(0,0,0, .5);
}

.btn.neutro.ghost:hover {
    box-shadow: 0 40px 29px -19px rgba(0, 0, 0, .05);
    
}



.btn .icone {
    height: 20px;
    width: 20px;
    flex-shrink: 0;
    /*display: block;*/
    /**/
    display: flex;
    align-items: center;
    justify-content: center; /*Pra centralizar o icone..*/
    /**/
}

.btn .icone .emoji {
    font-size: 21px; /* 21px - 24px */
    display: flex;
    align-items: center;
    justify-content: center;
}


.btn-flecha {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    fill: #fff;
    cursor: pointer;
    transition: .2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}




.btn-flecha:hover {
    opacity: .7;
}

.btn-flecha .icone-flecha {
    height: 15px;
    width: 15px;
    display: flex;
}


.btn-flecha.direita {
    transform: rotate(-90deg);
}

.btn-flecha.direita-cima {
    transform: rotate(-135deg);
}


.btn-flecha .icone {
    height: 29px;
    width: 25px;
    fill: #fff;
    margin-left: 1px;
}



.btn-auxiliar {
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .05);
    border-radius: 100%;
    fill: grey;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.btn-auxiliar:hover {
    fill: #1a1a1a;
}

.btn-auxiliar .icone  {
    flex-shrink: 0;
    height: 20px;
    width: 20px;
}

.btn-auxiliar .icone {

}


.btn-cancelar {
    white-space: nowrap;
    font-weight: 100;
    transition: .2s ease-in-out;
}

.btn-cancelar:hover {
    opacity: .8;
}



@media screen and (max-width: 1000px) {


    .btn-container {
        flex-direction: column;
        gap: 10px;
    }

    .btn {
        height: 56px;
    }

    .btn:hover {
        transform: none !important;
    }

    .btn .icone {
        height: 25px;
        width: 25px;
    }


    .btn-auxiliar {
        height: 60px;
        width: 60px;
    }

    .btn-flecha {
        height: 45px;
        width: 45px;
    }

    .pagina-detalhes .fixo.baixo .btn-container .btn.label:not(:last-child) {
        margin-bottom: 0px;
    }


    .btn.label + .btn.label {
        padding-left: 25px;
    }

    .btn.label ~ .btn.label {
        margin-bottom: 0px;
    }
}

.cabecalho-item {
    display: flex;
    align-items: center;
}


.cabecalho-item .foto-container {
    height: 50px;
}



.cabecalho-item .foto-container.invertido {
    mix-blend-mode: difference;
    /*filter: grayscale(1);*/
    filter: hue-rotate(180deg);
}

.cabecalho-item .foto-container.direita {
    margin-left: auto;
}


.cabecalho-item .foto-container img {
    height: 100%;
}

.cabecalho-item .simbolo {
    height: 50px;
    width: 50px;
    border: 2px solid;
    color: #f89318;
    border-radius: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.cabecalho-item .coluna:not(:first-child) {
    margin-left: 25px;
}



.cabecalho-item .coluna.borda {
    padding: 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cabecalho-item .coluna > div:not(:first-child):not(.tag) {
    margin-top: 5px;
}

.cabecalho-item .coluna.direita {
    z-index: 5;
    text-align: right;
}

.cabecalho-item .coluna.direita.auto {
    margin-left: auto;
}

.cabecalho-item .coluna .label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: grey;
    font-weight: 200;
}

.cabecalho-item .coluna .valor {
    font-weight: 600;
    margin-top: 5px;
}

.cabecalho-item .coluna .tag {
    margin-top: 0px;
    border-radius: 10px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.cabecalho-item .coluna .tag.menor {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
}


@media screen and (max-width: 1000px)
{
    .cabecalho-item {
        flex-wrap: wrap;
    }

    .cabecalho-item .coluna.direita.auto {
        margin-left: 0px;
        margin-top: 25px;
    }
}
.cabecalho-pagina {
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    padding-bottom: 25px;
    margin-bottom: 25px;
    margin-top: 50px;
    width: 100%;
}

.controle-pagina ~ .cabecalho-pagina {
    margin-top: 25px;
}

.cabecalho-pagina:first-child {
    margin-top: 15px;
}


.cabecalho-pagina .indicadores {
    margin-top: 25px;
}

.cabecalho-pagina .indicadores ~ .indicadores {
    margin-top: 10px;
}



.cabecalho-pagina .dot {
    height: 7px;
    width: 7px;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 100%;
    margin-left: 7px;
    margin-right: 7px;
    background-color: rgba(255, 255, 255, .3);
}



.cabecalho-pagina .container-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
}


.cabecalho-pagina .container-titulo > a {
    display: flex;
}

.cabecalho-pagina .container-titulo > a .icone {
    font-size: 24px;
}


.cabecalho-pagina .container-titulo > h1 {
    /*    line-height: 31px;*/
}

.cabecalho-pagina .container-titulo > h2 {
    /*    line-height: 21px;*/
}

.cabecalho-pagina .container-titulo > h3 {
    /*    line-height: 19px;*/
}

.cabecalho-pagina .container-titulo > h4 {
    /*    line-height: 16px;*/
}

.cabecalho-pagina .container-titulo > h5 {
    /*    line-height: 12px;*/
}


.cabecalho-pagina .container-titulo .btn-container {
    margin-left: auto;
}


.cabecalho-pagina .container-titulo .btn-container .btn {
    margin-bottom: 4px;
}

.cabecalho-pagina .container-titulo .btn-container .btn.ghost {
    height: 50px;
    margin-bottom: 0px;
}




@media screen and (max-width: 900px) {
    .cabecalho-pagina {
        margin-top: 30px;
        margin-bottom: 15px;
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        padding-top: 0px;
    }



    .cabecalho-pagina:first-child {
        margin-top: 25px; /* + 5px do padding da pagina = 30px */
    }


    .cabecalho-pagina .indicadores {
        margin-top: 15px;
        flex-direction: column;
    }

    .cabecalho-pagina .indicadores .indicador {
        flex-direction: row-reverse;
        justify-content: flex-end;
        padding: 15px;
        min-height: 30px;
        display: flex;
        align-items: center;
    }

    .cabecalho-pagina .indicadores .indicador .valor {
        margin-left: auto;
    }

    .cabecalho-pagina .indicadores .indicador .label {
        margin-top: 0px;
    }

    .cabecalho-pagina .indicadores .indicador:not(:last-child) {
        margin-right: 0px;
        margin-bottom: 5px;
    }



    .cabecalho-pagina .container-titulo {
        align-items: center;
    }

    .cabecalho-pagina .container-titulo .btn-container .btn:not(:last-child) {
        margin-right: 5px;
    }

    .cabecalho-pagina .container-titulo .btn-container .btn .label {
        display: none;
    }

    .cabecalho-pagina .container-titulo .btn-container .btn .icone {
        margin-right: 0px;
    }
}












/*----*/


.pagina#agenda {
    flex-direction: column;
}


#calendario {
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    color: #1a1a1a;

    transition: .1s ease-in-out;
}




#calendario .linha {
    display: flex;
    width: 100%;
}

#calendario .linha.horario {
    transition: height .1s ease-in-out;
    /*    height: 50px;
    overflow: hidden;*/
    height: 100px;

}

#calendario .linha.horario .primeira-coluna .label {
/*    transform: translateY(25px);*/
}

/*#calendario .linha.horario:has(+ .linha:hover),
#calendario .linha.horario:hover + .linha,
#calendario .linha.horario:hover {
    height: 100px;
    overflow: initial;
}*/

/*#calendario .linha.horario:has(+ .linha:hover) .primeira-coluna .label,
#calendario .linha.horario:hover + .linha, #calendario .linha.horario:has(+ .linha:hover) .primeira-coluna .label,
#calendario .linha.horario:hover + .linha .primeira-coluna .label,
#calendario .linha.horario:hover .primeira-coluna .label {
    transform: none;
}*/



#calendario .linha .primeira-coluna {
    width: 50px;
    flex-shrink: 0;
    transition: border-top-color .1s ease-in-out;
}



/*LABEL DO HORÁRIO - CELULA (+ TRACINHO DO HORARIO)*/
#calendario .linha.horario .primeira-coluna {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-top: 1px solid rgba(0,0,0, .1);
}

/*LABEL DO HORÁRIO - TEXTO*/
#calendario .linha.horario .primeira-coluna .label {
    margin-top: -9px;
    background-color: #fff;
    padding-right: 10px;
    color: rgba(0,0,0,.7);
    transition: .1s ease-in-out;
}

/* LINHA HOVER - LABEL DO HORARIO*/
#calendario .linha:hover.horario .primeira-coluna .label {
    color: #1cc3ec;
    font-weight: 600;
}



#calendario .linha .dia {
    width: 100%;
}

/*CELULA DO DIA OFICIAL*/
#calendario .linha.horario .dia {
    z-index: 1;
    height: 100px;
    border-top: 1px solid rgba(0,0,0, .1);
    border-left: 1px solid rgba(0,0,0, .1);
    display: flex;
    overflow: hidden;
    flex-grow: 0;
    transition: border-top-color .1s ease-in-out;
}

/*LINHA HOVER - DIA */
#calendario .linha:hover.horario .dia,
#calendario .linha:hover.horario .primeira-coluna {
    border-top-color: #1cc3ec;
    border-top-width: 2px;
}


/*DIA HOJE*/
#calendario .linha.horario .dia.hoje {
    background-color: #fdede1;
}

/* DIA HOJE - HORARIO AGORA*/
#calendario .linha.horario.agora .dia.hoje {
    background-color: #f6be8f;
}





/* DIA HOVER */
#calendario .linha.horario .dia:hover {
    overflow: visible;
    z-index: 10;
    flex-grow: 1;
}

#calendario .linha.horario .dia.vazio:hover {
    box-shadow: inset 0px 0px 6px -1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}


/* DIA HOVER - Alinhamento da quarta (centro) */
#calendario .linha.horario .dia:hover:nth-child(4) {
    justify-content: center;
}

/* DIA HOVER - Alinhamento da qui, sex, sab, dom (direita) */
#calendario .linha.horario .dia:hover:nth-child(5),
#calendario .linha.horario .dia:hover:nth-child(6),
#calendario .linha.horario .dia:hover:nth-child(7),
#calendario .linha.horario .dia:hover:nth-child(8) {
    justify-content: flex-end;
}


/*DESCRICAO DO DIA*/
#calendario .linha.horario .dia .descricao {
    position: absolute;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    transition: .1s ease-in-out;
    background: rgba(255,255,255, .7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 5px;
    color: #1f1f1f;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-weight: 600;
    display: flex;
    align-items: center;
    height: 55px;
    top: -56px;
    padding-right: 10px;
    padding-left: 10px;
}

#calendario .linha.horario .dia .descricao .btn {
    z-index: 15;
    margin-left: 25px;
}


#calendario .linha.horario .dia .descricao .horario {
    background: #1cc3ec;
    color: #fff;
    padding: 5px;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 4px;
    margin-left: 1px;
}



#calendario .linha.horario .dia:nth-child(4) .descricao {
    left: auto;
    right: auto;
}

/* DIA HOVER - Alinhamento da qui, sex, sab, dom (direita) */
#calendario .linha.horario .dia:nth-child(5) .descricao,
#calendario .linha.horario .dia:nth-child(6) .descricao,
#calendario .linha.horario .dia:nth-child(7) .descricao,
#calendario .linha.horario .dia:nth-child(8) .descricao {
    right: 0;
    left: auto;
}

/* DIA HOVER DESCRICAO DO DIA*/
#calendario .linha.horario .dia:hover .descricao {
    opacity: 1;
}



#calendario .linha.horario .dia.vazio .descricao {
    top: -25px;
    width: 100%;
    height: calc(100% + 25px);
    justify-content: center;
    flex-direction: column;
}

#calendario .linha.horario .dia.vazio .descricao .label {
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 4px;
}

#calendario .linha.horario .dia.vazio .descricao .btn {
    margin-left: 0px;
    margin-top: 48px;
    flex-shrink: 0;
}


/* EVENTOS */
#calendario .linha.horario .dia .eventos {
    padding: 5px;
    display: flex;
    justify-content: inherit; /* Aqui ele vai puxar o alinhamento do .dia */
    transition: width .1s ease-in-out;
    position: absolute;
    height: 100%; /*Isso faz com que os eventos de uma hora nao enconstem na borda de baixo, e os eventos com mais encostem, mostrando que são mais longos.*/
    width: 100%;
    opacity: .7;
    transition: .1s ease-in-out;
    border-radius: 4px;
}


/* DIA HOVER - EVENTOS */
#calendario .linha.horario .dia:hover .eventos {
    opacity: 1;
}

/* DIA HOVER - EVENTOS - Expansível (mais de um evento)*/
#calendario .linha.horario .dia:hover .eventos {
    width: auto;
    width: max-content;
    min-width: 100%;
    background: rgba(255,255,255, .7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* Evento */
#calendario .linha.horario .dia .evento {
    background-color: lightgrey;
    height: 100%;
    width: auto;
    flex-grow: 1;
    padding: 10px;
    z-index: 1;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.1s ease-in-out, padding 0s;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 4px;
    overflow: hidden;
    background-color: #08ace3;
    color: #fff;
}

/*Faz com que quando o calendario está todo fechado, um evento que seja ex. 9:30 não fique escondido. Porque o 30 empurra pra baixo.*/
#calendario .linha.horario:not(:hover) .dia .evento {
    margin-top: 0px !important;
}


#calendario .linha.horario .dia .evento:not(:last-child) {
    margin-right: 5px;
}





#calendario .linha.horario .dia .evento.segundo-plano {
    opacity: .3;
}

/*Evento com problema*/
#calendario .linha.horario .dia .evento.problema {
    opacity: .2;
}

#calendario .linha.horario .dia .evento.problema:hover {
    opacity: initial;
}



#calendario .linha.horario .dia .evento.destaque {
    outline: 4px solid yellow;
}


/*Evento com problema*/
#calendario .linha.horario .dia .evento.cancelado {
    opacity: .3;
}



#calendario .linha.horario .dia .evento .aviso {
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: 8px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .05);
    background-color: rgba(0,0,0, .3);
}

#calendario .linha.horario .dia .evento .aviso:not(:first-child) {
    margin-top: 10px;
}



#calendario .linha.horario .dia .evento .aviso.neutro {
    background-color: #e77a1d;
}

#calendario .linha .dia .evento .aviso.vermelho {
    background-color: #f44336;
}

#calendario .linha .dia .evento .aviso.verde {
    background-color: #4caf50;
}







/* DIA HOVER: Evento */
#calendario .linha.horario .dia:hover .evento {
    overflow: visible;
}





/* DIA HOVER: Extensao */
#calendario .linha.horario .dia:hover .evento .extensao {
    display: block;
}






/* EVENTO HOVER */
#calendario .linha.horario .dia .evento:hover {
    z-index: 5;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}








#calendario .linha.horario .dia .evento .t1 {
    font-weight: 600;
}

#calendario .linha.horario .dia .evento .nowrap {
    white-space: nowrap;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
}

#calendario .linha.horario .dia .evento .t2 {
    font-weight: 200;
    margin-top: 3px;
}

#calendario .linha.horario .dia .evento .legenda {
    opacity: .7;
    font-size: 9px;
}

/* SERVE PARA QUANDO NÃO TEM O <hr> */
#calendario .linha.horario .dia .evento .legenda + .t1 {
    margin-top: 10px;
}

#calendario .linha.horario .dia .evento hr {
    border: none;
    height: 1px;
    background-color: rgba(255,255,255, .1);
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

#calendario .linha.horario .dia .evento .extensao {
    background-color: inherit;
    background-color: rgba(0,0,0, .7);
    background-color: rgba(255,255,255, .9);
    color: #1f1f1f;
    border: 1px solid rgba(0,0,0, .05);
    margin-top: 10px;
    padding: 5px;
    border-radius: 4px;
    display: none;
}








/*----------------------------------------------------*/
/*LABEL DIA GRANDÃO*/
#calendario .cabecalho .titulo {
    text-align: center;
    padding-bottom: 25px;
}

#calendario .cabecalho .titulo.hoje {
    color: #ef8933;
}


#calendario .cabecalho .titulo .semana {
    color: rgba(0,0,0,.7);
    text-transform: uppercase;
}


#calendario .cabecalho .titulo .data {
    font-weight: 700;
    font-size: 32px;
    margin-top: 5px;
}




body.chatgpt.pensando {
    overflow: hidden;
    pointer-events: none;
}

body.chatgpt.pensando::after {
    content: '';
    opacity: .7;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;
    animation: chatgpt-pensando-body 1s ease-in-out infinite alternate;
    z-index: 999999999999;
    
}


@keyframes chatgpt-pensando-body {
    0% {
        box-shadow: inset -50px 0px 50px 0px #7d21de, inset 0px -50px 50px 0px #e91e63, inset 50px 0px 50px 0px #e77a1d, inset 0px 50px 50px 0px #08ace3;
        opacity: .7;
    }

    25% {
        box-shadow: inset -50px 50px 50px 0px #7d21de, inset -50px -50px 50px 0px #e91e63, inset 50px -50px 50px 0px #e77a1d, inset 50px 50px 50px 0px #08ace3;
        opacity: .65;
        
    }

    50% {
        box-shadow: inset 0px 50px 50px 0px #7d21de, inset -50px 0px 50px 0px #e91e63, inset 0px -50px 50px 0px #e77a1d, inset 50px 0px 50px 0px #08ace3;
        opacity: .6;
    }

    75% {
        box-shadow: inset 50px 50px 50px 0px #7d21de, inset -50px 50px 50px 0px #e91e63, inset -50px -50px 50px 0px #e77a1d, inset 50px -50px 50px 0px #08ace3;
        opacity: .55;
    }

    100% {
        box-shadow: inset 50px 0px 50px 0px #7d21de, inset 0px 50px 50px 0px #e91e63, inset -50px 0px 50px 0px #e77a1d, inset 0px -50px 50px 0px #08ace3;
        opacity: .5;
    }
}



body.chatgpt.pensando header {

    animation: chatgpt-pensando-header 2s ease-in-out infinite alternate;
}


@keyframes chatgpt-pensando-header {

    0% {
        box-shadow: -15px 0px 15px 0px #7d21de, /* Top-left corner: Violet */
        0px -15px 15px 0px #e91e63, /* Top-right corner: Pink */
        15px 0px 15px 0px #e77a1d, /* Bottom-left corner: Orange */
        0px 15px 15px 0px #08ace3; /* Bottom-right corner: Blue */
    }

    25% {
        box-shadow: -15px 0px 15px 0px #e91e63, /* Top-left corner: Pink */
        0px -15px 15px 0px #e77a1d, /* Top-right corner: Orange */
        15px 0px 15px 0px #08ace3, /* Bottom-left corner: Blue */
        0px 15px 15px 0px #7d21de; /* Bottom-right corner: Violet */
    }

    50% {
        box-shadow:  -15px 0px 15px 0px #e77a1d, /* Top-left corner: Orange */
        0px -15px 15px 0px #08ace3, /* Top-right corner: Blue */
        15px 0px 15px 0px #7d21de, /* Bottom-left corner: Violet */
        0px 15px 15px 0px #e91e63; /* Bottom-right corner: Pink */
    }

    75% {
        box-shadow:  -15px 0px 15px 0px #08ace3, /* Top-left corner: Blue */
        0px -15px 15px 0px #7d21de, /* Top-right corner: Violet */
        15px 0px 15px 0px #e91e63, /* Bottom-left corner: Pink */
        0px 15px 15px 0px #e77a1d; /* Bottom-right corner: Orange */
    }

    100% {
        box-shadow:  -15px 0px 15px 0px #7d21de, /* Top-left corner: Violet */
        0px -15px 15px 0px #e91e63, /* Top-right corner: Pink */
        15px 0px 15px 0px #e77a1d, /* Bottom-left corner: Orange */
        0px 15px 15px 0px #08ace3; /* Bottom-right corner: Blue */
    }
}

@keyframes chatgpt-pensando-color {
    0% {
        color: #7d21de;
        opacity: 0.7;
    }

    25% {
        color: #e91e63;
        opacity: 0.65;
    }

    50% {
        color: #e77a1d;
        opacity: 0.6;
    }

    75% {
        color: #08ace3;
        opacity: 0.55;
    }

    100% {
        color: #7d21de;
        opacity: 0.5;
    }
}


.chatgpt-pensando-color {
    animation: chatgpt-pensando-color 2s infinite alternate;
}







body.chatgpt.pensando #corpo {
    filter: grayscale(1);
}






#modal.chatgpt.pensando .janela {
    animation: chatgpt-pensando-modal 2s ease-in-out infinite alternate;
}


@keyframes chatgpt-pensando-modal {

    0% {
        box-shadow: -5px 0px 8px rgba(125, 33, 222, 0.4), /* Top-left corner: Violet */
        0px -5px 8px rgba(233, 30, 99, 0.4), /* Top-right corner: Pink */
        5px 0px 8px rgba(231, 122, 29, 0.4), /* Bottom-left corner: Orange */
        0px 5px 8px rgba(8, 172, 227, 0.4); /* Bottom-right corner: Blue */
    }

    25% {
        box-shadow: -5px 0px 8px rgba(233, 30, 99, 0.4), /* Top-left corner: Pink */
        0px -5px 8px rgba(231, 122, 29, 0.4), /* Top-right corner: Orange */
        5px 0px 8px rgba(8, 172, 227, 0.4), /* Bottom-left corner: Blue */
        0px 5px 8px rgba(125, 33, 222, 0.4); /* Bottom-right corner: Violet */
    }

    50% {
        box-shadow: -5px 0px 8px rgba(231, 122, 29, 0.4), /* Top-left corner: Orange */
        0px -5px 8px rgba(8, 172, 227, 0.4), /* Top-right corner: Blue */
        5px 0px 8px rgba(125, 33, 222, 0.4), /* Bottom-left corner: Violet */
        0px 5px 8px rgba(233, 30, 99, 0.4); /* Bottom-right corner: Pink */
    }

    75% {
        box-shadow: -5px 0px 8px rgba(8, 172, 227, 0.4), /* Top-left corner: Blue */
        0px -5px 8px rgba(125, 33, 222, 0.4), /* Top-right corner: Violet */
        5px 0px 8px rgba(233, 30, 99, 0.4), /* Bottom-left corner: Pink */
        0px 5px 8px rgba(231, 122, 29, 0.4); /* Bottom-right corner: Orange */
    }

    100% {
        box-shadow: -5px 0px 8px rgba(125, 33, 222, 0.4), /* Top-left corner: Violet */
        0px -5px 8px rgba(233, 30, 99, 0.4), /* Top-right corner: Pink */
        5px 0px 8px rgba(231, 122, 29, 0.4), /* Bottom-left corner: Orange */
        0px 5px 8px rgba(8, 172, 227, 0.4); /* Bottom-right corner: Blue */
    }
}







.chatgpt.bordas {
    /*
    border-top: 1px solid #7d21de;
    border-left: 1px solid #e91e63;
    border-bottom: 1px solid #e77a1d;
    border-right: 1px solid #08ace3;
    */
}






.chatgpt.retorno 
{
}


.chatgpt.retorno > div {
    background: rgba(255, 255, 255, 1);
    color: initial;
    border-radius: 20px;
    padding: 25px;
    line-height: 21px;
    /**/
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .3), -5px 0px 5px 0px #7d21de, 0px -5px 5px 0px #e91e63, 5px 0px 5px 0px #e77a1d, 0px 5px 5px 0px #08ace3;
    animation: chatgpt-ciclo-box-shadow 5s ease-in-out infinite alternate;
    transition: .2s ease-in-out;
}


@keyframes chatgpt-ciclo-box-shadow {

    0% {
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3),
            -5px 0px 5px 0px #7d21de, /* Top-left corner: Violet */
            0px -5px 5px 0px #e91e63, /* Top-right corner: Pink */
            5px 0px 5px 0px #e77a1d, /* Bottom-left corner: Orange */
            0px 5px 5px 0px #08ace3; /* Bottom-right corner: Blue */
    }

    25% {
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3),
            -5px 0px 5px 0px #e91e63, /* Top-left corner: Pink */
            0px -5px 5px 0px #e77a1d, /* Top-right corner: Orange */
            5px 0px 5px 0px #08ace3, /* Bottom-left corner: Blue */
            0px 5px 5px 0px #7d21de; /* Bottom-right corner: Violet */
    }

    50% {
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3),
            -5px 0px 5px 0px #e77a1d, /* Top-left corner: Orange */
            0px -5px 5px 0px #08ace3, /* Top-right corner: Blue */
            5px 0px 5px 0px #7d21de, /* Bottom-left corner: Violet */
            0px 5px 5px 0px #e91e63; /* Bottom-right corner: Pink */
    }

    75% {
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3), 
            -5px 0px 5px 0px #08ace3, /* Top-left corner: Blue */
            0px -5px 5px 0px #7d21de, /* Top-right corner: Violet */
            5px 0px 5px 0px #e91e63, /* Bottom-left corner: Pink */
            0px 5px 5px 0px #e77a1d; /* Bottom-right corner: Orange */
    }

    100% {
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3), 
            -5px 0px 5px 0px #7d21de, /* Top-left corner: Violet */
            0px -5px 5px 0px #e91e63, /* Top-right corner: Pink */
            5px 0px 5px 0px #e77a1d, /* Bottom-left corner: Orange */
            0px 5px 5px 0px #08ace3; /* Bottom-right corner: Blue */
    }
}




.chatgpt.retorno > div:not(:last-child) {
    margin-bottom: 25px;
}


.chatgpt.retorno strong {
    font-weight: 700;
}

.chatgpt.retorno p:not(:last-child) {
    margin-bottom: 25px;
}


.chatgpt.retorno ul, .chatgpt.retorno ol {
    margin-left: 10px;
}

.chatgpt.retorno li {
    list-style: initial;
    margin-left: 5px;
}





.chatgpt.retorno li:not(:last-child) {
    margin-bottom: 10px;
}

.chatgpt.retorno li li {
    font-size: 12px;
    list-style: circle;
    opacity: .9;
}

.chatgpt.retorno li li:not(:last-child) {
    margin-bottom: 0px;
}

.chatgpt.retorno li:not(:last-child) li:last-child {
    margin-bottom: 25px;
}


.chatgpt.retorno h1 {
    font-size: 14px;
}

.chatgpt.retorno h2 {
    font-size: 20px; /*Equivalente ao h5*/
    font-weight: 700;
    margin-bottom: 25px;
}

.chatgpt.retorno h2:first-child {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(0,0,0, .05);
}


.chatgpt.retorno h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 25px;
}


@media (max-width: 1000px)
{
    .chatgpt.retorno > div {
        padding: 15px;
        border-radius: 10px;
    }

    .chatgpt.retorno h2:first-child {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .chatgpt.retorno > div:not(:last-child) {
        margin-bottom: 15px;
    }

    .chatgpt.retorno h1, .chatgpt.retorno h2, .chatgpt.retorno h3, .chatgpt.retorno h4 .chatgpt.retorno h5 
    {
        font-size: 16px;
    }

    .chatgpt.retorno p:not(:last-child) {
        margin-bottom: 15px;
    }

    .chatgpt.retorno li:not(:last-child) li:last-child {
        margin-bottom: 15px;
    }
}



.confirmacao .wrapper {
    display: flex;
    align-items: center;
    margin-left: 25px;
}

.confirmacao .wrapper .icone {
    display: flex;
    height: 100px;
    width: 100px;
    fill: #4caf50;
    margin-right: 25px;
    flex-shrink: 0;
}

.confirmacao.rejeicao .wrapper .icone {
    fill: #F44336;
}


.confirmacao .wrapper .subtitulo {
    margin-top: 10px;
}



@media screen and (max-width: 1000px) {
}

.context-menu {
    position: relative;
    display: inline-block;
}

.context-menu .botao {
    display: flex;
    gap: 3px;
/*    background: rgba(0, 0, 0, .1);*/
    padding: 5px;
    height: 15px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    transition: .2s ease-in-out;
/*    backdrop-filter: blur(10px);*/
/*    -webkit-backdrop-filter: blur(10px);*/
    cursor: pointer;
}

.context-menu .botao:hover {
/*    background: rgba(0, 0, 0, .2);*/
    opacity: .7;
}

.context-menu .botao div {
    height: 5px;
    width: 5px;
    background: #fff;
    border-radius: 100%;
}

.itens {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 4px;
    padding: 5px 0;
    min-width: 120px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 9999;
}

.itens .item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    transition: background .2s;
}

.itens .item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.itens .label {
    white-space: nowrap;
}



.container-pagina > .controles-pagina {
    padding: 25px;
    padding-bottom: 0px; /*A página que vem logo em seguida tem margin: 25px;*/
}

.conteudo .controles-pagina {
    margin-bottom: 25px;
}


.controles-pagina {

    display: flex;
    flex-direction: column;
    gap: 10px;
}


.controle-pagina {
    display: flex;
    align-items: center;
    height: 50px;
    border-radius: 10px;
    gap: 10px;
    background: transparent;
}

.controle-pagina.periodo {
    border: 1px solid rgba(0, 0, 0, .05);
    justify-content: center;
    text-align: center;
}


.controle-pagina.periodo .hoje {
    position: absolute;
    display: flex;
    gap: 10px;
    font-weight: 200;
    opacity: .7;
    transition: .2s ease-in-out;
    /**/
    width: 175px;
    /**/

}

.controle-pagina.periodo .hoje:hover {
    opacity: .9;
}

.controle-pagina.periodo .hoje .icone {
    display: flex;
    height: 15px;
    width: 15px;
    fill: #fff;
}




.controle-pagina.periodo .hoje.esq {
    transform: translateX(-300px);
    justify-content: flex-end;
}

.controle-pagina.periodo .hoje.dir {
    transform: translateX(300px);
    justify-content: flex-start;
}

.controle-pagina .container-voltar-avancar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.controle-pagina .container-voltar-avancar .label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /**/
    /*    width: 300px;*/
    /**/
    background: rgba(255, 255, 255, .1);
    height: 25px;
    border-radius: 10px;
    /**/
    padding-left: 15px;
    padding-right: 15px;
}

.controle-pagina .container-voltar-avancar .icone {
    display: flex;
    height: 20px;
    width: 20px;
    flex-shrink: 0;
    flex-grow: 1;
    fill: #fff;
}

.controle-pagina .container-voltar-avancar .voltar,
.controle-pagina .container-voltar-avancar .avancar {
    transition: .2s ease-in-out;
}

.controle-pagina .container-voltar-avancar .voltar:hover,
.controle-pagina .container-voltar-avancar .avancar:hover {
    opacity: .7;
}




.controle-pagina select {
    border: 0px;
    width: 100%;
    font-family: inherit;
    padding: 5px;
    font-size: inherit;
    transition: opacity .2s ease-in-out;
    color: #ef8933;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    appearance: none;
    background-color: rgba(0, 0, 0, .05);
    height: 50px;
    padding-left: 15px;
    transition: .2s ease-in-out;
    text-align: inherit;
}


.controle-pagina select:invalid 
{
    color: rgba(255, 255, 255, .7);
}


.controle-pagina select:hover {
    opacity: .7;
}

.controle-pagina select:focus {
    opacity: 1;
    outline: none;
    text-align: left;
}

.controle-pagina select:focus option {
    background: rgba(0,0,0, .7);

}


.controle-pagina select::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
}

.controle-pagina select::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    border-radius: 10px;
}




@media screen and (max-width: 1000px) {


    .controles-pagina {
        padding: 0px;
        padding: 5px;
        gap: 5px;
    }


    .controle-pagina {
        flex-direction: column;
        height: auto
    }


    .controle-pagina.periodo {
        padding: 15px;
    }

    .controle-pagina.campos {
        gap: 5px;
    }



    .controle-pagina select {
        margin-bottom: 15px;
        margin-right: 0px;
        width: 100%;
        text-align: center;
        padding: 15px;
        padding-left: 30px;
        margin-bottom: 0px;
        height: 60px;
    }

    .controle-pagina .container-voltar-avancar {
        width: 100%;
        height: 30px;
    }

    .controle-pagina .container-voltar-avancar .label {
        flex-grow: 1;
    }

}



#controle-carregamento-cache {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
    padding: 15px;
    padding-right: 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, .05);
    align-items: center;
    transition: .2s ease-in-out;
    display: none;
    width: 100%;
    max-width: 300px;
    /**/
}

#controle-carregamento-cache.ativo {
    display: flex;
}


#controle-carregamento-cache .conteudo-controle {
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: 100%;
    align-items: center;

}

#controle-carregamento-cache .conteudo-controle .label {
    color: #fff;
    opacity: .7;
    /**/
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 200;
    mix-blend-mode: difference;
}

#controle-carregamento-cache .conteudo-controle .loading {
    height: 5px;
    display: flex;
    background-color: rgba(255, 255, 255, .05);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

#controle-carregamento-cache .conteudo-controle .loading .fill {
    height: 100%;
    background: #4caf50;
    transition: .2s ease-in-out;
}


@media screen and (max-width: 1000px) {
    #controle-carregamento-cache {
        right: 10px;
        bottom: 5px;
        width: calc(100% - 20px);
        height: 60px;
        max-width: none;
    }
}


.c-branco {
    color: #fff !important;
}

.bg-branco {
    background-color: #fff !important; 
}

.fill-branco {
    fill: #fff !important;
}

.c-laranja-1 {
    color: #da6601 !important;
}

.bg-laranja-1 {
    background-color: #da6601 !important;
    color: #fff;
}

.fill-laranja-1 {
    fill: #da6601 !important;
}


.c-laranja-2 {
    color: #e77a1d !important;
}

.fill-laranja-2 {
    fill: #e77a1d !important;
}

.bg-laranja-2 {
    background-color: #e77a1d !important;
    color: #fff;
}

.c-laranja-3 {
    color: #ef8933 !important;
}

.bg-laranja-3 {
    background-color: #ef8933 !important;
    color: #fff;
}

.c-azul-1 {
    color: #4000b6 !important;
}

.bg-azul-1 {
    background-color: #4000b6 !important;
    color: #fff;
}

.c-azul-2 {
    color: #0089cd !important;
}

.bg-azul-2 {
    background-color: #0089cd !important;
    color: #fff;
}

.c-azul {
    color: #08ace3 !important;
}

.bg-azul {
    background-color: #08ace3 !important;
    color: #fff;
}

.c-azul-4 {
    color: #1cc3ec !important;
}

.bg-azul-4 {
    background-color: #1cc3ec !important;
    color: #fff;
}

.c-roxo {
    color: #7d21de !important;
}

.fill-roxo {
    fill: #7d21de !important;
}

.bg-roxo {
    background-color: #7d21de !important;
    color: #fff;
}

.c-rosa {
    color: #bb54d2 !important;
    
}

.bg-rosa {
    background-color: #bb54d2 !important;
    color: #fff;
}

.fill-rosa {
    fill: #bb54d2 !important;
}


.c-vermelho {
    color: #F44336 !important;
}

.bg-vermelho {
    background-color: #F44336 !important;
    color: #fff;
}

.fill-vermelho {
    fill: #F44336 !important;
}


.c-vermelho-claro {
    color: #e91e63 !important;
}

.bg-vermelho-claro {
    background-color: #e91e63 !important;
    color: #fff;
}

.fill-vermelho-claro {
    fill: #e91e63 !important;
}



.c-verde {
    color: #4caf50 !important;
}

.fill-verde {
    fill: #4caf50 !important;
}

.bg-verde {
    background-color: #4caf50 !important;
    color: #fff;
}

.c-verde-claro {
    color: #8bc34a !important;
}

.bg-verde-claro {
    background-color: #8bc34a !important;
    color: #fff;
}

.fill-verde-claro {
    fill: #8bc34a !important;
}


.c-amarelo {
    color: #ffc107 !important;
}

.bg-amarelo {
    background-color: #ffc107 !important;
    color: #fff;
}

.c-cinza {
    color: grey !important;
}

.bg-cinza {
    background-color: grey !important;
    color: #fff;
}

.fill-cinza {
    fill: grey !important;
}

.c-cinza-light {
    color: lightgrey !important;
}

.bg-cinza-light {
    background-color: lightgrey !important;

}
#corpo {
    overflow: hidden;
    color: #fff;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: -225px;
    border-radius: 25px;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-start;
}

#corpo .container-pagina {
    flex-grow: 1;
    width: 100%;
    /**/
    overflow: hidden; /*Sem isso, a página quando tinha o menu, poderia ficar cortada se ela fosse muito larga...*/
}


#corpo .menu {
    margin-top: 50px;
    margin-left: 25px;
}




#corpo .menu .item {
    height: 75px;
    padding-left: 25px;
    padding-right: 50px;
    cursor: pointer;
    transition: .2s ease-in-out;
    display: flex;
    /*height: 75px;*/ /*Sem altura, a distancia entre um item e outro fica exatamente 50px,´que é a mesma distancia entre um item e otro dos itens do header, hou sreja, fica mais simetrico*/

    align-items: center;
    white-space: nowrap;
    /*border-bottom: 1px solid rgba(0, 0, 0, .05);*/
    color: rgba(255,255,255, .7);
    fill: rgba(255,255,255, .7);
}

#corpo .menu .item.ativo {
    border-right: 2px solid;
    color: #fff;
    fill: #fff;
}

#corpo .menu .item .icone {
    display: flex;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    justify-content: center;
}

#corpo .menu .item .icone .emoji {
    display: flex;
    align-items: center;
    font-size: 24px;
    width: 100%;
    justify-content: flex-end;
}




/*------------------------------------------------------------------------------------------------------------------------------------*/



/*Esse aqui é o menu fora do lugar oficial... Dentro da página... Lado a lado com o .conteudo...  */
#corpo .pagina .menu {
    margin-top: 25px;
    margin-left: 0px;
}


/*Esse aqui é o menu fora do lugar oficial... Dentro da página... Lado a lado com o .conteudo...  */
#corpo .pagina .menu .item {
}


#corpo .pagina .menu + .conteudo {
    background-color: rgba(0, 0, 0, .05);
    padding: 25px;
    border-radius: 10px;
    margin-left: 0px;
}

/*------------------------------------------------------------------------------------------------------------------------------------*/






.pagina {
    /*padding: 25px;*/ /*Transferido pro conteudo*/
    /**/
    display: flex;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 25px;
    border-radius: 10px;
}

.abas ~ .pagina {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding: 0px;
}

.abas ~ .pagina .conteudo {
    padding: 25px;
}



.pagina.sozinha {
    margin-top: 25px;
}

.pagina.centralizada {
    align-items: center;
    justify-content: center;
}


.conteudo {
    padding: 25px;
    /**/
    max-width: 1024px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    /**/
    overflow-x: hidden; /*Botei isso porque se tivesse um menu interno, ou os botões (.lado) o .conteudo ficava cortado se fosse muito largo.. */
}



.conteudo.full,
#corpo .menu ~ .container-pagina .conteudo {
    max-width: none;
}

#corpo .menu ~ .container-pagina:not(:has(> .abas)) .secao-superior {
    margin-right: 25px;
    background-color: rgba(0,0,0, .2);
    margin-top: 25px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


#corpo .menu ~ .container-pagina > .secao-superior:first-child {
    margin-right: 25px;
    background-color: rgba(0,0,0, .2);
    margin-top: 25px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


#corpo .menu ~ .container-pagina .abas + .secao-superior {
    margin-left: 0px;
}

#corpo .menu ~ .container-pagina .abas + .secao-superior > .flex {
    padding: 0px;
}



#corpo .menu ~ .container-pagina > .secao-superior {

}


#corpo .menu ~ .container-pagina .secao-superior ~ .abas {
    margin-left: 0px;
    background-color: rgba(0, 0, 0, .2);
}


#corpo .menu ~ .container-pagina .secao-superior ~ .abas ~ .pagina {
    background: rgba(0, 0, 0, 0.45);

}



#corpo .menu ~ .container-pagina .pagina {
    margin-left: 0px;
    padding: 0;
}

#corpo .menu ~ .container-pagina .pagina:not(.sozinha) {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

#corpo .menu ~ .container-pagina .pagina .conteudo {
    padding: 25px;
}





.lado {
    flex-grow: 1;
}

.lado.direito {
    padding: 25px;
    border-left: 1px solid rgba(255, 255, 255, .05);
}

.lado.esquerdo {
    padding: 25px;
    border-right: 1px solid rgba(255, 255, 255, .05);
}

.lado .botoes .btn:first-child {
    margin-top: 0px;
}

.lado .botoes .btn:not(:first-child) {
    margin-top: 14px; /*Compensar pelo box shadow do botão de cima*/
}

.lado .cabecalho-pagina {
    margin-top: 0px;
}



@media screen and (max-width: 1000px) {

    #corpo {
        margin-left: 0px;
        margin-right: 0px;
        border-radius: 10px;
        padding: 5px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        flex-direction: column;
    }

    #corpo .menu {
        margin-left: 0px;
        margin-top: 0px;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        display: flex;
    }

    #corpo .menu .item {
        height: 60px;
        padding: 0px;
        width: 75px;
        justify-content: center;
        border-bottom: 2px solid transparent;
    }

    #corpo .menu .item.ativo {
        border-right: 0px;
        border-bottom: 2px solid;
    }

    #corpo .menu .item .icone {
        height: 25px;
        width: 25px;
        margin-right: 0px;
    }

    #corpo .menu .item .label {
        display: none;
    }

    #corpo .menu ~ .container-pagina .secao-superior {
        margin-top: 0px;
        margin-left: 0px;
        margin-bottom: 0px;
        margin-right: 0px;
        overflow: hidden;
        background: rgba(0,0,0, .3);
        padding: 5px;
    }

    .pagina {
        /*padding: 5px;*/
        padding: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .pagina.sozinha {
        margin-top: 0px;
    }

    .pagina.centralizada {
        align-items: flex-start;
        justify-content: initial;
    }


    .pagina .lado {
        display: none;
    }



    #corpo .menu ~ .container-pagina .pagina {
        padding: 5px;
    }


    #corpo .menu ~ .container-pagina .pagina .conteudo {
        padding: 0px;
    }

    .abas ~ .pagina .conteudo {
        padding: 5px;
    }

    .pagina .conteudo {
        padding: 5px;
    }
}

/*https://icons8.com/icon/set/cursor-elegant/group-ui*/


.cursor-flecha {
    cursor: url('/Content/img/framework/cursor/flecha.png'), auto !important;
}

.cursor-pointer {
    cursor: url('/Content/img/framework/cursor/pointer.png'), pointer !important;
}




.dashboard {
    padding: 50px;
    width: 100%;
}



.dashboard .relatorios {
    display: flex;
    flex-direction: column;
    gap: 25px;
}


.dashboard .relatorios .titulo {
    /*    border-bottom: 1px solid rgba(255, 255, 255, .05);*/
    /*    padding-bottom: 20px;*/
    display: flex;
    align-items: center;
    gap: 10px;
}


.dashboard .relatorios .titulo:not(:first-child) {
    margin-top: 10px;
}

.dashboard .relatorios .titulo .label {
}

.dashboard .relatorios .titulo .emoji {
    font-size: 24px;
    display: flex;
}




.dashboard .relatorios .grupo {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}


.dashboard .relatorios .grupo .metrica {
    background: rgba(255, 255, 255, .05);
    overflow: hidden;
    border-radius: 10px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(255, 255, 255, .05);
    transition: .2s ease-in-out;
    cursor: pointer;
}

.dashboard .relatorios .grupo .metrica.link-ativo:hover {
    transform: translateY(-5px);
}


.dashboard .relatorios .grupo .metrica .wrapper {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    gap: 10px;
}

.dashboard .relatorios .grupo .metrica .wrapper .info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}


.dashboard .relatorios .grupo .metrica .wrapper .info .label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard .relatorios .grupo .metrica .wrapper > .icone {
    background: rgba(255, 255, 255, .05);
    padding: 5px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
}

.dashboard .relatorios .grupo .metrica .wrapper > .icone .emoji {
    font-size: 18px;
    line-height: 0;
}

.dashboard .relatorios .grupo .metrica .wrapper .info .label .texto {
    padding: 10px;
    width: 100%;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.dashboard .relatorios .grupo .metrica .wrapper .info .valor {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .05);
    padding: 10px;
    border-top: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.dashboard .relatorios .grupo .metrica .wrapper .info .valor .label {
    font-weight: 700;
}


.dashboard .relatorios .grupo .metrica .wrapper .comparativo {
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    color: #fff;
    fill: #fff;
}






.dashboard .relatorios .grupo .metrica .wrapper .comparativo .icone {
    height: 15px;
    width: 15px;
    display: flex;
    fill: inherit;
}


.dashboard .relatorios .grupo .metrica .wrapper .comparativo .label {
    font-size: 12px;
    color: inherit;
}


.dashboard .relatorios .grupo .metrica .wrapper .comparativo.verde {
    color: #4caf50;
    fill: #4caf50;
    //background-color: #4caf50;
}

.dashboard .relatorios .grupo .metrica .wrapper .comparativo.vermelho {
    color: #f44336;
    fill: #f44336;
    //background-color: #f44336;
}




.dashboard .relatorios .grupo .metrica .rodape {
    background: rgba(255, 255, 255, .05);
    padding: 10px;
    text-align: center;
}

.dashboard .relatorios .grupo .metrica .rodape .texto {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: .7;
    font-weight: 200;
}


@media screen and (max-width: 1000px) {
    .dashboard {
        padding: 15px;
    }
}

footer {
    color: #fff;
    background: #121735;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

footer .linha {
    padding: 25px;
    padding-left: 75px;
    padding-right: 75px;
    text-align: center;
    display: flex;
    align-items: center;
    
}

footer .linha:not(:last-child)
{
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}




footer .logo {
    width: 100%;
    display: flex;

}

footer .logo a {
    display: flex;
}

footer .logo img {
    width: 200px;

}


footer .paleta {
    display: flex;
    gap: 10px;
}

footer .paleta div {
    height: 15px;
    width: 15px;
    border-radius :100%;
}



footer .linha.l2 {

}


footer .linha.l2 .t2 {
}

footer .linha.l2 .t2 {

}

footer .linha.l2 .t2 .txt {
    
}







footer .usuario {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .05);
    height: 50px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 10px;
    text-align: left;
}

footer .usuario .icone {
    display: flex;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    fill: #fff;
}


footer .usuario .col {
    display: flex;
}


footer .usuario .aux {
    margin-left: 10px;
    font-weight: 200;
    opacity: .7;
}







footer .t2 .txt {
    font-size: 12px;
    text-align: right;
}


footer .linha .t2 {
    margin-left: auto;
    opacity: .6;
    font-weight: 200;
    white-space: nowrap;
    line-height: 18px;
}


@media screen and (max-width: 1000px) {

    footer .linha {
        flex-direction: column;
        padding: 15px;
        margin-top: 0px;
    }
    

    footer .linha .t1 {
        width: 100%;
        display: flex;
        justify-content: center;
    }


    footer .linha .t2 {
        margin-top: 15px;
        margin-left: 0;
        width: 100%;
    }


    footer .usuario {
        height: auto;
        width: 100%;
        padding: 15px;
    }

    footer .usuario .col {
        flex-direction: column;

    }

    footer .usuario .aux {
        margin-left: 0;
        margin-top: 5px;
    }

    footer .usuario .icone {
        height: 25px;
        width: 25px;
        margin-right: 15px;
    }


    footer .sair 
    {
        margin-top: 0;
        width: 100%;
        height: 60px;
    }


    footer .logo {
        justify-content: center;
    }

    

    footer .t2 .txt {
        white-space: normal;
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }
}


.titulo-formulario {
    margin-left: 5px; /*Pra alinhar com os subtitulos*/
    box-shadow: none !important;
}


.formulario {
    width: 100%;
    padding: 25px;
    flex-direction: column;
    display: flex;
}



.formulario .subtitulo {
    align-items: center;
    display: flex;
    padding-left: 5px;
    /**/
    /* //Testando sem a borda...
    border-bottom: 1px solid rgba(0,0,0, .05);
    padding-bottom: 15px; /*10px de margem da fonte*/
}

.formulario .subtitulo .label {
}

.formulario .subtitulo .label .descricao {
    color: grey;
    font-weight: 100;
    margin-top: 5px;
    max-width: 600px;
    line-height: 21px;
}


.centro .formulario .subtitulo:first-child,
.centro .formulario .subtitulo:nth-child(2) {
    margin-top: 0px;
}


.formulario .subtitulo .icone {
    height: 25px;
    width: 25px;
    margin-right: 25px;
    fill: rgba(0, 0, 0, .05);
    display: none;
}


.formulario .legenda {
    font-size: 11px;
    text-transform: uppercase;
    padding-left: 5px;
    letter-spacing: 2px;
    font-weight: 100; /*era 200*/
    margin-top: 25px;
    margin-bottom: 15px;
    /*
    border-bottom: 1px dashed rgba(0,0,0,.05);
    padding-bottom: 10px;*/
    color: grey;
}

.formulario .legenda:first-child {
    margin-top: 0px;
}




.formulario .secao {
    padding-bottom: 25px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.formulario .subtitulo + .secao { /* Seção que vem logo depois do título */
    padding-top: 25px;
}

.formulario .secao + .secao { /* Seção que vem logo depois de outra seção */

    padding-top: 50px;
    border-top: 1px solid rgba(0,0,0, .05);
}




.formulario .secao:not(:last-child) {
    margin-bottom: 25px;
}

.formulario .flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.formulario .flex.centro {
    justify-content: center;
}

.formulario .flex.metade {
    width: calc(50% - 5px); /* 5px por o gap é 10px */
}



.formulario .flex .campo-container {
    display: flex;
    align-items: center;
    width: 100%;
}









.formulario .flex .campo {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    /**/
    background-color: rgba(0, 0, 0, .05);
    /*background-color: #e9e7e8; /* Mesma cor que o de cima, mas não transparente. */
    /**/
    border-radius: 10px;
    padding-left: 15px;
    padding-right: 15px;
    /**/
    z-index: 5;
}

.formulario .flex .campo.area {
    align-items: flex-start;
}

.formulario .flex .campo-container[data-orientacao='Vertical'] .campo {
    flex-direction: column;
    align-items: flex-start;
}




.formulario .flex .campo.desabilitado {
    opacity: .3;
    cursor: not-allowed;
}


.formulario .flex .campo .label {
    font-weight: 600;
    margin-right: 15px;
    white-space: nowrap;
    /**/
    display: flex;
    /*flex-direction: column;*/ /*Tirei pra fazer o tooltip*/
    /**/
    align-items: center;
}


.formulario .flex .campo .label .tooltip {
    display: flex;
    opacity: .1;
    cursor: help;
    transition: .2s ease-in-out;
}



.formulario .flex .campo .label .tooltip:hover {
    opacity: .3;
}


.formulario .flex .campo .label .tooltip .icone {
    display: flex;
    height: 15px;
    width: 15px;
    margin-left: 7px;
    margin-top: 1px;
}


.formulario .flex .campo-container.focus .campo:not(.opcional):not(.valido) .label {
    color: #e77a1d;
}

.formulario .flex .campo-container .campo.valido .label {
    color: #4caf50;
}

.formulario .flex .campo-container:not(.focus) .campo.alerta .label {
    color: #F44336;
}




.formulario .flex .campo.area .label,
.formulario .flex .campo-container[data-orientacao='Vertical'] .campo .label {
    margin-top: 16.5px;
}

.formulario .flex .campo .prefixo {
    margin-right: 4px;
    white-space: nowrap;
    font-weight: 200;
}

.formulario .flex .campo .sufixo {
    margin-left: 4px;
    font-weight: 200;
    white-space: nowrap;
}


.formulario .flex .campo .helper {
    white-space: nowrap;
    font-weight: 200;
    color: grey;
    margin-left: 10px;
    display: none;
}

.formulario .flex .campo .helper.visivel {
    display: flex;
}






.formulario .flex .tag-auxiliar {
    font-weight: 200;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .4;
    transition: .2s ease-in-out;
    /**/

    border-radius: 4px;
    display: flex;
    align-items: center;
    opacity: 1;
    color: rgba(0,0,0, .7);
    justify-content: center;
    /**/
    height: 15px;
    /**/
    width: 0px;
    overflow: hidden;
    /**/
    position: absolute;
    z-index: 200;
    right: 15px;
    background: #fff;
}

.formulario .flex .campo-container.focus .campo:not(.valido) + .tag-auxiliar,
.formulario .flex .campo-container .campo.alerta + .tag-auxiliar {
    width: 70px;
}



.formulario .flex .tag-auxiliar.obrigatorio {
    /*border: 1px solid rgba(231, 122, 29, .1);*/
    color: #e77a1d;
}

.formulario .flex .campo.alerta + .tag-auxiliar.obrigatorio {
    color: #F44336;
    font-weight: 400;
}








.formulario .flex .campo .inp {
    background-color: transparent;
    width: 100%;
    border: 0px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
    padding: 0px;
    height: 50px;
    transition: .2s ease-in-out;
    color: rgba(0,0,0, .8);
    border-radius: 0px;
}

.formulario .flex .campo .inp:focus {
    outline: none;
    color: rgba(0,0,0, 1);
}

.formulario .flex .campo.opcional .inp:focus {
    border-bottom-color: #1d1d1f;
}

.formulario .flex .campo:not(.opcional) .inp:focus {
    border-bottom-color: #e77a1d;
}



.formulario .flex .campo .inp:disabled {
    cursor: not-allowed;
    color: grey;
}


.formulario .flex .campo .inp::placeholder,
.formulario .flex .campo select.inp:invalid:not(:focus) {
    font-weight: 200;
    color: rgba(0, 0, 0, .3);
}


.formulario .flex .campo.alerta .inp {
    border-bottom-color: #F44336;
}

.formulario .flex .campo.valido .inp:focus {
    border-bottom-color: #4caf50;
}


.formulario .flex .campo.alerta input[type='file'] {
    color: #F44336;
}


.formulario .flex .campo textarea.inp {
    height: 200px;
    resize: none;
    padding-top: 5px;
    padding-bottom: 15px;
    line-height: 21px;
}

.formulario .flex .campo-container[data-orientacao='Horizontal'] .campo textarea.inp {
    padding-top: 14px;
}


.formulario .flex .campo textarea.inp:focus {
    outline: none;
}

.formulario .flex .campo textarea.inp::-webkit-scrollbar {
    width: 3px;
    background-color: transparent;
}

.formulario .flex .campo textarea.inp::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .1);
    border-radius: 10px;
}


.formulario .btn-container {
    justify-content: center;
    margin-top: 25px;
}


.formulario .btn-container .btn {
    -webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
}

.formulario .btn-container .btn:not(.ghost) {
    border: none;
}





.formulario .flex .campo.arquivo {
    padding-left: 0px;
}

.formulario .flex .campo.arquivo .label {
    margin-left: 15px;
}


.formulario .flex .campo input[type='file'].inp {
    font-family: inherit;
    width: 100%;
    font-size: 14px;
    color: grey;
    font-weight: 200;
    color: rgba(0, 0, 0, .3);
    /*height: auto;*/
    height: 50px;
}

.formulario .flex .campo input[type='file'].inp.preenchido {
    color: #da6601;
    font-weight: 700;
}

.formulario .flex .campo input[type='file'].inp::-webkit-file-upload-button {
    border: 0px;
    font-family: inherit;
    background-color: rgba(0, 0, 0, .05);
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    color: grey;
    transition: .2s ease-in-out;
    height: 25px;
    margin-top: 12.5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px !important;
}



.formulario .flex .campo input[type='file'].inp::-webkit-file-upload-button:hover {
    opacity: .7;
}


.formulario .flex .campo.check {
    height: 50px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .05);
}

.formulario .flex .campo.check .label {
    font-weight: 400;
    cursor: pointer;
    margin-right: 0px;
}

.formulario .flex .campo.check input[type='checkbox'] {
    margin: 0;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin-right: 10px;
}


.formulario .flex .campo.grupo-checks {
    display: flex;
    align-items: center;
    height: 50px;
    padding-right: 5px;
}

.formulario .flex .campo.grupo-checks .container {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.formulario .flex .campo.grupo-checks .campo.check {
    height: 40px;
    flex-grow: 1;
    justify-content: center;
    border: none;
    background-color: rgba(0, 0, 0, 0.02);
}

.formulario .flex .campo.grupo-checks .campo.check:not(:last-child) {
    margin-right: 5px;
}




.formulario .flex .campo.cor {
    height: 50px;
}

.formulario .flex .campo.cor input {
    cursor: pointer;
}






.formulario .texto {
    color: grey;
}


.formulario .sliders .flex {
    margin-bottom: 10px;
}

.formulario .campo.slider {
    width: 100%;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .03);
    padding: 25px;
    border-radius: 10px;
}

.formulario .flex .campo.slider .label {
    margin-bottom: 0px;
    margin-right: 25px;
    white-space: nowrap;
    width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
}



.formulario .campo.slider input[type='range'] {
    flex-grow: 1;
    cursor: pointer;
}

.formulario .campo.slider .valor {
    border-left: 1px solid rgba(0, 0, 0, .05);
    height: 100%;
    padding: 5px;
    padding-left: 25px;
    margin-left: 25px;
    font-weight: 600;
    width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.formulario .campo.slider .opcoes {
    display: none;
}




.formulario .campo.estrelas {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .05);
    border-radius: 10px;
    padding: 10px;
    padding-left: 25px;
}

.formulario .campo.estrelas:not(:last-child) {
}


.formulario .campo.estrelas.alerta {
    border-bottom: 2px solid #F44336;
}

.formulario .flex .campo.estrelas .container-labels {
    display: flex;
    align-items: center;
}

.formulario .flex .campo.estrelas .container-labels .icone {
    height: 20px;
    width: 20px;
    display: flex;
    margin-right: 10px;
}


.formulario .flex .campo.estrelas .labels {
    font-weight: 600;
}

.formulario .flex .campo.estrelas .itens {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 25px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}



.formulario .flex .campo.estrelas .itens .item {
    cursor: pointer;
}


.formulario .flex .campo.estrelas .itens .item:not(:last-child) {
    margin-right: 10px;
}

.formulario .flex .campo.estrelas .itens .item .icone {
    height: 25px;
    width: 25px;
    fill: rgba(0, 0, 0, .05);
    display: flex;
    transition: .1s ease-in-out;
}

.formulario .flex .campo.estrelas .itens .item:hover .icone {
    fill: rgba(0, 0, 0, .1);
}


.formulario .flex .campo.estrelas .itens .item.ativo .icone {
    fill: #08ace3;
}




.formulario .container-blocos {
    display: flex;
    align-items: flex-start;
}


.formulario .container-blocos .bloco {
    width: 100%;
}


.formulario .container-blocos .bloco:not(:last-child) {
    margin-right: 25px;
}



.formulario .explicacao {
    transition: .2s ease-in-out;
    padding-left: 5px;
}

.formulario .explicacao:hover {
}


.formulario .subtitulo + .explicacao {
    margin-top: 10px;
}




.formulario .explicacao .bloco {
    display: flex;
    align-items: flex-start;
}

.formulario .explicacao .bloco:not(:last-child) {
    margin-bottom: 25px;
}


.formulario .explicacao .bloco .item {
    flex: 1;
}

.formulario .explicacao .bloco .item:not(:last-child) {
    margin-right: 25px;
}


.formulario .explicacao .bloco .item .titulo {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.formulario .explicacao .bloco .item .titulo .label {
    font-weight: 700;
}

.formulario .explicacao .bloco .item .titulo .icones {
    display: flex;
    margin-left: 10px;
}

.formulario .explicacao .bloco .item .titulo .icones .icone {
    height: 15px;
    width: 15px;
    fill: black;
    margin-right: 5px;
}


.formulario .explicacao .bloco .item .texto {
    font-size: 12px;
    line-height: 18px;
    text-align: justify;
    font-weight: 200;
}

.formulario .selecao-opcoes {
}

.formulario .selecao-opcoes .item {
    background: linear-gradient(45deg, rgba(0, 0, 0, .05), transparent);
    display: flex;
    align-items: center;
    padding: 25px;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.formulario .selecao-opcoes .item:not(:last-child) {
    margin-bottom: 10px;
}


.formulario .selecao-opcoes .item:hover {
    background: linear-gradient(45deg, rgba(0, 0, 0, .05) 70%, #f1ddcd);
    background: linear-gradient(45deg, #f1ddcd, transparent);
    transform: translateX(10px);
}

.formulario .selecao-opcoes .item .icone {
    fill: #e77a1d;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: 25px;
}



.formulario .caixa {
    border: 1px solid rgba(0,0,0, .05);
    padding: 25px;
    border-radius: 10px;
}


.formulario .caixa:not(:last-child) {
    margin-bottom: 25px;
}

.formulario .caixa .container-titulo {
    display: flex;
    align-items: center;
}


.formulario .caixa:not(.fechada) .container-titulo {
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(0,0,0, .05);
}


.formulario .caixa.colapsavel .container-titulo {
    cursor: pointer;
}

.formulario .caixa .container-titulo .colapsar .icone {
    width: 15px;
    height: 9px;
    margin-right: 20px;
    display: flex;
    transform: rotate(180deg);
    fill: rgba(0, 0, 0, .3);
    transition: .2s ease-in-out;
}

.formulario .caixa:not(.colapsavel) .container-titulo .colapsar .icone {
    display: none;
}

.formulario .caixa.colapsavel .container-titulo:hover .icone {
    fill: rgba(0, 0, 0, .7);
}


.formulario .caixa.fechada .container-titulo .colapsar .icone {
    transform: rotate(90deg);
}

.formulario .caixa.fechada .container-titulo:hover .colapsar .icone {
    transform: rotate(95deg);
}


.formulario .caixa .container-titulo .titulo {
    display: flex;
    align-items: center;
    transition: .2s ease-in-out;
    width: 100%;
}


.formulario .caixa .secao:last-child {
    padding-bottom: 0px;
}

.formulario .caixa.fechada .secao {
    display: none;
}




.formulario .flex .campo.codigo-acesso {
    background-color: transparent;
}

.formulario .flex .campo.codigo-acesso:hover {
    background-color: transparent;
}

.formulario .flex .campo.codigo-acesso .label {
    margin-right: 25px;
}

.formulario .flex .campo.codigo-acesso .digitos {
    display: flex;
}


.formulario .flex .campo.codigo-acesso .digitos .inp {
    border: 2px solid;
    border-radius: 10px;
    text-align: center;
    height: 50px;
    width: 50px;
}

.formulario .flex .campo.codigo-acesso .digitos .inp:focus {
    background: rgba(255, 255, 255, .05);
}

.formulario .flex .campo.codigo-acesso .digitos .inp:not(:last-child) {
    margin-right: 10px;
}



.formulario .flex .campo.radio {
    min-height: 50px;
    /**/
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .05);
}


.formulario .flex .campo.radio .container-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    padding-right: 0px;
    /**/
    flex-grow: 1;
    /**/
    margin-right: -10px;
}


.formulario .flex .campo.radio .container-opcoes .opcao {
    transition: .2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    /**/

    padding: 10px;
    border-radius: 10px;
    /**/
    /*
    border: 1px solid rgba(0, 0, 0, .05);
    flex-basis: 25%; /*Deixa a linha de 3 em 3*/
    /**/
}


.formulario .flex .campo.radio .container-opcoes .opcao:hover {
    opacity: .9;
}


.formulario .flex .campo.radio .container-opcoes .opcao label {
    cursor: pointer;
    /**/
    flex-grow: 1;
    /**/
    font-weight: 200;
}


.formulario .flex .campo.radio .container-opcoes .opcao input {
    margin: 0;
}

.formulario .flex .campo.radio .container-opcoes .opcao input:checked + label {
    color: initial;
    font-weight: initial;
}





@media screen and (max-width: 1000px) {
    .formulario {
        padding: 0px;
    }


    .formulario .secao {
        gap: 5px;
    }

    .formulario .secao .flex {
        gap: 5px;
    }

    .formulario .btn-container {
        margin-top: 0px;
    }

    .formulario .btn-container .btn {
        width: 100%;
    }

    .formulario .subtitulo {
        margin-top: 15px;
        padding-bottom: 10px; /*Compensar 5px de margem da fonte*/
        margin-bottom: 15px;
        padding-left: 14px; /*Compensar 1px de margem da fonte*/
    }

    .formulario .legenda {
        margin-top: 30px;
        padding-bottom: 0px;
        border-bottom: 0px;
        padding-left: 15px;
        font-weight: 400;
        opacity: .7;
    }

    .formulario .secao {
        padding-bottom: 15px;
    }

    .formulario .subtitulo + .secao {
        padding-top: 0px;
    }

    .formulario .secao:not(:last-child) {
        margin-bottom: 15px;
    }

    .formulario .flex {
        flex-direction: column;
    }

    .formulario .flex.metade {
        width: 100%;
    }



    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    .formulario .flex .campo .label {
        white-space: normal;
    }

    .formulario .flex .campo.area .label {
        margin-top: 0px;
    }


    .formulario .flex .campo {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 15px;
    }

    .formulario .flex .campo .inp {
        height: 45px;
    }

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/



    .formulario .flex .campo.radio .container-opcoes {
        padding-left: 0px;
    }

    .formulario .flex .campo.radio .container-opcoes .opcao {
        padding-left: 0px;
        white-space: normal;
    }




    .formulario .flex .campo.area textarea.inp {
        padding-top: 0px;
        margin-top: 15px;
    }

    .formulario .flex .campo-container[data-orientacao='Horizontal'] .campo textarea.inp {
        padding-top: 0px;
    }



    .formulario .flex .campo.area ~ .tag-auxiliar {
        height: 250px;
    }




    .formulario .flex .tag-auxiliar {
        height: 60px;
    }

    .formulario .flex .campo.check {
        height: 60px;
        flex: auto;
    }

    .formulario .flex .campo input[type='file'].inp {
        height: 60px;
    }

    .formulario .flex .campo input[type='file'].inp::-webkit-file-upload-button {
        height: 30px;
        margin-top: 15px;
    }


    .formulario .flex .campo.check input[type='checkbox'] {
        height: 25px;
        width: 25px;
        margin-right: 15px;
    }

    .formulario .flex .campo.check .label {
        white-space: normal;
    }

    .formulario .flex .campo.area .label,
    .formulario .flex .campo-container[data-orientacao='Vertical'] .campo .label {
        margin-top: 0px;
    }


    .formulario .flex .campo.cor {
        height: 60px;
        flex: auto;
    }


    .formulario .flex .campo.codigo-acesso {
        flex-direction: column;
    }

    .formulario .flex .campo.codigo-acesso .label {
        margin-right: 0px;
        margin-bottom: 30px;
        font-size: 21px;
    }

    .formulario .flex .campo.codigo-acesso .digitos {
        justify-content: space-between;
        width: 100%;
    }


    .formulario .subtitulo + .explicacao {
        margin-top: -15px;
    }

    .formulario .explicacao {
        margin-bottom: 15px;
        margin-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
    }


    .formulario .flex .campo .prefixo {
        display: none;
    }

    .formulario .flex .campo .sufixo {
        display: none;
    }
}


header {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 200px;
    background-color: black;
    border-radius: 25px;
    color: #fff;
    display: flex;
    align-items: center;
    margin: 25px;
    margin-top: 0px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

header .logo-geral {
    display: flex;
    height: 75px;
    width: 75px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

header .logo-geral img {
    width: 100%;
}



header .nome {
    color: rgba(255, 255, 255, .5);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 200;
    padding-top: 25px;
    padding-bottom: 25px;
    margin-left: 10px;
    display: none;
}




header .btn-voltar {
    height: 50px;
    padding-left: 25px;
    padding-right: 25px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: #fff;
    fill: #fff;
    background-color: rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: .2s ease-in-out;
    display: none;
}

header.sem-selecao .btn-voltar {
    display: flex;
}

header .btn-voltar:hover {
    transform: translateX(-5px);
}

header .btn-voltar .icone {
    height: 20px;
    width: 20px;
    margin-right: 10px;
    display: flex;
}

header nav {
    display: flex;
    margin-left: 25px;
    /**/
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
}










header.sem-selecao nav:not(:hover) {
    opacity: .2;
}

header.sem-selecao .logo-geral {
    display: none;
}


/*PRA FAZER O MENU SUMIR*/
/*
header nav::before {
    content: "";
    flex-shrink: 0;
    height: 75px;
    width: 25px;
    background: red;
    position: sticky;
    left: 0;
}
    */


body.logo-ativo nav {
    margin-left: 100px;
}

header nav::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: transparent;
}

header nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .3);
}




header nav .item {
    padding: 25px;
    color: rgba(255, 255, 255, .7);
    fill: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: .2s ease-in-out;
    border-bottom: 2px solid transparent;
    display: flex;
    height: 75px;
    align-items: center;
    white-space: nowrap;
}

header nav .item:hover {
    color: #fff;
    fill: #fff;
}

header nav .item.ativo {
    color: #fff;
    fill: #fff;
    border-bottom: 2px solid;
    z-index: 1;
    /**/
    /*position: sticky;
    left: 0;
    right: 0;*/
}


header nav .item.configuracoes {
    margin-left: auto;
}

header nav .item.configuracoes .label {
    display: none;
}

header nav .item.configuracoes .icone {
    margin-right: 0px;
}


header nav .item .icone {
    display: flex;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
}

header nav .item.ativo .icone {
}


header nav .item .icone .emoji {
    font-size: 21px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    line-height: 1;
}


@media screen and (max-width: 1000px) {


    header {
        flex-direction: column;
        margin: 5px;
        margin-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 220px;
    }

    header .logo-geral {
        height: 90px;
        width: 90px;
    }

    header .nome {
        padding-top: 30px;
        padding-bottom: 0px;
        padding-left: 15px;
        padding-right: 15px;
    }

    header nav {
        margin-left: 0px;
        border-top: 1px solid rgba(255, 255, 255, .05);
    }

    header nav .item {
        height: 60px;
    }


    header nav .item.configuracoes {
        margin-left: 0px;
    }


    header nav::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        background-color: transparent;
    }

    header nav::-webkit-scrollbar-thumb {
        background: transparent;
    }


    header nav .item .icone {
        display: flex;
        margin-right: 0px;
        height: 25px;
        width: 25px;
    }

    header nav .item .label {
        display: none;
    }
}

#impressao {
    min-height: 100vh;
    background: lightgrey;
    padding: 25px;
/*    zoom: .6;*/
}

#impressao::after {
    background: #fff;
}


#impressao .folha {

    width: 210mm;
    padding: 25px;
    min-height: 1120px;
    background-color: #fff;
    margin: 0 auto;
    margin-bottom: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

#impressao .folha.horizontal {
    width: 1124px;
    min-height: 795px;

}


#impressao .folha.a4 {
    min-height: 0px;
    width: 210mm;
    height: 297mm;
}


#impressao .folha.horizontal.a4 {
    min-height: 0px;
    height: 210mm;
    width: 297mm;
}








@media print {

    @page {
        margin: 0;
        padding: 0;
    }

    body {
        padding: 0px;
        background: transparent !important;
    }

    #impressao {
/*        zoom: 1;*/
        padding: 0px;
    }

    #impressao .folha {
        margin-bottom: 0px;
        box-shadow: none;
        break-inside: avoid;
    }

   
}


.indicadores {
    border-radius: 4px;
    display: flex;
}


.indicadores + .lista {
    margin-top: 25px;
}


.indicadores .indicador {
    background: rgba(255, 255, 255, .05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
}


.indicadores .indicador:not(:last-child) {
    margin-right: 10px;
}





.indicadores .indicador .valor-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.indicadores .indicador .valor-container .variacao {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    transform: translateY(3px);
}

.indicadores .indicador .valor-container .variacao .icone {
    height: 15px;
    width: 15px;
    display: flex;
}


.indicadores .indicador .valor .unidade {
    font-size: 14px;
    opacity: .7;
    letter-spacing: 1px;
}


.indicadores .indicador > .label {
    font-weight: 400;
    font-family: "Urbanist";
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 9px;
    margin-top: 5px;
    margin-right: -3px;
    color: #fff;
    opacity: .7;
}


.indicadores .indicador.vermelho {
    color: #f44336;
}

.indicadores .indicador.verde {
    color: #4caf50;
}

.indicadores .indicador.laranja {
    color: #ff9800;
}

.indicadores .indicador.amarelo {
    color: #ffeb3b;
}


.indicador-barra-progresso {
    margin-top: 25px;
    width: 100%;
    height: 10px;
    background: rgba(255,255,255, .2);
    border-radius: 10px;
    display: flex;
    overflow: hidden;
}

.indicador-barra-progresso .fill {
    height: 100%;
    border-radius: 10px;
}

.indicadores .btn-container {
    margin-left: auto;
}


@media screen and (max-width: 1000px) {

    .indicadores .indicador .label {
        opacity: .7;
    }

    .indicador-barra-progresso {
        margin-top: 15px;
    }

    .indicadores .btn-container {
        margin-left: 0px;
        margin-top: 5px;
    }

    .indicadores .btn-container .btn {
        width: 100%;
        margin-top: 0px;
    }
}

.item.detalhes {
    color: #1a1a1a;
    display: flex;
    align-items: center;
}


.item.detalhes.arquivado {
    filter: grayscale(1);
}




.item.detalhes .indice-ordem {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    background-color: rgba(0,0,0, .05);
    font-family: "Apple Display";
    flex-shrink: 0;
}


.item.detalhes .foto-container {
    height: 50px;
    flex-shrink: 0;
}

.item.detalhes .foto-container img {
    height: 100%;
    border-radius: 10px;
}


.item.detalhes .foto-container img.carregando {
    width: 50px;
    background-color: rgba(0, 0, 0, .05);
}

.item.detalhes .foto-container img.carregando.girando {
    animation: item-detalhes-imagem-carregando-girando 1s ease infinite;
}




.item.detalhes .foto-container img.erro {
    height: 50px;
    width: 50px;
    background: rgba(0, 0, 0, .05);
    border: 0;
    border: 2px solid #F44336;
}




@keyframes item-detalhes-imagem-carregando-girando {

    0% {
        background-color: rgba(0, 0, 0, .05);
        transform: rotate(0deg);
    }

    50% {
        background-color: rgba(0, 0, 0, .1);
    }

    100% {
        background-color: rgba(0, 0, 0, .05);
        transform: rotate(90deg);
    }
}





.item.detalhes .simbolo {
    height: 50px;
    width: 50px;
    border: 2px solid;
    color: #F89318;
    border-radius: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.item.detalhes .simbolo:not(:first-child) {
    margin-left: 25px;
}

.item.detalhes .simbolo.junto {
    margin-left: -10px;
}

.item.detalhes .icone-container {
    height: 50px;
    width: 50px;
    background-color: rgba(0, 0, 0, .05);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 10;
    cursor: default;
}




.item.detalhes .icones-container {
    display: flex;
}

.item.detalhes .icones-container .icone-container {
    background: #D6D6D8;
}


.item.detalhes .icones-container .icone-container:hover {
    z-index: 20;
    box-shadow: 3px 1px 1px 0px rgba(0, 0, 0, 0.05);
}

.item.detalhes .icones-container .icone-container + .icone-container {
    margin-left: -25px;
    box-shadow: -3px 1px 1px 0px rgba(0, 0, 0, 0.05);
    z-index: 15;
}


.item.detalhes .icones-container .icone-container + .icone-container:hover {
    box-shadow: -3px 1px 1px 0px rgba(0, 0, 0, 0.05);
}







.item.detalhes .icone-container.ghost {
    background-color: transparent;
    border: 1px solid;
}


.item.detalhes .icone-container > .icone {
    fill: #e77a1d;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.item.detalhes .icone-container > .icone svg {
    height: 100%;
    width: 100%;
}


.item.detalhes .icone-container > .icone .emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    /**/
    font-size: 21px;
    height: 100%;
    width: 100%;
    /**/
    /*transform: translateY(-2px);*/ /*EMOJIS DO CHROME. DO IPHONE COMO LIDAR?*/
    font-family: initial;
    /**/
    line-height: 1;
}




.item.detalhes .icone-container > .icone.grupo .icone,
.item.detalhes .icone-container > .icone.grupo-2 .icone {
    flex-shrink: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.item.detalhes .icone-container > .icone.grupo .icone:nth-child(1) {
    width: 15px;
    top: -10px;
}

.item.detalhes .icone-container > .icone.grupo .icone:nth-child(2) {
    width: 15px;
    left: -6px;
    bottom: -5px;
}

.item.detalhes .icone-container > .icone.grupo .icone:nth-child(3) {
    width: 15px;
    right: -6px;
    bottom: -5px;
}

.item.detalhes .icone-container > .icone.grupo-2 .icone:nth-child(1) {
    left: -8px;
}

.item.detalhes .icone-container > .icone.grupo-2 .icone:nth-child(2) {
    width: 14px;
    right: -9px;
}

.lista-interna .item.detalhes .icone-container > .icone {
    fill: #561798;
}



.item.detalhes .icone-container > .mais {
    position: absolute;
    bottom: 5px;
    right: -4px;
    height: 15px;
    width: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

.item.detalhes .icone-container > .mais.border {
    border: 1px solid;
}

.item.detalhes .icone-container > .mais > div {
    line-height: 7px;
    transform: translateY(-0.1px) translateX(0.2px);
    font-size: 12px;
}


/* Columns */
.item.detalhes .coluna {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.item.detalhes .coluna.nowrap {
    white-space: nowrap;
}

.item.detalhes .coluna.principal {
    overflow: hidden;
}

.item.detalhes .coluna.principal:not(:last-child) {
    margin-right: 25px;
}

.item.detalhes .coluna:not(:first-child) {
    margin-left: 25px;
}

.item.detalhes .coluna.direita {
    text-align: right;
}

.item.detalhes .coluna.centro {
    text-align: center;
}

.item.detalhes .coluna.auto {
    margin-left: auto;
}

.item.detalhes .coluna.auto + .coluna.auto {
    margin-left: 25px;
}

.item.detalhes .coluna.flex {
    align-items: center;
    flex-direction: row;
}

.item.detalhes .coluna.flex.wrap {
    flex-wrap: wrap;
}

.item.detalhes .coluna.flex.direita {
    justify-content: flex-end;
}

.item.detalhes .borda {
    border-left: 1px solid rgba(0, 0, 0, .05);
    padding-left: 25px;
}

.item.detalhes .coluna .texto {
    line-height: 21px;
}

#modal .janela .box .conteudo .pagina-modal .fixo.cima.item.detalhes .coluna .texto {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 725px;
}

#modal .janela .box .conteudo .pagina-modal .fixo.cima.item.detalhes .coluna .texto .anexo {
    display: none;
}

#modal .janela .box .conteudo .pagina-modal .fixo.cima.item.detalhes .coluna .t1 + .texto {
    /*    margin-top: 5px;*/
}

/* Text Styles */
.item.detalhes .coluna .t1 {
    font-weight: 700;
}



.item.detalhes .coluna .legenda {
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 9px;
    /*    margin-bottom: 5px;*/
    color: grey;
    white-space: nowrap;
}

.item.detalhes .coluna .t1 + .legenda {
    /*    margin-top: 5px;*/
}

.item.detalhes .coluna .t2 {
    font-weight: 400;
    color: grey;
}

.item.detalhes .coluna .t2:not(:first-child) {
    /*    margin-top: 5px;*/
}





/*
.item.detalhes .coluna .t1,
.item.detalhes .coluna .t2 {
    display: flex;
    align-items: center;
    gap: 5px;
}



.item.detalhes .coluna .t1 .icone .emoji,
.item.detalhes .coluna .t2 .icone .emoji {
   display: flex;
   align-items: center;
}

    */


.item.detalhes .coluna .t3 {
    border-left: 1px solid rgba(0, 0, 0, .05);
    padding-left: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: grey;
    font-size: 12px;
}

.item.detalhes .coluna .t4 {
    border-right: 1px solid rgba(0, 0, 0, .05);
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: grey;
    font-size: 12px;
    margin-right: 25px;
}

.item.detalhes .coluna .t3 {
    max-width: 600px;
    color: grey;
    line-height: 21px;
}

/* Tags */
.item.detalhes .coluna .tag {
    border-radius: 100px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid transparent;
    /*    margin-right: 10px;*/
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    font-weight: 600;
    background-color: rgba(0,0,0, .05);
}

.item.detalhes .coluna .tag.ghost {
    font-weight: 400;
    border: 1px solid;
    background-color: transparent;
}

.item.detalhes .coluna .tag.nowrap {
    white-space: nowrap;
}

.item.detalhes .coluna .tag.label {
    margin-right: 0;
}

.item.detalhes .coluna .tag.ghost {
}

.item.detalhes .coluna .tag .dot {
    margin-bottom: 1px;
}

.item.detalhes .coluna .tag.maior {
    font-size: 11px;
    padding: 13px 18px;
}



.item.detalhes .coluna .tag:last-child {
    margin-right: 0;
}


.item.detalhes .coluna .tag.neutro {
}

/* Buttons */
.item.detalhes .coluna.botoes {
    display: flex;
    align-items: center;
}

.item.detalhes .coluna.botoes > .botao:not(:first-child) {
    margin-left: 10px;
}

/* Indicators */
.item.detalhes .coluna .indicador {
    background-color: rgba(0, 0, 0, .03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 65px;
    margin-right: -20px;
    padding: 0 10px;
    border-radius: 10px;
    min-width: 100px;
}

.item.detalhes .coluna .indicador.ghost {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .05);
}

.item.detalhes .coluna .indicador.vermelho {
    background-color: #f44336;
    color: #fff;
}

.item.detalhes .coluna .indicador.verde {
    background-color: #4caf50;
    color: #fff;
}

.item.detalhes .coluna .indicador.amarelo {
    background-color: #ffc107;
    color: #fff;
}


.item.detalhes .coluna .indicador.laranja {
    background-color: #ff9800;
    color: #fff;
}


.item.detalhes .coluna .indicador .valor {
    font-weight: 800;
    white-space: nowrap;
    display: flex;
    align-items: center;
}



.item.detalhes .coluna .indicador .label {
    font-weight: 400;
    font-family: "Urbanist";
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 9px;
    color: inherit;
    margin-top: 7px;
    margin-right: -3px; /* Compensate additional right space */
    opacity: .7;
    white-space: nowrap;
}

/* fora do bloco */
.pagina-modal .fixo.cima.item.detalhes > .coluna:last-child .indicador {
    margin-right: 0;
}

/* dentro do bloco */
.pagina-modal .fixo.cima.item.detalhes .bloco:last-child .coluna:last-child .indicador {
    margin-right: 0;
}




/* BLOCO */
/* ----------------------------------------------------------- */

.item.detalhes .bloco {
    display: flex;
    align-items: center;
}



.item.detalhes .scroll {
    display: flex;
    align-items: center;
    margin-left: auto;
    overflow-x: auto;
}

.item.detalhes .scroll::-webkit-scrollbar {
    height: 4px;
    background-color: transparent;
}

.item.detalhes .scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0, .05);
    border-radius: 10px;
}

.item.detalhes .card > .bloco:first-child {
    margin-right: auto;
}

.item.detalhes .bloco:first-child + scroll {
}

.item.detalhes .bloco:first-child:not(:last-child) {
    padding-right: 25px;
}

.item.detalhes .bloco:not(:first-child):not(:last-child) {
    margin-right: 25px;
}


.item.detalhes .coluna > .icone {
    height: 15px;
    width: 15px;
    display: flex;
}



.item.detalhes .coluna > .flex {
    display: flex;
    align-items: center;
}

.item.detalhes .coluna > .flex .icone {
    margin-right: 5px;
}

.item.detalhes .t1 .dot, .item.detalhes .t2 .dot {
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 0, .1);
    border-radius: 10px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    display: inline-flex;
}



/* ----------------------------------------------------------- */


.item.detalhes .card {
    display: flex;
    align-items: center;
    flex-grow: 1;
    max-width: 100%;
}


.item.detalhes .super-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: 15px; /* Compensar os 10px de padding padrão */
    padding-bottom: 15px; /* Compensar os 10px de padding padrão */
    gap: 25px;
}

.item.detalhes .super-card .cabecalho {
    width: 100%;
}

.item.detalhes .super-card .cabecalho.grande .foto-container {
    height: 150px;
}

.pagina-modal .fixo.cima.item.detalhes .super-card .cabecalho.grande .foto-container {
    height: 50px;
}


.item.detalhes .super-card .linha {
    border-top: 1px solid rgba(0,0,0, .05);
    width: 100%;
    padding-top: 25px;
    display: flex;
}



.item.detalhes .container-barra-progresso {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item.detalhes .container-barra-progresso .barra-progresso {
    height: 10px;
    min-width: 200px;
    width: 100%;
    display: flex;
    background: rgba(0,0,0, .05);
    border-radius: 10px;
    overflow: hidden;
}

.item.detalhes .container-barra-progresso .barra-progresso .fill {
    background: #4CAF50;
}

.item.detalhes .container-barra-progresso .numero {
    font-size: 11px;
}


/*Variacoes*/

/*Embaixo de uma legenda*/
.item.detalhes .coluna .legenda + .container-barra-progresso {
    margin-top: 10px;
}


/*v1*/
.item.detalhes .container-barra-progresso.variacao-1 {
    flex-direction: row-reverse;
}



/*v2*/
.item.detalhes .container-barra-progresso.variacao-2 .numero {
    display: none;
}



/*v3*/
.item.detalhes .container-barra-progresso.variacao-3 .barra-progresso {
    height: 5px;
}

/*v4*/
.item.detalhes .container-barra-progresso.variacao-4 {
    flex-direction: row-reverse;
}

.item.detalhes .container-barra-progresso.variacao-4 .barra-progresso {
    height: 5px;
}


/*v5*/
.item.detalhes .container-barra-progresso.variacao-5 .barra-progresso {
    height: 5px;
}

.item.detalhes .container-barra-progresso.variacao-5 .numero {
    display: none;
}



/*------------------------------------------------------*/


.pagina-modal .fixo.cima .super-card {
    padding: 0px;
}

.pagina-modal .fixo.cima .super-card .linha {
    display: none;
}

















/* ----------------------------------------------------------- */

@media screen and (max-width: 1000px) {

    .item.detalhes {
    }

    .item.detalhes .indice-ordem {
        height: 30px;
        width: 30px;
    }

    .item.detalhes .foto-container {
        margin-left: -7.5px;
        border-radius: 10px;
        overflow: hidden;
        height: 45px;
    }

    .item.detalhes .icone-container {
        flex-shrink: 0;
        height: 25px;
        width: 25px;
        background-color: transparent;
    }

    .item.detalhes .icone-container > .icone {
        width: 25px;
        height: 25px;
    }

    .item.detalhes .simbolo {
        height: 60px;
        width: 60px;
    }



    .item.detalhes .coluna:not(:first-child) {
        margin-left: 15px;
    }

    .item.detalhes .coluna.principal {
        margin-right: 0;
    }

    /*
        VAI SUMIR COM AS COLUNAS QUE NÃO ESTIVEREM DENTRO DE UM BLOCO
        E QUE NÃO FOREM DO CABECALHO DA MODAL
    */
    .item.detalhes > .coluna:not(.principal) {
        display: none;
    }


    /*T1 E T2*/
    .item.detalhes > .coluna .t2 {
        display: none;
    }

    .item.detalhes .coluna .t2:not(:first-child) {
        margin-top: 0px;
    }



    /* CABEÇALHO DA MODAL */

    .pagina-modal .fixo.cima.item.detalhes .icone-container {
        margin-right: 0;
        height: 30px;
        width: 30px;
        display: none;
    }

    .pagina-modal .fixo.cima.item.detalhes .coluna {
        margin-left: 0;
    }

    .pagina-modal .fixo.cima.item.detalhes .coluna .t1 {
        font-weight: 700;
    }

    .pagina-modal .fixo.cima.item.detalhes .coluna.principal:not(:last-child) {
        margin-right: 0px;
    }

    .pagina-modal .item.detalhes .foto-container {
        display: none;
    }

    .pagina-modal .item.detalhes .t2 {
        display: none;
    }






    /* BLOCO MOBILE */
    /* ----------------------------------------------------------- */

    .item.detalhes .scroll {
        display: flex;
        flex-direction: column;
    }


    .item.detalhes .bloco:first-child {
        padding-right: 0px;
    }

    .item.detalhes .bloco .coluna.direita {
        text-align: left;
    }

    /*Item que não é o primeiro bloco, e é o t2 acompanhado de uma legenda */
    .item.detalhes .bloco:not(:first-child) .coluna .legenda + .t2,
    .item.detalhes .linha .bloco .coluna .legenda + .t2 {
        font-size: 12px;
        line-height: 14px !important;
    }





    /* CABECALHO MODAL - PRIMEIRO BLOCO*/
    .pagina-modal .fixo.cima.item.detalhes .bloco:first-child {
        margin-right: 0;
        padding-right: 0;
        justify-content: center;
    }

    /* CABECALHO MODAL - DEMAIS BLOCOS QUE NAO O PRIMEIRO*/
    .pagina-modal .fixo.cima.item.detalhes .bloco:not(:first-child) {
        display: none;
    }



    .pagina-modal .fixo.cima.item.detalhes .card {
        justify-content: center;
    }




    .item.detalhes .coluna > .flex {
        flex-direction: row;
    }

    .pagina-modal .fixo.cima .item.detalhes .coluna > .flex .icone {
        display: none;
    }


    .item.detalhes .super-card {
        padding: 0px;
        gap: 15px;
    }

    .item.detalhes .super-card .foto-container {
        margin-left: 0px;
    }


    .item.detalhes .super-card .cabecalho.grande > .bloco {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .item.detalhes .super-card .cabecalho.grande > .bloco .coluna:not(:first-child) {
        margin-left: 0px;
        margin-top: 10px;
        text-align: center;
    }

    .pagina-modal .fixo.cima.item.detalhes .super-card .cabecalho.grande > .bloco .coluna:not(:first-child) {
        margin-top: 0px;
    }

    .item.detalhes .super-card .cabecalho.grande .foto-container {
        height: auto;
        width: 100%;
    }

    .item.detalhes .super-card .cabecalho.grande .foto-container img {
        height: auto;
        width: 100%;
    }

    .item.detalhes .super-card .linha {
        padding-top: 15px;
        flex-direction: column;
        gap: 15px;
    }


    .item.detalhes .borda {
        border: 0px;
        padding-left: 0px;
    }
}



.legenda-quantidade-registros {
    padding: 25px;
    padding-top: 0px;
}

.legenda-quantidade-registros .texto {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: grey;
}

.legenda-quantidade-registros .texto .label {
    font-weight: 200;
}

.legenda-quantidade-registros .texto .numero {
    font-weight: 600;
}

.container-indice {
    display: flex;
    align-items: stretch;
}

.container-indice:not(:last-child) {
    margin-bottom: 25px;
}

.container-indice .indice {
    transition: .2s ease-in-out;
    margin-right: 25px;
    padding-right: 25px;
    width: 125px;
    padding-top: 25px;
    padding-bottom: 25px;
    margin-right: 0px;
    display: flex;
    opacity: .7;
}

.container-indice .indice.nowrap {
    white-space: nowrap;
    width: auto;
}


.container-indice .indice.centro {
    align-items: center;
}


.container-indice .indice ~ .lista {
    border-left: 1px dashed;
    padding-left: 10px;
    border-radius: 4px;
}

.container-indice .indice .icone {
    display: flex;
    height: 20px;
    width: 20px;
    fill: #fff;
}


.container-indice .indice .dot {
    height: 10px;
    width: 10px;
    display: inline-flex;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 100%;
    margin-left: 10px;
    margin-right: 10px;
}

.container-indice .indice .dot:first-child {
    margin-left: 0px;
}

.container-indice .indice > *:not(.dot) {
    transition: .2s ease-in-out;
}

.container-indice:hover .indice {
    opacity: 1;
}

.container-indice .indice > .legenda {
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 9px;
    line-height: 14px;
    margin-bottom: -3px; /*Comepnsar line heihght*/
    color: #fff;
    text-align: right;
    width: 100%;
}





.lista {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.lista.extra {
    margin-bottom: 75px;
}

.lista .item {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    width: 100%;
    cursor: pointer;
    transition: .2s ease-in-out;
    min-height: 75px;
    overflow: hidden;
}

.lista .item.detalhes.altura-automatica {
    height: auto;
}





.lista .identado {
    padding-left: 25px;
    border-left: 1px dashed rgba(0,0,0, .05);
}

.lista .identado:not(:last-child) {
    margin-bottom: 10px;
}



.lista .identado.tipo-1 .item {
    margin-top: -15px;
}


.lista.extra .item {
    border: 2px solid #e77a1d;
}

.lista .item:hover {
    transform: translateY(-4px);
    box-shadow: 0px 4px 10px -4px rgba(0, 0, 0, .3);
}

.lista .item:last-child {
    margin-bottom: 0px;
}


.lista-vazia {
    padding: 25px;
    background-color: rgba(255, 255, 255, .05);
    border-radius: 10px;
    color: rgba(255, 255, 255, .7);
    text-align: center;
    flex-direction: column;
    display: flex;
    align-items: center;
    gap: 25px;
    /**/
    font-weight: 200;
    font-style: italic;
    font-size: 12px;
}

.lista-vazia .btn-container {
    width: 100%;
    justify-content: center;
    padding: 25px;
    padding-bottom: 0px;
    border-top: 1px dashed rgba(0,0,0, .05);
}


.lista > .legenda:first-child {
    margin-top: 25px;
}

.lista > .legenda {
    margin-top: 50px;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 25px;
    border-bottom: 1px dashed rgba(255, 255, 255, .07);
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    opacity: .7;
}

.lista > .legenda .coluna.auto {
    margin-left: auto;
}

.lista > .legenda .coluna .t1 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
}

.lista > .legenda .coluna .t2 {
    font-weight: 200;
}

.lista > .legenda .coluna .t2:not(:first-child) {
    margin-top: 5px;
}

.lista > .legenda .coluna .t2 strong {
    font-weight: 600;
}


.lista > .legenda .coluna .tag {
    border-radius: 10px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid transparent;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
}


.lista > .legenda .coluna .tag.label {
    padding: 0px;
}

.lista > .legenda .coluna .tag .dot {
    height: 4px;
    width: 4px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, .3);
    display: inline-flex;
    flex-shrink: 0;
    margin-bottom: 1px;
}



.rodape-registros-excluidos {
    padding: 10px;
    border-top: 1px solid rgba(0,0,0, .05);
    margin-top: 25px;
    text-align: center;
    color: grey;
    display: flex;
    filter: grayscale(1);
    /**/
    justify-content: flex-end;
}

.rodape-registros-excluidos .btn {
    padding: 0px;
    font-size: 11px;
    gap: 3px;
    height: auto;
    font-weight: 200;
}

.rodape-registros-excluidos .btn:hover {
    transform: translateY(-2px);
}

.rodape-registros-excluidos .btn .emoji {
    font-size: 12px;
}




.lista .item .bloco.zoom {
    zoom: .7;
}

.lista .item:hover .bloco.zoom {
    zoom: 1;
}



.paginacao {
    display: flex;
    padding: 25px;
    color: grey;
    font-weight: 200;
}

.paginacao.inicio {
    border-bottom: 1px dashed rgba(0, 0, 0, .05);
    margin-bottom: 25px;
    padding-top: 0px;
    padding-bottom: 10px;
}

.paginacao .numero-pagina {
    flex-grow: 1;
    text-align: center;
    font-size: 11px;
}

.paginacao.fim {
    border-top: 1px dashed rgba(0, 0, 0, .05);
    margin-top: 25px;
    padding-bottom: 0px;
    padding-top: 10px;
}



@media screen and (max-width: 900px) {
    .lista .item {
        height: auto;
        min-height: 60px;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 5px;
    }

    .container-indice {
        flex-direction: column;
    }

    .container-indice .indice {
        width: auto;
        padding: 15px;
    }

    .container-indice:not(:last-child) {
        margin-bottom: 15px;
    }

    .container-indice .indice > .legenda {
        text-align: left;
    }

    .container-indice .indice ~ .lista {
        margin-left: 0px;
        border-left: 0px;
        padding-left: 0px;
    }

    .lista-vazia {
        font-weight: 200;
        line-height: 24px;
        color: rgba(255, 255, 255, .3);
    }



    /* CARD MOBILE */
    /* ----------------------------------------------------------- */

    .lista .item.detalhes .card {
        flex-direction: column;
    }


    .lista .item.detalhes .card .bloco:first-child:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, .05);
        padding-bottom: 15px;
    }


    .lista .item.detalhes .card .bloco:not(:last-child) {
        margin-bottom: 15px;
    }

    .lista .item.detalhes .card .bloco {
        margin-right: 0px;
        width: 100%;
    }

    .lista .item.detalhes .card .bloco .coluna {
        flex-grow: 1;
    }



    .lista .item.detalhes .card .bloco .coluna .t1,
    .lista .item.detalhes .card .bloco .coluna .t2 {
        white-space: normal;
        line-height: 21px;
    }

    .lista .item.detalhes .card .coluna .indicador {
        margin-right: 0px;
        width: 100%;
        padding: 15px;
        height: 60px;
    }


    .lista .item.detalhes .card .coluna .tag {
        text-align: center;
        width: 100%;
    }



    .lista .identado {
        padding-left: 15px;
    }



    .lista-vazia {
        padding: 15px;
        gap: 15px;
    }

    .lista-vazia .btn-container {
        padding: 15px;
        padding-bottom: 0px;
    }
}



#login .recuperacao-container {
    padding: 10px;
    text-align: center;
    color: #fff;
}

#login .recuperacao-container a {
    transition: .2s ease-in-out;
}


#login .recuperacao-container a:hover {
    opacity: .8;
}


#login .formulario .texto {
    color: #fff;
    line-height: 24px;
    font-weight: 200;
    margin-bottom: 25px;
    margin-left: 5px; /* Para harmonizar com o alinhamento do campo input */
}



@media screen and (max-width: 1000px)
{
    #login .formulario .texto {
        margin-bottom: 30px;
    }

}
#modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    /*padding: 25px;*/
    padding: 10px;
    z-index: 10000;
}

#modal.visivel {
    display: block;
}




#modal .janela {
    height: 100%;
    width: 100%;
    border-radius: 25px;
    /*padding: 25px;*/
    padding: 10px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#modal .janela .box {
    background-color: rgba(255, 255, 255, .9);
    border-radius: 25px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}


#modal .janela .box .icone-fechar {
    height: 25px;
    width: 25px;
    cursor: pointer;
    fill: rgba(0, 0, 0, .7);
    position: absolute;
    right: 25px;
    top: 25px;
    transition: .2s ease-in-out;
    z-index: 1;
}

#modal .janela .box .icone-fechar:hover {
    opacity: .8;
}



#modal .janela .box .icone-voltar {
    height: 25px;
    width: 25px;
    cursor: pointer;
    fill: rgba(0, 0, 0, .7);
    position: absolute;
    left: 25px;
    top: 25px;
    transition: .2s ease-in-out;
    z-index: 1;
    display: none;
}

#modal .janela .box .icone-voltar.visivel {
    display: block;
}

#modal .janela .box .icone-voltar:hover {
    opacity: .8;
}


#modal .janela .box .carregando,
#modal .janela .box .erro,
#modal .janela .box .conteudo {
    display: none;
}


#modal .janela .box .carregando {
    justify-content: center;
    align-items: center;
    height: 100%;
}

#modal .janela .box .carregando .spinner {
    height: 50px;
    padding: 10px;
    background: #fff;
    border-radius: 100%;
    opacity: .5;
}



#modal .janela .box .erro,
#modal .janela .box .carregando {
    padding: 25px;
}

#modal .janela .box .erro.visivel,
#modal .janela .box .conteudo.visivel {
    display: block;
}



#modal .janela .box .carregando.visivel {
    display: flex;
}


#modal .janela .box .conteudo {
    height: 100%;
    padding: 0px;
}

#modal .janela .box .conteudo .pagina-modal {
    height: 100%;
    display: flex;
    flex-direction: column;
    /**/
    overflow: hidden; /*Coloquei isso porque nas modal com formulario, quando encolhia, aparecia uma barra de scroll gigantesca.*/
}

#modal .janela .box .conteudo .pagina-modal .fixo {
    padding: 25px;
    flex-shrink: 0;
}

#modal .janela .box .conteudo .pagina-modal .fixo.cima {
    background: linear-gradient(0deg, rgba(255, 255, 255, .3), transparent);
    border-radius: 10px;
    box-shadow: 0px 3px 4px -4px rgba(0,0,0,.3);
}




#modal .janela .box .conteudo .pagina-modal .fixo.baixo {
    background: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent);
    border-radius: 10px;
    box-shadow: 0px -3px 4px -4px rgba(0, 0, 0, .3);
}

#modal .janela .box .conteudo .pagina-modal .fixo.baixo .btn-container .btn-auxiliar {
    margin-left: auto;
}

#modal .janela .box .conteudo .pagina-modal .fixo.baixo .btn-container .btn-auxiliar + .btn-auxiliar {
    margin-left: 25px;
}


#modal .janela .box .conteudo .pagina-modal .fixo.baixo .btn-container .campos {
    display: flex;
}

#modal .janela .box .conteudo .pagina-modal .fixo.baixo .btn-container .campos.auto {
    margin-left: auto;
}


#modal .janela .box .conteudo .pagina-modal .fixo.cima,
#modal .janela .box .conteudo .pagina-modal .fixo.baixo {
    transition: margin .2s ease-in-out;
}

#modal .janela .box .conteudo .pagina-modal .fixo.cima.escondido {
    margin-top: -75px;
}

#modal .janela .box .conteudo .pagina-modal .fixo.baixo.escondido {
    margin-bottom: -75px;
}


#modal .janela .box .conteudo .pagina-modal .fixo.cima.escondido:hover {
    margin-top: 0px;
}

#modal .janela .box .conteudo .pagina-modal .fixo.baixo.escondido:hover {
    margin-bottom: 0px;
}


#modal .janela .box .conteudo .pagina-modal .overflow {
    overflow-y: scroll;
    flex-grow: 1;
    margin-right: -5px; /*COMPENSA A BARRA DE SCROLL*/
    /**/
    /** Adicionei esse pra deixar a mensagem dos usuaiors responsaveis sempre lá em baixo*/
    display: flex;
    flex-direction: column;
}

#modal .janela .box .conteudo .pagina-modal .overflow.centro {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

#modal .janela .box .conteudo .pagina-modal .overflow::-webkit-scrollbar {
    width: 5px;
}

#modal .janela .box .conteudo .pagina-modal .overflow::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .1);
    border-radius: 10px;
}

#modal .janela .box .conteudo .pagina-modal .overflow .aviso {
    padding: 25px;
    border-radius: 10px;
    margin-top: 25px;
    margin-left: 25px;
    margin-right: 25px;
    text-align: center;
    height: 50px;
    justify-content: center;
    display: flex;
    align-items: center;
}

#modal .janela .box .conteudo .pagina-modal .overflow .aviso.vermelho {
    border: 2px solid #ff9d9d;
    background-color: #F44336;
    color: #fff;
}


@media screen and (max-width: 1000px) {
}


@media screen and (max-width: 1000px) {


    #modal {
        padding: 0px;
    }

    #modal .janela {
        height: 100dvh;
        border-radius: 0px;
        padding: 5px;
    }




    #modal .janela .box {
        border-radius: 10px;
    }

    #modal .janela .box .icone-fechar,
    #modal .janela .box .icone-voltar {
        opacity: .3;
        height: 25px;
        width: 25px;
    }

    #modal .janela .box .icone-voltar {
        left: 15px;
        top: 17px;
    }

    #modal .janela .box .icone-fechar {
        right: 15px;
        top: 17px;
    }

    #modal .janela .box .conteudo .pagina-modal .fixo.cima {
        padding-bottom: 15px;
        padding-top: 15px;
        padding-left: 60px;
        padding-right: 60px;
        text-align: center;
        margin-left: 0px;
        margin-right: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        /*height: 60px;*/
        min-height: 60px;
        height: auto;
    }

    #modal .janela .box .conteudo .pagina-modal .overflow {
        padding: 5px;
        padding-top: 15px;
        margin-right: 0px;
    }

    #modal .janela .box .conteudo .pagina-modal .fixo.baixo {
        padding: 15px;
    }

    #modal .janela .box .conteudo .pagina-modal .fixo.baixo .btn-container {
        flex-direction: column;
    }


    #modal .janela .box .conteudo .pagina-modal .fixo.baixo .btn-container .btn {
        width: 100%;
    }



    #modal .janela .box .conteudo .pagina-modal .fixo.cima,
    #modal .janela .box .conteudo .pagina-modal .fixo.baixo {
        transition: margin .2s ease-in-out;
    }

    #modal .janela .box .conteudo .pagina-modal .fixo.cima.escondido {
        margin-top: 0px;
    }

    #modal .janela .box .conteudo .pagina-modal .fixo.baixo.escondido {
        margin-bottom: 0px;
    }
}


.ola {
    padding-left: 25px;
}

.ola h1 {
    text-align: left;
    margin-left: 0px;
    font-size: 42px;
    font-weight: 400;
}

.ola .nome {
    font-weight: 500;
}

.ola p {
    color: rgba(255, 255, 255, .7);
    margin-top: 10px;
}


@media screen and (max-width: 900px)  {

    .ola {
        padding-left: 30px;
        padding-right: 30px;
        padding: 30px;
    }

    .ola h1 {
        text-align: center;
    }

    .ola p {
        text-align: center;
        
       
    }
}
.pagina-modal.secundaria .item.detalhes > .icone-container > .icone {
    fill: #7d21de;
}

/* Overflow */
.pagina-detalhes:not(.pagina-formulario) .overflow {
    padding: 25px;
}

.pagina-detalhes .overflow > .flex:not(:last-child),
.pagina-detalhes .overflow .caixa .informacoes .flex:not(:last-child) {
    margin-bottom: 10px;
}

/* Image Container */
.pagina-detalhes .imagem {
    padding: 25px;
    background: rgba(0, 0, 0, .02);
    margin-bottom: 25px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
}

.pagina-detalhes .imagem img {
    max-width: 100%;
    border-radius: 10px;
}

/* Flex Container */
.pagina-detalhes .flex {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.pagina-detalhes .flex.centro {
    align-items: center;
}

.pagina-detalhes .flex.stretch {
    align-items: stretch;
}

/* Header */
.pagina-detalhes .header {
    margin-top: 25px;
    margin-bottom: 25px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0, .05);
}

.overflow .flex + .header {
    margin-top: 50px;
}

.pagina-detalhes .header .dot {
    height: 10px;
    width: 10px;
    display: inline-flex;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 100%;
    margin-left: 10px;
    margin-right: 10px;
}

.pagina-detalhes .header .dot:first-child {
    margin-left: 0px;
}

.pagina-detalhes .header h2 + h4 {
    margin-top: 10px;
}

/* Caixa Container */
.pagina-detalhes .flex .caixa {
    background-color: rgba(0, 0, 0, .03);
    padding: 25px;
    width: 100%;
    flex: 1;
    margin-right: 25px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}




.pagina-detalhes .flex .caixa.c-2 {
    flex: 2;
}

.pagina-detalhes .flex .caixa.c-3 {
    flex: 3;
}

.pagina-detalhes .flex .caixa.transparente {
    background-color: transparent;
    border: 1px solid rgba(0,0,0, .05);
}

.pagina-detalhes .flex .caixa.highlight {
    border: 2px solid #F89318;
}

.pagina-detalhes .flex .caixa.highlight.vermelho {
    border-color: #F44336;
}

.pagina-detalhes .flex .caixa.highlight.verde {
    border-color: #4caf50;
}

.pagina-detalhes .flex .caixa.highlight.rosa {
    border-color: #bb54d2;
}

.pagina-detalhes .flex .caixa.highlight.vermelho-claro {
    border-color: #e91e63;
}

.pagina-detalhes .flex .caixa.highlight.roxo {
    border-color: #7d21de;
}

.pagina-detalhes .flex .caixa.highlight.cinza {
    border-color: grey;
}


.pagina-detalhes .flex .caixa:last-child {
    margin-right: 0px;
}

/* Caixa Title Container */
.pagina-detalhes .flex .caixa .container-titulo {
    display: flex;
    align-items: center;
    width: 100%;
}

.pagina-detalhes .flex .caixa:not(.fechada) .container-titulo {
    margin-bottom: 25px;
}

.pagina-detalhes .flex .caixa.colapsavel .container-titulo {
    cursor: pointer;
}

.pagina-detalhes .flex .caixa .container-titulo .colapsar .icone {
    width: 10px;
    height: 6px;
    margin-right: 20px;
    display: flex;
    transform: rotate(180deg);
    fill: rgba(0, 0, 0, .3);
    transition: .2s ease-in-out;
}

.pagina-detalhes .flex .caixa:not(.colapsavel) .container-titulo .colapsar .icone {
    display: none;
}

.pagina-detalhes .flex .caixa.colapsavel .container-titulo:hover .colapsar .icone {
    fill: rgba(0, 0, 0, .7);
}

.pagina-detalhes .flex .caixa.fechada .container-titulo .colapsar .icone {
    transform: rotate(90deg);
}

.pagina-detalhes .flex .caixa.fechada .container-titulo:hover .colapsar .icone {
    /*    transform: rotate(95deg);*/
}

/* Caixa Title */
.pagina-detalhes .flex .caixa .container-titulo .titulo {
    display: flex;
    align-items: center;
    transition: .2s ease-in-out;
    width: 100%;
    gap: 15px;
}


.pagina-detalhes .flex .caixa:not(.colapsavel) .container-titulo .titulo {
    margin-left: 5px;
}


.pagina-detalhes .flex .caixa .container-titulo .titulo .icone {
    height: 20px;
    width: 20px;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    transition: .2s ease-in-out;
    /**/
    /*    filter: grayscale(1);*/ /* SE ATIVADO, DEIXA TODOS OS ÍCONES SEM COR. EXCETO COM HOVER NA CAIXA, OU QDO A CAIXA ESTIVER ABERTA */
}

.pagina-detalhes .flex .caixa:hover .container-titulo .titulo .icone,
.pagina-detalhes .flex .caixa:not(.fechada) .container-titulo .titulo .icone {
    filter: none;
}


.pagina-detalhes .flex .caixa .container-titulo .titulo .icone .emoji {
    display: flex;
    align-items: center;
    font-size: 21px;
    height: 100%;
    width: 100%;
    justify-content: center;
    line-height: 15px;
}

.pagina-detalhes .flex .caixa .container-titulo .titulo .label {
    line-height: 15px;
}


.pagina-detalhes .flex .caixa .container-titulo .titulo .numero {
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 1px;
    margin-top: 0;
    background: rgba(0, 0, 0, .05);
    padding: 2px 5px 2px 5px;
    border-radius: 4px;
    text-align: center;
    /**/
    /*    margin-left: auto;*/
}






.pagina-detalhes .flex .caixa .container-titulo .titulo .numero.invisivel {
    opacity: .5;
}

.pagina-detalhes .flex .caixa .container-titulo .titulo .tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pagina-detalhes .flex .caixa .container-titulo .titulo .tags.direita {
    justify-content: flex-end;
}

.pagina-detalhes .flex .caixa .container-titulo .titulo .tags .tag {
    border-radius: 100px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid transparent;
    margin-right: 10px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    font-weight: 600;
    background-color: rgba(0, 0, 0, .05);
}



.pagina-detalhes .flex .caixa.colapsavel .container-titulo:hover .titulo .label {
    color: rgba(0, 0, 0, .7);
}

.pagina-detalhes .flex .caixa.colapsavel .container-titulo > .btn-container {
    margin-top: -10px;
    margin-bottom: -10px;
    gap: 10px;
}


.pagina-detalhes .flex .caixa.colapsavel .container-titulo > .icones {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.pagina-detalhes .flex .caixa.colapsavel .container-titulo > .icones a {
    display: flex;
}

.pagina-detalhes .flex .caixa.colapsavel .container-titulo > .icones a .icone {
    height: 15px; /*15px tava cortando o icone...*/
    width: 15px;
    fill: grey;
    transition: .2s ease-in-out;
    flex-shrink: 0;
}

.pagina-detalhes .flex .caixa.colapsavel .container-titulo > .icones a .icone svg {
    overflow: visible;
}


.pagina-detalhes .flex .caixa.colapsavel .container-titulo > .icones a .icone:hover {
    fill: #1a1a1a;
}




.pagina-detalhes .flex .caixa.highlight .titulo {
    color: #F89318;
}

.pagina-detalhes .flex .caixa.highlight.vermelho .titulo {
    color: #F44336;
}

.pagina-detalhes .flex .caixa.highlight.verde .titulo {
    color: #4caf50;
}

.pagina-detalhes .flex .caixa.highlight.rosa .titulo {
    color: #bb54d2;
}

.pagina-detalhes .flex .caixa.highlight.vermelho-claro .titulo {
    color: #e91e63;
}

.pagina-detalhes .flex .caixa.highlight.roxo .titulo {
    color: #7d21de;
}

.pagina-detalhes .flex .caixa.highlight.cinza .titulo {
    color: grey;
}

.pagina-detalhes .flex .caixa .titulo .legenda {
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-left: 15px;
    margin-top: -10px;
    margin-bottom: -10px;
}

.pagina-detalhes .flex .caixa .titulo .legenda.ghost {
    border: 1px solid;
}

.pagina-detalhes .flex .caixa .subtitulo {
    margin-top: 25px;
    color: grey;
    line-height: 20px;
    text-align: center;
}

/* Caixa Icon */
.pagina-detalhes .flex .caixa > .icone {
    height: 15px;
    width: 15px;
    position: absolute;
    right: 25px;
    top: 25px;
    cursor: pointer;
    transition: .2s ease-in-out;
    fill: rgba(0, 0, 0, .3);
}

.pagina-detalhes .flex .caixa > .icone:hover {
    fill: rgba(0, 0, 0, .7);
}

/* Caixa Information */
.pagina-detalhes .flex .caixa .informacoes {
}

.pagina-detalhes .flex .caixa.fechada .informacoes {
    display: none;
}

.pagina-detalhes .flex .caixa .informacoes .item:not(:last-child) {
    margin-bottom: 25px;
}

.pagina-detalhes .flex .caixa .informacoes .item .label {
    font-weight: 600;
    white-space: nowrap;
}

.pagina-detalhes .flex .caixa .informacoes .item.vertical .label {
    margin-top: 15px;
}



.pagina-detalhes .flex .caixa .informacoes .item.area .valor {
    line-height: 21px;
}

.pagina-detalhes .flex .caixa .informacoes .item .valor {
    width: 100%;
    padding: 15px;
    /**/
    /**/
    /*margin: 15px;*/
    border-radius: 5px;
    /**/
}

.pagina-detalhes .flex .caixa .informacoes .item .valor::selection {
    background-color: #7d21de;
    color: #fff;
}


.pagina-detalhes .flex .caixa .informacoes .item.vertical .valor {
    padding-left: 0px;
    margin-right: 25px;
    background: transparent;
}


/* VALOR VAZIO */
.pagina-detalhes .flex .caixa .informacoes .item.vazio .valor {
    background-color: rgba(0, 0, 0, 0.02);
    margin-left: 15px;
    margin-right: 15px;
    padding: 0;
    height: 10px;
    border-radius: 4px;
}


.pagina-detalhes .flex .caixa .informacoes .item .valor.na {
    color: rgba(0, 0, 0, 0.3);
    font-weight: 200;
    font-style: italic;
}

.pagina-detalhes .flex .caixa .informacoes .item .valor .link {
    color: #2196f3;
    line-break: anywhere;
}

.pagina-detalhes .flex .caixa .informacoes .item .valor .link.whatsapp {
    color: #25d366;
}




.pagina-detalhes .flex .caixa .informacoes .item .valor ul {
    margin-left: 15px;
}

.pagina-detalhes .flex .caixa .informacoes .item .valor ul:not(:first-child) {
    margin-top: 5px;
}


.pagina-detalhes .flex .caixa .informacoes .item .valor ul li {
    list-style: initial;
}

.pagina-detalhes .flex .caixa .informacoes .item .valor ul li:not(:last-child) {
    margin-bottom: 5px;
}

.pagina-detalhes .flex .caixa .informacoes .item .valor hr {
    border: 0;
    border-top: 1px solid #1d1d1f;
    opacity: .3;
    margin-top: 25px;
    margin-bottom: 25px;
}



.pagina-detalhes .flex .caixa .informacoes .item .valor img {
    width: 100%;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    margin-top: 5px;
}

.pagina-detalhes .flex .caixa .informacoes .item .copia {
    font-size: 9px;
    position: absolute;
    right: 15px;
    font-weight: 200;
    display: none;
    padding-left: 15px;
}

.pagina-detalhes .flex .caixa .informacoes .item.area .copia {
    bottom: 15px;
}




.pagina-detalhes .flex .caixa .informacoes .item:not(.vazio) .valor {
    cursor: copy;
    transition: .2s ease-in-out;
}

.pagina-detalhes .flex .caixa .informacoes .item:not(.vazio):hover .valor {
    opacity: .8;
}

.pagina-detalhes .flex .caixa .informacoes .item:not(.vazio):hover .copia {
    display: block;
}





.pagina-detalhes .flex .caixa .informacoes .legenda:first-child {
    margin-top: 0px;
}

.pagina-detalhes .flex .caixa .informacoes .legenda {
    font-size: 11px;
    text-transform: uppercase;
    padding-left: 5px;
    letter-spacing: 2px;
    font-weight: 100;
    margin-top: 25px;
    margin-bottom: 15px;
    color: grey;
}















/* Empty List */
.pagina-detalhes .lista-vazia {
    background: rgba(0, 0, 0, .05);
    color: rgba(0, 0, 0, .3);
    opacity: .7;
    margin-top: 25px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagina-detalhes .caixa.fechada .lista-vazia {
    display: none;
}

.pagina-detalhes .caixa .lista-vazia:first-child {
    margin-top: 0px;
}

/* Button Container */
.pagina-detalhes .caixa > .btn-container {
    margin-top: 25px;
}

.pagina-detalhes .caixa.fechada > .btn-container {
    display: none;
}

.pagina-detalhes .caixa.highlight > .btn-container {
    margin-top: 25px;
    border-top: 1px dashed rgba(0, 0, 0, .05);
    padding-top: 25px;
}

.pagina-detalhes .caixa > .btn-container:not(.centro) {
    justify-content: flex-start;
}

.pagina-detalhes .caixa > .btn-container.coluna {
    flex-direction: column;
}

.pagina-detalhes .caixa > .btn-container .btn:not(.ghost) {
    background-color: rgba(0, 0, 0, .05);
    color: #1d1d1f;
    fill: #1d1d1f;
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
}

.pagina-detalhes .caixa > .btn-container .btn:not(.ghost):hover {
    background-color: rgba(0, 0, 0, .05);
    color: #1d1d1f;
    fill: #1d1d1f;
    box-shadow: 0 40px 29px -19px rgba(0, 0, 0, .1);
}

.pagina-detalhes .caixa > .btn-container .texto {
    color: grey;
    line-height: 20px;
}

.pagina-detalhes .caixa > .btn-container.coluna .texto {
    margin-top: 25px;
}




.pagina-detalhes .fixo.baixo .btn-container:not(:first-child) {
    margin-top: 25px;
}



/* Inner List */
.pagina-detalhes .flex .caixa .informacoes + .lista-interna {
    margin-top: 10px;
}

/* Inner List */
.pagina-detalhes .flex .caixa .lista-interna + .informacoes {
    margin-top: 10px;
}



.pagina-detalhes .flex .caixa.fechada .lista-interna {
    display: none;
}

.pagina-detalhes .flex .caixa .lista-interna:first-child {
    margin-top: 0px;
}

.pagina-detalhes .flex .caixa .lista-interna.scroll {
    max-height: 300px;
    overflow-y: auto;
}

.pagina-detalhes .flex .caixa .lista-interna.scroll::-webkit-scrollbar {
    width: 2px;
}

.pagina-detalhes .flex .caixa .lista-interna.scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .7);
    border-radius: 10px;
}

.pagina-detalhes .flex .caixa .lista-interna .container-item {
    display: flex;
    align-items: center;
}

.pagina-detalhes .flex .caixa .lista-interna .container-item .botoes {
    display: flex;
    align-items: center;
    margin-left: 25px;
}

.pagina-detalhes .flex .caixa .lista-interna .container-item .botoes .botao {
    zoom: .8;
}

.pagina-detalhes .flex .caixa .lista-interna .container-item .botoes .botao:not(:last-child) {
    margin-right: 10px;
}

/* Inner List Item */
.pagina-detalhes .flex .caixa .lista-interna .item {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
    min-height: 75px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, 0.05);
    width: calc(100% - 100px);
}

.pagina-detalhes .flex .caixa .lista-interna .item.altura-automatica {
    padding: 25px;
}

.pagina-detalhes .flex .caixa .lista-interna .item.altura-automatica .bloco {
    align-items: flex-start;
}

.pagina-detalhes .flex .caixa .lista-interna .container-item:first-child .item {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.pagina-detalhes .flex .caixa .lista-interna .container-item:last-child .item {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.pagina-detalhes .flex .caixa .lista-interna .item .coluna:not(:first-child) {
    margin-left: 25px;
}

.pagina-detalhes .flex .caixa .lista-interna .item .coluna.auto {
    margin-left: auto;
}

.pagina-detalhes .flex .caixa .lista-interna .item .coluna.auto + .coluna.auto {
    margin-left: 25px;
}

.pagina-detalhes .flex .caixa .lista-interna .item .coluna.direita {
    text-align: right;
}

.pagina-detalhes .flex .caixa .lista-interna .item .coluna > .label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: grey;
    font-weight: 200;
}

.pagina-detalhes .flex .caixa .lista-interna .item .coluna .valor {
    font-weight: 600;
    margin-top: 5px;
}

.pagina-detalhes .flex .caixa .lista-interna .item .coluna .valor.na {
    opacity: .3;
    font-weight: 200;
}

.pagina-detalhes .flex .caixa .lista-interna .item .foto-container {
    height: 50px;
}

.pagina-detalhes .flex .caixa .lista-interna .item .foto-container img {
    height: 100%;
    border-radius: 10px;
}

.pagina-detalhes .flex .caixa .lista-interna .item.final {
    padding: 0px;
    padding-top: 25px;
}

.pagina-detalhes .flex .caixa .lista-interna .item.final .coluna {
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding-left: 25px;
    padding-right: 25px;
}



.pagina-detalhes .flex .caixa .lista-interna input[type='checkbox'] {
    margin: 0;
    height: 20px;
    width: 20px;
    cursor: pointer;
}



.pagina-detalhes .flex .caixa .informacoes .flex .item {
    width: 100%;
    flex-basis: 25%;
    border: 1px solid rgba(0, 0, 0, .03);
    min-height: 50px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding-left: 15px;
}

.pagina-detalhes .flex .caixa .informacoes .flex .item.vertical {
    align-items: flex-start;
    flex-direction: column;
}


/* Special Conditions for Item Size */
.pagina-detalhes .flex .caixa .informacoes .flex .item.maior {
    flex-basis: 50%;
}

.pagina-detalhes .flex .caixa .informacoes .flex .item:not(:last-child) {
    margin-right: 10px;
}

.pagina-detalhes .flex .caixa .informacoes .flex .item:not(:last-child) {
    margin-bottom: 0px;
}

.pagina-detalhes .flex .caixa .informacoes .flex.flexivel .item {
    width: auto;
    flex-basis: auto;
}


/* Additional Styles */
.pagina-detalhes .flex .caixa .lista-interna .item .t1 + .texto {
    border-top: 1px dashed rgba(0, 0, 0, .05);
    padding-top: 10px;
    margin-top: 10px;
}

.pagina-detalhes .flex .caixa .foto-maior {
    margin-top: 25px;
}

.pagina-detalhes .flex .caixa .foto-maior img {
    width: 100%;
    border-radius: 10px;
}


.pagina-detalhes .flex .caixa .botoes-editar-excluir {
    padding-top: 25px;
}

.pagina-detalhes .flex .caixa .botoes-editar-excluir .botoes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.pagina-detalhes .flex .caixa .botoes-editar-excluir .botoes .botao {
    zoom: .8;
}












/* Caixa Actions */
.pagina-detalhes .caixa-acoes {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    border-top: 1px dashed rgba(0, 0, 0, .1);
    height: 75px;
}

.pagina-detalhes .caixa-acoes.left {
    justify-content: flex-start;
}

.pagina-detalhes .caixa-acoes + .caixa-acoes {
    border-top: 0px;
}


.pagina-detalhes .caixa-acoes .editar-excluir {
    display: flex;
    align-items: center;
}

.pagina-detalhes .caixa-acoes .editar-excluir:not(:first-child) {
    margin-left: auto;
}

.pagina-detalhes .caixa-acoes .editar-excluir .botao {
    background: none;
}



/* Bloco Container */
.pagina-detalhes .container-blocos {
    display: flex;
    align-items: flex-start;
}

.pagina-detalhes .container-blocos .bloco {
    width: 100%;
}

.pagina-detalhes .container-blocos .bloco:not(:last-child) {
    margin-right: 25px;
}

/* Campo Estrelas */
.pagina-detalhes .campo-estrelas {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 10px;
    padding-left: 25px;
    width: 100%;
}

.pagina-detalhes .flex .campo-estrelas .container-labels {
    display: flex;
    align-items: center;
}

.pagina-detalhes .flex .campo-estrelas .container-labels .icone {
    height: 20px;
    width: 20px;
    display: flex;
    margin-right: 10px;
}

.pagina-detalhes .flex .campo-estrelas .labels {
    font-weight: 600;
}

.pagina-detalhes .campo-estrelas .itens {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 25px;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.pagina-detalhes .campo-estrelas .itens .estrela:not(:last-child) {
    margin-right: 10px;
}

.pagina-detalhes .campo-estrelas .itens .estrela .icone {
    height: 25px;
    width: 25px;
    fill: rgba(0, 0, 0, .05);
    display: flex;
}

.pagina-detalhes .campo-estrelas .itens .estrela.ativo .icone {
    fill: #08ace3;
}

/* Title */
.pagina-detalhes .titulo-secao-detalhes {
    margin-bottom: 25px;
}

.pagina-detalhes .titulo-secao-detalhes:not(:first-child) {
    margin-top: 50px;
}



.pagina-detalhes .titulo-secao-detalhes:first-child {
    margin-top: 25px;
}


.pagina-detalhes .titulo-secao-detalhes .label {
    font-weight: 200;
    color: rgba(0,0,0, .3);
}




.pagina-detalhes .fixo.baixo .btn-container.controle-etapas {
    justify-content: center;
}

.pagina-detalhes .fixo.baixo .btn-container.controle-etapas .campo {
    flex-basis: 100%; /*SERVE PARA MANTER O BOTÃO CENTRAL ALINHADO AO CENTRO...*/
}

.pagina-detalhes .fixo.baixo .btn-container.controle-etapas .atual {
    margin-right: auto;
}

.pagina-detalhes .fixo.baixo .btn-container.controle-etapas .proxima {
    margin-left: auto;
}


.pagina-detalhes .flex > .indicadores {
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 10px;
    width: 100%;
    margin-bottom: 15px; /*COM OS 10PX DO FLEX FICA = 25PX*/
}

.pagina-detalhes .flex > .indicadores:first-child {
    margin-bottom: 0px;
}

.pagina-detalhes .flex > .indicadores > .indicador {
    border-radius: 10px;
    padding: 25px;
    background: transparent;
    color: initial;
}

.pagina-detalhes .flex > .indicadores .indicador > .label {
    color: rgba(0,0,0, .7);
    margin-top: 10px;
}


.pagina-detalhes .titulo-secao {
}


.pagina-detalhes .usuarios-responsaveis {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    gap: 5px;
    font-size: 11px;
    color: rgba(0,0,0, .5);
    font-style: italic;
    font-weight: 200;
}

.pagina-detalhes .usuarios-responsaveis .texto .usuario {
    font-weight: 400;
}

.pagina-detalhes .usuarios-responsaveis .texto .data {
    font-weight: 400;
}

.pagina-detalhes .usuarios-responsaveis .texto .horario {
    font-weight: 400;
}










@media screen and (max-width: 1000px) {
    .pagina-detalhes .header {
        margin-bottom: 15px !important;
        border-left: 0px;
        padding-left: 0px;
        text-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .pagina-detalhes .flex {
        flex-direction: column;
    }

    .pagina-detalhes .flex .caixa {
        padding: 15px;
    }

    .pagina-detalhes .flex .caixa.fechada {
        min-height: 60px; /* Sem isso, fica estranho quando na mesma tela de detalhes, tem uma caixa com botões ao lado do título (dentro do container-titulo) e outras caixas sem. Cada uma com um tamanho diferente. */
    }



    .pagina-detalhes .flex .caixa:not(.fechada) .container-titulo {
        margin-bottom: 15px;
        height: 30px;
    }


    .pagina-detalhes .flex .caixa .container-titulo .btn {
        height: 45px;
        width: 45px;
    }

    .pagina-detalhes .flex .caixa .container-titulo .btn .label {
        display: none;
    }

    .pagina-detalhes .flex .caixa .container-titulo .btn .icone {
        margin-right: 0px;
        height: 20px;
        width: 20px;
    }

    .pagina-detalhes .flex .caixa.colapsavel .container-titulo > .btn-container {
        flex-direction: row;
        gap: 5px;
        /*        margin-right: -10px;*/ /* Deixava os botões colados na direita. Nao entendi. */
    }



    .pagina-detalhes .flex .caixa .informacoes {
    }

    .pagina-detalhes .flex .caixa .informacoes .flex .item {
        margin-right: 0px;
    }

    .pagina-detalhes .flex .caixa .informacoes .flex .item:not(:last-child) {
        margin-right: 0px;
        margin-bottom: 5px;
    }

    .pagina-detalhes .flex .caixa .informacoes .flex .item {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 15px;
    }

    .pagina-detalhes .flex .caixa .informacoes .item .label {
        margin-top: 15px;
    }

    .pagina-detalhes .flex .caixa .informacoes .flex .item .valor {
        /*margin-left: 0px;*/
        padding-left: 0px;
    }

    .pagina-detalhes .flex .caixa .informacoes .flex .item.area .valor {
        padding-bottom: 0px;
    }

    .pagina-detalhes .overflow > .flex:not(:last-child) {
        margin-bottom: 15px;
    }

    .pagina-detalhes .overflow .caixa .informacoes .flex:not(:last-child) {
        margin-bottom: 5px;
    }

    .pagina-detalhes .flex .caixa .lista-interna {
        /*margin-top: 15px;*/
    }

    .pagina-detalhes .flex .caixa .lista-interna .item {
        height: auto;
        min-height: 60px;
        /*        padding: 15px;*/
        /**/
        padding: 5px; /* Com 15px ficava muito espaço.*/
    }

    .pagina-detalhes .flex .caixa .lista-interna .item .coluna:not(:first-child) {
        margin-left: 15px;
    }

    .pagina-detalhes .flex .caixa .lista-interna .container-item .botoes {
        margin-left: 15px;
    }

    .pagina-detalhes .caixa > .btn-container {
        margin-top: 15px;
        flex-direction: column;
        border-top: 1px dashed rgba(0, 0, 0, .05);
        padding-top: 15px;
    }

    .pagina-detalhes .caixa > .btn-container .btn {
        width: 100%;
        height: 60px;
        margin-top: 0px;
        box-shadow: none !important;
        background: rgba(0, 0, 0, .02);
    }

    .pagina-detalhes .caixa > .btn-container .btn:not(:last-child) {
        margin-right: 0px;
        margin-bottom: 5px;
    }

    .pagina-detalhes .caixa-acoes {
        margin-top: 30px;
        padding-top: 15px;
        padding-bottom: 10px;
        height: 60px;
    }

    .pagina-detalhes .caixa-acoes + .caixa-acoes {
        padding-top: 0px;
    }

    .pagina-detalhes .caixa-acoes .btn-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
    }

    .pagina-detalhes .caixa-acoes .btn-container .btn {
        margin-right: 0px;
        width: 100%;
    }



    .pagina-detalhes .fixo.baixo .btn-container {
        flex-direction: column;
    }

    .pagina-detalhes .fixo.baixo .btn-container:not(:first-child) {
        margin-top: 15px;
    }



    /* CARD MOBILE */
    /* ----------------------------------------------------------- */

    .pagina-detalhes .flex .caixa .lista-interna .item.detalhes .card {
        flex-direction: column;
        background: rgba(255, 255, 255, .3);
        padding: 15px;
        border-radius: 10px;
    }


    .pagina-detalhes .flex .caixa .lista-interna .item.detalhes .card .bloco:first-child:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, .05);
        padding-bottom: 15px;
    }


    .pagina-detalhes .flex .caixa .lista-interna .item.detalhes .card .bloco:not(:last-child) {
        margin-bottom: 15px;
    }

    .pagina-detalhes .flex .caixa .lista-interna .item.detalhes .card .bloco {
        margin-right: 0px;
        width: 100%;
    }

    .pagina-detalhes .flex .caixa .lista-interna .item.detalhes .card .bloco .coluna {
        flex-grow: 1;
    }



    .pagina-detalhes .flex .caixa .lista-interna .item.detalhes .card .bloco .coluna .t1,
    .pagina-detalhes .flex .caixa .lista-interna .item.detalhes .card .bloco .coluna .t2 {
        white-space: normal;
        line-height: 21px;
    }

    .pagina-detalhes .flex .caixa .lista-interna .item.detalhes .card .coluna .indicador {
        margin-right: 0px;
        width: 100%;
        padding: 15px;
        height: 60px;
    }

    .pagina-detalhes .flex .caixa .lista-interna .item.detalhes .card .coluna.direita {
        text-align: left;
    }


    .pagina-detalhes .flex .caixa .lista-interna .item.detalhes .card .coluna .tag {
        text-align: center;
        width: 100%;
    }





    .pagina-detalhes .titulo-secao-detalhes {
        margin-bottom: 15px;
    }

    .pagina-detalhes .titulo-secao-detalhes:not(:first-child) {
        margin-top: 30px;
    }

    .pagina-detalhes .titulo-secao-detalhes:first-child {
        margin-top: 15px;
    }


    .pagina-detalhes .titulo-secao-detalhes .label {
        font-size: 21px;
        margin-left: 15px;
    }




    .pagina-detalhes .fixo.baixo .btn-container.controle-etapas .atual {
        margin-right: 0px;
        width: 100%;
    }

    .pagina-detalhes .fixo.baixo .btn-container.controle-etapas .proxima {
        margin-left: 0px;
        width: 100%;
        text-align: left;
    }

    .pagina-detalhes .usuarios-responsaveis {
        padding-left: 30px;
        padding-right: 30px;
        text-align: justify;
        line-height: 16px;
        margin-top: 90px;
        border-top: 1px dashed rgba(0,0,0, .05);
        padding-top: 15px;
    }

    .pagina-detalhes .flex .caixa .container-titulo .colapsar .icone {
        margin-right: 5px;
        width: 10px;
    }


    .pagina-detalhes .flex .caixa .container-titulo .titulo {
        gap: 5px;
    }

    .pagina-detalhes .flex .caixa .container-titulo .titulo .label {
        line-height: 14px;
    }

    .pagina-detalhes .flex .caixa .container-titulo .titulo .icone .emoji {
        font-size: 16px;
        line-height: 14px;
    }



    .pagina-detalhes .lista-vazia {
        font-size: 11px; /*MESMA FONTE DO VISUALIZAR ITENS ARQUIVADOS*/
    }
}

.popup-notificacao {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 1000;
    padding: 15px;
    padding-right: 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, .1);

    display: flex;
    align-items: center;
    height: 50px;
    transition: .2s ease-in-out;
}






.popup-notificacao[data-tipo='Confirmacao'] {
    color: #8bc34a;
    fill: #8bc34a;
    color: #fff;
    fill: #fff;
    background-color: rgba(76, 175, 80, .4);
}

.popup-notificacao[data-tipo='Rejeicao'] {
    color: #ff5722;
    fill: #ff5722;
    background-color: rgba(244, 67, 54, .7);
    color: #fff;
    fill: #fff;
}



.popup-notificacao .texto {
    display: flex;
    align-items: center;
    font-weight: 500;
}

.popup-notificacao .texto .icone {
    height: 20px;
    width: 20px;
    margin-right: 10px;
    display: flex;
}

.popup-notificacao .link {
    margin-left: 25px;
    font-weight: 600;
}


@media screen and (max-width: 1000px)
{
    .popup-notificacao {
        left: 5px;
        bottom: 5px;
        width: calc(100% - 10px);
        height: 60px;
    }

    .popup-notificacao .texto {
        width: 100%;
        justify-content: center;
    }

    .popup-notificacao .texto .label {
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .popup-notificacao .texto .icone {
        height: 25px;
        width: 25px;
    }
}


#projeto {
    display: flex;
    flex-direction: column;
    padding: 50px;
}

#projeto h1 {
    font-weight: 600;
    margin-left: 0px;
}


#projeto .container-loading {
    display: flex;
    margin-top: 25px;
    align-items: center;
}

#projeto .container-loading .numero {
    font-size: 16px;
    font-weight: 600;
    color: #4CAF50;
}

#projeto .container-loading .loading {
    background-color: rgba(255, 255, 255, .3);
    width: 100%;
    height: 10px;
    margin-left: 25px;
    border-radius: 10PX;
    overflow: hidden;
}

#projeto .container-loading .loading .barra {
    height: 100%;
    
    background: #4caf50;
}


#projeto .tabela {
    background-color: #fff;
    padding: 25px;
    border-radius: 25px;
    margin-top: 50px;

}

#projeto .tabela .item {
    color: #000;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    padding: 25px;
    display: flex;
    align-items: center;

}


#projeto .tabela .item .nome {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;

    padding-right: 25px;
    line-height: 30px;
}

#projeto .tabela .item .descricao {
    margin-left: 25px;
    color: grey;
    font-weight: 200;
    margin-right: 25px;
    max-width: 400px;
    line-height: 21px;
}


#projeto .tabela .item .status {
    margin-left: auto;
    height: 25px;
    width: 25px;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 100%;
}

#projeto .tabela .item .status.feito {
    background-color: #4caf50;
}


#projeto .tabela .item .tag {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
}

#projeto .tabela .item .tag.t1 {
    background: #673AB7;
}

#projeto .tabela .item .tag.t2 {
    background: #2196f3;
}

.relatorio-dre .campo-container {
    margin-bottom: 25px;
}


.relatorio-dre .campo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.relatorio-dre .campo.check .label {
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 9px;
    color: grey;
    white-space: nowrap;
    cursor: pointer;
}

.relatorio-dre .campo.check input[type='checkbox'] {
    margin: 0;
    cursor: pointer;
    height: 15px;
    width: 15px;
    
}


.relatorio-dre .identado:not(.visivel) {
    display: none;
}


.relatorio-dre .igual {

    padding-top: 25px;
    margin-top: 15px;
    border-top: 2px dashed rgba(0,0,0, .05);
    margin-bottom: 50px;

}

.relatorio-dre .igual .item {
    background-color: rgba(0,0,0, .03);
}


.relatorio-dre .comparativo {
    display: flex;
    gap: 5px;
    font-size: 12px;
}

.secao-superior {
    z-index: 10;
    padding: 25px;
}



.abas + .secao-superior {
    padding-bottom: 0px;
    background: rgba(0, 0, 0, 0.3);
    margin-left: 25px;
    margin-right: 25px;
}


.secao-superior > .flex {
    display: flex;
}

.secao-superior > .flex:not(:last-child) {
    margin-bottom: 25px;
}


.secao-superior > .flex.centro {
    align-items: center;
}

.secao-superior .btn {
    margin-left: auto;
}






.secao-superior .busca {
    background: linear-gradient(45deg, rgba(0, 0, 0, .1), transparent);
    padding: 15px;
    padding-left: 25px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    transition: .2s ease-in-out;
}

.secao-superior .busca:not(:last-child) {
    margin-right: 25px;
}

.secao-superior .busca:hover,
.secao-superior .busca.preenchida {
    background-color: rgba(0, 0, 0, .1);
}


.secao-superior .busca .icone {
    height: 20px;
    width: 20px;
    margin-right: 10px;
    fill: #fff;
    opacity: .3;
    transition: .2s ease-in-out;
    flex-shrink: 0;
    display: flex;
    cursor: pointer;
    transition: .2s ease-in;
}

.secao-superior .busca .icone:hover {
    transform: translateY(-4px);
}

.secao-superior .busca:hover .icone,
.secao-superior .busca.preenchida .icone {
    opacity: 1;
}

.secao-superior .busca input {
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    border: none;
    -webkit-appearance: none;
    color: #fff;
    width: 100%;
    padding: 0px;
    text-overflow: ellipsis;
}

.secao-superior .busca input::placeholder {
    opacity: .3;
    color: #fff;
    font-weight: 200;
}


.secao-superior .busca .btn-cancelar {
    display: none;
}


.secao-superior .busca.preenchida {
    border: 2px solid #fff;
}


.secao-superior .busca.preenchida .btn-cancelar {
    display: flex;
    margin-right: 5px;
    margin-bottom: 1px;
}


@media screen and (max-width:1000px) {
    .secao-superior {
        padding: 0px;
        margin-bottom: 5px;
    }


    .secao-superior .busca {
        width: auto;
        height: 60px;
        padding-left: 15px;
    }

    .abas + .secao-superior {
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        padding: 5px;
        padding-bottom: 0px;
    }

    .secao-superior > .flex {
    }

    .secao-superior > .flex.centro {
        align-items: initial;
    }

    .secao-superior .busca {
        flex-grow: 1;
    }

    .secao-superior .busca:not(:last-child) {
        margin-right: 5px;
    }

    .secao-superior .busca input::placeholder {
    }

    .secao-superior .busca .icone {
        height: 25px;
        width: 25px;
    }

    .secao-superior .busca .icone:hover {
        transform: none;
    }


    .secao-superior .btn {
        box-shadow: none;
        height: 60px;
        width: 60px;
        margin-top: 0px;
    }

    .secao-superior .btn .label {
        display: none;
    }

    .secao-superior .btn .icone {
        margin-right: 0px;
        flex-shrink: 0;
    }
}




html {
    scroll-behavior: smooth;
}

body {
    max-width: 1920px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-top: 25px;
    font-size: 14px;
    font-family: 'Apple', sans-serif;
    background: linear-gradient(0deg, #282828, #281a39);
    color: #1d1d1f;
    font-weight: 400;
    position: relative;
    /*transition: .2s ease-in-out;*/
    overflow-x: hidden;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    /* -webkit-font-smoothing: antialiased;*/
    /*text-rendering: optimizeLegibility;*/

    background-color: #403975;
}

body::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .1);
    border-radius: 10px;
}


* {
    box-sizing: border-box;
    position: relative;
}

a {
    text-decoration: none;
    color: inherit;
}


.emoji {
    font-family: initial;
}


input:focus {
    outline: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

p {
    margin: 0;
    padding: 0;
}

ul, ol, li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.link {
    cursor: pointer;
}

.link:hover {
    text-decoration: underline;
}





.parallax {
    position: fixed;
    top: -50px;
    left: -50px;
    height: calc(100vh + 100px);
    width: calc(100vw + 100px);
    background-size: cover;
    background-position: center;
}


.icone svg {
    overflow: visible;
    height: 100%;
    width: 100%;
}




@media screen and (max-width: 1000px) {

    body {
        font-size: 16px;
        font-family: "Apple Text";
        padding-top: 5px;
    }
}


h1 {
    font-size: 48px;
    font-weight: 700;
}


h2 {
    font-size: 32px;
    font-weight: 700;
}

h3 {
    font-size: 28px;
    font-weight: 600;
}


h4 {
    font-size: 24px;
    font-weight: 600;
}


h5 {
    font-size: 20px;
    font-weight: 600;
}



.fw100 {
    font-weight: 100 !important;
}

.fw200 {
    font-weight: 200 !important;
}

.fw300 {
    font-weight: 300 !important;
}

.fw400 {
    font-weight: 400 !important;
}

.fw500 {
    font-weight: 500 !important;
}

.fw600 {
    font-weight: 600 !important;
}

.fw700 {
    font-weight: 700 !important;
}

.fw800 {
    font-weight: 800 !important;
}

.fw900 {
    font-weight: 900 !important;
}


.align-right {
    text-align: right;
}


h1, h2, h3, h4, h5 {
    font-family: "Apple Display", sans-serif;
}



@media screen and (max-width: 1000px)
{

    h1 {
        font-size: 18px;
        font-weight: 600;
    }


    h2 {
        font-size: 18px;
        font-weight: 600;
    }

    h3 {
        font-size: 18px;
        font-weight: 600;
    }


    h4 {
        font-size: 18px;
        font-weight: 600;

    }


    h5 {
        font-size: 18px;
        font-weight: 600;

    }


}




.soviero-tooltip {
    position: absolute;
    background: rgba(0,0,0, .3);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    pointer-events: none;
    z-index: 9999999999;
    white-space: nowrap;
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
}

.soviero-tooltip.show {
    display: block;
    opacity: 1;
}