/* @import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap'); */
/*-- sopra solo fonts ---*/


:root {
--white: #fff;
--grey: #f1f1f1;
--text: #333;
--textinverted: #eee;
--bkg: #eee;
--bkgwhite: #fff;
--bkggrey: #ccc;
--bkgdark: #333;
--bkgovertime: #900;
--linee: #999;

--red: #e71c03;
--redcontrast: #A01003;
--yellow: #fdc40a;
--light: #f8f9fa;
--black: #021f3c;
--scuro: #1a3850;
}


html {min-height: 100%; height: 100%;}
body {min-height: 100%; height: 100%; position: relative;}
/* ELEMENTI FISSI OVUNQUE */

button {display: block; font-size: 20px; min-width: 70px; min-height: 50px; padding: 8px; color: var(--text); background: var(--grey); border: solid 1px var(--bkggrey); white-space: nowrap; box-shadow: 0 3px var(--bkgdark); border-radius: 6px; margin: 0 auto;}
.textbutton {font-size: 12px; font-weight: bold;}
@media (max-width: 500px) { button {min-width: 50px; min-height: 40px;} .textbutton {font-size: .7em;}}

.comandi p {white-space: nowrap;}


/* INTESTAZIONE */
.header {display: flex; justify-content: center; width: 100%; height: 30px; padding-top: 8px; border-bottom: solid 1px var(--scuro);}
.linktohome {display: block; width: 55px; height: 55px; aspect-ratio:1 / 1;}
.toro {width: auto; max-width: 100%; aspect-ratio:1 / 1;}

strong {color: var(--red);border-bottom: solid 3px var(--yellow);}
.appname {padding: 2em; max-width: 650px; text-align: left; margin: 0 auto;}
.appname h2 {margin:  0 auto;}
.appname p {margin: 5px auto 15px; min-width: 250px;}
.appname p.tiny {font-size: .7em; line-height: .9em;}

hr {width: 150px;margin: 2em auto;border: 4px solid var(--yellow);border-radius: 4px;}



/* STILI TRASVERSALI A TUTTE LE PAGINE  */
* {margin: 0; padding: 0;}
*:focus {outline: none;}
body {background: var(--light); color: var(--black); font-family: sans-serif;}


.container {width:90%; max-width: 820px; margin: 5% auto; border-radius: 10px; padding: 3% 5%; text-align: center; font-size: 1.5em; line-height: 1.5em;}
.containerlogin label, .containerregister label  {margin-right: 8px;}


.containercomandi p {}
em {font-style: normal;}


/* ----- update del 30 aprile 2025 */
input#team_1, input#team_2 {position: relative; border: 0; border-bottom: dashed 1px var(--white); background:#555; font-family: 'Oswald', sans-serif; font-size: 1em; text-align: center; color: var(--white);}
input#team_1:hover, input#team_2:hover {background: #888;}
/* tooltip */
.comandi {position: relative;}
.comandi p.team .nametooltip {display: none;}
.comandi p.team:hover .nametooltip {display: block; position: absolute; left: 0; top: -3em; background: var(--grey); border: solid 1px var(--red); padding: .2em; color: var(--text); font-family: sans-serif; font-size: .8em; text-align: left;}
/* ----- fine update del 30 aprile 2025 */



.containercomandi .team em {margin-right: 8px;}
.livepaused button {box-shadow: none;}
.containerlogin button, .containerregister button, .teaminsertion button, .resetemail button {min-width: 70px;}
.teaminsertion p, .resetemail p {margin-top: 7%;}

.timertempo .resetfields em {font-size: 2.5em; margin-left: 2px; margin-right: 2px; padding-top: 7px;}
input[type='number'] {-moz-appearance:textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;} 

.generictoggle em.off {background:red;}
.generictoggle em.on {background:green;}

a.externallink {background-image: url(../external-ltr.svg); background-position: center right; background-repeat: no-repeat; padding-right: 16px;}


/***************************************** STILI MODULI / bottoni ************/
.comandi {display: grid; grid-gap: 10px;}
.comandipoints, .comandigame, .comanditimeouts, .attempts, .outs, .innings, .bases, .balls, .strikes {grid-template: auto / 1fr 1fr;}
.comandipoints p, .comandigame p, .comanditimeouts p, .attempts p, .outs p, .innings p, .bases p, .balls p, .strikes p {grid-column: 1 / -1;}

.comandipoints .plusbutton, .comandigame .pushbutton, .comanditimeouts .pushbutton, .attempts .pushbutton, .outs .pushbutton, .innings .pushbutton, .bases .pushbutton, .balls .pushbutton, .strikes .pushbutton {float: right;}
.comandipoints .minusbutton, .comandigame .minusbutton, .comanditimeouts .minusbutton, .attempts .minusbutton, .outs .minusbutton, .innings .minusbutton, .bases .minusbutton, .balls .minusbutton, .strike .minusbutton {float: left;}
.comandipoints .resetbutton, .comandigame .resetbutton, .comanditimeouts .resetbutton, .attempts .resetbutton, .outs .resetbutton, .innings .resetbutton, .bases .resetbutton, .balls .resetbutton, .strikes .resetbutton {grid-column: 1 / -1;}




/*--------- EFFETTI */
@media not all and (pointer: coarse) { button:hover {background-color: #BEBCBC;} }
button:active {background-color: #BEBCBC; box-shadow: 0 7px #666; transform: translateY(4px);}
.livepaused button:active{transform: none;}


/* FORMS LOGIN E REGISTRATION, RESETEMAIL E SELECTSTYLE */
.login input, .registration input, .teaminsertion input, .logocustom input, .resetemail input, #styleselectorid {font-size: 1.5em; font-family: 'Oswald', sans-serif; padding: 3px 5px; max-width: 250px;}
.containerlogin .login, .containerregister .registration, .teaminsertion, .resetemail {display: grid; grid-template: auto / 100%; justify-items: center; grid-gap: 10px;}

.insertyourstyle {display:grid; grid-template: auto / auto auto; column-gap: 10px;}
.insertyourstyle p {grid-column: 1/-1;}
.insertyourstyle input {grid-column: 1/2;}
.insertyourstyle button {grid-column: 2/3; place-self: center;}
.insertyourstyle input::placeholder {color:#ddd;}
.insertyourstyle input:focus::placeholder {color:transparent;}


.footer {margin-top: 30px; padding-top: 10px; border-top: 1px solid #ccc; display: flex; flex-flow: row nowrap; justify-content:flex-end;}
.footer a {color: white; margin: 0 12px 0 0; text-align: right;}
.containerlogin .footer, .containerregister .footer {justify-content:center;}

.containerregister .registration {grid-template: auto / 0.4fr 0.6fr; align-items: center; grid-column-gap: 10px; grid-row-gap: 15px;}
.registration label {grid-column: 1 / 2; justify-self: right; text-align: right;}
.registration input {grid-column: auto / -1; justify-self: left; max-width: 100%;}
.registration .privacyapproval {grid-row: 5/6; grid-column: 1 / 3;}
.registration .buttons_wrapper {grid-row: 6/7; grid-column: 1 / 3; width: 100%; display: flex; flex-flow: row nowrap; justify-content: center;}

.registration .buttons_wrapper button {margin: 5px;}
#l_password, #r_password, #r_conf_password, #c_password, #c_conf_password {-webkit-text-security: disc;}
.containerlogin button, .teaminsertion button, .resetemail button {margin: 0 auto 10px;}
.registration .buttons_wrapper {margin-top: 15px;}
.containerlogin .buttons_wrapper, .teaminsertion .buttons_wrapper, .resetemail .buttons_wrapper {display: grid; grid-template: auto / 1fr 1fr; grid-gap: 15px;}
.containerresetemail .appname p:nth-last-child(1) {font-size: 20px;}
.registration .privacyapproval {display: flex; flex-flow: row nowrap; gap: 8px; align-items:center; text-align: left; max-width: 300px;}
.loginprivacychanged .privacyapproval {display: grid; grid-template: auto / 1fr 1fr; grid-row-gap: 15px; grid-column-gap: 8px;  max-width: 400px; margin: auto;}
.loginprivacychanged .privacyapproval input {transform: scale(1.5); justify-self: end; align-self:center;}
.loginprivacychanged .privacyapproval .iaccept {grid-column: 2/-1;justify-self: start; margin: 0; align-self: center;}
.loginprivacychanged .privacyapproval button {grid-column: 1/-1;}
.containerprivacychanged {margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.containerprivacychanged p {grid-column: 1/3;}
.containerprivacychanged a {color: white; text-transform: uppercase;}

.registration a, 
.privacyapproval a {color: white; text-transform: uppercase;}
.deadline .privacyapproval {grid-row: auto; grid-column: auto; max-width: 100%; margin-top: 40px;}
.deadline .privacyapproval p {display: inline-block; margin: 0 auto; width: 80%;}
.privacysubscriprion a {color: var(--red) !important;}

.useralertsubscribtion {width: auto; min-width: 300px; max-width: 400px; margin: 0 auto;}
.useralertsubscribtion p {text-align: left; font-size: 1.3em}
.useralertsubscribtion .expirationdate {margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid 1px #999; text-align: center;}
.useralertsubscribtion .expirationdate em {font-size: 2em;}
.useralertsubscribtion .userinfo {font-size: 1.8em;}
.useralertsubscribtion .messageforuser {font-size: 1em;}
p.registrationrules {font-size: 1.4em;}
p.registrationrules strong {text-decoration: underline;}

p.usernamebox {display: inline-block; grid-column: 1 / -1;}
p.usernamebox em {font-size: 1.5em;}

/* MENU PRINCIPALE */
.menubuttons {text-align: center;}
.buttonsnewlive {display: flex; justify-content: center; flex-wrap: wrap;}
.buttonsnewlive button {min-width: 80px; text-transform: capitalize; margin: 10px; padding: 10px 0;}
.livepaused {text-align: left; padding-top: 15px; padding-bottom: 15px; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; margin-top: 10px; margin-bottom: 10px; text-transform: capitalize;}
.livepaused .live_paused_list {list-style: none; display: grid; grid-row-gap: 10px; align-items: center;}
.live_paused_list li {display: grid; grid-template: auto / 3fr minmax(80px, 1fr) minmax(80px, 1fr); align-items: center; padding: 5px; border: 1px solid #ccc; border-radius: 10px;}

.logocustom {display: grid; grid-template: auto / 100%; grid-gap: 15px; align-items: center;}
.logocustom input {min-width: 100px; font-size: 1em; margin: 0 auto;}
.logocustom button {min-width: 100px;}


.privacyframecontainer {transition: opacity 500ms; visibility: hidden; opacity: 0;}
.privacyframecontainer:target {visibility: visible; opacity: 1;}
.privacyframecontainer {position: fixed; width:90vw; height: 90vh; top: 0; left: 0; background: rgba(0,0,0,0.6); padding: 5vh 5vw;}
.privacyframecontainer .privacyframe {width: 100%; height: 100%; border: 0;}
.privacyframecontainer .closeframe {position: absolute; right: 5.5vw; top: 5.5vh; padding: 5px 8px; color: white; background:#333; text-decoration: none; font-weight: bold; font-family: Arial, "sans-serif"; font-size: 2em;}



/*--------------------------- DASHBOARD STILI -------------------------- */

/* container comandi */
.dashboardbuttons {display: grid; grid-template-rows: auto auto; justify-items: center; grid-column-gap: 10px; grid-row-gap: 20px;}
.plusminuspointsbuttons, .plusminusfoulsbuttons {display: grid; grid-template-columns: 1fr 1fr; grid-row-gap: 10px;}


.containercomandi {display: grid; grid-template: auto / repeat(3, 1fr); grid-gap: 15px; align-items: flex-start; justify-items: center;}


/* Alert connessione */
.connectionalerton {margin: 20px auto auto 0; padding: 8px 0; border: dashed 1px var(--linee); grid-column: 1 / -1; grid-row: -1; width: 100%;}
.connectionalertoff {display: none;}




/* timer */
.timertempo .ttfeatures {}
.timertempo .ttfeatures .startstop {display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 10px; justify-items: center;}
.timertempo .ttfeatures .reset {display: flex; flex-direction: column; align-items: center; padding-top: 12px; margin-top: 12px; border-top: 1px solid #ccc;}
.timertempo .resetfields input {width: 60px; height: 40px; margin: 15px 0px; padding: 5px 0px; border: 1.5px solid white; border-radius: 10px; box-shadow: 0 3px #333; text-align: center; font-family: 'Oswald', sans-serif; font-size: 1.6em; color: white; background: transparent;}
.timertempo .resetfields {display: flex; flex-direction: row; justify-content: center;}
.timertempo .ttfeatures .reset p {margin: 0px 0px 0px 0px;}
.timertempo #timer {font-size: 2em;}
/* campo insert altri valori */
.dashboardbuttons .resetfields input {margin: 0 auto; padding: 5px 0px; border: 1.5px solid white; border-radius: 10px; box-shadow: 0 3px #333; text-align: center; font-family: 'Oswald', sans-serif; font-size: 1.6em; color: white; background: transparent;}


/* momenti + falli */
.moments {display: grid; grid-template: auto / 1fr 1fr; grid-gap: 10px;}
.moments .label, .moments .value {grid-column: 1 / -1;}
.moments .plusbutton {grid-column: span 1;}
.moments .minusutton {grid-column: span 2;}
.comandifouls {display: grid; grid-template: auto / 1fr 1fr; grid-gap: 10px;}
.comandifouls .label, .comandifouls .value {grid-column: 1 / -1;}
.comandifouls .plusbutton {grid-column: span 1;}
.comandifouls .minusutton {grid-column: span 2;}


/* calendars + n° gara per boxe */
.calendars {display: grid; grid-template: auto / 1fr 1fr; grid-gap: 10px;}
.calendars .label, .moments .value {grid-column: 1 / -1;}
.calendars .plusbutton {grid-column: span 1;}
.calendars .minusutton {grid-column: span 2;}



/* overtime */
.overtime {display: grid; grid-template: auto / 100%; grid-gap: 10px;}
.overtime .value em{ display: inline-block; padding: 5px 8px; font-size: 1.5em;}
.overtime .on {background-color: green;}
.overtime .off {background-color: red;}


/* url e menubottom */
.dashboardurl {font-size: inherit; margin-top: 30px; padding: 10px; border-top: solid 1px #ccc;}
.dashboardurl a {color: #fff;}
.menubottom {display: grid; grid-template: auto / 1fr 1fr 1fr; grid-gap: 15px;}
.menubottom button {min-width: 90px; cursor: pointer;}
.menubottom .backtomenu {grid-column: span 1/ -1; }
.menubottom .buttoncopytoken {background: none; color: white;}
.menubottom .buttoncopytoken:before {content: "Demo "; color: red;}
.menubottom .buttoncopytoken .hide {display: none;}
.menubottom .buttoncopytoken.hide {display: none;}


@media (max-width: 500px) {
	.menubottom {display: grid; grid-template: auto / 1fr 1fr; grid-gap: 15px;}
	.menubottom .copylink {grid-column: 1/span 1; grid-row: 1/span 1;}
	.menubottom .buttoncopytoken {grid-column: 1/ -1; grid-row: 2/span 1;}
	.menubottom .backtomenu {grid-column: span 1/ -1; grid-row: 1/span 1;}
}

/* loader pagina pagamento*/
#loadingDiv {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
  }

/*-- stili pagina pagamento --*/
.productBlock p {white-space: nowrap; letter-spacing: -3px; color: var(--black); font-size: clamp(80px, 15vw, 100px); text-align: center; font-weight: bold;}
.productBlock p em {font-size: .5em; font-style: normal;}
.productBlock p strong {font-size: 1.5em; font-weight: bold; color:var(--black); margin-right: .1em;}
.productBlock .vatincluded {font-size: .15em; letter-spacing: normal; margin-left: 5px;}



.paymentsnotes p.subscriptionexplain {padding-left: 10px; border-left: dotted 4px var(--linee); font-size: 1.2em; line-height: 1.3em; font-weight: normal; font-family: arial, serif; text-align: left; margin: 3em 0;}
.paymentsnotes p.subscriptionexplain:before {content: "Renewal:"; background: #000; color: var(--textinverted); padding: 3px 5px; margin-right: 15px;}




/*--- pagina notifica abbonamento scaduto (temposcaduto.html) ---*/

.expirationalert {}
.expirationalert p {font-family: Arial, serif; font-size: 1.5em;}
.expirationalert .buttoncontainer {display: flex; flex-flow: row nowrap; justify-content: center; gap: 20px; margin: 40px 0;}



/*************** WARNINGS ! *********/
.swal-title, .swal-text {font-family: 'Oswald', sans-serif; color:#333; line-height: 1em;}
.swal-text {text-align: center; padding: 0 20px; font-size: 25px;}
.swal-title {font-size: 40px;}
.swal-modal {color:#333; background-color: #dddddd; border: 3px solid white;}
.swal-button {color: var(--text); background: var(--grey); border: solid 1px var(--bkggrey); white-space: nowrap; box-shadow: 0 3px var(--bkgdark); border-radius: 6px;}

.swal-icon--warning, .swal-icon--error {border-color: red !important;}
.swal-icon--success {border-color: green !important;}
.swal-icon--success__line {background-color: green !important;}
.swal-icon--warning__body, .swal-icon--warning__dot, .swal-icon--error__line {background-color: red !important;}
.swal-icon:before, .swal-icon:after, .swal-icon--success__hide-corners {background: transparent !important; border-color: transparent !importantimportant;}  


/************* News dal blog *************/

.blognews {width:90%; max-width: 820px; margin: 0 auto; background: #606060; border-radius: 10px; padding: 3% 5%; font-family: 'Oswald', sans-serif; color: white; margin-bottom: 30px;}

.blognews h1 {font-size: clamp(15px, 7vw, 30px);}
.blognews h1 a {color:red;}
.blognews ul {list-style: none; display:flex; flex-flow: column nowrap; font-family: Arial, serif; max-width: 500px;}
.blognews ul li a {color:white; text-decoration:none;}
.blognews ul li a:hover {text-decoration: underline;}
.blognews ul li {border-bottom: dotted 1px #999; padding: .7em;}
.blognews ul li:hover {background: rgba(255,255,255,0.2);}




/************* PAGINA inserimento squadre e selezione stile scoreboard *********/

.separatorline {border-bottom: solid 1px #777; width:60%; min-width:250px; margin: 15px auto;}
.styleselector a {color: white;}
.styleselector a:hover {color: blue;}
.styleselector a.externallink {margin: 0 5px;}




/*------- Disabilita funzioni -------*/
.disabled .logocustom input#fileAjax,
.disabled .logocustom button.textbutton,
.disabled .styleselector {display: none;}