html {
    height: 100%;
  }
  body {
    margin:0;
    padding:0;
    font-family: sans-serif;
    background: linear-gradient(#141e30, #243b55);
  }
  
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
  
  
    /* background: rgba(0,0,0,.5); */
    background: rgb(0 0 0 / 77%);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.6);
    border-radius: 10px;
  }
  
  .login-box h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
  }
  
  .login-box .user-box {
    position: relative;
  }
  
  .login-box .user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
  }
  .login-box .user-box label {
    position: absolute;
    top:0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
  }
  
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #03e9f4;
    font-size: 12px;
  }
  
  .login-box form a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #03e9f4;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 40px;
    letter-spacing: 4px
  }
  
  .login-box a:hover {
    background: #03e9f4;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 100px #03e9f4;
  }
  
  .login-box a span {
    position: absolute;
    display: block;
  }
  
  .login-box a span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #03e9f4);
    animation: btn-anim1 1s linear infinite;
  }
  
  @keyframes btn-anim1 {
    0% {
      left: -100%;
    }
    50%,100% {
      left: 100%;
    }
  }
  
  .login-box a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #03e9f4);
    animation: btn-anim2 1s linear infinite;
    animation-delay: .25s
  }
  
  @keyframes btn-anim2 {
    0% {
      top: -100%;
    }
    50%,100% {
      top: 100%;
    }
  }
  
  .login-box a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #03e9f4);
    animation: btn-anim3 1s linear infinite;
    animation-delay: .5s
  }
  
  @keyframes btn-anim3 {
    0% {
      right: -100%;
    }
    50%,100% {
      right: 100%;
    }
  }
  
  .login-box a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #03e9f4);
    animation: btn-anim4 1s linear infinite;
    animation-delay: .75s
  }
  
  @keyframes btn-anim4 {
    0% {
      bottom: -100%;
    }
    50%,100% {
      bottom: 100%;
    }
  }
  
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        height: 100vh;
        overflow: hidden;
      }
  
      #background {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
    }
  
      @keyframes gradientAnimation {
        0% {
          background-position: 0% 0%;
        }
        100% {
          background-position: 100% 100%;
        }
      }
  
      #background::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url("../img/siged_logo.png");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        filter: blur(10px);
    }
    
    #login-container video {
        width: 50%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        right: 0;
        top: 0;
    }
  
      #login-form {
        max-width: 400px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
      }
  
      input {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
      }
  
      button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
  
      button:hover {
        background-color: #45a049;
      }
  
  

  
#login-container video{
  width: 100%;
  height: 100%;
  object-fit: cover;

}

label:not(.form-check-label):not(.custom-file-label) {
  color: white;
}

#recuperarSenha{
  position: relative;
  display: inline-block;
  padding: 0px;
  color: whitesmoke;
  font-size: 10px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 0px;
  letter-spacing: 4px;
}

.social-auth-links .btn {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background-color: #3d997069; /* Cor vermelha do botão */
border: none;
border-radius: 5px;
color: white;
text-align: center;
font-size: 16px;
cursor: pointer;
}

.social-auth-links .btn img {
width: 24px; /* Tamanho do ícone */
height: 24px;
margin-right: 10px; /* Espaço entre o ícone e o texto */
}

.social-auth-links .btn:hover {
background-color: #c9302c; /* Cor do botão ao passar o mouse */
}

.container {
          position: relative;
          display: inline-block;
          font-size: 2em; /* Ajuste o tamanho da fonte conforme necessário */
      }
      .container::before,
      .container::after {
          content: '⌜';
          position: absolute;
          font-size: 3em; /* Ajuste o tamanho dos símbolos conforme necessário */
      }
      .container::before {
          top: -0.35em; /* Ajuste a posição vertical para aproximar do texto */
          left: 0em; /* Ajuste a posição horizontal para aproximar do texto */
      }
      .container::after {
          content: '⌟';
          bottom: -0.3em; /* Ajuste a posição vertical para aproximar do texto */
          right: 0em; /* Ajuste a posição horizontal para aproximar do texto */
      }


    /* MEDIA QUERIES para Mobile */
    @media (max-width: 767.98px) { /* Para telas pequenas e extra-pequenas (<= 768px) */
        /* Oculta o container de fundo do desktop */
        #background-desktop {
            display: none;
        }

        /* Oculta o wrapper de login do desktop */
        #login-wrapper-desktop {
            display: none;
        }

        /* Novo container para o layout mobile */
        body {
            display: flex; /* Transforma o body em flex container */
            justify-content: center; /* Centraliza horizontalmente */
            align-items: center; /* Centraliza verticalmente */
            min-height: 100vh; /* Garante que ocupa a altura total da viewport */
            flex-direction: column; /* Garante que o conteúdo não fique espremido */
            position: relative; /* Para o vídeo de fundo */
            background: #000; /* Fundo fallback se o vídeo não carregar */
            overflow: hidden; /* Evita scroll indesejado */
        }

        /* O vídeo de fundo para mobile (agora no body ou em um container que cobre tudo) */
        .bg_video_mobile {
          position: absolute;
          top: 50%;
          left: 50%;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          z-index: -2;
          transform: translateX(-50%) translateY(-50%);
          object-fit: cover;
          display: block; /* Garante que o vídeo mobile é exibido */
        }

        #gradient-overlay-mobile {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
          z-index: -1;
          display: block; /* Garante que o overlay mobile é exibido */
        }


        /* Estilos para o login-box no mobile */
        #login {
            position: relative; /* Garante que fique no fluxo e acima do vídeo */
            margin: auto; /* Centraliza a caixa de login se não for flex */
            width: 90%; /* Ocupa 90% da largura em mobile */
            max-width: 360px; /* Mas não mais que 360px */
            /* Remova as propriedades de posicionamento absoluto do desktop aqui se estiverem causando problemas */
            transform: none; /* Remove transformações que podem atrapalhar */
            left: auto;
            right: auto;
            top: -100px;
            bottom: auto;
        }

        #background::before {
          height: 0%;
      }
    }

.login-footer {
    position: fixed; /* Fixa o rodapé na tela */
    bottom: 0;      /* Alinha na parte inferior */
    width: 100%;    /* Ocupa a largura total */
    text-align: center; /* Centraliza o texto */
    padding: 10px 0; /* Adiciona um pouco de padding */
    background-color: rgba(0, 0, 0, 0.7); /* Adicione um fundo para ele se destacar */
    color: #ccc;
    font-size: 0.85em;
    z-index: 1000; /* Garante que ele fique acima de outros elementos */
}

.siged{
   font-size: 0.3em;
}