html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Garantir que ocupe toda a altura */
    font-family: "Open Sans", sans-serif;
    background-color: rgb(186, 206, 245) !important; /* Força a aplicação da cor */
}

body {
    background-color: rgb(186, 206, 245); /* Garante que o fundo seja aplicado em todo o corpo */
}

.banner, .bannera, .img-container, .center, .inside {
    background-color: rgb(186, 206, 245); /* Garantir a cor de fundo nos principais contêineres */
}

a {
    text-decoration: none;
}
.menu {
    height: 10vh;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content:space-between;
    background: rgba(20, 20, 20, 1);
    padding: 0 20px;
}
.menu .logo {
    height: 100%;
}
.menu nav {
    display: flex;
    gap: 20px;
}
.menu nav a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    transition: color 0.3s;
}
.menu nav a:hover {
    color: #f74444;
}
.banner {
    min-height: 60px;
    height: 20vh;
    background-image: url("../images/ranking_bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative; /* Adicionado para que o ::after seja posicionado em relação ao banner */
}

.banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
    pointer-events: none;
}
.banner > * {
    position: relative;
    z-index: 2;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.center .inside {
    width: 1024px;
    min-height: 60px;
    height: 20vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.opcoes {
    min-height: auto;
    padding: 10px 5px;
    background: rgba(20, 20, 20, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.botao {
    padding: 0.5rem 1rem;
    background-color: #434343;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10pt;
}
.botao:hover, .active {
    background-color: #dc2828;
}
.tabela-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: start;
}
.tabela {
    width: 100%;
    background-color: white;
    border-collapse: collapse;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    table-layout: fixed;
}
.tabela th, .tabela td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
.tabela th {
    background-color: #cd1c1c;
    color: white;
    position: sticky;
    top: 0;
    z-index: 2;
}
.tabela td img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
#ranking-scroll {
    max-height: calc(70vh - 60px);
    flex: 1;
    overflow: auto;
}
#ranking-scroll table {
    width: 100%;
}
#ranking-scroll tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.gray {
    color:#b8b8b8!important;
}
.pt30 {
    font-size: 24pt;
}
.pt18 {
    font-size: 18pt;
}
.pt14 {
    font-size: 14pt;
}
.pt12 {
    font-size: 12pt;
}
.w400 {
    font-weight: 400;
}
.w600 {
    font-weight: 600;
}
.w800 {
    font-weight: 800;
}



        /* Centralizar imagens da tabela */
        table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        th, td {
            padding: 8px;
            text-align: center;
            border: 1px solid #ccc;
            word-wrap: break-word;
            height: 60px;
        }

        /* Estilo da Tabela 1 */
        .table-1 th {
            background-color: #fa0f22; /* Cor de fundo dos cabeçalhos da tabela 1 */
            color: white;
            font-weight: bold;
        }

        .table-1 td {
            background-color: #fdf8b4; /* Cor de fundo das células da tabela 1 */
            cursor: default;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Estilo da Tabela 2 */
        .table-2 th {
            background-color: #432b8d; /* Cor de fundo dos cabeçalhos da tabela 2 */
            color: white;
            font-weight: bold;
        }

        .table-2 td {
            background-color: #b0b0ff; /* Cor de fundo das células da tabela 2 */
            cursor: default;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Estilos para as imagens da tabela */
        td img {
            width: 80px; /* Definir um tamanho fixo para as imagens nas tabelas */
            height: auto; /* Mantém a proporção */
            display: block;
            margin: 0 auto; /* Centraliza a imagem dentro da célula */
        }

        /* Estilos para a imagem principal (não da tabela) */
        .img-container {
            text-align: center; /* Alinha a imagem ao centro */
            max-width: 100%;
        }

        .img-container img {
            width: 100%; /* Ajusta a largura da imagem ao contêiner */
            height: auto; /* Mantém a proporção da imagem */
            max-width: 1200px; /* Define a largura máxima para a imagem */
        }

        /* Modal e outros estilos mantidos aqui */
        .modal {
            display: none; /* Inicialmente o modal estará escondido */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5); /* Fundo com opacidade */
        }

        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #ccc;
            width: 80%;
            max-width: 800px;
            max-height: 80vh; /* A altura máxima do modal será 80% da altura da tela */
            overflow-y: auto; /* Ativa a rolagem vertical caso o conteúdo seja maior que o espaço */
        }

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

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

        /* Estilos do botão */
        .btn-token {
            background-color: #5441a9; /* Cor de fundo */
            color: white; /* Cor do texto */
            padding: 10px 20px;
            border-radius: 50px; /* Bordas arredondadas */
            font-size: 16px;
            font-weight: bold;
            text-decoration: none; /* Remove sublinhado */
            display: inline-block;
            transition: background-color 0.3s ease, transform 0.3s ease; /* Efeito de transição */
            cursor: pointer;
        }

        .btn-token:hover {
            background-color: #432b8d; /* Cor de fundo no hover */
            transform: scale(1.05); /* Efeito de aumento no hover */
        }

        .btn-token:focus {
            outline: none; /* Remove a borda de foco */
        }

/* Adiciona a animação pulsante no botão */
@keyframes pulse {
    0% {
        transform: scale(1); /* Tamanho normal */
    }
    50% {
        transform: scale(1.1); /* Tamanho aumentado */
    }
    100% {
        transform: scale(1); /* Retorna ao tamanho normal */
    }
}

/* Estilo do botão */
.btn-token {
    background-color: #5441a9; /* Cor de fundo */
    color: white; /* Cor do texto */
    padding: 10px 20px;
    border-radius: 50px; /* Bordas arredondadas */
    font-size: 16px;
    font-weight: bold;
    text-decoration: none; /* Remove sublinhado */
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Efeito de transição */
    cursor: pointer;
    animation: pulse 1s infinite; /* Chama a animação de pulsação */
}

/* Efeito de hover (quando passar o mouse em cima) */
.btn-token:hover {
    background-color: #432b8d; /* Cor de fundo no hover */
    transform: scale(1.1); /* Aumenta o tamanho do botão no hover */
}

/* Efeito de foco */
.btn-token:focus {
    outline: none; /* Remove a borda de foco */
}
@media (max-height: 600px) {
    .menu {
        height: 60px;
    }
    .banner {
        min-height: 10vh;
    }
    #ranking-scroll {
        max-height: calc(100vh - 200px);
    }
    .pt30 {
        font-size: 16pt;
    }
    .pt18 {
        font-size: 12pt;
    }
    .pt14 {
        font-size: 10pt;
    }
    .pt12 {
        font-size: 8pt;
    }
}

/*MODAL DIFERENCIADO, ESSE PEGA UMA TABELA BEM MAIOR QUE A 1 E 2 */

/* Estilo específico para a Tabela do Modal 3 */
#myModal3 .table-3 {
    width: 100%; /* Garantir que a tabela ocupe toda a largura disponível */
    table-layout: auto; /* Faz com que a tabela se ajuste automaticamente ao conteúdo */
    margin-top: 20px;
    margin-bottom: 20px; /* Adiciona um espaço na parte inferior */
    border-collapse: collapse;
    overflow-x: auto; /* Permite rolagem horizontal se necessário */
}

/* Estilo para os cabeçalhos da tabela */
#myModal3 .table-3 th {
    background-color: #5441a9; /* Cor de fundo dos cabeçalhos */
    color: white;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    word-wrap: break-word;
}

/* Estilo para as células da tabela */
#myModal3 .table-3 td {
    background-color: #a38ffa; /* Cor de fundo das células */
    color: #333;
    padding: 15px;
    text-align: center;
    border: 1px solid #ddd;
    word-wrap: break-word;
    min-width: 150px; /* Define uma largura mínima para cada célula */
}

/* Estilo para as imagens dentro das células da tabela */
#myModal3 .table-3 td img {
    width: 100px; /* Limita a largura das imagens */
    height: auto; /* Mantém a proporção */
    display: block;
    margin: 0 auto; /* Centraliza as imagens nas células */
}

/* Ajuste no estilo geral do modal para garantir que a tabela caiba bem */
#myModal3 .modal-content {
    width: 90%; /* Ajusta a largura do modal para 90% da tela */
    max-width: 1200px; /* Define a largura máxima do modal */
    overflow-x: auto; /* Permite rolagem horizontal */
}


/* QUISER USAR UM MODAL ATÉ 5 COLUNAS, USA O 4, PARA MAIS COLUNAS USA O 3 */
#myModal4 .table-4 th {
    background-color: #303170; /* Cor de fundo dos cabeçalhos */
    color: white;
    font-weight: bold;
}

#myModal4 .table-4 td {
    background-color: #ffff8c; /* Cor de fundo das células */
    color: #333;
    padding: 15px;
    text-align: center;
    border: 1px solid #000000;
}

#myModal4 .table-4 td img {
    width: 100px; /* Defina o tamanho das imagens na tabela */
    height: auto;
    display: block;
    margin: 0 auto;
}

#myModal4 .table-4 {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}




/* Para garantir que o conteúdo após a imagem não seja centralizado */
.non-centralizado {
    text-align: left;
    display: block; /* Garante que não seja flex ou inline */
    margin-left: 0;
    margin-right: 0;
}