:root{ --blu:#005499; --fucsia:#d51b8b; --arancio:#EC843E; --rosino:#fee4d1; --azzurrino:#e5eef5; --violetto:#d5d3e9; --bianco:#FFFFFF; --nero:#0A0A0A; --grigio:#e4e4e4; --grigioScuro:#d0d0d0; }

html{ scroll-behavior:smooth; }

#pageContainer{ margin-top:32px; }
#pageContainer div.t1{ font-size:42px; line-height:50px; font-weight:bold; margin-bottom:32px; color:var(--blu); }
#pageContainer div.t2{ font-size:24px; color:var(--blu); line-height:26px; font-weight:bold; margin:30px 0 5px 0; }
#pageContainer div.t3{ font-size:20px; color:var(--blu); line-height:24px; font-weight:bold; margin:40px 0 5px 0; }
#pageContainer div.t4{ font-size:18px; color:var(--blu); line-height:20px; font-weight:bold; margin:24px 0 2px 0; }
#pageContainer a{ color:var(--blu); text-decoration:underline; cursor:pointer; transition:all 250ms ease-out; }
#pageContainer .btn{ background-color:var(--blu); display:inline; min-width:64px; margin:0 8px; padding:8px 16px; border-radius:16px; text-align:center; font-size:16px; color:var(--bianco); cursor:pointer; text-decoration:none; transition:all 450ms ease-in-out; }
#pageContainer .btn:hover{ background-color:var(--fucsia); box-shadow:none; }
#pageContainer thead, .pageBody tbody, .pageBody tfoot{ border:1px solid #cdcdcd; }
#pageContainer tbody th { background-color:var(--blu); color:var(--bianco); vertical-align:middle; border:1px solid var(--blu); }
#pageContainer tbody tr{ border-bottom:1px solid #cdcdcd; background:none; }
#pageContainer td{ font-size:14px; line-height:20px; text-align:left; vertical-align:super; }
#pageContainer .note{ font-size:14px; line-height:20px; }

.topBar{ background-color:var(--blu); }
.topBar .grid-x{ justify-content:space-between; align-items:center; }
.topBar .btn{ display:inline-block; font-size:18px; padding:4px 16px; color:var(--bianco); transition:all 250ms ease-out; }
.topBar .btn:hover{ background-color:var(--fucsia); cursor:pointer; }
.topBar .btn.small{ display:inline-block; font-size:12px; padding:2px 6px; color:var(--bianco); border:1px solid var(--bianco); border-radius:4px; transition:all 250ms ease-out; margin:0 8px; }
.topBar .btn.small img{ width:16px; margin:-3px 6px 0 0; }
.topBar .btn.small:hover{ background-color:var(--fucsia); cursor:pointer; }

.topBar .user{ color:var(--bianco); }


.loginBox{ 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5c59a3+0,d60c7e+50,e84541+100 */
    background:linear-gradient(to right, #5c59a3 0%,#d60c7e 50%,#e84541 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    margin:0 auto 48px auto; padding:10px 16px 16px 16px; border-radius:16px 16px 4px 4px; 
}
.loginBox .title{ font-size:20px; color:var(--bianco); margin-bottom:4px; }
.loginBox label{ font-size:12px; color:var(--bianco); font-weight:bold; }
.loginBox input[type="text"], .loginBox input[type="password"]{ height:28px; font-size:14px; }
.loginBox a{ color:var(--bianco) !important; font-size:12px; text-decoration:underline; transition:all 450ms ease-in-out; }
.loginBox a:hover{ color:var(--arancio) !important; }
.loginBox .btn{ background-color:var(--blu); display:inline; padding:6px 16px; border-radius:16px; border:1px solid var(--bianco); text-align:center; font-size:14px; color:var(--bianco); box-shadow:none; cursor:pointer; transition:all 450ms ease-in-out; }
.loginBox .btn:hover{ background-color:var(--rosa); box-shadow:none; }

.boxProvider{ background-color:var(--violetto); margin:48px auto; padding:16px; border-radius:16px 16px 4px 4px; }
.boxProvider .title{ color:var(--fucsia); font-size:16px; line-height:16px; font-weight:bold; margin:0 auto 8px auto; }
.boxProvider p{ font-size:12px; line-height:16px; color:var(--nero); margin:4px auto 0 auto; }
.boxProvider p a{ color:var(--nero) !important; text-decoration:underline; transition:all 450ms ease-out; }
.boxProvider p a:hover{ color:var(--fucsia) !important; }

.shadowCenter {
    position: relative;
}

.shadowCenter:after {
    content: "";
    position: absolute;
    z-index: -1;

    left: 2%;
    bottom: -22px;

    width: 96%;
    height: 30px;

    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.28) 35%,
        rgba(0, 0, 0, 0.10) 60%,
        rgba(0, 0, 0, 0) 78%
    );

    transform: scaleX(1.05);
}

/*
.shadowCenter{ position:relative; box-shadow:0 0 0 rgba(0, 0, 0, 0.3); }
.shadowCenter:after{ content:""; position:absolute; z-index:-1; top:100%; bottom:0; width:120%; height:50px; left:-10%; right:-10%;
    background:-webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 30%);
    background:radial-gradient(ellipse at 50% -3%, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 30%);
}
*/

/* Form */
.isMandatory{ font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif; color:var(--fucsia); font-size:24px; line-height:24px; }
form label{ color:var(--blu); font-size:14px; font-weight:bold; line-height:22px; }
form input[type="text"], form input[type="password"]{ height:32px; background-color:#FFF; border:solid 1px #cacaca; border-radius:4px; font-size:16px; padding:4px; resize:none; }
form input[type="password"]{ font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
form select{ height:32px; padding-top:4px; padding-left:4px; font-size:16px; }
form select option{ font-size:14px; }
form [type="checkbox"], form [type="radio"]{ margin-top:2px; }
form input[type="text"]:focus{ background-color:#FFF;  border:solid 1px #cacaca; border-radius:4px; }
form input[type="text"].inputError{ background-color:#fff5f8;  border:solid 1px var(--rosso); border-radius:4px; font-size:16px; margin-right:10px; width:100%; resize:none; }
input:disabled, input[readonly]{ background-color:#EEE !important; cursor:not-allowed; }
.captchaText{ margin-bottom:5px; font-weight:bold; color:#505050; } 

/* Footer */
footer{ background-color:var(--grigioScuro); padding:32px 0 16px 0; margin-top:32px; font-size:11px; color:var(--nero); }
footer a{ font-size:11px; color:var(--nero); text-decoration:underline; transition:all 250ms ease-out; }
footer a:hover{ color:var(--grigio); }

/* Popup */
.reveal{ padding:0; background-color:var(--bianco); backdrop-filter:blur(5px); border-radius:4px; }
.reveal .winTitle{ font-size:18px; text-align:left; background-color:var(--blu); font-weight:400; color:var(--bianco); padding:2px 48px 2px 16px; }
.reveal .close-button{ color:var(--bianco); top:0.05rem; right:1rem; font-size:1.6em; transition:all 450ms ease-in-out; }
.reveal .close-button:hover{ color:var(--arancio); }
.reveal .winBody{ display:flex; align-items:center; padding:16px 16px 0 16px; }
.reveal .winIco{ max-width:96px; margin-right:16px;  }
.reveal .winMsg{ font-size:16px; line-height:20px; color:var(--nero); font-weight:300; }
.reveal .winBtns{ display:flex; justify-content:flex-end; align-items:center; padding:4px 32px 16px 16px; }
.reveal .winBtns a{ background-color:var(--blu); display:inline; min-width:64px; margin:0 8px; padding:2px 16px; border-radius:16px; text-align:center; font-size:16px; color:var(--bianco); cursor:pointer; text-decoration:none; box-shadow:0 4px 4px 0 #BABABA; transition:all 450ms ease-in-out; }
.reveal .winBtns a:hover{ background-color:var(--fucsia); box-shadow:none; }
