.loader {
      border: 16px solid #f3f3f3; /* Light grey */
      border-top: 16px solid #3498db; /* Blue */
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
}

@keyframes spin {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

summary::-webkit-details-marker {
      display: none
}

summary:after {
      float: left;
      font-weight: bold;
      padding: 0;
      text-align: center;
      width: 40px;
      left: 40px;
      margin-right: -5px;
      margin-bottom: 15px;
}


/* Estilização básica */
summary {
      cursor: pointer;
      font-weight: bold;
      position: relative;
      padding-left: 0.1em;
}

/* Ícone no primeiro details */
.summary-filtro::before {
      content: "";
      position: absolute;
      left: 0;
}

details[open] .summary-filtro::before {
      content: "(-)Ocultar ";
      font-size: 0.675rem; /* Equivalente ao texto sm do Bootstrap */
      color: blue;
      position: relative;
}

/* Ícone no segundo details */
.summary-mais-filtro::before {
      content: "+";
      position: absolute;
      left: 0;
}

details[open] .summary-mais-filtro::before {
      content: "-";
}




.show-span {
      cursor: pointer;
      color: #28a745; /* Cor para os spans de "mostrar" */
      font-weight: bold;
      margin-right: 15px;
}
.hidden {
      display: none;
}

.oval-button {
      display: inline-block;
      padding: 0.2rem 1.1rem; /* Define altura e largura */
      font-size: 1rem; /* Tamanho do texto */
      font-weight: bold; /* Texto em negrito */
      color: blue; /* Cor do texto padrão */
      background-color: orange; /* Cor de fundo (laranja) */
      border: none; /* Remove a borda */
      border-radius: 95px; /* Cria o formato oval */
      cursor: pointer; /* Cursor de "mão" ao passar o mouse */
      transition: background-color 0.3s ease, color 0.3s ease; /* Adicionamos 'color' à transição */
      text-align: center;
}

      .oval-button:hover {
            color: white; /* Cor do texto muda para branco no hover */
            /* Você pode adicionar outras mudanças aqui, como um background-color diferente */
            background-color: darkorange; /* Exemplo: um laranja mais escuro no hover */
      }

.oval {
      display: inline-block;
      padding: 0.1rem 0.6rem; /* Define altura e largura */
      font-size: 0.8rem; /* Tamanho do texto */
      font-weight: bold; /* Texto em negrito */
      color: blue; /* Cor do texto */
      background-color: orange; /* Cor de fundo (laranja) */
      border: none; /* Remove a borda */
      border-radius: 95px; /* Cria o formato oval */
      cursor: pointer; /* Cursor de "mão" ao passar o mouse */
      transition: background-color 0.3s ease; /* Transição para hover */
      text-align: center;
}


.oval-dangerlight {
      display: inline-block;
      padding: 0.2rem 0.8rem; /* Altura e largura equilibradas */
      font-size: 0.85rem;
      font-weight: 600;
      color: #ffffff; /* Texto branco */
      background-color: #ff6a00; /* vermelho claro */
      border: none;
      border-radius: 95px; /* Oval */
      cursor: pointer;
      transition: background-color 0.3s ease, color 0.3s ease;
      text-align: center;
      text-decoration: none; /* Remove sublinhado em links */
}

      .oval-dangerlight:hover {
            background-color: #edc6aa; /* vermelho-água claro */
            color: #00332e; /* Texto azul esverdeado escuro para contraste */
      }

.oval-petros {
      display: inline-block;
      padding: 0.2rem 0.8rem; /* Altura e largura equilibradas */
      font-size: 0.85rem;
      font-weight: 600;
      color: #ffffff; /* Texto branco */
      background-color: #b5dcf6; /* Azul claro */
      border: none;
      border-radius: 95px; /* Oval */
      cursor: pointer;
      transition: background-color 0.3s ease, color 0.3s ease;
      text-align: center;
      text-decoration: none; /* Remove sublinhado em links */
}

      .oval-petros:hover {
            background-color: #83c5be; /* Verde-água claro */
            color: #00332e; /* Texto azul esverdeado escuro para contraste */
      }

.roundt {
      border: 1px solid transparent !important;
      /*color: #fff !important;*/
      border-radius: 6px !important;
      text-decoration: none;
}
.roundtb {
      border: 1px solid transparent !important;
      border-top-left-radius: 0 !important; /* Canto superior esquerdo */
      border-top-right-radius: 0 !important; /* Canto superior direito */
      border-bottom-right-radius: 6px !important; /* Canto inferior direito - SEM arredondamento */
      border-bottom-left-radius: 6px !important; /* Canto inferior esquerdo - SEM arredondamento */
      text-decoration: none;
}
.roundts {
      border: 1px solid transparent !important;
      border-top-left-radius: 0 !important; /* Canto superior esquerdo */
      border-top-right-radius: 0 !important; /* Canto superior direito */
      border-bottom-right-radius: 0 !important; /* Canto inferior direito */
      border-bottom-left-radius: 0 !important; /* Canto inferior esquerdo */
      text-decoration: none;
}

.roundtsembaixo {
      border: 1px solid transparent !important;
      border-top-left-radius: 6px !important; /* Canto superior esquerdo */
      border-top-right-radius: 6px !important; /* Canto superior direito */
      border-bottom-right-radius: 0 !important; /* Canto inferior direito */
      border-bottom-left-radius: 0 !important; /* Canto inferior esquerdo */
      text-decoration: none;
}

.round {
      border: 1px solid !important;
      /*color: #fff !important;*/
      border-radius: 6px !important;
      text-decoration: none;
}


.sliders_control {
      position: relative;
      min-height: 50px;
}


input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      pointer-events: all;
      width: 24px;
      height: 24px;
      background-color: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 1px #C6C6C6;
      cursor: pointer;
}

input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      height: 2px;
      width: 95%;
      position: absolute;
      background-color: #C6C6C6;
      pointer-events: none;
}