/* Estilos adicionais para dispositivos com touch */
.touch-area {
    position: fixed;
    right: 0px; /* Inicialmente oculto */
    top: 0;
    width: 50px;
    height: 50px;
    background-color:  #505050;
    z-index: 9999999; /* Certifique-se de que o touch-area está acima do sidebar */
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    cursor: pointer;
    transition: transform 0.3s ease; /* Animação para ocultar/exibir */
    border-radius: 50px;
    pointer-events: auto; /* Habilita cliques */
    margin: 5px;
}
.sidebar.disabled {
      pointer-events: none; /* Desabilita cliques */
  }
  .touch-content svg path {
    width: 280px;
    border-radius: 0px;
    fill: #acacac;
  }
  .touch-area.visible {
    width: 280px;
    border-radius: 0px;
    background-color: #3e245a;
    margin: 0px;

  }
  .touch-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  
  .touch-content svg {
    padding: 10px;
    width: 50px; /* Ajuste o tamanho do ícone */
    height: 50px; /* Ajuste o tamanho do ícone */
  }
  .touch-area.visible .touch-content svg path {
    fill: #b7a5ca; /* Muda a cor do path do SVG para branco */
}  
  
  .sidebar.visible {
    right: 0;
  }
  
 
  /* Reset básico */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, sans-serif;
    background-color: black;
    color: #333;
  }
  
  .container {
    display: flex;
    height: 100vh;
    flex-direction: row-reverse; /* Sidebar à direita */
  }
  
  .sidebar {
    width: 280px;
    background-color: #242325;
    color: #919191;
    overflow-y: auto; /* Permite rolagem vertical */
    transition: transform 0.3s ease; /* Animação para ocultar/exibir */
    transform: translateX(100%); /* Inicialmente oculto */
    position: fixed;
    top: 50px; /* Ajuste a altura conforme necessário */
    right: 0;
    height: calc(100vh - 50px); /* Ajuste a altura para permitir rolagem */
    z-index: 1000;
  }
  
  .sidebar.visible {
    transform: translateX(0); /* Exibe o sidebar */
  }
  
  .sidebar h2 {
    margin-bottom: 20px;
    font-size: 1.5em;
    text-align: center; /* Centraliza o título */
  }
  
  .sidebar ul {
    list-style-type: none;
    padding: 0;
  }
  
  .sidebar .modulo {
    font-weight: bold;
    margin-top: 15px;
    font-size: 1.2em;
    text-align: center;
    background-color: #2d2b2e;
    color: white;
    padding: 10px;
  }
  
  .sidebar .modulo:first-child {
    margin-top: 0px;
  }
  
  .sidebar .secao {
    margin-top: 10px;
    cursor: pointer;
    padding: 5px;
    text-align: center; /* Centraliza o texto da seção */
  }
  
  .sidebar .secao:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .thumbnail {
    width: 220px; /* Ajuste o tamanho conforme necessário */
    height: auto;
    cursor: pointer;
    border-radius: 3px;
    margin: 5px auto; /* Centraliza a imagem */
    display: block; /* Centraliza a imagem */
  }
  
  .main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
  }
  
  .selected {
    font-weight: bold;
    color: white;
    background-color: #3e245a;
  }
  
  video {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    object-fit: contain;
  }
  
  /* Estilizando a barra de rolagem */
  .sidebar::-webkit-scrollbar {
    width: 12px; /* Largura da barra de rolagem */
  }
  
  .sidebar::-webkit-scrollbar-track {
    background: #242325; /* Cor do track da barra de rolagem */
  }
  
  .sidebar::-webkit-scrollbar-thumb {
    background-color: #3e245a; /* Cor do thumb da barra de rolagem */
    border-radius: 10px; /* Arredondamento do thumb */
    border: 3px solid #242325; /* Espaço entre o thumb e o track */
  }