:root[data-color-mode="light"] {
    --colorTextMain:#4b5563;/*colore del testo principale*/
    --colorInput:#4b5563;/*colore del testo degli input*/
    --bgMain:#fff;
    --bgSecond:#f3f4f6;
    --borderColor:#d1d5db;
    --border:1px solid var(--borderColor);
    --navBgHoverColor:#1118271a;
    --blue:#1467b5;
    --white:#fff;
    --red:#ef4444;
        --green:#009245;
    --radius:4px;
        --bgInput:transparent;
}

:root[data-color-mode="dark"] {
    --colorTextMain:#d1d5db;
    --colorInput:#f3f4f6;
    --bgMain:#1f2023;
    --bgSecond:#28292c;
    --borderColor:#4b5563;
    --border:1px solid var(--borderColor);
    --radius:4px;
    --navBgHoverColor:#ffffff1a;
    --blue:#1467b5;
    --white:#fff;
    --red:#ef4444;
    --green:#009245;
    --bgInput:var(--bgMain);
}


@font-face {font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src: url('font/inter-regolar.woff2') format('woff2');}
@font-face {font-family: 'Inter';font-style: normal;font-weight: 600;font-display: swap;src: url('font/inter-bold.woff2') format('woff2');}

@keyframes scalein{0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}}
@keyframes rotator{0%{transform:rotate(0deg);}100%{transform:rotate(270deg);}}
@keyframes dash{0%{stroke-dashoffset:187;}50%{stroke-dashoffset:46.75;transform:rotate(135deg);}100%{stroke-dashoffset:187;transform:rotate(450deg);}}
*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{background-color:var(--bgSecond);font-family:Inter,Helvetica,Arial,sans-serif;color:var(--colorTextMain);font-size:14px;font-weight:400;overflow-x:hidden;}
input[type="text"],input[type="password"],select{background:var(--bgInput);display:block;width:100%;height:44px;border:var(--border);margin:5px 0 8px;padding:8px;border-radius:var(--radius);font-size:16px;color:var(--colorInput)}
input[type="text"]:focus,input[type="password"]:focus,select:focus{outline:0;border-color:var(--blue);}
input::placeholder{color:var(--colorTextMain)}
label{display:block;font-weight:600;user-select:none;text-align:left;}

input[type="checkbox"]{float:left;background:var(--bgInput);position:relative;border:1px solid #98a6ad;border-radius:2px;width:19px;height:19px;margin-right:6px;appearance:none;cursor:pointer;transition:background 0.3s, border-color 0.3s, box-shadow 0.2s;}
input[type="checkbox"]:after{content:'';display:block;position:absolute;top:2px;left:5px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(20deg);opacity:0;transition:transform 0.3s ease, opacity 0.2s;}
input[type="checkbox"]:checked{background:var(--blue);border-color:var(--blue);}
input[type="checkbox"]:checked:after{transform:rotate(45deg);opacity:1;}
/*SWITCH*/
input[type="checkbox"].switch{background:var(--bgMain);width:38px;height:21px;border-radius:11px;border-color:var(--borderColor);}
input[type="checkbox"].switch:checked{background:var(--blue);border-color:var(--blue);}
input[type="checkbox"].switch:after{background:#cfd9db;left:2px;top:2px;width:15px;height:15px;border-radius:50%;border:0;transform:translateX(0);opacity:1;}
input[type="checkbox"].switch:checked:after{background:#fff;transform:translateX(17px);}

svg{display:inline-block;color:inherit;height:1em;width:1em;font-size:1.2em;line-height:1;flex-shrink:0;max-width:initial;}

.btn{background-color:var(--blue);display:inline-block;width:100%;padding:11px 12px;border:1px solid transparent;border-radius:var(--radius);color:var(--white);text-align:center;cursor:pointer;font-weight:600;font-size:18px;}
.btn:hover{filter:saturate(1.4);}

.box{background-color:var(--bgMain);border:var(--border);border-radius:var(--radius);box-shadow:0 0 5px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.1);}

#login{position:absolute;top:50%;left:50%;width:96%;max-width:450px;padding:15px 30px 30px;text-align:center;transform:translate(-50%,-50%)}
#login p {margin:6px 0 19px;font-size:16px;}

.form{text-align:left;overflow:hidden;}
.form a{color:var(--blue)}
.form .repass{display:block;text-align:center;margin-top:9px;}
.form a:hover{opacity:0.7}
.form_password{position:relative;}
.form_password_view{position:absolute;right:5px;top:29px;display:flex;border-radius:50%;width:32px;height:32px;cursor:pointer;align-items:center;justify-content:center;font-size:18px;}
.form_password_view.hide{}
.form_password_view:hover{background-color:#eaedf1;}

.form_switchtheme{display:flex;justify-content:space-between;align-items:center;}
.form_switchtheme div{display:flex;margin-top:5px;gap:0 5px;align-items:center;}
.form_switchtheme input{margin:0;}
.form_switchtheme svg{font-size:25px;}

.form_resetPassword{display:flex;margin:10px 0 15px;justify-content:space-between;align-items:center;}


#msg:not(.msgok){background:var(--red);border-radius:var(--radius);width:100%;margin:0 auto;color:var(--white);font-size:15px;}
#msg.error,#msg .error{margin-bottom:8px;padding:8px 10px;animation:scalein .1s linear 0s 1;}
#msg.error a,#msg .error a{color:var(--white);}


#loading{clear:both;display:block;opacity:0;filter:alpha(opacity=0);width:0;height:0;margin:-7px auto 7px auto;animation:rotator 1.4s linear infinite;}
#loading.on{opacity:1;filter:alpha(opacity=100);width:30px !important;height:30px !important;}
.path{stroke:var(--blue);stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite;}
.msgok{background-color:var(--green);border-radius:4px;width:100%;margin:9px auto;color:var(--white);text-align:center;padding:5px 0;font-size:15px;line-height:1.5em;}
@media(max-width:425px){
    #login{padding:20px;}
    #login p{margin:6px 0 11px;}
}
@media(max-height:485px){
#login{position:static;margin:5px auto 0;transform:inherit;}
}