:root {
  /* Стили для темной темы */
  --bd-violet-bg: #bfa2db;
  --bd-violet-rgb: 191, 162, 219;

  /* Градиентный фон */
  --bg-gradient: radial-gradient(circle, rgb(35 38 43 / 94%) 0%, rgb(35 38 43 / 94%) 100%);
  --widget-shadow: 0px 0px 150px 100px rgb(141 77 202 / 76%);
  /* Фон виджета */
  --widget-background-color: #1e1e22; /* Почти черный с легким серым оттенком */
  --widget-border-color: #2b2b2f; /* Темно-серый для границы */
  --second-background: #2b2b2f; /* Тёмный серый для второго фона */
  --main-background: #1e1e22; /* Ещё более тёмный серый для основного фона */
  --dark-font: #d1d1d5; /* Светло-серый для текста */
  --dark-font-selected: #c2c2c7; /* Немного более насыщенный серый для выделенного текста */
  --active-selected: #8675a9; /* Акцентный фиолетовый для активных элементов */
  --light-selected: #4e4e54; /* Более светлый серый для выделенных элементов */
  --dark-selected: #3e3e44; /* Тёмный серый для выделенных областей */
  --bs-btn-bg: #4e4e54;
}

.btn-primary {
  --bs-border-radius: 10px;
  --bs-btn-font-weight: 600;
  --bs-btn-color: #d1d1d5;
  --bs-btn-bg: #4e4e54;
  --bs-btn-border-color: #4e4e54;
  --bs-btn-hover-color:  #d1d1d5;
  --bs-btn-hover-bg: #8675a9;
  --bs-btn-hover-border-color: #8675a9;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: #4e4e54;
  --bs-btn-active-bg: #bfa2db;
  --bs-btn-active-border-color: #bfa2db;
}

/* Фон для основного блока */
body {
  background: var(--bg-gradient);
  
}
/* Стили для формы */
/* Скрываем фон, границу и тень у формы с классом .lang_form */
.lang_form {
  background-color: transparent; /* Прозрачный фон */
  border: none; /* Убираем границу */
  box-shadow: none; /* Убираем тень */
  padding: 0; /* Убираем внутренние отступы */
  margin: 0; /* Убираем внешние отступы */
  display: block; /* Минимизируем занимаемое пространство */

}

/* Стили для select в светлой теме */
.lang_form select {
  width: 100%;
  padding: 8px;
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
  background-color: var(--bs-btn-bg); /* Темно-серый фон */
  border: none; /* Убираем границу */
  color: #d1d1d5; /* Светлый текст */
  margin-top: 16px;;
  border-radius: 10px;
  font-size: 16px;

}

.lang_form select option {
  background-color: #2b2b2f; /* Темно-серый фон опций */
  color: #d1d1d5; /* Светлый текст */
}

/* Стили для выбранного option */
.lang_form select option:checked {
  background-color: #8675a9; /* Фиолетовый фон для выбранной опции */
  color: #ffffff; /* Белый текст */
}
.form-floating input[type="text"],
.form-floating input[type="password"] {
  background-color: #2b2b2f; /* Темно-серый фон для полей */
  border: 1px solid #4e4e54; /* Темно-серая граница */
  color: #d1d1d5; /* Светлый текст */
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.1); /* Легкая светлая тень для объема */
}

.form-floating input[type="text"]:focus,
.form-floating input[type="password"]:focus {
  border-color: #bfa2db; /* Фиолетовый оттенок при фокусе */
  outline: none;
  box-shadow: 0px 0px 8px 1px rgba(191, 162, 219, 0.5); /* Подсвечивание фиолетовым при фокусе */
  background-color: #1e1e22; /* Темно-серый фон при фокусе */
}
.form-floating>.form-control:focus~label {
  transform: scale(.85) translateY(-0.8rem) translateX(.15rem) !important;
}
.form-floating label::after {
  display: none !important;
  
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0) !important;
}
.form-floating label {
  height: auto !important;
  border-radius: 10px;
  color: var(--dark-font); /* Цвет текста плейсхолдера */
}

.form-floating input[type="text"]:focus ~ label,
.form-floating input[type="password"]:focus ~ label {
  color: #bfa2db; /* Изменение цвета текста при фокусе */
  background-color: #2b2b2f; /* Темно-серый фон под текстом плейсхолдера при фокусе */
  padding: 0 0.25rem; /* Немного внутреннего отступа для читаемости */
}

/* Виджет или контейнер */
.page1-frame {
  
  box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 32%);
}

html,
body {
  height: 100%;

}

.form-signin {
  max-width: 330px;
  padding: 1rem;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}
.inline-select {
  display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 16px;
    gap: 16px;
  /* margin-top: 16px; */
} 
.form-floating input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-floating input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
h1 {
  color: var(--dark-font) !important;
}
body{
        
  justify-content: center !important; 
}
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* .btn-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: #5D576B;
  --bs-btn-bg: #9BC1BC;
  --bs-btn-border-color: #9BC1BC;
  --bs-btn-hover-color:  #E6EBE0;
  --bs-btn-hover-bg: #ED6A5A;
  --bs-btn-hover-border-color: #ED6A5A;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: #ED6A5A;
  --bs-btn-active-bg: #ED6A5A;
  --bs-btn-active-border-color: #ED6A5A;
} */

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

.page1-frame {
gap: 24px;
width: auto;
display: flex;
padding: 48px;
align-self: center;
box-shadow: var(--widget-shadow);
align-items: center;
border-radius: 24px;
flex-direction: column;
background-color: var(--second-background);
}