/* Общие стили для контролов формы */


    /* Стили для активного состояния */
    .form-control:focus {
        border-color: #80bdff;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.form-group {
    position: relative !important;
    margin-bottom: 1.5em !important;
}
/* Стиль для обязательных полей */
.required-field {
    width: 100%;
    padding-right: 25px; /* Делаем отступ справа, чтобы звёздочка не перекрывала текст */
}

/* Стиль для звёздочки в правом углу */
.required {
    position: absolute;
    right: 10px;
    top: 65%;
    transform: translateY(-50%);
    color: red;
    font-weight: bold;
    pointer-events: none; /* Звёздочка не должна быть кликабельной */
}

    /* Стиль для зелёной звёздочки при успешном заполнении */
    .required.valid {
        color: green; /* Зелёная звёздочка при заполнении поля */
    }

    .required.green {
        color: green;
    }
/* Стили для контейнера пароля и кнопки */
.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    background: none; /* Убираем фоновый цвет */
    border: none; /* Убираем границу */
    cursor: pointer;
    font-size: 1.2em;
    padding: 0; /* Сбрасываем отступы */
    outline: none; /* Убираем рамку при фокусе */
}

    /* Сбрасываем стили, которые могут наследоваться от общих стилей для кнопки */
    .toggle-password:focus,
    .toggle-password:hover {
        background: none;
        border: none;
        box-shadow: none; /* Убираем любые тени */
    }

#togglePassword {
    top:35%;
}