/* Estilos globais */
* {
  margin: 0;
  /* Remove margens padrao */
  padding: 0;
  /* Remove preenchimentos padrao */
  box-sizing: border-box;
  /* Inclui bordas e padding no calculo de largura/altura */
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Estilo específico para a área de login */
.body_login {
  background-color: #c2c2c2;
  /* Cor de fundo do login */
  font-family: "Roboto", sans-serif;
  /* Fonte específica */
  font-weight: 300;
  /* Peso da fonte */
  font-style: italic;
  /* Estilo itálico */
}


/* Estilo responsivo para telas pequenas */
@media (max-width: 768px) {
  .body_login {
    padding: 10px;
    /* Adiciona espaço lateral */
  }

  .form_login {
    width: 100%;
    /* Largura total nos dispositivos menores */
  }

  .container2_login {
    padding: 5% 10px;
    /* Ajuste do preenchimento para dispositivos menores */
  }

  .form_login .forgot-password {
    font-size: 12px;
    /* Aumenta a legibilidade */
  }

  .logo_senai_login {
    width: 80%;
    /* Largura da logo */
    margin-top: 30px;
  }

}

.logo_senai_login {
  width: 80%;
  /* Largura da logo */
}

.esqueceu_senha_login {
  font-size: 16px;
  /* Tamanho da fonte */
  color: rgba(0, 0, 0, 0.7);
  /* Cor do texto */
  text-decoration: none;
  /* Sem sublinhado */
}

.esqueceu_senha_login:hover {
  color: #FC0405;
  /* Cor ao passar o mouse */
}

/* Containers do formulário de login */
.container1_login {
  display: flex;
  /* Flexbox para alinhamento */
  justify-content: center;
  /* Alinha ao centro */
}

.container2_login {
  margin-top: 7%;
  justify-content: center;
  /* Alinha ao centro */
  text-align: center;
  /* Centraliza texto */
  max-width: 450px;
  /* Largura máxima */
  width: 100%;
  /* Largura total */
  background: #f3f3f3;
  /* Cor de fundo */
  border-radius: 40px;
  /* Bordas arredondadas */
  padding: 4% 35px;
  /* Preenchimento interno */
  border: 1px solid #171717;
  /* Borda */
  box-shadow: 10px 10px 0px #666666;
  /* Sombra */
}

/* Estilos para o formulário de login */
.form_login {
  margin-top: 5px;
  /* Margem superior */
  display: flex;
  /* Flexbox para layout */
  flex-direction: column;
  /* Direção da coluna */
  align-items: center;
  /* Alinha itens ao centro */
  width: 100%;
  /* Largura total */
  background-color: transparent;
  /* Fundo transparente */
  box-shadow: none;
}

.form_login .input {
  width: 90%;
  /* Largura do campo */
  background: #FFFFFF;
  /* Cor de fundo do campo */
  border: none;
  /* Sem borda */
  padding: 15px;
  /* Preenchimento */
  border-radius: 20px;
  /* Bordas arredondadas */
  margin-top: 35px;
  /* Margem superior */
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.5);
  /* Sombra */
  border-inline: 2px solid transparent;
  /* Borda inline transparente */
}

/* Estilos para o placeholder */
.form_login .input::-moz-placeholder {
  color: #AAAAAA;
  /* Cor do placeholder no Firefox */
}

.form_login .input::placeholder {
  color: #AAAAAA;
  /* Cor do placeholder em outros navegadores */
}

/* Estilos para o campo em foco */
.form_login .input:focus {
  outline: none;
  /* Sem contorno */
  border-inline: 2px solid #696969;
  /* Borda ao focar */
}

/* Link de senha esquecida */
.form_login .forgot-password {
  display: block;
  /* Exibe como bloco */
  margin-top: 10px;
  /* Margem superior */
  margin-left: 10px;
  /* Margem esquerda */
}

.form_login .forgot-password a {
  font-size: 11px;
  /* Tamanho da fonte */
  color: #FC0405;
  /* Cor do texto */
  text-decoration: none;
  /* Sem sublinhado */
}

/*uma parte do esqueceu senha*/
.login-box input[type="submit"] {
  margin-left: 22%;
  padding: 10px;
  background-color: #b80202;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  width: 50%;
}

form input[type="submit"] {
  padding: 10px;
  background-color: #b80202;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  width: 60%;
}

.erro {
  color: red;
  font-weight: bold;
  margin-top: 10px;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
  margin: 0;
}

.login-box h2 {
  margin: 0 0 20px 0;
  text-align: center;
}

.login-box form {
  display: flex;
  flex-direction: column;
}

.login-box input[type="text"],
.login-box input[type="password"] {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}


.login-box input[type="submit"]:hover {
  background-color: #000000;
}

/* Estilos do botão de login */
.form_login .login-button {
  display: block;
  /* Exibe como bloco */
  width: 90%;
  /* Largura do botão */
  background: linear-gradient(45deg, #f53e2e 0%, #FF3D3D 100%);
  /* Gradiente de fundo */
  color: #FFFFFF;
  /* Cor do texto */
  padding-block: 15px;
  /* Preenchimento vertical */
  margin: 60px 0;
  /* Margens superior e inferior */
  border-radius: 35px;
  /* Bordas arredondadas */
  border: none;
  /* Sem borda */
  transition: all 0.2s ease-in-out;
  /* tansição suave */
  cursor: pointer;
  /* Cursor de pointer */
}

.form_login .login-button:hover {
  transform: scale(1.03);
  /* Efeito de aumento ao passar o mouse */
  background: linear-gradient(45deg, #e44133 0%, #FF2B2B 100%);
  /* Gradiente em hover */
}

.form_login .login-button:active {
  transform: scale(0.95);
  /* Efeito de redução ao clicar */
}

/* Estilos para o cabesalho e formulario de cadastro */
h1 {
  color: black;
  /* Cor do texto */
  padding: 30px;
  text-align: center;
  justify-content: center;
  /* Preenchimento */
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #dddddd;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.form-btn-pendente{
  background-color: transparent;
  padding: 5px;
  width: 150px;
}

/* Estilos para rotulos no formulario */
form label {
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

/* Estilos para entradas de texto no formulario */
form input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
}

form input:focus {
  border-color: #000000;
  /* Cor da borda ao focar */
  outline: none;
  /* Sem contorno */
}

/* Estilos para botoes no formulario */
form button {
  padding: 10px;
  background-color: #b80202;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin-left: -10px;
  margin-right: -10px;
}

button {
  padding: 10px;
  background-color: #b80202;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #000000;
}

form button:hover {
  background-color: #000000;
  /* Cor de fundo ao passar o mouse */
}

/* Estilos para select */
select {
  width: 100%;
  /* Largura total */
  padding: 10px;
  /* Preenchimento */
  margin-bottom: 20px;
  /* Margem inferior */
  border: 1px solid #ccc;
  /* Borda */
  border-radius: 4px;
  /* Bordas arredondadas */
  font-size: 16px;
  /* Tamanho da fonte */
  background-color: white;
  /* Cor de fundo */
  color: #333;
  /* Cor do texto */
  cursor: pointer;
  /* Cursor de pointer */
  transition: 'border-color' 0.3s ease;
  /* transição de cor da borda */
}

@media (max-width: 768px) {
  .table_funcionarios {
    display: block;
  }

  .table_funcionarios tbody tr td:nth-child(1):before {
    content: "Nome: ";
  }

  .table_funcionarios tbody tr td:nth-child(2):before {
    content: "E-mail: ";
  }

  .table_funcionarios tbody tr td:nth-child(3):before {
    content: "Cargo: ";
  }

  .table_funcionarios tbody tr td:nth-child(4):before {
    content: "Situação: ";
  }

}

select:focus {
  border-color: #000000;
  /* Cor da borda ao focar */
  outline: none;
  /* Sem contorno */
}

select option {
  padding: 10px;
  /* Preenchimento */
  background-color: white;
  /* Cor de fundo */
  color: #333;
  /* Cor do texto */
}



.close-btn {
  display: none;
  /* Oculta por padrão */
}


/* Estilos do menu na sidebar */
.menu {
  width: 100%;
  /* Largura total */
  flex-grow: 1;
  /* Cresce para ocupar espaço */
}

.menu ul {
  list-style: none;
  /* Remove marcadores */
  padding: 0;
  /* Remove preenchimento */
}

/* Estilo dos itens do menu */
.menu-item {
  width: 100%;
  /* Largura total */
  padding: 15px;
  /* Preenchimento */
  display: flex;
  /* Flexbox para alinhamento */
  align-items: center;
  /* Alinha itens ao centro */
  color: #ffffff;
  /* Cor do texto */
  cursor: pointer;
  /* Cursor de pointer */
  transition: 'background' 0.3s ease;
  /* transição suave */
}

.menu-item:hover,
.menu-item.active {
  background-color: #ff0100;
  /* Cor ao passar o mouse ou ativo */
  color: #ffffff;
  /* Cor do texto */
}

/* Estilo do icone no menu */
.menu-item .icon {
  font-size: 18px;
  /* Tamanho do icone */
  margin-right: 10px;
  /* Margem direita */
}

/* Estilo do texto no menu */
.menu-item .text {
  font-size: 16px;
  /* Tamanho do texto */
}

/* Estilo da seta do menu */
.menu-item .arrow {
  margin-left: auto;
  /* Margem automatica para alinhar para  direita */
  transition: 'transform' 0.3s ease;
  /* transição suave */
}

.arrow.rotate {
  transform: rotate(180deg);
  /* Rotaciona a seta */
}

/* Estilo do submenu */
.submenu {
  list-style-type: none;
  /* Remove marcadores */
  padding-left: 20px;
  /* Preenchimento para esquerda */
  overflow: hidden;
  /* Esconde excesso */
  max-height: 0;
  /* Altura maxima inicial */
  transition: 'max-height' 0.5s ease;
  /* transição suave */
}

.submenu.open {
  max-height: 500px;
  /* Altura maxima ao abrir */
  transition: 'max-height' 0.5s ease;
  /* transição suave */
}

/* Estilo dos itens do submenu */
.menu-subitem {
  padding: 10px;
  /* Preenchimento */
  color: #ffffff;
  /* Cor do texto */
  cursor: pointer;
  /* Cursor de pointer */
  transition: 'background' 0.3s ease;
  /* transição suave */
}

.menu-subitem:hover {
  background-color: #ff0100;
  /* Cor ao passar o mouse */
}

/* Estilo do conteudo principal */
.content {
  display: flex;
  justify-content: center;
  align-items: center; /* Adicionado para centralizar verticalmente */
  flex-direction: column;
  margin: auto;
  min-height: 100vh; /* Use min-height ao invés de height */
  color: white;
}

/* Estilo do botão de logout */
.logout {
  width: 100%;
  /* Largura total */
  margin-bottom: -15px;
  /* Margem inferior */
}

.logout ul {
  list-style: none;
  /* Remove marcadores */
  padding: 0;
  /* Remove preenchimento */
}

/* Estilo dos itens de logout */
.menu-item {
  padding: 15px;
  /* Preenchimento */
  display: flex;
  /* Flexbox para alinhamento */
  align-items: center;
  /* Alinha itens ao centro */
  color: #ffffff;
  /* Cor do texto */
  cursor: pointer;
  /* Cursor de pointer */
  transition: 'background' 0.3s ease;
  /* transição suave */
}

.menu-item:hover {
  background-color: #ff0000;
  /* Cor ao passar o mouse */
}

/* Estilo do icone de logout */
.logout .icon {
  font-size: 18px;
  /* Tamanho do icone */
  margin-right: 10px;
  /* Margem direita */
}

/* Estilo do botão de sair */
.sair {
  display: flex;
  /* Flexbox para alinhamento */
  align-items: center;
  /* Alinha itens ao centro */
  cursor: pointer;
  /* Cursor de pointer */
  padding: 10px;
  /* Preenchimento */
  background: transparent;
  /* Fundo transparente */
  border: none;
  /* Sem borda */
  transition: 'background' 0.3s;
  /* transição suave */
}

/* Estilo do icone de sair */
.icon_sair {
  margin-right: 8px;
  /* Margem direita */
  color: #000;
  /* Cor do icone */
}

/* Estilo para a seção de consultar turmas */
.content-consultar-turmas {
  display: flex;
  /* Flexbox para layout */
  flex-direction: column;
  /* direção da coluna */
  width: 100%;
  /* Largura total */
  max-width: 1300px;
  /* Largura maxima */
  margin-left: 140px;
  /* Margem esquerda */
  background-color: transparent;
  /* Fundo transparente */
  padding: 20px;
}

/* Estilo para a seção de consultar alunos */
.content-consultar-alunos {
  display: flex;
  /* Flexbox para layout */
  flex-direction: column;
  /* direção da coluna */
  width: 100%;
  /* Largura total */
  max-width: 1300px;
  /* Largura maxima */
  margin-left: 140px;
  /* Margem esquerda */
  background-color: transparent;
  /* Fundo transparente */
  padding: 20px;
}

/* Estilo do corpo da turma */
.body_turma {
  display: flex;
  /* Flexbox para layout */
  flex-direction: column;
  /* direção da coluna */
  align-items: center;
  /* Alinha itens ao centro */
  justify-content: center;
  /* Justifica ao centro */
  height: 100vh;
  /* Altura da tela */
  font-family: Arial, sans-serif;
  /* Fonte padrao */
  background-color: #ebeae9;
  /* Cor de fundo */
  color: #ffffff;
  /* Cor do texto */
}


/* .table-responsive {
    overflow-x: auto; /* Permite rolagem horizontal */
/* Estilo da tabela responsiva */
.table-responsive {
  overflow-x: auto;
  margin: 20px 0;
}

.table-logs {
  width: 800px;
}


.table-pendentes {
  width: 100%;
  border-collapse: collapse;
}

.table-Turmas {
  width: 100%;
  /* Ajusta para 100% da largura disponível */
  border-collapse: collapse;
}

table {
  width: 110%;
  /* Ajusta a largura para 100% */
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  /* Preenchimento das células */
  text-align: center;
  /* Alinhamento central */
  word-wrap: break-word;
  /* Quebra palavras longas */
  vertical-align: middle;
  /* Alinhamento vertical */
  font-size: 16px;
  /* Tamanho da fonte */
}



tr {
  background-color: #000;
  
  /* Cor de fundo das linhas */
}

tr:nth-child(even) {
  background-color: #363636;
  /* Cor de fundo para linhas pares */
}

th {
  background-color: #e91414;
  /* Cor de fundo do cabeçalho */
  color: #fff;
  /* Cor do texto do cabeçalho */
  padding: 10px;
}

.table-title {
  text-align: center;
  /* Centraliza o título */
  margin-bottom: 20px;
  /* Espaçamento abaixo do título */
  font-size: 24px;
  /* Tamanho da fonte do título */
  color: #000;
  /* Cor do título */
}

/* Responsividade */
@media (max-width: 768px) {
  .table-title {
    font-size: 20px;
    /* Tamanho da fonte do título em dispositivos móveis */
  }
}

/* Responsividade */
/* Responsividade */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    /* Permite rolagem horizontal */
  }

  table {
    /* Exibe a tabela como bloco */
    width: 100%;
    /* Largura total */
    border: none;
    /* Remove bordas */
  }

  tr {
    display: block;
    /* Cada linha se torna um bloco */
    margin-bottom: 15px;
    /* Espaçamento entre os "cartões" */
    background-color: #363636;
    /* Cor de fundo */
    padding: 10px;
    /* Preenchimento */
    border-radius: 5px;
    /* Bordas arredondadas */
  }

  th,
  td {
    display: block;
    /* Exibe como bloco */
    text-align: left;
    /* Alinhamento à esquerda */
    padding: 5px;
    /* Preenchimento */
    border: none;
    /* Remove bordas */
  }

  th {
    font-weight: bold;
    /* Destaca o título */
    color: #e91414;
    /* Cor do texto do cabeçalho */
  }

  td {
    color: #fff;
    /* Cor do texto das células */
  }

  .table-title {
    font-size: 20px;
    /* Tamanho da fonte do título em dispositivos móveis */
  }
}

@media (max-width: 768px) {
  .table-Turmas {
    display: block;
    /* Permite que a tabela se comporte como um bloco */
    overflow-x: auto;
    /* Permite rolagem horizontal */

  }
  thead {
    display: none;
    /* Esconde o cabeçalho para melhor apresentação */
  }

  .table-turmas tbody tr td:nth-child(1):before {
    content: "Turma: ";
  }

  .table-turmas tbody tr td:nth-child(2):before {
    content: "Situação: ";
  }}
/* Estilos gerais para botões na tabela */
.btn {
  padding: 10px 15px;
  /* Preenchimento ajustado */
  border: none;
  /* Sem borda */
  border-radius: 4px;
  /* Bordas arredondadas */
  cursor: pointer;
  /* Cursor de pointer */
  color: #ffffff;
  /* Cor do texto */
  text-decoration: none;
  /* Sem sublinhado */
  font-size: 14px;
  /* Tamanho da fonte */
  display: inline-block;
  /* Para que funcione bem com margens */
  transition: 'background-color' 0.3s, 'transform' 0.2s;
  /* Transições suaves */
}

/* Estilos para botões inativos */
.btn-inactive {
  background-color: #dc3545;
  /* Cor vermelha */
  margin-left: 10px;
}

.btn-inactive:hover {
  background-color: #c82333;
  /* Tom mais escuro ao passar o mouse */
}

/* Estilos para botões de alerta */
.btn-warning {
  background-color: #ffc107;
  /* Cor amarela */
  color: #212529;
  /* Cor do texto */
  margin-right: 3px;
}

.btn-warning:hover {
  background-color: #e0a800;
  /* Tom mais escuro ao passar o mouse */
}

/* Responsividade */
@media (max-width: 768px) {
  .btn {
    padding: 10px 10px;
    /* Botões ocupam a largura total em dispositivos menores */
    margin-bottom: 10px;
    /* Margem inferior para espaçamento */
  }
  /* Ajustes nos tamanhos dos textos */
  th,
  td {
    font-size: 12px;
    /* Tamanho da fonte reduzido */
  }
}

.botao_aluno {
    padding: 10px 1px; /* Botões ocupam a largura total em dispositivos menores */
    margin-bottom: 10px; /* Margem inferior para espaçamento */
    font-size: 14px; /* Tamanho da fonte padrão */
}

@media (max-width: 768px) {
    .botao_aluno {
        width: 100%; /* Faz os botões ocuparem toda a largura em dispositivos menores */
    }
    th,
    td {
        font-size: 12px; /* Tamanho da fonte reduzido */
    }
}



/* Estilos para a paginaçao */
.pagination {
  margin-top: 20px;
  /* Margem superior */
}

.pagina {
  padding: 10px;
  /* Preenchimento */
  margin-right: 5px;
  /* Margem direita */
  background-color: #ff6347;
  /* Cor de fundo */
  color: #ffffff;
  /* Cor do texto */
  text-decoration: none;
  /* Sem sublinhado */
  border-radius: 5px;
  /* Bordas arredondadas */
}

.pagina:hover {
  background-color: #ff0100;
  /* Cor ao passar o mouse */
}

/* Estilos gerais de paginaçao */
.pagination {
  margin-top: 20px;
  /* Margem superior */
  display: flex;
  /* Flexbox para layout */
  justify-content: center;
  /* Justifica ao centro */
  flex-wrap: wrap;
  /* Permite quebra de linha */
}

/* Estilos para links de pagina */
.pagination a {
  margin: 0 5px;
  /* Margens laterais */
  width: 30px;
  /* Largura do botão */
  height: 30px;
  /* Altura do botão */
  background-color: #fd3b35;
  /* Cor de fundo */
  color: white;
  /* Cor do texto */
  text-decoration: none;
  /* Sem sublinhado */
  border-radius: 50%;
  /* Bordas arredondadas */
  display: flex;
  /* Flexbox para alinhamento */
  align-items: center;
  /* Alinha itens ao centro */
  justify-content: center;
  /* Justifica ao centro */
  font-weight: bold;
  /* Negrito */
  transition: 'background-color 0.3s', 'transform 0.2s';
  /* transição suaves */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Estilo para links de pagina ao passar o mouse */
.pagination a:hover {
  background-color: #ff0100;
  /* Muda a cor de fundo para vermelho ao passar o mouse */
  transform: scale(1.1);
  /* Aumenta o tamanho do botão em 10% ao passar o mouse */
}

/* Estilo para o item ativo na paginaçao */
.pagination .active {
  background-color: #e91414;
  /* Cor de fundo do botão ativo */
  color: white;
  /* Cor do texto do botão ativo */
  pointer-events: none;
  /* Desabilita interação com o botão ativo */
  box-shadow: none;
  /* Remove a sombra do botão ativo */
  width: 30px;
  /* Largura do botão ativo */
  height: 30px;
  /* Altura do botão ativo */
  display: flex;
  /* Usado para flexbox */
  align-items: center;
  /* Alinha itens verticalmente ao centro */
  justify-content: center;
  /* Alinha itens horizontalmente ao centro */
  border-radius: 50%;
  /* Faz o botão ter bordas arredondadas, criando um circulo */
}

/* Estilo para o botão ativo ao passar o mouse */
.pagination .active:hover {
  background-color: #e91414;
  /* Mantem a mesma cor ao passar o mouse sobre o botão ativo */
}

/* Estilo para o botão de editar com aviso */

/* Estilo geral para botoes ao passar o mouse ou focar */
.btn:hover,
.btn:focus {
  opacity: 0.8;
  /* Reduz a opacidade em 20% ao passar o mouse ou focar */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
  /* Adiciona uma sombra azul ao redor do botão */
}

.btn-danger {
  background-color: #dc3545;
  color: #fff;

}

/* Alert Cadastro Sucesso ou Erro*/
.message {
  padding: 15px;
  margin: 20px 0;
  border-radius: 5px;
  font-size: 16px;
}

.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* FIM DO ALERT  */

/* BOTAO EDITAR TURMA */
.button-box {
  padding: 15px;
  /* Espaçamento interno da caixa */
  border: 1px solid #ccc;
  /* Borda da caixa */
  border-radius: 5px;
  /* Bordas arredondadas */
  background-color: #f9f9f9;
  /* Cor de fundo da caixa */
  margin-top: 15px;
  /* Espaço acima da caixa */
}

.button-container {
  display: flex;
  /* Alinha os itens em linha */
  gap: 10px;
  /* Espaçamento entre os botões */
  justify-content: center;
  /* Centraliza os botões */
}

.btn-save,
.btn-return {
  padding: 10px 20px;
  /* Espaçamento interno */
  border: none;
  /* Remove a borda padrão */
  border-radius: 5px;
  /* Bordas arredondadas */
  cursor: pointer;
  /* Altera o cursor ao passar o mouse */
  text-align: center;
  /* Centraliza o texto */
  font-size: 16px;
  /* Tamanho da fonte */
  flex: 1;
  /* Faz os botões ocuparem o mesmo espaço */
  min-width: 120px;
  /* Largura mínima para os botões */
}

.btn-save {
  background-color: #4CAF50;
  /* Verde */
  color: white;
  /* Texto branco */
}

.btn-return {
  background-color: #f44336;
  /* Vermelho */
  color: white;
  /* Texto branco */
  margin-bottom: auto;
  /* Empurra o botão para baixo */
  text-decoration: none;
}

.btn-save:hover,
.btn-return:hover {
  background-color: #68ad78;
  opacity: 0.9;
  /* Efeito de hover */
}

.btn-return:hover {
  background-color: #e57373;
  /* Vermelho mais claro no hover */
}

/* Responsividade */
@media (max-width: 600px) {
  .button-container {
    flex-direction: column;
    /* Empilha os botões em telas pequenas */
    gap: 5px;
    /* Espaçamento reduzido entre os botões */
  }

  .btn-save,
  .btn-return {
    width: 100%;
    /* Faz os botões ocuparem toda a largura */
  }
}

/* FIM DO BOTAO EDITAR TURMA */
h1 {
  text-align: center;
}

body {
  margin: 0;
  /* Remove margens padrão */
}

.container {
  display: flex;
  height: 100vh;
  transition: margin-left 0.3s ease;
  /* Transição suave */
}

.sidebar {
  position: fixed;
  /* Fixa a sidebar */
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: #1c1c1c;
  color: #fff;
  padding: 15px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  /* Permite rolagem */
  z-index: 1000;
  /* Mantém a sidebar acima de outros elementos */
}


.sidebar.open {
  transform: translateX(0);
  /* Mostra a sidebar quando aberta */
}

.open-btn {
  position: fixed;
  /* Botão para abrir */
  top: 20px;
  left: 20px;
  background-color: #1c1c1c;
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  z-index: 1001;
}

.close-btn {
  margin-bottom: 10px;
  /* Espaçamento abaixo do botão */
  background-color: transparent;
  /* Para deixar o fundo transparente */
  border: none;
  /* Remove borda */
  color: #fff;
  /* Cor do ícone */
  font-size: 20px;
  /* Tamanho do ícone */
  cursor: pointer;
  /* Muda o cursor para pointer */
  z-index: 1001;
  /* Garante que o botão fique acima de outros elementos */
}

@media (min-width: 769px) {
  .open-btn {
    display: none;
    /* Esconde o botão de abrir em telas grandes */
  }
}

/* Estilos responsivos */
@media (max-width: 768px) {
  .close-btn {
    display: none;
    /* Esconde o botão de fechar inicialmente */
  }

  .sidebar {
    width: 200px;
    /* Largura total */
    height: 100%;
    /* Altura total */
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
    /* Mostra quando aberta */
  }

  .container {
    margin-left: 0;
    /* Remove margem no mobile */
  }
}

.sidebar h2 {
  text-align: center;
  color: #FFF;
}

.sidebar a {
  display: flex;
  align-items: center;
  color: #fff;
  padding: 10px;
  text-decoration: none;
  margin-bottom: 0px;
  border-radius: 4px;
}

.sidebar a:hover {
  background-color: #ff0100;
}

.sidebar i {
  margin-right: 10px;
}

.sidebar img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.dropdown {
  width: 100%; 
  margin-bottom: 1px;
}

.dropdown-btn {
  display: flex;
  align-items: center;
  background-color: #1c1c1c;
  color: white;
  padding: 10px 9px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  width: 100%; /* O botão ocupa a largura total do container */
}

.dropdown-btn:hover{
  background-color: #ff0100;
}

.dropdown-arrow {
  margin-left: 10px; 
  transition: transform 0.3s ease; 
}

.dropdown-content {
  overflow: hidden; /* Esconde o conteúdo excedente */
  max-height: 0; /* Define a altura inicial como 0 para ocultar */
  transition: max-height 0.3s ease; /* Adiciona uma transição suave */
}
.dropdown-text {display: flex;
margin-right: 15px; /* Adiciona espaço à direita do texto */
}
.dropdown-content a { 
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #444; /* Linha de separação */
  background-color: #333; 
}

.dropdown-content a:last-child {
  border-bottom: none;
}

.dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown.active .dropdown-content {
  max-height: 200px; /* Ajuste a altura máxima conforme necessário */ 
}

.modal {
  display: none; /* Certifique-se de que o modal não apareça por padrão */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex; /* Para centralização */
  justify-content: center; /* Centralizar horizontalmente */
  align-items: center; /* Centralizar verticalmente */
}
.modal_redefinir_senha {
  display: none; /* Certifique-se de que o modal não apareça por padrão */
  position: fixed;
  z-index: 1000; /* Garante que o modal fique acima de outros elementos */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
}
.modal-content {
  background-color: #fefefe;
  padding: 20px; /* Aumentar o preenchimento para uma aparência melhor */
  border: 1px solid #888;
  width: 90%; /* Largura máxima em dispositivos móveis */
  max-width: 300px; /* Largura padrão ajustada */
  max-height: 90%; /* Limitar a altura do modal */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px; /* Bordas arredondadas */
  overflow-y: auto; /* Permitir rolagem se necessário */
  margin: auto; /* Centraliza horizontalmente */
  color: #000;

  /* Adicionando propriedades para centralização vertical */
  position: fixed; /* Fixa o modal na tela */
  top: 50%; /* Centraliza verticalmente */
  left: 50%; /* Centraliza horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta o modal para ficar exatamente no centro */
  z-index: 1000; /* Garante que o modal fique acima de outros elementos */
}

.modal-content-turma {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 100%; /* Width adjusted for responsiveness */
  max-width: 450px; /* Set a max width */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden; /* Prevent overflow */
  margin: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  max-height: 90%; /* Limiting height to avoid overflow */
  overflow-y: auto; /* Allow scrolling if content exceeds max height */
}
.form_modal_turma{
  width: 100%;
}
/* Media query to adjust modal padding and width for mobile devices */
@media (max-width: 768px) {
  .modal-content-turma {
      padding: 15px; /* Adjust padding for smaller devices */
  }
}

/* Media query for very small screens */
@media (max-width: 480px) {
  .modal-content-turma {
      padding: 20px; /* Reduce padding for very small screens */
      font-size: 14px; /* Adjust font size for better readability */
      width: 350px;
  }

}
/* Media query para telas menores */
@media (max-width: 768px) {
  .modal-content {
      width: 90%; /* Largura máxima em dispositivos móveis */
      padding: 15px; /* Ajustar o padding para dispositivos móveis */
  }
}

.modal-usuario {
  display: none; /* Certifique-se de que o modal não apareça por padrão */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}


/* Estilo para o botão em dispositivos móveis */
@media (max-width: 768px) {
  form input[type="submit"] {
    width: 80%; /* Aumenta a largura para ocupar mais espaço na tela */
    padding: 15px; /* Aumenta o padding para facilitar o toque */
    font-size: 18px; /* Aumenta o tamanho da fonte */
  }
}
.form_modal_aluno{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.form_modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Para ocupar toda a largura do modal */
}
.modal-content-usuario {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Largura padrão para dispositivos móveis */
  max-width: 500px; /* Largura máxima para telas grandes */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px; /* Borda arredondada */
  margin: 0 auto; /* Centraliza horizontalmente */
  animation: aparecer 0.3s ease-out; /* Animação de entrada */
  position: relative; /* Para o ajuste vertical */
  top: auto; /* Remover a posição fixa */
  transform: translateY(0); /* Para facilitar a centralização */
  top: 20%;
}

/* Media query para telas maiores */
@media (min-width: 768px) {
  .modal-content-usuario {
    width: 400px; /* Largura específica para telas maiores */
  }
 
}


/* Esconder o modal inicialmente e só exibir no JS */
#editarModal {
  display: none;
  /* Esconder por padrão */
}

#sucessoModal {
  display: none;
  /* Esconder por padrão */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Animação de aparição */
@keyframes aparecer {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Estilos para a paginação */
.paginacao {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.paginacao a {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 5px;
  text-decoration: none;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  color: #333;
  border-radius: 5px;
  transition: background-color 1s ease-out;
}

.paginacao a:hover {
  background-color: #ff0100;
  color: #fff;
}

.paginacao a.ativo {
  background-color: #ff0100;
  color: white;
  border: 1px solid white
}

.break-line {
  display: inline; /* Padrão para telas grandes */
}

@media (max-width: 767px) { /* Para dispositivos móveis */
  .break-line {
      display: block; /* Faz a quebra de linha */
  }

}
@media (max-width: 768px) { /* Ajuste o valor conforme necessário */
  .btn.btn-editar,
  .btn.btn-danger,
  .btn.btn-success,
  .btn-grande,
  .btn-largo {
      padding: 12px 45px; /* Aumenta o espaçamento interno */
      font-size: 16px; /* Aumenta o tamanho da fonte */
  }
}
@media (max-width: 768px) { /* Ajuste o valor conforme necessário */
  .btn.btn-editar,
  .btn.btn-danger,
  .btn.btn-success,
  .btn-grande,
  .btn-largo {
      padding: 12px 45px; /* Aumenta o espaçamento interno */
      font-size: 16px; /* Aumenta o tamanho da fonte */
  }
}