@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
  display: none;
}

body {
  line-height: 1;
}

menu, ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html, body {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

input, button {
  font: inherit;
}

.menu {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.menu li {
  overflow: hidden;
}
.menu li span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.menu .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
}
.menu .item.left-padding {
  padding-left: calc(var(--lh-md) + var(--space-lg) + var(--space-sm));
}
.menu .item.small {
  padding: var(--space-sm) var(--space-md);
}
.menu .item.small.left-padding {
  padding-left: calc(var(--lh-md) + var(--space-md) + var(--space-sm));
}
.menu .item span {
  line-height: var(--lh-md);
  color: var(--color-text);
  font-weight: var(--fz-md);
}
.menu .item .icon {
  font-size: 1.5rem;
  color: var(--color-inactive);
}
.menu .item .icon.accent {
  color: var(--color-primary);
}
.menu .item:hover {
  cursor: pointer;
  background: var(--color-hover);
}
.menu .item:hover .span {
  color: var(--color-text);
}
.menu .item.active {
  background: var(--color-primary);
}
.menu .item.active .icon {
  color: var(--color-text-button);
}
.menu .item.active span {
  color: var(--color-text-button);
}
.menu .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
}

.button {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  line-height: var(--lh-md);
  padding: 0 var(--space-sm);
  height: var(--ht-md);
  color: var(--color-text-button);
  font-size: var(--fz-md);
  /* Buttons */
  /* Outline-buttons */
  /* Round-buttons */
  /* Action-buttons */
}
.button .icon {
  font-size: 1.5rem;
}
.button span {
  padding: 0 var(--space-xs);
}
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-secondary);
  color: var(--color-text-button);
}
.button.primary {
  background: var(--color-primary);
}
.button.primary:hover {
  background-color: var(--color-accent);
}
.button.secondary {
  background: var(--color-inactive);
}
.button.secondary:hover {
  background-color: var(--color-inactive-background);
}
.button.success {
  background: var(--color-success);
}
.button.success:hover {
  background-color: var(--color-success-background);
}
.button.error {
  background: var(--color-error);
}
.button.error:hover {
  background-color: var(--color-error-background);
}
.button.warning {
  background: var(--color-warning);
}
.button.warning:hover {
  background-color: var(--color-warning-background);
}
.button.info {
  background: var(--color-blue);
}
.button.info:hover {
  background-color: var(--color-blue-background);
}
.button.background {
  background: var(--color-block);
}
.button.background:hover {
  background-color: var(--color-secondary);
}
.button.dark {
  background: var(--color-border);
}
.button.dark:hover {
  background-color: var(--color-border-hover);
}
.button.transparent {
  background: transparent;
  color: var(--color-text);
}
.button.transparent:hover {
  background-color: transparent;
}
.button.link {
  background: none;
  color: var(--color-blue);
  text-decoration: underline var(--color-blue);
}
.button.link:hover {
  color: var(--color-blue-background);
  text-decoration: underline var(--color-blue-background);
}
.button.link:disabled {
  color: var(--color-inactive);
  text-decoration: underline var(--color-inactive);
}
.button.outline.primary {
  background: none;
  color: var(--color-primary);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.outline.primary:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.button.outline.primary:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.outline.primary:active {
  background-color: var(--color-hover);
}
.button.outline.secondary {
  background: none;
  color: var(--color-inactive);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.outline.secondary:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.button.outline.secondary:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.outline.secondary:active {
  background-color: var(--color-hover);
}
.button.outline.success {
  background: none;
  color: var(--color-success);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.outline.success:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.button.outline.success:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.outline.success:active {
  background-color: var(--color-hover);
}
.button.outline.error {
  background: none;
  color: var(--color-error);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.outline.error:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.button.outline.error:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.outline.error:active {
  background-color: var(--color-hover);
}
.button.outline.warning {
  background: none;
  color: var(--color-warning);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.outline.warning:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.button.outline.warning:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.outline.warning:active {
  background-color: var(--color-hover);
}
.button.outline.info {
  background: none;
  color: var(--color-blue);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.outline.info:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.button.outline.info:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.outline.info:active {
  background-color: var(--color-hover);
}
.button.outline-link {
  background: none;
  color: var(--color-blue);
  text-decoration: underline var(--color-blue);
  border: var(--border-button) solid var(--color-border);
}
.button.outline-link:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.button.outline-link:disabled {
  color: var(--color-inactive);
  border: var(--border-button) solid var(--color-border);
}
.button.outline-link:active {
  background-color: var(--color-hover);
}
.button.round {
  border-radius: calc(var(--fz-lg) + var(--space-sm) * 2);
}
.button.round:disabled {
  opacity: 1;
  cursor: not-allowed;
  background-color: var(--color-secondary);
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.button.action.primary {
  color: var(--color-primary);
  background-color: var(--color-primary-lite);
  border: var(--border-button) solid var(--color-primary);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.action.primary:hover {
  background-color: var(--color-primary-lite-hover);
}
.button.action.primary:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.action.primary:active {
  background-color: var(--color-primary-lite-hover);
}
.button.action.secondary {
  color: var(--color-inactive);
  background-color: var(--color-inactive-lite);
  border: var(--border-button) solid var(--color-inactive);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.action.secondary:hover {
  background-color: var(--color-inactive-lite-hover);
}
.button.action.secondary:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.action.secondary:active {
  background-color: var(--color-inactive-lite-hover);
}
.button.action.success {
  color: var(--color-success);
  background-color: var(--color-success-lite);
  border: var(--border-button) solid var(--color-success);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.action.success:hover {
  background-color: var(--color-success-lite-hover);
}
.button.action.success:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.action.success:active {
  background-color: var(--color-success-lite-hover);
}
.button.action.error {
  color: var(--color-error);
  background-color: var(--color-error-lite);
  border: var(--border-button) solid var(--color-error);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.action.error:hover {
  background-color: var(--color-error-lite-hover);
}
.button.action.error:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.action.error:active {
  background-color: var(--color-error-lite-hover);
}
.button.action.warning {
  color: var(--color-warning);
  background-color: var(--color-warning-lite);
  border: var(--border-button) solid var(--color-warning);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.action.warning:hover {
  background-color: var(--color-warning-lite-hover);
}
.button.action.warning:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.action.warning:active {
  background-color: var(--color-warning-lite-hover);
}
.button.action.info {
  color: var(--color-blue);
  background-color: var(--color-blue-lite);
  border: var(--border-button) solid var(--color-blue);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.action.info:hover {
  background-color: var(--color-blue-lite-hover);
}
.button.action.info:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.action.info:active {
  background-color: var(--color-blue-lite-hover);
}
.button.action.pink {
  color: var(--color-pink);
  background-color: var(--color-pink-lite);
  border: var(--border-button) solid var(--color-pink);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.action.pink:hover {
  background-color: var(--color-pink-lite-hover);
}
.button.action.pink:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.action.pink:active {
  background-color: var(--color-pink-lite-hover);
}
.button.action.cyan {
  color: var(--color-cyan);
  background-color: var(--color-cyan-lite);
  border: var(--border-button) solid var(--color-cyan);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.button.action.cyan:hover {
  background-color: var(--color-cyan-lite-hover);
}
.button.action.cyan:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.button.action.cyan:active {
  background-color: var(--color-cyan-lite-hover);
}

.button-group {
  display: flex;
}
.button-group .button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.button-group .button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button-group .button:not(:first-child):not(:last-child) {
  border-radius: 0; /* Убираем скругления у средней кнопки */
  border-right: 0;
}

.input-container {
  position: relative;
  width: 100%;
  height: var(--ht-md);
}
.input-container.success {
  height: calc(var(--ht-md) * 1.5);
}
.input-container label {
  position: absolute;
  top: calc(var(--lh-md) / 2);
  left: calc(var(--space-md) / 2);
  background: var(--color-block);
  padding: 0 var(--space-xs);
  font-size: var(--fz-md);
  color: var(--color-inactive);
  transition: all 0.3s ease;
  pointer-events: none;
  width: 95%;
}
.input-container .icon {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  font-size: 1.5rem;
  color: var(--color-inactive);
  pointer-events: none;
}
.input-container .icon:hover {
  color: var(--color-primary);
  pointer-events: none;
}
.input-container input, .input-container input {
  padding-right: var(--space-md);
}
.input-container:has(.icon) input {
  padding-right: 40px;
}
.input-container:has(.icon) input[type=date], .input-container:has(.icon) input[type=time] {
  padding-right: var(--space-md);
}
.input-container_info {
  position: relative;
  top: var(--space-xs);
  padding-left: var(--space-md);
}

input[type=text], input[type=number], input[type=password], input[type=date], input[type=time], input[type=email], textarea, select {
  appearance: none;
  width: 100%;
  height: var(--ht-md);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  border-radius: var(--radius);
  background-color: var(--color-block);
  border: var(--border-base) solid var(--color-border);
  font-size: var(--fz-md);
  color: var(--color-text);
  outline: none;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus, input[type=date]:focus, input[type=time]:focus, input[type=email]:focus, textarea:focus, select:focus {
  border: var(--border-base) solid var(--color-primary);
}
input[type=text]:focus + label, input[type=text]:not(:placeholder-shown) + label, input[type=number]:focus + label, input[type=number]:not(:placeholder-shown) + label, input[type=password]:focus + label, input[type=password]:not(:placeholder-shown) + label, input[type=date]:focus + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:focus + label, input[type=time]:not(:placeholder-shown) + label, input[type=email]:focus + label, input[type=email]:not(:placeholder-shown) + label, textarea:focus + label, textarea:not(:placeholder-shown) + label, select:focus + label, select:not(:placeholder-shown) + label {
  top: calc(var(--fz-sm) * -1 / 2);
  left: calc(var(--space-md) / 2);
  font-size: var(--fz-sm);
  color: var(--color-inactive);
  width: auto;
}
input[type=text]:focus + label, input[type=text]:active, input[type=number]:focus + label, input[type=number]:active, input[type=password]:focus + label, input[type=password]:active, input[type=date]:focus + label, input[type=date]:active, input[type=time]:focus + label, input[type=time]:active, input[type=email]:focus + label, input[type=email]:active, textarea:focus + label, textarea:active, select:focus + label, select:active {
  color: var(--color-primary);
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  width: 32px;
  height: 32px;
}

/* Делаем прозрачной системные иконки*/
input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input[type=time]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

input:disabled + label {
  color: color-mix(in srgb, var(--color-inactive) 40%, transparent) !important;
  cursor: not-allowed;
  pointer-events: none;
}

.input-textarea {
  position: relative;
  width: 100%;
}
.input-textarea label {
  position: absolute;
  top: calc(var(--lh-md) / 2);
  left: calc(var(--space-md) / 2);
  background: var(--color-block);
  padding: 0 var(--space-xs);
  font-size: var(--fz-md);
  color: var(--color-inactive);
  transition: all 0.3s ease;
}

textarea {
  height: calc(var(--ht-md) * 2);
  padding-top: var(--space-md);
}

textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

textarea:disabled + label {
  color: color-mix(in srgb, var(--color-inactive) 40%, transparent) !important;
  cursor: not-allowed;
  pointer-events: none;
}

.input-container.success input {
  border-color: var(--color-success);
}
.input-container.success input:focus + label, .input-container.success input:not(:placeholder-shown) + label {
  color: var(--color-success);
}
.input-container.success input:focus + label, .input-container.success input:active {
  color: var(--color-success);
}

.input-container.success small {
  color: var(--color-success);
}

.input-container.success .icon {
  color: var(--color-success);
}

.input-container.error input {
  border-color: var(--color-error);
}
.input-container.error input:focus + label, .input-container.error input:not(:placeholder-shown) + label {
  color: var(--color-error);
}
.input-container.error input:focus + label, .input-container.error input:active {
  color: var(--color-error);
}

.input-container.error small {
  color: var(--color-error);
}

.input-container.error .icon {
  color: var(--color-error);
}

/* ""Select" */
.input-container.select .icon {
  color: var(--color-inactive);
}

select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

select:disabled + label {
  color: color-mix(in srgb, var(--color-inactive) 40%, transparent) !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* Базовые стили для уведомлений */
.notification {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-radius: var(--radius);
  padding: var(--space-lg);
  font-weight: var(--fz-md);
  line-height: var(--lh-md);
  color: var(--color-text-button);
  background-color: var(--color-secondary);
  /* Стили для outline */
}
.notification.error {
  background-color: var(--color-error);
}
.notification.success {
  background-color: var(--color-success);
}
.notification.warning {
  background-color: var(--color-warning);
}
.notification .icon {
  font-size: 1.5rem;
}
.notification.outline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-radius: var(--radius);
  padding: var(--space-lg);
  font-weight: var(--fz-md);
  line-height: var(--lh-md);
  color: var(--color-text-button);
  border: var(--border-base) solid var(--color-border);
  padding: calc(var(--space-lg) - var(--border-base));
  color: var(--color-text-button);
}
.notification.outline.error {
  color: var(--color-error);
  background-color: var(--color-secondary);
  border-color: var(--color-error);
}
.notification.outline.success {
  color: var(--color-success);
  background-color: var(--color-secondary);
  border-color: var(--color-success);
}
.notification.outline.warning {
  color: var(--color-warning);
  background-color: var(--color-secondary);
  border-color: var(--color-warning);
}
.notification.small {
  padding: var(--space-md);
}

.switch {
  display: inline-flex;
  align-items: center;
  width: 2.5rem; /* 40px */
  height: 1.5rem; /* 24px */
  border-radius: 50px;
  background: var(--color-inactive);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}

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

/* Ползунок */
.switch span {
  position: absolute;
  top: 3px;
  left: 2px;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-text-button);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, background 0.2s;
}

/*  Обычный активный стиль */
.switch:has(input:checked) {
  background: var(--color-primary);
}

.switch:has(input:checked) span {
  background: var(--color-text-button);
}

.switch input:checked + span {
  transform: translateX(1.1rem);
}

/*  Стили для .dual */
.switch.dual {
  background: var(--color-inactive);
}

.switch.dual span {
  background: var(--color-primary);
}

.switch.dual:has(input:checked) {
  background: var(--color-inactive);
}

.switch.dual:has(input:checked) span {
  background: var(--color-primary);
}

/* Indeterminate state */
.switch:has(input:indeterminate) {
  background: var(--color-secondary);
}

.switch:has(input:indeterminate) span {
  transform: translateX(0.55rem); /* Middle position */
  background: var(--color-text-button);
}

/* Dual mode indeterminate */
.switch.dual:has(input:indeterminate) {
  background: var(--color-secondary);
}

.switch.dual:has(input:indeterminate) span {
  transform: translateX(0.55rem); /* Middle position */
  background: var(--color-primary);
}

/* Disabled */
.switch:has(input:disabled) {
  filter: grayscale(70%);
  cursor: not-allowed;
}

.switch:has(input:disabled) span {
  background: #eee;
}

h1 {
  font-size: var(--fz-xxxl);
}

h2 {
  font-size: var(--fz-xxl);
}

h3 {
  font-size: var(--fz-xl);
}

h4 {
  font-size: var(--fz-lg);
}

p {
  font-size: var(--fz-md);
}

small {
  font-size: var(--fz-sm);
}

label {
  font-size: var(--fz-md);
}

.second {
  color: var(--color-inactive);
}

.bold {
  font-weight: bold;
}

.monospace {
  font-family: "Roboto Mono", monospace;
  font-size: 0.9rem;
}

.fz-xxs {
  font-size: calc(var(--base-size) * 0.625) !important;
}

.fz-xs {
  font-size: calc(var(--base-size) * 0.75) !important;
}

.fz-sm {
  font-size: calc(var(--base-size) * 0.876) !important;
}

.fz-md {
  font-size: var(--base-size) !important;
}

.fz-lg {
  font-size: calc(var(--fz-md) * var(--major-third)) !important;
}

.fz-xl {
  font-size: calc(var(--fz-lg) * var(--major-third)) !important;
}

.fz-xxl {
  font-size: calc(var(--fz-xl) * var(--major-third)) !important;
}

.fz-xxxl {
  font-size: calc(var(--fz-xxl) * var(--major-third)) !important;
}

.radio-container {
  display: flex;
  align-items: center;
  position: sticky;
  padding-left: 30px;
  margin-top: 2px;
  margin-bottom: 2px;
  cursor: pointer;
  font-size: var(--fz-md);
  user-select: none;
}

.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-custom {
  position: absolute;
  top: 50%;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--color-block);
  border-radius: 50%;
  border: 1px solid var(--color-border);
  transform: translateY(-50%);
}

.radio-container input:checked ~ .radio-custom {
  background-color: var(--color-block);
  border-color: var(--color-primary);
}

.radio-container input:checked ~ .radio-custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.radio-container:hover input ~ .radio-custom {
  background-color: var(--color-block);
}

.radio-container input:focus ~ .radio-custom {
  box-shadow: 0 0 5px var(--color-primary);
}

.radio-container.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.radio-container.disabled:hover input ~ .radio-custom {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-block);
  border-color: var(--color-border);
  pointer-events: none; /* Блокирует все события мыши */
}

.radio-container.disabled input:checked ~ .radio-custom {
  opacity: 0.5;
  border-color: var(--color-border);
}

.radio-container.disabled input:checked ~ .radio-custom::after {
  opacity: 0.5;
  background-color: var(--color-block);
}

.radio-container.disabled input:focus ~ .radio-custom {
  box-shadow: none;
}

::-webkit-scrollbar {
  width: 12px;
}

/* Трек с отступами */
::-webkit-scrollbar-track {
  background: var(--color-block);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-inactive);
  border-radius: 6px;
  border: 2px solid transparent; /* Добавляем отступы для ползунка */
  background-clip: content-box;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color-inactive-background);
  border: 2px solid transparent;
  background-clip: content-box;
}

.divider {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}
.divider .icon {
  color: var(--color-inactive);
  font-size: var(--fz-xl);
}

.divider::after {
  content: "";
  flex-grow: 1;
  height: 0;
  border-top: 1px solid var(--color-border);
}

.divider::before {
  content: "";
  height: 0;
  border-top: 1px solid var(--color-border);
  flex-grow: 0;
}

.divider i + span {
  padding-left: var(--space-xs); /* Убираем отступ слева для центрального выравнивания */
}

.divider span {
  color: var(--color-inactive);
  font-size: var(--fz-sm);
  line-height: var(--lh-md);
  white-space: nowrap;
  padding-right: var(--space-md); /* Основной отступ */
}

.divider.center i + span {
  padding-left: var(--space-xs); /* Убираем отступ слева для центрального выравнивания */
}

.divider.center {
  justify-content: center;
}

.divider.center span {
  padding: 0 var(--space-md); /* Отступы для центрального выравнивания */
}

.divider.center::before,
.divider.center::after {
  flex-grow: 1;
}

.divider.right span + i {
  padding-right: 0; /* Убираем отступ справа для правого выравнивания */
}

.divider.right {
  justify-content: flex-end;
}

.divider.right span {
  padding-right: var(--space-xs);
  padding-left: var(--space-md); /* Отступ слева для правого выравнивания */
}

.divider.right::before {
  flex-grow: 1;
}

.divider.right::after {
  flex-grow: 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  background: var(--color-block);
  padding: var(--space-xl);
  border-radius: var(--radius);
  border: var(--border-base) solid var(--color-border);
}
.card span {
  font-size: var(--fz-md);
  line-height: var(--lh-md);
}
.card.small {
  padding: var(--space-lg);
  gap: var(--space-md);
}
.card.large {
  padding: var(--space-xxl);
}
.card.tittle {
  padding: 0;
  border: none;
}
.card.body {
  padding: 0;
  border: none;
}
.card.footer {
  padding: 0;
  border: none;
}

.tag {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  border: none;
  border-radius: var(--space-xxs);
  padding: 0 var(--space-sm);
  color: var(--color-text-button);
  font-size: var(--fz-sm);
  line-height: var(--lh-md);
  white-space: nowrap;
  /* Tag */
  /* Borderless-tag */
}
.tag .icon {
  font-size: var(--fz-sm);
}
.tag span {
  padding: 0 var(--space-xs);
}
.tag.primary {
  background: var(--color-primary);
}
.tag.secondary {
  background: var(--color-inactive);
}
.tag.success {
  background: var(--color-success);
}
.tag.error {
  background: var(--color-error);
}
.tag.warning {
  background: var(--color-warning);
}
.tag.info {
  background: var(--color-blue);
}
.tag.pink {
  background: var(--color-pink);
}
.tag.cyan {
  background: var(--color-cyan);
}
.tag.dark {
  background: var(--color-block);
  color: var(--color-text);
}
.tag.transparent {
  background: transparent;
}
.tag.disabled {
  opacity: 0.5;
}
.tag.hover:hover {
  cursor: pointer;
}
.tag.borderless.primary {
  background: var(--color-primary-lite);
  color: var(--color-primary);
}
.tag.borderless.secondary {
  background: var(--color-inactive-lite);
  color: var(--color-inactive);
}
.tag.borderless.success {
  background: var(--color-success-lite);
  color: var(--color-success);
}
.tag.borderless.error {
  background: var(--color-error-lite);
  color: var(--color-error);
}
.tag.borderless.warning {
  background: var(--color-warning-lite);
  color: var(--color-warning);
}
.tag.borderless.info {
  background: var(--color-blue-lite);
  color: var(--color-blue);
}
.tag.borderless.pink {
  background: var(--color-pink-lite);
  color: var(--color-pink);
}
.tag.borderless.cyan {
  background: var(--color-cyan-lite);
  color: var(--color-cyan);
}
.tag.borderless.dark {
  background: transparent;
  color: var(--color-text);
}

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

.tooltip {
  position: absolute;
  background: var(--color-secondary);
  color: var(--color-text);
  padding: var(--space-md);
  font-size: var(--fz-sm);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: var(--shadow);
  white-space: nowrap;
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

.tooltip.top {
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.bottom {
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.left-top {
  right: 105%;
  top: 0;
  transform: translateY(0);
}

.tooltip.left-center {
  right: 105%;
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.left-bottom {
  right: 105%;
  bottom: 0;
  transform: translateY(0);
}

.tooltip.right-top {
  left: 105%;
  top: 0;
  transform: translateY(0);
}

.tooltip.right-center {
  left: 105%;
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.right-bottom {
  left: 105%;
  bottom: 0;
  transform: translateY(0);
}

/* Базовые стили для контейнера */
.checkbox-container {
  display: flex; /* Используем flexbox для выравнивания */
  align-items: center; /* Выравниваем элементы по центру по вертикали */
  position: relative;
  padding-left: 30px; /* Отступ для кастомного checkbox */
  cursor: pointer;
  font-size: var(--fz-md);
  user-select: none;
  height: 20px; /* Высота контейнера равна высоте checkbox */
}

/* Скрываем стандартный checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Создаем кастомный checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--color-block);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  transition: background-color 0.3s, border-color 0.3s;
}

/* При наведении на контейнер */
.checkbox-container:hover input ~ .checkmark {
  background-color: var(--color-hover);
}

/* Когда checkbox выбран */
.checkbox-container input:checked ~ .checkmark {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Создаем галочку (скрытую по умолчанию) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Показываем галочку, когда checkbox выбран */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Стили для отключенного checkbox */
.checkbox-container input:disabled ~ .checkmark {
  background-color: var(--color-block);
  border: 1px solid var(--color-border);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Отключаем hover для disabled */
.checkbox-container:hover input:disabled ~ .checkmark {
  background-color: var(--color-block);
  border: 1px solid var(--color-border);
  opacity: 0.7;
}

/* Стиль текста рядом с отключенным checkbox */
.checkbox-container:has(input:disabled) {
  color: var(--color-inactive);
  cursor: not-allowed;
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* Модификатор .small */
  /* Модификатор .large */
  /* Модификатор .outline */
}
.pagination a, .pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text);
  border: none;
  padding: var(--space-xs);
  font-size: var(--fz-xs);
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}
.pagination a span, .pagination button span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: var(--lh-md);
  height: var(--lh-md);
}
.pagination a:hover, .pagination button:hover {
  color: var(--color-text-button);
  background: var(--color-border-hover);
}
.pagination a:disabled, .pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination a.active, .pagination button.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.pagination.small a, .pagination.small button {
  padding: var(--space-xxs);
  font-size: var(--fz-xs);
}
.pagination.large a, .pagination.large button {
  padding: var(--space-sm);
  font-size: var(--fz-md);
}
.pagination.outline {
  padding: 0;
  border: none;
  /* Модификатор .small внутри .outline */
  /* Модификатор .large внутри .outline */
}
.pagination.outline a, .pagination.outline button {
  border: var(--border-button) solid var(--color-border); /* Обводка для кнопок */
  padding: calc(var(--space-xs) - var(--border-button)); /* Отступ по умолчанию с вычетом 1px */
}
.pagination.outline a:hover, .pagination.outline button:hover {
  border: var(--border-button) solid var(--color-border-hover);
  background: none;
  color: var(--color-text);
}
.pagination.outline a.active, .pagination.outline button.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.pagination.outline.small a, .pagination.outline.small button {
  padding: calc(var(--space-xxs) - var(--border-button)); /* Отступ для small с вычетом 1px */
}
.pagination.outline.large a, .pagination.outline.large button {
  padding: calc(var(--space-sm) - var(--border-button)); /* Отступ для large с вычетом 1px */
}

.pagination .icon {
  font-size: var(--size-normal);
}

/* Общие стили для таблицы */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table .icon {
  font-size: var(--size-normal);
}

/* Стили для заголовка таблицы */
.table thead th {
  background-color: var(--color-block);
  color: var(--color-inactive);
  letter-spacing: 1px;
  text-align: left;
  font-size: var(--fz-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-lite);
  vertical-align: middle;
}

/* Стили для строк таблицы */
.table tbody td {
  height: var(--ht-md);
  border-bottom: 1px solid var(--color-border-lite);
  vertical-align: middle;
}

/* Стили для четных строк */
.table tbody tr:nth-child(even) {
  background-color: var(--color-block);
}

/* Стили для строк при наведении */
.table tbody tr:hover {
  background-color: var(--color-hover);
}

/* Класс normal: средние отступы и высота строк */
.table thead th,
.table tbody td {
  padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) - 1px);
  height: var(--ht-md); /* Высота строк */
}

/* Класс small: маленькие отступы и высота строк */
.table.small thead th,
.table.small tbody td {
  padding: var(--space-md) var(--space-md) calc(var(--space-md) - 1px);
  height: var(--ht-md);
}

/* Основные стили для dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Стили для кнопки */
.dropdown-toggle {
  background-color: var(--color-primary);
  color: var(--color-text-button);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fz-md);
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
}

.dropdown-toggle:hover {
  background-color: var(--color-accent);
}

/* Стили для выпадающего меню */
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: var(--color-secondary);
  min-width: 100%;
  box-shadow: var(--shadow);
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
}

.dropdown-item {
  color: var(--color-text);
  padding: var(--space-md);
  text-decoration: none;
  display: block;
  font-size: var(--fz-sm);
}
.dropdown-item.active {
  background-color: var(--color-primary);
  color: var(--color-text-button);
}

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

/* Показываем меню при наведении или фокусе */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* UI Dropdown Component Styles */
.dropdown-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  background: var(--color-background, #fff);
  cursor: pointer;
  min-height: 44px;
}

.dropdown-trigger:hover {
  border-color: var(--color-primary, #007bff);
}

.dropdown-value {
  color: var(--color-text, #333);
}

.dropdown-value.placeholder {
  color: var(--color-text-secondary, #999);
}

.dropdown-icon {
  transition: transform 0.2s ease;
  position: absolute;
  right: 5px;
  z-index: 2;
  opacity: 0.5;
}

.dropdown-icon.open {
  transform: rotate(180deg);
}

.dropdown-label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-block, #fff);
  padding: 0 4px;
  color: var(--color-secondary, #999);
  font-size: 14px;
  pointer-events: none;
  transition: all 0.2s ease;
  width: 95%;
}

.dropdown-label.active {
  top: 0;
  font-size: 12px;
  color: var(--color-primary, #007bff);
  width: auto;
}

.dropdown-menu.open {
  display: block !important;
  max-height: 300px;
  overflow: auto;
}

.dropdown-container.open .dropdown-menu {
  display: block !important;
}

.search-container {
  padding: 8px;
  border-bottom: 1px solid var(--color-border, #eee);
}

.search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border, #ccc);
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.search-input:focus {
  border-color: var(--color-primary, #007bff);
}

.dropdown-option {
  padding: 12px 16px;
  cursor: pointer;
  color: var(--color-text, #333);
  border-bottom: 1px solid var(--color-border, #eee);
}

.dropdown-option:last-child {
  border-bottom: none;
}

.dropdown-option.active:not(.selected) {
  background: var(--color-hover);
}

.dropdown-option:hover {
  background: var(--color-hover, #f5f5f5);
}

.dropdown-option.selected {
  background: var(--color-primary, #007bff);
  color: var(--color-text-button, #fff);
}

.dropdown-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  border: 1px solid var(--color-border, #ccc);
  border-radius: 50px;
  background: var(--color-secondary) !important;
  padding: 5px;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle label {
  padding: 0.5rem 0.5rem;
  cursor: pointer;
  user-select: none;
  color: var(--color-text, #333);
  background: var(--color-secondary, #fff);
  font-size: var(--fz-sm, 0.875rem);
  border-radius: 15px;
}

.toggle input:checked + label {
  background: var(--color-primary);
  color: var(--color-text-button, #fff);
  border-color: var(--color-primary);
}

.toggle label.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fz-sm);
  line-height: var(--lh-md);
}
.breadcrumb .icon {
  font-size: var(--size-normal);
  color: var(--color-inactive);
}

.breadcrumb-item {
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.3s ease;
}
.breadcrumb-item:hover {
  color: var(--color-primary);
}
.breadcrumb-item.active {
  color: var(--color-inactive);
  pointer-events: none;
}

.breadcrumb-divider {
  margin: 0 var(--space-md);
  color: var(--color-border);
}

.units {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  cursor: pointer;
  border: none;
  border-radius: 20px;
  width: 80px;
  line-height: var(--lh-md);
  padding: var(--space-xxs) var(--space-sm);
  color: var(--color-text);
  font-size: var(--fz-sm);
  /* Outline-buttons */
}
.units .icon {
  font-size: var(--fz-lg);
}
.units span {
  padding: 0 var(--space-xs);
}
.units:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-secondary);
  color: var(--color-text);
}
.units.primary {
  background: var(--color-primary-lite);
}
.units.primary:hover {
  background-color: var(--color-primary-lite-hover);
}
.units.secondary {
  background: var(--color-inactive-lite);
}
.units.secondary:hover {
  background-color: var(--color-inactive-lite-hover);
}
.units.success {
  background: var(--color-success-lite);
}
.units.success:hover {
  background-color: var(--color-success-lite-hover);
}
.units.error {
  background: var(--color-error-lite);
}
.units.error:hover {
  background-color: var(--color-error-lite-hover);
}
.units.warning {
  background: var(--color-warning-lite);
}
.units.warning:hover {
  background-color: var(--color-warning-lite-hover);
}
.units.blue {
  background: var(--color-blue-lite);
}
.units.blue:hover {
  background-color: var(--color-blue-lite-hover);
}
.units.pink {
  background: var(--color-pink-lite);
}
.units.pink:hover {
  background-color: var(--color-pink-lite-hover);
}
.units.cyan {
  background: var(--color-cyan-lite);
}
.units.cyan:hover {
  background-color: var(--color-cyan-lite-hover);
}
.units.outline.primary {
  background: none;
  color: var(--color-primary);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.units.outline.primary:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.units.outline.primary:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.units.outline.primary:active {
  background-color: var(--color-hover);
}
.units.outline.secondary {
  background: none;
  color: var(--color-inactive);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.units.outline.secondary:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.units.outline.secondary:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.units.outline.secondary:active {
  background-color: var(--color-hover);
}
.units.outline.success {
  background: none;
  color: var(--color-success);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.units.outline.success:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.units.outline.success:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.units.outline.success:active {
  background-color: var(--color-hover);
}
.units.outline.error {
  background: none;
  color: var(--color-error);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.units.outline.error:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.units.outline.error:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.units.outline.error:active {
  background-color: var(--color-hover);
}
.units.outline.warning {
  background: none;
  color: var(--color-warning);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.units.outline.warning:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.units.outline.warning:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.units.outline.warning:active {
  background-color: var(--color-hover);
}
.units.outline.blue {
  background: none;
  color: var(--color-blue);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.units.outline.blue:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.units.outline.blue:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.units.outline.blue:active {
  background-color: var(--color-hover);
}
.units.outline.pink {
  background: none;
  color: var(--color-pink);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.units.outline.pink:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.units.outline.pink:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.units.outline.pink:active {
  background-color: var(--color-hover);
}
.units.outline.cyan {
  background: none;
  color: var(--color-cyan);
  border: var(--border-button) solid var(--color-border);
  padding: 0 calc(var(--space-sm) - var(--border-button));
}
.units.outline.cyan:hover {
  border: var(--border-button) solid var(--color-border-hover);
}
.units.outline.cyan:disabled {
  color: var(--color-inactive);
  border-color: var(--color-border);
}
.units.outline.cyan:active {
  background-color: var(--color-hover);
}

.thee-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  box-sizing: border-box;
}
.thee-group.small {
  gap: var(--space-xxs);
}
.thee-group.medium {
  gap: var(--space-xs);
}
.thee-group.large {
  gap: var(--space-sm);
}
.thee {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--space-md) var(--space-xs);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.small .thee {
  padding: var(--space-xs) var(--space-xs);
}
.medium .thee {
  padding: var(--space-sm) var(--space-xs);
}
.large .thee {
  padding: var(--space-md) var(--space-xs);
}
.thee[data-level="1"]:not([data-icon=none]) {
  padding-left: calc(var(--space-xs) * 2);
}
.thee[data-level="2"]:not([data-icon=none]) {
  padding-left: calc(var(--space-xs) * 3);
}
.thee[data-level="3"]:not([data-icon=none]) {
  padding-left: calc(var(--space-xs) * 4);
}
.thee[data-level="4"]:not([data-icon=none]) {
  padding-left: calc(var(--space-xs) * 5);
}
.thee[data-level="5"]:not([data-icon=none]) {
  padding-left: calc(var(--space-xs) * 6);
}
.thee[data-level="1"][data-icon=none] {
  padding-left: calc(var(--space-xs) * 9);
}
.thee[data-level="2"][data-icon=none] {
  padding-left: calc(var(--space-xs) * 10);
}
.thee[data-level="3"][data-icon=none] {
  padding-left: calc(var(--space-xs) * 11);
}
.thee[data-level="4"][data-icon=none] {
  padding-left: calc(var(--space-xs) * 12);
}
.thee[data-level="5"][data-icon=none] {
  padding-left: calc(var(--space-xs) * 13);
}
.thee[data-icon=single] {
  gap: var(--space-xs);
}
.thee[data-icon=double] {
  gap: var(--space-xs);
}
.thee[data-icon=double] .thee-icon:first-child {
  margin-right: calc(-1 * var(--space-xs));
}
.thee[data-icon=none] {
  padding-left: var(--space-xl);
}
.thee:hover {
  background: var(--color-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.thee:active {
  background: var(--color-primary);
}
.thee-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 1.5em;
}
.thee-icon:active {
  color: var(--color-text-button);
}
.thee-text {
  line-height: var(--lh-md);
  color: var(--color-text);
  font-size: var(--fz-md);
}
.thee-text:active {
  color: var(--color-text-button);
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  border-radius: var(--radius);
  font-size: var(--fz-md);
  cursor: pointer;
  box-sizing: border-box;
}
.tab .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-normal);
}
.tab .icon-close {
  opacity: 0.7;
}
.tab .icon-close:hover {
  opacity: 1;
}
.tab.small {
  padding: var(--space-xs) var(--space-lg);
}
.tab.medium {
  padding: var(--space-sm) var(--space-lg);
}
.tab.large {
  padding: var(--space-md) var(--space-lg);
}
.tab.filled {
  background: var(--color-inactive-lite);
  color: var(--color-text);
  border: none;
}
.tab.filled:hover {
  background: var(--color-inactive-lite-hover);
}
.tab.filled:active {
  background: var(--color-primary);
  color: var(--color-text-button);
}
.tab.outline {
  background: var(--color-inactive-lite);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.tab.outline.left {
  border-left: 1px solid var(--color-border);
}
.tab.outline.center {
  border-left: 1px solid var(--color-border);
}
.tab.outline.right {
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.tab.outline:hover {
  background: var(--color-inactive-lite-hover);
}
.tab.outline:active {
  background: var(--color-block);
  color: var(--color-primary);
}
.tab.underline {
  background: transparent;
  color: var(--color-text);
  border: none;
  border-bottom: 2px solid var(--color-inactive);
  border-radius: 0;
}
.tab.underline:hover {
  background: transparent;
  border-bottom-color: var(--color-inactive-background);
}
.tab.underline:active {
  background: transparent;
  border-bottom-color: var(--color-primary-active);
  color: var(--color-primary);
}
.tab:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.gap-xxs {
  gap: var(--space-xxs);
}

.m-xxs {
  margin: var(--space-xxs);
}

.mx-xxs {
  margin-left: var(--space-xxs);
  margin-right: var(--space-xxs);
}

.my-xxs {
  margin-top: var(--space-xxs);
  margin-bottom: var(--space-xxs);
}

.mt-xxs {
  margin-top: var(--space-xxs);
}

.mr-xxs {
  margin-right: var(--space-xxs);
}

.mb-xxs {
  margin-bottom: var(--space-xxs);
}

.ml-xxs {
  margin-left: var(--space-xxs);
}

.p-xxs {
  padding: var(--space-xxs);
}

.px-xxs {
  padding-left: var(--space-xxs);
  padding-right: var(--space-xxs);
}

.py-xxs {
  padding-top: var(--space-xxs);
  padding-bottom: var(--space-xxs);
}

.pt-xxs {
  padding-top: var(--space-xxs);
}

.pr-xxs {
  padding-right: var(--space-xxs);
}

.pb-xxs {
  padding-bottom: var(--space-xxs);
}

.pl-xxs {
  padding-left: var(--space-xxs);
}

.gap-xs {
  gap: var(--space-xs);
}

.m-xs {
  margin: var(--space-xs);
}

.mx-xs {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}

.my-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.mt-xs {
  margin-top: var(--space-xs);
}

.mr-xs {
  margin-right: var(--space-xs);
}

.mb-xs {
  margin-bottom: var(--space-xs);
}

.ml-xs {
  margin-left: var(--space-xs);
}

.p-xs {
  padding: var(--space-xs);
}

.px-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

.py-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.pt-xs {
  padding-top: var(--space-xs);
}

.pr-xs {
  padding-right: var(--space-xs);
}

.pb-xs {
  padding-bottom: var(--space-xs);
}

.pl-xs {
  padding-left: var(--space-xs);
}

.gap-sm {
  gap: var(--space-sm);
}

.m-sm {
  margin: var(--space-sm);
}

.mx-sm {
  margin-left: var(--space-sm);
  margin-right: var(--space-sm);
}

.my-sm {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mr-sm {
  margin-right: var(--space-sm);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.ml-sm {
  margin-left: var(--space-sm);
}

.p-sm {
  padding: var(--space-sm);
}

.px-sm {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

.py-sm {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.pt-sm {
  padding-top: var(--space-sm);
}

.pr-sm {
  padding-right: var(--space-sm);
}

.pb-sm {
  padding-bottom: var(--space-sm);
}

.pl-sm {
  padding-left: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.m-md {
  margin: var(--space-md);
}

.mx-md {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}

.my-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.mt-md {
  margin-top: var(--space-md);
}

.mr-md {
  margin-right: var(--space-md);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.ml-md {
  margin-left: var(--space-md);
}

.p-md {
  padding: var(--space-md);
}

.px-md {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.py-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

.pt-md {
  padding-top: var(--space-md);
}

.pr-md {
  padding-right: var(--space-md);
}

.pb-md {
  padding-bottom: var(--space-md);
}

.pl-md {
  padding-left: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

.m-lg {
  margin: var(--space-lg);
}

.mx-lg {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}

.my-lg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mr-lg {
  margin-right: var(--space-lg);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.ml-lg {
  margin-left: var(--space-lg);
}

.p-lg {
  padding: var(--space-lg);
}

.px-lg {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.py-lg {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.pt-lg {
  padding-top: var(--space-lg);
}

.pr-lg {
  padding-right: var(--space-lg);
}

.pb-lg {
  padding-bottom: var(--space-lg);
}

.pl-lg {
  padding-left: var(--space-lg);
}

.gap-xl {
  gap: var(--space-xl);
}

.m-xl {
  margin: var(--space-xl);
}

.mx-xl {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}

.my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mr-xl {
  margin-right: var(--space-xl);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.ml-xl {
  margin-left: var(--space-xl);
}

.p-xl {
  padding: var(--space-xl);
}

.px-xl {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.py-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.pt-xl {
  padding-top: var(--space-xl);
}

.pr-xl {
  padding-right: var(--space-xl);
}

.pb-xl {
  padding-bottom: var(--space-xl);
}

.pl-xl {
  padding-left: var(--space-xl);
}

.gap-xxl {
  gap: var(--space-xxl);
}

.m-xxl {
  margin: var(--space-xxl);
}

.mx-xxl {
  margin-left: var(--space-xxl);
  margin-right: var(--space-xxl);
}

.my-xxl {
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-xxl);
}

.mt-xxl {
  margin-top: var(--space-xxl);
}

.mr-xxl {
  margin-right: var(--space-xxl);
}

.mb-xxl {
  margin-bottom: var(--space-xxl);
}

.ml-xxl {
  margin-left: var(--space-xxl);
}

.p-xxl {
  padding: var(--space-xxl);
}

.px-xxl {
  padding-left: var(--space-xxl);
  padding-right: var(--space-xxl);
}

.py-xxl {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

.pt-xxl {
  padding-top: var(--space-xxl);
}

.pr-xxl {
  padding-right: var(--space-xxl);
}

.pb-xxl {
  padding-bottom: var(--space-xxl);
}

.pl-xxl {
  padding-left: var(--space-xxl);
}

.m-auto {
  margin: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.mt-auto {
  margin-top: auto;
}

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-auto {
  margin-left: auto;
}

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-center {
  align-content: center;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-stretch {
  align-content: stretch;
}

.flex-grow {
  flex-grow: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

:root {
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 10px;
  --space-lg: 20px;
  --space-xl: 40px;
  --space-xxl: 60px;
  --radius: 0px;
  --radius-map: 20px;
  --base-size: 1rem;
  --major-third: 1.25;
  --fz-xxs: calc(var(--base-size) * 0.625);
  --fz-xs: calc(var(--base-size) * 0.75);
  --fz-sm: calc(var(--base-size) * 0.876);
  --fz-md: var(--base-size);
  --fz-lg: calc(var(--fz-md) * var(--major-third));
  --fz-xl: calc(var(--fz-lg) * var(--major-third));
  --fz-xxl: calc(var(--fz-xl) * var(--major-third));
  --fz-xxxl: calc(var(--fz-xxl) * var(--major-third));
  --lh-md: 1.5rem;
  --ht-md: calc(var(--lh-md) + var(--space-sm) + var(--space-sm));
  --ht-lg: calc(var(--lh-md) + var(--space-lg) + var(--space-md));
  --ht-xl: calc(var(--lh-md) + var(--space-lg) + var(--space-lg));
  --shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  --size-normal: 24px;
  --border-base: 1px;
  --border-button: var(--border-base);
}

span {
  line-height: var(--lh-md);
}