@font-face {
    font-family: 'Golos bold';
    src: url('../fonts/GolosText-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Golos';
    src: url('../fonts/GolosText-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Unbound bold';
    src: url('../fonts/Unbounded-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Unbound';
    src: url('../fonts/Unbounded-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'druktextwidecyr';
    src: url('../fonts/druktextwidecyr-bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


body {
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #303030;
}

.main_button {
    font-family: 'Golos', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
    letter-spacing: 3%;
    color: #FFFFFF;
    text-align: center; /* Это уже не нужно, так как flexbox будет управлять выравниванием */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    background-color: #D72D41;
    border-radius: 38px;
    user-select: none;
    cursor: pointer;
    display: flex; /* Добавлено для использования flexbox */
    justify-content: center; /* Выравнивает содержимое по горизонтали в центре */
    align-items: center; /* Выравнивает содержимое по вертикали в центре */
    border: none;
}

.main_button:disabled {
    background-color: #ECF2FA;
    color: #8B98AA;
    cursor: default;
}

.main_button:hover {
    background-color: #D80052;
}

.button_class {
    font-family: 'Golos', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    letter-spacing: 3%;
    color: #FFFFFF;
    text-align: center; /* Это уже не нужно, так как flexbox будет управлять выравниванием */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    background-color: #D72D41;
    border-radius: 24px;
    user-select: none;
    cursor: pointer;
    display: flex; /* Добавлено для использования flexbox */
    justify-content: center; /* Выравнивает содержимое по горизонтали в центре */
    align-items: center; /* Выравнивает содержимое по вертикали в центре */
    border: none;
}

.button_class:hover {
    background-color: #D80052;
}

.button_class:active {
    background-color: #D72D41;
}

.button_class:disabled {
    background-color: #ECF2FA;
    color: #8B98AA;
    cursor: default;
}

.drag-region {
    -webkit-app-region: drag;
    position: absolute;
    height: calc(100%);
    width: calc(100% - 80px);
    z-index: 3;
}

.drag-region-sized {
    -webkit-app-region: drag;
    position: absolute;
    height: calc(100%);
    width: calc(100% - 450px);
    z-index: 3;
}

.fixed-top-div {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    width: 100%;
    z-index: 3;
    pointer-events: none;
}

.title-image {
    position: fixed;
}

.title-text {
    font-family: 'Golos bold', sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin: 4px;
    color: white;
    margin-left: 10px;
}

.top-buttons {
    position: fixed; /* Фиксированное позиционирование относительно окна браузера */
    right: 10px; /* Отступ справа */
    top: 32px; /* Отступ сверху */
    background-color: transparent; /* Прозрачный белый фон */
    border-radius: 5px; /* Круглые углы */
    box-sizing: border-box; /* Включает padding в общий размер элемента */
    z-index: 1000; /* Убедитесь, что div будет поверх других элементов */
    cursor: pointer; /* Курсор в виде указателя */
    transition: background-color 0.5s ease-out, border-color 0.4s ease-out;
    pointer-events: all;
}

.top-button-icons {
    display: block; /* Блочное отображение */
    transition: filter 0.2s ease-in-out; /* Плавное изменение фильтра */
    user-select: none; /* Запрещает выделение иконки */
}

.simple-buttons {
    background-color: transparent; /* Прозрачный белый фон */
    border-radius: 5px; /* Круглые углы */
    box-sizing: border-box; /* Включает padding в общий размер элемента */
    z-index: 1000; /* Убедитесь, что div будет поверх других элементов */
    cursor: pointer; /* Курсор в виде указателя */
    transition: background-color 0.5s ease-out, border-color 0.4s ease-out;
}

.simple-buttons-icons {
    display: block; /* Блочное отображение */
    transition: filter 0.2s ease-in-out; /* Плавное изменение фильтра */
    user-select: none; /* Запрещает выделение иконки */
}

.CorouselWindow {
    background-color: #303030;
    z-index: 0;
    width: 100%;
    height: 100%;
    user-select: none;
}

.d-block {
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease-out;
  }

  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
  }

  .image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); /* Градиент слева направо от прозрачного к черному */
    pointer-events: none; /* Позволяет взаимодействовать с элементами под псевдоэлементом */
    }

  .windowcontent {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0);
    color: #ffffff;
  }

.SidePanel {
    position: fixed;
    right: 0;
    width: 0px;
    height: 100vh;
    background: linear-gradient(to left, #D0DDFF, #D0DDFF); /* Градиент слева направо от прозрачного к черному */
    z-index: 1;
    overflow: hidden;
    transition: width 0.4s ease-in-out;
}

.SizePanelContent {
    margin: 32px;
    margin-top: 80px;
    margin-bottom: 32px;
    transition: opacity ease-in-out 0.4s;
}

.downpanel {
    position: fixed;
    top: 400px;
    width: 100%;
    height: 200px;
    background-color: white;
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.5);
}

.downcontent {
    position: fixed;
    margin: 12px;
    overflow: hidden;
    margin-left: 24px;
    margin-right: 24px;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.SidePanel_title {
    font-family: 'Golos bold', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 41.6px;
    letter-spacing: 0.7%;
    color: black;
    user-select: none;
}

.start-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    user-select: none;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 4vw;
    font-weight: 600;
    color: #6e6e6e;
    margin-top: 3vw;
    margin-bottom: 3vw;
}

.start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 48px;
    margin-right: 1vw;
    margin-left: 1vw;
}

.start-btn-slider {
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    transition: text-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
}

.start-btn-slider-active {
    text-shadow: 0 0 10px #7f7f7f;
    color: #ffffff;
}

.downcontenthidden {
    opacity: 0;
    visibility: collapse;
}

#auth_form {
    display: flex;
    flex-direction: column;
    width: 390px;
}

  
.auth_input {
  height: 51px; /* Задаем высоту поля ввода */
  background-color: white; /* Устанавливаем белый цвет фона */
  font-family: 'Golos', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.2px;
  letter-spacing: -1%;
  color: black;
  border: 0px solid #8B98AA; /* Добавляем черную рамку толщиной в 1px */
  border-radius: 8px; /* Скругляем углы с радиусом в 8px */
  padding: 0 15px; /* Добавляем небольшой внутренний отступ по бокам для текста */
  flex-grow: 1;
  outline: none; /* Убираем стандартную обводку при фокусе */
  transition: border-color ease-in-out 0.2s;
}

.auth_input:focus {
    border-color: #003099; /* При фокусе меняем цвет рамки на голубой */
  }

.auth_input_hover_effect {
    border-color: #003099;
}

.auth_select {
    height: 51px;
    background-color: white;
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.2px;
    letter-spacing: -1%;
    color: black;
    border: 1px solid #8B98AA;
    border-radius: 8px; /* Округлые углы */
    padding: 0 15px;
    outline: none;
    transition: border-color ease-in-out 0.2s;
    cursor: pointer;
    bottom: 100%; 
    left: 0;
    box-shadow: 0px -2px 4px rgba(0,0,0,0.1); /* Тень для добавления глубины */
    margin-bottom: 5px; /* Добавляет небольшой отступ между select и родительским элементом */
  }
  
  .auth_select:hover {
    border-color: #003099;
  }

.select_window {
    width: 386px;
    height: 0px;
    background-color:#FFFFFF;
    box-shadow: 0px 10px 24px #455E80AB; /* Тень для добавления глубины */
    border-radius: 8px;
    border-color: #D3DAE2;
    border-width: 1px;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.select_window_button {
    width: 100%;
    height: 40px;
    background-color:#FFFFFF;
    font-family: 'Golos', sans-serif; 
    font-weight: 400; 
    font-size: 16px; 
    line-height: 22.4px; 
    letter-spacing: -1%; 
    margin-top: 8px; 
    color: black; 
    user-select: none;
    text-wrap: nowrap;
    display: flex;
    align-items: center;
    padding: 0;
    margin-top: 0;
    padding-left: 16px;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, height 0.3s ease-in-out;
}

.launchwindowbuttons {
    color: #13151A;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.launchwindowbuttons:hover {
    color: #3C00E5;
}

.launchwindowbuttons:active {
    color: #3C00E5;
}

.select_window_button:hover {
    background-color: #D72D41;
    color: #FFFFFF; 
}

.select_window_button:active {
    background-color: #D72D41;
    color: #FFFFFF; 
}
  
.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 51px;
    margin-right: 1vw;
    margin-left: 1vw;
    border: none;
}

.auth_horizontal_container {
    display: flex; /* Используйте flexbox для выравнивания элементов в одну линию */
    flex-wrap: nowrap; /* Запретить элементам переноситься на следующую строку */
    width: 321px;
}

/* ЧЕКБОКС ЧЕКБОКС ЧЕКБОКС ЧЕКБОКС ЧЕКБОКС ЧЕКБОКС ЧЕКБОКС НАЧАЛО */
/* Скрываем стандартный чекбокс */
.launchercheckbox {
  display: none;
}

/* Стилизация внешнего вида чекбокса */
.custom-checkbox .checkmark {
  height: 24px;
  width: 24px;
  background-color: transparent; /* Черный фон */
  border: 0px solid #8B98AA; /* Серая граница */
  border-radius: 4px;
  background-color: white;
  display: inline-block;
  cursor: pointer;
  transition: border-color ease-in-out 0.2s, background-color ease-in-out 0.2s;
}

/* Стилизация чекбокса при его активации */
.custom-checkbox input[type="checkbox"]:checked + .checkmark:after {
  content: "";
  display: block;
  /* Добавьте здесь стили для галочки или другого индикатора активации */
}

/* Пример стиля галочки */
.custom-checkbox .checkmark:after {
  margin-left: 9px;
  margin-top: 5px;
  width: 6px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.custom-checkbox .checkmark:hover {
    background-color: #D72D41;
    border-color: #003099;
}

.custom-checkbox input[type="checkbox"]:disabled + .checkmark {
    background-color: #F3FFF4;
    border-color: #D32136;
}

.custom-checkbox input[type="checkbox"]:active + .checkmark {
    background-color: #D72D41; /* Фон при активации */
    border-color: #000000; /* Граница при активации */
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark {
    background-color: #D72D41; /* Фон при активации */
    border-color: #008844; /* Граница при активации */
}

/* ЧЕКБОКС ЧЕКБОКС ЧЕКБОКС ЧЕКБОКС ЧЕКБОКС ЧЕКБОКС ЧЕКБОКС КОНЦ */

.link-info-cat {
    cursor: pointer;
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    letter-spacing: -1%;
    text-decoration: unset;
    color: #3C00E5;
    transition: color ease-in-out 0.2s;
}

.link-info-cat:hover {
    color: #3C00E5;
}

.form_input_title {
    font-family: 'Golos', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19.2px;
    letter-spacing: -1%;
    color: black;
    margin-bottom: 8px;
    user-select: none;
}

.loading_line {
    height: 1px; /* Высота линии */
    background-color: #FFFFFF1A; /* Цвет фона линии */
    position: relative; /* Для позиционирования внутреннего элемента */
    width: 882px; 
    margin-top: 553px; 
    margin-left: 24px; 
    position: absolute; 
    user-select: none;
    transition: width 0.4s ease-out
}

.loading_line_minsize {
    width: 430px;
}
  
.loading_progress {
    height: 100%; /* Высота белой линии, равная высоте подложки */
    background-color: #FFFFFF; /* Цвет белой линии */
    position: absolute; /* Абсолютное позиционирование внутри родителя */
    transition: width 0.4s ease-out
}

.loading_text {
    font-family: 'Golos', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -1%;
    color: #A3A19E;
    transition: margin ease-in-out 0.4s;
}

.wcontent-child {
    transition: opacity 0.4s ease-out;
}

.Alert-background {
    position: fixed; /* Изменил на fixed для покрытия всего экрана */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    display: flex; /* Добавил flex для центрирования содержимого */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    z-index: 2;
    transition: opacity ease-in-out 0.4s;
}

.Alert {
    width: 535px;
    height: 241px;
    background-color: #FEFEFF;
    z-index: 3;
    border-radius: 24px;
    transition: opacity ease-in-out 0.1s;
}

.Alert-content {
    margin: 24px;
}

.Alert-horizontal {
    display: flex; /* Используйте flexbox для выравнивания элементов в одну линию */
    flex-wrap: nowrap; /* Запретить элементам переноситься на следующую строку */
    justify-content: space-between; /* Разместить дочерние элементы на максимальном расстоянии друг от друга */
    width: 100%;
}

.downloadpausebtn {
    background-color: #E9F3FE;
    border-radius: 16px;
    user-select: none;
    cursor: pointer;
    transition: background-color ease-in-out 0.2s;
}

.downloadpausebtn:hover {
    background-color: #D80052;
}

.downloadpausebtnplay {
    background-color: #D72D41;
    border-radius: 16px;
    user-select: none;
    cursor: pointer;
    transition: background-color ease-in-out 0.2s;
}

.downloadpausebtnplay:hover {
    background-color: #D80052;
}

.DownloadingLine {
    display: flex; /* Делаем контейнер flex-контейнером */
    position: relative;
    width: 620px;
    height: 32px;
    border-radius: 16px;
    background-color: #E9F3FE;
    /*margin-right: 0px;*/
    overflow: hidden; /* Обрезаем содержимое, выходящее за границы, чтобы сохранить скругление */
}

.DownloadingLine_progress {
    /* Удаление margin-right, так как margin уже задан */
    margin-top: 1px;
    width: 0%; /* Начальная ширина, которая будет динамически изменяться */
    height: 23px;
    border-radius: 12px;
    background-color: #A5C3F0;
    transition: width 0.5s ease-in-out; /* Добавляем плавное изменение ширины */
}

.whitebutton {
    display: flex; /* Используем flexbox для центрирования текста */
    align-items: center; /* Центрирование по вертикали */
    justify-content: center; /* Центрирование по горизонтали */
    gap: 6px;
    color: #000000;
    background-color: white;
    white-space: nowrap; /* Предотвращает перенос текста внутри элементов */
    text-align: center; /* Центрирование текста */
    font-size: 14px;
    line-height: 18.2px;
    font-weight: 400;
    font-family: 'Golos';
    padding: 12px 16px; /* Правильный синтаксис для padding */
    user-select: none;
    flex-shrink: 0; /* Предотвращает сжатие элементов */
    border-radius: 20px;
    cursor: pointer;
}

.whitebutton:hover {
    background-color: #F5F5F5;
}

/* BOOTSTRAP */ /* BOOTSTRAP */ /* BOOTSTRAP */ /* BOOTSTRAP */ /* BOOTSTRAP */ /* BOOTSTRAP */
.carousel-item {
    transition: transform 1.5s ease, opacity .5s ease-out
}

.carousel-caption {
    background-color: #1f1f1f9d;
    border-radius: 16px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}
/* BOOTSTRAP */ /* BOOTSTRAP */ /* BOOTSTRAP */ /* BOOTSTRAP */ /* BOOTSTRAP */ /* BOOTSTRAP */


.download_bar_background {
    width: 200px;
    height: 16px;
    background-color: rgb(97, 97, 97);
    position: absolute;
    border-radius: 8px; /* Полностью закругляем края */
    overflow: hidden; /* Скрываем всё, что выходит за пределы закруглённых краёв */
}

.download_bar {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 8px; /* Совпадает с фоном для круглых краёв */
    overflow: hidden; /* Скрываем внутренние элементы, выходящие за пределы */
}

.download_fill {
    width: 0%;
    height: 100%;
    background-color: rgb(172, 172, 172);
    border-radius: 8px; /* Делаем края заливки круглыми */
}