/* Variáveis CSS para cores e fontes */
:root {
  --primary-color: #d3f43b;
  --background-color: #1f1e24;
  --secondary-background: #2D2B35;
  --text-color: #f0ffffde;
  --input-background: #4F4C5A;
  --font-family: 'Noto Sans', sans-serif;
}

/* Estilos globais */
body {
  margin: 0;
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--text-color);
  overflow-x: hidden;
  height: 100%;
}

body * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* Faz a rolagem suave */
}

::-webkit-scrollbar {
  width: 12px; /* Largura do scroll vertical */
  height: 12px; /* Altura do scroll horizontal */
}

::-webkit-scrollbar-track {
  background: #1f1e24; /* Cor do fundo do track do scroll */
}

::-webkit-scrollbar-thumb {
  background: #2D2B35; /* Cor do scroll */
  border-radius: 10px; /* Arredondamento */
  border: 2px solid #8d8d8d; /* Borda para criar espaço entre o thumb e o track */
}

::-webkit-scrollbar-thumb:hover {
  background: #333; /* Cor ao passar o mouse */
}

.main-login {
    width: 100vw;
    min-height: 100vh;
    background: #1f1e24;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-x: hidden;
    /* Evita rolagem horizontal */
  }
  
  .left-login {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .left-login h1 {
    color: rgb(211, 244, 59);
    font-size: 2.5vw;
    margin-bottom: 20px;
  }
  
  .left-login-image {
    width: 80%;
    max-width: 600px;
    margin-bottom: 20px;
  }
  
  .right-login {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .card-login {
    width: 100%;
    max-width: 400px;
    background: #2D2B35;
    border-radius: 20px;
    padding: 30px 35px;
    box-shadow: 0px 10px 40px #00000056;
}
  
.login-title {
  color: #d3f43b;
  font-weight: 800;
  margin-bottom: 20px;
  font-family: 'Noto Sans', sans-serif;
}
  
  .main-content {
    width: 100vw;
    min-height: 100vh;
    background: #1f1e24;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centraliza verticalmente */
    padding: 20px;
  }
  
  .card-content {
    width: 100%;
    max-width: 1000px;
    background: #2D2B35;
    border-radius: 20px;
    padding: 30px 35px;
    box-shadow: 0px 10px 40px #00000056;
  }
  
  .card-content>h1 {
    color: #d3f43b;
    font-weight: 800;
    margin-bottom: 20px;
  }
  
  .textfield {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 10px 0px;
}
  
  .textfield>input {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 15px;
    background: #4F4C5A;
    color: #f0ffffde;
    font-size: 15pt;
    box-shadow: 0px 10px 40px #00000056;
    outline: none;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
  }
  
  .textfield>input:focus {
    background: #5F5C6A;
  }

  .textfield>label {
    color: #ffffffde;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
  }
  
  .textfield>input::placeholder {
    color: #f0ffff94;
  }
  
  .btn-login {
    width: 100%;
    padding: 16px 0;
    margin-top: 25px;
    border: none;
    border-radius: 8px;
    outline: none;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 3px;
    color: #2b134b;
    background: #d3f43b;
    cursor: pointer;
    box-shadow: 0px 10px 40px -12px #00ff8052;
}
  
  .btn-login:hover {
    background: #c1e232;
    transform: translateY(-2px);
  }
  
  .alert {
    width: 100%;
    padding: 15px;
    margin: 20px 0;
    margin-top: 70px;
    border-radius: 10px;
    font-size: 13pt;
    text-align: center;
    overflow-x: auto;
}
  
  .alert-success {
    background-color: #d3f43b;
    color: #2b134b;
  }
  
  .alert-danger {
    background: #ff4d4d;
    color: #ffffff;
}
  
  .alert-warning {
    background: #ffcc00;
    color: #2b134b;
}
  
  @media only screen and (max-width: 950px) {
  
    .left-login,
    .right-login,
    .card-content {
      width: 100%;
    }
  
    .left-login h1 {
      font-size: 4vw;
    }
  
    .left-login-image {
      width: 60%;
    }
  
    .card-login,
    .card-content {
      width: 90%;
    }
  }
  
  @media only screen and (max-width: 600px) {
  
    .main-login,
    .main-content {
      flex-direction: column;
      padding: 10px;
    }
  
    .left-login,
    .right-login,
    .card-content {
      width: 100%;
    }
  
    .left-login h1 {
      font-size: 5vw;
    }
  
    .left-login-image {
      width: 80%;
    }
  
    .card-login,
    .card-content {
      width: 100%;
    }
  }