/*
*
*
Estrutura HTML que o modal deve conter, o que defini o tamanho dos modais são as classes modal-small, modal-medium, modal-big; conforme ex: abaixo; 
<div id="modal-cnpj" class="modal-padrao modal-small">
	<div class="container-modal">
		<a href="#" class="fechar">x</a>
		<h1>Titulo do modal</h1>
		<div class="conteudo"></div>
	</div>
	<div class="mascara"></div>
</div>
*
*
*
*/
/*Estilizando modais*******************************/
.modal-padrao {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999999;
    /*z-index: 99999;*/
    width: 100%;
    height: 100%;
    display: none;
}

.mascara {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.85;
    z-index: 1;
}

.mascara-disabled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
}

.fechar {
    font-size: 24px;
    color: #000;
    font-weight: bold;
    position: absolute;
    top: -7px;
    right: 0px;
    width: 35px;
    height: 35px;
    border-radius: 20px;
    text-align: center;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    box-shadow: 0px 0px 10px #333;
    z-index: 30;
}

.modal-padrao .fechar:hover,
.fechar:visited,
.fechar:active {
    text-decoration: none;
}

.modal-padrao .conteudo {
    margin-top: 40px;
}

@media(min-width: 0) {
    .modal-padrao h1 {
        margin: 0;
        font-size: 18px;
        font-weight: bold;
        color: #444;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 8px 10px;
        margin-bottom: 10px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
        background: #ffffff;
        /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
        /* IE6-9 */
        z-index: 20;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
    }
}

@media(min-width: 1024px) {
    .modal-padrao h1 {
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
    }
}

/*Posicionamento dos modais*****************/
@media(min-width: 0) {
    .modal-padrao .container-modal {
        position: absolute;
        top: 8px;
        left: 3px;
        width: 98%;
        background: #fff;
        z-index: 20;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0px 0px 20px #333;
    }
}

@media(min-width: 1024px) {
    .modal-padrao .container-modal {
        border-radius: 10px;
    }
}

/*modais pequeno*/
@media(min-width: 1024px) {
    .modal-small .container-modal {
        width: 600px;
        top: 10%;
        left: 50%;
        margin-left: -300px;
    }
}

/*Modais médio*/
@media(min-width: 1024px) {
    .modal-medium .container-modal {
        width: 800px;
        top: 10%;
        left: 50%;
        margin-left: -400px;
    }
}

@media(min-width: 1200px) {
    .modal-medium .container-modal {
        width: 900px;
        top: 10%;
        left: 50%;
        margin-left: -450px;
    }
}

/*Modais grande*/
@media(min-width: 1024px) {
    .modal-big .container-modal {
        top: 10%;
        left: 50%;
        width: 80%;
        margin-left: -40%;
    }
}

/*Alerts*************************/
.alert-msg {
    position: fixed;
    width: 40%;
    margin-left: -25%;
    top: 0px;
    left: 50%;
    width: 50%;
    z-index: 99999;
    display: none;
}

.alert-msg .cont-alert {
    width: 100%;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    min-height: 100px;
    background: #fff;
    box-shadow: 0px 0px 40px #333;
    border-bottom: 1px solid #ccc;
    border-top: 0;
}

.alert-msg .fechar {
    position: absolute;
    top: 3px;
    right: 5px;
    font-weight: bold;
    font-size: 24px;
    text-decoration: none;
    color: #000;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    width: 35px;
    border-radius: 20px;
    border: 1px solid #ccc;
    text-align: center;
}

.alert-msg p {
    display: table;
    color: #000;
    padding: 30px;
}

/*Pergunta**************************/
.pergunta {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.pergunta .cont-pergunta {
    position: fixed;
    width: 40%;
    margin-left: -25%;
    top: 0px;
    left: 50%;
    width: 50%;
    z-index: 99999;
    display: block;
    background: #fff;
    box-shadow: 0px 0px 40px #333;
    border-bottom: 1px solid #ccc;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    min-height: 100px;
    background: #fff;
    border-top: 0;
}

.pergunta .fechar {
    position: absolute;
    top: 3px;
    right: 5px;
    font-weight: bold;
    font-size: 24px;
    text-decoration: none;
    color: #000;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    width: 35px;
    border-radius: 20px;
    border: 1px solid #ccc;
    text-align: center;
}

.pergunta p {
    display: table;
    color: #000;
    padding: 50px 30px 0px 30px;
    font-size: 18px;
}

.pergunta ul {
    width: 250px;
    margin: auto;
    padding: 0px 0 20px 0;
}

.pergunta ul li {
    display: inline-table;
    margin: 10px;
    text-align: center;
}

.pergunta ul a {
    padding: 10px 30px;
    font-size: 18px;
    display: table;
    color: #fff;
}

.pergunta a.sim {
    background: #00731B;
}

.pergunta a.nao {
    background: #C80000;
}

/*Carregando************************/
.carregando {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    text-align: center;
    color: #fff;
    z-index: 9999999999;
}

/*.cont-distribuidora .carregando{
	display: block!important;
}*/
@media(min-width: 0) {
    .carregando .conteudo {
        position: absolute;
        top: 20%;
        left: 50%;
        margin-left: -40%;
        width: 80%;
        height: auto;
        display: table;
        z-index: 200;
    }
}

@media(min-width: 768px) {
    .carregando .conteudo {
        width: 50%;
        margin-left: -25%;
    }
}

.carregando p {
    color: #D7D7D7;
}

.carregando h2 {
    display: table;
    padding-top: 70px;
    width: 100%;
    margin: 0;
    background: url('../img/carregando.gif') top center no-repeat;
    background-size: 64px;
    color: #D7D7D7;
}

/***********************/
.modal-promocao .container {
    width: 50%;
    height: 500px;
    position: fixed;
    top: 10%;
    left: 50%;
    margin-left: -25%;
    z-index: 100;
}

.modal-promocao .mascara {
    background: url('../img/banners/fdo_promo_ache.png');
    background-size: 100%;
    opacity: 1;
}

.modal-promocao .produto {
    position: relative;
}

.modal-promocao .texto {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.modal-promocao .produto a {
    border: 2px solid yellow;
    display: block;
    width: 100%;
    height: 100%;
}

/*********************/
.modal-padrao h3 {
    background: #003775;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 10px 0px;
    font-weight: bold;
    width: 100%;
    margin: 10px 0;
}

/*carregaLoja************************/
.carregaLoja {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    z-index: 9999999;
    display: none;
}

@media(min-width: 0) {
    .carregaLoja .conteudo {
        position: absolute;
        top: 20%;
        left: 50%;
        margin-left: -40%;
        width: 80%;
        height: auto;
        display: table;
        z-index: 200;
    }
}

@media(min-width: 768px) {
    .carregaLoja .conteudo {
        width: 50%;
        margin-left: -25%;
    }
}

.carregaLoja p {
    color: #D7D7D7;
}

.carregaLoja h2 {
    display: table;
    padding-top: 70px;
    width: 100%;
    margin: 0;
    background: url('../img/carregando.gif') top center no-repeat;
    background-size: 64px;
    color: #D7D7D7;
}


/*********************/
/*#modal-cotacao .conteudo{
    margin-top:60px;
    border:1px solid #000
}*/

/*#modal-cotacao {
	position:absolute;
}*/

#modal-cotacao .container-modal {
    top: 5%;
}

/*#modal-cotacao .conteudo{
    overflow:auto;
}*/

#modal-cotacao .outros-cnpjs {
    display: table;
    margin-top: 15px;
}

#modal-cotacao .outros-cnpjs label {
    display: inline-table;
}

#modal-cotacao .outros-cnpjs input {
    border: 1px solid #000;
    width: auto;
    display: inline-table;
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

#modal-cotacao input {
    width: 100%;
    padding: 5px 0;
}

#modal-cotacao li {
    margin-bottom: 10px;
}

#modal-cotacao .btn {
    width: 100%;
}

#modal-cotacao ul label {
    width: 100%;
}

#modal-cotacao ul input {
    width: auto;
    border: 1px solid #000;
}

#modal-cotacao ul span {
    padding-left: 5px;
}

#modal-cotacao #numero-cotacao input {
    width: 100%;
}

#modal-cotacao .ico {
    padding: 5px 5px 5px 30px;
}

#modal-cotacao .ico-whatsapp {
    background: url('../img/icones/whatsapp.svg') 5px 2px no-repeat;
}

#modal-cotacao .ico-sms {
    background: url('../img/icones/email.svg') 5px 3px no-repeat;
}

#modal-cotacao .ico-email {
    background: url('../img/icones/email.svg') 5px 3px no-repeat;
}

#modal-cotacao .btn-copiar {
    display: inline-table;
    background: url('../img/icones/copy.svg') no-repeat #42A86B 7px 7px;
    padding: 5px 10px 5px 30px;
    color: #fff;
    border-radius: 3px;
}

#modal-cotacao #link-cotacao {
    border: 0;
    background: none;
    width: 100%;
}

#modal-cotacao .link-copiar {
    display: none;
}

#modal-cotacao h4 {
    color: #000
}

#modal-cotacao #cnpj-cotacao {
    padding: 5px;
    display: table;
}

@media(min-width: 0) {
    .select2-container {
        box-sizing: border-box;
        display: inline-block;
        margin: 0;
        position: relative;
        vertical-align: middle;
        z-index: 99;
        width: 320px !important;
    }
}

@media(min-width: 768px) {
    .select2-container {
        width: 760px !important;
    }
}

@media(min-width: 990px) {
    .select2-container {
        width: 560px !important;
    }
}

.select2-hidden-accessible {
    position: relative;
    z-index: 99999999999999999999 !important
}

/*#login-select{
    position:relative;
    z-index: 99999
}*/

.deleted-item {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.deleted-item+.deleted-item {
    margin-top: 16px;
}

.deleted-item .deleted-name {
    flex: 1;
    font-weight: bold;
    margin: 0;
}

/* modal de confirmar telefone */

.double-step .container-modal {
    max-width: 380px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0;
    max-height: 90vh;
    overflow-y: auto;
}

.double-step .container-modal h2 {
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #000;
    letter-spacing: .25px;
    line-height: 1.5;
}

.double-step .container-modal img {
    width: 56px;
    height: 56px;
    background-color: #ddd;
    border-radius: 100px;
    padding: 6px;
    box-shadow: 0px 4px 3px rgb(0 0 0 / 24%);
}

.double-step .container-modal h2 small {
    font-size: 18px;
}

.double-step .change-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.double-step .change-area p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .25px;
}

.double-step .change-area .phone,
.double-step .change-area .token,
.double-step .change-area .password,
.double-step .change-area .repeat-password {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
}

.double-step .change-area .password,
.double-step .change-area .repeat-password {
    align-items: flex-start;
}

.double-step .change-area .phone {
    margin-bottom: 16px;
}

.double-step .change-area input,
.double-step .change-area button {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #aaa;
}

.double-step .change-area .phone button,
.double-step .change-area .token button {
    background-color: #56CDDC;
    color: #fff;
    cursor: pointer;
    border: 0;
    padding: 8px;
    letter-spacing: .5px;
    font-weight: 400;
    border-radius: 8px;
}

.double-step .change-area .phone button {
    background-color: #00731b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.double-step .change-area .phone button:after {
    content: '';
    width: 24px;
    height: 24px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.36556 10.6821C10.302 12.3288 11.6712 13.698 13.3179 14.6344L14.2024 13.3961C14.4965 12.9845 15.0516 12.8573 15.4956 13.0998C16.9024 13.8683 18.4571 14.3353 20.0789 14.4637C20.599 14.5049 21 14.9389 21 15.4606V19.9234C21 20.4361 20.6122 20.8657 20.1022 20.9181C19.5723 20.9726 19.0377 21 18.5 21C9.93959 21 3 14.0604 3 5.5C3 4.96227 3.02742 4.42771 3.08189 3.89776C3.1343 3.38775 3.56394 3 4.07665 3H8.53942C9.0611 3 9.49513 3.40104 9.5363 3.92109C9.66467 5.54288 10.1317 7.09764 10.9002 8.50444C11.1427 8.9484 11.0155 9.50354 10.6039 9.79757L9.36556 10.6821ZM6.84425 10.0252L8.7442 8.66809C8.20547 7.50514 7.83628 6.27183 7.64727 5H5.00907C5.00303 5.16632 5 5.333 5 5.5C5 12.9558 11.0442 19 18.5 19C18.667 19 18.8337 18.997 19 18.9909V16.3527C17.7282 16.1637 16.4949 15.7945 15.3319 15.2558L13.9748 17.1558C13.4258 16.9425 12.8956 16.6915 12.3874 16.4061L12.3293 16.373C10.3697 15.2587 8.74134 13.6303 7.627 11.6707L7.59394 11.6126C7.30849 11.1044 7.05754 10.5742 6.84425 10.0252Z' fill='rgba(255,255,255,1)'%3E%3C/path%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;

}

.double-step .change-area .phone button:hover,
.double-step .change-area .token button:hover {
    background-color: #039cb0;
}

.double-step .change-area .phone button:hover {
    background-color: #0aa02d;
}

.double-step .change-area .token .resend {
    color: #56CDDC;
    text-decoration: underline;
    cursor: pointer;
    border: 0;
    padding: 4px;
    letter-spacing: .5px;
    font-weight: 400;
}

.change-area .eye {
    position: absolute;
    height: 42px;
    width: 42px;
    bottom: 0;
    right: 0;
    background-image: url(../img/icones/eye-close.svg);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: right 16px center;
    opacity: .6;
    cursor: pointer;
}

.change-area .eye.open {
    background-image: url(../img/icones/eye-open.svg);
    opacity: 1;
}