/* ==================================================
   SOS SEGNALAZIONI - LOGIN
   ================================================== */

.sos-login-wrap {

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 35px 15px;

    box-sizing: border-box;
}


/* BOX LOGIN */

.sos-login-box {

    width: 100%;
    max-width: 380px;

    background: #ffffff;

    border: 1px solid #d8d8d8;
    border-radius: 10px;

    padding: 22px 24px 18px 24px;

    box-sizing: border-box;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.08);
}


/* ==================================================
   INTESTAZIONE
   ================================================== */

.sos-login-header {

    display: flex;
    align-items: center;

    gap: 12px;

    padding-bottom: 14px;
    margin-bottom: 18px;

    border-bottom: 1px solid #e5e5e5;
}


.sos-login-icon {

    font-size: 28px;
    line-height: 1;
}


.sos-login-header h1 {

    margin: 0 !important;
    padding: 0 !important;

    font-size: 20px !important;
    line-height: 1.2 !important;

    font-weight: 700;
    color: #222;
}


.sos-login-subtitle {

    margin-top: 3px;

    font-size: 12px;

    color: #666;
}


/* ==================================================
   ERRORE LOGIN
   ================================================== */

.sos-login-error {

    margin-bottom: 15px;

    padding: 9px 11px;

    background: #fff2f2;

    border: 1px solid #e3aaaa;
    border-radius: 6px;

    color: #a00000;

    font-size: 12px;
}


/* ==================================================
   FORM
   ================================================== */

.sos-login-form {

    margin: 0;
    padding: 0;
}


.sos-login-field {

    margin-bottom: 13px;
}


.sos-login-field label {

    display: block;

    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 600;

    color: #333;
}


.sos-login-field input {

    display: block;

    width: 100% !important;
    height: 38px !important;

    margin: 0 !important;

    padding: 7px 10px !important;

    box-sizing: border-box !important;

    border: 1px solid #c9c9c9 !important;
    border-radius: 6px !important;

    background: #ffffff !important;

    color: #222 !important;

    font-size: 13px !important;

    outline: none;
}


.sos-login-field input:focus {

    border-color: #6c9bcf !important;

    box-shadow:
        0 0 0 2px rgba(108,155,207,0.15) !important;
}


/* ==================================================
   PULSANTE
   ================================================== */

.sos-login-button {

    width: 100% !important;
    height: 38px;

    margin-top: 4px !important;

    padding: 7px 15px !important;

    border: 0 !important;
    border-radius: 6px !important;

    background: #1976d2 !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    cursor: pointer;
}


.sos-login-button:hover {

    background: #1565c0 !important;
}


/* ==================================================
   FOOTER
   ================================================== */

.sos-login-footer {

    margin-top: 16px;
    padding-top: 11px;

    border-top: 1px solid #eeeeee;

    text-align: center;

    font-size: 10px;

    color: #888;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 480px) {

    .sos-login-wrap {

        padding: 20px 12px;

    }

    .sos-login-box {

        max-width: 100%;

        padding: 20px;

    }

}