:root {
  --bs-primary: #14232B; 
  --bs-secondary: #2e3a59;
  --bs-success: #16a34a;
  --bs-info: #0ea5e9;
  --bs-warning: #f59e0b;
  --bs-danger: #ef4444;
  --bs-light: #f8fafc;
  --bs-dark: #0f172a;

  --bs-body-font-family: "PTSansCaption", sans-serif;
  --bs-border-radius: 2px; 
  
  --c-dark: #14232B;
}


.button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  border: none;
  outline: none;
  font-family: "PTSansCaption", sans-serif;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  padding: 16px 48px;
  transition: 0.3s ease;
  display: inline-flex;
  white-space: nowrap;
  border-radius: 2px;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 100%;
}


.button--solid {
  background: var(--c-dark, #14232B);
  border: 1px solid var(--c-dark, #14232B);
  color: white;
}

.button--solid:hover {
  background-color: var(--c-dark, #14232B);
  color: #fff;
}


.button--white.button--solid {
  background-color: transparent;
  color: var(--c-dark, #14232B);
  border: 1px solid #fff;
}

.button--white.button--solid:hover {
  background: var(--c-dark, #14232B);
  color: #fff;
}

/* Баннер-предупреждение о подписке под табами настроек */
.subscription-alert-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.subscription-alert-banner {
  padding: 10px 14px;
  border-radius: 4px;
  background-color: #FAF6CE !important;
  color: #928C5D !important;
  font-size: 14px;
  white-space: nowrap;
}

.subscription-alert-button {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Дропдаун выбора языка в шапке: цвета в фирменной гамме */
.header .dropdown-menu .dropdown-item {
  color: #374151 !important;
}

.header .dropdown-menu .dropdown-item:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

.header .dropdown-menu .dropdown-item.active,
.header .dropdown-menu .dropdown-item:active {
  background-color: var(--c-dark, #14232B) !important;
  color: #ffffff !important;
}

/* Таблица тарифов подписки: горизонтальный скролл на мобильных */
@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block;
  }

  .table-responsive table {
    min-width: 800px;
  }

  .table-responsive th,
  .table-responsive td {
    font-size: 13px !important;
    padding: 8px !important;
    white-space: nowrap;
  }
}

/* Специальный стиль для кнопки "Создать кейс" */
a.btn-create-case,
button.btn-create-case,
input.btn-create-case {
  background: #ffffff !important;
  border: 1px solid var(--c-dark, #14232B) !important;
  color: var(--c-dark, #14232B) !important;
}
#create_case_btn {
  background: #ffffff !important;
  border: 1px solid var(--c-dark, #14232B) !important;
  color: var(--c-dark, #14232B) !important;
  width: 100% !important;
}
a.btn-create-case:hover,
button.btn-create-case:hover,
input.btn-create-case:hover,
a.btn-create-case:focus,
button.btn-create-case:focus,
input.btn-create-case:focus {
  background: var(--c-dark, #14232B) !important;
  color: #ffffff !important;
  border-color: var(--c-dark, #14232B) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
#create_case_btn:hover, #create_case_btn:focus { background: var(--c-dark, #14232B) !important; color: #ffffff !important; border-color: var(--c-dark, #14232B) !important; box-shadow: none !important; text-decoration: none !important; }

/* Отключаем серый overlay эффекта .btn-hover для этой кнопки */
.btn-create-case.btn-hover::after {
  content: none !important;
}
#create_case_btn.btn-hover::after { content: none !important; }

/* ========= Формы: инпуты и селекты ========= */
/* Базовый фокус для всех полей Bootstrap */
input.form-control:focus,
textarea.form-control:focus,
select.form-select:focus {
  border-color: var(--c-dark, #14232B) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(20, 35, 43, 0.1) !important;
}

/* Нативный select (закрытое состояние) */
select.form-select,
select.form-control {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  color: #374151 !important;
  padding: 8px 12px !important;
}

/* Нативный select (список опций): белый фон, активный/hover — тёмный фон, белый текст */
select option,
select.form-select option,
select.form-control option {
  background-color: #ffffff !important;
  color: #374151 !important;
}

select option:checked,
select.form-select option:checked,
select.form-control option:checked,
select option:hover,
select.form-select option:hover,
select.form-control option:hover {
  background-color: var(--c-dark, #14232B) !important;
  color: #ffffff !important;
}

/* ========= Tom Select (врачи/пациенты и селект "Тип подписки") ========= */
.ts-wrapper {
  width: 100% !important;
  position: relative; /* чтобы дропдаун позиционировался поверх, а не толкал верстку */
}

.ts-control {
  border: 1px solid transparent !important;
  background-color: #ffffff !important;
  border-radius: 4px !important;
  padding: 0px !important; /* как у обычных инпутов/селектов */
  display: flex;
  align-items: center;
}

.ts-control input {
  color: #374151 !important;
}

.ts-control.focus,
.ts-control.input-active {
  border-color: var(--c-dark, #14232B) !important;
  box-shadow: 0 0 0 3px rgba(20, 35, 43, 0.1) !important;
}

.ts-dropdown {
  position: absolute;      /* поверх остальной верстки */
  left: 0;
  right: 0;
  top: 100%;
  background-color: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  z-index: 1055;
}

.ts-dropdown .option {
  color: #374151 !important;
  padding: 5px 8px !important; /* отступы внутри пунктов списка */
}

/* Скрыть чекбокс "Мой дизайн 3D просмотра" и его подпись на форме кейса */
#use_my_design,
label[for="use_my_design"] {
  display: none !important;
}

.ts-dropdown .active,
.ts-dropdown .selected,
.ts-dropdown .option:hover {
  background-color: var(--c-dark, #14232B) !important;
  color: #ffffff !important;
}

.ts-dropdown .create {
  color: #374151 !important;
}

/* Селект "Тип подписки" (страница Extend Subscription) — прячем нативный select, оставляем только Tom Select */
select#subscription_type {
  display: none !important;
}

.main-btn.primary-btn {
  background: white !important;
  border: 1px solid var(--c-dark, #14232B) !important;
  color: var(--c-dark, #14232B) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  padding: 16px 48px !important;
  transition: 0.3s ease !important;
  display: inline-flex !important;
  white-space: nowrap !important;
  border-radius: 2px !important;
  -webkit-box-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  justify-content: center !important;
  width: auto !important;
}

.main-btn.primary-btn:hover {
  background: var(--c-dark, #14232B) !important;
  color: white !important;
  border: 1px solid var(--c-dark, #14232B) !important;
  transition: 0.3s ease !important;
}


.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

/* Вторичные кнопки: светлые, менее акцентные */
.btn-secondary,
a.btn.btn-secondary,
button.btn.btn-secondary,
input.btn.btn-secondary {
  background-color: #f3f4f6 !important; /* светло‑серый фон */
  border-color: #d1d5db !important;     /* граница как у инпутов */
  color: #374151 !important;            /* тёмно‑серый текст */
}

.btn-secondary:hover,
a.btn.btn-secondary:hover,
button.btn.btn-secondary:hover,
input.btn.btn-secondary:hover {
  background-color: #e5e7eb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* Унифицированный стиль для задизейбленных кнопок */
.btn.disabled,
.btn:disabled {
  opacity: 0.2 !important;
  cursor: not-allowed !important;
}

/* Фиксированная ширина кнопок "Создать врача/пациента" и "Удалить выбранные" в шапке списков */
.card-style.mb-2.mt-1 .main-btn.primary-btn,
.card-style.mb-2.mt-1 #delete_selected {
  width: 160px !important;
}

@media (max-width: 767px) {
  /* На мобилке — в колонку и по центру */
  .card-style.mb-2.mt-1 .col-12.text-end {
    text-align: center !important;
  }

  .card-style.mb-2.mt-1 .main-btn.primary-btn,
  .card-style.mb-2.mt-1 #delete_selected {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Hover инверсия для Bootstrap primary */
.btn-primary:hover,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
input.btn.btn-primary:hover,
.btn-primary:focus,
a.btn.btn-primary:focus,
button.btn.btn-primary:focus,
input.btn.btn-primary:focus {
  background-color: #ffffff !important;
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  filter: brightness(0.9);
}


.sidebar-nav-wrapper {
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a {
  color: #6b7280 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 12px 20px !important;
  transition: all 0.2s ease !important;
  border-radius: 0 !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon {
  color: #9ca3af !important;
  margin-right: 12px !important;
  transition: all 0.2s ease !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon svg {
  fill: #9ca3af !important;
}


.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active a,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item a:hover {
  color: var(--c-dark, #14232B) !important;
  background-color: #f9fafb !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active a .icon,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item a:hover .icon {
  color: var(--c-dark, #14232B) !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active a .icon svg,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item a:hover .icon svg {
  fill: var(--c-dark, #14232B) !important;
}


.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a {
  color: #6b7280 !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a:not(.collapsed) {
  color: var(--c-dark, #14232B) !important;
  background-color: #f9fafb !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a:not(.collapsed) .icon {
  color: var(--c-dark, #14232B) !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a:not(.collapsed) .icon svg {
  fill: var(--c-dark, #14232B) !important;
}


.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li {
  background-color: transparent !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a {
  color: #6b7280 !important;
  font-size: 13px !important;
  padding: 8px 0 !important;
  background-color: transparent !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a.active,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover {
  color: var(--c-dark, #14232B) !important;
  background-color: transparent !important;
}


.sidebar-nav-wrapper .sidebar-nav .divider hr {
  background: #e5e7eb !important;
  opacity: 1 !important;
}


.sidebar-nav-wrapper .sidebar-nav ul .nav-item a::before {
  display: none !important;
}


.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a::after {
  filter: brightness(0.7) !important;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a:not(.collapsed)::after {
  filter: brightness(0.3) !important;
}


.sidebar-nav-wrapper .sidebar-nav ul .nav-item a:hover {
  transform: translateX(4px) !important;
}


.plans-desktop.overflow-x-auto,
.card-style.overflow-x-auto,
.row.card-style.overflow-x-auto,
div.overflow-x-auto {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}

.plans-desktop {
  overflow-x: auto !important;
}

#plansTable {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  min-width: 1200px;
}

#plansTable thead th {
  background-color: #ffffff !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: none !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  vertical-align: middle !important;
}

#plansTable thead th { max-width: none !important; }

#plansTable tbody td {
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: #374151 !important;
  border-bottom: 1px solid #f3f4f6 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#plansTable tbody tr:hover {
  background-color: #f9fafb !important;
}

#plansTable td,
#plansTable th {
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#plansTable .datatable-sorter::before,
#plansTable .datatable-sorter::after {
  content: none !important;
}

/* Скрыть стандартные стрелки сортировки в таблицах Врачи и Пациенты */
#doctorsTable .datatable-sorter::before,
#doctorsTable .datatable-sorter::after,
#patientsTable .datatable-sorter::before,
#patientsTable .datatable-sorter::after {
  content: none !important;
}

#plansTable th .datatable-sorter {
  position: relative;
  padding-right: 18px !important;
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
}


#plansTable thead th button.datatable-sorter {
  padding: 0 !important;
  padding-right: 18px !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  text-align: left !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1.2 !important;
  cursor: pointer;
}


#plansTable thead th button.datatable-sorter::before,
#plansTable thead th button.datatable-sorter::after {
  content: none !important;
}

#plansTable th .datatable-sorter:after {
  content: '' !important;
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-50%) rotate(0deg);
  background: #9ca3af;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Выровнять заголовок "Действия" как остальные (внутри th есть d-flex со span.align-self-end) */
#plansTable thead th .d-flex {
  align-items: center !important;
}
#plansTable thead th .align-self-end {
  align-self: center !important;
}


#plansTable th.asc .datatable-sorter:after {
  transform: translateY(-50%) rotate(180deg);
  background: #14232B;
}

#plansTable th.desc .datatable-sorter:after {
  transform: translateY(-50%) rotate(0deg);
  background: #14232B;
}

#plansTable th:not(.asc):not(.desc) .datatable-sorter:after {
  background: #cbd5e1;
}


#plansTable th:nth-last-child(3),
#plansTable td:nth-last-child(3) {
  max-width: 90px !important;
  width: 90px !important;
}

#plansTable th:nth-last-child(2),
#plansTable td:nth-last-child(2) {
  max-width: 140px !important;
  width: 140px !important;
}

#plansTable th:last-child,
#plansTable td:last-child {
  max-width: none !important;
  width: 220px !important;
  overflow: visible !important;
}

/* Таблицы Врачи и Пациенты — стили как у таблицы Кейсов */
#doctorsTable,
#patientsTable {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

#doctorsTable thead th,
#patientsTable thead th {
  background-color: #ffffff !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: none !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  vertical-align: middle !important;
}

#doctorsTable tbody td,
#patientsTable tbody td {
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: #374151 !important;
  border-bottom: 1px solid #f3f4f6 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#doctorsTable tbody tr:hover,
#patientsTable tbody tr:hover {
  background-color: #f9fafb !important;
}

#doctorsTable td,
#doctorsTable th,
#patientsTable td,
#patientsTable th {
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Последняя колонка (Действия) — фиксированная ширина как у кейсов */
#doctorsTable th:last-child,
#doctorsTable td:last-child,
#patientsTable th:last-child,
#patientsTable td:last-child {
  max-width: none !important;
  width: 220px !important;
  overflow: visible !important;
}

/* Остальные колонки — одинаковая ширина */
#doctorsTable th:not(:last-child),
#doctorsTable td:not(:last-child) {
  width: calc((100% - 220px) / 4) !important;
}

#patientsTable th:not(:last-child),
#patientsTable td:not(:last-child) {
  width: calc((100% - 220px) / 3) !important;
}



#plansTable td:last-child .btn,
#plansTable td:last-child .main-btn {
  margin-left: 8px !important;
}

select,
.form-select,
select.form-control,
.input-style-1 select,
.input-style-2 select {
  background-color: white !important;

  border-radius: 4px !important;
  padding: 0px !important;
  font-size: 14px !important;
  color: #374151 !important;
  transition: all 0.2s ease !important;
}

select:focus,
.form-select:focus,
select.form-control:focus {
  border-color: var(--c-dark, #14232B) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(20, 35, 43, 0.1) !important;
}

.dropdown-toggle,
.main-btn.dropdown-toggle {
  background-color: white !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.dropdown-toggle:hover,
.main-btn.dropdown-toggle:hover {
  border-color: #9ca3af !important;
  background-color: #f9fafb !important;
}

/* ========== Иконка-шестеренка в шапке фильтров (как заголовок, не как кнопка) ========== */
#columns_dropdown {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  color: #6b7280 !important; /* цвет как у заголовков фильтров */
  align-self: flex-start !important;
  margin-top: 0 !important;
}

#columns_dropdown i {
  font-size: 18px !important;
  line-height: 1 !important;
}

#columns_dropdown:after { /* убрать стрелку dropdown */
  display: none !important;
}

/* ========== Выравнивание высоты всех контролов фильтров на одной линии ========== */
.card-style.mb-1 .input-style-1 input,
.card-style.mb-1 .input-style-2 input,
.card-style.mb-1 .form-select,
.card-style.mb-1 button.plans-dropdown,
.card-style.mb-1 .dropdown-toggle,
.card-style.mb-1 .main-btn.dropdown-toggle {
  height: 40px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Шестерёнка: убрать любые паддинги, перекрывая общие правила выше */
.card-style.mb-1 #columns_dropdown {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  height: auto !important;
}

/* Панель фильтров адаптивной высоты (без фиксированной высоты контейнера) */
.card-style.mb-1 {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Размер чекбоксов в выпадающем списке статусов */
.card-style.mb-1 .dropdown-menu .form-check-input {
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  padding: 0 !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex: 0 0 20px !important;
}

/* Убираем focus-outline/box-shadow у чекбоксов в селекте */
.card-style.mb-1 .dropdown-menu .form-check-input:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Чекбоксы на странице подписки (слева от опций) — как в селектах */
.tabs-dark .form-check-input[type="checkbox"],
.card-style .form-check-input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  border-radius: 4px !important;
}
.tabs-dark .form-check-input[type="checkbox"]:focus,
.card-style .form-check-input[type="checkbox"]:focus { outline: 0 !important; box-shadow: none !important; }
.tabs-dark .form-check-input[type="checkbox"]:checked,
.card-style .form-check-input[type="checkbox"]:checked {
  background-color: #14232B !important;
  border-color: #14232B !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.173 13.727a.75.75 0 0 1-1.06 0L1.47 10.084a.75.75 0 1 1 1.06-1.06l3.142 3.142l7.798-7.798a.75.75 0 0 1 1.06 1.06z'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
  background-position: center !important;
}

/* Disabled checkbox — совпадает по стилю и размеру с обычным */
.card-style.mb-1 .dropdown-menu .form-check-input:disabled,
.tabs-dark .form-check-input[type="checkbox"]:disabled,
.card-style .form-check-input[type="checkbox"]:disabled {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}
.card-style.mb-1 .dropdown-menu .form-check-input:disabled:checked,
.tabs-dark .form-check-input[type="checkbox"]:disabled:checked,
.card-style .form-check-input[type="checkbox"]:disabled:checked {
  background-color: #9ca3af !important; /* тусклый серый для disabled */
  border-color: #9ca3af !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.173 13.727a.75.75 0 0 1-1.06 0L1.47 10.084a.75.75 0 1 1 1.06-1.06l3.142 3.142l7.798-7.798a.75.75 0 0 1 1.06 1.06z'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
  background-position: center !important;
}
/* Текст метки рядом с disabled чекбоксом */
.card-style.mb-1 .dropdown-menu .form-check-input:disabled + .form-check-label,
.tabs-dark .form-check-input[type="checkbox"]:disabled + .form-check-label,
.card-style .form-check-input[type="checkbox"]:disabled + .form-check-label {
  opacity: .6 !important;
  cursor: not-allowed !important;
}

/* Глобальные стили чекбоксов (для форм, рендеримых макросом bootstrap5) */
.form-check-input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
}
.form-check-input[type="checkbox"]:focus { outline: 0 !important; box-shadow: none !important; }
.form-check-input[type="checkbox"]:checked {
  background-color: #14232B !important;
  border-color: #14232B !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.173 13.727a.75.75 0 0 1-1.06 0L1.47 10.084a.75.75 0 1 1 1.06-1.06l3.142 3.142l7.798-7.798a.75.75 0 0 1 1.06 1.06z'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
  background-position: center !important;
}
.form-check-input[type="checkbox"]:disabled { background-color: #f3f4f6 !important; border-color: #d1d5db !important; opacity: 1 !important; cursor: not-allowed !important; }
.form-check-input[type="checkbox"]:disabled:checked { background-color: #9ca3af !important; border-color: #9ca3af !important; }
.form-check-input[type="checkbox"]:disabled + .form-check-label { opacity: .6 !important; cursor: not-allowed !important; }

/* ========== Колонки (шестерёнка): дропдаун без горизонтального скролла, весь текст виден ========== */
/* Кнопка-иконка: оставляем как заголовок, но меню делаем удобным */
#columns_dropdown + .dropdown-menu {
  max-height: 340px;              /* увеличить видимую высоту селекта */
  overflow-y: auto;
  overflow-x: hidden;             /* убрать горизонтальный скролл */
  white-space: normal;            /* перенос строк */
  width: max-content !important;  /* перекрыть .w-100 */
  min-width: 260px;
  max-width: 80vw;                /* не вылезать за вьюпорт */
}

#columns_dropdown + .dropdown-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}

#columns_dropdown + .dropdown-menu .form-check-label {
  white-space: normal;
  word-break: break-word;
}

/* (удалено дублирование правил #columns_dropdown; актуальные стили выше) */

/* Кастомный вид чекбокса при выборе: белая галочка и светло-серый фон как у hover-кнопки */
.card-style.mb-1 .dropdown-menu .form-check-input:checked {
  background-color: #14232B !important; /* как .main-btn.light-btn:hover */
  border-color: #14232B !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.173 13.727a.75.75 0 0 1-1.06 0L1.47 10.084a.75.75 0 1 1 1.06-1.06l3.142 3.142l7.798-7.798a.75.75 0 0 1 1.06 1.06z'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
  background-position: center !important;
}

.card-style.mb-1 .dropdown-menu .form-check-label {
  line-height: 20px !important;
}

/* Статусы: выравнивание текста слева и стрелки справа в кнопке */
#statuses_dropdown {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: left !important;
}

.card-style.mb-1 .input-style-1 label,
.card-style.mb-1 .input-style-2 label {
  margin-bottom: 6px !important;
}

/* Паддинги кнопок в панели фильтров */
.card-style.mb-1 .main-btn {
  padding: 8px 12px !important;
  height: 40px !important;            /* выровнять с инпутами */
  display: inline-flex !important;
  align-items: center !important;
  line-height: 22px !important;       /* предотвращает рост из-за line-height:1.5 */
}

/* Отступ сверху для кнопки "Создать кейс" в панели фильтров */
.card-style.mb-1 .plans-desktop .main-btn.primary-btn {
  margin-top: 26px !important;
}

/* Контейнер с шестерёнкой выровнен по верхнему краю */
.card-style.mb-1 .plans-desktop:has(#columns_dropdown) {
  display: flex !important;
  flex-direction: column !important;
}

/* Отступ у кнопки "Сбросить" от шестерёнки */
#clear_filters {
  margin-top: 7.5px !important;
}


/* Скрываем кнопку меню по умолчанию (при ширине > 1199px) */
.menu-toggle-btn {
  display: none !important;
}

.menu-toggle-btn .main-btn {
  padding: 8px 8px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

.menu-toggle-btn .main-btn i {
  font-size: 16px !important;
}


.header .row {
  align-items: center !important;
}

.header .col-lg-3,
.header .col-md-3,
.header .col-3,
.header .col-lg-5,
.header .col-md-5,
.header .col-4,
.header .col-lg-1,
.header .col-md-1,
.header .col-2 {
  display: flex !important;
  align-items: center !important;
}

.header h2,
.header h3 {
  margin: 0 !important;
  line-height: 1 !important;
}

.header .header-left {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.header .header-right {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.alert-login {
  padding-top: 20px !important;
}

.header .header-right button {
  border-radius: 100% !important;
  width: 46px !important;
  height: 46px !important;
}

.header .header-right .profile-box .profile-info .info .image {
  margin-right: 0 !important;
}


.card-style.mb-1 .row {
  align-items: flex-end !important;
}

.input-style-1,
.input-style-2 {
  margin-bottom: 0 !important;
}

.input-style-1 label,
.input-style-2 label {
  margin-bottom: 4px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}

.input-style-1 input,
.input-style-2 input {
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.input-style-1 input:focus,
.input-style-2 input:focus {
  border-color: var(--c-dark, #14232B) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(20, 35, 43, 0.1) !important;
}

.main-btn.light-btn {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  transition: all 0.2s ease !important;
}

.main-btn.light-btn:hover {
  background-color: #e5e7eb !important;
  color: #1f2937 !important;
}

.main-btn.danger-btn {
  background-color: oklch(57.7% 0.245 27.325) !important;
  color: white !important;
  border: 1px solid oklch(57.7% 0.245 27.325) !important;
}

.main-btn.danger-btn:hover {
  background-color: oklch(52% 0.245 27.325) !important;
  border-color: oklch(52% 0.245 27.325) !important;
}

/* Желтые кнопки (редактировать, остановить конвертацию) */
.warning-btn,
.btn.warning-btn,
button.warning-btn,
.main-btn.warning-btn {
  background-color: transparent !important;
  color: oklch(79.5% 0.184 86.047) !important;
  border: 1px solid oklch(79.5% 0.184 86.047) !important;
  display: flex !important;
  min-height: 38px !important;
  min-width: 38px !important;
  align-items: center !important;
  justify-content: center !important;
}

.warning-btn:hover,
.btn.warning-btn:hover,
button.warning-btn:hover,
.main-btn.warning-btn:hover {
  background-color: oklch(74% 0.184 86.047) !important;
  border-color: oklch(74% 0.184 86.047) !important;
  color: white !important;
}

/* Красные круглые кнопки в таблице (удалить) */
.btn.danger-btn.rounded-full,
button.danger-btn.rounded-full {
  background-color: transparent !important;
  border-color: oklch(57.7% 0.245 27.325) !important;
  color: oklch(57.7% 0.245 27.325) !important;
  display: flex !important;
  min-height: 38px !important;
  min-width: 38px !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn.danger-btn.rounded-full:hover,
button.danger-btn.rounded-full:hover {
  background-color: oklch(52% 0.245 27.325) !important;
  border-color: oklch(52% 0.245 27.325) !important;
  color: white !important;
}

.btn-sm,
.main-btn.btn-sm {
  padding: 6px 12px !important;
  font-size: 13px !important;
}

/* Input with right icon: place icon centered on the right and add right padding */
.input-with-icon-right {
  position: relative;
}
.input-with-icon-right input {
  padding-right: 36px !important; /* space for the icon */
}
.input-with-icon-right .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* click-through for input */
}
.input-with-icon-right .icon i {
  font-size: 16px !important;
  line-height: 1 !important;
  display: block;
}

/* Навигационные табы: в фирменной гамме */
.nav-tabs { border-bottom: 1px solid #e5e7eb !important; }
.nav-tabs .nav-link {
  color: #6b7280 !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  padding: 10px 14px !important;
}
.nav-tabs .nav-link:hover { color: #1f2937 !important; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #1f2937 !important;
  border-bottom-color: #1f2937 !important;
  background: transparent !important;
}
.nav-tabs .nav-link:focus { box-shadow: none !important; }

/* Tabs for settings (tab-style-1) */
.tab-style-1 .nav { border-bottom: 1px solid #e5e7eb !important; gap: 24px; align-items: flex-end; }
.tab-style-1 .nav button {
  background: transparent !important;
  border: none !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  position: relative;
}
.tab-style-1 .nav button a { color: inherit; text-decoration: none; }
.tab-style-1 .nav button:hover { color: #1f2937 !important; }
.tab-style-1 .nav button.active { color: #1f2937 !important; }
/* Активная линия под табом (ровно по нижнему бордеру контейнера) */
.tab-style-1 .nav button.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; border-radius: 3px; background: #1f2937;
}
/* Анимированная линия при hover (выезд справа налево тем же цветом) */
.tab-style-1 .nav button::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: #1f2937; border-radius: 3px;
  transform: scaleX(0); transform-origin: right; transition: transform .25s ease;
}
.tab-style-1 .nav button:hover::before { transform: scaleX(1); transform-origin: left; }

/* Our custom dark tabs (without theme class) */
.tabs-dark .nav { border-bottom: 1px solid #e5e7eb; gap: 0px; align-items: flex-end; }
.tabs-dark .nav button { background: transparent; border: none; color: #6b7280; font-weight: 500; padding: 10px 14px; position: relative; }
.tabs-dark .nav button a { color: inherit; text-decoration: none; }
.tabs-dark .nav button:hover, .tabs-dark .nav button.active { color: #1f2937; }
.tabs-dark .nav button.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:3px; background:#1f2937; }
.tabs-dark .nav button::before { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#1f2937; border-radius:3px; transform:scaleX(0); transform-origin:right; transition:transform .25s ease; }
.tabs-dark .nav button:hover::before { transform:scaleX(1); transform-origin:left; }

/* Отступ контента под табами */
.tab-content { margin-top: 0px; }


.rounded-full {
  border-radius: 50% !important;
}

.plans-th-btn,
.plans-light-btn {
  padding: 6px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Размер иконки внутри кнопки заголовка */
#select_all_plans i {
  font-size: 16px !important;
  line-height: 1 !important;
}
#select_all_plans svg {
  width: 16px !important;
  height: 16px !important;
}

/* Стили для кнопки выбора в состоянии "выбрано" (красная) */
.plans-danger-btn,
.btn.plans-danger-btn,
button.plans-danger-btn {
  padding: 6px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: oklch(57.7% 0.245 27.325) !important;
  background: oklch(57.7% 0.245 27.325) !important;
  border-color: oklch(57.7% 0.245 27.325) !important;
  color: #ffffff !important;
}

/* Убрать hover эффект у выбранной кнопки */
.plans-danger-btn:hover,
.btn.plans-danger-btn:hover,
button.plans-danger-btn:hover {
  background-color: oklch(57.7% 0.245 27.325) !important;
  background: oklch(57.7% 0.245 27.325) !important;
  border-color: oklch(57.7% 0.245 27.325) !important;
  color: #ffffff !important;
}

.plans-danger-btn i,
.btn.plans-danger-btn i,
button.plans-danger-btn i {
  color: #ffffff !important;
}

/* Фон для выбранной строки */
.bg-light-red {
  background-color: oklch(92% 0.05 27.325) !important;
}

/* Убрать hover эффект у выбранной строки */
tr.bg-light-red:hover,
tr.bg-light-red:hover td {
  background-color: oklch(92% 0.05 27.325) !important;
}

/* Подсветка выбранной мобильной карточки: бордер вместо фона */
.card-style {
  background-color: white !important;
  border-radius: 8px !important;
  border: 4px solid transparent !important; /* дефолтный прозрачный бордер, чтобы не прыгала верстка */
  padding: 20px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  margin-top: 20px !important;
}

.card-style.bg-light-red {
  background-color: #ffffff !important;
  border-color: oklch(92% 0.05 27.325) !important; /* тот же цвет, что и для строк таблицы */
}

.card-style.bg-light-red:hover {
  background-color: #ffffff !important;
  border-color: oklch(92% 0.05 27.325) !important;
}


.base-pagination .page-item .page-link {
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  padding: 8px 12px !important;
  margin: 0 2px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.base-pagination .page-item .page-link:hover {
  background-color: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

.base-pagination .page-item.disabled .page-link {
  background-color: var(--c-dark, #14232B) !important;
  color: white !important;
  border-color: var(--c-dark, #14232B) !important;
}

/* Показываем кнопку меню при ширине ≤1199px */
@media (max-width: 1199px) {
  .menu-toggle-btn {
    display: block !important;
  }
}

/* При ширине > 1199px меню всегда открыто */
@media (min-width: 1200px) {
  .sidebar-nav-wrapper.sidebar-closed {
    transform: translateX(0) !important;
  }

  .main-wrapper.sidebar-closed {
    padding-left: 260px !important;
  }

  .overlay.sidebar-closed {
    display: none !important;
  }

  .menu-toggle-btn.sidebar-closed {
    transform: translateX(0) !important;
    left: 230px !important;
  }
}

@media (max-width: 991px) {
  .sidebar-nav-wrapper .sidebar-nav ul .nav-item a:hover {
    transform: none !important;
  }

  #plansTable td,
  #plansTable th {
    max-width: 120px !important;
  }

  /* Кнопки "Создать кейс" и "Удалить выбранные" — фиксированная ширина на планшетах */
  #create_case_btn {
    width: 150px !important;
    display: inline-flex !important;
  }
  #delete_selected {
    width: 150px !important;
    display: inline-flex !important;
  }
  /* Отступы между строками фильтров */
  .row.card-style.mb-1 > [class^="col-"],
  .row.card-style.mb-1 > [class*=" col-"] { margin-bottom: 8px !important; }
}

/* Переопределяем правило темы: breakpoint 767px вместо 1024px */
@media (min-width: 768px) {
  .plans-desktop { display: block !important; }
  .plans-mobile { display: none !important; }
  .mobile-only { display: none !important; }
}

@media (max-width: 767px) {
  .plans-desktop { display: none !important; }
  .plans-mobile { display: block !important; }
  .mobile-only { display: block !important; }

  /* Исключения: кнопка создать кейс, шестерёнка и сбросить остаются видимыми */
  .plans-desktop:has(#create_case_btn),
  .plans-desktop:has(#columns_dropdown),
  .plans-desktop:has(#clear_filters) { display: block !important; }
}

/* Стили для мобильных карточек */
.mobile-card-field {
  padding: 4px 0;
  border-bottom: 1px solid #f3f4f6;
}
.mobile-card-field:last-child {
  border-bottom: none;
}
.mobile-card-field strong {
  font-size: 13px;
  color: #6b7280;
}
.mobile-card-field p {
  margin: 0;
  font-size: 14px;
  color: #374151;
}

@media (max-width: 767px) {
  .menu-toggle-btn .main-btn {
    padding: 10px 10px !important;
    width: 40px !important;
    height: 40px !important;
  }

  #plansTable td,
  #plansTable th {
    max-width: 100px !important;
    font-size: 12px !important;
  }

  /* Уменьшить размер заголовка "Кейсы" и суммы баланса */

  .header h3 {
    font-size: 18px !important;
  }

  /* Скрыть второй блок (чат) на странице создания/редактирования кейса */
  .row:has(.col-md-6.col-6) .col-md-6.col-6:last-child {
    display: none !important;
  }
  /* Расширить первый блок (форму) на всю ширину */
  .row:has(.col-md-6.col-6) .col-md-6.col-6:first-child {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  .row:has(.col-md-6.col-6) .col-md-6.col-6:last-child {
    flex: 0 0 auto !important;
    width: 8.33333333% !important; /* col-md-1 */
  }

  /* Добавить правый padding для формы, чтобы не наезжали кнопки */
  .row:has(.col-md-6.col-6) .col-md-6.col-6:first-child form {
    padding-right: 62px !important;
  }

  /* Уменьшить отступ справа у кнопок (врач, пациент, email) */
  .position-absolute.start-100 {
    margin-left: 12px !important; /* вместо стандартного большего отступа */
  }

  /* Убрать левый отступ у кнопок внутри position-absolute */
  .position-absolute.start-100 .btn {
    margin-left: 0 !important;
  }

  /* Скрыть кнопку "Сбросить" и шестерёнку */
  #clear_filters,
  #columns_dropdown {
    display: none !important;
  }

  /* Уменьшить размер шрифта табов */
  .nav-tabs .nav-link,
  .tabs-dark .nav button,
  .tabs-dark .nav button a {
    font-size: 12px !important;
  }

  /* Уменьшить размер шрифта таблицы тарифов */
  .table-responsive table.table,
  .table-responsive table.table th,
  .table-responsive table.table td,
  .table-responsive table.table thead th strong,
  .table-responsive table.table tbody th,
  .table-responsive table.table tbody td {
    font-size: 12px !important;
  }
}

/* Прогресс-бар для шагов создания кейса */
.case-progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  padding-top: 0;
}

.case-progress-bar::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #E5E7EB;
  z-index: 0;
}

.case-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  flex: 1;
  cursor: default;
}

.case-progress-step.clickable {
  cursor: pointer;
}

.case-progress-step.clickable:hover .step-circle {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #E5E7EB;
  color: #9CA3AF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
  border: 3px solid #E5E7EB;
  transition: all 0.3s ease;
}

.case-progress-step.active .step-circle {
  background-color: var(--c-dark, #14232B);
  color: white;
  border-color: var(--c-dark, #14232B);
}

.case-progress-step.completed .step-circle {
  background-color: var(--c-dark, #14232B);
  color: white;
  border-color: var(--c-dark, #14232B);
}

.case-progress-step.completed .step-circle::before {
  content: '✓';
  font-size: 20px;
}

.step-label {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  text-align: center;
  white-space: nowrap;
}

.case-progress-step.active .step-label {
  color: var(--c-dark, #14232B);
  font-weight: 600;
}

.case-progress-step.completed .step-label {
  color: var(--c-dark, #14232B);
}

/* Прогресс линия между шагами */
.case-progress-bar .step-line {
  position: absolute;
  top: 20px;
  left: 0;
  height: 2px;
  background-color: var(--c-dark, #14232B);
  z-index: 0;
  transition: width 0.3s ease;
}

@media (max-width: 767px) {
  .case-progress-bar {
    margin-bottom: 20px;
  }

  .step-circle {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }

  .step-label {
    font-size: 12px;
  }
}

@media (max-width: 767px) {

.menu-toggle-btn.sidebar-closed {
    top: 100px !important;
  }
.menu-toggle-btn {
  top: 100px !important;
}
}

/* Стили для колонки комментариев в таблицах */
.comment-cell {
    max-width: 250px;
    min-width: 150px;
    position: relative;
}

.comment-cell span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

/* Стили для тултипа комментариев */
.comment-tooltip.tooltip {
    z-index: 1070;
}

.comment-tooltip .tooltip-inner {
    max-width: 400px;
    text-align: left;
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 8px 12px;
}

/* Стрелка тултипа */
.comment-tooltip.bs-tooltip-top .tooltip-arrow::before,
.comment-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #ddd !important;
}

.comment-tooltip.bs-tooltip-top .tooltip-arrow,
.comment-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
    bottom: 0;
}

.comment-tooltip.bs-tooltip-top .tooltip-arrow::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}