/* Stesso aspetto del login del voice: i blocchi sono presi da
   module/web/lib/css/ del repo centralix.go.voice (style.css, form.css,
   template_login.css) e dalle regole inline di module/web/utenti/login.php,
   ridotti alle sole parti che servono a questa pagina. */

/* --- base (style.css) --- */
* {margin:0; padding:0; box-sizing:border-box;}
html, body {-webkit-text-size-adjust:none; height:100%; margin:0; padding:0;}
body {
    background-color:#dddddd;
    font-family: Arial, sans-serif;
    font-size:12px;
    color:#333;
}
a, a:link, a:visited, a:active {color:#4E83AB; text-decoration:none; cursor:pointer;}
a:hover {color:#3399CC;}
img {border:medium none; outline:none;}
.left{float:left!important;}
.right{float:right!important;}
.clear{clear:both;}
.boxko{
    border:red solid 1px; background:#ffdede; text-align:center; color:red;
    line-height:30px; min-height:30px; padding:5px;
}

/* --- impaginazione (template_login.css) --- */
#wrapper_main {
    display:table;
    overflow:hidden;
    height:100%;
    width:100%;
}
#bg_box {
    display:table-cell;
    position:relative;
    text-align:center;
    background:url(login-bg.jpg) no-repeat scroll center center / cover;
}
#box_main {
    display:table-cell;
    height:100%;
    position:relative;
    width:400px;
    color:#333333;
    background:#fff;
}
.box_main_content {
    overflow-x:hidden;
    overflow-y:auto;
    padding:25px;
    text-align:justify;
}
.box_main_logo {
    margin-bottom:33px;
    text-align:center;
}
.Formlogin{width:100%; margin:0 0 33px 0;}

@media (max-width: 600px) {
    #bg_box {display:none;}
}
@media (max-width: 420px) {
    #box_main {width:100%;}
    .Formlogin{width:100%;}
}

/* --- campi con label flottante (form.css) --- */
.FormFloatLabel {position:relative; width:100%;}
.FormFloatLabel .Campo {position:relative; margin-bottom:27px;}
.FormFloatLabel .inputMaterial_FL {
    font-size:16px;
    color:#333333;
    padding:5px 10px 10px 5px;
    display:block;
    width:100%;
    border:none;
    border-bottom:1px solid #0077B5;
    background:transparent;
}
.FormFloatLabel .inputMaterial_FL:focus {outline:none;}
:invalid {box-shadow:none;}
.FormFloatLabel label {
    color:#999;
    font-size:14px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all;
}
.FormFloatLabel .inputMaterial_FL:focus ~ label,
.FormFloatLabel .inputMaterial_FL:valid ~ label {
    top:-15px; font-size:11px; color:#0077B5; font-weight:bold;
}
.FormFloatLabel .bar_FL {position:relative; display:block; width:100%;}
.FormFloatLabel .bar_FL:before, .FormFloatLabel .bar_FL:after {
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background:#0077B5;
    transition:0.2s ease all;
}
.FormFloatLabel .bar_FL:before {left:50%;}
.FormFloatLabel .bar_FL:after {right:50%;}
.FormFloatLabel .inputMaterial_FL:focus ~ .bar_FL:before,
.FormFloatLabel .inputMaterial_FL:focus ~ .bar_FL:after {width:50%;}

/* --- pulsante (inline in login.php) --- */
.DivSceltaBlu{
    width:100%;
    height:40px;
    border:2px solid #0077B5;
    margin-top:20px;
    text-align:center;
    background-color:#0077B5;
    color:white;
    font-size:16px;
    border-radius:5px;
    cursor:pointer;
    padding:0 10px;
}
.DivSceltaBlu:hover{
    color:#0077B5;
    background-color:white;
    transition-duration:0.6s;
}

/* --- nota sotto il form, non esiste sul voice --- */
.nota{
    margin-top:30px;
    color:#777;
    font-size:11px;
    line-height:16px;
    text-align:left;
}