.container-header {
  z-index: 10;
  background-color: #7c838b;
  background-image: none;
}
.footer {
  color: #fff;
  background-color: #7c838b;
  background-image: none;
}
.header-info {
  display: flex;
  gap: 2rem;
}
.header-info a {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
}
.view-login form {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}
/* Страницы входа и восстановления логина:
   форма центрируется в видимой области (между хедером и футером)
   и не заходит под хедер. Панель flex + margin:auto у содержимого:
   при нехватке высоты верх формы остаётся доступным через прокрутку. */
.view-login .container-component,
.view-lostpassword .container-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
}
.view-login .container-component > *,
.view-lostpassword .container-component > * {
  max-width: 500px;
  width: 100%;
  margin: auto;   /* по осям центр / корректный скролл при переполнении */
}
/* Универсальное центрирование формы восстановления (CB):
   срабатывает независимо от того, какой class у body.
   Панель-область между хедером и футером центрирует своё содержимое
   и даёт запас, чтобы верх формы не заезжал под хедер. */
body:has(.cbLostPassForm) .container-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
}
body:has(.cbLostPassForm) .container-component main,
body:has(.cbLostPassForm) .container-component > * {
  width: 100%;
  max-width: 600px;
  margin: auto;
}
.cbLostPassForm {
  max-width: 600px;
  margin: 0 auto;   /* центрируем сам блок по горизонтали */
}

.cbRegistration {
  max-width: 550px;
  margin: 3rem auto;
}
.cbRegistration input[type='text'],
.cbRegistration input[type='email'] {
  width: 100% !important;
}
.cbValidationIcon {
  margin-right: 0.5rem;
}
.mod-login__options {
  display: flex;
  justify-content: space-between;
}
.cbPoweredBy {
  display: none;
}
.cbMenu_UE_UPDATEPROFILE {
  margin-bottom: 1rem;
  border-color: var(--bs-danger);
}
.cbMenu_UE_UPDATEPROFILE a {
  color: var(--bs-danger);
}
.accordion-collapse__title {
  font-size: x-large;
}
footer .grid-child {
  justify-content: center !important;
}
.cb_template .form-auto .form-control,
.cb_template .form-auto .form-select {
  display: inline-block;
}
.cyber-elite-video__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
  gap: 1rem;
}
video {
  max-width: 100%;
}
.offcanvas {
  background: #f5f5f5;
  max-width: 80%;
}
button[data-bs-toggle='offcanvas'] {
  padding: 2px 8px;
  margin: 5px;
}
.offcanvas .btn-close {
  position: absolute;
  right: 1.5rem;
  top: 1rem;
}
span.mod-menu__heading.nav-header {
  text-transform: uppercase;
  font-weight: bold;
  font-size: initial;
}
.container-sidebar-left {
  position: relative;
}
.open-closeb-sidebar-left {
  position: fixed;
  left: 280px;
  z-index: 100;
  top: 52px;
}
/* Кнопка сворачивания/разворачивания сайдбара позиционируется
   относительно левой панели (см. селектор .container-sidebar-left выше). */
.container-sidebar-left.close {
  width: 15px;
}
.container-sidebar-left.close .open-closeb-sidebar-left span {
  rotate: 180deg;
}
.container-sidebar-left.close .open-closeb-sidebar-left {
  position: fixed;
  right: 3px;
  left: -1px;
  width: 26px;
}
html.sidebar-is-closed .container-sidebar-left {
  width: 15px; /* Либо opacity: 0 / transform в зависимости от ваших стилей */
}
.icons {
  display: none;
}
.container-header .navbar-brand img {
  height: 15px !important;
}
/* Левая панель меню: собственная прокрутка, но без видимого скроллбара. */
.container-sidebar-left {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* старый Edge/IE */
}
.container-sidebar-left::-webkit-scrollbar {
  display: none;                /* Chrome/Safari */
}

/* На мобильных (<=768px) левую панель скрываем — выводится offcanvas/меню */
@media (max-width: 767.98px) {
  .container-sidebar-left,
  .open-closeb-sidebar-left {
    display: none !important;
  }
}
/* === Dashboard-раскладка: страница не прокручивается ===
   body — ровно вьюпорт (overflow:hidden); между прижатыми хедером
   сверху и футером снизу контент делится на 2 прокручиваемых панели. */
html {
  height: 100%;
}

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Хедер и футер занимают только собственную высоту, не растягиваются */
.container-header,
.footer,
.container-footer {
  flex: none;
}

/* Контентная область заполняет весь остаток высоты между хедером и футером */
.site-grid {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  height: auto;
  min-height: 0;
  margin: 0;                 /* сбрасываем «прижимающий» margin из template.css */
  align-items: stretch;
}

/* Панели растягиваются на всю высоту контентной области */
.container-sidebar-left,
.container-component,
.container-sidebar-right {
  align-self: stretch;
  height: auto;
  min-height: 0;
  min-width: 0;   /* разрешаем «сжаться» внутри flex-строки для прокрутки */
}

/* Основная панель забирает оставшуюся ширину после левого сайдбара */
.container-component {
  flex: 1 1 auto;
}

.container-component {
  /* Основная панель контента: своя видимая вертикальная прокрутка.
     Высота задаётся растяжением (align-self: stretch / min-height: 0). */
  overflow-y: auto;
  overflow-x: hidden;
}
footer {
  font-size: small;
  text-align: center;
}
.metismenu.mod-menu .metismenu-item {
  font-size: 1rem;
}
.container-component > :first-child,
.container-sidebar-left > :first-child,
.container-sidebar-right > :first-child,
.container-component > * + *,
.container-sidebar-left > * + *,
.container-sidebar-right > * + * {
  margin-top: 0;
}
body:not(.has-sidebar-right) .site-grid .container-component {
  padding: 0 1rem 1rem 1rem;
}
body:not(.has-sidebar-right)
  .site-grid
  .container-component:has(iframe:not([src='about:blank'])) {
  padding: 0rem;
}
.menu-separator-wrapper hr {
  flex: 1;
  border: none;
  border-top: 1px solid #888;
  margin: 0;
}
.offcanvas-body .mod-menu span.fas {
  display: none;
}
.sidebar-left.card._menu a {
  font-size: 0.9rem;
}
li.deeper.parent > a {
  font-weight: bold;
  text-transform: uppercase;
}

.mod-articles-group {
  padding: 1rem 2rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #f9f9f9;
  width: min(48%, 300px);
}
@media (max-width: 556px) {
  .mod-articles-group {
    width: 100%;
  }
}
.main_products {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.mod-articles-group h4 {
  text-transform: uppercase;
}
#system-message-container:has(joomla-alert) {
  margin-top: 1em;
  margin-bottom: 1rem;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Без фиксированной высоты: контент сам определяет высоту колонки */
}
main > div {
  width: 100%;
}
/* Флекс-расклад внутри основной панели (прокрутка задана выше). */
.container-component {
  display: flex;
  flex-direction: column;
}

/* === Страница документации (статья с #docs-frame) ===
   iframe должен занимать всю доступную высоту панели между хедером
   и футером. Панель не должна сама прокручиваться — скроллится iframe.
   Инлайн-высоту calc(100vh-85px) из разметки перебиваем через !important. */
.container-component:has(#docs-frame) {
  overflow: hidden;
  padding: 0;
}
.container-component:has(#docs-frame) main {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}
.container-component:has(#docs-frame) main > div,
.container-component:has(#docs-frame) .article-body,
.container-component:has(#docs-frame) .com-content-article,
.container-component:has(#docs-frame) .item-page,
.container-component:has(#docs-frame) .com-content-article__body {
  height: 100%;
  min-height: 0;
}
.container-component:has(#docs-frame) #docs-wrapper {
  height: 100%;
  min-height: 0;
}
#docs-frame {
  display: block;
  width: 100%;
  height: 100% !important;   /* побеждает инлайн calc(100vh - 85px) */
  border: none;
}

/* === Выпадающие списки (select): белый фон как у инпутов + шеврон ===
   В template.css у .form-select был серый background-color (#eaedf0), а
   стрелка (url ../images/select-bg.svg) не отображалась — нужный SVG
   отсутствовал в папке images дочернего шаблона (теперь скопирован).
   Ниже: редактируемые селекты — белые (как .form-control, var(--body-bg));
   серый (var(--secondary-bg)) остаётся только для нередактируемых. */
.form-select:not(:disabled):not([readonly]) {
  background-color: var(--body-bg);
}
.form-select:not(:disabled):not([readonly]):focus {
  background-color: var(--body-bg);
}

/* Нередактируемые селекты — серые (в template.css так стилизован только :disabled) */
.form-select:disabled,
.form-select[readonly] {
  background-color: var(--secondary-bg);
  cursor: not-allowed;
}

/* Стрелка-шеврон: уменьшена на 20%.
   Шеврон «зашит» в растянутый SVG (рис. select-bg.svg), который в template.css
   позиционируется через background-size: 116rem. Чтобы уменьшить именно стрелку
   на 20%, масштабируем первый слой фона: 116rem → 92.8rem (116 × 0.8).
   Позицию справа сохраняем (right 1rem center), стрелка остаётся у правого края.
   Для полей с валидацией (valid/invalid) второй слой — иконка статуса,
   её размер оставляем прежним (calc(.75em + .6rem)). */
.form-select,
.custom-select {
  background-size: 92.8rem;
}
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .custom-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.was-validated .custom-select:valid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.is-valid.custom-select:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.is-valid.custom-select:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .custom-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.was-validated .custom-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.is-invalid.custom-select:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.is-invalid.custom-select:not([multiple])[size="1"] {
  background-size: 92.8rem, calc(.75em + .6rem) calc(.75em + .6rem);
}