/* Estilo do body */
body {
    padding-top: 70px;
    padding-bottom: 60px;
    background-color: #f8f9fa;
    /*height: 100vh;*/
  }
  
  body header, 
  body footer {
    z-index: 1030;
  }
  
  /* Estilo do footer */
  footer {
    background-color: #f8f9fa;
  }
  footer h5 {
    font-weight: bold;
  }
  footer a {
    color: #0d6efd;
    text-decoration: none;
  }
  footer a:hover {
    text-decoration: underline;
  }
  
  /* Estilo da imagem */
  .maintenance-img {
    max-width: 150px;
    margin-bottom: 2rem;
  }
  
  /* Estilo dos botões do DataTables */
  .dt-buttons .btn {
    background-color: transparent !important;
    /*color: var(--bs-primary) !important;
    border: none !important;*/
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  }
  
  .dt-buttons .btn:hover {
    background-color: var(--bs-primary) !important;
    /*color: white !important;*/
  }
  
  /* Estilo dos cards */
  .card {
    /*padding: 1rem;*/
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .card.text-center {
    transition: background-color 0.3s ease;
    cursor: pointer;
  }
  .card.text-center.disabled {
    pointer-events: none;
    opacity: 0.4;
    background-color: #f8f9fa !important;
  }
  .card.text-center:hover {
    background-color: #e2e6ea;
    transition: background-color 0.3s;
  }
  
  .respostas-container { /* Add this class to your containers in HTML */
    /* Default styles if needed */
    background-color: #e2e6ea;
  }
  .respostas-hidden { /* Or use Bootstrap's .d-none */
    display: none;
  }
  
  /* Ajuste para o timer fixo ABAIXO do nav fixo */
  .fixed-timer-container-below-nav {
    position: fixed;
    /* A altura do seu navbar .fixed-top. Ajuste se for diferente. */
    /* Bootstrap 5 default navbar height é ~56px */
    top: 56px;
    left: 0;
    width: 100%;
    background-color: rgba(255, 235, 238, 0.95); /* Fundo rosa claro/alerta suave */
    padding: 8px 0; /* Espaçamento vertical */
    /* Deve estar acima do conteúdo, mas abaixo de modais etc. (navbar é 1030) */
    z-index: 1029;
    text-align: center; /* Centraliza o texto interno */
    border-bottom: 1px solid rgba(220, 53, 69, 0.3); /* Borda vermelha suave */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  
  /* Estilo para o texto do timer */
  #timer {
    font-size: 1.1rem;
    color: #dc3545; /* Cor vermelha (danger) */
    font-weight: bold;
    display: inline-block; /* Para text-align funcionar bem */
  }
  #timer.text-danger { /* Garante que a cor vermelha seja aplicada */
    color: #dc3545 !important;
  }
  
  .timer { 
    font-size: 1.5rem; 
    font-weight: bold; 
    color: #dc3545; 
  }
  
  /* Classe adicionada ao body quando o timer está ativo */
  /* O padding-top deve ser a altura do navbar + altura do timer */
  body.quiz-active-padding {
    /* Ex: 56px (navbar) + (8px+font+8px) (timer) ~ 56 + 36 = 92px */
    /* Ajuste este valor conforme a altura real dos seus elementos */
    padding-top: 92px;
  }
  
  /* Ajuste opcional para garantir que o conteúdo principal não tenha margem superior extra */
  .main-content {
    margin-top: 0; /* Remove margem se houver */
  }
  
  /* Adicione estas regras no final do arquivo */
  .question-container {
    display: none;
  }
  
  .question-container.active {
    display: block;
  }
  
  #quiz-container {
    position: relative;
    min-height: 300px;
  }
  
  .navigation-buttons {
    position: sticky;
    bottom: 20px;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 100;
  }
  
  .answer-option { 
    cursor: pointer; 
    transition: all 0.3s; 
  }
  .answer-option:hover { 
    background-color: #f8f9fa; 
  }
  .answer-option.selected { 
    background-color: #e9ecef; 
    border-left: 4px solid #0d6efd;
  }
  
  .timer-display { 
    font-size: 1.2rem; 
    font-weight: bold; 
    font-family: monospace; 
  }
  .time-warning { 
    color: #dc3545; 
    animation: pulse 1s infinite; 
    /*animation: blink 1s linear infinite; */ 
  }
  .progress-bar { 
    transition: width 0.5s ease; 
    /*transition: width 1s linear; */
  }
  
  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
  
  @keyframes blink {
    50% { opacity: 0.5; }
  }
  
  /* Estilos para os resultados */
  .list-group-item-success { 
    background-color: #198754; 
    border-color: #198754; 
    color: white;
  }
  .list-group-item-danger { 
    background-color: #dc3545; 
    border-color: #dc3545; 
    color: white;
  }
  .list-group-item-warning { 
    background-color: #ffc107; 
    border-color: #ffc107; 
    color: #212529;
  }
  
  .bg-opacity-10 { 
    opacity: 0.1; 
  }
  
  .bg-success { 
    background-color: #198754 !important; 
  }
  .bg-success.bg-opacity-10 { 
    background-color: rgba(25, 135, 84, 0.1); 
  }
  .bg-success-subtle { 
    background-color: rgba(25, 135, 84, 0.1) !important; 
    border-left: 4px solid #198754; 
  }
  
  .bg-warning { 
    background-color: #ffc107 !important; 
  }
  .bg-warning.bg-opacity-10 { 
    background-color: rgba(255, 193, 7, 0.1); 
  }
  .bg-warning-subtle { 
    background-color: rgba(255, 193, 7, 0.1) !important; 
    border-left: 4px solid #ffc107; 
  }
  
  .bg-danger { 
    background-color: #dc3545 !important; 
  }
  .bg-danger.bg-opacity-10 { 
    background-color: rgba(220, 53, 69, 0.1);
  }
  .bg-danger-subtle { 
    background-color: rgba(220, 53, 69, 0.1) !important; 
    border-left: 4px solid #dc3545; 
  }
  
  .card { 
    transition: all 0.3s ease; 
    margin-bottom: 1.5rem; 
  }
  .card-header.text-dark h5 { 
    color: #212529 !important; 
  }
  /*.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }*/