/* Schermi grandi o ad alta risoluzione */
@media screen and (min-width: 1690px) {
    #pswd_info {
        display: none;
        position: absolute;
        width: 18rem;
        padding: 1rem;
        z-index: 99999;
        top: 320px;
        left: 20px;
        backdrop-filter: blur(18px) saturate(180%);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        background-color: rgba(255, 255, 255, 0.58);
        border-radius: 12px;
        border: 1px solid rgba(209, 213, 219, 0.3);
    }

        #pswd_info span {
            margin: 0 0 0.3rem 0;
            padding: 0;
            font-family: var(--fuenteLight);
            font-weight: normal;
            font-size: 1.1rem;
            color: var(--colorBlack);
        }

        #pswd_info ul, #pswd_info li {
            margin: 0;
            padding: 0;
            list-style-type: none;
            font-family: var(--fuenteLight);
            font-size: 0.8rem;
        }

            #pswd_info ul li {
                padding-left: 2.1rem;
            }

    .invalid {
        background: url(../svg/close-pwd.svg) no-repeat 0 50%;
        background-size: 1.5rem 1.5rem;
        padding-left: 2.2rem;
        line-height: 2rem;
        color: var(--colorred);
    }

    .valid {
        background: url(../svg/check-pwd.svg) no-repeat 0 50%;
        background-size: 1.5rem 1.5rem;
        padding-left: 2.2rem;
        line-height: 2rem;
        color: var(--colorgreen);
    }
}

/* Schermi Desktop o Portatili */
@media screen and (min-width: 1280px) and (max-width: 1689px) {
    #pswd_info {
        display: none;
        position: absolute;
        width: 18rem;
        padding: 1rem;
        z-index: 99999;
        top: 320px;
        left: 20px;
        backdrop-filter: blur(18px) saturate(180%);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        background-color: rgba(255, 255, 255, 0.58);
        border-radius: 12px;
        border: 1px solid rgba(209, 213, 219, 0.3);
    }

        #pswd_info span {
            margin: 0 0 0.3rem 0;
            padding: 0;
            font-family: var(--fuenteLight);
            font-weight: normal;
            font-size: 1.1rem;
            color: var(--colorBlack);
        }

        #pswd_info ul, #pswd_info li {
            margin: 0;
            padding: 0;
            list-style-type: none;
            font-family: var(--fuenteLight);
            font-size: 0.8rem;
        }

            #pswd_info ul li {
                padding-left: 2.1rem;
            }

    .invalid {
        background: url(../svg/close-pwd.svg) no-repeat 0 50%;
        background-size: 1.5rem 1.5rem;
        padding-left: 2.2rem;
        line-height: 2rem;
        color: var(--colorred);
    }

    .valid {
        background: url(../svg/check-pwd.svg) no-repeat 0 50%;
        background-size: 1.5rem 1.5rem;
        padding-left: 2.2rem;
        line-height: 2rem;
        color: var(--colorgreen);
    }
}

/* Tablet in modalità verticale */
@media screen and (min-width: 737px) and (max-width: 1279px) {
    #pswd_info {
        display: none;
        position: absolute;
        width: 15rem;
        padding: 1rem;
        z-index: 99999;
        top: 0;
        backdrop-filter: blur(18px) saturate(180%);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        background-color: rgba(255, 255, 255, 0.58);
        border-radius: 12px;
        border: 1px solid rgba(209, 213, 219, 0.3);
        display: none;
    }

        #pswd_info span {
            margin: 0 0 0.3rem 0;
            padding: 0;
            font-family: var(--fuenteLight);
            font-weight: normal;
            font-size: 0.7rem;
            color: var(--colorBlack);
        }

        #pswd_info ul, #pswd_info li {
            margin: 0;
            padding: 0;
            list-style-type: none;
            font-family: var(--fuenteLight);
            font-size: 0.6rem;
        }

            #pswd_info ul li {
                padding-left: 2.1rem;
            }

    .invalid {
        background: url(../svg/close-pwd.svg) no-repeat 0 50%;
        background-size: 1.2rem 1.2rem;
        padding-left: 1.6rem;
        line-height: 1.5rem;
        color: var(--colorred);
    }

    .valid {
        background: url(../svg/check-pwd.svg) no-repeat 0 50%;
        background-size: 1.2rem 1.2rem;
        padding-left: 1.6rem;
        line-height: 1.5rem;
        color: var(--colorgreen);
    }
}

/* Tablet in modalità horizontale */
@media screen and (min-width: 481px) and (max-width: 736px) {
    #pswd_info {
        display: none;
        position: absolute;
        width: 15rem;
        padding: 1rem;
        z-index: 99999;
        top: 0;
        backdrop-filter: blur(18px) saturate(180%);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        background-color: rgba(255, 255, 255, 0.58);
        border-radius: 12px;
        border: 1px solid rgba(209, 213, 219, 0.3);
        display: none;
    }

        #pswd_info span {
            margin: 0 0 0.3rem 0;
            padding: 0;
            font-family: var(--fuenteLight);
            font-weight: normal;
            font-size: 0.7rem;
            color: var(--colorBlack);
        }

        #pswd_info ul, #pswd_info li {
            margin: 0;
            padding: 0;
            list-style-type: none;
            font-family: var(--fuenteLight);
            font-size: 0.6rem;
        }

            #pswd_info ul li {
                padding-left: 2.1rem;
            }

    .invalid {
        background: url(../svg/close-pwd.svg) no-repeat 0 50%;
        background-size: 1.2rem 1.2rem;
        padding-left: 1.6rem;
        line-height: 1.5rem;
        color: var(--colorred);
    }

    .valid {
        background: url(../svg/check-pwd.svg) no-repeat 0 50%;
        background-size: 1.2rem 1.2rem;
        padding-left: 1.6rem;
        line-height: 1.5rem;
        color: var(--colorgreen);
    }
}

/* Smartphone o piccoli Tablet */
@media screen and (max-width: 480px) {
    #pswd_info {
        display: none;
        position: absolute;
        width: 15rem;
        padding: 1rem;
        z-index: 99999;
        top: 0;
        backdrop-filter: blur(18px) saturate(180%);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        background-color: rgba(255, 255, 255, 0.58);
        border-radius: 12px;
        border: 1px solid rgba(209, 213, 219, 0.3);
    }

        #pswd_info span {
            margin: 0 0 0.3rem 0;
            padding: 0;
            font-family: var(--fuenteLight);
            font-weight: normal;
            font-size: 0.7rem;
            color: var(--colorBlack);
        }

        #pswd_info ul, #pswd_info li {
            margin: 0;
            padding: 0;
            list-style-type: none;
            font-family: var(--fuenteLight);
            font-size: 0.6rem;
        }

            #pswd_info ul li {
                padding-left: 2.1rem;
            }

    .invalid {
        background: url(../svg/close-pwd.svg) no-repeat 0 50%;
        background-size: 1.2rem 1.2rem;
        padding-left: 1.6rem;
        line-height: 1.5rem;
        color: var(--colorred);
    }

    .valid {
        background: url(../svg/check-pwd.svg) no-repeat 0 50%;
        background-size: 1.2rem 1.2rem;
        padding-left: 1.6rem;
        line-height: 1.5rem;
        color: var(--colorgreen);
    }
}