.c-primary{color: var(--primary);}
.c-primary-dark{color: var(--primary-dark);}
.c-secondary{color: var(--secondary);}
.c-secondary-dark{color: var(--secondary-dark);}
.c-preto-escuro{color: var(--preto-escuro);}

.f-principal{
  filter:  var(--cor-svg-principal);
}

.f-secundaria{
  filter:  var(--cor-svg-secundaria);
}

.c-branco{
  color: #FFF;
}

.c-cinza-ferramenta{
  color: #E6E6E6 !important;
}

.c-cinza-escuro-ferramenta{
  color: #1C1A1B !important;
}

html,body{
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: url('../personalizacao/fundo.jpg') !important;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
}
img {
  border: none;
}

*:focus {
  outline: none;
}

a:hover {
  text-decoration: none;
}
a.noUnderline:hover {
  text-decoration: none;
}
a img {
  border: 0px;
}
textarea {
  resize: none;
}

.alpha60 {
  opacity: 0.60;
  -moz-opacity: 0.60;
  filter: alpha(opacity=60);
  -webkit-filter: opacity(0.60);
}
.br-10{
  border-radius: 10px;
}
.noPadding {
  padding: 0;
}

#efeito {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#efeito:hover {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.fundoBranco{
  background: #FFF;
  padding: 15px;
  width: 100%;
  display: table;
}

.fundoImagens{
  width: 100%;
  min-height: 300px;
  overflow: hidden;
  padding-top: 1em;
  padding-bottom: 1em;
  border:2px dashed var(--secondary);
  border-radius: 10px;
}
.caixaTexto{
  width: 100%;
  height: 50px;
  display: table;
  padding: .5em;
  border:2px dashed #C3C3C3;
}
.linhaDivisao{
  width: 100%;
  height: 1px;
  border:1px dashed #C3C3C3;
  margin-top: 1em;
}
.fundoCinza{
  width: 100%;
  background: #F5F5F5;
  border-radius: 10px;
  -webkit-box-shadow: 0px 10px 24px -14px rgba(0,0,0,0.45);
  -moz-box-shadow: 0px 10px 24px -14px rgba(0,0,0,0.45);
  box-shadow: 0px 10px 24px -14px rgba(0,0,0,0.45);
}
.fundoCinzaSemSombra{
  width: 100%;
  background: #F5F5F5;
  border-radius: 10px;
}
.layoutGrid{
  float: left;
  padding: 8px;
  background: #FFF;
  margin: 8px 12px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 10px;
}
.layoutGrid:hover{
 -webkit-box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.55);
 -moz-box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.55);
 box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.55);
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}
.passo{
  width: 100%;
  float: left;
  height: auto;
}
.passoConcluido, .passoConcluido a{
  color: var(--success) !important;
}
.passoAtivo, .passoAtivo a{
  color: var(--cor-principal-claro) !important;
}
.passoInativo, .passoInativo a{
  color: var(--gray) !important;
}
spam{
  float: left;
}
.labelPasso{
  font-size: 16px;
  font-weight: bold;
  float: left;
  height: 40px;
  line-height: 43px;
  margin-left: 7px;
}
.fundoMarca{
  background: #FFF;
  padding: 4px 0;
  width: 100%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.fundoMarca:hover{
  -webkit-box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.55);
  -moz-box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.55);
  box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.55);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.smallPadding {
  padding-right: 6px;
  padding-left: 0px;
}
.central {
  width: auto;
  float: none;
  margin: 0 auto;
  display: table;
}
.modeloTitulo{
  color: #232623;
  margin: 8px 4px;
  padding: 10px 4px;
  text-align: center;
  background: #FFF;
  width: 95px;
  display: inline-table;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}
.modeloTitulo:hover{
  -webkit-box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.55);
  -moz-box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.55);
  box-shadow: 0px 5px 20px -8px rgba(0,0,0,0.55);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.listaModelos{
  width: 100%;
  height: 80px;
  background: #FFF;
  display: table;
  margin-bottom: 30px;
}
.textoDestaque{
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--cor-secundaria);
}
.corClienteFerramenta{
  color: var(--cor-secundaria);
}
.textoSubdestaque{
  font-size: .95em;
  font-weight: 700;
 color: var(--cor-secundaria);
}

.imagemOpcao{
  background: #FFF;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  height: 96px;
  cursor: pointer;
}
.imagemOpcao:hover{
 background: #eee;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

.noneHoverDiv{
  padding: 0;
  overflow: hidden;
}
.noneHoverDiv:hover{
  background: #FFF;
}

#cp-device-ori{
  width: var(--proporcao-x);
  height: var(--proporcao-y);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--proporcao-x) var(--proporcao-y);
}
#cp-mask-img{
  width: var(--proporcao-x);
  height: var(--proporcao-y);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--proporcao-x) var(--proporcao-y);
}
.cp-btn-action{
  display: table;
  width: 100%;
}
#cp-sel-Device .container-fluid{
 padding-left: 0;
 padding-right: 0; 
}
#cp-price{
  font-size: 20px;
}
.bt-comprar {
  -moz-box-shadow: 0px 1px 0px 0px #fff6af;
  -webkit-box-shadow: 0px 1px 0px 0px #fff6af;
  box-shadow: 0px 1px 0px 0px #fff6af;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
  background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
  background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
  background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
  background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
  background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
  background-color:#ffec64;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #ffaa22;
  display:inline-block;
  cursor:pointer;
  color:#333333;
  font-size:20px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700 !important;
  padding: 8px 10px;
  text-decoration:none;
  line-height: 25px;
  text-align: center;
}
.bt-comprar:hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
  background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
  background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
  background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
  background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
  background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
  background-color:#ffab23;
}
.bt-comprar:active {
  position:relative;
  top:1px;
}

/* Listagem das imagens */
#cp-sel-Photos {
  width: 98%;
  height: 360px;
  overflow-y: auto;
}
#cp-sel-Photos ul {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin-top: 8px;
}
#cp-sel-Photos ul li{
  flex: auto;
  width: 24%;
  margin:.5%;
  height: auto;
  display: table;
  border-radius: 10px;
}
#cp-sel-Photos ul li a img{
  width: 100%;
  height: auto;
  border-radius: 10px;
}
#cp-sel-Photos li a {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
}
#cp-sel-Photos li a .imagemHoverFundo{
  width: 100%;
  height: 100%;
  font-size: 2.8rem;
  border-radius: 10px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#cp-sel-Photos li a i {
  width: 100%;
  text-align: center;
  font-size: 2.8rem;
  position: absolute;
  left: 0;
  top: calc(50% - 14px);
  z-index: 3;
  color: transparent;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#cp-sel-Photos li a:hover .imagemHoverFundo {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#cp-sel-Photos li a:hover i {
  color: #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/* FIM Listagem das imagens */

#cp-crop-image .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
a.aPreto{
  color: #000;
}
a.aPreto:hover{
  color: #000;
  text-decoration: underline;
}
.selectMaterial{
  margin-top: 10px;
  width: 100%;
  display: table;
  padding: 10px;
  background: #fff;
  color: #000;
  border-radius: 10px;
  border:none;
}

/* CENTRALIZAR VERTICAL MODAL

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

*/

/* Personalização Modals */

.modal-header{
  background: var(--cor-secundaria-escuro);
}
h4.modal-title{
  color: #FFF;
  font-size: 2.4rem;
}
#custom-search-input{
  border-radius: 10px;
  background-color: #fff;
  -webkit-box-shadow: 0px 7px 17px -11px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 7px 17px -11px rgba(0,0,0,0.75);
  box-shadow: 0px 7px 17px -11px rgba(0,0,0,0.75);
}

#custom-search-input input{
  border: 0;
  box-shadow: none;
  border-radius: 10px;
}

#custom-search-input button{
  background: none;
  box-shadow: none;
  border: 0;
  color: #1C1A1B;
}

#custom-search-input button:hover{
  border: 0;
  box-shadow: none;
}

.modalLimitado{
  height: 83vh;
  overflow-y: scroll;
  background:#f4f2f2;
}

/* FIM Personalização Modals */
.galeriaCompleta{
  background:#FFF;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.galeriaCompleta:hover{
  -webkit-box-shadow: 0px 13px 30px -12px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 13px 30px -12px rgba(0,0,0,0.75);
  box-shadow: 0px 13px 30px -12px rgba(0,0,0,0.75);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
h2.hGaleria{
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--cor-secundaria);
}
.ajudaImagens{
  background: #FFCC00;
  color: #000;
  position: absolute;
  font-size: 1.35rem;
  right: 0;
  margin-right: 5px;
  margin-top: -24px;
  display: none;
  border-radius:10px;
  padding: 2px 8px;
}
.ajudaImagensBackground{
  color: #000;
  font-size: 1em;
}
.ajudaImagens:hover{
  background: #ecbe07;
}
.multiUpload{
  height: 80px;
  display: table;
  width: 100% !important;
  min-width: 100% !important;
}

.passoPasso{
  background: var(--cor-principal);
  color: #FFF;
  font-size: .85em;
  border-radius: 4px;
  text-align: center;
  padding: 2px 7px;
}
.textoMaior{
  font-size: 1.25em !important;
}
.textoMaiorPrezo{
  font-size: 1.65em !important;
}
.textoParcelado{
  color: var(--cor-principal-escuro); !important;
  font-size: 1em;
}
.textoVermelho{
  color: #FF0000;
}
.negrito{
  font-weight: 700;
}
.maxLogo2{
  width: 180px;
}
.iconeMaiorLeft{
  font-size: 2em;
  margin-right: 8px;
}
.dLeft{
  float: left;
}
.maxMarca{
  max-height: 80px;
}
.maxH50{
  max-height: 50px;
}
.riscado{
  text-decoration: line-through;
}
.input-group .btn {
  background: transparent;
}
span.buttonText{
  font-size: 1.6rem;
  font-weight: 700;
}
.form-ferramenta{
  background: #FFF;
  color: #1C1A1B;
}