/*
*
*
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;
*
*
*
*/
/*Estilizando modais*******************************/
.modal-padrao {
position: fixed;
top: 0;
left: 0;
z-index: 999999999;
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: -5px;
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 20px 60px 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: 20%;
left: 50%;
margin-left: -300px;
}
}
/*Modais médio*/
@media(min-width: 1024px){
.modal-medium .container-modal{
width: 800px;
top: 20%;
left: 50%;
margin-left: -400px;
}
}
@media(min-width: 1200px){
.modal-medium .container-modal{
width: 900px;
/*top: 0;*/
left: 50%;
margin-left: -450px;
}
}
/*Modais grande*/
@media(min-width: 1024px){
.modal-big .container-modal{
top: 20%;
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: 999999999;
}
/*.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;
}
/*********************/
/*#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: 20px;
height: 15px;
}
#modal-cotacao .row div {
padding: 0;
margin: 0;
}
#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;
width: 100%;
position: relative;
}
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle;
z-index: 999999999;
width: 100% !important;
}
.select2-hidden-accessible {
position: relative;
z-index: 99999999999999999999 !important
}
/*#importar-pedido-modal{
position:absolute;
}*/
#importar-pedido-modal h1 {
color: #444;
padding-left: 25px;
}
/*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;
}