﻿
/* head-auth */
.head-auth-modal {
    __display:none; position:fixed; z-index:999; left:0; top:0; 
    width:100%; height:100%; background-color:rgba(0,0,0,0.5);
    display:flex;            /* Diventerà 'flex' tramite JavaScript */
    justify-content:center;  /* Centratura Orizzontale */
    align-items:center;      /* Centratura Verticale */
}
.head-auth-content {
    background-color:#fff; margin:15% auto; padding:20px 20px 18px 20px; 
    border-radius:8px; width:400px; box-shadow:0 4px 8px rgba(0,0,0,0.2);
    font-family:Arial, sans-serif;
    transition:all 0.3s ease-in-out;
    margin:0;
}
.head-auth-header { display:flex; justify-content:space-between; align-items:center; padding:5px; border-bottom:1px solid #ddd; background-image:url('../images/svg/lock-open.svg'); background-size:30px 20px; background-position:0% 50%; background-repeat:no-repeat; }
.head-auth-header h3 { margin:0px 0px 2px 30px; font-size:1.2rem; color:rgb(40, 68, 86); }
.head-auth-close { font-size:28px; cursor:pointer; }
.head-auth-form { margin-top:15px; }
.head-auth-form label { display:block; margin-bottom:5px; font-weight:bold; color:#565656; }
.head-auth-form input { width:100%; padding:8px; box-sizing:border-box; border:1px solid #ccc; border-radius:4px; font-weight:bold; color:rgb(40, 68, 86); }
.head-auth-footer { margin-top:20px; text-align:right; border-top:1px solid #ddd; padding-top:10px; }
.head-auth-footer button { padding:8px 15px; margin:5px 0px 0px 5px; cursor:pointer; }
.head-auth-warn { float:left; color:red; background:#fde8e8; padding:10px; border-radius:4px; __margin-bottom:10px; }
.head-auth-warn label { float:left; }
.head-auth-warn meter { float:left; clear:left; width:100%; }
.head-auth-info { background:#e1f5fe; padding:10px; border-radius:4px; font-size:0.9rem; }
.head-auth-info output { font-weight:bold; }
.head-auth-help { color:purple; _background:#e1f5fe; _padding:10px; border-radius:4px; float:right; }
.head-auth-help p { color:blue; background:#e1f5fe; padding:8px; border-radius:4px; _font-size:0.5rem }

.head-auth-wait { float:left; width:30px; height:30px;
      border:5px solid #e0e0e0; /* Colore del cerchio di sfondo (grigio chiaro) */
      border-top:5px solid #0078d4; /* Colore della parte che gira (Blu stile Windows 11) */
      border-radius:50%; /* Rende il quadrato un cerchio perfetto */
      animation:auth-wait 1s linear infinite; /* Applica l'animazione */
    }
@keyframes auth-wait { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }


/* overrides css head title */
.head-title { position:absolute; float:left; }

@media screen and (min-width: 1025px) /* desktop */
{
  .head-title b { line-height:normal !important; font-size:4vw !important; }
  .head-title i { line-height:normal !important; font-size:2vw !important; }
}
@media screen and (min-width: 768px) and (max-width: 1024px)  /* tablet */
{
  .head-title b { line-height:normal !important; font-size:5vw !important; }
  .head-title i { line-height:normal !important; font-size:3vw !important; }
}
@media screen and (min-width: 0px) and (max-width: 767px)     /* phone */
{
  .head-title b { line-height:normal !important; font-size:6vw !important; }
  .head-title i { line-height:normal !important; font-size:4vw !important; }
}
