/* ds.css — GENERATED by build-ds-css.sh from DesignSystem/lib/**/*.scss. DO NOT EDIT (regenerated). */
/* Real component CSS (global element/attribute selectors). Tokens come from the linked tokens.css. */
umag-accordeon .accordeon {
  width: 100%;
  border-radius: var(--radius-2x);
  padding: var(--space-4x) var(--space-3x);
  background: var(--font-color-white);
}
umag-accordeon .accordeon .accordeon__header {
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  flex-direction: row;
}
umag-accordeon .accordeon .accordeon__header-content {
  display: flex;
  justify-content: space-between;
}
umag-accordeon .accordeon .accordeon__header .accordeon__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
umag-accordeon .accordeon .accordeon__header .accordeon__left {
  flex: 1;
  gap: var(--space-0-5x);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
umag-accordeon .accordeon__right {
  display: flex;
  align-items: center;
}
umag-accordeon .accordeon__right .accordeon__meta {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
umag-accordeon .accordeon__body {
  overflow: hidden;
}
umag-accordeon .accordeon--s {
  --icon-offset: 52px;
}
umag-accordeon .accordeon--s .accordeon__header-content {
  gap: var(--space-3x);
}
umag-accordeon .accordeon--s .accordeon__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-1x);
  background-color: var(--bg-secondary-default);
}
umag-accordeon .accordeon--s .accordeon__label {
  color: var(--text-primary-default);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-medium);
}
umag-accordeon .accordeon--s .accordeon__caption {
  font-size: var(--font-size-m);
  color: var(--text-secondary-default);
}
umag-accordeon .accordeon--s .accordeon__right {
  gap: var(--space-1x);
}
umag-accordeon .accordeon--s .accordeon__body {
  padding-left: var(--icon-offset);
}
umag-accordeon .accordeon--m .accordeon__header-content {
  gap: var(--space-2x);
}
umag-accordeon .accordeon--m .accordeon__label {
  color: var(--text-primary-default);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
umag-accordeon .accordeon--m .accordeon__caption {
  font-size: var(--font-size-l);
  color: var(--text-secondary-default);
}
umag-accordeon .accordeon--m .accordeon__right {
  gap: var(--space-2x);
}





h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--font-line-height-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--font-line-height-2xl);
}

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

h4 {
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

h5 {
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-l {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

.text-l-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

.text-m {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-m-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-s {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}

.text-s-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}


umag-alert {
  display: block;
  border-radius: var(--radius-2x);
  width: 492px;
  max-width: 100%;
}
umag-alert.alert-warn {
  background-color: var(--bg-warning-soft);
}
umag-alert.alert-warn > umag-icon {
  color: var(--icon-warning-default);
}
umag-alert.alert-info {
  background-color: var(--bg-accent-soft);
}
umag-alert.alert-info > umag-icon {
  color: var(--icon-accent-default);
}
umag-alert.alert-success {
  background-color: var(--bg-brand-soft);
}
umag-alert.alert-success > umag-icon {
  color: var(--icon-brand-default);
}
umag-alert.alert-error {
  background-color: var(--bg-critical-soft);
}
umag-alert.alert-error > umag-icon {
  color: var(--icon-critical-default);
}
umag-alert.alert {
  display: flex;
  align-items: flex-start;
  padding: var(--space-4x);
}
umag-alert.alert > umag-icon {
  flex-shrink: 0;
  margin-right: var(--space-3x);
}
umag-alert.alert .content {
  flex: 1 1 100%;
  margin: 0;
}
umag-alert.alert .content-body {
  padding: var(--space-0-5x) 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
umag-alert.alert .content-body .description {
  padding-top: var(--space-1x);
  color: var(--text-primary-default);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-alert.alert .content-body strong {
  font-weight: var(--font-weight-bold);
}
umag-alert.alert .alert-body,
umag-alert.alert [alert-body] {
  padding-top: var(--space-1x);
}
umag-alert.alert .alert-actions,
umag-alert.alert [alert-actions] {
  padding: var(--space-1x) 0;
  margin-top: var(--space-2x);
  display: flex;
  gap: var(--space-4x);
}
umag-alert.alert umag-icon-button {
  margin-left: var(--space-2x);
  flex-shrink: 0;
}
umag-alert.alert umag-icon-button umag-icon {
  color: var(--icon-primary-default);
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--font-line-height-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--font-line-height-2xl);
}

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

h4 {
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

h5 {
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-l {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

.text-l-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

.text-m {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-m-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-s {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}

.text-s-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}






umag-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
}
umag-badge .in-row-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
umag-badge.square {
  border-radius: var(--radius-0-5x);
}
umag-badge.round {
  border-radius: var(--radius-full);
}
umag-badge.primary .badge-label {
  color: var(--text-primary-inverse);
}
umag-badge.primary umag-icon {
  color: var(--icon-primary-inverse);
}
umag-badge.disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
}
umag-badge.disabled.primary {
  background-color: var(--bg-disabled-default-inverse) !important;
}
umag-badge.disabled.secondary {
  background-color: var(--bg-disabled-default) !important;
}
umag-badge.disabled.secondary .badge-label {
  color: var(--text-disabled-default) !important;
}
umag-badge.disabled.secondary umag-icon {
  color: var(--icon-disabled-default) !important;
}
umag-badge.size-m {
  padding: var(--space-1x) var(--space-1-5x);
}
umag-badge.size-m .icon-wrapper {
  margin: var(--space-0-5x) 0;
}
umag-badge.size-m .badge-label {
  padding: 1px var(--space-1x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-badge.size-s {
  padding: var(--space-0-5x) var(--space-1x);
}
umag-badge.size-s .badge-label {
  padding: 1px var(--space-0-5x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
umag-badge.accent.primary {
  background-color: var(--bg-accent-default);
}
umag-badge.accent.secondary {
  background-color: var(--bg-accent-soft);
}
umag-badge.accent.secondary .badge-label {
  color: var(--text-accent-default);
}
umag-badge.accent.secondary umag-icon {
  color: var(--icon-accent-default);
}
umag-badge.neutral.primary {
  background-color: var(--bg-primary-inverse);
}
umag-badge.neutral.secondary {
  background-color: var(--bg-secondary-default);
}
umag-badge.neutral.secondary .badge-label {
  color: var(--text-primary-default);
}
umag-badge.neutral.secondary umag-icon {
  color: var(--icon-primary-default);
}
umag-badge.brand.primary {
  background-color: var(--bg-brand-default);
}
umag-badge.brand.secondary {
  background-color: var(--bg-brand-soft);
}
umag-badge.brand.secondary .badge-label {
  color: var(--text-brand-active);
}
umag-badge.brand.secondary umag-icon {
  color: var(--icon-brand-default);
}
umag-badge.promo.primary {
  background-color: var(--bg-promo-default);
}
umag-badge.promo.secondary {
  background-color: var(--bg-promo-soft);
}
umag-badge.promo.secondary .badge-label {
  color: var(--text-promo-default);
}
umag-badge.promo.secondary umag-icon {
  color: var(--icon-promo-default);
}
umag-badge.critical.primary {
  background-color: var(--bg-critical-default);
}
umag-badge.critical.secondary {
  background-color: var(--bg-critical-soft);
}
umag-badge.critical.secondary .badge-label {
  color: var(--text-critical-default);
}
umag-badge.critical.secondary umag-icon {
  color: var(--icon-critical-default);
}
umag-badge.warning.primary {
  background-color: var(--bg-warning-default);
}
umag-badge.warning.secondary {
  background-color: var(--bg-warning-soft);
}
umag-badge.warning.secondary .badge-label {
  color: var(--text-warning-default);
}
umag-badge.warning.secondary umag-icon {
  color: var(--icon-warning-default);
}

@keyframes sheet-enter-mobile {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes sheet-exit-mobile {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
umag-bottom-sheet :root {
  --0: 0px;
  --2: 2px;
  --4: 4px;
  --6: 6px;
  --8: 8px;
  --12: 12px;
  --16: 16px;
  --20: 20px;
  --24: 24px;
  --28: 28px;
  --32: 32px;
  --40: 40px;
}
umag-bottom-sheet :root {
  --space-0: var(--0);
  --space-0-5x: var(--2);
  --space-1x: var(--4);
  --space-1-5x: var(--6);
  --space-2x: var(--8);
  --space-3x: var(--12);
  --space-4x: var(--16);
  --space-5x: var(--20);
  --space-6x: var(--24);
  --space-7x: var(--28);
  --space-8x: var(--32);
  --space-10x: var(--40);
}
umag-bottom-sheet :root {
  --critical-100: #ffedeb;
  --critical-200: #ffcbc2;
  --critical-300: #ffa697;
  --critical-400: #ff725f;
  --critical-50: #fff6f5;
  --critical-500: #ff3826;
  --critical-600: #e31504;
  --critical-700: #c81d0f;
  --critical-800: #a51b0f;
  --emerald-100: #e1f9e4;
  --emerald-200: #c3f2cc;
  --emerald-300: #95e7a6;
  --emerald-400: #5bd47c;
  --emerald-50: #f2fcf3;
  --emerald-500: #2dbe60;
  --emerald-600: #0c9344;
  --emerald-700: #1d793c;
  --emerald-800: #1f6032;
  --grayscale-100: #fafafa;
  --grayscale-200: #f5f5f5;
  --grayscale-300: #e1e1e1;
  --grayscale-400: #cccccc;
  --grayscale-50: #ffffff;
  --grayscale-500: #a3a3a3;
  --grayscale-600: #898989;
  --grayscale-700: #5c5c5c;
  --grayscale-800: #1f1f1f;
  --grayscale-transparent-100: #1f1f1f1f;
  --grayscale-transparent-200: #1f1f1f3d;
  --grayscale-transparent-300: #1f1f1f52;
  --grayscale-transparent-400: #1f1f1fa3;
  --grayscale-transparent-50: #1f1f1f00;
  --grayscale-transparent-500: #1f1f1fb8;
  --grayscale-transparent-600: #1f1f1fcc;
  --grayscale-transparent-700: #1f1f1fe0;
  --grayscale-transparent-800: #1f1f1f;
  --info-1-100: #f8edff;
  --info-1-200: #eed6fe;
  --info-1-300: #e1b6fc;
  --info-1-400: #d088f8;
  --info-1-50: #fbf5ff;
  --info-1-500: #ba4cf0;
  --info-1-600: #ab31e2;
  --info-1-700: #9421c6;
  --info-1-800: #7c22a4;
  --info-2-100: #ffebd1;
  --info-2-200: #ffdaaa;
  --info-2-300: #ffc472;
  --info-2-400: #ffae1f;
  --info-2-50: #fff8f0;
  --info-2-500: #e59a01;
  --info-2-600: #aa710c;
  --info-2-700: #956301;
  --info-2-800: #784e00;
  --info-3-100: #d1fcfc;
  --info-3-200: #a4f1f0;
  --info-3-300: #71e6e6;
  --info-3-400: #47cdcd;
  --info-3-50: #f2fbfb;
  --info-3-500: #3ab3b3;
  --info-3-600: #258a8b;
  --info-3-700: #246f6f;
  --info-3-800: #235c5c;
  --sea-blue-100: #e8f1fe;
  --sea-blue-200: #d0e1fb;
  --sea-blue-300: #a9cafe;
  --sea-blue-400: #85b5fe;
  --sea-blue-50: #f1f6fd;
  --sea-blue-500: #5b9bfd;
  --sea-blue-600: #076ff2;
  --sea-blue-700: #005bcb;
  --sea-blue-800: #004baa;
  --warning-100: #ffeee4;
  --warning-200: #fdd1b9;
  --warning-300: #fbb38b;
  --warning-400: #fc995d;
  --warning-50: #fff9f6;
  --warning-500: #ff7a00;
  --warning-600: #ba5c17;
  --warning-700: #9f4a01;
  --warning-800: #843e09;
}
umag-bottom-sheet :root {
  --bg-accent-active: var(--sea-blue-800);
  --bg-accent-default: var(--sea-blue-600);
  --bg-accent-hover: var(--sea-blue-700);
  --bg-accent-soft: var(--sea-blue-100);
  --bg-accent-soft-active: var(--sea-blue-200);
  --bg-brand-active: var(--emerald-700);
  --bg-brand-default: var(--emerald-500);
  --bg-brand-hover: var(--emerald-600);
  --bg-brand-soft: var(--emerald-100);
  --bg-brand-soft-active: var(--emerald-200);
  --bg-critical-active: var(--critical-700);
  --bg-critical-default: var(--critical-500);
  --bg-critical-hover: var(--critical-600);
  --bg-critical-soft: var(--critical-100);
  --bg-critical-soft-active: var(--critical-200);
  --bg-disabled-default: var(--grayscale-300);
  --bg-disabled-default-inverse: var(--grayscale-600);
  --bg-primary-active: var(--grayscale-300);
  --bg-primary-default: var(--grayscale-50);
  --bg-primary-hover: var(--grayscale-200);
  --bg-primary-inverse: var(--grayscale-700);
  --bg-secondary-active: var(--grayscale-400);
  --bg-secondary-default: var(--grayscale-200);
  --bg-secondary-hover: var(--grayscale-300);
  --bg-secondary-inverse: var(--grayscale-500);
  --bg-secondary-inverse-hover: var(--grayscale-600);
  --bg-transparent-default: var(--grayscale-transparent-50);
  --bg-transparent-hover: var(--grayscale-transparent-100);
  --bg-transparent-active: var(--grayscale-transparent-200);
  --bg-surface-overlay: #5c5c5c3d;
  --bg-surface-sf-0: var(--grayscale-50);
  --bg-surface-sf-1: var(--grayscale-200);
  --bg-surface-sf-2: var(--grayscale-300);
  --bg-tertiary-active: var(--grayscale-500);
  --bg-tertiary-default: var(--grayscale-300);
  --bg-tertiary-hover: var(--grayscale-400);
  --bg-warning-active: var(--warning-700);
  --bg-warning-default: var(--warning-500);
  --bg-warning-hover: var(--warning-600);
  --bg-warning-soft: var(--warning-100);
  --bg-warning-soft-active: var(--warning-200);
  --border-accent-active: var(--sea-blue-800);
  --border-accent-default: var(--sea-blue-600);
  --border-accent-hover: var(--sea-blue-700);
  --border-brand-active: var(--emerald-700);
  --border-brand-default: var(--emerald-500);
  --border-brand-hover: var(--emerald-600);
  --border-critical-active: var(--critical-700);
  --border-critical-default: var(--critical-500);
  --border-critical-hover: var(--critical-600);
  --border-primary-default: var(--grayscale-transparent-300);
  --border-primary-soft: var(--grayscale-transparent-100);
  --border-warning-default: var(--warning-500);
  --icon-accent-active: var(--sea-blue-800);
  --icon-accent-default: var(--sea-blue-600);
  --icon-accent-hover: var(--sea-blue-700);
  --icon-brand-active: var(--emerald-700);
  --icon-brand-default: var(--emerald-500);
  --icon-brand-hover: var(--emerald-600);
  --icon-critical-active: var(--critical-700);
  --icon-critical-default: var(--critical-500);
  --icon-critical-hover: var(--critical-600);
  --icon-disabled-default: var(--grayscale-500);
  --icon-primary-default: var(--grayscale-800);
  --icon-primary-inverse: var(--grayscale-50);
  --icon-primary-inverse-hover: var(--grayscale-200);
  --icon-promo-default: var(--info-1-500);
  --icon-secondary-default: var(--grayscale-700);
  --icon-secondary-inverse: var(--grayscale-400);
  --icon-tertiary-default: var(--grayscale-300);
  --icon-warning-default: var(--warning-500);
  --text-accent-active: var(--sea-blue-800);
  --text-accent-default: var(--sea-blue-600);
  --text-accent-hover: var(--sea-blue-700);
  --text-brand-active: var(--emerald-700);
  --text-brand-default: var(--emerald-500);
  --text-brand-hover: var(--emerald-600);
  --text-critical-active: var(--critical-700);
  --text-critical-default: var(--critical-500);
  --text-critical-hover: var(--critical-600);
  --text-disabled-default: var(--grayscale-500);
  --text-primary-default: var(--grayscale-800);
  --text-primary-inverse: var(--grayscale-50);
  --text-promo-default: var(--info-1-500);
  --text-secondary-default: var(--grayscale-700);
  --text-secondary-inverse: var(--grayscale-500);
  --text-tertiary-default: var(--grayscale-500);
  --text-warning-default: var(--warning-500);
  --bg-promo-default: var(--info-1-500);
  --bg-promo-hover: var(--info-1-600);
  --bg-promo-active: var(--info-1-700);
  --bg-promo-soft: var(--info-1-100);
  --bg-promo-soft-active: var(--info-1-200);
  --text-promo-default: var(--info-1-500);
  --text-promo-hover: var(--info-1-600);
  --text-promo-active: var(--info-1-700);
  --text-promo-soft: var(--info-1-100);
  --text-promo-soft-active: var(--info-1-200);
  --icon-promo-default: var(--info-1-500);
  --icon-promo-hover: var(--info-1-600);
  --icon-promo-active: var(--info-1-700);
  --icon-promo-soft: var(--info-1-100);
  --icon-promo-soft-active: var(--info-1-200);
}
umag-bottom-sheet :root {
  --radius-0: 0px;
  --radius-0-5x: 3px;
  --radius-1x: 6px;
  --radius-2x: 12px;
  --radius-3x: 18px;
  --radius-4x: 24px;
  --radius-full: 9999px;
}
umag-bottom-sheet :root {
  --critical-100: #ffedeb;
  --critical-200: #ffcbc2;
  --critical-300: #ffa697;
  --critical-400: #ff725f;
  --critical-50: #fff6f5;
  --critical-500: #ff3826;
  --critical-600: #e31504;
  --critical-700: #c81d0f;
  --critical-800: #a51b0f;
  --emerald-100: #e1f9e4;
  --emerald-200: #c3f2cc;
  --emerald-300: #95e7a6;
  --emerald-400: #5bd47c;
  --emerald-50: #f2fcf3;
  --emerald-500: #2dbe60;
  --emerald-600: #0c9344;
  --emerald-700: #1d793c;
  --emerald-800: #1f6032;
  --grayscale-100: #fafafa;
  --grayscale-200: #f5f5f5;
  --grayscale-300: #e1e1e1;
  --grayscale-400: #cccccc;
  --grayscale-50: #ffffff;
  --grayscale-500: #a3a3a3;
  --grayscale-600: #898989;
  --grayscale-700: #5c5c5c;
  --grayscale-800: #1f1f1f;
  --grayscale-transparent-100: #1f1f1f1f;
  --grayscale-transparent-200: #1f1f1f3d;
  --grayscale-transparent-300: #1f1f1f52;
  --grayscale-transparent-400: #1f1f1fa3;
  --grayscale-transparent-50: #1f1f1f00;
  --grayscale-transparent-500: #1f1f1fb8;
  --grayscale-transparent-600: #1f1f1fcc;
  --grayscale-transparent-700: #1f1f1fe0;
  --grayscale-transparent-800: #1f1f1f;
  --info-1-100: #f8edff;
  --info-1-200: #eed6fe;
  --info-1-300: #e1b6fc;
  --info-1-400: #d088f8;
  --info-1-50: #fbf5ff;
  --info-1-500: #ba4cf0;
  --info-1-600: #ab31e2;
  --info-1-700: #9421c6;
  --info-1-800: #7c22a4;
  --info-2-100: #ffebd1;
  --info-2-200: #ffdaaa;
  --info-2-300: #ffc472;
  --info-2-400: #ffae1f;
  --info-2-50: #fff8f0;
  --info-2-500: #e59a01;
  --info-2-600: #aa710c;
  --info-2-700: #956301;
  --info-2-800: #784e00;
  --info-3-100: #d1fcfc;
  --info-3-200: #a4f1f0;
  --info-3-300: #71e6e6;
  --info-3-400: #47cdcd;
  --info-3-50: #f2fbfb;
  --info-3-500: #3ab3b3;
  --info-3-600: #258a8b;
  --info-3-700: #246f6f;
  --info-3-800: #235c5c;
  --sea-blue-100: #e8f1fe;
  --sea-blue-200: #d0e1fb;
  --sea-blue-300: #a9cafe;
  --sea-blue-400: #85b5fe;
  --sea-blue-50: #f1f6fd;
  --sea-blue-500: #5b9bfd;
  --sea-blue-600: #076ff2;
  --sea-blue-700: #005bcb;
  --sea-blue-800: #004baa;
  --warning-100: #ffeee4;
  --warning-200: #fdd1b9;
  --warning-300: #fbb38b;
  --warning-400: #fc995d;
  --warning-50: #fff9f6;
  --warning-500: #ff7a00;
  --warning-600: #ba5c17;
  --warning-700: #9f4a01;
  --warning-800: #843e09;
}
umag-bottom-sheet {
  /*
   * Container style
   */
}
umag-bottom-sheet .ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}
umag-bottom-sheet {
  /*
   * Scrollbar rail styles
   */
}
umag-bottom-sheet .ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}
umag-bottom-sheet .ps__rail-y {
  display: block;
  opacity: 0.9;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}
umag-bottom-sheet .ps--active-x > .ps__rail-x,
umag-bottom-sheet .ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}
umag-bottom-sheet .ps:hover > .ps__rail-x,
umag-bottom-sheet .ps:hover > .ps__rail-y,
umag-bottom-sheet .ps--focus > .ps__rail-x,
umag-bottom-sheet .ps--focus > .ps__rail-y,
umag-bottom-sheet .ps--scrolling-x > .ps__rail-x,
umag-bottom-sheet .ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}
umag-bottom-sheet .ps .ps__rail-x:hover,
umag-bottom-sheet .ps .ps__rail-y:hover,
umag-bottom-sheet .ps .ps__rail-x:focus,
umag-bottom-sheet .ps .ps__rail-y:focus,
umag-bottom-sheet .ps .ps__rail-x.ps--clicking,
umag-bottom-sheet .ps .ps__rail-y.ps--clicking {
  background-color: transparent;
  opacity: 0.9;
}
umag-bottom-sheet {
  /*
   * Scrollbar thumb styles
   */
}
umag-bottom-sheet .ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}
umag-bottom-sheet .ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 4px;
  height: 10px;
  /* please don't change 'position' */
  position: absolute;
}
umag-bottom-sheet .ps__rail-x:hover > .ps__thumb-x,
umag-bottom-sheet .ps__rail-x:focus > .ps__thumb-x,
umag-bottom-sheet .ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #aaa;
  height: 6px;
}
umag-bottom-sheet .ps__rail-y:hover > .ps__thumb-y,
umag-bottom-sheet .ps__rail-y:focus > .ps__thumb-y,
umag-bottom-sheet .ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #aaa;
  width: 6px;
}
umag-bottom-sheet {
  /* MS supports */
}
@supports (-ms-overflow-style: none) {
  umag-bottom-sheet .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  umag-bottom-sheet .ps {
    overflow: auto !important;
  }
}
umag-bottom-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--bg-surface-sf-0);
  transform: translateY(100%);
  will-change: transform;
}
umag-bottom-sheet.bottom-sheet--enter {
  animation: sheet-enter-mobile var(--duration-base) var(--ease-out) forwards;
}
umag-bottom-sheet.bottom-sheet--exit {
  animation: sheet-exit-mobile var(--duration-base) var(--ease-in) forwards;
}
umag-bottom-sheet.bottom-sheet--peek {
  --sheet-peek-cap: min(90vh, 720px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: auto;
  min-height: var(--sheet-peek-min-height, 0px);
  overflow: hidden;
  border-radius: var(--radius-4x) var(--radius-4x) 0 0;
  transition: max-height var(--duration-slow) var(--ease-in-out);
  max-height: var(--sheet-peek-initial-height, min(40vh + var(--sheet-pull-up-px, 0px), var(--sheet-peek-cap)));
}
umag-bottom-sheet.bottom-sheet--peek.bottom-sheet--expanded {
  max-height: min(var(--sheet-peek-cap) + var(--sheet-pull-up-px, 0px), 100vh);
}
umag-bottom-sheet.bottom-sheet--peek.bottom-sheet--sheet-pulling {
  transition: none;
}
umag-bottom-sheet.bottom-sheet--peek .bottom-sheet__content {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
umag-bottom-sheet.bottom-sheet--peek .bottom-sheet__content .bottom-sheet__content-inner {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}
umag-bottom-sheet.bottom-sheet--peek .bottom-sheet__content.bottom-sheet__content--expanded .bottom-sheet__content-inner {
  max-height: none;
}
umag-bottom-sheet .bottom-sheet__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: var(--space-2x) var(--space-1x);
  background: var(--bg-surface-sf-0);
}
umag-bottom-sheet .bottom-sheet__reset {
  justify-self: start;
}
umag-bottom-sheet .bottom-sheet__title {
  padding: 0 var(--space-3x);
  color: var(--text-primary-default);
  justify-self: center;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
umag-bottom-sheet .bottom-sheet__close {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
}
umag-bottom-sheet .bottom-sheet__content {
  flex: 1 1 auto;
  padding: 0 var(--space-4x);
  min-height: 0;
}
umag-bottom-sheet:not(.bottom-sheet--peek) .bottom-sheet__content .bottom-sheet__content-inner {
  max-height: 286px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  transition: max-height var(--duration-base) var(--ease-standard);
  transition: all 0.5s;
  scroll-behavior: smooth;
}
umag-bottom-sheet:not(.bottom-sheet--peek) .bottom-sheet__content .bottom-sheet__content-inner::-webkit-scrollbar {
  background: var(--bg-surface-sf-1, #f5f5f5);
  width: 4px;
  height: 4px;
  border-radius: 30px;
}
umag-bottom-sheet:not(.bottom-sheet--peek) .bottom-sheet__content .bottom-sheet__content-inner::-webkit-scrollbar-track {
  background: var(--bg-surface-sf-1, #f5f5f5);
}
umag-bottom-sheet:not(.bottom-sheet--peek) .bottom-sheet__content .bottom-sheet__content-inner::-webkit-scrollbar-thumb {
  background-color: var(--grayscale-400);
  cursor: pointer;
  width: 4px;
  height: 4px;
  border-radius: 30px;
  background: var(--icon-secondary-inverse, #ccc);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
}
umag-bottom-sheet:not(.bottom-sheet--peek) .bottom-sheet__content .bottom-sheet__content-inner::-webkit-scrollbar-thumb:hover {
  background-color: var(--grayscale-500);
}
umag-bottom-sheet:not(.bottom-sheet--peek) .bottom-sheet__content.bottom-sheet__content--expanded .bottom-sheet__content-inner {
  max-height: 80vh;
}
umag-bottom-sheet .bottom-sheet__footer {
  flex: 0 0 auto;
  padding: var(--space-2x) var(--space-4x);
  background: var(--bg-surface-sf-0);
}
umag-bottom-sheet .bottom-sheet__footer-actions {
  display: flex;
  width: 100%;
  gap: var(--space-2x);
  justify-content: space-between;
}
umag-bottom-sheet .bottom-sheet__footer-actions umag-button {
  flex: 1 1 0;
}

a[umag-function-button],
button[umag-function-button],
umag-function-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
a[umag-function-button].brand,
button[umag-function-button].brand,
umag-function-button.brand {
  color: var(--text-brand-default);
}
a[umag-function-button].brand:hover,
button[umag-function-button].brand:hover,
umag-function-button.brand:hover {
  color: var(--text-brand-hover);
}
a[umag-function-button].brand:active,
button[umag-function-button].brand:active,
umag-function-button.brand:active {
  color: var(--text-brand-active);
}
a[umag-function-button].accent,
button[umag-function-button].accent,
umag-function-button.accent {
  color: var(--text-accent-default);
}
a[umag-function-button].accent:hover,
button[umag-function-button].accent:hover,
umag-function-button.accent:hover {
  color: var(--text-accent-hover);
}
a[umag-function-button].accent:active,
button[umag-function-button].accent:active,
umag-function-button.accent:active {
  color: var(--text-accent-active);
}
a[umag-function-button].neutral,
button[umag-function-button].neutral,
umag-function-button.neutral {
  color: var(--text-secondary-default);
}
a[umag-function-button].neutral:active, a[umag-function-button].neutral:hover,
button[umag-function-button].neutral:active,
button[umag-function-button].neutral:hover,
umag-function-button.neutral:active,
umag-function-button.neutral:hover {
  color: var(--text-primary-default);
}
a[umag-function-button].critical,
button[umag-function-button].critical,
umag-function-button.critical {
  color: var(--text-critical-default);
}
a[umag-function-button].critical:hover,
button[umag-function-button].critical:hover,
umag-function-button.critical:hover {
  color: var(--text-critical-hover);
}
a[umag-function-button].critical:active,
button[umag-function-button].critical:active,
umag-function-button.critical:active {
  color: var(--text-critical-active);
}
a[umag-function-button].critical-neutral,
button[umag-function-button].critical-neutral,
umag-function-button.critical-neutral {
  color: var(--text-secondary-default);
}
a[umag-function-button].critical-neutral:hover,
button[umag-function-button].critical-neutral:hover,
umag-function-button.critical-neutral:hover {
  color: var(--text-critical-hover);
}
a[umag-function-button].critical-neutral:active,
button[umag-function-button].critical-neutral:active,
umag-function-button.critical-neutral:active {
  color: var(--text-critical-active);
}
a[umag-function-button].disabled,
button[umag-function-button].disabled,
umag-function-button.disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--text-disabled-default);
}
a[umag-function-button] .label,
button[umag-function-button] .label,
umag-function-button .label {
  padding: 1px var(--space-1x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
a[umag-function-button] .spinner,
button[umag-function-button] .spinner,
umag-function-button .spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}





a[umag-icon-button],
button[umag-icon-button],
umag-icon-button {
  position: relative;
  display: inline-block;
  width: fit-content;
  border-radius: var(--radius-1x);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
}
a[umag-icon-button].disabled,
button[umag-icon-button].disabled,
umag-icon-button.disabled {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}
a[umag-icon-button].size-l,
button[umag-icon-button].size-l,
umag-icon-button.size-l {
  padding: var(--space-3x);
}
a[umag-icon-button].size-l umag-icon,
button[umag-icon-button].size-l umag-icon,
umag-icon-button.size-l umag-icon {
  width: 24px !important;
  height: 24px !important;
}
a[umag-icon-button].size-m,
button[umag-icon-button].size-m,
umag-icon-button.size-m {
  padding: var(--space-2x);
}
a[umag-icon-button].size-m umag-icon,
button[umag-icon-button].size-m umag-icon,
umag-icon-button.size-m umag-icon {
  width: 24px !important;
  height: 24px !important;
}
a[umag-icon-button].size-s,
button[umag-icon-button].size-s,
umag-icon-button.size-s {
  border-radius: var(--space-1-5x);
  padding: var(--space-1-5x);
}
a[umag-icon-button].accent,
button[umag-icon-button].accent,
umag-icon-button.accent {
  background-color: var(--bg-accent-default);
  color: var(--text-primary-inverse);
}
a[umag-icon-button].accent:hover, a[umag-icon-button].accent.dropdown-active,
button[umag-icon-button].accent:hover,
button[umag-icon-button].accent.dropdown-active,
umag-icon-button.accent:hover,
umag-icon-button.accent.dropdown-active {
  background-color: var(--bg-accent-hover);
}
a[umag-icon-button].accent:active,
button[umag-icon-button].accent:active,
umag-icon-button.accent:active {
  background-color: var(--bg-accent-active);
}
a[umag-icon-button].brand,
button[umag-icon-button].brand,
umag-icon-button.brand {
  background-color: var(--bg-brand-default);
  color: var(--text-primary-inverse);
}
a[umag-icon-button].brand:hover, a[umag-icon-button].brand.dropdown-active,
button[umag-icon-button].brand:hover,
button[umag-icon-button].brand.dropdown-active,
umag-icon-button.brand:hover,
umag-icon-button.brand.dropdown-active {
  background-color: var(--bg-brand-hover);
}
a[umag-icon-button].brand:active,
button[umag-icon-button].brand:active,
umag-icon-button.brand:active {
  background-color: var(--bg-brand-active);
}
a[umag-icon-button].neutral,
button[umag-icon-button].neutral,
umag-icon-button.neutral {
  background-color: var(--bg-secondary-default);
  color: var(--text-primary-default);
}
a[umag-icon-button].neutral.size-s,
button[umag-icon-button].neutral.size-s,
umag-icon-button.neutral.size-s {
  border-width: 1px;
}
a[umag-icon-button].neutral:hover, a[umag-icon-button].neutral.dropdown-active,
button[umag-icon-button].neutral:hover,
button[umag-icon-button].neutral.dropdown-active,
umag-icon-button.neutral:hover,
umag-icon-button.neutral.dropdown-active {
  background-color: var(--bg-transparent-hover);
}
a[umag-icon-button].neutral:active,
button[umag-icon-button].neutral:active,
umag-icon-button.neutral:active {
  background-color: var(--bg-secondary-active);
}
a[umag-icon-button].critical,
button[umag-icon-button].critical,
umag-icon-button.critical {
  background-color: var(--bg-critical-default);
  color: var(--text-primary-inverse);
}
a[umag-icon-button].critical:hover, a[umag-icon-button].critical.dropdown-active,
button[umag-icon-button].critical:hover,
button[umag-icon-button].critical.dropdown-active,
umag-icon-button.critical:hover,
umag-icon-button.critical.dropdown-active {
  background-color: var(--bg-critical-hover);
}
a[umag-icon-button].critical:active,
button[umag-icon-button].critical:active,
umag-icon-button.critical:active {
  background-color: var(--bg-critical-active);
}
a[umag-icon-button].outlined,
button[umag-icon-button].outlined,
umag-icon-button.outlined {
  border-width: 1px;
  border-style: solid;
  background-color: transparent;
}
a[umag-icon-button].outlined.size-l,
button[umag-icon-button].outlined.size-l,
umag-icon-button.outlined.size-l {
  padding: 11px;
}
a[umag-icon-button].outlined.size-m,
button[umag-icon-button].outlined.size-m,
umag-icon-button.outlined.size-m {
  padding: 7px;
}
a[umag-icon-button].outlined.size-s,
button[umag-icon-button].outlined.size-s,
umag-icon-button.outlined.size-s {
  padding: 5px;
  border-width: 1px;
}
a[umag-icon-button].outlined.accent,
button[umag-icon-button].outlined.accent,
umag-icon-button.outlined.accent {
  color: var(--text-accent-default);
  border-color: var(--border-accent-default);
}
a[umag-icon-button].outlined.accent:hover, a[umag-icon-button].outlined.accent.dropdown-active,
button[umag-icon-button].outlined.accent:hover,
button[umag-icon-button].outlined.accent.dropdown-active,
umag-icon-button.outlined.accent:hover,
umag-icon-button.outlined.accent.dropdown-active {
  background-color: var(--bg-accent-soft);
  color: var(--text-accent-hover);
  border-color: var(--border-accent-hover);
}
a[umag-icon-button].outlined.accent:active,
button[umag-icon-button].outlined.accent:active,
umag-icon-button.outlined.accent:active {
  background-color: var(--bg-accent-soft-active);
  border-color: var(--border-accent-active);
  color: var(--text-accent-active);
}
a[umag-icon-button].outlined.brand,
button[umag-icon-button].outlined.brand,
umag-icon-button.outlined.brand {
  color: var(--text-brand-default);
  border-color: var(--border-brand-default);
}
a[umag-icon-button].outlined.brand:hover, a[umag-icon-button].outlined.brand.dropdown-active,
button[umag-icon-button].outlined.brand:hover,
button[umag-icon-button].outlined.brand.dropdown-active,
umag-icon-button.outlined.brand:hover,
umag-icon-button.outlined.brand.dropdown-active {
  background-color: var(--bg-brand-soft);
  border-color: var(--border-brand-hover);
  color: var(--text-brand-hover);
}
a[umag-icon-button].outlined.brand:active,
button[umag-icon-button].outlined.brand:active,
umag-icon-button.outlined.brand:active {
  background-color: var(--bg-brand-soft-active);
  border-color: var(--border-brand-active);
  color: var(--text-brand-hover);
}
a[umag-icon-button].outlined.neutral,
button[umag-icon-button].outlined.neutral,
umag-icon-button.outlined.neutral {
  color: var(--text-primary-default);
  border-color: var(--border-primary-soft);
  background-color: transparent;
}
a[umag-icon-button].outlined.neutral:hover, a[umag-icon-button].outlined.neutral.dropdown-active,
button[umag-icon-button].outlined.neutral:hover,
button[umag-icon-button].outlined.neutral.dropdown-active,
umag-icon-button.outlined.neutral:hover,
umag-icon-button.outlined.neutral.dropdown-active {
  background-color: var(--bg-secondary-hover);
}
a[umag-icon-button].outlined.neutral:active,
button[umag-icon-button].outlined.neutral:active,
umag-icon-button.outlined.neutral:active {
  background-color: var(--bg-secondary-active);
}
a[umag-icon-button].outlined.critical,
button[umag-icon-button].outlined.critical,
umag-icon-button.outlined.critical {
  color: var(--text-critical-default);
  border-color: var(--border-critical-default);
}
a[umag-icon-button].outlined.critical:hover, a[umag-icon-button].outlined.critical.dropdown-active,
button[umag-icon-button].outlined.critical:hover,
button[umag-icon-button].outlined.critical.dropdown-active,
umag-icon-button.outlined.critical:hover,
umag-icon-button.outlined.critical.dropdown-active {
  background-color: var(--bg-critical-soft);
  border-color: var(--border-critical-hover);
}
a[umag-icon-button].outlined.critical:active,
button[umag-icon-button].outlined.critical:active,
umag-icon-button.outlined.critical:active {
  background-color: var(--bg-critical-soft-active);
  border-color: var(--border-critical-active);
}
a[umag-icon-button].ghost,
button[umag-icon-button].ghost,
umag-icon-button.ghost {
  background-color: transparent;
  border-color: transparent;
}
a[umag-icon-button].ghost.neutral:hover,
button[umag-icon-button].ghost.neutral:hover,
umag-icon-button.ghost.neutral:hover {
  background-color: var(--bg-transparent-hover);
}
a[umag-icon-button].ghost.neutral:active, a[umag-icon-button].ghost.neutral.dropdown-active,
button[umag-icon-button].ghost.neutral:active,
button[umag-icon-button].ghost.neutral.dropdown-active,
umag-icon-button.ghost.neutral:active,
umag-icon-button.ghost.neutral.dropdown-active {
  background-color: var(--bg-transparent-active);
}



a[umag-button],
button[umag-button],
umag-button {
  border-radius: var(--radius-1x);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  box-sizing: border-box;
}
a[umag-button] .label-wrapper,
button[umag-button] .label-wrapper,
umag-button .label-wrapper {
  display: flex;
}
a[umag-button].disabled,
button[umag-button].disabled,
umag-button.disabled {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}
a[umag-button].size-l,
button[umag-button].size-l,
umag-button.size-l {
  padding: var(--space-3x) var(--space-4x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
a[umag-button].size-l span.button-label,
button[umag-button].size-l span.button-label,
umag-button.size-l span.button-label {
  padding: var(--space-0-5x) var(--space-2x);
}
a[umag-button].size-m,
button[umag-button].size-m,
umag-button.size-m {
  padding: var(--space-2x) var(--space-3x);
}
a[umag-button].size-m .label-wrapper,
button[umag-button].size-m .label-wrapper,
umag-button.size-m .label-wrapper {
  padding: 3px var(--space-1-5x);
}
a[umag-button].size-m .label-wrapper span.button-label,
button[umag-button].size-m .label-wrapper span.button-label,
umag-button.size-m .label-wrapper span.button-label {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
a[umag-button].size-s,
button[umag-button].size-s,
umag-button.size-s {
  border-radius: var(--radius-0-5x);
  padding: var(--space-1-5x) var(--space-2x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
a[umag-button].size-s span.button-label,
button[umag-button].size-s span.button-label,
umag-button.size-s span.button-label {
  padding: 1px var(--space-1x);
}
a[umag-button].accent,
button[umag-button].accent,
umag-button.accent {
  background-color: var(--bg-accent-default);
  color: var(--text-primary-inverse);
}
a[umag-button].accent:hover,
button[umag-button].accent:hover,
umag-button.accent:hover {
  background-color: var(--bg-accent-hover);
}
a[umag-button].accent:active,
button[umag-button].accent:active,
umag-button.accent:active {
  background-color: var(--bg-accent-active);
}
a[umag-button].brand,
button[umag-button].brand,
umag-button.brand {
  background-color: var(--bg-brand-default);
  color: var(--text-primary-inverse);
}
a[umag-button].brand:hover,
button[umag-button].brand:hover,
umag-button.brand:hover {
  background-color: var(--bg-brand-hover);
}
a[umag-button].brand:active,
button[umag-button].brand:active,
umag-button.brand:active {
  background-color: var(--bg-brand-active);
}
a[umag-button].neutral,
button[umag-button].neutral,
umag-button.neutral {
  background-color: var(--bg-secondary-default);
  color: var(--text-primary-default);
  border: none;
}
a[umag-button].neutral:hover,
button[umag-button].neutral:hover,
umag-button.neutral:hover {
  background-color: var(--bg-secondary-hover);
}
a[umag-button].neutral:active,
button[umag-button].neutral:active,
umag-button.neutral:active {
  background-color: var(--bg-secondary-active);
}
a[umag-button].critical,
button[umag-button].critical,
umag-button.critical {
  background-color: var(--bg-critical-default);
  color: var(--text-primary-inverse);
}
a[umag-button].critical:hover,
button[umag-button].critical:hover,
umag-button.critical:hover {
  background-color: var(--bg-critical-hover);
}
a[umag-button].critical:active,
button[umag-button].critical:active,
umag-button.critical:active {
  background-color: var(--bg-critical-active);
}
a[umag-button].outlined,
button[umag-button].outlined,
umag-button.outlined {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
}
a[umag-button].outlined.size-l,
button[umag-button].outlined.size-l,
umag-button.outlined.size-l {
  padding-top: 11px;
  padding-bottom: 11px;
}
a[umag-button].outlined.size-m,
button[umag-button].outlined.size-m,
umag-button.outlined.size-m {
  padding-top: 7px;
  padding-bottom: 7px;
}
a[umag-button].outlined.size-s,
button[umag-button].outlined.size-s,
umag-button.outlined.size-s {
  padding-top: 5px;
  padding-bottom: 5px;
}
a[umag-button].outlined.accent,
button[umag-button].outlined.accent,
umag-button.outlined.accent {
  color: var(--text-accent-default);
  border-color: var(--border-accent-default);
}
a[umag-button].outlined.accent:hover,
button[umag-button].outlined.accent:hover,
umag-button.outlined.accent:hover {
  background-color: var(--bg-accent-soft);
  color: var(--text-accent-hover);
  border-color: var(--border-accent-hover);
}
a[umag-button].outlined.accent:active,
button[umag-button].outlined.accent:active,
umag-button.outlined.accent:active {
  background-color: var(--bg-accent-soft-active);
  color: var(--text-accent-active);
  border-color: var(--border-accent-active);
}
a[umag-button].outlined.brand,
button[umag-button].outlined.brand,
umag-button.outlined.brand {
  color: var(--text-brand-default);
  border-color: var(--border-brand-default);
}
a[umag-button].outlined.brand:hover,
button[umag-button].outlined.brand:hover,
umag-button.outlined.brand:hover {
  background-color: var(--bg-brand-soft);
  color: var(--text-brand-hover);
  border-color: var(--border-brand-hover);
}
a[umag-button].outlined.brand:active,
button[umag-button].outlined.brand:active,
umag-button.outlined.brand:active {
  background-color: var(--bg-brand-soft-active);
  color: var(--text-brand-active);
  border-color: var(--border-brand-active);
}
a[umag-button].outlined.neutral,
button[umag-button].outlined.neutral,
umag-button.outlined.neutral {
  color: var(--text-primary-default);
  border-color: var(--border-primary-soft);
}
a[umag-button].outlined.neutral:hover,
button[umag-button].outlined.neutral:hover,
umag-button.outlined.neutral:hover {
  background-color: var(--bg-secondary-hover);
}
a[umag-button].outlined.neutral:active,
button[umag-button].outlined.neutral:active,
umag-button.outlined.neutral:active {
  background-color: var(--bg-secondary-active);
}
a[umag-button].outlined.critical,
button[umag-button].outlined.critical,
umag-button.outlined.critical {
  color: var(--text-critical-default);
  border-color: var(--border-critical-default);
}
a[umag-button].outlined.critical:hover,
button[umag-button].outlined.critical:hover,
umag-button.outlined.critical:hover {
  background-color: var(--bg-critical-soft);
  color: var(--text-critical-hover);
  border-color: var(--border-critical-hover);
}
a[umag-button].outlined.critical:active,
button[umag-button].outlined.critical:active,
umag-button.outlined.critical:active {
  background-color: var(--bg-critical-soft-active);
  color: var(--text-critical-active);
  border-color: var(--border-critical-active);
}








umag-checkbox-v2 {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5x);
  position: relative;
}
umag-checkbox-v2 .umag-input-native-control {
  position: absolute;
  width: 0;
  height: 0;
}
umag-checkbox-v2.umag-checkbox .label {
  color: var(--text-primary-default);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
umag-checkbox-v2.umag-checkbox .checkbox-background {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-0-5x);
  border-width: 2px;
  border-style: solid;
  cursor: pointer;
}
umag-checkbox-v2.umag-checkbox .checkbox-background .checked-sign {
  display: none;
}
umag-checkbox-v2.umag-checkbox .checkbox-background .indeterminate-sign {
  display: none;
}
umag-checkbox-v2.umag-checkbox-size-small .checkbox-background {
  max-height: 16px;
  min-width: var(--space-4x);
  min-height: var(--space-4x);
  width: var(--space-4x);
  height: var(--space-4x);
}
umag-checkbox-v2.umag-checkbox-size-small .label {
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
umag-checkbox-v2.umag-checkbox-size-medium .checkbox-background {
  max-height: 20px;
  min-width: var(--space-5x);
  min-height: var(--space-5x);
  width: var(--space-5x);
  height: var(--space-5x);
}
umag-checkbox-v2.umag-checkbox-size-medium .label {
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-checkbox-v2.umag-checkbox-unchecked .checkbox-background {
  border-color: var(--border-primary-default);
}
umag-checkbox-v2.umag-checkbox-unchecked .checkbox-background .indeterminate-sign,
umag-checkbox-v2.umag-checkbox-unchecked .checkbox-background .checked-sign {
  display: none;
}
umag-checkbox-v2.umag-checkbox-unchecked .checkbox-background:hover {
  border-color: var(--bg-accent-default);
}
umag-checkbox-v2.umag-checkbox-checked .checkbox-background {
  background-color: var(--bg-accent-default);
  border-color: transparent;
}
umag-checkbox-v2.umag-checkbox-checked .checkbox-background .checked-sign {
  display: block;
}
umag-checkbox-v2.umag-checkbox-checked .checkbox-background .indeterminate-sign {
  display: none;
}
umag-checkbox-v2.umag-checkbox-checked .checkbox-background:hover {
  background-color: var(--bg-accent-hover);
}
umag-checkbox-v2.umag-checkbox-indeterminate .checkbox-background {
  background-color: var(--bg-accent-default);
  border-color: transparent;
}
umag-checkbox-v2.umag-checkbox-indeterminate .checkbox-background .checked-sign {
  display: none;
}
umag-checkbox-v2.umag-checkbox-indeterminate .checkbox-background .indeterminate-sign {
  display: block;
}
umag-checkbox-v2.umag-checkbox-indeterminate .checkbox-background:hover {
  background-color: var(--bg-accent-hover);
}
umag-checkbox-v2.umag-checkbox-disabled {
  pointer-events: none;
}
umag-checkbox-v2.umag-checkbox-disabled .checkbox-background {
  background-color: var(--bg-disabled-default);
  border-color: transparent;
}
umag-checkbox-v2.umag-checkbox-disabled .label {
  color: var(--text-disabled-default);
}
umag-checkbox-v2.umag-checkbox-label-left {
  flex-direction: row-reverse;
}
umag-checkbox-v2.umag-checkbox-label-left .label {
  margin-right: var(--space-2x);
}
umag-checkbox-v2.umag-checkbox-label-right {
  flex-direction: row;
}
umag-checkbox-v2.umag-checkbox-label-right .label {
  margin-left: var(--space-2x);
}


/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: block;
  opacity: 0.9;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: transparent;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 4px;
  height: 10px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #aaa;
  height: 6px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #aaa;
  width: 6px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}





:host {
  display: block;
  width: 100%;
}

:host(.size-s) .context-menu__item {
  padding: var(--space-1-5x) var(--space-2x);
  gap: var(--space-1-5x);
  min-height: 28px;
}
:host(.size-s) .context-menu__item--group-title {
  padding: var(--space-1-5x) var(--space-2x);
}
:host(.size-s) .context-menu__item {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
:host(.size-s) .context-menu__item-label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
:host(.size-s) .context-menu__item-hint {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
:host(.size-s) .context-menu__divider {
  padding: var(--space-1-5x) var(--space-2x);
}

:host(.size-m) .context-menu__item {
  padding: var(--space-2x) var(--space-3x);
  gap: var(--space-2x);
}
:host(.size-m) .context-menu__item--group-title {
  padding: var(--space-2x) var(--space-3x);
}
:host(.size-m) .context-menu__item {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
:host(.size-m) .context-menu__item-label {
  padding: 1px 0;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
:host(.size-m) .context-menu__item-hint {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
:host(.size-m) .context-menu__divider {
  padding: var(--space-2x);
}

:host .context-menu__content {
  overflow-y: auto;
  flex: 1 1 auto;
  width: 100%;
  background: var(--bg-primary-default);
  transition: all 0.5s;
  scroll-behavior: smooth;
}
:host .context-menu__content::-webkit-scrollbar {
  background: var(--bg-surface-sf-1, #f5f5f5);
  width: 4px;
  height: 4px;
  border-radius: 30px;
}
:host .context-menu__content::-webkit-scrollbar-track {
  background: var(--bg-surface-sf-1, #f5f5f5);
}
:host .context-menu__content::-webkit-scrollbar-thumb {
  background-color: var(--grayscale-400);
  cursor: pointer;
  width: 4px;
  height: 4px;
  border-radius: 30px;
  background: var(--icon-secondary-inverse, #ccc);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
}
:host .context-menu__content::-webkit-scrollbar-thumb:hover {
  background-color: var(--grayscale-500);
}
:host .context-menu__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: var(--space-1-5x) 0;
  padding: 0;
  gap: var(--space-1x);
}
:host .context-menu__item {
  display: flex;
  align-items: center;
  padding: var(--space-2x) var(--space-2x) var(--space-2x) var(--space-3x);
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: var(--text-primary-default);
  transition: background-color var(--duration-base) var(--ease-standard);
}
:host .context-menu__item--group-title {
  color: var(--text-secondary-default);
  cursor: default;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
:host .context-menu__item--group-title:hover {
  background: none !important;
}
:host .context-menu__item--disabled {
  color: var(--text-disabled-default) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.6;
}
:host .context-menu__item--critical {
  color: var(--text-critical-default);
}
:host .context-menu__item--critical:hover {
  background: var(--bg-critical-soft) !important;
  color: var(--text-critical-hover) !important;
}
:host .context-menu__item--critical umag-icon {
  color: var(--icon-critical-default) !important;
}
:host .context-menu__item--selected {
  background: var(--bg-accent-soft) !important;
  color: var(--text-accent-active) !important;
}
:host .context-menu__item--selected umag-icon {
  color: var(--icon-accent-active) !important;
}
:host .context-menu__item--selected .context-menu__item-hint {
  color: var(--text-accent-active);
}
:host .context-menu__item--highlighted:not(:host .context-menu__item--disabled):not(:host .context-menu__item--group-title) {
  background: var(--bg-secondary-default);
  border-radius: var(--radius-0-5x);
}
:host .context-menu__item--selected.context-menu__item--highlighted:not(:host .context-menu__item--disabled) {
  background-color: var(--bg-accent-soft) !important;
  color: var(--text-accent-active) !important;
}
:host .context-menu__item:hover:not(:host .context-menu__item--disabled):not(:host .context-menu__item--group-title) {
  background: var(--bg-secondary-default);
  border-radius: var(--radius-0-5x);
}
:host .context-menu__item--with-hint {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0-5x);
}
:host .context-menu__item--multiple {
  display: flex;
  flex-direction: row;
  align-items: center;
}
:host .context-menu__item--multiple.context-menu__item--with-hint {
  flex-direction: row;
}
:host .context-menu__item-check {
  flex-shrink: 0;
  color: var(--text-accent-active);
}
:host .context-menu__item-icon {
  flex-shrink: 0;
  color: var(--icon-secondary-default);
}
:host .context-menu__item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--space-0-5x);
}
:host .context-menu__item-label {
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:host .context-menu__item-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary-default);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
:host .context-menu__divider {
  margin: 0 !important;
}
:host .context-menu__divider hr {
  border: none;
  border-top: 1px solid var(--border-primary-default);
  margin: 0 !important;
}
:host ul li {
  margin: 0;
  padding: 0;
}

umag-counter-v2 :root {
  --critical-100: #ffedeb;
  --critical-200: #ffcbc2;
  --critical-300: #ffa697;
  --critical-400: #ff725f;
  --critical-50: #fff6f5;
  --critical-500: #ff3826;
  --critical-600: #e31504;
  --critical-700: #c81d0f;
  --critical-800: #a51b0f;
  --emerald-100: #e1f9e4;
  --emerald-200: #c3f2cc;
  --emerald-300: #95e7a6;
  --emerald-400: #5bd47c;
  --emerald-50: #f2fcf3;
  --emerald-500: #2dbe60;
  --emerald-600: #0c9344;
  --emerald-700: #1d793c;
  --emerald-800: #1f6032;
  --grayscale-100: #fafafa;
  --grayscale-200: #f5f5f5;
  --grayscale-300: #e1e1e1;
  --grayscale-400: #cccccc;
  --grayscale-50: #ffffff;
  --grayscale-500: #a3a3a3;
  --grayscale-600: #898989;
  --grayscale-700: #5c5c5c;
  --grayscale-800: #1f1f1f;
  --grayscale-transparent-100: #1f1f1f1f;
  --grayscale-transparent-200: #1f1f1f3d;
  --grayscale-transparent-300: #1f1f1f52;
  --grayscale-transparent-400: #1f1f1fa3;
  --grayscale-transparent-50: #1f1f1f00;
  --grayscale-transparent-500: #1f1f1fb8;
  --grayscale-transparent-600: #1f1f1fcc;
  --grayscale-transparent-700: #1f1f1fe0;
  --grayscale-transparent-800: #1f1f1f;
  --info-1-100: #f8edff;
  --info-1-200: #eed6fe;
  --info-1-300: #e1b6fc;
  --info-1-400: #d088f8;
  --info-1-50: #fbf5ff;
  --info-1-500: #ba4cf0;
  --info-1-600: #ab31e2;
  --info-1-700: #9421c6;
  --info-1-800: #7c22a4;
  --info-2-100: #ffebd1;
  --info-2-200: #ffdaaa;
  --info-2-300: #ffc472;
  --info-2-400: #ffae1f;
  --info-2-50: #fff8f0;
  --info-2-500: #e59a01;
  --info-2-600: #aa710c;
  --info-2-700: #956301;
  --info-2-800: #784e00;
  --info-3-100: #d1fcfc;
  --info-3-200: #a4f1f0;
  --info-3-300: #71e6e6;
  --info-3-400: #47cdcd;
  --info-3-50: #f2fbfb;
  --info-3-500: #3ab3b3;
  --info-3-600: #258a8b;
  --info-3-700: #246f6f;
  --info-3-800: #235c5c;
  --sea-blue-100: #e8f1fe;
  --sea-blue-200: #d0e1fb;
  --sea-blue-300: #a9cafe;
  --sea-blue-400: #85b5fe;
  --sea-blue-50: #f1f6fd;
  --sea-blue-500: #5b9bfd;
  --sea-blue-600: #076ff2;
  --sea-blue-700: #005bcb;
  --sea-blue-800: #004baa;
  --warning-100: #ffeee4;
  --warning-200: #fdd1b9;
  --warning-300: #fbb38b;
  --warning-400: #fc995d;
  --warning-50: #fff9f6;
  --warning-500: #ff7a00;
  --warning-600: #ba5c17;
  --warning-700: #9f4a01;
  --warning-800: #843e09;
}
umag-counter-v2 :root {
  --critical-100: #ffedeb;
  --critical-200: #ffcbc2;
  --critical-300: #ffa697;
  --critical-400: #ff725f;
  --critical-50: #fff6f5;
  --critical-500: #ff3826;
  --critical-600: #e31504;
  --critical-700: #c81d0f;
  --critical-800: #a51b0f;
  --emerald-100: #e1f9e4;
  --emerald-200: #c3f2cc;
  --emerald-300: #95e7a6;
  --emerald-400: #5bd47c;
  --emerald-50: #f2fcf3;
  --emerald-500: #2dbe60;
  --emerald-600: #0c9344;
  --emerald-700: #1d793c;
  --emerald-800: #1f6032;
  --grayscale-100: #fafafa;
  --grayscale-200: #f5f5f5;
  --grayscale-300: #e1e1e1;
  --grayscale-400: #cccccc;
  --grayscale-50: #ffffff;
  --grayscale-500: #a3a3a3;
  --grayscale-600: #898989;
  --grayscale-700: #5c5c5c;
  --grayscale-800: #1f1f1f;
  --grayscale-transparent-100: #1f1f1f1f;
  --grayscale-transparent-200: #1f1f1f3d;
  --grayscale-transparent-300: #1f1f1f52;
  --grayscale-transparent-400: #1f1f1fa3;
  --grayscale-transparent-50: #1f1f1f00;
  --grayscale-transparent-500: #1f1f1fb8;
  --grayscale-transparent-600: #1f1f1fcc;
  --grayscale-transparent-700: #1f1f1fe0;
  --grayscale-transparent-800: #1f1f1f;
  --info-1-100: #f8edff;
  --info-1-200: #eed6fe;
  --info-1-300: #e1b6fc;
  --info-1-400: #d088f8;
  --info-1-50: #fbf5ff;
  --info-1-500: #ba4cf0;
  --info-1-600: #ab31e2;
  --info-1-700: #9421c6;
  --info-1-800: #7c22a4;
  --info-2-100: #ffebd1;
  --info-2-200: #ffdaaa;
  --info-2-300: #ffc472;
  --info-2-400: #ffae1f;
  --info-2-50: #fff8f0;
  --info-2-500: #e59a01;
  --info-2-600: #aa710c;
  --info-2-700: #956301;
  --info-2-800: #784e00;
  --info-3-100: #d1fcfc;
  --info-3-200: #a4f1f0;
  --info-3-300: #71e6e6;
  --info-3-400: #47cdcd;
  --info-3-50: #f2fbfb;
  --info-3-500: #3ab3b3;
  --info-3-600: #258a8b;
  --info-3-700: #246f6f;
  --info-3-800: #235c5c;
  --sea-blue-100: #e8f1fe;
  --sea-blue-200: #d0e1fb;
  --sea-blue-300: #a9cafe;
  --sea-blue-400: #85b5fe;
  --sea-blue-50: #f1f6fd;
  --sea-blue-500: #5b9bfd;
  --sea-blue-600: #076ff2;
  --sea-blue-700: #005bcb;
  --sea-blue-800: #004baa;
  --warning-100: #ffeee4;
  --warning-200: #fdd1b9;
  --warning-300: #fbb38b;
  --warning-400: #fc995d;
  --warning-50: #fff9f6;
  --warning-500: #ff7a00;
  --warning-600: #ba5c17;
  --warning-700: #9f4a01;
  --warning-800: #843e09;
}
umag-counter-v2 :root {
  --bg-accent-active: var(--sea-blue-800);
  --bg-accent-default: var(--sea-blue-600);
  --bg-accent-hover: var(--sea-blue-700);
  --bg-accent-soft: var(--sea-blue-100);
  --bg-accent-soft-active: var(--sea-blue-200);
  --bg-brand-active: var(--emerald-700);
  --bg-brand-default: var(--emerald-500);
  --bg-brand-hover: var(--emerald-600);
  --bg-brand-soft: var(--emerald-100);
  --bg-brand-soft-active: var(--emerald-200);
  --bg-critical-active: var(--critical-700);
  --bg-critical-default: var(--critical-500);
  --bg-critical-hover: var(--critical-600);
  --bg-critical-soft: var(--critical-100);
  --bg-critical-soft-active: var(--critical-200);
  --bg-disabled-default: var(--grayscale-300);
  --bg-disabled-default-inverse: var(--grayscale-600);
  --bg-primary-active: var(--grayscale-300);
  --bg-primary-default: var(--grayscale-50);
  --bg-primary-hover: var(--grayscale-200);
  --bg-primary-inverse: var(--grayscale-700);
  --bg-secondary-active: var(--grayscale-400);
  --bg-secondary-default: var(--grayscale-200);
  --bg-secondary-hover: var(--grayscale-300);
  --bg-secondary-inverse: var(--grayscale-500);
  --bg-secondary-inverse-hover: var(--grayscale-600);
  --bg-transparent-default: var(--grayscale-transparent-50);
  --bg-transparent-hover: var(--grayscale-transparent-100);
  --bg-transparent-active: var(--grayscale-transparent-200);
  --bg-surface-overlay: #5c5c5c3d;
  --bg-surface-sf-0: var(--grayscale-50);
  --bg-surface-sf-1: var(--grayscale-200);
  --bg-surface-sf-2: var(--grayscale-300);
  --bg-tertiary-active: var(--grayscale-500);
  --bg-tertiary-default: var(--grayscale-300);
  --bg-tertiary-hover: var(--grayscale-400);
  --bg-warning-active: var(--warning-700);
  --bg-warning-default: var(--warning-500);
  --bg-warning-hover: var(--warning-600);
  --bg-warning-soft: var(--warning-100);
  --bg-warning-soft-active: var(--warning-200);
  --border-accent-active: var(--sea-blue-800);
  --border-accent-default: var(--sea-blue-600);
  --border-accent-hover: var(--sea-blue-700);
  --border-brand-active: var(--emerald-700);
  --border-brand-default: var(--emerald-500);
  --border-brand-hover: var(--emerald-600);
  --border-critical-active: var(--critical-700);
  --border-critical-default: var(--critical-500);
  --border-critical-hover: var(--critical-600);
  --border-primary-default: var(--grayscale-transparent-300);
  --border-primary-soft: var(--grayscale-transparent-100);
  --border-warning-default: var(--warning-500);
  --icon-accent-active: var(--sea-blue-800);
  --icon-accent-default: var(--sea-blue-600);
  --icon-accent-hover: var(--sea-blue-700);
  --icon-brand-active: var(--emerald-700);
  --icon-brand-default: var(--emerald-500);
  --icon-brand-hover: var(--emerald-600);
  --icon-critical-active: var(--critical-700);
  --icon-critical-default: var(--critical-500);
  --icon-critical-hover: var(--critical-600);
  --icon-disabled-default: var(--grayscale-500);
  --icon-primary-default: var(--grayscale-800);
  --icon-primary-inverse: var(--grayscale-50);
  --icon-primary-inverse-hover: var(--grayscale-200);
  --icon-promo-default: var(--info-1-500);
  --icon-secondary-default: var(--grayscale-700);
  --icon-secondary-inverse: var(--grayscale-400);
  --icon-tertiary-default: var(--grayscale-300);
  --icon-warning-default: var(--warning-500);
  --text-accent-active: var(--sea-blue-800);
  --text-accent-default: var(--sea-blue-600);
  --text-accent-hover: var(--sea-blue-700);
  --text-brand-active: var(--emerald-700);
  --text-brand-default: var(--emerald-500);
  --text-brand-hover: var(--emerald-600);
  --text-critical-active: var(--critical-700);
  --text-critical-default: var(--critical-500);
  --text-critical-hover: var(--critical-600);
  --text-disabled-default: var(--grayscale-500);
  --text-primary-default: var(--grayscale-800);
  --text-primary-inverse: var(--grayscale-50);
  --text-promo-default: var(--info-1-500);
  --text-secondary-default: var(--grayscale-700);
  --text-secondary-inverse: var(--grayscale-500);
  --text-tertiary-default: var(--grayscale-500);
  --text-warning-default: var(--warning-500);
  --bg-promo-default: var(--info-1-500);
  --bg-promo-hover: var(--info-1-600);
  --bg-promo-active: var(--info-1-700);
  --bg-promo-soft: var(--info-1-100);
  --bg-promo-soft-active: var(--info-1-200);
  --text-promo-default: var(--info-1-500);
  --text-promo-hover: var(--info-1-600);
  --text-promo-active: var(--info-1-700);
  --text-promo-soft: var(--info-1-100);
  --text-promo-soft-active: var(--info-1-200);
  --icon-promo-default: var(--info-1-500);
  --icon-promo-hover: var(--info-1-600);
  --icon-promo-active: var(--info-1-700);
  --icon-promo-soft: var(--info-1-100);
  --icon-promo-soft-active: var(--info-1-200);
}
umag-counter-v2 :root {
  --radius-0: 0px;
  --radius-0-5x: 3px;
  --radius-1x: 6px;
  --radius-2x: 12px;
  --radius-3x: 18px;
  --radius-4x: 24px;
  --radius-full: 9999px;
}
umag-counter-v2 :root {
  --font-line-height-s: 14px;
  --font-line-height-m: 18px;
  --font-line-height-l: 20px;
  --font-line-height-xl: 24px;
  --font-line-height-2xl: 28px;
  --font-line-height-3xl: 36px;
  --font-paragraph-spacing-m: 4px;
  --font-paragraph-spacing-s: 4px;
  --font-paragraph-spacing-xs: 4px;
  --font-paragraph-spacing-l: 8px;
  --font-paragraph-spacing-xl: 8px;
  --font-paragraph-spacing-xxl: 8px;
  --font-size-s: 12px;
  --font-size-m: 14px;
  --font-size-l: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-family-roboto: Roboto;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
}
umag-counter-v2 :root {
  --0: 0px;
  --2: 2px;
  --4: 4px;
  --6: 6px;
  --8: 8px;
  --12: 12px;
  --16: 16px;
  --20: 20px;
  --24: 24px;
  --28: 28px;
  --32: 32px;
  --40: 40px;
}
umag-counter-v2 :root {
  --space-0: var(--0);
  --space-0-5x: var(--2);
  --space-1x: var(--4);
  --space-1-5x: var(--6);
  --space-2x: var(--8);
  --space-3x: var(--12);
  --space-4x: var(--16);
  --space-5x: var(--20);
  --space-6x: var(--24);
  --space-7x: var(--28);
  --space-8x: var(--32);
  --space-10x: var(--40);
}
umag-counter-v2 {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-primary-soft);
  background-color: var(--bg-primary-default);
  border-radius: var(--radius-1x);
}
umag-counter-v2 input {
  border: none;
  color: var(--text-primary-default);
  text-align: center;
  border: none;
  width: 100%;
  padding: 0;
}
umag-counter-v2 input:enabled:focus {
  box-shadow: none;
}
umag-counter-v2 .counter-btn {
  display: inline-flex;
  align-items: center;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
}
umag-counter-v2 .counter-btn umag-icon {
  color: var(--icon-primary-default);
  margin: var(--space-2x) 10px;
}
umag-counter-v2 .counter-btn:hover {
  transition: background-color 0.2s;
  background-color: var(--bg-accent-soft) !important;
}
umag-counter-v2 .counter-btn:hover umag-icon {
  transition: color 0.2s;
  color: var(--icon-accent-default);
}
umag-counter-v2 .minus-disabled umag-icon,
umag-counter-v2 .plus-disabled umag-icon {
  color: var(--text-disabled-default);
}
umag-counter-v2.disabled {
  transition: color 0.2s;
  border-color: var(--border-primary-soft) !important;
  background-color: var(--bg-secondary-default) !important;
}
umag-counter-v2.disabled input {
  transition: color 0.2s;
  background-color: var(--bg-secondary-default) !important;
}
umag-counter-v2.disabled .p-inputnumber-button-down span,
umag-counter-v2.disabled .p-inputnumber-button-up span {
  color: var(--text-disabled-default);
}
umag-counter-v2.disabled {
  pointer-events: none;
}
umag-counter-v2.size-s {
  border-radius: var(--radius-0-5x);
  border-width: 1px;
}
umag-counter-v2.size-s input {
  width: 18px;
  margin: 0 var(--space-0-5x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
umag-counter-v2.size-s .counter-btn {
  width: 30px;
  height: 32px;
}
umag-counter-v2.size-s .counter-btn.decrease-btn:hover {
  border-radius: 2px 0 0 2px !important;
}
umag-counter-v2.size-s .counter-btn:hover {
  border-radius: 0 2px 2px 0 !important;
}
umag-counter-v2.size-s .counter-btn umag-icon {
  width: 16px !important;
  height: 16px !important;
  margin: 7px var(--space-2x);
}
umag-counter-v2.size-m {
  border-radius: var(--radius-1x);
}
umag-counter-v2.size-m input {
  width: 44px;
  margin: 0 var(--space-1x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-counter-v2.size-m .counter-btn {
  width: 38px;
  height: 38px;
}
umag-counter-v2.size-m .counter-btn.decrease-btn:hover {
  border-radius: 4px 0 0 4px !important;
}
umag-counter-v2.size-m .counter-btn:hover {
  border-radius: 0 4px 4px 0 !important;
}
umag-counter-v2.size-m .counter-btn umag-icon {
  margin: var(--space-2x) 10px;
}
umag-counter-v2.warning {
  border-color: var(--border-warning-default) !important;
}
umag-counter-v2.error {
  border-color: var(--border-critical-default) !important;
}
umag-counter-v2 input[type=number]::-webkit-outer-spin-button,
umag-counter-v2 input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
umag-counter-v2 input[type=number] {
  -moz-appearance: textfield;
}
umag-counter-v2 input[type=number] {
  appearance: textfield;
}







h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--font-line-height-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--font-line-height-2xl);
}

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

h4 {
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

h5 {
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-l {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

.text-l-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

.text-m {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-m-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-s {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}

.text-s-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}



/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: block;
  opacity: 0.9;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: transparent;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 4px;
  height: 10px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #aaa;
  height: 6px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #aaa;
  width: 6px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
.umag-date-picker-size-l .umag-date-picker.two-inputs {
  width: 680px;
}
.umag-date-picker-size-l .umag-date-picker.without-label umag-icon {
  top: 24px;
}
.umag-date-picker-size-l .umag-date-picker .input-container umag-icon {
  transform: translateY(-50%);
}
.umag-date-picker-size-l .umag-date-picker .input-container:not(.has-label) umag-icon {
  top: 50%;
}
.umag-date-picker-size-l .umag-date-picker .input-container umag-input .wrapper {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
.umag-date-picker-size-l .umag-date-panel {
  width: 340px;
}
.umag-date-picker-size-l .umag-date-panel.up {
  bottom: 56px;
}
.umag-date-picker-size-l .umag-date-panel.two-months {
  width: 680px;
}
.umag-date-picker-size-l .umag-date-panel p-datepicker .p-datepicker-panel {
  padding: var(--space-4x) !important;
}
.umag-date-picker-size-l .umag-date-panel p-datepicker .p-datepicker-panel .p-datepicker-calendar-container th {
  padding: 0;
  width: 44px;
  height: 32px;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
.umag-date-picker-size-l .umag-date-panel p-datepicker .p-datepicker-panel .p-datepicker-calendar-container td {
  padding: 0;
  width: 44px;
  height: 44px;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
.umag-date-picker-size-l .umag-date-panel p-datepicker .p-datepicker-select-year {
  font-size: var(--font-size-xl);
  line-height: var(--font-line-height-xl);
}
.umag-date-picker-size-l .umag-date-panel p-datepicker .p-datepicker-select-month {
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-xl);
  color: var(--text-primary-default);
}
.umag-date-picker-size-l .umag-date-panel p-datepicker thead tr span {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
.umag-date-picker-size-l .umag-date-panel p-datepicker .p-datepicker-prev-button,
.umag-date-picker-size-l .umag-date-panel p-datepicker .p-datepicker-next-button {
  width: 44px;
  height: 44px;
}
.umag-date-picker-size-l .umag-date-panel p-datepicker .umag-date-footer {
  padding-top: var(--space-4x);
  gap: var(--space-4x);
}
.umag-date-picker-size-l .umag-date-panel p-datepicker .umag-date-footer__time .from-select-input__title,
.umag-date-picker-size-l .umag-date-panel p-datepicker .umag-date-footer__time .to-select-input__title {
  top: 14px;
  left: 18px;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
.umag-date-picker-size-l .umag-date-panel p-datepicker .umag-date-footer__time umag-select .select__input-wrapper {
  border-radius: var(--radius-1x);
}
.umag-date-picker-size-l .umag-date-panel p-datepicker .umag-date-footer__time umag-select .select__input {
  padding: var(--space-0-5x) var(--space-1-5x) var(--space-0-5x) auto;
  width: 56px;
}

.umag-date-picker-size-m .umag-date-picker.two-inputs {
  width: 496px;
}
.umag-date-picker-size-m .umag-date-picker.without-label umag-icon {
  top: 20px;
}
.umag-date-picker-size-m .umag-date-picker .input-container umag-icon {
  transform: translateY(-50%);
}
.umag-date-picker-size-m .umag-date-picker .input-container:not(.has-label) umag-icon {
  top: 50%;
}
.umag-date-picker-size-m .umag-date-picker .input-container umag-input .wrapper {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
.umag-date-picker-size-m .umag-date-panel {
  width: 248px;
}
.umag-date-picker-size-m .umag-date-panel.up {
  bottom: 48px;
}
.umag-date-picker-size-m .umag-date-panel.two-months {
  width: 496px;
}
.umag-date-picker-size-m .umag-date-panel p-datepicker .p-datepicker-panel {
  padding: var(--space-3x) !important;
}
.umag-date-picker-size-m .umag-date-panel p-datepicker .p-datepicker-select-year {
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
.umag-date-picker-size-m .umag-date-panel p-datepicker .p-datepicker-select-month {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-l);
  color: var(--text-primary-default);
}
.umag-date-picker-size-m .umag-date-panel p-datepicker thead tr span {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
.umag-date-picker-size-m .umag-date-panel p-datepicker .p-datepicker-prev-button,
.umag-date-picker-size-m .umag-date-panel p-datepicker .p-datepicker-next-button {
  width: 32px;
  height: 32px;
}
.umag-date-picker-size-m .umag-date-panel p-datepicker .umag-date-footer {
  padding-top: var(--space-3x);
  gap: var(--space-3x);
}
.umag-date-picker-size-m .umag-date-panel p-datepicker .umag-date-footer__time .from-select-input__title,
.umag-date-picker-size-m .umag-date-panel p-datepicker .umag-date-footer__time .to-select-input__title {
  top: 12px;
  left: 12px;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
.umag-date-picker-size-m .umag-date-panel p-datepicker .umag-date-footer__time umag-select .select__input-wrapper {
  border-radius: var(--radius-1x);
}
.umag-date-picker-size-m .umag-date-panel p-datepicker .umag-date-footer__time umag-select .select__input {
  padding: var(--space-1x) var(--space-1-5x) var(--space-1x) auto;
  width: 48px;
}

.umag-date-picker-size-s .umag-date-picker.two-inputs {
  width: 496px;
}
.umag-date-picker-size-s .umag-date-picker.without-label umag-icon {
  top: 15px;
}
.umag-date-picker-size-s .umag-date-picker .input-container umag-icon {
  transform: translateY(-50%);
}
.umag-date-picker-size-s .umag-date-picker .input-container:not(.has-label) umag-icon {
  top: 50%;
}
.umag-date-picker-size-s .umag-date-picker .input-container umag-input .wrapper {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
.umag-date-picker-size-s .umag-date-panel {
  width: 248px;
}
.umag-date-picker-size-s .umag-date-panel.up {
  bottom: 38px;
}
.umag-date-picker-size-s .umag-date-panel.two-months {
  width: 496px;
}
.umag-date-picker-size-s .umag-date-panel p-datepicker .p-datepicker-panel {
  padding: var(--space-3x) !important;
}
.umag-date-picker-size-s .umag-date-panel p-datepicker .p-datepicker-select-year {
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
.umag-date-picker-size-s .umag-date-panel p-datepicker .p-datepicker-select-month {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-m);
  color: var(--text-primary-default);
}
.umag-date-picker-size-s .umag-date-panel p-datepicker thead tr {
  padding: var(--space-1x) var(--space-0);
}
.umag-date-picker-size-s .umag-date-panel p-datepicker thead tr span {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
.umag-date-picker-size-s .umag-date-panel p-datepicker .p-datepicker-prev-button,
.umag-date-picker-size-s .umag-date-panel p-datepicker .p-datepicker-next-button {
  width: 32px;
  height: 32px;
}
.umag-date-picker-size-s .umag-date-panel p-datepicker .umag-date-footer {
  padding-top: var(--space-3x);
  gap: var(--space-3x);
}
.umag-date-picker-size-s .umag-date-panel p-datepicker .umag-date-footer__time .from-select-input__title,
.umag-date-picker-size-s .umag-date-panel p-datepicker .umag-date-footer__time .to-select-input__title {
  top: 7px;
  left: 12px;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
.umag-date-picker-size-s .umag-date-panel p-datepicker .umag-date-footer__time umag-select .select__input-wrapper {
  border-radius: var(--radius-0-5x);
}
.umag-date-picker-size-s .umag-date-panel p-datepicker .umag-date-footer__time umag-select .select__input {
  padding: var(--space-1x) var(--space-1-5x) var(--space-1x) auto;
  width: 48px;
}

.has-label umag-icon.size-s {
  top: 40px;
}
.has-label umag-icon.size-m {
  top: 46px;
}
.has-label umag-icon.size-l {
  top: 52px;
}

.input-container umag-icon.size-s {
  left: 8px !important;
}
.input-container umag-icon.size-m {
  left: 9px !important;
}
.input-container umag-icon.size-l {
  left: 13px !important;
}

.umag-date-picker-wrap {
  position: relative;
  display: inline-block;
  width: fit-content;
}
.umag-date-picker-wrap .umag-date-picker {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 340px;
}
.umag-date-picker-wrap .umag-date-picker.two-inputs {
  gap: var(--space-2x);
  align-items: stretch;
}
.umag-date-picker-wrap .umag-date-picker umag-input .control-icon {
  flex-shrink: 0;
}
.umag-date-picker-wrap .umag-date-picker umag-input .umag-input .control {
  flex-direction: row-reverse;
}
.umag-date-picker-wrap .umag-date-picker umag-input.active-focus .control {
  border-color: var(--border-accent-active);
}
.umag-date-picker-wrap .umag-date-picker .input-container {
  flex: 1;
  position: relative;
}
.umag-date-picker-wrap .umag-date-picker .input-container.date-picker-input-disabled {
  cursor: not-allowed;
}
.umag-date-picker-wrap .umag-date-picker .input-container.date-picker-input-disabled umag-input .umag-input .control.disabled {
  border-color: transparent;
}
.umag-date-picker-wrap .umag-date-picker .input-container.date-picker-input-disabled umag-icon {
  color: var(--icon-disabled-default);
}
.umag-date-picker-wrap .umag-date-picker .input-container.date-picker-input-error umag-input .umag-input .wrapper {
  border-color: var(--border-critical-default) !important;
}
.umag-date-picker-wrap .umag-date-picker .input-container umag-icon {
  position: absolute;
  transform: translateY(-50%);
  pointer-events: none;
}
.umag-date-picker-wrap .umag-date-picker umag-icon {
  position: absolute;
  transform: translateY(-50%);
  pointer-events: none;
}

.umag-date-panel {
  position: absolute;
  z-index: var(--z-popover);
  right: 0;
  margin-top: var(--space-2x);
  box-shadow: var(--shadow-pt-8);
  border-radius: var(--radius-1x);
  overflow: hidden;
}
.umag-date-panel.down {
  top: 100%;
}
.umag-date-panel.up {
  margin-top: 0 !important;
}
.umag-date-panel.append-to-body {
  position: fixed;
  right: auto;
  margin-top: 0;
  z-index: var(--z-popover);
}

.umag-date-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--bg-transparent-active);
}

.umag-date-mobile-host {
  pointer-events: none;
}

.umag-date-mobile-host .umag-date-mobile-backdrop,
.umag-date-mobile-host .umag-date-panel-mobile-sheet {
  pointer-events: auto;
}

.umag-date-panel-mobile-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  max-height: 100dvh;
  --sheet-peek-cap: min(90dvh, 720px);
  --sheet-peek-initial-height: var(--sheet-peek-cap);
}
.umag-date-panel-mobile-sheet .bottom-sheet__header,
.umag-date-panel-mobile-sheet .bottom-sheet__footer {
  display: none;
}
.umag-date-panel-mobile-sheet .bottom-sheet__content {
  padding: 0;
  min-height: 0;
}
.umag-date-panel-mobile-sheet .umag-date-panel {
  position: static;
  margin-top: 0;
  width: 100%;
  box-shadow: none;
  border-radius: 0;
}
.umag-date-panel-mobile-sheet .umag-date-panel p-datepicker .p-datepicker-panel {
  width: 100%;
  min-height: 0;
  border-radius: 0;
  padding: var(--space-4x) !important;
  padding-bottom: calc(var(--space-4x) + env(safe-area-inset-bottom, 0)) !important;
}
.umag-date-panel-mobile-sheet .p-datepicker-prev,
.umag-date-panel-mobile-sheet .p-datepicker-next {
  width: 40px;
  height: 40px;
}
.umag-date-panel-mobile-sheet .p-datepicker-prev chevronrighticon, .umag-date-panel-mobile-sheet .p-datepicker-prev chevronlefticon,
.umag-date-panel-mobile-sheet .p-datepicker-next chevronrighticon,
.umag-date-panel-mobile-sheet .p-datepicker-next chevronlefticon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-primary-default);
}

.umag-date-picker-error {
  color: var(--text-critical-default);
  margin-top: var(--space-2x);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}

p-datepicker.p-datepicker {
  display: flex;
}
p-datepicker.without-footer .p-datepicker-panel {
  min-height: 312px;
}
p-datepicker .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
  background: transparent;
}
p-datepicker .p-datepicker-day:focus-visible {
  outline: none;
}
p-datepicker .p-datepicker-day-selected-range span {
  color: var(--text-primary-default) !important;
}
p-datepicker .p-button-secondary:not(:disabled):active {
  border-color: transparent !important;
}
p-datepicker .p-datepicker-year-view,
p-datepicker .p-datepicker-month-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-1x);
  padding: var(--space-3x);
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-primary-default);
  position: absolute;
  z-index: 3;
  width: 93%;
}
p-datepicker .p-datepicker-year-view .p-datepicker-year-selected,
p-datepicker .p-datepicker-year-view .p-datepicker-month-selected,
p-datepicker .p-datepicker-month-view .p-datepicker-year-selected,
p-datepicker .p-datepicker-month-view .p-datepicker-month-selected {
  background: var(--bg-accent-soft);
  color: var(--text-accent-active);
}
p-datepicker .p-datepicker-year-view .p-datepicker-year,
p-datepicker .p-datepicker-year-view .p-datepicker-month,
p-datepicker .p-datepicker-month-view .p-datepicker-year,
p-datepicker .p-datepicker-month-view .p-datepicker-month {
  width: 100%;
  display: flex;
  min-height: 36px;
  padding: var(--space-2x) var(--space-3x);
  border-radius: var(--radius-0-5x);
  cursor: pointer;
  color: var(--text-primary-default);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
p-datepicker .p-datepicker-year-view .p-datepicker-year:hover {
  background: var(--bg-primary-hover);
  border-radius: var(--radius-4x);
}
p-datepicker .p-datepicker-month:hover {
  background: var(--bg-primary-hover) !important;
}
p-datepicker .p-datepicker-panel {
  color: var(--text-primary-default);
  background: var(--bg-surface-sf-0);
  border: none !important;
  min-height: 368px;
  box-sizing: border-box;
}
p-datepicker .p-datepicker-panel .p-datepicker-title {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}
p-datepicker .p-datepicker-panel thead {
  color: var(--text-secondary-inverse);
}
p-datepicker .p-datepicker-panel thead tr th.p-datepicker-weekday-cell {
  padding: 0;
}
p-datepicker .p-datepicker-panel thead tr span,
p-datepicker .p-datepicker-panel thead tr .p-datepicker-weekday {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
p-datepicker .p-datepicker-panel .p-datepicker-header {
  color: var(--text-primary-default);
  padding: var(--space-1x) 0;
  border: none;
}
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-prev-button,
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-next-button {
  color: var(--icon-primary-default);
  border-radius: var(--radius-1x);
  box-shadow: none;
}
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-prev-button:hover,
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-next-button:hover {
  background-color: var(--bg-secondary-hover);
}
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-title .p-datepicker-select-year {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-l, 20px);
}
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-title .p-datepicker-decade {
  padding: 0 var(--space-2x);
  color: var(--text-secondary-default);
}
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:hover,
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-title .p-datepicker-decade:hover {
  background-color: transparent;
}
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-title .p-datepicker-decade {
  font-size: var(--font-size-s);
}
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-title .p-datepicker-select-month {
  padding: 0 var(--space-2x);
}
p-datepicker .p-datepicker-panel .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:hover {
  background: transparent;
  color: var(--text-primary-default);
}
p-datepicker .p-datepicker-panel .p-datepicker-other-month span {
  color: var(--text-secondary-inverse);
}
p-datepicker .p-datepicker-panel .p-datepicker-other-month.p-datepicker-day-selected-edge-first.p-datepicker-day-selected-range .p-datepicker-day-selected,
p-datepicker .p-datepicker-panel .p-datepicker-other-month.p-datepicker-day-selected-edge-first.p-datepicker-day-selected-range .p-datepicker-day, p-datepicker .p-datepicker-panel .p-datepicker-other-month.p-datepicker-day-selected-edge-last.p-datepicker-day-selected-range .p-datepicker-day-selected,
p-datepicker .p-datepicker-panel .p-datepicker-other-month.p-datepicker-day-selected-edge-last.p-datepicker-day-selected-range .p-datepicker-day {
  border-radius: var(--radius-4x);
  background: var(--bg-accent-default) !important;
  color: var(--text-primary-inverse) !important;
}
p-datepicker .p-datepicker-panel .p-datepicker-day {
  border-radius: var(--radius-4x);
}
p-datepicker .p-datepicker-panel thead th {
  background-color: var(--bg-primary-default) !important;
}
p-datepicker .p-datepicker-panel th,
p-datepicker .p-datepicker-panel td,
p-datepicker .p-datepicker-panel th.p-datepicker-weekday-cell,
p-datepicker .p-datepicker-panel td.p-datepicker-day-cell {
  width: 32px;
  height: 32px;
  border-bottom: none !important;
  padding: 0;
}
p-datepicker .p-datepicker-panel th span,
p-datepicker .p-datepicker-panel th .p-datepicker-day,
p-datepicker .p-datepicker-panel td span,
p-datepicker .p-datepicker-panel td .p-datepicker-day,
p-datepicker .p-datepicker-panel th.p-datepicker-weekday-cell span,
p-datepicker .p-datepicker-panel th.p-datepicker-weekday-cell .p-datepicker-day,
p-datepicker .p-datepicker-panel td.p-datepicker-day-cell span,
p-datepicker .p-datepicker-panel td.p-datepicker-day-cell .p-datepicker-day {
  box-shadow: none !important;
}
p-datepicker .p-datepicker-panel th.p-datepicker-today span,
p-datepicker .p-datepicker-panel th.p-datepicker-today .p-datepicker-current-day,
p-datepicker .p-datepicker-panel td.p-datepicker-today span,
p-datepicker .p-datepicker-panel td.p-datepicker-today .p-datepicker-current-day,
p-datepicker .p-datepicker-panel th.p-datepicker-weekday-cell.p-datepicker-today span,
p-datepicker .p-datepicker-panel th.p-datepicker-weekday-cell.p-datepicker-today .p-datepicker-current-day,
p-datepicker .p-datepicker-panel td.p-datepicker-day-cell.p-datepicker-today span,
p-datepicker .p-datepicker-panel td.p-datepicker-day-cell.p-datepicker-today .p-datepicker-current-day {
  border-radius: var(--radius-4x);
  background: var(--bg-tertiary-default);
  color: var(--text-primary-default);
}
p-datepicker .p-datepicker-panel th .p-datepicker-day-selected-range,
p-datepicker .p-datepicker-panel td .p-datepicker-day-selected-range,
p-datepicker .p-datepicker-panel th.p-datepicker-weekday-cell .p-datepicker-day-selected-range,
p-datepicker .p-datepicker-panel td.p-datepicker-day-cell .p-datepicker-day-selected-range {
  background: var(--bg-accent-soft);
}
p-datepicker .p-datepicker-panel th .p-datepicker-day-selected-range .p-datepicker-day-selected,
p-datepicker .p-datepicker-panel td .p-datepicker-day-selected-range .p-datepicker-day-selected,
p-datepicker .p-datepicker-panel th.p-datepicker-weekday-cell .p-datepicker-day-selected-range .p-datepicker-day-selected,
p-datepicker .p-datepicker-panel td.p-datepicker-day-cell .p-datepicker-day-selected-range .p-datepicker-day-selected {
  background: var(--bg-accent-soft) !important;
  border-radius: 0 !important;
  color: var(--text-primary-default) !important;
}
p-datepicker .p-datepicker-panel th .p-datepicker-day-cell .p-datepicker-day-selected-range,
p-datepicker .p-datepicker-panel td .p-datepicker-day-cell .p-datepicker-day-selected-range,
p-datepicker .p-datepicker-panel th.p-datepicker-weekday-cell .p-datepicker-day-cell .p-datepicker-day-selected-range,
p-datepicker .p-datepicker-panel td.p-datepicker-day-cell .p-datepicker-day-cell .p-datepicker-day-selected-range {
  background: var(--bg-accent-soft) !important;
  border-radius: 0 !important;
  color: var(--text-primary-default) !important;
}
p-datepicker .p-datepicker-panel th:hover span,
p-datepicker .p-datepicker-panel td:hover span,
p-datepicker .p-datepicker-panel th.p-datepicker-weekday-cell:hover span,
p-datepicker .p-datepicker-panel td.p-datepicker-day-cell:hover span {
  background: var(--bg-primary-hover);
}
p-datepicker .p-datepicker-panel .p-datepicker-day-selected-edge-first.p-datepicker-day-selected-range .p-datepicker-day-selected,
p-datepicker .p-datepicker-panel .p-datepicker-day-selected-edge-last.p-datepicker-day-selected-range .p-datepicker-day-selected {
  border-radius: var(--radius-4x) !important;
  background: var(--bg-accent-default) !important;
  color: var(--text-primary-inverse) !important;
}
p-datepicker .p-datepicker-panel .p-datepicker-day-selected {
  background: var(--bg-accent-soft) !important;
  border-radius: 0 !important;
  color: var(--text-primary-default) !important;
}
p-datepicker .p-datepicker-panel .p-hover-highlight span {
  background: var(--bg-accent-default) !important;
  color: var(--text-primary-inverse) !important;
}
p-datepicker.two-months .p-datepicker-calendar {
  padding: 0 var(--space-3x) 0 0 !important;
}
p-datepicker.two-months .p-datepicker-calendar:first-child .p-datepicker-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
p-datepicker.two-months .p-datepicker-calendar:last-child {
  padding-right: 0 !important;
  padding-left: var(--space-3x) !important;
  border-left: 1px solid var(--border-primary-soft);
}
p-datepicker.two-months .p-datepicker-calendar:last-child .p-datepicker-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
p-datepicker.two-months .p-datepicker-calendar:last-child .p-datepicker-header .p-datepicker-title {
  grid-column: 2;
  justify-self: center;
}
p-datepicker.two-months .p-datepicker-calendar:last-child .p-datepicker-header .p-datepicker-next {
  grid-column: 3;
  justify-self: end;
}
p-datepicker.two-months .p-datepicker-calendar .p-datepicker-other-month {
  visibility: hidden;
}
p-datepicker.range-mode .p-hover-highlight-range span,
p-datepicker.range-mode .p-hover-highlight-range .p-datepicker-day-selected,
p-datepicker.range-mode .p-datepicker-day-selected-range span,
p-datepicker.range-mode .p-datepicker-day-selected-range .p-datepicker-day-selected {
  background: var(--bg-accent-soft) !important;
  border-radius: 0 !important;
  color: var(--text-primary-default) !important;
}
p-datepicker.range-mode .p-datepicker-day-cell .p-datepicker-day-selected-range {
  background: var(--bg-accent-soft) !important;
  border-radius: 0 !important;
  color: var(--text-primary-default) !important;
}
p-datepicker.range-mode .p-datepicker-day-selected-edge-first {
  background: linear-gradient(to right, transparent 50%, var(--bg-accent-soft) 50%);
}
p-datepicker.range-mode .p-datepicker-day-selected-edge-last {
  background: linear-gradient(to right, var(--bg-accent-soft) 50%, transparent 50%);
}
p-datepicker.range-mode .p-datepicker-day-selected-edge-first.p-datepicker-day-selected-edge-last {
  background: none;
}
p-datepicker.single-mode .p-datepicker-day-selected,
p-datepicker.single-mode .p-highlight {
  border-radius: var(--radius-4x) !important;
  background: var(--bg-accent-default) !important;
  color: var(--text-primary-inverse) !important;
}
p-datepicker .p-datepicker-calendar {
  table-layout: fixed;
  width: 100%;
}
p-datepicker .p-datepicker-calendar th,
p-datepicker .p-datepicker-calendar td {
  width: 14.2857142857%;
}
p-datepicker .p-datepicker-calendar td > span {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
p-datepicker .p-datepicker-panel:not(.p-disabled) .p-datepicker-year-view .p-yearpicker-year:not(.p-disabled):focus,
p-datepicker .p-datepicker-panel:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus {
  box-shadow: none;
}
p-datepicker .p-datepicker-panel table {
  border-collapse: separate !important;
  border-spacing: 0 8px;
}

umag-input {
  display: block;
}

.umag-date-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.umag-date-footer.two-months-footer {
  flex-direction: row;
  border-top: 1px solid var(--border-primary-soft);
}
.umag-date-footer__time {
  display: flex;
  width: 100%;
  gap: var(--space-2x);
}
.umag-date-footer__time .from-select-input,
.umag-date-footer__time .to-select-input {
  width: 100%;
  position: relative;
}
.umag-date-footer__time .from-select-input__title,
.umag-date-footer__time .to-select-input__title {
  z-index: 1;
  position: absolute;
  color: var(--text-secondary-default);
}
.umag-date-footer__time .select__input {
  padding-right: var(--space-1-5x);
}
.umag-date-footer__time .single-mode .items-block {
  text-align: center;
}
.umag-date-footer__time umag-select {
  display: flex;
  align-items: flex-start;
  flex: 1 0 0;
}
.umag-date-footer__time umag-select .items-block {
  display: flex;
  justify-content: flex-end;
}
.umag-date-footer__actions {
  display: flex;
  width: 100%;
  gap: var(--space-2x);
}
.umag-date-footer__actions umag-button {
  display: flex;
  align-items: flex-start;
  flex: 1 0 0;
}

.umag-date-panel-mobile-sheet .p-datepicker-year-view, .umag-date-panel-mobile-sheet .p-datepicker-month-view {
  position: relative;
}

.p-datepicker-calendar td.p-range-start > span,
.p-datepicker-calendar td.p-range-end > span,
.p-datepicker-calendar td.p-datepicker-other-month.p-datepicker-day-selected-edge-first > span,
.p-datepicker-calendar td.p-datepicker-other-month.p-datepicker-day-selected-edge-last > span {
  background: var(--bg-accent-default) !important;
  color: var(--text-primary-inverse) !important;
  border-radius: var(--radius-full) !important;
}

.p-button-text.p-button-secondary {
  bottom: 0 !important;
}

umag-bottom-sheet-modal {
  display: block;
  height: 100%;
}

umag-complex-header-modal :root {
  --critical-100: #ffedeb;
  --critical-200: #ffcbc2;
  --critical-300: #ffa697;
  --critical-400: #ff725f;
  --critical-50: #fff6f5;
  --critical-500: #ff3826;
  --critical-600: #e31504;
  --critical-700: #c81d0f;
  --critical-800: #a51b0f;
  --emerald-100: #e1f9e4;
  --emerald-200: #c3f2cc;
  --emerald-300: #95e7a6;
  --emerald-400: #5bd47c;
  --emerald-50: #f2fcf3;
  --emerald-500: #2dbe60;
  --emerald-600: #0c9344;
  --emerald-700: #1d793c;
  --emerald-800: #1f6032;
  --grayscale-100: #fafafa;
  --grayscale-200: #f5f5f5;
  --grayscale-300: #e1e1e1;
  --grayscale-400: #cccccc;
  --grayscale-50: #ffffff;
  --grayscale-500: #a3a3a3;
  --grayscale-600: #898989;
  --grayscale-700: #5c5c5c;
  --grayscale-800: #1f1f1f;
  --grayscale-transparent-100: #1f1f1f1f;
  --grayscale-transparent-200: #1f1f1f3d;
  --grayscale-transparent-300: #1f1f1f52;
  --grayscale-transparent-400: #1f1f1fa3;
  --grayscale-transparent-50: #1f1f1f00;
  --grayscale-transparent-500: #1f1f1fb8;
  --grayscale-transparent-600: #1f1f1fcc;
  --grayscale-transparent-700: #1f1f1fe0;
  --grayscale-transparent-800: #1f1f1f;
  --info-1-100: #f8edff;
  --info-1-200: #eed6fe;
  --info-1-300: #e1b6fc;
  --info-1-400: #d088f8;
  --info-1-50: #fbf5ff;
  --info-1-500: #ba4cf0;
  --info-1-600: #ab31e2;
  --info-1-700: #9421c6;
  --info-1-800: #7c22a4;
  --info-2-100: #ffebd1;
  --info-2-200: #ffdaaa;
  --info-2-300: #ffc472;
  --info-2-400: #ffae1f;
  --info-2-50: #fff8f0;
  --info-2-500: #e59a01;
  --info-2-600: #aa710c;
  --info-2-700: #956301;
  --info-2-800: #784e00;
  --info-3-100: #d1fcfc;
  --info-3-200: #a4f1f0;
  --info-3-300: #71e6e6;
  --info-3-400: #47cdcd;
  --info-3-50: #f2fbfb;
  --info-3-500: #3ab3b3;
  --info-3-600: #258a8b;
  --info-3-700: #246f6f;
  --info-3-800: #235c5c;
  --sea-blue-100: #e8f1fe;
  --sea-blue-200: #d0e1fb;
  --sea-blue-300: #a9cafe;
  --sea-blue-400: #85b5fe;
  --sea-blue-50: #f1f6fd;
  --sea-blue-500: #5b9bfd;
  --sea-blue-600: #076ff2;
  --sea-blue-700: #005bcb;
  --sea-blue-800: #004baa;
  --warning-100: #ffeee4;
  --warning-200: #fdd1b9;
  --warning-300: #fbb38b;
  --warning-400: #fc995d;
  --warning-50: #fff9f6;
  --warning-500: #ff7a00;
  --warning-600: #ba5c17;
  --warning-700: #9f4a01;
  --warning-800: #843e09;
}
umag-complex-header-modal :root {
  --bg-accent-active: var(--sea-blue-800);
  --bg-accent-default: var(--sea-blue-600);
  --bg-accent-hover: var(--sea-blue-700);
  --bg-accent-soft: var(--sea-blue-100);
  --bg-accent-soft-active: var(--sea-blue-200);
  --bg-brand-active: var(--emerald-700);
  --bg-brand-default: var(--emerald-500);
  --bg-brand-hover: var(--emerald-600);
  --bg-brand-soft: var(--emerald-100);
  --bg-brand-soft-active: var(--emerald-200);
  --bg-critical-active: var(--critical-700);
  --bg-critical-default: var(--critical-500);
  --bg-critical-hover: var(--critical-600);
  --bg-critical-soft: var(--critical-100);
  --bg-critical-soft-active: var(--critical-200);
  --bg-disabled-default: var(--grayscale-300);
  --bg-disabled-default-inverse: var(--grayscale-600);
  --bg-primary-active: var(--grayscale-300);
  --bg-primary-default: var(--grayscale-50);
  --bg-primary-hover: var(--grayscale-200);
  --bg-primary-inverse: var(--grayscale-700);
  --bg-secondary-active: var(--grayscale-400);
  --bg-secondary-default: var(--grayscale-200);
  --bg-secondary-hover: var(--grayscale-300);
  --bg-secondary-inverse: var(--grayscale-500);
  --bg-secondary-inverse-hover: var(--grayscale-600);
  --bg-transparent-default: var(--grayscale-transparent-50);
  --bg-transparent-hover: var(--grayscale-transparent-100);
  --bg-transparent-active: var(--grayscale-transparent-200);
  --bg-surface-overlay: #5c5c5c3d;
  --bg-surface-sf-0: var(--grayscale-50);
  --bg-surface-sf-1: var(--grayscale-200);
  --bg-surface-sf-2: var(--grayscale-300);
  --bg-tertiary-active: var(--grayscale-500);
  --bg-tertiary-default: var(--grayscale-300);
  --bg-tertiary-hover: var(--grayscale-400);
  --bg-warning-active: var(--warning-700);
  --bg-warning-default: var(--warning-500);
  --bg-warning-hover: var(--warning-600);
  --bg-warning-soft: var(--warning-100);
  --bg-warning-soft-active: var(--warning-200);
  --border-accent-active: var(--sea-blue-800);
  --border-accent-default: var(--sea-blue-600);
  --border-accent-hover: var(--sea-blue-700);
  --border-brand-active: var(--emerald-700);
  --border-brand-default: var(--emerald-500);
  --border-brand-hover: var(--emerald-600);
  --border-critical-active: var(--critical-700);
  --border-critical-default: var(--critical-500);
  --border-critical-hover: var(--critical-600);
  --border-primary-default: var(--grayscale-transparent-300);
  --border-primary-soft: var(--grayscale-transparent-100);
  --border-warning-default: var(--warning-500);
  --icon-accent-active: var(--sea-blue-800);
  --icon-accent-default: var(--sea-blue-600);
  --icon-accent-hover: var(--sea-blue-700);
  --icon-brand-active: var(--emerald-700);
  --icon-brand-default: var(--emerald-500);
  --icon-brand-hover: var(--emerald-600);
  --icon-critical-active: var(--critical-700);
  --icon-critical-default: var(--critical-500);
  --icon-critical-hover: var(--critical-600);
  --icon-disabled-default: var(--grayscale-500);
  --icon-primary-default: var(--grayscale-800);
  --icon-primary-inverse: var(--grayscale-50);
  --icon-primary-inverse-hover: var(--grayscale-200);
  --icon-promo-default: var(--info-1-500);
  --icon-secondary-default: var(--grayscale-700);
  --icon-secondary-inverse: var(--grayscale-400);
  --icon-tertiary-default: var(--grayscale-300);
  --icon-warning-default: var(--warning-500);
  --text-accent-active: var(--sea-blue-800);
  --text-accent-default: var(--sea-blue-600);
  --text-accent-hover: var(--sea-blue-700);
  --text-brand-active: var(--emerald-700);
  --text-brand-default: var(--emerald-500);
  --text-brand-hover: var(--emerald-600);
  --text-critical-active: var(--critical-700);
  --text-critical-default: var(--critical-500);
  --text-critical-hover: var(--critical-600);
  --text-disabled-default: var(--grayscale-500);
  --text-primary-default: var(--grayscale-800);
  --text-primary-inverse: var(--grayscale-50);
  --text-promo-default: var(--info-1-500);
  --text-secondary-default: var(--grayscale-700);
  --text-secondary-inverse: var(--grayscale-500);
  --text-tertiary-default: var(--grayscale-500);
  --text-warning-default: var(--warning-500);
  --bg-promo-default: var(--info-1-500);
  --bg-promo-hover: var(--info-1-600);
  --bg-promo-active: var(--info-1-700);
  --bg-promo-soft: var(--info-1-100);
  --bg-promo-soft-active: var(--info-1-200);
  --text-promo-default: var(--info-1-500);
  --text-promo-hover: var(--info-1-600);
  --text-promo-active: var(--info-1-700);
  --text-promo-soft: var(--info-1-100);
  --text-promo-soft-active: var(--info-1-200);
  --icon-promo-default: var(--info-1-500);
  --icon-promo-hover: var(--info-1-600);
  --icon-promo-active: var(--info-1-700);
  --icon-promo-soft: var(--info-1-100);
  --icon-promo-soft-active: var(--info-1-200);
}
umag-complex-header-modal :root {
  --0: 0px;
  --2: 2px;
  --4: 4px;
  --6: 6px;
  --8: 8px;
  --12: 12px;
  --16: 16px;
  --20: 20px;
  --24: 24px;
  --28: 28px;
  --32: 32px;
  --40: 40px;
}
umag-complex-header-modal :root {
  --space-0: var(--0);
  --space-0-5x: var(--2);
  --space-1x: var(--4);
  --space-1-5x: var(--6);
  --space-2x: var(--8);
  --space-3x: var(--12);
  --space-4x: var(--16);
  --space-5x: var(--20);
  --space-6x: var(--24);
  --space-7x: var(--28);
  --space-8x: var(--32);
  --space-10x: var(--40);
}
umag-complex-header-modal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
umag-complex-header-modal h3 {
  margin: var(--space-2x) 0;
  color: var(--text-primary-default);
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  umag-complex-header-modal h3 {
    width: 100%;
    text-align: center;
    margin-left: var(--space-10x);
  }
}
umag-complex-header-modal .dialog-close-icon {
  cursor: pointer;
  color: var(--icon-primary-default);
}

umag-dialog-modal :root {
  --critical-100: #ffedeb;
  --critical-200: #ffcbc2;
  --critical-300: #ffa697;
  --critical-400: #ff725f;
  --critical-50: #fff6f5;
  --critical-500: #ff3826;
  --critical-600: #e31504;
  --critical-700: #c81d0f;
  --critical-800: #a51b0f;
  --emerald-100: #e1f9e4;
  --emerald-200: #c3f2cc;
  --emerald-300: #95e7a6;
  --emerald-400: #5bd47c;
  --emerald-50: #f2fcf3;
  --emerald-500: #2dbe60;
  --emerald-600: #0c9344;
  --emerald-700: #1d793c;
  --emerald-800: #1f6032;
  --grayscale-100: #fafafa;
  --grayscale-200: #f5f5f5;
  --grayscale-300: #e1e1e1;
  --grayscale-400: #cccccc;
  --grayscale-50: #ffffff;
  --grayscale-500: #a3a3a3;
  --grayscale-600: #898989;
  --grayscale-700: #5c5c5c;
  --grayscale-800: #1f1f1f;
  --grayscale-transparent-100: #1f1f1f1f;
  --grayscale-transparent-200: #1f1f1f3d;
  --grayscale-transparent-300: #1f1f1f52;
  --grayscale-transparent-400: #1f1f1fa3;
  --grayscale-transparent-50: #1f1f1f00;
  --grayscale-transparent-500: #1f1f1fb8;
  --grayscale-transparent-600: #1f1f1fcc;
  --grayscale-transparent-700: #1f1f1fe0;
  --grayscale-transparent-800: #1f1f1f;
  --info-1-100: #f8edff;
  --info-1-200: #eed6fe;
  --info-1-300: #e1b6fc;
  --info-1-400: #d088f8;
  --info-1-50: #fbf5ff;
  --info-1-500: #ba4cf0;
  --info-1-600: #ab31e2;
  --info-1-700: #9421c6;
  --info-1-800: #7c22a4;
  --info-2-100: #ffebd1;
  --info-2-200: #ffdaaa;
  --info-2-300: #ffc472;
  --info-2-400: #ffae1f;
  --info-2-50: #fff8f0;
  --info-2-500: #e59a01;
  --info-2-600: #aa710c;
  --info-2-700: #956301;
  --info-2-800: #784e00;
  --info-3-100: #d1fcfc;
  --info-3-200: #a4f1f0;
  --info-3-300: #71e6e6;
  --info-3-400: #47cdcd;
  --info-3-50: #f2fbfb;
  --info-3-500: #3ab3b3;
  --info-3-600: #258a8b;
  --info-3-700: #246f6f;
  --info-3-800: #235c5c;
  --sea-blue-100: #e8f1fe;
  --sea-blue-200: #d0e1fb;
  --sea-blue-300: #a9cafe;
  --sea-blue-400: #85b5fe;
  --sea-blue-50: #f1f6fd;
  --sea-blue-500: #5b9bfd;
  --sea-blue-600: #076ff2;
  --sea-blue-700: #005bcb;
  --sea-blue-800: #004baa;
  --warning-100: #ffeee4;
  --warning-200: #fdd1b9;
  --warning-300: #fbb38b;
  --warning-400: #fc995d;
  --warning-50: #fff9f6;
  --warning-500: #ff7a00;
  --warning-600: #ba5c17;
  --warning-700: #9f4a01;
  --warning-800: #843e09;
}
umag-dialog-modal :root {
  --bg-accent-active: var(--sea-blue-800);
  --bg-accent-default: var(--sea-blue-600);
  --bg-accent-hover: var(--sea-blue-700);
  --bg-accent-soft: var(--sea-blue-100);
  --bg-accent-soft-active: var(--sea-blue-200);
  --bg-brand-active: var(--emerald-700);
  --bg-brand-default: var(--emerald-500);
  --bg-brand-hover: var(--emerald-600);
  --bg-brand-soft: var(--emerald-100);
  --bg-brand-soft-active: var(--emerald-200);
  --bg-critical-active: var(--critical-700);
  --bg-critical-default: var(--critical-500);
  --bg-critical-hover: var(--critical-600);
  --bg-critical-soft: var(--critical-100);
  --bg-critical-soft-active: var(--critical-200);
  --bg-disabled-default: var(--grayscale-300);
  --bg-disabled-default-inverse: var(--grayscale-600);
  --bg-primary-active: var(--grayscale-300);
  --bg-primary-default: var(--grayscale-50);
  --bg-primary-hover: var(--grayscale-200);
  --bg-primary-inverse: var(--grayscale-700);
  --bg-secondary-active: var(--grayscale-400);
  --bg-secondary-default: var(--grayscale-200);
  --bg-secondary-hover: var(--grayscale-300);
  --bg-secondary-inverse: var(--grayscale-500);
  --bg-secondary-inverse-hover: var(--grayscale-600);
  --bg-transparent-default: var(--grayscale-transparent-50);
  --bg-transparent-hover: var(--grayscale-transparent-100);
  --bg-transparent-active: var(--grayscale-transparent-200);
  --bg-surface-overlay: #5c5c5c3d;
  --bg-surface-sf-0: var(--grayscale-50);
  --bg-surface-sf-1: var(--grayscale-200);
  --bg-surface-sf-2: var(--grayscale-300);
  --bg-tertiary-active: var(--grayscale-500);
  --bg-tertiary-default: var(--grayscale-300);
  --bg-tertiary-hover: var(--grayscale-400);
  --bg-warning-active: var(--warning-700);
  --bg-warning-default: var(--warning-500);
  --bg-warning-hover: var(--warning-600);
  --bg-warning-soft: var(--warning-100);
  --bg-warning-soft-active: var(--warning-200);
  --border-accent-active: var(--sea-blue-800);
  --border-accent-default: var(--sea-blue-600);
  --border-accent-hover: var(--sea-blue-700);
  --border-brand-active: var(--emerald-700);
  --border-brand-default: var(--emerald-500);
  --border-brand-hover: var(--emerald-600);
  --border-critical-active: var(--critical-700);
  --border-critical-default: var(--critical-500);
  --border-critical-hover: var(--critical-600);
  --border-primary-default: var(--grayscale-transparent-300);
  --border-primary-soft: var(--grayscale-transparent-100);
  --border-warning-default: var(--warning-500);
  --icon-accent-active: var(--sea-blue-800);
  --icon-accent-default: var(--sea-blue-600);
  --icon-accent-hover: var(--sea-blue-700);
  --icon-brand-active: var(--emerald-700);
  --icon-brand-default: var(--emerald-500);
  --icon-brand-hover: var(--emerald-600);
  --icon-critical-active: var(--critical-700);
  --icon-critical-default: var(--critical-500);
  --icon-critical-hover: var(--critical-600);
  --icon-disabled-default: var(--grayscale-500);
  --icon-primary-default: var(--grayscale-800);
  --icon-primary-inverse: var(--grayscale-50);
  --icon-primary-inverse-hover: var(--grayscale-200);
  --icon-promo-default: var(--info-1-500);
  --icon-secondary-default: var(--grayscale-700);
  --icon-secondary-inverse: var(--grayscale-400);
  --icon-tertiary-default: var(--grayscale-300);
  --icon-warning-default: var(--warning-500);
  --text-accent-active: var(--sea-blue-800);
  --text-accent-default: var(--sea-blue-600);
  --text-accent-hover: var(--sea-blue-700);
  --text-brand-active: var(--emerald-700);
  --text-brand-default: var(--emerald-500);
  --text-brand-hover: var(--emerald-600);
  --text-critical-active: var(--critical-700);
  --text-critical-default: var(--critical-500);
  --text-critical-hover: var(--critical-600);
  --text-disabled-default: var(--grayscale-500);
  --text-primary-default: var(--grayscale-800);
  --text-primary-inverse: var(--grayscale-50);
  --text-promo-default: var(--info-1-500);
  --text-secondary-default: var(--grayscale-700);
  --text-secondary-inverse: var(--grayscale-500);
  --text-tertiary-default: var(--grayscale-500);
  --text-warning-default: var(--warning-500);
  --bg-promo-default: var(--info-1-500);
  --bg-promo-hover: var(--info-1-600);
  --bg-promo-active: var(--info-1-700);
  --bg-promo-soft: var(--info-1-100);
  --bg-promo-soft-active: var(--info-1-200);
  --text-promo-default: var(--info-1-500);
  --text-promo-hover: var(--info-1-600);
  --text-promo-active: var(--info-1-700);
  --text-promo-soft: var(--info-1-100);
  --text-promo-soft-active: var(--info-1-200);
  --icon-promo-default: var(--info-1-500);
  --icon-promo-hover: var(--info-1-600);
  --icon-promo-active: var(--info-1-700);
  --icon-promo-soft: var(--info-1-100);
  --icon-promo-soft-active: var(--info-1-200);
}
umag-dialog-modal :root {
  --0: 0px;
  --2: 2px;
  --4: 4px;
  --6: 6px;
  --8: 8px;
  --12: 12px;
  --16: 16px;
  --20: 20px;
  --24: 24px;
  --28: 28px;
  --32: 32px;
  --40: 40px;
}
umag-dialog-modal :root {
  --space-0: var(--0);
  --space-0-5x: var(--2);
  --space-1x: var(--4);
  --space-1-5x: var(--6);
  --space-2x: var(--8);
  --space-3x: var(--12);
  --space-4x: var(--16);
  --space-5x: var(--20);
  --space-6x: var(--24);
  --space-7x: var(--28);
  --space-8x: var(--32);
  --space-10x: var(--40);
}
umag-dialog-modal :root {
  --radius-0: 0px;
  --radius-0-5x: 3px;
  --radius-1x: 6px;
  --radius-2x: 12px;
  --radius-3x: 18px;
  --radius-4x: 24px;
  --radius-full: 9999px;
}
umag-dialog-modal :root {
  --shadow-pt-4: 0px 2px 4px 0px rgba(31, 31, 31, 0.08);
  --shadow-pt-8: 0px 0px 2px 0px rgba(31, 31, 31, 0.08),
    0px 2px 24px 0px rgba(31, 31, 31, 0.08);
  --shadow-pt-16: 0px 0px 2px 0px rgba(31, 31, 31, 0.12),
    0px 0px 96px 0px rgba(31, 31, 31, 0.16);
  --shadow-pt-32: 0px 0px 2px 0px rgba(31, 31, 31, 0.08),
    0px 0px 24px 0px rgba(31, 31, 31, 0.16);
}
umag-dialog-modal {
  position: fixed;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
  z-index: var(--z-modal);
  border-radius: var(--radius-2x);
  background: var(--bg-surface-sf-0);
  box-shadow: var(--shadow-pt-16);
  width: 322px;
}
umag-dialog-modal.left-top {
  left: 20px;
  top: 20px;
  transform: translateY(-10px);
}
umag-dialog-modal.left-bottom {
  left: 20px;
  bottom: 20px;
  transform: translateY(10px);
}
umag-dialog-modal.right-top {
  right: 20px;
  top: 20px;
  transform: translateY(-10px);
}
umag-dialog-modal.right-bottom {
  right: 20px;
  bottom: 20px;
  transform: translateY(10px);
}
umag-dialog-modal.visible {
  opacity: 1;
  transform: translate(0, 0);
}
umag-dialog-modal .dialog-modal-header {
  display: flex;
  padding: var(--space-2x) var(--space-2x) 0 var(--space-4x);
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
umag-dialog-modal .dialog-modal-header h4 {
  margin: var(--space-1-5x) 0;
  color: var(--text-primary-default);
}
umag-dialog-modal .dialog-modal-header .dialog-close-icon {
  cursor: pointer;
  color: var(--icon-primary-default);
}
umag-dialog-modal .dialog-modal-content {
  display: flex;
  padding: 0 var(--space-4x) var(--space-4x) var(--space-4x);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4x);
}
umag-dialog-modal .dialog-modal-content__caption {
  color: var(--text-primary-default);
}
umag-dialog-modal .dialog-modal-content .actions-block {
  width: 100%;
  display: flex;
  padding: var(--space-0-5x) 0 var(--space-1x) 0;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2x);
}

umag-simple-modal :root {
  --critical-100: #ffedeb;
  --critical-200: #ffcbc2;
  --critical-300: #ffa697;
  --critical-400: #ff725f;
  --critical-50: #fff6f5;
  --critical-500: #ff3826;
  --critical-600: #e31504;
  --critical-700: #c81d0f;
  --critical-800: #a51b0f;
  --emerald-100: #e1f9e4;
  --emerald-200: #c3f2cc;
  --emerald-300: #95e7a6;
  --emerald-400: #5bd47c;
  --emerald-50: #f2fcf3;
  --emerald-500: #2dbe60;
  --emerald-600: #0c9344;
  --emerald-700: #1d793c;
  --emerald-800: #1f6032;
  --grayscale-100: #fafafa;
  --grayscale-200: #f5f5f5;
  --grayscale-300: #e1e1e1;
  --grayscale-400: #cccccc;
  --grayscale-50: #ffffff;
  --grayscale-500: #a3a3a3;
  --grayscale-600: #898989;
  --grayscale-700: #5c5c5c;
  --grayscale-800: #1f1f1f;
  --grayscale-transparent-100: #1f1f1f1f;
  --grayscale-transparent-200: #1f1f1f3d;
  --grayscale-transparent-300: #1f1f1f52;
  --grayscale-transparent-400: #1f1f1fa3;
  --grayscale-transparent-50: #1f1f1f00;
  --grayscale-transparent-500: #1f1f1fb8;
  --grayscale-transparent-600: #1f1f1fcc;
  --grayscale-transparent-700: #1f1f1fe0;
  --grayscale-transparent-800: #1f1f1f;
  --info-1-100: #f8edff;
  --info-1-200: #eed6fe;
  --info-1-300: #e1b6fc;
  --info-1-400: #d088f8;
  --info-1-50: #fbf5ff;
  --info-1-500: #ba4cf0;
  --info-1-600: #ab31e2;
  --info-1-700: #9421c6;
  --info-1-800: #7c22a4;
  --info-2-100: #ffebd1;
  --info-2-200: #ffdaaa;
  --info-2-300: #ffc472;
  --info-2-400: #ffae1f;
  --info-2-50: #fff8f0;
  --info-2-500: #e59a01;
  --info-2-600: #aa710c;
  --info-2-700: #956301;
  --info-2-800: #784e00;
  --info-3-100: #d1fcfc;
  --info-3-200: #a4f1f0;
  --info-3-300: #71e6e6;
  --info-3-400: #47cdcd;
  --info-3-50: #f2fbfb;
  --info-3-500: #3ab3b3;
  --info-3-600: #258a8b;
  --info-3-700: #246f6f;
  --info-3-800: #235c5c;
  --sea-blue-100: #e8f1fe;
  --sea-blue-200: #d0e1fb;
  --sea-blue-300: #a9cafe;
  --sea-blue-400: #85b5fe;
  --sea-blue-50: #f1f6fd;
  --sea-blue-500: #5b9bfd;
  --sea-blue-600: #076ff2;
  --sea-blue-700: #005bcb;
  --sea-blue-800: #004baa;
  --warning-100: #ffeee4;
  --warning-200: #fdd1b9;
  --warning-300: #fbb38b;
  --warning-400: #fc995d;
  --warning-50: #fff9f6;
  --warning-500: #ff7a00;
  --warning-600: #ba5c17;
  --warning-700: #9f4a01;
  --warning-800: #843e09;
}
umag-simple-modal :root {
  --bg-accent-active: var(--sea-blue-800);
  --bg-accent-default: var(--sea-blue-600);
  --bg-accent-hover: var(--sea-blue-700);
  --bg-accent-soft: var(--sea-blue-100);
  --bg-accent-soft-active: var(--sea-blue-200);
  --bg-brand-active: var(--emerald-700);
  --bg-brand-default: var(--emerald-500);
  --bg-brand-hover: var(--emerald-600);
  --bg-brand-soft: var(--emerald-100);
  --bg-brand-soft-active: var(--emerald-200);
  --bg-critical-active: var(--critical-700);
  --bg-critical-default: var(--critical-500);
  --bg-critical-hover: var(--critical-600);
  --bg-critical-soft: var(--critical-100);
  --bg-critical-soft-active: var(--critical-200);
  --bg-disabled-default: var(--grayscale-300);
  --bg-disabled-default-inverse: var(--grayscale-600);
  --bg-primary-active: var(--grayscale-300);
  --bg-primary-default: var(--grayscale-50);
  --bg-primary-hover: var(--grayscale-200);
  --bg-primary-inverse: var(--grayscale-700);
  --bg-secondary-active: var(--grayscale-400);
  --bg-secondary-default: var(--grayscale-200);
  --bg-secondary-hover: var(--grayscale-300);
  --bg-secondary-inverse: var(--grayscale-500);
  --bg-secondary-inverse-hover: var(--grayscale-600);
  --bg-transparent-default: var(--grayscale-transparent-50);
  --bg-transparent-hover: var(--grayscale-transparent-100);
  --bg-transparent-active: var(--grayscale-transparent-200);
  --bg-surface-overlay: #5c5c5c3d;
  --bg-surface-sf-0: var(--grayscale-50);
  --bg-surface-sf-1: var(--grayscale-200);
  --bg-surface-sf-2: var(--grayscale-300);
  --bg-tertiary-active: var(--grayscale-500);
  --bg-tertiary-default: var(--grayscale-300);
  --bg-tertiary-hover: var(--grayscale-400);
  --bg-warning-active: var(--warning-700);
  --bg-warning-default: var(--warning-500);
  --bg-warning-hover: var(--warning-600);
  --bg-warning-soft: var(--warning-100);
  --bg-warning-soft-active: var(--warning-200);
  --border-accent-active: var(--sea-blue-800);
  --border-accent-default: var(--sea-blue-600);
  --border-accent-hover: var(--sea-blue-700);
  --border-brand-active: var(--emerald-700);
  --border-brand-default: var(--emerald-500);
  --border-brand-hover: var(--emerald-600);
  --border-critical-active: var(--critical-700);
  --border-critical-default: var(--critical-500);
  --border-critical-hover: var(--critical-600);
  --border-primary-default: var(--grayscale-transparent-300);
  --border-primary-soft: var(--grayscale-transparent-100);
  --border-warning-default: var(--warning-500);
  --icon-accent-active: var(--sea-blue-800);
  --icon-accent-default: var(--sea-blue-600);
  --icon-accent-hover: var(--sea-blue-700);
  --icon-brand-active: var(--emerald-700);
  --icon-brand-default: var(--emerald-500);
  --icon-brand-hover: var(--emerald-600);
  --icon-critical-active: var(--critical-700);
  --icon-critical-default: var(--critical-500);
  --icon-critical-hover: var(--critical-600);
  --icon-disabled-default: var(--grayscale-500);
  --icon-primary-default: var(--grayscale-800);
  --icon-primary-inverse: var(--grayscale-50);
  --icon-primary-inverse-hover: var(--grayscale-200);
  --icon-promo-default: var(--info-1-500);
  --icon-secondary-default: var(--grayscale-700);
  --icon-secondary-inverse: var(--grayscale-400);
  --icon-tertiary-default: var(--grayscale-300);
  --icon-warning-default: var(--warning-500);
  --text-accent-active: var(--sea-blue-800);
  --text-accent-default: var(--sea-blue-600);
  --text-accent-hover: var(--sea-blue-700);
  --text-brand-active: var(--emerald-700);
  --text-brand-default: var(--emerald-500);
  --text-brand-hover: var(--emerald-600);
  --text-critical-active: var(--critical-700);
  --text-critical-default: var(--critical-500);
  --text-critical-hover: var(--critical-600);
  --text-disabled-default: var(--grayscale-500);
  --text-primary-default: var(--grayscale-800);
  --text-primary-inverse: var(--grayscale-50);
  --text-promo-default: var(--info-1-500);
  --text-secondary-default: var(--grayscale-700);
  --text-secondary-inverse: var(--grayscale-500);
  --text-tertiary-default: var(--grayscale-500);
  --text-warning-default: var(--warning-500);
  --bg-promo-default: var(--info-1-500);
  --bg-promo-hover: var(--info-1-600);
  --bg-promo-active: var(--info-1-700);
  --bg-promo-soft: var(--info-1-100);
  --bg-promo-soft-active: var(--info-1-200);
  --text-promo-default: var(--info-1-500);
  --text-promo-hover: var(--info-1-600);
  --text-promo-active: var(--info-1-700);
  --text-promo-soft: var(--info-1-100);
  --text-promo-soft-active: var(--info-1-200);
  --icon-promo-default: var(--info-1-500);
  --icon-promo-hover: var(--info-1-600);
  --icon-promo-active: var(--info-1-700);
  --icon-promo-soft: var(--info-1-100);
  --icon-promo-soft-active: var(--info-1-200);
}
umag-simple-modal :root {
  --0: 0px;
  --2: 2px;
  --4: 4px;
  --6: 6px;
  --8: 8px;
  --12: 12px;
  --16: 16px;
  --20: 20px;
  --24: 24px;
  --28: 28px;
  --32: 32px;
  --40: 40px;
}
umag-simple-modal :root {
  --space-0: var(--0);
  --space-0-5x: var(--2);
  --space-1x: var(--4);
  --space-1-5x: var(--6);
  --space-2x: var(--8);
  --space-3x: var(--12);
  --space-4x: var(--16);
  --space-5x: var(--20);
  --space-6x: var(--24);
  --space-7x: var(--28);
  --space-8x: var(--32);
  --space-10x: var(--40);
}
umag-simple-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: var(--space-3x);
}
umag-simple-modal .dialog-close-icon {
  position: absolute;
  top: var(--space-3x);
  right: var(--space-3x);
  cursor: pointer;
  color: var(--icon-primary-default);
}
umag-simple-modal .text-block {
  display: flex;
  padding-bottom: var(--space-3x);
  flex-direction: column;
  gap: var(--space-2x);
  align-self: stretch;
  text-align: center;
}
umag-simple-modal .text-block h3 {
  color: var(--text-primary-default);
}
umag-simple-modal .text-block__description {
  color: var(--text-secondary-default);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
umag-simple-modal .actions-block {
  display: flex;
  width: 100%;
  padding-top: var(--space-1x);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2x);
}
umag-simple-modal .actions-block umag-button {
  width: 100%;
}

umag-drag-handle {
  transition: all var(--duration-base) var(--ease-standard);
}
umag-drag-handle .drag-header {
  display: flex;
  padding-top: var(--space-3x);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
umag-drag-handle .drag-header .bar-indicator {
  width: 32px;
  height: 4px;
  border-radius: var(--radius-full);
  opacity: 0.9;
  background: var(--icon-tertiary-default);
}

:host {
  position: relative;
}

:host ::ng-deep .title {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: 14px;
  margin-bottom: 5px;
}
:host ::ng-deep .item {
  background: var(--bg-primary-default);
  padding: 9px 14px;
  cursor: pointer;
}
:host ::ng-deep .item:nth-child(even) {
  background-color: var(--bg-primary-default);
}
:host ::ng-deep .item.selected {
  cursor: initial;
  color: var(--text-primary-inverse);
  font-weight: var(--font-weight-medium);
  background-color: var(--bg-brand-default);
}
:host ::ng-deep .item:not(.selected):hover {
  background-color: var(--bg-brand-soft);
}
:host ::ng-deep .placeholder {
  color: var(--font-color-lighter);
}
:host ::ng-deep .dropdown-options-container {
  background: var(--bg-primary-default);
  z-index: var(--z-dropdown);
  position: absolute;
  padding: 5px 0;
  width: 120%;
  top: 50px;
  left: -12px;
  border-radius: var(--radius-1x);
  overflow: hidden;
  border: 1px solid var(--border-primary-default);
  box-shadow: var(--shadow-pt-8);
}
:host ::ng-deep .dropdown-options-container.insideCard {
  width: calc(100% + 33px);
  right: -17px;
  top: 52px;
}
:host ::ng-deep .dropdown-main-container {
  cursor: pointer;
  width: 100%;
  padding: var(--space-1x) 0 5px 0;
  align-items: center;
}
:host ::ng-deep .dropdown-main-container .material-icons {
  user-select: none;
  transition: var(--duration-base);
}
:host ::ng-deep .dropdown-main-container .material-icons.active {
  transform: rotate(180deg);
}
:host ::ng-deep .dropdown-main-text {
  line-height: 16px;
  font: var(--font-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:host ::ng-deep .dropdown-list__item, :host ::ng-deep .dropdown-list__search {
  padding: 9px;
}
:host ::ng-deep .dropdown-list__group-label {
  padding: 0 9px;
  font: var(--font-medium-m);
  margin-bottom: 10px;
}
:host ::ng-deep .dropdown-list__group-label.first {
  margin-top: 10px;
}
:host ::ng-deep .dropdown-list__item {
  cursor: pointer;
}
:host ::ng-deep .dropdown-list__item-label {
  font: var(--font-medium);
  overflow: hidden;
  max-width: 95%;
  display: inline-block;
  text-overflow: ellipsis;
}
:host ::ng-deep .dropdown-list__item.selected {
  background: var(--primary-green) !important;
  color: var(--text-primary-inverse);
}
:host ::ng-deep .dropdown-list__item:hover:not(.selected) {
  background: var(--bg-secondary-default) !important;
}
:host ::ng-deep .dropdown-list__item:nth-child(even) {
  background: var(--bg-primary-default);
}
:host ::ng-deep ul.grouped li.dropdown-list__item:nth-child(even) {
  background: var(--bg-primary-default);
}
:host ::ng-deep li.dropdown-list__item.selected .match {
  color: var(--text-primary-default);
}
:host ::ng-deep .ps__rail-y {
  background: transparent !important;
}
:host ::ng-deep .ps__rail-y .ps__thumb-y {
  background-color: var(--border-color-gray) !important;
  width: 4px;
}

.search-box {
  padding: var(--space-1x) 9px 9px 9px;
}








.umag-dropdown-menu {
  position: absolute;
  left: 0;
  right: auto;
  border-radius: var(--space-2x);
  display: flex;
  flex-direction: column;
  height: fit-content;
  z-index: var(--z-dropdown);
  max-width: 688px;
  border-radius: var(--radius-2x);
  background: var(--bg-primary-default);
  box-shadow: var(--shadow-pt-16);
}
.umag-dropdown-menu--down {
  top: 100%;
}
.umag-dropdown-menu--up {
  bottom: 100%;
}
.umag-dropdown-menu--size-s {
  padding: var(--space-2x);
  max-height: 332px;
}
.umag-dropdown-menu--size-s.umag-dropdown-menu--down {
  margin-top: var(--space-1-5x) !important;
}
.umag-dropdown-menu--size-s.umag-dropdown-menu--up {
  margin-bottom: var(--space-1-5x) !important;
}
.umag-dropdown-menu--size-m {
  padding: var(--space-3x);
  max-height: 420px;
}
.umag-dropdown-menu--size-m.umag-dropdown-menu--down {
  margin-top: var(--space-2x) !important;
}
.umag-dropdown-menu--size-m.umag-dropdown-menu--up {
  margin-bottom: var(--space-2x) !important;
}

umag-icon {
  display: inline-block;
}
umag-icon .umag-icon {
  max-width: 100%;
  max-height: 100%;
}











h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--font-line-height-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--font-line-height-2xl);
}

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

h4 {
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

h5 {
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-l {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

.text-l-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

.text-m {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-m-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.text-s {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}

.text-s-strong {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}











input[umag-input] {
  display: inline-flex;
  justify-content: center;
  border: 2px solid var(--border-primary-soft);
  border-radius: var(--radius-1x);
  background: var(--bg-primary-default);
  transition: border-color 0.15s ease, background 0.15s ease;
}
input[umag-input]::placeholder {
  transition: padding-left 0.2s ease;
  padding-left: 0;
  color: var(--text-secondary-default);
}
input[umag-input]:focus::placeholder {
  color: var(--text-tertiary-default);
  padding-left: var(--space-0-5x);
}
input[umag-input]:hover {
  border-color: var(--border-accent-hover);
}
input[umag-input].disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
input[umag-input].error {
  border-color: var(--border-critical-default);
}
input[umag-input].size-s {
  padding: var(--space-1-5x);
  display: inline-flex;
  justify-content: center;
  border: 1px solid var(--border-primary-soft);
  border-radius: var(--radius-1x);
  background: var(--bg-primary-default);
  transition: border-color 0.15s ease, background 0.15s ease;
}
input[umag-input].size-s::placeholder {
  transition: padding-left 0.2s ease;
  padding-left: 0;
  color: var(--text-secondary-default);
}
input[umag-input].size-s:focus::placeholder {
  color: var(--text-tertiary-default);
  padding-left: var(--space-0-5x);
}
input[umag-input].size-s:hover {
  border-color: var(--border-accent-hover);
}
input[umag-input].size-s.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
input[umag-input].size-s.error {
  border-color: var(--border-critical-default);
}
input[umag-input].size-s {
  border-radius: var(--radius-1x);
  border: 1px solid var(--border-primary-soft);
  background: var(--bg-primary-default);
}
input[umag-input].size-s:hover {
  border: 1px solid var(--border-accent-hover);
}
input[umag-input].size-s:focus {
  border-color: var(--border-accent-active);
}
input[umag-input].size-s {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
input[umag-input].size-m {
  padding: var(--space-2x);
  display: inline-flex;
  justify-content: center;
  border: 2px solid var(--border-primary-soft);
  border-radius: var(--radius-1x);
  background: var(--bg-primary-default);
  transition: border-color 0.15s ease, background 0.15s ease;
}
input[umag-input].size-m::placeholder {
  transition: padding-left 0.2s ease;
  padding-left: 0;
  color: var(--text-secondary-default);
}
input[umag-input].size-m:focus::placeholder {
  color: var(--text-tertiary-default);
  padding-left: var(--space-0-5x);
}
input[umag-input].size-m:hover {
  border-color: var(--border-accent-hover);
}
input[umag-input].size-m.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
input[umag-input].size-m.error {
  border-color: var(--border-critical-default);
}
input[umag-input].size-m {
  border-radius: var(--radius-1x);
  border: 1px solid var(--border-primary-soft);
  background: var(--bg-primary-default);
}
input[umag-input].size-m:hover {
  border: 1px solid var(--border-accent-hover);
}
input[umag-input].size-m:focus {
  border-color: var(--border-accent-active);
}
input[umag-input].size-m {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
input[umag-input].size-l {
  padding: var(--space-3x);
  display: inline-flex;
  justify-content: center;
  border: 2px solid var(--border-primary-soft);
  border-radius: var(--radius-1x);
  background: var(--bg-primary-default);
  transition: border-color 0.15s ease, background 0.15s ease;
}
input[umag-input].size-l::placeholder {
  transition: padding-left 0.2s ease;
  padding-left: 0;
  color: var(--text-secondary-default);
}
input[umag-input].size-l:focus::placeholder {
  color: var(--text-tertiary-default);
  padding-left: var(--space-0-5x);
}
input[umag-input].size-l:hover {
  border-color: var(--border-accent-hover);
}
input[umag-input].size-l.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
input[umag-input].size-l.error {
  border-color: var(--border-critical-default);
}
input[umag-input].size-l {
  border-radius: var(--radius-1x);
  border: 1px solid var(--border-primary-soft);
  background: var(--bg-primary-default);
}
input[umag-input].size-l:hover {
  border: 1px solid var(--border-accent-hover);
}
input[umag-input].size-l:focus {
  border-color: var(--border-accent-active);
}
input[umag-input].size-l {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}

umag-input,
umag-symbol {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}
umag-input .no-spin::-webkit-outer-spin-button,
umag-input .no-spin::-webkit-inner-spin-button,
umag-symbol .no-spin::-webkit-outer-spin-button,
umag-symbol .no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
umag-input .no-spin,
umag-symbol .no-spin {
  -moz-appearance: textfield;
}
umag-input .umag-input,
umag-symbol .umag-input {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
}
umag-input .umag-input.justify-content-between,
umag-symbol .umag-input.justify-content-between {
  justify-content: space-between;
}
umag-input .umag-input .display-f,
umag-symbol .umag-input .display-f {
  display: flex;
  align-items: center;
}
umag-input .umag-input.top,
umag-symbol .umag-input.top {
  flex-direction: column;
  align-items: flex-start;
}
umag-input .umag-input.left,
umag-symbol .umag-input.left {
  flex-direction: row;
  align-items: baseline;
}
umag-input .umag-input.left .label,
umag-symbol .umag-input.left .label {
  margin-right: var(--space-3x);
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
umag-input .umag-input.left .container,
umag-symbol .umag-input.left .container {
  display: flex;
  align-items: center;
}
umag-input .umag-input.left .hint-counter,
umag-symbol .umag-input.left .hint-counter {
  width: 100%;
}
umag-input .umag-input .input,
umag-symbol .umag-input .input {
  width: 100%;
}
umag-input .umag-input .input .section,
umag-symbol .umag-input .input .section {
  width: 100%;
}
umag-input .umag-input .input .section .symbol-suffix,
umag-symbol .umag-input .input .section .symbol-suffix {
  color: var(--text-primary-default);
  padding-left: var(--space-2x);
  margin: auto;
}
umag-input .umag-input .input .section .status-hint,
umag-symbol .umag-input .input .section .status-hint {
  font-size: var(--font-size-m);
  margin-top: var(--space-1x);
}
umag-input .umag-input .input .section .status-hint.status-success,
umag-symbol .umag-input .input .section .status-hint.status-success {
  color: var(--text-brand-default);
}
umag-input .umag-input .input .section .status-hint.status-error,
umag-symbol .umag-input .input .section .status-hint.status-error {
  color: var(--text-critical-default);
}
umag-input .umag-input .input .section .status-hint.status-warning,
umag-symbol .umag-input .input .section .status-hint.status-warning {
  color: var(--text-warning-default);
}
umag-input .umag-input .input .section .font-size-m,
umag-symbol .umag-input .input .section .font-size-m {
  font-size: var(--font-size-m);
}
umag-input .umag-input .input .control-icon,
umag-symbol .umag-input .input .control-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
}
umag-input .umag-input .control,
umag-symbol .umag-input .control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius-1x);
  border: 1px solid var(--border-primary-soft);
  background: var(--bg-primary-default);
  transition: border-color 0.15s ease, background 0.15s ease;
}
umag-input .umag-input .control .container,
umag-symbol .umag-input .control .container {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  height: 24px;
}
umag-input .umag-input .control .container.error,
umag-symbol .umag-input .control .container.error {
  border-color: var(--border-critical-default);
}
umag-input .umag-input .control .container input,
umag-symbol .umag-input .control .container input {
  all: unset;
  width: 100%;
  height: 100%;
  font-weight: var(--font-weight-regular);
}
umag-input .umag-input .control .container input.text-right,
umag-symbol .umag-input .control .container input.text-right {
  text-align: right;
}
umag-input .umag-input .control .container input::placeholder,
umag-symbol .umag-input .control .container input::placeholder {
  transition: padding-left 0.2s ease;
  padding-left: 0;
  color: var(--text-secondary-default);
}
umag-input .umag-input .control .container input:focus::placeholder,
umag-symbol .umag-input .control .container input:focus::placeholder {
  color: var(--text-tertiary-default);
  padding-left: var(--space-0-5x);
}
umag-input .umag-input .control .input-icon,
umag-symbol .umag-input .control .input-icon {
  cursor: pointer;
}
umag-input .umag-input .control .input-icon:hover,
umag-symbol .umag-input .control .input-icon:hover {
  color: var(--icon-primary-default);
  border-radius: var(--radius-0-5x);
  background: var(--bg-transparent-hover);
}
umag-input .umag-input .control.invalid-symbol,
umag-symbol .umag-input .control.invalid-symbol {
  border-color: var(--border-warning-default);
}
umag-input .umag-input .control.invalid-symbol:hover,
umag-symbol .umag-input .control.invalid-symbol:hover {
  border-color: var(--border-warning-default);
}
umag-input .umag-input .control.disabled,
umag-symbol .umag-input .control.disabled {
  cursor: not-allowed;
  pointer-events: none;
  background: var(--bg-disabled-default);
}
umag-input .umag-input .control.error,
umag-symbol .umag-input .control.error {
  border-color: var(--border-critical-default);
}
umag-input .umag-input .control.border-max-reached,
umag-symbol .umag-input .control.border-max-reached {
  border: 2px solid var(--border-critical-default);
}
umag-input .umag-input .control.border-max-reached:hover,
umag-symbol .umag-input .control.border-max-reached:hover {
  border: 2px solid var(--border-critical-default);
}
umag-input .umag-input .hint-counter,
umag-symbol .umag-input .hint-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex: 0 0 100%;
  margin-top: var(--space-2x);
  color: var(--text-secondary-default);
  font-size: var(--font-size-s);
}
umag-input .umag-input .hint-counter .error,
umag-symbol .umag-input .hint-counter .error {
  width: 100%;
  color: var(--border-critical-default);
}
umag-input .umag-input .hint-counter .is-counter,
umag-symbol .umag-input .hint-counter .is-counter {
  width: 100%;
  text-align: right;
}
umag-input .umag-input .hint-counter .text-max-reached,
umag-symbol .umag-input .hint-counter .text-max-reached {
  color: var(--border-critical-default);
}
umag-input .umag-input .hint-counter > umag-error-message,
umag-symbol .umag-input .hint-counter > umag-error-message {
  flex: 1 1 auto;
  min-width: 0;
}
umag-input .umag-input .hint-counter .counter,
umag-symbol .umag-input .hint-counter .counter {
  flex: 1 1;
}
umag-input .umag-input .text-max-reached,
umag-symbol .umag-input .text-max-reached {
  color: var(--border-critical-default);
}
umag-input.size-s .control,
umag-symbol.size-s .control {
  padding: var(--space-1-5x);
  height: 32px;
  border-radius: var(--radius-0-5x);
  border: 1px solid var(--border-primary-soft);
  background: var(--bg-primary-default);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-input.size-s .control:hover,
umag-symbol.size-s .control:hover {
  border-color: var(--border-accent-hover);
}
umag-input.size-s .control:focus,
umag-symbol.size-s .control:focus {
  border-color: var(--border-accent-active);
}
umag-input.size-s .control .container,
umag-symbol.size-s .control .container {
  height: 20px;
  padding: 0 var(--space-1x);
}
umag-input.size-m .control,
umag-symbol.size-m .control {
  padding: var(--space-2x);
  height: 40px;
  border-radius: var(--radius-1x);
  border: 1px solid var(--border-primary-soft);
  background: var(--bg-primary-default);
}
umag-input.size-m .control:hover,
umag-symbol.size-m .control:hover {
  border: 1px solid var(--border-accent-hover);
}
umag-input.size-m .control:focus,
umag-symbol.size-m .control:focus {
  border-color: var(--border-accent-active);
}
umag-input.size-m .control,
umag-symbol.size-m .control {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-input.size-m .control .container,
umag-symbol.size-m .control .container {
  height: 24px;
  padding: 0 var(--space-1-5x);
}
umag-input.size-l .control,
umag-symbol.size-l .control {
  padding: var(--space-3x);
  height: 48px;
  border-radius: var(--radius-1x);
  border: 1px solid var(--border-primary-soft);
  background: var(--bg-primary-default);
}
umag-input.size-l .control:hover,
umag-symbol.size-l .control:hover {
  border: 1px solid var(--border-accent-hover);
}
umag-input.size-l .control:focus,
umag-symbol.size-l .control:focus {
  border-color: var(--border-accent-active);
}
umag-input.size-l .control,
umag-symbol.size-l .control {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
umag-input.size-l .control .container,
umag-symbol.size-l .control .container {
  height: 24px;
  padding: 0 var(--space-1-5x);
}
umag-input.size-s .label,
umag-symbol.size-s .label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
  margin-bottom: var(--space-1-5x);
}
umag-input.size-m .label,
umag-symbol.size-m .label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
  margin-bottom: var(--space-2x);
}
umag-input.size-l .label,
umag-symbol.size-l .label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
  margin-bottom: var(--space-2x);
}
umag-input.has-label,
umag-symbol.has-label {
  flex-direction: column;
}
umag-input.has-label .label,
umag-symbol.has-label .label {
  pointer-events: none;
  color: var(--text-primary-default);
}
umag-input.has-label .label .required,
umag-symbol.has-label .label .required {
  color: var(--text-critical-default);
  margin-left: var(--space-1x);
}
umag-input.default .control,
umag-symbol.default .control {
  border-color: var(--border-primary-soft);
}
umag-input.warning .control,
umag-symbol.warning .control {
  border-color: var(--border-warning-default);
}
umag-input.error .control,
umag-symbol.error .control {
  border-color: var(--border-critical-default);
}



umag-pagination :root {
  --0: 0px;
  --2: 2px;
  --4: 4px;
  --6: 6px;
  --8: 8px;
  --12: 12px;
  --16: 16px;
  --20: 20px;
  --24: 24px;
  --28: 28px;
  --32: 32px;
  --40: 40px;
}
umag-pagination :root {
  --space-0: var(--0);
  --space-0-5x: var(--2);
  --space-1x: var(--4);
  --space-1-5x: var(--6);
  --space-2x: var(--8);
  --space-3x: var(--12);
  --space-4x: var(--16);
  --space-5x: var(--20);
  --space-6x: var(--24);
  --space-7x: var(--28);
  --space-8x: var(--32);
  --space-10x: var(--40);
}
umag-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2x);
  padding: var(--space-0-5x) var(--space-1-5x);
}
umag-pagination .pagination {
  display: flex;
  align-items: center;
  gap: var(--space-0-5x);
}
umag-pagination .pagination__info {
  color: var(--text-primary-default);
  padding: var(--space-1x);
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-pagination umag-select {
  width: 75px;
}








.cdk-overlay-container {
  position: fixed !important;
  z-index: var(--z-popover);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.cdk-overlay-pane {
  position: absolute !important;
  pointer-events: auto;
}

umag-popover {
  pointer-events: auto;
}
umag-popover .ui-popover {
  max-width: 280px;
  background: var(--bg-primary-default);
  color: var(--text-primary-default);
  padding: var(--space-3x);
  position: relative;
  border-radius: var(--radius-1x);
  z-index: 1;
  box-shadow: var(--shadow-pt-8);
}
umag-popover .ui-popover__arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--bg-primary-default);
  transform: rotate(45deg);
  z-index: -1;
}
umag-popover .ui-popover[data-placement^=top-start] .ui-popover__arrow {
  bottom: -8px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(45deg);
}
umag-popover .ui-popover[data-placement^=top] .ui-popover__arrow {
  bottom: -8px;
  left: 52%;
  transform: translateX(-50%) rotate(45deg);
}
umag-popover .ui-popover[data-placement^=top-end] .ui-popover__arrow {
  bottom: -8px;
  left: 90%;
  transform: translateX(-50%) rotate(45deg);
}
umag-popover .ui-popover[data-placement^=bottom-start] .ui-popover__arrow {
  top: -8px !important;
  left: 20% !important;
  transform: translateX(-50%) rotate(225deg);
}
umag-popover .ui-popover[data-placement^=bottom] .ui-popover__arrow {
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(225deg);
}
umag-popover .ui-popover[data-placement^=bottom-end] .ui-popover__arrow {
  top: -8px !important;
  left: 90% !important;
  transform: translateX(-50%) rotate(225deg);
}
umag-popover .ui-popover[data-placement^=left-start] .ui-popover__arrow {
  right: -6px !important;
  top: 30% !important;
  transform: translateY(-50%) rotate(135deg);
}
umag-popover .ui-popover[data-placement^=left] .ui-popover__arrow {
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
}
umag-popover .ui-popover[data-placement^=left-end] .ui-popover__arrow {
  right: -6px !important;
  top: 70% !important;
  transform: translateY(-50%) rotate(135deg);
}
umag-popover .ui-popover[data-placement^=right-start] .ui-popover__arrow {
  left: -6px !important;
  top: 30% !important;
  transform: translateY(-50%) rotate(-45deg);
}
umag-popover .ui-popover[data-placement^=right] .ui-popover__arrow {
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
umag-popover .ui-popover[data-placement^=right-end] .ui-popover__arrow {
  left: -6px !important;
  top: 70% !important;
  transform: translateY(-50%) rotate(-45deg);
}
umag-popover .is-small.ui-popover[data-placement^=right-start] .ui-popover__arrow, umag-popover .is-small.ui-popover[data-placement^=right] .ui-popover__arrow, umag-popover .is-small.ui-popover[data-placement^=right-end] .ui-popover__arrow, umag-popover .is-small.ui-popover[data-placement^=left-start] .ui-popover__arrow, umag-popover .is-small.ui-popover[data-placement^=left] .ui-popover__arrow, umag-popover .is-small.ui-popover[data-placement^=left-end] .ui-popover__arrow {
  top: 50% !important;
}



umag-radio-button-v2 .radio-button-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}
umag-radio-button-v2 .radio-button-wrapper .radio-circle-wrapper {
  padding: 1px;
  position: relative;
}
umag-radio-button-v2 .radio-button-wrapper .radio-circle-wrapper input[type=radio] {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
}
umag-radio-button-v2 .radio-button-wrapper .radio-circle-wrapper > .radio-circle {
  border-radius: var(--radius-full);
  border: 2px solid var(--border-primary-default);
}
umag-radio-button-v2 .radio-button-wrapper label {
  padding: 3px 0 3px var(--space-2x);
  cursor: pointer;
}
umag-radio-button-v2.size-m .radio-button-wrapper .radio-circle-wrapper > .radio-circle {
  width: 22px;
  height: 22px;
}
umag-radio-button-v2.size-m .radio-button-wrapper label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-radio-button-v2.size-s .radio-button-wrapper .radio-circle-wrapper > .radio-circle {
  width: 18px;
  height: 18px;
}
umag-radio-button-v2.size-s .radio-button-wrapper label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
  padding-left: var(--space-1-5x);
}
umag-radio-button-v2:hover .radio-button-wrapper .radio-circle-wrapper > .radio-circle, umag-radio-button-v2.active .radio-button-wrapper .radio-circle-wrapper > .radio-circle {
  border-color: var(--border-accent-default);
}
umag-radio-button-v2.active .radio-button-wrapper .radio-circle-wrapper > .radio-circle {
  border-width: 4px;
}
umag-radio-button-v2.active:hover .radio-button-wrapper .radio-circle-wrapper > .radio-circle {
  border-color: var(--bg-accent-hover);
}
umag-radio-button-v2.disabled .radio-button-wrapper .radio-circle-wrapper > .radio-circle {
  background-color: var(--bg-tertiary-default);
  border-color: transparent;
}
umag-radio-button-v2.disabled .radio-button-wrapper label {
  color: var(--text-disabled-default);
}
umag-radio-button-v2.disabled.active .radio-button-wrapper .radio-circle-wrapper > .radio-circle {
  background-color: var(--icon-disabled-default);
  border-color: var(--border-primary-default);
}





umag-select-date-picker-mobile-dialog .select-date-picker-mobile-dialog {
  display: flex;
  flex-direction: column;
}
umag-select-date-picker-mobile-dialog .select-date-picker-mobile-dialog__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1x);
}
umag-select-date-picker-mobile-dialog .select-date-picker-mobile-dialog__calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4x);
}
umag-select-date-picker-mobile-dialog .select-date-picker-mobile-dialog__item {
  padding: var(--space-3x) var(--space-4x);
  border-radius: var(--radius-1x);
  background-color: transparent;
  color: var(--text-primary-default);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-standard);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-select-date-picker-mobile-dialog .select-date-picker-mobile-dialog__item:hover {
  background-color: var(--bg-transparent-hover);
}
umag-select-date-picker-mobile-dialog .select-date-picker-mobile-dialog__item--active {
  background-color: var(--bg-accent-soft-active);
  color: var(--text-accent-active);
}
umag-select-date-picker-mobile-dialog umag-date-picker {
  width: 100%;
  display: block;
  text-align: center;
}
umag-select-date-picker-mobile-dialog umag-date-picker .umag-date-picker-wrap {
  width: 100%;
}
umag-select-date-picker-mobile-dialog umag-date-picker .umag-date-picker-wrap .umag-date-panel {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-top: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: 0 !important;
}
umag-select-date-picker-mobile-dialog umag-date-picker .umag-date-picker-wrap,
umag-select-date-picker-mobile-dialog umag-date-picker .p-calendar {
  width: 100%;
}
umag-select-date-picker-mobile-dialog umag-date-picker .umag-date-picker-wrap .umag-date-footer,
umag-select-date-picker-mobile-dialog umag-date-picker .p-calendar .umag-date-footer {
  padding-right: 1px;
}
umag-select-date-picker-mobile-dialog umag-date-picker .p-datepicker {
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  border-radius: 0;
}






umag-select-date-picker {
  display: block;
}
umag-select-date-picker .select-wrapper {
  position: relative;
  display: inline-block;
}
umag-select-date-picker .mobile-select-trigger {
  position: relative;
}
umag-select-date-picker .mobile-select-trigger .mobile-select-overlay {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
umag-select-date-picker.size-s .select-date-picker-trigger {
  width: var(--select-width, 184px);
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  umag-select-date-picker.size-s .select-date-picker-trigger {
    width: 100%;
  }
}
umag-select-date-picker.size-s .select-date-picker-trigger .select__menu {
  width: var(--select-menu-width, 254px);
  height: auto;
  padding: var(--space-2x);
}
umag-select-date-picker.size-s .select-date-picker-trigger .select__menu-scroll {
  max-height: none !important;
  overflow-y: visible !important;
}
umag-select-date-picker.size-s .select-date-picker-trigger .select__divider {
  padding: var(--space-1-5x) var(--space-2x);
}
umag-select-date-picker.size-s .select-date-picker-trigger .select__item {
  padding: 7px var(--space-2x);
  font-size: var(--font-size-s) !important;
  line-height: var(--font-line-height-s, 14px) !important;
}
umag-select-date-picker.size-s .period-button {
  padding: var(--space-1x) var(--space-3x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
umag-select-date-picker.size-s .date-picker-container__label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-select-date-picker.size-s .date-picker-container umag-date-picker .umag-date-picker {
  width: var(--date-picker-width, var(--select-width, 184px)) !important;
}
umag-select-date-picker.size-s .date-picker-container umag-date-picker .umag-date-picker umag-icon {
  top: 16px !important;
}
umag-select-date-picker.size-m .select-date-picker-trigger {
  width: var(--select-width, 292px);
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  umag-select-date-picker.size-m .select-date-picker-trigger {
    width: 100%;
  }
}
umag-select-date-picker.size-m .select-date-picker-trigger .select__menu {
  width: var(--select-menu-width, var(--select-width, 292px));
  height: auto;
  padding: var(--space-3x);
}
umag-select-date-picker.size-m .select-date-picker-trigger .select__menu-scroll {
  max-height: none !important;
  overflow-y: visible !important;
}
umag-select-date-picker.size-m .select-date-picker-trigger .select__divider {
  padding: var(--space-2x);
}
umag-select-date-picker.size-m .select-date-picker-trigger .select__item {
  padding: 9px var(--space-3x);
  font-size: var(--font-size-m) !important;
  line-height: var(--font-line-height-m, 18px) !important;
}
umag-select-date-picker.size-m .period-button {
  padding: var(--space-1-5x) var(--space-4x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-select-date-picker.size-m .date-picker-container__label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-select-date-picker.size-m .date-picker-container umag-date-picker .umag-date-picker {
  width: var(--date-picker-width, var(--select-width, 248px)) !important;
}
umag-select-date-picker.size-m .date-picker-container umag-date-picker .umag-date-picker umag-icon {
  top: 20px !important;
}
umag-select-date-picker .period-buttons {
  display: flex;
  gap: var(--space-1-5x);
  width: 100%;
}
umag-select-date-picker .period-button {
  min-width: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-primary-soft);
  background-color: transparent;
  color: var(--text-primary-default);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-standard);
  white-space: nowrap;
  text-align: center;
}
umag-select-date-picker .period-button--active {
  background-color: var(--bg-accent-soft-active);
  border-color: transparent;
  color: var(--text-accent-active);
}
umag-select-date-picker .date-picker-container {
  display: flex;
  align-items: center;
  gap: var(--space-2x);
}
umag-select-date-picker .date-picker-container__label {
  color: var(--text-primary-default);
}
umag-select-date-picker .date-picker-container--trigger-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
umag-select-date-picker .date-picker-container--trigger-hidden .umag-date-picker-wrap .umag-date-picker,
umag-select-date-picker .date-picker-container--trigger-hidden .umag-date-picker-wrap .umag-date-picker .input-container {
  visibility: hidden !important;
}
umag-select-date-picker .date-picker-container--trigger-hidden .umag-date-panel {
  left: 0;
}
umag-select-date-picker .date-picker-container--trigger-hidden .umag-date-panel,
umag-select-date-picker .date-picker-container--trigger-hidden .umag-date-panel * {
  pointer-events: auto !important;
}
umag-select-date-picker umag-date-picker .umag-date-picker {
  width: 248px !important;
}
umag-select-date-picker umag-date-picker .umag-date-picker umag-icon {
  top: 16px !important;
}
umag-select-date-picker umag-date-picker label.label {
  display: none;
}
umag-select-date-picker .select-date-picker-trigger--date-picker-open .select__input-wrapper {
  border-color: var(--border-accent-active) !important;
  transition: border-color var(--duration-slow) var(--ease-standard);
}
umag-select-date-picker .select-date-picker-trigger--date-picker-open .select__icon {
  transform: rotate(-180deg);
}
umag-select-date-picker .select__prefix {
  color: var(--icon-secondary-default) !important;
}
umag-select-date-picker .is-disabled .select__prefix {
  color: var(--icon-disabled-default) !important;
}


/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: block;
  opacity: 0.9;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: transparent;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 4px;
  height: 10px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #aaa;
  height: 6px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #aaa;
  width: 6px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}







umag-select {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2x);
  box-sizing: border-box;
}
umag-select .select-label {
  color: var(--text-primary-default);
}
umag-select .select-label .is-required-asterisk {
  color: var(--text-critical-default);
  margin-left: var(--space-1x);
}
umag-select.label-left {
  flex-direction: row;
  gap: var(--space-3x);
}
umag-select.label-left .select-label {
  display: flex;
  align-items: center;
  white-space: nowrap;
  min-width: fit-content;
  max-width: 120px;
  height: var(--control-h);
}
umag-select.size-l {
  --control-h: 48px;
}
umag-select.size-l .select-label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
umag-select.size-l .select__input-wrapper {
  padding: var(--space-3x);
}
umag-select.size-l .select__input {
  padding: var(--space-0-5x) 30px var(--space-0-5x) var(--space-1-5x);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
umag-select.size-l .select__input.without-icon {
  padding: var(--space-3x);
}
umag-select.size-l .select__multi-badge {
  height: 38px;
}
umag-select.size-l .select__icon {
  width: 24px !important;
  height: 24px !important;
  top: 11px;
}
umag-select.size-l .select__prefix {
  left: 12px;
}
umag-select.size-m {
  --control-h: 40px;
}
umag-select.size-m .select-label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-select.size-m .select__input-wrapper {
  padding: var(--space-2x);
}
umag-select.size-m .select__input {
  padding: var(--space-0-5x) 30px var(--space-0-5x) var(--space-1-5x);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-select.size-m .select__input.without-icon {
  padding: var(--space-2x);
}
umag-select.size-m .select__icon {
  width: 24px !important;
  height: 24px !important;
  top: 7px;
}
umag-select.size-m .select__prefix {
  left: 8px;
}
umag-select.size-s {
  gap: var(--space-1-5x);
  --control-h: 32px;
}
umag-select.size-s .select-label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-select.size-s .select__input-wrapper {
  padding: var(--space-1-5x) var(--space-2x);
  border-width: 1px;
  border-radius: var(--radius-0-5x);
}
umag-select.size-s .select__multi-badge {
  height: 22px;
}
umag-select.size-s .select__multi-badge span {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
umag-select.size-s .select__error, umag-select.size-s .select__description {
  margin-top: var(--space-1-5x);
}
umag-select.size-s .select__input {
  padding: 1px var(--space-6x) 1px var(--space-1x);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-select.size-s .select__input.without-icon {
  padding: var(--space-1-5x) var(--space-2x);
}
umag-select.size-s .select__icon {
  top: 5px;
}
umag-select.size-s .select__prefix {
  left: 9px;
}
umag-select .items-block {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
umag-select .select {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
}
umag-select .select__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border-primary-soft);
  border-radius: var(--radius-1x);
  background-color: var(--bg-primary-default);
  cursor: pointer;
  height: var(--control-h);
}
umag-select .select__input-wrapper.is-disabled {
  cursor: not-allowed;
  border-color: var(--bg-disabled-default) !important;
  background-color: var(--bg-disabled-default) !important;
  color: var(--text-disabled-default);
}
umag-select .select__input-wrapper.is-disabled .select__input {
  color: var(--text-secondary-inverse);
}
umag-select .select__input-wrapper.is-disabled .select__input::placeholder {
  color: var(--text-disabled-default);
}
umag-select .select__input-wrapper.is-error {
  border-color: var(--text-critical-default) !important;
}
umag-select .select__input-wrapper:hover, umag-select .select__input-wrapper:active {
  border-color: var(--border-accent-hover);
  transition: border-color 0.3s ease;
}
umag-select .select__input-wrapper.is-active {
  border-color: var(--text-accent-active) !important;
  transition: border-color 0.3s ease;
}
umag-select .select__multi-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-1x) var(--space-1x) var(--space-1x) var(--space-3x) !important;
  height: auto !important;
}
umag-select .select__multi-badges .items-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1-5x);
  height: auto !important;
}
umag-select .select__multi-badge {
  display: flex;
  align-items: center;
  gap: var(--space-0-5x);
  border-radius: var(--radius-0-5x);
  background-color: var(--bg-secondary-default);
  color: var(--text-primary-default);
  border: 1px solid var(--border-primary-default);
  padding: 3.5px 5px;
  cursor: default;
  height: 30px;
}
umag-select .select__multi-badge span {
  padding: 1px var(--space-2x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-select .select__multi-badge-remove {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5x);
}
umag-select .select__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  border: none;
  outline: none;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-select .select__input::placeholder {
  color: var(--text-secondary-default);
}
umag-select .select__input:disabled {
  background: transparent;
  color: var(--icon-tertiary-default);
  cursor: not-allowed;
}
umag-select .select__input.select__input--with-multi-badges {
  flex: 1 1 60px;
  min-width: 0;
}
umag-select .select__input--prefix {
  padding-left: var(--space-6x) !important;
}
umag-select .select__icon {
  position: absolute;
  right: 8px;
  transition: transform 0.3s ease;
  color: var(--icon-secondary-default);
}
umag-select .select__icon--rotated {
  transform: rotate(-180deg);
}
umag-select .select__icon--disabled {
  color: var(--icon-disabled-default);
}
umag-select .select__prefix {
  color: var(--icon-primary-default);
  position: absolute;
}
umag-select .select__prefix--disabled {
  color: var(--icon-disabled-default);
}
umag-select .select__error {
  color: var(--text-critical-default);
}
umag-select .select__description {
  color: var(--text-secondary-default);
}
umag-select .select__error, umag-select .select__description {
  margin-top: var(--space-2x);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}

.select-group__label {
  color: var(--text-secondary-default) !important;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
.select-group__label.select__item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-group__label:hover {
  background: none !important;
  cursor: default !important;
  transition: color 0.3s ease;
}

.select__item-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  gap: var(--space-0-5x);
}
.select__item-content .select__item-label {
  padding: 1px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select__item-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}

.select__item {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}

.select__menu {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--bg-primary-default);
  border-radius: var(--radius-1x);
  box-shadow: var(--shadow-pt-8);
  display: flex;
  flex-direction: column;
  z-index: var(--z-dropdown);
  padding: var(--space-3x) var(--space-2x) var(--space-3x) var(--space-3x);
  height: fit-content;
}
.select__menu--down {
  margin-top: var(--space-2x);
}
.select__menu--up {
  margin-bottom: var(--space-2x);
}

.select__menu-scroll {
  overflow-y: auto;
  flex: 1 1 auto;
  transition: all 0.5s;
  scroll-behavior: smooth;
}
.select__menu-scroll::-webkit-scrollbar {
  background: var(--bg-surface-sf-1, #f5f5f5);
  width: 4px;
  height: 4px;
  border-radius: 30px;
}
.select__menu-scroll::-webkit-scrollbar-track {
  background: var(--bg-surface-sf-1, #f5f5f5);
}
.select__menu-scroll::-webkit-scrollbar-thumb {
  background-color: var(--grayscale-400);
  cursor: pointer;
  width: 4px;
  height: 4px;
  border-radius: 30px;
  background: var(--icon-secondary-inverse, #ccc);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
}
.select__menu-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--grayscale-500);
}

.select__footer {
  flex: 0 0 auto;
  background: var(--bg-primary-default);
}

.select__footer-action {
  cursor: pointer;
}

.select__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1x);
  list-style: none;
  margin: 0;
  padding: 0;
}

.select__not-found:hover {
  cursor: default !important;
  background: none !important;
}

.select__item {
  display: flex;
  align-items: center;
  column-gap: var(--space-2x);
  padding: var(--space-2x) var(--space-2x) var(--space-2x) var(--space-3x);
  margin: 0 var(--space-1x) 0 0 !important;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  color: var(--text-primary-default);
}
.select__item > umag-icon {
  flex-shrink: 0;
}
.select__item > span:only-of-type {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select__item-hint {
  color: var(--text-secondary-default);
}
.select__item.is-disabled {
  color: var(--text-disabled-default) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.select__item.is-disabled umag-icon {
  color: var(--icon-disabled-default) !important;
}
.select__item:hover, .select__item--keyboard-highlighted {
  background: var(--bg-primary-hover);
  border-radius: var(--radius-0-5x);
  transition: background 0.3s ease;
}
.select__item--highlighted {
  border-radius: var(--radius-0-5x);
  background: var(--bg-primary-hover);
}
.select__item--selected {
  border-radius: var(--radius-0-5x);
  background-color: var(--bg-accent-soft) !important;
}
.select__item--selected .select__item-hint,
.select__item--selected .select__item-label {
  color: var(--text-accent-active) !important;
}
.select__item--selected .select__item-icon {
  flex-shrink: 0;
  color: var(--icon-accent-active) !important;
}
.select__item--selected umag-icon {
  color: var(--icon-accent-active) !important;
}
.select__item--selected umag-icon {
  color: var(--icon-accent-active) !important;
}
.select__item-info, .select__item-add-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2x);
  min-width: 0;
  flex: 1 1 auto;
  color: var(--text-secondary-default);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
.select__item-info > span, .select__item-add-action > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select__item-info umag-icon, .select__item-add-action umag-icon {
  flex-shrink: 0;
}
.select__item-add-action {
  color: var(--text-primary-default);
  cursor: pointer;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
.select__item.multiple {
  display: flex;
  align-items: center;
}
.select__item.multiple umag-icon {
  color: var(--icon-primary-default);
}

.select__divider {
  padding: var(--space-2x);
}
.select__divider hr {
  border: none;
  border-top: 1px solid var(--icon-tertiary-default);
  margin: 0;
}

.select__sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--bg-transparent-active);
}

.select__sheet-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: var(--z-modal);
  border-radius: var(--radius-4x) var(--radius-4x) 0 0;
  overflow: hidden;
  background: transparent;
}
.select__sheet-panel umag-bottom-sheet {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius-4x) var(--radius-4x) 0 0;
  box-shadow: var(--shadow-pt-16);
}
.select__sheet-panel .bottom-sheet__header {
  padding-bottom: 0;
  row-gap: 0;
}
.select__sheet-panel .bottom-sheet__title {
  margin: 0;
}
.select__sheet-panel .bottom-sheet__content {
  padding-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.select__sheet-panel umag-bottom-sheet.bottom-sheet--peek .bottom-sheet__content .bottom-sheet__content-inner {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.select__menu--in-sheet {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  padding: var(--space-1-5x) 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.select__menu-scroll--sheet {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  transition: all 0.5s;
  scroll-behavior: smooth;
}
.select__menu-scroll--sheet::-webkit-scrollbar {
  background: var(--bg-surface-sf-1, #f5f5f5);
  width: 4px;
  height: 4px;
  border-radius: 30px;
}
.select__menu-scroll--sheet::-webkit-scrollbar-track {
  background: var(--bg-surface-sf-1, #f5f5f5);
}
.select__menu-scroll--sheet::-webkit-scrollbar-thumb {
  background-color: var(--grayscale-400);
  cursor: pointer;
  width: 4px;
  height: 4px;
  border-radius: 30px;
  background: var(--icon-secondary-inverse, #ccc);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
}
.select__menu-scroll--sheet::-webkit-scrollbar-thumb:hover {
  background-color: var(--grayscale-500);
}

.select__menu--in-sheet .select__item umag-icon {
  width: 20px !important;
  height: 20px !important;
}
.select__menu--in-sheet .select__item {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
.select__menu--in-sheet .select-group__label.select__item {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}







umag-switch,
umag-switch-v2 {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: var(--space-0-5x) 0;
}
umag-switch.umag-switch-size-small .umag-slider-item,
umag-switch-v2.umag-switch-size-small .umag-slider-item {
  width: var(--space-3x);
  height: var(--space-3x);
  margin-right: var(--space-4x);
}
umag-switch.umag-switch-size-small .label,
umag-switch-v2.umag-switch-size-small .label {
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
umag-switch.umag-switch-size-medium .umag-slider-item,
umag-switch-v2.umag-switch-size-medium .umag-slider-item {
  width: var(--space-4x);
  height: var(--space-4x);
  margin-right: var(--space-5x);
}
umag-switch.umag-switch-size-medium .label,
umag-switch-v2.umag-switch-size-medium .label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-switch.umag-switch-checked .umag-slider,
umag-switch-v2.umag-switch-checked .umag-slider {
  background-color: var(--bg-accent-default);
}
umag-switch.umag-switch-checked .umag-slider-item,
umag-switch-v2.umag-switch-checked .umag-slider-item {
  transform: translateX(calc(100% + var(--space-1x)));
}
umag-switch.umag-switch-checked:hover .umag-slider,
umag-switch-v2.umag-switch-checked:hover .umag-slider {
  background-color: var(--bg-accent-hover);
}
umag-switch.umag-switch-unchecked .umag-slider,
umag-switch-v2.umag-switch-unchecked .umag-slider {
  background-color: var(--bg-secondary-inverse);
}
umag-switch.umag-switch-unchecked:hover .umag-slider,
umag-switch-v2.umag-switch-unchecked:hover .umag-slider {
  background-color: var(--bg-secondary-inverse-hover);
}
umag-switch.umag-switch-disabled,
umag-switch-v2.umag-switch-disabled {
  opacity: 40%;
  pointer-events: none;
}
umag-switch.umag-switch-label-left,
umag-switch-v2.umag-switch-label-left {
  flex-direction: row-reverse;
}
umag-switch.umag-switch-label-left .label,
umag-switch-v2.umag-switch-label-left .label {
  margin-right: var(--space-2x);
}
umag-switch.umag-switch-label-right,
umag-switch-v2.umag-switch-label-right {
  flex-direction: row;
}
umag-switch.umag-switch-label-right .label,
umag-switch-v2.umag-switch-label-right .label {
  margin-left: var(--space-2x);
}
umag-switch.umag-switch .umag-slider,
umag-switch-v2.umag-switch .umag-slider {
  display: flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: var(--space-0-5x);
}
umag-switch.umag-switch .umag-slider-item,
umag-switch-v2.umag-switch .umag-slider-item {
  border-radius: var(--radius-full);
  background-color: var(--bg-primary-default);
  transition: transform var(--duration-base) var(--ease-in-out);
}
umag-switch.umag-switch .label,
umag-switch-v2.umag-switch .label {
  color: var(--text-primary-default);
}


/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: block;
  opacity: 0.9;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: transparent;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 4px;
  height: 10px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #aaa;
  height: 6px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #aaa;
  width: 6px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
umag-table {
  max-width: 100%;
  display: inline-flex;
  align-self: baseline;
  overflow: hidden;
  flex-direction: column;
  max-height: inherit;
  border: 1px solid var(--border-primary-soft);
  border-radius: var(--radius-1x);
  background-color: var(--bg-primary-default);
  transition: all 0.5s;
  scroll-behavior: smooth;
}
umag-table::-webkit-scrollbar {
  background: var(--bg-surface-sf-1, #f5f5f5);
  width: 4px;
  height: 4px;
  border-radius: 30px;
}
umag-table::-webkit-scrollbar-track {
  background: var(--bg-surface-sf-1, #f5f5f5);
}
umag-table::-webkit-scrollbar-thumb {
  background-color: var(--grayscale-400);
  cursor: pointer;
  width: 4px;
  height: 4px;
  border-radius: 30px;
  background: var(--icon-secondary-inverse, #ccc);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
}
umag-table::-webkit-scrollbar-thumb:hover {
  background-color: var(--grayscale-500);
}
umag-table.row-selectable p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr:not(.state-message) {
  cursor: pointer;
}
umag-table.row-selectable p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr:not(.state-message):hover {
  background-color: var(--bg-primary-hover);
}
umag-table.row-selectable p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr:not(.state-message):active {
  background-color: var(--bg-primary-active);
}
umag-table.state-loading p-table.p-component .p-datatable-table-container table, umag-table.state-error p-table.p-component .p-datatable-table-container table, umag-table.state-no-filter-data p-table.p-component .p-datatable-table-container table {
  table-layout: auto;
}
umag-table .table-wrapper {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  position: relative;
  overflow: auto;
  transition: all 0.5s;
  scroll-behavior: smooth;
}
umag-table .table-wrapper::-webkit-scrollbar {
  background: var(--bg-surface-sf-1, #f5f5f5);
  width: 4px;
  height: 4px;
  border-radius: 30px;
}
umag-table .table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-surface-sf-1, #f5f5f5);
}
umag-table .table-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--grayscale-400);
  cursor: pointer;
  width: 4px;
  height: 4px;
  border-radius: 30px;
  background: var(--icon-secondary-inverse, #ccc);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
}
umag-table .table-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: var(--grayscale-500);
}
umag-table .control-button-wrapper {
  display: inline-flex;
  position: sticky;
  top: 0;
  right: 0;
  z-index: var(--z-sticky);
  margin-left: -52px;
}
umag-table .control-button-wrapper .gradient {
  width: 17px;
  background: linear-gradient(97.26deg, var(--bg-transparent-default) 0.29%, var(--bg-secondary-default) 94.49%);
}
umag-table .control-button-wrapper umag-icon-button.ghost.size-m {
  height: 38px;
  width: 36px;
  display: inline-flex;
  padding: 9px var(--space-2x);
  border-radius: var(--radius-0);
  background-color: var(--bg-primary-hover);
}
umag-table p-table.p-datatable {
  position: static;
  flex: 1 1 auto;
}
umag-table p-table.p-component .p-datatable-table-container {
  overflow: visible !important;
  transition: all 0.5s;
  scroll-behavior: smooth;
}
umag-table p-table.p-component .p-datatable-table-container::-webkit-scrollbar {
  background: var(--bg-surface-sf-1, #f5f5f5);
  width: 4px;
  height: 4px;
  border-radius: 30px;
}
umag-table p-table.p-component .p-datatable-table-container::-webkit-scrollbar-track {
  background: var(--bg-surface-sf-1, #f5f5f5);
}
umag-table p-table.p-component .p-datatable-table-container::-webkit-scrollbar-thumb {
  background-color: var(--grayscale-400);
  cursor: pointer;
  width: 4px;
  height: 4px;
  border-radius: 30px;
  background: var(--icon-secondary-inverse, #ccc);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
}
umag-table p-table.p-component .p-datatable-table-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--grayscale-500);
}
umag-table p-table.p-component .p-datatable-table-container table {
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead {
  border: none;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr {
  border-bottom: 1px solid var(--border-primary-soft);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th {
  height: 40px;
  min-height: 40px;
  color: var(--text-secondary-default);
  background-color: var(--bg-secondary-default);
  padding: var(--space-2x) var(--space-3x);
  border: none;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 100% !important;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th.p-sortable-column:not(.p-highlight):hover {
  background: var(--bg-secondary-default);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th.sortable {
  padding: 9px var(--space-3x);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th.sortable > .sortable-header {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5x);
  max-width: 100%;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th.sortable > .sortable-header > span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th.sortable > .sortable-header > umag-icon {
  flex-shrink: 0;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th:not(.sortable) {
  text-overflow: ellipsis;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th:first-child {
  padding-left: var(--space-3x);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th:last-child {
  padding-right: 55px;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th.select-column {
  width: 38px;
  padding-right: var(--space-0-5x);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th.control-column {
  padding: var(--space-0) var(--space-0) var(--space-0) 44px;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th.p-sortable-column:focus {
  box-shadow: none;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th.p-sortable-column:not(.p-state-active):hover {
  border-color: revert-layer;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-thead > tr > th .p-datatable-column-resizer {
  border-right: 1px solid var(--border-primary-soft);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr {
  background-color: var(--bg-primary-default);
  border-bottom: 1px solid var(--border-primary-soft);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr.row-selected {
  background-color: var(--bg-primary-hover);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr > td {
  color: var(--text-primary-default);
  padding: 15px var(--space-3x);
  border: none;
  vertical-align: top;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr > td.select-column {
  padding: var(--space-2x) var(--space-0-5x) var(--space-2x) var(--space-3x);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr > td:last-child {
  padding-right: 55px;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr:last-child {
  border-color: transparent;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr:last-child > td {
  border: none;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr.state-message td {
  padding-top: 76px;
  padding-bottom: 76px;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr.state-message td .state-message__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr.state-message td .state-message__wrapper .state-message__content {
  max-width: 214px;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-3x);
  align-items: center;
  justify-content: center;
  text-align: center;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tbody > tr.state-message.state-message--empty > td {
  padding-top: 148px;
  padding-bottom: 148px;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tfoot {
  box-shadow: 0 -1px 0 var(--border-primary-soft);
  position: sticky;
  bottom: -1px;
  z-index: var(--z-sticky);
  background-color: var(--bg-primary-default);
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tfoot > tr > td {
  vertical-align: middle;
  border-color: transparent;
}
umag-table p-table.p-component .p-datatable-table-container table .p-datatable-tfoot > tr > td:last-child {
  padding-right: 55px;
}
umag-table p-table.p-component .p-datatable-table-container table.p-datatable-scrollable-table .p-datatable-tfoot {
  bottom: -1px;
}
umag-table .paginator-wrapper {
  padding: var(--space-1-5x) var(--space-0);
}

.umag-table-view-options ul {
  margin-top: var(--space-3x);
}
.umag-table-view-options ul > li {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-2x);
}
.umag-table-view-options ul > li:last-child {
  margin-bottom: 0;
}






/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: block;
  opacity: 0.9;
  transition: background-color 0.2s linear, opacity 0.2s linear;
  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: transparent;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color 0.2s linear, width 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 4px;
  height: 10px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #aaa;
  height: 6px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #aaa;
  width: 6px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}
umag-tabs .tabs__list {
  position: relative;
  display: flex;
  gap: var(--space-1x);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  transition: all 0.5s;
  scroll-behavior: smooth;
}
umag-tabs .tabs__list::-webkit-scrollbar {
  background: var(--bg-surface-sf-1, #f5f5f5);
  width: 4px;
  height: 4px;
  border-radius: 30px;
}
umag-tabs .tabs__list::-webkit-scrollbar-track {
  background: var(--bg-surface-sf-1, #f5f5f5);
}
umag-tabs .tabs__list::-webkit-scrollbar-thumb {
  background-color: var(--grayscale-400);
  cursor: pointer;
  width: 4px;
  height: 4px;
  border-radius: 30px;
  background: var(--icon-secondary-inverse, #ccc);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) inset;
}
umag-tabs .tabs__list::-webkit-scrollbar-thumb:hover {
  background-color: var(--grayscale-500);
}
umag-tabs .tabs__list .tab-btn {
  position: relative;
  box-sizing: border-box;
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-3x) var(--space-3x) 14px var(--space-3x);
  margin: 0;
  cursor: pointer;
  color: var(--text-primary-default);
  display: flex;
  align-items: center;
  gap: var(--space-1x);
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-tabs .tabs__list .tab-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--radius-0-5x);
  background: transparent;
  transition: background var(--duration-slow) var(--ease-standard);
}
umag-tabs .tabs__list .tab-btn:hover::after {
  background: var(--border-primary-default);
}
umag-tabs .tabs__list .tab-btn.is-active {
  color: var(--text-accent-default);
}
umag-tabs .tabs__list .tab-btn.disabled {
  color: var(--text-disabled-default);
  cursor: not-allowed;
  pointer-events: none;
}
umag-tabs .tabs__list .tab-btn.disabled :hover {
  border-color: transparent;
}
umag-tabs .tabs__list .tab-btn .dot {
  width: 5.6px;
  height: 5.6px;
  transform: rotate(90deg);
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--icon-accent-default);
  margin: 5.2px;
}
umag-tabs .tabs__list .baseline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: var(--radius-0-5x);
  background: var(--border-primary-soft);
}
umag-tabs .tabs__list .indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--tab-width);
  transform: translateX(var(--tab-x));
  background: var(--text-accent-default);
  border-radius: var(--radius-0-5x);
  transition: transform var(--duration-slow) var(--ease-standard), width var(--duration-slow) var(--ease-standard);
  will-change: transform, width;
}
umag-tabs .tabs__list .indicator .is-hidden {
  opacity: 0;
}
umag-tabs .tabs__list .no-anim {
  transition: none !important;
}






umag-tag {
  border-radius: var(--radius-0-5x);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: var(--font-weight-medium);
  box-sizing: border-box;
  border: 1px solid transparent;
  width: fit-content;
}
umag-tag .label-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-0-5x);
}
umag-tag .label-wrapper span.tag-label {
  color: var(--text-primary-default);
}
umag-tag .label-wrapper .icon-wrapper {
  padding: var(--space-0-5x);
}
umag-tag .label-wrapper .left-icon-wrapper {
  padding: var(--space-0-5x) 0;
}
umag-tag .label-wrapper .in-row-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
umag-tag.disabled {
  cursor: not-allowed;
  background-color: var(--bg-tertiary-default) !important;
  border-color: var(--border-primary-soft) !important;
  color: var(--text-disabled-default) !important;
  pointer-events: none;
}
umag-tag.disabled umag-icon {
  color: var(--text-disabled-default) !important;
}
umag-tag .icon-wrapper {
  border-radius: var(--radius-0-5x);
  cursor: pointer;
}
umag-tag .icon-wrapper:hover {
  background-color: var(--bg-transparent-hover);
}
umag-tag.size-m {
  padding: 3px 5px;
}
umag-tag.size-m .label-wrapper span.tag-label {
  padding: 1px var(--space-1x);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
umag-tag.size-s {
  padding: 1px 3px;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
}
umag-tag.size-s span.tag-label {
  padding: 1px var(--space-0-5x);
}
umag-tag.size-s umag-icon {
  width: 12px !important;
  height: 12px !important;
}
umag-tag.accent {
  border-color: var(--border-accent-default);
  background-color: var(--bg-accent-soft);
  color: var(--bg-accent-default);
}
umag-tag.neutral-solid {
  background-color: var(--bg-secondary-default);
  color: var(--text-primary-default);
  border-color: var(--border-primary-default);
}
umag-tag.neutral-outlined {
  background-color: transparent;
  color: var(--text-primary-default);
  border-color: var(--border-primary-default);
}
umag-tag.neutral-ghost {
  background-color: transparent;
}
umag-tag.error {
  background-color: var(--bg-critical-soft);
  color: var(--text-critical-default);
  border-color: var(--border-critical-default);
}






.toast-overlay-panel {
  position: fixed !important;
  z-index: var(--z-toast) !important;
  right: 0 !important;
  top: 0 !important;
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  .toast-overlay-panel {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
  }
}

.cdk-overlay-container:has(.toast-overlay-panel) {
  z-index: var(--z-toast) !important;
}

umag-toast {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2x);
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  umag-toast {
    align-items: stretch;
    padding: 0 var(--space-3x);
  }
}
umag-toast .toast {
  display: flex;
  align-items: center;
  width: 450px;
  gap: var(--space-2x);
  background: var(--bg-primary-default);
  border-radius: var(--radius-0-5x);
  box-shadow: var(--shadow-pt-8);
  transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}
@media screen and (min-width: 320px) and (max-width: 900px) {
  umag-toast .toast {
    width: 100%;
  }
}
umag-toast .toast__indicator {
  width: 4px;
  align-self: stretch;
  border-radius: var(--radius-0-5x) 0 0 var(--radius-0-5x);
}
umag-toast .toast__content {
  display: flex;
  align-items: center;
  padding: var(--space-2x) var(--space-2x) var(--space-2x) 0;
  width: 100%;
  min-width: 0;
}
umag-toast .toast__content-title {
  display: flex;
  align-items: center;
  gap: var(--space-1x);
  margin-right: var(--space-4x);
  flex: 1;
  min-width: 0;
}
umag-toast .toast__content-title .title {
  flex: 1;
  min-width: 0;
  padding: var(--space-1-5x) 0;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-l);
  line-height: var(--font-line-height-l);
}
umag-toast .toast__content umag-icon-button {
  flex-shrink: 0;
  color: var(--icon-primary-default);
}
umag-toast .toast.toast-info .toast__indicator {
  background-color: var(--icon-accent-default);
}
umag-toast .toast.toast-info .toast__content-title umag-icon {
  color: var(--icon-accent-default);
}
umag-toast .toast.toast-info .toast__content-title .title {
  color: var(--text-accent-default);
}
umag-toast .toast.toast-success .toast__indicator {
  background-color: var(--icon-brand-default);
}
umag-toast .toast.toast-success .toast__content-title umag-icon {
  color: var(--icon-brand-default);
}
umag-toast .toast.toast-success .toast__content-title .title {
  color: var(--text-brand-default);
}
umag-toast .toast.toast-warning .toast__indicator {
  background-color: var(--icon-warning-default);
}
umag-toast .toast.toast-warning .toast__content-title umag-icon {
  color: var(--icon-warning-default);
}
umag-toast .toast.toast-warning .toast__content-title .title {
  color: var(--text-warning-default);
}
umag-toast .toast.toast-error .toast__indicator {
  background-color: var(--icon-critical-default);
}
umag-toast .toast.toast-error .toast__content-title umag-icon {
  color: var(--icon-critical-default);
}
umag-toast .toast.toast-error .toast__content-title .title {
  color: var(--text-critical-default);
}