/* background-color: #333756 */
@keyframes slide {
    0% {
        transform: translateY(100%);
        opacity  : 0%;
    }

    100% {
        transform: translateY(0);
        opacity  : 100%;
    }
}

@keyframes fade {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

@media (min-width: 768px) {
    .xmG {
        margin: 0px 120px 0px 120px;
    }
}

@media (max-width: 768px) {
    .xmG {
        margin: 0px 30px 0px 30px;
    }
}

.ym15 {
    margin: 15px 0px 15px 0px;
}

.xc {
    text-align: center;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    margin-top   : 70px;
    min-height   : 100%;
    margin-bottom: -50px;
}

.p-t-container {
    padding-top: 70px;
}

.rowCen {
    display        : flex;
    justify-content: center;
}

h1 {
    margin   : 30px 0px 0px 0px;
    color    : #666;
    font-size: 20px;
}

h2 {
    color    : #333756;
    font-size: 16px;
}

h3 {
    color    : #333756;
    font-size: 14px;
}

h5 {
    margin-bottom: 5px !important;
    color        : #333756;
    font-weight  : 700;
    font-size    : 14px;
}

h1,
h2,
h3,
h4,
h5 {
    text-align: center;
}

.form-check {
    margin: 0px 10px 0px 10px;
}

.slider {
    animation: slide 0.5s ease-out 0s 1;
}

.fader {
    animation: fade 0.5s ease-out 0s 1;
}

.expander {
    overflow  : hidden;
    transition: all .5s ease;
}

.blocoHeader {
    background-color: #333756;
    border-radius: 5px 5px 0px 0px;
    padding         : 5px 5px 0px 5px;
}

.btnConfig {
    cursor          : pointer;
    background-color: #333756;
    color           : #fff;
    border-radius   : 5px 5px 0px 0px;
    padding         : 10px;
    border          : 1px solid #0000;
    transition      : 0.3s;
}

.btnConfig:hover {
    border: 1px solid white;
}

.btnConfig:focus {
    background-color: white;
    color           : #333756;
}

.btnConfig.active {
    background-color: rgb(255, 255, 255) !important;
    color           : rgb(51, 55, 86) !important;
}

.btnConfig .fas {
    transform                 : rotate(0deg);
    transition                : 0.5s;
    transition-timing-function: cubic-bezier(.24, .9, .51, 1);
}

.btnConfig.active .fas {
    transform: rotate(180deg);
}

.blocoConfig {
    transition   : 0.3s;
    border-width : 0px 1px 1px 1px;
    border-radius: 0px 0px 5px 5px;
    padding      : 0px;
    margin-bottom: 50px;
    border-style : solid;
    border-color : #cccccc !important;
    box-shadow   : 0px 0px 15px -7px #0007;
}

.blocoAtivo {
    border-style : solid;
    border-width : 0px 1px 1px 1px;
    border-radius: 0px 0px 5px 5px;
    transition   : 0.3s;
    max-height   : auto;
    padding      : 40px;
}

.sucesso {
    color: rgb(21, 206, 92);
}

#page>div>a {
    display   : block;
    width     : 45px;
    height    : 18px;
    padding   : 21px;
    position  : absolute;
    top       : 0;
    left      : 0;
    transition: 0.3s
}

#page>div>a:before,
#page>div>a:after {
    content   : '';
    display   : block;
    background: #bcbfc1;
    height    : 2px;
    width     : 20px;
}

#page>div>a span {
    background: #bcbfc1;
    display   : block;
    height    : 2px;
    margin    : 6px 0;
    width     : 20px;
}

.t1 {
    text-align : center;
    font-size  : 24px;
    font-weight: 600;
    margin-top : 50px;
    color      : #333756;
    text-shadow: 0 2px 3px #0003;
}

.t2 {
    margin-top : 25px;
    text-align : center;
    font-size  : 20px;
    font-weight: 600;
    color      : #333756;
}

.t3 {
    margin-top : 10px;
    font-size  : 16px;
    font-weight: 600;
    color      : #6067a2;
}

.mr10 {
    margin-right: 10px;
}

.vc {
    display    : flex;
    align-items: center;
}

.caput {
    position        : fixed;
    z-index         : 10;
    width           : 100%;
    background-color: #333756;
    height          : 60px;
    margin          : -70px 0px 0px 0px;
    box-shadow      : 0px 10px 15px #000f;
}

.footer {
    text-align         : center;
    width              : 100%;
    background-color   : #333756;
    height             : 134px;
    /* margin-top      : 100px;
    margin-left        : 0;
    box-shadow         : 0px 0px 15px #000a; */
}

.conteudo {
    min-height: calc(100vh - 64px) !important;
}

.moduloFechar {
    font-size : 2.2em;
    padding   : 10px;
    color     : white;
    opacity   : 0.6;
    transition: 0.4s;
}

.moduloFechar:hover {
    color          : white;
    text-decoration: none;
    opacity        : 0.9;
}

.fechar {
    cursor: pointer;
}

.fechar:hover {
    text-shadow: #f00 0px 0px 5px;
}

#selectable {
    animation       : slide 0.5s ease-out 0s 1;
    background-color: #eeeeee;
    transition      : 0.5s;
}

#selectable:hover {
    color           : #efe0e0;
    background-color: #333756;
}

#selectable:hover h4 {
    color     : #efe0e0;
    transition: 0.5s;
}

#selectable:hover .mensagem {
    color           : #333756;
    background-color: #eeeeee;
    transition      : 0.5s;
}

#selectablev2 {
    animation       : slide 0.5s ease-out 0s 1;
    background-color: #eeeeee;
    transition      : 0.5s;
}

.icone-sucesso {
    font-size  : 20px;
    color      : #00b300;
    text-shadow: #00000088 1px 2px 4px;
}


.icone-falha {
    font-size  : 20px;
    color      : #b30000;
    text-shadow: #00000088 1px 2px 4px;
}

.logotipo {
    height        : auto;
    vertical-align: middle;
}

.tabela {
    display         : table;
    width           : auto;
    background-color: #bcbfc1;
}

.fundo-lista {
    background-color: #e0e3f0;
}

.textoFooter {
    color: #fff;
}

.btnFooter {
    cursor          : pointer;
    font-size       : 16px;
    background-color: #333756;
    color           : #fff;
    border-radius   : 5px;
    padding         : 5px 50px;
    border          : 1px solid #fff;
    box-shadow      : 0 0 0px 0px #0000;
    transition      : 0.5s;
}

.btnFooter:hover {
    background-color: #fff;
    color           : #333756;
}

.btnSalvar {
    cursor          : pointer;
    font-size       : 16px;
    background-color: #28a745;
    color           : #fff;
    border-radius   : 5px;
    padding         : 5px 50px;
    border          : 1px solid #0000;
    box-shadow      : 0 0 0px 0px #0000;
    transition      : 0.5s;
}

.btnSalvar:hover {
    color           : #fff;
    background-color: #218838;
    box-shadow      : 0 0 0px 0px #0000;
}

.btnSalvar:focus {
    background-color: #218838;
    box-shadow      : 0 0 0 0.2rem rgb(40 167 69 / 50%);
    transition      : 0.2s;
}

#page>div>.close-modulo::before,
#page>div>.close-modulo::after {
    content   : none !important;
    display   : block;
    background: none;
    height    : 2px;
    width     : 20px;
    color     : white;
}

#page>div>.close-modulo {
    display : block;
    width   : 60px;
    height  : 60px;
    padding : 15px;
    position: absolute;
    top     : 0;
    left    : 0;
}

#alerta {
    padding: 100px;
}