:root {
    --preto: #212529;
    --preto_alpha: rgba(33, 37, 41, 80%);
    --branco: #ffffff;
    --branco_alpha: rgba(255, 255, 255, 20%);
    --vermelho: #c4453e;
    --vermelho_hover: #9d3732;
    --vermelho_alpha: rgba(196, 69, 62, 20%);
    --verde: #38be80;
    --roxo: #25074A; 
    --verde_hover: #2d9866;
    --verde_alpha: rgba(56, 190, 128, 20%);
    --azul: #44a6c4;
    --azul_alpha: rgba(68, 166, 196, 20%);
    --azul_escuro: #052340;
    --azul_medio: #1E3A8A;
    --azul_escuro_padrao: #001a35;
    --azul_escuro_hover: #2c4b87;
    --azul_escuro_alpha: rgba(55, 94, 169, 20%);
    --laranja: #f7a523;
    --amarelo: #f1c40f;
    --laranja_alpha: rgba(247, 165, 35, 20%);
    --bg: #f5f6f8;
    --bg_escuro: #f3f6f9;
    --bg_escuro_hover: #e0e3e7;
    --borda: #e9ebec;
    --borda_input: #ced4da;
    --cinza: #a7a7a7;
    --cinza_signup: #F2F4F8;
    --cinza_hover: #e2e2e2;
    --cinza_alpha: rgba(168, 167, 167, 20%);
    --subtexto: #878a99;
    --titulo_modal: #495057;

  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background: var(--azul_medio);
    color: var(--preto);
    height: 100%;
    margin: 0;
  }
  
  body {
    opacity: 0; /* Inicialmente, oculta a página */
    transition: opacity 0.5s; /* Adiciona uma transição suave */
  }
  
  /******************************* GERAL */
  a {
    color: #0461ad !important;
  }
  a:hover {
    text-decoration: underline !important;
  }
  
  .form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.15em;
  }
  .form-check-input:checked {
    background-color: var(--laranja);
    border-color: var(--laranja);
  }
  
  .card_login {
    margin: 0 0 60px 0;
  }
  
  /******************************* TOOLTIP */
  [data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
  }
  
  /* Hide the tooltip content by default */
  [data-tooltip]:before,
  [data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
  }
  
  /* Position tooltip above the element */
  [data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -50px;
    padding: 7px 10px;
    /* width: 160px; */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: var(--preto_alpha);
    /* background-color: hsla(0, 0%, 20%, 0.9); */
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
  }
  
  /* Triangle hack to make tooltip look like a speech bubble */
  [data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid var(--preto_alpha);
    /* border-top: 5px solid hsla(0, 0%, 20%, 0.9); */
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
  }
  
  /* Show tooltip content on hover */
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  
  /******************************* ICONES */
  .ri-eye-fill:before {
    font-size: 0.8rem;
  }
  /******************************* BOTÃO */
  .botao {
    padding: 7.5px 17px !important;
    display: inline-table !important;
    font-weight: 300;
  }

  .botao_azul {
    background: var(--azul);
    color: var(--branco);
  }
  .botao_azul_escuro {
    background: var(--azul_escuro);
    color: var(--branco);
  }
  .botao_azul_escuro:hover {
    background: var(--azul_escuro);
    color: var(--branco);
  }
  .botao_azul_escuro:active {
    background: var(--azul_escuro_hover) !important;
    color: var(--branco) !important;
  }
  
  .botao_verde {
    background: var(--verde);
    color: var(--branco);
  }
  .botao_verde:hover {
    background: var(--verde_hover);
    color: var(--branco);
  }
  .botao_verde:active {
    background: var(--verde_hover) !important;
    color: var(--branco) !important;
  }
  
  .botao_vermelho {
    background: var(--vermelho);
    color: var(--branco);
  }
  .botao_vermelho:hover {
    background: var(--vermelho);
    color: var(--branco);
  }
  .botao_vermelho:active {
    background: var(--vermelho_hover) !important;
    color: var(--branco) !important;
  }
  
  .botao_vermelho_transparente {
    background: var(--branco);
    color: var(--vermelho);
    border: 1px solid var(--vermelho);
  }
  .botao_vermelho_transparente:hover {
    background: var(--vermelho);
    color: var(--branco);
  }
  .botao_vermelho_transparente:active {
    background: var(--vermelho_hover) !important;
    color: var(--branco) !important;
  }
  
  .botao_cinza {
    background: var(--bg_escuro);
    color: var(--preto);
  }
  .botao_cinza:hover {
    background: var(--bg_escuro);
    color: var(--preto);
    
  }

  .botao_branco {
    background: var(--branco);
    color: var(--preto);
    border: 1px solid black;
  }

  .botao_branco:hover {
    background: var(--cinza);
    color: var(--branco);
  }
  
  .spinner-border {
    height: 12px !important;
    width: 12px !important;
    margin: 0 5px 0 0;
    border-width: 2px !important;
  }
  /******************************* FORMULÁRIO */
  .form-control {
    border: 1px solid var(--borda_input);
    padding: 11px;
    height: 37.8px;
  }
  
  .form-control-codigo {
    padding: 11px 0 !important;
  }
  
  .form-control:hover {
    border: 1px solid var(--preto);
  }
  
  .form-control:focus {
    border: 1px solid var(--preto) !important;
  }
  
  /* VALIDAÇÃO */
  .invalid-feedback {
    color: var(--vermelho);
  }
  
  .form-control.is-invalid,
  .was-validated .form-control:invalid {
    border-color: var(--vermelho);
  }
  
  .form-control.is-invalid,
  .was-validated .form-control:invalid,
  .form-control.is-valid,
  .was-validated .form-control:valid {
    background-image: none !important;
  }
  
  .form-check-input.is-valid:checked,
  .was-validated .form-check-input:valid:checked {
    background-color: var(--verde) !important;
    border-color: var(--verde) !important;
  }
  
  .form-check-input.is-valid,
  .was-validated .form-check-input:valid,
  .form-check-input.is-valid ~ .form-check-label,
  .was-validated .form-check-input:valid ~ .form-check-label,
  .form-control.is-valid,
  .was-validated .form-control:valid {
    border-color: var(--borda_input) !important;
    color: var(--preto);
  }
  
  .alert-danger {
    background: var(--vermelho_alpha) !important;
    color: var(--vermelho);
    border-color: transparent !important;
  }
  
  .alert-warning {
    background: var(--laranja_alpha) !important;
    color: var(--laranja);
    border-color: transparent !important;
  }
  /******************************* LOGIN */
  .logo_login {
    & span {
      color: var(--branco);
      margin: 0;
      font-family: Montserrat, sans-serif;
      font-size: 34px;
      font-weight: 600;
    }
  
    & p {
      color: var(--branco);
      margin: 0;
      letter-spacing: 0.18rem;
      margin-top: -8px;
      margin-left: 5px;
    }
  }
  
  .form_login {
    & a:hover {
      text-decoration: underline;
    }
  }
  
  /******************************* FOOTER LOGIN */
  .footer {
    height: auto;
    background-color: var(--azul_escuro);
    color: #fff; /* Cor do texto */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    & p {
      margin: 10px 0 0 0;
      color: var(--branco) !important;
    }
  }
  
  /******************************* CRITÉRIO SENHA */
  .error {
    display: none !important;
  }
  
  .btn-primary {
    background-color: #fa1954;
    border: 0;
    margin: 10px 0;
  }
  .btn-primary:hover {
    background-color: #db053d;
  }
  
  .form-group.error input {
    border-color: #ee4141;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 8px rgba(238, 65, 65, 0.4);
  }
  .form-group.error label.error {
    margin-top: 5px;
    color: #ee4141;
  }
  
  #password-info {
    margin: 10px 0;
    overflow: hidden;
    /* text-shadow: 0 1px 0 var(--branco); */
  }
  #password-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #password-info ul li {
    padding: 2px 10px 0px 30px;
    margin-bottom: 10px;
    /* margin-bottom: 1px; */
    background: var(--branco);
    font-size: 13px;
    transition: 250ms ease;
    position: relative;
  }
  #password-info ul li .icon-container {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cinza);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    text-align: center;
  }
  #password-info ul li .icon-container .fa {
    color: var(--branco);
    font-size: 0.7rem;
    padding-top: 0px;
    position: relative;
    top: 1px;
  }
  #password-info ul li .tip {
    color: #5ca6d5;
    text-decoration: underline;
  }
  #password-info ul li.valid {
    /* color: var(--verde); */
  }
  #password-info ul li.valid .icon-container {
    background-color: var(--verde);
  }
  #password-info ul li span.invalid {
    color: var(--vermelho);
  }
  .hide {
    display: none;
  }
  
  /******************************* LEGENDA ARMÁRIO */
  .icone_legenda_armarios {
    & .icone_legenda_armarios span {
      background: red !important;
    }
  }
  
  .wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .content {
    flex: 1;
  }

  .title-card-login {
    font-size: 17px;
    color: #001A35;
  }

  .subtitle-login {
    font-size: 10px;
  }

  .footer_user {
    text-align: center;
    padding: 20px;
  
    & img {
      height: 48px;
    }
    & p {
      font-size: 12px;
      font-weight: 300;
      margin-bottom: 0px;
    }
  }
  
  @media (max-height: 1200px) {
    .footer_user {
      /* position: relative !important; */
    }
  }

  .footer {
    padding: 13px calc(1.5rem * 0.5) !important;
  }

  .botao_azul_escuro_transparente {
    background: var(--branco);
    color: var(--azul_escuro_padrao);
    border: 1px solid var(--azul_escuro_padrao);
  }

  .botao_azul_escuro_transparente:hover {
    background: var(--azul_escuro_padrao);
    color: var(--branco);
  }
  .botao_azul_escuro_transparente:active {
    background: var(--azul_escuro_padrao) !important;
    color: var(--branco) !important;
  }

  /******************************* LOGIN */

.logo_login {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  & p {
    text-transform: uppercase;
    font-size: 0.625rem;
    background: var(--azul_escuro);
    color: #fff;
    padding: 5px 20px;
    margin-top: 15px;
    border-radius: 3px;
    width: 170px;
  }
}

@media (max-width: 768px) {
  .logo_login {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.card_login_admin {
  max-width: 387px;
  width: 100%;
  margin: 20px auto 80px;
}

.header_card_login {
  & h5 {
    color: var(--azul_escuro_padrao) !important;
  }

  & p {
    color: var(--subtexto) !important;
    font-weight: 400 !important;
  }
}

.signin-other-title .title {
  display: inline-block;
  position: relative;
  z-index: 9;
  background-color: var(--branco);
  padding: 2px 16px;
  color: var(--subtexto) !important;
}

.card_login {
  max-width: 450px;
  width: 100%;
  margin: 80px auto 60px;
}

.footer_user {
  text-align: center;
  padding: 20px;

  & img {
    height: 48px;
  }
  & p {
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 0px;
  }
}

@media (max-height: 1200px) {
  .footer_user {
    /* position: relative !important; */
  }
}

.fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fade.show {
  opacity: 1;
}