@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*
font-family: 'Comfortaa', cursive;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
*/
body {font-family: 'Roboto', sans-serif; font-size: 16px; color: #333;}
h1, h2, h3, h4, h5 {font-family: 'Comfortaa', cursive;}
h1 {text-transform: uppercase; font-weight: 400;}
.m-b-10 {margin-bottom:10px;}
.navigation ul li a {display: block; border-bottom: 1px dotted #f39c12;padding:3px 6px; font-size:14px;}
.navigation ul li {list-style: none;}
.navigation ul {margin-bottom:20px;}
a {text-decoration: none; color:#2980b9;}
a:hover {color:#d35400!important;}
a:active {font-weight: 700; color:#d35400!important;}
th {text-align: center;}
@media screen{
	a.nav-link {padding-top: 17px; padding-bottom: 17px;}
	.bkg-green {background-image: url("../images/bkg.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size:cover; background-position: center center;}
	.head-top {padding-top: 3px; padding-bottom: 3px; font-size: 14px;}
	.head-top a {color:#fff; text-decoration: none;}
	.head-top p {margin-bottom:0px;}
	.head-top .submenues {text-transform: uppercase;line-height:37px;}
	footer {padding-top:24px; padding-bottom:24px;}
  	.main-content {margin-top:50px; margin-bottom:26px;}
	.bg-grey {background:#333;}
	.bkg_tifosi {background-image: url("../images/bkg-tifosi.jpg"); background-attachment: fixed; background-repeat: no-repeat; background-size:cover; background-position: center center; padding-top:50px; padding-bottom:50px; color:#fff; margin-top: 50px;}
	.comunicazioni {background-image: url("../images/bkg-comunicazione.jpg"); background-attachment: fixed; background-repeat: no-repeat; background-size:cover; background-position: center center; padding-top:50px; padding-bottom:50px; color:#fff; margin-top: 50px;}
	.classifiche {margin-top:50px; margin-bottom:50px;}
}

.onoffswitch3{position: relative; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
.onoffswitch3-checkbox {display: none;}
.onoffswitch3-label {display: block; overflow: hidden; border: 0px solid #999999; border-radius: 0px;margin-bottom:0px;}
.onoffswitch3-inner {display: block; width: 200%; margin-left: -100%;-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;}
.onoffswitch3-inner > span {display: block; float: left; position: relative; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family:'Roboto', sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.onoffswitch3-inner .onoffswitch3-active {padding-left: 10px; background-color: #EEEEEE; color: #FFFFFF;}
.onoffswitch3-inner .onoffswitch3-inactive { width: 100px; padding-left: 16px; background-color: #EEEEEE; color: #FFFFFF; text-align: right;}
.onoffswitch3-switch {display: block; width: 50%; margin: 0px; text-align: center; border: 0px solid #999999;border-radius: 0px; position: absolute; top: 0; bottom: 0;}
.onoffswitch3-active .onoffswitch3-switch { background: #27A1CA; left: 0; width: 160px;}
.onoffswitch3-inactive{background: #A1A1A1; right: 0; width: 20px;}
.onoffswitch3-checkbox:checked + .onoffswitch3-label .onoffswitch3-inner {margin-left: 0;}
.glyphicon-remove{padding: 3px 0px 0px 0px; color: #fff; background-color: #000; height: 25px; width: 25px; border-radius: 15px; border: 2px solid #fff;}
.scroll-text{color: #333;}

/*AMMINISTRAZIONE*/
.edit {border:1px solid #000; float: right; padding:3px 8px;margin-left:6px; border-radius: 3px;}
.edit img {width:15px; height:15px;}
.edit.bg-warning, .edit.bg-info, .edit.bg-success {--bs-bg-opacity:0.2;}
.edit.bg-info {margin-top:30px;}
img.function {width:15px; height:15px;}
.admin-site {border:1px solid #000; border-radius: 3px; padding:8px; margin-bottom:20px;}
.admin-site h5 {font-size:14px; text-transform: uppercase; text-align:center;}
.admin-site .pulsante {max-width: 35px; max-height: 35px; margin:4px;}
.admin-site .pulsanti {text-align:center;}
.utam {font-size:12px;}

footer ul {margin-top:20px; margin-bottom:20px; padding-left: 0px;}
footer ul li {list-style-type: none; padding:3px 0px;}
footer ul li a {color:#f1c40f; }

/*SQUADRE e FSQUADRE*/
.box-team {background-color: #1abc9c; border:1px solid #16a085; border-radius:10px;padding:12px;margin-bottom:30px; font-size:14px;}
.box-team strong {text-transform:uppercase;}
.head-sq {padding:6px; border: 1px solid #333; border-radius:10px; margin-bottom:20px; background-color: aliceblue;}
.head-sq h1 {margin-bottom: 0px; line-height: 64px;}
.head-sq .boxino {padding:6px; border: 1px solid #333; border-radius:10px; background-color: white;}
.head-sq .head-logo {float:left; margin-right:20px;}
.head-sq .head-naz {float:right; margin-left:20px;}
.box-worker {padding:6px 10px; border-radius: 10px; border:1px solid #333;}

.box-stagioni {text-align: center; background-color: antiquewhite; border:1px solid #333; border-radius: 10px; display: block; padding:50px; margin-bottom: 20px;}

/*REGOLAMENTO*/
div.regolamento {text-align:justify;}
.elenco_regolamento {margin-right:20px; font-size:20px; float:left;}
.logos {width:50px; height:50px;}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        z-index: 5000;
    }
}



/* Immagine mappata campo x scheda giocatore*/
.campo-container {
    position: relative;
    width: 300px;
    height: 480px; /* Altezza proporzionale all'immagine verticale */
    background-image: url( "../../../images/campo_calcio.png");
    background-color: #01C930;
    background-size: cover;
}

.posizione {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Per rendere le aree a forma di cerchio */
    background-color: rgba(255, 255, 255, 0.8); /* Bianco trasparente */
    border: 1px solid rgba(0, 0, 0, 0.3); /* Bordo leggero */
    cursor: default; padding-top:3px; text-align: center;
}
a.posizione {color:#c0392b; font-weight: 700;}
a:hover.posizione {color:#c0392b; font-weight: 700;}
.ruoli {background-color: #f1c40f; padding:6px; text-align: center; font-size: 20px; margin-bottom:20px; border-radius:10px; border:1px solid #333; }

/* Posizionamento di ogni singola posizione */
.portiere { top: 90%; left: 50%; transform: translate(-50%, -50%); padding-top:3px; text-align: center}
.difensore-centrale { top: 75%; left: 50%; transform: translate(-50%, -50%); }
.terzino-destro { top: 75%; left: 80%; transform: translate(-50%, -50%); }
.terzino-sinistro { top: 75%; left: 20%; transform: translate(-50%, -50%); }
.mediano { top: 60%; left: 50%; transform: translate(-50%, -50%); }
.centrocampista-centrale { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.centrocampista-destro { top: 50%; left: 80%; transform: translate(-50%, -50%); }
.centrocampista-sinistro { top: 50%; left: 20%; transform: translate(-50%, -50%); }
.trequartista { top: 37%; left: 50%; transform: translate(-50%, -50%); }
.seconda-punta { top: 25%; left: 50%; transform: translate(-50%, -50%); }
.punta { top: 10%; left: 50%; transform: translate(-50%, -50%); }
.esterno-destro { top: 25%; left: 80%; transform: translate(-50%, -50%); }
.esterno-sinistro { top: 25%; left: 20%; transform: translate(-50%, -50%); }

/* Stile base del container */
.countdown-box {
    border: 5px solid #333; /* Bordo sottile grigio scuro */
    background-color: #000; /* Sfondo nero profondo */
    /* display: inline-block;  Per adattarsi al contenuto */
}

/* Stile del testo del timer */
.countdown-text {
    font-family: 'Consolas', 'Courier New', monospace; /* Font digitale/monospaced */
    font-size: 2rem; /* Numeri molto grandi */
    font-weight: bold;
    color: #00ff40; /* Verde neon o #FFFFFF per un bianco puro */
    padding: 10px 20px;
    letter-spacing: 2px; /* Spazio tra i caratteri per leggibilità */
}

/* Stile per i numeri più piccoli (giorni) */
@media (min-width: 768px) {
    .countdown-text {
        font-size: 2rem; 
    }
}