:root {
    --primary-color: var(--dynamic-primary-color, #34495e);
    --secondary-color: #bdc3c7;
    --background-color: #f0f4f8;
    --font-color: #ffffff;
    --font-family: 'Roboto Condensed', sans-serif;
}


body {
    font-family: var(--font-family);
    font-weight: 200;
    background-color: var(--background-color);
    color: var(--font-color);
    text-align: center;
    font-size: 1.1em;
}

h1, h2 {
    color: var(--primary-color);
    font-size: 2.5em;
}

h1, title {
    margin: 10px 0;
}

.table-custom {
    margin: 0 auto 20px auto;
    width: 95%;
    border: 1px solid var(--secondary-color);
}

#tournamentInfo {
    font-weight: 800 !important; 
    font-size: 1.0rem;
    background-color: #ffffff; /* Colore di sfondo */
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    margin-top: 20px;
    width: 95%; /* Larghezza al 95% della viewport */
    margin-left: auto;
    margin-right: auto;
}

/* Ingrandisci il testo del menu a tendina */
#pageSelect {
    font-size: 1.2em; /* Puoi aumentare il valore se necessario */
    padding: 10px;    /* Aggiungi un po' di spazio interno */
}

#pageSelect option {
    font-size: 1.2em; /* Modifica la dimensione del testo nelle opzioni */
}

.container {
    width: 98% !important;
    max-width: 98% !important;
}

.form-group {
    width: 100% !important; /* Assicurati che il contenitore occupi il 100% */
}

select.form-control {
    width: 100% !important; /* Forza la larghezza a 100% */
    font-size: 1.2em;  /* Stessa dimensione testo */
    padding: 10px;     /* Stesso spazio interno */
    border-radius: 5px; /* Bordo arrotondato */
}

.table-custom th, .table-custom td {
    border: 1px solid var(--secondary-color);
    padding: 5px;
    vertical-align: middle;
}

.table-custom th {
    background-color: #6c869f;
    color: var(--font-color);
    font-size: 0.7em;
}

.table-custom td {
    color: #575c60;
    font-size: 1.2em;
    text-align: center;
}

.table-custom tr td:last-child {
    padding-bottom: 10px;
}

.turno-divider {
    background-color: var(--primary-color);
    color: var(--font-color) !important;
    text-align: center;
    font-weight: bold;
    font-size: 0.75em;
}

.team-name, .match-name {
    font-weight: bold;
    color: black !important;
    font-size: 1.2em;
}

.score-data, .result-data {
    font-size: 1.5em;
    font-weight: bold;
    color: red !important;
}

.result-data span {
    font-size: 0.8em;
    color: black !important;
}

.team-column, .squadra-column {
    color: black !important;
    font-size: 0.75em;
    font-weight: bold;
}

.table-custom th.team-column, .table-custom th.squadra-column {
    color: var(--font-color) !important;
}

.match-data {
    font-size: 0.9em;
    font-weight: bold;
    color: black !important;
}

.squadra-column {
    width: 25%;
    font-size: 0.9em;
    font-weight: bold;
}

.banner-img {
    width: 95%;
    height: auto;
    display: block;
    margin: 40px auto;
}


#footerBannerLink {
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.data-ora-cell {
    font-weight: bold;
    color: #b1c6c7;
    background-color: #b1c6c7;
}

.table-alternate tr:nth-child(4n+1), .table-alternate tr:nth-child(4n+2) {
    background-color: #e2e6e5;
}

.table-alternate tr:nth-child(4n+3), .table-alternate tr:nth-child(4n+4) {
    background-color: #ffffff;
}

.thick-divider {
    border-top: 5px solid var(--secondary-color);
}

.dot-separator {
    color: red;
    font-weight: bold;
    margin: 0 5px;
}

.dot-separator {
    color: red;
    font-weight: bold;
    margin: 0 5px;
}

/* Aggiunta delle regole per trasformare il testo in maiuscolo */
.team-name, .match-name, .squadra-column, .match-data, .team-column {
    font-weight: bold;
    color: black !important;
    font-size: 1.2em;
    text-transform: uppercase;
}

.result-data {
    font-size: 1.5em;
    font-weight: bold;
    color: red !important;
    text-transform: uppercase;
}

.result-data span {
    font-size: 0.8em;
    color: black !important;
}

.table-custom th.team-column, .table-custom th.squadra-column {
    color: var(--font-color) !important;
    text-transform: uppercase;
}

.data-ora-cell {
    font-weight: bold;
    color: #b1c6c7;
    background-color: #cddfe0;
    text-transform: uppercase;
}

/* Ridurre la dimensione del testo per la colonna "Campo di Gioco" nella sezione Calendari */
#calendarioTable td:nth-child(4) {
    font-size: 0.9em;
    font-style: italic;
}

/* Ridurre la dimensione del testo per la colonna "Campo" nella sezione SQUADRE */
#squadreTable td:nth-child(3) {
    font-size: 0.9em;
    font-style: italic;
}
/* Ridurre la dimensione del testo per la colonna "Campo di Gioco" nella sezione Calendari */
.campo-di-gioco-column {
    font-size: 0.9em;
    font-style: italic;

}



/* Responsive text sizes for mobile devices */
@media only screen and (max-width: 768px) {
    body {
        font-size: 0.8em; /* riduzione del 70% rispetto all'1.1em */
    }

    h1, h2 {
        font-size: 1.7em; /* riduzione del 70% rispetto al 2.5em */
    }

    .table-custom th {
        font-size: 0.6em; /* riduzione del 70% rispetto al 0.7em */
    }

    .table-custom td {
        font-size: 0.9em; /* riduzione del 70% rispetto al 1.2em */
    }

    .turno-divider {
        font-size: 0.7em; /* riduzione del 70% rispetto al 0.75em */
    }

    .team-name, .match-name {
        font-size: 1em; /* riduzione del 70% rispetto al 1.2em */
    }

    .score-data, .result-data {
        font-size: 1.1em; /* riduzione del 70% rispetto al 1.5em */
    }

    .result-data span {
        font-size: 0.7em; /* riduzione del 70% rispetto al 0.8em */
    }

    .team-column, .squadra-column {
        font-size: 0.7em; /* riduzione del 70% rispetto al 0.75em */
    }

    .match-data {
        font-size: 0.8em; /* riduzione del 70% rispetto al 0.9em */
    }

    .squadra-column {
        font-size: 0.8em; /* riduzione del 70% rispetto al 0.9em */
    }

    .data-ora-cell {
        font-size: 0.8em; /* riduzione del 70% rispetto al font-size predefinito */
    }

    .dot-separator {
        font-size: 0.7em; /* riduzione del 70% rispetto al font-size predefinito */
    }
}