.form,
form {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 550px;

    width: 90%;
    padding-top: 10px;
    z-index: 0;

}

.col-1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;

    >div {
        width: 50%;
        margin-bottom: 10px;
    }

    @media (max-width: 500px) {
        & {
            width: 95%;
        }

        >div {
            width: 100%;
        }
    }
}

.input-number {
    width: 100px !important;
    height: 40px !important;
    margin-bottom: 15px !important;
}


@media (min-width: 600px) {

    .form,
    form {
        min-width: 90%;
    }
}

@media (min-width: 1000px) {

    .form,
    form {
        min-width: 900px;
    }
}

.form-bar-bottom {
    margin-bottom: 10px;
}

.action-bar-bottom {
    width: 90%;
    border-radius: 20px;
    background-color: var(--theme-color);
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 15px;
    align-items: center;
    padding-top: 15px;
    position: sticky;
    left: 0px;
    bottom: 0px;

    .btn-cancelar {
        width: 200px;
    }

    @media (min-width: 1000px) {
        & {
            width: 900px;
        }
    }

    @media (max-width: 650px) {
        & {
            flex-wrap: wrap;
            flex-direction: column;
            align-content: center;
        }

        button {
            margin: 2px;
        }

    }
}

.form .full,
form .full {
    width: 100%;
    margin: 0px;
}

input-password {
    position: relative;

    #btnChange {
        position: absolute;
        right: 11px;
        z-index: 100;
        top: 0px;
    }
}

.password-strength-meter {
    text-align: center;
    width: 50%;
    justify-self: center;
}

.password-strength-meter-progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.password-strength-meter-progress::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 3px;
}

.password-strength-meter-label {
    font-size: 14px;
}

.password-strength-meter-progress::-webkit-progress-value {
    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

.strength-Weak::-webkit-progress-value {
    background-color: #F25F5C;
}

.strength-Fair::-webkit-progress-value {
    background-color: #FFE066;
}

.strength-Strong::-webkit-progress-value {
    background-color: #247BA0;
}

.strength-Good::-webkit-progress-value {
    background-color: #70C1B3;
}

/** progress-bar */

progress-bar {
    position: relative;
    width: 100%;
    margin-top: 25px;

    .progress-bar {

        background-color: var(--destaque-color);
        position: relative;
        border-radius: 15px;
        padding: 2px;

        .progress {
            background-color: var(--contrast-high-color);
            height: 15px;
            font-size: 13px;
            padding-top: 2px;
            padding-bottom: 2px;
            padding-right: 5px;
            text-align: right;
            margin: 5px;
            transition: all 0.3s ease-in-out;
            border-radius: 5px;
            color: #fff;

            &.red {
                background-color: #6f2b2b;
            }
        }

        .textTarget {
            position: absolute;
            right: 3px;
            top: -15px;
        }

        .textProgress {
            position: absolute;
            left: 10%;
            top: 30px;
            margin-left: -10% !important;
            border-top: 1px solid var(--primary-color);
            padding-top: 5px;
            transition: all 0.3s ease-in-out;

            &::before {
                content: "|";
                transform: rotate(180deg);
                position: absolute;
                top: -15px;
                color: var(--primary-color);
                left: 27px;
            }
        }
    }
}