﻿
/*#region Formulario index */

*, :after, :before {
    box-sizing: border-box
}

:root{
    --altura-cabecalho: 85px;
    --margin-botton-cabecalho: 20px;

}

a:hover {
    text-decoration: none !important;
}

.align-items-center {
    align-items: center !important
}

.justify-content-start {
    justify-content: flex-start !important
}

.d-flex {
    display: flex !important
}

.flex-column {
    flex-direction: column !important
}

body {
    margin: 0;
    font-family: 'SourceSansRegular', Arial, sans-serif;
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: 1.3;
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    height: 100vh;
}

.form-group{
    margin-bottom: 1.375rem
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:100%;
    max-height: 600px;
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 720px
    }
}

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 540px
    }
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

button, select {
    text-transform: none
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

[mb-group-main] {
    display: flex;
    height: 100vh;
    min-height: 640px;
}

[mb-group-main] .content-group[mb-group-c1],
[mb-group-main] .image[mb-group-c1] {
    width: 100%;
    height: 100%;       
}

[mb-group-main] .image[mb-group-c1] {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100%;
    background-image: url(../Images/Img_Bg.png);
    width: 60%;
}

[mb-group-main] .content-group[mb-group-c1] .container[mb-group-c1] {
    width: 405px;        
}

[mb-group-main] .content-group__buttons[mb-group-c1] {
    width: 100%;
}

[mb-group-main] .content-group__buttons[mb-group-c1] mb-button[mb-group-c1]:first-child {
    margin-bottom: 14px
}

[mb-group-main] .content-group__buttons[mb-group-c1] mb-button[mb-group-c1] {
    width: 100%
}

[_nghost-lqa-c52] {
    display: block;
}

.whatsapp-button {
    background-color: #44AD3A;
    color: white;
    background-repeat: no-repeat;
    background-position: center left;
}

.whatsapp-button img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}  

.whatsapp-button:link {
    text-decoration: none;
    color: white;
}

.whatsapp-button:hover {
    text-decoration: none;
    color: white;
}

.mb-button--mb-button-pres {
    color: #0066FF;
    background-color: #E8F1FF;
    transition: all .3s ease
}

.mb-button--mb-button-canc {
    color: white;
    background-color: #0066FC;
    transition: all .3s ease;    
}

.mb-button-hover:hover {
    text-decoration: none;
    color: white;
}

.bloc-outras-opcoes {
    display: flex;
    flex-direction: column;
}

.bloc-button-aut-pres {
    display: flex;
    align-items: center;
    border-width: 0px;
    border-color: white;
    border-style: none;
    text-align: initial;
    padding: 0;
    background-color: white;
    outline: 0 !important;
}

.img-aut-pres {
    width: 18px;
}

.img-aut-pres-arrow {
    float: right;
}

.opcoes-pres {
    display: flex;
    flex-direction: column;
    color: black;
    text-decoration: none;
    padding-left: 15px;
    font-size: 0.86em;
}

.mb-button-aut-pres {
    justify-content:flex-start !important;
    padding: 0px !important;
}

.tit-opcoes-pres {    
    margin-bottom: 5px;
    font-weight: 600;
}

.subtit-opcoes-pres {
    margin-bottom: 0px;
}

.linha-opcoes-pres {
    height: 2px;
    border-width: 0;
    background-color: #dcdcdc;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.qrcode-aut {
    display: flex;
    justify-content: center;
    margin: 30px 0px 20px 0px;
}

footer {
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    padding-top: 0px;
    margin-top: 25px;
    text-align: left;
}

footer p {
    font-size: 0.90em;
}

footer a {
    text-decoration: underline;
}

.ambiente-seguro {
    font-size: 0.83em;
    display: flex;
    align-items: center;
    justify-content: left;
}

.ambiente-seguro img {
        
    margin-right: 5px;
}

.mb-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    border-width: 0px;
    font-size: 1.05em;
    height: 48px;
    padding: 0 10px;
    width: 100%;
    font-weight: normal !important;
}

.mb-button-btw{
    margin-bottom: 12px;
}

.logo-header {
    display: flex;
    align-items: center; 
    padding: 34px 10px 22px 37px;
    float: left;
}

.logo-mercantil {    
    width: 79px; 
}

.card-novidade {
    color: white;
    background-color: #0066FC;
    border-radius: 6px;
    opacity: 1;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.90em;
    height: 24px;
    padding: 0 10px;
    width: 95px;
    margin-bottom: 10px;
}

@media screen and (max-width:768px) {
    .logo-mercantil {
        width: 60px;
    }

    [mb-group-main] {
        flex-direction: column;
        height: 85vh
    }

    .align-items-center {
        padding-left: 15px;
        padding-right: 15px;
    }

    [mb-group-main] .image[mb-group-c1] {
        background-image: linear-gradient(to bottom, transparent 3%, #000 120%), url(../Images/Img_Bg-header2.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 4%;
        height: 75%;
        width: 100%;
        object-position: 92% 20%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    [mb-group-main] .image--whatsapp[mb-group-c1] {
        background-image: url(../Images/Img_Bg-header2.png)
    }

    [mb-group-main] .container[mb-group-c1] {
        padding: 24px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: auto;
        height: 100%;
        margin-left: auto !important
    }

    .logo-header {
        padding: 34px 10px 22px 15px;
    }

    #authorize-header {
        display: flex !important;
    }

    .card-novidade{
        display:none;
    }

    .content-group-header {
        
        height: auto !important;
    }

    .card-novidade-header {
        display: flex !important;
        color: white;
        background-color: #0066FC;
        border-radius: 6px;
        opacity: 1;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.90em;
        height: 24px;
        padding: 0 10px;
        width: 95px;
        margin-bottom: 10px;
    }

    .titulo{
        display:none
    }

    .titulo-header {
        display:flex !important;
        text-align: left;
        color: #000000;
        letter-spacing: 0px;
        font-size: 1.57em;
        color: white;
        font-weight: 600;
        margin-bottom: 0%;
    }
}

@media screen and (min-width:768px) {
    #authorize-header {
        display: none !important;
    }
}

.card-novidade-header {
    display: none;
}

.titulo-header {
    display:none;
}

.titulo {
    text-align: left;
    color: #000000;
    letter-spacing: 0px;
    font-size: 1.65em;
    font-weight: 600;
    margin-top: 0%;
}

.sub-titulo-1 {
    text-align: left;
    color: #000000;
    letter-spacing: 0px;
    font-size: 1em;
    font-weight: 600;
}

.texto {
    text-align: left;
    color: #000000;
    letter-spacing: 0px;
    font-size: 1em;
}

.container-text {
    margin-bottom: 5%;
}

.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
    display: flex;
    flex-direction: row;
}

.popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    padding: 20px;
    background-color: white;
    z-index: 100;
    border-radius: 10px;
    max-width: 430px;
    height: auto;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000040 0% 0% no-repeat padding-box;
    z-index: 99;
}

.conteudo-popup {
    display: flex;
    flex-direction: column !important;    
    justify-content: center;
}

.popup i {
    color: orange;
    margin-right: 10px;
}

.icon-alert {
    align-items: center;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.icon-alert img {
    width: 45px;
    height: 45px;    
}

#popup-titulo {
    font-weight: 600;
    font-size: 1.3rem;
    text-align: center;
}

#popup-texto {
    text-align: center;
    font-size: 0.98rem;
}

.mb-header {
    background-color: #0066FC;
    color: #ffffff;
    height: var(--altura-cabecalho);
    margin-bottom: var(--margin-botton-cabecalho);
}

.mb-logo-header {
    display: flex;       
    float: left;
    justify-content: center;
    flex-direction: column !important;
    width: 14%;
    max-width: 180px;
}

.mb-logo-mercantil {
    width: 79px;    
    padding-top: 22px;
    margin-left: 30%;    
    display: flex;
    justify-content: flex-end;
    float: right;
}
.grafismo-m-header {
    display: flex;
    align-items: center;
    float: right;
    padding-right: 5%;
}

.grafismo-m {
    object-fit: cover;
    object-position: 0px 30%;
    width: 120px;
    height: 85px;
}

.grafismo-plus1-header {
    display: flex;
    align-items: center;
    float: left;    
    flex-direction: row !important;
    padding-top: 5px
}

.grafismo-plus1 {
    object-fit: cover;
    object-position: 102% 0%;
    width: 23px;
    height: 28px;    
}

.grafismo-plus2-header {
    display: flex;
    align-items: center;
    float: left;
    flex-direction: row !important;    
    margin-left: 20%;
}

.grafismo-plus2 {
    object-fit: cover;
    object-position: 0% 120%;
    width: 35px;
    height: 25px;
}

.grafismo-plus3-header {
    display: flex;
    align-items: center;
    float: left;
    flex-direction: row !important;
    padding-top: 55px;
    margin-left: 30%;
}

.grafismo-plus3 {
    object-fit: cover;
    object-position: 0% 0%;
    width: 50px;
    height: auto;
}

@media screen and (max-width:768px) {
    .grafismo-plus2-header {
        display: none;
    }

    .grafismo-plus3-header {
        display: none;
    }
}

.titulo-validacao {
    padding-bottom: 10px;
}

.titulo-validacao-texto {
    text-align: left;    
    letter-spacing: 0px;
    font-size: 1.6em;
    font-weight: 600;
    
}

.subtitulo-validacao {
    padding-bottom: 38px;
}

.subtitulo-validacao-texto {
    text-align: left;    
    letter-spacing: 0px;
    font-size: 1em;   
}

.codigo-validacao {
    display: flex;
    align-items: center;
    float: left;
    width: 100%;
    
}

.form-codigo-validacao {
    margin-right: 10px;
    padding-right: 5px;
    width: 60%;
    height: 47.5px;
}

.mb-button-ColarCodigo {
    width: 40%;
}

.mb-button-ColarCodigo:hover {
    text-decoration: none;
    color: #0066FF
}

.mb-button-validar-codigo {
    position: fixed;
    bottom: 40px; /* Distância da parte inferior da tela */    
    left: 50%;
    transform: translateX(-50%); /* Centraliza horizontalmente */
    max-width: 378px;
    width:91%;
}

.botao-validar-wzp {
    
}

.titulo-autenticacao {
    padding-bottom: 10px;
}

.titulo-autenticacao-texto {
    text-align: left;
    letter-spacing: 0px;
    font-size: 1.5em;
    font-weight: 600;
}

.subtitulo-autenticacao {
    padding-bottom: 30px;
}

.subtitulo-autenticacao-texto {
    text-align: left;
    letter-spacing: 0px;
    font-size: 15px;
}


/*#endregion */
.text-center2 {
    text-align: center !important;
}

.cover-heading{
    padding-bottom:20px;
}


.form-signin {
    max-width: 410px;
    padding: 5px;
    margin: auto;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #FFFFFF 0% 0% no-repeat padding-box;    
    border-radius: 10px;
    opacity: 1;
    height: calc(100% - var(--altura-cabecalho) - var(--margin-botton-cabecalho));
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #F5F9FF;
    background-clip: border-box;
    border: 1px solid #F5F9FF;
    border-radius: 10px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    margin: 0px
}

.card-font {
    font-size: 11px !important;
    margin: 0px;
    padding-bottom: 0px;
    font-weight: 600;
    font-size: 0.79rem;
    line-height: 1.3;
    letter-spacing: -0.25px;
}

.control-label-mb {
    color: #272727;
    opacity: 1;
    text-align: left;    
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 0.25rem;
}

.form-control-mb {
    border: 1px solid #E2E4F0;
    border-radius: 10px;
    opacity: 1;
    height: calc(2em + .75rem + 2px)
}

.logo-gov {
    width: auto;
    height: 62px;
    margin: auto;
    align-self: center;
}

.auth-titulo {
    margin-top:35px;
    padding-right:40px;
}

.auth-texto-titulo {
    font-size: 17px;
    text-align: left;
    font-weight: 600;
    letter-spacing: -0.66px;
}

.auth-subtitulo {
    
}

.auth-texto-subtitulo {
    font-size: 12px;
    text-align: left;
    font-weight: 400;
}

.mfa-titulo {
    margin-top: 15px;     
}

.mfa-texto-titulo {
    font-size: 1.35em;
    text-align: left;
    font-weight: 600;
}

.mfa-texto-subtitulo {
    text-align: left;
    font-size: 15px;
}

.mfa-telefone {
    text-align: left;    
    padding-bottom: 40px;
}

.mfa-texto-telefone {
    font-size: 1em;
    text-align: left;
    color: #0066FC;    
    text-decoration: underline !important;
    padding: 0px;
}

.mfa-expira {
    padding-top: 50px
}

.mfa-texto-expira {    
    text-align: center;
    color: #8287AB;
    opacity: 1;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
}

.mfa-nrc-codigo{
    
}

.mfa-nrc-texto-codigo {
    font-size: 1em;
    text-align: center;
    opacity: 1;    
    text-decoration: underline;
    color: #0066FC;
}

.mfa-form-codigo {
    
    padding-top:5px;
    padding-bottom:45px;
    
}
.mfa-form-texto-codigo {
    text-align: center;
}

.mfa-confirmacao-texto {
    font-size: 12.7px;
    text-align: left;
    font-weight: 600;
    letter-spacing: -0.6px;
}

.card-confirmacao{
    padding-bottom: 40px;
    padding-top: 25px;
    
}

.confirmacao-subtitulo {
    font-weight: 600;   
}

.confirmacao {
    margin-top: 10px;
    padding-right: 10px;
    margin-bottom: 35px;
}

.confirmacao-dado-cliente {
    margin-top: 20px;
    padding-right: 10px;
    margin-bottom: 35px;
}

.confirmacao-row {
    padding-bottom: 10px;
}

.confirmacao-texto {    
    font-size: 1.68rem;
    text-align: left;
    font-weight: 600;   
    line-height: 1.3;
}

.confirmacao-lista {
    list-style-type: circle;
    margin-bottom: 35px;
    font-size: 12px;
    font-weight: 600;
}

.btn-site-gov {
    background: #0066FC;
    border-radius: 10px;
    opacity: 1;
}

.modal-dialog-telefone {
    max-width: 400px;
    
}

.modal-telefone {
    border-radius: 10px;
}

.modal-header-telefone{
    border-bottom: none;
    padding-bottom:1px;
}

.confirmacao-telefone {
    padding-left: 0px; 
    padding-right: 0px
}

.confirmacao-telefone-texto {
    font-size: 18px;
    text-align: left;
    font-weight: 600;
    letter-spacing: -0.6px;
}

.confirmacao-cancelar {
    padding-top: 30px;
    padding-bottom: 15px;
    text-align: center;
}

.confirmacao-btn-cancelar {
    font-size: 1em;
    text-align: center;
    color: #0066FC;      
}

.modal-body-telefone {
    padding-left: 15px;
    padding-right: 25px;
    padding-top: 0;
    padding-bottom:0;
}

.modal-footer-telefone{
    border-top:none;
}

.btn-telefone {
    border-radius: 10px;
    opacity: 1;
    background: transparent linear-gradient(90deg, #004CDE 0%, #0073D8 100%) 0% 0% no-repeat padding-box;
    border: none;
}

.img-local {
    margin-top: 3px;    
}

.col-confirmacao-icone {
    padding: 1px;
    flex: 0 0 14%;
}

.col-perfil-icone {
    padding: 1px;
    flex: 0 0 8%;
}

.col-perfil-icone img{
    width: auto;
    height: 25px;
    margin: auto;
    align-self: center;
}

.col-perfil-texto {
    padding-top: 1px;
    padding-left: 1px;
}
.col-autentic-icone {
    width: 15%;
    padding-left: 1px;
}
.col-autentic-texto {
    width: 85%;
    padding-top: 1px;
    padding-left: 1px;
}

.col-auth-icone {
    padding: 1px;
    flex: 0 0 11%;
    display: flex;
    align-items: center;
}

.col-auth-texto {
    padding-top: 5px;
    padding-right: 1px;
    padding-left: 1px;
    margin: auto;
}

.texto-perfil {
    font-size: 14px;
    text-align: left;
}

.col-confirmacao-texto {
    padding-right: 1px;
    padding-left: 5px;
}

.p-erro-envio-codigo {
    text-align: center;    
    opacity: 1;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    margin-top: 10px;
    margin-bottom: 6px;
}


/*#region Telefone Não Cadastrado */

.btn-telefone-erro {
    
}

.telefone-nao-cadastrado-titulo {    
    margin-top: 15px;    
    white-space: nowrap;
}

.telefone-nao-cadastrado-texto-titulo {
    font-size: 25px;
    text-align: left;
    font-weight: 600;
    
}

.telefone-nao-cadastrado-subtitulo {
    padding-bottom: 50px
}

.telefone-nao-cadastrado-texto-subtitulo {
    padding-top: 15px;
    padding-bottom:15px;
    text-align: left;
    font-weight: 600;
}

.telefone-erro-icone {
    text-align: center;
    width: 65px;
    height: 65px;
}

.cover-heading-erro-telefone {
    padding-left: 0px;
    padding-bottom: 5px;
}

/*#endregion */


/*#region Icone input senha */

.icon {
    padding: 11px 10px 0px 8px;
    color: grey;
    min-width: 5px;
    text-align: center;
    font-size: 1.3em;
}

.input-field {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border-color: lightgray;
}

.form-group i {
    position: absolute;
    right: 0px;
}

/*#endregion */

/*#region Tela Erro Autenticação */


.btn-erro-autenticacao {
    font-size: 0.95em;
}

.erro-autenticacao-titulo {    
    margin-top: 10px;   
    margin-bottom: 100px;    
}

.erro-autenticacao-texto-titulo {
    font-size: 25px;
    text-align: left;
    font-weight: 600;
    margin-bottom: 10px;
}

.erro-autenticacao-subtitulo {
    font-size: 13px;
    font-weight: 400;
}

.erro-autenticacao-texto-subtitulo {
    font-size: 1rem;
    text-align: left;
}

.erro-autenticacao-erro-icone {
    text-align: left;
    width: 52px;
    height: 52px;
}

.cover-heading-erro-autenticacao {
    
    padding-bottom: 5px;
}

/*#endregion */

/* Central de ajuda*/
.central-ajuda {
}

.central-ajuda-titulo {
    font-size: 30px;
    text-align: left;
    font-weight: 600;
    margin-bottom: 30px;
}

.pergunta {
    width: inherit;
    margin-bottom: 1rem;
}

.resposta {
    color: #535353;
    font-size: 14px;
    margin-bottom: 1rem;
}

.collapsible {
    background-color: white;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    padding-bottom: 5px;
    display: flex;
}

.active, .collapsible:hover {
}

.collapsible:after {
    padding-left: 32px;
    float: right;
    content: url(../Images/Ic_Arrow_Down.png);
    display: flex;
    align-items: center;
    justify-content: center;
}

.active:after {    
    content: url(../Images/Ic_Arrow_Up.png);    
}

.content-resposta {
    padding: 2px 0px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.pesquisar-block {
    padding-bottom: 25px;
}

.pesquisar-input {
    background-image: url(../Images/Icon_Search.png);
    background-position: 10px 10px;
    background-repeat: no-repeat;
    background-size: 19px 19px;
    padding: 0px 20px 0px 40px;
}

.div-codigo-incorreto {
    display: none;
}

.spn-validacao-codigo {
    margin-left: 30px;
}

#spinner-div {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2;
}

#spinner-div-validacao {      
    width: 100%;
    height: 100%;    
    text-align: center;    
    z-index: 2;
}

.icone-olho {
    z-index: 9999;
}

.card-autorizacao {
    font-size: 11px !important;
    margin: 0px;
    padding-bottom: 0px;   
}

.input-senha-borda {
    border-radius: 10px !important;
    border: 1px solid #E2E4F0 !important;
    opacity: 1;
}

.card-font {
    font-size: 11px !important;
    margin: 0px;
    padding-bottom: 0px;
    font-weight: 600;
    font-size: 0.79rem;
    line-height: 1.3;
    letter-spacing: -0.25px;
}

.card-txt-subt {
    font-size: 11px !important;
    margin: 0px;
    padding-bottom: 0px;
    padding-top: 8px;
    font-weight: 600;
    font-size: 0.79rem;
    line-height: 1.3;
    letter-spacing: -0.25px;
}

/*#endregion */


/*#region Barra de Progresso */

.card-govbr-autorizacao {
    margin-top: 37px;
    padding-right: 0px;
    height: 60px;
    margin-bottom: 40px;
}

.col-govbr-autorizacao {
    padding-left: 0px;
    margin-top: 5px;
    padding-right: 0px;
}

.img-icone-govbr-autorizacao {
    float: left;
    margin-right: 6px;
}

/*#endregion */

/*#region Aviso Telefone não Cadastrado */

.aviso-tel-icone {
    text-align: center;    
    height: 50px;
}

.aviso-tel-titulo{
    margin-top: 30px;
}

.aviso-tel-subtitulo {
    margin-top: 25px;
    font-weight: 600;
    margin-bottom: 25px;
}

.aviso-tel-texto{

}

.aviso-tel-botoes {
    margin-top: 75px;    
}

/*#endregion */

