@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins/Poppins-Regular.ttf),
        url(../fonts/Poppins/Poppins-Light.ttf),
        url(../fonts/Poppins/Poppins-Italic.ttf),
        url(../fonts/Poppins/Poppins-LightItalic.ttf),
        url(../fonts/Poppins/Poppins-ExtraLight.ttf),
        url(../fonts/Poppins/Poppins-ExtraLightItalic.ttf),
        url(../fonts/Poppins/Poppins-Black.ttf),
        url(../fonts/Poppins/Poppins-BlackItalic.ttf),
        url(../fonts/Poppins/Poppins-SemiBold.ttf),
        url(../fonts/Poppins/Poppins-ExtraBold.ttf),
        url(../fonts/Poppins/Poppins-ExtraBoldItalic.ttf),
        url(../fonts/Poppins/Poppins-Medium.ttf),
        url(../fonts/Poppins/Poppins-MediumItalic.ttf),
        url(../fonts/Poppins/Poppins-Thin.ttf),
        url(../fonts/Poppins/Poppins-ThinItalic.ttf),
        url(../fonts/Poppins/Poppins-Bold.ttf);
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-Font/Gotham-Black.otf),
        url(../fonts/Gotham-Font/Gotham-Bold.otf),
        url(../fonts/Gotham-Font/GothamMedium.ttf),
        url(../fonts/Gotham-Font/GothamBook.ttf);
}

:root {
    --light-green: #dff0e4;
    --dark-green: #64908F;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
    letter-spacing: 2px;
    text-decoration: none;
}

body {
    width: 100%;
    margin: 0;
    background-image: linear-gradient(white, #dff0e4, white);
}

.body_principal {
    overflow-x: auto;
    width: 1250px;
    margin: 0 auto;
    background-color: #64908F;
    overflow-y: hidden;
}

.body_secundario {
    margin-bottom: 50px;
}

.contornoCorpo {
    height: 100vh;
    width: 100%;
    box-shadow: 5px 5px 20px #333;
}

.sub-menu,
.sobre {
    width: 80%;
}

.conteudoCarregamentoImagem {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.frame_aguarda {
    width: 300px;
    width: auto;
    display: none;
}

.frame_aguarda img {
    width: 300px;
}

#frame_mostra_conteudo {
    display: inline;
}

.cabecalho {
    border: 0px solid red;
    width: 1250px;
    height: 70px;
    align-items: center;
    /* /flex-wrap: wrap; */
    background-color: #dff0e4;
    border-bottom: 4px solid #64908F;
    display: block;
    position: absolute;
    z-index: 999;
}

.cabecalho_itens {

    width: 1000px;
    align-items: center;
    margin: auto;
    background-color: #dff0e4;
    display: flex;
    height: 70px;



}

.logo {
    margin-top: 50px;
    height: 100px;
    margin-right: 25px;
    filter: drop-shadow(1px 1px 5px #333);
    cursor: pointer;
}

.navegacao {
    border: 0px solid red;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: auto;
}

.nav-links {
    display: flex;
    justify-content: space-around;
}

/* Style The Dropdown Button */
.dropbtn {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: 0.1s;
    padding: 0.5em 1em;
    font-size: medium;
    text-decoration: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;

}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    /*position:fixed; */
    background-color: #f9f9f9;
    min-width: 240px;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
    z-index: 1;
    top: 38px;
    /* left: -32px;*/
    font-size: medium;
    text-decoration: none;

}

.btnLinks {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: 0.1s;
    padding: 0.5em 1em;
    font-size: medium;
    text-decoration: none;
    padding: 12px 16px;
    border-bottom: 0.7px solid #ead8d8b3;
}

.btnLinks:hover {
    transition: 0.1s;
    background: #64908F;
    color: white;
}

/* Links inside the dropdown */
.dropdown-content a,
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-decoration: none;
}

/* Change color of dropdown links on hover */

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: flex;
    flex-direction: column;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    transition: 0.1s;
    background: #64908F;
    color: white;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown-content a:hover {
    transition: 0.1s;
    background: #64908F;
    color: white;
}

.conteudo {
    border: 0px solid red;
    position: absolute;
    /* height: 90%; */
    top: 70px;
    /* tamanho do menu header */
    /* padding-top:00px; */
    /* margin-top:0px;	 */
    /* margin-bottom: 0px; */
    bottom: 45px;
    /* tamanho do rodape */
    background-image: linear-gradient(white, #dff0e4, white);
}

.conteudo iframe {
    border: 0;
    margin: 0 auto;
    width: 1250px;
    height: 100%;
}

footer {
    display: block;
    position: fixed;
    width: 1250px;
    bottom: 0;
    /* left:0; */
    background: white;
    text-align: center;
    padding: 10px 0;
    background: #dff0e4;
    border-top: 4px solid #64908F;
    font-size: 0.84em;
}

.cartoes {
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: fit-content;
    gap: 4px;
}

.containerListaCartao{
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.contato {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #64908F;
    /* border-bottom: 4px solid #dff0e4; */
}

.contato .whatsapp {
    margin-bottom: 2em;
}

.conteudo_texto_a {
    margin: auto;
    margin-top: 100px;
    display: inline-block;
    width: 35%;
    align-items: center;
    background: #dff0e4;
    border-bottom: 0px solid #dff0e4;
    box-shadow: 5px 5px 20px #333;
    border-radius: 20px;
    margin: 20px;
    padding: 1em 0em;
}

.conteudo_texto_a p {
    align-items: center;
    font-size: 1em;
    text-align: center;
    color: #64908F;
    padding: 1em 0em;
}

.conteudo_texto_a img {
    display: flex;
    align-items: center;
    margin: auto;
    padding: 1em 0em;
}

.containerPassword,
.containerPerda,
.conteudoCadastroSenha {
    width: 100%;
    height: 100%;

}

.containerFaleConsoco {
    /* height: 500px; */
    width: 50%;
    margin: 0 auto;
}

.conteudoPassword,
.conteudoPerda,
.conteudoCadastroSenha,
.containerBaseCartao {

    background-color: #64908F;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 15px;
    padding: 15px;
    color: white;
}

.conteudoCadastroSenha {
    width: 85%;
}

.conteudoPassword .formCadSenhaItem input,
.conteudoCadastroSenha .formCadSenhaItem input {
    float: left;
    margin-left: 10px;
    padding: 5px;
    border-radius: 5px;
    border: none;
}

.conteudoPassword div label,
.conteudoCadastroSenha div label {
    padding: 5px;
    margin: 5px;
    white-space: nowrap;
}

.containerPasswordBotao {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

.containerPasswordBotao input {
    margin: 0;
    margin-bottom: 20px;
    border-radius: 15px !important;
}

.botaoCadastroSenha {
    display: flex;
    width: 25%;
    justify-content: center;
    margin: auto;
    padding-top: 20px;
}

.botaoCadastroSenha input {
    border-radius: 15px !important;
    margin-bottom: 20px;
}

.atendimentoEmail,
.contatoEndereco,
.contatoCNPJ {
    font-size: 1.18em;
}

.atendimentoEmail {
    text-align: center;
    color: white;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.atendimentoEmail img {
    margin-right: 10px;
}

.contatoEnderecoLocal {
    font-size: 0.8em;
    color: white;
    margin-top: 25px;
    width: 100%;
    text-align: center;
    letter-spacing: 4px;
}

.contatoEnderecoLocal img {
    margin-right: 10px;
}

.conteudoCadastroSenha .formCadSenhaItem input {
    margin-left: 10px;
    padding: 5px;
    border-radius: 5px;
    /* height: 17px; */
    /* min-height: 17px; */
}

.conteudoCadastroSenha .formCadSenhaItem label {
    margin: auto;
    padding: 5px;
    margin: 5px;
    height: 17px;
    margin-bottom: 10px;
    white-space: nowrap;
}

.conteudoCadastroSenha .avisoTopo {
    margin-bottom: 25px;
}

.avisoCampos {
    margin-top: 25px;
}

.formCadSenha {
    display: flex;
    height: auto;
    width: 100%;
    flex-direction: column;
}

.formCadSenha form {
    width: 100%;
}

.conteudoPassword h1 {
    margin-bottom: 20px;
}

.conteudoPassword h3,
.conteudoPerda h3 {
    margin: 15px 0px;
}

.conteudoPassword button,
.conteudoPerda button {
    margin-bottom: 15px;
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    background-color: #dff0e4;
    font-weight: bold;
    width: auto;
}

.conteudoPerda input {
    padding: 5px;
    border-radius: 5px;
    border: none;
    margin-top: 5px;
}

.containerExtrato {
    background-color: #64908F;
    height: auto;
    /* width: 450px; */
    margin: 0 auto;
    padding: 15px;
    text-align: center;
    margin-top: 50px;
    border-radius: 15px;
    color: white;
    width: 75%;
    margin-bottom: 20px;
}

.tituloExtrato {
    font-size: 2em;
}

.containerExtrato input[type=submit] {
    margin: 15px 0px;
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    background-color: #dff0e4;
    font-weight: bold;
    cursor: pointer;
}

#labelDesc {
    margin-bottom: 20px;
}

#labelExtrato {
    display: inline-block;
}

#e_filtro {
    margin: 10px;
    background: #dff0e4;
    border: none;
    position: relative;
    border-radius: 10px;
    padding: 7px 20px;
    text-align: center;
    height: 3em;
    letter-spacing: 2px;
    cursor: pointer;
}

option {
    cursor: pointer;
}

#e_datai,
#e_dataf {
    padding: 5px 15px;
    border-radius: 5px;
    border: none;
    margin: 10px 0px;
}

.resultadoExtrato {
    background-color: #64908F;
    width: 94%;
    margin: 0 auto;
    padding: 15px;
    text-align: center;
    border-radius: 15px;
    color: white;
    margin-top: 50px;
    margin-bottom: 25px;
    height: 100%;
}

#inputSenhaExtrato {
    padding: 5px 15px;
    border-radius: 5px;
    border: none;
    margin: 10px 0px;
    text-align: left;
}

.avisoExtrato {
    color: white;
    font-size: 1.3em;
    margin-top: 50px;
    width: 100%;
    text-align: center;
}

.resultadoExtrato table {
    border-collapse: collapse;
    margin: 0 auto;
    margin-left: 30px;
}

.resultadoExtrato th,
.resultadoExtrato td {
    border: 2px solid #dff0e4;
    padding: 12px;
}

#parcelamento {
    background-color: #dff0e4;
    color: black;
}

#parcelamento th,
#parcelamento td {
    border: 2px solid #64908F;
}

.containerRedeCredenciada {
    background-color: #64908F;
    /* width: 500px; */
    height: 300px;
    margin: 0 auto;
    margin-top: 50px;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    color: white;
    width: 75%;
    margin-bottom: 20px;
}

.containerRedeCredenciada h1 {
    margin-bottom: 30px;
}

#filtroCidades {
    background: #dff0e4;
    border: none;
    border-radius: 10px;
    /* padding: 5px 15px; */
    padding-left: 25px;
    width: 47%;
    height: 2.5em;
    cursor: pointer;
}

.divFiltrosGuiaCompras {
    height: 80px;
}

.divFiltrosGuiaCompras label {
    width: 100%;
}

.labelFiltroCompras {
    margin-right: 5px;
}

#divSegmento {
    width: 30%;
    float: left;
    height: 250px;
    border-right: 2px solid #dff0e4;
}

#divSegmento a {
    text-decoration: none;
    color: white;
}

#segmento {
    text-align: left;
    margin-top: 15px;
    max-height: 200px;
    overflow: auto;
}

#divCartao {
    width: 30%;
    height: 250px;
    float: left;
    border-right: 2px solid #dff0e4;
}

#divCartao div {
    position: relative;
    top: 30%;
}

#divCartao input {
    padding: 5px 15px;
    border-radius: 5px;
    border: none;
    margin-top: 5px;
}

#divFiltro {
    width: 39%;
    float: left;
    height: 300px;

}

#divFiltro div {
    position: relative;
    top: 20%;
}

#CAMPO_FILTRO {
    width: 40%;
    border-radius: 5px;
    border: none;
    padding: 5px 15px;
    margin-top: 5px;
}

#FILTRO {
    background: #dff0e4;
    border: none;
    border-radius: 10px;
    padding: 5px 15px;
    width: 47%;
    height: 2.5em;
    cursor: pointer;
}

#divFiltro input[type=submit] {
    width: 100px;
    border: none;
    padding: 5px 0px;
    border-radius: 5px;
    background-color: #dff0e4;
    cursor: pointer;
}

select option {
    cursor: pointer;
}

.containerExibeResultado {
    background-color: #64908F;
    width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    color: white;
    height: 85vh;
    overflow-y: scroll;
}

.containerExibeResultado table {
    border-spacing: 0 20px;
    width: 100%;
}

.tableGuiaCompra tr:last-child {
    padding-left: 10px;
}

.containerExibeResultado tr {
    line-height: 37px;
    text-align: center;
    color: white;
}

.containerExibeResultado tr td {
    /* padding-left: 5px; */
    /* padding-right: 5px; */
    font-size: 1.1em;
}

.containerExibeResultado tr:nth-child(odd) {
    background-color: #dff0e4;
    color: black;
}

/* Works on Firefox */
.containerExibeResultado {
    /* scrollbar-width: thin; */
    scroll-margin-left: 50px;
    scrollbar-width: 30px;
}

/* Works on Chrome, Edge, and Safari */
.containerExibeResultado::-webkit-scrollbar {
    width: 30px;
    margin-left: 50px;
}

.voltar {
    margin-top: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conteudoFaleConsoco {
    width: 70%;
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
    padding: 15px;
    color: white;
    border: 1px solid #fff;
    border-radius: 30px;
}

#formFaleConsoco label {
    font-size: 1em;
}

.conteudoFaleConsoco h1 {
    margin-bottom: 5px;
}

.conteudoFaleConsoco input {
    margin-top: 5px;
    border: none;
    padding: 5px 15px;
    border-radius: 5px;
}

.conteudoFaleConsoco textarea {
    width: 358px;
    height: 103px;
    padding: 5px 10px;
    margin-top: 8px;
    border-radius: 5px;
    border: none;
    margin-bottom: 25px;
}

.containerProdutos {
    width: 90%;
    background-color: #64908F;
    padding: 30px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 15px;
    border-radius: 15px;
    color: white;
}

.containerProdutos h2 {
    margin-bottom: 10px;
}

.containerProdutos h4 {
    margin: 15px 0px;
}

.containerProdutos ul {
    padding: 0px 15px;
}

.containerProdutos li {
    margin-top: 15px;
}

.containerVale {
    width: 800px;
    background-color: #64908F;
    padding: 30px;
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 15px;
    color: white;
    text-align: center;
}

.conteudoVale {
    margin-top: 20px;
}

.conteudoVale div {
    margin: 15px 0px;
}

.conteudoVale input {
    border: none;
    padding: 5px 15px;
    border-radius: 5px;
}

.conteudoVale input[type=submit] {
    background-color: #dff0e4;
    cursor: pointer;
}

.containerVenda,
.containerSaude {
    width: 800px;
    background-color: #64908F;
    padding: 30px;
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 15px;
    color: white;
    text-align: center;
}

.containerVenda div,
.containerSaude div {
    margin: 15px 0px;
}

.containerVenda input,
.containerSaude input {
    border: none;
    padding: 5px 15px;
    border-radius: 5px;
}

.containerArquivos {
    width: 80%;
    background-color: #64908F;
    padding: 30px;
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
    color: white;
}

.containerArquivos a {
    display: block;
    text-decoration: none;
    color: white;
    margin: 10px 0px;
}

.containerArquivos a:hover {
    font-weight: bold;
}

.btnEnviar {
    margin-bottom: 15px;
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    background-color: #dff0e4;
    font-weight: bold;
    cursor: pointer;
    margin-top: 35px;
    margin: auto;
    width: auto;
}

.btnEnviar:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.4s;
}

.btnEntreContato {
    margin-bottom: 15px;
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    background-color: #dff0e4;
    font-weight: bold;
    cursor: pointer;
    margin-top: 35px;
    margin: auto;
    width: auto;
}

.btnEntreContato:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.4s;
}

#btnEnviarModal {
    display: block;
    margin: auto;
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    background-color: #dff0e4;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
}

.btnGuiaCompra {
    margin-bottom: 15px;
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    background-color: #dff0e4;
    font-weight: bold;
    cursor: pointer;
}

#btnEnviar:hover,
#btnEnviarModal:hover {
    opacity: 0.8;
    transition: 0.4s;
}

.conteudoPerda p {
    font-size: 1.2em;
    margin-top: 10px;
    margin-bottom: 15px;
    text-align: center;
}

#containerRadio {
    margin-bottom: 15px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.radio {
    text-align: left;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    margin: 5px;
    margin-left: 55px;
}

.radio label {
    width: 300px;
}

#senhacartao {
    margin-bottom: 20px;
}

.modal {
    display: none;
    position: absolute;
    z-index: 10;
    top: 150px;
    width: 700px;
    height: 360px;
    background-color: #64908F;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    margin-top: 100px;
}

.contentModal {
    background-color: #64908F;
    width: 100%;
    height: 100%;
}

.contentModal h1 {
    color: white;
    font-size: 1.2em;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

.contentModal h2 {
    color: white;
    text-align: center;
    margin-bottom: 0px;
    font-size: 1em;
}

#caixaRadio {
    color: white;
    margin-top: 30px;
}

#caixaRadio h2 {
    text-align: center;
    font-size: 1em;

}

.conteudoGruposCaixas {
    text-align: center;
    width: 100%;
    margin: auto;
    margin-top: 20px;
    display: block;
}

.conteudoGruposCaixas h2 {
    color: white;
    margin-top: 20px;
    margin-bottom: 20px;
}

.conteudoAplicativos {
    text-align: center;
    width: 100%;
    margin: auto;
    display: block;
}

#selectCart {
    background: #dff0e4;
    border: none;
    border-radius: 10px;
    padding: 5px 15px;
    width: 47%;
    height: 2.5em;
    cursor: pointer;
    margin-left: 30%;
}

.conteudoPerda {
    width: 75%;
}

.avisoLogin {
    font-size: 1.1em;
    margin-bottom: 25px;
}

.linkLogin {
    color: white;
}

.formCadSenhaItem {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.formCadSenhaItem label {
    width: 50%;
    text-align: right;
}

.formCadSenhaItem input {
    width: 30%;
    border: none;
}

.formCadComercio .formCadSenhaItem input {
    width: 45%;
    border: none;
}

.conteudoPassword h3 {
    font-size: 1.1em;
    margin-bottom: 20px;
}

.conteudoPassword {
    width: 85%;
}

.conteudoPassword form {
    width: 100%;
}

.contato {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #64908F;
    /* border-bottom: 4px solid #dff0e4; */
}

.contato h1 {
    width: 90%;
    font-size: 1em;
    text-align: center;
    color: white;
    /* text-shadow: 2px 1px black; */
    padding: 3em 0em;
}

.contato h2 {
    width: 90%;
    font-size: 1em;
    text-align: center;
    color: white;
    /* text-shadow: 2px 2px black; */
    padding-bottom: 1em;
}

.contato h2 a {
    text-decoration: none;
    color: white;
}

.contato .whatsapp {
    margin-bottom: 2em;
}

.conteudo_texto {
    margin: auto;
    margin-top: 20px;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    background: #64908F;
    border-bottom: 0px solid #dff0e4;
    /* box-shadow: 5px 5px 20px #333; */
    border-radius: 40px;
}

.conteudo_texto_cartoes {
    margin: auto;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    background: #64908F;
    border-bottom: 0px solid #dff0e4;
    /* box-shadow: 5px 5px 20px #333; */
    border-radius: 40px;
}

.conteudo_texto p,
.conteudo_texto_cartoes p {
    width: 85%;
    font-size: 1.05em;
    text-align: center;
    color: white;
    /* text-shadow: 2px 2px black; */
    padding: 1em 0em;
}

.conteudo_texto_a {
    margin: auto;
    margin-top: 100px;
    display: inline-block;
    width: 35%;
    align-items: center;
    background: #dff0e4;
    border-bottom: 0px solid #dff0e4;
    box-shadow: 1px 1px 8px #333;
    border-radius: 20px;
    margin: 20px;
    padding: 1em 0em;
}

.conteudo_texto_a a {
    text-decoration: none;
}

.conteudo_texto_a p {
    align-items: center;
    font-size: 1em;
    text-align: center;
    color: #64908F;
    padding: 1em 1em;
}

.conteudo_texto_a img {
    display: flex;
    align-items: center;
    margin: auto;
    padding: 1em 0em;
}

.contatoHomePage {
    width: 100%;
    /* height: 600px; */
    background-color: #64908F;
    display: flex;
    flex-direction: row;
    padding-bottom: 30px;
    flex-wrap: wrap;
}

.container-contatos {
    margin: 0 auto;
    /* padding: 2em 0em; */
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-top: 30px;
}

.container-contatos h3 {
    font-size: 2em;
    color: white;
    position: relative;
    display: block;
    text-align: center;
    margin: 15px 0px;
}

.container-footer p {
    display: flex;
    align-items: center;
    color: white;
}

.contatoCNPJ {
    color: white;
    text-align: center;
    margin-top: 25px;
}

.contatoEndereco {
    color: white;
    text-align: center;
    margin-top: 25px;
    /* margin-bottom: 20px; */
}

.telefone {
    width: 100%;
    display: flex;
    text-align: justify;
    /* margin: 1em 0em; */
    justify-content: center;
    margin-bottom: 1em;
    position: relative;
}

.telefone div p {
    margin: 10px;
    font-size: 1em;
    color: white;
}

.telefone div p:first-child {
    margin-top: 0px;
}

.linkWhats {
    background: #25d366;
    text-decoration: none;
    color: white;
    padding: 0.4em 1em;
    display: flex;
    justify-content: center;
    border-radius: 10px;
    width: 110px;
    margin: 5px auto;
}

.linkWhats:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.4s;
}

.linkWhats img {
    margin-right: 5px;
}

.dropdown {
    white-space: nowrap;
    text-align: left;
}

.voltarExtrato button {
    height: 50px;
    width: 110px;
    text-align: center;
    background-color: #dff0e4;
    opacity: 1;
    font-size: 1em;
    margin-top: 25px;
}

.voltar .btnEnviar {
    width: 120px;
}

#parcelamento {
    width: 42%;
}

#parcelamento tr {
    font-size: 1em;
}

.containerSaldo,
.containerCarregamento {
    background-color: #64908F;
    margin: 0 auto;
    border-radius: 15px;
    text-align: center;
    color: white;
    height: auto;
}

.containerCarregamento {
    padding-top: 20px;
}

.containerCarregamento {
    display: none;
}

.containerSaldo table,
.containerCarregamento table {
    margin-left: 0px;
    font-size: 1em;
    position: relative;
    height: auto;
}

.containerCarregamento table {
    width: 870px;
    margin-left: 10%;
    margin-right: 10%;
}

.containerSaldo thead tr,
.tableCarregamento thead tr {
    line-height: 30px;
    text-align: center;
    color: white;
}

.containerSaldo thead tr th,
.tableCarregamento thead tr th {
    position: sticky;
    top: -50px;
    background-color: #64908F;
}

.containerSaldo tbody tr,
.tableCarregamento tbody tr {
    line-height: 25px;
    text-align: center;
    color: white;
}

.containerSaldo tbody tr:nth-child(odd) {
    background-color: #dff0e4;
    color: black;
}

.containerCarregamento tbody tr:nth-child(odd) {
    background-color: #dff0e4;
    color: black;
}

.containerSaldo tfoot tr {
    line-height: 30px;
    text-align: center;
    color: white;
}

#table1 {
    width: 50%;
}

#tabelaSaldo {
    width: 100%;
}

#tabelaSaldo thead th,
#tabelaSaldo tbody td {
    font-size: 1.04em;
    text-align: center;
}

.tituloTableCarregamento {
    text-align: center;
    /* background-color: #dff0e4; */
    font-size: 1.15em;
}

.nossaHistoria {
    text-indent: 40px;
    white-space: pre-line;
}

.paragrafoSite {
    text-indent: 25px;
}

.containerCardComercio {
    background-color: #64908F;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 15px;
    padding: 15px;
    color: white;
    width: 85%;
    height: auto;
}

.conteudoCadastroComercio {
    background-color: #64908F;
    margin: 0 auto;
    /* margin-top: 20px; */
    margin-bottom: 20px;
    text-align: center;
    border-radius: 15px;
    padding: 15px;
    color: white;
}

.caixaCadastroComercio {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    margin-top: 30px;
}

.containerCadastroComercioVantagens {
    width: 40%;
    border-left: 1px solid #dff0e4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cadastroComercioVantagens {
    margin-top: 100px;
    width: 300px;
    align-items: center;
    background: #dff0e4;
    border-bottom: 0px solid #dff0e4;
    box-shadow: 5px 5px 10px #333;
    border-radius: 20px;
    margin: 20px;
    padding: 1em 0em;
}

.cadastroComercioVantagens p {
    font-size: 1em;
    text-align: center;
    color: #64908F;
    padding: 1em 1em;
    white-space: break-spaces;
}

#containerCadastroComercioVantagensComercio .cadastroComercioVantagens:first-child {
    margin-top: -33px;
}

#containerCadastroComercioVantagensEmpresa .cadastroComercioVantagens:first-child {
    margin-top: 0px;
}

.containerFormCadComercio {
    width: 60%;
    margin-right: 60px;
}

.formCadComercio {
    display: flex;
    height: auto;
    width: 100%;
    flex-direction: column;
    margin-bottom: 10px;
}

.conteudoCadastroComercio .formCadComercio input {
    margin-left: 10px;
    padding: 5px;
    border-radius: 5px;
}

.conteudoCadastroComercio .formCadComercio label {
    margin: auto;
    padding: 5px;
    margin: 5px;
    height: 17px;
    margin-bottom: 10px;
    white-space: nowrap;
}

.containerCartoes {
    background-color: #64908F;
    height: auto;
    width: 95%;
    margin: 0 auto;
}

.botaoCadastroComercio {
    display: flex;
    width: 25%;
    justify-content: center;
    margin: auto;
    padding-top: 20px;
}

.botaoCadastroComercio input {
    border-radius: 15px !important;
    margin-bottom: 20px;
}

.caixaCartao {
    width: 33%;
    height: fit-content;
}

.caixaCartao h2 {
    text-align: left;
    color: #64908F;
    font-weight: bolder;
    margin-top: 10px;
    font-size: 1em;
    padding-right: 15px;
    padding-top: 15px;
    width: 120px;
    align-self: flex-end;
}

.caixaCartao button {
    background-color: white;
    font-size: 1em;
    border-radius: 20px;
    width: 150px;
    cursor: pointer;
    border: none;
    height: 40px;
    background-color: #64908F;
    color: white;
    font-size: 1em;
    text-align: center;
    margin-top: -80px;
}

.caixaCartao button:hover {
    background-color: #64908F;
    transition: 0.3s;
    opacity: 0.8;
}

.caixaCartao img {
    width: 100%;
}

.contatoCartao {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.contatoCartaoBotao {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;
}

.contatoCartaoBotao button {
    background-color: white;
    font-size: 1em;
    border-radius: 20px;
    width: 300px;
    cursor: pointer;
    border: none;
    height: 50px;
    background-color: #64908F;
    color: white;
    font-size: 1.5em;
}

.contatoCartaoBotao button:hover {
    background-color: #64908F;
    transition: 0.3s;
    opacity: 0.8;
}

.contatoCartao h1 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: #64908F;
    font-weight: bolder;
}

.contatoCartaoTextoAbaixo {
    padding-top: 0px !important;
}

.conteudo_texto_cartao {
    margin: auto;
    margin-top: 100px;
    display: inline-block;
    width: 35%;
    align-items: center;
    background: #dff0e4;
    border-bottom: 0px solid #dff0e4;
    /* box-shadow: 5px 5px 20px #333; */
    border-radius: 20px;
    margin: 20px;
    padding: 1em 0em;
}

.conteudo_texto_cartao h3 {
    align-items: center;
    font-size: 1.5em;
    text-align: center;
    color: white;
    /* text-shadow: 1px 0px black; */
    padding: 1em 0em;
}

.conteudo_texto_cartao p {
    align-items: center;
    font-size: 1em;
    text-align: center;
    color: white;
    text-shadow: 1px 0px black;
    padding: 1em 0em;
}

.conteudo_texto_cartao img {
    display: flex;
    align-items: center;
    margin: auto;
    padding: 1em 0em;
}

.cartaoPagamento {
    height: 300px;
    /* background-color: #64908F; */
}

.cartaoPagamento h2 {
    color: white;
    font-size: 1.5em;
    font-weight: bolder;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.containerPagamento {
    display: flex;
    flex-direction: row;
}

.caixaPagamento {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 150px;

}

.caixaPagamento p {
    color: white;
    font-size: 1em;
    text-align: center;
}

.conteudoCadastroComercio h2 {
    font-size: 1.2em;
    margin-top: 10px;
}

.contatoHomePage a {
    text-decoration: none;
}

.campoTabelaAlerta {
    background-color: yellow;
    color: red;
    /* white-space: nowrap; */

}

.containerModalMensagemErro {
    display: none;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.modalMensagemErro {
    height: auto;
    width: 50%;
    background-color: #64908F;
    position: relative;
    top: 100px;
    /* display: none; */
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.modalMensagemErro h1 {
    font-size: 1.2em;
    color: red;
    text-align: center;
    padding-top: 20px;
    white-space: nowrap;
}

.modalMensagemErro p {
    font-size: 1em;
    color: white;
    text-align: center;
    padding-top: 20px;
    white-space: inherit;
    padding: 20px 5px 10px 5px;
}

.modalMensagemErro button {
    background-color: #dff0e4;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: 0.1s;
    padding: 0.5em 1em;
    font-size: medium;
    text-decoration: none;
    border-radius: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.modalMensagemErro button:hover {
    transition: 0.1s;
    cursor: pointer;
    opacity: 0.8;
}

.conteudoVoltarGuia {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.btnVoltarGuia {
    margin-bottom: 15px;
    padding: 13px 20px;
    border-radius: 15px;
    border: none;
    background-color: #dff0e4;
    /* font-weight: bold; */
    cursor: pointer;
    margin-top: 35px;
    margin: auto;
    width: auto;
    font-size: 1em;
}

.btnVoltarGuia:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.4s;
}

.img_natal {
    width: 100%;
    height: 700px;
}

.img_natal_conteudo {
    width: 90%;
    margin: auto;
    display: block;
    margin-top: 50px;
}

.btnNatal {
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    background-color: #64908F;
    font-weight: bold;
    cursor: pointer;
    margin: auto;
    width: 150px;
    display: block;
    color: white;
    font-size: 1.3em;
    margin-top: 20px;
    margin-bottom: 30px;
}

.btnNatal:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.4s;
}

.btnNatalBannerSaibaMais {
    border-radius: 30px;
    width: 160px;
    cursor: pointer;
    border: 1px solid #649794;
    height: 45px;
    background-color: #649794;
    color: #fff;
    font-size: 1.3em;
    text-align: center;
    display: block;
    margin-bottom: 30px;
    margin-right: 10px;
}

.btnNatalBannerSaibaMais:hover {
    cursor: pointer;
    transition: 0.4s;
    opacity: 0.9;
}

.btnNatalBannerEntreContato {
    border-radius: 20px;
    width: 190px;
    cursor: pointer;
    border: none;
    height: 45px;
    /* background-color: #64908F; */
    background-color: #64908F;
    color: white;
    font-size: 1em;
    text-align: center;
    display: block;
    margin-bottom: 30px;
    margin-left: 10px;
    /* font-family: 'Gotham', sans-serif; */
}

.btnNatalBannerEntreContato:hover {
    cursor: pointer;
    transition: 0.2s;
    opacity: 0.8;
}

.conteudo-natal {
    background-image: url(../img/banner_site.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    display: flex;
    align-items: flex-end;
    background-position-x: center;
    background-position-y: top;
    background-size: cover;

}

.container-natal h1 {
    text-align: center;
    margin-bottom: 20px;
    color: white;
    padding-top: 15px;
}

.tituloNatal {
    background-color: #64908F;
    height: 80px;
}

.btnNatalBanner {
    display: flex;
    flex-direction: row;
    margin-top: 50px;
    justify-content: center;
}

.NatalFrases {
    color: #64908F;
    font-size: 1.2em;
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-top: 30px;
    white-space: inherit;
}

.NatalFrasesConteudo {
    /* background-color: #dff0e4; */
    background-color: #dff0e4;
    border-radius: 20px;
    /* color: #64908F; */
    color: white;
    margin-left: 20px;
    margin-right: 20px;
    width: 400px;
    box-shadow: 1px 1px 5px #333;
    color: #64908F;
    /* box-shadow: 2px 2px 8px #333; */
}

.NatalFrasesConteudo h1 {
    font-size: 0.8em;
    white-space: inherit;
    /* padding: 10px; */
    padding: 15px 5px;
    /* font-family: 'Gotham', sans-serif; */
}

.T_NatalFrases {
    color: #64908F;
    font-size: 1.2em;
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    white-space: inherit;
}

.T_NatalFrasesConteudo {
    /* background-color: #dff0e4; */
    background-color: #FFD573;
    border-radius: 20px;
    /* color: #64908F; */
    color: white;
    margin-left: 20px;
    margin-right: 20px;
    width: 1250px;
    /* box-shadow: 2px 2px 8px #333; */
}

.T_NatalFrasesConteudo h1 {
    font-size: 1.8em;
    white-space: inherit;
    /* padding: 10px; */
    padding: 3px;
    /* font-family: 'Gotham', sans-serif; */
}

.containerPropagandaInicial {
    background-image: url('../img/natal_capa.jpg');
    background-size: auto;
    background-repeat: no-repeat;
    background-position: left center;
    height: 550px;
    width: 100%;
}

.caixabtnNatalBannerSaibaMais {
    position: relative;
    top: 87%;
    left: 18%;
    width: fit-content;
}

.tituloLink {
    font-size: 1.5em;
    margin-top: 20px;
    margin-bottom: 20px;
}

.linha {
    color: white;
}

.containerFarmaciaPrincipal,
.containerFarmaciaSecundaria {
    display: flex;
    width: 100%;
}

.containerFarmaciaSecundaria {
    flex-direction: row;
    /* background-color: #fff; */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    width: 100%;
    margin-top: -70px;
}

.conteudoFarmaciaContato {
    width: 50%;
}

.conteudoFarmaciaContato h1,
.conteudoFarmaciaCartao h1 {
    text-align: center;
    margin-bottom: 15px;
}

.conteudoFarmaciaCartao {
    width: 50%;
    padding-left: 50px;
}

.conteudoFarmaciaCartao p {
    text-indent: 15px;
}

.conteudoFarmaciaCartao img {
    display: block;
    margin: auto;
    width: 100%;
    /* margin-top: -30px; */
    /* transform: rotate(0.97turn); */
    /* filter: drop-shadow(1px 1px 2px #fff); */
    margin-top: 20px;
    margin-bottom: 50px;
}

.container-contato-cartao-whats {
    display: flex;
    justify-content: center;
    margin: 40px 0px;
}

.formCartao {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.formCartao input {
    padding: 5px;
    border-radius: 5px;
    border: none;
    margin-top: 5px;
    margin-bottom: 15px;
    width: 70%;
}

.hover,
.hoverBaixo {
    position: absolute;
    width: 33%;
    height: 330px;
    z-index: 0;
    background: transparent;
    color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0.70;
    cursor: pointer;
}

.hover:hover,
.hoverBaixo:hover {
    visibility: visible;
    background-color: #333;
    color: #fff;
}

.hover p,
.hoverBaixo p {
    font-size: 1.5em;
    text-align: center;
    font-weight: 900;
}

.hover {
    top: 75px;
}

.hoverBaixo {
    top: 408px;
}

.containerVantagensCartao {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    margin: 20px 0;
}

.containerVantagensCartao h2 {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 15px;
    width: 100%;
    font-size: 1.5em;
    color: #fff;
}

.conteudoVantagensCartao {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.caixaVantagensCartao {
    width: 30%;
    display: flex;
    flex-direction: column;
}

.TituloVantagensCartao {
    width: 100%;
    text-align: center;
    font-size: 1em;
    padding: 10px 0px;
    color: #fff;

}

.IconeVantagensCartao {
    display: block;
    margin: auto;
}

.containerDescricaoCartao {
    width: 95%;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 15px;
    border-radius: 15px;
    color: white;
    margin-bottom: 50px;
}

.formCartaoContato {
    border: 1px solid white;
    border-radius: 30px;
    padding: 20px 0px;
    width: 70%;
    margin: auto;
}

.containerVantagensEmpresa,
.containerVantagensColaboradoes {
    width: 50%;
}

.containerVantagensEmpresa {
    padding: 50px 30px 50px 110px;
}

.containerVantagensColaboradoes {
    padding: 50px 30px 50px 110px;
}

.containerVantagensEmpresa h2,
.containerVantagensColaboradoes h2 {
    margin-bottom: 20px;
}

.listaCartaoVantagens>li {
    font-size: 0.9em;
}

.linkWhatsCartao {
    background: #25d366;
    text-decoration: none;
    color: white;
    padding: 0.4em 1em;
    display: flex;
    justify-content: center;
    border-radius: 10px;
    width: 120px;
    margin-bottom: 1.5em;
}

.linkWhatsCartao:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.4s;
}

.linkWhatsCartao img {
    margin-right: 5px;
}

.containerLinks {
    display: flex;
    flex-direction: column;
}

.conteudoLinks {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.containerLinks h4 {
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 15px;
}

.itemLinks {
    padding: 0px 10px;
}

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

.containerWipay {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

.caixaImagemWipay {
    width: 50%;
    background: linear-gradient(180deg, rgba(185, 201, 190, 1) 0%, rgba(100, 144, 143, 1) 100%);
    border-top-right-radius: 420px;
    border-bottom-right-radius: 420px;
}

.conteudoWipay {
    width: 60%;
}

.imagemWipay {
    width: 100%;
    filter: drop-shadow(1px 20px 10px black);
}

.conteudoWipayBotao {
    margin: auto;
    border-radius: 30px;
    width: auto;
    cursor: pointer;
    border: none;
    height: 45px;
    background-color: #64908F;
    color: white;
    font-size: 1em;
    text-align: center;
    display: block;
    margin-top: 20px;
    padding: 10px 20px;
    cursor: pointer;
}

.conteudoWipayBotao:hover {
    opacity: 0.8;
    transition: 0.4s;
}

.conteudoWipayTitulo {
    font-size: 1.2em;
    color: #64908F;
    margin: 20px;
    text-align: center;
}

.conteudoWipayTituloPrincipal {
    font-size: 1.5em;
    color: #64908F;
    margin: 10px;
    text-align: center;
}

.containerDetalhesApp {
    width: 95%;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 15px;
    border-radius: 15px;
    color: white;
    margin-bottom: 50px;
    background-color: #6fa09c;
}

.containerAplicatoTelaInicial {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.conteudoCompraWipay,
.conteudoCompraWipayImagem {
    width: 50%;
}

.conteudoCompraWipayDetalhes {
    width: 60%;
}

.conteudoAplicatoWipayImagem {
    background: linear-gradient(180deg, rgba(185, 201, 190, 1) 0%, rgba(100, 144, 143, 1) 100%);
    border-top-right-radius: 420px;
    border-bottom-right-radius: 420px;
    width: 40%;
}

.conteudoCompraWipayImagem {
    background: linear-gradient(180deg, rgba(185, 201, 190, 1) 0%, rgba(100, 144, 143, 1) 100%);
    border-top-left-radius: 420px;
    border-bottom-left-radius: 420px;
    width: 40%;
}

.conteudoAplicatoTelaInicialImagem {
    filter: drop-shadow(1px 10px 3px black);
    display: block;
    margin: auto;
}

.conteudoCompraImagemWipay {
    filter: drop-shadow(1px 10px 3px black);
    display: block;
    margin: auto;
}

.conteudoAplicatoWipay,
.conteudoCompraWipay {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.conteudoWipay a {
    text-decoration: none;
}

.wipayTitulos {
    text-align: center;
    font-size: 2em;
    color: #64908F;
    font-family: 'Gotham';
    margin-top: -50px;
    margin-bottom: 25px;
}

.containerVideo {
    width: 100%;
    height: auto;
}

.containerVideo h3 {
    text-align: center;
    color: #64908F;
    font-size: 1em;
}

.containerVideo video {
    display: block;
    margin: auto;

}

.containerPassoWipay {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 50px;
    justify-content: center;
    align-items: center;
}

.imagemPassoAPasso {
    position: relative;
    max-height: 300px;
}

.ordemPassoAPasso {
    text-align: center;
    color: #fff;
    font-size: 1.2em;
    background-color: #64908F;
    width: 50px;
    display: block;
    margin: auto;
    border-radius: 50%;
    height: 50px;
    line-height: 50px;
    margin-bottom: 10px;
}

.caixaPasso {
    margin: 10px;
}

.descricaoPassoAPasso {
    text-align: center;
    color: black;
    font-size: 1em;
    height: 50px;
}

.imagemWipayPassoAPasso {
    padding-left: 30px;
}

.conteudoWipayDescricao {
    font-size: 1.5em;
    text-align: center;
    padding: 5px;
    font-weight: lighter;
    font-family: 'Gotham';
}

.containerPassoApp {
    margin: 0px 30px;
}

.containerPassoApp h1 {
    text-align: center;
    font-size: 1.2em;
    color: #64908F;
    width: 150px;
    height: 50px;
    /* white-space: nowrap; */
}

.containerPassoApp img {
    max-height: 300px;
    display: block;
    margin: auto;
}

.containerDetalhesPassoApp {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    margin-bottom: 50px;
}

#fraseWipayCadastro {
    margin-top: 50px;
}

#imagemTelaInicialPassoAPasso {
    padding-right: 50px;
}

#textoOverflow {
    margin-top: -30px;
    margin-bottom: 30px;
}

.conteudoWipayInicial {
    width: 50%;
}

.conteudoWipayInicial a {
    text-decoration: none;
}

#valorizeTrabalhadores {
    margin-top: -140px;
    margin-bottom: 50px;
}

.baixarApp a {
    text-decoration: none;
}

.baixarApp {
    margin-top: -60px;
    margin-bottom: 25px;
    padding-left: 170px;
}

.fraseEfeitoWipay {
    text-align: center;
    font-size: 1.5em;
    color: #fff;
    background-color: #375377;
    border-radius: 30px;
    width: 400px;
    display: block;
    margin: auto;
    margin-bottom: 15px;
    padding: 10px;
}

.wipayTexto {
    text-align: center;
    font-size: 2.2em;
    color: #64908F;
    text-shadow: 1px 1px black;
}

#bodyCartaoAlimentacao {
    background: #22a7ae;
    min-height: 100vh;
}

#bodyCartaoRefeicao {
    background: #d36c59;
    min-height: 100vh;
}

#bodyCartaoCombustivel {
    min-height: 100vh;
    background: #ff9c01;
}

#bodyCartaoFarmacia {
    background: #0e456c;
    min-height: 100vh;
}

#bodyCartaoConvenio {
    background: #43928d;
    min-height: 100vh;
}

#bodyCartaoPresente {
    background: #242d54;
    min-height: 100vh;
    overflow-x: hidden;
}

.selecione {
    font-size: 1.3em;
    margin: 15px 0px;
}

.radioEstilo {
    border: 1px solid;
    width: 60%;
    border-radius: 30px;
    margin: auto;
    margin-top: auto;
    margin-top: 5px;
    padding: 10px;
}

#bodyFinanciamento {
    background: rgb(88, 128, 191);
    background: linear-gradient(180deg, rgba(88, 128, 191, 1) 0%, rgba(22, 43, 76, 1) 81%);
}

.containerFinanciamentoCartao,
.containerCartaoNatal {
    display: flex;
    flex-direction: column;
    padding: 30px 0px;
    justify-content: center;
    /* align-items: center; */
    background-color: #fff;
}

.containerFinanciamentoCartao img,
.containerCartaoNatal img {
    width: 600px;
    height: 450px;
    display: block;
    margin: auto;
    border-radius: 15px;
    box-shadow: 2px 1px 5px #000;
}

.containerCartaoNatal img {
    height: auto;
    margin-bottom: 16px;
}

.containerFinanciamentoCartao h1,
.containerCartaoNatal h1 {
    font-size: 1.5em;
    text-align: center;
    color: #314e7b;
}

.containerFinanciamentoCartao p,
.containerCartaoNatal p {
    font-size: 1em;
    text-align: justify;
    color: #314e7b;
    text-indent: 15px;
    padding: 30px;
}

.containerFinanciamentoCartaoExplicacao {
    width: 60%;
}

.containerFinanciamentoCartaoExplicacao h1 {
    font-size: 1.5em;
    text-align: center;
    color: #fff;
    margin: 10px 15px;
}

.containerFinanciamentoCartaoExplicacao h2 {
    font-size: 1.2em;
    text-align: center;
    color: #fff;
    margin: 25px 15px;
}

.containerFinanciamentoCartaoExplicacao p {
    font-size: 1em;
    text-align: justify;
    color: #fff;
    margin: 35px 15px;
    text-indent: 15px;
}

.containerFinanciamentoCartaoExplicacao img {
    display: block;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

.conteudoAdiantamentoValeDescricao {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0px 20px;
}

.conteudoAdiantamentoValeDescricao,
.conteudoNatalDescricao {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0px 20px;
}

.conteudoNatalDescricao {
    flex-wrap: wrap;
}

.conteudoNatalTextoExplicacao {
    width: calc(100% - 600px);
}

.containerCartaoNatal h1 {
    color: #000;
    margin-bottom: 24px;
    width: 100%;
}

.containerCartaoNatal p {
    color: #000;
    padding: 8px 30px;
}

.containerFinancimentoVantagens {
    width: 100%;
    margin: 50px 0px;
}

.conteudoFinancimentoVantagens {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.containerCartaoNatalVantagens {
    background-color: #00434b;
    padding: 20px 0px;
}

.containerFinancimentoVantagensTitulo h3 {
    font-size: 1.2em;
    color: #fff;
    text-align: center;
}

.containerCartaoNatalVantagensTitulo h3 {
    font-size: 1.2em;
    color: #fff;
    text-align: center;
}

.financiamentoCaixaVantagens {
    background-color: #fff;
    border-radius: 15px;
    width: 22%;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 150px;
    box-shadow: 2px 2px 8px;
}

.financiamentoCaixaVantagens img {
    margin: 10px 0px;
    height: 60px;
}

.financiamentoCaixaVantagens p {
    font-size: 1em;
    color: #000;
    margin: 10px 0px;
    text-align: center;
}

.containerFinanciamentoCartaoContato,
.containerFinanciamentoCartaoColaboradores,
.containerFinanciamentoCartaoLayout {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
}

.containerFinanciamentoCartaoLayoutExplicacao,
.containerFinanciamentoCartaoLayoutImagem,
.containerFinanciamentoCartaoColaboradoresExplicacao,
.containerFinanciamentoCartaoColaboradoresImagem {
    width: 50%;
    margin: 50px 10px;
}

.containerFinanciamentoCartaoColaboradoresExplicacao h4,
.containerFinanciamentoCartaoLayoutExplicacao h4 {
    color: #000;
    font-size: 1.3em;
    padding: 15px 10px;
    margin-bottom: 30px;
    font-weight: 900;
}

.containerFinanciamentoCartaoColaboradoresExplicacao h5,
.containerFinanciamentoCartaoLayoutExplicacao h5 {
    color: #000;
    font-size: 1em;
    padding: 15px 10px;
    font-weight: 500;
}

.containerFinanciamentoCartaoColaboradoresExplicacao h5,
.containerFinanciamentoCartaoColaboradoresExplicacao h4 {
    text-align: left;
}

.containerFinanciamentoCartaoLayoutExplicacao h5,
.containerFinanciamentoCartaoLayoutExplicacao h4 {
    text-align: right;
}

.containerFinanciamentoCartaoContatoFormulario h4 {
    font-size: 1.1em;
    text-align: center;
    color: #fff;
    margin: 0px 10px;
    margin-top: 20px;
}

.containerFinanciamentoCartaoContatoFormulario {
    width: 600px;
    display: block;
    margin: auto;
    text-align: center;
    color: #fff;
}

.conteudoFinanciamentoCartaoContatoFormulario {
    width: 45%;
    border: 1px solid #fff;
    border-radius: 30px;
    display: block;
    margin: auto;
}

.formFinanciamentoCartao {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 20px;
}

.formFinanciamentoCartao label {
    color: #fff;
    font-size: 1em;
}

.formFinanciamentoCartao input {
    padding: 5px;
    border-radius: 5px;
    border: none;
    margin-top: 5px;
    margin-bottom: 15px;
    width: 70%;
}

.formFinanciamentoCartao textarea {
    width: 70%;
    height: 103px;
    padding: 5px 10px;
    margin-top: 8px;
    border-radius: 5px;
    border: none;
    margin-bottom: 25px;
}

.containerFinancimentoImagemDestaques {
    width: 600px;
    height: 450px;
    display: block;
    margin: auto;
    border-radius: 15px;
    box-shadow: 2px 1px 5px #000;
}

.ContainerQueroContantratar,
.ContainerQueroContantratarNatal {
    position: fixed;
    top: 60vh;
    top: calc(60vh - 45px);
    right: 0px;
    z-index: 1000;
}

.ContainerQueroContantratar button,
.ContainerQueroContantratarNatal button {
    display: block;
    color: #fff;
    font-size: 1em;
    text-align: center;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    height: 45px;
    border-radius: 50px;
    width: 190px;
    cursor: pointer;
}

.ContainerQueroContantratar button:hover,
.ContainerQueroContantratarNatal button:hover {
    opacity: 0.8;
    transition: 0.4s;
}

.ContainerQueroContantratarNatal button {
    background-color: #00434b;
    border: 1px solid #00434b;
}


.ContainerQueroContantratar a {
    text-decoration: none;
}

#containerFundoNatal {
    padding-top: 40px;
    /* background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/natal_fundo.png');
    background-size: auto;
    background-repeat: no-repeat;
    background-position: left center; */
    background-color: #00434b;
}

.natalFraseDestaque {
    text-transform: uppercase;
    color: #00434b;
}

/* atendimento.php */
#containerAtendimento {
    max-width: 100%;
    margin: auto;
    display: block;
    background-color: #fff;
    padding-top: 20px;
}

#containerAtendimento .titulo {
    color: #000;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 30px;
    width: 100%;
}

#containerAtendimento .telefone {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 32px 0;
}

#containerAtendimento .telefone h2,
#containerAtendimento .email h2 {
    color: #000;
    text-align: center;
    font-size: 16px;
    width: 100%;
}

#containerAtendimento .telefone a {
    width: 45%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: #000;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    min-width: 200px;
    padding: 4px 0px;
    max-width: 400px;
}

#containerAtendimento .telefone a img,
#containerAtendimento .email a img {
    width: 24px;
    height: 24px;
}

#containerAtendimento .email a {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: #000;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
}

.atendimentoContato {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 60px;
    justify-content: center;
    align-items: center;
}

.atendimentoContato div {
    width: fit-content;
}

.atendimentoContato .email {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    color: #000;
}

#containerAtendimento .containerFaleConsoco .conteudoFaleConsoco {
    border: 1px solid #000;
    color: #000;
}

#containerAtendimento .containerFaleConsoco .conteudoFaleConsoco h1 {
    font-size: 20px;
    margin-bottom: 16px;
}

#containerAtendimento .containerFaleConsoco .conteudoFaleConsoco input,
#containerAtendimento .containerFaleConsoco .conteudoFaleConsoco textarea {
    border: 1px solid #000;
}

#containerAtendimento .containerFaleConsoco .conteudoFaleConsoco button {
    background-color: #64908F;
    color: #fff;
}

/* efeito de deslize de tela */
.htmlFinanciamento {
    scroll-behavior: smooth;
}

.htmlFinanciamento:target {
    scroll-margin-top: .8em;
}

.containerSessaoBackground {
    background-color: #fff;
    margin-bottom: 50px;
}

.fundoAdiantamento {
    background: #314e7b;
    height: auto;
    position: absolute;
}

.tituloAtendimento {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
}

.tituloAtendimento img {
    width: 35px;
    margin-left: 15px;
}

.containerImpressaoCodigoWipay {
    width: auto;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#impressao {
    width: 80%;
    margin: auto;
    border: 5px solid #e33530;
    border-radius: 15px;
    background-color: #fff;
    max-width: 700px;
}

.impressaoImagens {
    width: 40%;
}

.impressaoCodigo {
    width: 60%;
}

.impressaoImagens,
.impressaoCodigo {
    margin: 10px 0px;
}

.impressaoImagens img {
    height: 200px;
    display: block;
    margin: auto;
}

.impressaoCodigo input {
    border-radius: 15px;
    border: 5px solid #64908F;
    height: 120px;
    margin-top: 20px;
    text-align: center;
    font-size: 2em;
    width: 80%;
}

.impressaoCodigo input::placeholder {
    font-size: 0.4em;
}

.impressaoCodigo h2 {
    font-size: 1.5em;
    color: #e33530ed;
    font-weight: 900;
}

.btnImprimir {
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    background-color: #dff0e4;
    font-weight: bold;
    cursor: pointer;
    margin: auto;
    margin-top: 35px;
    margin-bottom: 15px;
    width: 150px;
}

.conteudoImpressaoCodigoWipay {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#impressaoFolhaA4 {
    width: 21cm;
    height: 29.7cm;
    background: #fff;
    padding: 20px;
}

.impressao7X10 {
    width: 10cm;
    height: 7cm;
    margin: 10px;
    border: 5px solid #e33530;
    border-radius: 15px;
}

.impressao7X10 img,
.impressao10X15 img {
    height: auto;
}

.impressao7X10 img {
    margin-top: 20px;
}

.impressao10X15 img {
    margin-top: 15px;
}

.impressao7X10 h2 {
    font-size: 1em;
}

.impressaoPrimeiraLinha {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.impressao10X15 {
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 15cm;
    height: 10.3cm;
    border: 5px solid #e33530;
    border-radius: 15px;
}

.impressao10X15 .impressaoImagens {
    margin: 0px;
}

#impressaoFolhaA4 {
    display: none;
}

.impressao10X15 .impressaoCodigo input {
    height: 200px;
    font-size: 3em;
}

.SecaoDownload {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid #ead8d8b3;
}

.secaoPassoVendaAplicativo {
    display: flex;
    flex-direction: row;
    width: 90%;
    padding: 50px;
}

.PassoVendaAplicativoImagem {
    width: 50%;
}

.PassoVendaAplicativoConteudo {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.btnDowload {
    background: #64908F;
    color: #fff;
    text-decoration: none;
    font-size: 1em;
    padding: 8px 20px;
    border-radius: 20px;
    display: flex;
    margin: auto;
    margin-bottom: auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
    cursor: pointer;
    border: 0px;
}

.btnDowload:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.4s;
}

.btnDowload img {
    width: 20px;
    margin-left: 10px;
}

.linkDowload {
    width: fit-content;
    margin: auto;
    height: fit-content;
}

.fundo {
    background-color: #fff;
}

.containerFinancimentoVantagensTitulo h1 {
    text-align: center;
    font-size: 1.5em;
}

.baixarAppCredenciado {
    display: flex;
    justify-content: center;
    align-items: end;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0px;
}

.baixarAppCredenciado a {
    height: fit-content;
    width: fit-content;
    display: block;
}

.baixarAppCredenciado p {
    color: #fff;
    font-size: 0.9em;
    text-align: center;
    margin-bottom: 10px;
}

.contatoTextoExplicativo {
    width: 90% !important;
    font-size: 1.3em !important;
    text-align: center !important;
    color: white !important;
    margin-top: 50px !important;
    padding: 0 !important;
}

.modalErro,
.modalSucesso,
.modalErroSemMargem,
.modalSucessoSemMargem {
    width: 100%;
    position: relative;
    margin: 0 auto;
    transition: 0.5s;
}

.modalErro,
.modalSucesso {
    margin-top: 50px;
}

.modalErro,
.modalErroSemMargem {
    background-color: #ea8b8b;
}

.modalSucesso,
.modalSucessoSemMargem {
    background-color: #a3cfbb;
    padding: 1rem 0;
}

.modalErro button,
.modalSucesso button,
.modalSucessoSemMargem button,
.modalErroSemMargem button {
    background: transparent;
    border: 0px transparent;
    font-size: 1.8em;
    cursor: pointer;
    position: absolute;
    right: 30px;
    margin-top: 4px;
}

.modalSucesso button,
.modalSucessoSemMargem button {
    margin-top: -12px;
}

.mensagemErro {
    background-color: #0a6355;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 15px;
    padding: 15px;
    color: white;
    width: 85%;
}

.mensagemErroCodigo {
    text-align: center;
    font-size: 1.5em;
    padding: 5px;
    font-weight: 800;
}

.mensagemErroDescricao {
    text-align: center;
    font-size: 1em;
    padding: 5px;
    font-weight: 500;
}

.modalSucesso .mensagemErroDescricao,
.modalSucessoSemMargem .mensagemErroDescricao {
    font-size: 1.1em;
    font-weight: 500;
}

.containerExtratoInput {
    margin: 10px 0px;
}

.containerExtratoInput div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.c_radio_label {
    margin-right: 15px;
}

.avisoErro {
    font-size: .8em;
    color: #ea8b8b;
    text-align: center;
    padding: 8px 4px;
}

.divAlterarCartaoAcessado {
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    background-color: #dff0e4;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.divAlterarCartaoAcessado:hover {
    opacity: 0.8;
    transition: 0.4s;
}

.divAlterarCartaoAcessado p {
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    font-size: 0.85em;
    color: #000;
}

.extratoGrupoOpcoes {
    width: 90%;
    display: flex;
    flex-direction: row;
    gap: 60px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 15px;
}

.containerSaldoInformacao {
    display: flex;
}

.statusCarregamento {
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    background-color: #dff0e4;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.statusCarregamento:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.4s;
}

.statusCarregamento p {
    font-weight: bold;
    font-size: .85em;
    text-align: center;
    white-space: nowrap;
    color: #000;
}

.statusCarregamento img {
    width: 16px;
}

.containerVoltar {
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    background-color: #dff0e4;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.guiaComprasGrupoOpcoes div {
    width: fit-content;
}

.containerVoltar:hover {
    opacity: 0.8;
    transition: 0.4s;
}

.containerVoltar p {
    font-weight: bold;
    font-size: .85em;
    text-align: center;
    white-space: nowrap;
    color: #000;
}

.guiaComprasGrupoOpcoes {
    width: 90%;
    display: flex;
    flex-direction: row;
    gap: 60px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 15px;
}

.containerCartao {

    margin-top: 60px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;

}

.containerCartao h1 {

    text-align: center;
}

.conteudoCartao {

    display: flex;
    flex-direction: row;
    padding: 4px 12px;
    gap: 50px;
    align-items: center;
    margin: 10px;
    border-bottom: solid 1px;
    font-size: large;
    justify-content: center;
}

.conteudoCartao button {
    width: 20%;
    border-radius: 20px;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 15px;
    border: none;
    background-color: #dff0e4;
    font-weight: bold;

}

.conteudoCartao button:hover {
    opacity: 0.8;
    transition: 0.4s;
}


.conteudoCartao .conteudoCartao_Razao {
    width: 55%;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.conteudoCartao .conteudoCartao_Cartao {
    width: 20%;
}

.senhaModal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
}

.senhaModal_Conteudo {

    background-color: #FFF;
    margin: 15% auto;
    padding: 20px;
    border-radius: 5px;
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    max-width: 800px;
    box-shadow: 2px 3px 5px 1px #000;
}

.senhaModal_Conteudo p {

    font-size: 1em;
    text-align: center;
    white-space: break-spaces;
    margin: 8px;
}

.senhaModal_Conteudo input {

    margin: 8px;
    float: left;
    margin-left: 10px;
    padding: 5px;
    border-radius: 5px;
    border: solid 1px;

}

.senhaModal_Conteudo button {

    margin-bottom: 15px;
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    background-color: #dff0e4;
    font-weight: bold;
    cursor: pointer;
    margin-top: 35px;
    margin: 8px;
    width: auto;
}

.senhaModal_Conteudo button:hover {
    opacity: 0.8;
    transition: 0.4s;
}

.containerBaseCartao {
    margin-left: 20px;
    margin-right: 20px;
}

.containerCartaoPropaganda {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 98%;
    margin: auto;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.conteudoCartaoPropaganda{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 180px;
}

.conteudoCartaoPropaganda img{
    width: 100%;
    box-shadow: 11px 2px 10px 0px rgba(0,0,0,0.50);
    border-radius: 16px;
}

.conteudoCartaoPropaganda button {
    border-radius: 30px;
    width: 140px;
    cursor: pointer;
    border: 1px solid #3e8e67;
    height: 32px;
    background-color: #3e8e67;
    color: #fff;
    font-size: 1em;
    text-align: center;
    display: block;
    margin: 28px 20px;
}

@media print {
    body {
        background: #fff;
    }

    .btnImprimir {
        display: none;
    }

    .containerImpressaoCodigoWipay {
        margin-top: 0px;
    }

    main {
        display: none;
    }

    #impressaoFolhaA4 {
        display: block;
    }
}