* {
	margin: 0;
	padding: 0;
	border: none;
  box-sizing: border-box;
  font-family: Verdana, Helvetica, Lucida Sans;  
}


/*            padrões html             */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

header {
  padding: 10px;
  background: #E6E6E6;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  color: #555555;
  box-shadow: 1px 1px 5px #ccc;
}

footer {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  width: 100%;  
  margin-top: 20px;
  background-color: transparent;
  color: black;
  border-top: 1px solid #ddd; /* Linha de separação */  
  padding: 15px;           /* Espaçamento interno */
  text-align: center;        /* Centraliza o texto no rodapé */
}

a { 
  text-decoration: none; 
  color: black;
}
a.link { color: #4682b4; }
a.rodape { color: gray; }

label {
  margin-left: 5px;
  color: navy;
/*  line-height: 1.5; */
  display: block;
  margin-top: 1.15em;  
  margin-bottom: .25em;
  font-size: 14px;
}
label.pdf{
  font-size: 13px;
}


textarea:focus, input:focus {
  /*box-shadow: 0 0 0 0;*/
  outline: 0;
  border-color: lightblue !important;
}


textarea {
  background-color: #F5FFFA;      
  margin-left: 5px;
  font-size:14px; 
  border:1px solid rgb(190, 190, 190);
  border-radius: 5px;
  padding: 5px;
  resize: none;
}
textarea.print {
  max-width: 340px !important;  
  height: 57px;  
}
@media only screen and (min-width: 400px) {
  textarea {
    width: 100%;
  }
}


iframe {
  width: 100%; /* Define a largura do iframe */
  height: auto; /* Define a altura automática do iframe */
  border: none; /* Remove a borda do iframe */
  overflow: hidden; /* Esconde a barra de rolagem do iframe */
}

/*          padrões botões            */
button {
  flex: 1;
  background: #4682b4;
  color: white;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;    
  border: none;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
}
button:hover {
  background-color: #1B3B54;
  transform: scale(1.01);
  transform: translateX(2px);    
}

/* Estilo do input de busca */
button.search {
  background: none;         /* Remove o fundo */
  color: inherit;           /* Herda a cor do elemento pai */
  border: none;             /* Remove a borda */
  padding: 0;               /* Remove o padding padrão */
  font-size: inherit;       /* Herda o tamanho da fonte */
  text-align: inherit;      /* Herda o alinhamento do texto */
  outline: none;            /* Remove o contorno ao focar */
  box-shadow: none;         /* Remove a sombra */
  text-decoration: none;    /* Remove o sublinhado */  
  display: inline-block;  
  background:none;
  background-image: transparent;
  border-radius: none;
  margin-right: 10px;
}
button.search:hover {
  transform: scale(1.02);
  transform: translateX(2px);    
}

/*      botao com frase giratoria     */
button.but_girar span {
    overflow: hidden; /* Impede que o texto saia fora do botão */
    display: inline-block;
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    animation: moverTexto 10s linear infinite; /* A animação de movimento contínuo */
}
/* Animação para mover o texto de esquerda para direita */
@keyframes moverTexto {
    0% {
        transform: translateX(-100%); /* Início: texto fora da tela à esquerda */
    }
    100% {
        transform: translateX(100%); /* Fim: texto fora da tela à direita */
    }
}
@keyframes fadeInOut {
    0%, 25% {
        opacity: 1; /* A frase aparece completamente */
    }
    50% {
        opacity: 0; /* A frase some no meio da animação */
    }
    75% {
        opacity: 1; /* A frase volta a aparecer */
    }
    100% {
        opacity: 1; /* No final, a frase está visível novamente */
    }
}

/*  estilo para quantidades (+ e -)   */
button.qtd {
  background: none;
  color: #2ecc71; /* Cor verde */
  width: 30px;
  height: 40px;
  box-shadow: none;
  border:1px solid #4682b4;
  border-radius: 5px;
  display: flex;              /* Habilita o flexbox */
  justify-content: center;    /* Centraliza horizontalmente */
  align-items: center;  
}
.botao-mais::before {
    content: "+"; 
    font-size: 15px;
    color: #4682b4;
    font-weight: bold;
}
.botao-menos::before {
    content: "-"; 
    font-size: 20px;
    color: #4682b4;
    font-weight: bold;
}

button.busca, button.busca.container-camps {
    display: inline-block;  
    margin-right: 10px;
    margin-top: 3px;
    margin-bottom: 5px;    
}
button.sair {
  background: transparent;
  background-image: transparent;  
  text-align: none;
  color: none;  
  padding: 0;  
  font-size: 0;
  border-radius: 0;  
  right: 5px;
  align-items: center;  
}
button.sair img {
  width: 25px; 
  height: auto; /* Mantém a proporção da imagem */
}  
button.canc {
    padding: 5px 10px;
    background-color: #F5F5F5;
    color: #A9A9A9;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);    
}
button.transparent {
    padding: 5px 10px;
    background: none;
    border: 1px solid #4682b4;
    border-radius: 5px;
    color: #4682b4;
    box-shadow: none;    
}
button.transparent:hover {
    background: #4682b4 !important;
    color: white !important;  
}

button.clickmap {
    margin-top: 20px;
    width: 450px;
}

/*    buttons do front para marcar e desmarcar evento     */
button.list {
    display: inline-block;  
    text-align: center;    
    background-color: #2A85B6;
    color: white;    
    padding: 5px 10px;    
    margin-top: 6px;
    margin-bottom: 6px;    
    margin-right: 0 !important;
}
button.list:hover {
    background-color: #4682B4; 
    animation: list 0.5s ease forwards;
}
button.list.off {
    background-color: indianred;
}
button.list.off:hover {
    background-color: red; 
    animation: list 0.5s ease forwards;
}
/* Definição da animação de tremor */
@keyframes list {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
button.list.disable {
  background-color: #ccc;
  box-shadow: none;
  animation: list 0s;  
  transform: none;
  transition: none;
  cursor: not-allowed;   
}
/*     button dos browses do admin     */
button.lista_acao{
  display: inline-block;  
  text-align: center;    
  background:none;
  background-image: transparent;
  border: none;
  padding: 2px 2px;  
  margin-left: 5px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s; 
  margin-top: 6px;
  margin-bottom: 6px;    
}
button.lista_acao.form_int{
  margin-left: 0;
}
button.lista_acao:hover, button.lista_acao.form_int:hover{
  background-image: transparent;   
  background: #EFFBF5;  
  transform: scale(1.01);
  transform: translateX(1px);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}
button.lista_acao.disable {
  background-color: #ccc;
  cursor: not-allowed;
  pointer-events: none; 
  transform: none;
  transition: none;
}
@media only screen and (max-width: 768px) {
  button {
    padding: 8px 11px;
/*    font-size: 10px;    */
  }    
  button.busca {
    margin-top: 5px;
    margin-left: 5px;
  }   
  button.busca.container-camps {
    margin-top: -20px;
  }    
  button.clickmap {
      width: 340px;
  }  
  button.list {
    width: 65px;
    padding: 3px 8px;
    margin: 2px;
    font-size: 10px;    
  } 
  button.sair img {
    width: 20px; /* Defina o tamanho que deseja para a imagem */
  }  
}


/*                padrões html -  inputs              */
input[type="text"], input[type="password"], input[type="number"]{
  margin-left: 5px;  
  margin-right: 5px;
  height: auto;
  font-size:14px; 
  padding: 6px;
  background-color: #fff;    
  border:1px solid rgb(190, 190, 190);
  border-radius: 5px;    
}

input.obs[type="text"]{
  font-size:12px; 
}

input.checkin {
  border: 2px solid rgb(190, 190, 190) !important;
  width: 220px !important; 
  font-size: 17px !important;
  text-transform: uppercase;
}

input.drop {    
  text-overflow: ellipsis; 
}

/*       alinhamentos celulas do input     */
input.alinc{  text-align: center; }
input.alinr{  text-align: right;  }
input.alincc{  
  justify-content: center;
  text-align: center; 
}
/*     botões que acompanham os inputs    */
input.but_input {
  background: #4682b4;
  color: white;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;    
  border: none;
  padding: 6px 13px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 5px;
}
input.but_input:hover {
  background-color: #1B3B54;
  transform: scale(1.01);
  transform: translateX(2px);    
}
input.but_input.transparent{
    background: none;
    border: 1px solid #4682b4;
    border-radius: 5px;
    color: #4682b4;
    box-shadow: none;  
}
input.but_input.transparent.login {
    padding: 4px 8px;
    border:1px solid rgb(190, 190, 190);
}
input.but_input.transparent:hover {
    background: #4682b4 !important;
    color: white !important;  
}

/*   evitar o spin dos inputs numéricos   */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type="number"] { 
    -moz-appearance: textfield; 
}

.label-tit {
  margin-left: 5px;
  color: gray;
/*  line-height: 1.5; */
  font-size: 14px;
}
 
/*              padrão checkbox              */
.checkbox-grupo {
  display: flex;  
  background-color: #f4f4f4;
  padding: 1px;
  border-radius: 6px;
  margin-left: 5px;
  margin-right: 5px;
  height: 46px;
  justify-content: space-around;
}
.custom-checkbox input{
  display: none;
}
.custom-checkbox input + label:before {
  display: inline-block;
  vertical-align: middle;  
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background-color: #F5FFFA;    
  border:1px solid rgb(190, 190, 190);
  margin-right: 8px;
  margin-bottom: 3px;
}
.custom-checkbox input:checked + label:before {
  background-color: indianred;
  background-position: center;
  content: '\2713'; /* Adiciona o símbolo de check */ 
  color: white; /* Muda a cor do símbolo de check para branco */
  border: none;
  padding: 1px;
  line-height: 20px; /* Centraliza verticalmente o conteúdo */
  text-align: center; /* Centraliza horizontalmente o conteúdo */
}
@media only screen and (max-width: 768px) {
  .checkbox-grupo{ font-size: 13px; }
}  

/* Estilizando os radios */
fieldset {
  border: 1px solid #4CAF50; /* Cor verde */
  border-radius: 5px;
  padding: 3px;
  max-width: 165px;
  margin: 10px auto;
  margin-left: 5px;
}
legend {
  font-size: 14px;
  color: #4CAF50;
  padding: 0 5px;
}
label.radio {
  display: inline-flex; /* Usar inline-flex para alinhar os itens horizontalmente */
  margin-bottom: 5px;
  font-size: 15px;
  color: #333;
  cursor: pointer;
}

/* Estilizando os botões de rádio */
input.radio[type="radio"] {
  appearance: none; /* Remove o estilo padrão */
  width: 14px; /* Tamanho do botão de rádio */
  height: 14px; /* Tamanho do botão de rádio */
  border: 1px solid #4CAF50;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle; /* Garantir alinhamento vertical */
  position: relative;
  background-color: white;
}

/* Quando o botão de rádio está selecionado */
input.radio[type="radio"]:checked {
  background-color: white; /* Deixe o fundo branco */
}

/* Criando o ponto no centro do botão de rádio */
input.radio[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px; /* Tamanho do ponto */
  height: 7px; /* Tamanho do ponto */
  border-radius: 50%; /* Forma circular */
  background-color: #4CAF50; /* Cor do ponto */
  transform: translate(-50%, -50%); /* Centraliza o ponto dentro do botão de rádio */
}

/* Adicionando um efeito de hover */
input.radio[type="radio"]:hover {
  border-color: #45a049;
}


/*          padrões diversos        */
.caracter-mini{
  color: #ccc;
  font-size: 10px;
}

.disable {  
  background-color: #ccc !important;  
}

.inactiv {  color: #ccc;  }

.line-div {
  position: absolute;
  bottom: 65px;
  width: 100%;
  height: 0px; /* Ajuste a altura conforme necessário */
}

.linha {
  border-top: 1px solid #4682b4; 
  width: 100%; 
}

.line-separate {
    height: 1px;            
    background-color: #ccc; 
    margin: 10px 0;         
    width: 95%;           
    margin-left: auto;
    margin-right: auto;
}

.shadow {
  font-weight: 500;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.4);    
}

.flyer {
    width: 480px;
    height: auto; 
    border-radius: 5px; 
    display: block; /* Garante que a imagem se comporte como um bloco */
}
.flyer.front {
  width: 280px;
  height: 200px;
  border-radius: 20px 20px 20px 20px;   
  object-fit: cover;
}

@media only screen and (max-width: 748px) {
    .flyer {
        width: 340px;
    }  
}  
.spaceinline{
  display: inline-block; 
  margin-right: 5px;
}

.spaceinline.pdf{
  margin-right: 20px;
}

.around {
  display: flex;
  justify-content: space-between; /* Espaço entre os itens */
  gap: 10px;                     /* Espaçamento entre os itens */
  flex-wrap: wrap;                /* Permite que os itens que não cabem se movam para a linha seguinte */
  width: 100%;                    /* Ocupa toda a largura disponível */
  max-width: 1200px;              /* (Opcional) Limita a largura máxima do contêiner */
  margin: 0 auto;                 /* Centraliza o contêiner horizontalmente */
}
.around.front {
  padding: 1px;
  align-items: center;
}

.center-h {
  display: flex; /* Ativa o modelo Flexbox */
  justify-content: center; /* Centraliza os itens horizontalmente */
  align-items: center; /* Centraliza os itens verticalmente */
}
.center-v {
    display: flex;            /* Ativa o modelo Flexbox */
    justify-content: center;  /* Centraliza horizontalmente */
    align-items: center;      /* Centraliza verticalmente */
    width: 100%;              /* Garante que o contêiner ocupe toda a largura disponível */
    flex-direction: column;   /* Organiza os itens em uma coluna (verticalmente) */
}


.assinatura {
  display: block;
  text-align: left;
  text-decoration: none;
  font-size: 14px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.but_link {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 0;
}


/*           input file           */
.file-upload {
    display: inline-block;
    padding: 10px 10px;
    cursor: pointer;
    background-color: #00BFFF; 
    color: white; 
    border-radius: 5px; 
    border: none; 
    font-size: 14px; 
    margin-top: 35px;     
    margin-bottom: 5px; 
}
#thumb {
    margin-top: 5px;
    height: auto; 
    display: none; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
}

/*              margens               */
.mgml-5{ margin-left: -5px; }
.mgml-10{ margin-left: -10px; }
.mgml-20{ margin-left: -20px; }
.mgml-25{ margin-left: -25px; }
.mgml-27{ margin-left: -27px; }
.mgml-30{ margin-left: -30px; }
.mgml-35{ margin-left: -35px; }
.mgml-40{ margin-left: -40px; }
.mgml-50{ margin-left: -50px; }
.mgml-90{ margin-left: -90px; }
.mgml0{ margin-left: 0 !important; }
.mgml4{ margin-left: 4px; }
.mgml5{ margin-left: 5px; }
.mgml6{ margin-left: 6px; }
.mgml10{ margin-left: 10px; }
.mgml15{ margin-left: 15px; }
.mgml20{ margin-left: 20px; }
.mgml26{ margin-left: 26px; }
.mgml30{ margin-left: 30px !important; }
.mgml40{ margin-left: 40px !important; }
.mgml70{ margin-left: 70px; }

.mgmr4{ margin-right: 4px; }
.mgmr5{ margin-right: 5px !important; }
.mgmr6{ margin-right: 6px; }
.mgmr8{ margin-right: 8px !important;}
.mgmr10{ margin-right: 10px !important;}
.mgmr15{ margin-right: 15px !important;}
.mgmr30{ margin-right: 30px !important;}
.mgmr50{ margin-right: 50px !important;}
.mgmr0{ right: 0 !important; }

.mgmt-5{ margin-top: -5px; }
.mgmt-7{ margin-top: -7px !important; }
.mgmt-8{ margin-top: -8px !important; }
.mgmt-9{ margin-top: -9px !important; }
.mgmt-10{ margin-top: -10px !important; }
.mgmt-11{ margin-top: -11px !important; }
.mgmt-40{ margin-top: -40px !important; }
.mgmt0{ top: 0; }
.mgmt4{ margin-top: 4px; }
.mgmt5{ margin-top: 5px; }
.mgmt7{ margin-top: 7px; }
.mgmt8{ margin-top: 8px; }
.mgmt9{ margin-top: 9px; }
.mgmt10{ margin-top: 10px; }
.mgmt11{ margin-top: 11px; }
.mgmt12{ margin-top: 12px; }
.mgmt13{ margin-top: 13px; }
.mgmt14{ margin-top: 14px; }
.mgmt15{ margin-top: 15px; }
.mgmt20{ margin-top: 20px; }
.mgmt22{ margin-top: 22px; }
.mgmt23{ margin-top: 23px; }
.mgmt24{ margin-top: 24px; }
.mgmt30{ margin-top: 30px; }
.mgmt32{ margin-top: 32px; }
.mgmt50{ margin-top: 50px; }

.mgmb0{ bottom: 0; }
.mgmb5{ margin-bottom: 5px; }
.mgmb10{ margin-bottom: 10px; }
.mgmb15{ margin-bottom: 15px; }
.mgmb20{ margin-bottom: 20px; }

.mgmv10{ margin-top: 10px; margin-bottom: 10px; }
.mgmv1005{ margin-top: 10px; margin-bottom: 5px; }
.mgmv1015{ margin-top: 10px; margin-bottom: 15px; }
.mgmv2010{ margin-top: 20px; margin-bottom: 10px; }
.mgmv2020{ margin-top: 20px; margin-bottom: 20px; }
.mgmv2015{ margin-top: 20px; margin-bottom: 15px; }
.mgmv1030{ margin-top: 10px; margin-bottom: 30px; }

.mgm0606{ margin-left: 6px; margin-right: 6px; }
.mgm1010{ margin-left: 10px; margin-right: 10px !important; }
.mgm1015{ margin-left: 10px; margin-right: 15px !important; }
.mgm25{ margin: 25px; }
.mgmfr{ float: right; }

/*              widths               */
.wauto{ width:auto; }
.w0{ width: 0; }
.w1{ width: 1px; }
.w10{ width: 10px; }
.w12{ width: 12px; }
.w15{ width: 15px; }
.w20{ width: 20px; }
.w25{ width: 25px; }
.w30{ width: 30px; }
.w35{ width: 35px; }
.w40{ width: 40px; }
.w45{ width:45px; }
.w50{ width: 50px; }
.w57{ width: 57px; }
.w60{ width: 60px; }
.w62{ width: 62px; }
.w65{ width: 65px; }
.w70{ width: 70px; }
.w80{ width:80px; }
.w85{ width:85px !important; }
.w90{ width:90px !important; }
.w95{ width:95px !important; }
.w100{ width:100px !important; }
.w110{ width:110px !important; }
.w120{ width:120px !important; }
.w125{ width:125px !important; }
.w130{ width:130px !important; }
.w135{ width:135px !important; }
.w140{ width:140px !important; }
.w150{ width:150px !important; }
.w155{ width:155px !important; }
.w160{ width:160px !important; }
.w170{ width:170px !important; }
.w180{ width:180px !important; }
.w190{ width:190px !important; }
.w200{ width:200px !important; }
.w210{ width:210px !important; }
.w220{ width:220px !important; }
.w230{ width:230px !important; }
.w240{ width:240px !important; }
.w245{ width:245px !important; }
.w250{ width:250px !important; }
.w255{ width:255px !important; }
.w260{ width:260px !important; }
.w266{ width:266px; }
.w270{ width:270px; }
.w280{ width:280px; }
.w290{ width:290px; }
.w295{ width:295px; }
.w300{ width:300px !important; }
.w305{ width:305px; }
.w310{ width:310px !important; }
.w320{ width:320px !important; }
.w330{ width:330px !important; }
.w335{ width:335px !important; }
.w340{ width:340px !important; }
.w345{ width:345px; }
.w350{ width:350px; }
.w370{ width:370px; }
.w375{ width:375px; }
.w390{ width:390px; }
.w400{ width:400px !important; }
.w420{ width:420px !important; }
.w430{ width:430px !important; }
.w450{ width:450px; }
.w470{ width:470px; }
.w500{ width:500px; }
.w530{ width:530px; }
.w550{ width:550px; }
.w600{ width:600px; }
.w750{ width:750px; }
.wp50 { width:50% !important; }
.wp80 { width:80% !important; }
.wp90 { width:90% !important; }
.wp95 { width:95% !important; }
.wp97 { width:97% !important; }
.wp98 { width:98% !important; }
.wp99 { width:99% !important; }
.wp100 { width:100% !important; }

/*              fonts               */
.f7 { font-size:7px !important; }
.f8 { font-size:8px !important; }
.f9 { font-size:9px !important; }
.f10 { font-size:10px !important; }
.f11 { font-size:11px !important; }
.f12 { font-size:12px !important; }
.f13 { font-size:13px !important; }
.f14 { font-size:14px !important; }
.f15 { font-size:15px !important; }
.f16 { font-size:16px !important; }
.f17 { font-size:17px !important; }
.f18 { font-size:18px !important; }
.f19 { font-size:19px !important; }
.f20 { font-size:20px !important; }
.fbold { font-weight: bold; }
.fitalic { font-style: italic;}
.funderline { text-decoration: underline; }
.fup { text-transform: uppercase; }
.fup::placeholder {
    font-size: 12px;
    text-transform: none; /* placeholder mantém maiúsculas/minúsculas originais */
}
.flow { text-transform: lowercase; }

.cbSilver { background-color: silver; }
.cbCCC { background-color: #ccc; }
.cbBreen { background-color: #4682b4; }
.cbLightCyan { background-color: #E0FFFF; } 
.cdisplay { color: #708090; }
.catention { color: red; }
.cnavy { color: navy; }
.csilver { color: silver; }
.cgreen { color: #4682b4; }
.cgray { color: gray; }

/*              heights               */
.h2{ height: 2px !important; }
.h10{ height: 10px !important; }
.h12{ height: 12px !important; }
.h15{ height: 15px !important; }
.h20{ height: 20px !important; }
.h25{ height: 25px !important; }
.h26{ height: 26px !important; }
.h27{ height: 27px !important; }
.h28{ height: 28px !important; }
.h30{ height: 30px !important; }
.h35{ height: 35px !important; }
.h40{ height: 40px !important; }
.h45{ height: 45px !important; }
.h50{ height: 50px !important; }
.h55{ height: 55px !important; }
.h60{ height: 60px !important; }
.h70{ height: 70px !important; }
.h80{ height: 80px !important; }
.h90{ height: 90px !important; }
.h100{ height: 100px !important; }
.h110{ height: 110px !important; }
.h120{ height: 120px !important; }
.h130{ height: 130px !important; }
.h140{ height: 140px !important; }
.h150{ height: 150px !important; }

/*            imagens        */
.image22{ width: 22px; height: 22px; }
.image23{ width: 23px; height: 23px; }
.image24{ width: 24px; height: 24px; }

.image-pb { filter: grayscale(100%); }
.image-roxo { 
  filter: grayscale(100%) brightness(0.8) drop-shadow(0 0 5px rgba(0, 0, 255, 0.5)); 
}

@media only screen and (max-width: 748px) {
  .w266{ width: 300px; }
  .image22{ width: 17px; height: 17px; }  
  .image23{ width: 18px; height: 18px; }
  .image24{ width: 19px; height: 19px; }  
}  


/*                 seção topo                  */
.container-topo {
  position: relative;  
}
.head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff; 
    border-bottom: 1px solid #ddd; /* Linha de separação */
}

.head_logo {
  width: 250px;
  height: auto;
}
.head_login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end; /* Centraliza o conteúdo à direita */
}
.head_logado {
  display: flex;
  flex-direction: column;
}
.head_empresa {
  font-size: 20px;    
}
.head_usuario {  
  font-size: 12px;
  margin-top: 14px;
}
.head_dados {  
  font-size: 12px;
}

@media (max-width: 748px) {
  .head {
      flex-direction: column;
      justify-content: none;
      align-items: left;
  }
   .busca {
    margin-top: 20px;
  }  
  button.transparent {
    margin-top: 20px;
  }
}

.month-navigation {
    background-color: #6495ED;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
}
.month-navigation a {
    cursor: pointer;
    color: white;
    text-decoration: none;
    padding: 0 8px;
    transition: transform 0.2s ease-in-out;
}
.month-navigation a:hover {
    transform: scale(0.9);
}
.month-navigation span {
    font-size: 16px;
}


/*          front           */
main {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    margin-top: 20px;
}
main.c {
    flex: 1; /* Permite que o main ocupe o espaço restante entre header e footer */
}

.front {
    flex: 1; /* O input ocupa todo o espaço disponível */
    padding: 10px 12px;
    border-radius: 4px;
}
.container-front {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza os itens */
    padding: 10px;
    width: 100%;
    max-width: 1800px; /* Limita a largura máxima */
    margin: 0 auto; /* Centraliza a container quando a largura é menor que 1000px */
}

@media (max-width: 768px) {
    .container-front {
        flex-direction: column; /* Empilha os itens na versão mobile */
        align-items: center; /* Centraliza os itens em telas menores */
    }
}


.item-front {
    display: flex;
    flex-direction: column; /* Itens empilhados verticalmente */
    align-items: center; /* Centraliza os itens horizontalmente */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;
    margin: 10px; /* Margem para os itens se espalharem de dentro para fora */
    flex-grow: 1; /* Permite que os itens cresçam igualmente */
    min-width: 200px; 
    max-width: 270px; 
}
.item-front.ev {
    max-width: 490px;  
}
.my-ped {   /* css para meus pedidos  */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;  
    max-width: 400px; 
}
.item-cad {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;  
    max-width: 400px; 
}
.item-r {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;  
    padding: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);    
    width: 95%;  
}
.descricao-front {
    width: 100%; /* Ocupa toda a largura do item-front */
    margin-bottom: 5px; /* Espaço entre as descrições e a imagem */
    text-align: left; 
    padding: 0; 
}
.descricao-front1 {
    text-align: left; 
    margin: 0; 
    max-width: 90%; 
    display: block; /* Garante que o conteúdo ocupe a largura disponível */
}


/*   linhas das descrições dos itens do ingresso    */
.container-itens {
    display: flex;
    max-width: 600px;
    width: 100%; 
}
.alinqtd {
  display: flex; 
  justify-content: center; /* Centraliza os itens horizontalmente */   
  align-items: center;
  height: 40px;
}
.qtd {
  width: 30px;
  height: 40px;
  font-size: 16px;
}
.inputqtd {
  text-align: center;
  width: 40px !important;
  height: 40px !important;
  font-size: 17px !important;  
  padding: 6px;
  background-color: #fff;    
  border:1px solid rgb(190, 190, 190);
  border-radius: 5px;  
}
.dsc-item {
  display: flex;
  align-items: center;  
  justify-content: flex-start; 
  text-align: left; 
  padding: 12px; 
  margin-left: 15px;
  width: 340px; 
  height: 40px; 
  font-size: 11px;
  color: #708090;
  background-color: #fff;    
  border: 1px solid rgb(190, 190, 190);
  border-radius: 5px;   
}
.dsc-item.map{
  width: 430px; 
  font-weight: bold;
}

/* Estilo para a tela de confirmação */
.confirma-dados {
  display: none;
  padding: 20px;
  width: 400px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

/* Estilo para o campo de busca */
.busca {
    flex: 1;
    display: flex;
    justify-content: center;
}

.container-busca {
    display: flex;
    width: 100%;
    max-width: 800px; /* Define o tamanho máximo do campo de busca */
    align-items: center; /* Alinha o input e o botão verticalmente */
}

/* Responsividade */
@media (max-width: 2048px) {
    .item-front {
        flex: 1 1 calc(25% - 10px); /* 4 itens por linha */
    }
}
@media (max-width: 1024px) {
    .item-front {
        flex: 1 1 calc(33% - 10px); /* 3 itens por linha */
    }
}
@media (max-width: 768px) {
  .item-front {
        flex: 1 1 calc(50% - 10px); /* 2 itens por linha */
  }       
  .dsc-item {
    width: 230px;
  }     
  .dsc-item.map {
    width: 310px;
  }     
}
@media (max-width: 600px) {
    .head-logo {
      width: 200px;
    }    
    .item-front {
        flex: 1 1 100%; /* 1 item por linha */        
    } 
}

.dat-front {
    color: #00BFFF;
    font-size: 12px;
    font-weight: bold;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.rodape-around-front {
    display: flex;                 
    margin: 5px auto;
    justify-content: space-between; /* Distribui os itens igualmente, com o máximo de espaço entre eles */
    align-items: center;            /* Alinha os itens verticalmente no centro */
    gap: 20px;                      /* Espaço entre os itens (opcional) */
    font-size: 10px;                /* Tamanho da fonte */
    width: 95%;                    /* Faz o contêiner ocupar 100% da largura disponível */
}
.rodape-around-front.fix {
   position: fixed;
    bottom: 0;
}

@media (max-width: 768px) {
    .rodape-front-around {
        font-size: 10px;            /* Reduz o tamanho da fonte em dispositivos móveis */
    }
}


.form-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.cartao-info {
    display: none;  /* Inicialmente escondido */
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}

input.compra {
  background-color: transparent;
    font-size: 20px;
    padding: 5px;
    border: none; /* Borda verde */
    border-radius: none;
    margin: 10px 0;
}


/*                 seção browses / forms                 */
.container-wrapper {
  flex: 1; /* Ocupa o espaço disponível */
  display: flex;
  align-items: center; /* Centraliza verticalmente */
  padding: 0;
  margin: 0;
  border: none;
}

.container {
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #ccc;
  padding: 5px;
  margin: 0;
}

.container.edit {
  max-width: 370px;
  width: 100%;
  margin: 0 auto; /* Centraliza horizontalmente */
}

.container.edit.pg {
  max-width: 630px;
}

.container.edit.kit {
  max-width: 305px;
}

.container.edit.exp {
  max-width: 550px;
}

.container.edit.login {
  max-width: 325px;
  flex-direction: column;
  justify-content: center; /* Centraliza verticalmente */
  align-items: center; /* Centraliza horizontalmente */
  border-radius: 5px; 
  box-shadow: 1px 1px 5px #ccc;
}

.container.imp {
  width: 210mm; 
  margin: 0 auto; 
}

.container-right {
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; /* Alinha os itens na base */
    width: 100%; 
    margin-bottom: 1px; 
}

.container-img {
    display: flex;
    align-items: flex-end; /* Alinha os itens na base */
}

@media (max-width: 768px) {
  .container.edit {
    max-width: 90%; /* Ajusta a largura em telas médias */
  }
}
@media (max-width: 480px) {
  .container.edit {
    max-width: 100%; /* Ajusta a largura em telas pequenas */
  }
}
@media (max-width: 768px) {
  .container.edit.exp {
      max-width: 100%; /* Ajusta a largura em telas pequenas */
    }
  .w530 {
      width: 390px; /* Diminui o tamanho para 370px em telas pequenas */
  }
}

/*    label e input na mesma horizontal   */
.container-camps {
  display: inline-block;
  margin-right: 20px; /* Espaço fixo entre os grupos de label e input */
  vertical-align: top; /* Alinha os elementos no topo */
}


/*        titulos dos browses     */
.titulo.title {
    flex: 1; /* Faz o título ocupar o espaço disponível */
    text-align: center; /* Centraliza o texto dentro da área do título */
}
.titulo1 {
  display: flex;
  margin-top: 1px;
  font-size: 18px;
  justify-content: space-between; /* Espaça o título e o botão */
  align-items: center; /* Alinha verticalmente */
}
.titulo2 {  
  background-color: #4682b4;
  color: #fff;
  font-size: 15px;
  text-align: center;
  padding: 4px;
  width: 130px;
  margin-bottom: 4px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.45);  
  border-radius: 4px;
}
.titulo3 {
  display: flex;
  margin-top: 1px;
  font-size: 18px;
  justify-content: center;
}
.titulo-kit {  
  background-color: navy;
  color: #fff;
  font-size: 15px;
  text-align: center;
  padding: 4px;
  width: 280px;
  margin-top: 20px;
  margin-bottom: 3px;
}
.titulo-meses {
  color: #2E8B57;
  font-size: 17px;
  font-weight: bold;
  margin-top: 10px;
}

.texto {
  font-size: 16px;
  color: #1C1C1C;
}

@media (max-width: 600px) {
  .titulo1 {
    font-size: 16px;
  }  
  .titulo2 {
    width: 95px;    
    border-width: 1px; 
    border-style: solid;
    border-color: #fff;
    box-shadow: unset;      
  }
  .texto {
    font-size: 13px;
  }  
}


/*          corpo do login e menu          */
.login-menu-wrapper {
    flex: 1; /* Ocupa o espaço disponível */
    display: flex;
    justify-content: center;
    align-items: center; /* Centraliza verticalmente */
}
.login-menu {
    width: 370px;
    height: auto;
    background-color: white;
    text-align: center;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #ccc;
    padding: 35px;
}


/*                seção do menu                */
.butmenu {
  display: inline-block;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background-color: #555555;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
  width: 80%;
  margin-top: 20px;
  margin-bottom: 0;
  padding: 10px; 
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);      
}
.butmenu.login {
  width: 100%;
  padding: 10px;   
  margin-left: 0;
  margin-right: 0;  
  border: 0;
  border-radius: 10px;  
  margin-bottom: 8px;
}
.butmenu:hover {
  transform: translateY(2px);
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
}
@media (max-width: 700px) {
  .butmenu {
    padding: 12px;
  }
}


/*              menu vertical lateral               */
.menu-container {
    position: relative;
}
.vertical-menu {
    position: fixed;
    top: 96px;
    width: 5px;
    padding-top: 15px;
    background-color: #333;
    color: #fff;
    background-color: rgba(66, 66, 66, 0.4); /* Cor com transparência */    
    box-shadow: 1px 1px 5px #ccc;   
    overflow-y: auto;
    overflow-x: hidden;       
    bottom: 45px;    
    transition: width 0.3s ease-in-out;
}
.vertical-menu.left {
    left: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.vertical-menu.right {
    right: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.vertical-menu:hover {
    width: 120px;
    font-weight: bold;    
}
.menu-items {
    list-style: none;
    padding: 0;
}
.menu-items li {
    padding: 10px 20px;
}
.menu-items a {
    color: #fff; /* Letras em branco */
    text-decoration: none;
    transition: color 0.3s, transform 0.2s;  
}
.menu-items a:hover {
    color: #A9F5F2;   
}
.menu-items.left{
    text-align: right;
}
.menu-items.right{
    text-align: left;
}


/*     mostrar e ocultar senha      */
.password-container {
    position: relative;
    display: inline-block;
}
.password-container input {
    padding-right: 40px;
}
.password-container img {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    cursor: pointer;
    transform: translateY(-50%);
}


/*        captcha              */
.captcha {
  margin-left: 7px;
  margin-top: 1px;
  height: 30px;
  overflow: hidden;
}
.captcha img {
  height: 100%;
  object-fit: cover;
}


/*          seção das listas        */
table {
  max-width: 100%;
  border-collapse: collapse;
  position: relative;
  width: 100%;    
  margin-top: 10px; 
  border: 1px solid rgb(190, 190, 190);
  box-shadow: 1px 1px 7px #ccc;  
  font-size:13px;     
  border-radius: 5px;
  overflow: hidden;
}

table img {
  width: 100%;
  height: auto;
} 
tr{
  height: 23px;  
}
tr:nth-child(even){     /* nth-child(odd) começa a linha com valor inverso da table */
  background:#f1f1f1;
  height: 23px;
}
tr.event {
  background: #fff;
  height: 25px;
  border: none;
}
tr.event .butvl {
  margin-top: -5px;
  position: absolute;
  right: 10px;
}
tr.lin {
  border: none; 
  height: 1px; 
  margin-top: 10px; 
  margin-bottom: 10px;    
}
tr.lin:nth-child(even){     /* nth-child(odd) começa a linha com valor inverso da table */
  background: transparent;
}
th{
  border: 1px solid #DCDCDC;
  padding-left: 6px;
  padding-right: 6px;  
}   
th.lin {
  text-align: left;  
}
th.th5{ width: 5ch; }
th.th10{ width: 10ch; }
th.th15{ width: 15ch; }
th.th20{ width: 20ch; }
th.th25{ width: 25ch; }
th.th30{ width: 30ch; }
th.th50{ width: 50ch; }

td{
  text-align: center;  
  border: 1px solid #DCDCDC;
  padding-left: 6px;
  padding-right: 6px;  
}
td.lin {
  text-align: left;  
}
td.event {
  text-align: left;    
  border: none;
}
td.event.lin {
  padding: 10px 0; /* Espaçamento vertical dentro da célula */
}
td.alinc{  text-align: center;  }
td.alinr{  text-align: right;  }

@media only screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  table img {
    width: 80%;
    height: auto;
  }    
  th, td {
    font-size: 10px;    
    padding: 1px;
  }
  th.lin, td.lin {
      padding: 5px;
  }
  .mediaf7{
    font-size: 7px !important;  
  }    
  .mediaf8{
    font-size: 8px !important;  
  }    
}

/*    seção formulário com lista imbutida ao lado direito do form       */
.envelope{
  max-width: 1024px; 
  margin: 0 auto; /* centralizar horizontalmente */
  overflow-x: auto; /* habilita a rolagem horizontal */
  display: flex; 
  justify-content: auto; /* centraliza flex items horizontalmente */
}
.form_lista_margem_busca {
  margin-left: 10px;
  margin-top: 10px;
}
.form_box{
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 5px;
  background-color: white;  
  border:1px solid rgb(190, 190, 190);
  box-shadow: 1px 1px 5px #ccc;  
  font-size:13px;     
  border-radius: 5px;   
}
.form_box.inputs{
  float: left; 
}
.form_box.pitem{
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  max-width: 370px;
}

/*        titulo das listas internas ao form       */
.title_form_lista_int{
  float: left;
  width: 100%;
  text-align: center;  
  margin-top: 10px;
  margin-bottom: 0; 
  background: #1B3B54;
  color: #fff;  
  font-size: 14px;  
  padding: 4px;
  border-radius: 5px;     
}
.title_form_lista_int.pdf{
  float: none;
  width: 766px;
  margin-bottom: -10px;
}


/*          seção lista - paginador         */ 
.tab_pag {
  border-collapse: collapse; /* Remove espaço entre as bordas */
  margin-top: 3px;
  width: 100%;   
  border: 1px solid rgb(190, 190, 190); /* Borda da tabela */
  font-size: 13px;     
  border-radius: 5px; 
  box-shadow: 1px 1px 5px #ccc;  
}
.tab_pag td {
  border: none;
  white-space: nowrap; /* Garante que o conteúdo não quebre em várias linhas */  
  font-size: 13px;     
}
.but_pag{
  margin: 2px;
  display: block;
  float: left;    
  border: none;
  border-radius: 5px;       
  text-decoration: none;
  background: #2A85B6;
  color: #fff;    
  text-align: center;
  padding: 5px 10px;
  margin-right: 15px;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);  
}
.but_pag:hover, .numativo, .controle:hover{
  background: #1B3B54;
}
.but_pag.fix{
  background: #1B3B54;
}

/*      display com mensagem positiva no topo da tela, usado pelo JS      */
.msgok {
  position: fixed;
/*      top: 50%; /* Centraliza verticalmente */
  left: 50%; /* Centraliza horizontalmente */
  transform: translate(-50%, -50%); /* Centraliza no meio da tela */
  width: auto; /* Largura ajustada automaticamente */
/*    max-width: 50%; /* Largura máxima de 50% da largura da janela */
  margin-top: 20px;
  padding: 6px 14px;;
  background-color: #29D846;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  display: none; /* A div é oculta por padrão */
}
.msgok.c{
  margin-top: 0;
  top: 50%;
}


/*          select dropdown          */
.container-chosen {
  position: relative;
  display: inline-block;
}
.drop {
  height: 30px;           /* altura fixa para a caixa */
  line-height: 30px;      /* para centralizar texto verticalmente */
  overflow: hidden;       /* evita texto vazar da caixa */
  color: #000;            /* texto visível */
  font-size: 14px;
  padding: 0 10px;        /* um padding lateral */
  border-radius: 5px;
  border: 1px solid #ccc; 
  background: #fff;       /* fundo branco */
  cursor: pointer;        
  white-space: nowrap;    /* texto em uma linha */
  text-overflow: ellipsis; /* corta texto que ultrapassa */
  align-items: center;    /* centraliza verticalmente */
  user-select: none;
  box-sizing: border-box;  
}
.drop.selected {
  color: black;
}
.dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  border-radius: 5px;
  border: 1px solid lightblue;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: white;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
  z-index: 20;
  display: none;
  margin: 0;
  padding: 0;
}
/* dropdown abre para baixo */
.dropdown.down {
    top: 100%;
    bottom: auto; /* garante que não tem bottom ativo */
}

/* dropdown abre para cima */
.dropdown.up {
    bottom: 100%;
    top: auto; /* remove top padrão */
}
.dropdown li {
  list-style: none;
  font-size: 13px;
  height: 28px;
  line-height: 28px;
  padding-left: 0;
  padding-right: 10px;
  cursor: pointer;
  border-bottom: 1px solid #d1d1d1;
  color: black;
  display: block;
  align-items: unset;
  margin: 8px;
}
.dropdown li:last-child {
  border-bottom: none;
}
.dropdown li:hover {
  background-color: #5882FA;
  color: white;
  padding-left: 10px;
  transition: background-color 0.2s, padding-left 0.2s;
}
.dropdown::-webkit-scrollbar {
  width: 2px; /* barra fina */
}
.dropdown::-webkit-scrollbar-thumb {
  background-color: lightblue; /* cor azul igual à borda */
  border-radius: 4px;
}
.dropdown::-webkit-scrollbar-thumb:hover {
  background-color: #4a90e2; /* azul um pouco mais escuro no hover */
}


/* Spinner CSS com hora marcando tempo centralizada    */
.spinner {
    padding: 10px;
    background-color: lightcyan;
    border-radius: 6px;
}

.spinner-wait {
    position: relative;
    width: 30px; /* Ajuste o tamanho conforme necessário */
    height: 30px;
    display: inline-block;
    vertical-align: middle;
}
/* Pseudo-elemento giratório */
.spinner-wait::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border: 4px solid #ADD8E6;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
/* Hora centralizada */
.spinner-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #333;
}
/* Animação do spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Tela para delay (overlay) */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Aumenta a opacidade do fundo para 0.5 */
    display: none; /* Escondido inicialmente */
    justify-content: center;
    align-items: center;
    z-index: 1000; 
}
.spinner-overlay {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #28a745; 
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spinner-spin 1s linear infinite; 
}
@keyframes spinner-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/*      texto privacidade do cookie           */
/* Estilizando o contêiner da política de privacidade */
.ppriv {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  box-shadow: 1px 1px 5px #ccc;
  background-color: white;
  border-radius: 5px;
  display: flex;
  padding: 25px; /* Adicionando margens de 10 pixels em todos os lados do conteúdo */
}

/* Estilizando o texto dentro do contêiner */
.ppriv .texto {
  font-family: Arial, sans-serif, verdana;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}


/* Estilos para o popup(iframe) */
.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: calc(10px + 10px + 8px); /* Soma dos espaçamentos do header e .cab */        
    padding: 10px;
    text-align: center;
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
    max-width: 100%; 
    width: auto;
    box-sizing: border-box; 
}
.popup-acesso {
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  max-width: 320px;
  box-shadow: 1px 1px 5px #ccc;
  background-color: #FFF;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}


/*      selecionar arquivo       */
.custom-file-input-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.custom-file-input-wrapper label {
    margin: 10px;
}
.custom-file-input-wrapper input[type="file"] {
    display: none;
}
.custom-file-input-wrapper #file-label {
    display: inline-block;
    padding: 10px;
    background-color: #87CEEB;
    color: white;     
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);    
    border-radius: 5px;
    cursor: pointer;  
}
.custom-file-input-wrapper #file-label:hover {
    background-color: #4682B4; 
    animation: list 0.5s ease forwards;
}
.custom-file-input-wrapper #file-name {
    display: flex;
    width: 290px;
    font-size: 10px;
    margin: 8px;
    padding: 6px;
    color: navy;
    border: 1px solid #B0E0E6;
    border-radius: 2px;
}


/*           sweet alert           */
.swal-title {
  margin-top: 20px;  
  font-size: 16px !important; 
}
.swal-btn {
  padding: 5px 10px !important; 
  font-size: 12px !important; 
  border-radius: 4px !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
  height: 26px; 
  line-height: 16px; 
}
.swal-btn.r{
  margin-left: 35px;
}
.swal-btn.l{
  margin-right: 35px;
}
.swal-btn.erro {
  line-height: 0; 
}
.swal-msg {
  margin-bottom: 18px;  
  font-size: 16px; /* tamanho da letra do título */
}



/*       abre mensagem ao passar mouse      */
.tooltip {
    position: relative;
    display: inline-block;
}
/* Estilo da mensagem que aparece ao passar o mouse */
.tooltip .tooltip-text {
    visibility: hidden;
    width: 250px; 
    border-radius: 5px;
    background-color: lightblue;
    text-align: left;
    font-size: 10px;
    padding: 5px;
    position: absolute;
    z-index: 9999;
    top: 0; /* Posição abaixo do elemento */
    left: 50%;
    margin-left: 15px; /* Centraliza a mensagem */
    opacity: 0;
    transition: opacity 0.3s;
    white-space: pre-wrap; /* Faz o texto quebrar linhas */
    word-wrap: break-word; /* Quebra palavras longas se necessário */
}
/* Exibe a mensagem quando o mouse passa sobre o elemento */
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


  /*       abre mensagem ao passar mouse com circulo em volta      */
.help-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
    text-align: center;
    background-color: white;
    color: #4682b4;
    border: 1px solid #4682b4;
    border-radius: 50%;
    cursor: pointer;
    font-size: 8px;
    position: relative;
    box-sizing: border-box;
    margin-left: 10px;
}

.help-icon:hover::after {
    content: attr(data-title);
    margin-top: 10px;
    display: block;
    position: absolute;
    background-color: white;
    color: #333;
    padding: 5px 10px;
    border: 1px solid #4682b4;
    border-radius: 5px;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    width: 200px;
    max-width: 200px; /* Define um tamanho máximo para a mensagem */
    word-wrap: break-word; /* Quebra o texto se ele for longo */
    text-overflow: ellipsis;
    overflow: hidden;
    z-index: 1;
}


/*       calendario         */
.calendar-icon-container {
    display: inline-flex;
    cursor: pointer; 
}
.calendar-icon-container img {
    vertical-align: middle;
    padding-top: 5px;
    width: 24px; /* Ajuste o tamanho do ícone conforme necessário */
    height: auto;
    margin-left: -35px;
}
#calendario-container {
    position: absolute;
    width: 260px;    
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 1000;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    min-height: 200px;
    overflow-y: auto; 
    display: none;
}
#calendario-container table {
    border-collapse: collapse;
    table-layout: fixed; /* Fixa o layout da tabela */
    margin-top: 0;
}
#calendario-container th, #calendario-container td {
    border: 1px solid #ddd;
    text-align: center;
    height: 25px;
}
#calendario-container th {
    background-color: #6495ED;
    color: white;
    font-size: 10px;
}
#calendario-container td {
  background-color: white;
    padding: 5px;
    font-size: 14px;
}
#calendario-container td a {
    display: block;
    color: #555;
    text-decoration: none;
    line-height: 25px;
    transition: color 0.3s;
}
#calendario-container td a:hover {
    color: blue;
    font-weight: bold;
}
#calendario-container td a.dia-atual {
    color: blue;
    font-weight: bold;
}
.calendario-close-btn {
    display: block;
    text-align: center;
    padding: 10px;
    background-color: #6495ED;
    color: white;
}
.calendario-close-btn:hover {
    font-size: 16.5px;
    cursor: pointer;
}


/*       impressão      */
@page {
  size: A4; /* ou especificar largura e altura em unidades */
  margin: 20mm; 
  margin-bottom: 277mm; /* Define a margem inferior folha A4 para posicionar o rodapé */
}


/*      Camera celular         */
#video-container {
    position: relative;
    display: inline-block;
    width: 80vw; /* 80% da largura da tela */
    height: 80vw; /* Mantém o formato quadrado */
    max-width: 270px; /* Limite de largura para dispositivos maiores */
    max-height: 270px; /* Limite de altura para dispositivos maiores */
    margin: 0 auto;
}
#video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que o vídeo preencha a área quadrada sem distorcer */
    border: 2px solid #000;
    border-radius: 8px;
}
@keyframes flash {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}
@media (max-width: 600px) {
    #video-container {
        width: 70vw; /* Aumenta a área de captura para telas pequenas */
        height: 70vw; /* Mantém o formato quadrado */
    }
}


/* Exibir a mensagem ao clicar na palavra (com a classe 'openmsg') */
.msgcanc {
    display: none;
    position: absolute;
    right: 30px;
    padding: 10px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    width: 350px;  
    font-size: 10px;
    z-index: 9999;
}
@media (max-width: 400px) {
    .msgcanc {
        width: 200px;  
        font-size: 10px; 
        left: 10px;
        right: 0;
    }
}


/*        mensagens de erro         */
.error-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: #721c24;
    font-family: Arial, sans-serif;
}
.error-msg {
    padding: 20px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    background-color: #f8d7da;
    color: #721c24;
    font-size: 18px;
    text-align: center;
}


/*              cookies               */
.cookieConsentContainer{
  z-index:999;
  width:350px;
  min-height:20px;
  box-sizing:border-box;
  padding:30px 30px 30px 30px;
  background:#232323;
  overflow:hidden;
  position:fixed;
  bottom:30px;
  right:30px;
  display:none
}
.cookieConsentContainer .cookieTitle a{
  font-family:OpenSans,arial,sans-serif;
  color:#fff;
  font-size:22px;
  line-height:20px;
  display:block
}
.cookieConsentContainer .cookieDesc p{
  margin:0;
  padding:0;
  font-family:OpenSans,arial,sans-serif;
  color:#fff;
  font-size:13px;
  line-height:20px;
  display:block;
  margin-top:10px
}
.cookieConsentContainer .cookieDesc a{
  font-family:OpenSans,arial,sans-serif;
  color:#fff;text-decoration:underline
}
.cookieConsentContainer .cookieButton a{
  display:inline-block;
  font-family:OpenSans,arial,sans-serif;
  color:#fff;
  font-size:14px;
  font-weight:700;
  margin-top:14px;
  background:#000;
  box-sizing:border-box;
  padding:15px 24px;
  text-align:center;
  transition:background .3s
}
.cookieConsentContainer .cookieButton a:hover{
  cursor:pointer;
  background:#3e9b67
}
@media (max-width:980px){
  .cookieConsentContainer{
    bottom:0!important;
    left:0!important;
    width:100%!important
  }
}