:root {
    --arancioStudioboost: #5bb224;
    --arancioChiaro: #b1d353;
    --arancioStudioboostScuro: #5bb224;
    --arancioStudioboostTrasparente: #f8d7ac;
    --arancioChiarissimo: #fff1dd;
    --grigioScuroNL: #767676;
    --griglioGrigliaTabella: #eee;
    --grigioChiaroNL: #eee;
    --sfondoNL: #fff;
    --verdeSuccess: #1fa421;
    --redError: red;
    --fontSizeCustomVerySmall: 11px !important;
    --fontSizeCustomSmall: 12px !important;
    --fontSiseCustomNormal: 14px !important;
    --fontSizeCustomLarge: 16px !important;
    --fontSizeCustomXLarge: 18px !important;
    --miniUnderlineBtn: 7rem !important;
    --lineheightSmall: 23px !important;
}

html,
body,
.container {
    height: 100%;
}
body {
    background: linear-gradient(135deg, #1649ca 0%, var(--arancioStudioboost) 100%);
}
.btn-warning {
    color: #fff !important;
    background-color: var(--arancioStudioboost) !important;
    border-color: var(--arancioStudioboost) !important;
}
.container {
    /* display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: column; */
    display: flex;
    grid-template-columns: 1fr 1fr 30rem 1fr;
    align-content: center;
    align-items: center;
    gap: 3rem;
    justify-items: center;
    justify-content: space-around;
}
.login-box,
.recupero-psw-box,
.aggiorna-psw-box {
    /* display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 1rem;
    padding: 1rem;
    z-index: 3; */
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 1rem;
    padding: 0.7rem;
    z-index: 3;
    position: relative;
    box-shadow: 2px 2px 10px 0px #5c5c5c;
}
.recupero-psw-box,
.aggiorna-psw-box {
    display: none;
}
.login-upper,
.recupero-psw-upper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.signin-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
    padding: 1rem;
    background-color: #f4f4f4;
    border-radius: 1rem;
    box-shadow: inset 0px 0px 4px -1px #8f8f8fa6;
}
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
}
.content input {
    border-radius: 4px;
    border: none;
    padding: 3px;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
    width: 20rem;
}
.actions {
    width: 100%;
}
.actions button {
    width: 100%;
    color: #f4f4f4;
    font-weight: bold;
}
.label-cotainer {
    padding-bottom: 4px;
}

.slide-top {
    visibility: visible !important;
    -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-125px);
        transform: translateY(-125px);
    }
}
@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-125px);
        transform: translateY(-125px);
    }
}

.message-box {
    min-height: 5rem;
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: -5.5rem;
    z-index: 1;
    width: 24rem;
    visibility: hidden;
}
.message-box a,
.message-box a:active,
.message-box a:focus {
    color: white;
}
.error-box {
    background-color: #ff4242;
}
.success-box {
    background-color: #5bb224;
}
.warning-box {
    background-color: #ff9800;
}
#logo {
    height: 12rem;
    margin-top: -9rem;
    margin-right: -4rem;
    overflow: hidden;
    filter: drop-shadow(2px 2px 4px #363636eb);
    /* transform: translatey(0px);
    -webkit-animation: float ease-in-out 5s infinite;
    animation: float ease-in-out 5s infinite; */
}

:root {
    --o: 20px; /* Determine how far the element will be from its origin */
}

@keyframes floatation {
    /* This operation creates a floating rotation around a center point — the offset guides how far from the center the element is */
    0% {
        transform: rotate(0deg) /* A */ translateX(var(--o)) /* X */ rotate(0deg); /* -A — since A = 0, no need for the minus sign */
    }
    100% {
        transform: rotate(360deg) /* A */ translateX(var(--o)) /* X */ rotate(-360deg); /* -A */
    }
}

.scritta {
    padding: 0.5rem;
    font-size: 14px;
    font-weight: bold;
    color: var(--arancioStudioboost);
}

@keyframes float {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(5px, -20px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

.linkrecoverpsw,
.linkrecoverpsw:active,
.linkrecoverpsw:hover {
    color: var(--arancioStudioboost);
    cursor: pointer;
}

.linkbacklogin,
.linkbacklogin:active,
.linkbacklogin:hover {
    color: var(--arancioStudioboost);
    cursor: pointer;
}
#password-strength-meter {
    width: 100%;
}
.passwordmetercontainer {
    display: flex;
    flex-direction: column;
}
#esclamationp {
    position: relative;
    z-index: 3;
    height: 4rem;
    top: -11rem;
    left: 9rem;
    overflow: hidden;

    opacity: 0%;
}
#containerlogo {
    transform: translatey(0px);
    -webkit-animation: float ease-in-out 5s infinite;
    animation: float ease-in-out 5s infinite;
}
.whut {
    animation: pulse 1.5s !important;
}

#containerlogo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 100%;
        /* filter: drop-shadow(0  0.5rem crimson); */
    }

    70% {
        transform: scale(1.2);
        /* filter: drop-shadow(0 0 0.5rem crimson); */
    }

    100% {
        transform: scale(0.95);
        /* filter: drop-shadow(0 0 0.5rem crimson); */
        opacity: 0%;
    }
}
#containerlogo.fiscobot,
.fiscobot,
.anc {
    display: none;
}
@media (max-width: 540px) {
    .container {
        flex-wrap: wrap;
    }
    #esclamationp,
    #logo {
        display: none;
    }
}
.passwpord-meter-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.pi-recupero-psw {
display: none;
}