.password-tooltip {
    display: none;
    background: #FFF none repeat scroll 0 0;
    position: absolute;
    top: 0%;
    left: 102%;
    width: 19rem;
    z-index: 1;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

    .password-tooltip::after {
        content: " ";
        position: absolute;
        top: 13%;
        left: -5px;
        transform: rotate(90deg);
        margin-left: -11px;
        border-width: 8px;
        border-style: solid;
        border-color: #FFF transparent transparent transparent;
    }

    .password-tooltip ul {
        list-style-type: none;
        margin: 0rem 1rem;
    }

    .password-tooltip li {
        margin: 5px;
        font-size: 16px;
    }

        .password-tooltip li.valid, .password-tooltip li.valid i {
            color: #306500 !important;
        }

        .password-tooltip li.invalid, .password-tooltip li.invalid i {
            color: #B60000 !important;
        }
@media (max-width: 768px) {
    .password-tooltip {
      
        position: absolute;
        top: 100%;
        left: 0%;
        padding:2rem;
        width:auto;
        max-width:28rem;
    }
    .password-tooltip::after {
        content: " ";
        position: absolute;
        top: -15px;
        left: 50%;
        transform: rotate(180deg);
        margin-left: -11px;
        border-width: 8px;
        border-style: solid;
        border-color: #FFF transparent transparent transparent;
    }
        .password-tooltip li {
            font-size: 14px;
        }
}