body{
	line-height:1.1em;
	font-size:15px;
	margin:0;
	padding:0;
	font-family: 'Nova Square', cursive, Verdana;
}
.nova-square-regular {
	font-family: "Nova Square", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.material-symbols-outlined {            
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
}

.icon-xs { font-size:9px;}
.thw { width: 70px;}


.aliga{
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	border:2px solid black;
	background-color:#e9ecef;
	border-radius:20%;
	padding:5px;
}
.logoaliga{
	width:200px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	border:2px solid black;
	background-color:#e9ecef;
	border-radius:20%;
	padding:5px;
	margin-bottom:10px;
}
.logoaliga:hover{
	background-color:#09f;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.logo_clube{
	width:128px;
	height:128px;
}
.menuliga{    
	color: #e9ecef; /* Cor do texto no hover */
}
.menuliga a{
    color: #09f; /* Cor do texto no hover */
}

/* CSS personalizado para a div do time */
.team-info {
    border: 10px solid transparent; /* Inicialmente transparente */
    border-radius: 10px; /* Bordas arredondadas */
    color: #000000; /* Cor do texto padrão */
    background-color: #FFFFFF; /* Cor de fundo padrão */
    padding: 10px; /* Espaçamento interno */
    margin-bottom: 1rem; /* Espaço abaixo da div */
    position: relative; /* Para garantir que a borda seja visível corretamente */
}

/* Adiciona um estilo para garantir que a borda seja visível */
.team-info::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 10px solid transparent; /* Define a borda */
    border-radius: 10px; /* Arredondar a borda */
    pointer-events: none; /* Ignora eventos de ponteiro */
}

/* ------------------------------------------------------------- */
/* Media Query para Dispositivos Móveis (telas de até 576px) */
@media (max-width: 576px) {
    .ns_clubes thead td {
        /* Reduz o padding e a fonte do cabeçalho */
        padding: 0.5rem;
        font-size: 0.75rem;
    }

    .ns_clubes tbody tr td {
        /* Reduz o padding das células */
        padding: 0.25rem;
    }

    .ns_clubes tbody h4 {
        /* Reduz o tamanho da fonte da posição do clube */
        font-size: 0.85rem;
    }

    .ns_clubes tbody img {
        /* Reduz o tamanho do logo */
        width: 48px;
    }
    
    /* Para o nome do clube, usamos a classe de visibilidade do Bootstrap para mostrar o nome abreviado (se existir) */
    .ns_clubes tbody h1 {
        /* Reduz o tamanho do nome do clube */
        font-size: 1rem;
    }

    .ns_clubes tbody b {
        /* Garante que o círculo tenha o mesmo tamanho */
        width: 45px;
        height: 45px;
        /* Remova o line-height, pois o Flexbox fará o alinhamento */
        line-height: normal; /* ou simplesmente remova a propriedade */
        padding: 0 !important;
		vertical-align: middle;
        display: flex;
        align-items: center;      /* Alinha verticalmente */
        justify-content: center;  /* Alinha horizontalmente */
    }
}

.card {
    border-radius: 10px; /* Borda arredondada do card */
}

.card-img-top {
    border: none;
	margin-bottom: 0;
}

.card-body {
	padding-top: 0;
	border: none;
}


.list-group-item:last-child {
    border-bottom: none; /* Remove a borda da última linha */
}

.card-body ul {
    padding-left: 0; /* Remove padding padrão das listas */
}

.fw-bold {
    font-weight: 700; /* Negrito para valores */
}

.fs-4 {
    font-size: 1.25rem; /* Tamanho de fonte maior para valores */
}

#estatisticasChart {
	border: 2px solid #007bff; /* Borda azul ao redor do gráfico */
	border-radius: 10px; /* Bordas arredondadas */
	background-color: #f8f9fa; /* Cor de fundo do gráfico */
}

.highcharts-title {
	font-size: 24px; /* Tamanho da fonte do título do gráfico */
	font-weight: bold; /* Fonte em negrito */
}

.highcharts-xaxis-labels text,
.highcharts-yaxis-labels text {
	font-size: 16px; /* Tamanho da fonte dos rótulos dos eixos */
}

.highcharts-data-label text {
	font-size: 20px; /* Tamanho da fonte dos rótulos dos dados */
	font-weight: bold; /* Fonte em negrito */
}

.confronto {
	margin-top: 2rem; /* Espaçamento superior */
	margin-bottom: 2rem; /* Espaçamento inferior */
}
.confronto .img-fluid {
	max-width: 180px; /* Tamanho máximo da imagem */
	border: 3px solid #007bff; /* Borda azul ao redor da imagem */
	border-radius: 10px; /* Borda arredondada */
}
.confronto h1 {
	font-size: 4rem; /* Tamanho do texto */
	color: #ffffff; /* Cor do texto */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra do texto */
	margin: 0; /* Remover margem padrão */
}
.confronto .col-md-2 {
	background-color: #28a745; /* Cor de fundo verde */
	border-radius: 10px; /* Borda arredondada */
	padding: 1rem; /* Espaçamento interno */
}
.confronto .text-center h5 {
	margin-top: 0.5rem; /* Espaçamento acima do nome do time */
}

.comparacao .details-heading {
	margin-bottom: 1rem;
}
.comparacao .list-group-item {
	border: none;
	background-color: #f8f9fa;
	border-radius: .375rem;
}
.comparacao .list-group-item:first-child {
	border-top: 1px solid #dee2e6;
}
.comparacao .list-group-item:last-child {
	border-bottom: 1px solid #dee2e6;
}

.tableLiga { font-size: 12px; }
.tableLiga th { font-weight:normal;}
.tableLiga thead { height: 35px;}
.tableLiga thead tr th:nth-child(even){ --bs-table-accent-bg: transparent!important;}
.tableLiga tbody {font-size:13px;}
.tableLiga tbody tr td:not(:first-child) { text-align:center;}
.tableLiga thead tr th:not(:first-child) { text-align:center;}
.tableLiga th:first-child { background-color: #FFF; position:sticky;left:0px;z-index:9;}
.tableLiga td:nth-child(2) {background-color: #FFF;position:sticky;left:0px;z-index:9;}
#btn-regulamento {font-size:10px;color:#51a81e;}
.btn-fase { padding: 0 15px 0 15px;font-size:16px;}
#nfase { font-size:13px;}


.cla { font-size: 20px; width:20px; display:inline-block;}
.cla-gcla { color: blue; display:inline-block; font-size:20px; }
.cla-ccla { color: green; display:inline-block; font-size:20px; }
.cla-zcla { color: red; }
.cla-time { font-size: 20px;padding-left:20px; }
.cla-ultimos-jogos { border-radius: 50%; display: inline-block; height: 7px; margin-left: 2px; overflow: hidden; width: 7px; }
.cla-ultimos-jogos--v { background-color: #51a81e; }
.cla-ultimos-jogos--d { background-color: #f00; }
.cla-ultimos-jogos--e { background-color: #ccc; }        
.cla-ultimos-jogos--neutra { background-color: #ccc; }
.cla-title { width:40% }
.cla-title::after { width:10%;content:'CLASSIFICAÇÃO'}
.cla-box {
    height:7px;
    width:7px;
    margin-right:5px;
}

#tabela-jogos td, #tabela-jogos th {border: none !important;}
#tabela-jogos tbody tr {border-bottom: 1px solid #ddd;}
#tabela-jogos td {vertical-align: middle; line-height: 1.5;}
#tabela-jogos img {vertical-align: middle;}
#tabela-jogos h5 {margin: 0;}

.legenda { font-size: 11px; }
.logosdaliga{line-height:1.1em; margin:10px;}
.logosdaliga img{background-color:#C5A54B; border-radius: 50%; margin: 5px; padding:5px;}
.logosdaliga img:hover{background-color:#7DB605; border-radius: 50%;}
@media (max-width: 768px) {
    .thw { width: 60px;}
    .cla { font-size: 20px; width:50px; display:inline-block;}
    .cla-ultimos-jogos { margin-left:1px;height:5px;width:5px;}
    .cla-time { font-size: 19px;padding-left:5px; }
    .cla-title { width:80% }
    .cla-title::after { width:60%;content:'CLASS.'}
    tableLiga tbody tr td:not(:first-child) { text-align:left; }
    tableLiga thead tr th:not(:first-child) { text-align:left; }
    .legenda { font-size: 11px; margin-top: 7px;margin-bottom: 15px;}
    .btn-fase{ padding: 0 15px 0 15px;}
    #nfase { font-size:12px;}
}
.bg-b-liga {
    background-color: #000080;
}

.bg-c-liga {
    background-color: #800000;
}

/* Tabela de Jogos */
.tabeladejogos {
    width: 100%;
    max-width: 1200px;
    margin-bottom: 10px;
}

.tabeladejogos thead {
    color: #ffffff; /* Cor branca para o texto */
}

.tabeladejogos th {
    text-align: center; /* Alinhamento do texto no centro */
    padding: 0.75rem; /* Espaçamento interno para cabeçalhos */
}

.tabeladejogos th, .tabeladejogos td {
    text-align: center;
    vertical-align: middle;
}

.tabeladejogos .tableLiga th, .tabeladejogos .tableLiga td {
    padding: 5px;
}

.tabeladejogos td.text-end {
    text-align: right; /* Alinha o texto à direita */
    font-size: 1rem;
    color: #09f; /* Cor do texto */
}

.jogos-custom-time {
    display: flex;
    align-items: center;
}

.jogos-custom-time.align-right {
    justify-content: flex-end;
}

.jogos-custom-time.align-left {
    justify-content: flex-start;
}

.tabeladejogos td.text-start {
    text-align: left; /* Alinha o texto à esquerda */
    font-size: 1rem;
    color: #09f; /* Cor do texto */
}

.jogos-custom-logo {
    max-width: 50px;
    margin-left: 0.5rem; /* Espaçamento entre o texto e o logo */
}

.jogos-custom-versus {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o versus */
}

.tabeladejogos .col-placar {
    width: 20%;
}

/* --- Media Query para Telas de Celular (até 576px) --- */
@media (max-width: 576px) {
    /* Diminui o padding e o tamanho da fonte em geral */
    .tabeladejogos th,
    .tabeladejogos td {
        padding: 0.25rem 0.1rem;
        font-size: 0.7rem;
    }

    /* Reduz o tamanho das fontes dos nomes dos times */
    .tabeladejogos td.text-end,
    .tabeladejogos td.text-start {
        font-size: 0.75rem;
    }

    /* Reduz o tamanho dos logos dos times */
    .jogos-custom-logo {
        max-width: 30px;
    }
    
    /* Ajusta a fonte do placar para caber */
    .col-placar .h3 {
        font-size: 1.2rem;
    }
}

/* Padrão para telas pequenas (celulares) */
.nome-completo-time {
    display: none; /* Esconde o nome completo por padrão */
}

.nome-abreviado-time {
    display: inline; /* Mostra o nome abreviado por padrão */
}

/* Para telas maiores que 768px (tablets e desktops) */
@media (min-width: 768px) {
    .nome-completo-time {
        display: inline; /* Mostra o nome completo */
    }

    .nome-abreviado-time {
        display: none; /* Esconde o nome abreviado */
    }
}
/* Fim da Tabela de Jogos */

/* Tabela Artilharia */
.tab_section{width: 100%; padding: 10px;}
.tab_section h1{margin-bottom:25px;}
.tab_section .tabrank{margin-bottom:20px;}
.tab_section .tabrank tr th{width:100%; border-top:2px solid #EEE; border-bottom:2px solid #EEE;}
.tab_section .tabrank span{text-align:center; color:#CCC; font-size:1em; margin-right:25px;}
.tab_section .tabrank h5{text-align:left; color:#999; font-size:1em;}
.tab_section .tabela_liga{width:100%; margin:0;}
.tab_section .tabelart{width: auto; height:450px; overflow-y: auto;}
.tab_section .tabelagol{width: auto;}	
.tab_section .tabela_liga tr th{text-align:center;}
.tab_section .tabela_liga span{color:#999; font-size:1em;}
.tab_section .artilharia{width: 100%; overflow-y: auto;}
.tab_section .tabela_liga .liga_tabela td{border-top:2px solid #EEE; border-bottom:2px solid #EEE;}
.tab_section .tabela_liga .liga_tabela .cl_posicao{color:#333; font-size:10px; float:left; margin-left:10px; margin-top:-10px; font-weight:bold;text-transform: uppercase;}
.tab_section .tabela_liga .liga_tabela span{color:#999; font-size:28px; font-family: "Nova Square", sans-serif;}	
.tab_section .tabela_liga .liga_tabela h3{color:#096; font-size:2em; text-align:center;}
.tab_section .tabela_liga .liga_tabela h4{color: #09f;letter-spacing: -1px; font-weight:bold; font-size:1.4em; margin-left:10px; text-align:left;}
.tab_section .tabela_liga .liga_tabela a{text-decoration:none;}	
.tab_section .tabela_liga .liga_tabela .foto{width:50px; height:50px; aspect-ratio: auto 50 / 50; background-color: #f1f1f1; color: #f4f4f4; border-radius:50px; margin-right:10px; display: block; overflow: hidden; box-shadow: 3px 3px 5px #09f;}
.tab_section .tabela_liga .liga_tabela .logoclube{width:30px; height:30px; margin:0 auto;}
.tab_section .liga_alerta td span {border-top: 2px solid #EEE; border-bottom: 2px solid #EEE; text-align: center; /* Centraliza o texto */}

.tab_section .tabela_liga .liga_goleador td{border-top:2px solid #EEE; border-bottom:2px solid #EEE;}
.tab_section .tabela_liga .liga_goleador .cl_posicao{color:#333; font-size:10px; float:left; margin-left:10px; margin-top:-10px; font-weight:bold;text-transform: uppercase;}
.tab_section .tabela_liga .liga_goleador span{color:#999; font-size:32px; font-family: "Nova Square", sans-serif;}	
.tab_section .tabela_liga .liga_goleador h3{color:#096; font-size:6em; text-align:center;}
.tab_section .tabela_liga .liga_goleador h6{color: #333;letter-spacing: -1px; font-weight:bold; font-size:3.4em; margin-left:10px; text-align:left;}
.tab_section .tabela_liga .liga_goleador a{text-decoration:none;}	
.tab_section .tabela_liga .liga_goleador .foto{width:100px; height:100px; background-color: #f6f6f6; color: #f4f4f4; border-radius:10px; margin:10px; box-shadow: 3px 3px 5px #09f;}
.tab_section .tabela_liga .liga_goleador .logoclube{width:60px; height:60px; margin:0 auto;}
/* --- Media Query para Telas de Celular (até 576px) --- */
@media (max-width: 576px) {
    /* Diminui o espaçamento e as fontes */
    .tab_section {
        padding: 5px;
	}
    .tab_section h1 {
        font-size: 1.5em;
        margin-bottom: 15px;
	}
	
    /* Reduz o tamanho das fontes e margens na tabela */
    .tab_section .tabrank span,
    .tab_section .tabrank h5 {
        font-size: 0.8em;
        margin-right: 5px;
	}
    .tab_section .tabela_liga .liga_tabela .cl_posicao {
        font-size: 8px;
        margin-left: 5px;
        margin-top: -5px;
	}
    .tab_section .tabela_liga .liga_tabela span {
        font-size: 1em; /* Ajuste para caber melhor */
	}
    .tab_section .tabela_liga .liga_tabela h3 {
        font-size: 1.5em; /* Reduz o tamanho do placar */
	}
    .tab_section .tabela_liga .liga_tabela h4 {
        font-size: 1.2em; /* Reduz o tamanho do nome do jogador */
        margin-left: 5px;
	}
    .tab_section .tabela_liga .liga_tabela .foto {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        margin-right: 5px;
	}
    .tab_section .tabela_liga .liga_tabela .logoclube {
        width: 25px;
        height: 25px;
	}
	
    /* Reduz o tamanho do jogador de destaque (goleador) */
    .tab_section .tabela_liga .liga_goleador span {
        font-size: 24px;
	}
    .tab_section .tabela_liga .liga_goleador h3 {
        font-size: 3em; /* Placar do artilheiro */
	}
    .tab_section .tabela_liga .liga_goleador h6 {
        font-size: 1.8em; /* Nome do artilheiro */
        margin-left: 5px;
	}
    .tab_section .tabela_liga .liga_goleador .foto {
        width: 60px;
        height: 60px;
        margin: 5px;
	}
    .tab_section .tabela_liga .liga_goleador .logoclube {
        width: 35px;
        height: 35px;
	}
}
/* Fim Tabela Artilharia */

.compartilhar {
    display: inline-block;
    background-color: #007bff; /* Cor de fundo azul */
    color: #fff; /* Cor do texto branca */
    padding: 10px 20px; /* Espaçamento interno */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    text-align: center; /* Centraliza o texto */
    text-decoration: none; /* Remove sublinhado */
    border-radius: 5px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: background-color 0.3s, box-shadow 0.3s; /* Transição suave */
    cursor: pointer; /* Muda o cursor para pointer */
}

.compartilhar:hover {
    background-color: #0056b3; /* Cor de fundo mais escura no hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra mais intensa */
}

.compartilhar:active {
    background-color: #00408d; /* Cor de fundo ainda mais escura no clique */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduz a sombra no clique */
    transform: translateY(2px); /* Efeito de pressionamento */
}

.fifa-card {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 20px;
	max-width: 750px;
	text-align: center;
	font-family: "Nova Square", sans-serif;
}
.fifa-card img {
	max-width: 100%;
	border-radius: 5px;
}
.fifa-card h1 {
	font-size: 1.5rem;
	margin: 10px 0;
}
.fifa-card .logo img {
	width: 90px;
	margin-bottom: 10px;
}
.fifa-card .site-link {
	margin-top: 15px;
	font-size: 0.875rem;
}
.social-buttons .btn {
	margin: 5px;
}

/* Estilos para o loader */
.loader-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px; /* Garante espaço para o ícone */
    width: 100%;
    /* Você pode querer um background para o loader */
    /* background-color: rgba(255, 255, 255, 0.9); */
    /* position: absolute; /* Se quiser que ele sobreponha a tabela */
    /* top: 0; left: 0; right: 0; bottom: 0; */
    /* z-index: 10; */
}

.bola-loader {
    width: 50px; /* Ajuste o tamanho conforme necessário */
    height: 50px; /* Ajuste o tamanho conforme necessário */
    animation: spin 1s linear infinite; /* 1 segundo, linear, infinito */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Footer Styles */
.footer {
    background-color: #212529;
    color: #f8f9fa;
}

.footer-logo {
    height: 40px;
    vertical-align: middle;
	background-color:#f4f4f4;
	border-radius:50%;
}

.footer-league-name {
    font-size: 1.25rem;
    font-weight: bold;
    font-family: 'Nova Square', sans-serif;
    color: #f8f9fa;
	text-decoration:none;
}
.footer-league-name:hover{
	color:#35f522;
}

.social-icon {
    color: #f8f9fa;
    font-size: 1.5rem;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.social-icon:hover {
    color: #0d6efd;
}
/* Hover para outros nav-links (se desejar) */
.nav-link:hover:not(#btn-fase-prev):not(#btn-fase-next) {
    background-color: #1e2125;
    color: #e9ecef;
    border-radius: 5%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}