:root {
    --background: #f6f9ff;
    --primario: #313a46;
    --secondario: #37404a;
    --menu_utente: #f6f9ff;
    --menu_utente_border: #eef2f7;
    --menu_testo: #8391a2;
    --menu_testo_hover: #bccee4;
    --menu_testo_selected: #ffffff;
    --logo_bg: #727cf5;
    --button: #727cf5;
    --button_hover: #6973e3;
    --testo: #6c757d;
}

html,
body {
    background-color: var(--background);
    width: 100%;
    height: 100%;
    color: var(--testo);
    float: left;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-pages {
    width: 100%;
}

.card {
    border: none;
}

a {
    color: var(--button) !important;
}

a:hover {
    color: var(--button_hover) !important;
}

button {
    background-color: var(--button) !important;
    border-color: var(--button) !important;
}

button:horizontal {
    background-color: var(--button_hover) !important;
    border-color: var(--button_hover) !important;
}

#div_login,
#div_updatepass,
#div_recoveruser,
#div_recoverpass {
    width: 100% !important;
    height: 100%;
    float: left;
}

#div_login > div,
#div_updatepass > div,
#div_recoveruser > div,
#div_recoverpass > div {
    width: 100% !important;
    margin: 0px !important;
    float: left;
}

#div_login > div > a,
#div_updatepass > div > a,
#div_recoveruser > div > a,
#div_recoverpass > div > a {
    width: 100% !important;
    margin: 0px !important;
    float: left;
}

#div_login > div > a > span,
#div_updatepass > div > a > span,
#div_recoveruser > div > a > span,
#div_recoverpass > div > a > span {
    background-color: var(--logo_bg) !important;
    width: 100%;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 7px 7px 0px 0px;
    float: left;
}

.card {
    border-radius: 7px;
}

.card-body {
    background-color: #ffffff;
    padding: 0px !important;
    border-radius: 7px;
}

.flip-container,
.flipper {
    width: 100%;
    height: 100%;
    float: left;
}

form {
    width: 100%;
    padding: 25px;
    float: left;
}

form input {
    border-radius: 5px !important;
}

.blocco_login {
    position: relative;
    z-index: 99999;
}

.blocco_login::before {
    content: '';
    background-color: var(--logo_bg);
    width: 180%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
    opacity: 0.2;
}

.blocco_login::after {
    content: '';
    background-color: var(--logo_bg);
    width: 280%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
    opacity: 0.1;
}