<style type="text/css">
    .linha-meia {line-height: 1.5;}

    .visible-lg,.visible-md,.visible-sm,.visible-xs{display:none!important}.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table!important}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table!important}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table!important}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table!important}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table!important}tr.visible-print{display:table-row!important}td.visible-print,th.visible-print{display:table-cell!important}}.visible-print-block{display:none!important}@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}@media print{.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}}

    .img-mobile {
        width: 1 rem !important;
        height: auto; /* Mantém a proporção original da imagem */
    }

    /* Exemplo de media query para aplicar o estilo apenas em dispositivos móveis */
    @media (max-width: 768px) {
        .img-mobile {
            display: block; /* Garante que a imagem seja exibida como um bloco */
            margin: 0 auto; /* Centraliza a imagem horizontalmente */
            width: 50%!important;
            height: auto;
        }
    }
    .custom-div {
        display: flex;
    }
    .image-column {
        flex: 20%;
    }
    .text-column {
        flex: 80%;
        padding: 10px; /* Ajuste o espaçamento conforme necessário */
    }

    .custom-list {
    list-style-type: none;  
    padding-left: 0;  
    }

    .custom-list li::before {
    content: "\2713"; /* Código unicode para o marcador de verificação ✓ */
    display: inline-block;
    width: 1em;
    margin-left: -1em;  
    }
 
  /* Estilos CSS para a tabela e paginação */
  #athlete-table {
      border-collapse: collapse;
      table-layout: fixed;
  }
  
  .cpoPesquisa {
    display: flex;
    align-items: center!important;
    justify-content: flex-end;
    width: 100%;
}
.cpoPesquisa label {
    margin-right: 10px; /* Ajuste conforme necessário */
}
  .table-heads {
      text-align: left;
  }

  .head-item {
      padding: 10px;
      border-bottom: 1px solid #ddd;
  }

  #page-size-info {
      display: flex;
      align-items: center; /* Centraliza verticalmente os elementos */
      padding: 10px;
  }

  #page-size-info label {
      margin-right: 10px; /* Espaçamento entre o label e o select */
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}
  .pagination a {
      color: black;
      padding: 8px 16px;
      text-decoration: none;
      transition: background-color .3s;
      border: 1px solid #ddd;
      margin: 0 4px;
  }
  
  .pagination a.active {
      background-color: #4CAF50;
      color: white;
      border: 1px solid #4CAF50;
  }
  .pagination a:hover:not(.active) {background-color: #ddd;}

  /* Estilo para o modal */
.modal {
    font-size: 14px;
    display: none; /* Por padrão, o modal está oculto */
    position: fixed; /* Permite que o modal fique fixo na tela */
    z-index: 1; /* Define a ordem de empilhamento do modal */
    left: 50%; /* Posiciona o modal no centro horizontal da tela */
    top: 50%; /* Posiciona o modal no centro vertical da tela */
    transform: translate(-50%, -50%); /* Move o modal de volta para cima e para a esquerda para centralizá-lo */
    width: 500px; /* Largura do modal */
    height: 400px; /* Altura do modal */
    background-color: white; /* Cor de fundo do modal */
    border: 1px solid #ccc; /* Borda do modal */
    border-radius: 5px; /* Cantos arredondados do modal */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Sombra do modal */
    /* Media query para telas pequenas */
    @media screen and (max-width: 768px) {
    width: 95%; /* Largura do modal ajustada para 95% da tela */
    }
}

/* Estilo para o fundo escurecido */
.modal-background {
    position: fixed; /* Permite que o fundo escurecido fique fixo na tela */
    z-index: 0; /* Define uma ordem de empilhamento abaixo do modal */
    left: 0;
    top: 0;
    width: 100%; /* Ocupa toda a largura da tela */
    height: 100%; /* Ocupa toda a altura da tela */
    background-color: rgba(0, 0, 0, 0.5); /* Cor de fundo escurecida */
}

/* Estilo para o conteúdo do modal */
.modal-content {
    padding: 20px; /* Espaçamento interno do conteúdo do modal */
}

/* Estilo para o botão de fechar */
.close {
    position: absolute; /* Permite posicionar o botão de fechar em relação ao modal */
    top: 10px;
    right: 10px;
    cursor: pointer; /* Muda o cursor para indicar que o botão é clicável */
}

</style>