.symbol input[type=text] {
    width: 100%;
    letter-spacing: 0.1rem;
    padding: 0 0 0 3em;
    font-size: 1.6rem;
    line-height: 3;
    border: 1px solid var(--GY05);
    border-radius: 8px;
}

.password-visibility {
    display: flex;
    align-items: center;
    width: 100%;
}

.password-visibility__input {
    display: none;
}

.password-visibility__toggle {
    margin-left: auto;
    cursor: pointer;
}

.password-visibility__toggle::before {
    content: url("/img/auth/icon-eye-off-thin.svg");
    display: block;
    width: 24px;
    height: 24px;
}

.password-visibility__toggle--visible::before {
    content: url("/img/auth/icon-eye-thin.svg");
}

/* .password-visibility:has(.password-visibility__input:checked) {
    display: none;
} */

.message {
    text-align: center;
}

.message.error {
    color: red;
}

.message.success {
    color: green;
}

.hidden {
    display: none;
}

.my-password-visible:has(input:checked) {
    display: flex;
}

.error-message ul li {
    list-style: none;
    text-indent: 0;
    padding-left: 0;
}

/* Make the parent container a flexbox to align children vertically */
.symbol {
    display: flex;
    align-items: center;
    width: 100%;
}

.input {
    width: 100%;
}