:root {
    --cinza-borda: #e0e0e0;
    --cor-app: #57385e;
    --cor-app-active: #6c4777;
    --cor-botao-app: #57385e;
    --cor-hover: #6c4777;
    --cor-active: #6c4777;
    --cor-app-clara: #e9dcef;
    --cor-app-link-topio: #57385e;
    --cor-top-bar: white;
    --cor-top-bar-buttons: #57385e;
    --fundo-layout-menu: #57385e;
    --textos-layout-menu: #fff;
    --cor-secundaria: #F1D4A9;

    --cor-label:#263A43;
}


.logoIconLogin {
    width: 90px;
    height: auto;

    display: block;
    object-fit: contain;
}

.flex1{
    flex:1;
}

.flex2{
    flex:2;
}

.allInlineFlex, .allInlineFlex *:not(button):not(.ui-selectmanymenu):not(.ui-selectmanymenu *):not(.ui-selectcheckboxmenu):not(.ui-selectcheckboxmenu *){
    display: inline-flex;
}

.flexAllInlineFlex{
    display: flex;
}
.flexAllInlineFlex *:not(button){
    display: inline-flex;
}

.panelFlex2DirColumn{
    min-width: 412px;
    display: inline-flex !important;
    flex:2;
    flex-direction: column;
}

.panelFlex2DirColumn>.ui-widget-content{
    display: inline-flex !important;
    align-items: center;
    flex-direction: column;
    padding-right: 200px !important

}

.panelInput>.ui-widget-content{
    display: inline-flex !important;
    flex:1;
    flex-direction: column;
    gap: 20px;
}


.titulo{
    font-weight: 600 !important;
    color: var(--cor-app) !important;
    font-size: 32px !important;
}

.mensagem{
    font-weight: 400 !important;
    color: #B9B8B8 !important;
    font-size: 16px !important;
}

label:not(.labelOferta):not(.ui-selectcheckboxmenu-items *) {
    color: var(--cor-label);
    size: 20px;
    font-weight: 600;
    line-height: 30px;
}


.inlineFlex {
    display: inline-flex !important;
}

.dirColumn {
    flex-direction: column;
}

body .ui-panel .ui-panel-content {
    border: none;
}


.gap10 {
    gap: 10px;
}
.gap32 {
    gap: 32px;
}



.custom-button {
    background-color: var(--cor-app);
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0px 24px !important;
    height: 52px;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: background-color 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row-reverse !important;
}

/* Estilo para o texto do botão (separação do ícone) */
.custom-button .ui-icon {
    position: relative !important;
    top: unset !important;
    right: unset !important;
    margin-top: unset !important;
}

.custom-button .ui-button-text {
    margin-right: 8px !important;
    padding: 0 !important;
}

/* Estado normal */
.custom-button.ui-state-default {
    background-color: var(--cor-app) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Hover */
.custom-button.ui-state-hover {
    background-color: var(--cor-hover) !important;
    color: #ffffff !important;
}

/* Focus */
.custom-button.ui-state-focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* Botão pressionado */
.custom-button.ui-state-active {
    background-color: var(--cor-active) !important;
}

/* Desabilitado */
.custom-button.ui-state-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}


.outputPanelCustom{
    flex:1;
    flex-direction: column;
    display: inline-flex !important;
    gap: 2px;
}

.outputPanelCustom input{
    font-size: 14px !important;
    padding: 12px 16px;
    width: 100% !important;
}


.outputPanelCustom .ui-inputnumber{
    padding: 12px 16px;
}

.outputPanelCustom .ui-input-icon-left .ui-inputnumber{
    padding: 0px;
}

.outputPanelCustom .ui-inputnumber input{
    padding: 0.8rem .5rem;
    font-size: 14px !important;
    width: 100% !important;
}


.outputPanelCustom .ui-input-icon-left .ui-inputnumber input{
    padding: 0.8rem 2rem;
}

.outputPanelCustom .ui-input-icon-left span.ui-calendar input{
    padding: 0.8rem 2rem;
}


.outputPanelCustom label{
    color: var(--cor-label);
    size: 20px;
    font-weight: 600;
    line-height: 30px;
}


.outputPanelCustom .ui-password-icon{

}

.outputPanelCustom>span>i {
    margin-top: -0.3rem !important;
    z-index: 1;
}

.outputPanelCustom span.ui-password>input {
    padding-left: 30px !important;
}

.outputPanelCustom span.ui-password>i {
    margin-top: -0.3rem !important;
}

.linkButton{
    background: none !important;
    width: max-content !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: gray !important;
}

.linkButton>.ui-button-text{
    padding: 0px !important;
}

.toRight{
    margin-left: auto !important;
    margin-right: 0px !important;
}
.toCenter{
    margin-left: auto !important;
    margin-right: auto !important;
}

.linkButton.corApp>.ui-button-text{
    color: var(--cor-app) !important;
}

.divIconLogin{
    position: absolute;
    left: 50%;
    height: 100%;
    display: inline-flex !important;
    align-items: center;
    max-height: 100vh;
    padding-right: 10px;
}

.iconLogin {
    height: 100%;
    width: auto;
    max-height: 80%;
    max-width: 100%;
    display: block !important;
    object-fit: cover;
    border-radius: 20px;
}

.iconPromo {
    margin-left: auto;
    min-height: 100vh;
    display: block !important;
    object-fit: fill;
    border-bottom-left-radius: 20px !important;
}

.colunaAmarela{
    flex: 1;
    background: #F1D4A9
}

.colunaCorApp{
    flex: 1;
    background: var(--cor-app);
}

@media (max-width: 950px){

    .panelFlex2DirColumn>.ui-widget-content{
        padding-right: 0px !important
    }


    .divIconLogin{
        position: absolute;
        left: 70%;
        height: 100vw;
        display: inline-flex !important;
        align-items: center;
        max-height: 100vh;
    }

    .iconLogin {
        height: 100%;
        width: auto;
        max-height: 80%;
        max-width: 100%;
        display: block !important;
        object-fit: cover;
        border-radius: 20px;
    }
}



@media (max-width:600px){

    .panelFlex2DirColumn{
        min-width: unset;
    }
    .divIconLogin,
    .colunaAmarela{
        display: none !important;
    }
    
    .panelIconPromo{
        display: none !important;
    }
}




.fundoLaranja{
    background: #F1D4A9 !important;
}


.coluna600{
    width: 600px !important;
}

.padding10{
    padding: 10px !important;
}
.padding20{
    padding: 20px !important;
}
.padding30{
    padding: 30px !important;
}
.padding40{
    padding: 40px !important;
}
.padding40{
    padding: 40px !important;
}
.padding100{
    padding: 100px !important;
}


.alinharEsquerda{
    justify-content: flex-start !important;
}
.alinharCentro{
    justify-content: center !important;
}
.alinharTopo{
    justify-content: flex-start !important;
}
.alinharDireita{
    justify-content: flex-end !important;
}
.alignItemsCenter{
    align-items: center !important;
}


.tagsSenhas,
.outputPanelCustom input.tagsSenhas {
    border: 2px solid #D6885A !important;
    width: 4rem !important;
    display: inline-flex !important;
    text-align: center !important;
    aspect-ratio: 1 / 1 !important;
    font-size: 24px !important;
    color: black !important;
}



.outputPanelCustom input.ui-state-focus{
    box-shadow: 0 0 0 .2rem #d6885a61 !important;
    border-color: #D6885A !important;
}

.outputPanelCustom input.ui-state-hover {
    border-color: #D6885A !important;
}



/* Margem superior - inicio */
.margemSuperior5 {
    margin-top: 5px !important;
}

.margemSuperior10 {
    margin-top: 10px !important;
}

.margemSuperior15 {
    margin-top: 15px !important;
}

.margemSuperior20 {
    margin-top: 20px !important;
}

.margemSuperior25 {
    margin-top: 25px !important;
}

.margemSuperior30 {
    margin-top: 30px !important;
}

.margemSuperior40 {
    margin-top: 40px !important;
}

.margemSuperior50 {
    margin-top: 50px !important;
}

.margemSuperior60 {
    margin-top: 60px !important;
}

.margemSuperior70 {
    margin-top: 70px !important;
}

.margemSuperior80 {
    margin-top: 80px !important;
}

.margemSuperior90 {
    margin-top: 90px !important;
}

.margemSuperior100 {
    margin-top: 100px !important;
}
/* Margem superior - termino */


/* Margem direita - incio */
.margemDireita5 {
    margin-right: 5px !important;
}

.margemDireita10 {
    margin-right: 10px !important;
}

.margemDireita15 {
    margin-right: 15px !important;
}

.margemDireita20 {
    margin-right: 20px !important;
}

.margemDireita30 {
    margin-right: 30px !important;
}

.margemDireita40 {
    margin-right: 40px !important;
}

.margemDireita50 {
    margin-right: 50px !important;
}

.margemDireita60 {
    margin-right: 60px !important;
}

.margemDireita70 {
    margin-right: 70px !important;
}

.margemDireita80 {
    margin-right: 80px !important;
}

.margemDireita90 {
    margin-right: 90px !important;
}

.margemDireita100 {
    margin-right: 100px !important;
}
/* Margem direita - termino */


/* Margem inferior - inicio */
.margemInferior5 {
    margin-bottom: 5px !important;
}

.margemInferior10 {
    margin-bottom: 10px !important;
}

.margemInferior15 {
    margin-bottom: 15px !important;
}

.margemInferior20 {
    margin-bottom: 20px !important;
}

.margemInferior30 {
    margin-bottom: 30px !important;
}

.margemInferior40 {
    margin-bottom: 40px !important;
}

.margemInferior50 {
    margin-bottom: 50px !important;
}

.margemInferior60 {
    margin-bottom: 60px !important;
}

.margemInferior70 {
    margin-bottom: 70px !important;
}

.margemInferior80 {
    margin-bottom: 80px !important;
}

.margemInferior90 {
    margin-bottom: 90px !important;
}

.margemInferior100 {
    margin-bottom: 100px !important;
}
/* Margem inferior - termino */


/* Margem esquerda - inicio */
.margemEsquerda5 {
    margin-left: 5px !important;
}

.margemEsquerda10 {
    margin-left: 10px !important;
}

.margemEsquerda15 {
    margin-left: 15px !important;
}

.margemEsquerda20 {
    margin-left: 20px !important;
}

.margemEsquerda25 {
    margin-left: 25px !important;
}

.margemEsquerda30 {
    margin-left: 30px !important;
}

.margemEsquerda40 {
    margin-left: 40px !important;
}

.margemEsquerda50 {
    margin-left: 50px !important;
}

.margemEsquerda60 {
    margin-left: 60px !important;
}

.margemEsquerda70 {
    margin-left: 70px !important;
}

.margemEsquerda80 {
    margin-left: 80px !important;
}

.margemEsquerda90 {
    margin-left: 90px !important;
}

.margemEsquerda100 {
    margin-left: 100px !important;
}
/* Margem inferior - termino */




.minH50{min-height: 50px;}
.minH100{min-height: 100px;}
.minH200{min-height: 200px;}
.minH300{min-height: 300px;}
.minH400{min-height: 400px;}
.minH500{min-height: 500px;}
.minH600{min-height: 600px;}

.minW100{min-width: 100px;}
.minW150{min-width: 150px;}
.minW200{min-width: 200px;}
.minW300{min-width: 300px;}
.minW370{min-width: 370px;}
.minW400{min-width: 400px;}
.minW500{min-width: 500px;}
.minW600{min-width: 600px;}

.maxH50{max-height: 50px;}
.maxH100{max-height: 100px;}
.maxH200{max-height: 200px;}
.maxH300{max-height: 300px;}
.maxH400{max-height: 400px;}
.maxH500{max-height: 500px;}
.maxH600{max-height: 600px;}

.maxW100{max-width: 100px;}
.maxW200{max-width: 200px;}
.maxW250{max-width: 250px;}
.maxW300{max-width: 300px;}
.maxW370{max-width: 370px;}
.maxW400{max-width: 400px;}
.maxW500{max-width: 500px;}
.maxW600{max-width: 600px;}
.maxW610{max-width: 610px;}

.flexWrap{flex-wrap: wrap;}
.maxW700{max-width: 700px;}
.maxW800{max-width: 800px;}
.maxW900{max-width: 900px;}
.maxW1000{max-width: 1000px;}

.overflowHidden{
    overflow: hidden;
}


.labelOferta{
    color: #D6885A
}


.pd50pd20{padding: 50px 20px !important;}



.coluna100Porcento{width: 100% !important;}


.black{color: black !important;}


.gap5{gap: 5px;}
.gap6{gap: 6px;}
.gap10{gap: 10px;}
.gap20{gap: 20px;}
.gap30{gap: 30px;}
.gap40{gap: 40px;}


.padding10{padding: 10px !important;}
.padding20{padding: 20px !important;}
.padding30{padding: 30px !important;}
.padding40{padding: 40px !important;}



.alinharCentro{justify-content: center !important;}
.alignItemsCenter{align-items: center !important;}
.alignItemsEnd{align-items: end !important;}
.alignItemsStart{align-items: start !important;}




.custom-button-inverse {
    background-color: #ffffff;
    color: var(--cor-app) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0px 24px !important;
    height: 52px;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: background-color 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row-reverse !important;
}

/* Estilo para o texto do botão (separação do ícone) */
.custom-button-inverse .ui-icon {
    position: relative !important;
    top: unset !important;
    right: unset !important;
    margin-top: unset !important;
}

.custom-button-inverse .ui-button-text {
    margin-right: 8px !important;
    padding: 0 !important;
}

/* Estado normal */
.custom-button-inverse.ui-state-default {
    background-color: #ffffff !important;
    color: var(--cor-app) !important;
    border: none !important;
}

/* Hover */
.custom-button-inverse.ui-state-hover,
.custom-button-inverse.ui-state-focus,
.custom-button-inverse.ui-state-active {
    opacity: 0.5;
}

.custom-button-inverse.ui-state-focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}


.gapTaxaAdesao{
    gap: 10px
}

@media(min-width: 960px){
    .gapTaxaAdesao{
        gap: 25px
    }
}

.overflowAuto{
    overflow: auto;
}


.placeHolder{
    color: #6c757d !important;
    font-weight: 400 !important;
}