@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

:root {
    --p-gray: #00000088;
    --p-cyan: #66CAA5;
    --h-title: #BD92CE;

    --border: #BD92CE;
    --button: #BD92CE;
    --input-bg: #DEC8E7;
    --input-placeholder: #5E4967;

    --dot-bg: #F1CD21;
}

* {
    padding: 0;
    margin: 0;
    color-scheme: light;
}

/* Инпут с паролем (с функцией показать и скрыть пароль) */
.password-input {
    width: 100%;
    height: 40px;
    position: relative;
    border-radius: 10px;
}

/* Кнопка переключения пароля */
.password-input__toggle {
    width: 20px !important;
    height: 20px !important;
    background-color: transparent;
    border: none;
    border-radius: 0px;
    box-sizing: content-box;

    position: absolute;
    right: 20px;
    top: 10px;
    opacity: .5;
    cursor: pointer;
    transition: .15s all;
}

/* Кнопка просмотра пароля */
.password-input__toggle img {
    width: 20px;
    height: 20px;
}

@media (hover: hover) {
    .password-input__toggle:hover {
        opacity: 1;
        background-color: transparent;
    }
}

@media (hover: none) {
    .password-input__toggle {
        opacity: 1;
        background-color: transparent;
    }
}

@media screen and (max-width: 1000px) {
    .password-input {
        height: 30px;
        border-radius: 5px;
    }

    .password-input__toggle img {
        width: 16px;
        height: 16px;
        right: 10px;
        top: 7px;
    }

    .password-input__toggle img {
        width: 16px;
        height: 16px;
    }
}