/* ==========================================================================
   Pagine di accesso in stile Material: tutte quelle che usano _LayoutLogin.cshtml
   (accesso, scelta della sede o del profilo, password dimenticata o da cambiare,
   codice a due fattori, informative). Le regole stanno sotto .md-accesso, la
   classe del <body>; i colori vengono da material-tema.css.
   La pagina di accesso usa i campi con l'etichetta che sale sul bordo (.md-campo);
   le altre tengono il loro HTML di Bootstrap, che qui riceve lo stesso aspetto.
   Solo caratteri ASCII in questo file.
   ========================================================================== */

html {
    height: 100%;
}

body.md-accesso {
    background-color: var(--md-superficie);
    color: var(--md-testo);
    font-family: var(--md-carattere);
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
    min-height: 100%;
}

/* A sinistra la fotografia, a destra il foglio con il modulo. */
.md-accesso-pagina {
    display: flex;
    min-height: 100vh;
}

.md-accesso-immagine {
    background: linear-gradient(155deg, rgba(31, 60, 104, .88) 0%, rgba(41, 76, 128, .55) 55%, rgba(41, 76, 128, .30) 100%), url(../img/studioMedico_background.png) center / cover no-repeat;
    flex: 1 1 auto;
    min-width: 0;
}

/* Il foglio e' alto quanto la finestra e, se il contenuto e' piu' lungo (le informative), scorre
   per conto suo: la fotografia resta ferma. */
.md-accesso-pannello {
    background-color: var(--md-superficie);
    box-shadow: var(--md-ombra-3);
    display: flex;
    flex: 0 0 34%;
    flex-direction: column;
    height: 100vh;
    max-width: 540px;
    min-width: 420px;
    overflow-y: auto;
    padding: 40px 48px 20px;
}

/* I margini automatici tengono il contenuto a meta' altezza finche' ci sta. */
.md-accesso-corpo {
    margin: auto 0;
    width: 100%;
}

.md-accesso-logo {
    display: block;
    height: 34px;
    margin: 0 0 40px;
    width: auto;
}

.md-accesso .md-accesso-versione {
    color: var(--md-testo-tenue);
    font-size: 12px;
    margin: 28px 0 0;
    text-align: center;
}

/* ------------------------------------------------------------------ testi */

.md-accesso h1,
.md-accesso .md-accesso-titolo {
    color: var(--md-primario);
    font-family: var(--md-carattere);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
    margin: 0 0 8px;
}

.md-accesso h2,
.md-accesso h3,
.md-accesso h4 {
    color: var(--md-testo);
    font-family: var(--md-carattere);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 12px;
}

.md-accesso .md-accesso-sotto {
    color: var(--md-testo-secondario);
    font-size: 14.5px;
    margin: 0 0 26px;
}

.md-accesso p {
    margin: 0 0 12px;
}

.md-accesso hr {
    border-color: var(--md-contorno);
    margin: 14px 0 18px;
}

.md-accesso a {
    color: var(--md-primario);
    font-weight: 500;
    text-decoration: none;
}

.md-accesso a:hover,
.md-accesso a:focus {
    color: var(--md-primario-scuro);
    text-decoration: underline;
}

.md-accesso-collegamenti {
    border-top: 1px solid var(--md-contorno);
    font-size: 13px;
    margin-top: 26px;
    padding-top: 16px;
}

.md-accesso .md-accesso-collegamenti p {
    margin: 0 0 6px;
}

.md-accesso .md-accesso-dimenticata {
    margin: 16px 0 0;
    text-align: center;
}

/* ------------------------------------------------------------------ campi con l'etichetta sul bordo */

.md-campo {
    margin-top: 18px;
    position: relative;
}

.md-campo-testo {
    background-color: transparent;
    border: 1px solid var(--md-tratteggio);
    border-radius: 10px;
    color: var(--md-testo);
    font-family: inherit;
    font-size: 16px;
    height: 54px;
    outline: 0;
    padding: 0 16px 0 48px;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

.md-campo-con-pulsante .md-campo-testo {
    padding-right: 52px;
}

.md-campo-icona {
    color: var(--md-testo-secondario);
    font-size: 20px;
    left: 16px;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: 17px;
    transition: color .15s ease;
}

/* L'etichetta sta dentro il campo finche' e' vuoto, poi sale sul bordo, di cui copre un tratto
   con il colore del foglio. Il campo ha un segnaposto di un solo spazio: e' :placeholder-shown
   a dire se e' vuoto. */
.md-accesso .md-campo label {
    background-color: var(--md-superficie);
    color: var(--md-testo-secondario);
    font-size: 16px;
    font-weight: 400;
    left: 43px;
    line-height: 1;
    margin: 0;
    padding: 0 5px;
    pointer-events: none;
    position: absolute;
    top: 19px;
    transition: top .15s ease, left .15s ease, font-size .15s ease, color .15s ease;
}

.md-campo-testo:hover {
    border-color: var(--md-testo-secondario);
}

.md-campo-testo:focus {
    border-color: var(--md-primario);
    box-shadow: inset 0 0 0 1px var(--md-primario);
}

.md-campo-testo:focus ~ label,
.md-campo-testo:not(:placeholder-shown) ~ label {
    font-size: 12px;
    left: 13px;
    top: -7px;
}

.md-campo-testo:focus ~ label,
.md-campo-testo:focus ~ .md-campo-icona {
    color: var(--md-primario);
}

/* Il campo compilato dal browser non risulta "vuoto" a tutti i browser: regole a parte, perche'
   chi non conosce il selettore le scarterebbe insieme a quelle sopra. Il riempimento bianco
   toglie il colore che il browser mette sotto i dati salvati. */
.md-campo-testo:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px var(--md-superficie);
    -webkit-text-fill-color: var(--md-testo);
}

.md-campo-testo:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1px var(--md-primario), inset 0 0 0 1000px var(--md-superficie);
}

.md-campo-testo:-webkit-autofill ~ label {
    font-size: 12px;
    left: 13px;
    top: -7px;
}

/* Pulsante dentro il campo (mostra o nasconde la password). */
.md-campo-pulsante {
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--md-testo-secondario);
    cursor: pointer;
    font-size: 17px;
    height: 40px;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 7px;
    top: 7px;
    width: 40px;
}

.md-campo-pulsante:hover,
.md-campo-pulsante:focus {
    background-color: var(--md-sopra);
    color: var(--md-testo);
    outline: 0;
}

.md-campo-pulsante:focus-visible {
    outline: 2px solid var(--md-primario);
}

/* ------------------------------------------------------------------ errori e avvisi */

/* Campo non valido: bordo ed etichetta rossi (la classe la mette la validazione). */
.md-accesso .md-campo-testo.input-validation-error,
.md-accesso .md-campo-testo.input-validation-error:hover,
.md-accesso .md-campo-testo.input-validation-error:focus,
.md-accesso .form-control.input-validation-error,
.md-accesso .form-control.input-validation-error:focus {
    border-color: var(--md-errore);
}

.md-accesso .md-campo-testo.input-validation-error:focus,
.md-accesso .form-control.input-validation-error:focus {
    box-shadow: inset 0 0 0 1px var(--md-errore);
}

.md-campo-testo.input-validation-error ~ label,
.md-campo-testo.input-validation-error:focus ~ label,
.md-campo-testo.input-validation-error ~ .md-campo-icona {
    color: var(--md-errore);
}

.md-accesso .field-validation-error {
    color: var(--md-errore);
    display: block;
    font-size: 12.5px;
    margin: 5px 0 0;
}

/* Sotto un campo con l'etichetta sul bordo il messaggio rientra quanto il testo del campo. */
.md-accesso .md-campo + .field-validation-error {
    margin-left: 16px;
}

.md-accesso .text-danger {
    color: var(--md-errore);
}

.md-accesso .text-warning {
    color: #8a5a00;
}

/* Riepilogo degli errori (accesso non valido, account non attivo...). */
.md-accesso .validation-summary-valid {
    display: none;
}

.md-accesso .validation-summary-errors {
    background-color: var(--md-errore-tonale);
    border-radius: 10px;
    color: var(--md-errore);
    display: flex;
    font-weight: 500;
    gap: 10px;
    margin: 0 0 4px;
    padding: 12px 14px;
}

.md-accesso .validation-summary-errors::before {
    content: "\f06a";
    flex: 0 0 auto;
    font-family: FontAwesome;
    font-size: 17px;
    line-height: 1.2;
}

.md-accesso .validation-summary-errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* La riga di messaggio in cima ad alcuni moduli (icona + testo). */
.md-accesso #div-login-msg {
    align-items: flex-start;
    background-color: var(--md-primario-tonale);
    border-radius: 10px;
    color: var(--md-primario-scuro);
    display: flex;
    gap: 10px;
    padding: 12px 14px;
}

.md-accesso #icon-login-msg {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1.4;
    top: 0;
}

.md-accesso .alert {
    border: 0;
    border-radius: 10px;
    padding: 12px 14px;
}

.md-accesso .alert-info {
    background-color: var(--md-primario-tonale);
    color: var(--md-primario-scuro);
}

.md-accesso .alert-danger {
    background-color: var(--md-errore-tonale);
    color: var(--md-errore);
}

.md-accesso .alert-success {
    background-color: var(--md-riuscito-tonale);
    color: var(--md-riuscito);
}

.md-accesso #gcaptchamex {
    color: var(--md-errore);
    font-weight: 500;
    margin: 14px 0 0;
}

.md-accesso .g-recaptcha {
    margin: 16px 0 0;
}

/* ------------------------------------------------------------------ pulsanti */

.md-accesso .btn {
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    height: 48px;
    letter-spacing: .01em;
    line-height: 46px;
    padding: 0 24px;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.md-accesso .btn:focus-visible {
    outline: 2px solid var(--md-primario);
    outline-offset: 2px;
}

/* L'azione principale della pagina: piena, larga quanto il modulo. */
.md-accesso .btn-success,
.md-accesso .btn-primary {
    background-color: var(--md-primario);
    border-color: var(--md-primario);
    color: var(--md-su-primario);
    width: 100%;
}

.md-accesso .btn-success:hover,
.md-accesso .btn-success:focus,
.md-accesso .btn-success:active,
.md-accesso .btn-primary:hover,
.md-accesso .btn-primary:focus,
.md-accesso .btn-primary:active {
    background-color: var(--md-primario-scuro);
    border-color: var(--md-primario-scuro);
    box-shadow: var(--md-ombra-2);
    color: var(--md-su-primario);
    text-decoration: none;
}

.md-accesso .btn-success[disabled],
.md-accesso .btn-success[disabled]:hover,
.md-accesso .btn-primary[disabled],
.md-accesso .btn-primary[disabled]:hover {
    background-color: var(--md-contorno);
    border-color: var(--md-contorno);
    box-shadow: none;
    color: var(--md-testo-tenue);
    opacity: 1;
}

/* Le azioni secondarie: solo il contorno. */
.md-accesso .btn-info,
.md-accesso .btn-default,
.md-accesso .btn-warning {
    background-color: transparent;
    border-color: var(--md-tratteggio);
    color: var(--md-primario);
    width: 100%;
}

.md-accesso .btn-info:hover,
.md-accesso .btn-info:focus,
.md-accesso .btn-default:hover,
.md-accesso .btn-default:focus,
.md-accesso .btn-warning:hover,
.md-accesso .btn-warning:focus {
    background-color: var(--md-primario-tonale);
    border-color: var(--md-primario);
    color: var(--md-primario-scuro);
    text-decoration: none;
}

.md-accesso-azione {
    margin-top: 24px;
}

/* ------------------------------------------------------------------ moduli di Bootstrap delle altre pagine */

/* Le viste avvolgono il modulo nei riquadri delle finestre modali e lo impaginano a colonne
   pensate per una pagina larga: nel foglio tutto va in una colonna sola, etichetta sopra e
   campo sotto. */
.md-accesso .modal-body,
.md-accesso .modal-footer {
    border: 0;
    padding: 0;
    text-align: left;
}

.md-accesso .modal-footer {
    margin-top: 20px;
}

.md-accesso .form-horizontal .form-group {
    margin: 0 0 16px;
}

.md-accesso .form-horizontal .form-group::before,
.md-accesso .form-horizontal .form-group::after {
    display: none;
}

.md-accesso .form-group > [class*="col-"],
.md-accesso .form-group > center {
    display: block;
    float: none;
    margin-left: 0;
    padding: 0;
    width: 100%;
}

.md-accesso .form-group > center + center {
    margin-top: 12px;
}

.md-accesso .control-label,
.md-accesso .form-horizontal .control-label,
.md-accesso label {
    color: var(--md-testo-secondario);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
}

.md-accesso .form-control {
    border: 1px solid var(--md-tratteggio);
    border-radius: 10px;
    box-shadow: none;
    color: var(--md-testo);
    font-size: 15px;
    height: 46px;
    padding: 0 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.md-accesso .form-control:focus {
    border-color: var(--md-primario);
    box-shadow: inset 0 0 0 1px var(--md-primario);
}

/* Campo con un'icona davanti o un pulsante dietro: i pezzi restano uniti in un unico contorno. */
.md-accesso .input-group .form-control:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.md-accesso .input-group .form-control:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.md-accesso .input-group-addon {
    background-color: var(--md-superficie-variante);
    border-color: var(--md-tratteggio);
    border-radius: 10px;
    color: var(--md-testo-secondario);
    min-width: 44px;
}

.md-accesso .input-group-addon:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.md-accesso .input-group-addon:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.md-accesso .input-group-addon[onclick] {
    cursor: pointer;
}

.md-accesso .input-group-addon .btn,
.md-accesso .input-group-btn .btn {
    border-radius: 0 10px 10px 0;
    height: 46px;
    line-height: 44px;
    width: auto;
}

/* Un pulsante da solo dentro il gruppo (senza campo accanto) torna un pulsante normale. */
.md-accesso .input-group-addon:only-child {
    background-color: transparent;
    border: 0;
    display: block;
    padding: 0;
}

.md-accesso .input-group-addon:only-child .btn {
    border-radius: 24px;
    height: 48px;
    line-height: 46px;
    width: 100%;
}

.md-accesso .policy-list {
    color: var(--md-testo-secondario);
    margin: 14px 0;
    padding-left: 20px;
}

/* ------------------------------------------------------------------ scelta della sede o del profilo */

.md-accesso .modal-body > .row {
    margin: 0;
}

.md-accesso .chooserAccount {
    align-items: center;
    border: 1px solid var(--md-contorno) !important;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    float: none;
    gap: 14px;
    margin: 0 0 8px;
    padding: 10px 14px;
    transition: background-color .15s ease, border-color .15s ease;
    width: 100%;
}

.md-accesso .chooserAccount:hover {
    background-color: var(--md-sopra);
    color: var(--md-testo);
}

/* La scelta fatta (la classe la mette la pagina al clic). */
.md-accesso .chooserAccount.chooserAccountHover {
    background-color: var(--md-primario-tonale);
    border-color: var(--md-primario) !important;
    color: var(--md-primario-scuro);
}

.md-accesso .chooserAccount .image {
    color: var(--md-primario);
    flex: 0 0 auto;
    float: none !important;
}

.md-accesso .chooserAccount .image img {
    height: 40px;
    width: 40px;
}

.md-accesso .chooserAccount .image .fa {
    font-size: 26px;
    margin: 0 4px !important;
}

.md-accesso .chooserAccount .info {
    float: none !important;
    min-width: 0;
}

.md-accesso .chooserAccount .info p {
    margin: 0;
}

.md-accesso .chooserAccount .info small {
    color: var(--md-testo-secondario);
}

/* ------------------------------------------------------------------ schermi stretti */

@media (max-width: 899px) {
    .md-accesso-immagine {
        display: none;
    }

    .md-accesso-pannello {
        box-shadow: none;
        flex: 1 1 auto;
        height: auto;
        max-width: 520px;
        min-height: 100vh;
        min-width: 0;
        margin: 0 auto;
        padding: 32px 24px 16px;
    }
}

/* Il riquadro del CAPTCHA e' largo 304 px e non si restringe da solo. */
@media (max-width: 359px) {
    .md-accesso .g-recaptcha {
        transform: scale(.88);
        transform-origin: 0 0;
    }
}