@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css");

div,
table td,
table td * {
  vertical-align: top;
}

html {
  font-size: 1rem;
}

.sub_menu_escala {
  padding-left: 20px;
}

.sub_menu_escala_admin {
}

.icon_menu {
  width: 30px;
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

.menu_ativo {
  background-color: lightblue;
}

.sub_menu_ativo {
  background-color: lightblue;
}

.icone_botao {
  
  height:30px;
  max-width: 100%; 
}


.botao_mais_menos {
  width: 30px;
  height: auto;
}

/*
.botao_mais_menos {
  
  .fas ;
  .fa-trash-alt ;
  .me-2;

} */

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }

  .icon_menu {
    width: 10px;
    max-width: 60%;
    height: auto;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }

  .icon_menu {
    width: 20px;
    max-width: 80%;
    height: auto;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

.justaescala {
  font-size: 16px;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: bold;
}

.justaescala::after {
  content: "beta";
  /* Replace with your image path */
  /* Adjust other styles as needed */
  position: relative;
  top: -0.5em;
  /* Adjust vertical position as needed */
  right: -0.5em;
  /* Adjust horizontal position as needed for image + text */
  font-size: x-small;
  /* Adjust size of "beta" (optional) */
  font-family: Roboto;
  color: red;
  /* Adjust color of "beta" (optional) */
}

.grupo_afinidade_semprejuntos {
  display: inline-block;
  background-color: lightgreen;
  padding: 10px;
  margin: 10px;
}

.grupo_afinidade_nuncajuntos {
  display: inline-block;
  background-color: lightcoral;
  padding: 10px;
  margin: 10px;
}

.legenda_lancamento {
  display: block;
  background-color: lightblue;
  white-space: nowrap;
  font-size: 14px;
  margin-left: 20px;
  width: min-content;
}

.lancamento_recem_gerado_ok {
  display: block;
  background-color: lightgreen;
  white-space: nowrap;
  font-size: 14px;
  margin-left: 4px;
  width: min-content;
}

.legenda_lancamento_recem_gerado_ok {
  display: block;
  background-color: lightgreen;
  white-space: nowrap;
  font-size: 14px;
  margin-left: 4px;
  width: min-content;
}

.legenda_lancamento_recem_gerado_erro {
  display: block;
  color: red;
  background-color: yellow;
  white-space: nowrap;
  font-size: 14px;
  margin-left: 20px;
  width: min-content;
}

.legenda_lancamento_ausente {
  display: block;
  color: blue;
  background-color: rgb(177, 177, 63);
  font-size: 14px;
  white-space: nowrap;
  margin-left: 20px;
  width: min-content;
}

.lancamento {
  display: block;
  background-color: lightblue;
  white-space: nowrap;
  font-size: 14px;
  margin-left: 4px;
  margin-top: 10px;
}

.lancamento_recem_gerado_erro {
  display: block;
  color: red;
  background-color: yellow;
  white-space: nowrap;
  margin-left: 10px;
}

.lancamento_ausente {
  display: block;
  color: blue;
  background-color: rgb(177, 177, 63);
  white-space: nowrap;
  margin-left: 10px;
}

.lancamento_vazio {
  white-space: nowrap;
  display: block;
  color: red;
  background-color: lightblue;
  margin-left: 20px;
  font-size: 10px;
}

.lancamento_ja_existente {
  white-space: nowrap;
  display: block;
  color: black;
  background-color: lightblue;
  margin-left: 10px;
}

.lancamento_nao_solicitado {
  white-space: nowrap;
  display: block;
  color: black;
  background-color: lightblue;
  margin-left: 10px;
}
.div_escala_mensal {
  width: min-content;
  border: 2px solid black; 
  padding: 0; /* Remove padding if any */
  margin: 0;
  box-sizing: border-box;
}

.div_dia {
  display: inline-block;
  background-color: lightgrey;
  font-size: 0.9rem;
  margin-top: 3px;
  margin: 3px;
  padding: 3px;
  text-align: left;
}

.dia_extra {
  display: inline-block;
  background-color: rgb(255, 255, 255);  
  width: 130px;  
  text-align: left;
}



.div_dia_cabecalho {
  display: block;
  background-color: lightgrey;
  font-size: 0.9rem;
  margin-top: 0px;
  margin: 0px;
  width: min-content;
  padding: 0px;
  text-align: left;
}

.div_domingo {
  background-color: rgb(223, 188, 188);
}

.div_hoje {
  background-color: rgb(177, 226, 183);
  animation: blink 3s infinite;
}

@keyframes blink {
  0%, 20% { opacity: 1; }
  21%, 22% { opacity: 0; }
  23%, 100% { opacity: 1; }
}

.div_dia_antes_domingo {
  display: list-item;
}

.div_local {
  display: inline-block;
  background-color: lightyellow;
  font-size: 0.9rem;
  margin-top: 15px;
  margin: 4px;
}

.div_posto {
  display: block;
  color: gray;
  background-color: lightgray;
  font-size: 0.8rem;
  margin-left: 4px;
  margin-top: 5px;
}

.div_turno {
  display: block;
  background-color: lightgreen;
  margin-left: 4px;
  font-size: 0.7rem;
}

.dia {
  font-size: 1.5rem;
  min-width: 7rem;
}

.mes {
  font-size: 3rem;
  padding: 0; /* Remove padding if any */
  margin: 0;
  box-sizing: border-box;
}

.lista_logs {
  font-size: 1.5rem;
}

.log_box {
  display: flexbox;
}

.posto {
  display: block;
  background-color: lightgray;
  margin-left: 4px;
  margin-top: 5px;
  text-align: left;
  max-width: fit-content;
}

.local_posto {
  display: inline-block;
  background-color: lightyellow;
  font-size: 0.9rem;
  margin-top: 15px;
  margin-left: 4px;
  
  text-align: left;
  width: max-content;
}

.turno_posto {
  display: block;
  background-color: lightgreen;
  margin-left: 20px;
  font-size: 0.7rem;
  text-align: left;
}

.dia_semana {
  margin-left: 2px;
  color: #303133;
  font-size: small;
}

.n_dia_mes {
  margin-left: 1px;
  color: black;
  font-weight: bold;
  font-size: 1rem;
}

.feriado {
  margin-left: 2px;
  color: #e47208;
  font-size: small;
  white-space: nowrap;
}

div.postos_configuracao {
}

div.insere_participante {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-gap: 5px;
}

div.insere_participante label {
  text-align: right;
}

div.insere_participante label:after {
  content: ":";
}

div.insere_posto {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-gap: 5px;
}

div.insere_posto label {
  text-align: right;
}

div.insere_posto label:after {
  content: ":";
}

.campo_config {
  width: fit-content;
}

p.paragrafo_modal_ajuda {
  font-size: medium;
}

.n_turno_box {
  display: inline-block;
  /*background-color:lightgreen;*/
  font-size: 10px;
}

.inicio_turno_box {
  display: block;
  /*background-color:;*/
}

.fim_turno_box {
  display: block;
  /*background-color:lawngreen;*/
}

.integrante_info_box {
  display: inline-block;
  /*background-color:royalblue;*/
  font-size: 10px;
  padding-left: 10px;
}

.horario_turno_box {
  padding-left: 10px;
  display: inline-block;
  align-items: center;
  font-size: 8px;
}

.vertical-alignment-helper {
  display: table;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.vertical-align-center {
  /* To center vertically */
  display: table-cell;
  vertical-align: middle;
  pointer-events: none;
}

.modal-content {
  /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
  width: inherit;
  max-width: inherit;
  /* For Bootstrap 4 - to avoid the modal window stretching full width */
  height: inherit;
  /* To center horizontally */
  margin: 0 auto;
  pointer-events: all;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
}

.loader_img {
  width: 120px;
  height: 120px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
}

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

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

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

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

@keyframes btn-pisca {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.btn-pisca {
  background-color: #ce300c;
  color: #fff;
  padding: 0.6em 0.8em;
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
  -webkit-animation: btn-pisca 0.9s linear infinite;
  -moz-animation: btn-pisca 0.9s linear infinite;
  -ms-animation: btn-pisca 0.9s linear infinite;
  -o-animation: btn-pisca 0.9s linear infinite;
  animation: btn-pisca 0.9s linear infinite;
}

#tabelaParticipantes > tbody > tr:hover td,
#tabelaParticipantes > tbody > tr:hover th {
  background-color: #e2a2a2 !important;
}

.status_ativo {
  height: 15px;
  margin-bottom: 10px;
  margin-left: 0px;
}

.integranteDatas {
  margin-top: 10px;
  margin-left: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(211, 212, 149);
  background-color: antiquewhite;
  max-width: fit-content;
}

.integranteCategorias {
  margin-top: 10px;
  margin-left: 10px;
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(211, 212, 149);
  background-color: antiquewhite;
  max-width: fit-content;
}

.integrantePostos {
  margin-top: 10px;
  margin-left: 10px;
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(211, 212, 149);
  background-color: antiquewhite;
  max-width: fit-content;
}

.table-auto-width {
  width: auto;
  align-items: center;
}

.nao_some {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 8;
  
}
.nao_some_controles_geracao {
  position: sticky;
  padding-top: 10px;
  top: 110px;
  background-color: #f8f9fa;
  z-index: 3;
  
}
.c_span_atualizando{
  z-index: 9999;
  position: fixed;
}

url(../page_escala_geracao.php)