/* 
    CSS pagina di login del centralino-reperibilita
    a sinistra abbiamo i campi per fare la login e a destra l'immagine di sfondo
*/

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* evita lo scroll dovuto a header/footer/padding del _Layout */
}

.loginrep-page{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display:flex;
    background:#fff;
}

/* parte sinistra */
.loginrep-panel{
    width:35%;
    min-width:480px;
    max-width:560px;

    background:#fff;
    padding:40px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* parte destra */
.loginrep-right{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:#fff;
    padding:40px;
    box-sizing:border-box;
}

.loginrep-right-image{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* campi user e pwd: icone sulla sinistra */
.input-group-text{
    background:#fff;
    border-right:none;
    border-radius:12px 0 0 12px;
}

.input-group .form-control{
    border-left:none;
}

.input-group i{
    color:#8c8c8c;
    font-size:18px;
}

/* rimuovi il focus singolo sull'input, lo gestiamo sul gruppo */
.input-group .form-control:focus {
    box-shadow: none;
    border-color: #ced4da;
}

/* effetto focus su tutto il gruppo (icona + input) */
.input-group {
    border-radius: 12px;
    transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}

.input-group:focus-within {
    box-shadow: 0 0 0 .25rem rgba(13, 27, 76, .25); /* alone coerente col blu scuro del bottone Login */
}

.input-group:focus-within .input-group-text {
    border-color: #0d1b4c;
}

.input-group:focus-within .form-control {
    border-color: #0d1b4c;
}

/* uniformare i bordi dell'icona e del campo input a destra */
.input-group .form-control{
    border-left:none;
    border-radius: 0 12px 12px 0; /* angoli destri coerenti con l'icona a sinistra */
}