:root {
  --body-color: #d0cdc4;
  --container-color: rgba(245, 243, 238, 0.94);
  --panel-color: #F5F3EE;
  --sub-panel-color: #EAEDED;
  --hover-color: #F9E79F;
  --button-color: #ffffff ;
  --selected-color: #F7DC6F;
  --menu-color:#6A665D;

  /* 
  --body-color: #cbc4b4;
  --container-color: rgba(245, 243, 238, 0.94);
  --panel-color: #ECF0F1;
  --sub-panel-color: #EAEDED;
  --hover-color: #F9E79F;
  --button-color: #FBFCFC ;
  --selected-color: #F7DC6F;
  --menu-color:#8C8E8E;
  
  */

  --my-green: #81FF1E;
  --my-green_muted: #d3f5ba;
  --my_fade-green:#568234;
  --my-orange: #FFC300;
  --my_fade-orange: #f3dd95;
  --my-red: #FF5733;
  --my-red_muted: #f5ae9e;
  --my_fade-red: #8e4839;
  --my_ellow: #DFFF00;
  --my_skyblue: #6495ED;
  --my_skyblue_muted: #afc9f8;
  --my_sea: #40E0D0;
  --my_purple :#CCCCFF;
  --my_darkgray: #808B96;
  --my_dark: #808rgb(30, 30, 30);

  --public-black: #111111;
  --public-graphite: #1C1C1E;
  --public-accent: #F08A00;
  --public-paper: #F5F3EE;
  --public-muted: #6B7280;
  --public-success: #1FA971;
  --public-danger: #D64545;
  --public-border: rgba(17, 17, 17, 0.08);
  --public-shadow: 0 24px 60px rgba(17, 17, 17, 0.08);
  --public-font-heading: 'Manrope', sans-serif;
  --public-font-body: 'Inter', sans-serif;
  --brand-primary: #2563eb;
  --brand-primary-dark: #1e40af;
  --brand-accent: #f59e0b;
  --bg-soft: #f7f9fc;
  --card-bg: #ffffff;
  --border-soft: #e5e7eb;
  --text-dark: #1f2937;
  --text-muted: #6b7280;
  --text-light: #f8fafc;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--public-font-heading);
}

.fold_header .title h1,
.fold_header .title h2,
.fold_header .title h3,
.fold_header .title h4,
.fold_header .title h5,
.fold_header .title h6 {
  margin: 0;
  font-family: var(--public-font-heading);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.1;
}

.org-body-background {
  background-color: var(--body-color);
  background-image: var(--org-background-image, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Edge */
} 
::-webkit-scrollbar {
    width: 0;
    background-color: #f9f9fd;
    display: none;             /* Chrome, Safari, Edge */
}
* {
  -ms-overflow-style: none;  /* IE и старый Edge */
  scrollbar-width: none;     /* Firefox */
}


.number::after {
  content: format('### ### ###', attr(data-number));
}

.parent {
    position: relative; /* необходимо для корректной работы абсолютного позиционирования дочернего элемента */

}

.ajax-load-bar {
  position: fixed; /* Фиксированное позиционирование */
  top: 0; /* Расположение в верхней части экрана */
  left: 0;
  width: 0%; /* Начальная ширина */
  height: 5px; /* Высота прогресс бара */
  /* background-color: #4caf50;
  transition: width 2s ease-in-out; */
}

.panel{
  padding: 10px;
  background-color: white;
  border-radius: 16px;
}

.offer-delete-mark {
  display: none;
}

.card:hover .offer-delete-mark {
  display: inline-flex;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.7),
        rgba(255, 255, 255, 0.7) 10px,
        transparent 10px,
        transparent 20px
    ); */
    background: rgba(248, 249, 250, 0.6);
    backdrop-filter: blur(2px);
    z-index: 999;
}
.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Задайте нужный цвет или фон для перекрытия */
  z-index: 2; /* Установите значение z-index для позиционирования поверх других элементов */
}

/* скрывает скролбары */
::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.hide-empty:empty {
  /* скрывает элемент если у него нет содержимого */
  display: none;
}

.new-task-popup {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 10;

  padding: 5px;
  background: #fff;
  border: 2px solid red;
  margin-bottom: 10px;
  border-radius: 0 10px 10px 10px;
  max-width: 450px;
}

.header_navbar {
  margin-left: 8px;
  margin-right: 8px;
  height: 65px;
  padding: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: var(--menu-color);
  /* overflow: hidden; */
}

.foldable{
  position: relative;
  bottom: 0;
  height: 100%;
  /* height: 100vh; Новую - закомментировать */
  /* height: calc(100vh); */
  overflow-x: hidden;  
  overflow-y: scroll;
  /* transition: width 2s; */
}

.foldable_vertical_container{
  /* контейнер для вертикального адаптивного размещения
  верхнего статичного блока и нижнего блока с возможностью скроллинга */
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.fvc_upper_block {
  display: flex;
  flex-direction: column;
  position: relative;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;

  background-size: cover;           /* Заполняет весь блок, сохраняя пропорции */
  background-position: center;      /* Центрирует по горизонтали и вертикали */
  background-repeat: no-repeat;     /* Не повторяет */
}


.fvc_scrollable_block{
  /* нижний подстраивающийся блок с возможностью прокрутки*/
  flex-grow: 1;
  position: relative;
  z-index: 3;
  overflow-y: auto;
  max-height: calc(100% - 10px);
  /* новая - раскомментировать height: calc(90% - 10px);           автоматическая высота, основанная на содержимом */
  /* новая - раскомментировать max-height: calc(100% - 10px);       максимальная высота - 80% высоты экрана */
  border-radius:10px;
}

.fvc_scrollable_block.fvc_scroll_mask_top,
.fvc_scrollable_block.fvc_scroll_mask_bottom {
  --fvc-scroll-mask-size: 25px;
}

.fvc_scroll_mask_overlay {
  position: absolute;
  display: none;
  height: 25px;
  pointer-events: none;
  z-index: 7;
}

.fvc_scroll_mask_overlay.is-visible {
  display: block;
}

.fvc_scroll_mask_overlay_top {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: linear-gradient(
    to bottom,
    var(--panel-color, #fff) 0,
    transparent 100%
  );
}

.fvc_scroll_mask_overlay_bottom {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: linear-gradient(
    to top,
    var(--panel-color, #fff) 0,
    transparent 100%
  );
}

.fvc_horizontal_scrollbar {
  position: absolute;
  display: none;
  height: 16px;
  border-radius: 8px;
  background: rgba(245, 243, 238, 0.7);
  box-shadow: inset 0 0 0 1px rgba(106, 102, 93, 0.12);
  z-index: 8;
  pointer-events: auto;
  touch-action: none;
}

.fvc_horizontal_scrollbar.is-visible {
  display: block;
}

.fvc_horizontal_scrollbar_thumb {
  position: absolute;
  top: 3px;
  left: 0;
  height: 10px;
  border-radius: 8px;
  background: rgba(106, 102, 93, 0.38);
  box-shadow: 0 1px 2px rgba(106, 102, 93, 0.16);
  cursor: grab;
  transition: background-color 0.15s ease;
  will-change: transform;
}

.fvc_horizontal_scrollbar:hover .fvc_horizontal_scrollbar_thumb,
.fvc_horizontal_scrollbar_thumb:active {
  background: rgba(106, 102, 93, 0.52);
}

.hide_empty:empty {
  display: none;
}

/* client bonus checkbox height aligned with sm input */
.client-bonus-checkbox {
  width: calc(1.5em + 0.5rem + 2px);
  height: calc(1.5em + 0.5rem + 2px);
  margin-top: 0;
}
.client-bonus-check {
  align-self: flex-start;
  margin-top: 0;
}
.client-bonus-row {
  gap: 0.5rem;
}
.client-bonus-input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* work status checkbox size and colors */
.nt-work-status-ready-btn .bi {
  font-size: 1.5em;
  line-height: 1;
}

.nt-work-status-ready-btn .bi-check-square {
  color: #28a745;
}

.nt-work-status-ready-btn .bi-square {
  color: #e25822;
}

/* Элемент таблицы - строка */
.card_row.selected{
  background-color: var(--hover-color); /* немного более яркий бежевый цвет при наведении */
}

.card_row:hover{
  background-color: var(--hover-color); /* немного более яркий бежевый цвет при наведении */
}

.card {
  min-height: 55px;
}

tr.card {
  display: table-row;
  width: auto; /* или другое значение, если нужно */
}

.tr_body_click {
  cursor: pointer;
}

.card_trunk {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 5px;
  border-radius: 8px;
  word-wrap: break-word; /* Перенос длинных слов */
  overflow-wrap: break-word; /* Совместимость с разными браузерами */
  word-break: break-word; /* Перенос слов */
  white-space: normal; /* Разрешить перенос строк */
  overflow: hidden; /* Скрыть переполненное содержимое */
}

/* Show only on hover of card/tree-end (optional controls). */
.nt-hover-reveal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease-in-out;
}

.nt-hover-reveal-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease-in-out;
}

.order-org-number-badge {
  display: inline-block;
  padding: 1px 6px;
  color: #fff;
  background-color: #808080;
  border-radius: 8px 4px 4px 4px;
}

.order-date-progress-mark {
  display: inline-block;
  width: 80px;
  margin-right: 5px;
}

.order-date-progress-mark__label {
  display: block;
  margin-right: 0;
  color: #fff;
  text-align: center !important;
  border-color: #8f979f;
  background: linear-gradient(
    to right,
    #5f9f7a 0%,
    #5f9f7a var(--order-progress, 0%),
    #a3aab1 var(--order-progress, 0%),
    #a3aab1 100%
  );
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.card:hover > .tree-end > .mark .nt-hover-reveal,
.tree-end:hover > .mark .nt-hover-reveal,
.card:focus-within > .tree-end > .mark .nt-hover-reveal,
.tree-end:focus-within > .mark .nt-hover-reveal,
.dropdown.show.nt-hover-reveal,
.tree-end.nt-card-hover .nt-hover-reveal-card,
.dropdown.show.nt-hover-reveal-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tree-end:hover > .top-left-corner .nt-hover-reveal,
.tree-end:focus-within > .top-left-corner .nt-hover-reveal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Reveal only when the current card's tree-end is hovered. */
.card:hover > .tree-end > .mark .nt-hover-reveal.nt-hover-reveal-local {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tree-end:hover > .mark .nt-hover-reveal.nt-hover-reveal-local,
.tree-end:focus-within > .mark .nt-hover-reveal.nt-hover-reveal-local {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

textarea.no-focus:focus,
textarea.no-focus:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.position-group-header .edit_position_hover_button {
  display: none;
}

.position-group-header:hover .edit_position_hover_button,
.position-group-header:focus-within .edit_position_hover_button {
  display: inline-flex;
}


/* новые классы для отображения иерархии карточек - пришедшие на смену tree */




ul.scheme  {
  list-style: none;
  padding-left: 40px;
}

ul.scheme.only_child  {
  padding-left: 0px;
}

li.scheme  {
  list-style: none;
  position: relative;
}

/* Прорисовка стрелочек для li, которые не имеют класса only_child */
li.scheme:not(.only_child)::before {
  content: "";
  border-left: 2px solid #85929E;
  position: absolute;
  height: calc(100% + 20px);
  top: 0;
  left: -20px;
}

li.scheme:not(.only_child)::after {
  content: "";
  border-bottom: 2px solid #85929E;
  position: absolute;
  top: 20px;
  left: -20px;
  width: 20px;
}

li.scheme:not(.only_child):last-child::before {
  height: 20px;
}


/* новые классы для отображения иерархии карточек - пришедшие на смену tree  конец*/

.tree-end {
  position: relative;
  padding: 5px;
  z-index: 0;
  background-color: var(--button-color); /* ← основной цвет */
  border: none;
  margin-top: 10px;
  margin-bottom: 0px;
  border-radius: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
}


.tree-end::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* фон — под содержимым */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  opacity: 0.15;
  mask-image: linear-gradient(to left, rgba(0,0,0,0.98), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.98), rgba(0,0,0,0));
  pointer-events: none;
  border-radius: 10px;
}

.tree-end.work_bgi::before{
  background-image: 
  linear-gradient(to left, rgba(255,255,255,0.5), rgba(255,255,255,0.2)),
  url('/static/orders/Work.png');
}

.tree-end.task_bgi::before{
  background-image: 
  linear-gradient(to left, rgba(255,255,255,0.5), rgba(255,255,255,0.2)),
  url('/static/orders/new_task.jpg');
}

.tree-end.sale_bgi::before{
  background-image: 
  linear-gradient(to left, rgba(255,255,255,0.5), rgba(255,255,255,0.2)),
  url('/static/orders/Material.png');
}

.tree-end.order_bgi::before{
  background-image: 
  linear-gradient(to left, rgba(255,255,255,0.5), rgba(159, 49, 49, 0.2)),
  url('/static/orders/OrderPhoto.png');
}


.card_for_instpanel {
  position: relative;
  width: 100%;
  border-radius: 10px;
  border-width: 1px;
  margin-top: 10px;
  border-style: solid; /* Добавляем стиль рамки */
  border-color: #495057; /* Цвет рамки - серый */
}

.tree-end:hover {
  background-color: var(--hover-color); /* немного более яркий бежевый цвет при наведении */
}  

.menu_group > h5 {
  margin-bottom: 0.25rem;
  color: rgba(245, 243, 238, 0.96);
  font-family: var(--public-font-heading);
  font-weight: 800;
  line-height: 1.15;
}

.menu_group > small {
  color: rgba(245, 243, 238, 0.72);
  font-weight: 600;
}

.menu-org-switcher {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  min-height: 42px;
  margin: 0 0 0.25rem;
  padding: 10px 18px;
  border-radius: 8px;
  background-color: #F08A00;
  color: #1C1C1E;
  font-family: var(--public-font-heading);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.14);
}

.menu-org-switcher:hover,
.menu-org-switcher:focus {
  color: #111111;
  background-color: #FF9B19;
}

.menu-org-switcher.dropdown-toggle::after {
  margin-left: 0.75rem;
}

.menu-panel a.menu-org-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background-color: #F08A00;
  color: #1C1C1E;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.12);
}

.menu-panel a.menu-org-settings .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.menu-panel a.menu-org-settings .bi::before {
  display: block;
  line-height: 1;
  vertical-align: 0;
  -webkit-text-stroke: 0.35px currentColor;
}

.menu-panel a.menu-org-settings:hover,
.menu-panel a.menu-org-settings:focus {
  color: #111111;
  background-color: #FF9B19;
  text-decoration: none;
}

.main-menu-button:hover a {
  background-color: #F0E097 !important; /* подсвечиваем кнопку */
}

.menu_group .main-menu-button {
  border-radius: 8px !important;
  gap: 12px;
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
}

.menu_group .main-menu-button > h5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px !important;
  margin: 0;
  border-right: 0 !important;
  color: #4A4741;
  font-size: 1.15rem;
  line-height: 1;
}

.menu_group .main-menu-button > span {
  min-width: 0;
  margin-left: 0 !important;
  color: #34312D;
  font-weight: 600;
  line-height: 1.25;
}

.menu_group .main-menu-button > a.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-left: 0 !important;
  border-radius: 8px;
  color: #4A4741;
  background-color: rgba(245, 243, 238, 0.72) !important;
}

.menu_group .main-menu-button:hover > a.btn,
.menu_group .main-menu-button > a.btn:hover,
.menu_group .main-menu-button > a.btn:focus {
  color: #111111;
  background-color: rgba(240, 138, 0, 0.16) !important;
  text-decoration: none;
}

.good-separator {
  margin: 10px 0;
}
.tree-end a {
  transition: background-color 0.2s;
}
.tree-end.selected {
  background-color: #F0E097 !important;
  border-width: 3px;
  border-style: solid;
  border-color: #F9C400 !important;
  transition: background-color 0.2s ease;
}
.tree-end.highlight {
  animation: fadeOutBackground 0.5s 0.5s forwards; /* Задержка 1 секунда, длительность 1 секунда */
}

.tree-end.fixedselection {
  background-color: #9dee1a ;
  transition: background-color 0.2s ease;
}

/* Employee filter card: replace vivid red with muted red */
.wp-filter-employee-card .bg-danger,
.wp-filter-employee-card .badge-danger,
.wp-filter-employee-card .btn-danger,
.wp-filter-employee-card .form-check-input:checked {
  background-color: var(--my-red_muted) !important;
  border-color: var(--my-red_muted) !important;
}

.caret_down::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid var(--menu-color); /* Цвет стрелки */
}

.caret_down {
  position: relative; /* Делает возможным абсолютное позиционирование для дочерних элементов */
}



.tree-end > .active {
  border-color: orange;
}

/* .tree > .follower {
  margin-left: 20px;
  border-color: red;
} */

.tree-leader {
	position: relative;
}

.tree-leader:after, .tree-leader:before {
	content: "";
	border: solid transparent;
	position: absolute;
 	top: 100%;
	left: 14px;
}
.tree-leader:after {
	border-top-color: #949594;
	border-width: 8px;
	margin-left: 0;
}
.tree-leader:before {
	border-top-color: #949594;
	border-width: 9px;
	margin-left: -1px;
}

ul.tree  {
  list-style: none;
  padding-left: 40px;
}

li.tree  {
  list-style: none;
  position: relative;
  /* padding-top: 5px;
  border: 2px solid beige;
  border-radius: 10px;
  padding: 5px; /* добавим немного отступа внутри рамки */ */
}

.tree li::before{
  content: "";
  border-left: 2px solid;
  border-color: #85929E;
  position: absolute;
  height: calc(100% + 15px);
  top: 0;
  left: -20px;
}

.tree li::after{
  content: "";
  border-bottom: 2px solid;
  border-color: #85929E;
  position: absolute;
  top: 15px;
  left: -20px;
  width: 20px;
}

.tree li:last-child::before{
  height: 15px;
}

.tree-root {
	padding: 5px;
	position: relative;
	background: #fff;
	border: 1px solid #737373;
  margin-bottom: 10px;
  border-radius: 5px;
  /* max-width: 800px; */
}

.children_trunk {
  padding: 5px;
  background-color: var(--panel-color);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;

  margin-top: -8px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 8px;
    /* Добавление белых границ */
    border-left: 4px solid var(--button-color);
    border-bottom: 4px solid var(--button-color);
    border-right: 4px solid var(--button-color);
}

/* Используется при сортировки и отображении сортированных груп колонками */
.columns {
  display: flex; /* использование flexbox */
  overflow-x: auto; /* включение горизонтального скролла при необходимости */
  white-space: nowrap; /* предотвращение переноса колонок на новую строку */
}

.mark_element {
    font-size: small;          /* Установка размера шрифта */
  white-space: nowrap;       /* Запрет переноса текста на новую строку */
  overflow: hidden;          /* Скрытие содержимого, выходящего за рамки элемента */
  text-overflow: ellipsis;   /* Добавление многоточия, если текст не помещается полностью */
  border: 1px solid rgb(192, 192, 192);   /* Обводка рамки черного цвета */
  border-radius: 4px;        /* Скругление углов радиусом 4 пикселя */
  padding-left: 4px;
  padding-right: 4px;
  /* min-width: 80px; */
  background-color: white;
  margin-right: 5px;
    text-align: right;         /* Выравнивание текста по правому краю */
  }

  .status-timer-badge {
    color: #1f1f1f !important;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  }

.details_columns {
  min-width: 320px;
  margin-right: 0px; /* отступ между колонками */
  padding: 0px; /* Пример внутренних отступов */
}

.foldable_vertical_container[uniq='orders_gantmode_fold'] .details_columns {
  display: flex;
  flex-direction: column;
  flex: 0 0 320px;
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

.foldable_vertical_container[uniq='orders_gantmode_fold'] .fvc_scrollable_block {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.foldable_vertical_container[uniq='orders_gantmode_fold'] .tab-content[panel_id='all_orders'] {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.foldable_vertical_container[uniq='orders_gantmode_fold'] #orders_card_container.columns {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.foldable_vertical_container[uniq='orders_gantmode_fold'] .column_orders {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.status-meta-fixed {
  width: 350px;
  max-width: 350px;
  flex: 0 0 350px;
  overflow: hidden;
}



.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1px;
}


.calendar-item {
  border: 1px solid #737373;
  background-color: #fff;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  text-align: center;
}

.calendar-item-container:after, .calendar-item-container:before {
	content: "";
	border: solid transparent;
	position: absolute;
 	top: 100%;
	left: 16px;
}
.calendar-item-container:after {
	border-top-color: #949594;
	border-width: 8px;
	margin-left: 0;
}
.calendar-item-container:before {
	border-top-color: #949594;
	border-width: 9px;
	margin-left: -1px;
}

.calendar-item:hover {
  border-bottom: 2px solid black;
  border-right: 2px solid black;
}

.calendar-item.Пн {
  grid-column-start: 1;
}

.calendar-item.Вт {
  grid-column-start: 2;
}

.calendar-item.Ср {
  grid-column-start: 3;
}

.calendar-item.Чт {
  grid-column-start: 4;
}

.calendar-item.Пт {
    grid-column-start: 5;
  }

.work-order-group {
  background: transparent;
  border: 0;
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}

.work-order-header {
  background-color: #c3c3c3;
  border-radius: 12px 12px 4px 4px;
  color: #212529;
  font-weight: 600;
  padding: 6px 10px 4px;
}

.work-order-header h6 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.work-order-cards {
  margin-top: 8px;
  padding: 0 2px 2px;
}

.work-order-cards .card {
  margin: 0 0 10px;
}

.work-panel-header .btn-group .btn {
  min-width: 64px;
}

.work-panel-actions {
  gap: 8px;
}

.calendar-item.Сб {
  grid-column-start: 6;
}

.calendar-item.Вс {
  grid-column-start: 7;
}

.fc_block {
  /* position: relative;
  overflow: visible; Обеспечивает видимость стрелки, выходящей за пределы элемента */
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  /* margin: 10px; */
  margin-left: 10px;
  padding: 10px;
  transition: background-color 0.2s ease;
}


.custom-flex {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

.foldable_parent {
    margin-top: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
}

.mid_wind {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* новая - закомментировать */
        }

.upper_block_panel {
    background-color: var(--sub-panel-color);
    padding: 10px;
    margin-top: 10px;
    border-radius: 8px;
}


.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    width: 100%;
    height: auto;
}

.top-left-corner {
  position: absolute;
  z-index:2;
  top: 0;
  left: 0;
  background-color: transparent; /* Небольшая прозрачность */
  overflow: auto;
  width: auto;
  color: white;
  padding: 1px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.img_overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--menu-color); /* Небольшая прозрачность */
    overflow: auto;
    width: auto;
    color: white;
    padding: 1px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.img_overlay_text {
    margin: 0;
    padding: 0;
    color: white;
}

.mark {
  position: absolute;
  background-color: transparent;
  /* z-index: 2; */
  top: -15px; /* измените это значение, чтобы контролировать выход за границы сверху */
  right: 10px; /* измените это значение, чтобы контролировать выход за границы справа */
  /* width: 50px;
  height: 50px;
  border: 2px solid red; */
  white-space: nowrap; /* Запретить перенос элементов на новую строку */
    }

.good-transaction-bulk-card .mark:empty {
  display: none;
}

.mark-left {
        position: absolute;
        background-color: transparent;
        z-index: 3;
        left: -20px; /* измените это значение, чтобы контролировать выход за границы сверху */
        /* width: 50px;
        height: 50px;
        border: 2px solid red; */
    }

.mark-right {
        position: absolute;
        background-color: transparent;
        z-index: 30;
        left: 95%;
        width: 50px;
        height: 50px;
        border: 2px solid red;
    }

    .loading-bar {
        position: fixed; /* Фиксированное позиционирование */
        top: 0; /* Расположение в верхней части экрана */
        left: 0;
        width: 100%;
        height: 5px;
        background-color: var(--menu-color);
        overflow: hidden;
        z-index: 100;
    }

    .loading-bar:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: var(--my_skyblue); /* Ваш цвет (в данном случае синий) */
        animation: loading-bar 5s linear infinite;
    }

    @keyframes loading-bar {
        0% {
            transform: scaleX(0);
            transform-origin: left;
        }
        50% {
            transform: scaleX(1);
            transform-origin: left;
        }
        51% {
            transform: scaleX(1);
            transform-origin: right;
        }
        100% {
            transform: scaleX(0);
            transform-origin: right;
        }
    }

    .loading-bar-success:before {
        background-color: var(--my-green); /* Ваш зеленый цвет */
        animation: none;
        transform: scaleX(1);
        transition: background-color 0.5s ease;
    }

    .loading-bar-fail:before {
        background-color: var(--my-red); /* Ваш красный цвет */
        animation: none;
        transform: scaleX(1);
        transition: background-color 0.5s ease;
    }

    .loading-bar-wait:before {
        background-color: var(--menu-color); /* Ваш красный цвет */
        animation: none;
        transform: scaleX(1);
        transition: background-color 0.5s ease;
    }

    .transparent {
        opacity: 0;
        transition: opacity 0.1s ease-out;
    }

/* стиль для поля ввода в шапке фолда */
.fh_input {
  background-color: #fff;
  border-radius: 8px;
  border: none;
  outline: none;
  padding: 3px;
  width: 100%;
  text-align: left;
  height: 32px;
  box-sizing: border-box;
  font-size: 1.3rem;
  font-weight: bold;
  /* transition: background 0.2s, border-bottom 0.2s; */
}
.fh_input:focus {
  border-bottom: 3px solid var(--menu-color);
}

    /* Общий стиль для панели меню */
.menu-panel {
  width: 75px; /* начальная ширина панели */
  height: 98%; /* высота панели */
  position: fixed; /* фиксированное положение */
  background-color: var(--menu-color); /* фоновый цвет */
  overflow-x: hidden; /* скрыть горизонтальный скролл */
  transition: 0.2s; /* анимация перехода */
  z-index: 1000; /* Это значение убедится, что панель будет поверх остальных элементов */
  white-space: nowrap; /* Это свойство предотвращает перенос текста на новую строку */
  overflow: hidden; /* Это свойство скрывает часть текста, которая не умещается в ширину элемента */
  border-top-right-radius: 20px;    /* Скругление верхнего правого угла */
  border-bottom-right-radius: 20px; /* Скругление нижнего правого угла */
  opacity: 0.95;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;

  backdrop-filter: blur(10px); /* Это свойство создаст эффект размытия для элементов за панелью */
  display: flex; /* Используем flexbox для расположения в столбик */
  flex-direction: row; /* Располагаем элементы в столбик */
}

/* Стиль для элементов меню внутри панели */
.menu-panel a {
  /* padding: 8px 15px; */ /* здесь старые значения мешающие нормальному отображению ссылок в main_menu */
  text-decoration: none;
  /* font-size: 25px; */ /* здесь старые значения мешающие нормальному отображению ссылок в main_menu */
  color: #010101;
  display: block;
  transition: 0.3s; /* анимация перехода */
}

/* Изменение стилей при наведении на панель */
.menu-panel.opened {
  width: 400px;
}

/* Изменение стилей при наведении на элементы меню */
.menu-panel a:hover {
  color: #6a6666;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); /* Горизонтальное смещение, вертикальное смещение, размытие, цвет тени */
}

.menu_container {
  /* width: 40px; */
  height: 100vh; /* высота контейнера будет равна всей высоте экрана */
  display: flex; /* включение flexbox */
  flex-direction: column; /* вертикальное направление */
}

.extended_menu_container {
  padding: 10px;
  width: 100%;
  /* overflow-y: auto; новая - раскомментировать */
}

.top {
  display: flex; /* включение flexbox */
  flex-direction: column; /* вертикальное направление */
}

.middle {
  display: flex; /* включение flexbox */
  flex-direction: column; /* вертикальное направление */
}

.bottom {
  display: flex; /* включение flexbox */
  flex-direction: column;/* вертикальное направление */
  /* margin-bottom: 34px; */
}

.workspace {
  display: flex; /* Используем Flexbox */
  flex-direction: column; /* Элементы располагаются в колонку */
  height: 100%; /* Задаем высоту контейнера, например, равной высоте видимой части экрана */
  margin-left:70px;
  margin-right:65px;
  bottom:0px;
  overflow: hidden;
  flex-wrap: nowrap; 
  position: relative;
  transition: width 0.5s ease-in-out; /* Анимация изменения ширины */
}

.workspace.my_cabinet_workspace {
  margin-left:0px;
  margin-right:0px;
}


.workspace.with_instrument_panel {
  margin-right:auto;
  /* width: calc(75vw - 65px); */
}

.instruments-panel {
  width: 65px; /* начальная ширина панели */
  transition: width 0.5s ease-in-out; /* Анимация изменения ширины */
  height: 98%; /* высота панели */
  position: fixed; /* фиксированное положение */
  right: 0px;
  top: 0px;
  background-color: var(--menu-color); /* фоновый цвет */
  overflow-x: hidden; /* скрыть горизонтальный скролл */
  transition: 0.2s; /* анимация перехода */
  z-index: 1000; /* Это значение убедится, что панель будет поверх остальных элементов */
  white-space: nowrap; /* Это свойство предотвращает перенос текста на новую строку */
  overflow: hidden; /* Это свойство скрывает часть текста, которая не умещается в ширину элемента */
  border-top-left-radius: 20px;    /* Скругление верхнего правого угла */
  border-bottom-left-radius: 20px; /* Скругление нижнего правого угла */
  opacity: 0.95;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 0px;
  backdrop-filter: blur(10px); /* Это свойство создаст эффект размытия для элементов за панелью */
  display: flex; /* Используем flexbox для расположения в столбик */
  flex-direction: row; /* Располагаем элементы в столбик */
}

.instruments-panel.opened {
  width: calc(25vw);
}

.inst_panel_details {
  display: none;
  position: fixed; 
  left: 65px;
  top: 0;
  width: calc(100% - 65px);
  /* overflow: hidden; */
  padding: 5px;
  margin-top: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: var(--panel-color);
  height: 97%; 
  overflow-y: auto;
}
.inst_panel_details.active {
  display: block;
}
 
/* .menu_icon{
  width:45px;
  height: 45px;
  margin:5px;
  border-radius: 10px;
  background-color: var(--button-color);
  display: flex;
  justify-content: center;
  align-items: center; 
  cursor: pointer;
} */

.menu_icon {
  width: 55px;          /* чуть больше, чтобы влез и текст */
  height: 55px;         /* высота теперь подстраивается */
  padding: 0px 0px;    /* внутренние отступы для красоты */
  border-radius: 10px;
  background-color: var(--button-color);
  display: flex;
  flex-direction: column;  /* иконка сверху, текст снизу */
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 10px;
}

.menu_icon svg {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;     /* отступ от текста */
}

.menu_text {
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: #1a1a1a;
  background: transparent; /* убрала фон */
}


.menu_icon:hover{
  background-color: var(--hover-color); /* немного более яркий бежевый цвет при наведении */
}

.menu_icon.selected{
  background-color: var(--selected-color);
  border-width: 3px;
  border-style: solid;
  border-color: #F9C400;
  transition: background-color 0.2s ease;
}

.inst_icon{
  width:45px;
  height: 45px;
  margin:10px;
  border-radius: 10px;
  background-color: var(--panel-color);
  display: flex;
  justify-content: center; /* Горизонтальное выравнивание по центру */
  align-items: center; /* Вертикальное выравнивание по центру */
}


.inst_icon:hover{
  background-color: var(--hover-color);
}


/* класс выделения для инструментальной панели */
.inst_icon.inst_selected{
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  position: relative;
  margin-right: 0px;
  width:65px;
  background-image: linear-gradient(to right, var(--selected-color), var(--panel-color));
}



/* .inst_selected::after {
  content: "";
  display: block;
  width: 12px; 
  height: 100%;
  background-color: var(--button-color);
  background-image: linear-gradient(to right, var(--button-color), var(--panel-color));
  position: absolute;
  top: 0;
  right: -10px;
} */

/* настройки для мобильных устройств */
@media (max-width: 576px) {
    .mid_wind {
        height: 100%; /* на маленьких экранах занимает все доступное пространство */
        /* если нужно контент тоже выровнять по центру, оставьте следующие свойства */
        justify-content: center;
        align-items: center;
    }


    .foldable_vertical_container{
      margin: 0px;
      border-radius: 0px;
    }

    .foldable_vertical_container {
      padding: 0px;
      padding-top: 10px;
    }

    .foldable_parent{
      margin-top: 0px;
    }

    .workspace {
      /* height: calc(100% - 65px); */
      margin-left:0px;
      margin-right:0px;
      padding-bottom: 60px;
    }

    .workspace.my_cabinet_workspace {
      height: 100vh;
      margin-left:0px;
      margin-right:0px;
      margin-top: 0px;
    }

    .header_navbar {
      margin-top: 0px;
      margin-right: 0px;
      margin-left: 0px;
      margin-bottom: 0px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px; 
      height: 60px;
      padding: 5px;     
    }

    .menu-panel {
      top: auto;
      bottom: 0;
      left: 0;
      right: 0; /* Прикрепить панель к нижней границе экрана */
      width: 100%; /* Занимать всю ширину экрана */
      height: 70px; /* Высота 60 пикселей */
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      position: fixed;
        border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;

    }

    .menu-panel.opened {
      width: 100%;
    }

    /* .menu-panel:hover {
      height: auto;
      width: 100%;
    } */

    .menu_container {
      height: 60px;
      width: 100%;
      display: flex; /* включение flexbox */
      flex-direction: row; /* вертикальное направление */
      justify-content: space-around;  /* равномерно с отступами */
      align-items: flex-start;        /* иконки прижаты к верху */

    }

    .menu_icon {
      flex: 1;                        /* каждый занимает равную ширину */
      max-width: 80px;                /* ограничение, чтобы не разъезжались на больших экранах */
      background-color: transparent;
    }

    .extended_menu_container {
        padding: 10px;
        width: 100%;
        height: 450px;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .extended-menu-mobile {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 60px;
        width: 100%;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        padding-bottom: 60px;
        box-sizing: border-box;
        display: none;
        flex-direction: column;
        background-color: var(--menu-color);
        z-index: 1050;
    }
    .extended-menu-mobile.is-visible {
        display: flex;
    }
    /* новая - раскомменировать
    .foldable{
        bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
      }
      */
}

.tile-btn {
  padding: 10px;
	position: relative;
  border: none;
  height: 100%;
	background: var(--button-color);
  text-align: center;
  margin: 0px;
  border-radius: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* тень сверху вниз */
  transition: box-shadow 0.2s ease; /* Плавное изменение тени при изменении */
}

.tile-btn.green {
  background: var(--my-green);
}
.tile-btn.blue { /* его не было пришлось добавить */
  background: var(--my_skyblue);
}
.tile-btn.yellow {
  background: var(--my_ellow);
}
.tile-btn.orange {
  background: var(--my-orange);
}
.tile-btn.red {
  background: var(--my-red);
}
.tile-btn.active {
  background-color: #F0E097 ;
  border-width: 3px;
  border-style: solid;
  border-color: #F9C400;
}

/* Ваш подкласс для оранжевой линии */
.tile-btn.stroke_orange::before {
  content: "";
  position: absolute;
  bottom: 4px; /* Отступ снизу */
  left: 4px; /* Отступ слева */
  right: 4px; /* Отступ справа */
  height: 3px; /* Толщина линии */
  background-color: orange;
  border-radius: 3px; /* Скругленные края */
}

/* Ваш подкласс для красной линии */
.tile-btn.stroke_red::before {
  content: "";
  position: absolute;
  bottom: 4px; /* Отступ снизу */
  left: 8px; /* Отступ слева */
  right: 8px; /* Отступ справа */
  height: 3px; /* Толщина линии */
  background-color: red;
  border-radius: 3px; /* Скругленные края */
}

/* Ваш подкласс для синей линии */
.tile-btn.stroke_blue::before {
  content: "";
  position: absolute;
  bottom: 4px; /* Отступ снизу */
  left: 8px; /* Отступ слева */
  right: 8px; /* Отступ справа */
  height: 3px; /* Толщина линии */
  background-color: blue;
  border-radius: 3px; /* Скругленные края */
}

/* Ваш подкласс для оранжевой линии */
.stroke_work_status_plan {
  content: "";
  position: absolute;
  bottom: 4px; /* Отступ снизу */
  left: 4px; /* Отступ слева */
  right: 4px; /* Отступ справа */
  height: 3px; /* Толщина линии */
  background-color: #FAB960;
}

/* Ваш подкласс для оранжевой линии */
.stroke_work_status_soon {
  content: "";
  position: absolute;
  bottom: 4px; /* Отступ снизу */
  left: 4px; /* Отступ слева */
  right: 4px; /* Отступ справа */
  height: 3px; /* Толщина линии */
  background-color: #D33D00;
}

/* Ваш подкласс для красной линии */
.stroke_work_status_problem {
  content: "";
  position: absolute;
  bottom: 4px; /* Отступ снизу */
  left: 8px; /* Отступ слева */
  right: 8px; /* Отступ справа */
  height: 3px; /* Толщина линии */
  background-color: #8C0213;
}

/* Ваш подкласс для красной линии */
.stroke_work_status_check {
  content: "";
  position: absolute;
  bottom: 4px; /* Отступ снизу */
  left: 8px; /* Отступ слева */
  right: 8px; /* Отступ справа */
  height: 3px; /* Толщина линии */
  background-color: #C609D5;
}

/* Ваш подкласс для синей линии */
.stroke_work_status_ready {
  content: "";
  position: absolute;
  bottom: 4px; /* Отступ снизу */
  left: 8px; /* Отступ слева */
  right: 8px; /* Отступ справа */
  height: 3px; /* Толщина линии */
  background-color: #09D509;
}

/* Ваш подкласс для синей линии */
.stroke_work_status_no_task {
  content: "";
  position: absolute;
  bottom: 4px; /* Отступ снизу */
  left: 8px; /* Отступ слева */
  right: 8px; /* Отступ справа */
  height: 3px; /* Толщина линии */
  background-color: #695165;

}

.tile-btn:hover {
  background-color: var(--my_ellow);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Новая тень при наведении */
}

/* родитель вкладок */
.tabs {
  display: flex; /* Используем flex контейнер */
  background: transparent;
  overflow: hidden; /* Скрываем содержимое, которое не помещается */
  overflow-x:auto;
  white-space: nowrap; /* Предотвращаем перенос текста на следующую строку */
  /* height: 75px; */
  height:auto;
  margin-top: auto; /* Выравнивание по нижнему краю */
}

.fold_minimizible_expanded > .fvc_upper_block > .tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  margin-top: 0;
}

.fold_minimizible_collapsed > .fvc_upper_block > .tabs {
  position: relative;
  z-index: 5;
  margin-top: calc(-1 * var(--fold-min-visible-height, 20px));
}

.fold_minimizible_collapsed > .fvc_upper_block > .tabs .tab-button {
  background-color: rgb(205, 188, 178);
}

.fold_minimizible_collapsed > .fvc_upper_block > .tabs .tab-button.active {
  background-color: rgb(245, 243, 238);
}

/* Скрываем полосу прокрутки */
.tabs::-webkit-scrollbar {
  display: none;
}


.tab-header {
  position: static;
  top: auto;
  z-index: auto;
  background-color: transparent;
  opacity: 1;
}

.tab-content {
  display: none;
  background-color: rgba(245, 243, 238, 0.94);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px;
  min-height: 100%;
}

/* Показать активную вкладку */
.tab-content.active {
  display: block;
}

/* Стили для кнопок вкладок */
.tab-button {
  color: #4F413B;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
  border: none;
  max-width: 45%;
  height: auto;
  text-align: center;
  margin: 0 0 0 10px;
  padding: 8px;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  background-color: rgb(205, 188, 178);
  transition: background-color 0.3s;
}

.tab-button.active {
  color: #4A5563;
  background-color: rgb(245, 243, 238);
  margin-bottom: 0px;
  /* padding-bottom: 20px; */
  font-weight: bold;
}

.tab-button:not(.active):hover {
  background-color: rgb(194, 174, 163);
}

@supports (background: color-mix(in srgb, #ffffff 80%, transparent)) {
  .tab-content {
    background-color: rgba(245, 243, 238, 0.94);
  }

  .tab-button {
    background-color: rgb(205, 188, 178);
  }

  .tab-button.active {
    background-color: rgb(245, 243, 238);
  }
}

.tab-button.active::after {
  display: none;
}



/* Элемент .color_marker будет отображаться как полоска или маркер внутри .tab-button, 
отступая от его границ на 8px. Его можно легко настроить по цвету или добавить анимацию, если нужно. */
.color_marker {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--container-color);
  pointer-events: none;
}

/* Стили для обзора работ содержащихся в задании */
.work_review {
  font-size: small; /* Устанавливает маленький размер текста */
  border-bottom: 4px solid #000;
  margin-left: 5px; /* Отступ слева */
  background-color: transparent;
  border-radius: 4px;
}

.work_review.red{
  border-color: rgb(255, 0, 0); 
}

.work_review.orange{
  border-color: rgb(255, 162, 0); 
}

.work_review.green{
  border-color: rgb(0, 255, 0); 
}

.work_review.blue{
  border-color: rgb(0, 0, 255); 
}

.work_review.purple{
  border-color: rgb(128, 0, 128); 
}

.work_review.black{
  border-color: rgb(0, 0, 0); 
}

.work_review.lightblue{
  border-color: rgb(173, 216, 230); 
} 

.work_review.yellow{
  border-color: rgb(255, 255, 0); 
}

.work_review.no_executor{
  background-color: #e27e7e;
}


button:focus {
  outline: none; /* Убирает контур при фокусе */
}

.resizable {
  max-height: 120px; /* Максимальная высота блока в нормальном состоянии */
  overflow: hidden; /* Скрываем содержимое, которое не помещается в блоке */
  transition: max-height 0.3s ease; /* Анимация изменения высоты */
  position: relative; /* Позиционируем блок как относительный, чтобы добавить градиентный фон */
}

.resizable:hover {
  /* max-height: 125px;  */
}

.resizable:hover .resizable-overlay{
  display: none; /* При наведении мыши элемент-потомок исчезает */
}

.resizable-overlay {
  position: absolute;
  pointer-events: none;
  width: 100%; 
  height: 80%; 
  /*background: linear-gradient(to top, var(--container-color), transparent);  Градиент сверху */
  bottom: 0px;
  /* transition: opacity 0.5s ease;  Плавное изменение прозрачности */
}

.resizable-overlay:hover {
  opacity: 0; /* Прозрачный при наведении */
}
#formula-table, #meta-rule-table {
  background: #ffffff;
  padding: 10px 0px;
  border-radius: 8px;
}
#formula-table td, #meta-rule-table td { 
  padding: 0; 
}
#formula-table input:not(:disabled), #meta-rule-table input:not(:disabled) {
  font-size: 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
} 
/* Элементы формы */
.nt-form {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 10px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control {
  border-radius: 8px;
}

/* Убирает рамку и отступы на инпут элементаз бутстрапа */
input.form-control.no-border,
select.form-control.no-border,
textarea.form-control.no-border {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background-color: transparent !important;
}

.nt-form:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

/* Для отображения "недопустимого" ввода */
.nt-form.is-invalid {
  border-color: #dc3545;
}

.nt-form.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25);
}

/* Для отображения "допустимого" ввода */
.nt-form.is-valid {
  border-color: #28a745;
}

.nt-form.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .25);
}

.order_params {
  border-radius: 8px;
  overflow: hidden; /* 🔥 Обрезает всё, что вылазит за рамки */
  border: 1px solid #ccc;
  padding: 0;
  margin-top: 5px;
}

.fixed-height-row {
  height: 25px; /* Высота строки */
  overflow: hidden; /* Скрыть лишний контент */
}

.fixed-height-row td {
  white-space: nowrap; /* Не переносить текст */
  text-overflow: ellipsis; /* Обрезать и добавить многоточие */
  overflow: hidden; /* Скрыть лишний контент */
  padding: 0px;
}


/* Элементы формы вставленные в таблицу */
.table-input {
  width: 100%;        /* Занимает всё пространство ячейки */
  height: 100%;
  border: none;       /* Убирает рамку */
  box-shadow: none;   /* Убирает тень, если она есть */
  border-radius: 0px;
  background-color: transparent;
}

table.table_attendance tr:hover {
  background-color: var(--hover-color); /* замените на ваш цвет */
}

/* текст накладываемый на прогресс бар у класса .progress должно быть position: relative; */
.progress-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black; /* или другой цвет текста */
}

/* невидимый блок для группировки и сортировки карточек */
.categorizator {
  display: none;
}


/* вертикальный прогресс бар из 2-х  */
.vertical_progress_bar {
  display: flex;
  margin: 5px;
  flex-direction: column;
  height: 100%;
  width: 12px;
  border-radius: 6px;
  background-color: var(--panel-color);
  overflow: hidden;
}

.horizontal-progress-bar {
  display: block;
  margin: 5px; 
  height: 10px;
  width: 100%;
  border-radius: 6px;
  background-color: var(--panel-color);
  overflow: hidden; 
  position: relative;
} 
.bar {
  height:100%;
  background-color: var(--menu-color);
  transition: height 0.5s ease;
}

/* всплывающее меню bootstrap 4 */
.dropdown-menu {
    border-radius: 8px;
    z-index: 2000;
    position: absolute !important;
    will-change: transform;    
}

.vp-1, .vp-2 {
  width: 100%; /* Ширина блоков равна ширине родителя */
}

.vp-1 {
  background-color: orange;
  height: 20%;
}

.vp-2 {
  height: 20%;
  flex-grow: 1;
  background-color: red;
  margin-bottom: 35%; /* Отступ, равный высоте первого блока */
}


.fvc_bg_image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.1; /* Прозрачность фонового изображения */
  z-index: -1; /* Помещает изображение за содержимое div */
}

.circle_button {
  background-color: var(--button-color);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px; /* Пример размера шрифта */
  border: none;
}

.backwards_dropdown_split_left,
.backwards_dropdown_spli_left {
  background-color: var(--button-color);
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  height: 30px; /* Настройте под ваш размер кнопки */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px; /* Пример размера шрифта */
}

.backwards_dropdown_split_right {
  background-color: var(--button-color);
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  height: 30px; /* Настройте под ваш размер кнопки */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px; /* Пример размера шрифта */
}

.circle_button.attention {
  background-color: var(--hover-color);
}

.circle_button:hover {
  background-color: var(--hover-color);
}

.circle_button.title {
  border-radius: 30px; /* Создаем эффект пилюли */
  width: auto;
  min-width: 30px;
  max-width: 100px;
  padding-left: 0px; /* Устанавливаем отступ слева в 5px */
  padding-right: 15px; /* Отступ справа от текста, если необходимо */
  padding: 0 15px; /* Отступы слева и справа от текста */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Выравнивание содержимого по левому краю */
}

.fold_minimizible {
  box-sizing: border-box;
  height: 0;
  max-height: none;
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  will-change: height;
}

.fold_minimizible_expanded > .fvc_upper_block .fold_minimizible {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--fold-tabs-height, 0px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--fold-tabs-height, 0px)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fold_minimizible_scrollable_max > .fvc_upper_block .fold_minimizible::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: calc(var(--fold-tabs-height, 0px) + 32px);
  pointer-events: none;
}

/* Чтобы предотвратить выход текста за рамки родительского объекта 
и обеспечить его перенос на новую строку в HTML и CSS */
.text-container {
  overflow-wrap: break-word;
  word-wrap: break-word; /* Для старых браузеров */
  white-space: normal;
  word-break: break-word; /* Опционально, в зависимости от желаемого эффекта */
}

/* тема для подклчаемого виджета select2 */
.select2-container--my_select2_theme .select2-selection {
  border-radius: 8px;
  width: 100%;
  background-color: var(--body-color);
  /* Добавьте другие стили по вашему усмотрению */
}

/* Основной контейнер переключателя */

/* Этот код создаёт красивый переключатель с плавным анимационным переходом и закруглёнными краями. 
Элемент input типа checkbox используется для хранения состояния переключателя, 
а стилизация осуществляется через псевдоэлементы и CSS-переходы. */
.switch {
    position: relative;
    display: inline-block;
    width: 27px; /* 34px * 0.8 */
    height: 48px; /* 60px * 0.8 */
}

/* Скрытый checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Слайдер */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px; /* 34px * 0.8 */
}

/* Круглый индикатор внутри слайдера */
.slider:before {
    position: absolute;
    content: "";
    height: 21px; /* 26px * 0.8 */
    width: 21px; /* 26px * 0.8 */
    left: 3px; /* 4px * 0.8 */
    bottom: 3px; /* 4px * 0.8 */
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* Изменение фона слайдера при включении переключателя */
input:checked + .slider {
    background-color: #2196F3;
}

/* Перемещение индикатора при включении переключателя */
input:checked + .slider:before {
    transform: translateY(-21px); /* 26px * 0.8 */
}

/* Добавление тени для более стильного вида */
.slider:before {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Эффект размытия накладывается на все, кроме нужного элемента */
/* Оверлей для размытия */
/* Оверлей для размытия */
#blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.3); /* Полупрозрачный фон */
  z-index: 999; /* Размытие позади элемента */
}

#instructionElement {
  position: relative; /* Сохраняем текущее позиционирование */
  z-index: 1001; /* Элемент над размытым фоном */
}

.selectedGuide {
  border: 3px solid #F9C400;
}

#instruction-block {
  z-index: 1100; /* instructionBlock всегда выше всех остальных элементов */
  background: rgba(0, 0, 0, 0.9);
  padding: 5px;
  border-radius: 5px;
  color: white;
  font-size: 22px;
  
}

/* 
пример использования:
<label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
</label>
*/
/* Основной контейнер переключателя конец */

/* RADIOBUTTON */
.radiobutton {
  padding: 10px;
  width: 100%;
  position: relative;
  border: none;
  height: 100%;
  background: var(--button-color);
  text-align: center;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* тень сверху вниз */
  transition: box-shadow 0.2s ease, background-color 0.2s ease; /* Плавное изменение тени при изменении */
  display: inline-block;
  cursor: pointer;
}

.radiobutton input[type="checkbox"] {
  display: none;
}

.radiobutton label {
  display: block;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.radiobutton input[type="checkbox"]:checked + label {
  background: var(--my-green);
  box-shadow: none;
  /* box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2); вдавленная тень */
}
/* 
example:
<div class="radiobutton">
    <input type="checkbox" id="work-checkbox">
    <label for="work-checkbox">на работе</label>
</div>
 */

/* RADIOBUTTON */
.table-container {
  width: 100%;
  height: 400px; /* Задаем высоту родительского контейнера для прокрутки */
  overflow-y: auto; /* Включаем вертикальную прокрутку внутри контейнера */
}

table.cards_table {
  width: 100%;
  border-collapse: collapse;
}

table.cards_table th, table.cards_table td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  white-space: nowrap; /* Запрещаем перенос текста */
  overflow: hidden; /* Скрываем текст, выходящий за границы */
  text-overflow: ellipsis; /* Добавляем многоточие для текста, который не помещается */
}

table.cards_table thead {
  position: sticky; /* Липкий заголовок */
  top: 0; /* Заголовок липнет к верхней части родителя при прокрутке */
  background-color: white; /* Задаем фон для заголовка, чтобы он не сливался с содержимым */
  z-index: 1; /* Устанавливаем приоритет отображения заголовка поверх других элементов */
}

table.cards_table tfoot {
  position: sticky; /* Липкий заголовок */
  bottom: 0; /* Заголовок липнет к верхней части родителя при прокрутке */
  background-color: white; /* Задаем фон для заголовка, чтобы он не сливался с содержимым */
  z-index: 1; /* Устанавливаем приоритет отображения заголовка поверх других элементов */
}

/* Опционально, стиль для фиксированных столбцов */
table.cards_table th:first-child, 
table.cards_table td:first-child {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}

table.cards_table th:last-child, 
table.cards_table td:last-child {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}


.custom-details-section {
  width: 100%;
}

.custom-details-section summary {
  text-align: center;
  cursor: pointer;
}

.custom-details-section .custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 0; /* Уменьшенные отступы */
}

.custom-details-section .col-auto {
  flex: 0 0 auto;
  padding-right: 4px;
}

.custom-details-section .col {
  flex: 1 1 100%;
  max-width: 100%;
  word-break: break-word; /* Перенос текста */
}

.summary {
    border-radius: 8px;
    height: 20px;
    background-color: var(--panel-color);
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: center;
    color: rgb(103, 103, 103);
    font-size: small;
}
.price-details {
  display: none;
  position: absolute;
  top: 100%;
  left: 50px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 8px 12px;
  margin-top: 4px;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  border-radius: 4px;
  font-size: 14px;
}

.price-line {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-line:last-child {
  margin-bottom: 0;
}
 
#dropzone {
  position: relative; 
  width: 150px; /* Задаем фиксированную ширину */
  max-width: 100%; /* Максимум 100% для адаптации */
}

/* Иконка загрузки по умолчанию скрыта */
#dropzone .upload-icon {
  display: none;
  font-size: 24px;
  color: #007bff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}

/* Стили для дроп-зоны при перетаскивании файлов */
#dropzone.highlight {
  background-color: #f0f8ff;
  border: 2px dashed #007bff;
  color: #007bff;
  width: 150px; /* Устанавливаем ту же ширину, что и у кнопки */
}

/* Показываем иконку загрузки при перетаскивании */
#dropzone.highlight .upload-icon {
  display: block;
}  


/* МСтили для навигации по вложенным таскам */

.taskline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Базовый стиль для всех */
.taskline-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 16px 4px 20px;
  background-color: #f3f5fa;
  color: #444;
  font-size: 14px;
  font-weight: 500;
  height: 36px;
  max-width: 160px;
  clip-path: polygon(
    0% 0%,
    calc(100% - 12px) 0%,
    100% 50%,
    calc(100% - 12px) 100%,
    0% 100%,
    12px 50%
  );
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  white-space: nowrap;
}

.taskline-item .desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}

.taskline-item .qty {
  margin-left: 8px;
  font-size: 12px;
  color: #8093a7;
  white-space: nowrap;
}

.taskline-item .short {
  width: 40px;
}

/* 🔸 Первый элемент без шеврона слева, со скруглением */
.taskline-item.first {
  clip-path: polygon(
    0% 0%,
    calc(100% - 12px) 0%,
    100% 50%,
    calc(100% - 12px) 100%,
    0% 100%
  );
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  padding-left: 14px;
}

/* 🔸 Последний элемент .selected: со шевроном слева, но без скругления */
.taskline-item.selected {
  background-color: #ffe28a;
  color: black;
  font-weight: bold;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    12px 50%
  );
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-right: 16px;
}

.contact_label {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #6495ED; /* голубой */
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  user-select: none;
}


/* Hover */
.taskline-item:not(.selected):hover {
  background-color: #357dfd;
  color: white;
}
.taskline-item:not(.selected):hover .qty {
  color: white;
}

.org_order_class {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 16px 4px 20px;
  background-color: #f3f5fa;
  color: #444;
  font-size: 14px;
  font-weight: 500;
  height: 36px;
  max-width: 160px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  white-space: nowrap;
}

.org_order_class.parent {
  clip-path: polygon(
    0% 0%,
    calc(100% - 12px) 0%,
    100% 50%,
    calc(100% - 12px) 100%,
    0% 100%
  );
}

.org_order_class.child {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    12px 50%
  );
}

.org_order_class.parent.child {
  clip-path: polygon(
    0% 0%,
    calc(100% - 12px) 0%,
    100% 50%,
    calc(100% - 12px) 100%,
    0% 100%,
    12px 50%
  );
}

.org_order_class.first {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  padding-left: 14px;
}

.org_order_class.end {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

.floating-btn {
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 9999; /* Выше всех */
  background-color: var(--my-green);
  color: #000;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  animation: pulse-animation 2s infinite;
}

.floating-btn:hover {
  background-color: #00f904;
  transform: scale(1.05);
}

/* Фиксированный дропдаун */

.dropdown-fixed {
  display: none;
  position: absolute;
  bottom: 80px;
  right: 30px;
  padding: 10px;
  z-index: 10000; /* Выше всех */
  min-width: 180px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: background-color 0.3s ease, transform 0.3s ease;
  animation: pulse-animation 2s infinite;
}

.dropdown-fixed.show {
  display: block;
}

.gant-drag-status-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 9998;
  background: #e1e1e1;
  border-top: 1px solid #bdbdbd;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 8px;
}

.gant-drag-status-list {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  overflow-x: auto;
}

.gant-drag-status-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background: #f3f5fa;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.gant-drag-status-item:hover {
  background: #eef2ff;
  border-color: #6c7ae0;
}

.gant-drag-status-item.drag-over {
  background: #e6f0ff;
  border-color: #4c6fff;
}


.minimal_form select,
.minimal_form input {
    border: none;
    border-bottom: 1px solid #ccc;
    background: transparent;
    outline: none;
    padding: 4px 8px;
    font-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
}

/* Шеврон вниз для select */
.minimal_form select {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23999" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 24px;
    cursor: pointer;
}

/* Убираем стрелку в IE */
.minimal_form select::-ms-expand {
    display: none;
}

/* Подсветка при фокусе */
.minimal_form select:focus,
.minimal_form input[type="text"]:focus {
    border-bottom: 1px solid #007BFF; /* или любой другой акцентный цвет */
}

.button-save-sml {
  background-color: #7CFF00; /* или точный цвет, если знаешь */
  color: #000;
  font-size: 10px;
  padding: 2px 6px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  font-weight: 500;
  transition: background-color 0.2s ease;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.button-save-sml:hover {
  background-color: #6be000; /* чуть темнее при наведении */
}

/* 🟢 Убираем абсолют из drop_zone и вешаем его на #tab_sale_deck */
.drop_zone_for_materials {
  opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 1000;
}
.drop_zone_for_materials.active {
  opacity: 1; pointer-events: auto; border: 2px dashed #6666ff;
  background: rgba(200,200,255,.4);
}
/* когда зона внутри deck — просто растягиваемся на весь deck */
.drop_zone_for_materials.full-cover {
  position: absolute; inset: 0;  /* top:0;right:0;bottom:0;left:0 */
}
@keyframes flash-bg {
    0%   { background-color: #fffaaf; }
    50%  { background-color: #fff7a0; }
    100% { background-color: transparent; }
}
.flash {
    animation: flash-bg 1s ease-in-out;
}

/* Стили для перетаскивания шаблонов тасков */

.drop_zone_for_tasks {
    opacity: 0;
    height: 0px;
    display: none; /* Скрываем зону по умолчанию */
    transition: 0.3s ease all;
    pointer-events: none; /* чтобы не мешать кликам */
}
.drop_zone_for_tasks.active-drop-zone {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 100px;
    z-index: 1000; /* поверх всего */
    background: rgba(255, 255, 255, 0.8); /* или другой фон, чтобы было видно */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: all;
    display: block; /* Показываем зону при активации */
    border: 2px dashed #007bff;
}

.drop_zone_for_order_tasks.active-drop-zone {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 40px;
    z-index: 1000; /* поверх всего */
    background: rgba(255, 255, 255, 0.8); /* или другой фон, чтобы было видно */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: all;
    display: block; /* Показываем зону при активации */
    border: 2px dashed #007bff;
}

.dropzone-loader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-top: 5px;
  background: #f3f3f3;
  border-radius: 5px;
  font-size: 14px;
  color: #444;
}

.empty-status {
  width: 95%;
  padding: 2px;
  color: #888;
  font-size: small;
  margin-bottom: 4px;
  border-radius: 4px;
  padding-right: 8px;
  background-color: #ccc;
  text-align: left;
}

.blink {
  animation: blink-outline 1.2s infinite;
}

@keyframes blink-outline {
  0% {
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 123, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.7);
  }
}




/* ------------------------------------------------------------------------------------------------------ */

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 196, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(249, 196, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(249, 196, 0, 0);
  }
}


/* Анимация объектов у которых есть класс instruction*/
@keyframes blink {
  0%, 100% { box-shadow: 0 0 0 2px blue; }
  50% { box-shadow: 0 0 0 2px transparent; }
}
@keyframes fadeOutBackground {
  from { background-color: red; }
  to { background-color: transparent; } /* или ваш исходный цвет фона */
}
.instruction {
  animation: blink 1s infinite;
}


/* В этом примере, любой элемент с классом .my-element станет невидимым на экранах шириной менее 600 пикселей */
@media (max-width: 700px) {
    .hide-on-small {
        display: none;
    }
    .custom-flex {
        flex-direction: column;
    }
}

@media screen and (max-width: 750px) {
  .hide_750 {
      display: none;
  }
}

@media (max-width: 150px) {
    .hide_300 {
        display: none;
    }
}

/* Стили для отображения в узком экране */
@media (max-width: 350px) {
  .custom-details-section {
      font-size: 0.9em; /* Уменьшаем размер шрифта */
  }

  .custom-details-section .text-muted {
      font-size: 0.85em; /* Ещё меньше для меток */
  }

  .custom-details-section .col, .custom-details-section .col-auto {
      padding-left: 4px;
      padding-right: 4px;
  }

  /* Уменьшение отступов и выравнивание для узкого окна */
  .custom-details-section .custom-row {
      margin: 2px 0;
  }

  .custom-details-section summary small {
      font-size: 1em; /* Увеличиваем заголовок для видимости */
  }

  /* Стили для отдельных полей, если требуется */
  .custom-details-section .custom-field {
      padding-top: 6px;
      padding-bottom: 6px;
      font-size: 0.9em;
      word-break: break-word;
  }
}

.dots-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 6px;
  font-size: 18px;
  color: #555;
  line-height: 1;
}

@keyframes recalc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 195, 0, 0.9); }
  70% { box-shadow: 0 0 0 10px rgba(255, 195, 0, 0); }
 100% { box-shadow: 0 0 0 0 rgba(255, 195, 0, 0); }
}

.tab-button.recalc-needed,
.dropdown.recalc-needed > .dropdown-toggle {
  animation: recalc-pulse 1.5s infinite;
}

.dropdown.recalc-needed.show > .dropdown-toggle {
  animation: none;
}

.dropdown.recalc-needed.show .recalc-action {
  animation: recalc-pulse 1.5s infinite;
}

.payroll-locked {
  position: relative;
  pointer-events: none;
  opacity: 0.65;
  filter: grayscale(0.6);
}

.payroll-locked::after {
  content: "Ведомость закрыта";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  color: #6c757d;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.85rem;
  z-index: 5;
}

/* Compact layout for order filter chips */
#order_filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#order_filters .filter {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1.2;
}

#order_filters .filter .text-muted {
  margin-left: 0.35rem;
}

/* Quick actions (generic action grid).
   Structure:
   .quick-actions
     .quick-actions__item.quick-action--*
       .quick-actions__icon
       .quick-actions__label
       .quick-actions__count (optional)
*/
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.quick-actions__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem;
  border-radius: 1.1rem;
  min-height: 4.5rem;
  font-weight: 600;
  text-decoration: none;
  background-color: var(--button-color);
  color: var(--button-text-color, #2c3e50);
  border: none;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.quick-actions__item:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 0.85rem rgba(0, 0, 0, 0.12);
  color: var(--button-text-color, #1f2d3d);
}

.quick-actions__item.disabled,
.quick-actions__item:disabled {
  pointer-events: none;
  opacity: 0.55;
  box-shadow: none;
}

.quick-actions__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.quick-actions__label {
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.quick-actions__count {
  font-size: 0.8rem;
}

.quick-actions__item,
.quick-actions__item:active,
.quick-actions__item:focus {
  color: var(--button-text-color, #2c3e50);
}

.quick-actions__item--double {
  grid-column: span 2;
}

.quick-actions.fh-down-quick-actions {
  --fh-qa-size: 4.6rem;
  --fh-qa-gap: 0.6rem;
  display: grid;
  grid-template-columns: repeat(4, var(--fh-qa-size));
  gap: var(--fh-qa-gap);
  justify-content: start;
  width: max-content;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 0;
}

.fh-down-quick-actions .dropdown {
  width: var(--fh-qa-size);
  min-width: 0;
}

.fh-down-quick-actions .quick-actions__item {
  width: 100%;
  height: var(--fh-qa-size);
  min-height: var(--fh-qa-size);
  padding: 0.52rem;
}

.fh-down-quick-actions .quick-actions__icon {
  font-size: 1.25rem;
}

.fh-down-quick-actions .quick-actions__item .quick-actions__label {
  font-size: 0.78rem;
  line-height: 1.1;
}

.fh-down-quick-actions .quick-action--customer .quick-actions__label {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fh-down-quick-actions .quick-action--customer.dropdown-toggle::after {
  display: none;
}

.fh-down-quick-actions .dropdown.quick-actions__item--double {
  width: calc(var(--fh-qa-size) * 2 + var(--fh-qa-gap));
}

@media (max-width: 575.98px) {
  .quick-actions.fh-down-quick-actions {
    --fh-qa-size: 3.6rem;
    --fh-qa-gap: 0.3rem;
  }

  .fh-down-quick-actions .quick-actions__item {
    padding: 0.36rem;
    gap: 0.2rem;
    border-radius: 0.72rem;
  }

  .fh-down-quick-actions .quick-actions__icon {
    font-size: 1.05rem;
  }

  .fh-down-quick-actions .quick-actions__item .quick-actions__label {
    font-size: 0.66rem;
    line-height: 1;
  }
}

.client-org-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  background-color: rgba(0, 123, 255, 0.1);
  color: #0d6efd;
  font-size: 1.4rem;
}

.client-org-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.client-org-card__short-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.15rem;
  color: #1f2d3d;
}

.client-org-card__full-name {
  font-size: 0.8125rem;
}

.client-org-card {
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 0.35rem 0.8rem rgba(15, 23, 42, 0.04);
  padding-right: 0.75rem;
}

.client-org-card .btn-link {
  padding: 0.35rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-org-card .client-org-remove-button {
  color: #dc3545;
}

.client-org-card .client-org-remove-button:hover {
  color: #b02a37;
}

.client-org-card .client-org-orders-button {
  color: #0d6efd;
}

.client-org-card .client-org-orders-button:hover {
  color: #0a58ca;
}

.quick-actions__item .bi {
  color: inherit;
}

/* Warehouse quick-actions tweaks */
.fvc_upper_block {
  container-type: inline-size;
}

.warehouse-quick-actions {
  --qa-item-width: 80px;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(var(--qa-item-width), var(--qa-item-width)));
  justify-content: start;
}

.warehouse-quick-actions .quick-actions__item {
  width: var(--qa-item-width);
}

.warehouse-quick-actions .quick-actions__label {
  white-space: normal;
  line-height: 1.1;
}
.warehouse-header {
  margin: 10px ; 
  margin-bottom: 0;
}
.warehouse-header input {
}
@container (max-width: 370px) {
  .warehouse-quick-actions {
    grid-template-columns: repeat(auto-fit, minmax(var(--qa-item-width), var(--qa-item-width)));
    justify-content: space-between;
  }
}
@container (max-width: 400px) {
  .fh_up_block[unicclass="warehouse"]  {
    max-width: 140px;
    width: 100%; 
  }
}
.cost-inline-input {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  height: 25px;
  min-height: 25px;
  line-height: 25px;
  padding-top: 0;
  padding-bottom: 0;
}

.cost-inline-input:focus {
  box-shadow: none;
  outline: none;
  background-color: transparent;
}

.cost-inline-input::selection {
  background-color: transparent;
}

.cost-inline-input::-moz-selection {
  background-color: transparent;
}

.cost-group-input:hover {
  text-decoration: underline;
}

.cost-mark-input {
  padding: 0 4px;
}

.cost-mark-input-inner {
  width: 100%;
  border: none;
  background-color: transparent;
  outline: none;
  box-shadow: none;
  font-size: 0.85rem;
  min-width: 0;
  height: 25px;
  line-height: 25px;
  padding-top: 0;
  padding-bottom: 0;
}

.client-org-grid {
  margin: 0;
}

.client-org-card .badge {
  font-weight: 500;
}

.client-org-card .btn {
  border-radius: 0.75rem;
}

@media (min-width: 768px) {
  .quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }

  .quick-actions__item {
    flex: 0 0 auto;
    width: 4.875rem;
    height: 4.875rem;
    padding: 0.85rem;
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
    align-items: center;
  }

  .quick-actions__item .quick-actions__label {
    display: block;
    white-space: normal;
  }

  .quick-actions__item .quick-actions__count {
    position: static;
    display: inline-block;
    margin-top: -0.15rem;
  }
}

.client-phones-list .client-phone-item {
  padding: 0.75rem 0;
  background-color: transparent;
  border-bottom: none;
}

.client-phone-item-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  gap: 0.375rem;
  margin: 0;
}

.client-phone-item-inner > .client-phone-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.client-phone-item-inner > .client-phone-input {
  flex: 1 1 auto;
}

.client-phone-radio .custom-control-label {
  margin-bottom: 0;
  padding-top: 0;
  padding-left: 1.75rem;
}

.client-phone-radio .custom-control-label::before,
.client-phone-radio .custom-control-label::after {
  top: 50%;
  transform: translateY(-50%);
}

.client-phone-radio .custom-control-input {
  margin-top: 0;
}

.client-phone-item-inner .client-phone-number-input {
  width: 100%;
}

.client-phone-item-inner .phone-invalid-feedback {
  margin-top: 0.35rem;
}


.client-phone-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.client-phone-remove-button {
  padding: 0.25rem;
  line-height: 1;
  text-decoration: none;
}

.client-phone-remove-button i {
  pointer-events: none;
}

@media (min-width: 576px) {
  .client-phone-item-inner {
    flex-wrap: nowrap;
  }
  .client-phone-item-inner > .client-phone-radio,
  .client-phone-item-inner > .client-phone-input,
  .client-phone-item-inner > .client-phone-actions {
    margin-bottom: 0;
  }
}

.work-price-total-input.manual-price {
  border-bottom: 2px solid red !important;
}
.cost-tab-section {
  margin-bottom: 1.5rem;
}

.cost-tab-section:last-of-type {
  margin-bottom: 0;
}

.task-cost-tab__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  padding: 6px 10px;
  min-width: 120px;
}

.task-cost-tab__title {
  font-weight: 600;
  text-transform: capitalize;
  font-size: 0.9rem;
}

.task-cost-tab__price {
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-cost-tab__totals {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}

.task-cost-tab__total-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.task-price-total-input {
  font-weight: 600;
  min-width: 56px;
  max-width: 110px;
}

.task-price-total-input.manual-price {
  border-bottom: 2px solid #dc3545;
  padding-bottom: 0.125rem;
}

.task-info-panel {
  padding: 12px 8px;
}

.task-upper-content .task-picture-wrapper {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f4f6fb;
}

.task-picture-image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
}

.task-note-textarea {
  width: 100%;
  min-height: 0;
  resize: vertical;
}

.task-quantity-control .input-group-text.task-quantity-icon {
  background: transparent;
  border: none;
  padding: 0 6px;
  font-weight: 700;
}

.task-quantity-input {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.task-quantity-input:focus {
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.4);
}

/* Position header controls (f1_p_view.html): add nt-pos-fh-* classes to use this layout. */
.nt-pos-fh-up {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nt-pos-fh-short {
  max-width: 90px;
  flex: 0 0 90px;
}

.nt-pos-fh-name {
  flex: 1 1 auto;
  min-width: 160px;
}

.nt-pos-fh-down {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.nt-pos-fh-field {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 0;
}

.nt-pos-fh-label {
  background: rgba(106, 102, 93, 0.78);
  color: rgba(245, 243, 238, 0.9) !important;
  padding: 3px 8px;
  border-radius: 6px 6px 0 0;
  display: inline-block;
  justify-self: start;
  margin-bottom: 0;
  line-height: 1;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.nt-pos-fh-input-group {
  align-items: stretch;
  margin-top: -3px;
  border-color: rgba(106, 102, 93, 0.45);
}

.nt-pos-fh-input {
  border-radius: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 8px;
  border-right: 0;
  border-width: 3px;
  border-color: rgba(106, 102, 93, 0.45);
  height: calc(2.25rem + 4px);
  text-align: right;
}


#edit_account_form_div .form-control,
#edit_account_form_div select.form-control,
#edit_account_form_div textarea.form-control {
  border-width: 3px;
}

.nt-pos-fh-append {
  background: #fff;
  text-align: left;
  display: flex;
  align-items: center;
  height: calc(2.25rem + 4px);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  box-sizing: border-box;
  border-left: 0;
  border-top-width: 3px;
  border-right-width: 3px;
  border-bottom-width: 3px;
  border-color: rgba(106, 102, 93, 0.45);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.nt-pos-fh-append-stack {
  padding: 0.25rem 0.5rem;
  line-height: 1.2;
}

.nt-pos-fh-input-group .sale-fold-recalc-btn {
  margin-left: -3px;
  border-width: 3px;
  border-style: solid;
  border-color: rgba(106, 102, 93, 0.45);
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.nt-pos-fh-unit-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  line-height: 1;
}

.nt-pos-fh-unit-divider {
  width: 100%;
  height: 1px;
  background: #adb5bd;
  margin: 1px 0;
}

.quality-checklist-checkbox {
  transform: scale(2);
  transform-origin: center;
  margin: 0;
}

.quality-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quality-checklist-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quality-checklist-cell {
  display: flex;
  align-items: center;
}

.quality-checklist-cell-checkbox {
  width: 70px;
  justify-content: center;
}

.quality-checklist-cell-description {
  flex: 1;
}

.quality-checklist-cell-description .quality-checklist-description {
  width: 100%;
}

.quality-checklist-tab-summary {
  display: block;
  font-weight: 600;
  margin-top: 0px;
  text-align: center;
}

.ntfile_card .mark_element.file-card-action,
.ntfilez_card .mark_element.file-card-action {
  display: none !important;
}

.ntfile_card:hover .mark_element.file-card-action,
.ntfilez_card:hover .mark_element.file-card-action {
  display: inline-flex !important;
}

.ntfile_card .dropdown_col,
.ntfilez_card .dropdown_col {
  display: none;
}

.ntfile-form-icon-col {
  min-width: 84px;
}

.ntfile-form-icon-wrapper {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background-color: #f4f6fb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ntfile-form-icon {
  font-size: 28px;
  line-height: 1;
}

.ntfile-form-file-input input[type="file"] {
  max-width: 140px;
}

.warehouse-tx-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 120px;
  column-gap: 8px;
  align-items: center;
}

.warehouse-tx-summary-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warehouse-tx-summary-qty,
.warehouse-tx-summary-sum {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.warehouse-months-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 8px;
}

.warehouse-month-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 220px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.warehouse-month-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.warehouse-month-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  column-gap: 8px;
  align-items: center;
  font-size: 0.9rem;
}

.warehouse-month-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
  margin: 6px 0;
}

.warehouse-month-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.warehouse-month-dot.income {
  background: #37b24d;
}

.warehouse-month-dot.expense {
  background: #f03e3e;
}

.warehouse-month-dot.loss {
  background: #343a40;
}

.warehouse-month-dot.profit {
  background: #1c7ed6;
}

.warehouse-month-value {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.warehouse-month-summary-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  width: 100%;
}

.warehouse-month-chart-wrap {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  flex: 0 0 auto;
}

.warehouse-month-summary-block .warehouse-month-card {
  margin-left: auto;
}

.new-employee-card {
  outline: 2px solid #2b8a3e;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(43, 138, 62, 0.15);
}

.employee-details-panel {
  background: var(--panel-color);
  border-radius: 8px;
  padding: 6px 8px;
}

.employee-details-panel summary {
  font-size: 12px;
}

.employee-details-table {
  font-size: 12px;
  margin-bottom: 0;
}

.employee-details-table,
.employee-details-table tbody,
.employee-details-table tr,
.employee-details-table td,
.employee-details-table th {
  border: none !important;
}

.employee-fold-phone-input {
  width: calc(12ch + 30px);
  border-radius: 8px 0 0 8px !important;
}

.employee-fold-phone-append {
  border-radius: 0 999px 999px 0 !important;
}

.employee-backward-toggle {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  cursor: pointer;
}

.employee-backward-main {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.employee-activate-form-hidden {
  display: none;
}

.employee-payroll-legend-item {
  width: 60px;
  background-color: #fff;
}

.employee-payroll-legend-item-last {
  margin-right: 28px;
}

.employee-position-select {
  border-radius: 10px;
}

.employee-position-add-btn {
  height: 40px;
}

.primary-task-works-block {
  border: 1px solid #e7eaf0;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.primary-task-work-table {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
}

.primary-task-work-table th {
  white-space: nowrap;
  font-size: 12px;
  width: auto;
}

.primary-task-work-table td {
  vertical-align: middle;
  padding: 0 !important;
  width: auto;
}

.primary-task-work-money,
.primary-task-work-qty {
  display: block;
  width: 100%;
}

.primary-task-work-money input[name="price"] {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

.primary-task-work-table .primary-task-work-employee {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

.primary-task-work-money span,
.primary-task-work-qty span {
  color: #6b7280;
  font-size: 12px;
  min-width: 12px;
}

.primary-task-work-row.saved {
  background: #ebfff0;
  transition: background 0.2s ease;
}

.primary-task-work-row.is-closed {
  background: #f8fafc;
}

.primary-task-work-table input,
.primary-task-work-table select {
  border-radius: 0 !important;
}

.primary-task-work-table,
.primary-task-work-table * {
  margin: 0 !important;
}

.primary-task-qty-col {
  width: 5ch;
  white-space: nowrap;
}

.primary-task-qty-col .primary-task-work-qty {
  width: 100%;
}

.primary-task-qty-col .primary-task-work-qty input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 2px;
  padding-right: 2px;
}

.primary-task-col-executor {
  width: 20ch;
  white-space: nowrap;
}

.primary-task-col-description {
  width: 100%;
}

.primary-task-col-description input[name="description"] {
  width: 100%;
  min-width: 0;
}

.primary-task-col-price {
  width: 11ch;
  white-space: nowrap;
}

.primary-task-col-status {
  width: 6ch;
  white-space: nowrap;
}

.primary-task-work-ready-checkbox {
  transform: scale(1.5);
  transform-origin: center;
}

.costing-access-section {
  position: relative;
}

.costing-access-hide-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(108, 117, 125, 0.35);
  border-radius: 50%;
  background: transparent;
  color: rgba(108, 117, 125, 0.75);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  padding: 0;
}

.costing-access-hide-btn:hover {
  border-color: rgba(220, 53, 69, 0.5);
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}

.sale-fold-editor {
  display: block;
  padding: 0.25rem;
}

.sale-fold-main-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.5rem;
}

.sale-fold-main-field {
  border-radius: 12px;
  /* background: #f8fafc; */
  /* border: 1px solid #e9ecef; */
  padding: 0.45rem 0.55rem;
}

.sale-fold-main-field small {
  display: block;
  /* margin-bottom: 0.3rem; */
}

.sale-fold-main-field--name {
  grid-column: span 12;
}

.sale-fold-main-field--quantity {
  grid-column: span 5;
}

.sale-fold-main-field--price {
  grid-column: span 7;
}

.sale-fold-main-field--price .form-control,
.sale-fold-main-field--quantity .form-control,
.sale-fold-main-field--name .form-control {
  width: 100%;
}

.sale-fold-recalc-btn {
  flex: 0 0 auto;
}

.sale-fold-extra summary {
  cursor: pointer;
}

@media (max-width: 768px) {
  .sale-fold-main-field--name,
  .sale-fold-main-field--quantity,
  .sale-fold-main-field--price {
    grid-column: span 12;
  }
}


.template-order-card {
  margin-bottom: 0.35rem;
  cursor: pointer;
}

.template-order-card:last-child {
  margin-bottom: 0;
}

.template-order-card .main_card_body {
  min-height: 64px;
}

.template-order-card__image-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-order-card__image {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

.template-order-card__image--placeholder {
  background: #f1f3f5;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.template-order-card__content {
  min-width: 0;
}

.template-order-card__price {
  font-weight: 600;
  padding: 0 8px;
  color: #495057;
}

.template-order-card.template-order-card--selected .template-order-card__price {
  display: none;
}

.template-order-floating-actions.floating-btn {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  animation: none;
  transform: none;
}

.template-order-floating-actions.floating-btn .btn {
  flex: 1 1 50%;
  width: 50%;
  border-radius: 8px;
}

.template-order-floating-actions.floating-btn .btn:disabled,
.template-order-floating-actions.floating-btn .btn.disabled {
  opacity: 1;
  background-color: #adb5bd !important;
  border-color: #adb5bd !important;
  color: #f8f9fa !important;
}

.foldable_vertical_container[uniq="new_work_no_task"] .template-order-payable-total-floating {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 950;
  pointer-events: auto;
}

.foldable_vertical_container[uniq="new_work_no_task"] .template-order-floating-payments-row {
  margin: 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.foldable_vertical_container[uniq="new_work_no_task"] .template-order-payable-total {
  margin: 0;
  color: #1f2d3d;
  font-weight: 600;
}

.foldable_vertical_container[uniq="new_work_no_task"] #template_order_manual_payment_amount_host .input-group,
.foldable_vertical_container[uniq="new_work_no_task"] #template_order_manual_payment_account_host .form-control {
  width: 100%;
}

.foldable_vertical_container[uniq="new_work_no_task"] #template_order_manual_payment_account_host .form-control.form-control-lg,
.foldable_vertical_container[uniq="new_work_no_task"] #template_order_manual_payment_amount_host .form-control.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
}

.foldable_vertical_container[uniq="new_work_no_task"] .fvc_scrollable_block {
  padding-bottom: 150px;
}

@media (max-width: 767.98px) {
  .foldable_vertical_container[uniq="new_work_no_task"] .fvc_scrollable_block {
    padding-bottom: 210px;
  }
}

/* Employee salary statistics report (A4) */
.salary-report-page {
  background: #e9ecef;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0 20px;
}

.salary-report-toolbar {
  width: 210mm;
  margin: 0 auto 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.salary-report-a4 {
  width: 210mm;
  min-height: 297mm;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  color: #212529;
  border: 1px solid #ced4da;
  box-shadow: 0 0.25rem 1.2rem rgba(0, 0, 0, 0.12);
  padding: 16mm 14mm;
  box-sizing: border-box;
}

.salary-archive-a4 {
  min-height: 220mm;
}

.salary-report-header {
  border-bottom: 1px solid #adb5bd;
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.salary-archive-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.salary-report-header__identity {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  flex: 1 1 auto;
}

.salary-archive-controls {
  width: 280px;
  flex-shrink: 0;
  padding: 8px 10px;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background: #f8f9fa;
}

.salary-archive-body {
  min-height: 120px;
}

.salary-report-person {
  min-width: 0;
}

.salary-report-meta-row,
.salary-report-generated-at {
  line-height: 1.35;
}

.salary-archive-period {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.salary-archive-body .table-responsive {
  margin-bottom: 14px;
}

.salary-archive-body .table-responsive:last-child {
  margin-bottom: 0;
}

.salary-archive-block-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
}

.salary-report-photo-wrap {
  width: 76px;
  height: 76px;
  border: 1px solid #adb5bd;
  overflow: hidden;
  flex-shrink: 0;
}

.salary-report-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.salary-report-title {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
}

.salary-report-meta-row {
  font-size: 0.95rem;
}

.salary-report-meta-label {
  font-weight: 600;
  margin-right: 4px;
}

.salary-report-generated-at {
  margin-top: 10px;
  font-size: 0.86rem;
  color: #495057;
}

.salary-report-section-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
}

.salary-report-table {
  margin-bottom: 0;
}

.salary-report-table th,
.salary-report-table td {
  vertical-align: middle;
}

.salary-report-table thead th,
.salary-report-table tfoot th {
  background: #f8f9fa;
}

.salary-report-avg-row td {
  background: #eef2f7;
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .salary-report-toolbar {
    width: auto;
    margin: 0 12px 10px;
  }

  .salary-archive-header {
    flex-direction: column;
  }

  .salary-archive-controls {
    width: 100%;
  }

  .salary-report-a4 {
    width: auto;
    min-height: auto;
    margin: 0 12px;
    padding: 16px;
  }

  .salary-report-title {
    font-size: 1.2rem;
  }

  .salary-report-photo-wrap {
    width: 64px;
    height: 64px;
  }
}

@media print {
  .salary-report-page {
    background: #fff;
    padding: 0;
    height: auto;
    overflow: visible;
  }

  .salary-report-toolbar {
    display: none !important;
  }

  .salary-report-a4 {
    width: auto;
    min-height: auto;
    margin: 0;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}

.template-order-table-input.form-control,
.template-order-table-input.form-control-sm {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0.3rem !important;
  height: auto !important;
  min-height: 0 !important;
}

.template-order-table-input.form-control:focus,
.template-order-table-input.form-control-sm:focus {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.template-order-works-table {
  background-color: #f3faf4 !important;
  border-radius: 8px;
  overflow: hidden;
}

.template-order-works-table td,
.template-order-works-table th {
  background-color: transparent !important;
}

.template-order-sales-table {
  background-color: #fcf2f4 !important;
  border-radius: 8px;
  overflow: hidden;
}

#template_order_saved_works_block .table-responsive,
#template_order_saved_sales_block .table-responsive {
  border-radius: 8px;
  overflow: hidden;
}

.template-order-sales-table td,
.template-order-sales-table th {
  background-color: transparent !important;
}

.template-order-sales-table td:nth-child(3),
.template-order-sales-table th:nth-child(3) {
  padding-left: 0.15rem !important;
  padding-right: 0.15rem !important;
}

.template-order-custom-work-position-cell {
  padding-right: 0.15rem !important;
}

.template-order-custom-work-position-wrap {
  width: 100%;
  gap: 0.15rem;
}

.template-order-custom-work-executor {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-image: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.template-order-table-head th {
  font-size: 0.62rem;
  font-weight: 500;
  color: #8b98a6;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center !important;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

#template_order_works_tbody tr.template-order-custom-work-draft-row > td,
#template_order_sales_tbody tr.template-order-custom-sale-draft-row > td {
  border-top: 1px solid #007bff !important;
  border-bottom: 1px solid #007bff !important;
  box-shadow: inset 0 1px 0 #007bff, inset 0 -1px 0 #007bff;
}

#template_order_works_tbody tr.template-order-custom-work-draft-row > td:first-child,
#template_order_sales_tbody tr.template-order-custom-sale-draft-row > td:first-child {
  border-left: 1px solid #007bff !important;
  box-shadow: inset 1px 0 0 #007bff, inset 0 1px 0 #007bff, inset 0 -1px 0 #007bff;
}

#template_order_works_tbody tr.template-order-custom-work-draft-row > td:last-child,
#template_order_sales_tbody tr.template-order-custom-sale-draft-row > td:last-child {
  border-right: 1px solid #007bff !important;
  box-shadow: inset -1px 0 0 #007bff, inset 0 1px 0 #007bff, inset 0 -1px 0 #007bff;
}

#template_order_works_tbody tr.template-order-custom-work-row--just-saved > td {
  animation: template-order-work-row-saved-flash 0.9s ease;
}

#template_order_works_tbody tr.template-order-custom-work-summary-row > td {
  background-color: #e7f5ea !important;
  border-color: #b9dcc1 !important;
  font-weight: 600;
}

#template_order_works_tbody tr.template-order-custom-work-summary-row > td:first-child {
  color: #55725d;
}

#template_order_works_tbody tr.template-order-custom-work-summary-row > td:nth-child(2) {
  color: #2d5a39;
}

#template_order_works_tbody tr.template-order-custom-work-row--closed > td {
  background-color: #eef1f4 !important;
  color: #98a3ad !important;
}

#template_order_works_tbody tr.template-order-custom-work-row--closed .template-order-custom-work-executor,
#template_order_works_tbody tr.template-order-custom-work-row--closed .template-order-custom-work-description,
#template_order_works_tbody tr.template-order-custom-work-row--closed .template-order-custom-work-price,
#template_order_works_tbody tr.template-order-custom-work-row--closed .template-order-custom-work-price-currency,
#template_order_works_tbody tr.template-order-custom-work-row--closed .template-order-custom-work-status-cell {
  color: #98a3ad !important;
}

#template_order_works_tbody tr.template-order-custom-work-trigger-row--just-visible > td {
  animation: template-order-work-trigger-flash 1s ease;
}

#template_order_sales_tbody tr.template-order-custom-sale-row--just-saved > td {
  animation: template-order-sale-row-saved-flash 0.9s ease;
}

#template_order_sales_tbody tr.template-order-custom-sale-summary-row > td {
  background-color: #fdecef !important;
  border-color: #efc7d0 !important;
  font-weight: 600;
}

#template_order_sales_tbody tr.template-order-custom-sale-summary-row > td:first-child {
  color: #7a5d64;
}

#template_order_sales_tbody tr.template-order-custom-sale-summary-row > td:last-child {
  color: #7a3146;
}

#template_order_sales_tbody tr.template-order-custom-sale-trigger-row--just-visible > td {
  animation: template-order-sale-trigger-flash 1s ease;
}

@keyframes template-order-work-row-saved-flash {
  0% {
    background-color: rgba(46, 160, 67, 0.08) !important;
  }

  38% {
    background-color: rgba(46, 160, 67, 0.22) !important;
  }

  100% {
    background-color: transparent !important;
  }
}

.template-order-custom-work-add-trigger.btn.btn-link.btn-sm {
  color: #1f6fd5;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.template-order-custom-work-add-trigger.btn.btn-link.btn-sm:hover,
.template-order-custom-work-add-trigger.btn.btn-link.btn-sm:focus {
  color: #0d57b5;
  text-decoration: none;
  box-shadow: none;
}

.template-order-custom-sale-add-trigger.btn.btn-link.btn-sm {
  color: #1f6fd5;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.template-order-custom-sale-add-trigger.btn.btn-link.btn-sm:hover,
.template-order-custom-sale-add-trigger.btn.btn-link.btn-sm:focus {
  color: #0d57b5;
  text-decoration: none;
  box-shadow: none;
}

.template-order-custom-sale-qty-dim-wrap {
  gap: 2px;
  width: max-content;
  margin-left: auto;
}

.template-order-custom-sale-price {
  flex: 0 0 7ch;
  width: 7ch;
  min-width: 7ch;
  max-width: 7ch;
}

.template-order-custom-sale-quantity {
  flex: 0 0 3em;
  width: 3em;
  min-width: 3em;
  max-width: 3em;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: right;
}

.template-order-custom-sale-dim {
  flex: 0 0 2em;
  width: 2em;
  min-width: 2em;
  max-width: 2em;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.template-order-custom-sale-total {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.template-order-custom-sale-good-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
}

.template-order-custom-sale-good-icon--pending {
  opacity: 1;
  color: #212529;
}

.template-order-custom-sale-good-icon--written-off {
  opacity: 1;
  color: #198754;
  text-shadow: 0 0 0 currentColor;
}

@keyframes template-order-sale-row-saved-flash {
  0% {
    background-color: rgba(195, 61, 110, 0.08) !important;
  }

  38% {
    background-color: rgba(195, 61, 110, 0.18) !important;
  }

  100% {
    background-color: transparent !important;
  }
}

@keyframes template-order-work-trigger-flash {
  0% {
    background-color: rgba(13, 87, 181, 0.03) !important;
  }

  32% {
    background-color: rgba(13, 87, 181, 0.12) !important;
  }

  100% {
    background-color: transparent !important;
  }
}

@keyframes template-order-sale-trigger-flash {
  0% {
    background-color: rgba(13, 87, 181, 0.03) !important;
  }

  32% {
    background-color: rgba(13, 87, 181, 0.12) !important;
  }

  100% {
    background-color: transparent !important;
  }
}

.template-order-autocomplete-menu {
  position: absolute;
  z-index: 2100;
  display: block;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

.template-order-autocomplete-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #212529;
  cursor: pointer;
  white-space: normal;
  line-height: 1.2;
  padding: 0.4rem 0.75rem;
}

.template-order-autocomplete-item:hover,
.template-order-autocomplete-item:focus {
  background: #f1f3f5;
  outline: none;
}

.template-order-autocomplete-item.disabled {
  color: #6c757d;
  cursor: default;
}

.template-order-autocomplete-item.disabled:hover,
.template-order-autocomplete-item.disabled:focus {
  background: transparent;
}

.template-order-autocomplete-menu .template-order-autocomplete-item {
  white-space: normal;
  line-height: 1.2;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.terminal-order-search-wrap {
  position: relative;
  width: min(460px, 70vw);
  max-width: 100%;
}

.terminal-order-search-pill {
  display: flex;
  align-items: center;
  border: 1px solid #b8d0ec;
  border-radius: 999px;
  background: #f6fbff;
  padding: 2px 8px 2px 12px;
  min-height: 36px;
}

.terminal-order-search-pill:focus-within {
  border-color: #5f97d1;
  box-shadow: 0 0 0 2px rgba(95, 151, 209, 0.12);
}

.terminal-order-search-input {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #274867;
  font-size: 0.95rem;
  min-width: 0;
}

.terminal-order-search-input::placeholder {
  color: #7a9ab8;
}

.terminal-order-search-btn {
  border: 0;
  background: transparent;
  color: #5f97d1;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.terminal-order-search-btn:hover,
.terminal-order-search-btn:focus {
  color: #2f6ea8;
  background: rgba(95, 151, 209, 0.12);
  outline: none;
}

.terminal-order-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1060;
  border: 1px solid #c5d9ee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(28, 59, 92, 0.12);
  padding: 8px 12px;
}

.terminal-order-search-results {
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

.terminal-order-search-result {
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid #edf3fa;
  background: transparent;
  text-align: left;
  padding: 8px 2px;
  color: #23425f;
}

.terminal-order-search-result:first-child {
  border-top: 0;
}

.terminal-order-search-result:hover,
.terminal-order-search-result:focus {
  background: #f6fbff;
  outline: none;
}

.terminal-order-search-result__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.terminal-order-search-result__title {
  font-weight: 600;
  font-size: 0.88rem;
}

.terminal-order-search-result__price {
  color: #53789e;
  font-size: 0.82rem;
  white-space: nowrap;
}

.terminal-order-search-result__meta,
.terminal-order-search-result__desc {
  display: block;
  font-size: 0.78rem;
  color: #6d869f;
  line-height: 1.25;
}

.terminal-order-search-result__desc {
  color: #7f95ab;
}

.template-order-customer-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 8px;
  margin: 0 0 1rem;
}

.template-order-customer-card__avatar {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #5f97d1;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
}

.template-order-customer-card__content {
  min-width: 0;
}

.template-order-customer-card__name {
  font-weight: 700;
  line-height: 1.15;
}

.template-order-customer-card__phone {
  color: #6c757d;
  line-height: 1.15;
  margin-top: 2px;
}

.template-order-upper-row {
  --template-order-share-size: 64px;
  overflow: visible;
  flex-wrap: nowrap;
}

.template-order-upper-row > * {
  overflow: visible;
  min-width: 0;
}

.template-order-upper-row .quick-actions,
.template-order-upper-row .quick-action-share-dropdown {
  overflow: visible;
}

.template-order-upper-row .quick-actions {
  display: block;
  width: auto;
  margin-bottom: 0;
}

.template-order-upper-row .quick-action-share-dropdown .dropdown-menu {
  min-width: 220px;
  z-index: 1080;
}

.template-order-share-square-btn {
  width: var(--template-order-share-size);
  min-width: var(--template-order-share-size);
  max-width: var(--template-order-share-size);
  height: var(--template-order-share-size);
  min-height: var(--template-order-share-size);
  max-height: var(--template-order-share-size);
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

.template-order-share-square-btn .quick-actions__label {
  display: none;
}

.template-order-share-square-btn .quick-actions__icon {
  margin-right: 0;
}

.template-order-upper-row .template-order-customer-card {
  margin-top: 0;
  margin-bottom: 0;
  min-height: var(--template-order-share-size);
}

.template-order-upper-row #universal_client_collapsed_host,
.template-order-upper-row #universal_add_client_form {
  margin-top: 0;
}

.template-order-upper-row #universal_add_client_form > .bg-light {
  margin-top: 0;
  margin-bottom: 0 !important;
}

.template-order-upper-row #universal_client_collapsed_host .client-collapsed-add,
.template-order-upper-row #universal_client_collapsed_host .client-collapsed-card {
  min-height: var(--template-order-share-size);
  height: var(--template-order-share-size);
  margin-bottom: 0;
}

.template-order-upper-row #universal_client_collapsed_host .client-collapsed-add {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.warehouse-import-panel {
  border: 1px solid #d7e1eb;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
}

.warehouse-import-file-chip {
  color: #526273;
  border-radius: 999px;
  font-weight: 500;
  padding: 7px 10px;
}

.warehouse-import-preview {
  min-height: 120px;
}

.warehouse-import-logs {
  background: #0f1720;
  color: #d6e2f0;
  border-radius: 12px;
  padding: 12px 14px;
  max-height: 220px;
  overflow-y: auto;
  white-space: normal;
}

.warehouse-import-tree {
  position: relative;
}

.warehouse-import-tree-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.warehouse-import-card-main {
  margin: 0;
  min-height: 32px;
  padding: 2px 0;
  border-bottom: 1px solid #dee2e6;
}

.warehouse-import-kind {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.warehouse-import-toggle {
  color: #6c757d;
  text-decoration: none;
  line-height: 1;
}

.warehouse-import-toggle-icon {
  display: inline-block;
  transition: transform 0.15s ease-in-out;
}

.warehouse-import-toggle[aria-expanded="true"] .warehouse-import-toggle-icon {
  transform: rotate(90deg);
}

.warehouse-import-toggle:hover,
.warehouse-import-toggle:focus {
  color: #495057;
  text-decoration: none;
}

.warehouse-import-children {
  position: relative;
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid #dee2e6;
}

.warehouse-import-warehouse-card > .card-body,
.warehouse-import-stock-card > .card-body,
.warehouse-import-good-card > .card-body {
  padding: 0;
}

.warehouse-import-more {
  margin: 4px 0 8px 24px;
  padding-left: 12px;
  border-left: 1px solid #dee2e6;
}

.warehouse-import-input {
  border-radius: 10px;
}

.warehouse-import-preview-errors,
.warehouse-import-preview-warnings {
  border-radius: 12px;
}

.universal-order-file-panel {
  margin-top: 0.75rem;
  padding: 0.5rem;
  border: 1px solid #d7e1eb;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.universal-order-file-panel__row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.universal-order-file-panel__add-btn {
  width: 74px;
  min-width: 74px !important;
  height: 74px;
  flex: 0 0 auto;
  color: #2f80ed !important;
}

.universal-order-file-panel__add-btn .quick-actions__icon,
.universal-order-file-panel__add-btn .quick-actions__label,
.universal-order-file-panel__add-btn .universal-order-file-panel__menu-mark {
  color: #2f80ed !important;
}

.universal-order-file-panel__add-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.universal-order-file-panel__add-dropdown.show .universal-order-file-panel__dropdown-menu--add {
  display: block;
}

.universal-order-file-panel__scroller {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.universal-order-file-panel__track,
.universal-order-file-panel__saved-list,
.universal-order-file-panel__pending-list {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.universal-order-file-panel__track {
  min-width: max-content;
}

.universal-order-file-panel__empty {
  display: inline-flex;
  align-items: center;
  min-height: 74px;
  padding: 0 0.5rem;
  white-space: nowrap;
}

.universal-order-file-panel__saved-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.universal-order-file-panel__file-btn {
  position: relative;
  width: 74px;
  min-width: 74px !important;
  height: 74px;
  padding: 0.25rem 0.3rem !important;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  border: 1px solid #d7e1eb !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #33475b !important;
  text-decoration: none !important;
  box-shadow: none !important;
  overflow: hidden;
}

.universal-order-file-panel__file-btn--image {
  padding: 0 !important;
  align-items: stretch;
  justify-content: stretch;
  background: #eef3f8 !important;
}

.universal-order-file-panel__file-btn--audio-playing {
  background: #eef6ff !important;
  color: #1f5ea8 !important;
}

.universal-order-file-panel__file-btn--recording {
  position: relative;
  background: #fff2f2 !important;
  color: #a61e2a !important;
  border-color: #f1c6cb !important;
  gap: 0.08rem;
}

.universal-order-file-panel__file-btn--recording:hover,
.universal-order-file-panel__file-btn--recording:focus {
  background: #ffe9eb !important;
  color: #8d1621 !important;
}

.universal-order-file-panel__file-dropdown-toggle::after {
  display: none !important;
}

.universal-order-file-panel__file-btn:hover,
.universal-order-file-panel__file-btn:focus {
  background: #f7fbff !important;
  color: #243746 !important;
  text-decoration: none !important;
}

.universal-order-file-panel__file-btn .quick-actions__icon {
  font-size: 1.2rem;
  line-height: 1;
}

.universal-order-file-panel__file-btn--audio-playing .quick-actions__icon {
  font-size: 1.35rem;
}

.universal-order-file-panel__file-btn--recording .quick-actions__icon {
  font-size: 1.55rem;
}

.universal-order-file-panel__file-btn .quick-actions__label {
  width: 100%;
  max-width: 100%;
  font-size: 0.68rem;
  line-height: 1.05;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.universal-order-file-panel__recording-icon {
  color: #d7263d;
  animation: universal-order-file-panel-record-pulse 1.1s ease-in-out infinite;
}

.universal-order-file-panel__recording-status {
  font-size: 0.58rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #c63b47;
}

.universal-order-file-panel__recording-timer {
  font-size: 0.8rem;
  line-height: 1.05;
  font-weight: 600;
  color: #7b1722;
}

.universal-order-file-panel__image-wrap {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

.universal-order-file-panel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.universal-order-file-panel__video-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(18, 33, 51, 0.58);
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  backdrop-filter: blur(2px);
}

.universal-order-file-panel__primary-mark {
  position: absolute;
  top: 4px;
  left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 206, 86, 0.96);
  color: #5a4200;
  font-size: 0.72rem;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(18, 33, 51, 0.16);
}

.universal-order-file-panel__menu-mark {
  position: absolute;
  top: 3px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #7b8a99;
  font-size: 0.8rem;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

.universal-order-file-panel__dropdown-menu {
  min-width: 190px;
}

.universal-order-file-panel__saved-dropdown .universal-order-file-panel__dropdown-menu {
  top: calc(100% + 6px);
  left: 0;
  right: auto;
}

.universal-order-file-panel__dropdown-menu--add {
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: 230px;
}

.universal-order-file-panel__dropdown-menu--add .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.universal-order-file-panel__dropdown-menu--add .dropdown-item i {
  flex: 0 0 auto;
  width: 1rem;
  text-align: center;
}

.universal-order-file-panel__dropdown-menu--icon-slot .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.universal-order-file-panel__dropdown-menu--icon-slot .dropdown-item i {
  flex: 0 0 auto;
  width: 1rem;
  text-align: center;
}

@keyframes universal-order-file-panel-record-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.58;
    transform: scale(0.92);
  }
}

.universal-order-file-panel__menu-mark--add {
  pointer-events: none;
}

.universal-order-file-panel__remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(220, 53, 69, 0.1);
  color: #b02a37;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  z-index: 3;
}

.universal-order-file-panel__remove-btn:hover,
.universal-order-file-panel__remove-btn:focus {
  background: rgba(220, 53, 69, 0.18);
  color: #842029;
  outline: none;
}

@media (max-width: 767.98px) {
  .warehouse-import-panel {
    padding: 10px;
  }

  .warehouse-import-children {
    margin-left: 8px;
    padding-left: 12px;
  }

  .warehouse-import-more {
    margin-left: 18px;
    padding-left: 10px;
  }

  .universal-order-file-panel__row {
    gap: 0.4rem;
  }
}

#template_order_payload_container {
  position: relative;
}

.foldable_vertical_container[uniq="new_work_no_task"] {
  position: relative;
}

.foldable_vertical_container[uniq="new_work_no_task"] .fvc_scrollable_block {
  padding-bottom: 15px !important;
}

.template-order-payments-wrapper {
  position: relative;
  width: 100%;
  border-radius: 0.25rem;
  border: 1px solid #bfd8f6;
  background: #f2f8ff;
}

.template-order-payments-table-scroll {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.template-order-payments-table {
  width: 100%;
  background: #f2f8ff;
  table-layout: fixed;
  margin-bottom: 0;
}

.template-order-payments-col-date {
  width: 3.55rem;
}

.template-order-payments-col-purpose {
  width: calc(73% - 3.55rem);
}

.template-order-payments-col-account {
  width: 37%;
}

.template-order-payments-col-amount {
  width: 27%;
}

.template-order-payments-table td,
.template-order-payments-table th {
  border-color: #bfd8f6;
  background: #f2f8ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-order-payments-table .template-order-table-head th {
  background: #e6f1ff;
}

#template_order_payments_tbody tr.template-order-payments-total-row > td {
  background: #eaf3ff !important;
  border-color: #bfd8f6 !important;
  font-weight: 600;
}

#template_order_payments_tbody tr.template-order-payments-total-row > td:first-child {
  color: #4b6178;
}

#template_order_payments_tbody tr.template-order-payments-total-row > td:last-child {
  color: #2f4f6f;
}

.template-order-manual-payment-row > td {
  background: #dcecff !important;
  border-color: #93c5fd !important;
}

.template-order-manual-payment-date-cell {
  width: 3.55rem;
  min-width: 3.55rem;
  max-width: 3.55rem;
  padding: 0.125rem 0.25rem !important;
  vertical-align: middle;
}

.template-order-manual-payment-cell {
  min-width: 0;
  padding: 0.125rem 0.25rem !important;
  vertical-align: middle;
}

.template-order-manual-payment-cell > .form-control,
.template-order-manual-payment-cell > .input-group {
  width: 100%;
  margin-left: auto;
}

.template-order-manual-payment-cell-amount > .input-group {
  width: 100%;
  max-width: 100%;
  justify-content: flex-end;
}

.template-order-manual-payment-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0;
  padding-right: 1px;
  padding-bottom: 1px;
}

.template-order-payment-inline-control {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

#template_order_manual_payment_amount.template-order-payment-inline-control {
  min-width: 13ch;
  max-width: 13ch;
  background: #ffffff !important;
  border: 1px solid #93c5fd;
  border-radius: 0.25rem 0 0 0.25rem;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  padding-right: 0.35rem;
}

.template-order-manual-payment-row .input-group {
  flex-wrap: nowrap;
}

.template-order-payment-inline-control:focus {
  border: 0;
  box-shadow: none;
}

.template-order-payment-inline-addon {
  border: 0;
  background: transparent;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
}

#template_order_add_manual_payment_btn.btn {
  border-radius: 0 0 8px 8px;
  margin-top: 0;
}
.onlyoffice-embed-frame {
  display: block;
  width: 100%;
  height: calc(100dvh - 170px);
  min-height: 600px;
  border: 0;
  background: #fff;
}
.onlyoffice-embed-page {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  overflow: hidden;
  background: #f5f7fa;
}

.onlyoffice-embed-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #fff;
}

.onlyoffice-embed-editor {
  width: 100%;
  height: 100dvh;
  min-height: 100%;
}

.onlyoffice-embed-editor iframe {
  min-height: 100%;
}

.onlyoffice-embed-status,
.onlyoffice-embed-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px;
  color: #6c757d;
  text-align: center;
}

.onlyoffice-embed-status {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 2;
}

.onlyoffice-embed-error {
  box-sizing: border-box;
  color: #842029;
  background: #f8d7da;
}

@media (max-width: 991.98px) {
  .onlyoffice-embed-frame {
    height: calc(100dvh - 140px);
    min-height: 100%;
  }

  .onlyoffice-embed-editor,
  .onlyoffice-embed-status,
  .onlyoffice-embed-error {
    min-height: 100%;
  }
}

body.public-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(240, 138, 0, 0.12), transparent 28%),
    linear-gradient(180deg, #efede7 0%, #f5f3ee 100%);
  color: var(--public-black);
  font-family: var(--public-font-body);
}

.public-navbar {
  padding: 0;
  background: #d7d4ce;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.public-navbar .navbar-brand,
.public-navbar .navbar-brand:hover,
.public-navbar .navbar-brand:focus {
  color: var(--public-black);
  font-family: var(--public-font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.public-navbar .navbar-toggler {
  border-color: rgba(17, 17, 17, 0.14);
}

.public-navbar-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.95rem 1.25rem;
}

.public-navbar .nav-link {
  color: var(--public-muted);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.public-navbar .nav-link:hover,
.public-navbar .nav-link:focus {
  color: var(--public-black);
}

.public-navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.public-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  color: var(--public-black);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(245, 243, 238, 0.72);
}

.public-nav-cta:hover,
.public-nav-cta:focus {
  color: var(--public-black);
  text-decoration: none;
  background: #fff;
}

.public-nav-cta.public-nav-cta-primary {
  border-color: transparent;
  background: var(--public-accent);
  color: #111;
}

.public-main-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.public-page-surface,
.public-auth-card,
.public-auth-aside,
.public-page-panel {
  background: rgba(245, 243, 238, 0.94);
  border: 1px solid var(--public-border);
  border-radius: 28px;
  box-shadow: var(--public-shadow);
}

.public-page-surface {
  padding: 2rem;
}

.public-page-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.public-eyebrow,
.public-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  background: rgba(240, 138, 0, 0.12);
  color: #995200;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-page-title,
.public-hero-title,
.public-auth-title {
  margin: 0;
  font-family: var(--public-font-heading);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--public-black);
}

.public-page-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.95;
}

.public-hero-title {
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.92;
}

.public-auth-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
}

.public-page-lead,
.public-hero-lead,
.public-auth-subtitle,
.public-text-muted {
  color: var(--public-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.public-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 1.5rem;
}

.public-card-grid,
.public-stat-grid,
.public-pricing-grid,
.public-contact-grid {
  display: grid;
  gap: 1rem;
}

.public-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-card,
.public-stat,
.public-pricing-card,
.public-contact-card {
  padding: 1.25rem;
  border-radius: 22px;
  border: 1px solid var(--public-border);
  background: #fffdfa;
}

.public-card-title,
.public-pricing-title,
.public-contact-title {
  margin: 0 0 0.5rem;
  color: var(--public-black);
  font-family: var(--public-font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.public-card-text,
.public-contact-text,
.public-list,
.public-list li {
  color: var(--public-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

.public-list {
  margin: 0;
  padding-left: 1.1rem;
}

.public-list li + li {
  margin-top: 0.4rem;
}

.public-stat {
  background: #1f1f22;
  border-color: rgba(255, 255, 255, 0.04);
}

.public-stat-value {
  display: block;
  margin-bottom: 0.35rem;
  color: #fff;
  font-family: var(--public-font-heading);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.public-stat-label {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.84rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.public-page-panel {
  padding: 1.5rem;
  background: #1f1f22;
  color: rgba(255, 255, 255, 0.85);
}

.public-page-panel .public-card-title,
.public-page-panel .public-page-title,
.public-page-panel .public-hero-title {
  color: #fff;
}

.public-page-panel .public-card-text,
.public-page-panel .public-list,
.public-page-panel .public-list li {
  color: rgba(255, 255, 255, 0.7);
}

.public-highlight-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-highlight-list li {
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.05);
  color: var(--public-black);
  font-size: 0.88rem;
  font-weight: 700;
}

.public-note {
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--public-accent);
  border-radius: 16px;
  background: rgba(240, 138, 0, 0.08);
  color: #6e4b17;
  font-size: 0.95rem;
  line-height: 1.6;
}

.public-btn,
.public-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.15rem;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.public-btn:hover,
.public-btn:focus,
.public-link-btn:hover,
.public-link-btn:focus {
  text-decoration: none;
  transform: translateY(-1px);
}

.public-btn:disabled,
.public-btn[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.public-btn-primary {
  border: 0;
  color: #111;
  background: var(--public-accent);
  box-shadow: 0 12px 24px rgba(240, 138, 0, 0.2);
}

.public-btn-primary:hover,
.public-btn-primary:focus {
  color: #111;
  background: #ff9b19;
}

.public-btn-secondary {
  border: 1px solid rgba(17, 17, 17, 0.12);
  color: var(--public-black);
  background: rgba(255, 255, 255, 0.8);
}

.public-btn-secondary:hover,
.public-btn-secondary:focus {
  color: var(--public-black);
  background: #fff;
}

.public-auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: 1.5rem;
}

.public-auth-standalone {
  display: flex;
  justify-content: flex-end;
}

.public-auth-aside,
.public-auth-card {
  padding: 2rem;
}

.public-auth-card-standalone {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
}

.public-auth-aside {
  background: linear-gradient(165deg, #1f1f22 0%, #111111 100%);
  color: rgba(255, 255, 255, 0.86);
}

.public-auth-aside .public-eyebrow,
.public-auth-aside .public-kicker {
  background: rgba(240, 138, 0, 0.15);
  color: #ffbf67;
}

.public-auth-aside .public-hero-title {
  color: #fff;
}

.public-auth-aside .public-hero-lead,
.public-auth-aside .public-card-text,
.public-auth-aside .public-list,
.public-auth-aside .public-list li {
  color: rgba(255, 255, 255, 0.72);
}

.public-auth-card-header {
  margin-bottom: 1.5rem;
}

.public-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.public-field-label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--public-black);
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.public-auth-form .form-control,
.public-auth-form .input-group-text {
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  box-shadow: none;
}

.public-auth-form .form-control {
  color: var(--public-black);
  background: #fffdfa;
  font-family: var(--public-font-body);
  font-size: 1rem;
}

.public-auth-form .form-control::placeholder {
  color: #9aa1ab;
}

.public-auth-form .form-control:focus {
  border-color: rgba(240, 138, 0, 0.7);
  box-shadow: 0 0 0 0.18rem rgba(240, 138, 0, 0.14);
}

.public-auth-form .input-group-text {
  border-left: 0;
  background: #fffdfa;
  cursor: pointer;
}

.public-auth-form .input-group > .form-control:not(:last-child) {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.public-auth-form .input-group > .input-group-append > .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.public-inline-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.public-inline-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.public-inline-link {
  color: var(--public-muted);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.public-inline-link:hover,
.public-inline-link:focus {
  color: var(--public-black);
  text-decoration: none;
}

.public-segment {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem;
  border-radius: 18px;
  background: rgba(17, 17, 17, 0.05);
}

.public-segment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  border: 0;
  background: transparent;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
}

.public-segment-btn.text-dark {
  background: #fffdfa;
  box-shadow: 0 8px 22px rgba(17, 17, 17, 0.06);
}

.public-segment-btn.text-light {
  color: var(--public-muted) !important;
}

.public-status-box {
  min-height: 60px;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgba(17, 17, 17, 0.04);
}

.public-status-box.is-success {
  background: rgba(31, 169, 113, 0.1);
  color: #166c4b;
}

.public-status-box.is-warning {
  background: rgba(240, 138, 0, 0.1);
  color: #8f5600;
}

.public-error-list .alert {
  margin-bottom: 0.75rem;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--public-danger);
}

.public-subtle-box {
  padding: 1rem;
  border-radius: 18px;
  background: rgba(17, 17, 17, 0.03);
}

.public-price {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--public-black);
  font-family: var(--public-font-heading);
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.public-pricing-card.is-featured {
  position: relative;
  background: linear-gradient(180deg, rgba(240, 138, 0, 0.1), rgba(255, 255, 255, 0.96));
  border-color: rgba(240, 138, 0, 0.35);
}

.public-pricing-card.is-featured::before {
  content: "Популярный";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  padding: 0.38rem 0.68rem;
  border-radius: 999px;
  background: rgba(240, 138, 0, 0.15);
  color: #9b5900;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-footnote {
  color: var(--public-muted);
  font-size: 0.84rem;
  line-height: 1.6;
}

@media (max-width: 991.98px) {
  .public-main-shell {
    padding-top: 1.35rem;
  }

  .public-page-grid,
  .public-auth-shell,
  .public-pricing-grid,
  .public-contact-grid {
    grid-template-columns: 1fr;
  }

  .public-auth-standalone {
    display: block;
  }

  .public-card-grid,
  .public-stat-grid {
    grid-template-columns: 1fr;
  }

  .public-page-surface,
  .public-auth-card,
  .public-auth-aside {
    padding: 1.4rem;
    border-radius: 24px;
  }

  .public-auth-card-standalone {
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .public-navbar-inner {
    padding: 0.85rem 1rem;
  }

  .public-navbar-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0.8rem;
  }

  .public-nav-cta {
    width: 100%;
  }

  .public-page-title,
  .public-hero-title,
  .public-auth-title {
    line-height: 1.02;
  }

  .public-inline-actions {
    align-items: flex-start;
  }

  .public-segment {
    width: 100%;
  }

  .public-segment-btn {
    flex: 1 1 0;
  }
}

.order-date-divider {
  margin: 24px 6px 8px;
  padding: 0 4px;
  color: #7c8792;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: lowercase;
}

.public-site {
  color: var(--text-dark);
  background: var(--bg-soft);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
}

.public-site::selection {
  background: rgba(37, 99, 235, 0.18);
}

.public-site h1,
.public-site h2,
.public-site h3,
.public-site h4,
.public-site h5,
.public-site h6 {
  color: var(--text-dark);
  letter-spacing: 0.2px;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.public-site p,
.public-site .text-muted {
  color: var(--text-muted);
}

.public-site a {
  color: var(--brand-primary);
  text-decoration: none;
}

.public-site a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.public-site section {
  scroll-margin-top: 5rem;
}

.public-site h2.border-bottom {
  border-color: var(--border-soft) !important;
  padding-bottom: 0.5rem;
}

.public-site .navbar.sticky-top {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-soft);
}

.public-site .navbar.sticky-top .nav-link {
  color: var(--text-dark);
  padding: 0.75rem 1rem;
  transition: color 0.15s ease, background-color 0.15s ease;
  border-radius: 8px;
}

.public-site .navbar.sticky-top .nav-link:hover,
.public-site .navbar.sticky-top .nav-link:focus {
  color: var(--brand-primary);
  background-color: rgba(37, 99, 235, 0.06);
}

.public-site .navbar.sticky-top .nav-link.active {
  color: var(--brand-primary);
  font-weight: 600;
}

.public-site .btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.public-site .btn-primary:hover,
.public-site .btn-primary:focus {
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}

.public-site .btn-light {
  background-color: #fff;
  border-color: var(--border-soft);
  color: var(--text-dark);
  box-shadow: var(--shadow-sm);
}

.public-site .btn-outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.public-site .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.public-site .card {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.public-site .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.public-site .card-body {
  padding: 1.25rem 1.25rem;
}

.public-site .placeholder-img img {
  max-width: 100%;
  height: 140px;
  object-fit: contain;
}

.public-site iframe {
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  background: #000;
}

.public-site .text-white {
  color: var(--text-light) !important;
}

.public-site .bg-light {
  background-color: #fafbfc !important;
}

.public-site hr.bg-warning {
  background-color: var(--brand-accent) !important;
  border: none;
  height: 3px;
  opacity: 1;
}

.public-site .whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1060;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366;
  color: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  text-decoration: none;
}

.public-site .whatsapp-fab.circle {
  border-radius: 999px;
}

.public-site .whatsapp-fab:hover,
.public-site .whatsapp-fab:focus {
  background-color: #1ebe57;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
  color: #fff;
}

.public-site .whatsapp-fab .bi {
  font-size: 1.6rem;
  line-height: 1;
}

.org-type-option {
  border: 1px solid #212529;
  border-radius: 10px;
  padding: 14px 16px;
}

.org-type-option + .org-type-option {
  margin-top: 12px;
}

.org-type-option label {
  margin: 0;
  width: 100%;
  cursor: pointer;
  font-size: 24px;
}

.org-type-option input[type="radio"] {
  margin-right: 10px;
}

.survey-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.survey-chip {
  border: 1px solid #212529;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 500;
  margin: 0;
}

.survey-chip input {
  display: none;
}

.survey-chip.active {
  background: #e7f1ff;
  border-color: #0d6efd;
}

#id_username_hint,
#whatsapp_phone_hint,
#btn_send_whatsapp_link {
  display: none;
}

.cobiz-video-section-title {
  margin-top: 120px;
  margin-bottom: 60px;
}

.cobiz-legal-public-site {
  color: var(--public-graphite);
  background: #f5f3ee;
  font-family: var(--public-font-body);
  line-height: 1.6;
}

.cobiz-legal-public-site h1,
.cobiz-legal-public-site h2,
.cobiz-legal-public-site h3,
.cobiz-legal-public-site h4,
.cobiz-legal-public-site h5,
.cobiz-legal-public-site h6 {
  color: var(--public-black);
  font-family: var(--public-font-heading);
}

.cobiz-legal-public-site a {
  color: #2563eb;
  text-decoration: none;
}

.cobiz-legal-public-site a:hover,
.cobiz-legal-public-site a:focus {
  color: #1d4ed8;
  text-decoration: none;
}

@media (max-width: 992px) {
  .public-site h1.display-5 {
    font-size: 2rem;
  }

  .public-site .navbar.sticky-top .nav-link {
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 576px) {
  .public-site .whatsapp-fab {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
}

.cobiz-public-header {
  position: relative;
  z-index: 20;
  padding: 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.cobiz-public-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.public-site a.cobiz-public-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--public-graphite);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.cobiz-public-header__brand-logo {
  display: block;
  width: auto;
  height: 2.2em;
}

.public-site a.cobiz-public-header__brand:hover,
.public-site a.cobiz-public-header__brand:focus {
  color: var(--public-graphite);
  text-decoration: none;
}

.cobiz-public-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.cobiz-public-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 148px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}

.public-site a.cobiz-public-header__register {
  background-color: var(--public-accent);
  border: 1px solid var(--public-accent);
  color: #ffffff;
}

.public-site a.cobiz-public-header__register:hover,
.public-site a.cobiz-public-header__register:focus {
  background-color: #d97c00;
  border-color: #d97c00;
  color: #ffffff;
  text-decoration: none;
}

.public-site a.cobiz-public-header__login.btn-primary {
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
  color: #ffffff;
}

.public-site a.cobiz-public-header__login.btn-primary:hover,
.public-site a.cobiz-public-header__login.btn-primary:focus {
  box-shadow: 0 16px 30px rgba(30, 64, 175, 0.26);
  color: #ffffff;
  text-decoration: none;
}

.cobiz-public-hero {
  background-color: #d9d6cf;
}

.cobiz-public-hero__title {
  margin-top: 120px;
  color: #111111;
}

.cobiz-login-help {
  max-width: 560px;
  padding: 8px 0;
  opacity: 0.82;
}

.cobiz-login-help__title {
  margin-bottom: 14px;
  color: var(--public-graphite);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.cobiz-login-help__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cobiz-login-help__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.28);
}

.cobiz-login-help__item-number {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(240, 138, 0, 0.1);
  color: var(--public-accent);
  font-size: 0.9rem;
  font-weight: 700;
}

.cobiz-login-help__item-body {
  min-width: 0;
}

.cobiz-login-help__item-title {
  margin-bottom: 3px;
  color: var(--public-graphite);
  font-size: 0.98rem;
  font-weight: 700;
}

.cobiz-login-help__item-text {
  margin: 0;
  color: rgba(28, 28, 30, 0.74);
  font-size: 0.92rem;
  line-height: 1.45;
}

.cobiz-login-help__note {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid rgba(37, 99, 235, 0.65);
  background: rgba(255, 255, 255, 0.2);
  color: rgba(17, 17, 17, 0.8);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
}

.cobiz-public-hero.is-collapsed {
  display: none;
}

.public-site .navbar.sticky-top.text-dark {
  background: #eff1f3 !important;
  border-bottom: none;
  box-shadow: none;
}

.public-site .navbar.sticky-top.text-dark .nav-link {
  color: var(--public-graphite);
  font-weight: 700;
  width: 200px;
  text-align: center;
}

.public-site .navbar.sticky-top.text-dark .nav-link:hover,
.public-site .navbar.sticky-top.text-dark .nav-link:focus,
.public-site .navbar.sticky-top.text-dark .nav-link.active {
  color: var(--public-black);
}

.public-site .cobiz-public-section-nav__brand,
.public-site .cobiz-public-section-nav__mobile-controls {
  display: none;
}

.public-site .cobiz-public-section-nav .navbar-toggler {
  border-radius: 8px;
  border-color: rgba(28, 28, 30, 0.24);
}

.public-site .cobiz-public-section-nav .navbar-toggler:focus {
  outline: 2px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .public-site a.cobiz-public-header__brand,
  .public-site a.cobiz-public-header__register {
    display: none;
  }

  .public-site .cobiz-public-section-nav__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .public-site .cobiz-public-section-nav__brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .public-site .cobiz-public-section-nav__brand:hover,
  .public-site .cobiz-public-section-nav__brand:focus {
    text-decoration: none;
  }

  .public-site .cobiz-public-section-nav__brand-logo {
    display: block;
    width: auto;
    height: 42px;
  }

  .public-site .cobiz-public-section-nav__mobile-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .public-site a.cobiz-public-section-nav__register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--public-accent);
    border-radius: 8px;
    background: var(--public-accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
  }

  .public-site a.cobiz-public-section-nav__register:hover,
  .public-site a.cobiz-public-section-nav__register:focus {
    background: #d97c00;
    border-color: #d97c00;
    color: #ffffff;
    text-decoration: none;
  }

  .public-site .cobiz-public-section-nav .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
    margin-top: 10px;
  }

  .public-site .navbar.sticky-top.text-dark .nav-link {
    width: 100%;
    padding: 10px 12px;
  }
}

.cobiz-sto-banner {
  padding: 32px 0 20px;
  background: #ffffff;
}

.cobiz-sto-banner__inner {
  padding: 36px 40px;
  background: transparent;
  border-radius: 0;
}

.cobiz-sto-banner__content {
  max-width: 740px;
}

.cobiz-sto-banner__title {
  margin-bottom: 20px;
  font-size: clamp(2rem, 3vw, 3.35rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.cobiz-sto-banner__title-primary {
  color: var(--public-graphite);
}

.cobiz-sto-banner__title-accent {
  color: var(--brand-primary);
}

.cobiz-sto-banner__lead {
  max-width: 640px;
  margin-bottom: 24px;
  color: var(--public-graphite);
  font-size: 1.35rem;
  line-height: 1.45;
}

.public-site a.cobiz-sto-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 54px;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--public-accent);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.public-site a.cobiz-sto-banner__cta:hover,
.public-site a.cobiz-sto-banner__cta:focus {
  background: #d97c00;
  color: #ffffff;
  text-decoration: none;
}

.cobiz-sto-banner__stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cobiz-sto-banner__stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
}

.cobiz-sto-banner__stat-icon {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #e9eefc;
  color: var(--brand-primary);
  font-size: 1.5rem;
}

.cobiz-sto-banner__stat-content {
  min-width: 0;
}

.cobiz-sto-banner__stat-title {
  margin-bottom: 2px;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.cobiz-sto-banner__stat-desc {
  color: var(--public-graphite);
  font-size: 0.98rem;
  line-height: 1.3;
}

.cobiz-sto-banner__stat-content--amber .cobiz-sto-banner__stat-title {
  color: var(--public-accent);
}

.cobiz-sto-banner__stat-content--green .cobiz-sto-banner__stat-title {
  color: var(--public-success);
}

.cobiz-sto-banner__stat-content--blue .cobiz-sto-banner__stat-title {
  color: var(--brand-primary);
}

.cobiz-benefits-section {
  padding: 56px 0 64px;
  background: #eff1f3;
}

.cobiz-benefits-section__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.cobiz-benefits-section__title {
  margin: 0 0 36px;
  text-align: center;
  font-size: clamp(1.6rem, 2.5vw, 2.45rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.cobiz-benefits-section__brand {
  color: var(--public-black);
}

.cobiz-benefits-section__title-text {
  color: var(--public-accent);
}

.cobiz-benefit-card {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 100%;
  min-height: 196px;
  padding: 28px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.06);
}

.cobiz-benefit-card__media {
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: #f5f3ee;
}

.cobiz-benefit-card__media img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.cobiz-benefit-card__content {
  min-width: 0;
}

.cobiz-benefit-card__text {
  margin: 0;
  color: var(--public-graphite);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.45;
}

.cobiz-benefits-section__actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.cobiz-review-carousel {
  padding: 64px 0 72px;
  background: linear-gradient(135deg, #6f93d6 0%, #4f6fb0 100%);
}

.cobiz-review-carousel .carousel {
  max-width: 980px;
  margin: 0 auto;
}

.cobiz-review-card {
  min-height: 360px;
  padding: 44px 72px 72px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 54px rgba(10, 25, 80, 0.18);
}

.cobiz-review-card__header {
  margin-bottom: 18px;
}

.cobiz-review-card__name {
  margin-bottom: 6px;
  color: var(--public-black);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.cobiz-review-card__company {
  color: var(--brand-primary);
  font-size: 1.05rem;
  font-weight: 700;
}

.cobiz-review-card__text {
  margin: 0;
  color: var(--public-graphite);
  font-size: 1.18rem;
  line-height: 1.7;
}

.cobiz-review-card__stars {
  display: flex;
  gap: 8px;
  margin-top: 28px;
  color: #f6b800;
  font-size: 1.7rem;
  line-height: 1;
}

.cobiz-review-carousel__indicators {
  bottom: -54px;
}

.cobiz-review-carousel__indicators li {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.45);
  border: none;
}

.cobiz-review-carousel__indicators .active {
  background-color: #ffffff;
}

.cobiz-review-carousel__control {
  width: 56px;
  opacity: 1;
}

.cobiz-review-carousel__control .carousel-control-prev-icon,
.cobiz-review-carousel__control .carousel-control-next-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.22);
  background-size: 18px 18px;
}

.cobiz-whatsapp-contact {
  padding: 64px 0;
  background: #e0ecf8;
}

.cobiz-whatsapp-contact__inner {
  padding: 40px;
}

.cobiz-whatsapp-contact__intro {
  max-width: 420px;
}

.cobiz-whatsapp-contact__title {
  margin-bottom: 18px;
  color: var(--public-black);
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.cobiz-whatsapp-contact__text {
  margin: 0;
  color: var(--public-graphite);
  font-size: 1.08rem;
  line-height: 1.55;
}

.cobiz-whatsapp-contact__form {
  padding: 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.08);
}

.cobiz-whatsapp-contact__label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--public-black);
  font-size: 0.95rem;
  font-weight: 700;
}

.cobiz-whatsapp-contact__control {
  min-height: 54px;
  padding: 14px 18px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 16px;
  color: var(--public-graphite);
  font-size: 1rem;
}

.cobiz-whatsapp-contact__control:focus {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
}

.cobiz-whatsapp-contact__control--textarea {
  min-height: 150px;
  resize: vertical;
}

.cobiz-whatsapp-contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px;
  min-height: 56px;
  padding: 12px 28px;
  border-radius: 999px;
  background: #25D366;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}

.cobiz-whatsapp-contact__submit:hover,
.cobiz-whatsapp-contact__submit:focus {
  background: #1ebe57;
  color: #ffffff;
  text-decoration: none;
}

.cobiz-pricing-grid {
  padding: 64px 0;
  background: #f8f9fb;
}

.cobiz-pricing-grid__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cobiz-pricing-grid__header {
  margin-bottom: 28px;
  text-align: center;
}

.cobiz-pricing-grid__title {
  margin-bottom: 10px;
  color: var(--public-black);
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.cobiz-pricing-grid__text {
  max-width: 760px;
  margin: 0 auto;
  color: var(--public-graphite);
  font-size: 1.08rem;
  line-height: 1.55;
}

.cobiz-pricing-grid__table-wrap {
  overflow-x: auto;
  padding-bottom: 0;
  background: transparent;
  box-shadow: none;
}

.cobiz-pricing-grid__table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.06);
}

.cobiz-pricing-grid__table th,
.cobiz-pricing-grid__table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  vertical-align: middle;
}

.cobiz-pricing-grid__table thead th {
  background: #f5f3ee;
  color: var(--public-black);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

.cobiz-pricing-grid__table thead th:first-child {
  text-align: left;
}

.cobiz-pricing-grid__table tbody th {
  width: 260px;
  color: var(--public-black);
  font-size: 0.98rem;
  font-weight: 700;
  text-align: left;
  background: #fbfbfc;
}

.cobiz-pricing-grid__table tbody td {
  color: var(--public-graphite);
  font-size: 0.98rem;
  font-weight: 500;
  text-align: center;
}

.cobiz-pricing-grid__table .is-featured {
  background: rgba(240, 138, 0, 0.08);
}

.cobiz-pricing-grid__price-row th,
.cobiz-pricing-grid__price-row td {
  font-weight: 800;
}

.cobiz-pricing-grid__price-row td {
  color: var(--public-black);
}

.cobiz-pricing-grid__action-row th,
.cobiz-pricing-grid__action-row td {
  border-bottom: none;
}

.cobiz-pricing-grid__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--public-accent);
  color: var(--public-accent);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.cobiz-pricing-grid__action-btn:hover,
.cobiz-pricing-grid__action-btn:focus {
  background: var(--public-accent);
  border-color: var(--public-accent);
  color: #ffffff;
  text-decoration: none;
}

.cobiz-pricing-grid__action-btn--featured {
  background: var(--public-accent);
  color: #ffffff;
}

.cobiz-pricing-grid__action-btn--featured:hover,
.cobiz-pricing-grid__action-btn--featured:focus {
  background: #d97c00;
  border-color: #d97c00;
  color: #ffffff;
}

.cobiz-start-steps {
  padding: 56px 0 64px;
  background: #eff1f3;
}

.cobiz-start-steps__inner {
  max-width: 1160px;
  margin: 0 auto;
}

.cobiz-start-steps__title {
  margin-bottom: 28px;
  color: var(--public-black);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-align: center;
}

.cobiz-start-step-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 210px;
  padding: 26px 24px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.06);
}

.cobiz-start-step-card__number {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 16px;
  background: rgba(240, 138, 0, 0.12);
  color: var(--public-accent);
  font-size: 1.4rem;
  font-weight: 800;
}

.cobiz-start-step-card__text {
  margin: 0;
  color: var(--public-graphite);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}

.cobiz-start-step-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cobiz-start-step-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.public-site a.cobiz-start-step-card__action--primary {
  background: var(--public-accent);
  border: 1px solid var(--public-accent);
  color: #ffffff;
}

.public-site a.cobiz-start-step-card__action--primary:hover,
.public-site a.cobiz-start-step-card__action--primary:focus {
  background: #d97c00;
  border-color: #d97c00;
  color: #ffffff;
  text-decoration: none;
}

.public-site a.cobiz-start-step-card__action--whatsapp {
  background: #25D366;
  border: 1px solid #25D366;
  color: #ffffff;
}

.public-site a.cobiz-start-step-card__action--whatsapp:hover,
.public-site a.cobiz-start-step-card__action--whatsapp:focus {
  background: #1ebe57;
  border-color: #1ebe57;
  color: #ffffff;
  text-decoration: none;
}

.public-site a.cobiz-start-step-card__action--secondary {
  background: transparent;
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
}

.public-site a.cobiz-start-step-card__action--secondary:hover,
.public-site a.cobiz-start-step-card__action--secondary:focus {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  text-decoration: none;
}

.cobiz-footer {
  padding: 36px 0 40px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172554 42%, #1e3a8a 100%);
  color: rgba(255, 255, 255, 0.92);
}

.cobiz-footer__inner {
  padding: 36px;
  border-radius: 32px;
  background: transparent;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.cobiz-footer__hero {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  background: transparent;
}

.cobiz-footer__brand-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.public-site .cobiz-footer__title {
  margin: 0;
  color: var(--brand-accent, var(--public-accent));
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.cobiz-footer__legal-name {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.02rem;
  line-height: 1.6;
}

.cobiz-footer__bin {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 16px;
  background: rgba(245, 158, 11, 0.16);
  color: #fef3c7;
  font-size: 0.96rem;
  font-weight: 700;
}

.cobiz-footer__contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cobiz-footer__card {
  min-height: 150px;
  padding: 22px;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

.cobiz-footer__card--wide {
  grid-column: 1 / -1;
  min-height: 0;
}

.cobiz-footer__card-label {
  margin-bottom: 14px;
  color: rgba(191, 219, 254, 0.96);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cobiz-footer__card-value {
  display: inline-block;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}

.public-site .cobiz-footer__card-value:hover,
.public-site .cobiz-footer__card-value:focus {
  color: #ffffff;
  text-decoration: none;
}

.cobiz-footer__card-value--address {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.7;
}

.cobiz-footer__card-meta {
  margin-top: 10px;
  color: rgba(219, 234, 254, 0.82);
  font-size: 0.94rem;
  line-height: 1.55;
}

.public-site .cobiz-footer__card-meta:hover,
.public-site .cobiz-footer__card-meta:focus {
  color: #dbeafe;
}

.cobiz-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding-top: 24px;
}

.cobiz-footer__copyright {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.94rem;
}

.cobiz-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cobiz-footer__nav a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.public-site .cobiz-footer__nav a:hover,
.public-site .cobiz-footer__nav a:focus {
  color: #ffffff;
  text-decoration: none;
}

.cobiz-legal-page {
  padding: 36px 0 0;
  background:
    radial-gradient(circle at top right, rgba(240, 138, 0, 0.12), transparent 22%),
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.1), transparent 28%),
    linear-gradient(180deg, #f8f7f3 0%, #f3f1eb 100%);
}

.cobiz-legal-hero {
  padding: 28px 0 20px;
}

.cobiz-legal-hero__inner {
  max-width: 1040px;
}

.cobiz-legal-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(240, 138, 0, 0.14);
  color: #9a5a00;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cobiz-legal-hero__title {
  margin: 20px 0 14px;
  color: var(--public-black);
  font-size: clamp(2.3rem, 4vw, 4.2rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.cobiz-legal-hero__lead {
  max-width: 760px;
  margin: 0;
  color: var(--public-graphite);
  font-size: 1.1rem;
  line-height: 1.7;
}

.cobiz-legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.cobiz-legal-meta__item {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(17, 17, 17, 0.06);
  color: var(--public-graphite);
  font-size: 0.95rem;
  font-weight: 600;
}

.cobiz-legal-surface {
  padding: 20px 0 64px;
}

.cobiz-legal-surface__inner {
  max-width: 1040px;
  padding: 34px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(17, 17, 17, 0.06);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.08);
  backdrop-filter: blur(8px);
}

.cobiz-legal-content {
  color: var(--public-graphite);
  font-size: 1rem;
  line-height: 1.78;
}

.cobiz-legal-content p {
  margin-bottom: 1rem;
}

.cobiz-legal-content strong {
  color: var(--public-black);
}

.cobiz-legal-section + .cobiz-legal-section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.cobiz-legal-section__title {
  margin-bottom: 14px;
  color: var(--public-black);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.cobiz-legal-list {
  margin: 0;
  padding-left: 1.2rem;
}

.cobiz-legal-list li + li {
  margin-top: 0.55rem;
}

.cobiz-legal-note {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(240, 138, 0, 0.08);
  color: #6d4a16;
  font-size: 0.98rem;
}

@media (max-width: 991.98px) {
  .cobiz-public-header__inner {
    padding: 8px 0;
  }

  .cobiz-public-hero__title {
    margin-top: 48px;
  }

  .cobiz-login-help {
    max-width: none;
    padding: 8px 0 0;
  }

  .cobiz-sto-banner {
    padding-top: 24px;
  }

  .cobiz-sto-banner__inner {
    padding: 28px 24px;
  }

  .cobiz-sto-banner__lead {
    font-size: 1.1rem;
  }

  .cobiz-benefits-section {
    padding: 44px 0 52px;
  }

  .cobiz-benefit-card {
    min-height: 0;
    padding: 24px;
  }

  .cobiz-review-carousel {
    padding: 52px 0 64px;
  }

  .cobiz-review-card {
    min-height: 0;
    padding: 36px 56px 64px;
  }

  .cobiz-review-card__text {
    font-size: 1.05rem;
  }

  .cobiz-whatsapp-contact {
    padding: 52px 0;
  }

  .cobiz-whatsapp-contact__inner {
    padding: 12px 0 0;
  }

  .cobiz-pricing-grid {
    padding: 52px 0;
  }

  .cobiz-footer__inner {
    padding: 26px 22px;
    border-radius: 24px;
  }

  .cobiz-footer__hero {
    grid-template-columns: 1fr;
  }

  .cobiz-footer__contact-grid {
    grid-template-columns: 1fr;
  }

  .cobiz-footer__card,
  .cobiz-footer__card--wide {
    min-height: 0;
  }

  .cobiz-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .cobiz-legal-page {
    padding-top: 22px;
  }

  .cobiz-legal-surface__inner {
    padding: 26px 22px;
    border-radius: 24px;
  }

  .cobiz-start-steps {
    padding: 44px 0 52px;
  }

  .cobiz-start-step-card {
    min-height: 0;
  }
}

@media (max-width: 767.98px) {
  .cobiz-public-header__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cobiz-public-header__actions {
    justify-content: stretch;
    flex-direction: column;
  }

  .cobiz-public-header__action {
    width: 100%;
    min-width: 0;
  }

  .cobiz-login-help__item {
    padding: 12px;
    border-radius: 14px;
  }

  .cobiz-sto-banner__inner {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .cobiz-sto-banner__stat-item {
    align-items: flex-start;
  }

  .cobiz-benefits-section__title {
    margin-bottom: 28px;
  }

  .cobiz-benefit-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 18px;
    border-radius: 20px;
  }

  .cobiz-benefit-card__media {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
    border-radius: 18px;
  }

  .cobiz-benefit-card__media img {
    width: 46px;
    height: 46px;
  }

  .cobiz-benefit-card__text {
    font-size: 1rem;
  }

  .cobiz-review-carousel {
    padding: 40px 0 56px;
  }

  .cobiz-review-card {
    padding: 24px 22px 56px;
    border-radius: 22px;
  }

  .cobiz-review-card__text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .cobiz-review-card__stars {
    font-size: 1.45rem;
  }

  .cobiz-review-carousel__control {
    width: 42px;
  }

  .cobiz-review-carousel__control .carousel-control-prev-icon,
  .cobiz-review-carousel__control .carousel-control-next-icon {
    width: 40px;
    height: 40px;
  }

  .cobiz-whatsapp-contact {
    padding: 40px 0;
  }

  .cobiz-whatsapp-contact__form {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .cobiz-whatsapp-contact__submit {
    width: 100%;
    min-width: 0;
  }

  .cobiz-pricing-grid {
    padding: 40px 0;
  }

  .cobiz-pricing-grid__header {
    margin-bottom: 20px;
  }

  .cobiz-start-steps {
    padding: 40px 0;
  }

  .cobiz-start-step-card {
    padding: 22px 18px;
    border-radius: 20px;
  }
}
.autoservice-registration-logo {
  display: block;
  width: 72px;
  height: auto;
}