:root {

    /* grigio scuro */
    --main-color1:rgb(78, 78, 78);

    /*--main-color2:rgb(200, 200, 160);*/
    --main-color2:black;

    /* arancione */
    --main-color3:rgb(255,109,10);

    --nord-color1:rgb(255, 50, 50);
    --nord-color2:rgb(0, 0, 0);
    --nord-color3:rgb(200, 0, 0);

    --west-color1:rgb(0, 0, 0);
    --west-color2:rgb(255, 221, 0);
    --west-color3:rgb(210, 182, 0);

    --est-color1:rgb(4, 0, 218);
    --est-color2:rgb(255, 26, 26);
    --est-color3:rgb(255, 255,255);

    --sud-color1:rgb(255, 255, 255);
    --sud-color2:rgb(34, 145, 0);
    --sud-color3:red;

}
/* 
body {
    font-family: 'Poppins', sans-serif;   
    margin: 0;
    padding: 0; */
    
 /*   color: white; LEAVE COMMENtED, ONLY REFERENCE
 /*   background-image: url('sopravert.jpg'); /* Replace with your image file path */
 /*   background-size: cover; /* Ensures it covers the whole page */
 /*   background-repeat: no-repeat; /* Prevents repeating */
 /*   background-attachment: fixed; /* Keeps it fixed when scrolling */
 /*   background-position: center center; /* Center the image */
 /*   /* Optional: Set a fallback background color */
 /*   background-color: #f0f0f0;
 */

 /* COMMENT AND UNCOMMENT THIS to toggle background image and text color white: */
    /* color: white; */
    /* background-image: url('foto_drone_buio-20prcnt.jpg'); */
    /* background-image: url('foto_drone_buio.jpg');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center center; 
    background-color: #f0f0f0;
 
} */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  color: white;
}

/* used in all pages */
.background { 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-image: url('foto_drone_buio.jpg'); */
  background-image: url('foto_drone_buio-20prcnt.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: -1; /* Send it behind the content */
}

/* used in all pages */
.content {
  position: relative;
  z-index: 1;
  padding-bottom: 1rem;
}

/* .cengapic{ */
    /* background-image: url('foto_drone_buio.jpg');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center center; 
    background-color: #f0f0f0; */
/* 
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('foto_drone_buio.jpg') center center / cover no-repeat;
    z-index: -1;
} */

/* used in all pages */
header {
    background-color: var(--main-color1);
    /* color: white; */
    color: var(--main-color3);
    text-align: center;
    padding: 0.5em 0;
    /* font-family: 'Dancing Script', cursive; */
    font-family: 'Poppins', sans-serif;
    font-size: 1em; /* Aggiornato per aumentare la dimensione del titolo */
}

/* per header link */
    .header-content {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .top-right-link {
        position: absolute;
        right: 20px;
        bottom: -10%;
        transform: translateY(-50%);
        color: white;
        font-family: 'Poppins', sans-serif;
        font-size: 0.9em;
        text-decoration: underline;
    }

    /* .top-right-link:hover {
        color: var(--main-color2);
    } */


main {
    padding: 20px;
    text-align: center;
}

a {
    text-decoration: none;
}

/* used in all pages */
a button {
    display: block;
    width: 250px;
    margin: 10px auto;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bolder;
    border-radius: 8px;
    border-width: 3px;
    border-style: outset;
    border-color: var(--main-color3);
    background-color: var(--main-color1);
    font-family: 'Poppins', sans-serif;
    color: white;
    /* color: var(--main-color3); */
    cursor: pointer;
    box-shadow: none;
}
a button:hover {
    background-color: var(--main-color2);
}
a button:focus {
    outline: none;
}

/* used in all pages */
.dropdown {
    display: block;
    width: 200px;
    margin: 10px auto;  
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

footer {
    background-color: var(--main-color2);
    color: white;
    text-align: center;
    padding: 1px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* .table-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
} */


#registration_teamTable {
    width: 80%; /* Larghezza desiderata della tabella */
    /* Altri stili desiderati per la tabella */
}

#registration_teamTable th, #registration_teamTable td {
    padding: 8px; /* Padding per le celle */
    text-align: center; /* Testo centrato nelle celle */
}
.bold-row {
    font-weight: bold;
}
/* Stile per la tabella */
/* .table-container-player-rankings {
    width: 65%;
    margin: auto;
} */

/* #playerTable {
    
    border-collapse: collapse; 
} */

/* #playerTable th, #playerTable td {
    padding: 5px; 
    text-align: center;
} */
/* 
.table-container-team-rankings {
    width: 90%;
    margin: auto;
} */

#registration_teamTable {
    
    border-collapse: collapse; /* Combina i bordi delle celle */
}

#registration_teamTable th, #registration_teamTable td {
    padding: 5px; /* Aggiunge spazio interno (padding) a tutte le celle */
    text-align: center; /* Centra il testo nelle celle */
}
.team-name {
    font-size: 1.2em; /* Dimensione del testo maggiore per il nome del team */
}

.player-info {
    font-size: 0.8em; /* Dimensione del testo minore per le informazioni sui giocatori */
}

.bold {
    font-weight: bold; /* Mantieni questa regola se vuoi che il tot_team sia in grassetto */
}

/* Celle della tabella */
#registration_teamTable th, #registration_teamTable td {
    padding: 8px; /* Aggiunge spazio interno alle celle */
    text-align: left; /* Allinea il testo a sinistra */
    font-size: 0.8em; /* Imposta una dimensione del testo di base */
}

/* Intestazioni della tabella */
#registration_teamTable th {
    background-color: #f2f2f2; /* Aggiunge uno sfondo alle intestazioni */
}

/* Stili specifici per mobile */
@media screen and (max-width: 768px) {
    /* Dimensioni del testo */
    #registration_teamTable th, #registration_teamTable td {
        font-size: 0.8em; /* Riduce la dimensione del testo per schermi piccoli */
        text-align: center; 
    }

    /* Dimensioni del testo per team name */
    .team-name {
        font-size: 1em; /* Aumenta leggermente la dimensione del testo per il nome del team */
    }

    /* Dimensioni del testo per player info */
    .player-info {
        font-size: 0.7em; /* Riduce leggermente la dimensione del testo per le informazioni sui giocatori */
    }
}

/* Contenitore delle schede */
.team-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 16px;
}


/* Scheda */
.team-card{
    background-color: #f9f9f9;
    color: black;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Intestazioni e informazioni */
.team-card-header {
    font-size: 1.5em;
    margin-bottom: 8px;
}

.team-card-body {
    font-size: 1.2em;
}

.team-card.bold {
    font-weight: bold;
}

.team-card.player-info {
    font-size: 1em;
    margin-bottom: 4px;
}

.team-card.punteggio-info {
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 3em;
}

/* Stili specifici per mobile */
@media screen and (max-width: 768px) {
    .team-card-header {
        font-size: 1.5em;
    }

    .team-card-body {
        font-size: 1.2em;
    }

    .team-card.player-info {
        font-size: 1em;
    }
}


/* Styles for player cards */
.player-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}

.player-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: calc(100% - 10px); /* Full width with padding adjustment */
    max-width: 400px;
    box-sizing: border-box;
}

.player-card h3 {
    margin-top: 0;
    font-size: 35px;
    font-weight: bold;
}

.player-card p {
    margin: 5px 0;
    font-size: 16px;
}

.player-card .total {
    font-weight: bold;
    font-size: 2em;
}
.player-card .total_memes {
    font-weight: bold;
    font-size: 1.3em;
}

@media (min-width: 600px) {
    .player-card {
        width: calc(50% - 30px); /* Two cards per row on medium screens */
    }
}

@media (min-width: 900px) {
    .player-card {
        width: calc(33.333% - 30px); /* Three cards per row on large screens */
    }
}


/* Styles for team cards */
.team_detail_team-cards-container1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}

.team_detail_team-card1 {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: calc(100% - 10px); /* Full width with padding adjustment */
    max-width: 400px;
    box-sizing: border-box;
}

.team_detail_team-card1 h3 {
    margin-top: 0;
    font-size: 24px;
    font-weight: bold;
}
.team-card h3 {
    margin-top: 0;
    font-size: 30px;
    font-weight: bold;
}

.team_detail_team-card1 p {
    margin: 3px 0;
    font-size: 20px;
}

.team_detail_team-card1 .total {
    font-weight: bold;
    font-size: 1.8em;
}

@media (min-width: 600px) {
    .team_detail_team-card1 {
        width: calc(50% - 40px); /* Two cards per row on medium screens */
    }
}

@media (min-width: 900px) {
    .team_detail_team-card1 {
        width: calc(33.333% - 40px); /* Three cards per row on large screens */
    }
}
.totalpointsindex{
    font-weight: bold;
    font-size: 2em;
}
.gamescore{
    width: 60%;
    margin: auto;
    margin-bottom:30px;
    margin-top:30px;
    font-size: 2em;
    flex-direction: row;
    display:flex;
}

.score_west{
    width: 50%;
    color: var(--west-color2);
    background-color: var(--west-color1);
    padding: 10px 20px;
    border-radius: 10px;
    border: 5px solid var(--west-color2);
    margin: 8px;
    font-weight: bold;
}
.score_nord{
    width: 50%;
    color: var(--nord-color2);
    background-color: var(--nord-color1);
    padding: 10px 20px;
    border-radius: 10px;
    margin: 8px;
    border: 5px solid var(--nord-color2);
    font-weight: bold;

}
    
.score_sud{
    width: 50%;
    color: var(--sud-color3);
    background-color: var(--sud-color1);
    padding: 10px 20px;
    border-radius: 10px;
    border: 5px solid var(--sud-color2);
    margin: 8px;
    font-weight: bold;

}
.score_est{
    width: 50%;
    color: var(--est-color3);
    background-color: var(--est-color1);
    padding: 10px 20px;
    border-radius: 10px;
    border: 5px solid var(--est-color2);
    margin: 8px;
    font-weight: bold;

}
.gameday{
    font-size: 1.5em;
}

.regolamento{
    width:85%;
    margin: auto;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border: 3px solid var(--main-color3);
    border-radius: 5px;
    color: var(--main-color2);
    padding-bottom:20px;
    background-color:white;

}
@media (max-width: 768px) {
    .gamescore {
        width: 90%;
        flex-direction: column;
        font-size: 1.5em;
        margin-top: 40px;
    }

    .score_west, .score_nord, .score_sud, .score_est {
        width: 80%;
        margin: 5px auto;
        font-size: 1em;
    }
}

.cardclassWEST{
    background-color: var(--west-color1);
    border: 6px solid var(--west-color2);
    color: var(--west-color2);
    border-radius: 12px;
}
.cardclassNORD{
    background-color: var(--nord-color1);
    border: 6px solid var(--nord-color2);
    color: var(--nord-color2);
    border-radius: 12px;
}
.cardclassSUD{
    background-color: var(--sud-color1);
    border: 6px solid var(--sud-color2);
    color: var(--sud-color3);
    border-radius: 12px;
}
.cardclassEST{
    background-color: var(--est-color1);
    border: 6px solid var(--est-color2);
    color: var(--est-color3);
    border-radius: 12px;
}

.cardclasssoftWEST{
    border: 10px solid var(--west-color3);
}
.cardclasssoftNORD{
    border: 10px solid var(--nord-color3);
}
.cardclasssoftSUD{
    border: 10px solid var(--sud-color2);
}
.cardclasssoftEST{
    border: 10px solid var(--est-color1);
}









.players-container {
    display: flex; /* Usa flexbox per disporre i giocatori su righe */
    flex-wrap: wrap; /* Avvolgi le card se non ci sono abbastanza spazi orizzontali */
    justify-content: center; /* Centra le card orizzontalmente */
    gap: 10px; /* Spazio tra le card */
    max-height: 400px; /* Altezza massima del contenitore */
    overflow-y: auto; /* Abilita lo scrolling verticale se necessario */
    margin-bottom: 20px; /* Margine inferiore per separare il team dal contenitore giocatori */
}

.player-card1 {
    flex: 1 0 calc(25% - 10px); /* Calc con spazi tra i bordi */
    max-width: 200px; /* Larghezza massima delle card */
    box-sizing: border-box; /* Rispetta il box model */
}
@media (max-width: 768px) {
    .player-card1 {
        flex: 1 0 calc(50% - 10px); /* Due card per riga su schermi più piccoli */
    }
}




.team-container {
    display: flex; /* Utilizza flexbox */
    flex-wrap: wrap; /* Avvolgi le card se necessario */
    justify-content: center; /* Centra le card orizzontalmente */
    gap: 10px; /* Spazio tra le card */
    margin-top: 20px; /* Margine superiore */
    /*border: 2px solid black;*/
}

/* .validmessage{
    font-size: 4em;
    color:white;
    background-color: green;
} */

/* .registrationlink{
    text-decoration: underline;
    color: cyan;
} */

.boxscore-tableNORD, .boxscore-tableWEST, .boxscore-tableEST, .boxscore-tableSUD{
    margin: auto;
    border-collapse: collapse;
    width: 100%;
}

.boxscore-tableNORD th, .boxscore-tableNORD td, .boxscore-tableWEST th, .boxscore-tableWEST td, .boxscore-tableEST th, .boxscore-tableEST td, .boxscore-tableSUD th, .boxscore-tableSUD td {
    border: 1px solid #ccc; /* Light grey border */
    padding: 5px; /* Padding inside table cells */
    font-size: 0.9em;
}


.boxscore-tableWEST th {
    background-color: var(--west-color1); /* Slightly different background for header */
    color: var(--west-color2);
    border: 2px solid var(--west-color2); /* Light grey border */

    
}
.boxscore-tableNORD th {
    background-color: var(--nord-color1); /* Slightly different background for header */
    color: var(--nord-color2);
    border: 2px solid var(--nord-color2); /* Light grey border */

}
.boxscore-tableSUD th {
    background-color: var(--sud-color1); /* Slightly different background for header */
    color: var(--sud-color3);
    border: 2px solid var(--sud-color2); /* Light grey border */

}
.boxscore-tableEST th {
    background-color: var(--est-color1); /* Slightly different background for header */
    color: var(--est-color3);
    border: 2px solid var(--est-color2); /* Light grey border */

}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}


.player-stats-container{
    display: flex;
    flex-direction: column;
    align-items: center; /* center the header */
    gap: 20px;
    margin: 20px;
}
.player-stats-header {
  text-align: center;
}
.player-stats-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1000px;
}
.game-card {
    /*non mettere colore o colore bordo perchè prende quello del team*/
    border-radius: 10px;
    padding: 15px;
    margin: 10px;
    max-width: 600px;
    min-width: 300px;
}

.game-card h3 {
    margin-top: 0;
}


.avviso{
    width: 80%;
    margin: auto;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border: 3px outset var(--main-color3);
    border-radius: 5px;
    color: var(--main-color1);
    padding-bottom:20px;
    background-color: white;
    /* background-color:var(--main-color3); */
}
.avviso_title{
    color: var(--main-color3);
    font-weight: bolder;
}

td { /* tutto serve per sfondo immagine*/
    background-color: white;/* sfondo per non fare trasparente*/
    color: black;
}



/* Only for the registration page to fix column width */
.fixed-column-table {
    table-layout: fixed;
}

/* Control width of columns inside fixed layout */
.fixed-column-table th:first-child, .fixed-column-table td:first-child {
    width: 70%; /* Name */
}

.fixed-column-table th:last-child, .fixed-column-table td:last-child {
    width: 30%; /* Cost */
}

.highlighted-text {
  color: white;
  /* background-color: black; */
  background-color: var(--main-color1);
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
}

.totalteamcard{
    color: black;
    border: 6px solid var(--main-color3);
}

.valid-message{
    color:white;
    background-color: green;
}
.registrationlink{
    text-decoration: underline;
    color: #00bbbb;
}
.refresh_button{
    display: block;
    width: 250px;
    margin: 10px auto;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 8px;
    /* background-color: var(--main-color1); */
    background-color: purple; 
    font-family: 'Poppins', sans-serif;
    color: white;
    border: none;
    cursor: pointer;
}
.instagram-button{
    display: block;
    width: 250px;
    margin: 10px auto;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    /* color: white; */
    color: var(--main-color1);
    background-color: var(--main-color3);
    border: 3px outset white;
    /* border-color: var(--main-color1); */
    cursor: pointer;
    /* background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,      
    #fdf497 5%,
    #fd5949 45%,    
    #d6249f 60%,     
    #285AEB 90%      
  ); */
    
}

.headerlogo {
    display: block;
    margin: 0 auto;
    height: 100px;
}
.rules_bonusmalus{
    color: var(--main-color3);
}
.team_ranking_pdk{
    color: var(--main-color3);
}
.team_ranking_pdk_tot{
    color: var(--main-color3);
    font-size: 2em;
    margin-top: 0.5em;
    margin-bottom:0.5em;
}
.orange_text{
    color: var(--main-color3);
}
.main_color_1_text{
    color: var(--main-color1);
}

.team_simulation_message{
    font-size: 13px;
}

.gameday-block {
  margin-bottom: 10rem; /* or any space you prefer */
}
.big_emoji{
    font-size: 2em;
}
.margin_top_and_bottom{
    margin-top: 30px;
    margin-bottom: 10px;
}

.fanta_gonfalone_24 img {
    width: 100%;
    max-width: 600px; /* Optional: limits size on large screens */
    height: auto;
    display: block;
    margin: 0 auto;
}
/* On smaller screens (mobile) */
@media screen and (max-width: 1000px) {
    .fanta_gonfalone_24 img {
        width: 90%;
    }
}
 /*STEMMI HOF */

.hof_stemmi_container {
    display: flex;
    justify-content: center;
    gap: 2%; /* spacing between logos */
    flex-wrap: nowrap; /* keep them on one line */
    margin: 20px 0;
    padding: 0 5%;
    box-sizing: border-box;
}

.hof_stemma {
    flex: 1 1 0; /* allow logos to shrink/grow equally */
    width: 22%; /* fits 4 in a row with spacing */
    max-width: 250px; /* fits 4 in a row with spacing */
}

.hof_stemma img {
    width: 100%;
    height: auto;
    display: block;
}