html, body{
    color: rgb(174, 113, 109);
}

main{
    background-color: rgba(28, 33, 39, 0.7);
}
.window{
    background-color: rgba(28, 33, 39, 0.7);
}
.logo-name{
    color: rgb(174, 113, 109);
}
.logo-company{
    
    color: rgb(1, 109, 130);
}

.input-value-box{
    color: rgb(1, 109, 130);
    background-color: #e7e7e700;
}

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    color: rgb(1, 109, 130);
    transition: background-color 5000s ease-in-out 0s;
}

/* Показ и скрытие QR кода при наведении*/
.enter-qr:hover{
    color: rgb(1, 109, 130);
}

/* Показ и скрытие telegram при наведении*/
.enter-telegram:hover{
    color: var(--theme-color-2);
}
.btn-login{
    background-color: rgb(1, 109, 130);
    color: rgb(174, 113, 109);
    border-color: rgb(1, 109, 130);
}
.btn-login:hover{
    background-color: rgb(174, 113, 109);
    color: rgb(1, 109, 130);
    border-color: rgb(174, 113, 109);
}

#qrcode-auth canvas{
    border: #fff solid 5px;
}
/* Сообщение о вводе */
.input-another-auth-bot-name{
    color: var(--theme-color-2);
}
.input-another-auth-bot-code{
    color: var(--theme-color-2);
}

.btn-qr-auth-reload:hover, .btn-telegram-auth-reload:hover{
    color: var(--theme-color-2);
    cursor: pointer;

}

/* Приветственное сообщение */
.auth-top-hello{
    background-color: rgba(28, 33, 39, 0.5);
    font-size: 25px;
}

/* Стили для автозаполненных полей */
.input-value-box:-webkit-autofill {
    -webkit-text-fill-color: rgb(1, 109, 130);
    transition: background-color 5000s ease-in-out 0s; /* Отключает анимацию изменения фона */
}
.input-value-box:-webkit-autofill:focus {
    -webkit-text-fill-color: rgb(1, 109, 130);
}

.input-value-box:-webkit-autofill:hover {
    -webkit-text-fill-color: rgb(1, 109, 130);
}

/* .ico-auth{
    filter: hue-rotate(30deg) saturate(150%) brightness(90%);
} */

.ico-auth {
    width: 40px; /* Размер иконки */
    height: 34px;
    mask-image: url('/static/img/qr.png'); /* Путь к белой картинке */
    -webkit-mask-image: url('/static/img/qr.png'); /* Для Safari */
    mask-size: cover; /* Масштабирование маски */
    -webkit-mask-size: cover; /* Для Safari */
    background-color: rgb(174, 113, 109);
}

.enter-qr{
    color: rgb(1, 109, 130);
}

.enter-qr:hover{
    color: rgb(174, 113, 109);
}

#audioControl {
    position: fixed; /* Фиксированное позиционирование */
    top: 20px; /* Отступ сверху */
    left: 20px; /* Отступ слева */
    background: none; /* Убираем фон */
    border: none; /* Убираем границу */
    padding: 0; /* Убираем внутренние отступы */
    cursor: pointer; /* Курсор в виде указателя */
    z-index: 1000; /* Убедимся, что кнопка поверх других элементов */
    color: rgb(1, 109, 130);
    font-size: 18px
}

#audioControl:hover{
    color: rgb(174, 113, 109);
}

#audioControl:focus {
    outline: none; /* Убираем обводку при фокусе */
}

/* Стили для фонового видео */
#bg-video {
    position: fixed; /* Фиксированное положение */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Масштабирует видео, чтобы оно покрывало весь экран */
    z-index: -1; /* Отправляет видео на задний план */
}

:root {
    --theme-color-2: rgb(174, 113, 109);
}