@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    outline-width: 0;
    font-family: "Open Sans", Arial, Verdana;
    font-size: .78em;
    font-style: normal;
    color: #000;
}
.alinhaPagina {clear:both;max-width:1200px;margin:auto;position:relative;}
.divSeparador {clear:both;float:left;width:100%;padding:10px 0;position:relative;}
.divSeparador div {clear:both;float:left;width:100%;background-color:#ccc;height:1px;}
.clear, .row {
    clear: both;
    float: left;
    width: 100%;
    position: relative;
}
.circle {
  border-radius:50%;
}

.margin-0 {
  margin:0;
}

/* -------------------------------- */
ul {list-style-type:none;margin:0;padding:0;}

a, .text-link, .link
{
    color:#000;text-decoration:none;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
}
a:hover, .mouse-over:hover, .text-link:hover
{
    color:#000;
    cursor:pointer;
   -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
}

.text-link:hover,
.link:hover {
	text-decoration:underline;
	cursor:pointer;
}

.cursor-hover-default:hover {cursor:default;}
.cursor-hover-pointer:hover {cursor:pointer;}
.cursor-hover-context-menu:hover {cursor:context-menu;}
.cursor-hover-help:help {cursor:help;}
.cursor-hover-all-scroll:hover {cursor:all-scroll;}

.fb {font-weight:bold!important;}
.fn {font-weight:normal!important;}
.f8 {font-size:.6em!important;}
.f9 {font-size:.7em!important;}
.f10 {font-size:.8em!important;}
.f11 {font-size:.85em!important;}
.f12 {font-size:.9em!important;}
.f14 {font-size:.95em!important;}
.f16 {font-size:1em!important;}
.f18 {font-size:1.1em!important;}
.f20 {font-size:1.2em!important;}
.f22 {font-size:1.3em!important;}
.f24 {font-size:1.4em!important;}
.f26 {font-size:1.5em!important;}
.f28 {font-size:1.6em!important;}
.f30 {font-size:1.7em!important;}
.fi {font-style:italic!important;}

.opacity-00 {opacity:0.0;}
.opacity-01 {opacity:0.1;}
.opacity-02 {opacity:0.2;}
.opacity-03 {opacity:0.3;}
.opacity-04 {opacity:0.4;}
.opacity-05 {opacity:0.5;}
.opacity-06 {opacity:0.6;}
.opacity-07 {opacity:0.7;}
.opacity-08 {opacity:0.8;}
.opacity-09 {opacity:0.9;}
.opacity-10 {opacity:1.0;}


.fldRO {background:url('../images/bgTrans60.png') #666;color:#999;}
.fldReq {color:#FF0000;font-weight:bold;}
.fldOpt {color:#000080;font-weight:bold;}
.fldAlt {color:#ff6600;font-weight:bold;}

.btn, .btn-2, .btnG, .btnR, .btnB, .btnO, .btn-emp, .btn-usu, .btn-disabled, .btn-b2c,
.btn-arrow, .btn-trans, .btn-disabled
{
    display:inline-block;
    padding:5px 15px!important;
    background-image:url('../images/bgTrans10.png');
    border:0;
    outline-width:0;
    text-align:center;
    margin:5px;
    color:#fff!important;
    vertical-align:middle;
    text-decoration:none!important;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    border-radius:3px;
}

.btn {background-color:transparent;}
.btn-2 {background-color:#999!important;}
.btnG {background-color:#55B542!important;}
.btnR {background-color:#FF0000!important;}
.btnB {background-color:#006AB0!important;}
.btnO {background-color:#ff6600!important;}
.btnW {background-color:#fff!important;color:#000!important;}
.btn-gray {background-color:#666!important;}
.btn-emp {background-color:#000!important;}
.btn-usu {background-color:#777!important;}
.btn-por {background-color:#000!important;}
.btn-cor-p {background-color:#000!important;}
.btn-cor-s {background-color:#666!important;}
.btn-disabled {background-color: #eaeaea !important;color: #999 !important;}
.btn-b2c {background-color:#7EBF00!important;}
.btn-b2c img {height:20px;vertical-align:middle;margin-right:10px;}
.btn-help {
  display:inline-block;
  background:url('../images/icHelp.png') no-repeat center;
  background-size:100%;
  width:25px;
  height:25px;
  padding:0;
  vertical-align:middle;
}
.btn-disabled {background-color:#eaeaea;color:#ccc;border-color: #ccc;}
.btn-help:hover {cursor:pointer;opacity:.8;}
.btn:hover, .btn-2:hover, .btnG:hover, .btnR:hover, .btnB:hover, .btnO:hover,
.btn-emp:hover, .btn-usu:hover, .btn-b2c:hover,
.btn-arrow:hover, .btn-trans:hover, .btn-img-text-side-comprar:hover,
.btn:hover
{
    cursor:pointer;
    color:#fff;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    filter: brightness(1.1);
    border:0;
}

.btn-trans {
  background-color:transparent;
  border:1px solid #ccc;
  color:#000!important;
}

.btn-trans:hover {
   background-color:#fff;
}
.btn-disabled:hover {cursor:not-allowed;}

.btn-arrow {
  padding:0 0 0 15px;
  position:relative;
}

.btn-arrow span {
    display:inline-block;
    margin-left:15px;
    -ms-transform: rotate(90deg); /* IE 9 */
    transform: rotate(90deg);
    text-align:center;
    font-weight:bold;
  }

.cGreen {color:#55B542!important;}
.cRed {color:#FF0000!important;}
.cBlue {color:#1D418B!important;}
.cBlack {color:#000!important;}
.cGray {color:#333!important;}
.cLGray {color:#ccc!important;}
.cWhite {color:#fff!important;}
.cOrange {color:#FF6600!important;}
.cYellow {color:#FFFF00!important;}
.cLGray {color:#999!important;}

.bgGreen {background-color:#55B542!important;}
.bgRed {background-color:#FF0000!important;}
.bgBlue {background-color:#1D418B!important;}
.bgBlack {background-color:#000!important;}
.bgGray {background-color:#333!important;}
.bgLGray {background-color:#ccc!important;}
.bgWhite {background-color:#fff!important;}
.bgOrange {background-color:#FF6600!important;}
.bgYellow {background-color:#FFFF00!important;}
.bgLGray {background-color:#999!important;}
.bgLLGray {background-color:#eaeaea!important;}

.tL {text-align:left!important;}
.tR {text-align:right!important;}
.tC {text-align:center!important;}
.tU {text-decoration:underline;}

.cb {clear:both;}
.fL {float:left;}
.fR {float:right;}

.nova-linha {
  grid-column: 1 / -1;
}

.tLC {text-transform:lowercase;}
.tUC {text-transform:uppercase;}

.vAT {vertical-align:top;}
.vAB {vertical-align:bottom;}
.vAM {vertical-align:middle;}

.none {display:none;}
.show {display:block;}
.no-hand:hover {cursor:default!important;}

.padding-top-0 {padding-top:0;}
.padding-right-0 {padding-right:0;}
.padding-bottom-0 {padding-bottom:0;}
.padding-left-0 {padding-left:0;}
.padding-all-0 {padding:0;}

.margin-top-0 {margin-top:0;}
.margin-right-0 {margin-right:0;}
.margin-bottom-0 {margin-bottom:0;}
.margin-left-0 {margin-left:0;}
.margin-all-0 {margin:0!important;}

.btnEnvieSuaNoticia {
    font-weight:bold;
}
.btnEnvieSuaNoticia img {border:0;vertical-align:middle;margin-right:5px;}
.ic-env-sua-noticia:hover {cursor:pointer;}

.rbActIna {clear:both;line-height:18px;}
.rbActIna label {margin:0 15px 0 5px;}
.act, .ina  {display:inline-block;min-height:18px;min-width:18px;vertical-align:middle;}
.act {background:url('../images/icOk.png') no-repeat center;}
.ina {background:url('../images/icNotOk.png') no-repeat center;}

/* ----------------- */
input[type="text"], input[type="password"], textarea, select, input[type="number"] {
    padding: 6px 1%;
    min-width: 40px;
    min-height: 20px;
    max-width: 98%;
    border: 0;
    outline: none;
}

select {
  padding: 7px 1%;
}

.input-group {
  position: relative;
  margin-top: 30px;
}
/*
.input-group input[type="text"],
.input-group input[type="password"],
.input-group textarea,
.input-group select {
  border-bottom: 0;
}*/

.input-group .input-group-label {
  color: #999;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 6px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.input-group input:focus ~ .input-group-label,
.input-group input:valid ~ .input-group-label,
.input-group textarea:focus ~ .input-group-label,
.input-group textarea:valid ~ .input-group-label,
.input-group-select .input-group-label {
  top: -20px;
  font-size: 12px;
  color: #000;
  font-weight: bold;
}

.mskPreco,
.mskQuantidade,
.mskPeso,
.mskPercentual {width:80px!important;text-align:right;}
.mskData {width:80px!important;}
.mskHora {width:50px!important;}
.mskCEP {width:80px!important;}
.mskPercentual {width:40px!important;}

/* ----------------- */
#ajxLoader
{
  display:none;
  width:350px;
  height:80px;
  padding:12px 0;
  text-align:center;
  position:fixed;
  top:50%;
  left:50%;
  margin:-80px -175px 80px -175px;
  border-radius:4px;
  z-index:9999999;
  background-color:#fff;
  border:2px solid #666;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
#ajxLoader .text {
  font-weight:bold;
  font-siz':1.5em;
}
#ajxLoader .loader
{
  display:inline-block;
  width:50px;
  height:50px;
  background:url('../images/ajx-giphy.gif') no-repeat center;
  background-size:100%;
}

.ajx img {vertical-align:middle;}

.email {text-transform:lowercase;}
/* ----------------------------- */
.lnkImageCode {display:inline-block;}
.lnkImageCode:hover {cursor:pointer;}
/* ----------------------------- */
.VerCode {display:none;}
/* ----------------------------- */
.indicator {padding:0 5px;}
/* ----------------------------- */
.txtSecaoDefaultId {display:none;width:0;}

.charCounterLimit {
  display: block;
  font-size:11px;
}

.charCounterLimit label {
  display: inline-block;
  padding: 0 5px;
  font-weight: bold;
  color: #ff0000;
}

.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.arrow-up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.arrow-right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrow-left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.arrow-up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* -------------- */

.slider {
    width: 90%;
    margin: 0 auto;
}

.slick-prev:before,
.slick-next:before {
    border:1px solid #ccc;
    color:#000;
    font-size:16px;
    font-weight:bold;
    padding:20px 5px;
    border-radius:2px;
}

.slick-slide {
    margin: 0 5px;
}

.slick-slide img {
    height: 60px;
}

.slick-slide a {
  display:inline-block;
}

.slick-slide {
    margin: 0 5px;
}

.slick-prev:hover,
.slick-next:hover {
    cursor:pointer;
}


.pro-digital {
    margin: 3px 0;
    display: inline-block;
    padding: 3px 10px;
    background-color: #ff0000;
    color: #fff;
    font-size: .8em;
    text-decoration: none;
}

.ajx-loading {text-align:center;}
.ajx-loading img {height:50px;margin-right:10px;vertical-align:middle;}

.hover-transition
{
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
.hover-transition:hover
{
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
.hover-transition-img img
{
    -webkit-transition: 0.3s ease-out;-moz-transition: 0.3s ease-out;-o-transition: 0.3s ease-out;transition: 0.3s ease-out;
}
.hover-transition-img:hover img
{
    -webkit-transition: 0.3s ease-out;-moz-transition: 0.3s ease-out;-o-transition: 0.3s ease-out;transition: 0.3s ease-out;
    -webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform:scale(1.1);
}


/*================================*/
/* The switch - the box around the slider */
/* Checkbox "deslizante" */
.cb-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 24px;
  vertical-align:middle;
}

/* Hide default HTML checkbox */
.cb-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.cb-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  margin-right:10px;
}

.cb-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .cb-slider {
  background-color: #2196F3;
}

input:focus + .cb-slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .cb-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.cb-slider.round {
  border-radius: 34px;
}

.cb-slider.round:before {
  border-radius: 50%;
}
.cb-slider.disabled {
    background-color: #ccc!important;
}

.no-desktop {display:none;}

/* The container */
.container-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-width:100%;
  white-space: wrap;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius:2px;
  background-color: #bbb;
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover {
  backgroud-color:#fff;
}
.container-checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
  background-color: #55B542;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* Estilos gerais para o dropdown */

.custom-dropdown {
  position: relative;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size:.9em;
}

.dropdown-selected {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color:#f5f5f5;
}

.color-box {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius:2px;
}

.color-box-selecione {
  border:1px solid #ccc;
}

.dropdown-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 5px;
}

.option {
  display: flex; /* Garante que o texto e o quadrado fiquem alinhados na mesma linha */
  align-items: center; /* Alinha verticalmente o conteúdo */
  padding: 10px;
  cursor: pointer;
}

.option:hover {
  background-color: #f0f0f0;
}

.custom-dropdown.open .dropdown-options {
  display: block;
}

/*====================*/

/* Estilo para o quadro de cores */
.color-picker {
  display: flex;
  gap: 10px;
}

.color-picker .color-option {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid #ccc; /* Borda dos quadrados de cor */
}

.color-picker .selected-color {
  margin-top: 20px;
}

.color-picker .selected-color .color-box {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 2px solid #ccc; /* Borda do quadrado de cor selecionada */
}

.color-picker .selected-color span {
  margin-left: 10px;
  font-size: 16px;
}


[class^="bg-trans-"] {
  position: relative;
  z-index: 0;
}

[class^="bg-trans-"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(255, 255, 255, 0); /* será sobrescrito */
  z-index: -1;
  pointer-events: none;
  border-radius: inherit; /* opcional */
}

/* Transparências de 10% a 100% */
.bg-trans-10::before { background-color: rgba(255, 255, 255, 0.1); }
.bg-trans-20::before { background-color: rgba(255, 255, 255, 0.2); }
.bg-trans-30::before { background-color: rgba(255, 255, 255, 0.3); }
.bg-trans-40::before { background-color: rgba(255, 255, 255, 0.4); }
.bg-trans-50::before { background-color: rgba(255, 255, 255, 0.5); }
.bg-trans-60::before { background-color: rgba(255, 255, 255, 0.6); }
.bg-trans-70::before { background-color: rgba(255, 255, 255, 0.7); }
.bg-trans-80::before { background-color: rgba(255, 255, 255, 0.8); }
.bg-trans-90::before { background-color: rgba(255, 255, 255, 0.9); }
.bg-trans-100::before { background-color: rgba(255, 255, 255, 1); }



/*================================*/
@media only screen and (max-width:1200px)
{
  .no-desktop {display:block;}
  .no-mobile {display:none!important;}
}
@media only screen and (max-width:1024px)
{
    .no-mobile-1024 {display:none!important;}
   .alinhaPagina {width:100%;}
}
@media only screen and (max-width:768px)
{
    .no-mobile-768 {display:none;}
}

@media only screen and (max-width:480px)
{
    .no-mobile-480 {display:none;}
}