@charset "UTF-8";html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.accordion .accordion-item {
  border: 1px solid var(--swatches-border);
  overflow: hidden;
}

.accordion .accordion-item.radius-round {
  border-radius: 8px;
}

.accordion .accordion-item.radius-round-first {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.accordion .accordion-item.radius-round-last {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.accordion .accordion-item.radius-null {
  border-radius: 0;
}

.accordion .accordion-item .accordion-checkbox {
  display: none;
}

.accordion .accordion-item .accordion-checkbox:checked + .accordion-header + .accordion-content {
  height: 300px;
  background: var(--swatches-on-surface-invert);
}

.accordion .accordion-item .accordion-checkbox:checked + .accordion-header > .chevron {
  transform: rotate(180deg);
}

.accordion .accordion-item > .accordion-checkbox:not(:checked) + .accordion-header:hover {
  background-color: var(--swatches-surface-alt);
}

.accordion .accordion-item .accordion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--swatches-on-surface-invert);
  cursor: pointer;
  border: 0;
}

.accordion .accordion-item .accordion-header i.icon,
.accordion .accordion-item .accordion-header svg.icon {
  width: 32px;
  height: 32px;
}

.accordion .accordion-item .accordion-header i.icon {
  background-color: var(--swatches-on-surface-base);
}

.accordion .accordion-item .accordion-header svg.icon {
  color: var(--swatches-on-surface-base);
}

.accordion .accordion-item .accordion-header .chevron {
  margin-left: auto;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.accordion .accordion-item .accordion-header i.chevron {
  background-color: var(--swatches-on-surface-base);
}

.accordion .accordion-item .accordion-header svg.chevron {
  color: var(--swatches-on-surface-base);
}

.accordion .accordion-item .accordion-header .accordion-title {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 500;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .accordion .accordion-item .accordion-header .accordion-title {
    font-size: 18px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .accordion .accordion-item .accordion-header .accordion-title {
    font-size: 16px;
  }
}

.accordion .accordion-item .accordion-content {
  height: 0;
  overflow: hidden;
  padding: 0;
}

.accordion .accordion-item .accordion-content .placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 130%;
  height: 300px;
}

.accordion.small .accordion-item .accordion-header {
  padding: 16px;
}

.accordion.small .accordion-item .accordion-checkbox:checked + .accordion-header + .accordion-content {
  padding: 0 16px 16px;
}

.accordion.medium .accordion-item .accordion-header {
  padding: 24px;
}

.accordion.medium .accordion-item .accordion-checkbox:checked + .accordion-header + .accordion-content {
  padding: 0 24px 24px;
}

.accordion.large .accordion-item .accordion-header {
  padding: 32px;
}

.accordion.large .accordion-item .accordion-checkbox:checked + .accordion-header + .accordion-content {
  padding: 0 32px 32px;
}

.accordion.invert .accordion-item .accordion-header {
  background-color: var(--swatches-surface);
  color: var(--swatches-on-surface-base);
}

.accordion.invert .accordion-item .accordion-header i.icon {
  background-color: var(--swatches-on-surface-base);
}

.accordion.invert .accordion-item .accordion-header svg.icon {
  color: var(--swatches-on-surface-base);
}

.accordion.invert .accordion-item .accordion-header i.chevron {
  background-color: var(--swatches-on-surface-base);
}

.accordion.invert .accordion-item .accordion-header svg.chevron {
  color: var(--swatches-on-surface-base);
}

.accordion.invert .accordion-item .accordion-checkbox:checked + .accordion-header + .accordion-content {
  background-color: var(--swatches-surface);
}

.alert {
  border-radius: 8px;
  padding: 24px;
  border: 1px solid;
  display: flex;
  align-items: center;
  color: var(--swatches-on-surface-base);
  position: relative;
  gap: 16px;
  background-color: var(--swatches-base-subtle);
  border-color: var(--swatches-border-base);
}

.alert i.icon,
.alert svg.icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.alert i.icon {
  background-color: var(--swatches-on-surface-base);
}

.alert svg.icon {
  color: var(--swatches-on-surface-base);
}

.alert .title {
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--swatches-on-surface-base);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .alert {
    padding: 20px;
    border-radius: 4px;
  }
  .alert .title {
    font-size: 16px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .alert {
    padding: 16px;
    border-radius: 4px;
  }
  .alert .title {
    font-size: 16px;
  }
}

.alert.alert-primary {
  background-color: var(--swatches-primary-subtle);
  border-color: var(--swatches-border-primary-focus);
}

.alert.alert-primary .title {
  color: var(--swatches-primary-active);
}

.alert.alert-primary > i {
  background-color: var(--swatches-primary-default);
}

.alert.alert-primary > svg.icon {
  color: var(--swatches-primary-default);
}

.alert.alert-secondary {
  background-color: var(--swatches-secondary-subtle);
  border-color: var(--swatches-border-secondary-focus);
}

.alert.alert-secondary .title {
  color: var(--swatches-secondary-active);
}

.alert.alert-secondary > i {
  background-color: var(--swatches-secondary-default);
}

.alert.alert-secondary > svg.icon {
  color: var(--swatches-secondary-default);
}

.alert.alert-tertiary {
  background-color: var(--swatches-tertiary-subtle);
  border-color: var(--swatches-border-tertiary-focus);
}

.alert.alert-tertiary .title {
  color: var(--swatches-tertiary-active);
}

.alert.alert-tertiary > i {
  background-color: var(--swatches-tertiary-default);
}

.alert.alert-tertiary > svg.icon {
  color: var(--swatches-tertiary-default);
}

.alert.alert-quaternary {
  background-color: var(--swatches-quaternary-subtle);
  border-color: var(--swatches-border-quaternary-focus);
}

.alert.alert-quaternary .title {
  color: var(--swatches-quaternary-active);
}

.alert.alert-quaternary > i {
  background-color: var(--swatches-quaternary-default);
}

.alert.alert-quaternary > svg.icon {
  color: var(--swatches-quaternary-default);
}

.alert.alert-success {
  background-color: var(--swatches-success-subtle);
  border-color: var(--swatches-border-success-focus);
}

.alert.alert-success .title {
  color: var(--swatches-success-active);
}

.alert.alert-success > i {
  background-color: var(--swatches-success-default);
}

.alert.alert-success > svg.icon {
  color: var(--swatches-success-default);
}

.alert.alert-warning {
  background-color: var(--swatches-warning-subtle);
  border-color: var(--swatches-border-warning-focus);
}

.alert.alert-warning .title {
  color: var(--swatches-warning-active);
}

.alert.alert-warning > i {
  background-color: var(--swatches-warning-default);
}

.alert.alert-warning > svg.icon {
  color: var(--swatches-warning-default);
}

.alert.alert-error {
  background-color: var(--swatches-error-subtle);
  border-color: var(--swatches-border-error-focus);
}

.alert.alert-error .title {
  color: var(--swatches-error-active);
}

.alert.alert-error > i {
  background-color: var(--swatches-error-default);
}

.alert.alert-error > svg.icon {
  color: var(--swatches-error-default);
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--neutral-800);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  border-radius: 1000px;
  border: 1px solid var(--swatches-border-base);
  background-color: var(--swatches-surface);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1000px;
  background: var(--neutral-50);
  cursor: pointer;
}

.avatar.avatar-initials {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar .avatar img + .avatar-initials {
  display: none;
}

.avatar-xsmall {
  width: 16px;
  height: 16px;
  font-size: 0.625rem;
}

.avatar-small {
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
}

.avatar-medium {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}

.avatar-large {
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
}

.avatar-xlarge {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
}

.avatar-xxlarge {
  width: 56px;
  height: 56px;
  font-size: 1.75rem;
}

.avatar-huge {
  width: 64px;
  height: 64px;
  font-size: 2rem;
}

.avatar-profile {
  width: 143px;
  height: 143px;
  font-size: 2.5rem;
}

.avatar-list {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

input#avatarUpload {
  display: none;
}

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group.small .avatar {
  width: 16px;
  height: 16px;
}

.avatar-group.small .avatar:not(:first-child) {
  margin-left: -8px;
}

.avatar-group.medium .avatar {
  width: 24px;
  height: 24px;
}

.avatar-group.medium .avatar:not(:first-child) {
  margin-left: -12px;
}

.avatar-group.large .avatar {
  width: 40px;
  height: 40px;
}

.avatar-group.large .avatar:not(:first-child) {
  margin-left: -22px;
}

.bg-primary {
  background-color: var(--primary-default);
}

.bg-secondary {
  background-color: var(--secondary-default);
}

.bg-tertiary {
  background-color: var(--tertiary-default);
}

.bg-quaternary {
  background-color: var(--quaternary-default);
}

.bg-support {
  background-color: var(--support-default);
}

.bg-success {
  background-color: var(--success-default);
}

.bg-warning {
  background-color: var(--warning-default);
}

.bg-error {
  background-color: var(--destructive-default);
}

.bg-red {
  background-color: var(--red-default);
}

.bg-yellow {
  background-color: var(--yellow-default);
}

.bg-green {
  background-color: var(--green-default);
}

.bg-blue {
  background-color: var(--blue-default);
}

.bg-purple {
  background-color: var(--purple-default);
}

.bg-neutral {
  background-color: var(--neutral-0);
}

.bg-neutral-50 {
  background-color: var(--neutral-50);
}

.bg-neutral-100 {
  background-color: var(--neutral-100);
}

.bg-neutral-200 {
  background-color: var(--neutral-200);
}

.bg-neutral-300 {
  background-color: var(--neutral-300);
}

.bg-neutral-400 {
  background-color: var(--neutral-400);
}

.bg-neutral-500 {
  background-color: var(--neutral-500);
}

.bg-neutral-600 {
  background-color: var(--neutral-600);
}

.bg-neutral-700 {
  background-color: var(--neutral-700);
}

.bg-neutral-800 {
  background-color: var(--neutral-800);
}

.bg-neutral-900 {
  background-color: var(--neutral-900);
}

.bg-neutral-1000 {
  background-color: var(--neutral-1000);
}

.bg-white {
  background-color: var(--pure-white);
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 1000px;
  font-family: var(--font-body);
  font-weight: 600;
}

.badge.radius-round {
  border-radius: 8px;
}

.badge.radius-straigh {
  border-radius: 0;
}

.badge.outline {
  border-color: var(--swatches-border-base);
  background-color: transparent;
  color: var(--swatches-on-base);
}

.badge.outline > i.icon {
  background-color: var(--swatches-on-base);
}

.badge.outline > svg.icon {
  color: var(--swatches-on-base);
}

.badge.outline.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.badge.outline.primary {
  border-color: var(--swatches-border-primary);
  background-color: transparent;
  color: var(--swatches-on-surface-primary);
}

.badge.outline.primary > i.icon {
  background-color: var(--swatches-on-surface-primary);
}

.badge.outline.primary > svg.icon {
  color: var(--swatches-on-surface-primary);
}

.badge.outline.secondary {
  border-color: var(--swatches-border-secondary);
  background-color: transparent;
  color: var(--swatches-on-surface-secondary);
}

.badge.outline.secondary > i.icon {
  background-color: var(--swatches-on-surface-secondary);
}

.badge.outline.secondary > svg.icon {
  color: var(--swatches-on-surface-secondary);
}

.badge.outline.tertiary {
  border-color: var(--swatches-border-tertiary);
  background-color: transparent;
  color: var(--swatches-tertiary-default);
}

.badge.outline.tertiary > i.icon {
  background-color: var(--swatches-tertiary-default);
}

.badge.outline.tertiary > svg.icon {
  color: var(--swatches-tertiary-default);
}

.badge.outline.quaternary {
  border-color: var(--swatches-border-quaternary);
  background-color: transparent;
  color: var(--swatches-quaternary-default);
}

.badge.outline.quaternary > i.icon {
  background-color: var(--swatches-quaternary-default);
}

.badge.outline.quaternary > svg.icon {
  color: var(--swatches-quaternary-default);
}

.badge.outline.success {
  border-color: var(--swatches-border-success);
  background-color: transparent;
  color: var(--swatches-on-surface-success);
}

.badge.outline.success > i.icon {
  background-color: var(--swatches-on-surface-success);
}

.badge.outline.success > svg.icon {
  color: var(--swatches-on-surface-success);
}

.badge.outline.warning {
  border-color: var(--swatches-border-warning);
  background-color: transparent;
  color: var(--swatches-on-surface-warning);
}

.badge.outline.warning > i.icon {
  background-color: var(--swatches-on-surface-warning);
}

.badge.outline.warning > svg.icon {
  color: var(--swatches-on-surface-warning);
}

.badge.outline.error {
  border-color: var(--swatches-border-error);
  background-color: transparent;
  color: var(--swatches-on-surface-error);
}

.badge.outline.error > i.icon {
  background-color: var(--swatches-on-surface-error);
}

.badge.outline.error > svg.icon {
  color: var(--swatches-on-surface-error);
}

.badge.filled {
  border-color: var(--swatches-base-active-alt);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-on-surface-base-alt);
}

.badge.filled > i.icon {
  background-color: var(--swatches-on-surface-base-alt);
}

.badge.filled > svg.icon {
  color: var(--swatches-on-surface-base-alt);
}

.badge.filled.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.badge.filled.primary {
  border-color: var(--swatches-primary-default);
  background-color: var(--swatches-primary-default);
  color: var(--swatches-on-primary);
}

.badge.filled.primary > i.icon {
  background-color: var(--swatches-on-primary);
}

.badge.filled.primary > svg.icon {
  color: var(--swatches-on-primary);
}

.badge.filled.secondary {
  border-color: var(--swatches-secondary-default);
  background-color: var(--swatches-secondary-default);
  color: var(--swatches-on-secondary);
}

.badge.filled.secondary > i.icon {
  background-color: var(--swatches-on-secondary);
}

.badge.filled.secondary > svg.icon {
  color: var(--swatches-on-secondary);
}

.badge.filled.tertiary {
  border-color: var(--swatches-tertiary-default);
  background-color: var(--swatches-tertiary-default);
  color: var(--swatches-on-tertiary);
}

.badge.filled.tertiary > i.icon {
  background-color: var(--swatches-on-tertiary);
}

.badge.filled.tertiary > svg.icon {
  color: var(--swatches-on-tertiary);
}

.badge.filled.quaternary {
  border-color: var(--swatches-quaternary-default);
  background-color: var(--swatches-quaternary-default);
  color: var(--swatches-on-quaternary);
}

.badge.filled.quaternary > i.icon {
  background-color: var(--swatches-on-quaternary);
}

.badge.filled.quaternary > svg.icon {
  color: var(--swatches-on-quaternary);
}

.badge.filled.success {
  border-color: var(--swatches-success-default);
  background-color: var(--swatches-success-default);
  color: var(--swatches-on-success);
}

.badge.filled.success > i.icon {
  background-color: var(--swatches-on-success);
}

.badge.filled.success > svg.icon {
  color: var(--swatches-on-success);
}

.badge.filled.warning {
  border-color: var(--swatches-warning-default);
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-warning);
}

.badge.filled.warning > i.icon {
  background-color: var(--swatches-on-warning);
}

.badge.filled.warning > svg.icon {
  color: var(--swatches-on-warning);
}

.badge.filled.error {
  border-color: var(--swatches-error-default);
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-error);
}

.badge.filled.error > i.icon {
  background-color: var(--swatches-on-error);
}

.badge.filled.error > svg.icon {
  color: var(--swatches-on-error);
}

.badge.accent {
  border-color: var(--swatches-on-surface-base-alt);
  background-color: var(--swatches-on-surface-base-alt);
  color: var(--swatches-on-base);
}

.badge.accent > i.icon {
  background-color: var(--swatches-on-base);
}

.badge.accent > svg.icon {
  color: var(--swatches-on-base);
}

.badge.accent.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.badge.accent.primary {
  border-color: var(--swatches-primary-subtle);
  background-color: var(--swatches-primary-subtle);
  color: var(--swatches-primary-default);
}

.badge.accent.primary > i.icon {
  background-color: var(--swatches-primary-default);
}

.badge.accent.primary > svg.icon {
  color: var(--swatches-primary-default);
}

.badge.accent.secondary {
  border-color: var(--swatches-secondary-subtle);
  background-color: var(--swatches-secondary-subtle);
  color: var(--swatches-secondary-default);
}

.badge.accent.secondary > i.icon {
  background-color: var(--swatches-secondary-default);
}

.badge.accent.secondary > svg.icon {
  color: var(--swatches-secondary-default);
}

.badge.accent.tertiary {
  border-color: var(--swatches-tertiary-subtle);
  background-color: var(--swatches-tertiary-subtle);
  color: var(--swatches-tertiary-default);
}

.badge.accent.tertiary > i.icon {
  background-color: var(--swatches-tertiary-default);
}

.badge.accent.tertiary > svg.icon {
  color: var(--swatches-tertiary-default);
}

.badge.accent.quaternary {
  border-color: var(--swatches-quaternary-subtle);
  background-color: var(--swatches-quaternary-subtle);
  color: var(--swatches-quaternary-default);
}

.badge.accent.quaternary > i.icon {
  background-color: var(--swatches-quaternary-default);
}

.badge.accent.quaternary > svg.icon {
  color: var(--swatches-quaternary-default);
}

.badge.accent.success {
  border-color: var(--swatches-success-subtle);
  background-color: var(--swatches-success-subtle);
  color: var(--swatches-success-default);
}

.badge.accent.success > i.icon {
  background-color: var(--swatches-success-default);
}

.badge.accent.success > svg.icon {
  color: var(--swatches-success-default);
}

.badge.accent.warning {
  border-color: var(--swatches-warning-subtle);
  background-color: var(--swatches-warning-subtle);
  color: var(--swatches-on-surface-warning);
}

.badge.accent.warning > i.icon {
  background-color: var(--swatches-on-surface-warning);
}

.badge.accent.warning > svg.icon {
  color: var(--swatches-on-surface-warning);
}

.badge.accent.error {
  border-color: var(--swatches-error-subtle);
  background-color: var(--swatches-error-subtle);
  color: var(--swatches-on-surface-error);
}

.badge.accent.error > i.icon {
  background-color: var(--swatches-on-surface-error);
}

.badge.accent.error > svg.icon {
  color: var(--swatches-on-surface-error);
}

.badge.xsmall {
  min-width: 32px;
  width: auto;
  max-height: 24px;
  padding: 4px 8px;
  gap: 6px;
  font-size: 12px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .badge.xsmall {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .badge.xsmall {
    font-size: 10px;
  }
}

.badge.xsmall i.icon,
.badge.xsmall svg.icon {
  width: 11.67px;
  height: 11.67px;
}

.badge.small {
  min-width: 32px;
  width: auto;
  max-height: 32px;
  padding: 8px 10px;
  gap: 6px;
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .badge.small {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .badge.small {
    font-size: 12px;
  }
}

.badge.small i.icon,
.badge.small svg.icon {
  width: 11.67px;
  height: 11.67px;
}

.badge.medium {
  min-width: 40px;
  width: auto;
  max-height: 40px;
  padding: 8px 13px;
  gap: 8px;
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .badge.medium {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .badge.medium {
    font-size: 14px;
  }
}

.badge.medium i.icon,
.badge.medium svg.icon {
  width: 16.67px;
  height: 16.67px;
}

.badge.large {
  min-width: 48px;
  width: auto;
  max-height: 48px;
  padding: 8px 16px;
  gap: 10px;
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .badge.large {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .badge.large {
    font-size: 16px;
  }
}

.badge.large i.icon,
.badge.large svg.icon {
  width: 20px;
  height: 20px;
}

.badge.xlarge {
  min-width: 48px;
  width: auto;
  max-height: 48px;
  padding: 12px 20px;
  gap: 12px;
  font-size: 20px;
}

.badge.xlarge i.icon,
.badge.xlarge svg.icon {
  width: 26.67px;
  height: 26.67px;
}

.badge .badge-text {
  padding-inline: 6px;
}

.btn {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  cursor: pointer;
  background-color: var(--swatches-base-default);
  border-color: var(--swatches-border-base);
  color: var(--swatches-on-base);
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
}

.btn .dot-overlay {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--swatches-error-hover);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  top: 6px;
  right: 6px;
}

.btn.small .dot-overlay {
  top: 3px;
  right: 3px;
}

.btn.medium .dot-overlay {
  top: 6px;
  right: 6px;
}

.btn.large .dot-overlay {
  top: 10px;
  right: 10px;
}

.btn.xlarge .dot-overlay {
  top: 14px;
  right: 14px;
}

.btn:has(> span ~ .icon) .dot-overlay {
  left: auto;
  right: 6px;
}

.btn > i.icon {
  background-color: var(--swatches-on-base);
}

.btn > svg.icon {
  color: var(--swatches-on-base);
}

.btn > i.flag {
  background-color: transparent;
}

.btn:not(:disabled):hover, .btn:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-base-hover);
}

.btn:active, .btn[data-state=active] {
  background-color: var(--swatches-base-active);
}

.btn:focus-visible, .btn[data-state=focus] {
  background-color: var(--swatches-base-default);
  border-color: var(--swatches-border-base-focus);
  border-width: 3px;
}

.btn[aria-pressed=true], .btn[data-state=selected] {
  background-color: var(--swatches-base-selected);
  border-color: var(--swatches-base-selected);
}

.btn:disabled, .btn[data-state=disabled] {
  background-color: var(--swatches-base-default);
  border-color: var(--swatches-border-base);
  color: var(--swatches-on-base);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn::selection {
  background-color: var(--swatches-base-selected);
}

.btn.invert {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-border-invert);
  color: var(--swatches-on-surface-invert);
}

.btn.invert:not(:disabled):hover, .btn.invert:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-on-surface-alt-invert);
}

.btn.invert:active, .btn.invert[data-state=active] {
  background-color: var(--swatches-primary-active);
  border-color: var(--swatches-border-invert);
}

.btn.invert:focus-visible, .btn.invert[data-state=focus] {
  background-color: var(--swatches-surface-invert);
  border-color: var(--swatches-border-invert);
  border-width: 3px;
}

.btn.invert[aria-pressed=true], .btn.invert[data-state=selected] {
  background-color: var(--swatches-primary-selected);
  border-color: var(--swatches-border-invert);
}

.btn.invert:disabled, .btn.invert[data-state=disabled] {
  background-color: var(--swatches-on-surface-invert);
  border-color: var(--swatches-border-invert);
  opacity: 0.5;
}

.btn.invert > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.btn.invert > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.btn.invert > i.flag {
  background-color: transparent;
}

.btn.plain {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-base);
}

.btn.plain:not(:disabled):hover, .btn.plain:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-base-hover-alt);
  border-color: var(--swatches-base-hover-alt);
  color: var(--swatches-base-default);
}

.btn.plain:not(:disabled):hover > i.icon, .btn.plain:not([data-state=disabled])[data-state=hover] > i.icon {
  background-color: var(--swatches-base-default);
}

.btn.plain:not(:disabled):hover > svg.icon, .btn.plain:not([data-state=disabled])[data-state=hover] > svg.icon {
  color: var(--swatches-base-default);
}

.btn.plain:active, .btn.plain[data-state=active] {
  background-color: var(--swatches-base-active);
  border-color: var(--swatches-base-active);
}

.btn.plain:focus-visible, .btn.plain[data-state=focus] {
  background-color: var(--swatches-base-default);
  border-color: var(--swatches-border-base-focus);
  border-width: 3px;
}

.btn.plain[aria-pressed=true], .btn.plain[data-state=selected] {
  background-color: var(--swatches-base-selected);
}

.btn.plain:disabled, .btn.plain[data-state=disabled] {
  color: var(--swatches-on-base);
  background-color: var(--swatches-base-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.plain > i.icon {
  background-color: var(--swatches-on-base);
}

.btn.plain > svg.icon {
  color: var(--swatches-on-base);
}

.btn.plain-invert {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.btn.plain-invert:not(:disabled):hover, .btn.plain-invert:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-primary-default);
}

.btn.plain-invert:active, .btn.plain-invert[data-state=active] {
  background-color: var(--swatches-primary-active);
  border-color: var(--swatches-primary-active);
}

.btn.plain-invert:focus-visible, .btn.plain-invert[data-state=focus] {
  background-color: var(--swatches-surface-invert);
  border-color: var(--swatches-border-invert);
  border-width: 3px;
}

.btn.plain-invert[aria-pressed=true], .btn.plain-invert[data-state=selected] {
  background-color: var(--swatches-primary-selected);
}

.btn.plain-invert:disabled, .btn.plain-invert[data-state=disabled] {
  background-color: var(--swatches-base-hover-alt);
  border-color: var(--swatches-base-hover-alt);
  color: var(--swatches-base-default);
  opacity: 0.5;
}

.btn.plain-invert > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.btn.plain-invert > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.btn.plain-error {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-error);
}

.btn.plain-error:not(:disabled):hover, .btn.plain-error:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-error-hover);
  color: var(--swatches-base-default);
}

.btn.plain-error:not(:disabled):hover > i.icon, .btn.plain-error:not([data-state=disabled])[data-state=hover] > i.icon {
  background-color: var(--swatches-base-default);
}

.btn.plain-error:not(:disabled):hover > svg.icon, .btn.plain-error:not([data-state=disabled])[data-state=hover] > svg.icon {
  color: var(--swatches-base-default);
}

.btn.plain-error:active, .btn.plain-error[data-state=active] {
  background-color: var(--swatches-error-active);
  color: var(--swatches-base-default);
}

.btn.plain-error:active > i.icon, .btn.plain-error[data-state=active] > i.icon {
  background-color: var(--swatches-base-default);
}

.btn.plain-error:active > svg.icon, .btn.plain-error[data-state=active] > svg.icon {
  color: var(--swatches-base-default);
}

.btn.plain-error:focus-visible, .btn.plain-error[data-state=focus] {
  background-color: var(--swatches-error-default);
  border-color: var(--swatches-border-error-focus);
  border-width: 3px;
  color: var(--swatches-base-default);
}

.btn.plain-error:focus-visible > i.icon, .btn.plain-error[data-state=focus] > i.icon {
  background-color: var(--swatches-base-default);
}

.btn.plain-error:focus-visible > svg.icon, .btn.plain-error[data-state=focus] > svg.icon {
  color: var(--swatches-base-default);
}

.btn.plain-error[aria-pressed=true], .btn.plain-error[data-state=selected] {
  background-color: var(--swatches-error-selected);
  color: var(--swatches-base-default);
}

.btn.plain-error[aria-pressed=true] > i.icon, .btn.plain-error[data-state=selected] > i.icon {
  background-color: var(--swatches-base-default);
}

.btn.plain-error[aria-pressed=true] > svg.icon, .btn.plain-error[data-state=selected] > svg.icon {
  color: var(--swatches-base-default);
}

.btn.plain-error:disabled, .btn.plain-error[data-state=disabled] {
  opacity: 0.5;
}

.btn.plain-error > i.icon {
  background-color: var(--swatches-on-surface-error);
}

.btn.plain-error > svg.icon {
  color: var(--swatches-on-surface-error);
}

.btn.primary {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-primary-default);
}

.btn.primary:not(:disabled):hover, .btn.primary:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-primary-hover);
  border-color: var(--swatches-primary-hover);
}

.btn.primary:active, .btn.primary[data-state=active] {
  background-color: var(--swatches-primary-active);
  border-color: var(--swatches-primary-active);
}

.btn.primary:focus-visible, .btn.primary[data-state=focus] {
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-border-primary-focus);
  border-width: 3px;
}

.btn.primary[aria-pressed=true], .btn.primary[data-state=selected] {
  background-color: var(--swatches-primary-selected);
  border-color: var(--swatches-primary-selected);
}

.btn.primary:disabled, .btn.primary[data-state=disabled] {
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-primary-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.primary > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.primary > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.primary > i.flag {
  background-color: transparent;
}

.btn.secondary {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-secondary-default);
  border-color: var(--swatches-secondary-default);
}

.btn.secondary:not(:disabled):hover, .btn.secondary:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-secondary-hover);
  border-color: var(--swatches-secondary-hover);
}

.btn.secondary:active, .btn.secondary[data-state=active] {
  background-color: var(--swatches-secondary-active);
  border-color: var(--swatches-secondary-active);
}

.btn.secondary:focus-visible, .btn.secondary[data-state=focus] {
  background-color: var(--swatches-secondary-default);
  border-color: var(--swatches-border-secondary-focus);
  border-width: 3px;
}

.btn.secondary[aria-pressed=true], .btn.secondary[data-state=selected] {
  background-color: var(--swatches-secondary-selected);
  border-color: var(--swatches-secondary-selected);
}

.btn.secondary:disabled, .btn.secondary[data-state=disabled] {
  background-color: var(--swatches-secondary-default);
  border-color: var(--swatches-secondary-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.secondary > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.secondary > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.secondary > i.flag {
  background-color: transparent;
}

.btn.tertiary {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-tertiary-default);
  border-color: var(--swatches-tertiary-default);
}

.btn.tertiary:not(:disabled):hover, .btn.tertiary:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-tertiary-hover);
  border-color: var(--swatches-tertiary-hover);
}

.btn.tertiary:active, .btn.tertiary[data-state=active] {
  background-color: var(--swatches-tertiary-active);
  border-color: var(--swatches-tertiary-active);
}

.btn.tertiary:focus-visible, .btn.tertiary[data-state=focus] {
  background-color: var(--swatches-tertiary-default);
  border-color: var(--swatches-border-tertiary-focus);
  border-width: 3px;
}

.btn.tertiary[aria-pressed=true], .btn.tertiary[data-state=selected] {
  background-color: var(--swatches-tertiary-selected);
  border-color: var(--swatches-tertiary-selected);
}

.btn.tertiary:disabled, .btn.tertiary[data-state=disabled] {
  background-color: var(--swatches-tertiary-default);
  border-color: var(--swatches-tertiary-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.tertiary > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.tertiary > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.tertiary > i.flag {
  background-color: transparent;
}

.btn.quaternary {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-quaternary-default);
  border-color: var(--swatches-quaternary-default);
}

.btn.quaternary:not(:disabled):hover, .btn.quaternary:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-quaternary-hover);
  border-color: var(--swatches-quaternary-hover);
}

.btn.quaternary:active, .btn.quaternary[data-state=active] {
  background-color: var(--swatches-quaternary-active);
  border-color: var(--swatches-quaternary-active);
}

.btn.quaternary:focus-visible, .btn.quaternary[data-state=focus] {
  background-color: var(--swatches-quaternary-default);
  border-color: var(--swatches-border-quaternary-focus);
  border-width: 3px;
}

.btn.quaternary[aria-pressed=true], .btn.quaternary[data-state=selected] {
  background-color: var(--swatches-quaternary-selected);
  border-color: var(--swatches-quaternary-selected);
}

.btn.quaternary:disabled, .btn.quaternary[data-state=disabled] {
  background-color: var(--swatches-quaternary-default);
  border-color: var(--swatches-quaternary-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.quaternary > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.quaternary > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.quaternary > i.flag {
  background-color: transparent;
}

.btn.success {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-success-default);
  border-color: var(--swatches-success-default);
}

.btn.success:not(:disabled):hover, .btn.success:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-success-hover);
  border-color: var(--swatches-success-hover);
}

.btn.success:active, .btn.success[data-state=active] {
  background-color: var(--swatches-success-active);
  border-color: var(--swatches-success-active);
}

.btn.success:focus-visible, .btn.success[data-state=focus] {
  background-color: var(--swatches-success-default);
  border-color: var(--swatches-border-success-focus);
  border-width: 3px;
}

.btn.success[aria-pressed=true], .btn.success[data-state=selected] {
  background-color: var(--swatches-success-selected);
  border-color: var(--swatches-success-selected);
}

.btn.success:disabled, .btn.success[data-state=disabled] {
  background-color: var(--swatches-success-default);
  border-color: var(--swatches-success-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.success > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.success > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.success > i.flag {
  background-color: transparent;
}

.btn.warning {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-warning-default);
  border-color: var(--swatches-warning-default);
}

.btn.warning:not(:disabled):hover, .btn.warning:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-warning-hover);
  border-color: var(--swatches-warning-hover);
}

.btn.warning:active, .btn.warning[data-state=active] {
  background-color: var(--swatches-warning-active);
  border-color: var(--swatches-warning-active);
}

.btn.warning:focus-visible, .btn.warning[data-state=focus] {
  background-color: var(--swatches-warning-default);
  border-color: var(--swatches-border-warning-focus);
  border-width: 3px;
}

.btn.warning[aria-pressed=true], .btn.warning[data-state=selected] {
  background-color: var(--swatches-warning-selected);
  border-color: var(--swatches-warning-selected);
}

.btn.warning:disabled, .btn.warning[data-state=disabled] {
  background-color: var(--swatches-warning-default);
  border-color: var(--swatches-warning-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.warning > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.warning > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.warning > i.flag {
  background-color: transparent;
}

.btn.error {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-error-default);
  border-color: var(--swatches-error-default);
}

.btn.error:not(:disabled):hover, .btn.error:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-error-hover);
  border-color: var(--swatches-error-hover);
}

.btn.error:active, .btn.error[data-state=active] {
  background-color: var(--swatches-error-active);
  border-color: var(--swatches-error-active);
}

.btn.error:focus-visible, .btn.error[data-state=focus] {
  background-color: var(--swatches-error-default);
  border-color: var(--swatches-border-error-focus);
  border-width: 3px;
}

.btn.error[aria-pressed=true], .btn.error[data-state=selected] {
  background-color: var(--swatches-error-selected);
  border-color: var(--swatches-error-selected);
}

.btn.error:disabled, .btn.error[data-state=disabled] {
  background-color: var(--swatches-error-default);
  border-color: var(--swatches-error-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.error > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.error > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.error > i.flag {
  background-color: transparent;
}

.btn.cta {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-cta-default);
  border-color: var(--swatches-cta-default);
}

.btn.cta:not(:disabled):hover, .btn.cta:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-cta-hover);
  border-color: var(--swatches-cta-hover);
}

.btn.cta:active, .btn.cta[data-state=active] {
  background-color: var(--swatches-cta-active);
  border-color: var(--swatches-cta-active);
}

.btn.cta:focus-visible, .btn.cta[data-state=focus] {
  background-color: var(--swatches-cta-default);
  border-color: var(--swatches-border-cta-focus);
  border-width: 3px;
}

.btn.cta[aria-pressed=true], .btn.cta[data-state=selected] {
  background-color: var(--swatches-cta-selected);
  border-color: var(--swatches-cta-selected);
}

.btn.cta:disabled, .btn.cta[data-state=disabled] {
  background-color: var(--swatches-cta-default);
  border-color: var(--swatches-cta-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.cta > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.cta > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.cta > i.flag {
  background-color: transparent;
}

.btn.small {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.btn.small i.icon,
.btn.small svg.icon {
  width: 12px;
  height: 12px;
}

.btn.small > i.flag {
  width: 10px;
  height: 10px;
}

.btn.medium {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.btn.medium i.icon,
.btn.medium svg.icon {
  width: 17px;
  height: 17px;
}

.btn.medium > i.flag {
  width: 20px;
  height: 20px;
}

.btn.large {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.btn.large i.icon,
.btn.large svg.icon {
  width: 20px;
  height: 20px;
}

.btn.large > i.flag {
  width: 24px;
  height: 24px;
}

.btn.xlarge {
  padding: 12px 20px;
  font-size: 20px;
  height: 64px;
  gap: 10px;
}

.btn.xlarge i.icon,
.btn.xlarge svg.icon {
  width: 28px;
  height: 28px;
}

.btn.xlarge > i.flag {
  width: 32px;
  height: 32px;
}

.btn.radius-pill {
  border-radius: 1000px;
}

.btn.radius-round {
  border-radius: 8px;
}

.btn.radius-straigh {
  border-radius: 0;
}

.btn.icon-only.small {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.btn.icon-only.medium {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.btn.icon-only.large {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.btn.icon-only.xlarge {
  padding: 12px;
  width: 64px;
  height: 64px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .btn {
    font-size: 14px;
  }
  .btn.small {
    padding: 8px 10px;
    font-size: 12px;
    height: 32px;
    gap: 6px;
  }
  .btn.small i.icon,
  .btn.small svg.icon {
    width: 12px;
    height: 12px;
  }
  .btn.small > i.flag {
    width: 10px;
    height: 10px;
  }
  .btn.medium {
    padding: 8px 13px;
    font-size: 14px;
    height: 40px;
    gap: 8px;
  }
  .btn.medium i.icon,
  .btn.medium svg.icon {
    width: 17px;
    height: 17px;
  }
  .btn.medium > i.flag {
    width: 20px;
    height: 20px;
  }
  .btn.large {
    padding: 8px 16px;
    font-size: 16px;
    height: 48px;
    gap: 10px;
  }
  .btn.large i.icon,
  .btn.large svg.icon {
    width: 20px;
    height: 20px;
  }
  .btn.large > i.flag {
    width: 24px;
    height: 24px;
  }
  .btn.xlarge {
    padding: 12px 20px;
    font-size: 20px;
    height: 64px;
    gap: 10px;
  }
  .btn.xlarge i.icon,
  .btn.xlarge svg.icon {
    width: 28px;
    height: 28px;
  }
  .btn.xlarge > i.flag {
    width: 32px;
    height: 32px;
  }
  .btn.icon-only.small {
    padding: 8px;
    width: 32px;
    height: 32px;
  }
  .btn.icon-only.medium {
    padding: 8px;
    width: 40px;
    height: 40px;
  }
  .btn.icon-only.large {
    padding: 8px;
    width: 48px;
    height: 48px;
  }
  .btn.icon-only.xlarge {
    padding: 12px;
    width: 64px;
    height: 64px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .btn {
    font-size: 14px;
  }
  .btn.small {
    padding: 8px 10px;
    font-size: 12px;
    height: 32px;
    gap: 6px;
  }
  .btn.small i.icon,
  .btn.small svg.icon {
    width: 12px;
    height: 12px;
  }
  .btn.small > i.flag {
    width: 10px;
    height: 10px;
  }
  .btn.medium {
    padding: 8px 13px;
    font-size: 14px;
    height: 40px;
    gap: 8px;
  }
  .btn.medium i.icon,
  .btn.medium svg.icon {
    width: 17px;
    height: 17px;
  }
  .btn.medium > i.flag {
    width: 20px;
    height: 20px;
  }
  .btn.large {
    padding: 8px 16px;
    font-size: 16px;
    height: 48px;
    gap: 10px;
  }
  .btn.large i.icon,
  .btn.large svg.icon {
    width: 20px;
    height: 20px;
  }
  .btn.large > i.flag {
    width: 24px;
    height: 24px;
  }
  .btn.xlarge {
    padding: 12px 20px;
    font-size: 20px;
    height: 64px;
    gap: 10px;
  }
  .btn.xlarge i.icon,
  .btn.xlarge svg.icon {
    width: 28px;
    height: 28px;
  }
  .btn.xlarge > i.flag {
    width: 32px;
    height: 32px;
  }
  .btn.icon-only.small {
    padding: 8px;
    width: 32px;
    height: 32px;
  }
  .btn.icon-only.medium {
    padding: 8px;
    width: 40px;
    height: 40px;
  }
  .btn.icon-only.large {
    padding: 8px;
    width: 48px;
    height: 48px;
  }
  .btn.icon-only.xlarge {
    padding: 12px;
    width: 64px;
    height: 64px;
  }
}

.card {
  display: flex;
  border: 1px solid var(--swatches-border-base-alt);
}

.card.card-vertical {
  flex-direction: column;
  width: fit-content;
  min-height: 466px;
  display: flex;
}

.card.card-vertical .card-img {
  width: 100%;
  position: relative;
  display: flex;
}

.card.card-vertical .card-img img {
  width: 100%;
}

.card.card-vertical .card-header {
  gap: 8px;
  display: flex;
  flex-direction: column;
}

.card.card-vertical .card-checkbox {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  left: 10px;
}

.card.card-vertical .card-container {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
  height: 100%;
}

.card.card-vertical .card-container .card-content .card-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  gap: 10px;
  align-self: stretch;
  font-family: var(--font-body);
  border-radius: 8px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-weight: 400;
  line-height: 130%;
}

.card.card-vertical .card-container .card-buttons {
  display: flex;
  width: 100%;
  gap: 16px;
  align-self: stretch;
  flex-wrap: wrap;
  margin-top: auto;
}

.card.card-vertical .card-container .card-buttons .btn {
  width: 100%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .card.card-vertical .card-container .card-buttons {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .card.card-vertical .card-container .card-buttons {
    gap: 8px;
  }
}

.card.card-horizontal {
  flex-direction: row;
  height: fit-content;
  display: flex;
  gap: 24px;
}

.card.card-horizontal .card-img {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

.card.card-horizontal .card-header {
  gap: 4px;
  display: flex;
  flex-direction: column;
}

.card.card-horizontal .card-checkbox {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  left: 10px;
}

.card.card-horizontal .card-container {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 16px;
  gap: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card.card-horizontal .card-container .card-content .card-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 72px;
  padding: 0 16px;
  gap: 10px;
  align-self: stretch;
  font-family: var(--font-body);
  border-radius: 8px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-weight: 400;
  line-height: 130%;
}

.card.card-horizontal .card-container .card-buttons {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  margin-top: auto;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .card.card-horizontal .card-container .card-buttons {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .card.card-horizontal .card-container .card-buttons {
    gap: 8px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .card.card-horizontal {
    flex-direction: column;
  }
  .card.card-horizontal .card-img {
    width: 100%;
  }
  .card.card-horizontal .card-img img {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .card.card-horizontal {
    flex-direction: column;
  }
  .card.card-horizontal .card-img {
    width: 100%;
  }
  .card.card-horizontal .card-img img {
    width: 100%;
  }
}

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

.card .card-title {
  font-size: 24px;
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-title);
  line-height: 100%;
  font-weight: 600;
  align-self: stretch;
}

@media (min-width: 360px) and (max-width: 767px) {
  .card .card-title {
    font-size: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .card .card-title {
    font-size: 20px;
  }
}

.form-check:not(.form-toggle) {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
}

.form-check:not(.form-toggle) input[type=checkbox] {
  appearance: none;
  border: 1px solid var(--swatches-on-surface-base);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  background-color: var(--swatches-base-default);
  background-repeat: no-repeat;
  background-size: 85%;
  background-position: center;
}

.form-check:not(.form-toggle) input[type=checkbox].straight {
  border-radius: 0;
}

.form-check:not(.form-toggle) input[type=checkbox].pill {
  border-radius: 8px;
}

.form-check:not(.form-toggle) input[type=checkbox]:hover {
  border-color: var(--swatches-on-surface-primary);
  box-shadow: inset 0 0 0 1px var(--swatches-on-surface-primary);
}

.form-check:not(.form-toggle) input[type=checkbox]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-check:not(.form-toggle) input[type=checkbox]:checked {
  background-color: var(--swatches-pure-black);
  border-color: var(--swatches-on-surface-base);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQgMTIuNjExMUw4LjkyMzA4IDE3LjVMMjAgNi41IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PC9zdmc+);
}

.form-check:not(.form-toggle) input[type=checkbox]:indeterminate {
  background-color: var(--swatches-on-surface-primary);
  border-color: var(--swatches-on-surface-primary);
}

.form-check:not(.form-toggle) input[type=checkbox]:indeterminate::after {
  content: "";
  width: 10px;
  height: 2px;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}

.form-check:not(.form-toggle) input[type=checkbox]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: transparent;
  border-color: var(--swatches-on-surface-primary);
}

.form-check:not(.form-toggle) input[type=checkbox]:disabled:checked {
  background-color: var(--swatches-on-surface-primary);
  border-color: var(--swatches-on-surface-primary);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQgMTIuNjExMUw4LjkyMzA4IDE3LjVMMjAgNi41IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PC9zdmc+);
}

.form-check:not(.form-toggle).form-check input {
  width: 16px;
  height: 16px;
}

.form-check:not(.form-toggle).form-check input::after {
  width: 14px;
  height: 14px;
}

.form-check:not(.form-toggle).small input {
  width: 14px;
  height: 14px;
}

.form-check:not(.form-toggle).small input::after {
  width: 11px;
  height: 11px;
}

.form-check:not(.form-toggle).small input:indeterminate::after {
  width: 8px;
  height: 2px;
}

.form-check:not(.form-toggle).small label {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .form-check:not(.form-toggle).small label {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-check:not(.form-toggle).small label {
    font-size: 12px;
  }
}

.form-check:not(.form-toggle).medium input {
  width: 16px;
  height: 16px;
}

.form-check:not(.form-toggle).medium input::after {
  width: 14px;
  height: 14px;
}

.form-check:not(.form-toggle).medium input:indeterminate::after {
  width: 8px;
  height: 2px;
}

.form-check:not(.form-toggle).medium label {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .form-check:not(.form-toggle).medium label {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-check:not(.form-toggle).medium label {
    font-size: 14px;
  }
}

.form-check:not(.form-toggle).large input {
  width: 18px;
  height: 18px;
}

.form-check:not(.form-toggle).large input::after {
  width: 16px;
  height: 16px;
}

.form-check:not(.form-toggle).large input:indeterminate::after {
  width: 12px;
  height: 2px;
}

.form-check:not(.form-toggle).large label {
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .form-check:not(.form-toggle).large label {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-check:not(.form-toggle).large label {
    font-size: 16px;
  }
}

.form-check:not(.form-toggle) label {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--swatches-on-surface-base);
  cursor: pointer;
}

.form-check:not(.form-toggle) .input:disabled ~ .label {
  cursor: default;
  opacity: 0.4;
  color: var(--swatches-on-surface-neutral-alt);
  font-size: var(--font-body);
}

.form-check.filled:not(.form-toggle) input[type=checkbox] {
  background-color: var(--swatches-surface-alt);
  border-color: var(--swatches-on-surface-base);
}

.form-check.filled:not(.form-toggle) input[type=checkbox]:hover:not(:disabled) {
  border-color: var(--swatches-on-surface-primary);
  box-shadow: inset 0 0 0 1px var(--swatches-on-surface-primary);
}

.form-check.filled:not(.form-toggle) input[type=checkbox]:checked {
  background-color: var(--swatches-on-surface-primary);
  border-color: var(--swatches-on-surface-primary);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQgMTIuNjExMUw4LjkyMzA4IDE3LjVMMjAgNi41IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PC9zdmc+);
}

.form-check.filled:not(.form-toggle) input[type=checkbox]:indeterminate {
  background-color: var(--swatches-surface-alt);
  border-color: var(--swatches-on-surface-primary);
}

.form-check.filled:not(.form-toggle) input[type=checkbox]:indeterminate::after {
  content: "";
  width: 10px;
  height: 2px;
  background-color: var(--swatches-on-surface-primary);
}

.form-check.filled:not(.form-toggle) input[type=checkbox]:disabled {
  background-color: var(--swatches-surface-alt);
  border-color: var(--swatches-on-surface-base);
  opacity: 0.4;
}

.form-check.filled:not(.form-toggle) label {
  color: var(--swatches-on-surface-base);
  cursor: pointer;
}

.form-check.filled:not(.form-toggle) .input:disabled ~ .label {
  color: var(--swatches-on-surface-base);
  cursor: default;
}

.text-primary {
  color: var(--swatches-brand-primary);
}

.text-secondary {
  color: var(--swatches-brand-secondary);
}

.text-tertiary {
  color: var(--swatches-brand-tertiary);
}

.text-quaternary {
  color: var(--swatches-brand-quaternary);
}

.text-support {
  color: var(--support-default);
}

.text-success {
  color: var(--success-default);
}

.text-warning {
  color: var(--warning-default);
}

.text-error {
  color: var(--destructive-default);
}

.text-red {
  color: var(--red-default);
}

.text-yellow {
  color: var(--yellow-default);
}

.text-green {
  color: var(--green-default);
}

.text-blue {
  color: var(--blue-default);
}

.text-purple {
  color: var(--purple-default);
}

.text-neutral {
  color: var(--neutral-0);
}

.text-neutral-50 {
  color: var(--neutral-50);
}

.text-neutral-100 {
  color: var(--neutral-100);
}

.text-neutral-200 {
  color: var(--neutral-200);
}

.text-neutral-300 {
  color: var(--neutral-300);
}

.text-neutral-400 {
  color: var(--neutral-400);
}

.text-neutral-500 {
  color: var(--neutral-500);
}

.text-neutral-600 {
  color: var(--neutral-600);
}

.text-neutral-700 {
  color: var(--neutral-700);
}

.text-neutral-800 {
  color: var(--neutral-800);
}

.text-neutral-900 {
  color: var(--neutral-900);
}

.text-neutral-1000 {
  color: var(--neutral-1000);
}

.text-white {
  color: var(--pure-white);
}

.text-dark {
  color: var(--pure-black);
}

.text-on-primary {
  color: var(--swatches-on-primary);
}

.text-on-secondary {
  color: var(--swatches-on-secondary);
}

.text-on-tertiary {
  color: var(--swatches-on-tertiary);
}

.text-on-quaternary {
  color: var(--swatches-on-quaternary);
}

.text-on-surface-primary {
  color: var(--swatches-on-surface-primary);
}

.text-on-surface-secondary {
  color: var(--swatches-on-surface-secondary);
}

.text-on-surface-tertiary {
  color: var(--swatches-on-surface-tertiary);
}

.text-on-surface-quaternary {
  color: var(--swatches-on-surface-quaternary);
}

.text-on-surface-neutral {
  color: var(--swatches-on-surface-neutral);
}

.text-on-surface-base {
  color: var(--swatches-on-surface-base);
}

.pallet-color {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--swatches-border);
}

.pallet-color.transparency-white-20 {
  background-color: var(--transparency-white-20);
}

.pallet-color.transparency-white-40 {
  background-color: var(--transparency-white-40);
}

.pallet-color.transparency-white-60 {
  background-color: var(--transparency-white-60);
}

.pallet-color.transparency-white-80 {
  background-color: var(--transparency-white-80);
}

.pallet-color.transparency-black-20 {
  background-color: var(--transparency-black-20);
}

.pallet-color.transparency-black-40 {
  background-color: var(--transparency-black-40);
}

.pallet-color.transparency-black-60 {
  background-color: var(--transparency-black-60);
}

.pallet-color.transparency-black-80 {
  background-color: var(--transparency-black-20);
}

.pallet-color.transparency-brand-20 {
  background-color: var(--transparency-brand-20);
}

.pallet-color.transparency-brand-40 {
  background-color: var(--transparency-brand-40);
}

.pallet-color.transparency-brand-60 {
  background-color: var(--transparency-brand-60);
}

.pallet-color.transparency-brand-80 {
  background-color: var(--transparency-brand-80);
}

.pallet-color.neutral-0 {
  background-color: var(--neutral-0);
}

.pallet-color.neutral-50 {
  background-color: var(--neutral-50);
}

.pallet-color.neutral-100 {
  background-color: var(--neutral-100);
}

.pallet-color.neutral-200 {
  background-color: var(--neutral-200);
}

.pallet-color.neutral-300 {
  background-color: var(--neutral-300);
}

.pallet-color.neutral-400 {
  background-color: var(--neutral-400);
}

.pallet-color.neutral-500 {
  background-color: var(--neutral-500);
}

.pallet-color.neutral-600 {
  background-color: var(--neutral-600);
}

.pallet-color.neutral-700 {
  background-color: var(--neutral-700);
}

.pallet-color.neutral-800 {
  background-color: var(--neutral-800);
}

.pallet-color.neutral-900 {
  background-color: var(--neutral-900);
}

.pallet-color.neutral-1000 {
  background-color: var(--neutral-1000);
}

.pallet-color.primary-shallower {
  background-color: var(--primary-shallower);
}

.pallet-color.primary-shallow {
  background-color: var(--primary-shallow);
}

.pallet-color.primary-default {
  background-color: var(--primary-default);
}

.pallet-color.primary-deep {
  background-color: var(--primary-deep);
}

.pallet-color.primary-deeper {
  background-color: var(--primary-deeper);
}

.pallet-color.secondary-shallower {
  background-color: var(--secondary-shallower);
}

.pallet-color.secondary-shallow {
  background-color: var(--secondary-shallow);
}

.pallet-color.secondary-default {
  background-color: var(--secondary-default);
}

.pallet-color.secondary-deep {
  background-color: var(--secondary-deep);
}

.pallet-color.secondary-deeper {
  background-color: var(--secondary-deeper);
}

.pallet-color.tertiary-shallower {
  background-color: var(--tertiary-shallower);
}

.pallet-color.tertiary-shallow {
  background-color: var(--tertiary-shallow);
}

.pallet-color.tertiary-default {
  background-color: var(--tertiary-default);
}

.pallet-color.tertiary-deep {
  background-color: var(--tertiary-deep);
}

.pallet-color.tertiary-deeper {
  background-color: var(--tertiary-deeper);
}

.pallet-color.quaternary-shallower {
  background-color: var(--quaternary-shallower);
}

.pallet-color.quaternary-shallow {
  background-color: var(--quaternary-shallow);
}

.pallet-color.quaternary-default {
  background-color: var(--quaternary-default);
}

.pallet-color.quaternary-deep {
  background-color: var(--quaternary-deep);
}

.pallet-color.quaternary-deeper {
  background-color: var(--quaternary-deeper);
}

.pallet-color.success-shallower {
  background-color: var(--success-shallower);
}

.pallet-color.success-shallow {
  background-color: var(--success-shallow);
}

.pallet-color.success-default {
  background-color: var(--success-default);
}

.pallet-color.success-deep {
  background-color: var(--success-deep);
}

.pallet-color.success-deeper {
  background-color: var(--success-deeper);
}

.pallet-color.support-shallower {
  background-color: var(--support-shallower);
}

.pallet-color.support-shallow {
  background-color: var(--support-shallow);
}

.pallet-color.support-default {
  background-color: var(--support-default);
}

.pallet-color.support-deep {
  background-color: var(--support-deep);
}

.pallet-color.support-deeper {
  background-color: var(--support-deeper);
}

.pallet-color.warning-shallower {
  background-color: var(--warning-shallower);
}

.pallet-color.warning-shallow {
  background-color: var(--warning-shallow);
}

.pallet-color.warning-default {
  background-color: var(--warning-default);
}

.pallet-color.warning-deep {
  background-color: var(--warning-deep);
}

.pallet-color.warning-deeper {
  background-color: var(--warning-deeper);
}

.pallet-color.error-shallower {
  background-color: var(--destructive-shallower);
}

.pallet-color.error-shallow {
  background-color: var(--destructive-shallow);
}

.pallet-color.error-default {
  background-color: var(--destructive-default);
}

.pallet-color.error-deep {
  background-color: var(--destructive-deep);
}

.pallet-color.error-deeper {
  background-color: var(--destructive-deeper);
}

.pallet-color.green-shallower {
  background-color: var(--green-shallower);
}

.pallet-color.green-shallow {
  background-color: var(--green-shallow);
}

.pallet-color.green-default {
  background-color: var(--green-default);
}

.pallet-color.green-deep {
  background-color: var(--green-deep);
}

.pallet-color.green-deeper {
  background-color: var(--green-deeper);
}

.pallet-color.yellow-shallower {
  background-color: var(--yellow-shallower);
}

.pallet-color.yellow-shallow {
  background-color: var(--yellow-shallow);
}

.pallet-color.yellow-default {
  background-color: var(--yellow-default);
}

.pallet-color.yellow-deep {
  background-color: var(--yellow-deep);
}

.pallet-color.yellow-deeper {
  background-color: var(--yellow-deeper);
}

.pallet-color.red-shallower {
  background-color: var(--red-shallower);
}

.pallet-color.red-shallow {
  background-color: var(--red-shallow);
}

.pallet-color.red-default {
  background-color: var(--red-default);
}

.pallet-color.red-deep {
  background-color: var(--red-deep);
}

.pallet-color.red-deeper {
  background-color: var(--red-deeper);
}

.pallet-color.blue-shallower {
  background-color: var(--blue-shallower);
}

.pallet-color.blue-shallow {
  background-color: var(--blue-shallow);
}

.pallet-color.blue-default {
  background-color: var(--blue-default);
}

.pallet-color.blue-deep {
  background-color: var(--blue-deep);
}

.pallet-color.blue-deeper {
  background-color: var(--blue-deeper);
}

.pallet-color.purple-shallower {
  background-color: var(--purple-shallower);
}

.pallet-color.purple-shallow {
  background-color: var(--purple-shallow);
}

.pallet-color.purple-default {
  background-color: var(--purple-default);
}

.pallet-color.purple-deep {
  background-color: var(--purple-deep);
}

.pallet-color.purple-deeper {
  background-color: var(--purple-deeper);
}

.codeblock {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background-color: var(--swatches-pure-black);
  border: 1px solid var(--swatches-border-base-alt);
  padding: 24px;
  gap: 10px;
  overflow: hidden;
}

.codeblock-body {
  display: flex;
  justify-content: space-between;
  overflow: auto;
}

.codeblock-body .codeblock-actions {
  display: flex;
  gap: 4px;
}

.codeblock-body .codeblock-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.codeblock-body pre {
  margin: 0;
  white-space: pre;
  color: var(--swatches-pure-white);
  background: transparent;
  line-height: 1.45;
}

.codeblock-body code {
  display: block;
  white-space: pre;
}

.codeblock.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.cover-details {
  background-color: var(--swatches-background);
  padding: 32px 16px 32px 16px;
  border-radius: 8px;
  border: 1px solid var(--swatches-border);
  display: flex;
}

.cover-details .avatar {
  flex-shrink: 0;
  margin: 16px;
}

.cover-details .cover-details-container {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  gap: 24px;
  display: flex;
  flex-direction: column;
}

.cover-details .cover-details-container .cover-details-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.cover-details .cover-details-container .cover-details-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cover-details .cover-details-container .cover-details-content {
  width: 100%;
  height: auto;
}

.cover-details .cover-details-container .cover-details-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 78px;
  align-self: stretch;
  font-family: var(--font-body);
  border-radius: 8px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-weight: 400;
  line-height: 130%;
}

.cover-details.cover-details-vertical {
  flex-direction: column;
}

.cover-details.cover-details-vertical .cover-details-container {
  width: auto;
}

.cover-details.cover-details-vertical .cover-details-info {
  margin-top: 20px;
}

.datepicker-container {
  background-color: var(--swatches-surface);
  border: 1px solid var(--swatches-base-active-alt);
  border-radius: 8px;
  max-width: fit-content;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
}

.datepicker-container .btn.base:hover {
  background-color: var(--swatches-surface);
}

.datepicker-container .btn.base.selected {
  background-color: var(--swatches-base-active);
  border-color: var(--swatches-border-base);
}

.datepicker-container .day-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px;
  box-sizing: border-box;
}

.datepicker-container .day-cell:hover {
  background-color: var(--swatches-base-active);
  border-radius: 4px;
}

.datepicker-container .day-cell:hover:not(.day-cell--disabled):not(.day-cell--selected):not(.day-cell--range-start):not(.day-cell--range-end):not(.day-cell--in-range) {
  background-color: var(--swatches-on-surface-primary);
  color: var(--swatches-base-default);
  border-radius: 4px;
}

.datepicker-container .day-cell:hover:not(.day-cell--disabled):not(.day-cell--selected):not(.day-cell--range-start):not(.day-cell--range-end):not(.day-cell--in-range) .text-day {
  color: var(--swatches-base-default);
}

.datepicker-container .day-cell--disabled {
  opacity: 0.4;
  cursor: default;
}

.datepicker-container .day-cell--disabled:hover {
  background-color: transparent;
  color: var(--swatches-on-base);
}

.datepicker-container .day-cell--disabled:hover .text-day {
  color: var(--swatches-on-base);
}

.datepicker-container .day-cell--selected {
  background-color: var(--swatches-primary-active);
  color: var(--swatches-base-default);
  border-radius: 4px;
}

.datepicker-container .day-cell--selected:hover {
  background-color: var(--swatches-primary-active);
}

.datepicker-container .day-cell--selected .text-day {
  color: var(--swatches-base-default);
}

.datepicker-container .day-cell--range-start {
  background-color: var(--swatches-primary-subtle);
  position: relative;
  border-radius: 0;
}

.datepicker-container .day-cell--range-start::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--swatches-primary-active);
  border-radius: 4px;
  z-index: 1;
}

.datepicker-container .day-cell--range-start .text-day {
  color: var(--swatches-base-default);
  position: relative;
  z-index: 2;
}

.datepicker-container .day-cell--range-start:hover {
  background-color: color-mix(in srgb, var(--swatches-primary-subtle) 50%, var(--swatches-surface));
}

.datepicker-container .day-cell--range-start:hover::before {
  background-color: var(--swatches-primary-hover);
}

.datepicker-container .day-cell--range-start.day-cell--round-left:hover {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--range-start.day-cell--round-left:hover::before {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--range-start.day-cell--round-right:hover {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--range-start.day-cell--round-right:hover::before {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--range-start.day-cell--round-all:hover {
  border-radius: 50%;
}

.datepicker-container .day-cell--range-start.day-cell--round-all:hover::before {
  border-radius: 50%;
}

.datepicker-container .day-cell--range-end {
  background-color: var(--swatches-primary-subtle);
  position: relative;
  border-radius: 0;
}

.datepicker-container .day-cell--range-end::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--swatches-primary-active);
  border-radius: 4px;
  z-index: 1;
}

.datepicker-container .day-cell--range-end .text-day {
  color: var(--swatches-base-default);
  position: relative;
  z-index: 2;
}

.datepicker-container .day-cell--range-end:hover {
  background-color: color-mix(in srgb, var(--swatches-primary-subtle) 50%, var(--swatches-surface));
}

.datepicker-container .day-cell--range-end:hover::before {
  background-color: var(--swatches-primary-hover);
}

.datepicker-container .day-cell--range-end.day-cell--round-left:hover {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--range-end.day-cell--round-left:hover::before {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--range-end.day-cell--round-right:hover {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--range-end.day-cell--round-right:hover::before {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--range-end.day-cell--round-all:hover {
  border-radius: 50%;
}

.datepicker-container .day-cell--range-end.day-cell--round-all:hover::before {
  border-radius: 50%;
}

.datepicker-container .day-cell--in-range {
  background-color: var(--swatches-primary-subtle);
  color: var(--swatches-on-surface-primary);
  border-radius: 0;
}

.datepicker-container .day-cell--in-range .text-day {
  color: var(--swatches-on-surface-primary);
}

.datepicker-container .day-cell--in-range:hover {
  background-color: color-mix(in srgb, var(--swatches-primary-subtle) 50%, var(--swatches-surface));
  border-radius: 0;
}

.datepicker-container .day-cell--round-left {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--round-left::before {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--round-right {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--round-right::before {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--round-all {
  border-radius: 50%;
}

.datepicker-container .day-cell--round-all::before {
  border-radius: 50%;
}

.datepicker-container .dot-indicator {
  position: absolute;
  top: 0.5625rem;
  right: 0.5625rem;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--swatches-error-hover);
  border-radius: 1000px;
  z-index: 10;
}

.datepicker-container .day-cell--range-start .dot-indicator,
.datepicker-container .day-cell--range-end .dot-indicator {
  z-index: 11;
}

.datepicker-container .datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0;
}

.datepicker-container .datepicker-header-selectors {
  display: flex;
  align-items: center;
  gap: 8px;
}

.datepicker-container .datepicker-select-button {
  background: transparent;
  border: none;
  color: var(--swatches-on-surface-primary);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.datepicker-container .datepicker-select-button:hover {
  background-color: var(--swatches-base-hover);
}

.datepicker-container .datepicker-select-button svg {
  width: 16px;
  height: 16px;
}

.datepicker-container .datepicker-month-select .dropdown-wrapper,
.datepicker-container .datepicker-year-select .dropdown-wrapper {
  position: relative;
}

.datepicker-container .datepicker-month-select .dropdown-select-container,
.datepicker-container .datepicker-year-select .dropdown-select-container {
  min-width: 150px;
  max-height: 300px;
}

.datepicker-container .datepicker-month-select .dropdown-select-container .options-list,
.datepicker-container .datepicker-year-select .dropdown-select-container .options-list {
  max-height: 250px;
}

.datepicker-container .datepicker-navigation {
  display: flex;
  gap: 8px;
}

.datepicker-container .week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 24px 24px 0;
}

.datepicker-container .week-day {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.datepicker-container .datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  padding: 0 24px;
}

.datepicker-container .preset-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-right: 1px solid var(--swatches-surface-alt);
  min-width: 12rem;
}

.datepicker-container .preset-buttons .btn {
  width: fit-content;
}

.datepicker-container .preset-buttons--mobile {
  flex-direction: row;
  overflow: auto hidden;
  border-right: none;
  border-bottom: 1px solid var(--swatches-surface-alt);
  padding: 24px;
  min-width: auto;
  width: 100%;
  height: 2.5rem;
  align-items: flex-start;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.datepicker-container .preset-buttons--mobile::-webkit-scrollbar {
  display: none;
}

.datepicker-container .preset-buttons--mobile .btn {
  flex-shrink: 0;
  white-space: nowrap;
  margin-right: 8px;
}

.datepicker-container .preset-buttons--mobile .btn:last-child {
  margin-right: 0;
}

.datepicker-container .action-buttons {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  padding: 24px;
  background-color: var(--swatches-surface);
  border-top: 1px solid var(--swatches-surface-alt);
}

.datepicker-container .title-section {
  padding: 24px;
  border-bottom: 1px solid var(--swatches-surface-alt);
}

.datepicker-container .title-section__subtitle {
  margin: 8px 0;
}

.datepicker-container .datepicker-content {
  display: flex;
}

.datepicker-container .datepicker-main {
  flex: 1;
  min-width: 20.5rem;
}

.datepicker-container .datepicker-dual {
  display: flex;
  gap: 16px;
}

.datepicker-container .datepicker-dual .datepicker-main {
  min-width: 20.5rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .datepicker-container .datepicker-dual {
    flex-direction: column;
  }
}

.datepicker-container.hide-presets .preset-buttons {
  display: none;
}

.datepicker-container.hide-presets .datepicker-content {
  display: block;
}

.datepicker-container.hide-buttons .action-buttons {
  display: none;
}

.datepicker-container.hide-navigation .datepicker-navigation {
  display: none;
}

.datepicker-container.hide-title .title-section {
  display: none;
}

.datepicker-container.hide-dots .dot-indicator {
  display: none;
}

.datepicker-container.hide-weekdays .week-days {
  display: none;
}

.datepicker-container.show-borders {
  border: 2px solid var(--swatches-primary-default);
}

.datepicker-container.show-borders .day-cell {
  border: 1px solid var(--swatches-base-hover-alt);
}

@media (min-width: 360px) and (max-width: 767px) {
  .datepicker-container .datepicker-content {
    flex-direction: column;
  }
  .datepicker-container .preset-buttons {
    flex-direction: row;
    overflow: auto hidden;
    border-right: none;
    border-bottom: 1px solid var(--swatches-surface-alt);
    min-width: auto;
    width: 100%;
    height: 2.5rem;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .datepicker-container .preset-buttons::-webkit-scrollbar {
    display: none;
  }
  .datepicker-container .preset-buttons .btn {
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 8px;
  }
  .datepicker-container .preset-buttons .btn:last-child {
    margin-right: 0;
  }
  .datepicker-container .datepicker-main {
    min-width: auto;
  }
  .datepicker-container .datepicker-select-button {
    font-size: 14px;
    padding: 4px;
  }
  .datepicker-container .datepicker-select-button i {
    width: 14px;
    height: 14px;
  }
  .datepicker-container .datepicker-header {
    padding: 8px 8px 0;
  }
  .datepicker-container .datepicker-header-selectors {
    gap: 4px;
  }
}

.dropdown-wrapper {
  position: relative;
}

.dropdown-wrapper .select-wrapper {
  position: relative;
}

.w-0 {
  width: 0%;
}

.h-0 {
  height: 0%;
}

.w-1 {
  width: 1%;
}

.h-1 {
  height: 1%;
}

.w-2 {
  width: 2%;
}

.h-2 {
  height: 2%;
}

.w-3 {
  width: 3%;
}

.h-3 {
  height: 3%;
}

.w-4 {
  width: 4%;
}

.h-4 {
  height: 4%;
}

.w-5 {
  width: 5%;
}

.h-5 {
  height: 5%;
}

.w-6 {
  width: 6%;
}

.h-6 {
  height: 6%;
}

.w-7 {
  width: 7%;
}

.h-7 {
  height: 7%;
}

.w-8 {
  width: 8%;
}

.h-8 {
  height: 8%;
}

.w-9 {
  width: 9%;
}

.h-9 {
  height: 9%;
}

.w-10 {
  width: 10%;
}

.h-10 {
  height: 10%;
}

.w-11 {
  width: 11%;
}

.h-11 {
  height: 11%;
}

.w-12 {
  width: 12%;
}

.h-12 {
  height: 12%;
}

.w-13 {
  width: 13%;
}

.h-13 {
  height: 13%;
}

.w-14 {
  width: 14%;
}

.h-14 {
  height: 14%;
}

.w-15 {
  width: 15%;
}

.h-15 {
  height: 15%;
}

.w-16 {
  width: 16%;
}

.h-16 {
  height: 16%;
}

.w-17 {
  width: 17%;
}

.h-17 {
  height: 17%;
}

.w-18 {
  width: 18%;
}

.h-18 {
  height: 18%;
}

.w-19 {
  width: 19%;
}

.h-19 {
  height: 19%;
}

.w-20 {
  width: 20%;
}

.h-20 {
  height: 20%;
}

.w-21 {
  width: 21%;
}

.h-21 {
  height: 21%;
}

.w-22 {
  width: 22%;
}

.h-22 {
  height: 22%;
}

.w-23 {
  width: 23%;
}

.h-23 {
  height: 23%;
}

.w-24 {
  width: 24%;
}

.h-24 {
  height: 24%;
}

.w-25 {
  width: 25%;
}

.h-25 {
  height: 25%;
}

.w-26 {
  width: 26%;
}

.h-26 {
  height: 26%;
}

.w-27 {
  width: 27%;
}

.h-27 {
  height: 27%;
}

.w-28 {
  width: 28%;
}

.h-28 {
  height: 28%;
}

.w-29 {
  width: 29%;
}

.h-29 {
  height: 29%;
}

.w-30 {
  width: 30%;
}

.h-30 {
  height: 30%;
}

.w-31 {
  width: 31%;
}

.h-31 {
  height: 31%;
}

.w-32 {
  width: 32%;
}

.h-32 {
  height: 32%;
}

.w-33 {
  width: 33%;
}

.h-33 {
  height: 33%;
}

.w-34 {
  width: 34%;
}

.h-34 {
  height: 34%;
}

.w-35 {
  width: 35%;
}

.h-35 {
  height: 35%;
}

.w-36 {
  width: 36%;
}

.h-36 {
  height: 36%;
}

.w-37 {
  width: 37%;
}

.h-37 {
  height: 37%;
}

.w-38 {
  width: 38%;
}

.h-38 {
  height: 38%;
}

.w-39 {
  width: 39%;
}

.h-39 {
  height: 39%;
}

.w-40 {
  width: 40%;
}

.h-40 {
  height: 40%;
}

.w-41 {
  width: 41%;
}

.h-41 {
  height: 41%;
}

.w-42 {
  width: 42%;
}

.h-42 {
  height: 42%;
}

.w-43 {
  width: 43%;
}

.h-43 {
  height: 43%;
}

.w-44 {
  width: 44%;
}

.h-44 {
  height: 44%;
}

.w-45 {
  width: 45%;
}

.h-45 {
  height: 45%;
}

.w-46 {
  width: 46%;
}

.h-46 {
  height: 46%;
}

.w-47 {
  width: 47%;
}

.h-47 {
  height: 47%;
}

.w-48 {
  width: 48%;
}

.h-48 {
  height: 48%;
}

.w-49 {
  width: 49%;
}

.h-49 {
  height: 49%;
}

.w-50 {
  width: 50%;
}

.h-50 {
  height: 50%;
}

.w-51 {
  width: 51%;
}

.h-51 {
  height: 51%;
}

.w-52 {
  width: 52%;
}

.h-52 {
  height: 52%;
}

.w-53 {
  width: 53%;
}

.h-53 {
  height: 53%;
}

.w-54 {
  width: 54%;
}

.h-54 {
  height: 54%;
}

.w-55 {
  width: 55%;
}

.h-55 {
  height: 55%;
}

.w-56 {
  width: 56%;
}

.h-56 {
  height: 56%;
}

.w-57 {
  width: 57%;
}

.h-57 {
  height: 57%;
}

.w-58 {
  width: 58%;
}

.h-58 {
  height: 58%;
}

.w-59 {
  width: 59%;
}

.h-59 {
  height: 59%;
}

.w-60 {
  width: 60%;
}

.h-60 {
  height: 60%;
}

.w-61 {
  width: 61%;
}

.h-61 {
  height: 61%;
}

.w-62 {
  width: 62%;
}

.h-62 {
  height: 62%;
}

.w-63 {
  width: 63%;
}

.h-63 {
  height: 63%;
}

.w-64 {
  width: 64%;
}

.h-64 {
  height: 64%;
}

.w-65 {
  width: 65%;
}

.h-65 {
  height: 65%;
}

.w-66 {
  width: 66%;
}

.h-66 {
  height: 66%;
}

.w-67 {
  width: 67%;
}

.h-67 {
  height: 67%;
}

.w-68 {
  width: 68%;
}

.h-68 {
  height: 68%;
}

.w-69 {
  width: 69%;
}

.h-69 {
  height: 69%;
}

.w-70 {
  width: 70%;
}

.h-70 {
  height: 70%;
}

.w-71 {
  width: 71%;
}

.h-71 {
  height: 71%;
}

.w-72 {
  width: 72%;
}

.h-72 {
  height: 72%;
}

.w-73 {
  width: 73%;
}

.h-73 {
  height: 73%;
}

.w-74 {
  width: 74%;
}

.h-74 {
  height: 74%;
}

.w-75 {
  width: 75%;
}

.h-75 {
  height: 75%;
}

.w-76 {
  width: 76%;
}

.h-76 {
  height: 76%;
}

.w-77 {
  width: 77%;
}

.h-77 {
  height: 77%;
}

.w-78 {
  width: 78%;
}

.h-78 {
  height: 78%;
}

.w-79 {
  width: 79%;
}

.h-79 {
  height: 79%;
}

.w-80 {
  width: 80%;
}

.h-80 {
  height: 80%;
}

.w-81 {
  width: 81%;
}

.h-81 {
  height: 81%;
}

.w-82 {
  width: 82%;
}

.h-82 {
  height: 82%;
}

.w-83 {
  width: 83%;
}

.h-83 {
  height: 83%;
}

.w-84 {
  width: 84%;
}

.h-84 {
  height: 84%;
}

.w-85 {
  width: 85%;
}

.h-85 {
  height: 85%;
}

.w-86 {
  width: 86%;
}

.h-86 {
  height: 86%;
}

.w-87 {
  width: 87%;
}

.h-87 {
  height: 87%;
}

.w-88 {
  width: 88%;
}

.h-88 {
  height: 88%;
}

.w-89 {
  width: 89%;
}

.h-89 {
  height: 89%;
}

.w-90 {
  width: 90%;
}

.h-90 {
  height: 90%;
}

.w-91 {
  width: 91%;
}

.h-91 {
  height: 91%;
}

.w-92 {
  width: 92%;
}

.h-92 {
  height: 92%;
}

.w-93 {
  width: 93%;
}

.h-93 {
  height: 93%;
}

.w-94 {
  width: 94%;
}

.h-94 {
  height: 94%;
}

.w-95 {
  width: 95%;
}

.h-95 {
  height: 95%;
}

.w-96 {
  width: 96%;
}

.h-96 {
  height: 96%;
}

.w-97 {
  width: 97%;
}

.h-97 {
  height: 97%;
}

.w-98 {
  width: 98%;
}

.h-98 {
  height: 98%;
}

.w-99 {
  width: 99%;
}

.h-99 {
  height: 99%;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.dropdown-select-container {
  box-sizing: border-box;
  background-color: var(--swatches-surface);
  border: 1px solid var(--swatches-base-active-alt);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 16px;
  position: absolute;
  min-width: 120px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
}

.dropdown-select-container.radius-pill {
  border-radius: 24px;
}

.dropdown-select-container.radius-round {
  border-radius: 8px;
}

.dropdown-select-container.show {
  display: block;
}

.dropdown-select-container.position-bottom {
  top: 100%;
  left: 0;
  margin-top: 4px;
}

.dropdown-select-container.position-top {
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
}

.dropdown-select-container.position-right {
  top: 0;
  left: 100%;
  margin-left: 4px;
}

.dropdown-select-container.position-left {
  top: 0;
  right: 100%;
  margin-right: 4px;
}

.dropdown-select-container .option-label {
  flex: 1;
  color: var(--swatches-on-surface-primary);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-align: left;
}

.option-item--selected .dropdown-select-container .option-label {
  font-weight: 500;
}

.option-item--disabled .dropdown-select-container .option-label {
  color: var(--swatches-on-surface-secondary);
}

.dropdown-select-container .title-section {
  padding: 0 16px;
  height: 48px;
}

.dropdown-select-container .title-section__title {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 18px;
  font-weight: 600;
  color: var(--swatches-on-surface-primary);
  margin: 0;
}

.dropdown-select-container .search-section {
  position: relative;
  padding: 16px;
}

.dropdown-select-container .search-section .form-control {
  background-color: #fff;
}

.dropdown-select-container .options-list {
  padding: 0;
}

.dropdown-select-container .options-list:has(.option-item:nth-child(8)) {
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dropdown-select-container .options-list::-webkit-scrollbar {
  width: 8px;
}

.dropdown-select-container .options-list::-webkit-scrollbar-thumb {
  background-color: var(--swatches-border-base-alt);
  border-radius: 4px;
}

.dropdown-select-container .option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 48px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

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

.dropdown-select-container .option-item:hover .option-label {
  color: var(--swatches-primary-default);
}

.dropdown-select-container .option-item:hover {
  background-color: var(--swatches-base-hover);
}

.dropdown-select-container .option-item.selected {
  background-color: var(--swatches-base-active);
}

.dropdown-select-container .option-item.selected .option-label {
  color: var(--swatches-primary-default);
}

.dropdown-select-container .option-item:has(.dropdown-pretab) {
  padding-left: 120px;
}

.dropdown-select-container .option-item:has(.dropdown-shortcut) {
  padding-left: 65px;
}

.dropdown-select-container .option-item .dropdown-pretab {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: start;
  border: 1px solid var(--swatches-border-base-alt);
  background-color: var(--swatches-border-base-alt);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80px;
  padding-left: 25px;
}

.dropdown-select-container .option-item .dropdown-pretab i.icon,
.dropdown-select-container .option-item .dropdown-pretab svg.icon {
  width: 24px;
  height: 24px;
}

.dropdown-select-container .option-item .dropdown-pretab i.flag {
  width: 24px;
  height: 24px;
}

.dropdown-select-container .option-item .dropdown-shortcut {
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border: 1px solid var(--swatches-border-base-alt);
  background-color: var(--swatches-border-base-alt);
  padding: 12px 10px;
}

.dropdown-select-container .action-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: var(--swatches-surface);
}

.dropdown-select-container .action-buttons .btn-clear {
  width: 100%;
}

.dropdown-select-container .action-buttons .btn-apply {
  width: 100%;
}

.dropdown-select-container.hide-search .search-section {
  display: none;
}

.dropdown-select-container.hide-title .title-section {
  display: none;
}

.dropdown-select-container.hide-buttons .action-buttons {
  display: none;
}

@media (min-width: 360px) and (max-width: 767px) {
  .dropdown-select-container .title-section {
    padding: 16px;
  }
  .dropdown-select-container .title-section__title {
    font-size: 16px;
  }
  .dropdown-select-container .search-section {
    padding: 16px;
  }
  .dropdown-select-container .option-item {
    padding: 8px 16px;
  }
  .dropdown-select-container .option-label {
    font-size: 14px;
  }
  .dropdown-select-container .action-buttons {
    padding: 16px;
  }
}

.divider-dot {
  width: 1px;
  height: 1px;
  background-color: var(--pure-black);
}

.divider-line {
  width: 100%;
  height: 1px;
  background-color: var(--swatches-border);
}

.d-rel {
  position: relative;
}

.d-block {
  display: inline-block;
}

.dot-pos {
  position: absolute;
  bottom: 7.5px;
  right: 7.5px;
  transform: translate(50%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 1000px;
}

.dot.primary {
  background-color: var(--swatches-primary-hover);
}

.dot.secondary {
  background-color: var(--swatches-brand-secondary);
}

.dot.tertiary {
  background-color: var(--swatches-brand-tertiary);
}

.dot.quaternary {
  background-color: var(--swatches-brand-quaternary);
}

.dot.success {
  background-color: var(--swatches-success-hover);
}

.dot.warning {
  background-color: var(--swatches-warning-hover);
}

.dot.error {
  background-color: var(--swatches-error-hover);
}

.dot.base {
  background-color: var(--swatches-base-hover-alt);
}

.dot > i.icon,
.dot > svg.icon {
  line-height: 1;
  display: inline-block;
}

.dot > i.icon {
  color: var(--swatches-on-primary);
  background-color: var(--swatches-on-primary);
}

.dot > svg.icon {
  color: var(--swatches-on-primary);
}

.dot.small {
  width: 8px;
  height: 8px;
  padding: 1px;
}

.dot.small > i,
.dot.small > svg.icon {
  width: 6.5px;
  height: 6.5px;
}

.dot.medium {
  width: 16px;
  height: 16px;
  padding: 3px;
}

.dot.medium > i,
.dot.medium > svg.icon {
  width: 12px;
  height: 12px;
}

.dot.large {
  width: 24px;
  height: 24px;
  padding: 4px;
}

.dot.large > i,
.dot.large > svg.icon {
  width: 18px;
  height: 18px;
}

.drawer-example {
  background-color: var(--swatches-surface);
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 1021;
  text-align: left;
  border: 1px solid #000;
  font-family: var(--font-body);
}

.drawer-example > i.icon {
  background-color: var(--swatches-base-selected-alt);
}

.drawer-example > svg.icon {
  color: var(--swatches-base-selected-alt);
}

.drawer {
  position: fixed;
  background-color: var(--swatches-surface);
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 1021;
  text-align: left;
  border: 1px solid var(--swatches-border);
  overflow-y: scroll;
  padding: 24px;
  gap: 24px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  box-sizing: border-box;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer {
    padding: 16px;
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer {
    padding: 20px;
    gap: 20px;
  }
}

.drawer.drawer-shadow {
  box-shadow: none;
}

.drawer-center.size-full, .drawer-left.size-full, .drawer-right.size-full {
  width: 100% !important;
}

.drawer-center.size-1000, .drawer-left.size-1000, .drawer-right.size-1000 {
  width: 1000px !important;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer-center.size-1000, .drawer-left.size-1000, .drawer-right.size-1000 {
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer-center.size-1000, .drawer-left.size-1000, .drawer-right.size-1000 {
    width: 100% !important;
  }
}

.drawer-center.size-720, .drawer-left.size-720, .drawer-right.size-720 {
  width: 720px !important;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer-center.size-720, .drawer-left.size-720, .drawer-right.size-720 {
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer-center.size-720, .drawer-left.size-720, .drawer-right.size-720 {
    width: 100% !important;
  }
}

.drawer-center.size-480, .drawer-left.size-480, .drawer-right.size-480 {
  width: 480px !important;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer-center.size-480, .drawer-left.size-480, .drawer-right.size-480 {
    width: 100% !important;
  }
}

@media (max-width: 359px) {
  .drawer-center.size-480, .drawer-left.size-480, .drawer-right.size-480 {
    width: 100% !important;
  }
}

.drawer-top.size-full, .drawer-bottom.size-full {
  height: 100vh !important;
  max-height: none !important;
}

.drawer-top.size-1000, .drawer-bottom.size-1000 {
  max-height: 1000px !important;
}

.drawer-top.size-720, .drawer-bottom.size-720 {
  max-height: 720px !important;
}

.drawer-top.size-480, .drawer-bottom.size-480 {
  max-height: 480px !important;
}

.drawer > i.icon {
  background-color: var(--swatches-base-selected-alt);
}

.drawer > svg.icon {
  color: var(--swatches-base-selected-alt);
}

.drawer-left {
  height: 100vh;
  top: 0;
  transform: translateX(-100%);
  left: 0;
  border-top: none;
  border-left: none;
  border-bottom: none;
}

.drawer-top {
  width: 100%;
  height: 100%;
  max-height: 500px;
  transform: translateY(-100%);
  top: 0;
  left: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}

.drawer-right {
  height: 100vh;
  top: 0;
  transform: translateX(100%);
  right: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
}

.drawer-bottom {
  width: 100%;
  height: 100%;
  max-height: 500px;
  transform: translateY(100%);
  left: 0;
  bottom: 0;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

.drawer-center {
  max-height: 100%;
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.drawer-mobile-bottom {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: auto !important;
  max-height: 85vh !important;
}

.drawer-mobile-top {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  height: auto !important;
  max-height: 85vh !important;
}

.drawer-close {
  background: none;
  border: none;
  cursor: pointer;
}

.drawer-scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--swatches-drawer-transparency);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 1020;
  cursor: pointer;
}

.drawer-scrim.drawer-scrim-visible {
  opacity: 1;
  pointer-events: auto;
}

.drawer .drawer-handle {
  display: flex;
  justify-content: center;
  margin: -8px 0;
  cursor: grab;
}

.drawer .drawer-handle:active {
  cursor: grabbing;
}

.drawer .drawer-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--swatches-border);
}

.drawer .drawer-header {
  display: flex;
  padding: 0;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 100%;
}

.drawer .drawer-header .header-infos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer .drawer-header .header-infos {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer .drawer-header .header-infos {
    gap: 8px;
  }
}

.drawer .drawer-header .header-infos .icon {
  width: 32px;
  height: 32px;
}

.drawer .drawer-header .header-infos .title {
  color: var(--swatches-on-surface-base);
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 800;
}

.drawer .drawer-header .header-infos .title.title-left {
  text-align: left;
}

.drawer .drawer-header .header-infos .title.title-center {
  text-align: center;
}

.drawer .drawer-header .header-infos .title.title-right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer .drawer-header .header-infos .title {
    font-size: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer .drawer-header .header-infos .title {
    font-size: 20px;
  }
}

.drawer .drawer-body {
  display: flex;
  flex-direction: column;
}

.drawer .drawer-body.drawer-body-flush {
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: -24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer .drawer-body.drawer-body-flush {
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: -16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer .drawer-body.drawer-body-flush {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
  }
}

.drawer .drawer-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--swatches-border);
  cursor: pointer;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--swatches-on-surface-base);
  box-sizing: border-box;
  text-align: left;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer .drawer-action {
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer .drawer-action {
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
  }
}

.drawer .drawer-action:last-child {
  border-bottom: none;
}

.drawer .drawer-action:hover {
  background-color: var(--swatches-base-hover);
}

.drawer .drawer-action:active {
  background-color: var(--swatches-base-active);
}

.drawer .drawer-action.danger {
  color: var(--swatches-error-active);
}

.drawer .drawer-action .icon {
  width: 24px;
  height: 24px;
}

.drawer.drawer-visible.drawer-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.drawer.drawer-visible.drawer-left {
  transform: translateX(0);
}

.drawer.drawer-visible.drawer-right {
  transform: translateX(0);
}

.drawer.drawer-visible.drawer-top {
  transform: translateY(0);
}

.drawer.drawer-visible.drawer-bottom {
  transform: translateY(0);
}

.drawer.drawer-visible.drawer-center {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.drawer.drawer-visible ~ .drawer-scrim.drawer-scrim-visible {
  opacity: 1;
  visibility: visible;
}

.drawer img {
  width: 100%;
}

@keyframes comeFromCenter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.drawer-trigger {
  padding: 12px 24px;
  background-color: var(--swatches-primary-active);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.drawer-trigger:hover {
  background-color: var(--swatches-primary-active);
}

.drawer-trigger:active {
  background-color: var(--swatches-primary-active);
}

.shadow-inner {
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.05);
}

.shadow-small {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.shadow-base {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}

.shadow-medium {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.shadow-large {
  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.shadow-larger {
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.shadow-largest {
  box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dropdown {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  width: 100%;
  background-color: var(--swatches-base-default);
}

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

.dropdown.active {
  background-color: var(--swatches-base-active);
}

.dropdown.small {
  min-height: 44px;
  max-height: 44px;
}

.dropdown.small .dropdown-pretab {
  font-size: 14px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dropdown.small .dropdown-pretab {
    font-size: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .dropdown.small .dropdown-pretab {
    font-size: 12px;
  }
}

.dropdown.medium {
  min-height: 48px;
  max-height: 48px;
}

.dropdown.medium .dropdown-pretab {
  font-size: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dropdown.medium .dropdown-pretab {
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .dropdown.medium .dropdown-pretab {
    font-size: 14px;
  }
}

.dropdown.large {
  min-height: 56px;
  max-height: 56px;
}

.dropdown.large .dropdown-pretab {
  font-size: 18px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dropdown.large .dropdown-pretab {
    font-size: 16px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .dropdown.large .dropdown-pretab {
    font-size: 16px;
  }
}

.dropdown .dropdown-pretab {
  display: flex;
  min-width: 44px;
  max-width: 120px;
  padding: 0 10px;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  justify-content: center;
  border: 1px solid var(--swatches-border-base-alt);
  background-color: var(--swatches-border-base-alt);
  box-sizing: border-box;
}

.dropdown .dropdown-pretab i.icon,
.dropdown .dropdown-pretab svg.icon {
  width: 24px;
  height: 24px;
}

.dropdown .dropdown-pretab i.flag {
  width: 24px;
  height: 24px;
}

.dropdown .dropdown-shortcut {
  width: 24px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  border: 1px solid var(--swatches-border-base-alt);
  background-color: var(--swatches-border-base-alt);
  box-sizing: border-box;
}

.dropdown .dropdown-shortcut p {
  margin: 0;
}

.dropdown .dropdown-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdown .dropdown-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown .dropdown-group {
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
}

.file-upload {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--swatches-border);
  background: var(--swatches-background);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload {
    border-radius: 4px;
  }
}

.file-upload i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-surface-base);
  flex-shrink: 0;
}

.file-upload svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-surface-base);
  flex-shrink: 0;
}

.file-upload .archive-infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  font-family: var(--font-body);
}

.file-upload .archive-infos .archive-name {
  color: var(--swatches-on-surface-base);
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 0;
  margin-top: 0;
}

.file-upload .archive-infos .archive-progress {
  color: var(--swatches-on-base);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  margin-bottom: 0;
  margin-top: 0;
}

.file-upload .archive-infos .progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.file-upload .archive-infos .progress-row > .progress-track {
  flex: 1 1 auto;
}

.file-upload .archive-infos .progress-row > .progress-label {
  margin: 0;
  white-space: nowrap;
}

.file-upload .archive-infos .progress-row .progress-bar {
  width: 100%;
  background-color: var(--swatches-base-default);
  overflow: hidden;
}

.file-upload .archive-infos .progress-row .progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-base);
}

.file-upload .badge .badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.file-upload.primary {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.file-upload.primary i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-primary-default);
  flex-shrink: 0;
}

.file-upload.primary svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-primary-default);
  flex-shrink: 0;
}

.file-upload.primary .archive-infos .progress-bar {
  background-color: var(--swatches-background);
  overflow: hidden;
}

.file-upload.primary .archive-infos .progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-surface-primary);
}

.file-upload.success {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.file-upload.success i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-surface-success);
  flex-shrink: 0;
}

.file-upload.success svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-surface-success);
  flex-shrink: 0;
}

.file-upload.success .archive-infos .archive-progress {
  color: var(--swatches-on-surface-success);
}

.file-upload.success .archive-infos .progress-bar {
  background-color: var(--swatches-background);
  overflow: hidden;
}

.file-upload.success .archive-infos .progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-surface-success);
}

.file-upload.warning {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.file-upload.warning i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-surface-warning);
  flex-shrink: 0;
}

.file-upload.warning svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-surface-warning);
  flex-shrink: 0;
}

.file-upload.warning .archive-infos .progress-bar {
  background-color: var(--swatches-background);
  overflow: hidden;
}

.file-upload.warning .archive-infos .progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-surface-warning);
}

.file-upload.error {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.file-upload.error i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-surface-error);
  flex-shrink: 0;
}

.file-upload.error svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-surface-error);
  flex-shrink: 0;
}

.file-upload.error .archive-infos .archive-progress {
  color: var(--swatches-on-surface-error);
}

.file-upload.error .archive-infos .progress-bar {
  background-color: var(--swatches-background);
  overflow: hidden;
}

.file-upload.error .archive-infos .progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-surface-error);
}

.file-upload.small {
  padding: 16px;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.small {
    padding: 8px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.small {
    padding: 12px;
    gap: 8px;
  }
}

.file-upload.small i.icon,
.file-upload.small svg.icon {
  width: 32px;
  height: 32px;
}

.file-upload.small .archive-infos .archive-name {
  font-size: 12px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.small .archive-infos .archive-name {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.small .archive-infos .archive-name {
    font-size: 10px;
  }
}

.file-upload.small .archive-infos .archive-progress {
  font-size: 12px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.small .archive-infos .archive-progress {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.small .archive-infos .archive-progress {
    font-size: 10px;
  }
}

.file-upload.small .archive-infos .progress-bar {
  height: 2px;
}

.file-upload.small .toggle .form-toggle .input {
  width: 30px;
  height: 16px;
}

.file-upload.small .toggle .form-toggle .input::before {
  width: 12px;
  height: 12px;
}

.file-upload.small .badge {
  width: 32px;
  height: 32px;
  gap: 6px;
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.small .badge {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.small .badge {
    font-size: 12px;
  }
}

.file-upload.small .badge i.icon,
.file-upload.small .badge svg.icon {
  width: 11.67px;
  height: 11.67px;
}

.file-upload.small .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.file-upload.small .btn > i.icon,
.file-upload.small .btn > svg.icon {
  width: 12px;
  height: 12px;
}

.file-upload.small .btn > i.flag {
  width: 10px;
  height: 10px;
}

.file-upload.small .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.file-upload.medium {
  padding: 24px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.medium {
    padding: 16px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.medium {
    padding: 20px;
    gap: 12px;
  }
}

.file-upload.medium i.icon,
.file-upload.medium svg.icon {
  width: 40px;
  height: 40px;
}

.file-upload.medium .archive-infos .archive-name {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.medium .archive-infos .archive-name {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.medium .archive-infos .archive-name {
    font-size: 12px;
  }
}

.file-upload.medium .archive-infos .archive-progress {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.medium .archive-infos .archive-progress {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.medium .archive-infos .archive-progress {
    font-size: 12px;
  }
}

.file-upload.medium .archive-infos .progress-bar {
  height: 4px;
}

.file-upload.medium .toggle .form-toggle .input {
  width: 34px;
  height: 20px;
}

.file-upload.medium .toggle .form-toggle .input::before {
  inset: 1px auto 2px 2px;
  transform: none;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  transition: left 0.3s ease, right 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.file-upload.medium .toggle .form-toggle .input:checked::before,
.file-upload.medium .toggle .form-toggle .input:checked::after {
  left: auto;
  right: 2px;
}

.file-upload.medium .badge {
  width: 40px;
  height: 40px;
  gap: 8px;
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.medium .badge {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.medium .badge {
    font-size: 14px;
  }
}

.file-upload.medium .badge i.icon,
.file-upload.medium .badge svg.icon {
  width: 16.67px;
  height: 16.67px;
}

.file-upload.medium .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.file-upload.medium .btn > i.icon,
.file-upload.medium .btn > svg.icon {
  width: 17px;
  height: 17px;
}

.file-upload.medium .btn > i.flag {
  width: 20px;
  height: 20px;
}

.file-upload.medium .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.file-upload.large {
  padding: 32px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.large {
    padding: 20px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.large {
    padding: 24px;
    gap: 12px;
  }
}

.file-upload.large i.icon,
.file-upload.large svg.icon {
  width: 48px;
  height: 48px;
}

.file-upload.large .archive-infos .archive-name {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.large .archive-infos .archive-name {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.large .archive-infos .archive-name {
    font-size: 14px;
  }
}

.file-upload.large .archive-infos .archive-progress {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.large .archive-infos .archive-progress {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.large .archive-infos .archive-progress {
    font-size: 14px;
  }
}

.file-upload.large .archive-infos .progress-bar {
  height: 4px;
}

.file-upload.large .toggle .form-toggle .input {
  width: 46px;
  height: 24px;
}

.file-upload.large .toggle .form-toggle .input::before {
  width: 20px;
  height: 20px;
}

.file-upload.large .badge {
  width: 48px;
  height: 48px;
  gap: 10px;
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.large .badge {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.large .badge {
    font-size: 16px;
  }
}

.file-upload.large .badge i.icon,
.file-upload.large .badge svg.icon {
  width: 20px;
  height: 20px;
}

.file-upload.large .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.file-upload.large .btn > i.icon,
.file-upload.large .btn > svg.icon {
  width: 20px;
  height: 20px;
}

.file-upload.large .btn > i.flag {
  width: 24px;
  height: 24px;
}

.file-upload.large .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  overflow: hidden;
}

.footer.base {
  background-color: var(--swatches-surface);
  color: var(--swatches-on-surface-neutral);
}

.footer.base .footer-logo .logo.logo-dark {
  background-image: var(--logo-dark);
}

.footer.base .footer-logo .logo.logo-light {
  background-image: var(--logo-light);
}

.footer.base .footer-copyright {
  color: var(--swatches-on-surface-neutral);
}

.footer.base .footer-social-icon {
  background-color: var(--swatches-on-surface-neutral);
  color: var(--swatches-on-surface-neutral);
}

.footer.base .footer-social-icon:hover {
  background-color: var(--swatches-primary-hover);
  color: var(--swatches-primary-hover);
}

.footer.base svg.footer-social-icon {
  background-color: transparent;
}

.footer.primary {
  background-color: var(--swatches-primary-default);
  color: var(--swatches-on-primary);
}

.footer.primary .footer-logo .logo {
  background-image: var(--logo-light);
}

.footer.primary .footer-copyright {
  color: var(--swatches-on-primary);
}

.footer.primary .footer-social-icon {
  background-color: var(--swatches-on-primary);
  color: var(--swatches-on-primary);
}

.footer.primary .footer-social-icon:hover {
  background-color: var(--swatches-base-default);
  color: var(--swatches-base-default);
  opacity: 0.8;
}

.footer.primary svg.footer-social-icon {
  background-color: transparent;
}

.footer.sitemap .footer-content {
  display: flex;
  flex-direction: column;
  padding: 48px 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-content {
    padding: 40px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-content {
    padding: 32px;
  }
}

.footer.sitemap .footer-main {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-main {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-main {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
}

.footer.sitemap .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-brand {
    gap: 20px;
    width: 100%;
    order: 1;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-brand {
    gap: 16px;
    width: 100%;
    order: 1;
  }
}

.footer.sitemap .footer-links-section {
  display: flex;
  gap: 40px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-links-section {
    gap: 20px;
    width: 100%;
    order: 2;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-links-section {
    flex-direction: column;
    gap: 16px;
    width: 100%;
    order: 2;
  }
}

.footer.sitemap .footer-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 120px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-column {
    gap: 8px;
    min-width: auto;
    width: 100%;
    padding-bottom: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-column {
    gap: 8px;
    min-width: auto;
    width: 100%;
    padding-bottom: 8px;
  }
  .footer.sitemap .footer-column:last-child {
    padding-bottom: 0;
  }
}

.footer.sitemap .footer-link {
  text-decoration: none;
  font-size: 16px;
  line-height: 130%;
  transition: color 0.2s ease;
  cursor: pointer;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-link {
    font-size: 14px;
    padding: 4px 0;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-link {
    font-size: 14px;
    padding: 4px 0;
  }
}

.footer.sitemap .footer-social {
  display: flex;
  gap: 16px;
  align-items: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-social {
    gap: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-social {
    gap: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-brand .footer-social {
    order: 3;
  }
}

.footer.master .footer-content {
  display: flex;
  align-items: center;
  padding: 24px 48px;
  width: 100%;
  min-height: 48px;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.master .footer-content {
    padding: 20px 40px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.master .footer-content {
    padding: 16px 32px;
    flex-wrap: wrap;
    align-items: center;
  }
}

.footer.master .footer-logo {
  flex-shrink: 0;
}

.footer.master .footer-logo .logo {
  width: 160px;
  height: 30px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.master .footer-logo {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }
}

.footer.master .footer-copyright {
  flex: 1;
  text-align: center;
  overflow-wrap: break-word;
  font-size: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.master .footer-copyright {
    font-size: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.master .footer-copyright {
    font-size: 12px;
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    justify-content: flex-start;
    display: flex;
    text-align: left;
    margin: 8px 0 0 0;
  }
}

.footer.master .footer-social {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.master .footer-social {
    gap: 8px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.master .footer-social {
    gap: 8px;
    order: 2;
    width: 100%;
    justify-content: flex-start;
    display: flex;
    margin: 8px 0 0 0;
  }
}

.footer.master.footer-single-element .footer-content {
  justify-content: center;
}

.footer.master.footer-two-elements .footer-content {
  justify-content: space-between;
}

.footer.master.footer-two-elements .footer-content .footer-copyright {
  text-align: left;
}

.footer.master.footer-only-copyright .footer-content {
  justify-content: center;
}

.footer.master.footer-no-social .footer-content {
  justify-content: flex-start;
}

.footer.master.footer-no-social .footer-content .footer-copyright {
  text-align: right;
  margin-left: auto;
}

.footer.master.footer-no-logo .footer-content {
  justify-content: flex-end;
}

.footer.master.footer-no-logo .footer-content .footer-copyright {
  text-align: left;
  margin-right: auto;
}

.footer .footer-logo .logo {
  width: 214px;
  height: 40px;
}

.footer .footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
}

.footer .footer-copyright {
  font-size: 16px;
  line-height: 130%;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer .footer-copyright {
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer .footer-copyright {
    font-size: 14px;
  }
}

.footer .footer-description {
  font-size: 16px;
  line-height: 130%;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer .footer-description {
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer .footer-description {
    font-size: 14px;
  }
}

.forms {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 100%;
}

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

.forms .form-content {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 24px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.forms .form-content.form-background {
  background-color: var(--swatches-surface);
  border: 1px solid var(--swatches-border);
  border-radius: 8px;
}

.forms .form-content .form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forms .form-content .form-columns {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.forms .form-content .form-columns .form-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.forms .form-content .form-columns .form-column .form-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.forms .form-content .form-columns .form-column.double .form-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.forms .form-content .form-columns .form-column.double .form-inputs .form-group {
  display: block;
}

.forms .form-content .form-columns .form-column.only-input .form-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.forms .form-content .form-columns .form-column.only-input .form-inputs .form-group {
  width: 100%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .forms {
    flex-direction: column;
  }
}

.flex-container {
  display: flex;
}

.flex-container.inline-flex {
  display: inline-flex;
}

.d-flex {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-first {
  order: -1;
}

.order-last {
  order: 6;
}

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

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

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

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

.wrap {
  flex-wrap: wrap;
}

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

.flex-fill {
  flex: 1 1 auto;
}

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

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

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

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

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

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

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -7.5px;
  margin-left: -7.5px;
}

.row > * {
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.row--gap-0 {
  gap: 0px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-0 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-0 > * > * {
  margin: 0 !important;
}

.row--gap-4 {
  gap: 4px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-4 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-4 > * > * {
  margin: 0 !important;
}

.row--gap-8 {
  gap: 8px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-8 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-8 > * > * {
  margin: 0 !important;
}

.row--gap-12 {
  gap: 12px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-12 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-12 > * > * {
  margin: 0 !important;
}

.row--gap-16 {
  gap: 16px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-16 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-16 > * > * {
  margin: 0 !important;
}

.row--gap-20 {
  gap: 20px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-20 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-20 > * > * {
  margin: 0 !important;
}

.row--gap-24 {
  gap: 24px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-24 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-24 > * > * {
  margin: 0 !important;
}

.row--gap-32 {
  gap: 32px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-32 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-32 > * > * {
  margin: 0 !important;
}

.col-sm,
.col-md,
.col-lg,
.col-xl {
  padding-right: 7.5px;
  padding-left: 7.5px;
}

.container {
  width: 100%;
  max-width: 100%;
  padding-right: 7.5px;
  padding-left: 7.5px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

@media (min-width: 360px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1140px;
  }
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33%;
}

.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xl-1 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-1 > *,
.col-md-1 > *,
.col-lg-1 > *,
.col-xl-1 > * {
  margin: 0 7.5px;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66%;
}

.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xl-2 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-2 > *,
.col-md-2 > *,
.col-lg-2 > *,
.col-xl-2 > * {
  margin: 0 7.5px;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xl-3 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-3 > *,
.col-md-3 > *,
.col-lg-3 > *,
.col-xl-3 > * {
  margin: 0 7.5px;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33%;
}

.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xl-4 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-4 > *,
.col-md-4 > *,
.col-lg-4 > *,
.col-xl-4 > * {
  margin: 0 7.5px;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66%;
}

.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xl-5 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-5 > *,
.col-md-5 > *,
.col-lg-5 > *,
.col-xl-5 > * {
  margin: 0 7.5px;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xl-6 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-6 > *,
.col-md-6 > *,
.col-lg-6 > *,
.col-xl-6 > * {
  margin: 0 7.5px;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33%;
}

.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xl-7 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-7 > *,
.col-md-7 > *,
.col-lg-7 > *,
.col-xl-7 > * {
  margin: 0 7.5px;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66%;
}

.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xl-8 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-8 > *,
.col-md-8 > *,
.col-lg-8 > *,
.col-xl-8 > * {
  margin: 0 7.5px;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xl-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-9 > *,
.col-md-9 > *,
.col-lg-9 > *,
.col-xl-9 > * {
  margin: 0 7.5px;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33%;
}

.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xl-10 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-10 > *,
.col-md-10 > *,
.col-lg-10 > *,
.col-xl-10 > * {
  margin: 0 7.5px;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66%;
}

.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xl-11 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-11 > *,
.col-md-11 > *,
.col-lg-11 > *,
.col-xl-11 > * {
  margin: 0 7.5px;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.col-sm-12,
.col-md-12,
.col-lg-12,
.col-xl-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-12 > *,
.col-md-12 > *,
.col-lg-12 > *,
.col-xl-12 > * {
  margin: 0 7.5px;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col--align-left {
  display: flex;
  justify-content: flex-start;
}

.col--align-center {
  display: flex;
  justify-content: center;
}

.col--align-right {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 360px) {
  .col-sm-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }
  .col-sm-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  .col-sm-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }
  .col-sm-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }
  .col-sm-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-offset-1 {
    margin-left: 8.33%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66%;
  }
  .col-sm-order-0 {
    order: 0;
  }
  .col-sm-order-1 {
    order: 1;
  }
  .col-sm-order-2 {
    order: 2;
  }
  .col-sm-order-3 {
    order: 3;
  }
  .col-sm-order-4 {
    order: 4;
  }
  .col-sm-order-5 {
    order: 5;
  }
  .col-sm-order-6 {
    order: 6;
  }
  .col-sm-order-7 {
    order: 7;
  }
  .col-sm-order-8 {
    order: 8;
  }
  .col-sm-order-9 {
    order: 9;
  }
  .col-sm-order-10 {
    order: 10;
  }
  .col-sm-order-11 {
    order: 11;
  }
  .col-sm-order-12 {
    order: 12;
  }
  .col-sm-order-first {
    order: -1;
  }
  .col-sm-order-last {
    order: 13;
  }
}

@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }
  .col-md-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  .col-md-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }
  .col-md-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }
  .col-md-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-offset-1 {
    margin-left: 8.33%;
  }
  .col-md-offset-2 {
    margin-left: 16.66%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.33%;
  }
  .col-md-offset-5 {
    margin-left: 41.66%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.33%;
  }
  .col-md-offset-8 {
    margin-left: 66.66%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.33%;
  }
  .col-md-offset-11 {
    margin-left: 91.66%;
  }
  .col-md-order-0 {
    order: 0;
  }
  .col-md-order-1 {
    order: 1;
  }
  .col-md-order-2 {
    order: 2;
  }
  .col-md-order-3 {
    order: 3;
  }
  .col-md-order-4 {
    order: 4;
  }
  .col-md-order-5 {
    order: 5;
  }
  .col-md-order-6 {
    order: 6;
  }
  .col-md-order-7 {
    order: 7;
  }
  .col-md-order-8 {
    order: 8;
  }
  .col-md-order-9 {
    order: 9;
  }
  .col-md-order-10 {
    order: 10;
  }
  .col-md-order-11 {
    order: 11;
  }
  .col-md-order-12 {
    order: 12;
  }
  .col-md-order-first {
    order: -1;
  }
  .col-md-order-last {
    order: 13;
  }
}

@media (min-width: 1024px) {
  .col-lg-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }
  .col-lg-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  .col-lg-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }
  .col-lg-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }
  .col-lg-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-offset-1 {
    margin-left: 8.33%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66%;
  }
  .col-lg-order-0 {
    order: 0;
  }
  .col-lg-order-1 {
    order: 1;
  }
  .col-lg-order-2 {
    order: 2;
  }
  .col-lg-order-3 {
    order: 3;
  }
  .col-lg-order-4 {
    order: 4;
  }
  .col-lg-order-5 {
    order: 5;
  }
  .col-lg-order-6 {
    order: 6;
  }
  .col-lg-order-7 {
    order: 7;
  }
  .col-lg-order-8 {
    order: 8;
  }
  .col-lg-order-9 {
    order: 9;
  }
  .col-lg-order-10 {
    order: 10;
  }
  .col-lg-order-11 {
    order: 11;
  }
  .col-lg-order-12 {
    order: 12;
  }
  .col-lg-order-first {
    order: -1;
  }
  .col-lg-order-last {
    order: 13;
  }
}

@media (min-width: 1440px) {
  .col-xl-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }
  .col-xl-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  .col-xl-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }
  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }
  .col-xl-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }
  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }
  .col-xl-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-offset-1 {
    margin-left: 8.33%;
  }
  .col-xl-offset-2 {
    margin-left: 16.66%;
  }
  .col-xl-offset-3 {
    margin-left: 25%;
  }
  .col-xl-offset-4 {
    margin-left: 33.33%;
  }
  .col-xl-offset-5 {
    margin-left: 41.66%;
  }
  .col-xl-offset-6 {
    margin-left: 50%;
  }
  .col-xl-offset-7 {
    margin-left: 58.33%;
  }
  .col-xl-offset-8 {
    margin-left: 66.66%;
  }
  .col-xl-offset-9 {
    margin-left: 75%;
  }
  .col-xl-offset-10 {
    margin-left: 83.33%;
  }
  .col-xl-offset-11 {
    margin-left: 91.66%;
  }
  .col-xl-order-0 {
    order: 0;
  }
  .col-xl-order-1 {
    order: 1;
  }
  .col-xl-order-2 {
    order: 2;
  }
  .col-xl-order-3 {
    order: 3;
  }
  .col-xl-order-4 {
    order: 4;
  }
  .col-xl-order-5 {
    order: 5;
  }
  .col-xl-order-6 {
    order: 6;
  }
  .col-xl-order-7 {
    order: 7;
  }
  .col-xl-order-8 {
    order: 8;
  }
  .col-xl-order-9 {
    order: 9;
  }
  .col-xl-order-10 {
    order: 10;
  }
  .col-xl-order-11 {
    order: 11;
  }
  .col-xl-order-12 {
    order: 12;
  }
  .col-xl-order-first {
    order: -1;
  }
  .col-xl-order-last {
    order: 13;
  }
}

.container-fluid {
  width: 100%;
  padding-right: 7.5px;
  padding-left: 7.5px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

.header {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  overscroll-behavior: contain;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header .header-top {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--swatches-border);
  background-color: var(--swatches-surface);
  color: var(--swatches-on-base);
}

.header .header-top .header-left {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.header .header-top .header-left .menu-icon {
  display: flex;
  align-items: center;
}

.header .header-top .header-left .separator {
  width: 1px;
  height: 20px;
  background-color: var(--swatches-border);
}

.header .header-top .header-left .section-title {
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.header .header-top .header-left .header-links {
  display: flex;
}

.header .header-top .header-center {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.header .header-top .header-center > div {
  flex: 1;
}

.header .header-top .header-center .form-group .form-control {
  border-radius: 8px;
}

.header .header-top .header-center .form-group .form-control.pill {
  border-radius: 1000px;
}

.header .header-top .header-center .placeholder-box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.header .header-top .header-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.header .header-top .header-right .menu-icon {
  display: flex;
  align-items: center;
}

.header .header-top .header-right .user-profile {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  color: var(--swatches-on-base);
}

.header .header-top .header-right .user-profile .user-info {
  display: flex;
  flex-direction: column;
}

.header .header-top .header-right .user-profile .user-info .user-name {
  font-weight: 600;
}

.header .header-top .header-right .user-profile .user-info .user-doc {
  font-weight: 400;
}

.header .header-top .header-right .user-profile i.icon {
  background-color: var(--swatches-on-base);
}

.header .header-top .header-right .user-profile svg.icon {
  color: var(--swatches-on-base);
}

.header .header-top .header-right .header-links {
  display: flex;
}

.header .header-top.transparent {
  background-color: var(--swatches-transparent);
  border-bottom: none;
}

.header .header-top.primary {
  background-color: var(--swatches-primary-default);
  border-bottom: 1px solid var(--swatches-primary-hover);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .logo {
  background-image: var(--logo-light);
}

.header .header-top.primary .header-left .section-title {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .user-profile {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .user-profile i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .user-profile svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary {
  background-color: var(--swatches-secondary-default);
  border-bottom: 1px solid var(--swatches-secondary-hover);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .logo {
  background-image: var(--logo-light);
}

.header .header-top.secondary .header-left .section-title {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .user-profile {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .user-profile i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .user-profile svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary {
  background-color: var(--swatches-tertiary-default);
  border-bottom: 1px solid var(--swatches-tertiary-hover);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .logo {
  background-image: var(--logo-light);
}

.header .header-top.tertiary .header-left .section-title {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .user-profile {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .user-profile i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .user-profile svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  background-color: var(--swatches-background);
  color: var(--swatches-on-base);
}

.header .header-bottom > i.icon {
  background-color: var(--swatches-on-base);
}

.header .header-bottom > svg.icon {
  color: var(--swatches-on-base);
}

.header .header-bottom.primary {
  background-color: var(--swatches-primary-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.primary > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.primary > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.secondary {
  background-color: var(--swatches-secondary-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.secondary > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.secondary > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.tertiary {
  background-color: var(--swatches-tertiary-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.tertiary > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.tertiary > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.quaternary {
  background-color: var(--swatches-quaternary-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.quaternary > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.quaternary > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.success {
  background-color: var(--swatches-success-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.success > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.success > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.error {
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.error > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.error > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.warning {
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.warning > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.warning > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top {
  background-color: var(--swatches-surface-invert);
  color: var(--swatches-on-surface-invert);
  border-bottom: 1px solid var(--swatches-surface-invert);
}

.header.invert .header-top .header-left .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .logo {
  background-image: var(--logo-light);
}

.header.invert .header-top .header-left .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .separator {
  background-color: var(--swatches-on-surface-alt-invert);
}

.header.invert .header-top .header-left .section-title {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .user-profile {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .user-profile i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .user-profile svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.header-small .header-top {
  padding: 8px 16px;
  gap: 16px;
}

.header.header-small .header-top .header-left {
  gap: 16px;
}

.header.header-small .header-top .header-left .menu-icon {
  gap: 8px;
}

.header.header-small .header-top .header-left .menu-icon .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.header.header-small .header-top .header-left .menu-icon .btn > i.icon,
.header.header-small .header-top .header-left .menu-icon .btn > svg.icon {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-left .menu-icon .btn > i.flag {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-left .menu-icon .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.header.header-small .header-top .header-left .logo {
  width: 107px;
  height: 20px;
}

.header.header-small .header-top .header-left .section-title {
  font-size: 14px;
}

.header.header-small .header-top .header-left .header-links {
  gap: 16px;
}

.header.header-small .header-top .header-left .header-links .custom-link {
  font-size: 14px;
  gap: 4px;
}

.header.header-small .header-top .header-left .header-links .custom-link i.icon,
.header.header-small .header-top .header-left .header-links .custom-link svg.icon {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-left .header-links .custom-link i.flag {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-center {
  gap: 16px;
}

.header.header-small .header-top .header-center .form-group .form-control {
  height: 32px;
}

.header.header-small .header-top .header-center .placeholder-box {
  height: 32px;
  font-size: 14px;
  padding: 0 16px;
}

.header.header-small .header-top .header-right {
  gap: 16px;
}

.header.header-small .header-top .header-right .menu-icon {
  gap: 8px;
}

.header.header-small .header-top .header-right .menu-icon .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.header.header-small .header-top .header-right .menu-icon .btn > i.flag {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-right .menu-icon .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.header.header-small .header-top .header-right .user-profile {
  gap: 4px;
  padding: 4px;
}

.header.header-small .header-top .header-right .user-profile .avatar {
  width: 24px;
  height: 24px;
}

.header.header-small .header-top .header-right .user-profile .user-info .user-name {
  font-size: 14px;
}

.header.header-small .header-top .header-right .user-profile .user-info .user-doc {
  font-size: 12px;
}

.header.header-small .header-top .header-right .user-profile i.icon,
.header.header-small .header-top .header-right .user-profile svg.icon {
  width: 24px;
  height: 24px;
}

.header.header-small .header-top .header-right .header-links {
  gap: 16px;
}

.header.header-small .header-top .header-right .header-links .custom-link {
  font-size: 14px;
  gap: 4px;
}

.header.header-small .header-top .header-right .header-links .custom-link i.icon,
.header.header-small .header-top .header-right .header-links .custom-link svg.icon {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-right .header-links .custom-link i.flag {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-right .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.header.header-small .header-top .header-right .btn > i.flag {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-right .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.header.header-small .header-bottom {
  gap: 4px;
  padding: 4px;
  font-size: 12px;
}

.header.header-small .header-bottom > i.icon,
.header.header-small .header-bottom > svg.icon {
  width: 24px;
  height: 24px;
}

.header.header-medium .header-top {
  padding: 16px 24px;
  gap: 24px;
}

.header.header-medium .header-top .header-left {
  gap: 24px;
}

.header.header-medium .header-top .header-left .menu-icon {
  gap: 16px;
}

.header.header-medium .header-top .header-left .menu-icon .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.header.header-medium .header-top .header-left .menu-icon .btn > i.icon,
.header.header-medium .header-top .header-left .menu-icon .btn > svg.icon {
  width: 32px;
  height: 32px;
}

.header.header-medium .header-top .header-left .menu-icon .btn > i.flag {
  width: 32px;
  height: 32px;
}

.header.header-medium .header-top .header-left .menu-icon .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.header.header-medium .header-top .header-left .logo {
  width: 115px;
  height: 30px;
}

.header.header-medium .header-top .header-left .section-title {
  font-size: 16px;
}

.header.header-medium .header-top .header-left .header-links {
  gap: 24px;
}

.header.header-medium .header-top .header-left .header-links .custom-link {
  font-size: 16px;
  gap: 4px;
}

.header.header-medium .header-top .header-left .header-links .custom-link i.icon,
.header.header-medium .header-top .header-left .header-links .custom-link svg.icon {
  width: 16px;
  height: 16px;
}

.header.header-medium .header-top .header-left .header-links .custom-link i.flag {
  width: 16px;
  height: 16px;
}

.header.header-medium .header-top .header-center {
  gap: 24px;
}

.header.header-medium .header-top .header-center .form-group .form-control {
  height: 40px;
}

.header.header-medium .header-top .header-center .placeholder-box {
  height: 40px;
  font-size: 16px;
  padding: 0 24px;
}

.header.header-medium .header-top .header-right {
  gap: 24px;
}

.header.header-medium .header-top .header-right .menu-icon {
  gap: 8px;
}

.header.header-medium .header-top .header-right .menu-icon .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.header.header-medium .header-top .header-right .menu-icon .btn > i.flag {
  width: 32px;
  height: 32px;
}

.header.header-medium .header-top .header-right .menu-icon .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.header.header-medium .header-top .header-right .user-profile {
  gap: 4px;
  padding: 4px;
}

.header.header-medium .header-top .header-right .user-profile .avatar {
  width: 32px;
  height: 32px;
}

.header.header-medium .header-top .header-right .user-profile .user-info .user-name {
  font-size: 16px;
}

.header.header-medium .header-top .header-right .user-profile .user-info .user-doc {
  font-size: 14px;
}

.header.header-medium .header-top .header-right .user-profile i.icon,
.header.header-medium .header-top .header-right .user-profile svg.icon {
  width: 24px;
  height: 24px;
}

.header.header-medium .header-top .header-right .header-links {
  gap: 16px;
}

.header.header-medium .header-top .header-right .header-links .custom-link {
  font-size: 16px;
  gap: 4px;
}

.header.header-medium .header-top .header-right .header-links .custom-link i.icon,
.header.header-medium .header-top .header-right .header-links .custom-link svg.icon {
  width: 16px;
  height: 16px;
}

.header.header-medium .header-top .header-right .header-links .custom-link i.flag {
  width: 16px;
  height: 16px;
}

.header.header-medium .header-top .header-right .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.header.header-medium .header-top .header-right .btn > i.flag {
  width: 32px;
  height: 32px;
}

.header.header-medium .header-top .header-right .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.header.header-medium .header-bottom {
  gap: 8px;
  padding: 8px;
  font-size: 16px;
}

.header.header-medium .header-bottom > i.icon,
.header.header-medium .header-bottom > svg.icon {
  width: 32px;
  height: 32px;
}

.header.header-large .header-top {
  padding: 24px 32px;
  gap: 32px;
}

.header.header-large .header-top .header-left {
  gap: 32px;
}

.header.header-large .header-top .header-left .menu-icon {
  gap: 24px;
}

.header.header-large .header-top .header-left .menu-icon .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.header.header-large .header-top .header-left .menu-icon .btn > i.icon,
.header.header-large .header-top .header-left .menu-icon .btn > svg.icon {
  width: 40px;
  height: 40px;
}

.header.header-large .header-top .header-left .menu-icon .btn > i.flag {
  width: 40px;
  height: 40px;
}

.header.header-large .header-top .header-left .menu-icon .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.header.header-large .header-top .header-left .logo {
  width: 214px;
  height: 40px;
}

.header.header-large .header-top .header-left .section-title {
  font-size: 18px;
}

.header.header-large .header-top .header-left .header-links {
  gap: 32px;
}

.header.header-large .header-top .header-left .header-links .custom-link {
  font-size: 18px;
  gap: 6px;
}

.header.header-large .header-top .header-left .header-links .custom-link i.icon,
.header.header-large .header-top .header-left .header-links .custom-link svg.icon {
  width: 22px;
  height: 22px;
}

.header.header-large .header-top .header-left .header-links .custom-link i.flag {
  width: 22px;
  height: 22px;
}

.header.header-large .header-top .header-center {
  gap: 32px;
}

.header.header-large .header-top .header-center .form-group .form-control {
  height: 48px;
}

.header.header-large .header-top .header-center .placeholder-box {
  height: 48px;
  font-size: 18px;
  padding: 0 32px;
}

.header.header-large .header-top .header-right {
  gap: 32px;
}

.header.header-large .header-top .header-right .menu-icon {
  gap: 16px;
}

.header.header-large .header-top .header-right .menu-icon .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.header.header-large .header-top .header-right .menu-icon .btn > i.flag {
  width: 40px;
  height: 40px;
}

.header.header-large .header-top .header-right .menu-icon .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.header.header-large .header-top .header-right .user-profile {
  gap: 4px;
  padding: 4px;
}

.header.header-large .header-top .header-right .user-profile .avatar {
  width: 40px;
  height: 40px;
}

.header.header-large .header-top .header-right .user-profile .user-info .user-name {
  font-size: 18px;
}

.header.header-large .header-top .header-right .user-profile .user-info .user-doc {
  font-size: 16px;
}

.header.header-large .header-top .header-right .user-profile i.icon,
.header.header-large .header-top .header-right .user-profile svg.icon {
  width: 24px;
  height: 24px;
}

.header.header-large .header-top .header-right .header-links {
  gap: 24px;
}

.header.header-large .header-top .header-right .header-links .custom-link {
  font-size: 18px;
  gap: 6px;
}

.header.header-large .header-top .header-right .header-links .custom-link i.icon,
.header.header-large .header-top .header-right .header-links .custom-link svg.icon {
  width: 22px;
  height: 22px;
}

.header.header-large .header-top .header-right .header-links .custom-link i.flag {
  width: 22px;
  height: 22px;
}

.header.header-large .header-top .header-right .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.header.header-large .header-top .header-right .btn > i.flag {
  width: 40px;
  height: 40px;
}

.header.header-large .header-top .header-right .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.header.header-large .header-bottom {
  gap: 8px;
  padding: 8px;
  font-size: 18px;
}

.header.header-large .header-bottom > i.icon,
.header.header-large .header-bottom > svg.icon {
  width: 40px;
  height: 40px;
}

@media (max-width: 767px) {
  .header-top {
    --hdr-gap: 12px;
    --hdr-h: 56px;
    grid-template-columns: 56px 1fr 56px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .header-top {
    --hdr-gap: 16px;
    --hdr-h: 64px;
    grid-template-columns: auto 1fr auto;
  }
}

@media (min-width: 1024px) {
  .header-top {
    --hdr-gap: 20px;
    --hdr-h: 72px;
    grid-template-columns: auto 1fr auto;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .header .header-top {
    gap: 0 !important;
  }
  .header .header-top .header-left {
    gap: 8px !important;
  }
  .header .header-top .header-right {
    gap: 12px !important;
  }
}

.custom-link {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  color: var(--swatches-on-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.custom-link > i.icon {
  background-color: var(--swatches-on-base);
}

.custom-link > svg.icon {
  color: var(--swatches-on-base);
}

.custom-link:hover {
  text-decoration: underline;
}

.custom-link:active {
  background-color: transparent;
}

.custom-link:focus-visible {
  background-color: var(--swatches-base-default);
  border-color: var(--swatches-border-base-focus);
  border-width: 3px;
}

.custom-link::selection {
  background-color: var(--swatches-base-selected);
}

.custom-link.disabled {
  color: var(--swatches-on-base-40);
  opacity: 0.4;
  cursor: no-drop;
  text-decoration: none;
}

.custom-link.xsmall {
  font-size: 12px;
  gap: 4px;
}

.custom-link.xsmall i.icon,
.custom-link.xsmall svg.icon {
  width: 8px;
  height: 8px;
}

.custom-link.xsmall i.flag {
  width: 8px;
  height: 8px;
}

.custom-link.small {
  font-size: 14px;
  gap: 4px;
}

.custom-link.small i.icon,
.custom-link.small svg.icon {
  width: 12px;
  height: 12px;
}

.custom-link.small i.flag {
  width: 12px;
  height: 12px;
}

.custom-link.medium {
  font-size: 16px;
  gap: 4px;
}

.custom-link.medium i.icon,
.custom-link.medium svg.icon {
  width: 16px;
  height: 16px;
}

.custom-link.medium i.flag {
  width: 16px;
  height: 16px;
}

.custom-link.large {
  font-size: 18px;
  gap: 6px;
}

.custom-link.large i.icon,
.custom-link.large svg.icon {
  width: 22px;
  height: 22px;
}

.custom-link.large i.flag {
  width: 22px;
  height: 22px;
}

.custom-link.invert {
  color: var(--swatches-on-surface-invert);
}

.custom-link.invert > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.custom-link.invert > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.custom-link.invert:hover {
  color: var(--swatches-on-surface-invert);
}

.custom-link.invert:hover > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.custom-link.invert:hover > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.custom-link.invert:active {
  color: var(--swatches-border-primary-subtle);
}

.custom-link.invert:active > i.icon {
  background-color: var(--swatches-border-primary-subtle);
}

.custom-link.invert:active > svg.icon {
  color: var(--swatches-border-primary-subtle);
}

.custom-link.invert:focus-visible {
  color: var(--swatches-border-primary-subtle);
}

.custom-link.invert:focus-visible > i.icon {
  background-color: var(--swatches-primary-selected);
}

.custom-link.invert:focus-visible > svg.icon {
  color: var(--swatches-primary-selected);
}

.custom-link.invert::selection {
  color: var(--swatches-primary-selected);
}

.custom-link.invert:disabled {
  color: var(--swatches-on-surface-invert-40);
}

.custom-link.invert:disabled > i.icon {
  background-color: var(--swatches-on-surface-invert-40);
}

.custom-link.invert:disabled > svg.icon {
  color: var(--swatches-on-surface-invert-40);
}

.custom-link.invert:disabled {
  opacity: 0.4;
}

.custom-link.invert > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.custom-link.invert > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.custom-link.invert > i.icon::selection {
  background-color: var(--swatches-border-primary-subtle);
}

.custom-link.invert > svg.icon::selection {
  color: var(--swatches-border-primary-subtle);
}

.custom-link.primary {
  color: var(--swatches-primary-default);
}

.custom-link.primary > i.icon {
  background-color: var(--swatches-primary-default);
}

.custom-link.primary > svg.icon {
  color: var(--swatches-primary-default);
}

.custom-link.secondary {
  color: var(--swatches-secondary-default);
}

.custom-link.secondary > i.icon {
  background-color: var(--swatches-secondary-default);
}

.custom-link.secondary > svg.icon {
  color: var(--swatches-secondary-default);
}

.custom-link.tertiary {
  color: var(--swatches-tertiary-default);
}

.custom-link.tertiary > i.icon {
  background-color: var(--swatches-tertiary-default);
}

.custom-link.tertiary > svg.icon {
  color: var(--swatches-tertiary-default);
}

.custom-link.quaternary {
  color: var(--swatches-quaternary-default);
}

.custom-link.quaternary > i.icon {
  background-color: var(--swatches-quaternary-default);
}

.custom-link.quaternary > svg.icon {
  color: var(--swatches-quaternary-default);
}

.custom-link.success {
  color: var(--swatches-success-default);
}

.custom-link.success > i.icon {
  background-color: var(--swatches-success-default);
}

.custom-link.success > svg.icon {
  color: var(--swatches-success-default);
}

.custom-link.warning {
  color: var(--swatches-warning-default);
}

.custom-link.warning > i.icon {
  background-color: var(--swatches-warning-default);
}

.custom-link.warning > svg.icon {
  color: var(--swatches-warning-default);
}

.custom-link.error {
  color: var(--swatches-error-default);
}

.custom-link.error > i.icon {
  background-color: var(--swatches-error-default);
}

.custom-link.error > svg.icon {
  color: var(--swatches-error-default);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .custom-link.xsmall {
    font-size: 10px;
  }
  .custom-link.small {
    font-size: 12px;
  }
  .custom-link.medium {
    font-size: 14px;
  }
  .custom-link.large {
    font-size: 16px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .custom-link.xsmall {
    font-size: 10px;
  }
  .custom-link.small {
    font-size: 12px;
  }
  .custom-link.medium {
    font-size: 14px;
  }
  .custom-link.large {
    font-size: 16px;
  }
}

i.icon,
svg.icon {
  display: flex;
}

i.icon.xsmall,
svg.icon.xsmall {
  width: 16px;
  height: 16px;
}

i.icon.small,
svg.icon.small {
  width: 24px;
  height: 24px;
}

i.icon.medium,
svg.icon.medium {
  width: 32px;
  height: 32px;
}

i.icon.large,
svg.icon.large {
  width: 40px;
  height: 40px;
}

i.icon.xlarge,
svg.icon.xlarge {
  width: 48px;
  height: 48px;
}

i.icon.xxlarge,
svg.icon.xxlarge {
  width: 64px;
  height: 64px;
}

i.icon.huge,
svg.icon.huge {
  width: 80px;
  height: 80px;
}

i.icon.xhuge,
svg.icon.xhuge {
  width: 96px;
  height: 96px;
}

i.icon {
  background-color: var(--swatches-on-base, #333);
}

i.icon.primary {
  background-color: var(--swatches-primary-default);
}

i.icon.secondary {
  background-color: var(--swatches-secondary-default);
}

i.icon.tertiary {
  background-color: var(--swatches-tertiary-hover);
}

i.icon.quaternary {
  background-color: var(--swatches-quaternary-default);
}

i.icon.success {
  background-color: var(--swatches-success-default);
}

i.icon.warning {
  background-color: var(--swatches-warning-default);
}

i.icon.error {
  background-color: var(--swatches-error-default);
}

svg.icon {
  color: var(--swatches-on-base, #333);
}

svg.icon.primary {
  color: var(--swatches-primary-default);
}

svg.icon.secondary {
  color: var(--swatches-secondary-default);
}

svg.icon.tertiary {
  color: var(--swatches-tertiary-hover);
}

svg.icon.quaternary {
  color: var(--swatches-quaternary-default);
}

svg.icon.success {
  color: var(--swatches-success-default);
}

svg.icon.warning {
  color: var(--swatches-warning-default);
}

svg.icon.error {
  color: var(--swatches-error-default);
}

i.flag,
i.emoji {
  display: flex;
}

i.flag.xsmall,
i.emoji.xsmall {
  width: 16px;
  height: 16px;
}

i.flag.small,
i.emoji.small {
  width: 24px;
  height: 24px;
}

i.flag.medium,
i.emoji.medium {
  width: 32px;
  height: 32px;
}

i.flag.large,
i.emoji.large {
  width: 40px;
  height: 40px;
}

i.flag.xlarge,
i.emoji.xlarge {
  width: 48px;
  height: 48px;
}

i.flag.xxlarge,
i.emoji.xxlarge {
  width: 64px;
  height: 64px;
}

i.flag.huge,
i.emoji.huge {
  width: 80px;
  height: 80px;
}

i.flag.xhuge,
i.emoji.xhuge {
  width: 96px;
  height: 96px;
}

.form-group .dropdown {
  display: none;
  flex-direction: column;
}

.form-group .dropdown.small {
  height: auto;
  max-height: 100%;
  width: 95px;
  border: 1px solid var(--swatches-border-base-input);
  z-index: 99;
  position: absolute;
}

.form-group input {
  cursor: pointer;
}

.form-group.disabled .form-control {
  background-color: var(--swatches-base-subtle);
  border: 1px solid var(--swatches-border-base-input);
  opacity: 0.4;
  cursor: not-allowed;
}

.form-group.disabled .form-control:focus {
  outline: 0;
  box-shadow: none;
}

.form-group.disabled .form-label {
  opacity: 0.4;
}

.form-group.disabled .form-text {
  opacity: 0.4;
}

.form-group.disabled .input-group-text {
  background-color: var(--swatches-base-subtle);
  border: 1px solid var(--swatches-border-base-input);
  opacity: 0.4;
}

.form-group.disabled .btn {
  background-color: var(--swatches-base-subtle);
  border: 1px solid var(--swatches-border-base-input);
  opacity: 0.4;
  cursor: not-allowed;
}

.form-group.disabled .btn:hover, .form-group.disabled .btn:focus, .form-group.disabled .btn:active {
  background-color: var(--swatches-base-subtle);
  border: 1px solid var(--swatches-border-base-input);
  box-shadow: none;
}

.form-group.disabled .form-control,
.form-group.disabled .input-group-text,
.form-group.disabled .btn {
  pointer-events: none;
}

.form-group .form-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--swatches-on-surface-neutral);
  margin-bottom: 12px;
}

.form-group .form-label i {
  font-size: 16px;
  display: block;
  width: 16px !important;
  height: 16px !important;
}

.form-group .form-label i:is(i) {
  background-color: var(--swatches-on-surface-neutral-alt);
}

.form-group .form-label i:is(svg) {
  color: var(--swatches-on-surface-neutral-alt);
}

.form-group .form-label svg {
  display: block;
  width: 16px !important;
  height: 16px !important;
  color: var(--swatches-on-surface-neutral-alt);
}

.form-group .form-label.required::after {
  content: "*";
  color: var(--swatches-error-selected);
  margin-left: 4px;
  width: 7px;
  height: 7px;
  line-height: 7px;
  position: relative;
  top: -2px;
}

.form-group .form-label.form-label-invert {
  color: var(--swatches-on-surface-invert);
}

.form-group .form-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--swatches-on-surface-neutral-alt);
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.form-group .form-text {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--swatches-on-surface-neutral);
  margin-top: 12px;
}

.form-group .form-text.success {
  color: var(--swatches-success-default);
}

.form-group .form-text.warning {
  color: var(--swatches-warning-default);
}

.form-group .form-text.error {
  color: var(--swatches-error-default);
}

@media (min-width: 360px) and (max-width: 767px) {
  .form-group .form-text {
    font-size: 12px;
    margin-top: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-group .form-text {
    font-size: 12px;
    margin-top: 8px;
  }
}

.form-group .form-control {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--swatches-on-surface-neutral);
  background-color: var(--swatches-base-default);
  border: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-shadow: none;
}

.form-group .form-control::placeholder {
  color: var(--neutral-500);
}

.form-group .form-control:focus {
  outline: none;
}

.form-group .form-control.small {
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
}

.form-group .form-control.large {
  height: 48px;
  padding: 0 10px;
  font-size: 18px;
}

.form-group .form-control.round-phone {
  border-end-end-radius: 8px;
  border-start-end-radius: 8px;
}

.form-group .form-control.pill-phone {
  border-end-end-radius: 1000px;
  border-start-end-radius: 1000px;
}

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

.form-group .form-control.pill {
  border-radius: 1000px;
}

.form-group .form-control.select {
  appearance: none;
}

.form-group .input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--swatches-border-base-input);
}

.form-group .input-group.round {
  border-radius: 8px;
  overflow: hidden;
}

.form-group .input-group.pill {
  border-radius: 1000px;
  overflow: hidden;
}

.form-group .input-group:hover {
  border-color: var(--swatches-base-hover-alt);
}

.form-group .input-group:hover ~ .dropdown {
  display: flex;
}

.form-group .input-group:active, .form-group .input-group:focus, .form-group .input-group:focus-within {
  border-color: var(--swatches-base-hover-alt);
  outline: 1px solid var(--swatches-base-hover-alt);
}

.form-group .input-group::selection {
  outline: 1px solid var(--swatches-base-hover-alt);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-surface-alt);
}

.form-group .input-group.search {
  position: relative;
}

.form-group .input-group.search .btn-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.form-group .input-group.search .btn-search > i.icon,
.form-group .input-group.search .btn-search > svg.icon {
  width: 16px !important;
  height: 16px !important;
}

.form-group .input-group.search .btn-search > i.icon {
  background-color: var(--swatches-on-surface-neutral);
}

.form-group .input-group.search .btn-search > svg.icon {
  color: var(--swatches-on-surface-neutral);
}

.form-group .input-group.date {
  position: relative;
}

.form-group .input-group.date input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 30px;
  cursor: pointer;
  -webkit-appearance: none;
}

.form-group .input-group.date .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.month {
  position: relative;
}

.form-group .input-group.month input[type=month]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 30px;
  cursor: pointer;
  -webkit-appearance: none;
}

.form-group .input-group.month .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.date-time {
  position: relative;
}

.form-group .input-group.date-time input[type=datetime-local]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 30px;
  cursor: pointer;
  -webkit-appearance: none;
}

.form-group .input-group.date-time .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.time {
  position: relative;
}

.form-group .input-group.time input[type=time]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 30px;
  cursor: pointer;
}

.form-group .input-group.time {
  /* Para o indicador interno do time */
}

.form-group .input-group.time input[type=time]::-webkit-inner-spin-button {
  opacity: 0;
  width: 30px;
  cursor: pointer;
}

.form-group .input-group.time i.icon,
.form-group .input-group.time svg.icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.icon-content {
  position: relative;
}

.form-group .input-group.icon-content .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.password {
  position: relative;
}

.form-group .input-group.password i.icon,
.form-group .input-group.password svg.icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.file {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  width: 100%;
  height: 38px;
  color: var(--swatches-on-surface-neutral);
  background-color: var(--swatches-base-default);
  border: 1px solid var(--swatches-border-base-input);
  border-radius: 0;
  overflow: hidden;
}

.form-group .input-group.file input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.form-group .input-group.file::before {
  content: "Nenhum arquivo...";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 14px;
  pointer-events: none;
}

.form-group .input-group.file::after {
  content: "Escolher Arquivo";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 10px 12px;
  color: var(--swatches-on-surface-neutral);
  font-size: 14px;
  background-color: var(--swatches-base-subtle);
  border-left: 1px solid var(--swatches-border-base-input);
  border-radius: 0;
  pointer-events: none;
}

.form-group .input-group.file:hover::after {
  background-color: #dee2e6;
}

.form-group .input-group.message {
  position: relative;
}

.form-group .input-group.message .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.cvv {
  position: relative;
}

.form-group .input-group.cvv i.icon,
.form-group .input-group.cvv svg.icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.form-group .input-group .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  min-width: 18px;
  padding: 0 10px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--swatches-on-surface-neutral);
  text-align: center;
  background-color: var(--swatches-base-subtle);
  border: 1px solid var(--swatches-border-base-input);
  border-radius: 0;
  position: relative;
}

.form-group .input-group .btn {
  position: relative;
  min-width: 40px;
  padding: 0 10px;
  background-color: var(--swatches-base-subtle);
  border-radius: 0;
  cursor: pointer;
}

.form-group .input-group .btn i {
  width: 16px;
  height: 16px;
}

.form-group .input-group .prepend {
  border: none;
}

.form-group .input-group .prepend:hover ~ .dropdown,
.form-group .input-group .prepend:hover + .dropdown {
  display: flex;
}

.form-group .input-group .prepend.pill {
  border-top-left-radius: 1000px;
  border-bottom-left-radius: 1000px;
}

.form-group .input-group .prepend.round {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.form-group .input-group .prepend .icon {
  width: 16px;
  height: 16px;
}

.form-group .input-group .prepend i.flag {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.form-group .input-group .prepend + .form-control,
.form-group .input-group .input-group-prepend + .form-control,
.form-group .input-group .btn.prepend + .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

.form-group .input-group .input-group-text + .input-prepend,
.form-group .input-group .btn + .input-prepend,
.form-group .input-group .prepend + .input-prepend {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

.form-group .input-group .btn-outline-secondary {
  color: var(--swatches-on-surface-neutral);
  border-color: var(--swatches-border-base-input);
}

.form-group .input-group .btn-outline-secondary:hover {
  color: var(--swatches-on-surface-neutral-alt);
  background-color: var(--swatches-base-hover);
  border-color: var(--swatches-border-base-focus);
}

.form-group .input-group .input-group-text:focus,
.form-group .input-group .btn:focus {
  border-color: var(--swatches-border-base-focus);
  outline: none;
}

.form-group .input-group.small .form-control,
.form-group .input-group.small .btn {
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
}

.form-group .input-group.small .input-group-text {
  font-size: 14px;
}

.form-group .input-group.large .form-control,
.form-group .input-group.large .btn {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
}

.form-group .input-group.large .input-group-text {
  font-size: 18px;
  height: 46px;
}

.form-group .input-group.success:disabled, .form-group .input-group.warning:disabled, .form-group .input-group.error:disabled, .form-group .input-group.invert:disabled {
  opacity: 0.4;
  outline: none;
}

.form-group .input-group.success .input-group-text,
.form-group .input-group.success .btn, .form-group .input-group.warning .input-group-text,
.form-group .input-group.warning .btn, .form-group .input-group.error .input-group-text,
.form-group .input-group.error .btn, .form-group .input-group.invert .input-group-text,
.form-group .input-group.invert .btn {
  background-color: var(--swatches-base-subtle);
}

.form-group .input-group.success .btn:hover, .form-group .input-group.warning .btn:hover, .form-group .input-group.error .btn:hover, .form-group .input-group.invert .btn:hover {
  background-color: var(--swatches-base-subtle);
}

.form-group .input-group.success {
  border-color: var(--swatches-success-default);
}

.form-group .input-group.success:hover {
  border-color: var(--swatches-success-hover);
  outline: 1px solid var(--swatches-success-hover);
}

.form-group .input-group.success:active {
  border-color: var(--swatches-border-success-focus);
  outline: 1px solid var(--swatches-border-success-focus);
}

.form-group .input-group.success:focus, .form-group .input-group.success:focus-within {
  border-width: 2px;
  border-color: var(--swatches-border-success-focus);
  outline: 1px solid var(--swatches-border-success-focus);
}

.form-group .input-group.success::selection {
  border-color: var(--swatches-success-selected);
  outline: 1px solid var(--swatches-success-selected);
  background-color: var(--swatches-success-hover);
  color: var(--swatches-on-success);
}

.form-group .input-group.success .input-group-text {
  border-color: var(--swatches-success-default);
  border-right: 1px solid var(--swatches-border-base-input);
}

.form-group .input-group.success .form-control {
  border-color: var(--swatches-success-default);
}

.form-group .input-group.success .form-control + .form-text {
  color: var(--swatches-success-default);
}

.form-group .input-group.success .input-group-text,
.form-group .input-group.success .btn {
  border-color: var(--swatches-success-default);
}

.form-group .input-group.success + .form-text {
  color: var(--swatches-success-default);
}

.form-group .input-group.warning {
  border-color: var(--swatches-warning-default);
}

.form-group .input-group.warning:hover {
  border-color: var(--swatches-warning-hover);
  outline: 1px solid var(--swatches-warning-hover);
}

.form-group .input-group.warning:active {
  border-color: var(--swatches-border-warning-focus);
  outline: 1px solid var(--swatches-border-warning-focus);
}

.form-group .input-group.warning:focus, .form-group .input-group.warning:focus-within {
  border-width: 2px;
  border-color: var(--swatches-border-warning-focus);
  outline: 1px solid var(--swatches-border-warning-focus);
}

.form-group .input-group.warning::selection {
  border-color: var(--swatches-warning-selected);
  outline: 1px solid var(--swatches-warning-selected);
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-warning);
}

.form-group .input-group.warning .input-group-text {
  border-color: var(--swatches-warning-default);
  border-right: 1px solid var(--swatches-border-base-input);
}

.form-group .input-group.warning .form-control {
  border-color: var(--swatches-warning-default);
}

.form-group .input-group.warning .form-control + .form-text {
  color: var(--swatches-success-default);
}

.form-group .input-group.warning .input-group-text,
.form-group .input-group.warning .btn {
  border-color: var(--swatches-warning-default);
}

.form-group .input-group.warning + .form-text {
  color: var(--swatches-warning-default);
}

.form-group .input-group.error {
  border-color: var(--swatches-error-default);
}

.form-group .input-group.error:hover {
  border-color: var(--swatches-error-hover);
  outline: 1px solid var(--swatches-error-hover);
}

.form-group .input-group.error:active {
  border-color: var(--swatches-border-error-focus);
  outline: 1px solid var(--swatches-border-error-focus);
}

.form-group .input-group.error:focus, .form-group .input-group.error:focus-within {
  border-width: 2px;
  border-color: var(--swatches-border-error-focus);
  outline: 1px solid var(--swatches-border-error-focus);
}

.form-group .input-group.error::selection {
  border-color: var(--swatches-error-selected);
  outline: 1px solid var(--swatches-error-selected);
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-error);
}

.form-group .input-group.error .input-group-text {
  border-right: 1px solid var(--swatches-border-base-input);
}

.form-group .input-group.error .form-control {
  border-color: var(--swatches-error-default);
}

.form-group .input-group.error .form-control + .form-text {
  color: var(--swatches-success-default);
}

.form-group .input-group.error .input-group-text,
.form-group .input-group.error .btn {
  border-color: var(--swatches-error-default);
}

.form-group .input-group.error + .form-text {
  color: var(--swatches-error-default);
}

.form-group .input-group.invert .form-control {
  border: 1px solid var(--swatches-border-base-input);
  background-color: var(--swatches-base-default);
  outline: none;
}

.form-group .input-group.invert .form-control:hover {
  border-color: var(--swatches-base-hover);
  outline: 1px solid var(--swatches-base-hover);
}

.form-group .input-group.invert .form-control:active {
  border-color: var(--swatches-base-active);
  outline: 1px solid var(--swatches-base-active);
}

.form-group .input-group.invert .form-control:focus {
  border-color: var(--swatches-base-active);
  outline: 1px solid var(--swatches-base-active);
}

.form-group .input-group.invert .form-control::selection {
  border-color: var(--swatches-base-selected);
  outline: 1px solid var(--swatches-base-selected);
  background-color: var(--swatches-base-selected);
}

.form-group .input-group.invert .form-control + .form-text {
  color: var(--swatches-success-default);
}

.form-group .input-group.invert .input-group-text,
.form-group .input-group.invert .btn {
  border-color: var(--swatches-border-base-input);
}

.form-group .input-group.invert + .form-text {
  color: var(--swatches-on-surface-invert);
}

.form-group .input-group-round .form-control,
.form-group .input-group-round .input-group-text,
.form-group .input-group-round .btn, .form-group .input-group-pill .form-control,
.form-group .input-group-pill .input-group-text,
.form-group .input-group-pill .btn {
  border-radius: 0;
}

.form-group .input-group-round .form-control:first-child,
.form-group .input-group-round .input-group-text:first-child,
.form-group .input-group-round .btn:first-child, .form-group .input-group-pill .form-control:first-child,
.form-group .input-group-pill .input-group-text:first-child,
.form-group .input-group-pill .btn:first-child {
  border-top-left-radius: var(--input-radius);
  border-bottom-left-radius: var(--input-radius);
}

.form-group .input-group-round .form-control:last-child,
.form-group .input-group-round .input-group-text:last-child,
.form-group .input-group-round .btn:last-child, .form-group .input-group-pill .form-control:last-child,
.form-group .input-group-pill .input-group-text:last-child,
.form-group .input-group-pill .btn:last-child {
  border-top-right-radius: var(--input-radius);
  border-bottom-right-radius: var(--input-radius);
}

.form-group .input-group-round {
  border-radius: 8px;
}

.form-group .select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.form-group .select-wrapper .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px !important;
  height: 24px !important;
  pointer-events: none;
}

.form-group .select-wrapper .select {
  border: 1px solid var(--swatches-border-base-input);
}

.form-group .select-wrapper .select:hover {
  border-color: var(--swatches-base-hover-alt);
}

.form-group .select-wrapper .select:active, .form-group .select-wrapper .select:focus, .form-group .select-wrapper .select:focus-within {
  border-color: var(--swatches-base-hover-alt);
  outline: 1px solid var(--swatches-base-hover-alt);
}

.form-group .select-wrapper .select::selection {
  outline: 1px solid var(--swatches-base-hover-alt);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-surface-alt);
}

.form-group .select-wrapper .select.success, .form-group .select-wrapper .select.warning, .form-group .select-wrapper .select.error, .form-group .select-wrapper .select.invert {
  background-color: var(--swatches-base-default);
}

.form-group .select-wrapper .select.success:hover, .form-group .select-wrapper .select.success:active, .form-group .select-wrapper .select.success:focus, .form-group .select-wrapper .select.warning:hover, .form-group .select-wrapper .select.warning:active, .form-group .select-wrapper .select.warning:focus, .form-group .select-wrapper .select.error:hover, .form-group .select-wrapper .select.error:active, .form-group .select-wrapper .select.error:focus, .form-group .select-wrapper .select.invert:hover, .form-group .select-wrapper .select.invert:active, .form-group .select-wrapper .select.invert:focus {
  outline: none;
}

.form-group .select-wrapper .select.success {
  border-color: var(--swatches-success-default);
}

.form-group .select-wrapper .select.success:hover {
  border: 2px solid var(--swatches-success-hover);
}

.form-group .select-wrapper .select.success:active, .form-group .select-wrapper .select.success:focus {
  border-color: var(--swatches-border-success-focus);
}

.form-group .select-wrapper .select.success::selection {
  border-color: var(--swatches-success-selected);
  background-color: var(--swatches-success-hover);
  color: var(--swatches-on-success);
}

.form-group .select-wrapper .select.success + .form-text {
  color: var(--swatches-success-default);
}

.form-group .select-wrapper .select.warning {
  border-color: var(--swatches-warning-default);
}

.form-group .select-wrapper .select.warning:hover {
  border-color: var(--swatches-warning-hover);
}

.form-group .select-wrapper .select.warning:active, .form-group .select-wrapper .select.warning:focus {
  border-color: var(--swatches-border-warning-focus);
}

.form-group .select-wrapper .select.warning::selection {
  border-color: var(--swatches-warning-selected);
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-warning);
}

.form-group .select-wrapper .select.warning + .form-text {
  color: var(--swatches-warning-default);
}

.form-group .select-wrapper .select.error {
  border-color: var(--swatches-error-default);
}

.form-group .select-wrapper .select.error:hover {
  border-color: var(--swatches-error-hover);
}

.form-group .select-wrapper .select.error:active, .form-group .select-wrapper .select.error:focus {
  border-color: var(--swatches-border-error-focus);
}

.form-group .select-wrapper .select.error::selection {
  border-color: var(--swatches-error-selected);
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-error);
}

.form-group .select-wrapper .select.error + .form-text {
  color: var(--swatches-error-default);
}

.form-group .select-wrapper .select.invert {
  border-color: var(--swatches-border-base-input);
}

.form-group .select-wrapper .select.invert:hover {
  border-color: var(--swatches-base-hover);
}

.form-group .select-wrapper .select.invert:active, .form-group .select-wrapper .select.invert:focus {
  border-color: var(--swatches-base-active);
}

.form-group .select-wrapper .select.invert::selection {
  border-color: var(--swatches-base-selected);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-on-surface-base-alt);
}

.form-group .select-wrapper .select.invert + .form-text {
  color: var(--swatches-on-surface-invert);
}

.form-group .select-wrapper .chip-overlay {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 4;
}

.form-group-pill {
  border-radius: 1000px;
}

textarea.form-area {
  min-height: 100px;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 40px;
  padding: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--swatches-on-surface-neutral);
  background-color: var(--swatches-base-default);
  border: 1px solid var(--swatches-border-base-input);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-shadow: none;
}

textarea.form-area.round {
  border-radius: 8px;
}

textarea.form-area:hover {
  border-color: var(--swatches-base-hover-alt);
}

textarea.form-area:active, textarea.form-area:focus, textarea.form-area:focus-within {
  border-color: var(--swatches-base-hover-alt);
  outline: 1px solid var(--swatches-base-hover-alt);
}

textarea.form-area::selection {
  outline: 1px solid var(--swatches-base-hover-alt);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-surface-alt);
}

textarea.form-area.success, textarea.form-area.warning, textarea.form-area.error, textarea.form-area.invert {
  background-color: var(--swatches-base-default);
}

textarea.form-area.success:hover, textarea.form-area.success:active, textarea.form-area.success:focus, textarea.form-area.warning:hover, textarea.form-area.warning:active, textarea.form-area.warning:focus, textarea.form-area.error:hover, textarea.form-area.error:active, textarea.form-area.error:focus, textarea.form-area.invert:hover, textarea.form-area.invert:active, textarea.form-area.invert:focus {
  outline: none;
}

textarea.form-area.success {
  border-color: var(--swatches-success-default);
}

textarea.form-area.success:hover {
  border: 2px solid var(--swatches-success-hover);
}

textarea.form-area.success:active, textarea.form-area.success:focus {
  border-color: var(--swatches-border-success-focus);
}

textarea.form-area.success::selection {
  border-color: var(--swatches-success-selected);
  background-color: var(--swatches-success-hover);
  color: var(--swatches-on-success);
}

textarea.form-area.success + .form-text {
  color: var(--swatches-success-default);
}

textarea.form-area.warning {
  border-color: var(--swatches-warning-default);
}

textarea.form-area.warning:hover {
  border-color: var(--swatches-warning-hover);
}

textarea.form-area.warning:active, textarea.form-area.warning:focus {
  border-color: var(--swatches-border-warning-focus);
}

textarea.form-area.warning::selection {
  border-color: var(--swatches-warning-selected);
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-warning);
}

textarea.form-area.warning + .form-text {
  color: var(--swatches-warning-default);
}

textarea.form-area.error {
  border-color: var(--swatches-error-default);
}

textarea.form-area.error:hover {
  border-color: var(--swatches-error-hover);
}

textarea.form-area.error:active, textarea.form-area.error:focus {
  border-color: var(--swatches-border-error-focus);
}

textarea.form-area.error::selection {
  border-color: var(--swatches-error-selected);
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-error);
}

textarea.form-area.error + .form-text {
  color: var(--swatches-error-default);
}

textarea.form-area.resize-none {
  resize: none;
}

textarea.form-area.resize-vertical {
  resize: vertical;
}

textarea.form-area.resize-horizontal {
  resize: horizontal;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-group .form-label {
    font-size: 14px;
  }
  .form-group .form-text {
    font-size: 14px;
  }
  .form-group .form-control {
    font-size: 14px;
  }
  .form-group .form-control.small {
    font-size: 12px;
  }
  .form-group .form-control.large {
    font-size: 16px;
  }
  .form-group .form-control.round {
    border-radius: 4px;
  }
  .form-group .input-group.form-control {
    border: 0;
  }
  .form-group .input-group.file::after {
    font-size: 12px;
  }
  .form-group .input-group .input-group-text {
    font-size: 14px;
  }
  .form-group .input-group.small .form-control,
  .form-group .input-group.small .btn {
    font-size: 12px;
  }
  .form-group .input-group.small .input-group-text {
    font-size: 12px;
  }
  .form-group .input-group.large .form-control,
  .form-group .input-group.large .btn {
    font-size: 16px;
  }
  .form-group .input-group.large .input-group-text {
    font-size: 16px;
  }
  .form-group .input-group-round {
    border-radius: 4px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .form-group .form-label {
    font-size: 14px;
  }
  .form-group .form-text {
    font-size: 14px;
  }
  .form-group .form-control {
    font-size: 14px;
  }
  .form-group .form-control.small {
    font-size: 12px;
  }
  .form-group .form-control.large {
    font-size: 16px;
  }
  .form-group .input-group.file::after {
    font-size: 12px;
  }
  .form-group .input-group .input-group-text {
    font-size: 14px;
  }
  .form-group .input-group.small .form-control,
  .form-group .input-group.small .btn {
    font-size: 12px;
  }
  .form-group .input-group.small .input-group-text {
    font-size: 12px;
  }
  .form-group .input-group.large .form-control,
  .form-group .input-group.large .btn {
    font-size: 16px;
  }
  .form-group .input-group.large .input-group-text {
    font-size: 16px;
  }
  .form-group .input-group-round {
    border-radius: 4px;
  }
}

.select-error-text {
  display: block;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--swatches-on-surface-neutral);
}

.select-error-text.error {
  color: var(--swatches-error-default);
}

.select-error-text.success {
  color: var(--swatches-success-default);
}

.select-error-text.warning {
  color: var(--swatches-warning-default);
}

.select-error-text.invert {
  color: var(--swatches-on-surface-invert);
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.logo.small {
  width: 107px;
  height: 20px;
}

.logo.medium {
  width: 160px;
  height: 30px;
}

.logo.large {
  width: 214px;
  height: 40px;
}

.logo.logo-light {
  background-image: var(--logo-light);
}

.logo.logo-dark {
  background-image: var(--logo-dark);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .logo.small {
    width: 64px;
    height: 12px;
  }
  .logo.medium {
    width: 107px;
    height: 20px;
  }
  .logo.large {
    width: 150px;
    height: 28px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .logo.small {
    width: 64px;
    height: 12px;
  }
  .logo.medium {
    width: 107px;
    height: 20px;
  }
  .logo.large {
    width: 150px;
    height: 28px;
  }
}

.m-0 {
  margin: 0;
}

.mx-0 {
  margin-inline: 0;
}

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

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

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

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

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

.m-xxs {
  margin: 2px;
}

.mx-xxs {
  margin-inline: 2px;
}

.my-xxs {
  margin-top: 2px;
  margin-bottom: 2px;
}

.mt-xxs {
  margin-top: 2px;
}

.mr-xxs {
  margin-right: 2px;
}

.mb-xxs {
  margin-bottom: 2px;
}

.ml-xxs {
  margin-left: 2px;
}

.m-xs {
  margin: 4px;
}

.mx-xs {
  margin-inline: 4px;
}

.my-xs {
  margin-top: 4px;
  margin-bottom: 4px;
}

.mt-xs {
  margin-top: 4px;
}

.mr-xs {
  margin-right: 4px;
}

.mb-xs {
  margin-bottom: 4px;
}

.ml-xs {
  margin-left: 4px;
}

.m-sm {
  margin: 8px;
}

.mx-sm {
  margin-inline: 8px;
}

.my-sm {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mt-sm {
  margin-top: 8px;
}

.mr-sm {
  margin-right: 8px;
}

.mb-sm {
  margin-bottom: 8px;
}

.ml-sm {
  margin-left: 8px;
}

.m-md {
  margin: 16px;
}

.mx-md {
  margin-inline: 16px;
}

.my-md {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mt-md {
  margin-top: 16px;
}

.mr-md {
  margin-right: 16px;
}

.mb-md {
  margin-bottom: 16px;
}

.ml-md {
  margin-left: 16px;
}

.m-lg {
  margin: 24px;
}

.mx-lg {
  margin-inline: 24px;
}

.my-lg {
  margin-top: 24px;
  margin-bottom: 24px;
}

.mt-lg {
  margin-top: 24px;
}

.mr-lg {
  margin-right: 24px;
}

.mb-lg {
  margin-bottom: 24px;
}

.ml-lg {
  margin-left: 24px;
}

.m-xl {
  margin: 32px;
}

.mx-xl {
  margin-inline: 32px;
}

.my-xl {
  margin-top: 32px;
  margin-bottom: 32px;
}

.mt-xl {
  margin-top: 32px;
}

.mr-xl {
  margin-right: 32px;
}

.mb-xl {
  margin-bottom: 32px;
}

.ml-xl {
  margin-left: 32px;
}

.m-xxl {
  margin: 40px;
}

.mx-xxl {
  margin-inline: 40px;
}

.my-xxl {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mt-xxl {
  margin-top: 40px;
}

.mr-xxl {
  margin-right: 40px;
}

.mb-xxl {
  margin-bottom: 40px;
}

.ml-xxl {
  margin-left: 40px;
}

.m-hu {
  margin: 48px;
}

.mx-hu {
  margin-inline: 48px;
}

.my-hu {
  margin-top: 48px;
  margin-bottom: 48px;
}

.mt-hu {
  margin-top: 48px;
}

.mr-hu {
  margin-right: 48px;
}

.mb-hu {
  margin-bottom: 48px;
}

.ml-hu {
  margin-left: 48px;
}

.m-xh {
  margin: 56px;
}

.mx-xh {
  margin-inline: 56px;
}

.my-xh {
  margin-top: 56px;
  margin-bottom: 56px;
}

.mt-xh {
  margin-top: 56px;
}

.mr-xh {
  margin-right: 56px;
}

.mb-xh {
  margin-bottom: 56px;
}

.ml-xh {
  margin-left: 56px;
}

.m-xxh {
  margin: 64px;
}

.mx-xxh {
  margin-inline: 64px;
}

.my-xxh {
  margin-top: 64px;
  margin-bottom: 64px;
}

.mt-xxh {
  margin-top: 64px;
}

.mr-xxh {
  margin-right: 64px;
}

.mb-xxh {
  margin-bottom: 64px;
}

.ml-xxh {
  margin-left: 64px;
}

.m-xxxh {
  margin: 72px;
}

.mx-xxxh {
  margin-inline: 72px;
}

.my-xxxh {
  margin-top: 72px;
  margin-bottom: 72px;
}

.mt-xxxh {
  margin-top: 72px;
}

.mr-xxxh {
  margin-right: 72px;
}

.mb-xxxh {
  margin-bottom: 72px;
}

.ml-xxxh {
  margin-left: 72px;
}

.m-gi {
  margin: 80px;
}

.mx-gi {
  margin-inline: 80px;
}

.my-gi {
  margin-top: 80px;
  margin-bottom: 80px;
}

.mt-gi {
  margin-top: 80px;
}

.mr-gi {
  margin-right: 80px;
}

.mb-gi {
  margin-bottom: 80px;
}

.ml-gi {
  margin-left: 80px;
}

.m-xg {
  margin: 88px;
}

.mx-xg {
  margin-inline: 88px;
}

.my-xg {
  margin-top: 88px;
  margin-bottom: 88px;
}

.mt-xg {
  margin-top: 88px;
}

.mr-xg {
  margin-right: 88px;
}

.mb-xg {
  margin-bottom: 88px;
}

.ml-xg {
  margin-left: 88px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .m-0 {
    margin: 0;
  }
  .mx-0 {
    margin-inline: 0;
  }
  .my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .mt-0 {
    margin-top: 0;
  }
  .mr-0 {
    margin-right: 0;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .ml-0 {
    margin-left: 0;
  }
  .m-xxs {
    margin: 2px;
  }
  .mx-xxs {
    margin-inline: 2px;
  }
  .my-xxs {
    margin-top: 2px;
    margin-bottom: 2px;
  }
  .mt-xxs {
    margin-top: 2px;
  }
  .mr-xxs {
    margin-right: 2px;
  }
  .mb-xxs {
    margin-bottom: 2px;
  }
  .ml-xxs {
    margin-left: 2px;
  }
  .m-xs {
    margin: 4px;
  }
  .mx-xs {
    margin-inline: 4px;
  }
  .my-xs {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .mt-xs {
    margin-top: 4px;
  }
  .mr-xs {
    margin-right: 4px;
  }
  .mb-xs {
    margin-bottom: 4px;
  }
  .ml-xs {
    margin-left: 4px;
  }
  .m-sm {
    margin: 8px;
  }
  .mx-sm {
    margin-inline: 8px;
  }
  .my-sm {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .mt-sm {
    margin-top: 8px;
  }
  .mr-sm {
    margin-right: 8px;
  }
  .mb-sm {
    margin-bottom: 8px;
  }
  .ml-sm {
    margin-left: 8px;
  }
  .m-md {
    margin: 12px;
  }
  .mx-md {
    margin-inline: 12px;
  }
  .my-md {
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .mt-md {
    margin-top: 12px;
  }
  .mr-md {
    margin-right: 12px;
  }
  .mb-md {
    margin-bottom: 12px;
  }
  .ml-md {
    margin-left: 12px;
  }
  .m-lg {
    margin: 20px;
  }
  .mx-lg {
    margin-inline: 20px;
  }
  .my-lg {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .mt-lg {
    margin-top: 20px;
  }
  .mr-lg {
    margin-right: 20px;
  }
  .mb-lg {
    margin-bottom: 20px;
  }
  .ml-lg {
    margin-left: 20px;
  }
  .m-xl {
    margin: 24px;
  }
  .mx-xl {
    margin-inline: 24px;
  }
  .my-xl {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .mt-xl {
    margin-top: 24px;
  }
  .mr-xl {
    margin-right: 24px;
  }
  .mb-xl {
    margin-bottom: 24px;
  }
  .ml-xl {
    margin-left: 24px;
  }
  .m-xxl {
    margin: 32px;
  }
  .mx-xxl {
    margin-inline: 32px;
  }
  .my-xxl {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .mt-xxl {
    margin-top: 32px;
  }
  .mr-xxl {
    margin-right: 32px;
  }
  .mb-xxl {
    margin-bottom: 32px;
  }
  .ml-xxl {
    margin-left: 32px;
  }
  .m-hu {
    margin: 40px;
  }
  .mx-hu {
    margin-inline: 40px;
  }
  .my-hu {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .mt-hu {
    margin-top: 40px;
  }
  .mr-hu {
    margin-right: 40px;
  }
  .mb-hu {
    margin-bottom: 40px;
  }
  .ml-hu {
    margin-left: 40px;
  }
  .m-xh {
    margin: 48px;
  }
  .mx-xh {
    margin-inline: 48px;
  }
  .my-xh {
    margin-top: 48px;
    margin-bottom: 48px;
  }
  .mt-xh {
    margin-top: 48px;
  }
  .mr-xh {
    margin-right: 48px;
  }
  .mb-xh {
    margin-bottom: 48px;
  }
  .ml-xh {
    margin-left: 48px;
  }
  .m-xxh {
    margin: 56px;
  }
  .mx-xxh {
    margin-inline: 56px;
  }
  .my-xxh {
    margin-top: 56px;
    margin-bottom: 56px;
  }
  .mt-xxh {
    margin-top: 56px;
  }
  .mr-xxh {
    margin-right: 56px;
  }
  .mb-xxh {
    margin-bottom: 56px;
  }
  .ml-xxh {
    margin-left: 56px;
  }
  .m-xxxh {
    margin: 64px;
  }
  .mx-xxxh {
    margin-inline: 64px;
  }
  .my-xxxh {
    margin-top: 64px;
    margin-bottom: 64px;
  }
  .mt-xxxh {
    margin-top: 64px;
  }
  .mr-xxxh {
    margin-right: 64px;
  }
  .mb-xxxh {
    margin-bottom: 64px;
  }
  .ml-xxxh {
    margin-left: 64px;
  }
  .m-gi {
    margin: 72px;
  }
  .mx-gi {
    margin-inline: 72px;
  }
  .my-gi {
    margin-top: 72px;
    margin-bottom: 72px;
  }
  .mt-gi {
    margin-top: 72px;
  }
  .mr-gi {
    margin-right: 72px;
  }
  .mb-gi {
    margin-bottom: 72px;
  }
  .ml-gi {
    margin-left: 72px;
  }
  .m-xg {
    margin: 80px;
  }
  .mx-xg {
    margin-inline: 80px;
  }
  .my-xg {
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .mt-xg {
    margin-top: 80px;
  }
  .mr-xg {
    margin-right: 80px;
  }
  .mb-xg {
    margin-bottom: 80px;
  }
  .ml-xg {
    margin-left: 80px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .m-0 {
    margin: 0;
  }
  .mx-0 {
    margin-inline: 0;
  }
  .my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .mt-0 {
    margin-top: 0;
  }
  .mr-0 {
    margin-right: 0;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .ml-0 {
    margin-left: 0;
  }
  .m-xxs {
    margin: 2px;
  }
  .mx-xxs {
    margin-inline: 2px;
  }
  .my-xxs {
    margin-top: 2px;
    margin-bottom: 2px;
  }
  .mt-xxs {
    margin-top: 2px;
  }
  .mr-xxs {
    margin-right: 2px;
  }
  .mb-xxs {
    margin-bottom: 2px;
  }
  .ml-xxs {
    margin-left: 2px;
  }
  .m-xs {
    margin: 4px;
  }
  .mx-xs {
    margin-inline: 4px;
  }
  .my-xs {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .mt-xs {
    margin-top: 4px;
  }
  .mr-xs {
    margin-right: 4px;
  }
  .mb-xs {
    margin-bottom: 4px;
  }
  .ml-xs {
    margin-left: 4px;
  }
  .m-sm {
    margin: 8px;
  }
  .mx-sm {
    margin-inline: 8px;
  }
  .my-sm {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .mt-sm {
    margin-top: 8px;
  }
  .mr-sm {
    margin-right: 8px;
  }
  .mb-sm {
    margin-bottom: 8px;
  }
  .ml-sm {
    margin-left: 8px;
  }
  .m-md {
    margin: 8px;
  }
  .mx-md {
    margin-inline: 8px;
  }
  .my-md {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .mt-md {
    margin-top: 8px;
  }
  .mr-md {
    margin-right: 8px;
  }
  .mb-md {
    margin-bottom: 8px;
  }
  .ml-md {
    margin-left: 8px;
  }
  .m-lg {
    margin: 16px;
  }
  .mx-lg {
    margin-inline: 16px;
  }
  .my-lg {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  .mt-lg {
    margin-top: 16px;
  }
  .mr-lg {
    margin-right: 16px;
  }
  .mb-lg {
    margin-bottom: 16px;
  }
  .ml-lg {
    margin-left: 16px;
  }
  .m-xl {
    margin: 20px;
  }
  .mx-xl {
    margin-inline: 20px;
  }
  .my-xl {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .mt-xl {
    margin-top: 20px;
  }
  .mr-xl {
    margin-right: 20px;
  }
  .mb-xl {
    margin-bottom: 20px;
  }
  .ml-xl {
    margin-left: 20px;
  }
  .m-xxl {
    margin: 24px;
  }
  .mx-xxl {
    margin-inline: 24px;
  }
  .my-xxl {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .mt-xxl {
    margin-top: 24px;
  }
  .mr-xxl {
    margin-right: 24px;
  }
  .mb-xxl {
    margin-bottom: 24px;
  }
  .ml-xxl {
    margin-left: 24px;
  }
  .m-hu {
    margin: 32px;
  }
  .mx-hu {
    margin-inline: 32px;
  }
  .my-hu {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .mt-hu {
    margin-top: 32px;
  }
  .mr-hu {
    margin-right: 32px;
  }
  .mb-hu {
    margin-bottom: 32px;
  }
  .ml-hu {
    margin-left: 32px;
  }
  .m-xh {
    margin: 40px;
  }
  .mx-xh {
    margin-inline: 40px;
  }
  .my-xh {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .mt-xh {
    margin-top: 40px;
  }
  .mr-xh {
    margin-right: 40px;
  }
  .mb-xh {
    margin-bottom: 40px;
  }
  .ml-xh {
    margin-left: 40px;
  }
  .m-xxh {
    margin: 48px;
  }
  .mx-xxh {
    margin-inline: 48px;
  }
  .my-xxh {
    margin-top: 48px;
    margin-bottom: 48px;
  }
  .mt-xxh {
    margin-top: 48px;
  }
  .mr-xxh {
    margin-right: 48px;
  }
  .mb-xxh {
    margin-bottom: 48px;
  }
  .ml-xxh {
    margin-left: 48px;
  }
  .m-xxxh {
    margin: 56px;
  }
  .mx-xxxh {
    margin-inline: 56px;
  }
  .my-xxxh {
    margin-top: 56px;
    margin-bottom: 56px;
  }
  .mt-xxxh {
    margin-top: 56px;
  }
  .mr-xxxh {
    margin-right: 56px;
  }
  .mb-xxxh {
    margin-bottom: 56px;
  }
  .ml-xxxh {
    margin-left: 56px;
  }
  .m-gi {
    margin: 64px;
  }
  .mx-gi {
    margin-inline: 64px;
  }
  .my-gi {
    margin-top: 64px;
    margin-bottom: 64px;
  }
  .mt-gi {
    margin-top: 64px;
  }
  .mr-gi {
    margin-right: 64px;
  }
  .mb-gi {
    margin-bottom: 64px;
  }
  .ml-gi {
    margin-left: 64px;
  }
  .m-xg {
    margin: 72px;
  }
  .mx-xg {
    margin-inline: 72px;
  }
  .my-xg {
    margin-top: 72px;
    margin-bottom: 72px;
  }
  .mt-xg {
    margin-top: 72px;
  }
  .mr-xg {
    margin-right: 72px;
  }
  .mb-xg {
    margin-bottom: 72px;
  }
  .ml-xg {
    margin-left: 72px;
  }
}

.m-0 {
  margin: 0px !important;
}

.mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.m-1 {
  margin: 4px !important;
}

.mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mr-1 {
  margin-right: 4px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.ml-1 {
  margin-left: 4px !important;
}

.m-2 {
  margin: 8px !important;
}

.mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mr-2 {
  margin-right: 8px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.ml-2 {
  margin-left: 8px !important;
}

.m-3 {
  margin: 12px !important;
}

.mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mr-3 {
  margin-right: 12px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.ml-3 {
  margin-left: 12px !important;
}

.m-4 {
  margin: 16px !important;
}

.mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.mr-4 {
  margin-right: 16px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

.ml-4 {
  margin-left: 16px !important;
}

.m-5 {
  margin: 20px !important;
}

.mx-5 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.my-5 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.mt-5 {
  margin-top: 20px !important;
}

.mr-5 {
  margin-right: 20px !important;
}

.mb-5 {
  margin-bottom: 20px !important;
}

.ml-5 {
  margin-left: 20px !important;
}

.m-6 {
  margin: 24px !important;
}

.mx-6 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.my-6 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.mt-6 {
  margin-top: 24px !important;
}

.mr-6 {
  margin-right: 24px !important;
}

.mb-6 {
  margin-bottom: 24px !important;
}

.ml-6 {
  margin-left: 24px !important;
}

.m-7 {
  margin: 28px !important;
}

.mx-7 {
  margin-left: 28px !important;
  margin-right: 28px !important;
}

.my-7 {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}

.mt-7 {
  margin-top: 28px !important;
}

.mr-7 {
  margin-right: 28px !important;
}

.mb-7 {
  margin-bottom: 28px !important;
}

.ml-7 {
  margin-left: 28px !important;
}

.m-8 {
  margin: 32px !important;
}

.mx-8 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.my-8 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.mt-8 {
  margin-top: 32px !important;
}

.mr-8 {
  margin-right: 32px !important;
}

.mb-8 {
  margin-bottom: 32px !important;
}

.ml-8 {
  margin-left: 32px !important;
}

.m-9 {
  margin: 36px !important;
}

.mx-9 {
  margin-left: 36px !important;
  margin-right: 36px !important;
}

.my-9 {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}

.mt-9 {
  margin-top: 36px !important;
}

.mr-9 {
  margin-right: 36px !important;
}

.mb-9 {
  margin-bottom: 36px !important;
}

.ml-9 {
  margin-left: 36px !important;
}

.m-10 {
  margin: 40px !important;
}

.mx-10 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.my-10 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.mt-10 {
  margin-top: 40px !important;
}

.mr-10 {
  margin-right: 40px !important;
}

.mb-10 {
  margin-bottom: 40px !important;
}

.ml-10 {
  margin-left: 40px !important;
}

.m-11 {
  margin: 44px !important;
}

.mx-11 {
  margin-left: 44px !important;
  margin-right: 44px !important;
}

.my-11 {
  margin-top: 44px !important;
  margin-bottom: 44px !important;
}

.mt-11 {
  margin-top: 44px !important;
}

.mr-11 {
  margin-right: 44px !important;
}

.mb-11 {
  margin-bottom: 44px !important;
}

.ml-11 {
  margin-left: 44px !important;
}

.m-12 {
  margin: 48px !important;
}

.mx-12 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.my-12 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.mt-12 {
  margin-top: 48px !important;
}

.mr-12 {
  margin-right: 48px !important;
}

.mb-12 {
  margin-bottom: 48px !important;
}

.ml-12 {
  margin-left: 48px !important;
}

.m-13 {
  margin: 52px !important;
}

.mx-13 {
  margin-left: 52px !important;
  margin-right: 52px !important;
}

.my-13 {
  margin-top: 52px !important;
  margin-bottom: 52px !important;
}

.mt-13 {
  margin-top: 52px !important;
}

.mr-13 {
  margin-right: 52px !important;
}

.mb-13 {
  margin-bottom: 52px !important;
}

.ml-13 {
  margin-left: 52px !important;
}

.m-14 {
  margin: 56px !important;
}

.mx-14 {
  margin-left: 56px !important;
  margin-right: 56px !important;
}

.my-14 {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
}

.mt-14 {
  margin-top: 56px !important;
}

.mr-14 {
  margin-right: 56px !important;
}

.mb-14 {
  margin-bottom: 56px !important;
}

.ml-14 {
  margin-left: 56px !important;
}

.m-15 {
  margin: 60px !important;
}

.mx-15 {
  margin-left: 60px !important;
  margin-right: 60px !important;
}

.my-15 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.mt-15 {
  margin-top: 60px !important;
}

.mr-15 {
  margin-right: 60px !important;
}

.mb-15 {
  margin-bottom: 60px !important;
}

.ml-15 {
  margin-left: 60px !important;
}

.m-16 {
  margin: 64px !important;
}

.mx-16 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.my-16 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

.mt-16 {
  margin-top: 64px !important;
}

.mr-16 {
  margin-right: 64px !important;
}

.mb-16 {
  margin-bottom: 64px !important;
}

.ml-16 {
  margin-left: 64px !important;
}

.m-17 {
  margin: 68px !important;
}

.mx-17 {
  margin-left: 68px !important;
  margin-right: 68px !important;
}

.my-17 {
  margin-top: 68px !important;
  margin-bottom: 68px !important;
}

.mt-17 {
  margin-top: 68px !important;
}

.mr-17 {
  margin-right: 68px !important;
}

.mb-17 {
  margin-bottom: 68px !important;
}

.ml-17 {
  margin-left: 68px !important;
}

.m-18 {
  margin: 72px !important;
}

.mx-18 {
  margin-left: 72px !important;
  margin-right: 72px !important;
}

.my-18 {
  margin-top: 72px !important;
  margin-bottom: 72px !important;
}

.mt-18 {
  margin-top: 72px !important;
}

.mr-18 {
  margin-right: 72px !important;
}

.mb-18 {
  margin-bottom: 72px !important;
}

.ml-18 {
  margin-left: 72px !important;
}

.m-19 {
  margin: 76px !important;
}

.mx-19 {
  margin-left: 76px !important;
  margin-right: 76px !important;
}

.my-19 {
  margin-top: 76px !important;
  margin-bottom: 76px !important;
}

.mt-19 {
  margin-top: 76px !important;
}

.mr-19 {
  margin-right: 76px !important;
}

.mb-19 {
  margin-bottom: 76px !important;
}

.ml-19 {
  margin-left: 76px !important;
}

.m-20 {
  margin: 80px !important;
}

.mx-20 {
  margin-left: 80px !important;
  margin-right: 80px !important;
}

.my-20 {
  margin-top: 80px !important;
  margin-bottom: 80px !important;
}

.mt-20 {
  margin-top: 80px !important;
}

.mr-20 {
  margin-right: 80px !important;
}

.mb-20 {
  margin-bottom: 80px !important;
}

.ml-20 {
  margin-left: 80px !important;
}

.m-21 {
  margin: 84px !important;
}

.mx-21 {
  margin-left: 84px !important;
  margin-right: 84px !important;
}

.my-21 {
  margin-top: 84px !important;
  margin-bottom: 84px !important;
}

.mt-21 {
  margin-top: 84px !important;
}

.mr-21 {
  margin-right: 84px !important;
}

.mb-21 {
  margin-bottom: 84px !important;
}

.ml-21 {
  margin-left: 84px !important;
}

.m-22 {
  margin: 88px !important;
}

.mx-22 {
  margin-left: 88px !important;
  margin-right: 88px !important;
}

.my-22 {
  margin-top: 88px !important;
  margin-bottom: 88px !important;
}

.mt-22 {
  margin-top: 88px !important;
}

.mr-22 {
  margin-right: 88px !important;
}

.mb-22 {
  margin-bottom: 88px !important;
}

.ml-22 {
  margin-left: 88px !important;
}

.m-23 {
  margin: 92px !important;
}

.mx-23 {
  margin-left: 92px !important;
  margin-right: 92px !important;
}

.my-23 {
  margin-top: 92px !important;
  margin-bottom: 92px !important;
}

.mt-23 {
  margin-top: 92px !important;
}

.mr-23 {
  margin-right: 92px !important;
}

.mb-23 {
  margin-bottom: 92px !important;
}

.ml-23 {
  margin-left: 92px !important;
}

.m-24 {
  margin: 96px !important;
}

.mx-24 {
  margin-left: 96px !important;
  margin-right: 96px !important;
}

.my-24 {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}

.mt-24 {
  margin-top: 96px !important;
}

.mr-24 {
  margin-right: 96px !important;
}

.mb-24 {
  margin-bottom: 96px !important;
}

.ml-24 {
  margin-left: 96px !important;
}

.m-25 {
  margin: 100px !important;
}

.mx-25 {
  margin-left: 100px !important;
  margin-right: 100px !important;
}

.my-25 {
  margin-top: 100px !important;
  margin-bottom: 100px !important;
}

.mt-25 {
  margin-top: 100px !important;
}

.mr-25 {
  margin-right: 100px !important;
}

.mb-25 {
  margin-bottom: 100px !important;
}

.ml-25 {
  margin-left: 100px !important;
}

.m-26 {
  margin: 104px !important;
}

.mx-26 {
  margin-left: 104px !important;
  margin-right: 104px !important;
}

.my-26 {
  margin-top: 104px !important;
  margin-bottom: 104px !important;
}

.mt-26 {
  margin-top: 104px !important;
}

.mr-26 {
  margin-right: 104px !important;
}

.mb-26 {
  margin-bottom: 104px !important;
}

.ml-26 {
  margin-left: 104px !important;
}

.m-27 {
  margin: 108px !important;
}

.mx-27 {
  margin-left: 108px !important;
  margin-right: 108px !important;
}

.my-27 {
  margin-top: 108px !important;
  margin-bottom: 108px !important;
}

.mt-27 {
  margin-top: 108px !important;
}

.mr-27 {
  margin-right: 108px !important;
}

.mb-27 {
  margin-bottom: 108px !important;
}

.ml-27 {
  margin-left: 108px !important;
}

.m-28 {
  margin: 112px !important;
}

.mx-28 {
  margin-left: 112px !important;
  margin-right: 112px !important;
}

.my-28 {
  margin-top: 112px !important;
  margin-bottom: 112px !important;
}

.mt-28 {
  margin-top: 112px !important;
}

.mr-28 {
  margin-right: 112px !important;
}

.mb-28 {
  margin-bottom: 112px !important;
}

.ml-28 {
  margin-left: 112px !important;
}

.m-29 {
  margin: 116px !important;
}

.mx-29 {
  margin-left: 116px !important;
  margin-right: 116px !important;
}

.my-29 {
  margin-top: 116px !important;
  margin-bottom: 116px !important;
}

.mt-29 {
  margin-top: 116px !important;
}

.mr-29 {
  margin-right: 116px !important;
}

.mb-29 {
  margin-bottom: 116px !important;
}

.ml-29 {
  margin-left: 116px !important;
}

.m-30 {
  margin: 120px !important;
}

.mx-30 {
  margin-left: 120px !important;
  margin-right: 120px !important;
}

.my-30 {
  margin-top: 120px !important;
  margin-bottom: 120px !important;
}

.mt-30 {
  margin-top: 120px !important;
}

.mr-30 {
  margin-right: 120px !important;
}

.mb-30 {
  margin-bottom: 120px !important;
}

.ml-30 {
  margin-left: 120px !important;
}

.m-31 {
  margin: 124px !important;
}

.mx-31 {
  margin-left: 124px !important;
  margin-right: 124px !important;
}

.my-31 {
  margin-top: 124px !important;
  margin-bottom: 124px !important;
}

.mt-31 {
  margin-top: 124px !important;
}

.mr-31 {
  margin-right: 124px !important;
}

.mb-31 {
  margin-bottom: 124px !important;
}

.ml-31 {
  margin-left: 124px !important;
}

.m-32 {
  margin: 128px !important;
}

.mx-32 {
  margin-left: 128px !important;
  margin-right: 128px !important;
}

.my-32 {
  margin-top: 128px !important;
  margin-bottom: 128px !important;
}

.mt-32 {
  margin-top: 128px !important;
}

.mr-32 {
  margin-right: 128px !important;
}

.mb-32 {
  margin-bottom: 128px !important;
}

.ml-32 {
  margin-left: 128px !important;
}

.m-33 {
  margin: 132px !important;
}

.mx-33 {
  margin-left: 132px !important;
  margin-right: 132px !important;
}

.my-33 {
  margin-top: 132px !important;
  margin-bottom: 132px !important;
}

.mt-33 {
  margin-top: 132px !important;
}

.mr-33 {
  margin-right: 132px !important;
}

.mb-33 {
  margin-bottom: 132px !important;
}

.ml-33 {
  margin-left: 132px !important;
}

.m-34 {
  margin: 136px !important;
}

.mx-34 {
  margin-left: 136px !important;
  margin-right: 136px !important;
}

.my-34 {
  margin-top: 136px !important;
  margin-bottom: 136px !important;
}

.mt-34 {
  margin-top: 136px !important;
}

.mr-34 {
  margin-right: 136px !important;
}

.mb-34 {
  margin-bottom: 136px !important;
}

.ml-34 {
  margin-left: 136px !important;
}

.m-35 {
  margin: 140px !important;
}

.mx-35 {
  margin-left: 140px !important;
  margin-right: 140px !important;
}

.my-35 {
  margin-top: 140px !important;
  margin-bottom: 140px !important;
}

.mt-35 {
  margin-top: 140px !important;
}

.mr-35 {
  margin-right: 140px !important;
}

.mb-35 {
  margin-bottom: 140px !important;
}

.ml-35 {
  margin-left: 140px !important;
}

.m-36 {
  margin: 144px !important;
}

.mx-36 {
  margin-left: 144px !important;
  margin-right: 144px !important;
}

.my-36 {
  margin-top: 144px !important;
  margin-bottom: 144px !important;
}

.mt-36 {
  margin-top: 144px !important;
}

.mr-36 {
  margin-right: 144px !important;
}

.mb-36 {
  margin-bottom: 144px !important;
}

.ml-36 {
  margin-left: 144px !important;
}

.m-37 {
  margin: 148px !important;
}

.mx-37 {
  margin-left: 148px !important;
  margin-right: 148px !important;
}

.my-37 {
  margin-top: 148px !important;
  margin-bottom: 148px !important;
}

.mt-37 {
  margin-top: 148px !important;
}

.mr-37 {
  margin-right: 148px !important;
}

.mb-37 {
  margin-bottom: 148px !important;
}

.ml-37 {
  margin-left: 148px !important;
}

.m-38 {
  margin: 152px !important;
}

.mx-38 {
  margin-left: 152px !important;
  margin-right: 152px !important;
}

.my-38 {
  margin-top: 152px !important;
  margin-bottom: 152px !important;
}

.mt-38 {
  margin-top: 152px !important;
}

.mr-38 {
  margin-right: 152px !important;
}

.mb-38 {
  margin-bottom: 152px !important;
}

.ml-38 {
  margin-left: 152px !important;
}

.m-39 {
  margin: 156px !important;
}

.mx-39 {
  margin-left: 156px !important;
  margin-right: 156px !important;
}

.my-39 {
  margin-top: 156px !important;
  margin-bottom: 156px !important;
}

.mt-39 {
  margin-top: 156px !important;
}

.mr-39 {
  margin-right: 156px !important;
}

.mb-39 {
  margin-bottom: 156px !important;
}

.ml-39 {
  margin-left: 156px !important;
}

.m-40 {
  margin: 160px !important;
}

.mx-40 {
  margin-left: 160px !important;
  margin-right: 160px !important;
}

.my-40 {
  margin-top: 160px !important;
  margin-bottom: 160px !important;
}

.mt-40 {
  margin-top: 160px !important;
}

.mr-40 {
  margin-right: 160px !important;
}

.mb-40 {
  margin-bottom: 160px !important;
}

.ml-40 {
  margin-left: 160px !important;
}

.m-41 {
  margin: 164px !important;
}

.mx-41 {
  margin-left: 164px !important;
  margin-right: 164px !important;
}

.my-41 {
  margin-top: 164px !important;
  margin-bottom: 164px !important;
}

.mt-41 {
  margin-top: 164px !important;
}

.mr-41 {
  margin-right: 164px !important;
}

.mb-41 {
  margin-bottom: 164px !important;
}

.ml-41 {
  margin-left: 164px !important;
}

.m-42 {
  margin: 168px !important;
}

.mx-42 {
  margin-left: 168px !important;
  margin-right: 168px !important;
}

.my-42 {
  margin-top: 168px !important;
  margin-bottom: 168px !important;
}

.mt-42 {
  margin-top: 168px !important;
}

.mr-42 {
  margin-right: 168px !important;
}

.mb-42 {
  margin-bottom: 168px !important;
}

.ml-42 {
  margin-left: 168px !important;
}

.m-43 {
  margin: 172px !important;
}

.mx-43 {
  margin-left: 172px !important;
  margin-right: 172px !important;
}

.my-43 {
  margin-top: 172px !important;
  margin-bottom: 172px !important;
}

.mt-43 {
  margin-top: 172px !important;
}

.mr-43 {
  margin-right: 172px !important;
}

.mb-43 {
  margin-bottom: 172px !important;
}

.ml-43 {
  margin-left: 172px !important;
}

.m-44 {
  margin: 176px !important;
}

.mx-44 {
  margin-left: 176px !important;
  margin-right: 176px !important;
}

.my-44 {
  margin-top: 176px !important;
  margin-bottom: 176px !important;
}

.mt-44 {
  margin-top: 176px !important;
}

.mr-44 {
  margin-right: 176px !important;
}

.mb-44 {
  margin-bottom: 176px !important;
}

.ml-44 {
  margin-left: 176px !important;
}

.m-45 {
  margin: 180px !important;
}

.mx-45 {
  margin-left: 180px !important;
  margin-right: 180px !important;
}

.my-45 {
  margin-top: 180px !important;
  margin-bottom: 180px !important;
}

.mt-45 {
  margin-top: 180px !important;
}

.mr-45 {
  margin-right: 180px !important;
}

.mb-45 {
  margin-bottom: 180px !important;
}

.ml-45 {
  margin-left: 180px !important;
}

.m-46 {
  margin: 184px !important;
}

.mx-46 {
  margin-left: 184px !important;
  margin-right: 184px !important;
}

.my-46 {
  margin-top: 184px !important;
  margin-bottom: 184px !important;
}

.mt-46 {
  margin-top: 184px !important;
}

.mr-46 {
  margin-right: 184px !important;
}

.mb-46 {
  margin-bottom: 184px !important;
}

.ml-46 {
  margin-left: 184px !important;
}

.m-47 {
  margin: 188px !important;
}

.mx-47 {
  margin-left: 188px !important;
  margin-right: 188px !important;
}

.my-47 {
  margin-top: 188px !important;
  margin-bottom: 188px !important;
}

.mt-47 {
  margin-top: 188px !important;
}

.mr-47 {
  margin-right: 188px !important;
}

.mb-47 {
  margin-bottom: 188px !important;
}

.ml-47 {
  margin-left: 188px !important;
}

.m-48 {
  margin: 192px !important;
}

.mx-48 {
  margin-left: 192px !important;
  margin-right: 192px !important;
}

.my-48 {
  margin-top: 192px !important;
  margin-bottom: 192px !important;
}

.mt-48 {
  margin-top: 192px !important;
}

.mr-48 {
  margin-right: 192px !important;
}

.mb-48 {
  margin-bottom: 192px !important;
}

.ml-48 {
  margin-left: 192px !important;
}

.m-49 {
  margin: 196px !important;
}

.mx-49 {
  margin-left: 196px !important;
  margin-right: 196px !important;
}

.my-49 {
  margin-top: 196px !important;
  margin-bottom: 196px !important;
}

.mt-49 {
  margin-top: 196px !important;
}

.mr-49 {
  margin-right: 196px !important;
}

.mb-49 {
  margin-bottom: 196px !important;
}

.ml-49 {
  margin-left: 196px !important;
}

.m-50 {
  margin: 200px !important;
}

.mx-50 {
  margin-left: 200px !important;
  margin-right: 200px !important;
}

.my-50 {
  margin-top: 200px !important;
  margin-bottom: 200px !important;
}

.mt-50 {
  margin-top: 200px !important;
}

.mr-50 {
  margin-right: 200px !important;
}

.mb-50 {
  margin-bottom: 200px !important;
}

.ml-50 {
  margin-left: 200px !important;
}

.m-51 {
  margin: 204px !important;
}

.mx-51 {
  margin-left: 204px !important;
  margin-right: 204px !important;
}

.my-51 {
  margin-top: 204px !important;
  margin-bottom: 204px !important;
}

.mt-51 {
  margin-top: 204px !important;
}

.mr-51 {
  margin-right: 204px !important;
}

.mb-51 {
  margin-bottom: 204px !important;
}

.ml-51 {
  margin-left: 204px !important;
}

.m-52 {
  margin: 208px !important;
}

.mx-52 {
  margin-left: 208px !important;
  margin-right: 208px !important;
}

.my-52 {
  margin-top: 208px !important;
  margin-bottom: 208px !important;
}

.mt-52 {
  margin-top: 208px !important;
}

.mr-52 {
  margin-right: 208px !important;
}

.mb-52 {
  margin-bottom: 208px !important;
}

.ml-52 {
  margin-left: 208px !important;
}

.m-53 {
  margin: 212px !important;
}

.mx-53 {
  margin-left: 212px !important;
  margin-right: 212px !important;
}

.my-53 {
  margin-top: 212px !important;
  margin-bottom: 212px !important;
}

.mt-53 {
  margin-top: 212px !important;
}

.mr-53 {
  margin-right: 212px !important;
}

.mb-53 {
  margin-bottom: 212px !important;
}

.ml-53 {
  margin-left: 212px !important;
}

.m-54 {
  margin: 216px !important;
}

.mx-54 {
  margin-left: 216px !important;
  margin-right: 216px !important;
}

.my-54 {
  margin-top: 216px !important;
  margin-bottom: 216px !important;
}

.mt-54 {
  margin-top: 216px !important;
}

.mr-54 {
  margin-right: 216px !important;
}

.mb-54 {
  margin-bottom: 216px !important;
}

.ml-54 {
  margin-left: 216px !important;
}

.m-55 {
  margin: 220px !important;
}

.mx-55 {
  margin-left: 220px !important;
  margin-right: 220px !important;
}

.my-55 {
  margin-top: 220px !important;
  margin-bottom: 220px !important;
}

.mt-55 {
  margin-top: 220px !important;
}

.mr-55 {
  margin-right: 220px !important;
}

.mb-55 {
  margin-bottom: 220px !important;
}

.ml-55 {
  margin-left: 220px !important;
}

.m-56 {
  margin: 224px !important;
}

.mx-56 {
  margin-left: 224px !important;
  margin-right: 224px !important;
}

.my-56 {
  margin-top: 224px !important;
  margin-bottom: 224px !important;
}

.mt-56 {
  margin-top: 224px !important;
}

.mr-56 {
  margin-right: 224px !important;
}

.mb-56 {
  margin-bottom: 224px !important;
}

.ml-56 {
  margin-left: 224px !important;
}

.m-57 {
  margin: 228px !important;
}

.mx-57 {
  margin-left: 228px !important;
  margin-right: 228px !important;
}

.my-57 {
  margin-top: 228px !important;
  margin-bottom: 228px !important;
}

.mt-57 {
  margin-top: 228px !important;
}

.mr-57 {
  margin-right: 228px !important;
}

.mb-57 {
  margin-bottom: 228px !important;
}

.ml-57 {
  margin-left: 228px !important;
}

.m-58 {
  margin: 232px !important;
}

.mx-58 {
  margin-left: 232px !important;
  margin-right: 232px !important;
}

.my-58 {
  margin-top: 232px !important;
  margin-bottom: 232px !important;
}

.mt-58 {
  margin-top: 232px !important;
}

.mr-58 {
  margin-right: 232px !important;
}

.mb-58 {
  margin-bottom: 232px !important;
}

.ml-58 {
  margin-left: 232px !important;
}

.m-59 {
  margin: 236px !important;
}

.mx-59 {
  margin-left: 236px !important;
  margin-right: 236px !important;
}

.my-59 {
  margin-top: 236px !important;
  margin-bottom: 236px !important;
}

.mt-59 {
  margin-top: 236px !important;
}

.mr-59 {
  margin-right: 236px !important;
}

.mb-59 {
  margin-bottom: 236px !important;
}

.ml-59 {
  margin-left: 236px !important;
}

.m-60 {
  margin: 240px !important;
}

.mx-60 {
  margin-left: 240px !important;
  margin-right: 240px !important;
}

.my-60 {
  margin-top: 240px !important;
  margin-bottom: 240px !important;
}

.mt-60 {
  margin-top: 240px !important;
}

.mr-60 {
  margin-right: 240px !important;
}

.mb-60 {
  margin-bottom: 240px !important;
}

.ml-60 {
  margin-left: 240px !important;
}

.m-61 {
  margin: 244px !important;
}

.mx-61 {
  margin-left: 244px !important;
  margin-right: 244px !important;
}

.my-61 {
  margin-top: 244px !important;
  margin-bottom: 244px !important;
}

.mt-61 {
  margin-top: 244px !important;
}

.mr-61 {
  margin-right: 244px !important;
}

.mb-61 {
  margin-bottom: 244px !important;
}

.ml-61 {
  margin-left: 244px !important;
}

.m-62 {
  margin: 248px !important;
}

.mx-62 {
  margin-left: 248px !important;
  margin-right: 248px !important;
}

.my-62 {
  margin-top: 248px !important;
  margin-bottom: 248px !important;
}

.mt-62 {
  margin-top: 248px !important;
}

.mr-62 {
  margin-right: 248px !important;
}

.mb-62 {
  margin-bottom: 248px !important;
}

.ml-62 {
  margin-left: 248px !important;
}

.m-63 {
  margin: 252px !important;
}

.mx-63 {
  margin-left: 252px !important;
  margin-right: 252px !important;
}

.my-63 {
  margin-top: 252px !important;
  margin-bottom: 252px !important;
}

.mt-63 {
  margin-top: 252px !important;
}

.mr-63 {
  margin-right: 252px !important;
}

.mb-63 {
  margin-bottom: 252px !important;
}

.ml-63 {
  margin-left: 252px !important;
}

.m-64 {
  margin: 256px !important;
}

.mx-64 {
  margin-left: 256px !important;
  margin-right: 256px !important;
}

.my-64 {
  margin-top: 256px !important;
  margin-bottom: 256px !important;
}

.mt-64 {
  margin-top: 256px !important;
}

.mr-64 {
  margin-right: 256px !important;
}

.mb-64 {
  margin-bottom: 256px !important;
}

.ml-64 {
  margin-left: 256px !important;
}

.m-65 {
  margin: 260px !important;
}

.mx-65 {
  margin-left: 260px !important;
  margin-right: 260px !important;
}

.my-65 {
  margin-top: 260px !important;
  margin-bottom: 260px !important;
}

.mt-65 {
  margin-top: 260px !important;
}

.mr-65 {
  margin-right: 260px !important;
}

.mb-65 {
  margin-bottom: 260px !important;
}

.ml-65 {
  margin-left: 260px !important;
}

.m-66 {
  margin: 264px !important;
}

.mx-66 {
  margin-left: 264px !important;
  margin-right: 264px !important;
}

.my-66 {
  margin-top: 264px !important;
  margin-bottom: 264px !important;
}

.mt-66 {
  margin-top: 264px !important;
}

.mr-66 {
  margin-right: 264px !important;
}

.mb-66 {
  margin-bottom: 264px !important;
}

.ml-66 {
  margin-left: 264px !important;
}

.m-67 {
  margin: 268px !important;
}

.mx-67 {
  margin-left: 268px !important;
  margin-right: 268px !important;
}

.my-67 {
  margin-top: 268px !important;
  margin-bottom: 268px !important;
}

.mt-67 {
  margin-top: 268px !important;
}

.mr-67 {
  margin-right: 268px !important;
}

.mb-67 {
  margin-bottom: 268px !important;
}

.ml-67 {
  margin-left: 268px !important;
}

.m-68 {
  margin: 272px !important;
}

.mx-68 {
  margin-left: 272px !important;
  margin-right: 272px !important;
}

.my-68 {
  margin-top: 272px !important;
  margin-bottom: 272px !important;
}

.mt-68 {
  margin-top: 272px !important;
}

.mr-68 {
  margin-right: 272px !important;
}

.mb-68 {
  margin-bottom: 272px !important;
}

.ml-68 {
  margin-left: 272px !important;
}

.m-69 {
  margin: 276px !important;
}

.mx-69 {
  margin-left: 276px !important;
  margin-right: 276px !important;
}

.my-69 {
  margin-top: 276px !important;
  margin-bottom: 276px !important;
}

.mt-69 {
  margin-top: 276px !important;
}

.mr-69 {
  margin-right: 276px !important;
}

.mb-69 {
  margin-bottom: 276px !important;
}

.ml-69 {
  margin-left: 276px !important;
}

.m-70 {
  margin: 280px !important;
}

.mx-70 {
  margin-left: 280px !important;
  margin-right: 280px !important;
}

.my-70 {
  margin-top: 280px !important;
  margin-bottom: 280px !important;
}

.mt-70 {
  margin-top: 280px !important;
}

.mr-70 {
  margin-right: 280px !important;
}

.mb-70 {
  margin-bottom: 280px !important;
}

.ml-70 {
  margin-left: 280px !important;
}

.m-71 {
  margin: 284px !important;
}

.mx-71 {
  margin-left: 284px !important;
  margin-right: 284px !important;
}

.my-71 {
  margin-top: 284px !important;
  margin-bottom: 284px !important;
}

.mt-71 {
  margin-top: 284px !important;
}

.mr-71 {
  margin-right: 284px !important;
}

.mb-71 {
  margin-bottom: 284px !important;
}

.ml-71 {
  margin-left: 284px !important;
}

.m-72 {
  margin: 288px !important;
}

.mx-72 {
  margin-left: 288px !important;
  margin-right: 288px !important;
}

.my-72 {
  margin-top: 288px !important;
  margin-bottom: 288px !important;
}

.mt-72 {
  margin-top: 288px !important;
}

.mr-72 {
  margin-right: 288px !important;
}

.mb-72 {
  margin-bottom: 288px !important;
}

.ml-72 {
  margin-left: 288px !important;
}

.m-73 {
  margin: 292px !important;
}

.mx-73 {
  margin-left: 292px !important;
  margin-right: 292px !important;
}

.my-73 {
  margin-top: 292px !important;
  margin-bottom: 292px !important;
}

.mt-73 {
  margin-top: 292px !important;
}

.mr-73 {
  margin-right: 292px !important;
}

.mb-73 {
  margin-bottom: 292px !important;
}

.ml-73 {
  margin-left: 292px !important;
}

.m-74 {
  margin: 296px !important;
}

.mx-74 {
  margin-left: 296px !important;
  margin-right: 296px !important;
}

.my-74 {
  margin-top: 296px !important;
  margin-bottom: 296px !important;
}

.mt-74 {
  margin-top: 296px !important;
}

.mr-74 {
  margin-right: 296px !important;
}

.mb-74 {
  margin-bottom: 296px !important;
}

.ml-74 {
  margin-left: 296px !important;
}

.m-75 {
  margin: 300px !important;
}

.mx-75 {
  margin-left: 300px !important;
  margin-right: 300px !important;
}

.my-75 {
  margin-top: 300px !important;
  margin-bottom: 300px !important;
}

.mt-75 {
  margin-top: 300px !important;
}

.mr-75 {
  margin-right: 300px !important;
}

.mb-75 {
  margin-bottom: 300px !important;
}

.ml-75 {
  margin-left: 300px !important;
}

.m-76 {
  margin: 304px !important;
}

.mx-76 {
  margin-left: 304px !important;
  margin-right: 304px !important;
}

.my-76 {
  margin-top: 304px !important;
  margin-bottom: 304px !important;
}

.mt-76 {
  margin-top: 304px !important;
}

.mr-76 {
  margin-right: 304px !important;
}

.mb-76 {
  margin-bottom: 304px !important;
}

.ml-76 {
  margin-left: 304px !important;
}

.m-77 {
  margin: 308px !important;
}

.mx-77 {
  margin-left: 308px !important;
  margin-right: 308px !important;
}

.my-77 {
  margin-top: 308px !important;
  margin-bottom: 308px !important;
}

.mt-77 {
  margin-top: 308px !important;
}

.mr-77 {
  margin-right: 308px !important;
}

.mb-77 {
  margin-bottom: 308px !important;
}

.ml-77 {
  margin-left: 308px !important;
}

.m-78 {
  margin: 312px !important;
}

.mx-78 {
  margin-left: 312px !important;
  margin-right: 312px !important;
}

.my-78 {
  margin-top: 312px !important;
  margin-bottom: 312px !important;
}

.mt-78 {
  margin-top: 312px !important;
}

.mr-78 {
  margin-right: 312px !important;
}

.mb-78 {
  margin-bottom: 312px !important;
}

.ml-78 {
  margin-left: 312px !important;
}

.m-79 {
  margin: 316px !important;
}

.mx-79 {
  margin-left: 316px !important;
  margin-right: 316px !important;
}

.my-79 {
  margin-top: 316px !important;
  margin-bottom: 316px !important;
}

.mt-79 {
  margin-top: 316px !important;
}

.mr-79 {
  margin-right: 316px !important;
}

.mb-79 {
  margin-bottom: 316px !important;
}

.ml-79 {
  margin-left: 316px !important;
}

.m-80 {
  margin: 320px !important;
}

.mx-80 {
  margin-left: 320px !important;
  margin-right: 320px !important;
}

.my-80 {
  margin-top: 320px !important;
  margin-bottom: 320px !important;
}

.mt-80 {
  margin-top: 320px !important;
}

.mr-80 {
  margin-right: 320px !important;
}

.mb-80 {
  margin-bottom: 320px !important;
}

.ml-80 {
  margin-left: 320px !important;
}

.m-81 {
  margin: 324px !important;
}

.mx-81 {
  margin-left: 324px !important;
  margin-right: 324px !important;
}

.my-81 {
  margin-top: 324px !important;
  margin-bottom: 324px !important;
}

.mt-81 {
  margin-top: 324px !important;
}

.mr-81 {
  margin-right: 324px !important;
}

.mb-81 {
  margin-bottom: 324px !important;
}

.ml-81 {
  margin-left: 324px !important;
}

.m-82 {
  margin: 328px !important;
}

.mx-82 {
  margin-left: 328px !important;
  margin-right: 328px !important;
}

.my-82 {
  margin-top: 328px !important;
  margin-bottom: 328px !important;
}

.mt-82 {
  margin-top: 328px !important;
}

.mr-82 {
  margin-right: 328px !important;
}

.mb-82 {
  margin-bottom: 328px !important;
}

.ml-82 {
  margin-left: 328px !important;
}

.m-83 {
  margin: 332px !important;
}

.mx-83 {
  margin-left: 332px !important;
  margin-right: 332px !important;
}

.my-83 {
  margin-top: 332px !important;
  margin-bottom: 332px !important;
}

.mt-83 {
  margin-top: 332px !important;
}

.mr-83 {
  margin-right: 332px !important;
}

.mb-83 {
  margin-bottom: 332px !important;
}

.ml-83 {
  margin-left: 332px !important;
}

.m-84 {
  margin: 336px !important;
}

.mx-84 {
  margin-left: 336px !important;
  margin-right: 336px !important;
}

.my-84 {
  margin-top: 336px !important;
  margin-bottom: 336px !important;
}

.mt-84 {
  margin-top: 336px !important;
}

.mr-84 {
  margin-right: 336px !important;
}

.mb-84 {
  margin-bottom: 336px !important;
}

.ml-84 {
  margin-left: 336px !important;
}

.m-85 {
  margin: 340px !important;
}

.mx-85 {
  margin-left: 340px !important;
  margin-right: 340px !important;
}

.my-85 {
  margin-top: 340px !important;
  margin-bottom: 340px !important;
}

.mt-85 {
  margin-top: 340px !important;
}

.mr-85 {
  margin-right: 340px !important;
}

.mb-85 {
  margin-bottom: 340px !important;
}

.ml-85 {
  margin-left: 340px !important;
}

.m-86 {
  margin: 344px !important;
}

.mx-86 {
  margin-left: 344px !important;
  margin-right: 344px !important;
}

.my-86 {
  margin-top: 344px !important;
  margin-bottom: 344px !important;
}

.mt-86 {
  margin-top: 344px !important;
}

.mr-86 {
  margin-right: 344px !important;
}

.mb-86 {
  margin-bottom: 344px !important;
}

.ml-86 {
  margin-left: 344px !important;
}

.m-87 {
  margin: 348px !important;
}

.mx-87 {
  margin-left: 348px !important;
  margin-right: 348px !important;
}

.my-87 {
  margin-top: 348px !important;
  margin-bottom: 348px !important;
}

.mt-87 {
  margin-top: 348px !important;
}

.mr-87 {
  margin-right: 348px !important;
}

.mb-87 {
  margin-bottom: 348px !important;
}

.ml-87 {
  margin-left: 348px !important;
}

.m-88 {
  margin: 352px !important;
}

.mx-88 {
  margin-left: 352px !important;
  margin-right: 352px !important;
}

.my-88 {
  margin-top: 352px !important;
  margin-bottom: 352px !important;
}

.mt-88 {
  margin-top: 352px !important;
}

.mr-88 {
  margin-right: 352px !important;
}

.mb-88 {
  margin-bottom: 352px !important;
}

.ml-88 {
  margin-left: 352px !important;
}

.m-89 {
  margin: 356px !important;
}

.mx-89 {
  margin-left: 356px !important;
  margin-right: 356px !important;
}

.my-89 {
  margin-top: 356px !important;
  margin-bottom: 356px !important;
}

.mt-89 {
  margin-top: 356px !important;
}

.mr-89 {
  margin-right: 356px !important;
}

.mb-89 {
  margin-bottom: 356px !important;
}

.ml-89 {
  margin-left: 356px !important;
}

.m-90 {
  margin: 360px !important;
}

.mx-90 {
  margin-left: 360px !important;
  margin-right: 360px !important;
}

.my-90 {
  margin-top: 360px !important;
  margin-bottom: 360px !important;
}

.mt-90 {
  margin-top: 360px !important;
}

.mr-90 {
  margin-right: 360px !important;
}

.mb-90 {
  margin-bottom: 360px !important;
}

.ml-90 {
  margin-left: 360px !important;
}

.m-91 {
  margin: 364px !important;
}

.mx-91 {
  margin-left: 364px !important;
  margin-right: 364px !important;
}

.my-91 {
  margin-top: 364px !important;
  margin-bottom: 364px !important;
}

.mt-91 {
  margin-top: 364px !important;
}

.mr-91 {
  margin-right: 364px !important;
}

.mb-91 {
  margin-bottom: 364px !important;
}

.ml-91 {
  margin-left: 364px !important;
}

.m-92 {
  margin: 368px !important;
}

.mx-92 {
  margin-left: 368px !important;
  margin-right: 368px !important;
}

.my-92 {
  margin-top: 368px !important;
  margin-bottom: 368px !important;
}

.mt-92 {
  margin-top: 368px !important;
}

.mr-92 {
  margin-right: 368px !important;
}

.mb-92 {
  margin-bottom: 368px !important;
}

.ml-92 {
  margin-left: 368px !important;
}

.m-93 {
  margin: 372px !important;
}

.mx-93 {
  margin-left: 372px !important;
  margin-right: 372px !important;
}

.my-93 {
  margin-top: 372px !important;
  margin-bottom: 372px !important;
}

.mt-93 {
  margin-top: 372px !important;
}

.mr-93 {
  margin-right: 372px !important;
}

.mb-93 {
  margin-bottom: 372px !important;
}

.ml-93 {
  margin-left: 372px !important;
}

.m-94 {
  margin: 376px !important;
}

.mx-94 {
  margin-left: 376px !important;
  margin-right: 376px !important;
}

.my-94 {
  margin-top: 376px !important;
  margin-bottom: 376px !important;
}

.mt-94 {
  margin-top: 376px !important;
}

.mr-94 {
  margin-right: 376px !important;
}

.mb-94 {
  margin-bottom: 376px !important;
}

.ml-94 {
  margin-left: 376px !important;
}

.m-95 {
  margin: 380px !important;
}

.mx-95 {
  margin-left: 380px !important;
  margin-right: 380px !important;
}

.my-95 {
  margin-top: 380px !important;
  margin-bottom: 380px !important;
}

.mt-95 {
  margin-top: 380px !important;
}

.mr-95 {
  margin-right: 380px !important;
}

.mb-95 {
  margin-bottom: 380px !important;
}

.ml-95 {
  margin-left: 380px !important;
}

.m-96 {
  margin: 384px !important;
}

.mx-96 {
  margin-left: 384px !important;
  margin-right: 384px !important;
}

.my-96 {
  margin-top: 384px !important;
  margin-bottom: 384px !important;
}

.mt-96 {
  margin-top: 384px !important;
}

.mr-96 {
  margin-right: 384px !important;
}

.mb-96 {
  margin-bottom: 384px !important;
}

.ml-96 {
  margin-left: 384px !important;
}

.m-97 {
  margin: 388px !important;
}

.mx-97 {
  margin-left: 388px !important;
  margin-right: 388px !important;
}

.my-97 {
  margin-top: 388px !important;
  margin-bottom: 388px !important;
}

.mt-97 {
  margin-top: 388px !important;
}

.mr-97 {
  margin-right: 388px !important;
}

.mb-97 {
  margin-bottom: 388px !important;
}

.ml-97 {
  margin-left: 388px !important;
}

.m-98 {
  margin: 392px !important;
}

.mx-98 {
  margin-left: 392px !important;
  margin-right: 392px !important;
}

.my-98 {
  margin-top: 392px !important;
  margin-bottom: 392px !important;
}

.mt-98 {
  margin-top: 392px !important;
}

.mr-98 {
  margin-right: 392px !important;
}

.mb-98 {
  margin-bottom: 392px !important;
}

.ml-98 {
  margin-left: 392px !important;
}

.m-99 {
  margin: 396px !important;
}

.mx-99 {
  margin-left: 396px !important;
  margin-right: 396px !important;
}

.my-99 {
  margin-top: 396px !important;
  margin-bottom: 396px !important;
}

.mt-99 {
  margin-top: 396px !important;
}

.mr-99 {
  margin-right: 396px !important;
}

.mb-99 {
  margin-bottom: 396px !important;
}

.ml-99 {
  margin-left: 396px !important;
}

.m-100 {
  margin: 400px !important;
}

.mx-100 {
  margin-left: 400px !important;
  margin-right: 400px !important;
}

.my-100 {
  margin-top: 400px !important;
  margin-bottom: 400px !important;
}

.mt-100 {
  margin-top: 400px !important;
}

.mr-100 {
  margin-right: 400px !important;
}

.mb-100 {
  margin-bottom: 400px !important;
}

.ml-100 {
  margin-left: 400px !important;
}

.p-0 {
  padding: 0;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.pt-0 {
  padding-top: 0;
}

.pr-0 {
  padding-right: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.p-xxs {
  padding: 2px;
}

.px-xxs {
  padding-left: 2px;
  padding-right: 2px;
}

.py-xxs {
  padding-top: 2px;
  padding-bottom: 2px;
}

.pt-xxs {
  padding-top: 2px;
}

.pr-xxs {
  padding-right: 2px;
}

.pb-xxs {
  padding-bottom: 2px;
}

.pl-xxs {
  padding-left: 2px;
}

.p-xs {
  padding: 4px;
}

.px-xs {
  padding-left: 4px;
  padding-right: 4px;
}

.py-xs {
  padding-top: 4px;
  padding-bottom: 4px;
}

.pt-xs {
  padding-top: 4px;
}

.pr-xs {
  padding-right: 4px;
}

.pb-xs {
  padding-bottom: 4px;
}

.pl-xs {
  padding-left: 4px;
}

.p-sm {
  padding: 8px;
}

.px-sm {
  padding-left: 8px;
  padding-right: 8px;
}

.py-sm {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pt-sm {
  padding-top: 8px;
}

.pr-sm {
  padding-right: 8px;
}

.pb-sm {
  padding-bottom: 8px;
}

.pl-sm {
  padding-left: 8px;
}

.p-md {
  padding: 16px;
}

.px-md {
  padding-left: 16px;
  padding-right: 16px;
}

.py-md {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pt-md {
  padding-top: 16px;
}

.pr-md {
  padding-right: 16px;
}

.pb-md {
  padding-bottom: 16px;
}

.pl-md {
  padding-left: 16px;
}

.p-lg {
  padding: 24px;
}

.px-lg {
  padding-left: 24px;
  padding-right: 24px;
}

.py-lg {
  padding-top: 24px;
  padding-bottom: 24px;
}

.pt-lg {
  padding-top: 24px;
}

.pr-lg {
  padding-right: 24px;
}

.pb-lg {
  padding-bottom: 24px;
}

.pl-lg {
  padding-left: 24px;
}

.p-xl {
  padding: 32px;
}

.px-xl {
  padding-left: 32px;
  padding-right: 32px;
}

.py-xl {
  padding-top: 32px;
  padding-bottom: 32px;
}

.pt-xl {
  padding-top: 32px;
}

.pr-xl {
  padding-right: 32px;
}

.pb-xl {
  padding-bottom: 32px;
}

.pl-xl {
  padding-left: 32px;
}

.p-xxl {
  padding: 40px;
}

.px-xxl {
  padding-left: 40px;
  padding-right: 40px;
}

.py-xxl {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pt-xxl {
  padding-top: 40px;
}

.pr-xxl {
  padding-right: 40px;
}

.pb-xxl {
  padding-bottom: 40px;
}

.pl-xxl {
  padding-left: 40px;
}

.p-hu {
  padding: 48px;
}

.px-hu {
  padding-left: 48px;
  padding-right: 48px;
}

.py-hu {
  padding-top: 48px;
  padding-bottom: 48px;
}

.pt-hu {
  padding-top: 48px;
}

.pr-hu {
  padding-right: 48px;
}

.pb-hu {
  padding-bottom: 48px;
}

.pl-hu {
  padding-left: 48px;
}

.p-xh {
  padding: 56px;
}

.px-xh {
  padding-left: 56px;
  padding-right: 56px;
}

.py-xh {
  padding-top: 56px;
  padding-bottom: 56px;
}

.pt-xh {
  padding-top: 56px;
}

.pr-xh {
  padding-right: 56px;
}

.pb-xh {
  padding-bottom: 56px;
}

.pl-xh {
  padding-left: 56px;
}

.p-xxh {
  padding: 64px;
}

.px-xxh {
  padding-left: 64px;
  padding-right: 64px;
}

.py-xxh {
  padding-top: 64px;
  padding-bottom: 64px;
}

.pt-xxh {
  padding-top: 64px;
}

.pr-xxh {
  padding-right: 64px;
}

.pb-xxh {
  padding-bottom: 64px;
}

.pl-xxh {
  padding-left: 64px;
}

.p-xxxh {
  padding: 72px;
}

.px-xxxh {
  padding-left: 72px;
  padding-right: 72px;
}

.py-xxxh {
  padding-top: 72px;
  padding-bottom: 72px;
}

.pt-xxxh {
  padding-top: 72px;
}

.pr-xxxh {
  padding-right: 72px;
}

.pb-xxxh {
  padding-bottom: 72px;
}

.pl-xxxh {
  padding-left: 72px;
}

.p-gi {
  padding: 80px;
}

.px-gi {
  padding-left: 80px;
  padding-right: 80px;
}

.py-gi {
  padding-top: 80px;
  padding-bottom: 80px;
}

.pt-gi {
  padding-top: 80px;
}

.pr-gi {
  padding-right: 80px;
}

.pb-gi {
  padding-bottom: 80px;
}

.pl-gi {
  padding-left: 80px;
}

.p-xg {
  padding: 88px;
}

.px-xg {
  padding-left: 88px;
  padding-right: 88px;
}

.py-xg {
  padding-top: 88px;
  padding-bottom: 88px;
}

.pt-xg {
  padding-top: 88px;
}

.pr-xg {
  padding-right: 88px;
}

.pb-xg {
  padding-bottom: 88px;
}

.pl-xg {
  padding-left: 88px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .p-0 {
    padding: 0;
  }
  .px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .pt-0 {
    padding-top: 0;
  }
  .pr-0 {
    padding-right: 0;
  }
  .pb-0 {
    padding-bottom: 0;
  }
  .pl-0 {
    padding-left: 0;
  }
  .p-xxs {
    padding: 2px;
  }
  .px-xxs {
    padding-left: 2px;
    padding-right: 2px;
  }
  .py-xxs {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .pt-xxs {
    padding-top: 2px;
  }
  .pr-xxs {
    padding-right: 2px;
  }
  .pb-xxs {
    padding-bottom: 2px;
  }
  .pl-xxs {
    padding-left: 2px;
  }
  .p-xs {
    padding: 4px;
  }
  .px-xs {
    padding-left: 4px;
    padding-right: 4px;
  }
  .py-xs {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .pt-xs {
    padding-top: 4px;
  }
  .pr-xs {
    padding-right: 4px;
  }
  .pb-xs {
    padding-bottom: 4px;
  }
  .pl-xs {
    padding-left: 4px;
  }
  .p-sm {
    padding: 8px;
  }
  .px-sm {
    padding-left: 8px;
    padding-right: 8px;
  }
  .py-sm {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .pt-sm {
    padding-top: 8px;
  }
  .pr-sm {
    padding-right: 8px;
  }
  .pb-sm {
    padding-bottom: 8px;
  }
  .pl-sm {
    padding-left: 8px;
  }
  .p-md {
    padding: 12px;
  }
  .px-md {
    padding-left: 12px;
    padding-right: 12px;
  }
  .py-md {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .pt-md {
    padding-top: 12px;
  }
  .pr-md {
    padding-right: 12px;
  }
  .pb-md {
    padding-bottom: 12px;
  }
  .pl-md {
    padding-left: 12px;
  }
  .p-lg {
    padding: 20px;
  }
  .px-lg {
    padding-left: 20px;
    padding-right: 20px;
  }
  .py-lg {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .pt-lg {
    padding-top: 20px;
  }
  .pr-lg {
    padding-right: 20px;
  }
  .pb-lg {
    padding-bottom: 20px;
  }
  .pl-lg {
    padding-left: 20px;
  }
  .p-xl {
    padding: 24px;
  }
  .px-xl {
    padding-left: 24px;
    padding-right: 24px;
  }
  .py-xl {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .pt-xl {
    padding-top: 24px;
  }
  .pr-xl {
    padding-right: 24px;
  }
  .pb-xl {
    padding-bottom: 24px;
  }
  .pl-xl {
    padding-left: 24px;
  }
  .p-xxl {
    padding: 32px;
  }
  .px-xxl {
    padding-left: 32px;
    padding-right: 32px;
  }
  .py-xxl {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .pt-xxl {
    padding-top: 32px;
  }
  .pr-xxl {
    padding-right: 32px;
  }
  .pb-xxl {
    padding-bottom: 32px;
  }
  .pl-xxl {
    padding-left: 32px;
  }
  .p-hu {
    padding: 40px;
  }
  .px-hu {
    padding-left: 40px;
    padding-right: 40px;
  }
  .py-hu {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .pt-hu {
    padding-top: 40px;
  }
  .pr-hu {
    padding-right: 40px;
  }
  .pb-hu {
    padding-bottom: 40px;
  }
  .pl-hu {
    padding-left: 40px;
  }
  .p-xh {
    padding: 48px;
  }
  .px-xh {
    padding-left: 48px;
    padding-right: 48px;
  }
  .py-xh {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .pt-xh {
    padding-top: 48px;
  }
  .pr-xh {
    padding-right: 48px;
  }
  .pb-xh {
    padding-bottom: 48px;
  }
  .pl-xh {
    padding-left: 48px;
  }
  .p-xxh {
    padding: 56px;
  }
  .px-xxh {
    padding-left: 56px;
    padding-right: 56px;
  }
  .py-xxh {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .pt-xxh {
    padding-top: 56px;
  }
  .pr-xxh {
    padding-right: 56px;
  }
  .pb-xxh {
    padding-bottom: 56px;
  }
  .pl-xxh {
    padding-left: 56px;
  }
  .p-xxxh {
    padding: 64px;
  }
  .px-xxxh {
    padding-left: 64px;
    padding-right: 64px;
  }
  .py-xxxh {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .pt-xxxh {
    padding-top: 64px;
  }
  .pr-xxxh {
    padding-right: 64px;
  }
  .pb-xxxh {
    padding-bottom: 64px;
  }
  .pl-xxxh {
    padding-left: 64px;
  }
  .p-gi {
    padding: 72px;
  }
  .px-gi {
    padding-left: 72px;
    padding-right: 72px;
  }
  .py-gi {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .pt-gi {
    padding-top: 72px;
  }
  .pr-gi {
    padding-right: 72px;
  }
  .pb-gi {
    padding-bottom: 72px;
  }
  .pl-gi {
    padding-left: 72px;
  }
  .p-xg {
    padding: 80px;
  }
  .px-xg {
    padding-left: 80px;
    padding-right: 80px;
  }
  .py-xg {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .pt-xg {
    padding-top: 80px;
  }
  .pr-xg {
    padding-right: 80px;
  }
  .pb-xg {
    padding-bottom: 80px;
  }
  .pl-xg {
    padding-left: 80px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .p-0 {
    padding: 0;
  }
  .px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .pt-0 {
    padding-top: 0;
  }
  .pr-0 {
    padding-right: 0;
  }
  .pb-0 {
    padding-bottom: 0;
  }
  .pl-0 {
    padding-left: 0;
  }
  .p-xxs {
    padding: 2px;
  }
  .px-xxs {
    padding-left: 2px;
    padding-right: 2px;
  }
  .py-xxs {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .pt-xxs {
    padding-top: 2px;
  }
  .pr-xxs {
    padding-right: 2px;
  }
  .pb-xxs {
    padding-bottom: 2px;
  }
  .pl-xxs {
    padding-left: 2px;
  }
  .p-xs {
    padding: 4px;
  }
  .px-xs {
    padding-left: 4px;
    padding-right: 4px;
  }
  .py-xs {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .pt-xs {
    padding-top: 4px;
  }
  .pr-xs {
    padding-right: 4px;
  }
  .pb-xs {
    padding-bottom: 4px;
  }
  .pl-xs {
    padding-left: 4px;
  }
  .p-sm {
    padding: 8px;
  }
  .px-sm {
    padding-left: 8px;
    padding-right: 8px;
  }
  .py-sm {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .pt-sm {
    padding-top: 8px;
  }
  .pr-sm {
    padding-right: 8px;
  }
  .pb-sm {
    padding-bottom: 8px;
  }
  .pl-sm {
    padding-left: 8px;
  }
  .p-md {
    padding: 8px;
  }
  .px-md {
    padding-left: 8px;
    padding-right: 8px;
  }
  .py-md {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .pt-md {
    padding-top: 8px;
  }
  .pr-md {
    padding-right: 8px;
  }
  .pb-md {
    padding-bottom: 8px;
  }
  .pl-md {
    padding-left: 8px;
  }
  .p-lg {
    padding: 16px;
  }
  .px-lg {
    padding-left: 16px;
    padding-right: 16px;
  }
  .py-lg {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .pt-lg {
    padding-top: 16px;
  }
  .pr-lg {
    padding-right: 16px;
  }
  .pb-lg {
    padding-bottom: 16px;
  }
  .pl-lg {
    padding-left: 16px;
  }
  .p-xl {
    padding: 20px;
  }
  .px-xl {
    padding-left: 20px;
    padding-right: 20px;
  }
  .py-xl {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .pt-xl {
    padding-top: 20px;
  }
  .pr-xl {
    padding-right: 20px;
  }
  .pb-xl {
    padding-bottom: 20px;
  }
  .pl-xl {
    padding-left: 20px;
  }
  .p-xxl {
    padding: 24px;
  }
  .px-xxl {
    padding-left: 24px;
    padding-right: 24px;
  }
  .py-xxl {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .pt-xxl {
    padding-top: 24px;
  }
  .pr-xxl {
    padding-right: 24px;
  }
  .pb-xxl {
    padding-bottom: 24px;
  }
  .pl-xxl {
    padding-left: 24px;
  }
  .p-hu {
    padding: 32px;
  }
  .px-hu {
    padding-left: 32px;
    padding-right: 32px;
  }
  .py-hu {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .pt-hu {
    padding-top: 32px;
  }
  .pr-hu {
    padding-right: 32px;
  }
  .pb-hu {
    padding-bottom: 32px;
  }
  .pl-hu {
    padding-left: 32px;
  }
  .p-xh {
    padding: 40px;
  }
  .px-xh {
    padding-left: 40px;
    padding-right: 40px;
  }
  .py-xh {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .pt-xh {
    padding-top: 40px;
  }
  .pr-xh {
    padding-right: 40px;
  }
  .pb-xh {
    padding-bottom: 40px;
  }
  .pl-xh {
    padding-left: 40px;
  }
  .p-xxh {
    padding: 48px;
  }
  .px-xxh {
    padding-left: 48px;
    padding-right: 48px;
  }
  .py-xxh {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .pt-xxh {
    padding-top: 48px;
  }
  .pr-xxh {
    padding-right: 48px;
  }
  .pb-xxh {
    padding-bottom: 48px;
  }
  .pl-xxh {
    padding-left: 48px;
  }
  .p-xxxh {
    padding: 56px;
  }
  .px-xxxh {
    padding-left: 56px;
    padding-right: 56px;
  }
  .py-xxxh {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .pt-xxxh {
    padding-top: 56px;
  }
  .pr-xxxh {
    padding-right: 56px;
  }
  .pb-xxxh {
    padding-bottom: 56px;
  }
  .pl-xxxh {
    padding-left: 56px;
  }
  .p-gi {
    padding: 64px;
  }
  .px-gi {
    padding-left: 64px;
    padding-right: 64px;
  }
  .py-gi {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .pt-gi {
    padding-top: 64px;
  }
  .pr-gi {
    padding-right: 64px;
  }
  .pb-gi {
    padding-bottom: 64px;
  }
  .pl-gi {
    padding-left: 64px;
  }
  .p-xg {
    padding: 72px;
  }
  .px-xg {
    padding-left: 72px;
    padding-right: 72px;
  }
  .py-xg {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .pt-xg {
    padding-top: 72px;
  }
  .pr-xg {
    padding-right: 72px;
  }
  .pb-xg {
    padding-bottom: 72px;
  }
  .pl-xg {
    padding-left: 72px;
  }
}

.p-0 {
  padding: 0px !important;
}

.px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.p-1 {
  padding: 4px !important;
}

.px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.pt-1 {
  padding-top: 4px !important;
}

.pr-1 {
  padding-right: 4px !important;
}

.pb-1 {
  padding-bottom: 4px !important;
}

.pl-1 {
  padding-left: 4px !important;
}

.p-2 {
  padding: 8px !important;
}

.px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pr-2 {
  padding-right: 8px !important;
}

.pb-2 {
  padding-bottom: 8px !important;
}

.pl-2 {
  padding-left: 8px !important;
}

.p-3 {
  padding: 12px !important;
}

.px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.pt-3 {
  padding-top: 12px !important;
}

.pr-3 {
  padding-right: 12px !important;
}

.pb-3 {
  padding-bottom: 12px !important;
}

.pl-3 {
  padding-left: 12px !important;
}

.p-4 {
  padding: 16px !important;
}

.px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.pt-4 {
  padding-top: 16px !important;
}

.pr-4 {
  padding-right: 16px !important;
}

.pb-4 {
  padding-bottom: 16px !important;
}

.pl-4 {
  padding-left: 16px !important;
}

.p-5 {
  padding: 20px !important;
}

.px-5 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.py-5 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.pt-5 {
  padding-top: 20px !important;
}

.pr-5 {
  padding-right: 20px !important;
}

.pb-5 {
  padding-bottom: 20px !important;
}

.pl-5 {
  padding-left: 20px !important;
}

.p-6 {
  padding: 24px !important;
}

.px-6 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.py-6 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.pt-6 {
  padding-top: 24px !important;
}

.pr-6 {
  padding-right: 24px !important;
}

.pb-6 {
  padding-bottom: 24px !important;
}

.pl-6 {
  padding-left: 24px !important;
}

.p-7 {
  padding: 28px !important;
}

.px-7 {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.py-7 {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.pt-7 {
  padding-top: 28px !important;
}

.pr-7 {
  padding-right: 28px !important;
}

.pb-7 {
  padding-bottom: 28px !important;
}

.pl-7 {
  padding-left: 28px !important;
}

.p-8 {
  padding: 32px !important;
}

.px-8 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.py-8 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.pt-8 {
  padding-top: 32px !important;
}

.pr-8 {
  padding-right: 32px !important;
}

.pb-8 {
  padding-bottom: 32px !important;
}

.pl-8 {
  padding-left: 32px !important;
}

.p-9 {
  padding: 36px !important;
}

.px-9 {
  padding-left: 36px !important;
  padding-right: 36px !important;
}

.py-9 {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

.pt-9 {
  padding-top: 36px !important;
}

.pr-9 {
  padding-right: 36px !important;
}

.pb-9 {
  padding-bottom: 36px !important;
}

.pl-9 {
  padding-left: 36px !important;
}

.p-10 {
  padding: 40px !important;
}

.px-10 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.py-10 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.pt-10 {
  padding-top: 40px !important;
}

.pr-10 {
  padding-right: 40px !important;
}

.pb-10 {
  padding-bottom: 40px !important;
}

.pl-10 {
  padding-left: 40px !important;
}

.p-11 {
  padding: 44px !important;
}

.px-11 {
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.py-11 {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

.pt-11 {
  padding-top: 44px !important;
}

.pr-11 {
  padding-right: 44px !important;
}

.pb-11 {
  padding-bottom: 44px !important;
}

.pl-11 {
  padding-left: 44px !important;
}

.p-12 {
  padding: 48px !important;
}

.px-12 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.py-12 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.pt-12 {
  padding-top: 48px !important;
}

.pr-12 {
  padding-right: 48px !important;
}

.pb-12 {
  padding-bottom: 48px !important;
}

.pl-12 {
  padding-left: 48px !important;
}

.p-13 {
  padding: 52px !important;
}

.px-13 {
  padding-left: 52px !important;
  padding-right: 52px !important;
}

.py-13 {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}

.pt-13 {
  padding-top: 52px !important;
}

.pr-13 {
  padding-right: 52px !important;
}

.pb-13 {
  padding-bottom: 52px !important;
}

.pl-13 {
  padding-left: 52px !important;
}

.p-14 {
  padding: 56px !important;
}

.px-14 {
  padding-left: 56px !important;
  padding-right: 56px !important;
}

.py-14 {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.pt-14 {
  padding-top: 56px !important;
}

.pr-14 {
  padding-right: 56px !important;
}

.pb-14 {
  padding-bottom: 56px !important;
}

.pl-14 {
  padding-left: 56px !important;
}

.p-15 {
  padding: 60px !important;
}

.px-15 {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

.py-15 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.pt-15 {
  padding-top: 60px !important;
}

.pr-15 {
  padding-right: 60px !important;
}

.pb-15 {
  padding-bottom: 60px !important;
}

.pl-15 {
  padding-left: 60px !important;
}

.p-16 {
  padding: 64px !important;
}

.px-16 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.py-16 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.pt-16 {
  padding-top: 64px !important;
}

.pr-16 {
  padding-right: 64px !important;
}

.pb-16 {
  padding-bottom: 64px !important;
}

.pl-16 {
  padding-left: 64px !important;
}

.p-17 {
  padding: 68px !important;
}

.px-17 {
  padding-left: 68px !important;
  padding-right: 68px !important;
}

.py-17 {
  padding-top: 68px !important;
  padding-bottom: 68px !important;
}

.pt-17 {
  padding-top: 68px !important;
}

.pr-17 {
  padding-right: 68px !important;
}

.pb-17 {
  padding-bottom: 68px !important;
}

.pl-17 {
  padding-left: 68px !important;
}

.p-18 {
  padding: 72px !important;
}

.px-18 {
  padding-left: 72px !important;
  padding-right: 72px !important;
}

.py-18 {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.pt-18 {
  padding-top: 72px !important;
}

.pr-18 {
  padding-right: 72px !important;
}

.pb-18 {
  padding-bottom: 72px !important;
}

.pl-18 {
  padding-left: 72px !important;
}

.p-19 {
  padding: 76px !important;
}

.px-19 {
  padding-left: 76px !important;
  padding-right: 76px !important;
}

.py-19 {
  padding-top: 76px !important;
  padding-bottom: 76px !important;
}

.pt-19 {
  padding-top: 76px !important;
}

.pr-19 {
  padding-right: 76px !important;
}

.pb-19 {
  padding-bottom: 76px !important;
}

.pl-19 {
  padding-left: 76px !important;
}

.p-20 {
  padding: 80px !important;
}

.px-20 {
  padding-left: 80px !important;
  padding-right: 80px !important;
}

.py-20 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.pt-20 {
  padding-top: 80px !important;
}

.pr-20 {
  padding-right: 80px !important;
}

.pb-20 {
  padding-bottom: 80px !important;
}

.pl-20 {
  padding-left: 80px !important;
}

.p-21 {
  padding: 84px !important;
}

.px-21 {
  padding-left: 84px !important;
  padding-right: 84px !important;
}

.py-21 {
  padding-top: 84px !important;
  padding-bottom: 84px !important;
}

.pt-21 {
  padding-top: 84px !important;
}

.pr-21 {
  padding-right: 84px !important;
}

.pb-21 {
  padding-bottom: 84px !important;
}

.pl-21 {
  padding-left: 84px !important;
}

.p-22 {
  padding: 88px !important;
}

.px-22 {
  padding-left: 88px !important;
  padding-right: 88px !important;
}

.py-22 {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

.pt-22 {
  padding-top: 88px !important;
}

.pr-22 {
  padding-right: 88px !important;
}

.pb-22 {
  padding-bottom: 88px !important;
}

.pl-22 {
  padding-left: 88px !important;
}

.p-23 {
  padding: 92px !important;
}

.px-23 {
  padding-left: 92px !important;
  padding-right: 92px !important;
}

.py-23 {
  padding-top: 92px !important;
  padding-bottom: 92px !important;
}

.pt-23 {
  padding-top: 92px !important;
}

.pr-23 {
  padding-right: 92px !important;
}

.pb-23 {
  padding-bottom: 92px !important;
}

.pl-23 {
  padding-left: 92px !important;
}

.p-24 {
  padding: 96px !important;
}

.px-24 {
  padding-left: 96px !important;
  padding-right: 96px !important;
}

.py-24 {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.pt-24 {
  padding-top: 96px !important;
}

.pr-24 {
  padding-right: 96px !important;
}

.pb-24 {
  padding-bottom: 96px !important;
}

.pl-24 {
  padding-left: 96px !important;
}

.p-25 {
  padding: 100px !important;
}

.px-25 {
  padding-left: 100px !important;
  padding-right: 100px !important;
}

.py-25 {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

.pt-25 {
  padding-top: 100px !important;
}

.pr-25 {
  padding-right: 100px !important;
}

.pb-25 {
  padding-bottom: 100px !important;
}

.pl-25 {
  padding-left: 100px !important;
}

.p-26 {
  padding: 104px !important;
}

.px-26 {
  padding-left: 104px !important;
  padding-right: 104px !important;
}

.py-26 {
  padding-top: 104px !important;
  padding-bottom: 104px !important;
}

.pt-26 {
  padding-top: 104px !important;
}

.pr-26 {
  padding-right: 104px !important;
}

.pb-26 {
  padding-bottom: 104px !important;
}

.pl-26 {
  padding-left: 104px !important;
}

.p-27 {
  padding: 108px !important;
}

.px-27 {
  padding-left: 108px !important;
  padding-right: 108px !important;
}

.py-27 {
  padding-top: 108px !important;
  padding-bottom: 108px !important;
}

.pt-27 {
  padding-top: 108px !important;
}

.pr-27 {
  padding-right: 108px !important;
}

.pb-27 {
  padding-bottom: 108px !important;
}

.pl-27 {
  padding-left: 108px !important;
}

.p-28 {
  padding: 112px !important;
}

.px-28 {
  padding-left: 112px !important;
  padding-right: 112px !important;
}

.py-28 {
  padding-top: 112px !important;
  padding-bottom: 112px !important;
}

.pt-28 {
  padding-top: 112px !important;
}

.pr-28 {
  padding-right: 112px !important;
}

.pb-28 {
  padding-bottom: 112px !important;
}

.pl-28 {
  padding-left: 112px !important;
}

.p-29 {
  padding: 116px !important;
}

.px-29 {
  padding-left: 116px !important;
  padding-right: 116px !important;
}

.py-29 {
  padding-top: 116px !important;
  padding-bottom: 116px !important;
}

.pt-29 {
  padding-top: 116px !important;
}

.pr-29 {
  padding-right: 116px !important;
}

.pb-29 {
  padding-bottom: 116px !important;
}

.pl-29 {
  padding-left: 116px !important;
}

.p-30 {
  padding: 120px !important;
}

.px-30 {
  padding-left: 120px !important;
  padding-right: 120px !important;
}

.py-30 {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

.pt-30 {
  padding-top: 120px !important;
}

.pr-30 {
  padding-right: 120px !important;
}

.pb-30 {
  padding-bottom: 120px !important;
}

.pl-30 {
  padding-left: 120px !important;
}

.p-31 {
  padding: 124px !important;
}

.px-31 {
  padding-left: 124px !important;
  padding-right: 124px !important;
}

.py-31 {
  padding-top: 124px !important;
  padding-bottom: 124px !important;
}

.pt-31 {
  padding-top: 124px !important;
}

.pr-31 {
  padding-right: 124px !important;
}

.pb-31 {
  padding-bottom: 124px !important;
}

.pl-31 {
  padding-left: 124px !important;
}

.p-32 {
  padding: 128px !important;
}

.px-32 {
  padding-left: 128px !important;
  padding-right: 128px !important;
}

.py-32 {
  padding-top: 128px !important;
  padding-bottom: 128px !important;
}

.pt-32 {
  padding-top: 128px !important;
}

.pr-32 {
  padding-right: 128px !important;
}

.pb-32 {
  padding-bottom: 128px !important;
}

.pl-32 {
  padding-left: 128px !important;
}

.p-33 {
  padding: 132px !important;
}

.px-33 {
  padding-left: 132px !important;
  padding-right: 132px !important;
}

.py-33 {
  padding-top: 132px !important;
  padding-bottom: 132px !important;
}

.pt-33 {
  padding-top: 132px !important;
}

.pr-33 {
  padding-right: 132px !important;
}

.pb-33 {
  padding-bottom: 132px !important;
}

.pl-33 {
  padding-left: 132px !important;
}

.p-34 {
  padding: 136px !important;
}

.px-34 {
  padding-left: 136px !important;
  padding-right: 136px !important;
}

.py-34 {
  padding-top: 136px !important;
  padding-bottom: 136px !important;
}

.pt-34 {
  padding-top: 136px !important;
}

.pr-34 {
  padding-right: 136px !important;
}

.pb-34 {
  padding-bottom: 136px !important;
}

.pl-34 {
  padding-left: 136px !important;
}

.p-35 {
  padding: 140px !important;
}

.px-35 {
  padding-left: 140px !important;
  padding-right: 140px !important;
}

.py-35 {
  padding-top: 140px !important;
  padding-bottom: 140px !important;
}

.pt-35 {
  padding-top: 140px !important;
}

.pr-35 {
  padding-right: 140px !important;
}

.pb-35 {
  padding-bottom: 140px !important;
}

.pl-35 {
  padding-left: 140px !important;
}

.p-36 {
  padding: 144px !important;
}

.px-36 {
  padding-left: 144px !important;
  padding-right: 144px !important;
}

.py-36 {
  padding-top: 144px !important;
  padding-bottom: 144px !important;
}

.pt-36 {
  padding-top: 144px !important;
}

.pr-36 {
  padding-right: 144px !important;
}

.pb-36 {
  padding-bottom: 144px !important;
}

.pl-36 {
  padding-left: 144px !important;
}

.p-37 {
  padding: 148px !important;
}

.px-37 {
  padding-left: 148px !important;
  padding-right: 148px !important;
}

.py-37 {
  padding-top: 148px !important;
  padding-bottom: 148px !important;
}

.pt-37 {
  padding-top: 148px !important;
}

.pr-37 {
  padding-right: 148px !important;
}

.pb-37 {
  padding-bottom: 148px !important;
}

.pl-37 {
  padding-left: 148px !important;
}

.p-38 {
  padding: 152px !important;
}

.px-38 {
  padding-left: 152px !important;
  padding-right: 152px !important;
}

.py-38 {
  padding-top: 152px !important;
  padding-bottom: 152px !important;
}

.pt-38 {
  padding-top: 152px !important;
}

.pr-38 {
  padding-right: 152px !important;
}

.pb-38 {
  padding-bottom: 152px !important;
}

.pl-38 {
  padding-left: 152px !important;
}

.p-39 {
  padding: 156px !important;
}

.px-39 {
  padding-left: 156px !important;
  padding-right: 156px !important;
}

.py-39 {
  padding-top: 156px !important;
  padding-bottom: 156px !important;
}

.pt-39 {
  padding-top: 156px !important;
}

.pr-39 {
  padding-right: 156px !important;
}

.pb-39 {
  padding-bottom: 156px !important;
}

.pl-39 {
  padding-left: 156px !important;
}

.p-40 {
  padding: 160px !important;
}

.px-40 {
  padding-left: 160px !important;
  padding-right: 160px !important;
}

.py-40 {
  padding-top: 160px !important;
  padding-bottom: 160px !important;
}

.pt-40 {
  padding-top: 160px !important;
}

.pr-40 {
  padding-right: 160px !important;
}

.pb-40 {
  padding-bottom: 160px !important;
}

.pl-40 {
  padding-left: 160px !important;
}

.p-41 {
  padding: 164px !important;
}

.px-41 {
  padding-left: 164px !important;
  padding-right: 164px !important;
}

.py-41 {
  padding-top: 164px !important;
  padding-bottom: 164px !important;
}

.pt-41 {
  padding-top: 164px !important;
}

.pr-41 {
  padding-right: 164px !important;
}

.pb-41 {
  padding-bottom: 164px !important;
}

.pl-41 {
  padding-left: 164px !important;
}

.p-42 {
  padding: 168px !important;
}

.px-42 {
  padding-left: 168px !important;
  padding-right: 168px !important;
}

.py-42 {
  padding-top: 168px !important;
  padding-bottom: 168px !important;
}

.pt-42 {
  padding-top: 168px !important;
}

.pr-42 {
  padding-right: 168px !important;
}

.pb-42 {
  padding-bottom: 168px !important;
}

.pl-42 {
  padding-left: 168px !important;
}

.p-43 {
  padding: 172px !important;
}

.px-43 {
  padding-left: 172px !important;
  padding-right: 172px !important;
}

.py-43 {
  padding-top: 172px !important;
  padding-bottom: 172px !important;
}

.pt-43 {
  padding-top: 172px !important;
}

.pr-43 {
  padding-right: 172px !important;
}

.pb-43 {
  padding-bottom: 172px !important;
}

.pl-43 {
  padding-left: 172px !important;
}

.p-44 {
  padding: 176px !important;
}

.px-44 {
  padding-left: 176px !important;
  padding-right: 176px !important;
}

.py-44 {
  padding-top: 176px !important;
  padding-bottom: 176px !important;
}

.pt-44 {
  padding-top: 176px !important;
}

.pr-44 {
  padding-right: 176px !important;
}

.pb-44 {
  padding-bottom: 176px !important;
}

.pl-44 {
  padding-left: 176px !important;
}

.p-45 {
  padding: 180px !important;
}

.px-45 {
  padding-left: 180px !important;
  padding-right: 180px !important;
}

.py-45 {
  padding-top: 180px !important;
  padding-bottom: 180px !important;
}

.pt-45 {
  padding-top: 180px !important;
}

.pr-45 {
  padding-right: 180px !important;
}

.pb-45 {
  padding-bottom: 180px !important;
}

.pl-45 {
  padding-left: 180px !important;
}

.p-46 {
  padding: 184px !important;
}

.px-46 {
  padding-left: 184px !important;
  padding-right: 184px !important;
}

.py-46 {
  padding-top: 184px !important;
  padding-bottom: 184px !important;
}

.pt-46 {
  padding-top: 184px !important;
}

.pr-46 {
  padding-right: 184px !important;
}

.pb-46 {
  padding-bottom: 184px !important;
}

.pl-46 {
  padding-left: 184px !important;
}

.p-47 {
  padding: 188px !important;
}

.px-47 {
  padding-left: 188px !important;
  padding-right: 188px !important;
}

.py-47 {
  padding-top: 188px !important;
  padding-bottom: 188px !important;
}

.pt-47 {
  padding-top: 188px !important;
}

.pr-47 {
  padding-right: 188px !important;
}

.pb-47 {
  padding-bottom: 188px !important;
}

.pl-47 {
  padding-left: 188px !important;
}

.p-48 {
  padding: 192px !important;
}

.px-48 {
  padding-left: 192px !important;
  padding-right: 192px !important;
}

.py-48 {
  padding-top: 192px !important;
  padding-bottom: 192px !important;
}

.pt-48 {
  padding-top: 192px !important;
}

.pr-48 {
  padding-right: 192px !important;
}

.pb-48 {
  padding-bottom: 192px !important;
}

.pl-48 {
  padding-left: 192px !important;
}

.p-49 {
  padding: 196px !important;
}

.px-49 {
  padding-left: 196px !important;
  padding-right: 196px !important;
}

.py-49 {
  padding-top: 196px !important;
  padding-bottom: 196px !important;
}

.pt-49 {
  padding-top: 196px !important;
}

.pr-49 {
  padding-right: 196px !important;
}

.pb-49 {
  padding-bottom: 196px !important;
}

.pl-49 {
  padding-left: 196px !important;
}

.p-50 {
  padding: 200px !important;
}

.px-50 {
  padding-left: 200px !important;
  padding-right: 200px !important;
}

.py-50 {
  padding-top: 200px !important;
  padding-bottom: 200px !important;
}

.pt-50 {
  padding-top: 200px !important;
}

.pr-50 {
  padding-right: 200px !important;
}

.pb-50 {
  padding-bottom: 200px !important;
}

.pl-50 {
  padding-left: 200px !important;
}

.p-51 {
  padding: 204px !important;
}

.px-51 {
  padding-left: 204px !important;
  padding-right: 204px !important;
}

.py-51 {
  padding-top: 204px !important;
  padding-bottom: 204px !important;
}

.pt-51 {
  padding-top: 204px !important;
}

.pr-51 {
  padding-right: 204px !important;
}

.pb-51 {
  padding-bottom: 204px !important;
}

.pl-51 {
  padding-left: 204px !important;
}

.p-52 {
  padding: 208px !important;
}

.px-52 {
  padding-left: 208px !important;
  padding-right: 208px !important;
}

.py-52 {
  padding-top: 208px !important;
  padding-bottom: 208px !important;
}

.pt-52 {
  padding-top: 208px !important;
}

.pr-52 {
  padding-right: 208px !important;
}

.pb-52 {
  padding-bottom: 208px !important;
}

.pl-52 {
  padding-left: 208px !important;
}

.p-53 {
  padding: 212px !important;
}

.px-53 {
  padding-left: 212px !important;
  padding-right: 212px !important;
}

.py-53 {
  padding-top: 212px !important;
  padding-bottom: 212px !important;
}

.pt-53 {
  padding-top: 212px !important;
}

.pr-53 {
  padding-right: 212px !important;
}

.pb-53 {
  padding-bottom: 212px !important;
}

.pl-53 {
  padding-left: 212px !important;
}

.p-54 {
  padding: 216px !important;
}

.px-54 {
  padding-left: 216px !important;
  padding-right: 216px !important;
}

.py-54 {
  padding-top: 216px !important;
  padding-bottom: 216px !important;
}

.pt-54 {
  padding-top: 216px !important;
}

.pr-54 {
  padding-right: 216px !important;
}

.pb-54 {
  padding-bottom: 216px !important;
}

.pl-54 {
  padding-left: 216px !important;
}

.p-55 {
  padding: 220px !important;
}

.px-55 {
  padding-left: 220px !important;
  padding-right: 220px !important;
}

.py-55 {
  padding-top: 220px !important;
  padding-bottom: 220px !important;
}

.pt-55 {
  padding-top: 220px !important;
}

.pr-55 {
  padding-right: 220px !important;
}

.pb-55 {
  padding-bottom: 220px !important;
}

.pl-55 {
  padding-left: 220px !important;
}

.p-56 {
  padding: 224px !important;
}

.px-56 {
  padding-left: 224px !important;
  padding-right: 224px !important;
}

.py-56 {
  padding-top: 224px !important;
  padding-bottom: 224px !important;
}

.pt-56 {
  padding-top: 224px !important;
}

.pr-56 {
  padding-right: 224px !important;
}

.pb-56 {
  padding-bottom: 224px !important;
}

.pl-56 {
  padding-left: 224px !important;
}

.p-57 {
  padding: 228px !important;
}

.px-57 {
  padding-left: 228px !important;
  padding-right: 228px !important;
}

.py-57 {
  padding-top: 228px !important;
  padding-bottom: 228px !important;
}

.pt-57 {
  padding-top: 228px !important;
}

.pr-57 {
  padding-right: 228px !important;
}

.pb-57 {
  padding-bottom: 228px !important;
}

.pl-57 {
  padding-left: 228px !important;
}

.p-58 {
  padding: 232px !important;
}

.px-58 {
  padding-left: 232px !important;
  padding-right: 232px !important;
}

.py-58 {
  padding-top: 232px !important;
  padding-bottom: 232px !important;
}

.pt-58 {
  padding-top: 232px !important;
}

.pr-58 {
  padding-right: 232px !important;
}

.pb-58 {
  padding-bottom: 232px !important;
}

.pl-58 {
  padding-left: 232px !important;
}

.p-59 {
  padding: 236px !important;
}

.px-59 {
  padding-left: 236px !important;
  padding-right: 236px !important;
}

.py-59 {
  padding-top: 236px !important;
  padding-bottom: 236px !important;
}

.pt-59 {
  padding-top: 236px !important;
}

.pr-59 {
  padding-right: 236px !important;
}

.pb-59 {
  padding-bottom: 236px !important;
}

.pl-59 {
  padding-left: 236px !important;
}

.p-60 {
  padding: 240px !important;
}

.px-60 {
  padding-left: 240px !important;
  padding-right: 240px !important;
}

.py-60 {
  padding-top: 240px !important;
  padding-bottom: 240px !important;
}

.pt-60 {
  padding-top: 240px !important;
}

.pr-60 {
  padding-right: 240px !important;
}

.pb-60 {
  padding-bottom: 240px !important;
}

.pl-60 {
  padding-left: 240px !important;
}

.p-61 {
  padding: 244px !important;
}

.px-61 {
  padding-left: 244px !important;
  padding-right: 244px !important;
}

.py-61 {
  padding-top: 244px !important;
  padding-bottom: 244px !important;
}

.pt-61 {
  padding-top: 244px !important;
}

.pr-61 {
  padding-right: 244px !important;
}

.pb-61 {
  padding-bottom: 244px !important;
}

.pl-61 {
  padding-left: 244px !important;
}

.p-62 {
  padding: 248px !important;
}

.px-62 {
  padding-left: 248px !important;
  padding-right: 248px !important;
}

.py-62 {
  padding-top: 248px !important;
  padding-bottom: 248px !important;
}

.pt-62 {
  padding-top: 248px !important;
}

.pr-62 {
  padding-right: 248px !important;
}

.pb-62 {
  padding-bottom: 248px !important;
}

.pl-62 {
  padding-left: 248px !important;
}

.p-63 {
  padding: 252px !important;
}

.px-63 {
  padding-left: 252px !important;
  padding-right: 252px !important;
}

.py-63 {
  padding-top: 252px !important;
  padding-bottom: 252px !important;
}

.pt-63 {
  padding-top: 252px !important;
}

.pr-63 {
  padding-right: 252px !important;
}

.pb-63 {
  padding-bottom: 252px !important;
}

.pl-63 {
  padding-left: 252px !important;
}

.p-64 {
  padding: 256px !important;
}

.px-64 {
  padding-left: 256px !important;
  padding-right: 256px !important;
}

.py-64 {
  padding-top: 256px !important;
  padding-bottom: 256px !important;
}

.pt-64 {
  padding-top: 256px !important;
}

.pr-64 {
  padding-right: 256px !important;
}

.pb-64 {
  padding-bottom: 256px !important;
}

.pl-64 {
  padding-left: 256px !important;
}

.p-65 {
  padding: 260px !important;
}

.px-65 {
  padding-left: 260px !important;
  padding-right: 260px !important;
}

.py-65 {
  padding-top: 260px !important;
  padding-bottom: 260px !important;
}

.pt-65 {
  padding-top: 260px !important;
}

.pr-65 {
  padding-right: 260px !important;
}

.pb-65 {
  padding-bottom: 260px !important;
}

.pl-65 {
  padding-left: 260px !important;
}

.p-66 {
  padding: 264px !important;
}

.px-66 {
  padding-left: 264px !important;
  padding-right: 264px !important;
}

.py-66 {
  padding-top: 264px !important;
  padding-bottom: 264px !important;
}

.pt-66 {
  padding-top: 264px !important;
}

.pr-66 {
  padding-right: 264px !important;
}

.pb-66 {
  padding-bottom: 264px !important;
}

.pl-66 {
  padding-left: 264px !important;
}

.p-67 {
  padding: 268px !important;
}

.px-67 {
  padding-left: 268px !important;
  padding-right: 268px !important;
}

.py-67 {
  padding-top: 268px !important;
  padding-bottom: 268px !important;
}

.pt-67 {
  padding-top: 268px !important;
}

.pr-67 {
  padding-right: 268px !important;
}

.pb-67 {
  padding-bottom: 268px !important;
}

.pl-67 {
  padding-left: 268px !important;
}

.p-68 {
  padding: 272px !important;
}

.px-68 {
  padding-left: 272px !important;
  padding-right: 272px !important;
}

.py-68 {
  padding-top: 272px !important;
  padding-bottom: 272px !important;
}

.pt-68 {
  padding-top: 272px !important;
}

.pr-68 {
  padding-right: 272px !important;
}

.pb-68 {
  padding-bottom: 272px !important;
}

.pl-68 {
  padding-left: 272px !important;
}

.p-69 {
  padding: 276px !important;
}

.px-69 {
  padding-left: 276px !important;
  padding-right: 276px !important;
}

.py-69 {
  padding-top: 276px !important;
  padding-bottom: 276px !important;
}

.pt-69 {
  padding-top: 276px !important;
}

.pr-69 {
  padding-right: 276px !important;
}

.pb-69 {
  padding-bottom: 276px !important;
}

.pl-69 {
  padding-left: 276px !important;
}

.p-70 {
  padding: 280px !important;
}

.px-70 {
  padding-left: 280px !important;
  padding-right: 280px !important;
}

.py-70 {
  padding-top: 280px !important;
  padding-bottom: 280px !important;
}

.pt-70 {
  padding-top: 280px !important;
}

.pr-70 {
  padding-right: 280px !important;
}

.pb-70 {
  padding-bottom: 280px !important;
}

.pl-70 {
  padding-left: 280px !important;
}

.p-71 {
  padding: 284px !important;
}

.px-71 {
  padding-left: 284px !important;
  padding-right: 284px !important;
}

.py-71 {
  padding-top: 284px !important;
  padding-bottom: 284px !important;
}

.pt-71 {
  padding-top: 284px !important;
}

.pr-71 {
  padding-right: 284px !important;
}

.pb-71 {
  padding-bottom: 284px !important;
}

.pl-71 {
  padding-left: 284px !important;
}

.p-72 {
  padding: 288px !important;
}

.px-72 {
  padding-left: 288px !important;
  padding-right: 288px !important;
}

.py-72 {
  padding-top: 288px !important;
  padding-bottom: 288px !important;
}

.pt-72 {
  padding-top: 288px !important;
}

.pr-72 {
  padding-right: 288px !important;
}

.pb-72 {
  padding-bottom: 288px !important;
}

.pl-72 {
  padding-left: 288px !important;
}

.p-73 {
  padding: 292px !important;
}

.px-73 {
  padding-left: 292px !important;
  padding-right: 292px !important;
}

.py-73 {
  padding-top: 292px !important;
  padding-bottom: 292px !important;
}

.pt-73 {
  padding-top: 292px !important;
}

.pr-73 {
  padding-right: 292px !important;
}

.pb-73 {
  padding-bottom: 292px !important;
}

.pl-73 {
  padding-left: 292px !important;
}

.p-74 {
  padding: 296px !important;
}

.px-74 {
  padding-left: 296px !important;
  padding-right: 296px !important;
}

.py-74 {
  padding-top: 296px !important;
  padding-bottom: 296px !important;
}

.pt-74 {
  padding-top: 296px !important;
}

.pr-74 {
  padding-right: 296px !important;
}

.pb-74 {
  padding-bottom: 296px !important;
}

.pl-74 {
  padding-left: 296px !important;
}

.p-75 {
  padding: 300px !important;
}

.px-75 {
  padding-left: 300px !important;
  padding-right: 300px !important;
}

.py-75 {
  padding-top: 300px !important;
  padding-bottom: 300px !important;
}

.pt-75 {
  padding-top: 300px !important;
}

.pr-75 {
  padding-right: 300px !important;
}

.pb-75 {
  padding-bottom: 300px !important;
}

.pl-75 {
  padding-left: 300px !important;
}

.p-76 {
  padding: 304px !important;
}

.px-76 {
  padding-left: 304px !important;
  padding-right: 304px !important;
}

.py-76 {
  padding-top: 304px !important;
  padding-bottom: 304px !important;
}

.pt-76 {
  padding-top: 304px !important;
}

.pr-76 {
  padding-right: 304px !important;
}

.pb-76 {
  padding-bottom: 304px !important;
}

.pl-76 {
  padding-left: 304px !important;
}

.p-77 {
  padding: 308px !important;
}

.px-77 {
  padding-left: 308px !important;
  padding-right: 308px !important;
}

.py-77 {
  padding-top: 308px !important;
  padding-bottom: 308px !important;
}

.pt-77 {
  padding-top: 308px !important;
}

.pr-77 {
  padding-right: 308px !important;
}

.pb-77 {
  padding-bottom: 308px !important;
}

.pl-77 {
  padding-left: 308px !important;
}

.p-78 {
  padding: 312px !important;
}

.px-78 {
  padding-left: 312px !important;
  padding-right: 312px !important;
}

.py-78 {
  padding-top: 312px !important;
  padding-bottom: 312px !important;
}

.pt-78 {
  padding-top: 312px !important;
}

.pr-78 {
  padding-right: 312px !important;
}

.pb-78 {
  padding-bottom: 312px !important;
}

.pl-78 {
  padding-left: 312px !important;
}

.p-79 {
  padding: 316px !important;
}

.px-79 {
  padding-left: 316px !important;
  padding-right: 316px !important;
}

.py-79 {
  padding-top: 316px !important;
  padding-bottom: 316px !important;
}

.pt-79 {
  padding-top: 316px !important;
}

.pr-79 {
  padding-right: 316px !important;
}

.pb-79 {
  padding-bottom: 316px !important;
}

.pl-79 {
  padding-left: 316px !important;
}

.p-80 {
  padding: 320px !important;
}

.px-80 {
  padding-left: 320px !important;
  padding-right: 320px !important;
}

.py-80 {
  padding-top: 320px !important;
  padding-bottom: 320px !important;
}

.pt-80 {
  padding-top: 320px !important;
}

.pr-80 {
  padding-right: 320px !important;
}

.pb-80 {
  padding-bottom: 320px !important;
}

.pl-80 {
  padding-left: 320px !important;
}

.p-81 {
  padding: 324px !important;
}

.px-81 {
  padding-left: 324px !important;
  padding-right: 324px !important;
}

.py-81 {
  padding-top: 324px !important;
  padding-bottom: 324px !important;
}

.pt-81 {
  padding-top: 324px !important;
}

.pr-81 {
  padding-right: 324px !important;
}

.pb-81 {
  padding-bottom: 324px !important;
}

.pl-81 {
  padding-left: 324px !important;
}

.p-82 {
  padding: 328px !important;
}

.px-82 {
  padding-left: 328px !important;
  padding-right: 328px !important;
}

.py-82 {
  padding-top: 328px !important;
  padding-bottom: 328px !important;
}

.pt-82 {
  padding-top: 328px !important;
}

.pr-82 {
  padding-right: 328px !important;
}

.pb-82 {
  padding-bottom: 328px !important;
}

.pl-82 {
  padding-left: 328px !important;
}

.p-83 {
  padding: 332px !important;
}

.px-83 {
  padding-left: 332px !important;
  padding-right: 332px !important;
}

.py-83 {
  padding-top: 332px !important;
  padding-bottom: 332px !important;
}

.pt-83 {
  padding-top: 332px !important;
}

.pr-83 {
  padding-right: 332px !important;
}

.pb-83 {
  padding-bottom: 332px !important;
}

.pl-83 {
  padding-left: 332px !important;
}

.p-84 {
  padding: 336px !important;
}

.px-84 {
  padding-left: 336px !important;
  padding-right: 336px !important;
}

.py-84 {
  padding-top: 336px !important;
  padding-bottom: 336px !important;
}

.pt-84 {
  padding-top: 336px !important;
}

.pr-84 {
  padding-right: 336px !important;
}

.pb-84 {
  padding-bottom: 336px !important;
}

.pl-84 {
  padding-left: 336px !important;
}

.p-85 {
  padding: 340px !important;
}

.px-85 {
  padding-left: 340px !important;
  padding-right: 340px !important;
}

.py-85 {
  padding-top: 340px !important;
  padding-bottom: 340px !important;
}

.pt-85 {
  padding-top: 340px !important;
}

.pr-85 {
  padding-right: 340px !important;
}

.pb-85 {
  padding-bottom: 340px !important;
}

.pl-85 {
  padding-left: 340px !important;
}

.p-86 {
  padding: 344px !important;
}

.px-86 {
  padding-left: 344px !important;
  padding-right: 344px !important;
}

.py-86 {
  padding-top: 344px !important;
  padding-bottom: 344px !important;
}

.pt-86 {
  padding-top: 344px !important;
}

.pr-86 {
  padding-right: 344px !important;
}

.pb-86 {
  padding-bottom: 344px !important;
}

.pl-86 {
  padding-left: 344px !important;
}

.p-87 {
  padding: 348px !important;
}

.px-87 {
  padding-left: 348px !important;
  padding-right: 348px !important;
}

.py-87 {
  padding-top: 348px !important;
  padding-bottom: 348px !important;
}

.pt-87 {
  padding-top: 348px !important;
}

.pr-87 {
  padding-right: 348px !important;
}

.pb-87 {
  padding-bottom: 348px !important;
}

.pl-87 {
  padding-left: 348px !important;
}

.p-88 {
  padding: 352px !important;
}

.px-88 {
  padding-left: 352px !important;
  padding-right: 352px !important;
}

.py-88 {
  padding-top: 352px !important;
  padding-bottom: 352px !important;
}

.pt-88 {
  padding-top: 352px !important;
}

.pr-88 {
  padding-right: 352px !important;
}

.pb-88 {
  padding-bottom: 352px !important;
}

.pl-88 {
  padding-left: 352px !important;
}

.p-89 {
  padding: 356px !important;
}

.px-89 {
  padding-left: 356px !important;
  padding-right: 356px !important;
}

.py-89 {
  padding-top: 356px !important;
  padding-bottom: 356px !important;
}

.pt-89 {
  padding-top: 356px !important;
}

.pr-89 {
  padding-right: 356px !important;
}

.pb-89 {
  padding-bottom: 356px !important;
}

.pl-89 {
  padding-left: 356px !important;
}

.p-90 {
  padding: 360px !important;
}

.px-90 {
  padding-left: 360px !important;
  padding-right: 360px !important;
}

.py-90 {
  padding-top: 360px !important;
  padding-bottom: 360px !important;
}

.pt-90 {
  padding-top: 360px !important;
}

.pr-90 {
  padding-right: 360px !important;
}

.pb-90 {
  padding-bottom: 360px !important;
}

.pl-90 {
  padding-left: 360px !important;
}

.p-91 {
  padding: 364px !important;
}

.px-91 {
  padding-left: 364px !important;
  padding-right: 364px !important;
}

.py-91 {
  padding-top: 364px !important;
  padding-bottom: 364px !important;
}

.pt-91 {
  padding-top: 364px !important;
}

.pr-91 {
  padding-right: 364px !important;
}

.pb-91 {
  padding-bottom: 364px !important;
}

.pl-91 {
  padding-left: 364px !important;
}

.p-92 {
  padding: 368px !important;
}

.px-92 {
  padding-left: 368px !important;
  padding-right: 368px !important;
}

.py-92 {
  padding-top: 368px !important;
  padding-bottom: 368px !important;
}

.pt-92 {
  padding-top: 368px !important;
}

.pr-92 {
  padding-right: 368px !important;
}

.pb-92 {
  padding-bottom: 368px !important;
}

.pl-92 {
  padding-left: 368px !important;
}

.p-93 {
  padding: 372px !important;
}

.px-93 {
  padding-left: 372px !important;
  padding-right: 372px !important;
}

.py-93 {
  padding-top: 372px !important;
  padding-bottom: 372px !important;
}

.pt-93 {
  padding-top: 372px !important;
}

.pr-93 {
  padding-right: 372px !important;
}

.pb-93 {
  padding-bottom: 372px !important;
}

.pl-93 {
  padding-left: 372px !important;
}

.p-94 {
  padding: 376px !important;
}

.px-94 {
  padding-left: 376px !important;
  padding-right: 376px !important;
}

.py-94 {
  padding-top: 376px !important;
  padding-bottom: 376px !important;
}

.pt-94 {
  padding-top: 376px !important;
}

.pr-94 {
  padding-right: 376px !important;
}

.pb-94 {
  padding-bottom: 376px !important;
}

.pl-94 {
  padding-left: 376px !important;
}

.p-95 {
  padding: 380px !important;
}

.px-95 {
  padding-left: 380px !important;
  padding-right: 380px !important;
}

.py-95 {
  padding-top: 380px !important;
  padding-bottom: 380px !important;
}

.pt-95 {
  padding-top: 380px !important;
}

.pr-95 {
  padding-right: 380px !important;
}

.pb-95 {
  padding-bottom: 380px !important;
}

.pl-95 {
  padding-left: 380px !important;
}

.p-96 {
  padding: 384px !important;
}

.px-96 {
  padding-left: 384px !important;
  padding-right: 384px !important;
}

.py-96 {
  padding-top: 384px !important;
  padding-bottom: 384px !important;
}

.pt-96 {
  padding-top: 384px !important;
}

.pr-96 {
  padding-right: 384px !important;
}

.pb-96 {
  padding-bottom: 384px !important;
}

.pl-96 {
  padding-left: 384px !important;
}

.p-97 {
  padding: 388px !important;
}

.px-97 {
  padding-left: 388px !important;
  padding-right: 388px !important;
}

.py-97 {
  padding-top: 388px !important;
  padding-bottom: 388px !important;
}

.pt-97 {
  padding-top: 388px !important;
}

.pr-97 {
  padding-right: 388px !important;
}

.pb-97 {
  padding-bottom: 388px !important;
}

.pl-97 {
  padding-left: 388px !important;
}

.p-98 {
  padding: 392px !important;
}

.px-98 {
  padding-left: 392px !important;
  padding-right: 392px !important;
}

.py-98 {
  padding-top: 392px !important;
  padding-bottom: 392px !important;
}

.pt-98 {
  padding-top: 392px !important;
}

.pr-98 {
  padding-right: 392px !important;
}

.pb-98 {
  padding-bottom: 392px !important;
}

.pl-98 {
  padding-left: 392px !important;
}

.p-99 {
  padding: 396px !important;
}

.px-99 {
  padding-left: 396px !important;
  padding-right: 396px !important;
}

.py-99 {
  padding-top: 396px !important;
  padding-bottom: 396px !important;
}

.pt-99 {
  padding-top: 396px !important;
}

.pr-99 {
  padding-right: 396px !important;
}

.pb-99 {
  padding-bottom: 396px !important;
}

.pl-99 {
  padding-left: 396px !important;
}

.p-100 {
  padding: 400px !important;
}

.px-100 {
  padding-left: 400px !important;
  padding-right: 400px !important;
}

.py-100 {
  padding-top: 400px !important;
  padding-bottom: 400px !important;
}

.pt-100 {
  padding-top: 400px !important;
}

.pr-100 {
  padding-right: 400px !important;
}

.pb-100 {
  padding-bottom: 400px !important;
}

.pl-100 {
  padding-left: 400px !important;
}

.custom-radio {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-radio input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--swatches-base-default-alt);
  background: transparent;
  border-radius: 50%;
  display: flex;
  transition: border 0.2s ease-in-out;
  cursor: pointer;
  margin: 0;
}

.custom-radio input[type=radio]:hover {
  border: 2px solid var(--swatches-base-default-alt);
}

.custom-radio input[type=radio]:checked {
  border: 5px solid var(--swatches-base-default-alt);
}

.custom-radio input[type=radio]:disabled {
  border: 1px solid var(--swatches-on-base-alt);
  cursor: not-allowed;
}

.custom-radio input[type=radio]:disabled:hover {
  border: 2px solid var(--swatches-on-base-alt);
}

.custom-radio input[type=radio]:disabled:checked {
  border: 5px solid var(--swatches-on-base-alt);
}

.custom-radio input[type=radio]:disabled + label {
  color: var(--swatches-on-base-alt);
  cursor: not-allowed;
}

.custom-radio.small input[type=radio] {
  width: 14px;
  height: 14px;
}

.custom-radio.small label {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .custom-radio.small label {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .custom-radio.small label {
    font-size: 12px;
  }
}

.custom-radio.medium input[type=radio] {
  width: 16px;
  height: 16px;
}

.custom-radio.medium label {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .custom-radio.medium label {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .custom-radio.medium label {
    font-size: 14px;
  }
}

.custom-radio.large input[type=radio] {
  width: 18px;
  height: 18px;
}

.custom-radio.large label {
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .custom-radio.large label {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .custom-radio.large label {
    font-size: 16px;
  }
}

.custom-radio.invert input[type=radio] {
  border: 1px solid var(--swatches-on-surface-alt-invert);
  background: transparent;
}

.custom-radio.invert input[type=radio]:hover {
  border: 2px solid var(--swatches-on-surface-alt-invert);
}

.custom-radio.invert input[type=radio]:checked {
  border: 5px solid var(--swatches-on-surface-alt-invert);
  background: var(--swatches-base-default-alt);
}

.custom-radio.invert label {
  color: var(--swatches-on-surface-invert);
}

.custom-radio.primary input[type=radio] {
  border: 1px solid var(--swatches-brand-primary);
  background: transparent;
}

.custom-radio.primary input[type=radio]:hover {
  border: 2px solid var(--swatches-brand-primary);
}

.custom-radio.primary input[type=radio]:checked {
  border: 5px solid var(--swatches-brand-primary);
}

.custom-radio.primary label {
  color: var(--swatches-brand-primary);
}

.custom-radio label {
  font-family: var(--font-body);
  font-weight: 400;
  cursor: pointer;
}

.radius-null {
  border-radius: 0;
}

.radius-xs {
  border-radius: 2px;
}

.radius-sm {
  border-radius: 4px;
}

.radius-md {
  border-radius: 8px;
}

.radius-lg {
  border-radius: 16px;
}

.radius-xl {
  border-radius: 24px;
}

.radius-xxl {
  border-radius: 32px;
}

.radius-xxxl {
  border-radius: 64px;
}

.radius-full {
  border-radius: 1000px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .radius-null {
    border-radius: 0;
  }
  .radius-xs {
    border-radius: 1px;
  }
  .radius-sm {
    border-radius: 2px;
  }
  .radius-md {
    border-radius: 4px;
  }
  .radius-lg {
    border-radius: 8px;
  }
  .radius-xl {
    border-radius: 12px;
  }
  .radius-xxl {
    border-radius: 16px;
  }
  .radius-xxxl {
    border-radius: 32px;
  }
  .radius-full {
    border-radius: 1000px;
  }
}

.sidebar {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px 16px 48px 16px;
  width: 88px;
  border-right: 1px solid var(--swatches-border-base-alt);
  background-color: var(--swatches-surface);
  overflow: hidden;
  box-sizing: border-box;
  overscroll-behavior: contain;
  position: fixed;
  top: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    gap: 20px;
    padding: 16px 8px 32px 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    gap: 24px;
    padding: 20px 12px 40px 12px;
  }
}

.sidebar.expanded {
  width: 310px;
  padding: 24px;
  align-items: flex-start;
}

.sidebar.expanded .sidebar-header {
  justify-content: space-between;
}

.sidebar.expanded .sidebar-header .menu-infos .sidebar-title {
  display: block;
}

.sidebar.expanded .sidebar-header .menu-infos .logo {
  display: block;
}

.sidebar.expanded .sidebar-header .btn {
  display: flex;
}

.sidebar.expanded .form-group {
  display: flex;
}

.sidebar.expanded .nav-itens .main-menu {
  align-items: stretch;
}

.sidebar.expanded .nav-itens .main-menu .menu-item {
  justify-content: space-between;
}

.sidebar.expanded .nav-itens .main-menu .menu-item .menu-left .item-name {
  display: block;
}

.sidebar.expanded .nav-itens .main-menu .menu-item .badge {
  display: flex;
}

.sidebar.expanded .nav-itens .main-menu .menu-item > i.icon,
.sidebar.expanded .nav-itens .main-menu .menu-item > svg.icon {
  display: flex;
}

.sidebar.expanded .nav-itens .main-menu .sub-menu .item .item-name {
  display: block;
}

.sidebar.expanded .nav-itens .main-menu .sub-menu .badge {
  display: flex;
}

.sidebar.expanded .sidebar-footer .menu-info {
  width: 100%;
}

.sidebar.expanded .show-only-expanded {
  display: flex;
}

.sidebar.expanded .show-only-collapsed {
  display: none;
}

.sidebar .form-group {
  display: none;
  width: 100%;
}

.sidebar .sidebar-header {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.sidebar .sidebar-header .menu-infos {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar .sidebar-header .menu-infos .logo {
  background-position: center center;
  width: 107px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar .sidebar-header .menu-infos .sidebar-title {
  display: none;
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .sidebar-header .menu-infos .sidebar-title {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .sidebar-header .menu-infos .sidebar-title {
    font-size: 18px;
  }
}

.sidebar .sidebar-header .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.sidebar .show-only-expanded {
  display: none;
}

.sidebar .show-only-collapsed {
  display: flex;
}

.sidebar .nav-itens {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  flex: 1;
  overflow: hidden auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .nav-itens {
    gap: 4px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-itens {
    gap: 4px;
  }
}

.sidebar .nav-itens .main-menu {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .nav-itens .main-menu {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-itens .main-menu {
    gap: 8px;
  }
}

.sidebar .nav-itens .main-menu .menu-item {
  position: relative;
  cursor: pointer;
  padding: 8px 16px;
  display: flex;
  gap: 8px;
  height: 48px;
  align-items: center;
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  background: transparent;
  border: none;
  box-sizing: border-box;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .nav-itens .main-menu .menu-item {
    gap: 8px;
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-itens .main-menu .menu-item {
    gap: 8px;
    font-size: 14px;
  }
}

.sidebar .nav-itens .main-menu .menu-item .menu-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon i.icon,
.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon svg.icon {
  width: 24px;
  height: 24px;
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon i.icon {
  background-color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon svg.icon {
  color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon .dot-overlay {
  position: absolute;
  top: 0;
  left: 16px;
  width: 8px;
  height: 8px;
  background-color: var(--swatches-error-hover);
  border-radius: 50%;
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .item-name {
  display: none;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav-itens .main-menu .menu-item i.icon,
.sidebar .nav-itens .main-menu .menu-item svg.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sidebar .nav-itens .main-menu .menu-item i.icon {
  background-color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item svg.icon {
  color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item .badge {
  display: none;
  height: 24px;
  min-width: 24px;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  background-color: var(--swatches-surface-alt);
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;
}

.sidebar .nav-itens .main-menu .menu-item .badge.rounded {
  border-radius: 50%;
  padding: 4px;
  width: 24px;
}

.sidebar .nav-itens .main-menu .menu-item > i.icon,
.sidebar .nav-itens .main-menu .menu-item > svg.icon {
  display: flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar .nav-itens .main-menu .menu-item > i.icon {
  background-color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item > svg.icon {
  color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item:hover {
  background: var(--swatches-surface-alt);
}

.sidebar .nav-itens .main-menu .menu-item.active {
  background: var(--swatches-surface-alt);
}

.sidebar .nav-itens .main-menu.active > .menu-item {
  background: var(--swatches-surface-alt);
}

.sidebar .nav-itens .main-menu.open .sub-menu {
  display: flex;
}

.sidebar .nav-itens .main-menu .sub-menu {
  display: none;
  padding: 8px 16px;
  height: 48px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .nav-itens .main-menu .sub-menu {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-itens .main-menu .sub-menu {
    gap: 8px;
  }
}

.sidebar .nav-itens .main-menu .sub-menu .item {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 11px;
  height: 32px;
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .nav-itens .main-menu .sub-menu .item {
    padding-left: 20px;
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-itens .main-menu .sub-menu .item {
    padding-left: 24px;
    font-size: 14px;
  }
}

.sidebar .nav-itens .main-menu .sub-menu .item .item-name {
  width: 100%;
  display: none;
  align-items: center;
  text-align: left;
}

.sidebar .nav-itens .main-menu .sub-menu .badge {
  display: none;
  height: 24px;
  min-width: 24px;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  background-color: var(--swatches-surface-alt);
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;
  margin-left: auto;
}

.sidebar .nav-itens .main-menu .sub-menu:hover {
  background: var(--swatches-surface-alt);
}

.sidebar .nav-itens .main-menu .sub-menu.active {
  background: var(--swatches-surface-alt);
}

.sidebar .sidebar-footer {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.sidebar .sidebar-footer .menu-info {
  height: 200px;
  width: 52px;
  border: 1px dashed #eaeaea;
  border-radius: 8px;
  background-color: var(--swatches-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sidebar .sidebar-footer .menu-info img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.sidebar.invert {
  border: 1px solid var(--swatches-surface-alt-invert);
  background-color: var(--swatches-surface-alt-invert);
}

.sidebar.invert .sidebar-header .menu-infos .sidebar-title {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .sidebar-header .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.invert .sidebar-header .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item .menu-left .menu-icon i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item .menu-left .menu-icon svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item:hover {
  background: var(--swatches-background-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item.active {
  background: var(--swatches-background-invert);
}

.sidebar.invert .nav-itens .main-menu .sub-menu .item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .sub-menu:hover {
  background: var(--swatches-background-invert);
}

.sidebar.primary {
  border: 1px solid var(--swatches-primary-hover);
  background-color: var(--swatches-primary-hover);
}

.sidebar.primary .sidebar-header .menu-infos .sidebar-title {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .sidebar-header .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.primary .sidebar-header .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item .menu-left .menu-icon i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item .menu-left .menu-icon svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item:hover {
  background: var(--swatches-primary-active);
}

.sidebar.primary .nav-itens .main-menu .menu-item.active {
  background: var(--swatches-primary-active);
}

.sidebar.primary .nav-itens .main-menu .sub-menu .item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .sub-menu:hover {
  background: var(--swatches-primary-active);
}

.sidebar.secondary {
  border: 1px solid var(--swatches-secondary-default);
  background-color: var(--swatches-secondary-default);
}

.sidebar.secondary .sidebar-header .menu-infos .sidebar-title {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .sidebar-header .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .sidebar-header .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item .menu-left .menu-icon i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item .menu-left .menu-icon svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item:hover {
  background: var(--swatches-secondary-hover);
}

.sidebar.secondary .nav-itens .main-menu .menu-item.active {
  background: var(--swatches-secondary-hover);
}

.sidebar.secondary .nav-itens .main-menu .sub-menu .item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .sub-menu:hover {
  background: var(--swatches-secondary-hover);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    gap: 24px;
    padding: 20px 12px 40px 12px;
  }
  .sidebar .sidebar-header {
    gap: 20px;
  }
  .sidebar .sidebar-header .menu-infos {
    gap: 8px;
  }
  .sidebar .sidebar-header .menu-infos .sidebar-title {
    font-size: 18px;
  }
  .sidebar .nav-itens {
    gap: 4px;
  }
  .sidebar .nav-itens .main-menu {
    gap: 8px;
  }
  .sidebar .nav-itens .main-menu .menu-item {
    gap: 8px;
    font-size: 14px;
  }
  .sidebar .nav-itens .main-menu .sub-menu {
    gap: 8px;
  }
  .sidebar .nav-itens .main-menu .sub-menu .item {
    padding-left: 24px;
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    gap: 20px;
    padding: 16px 8px 32px 8px;
  }
  .sidebar .sidebar-header {
    gap: 16px;
  }
  .sidebar .sidebar-header .menu-infos {
    gap: 8px;
  }
  .sidebar .sidebar-header .menu-infos .sidebar-title {
    font-size: 16px;
  }
  .sidebar .nav-itens {
    gap: 4px;
  }
  .sidebar .nav-itens .main-menu {
    gap: 8px;
  }
  .sidebar .nav-itens .main-menu .menu-item {
    gap: 8px;
    font-size: 14px;
  }
  .sidebar .nav-itens .main-menu .sub-menu {
    gap: 8px;
  }
  .sidebar .nav-itens .main-menu .sub-menu .item {
    padding-left: 20px;
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) and (orientation: portrait) {
  .sidebar.expanded {
    width: 100%;
  }
}

.navbar-container .btn-group {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background-color: var(--swatches-base-default);
  width: 100%;
  height: 65px;
}

.navbar-container .btn-group .center-container {
  position: relative;
  display: flex;
  align-items: center;
}

.navbar-container .btn-group .center-container .btn-center {
  position: absolute;
  right: 50%;
  width: 48px;
  height: 48px;
  bottom: 30px;
  transform: translateX(calc(50% + 5px));
  margin: 0 4px;
  z-index: 2;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .navbar-container .btn-group .center-container .btn-center {
    margin: 0 4px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .navbar-container .btn-group .center-container .btn-center {
    margin: 0 4px;
  }
}

.navbar-container .btn-group .btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 66.4px;
  height: 65px;
  background-color: var(--swatches-base-default);
  padding: 8px 4px;
  border: none;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .navbar-container .btn-group .btn-next {
    padding: 8px 4px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .navbar-container .btn-group .btn-next {
    padding: 8px 4px;
  }
}

.navbar-container .btn-group .btn-next i.icon {
  background-color: var(--swatches-on-base);
}

.navbar-container .btn-group .btn-next svg.icon {
  color: var(--swatches-on-base);
}

.navbar-container .btn-group .btn-next .text {
  color: var(--swatches-on-base);
  font-weight: 700;
}

.navbar-container .btn-group .btn-next.active {
  border-top: 3px solid var(--primary-deep);
  box-sizing: border-box;
}

.navbar-container .btn-group .btn-next.active i.icon {
  background-color: var(--primary-deep);
}

.navbar-container .btn-group .btn-next.active svg.icon {
  color: var(--primary-deep);
}

.navbar-container .btn-group .btn-next.active .text {
  color: var(--primary-deep);
  font-weight: 700;
}

@media (min-width: 360px) and (max-width: 767px) {
  .navbar-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
  }
  .navbar-container .btn-group {
    width: 100%;
    height: 65px;
  }
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 24px;
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
  flex-wrap: nowrap;
  overflow-x: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container {
    gap: 8px;
    padding: 8px 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container {
    gap: 4px;
    padding: 8px 8px;
    min-height: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right" "center center";
    place-items: center stretch;
    column-gap: 10rem;
    overflow-x: visible;
  }
}

.pagination-container .pagination-left,
.pagination-container .pagination-center,
.pagination-container .pagination-right {
  display: flex;
  align-items: center;
  position: relative;
  gap: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container .pagination-left,
  .pagination-container .pagination-center,
  .pagination-container .pagination-right {
    gap: 4px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container .pagination-center {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
}

.pagination-container .form-group {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pagination-container .pagination-left .form-group,
.pagination-container .pagination-right .form-group {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container .pagination-left .form-group .form-label,
  .pagination-container .pagination-right .form-group .form-label {
    font-size: 12px;
    display: inline-block;
    margin: 0;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container .pagination-left {
    grid-area: left;
    justify-content: flex-start;
    justify-self: end;
  }
  .pagination-container .pagination-right {
    grid-area: right;
    justify-content: flex-start;
    justify-self: start;
  }
  .pagination-container .pagination-center {
    grid-area: center;
    width: 100%;
    justify-content: center;
  }
  .pagination-container .pagination-range {
    flex-basis: 100%;
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: 16px;
  }
}

.pagination-container .form-label {
  font-weight: 400;
  color: var(--swatches-on-surface-neutral);
  margin-bottom: 2px;
  font-size: inherit;
}

.pagination-container .form-control.select,
.pagination-container select.next,
.pagination-container .form-control.default,
.pagination-container input.next {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--swatches-base-default);
  border: 1px solid var(--swatches-border-base);
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
}

.pagination-container .form-control.select::-ms-expand,
.pagination-container select.next::-ms-expand,
.pagination-container .form-control.default::-ms-expand,
.pagination-container input.next::-ms-expand {
  display: none;
}

.pagination-container .form-control.select:hover, .pagination-container .form-control.select:focus,
.pagination-container select.next:hover,
.pagination-container select.next:focus,
.pagination-container .form-control.default:hover,
.pagination-container .form-control.default:focus,
.pagination-container input.next:hover,
.pagination-container input.next:focus {
  border-color: var(--swatches-on-base);
  outline: none;
  box-shadow: none;
}

.pagination-container .form-control.select,
.pagination-container select.next {
  padding-right: 32px;
  position: relative;
  background-image: none;
}

.pagination-container .select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pagination-container .select-wrapper .select-icon {
  position: absolute;
  right: 8px;
  pointer-events: none;
  z-index: 1;
}

.pagination-container .select-wrapper select.next {
  position: relative;
  z-index: 0;
}

.pagination-container .active {
  border: none;
  background-color: var(--neutral-200);
}

.pagination-container.small {
  font-size: 14px;
}

.pagination-container.small .label,
.pagination-container.small .range,
.pagination-container.small .ellipsis {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .label,
  .pagination-container.small .range,
  .pagination-container.small .ellipsis {
    font-size: 12px;
  }
}

.pagination-container.small .range {
  font-weight: 600;
}

.pagination-container.small .pagination-center .icon {
  width: 12px;
  height: 12px;
  font-size: 12px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .pagination-center .icon {
    width: 10px;
    height: 10px;
    font-size: 10px;
  }
}

.pagination-container.small .pagination-center .btn {
  width: 32px;
  height: 32px;
  font-size: 14px;
  min-width: 32px;
  min-height: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .pagination-center .btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
    min-width: 28px;
    min-height: 28px;
  }
}

.pagination-container.small .form-control.select,
.pagination-container.small select.next {
  width: 56px;
  height: 32px;
  font-size: 14px;
  padding: 0 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .form-control.select,
  .pagination-container.small select.next {
    width: 48px;
    height: 28px;
    font-size: 12px;
    padding: 0 6px;
  }
}

.pagination-container.small .form-control.default,
.pagination-container.small input.next {
  width: 40px;
  height: 32px;
  font-size: 14px;
  text-align: right;
  padding: 0 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .form-control.default,
  .pagination-container.small input.next {
    width: 36px;
    height: 28px;
    font-size: 12px;
    padding: 0 6px;
  }
}

.pagination-container.small .select-wrapper .select-icon {
  width: 12px;
  height: 12px;
  font-size: 12px;
  right: 6px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .select-wrapper .select-icon {
    width: 10px;
    height: 10px;
    font-size: 10px;
    right: 4px;
  }
}

.pagination-container.small .icon {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .icon {
    font-size: 14px;
  }
}

.pagination-container.medium {
  font-size: 16px;
}

.pagination-container.medium .label,
.pagination-container.medium .range,
.pagination-container.medium .ellipsis {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .label,
  .pagination-container.medium .range,
  .pagination-container.medium .ellipsis {
    font-size: 14px;
  }
}

.pagination-container.medium .range {
  font-weight: 600;
}

.pagination-container.medium .pagination-center .icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .pagination-center .icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
  }
}

.pagination-container.medium .pagination-center .btn {
  width: 40px;
  height: 40px;
  font-size: 16px;
  min-width: 40px;
  min-height: 40px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .pagination-center .btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
    min-width: 32px;
    min-height: 32px;
  }
}

.pagination-container.medium .form-control.select,
.pagination-container.medium select.next {
  width: 64px;
  height: 40px;
  font-size: 16px;
  padding: 0 10px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .form-control.select,
  .pagination-container.medium select.next {
    width: 56px;
    height: 32px;
    font-size: 14px;
    padding: 0 8px;
  }
}

.pagination-container.medium .form-control.default,
.pagination-container.medium input.next {
  width: 48px;
  height: 40px;
  font-size: 16px;
  text-align: right;
  padding: 0 10px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .form-control.default,
  .pagination-container.medium input.next {
    width: 40px;
    height: 32px;
    font-size: 14px;
    padding: 0 8px;
  }
}

.pagination-container.medium .select-wrapper .select-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  right: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .select-wrapper .select-icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
    right: 6px;
  }
}

.pagination-container.medium .icon {
  font-size: 20px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .icon {
    font-size: 16px;
  }
}

.pagination-container.large {
  font-size: 18px;
}

.pagination-container.large .label,
.pagination-container.large .range,
.pagination-container.large .ellipsis {
  font-size: 18px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .label,
  .pagination-container.large .range,
  .pagination-container.large .ellipsis {
    font-size: 16px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .label,
  .pagination-container.large .range,
  .pagination-container.large .ellipsis {
    font-size: 14px;
  }
}

.pagination-container.large .range {
  font-weight: 600;
}

.pagination-container.large .pagination-center .icon {
  width: 22px;
  height: 22px;
  font-size: 22px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .pagination-center .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .pagination-center .icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
  }
}

.pagination-container.large .pagination-center .btn {
  width: 48px;
  height: 48px;
  font-size: 18px;
  min-width: 48px;
  min-height: 48px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .pagination-center .btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
    min-width: 40px;
    min-height: 40px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .pagination-center .btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
    min-width: 36px;
    min-height: 36px;
  }
}

.pagination-container.large .form-control.select,
.pagination-container.large select.next {
  width: 72px;
  height: 48px;
  font-size: 18px;
  padding: 0 10px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .form-control.select,
  .pagination-container.large select.next {
    width: 64px;
    height: 40px;
    font-size: 16px;
    padding: 0 10px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .form-control.select,
  .pagination-container.large select.next {
    width: 56px;
    height: 36px;
    font-size: 14px;
    padding: 0 8px;
  }
}

.pagination-container.large .form-control.default,
.pagination-container.large input.next {
  width: 56px;
  height: 48px;
  font-size: 18px;
  text-align: right;
  padding: 0 10px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .form-control.default,
  .pagination-container.large input.next {
    width: 48px;
    height: 40px;
    font-size: 16px;
    padding: 0 10px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .form-control.default,
  .pagination-container.large input.next {
    width: 44px;
    height: 36px;
    font-size: 14px;
    padding: 0 8px;
  }
}

.pagination-container.large .select-wrapper .select-icon {
  width: 22px;
  height: 22px;
  font-size: 22px;
  right: 10px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .select-wrapper .select-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
    right: 8px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .select-wrapper .select-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    right: 6px;
  }
}

.pagination-container.large .icon {
  font-size: 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .icon {
    font-size: 20px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .icon {
    font-size: 18px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container .mobile-hidden {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container .tablet-hidden {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container .desktop-only {
    display: none !important;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container .desktop-only {
    display: none !important;
  }
}

.progress-bar {
  width: 100%;
  background-color: var(--swatches-background);
  overflow: hidden;
}

.progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-base);
}

.progress-bar .progress-fill.base {
  background-color: var(--swatches-on-base);
}

.progress-bar .progress-fill.warning {
  background-color: var(--swatches-warning-hover);
}

.progress-bar .progress-fill.error {
  background-color: var(--swatches-on-surface-error);
}

.progress-bar .progress-fill.success {
  background-color: var(--swatches-on-surface-success);
}

.progress-bar.radius-pill {
  border-radius: 1000px;
}

.progress-bar.radius-straigh {
  border-radius: 0;
}

.progress-bar.small {
  height: 2px;
}

.progress-bar.medium {
  height: 4px;
}

.progress-bar.large {
  height: 8px;
}

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

.progress-row > .progress-track {
  flex: 1 1 auto;
}

.progress-row > .progress-label {
  margin: 0;
  white-space: nowrap;
}

.tab-container {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  gap: 8px;
}

.tab-container .btn-tab .icon.small {
  width: 12px;
  height: 12px;
}

.tab-container .btn-tab .icon.medium {
  width: 16px;
  height: 16px;
}

.tab-container .btn-tab .icon.large {
  width: 22px;
  height: 22px;
}

.tab-container .btn-tab .icon.xlarge {
  width: 28px;
  height: 28px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-container {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tab-container {
    gap: 8px;
  }
}

.tab-container .tab-grid-2x4 {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-container .tab-grid-2x4 {
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tab-container .tab-grid-2x4 {
    gap: 24px;
  }
}

.tab-container .tab-grid-2x4 > .tab-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: max-content;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-container .tab-grid-2x4 > .tab-col {
    gap: 8px;
    min-width: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tab-container .tab-grid-2x4 > .tab-col {
    gap: 8px;
  }
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  padding: 8px 16px;
  margin-right: 16px;
  color: var(--swatches-on-base);
  font-weight: 600;
  background-color: var(--swatches-base-default);
  border: 1px solid var(--swatches-on-base-alt);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
  box-sizing: border-box;
  position: relative;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.radius-pill {
  border-radius: 1000px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.radius-round {
  border-radius: 8px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.radius-straigh {
  border-radius: 0;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.default {
  background-color: var(--swatches-base-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.default i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.default svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.default .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.hover {
  background-color: var(--swatches-base-hover);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.hover i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.hover svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.hover .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.active {
  background-color: var(--swatches-base-active-alt);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.active i.icon {
  background-color: var(--swatches-on-primary);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.active svg.icon {
  color: var(--swatches-on-primary);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.active .label-tab {
  color: var(--swatches-on-primary);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.disabled {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.disabled i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.disabled svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.disabled .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  padding: 8px 16px;
  color: var(--swatches-on-base);
  font-weight: 600;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--swatches-on-base-alt);
  cursor: pointer;
  transition: border-bottom 0.2s, color 0.2s;
  box-sizing: border-box;
  position: relative;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line {
    gap: 8px;
    padding: 8px 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line {
    gap: 8px;
    padding: 8px 12px;
  }
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.default {
  border-bottom: 1px solid var(--swatches-on-base);
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.default i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.default svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.default .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.hover {
  background-color: var(--swatches-base-hover);
  border-bottom: 2px solid var(--swatches-on-base-alt);
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.hover i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.hover svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.hover .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.active {
  border-bottom: 2px solid var(--swatches-primary-default);
  color: var(--swatches-primary-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.active i.icon {
  background-color: var(--swatches-primary-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.active svg.icon {
  color: var(--swatches-primary-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.active .label-tab {
  color: var(--swatches-primary-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.active .dot-overlay {
  background-color: var(--swatches-primary-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.disabled {
  border-bottom: 1px solid var(--swatches-on-base);
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.disabled i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.disabled svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.disabled .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .label-tab {
  color: var(--swatches-on-base);
  font-weight: 600;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .label-tab.small {
  font-size: 14px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .label-tab.medium {
  font-size: 16px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .label-tab.large {
  font-size: 18px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .label-tab.xlarge {
  font-size: 20px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .dot-overlay {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background-color: var(--swatches-error-hover);
  border-radius: 50%;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.has-error {
  border-color: var(--swatches-error-hover) !important;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.disabled.type-button {
  background-color: var(--swatches-base-default);
  border: 1px solid var(--swatches-on-base-alt);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.disabled.type-line {
  border: none;
  border-bottom: 1px solid var(--swatches-on-base-alt);
}

.tab-container .tab-grid-2x4 > .tab-col .tab-trigger-wrapper {
  position: relative;
  display: inline-flex;
}

.tab-container .tab-grid-2x4 > .tab-col .tab-trigger-wrapper .tab-badge {
  position: absolute;
  top: 0;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--swatches-error-hover);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.tab-container .tab-grid-2x4 > .tab-col .tab-trigger-wrapper .tab-badge.tab-badge-small {
  min-width: 12px;
  height: 12px;
  padding: 1px;
  font-size: 8px;
}

.tab-container .tab-grid-2x4 > .tab-col .tab-trigger-wrapper .tab-badge.tab-badge-medium {
  min-width: 14px;
  height: 14px;
  padding: 2px;
  font-size: 10px;
}

.tab-container .tab-grid-2x4 > .tab-col .tab-trigger-wrapper .tab-badge.tab-badge-large {
  min-width: 18px;
  height: 18px;
  padding: 3px;
  font-size: 12px;
}

.tab-vertical-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.tab-horizontal .tab-grid-2x4 {
  flex-direction: row;
  align-items: flex-start;
}

.tab-horizontal .tab-grid-2x4 > .tab-col {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-horizontal .tab-grid-2x4 > .tab-col {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tab-horizontal .tab-grid-2x4 > .tab-col::-webkit-scrollbar {
    display: none;
  }
  .tab-horizontal .tab-grid-2x4 > .tab-col .btn-tab,
  .tab-horizontal .tab-grid-2x4 > .tab-col .tab-trigger-wrapper {
    flex-shrink: 0;
  }
}

.tab-children {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin-top: 8px;
  box-sizing: border-box;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-children {
    margin-top: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tab-children {
    margin-top: 8px;
  }
}

.tab-children .tab-children-inner {
  width: 100%;
  height: 100%;
  color: var(--swatches-on-base);
  padding: 16px;
  box-sizing: border-box;
}

.tab-position-top .tab-vertical-wrapper {
  flex-direction: column;
}

.tab-position-top .tab-grid-2x4 {
  order: 0;
  width: 100%;
}

.tab-position-top .tab-children {
  order: 1;
}

.tab-position-bottom .tab-vertical-wrapper {
  flex-direction: column;
}

.tab-position-bottom .tab-grid-2x4 {
  order: 1;
}

.tab-position-bottom .tab-children {
  order: 0;
}

.tab-position-left .tab-vertical-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}

.tab-position-left .tab-grid-2x4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  order: 0;
  flex: 0 0 auto;
  padding-right: 8px;
}

.tab-position-left .tab-children {
  order: 1;
  flex: 1 1 auto;
  margin: 0;
  padding-left: 8px;
}

.tab-position-left .tab-grid-2x4 > .tab-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tab-position-right .tab-vertical-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}

.tab-position-right .tab-grid-2x4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  order: 1;
  flex: 0 0 auto;
  padding-left: 8px;
}

.tab-position-right .tab-children {
  order: 0;
  flex: 1 1 auto;
  margin: 0;
  padding-right: 8px;
}

.tab-position-right .tab-grid-2x4 > .tab-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filters-container {
  margin-top: 24px;
  font-family: var(--font-body);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .filters-container {
    margin-top: 20px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .filters-container {
    margin-top: 16px;
  }
}

.filters-container .btn {
  margin-top: 20px;
  width: fit-content;
}

@media (min-width: 360px) and (max-width: 767px) {
  .filters-container .btn {
    width: 100%;
    margin: 0;
  }
}

.filters-container .form-group {
  position: relative;
  width: 100%;
}

.filters-container .form-group i {
  position: absolute;
  right: 16px;
  pointer-events: none;
  background: var(--swatches-on-surface-neutral);
  padding: 2px;
  z-index: 2;
}

@media (min-width: 360px) and (max-width: 767px) {
  .filters-container .form-group {
    width: 100%;
  }
}

.filters-container.small .filter-item label {
  font-size: 14px;
}

.filters-container.small .filter-item select {
  width: 100%;
  height: 30px;
  font-size: 14px;
  box-shadow: none;
}

@media (min-width: 360px) and (max-width: 767px) {
  .filters-container.small .filter-item select {
    width: 100%;
  }
}

.filters-container.small .icon {
  width: 12px;
  height: 12px;
}

.filters-container.small .form-group i {
  top: 57%;
}

.filters-container.small .form-group:not(:has(label)) i {
  top: 50%;
  transform: translateY(-50%);
}

.filters-container.medium .filter-item label {
  font-size: 16px;
}

.filters-container.medium .filter-item select {
  width: 100%;
  height: 40px;
  font-size: 16px;
  box-shadow: none;
}

@media (min-width: 360px) and (max-width: 767px) {
  .filters-container.medium .filter-item select {
    width: 100%;
  }
}

.filters-container.medium .icon {
  width: 16px;
  height: 16px;
}

.filters-container.medium .form-group i {
  top: 55%;
}

.filters-container.medium .form-group:not(:has(label)) i {
  top: 50%;
  transform: translateY(-50%);
}

.filters-container.large .filter-item label {
  font-size: 16px;
}

.filters-container.large .filter-item select {
  width: 100%;
  height: 48px;
  font-size: 16px;
  box-shadow: none;
}

@media (min-width: 360px) and (max-width: 767px) {
  .filters-container.large .filter-item select {
    width: 100%;
  }
}

.filters-container.large .icon {
  width: 22px;
  height: 22px;
}

.filters-container.large .form-group i {
  top: 49%;
}

.filters-container.large .form-group:not(:has(label)) i {
  top: 50%;
  transform: translateY(-50%);
}

.filters-container .filters-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 16px;
  width: 100%;
}

.filters-container .filters-grid .filter-item {
  min-width: 260px;
}

.filters-container .filters-grid .filter-item .form-group {
  width: 100%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .filters-container .filters-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 48px 0 48px 0;
  }
}

.filters-container .filters-row {
  display: contents;
}

.filters-container .filter-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 260px;
}

.filters-container .filter-item label {
  margin-bottom: 4px;
  color: var(--swatches-on-surface-neutral);
  font-weight: 600;
  min-height: 18px;
  display: block;
}

.filters-container .filter-item.active:hover select {
  border: 1px solid var(--swatches-on-surface-neutral);
}

.filters-container .form-group .form-control.select:focus,
.filters-container .form-group .form-control.select:active,
.filters-container .form-group .form-control.select:hover {
  outline: none;
}

.chip-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--swatches-base-default);
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
  border: 1px solid var(--swatches-border-base);
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
}

.chip-container.radius-pill {
  border-radius: 1000px;
}

.chip-container.radius-round {
  border-radius: 8px;
}

.chip-container.radius-straigh {
  border-radius: 0;
}

.chip-container .chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.chip-container.outline {
  border-color: var(--swatches-border-base);
  background-color: transparent;
  color: var(--swatches-on-base);
}

.chip-container.outline .chip-icon i.icon-color {
  background-color: var(--swatches-on-base);
}

.chip-container.outline .chip-icon svg.icon-color {
  color: var(--swatches-on-base);
}

.chip-container.outline.primary {
  border-color: var(--swatches-border-primary);
  background-color: transparent;
  color: var(--swatches-on-surface-primary);
}

.chip-container.outline.primary .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-primary);
}

.chip-container.outline.primary .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-primary);
}

.chip-container.outline.secondary {
  border-color: var(--swatches-border-secondary);
  background-color: transparent;
  color: var(--swatches-on-surface-secondary);
}

.chip-container.outline.secondary .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-secondary);
}

.chip-container.outline.secondary .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-secondary);
}

.chip-container.outline.tertiary {
  border-color: var(--swatches-border-tertiary);
  background-color: transparent;
  color: var(--swatches-tertiary-default);
}

.chip-container.outline.tertiary .chip-icon i.icon-color {
  background-color: var(--swatches-tertiary-default);
}

.chip-container.outline.tertiary .chip-icon svg.icon-color {
  color: var(--swatches-tertiary-default);
}

.chip-container.outline.quaternary {
  border-color: var(--swatches-border-quaternary);
  background-color: transparent;
  color: var(--swatches-quaternary-default);
}

.chip-container.outline.quaternary .chip-icon i.icon-color {
  background-color: var(--swatches-quaternary-default);
}

.chip-container.outline.quaternary .chip-icon svg.icon-color {
  color: var(--swatches-quaternary-default);
}

.chip-container.outline.success {
  border-color: var(--swatches-border-success);
  background-color: transparent;
  color: var(--swatches-on-surface-success);
}

.chip-container.outline.success .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-success);
}

.chip-container.outline.success .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-success);
}

.chip-container.outline.warning {
  border-color: var(--swatches-border-warning);
  background-color: transparent;
  color: var(--swatches-on-surface-warning);
}

.chip-container.outline.warning .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-warning);
}

.chip-container.outline.warning .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-warning);
}

.chip-container.outline.error {
  border-color: var(--swatches-border-error);
  background-color: transparent;
  color: var(--swatches-on-surface-error);
}

.chip-container.outline.error .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-error);
}

.chip-container.outline.error .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-error);
}

.chip-container.outline.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chip-container.filled {
  border-color: var(--swatches-base-active-alt);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-on-surface-base-alt);
}

.chip-container.filled .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-base-alt);
}

.chip-container.filled .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-base-alt);
}

.chip-container.filled.primary {
  border-color: var(--swatches-primary-default);
  background-color: var(--swatches-primary-default);
  color: var(--swatches-on-primary);
}

.chip-container.filled.primary .chip-icon i.icon-color {
  background-color: var(--swatches-on-primary);
}

.chip-container.filled.primary .chip-icon svg.icon-color {
  color: var(--swatches-on-primary);
}

.chip-container.filled.secondary {
  border-color: var(--swatches-secondary-default);
  background-color: var(--swatches-secondary-default);
  color: var(--swatches-on-secondary);
}

.chip-container.filled.secondary .chip-icon i.icon-color {
  background-color: var(--swatches-on-secondary);
}

.chip-container.filled.secondary .chip-icon svg.icon-color {
  color: var(--swatches-on-secondary);
}

.chip-container.filled.tertiary {
  border-color: var(--swatches-tertiary-default);
  background-color: var(--swatches-tertiary-default);
  color: var(--swatches-on-tertiary);
}

.chip-container.filled.tertiary .chip-icon i.icon-color {
  background-color: var(--swatches-on-tertiary);
}

.chip-container.filled.tertiary .chip-icon svg.icon-color {
  color: var(--swatches-on-tertiary);
}

.chip-container.filled.quaternary {
  border-color: var(--swatches-quaternary-default);
  background-color: var(--swatches-quaternary-default);
  color: var(--swatches-on-quaternary);
}

.chip-container.filled.quaternary .chip-icon i.icon-color {
  background-color: var(--swatches-on-quaternary);
}

.chip-container.filled.quaternary .chip-icon svg.icon-color {
  color: var(--swatches-on-quaternary);
}

.chip-container.filled.success {
  border-color: var(--swatches-success-default);
  background-color: var(--swatches-success-default);
  color: var(--swatches-on-success);
}

.chip-container.filled.success .chip-icon i.icon-color {
  background-color: var(--swatches-on-success);
}

.chip-container.filled.success .chip-icon svg.icon-color {
  color: var(--swatches-on-success);
}

.chip-container.filled.warning {
  border-color: var(--swatches-warning-default);
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-warning);
}

.chip-container.filled.warning .chip-icon i.icon-color {
  background-color: var(--swatches-on-warning);
}

.chip-container.filled.warning .chip-icon svg.icon-color {
  color: var(--swatches-on-warning);
}

.chip-container.filled.error {
  border-color: var(--swatches-error-default);
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-error);
}

.chip-container.filled.error .chip-icon i.icon-color {
  background-color: var(--swatches-on-error);
}

.chip-container.filled.error .chip-icon svg.icon-color {
  color: var(--swatches-on-error);
}

.chip-container.filled.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chip-container.accent {
  border-color: var(--swatches-on-surface-base-alt);
  background-color: var(--swatches-on-surface-base-alt);
  color: var(--swatches-on-base);
}

.chip-container.accent .chip-icon i.icon-color {
  background-color: var(--swatches-on-base);
}

.chip-container.accent .chip-icon svg.icon-color {
  color: var(--swatches-on-base);
}

.chip-container.accent.primary {
  border-color: var(--swatches-primary-subtle);
  background-color: var(--swatches-primary-subtle);
  color: var(--swatches-primary-default);
}

.chip-container.accent.primary .chip-icon i.icon-color {
  background-color: var(--swatches-primary-default);
}

.chip-container.accent.primary .chip-icon svg.icon-color {
  color: var(--swatches-primary-default);
}

.chip-container.accent.secondary {
  border-color: var(--swatches-secondary-subtle);
  background-color: var(--swatches-secondary-subtle);
  color: var(--swatches-secondary-default);
}

.chip-container.accent.secondary .chip-icon i.icon-color {
  background-color: var(--swatches-secondary-default);
}

.chip-container.accent.secondary .chip-icon svg.icon-color {
  color: var(--swatches-secondary-default);
}

.chip-container.accent.tertiary {
  border-color: var(--swatches-tertiary-subtle);
  background-color: var(--swatches-tertiary-subtle);
  color: var(--swatches-tertiary-default);
}

.chip-container.accent.tertiary .chip-icon i.icon-color {
  background-color: var(--swatches-tertiary-default);
}

.chip-container.accent.tertiary .chip-icon svg.icon-color {
  color: var(--swatches-tertiary-default);
}

.chip-container.accent.quaternary {
  border-color: var(--swatches-quaternary-subtle);
  background-color: var(--swatches-quaternary-subtle);
  color: var(--swatches-quaternary-default);
}

.chip-container.accent.quaternary .chip-icon i.icon-color {
  background-color: var(--swatches-quaternary-default);
}

.chip-container.accent.quaternary .chip-icon svg.icon-color {
  color: var(--swatches-quaternary-default);
}

.chip-container.accent.success {
  border-color: var(--swatches-success-subtle);
  background-color: var(--swatches-success-subtle);
  color: var(--swatches-success-default);
}

.chip-container.accent.success .chip-icon i.icon-color {
  background-color: var(--swatches-success-default);
}

.chip-container.accent.success .chip-icon svg.icon-color {
  color: var(--swatches-success-default);
}

.chip-container.accent.warning {
  border-color: var(--swatches-warning-subtle);
  background-color: var(--swatches-warning-subtle);
  color: var(--swatches-on-surface-warning);
}

.chip-container.accent.warning .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-warning);
}

.chip-container.accent.warning .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-warning);
}

.chip-container.accent.error {
  border-color: var(--swatches-error-subtle);
  background-color: var(--swatches-error-subtle);
  color: var(--swatches-on-surface-error);
}

.chip-container.accent.error .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-error);
}

.chip-container.accent.error .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-error);
}

.chip-container.accent.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chip-container .chip-text {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

.chip-container.small {
  height: 20px;
  padding: 0 8px;
  gap: 4px;
}

.chip-container.small .icon {
  width: 12px;
  height: 12px;
}

.chip-container.small .avatar.avatar {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
}

.chip-container.medium {
  height: 24px;
  padding: 0 8px;
  gap: 6px;
}

.chip-container.medium .icon {
  width: 16px;
  height: 16px;
}

.chip-container.medium .avatar.avatar {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

.chip-container.large {
  height: 32px;
  padding: 0 8px;
  gap: 8px;
}

.chip-container.large .icon {
  width: 20px;
  height: 20px;
}

.chip-container.large .avatar.avatar {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

.spinner-wrapper {
  position: relative;
  display: inline-block;
}

.spinner-wrapper .spinner {
  width: 80px;
  height: 80px;
  border: 5px solid var(--swatches-base-default);
  border-top-color: var(--swatches-on-surface-primary);
  border-radius: 50%;
  animation: spin 3s linear infinite;
}

.spinner-wrapper .spinner.invert {
  border: 5px solid var(--swatches-transparent);
  border-top-color: var(--swatches-on-surface-invert);
}

.spinner-wrapper .spinner.invert + .logo-spinner {
  background-image: var(--logo-spinner-invert);
}

.spinner-wrapper .logo-spinner {
  background-image: var(--logo-spinner);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.store {
  height: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  object-fit: contain;
}

.store.google-play-dark {
  width: 135px;
  background-image: url("/assets/google-dark-KVf--Kzo.svg");
}

.store.apple-store-dark {
  width: 135px;
  height: 40px;
  background-image: url("/assets/apple-dark-Bfg45T-O.svg");
}

.store.galaxy-store-dark {
  width: 147px;
  height: 40px;
  background-image: url("/assets/galaxy-dark-CeafW-NA.svg");
}

.store.google-play-light {
  width: 135px;
  height: 40px;
  background-image: url("/assets/google-default-68GjW_nM.svg");
}

.store.apple-store-light {
  width: 135px;
  height: 40px;
  background-image: url("/assets/apple-default-keRQJZu5.svg");
}

.store.galaxy-store-light {
  width: 147px;
  height: 40px;
  background-image: url("/assets/galaxy-default-C236Mrkw.svg");
}

.symbol {
  color: var(--swatches-on-surface-primary);
}

.symbol svg {
  width: 60px;
  height: 60px;
}

.symbol svg path {
  fill: none;
  stroke: var(--swatches-on-surface-primary);
  stroke-width: 1px;
}

.symbol.symbol-outline svg path {
  fill: var(--swatches-on-surface-primary);
  stroke: none;
  stroke-width: 1px;
}

.symbol.symbol-line-black {
  color: var(--swatches-on-surface-base);
}

.symbol.symbol-line-black svg path {
  fill: none;
  stroke: var(--swatches-on-surface-base);
  stroke-width: 1px;
}

.symbol.symbol-outline-black {
  color: var(--swatches-on-surface-base);
}

.symbol.symbol-outline-black svg path {
  fill: var(--swatches-on-surface-base);
  stroke: none;
  stroke-width: 1px;
}

.symbol.symbol-line-invert {
  color: var(--swatches-on-surface-invert);
}

.symbol.symbol-line-invert svg path {
  fill: var(--swatches-on-surface-invert);
  stroke: none;
  stroke-width: 1px;
}

.symbol.symbol-outline-invert {
  color: var(--swatches-on-surface-invert);
}

.symbol.symbol-outline-invert svg path {
  fill: var(--swatches-on-surface-invert);
  stroke: none;
  stroke-width: 1px;
}

.toggle {
  display: flex;
  align-items: center;
}

.form-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-toggle .input {
  position: relative;
  appearance: none;
  background-color: var(--swatches-on-base-alt);
  border: 2px solid transparent;
  border-radius: 32px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  outline: none;
}

.form-toggle .input:hover, .form-toggle .input:hover + label, label:hover + .form-toggle .input {
  border-color: transparent;
}

.form-toggle .input:focus {
  outline: none;
  border-color: transparent;
}

.form-toggle .input:focus-visible {
  box-shadow: 0 0 0 3px var(--swatches-border-base-focus);
}

.form-toggle .input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: var(--swatches-base-default);
  transition: left 0.3s ease, right 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.form-toggle .input::after {
  content: none;
  background: none;
  mask: none;
  -webkit-mask: none;
  border: 0;
  box-shadow: none;
}

.form-toggle .input:checked {
  background-color: var(--swatches-on-surface-base);
  border-color: transparent;
}

.form-toggle .input:checked:hover, .form-toggle .input:checked:hover + label, label:hover + .form-toggle .input:checked {
  border-color: transparent;
}

.form-toggle .input:checked::before {
  left: auto;
  right: 2px;
}

.form-toggle .input::-moz-focus-inner {
  border: 0;
}

.form-toggle .input::-ms-check {
  display: none;
}

.form-toggle .input::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.form-toggle.primary .input:focus-visible {
  box-shadow: 0 0 0 3px var(--swatches-border-primary-focus);
}

.form-toggle.primary .input:checked {
  background-color: var(--swatches-primary-default);
  border-color: transparent;
}

.form-toggle.primary .input:checked:hover, .form-toggle.primary .input:checked:hover + label, label:hover + .form-toggle.primary .input:checked {
  border-color: transparent;
}

.form-toggle.invert .input {
  background-color: var(--swatches-border-invert);
  border-color: transparent;
}

.form-toggle.invert .input:hover, .form-toggle.invert .input:hover + label, label:hover + .form-toggle.invert .input {
  border-color: transparent;
}

.form-toggle.invert .input:focus {
  outline: none;
  border-color: transparent;
}

.form-toggle.invert .input:focus-visible {
  box-shadow: 0 0 0 3px var(--swatches-border-invert);
}

.form-toggle.invert .input::before {
  background-color: var(--swatches-surface-invert);
}

.form-toggle.invert .input:checked {
  background-color: var(--swatches-on-surface-invert);
  border-color: transparent;
}

.form-toggle.invert .input:checked:hover, .form-toggle.invert .input:checked:hover + label, label:hover + .form-toggle.invert .input:checked {
  border-color: transparent;
}

.form-toggle.invert label {
  color: var(--swatches-on-surface-invert);
}

.form-toggle.disabled .input {
  cursor: not-allowed;
  background-color: var(--swatches-on-base-alt);
  border: solid 2px var(--swatches-on-base-alt);
  pointer-events: none;
}

.form-toggle.disabled .input:focus-visible {
  box-shadow: none;
}

.form-toggle.disabled .input:hover, .form-toggle.disabled .input:hover + label, label:hover + .form-toggle.disabled .input {
  border-color: var(--swatches-on-base-alt);
}

.form-toggle.disabled .input::before {
  background-color: var(--swatches-base-default);
}

.form-toggle.disabled .input:checked {
  background-color: var(--swatches-on-base-alt);
  border-color: var(--swatches-on-base-alt);
}

.form-toggle.disabled .input:checked:hover, .form-toggle.disabled .input:checked:hover + label, label:hover + .form-toggle.disabled .input:checked {
  border-color: var(--swatches-on-base-alt);
}

.form-toggle.disabled label {
  color: var(--swatches-on-base-alt);
  cursor: not-allowed;
  pointer-events: none;
}

.form-toggle.small .input {
  width: 30px;
  height: 16px;
}

.form-toggle.small .input::before {
  width: 12px;
  height: 12px;
}

.form-toggle.medium .input {
  width: 34px;
  height: 20px;
}

.form-toggle.medium .input::before {
  inset: 1px auto 2px 2px;
  transform: none;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  transition: left 0.3s ease, right 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.form-toggle.medium .input:checked::before,
.form-toggle.medium .input:checked::after {
  left: auto;
  right: 2px;
}

.form-toggle.large .input {
  width: 46px;
  height: 24px;
}

.form-toggle.large .input::before {
  width: 20px;
  height: 20px;
}

.form-toggle label {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--swatches-on-surface-base);
  cursor: pointer;
}

.form-toggle.small label {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .form-toggle.small label {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-toggle.small label {
    font-size: 12px;
  }
}

.form-toggle.medium label {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .form-toggle.medium label {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-toggle.medium label {
    font-size: 14px;
  }
}

.form-toggle.large label {
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .form-toggle.large label {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-toggle.large label {
    font-size: 16px;
  }
}

.search-container {
  font-family: var(--font-body);
  width: 100%;
}

.search-container .filters-container .form-group .form-control.select:focus,
.search-container .filters-container .form-group .form-control.select:active,
.search-container .filters-container .form-group .form-control.select:hover {
  outline: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .search-container .filters-container {
    margin-top: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .search-container .filters-container {
    margin-top: 8px;
  }
}

.search-container .filters-container .filters-grid + .filters-grid {
  margin-top: 24px;
}

.search-container .filters-container.small .filters-grid + .filters-grid {
  margin-top: 8px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .search-container .filters-container.small .filters-grid + .filters-grid {
    margin-top: 8px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .search-container .filters-container.small .filters-grid + .filters-grid {
    margin-top: 8px;
  }
}

.search-container .filters-container.medium .filters-grid + .filters-grid {
  margin-top: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .search-container .filters-container.medium .filters-grid + .filters-grid {
    margin-top: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .search-container .filters-container.medium .filters-grid + .filters-grid {
    margin-top: 8px;
  }
}

.search-container .filters-container.large .filters-grid + .filters-grid {
  margin-top: 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .search-container .filters-container.large .filters-grid + .filters-grid {
    margin-top: 20px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .search-container .filters-container.large .filters-grid + .filters-grid {
    margin-top: 16px;
  }
}

.search-container .search-header {
  font-family: var(--font-body);
  display: none;
}

@media (min-width: 360px) and (max-width: 767px) {
  .search-container .search-header {
    display: block;
  }
}

.search-container .search-header .title-search-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
  gap: 8px;
}

.search-container .search-header .title-search-row.no-title .form-group .form-control {
  width: 210px;
}

.search-container .search-header .filters-buttons-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
  gap: 8px;
}

.search-container .search-header .filters-buttons-row .filters-container.inline {
  margin-top: 0;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-container .search-header .filters-buttons-row .filters-container.inline.no-filter-btn {
  flex: 1 1 0;
  min-width: 0;
}

.search-container .search-header .filters-buttons-row .filters-container.inline.no-filter-btn .filter-item {
  flex: 1 1 0;
  min-width: 0;
}

.search-container .search-header .filters-buttons-row .filters-container.inline.no-filter-btn .filter-item .form-group {
  flex: 1 1 0;
  width: 100%;
}

.search-container .search-header .filters-buttons-row .filters-container.inline.no-filter-btn .filter-item .form-group .form-control {
  width: 100%;
}

.search-container .search-header .search-button-row {
  display: flex;
  width: 100%;
  gap: 8px;
}

.search-container .search-header .search-button-row .btn {
  white-space: nowrap;
}

.search-container .search-header.no-search-input .title-search-row .filters-container.inline {
  margin-top: 0;
  display: flex;
  align-items: center;
}

.search-container .search-header.no-search-input .filters-buttons-row {
  display: none;
}

.search-container .search-header.no-search-input .search-button-row .btn + .btn {
  margin-left: 8px;
}

.search-container .search-header.no-filters .filters-buttons-row .btn {
  white-space: nowrap;
}

.search-container .search-header.no-filters .search-button-row {
  display: none;
}

.search-container .search-bar-row {
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  width: 100%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .search-container .search-bar-row {
    display: none;
  }
}

.search-container .search-bar-row .filters-container.inline {
  margin-top: 0;
  display: flex;
  align-items: center;
}

.search-container .search-bar-row .filters-container.inline.auto-grow {
  flex: 1 1 0;
  min-width: 0;
}

.search-container .search-bar-row .filters-container.inline.auto-grow .filter-item {
  flex: 1 1 0;
  min-width: 0;
}

.search-container .search-bar-row .filters-container.inline.auto-grow .filter-item .form-group {
  flex: 1 1 0;
  width: 100%;
}

.search-container .search-bar-row .filters-container.inline.auto-grow .filter-item .form-group .form-control {
  width: 100%;
  max-width: 100%;
}

.search-container .search-bar-row .auto-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.search-container .search-bar-row .auto-grow.filter-item, .search-container .search-bar-row .auto-grow.filter-item.active {
  display: flex;
}

.search-container .search-bar-row .auto-grow.filter-item .form-group, .search-container .search-bar-row .auto-grow.filter-item.active .form-group {
  flex: 1 1 auto;
  width: 100%;
}

.search-container .search-bar-row .auto-grow.filter-item .form-group .form-control, .search-container .search-bar-row .auto-grow.filter-item.active .form-group .form-control {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}

.search-container .search-bar-row .auto-grow.filter-item select.form-control, .search-container .search-bar-row .auto-grow.filter-item.active select.form-control {
  width: 100%;
}

.search-container .search-bar-row .auto-grow.form-group {
  flex: 1 1 auto;
  width: 100%;
}

.search-container .search-bar-row .auto-grow.form-group .form-control {
  width: 100%;
  max-width: 100%;
}

.form-control.auto-grow .search-container .search-bar-row .auto-grow {
  width: 100%;
}

.search-container .search-bar-row .auto-grow.btn {
  justify-content: flex-start;
  white-space: nowrap;
}

.search-container .search-bar-row.small {
  gap: 8px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .search-container .search-bar-row.small {
    gap: 8px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .search-container .search-bar-row.small {
    gap: 8px;
  }
}

.search-container .search-bar-row.medium {
  gap: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .search-container .search-bar-row.medium {
    gap: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .search-container .search-bar-row.medium {
    gap: 8px;
  }
}

.search-container .search-bar-row.large {
  gap: 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .search-container .search-bar-row.large {
    gap: 20px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .search-container .search-bar-row.large {
    gap: 16px;
  }
}

.search-container .table-title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.search-container .table-title.small {
  font-size: 20px;
  height: 32px;
}

.search-container .table-title.medium {
  font-size: 20px;
  height: 40px;
}

.search-container .table-title.large {
  font-size: 20px;
  height: 48px;
}

.search-container .title-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-container .form-group {
  margin: 0;
}

.search-container .form-group .form-control {
  width: 100%;
  min-width: 260px;
  font-size: 14px;
}

.search-container .search-header .title-search-row .form-group {
  flex: 1 1 0;
  min-width: 0;
}

.search-container .search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .search-container .search-row {
    margin-top: 12px;
  }
  .search-container .search-row > .btn {
    margin-top: 24px;
    width: 100%;
  }
}

.search-container .search-row .chip-container,
.search-container .search-row .chip-container.small,
.search-container .search-row .chip-container.medium,
.search-container .search-row .chip-container.large {
  width: 135px;
  min-width: 135px;
  height: 24px;
  border: none;
}

.search-container .search-row .active:hover {
  background-color: var(--swatches-primary-default);
  color: var(--swatches-on-primary);
}

.search-container .search-row .active:hover i.icon {
  background-color: var(--swatches-on-primary);
}

.search-container .search-row .active:hover svg.icon {
  color: var(--swatches-on-primary);
}

.table-container {
  width: 100%;
  height: auto;
  max-height: var(--table-height, 800px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.table-container table {
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
  height: auto;
  border-collapse: collapse;
  table-layout: auto;
}

.table-container table thead tr.group-search {
  background: var(--swatches-surface-alt);
  position: sticky;
  top: 0;
  z-index: 11;
}

.table-container table thead tr + tr {
  position: sticky;
  z-index: 10;
}

.table-container table thead tr:first-child:not(.group-search) {
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-container table.stripe tbody tr.data-row.odd {
  background-color: var(--swatches-background);
}

.table-container table.hoverable tbody tr:hover {
  background-color: var(--swatches-background);
}

.table-container table th.top,
.table-container table td.top {
  vertical-align: top;
}

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

.table-container table th.bottom,
.table-container table td.bottom {
  vertical-align: bottom;
}

.table-container table.table-small th {
  height: 40px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--swatches-on-surface-neutral);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}

.table-container table.table-small th:hover {
  cursor: pointer;
  background-color: var(--swatches-background);
}

.table-container table.table-small th.center {
  text-align: center;
}

.table-container table.table-small th.left {
  text-align: left;
}

.table-container table.table-small th.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small th {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small th {
    font-size: 10px;
  }
}

.table-container table.table-small th:first-child {
  padding-left: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small th:first-child {
    padding-left: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small th:first-child {
    padding-left: 12px;
  }
}

.table-container table.table-small th:last-child {
  padding-right: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small th:last-child {
    padding-right: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small th:last-child {
    padding-right: 12px;
  }
}

.table-container table.table-small .table-title {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-direction: row;
  font-weight: 600;
}

.table-container table.table-small td {
  position: relative;
  height: 40px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  padding: 0 4px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--swatches-on-surface-neutral);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-container table.table-small td.center {
  text-align: center;
}

.table-container table.table-small td.left {
  text-align: left;
}

.table-container table.table-small td.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td {
    font-size: 12px;
  }
}

.table-container table.table-small td:first-child {
  padding-left: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td:first-child {
    padding-left: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td:first-child {
    padding-left: 12px;
  }
}

.table-container table.table-small td:last-child {
  padding-right: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td:last-child {
    padding-right: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td:last-child {
    padding-right: 12px;
  }
}

.table-container table.table-small td.column-leading {
  padding: 0 4px 0 8px;
}

.table-container table.table-small td.column-leading .leading-text {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 800;
  font-size: 14px;
  text-overflow: ellipsis;
  line-height: 120%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td.column-leading .leading-text {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td.column-leading .leading-text {
    font-size: 12px;
  }
}

.table-container table.table-small td.column-leading .subtitle {
  font-weight: 400;
  font-size: 12px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td.column-leading .subtitle {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td.column-leading .subtitle {
    font-size: 10px;
  }
}

.table-container table.table-small td.column-single-text {
  font-weight: 400;
  font-size: 14px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td.column-single-text {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td.column-single-text {
    font-size: 12px;
  }
}

.table-container table.table-small td.column-number {
  text-align: right;
}

.table-container table.table-small td.column-description {
  font-weight: 400;
  font-size: 12px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td.column-description {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td.column-description {
    font-size: 10px;
  }
}

.table-container table.table-small td.column-actions {
  text-align: center;
}

.table-container table.table-small td.column-actions > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}

.table-container table.table-small td.column-actions > *:first-child {
  margin-left: 0;
}

.table-container table.table-small td.column-actions > *:last-child {
  margin-right: 0;
}

.table-container table.table-small.table-2x td {
  height: 80px;
}

.table-container table.table-medium th {
  height: 56px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--swatches-on-surface-neutral);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.table-container table.table-medium th.center {
  text-align: center;
}

.table-container table.table-medium th.left {
  text-align: left;
}

.table-container table.table-medium th.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium th {
    font-size: 14px;
    padding: 0 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium th {
    font-size: 14px;
    padding: 0 12px;
  }
}

.table-container table.table-medium th:first-child {
  padding-left: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium th:first-child {
    padding-left: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium th:first-child {
    padding-left: 20px;
  }
}

.table-container table.table-medium th:last-child {
  padding-right: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium th:last-child {
    padding-right: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium th:last-child {
    padding-right: 20px;
  }
}

.table-container table.table-medium .table-title {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-direction: row;
  font-weight: 600;
}

.table-container table.table-medium td {
  position: relative;
  height: 56px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  padding: 0 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--swatches-on-surface-neutral);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-container table.table-medium td.center {
  text-align: center;
}

.table-container table.table-medium td.left {
  text-align: left;
}

.table-container table.table-medium td.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td {
    padding: 0 8px;
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td {
    padding: 0 12px;
    font-size: 14px;
  }
}

.table-container table.table-medium td:first-child {
  padding-left: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td:first-child {
    padding-left: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td:first-child {
    padding-left: 20px;
  }
}

.table-container table.table-medium td:last-child {
  padding-right: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td:last-child {
    padding-right: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td:last-child {
    padding-right: 20px;
  }
}

.table-container table.table-medium td.column-leading .leading-text {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 800;
  font-size: 16px;
  text-overflow: ellipsis;
  line-height: 120%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td.column-leading .leading-text {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td.column-leading .leading-text {
    font-size: 14px;
  }
}

.table-container table.table-medium td.column-leading .subtitle {
  font-weight: 400;
  font-size: 14px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td.column-leading .subtitle {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td.column-leading .subtitle {
    font-size: 12px;
  }
}

.table-container table.table-medium td.column-single-text {
  font-weight: 400;
  font-size: 16px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td.column-single-text {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td.column-single-text {
    font-size: 14px;
  }
}

.table-container table.table-medium td.column-number {
  text-align: right;
}

.table-container table.table-medium td.column-description {
  font-weight: 400;
  font-size: 14px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td.column-description {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td.column-description {
    font-size: 12px;
  }
}

.table-container table.table-medium td.column-actions {
  text-align: center;
}

.table-container table.table-medium td.column-actions > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}

.table-container table.table-medium td.column-actions > *:first-child {
  margin-left: 0;
}

.table-container table.table-medium td.column-actions > *:last-child {
  margin-right: 0;
}

.table-container table.table-medium.table-2x td {
  height: 112px;
}

.table-container table.table-large th {
  height: 72px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--swatches-on-surface-neutral);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 16px;
}

.table-container table.table-large th.center {
  text-align: center;
}

.table-container table.table-large th.left {
  text-align: left;
}

.table-container table.table-large th.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large th {
    font-size: 16px;
    padding: 0 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large th {
    font-size: 16px;
    padding: 0 12px;
  }
}

.table-container table.table-large th:first-child {
  padding-left: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large th:first-child {
    padding-left: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large th:first-child {
    padding-left: 24px;
  }
}

.table-container table.table-large th:last-child {
  padding-right: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large th:last-child {
    padding-right: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large th:last-child {
    padding-right: 24px;
  }
}

.table-container table.table-large .table-title {
  display: flex;
  gap: 16px;
  align-items: center;
  font-weight: 600;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large .table-title {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large .table-title {
    gap: 12px;
  }
}

.table-container table.table-large td {
  position: relative;
  height: 72px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--swatches-on-surface-neutral);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-container table.table-large td.center {
  text-align: center;
}

.table-container table.table-large td.left {
  text-align: left;
}

.table-container table.table-large td.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td {
    padding: 0 8px;
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td {
    padding: 0 12px;
    font-size: 16px;
  }
}

.table-container table.table-large td:first-child {
  padding-left: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td:first-child {
    padding-left: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td:first-child {
    padding-left: 24px;
  }
}

.table-container table.table-large td:last-child {
  padding-right: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td:last-child {
    padding-right: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td:last-child {
    padding-right: 24px;
  }
}

.table-container table.table-large td.column-leading .leading-text {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 800;
  font-size: 18px;
  text-overflow: ellipsis;
  line-height: 120%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td.column-leading .leading-text {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td.column-leading .leading-text {
    font-size: 16px;
  }
}

.table-container table.table-large td.column-leading .subtitle {
  font-weight: 400;
  font-size: 16px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td.column-leading .subtitle {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td.column-leading .subtitle {
    font-size: 14px;
  }
}

.table-container table.table-large td.column-single-text {
  font-weight: 400;
  font-size: 18px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td.column-single-text {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td.column-single-text {
    font-size: 16px;
  }
}

.table-container table.table-large td.column-number {
  text-align: right;
}

.table-container table.table-large td.column-description {
  font-weight: 400;
  font-size: 16px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td.column-description {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td.column-description {
    font-size: 14px;
  }
}

.table-container table.table-large td.column-actions {
  text-align: center;
}

.table-container table.table-large td.column-actions > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}

.table-container table.table-large td.column-actions > *:first-child {
  margin-left: 0;
}

.table-container table.table-large td.column-actions > *:last-child {
  margin-right: 0;
}

.table-container table.table-large.table-2x td {
  height: 144px;
}

.table-container table td.column-actions {
  overflow: visible;
}

.table-composition {
  width: 100%;
  max-height: var(--table-height, 800px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.table-composition > .table-container {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(var(--table-height, 800px) - var(--table-footer-height, 88px));
  overflow: auto;
}

.table-composition > .pagination-container,
.table-composition > .table-footer {
  flex: 0 0 auto;
}

.table-composition.page-scroll {
  max-height: none;
  overflow: visible;
}

.table-composition.page-scroll > .table-container {
  max-height: none;
  overflow: visible;
}

th.fixed-column,
td.fixed-column {
  position: sticky !important;
  z-index: 5;
  background: var(--swatches-surface-alt);
}

thead th.fixed-column {
  z-index: 7;
}

thead tr.group-search th.fixed-column {
  z-index: 8;
}

tfoot tr {
  position: relative;
  z-index: 11;
}

td.fixed-column:first-child,
th.fixed-column:first-child {
  background-clip: padding-box;
}

.toggle-expand {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.toggle-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
}

tbody tr.row-detail {
  display: none;
}

tbody tr:has(.toggle-expand:checked) {
  background: var(--swatches-surface-alt);
}

tbody tr:has(.toggle-expand:checked) + tr.row-detail {
  display: table-row;
}

tbody tr.expanded {
  background: var(--swatches-surface-alt);
}

tbody tr.expanded + tr.row-detail {
  display: table-row;
}

.row-detail .row-detail-content {
  padding: 16px;
  color: var(--swatches-on-surface-neutral);
  font-size: 14px;
}

.title {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.title .title-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title .title-top .left {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  gap: 8px;
}

.title .title-top .left .icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.title .title-top .left .icon-wrapper i.icon {
  background-color: var(--swatches-on-base);
}

.title .title-top .left .icon-wrapper svg.icon {
  color: var(--swatches-on-base);
}

.title .title-top .left .icon-global-wrapper i.icon,
.title .title-top .left .icon-global-wrapper svg.icon {
  width: 16px !important;
  height: 16px !important;
}

.title .title-top .left .custom-link {
  margin-bottom: 8px;
}

.title .title-top .left .title {
  line-height: 100%;
  font-family: var(--font-title);
  margin-bottom: 8px;
  font-weight: 800;
}

.title .title-top .left .description {
  margin: 0;
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-body);
}

.title .title-top .left i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon) {
  background-color: var(--swatches-on-base);
}

.title .title-top .left svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  color: var(--swatches-on-base);
}

.title .title-top .right {
  display: flex;
  align-items: center;
}

.title .title-bottom {
  display: flex;
}

.title .title-bottom i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon) {
  background-color: var(--swatches-on-base-alt);
}

.title .title-bottom svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  color: var(--swatches-on-base-alt);
}

.title.invert {
  background-color: var(--swatches-surface-invert);
}

.title.invert .title-top .left .icon-wrapper {
  border: 1px solid var(--swatches-surface-alt-invert);
  background: var(--swatches-surface-invert);
}

.title.invert .title-top .left .icon-wrapper i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .icon-wrapper svg.icon {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:hover {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:hover > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:hover > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:active {
  color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link:active > i.icon {
  background-color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link:active > svg.icon {
  color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link:focus-visible {
  color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link:focus-visible > i.icon {
  background-color: var(--swatches-primary-selected);
}

.title.invert .title-top .left .custom-link:focus-visible > svg.icon {
  color: var(--swatches-primary-selected);
}

.title.invert .title-top .left .custom-link::selection {
  color: var(--swatches-primary-selected);
}

.title.invert .title-top .left .custom-link::selection > i.icon {
  background-color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link::selection > svg.icon {
  color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link:disabled {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:disabled > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:disabled > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .title {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .description {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon) {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-bottom i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon) {
  background-color: var(--swatches-on-surface-alt-invert);
}

.title.invert .title-bottom svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  color: var(--swatches-on-surface-alt-invert);
}

.title.small .title-top {
  gap: 16px;
  padding: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top {
    gap: 8px;
    padding: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top {
    gap: 12px;
    padding: 12px;
  }
}

.title.small .title-top .left {
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left {
    gap: 12px;
  }
}

.title.small .title-top .left .icon-wrapper {
  width: 48px;
  height: 48px;
  padding: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left .icon-wrapper {
    width: 32px;
    height: 32px;
    padding: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left .icon-wrapper {
    width: 40px;
    height: 40px;
    padding: 12px;
  }
}

.title.small .title-top .left .icon-wrapper i.icon,
.title.small .title-top .left .icon-wrapper svg.icon {
  width: 24px;
  height: 24px;
}

.title.small .title-top .left .custom-link {
  font-size: 12px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left .custom-link {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left .custom-link {
    font-size: 10px;
  }
}

.title.small .title-top .left .custom-link i.icon,
.title.small .title-top .left .custom-link svg.icon {
  width: 8px;
  height: 8px;
}

.title.small .title-top .left .custom-link i.flag {
  width: 8px;
  height: 8px;
}

.title.small .title-top .left .title {
  font-size: 20px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left .title {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left .title {
    font-size: 18px;
  }
}

.title.small .title-top .left .description {
  font-size: 12px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left .description {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left .description {
    font-size: 10px;
  }
}

.title.small .title-top .left i.icon:not(.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.small .title-top .left svg.icon:not(.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 24px;
  height: 24px;
}

.title.small .title-top .left .badge {
  min-width: 32px;
  max-height: 32px;
  padding: 8px 10px;
  gap: 6px;
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left .badge {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left .badge {
    font-size: 12px;
  }
}

.title.small .title-top .left .badge i.icon,
.title.small .title-top .left .badge svg.icon {
  width: 11.67px;
  height: 11.67px;
}

.title.small .title-top .right {
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .right {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .right {
    gap: 12px;
  }
}

.title.small .title-top .right .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.title.small .title-top .right .btn > i.icon,
.title.small .title-top .right .btn > svg.icon {
  width: 12px;
  height: 12px;
}

.title.small .title-top .right .btn > i.flag {
  width: 12px;
  height: 12px;
}

.title.small .title-top .right .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.title.small .title-bottom {
  padding: 0 16px 8px 16px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-bottom {
    padding: 0 8px 8px 8px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-bottom {
    padding: 0 12px 8px 12px;
    gap: 12px;
  }
}

.title.small .title-bottom i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.small .title-bottom svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 16px;
  height: 16px;
}

.title.small .title-bottom .custom-link {
  font-size: 12px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-bottom .custom-link {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-bottom .custom-link {
    font-size: 10px;
  }
}

.title.small .title-bottom .custom-link i.icon,
.title.small .title-bottom .custom-link svg.icon {
  width: 8px;
  height: 8px;
}

.title.small .title-bottom .custom-link i.flag {
  width: 8px;
  height: 8px;
}

.title.medium .title-top {
  gap: 24px;
  padding: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top {
    gap: 16px;
    padding: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top {
    gap: 20px;
    padding: 20px;
  }
}

.title.medium .title-top .left {
  gap: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left {
    gap: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left {
    gap: 20px;
  }
}

.title.medium .title-top .left .icon-wrapper {
  width: 64px;
  height: 64px;
  padding: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left .icon-wrapper {
    width: 48px;
    height: 48px;
    padding: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left .icon-wrapper {
    width: 56px;
    height: 56px;
    padding: 12px;
  }
}

.title.medium .title-top .left .icon-wrapper i.icon,
.title.medium .title-top .left .icon-wrapper svg.icon {
  width: 32px;
  height: 32px;
}

.title.medium .title-top .left .custom-link {
  font-size: 14px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left .custom-link {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left .custom-link {
    font-size: 12px;
  }
}

.title.medium .title-top .left .custom-link i.icon,
.title.medium .title-top .left .custom-link svg.icon {
  width: 12px;
  height: 12px;
}

.title.medium .title-top .left .custom-link i.flag {
  width: 12px;
  height: 12px;
}

.title.medium .title-top .left .title {
  font-size: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left .title {
    font-size: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left .title {
    font-size: 20px;
  }
}

.title.medium .title-top .left .description {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left .description {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left .description {
    font-size: 14px;
  }
}

.title.medium .title-top .left i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.medium .title-top .left svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 32px;
  height: 32px;
}

.title.medium .title-top .left .badge {
  min-width: 40px;
  max-height: 40px;
  padding: 8px 13px;
  gap: 8px;
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left .badge {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left .badge {
    font-size: 14px;
  }
}

.title.medium .title-top .left .badge i.icon,
.title.medium .title-top .left .badge svg.icon {
  width: 16.67px;
  height: 16.67px;
}

.title.medium .title-top .right {
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .right {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .right {
    gap: 12px;
  }
}

.title.medium .title-top .right .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.title.medium .title-top .right .btn > i.icon,
.title.medium .title-top .right .btn > svg.icon {
  width: 17px;
  height: 17px;
}

.title.medium .title-top .right .btn > i.flag {
  width: 17px;
  height: 17px;
}

.title.medium .title-top .right .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.title.medium .title-bottom {
  padding: 0 32px 16px 32px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-bottom {
    padding: 0 20px 8px 20px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-bottom {
    padding: 0 24px 12px 24px;
    gap: 12px;
  }
}

.title.medium .title-bottom i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.medium .title-bottom svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 16px;
  height: 16px;
}

.title.medium .title-bottom .custom-link {
  font-size: 14px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-bottom .custom-link {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-bottom .custom-link {
    font-size: 12px;
  }
}

.title.medium .title-bottom .custom-link i.icon,
.title.medium .title-bottom .custom-link svg.icon {
  width: 12px;
  height: 12px;
}

.title.medium .title-bottom .custom-link i.flag {
  width: 12px;
  height: 12px;
}

.title.large .title-top {
  gap: 32px;
  padding: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top {
    gap: 20px;
    padding: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top {
    gap: 24px;
    padding: 24px;
  }
}

.title.large .title-top .left {
  gap: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left {
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left {
    gap: 24px;
  }
}

.title.large .title-top .left .icon-wrapper {
  width: 72px;
  height: 72px;
  padding: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left .icon-wrapper {
    width: 56px;
    height: 56px;
    padding: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left .icon-wrapper {
    width: 64px;
    height: 64px;
    padding: 12px;
  }
}

.title.large .title-top .left .icon-wrapper i.icon,
.title.large .title-top .left .icon-wrapper svg.icon {
  width: 40px;
  height: 40px;
}

.title.large .title-top .left .custom-link {
  font-size: 16px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left .custom-link {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left .custom-link {
    font-size: 14px;
  }
}

.title.large .title-top .left .custom-link i.icon,
.title.large .title-top .left .custom-link svg.icon {
  width: 16px;
  height: 16px;
}

.title.large .title-top .left .custom-link i.flag {
  width: 16px;
  height: 16px;
}

.title.large .title-top .left .title {
  font-size: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left .title {
    font-size: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left .title {
    font-size: 28px;
  }
}

.title.large .title-top .left .description {
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left .description {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left .description {
    font-size: 16px;
  }
}

.title.large .title-top .left i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.large .title-top .left svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 40px;
  height: 40px;
}

.title.large .title-top .left .badge {
  min-width: 48px;
  max-height: 48px;
  padding: 8px 16px;
  gap: 10px;
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left .badge {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left .badge {
    font-size: 16px;
  }
}

.title.large .title-top .left .badge i.icon,
.title.large .title-top .left .badge svg.icon {
  width: 20px;
  height: 20px;
}

.title.large .title-top .right {
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .right {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .right {
    gap: 12px;
  }
}

.title.large .title-top .right .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.title.large .title-top .right .btn > i.icon,
.title.large .title-top .right .btn > svg.icon {
  width: 20px;
  height: 20px;
}

.title.large .title-top .right .btn > i.flag {
  width: 20px;
  height: 20px;
}

.title.large .title-top .right .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.title.large .title-bottom {
  padding: 0 32px 16px 32px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-bottom {
    padding: 0 20px 8px 20px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-bottom {
    padding: 0 24px 12px 24px;
    gap: 12px;
  }
}

.title.large .title-bottom i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.large .title-bottom svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 16px;
  height: 16px;
}

.title.large .title-bottom .custom-link {
  font-size: 16px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-bottom .custom-link {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-bottom .custom-link {
    font-size: 14px;
  }
}

.title.large .title-bottom .custom-link i.icon,
.title.large .title-bottom .custom-link svg.icon {
  width: 16px;
  height: 16px;
}

.title.large .title-bottom .custom-link i.flag {
  width: 16px;
  height: 16px;
}

.timepicker-container {
  border: 1px solid var(--swatches-base-active-alt);
  background-color: var(--neutral-0);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--swatches-on-surface-base);
  max-width: fit-content;
}

.timepicker-container.radius-pill {
  border-radius: 16px;
}

.timepicker-container.radius-round {
  border-radius: 8px;
}

.timepicker-container.radius-straigh {
  border-radius: 0;
}

.timepicker-container .timepicker-header {
  background-color: var(--swatches-primary-default);
  height: 88px;
  color: var(--swatches-base-default);
  text-align: center;
}

.timepicker-container .time-display {
  margin: 0;
  padding-top: 8px;
}

.timepicker-container .timepicker-mobile {
  max-width: 328px;
  padding: 24px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timepicker-container .timepicker-mobile.timepicker-mobile--minute {
  --number-count: 12;
  --number-center-count: 12;
  --number-radius: 7.2rem;
  --number-center-radius: 4.2rem;
  --number-size: 2.4rem;
  --number-center-size: 2.4rem;
}

.timepicker-container .timepicker-mobile.timepicker-mobile--hour {
  --number-count: 12;
  --number-center-count: 12;
  --number-radius: 7.2rem;
  --number-center-radius: 4.2rem;
  --number-size: 2.4rem;
  --number-center-size: 2.4rem;
  --hand-length: 7.2rem;
}

.timepicker-container .timepicker-mobile .clock-wrap {
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background-color: var(--swatches-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.timepicker-container .timepicker-mobile .clock-numbers {
  width: 100%;
  height: 100%;
  position: relative;
}

.timepicker-container .timepicker-mobile .clock-number {
  margin: 0;
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.12s ease;
  pointer-events: auto;
  transform-origin: 50% 50%;
  top: 50%;
  left: 50%;
}

.timepicker-container .timepicker-mobile .no-interaction .clock-number {
  cursor: default;
  pointer-events: none;
}

.timepicker-container .timepicker-mobile .clock-number.number {
  transform: rotate(calc(var(--i) * 360deg / var(--number-count))) translateY(calc(-1 * var(--number-radius))) rotate(calc(-1 * var(--i) * 360deg / var(--number-count))) translate(-50%, -50%);
}

.timepicker-container .timepicker-mobile .clock-number.number-center {
  transform: rotate(calc(var(--i) * 360deg / var(--number-center-count))) translateY(calc(-1 * var(--number-center-radius))) rotate(calc(-1 * var(--i) * 360deg / var(--number-center-count))) translate(-50%, -50%);
}

.timepicker-container .timepicker-mobile .clock-number.active {
  z-index: 3;
}

.timepicker-container .timepicker-mobile .clock-number.number.active {
  margin: 0;
  background-color: var(--swatches-primary-default);
  color: var(--swatches-base-default);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

.timepicker-container .timepicker-mobile .clock-number.number-center.active {
  background-color: var(--swatches-primary-default);
  color: var(--swatches-base-default);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.timepicker-container .timepicker-mobile .clock-hand {
  position: absolute;
  width: 2px;
  left: 50%;
  bottom: 52%;
  top: auto;
  height: 0;
  background: transparent;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(0deg) scaleY(1);
  border-radius: 1px;
  z-index: 2;
  --hand-length: var(--active-distance, var(--active-distance-fallback, 6rem));
  transition: transform 0.18s ease, --hand-length 0.18s ease;
}

.timepicker-container .timepicker-mobile .clock-hand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: var(--hand-length);
  background-color: var(--swatches-surface-alt-invert);
  transform: translateX(-50%);
  border-radius: 1px;
  z-index: 1;
}

.timepicker-container .timepicker-mobile .clock-hand.number-hand {
  --hand-length: 6.2rem;
  transform: translateX(-50%) rotate(0deg) scaleY(1.25);
}

.timepicker-container .timepicker-mobile .clock-hand.number-center-hand {
  --hand-length: 4.2rem;
  transform: translateX(-50%) rotate(0deg) scaleY(1);
}

.timepicker-container .timepicker-mobile .clock-center {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--swatches-base-default-alt);
  border-radius: 50%;
  z-index: 3;
}

.timepicker-container .timepicker-desktop {
  display: flex;
  gap: 8px;
  min-width: 200px;
}

.timepicker-container .timepicker-desktop .columns {
  display: flex;
  width: 100%;
}

.timepicker-container .timepicker-desktop .col {
  flex: 1;
  max-height: 14rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.timepicker-container .timepicker-desktop .col::-webkit-scrollbar {
  display: none;
}

.timepicker-container .timepicker-desktop .col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timepicker-container .timepicker-desktop #col-minutes {
  border-left: 1px solid var(--swatches-border-base);
}

.timepicker-container .timepicker-desktop .col .item {
  width: 100%;
  padding: 16px;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 600;
}

.timepicker-container .timepicker-desktop .col .item:hover {
  background-color: var(--neutral-200);
}

.timepicker-container .timepicker-desktop .col .item.active {
  background-color: var(--swatches-primary-default);
  color: var(--swatches-base-default);
}

.timepicker-container .action-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid var(--swatches-border-base);
}

@media (min-width: 360px) and (max-width: 767px) {
  .timepicker-container {
    max-width: 18rem;
  }
}

.toast {
  border-radius: 8px;
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  color: var(--swatches-on-surface-base);
  position: relative;
  z-index: 1;
  background-color: var(--swatches-base-subtle);
  border-color: var(--swatches-border-base);
}

.toast > i.icon {
  background-color: var(--swatches-on-surface-base);
}

.toast > svg.icon {
  color: var(--swatches-on-surface-base);
}

.toast .toast-body {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.toast .close-toast {
  position: absolute;
  right: 15px;
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
}

.toast .close-toast > i.icon {
  background-color: var(--swatches-on-surface-base);
}

.toast .close-toast > svg.icon {
  color: var(--swatches-on-surface-base);
}

.toast .title {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--swatches-on-surface-base);
}

.toast .text {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--swatches-on-surface-base);
  margin: 0;
}

.toast.medium {
  padding: 24px;
}

.toast.medium > i.icon,
.toast.medium > svg.icon {
  width: 32px;
  height: 32px;
}

.toast.medium .toast-body {
  margin-top: 4px;
  gap: 24px;
}

.toast.medium .close-toast {
  width: 16px;
  height: 16px;
}

.toast.medium .close-toast > i.icon,
.toast.medium .close-toast > svg.icon {
  width: 16px;
  height: 16px;
}

.toast.medium .title {
  font-size: 18px;
  margin-bottom: 8px;
}

.toast.medium .text {
  font-size: 16px;
  margin-bottom: 8px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .toast.medium {
    padding: 20px;
  }
  .toast.medium .toast-body {
    margin-top: 4px;
    gap: 20px;
  }
  .toast.medium .title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .toast.medium .text {
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .toast.medium {
    padding: 16px;
  }
  .toast.medium .toast-body {
    margin-top: 4px;
    gap: 16px;
  }
  .toast.medium .title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .toast.medium .text {
    font-size: 14px;
  }
}

.toast.large {
  padding: 30px;
}

.toast.large > i.icon,
.toast.large > svg.icon {
  width: 48px;
  height: 48px;
}

.toast.large .toast-body {
  margin-top: 5px;
  gap: 30px;
}

.toast.large .close-toast {
  width: 20px;
  height: 20px;
}

.toast.large .close-toast > i.icon,
.toast.large .close-toast > svg.icon {
  width: 16px;
  height: 16px;
}

.toast.large .title {
  font-size: 20.25px;
  margin-bottom: 10px;
}

.toast.large .text {
  font-size: 18px;
  margin-bottom: 10px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .toast.large {
    padding: 25px;
  }
  .toast.large .toast-body {
    margin-top: 5px;
    gap: 25px;
  }
  .toast.large .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .toast.large .text {
    font-size: 15.75px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .toast.large {
    padding: 20px;
  }
  .toast.large .toast-body {
    margin-top: 5px;
    gap: 20px;
  }
  .toast.large .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .toast.large .text {
    font-size: 15.75px;
  }
}

.toast.toast-primary {
  background-color: var(--swatches-primary-subtle);
  border-color: var(--swatches-border-primary-focus);
}

.toast.toast-primary .title {
  color: var(--swatches-primary-active);
}

.toast.toast-primary > i {
  background-color: var(--swatches-primary-default);
}

.toast.toast-primary > svg.icon {
  color: var(--swatches-primary-default);
}

.toast.toast-primary .btn {
  color: var(--swatches-on-primary);
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-primary-default);
}

.toast.toast-primary .custom-link {
  color: var(--swatches-primary-default);
}

.toast.toast-secondary {
  background-color: var(--swatches-secondary-subtle);
  border-color: var(--swatches-border-secondary-focus);
}

.toast.toast-secondary .title {
  color: var(--swatches-secondary-active);
}

.toast.toast-secondary > i {
  background-color: var(--swatches-secondary-default);
}

.toast.toast-secondary > svg.icon {
  color: var(--swatches-secondary-default);
}

.toast.toast-secondary .btn {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-secondary-default);
  border-color: var(--swatches-secondary-default);
}

.toast.toast-secondary .custom-link {
  color: var(--swatches-secondary-default);
}

.toast.toast-tertiary {
  background-color: var(--swatches-tertiary-subtle);
  border-color: var(--swatches-border-tertiary-focus);
}

.toast.toast-tertiary .title {
  color: var(--swatches-tertiary-active);
}

.toast.toast-tertiary > i {
  background-color: var(--swatches-tertiary-default);
}

.toast.toast-tertiary > svg.icon {
  color: var(--swatches-tertiary-default);
}

.toast.toast-tertiary .btn {
  color: var(--swatches-on-tertiary);
  background-color: var(--swatches-tertiary-default);
  border-color: var(--swatches-tertiary-default);
}

.toast.toast-tertiary .custom-link {
  color: var(--swatches-tertiary-default);
}

.toast.toast-quaternary {
  background-color: var(--swatches-quaternary-subtle);
  border-color: var(--swatches-border-quaternary-focus);
}

.toast.toast-quaternary .title {
  color: var(--swatches-quaternary-active);
}

.toast.toast-quaternary > i {
  background-color: var(--swatches-quaternary-default);
}

.toast.toast-quaternary > svg.icon {
  color: var(--swatches-quaternary-default);
}

.toast.toast-quaternary .btn {
  color: var(--swatches-on-quaternary);
  background-color: var(--swatches-quaternary-default);
  border-color: var(--swatches-quaternary-default);
}

.toast.toast-quaternary .custom-link {
  color: var(--swatches-quaternary-default);
}

.toast.toast-success {
  background-color: var(--swatches-success-subtle);
  border-color: var(--swatches-border-success-focus);
}

.toast.toast-success .title {
  color: var(--swatches-success-active);
}

.toast.toast-success > i {
  background-color: var(--swatches-success-default);
}

.toast.toast-success > svg.icon {
  color: var(--swatches-success-default);
}

.toast.toast-success .btn {
  color: var(--swatches-on-success);
  background-color: var(--swatches-success-default);
  border-color: var(--swatches-success-default);
}

.toast.toast-success .custom-link {
  color: var(--swatches-success-default);
}

.toast.toast-warning {
  background-color: var(--swatches-warning-subtle);
  border-color: var(--swatches-border-warning-focus);
}

.toast.toast-warning .title {
  color: var(--swatches-warning-active);
}

.toast.toast-warning > i {
  background-color: var(--swatches-warning-default);
}

.toast.toast-warning > svg.icon {
  color: var(--swatches-warning-default);
}

.toast.toast-warning .btn {
  color: var(--swatches-on-warning);
  background-color: var(--swatches-warning-default);
  border-color: var(--swatches-warning-default);
}

.toast.toast-warning .custom-link {
  color: var(--swatches-warning-default);
}

.toast.toast-error {
  background-color: var(--swatches-error-subtle);
  border-color: var(--swatches-border-error-focus);
}

.toast.toast-error .title {
  color: var(--swatches-error-active);
}

.toast.toast-error > i {
  background-color: var(--swatches-error-default);
}

.toast.toast-error > svg.icon {
  color: var(--swatches-error-default);
}

.toast.toast-error .btn {
  color: var(--swatches-on-error);
  background-color: var(--swatches-error-default);
  border-color: var(--swatches-error-default);
}

.toast.toast-error .custom-link {
  color: var(--swatches-error-default);
}

.toast.toast-error .toast-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.list {
  font-family: var(--font-body);
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 32px 24px;
  align-items: flex-start;
  gap: 8px;
  color: var(--swatches-on-surface-base);
}

.list--hover:hover {
  background-color: var(--swatches-base-hover);
}

.list.border {
  border-bottom: 1px solid var(--swatches-surface-alt);
}

.list-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.list-center {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.list-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.list .list-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list.small .list-left .form-check {
  margin: 0;
}

.list.small .list-left .form-check input {
  width: 14px;
  height: 14px;
}

.list.small .list-left .form-check input::after {
  width: 11px;
  height: 11px;
}

.list.small .list-left i.icon:not(.btn i.icon, .badge i.icon),
.list.small .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  width: 24px;
  height: 24px;
}

.list.small .list-left i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-base);
}

.list.small .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-base);
}

.list.small .list-left .avatar {
  width: 24px;
  height: 24px;
}

.list.small .list-center .title {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}

.list.small .list-center .subtitle,
.list.small .list-center .description {
  font-size: 12px;
  margin: 0;
}

.list.small .list-center .badge {
  min-width: 32px;
  max-height: 32px;
  padding: 8px 10px;
  gap: 6px;
  font-size: 14px;
}

.list.small .list-center .badge i.icon,
.list.small .list-center .badge svg.icon {
  width: 11.67px;
  height: 11.67px;
}

.list.small .list-center .text,
.list.small .list-center .number {
  font-size: 14px;
  margin: 0;
}

.list.small .list-center .number {
  text-align: right;
}

.list.small .list-center .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.list.small .list-center .btn i.icon,
.list.small .list-center .btn svg.icon {
  width: 12px;
  height: 12px;
}

.list.small .list-center .form-control {
  height: 32px;
  padding: "0 8px";
  font-size: 14px;
}

.list.small .list-center .input-group-text {
  font-size: 14px;
}

.list.small .list-center .list-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.list.small .list-center .list-header .list-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list.small .list-center .list-header .list-right-actions .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.list.small .list-center .list-header .list-right-actions .form-toggle {
  margin: 0;
}

.list.small .list-center .list-header .list-right-actions .form-toggle .input {
  width: 30px;
  height: 16px;
}

.list.small .list-center .list-header .list-right-actions .form-toggle .input::before {
  width: 12px;
  height: 12px;
}

.list.small .list-center .list-header .list-right-actions .form-toggle .input:checked::before {
  left: auto;
  right: 2px;
}

.list.medium .list-left .form-check {
  margin: 0;
}

.list.medium .list-left .form-check input {
  width: 16px;
  height: 16px;
}

.list.medium .list-left .form-check input::after {
  width: 14px;
  height: 14px;
}

.list.medium .list-left i.icon:not(.btn i.icon, .badge i.icon),
.list.medium .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  width: 32px;
  height: 32px;
}

.list.medium .list-left i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-base);
}

.list.medium .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-base);
}

.list.medium .list-left .avatar {
  width: 32px;
  height: 32px;
}

.list.medium .list-center .title {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.list.medium .list-center .subtitle,
.list.medium .list-center .description {
  font-size: 14px;
  margin: 0;
}

.list.medium .list-center .badge {
  min-width: 40px;
  max-height: 40px;
  padding: 8px 13px;
  gap: 8px;
  font-size: 16px;
}

.list.medium .list-center .badge i.icon,
.list.medium .list-center .badge svg.icon {
  width: 16.67px;
  height: 16.67px;
}

.list.medium .list-center .text,
.list.medium .list-center .number {
  font-size: 16px;
  margin: 0;
}

.list.medium .list-center .number {
  text-align: right;
}

.list.medium .list-center .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.list.medium .list-center .btn i.icon,
.list.medium .list-center .btn svg.icon {
  width: 17px;
  height: 17px;
}

.list.medium .list-center .form-control {
  height: 40px;
  padding: "0 10px";
  font-size: 16px;
}

.list.medium .list-center .input-group-text {
  font-size: 16px;
}

.list.medium .list-center .list-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.list.medium .list-center .list-header .list-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list.medium .list-center .list-header .list-right-actions .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.list.medium .list-center .list-header .list-right-actions .form-toggle {
  margin: 0;
}

.list.medium .list-center .list-header .list-right-actions .form-toggle .input {
  width: 34px;
  height: 20px;
}

.list.medium .list-center .list-header .list-right-actions .form-toggle .input::before {
  width: 16px;
  height: 16px;
}

.list.medium .list-center .list-header .list-right-actions .form-toggle .input:checked::before {
  left: auto;
  right: 2px;
}

.list.large .list-left .form-check {
  margin: 0;
}

.list.large .list-left .form-check input {
  width: 18px;
  height: 18px;
}

.list.large .list-left .form-check input::after {
  width: 16px;
  height: 16px;
}

.list.large .list-left i.icon:not(.btn i.icon, .badge i.icon),
.list.large .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  width: 40px;
  height: 40px;
}

.list.large .list-left i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-base);
}

.list.large .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-base);
}

.list.large .list-left .avatar {
  width: 40px;
  height: 40px;
}

.list.large .list-center .title {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

.list.large .list-center .subtitle,
.list.large .list-center .description {
  font-size: 16px;
  margin: 0;
}

.list.large .list-center .badge {
  min-width: 48px;
  max-height: 48px;
  padding: 8px 16px;
  gap: 10px;
  font-size: 18px;
}

.list.large .list-center .badge i.icon,
.list.large .list-center .badge svg.icon {
  width: 20px;
  height: 20px;
}

.list.large .list-center .text,
.list.large .list-center .number {
  font-size: 18px;
  margin: 0;
}

.list.large .list-center .number {
  text-align: right;
}

.list.large .list-center .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.list.large .list-center .btn i.icon,
.list.large .list-center .btn svg.icon {
  width: 20px;
  height: 20px;
}

.list.large .list-center .form-control {
  height: 48px;
  padding: "0 12px";
  font-size: 18px;
}

.list.large .list-center .input-group-text {
  font-size: 18px;
  height: 46.5px;
}

.list.large .list-center .list-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.list.large .list-center .list-header .list-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list.large .list-center .list-header .list-right-actions .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.list.large .list-center .list-header .list-right-actions .form-toggle {
  margin: 0;
}

.list.large .list-center .list-header .list-right-actions .form-toggle .input {
  width: 46px;
  height: 24px;
}

.list.large .list-center .list-header .list-right-actions .form-toggle .input::before {
  width: 20px;
  height: 20px;
}

.list.large .list-center .list-header .list-right-actions .form-toggle .input:checked::before {
  left: auto;
  right: 2px;
}

.code {
  font-family: var(--font-code);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  margin-inline-end: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
.display-large,
.display-medium,
.display-small {
  font-family: var(--font-title);
  margin: 0;
}

h1.light,
h2.light,
h3.light,
h4.light,
h5.light,
h6.light,
p.light,
.display-large.light,
.display-medium.light,
.display-small.light {
  font-weight: 300;
}

h1.regular,
h2.regular,
h3.regular,
h4.regular,
h5.regular,
h6.regular,
p.regular,
.display-large.regular,
.display-medium.regular,
.display-small.regular {
  font-weight: 400;
}

h1.medium,
h2.medium,
h3.medium,
h4.medium,
h5.medium,
h6.medium,
p.medium,
.display-large.medium,
.display-medium.medium,
.display-small.medium {
  font-weight: 500;
}

h1.semibold,
h2.semibold,
h3.semibold,
h4.semibold,
h5.semibold,
h6.semibold,
p.semibold,
.display-large.semibold,
.display-medium.semibold,
.display-small.semibold {
  font-weight: 600;
}

h1.bold,
h2.bold,
h3.bold,
h4.bold,
h5.bold,
h6.bold,
p.bold,
.display-large.bold,
.display-medium.bold,
.display-small.bold {
  font-weight: 700;
}

h1.extrabold,
h2.extrabold,
h3.extrabold,
h4.extrabold,
h5.extrabold,
h6.extrabold,
p.extrabold,
.display-large.extrabold,
.display-medium.extrabold,
.display-small.extrabold {
  font-weight: 800;
}

h1 {
  font-size: 60px;
}

h2 {
  font-size: 48px;
}

h3 {
  font-size: 40px;
}

h4 {
  font-size: 32px;
}

h5 {
  font-size: 24px;
}

h6 {
  font-size: 20px;
}

.display-large {
  font-size: 120px;
}

.display-medium {
  font-size: 96px;
}

.display-small {
  font-size: 72px;
}

.paragraph {
  font-family: var(--font-body);
  line-height: 130%;
}

.paragraph-xxsmall {
  font-size: 10px;
}

.paragraph-xsmall {
  font-size: 12px;
}

.paragraph-small {
  font-size: 14px;
}

.paragraph-medium {
  font-size: 16px;
}

.paragraph-large {
  font-size: 18px;
}

.paragraph-xlarge {
  font-size: 22px;
}

.paragraph.italic {
  font-style: italic;
}

.paragraph.light {
  font-weight: 300;
}

.paragraph.regular {
  font-weight: 400;
}

.paragraph.medium {
  font-weight: 500;
}

.paragraph.semibold {
  font-weight: 600;
}

.paragraph.bold {
  font-weight: 700;
}

.paragraph.extrabold {
  font-weight: 800;
}

@media (min-width: 768px) and (max-width: 1023px) {
  h1 {
    font-size: 48px;
  }
  h2 {
    font-size: 40px;
  }
  h3 {
    font-size: 32px;
  }
  h4 {
    font-size: 28px;
  }
  h5 {
    font-size: 20px;
  }
  h6 {
    font-size: 18px;
  }
  .display-large {
    font-size: 96px;
  }
  .display-medium {
    font-size: 72px;
  }
  .display-small {
    font-size: 60px;
  }
  .paragraph-xxsmall {
    font-size: 10px;
  }
  .paragraph-xsmall {
    font-size: 10px;
  }
  .paragraph-small {
    font-size: 12px;
  }
  .paragraph-medium {
    font-size: 14px;
  }
  .paragraph-large {
    font-size: 16px;
  }
  .paragraph-xlarge {
    font-size: 20px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 32px;
  }
  h3 {
    font-size: 28px;
  }
  h4 {
    font-size: 24px;
  }
  h5 {
    font-size: 18px;
  }
  h6 {
    font-size: 16px;
  }
  .display-large {
    font-size: 72px;
  }
  .display-medium {
    font-size: 60px;
  }
  .display-small {
    font-size: 48px;
  }
  .paragraph-xxsmall {
    font-size: 10px;
  }
  .paragraph-xsmall {
    font-size: 10px;
  }
  .paragraph-small {
    font-size: 12px;
  }
  .paragraph-medium {
    font-size: 14px;
  }
  .paragraph-large {
    font-size: 16px;
  }
  .paragraph-xlarge {
    font-size: 20px;
  }
}

.breadcrumbs-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 32px 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  color: var(--swatches-on-base);
  width: 100%;
}

.breadcrumb .separator {
  display: flex;
  align-items: center;
  margin: 0 2px;
  width: 16px;
  height: 16px;
}

.breadcrumb .separator:is(i) {
  background-color: var(--swatches-on-surface-alt-invert);
}

.breadcrumb .separator svg {
  color: var(--swatches-on-surface-alt-invert);
}

.breadcrumb.breadcrumb-xsmall {
  gap: 16px;
  font-size: 12px;
}

.breadcrumb.breadcrumb-xsmall .custom-link {
  font-size: 12px;
  gap: 16px;
}

.breadcrumb.breadcrumb-xsmall .custom-link i.icon,
.breadcrumb.breadcrumb-xsmall .custom-link svg.icon {
  width: 8px;
  height: 8px;
}

.breadcrumb.breadcrumb-small {
  gap: 16px;
  font-size: 14px;
}

.breadcrumb.breadcrumb-small .custom-link {
  font-size: 14px;
  gap: 16px;
}

.breadcrumb.breadcrumb-small .custom-link i.icon,
.breadcrumb.breadcrumb-small .custom-link svg.icon {
  width: 12px;
  height: 12px;
}

.breadcrumb.breadcrumb-medium {
  gap: 16px;
  font-size: 16px;
}

.breadcrumb.breadcrumb-medium .custom-link {
  font-size: 16px;
  gap: 16px;
}

.breadcrumb.breadcrumb-medium .custom-link i.icon,
.breadcrumb.breadcrumb-medium .custom-link svg.icon {
  width: 16px;
  height: 16px;
}

.breadcrumb.breadcrumb-large {
  gap: 16px;
  font-size: 18px;
}

.breadcrumb.breadcrumb-large .custom-link {
  font-size: 18px;
  gap: 16px;
}

.breadcrumb.breadcrumb-large .custom-link i.icon,
.breadcrumb.breadcrumb-large .custom-link svg.icon {
  width: 22px;
  height: 22px;
}

.breadcrumb.invert {
  color: var(--swatches-on-surface-invert);
}

.breadcrumb.invert .separator:is(i) {
  background-color: var(--swatches-on-surface-invert);
}

.breadcrumb.invert .separator svg {
  color: var(--swatches-on-surface-invert);
}

.breadcrumb.invert .custom-link {
  color: var(--swatches-on-surface-invert);
}

.breadcrumb.invert .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.breadcrumb.invert .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.shortcut-card, .shortcut-default, .shortcut-cta, .shortcut-primary {
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-width: 156px;
  font-family: var(--font-body);
}

@media (min-width: 360px) and (max-width: 767px) {
  .shortcut-card, .shortcut-default, .shortcut-cta, .shortcut-primary {
    padding: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .shortcut-card, .shortcut-default, .shortcut-cta, .shortcut-primary {
    padding: 20px;
  }
}

.shortcut-card .shortcut-header, .shortcut-default .shortcut-header, .shortcut-cta .shortcut-header, .shortcut-primary .shortcut-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .shortcut-card .shortcut-header, .shortcut-default .shortcut-header, .shortcut-cta .shortcut-header, .shortcut-primary .shortcut-header {
    margin-bottom: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .shortcut-card .shortcut-header, .shortcut-default .shortcut-header, .shortcut-cta .shortcut-header, .shortcut-primary .shortcut-header {
    margin-bottom: 12px;
  }
}

.shortcut-card .shortcut-header .shortcut-content, .shortcut-default .shortcut-header .shortcut-content, .shortcut-cta .shortcut-header .shortcut-content, .shortcut-primary .shortcut-header .shortcut-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .shortcut-card .shortcut-header .shortcut-content, .shortcut-default .shortcut-header .shortcut-content, .shortcut-cta .shortcut-header .shortcut-content, .shortcut-primary .shortcut-header .shortcut-content {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .shortcut-card .shortcut-header .shortcut-content, .shortcut-default .shortcut-header .shortcut-content, .shortcut-cta .shortcut-header .shortcut-content, .shortcut-primary .shortcut-header .shortcut-content {
    gap: 8px;
  }
}

.shortcut-card .shortcut-header .shortcut-content .shortcut-icon, .shortcut-default .shortcut-header .shortcut-content .shortcut-icon, .shortcut-cta .shortcut-header .shortcut-content .shortcut-icon, .shortcut-primary .shortcut-header .shortcut-content .shortcut-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
}

.shortcut-card .shortcut-header .shortcut-content .shortcut-number, .shortcut-default .shortcut-header .shortcut-content .shortcut-number, .shortcut-cta .shortcut-header .shortcut-content .shortcut-number, .shortcut-primary .shortcut-header .shortcut-content .shortcut-number {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 800;
}

@media (min-width: 360px) and (max-width: 767px) {
  .shortcut-card .shortcut-header .shortcut-content .shortcut-number, .shortcut-default .shortcut-header .shortcut-content .shortcut-number, .shortcut-cta .shortcut-header .shortcut-content .shortcut-number, .shortcut-primary .shortcut-header .shortcut-content .shortcut-number {
    font-size: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .shortcut-card .shortcut-header .shortcut-content .shortcut-number, .shortcut-default .shortcut-header .shortcut-content .shortcut-number, .shortcut-cta .shortcut-header .shortcut-content .shortcut-number, .shortcut-primary .shortcut-header .shortcut-content .shortcut-number {
    font-size: 20px;
  }
}

.shortcut-card .shortcut-header .shortcut-right, .shortcut-default .shortcut-header .shortcut-right, .shortcut-cta .shortcut-header .shortcut-right, .shortcut-primary .shortcut-header .shortcut-right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 8px;
  bottom: 16px;
  left: 16px;
}

.shortcut-card .shortcut-header .shortcut-right .icon, .shortcut-default .shortcut-header .shortcut-right .icon, .shortcut-cta .shortcut-header .shortcut-right .icon, .shortcut-primary .shortcut-header .shortcut-right .icon {
  width: 32px;
  height: 32px;
}

.shortcut-card .shortcut-center, .shortcut-default .shortcut-center, .shortcut-cta .shortcut-center, .shortcut-primary .shortcut-center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.shortcut-card .shortcut-center .box, .shortcut-default .shortcut-center .box, .shortcut-cta .shortcut-center .box, .shortcut-primary .shortcut-center .box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  height: auto;
  padding: 15px 0;
}

.shortcut-card .shortcut-center .shortcut-text, .shortcut-default .shortcut-center .shortcut-text, .shortcut-cta .shortcut-center .shortcut-text, .shortcut-primary .shortcut-center .shortcut-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.shortcut-card .shortcut-center .shortcut-text .title, .shortcut-default .shortcut-center .shortcut-text .title, .shortcut-cta .shortcut-center .shortcut-text .title, .shortcut-primary .shortcut-center .shortcut-text .title {
  font-size: 18px;
  font-weight: 700;
  line-height: 130%;
  font-style: normal;
  margin: 0;
  color: inherit;
}

@media (min-width: 360px) and (max-width: 767px) {
  .shortcut-card .shortcut-center .shortcut-text .title, .shortcut-default .shortcut-center .shortcut-text .title, .shortcut-cta .shortcut-center .shortcut-text .title, .shortcut-primary .shortcut-center .shortcut-text .title {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .shortcut-card .shortcut-center .shortcut-text .title, .shortcut-default .shortcut-center .shortcut-text .title, .shortcut-cta .shortcut-center .shortcut-text .title, .shortcut-primary .shortcut-center .shortcut-text .title {
    font-size: 16px;
  }
}

.shortcut-card .shortcut-center .shortcut-text .subtitle, .shortcut-default .shortcut-center .shortcut-text .subtitle, .shortcut-cta .shortcut-center .shortcut-text .subtitle, .shortcut-primary .shortcut-center .shortcut-text .subtitle {
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  color: inherit;
}

@media (min-width: 360px) and (max-width: 767px) {
  .shortcut-card .shortcut-center .shortcut-text .subtitle, .shortcut-default .shortcut-center .shortcut-text .subtitle, .shortcut-cta .shortcut-center .shortcut-text .subtitle, .shortcut-primary .shortcut-center .shortcut-text .subtitle {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .shortcut-card .shortcut-center .shortcut-text .subtitle, .shortcut-default .shortcut-center .shortcut-text .subtitle, .shortcut-cta .shortcut-center .shortcut-text .subtitle, .shortcut-primary .shortcut-center .shortcut-text .subtitle {
    font-size: 12px;
  }
}

.shortcut-primary {
  border: 1px solid var(--swatches-border-primary);
  background: var(--swatches-primary-default);
}

.shortcut-primary i.shortcut-icon {
  background-color: var(--swatches-on-surface-invert);
}

.shortcut-primary svg.shortcut-icon {
  color: var(--swatches-on-surface-invert);
}

.shortcut-primary .shortcut-number,
.shortcut-primary .shortcut-center .shortcut-text .title,
.shortcut-primary .shortcut-center .shortcut-text .subtitle {
  color: var(--swatches-on-surface-invert);
}

.shortcut-primary:hover {
  background-color: var(--swatches-primary-hover);
}

.shortcut-cta {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-cta-default);
}

.shortcut-cta i.shortcut-icon {
  background-color: var(--swatches-on-surface-invert);
}

.shortcut-cta svg.shortcut-icon {
  color: var(--swatches-on-surface-invert);
}

.shortcut-cta .shortcut-number,
.shortcut-cta .shortcut-center .shortcut-text .title,
.shortcut-cta .shortcut-center .shortcut-text .subtitle {
  color: var(--swatches-on-surface-invert);
}

.shortcut-cta:hover {
  background-color: var(--swatches-cta-hover);
}

.shortcut-default {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.shortcut-default i.shortcut-icon {
  background-color: var(--swatches-on-surface-primary);
}

.shortcut-default svg.shortcut-icon {
  color: var(--swatches-on-surface-primary);
}

.shortcut-default .shortcut-number,
.shortcut-default .shortcut-center .shortcut-text .title,
.shortcut-default .shortcut-center .shortcut-text .subtitle {
  color: var(--swatches-on-surface-base);
}

.shortcut-default:hover {
  background-color: var(--swatches-base-hover);
}

.kpi-card, .kpi-default, .kpi-cta, .kpi-primary {
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-width: 156px;
  font-family: var(--font-body);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .kpi-card, .kpi-default, .kpi-cta, .kpi-primary {
    padding: 20px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .kpi-card, .kpi-default, .kpi-cta, .kpi-primary {
    padding: 16px;
  }
}

.kpi-card .kpi-header, .kpi-default .kpi-header, .kpi-cta .kpi-header, .kpi-primary .kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.kpi-card .kpi-content, .kpi-default .kpi-content, .kpi-cta .kpi-content, .kpi-primary .kpi-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .kpi-card .kpi-content, .kpi-default .kpi-content, .kpi-cta .kpi-content, .kpi-primary .kpi-content {
    gap: 8px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .kpi-card .kpi-content, .kpi-default .kpi-content, .kpi-cta .kpi-content, .kpi-primary .kpi-content {
    gap: 8px;
  }
}

.kpi-card .kpi-content .kpi-icon, .kpi-default .kpi-content .kpi-icon, .kpi-cta .kpi-content .kpi-icon, .kpi-primary .kpi-content .kpi-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

.kpi-card .kpi-content .kpi-number, .kpi-default .kpi-content .kpi-number, .kpi-cta .kpi-content .kpi-number, .kpi-primary .kpi-content .kpi-number {
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 800;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .kpi-card .kpi-content .kpi-number, .kpi-default .kpi-content .kpi-number, .kpi-cta .kpi-content .kpi-number, .kpi-primary .kpi-content .kpi-number {
    font-size: 28px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .kpi-card .kpi-content .kpi-number, .kpi-default .kpi-content .kpi-number, .kpi-cta .kpi-content .kpi-number, .kpi-primary .kpi-content .kpi-number {
    font-size: 24px;
  }
}

.kpi-card .kpi-right, .kpi-default .kpi-right, .kpi-cta .kpi-right, .kpi-primary .kpi-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .kpi-card .kpi-right, .kpi-default .kpi-right, .kpi-cta .kpi-right, .kpi-primary .kpi-right {
    top: 20px;
    right: 20px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .kpi-card .kpi-right, .kpi-default .kpi-right, .kpi-cta .kpi-right, .kpi-primary .kpi-right {
    top: 16px;
    right: 16px;
  }
}

.kpi-card .kpi-right .icon, .kpi-default .kpi-right .icon, .kpi-cta .kpi-right .icon, .kpi-primary .kpi-right .icon {
  width: 40px;
  height: 40px;
}

.kpi-card .kpi-center, .kpi-default .kpi-center, .kpi-cta .kpi-center, .kpi-primary .kpi-center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.kpi-card .kpi-center .kpi-image, .kpi-default .kpi-center .kpi-image, .kpi-cta .kpi-center .kpi-image, .kpi-primary .kpi-center .kpi-image {
  width: 300px;
  height: 119px;
  padding-bottom: 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .kpi-card .kpi-center .kpi-image, .kpi-default .kpi-center .kpi-image, .kpi-cta .kpi-center .kpi-image, .kpi-primary .kpi-center .kpi-image {
    padding-bottom: 20px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .kpi-card .kpi-center .kpi-image, .kpi-default .kpi-center .kpi-image, .kpi-cta .kpi-center .kpi-image, .kpi-primary .kpi-center .kpi-image {
    padding-bottom: 16px;
  }
}

.kpi-card .kpi-center .kpi-image img, .kpi-default .kpi-center .kpi-image img, .kpi-cta .kpi-center .kpi-image img, .kpi-primary .kpi-center .kpi-image img {
  max-width: 100%;
  height: auto;
}

.kpi-primary {
  border: 1px solid var(--swatches-border-primary);
  background: var(--swatches-primary-default);
}

.kpi-primary i.kpi-icon {
  background-color: var(--swatches-on-surface-invert);
}

.kpi-primary svg.kpi-icon {
  color: var(--swatches-on-surface-invert);
}

.kpi-primary .kpi-number,
.kpi-primary .kpi-title .title,
.kpi-primary .kpi-title .subtitle {
  color: var(--swatches-on-surface-invert);
}

.kpi-primary:hover {
  background-color: var(--swatches-primary-hover);
}

.kpi-cta {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-cta-default);
}

.kpi-cta i.kpi-icon {
  background-color: var(--swatches-on-surface-invert);
}

.kpi-cta svg.kpi-icon {
  color: var(--swatches-on-surface-invert);
}

.kpi-cta .kpi-number,
.kpi-cta .kpi-title .title,
.kpi-cta .kpi-title .subtitle {
  color: var(--swatches-on-surface-invert);
}

.kpi-cta:hover {
  background-color: var(--swatches-cta-hover);
}

.kpi-title {
  margin-bottom: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .kpi-title {
    margin-bottom: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .kpi-title {
    margin-bottom: 8px;
  }
}

.kpi-title .title {
  font-size: 18px;
  font-weight: 700;
  line-height: 130%;
  font-style: normal;
  margin-bottom: 0;
  color: inherit;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .kpi-title .title {
    font-size: 16px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .kpi-title .title {
    font-size: 16px;
  }
}

.kpi-title .subtitle {
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  margin-top: 12px;
  margin-bottom: 0;
  color: inherit;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .kpi-title .subtitle {
    font-size: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .kpi-title .subtitle {
    font-size: 12px;
  }
}

.kpi-default {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.kpi-default i.kpi-icon {
  background-color: var(--swatches-on-surface-primary);
}

.kpi-default svg.kpi-icon {
  color: var(--swatches-on-surface-primary);
}

.kpi-default .kpi-number,
.kpi-default .kpi-title .title,
.kpi-default .kpi-title .subtitle {
  color: var(--swatches-on-surface-base);
}

.kpi-default:hover {
  background-color: var(--swatches-base-hover);
}

.stepper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  overflow: visible;
}

.stepper .number-step {
  margin-inline: 11px;
  margin-block: 6px;
  font-size: 16px;
  font-weight: bold;
  color: var(--swatches-on-base);
}

.stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  flex: 1;
  font-family: var(--font-body);
}

.stepper .step .step-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  color: var(--swatches-on-surface-neutral);
}

.stepper .step .step-foot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.stepper .step .step-foot .step-icon {
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 50%;
  border: 1px solid var(--swatches-on-surface-neutral);
  box-sizing: border-box;
  background: transparent;
}

.stepper .step .step-foot .step-icon i.icon {
  background-color: var(--swatches-on-base);
}

.stepper .step .step-foot .step-icon svg.icon {
  color: var(--swatches-on-base);
}

.stepper .step .step-foot .step-connector,
.stepper .step .step-foot .v-connector {
  position: absolute;
  background: var(--swatches-on-surface-neutral);
  pointer-events: none;
}

.stepper .step .step-foot .step-connector {
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
}

.stepper .step .step-foot .step-connector.right {
  left: calc(50% + 24px);
  right: -2.5px;
}

.stepper .step .step-foot .step-connector.left {
  right: calc(50% + 24px);
  left: -2.5px;
}

.stepper .step.muted .step-label,
.stepper .step.muted .step-desc {
  color: var(--swatches-on-base-alt);
}

.stepper .step.muted .step-foot .step-icon {
  border-color: var(--swatches-on-base-alt);
}

.stepper .step.muted .step-foot .step-icon i.icon {
  background-color: var(--swatches-on-base-alt);
}

.stepper .step.muted .step-foot .step-icon svg.icon {
  color: var(--swatches-on-base-alt);
}

.stepper .step.muted .step-foot .step-connector,
.stepper .step.muted .step-foot .v-connector {
  background: var(--swatches-on-base-alt);
}

.stepper .step.done .step-foot .step-icon i.icon {
  background-color: var(--swatches-success-default);
}

.stepper .step.done .step-foot .step-icon svg.icon {
  color: var(--swatches-success-default);
}

.stepper .step.error .step-label,
.stepper .step.error .step-desc {
  color: var(--swatches-on-surface-error);
}

.stepper .step.error .step-foot .step-icon {
  border-color: var(--swatches-on-surface-error);
}

.stepper .step.error .step-foot .step-icon i.icon {
  background-color: var(--swatches-on-surface-error);
}

.stepper .step.error .step-foot .step-icon svg.icon {
  color: var(--swatches-on-surface-error);
}

.stepper .step.error .step-foot .step-connector,
.stepper .step.error .step-foot .v-connector {
  background: var(--swatches-on-surface-error);
}

.stepper .step.clickable {
  cursor: pointer;
  user-select: none;
}

.stepper .step.clickable .step-header,
.stepper .step.clickable .step-foot,
.stepper .step.clickable .step-icon,
.stepper .step.clickable .number-step {
  cursor: pointer;
  user-select: none;
}

.stepper .step.clickable:hover .step-foot .step-icon {
  opacity: 0.8;
}

.stepper .step .step-label,
.stepper .step .step-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

.stepper.vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.stepper.vertical .step {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  flex: none;
}

.stepper.vertical .step .step-header {
  align-items: center;
  text-align: center;
}

.stepper.vertical .step .step-header .step-label,
.stepper.vertical .step .step-header .step-desc {
  margin-right: auto;
}

.stepper.vertical .step .step-header {
  gap: 8px;
}

.stepper.vertical .step .step-foot .v-connector {
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
}

.stepper.vertical .step .step-foot .v-connector.top {
  bottom: calc(50% + 24px);
  top: -16px;
}

.stepper.vertical .step .step-foot .v-connector.bottom {
  top: calc(50% + 24px);
  bottom: -16px;
}

.stepper.stepper-small .step {
  width: auto;
  min-width: 72px;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-small .step {
    font-size: 4px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-small .step {
    font-size: 4px;
  }
}

.stepper.stepper-small .step .step-label {
  font-size: 14px;
  font-weight: 800;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-small .step .step-label {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-small .step .step-label {
    font-size: 12px;
  }
}

.stepper.stepper-small .step .step-desc {
  font-size: 12px;
  font-weight: 500;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-small .step .step-desc {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-small .step .step-desc {
    font-size: 10px;
  }
}

.stepper.stepper-medium .step {
  min-width: 80px;
  width: auto;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-medium .step {
    font-size: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-medium .step {
    font-size: 8px;
  }
}

.stepper.stepper-medium .step .step-label {
  font-size: 16px;
  font-weight: 800;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-medium .step .step-label {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-medium .step .step-label {
    font-size: 14px;
  }
}

.stepper.stepper-medium .step .step-desc {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-medium .step .step-desc {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-medium .step .step-desc {
    font-size: 12px;
  }
}

.stepper.stepper-large .step {
  min-width: 88px;
  width: auto;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-large .step {
    font-size: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-large .step {
    font-size: 8px;
  }
}

.stepper.stepper-large .step .step-label {
  font-size: 18px;
  font-weight: 800;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-large .step .step-label {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-large .step .step-label {
    font-size: 16px;
  }
}

.stepper.stepper-large .step .step-desc {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-large .step .step-desc {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-large .step .step-desc {
    font-size: 14px;
  }
}

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

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

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

.tooltip {
  position: absolute;
  background-color: var(--swatches-base-default);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  max-width: 280px;
  width: max-content;
  font-family: var(--font-body);
}

.tooltip .tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.tooltip .tooltip-header .tooltip-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--swatches-on-surface-neutral);
  margin: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tooltip .tooltip-header .tooltip-title {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tooltip .tooltip-header .tooltip-title {
    font-size: 12px;
  }
}

.tooltip .tooltip-header .tooltip-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  margin-left: 12px;
  line-height: 1;
}

.tooltip .tooltip-header .tooltip-close i {
  background-color: var(--swatches-on-surface-neutral);
  width: 16px;
  height: 16px;
}

.tooltip .tooltip-header .tooltip-close svg {
  width: 16px;
  height: 16px;
  color: var(--swatches-on-surface-neutral);
}

.tooltip .tooltip-content p {
  font-size: 12px;
  color: var(--swatches-on-surface-neutral);
  font-weight: 400;
  margin: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tooltip .tooltip-content p {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tooltip .tooltip-content p {
    font-size: 10px;
  }
}

.tooltip .tooltip-footer {
  margin-top: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.tooltip .tooltip-footer .stage {
  height: 100%;
  width: auto;
  flex: 1 0 0;
  align-items: center;
  color: var(--swatches-on-surface-neutral-alt);
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 400;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tooltip .tooltip-footer .stage {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tooltip .tooltip-footer .stage {
    font-size: 10px;
  }
}

.tooltip .tooltip-footer .actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tooltip .tooltip-footer .actions {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tooltip .tooltip-footer .actions {
    gap: 8px;
  }
}

.tooltip::before, .tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.tooltip::before {
  z-index: -1;
}

.tooltip::after {
  z-index: 1;
}

.tooltip.tooltip-top {
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.tooltip-top::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom: none;
  filter: blur(1px);
}

.tooltip.tooltip-top::after {
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border-top-color: white;
  border-bottom: none;
}

.tooltip.tooltip-bottom {
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.tooltip-bottom::before {
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: rgba(0, 0, 0, 0.15);
  border-top: none;
  filter: blur(1px);
}

.tooltip.tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: white;
  border-top: none;
}

.tooltip.tooltip-left {
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.tooltip-left::before {
  left: calc(100% + 1px);
  top: 50%;
  transform: translateY(-50%);
  border-left-color: rgba(0, 0, 0, 0.15);
  border-right: none;
  filter: blur(1px);
}

.tooltip.tooltip-left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: white;
  border-right: none;
}

.tooltip.tooltip-right {
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.tooltip-right::before {
  right: calc(100% + 1px);
  top: 50%;
  transform: translateY(-50%);
  border-right-color: rgba(0, 0, 0, 0.15);
  border-left: none;
  filter: blur(1px);
}

.tooltip.tooltip-right::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: white;
  border-left: none;
}

.tooltip.tooltip-top-left {
  bottom: calc(100% + 12px);
  left: 0;
  transform: none;
}

.tooltip.tooltip-top-left::before {
  top: 100%;
  left: 24px;
  transform: none;
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom: none;
  filter: blur(1px);
}

.tooltip.tooltip-top-left::after {
  top: calc(100% - 1px);
  left: 24px;
  transform: none;
  border-top-color: white;
  border-bottom: none;
}

.tooltip.tooltip-bottom-left {
  top: calc(100% + 12px);
  left: 0;
  transform: none;
}

.tooltip.tooltip-bottom-left::before {
  top: -9px;
  left: 24px;
  transform: none;
  border-bottom-color: rgba(0, 0, 0, 0.15);
  border-top: none;
  filter: blur(1px);
}

.tooltip.tooltip-bottom-left::after {
  top: -8px;
  left: 24px;
  transform: none;
  border-bottom-color: white;
  border-top: none;
}

.tooltip.tooltip-top-right {
  bottom: calc(100% + 12px);
  right: 0;
  transform: none;
}

.tooltip.tooltip-top-right::before {
  top: 100%;
  right: 24px;
  left: auto;
  transform: none;
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom: none;
  filter: blur(1px);
}

.tooltip.tooltip-top-right::after {
  top: calc(100% - 1px);
  right: 24px;
  left: auto;
  transform: none;
  border-top-color: white;
  border-bottom: none;
}

.tooltip.tooltip-bottom-right {
  top: calc(100% + 12px);
  right: 0;
  transform: none;
}

.tooltip.tooltip-bottom-right::before {
  top: -9px;
  right: 24px;
  left: auto;
  transform: none;
  border-bottom-color: rgba(0, 0, 0, 0.15);
  border-top: none;
  filter: blur(1px);
}

.tooltip.tooltip-bottom-right::after {
  top: -8px;
  right: 24px;
  left: auto;
  transform: none;
  border-bottom-color: white;
  border-top: none;
}

.tooltip.tooltip-left-top, .tooltip.tooltip-right-top {
  top: 0;
  transform: none;
}

.tooltip.tooltip-left-top::before, .tooltip.tooltip-left-top::after, .tooltip.tooltip-right-top::before, .tooltip.tooltip-right-top::after {
  top: 24px;
  transform: none;
}

.tooltip.tooltip-left-bottom, .tooltip.tooltip-right-bottom {
  bottom: 0;
  top: auto;
  transform: none;
}

.tooltip.tooltip-left-bottom::before, .tooltip.tooltip-left-bottom::after, .tooltip.tooltip-right-bottom::before, .tooltip.tooltip-right-bottom::after {
  bottom: 24px;
  top: auto;
  transform: none;
}

.tooltip.tooltip-left-top {
  right: calc(100% + 16px);
}

.tooltip.tooltip-left-top::before {
  left: calc(100% + 1px);
  top: 24px;
  transform: none;
  border-left-color: rgba(0, 0, 0, 0.15);
  border-right: none;
  filter: blur(1px);
}

.tooltip.tooltip-left-top::after {
  left: 100%;
  top: 24px;
  transform: none;
  border-left-color: white;
  border-right: none;
}

.tooltip.tooltip-left-bottom {
  right: calc(100% + 16px);
}

.tooltip.tooltip-left-bottom::before {
  left: calc(100% + 1px);
  bottom: 24px;
  top: auto;
  transform: none;
  border-left-color: rgba(0, 0, 0, 0.15);
  border-right: none;
  filter: blur(1px);
}

.tooltip.tooltip-left-bottom::after {
  left: 100%;
  bottom: 24px;
  top: auto;
  transform: none;
  border-left-color: white;
  border-right: none;
}

.tooltip.tooltip-right-top {
  left: calc(100% + 16px);
}

.tooltip.tooltip-right-top::before {
  right: calc(100% + 1px);
  top: 24px;
  transform: none;
  border-right-color: rgba(0, 0, 0, 0.15);
  border-left: none;
  filter: blur(1px);
}

.tooltip.tooltip-right-top::after {
  right: 100%;
  top: 24px;
  transform: none;
  border-right-color: white;
  border-left: none;
}

.tooltip.tooltip-right-bottom {
  left: calc(100% + 16px);
}

.tooltip.tooltip-right-bottom::before {
  right: calc(100% + 1px);
  bottom: 24px;
  top: auto;
  transform: none;
  border-right-color: rgba(0, 0, 0, 0.15);
  border-left: none;
  filter: blur(1px);
}

.tooltip.tooltip-right-bottom::after {
  right: 100%;
  bottom: 24px;
  top: auto;
  transform: none;
  border-right-color: white;
  border-left: none;
}

.tooltip.caret-x-1::before, .tooltip.caret-x-1::after {
  left: 1%;
  transform: translateX(-50%);
}

.tooltip.caret-x-2::before, .tooltip.caret-x-2::after {
  left: 2%;
  transform: translateX(-50%);
}

.tooltip.caret-x-3::before, .tooltip.caret-x-3::after {
  left: 3%;
  transform: translateX(-50%);
}

.tooltip.caret-x-4::before, .tooltip.caret-x-4::after {
  left: 4%;
  transform: translateX(-50%);
}

.tooltip.caret-x-5::before, .tooltip.caret-x-5::after {
  left: 5%;
  transform: translateX(-50%);
}

.tooltip.caret-x-6::before, .tooltip.caret-x-6::after {
  left: 6%;
  transform: translateX(-50%);
}

.tooltip.caret-x-7::before, .tooltip.caret-x-7::after {
  left: 7%;
  transform: translateX(-50%);
}

.tooltip.caret-x-8::before, .tooltip.caret-x-8::after {
  left: 8%;
  transform: translateX(-50%);
}

.tooltip.caret-x-9::before, .tooltip.caret-x-9::after {
  left: 9%;
  transform: translateX(-50%);
}

.tooltip.caret-x-10::before, .tooltip.caret-x-10::after {
  left: 10%;
  transform: translateX(-50%);
}

.tooltip.caret-x-11::before, .tooltip.caret-x-11::after {
  left: 11%;
  transform: translateX(-50%);
}

.tooltip.caret-x-12::before, .tooltip.caret-x-12::after {
  left: 12%;
  transform: translateX(-50%);
}

.tooltip.caret-x-13::before, .tooltip.caret-x-13::after {
  left: 13%;
  transform: translateX(-50%);
}

.tooltip.caret-x-14::before, .tooltip.caret-x-14::after {
  left: 14%;
  transform: translateX(-50%);
}

.tooltip.caret-x-15::before, .tooltip.caret-x-15::after {
  left: 15%;
  transform: translateX(-50%);
}

.tooltip.caret-x-16::before, .tooltip.caret-x-16::after {
  left: 16%;
  transform: translateX(-50%);
}

.tooltip.caret-x-17::before, .tooltip.caret-x-17::after {
  left: 17%;
  transform: translateX(-50%);
}

.tooltip.caret-x-18::before, .tooltip.caret-x-18::after {
  left: 18%;
  transform: translateX(-50%);
}

.tooltip.caret-x-19::before, .tooltip.caret-x-19::after {
  left: 19%;
  transform: translateX(-50%);
}

.tooltip.caret-x-20::before, .tooltip.caret-x-20::after {
  left: 20%;
  transform: translateX(-50%);
}

.tooltip.caret-x-21::before, .tooltip.caret-x-21::after {
  left: 21%;
  transform: translateX(-50%);
}

.tooltip.caret-x-22::before, .tooltip.caret-x-22::after {
  left: 22%;
  transform: translateX(-50%);
}

.tooltip.caret-x-23::before, .tooltip.caret-x-23::after {
  left: 23%;
  transform: translateX(-50%);
}

.tooltip.caret-x-24::before, .tooltip.caret-x-24::after {
  left: 24%;
  transform: translateX(-50%);
}

.tooltip.caret-x-25::before, .tooltip.caret-x-25::after {
  left: 25%;
  transform: translateX(-50%);
}

.tooltip.caret-x-26::before, .tooltip.caret-x-26::after {
  left: 26%;
  transform: translateX(-50%);
}

.tooltip.caret-x-27::before, .tooltip.caret-x-27::after {
  left: 27%;
  transform: translateX(-50%);
}

.tooltip.caret-x-28::before, .tooltip.caret-x-28::after {
  left: 28%;
  transform: translateX(-50%);
}

.tooltip.caret-x-29::before, .tooltip.caret-x-29::after {
  left: 29%;
  transform: translateX(-50%);
}

.tooltip.caret-x-30::before, .tooltip.caret-x-30::after {
  left: 30%;
  transform: translateX(-50%);
}

.tooltip.caret-x-31::before, .tooltip.caret-x-31::after {
  left: 31%;
  transform: translateX(-50%);
}

.tooltip.caret-x-32::before, .tooltip.caret-x-32::after {
  left: 32%;
  transform: translateX(-50%);
}

.tooltip.caret-x-33::before, .tooltip.caret-x-33::after {
  left: 33%;
  transform: translateX(-50%);
}

.tooltip.caret-x-34::before, .tooltip.caret-x-34::after {
  left: 34%;
  transform: translateX(-50%);
}

.tooltip.caret-x-35::before, .tooltip.caret-x-35::after {
  left: 35%;
  transform: translateX(-50%);
}

.tooltip.caret-x-36::before, .tooltip.caret-x-36::after {
  left: 36%;
  transform: translateX(-50%);
}

.tooltip.caret-x-37::before, .tooltip.caret-x-37::after {
  left: 37%;
  transform: translateX(-50%);
}

.tooltip.caret-x-38::before, .tooltip.caret-x-38::after {
  left: 38%;
  transform: translateX(-50%);
}

.tooltip.caret-x-39::before, .tooltip.caret-x-39::after {
  left: 39%;
  transform: translateX(-50%);
}

.tooltip.caret-x-40::before, .tooltip.caret-x-40::after {
  left: 40%;
  transform: translateX(-50%);
}

.tooltip.caret-x-41::before, .tooltip.caret-x-41::after {
  left: 41%;
  transform: translateX(-50%);
}

.tooltip.caret-x-42::before, .tooltip.caret-x-42::after {
  left: 42%;
  transform: translateX(-50%);
}

.tooltip.caret-x-43::before, .tooltip.caret-x-43::after {
  left: 43%;
  transform: translateX(-50%);
}

.tooltip.caret-x-44::before, .tooltip.caret-x-44::after {
  left: 44%;
  transform: translateX(-50%);
}

.tooltip.caret-x-45::before, .tooltip.caret-x-45::after {
  left: 45%;
  transform: translateX(-50%);
}

.tooltip.caret-x-46::before, .tooltip.caret-x-46::after {
  left: 46%;
  transform: translateX(-50%);
}

.tooltip.caret-x-47::before, .tooltip.caret-x-47::after {
  left: 47%;
  transform: translateX(-50%);
}

.tooltip.caret-x-48::before, .tooltip.caret-x-48::after {
  left: 48%;
  transform: translateX(-50%);
}

.tooltip.caret-x-49::before, .tooltip.caret-x-49::after {
  left: 49%;
  transform: translateX(-50%);
}

.tooltip.caret-x-50::before, .tooltip.caret-x-50::after {
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.caret-x-51::before, .tooltip.caret-x-51::after {
  left: 51%;
  transform: translateX(-50%);
}

.tooltip.caret-x-52::before, .tooltip.caret-x-52::after {
  left: 52%;
  transform: translateX(-50%);
}

.tooltip.caret-x-53::before, .tooltip.caret-x-53::after {
  left: 53%;
  transform: translateX(-50%);
}

.tooltip.caret-x-54::before, .tooltip.caret-x-54::after {
  left: 54%;
  transform: translateX(-50%);
}

.tooltip.caret-x-55::before, .tooltip.caret-x-55::after {
  left: 55%;
  transform: translateX(-50%);
}

.tooltip.caret-x-56::before, .tooltip.caret-x-56::after {
  left: 56%;
  transform: translateX(-50%);
}

.tooltip.caret-x-57::before, .tooltip.caret-x-57::after {
  left: 57%;
  transform: translateX(-50%);
}

.tooltip.caret-x-58::before, .tooltip.caret-x-58::after {
  left: 58%;
  transform: translateX(-50%);
}

.tooltip.caret-x-59::before, .tooltip.caret-x-59::after {
  left: 59%;
  transform: translateX(-50%);
}

.tooltip.caret-x-60::before, .tooltip.caret-x-60::after {
  left: 60%;
  transform: translateX(-50%);
}

.tooltip.caret-x-61::before, .tooltip.caret-x-61::after {
  left: 61%;
  transform: translateX(-50%);
}

.tooltip.caret-x-62::before, .tooltip.caret-x-62::after {
  left: 62%;
  transform: translateX(-50%);
}

.tooltip.caret-x-63::before, .tooltip.caret-x-63::after {
  left: 63%;
  transform: translateX(-50%);
}

.tooltip.caret-x-64::before, .tooltip.caret-x-64::after {
  left: 64%;
  transform: translateX(-50%);
}

.tooltip.caret-x-65::before, .tooltip.caret-x-65::after {
  left: 65%;
  transform: translateX(-50%);
}

.tooltip.caret-x-66::before, .tooltip.caret-x-66::after {
  left: 66%;
  transform: translateX(-50%);
}

.tooltip.caret-x-67::before, .tooltip.caret-x-67::after {
  left: 67%;
  transform: translateX(-50%);
}

.tooltip.caret-x-68::before, .tooltip.caret-x-68::after {
  left: 68%;
  transform: translateX(-50%);
}

.tooltip.caret-x-69::before, .tooltip.caret-x-69::after {
  left: 69%;
  transform: translateX(-50%);
}

.tooltip.caret-x-70::before, .tooltip.caret-x-70::after {
  left: 70%;
  transform: translateX(-50%);
}

.tooltip.caret-x-71::before, .tooltip.caret-x-71::after {
  left: 71%;
  transform: translateX(-50%);
}

.tooltip.caret-x-72::before, .tooltip.caret-x-72::after {
  left: 72%;
  transform: translateX(-50%);
}

.tooltip.caret-x-73::before, .tooltip.caret-x-73::after {
  left: 73%;
  transform: translateX(-50%);
}

.tooltip.caret-x-74::before, .tooltip.caret-x-74::after {
  left: 74%;
  transform: translateX(-50%);
}

.tooltip.caret-x-75::before, .tooltip.caret-x-75::after {
  left: 75%;
  transform: translateX(-50%);
}

.tooltip.caret-x-76::before, .tooltip.caret-x-76::after {
  left: 76%;
  transform: translateX(-50%);
}

.tooltip.caret-x-77::before, .tooltip.caret-x-77::after {
  left: 77%;
  transform: translateX(-50%);
}

.tooltip.caret-x-78::before, .tooltip.caret-x-78::after {
  left: 78%;
  transform: translateX(-50%);
}

.tooltip.caret-x-79::before, .tooltip.caret-x-79::after {
  left: 79%;
  transform: translateX(-50%);
}

.tooltip.caret-x-80::before, .tooltip.caret-x-80::after {
  left: 80%;
  transform: translateX(-50%);
}

.tooltip.caret-x-81::before, .tooltip.caret-x-81::after {
  left: 81%;
  transform: translateX(-50%);
}

.tooltip.caret-x-82::before, .tooltip.caret-x-82::after {
  left: 82%;
  transform: translateX(-50%);
}

.tooltip.caret-x-83::before, .tooltip.caret-x-83::after {
  left: 83%;
  transform: translateX(-50%);
}

.tooltip.caret-x-84::before, .tooltip.caret-x-84::after {
  left: 84%;
  transform: translateX(-50%);
}

.tooltip.caret-x-85::before, .tooltip.caret-x-85::after {
  left: 85%;
  transform: translateX(-50%);
}

.tooltip.caret-x-86::before, .tooltip.caret-x-86::after {
  left: 86%;
  transform: translateX(-50%);
}

.tooltip.caret-x-87::before, .tooltip.caret-x-87::after {
  left: 87%;
  transform: translateX(-50%);
}

.tooltip.caret-x-88::before, .tooltip.caret-x-88::after {
  left: 88%;
  transform: translateX(-50%);
}

.tooltip.caret-x-89::before, .tooltip.caret-x-89::after {
  left: 89%;
  transform: translateX(-50%);
}

.tooltip.caret-x-90::before, .tooltip.caret-x-90::after {
  left: 90%;
  transform: translateX(-50%);
}

.tooltip.caret-x-91::before, .tooltip.caret-x-91::after {
  left: 91%;
  transform: translateX(-50%);
}

.tooltip.caret-x-92::before, .tooltip.caret-x-92::after {
  left: 92%;
  transform: translateX(-50%);
}

.tooltip.caret-x-93::before, .tooltip.caret-x-93::after {
  left: 93%;
  transform: translateX(-50%);
}

.tooltip.caret-x-94::before, .tooltip.caret-x-94::after {
  left: 94%;
  transform: translateX(-50%);
}

.tooltip.caret-x-95::before, .tooltip.caret-x-95::after {
  left: 95%;
  transform: translateX(-50%);
}

.tooltip.caret-x-96::before, .tooltip.caret-x-96::after {
  left: 96%;
  transform: translateX(-50%);
}

.tooltip.caret-x-97::before, .tooltip.caret-x-97::after {
  left: 97%;
  transform: translateX(-50%);
}

.tooltip.caret-x-98::before, .tooltip.caret-x-98::after {
  left: 98%;
  transform: translateX(-50%);
}

.tooltip.caret-x-99::before, .tooltip.caret-x-99::after {
  left: 99%;
  transform: translateX(-50%);
}

.tooltip.caret-x-100::before, .tooltip.caret-x-100::after {
  left: 100%;
  transform: translateX(-50%);
}

.tooltip.caret-y-1::before, .tooltip.caret-y-1::after {
  top: 1%;
  transform: translateY(-50%);
}

.tooltip.caret-y-2::before, .tooltip.caret-y-2::after {
  top: 2%;
  transform: translateY(-50%);
}

.tooltip.caret-y-3::before, .tooltip.caret-y-3::after {
  top: 3%;
  transform: translateY(-50%);
}

.tooltip.caret-y-4::before, .tooltip.caret-y-4::after {
  top: 4%;
  transform: translateY(-50%);
}

.tooltip.caret-y-5::before, .tooltip.caret-y-5::after {
  top: 5%;
  transform: translateY(-50%);
}

.tooltip.caret-y-6::before, .tooltip.caret-y-6::after {
  top: 6%;
  transform: translateY(-50%);
}

.tooltip.caret-y-7::before, .tooltip.caret-y-7::after {
  top: 7%;
  transform: translateY(-50%);
}

.tooltip.caret-y-8::before, .tooltip.caret-y-8::after {
  top: 8%;
  transform: translateY(-50%);
}

.tooltip.caret-y-9::before, .tooltip.caret-y-9::after {
  top: 9%;
  transform: translateY(-50%);
}

.tooltip.caret-y-10::before, .tooltip.caret-y-10::after {
  top: 10%;
  transform: translateY(-50%);
}

.tooltip.caret-y-11::before, .tooltip.caret-y-11::after {
  top: 11%;
  transform: translateY(-50%);
}

.tooltip.caret-y-12::before, .tooltip.caret-y-12::after {
  top: 12%;
  transform: translateY(-50%);
}

.tooltip.caret-y-13::before, .tooltip.caret-y-13::after {
  top: 13%;
  transform: translateY(-50%);
}

.tooltip.caret-y-14::before, .tooltip.caret-y-14::after {
  top: 14%;
  transform: translateY(-50%);
}

.tooltip.caret-y-15::before, .tooltip.caret-y-15::after {
  top: 15%;
  transform: translateY(-50%);
}

.tooltip.caret-y-16::before, .tooltip.caret-y-16::after {
  top: 16%;
  transform: translateY(-50%);
}

.tooltip.caret-y-17::before, .tooltip.caret-y-17::after {
  top: 17%;
  transform: translateY(-50%);
}

.tooltip.caret-y-18::before, .tooltip.caret-y-18::after {
  top: 18%;
  transform: translateY(-50%);
}

.tooltip.caret-y-19::before, .tooltip.caret-y-19::after {
  top: 19%;
  transform: translateY(-50%);
}

.tooltip.caret-y-20::before, .tooltip.caret-y-20::after {
  top: 20%;
  transform: translateY(-50%);
}

.tooltip.caret-y-21::before, .tooltip.caret-y-21::after {
  top: 21%;
  transform: translateY(-50%);
}

.tooltip.caret-y-22::before, .tooltip.caret-y-22::after {
  top: 22%;
  transform: translateY(-50%);
}

.tooltip.caret-y-23::before, .tooltip.caret-y-23::after {
  top: 23%;
  transform: translateY(-50%);
}

.tooltip.caret-y-24::before, .tooltip.caret-y-24::after {
  top: 24%;
  transform: translateY(-50%);
}

.tooltip.caret-y-25::before, .tooltip.caret-y-25::after {
  top: 25%;
  transform: translateY(-50%);
}

.tooltip.caret-y-26::before, .tooltip.caret-y-26::after {
  top: 26%;
  transform: translateY(-50%);
}

.tooltip.caret-y-27::before, .tooltip.caret-y-27::after {
  top: 27%;
  transform: translateY(-50%);
}

.tooltip.caret-y-28::before, .tooltip.caret-y-28::after {
  top: 28%;
  transform: translateY(-50%);
}

.tooltip.caret-y-29::before, .tooltip.caret-y-29::after {
  top: 29%;
  transform: translateY(-50%);
}

.tooltip.caret-y-30::before, .tooltip.caret-y-30::after {
  top: 30%;
  transform: translateY(-50%);
}

.tooltip.caret-y-31::before, .tooltip.caret-y-31::after {
  top: 31%;
  transform: translateY(-50%);
}

.tooltip.caret-y-32::before, .tooltip.caret-y-32::after {
  top: 32%;
  transform: translateY(-50%);
}

.tooltip.caret-y-33::before, .tooltip.caret-y-33::after {
  top: 33%;
  transform: translateY(-50%);
}

.tooltip.caret-y-34::before, .tooltip.caret-y-34::after {
  top: 34%;
  transform: translateY(-50%);
}

.tooltip.caret-y-35::before, .tooltip.caret-y-35::after {
  top: 35%;
  transform: translateY(-50%);
}

.tooltip.caret-y-36::before, .tooltip.caret-y-36::after {
  top: 36%;
  transform: translateY(-50%);
}

.tooltip.caret-y-37::before, .tooltip.caret-y-37::after {
  top: 37%;
  transform: translateY(-50%);
}

.tooltip.caret-y-38::before, .tooltip.caret-y-38::after {
  top: 38%;
  transform: translateY(-50%);
}

.tooltip.caret-y-39::before, .tooltip.caret-y-39::after {
  top: 39%;
  transform: translateY(-50%);
}

.tooltip.caret-y-40::before, .tooltip.caret-y-40::after {
  top: 40%;
  transform: translateY(-50%);
}

.tooltip.caret-y-41::before, .tooltip.caret-y-41::after {
  top: 41%;
  transform: translateY(-50%);
}

.tooltip.caret-y-42::before, .tooltip.caret-y-42::after {
  top: 42%;
  transform: translateY(-50%);
}

.tooltip.caret-y-43::before, .tooltip.caret-y-43::after {
  top: 43%;
  transform: translateY(-50%);
}

.tooltip.caret-y-44::before, .tooltip.caret-y-44::after {
  top: 44%;
  transform: translateY(-50%);
}

.tooltip.caret-y-45::before, .tooltip.caret-y-45::after {
  top: 45%;
  transform: translateY(-50%);
}

.tooltip.caret-y-46::before, .tooltip.caret-y-46::after {
  top: 46%;
  transform: translateY(-50%);
}

.tooltip.caret-y-47::before, .tooltip.caret-y-47::after {
  top: 47%;
  transform: translateY(-50%);
}

.tooltip.caret-y-48::before, .tooltip.caret-y-48::after {
  top: 48%;
  transform: translateY(-50%);
}

.tooltip.caret-y-49::before, .tooltip.caret-y-49::after {
  top: 49%;
  transform: translateY(-50%);
}

.tooltip.caret-y-50::before, .tooltip.caret-y-50::after {
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.caret-y-51::before, .tooltip.caret-y-51::after {
  top: 51%;
  transform: translateY(-50%);
}

.tooltip.caret-y-52::before, .tooltip.caret-y-52::after {
  top: 52%;
  transform: translateY(-50%);
}

.tooltip.caret-y-53::before, .tooltip.caret-y-53::after {
  top: 53%;
  transform: translateY(-50%);
}

.tooltip.caret-y-54::before, .tooltip.caret-y-54::after {
  top: 54%;
  transform: translateY(-50%);
}

.tooltip.caret-y-55::before, .tooltip.caret-y-55::after {
  top: 55%;
  transform: translateY(-50%);
}

.tooltip.caret-y-56::before, .tooltip.caret-y-56::after {
  top: 56%;
  transform: translateY(-50%);
}

.tooltip.caret-y-57::before, .tooltip.caret-y-57::after {
  top: 57%;
  transform: translateY(-50%);
}

.tooltip.caret-y-58::before, .tooltip.caret-y-58::after {
  top: 58%;
  transform: translateY(-50%);
}

.tooltip.caret-y-59::before, .tooltip.caret-y-59::after {
  top: 59%;
  transform: translateY(-50%);
}

.tooltip.caret-y-60::before, .tooltip.caret-y-60::after {
  top: 60%;
  transform: translateY(-50%);
}

.tooltip.caret-y-61::before, .tooltip.caret-y-61::after {
  top: 61%;
  transform: translateY(-50%);
}

.tooltip.caret-y-62::before, .tooltip.caret-y-62::after {
  top: 62%;
  transform: translateY(-50%);
}

.tooltip.caret-y-63::before, .tooltip.caret-y-63::after {
  top: 63%;
  transform: translateY(-50%);
}

.tooltip.caret-y-64::before, .tooltip.caret-y-64::after {
  top: 64%;
  transform: translateY(-50%);
}

.tooltip.caret-y-65::before, .tooltip.caret-y-65::after {
  top: 65%;
  transform: translateY(-50%);
}

.tooltip.caret-y-66::before, .tooltip.caret-y-66::after {
  top: 66%;
  transform: translateY(-50%);
}

.tooltip.caret-y-67::before, .tooltip.caret-y-67::after {
  top: 67%;
  transform: translateY(-50%);
}

.tooltip.caret-y-68::before, .tooltip.caret-y-68::after {
  top: 68%;
  transform: translateY(-50%);
}

.tooltip.caret-y-69::before, .tooltip.caret-y-69::after {
  top: 69%;
  transform: translateY(-50%);
}

.tooltip.caret-y-70::before, .tooltip.caret-y-70::after {
  top: 70%;
  transform: translateY(-50%);
}

.tooltip.caret-y-71::before, .tooltip.caret-y-71::after {
  top: 71%;
  transform: translateY(-50%);
}

.tooltip.caret-y-72::before, .tooltip.caret-y-72::after {
  top: 72%;
  transform: translateY(-50%);
}

.tooltip.caret-y-73::before, .tooltip.caret-y-73::after {
  top: 73%;
  transform: translateY(-50%);
}

.tooltip.caret-y-74::before, .tooltip.caret-y-74::after {
  top: 74%;
  transform: translateY(-50%);
}

.tooltip.caret-y-75::before, .tooltip.caret-y-75::after {
  top: 75%;
  transform: translateY(-50%);
}

.tooltip.caret-y-76::before, .tooltip.caret-y-76::after {
  top: 76%;
  transform: translateY(-50%);
}

.tooltip.caret-y-77::before, .tooltip.caret-y-77::after {
  top: 77%;
  transform: translateY(-50%);
}

.tooltip.caret-y-78::before, .tooltip.caret-y-78::after {
  top: 78%;
  transform: translateY(-50%);
}

.tooltip.caret-y-79::before, .tooltip.caret-y-79::after {
  top: 79%;
  transform: translateY(-50%);
}

.tooltip.caret-y-80::before, .tooltip.caret-y-80::after {
  top: 80%;
  transform: translateY(-50%);
}

.tooltip.caret-y-81::before, .tooltip.caret-y-81::after {
  top: 81%;
  transform: translateY(-50%);
}

.tooltip.caret-y-82::before, .tooltip.caret-y-82::after {
  top: 82%;
  transform: translateY(-50%);
}

.tooltip.caret-y-83::before, .tooltip.caret-y-83::after {
  top: 83%;
  transform: translateY(-50%);
}

.tooltip.caret-y-84::before, .tooltip.caret-y-84::after {
  top: 84%;
  transform: translateY(-50%);
}

.tooltip.caret-y-85::before, .tooltip.caret-y-85::after {
  top: 85%;
  transform: translateY(-50%);
}

.tooltip.caret-y-86::before, .tooltip.caret-y-86::after {
  top: 86%;
  transform: translateY(-50%);
}

.tooltip.caret-y-87::before, .tooltip.caret-y-87::after {
  top: 87%;
  transform: translateY(-50%);
}

.tooltip.caret-y-88::before, .tooltip.caret-y-88::after {
  top: 88%;
  transform: translateY(-50%);
}

.tooltip.caret-y-89::before, .tooltip.caret-y-89::after {
  top: 89%;
  transform: translateY(-50%);
}

.tooltip.caret-y-90::before, .tooltip.caret-y-90::after {
  top: 90%;
  transform: translateY(-50%);
}

.tooltip.caret-y-91::before, .tooltip.caret-y-91::after {
  top: 91%;
  transform: translateY(-50%);
}

.tooltip.caret-y-92::before, .tooltip.caret-y-92::after {
  top: 92%;
  transform: translateY(-50%);
}

.tooltip.caret-y-93::before, .tooltip.caret-y-93::after {
  top: 93%;
  transform: translateY(-50%);
}

.tooltip.caret-y-94::before, .tooltip.caret-y-94::after {
  top: 94%;
  transform: translateY(-50%);
}

.tooltip.caret-y-95::before, .tooltip.caret-y-95::after {
  top: 95%;
  transform: translateY(-50%);
}

.tooltip.caret-y-96::before, .tooltip.caret-y-96::after {
  top: 96%;
  transform: translateY(-50%);
}

.tooltip.caret-y-97::before, .tooltip.caret-y-97::after {
  top: 97%;
  transform: translateY(-50%);
}

.tooltip.caret-y-98::before, .tooltip.caret-y-98::after {
  top: 98%;
  transform: translateY(-50%);
}

.tooltip.caret-y-99::before, .tooltip.caret-y-99::after {
  top: 99%;
  transform: translateY(-50%);
}

.tooltip.caret-y-100::before, .tooltip.caret-y-100::after {
  top: 100%;
  transform: translateY(-50%);
}

.modal {
  --modal-accent: var(--neutral-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 530px;
  padding: 24px;
  border: 1px solid var(--swatches-border);
  border-radius: 16px;
  background: var(--swatches-surface);
  align-self: center;
  height: auto;
  flex: 0 0 auto;
  position: relative;
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal {
    gap: 20px;
    padding: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .modal {
    gap: 24px;
    padding: 24px;
  }
}

.modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.modal .modal-header .modal-header-start {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal .modal-header .modal-header-start {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .modal .modal-header .modal-header-start {
    gap: 8px;
  }
}

.modal .modal-header .modal-header-start > i.icon,
.modal .modal-header .modal-header-start > svg.icon {
  width: 24px;
  height: 24px;
}

.modal .modal-header .modal-header-start .modal-header-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.modal .modal-header .modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 15px;
}

.modal .modal-header .modal-close > i.icon,
.modal .modal-header .modal-close > svg.icon {
  width: 24px;
  height: 24px;
}

.modal .modal-header .modal-close > i.icon {
  background-color: var(--swatches-on-base);
}

.modal .modal-header .modal-close > svg.icon {
  color: var(--swatches-on-base);
}

.modal .modal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-bottom: 6px;
  align-self: stretch;
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal .modal-hero {
    gap: 8px;
    padding-bottom: 6px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .modal .modal-hero {
    gap: 12px;
    padding-bottom: 6px;
  }
}

.modal .modal-hero > i.icon,
.modal .modal-hero > svg.icon {
  width: 64px;
  height: 64px;
}

.modal .modal-hero .modal-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  color: var(--swatches-on-base);
  text-align: center;
}

.modal .modal-hero .modal-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  color: var(--swatches-on-base);
  text-align: center;
}

.modal .modal-body {
  display: flex;
  gap: 10px;
  width: 100%;
}

.modal .modal-body .modal-drawer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 165px;
  width: 100%;
  align-self: stretch;
  font-family: var(--font-body);
  border-radius: 8px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-weight: 400;
  white-space: pre-line;
  line-height: 130%;
}

.modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal .modal-actions {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .modal .modal-actions {
    gap: 12px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .modal {
    width: 530px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal {
    width: 280px;
  }
  .modal .modal-hero > i.icon,
  .modal .modal-hero > svg.icon {
    width: 48px;
    height: 48px;
  }
  .modal .modal-title {
    font-size: 18px;
  }
  .modal .modal-desc {
    font-size: 14px;
  }
  .modal .modal-body {
    padding: 0 24px 8px;
  }
  .modal .modal-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}

.modal .modal-header-start > i.icon,
.modal .modal-hero > i.icon {
  background-color: var(--modal-accent);
}

.modal .modal-header-start > svg.icon,
.modal .modal-hero > svg.icon {
  color: var(--modal-accent);
}

.modal.base {
  --modal-accent: var(--swatches-on-base);
}

.modal.warning {
  --modal-accent: var(--swatches-on-surface-warning);
}

.modal.error {
  --modal-accent: var(--swatches-on-surface-error);
}

.modal.success {
  --modal-accent: var(--swatches-on-surface-success);
}

.modal-layer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.48);
  z-index: 1030;
}

.modal-layer.no-fade {
  background: transparent;
}

.modal-layer.visible {
  display: flex;
}

.modal-layer .modal {
  max-height: none;
  overflow: visible;
}

.modal-layer .modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal-layer {
    align-items: flex-start;
    overflow-y: auto;
  }
}

@media (max-height: 700px) {
  .modal-layer {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .modal {
    height: 500px;
    max-height: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  .modal-header,
  .modal-actions {
    flex: 0 0 auto;
  }
}

.modal-layer:target {
  display: flex;
}

.notification-panel {
  position: absolute;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--swatches-base-active-alt);
  background-color: var(--swatches-surface);
  font-family: var(--font-body);
  max-width: 400px;
  min-width: 320px;
  display: none;
}

.notification-panel.radius-round {
  border-radius: 8px;
}

.notification-panel.radius-straigh {
  border-radius: 0;
}

.notification-panel.show {
  display: block;
}

.notification-panel::before, .notification-panel::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.notification-panel::before {
  z-index: -1;
}

.notification-panel::after {
  z-index: 1;
}

.notification-panel.position-bottom {
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

.notification-panel.position-bottom::before {
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: rgba(0, 0, 0, 0.15);
  border-top: none;
  filter: blur(1px);
}

.notification-panel.position-bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--swatches-surface);
  border-top: none;
}

.notification-panel.position-bottom-left {
  top: calc(100% + 12px);
  left: 0;
}

.notification-panel.position-bottom-left::before {
  bottom: calc(100% + 1px);
  left: 24px;
  border-bottom-color: rgba(0, 0, 0, 0.15);
  border-top: none;
  filter: blur(1px);
}

.notification-panel.position-bottom-left::after {
  bottom: 100%;
  left: 24px;
  border-bottom-color: var(--swatches-surface);
  border-top: none;
}

.notification-panel.position-bottom-right {
  top: calc(100% + 12px);
  right: 0;
}

.notification-panel.position-bottom-right::before {
  bottom: calc(100% + 1px);
  right: 24px;
  left: auto;
  border-bottom-color: rgba(0, 0, 0, 0.15);
  border-top: none;
  filter: blur(1px);
}

.notification-panel.position-bottom-right::after {
  bottom: 100%;
  right: 24px;
  left: auto;
  border-bottom-color: var(--swatches-surface);
  border-top: none;
}

.notification-panel.position-top {
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

.notification-panel.position-top::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom: none;
  filter: blur(1px);
}

.notification-panel.position-top::after {
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--swatches-surface);
  border-bottom: none;
}

.notification-panel.position-top-left {
  bottom: calc(100% + 12px);
  left: 0;
}

.notification-panel.position-top-left::before {
  top: 100%;
  left: 24px;
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom: none;
  filter: blur(1px);
}

.notification-panel.position-top-left::after {
  top: calc(100% - 1px);
  left: 24px;
  border-top-color: var(--swatches-surface);
  border-bottom: none;
}

.notification-panel.position-top-right {
  bottom: calc(100% + 12px);
  right: 0;
}

.notification-panel.position-top-right::before {
  top: 100%;
  right: 24px;
  left: auto;
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom: none;
  filter: blur(1px);
}

.notification-panel.position-top-right::after {
  top: calc(100% - 1px);
  right: 24px;
  left: auto;
  border-top-color: var(--swatches-surface);
  border-bottom: none;
}

.notification-panel.position-left {
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}

.notification-panel.position-left::before {
  left: calc(100% + 1px);
  top: 50%;
  transform: translateY(-50%);
  border-left-color: rgba(0, 0, 0, 0.15);
  border-right: none;
  filter: blur(1px);
}

.notification-panel.position-left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--swatches-surface);
  border-right: none;
}

.notification-panel.position-left-top {
  right: calc(100% + 12px);
  top: 0;
}

.notification-panel.position-left-top::before {
  left: calc(100% + 1px);
  top: 24px;
  border-left-color: rgba(0, 0, 0, 0.15);
  border-right: none;
  filter: blur(1px);
}

.notification-panel.position-left-top::after {
  left: 100%;
  top: 24px;
  border-left-color: var(--swatches-surface);
  border-right: none;
}

.notification-panel.position-left-bottom {
  right: calc(100% + 12px);
  bottom: 0;
}

.notification-panel.position-left-bottom::before {
  left: calc(100% + 1px);
  bottom: 24px;
  top: auto;
  border-left-color: rgba(0, 0, 0, 0.15);
  border-right: none;
  filter: blur(1px);
}

.notification-panel.position-left-bottom::after {
  left: 100%;
  bottom: 24px;
  top: auto;
  border-left-color: var(--swatches-surface);
  border-right: none;
}

.notification-panel.position-right {
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}

.notification-panel.position-right::before {
  right: calc(100% + 1px);
  top: 50%;
  transform: translateY(-50%);
  border-right-color: rgba(0, 0, 0, 0.15);
  border-left: none;
  filter: blur(1px);
}

.notification-panel.position-right::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--swatches-surface);
  border-left: none;
}

.notification-panel.position-right-top {
  left: calc(100% + 12px);
  top: 0;
}

.notification-panel.position-right-top::before {
  right: calc(100% + 1px);
  top: 24px;
  border-right-color: rgba(0, 0, 0, 0.15);
  border-left: none;
  filter: blur(1px);
}

.notification-panel.position-right-top::after {
  right: 100%;
  top: 24px;
  border-right-color: var(--swatches-surface);
  border-left: none;
}

.notification-panel.position-right-bottom {
  left: calc(100% + 12px);
  bottom: 0;
}

.notification-panel.position-right-bottom::before {
  right: calc(100% + 1px);
  bottom: 24px;
  top: auto;
  border-right-color: rgba(0, 0, 0, 0.15);
  border-left: none;
  filter: blur(1px);
}

.notification-panel.position-right-bottom::after {
  right: 100%;
  bottom: 24px;
  top: auto;
  border-right-color: var(--swatches-surface);
  border-left: none;
}

.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--swatches-border-base-alt);
}

.notification-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--swatches-on-surface-base);
}

.notification-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-list {
  max-height: 384px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.notification-list::-webkit-scrollbar {
  width: 8px;
}

.notification-list::-webkit-scrollbar-thumb {
  background-color: var(--swatches-border-base-alt);
  border-radius: 4px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 24px;
  border-bottom: 1px solid var(--swatches-border-base-alt);
  cursor: pointer;
  transition: background-color 0.2s ease;
  gap: 8px;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background-color: var(--swatches-base-hover);
}

.notification-item.read .notification-content {
  opacity: 0.6;
}

.notification-item.unread {
  border-left: 3px solid var(--swatches-on-surface-base);
  background-color: var(--swatches-base-subtle);
}

.notification-item.unread .notification-content .title {
  font-weight: 700;
}

.notification-item.notification-item-primary.unread {
  border-left-color: var(--swatches-primary-default);
  background-color: var(--swatches-primary-subtle);
}

.notification-item.notification-item-primary .notification-icon i.icon {
  background-color: var(--swatches-primary-default);
}

.notification-item.notification-item-primary .notification-icon svg.icon {
  color: var(--swatches-primary-default);
}

.notification-item.notification-item-primary .notification-content .title {
  color: var(--swatches-primary-active);
}

.notification-item.notification-item-success.unread {
  border-left-color: var(--swatches-success-default);
  background-color: var(--swatches-success-subtle);
}

.notification-item.notification-item-success .notification-icon i.icon {
  background-color: var(--swatches-success-default);
}

.notification-item.notification-item-success .notification-icon svg.icon {
  color: var(--swatches-success-default);
}

.notification-item.notification-item-success .notification-content .title {
  color: var(--swatches-success-active);
}

.notification-item.notification-item-warning.unread {
  border-left-color: var(--swatches-warning-default);
  background-color: var(--swatches-warning-subtle);
}

.notification-item.notification-item-warning .notification-icon i.icon {
  background-color: var(--swatches-warning-default);
}

.notification-item.notification-item-warning .notification-icon svg.icon {
  color: var(--swatches-warning-default);
}

.notification-item.notification-item-warning .notification-content .title {
  color: var(--swatches-warning-active);
}

.notification-item.notification-item-error.unread {
  border-left-color: var(--swatches-error-default);
  background-color: var(--swatches-error-subtle);
}

.notification-item.notification-item-error .notification-icon i.icon {
  background-color: var(--swatches-error-default);
}

.notification-item.notification-item-error .notification-icon svg.icon {
  color: var(--swatches-error-default);
}

.notification-item.notification-item-error .notification-content .title {
  color: var(--swatches-error-active);
}

.notification-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.notification-icon i.icon,
.notification-icon svg.icon {
  width: 32px;
  height: 32px;
}

.notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notification-content .title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--swatches-on-surface-base);
  margin: 0;
}

.notification-content .description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--swatches-on-surface-base);
  margin: 0;
}

.notification-content .timestamp {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--swatches-on-surface-neutral-alt);
}

.notification-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}

.notification-close {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swatches-on-surface-base);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.notification-close:hover {
  opacity: 0.7;
}

.notification-close i.icon,
.notification-close svg.icon {
  width: 16px;
  height: 16px;
}

.notification-close i.icon {
  background-color: var(--swatches-on-surface-base);
}

.notification-close svg.icon {
  color: var(--swatches-on-surface-base);
}

.notification-footer {
  padding: 16px 24px;
  text-align: center;
  border-top: 1px solid var(--swatches-border-base-alt);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .notification-header {
    padding: 12px 20px;
  }
  .notification-title {
    font-size: 16px;
  }
  .notification-item {
    padding: 12px 20px;
  }
  .notification-content .title {
    font-size: 14px;
  }
  .notification-content .description {
    font-size: 12px;
  }
  .notification-content .timestamp {
    font-size: 10px;
  }
  .notification-footer {
    padding: 12px 20px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .notification-panel {
    min-width: 280px;
  }
  .notification-header {
    padding: 8px 16px;
  }
  .notification-title {
    font-size: 16px;
  }
  .notification-item {
    padding: 8px 16px;
  }
  .notification-content .title {
    font-size: 14px;
  }
  .notification-content .description {
    font-size: 12px;
  }
  .notification-content .timestamp {
    font-size: 10px;
  }
  .notification-footer {
    padding: 8px 16px;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
  box-sizing: border-box;
  margin-inline: auto;
  width: 100%;
  min-height: calc(100vh - 240px);
}

.empty-state .empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.empty-state .empty-state-content .empty-state-icon {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--swatches-surface-alt);
}

.empty-state .empty-state-content .empty-state-icon.radius-pill {
  border-radius: 1000px;
}

.empty-state .empty-state-content .empty-state-icon.radius-round {
  border-radius: 8px;
}

.empty-state .empty-state-content .empty-state-icon > i.icon,
.empty-state .empty-state-content .empty-state-icon > svg.icon {
  width: 40px;
  height: 40px;
}

.empty-state .empty-state-content .empty-state-icon > i.icon {
  background-color: var(--swatches-on-base);
}

.empty-state .empty-state-content .empty-state-icon > svg.icon {
  color: var(--swatches-on-base);
}

.empty-state .empty-state-content .title {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  line-height: 120%;
  margin: 0;
}

.empty-state .empty-state-content .description {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  margin: 0;
}

.empty-state .empty-state-content .empty-state-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  gap: 16px;
  padding-top: 0;
}

.empty-state .empty-state-content .empty-state-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .empty-state .empty-state-content {
    width: 664px;
  }
  .empty-state .empty-state-content .empty-state-content {
    width: 520px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .empty-state .empty-state-content {
    width: 360px;
    margin-inline: auto;
  }
  .empty-state .empty-state-content .empty-state-content {
    width: 296px;
  }
  .empty-state .empty-state-content .empty-state-actions {
    display: flex;
    width: 296px;
    padding-top: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  .empty-state .empty-state-content .empty-state-actions > .btn {
    width: 100%;
  }
  .empty-state .empty-state-content .empty-state-link {
    display: flex;
    width: 296px;
    justify-content: center;
    padding-top: 16px;
  }
}

.empty-state.is-mobile-demo {
  width: 360px;
  margin-inline: auto;
}

.empty-state.is-mobile-demo .empty-state-content {
  width: 296px;
}

.empty-state.is-mobile-demo .empty-state-actions {
  display: flex;
  width: 296px;
  padding-top: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.empty-state.is-mobile-demo .empty-state-actions > .btn {
  width: 100%;
}

.empty-state.is-mobile-demo .empty-state-link {
  display: flex;
  width: 296px;
  justify-content: center;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.info .info-label {
  display: flex;
  height: 21px;
  align-items: center;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info .info-label {
    gap: 4px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info .info-label {
    gap: 4px;
  }
}

.info .info-label span {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 130%;
  color: var(--swatches-on-surface-neutral-alt);
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info .info-label span {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info .info-label span {
    font-size: 14px;
  }
}

.info .info-label > i.icon,
.info .info-label > svg.icon {
  display: flex;
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
}

.info .info-label > i.icon {
  background-color: var(--swatches-on-surface-primary);
}

.info .info-label > svg.icon {
  color: var(--swatches-on-surface-primary);
}

.info .info-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info .info-control {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info .info-control {
    gap: 8px;
  }
}

.info .info-control .info-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--swatches-surface-alt);
  padding: 4px;
  gap: 10px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info .info-control .info-icon {
    padding: 4px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info .info-control .info-icon {
    padding: 4px;
  }
}

.info .info-control .info-icon > i.icon,
.info .info-control .info-icon > svg.icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info .info-control .info-icon > i.icon {
  background-color: var(--swatches-on-surface-neutral);
}

.info .info-control .info-icon > svg.icon {
  color: var(--swatches-on-surface-neutral);
}

.info .info-control span {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 130%;
  color: var(--swatches-on-surface-neutral);
}

@media (min-width: 360px) and (max-width: 767px) {
  .info .info-control span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info .info-control span {
    font-size: 18px;
  }
}

.info.small .info-label span {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.small .info-label span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.small .info-label span {
    font-size: 18px;
  }
}

.info.small .info-control span {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.small .info-control span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.small .info-control span {
    font-size: 18px;
  }
}

.info.small .info-icon {
  width: 24px;
  height: 24px;
}

.info.small .info-icon > i.icon,
.info.small .info-icon > svg.icon {
  width: 16px;
  height: 16px;
}

.info.medium .info-label span {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.medium .info-label span {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.medium .info-label span {
    font-size: 14px;
  }
}

.info.medium .info-control span {
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.medium .info-control span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.medium .info-control span {
    font-size: 18px;
  }
}

.info.medium .info-icon {
  width: 24px;
  height: 24px;
}

.info.medium .info-icon > i.icon,
.info.medium .info-icon > svg.icon {
  width: 16px;
  height: 16px;
}

.info.large .info-label span {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.large .info-label span {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.large .info-label span {
    font-size: 14px;
  }
}

.info.large .info-control span {
  font-size: 20px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.large .info-control span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.large .info-control span {
    font-size: 18px;
  }
}

.info.large .info-icon {
  width: 28px;
  height: 28px;
}

.info.large .info-icon > i.icon,
.info.large .info-icon > svg.icon {
  width: 20px;
  height: 20px;
}

.action-bar {
  display: flex;
  padding: 16px 24px;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.action-bar.radius-round {
  border-radius: 8px;
}

.action-bar .action-bar-container {
  display: flex;
  place-content: center space-between;
  align-items: center;
  row-gap: 16px;
  flex: 1 0 0;
  flex-wrap: wrap;
}

.action-bar .action-bar-container .action-bar-left {
  display: flex;
  height: 40px;
  align-items: center;
  gap: 24px;
}

.action-bar .action-bar-container .action-bar-left .description {
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .action-bar .action-bar-container .action-bar-left .description {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .action-bar .action-bar-container .action-bar-left .description {
    font-size: 14px;
  }
}

.action-bar .action-bar-container .action-bar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.action-bar.mobile-forced {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.action-bar.mobile-forced .action-bar-container {
  align-items: flex-start;
  width: 100%;
  gap: 16px;
}

.action-bar.mobile-forced .action-bar-left {
  display: flex;
  height: 40px;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
}

.action-bar.mobile-forced .action-bar-right {
  display: flex;
  height: 40px;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
}

.action-bar.mobile-forced .action-bar-right > *:not(:last-child) {
  display: none !important;
}

.upload-field-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.upload-field {
  display: flex;
  width: 100%;
  height: 262px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 3px dashed var(--swatches-on-surface-neutral-alt);
  background: var(--swatches-surface-alt);
  cursor: pointer;
}

.upload-field:hover {
  background: var(--swatches-background);
}

.upload-field:focus-visible {
  outline-offset: 3px;
}

.upload-field .upload-field-content {
  display: flex;
  padding: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
}

@media (min-width: 360px) and (max-width: 767px) {
  .upload-field .upload-field-content {
    gap: 16px;
    padding: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .upload-field .upload-field-content {
    gap: 20px;
    padding: 32px;
  }
}

.upload-field .upload-field-content .upload-field-icon {
  display: flex;
  align-items: flex-start;
}

.upload-field .upload-field-content .upload-field-icon i.icon,
.upload-field .upload-field-content .upload-field-icon svg.icon {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 3.415px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.upload-field .upload-field-content .upload-field-icon i.icon {
  background-color: var(--swatches-on-base);
}

.upload-field .upload-field-content .upload-field-icon svg.icon {
  color: var(--swatches-on-base);
}

.upload-field .upload-field-content .upload-field-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

@media (min-width: 360px) and (max-width: 767px) {
  .upload-field .upload-field-content .upload-field-text {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .upload-field .upload-field-content .upload-field-text {
    gap: 12px;
  }
}

.upload-field .upload-field-content .upload-field-text .title {
  color: var(--swatches-on-base);
  text-align: center;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .upload-field .upload-field-content .upload-field-text .title {
    font-size: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .upload-field .upload-field-content .upload-field-text .title {
    font-size: 20px;
  }
}

.upload-field .upload-field-content .upload-field-text .description {
  color: var(--swatches-on-base);
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .upload-field .upload-field-content .upload-field-text .description {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .upload-field .upload-field-content .upload-field-text .description {
    font-size: 14px;
  }
}

.upload-field.is-hover {
  background: var(--swatches-background);
}

.upload-field.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.w-0 {
  width: 0%;
}

.w-1 {
  width: 1%;
}

.w-2 {
  width: 2%;
}

.w-3 {
  width: 3%;
}

.w-4 {
  width: 4%;
}

.w-5 {
  width: 5%;
}

.w-6 {
  width: 6%;
}

.w-7 {
  width: 7%;
}

.w-8 {
  width: 8%;
}

.w-9 {
  width: 9%;
}

.w-10 {
  width: 10%;
}

.w-11 {
  width: 11%;
}

.w-12 {
  width: 12%;
}

.w-13 {
  width: 13%;
}

.w-14 {
  width: 14%;
}

.w-15 {
  width: 15%;
}

.w-16 {
  width: 16%;
}

.w-17 {
  width: 17%;
}

.w-18 {
  width: 18%;
}

.w-19 {
  width: 19%;
}

.w-20 {
  width: 20%;
}

.w-21 {
  width: 21%;
}

.w-22 {
  width: 22%;
}

.w-23 {
  width: 23%;
}

.w-24 {
  width: 24%;
}

.w-25 {
  width: 25%;
}

.w-26 {
  width: 26%;
}

.w-27 {
  width: 27%;
}

.w-28 {
  width: 28%;
}

.w-29 {
  width: 29%;
}

.w-30 {
  width: 30%;
}

.w-31 {
  width: 31%;
}

.w-32 {
  width: 32%;
}

.w-33 {
  width: 33%;
}

.w-34 {
  width: 34%;
}

.w-35 {
  width: 35%;
}

.w-36 {
  width: 36%;
}

.w-37 {
  width: 37%;
}

.w-38 {
  width: 38%;
}

.w-39 {
  width: 39%;
}

.w-40 {
  width: 40%;
}

.w-41 {
  width: 41%;
}

.w-42 {
  width: 42%;
}

.w-43 {
  width: 43%;
}

.w-44 {
  width: 44%;
}

.w-45 {
  width: 45%;
}

.w-46 {
  width: 46%;
}

.w-47 {
  width: 47%;
}

.w-48 {
  width: 48%;
}

.w-49 {
  width: 49%;
}

.w-50 {
  width: 50%;
}

.w-51 {
  width: 51%;
}

.w-52 {
  width: 52%;
}

.w-53 {
  width: 53%;
}

.w-54 {
  width: 54%;
}

.w-55 {
  width: 55%;
}

.w-56 {
  width: 56%;
}

.w-57 {
  width: 57%;
}

.w-58 {
  width: 58%;
}

.w-59 {
  width: 59%;
}

.w-60 {
  width: 60%;
}

.w-61 {
  width: 61%;
}

.w-62 {
  width: 62%;
}

.w-63 {
  width: 63%;
}

.w-64 {
  width: 64%;
}

.w-65 {
  width: 65%;
}

.w-66 {
  width: 66%;
}

.w-67 {
  width: 67%;
}

.w-68 {
  width: 68%;
}

.w-69 {
  width: 69%;
}

.w-70 {
  width: 70%;
}

.w-71 {
  width: 71%;
}

.w-72 {
  width: 72%;
}

.w-73 {
  width: 73%;
}

.w-74 {
  width: 74%;
}

.w-75 {
  width: 75%;
}

.w-76 {
  width: 76%;
}

.w-77 {
  width: 77%;
}

.w-78 {
  width: 78%;
}

.w-79 {
  width: 79%;
}

.w-80 {
  width: 80%;
}

.w-81 {
  width: 81%;
}

.w-82 {
  width: 82%;
}

.w-83 {
  width: 83%;
}

.w-84 {
  width: 84%;
}

.w-85 {
  width: 85%;
}

.w-86 {
  width: 86%;
}

.w-87 {
  width: 87%;
}

.w-88 {
  width: 88%;
}

.w-89 {
  width: 89%;
}

.w-90 {
  width: 90%;
}

.w-91 {
  width: 91%;
}

.w-92 {
  width: 92%;
}

.w-93 {
  width: 93%;
}

.w-94 {
  width: 94%;
}

.w-95 {
  width: 95%;
}

.w-96 {
  width: 96%;
}

.w-97 {
  width: 97%;
}

.w-98 {
  width: 98%;
}

.w-99 {
  width: 99%;
}

.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-0vw {
  width: 0vw;
}

.w-1vw {
  width: 1vw;
}

.w-2vw {
  width: 2vw;
}

.w-3vw {
  width: 3vw;
}

.w-4vw {
  width: 4vw;
}

.w-5vw {
  width: 5vw;
}

.w-6vw {
  width: 6vw;
}

.w-7vw {
  width: 7vw;
}

.w-8vw {
  width: 8vw;
}

.w-9vw {
  width: 9vw;
}

.w-10vw {
  width: 10vw;
}

.w-11vw {
  width: 11vw;
}

.w-12vw {
  width: 12vw;
}

.w-13vw {
  width: 13vw;
}

.w-14vw {
  width: 14vw;
}

.w-15vw {
  width: 15vw;
}

.w-16vw {
  width: 16vw;
}

.w-17vw {
  width: 17vw;
}

.w-18vw {
  width: 18vw;
}

.w-19vw {
  width: 19vw;
}

.w-20vw {
  width: 20vw;
}

.w-21vw {
  width: 21vw;
}

.w-22vw {
  width: 22vw;
}

.w-23vw {
  width: 23vw;
}

.w-24vw {
  width: 24vw;
}

.w-25vw {
  width: 25vw;
}

.w-26vw {
  width: 26vw;
}

.w-27vw {
  width: 27vw;
}

.w-28vw {
  width: 28vw;
}

.w-29vw {
  width: 29vw;
}

.w-30vw {
  width: 30vw;
}

.w-31vw {
  width: 31vw;
}

.w-32vw {
  width: 32vw;
}

.w-33vw {
  width: 33vw;
}

.w-34vw {
  width: 34vw;
}

.w-35vw {
  width: 35vw;
}

.w-36vw {
  width: 36vw;
}

.w-37vw {
  width: 37vw;
}

.w-38vw {
  width: 38vw;
}

.w-39vw {
  width: 39vw;
}

.w-40vw {
  width: 40vw;
}

.w-41vw {
  width: 41vw;
}

.w-42vw {
  width: 42vw;
}

.w-43vw {
  width: 43vw;
}

.w-44vw {
  width: 44vw;
}

.w-45vw {
  width: 45vw;
}

.w-46vw {
  width: 46vw;
}

.w-47vw {
  width: 47vw;
}

.w-48vw {
  width: 48vw;
}

.w-49vw {
  width: 49vw;
}

.w-50vw {
  width: 50vw;
}

.w-51vw {
  width: 51vw;
}

.w-52vw {
  width: 52vw;
}

.w-53vw {
  width: 53vw;
}

.w-54vw {
  width: 54vw;
}

.w-55vw {
  width: 55vw;
}

.w-56vw {
  width: 56vw;
}

.w-57vw {
  width: 57vw;
}

.w-58vw {
  width: 58vw;
}

.w-59vw {
  width: 59vw;
}

.w-60vw {
  width: 60vw;
}

.w-61vw {
  width: 61vw;
}

.w-62vw {
  width: 62vw;
}

.w-63vw {
  width: 63vw;
}

.w-64vw {
  width: 64vw;
}

.w-65vw {
  width: 65vw;
}

.w-66vw {
  width: 66vw;
}

.w-67vw {
  width: 67vw;
}

.w-68vw {
  width: 68vw;
}

.w-69vw {
  width: 69vw;
}

.w-70vw {
  width: 70vw;
}

.w-71vw {
  width: 71vw;
}

.w-72vw {
  width: 72vw;
}

.w-73vw {
  width: 73vw;
}

.w-74vw {
  width: 74vw;
}

.w-75vw {
  width: 75vw;
}

.w-76vw {
  width: 76vw;
}

.w-77vw {
  width: 77vw;
}

.w-78vw {
  width: 78vw;
}

.w-79vw {
  width: 79vw;
}

.w-80vw {
  width: 80vw;
}

.w-81vw {
  width: 81vw;
}

.w-82vw {
  width: 82vw;
}

.w-83vw {
  width: 83vw;
}

.w-84vw {
  width: 84vw;
}

.w-85vw {
  width: 85vw;
}

.w-86vw {
  width: 86vw;
}

.w-87vw {
  width: 87vw;
}

.w-88vw {
  width: 88vw;
}

.w-89vw {
  width: 89vw;
}

.w-90vw {
  width: 90vw;
}

.w-91vw {
  width: 91vw;
}

.w-92vw {
  width: 92vw;
}

.w-93vw {
  width: 93vw;
}

.w-94vw {
  width: 94vw;
}

.w-95vw {
  width: 95vw;
}

.w-96vw {
  width: 96vw;
}

.w-97vw {
  width: 97vw;
}

.w-98vw {
  width: 98vw;
}

.w-99vw {
  width: 99vw;
}

.w-100vw {
  width: 100vw;
}

.min-w-0 {
  min-width: 0;
}

.min-w-full {
  min-width: 100%;
}

.min-w-100vw {
  min-width: 100vw;
}

.max-w-full {
  max-width: 100%;
}

.max-w-100vw {
  max-width: 100vw;
}

.max-w-none {
  max-width: none;
}

.w-fit {
  width: fit-content;
}

.w-min {
  width: min-content;
}

.w-max {
  width: max-content;
}

i.icon {
  width: 32px;
  height: 32px;
}

i.icon.small {
  width: 24px;
  height: 24px;
}

i.icon.medium {
  width: 32px;
  height: 32px;
}

i.icon.large {
  width: 40px;
  height: 40px;
}

i.icon.xlarge {
  width: 48px;
  height: 48px;
}

i.icon:is(i) {
  background-color: var(--swatches-on-base);
}

i.icon:is(svg) {
  color: var(--swatches-on-base);
}

i.icon.primary:is(i) {
  background-color: var(--swatches-primary-default);
}

i.icon.primary:is(svg) {
  color: var(--swatches-primary-default);
}

i.icon.secondary:is(i) {
  background-color: var(--swatches-secondary-default);
}

i.icon.secondary:is(svg) {
  color: var(--swatches-secondary-default);
}

i.icon.tertiary:is(i) {
  background-color: var(--swatches-tertiary-hover);
}

i.icon.tertiary:is(svg) {
  color: var(--swatches-tertiary-hover);
}

i.icon.quaternary:is(i) {
  background-color: var(--swatches-quaternary-default);
}

i.icon.quaternary:is(svg) {
  color: var(--swatches-quaternary-default);
}

i.icon.success:is(i) {
  background-color: var(--swatches-success-default);
}

i.icon.success:is(svg) {
  color: var(--swatches-success-default);
}

i.icon.warning:is(i) {
  background-color: var(--swatches-warning-default);
}

i.icon.warning:is(svg) {
  color: var(--swatches-warning-default);
}

i.icon.error:is(i) {
  background-color: var(--swatches-error-default);
}

i.icon.error:is(svg) {
  color: var(--swatches-error-default);
}

i.icon.neutral:is(i) {
  background-color: var(--neutral-0);
}

i.icon.neutral:is(svg) {
  color: var(--neutral-0);
}

i.icon.neutral-900:is(i) {
  background-color: var(--neutral-900);
}

i.icon.neutral-900:is(svg) {
  color: var(--neutral-900);
}

svg.icon {
  color: var(--swatches-on-base);
}

svg.icon.primary {
  color: var(--swatches-primary-default);
}

svg.icon.secondary {
  color: var(--swatches-secondary-default);
}

svg.icon.tertiary {
  color: var(--swatches-tertiary-hover);
}

svg.icon.quaternary {
  color: var(--swatches-quaternary-default);
}

svg.icon.success {
  color: var(--swatches-success-default);
}

svg.icon.warning {
  color: var(--swatches-warning-default);
}

svg.icon.error {
  color: var(--swatches-error-default);
}

svg.icon.neutral {
  color: var(--neutral-0);
}

svg.icon.neutral-900 {
  color: var(--neutral-900);
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.alert {
  border-radius: 8px;
  padding: 24px;
  border: 1px solid;
  display: flex;
  align-items: center;
  color: var(--swatches-on-surface-base);
  position: relative;
  gap: 16px;
  background-color: var(--swatches-base-subtle);
  border-color: var(--swatches-border-base);
}

.alert i.icon,
.alert svg.icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.alert i.icon {
  background-color: var(--swatches-on-surface-base);
}

.alert svg.icon {
  color: var(--swatches-on-surface-base);
}

.alert .title {
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--swatches-on-surface-base);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .alert {
    padding: 20px;
    border-radius: 4px;
  }
  .alert .title {
    font-size: 16px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .alert {
    padding: 16px;
    border-radius: 4px;
  }
  .alert .title {
    font-size: 16px;
  }
}

.alert.alert-primary {
  background-color: var(--swatches-primary-subtle);
  border-color: var(--swatches-border-primary-focus);
}

.alert.alert-primary .title {
  color: var(--swatches-primary-active);
}

.alert.alert-primary > i {
  background-color: var(--swatches-primary-default);
}

.alert.alert-primary > svg.icon {
  color: var(--swatches-primary-default);
}

.alert.alert-secondary {
  background-color: var(--swatches-secondary-subtle);
  border-color: var(--swatches-border-secondary-focus);
}

.alert.alert-secondary .title {
  color: var(--swatches-secondary-active);
}

.alert.alert-secondary > i {
  background-color: var(--swatches-secondary-default);
}

.alert.alert-secondary > svg.icon {
  color: var(--swatches-secondary-default);
}

.alert.alert-tertiary {
  background-color: var(--swatches-tertiary-subtle);
  border-color: var(--swatches-border-tertiary-focus);
}

.alert.alert-tertiary .title {
  color: var(--swatches-tertiary-active);
}

.alert.alert-tertiary > i {
  background-color: var(--swatches-tertiary-default);
}

.alert.alert-tertiary > svg.icon {
  color: var(--swatches-tertiary-default);
}

.alert.alert-quaternary {
  background-color: var(--swatches-quaternary-subtle);
  border-color: var(--swatches-border-quaternary-focus);
}

.alert.alert-quaternary .title {
  color: var(--swatches-quaternary-active);
}

.alert.alert-quaternary > i {
  background-color: var(--swatches-quaternary-default);
}

.alert.alert-quaternary > svg.icon {
  color: var(--swatches-quaternary-default);
}

.alert.alert-success {
  background-color: var(--swatches-success-subtle);
  border-color: var(--swatches-border-success-focus);
}

.alert.alert-success .title {
  color: var(--swatches-success-active);
}

.alert.alert-success > i {
  background-color: var(--swatches-success-default);
}

.alert.alert-success > svg.icon {
  color: var(--swatches-success-default);
}

.alert.alert-warning {
  background-color: var(--swatches-warning-subtle);
  border-color: var(--swatches-border-warning-focus);
}

.alert.alert-warning .title {
  color: var(--swatches-warning-active);
}

.alert.alert-warning > i {
  background-color: var(--swatches-warning-default);
}

.alert.alert-warning > svg.icon {
  color: var(--swatches-warning-default);
}

.alert.alert-error {
  background-color: var(--swatches-error-subtle);
  border-color: var(--swatches-border-error-focus);
}

.alert.alert-error .title {
  color: var(--swatches-error-active);
}

.alert.alert-error > i {
  background-color: var(--swatches-error-default);
}

.alert.alert-error > svg.icon {
  color: var(--swatches-error-default);
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--neutral-800);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  border-radius: 1000px;
  border: 1px solid var(--swatches-border-base);
  background-color: var(--swatches-surface);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1000px;
  background: var(--neutral-50);
  cursor: pointer;
}

.avatar.avatar-initials {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar .avatar img + .avatar-initials {
  display: none;
}

.avatar-xsmall {
  width: 16px;
  height: 16px;
  font-size: 0.625rem;
}

.avatar-small {
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
}

.avatar-medium {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}

.avatar-large {
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
}

.avatar-xlarge {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
}

.avatar-xxlarge {
  width: 56px;
  height: 56px;
  font-size: 1.75rem;
}

.avatar-huge {
  width: 64px;
  height: 64px;
  font-size: 2rem;
}

.avatar-profile {
  width: 143px;
  height: 143px;
  font-size: 2.5rem;
}

.avatar-list {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

input#avatarUpload {
  display: none;
}

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group.small .avatar {
  width: 16px;
  height: 16px;
}

.avatar-group.small .avatar:not(:first-child) {
  margin-left: -8px;
}

.avatar-group.medium .avatar {
  width: 24px;
  height: 24px;
}

.avatar-group.medium .avatar:not(:first-child) {
  margin-left: -12px;
}

.avatar-group.large .avatar {
  width: 40px;
  height: 40px;
}

.avatar-group.large .avatar:not(:first-child) {
  margin-left: -22px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 1000px;
  font-family: var(--font-body);
  font-weight: 600;
}

.badge.radius-round {
  border-radius: 8px;
}

.badge.radius-straigh {
  border-radius: 0;
}

.badge.outline {
  border-color: var(--swatches-border-base);
  background-color: transparent;
  color: var(--swatches-on-base);
}

.badge.outline > i.icon {
  background-color: var(--swatches-on-base);
}

.badge.outline > svg.icon {
  color: var(--swatches-on-base);
}

.badge.outline.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.badge.outline.primary {
  border-color: var(--swatches-border-primary);
  background-color: transparent;
  color: var(--swatches-on-surface-primary);
}

.badge.outline.primary > i.icon {
  background-color: var(--swatches-on-surface-primary);
}

.badge.outline.primary > svg.icon {
  color: var(--swatches-on-surface-primary);
}

.badge.outline.secondary {
  border-color: var(--swatches-border-secondary);
  background-color: transparent;
  color: var(--swatches-on-surface-secondary);
}

.badge.outline.secondary > i.icon {
  background-color: var(--swatches-on-surface-secondary);
}

.badge.outline.secondary > svg.icon {
  color: var(--swatches-on-surface-secondary);
}

.badge.outline.tertiary {
  border-color: var(--swatches-border-tertiary);
  background-color: transparent;
  color: var(--swatches-tertiary-default);
}

.badge.outline.tertiary > i.icon {
  background-color: var(--swatches-tertiary-default);
}

.badge.outline.tertiary > svg.icon {
  color: var(--swatches-tertiary-default);
}

.badge.outline.quaternary {
  border-color: var(--swatches-border-quaternary);
  background-color: transparent;
  color: var(--swatches-quaternary-default);
}

.badge.outline.quaternary > i.icon {
  background-color: var(--swatches-quaternary-default);
}

.badge.outline.quaternary > svg.icon {
  color: var(--swatches-quaternary-default);
}

.badge.outline.success {
  border-color: var(--swatches-border-success);
  background-color: transparent;
  color: var(--swatches-on-surface-success);
}

.badge.outline.success > i.icon {
  background-color: var(--swatches-on-surface-success);
}

.badge.outline.success > svg.icon {
  color: var(--swatches-on-surface-success);
}

.badge.outline.warning {
  border-color: var(--swatches-border-warning);
  background-color: transparent;
  color: var(--swatches-on-surface-warning);
}

.badge.outline.warning > i.icon {
  background-color: var(--swatches-on-surface-warning);
}

.badge.outline.warning > svg.icon {
  color: var(--swatches-on-surface-warning);
}

.badge.outline.error {
  border-color: var(--swatches-border-error);
  background-color: transparent;
  color: var(--swatches-on-surface-error);
}

.badge.outline.error > i.icon {
  background-color: var(--swatches-on-surface-error);
}

.badge.outline.error > svg.icon {
  color: var(--swatches-on-surface-error);
}

.badge.filled {
  border-color: var(--swatches-base-active-alt);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-on-surface-base-alt);
}

.badge.filled > i.icon {
  background-color: var(--swatches-on-surface-base-alt);
}

.badge.filled > svg.icon {
  color: var(--swatches-on-surface-base-alt);
}

.badge.filled.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.badge.filled.primary {
  border-color: var(--swatches-primary-default);
  background-color: var(--swatches-primary-default);
  color: var(--swatches-on-primary);
}

.badge.filled.primary > i.icon {
  background-color: var(--swatches-on-primary);
}

.badge.filled.primary > svg.icon {
  color: var(--swatches-on-primary);
}

.badge.filled.secondary {
  border-color: var(--swatches-secondary-default);
  background-color: var(--swatches-secondary-default);
  color: var(--swatches-on-secondary);
}

.badge.filled.secondary > i.icon {
  background-color: var(--swatches-on-secondary);
}

.badge.filled.secondary > svg.icon {
  color: var(--swatches-on-secondary);
}

.badge.filled.tertiary {
  border-color: var(--swatches-tertiary-default);
  background-color: var(--swatches-tertiary-default);
  color: var(--swatches-on-tertiary);
}

.badge.filled.tertiary > i.icon {
  background-color: var(--swatches-on-tertiary);
}

.badge.filled.tertiary > svg.icon {
  color: var(--swatches-on-tertiary);
}

.badge.filled.quaternary {
  border-color: var(--swatches-quaternary-default);
  background-color: var(--swatches-quaternary-default);
  color: var(--swatches-on-quaternary);
}

.badge.filled.quaternary > i.icon {
  background-color: var(--swatches-on-quaternary);
}

.badge.filled.quaternary > svg.icon {
  color: var(--swatches-on-quaternary);
}

.badge.filled.success {
  border-color: var(--swatches-success-default);
  background-color: var(--swatches-success-default);
  color: var(--swatches-on-success);
}

.badge.filled.success > i.icon {
  background-color: var(--swatches-on-success);
}

.badge.filled.success > svg.icon {
  color: var(--swatches-on-success);
}

.badge.filled.warning {
  border-color: var(--swatches-warning-default);
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-warning);
}

.badge.filled.warning > i.icon {
  background-color: var(--swatches-on-warning);
}

.badge.filled.warning > svg.icon {
  color: var(--swatches-on-warning);
}

.badge.filled.error {
  border-color: var(--swatches-error-default);
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-error);
}

.badge.filled.error > i.icon {
  background-color: var(--swatches-on-error);
}

.badge.filled.error > svg.icon {
  color: var(--swatches-on-error);
}

.badge.accent {
  border-color: var(--swatches-on-surface-base-alt);
  background-color: var(--swatches-on-surface-base-alt);
  color: var(--swatches-on-base);
}

.badge.accent > i.icon {
  background-color: var(--swatches-on-base);
}

.badge.accent > svg.icon {
  color: var(--swatches-on-base);
}

.badge.accent.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.badge.accent.primary {
  border-color: var(--swatches-primary-subtle);
  background-color: var(--swatches-primary-subtle);
  color: var(--swatches-primary-default);
}

.badge.accent.primary > i.icon {
  background-color: var(--swatches-primary-default);
}

.badge.accent.primary > svg.icon {
  color: var(--swatches-primary-default);
}

.badge.accent.secondary {
  border-color: var(--swatches-secondary-subtle);
  background-color: var(--swatches-secondary-subtle);
  color: var(--swatches-secondary-default);
}

.badge.accent.secondary > i.icon {
  background-color: var(--swatches-secondary-default);
}

.badge.accent.secondary > svg.icon {
  color: var(--swatches-secondary-default);
}

.badge.accent.tertiary {
  border-color: var(--swatches-tertiary-subtle);
  background-color: var(--swatches-tertiary-subtle);
  color: var(--swatches-tertiary-default);
}

.badge.accent.tertiary > i.icon {
  background-color: var(--swatches-tertiary-default);
}

.badge.accent.tertiary > svg.icon {
  color: var(--swatches-tertiary-default);
}

.badge.accent.quaternary {
  border-color: var(--swatches-quaternary-subtle);
  background-color: var(--swatches-quaternary-subtle);
  color: var(--swatches-quaternary-default);
}

.badge.accent.quaternary > i.icon {
  background-color: var(--swatches-quaternary-default);
}

.badge.accent.quaternary > svg.icon {
  color: var(--swatches-quaternary-default);
}

.badge.accent.success {
  border-color: var(--swatches-success-subtle);
  background-color: var(--swatches-success-subtle);
  color: var(--swatches-success-default);
}

.badge.accent.success > i.icon {
  background-color: var(--swatches-success-default);
}

.badge.accent.success > svg.icon {
  color: var(--swatches-success-default);
}

.badge.accent.warning {
  border-color: var(--swatches-warning-subtle);
  background-color: var(--swatches-warning-subtle);
  color: var(--swatches-on-surface-warning);
}

.badge.accent.warning > i.icon {
  background-color: var(--swatches-on-surface-warning);
}

.badge.accent.warning > svg.icon {
  color: var(--swatches-on-surface-warning);
}

.badge.accent.error {
  border-color: var(--swatches-error-subtle);
  background-color: var(--swatches-error-subtle);
  color: var(--swatches-on-surface-error);
}

.badge.accent.error > i.icon {
  background-color: var(--swatches-on-surface-error);
}

.badge.accent.error > svg.icon {
  color: var(--swatches-on-surface-error);
}

.badge.xsmall {
  min-width: 32px;
  width: auto;
  max-height: 24px;
  padding: 4px 8px;
  gap: 6px;
  font-size: 12px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .badge.xsmall {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .badge.xsmall {
    font-size: 10px;
  }
}

.badge.xsmall i.icon,
.badge.xsmall svg.icon {
  width: 11.67px;
  height: 11.67px;
}

.badge.small {
  min-width: 32px;
  width: auto;
  max-height: 32px;
  padding: 8px 10px;
  gap: 6px;
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .badge.small {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .badge.small {
    font-size: 12px;
  }
}

.badge.small i.icon,
.badge.small svg.icon {
  width: 11.67px;
  height: 11.67px;
}

.badge.medium {
  min-width: 40px;
  width: auto;
  max-height: 40px;
  padding: 8px 13px;
  gap: 8px;
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .badge.medium {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .badge.medium {
    font-size: 14px;
  }
}

.badge.medium i.icon,
.badge.medium svg.icon {
  width: 16.67px;
  height: 16.67px;
}

.badge.large {
  min-width: 48px;
  width: auto;
  max-height: 48px;
  padding: 8px 16px;
  gap: 10px;
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .badge.large {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .badge.large {
    font-size: 16px;
  }
}

.badge.large i.icon,
.badge.large svg.icon {
  width: 20px;
  height: 20px;
}

.badge.xlarge {
  min-width: 48px;
  width: auto;
  max-height: 48px;
  padding: 12px 20px;
  gap: 12px;
  font-size: 20px;
}

.badge.xlarge i.icon,
.badge.xlarge svg.icon {
  width: 26.67px;
  height: 26.67px;
}

.badge .badge-text {
  padding-inline: 6px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.btn {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  cursor: pointer;
  background-color: var(--swatches-base-default);
  border-color: var(--swatches-border-base);
  color: var(--swatches-on-base);
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
}

.btn .dot-overlay {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--swatches-error-hover);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  top: 6px;
  right: 6px;
}

.btn.small .dot-overlay {
  top: 3px;
  right: 3px;
}

.btn.medium .dot-overlay {
  top: 6px;
  right: 6px;
}

.btn.large .dot-overlay {
  top: 10px;
  right: 10px;
}

.btn.xlarge .dot-overlay {
  top: 14px;
  right: 14px;
}

.btn:has(> span ~ .icon) .dot-overlay {
  left: auto;
  right: 6px;
}

.btn > i.icon {
  background-color: var(--swatches-on-base);
}

.btn > svg.icon {
  color: var(--swatches-on-base);
}

.btn > i.flag {
  background-color: transparent;
}

.btn:not(:disabled):hover, .btn:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-base-hover);
}

.btn:active, .btn[data-state=active] {
  background-color: var(--swatches-base-active);
}

.btn:focus-visible, .btn[data-state=focus] {
  background-color: var(--swatches-base-default);
  border-color: var(--swatches-border-base-focus);
  border-width: 3px;
}

.btn[aria-pressed=true], .btn[data-state=selected] {
  background-color: var(--swatches-base-selected);
  border-color: var(--swatches-base-selected);
}

.btn:disabled, .btn[data-state=disabled] {
  background-color: var(--swatches-base-default);
  border-color: var(--swatches-border-base);
  color: var(--swatches-on-base);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn::selection {
  background-color: var(--swatches-base-selected);
}

.btn.invert {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-border-invert);
  color: var(--swatches-on-surface-invert);
}

.btn.invert:not(:disabled):hover, .btn.invert:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-on-surface-alt-invert);
}

.btn.invert:active, .btn.invert[data-state=active] {
  background-color: var(--swatches-primary-active);
  border-color: var(--swatches-border-invert);
}

.btn.invert:focus-visible, .btn.invert[data-state=focus] {
  background-color: var(--swatches-surface-invert);
  border-color: var(--swatches-border-invert);
  border-width: 3px;
}

.btn.invert[aria-pressed=true], .btn.invert[data-state=selected] {
  background-color: var(--swatches-primary-selected);
  border-color: var(--swatches-border-invert);
}

.btn.invert:disabled, .btn.invert[data-state=disabled] {
  background-color: var(--swatches-on-surface-invert);
  border-color: var(--swatches-border-invert);
  opacity: 0.5;
}

.btn.invert > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.btn.invert > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.btn.invert > i.flag {
  background-color: transparent;
}

.btn.plain {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-base);
}

.btn.plain:not(:disabled):hover, .btn.plain:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-base-hover-alt);
  border-color: var(--swatches-base-hover-alt);
  color: var(--swatches-base-default);
}

.btn.plain:not(:disabled):hover > i.icon, .btn.plain:not([data-state=disabled])[data-state=hover] > i.icon {
  background-color: var(--swatches-base-default);
}

.btn.plain:not(:disabled):hover > svg.icon, .btn.plain:not([data-state=disabled])[data-state=hover] > svg.icon {
  color: var(--swatches-base-default);
}

.btn.plain:active, .btn.plain[data-state=active] {
  background-color: var(--swatches-base-active);
  border-color: var(--swatches-base-active);
}

.btn.plain:focus-visible, .btn.plain[data-state=focus] {
  background-color: var(--swatches-base-default);
  border-color: var(--swatches-border-base-focus);
  border-width: 3px;
}

.btn.plain[aria-pressed=true], .btn.plain[data-state=selected] {
  background-color: var(--swatches-base-selected);
}

.btn.plain:disabled, .btn.plain[data-state=disabled] {
  color: var(--swatches-on-base);
  background-color: var(--swatches-base-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.plain > i.icon {
  background-color: var(--swatches-on-base);
}

.btn.plain > svg.icon {
  color: var(--swatches-on-base);
}

.btn.plain-invert {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.btn.plain-invert:not(:disabled):hover, .btn.plain-invert:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-primary-default);
}

.btn.plain-invert:active, .btn.plain-invert[data-state=active] {
  background-color: var(--swatches-primary-active);
  border-color: var(--swatches-primary-active);
}

.btn.plain-invert:focus-visible, .btn.plain-invert[data-state=focus] {
  background-color: var(--swatches-surface-invert);
  border-color: var(--swatches-border-invert);
  border-width: 3px;
}

.btn.plain-invert[aria-pressed=true], .btn.plain-invert[data-state=selected] {
  background-color: var(--swatches-primary-selected);
}

.btn.plain-invert:disabled, .btn.plain-invert[data-state=disabled] {
  background-color: var(--swatches-base-hover-alt);
  border-color: var(--swatches-base-hover-alt);
  color: var(--swatches-base-default);
  opacity: 0.5;
}

.btn.plain-invert > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.btn.plain-invert > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.btn.plain-error {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-error);
}

.btn.plain-error:not(:disabled):hover, .btn.plain-error:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-error-hover);
  color: var(--swatches-base-default);
}

.btn.plain-error:not(:disabled):hover > i.icon, .btn.plain-error:not([data-state=disabled])[data-state=hover] > i.icon {
  background-color: var(--swatches-base-default);
}

.btn.plain-error:not(:disabled):hover > svg.icon, .btn.plain-error:not([data-state=disabled])[data-state=hover] > svg.icon {
  color: var(--swatches-base-default);
}

.btn.plain-error:active, .btn.plain-error[data-state=active] {
  background-color: var(--swatches-error-active);
  color: var(--swatches-base-default);
}

.btn.plain-error:active > i.icon, .btn.plain-error[data-state=active] > i.icon {
  background-color: var(--swatches-base-default);
}

.btn.plain-error:active > svg.icon, .btn.plain-error[data-state=active] > svg.icon {
  color: var(--swatches-base-default);
}

.btn.plain-error:focus-visible, .btn.plain-error[data-state=focus] {
  background-color: var(--swatches-error-default);
  border-color: var(--swatches-border-error-focus);
  border-width: 3px;
  color: var(--swatches-base-default);
}

.btn.plain-error:focus-visible > i.icon, .btn.plain-error[data-state=focus] > i.icon {
  background-color: var(--swatches-base-default);
}

.btn.plain-error:focus-visible > svg.icon, .btn.plain-error[data-state=focus] > svg.icon {
  color: var(--swatches-base-default);
}

.btn.plain-error[aria-pressed=true], .btn.plain-error[data-state=selected] {
  background-color: var(--swatches-error-selected);
  color: var(--swatches-base-default);
}

.btn.plain-error[aria-pressed=true] > i.icon, .btn.plain-error[data-state=selected] > i.icon {
  background-color: var(--swatches-base-default);
}

.btn.plain-error[aria-pressed=true] > svg.icon, .btn.plain-error[data-state=selected] > svg.icon {
  color: var(--swatches-base-default);
}

.btn.plain-error:disabled, .btn.plain-error[data-state=disabled] {
  opacity: 0.5;
}

.btn.plain-error > i.icon {
  background-color: var(--swatches-on-surface-error);
}

.btn.plain-error > svg.icon {
  color: var(--swatches-on-surface-error);
}

.btn.primary {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-primary-default);
}

.btn.primary:not(:disabled):hover, .btn.primary:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-primary-hover);
  border-color: var(--swatches-primary-hover);
}

.btn.primary:active, .btn.primary[data-state=active] {
  background-color: var(--swatches-primary-active);
  border-color: var(--swatches-primary-active);
}

.btn.primary:focus-visible, .btn.primary[data-state=focus] {
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-border-primary-focus);
  border-width: 3px;
}

.btn.primary[aria-pressed=true], .btn.primary[data-state=selected] {
  background-color: var(--swatches-primary-selected);
  border-color: var(--swatches-primary-selected);
}

.btn.primary:disabled, .btn.primary[data-state=disabled] {
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-primary-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.primary > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.primary > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.primary > i.flag {
  background-color: transparent;
}

.btn.secondary {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-secondary-default);
  border-color: var(--swatches-secondary-default);
}

.btn.secondary:not(:disabled):hover, .btn.secondary:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-secondary-hover);
  border-color: var(--swatches-secondary-hover);
}

.btn.secondary:active, .btn.secondary[data-state=active] {
  background-color: var(--swatches-secondary-active);
  border-color: var(--swatches-secondary-active);
}

.btn.secondary:focus-visible, .btn.secondary[data-state=focus] {
  background-color: var(--swatches-secondary-default);
  border-color: var(--swatches-border-secondary-focus);
  border-width: 3px;
}

.btn.secondary[aria-pressed=true], .btn.secondary[data-state=selected] {
  background-color: var(--swatches-secondary-selected);
  border-color: var(--swatches-secondary-selected);
}

.btn.secondary:disabled, .btn.secondary[data-state=disabled] {
  background-color: var(--swatches-secondary-default);
  border-color: var(--swatches-secondary-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.secondary > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.secondary > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.secondary > i.flag {
  background-color: transparent;
}

.btn.tertiary {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-tertiary-default);
  border-color: var(--swatches-tertiary-default);
}

.btn.tertiary:not(:disabled):hover, .btn.tertiary:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-tertiary-hover);
  border-color: var(--swatches-tertiary-hover);
}

.btn.tertiary:active, .btn.tertiary[data-state=active] {
  background-color: var(--swatches-tertiary-active);
  border-color: var(--swatches-tertiary-active);
}

.btn.tertiary:focus-visible, .btn.tertiary[data-state=focus] {
  background-color: var(--swatches-tertiary-default);
  border-color: var(--swatches-border-tertiary-focus);
  border-width: 3px;
}

.btn.tertiary[aria-pressed=true], .btn.tertiary[data-state=selected] {
  background-color: var(--swatches-tertiary-selected);
  border-color: var(--swatches-tertiary-selected);
}

.btn.tertiary:disabled, .btn.tertiary[data-state=disabled] {
  background-color: var(--swatches-tertiary-default);
  border-color: var(--swatches-tertiary-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.tertiary > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.tertiary > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.tertiary > i.flag {
  background-color: transparent;
}

.btn.quaternary {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-quaternary-default);
  border-color: var(--swatches-quaternary-default);
}

.btn.quaternary:not(:disabled):hover, .btn.quaternary:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-quaternary-hover);
  border-color: var(--swatches-quaternary-hover);
}

.btn.quaternary:active, .btn.quaternary[data-state=active] {
  background-color: var(--swatches-quaternary-active);
  border-color: var(--swatches-quaternary-active);
}

.btn.quaternary:focus-visible, .btn.quaternary[data-state=focus] {
  background-color: var(--swatches-quaternary-default);
  border-color: var(--swatches-border-quaternary-focus);
  border-width: 3px;
}

.btn.quaternary[aria-pressed=true], .btn.quaternary[data-state=selected] {
  background-color: var(--swatches-quaternary-selected);
  border-color: var(--swatches-quaternary-selected);
}

.btn.quaternary:disabled, .btn.quaternary[data-state=disabled] {
  background-color: var(--swatches-quaternary-default);
  border-color: var(--swatches-quaternary-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.quaternary > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.quaternary > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.quaternary > i.flag {
  background-color: transparent;
}

.btn.success {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-success-default);
  border-color: var(--swatches-success-default);
}

.btn.success:not(:disabled):hover, .btn.success:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-success-hover);
  border-color: var(--swatches-success-hover);
}

.btn.success:active, .btn.success[data-state=active] {
  background-color: var(--swatches-success-active);
  border-color: var(--swatches-success-active);
}

.btn.success:focus-visible, .btn.success[data-state=focus] {
  background-color: var(--swatches-success-default);
  border-color: var(--swatches-border-success-focus);
  border-width: 3px;
}

.btn.success[aria-pressed=true], .btn.success[data-state=selected] {
  background-color: var(--swatches-success-selected);
  border-color: var(--swatches-success-selected);
}

.btn.success:disabled, .btn.success[data-state=disabled] {
  background-color: var(--swatches-success-default);
  border-color: var(--swatches-success-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.success > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.success > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.success > i.flag {
  background-color: transparent;
}

.btn.warning {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-warning-default);
  border-color: var(--swatches-warning-default);
}

.btn.warning:not(:disabled):hover, .btn.warning:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-warning-hover);
  border-color: var(--swatches-warning-hover);
}

.btn.warning:active, .btn.warning[data-state=active] {
  background-color: var(--swatches-warning-active);
  border-color: var(--swatches-warning-active);
}

.btn.warning:focus-visible, .btn.warning[data-state=focus] {
  background-color: var(--swatches-warning-default);
  border-color: var(--swatches-border-warning-focus);
  border-width: 3px;
}

.btn.warning[aria-pressed=true], .btn.warning[data-state=selected] {
  background-color: var(--swatches-warning-selected);
  border-color: var(--swatches-warning-selected);
}

.btn.warning:disabled, .btn.warning[data-state=disabled] {
  background-color: var(--swatches-warning-default);
  border-color: var(--swatches-warning-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.warning > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.warning > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.warning > i.flag {
  background-color: transparent;
}

.btn.error {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-error-default);
  border-color: var(--swatches-error-default);
}

.btn.error:not(:disabled):hover, .btn.error:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-error-hover);
  border-color: var(--swatches-error-hover);
}

.btn.error:active, .btn.error[data-state=active] {
  background-color: var(--swatches-error-active);
  border-color: var(--swatches-error-active);
}

.btn.error:focus-visible, .btn.error[data-state=focus] {
  background-color: var(--swatches-error-default);
  border-color: var(--swatches-border-error-focus);
  border-width: 3px;
}

.btn.error[aria-pressed=true], .btn.error[data-state=selected] {
  background-color: var(--swatches-error-selected);
  border-color: var(--swatches-error-selected);
}

.btn.error:disabled, .btn.error[data-state=disabled] {
  background-color: var(--swatches-error-default);
  border-color: var(--swatches-error-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.error > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.error > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.error > i.flag {
  background-color: transparent;
}

.btn.cta {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-cta-default);
  border-color: var(--swatches-cta-default);
}

.btn.cta:not(:disabled):hover, .btn.cta:not([data-state=disabled])[data-state=hover] {
  background-color: var(--swatches-cta-hover);
  border-color: var(--swatches-cta-hover);
}

.btn.cta:active, .btn.cta[data-state=active] {
  background-color: var(--swatches-cta-active);
  border-color: var(--swatches-cta-active);
}

.btn.cta:focus-visible, .btn.cta[data-state=focus] {
  background-color: var(--swatches-cta-default);
  border-color: var(--swatches-border-cta-focus);
  border-width: 3px;
}

.btn.cta[aria-pressed=true], .btn.cta[data-state=selected] {
  background-color: var(--swatches-cta-selected);
  border-color: var(--swatches-cta-selected);
}

.btn.cta:disabled, .btn.cta[data-state=disabled] {
  background-color: var(--swatches-cta-default);
  border-color: var(--swatches-cta-default);
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.cta > i.icon {
  background-color: var(--swatches-on-secondary);
}

.btn.cta > svg.icon {
  color: var(--swatches-on-secondary);
}

.btn.cta > i.flag {
  background-color: transparent;
}

.btn.small {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.btn.small i.icon,
.btn.small svg.icon {
  width: 12px;
  height: 12px;
}

.btn.small > i.flag {
  width: 10px;
  height: 10px;
}

.btn.medium {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.btn.medium i.icon,
.btn.medium svg.icon {
  width: 17px;
  height: 17px;
}

.btn.medium > i.flag {
  width: 20px;
  height: 20px;
}

.btn.large {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.btn.large i.icon,
.btn.large svg.icon {
  width: 20px;
  height: 20px;
}

.btn.large > i.flag {
  width: 24px;
  height: 24px;
}

.btn.xlarge {
  padding: 12px 20px;
  font-size: 20px;
  height: 64px;
  gap: 10px;
}

.btn.xlarge i.icon,
.btn.xlarge svg.icon {
  width: 28px;
  height: 28px;
}

.btn.xlarge > i.flag {
  width: 32px;
  height: 32px;
}

.btn.radius-pill {
  border-radius: 1000px;
}

.btn.radius-round {
  border-radius: 8px;
}

.btn.radius-straigh {
  border-radius: 0;
}

.btn.icon-only.small {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.btn.icon-only.medium {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.btn.icon-only.large {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.btn.icon-only.xlarge {
  padding: 12px;
  width: 64px;
  height: 64px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .btn {
    font-size: 14px;
  }
  .btn.small {
    padding: 8px 10px;
    font-size: 12px;
    height: 32px;
    gap: 6px;
  }
  .btn.small i.icon,
  .btn.small svg.icon {
    width: 12px;
    height: 12px;
  }
  .btn.small > i.flag {
    width: 10px;
    height: 10px;
  }
  .btn.medium {
    padding: 8px 13px;
    font-size: 14px;
    height: 40px;
    gap: 8px;
  }
  .btn.medium i.icon,
  .btn.medium svg.icon {
    width: 17px;
    height: 17px;
  }
  .btn.medium > i.flag {
    width: 20px;
    height: 20px;
  }
  .btn.large {
    padding: 8px 16px;
    font-size: 16px;
    height: 48px;
    gap: 10px;
  }
  .btn.large i.icon,
  .btn.large svg.icon {
    width: 20px;
    height: 20px;
  }
  .btn.large > i.flag {
    width: 24px;
    height: 24px;
  }
  .btn.xlarge {
    padding: 12px 20px;
    font-size: 20px;
    height: 64px;
    gap: 10px;
  }
  .btn.xlarge i.icon,
  .btn.xlarge svg.icon {
    width: 28px;
    height: 28px;
  }
  .btn.xlarge > i.flag {
    width: 32px;
    height: 32px;
  }
  .btn.icon-only.small {
    padding: 8px;
    width: 32px;
    height: 32px;
  }
  .btn.icon-only.medium {
    padding: 8px;
    width: 40px;
    height: 40px;
  }
  .btn.icon-only.large {
    padding: 8px;
    width: 48px;
    height: 48px;
  }
  .btn.icon-only.xlarge {
    padding: 12px;
    width: 64px;
    height: 64px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .btn {
    font-size: 14px;
  }
  .btn.small {
    padding: 8px 10px;
    font-size: 12px;
    height: 32px;
    gap: 6px;
  }
  .btn.small i.icon,
  .btn.small svg.icon {
    width: 12px;
    height: 12px;
  }
  .btn.small > i.flag {
    width: 10px;
    height: 10px;
  }
  .btn.medium {
    padding: 8px 13px;
    font-size: 14px;
    height: 40px;
    gap: 8px;
  }
  .btn.medium i.icon,
  .btn.medium svg.icon {
    width: 17px;
    height: 17px;
  }
  .btn.medium > i.flag {
    width: 20px;
    height: 20px;
  }
  .btn.large {
    padding: 8px 16px;
    font-size: 16px;
    height: 48px;
    gap: 10px;
  }
  .btn.large i.icon,
  .btn.large svg.icon {
    width: 20px;
    height: 20px;
  }
  .btn.large > i.flag {
    width: 24px;
    height: 24px;
  }
  .btn.xlarge {
    padding: 12px 20px;
    font-size: 20px;
    height: 64px;
    gap: 10px;
  }
  .btn.xlarge i.icon,
  .btn.xlarge svg.icon {
    width: 28px;
    height: 28px;
  }
  .btn.xlarge > i.flag {
    width: 32px;
    height: 32px;
  }
  .btn.icon-only.small {
    padding: 8px;
    width: 32px;
    height: 32px;
  }
  .btn.icon-only.medium {
    padding: 8px;
    width: 40px;
    height: 40px;
  }
  .btn.icon-only.large {
    padding: 8px;
    width: 48px;
    height: 48px;
  }
  .btn.icon-only.xlarge {
    padding: 12px;
    width: 64px;
    height: 64px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.card {
  display: flex;
  border: 1px solid var(--swatches-border-base-alt);
}

.card.card-vertical {
  flex-direction: column;
  width: fit-content;
  min-height: 466px;
  display: flex;
}

.card.card-vertical .card-img {
  width: 100%;
  position: relative;
  display: flex;
}

.card.card-vertical .card-img img {
  width: 100%;
}

.card.card-vertical .card-header {
  gap: 8px;
  display: flex;
  flex-direction: column;
}

.card.card-vertical .card-checkbox {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  left: 10px;
}

.card.card-vertical .card-container {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
  height: 100%;
}

.card.card-vertical .card-container .card-content .card-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  gap: 10px;
  align-self: stretch;
  font-family: var(--font-body);
  border-radius: 8px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-weight: 400;
  line-height: 130%;
}

.card.card-vertical .card-container .card-buttons {
  display: flex;
  width: 100%;
  gap: 16px;
  align-self: stretch;
  flex-wrap: wrap;
  margin-top: auto;
}

.card.card-vertical .card-container .card-buttons .btn {
  width: 100%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .card.card-vertical .card-container .card-buttons {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .card.card-vertical .card-container .card-buttons {
    gap: 8px;
  }
}

.card.card-horizontal {
  flex-direction: row;
  height: fit-content;
  display: flex;
  gap: 24px;
}

.card.card-horizontal .card-img {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

.card.card-horizontal .card-header {
  gap: 4px;
  display: flex;
  flex-direction: column;
}

.card.card-horizontal .card-checkbox {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  left: 10px;
}

.card.card-horizontal .card-container {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 16px;
  gap: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card.card-horizontal .card-container .card-content .card-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 72px;
  padding: 0 16px;
  gap: 10px;
  align-self: stretch;
  font-family: var(--font-body);
  border-radius: 8px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-weight: 400;
  line-height: 130%;
}

.card.card-horizontal .card-container .card-buttons {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  margin-top: auto;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .card.card-horizontal .card-container .card-buttons {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .card.card-horizontal .card-container .card-buttons {
    gap: 8px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .card.card-horizontal {
    flex-direction: column;
  }
  .card.card-horizontal .card-img {
    width: 100%;
  }
  .card.card-horizontal .card-img img {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .card.card-horizontal {
    flex-direction: column;
  }
  .card.card-horizontal .card-img {
    width: 100%;
  }
  .card.card-horizontal .card-img img {
    width: 100%;
  }
}

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

.card .card-title {
  font-size: 24px;
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-title);
  line-height: 100%;
  font-weight: 600;
  align-self: stretch;
}

@media (min-width: 360px) and (max-width: 767px) {
  .card .card-title {
    font-size: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .card .card-title {
    font-size: 20px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.chip-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--swatches-base-default);
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
  border: 1px solid var(--swatches-border-base);
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
}

.chip-container.radius-pill {
  border-radius: 1000px;
}

.chip-container.radius-round {
  border-radius: 8px;
}

.chip-container.radius-straigh {
  border-radius: 0;
}

.chip-container .chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.chip-container.outline {
  border-color: var(--swatches-border-base);
  background-color: transparent;
  color: var(--swatches-on-base);
}

.chip-container.outline .chip-icon i.icon-color {
  background-color: var(--swatches-on-base);
}

.chip-container.outline .chip-icon svg.icon-color {
  color: var(--swatches-on-base);
}

.chip-container.outline.primary {
  border-color: var(--swatches-border-primary);
  background-color: transparent;
  color: var(--swatches-on-surface-primary);
}

.chip-container.outline.primary .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-primary);
}

.chip-container.outline.primary .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-primary);
}

.chip-container.outline.secondary {
  border-color: var(--swatches-border-secondary);
  background-color: transparent;
  color: var(--swatches-on-surface-secondary);
}

.chip-container.outline.secondary .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-secondary);
}

.chip-container.outline.secondary .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-secondary);
}

.chip-container.outline.tertiary {
  border-color: var(--swatches-border-tertiary);
  background-color: transparent;
  color: var(--swatches-tertiary-default);
}

.chip-container.outline.tertiary .chip-icon i.icon-color {
  background-color: var(--swatches-tertiary-default);
}

.chip-container.outline.tertiary .chip-icon svg.icon-color {
  color: var(--swatches-tertiary-default);
}

.chip-container.outline.quaternary {
  border-color: var(--swatches-border-quaternary);
  background-color: transparent;
  color: var(--swatches-quaternary-default);
}

.chip-container.outline.quaternary .chip-icon i.icon-color {
  background-color: var(--swatches-quaternary-default);
}

.chip-container.outline.quaternary .chip-icon svg.icon-color {
  color: var(--swatches-quaternary-default);
}

.chip-container.outline.success {
  border-color: var(--swatches-border-success);
  background-color: transparent;
  color: var(--swatches-on-surface-success);
}

.chip-container.outline.success .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-success);
}

.chip-container.outline.success .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-success);
}

.chip-container.outline.warning {
  border-color: var(--swatches-border-warning);
  background-color: transparent;
  color: var(--swatches-on-surface-warning);
}

.chip-container.outline.warning .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-warning);
}

.chip-container.outline.warning .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-warning);
}

.chip-container.outline.error {
  border-color: var(--swatches-border-error);
  background-color: transparent;
  color: var(--swatches-on-surface-error);
}

.chip-container.outline.error .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-error);
}

.chip-container.outline.error .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-error);
}

.chip-container.outline.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chip-container.filled {
  border-color: var(--swatches-base-active-alt);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-on-surface-base-alt);
}

.chip-container.filled .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-base-alt);
}

.chip-container.filled .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-base-alt);
}

.chip-container.filled.primary {
  border-color: var(--swatches-primary-default);
  background-color: var(--swatches-primary-default);
  color: var(--swatches-on-primary);
}

.chip-container.filled.primary .chip-icon i.icon-color {
  background-color: var(--swatches-on-primary);
}

.chip-container.filled.primary .chip-icon svg.icon-color {
  color: var(--swatches-on-primary);
}

.chip-container.filled.secondary {
  border-color: var(--swatches-secondary-default);
  background-color: var(--swatches-secondary-default);
  color: var(--swatches-on-secondary);
}

.chip-container.filled.secondary .chip-icon i.icon-color {
  background-color: var(--swatches-on-secondary);
}

.chip-container.filled.secondary .chip-icon svg.icon-color {
  color: var(--swatches-on-secondary);
}

.chip-container.filled.tertiary {
  border-color: var(--swatches-tertiary-default);
  background-color: var(--swatches-tertiary-default);
  color: var(--swatches-on-tertiary);
}

.chip-container.filled.tertiary .chip-icon i.icon-color {
  background-color: var(--swatches-on-tertiary);
}

.chip-container.filled.tertiary .chip-icon svg.icon-color {
  color: var(--swatches-on-tertiary);
}

.chip-container.filled.quaternary {
  border-color: var(--swatches-quaternary-default);
  background-color: var(--swatches-quaternary-default);
  color: var(--swatches-on-quaternary);
}

.chip-container.filled.quaternary .chip-icon i.icon-color {
  background-color: var(--swatches-on-quaternary);
}

.chip-container.filled.quaternary .chip-icon svg.icon-color {
  color: var(--swatches-on-quaternary);
}

.chip-container.filled.success {
  border-color: var(--swatches-success-default);
  background-color: var(--swatches-success-default);
  color: var(--swatches-on-success);
}

.chip-container.filled.success .chip-icon i.icon-color {
  background-color: var(--swatches-on-success);
}

.chip-container.filled.success .chip-icon svg.icon-color {
  color: var(--swatches-on-success);
}

.chip-container.filled.warning {
  border-color: var(--swatches-warning-default);
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-warning);
}

.chip-container.filled.warning .chip-icon i.icon-color {
  background-color: var(--swatches-on-warning);
}

.chip-container.filled.warning .chip-icon svg.icon-color {
  color: var(--swatches-on-warning);
}

.chip-container.filled.error {
  border-color: var(--swatches-error-default);
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-error);
}

.chip-container.filled.error .chip-icon i.icon-color {
  background-color: var(--swatches-on-error);
}

.chip-container.filled.error .chip-icon svg.icon-color {
  color: var(--swatches-on-error);
}

.chip-container.filled.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chip-container.accent {
  border-color: var(--swatches-on-surface-base-alt);
  background-color: var(--swatches-on-surface-base-alt);
  color: var(--swatches-on-base);
}

.chip-container.accent .chip-icon i.icon-color {
  background-color: var(--swatches-on-base);
}

.chip-container.accent .chip-icon svg.icon-color {
  color: var(--swatches-on-base);
}

.chip-container.accent.primary {
  border-color: var(--swatches-primary-subtle);
  background-color: var(--swatches-primary-subtle);
  color: var(--swatches-primary-default);
}

.chip-container.accent.primary .chip-icon i.icon-color {
  background-color: var(--swatches-primary-default);
}

.chip-container.accent.primary .chip-icon svg.icon-color {
  color: var(--swatches-primary-default);
}

.chip-container.accent.secondary {
  border-color: var(--swatches-secondary-subtle);
  background-color: var(--swatches-secondary-subtle);
  color: var(--swatches-secondary-default);
}

.chip-container.accent.secondary .chip-icon i.icon-color {
  background-color: var(--swatches-secondary-default);
}

.chip-container.accent.secondary .chip-icon svg.icon-color {
  color: var(--swatches-secondary-default);
}

.chip-container.accent.tertiary {
  border-color: var(--swatches-tertiary-subtle);
  background-color: var(--swatches-tertiary-subtle);
  color: var(--swatches-tertiary-default);
}

.chip-container.accent.tertiary .chip-icon i.icon-color {
  background-color: var(--swatches-tertiary-default);
}

.chip-container.accent.tertiary .chip-icon svg.icon-color {
  color: var(--swatches-tertiary-default);
}

.chip-container.accent.quaternary {
  border-color: var(--swatches-quaternary-subtle);
  background-color: var(--swatches-quaternary-subtle);
  color: var(--swatches-quaternary-default);
}

.chip-container.accent.quaternary .chip-icon i.icon-color {
  background-color: var(--swatches-quaternary-default);
}

.chip-container.accent.quaternary .chip-icon svg.icon-color {
  color: var(--swatches-quaternary-default);
}

.chip-container.accent.success {
  border-color: var(--swatches-success-subtle);
  background-color: var(--swatches-success-subtle);
  color: var(--swatches-success-default);
}

.chip-container.accent.success .chip-icon i.icon-color {
  background-color: var(--swatches-success-default);
}

.chip-container.accent.success .chip-icon svg.icon-color {
  color: var(--swatches-success-default);
}

.chip-container.accent.warning {
  border-color: var(--swatches-warning-subtle);
  background-color: var(--swatches-warning-subtle);
  color: var(--swatches-on-surface-warning);
}

.chip-container.accent.warning .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-warning);
}

.chip-container.accent.warning .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-warning);
}

.chip-container.accent.error {
  border-color: var(--swatches-error-subtle);
  background-color: var(--swatches-error-subtle);
  color: var(--swatches-on-surface-error);
}

.chip-container.accent.error .chip-icon i.icon-color {
  background-color: var(--swatches-on-surface-error);
}

.chip-container.accent.error .chip-icon svg.icon-color {
  color: var(--swatches-on-surface-error);
}

.chip-container.accent.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chip-container .chip-text {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

.chip-container.small {
  height: 20px;
  padding: 0 8px;
  gap: 4px;
}

.chip-container.small .icon {
  width: 12px;
  height: 12px;
}

.chip-container.small .avatar.avatar {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
}

.chip-container.medium {
  height: 24px;
  padding: 0 8px;
  gap: 6px;
}

.chip-container.medium .icon {
  width: 16px;
  height: 16px;
}

.chip-container.medium .avatar.avatar {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

.chip-container.large {
  height: 32px;
  padding: 0 8px;
  gap: 8px;
}

.chip-container.large .icon {
  width: 20px;
  height: 20px;
}

.chip-container.large .avatar.avatar {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.cover-details {
  background-color: var(--swatches-background);
  padding: 32px 16px 32px 16px;
  border-radius: 8px;
  border: 1px solid var(--swatches-border);
  display: flex;
}

.cover-details .avatar {
  flex-shrink: 0;
  margin: 16px;
}

.cover-details .cover-details-container {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  gap: 24px;
  display: flex;
  flex-direction: column;
}

.cover-details .cover-details-container .cover-details-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.cover-details .cover-details-container .cover-details-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cover-details .cover-details-container .cover-details-content {
  width: 100%;
  height: auto;
}

.cover-details .cover-details-container .cover-details-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 78px;
  align-self: stretch;
  font-family: var(--font-body);
  border-radius: 8px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-weight: 400;
  line-height: 130%;
}

.cover-details.cover-details-vertical {
  flex-direction: column;
}

.cover-details.cover-details-vertical .cover-details-container {
  width: auto;
}

.cover-details.cover-details-vertical .cover-details-info {
  margin-top: 20px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.d-rel {
  position: relative;
}

.d-block {
  display: inline-block;
}

.dot-pos {
  position: absolute;
  bottom: 7.5px;
  right: 7.5px;
  transform: translate(50%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 1000px;
}

.dot.primary {
  background-color: var(--swatches-primary-hover);
}

.dot.secondary {
  background-color: var(--swatches-brand-secondary);
}

.dot.tertiary {
  background-color: var(--swatches-brand-tertiary);
}

.dot.quaternary {
  background-color: var(--swatches-brand-quaternary);
}

.dot.success {
  background-color: var(--swatches-success-hover);
}

.dot.warning {
  background-color: var(--swatches-warning-hover);
}

.dot.error {
  background-color: var(--swatches-error-hover);
}

.dot.base {
  background-color: var(--swatches-base-hover-alt);
}

.dot > i.icon,
.dot > svg.icon {
  line-height: 1;
  display: inline-block;
}

.dot > i.icon {
  color: var(--swatches-on-primary);
  background-color: var(--swatches-on-primary);
}

.dot > svg.icon {
  color: var(--swatches-on-primary);
}

.dot.small {
  width: 8px;
  height: 8px;
  padding: 1px;
}

.dot.small > i,
.dot.small > svg.icon {
  width: 6.5px;
  height: 6.5px;
}

.dot.medium {
  width: 16px;
  height: 16px;
  padding: 3px;
}

.dot.medium > i,
.dot.medium > svg.icon {
  width: 12px;
  height: 12px;
}

.dot.large {
  width: 24px;
  height: 24px;
  padding: 4px;
}

.dot.large > i,
.dot.large > svg.icon {
  width: 18px;
  height: 18px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.drawer-example {
  background-color: var(--swatches-surface);
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 1021;
  text-align: left;
  border: 1px solid #000;
  font-family: var(--font-body);
}

.drawer-example > i.icon {
  background-color: var(--swatches-base-selected-alt);
}

.drawer-example > svg.icon {
  color: var(--swatches-base-selected-alt);
}

.drawer {
  position: fixed;
  background-color: var(--swatches-surface);
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 1021;
  text-align: left;
  border: 1px solid var(--swatches-border);
  overflow-y: scroll;
  padding: 24px;
  gap: 24px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  box-sizing: border-box;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer {
    padding: 16px;
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer {
    padding: 20px;
    gap: 20px;
  }
}

.drawer.drawer-shadow {
  box-shadow: none;
}

.drawer-center.size-full, .drawer-left.size-full, .drawer-right.size-full {
  width: 100% !important;
}

.drawer-center.size-1000, .drawer-left.size-1000, .drawer-right.size-1000 {
  width: 1000px !important;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer-center.size-1000, .drawer-left.size-1000, .drawer-right.size-1000 {
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer-center.size-1000, .drawer-left.size-1000, .drawer-right.size-1000 {
    width: 100% !important;
  }
}

.drawer-center.size-720, .drawer-left.size-720, .drawer-right.size-720 {
  width: 720px !important;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer-center.size-720, .drawer-left.size-720, .drawer-right.size-720 {
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer-center.size-720, .drawer-left.size-720, .drawer-right.size-720 {
    width: 100% !important;
  }
}

.drawer-center.size-480, .drawer-left.size-480, .drawer-right.size-480 {
  width: 480px !important;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer-center.size-480, .drawer-left.size-480, .drawer-right.size-480 {
    width: 100% !important;
  }
}

@media (max-width: 359px) {
  .drawer-center.size-480, .drawer-left.size-480, .drawer-right.size-480 {
    width: 100% !important;
  }
}

.drawer-top.size-full, .drawer-bottom.size-full {
  height: 100vh !important;
  max-height: none !important;
}

.drawer-top.size-1000, .drawer-bottom.size-1000 {
  max-height: 1000px !important;
}

.drawer-top.size-720, .drawer-bottom.size-720 {
  max-height: 720px !important;
}

.drawer-top.size-480, .drawer-bottom.size-480 {
  max-height: 480px !important;
}

.drawer > i.icon {
  background-color: var(--swatches-base-selected-alt);
}

.drawer > svg.icon {
  color: var(--swatches-base-selected-alt);
}

.drawer-left {
  height: 100vh;
  top: 0;
  transform: translateX(-100%);
  left: 0;
  border-top: none;
  border-left: none;
  border-bottom: none;
}

.drawer-top {
  width: 100%;
  height: 100%;
  max-height: 500px;
  transform: translateY(-100%);
  top: 0;
  left: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}

.drawer-right {
  height: 100vh;
  top: 0;
  transform: translateX(100%);
  right: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
}

.drawer-bottom {
  width: 100%;
  height: 100%;
  max-height: 500px;
  transform: translateY(100%);
  left: 0;
  bottom: 0;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

.drawer-center {
  max-height: 100%;
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.drawer-mobile-bottom {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: auto !important;
  max-height: 85vh !important;
}

.drawer-mobile-top {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  height: auto !important;
  max-height: 85vh !important;
}

.drawer-close {
  background: none;
  border: none;
  cursor: pointer;
}

.drawer-scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--swatches-drawer-transparency);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 1020;
  cursor: pointer;
}

.drawer-scrim.drawer-scrim-visible {
  opacity: 1;
  pointer-events: auto;
}

.drawer .drawer-handle {
  display: flex;
  justify-content: center;
  margin: -8px 0;
  cursor: grab;
}

.drawer .drawer-handle:active {
  cursor: grabbing;
}

.drawer .drawer-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--swatches-border);
}

.drawer .drawer-header {
  display: flex;
  padding: 0;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 100%;
}

.drawer .drawer-header .header-infos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer .drawer-header .header-infos {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer .drawer-header .header-infos {
    gap: 8px;
  }
}

.drawer .drawer-header .header-infos .icon {
  width: 32px;
  height: 32px;
}

.drawer .drawer-header .header-infos .title {
  color: var(--swatches-on-surface-base);
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 800;
}

.drawer .drawer-header .header-infos .title.title-left {
  text-align: left;
}

.drawer .drawer-header .header-infos .title.title-center {
  text-align: center;
}

.drawer .drawer-header .header-infos .title.title-right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer .drawer-header .header-infos .title {
    font-size: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer .drawer-header .header-infos .title {
    font-size: 20px;
  }
}

.drawer .drawer-body {
  display: flex;
  flex-direction: column;
}

.drawer .drawer-body.drawer-body-flush {
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: -24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer .drawer-body.drawer-body-flush {
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: -16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer .drawer-body.drawer-body-flush {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
  }
}

.drawer .drawer-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--swatches-border);
  cursor: pointer;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--swatches-on-surface-base);
  box-sizing: border-box;
  text-align: left;
}

@media (min-width: 360px) and (max-width: 767px) {
  .drawer .drawer-action {
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .drawer .drawer-action {
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
  }
}

.drawer .drawer-action:last-child {
  border-bottom: none;
}

.drawer .drawer-action:hover {
  background-color: var(--swatches-base-hover);
}

.drawer .drawer-action:active {
  background-color: var(--swatches-base-active);
}

.drawer .drawer-action.danger {
  color: var(--swatches-error-active);
}

.drawer .drawer-action .icon {
  width: 24px;
  height: 24px;
}

.drawer.drawer-visible.drawer-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.drawer.drawer-visible.drawer-left {
  transform: translateX(0);
}

.drawer.drawer-visible.drawer-right {
  transform: translateX(0);
}

.drawer.drawer-visible.drawer-top {
  transform: translateY(0);
}

.drawer.drawer-visible.drawer-bottom {
  transform: translateY(0);
}

.drawer.drawer-visible.drawer-center {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.drawer.drawer-visible ~ .drawer-scrim.drawer-scrim-visible {
  opacity: 1;
  visibility: visible;
}

.drawer img {
  width: 100%;
}

@keyframes comeFromCenter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.drawer-trigger {
  padding: 12px 24px;
  background-color: var(--swatches-primary-active);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.drawer-trigger:hover {
  background-color: var(--swatches-primary-active);
}

.drawer-trigger:active {
  background-color: var(--swatches-primary-active);
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.dropdown {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  width: 100%;
  background-color: var(--swatches-base-default);
}

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

.dropdown.active {
  background-color: var(--swatches-base-active);
}

.dropdown.small {
  min-height: 44px;
  max-height: 44px;
}

.dropdown.small .dropdown-pretab {
  font-size: 14px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dropdown.small .dropdown-pretab {
    font-size: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .dropdown.small .dropdown-pretab {
    font-size: 12px;
  }
}

.dropdown.medium {
  min-height: 48px;
  max-height: 48px;
}

.dropdown.medium .dropdown-pretab {
  font-size: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dropdown.medium .dropdown-pretab {
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .dropdown.medium .dropdown-pretab {
    font-size: 14px;
  }
}

.dropdown.large {
  min-height: 56px;
  max-height: 56px;
}

.dropdown.large .dropdown-pretab {
  font-size: 18px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .dropdown.large .dropdown-pretab {
    font-size: 16px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .dropdown.large .dropdown-pretab {
    font-size: 16px;
  }
}

.dropdown .dropdown-pretab {
  display: flex;
  min-width: 44px;
  max-width: 120px;
  padding: 0 10px;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  justify-content: center;
  border: 1px solid var(--swatches-border-base-alt);
  background-color: var(--swatches-border-base-alt);
  box-sizing: border-box;
}

.dropdown .dropdown-pretab i.icon,
.dropdown .dropdown-pretab svg.icon {
  width: 24px;
  height: 24px;
}

.dropdown .dropdown-pretab i.flag {
  width: 24px;
  height: 24px;
}

.dropdown .dropdown-shortcut {
  width: 24px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  border: 1px solid var(--swatches-border-base-alt);
  background-color: var(--swatches-border-base-alt);
  box-sizing: border-box;
}

.dropdown .dropdown-shortcut p {
  margin: 0;
}

.dropdown .dropdown-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdown .dropdown-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown .dropdown-group {
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
  box-sizing: border-box;
  margin-inline: auto;
  width: 100%;
  min-height: calc(100vh - 240px);
}

.empty-state .empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.empty-state .empty-state-content .empty-state-icon {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--swatches-surface-alt);
}

.empty-state .empty-state-content .empty-state-icon.radius-pill {
  border-radius: 1000px;
}

.empty-state .empty-state-content .empty-state-icon.radius-round {
  border-radius: 8px;
}

.empty-state .empty-state-content .empty-state-icon > i.icon,
.empty-state .empty-state-content .empty-state-icon > svg.icon {
  width: 40px;
  height: 40px;
}

.empty-state .empty-state-content .empty-state-icon > i.icon {
  background-color: var(--swatches-on-base);
}

.empty-state .empty-state-content .empty-state-icon > svg.icon {
  color: var(--swatches-on-base);
}

.empty-state .empty-state-content .title {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  line-height: 120%;
  margin: 0;
}

.empty-state .empty-state-content .description {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  margin: 0;
}

.empty-state .empty-state-content .empty-state-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  gap: 16px;
  padding-top: 0;
}

.empty-state .empty-state-content .empty-state-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .empty-state .empty-state-content {
    width: 664px;
  }
  .empty-state .empty-state-content .empty-state-content {
    width: 520px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .empty-state .empty-state-content {
    width: 360px;
    margin-inline: auto;
  }
  .empty-state .empty-state-content .empty-state-content {
    width: 296px;
  }
  .empty-state .empty-state-content .empty-state-actions {
    display: flex;
    width: 296px;
    padding-top: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  .empty-state .empty-state-content .empty-state-actions > .btn {
    width: 100%;
  }
  .empty-state .empty-state-content .empty-state-link {
    display: flex;
    width: 296px;
    justify-content: center;
    padding-top: 16px;
  }
}

.empty-state.is-mobile-demo {
  width: 360px;
  margin-inline: auto;
}

.empty-state.is-mobile-demo .empty-state-content {
  width: 296px;
}

.empty-state.is-mobile-demo .empty-state-actions {
  display: flex;
  width: 296px;
  padding-top: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.empty-state.is-mobile-demo .empty-state-actions > .btn {
  width: 100%;
}

.empty-state.is-mobile-demo .empty-state-link {
  display: flex;
  width: 296px;
  justify-content: center;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.file-upload {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--swatches-border);
  background: var(--swatches-background);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload {
    border-radius: 4px;
  }
}

.file-upload i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-surface-base);
  flex-shrink: 0;
}

.file-upload svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-surface-base);
  flex-shrink: 0;
}

.file-upload .archive-infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  font-family: var(--font-body);
}

.file-upload .archive-infos .archive-name {
  color: var(--swatches-on-surface-base);
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 0;
  margin-top: 0;
}

.file-upload .archive-infos .archive-progress {
  color: var(--swatches-on-base);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  margin-bottom: 0;
  margin-top: 0;
}

.file-upload .archive-infos .progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.file-upload .archive-infos .progress-row > .progress-track {
  flex: 1 1 auto;
}

.file-upload .archive-infos .progress-row > .progress-label {
  margin: 0;
  white-space: nowrap;
}

.file-upload .archive-infos .progress-row .progress-bar {
  width: 100%;
  background-color: var(--swatches-base-default);
  overflow: hidden;
}

.file-upload .archive-infos .progress-row .progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-base);
}

.file-upload .badge .badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.file-upload.primary {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.file-upload.primary i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-primary-default);
  flex-shrink: 0;
}

.file-upload.primary svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-primary-default);
  flex-shrink: 0;
}

.file-upload.primary .archive-infos .progress-bar {
  background-color: var(--swatches-background);
  overflow: hidden;
}

.file-upload.primary .archive-infos .progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-surface-primary);
}

.file-upload.success {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.file-upload.success i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-surface-success);
  flex-shrink: 0;
}

.file-upload.success svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-surface-success);
  flex-shrink: 0;
}

.file-upload.success .archive-infos .archive-progress {
  color: var(--swatches-on-surface-success);
}

.file-upload.success .archive-infos .progress-bar {
  background-color: var(--swatches-background);
  overflow: hidden;
}

.file-upload.success .archive-infos .progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-surface-success);
}

.file-upload.warning {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.file-upload.warning i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-surface-warning);
  flex-shrink: 0;
}

.file-upload.warning svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-surface-warning);
  flex-shrink: 0;
}

.file-upload.warning .archive-infos .progress-bar {
  background-color: var(--swatches-background);
  overflow: hidden;
}

.file-upload.warning .archive-infos .progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-surface-warning);
}

.file-upload.error {
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.file-upload.error i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-surface-error);
  flex-shrink: 0;
}

.file-upload.error svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-surface-error);
  flex-shrink: 0;
}

.file-upload.error .archive-infos .archive-progress {
  color: var(--swatches-on-surface-error);
}

.file-upload.error .archive-infos .progress-bar {
  background-color: var(--swatches-background);
  overflow: hidden;
}

.file-upload.error .archive-infos .progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-surface-error);
}

.file-upload.small {
  padding: 16px;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.small {
    padding: 8px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.small {
    padding: 12px;
    gap: 8px;
  }
}

.file-upload.small i.icon,
.file-upload.small svg.icon {
  width: 32px;
  height: 32px;
}

.file-upload.small .archive-infos .archive-name {
  font-size: 12px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.small .archive-infos .archive-name {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.small .archive-infos .archive-name {
    font-size: 10px;
  }
}

.file-upload.small .archive-infos .archive-progress {
  font-size: 12px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.small .archive-infos .archive-progress {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.small .archive-infos .archive-progress {
    font-size: 10px;
  }
}

.file-upload.small .archive-infos .progress-bar {
  height: 2px;
}

.file-upload.small .toggle .form-toggle .input {
  width: 30px;
  height: 16px;
}

.file-upload.small .toggle .form-toggle .input::before {
  width: 12px;
  height: 12px;
}

.file-upload.small .badge {
  width: 32px;
  height: 32px;
  gap: 6px;
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.small .badge {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.small .badge {
    font-size: 12px;
  }
}

.file-upload.small .badge i.icon,
.file-upload.small .badge svg.icon {
  width: 11.67px;
  height: 11.67px;
}

.file-upload.small .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.file-upload.small .btn > i.icon,
.file-upload.small .btn > svg.icon {
  width: 12px;
  height: 12px;
}

.file-upload.small .btn > i.flag {
  width: 10px;
  height: 10px;
}

.file-upload.small .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.file-upload.medium {
  padding: 24px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.medium {
    padding: 16px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.medium {
    padding: 20px;
    gap: 12px;
  }
}

.file-upload.medium i.icon,
.file-upload.medium svg.icon {
  width: 40px;
  height: 40px;
}

.file-upload.medium .archive-infos .archive-name {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.medium .archive-infos .archive-name {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.medium .archive-infos .archive-name {
    font-size: 12px;
  }
}

.file-upload.medium .archive-infos .archive-progress {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.medium .archive-infos .archive-progress {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.medium .archive-infos .archive-progress {
    font-size: 12px;
  }
}

.file-upload.medium .archive-infos .progress-bar {
  height: 4px;
}

.file-upload.medium .toggle .form-toggle .input {
  width: 34px;
  height: 20px;
}

.file-upload.medium .toggle .form-toggle .input::before {
  inset: 1px auto 2px 2px;
  transform: none;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  transition: left 0.3s ease, right 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.file-upload.medium .toggle .form-toggle .input:checked::before,
.file-upload.medium .toggle .form-toggle .input:checked::after {
  left: auto;
  right: 2px;
}

.file-upload.medium .badge {
  width: 40px;
  height: 40px;
  gap: 8px;
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.medium .badge {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.medium .badge {
    font-size: 14px;
  }
}

.file-upload.medium .badge i.icon,
.file-upload.medium .badge svg.icon {
  width: 16.67px;
  height: 16.67px;
}

.file-upload.medium .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.file-upload.medium .btn > i.icon,
.file-upload.medium .btn > svg.icon {
  width: 17px;
  height: 17px;
}

.file-upload.medium .btn > i.flag {
  width: 20px;
  height: 20px;
}

.file-upload.medium .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.file-upload.large {
  padding: 32px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.large {
    padding: 20px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.large {
    padding: 24px;
    gap: 12px;
  }
}

.file-upload.large i.icon,
.file-upload.large svg.icon {
  width: 48px;
  height: 48px;
}

.file-upload.large .archive-infos .archive-name {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.large .archive-infos .archive-name {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.large .archive-infos .archive-name {
    font-size: 14px;
  }
}

.file-upload.large .archive-infos .archive-progress {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.large .archive-infos .archive-progress {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.large .archive-infos .archive-progress {
    font-size: 14px;
  }
}

.file-upload.large .archive-infos .progress-bar {
  height: 4px;
}

.file-upload.large .toggle .form-toggle .input {
  width: 46px;
  height: 24px;
}

.file-upload.large .toggle .form-toggle .input::before {
  width: 20px;
  height: 20px;
}

.file-upload.large .badge {
  width: 48px;
  height: 48px;
  gap: 10px;
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .file-upload.large .badge {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .file-upload.large .badge {
    font-size: 16px;
  }
}

.file-upload.large .badge i.icon,
.file-upload.large .badge svg.icon {
  width: 20px;
  height: 20px;
}

.file-upload.large .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.file-upload.large .btn > i.icon,
.file-upload.large .btn > svg.icon {
  width: 20px;
  height: 20px;
}

.file-upload.large .btn > i.flag {
  width: 24px;
  height: 24px;
}

.file-upload.large .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  overflow: hidden;
}

.footer.base {
  background-color: var(--swatches-surface);
  color: var(--swatches-on-surface-neutral);
}

.footer.base .footer-logo .logo.logo-dark {
  background-image: var(--logo-dark);
}

.footer.base .footer-logo .logo.logo-light {
  background-image: var(--logo-light);
}

.footer.base .footer-copyright {
  color: var(--swatches-on-surface-neutral);
}

.footer.base .footer-social-icon {
  background-color: var(--swatches-on-surface-neutral);
  color: var(--swatches-on-surface-neutral);
}

.footer.base .footer-social-icon:hover {
  background-color: var(--swatches-primary-hover);
  color: var(--swatches-primary-hover);
}

.footer.base svg.footer-social-icon {
  background-color: transparent;
}

.footer.primary {
  background-color: var(--swatches-primary-default);
  color: var(--swatches-on-primary);
}

.footer.primary .footer-logo .logo {
  background-image: var(--logo-light);
}

.footer.primary .footer-copyright {
  color: var(--swatches-on-primary);
}

.footer.primary .footer-social-icon {
  background-color: var(--swatches-on-primary);
  color: var(--swatches-on-primary);
}

.footer.primary .footer-social-icon:hover {
  background-color: var(--swatches-base-default);
  color: var(--swatches-base-default);
  opacity: 0.8;
}

.footer.primary svg.footer-social-icon {
  background-color: transparent;
}

.footer.sitemap .footer-content {
  display: flex;
  flex-direction: column;
  padding: 48px 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-content {
    padding: 40px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-content {
    padding: 32px;
  }
}

.footer.sitemap .footer-main {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-main {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-main {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
}

.footer.sitemap .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-brand {
    gap: 20px;
    width: 100%;
    order: 1;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-brand {
    gap: 16px;
    width: 100%;
    order: 1;
  }
}

.footer.sitemap .footer-links-section {
  display: flex;
  gap: 40px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-links-section {
    gap: 20px;
    width: 100%;
    order: 2;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-links-section {
    flex-direction: column;
    gap: 16px;
    width: 100%;
    order: 2;
  }
}

.footer.sitemap .footer-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 120px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-column {
    gap: 8px;
    min-width: auto;
    width: 100%;
    padding-bottom: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-column {
    gap: 8px;
    min-width: auto;
    width: 100%;
    padding-bottom: 8px;
  }
  .footer.sitemap .footer-column:last-child {
    padding-bottom: 0;
  }
}

.footer.sitemap .footer-link {
  text-decoration: none;
  font-size: 16px;
  line-height: 130%;
  transition: color 0.2s ease;
  cursor: pointer;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-link {
    font-size: 14px;
    padding: 4px 0;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-link {
    font-size: 14px;
    padding: 4px 0;
  }
}

.footer.sitemap .footer-social {
  display: flex;
  gap: 16px;
  align-items: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.sitemap .footer-social {
    gap: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-social {
    gap: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.sitemap .footer-brand .footer-social {
    order: 3;
  }
}

.footer.master .footer-content {
  display: flex;
  align-items: center;
  padding: 24px 48px;
  width: 100%;
  min-height: 48px;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.master .footer-content {
    padding: 20px 40px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.master .footer-content {
    padding: 16px 32px;
    flex-wrap: wrap;
    align-items: center;
  }
}

.footer.master .footer-logo {
  flex-shrink: 0;
}

.footer.master .footer-logo .logo {
  width: 160px;
  height: 30px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.master .footer-logo {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }
}

.footer.master .footer-copyright {
  flex: 1;
  text-align: center;
  overflow-wrap: break-word;
  font-size: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.master .footer-copyright {
    font-size: 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.master .footer-copyright {
    font-size: 12px;
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    justify-content: flex-start;
    display: flex;
    text-align: left;
    margin: 8px 0 0 0;
  }
}

.footer.master .footer-social {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer.master .footer-social {
    gap: 8px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer.master .footer-social {
    gap: 8px;
    order: 2;
    width: 100%;
    justify-content: flex-start;
    display: flex;
    margin: 8px 0 0 0;
  }
}

.footer.master.footer-single-element .footer-content {
  justify-content: center;
}

.footer.master.footer-two-elements .footer-content {
  justify-content: space-between;
}

.footer.master.footer-two-elements .footer-content .footer-copyright {
  text-align: left;
}

.footer.master.footer-only-copyright .footer-content {
  justify-content: center;
}

.footer.master.footer-no-social .footer-content {
  justify-content: flex-start;
}

.footer.master.footer-no-social .footer-content .footer-copyright {
  text-align: right;
  margin-left: auto;
}

.footer.master.footer-no-logo .footer-content {
  justify-content: flex-end;
}

.footer.master.footer-no-logo .footer-content .footer-copyright {
  text-align: left;
  margin-right: auto;
}

.footer .footer-logo .logo {
  width: 214px;
  height: 40px;
}

.footer .footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
}

.footer .footer-copyright {
  font-size: 16px;
  line-height: 130%;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer .footer-copyright {
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer .footer-copyright {
    font-size: 14px;
  }
}

.footer .footer-description {
  font-size: 16px;
  line-height: 130%;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer .footer-description {
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .footer .footer-description {
    font-size: 14px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.forms {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 100%;
}

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

.forms .form-content {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 24px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.forms .form-content.form-background {
  background-color: var(--swatches-surface);
  border: 1px solid var(--swatches-border);
  border-radius: 8px;
}

.forms .form-content .form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forms .form-content .form-columns {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.forms .form-content .form-columns .form-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.forms .form-content .form-columns .form-column .form-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.forms .form-content .form-columns .form-column.double .form-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.forms .form-content .form-columns .form-column.double .form-inputs .form-group {
  display: block;
}

.forms .form-content .form-columns .form-column.only-input .form-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.forms .form-content .form-columns .form-column.only-input .form-inputs .form-group {
  width: 100%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .forms {
    flex-direction: column;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -7.5px;
  margin-left: -7.5px;
}

.row > * {
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.row--gap-0 {
  gap: 0px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-0 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-0 > * > * {
  margin: 0 !important;
}

.row--gap-4 {
  gap: 4px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-4 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-4 > * > * {
  margin: 0 !important;
}

.row--gap-8 {
  gap: 8px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-8 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-8 > * > * {
  margin: 0 !important;
}

.row--gap-12 {
  gap: 12px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-12 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-12 > * > * {
  margin: 0 !important;
}

.row--gap-16 {
  gap: 16px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-16 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-16 > * > * {
  margin: 0 !important;
}

.row--gap-20 {
  gap: 20px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-20 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-20 > * > * {
  margin: 0 !important;
}

.row--gap-24 {
  gap: 24px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-24 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-24 > * > * {
  margin: 0 !important;
}

.row--gap-32 {
  gap: 32px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.row--gap-32 > * {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.row--gap-32 > * > * {
  margin: 0 !important;
}

.col-sm,
.col-md,
.col-lg,
.col-xl {
  padding-right: 7.5px;
  padding-left: 7.5px;
}

.container {
  width: 100%;
  max-width: 100%;
  padding-right: 7.5px;
  padding-left: 7.5px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

@media (min-width: 360px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1140px;
  }
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33%;
}

.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xl-1 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-1 > *,
.col-md-1 > *,
.col-lg-1 > *,
.col-xl-1 > * {
  margin: 0 7.5px;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66%;
}

.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xl-2 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-2 > *,
.col-md-2 > *,
.col-lg-2 > *,
.col-xl-2 > * {
  margin: 0 7.5px;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xl-3 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-3 > *,
.col-md-3 > *,
.col-lg-3 > *,
.col-xl-3 > * {
  margin: 0 7.5px;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33%;
}

.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xl-4 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-4 > *,
.col-md-4 > *,
.col-lg-4 > *,
.col-xl-4 > * {
  margin: 0 7.5px;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66%;
}

.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xl-5 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-5 > *,
.col-md-5 > *,
.col-lg-5 > *,
.col-xl-5 > * {
  margin: 0 7.5px;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xl-6 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-6 > *,
.col-md-6 > *,
.col-lg-6 > *,
.col-xl-6 > * {
  margin: 0 7.5px;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33%;
}

.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xl-7 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-7 > *,
.col-md-7 > *,
.col-lg-7 > *,
.col-xl-7 > * {
  margin: 0 7.5px;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66%;
}

.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xl-8 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-8 > *,
.col-md-8 > *,
.col-lg-8 > *,
.col-xl-8 > * {
  margin: 0 7.5px;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xl-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-9 > *,
.col-md-9 > *,
.col-lg-9 > *,
.col-xl-9 > * {
  margin: 0 7.5px;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33%;
}

.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xl-10 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-10 > *,
.col-md-10 > *,
.col-lg-10 > *,
.col-xl-10 > * {
  margin: 0 7.5px;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66%;
}

.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xl-11 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-11 > *,
.col-md-11 > *,
.col-lg-11 > *,
.col-xl-11 > * {
  margin: 0 7.5px;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.col-sm-12,
.col-md-12,
.col-lg-12,
.col-xl-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-12 > *,
.col-md-12 > *,
.col-lg-12 > *,
.col-xl-12 > * {
  margin: 0 7.5px;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col--align-left {
  display: flex;
  justify-content: flex-start;
}

.col--align-center {
  display: flex;
  justify-content: center;
}

.col--align-right {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 360px) {
  .col-sm-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }
  .col-sm-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  .col-sm-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }
  .col-sm-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }
  .col-sm-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-offset-1 {
    margin-left: 8.33%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66%;
  }
  .col-sm-order-0 {
    order: 0;
  }
  .col-sm-order-1 {
    order: 1;
  }
  .col-sm-order-2 {
    order: 2;
  }
  .col-sm-order-3 {
    order: 3;
  }
  .col-sm-order-4 {
    order: 4;
  }
  .col-sm-order-5 {
    order: 5;
  }
  .col-sm-order-6 {
    order: 6;
  }
  .col-sm-order-7 {
    order: 7;
  }
  .col-sm-order-8 {
    order: 8;
  }
  .col-sm-order-9 {
    order: 9;
  }
  .col-sm-order-10 {
    order: 10;
  }
  .col-sm-order-11 {
    order: 11;
  }
  .col-sm-order-12 {
    order: 12;
  }
  .col-sm-order-first {
    order: -1;
  }
  .col-sm-order-last {
    order: 13;
  }
}

@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }
  .col-md-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  .col-md-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }
  .col-md-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }
  .col-md-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-offset-1 {
    margin-left: 8.33%;
  }
  .col-md-offset-2 {
    margin-left: 16.66%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.33%;
  }
  .col-md-offset-5 {
    margin-left: 41.66%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.33%;
  }
  .col-md-offset-8 {
    margin-left: 66.66%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.33%;
  }
  .col-md-offset-11 {
    margin-left: 91.66%;
  }
  .col-md-order-0 {
    order: 0;
  }
  .col-md-order-1 {
    order: 1;
  }
  .col-md-order-2 {
    order: 2;
  }
  .col-md-order-3 {
    order: 3;
  }
  .col-md-order-4 {
    order: 4;
  }
  .col-md-order-5 {
    order: 5;
  }
  .col-md-order-6 {
    order: 6;
  }
  .col-md-order-7 {
    order: 7;
  }
  .col-md-order-8 {
    order: 8;
  }
  .col-md-order-9 {
    order: 9;
  }
  .col-md-order-10 {
    order: 10;
  }
  .col-md-order-11 {
    order: 11;
  }
  .col-md-order-12 {
    order: 12;
  }
  .col-md-order-first {
    order: -1;
  }
  .col-md-order-last {
    order: 13;
  }
}

@media (min-width: 1024px) {
  .col-lg-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }
  .col-lg-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  .col-lg-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }
  .col-lg-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }
  .col-lg-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-offset-1 {
    margin-left: 8.33%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66%;
  }
  .col-lg-order-0 {
    order: 0;
  }
  .col-lg-order-1 {
    order: 1;
  }
  .col-lg-order-2 {
    order: 2;
  }
  .col-lg-order-3 {
    order: 3;
  }
  .col-lg-order-4 {
    order: 4;
  }
  .col-lg-order-5 {
    order: 5;
  }
  .col-lg-order-6 {
    order: 6;
  }
  .col-lg-order-7 {
    order: 7;
  }
  .col-lg-order-8 {
    order: 8;
  }
  .col-lg-order-9 {
    order: 9;
  }
  .col-lg-order-10 {
    order: 10;
  }
  .col-lg-order-11 {
    order: 11;
  }
  .col-lg-order-12 {
    order: 12;
  }
  .col-lg-order-first {
    order: -1;
  }
  .col-lg-order-last {
    order: 13;
  }
}

@media (min-width: 1440px) {
  .col-xl-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }
  .col-xl-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  .col-xl-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }
  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }
  .col-xl-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }
  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }
  .col-xl-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-offset-1 {
    margin-left: 8.33%;
  }
  .col-xl-offset-2 {
    margin-left: 16.66%;
  }
  .col-xl-offset-3 {
    margin-left: 25%;
  }
  .col-xl-offset-4 {
    margin-left: 33.33%;
  }
  .col-xl-offset-5 {
    margin-left: 41.66%;
  }
  .col-xl-offset-6 {
    margin-left: 50%;
  }
  .col-xl-offset-7 {
    margin-left: 58.33%;
  }
  .col-xl-offset-8 {
    margin-left: 66.66%;
  }
  .col-xl-offset-9 {
    margin-left: 75%;
  }
  .col-xl-offset-10 {
    margin-left: 83.33%;
  }
  .col-xl-offset-11 {
    margin-left: 91.66%;
  }
  .col-xl-order-0 {
    order: 0;
  }
  .col-xl-order-1 {
    order: 1;
  }
  .col-xl-order-2 {
    order: 2;
  }
  .col-xl-order-3 {
    order: 3;
  }
  .col-xl-order-4 {
    order: 4;
  }
  .col-xl-order-5 {
    order: 5;
  }
  .col-xl-order-6 {
    order: 6;
  }
  .col-xl-order-7 {
    order: 7;
  }
  .col-xl-order-8 {
    order: 8;
  }
  .col-xl-order-9 {
    order: 9;
  }
  .col-xl-order-10 {
    order: 10;
  }
  .col-xl-order-11 {
    order: 11;
  }
  .col-xl-order-12 {
    order: 12;
  }
  .col-xl-order-first {
    order: -1;
  }
  .col-xl-order-last {
    order: 13;
  }
}

.container-fluid {
  width: 100%;
  padding-right: 7.5px;
  padding-left: 7.5px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.header {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  overscroll-behavior: contain;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header .header-top {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--swatches-border);
  background-color: var(--swatches-surface);
  color: var(--swatches-on-base);
}

.header .header-top .header-left {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.header .header-top .header-left .menu-icon {
  display: flex;
  align-items: center;
}

.header .header-top .header-left .separator {
  width: 1px;
  height: 20px;
  background-color: var(--swatches-border);
}

.header .header-top .header-left .section-title {
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.header .header-top .header-left .header-links {
  display: flex;
}

.header .header-top .header-center {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.header .header-top .header-center > div {
  flex: 1;
}

.header .header-top .header-center .form-group .form-control {
  border-radius: 8px;
}

.header .header-top .header-center .form-group .form-control.pill {
  border-radius: 1000px;
}

.header .header-top .header-center .placeholder-box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.header .header-top .header-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.header .header-top .header-right .menu-icon {
  display: flex;
  align-items: center;
}

.header .header-top .header-right .user-profile {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  color: var(--swatches-on-base);
}

.header .header-top .header-right .user-profile .user-info {
  display: flex;
  flex-direction: column;
}

.header .header-top .header-right .user-profile .user-info .user-name {
  font-weight: 600;
}

.header .header-top .header-right .user-profile .user-info .user-doc {
  font-weight: 400;
}

.header .header-top .header-right .user-profile i.icon {
  background-color: var(--swatches-on-base);
}

.header .header-top .header-right .user-profile svg.icon {
  color: var(--swatches-on-base);
}

.header .header-top .header-right .header-links {
  display: flex;
}

.header .header-top.transparent {
  background-color: var(--swatches-transparent);
  border-bottom: none;
}

.header .header-top.primary {
  background-color: var(--swatches-primary-default);
  border-bottom: 1px solid var(--swatches-primary-hover);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-left .logo {
  background-image: var(--logo-light);
}

.header .header-top.primary .header-left .section-title {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .user-profile {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .user-profile i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .user-profile svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.primary .header-right .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary {
  background-color: var(--swatches-secondary-default);
  border-bottom: 1px solid var(--swatches-secondary-hover);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-left .logo {
  background-image: var(--logo-light);
}

.header .header-top.secondary .header-left .section-title {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .user-profile {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .user-profile i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .user-profile svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.secondary .header-right .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary {
  background-color: var(--swatches-tertiary-default);
  border-bottom: 1px solid var(--swatches-tertiary-hover);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-left .logo {
  background-image: var(--logo-light);
}

.header .header-top.tertiary .header-left .section-title {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .user-profile {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .user-profile i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .user-profile svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-top.tertiary .header-right .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  background-color: var(--swatches-background);
  color: var(--swatches-on-base);
}

.header .header-bottom > i.icon {
  background-color: var(--swatches-on-base);
}

.header .header-bottom > svg.icon {
  color: var(--swatches-on-base);
}

.header .header-bottom.primary {
  background-color: var(--swatches-primary-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.primary > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.primary > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.secondary {
  background-color: var(--swatches-secondary-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.secondary > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.secondary > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.tertiary {
  background-color: var(--swatches-tertiary-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.tertiary > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.tertiary > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.quaternary {
  background-color: var(--swatches-quaternary-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.quaternary > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.quaternary > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.success {
  background-color: var(--swatches-success-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.success > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.success > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.error {
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.error > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.error > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.warning {
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-surface-invert);
}

.header .header-bottom.warning > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header .header-bottom.warning > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top {
  background-color: var(--swatches-surface-invert);
  color: var(--swatches-on-surface-invert);
  border-bottom: 1px solid var(--swatches-surface-invert);
}

.header.invert .header-top .header-left .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .logo {
  background-image: var(--logo-light);
}

.header.invert .header-top .header-left .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-left .separator {
  background-color: var(--swatches-on-surface-alt-invert);
}

.header.invert .header-top .header-left .section-title {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .menu-icon .btn {
  background-color: var(--swatches-transparent);
  border-color: var(--swatches-transparent);
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .menu-icon .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .menu-icon .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .user-profile {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .user-profile i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .user-profile svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .header-links .custom-link {
  color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .header-links .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.header.invert .header-top .header-right .header-links .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.header.header-small .header-top {
  padding: 8px 16px;
  gap: 16px;
}

.header.header-small .header-top .header-left {
  gap: 16px;
}

.header.header-small .header-top .header-left .menu-icon {
  gap: 8px;
}

.header.header-small .header-top .header-left .menu-icon .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.header.header-small .header-top .header-left .menu-icon .btn > i.icon,
.header.header-small .header-top .header-left .menu-icon .btn > svg.icon {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-left .menu-icon .btn > i.flag {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-left .menu-icon .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.header.header-small .header-top .header-left .logo {
  width: 107px;
  height: 20px;
}

.header.header-small .header-top .header-left .section-title {
  font-size: 14px;
}

.header.header-small .header-top .header-left .header-links {
  gap: 16px;
}

.header.header-small .header-top .header-left .header-links .custom-link {
  font-size: 14px;
  gap: 4px;
}

.header.header-small .header-top .header-left .header-links .custom-link i.icon,
.header.header-small .header-top .header-left .header-links .custom-link svg.icon {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-left .header-links .custom-link i.flag {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-center {
  gap: 16px;
}

.header.header-small .header-top .header-center .form-group .form-control {
  height: 32px;
}

.header.header-small .header-top .header-center .placeholder-box {
  height: 32px;
  font-size: 14px;
  padding: 0 16px;
}

.header.header-small .header-top .header-right {
  gap: 16px;
}

.header.header-small .header-top .header-right .menu-icon {
  gap: 8px;
}

.header.header-small .header-top .header-right .menu-icon .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.header.header-small .header-top .header-right .menu-icon .btn > i.flag {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-right .menu-icon .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.header.header-small .header-top .header-right .user-profile {
  gap: 4px;
  padding: 4px;
}

.header.header-small .header-top .header-right .user-profile .avatar {
  width: 24px;
  height: 24px;
}

.header.header-small .header-top .header-right .user-profile .user-info .user-name {
  font-size: 14px;
}

.header.header-small .header-top .header-right .user-profile .user-info .user-doc {
  font-size: 12px;
}

.header.header-small .header-top .header-right .user-profile i.icon,
.header.header-small .header-top .header-right .user-profile svg.icon {
  width: 24px;
  height: 24px;
}

.header.header-small .header-top .header-right .header-links {
  gap: 16px;
}

.header.header-small .header-top .header-right .header-links .custom-link {
  font-size: 14px;
  gap: 4px;
}

.header.header-small .header-top .header-right .header-links .custom-link i.icon,
.header.header-small .header-top .header-right .header-links .custom-link svg.icon {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-right .header-links .custom-link i.flag {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-right .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.header.header-small .header-top .header-right .btn > i.flag {
  width: 12px;
  height: 12px;
}

.header.header-small .header-top .header-right .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.header.header-small .header-bottom {
  gap: 4px;
  padding: 4px;
  font-size: 12px;
}

.header.header-small .header-bottom > i.icon,
.header.header-small .header-bottom > svg.icon {
  width: 24px;
  height: 24px;
}

.header.header-medium .header-top {
  padding: 16px 24px;
  gap: 24px;
}

.header.header-medium .header-top .header-left {
  gap: 24px;
}

.header.header-medium .header-top .header-left .menu-icon {
  gap: 16px;
}

.header.header-medium .header-top .header-left .menu-icon .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.header.header-medium .header-top .header-left .menu-icon .btn > i.icon,
.header.header-medium .header-top .header-left .menu-icon .btn > svg.icon {
  width: 32px;
  height: 32px;
}

.header.header-medium .header-top .header-left .menu-icon .btn > i.flag {
  width: 32px;
  height: 32px;
}

.header.header-medium .header-top .header-left .menu-icon .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.header.header-medium .header-top .header-left .logo {
  width: 115px;
  height: 30px;
}

.header.header-medium .header-top .header-left .section-title {
  font-size: 16px;
}

.header.header-medium .header-top .header-left .header-links {
  gap: 24px;
}

.header.header-medium .header-top .header-left .header-links .custom-link {
  font-size: 16px;
  gap: 4px;
}

.header.header-medium .header-top .header-left .header-links .custom-link i.icon,
.header.header-medium .header-top .header-left .header-links .custom-link svg.icon {
  width: 16px;
  height: 16px;
}

.header.header-medium .header-top .header-left .header-links .custom-link i.flag {
  width: 16px;
  height: 16px;
}

.header.header-medium .header-top .header-center {
  gap: 24px;
}

.header.header-medium .header-top .header-center .form-group .form-control {
  height: 40px;
}

.header.header-medium .header-top .header-center .placeholder-box {
  height: 40px;
  font-size: 16px;
  padding: 0 24px;
}

.header.header-medium .header-top .header-right {
  gap: 24px;
}

.header.header-medium .header-top .header-right .menu-icon {
  gap: 8px;
}

.header.header-medium .header-top .header-right .menu-icon .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.header.header-medium .header-top .header-right .menu-icon .btn > i.flag {
  width: 32px;
  height: 32px;
}

.header.header-medium .header-top .header-right .menu-icon .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.header.header-medium .header-top .header-right .user-profile {
  gap: 4px;
  padding: 4px;
}

.header.header-medium .header-top .header-right .user-profile .avatar {
  width: 32px;
  height: 32px;
}

.header.header-medium .header-top .header-right .user-profile .user-info .user-name {
  font-size: 16px;
}

.header.header-medium .header-top .header-right .user-profile .user-info .user-doc {
  font-size: 14px;
}

.header.header-medium .header-top .header-right .user-profile i.icon,
.header.header-medium .header-top .header-right .user-profile svg.icon {
  width: 24px;
  height: 24px;
}

.header.header-medium .header-top .header-right .header-links {
  gap: 16px;
}

.header.header-medium .header-top .header-right .header-links .custom-link {
  font-size: 16px;
  gap: 4px;
}

.header.header-medium .header-top .header-right .header-links .custom-link i.icon,
.header.header-medium .header-top .header-right .header-links .custom-link svg.icon {
  width: 16px;
  height: 16px;
}

.header.header-medium .header-top .header-right .header-links .custom-link i.flag {
  width: 16px;
  height: 16px;
}

.header.header-medium .header-top .header-right .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.header.header-medium .header-top .header-right .btn > i.flag {
  width: 32px;
  height: 32px;
}

.header.header-medium .header-top .header-right .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.header.header-medium .header-bottom {
  gap: 8px;
  padding: 8px;
  font-size: 16px;
}

.header.header-medium .header-bottom > i.icon,
.header.header-medium .header-bottom > svg.icon {
  width: 32px;
  height: 32px;
}

.header.header-large .header-top {
  padding: 24px 32px;
  gap: 32px;
}

.header.header-large .header-top .header-left {
  gap: 32px;
}

.header.header-large .header-top .header-left .menu-icon {
  gap: 24px;
}

.header.header-large .header-top .header-left .menu-icon .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.header.header-large .header-top .header-left .menu-icon .btn > i.icon,
.header.header-large .header-top .header-left .menu-icon .btn > svg.icon {
  width: 40px;
  height: 40px;
}

.header.header-large .header-top .header-left .menu-icon .btn > i.flag {
  width: 40px;
  height: 40px;
}

.header.header-large .header-top .header-left .menu-icon .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.header.header-large .header-top .header-left .logo {
  width: 214px;
  height: 40px;
}

.header.header-large .header-top .header-left .section-title {
  font-size: 18px;
}

.header.header-large .header-top .header-left .header-links {
  gap: 32px;
}

.header.header-large .header-top .header-left .header-links .custom-link {
  font-size: 18px;
  gap: 6px;
}

.header.header-large .header-top .header-left .header-links .custom-link i.icon,
.header.header-large .header-top .header-left .header-links .custom-link svg.icon {
  width: 22px;
  height: 22px;
}

.header.header-large .header-top .header-left .header-links .custom-link i.flag {
  width: 22px;
  height: 22px;
}

.header.header-large .header-top .header-center {
  gap: 32px;
}

.header.header-large .header-top .header-center .form-group .form-control {
  height: 48px;
}

.header.header-large .header-top .header-center .placeholder-box {
  height: 48px;
  font-size: 18px;
  padding: 0 32px;
}

.header.header-large .header-top .header-right {
  gap: 32px;
}

.header.header-large .header-top .header-right .menu-icon {
  gap: 16px;
}

.header.header-large .header-top .header-right .menu-icon .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.header.header-large .header-top .header-right .menu-icon .btn > i.flag {
  width: 40px;
  height: 40px;
}

.header.header-large .header-top .header-right .menu-icon .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.header.header-large .header-top .header-right .user-profile {
  gap: 4px;
  padding: 4px;
}

.header.header-large .header-top .header-right .user-profile .avatar {
  width: 40px;
  height: 40px;
}

.header.header-large .header-top .header-right .user-profile .user-info .user-name {
  font-size: 18px;
}

.header.header-large .header-top .header-right .user-profile .user-info .user-doc {
  font-size: 16px;
}

.header.header-large .header-top .header-right .user-profile i.icon,
.header.header-large .header-top .header-right .user-profile svg.icon {
  width: 24px;
  height: 24px;
}

.header.header-large .header-top .header-right .header-links {
  gap: 24px;
}

.header.header-large .header-top .header-right .header-links .custom-link {
  font-size: 18px;
  gap: 6px;
}

.header.header-large .header-top .header-right .header-links .custom-link i.icon,
.header.header-large .header-top .header-right .header-links .custom-link svg.icon {
  width: 22px;
  height: 22px;
}

.header.header-large .header-top .header-right .header-links .custom-link i.flag {
  width: 22px;
  height: 22px;
}

.header.header-large .header-top .header-right .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.header.header-large .header-top .header-right .btn > i.flag {
  width: 40px;
  height: 40px;
}

.header.header-large .header-top .header-right .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.header.header-large .header-bottom {
  gap: 8px;
  padding: 8px;
  font-size: 18px;
}

.header.header-large .header-bottom > i.icon,
.header.header-large .header-bottom > svg.icon {
  width: 40px;
  height: 40px;
}

@media (max-width: 767px) {
  .header-top {
    --hdr-gap: 12px;
    --hdr-h: 56px;
    grid-template-columns: 56px 1fr 56px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .header-top {
    --hdr-gap: 16px;
    --hdr-h: 64px;
    grid-template-columns: auto 1fr auto;
  }
}

@media (min-width: 1024px) {
  .header-top {
    --hdr-gap: 20px;
    --hdr-h: 72px;
    grid-template-columns: auto 1fr auto;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .header .header-top {
    gap: 0 !important;
  }
  .header .header-top .header-left {
    gap: 8px !important;
  }
  .header .header-top .header-right {
    gap: 12px !important;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.custom-link {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  color: var(--swatches-on-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.custom-link > i.icon {
  background-color: var(--swatches-on-base);
}

.custom-link > svg.icon {
  color: var(--swatches-on-base);
}

.custom-link:hover {
  text-decoration: underline;
}

.custom-link:active {
  background-color: transparent;
}

.custom-link:focus-visible {
  background-color: var(--swatches-base-default);
  border-color: var(--swatches-border-base-focus);
  border-width: 3px;
}

.custom-link::selection {
  background-color: var(--swatches-base-selected);
}

.custom-link.disabled {
  color: var(--swatches-on-base-40);
  opacity: 0.4;
  cursor: no-drop;
  text-decoration: none;
}

.custom-link.xsmall {
  font-size: 12px;
  gap: 4px;
}

.custom-link.xsmall i.icon,
.custom-link.xsmall svg.icon {
  width: 8px;
  height: 8px;
}

.custom-link.xsmall i.flag {
  width: 8px;
  height: 8px;
}

.custom-link.small {
  font-size: 14px;
  gap: 4px;
}

.custom-link.small i.icon,
.custom-link.small svg.icon {
  width: 12px;
  height: 12px;
}

.custom-link.small i.flag {
  width: 12px;
  height: 12px;
}

.custom-link.medium {
  font-size: 16px;
  gap: 4px;
}

.custom-link.medium i.icon,
.custom-link.medium svg.icon {
  width: 16px;
  height: 16px;
}

.custom-link.medium i.flag {
  width: 16px;
  height: 16px;
}

.custom-link.large {
  font-size: 18px;
  gap: 6px;
}

.custom-link.large i.icon,
.custom-link.large svg.icon {
  width: 22px;
  height: 22px;
}

.custom-link.large i.flag {
  width: 22px;
  height: 22px;
}

.custom-link.invert {
  color: var(--swatches-on-surface-invert);
}

.custom-link.invert > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.custom-link.invert > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.custom-link.invert:hover {
  color: var(--swatches-on-surface-invert);
}

.custom-link.invert:hover > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.custom-link.invert:hover > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.custom-link.invert:active {
  color: var(--swatches-border-primary-subtle);
}

.custom-link.invert:active > i.icon {
  background-color: var(--swatches-border-primary-subtle);
}

.custom-link.invert:active > svg.icon {
  color: var(--swatches-border-primary-subtle);
}

.custom-link.invert:focus-visible {
  color: var(--swatches-border-primary-subtle);
}

.custom-link.invert:focus-visible > i.icon {
  background-color: var(--swatches-primary-selected);
}

.custom-link.invert:focus-visible > svg.icon {
  color: var(--swatches-primary-selected);
}

.custom-link.invert::selection {
  color: var(--swatches-primary-selected);
}

.custom-link.invert:disabled {
  color: var(--swatches-on-surface-invert-40);
}

.custom-link.invert:disabled > i.icon {
  background-color: var(--swatches-on-surface-invert-40);
}

.custom-link.invert:disabled > svg.icon {
  color: var(--swatches-on-surface-invert-40);
}

.custom-link.invert:disabled {
  opacity: 0.4;
}

.custom-link.invert > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.custom-link.invert > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.custom-link.invert > i.icon::selection {
  background-color: var(--swatches-border-primary-subtle);
}

.custom-link.invert > svg.icon::selection {
  color: var(--swatches-border-primary-subtle);
}

.custom-link.primary {
  color: var(--swatches-primary-default);
}

.custom-link.primary > i.icon {
  background-color: var(--swatches-primary-default);
}

.custom-link.primary > svg.icon {
  color: var(--swatches-primary-default);
}

.custom-link.secondary {
  color: var(--swatches-secondary-default);
}

.custom-link.secondary > i.icon {
  background-color: var(--swatches-secondary-default);
}

.custom-link.secondary > svg.icon {
  color: var(--swatches-secondary-default);
}

.custom-link.tertiary {
  color: var(--swatches-tertiary-default);
}

.custom-link.tertiary > i.icon {
  background-color: var(--swatches-tertiary-default);
}

.custom-link.tertiary > svg.icon {
  color: var(--swatches-tertiary-default);
}

.custom-link.quaternary {
  color: var(--swatches-quaternary-default);
}

.custom-link.quaternary > i.icon {
  background-color: var(--swatches-quaternary-default);
}

.custom-link.quaternary > svg.icon {
  color: var(--swatches-quaternary-default);
}

.custom-link.success {
  color: var(--swatches-success-default);
}

.custom-link.success > i.icon {
  background-color: var(--swatches-success-default);
}

.custom-link.success > svg.icon {
  color: var(--swatches-success-default);
}

.custom-link.warning {
  color: var(--swatches-warning-default);
}

.custom-link.warning > i.icon {
  background-color: var(--swatches-warning-default);
}

.custom-link.warning > svg.icon {
  color: var(--swatches-warning-default);
}

.custom-link.error {
  color: var(--swatches-error-default);
}

.custom-link.error > i.icon {
  background-color: var(--swatches-error-default);
}

.custom-link.error > svg.icon {
  color: var(--swatches-error-default);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .custom-link.xsmall {
    font-size: 10px;
  }
  .custom-link.small {
    font-size: 12px;
  }
  .custom-link.medium {
    font-size: 14px;
  }
  .custom-link.large {
    font-size: 16px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .custom-link.xsmall {
    font-size: 10px;
  }
  .custom-link.small {
    font-size: 12px;
  }
  .custom-link.medium {
    font-size: 14px;
  }
  .custom-link.large {
    font-size: 16px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.info .info-label {
  display: flex;
  height: 21px;
  align-items: center;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info .info-label {
    gap: 4px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info .info-label {
    gap: 4px;
  }
}

.info .info-label span {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 130%;
  color: var(--swatches-on-surface-neutral-alt);
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info .info-label span {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info .info-label span {
    font-size: 14px;
  }
}

.info .info-label > i.icon,
.info .info-label > svg.icon {
  display: flex;
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
}

.info .info-label > i.icon {
  background-color: var(--swatches-on-surface-primary);
}

.info .info-label > svg.icon {
  color: var(--swatches-on-surface-primary);
}

.info .info-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info .info-control {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info .info-control {
    gap: 8px;
  }
}

.info .info-control .info-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--swatches-surface-alt);
  padding: 4px;
  gap: 10px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info .info-control .info-icon {
    padding: 4px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info .info-control .info-icon {
    padding: 4px;
  }
}

.info .info-control .info-icon > i.icon,
.info .info-control .info-icon > svg.icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info .info-control .info-icon > i.icon {
  background-color: var(--swatches-on-surface-neutral);
}

.info .info-control .info-icon > svg.icon {
  color: var(--swatches-on-surface-neutral);
}

.info .info-control span {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 130%;
  color: var(--swatches-on-surface-neutral);
}

@media (min-width: 360px) and (max-width: 767px) {
  .info .info-control span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info .info-control span {
    font-size: 18px;
  }
}

.info.small .info-label span {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.small .info-label span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.small .info-label span {
    font-size: 18px;
  }
}

.info.small .info-control span {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.small .info-control span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.small .info-control span {
    font-size: 18px;
  }
}

.info.small .info-icon {
  width: 24px;
  height: 24px;
}

.info.small .info-icon > i.icon,
.info.small .info-icon > svg.icon {
  width: 16px;
  height: 16px;
}

.info.medium .info-label span {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.medium .info-label span {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.medium .info-label span {
    font-size: 14px;
  }
}

.info.medium .info-control span {
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.medium .info-control span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.medium .info-control span {
    font-size: 18px;
  }
}

.info.medium .info-icon {
  width: 24px;
  height: 24px;
}

.info.medium .info-icon > i.icon,
.info.medium .info-icon > svg.icon {
  width: 16px;
  height: 16px;
}

.info.large .info-label span {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.large .info-label span {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.large .info-label span {
    font-size: 14px;
  }
}

.info.large .info-control span {
  font-size: 20px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .info.large .info-control span {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info.large .info-control span {
    font-size: 18px;
  }
}

.info.large .info-icon {
  width: 28px;
  height: 28px;
}

.info.large .info-icon > i.icon,
.info.large .info-icon > svg.icon {
  width: 20px;
  height: 20px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.form-group .dropdown {
  display: none;
  flex-direction: column;
}

.form-group .dropdown.small {
  height: auto;
  max-height: 100%;
  width: 95px;
  border: 1px solid var(--swatches-border-base-input);
  z-index: 99;
  position: absolute;
}

.form-group input {
  cursor: pointer;
}

.form-group.disabled .form-control {
  background-color: var(--swatches-base-subtle);
  border: 1px solid var(--swatches-border-base-input);
  opacity: 0.4;
  cursor: not-allowed;
}

.form-group.disabled .form-control:focus {
  outline: 0;
  box-shadow: none;
}

.form-group.disabled .form-label {
  opacity: 0.4;
}

.form-group.disabled .form-text {
  opacity: 0.4;
}

.form-group.disabled .input-group-text {
  background-color: var(--swatches-base-subtle);
  border: 1px solid var(--swatches-border-base-input);
  opacity: 0.4;
}

.form-group.disabled .btn {
  background-color: var(--swatches-base-subtle);
  border: 1px solid var(--swatches-border-base-input);
  opacity: 0.4;
  cursor: not-allowed;
}

.form-group.disabled .btn:hover, .form-group.disabled .btn:focus, .form-group.disabled .btn:active {
  background-color: var(--swatches-base-subtle);
  border: 1px solid var(--swatches-border-base-input);
  box-shadow: none;
}

.form-group.disabled .form-control,
.form-group.disabled .input-group-text,
.form-group.disabled .btn {
  pointer-events: none;
}

.form-group .form-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--swatches-on-surface-neutral);
  margin-bottom: 12px;
}

.form-group .form-label i {
  font-size: 16px;
  display: block;
  width: 16px !important;
  height: 16px !important;
}

.form-group .form-label i:is(i) {
  background-color: var(--swatches-on-surface-neutral-alt);
}

.form-group .form-label i:is(svg) {
  color: var(--swatches-on-surface-neutral-alt);
}

.form-group .form-label svg {
  display: block;
  width: 16px !important;
  height: 16px !important;
  color: var(--swatches-on-surface-neutral-alt);
}

.form-group .form-label.required::after {
  content: "*";
  color: var(--swatches-error-selected);
  margin-left: 4px;
  width: 7px;
  height: 7px;
  line-height: 7px;
  position: relative;
  top: -2px;
}

.form-group .form-label.form-label-invert {
  color: var(--swatches-on-surface-invert);
}

.form-group .form-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--swatches-on-surface-neutral-alt);
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.form-group .form-text {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--swatches-on-surface-neutral);
  margin-top: 12px;
}

.form-group .form-text.success {
  color: var(--swatches-success-default);
}

.form-group .form-text.warning {
  color: var(--swatches-warning-default);
}

.form-group .form-text.error {
  color: var(--swatches-error-default);
}

@media (min-width: 360px) and (max-width: 767px) {
  .form-group .form-text {
    font-size: 12px;
    margin-top: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-group .form-text {
    font-size: 12px;
    margin-top: 8px;
  }
}

.form-group .form-control {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--swatches-on-surface-neutral);
  background-color: var(--swatches-base-default);
  border: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-shadow: none;
}

.form-group .form-control::placeholder {
  color: var(--neutral-500);
}

.form-group .form-control:focus {
  outline: none;
}

.form-group .form-control.small {
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
}

.form-group .form-control.large {
  height: 48px;
  padding: 0 10px;
  font-size: 18px;
}

.form-group .form-control.round-phone {
  border-end-end-radius: 8px;
  border-start-end-radius: 8px;
}

.form-group .form-control.pill-phone {
  border-end-end-radius: 1000px;
  border-start-end-radius: 1000px;
}

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

.form-group .form-control.pill {
  border-radius: 1000px;
}

.form-group .form-control.select {
  appearance: none;
}

.form-group .input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--swatches-border-base-input);
}

.form-group .input-group.round {
  border-radius: 8px;
  overflow: hidden;
}

.form-group .input-group.pill {
  border-radius: 1000px;
  overflow: hidden;
}

.form-group .input-group:hover {
  border-color: var(--swatches-base-hover-alt);
}

.form-group .input-group:hover ~ .dropdown {
  display: flex;
}

.form-group .input-group:active, .form-group .input-group:focus, .form-group .input-group:focus-within {
  border-color: var(--swatches-base-hover-alt);
  outline: 1px solid var(--swatches-base-hover-alt);
}

.form-group .input-group::selection {
  outline: 1px solid var(--swatches-base-hover-alt);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-surface-alt);
}

.form-group .input-group.search {
  position: relative;
}

.form-group .input-group.search .btn-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.form-group .input-group.search .btn-search > i.icon,
.form-group .input-group.search .btn-search > svg.icon {
  width: 16px !important;
  height: 16px !important;
}

.form-group .input-group.search .btn-search > i.icon {
  background-color: var(--swatches-on-surface-neutral);
}

.form-group .input-group.search .btn-search > svg.icon {
  color: var(--swatches-on-surface-neutral);
}

.form-group .input-group.date {
  position: relative;
}

.form-group .input-group.date input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 30px;
  cursor: pointer;
  -webkit-appearance: none;
}

.form-group .input-group.date .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.month {
  position: relative;
}

.form-group .input-group.month input[type=month]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 30px;
  cursor: pointer;
  -webkit-appearance: none;
}

.form-group .input-group.month .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.date-time {
  position: relative;
}

.form-group .input-group.date-time input[type=datetime-local]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 30px;
  cursor: pointer;
  -webkit-appearance: none;
}

.form-group .input-group.date-time .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.time {
  position: relative;
}

.form-group .input-group.time input[type=time]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 30px;
  cursor: pointer;
}

.form-group .input-group.time {
  /* Para o indicador interno do time */
}

.form-group .input-group.time input[type=time]::-webkit-inner-spin-button {
  opacity: 0;
  width: 30px;
  cursor: pointer;
}

.form-group .input-group.time i.icon,
.form-group .input-group.time svg.icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.icon-content {
  position: relative;
}

.form-group .input-group.icon-content .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.password {
  position: relative;
}

.form-group .input-group.password i.icon,
.form-group .input-group.password svg.icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.file {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  width: 100%;
  height: 38px;
  color: var(--swatches-on-surface-neutral);
  background-color: var(--swatches-base-default);
  border: 1px solid var(--swatches-border-base-input);
  border-radius: 0;
  overflow: hidden;
}

.form-group .input-group.file input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.form-group .input-group.file::before {
  content: "Nenhum arquivo...";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 14px;
  pointer-events: none;
}

.form-group .input-group.file::after {
  content: "Escolher Arquivo";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 10px 12px;
  color: var(--swatches-on-surface-neutral);
  font-size: 14px;
  background-color: var(--swatches-base-subtle);
  border-left: 1px solid var(--swatches-border-base-input);
  border-radius: 0;
  pointer-events: none;
}

.form-group .input-group.file:hover::after {
  background-color: #dee2e6;
}

.form-group .input-group.message {
  position: relative;
}

.form-group .input-group.message .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group.cvv {
  position: relative;
}

.form-group .input-group.cvv i.icon,
.form-group .input-group.cvv svg.icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}

.form-group .input-group .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.form-group .input-group .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  min-width: 18px;
  padding: 0 10px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--swatches-on-surface-neutral);
  text-align: center;
  background-color: var(--swatches-base-subtle);
  border: 1px solid var(--swatches-border-base-input);
  border-radius: 0;
  position: relative;
}

.form-group .input-group .btn {
  position: relative;
  min-width: 40px;
  padding: 0 10px;
  background-color: var(--swatches-base-subtle);
  border-radius: 0;
  cursor: pointer;
}

.form-group .input-group .btn i {
  width: 16px;
  height: 16px;
}

.form-group .input-group .prepend {
  border: none;
}

.form-group .input-group .prepend:hover ~ .dropdown,
.form-group .input-group .prepend:hover + .dropdown {
  display: flex;
}

.form-group .input-group .prepend.pill {
  border-top-left-radius: 1000px;
  border-bottom-left-radius: 1000px;
}

.form-group .input-group .prepend.round {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.form-group .input-group .prepend .icon {
  width: 16px;
  height: 16px;
}

.form-group .input-group .prepend i.flag {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.form-group .input-group .prepend + .form-control,
.form-group .input-group .input-group-prepend + .form-control,
.form-group .input-group .btn.prepend + .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

.form-group .input-group .input-group-text + .input-prepend,
.form-group .input-group .btn + .input-prepend,
.form-group .input-group .prepend + .input-prepend {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

.form-group .input-group .btn-outline-secondary {
  color: var(--swatches-on-surface-neutral);
  border-color: var(--swatches-border-base-input);
}

.form-group .input-group .btn-outline-secondary:hover {
  color: var(--swatches-on-surface-neutral-alt);
  background-color: var(--swatches-base-hover);
  border-color: var(--swatches-border-base-focus);
}

.form-group .input-group .input-group-text:focus,
.form-group .input-group .btn:focus {
  border-color: var(--swatches-border-base-focus);
  outline: none;
}

.form-group .input-group.small .form-control,
.form-group .input-group.small .btn {
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
}

.form-group .input-group.small .input-group-text {
  font-size: 14px;
}

.form-group .input-group.large .form-control,
.form-group .input-group.large .btn {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
}

.form-group .input-group.large .input-group-text {
  font-size: 18px;
  height: 46px;
}

.form-group .input-group.success:disabled, .form-group .input-group.warning:disabled, .form-group .input-group.error:disabled, .form-group .input-group.invert:disabled {
  opacity: 0.4;
  outline: none;
}

.form-group .input-group.success .input-group-text,
.form-group .input-group.success .btn, .form-group .input-group.warning .input-group-text,
.form-group .input-group.warning .btn, .form-group .input-group.error .input-group-text,
.form-group .input-group.error .btn, .form-group .input-group.invert .input-group-text,
.form-group .input-group.invert .btn {
  background-color: var(--swatches-base-subtle);
}

.form-group .input-group.success .btn:hover, .form-group .input-group.warning .btn:hover, .form-group .input-group.error .btn:hover, .form-group .input-group.invert .btn:hover {
  background-color: var(--swatches-base-subtle);
}

.form-group .input-group.success {
  border-color: var(--swatches-success-default);
}

.form-group .input-group.success:hover {
  border-color: var(--swatches-success-hover);
  outline: 1px solid var(--swatches-success-hover);
}

.form-group .input-group.success:active {
  border-color: var(--swatches-border-success-focus);
  outline: 1px solid var(--swatches-border-success-focus);
}

.form-group .input-group.success:focus, .form-group .input-group.success:focus-within {
  border-width: 2px;
  border-color: var(--swatches-border-success-focus);
  outline: 1px solid var(--swatches-border-success-focus);
}

.form-group .input-group.success::selection {
  border-color: var(--swatches-success-selected);
  outline: 1px solid var(--swatches-success-selected);
  background-color: var(--swatches-success-hover);
  color: var(--swatches-on-success);
}

.form-group .input-group.success .input-group-text {
  border-color: var(--swatches-success-default);
  border-right: 1px solid var(--swatches-border-base-input);
}

.form-group .input-group.success .form-control {
  border-color: var(--swatches-success-default);
}

.form-group .input-group.success .form-control + .form-text {
  color: var(--swatches-success-default);
}

.form-group .input-group.success .input-group-text,
.form-group .input-group.success .btn {
  border-color: var(--swatches-success-default);
}

.form-group .input-group.success + .form-text {
  color: var(--swatches-success-default);
}

.form-group .input-group.warning {
  border-color: var(--swatches-warning-default);
}

.form-group .input-group.warning:hover {
  border-color: var(--swatches-warning-hover);
  outline: 1px solid var(--swatches-warning-hover);
}

.form-group .input-group.warning:active {
  border-color: var(--swatches-border-warning-focus);
  outline: 1px solid var(--swatches-border-warning-focus);
}

.form-group .input-group.warning:focus, .form-group .input-group.warning:focus-within {
  border-width: 2px;
  border-color: var(--swatches-border-warning-focus);
  outline: 1px solid var(--swatches-border-warning-focus);
}

.form-group .input-group.warning::selection {
  border-color: var(--swatches-warning-selected);
  outline: 1px solid var(--swatches-warning-selected);
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-warning);
}

.form-group .input-group.warning .input-group-text {
  border-color: var(--swatches-warning-default);
  border-right: 1px solid var(--swatches-border-base-input);
}

.form-group .input-group.warning .form-control {
  border-color: var(--swatches-warning-default);
}

.form-group .input-group.warning .form-control + .form-text {
  color: var(--swatches-success-default);
}

.form-group .input-group.warning .input-group-text,
.form-group .input-group.warning .btn {
  border-color: var(--swatches-warning-default);
}

.form-group .input-group.warning + .form-text {
  color: var(--swatches-warning-default);
}

.form-group .input-group.error {
  border-color: var(--swatches-error-default);
}

.form-group .input-group.error:hover {
  border-color: var(--swatches-error-hover);
  outline: 1px solid var(--swatches-error-hover);
}

.form-group .input-group.error:active {
  border-color: var(--swatches-border-error-focus);
  outline: 1px solid var(--swatches-border-error-focus);
}

.form-group .input-group.error:focus, .form-group .input-group.error:focus-within {
  border-width: 2px;
  border-color: var(--swatches-border-error-focus);
  outline: 1px solid var(--swatches-border-error-focus);
}

.form-group .input-group.error::selection {
  border-color: var(--swatches-error-selected);
  outline: 1px solid var(--swatches-error-selected);
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-error);
}

.form-group .input-group.error .input-group-text {
  border-right: 1px solid var(--swatches-border-base-input);
}

.form-group .input-group.error .form-control {
  border-color: var(--swatches-error-default);
}

.form-group .input-group.error .form-control + .form-text {
  color: var(--swatches-success-default);
}

.form-group .input-group.error .input-group-text,
.form-group .input-group.error .btn {
  border-color: var(--swatches-error-default);
}

.form-group .input-group.error + .form-text {
  color: var(--swatches-error-default);
}

.form-group .input-group.invert .form-control {
  border: 1px solid var(--swatches-border-base-input);
  background-color: var(--swatches-base-default);
  outline: none;
}

.form-group .input-group.invert .form-control:hover {
  border-color: var(--swatches-base-hover);
  outline: 1px solid var(--swatches-base-hover);
}

.form-group .input-group.invert .form-control:active {
  border-color: var(--swatches-base-active);
  outline: 1px solid var(--swatches-base-active);
}

.form-group .input-group.invert .form-control:focus {
  border-color: var(--swatches-base-active);
  outline: 1px solid var(--swatches-base-active);
}

.form-group .input-group.invert .form-control::selection {
  border-color: var(--swatches-base-selected);
  outline: 1px solid var(--swatches-base-selected);
  background-color: var(--swatches-base-selected);
}

.form-group .input-group.invert .form-control + .form-text {
  color: var(--swatches-success-default);
}

.form-group .input-group.invert .input-group-text,
.form-group .input-group.invert .btn {
  border-color: var(--swatches-border-base-input);
}

.form-group .input-group.invert + .form-text {
  color: var(--swatches-on-surface-invert);
}

.form-group .input-group-round .form-control,
.form-group .input-group-round .input-group-text,
.form-group .input-group-round .btn, .form-group .input-group-pill .form-control,
.form-group .input-group-pill .input-group-text,
.form-group .input-group-pill .btn {
  border-radius: 0;
}

.form-group .input-group-round .form-control:first-child,
.form-group .input-group-round .input-group-text:first-child,
.form-group .input-group-round .btn:first-child, .form-group .input-group-pill .form-control:first-child,
.form-group .input-group-pill .input-group-text:first-child,
.form-group .input-group-pill .btn:first-child {
  border-top-left-radius: var(--input-radius);
  border-bottom-left-radius: var(--input-radius);
}

.form-group .input-group-round .form-control:last-child,
.form-group .input-group-round .input-group-text:last-child,
.form-group .input-group-round .btn:last-child, .form-group .input-group-pill .form-control:last-child,
.form-group .input-group-pill .input-group-text:last-child,
.form-group .input-group-pill .btn:last-child {
  border-top-right-radius: var(--input-radius);
  border-bottom-right-radius: var(--input-radius);
}

.form-group .input-group-round {
  border-radius: 8px;
}

.form-group .select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.form-group .select-wrapper .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px !important;
  height: 24px !important;
  pointer-events: none;
}

.form-group .select-wrapper .select {
  border: 1px solid var(--swatches-border-base-input);
}

.form-group .select-wrapper .select:hover {
  border-color: var(--swatches-base-hover-alt);
}

.form-group .select-wrapper .select:active, .form-group .select-wrapper .select:focus, .form-group .select-wrapper .select:focus-within {
  border-color: var(--swatches-base-hover-alt);
  outline: 1px solid var(--swatches-base-hover-alt);
}

.form-group .select-wrapper .select::selection {
  outline: 1px solid var(--swatches-base-hover-alt);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-surface-alt);
}

.form-group .select-wrapper .select.success, .form-group .select-wrapper .select.warning, .form-group .select-wrapper .select.error, .form-group .select-wrapper .select.invert {
  background-color: var(--swatches-base-default);
}

.form-group .select-wrapper .select.success:hover, .form-group .select-wrapper .select.success:active, .form-group .select-wrapper .select.success:focus, .form-group .select-wrapper .select.warning:hover, .form-group .select-wrapper .select.warning:active, .form-group .select-wrapper .select.warning:focus, .form-group .select-wrapper .select.error:hover, .form-group .select-wrapper .select.error:active, .form-group .select-wrapper .select.error:focus, .form-group .select-wrapper .select.invert:hover, .form-group .select-wrapper .select.invert:active, .form-group .select-wrapper .select.invert:focus {
  outline: none;
}

.form-group .select-wrapper .select.success {
  border-color: var(--swatches-success-default);
}

.form-group .select-wrapper .select.success:hover {
  border: 2px solid var(--swatches-success-hover);
}

.form-group .select-wrapper .select.success:active, .form-group .select-wrapper .select.success:focus {
  border-color: var(--swatches-border-success-focus);
}

.form-group .select-wrapper .select.success::selection {
  border-color: var(--swatches-success-selected);
  background-color: var(--swatches-success-hover);
  color: var(--swatches-on-success);
}

.form-group .select-wrapper .select.success + .form-text {
  color: var(--swatches-success-default);
}

.form-group .select-wrapper .select.warning {
  border-color: var(--swatches-warning-default);
}

.form-group .select-wrapper .select.warning:hover {
  border-color: var(--swatches-warning-hover);
}

.form-group .select-wrapper .select.warning:active, .form-group .select-wrapper .select.warning:focus {
  border-color: var(--swatches-border-warning-focus);
}

.form-group .select-wrapper .select.warning::selection {
  border-color: var(--swatches-warning-selected);
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-warning);
}

.form-group .select-wrapper .select.warning + .form-text {
  color: var(--swatches-warning-default);
}

.form-group .select-wrapper .select.error {
  border-color: var(--swatches-error-default);
}

.form-group .select-wrapper .select.error:hover {
  border-color: var(--swatches-error-hover);
}

.form-group .select-wrapper .select.error:active, .form-group .select-wrapper .select.error:focus {
  border-color: var(--swatches-border-error-focus);
}

.form-group .select-wrapper .select.error::selection {
  border-color: var(--swatches-error-selected);
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-error);
}

.form-group .select-wrapper .select.error + .form-text {
  color: var(--swatches-error-default);
}

.form-group .select-wrapper .select.invert {
  border-color: var(--swatches-border-base-input);
}

.form-group .select-wrapper .select.invert:hover {
  border-color: var(--swatches-base-hover);
}

.form-group .select-wrapper .select.invert:active, .form-group .select-wrapper .select.invert:focus {
  border-color: var(--swatches-base-active);
}

.form-group .select-wrapper .select.invert::selection {
  border-color: var(--swatches-base-selected);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-on-surface-base-alt);
}

.form-group .select-wrapper .select.invert + .form-text {
  color: var(--swatches-on-surface-invert);
}

.form-group .select-wrapper .chip-overlay {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 4;
}

.form-group-pill {
  border-radius: 1000px;
}

textarea.form-area {
  min-height: 100px;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 40px;
  padding: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--swatches-on-surface-neutral);
  background-color: var(--swatches-base-default);
  border: 1px solid var(--swatches-border-base-input);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-shadow: none;
}

textarea.form-area.round {
  border-radius: 8px;
}

textarea.form-area:hover {
  border-color: var(--swatches-base-hover-alt);
}

textarea.form-area:active, textarea.form-area:focus, textarea.form-area:focus-within {
  border-color: var(--swatches-base-hover-alt);
  outline: 1px solid var(--swatches-base-hover-alt);
}

textarea.form-area::selection {
  outline: 1px solid var(--swatches-base-hover-alt);
  background-color: var(--swatches-base-active-alt);
  color: var(--swatches-surface-alt);
}

textarea.form-area.success, textarea.form-area.warning, textarea.form-area.error, textarea.form-area.invert {
  background-color: var(--swatches-base-default);
}

textarea.form-area.success:hover, textarea.form-area.success:active, textarea.form-area.success:focus, textarea.form-area.warning:hover, textarea.form-area.warning:active, textarea.form-area.warning:focus, textarea.form-area.error:hover, textarea.form-area.error:active, textarea.form-area.error:focus, textarea.form-area.invert:hover, textarea.form-area.invert:active, textarea.form-area.invert:focus {
  outline: none;
}

textarea.form-area.success {
  border-color: var(--swatches-success-default);
}

textarea.form-area.success:hover {
  border: 2px solid var(--swatches-success-hover);
}

textarea.form-area.success:active, textarea.form-area.success:focus {
  border-color: var(--swatches-border-success-focus);
}

textarea.form-area.success::selection {
  border-color: var(--swatches-success-selected);
  background-color: var(--swatches-success-hover);
  color: var(--swatches-on-success);
}

textarea.form-area.success + .form-text {
  color: var(--swatches-success-default);
}

textarea.form-area.warning {
  border-color: var(--swatches-warning-default);
}

textarea.form-area.warning:hover {
  border-color: var(--swatches-warning-hover);
}

textarea.form-area.warning:active, textarea.form-area.warning:focus {
  border-color: var(--swatches-border-warning-focus);
}

textarea.form-area.warning::selection {
  border-color: var(--swatches-warning-selected);
  background-color: var(--swatches-warning-default);
  color: var(--swatches-on-warning);
}

textarea.form-area.warning + .form-text {
  color: var(--swatches-warning-default);
}

textarea.form-area.error {
  border-color: var(--swatches-error-default);
}

textarea.form-area.error:hover {
  border-color: var(--swatches-error-hover);
}

textarea.form-area.error:active, textarea.form-area.error:focus {
  border-color: var(--swatches-border-error-focus);
}

textarea.form-area.error::selection {
  border-color: var(--swatches-error-selected);
  background-color: var(--swatches-error-default);
  color: var(--swatches-on-error);
}

textarea.form-area.error + .form-text {
  color: var(--swatches-error-default);
}

textarea.form-area.resize-none {
  resize: none;
}

textarea.form-area.resize-vertical {
  resize: vertical;
}

textarea.form-area.resize-horizontal {
  resize: horizontal;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-group .form-label {
    font-size: 14px;
  }
  .form-group .form-text {
    font-size: 14px;
  }
  .form-group .form-control {
    font-size: 14px;
  }
  .form-group .form-control.small {
    font-size: 12px;
  }
  .form-group .form-control.large {
    font-size: 16px;
  }
  .form-group .form-control.round {
    border-radius: 4px;
  }
  .form-group .input-group.form-control {
    border: 0;
  }
  .form-group .input-group.file::after {
    font-size: 12px;
  }
  .form-group .input-group .input-group-text {
    font-size: 14px;
  }
  .form-group .input-group.small .form-control,
  .form-group .input-group.small .btn {
    font-size: 12px;
  }
  .form-group .input-group.small .input-group-text {
    font-size: 12px;
  }
  .form-group .input-group.large .form-control,
  .form-group .input-group.large .btn {
    font-size: 16px;
  }
  .form-group .input-group.large .input-group-text {
    font-size: 16px;
  }
  .form-group .input-group-round {
    border-radius: 4px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .form-group .form-label {
    font-size: 14px;
  }
  .form-group .form-text {
    font-size: 14px;
  }
  .form-group .form-control {
    font-size: 14px;
  }
  .form-group .form-control.small {
    font-size: 12px;
  }
  .form-group .form-control.large {
    font-size: 16px;
  }
  .form-group .input-group.file::after {
    font-size: 12px;
  }
  .form-group .input-group .input-group-text {
    font-size: 14px;
  }
  .form-group .input-group.small .form-control,
  .form-group .input-group.small .btn {
    font-size: 12px;
  }
  .form-group .input-group.small .input-group-text {
    font-size: 12px;
  }
  .form-group .input-group.large .form-control,
  .form-group .input-group.large .btn {
    font-size: 16px;
  }
  .form-group .input-group.large .input-group-text {
    font-size: 16px;
  }
  .form-group .input-group-round {
    border-radius: 4px;
  }
}

.select-error-text {
  display: block;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--swatches-on-surface-neutral);
}

.select-error-text.error {
  color: var(--swatches-error-default);
}

.select-error-text.success {
  color: var(--swatches-success-default);
}

.select-error-text.warning {
  color: var(--swatches-warning-default);
}

.select-error-text.invert {
  color: var(--swatches-on-surface-invert);
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.list {
  font-family: var(--font-body);
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 32px 24px;
  align-items: flex-start;
  gap: 8px;
  color: var(--swatches-on-surface-base);
}

.list--hover:hover {
  background-color: var(--swatches-base-hover);
}

.list.border {
  border-bottom: 1px solid var(--swatches-surface-alt);
}

.list-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.list-center {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.list-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.list .list-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list.small .list-left .form-check {
  margin: 0;
}

.list.small .list-left .form-check input {
  width: 14px;
  height: 14px;
}

.list.small .list-left .form-check input::after {
  width: 11px;
  height: 11px;
}

.list.small .list-left i.icon:not(.btn i.icon, .badge i.icon),
.list.small .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  width: 24px;
  height: 24px;
}

.list.small .list-left i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-base);
}

.list.small .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-base);
}

.list.small .list-left .avatar {
  width: 24px;
  height: 24px;
}

.list.small .list-center .title {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}

.list.small .list-center .subtitle,
.list.small .list-center .description {
  font-size: 12px;
  margin: 0;
}

.list.small .list-center .badge {
  min-width: 32px;
  max-height: 32px;
  padding: 8px 10px;
  gap: 6px;
  font-size: 14px;
}

.list.small .list-center .badge i.icon,
.list.small .list-center .badge svg.icon {
  width: 11.67px;
  height: 11.67px;
}

.list.small .list-center .text,
.list.small .list-center .number {
  font-size: 14px;
  margin: 0;
}

.list.small .list-center .number {
  text-align: right;
}

.list.small .list-center .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.list.small .list-center .btn i.icon,
.list.small .list-center .btn svg.icon {
  width: 12px;
  height: 12px;
}

.list.small .list-center .form-control {
  height: 32px;
  padding: "0 8px";
  font-size: 14px;
}

.list.small .list-center .input-group-text {
  font-size: 14px;
}

.list.small .list-center .list-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.list.small .list-center .list-header .list-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list.small .list-center .list-header .list-right-actions .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.list.small .list-center .list-header .list-right-actions .form-toggle {
  margin: 0;
}

.list.small .list-center .list-header .list-right-actions .form-toggle .input {
  width: 30px;
  height: 16px;
}

.list.small .list-center .list-header .list-right-actions .form-toggle .input::before {
  width: 12px;
  height: 12px;
}

.list.small .list-center .list-header .list-right-actions .form-toggle .input:checked::before {
  left: auto;
  right: 2px;
}

.list.medium .list-left .form-check {
  margin: 0;
}

.list.medium .list-left .form-check input {
  width: 16px;
  height: 16px;
}

.list.medium .list-left .form-check input::after {
  width: 14px;
  height: 14px;
}

.list.medium .list-left i.icon:not(.btn i.icon, .badge i.icon),
.list.medium .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  width: 32px;
  height: 32px;
}

.list.medium .list-left i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-base);
}

.list.medium .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-base);
}

.list.medium .list-left .avatar {
  width: 32px;
  height: 32px;
}

.list.medium .list-center .title {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.list.medium .list-center .subtitle,
.list.medium .list-center .description {
  font-size: 14px;
  margin: 0;
}

.list.medium .list-center .badge {
  min-width: 40px;
  max-height: 40px;
  padding: 8px 13px;
  gap: 8px;
  font-size: 16px;
}

.list.medium .list-center .badge i.icon,
.list.medium .list-center .badge svg.icon {
  width: 16.67px;
  height: 16.67px;
}

.list.medium .list-center .text,
.list.medium .list-center .number {
  font-size: 16px;
  margin: 0;
}

.list.medium .list-center .number {
  text-align: right;
}

.list.medium .list-center .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.list.medium .list-center .btn i.icon,
.list.medium .list-center .btn svg.icon {
  width: 17px;
  height: 17px;
}

.list.medium .list-center .form-control {
  height: 40px;
  padding: "0 10px";
  font-size: 16px;
}

.list.medium .list-center .input-group-text {
  font-size: 16px;
}

.list.medium .list-center .list-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.list.medium .list-center .list-header .list-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list.medium .list-center .list-header .list-right-actions .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.list.medium .list-center .list-header .list-right-actions .form-toggle {
  margin: 0;
}

.list.medium .list-center .list-header .list-right-actions .form-toggle .input {
  width: 34px;
  height: 20px;
}

.list.medium .list-center .list-header .list-right-actions .form-toggle .input::before {
  width: 16px;
  height: 16px;
}

.list.medium .list-center .list-header .list-right-actions .form-toggle .input:checked::before {
  left: auto;
  right: 2px;
}

.list.large .list-left .form-check {
  margin: 0;
}

.list.large .list-left .form-check input {
  width: 18px;
  height: 18px;
}

.list.large .list-left .form-check input::after {
  width: 16px;
  height: 16px;
}

.list.large .list-left i.icon:not(.btn i.icon, .badge i.icon),
.list.large .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  width: 40px;
  height: 40px;
}

.list.large .list-left i.icon:not(.btn i.icon, .badge i.icon) {
  background-color: var(--swatches-on-base);
}

.list.large .list-left svg.icon:not(.btn svg.icon, .badge svg.icon) {
  color: var(--swatches-on-base);
}

.list.large .list-left .avatar {
  width: 40px;
  height: 40px;
}

.list.large .list-center .title {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

.list.large .list-center .subtitle,
.list.large .list-center .description {
  font-size: 16px;
  margin: 0;
}

.list.large .list-center .badge {
  min-width: 48px;
  max-height: 48px;
  padding: 8px 16px;
  gap: 10px;
  font-size: 18px;
}

.list.large .list-center .badge i.icon,
.list.large .list-center .badge svg.icon {
  width: 20px;
  height: 20px;
}

.list.large .list-center .text,
.list.large .list-center .number {
  font-size: 18px;
  margin: 0;
}

.list.large .list-center .number {
  text-align: right;
}

.list.large .list-center .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.list.large .list-center .btn i.icon,
.list.large .list-center .btn svg.icon {
  width: 20px;
  height: 20px;
}

.list.large .list-center .form-control {
  height: 48px;
  padding: "0 12px";
  font-size: 18px;
}

.list.large .list-center .input-group-text {
  font-size: 18px;
  height: 46.5px;
}

.list.large .list-center .list-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.list.large .list-center .list-header .list-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list.large .list-center .list-header .list-right-actions .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.list.large .list-center .list-header .list-right-actions .form-toggle {
  margin: 0;
}

.list.large .list-center .list-header .list-right-actions .form-toggle .input {
  width: 46px;
  height: 24px;
}

.list.large .list-center .list-header .list-right-actions .form-toggle .input::before {
  width: 20px;
  height: 20px;
}

.list.large .list-center .list-header .list-right-actions .form-toggle .input:checked::before {
  left: auto;
  right: 2px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.modal {
  --modal-accent: var(--neutral-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 530px;
  padding: 24px;
  border: 1px solid var(--swatches-border);
  border-radius: 16px;
  background: var(--swatches-surface);
  align-self: center;
  height: auto;
  flex: 0 0 auto;
  position: relative;
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal {
    gap: 20px;
    padding: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .modal {
    gap: 24px;
    padding: 24px;
  }
}

.modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.modal .modal-header .modal-header-start {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal .modal-header .modal-header-start {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .modal .modal-header .modal-header-start {
    gap: 8px;
  }
}

.modal .modal-header .modal-header-start > i.icon,
.modal .modal-header .modal-header-start > svg.icon {
  width: 24px;
  height: 24px;
}

.modal .modal-header .modal-header-start .modal-header-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.modal .modal-header .modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 15px;
}

.modal .modal-header .modal-close > i.icon,
.modal .modal-header .modal-close > svg.icon {
  width: 24px;
  height: 24px;
}

.modal .modal-header .modal-close > i.icon {
  background-color: var(--swatches-on-base);
}

.modal .modal-header .modal-close > svg.icon {
  color: var(--swatches-on-base);
}

.modal .modal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-bottom: 6px;
  align-self: stretch;
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal .modal-hero {
    gap: 8px;
    padding-bottom: 6px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .modal .modal-hero {
    gap: 12px;
    padding-bottom: 6px;
  }
}

.modal .modal-hero > i.icon,
.modal .modal-hero > svg.icon {
  width: 64px;
  height: 64px;
}

.modal .modal-hero .modal-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  color: var(--swatches-on-base);
  text-align: center;
}

.modal .modal-hero .modal-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
  color: var(--swatches-on-base);
  text-align: center;
}

.modal .modal-body {
  display: flex;
  gap: 10px;
  width: 100%;
}

.modal .modal-body .modal-drawer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 165px;
  width: 100%;
  align-self: stretch;
  font-family: var(--font-body);
  border-radius: 8px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-weight: 400;
  white-space: pre-line;
  line-height: 130%;
}

.modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal .modal-actions {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .modal .modal-actions {
    gap: 12px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .modal {
    width: 530px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal {
    width: 280px;
  }
  .modal .modal-hero > i.icon,
  .modal .modal-hero > svg.icon {
    width: 48px;
    height: 48px;
  }
  .modal .modal-title {
    font-size: 18px;
  }
  .modal .modal-desc {
    font-size: 14px;
  }
  .modal .modal-body {
    padding: 0 24px 8px;
  }
  .modal .modal-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}

.modal .modal-header-start > i.icon,
.modal .modal-hero > i.icon {
  background-color: var(--modal-accent);
}

.modal .modal-header-start > svg.icon,
.modal .modal-hero > svg.icon {
  color: var(--modal-accent);
}

.modal.base {
  --modal-accent: var(--swatches-on-base);
}

.modal.warning {
  --modal-accent: var(--swatches-on-surface-warning);
}

.modal.error {
  --modal-accent: var(--swatches-on-surface-error);
}

.modal.success {
  --modal-accent: var(--swatches-on-surface-success);
}

.modal-layer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.48);
  z-index: 1030;
}

.modal-layer.no-fade {
  background: transparent;
}

.modal-layer.visible {
  display: flex;
}

.modal-layer .modal {
  max-height: none;
  overflow: visible;
}

.modal-layer .modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
}

@media (min-width: 360px) and (max-width: 767px) {
  .modal-layer {
    align-items: flex-start;
    overflow-y: auto;
  }
}

@media (max-height: 700px) {
  .modal-layer {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .modal {
    height: 500px;
    max-height: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  .modal-header,
  .modal-actions {
    flex: 0 0 auto;
  }
}

.modal-layer:target {
  display: flex;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.navbar-container .btn-group {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background-color: var(--swatches-base-default);
  width: 100%;
  height: 65px;
}

.navbar-container .btn-group .center-container {
  position: relative;
  display: flex;
  align-items: center;
}

.navbar-container .btn-group .center-container .btn-center {
  position: absolute;
  right: 50%;
  width: 48px;
  height: 48px;
  bottom: 30px;
  transform: translateX(calc(50% + 5px));
  margin: 0 4px;
  z-index: 2;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .navbar-container .btn-group .center-container .btn-center {
    margin: 0 4px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .navbar-container .btn-group .center-container .btn-center {
    margin: 0 4px;
  }
}

.navbar-container .btn-group .btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 66.4px;
  height: 65px;
  background-color: var(--swatches-base-default);
  padding: 8px 4px;
  border: none;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .navbar-container .btn-group .btn-next {
    padding: 8px 4px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .navbar-container .btn-group .btn-next {
    padding: 8px 4px;
  }
}

.navbar-container .btn-group .btn-next i.icon {
  background-color: var(--swatches-on-base);
}

.navbar-container .btn-group .btn-next svg.icon {
  color: var(--swatches-on-base);
}

.navbar-container .btn-group .btn-next .text {
  color: var(--swatches-on-base);
  font-weight: 700;
}

.navbar-container .btn-group .btn-next.active {
  border-top: 3px solid var(--primary-deep);
  box-sizing: border-box;
}

.navbar-container .btn-group .btn-next.active i.icon {
  background-color: var(--primary-deep);
}

.navbar-container .btn-group .btn-next.active svg.icon {
  color: var(--primary-deep);
}

.navbar-container .btn-group .btn-next.active .text {
  color: var(--primary-deep);
  font-weight: 700;
}

@media (min-width: 360px) and (max-width: 767px) {
  .navbar-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
  }
  .navbar-container .btn-group {
    width: 100%;
    height: 65px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 24px;
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
  flex-wrap: nowrap;
  overflow-x: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container {
    gap: 8px;
    padding: 8px 12px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container {
    gap: 4px;
    padding: 8px 8px;
    min-height: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right" "center center";
    place-items: center stretch;
    column-gap: 10rem;
    overflow-x: visible;
  }
}

.pagination-container .pagination-left,
.pagination-container .pagination-center,
.pagination-container .pagination-right {
  display: flex;
  align-items: center;
  position: relative;
  gap: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container .pagination-left,
  .pagination-container .pagination-center,
  .pagination-container .pagination-right {
    gap: 4px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container .pagination-center {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
}

.pagination-container .form-group {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pagination-container .pagination-left .form-group,
.pagination-container .pagination-right .form-group {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container .pagination-left .form-group .form-label,
  .pagination-container .pagination-right .form-group .form-label {
    font-size: 12px;
    display: inline-block;
    margin: 0;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container .pagination-left {
    grid-area: left;
    justify-content: flex-start;
    justify-self: end;
  }
  .pagination-container .pagination-right {
    grid-area: right;
    justify-content: flex-start;
    justify-self: start;
  }
  .pagination-container .pagination-center {
    grid-area: center;
    width: 100%;
    justify-content: center;
  }
  .pagination-container .pagination-range {
    flex-basis: 100%;
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: 16px;
  }
}

.pagination-container .form-label {
  font-weight: 400;
  color: var(--swatches-on-surface-neutral);
  margin-bottom: 2px;
  font-size: inherit;
}

.pagination-container .form-control.select,
.pagination-container select.next,
.pagination-container .form-control.default,
.pagination-container input.next {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--swatches-base-default);
  border: 1px solid var(--swatches-border-base);
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
}

.pagination-container .form-control.select::-ms-expand,
.pagination-container select.next::-ms-expand,
.pagination-container .form-control.default::-ms-expand,
.pagination-container input.next::-ms-expand {
  display: none;
}

.pagination-container .form-control.select:hover, .pagination-container .form-control.select:focus,
.pagination-container select.next:hover,
.pagination-container select.next:focus,
.pagination-container .form-control.default:hover,
.pagination-container .form-control.default:focus,
.pagination-container input.next:hover,
.pagination-container input.next:focus {
  border-color: var(--swatches-on-base);
  outline: none;
  box-shadow: none;
}

.pagination-container .form-control.select,
.pagination-container select.next {
  padding-right: 32px;
  position: relative;
  background-image: none;
}

.pagination-container .select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pagination-container .select-wrapper .select-icon {
  position: absolute;
  right: 8px;
  pointer-events: none;
  z-index: 1;
}

.pagination-container .select-wrapper select.next {
  position: relative;
  z-index: 0;
}

.pagination-container .active {
  border: none;
  background-color: var(--neutral-200);
}

.pagination-container.small {
  font-size: 14px;
}

.pagination-container.small .label,
.pagination-container.small .range,
.pagination-container.small .ellipsis {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .label,
  .pagination-container.small .range,
  .pagination-container.small .ellipsis {
    font-size: 12px;
  }
}

.pagination-container.small .range {
  font-weight: 600;
}

.pagination-container.small .pagination-center .icon {
  width: 12px;
  height: 12px;
  font-size: 12px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .pagination-center .icon {
    width: 10px;
    height: 10px;
    font-size: 10px;
  }
}

.pagination-container.small .pagination-center .btn {
  width: 32px;
  height: 32px;
  font-size: 14px;
  min-width: 32px;
  min-height: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .pagination-center .btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
    min-width: 28px;
    min-height: 28px;
  }
}

.pagination-container.small .form-control.select,
.pagination-container.small select.next {
  width: 56px;
  height: 32px;
  font-size: 14px;
  padding: 0 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .form-control.select,
  .pagination-container.small select.next {
    width: 48px;
    height: 28px;
    font-size: 12px;
    padding: 0 6px;
  }
}

.pagination-container.small .form-control.default,
.pagination-container.small input.next {
  width: 40px;
  height: 32px;
  font-size: 14px;
  text-align: right;
  padding: 0 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .form-control.default,
  .pagination-container.small input.next {
    width: 36px;
    height: 28px;
    font-size: 12px;
    padding: 0 6px;
  }
}

.pagination-container.small .select-wrapper .select-icon {
  width: 12px;
  height: 12px;
  font-size: 12px;
  right: 6px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .select-wrapper .select-icon {
    width: 10px;
    height: 10px;
    font-size: 10px;
    right: 4px;
  }
}

.pagination-container.small .icon {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.small .icon {
    font-size: 14px;
  }
}

.pagination-container.medium {
  font-size: 16px;
}

.pagination-container.medium .label,
.pagination-container.medium .range,
.pagination-container.medium .ellipsis {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .label,
  .pagination-container.medium .range,
  .pagination-container.medium .ellipsis {
    font-size: 14px;
  }
}

.pagination-container.medium .range {
  font-weight: 600;
}

.pagination-container.medium .pagination-center .icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .pagination-center .icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
  }
}

.pagination-container.medium .pagination-center .btn {
  width: 40px;
  height: 40px;
  font-size: 16px;
  min-width: 40px;
  min-height: 40px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .pagination-center .btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
    min-width: 32px;
    min-height: 32px;
  }
}

.pagination-container.medium .form-control.select,
.pagination-container.medium select.next {
  width: 64px;
  height: 40px;
  font-size: 16px;
  padding: 0 10px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .form-control.select,
  .pagination-container.medium select.next {
    width: 56px;
    height: 32px;
    font-size: 14px;
    padding: 0 8px;
  }
}

.pagination-container.medium .form-control.default,
.pagination-container.medium input.next {
  width: 48px;
  height: 40px;
  font-size: 16px;
  text-align: right;
  padding: 0 10px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .form-control.default,
  .pagination-container.medium input.next {
    width: 40px;
    height: 32px;
    font-size: 14px;
    padding: 0 8px;
  }
}

.pagination-container.medium .select-wrapper .select-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  right: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .select-wrapper .select-icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
    right: 6px;
  }
}

.pagination-container.medium .icon {
  font-size: 20px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.medium .icon {
    font-size: 16px;
  }
}

.pagination-container.large {
  font-size: 18px;
}

.pagination-container.large .label,
.pagination-container.large .range,
.pagination-container.large .ellipsis {
  font-size: 18px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .label,
  .pagination-container.large .range,
  .pagination-container.large .ellipsis {
    font-size: 16px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .label,
  .pagination-container.large .range,
  .pagination-container.large .ellipsis {
    font-size: 14px;
  }
}

.pagination-container.large .range {
  font-weight: 600;
}

.pagination-container.large .pagination-center .icon {
  width: 22px;
  height: 22px;
  font-size: 22px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .pagination-center .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .pagination-center .icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
  }
}

.pagination-container.large .pagination-center .btn {
  width: 48px;
  height: 48px;
  font-size: 18px;
  min-width: 48px;
  min-height: 48px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .pagination-center .btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
    min-width: 40px;
    min-height: 40px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .pagination-center .btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
    min-width: 36px;
    min-height: 36px;
  }
}

.pagination-container.large .form-control.select,
.pagination-container.large select.next {
  width: 72px;
  height: 48px;
  font-size: 18px;
  padding: 0 10px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .form-control.select,
  .pagination-container.large select.next {
    width: 64px;
    height: 40px;
    font-size: 16px;
    padding: 0 10px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .form-control.select,
  .pagination-container.large select.next {
    width: 56px;
    height: 36px;
    font-size: 14px;
    padding: 0 8px;
  }
}

.pagination-container.large .form-control.default,
.pagination-container.large input.next {
  width: 56px;
  height: 48px;
  font-size: 18px;
  text-align: right;
  padding: 0 10px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .form-control.default,
  .pagination-container.large input.next {
    width: 48px;
    height: 40px;
    font-size: 16px;
    padding: 0 10px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .form-control.default,
  .pagination-container.large input.next {
    width: 44px;
    height: 36px;
    font-size: 14px;
    padding: 0 8px;
  }
}

.pagination-container.large .select-wrapper .select-icon {
  width: 22px;
  height: 22px;
  font-size: 22px;
  right: 10px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .select-wrapper .select-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
    right: 8px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .select-wrapper .select-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    right: 6px;
  }
}

.pagination-container.large .icon {
  font-size: 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container.large .icon {
    font-size: 20px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container.large .icon {
    font-size: 18px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container .mobile-hidden {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container .tablet-hidden {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pagination-container .desktop-only {
    display: none !important;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .pagination-container .desktop-only {
    display: none !important;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.sidebar {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px 16px 48px 16px;
  width: 88px;
  border-right: 1px solid var(--swatches-border-base-alt);
  background-color: var(--swatches-surface);
  overflow: hidden;
  box-sizing: border-box;
  overscroll-behavior: contain;
  position: fixed;
  top: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    gap: 20px;
    padding: 16px 8px 32px 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    gap: 24px;
    padding: 20px 12px 40px 12px;
  }
}

.sidebar.expanded {
  width: 310px;
  padding: 24px;
  align-items: flex-start;
}

.sidebar.expanded .sidebar-header {
  justify-content: space-between;
}

.sidebar.expanded .sidebar-header .menu-infos .sidebar-title {
  display: block;
}

.sidebar.expanded .sidebar-header .menu-infos .logo {
  display: block;
}

.sidebar.expanded .sidebar-header .btn {
  display: flex;
}

.sidebar.expanded .form-group {
  display: flex;
}

.sidebar.expanded .nav-itens .main-menu {
  align-items: stretch;
}

.sidebar.expanded .nav-itens .main-menu .menu-item {
  justify-content: space-between;
}

.sidebar.expanded .nav-itens .main-menu .menu-item .menu-left .item-name {
  display: block;
}

.sidebar.expanded .nav-itens .main-menu .menu-item .badge {
  display: flex;
}

.sidebar.expanded .nav-itens .main-menu .menu-item > i.icon,
.sidebar.expanded .nav-itens .main-menu .menu-item > svg.icon {
  display: flex;
}

.sidebar.expanded .nav-itens .main-menu .sub-menu .item .item-name {
  display: block;
}

.sidebar.expanded .nav-itens .main-menu .sub-menu .badge {
  display: flex;
}

.sidebar.expanded .sidebar-footer .menu-info {
  width: 100%;
}

.sidebar.expanded .show-only-expanded {
  display: flex;
}

.sidebar.expanded .show-only-collapsed {
  display: none;
}

.sidebar .form-group {
  display: none;
  width: 100%;
}

.sidebar .sidebar-header {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.sidebar .sidebar-header .menu-infos {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar .sidebar-header .menu-infos .logo {
  background-position: center center;
  width: 107px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar .sidebar-header .menu-infos .sidebar-title {
  display: none;
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .sidebar-header .menu-infos .sidebar-title {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .sidebar-header .menu-infos .sidebar-title {
    font-size: 18px;
  }
}

.sidebar .sidebar-header .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.sidebar .show-only-expanded {
  display: none;
}

.sidebar .show-only-collapsed {
  display: flex;
}

.sidebar .nav-itens {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  flex: 1;
  overflow: hidden auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .nav-itens {
    gap: 4px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-itens {
    gap: 4px;
  }
}

.sidebar .nav-itens .main-menu {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .nav-itens .main-menu {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-itens .main-menu {
    gap: 8px;
  }
}

.sidebar .nav-itens .main-menu .menu-item {
  position: relative;
  cursor: pointer;
  padding: 8px 16px;
  display: flex;
  gap: 8px;
  height: 48px;
  align-items: center;
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  background: transparent;
  border: none;
  box-sizing: border-box;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .nav-itens .main-menu .menu-item {
    gap: 8px;
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-itens .main-menu .menu-item {
    gap: 8px;
    font-size: 14px;
  }
}

.sidebar .nav-itens .main-menu .menu-item .menu-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon i.icon,
.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon svg.icon {
  width: 24px;
  height: 24px;
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon i.icon {
  background-color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon svg.icon {
  color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .menu-icon .dot-overlay {
  position: absolute;
  top: 0;
  left: 16px;
  width: 8px;
  height: 8px;
  background-color: var(--swatches-error-hover);
  border-radius: 50%;
}

.sidebar .nav-itens .main-menu .menu-item .menu-left .item-name {
  display: none;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav-itens .main-menu .menu-item i.icon,
.sidebar .nav-itens .main-menu .menu-item svg.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sidebar .nav-itens .main-menu .menu-item i.icon {
  background-color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item svg.icon {
  color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item .badge {
  display: none;
  height: 24px;
  min-width: 24px;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  background-color: var(--swatches-surface-alt);
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;
}

.sidebar .nav-itens .main-menu .menu-item .badge.rounded {
  border-radius: 50%;
  padding: 4px;
  width: 24px;
}

.sidebar .nav-itens .main-menu .menu-item > i.icon,
.sidebar .nav-itens .main-menu .menu-item > svg.icon {
  display: flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar .nav-itens .main-menu .menu-item > i.icon {
  background-color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item > svg.icon {
  color: var(--swatches-on-surface-primary);
}

.sidebar .nav-itens .main-menu .menu-item:hover {
  background: var(--swatches-surface-alt);
}

.sidebar .nav-itens .main-menu .menu-item.active {
  background: var(--swatches-surface-alt);
}

.sidebar .nav-itens .main-menu.active > .menu-item {
  background: var(--swatches-surface-alt);
}

.sidebar .nav-itens .main-menu.open .sub-menu {
  display: flex;
}

.sidebar .nav-itens .main-menu .sub-menu {
  display: none;
  padding: 8px 16px;
  height: 48px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .nav-itens .main-menu .sub-menu {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-itens .main-menu .sub-menu {
    gap: 8px;
  }
}

.sidebar .nav-itens .main-menu .sub-menu .item {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 11px;
  height: 32px;
  color: var(--swatches-on-surface-neutral);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar .nav-itens .main-menu .sub-menu .item {
    padding-left: 20px;
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar .nav-itens .main-menu .sub-menu .item {
    padding-left: 24px;
    font-size: 14px;
  }
}

.sidebar .nav-itens .main-menu .sub-menu .item .item-name {
  width: 100%;
  display: none;
  align-items: center;
  text-align: left;
}

.sidebar .nav-itens .main-menu .sub-menu .badge {
  display: none;
  height: 24px;
  min-width: 24px;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  background-color: var(--swatches-surface-alt);
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;
  margin-left: auto;
}

.sidebar .nav-itens .main-menu .sub-menu:hover {
  background: var(--swatches-surface-alt);
}

.sidebar .nav-itens .main-menu .sub-menu.active {
  background: var(--swatches-surface-alt);
}

.sidebar .sidebar-footer {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.sidebar .sidebar-footer .menu-info {
  height: 200px;
  width: 52px;
  border: 1px dashed #eaeaea;
  border-radius: 8px;
  background-color: var(--swatches-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sidebar .sidebar-footer .menu-info img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.sidebar.invert {
  border: 1px solid var(--swatches-surface-alt-invert);
  background-color: var(--swatches-surface-alt-invert);
}

.sidebar.invert .sidebar-header .menu-infos .sidebar-title {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .sidebar-header .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.invert .sidebar-header .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item .menu-left .menu-icon i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item .menu-left .menu-icon svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item:hover {
  background: var(--swatches-background-invert);
}

.sidebar.invert .nav-itens .main-menu .menu-item.active {
  background: var(--swatches-background-invert);
}

.sidebar.invert .nav-itens .main-menu .sub-menu .item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.invert .nav-itens .main-menu .sub-menu:hover {
  background: var(--swatches-background-invert);
}

.sidebar.primary {
  border: 1px solid var(--swatches-primary-hover);
  background-color: var(--swatches-primary-hover);
}

.sidebar.primary .sidebar-header .menu-infos .sidebar-title {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .sidebar-header .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.primary .sidebar-header .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item .menu-left .menu-icon i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item .menu-left .menu-icon svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .menu-item:hover {
  background: var(--swatches-primary-active);
}

.sidebar.primary .nav-itens .main-menu .menu-item.active {
  background: var(--swatches-primary-active);
}

.sidebar.primary .nav-itens .main-menu .sub-menu .item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.primary .nav-itens .main-menu .sub-menu:hover {
  background: var(--swatches-primary-active);
}

.sidebar.secondary {
  border: 1px solid var(--swatches-secondary-default);
  background-color: var(--swatches-secondary-default);
}

.sidebar.secondary .sidebar-header .menu-infos .sidebar-title {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .sidebar-header .btn > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .sidebar-header .btn > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item .menu-left .menu-icon i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item .menu-left .menu-icon svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .menu-item:hover {
  background: var(--swatches-secondary-hover);
}

.sidebar.secondary .nav-itens .main-menu .menu-item.active {
  background: var(--swatches-secondary-hover);
}

.sidebar.secondary .nav-itens .main-menu .sub-menu .item {
  color: var(--swatches-on-surface-invert);
}

.sidebar.secondary .nav-itens .main-menu .sub-menu:hover {
  background: var(--swatches-secondary-hover);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    gap: 24px;
    padding: 20px 12px 40px 12px;
  }
  .sidebar .sidebar-header {
    gap: 20px;
  }
  .sidebar .sidebar-header .menu-infos {
    gap: 8px;
  }
  .sidebar .sidebar-header .menu-infos .sidebar-title {
    font-size: 18px;
  }
  .sidebar .nav-itens {
    gap: 4px;
  }
  .sidebar .nav-itens .main-menu {
    gap: 8px;
  }
  .sidebar .nav-itens .main-menu .menu-item {
    gap: 8px;
    font-size: 14px;
  }
  .sidebar .nav-itens .main-menu .sub-menu {
    gap: 8px;
  }
  .sidebar .nav-itens .main-menu .sub-menu .item {
    padding-left: 24px;
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    gap: 20px;
    padding: 16px 8px 32px 8px;
  }
  .sidebar .sidebar-header {
    gap: 16px;
  }
  .sidebar .sidebar-header .menu-infos {
    gap: 8px;
  }
  .sidebar .sidebar-header .menu-infos .sidebar-title {
    font-size: 16px;
  }
  .sidebar .nav-itens {
    gap: 4px;
  }
  .sidebar .nav-itens .main-menu {
    gap: 8px;
  }
  .sidebar .nav-itens .main-menu .menu-item {
    gap: 8px;
    font-size: 14px;
  }
  .sidebar .nav-itens .main-menu .sub-menu {
    gap: 8px;
  }
  .sidebar .nav-itens .main-menu .sub-menu .item {
    padding-left: 20px;
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) and (orientation: portrait) {
  .sidebar.expanded {
    width: 100%;
  }
}

.spinner-wrapper {
  position: relative;
  display: inline-block;
}

.spinner-wrapper .spinner {
  width: 80px;
  height: 80px;
  border: 5px solid var(--swatches-base-default);
  border-top-color: var(--swatches-on-surface-primary);
  border-radius: 50%;
  animation: spin 3s linear infinite;
}

.spinner-wrapper .spinner.invert {
  border: 5px solid var(--swatches-transparent);
  border-top-color: var(--swatches-on-surface-invert);
}

.spinner-wrapper .spinner.invert + .logo-spinner {
  background-image: var(--logo-spinner-invert);
}

.spinner-wrapper .logo-spinner {
  background-image: var(--logo-spinner);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.stepper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  overflow: visible;
}

.stepper .number-step {
  margin-inline: 11px;
  margin-block: 6px;
  font-size: 16px;
  font-weight: bold;
  color: var(--swatches-on-base);
}

.stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  flex: 1;
  font-family: var(--font-body);
}

.stepper .step .step-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  color: var(--swatches-on-surface-neutral);
}

.stepper .step .step-foot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.stepper .step .step-foot .step-icon {
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 50%;
  border: 1px solid var(--swatches-on-surface-neutral);
  box-sizing: border-box;
  background: transparent;
}

.stepper .step .step-foot .step-icon i.icon {
  background-color: var(--swatches-on-base);
}

.stepper .step .step-foot .step-icon svg.icon {
  color: var(--swatches-on-base);
}

.stepper .step .step-foot .step-connector,
.stepper .step .step-foot .v-connector {
  position: absolute;
  background: var(--swatches-on-surface-neutral);
  pointer-events: none;
}

.stepper .step .step-foot .step-connector {
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
}

.stepper .step .step-foot .step-connector.right {
  left: calc(50% + 24px);
  right: -2.5px;
}

.stepper .step .step-foot .step-connector.left {
  right: calc(50% + 24px);
  left: -2.5px;
}

.stepper .step.muted .step-label,
.stepper .step.muted .step-desc {
  color: var(--swatches-on-base-alt);
}

.stepper .step.muted .step-foot .step-icon {
  border-color: var(--swatches-on-base-alt);
}

.stepper .step.muted .step-foot .step-icon i.icon {
  background-color: var(--swatches-on-base-alt);
}

.stepper .step.muted .step-foot .step-icon svg.icon {
  color: var(--swatches-on-base-alt);
}

.stepper .step.muted .step-foot .step-connector,
.stepper .step.muted .step-foot .v-connector {
  background: var(--swatches-on-base-alt);
}

.stepper .step.done .step-foot .step-icon i.icon {
  background-color: var(--swatches-success-default);
}

.stepper .step.done .step-foot .step-icon svg.icon {
  color: var(--swatches-success-default);
}

.stepper .step.error .step-label,
.stepper .step.error .step-desc {
  color: var(--swatches-on-surface-error);
}

.stepper .step.error .step-foot .step-icon {
  border-color: var(--swatches-on-surface-error);
}

.stepper .step.error .step-foot .step-icon i.icon {
  background-color: var(--swatches-on-surface-error);
}

.stepper .step.error .step-foot .step-icon svg.icon {
  color: var(--swatches-on-surface-error);
}

.stepper .step.error .step-foot .step-connector,
.stepper .step.error .step-foot .v-connector {
  background: var(--swatches-on-surface-error);
}

.stepper .step.clickable {
  cursor: pointer;
  user-select: none;
}

.stepper .step.clickable .step-header,
.stepper .step.clickable .step-foot,
.stepper .step.clickable .step-icon,
.stepper .step.clickable .number-step {
  cursor: pointer;
  user-select: none;
}

.stepper .step.clickable:hover .step-foot .step-icon {
  opacity: 0.8;
}

.stepper .step .step-label,
.stepper .step .step-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

.stepper.vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.stepper.vertical .step {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  flex: none;
}

.stepper.vertical .step .step-header {
  align-items: center;
  text-align: center;
}

.stepper.vertical .step .step-header .step-label,
.stepper.vertical .step .step-header .step-desc {
  margin-right: auto;
}

.stepper.vertical .step .step-header {
  gap: 8px;
}

.stepper.vertical .step .step-foot .v-connector {
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
}

.stepper.vertical .step .step-foot .v-connector.top {
  bottom: calc(50% + 24px);
  top: -16px;
}

.stepper.vertical .step .step-foot .v-connector.bottom {
  top: calc(50% + 24px);
  bottom: -16px;
}

.stepper.stepper-small .step {
  width: auto;
  min-width: 72px;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-small .step {
    font-size: 4px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-small .step {
    font-size: 4px;
  }
}

.stepper.stepper-small .step .step-label {
  font-size: 14px;
  font-weight: 800;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-small .step .step-label {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-small .step .step-label {
    font-size: 12px;
  }
}

.stepper.stepper-small .step .step-desc {
  font-size: 12px;
  font-weight: 500;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-small .step .step-desc {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-small .step .step-desc {
    font-size: 10px;
  }
}

.stepper.stepper-medium .step {
  min-width: 80px;
  width: auto;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-medium .step {
    font-size: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-medium .step {
    font-size: 8px;
  }
}

.stepper.stepper-medium .step .step-label {
  font-size: 16px;
  font-weight: 800;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-medium .step .step-label {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-medium .step .step-label {
    font-size: 14px;
  }
}

.stepper.stepper-medium .step .step-desc {
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-medium .step .step-desc {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-medium .step .step-desc {
    font-size: 12px;
  }
}

.stepper.stepper-large .step {
  min-width: 88px;
  width: auto;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-large .step {
    font-size: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-large .step {
    font-size: 8px;
  }
}

.stepper.stepper-large .step .step-label {
  font-size: 18px;
  font-weight: 800;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-large .step .step-label {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-large .step .step-label {
    font-size: 16px;
  }
}

.stepper.stepper-large .step .step-desc {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .stepper.stepper-large .step .step-desc {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .stepper.stepper-large .step .step-desc {
    font-size: 14px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.table-container {
  width: 100%;
  height: auto;
  max-height: var(--table-height, 800px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.table-container table {
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
  height: auto;
  border-collapse: collapse;
  table-layout: auto;
}

.table-container table thead tr.group-search {
  background: var(--swatches-surface-alt);
  position: sticky;
  top: 0;
  z-index: 11;
}

.table-container table thead tr + tr {
  position: sticky;
  z-index: 10;
}

.table-container table thead tr:first-child:not(.group-search) {
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-container table.stripe tbody tr.data-row.odd {
  background-color: var(--swatches-background);
}

.table-container table.hoverable tbody tr:hover {
  background-color: var(--swatches-background);
}

.table-container table th.top,
.table-container table td.top {
  vertical-align: top;
}

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

.table-container table th.bottom,
.table-container table td.bottom {
  vertical-align: bottom;
}

.table-container table.table-small th {
  height: 40px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--swatches-on-surface-neutral);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}

.table-container table.table-small th:hover {
  cursor: pointer;
  background-color: var(--swatches-background);
}

.table-container table.table-small th.center {
  text-align: center;
}

.table-container table.table-small th.left {
  text-align: left;
}

.table-container table.table-small th.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small th {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small th {
    font-size: 10px;
  }
}

.table-container table.table-small th:first-child {
  padding-left: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small th:first-child {
    padding-left: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small th:first-child {
    padding-left: 12px;
  }
}

.table-container table.table-small th:last-child {
  padding-right: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small th:last-child {
    padding-right: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small th:last-child {
    padding-right: 12px;
  }
}

.table-container table.table-small .table-title {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-direction: row;
  font-weight: 600;
}

.table-container table.table-small td {
  position: relative;
  height: 40px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  padding: 0 4px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--swatches-on-surface-neutral);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-container table.table-small td.center {
  text-align: center;
}

.table-container table.table-small td.left {
  text-align: left;
}

.table-container table.table-small td.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td {
    font-size: 12px;
  }
}

.table-container table.table-small td:first-child {
  padding-left: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td:first-child {
    padding-left: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td:first-child {
    padding-left: 12px;
  }
}

.table-container table.table-small td:last-child {
  padding-right: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td:last-child {
    padding-right: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td:last-child {
    padding-right: 12px;
  }
}

.table-container table.table-small td.column-leading {
  padding: 0 4px 0 8px;
}

.table-container table.table-small td.column-leading .leading-text {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 800;
  font-size: 14px;
  text-overflow: ellipsis;
  line-height: 120%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td.column-leading .leading-text {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td.column-leading .leading-text {
    font-size: 12px;
  }
}

.table-container table.table-small td.column-leading .subtitle {
  font-weight: 400;
  font-size: 12px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td.column-leading .subtitle {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td.column-leading .subtitle {
    font-size: 10px;
  }
}

.table-container table.table-small td.column-single-text {
  font-weight: 400;
  font-size: 14px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td.column-single-text {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td.column-single-text {
    font-size: 12px;
  }
}

.table-container table.table-small td.column-number {
  text-align: right;
}

.table-container table.table-small td.column-description {
  font-weight: 400;
  font-size: 12px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-small td.column-description {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-small td.column-description {
    font-size: 10px;
  }
}

.table-container table.table-small td.column-actions {
  text-align: center;
}

.table-container table.table-small td.column-actions > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}

.table-container table.table-small td.column-actions > *:first-child {
  margin-left: 0;
}

.table-container table.table-small td.column-actions > *:last-child {
  margin-right: 0;
}

.table-container table.table-small.table-2x td {
  height: 80px;
}

.table-container table.table-medium th {
  height: 56px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--swatches-on-surface-neutral);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.table-container table.table-medium th.center {
  text-align: center;
}

.table-container table.table-medium th.left {
  text-align: left;
}

.table-container table.table-medium th.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium th {
    font-size: 14px;
    padding: 0 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium th {
    font-size: 14px;
    padding: 0 12px;
  }
}

.table-container table.table-medium th:first-child {
  padding-left: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium th:first-child {
    padding-left: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium th:first-child {
    padding-left: 20px;
  }
}

.table-container table.table-medium th:last-child {
  padding-right: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium th:last-child {
    padding-right: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium th:last-child {
    padding-right: 20px;
  }
}

.table-container table.table-medium .table-title {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-direction: row;
  font-weight: 600;
}

.table-container table.table-medium td {
  position: relative;
  height: 56px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  padding: 0 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--swatches-on-surface-neutral);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-container table.table-medium td.center {
  text-align: center;
}

.table-container table.table-medium td.left {
  text-align: left;
}

.table-container table.table-medium td.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td {
    padding: 0 8px;
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td {
    padding: 0 12px;
    font-size: 14px;
  }
}

.table-container table.table-medium td:first-child {
  padding-left: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td:first-child {
    padding-left: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td:first-child {
    padding-left: 20px;
  }
}

.table-container table.table-medium td:last-child {
  padding-right: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td:last-child {
    padding-right: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td:last-child {
    padding-right: 20px;
  }
}

.table-container table.table-medium td.column-leading .leading-text {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 800;
  font-size: 16px;
  text-overflow: ellipsis;
  line-height: 120%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td.column-leading .leading-text {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td.column-leading .leading-text {
    font-size: 14px;
  }
}

.table-container table.table-medium td.column-leading .subtitle {
  font-weight: 400;
  font-size: 14px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td.column-leading .subtitle {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td.column-leading .subtitle {
    font-size: 12px;
  }
}

.table-container table.table-medium td.column-single-text {
  font-weight: 400;
  font-size: 16px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td.column-single-text {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td.column-single-text {
    font-size: 14px;
  }
}

.table-container table.table-medium td.column-number {
  text-align: right;
}

.table-container table.table-medium td.column-description {
  font-weight: 400;
  font-size: 14px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-medium td.column-description {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-medium td.column-description {
    font-size: 12px;
  }
}

.table-container table.table-medium td.column-actions {
  text-align: center;
}

.table-container table.table-medium td.column-actions > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}

.table-container table.table-medium td.column-actions > *:first-child {
  margin-left: 0;
}

.table-container table.table-medium td.column-actions > *:last-child {
  margin-right: 0;
}

.table-container table.table-medium.table-2x td {
  height: 112px;
}

.table-container table.table-large th {
  height: 72px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--swatches-on-surface-neutral);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 16px;
}

.table-container table.table-large th.center {
  text-align: center;
}

.table-container table.table-large th.left {
  text-align: left;
}

.table-container table.table-large th.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large th {
    font-size: 16px;
    padding: 0 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large th {
    font-size: 16px;
    padding: 0 12px;
  }
}

.table-container table.table-large th:first-child {
  padding-left: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large th:first-child {
    padding-left: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large th:first-child {
    padding-left: 24px;
  }
}

.table-container table.table-large th:last-child {
  padding-right: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large th:last-child {
    padding-right: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large th:last-child {
    padding-right: 24px;
  }
}

.table-container table.table-large .table-title {
  display: flex;
  gap: 16px;
  align-items: center;
  font-weight: 600;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large .table-title {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large .table-title {
    gap: 12px;
  }
}

.table-container table.table-large td {
  position: relative;
  height: 72px;
  width: auto;
  border-bottom: 1px solid var(--swatches-border);
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--swatches-on-surface-neutral);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-container table.table-large td.center {
  text-align: center;
}

.table-container table.table-large td.left {
  text-align: left;
}

.table-container table.table-large td.right {
  text-align: right;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td {
    padding: 0 8px;
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td {
    padding: 0 12px;
    font-size: 16px;
  }
}

.table-container table.table-large td:first-child {
  padding-left: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td:first-child {
    padding-left: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td:first-child {
    padding-left: 24px;
  }
}

.table-container table.table-large td:last-child {
  padding-right: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td:last-child {
    padding-right: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td:last-child {
    padding-right: 24px;
  }
}

.table-container table.table-large td.column-leading .leading-text {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 800;
  font-size: 18px;
  text-overflow: ellipsis;
  line-height: 120%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td.column-leading .leading-text {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td.column-leading .leading-text {
    font-size: 16px;
  }
}

.table-container table.table-large td.column-leading .subtitle {
  font-weight: 400;
  font-size: 16px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td.column-leading .subtitle {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td.column-leading .subtitle {
    font-size: 14px;
  }
}

.table-container table.table-large td.column-single-text {
  font-weight: 400;
  font-size: 18px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td.column-single-text {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td.column-single-text {
    font-size: 16px;
  }
}

.table-container table.table-large td.column-number {
  text-align: right;
}

.table-container table.table-large td.column-description {
  font-weight: 400;
  font-size: 16px;
  text-overflow: ellipsis;
  line-height: 130%;
}

@media (min-width: 360px) and (max-width: 767px) {
  .table-container table.table-large td.column-description {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .table-container table.table-large td.column-description {
    font-size: 14px;
  }
}

.table-container table.table-large td.column-actions {
  text-align: center;
}

.table-container table.table-large td.column-actions > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}

.table-container table.table-large td.column-actions > *:first-child {
  margin-left: 0;
}

.table-container table.table-large td.column-actions > *:last-child {
  margin-right: 0;
}

.table-container table.table-large.table-2x td {
  height: 144px;
}

.table-container table td.column-actions {
  overflow: visible;
}

.table-composition {
  width: 100%;
  max-height: var(--table-height, 800px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.table-composition > .table-container {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(var(--table-height, 800px) - var(--table-footer-height, 88px));
  overflow: auto;
}

.table-composition > .pagination-container,
.table-composition > .table-footer {
  flex: 0 0 auto;
}

.table-composition.page-scroll {
  max-height: none;
  overflow: visible;
}

.table-composition.page-scroll > .table-container {
  max-height: none;
  overflow: visible;
}

th.fixed-column,
td.fixed-column {
  position: sticky !important;
  z-index: 5;
  background: var(--swatches-surface-alt);
}

thead th.fixed-column {
  z-index: 7;
}

thead tr.group-search th.fixed-column {
  z-index: 8;
}

tfoot tr {
  position: relative;
  z-index: 11;
}

td.fixed-column:first-child,
th.fixed-column:first-child {
  background-clip: padding-box;
}

.toggle-expand {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.toggle-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
}

tbody tr.row-detail {
  display: none;
}

tbody tr:has(.toggle-expand:checked) {
  background: var(--swatches-surface-alt);
}

tbody tr:has(.toggle-expand:checked) + tr.row-detail {
  display: table-row;
}

tbody tr.expanded {
  background: var(--swatches-surface-alt);
}

tbody tr.expanded + tr.row-detail {
  display: table-row;
}

.row-detail .row-detail-content {
  padding: 16px;
  color: var(--swatches-on-surface-neutral);
  font-size: 14px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.title {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.title .title-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title .title-top .left {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  gap: 8px;
}

.title .title-top .left .icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--swatches-border);
  background: var(--swatches-surface);
}

.title .title-top .left .icon-wrapper i.icon {
  background-color: var(--swatches-on-base);
}

.title .title-top .left .icon-wrapper svg.icon {
  color: var(--swatches-on-base);
}

.title .title-top .left .icon-global-wrapper i.icon,
.title .title-top .left .icon-global-wrapper svg.icon {
  width: 16px !important;
  height: 16px !important;
}

.title .title-top .left .custom-link {
  margin-bottom: 8px;
}

.title .title-top .left .title {
  line-height: 100%;
  font-family: var(--font-title);
  margin-bottom: 8px;
  font-weight: 800;
}

.title .title-top .left .description {
  margin: 0;
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-body);
}

.title .title-top .left i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon) {
  background-color: var(--swatches-on-base);
}

.title .title-top .left svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  color: var(--swatches-on-base);
}

.title .title-top .right {
  display: flex;
  align-items: center;
}

.title .title-bottom {
  display: flex;
}

.title .title-bottom i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon) {
  background-color: var(--swatches-on-base-alt);
}

.title .title-bottom svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  color: var(--swatches-on-base-alt);
}

.title.invert {
  background-color: var(--swatches-surface-invert);
}

.title.invert .title-top .left .icon-wrapper {
  border: 1px solid var(--swatches-surface-alt-invert);
  background: var(--swatches-surface-invert);
}

.title.invert .title-top .left .icon-wrapper i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .icon-wrapper svg.icon {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:hover {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:hover > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:hover > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:active {
  color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link:active > i.icon {
  background-color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link:active > svg.icon {
  color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link:focus-visible {
  color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link:focus-visible > i.icon {
  background-color: var(--swatches-primary-selected);
}

.title.invert .title-top .left .custom-link:focus-visible > svg.icon {
  color: var(--swatches-primary-selected);
}

.title.invert .title-top .left .custom-link::selection {
  color: var(--swatches-primary-selected);
}

.title.invert .title-top .left .custom-link::selection > i.icon {
  background-color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link::selection > svg.icon {
  color: var(--swatches-border-primary-subtle);
}

.title.invert .title-top .left .custom-link:disabled {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:disabled > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link:disabled > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link > i.icon {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .custom-link > svg.icon {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .title {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left .description {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon) {
  background-color: var(--swatches-on-surface-invert);
}

.title.invert .title-top .left svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  color: var(--swatches-on-surface-invert);
}

.title.invert .title-bottom i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon) {
  background-color: var(--swatches-on-surface-alt-invert);
}

.title.invert .title-bottom svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  color: var(--swatches-on-surface-alt-invert);
}

.title.small .title-top {
  gap: 16px;
  padding: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top {
    gap: 8px;
    padding: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top {
    gap: 12px;
    padding: 12px;
  }
}

.title.small .title-top .left {
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left {
    gap: 12px;
  }
}

.title.small .title-top .left .icon-wrapper {
  width: 48px;
  height: 48px;
  padding: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left .icon-wrapper {
    width: 32px;
    height: 32px;
    padding: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left .icon-wrapper {
    width: 40px;
    height: 40px;
    padding: 12px;
  }
}

.title.small .title-top .left .icon-wrapper i.icon,
.title.small .title-top .left .icon-wrapper svg.icon {
  width: 24px;
  height: 24px;
}

.title.small .title-top .left .custom-link {
  font-size: 12px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left .custom-link {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left .custom-link {
    font-size: 10px;
  }
}

.title.small .title-top .left .custom-link i.icon,
.title.small .title-top .left .custom-link svg.icon {
  width: 8px;
  height: 8px;
}

.title.small .title-top .left .custom-link i.flag {
  width: 8px;
  height: 8px;
}

.title.small .title-top .left .title {
  font-size: 20px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left .title {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left .title {
    font-size: 18px;
  }
}

.title.small .title-top .left .description {
  font-size: 12px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left .description {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left .description {
    font-size: 10px;
  }
}

.title.small .title-top .left i.icon:not(.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.small .title-top .left svg.icon:not(.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 24px;
  height: 24px;
}

.title.small .title-top .left .badge {
  min-width: 32px;
  max-height: 32px;
  padding: 8px 10px;
  gap: 6px;
  font-size: 14px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .left .badge {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .left .badge {
    font-size: 12px;
  }
}

.title.small .title-top .left .badge i.icon,
.title.small .title-top .left .badge svg.icon {
  width: 11.67px;
  height: 11.67px;
}

.title.small .title-top .right {
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-top .right {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-top .right {
    gap: 12px;
  }
}

.title.small .title-top .right .btn {
  padding: 8px 10px;
  font-size: 14px;
  height: 32px;
  gap: 6px;
}

.title.small .title-top .right .btn > i.icon,
.title.small .title-top .right .btn > svg.icon {
  width: 12px;
  height: 12px;
}

.title.small .title-top .right .btn > i.flag {
  width: 12px;
  height: 12px;
}

.title.small .title-top .right .btn.icon-only {
  padding: 8px;
  width: 32px;
  height: 32px;
}

.title.small .title-bottom {
  padding: 0 16px 8px 16px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-bottom {
    padding: 0 8px 8px 8px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-bottom {
    padding: 0 12px 8px 12px;
    gap: 12px;
  }
}

.title.small .title-bottom i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.small .title-bottom svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 16px;
  height: 16px;
}

.title.small .title-bottom .custom-link {
  font-size: 12px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.small .title-bottom .custom-link {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.small .title-bottom .custom-link {
    font-size: 10px;
  }
}

.title.small .title-bottom .custom-link i.icon,
.title.small .title-bottom .custom-link svg.icon {
  width: 8px;
  height: 8px;
}

.title.small .title-bottom .custom-link i.flag {
  width: 8px;
  height: 8px;
}

.title.medium .title-top {
  gap: 24px;
  padding: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top {
    gap: 16px;
    padding: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top {
    gap: 20px;
    padding: 20px;
  }
}

.title.medium .title-top .left {
  gap: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left {
    gap: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left {
    gap: 20px;
  }
}

.title.medium .title-top .left .icon-wrapper {
  width: 64px;
  height: 64px;
  padding: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left .icon-wrapper {
    width: 48px;
    height: 48px;
    padding: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left .icon-wrapper {
    width: 56px;
    height: 56px;
    padding: 12px;
  }
}

.title.medium .title-top .left .icon-wrapper i.icon,
.title.medium .title-top .left .icon-wrapper svg.icon {
  width: 32px;
  height: 32px;
}

.title.medium .title-top .left .custom-link {
  font-size: 14px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left .custom-link {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left .custom-link {
    font-size: 12px;
  }
}

.title.medium .title-top .left .custom-link i.icon,
.title.medium .title-top .left .custom-link svg.icon {
  width: 12px;
  height: 12px;
}

.title.medium .title-top .left .custom-link i.flag {
  width: 12px;
  height: 12px;
}

.title.medium .title-top .left .title {
  font-size: 24px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left .title {
    font-size: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left .title {
    font-size: 20px;
  }
}

.title.medium .title-top .left .description {
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left .description {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left .description {
    font-size: 14px;
  }
}

.title.medium .title-top .left i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.medium .title-top .left svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 32px;
  height: 32px;
}

.title.medium .title-top .left .badge {
  min-width: 40px;
  max-height: 40px;
  padding: 8px 13px;
  gap: 8px;
  font-size: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .left .badge {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .left .badge {
    font-size: 14px;
  }
}

.title.medium .title-top .left .badge i.icon,
.title.medium .title-top .left .badge svg.icon {
  width: 16.67px;
  height: 16.67px;
}

.title.medium .title-top .right {
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-top .right {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-top .right {
    gap: 12px;
  }
}

.title.medium .title-top .right .btn {
  padding: 8px 13px;
  font-size: 16px;
  height: 40px;
  gap: 8px;
}

.title.medium .title-top .right .btn > i.icon,
.title.medium .title-top .right .btn > svg.icon {
  width: 17px;
  height: 17px;
}

.title.medium .title-top .right .btn > i.flag {
  width: 17px;
  height: 17px;
}

.title.medium .title-top .right .btn.icon-only {
  padding: 8px;
  width: 40px;
  height: 40px;
}

.title.medium .title-bottom {
  padding: 0 32px 16px 32px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-bottom {
    padding: 0 20px 8px 20px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-bottom {
    padding: 0 24px 12px 24px;
    gap: 12px;
  }
}

.title.medium .title-bottom i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.medium .title-bottom svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 16px;
  height: 16px;
}

.title.medium .title-bottom .custom-link {
  font-size: 14px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.medium .title-bottom .custom-link {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.medium .title-bottom .custom-link {
    font-size: 12px;
  }
}

.title.medium .title-bottom .custom-link i.icon,
.title.medium .title-bottom .custom-link svg.icon {
  width: 12px;
  height: 12px;
}

.title.medium .title-bottom .custom-link i.flag {
  width: 12px;
  height: 12px;
}

.title.large .title-top {
  gap: 32px;
  padding: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top {
    gap: 20px;
    padding: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top {
    gap: 24px;
    padding: 24px;
  }
}

.title.large .title-top .left {
  gap: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left {
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left {
    gap: 24px;
  }
}

.title.large .title-top .left .icon-wrapper {
  width: 72px;
  height: 72px;
  padding: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left .icon-wrapper {
    width: 56px;
    height: 56px;
    padding: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left .icon-wrapper {
    width: 64px;
    height: 64px;
    padding: 12px;
  }
}

.title.large .title-top .left .icon-wrapper i.icon,
.title.large .title-top .left .icon-wrapper svg.icon {
  width: 40px;
  height: 40px;
}

.title.large .title-top .left .custom-link {
  font-size: 16px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left .custom-link {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left .custom-link {
    font-size: 14px;
  }
}

.title.large .title-top .left .custom-link i.icon,
.title.large .title-top .left .custom-link svg.icon {
  width: 16px;
  height: 16px;
}

.title.large .title-top .left .custom-link i.flag {
  width: 16px;
  height: 16px;
}

.title.large .title-top .left .title {
  font-size: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left .title {
    font-size: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left .title {
    font-size: 28px;
  }
}

.title.large .title-top .left .description {
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left .description {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left .description {
    font-size: 16px;
  }
}

.title.large .title-top .left i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.large .title-top .left svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 40px;
  height: 40px;
}

.title.large .title-top .left .badge {
  min-width: 48px;
  max-height: 48px;
  padding: 8px 16px;
  gap: 10px;
  font-size: 18px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .left .badge {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .left .badge {
    font-size: 16px;
  }
}

.title.large .title-top .left .badge i.icon,
.title.large .title-top .left .badge svg.icon {
  width: 20px;
  height: 20px;
}

.title.large .title-top .right {
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-top .right {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-top .right {
    gap: 12px;
  }
}

.title.large .title-top .right .btn {
  padding: 8px 16px;
  font-size: 18px;
  height: 48px;
  gap: 10px;
}

.title.large .title-top .right .btn > i.icon,
.title.large .title-top .right .btn > svg.icon {
  width: 20px;
  height: 20px;
}

.title.large .title-top .right .btn > i.flag {
  width: 20px;
  height: 20px;
}

.title.large .title-top .right .btn.icon-only {
  padding: 8px;
  width: 48px;
  height: 48px;
}

.title.large .title-bottom {
  padding: 0 32px 16px 32px;
  gap: 16px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-bottom {
    padding: 0 20px 8px 20px;
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-bottom {
    padding: 0 24px 12px 24px;
    gap: 12px;
  }
}

.title.large .title-bottom i.icon:not(.btn i.icon,
.badge i.icon,
.custom-link i.icon,
.icon-wrapper i.icon),
.title.large .title-bottom svg.icon:not(.btn svg.icon,
.badge svg.icon,
.custom-link svg.icon,
.icon-wrapper svg.icon) {
  width: 16px;
  height: 16px;
}

.title.large .title-bottom .custom-link {
  font-size: 16px;
  gap: 4px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .title.large .title-bottom .custom-link {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .title.large .title-bottom .custom-link {
    font-size: 14px;
  }
}

.title.large .title-bottom .custom-link i.icon,
.title.large .title-bottom .custom-link svg.icon {
  width: 16px;
  height: 16px;
}

.title.large .title-bottom .custom-link i.flag {
  width: 16px;
  height: 16px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.tab-container {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  gap: 8px;
}

.tab-container .btn-tab .icon.small {
  width: 12px;
  height: 12px;
}

.tab-container .btn-tab .icon.medium {
  width: 16px;
  height: 16px;
}

.tab-container .btn-tab .icon.large {
  width: 22px;
  height: 22px;
}

.tab-container .btn-tab .icon.xlarge {
  width: 28px;
  height: 28px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-container {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tab-container {
    gap: 8px;
  }
}

.tab-container .tab-grid-2x4 {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-container .tab-grid-2x4 {
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tab-container .tab-grid-2x4 {
    gap: 24px;
  }
}

.tab-container .tab-grid-2x4 > .tab-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: max-content;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-container .tab-grid-2x4 > .tab-col {
    gap: 8px;
    min-width: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tab-container .tab-grid-2x4 > .tab-col {
    gap: 8px;
  }
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  padding: 8px 16px;
  margin-right: 16px;
  color: var(--swatches-on-base);
  font-weight: 600;
  background-color: var(--swatches-base-default);
  border: 1px solid var(--swatches-on-base-alt);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
  box-sizing: border-box;
  position: relative;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.radius-pill {
  border-radius: 1000px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.radius-round {
  border-radius: 8px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.radius-straigh {
  border-radius: 0;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.default {
  background-color: var(--swatches-base-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.default i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.default svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.default .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.hover {
  background-color: var(--swatches-base-hover);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.hover i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.hover svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.hover .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.active {
  background-color: var(--swatches-base-active-alt);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.active i.icon {
  background-color: var(--swatches-on-primary);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.active svg.icon {
  color: var(--swatches-on-primary);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.active .label-tab {
  color: var(--swatches-on-primary);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.disabled {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.disabled i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.disabled svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-button.disabled .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  padding: 8px 16px;
  color: var(--swatches-on-base);
  font-weight: 600;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--swatches-on-base-alt);
  cursor: pointer;
  transition: border-bottom 0.2s, color 0.2s;
  box-sizing: border-box;
  position: relative;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line {
    gap: 8px;
    padding: 8px 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line {
    gap: 8px;
    padding: 8px 12px;
  }
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.default {
  border-bottom: 1px solid var(--swatches-on-base);
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.default i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.default svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.default .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.hover {
  background-color: var(--swatches-base-hover);
  border-bottom: 2px solid var(--swatches-on-base-alt);
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.hover i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.hover svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.hover .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.active {
  border-bottom: 2px solid var(--swatches-primary-default);
  color: var(--swatches-primary-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.active i.icon {
  background-color: var(--swatches-primary-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.active svg.icon {
  color: var(--swatches-primary-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.active .label-tab {
  color: var(--swatches-primary-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.active .dot-overlay {
  background-color: var(--swatches-primary-default);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.disabled {
  border-bottom: 1px solid var(--swatches-on-base);
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.disabled i.icon {
  background-color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.disabled svg.icon {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.type-line.disabled .label-tab {
  color: var(--swatches-on-base);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .label-tab {
  color: var(--swatches-on-base);
  font-weight: 600;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .label-tab.small {
  font-size: 14px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .label-tab.medium {
  font-size: 16px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .label-tab.large {
  font-size: 18px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .label-tab.xlarge {
  font-size: 20px;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab .dot-overlay {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background-color: var(--swatches-error-hover);
  border-radius: 50%;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.has-error {
  border-color: var(--swatches-error-hover) !important;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.disabled.type-button {
  background-color: var(--swatches-base-default);
  border: 1px solid var(--swatches-on-base-alt);
}

.tab-container .tab-grid-2x4 > .tab-col .btn-tab.disabled.type-line {
  border: none;
  border-bottom: 1px solid var(--swatches-on-base-alt);
}

.tab-container .tab-grid-2x4 > .tab-col .tab-trigger-wrapper {
  position: relative;
  display: inline-flex;
}

.tab-container .tab-grid-2x4 > .tab-col .tab-trigger-wrapper .tab-badge {
  position: absolute;
  top: 0;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--swatches-error-hover);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.tab-container .tab-grid-2x4 > .tab-col .tab-trigger-wrapper .tab-badge.tab-badge-small {
  min-width: 12px;
  height: 12px;
  padding: 1px;
  font-size: 8px;
}

.tab-container .tab-grid-2x4 > .tab-col .tab-trigger-wrapper .tab-badge.tab-badge-medium {
  min-width: 14px;
  height: 14px;
  padding: 2px;
  font-size: 10px;
}

.tab-container .tab-grid-2x4 > .tab-col .tab-trigger-wrapper .tab-badge.tab-badge-large {
  min-width: 18px;
  height: 18px;
  padding: 3px;
  font-size: 12px;
}

.tab-vertical-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.tab-horizontal .tab-grid-2x4 {
  flex-direction: row;
  align-items: flex-start;
}

.tab-horizontal .tab-grid-2x4 > .tab-col {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-horizontal .tab-grid-2x4 > .tab-col {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tab-horizontal .tab-grid-2x4 > .tab-col::-webkit-scrollbar {
    display: none;
  }
  .tab-horizontal .tab-grid-2x4 > .tab-col .btn-tab,
  .tab-horizontal .tab-grid-2x4 > .tab-col .tab-trigger-wrapper {
    flex-shrink: 0;
  }
}

.tab-children {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin-top: 8px;
  box-sizing: border-box;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tab-children {
    margin-top: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tab-children {
    margin-top: 8px;
  }
}

.tab-children .tab-children-inner {
  width: 100%;
  height: 100%;
  color: var(--swatches-on-base);
  padding: 16px;
  box-sizing: border-box;
}

.tab-position-top .tab-vertical-wrapper {
  flex-direction: column;
}

.tab-position-top .tab-grid-2x4 {
  order: 0;
  width: 100%;
}

.tab-position-top .tab-children {
  order: 1;
}

.tab-position-bottom .tab-vertical-wrapper {
  flex-direction: column;
}

.tab-position-bottom .tab-grid-2x4 {
  order: 1;
}

.tab-position-bottom .tab-children {
  order: 0;
}

.tab-position-left .tab-vertical-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}

.tab-position-left .tab-grid-2x4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  order: 0;
  flex: 0 0 auto;
  padding-right: 8px;
}

.tab-position-left .tab-children {
  order: 1;
  flex: 1 1 auto;
  margin: 0;
  padding-left: 8px;
}

.tab-position-left .tab-grid-2x4 > .tab-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tab-position-right .tab-vertical-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}

.tab-position-right .tab-grid-2x4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  order: 1;
  flex: 0 0 auto;
  padding-left: 8px;
}

.tab-position-right .tab-children {
  order: 0;
  flex: 1 1 auto;
  margin: 0;
  padding-right: 8px;
}

.tab-position-right .tab-grid-2x4 > .tab-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.progress-bar {
  width: 100%;
  background-color: var(--swatches-background);
  overflow: hidden;
}

.progress-bar .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  background-color: var(--swatches-on-base);
}

.progress-bar .progress-fill.base {
  background-color: var(--swatches-on-base);
}

.progress-bar .progress-fill.warning {
  background-color: var(--swatches-warning-hover);
}

.progress-bar .progress-fill.error {
  background-color: var(--swatches-on-surface-error);
}

.progress-bar .progress-fill.success {
  background-color: var(--swatches-on-surface-success);
}

.progress-bar.radius-pill {
  border-radius: 1000px;
}

.progress-bar.radius-straigh {
  border-radius: 0;
}

.progress-bar.small {
  height: 2px;
}

.progress-bar.medium {
  height: 4px;
}

.progress-bar.large {
  height: 8px;
}

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

.progress-row > .progress-track {
  flex: 1 1 auto;
}

.progress-row > .progress-label {
  margin: 0;
  white-space: nowrap;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

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

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

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

.tooltip {
  position: absolute;
  background-color: var(--swatches-base-default);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  max-width: 280px;
  width: max-content;
  font-family: var(--font-body);
}

.tooltip .tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.tooltip .tooltip-header .tooltip-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--swatches-on-surface-neutral);
  margin: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tooltip .tooltip-header .tooltip-title {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tooltip .tooltip-header .tooltip-title {
    font-size: 12px;
  }
}

.tooltip .tooltip-header .tooltip-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  margin-left: 12px;
  line-height: 1;
}

.tooltip .tooltip-header .tooltip-close i {
  background-color: var(--swatches-on-surface-neutral);
  width: 16px;
  height: 16px;
}

.tooltip .tooltip-header .tooltip-close svg {
  width: 16px;
  height: 16px;
  color: var(--swatches-on-surface-neutral);
}

.tooltip .tooltip-content p {
  font-size: 12px;
  color: var(--swatches-on-surface-neutral);
  font-weight: 400;
  margin: 0;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tooltip .tooltip-content p {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tooltip .tooltip-content p {
    font-size: 10px;
  }
}

.tooltip .tooltip-footer {
  margin-top: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.tooltip .tooltip-footer .stage {
  height: 100%;
  width: auto;
  flex: 1 0 0;
  align-items: center;
  color: var(--swatches-on-surface-neutral-alt);
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 400;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tooltip .tooltip-footer .stage {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tooltip .tooltip-footer .stage {
    font-size: 10px;
  }
}

.tooltip .tooltip-footer .actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 360px) and (max-width: 767px) {
  .tooltip .tooltip-footer .actions {
    gap: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tooltip .tooltip-footer .actions {
    gap: 8px;
  }
}

.tooltip::before, .tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.tooltip::before {
  z-index: -1;
}

.tooltip::after {
  z-index: 1;
}

.tooltip.tooltip-top {
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.tooltip-top::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom: none;
  filter: blur(1px);
}

.tooltip.tooltip-top::after {
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border-top-color: white;
  border-bottom: none;
}

.tooltip.tooltip-bottom {
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.tooltip-bottom::before {
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: rgba(0, 0, 0, 0.15);
  border-top: none;
  filter: blur(1px);
}

.tooltip.tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: white;
  border-top: none;
}

.tooltip.tooltip-left {
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.tooltip-left::before {
  left: calc(100% + 1px);
  top: 50%;
  transform: translateY(-50%);
  border-left-color: rgba(0, 0, 0, 0.15);
  border-right: none;
  filter: blur(1px);
}

.tooltip.tooltip-left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: white;
  border-right: none;
}

.tooltip.tooltip-right {
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.tooltip-right::before {
  right: calc(100% + 1px);
  top: 50%;
  transform: translateY(-50%);
  border-right-color: rgba(0, 0, 0, 0.15);
  border-left: none;
  filter: blur(1px);
}

.tooltip.tooltip-right::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: white;
  border-left: none;
}

.tooltip.tooltip-top-left {
  bottom: calc(100% + 12px);
  left: 0;
  transform: none;
}

.tooltip.tooltip-top-left::before {
  top: 100%;
  left: 24px;
  transform: none;
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom: none;
  filter: blur(1px);
}

.tooltip.tooltip-top-left::after {
  top: calc(100% - 1px);
  left: 24px;
  transform: none;
  border-top-color: white;
  border-bottom: none;
}

.tooltip.tooltip-bottom-left {
  top: calc(100% + 12px);
  left: 0;
  transform: none;
}

.tooltip.tooltip-bottom-left::before {
  top: -9px;
  left: 24px;
  transform: none;
  border-bottom-color: rgba(0, 0, 0, 0.15);
  border-top: none;
  filter: blur(1px);
}

.tooltip.tooltip-bottom-left::after {
  top: -8px;
  left: 24px;
  transform: none;
  border-bottom-color: white;
  border-top: none;
}

.tooltip.tooltip-top-right {
  bottom: calc(100% + 12px);
  right: 0;
  transform: none;
}

.tooltip.tooltip-top-right::before {
  top: 100%;
  right: 24px;
  left: auto;
  transform: none;
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom: none;
  filter: blur(1px);
}

.tooltip.tooltip-top-right::after {
  top: calc(100% - 1px);
  right: 24px;
  left: auto;
  transform: none;
  border-top-color: white;
  border-bottom: none;
}

.tooltip.tooltip-bottom-right {
  top: calc(100% + 12px);
  right: 0;
  transform: none;
}

.tooltip.tooltip-bottom-right::before {
  top: -9px;
  right: 24px;
  left: auto;
  transform: none;
  border-bottom-color: rgba(0, 0, 0, 0.15);
  border-top: none;
  filter: blur(1px);
}

.tooltip.tooltip-bottom-right::after {
  top: -8px;
  right: 24px;
  left: auto;
  transform: none;
  border-bottom-color: white;
  border-top: none;
}

.tooltip.tooltip-left-top, .tooltip.tooltip-right-top {
  top: 0;
  transform: none;
}

.tooltip.tooltip-left-top::before, .tooltip.tooltip-left-top::after, .tooltip.tooltip-right-top::before, .tooltip.tooltip-right-top::after {
  top: 24px;
  transform: none;
}

.tooltip.tooltip-left-bottom, .tooltip.tooltip-right-bottom {
  bottom: 0;
  top: auto;
  transform: none;
}

.tooltip.tooltip-left-bottom::before, .tooltip.tooltip-left-bottom::after, .tooltip.tooltip-right-bottom::before, .tooltip.tooltip-right-bottom::after {
  bottom: 24px;
  top: auto;
  transform: none;
}

.tooltip.tooltip-left-top {
  right: calc(100% + 16px);
}

.tooltip.tooltip-left-top::before {
  left: calc(100% + 1px);
  top: 24px;
  transform: none;
  border-left-color: rgba(0, 0, 0, 0.15);
  border-right: none;
  filter: blur(1px);
}

.tooltip.tooltip-left-top::after {
  left: 100%;
  top: 24px;
  transform: none;
  border-left-color: white;
  border-right: none;
}

.tooltip.tooltip-left-bottom {
  right: calc(100% + 16px);
}

.tooltip.tooltip-left-bottom::before {
  left: calc(100% + 1px);
  bottom: 24px;
  top: auto;
  transform: none;
  border-left-color: rgba(0, 0, 0, 0.15);
  border-right: none;
  filter: blur(1px);
}

.tooltip.tooltip-left-bottom::after {
  left: 100%;
  bottom: 24px;
  top: auto;
  transform: none;
  border-left-color: white;
  border-right: none;
}

.tooltip.tooltip-right-top {
  left: calc(100% + 16px);
}

.tooltip.tooltip-right-top::before {
  right: calc(100% + 1px);
  top: 24px;
  transform: none;
  border-right-color: rgba(0, 0, 0, 0.15);
  border-left: none;
  filter: blur(1px);
}

.tooltip.tooltip-right-top::after {
  right: 100%;
  top: 24px;
  transform: none;
  border-right-color: white;
  border-left: none;
}

.tooltip.tooltip-right-bottom {
  left: calc(100% + 16px);
}

.tooltip.tooltip-right-bottom::before {
  right: calc(100% + 1px);
  bottom: 24px;
  top: auto;
  transform: none;
  border-right-color: rgba(0, 0, 0, 0.15);
  border-left: none;
  filter: blur(1px);
}

.tooltip.tooltip-right-bottom::after {
  right: 100%;
  bottom: 24px;
  top: auto;
  transform: none;
  border-right-color: white;
  border-left: none;
}

.tooltip.caret-x-1::before, .tooltip.caret-x-1::after {
  left: 1%;
  transform: translateX(-50%);
}

.tooltip.caret-x-2::before, .tooltip.caret-x-2::after {
  left: 2%;
  transform: translateX(-50%);
}

.tooltip.caret-x-3::before, .tooltip.caret-x-3::after {
  left: 3%;
  transform: translateX(-50%);
}

.tooltip.caret-x-4::before, .tooltip.caret-x-4::after {
  left: 4%;
  transform: translateX(-50%);
}

.tooltip.caret-x-5::before, .tooltip.caret-x-5::after {
  left: 5%;
  transform: translateX(-50%);
}

.tooltip.caret-x-6::before, .tooltip.caret-x-6::after {
  left: 6%;
  transform: translateX(-50%);
}

.tooltip.caret-x-7::before, .tooltip.caret-x-7::after {
  left: 7%;
  transform: translateX(-50%);
}

.tooltip.caret-x-8::before, .tooltip.caret-x-8::after {
  left: 8%;
  transform: translateX(-50%);
}

.tooltip.caret-x-9::before, .tooltip.caret-x-9::after {
  left: 9%;
  transform: translateX(-50%);
}

.tooltip.caret-x-10::before, .tooltip.caret-x-10::after {
  left: 10%;
  transform: translateX(-50%);
}

.tooltip.caret-x-11::before, .tooltip.caret-x-11::after {
  left: 11%;
  transform: translateX(-50%);
}

.tooltip.caret-x-12::before, .tooltip.caret-x-12::after {
  left: 12%;
  transform: translateX(-50%);
}

.tooltip.caret-x-13::before, .tooltip.caret-x-13::after {
  left: 13%;
  transform: translateX(-50%);
}

.tooltip.caret-x-14::before, .tooltip.caret-x-14::after {
  left: 14%;
  transform: translateX(-50%);
}

.tooltip.caret-x-15::before, .tooltip.caret-x-15::after {
  left: 15%;
  transform: translateX(-50%);
}

.tooltip.caret-x-16::before, .tooltip.caret-x-16::after {
  left: 16%;
  transform: translateX(-50%);
}

.tooltip.caret-x-17::before, .tooltip.caret-x-17::after {
  left: 17%;
  transform: translateX(-50%);
}

.tooltip.caret-x-18::before, .tooltip.caret-x-18::after {
  left: 18%;
  transform: translateX(-50%);
}

.tooltip.caret-x-19::before, .tooltip.caret-x-19::after {
  left: 19%;
  transform: translateX(-50%);
}

.tooltip.caret-x-20::before, .tooltip.caret-x-20::after {
  left: 20%;
  transform: translateX(-50%);
}

.tooltip.caret-x-21::before, .tooltip.caret-x-21::after {
  left: 21%;
  transform: translateX(-50%);
}

.tooltip.caret-x-22::before, .tooltip.caret-x-22::after {
  left: 22%;
  transform: translateX(-50%);
}

.tooltip.caret-x-23::before, .tooltip.caret-x-23::after {
  left: 23%;
  transform: translateX(-50%);
}

.tooltip.caret-x-24::before, .tooltip.caret-x-24::after {
  left: 24%;
  transform: translateX(-50%);
}

.tooltip.caret-x-25::before, .tooltip.caret-x-25::after {
  left: 25%;
  transform: translateX(-50%);
}

.tooltip.caret-x-26::before, .tooltip.caret-x-26::after {
  left: 26%;
  transform: translateX(-50%);
}

.tooltip.caret-x-27::before, .tooltip.caret-x-27::after {
  left: 27%;
  transform: translateX(-50%);
}

.tooltip.caret-x-28::before, .tooltip.caret-x-28::after {
  left: 28%;
  transform: translateX(-50%);
}

.tooltip.caret-x-29::before, .tooltip.caret-x-29::after {
  left: 29%;
  transform: translateX(-50%);
}

.tooltip.caret-x-30::before, .tooltip.caret-x-30::after {
  left: 30%;
  transform: translateX(-50%);
}

.tooltip.caret-x-31::before, .tooltip.caret-x-31::after {
  left: 31%;
  transform: translateX(-50%);
}

.tooltip.caret-x-32::before, .tooltip.caret-x-32::after {
  left: 32%;
  transform: translateX(-50%);
}

.tooltip.caret-x-33::before, .tooltip.caret-x-33::after {
  left: 33%;
  transform: translateX(-50%);
}

.tooltip.caret-x-34::before, .tooltip.caret-x-34::after {
  left: 34%;
  transform: translateX(-50%);
}

.tooltip.caret-x-35::before, .tooltip.caret-x-35::after {
  left: 35%;
  transform: translateX(-50%);
}

.tooltip.caret-x-36::before, .tooltip.caret-x-36::after {
  left: 36%;
  transform: translateX(-50%);
}

.tooltip.caret-x-37::before, .tooltip.caret-x-37::after {
  left: 37%;
  transform: translateX(-50%);
}

.tooltip.caret-x-38::before, .tooltip.caret-x-38::after {
  left: 38%;
  transform: translateX(-50%);
}

.tooltip.caret-x-39::before, .tooltip.caret-x-39::after {
  left: 39%;
  transform: translateX(-50%);
}

.tooltip.caret-x-40::before, .tooltip.caret-x-40::after {
  left: 40%;
  transform: translateX(-50%);
}

.tooltip.caret-x-41::before, .tooltip.caret-x-41::after {
  left: 41%;
  transform: translateX(-50%);
}

.tooltip.caret-x-42::before, .tooltip.caret-x-42::after {
  left: 42%;
  transform: translateX(-50%);
}

.tooltip.caret-x-43::before, .tooltip.caret-x-43::after {
  left: 43%;
  transform: translateX(-50%);
}

.tooltip.caret-x-44::before, .tooltip.caret-x-44::after {
  left: 44%;
  transform: translateX(-50%);
}

.tooltip.caret-x-45::before, .tooltip.caret-x-45::after {
  left: 45%;
  transform: translateX(-50%);
}

.tooltip.caret-x-46::before, .tooltip.caret-x-46::after {
  left: 46%;
  transform: translateX(-50%);
}

.tooltip.caret-x-47::before, .tooltip.caret-x-47::after {
  left: 47%;
  transform: translateX(-50%);
}

.tooltip.caret-x-48::before, .tooltip.caret-x-48::after {
  left: 48%;
  transform: translateX(-50%);
}

.tooltip.caret-x-49::before, .tooltip.caret-x-49::after {
  left: 49%;
  transform: translateX(-50%);
}

.tooltip.caret-x-50::before, .tooltip.caret-x-50::after {
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.caret-x-51::before, .tooltip.caret-x-51::after {
  left: 51%;
  transform: translateX(-50%);
}

.tooltip.caret-x-52::before, .tooltip.caret-x-52::after {
  left: 52%;
  transform: translateX(-50%);
}

.tooltip.caret-x-53::before, .tooltip.caret-x-53::after {
  left: 53%;
  transform: translateX(-50%);
}

.tooltip.caret-x-54::before, .tooltip.caret-x-54::after {
  left: 54%;
  transform: translateX(-50%);
}

.tooltip.caret-x-55::before, .tooltip.caret-x-55::after {
  left: 55%;
  transform: translateX(-50%);
}

.tooltip.caret-x-56::before, .tooltip.caret-x-56::after {
  left: 56%;
  transform: translateX(-50%);
}

.tooltip.caret-x-57::before, .tooltip.caret-x-57::after {
  left: 57%;
  transform: translateX(-50%);
}

.tooltip.caret-x-58::before, .tooltip.caret-x-58::after {
  left: 58%;
  transform: translateX(-50%);
}

.tooltip.caret-x-59::before, .tooltip.caret-x-59::after {
  left: 59%;
  transform: translateX(-50%);
}

.tooltip.caret-x-60::before, .tooltip.caret-x-60::after {
  left: 60%;
  transform: translateX(-50%);
}

.tooltip.caret-x-61::before, .tooltip.caret-x-61::after {
  left: 61%;
  transform: translateX(-50%);
}

.tooltip.caret-x-62::before, .tooltip.caret-x-62::after {
  left: 62%;
  transform: translateX(-50%);
}

.tooltip.caret-x-63::before, .tooltip.caret-x-63::after {
  left: 63%;
  transform: translateX(-50%);
}

.tooltip.caret-x-64::before, .tooltip.caret-x-64::after {
  left: 64%;
  transform: translateX(-50%);
}

.tooltip.caret-x-65::before, .tooltip.caret-x-65::after {
  left: 65%;
  transform: translateX(-50%);
}

.tooltip.caret-x-66::before, .tooltip.caret-x-66::after {
  left: 66%;
  transform: translateX(-50%);
}

.tooltip.caret-x-67::before, .tooltip.caret-x-67::after {
  left: 67%;
  transform: translateX(-50%);
}

.tooltip.caret-x-68::before, .tooltip.caret-x-68::after {
  left: 68%;
  transform: translateX(-50%);
}

.tooltip.caret-x-69::before, .tooltip.caret-x-69::after {
  left: 69%;
  transform: translateX(-50%);
}

.tooltip.caret-x-70::before, .tooltip.caret-x-70::after {
  left: 70%;
  transform: translateX(-50%);
}

.tooltip.caret-x-71::before, .tooltip.caret-x-71::after {
  left: 71%;
  transform: translateX(-50%);
}

.tooltip.caret-x-72::before, .tooltip.caret-x-72::after {
  left: 72%;
  transform: translateX(-50%);
}

.tooltip.caret-x-73::before, .tooltip.caret-x-73::after {
  left: 73%;
  transform: translateX(-50%);
}

.tooltip.caret-x-74::before, .tooltip.caret-x-74::after {
  left: 74%;
  transform: translateX(-50%);
}

.tooltip.caret-x-75::before, .tooltip.caret-x-75::after {
  left: 75%;
  transform: translateX(-50%);
}

.tooltip.caret-x-76::before, .tooltip.caret-x-76::after {
  left: 76%;
  transform: translateX(-50%);
}

.tooltip.caret-x-77::before, .tooltip.caret-x-77::after {
  left: 77%;
  transform: translateX(-50%);
}

.tooltip.caret-x-78::before, .tooltip.caret-x-78::after {
  left: 78%;
  transform: translateX(-50%);
}

.tooltip.caret-x-79::before, .tooltip.caret-x-79::after {
  left: 79%;
  transform: translateX(-50%);
}

.tooltip.caret-x-80::before, .tooltip.caret-x-80::after {
  left: 80%;
  transform: translateX(-50%);
}

.tooltip.caret-x-81::before, .tooltip.caret-x-81::after {
  left: 81%;
  transform: translateX(-50%);
}

.tooltip.caret-x-82::before, .tooltip.caret-x-82::after {
  left: 82%;
  transform: translateX(-50%);
}

.tooltip.caret-x-83::before, .tooltip.caret-x-83::after {
  left: 83%;
  transform: translateX(-50%);
}

.tooltip.caret-x-84::before, .tooltip.caret-x-84::after {
  left: 84%;
  transform: translateX(-50%);
}

.tooltip.caret-x-85::before, .tooltip.caret-x-85::after {
  left: 85%;
  transform: translateX(-50%);
}

.tooltip.caret-x-86::before, .tooltip.caret-x-86::after {
  left: 86%;
  transform: translateX(-50%);
}

.tooltip.caret-x-87::before, .tooltip.caret-x-87::after {
  left: 87%;
  transform: translateX(-50%);
}

.tooltip.caret-x-88::before, .tooltip.caret-x-88::after {
  left: 88%;
  transform: translateX(-50%);
}

.tooltip.caret-x-89::before, .tooltip.caret-x-89::after {
  left: 89%;
  transform: translateX(-50%);
}

.tooltip.caret-x-90::before, .tooltip.caret-x-90::after {
  left: 90%;
  transform: translateX(-50%);
}

.tooltip.caret-x-91::before, .tooltip.caret-x-91::after {
  left: 91%;
  transform: translateX(-50%);
}

.tooltip.caret-x-92::before, .tooltip.caret-x-92::after {
  left: 92%;
  transform: translateX(-50%);
}

.tooltip.caret-x-93::before, .tooltip.caret-x-93::after {
  left: 93%;
  transform: translateX(-50%);
}

.tooltip.caret-x-94::before, .tooltip.caret-x-94::after {
  left: 94%;
  transform: translateX(-50%);
}

.tooltip.caret-x-95::before, .tooltip.caret-x-95::after {
  left: 95%;
  transform: translateX(-50%);
}

.tooltip.caret-x-96::before, .tooltip.caret-x-96::after {
  left: 96%;
  transform: translateX(-50%);
}

.tooltip.caret-x-97::before, .tooltip.caret-x-97::after {
  left: 97%;
  transform: translateX(-50%);
}

.tooltip.caret-x-98::before, .tooltip.caret-x-98::after {
  left: 98%;
  transform: translateX(-50%);
}

.tooltip.caret-x-99::before, .tooltip.caret-x-99::after {
  left: 99%;
  transform: translateX(-50%);
}

.tooltip.caret-x-100::before, .tooltip.caret-x-100::after {
  left: 100%;
  transform: translateX(-50%);
}

.tooltip.caret-y-1::before, .tooltip.caret-y-1::after {
  top: 1%;
  transform: translateY(-50%);
}

.tooltip.caret-y-2::before, .tooltip.caret-y-2::after {
  top: 2%;
  transform: translateY(-50%);
}

.tooltip.caret-y-3::before, .tooltip.caret-y-3::after {
  top: 3%;
  transform: translateY(-50%);
}

.tooltip.caret-y-4::before, .tooltip.caret-y-4::after {
  top: 4%;
  transform: translateY(-50%);
}

.tooltip.caret-y-5::before, .tooltip.caret-y-5::after {
  top: 5%;
  transform: translateY(-50%);
}

.tooltip.caret-y-6::before, .tooltip.caret-y-6::after {
  top: 6%;
  transform: translateY(-50%);
}

.tooltip.caret-y-7::before, .tooltip.caret-y-7::after {
  top: 7%;
  transform: translateY(-50%);
}

.tooltip.caret-y-8::before, .tooltip.caret-y-8::after {
  top: 8%;
  transform: translateY(-50%);
}

.tooltip.caret-y-9::before, .tooltip.caret-y-9::after {
  top: 9%;
  transform: translateY(-50%);
}

.tooltip.caret-y-10::before, .tooltip.caret-y-10::after {
  top: 10%;
  transform: translateY(-50%);
}

.tooltip.caret-y-11::before, .tooltip.caret-y-11::after {
  top: 11%;
  transform: translateY(-50%);
}

.tooltip.caret-y-12::before, .tooltip.caret-y-12::after {
  top: 12%;
  transform: translateY(-50%);
}

.tooltip.caret-y-13::before, .tooltip.caret-y-13::after {
  top: 13%;
  transform: translateY(-50%);
}

.tooltip.caret-y-14::before, .tooltip.caret-y-14::after {
  top: 14%;
  transform: translateY(-50%);
}

.tooltip.caret-y-15::before, .tooltip.caret-y-15::after {
  top: 15%;
  transform: translateY(-50%);
}

.tooltip.caret-y-16::before, .tooltip.caret-y-16::after {
  top: 16%;
  transform: translateY(-50%);
}

.tooltip.caret-y-17::before, .tooltip.caret-y-17::after {
  top: 17%;
  transform: translateY(-50%);
}

.tooltip.caret-y-18::before, .tooltip.caret-y-18::after {
  top: 18%;
  transform: translateY(-50%);
}

.tooltip.caret-y-19::before, .tooltip.caret-y-19::after {
  top: 19%;
  transform: translateY(-50%);
}

.tooltip.caret-y-20::before, .tooltip.caret-y-20::after {
  top: 20%;
  transform: translateY(-50%);
}

.tooltip.caret-y-21::before, .tooltip.caret-y-21::after {
  top: 21%;
  transform: translateY(-50%);
}

.tooltip.caret-y-22::before, .tooltip.caret-y-22::after {
  top: 22%;
  transform: translateY(-50%);
}

.tooltip.caret-y-23::before, .tooltip.caret-y-23::after {
  top: 23%;
  transform: translateY(-50%);
}

.tooltip.caret-y-24::before, .tooltip.caret-y-24::after {
  top: 24%;
  transform: translateY(-50%);
}

.tooltip.caret-y-25::before, .tooltip.caret-y-25::after {
  top: 25%;
  transform: translateY(-50%);
}

.tooltip.caret-y-26::before, .tooltip.caret-y-26::after {
  top: 26%;
  transform: translateY(-50%);
}

.tooltip.caret-y-27::before, .tooltip.caret-y-27::after {
  top: 27%;
  transform: translateY(-50%);
}

.tooltip.caret-y-28::before, .tooltip.caret-y-28::after {
  top: 28%;
  transform: translateY(-50%);
}

.tooltip.caret-y-29::before, .tooltip.caret-y-29::after {
  top: 29%;
  transform: translateY(-50%);
}

.tooltip.caret-y-30::before, .tooltip.caret-y-30::after {
  top: 30%;
  transform: translateY(-50%);
}

.tooltip.caret-y-31::before, .tooltip.caret-y-31::after {
  top: 31%;
  transform: translateY(-50%);
}

.tooltip.caret-y-32::before, .tooltip.caret-y-32::after {
  top: 32%;
  transform: translateY(-50%);
}

.tooltip.caret-y-33::before, .tooltip.caret-y-33::after {
  top: 33%;
  transform: translateY(-50%);
}

.tooltip.caret-y-34::before, .tooltip.caret-y-34::after {
  top: 34%;
  transform: translateY(-50%);
}

.tooltip.caret-y-35::before, .tooltip.caret-y-35::after {
  top: 35%;
  transform: translateY(-50%);
}

.tooltip.caret-y-36::before, .tooltip.caret-y-36::after {
  top: 36%;
  transform: translateY(-50%);
}

.tooltip.caret-y-37::before, .tooltip.caret-y-37::after {
  top: 37%;
  transform: translateY(-50%);
}

.tooltip.caret-y-38::before, .tooltip.caret-y-38::after {
  top: 38%;
  transform: translateY(-50%);
}

.tooltip.caret-y-39::before, .tooltip.caret-y-39::after {
  top: 39%;
  transform: translateY(-50%);
}

.tooltip.caret-y-40::before, .tooltip.caret-y-40::after {
  top: 40%;
  transform: translateY(-50%);
}

.tooltip.caret-y-41::before, .tooltip.caret-y-41::after {
  top: 41%;
  transform: translateY(-50%);
}

.tooltip.caret-y-42::before, .tooltip.caret-y-42::after {
  top: 42%;
  transform: translateY(-50%);
}

.tooltip.caret-y-43::before, .tooltip.caret-y-43::after {
  top: 43%;
  transform: translateY(-50%);
}

.tooltip.caret-y-44::before, .tooltip.caret-y-44::after {
  top: 44%;
  transform: translateY(-50%);
}

.tooltip.caret-y-45::before, .tooltip.caret-y-45::after {
  top: 45%;
  transform: translateY(-50%);
}

.tooltip.caret-y-46::before, .tooltip.caret-y-46::after {
  top: 46%;
  transform: translateY(-50%);
}

.tooltip.caret-y-47::before, .tooltip.caret-y-47::after {
  top: 47%;
  transform: translateY(-50%);
}

.tooltip.caret-y-48::before, .tooltip.caret-y-48::after {
  top: 48%;
  transform: translateY(-50%);
}

.tooltip.caret-y-49::before, .tooltip.caret-y-49::after {
  top: 49%;
  transform: translateY(-50%);
}

.tooltip.caret-y-50::before, .tooltip.caret-y-50::after {
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.caret-y-51::before, .tooltip.caret-y-51::after {
  top: 51%;
  transform: translateY(-50%);
}

.tooltip.caret-y-52::before, .tooltip.caret-y-52::after {
  top: 52%;
  transform: translateY(-50%);
}

.tooltip.caret-y-53::before, .tooltip.caret-y-53::after {
  top: 53%;
  transform: translateY(-50%);
}

.tooltip.caret-y-54::before, .tooltip.caret-y-54::after {
  top: 54%;
  transform: translateY(-50%);
}

.tooltip.caret-y-55::before, .tooltip.caret-y-55::after {
  top: 55%;
  transform: translateY(-50%);
}

.tooltip.caret-y-56::before, .tooltip.caret-y-56::after {
  top: 56%;
  transform: translateY(-50%);
}

.tooltip.caret-y-57::before, .tooltip.caret-y-57::after {
  top: 57%;
  transform: translateY(-50%);
}

.tooltip.caret-y-58::before, .tooltip.caret-y-58::after {
  top: 58%;
  transform: translateY(-50%);
}

.tooltip.caret-y-59::before, .tooltip.caret-y-59::after {
  top: 59%;
  transform: translateY(-50%);
}

.tooltip.caret-y-60::before, .tooltip.caret-y-60::after {
  top: 60%;
  transform: translateY(-50%);
}

.tooltip.caret-y-61::before, .tooltip.caret-y-61::after {
  top: 61%;
  transform: translateY(-50%);
}

.tooltip.caret-y-62::before, .tooltip.caret-y-62::after {
  top: 62%;
  transform: translateY(-50%);
}

.tooltip.caret-y-63::before, .tooltip.caret-y-63::after {
  top: 63%;
  transform: translateY(-50%);
}

.tooltip.caret-y-64::before, .tooltip.caret-y-64::after {
  top: 64%;
  transform: translateY(-50%);
}

.tooltip.caret-y-65::before, .tooltip.caret-y-65::after {
  top: 65%;
  transform: translateY(-50%);
}

.tooltip.caret-y-66::before, .tooltip.caret-y-66::after {
  top: 66%;
  transform: translateY(-50%);
}

.tooltip.caret-y-67::before, .tooltip.caret-y-67::after {
  top: 67%;
  transform: translateY(-50%);
}

.tooltip.caret-y-68::before, .tooltip.caret-y-68::after {
  top: 68%;
  transform: translateY(-50%);
}

.tooltip.caret-y-69::before, .tooltip.caret-y-69::after {
  top: 69%;
  transform: translateY(-50%);
}

.tooltip.caret-y-70::before, .tooltip.caret-y-70::after {
  top: 70%;
  transform: translateY(-50%);
}

.tooltip.caret-y-71::before, .tooltip.caret-y-71::after {
  top: 71%;
  transform: translateY(-50%);
}

.tooltip.caret-y-72::before, .tooltip.caret-y-72::after {
  top: 72%;
  transform: translateY(-50%);
}

.tooltip.caret-y-73::before, .tooltip.caret-y-73::after {
  top: 73%;
  transform: translateY(-50%);
}

.tooltip.caret-y-74::before, .tooltip.caret-y-74::after {
  top: 74%;
  transform: translateY(-50%);
}

.tooltip.caret-y-75::before, .tooltip.caret-y-75::after {
  top: 75%;
  transform: translateY(-50%);
}

.tooltip.caret-y-76::before, .tooltip.caret-y-76::after {
  top: 76%;
  transform: translateY(-50%);
}

.tooltip.caret-y-77::before, .tooltip.caret-y-77::after {
  top: 77%;
  transform: translateY(-50%);
}

.tooltip.caret-y-78::before, .tooltip.caret-y-78::after {
  top: 78%;
  transform: translateY(-50%);
}

.tooltip.caret-y-79::before, .tooltip.caret-y-79::after {
  top: 79%;
  transform: translateY(-50%);
}

.tooltip.caret-y-80::before, .tooltip.caret-y-80::after {
  top: 80%;
  transform: translateY(-50%);
}

.tooltip.caret-y-81::before, .tooltip.caret-y-81::after {
  top: 81%;
  transform: translateY(-50%);
}

.tooltip.caret-y-82::before, .tooltip.caret-y-82::after {
  top: 82%;
  transform: translateY(-50%);
}

.tooltip.caret-y-83::before, .tooltip.caret-y-83::after {
  top: 83%;
  transform: translateY(-50%);
}

.tooltip.caret-y-84::before, .tooltip.caret-y-84::after {
  top: 84%;
  transform: translateY(-50%);
}

.tooltip.caret-y-85::before, .tooltip.caret-y-85::after {
  top: 85%;
  transform: translateY(-50%);
}

.tooltip.caret-y-86::before, .tooltip.caret-y-86::after {
  top: 86%;
  transform: translateY(-50%);
}

.tooltip.caret-y-87::before, .tooltip.caret-y-87::after {
  top: 87%;
  transform: translateY(-50%);
}

.tooltip.caret-y-88::before, .tooltip.caret-y-88::after {
  top: 88%;
  transform: translateY(-50%);
}

.tooltip.caret-y-89::before, .tooltip.caret-y-89::after {
  top: 89%;
  transform: translateY(-50%);
}

.tooltip.caret-y-90::before, .tooltip.caret-y-90::after {
  top: 90%;
  transform: translateY(-50%);
}

.tooltip.caret-y-91::before, .tooltip.caret-y-91::after {
  top: 91%;
  transform: translateY(-50%);
}

.tooltip.caret-y-92::before, .tooltip.caret-y-92::after {
  top: 92%;
  transform: translateY(-50%);
}

.tooltip.caret-y-93::before, .tooltip.caret-y-93::after {
  top: 93%;
  transform: translateY(-50%);
}

.tooltip.caret-y-94::before, .tooltip.caret-y-94::after {
  top: 94%;
  transform: translateY(-50%);
}

.tooltip.caret-y-95::before, .tooltip.caret-y-95::after {
  top: 95%;
  transform: translateY(-50%);
}

.tooltip.caret-y-96::before, .tooltip.caret-y-96::after {
  top: 96%;
  transform: translateY(-50%);
}

.tooltip.caret-y-97::before, .tooltip.caret-y-97::after {
  top: 97%;
  transform: translateY(-50%);
}

.tooltip.caret-y-98::before, .tooltip.caret-y-98::after {
  top: 98%;
  transform: translateY(-50%);
}

.tooltip.caret-y-99::before, .tooltip.caret-y-99::after {
  top: 99%;
  transform: translateY(-50%);
}

.tooltip.caret-y-100::before, .tooltip.caret-y-100::after {
  top: 100%;
  transform: translateY(-50%);
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.accordion .accordion-item {
  border: 1px solid var(--swatches-border);
  overflow: hidden;
}

.accordion .accordion-item.radius-round {
  border-radius: 8px;
}

.accordion .accordion-item.radius-round-first {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.accordion .accordion-item.radius-round-last {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.accordion .accordion-item.radius-null {
  border-radius: 0;
}

.accordion .accordion-item .accordion-checkbox {
  display: none;
}

.accordion .accordion-item .accordion-checkbox:checked + .accordion-header + .accordion-content {
  height: 300px;
  background: var(--swatches-on-surface-invert);
}

.accordion .accordion-item .accordion-checkbox:checked + .accordion-header > .chevron {
  transform: rotate(180deg);
}

.accordion .accordion-item > .accordion-checkbox:not(:checked) + .accordion-header:hover {
  background-color: var(--swatches-surface-alt);
}

.accordion .accordion-item .accordion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--swatches-on-surface-invert);
  cursor: pointer;
  border: 0;
}

.accordion .accordion-item .accordion-header i.icon,
.accordion .accordion-item .accordion-header svg.icon {
  width: 32px;
  height: 32px;
}

.accordion .accordion-item .accordion-header i.icon {
  background-color: var(--swatches-on-surface-base);
}

.accordion .accordion-item .accordion-header svg.icon {
  color: var(--swatches-on-surface-base);
}

.accordion .accordion-item .accordion-header .chevron {
  margin-left: auto;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.accordion .accordion-item .accordion-header i.chevron {
  background-color: var(--swatches-on-surface-base);
}

.accordion .accordion-item .accordion-header svg.chevron {
  color: var(--swatches-on-surface-base);
}

.accordion .accordion-item .accordion-header .accordion-title {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 500;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .accordion .accordion-item .accordion-header .accordion-title {
    font-size: 18px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .accordion .accordion-item .accordion-header .accordion-title {
    font-size: 16px;
  }
}

.accordion .accordion-item .accordion-content {
  height: 0;
  overflow: hidden;
  padding: 0;
}

.accordion .accordion-item .accordion-content .placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 130%;
  height: 300px;
}

.accordion.small .accordion-item .accordion-header {
  padding: 16px;
}

.accordion.small .accordion-item .accordion-checkbox:checked + .accordion-header + .accordion-content {
  padding: 0 16px 16px;
}

.accordion.medium .accordion-item .accordion-header {
  padding: 24px;
}

.accordion.medium .accordion-item .accordion-checkbox:checked + .accordion-header + .accordion-content {
  padding: 0 24px 24px;
}

.accordion.large .accordion-item .accordion-header {
  padding: 32px;
}

.accordion.large .accordion-item .accordion-checkbox:checked + .accordion-header + .accordion-content {
  padding: 0 32px 32px;
}

.accordion.invert .accordion-item .accordion-header {
  background-color: var(--swatches-surface);
  color: var(--swatches-on-surface-base);
}

.accordion.invert .accordion-item .accordion-header i.icon {
  background-color: var(--swatches-on-surface-base);
}

.accordion.invert .accordion-item .accordion-header svg.icon {
  color: var(--swatches-on-surface-base);
}

.accordion.invert .accordion-item .accordion-header i.chevron {
  background-color: var(--swatches-on-surface-base);
}

.accordion.invert .accordion-item .accordion-header svg.chevron {
  color: var(--swatches-on-surface-base);
}

.accordion.invert .accordion-item .accordion-checkbox:checked + .accordion-header + .accordion-content {
  background-color: var(--swatches-surface);
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.toast {
  border-radius: 8px;
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  color: var(--swatches-on-surface-base);
  position: relative;
  z-index: 1;
  background-color: var(--swatches-base-subtle);
  border-color: var(--swatches-border-base);
}

.toast > i.icon {
  background-color: var(--swatches-on-surface-base);
}

.toast > svg.icon {
  color: var(--swatches-on-surface-base);
}

.toast .toast-body {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.toast .close-toast {
  position: absolute;
  right: 15px;
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
}

.toast .close-toast > i.icon {
  background-color: var(--swatches-on-surface-base);
}

.toast .close-toast > svg.icon {
  color: var(--swatches-on-surface-base);
}

.toast .title {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--swatches-on-surface-base);
}

.toast .text {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--swatches-on-surface-base);
  margin: 0;
}

.toast.medium {
  padding: 24px;
}

.toast.medium > i.icon,
.toast.medium > svg.icon {
  width: 32px;
  height: 32px;
}

.toast.medium .toast-body {
  margin-top: 4px;
  gap: 24px;
}

.toast.medium .close-toast {
  width: 16px;
  height: 16px;
}

.toast.medium .close-toast > i.icon,
.toast.medium .close-toast > svg.icon {
  width: 16px;
  height: 16px;
}

.toast.medium .title {
  font-size: 18px;
  margin-bottom: 8px;
}

.toast.medium .text {
  font-size: 16px;
  margin-bottom: 8px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .toast.medium {
    padding: 20px;
  }
  .toast.medium .toast-body {
    margin-top: 4px;
    gap: 20px;
  }
  .toast.medium .title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .toast.medium .text {
    font-size: 14px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .toast.medium {
    padding: 16px;
  }
  .toast.medium .toast-body {
    margin-top: 4px;
    gap: 16px;
  }
  .toast.medium .title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .toast.medium .text {
    font-size: 14px;
  }
}

.toast.large {
  padding: 30px;
}

.toast.large > i.icon,
.toast.large > svg.icon {
  width: 48px;
  height: 48px;
}

.toast.large .toast-body {
  margin-top: 5px;
  gap: 30px;
}

.toast.large .close-toast {
  width: 20px;
  height: 20px;
}

.toast.large .close-toast > i.icon,
.toast.large .close-toast > svg.icon {
  width: 16px;
  height: 16px;
}

.toast.large .title {
  font-size: 20.25px;
  margin-bottom: 10px;
}

.toast.large .text {
  font-size: 18px;
  margin-bottom: 10px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .toast.large {
    padding: 25px;
  }
  .toast.large .toast-body {
    margin-top: 5px;
    gap: 25px;
  }
  .toast.large .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .toast.large .text {
    font-size: 15.75px;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .toast.large {
    padding: 20px;
  }
  .toast.large .toast-body {
    margin-top: 5px;
    gap: 20px;
  }
  .toast.large .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .toast.large .text {
    font-size: 15.75px;
  }
}

.toast.toast-primary {
  background-color: var(--swatches-primary-subtle);
  border-color: var(--swatches-border-primary-focus);
}

.toast.toast-primary .title {
  color: var(--swatches-primary-active);
}

.toast.toast-primary > i {
  background-color: var(--swatches-primary-default);
}

.toast.toast-primary > svg.icon {
  color: var(--swatches-primary-default);
}

.toast.toast-primary .btn {
  color: var(--swatches-on-primary);
  background-color: var(--swatches-primary-default);
  border-color: var(--swatches-primary-default);
}

.toast.toast-primary .custom-link {
  color: var(--swatches-primary-default);
}

.toast.toast-secondary {
  background-color: var(--swatches-secondary-subtle);
  border-color: var(--swatches-border-secondary-focus);
}

.toast.toast-secondary .title {
  color: var(--swatches-secondary-active);
}

.toast.toast-secondary > i {
  background-color: var(--swatches-secondary-default);
}

.toast.toast-secondary > svg.icon {
  color: var(--swatches-secondary-default);
}

.toast.toast-secondary .btn {
  color: var(--swatches-on-secondary);
  background-color: var(--swatches-secondary-default);
  border-color: var(--swatches-secondary-default);
}

.toast.toast-secondary .custom-link {
  color: var(--swatches-secondary-default);
}

.toast.toast-tertiary {
  background-color: var(--swatches-tertiary-subtle);
  border-color: var(--swatches-border-tertiary-focus);
}

.toast.toast-tertiary .title {
  color: var(--swatches-tertiary-active);
}

.toast.toast-tertiary > i {
  background-color: var(--swatches-tertiary-default);
}

.toast.toast-tertiary > svg.icon {
  color: var(--swatches-tertiary-default);
}

.toast.toast-tertiary .btn {
  color: var(--swatches-on-tertiary);
  background-color: var(--swatches-tertiary-default);
  border-color: var(--swatches-tertiary-default);
}

.toast.toast-tertiary .custom-link {
  color: var(--swatches-tertiary-default);
}

.toast.toast-quaternary {
  background-color: var(--swatches-quaternary-subtle);
  border-color: var(--swatches-border-quaternary-focus);
}

.toast.toast-quaternary .title {
  color: var(--swatches-quaternary-active);
}

.toast.toast-quaternary > i {
  background-color: var(--swatches-quaternary-default);
}

.toast.toast-quaternary > svg.icon {
  color: var(--swatches-quaternary-default);
}

.toast.toast-quaternary .btn {
  color: var(--swatches-on-quaternary);
  background-color: var(--swatches-quaternary-default);
  border-color: var(--swatches-quaternary-default);
}

.toast.toast-quaternary .custom-link {
  color: var(--swatches-quaternary-default);
}

.toast.toast-success {
  background-color: var(--swatches-success-subtle);
  border-color: var(--swatches-border-success-focus);
}

.toast.toast-success .title {
  color: var(--swatches-success-active);
}

.toast.toast-success > i {
  background-color: var(--swatches-success-default);
}

.toast.toast-success > svg.icon {
  color: var(--swatches-success-default);
}

.toast.toast-success .btn {
  color: var(--swatches-on-success);
  background-color: var(--swatches-success-default);
  border-color: var(--swatches-success-default);
}

.toast.toast-success .custom-link {
  color: var(--swatches-success-default);
}

.toast.toast-warning {
  background-color: var(--swatches-warning-subtle);
  border-color: var(--swatches-border-warning-focus);
}

.toast.toast-warning .title {
  color: var(--swatches-warning-active);
}

.toast.toast-warning > i {
  background-color: var(--swatches-warning-default);
}

.toast.toast-warning > svg.icon {
  color: var(--swatches-warning-default);
}

.toast.toast-warning .btn {
  color: var(--swatches-on-warning);
  background-color: var(--swatches-warning-default);
  border-color: var(--swatches-warning-default);
}

.toast.toast-warning .custom-link {
  color: var(--swatches-warning-default);
}

.toast.toast-error {
  background-color: var(--swatches-error-subtle);
  border-color: var(--swatches-border-error-focus);
}

.toast.toast-error .title {
  color: var(--swatches-error-active);
}

.toast.toast-error > i {
  background-color: var(--swatches-error-default);
}

.toast.toast-error > svg.icon {
  color: var(--swatches-error-default);
}

.toast.toast-error .btn {
  color: var(--swatches-on-error);
  background-color: var(--swatches-error-default);
  border-color: var(--swatches-error-default);
}

.toast.toast-error .custom-link {
  color: var(--swatches-error-default);
}

.toast.toast-error .toast-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.datepicker-container {
  background-color: var(--swatches-surface);
  border: 1px solid var(--swatches-base-active-alt);
  border-radius: 8px;
  max-width: fit-content;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
}

.datepicker-container .btn.base:hover {
  background-color: var(--swatches-surface);
}

.datepicker-container .btn.base.selected {
  background-color: var(--swatches-base-active);
  border-color: var(--swatches-border-base);
}

.datepicker-container .day-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px;
  box-sizing: border-box;
}

.datepicker-container .day-cell:hover {
  background-color: var(--swatches-base-active);
  border-radius: 4px;
}

.datepicker-container .day-cell:hover:not(.day-cell--disabled):not(.day-cell--selected):not(.day-cell--range-start):not(.day-cell--range-end):not(.day-cell--in-range) {
  background-color: var(--swatches-on-surface-primary);
  color: var(--swatches-base-default);
  border-radius: 4px;
}

.datepicker-container .day-cell:hover:not(.day-cell--disabled):not(.day-cell--selected):not(.day-cell--range-start):not(.day-cell--range-end):not(.day-cell--in-range) .text-day {
  color: var(--swatches-base-default);
}

.datepicker-container .day-cell--disabled {
  opacity: 0.4;
  cursor: default;
}

.datepicker-container .day-cell--disabled:hover {
  background-color: transparent;
  color: var(--swatches-on-base);
}

.datepicker-container .day-cell--disabled:hover .text-day {
  color: var(--swatches-on-base);
}

.datepicker-container .day-cell--selected {
  background-color: var(--swatches-primary-active);
  color: var(--swatches-base-default);
  border-radius: 4px;
}

.datepicker-container .day-cell--selected:hover {
  background-color: var(--swatches-primary-active);
}

.datepicker-container .day-cell--selected .text-day {
  color: var(--swatches-base-default);
}

.datepicker-container .day-cell--range-start {
  background-color: var(--swatches-primary-subtle);
  position: relative;
  border-radius: 0;
}

.datepicker-container .day-cell--range-start::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--swatches-primary-active);
  border-radius: 4px;
  z-index: 1;
}

.datepicker-container .day-cell--range-start .text-day {
  color: var(--swatches-base-default);
  position: relative;
  z-index: 2;
}

.datepicker-container .day-cell--range-start:hover {
  background-color: color-mix(in srgb, var(--swatches-primary-subtle) 50%, var(--swatches-surface));
}

.datepicker-container .day-cell--range-start:hover::before {
  background-color: var(--swatches-primary-hover);
}

.datepicker-container .day-cell--range-start.day-cell--round-left:hover {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--range-start.day-cell--round-left:hover::before {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--range-start.day-cell--round-right:hover {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--range-start.day-cell--round-right:hover::before {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--range-start.day-cell--round-all:hover {
  border-radius: 50%;
}

.datepicker-container .day-cell--range-start.day-cell--round-all:hover::before {
  border-radius: 50%;
}

.datepicker-container .day-cell--range-end {
  background-color: var(--swatches-primary-subtle);
  position: relative;
  border-radius: 0;
}

.datepicker-container .day-cell--range-end::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--swatches-primary-active);
  border-radius: 4px;
  z-index: 1;
}

.datepicker-container .day-cell--range-end .text-day {
  color: var(--swatches-base-default);
  position: relative;
  z-index: 2;
}

.datepicker-container .day-cell--range-end:hover {
  background-color: color-mix(in srgb, var(--swatches-primary-subtle) 50%, var(--swatches-surface));
}

.datepicker-container .day-cell--range-end:hover::before {
  background-color: var(--swatches-primary-hover);
}

.datepicker-container .day-cell--range-end.day-cell--round-left:hover {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--range-end.day-cell--round-left:hover::before {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--range-end.day-cell--round-right:hover {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--range-end.day-cell--round-right:hover::before {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--range-end.day-cell--round-all:hover {
  border-radius: 50%;
}

.datepicker-container .day-cell--range-end.day-cell--round-all:hover::before {
  border-radius: 50%;
}

.datepicker-container .day-cell--in-range {
  background-color: var(--swatches-primary-subtle);
  color: var(--swatches-on-surface-primary);
  border-radius: 0;
}

.datepicker-container .day-cell--in-range .text-day {
  color: var(--swatches-on-surface-primary);
}

.datepicker-container .day-cell--in-range:hover {
  background-color: color-mix(in srgb, var(--swatches-primary-subtle) 50%, var(--swatches-surface));
  border-radius: 0;
}

.datepicker-container .day-cell--round-left {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--round-left::before {
  border-radius: 50% 0 0 50%;
}

.datepicker-container .day-cell--round-right {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--round-right::before {
  border-radius: 0 50% 50% 0;
}

.datepicker-container .day-cell--round-all {
  border-radius: 50%;
}

.datepicker-container .day-cell--round-all::before {
  border-radius: 50%;
}

.datepicker-container .dot-indicator {
  position: absolute;
  top: 0.5625rem;
  right: 0.5625rem;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--swatches-error-hover);
  border-radius: 1000px;
  z-index: 10;
}

.datepicker-container .day-cell--range-start .dot-indicator,
.datepicker-container .day-cell--range-end .dot-indicator {
  z-index: 11;
}

.datepicker-container .datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0;
}

.datepicker-container .datepicker-header-selectors {
  display: flex;
  align-items: center;
  gap: 8px;
}

.datepicker-container .datepicker-select-button {
  background: transparent;
  border: none;
  color: var(--swatches-on-surface-primary);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.datepicker-container .datepicker-select-button:hover {
  background-color: var(--swatches-base-hover);
}

.datepicker-container .datepicker-select-button svg {
  width: 16px;
  height: 16px;
}

.datepicker-container .datepicker-month-select .dropdown-wrapper,
.datepicker-container .datepicker-year-select .dropdown-wrapper {
  position: relative;
}

.datepicker-container .datepicker-month-select .dropdown-select-container,
.datepicker-container .datepicker-year-select .dropdown-select-container {
  min-width: 150px;
  max-height: 300px;
}

.datepicker-container .datepicker-month-select .dropdown-select-container .options-list,
.datepicker-container .datepicker-year-select .dropdown-select-container .options-list {
  max-height: 250px;
}

.datepicker-container .datepicker-navigation {
  display: flex;
  gap: 8px;
}

.datepicker-container .week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 24px 24px 0;
}

.datepicker-container .week-day {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.datepicker-container .datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  padding: 0 24px;
}

.datepicker-container .preset-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-right: 1px solid var(--swatches-surface-alt);
  min-width: 12rem;
}

.datepicker-container .preset-buttons .btn {
  width: fit-content;
}

.datepicker-container .preset-buttons--mobile {
  flex-direction: row;
  overflow: auto hidden;
  border-right: none;
  border-bottom: 1px solid var(--swatches-surface-alt);
  padding: 24px;
  min-width: auto;
  width: 100%;
  height: 2.5rem;
  align-items: flex-start;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.datepicker-container .preset-buttons--mobile::-webkit-scrollbar {
  display: none;
}

.datepicker-container .preset-buttons--mobile .btn {
  flex-shrink: 0;
  white-space: nowrap;
  margin-right: 8px;
}

.datepicker-container .preset-buttons--mobile .btn:last-child {
  margin-right: 0;
}

.datepicker-container .action-buttons {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  padding: 24px;
  background-color: var(--swatches-surface);
  border-top: 1px solid var(--swatches-surface-alt);
}

.datepicker-container .title-section {
  padding: 24px;
  border-bottom: 1px solid var(--swatches-surface-alt);
}

.datepicker-container .title-section__subtitle {
  margin: 8px 0;
}

.datepicker-container .datepicker-content {
  display: flex;
}

.datepicker-container .datepicker-main {
  flex: 1;
  min-width: 20.5rem;
}

.datepicker-container .datepicker-dual {
  display: flex;
  gap: 16px;
}

.datepicker-container .datepicker-dual .datepicker-main {
  min-width: 20.5rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .datepicker-container .datepicker-dual {
    flex-direction: column;
  }
}

.datepicker-container.hide-presets .preset-buttons {
  display: none;
}

.datepicker-container.hide-presets .datepicker-content {
  display: block;
}

.datepicker-container.hide-buttons .action-buttons {
  display: none;
}

.datepicker-container.hide-navigation .datepicker-navigation {
  display: none;
}

.datepicker-container.hide-title .title-section {
  display: none;
}

.datepicker-container.hide-dots .dot-indicator {
  display: none;
}

.datepicker-container.hide-weekdays .week-days {
  display: none;
}

.datepicker-container.show-borders {
  border: 2px solid var(--swatches-primary-default);
}

.datepicker-container.show-borders .day-cell {
  border: 1px solid var(--swatches-base-hover-alt);
}

@media (min-width: 360px) and (max-width: 767px) {
  .datepicker-container .datepicker-content {
    flex-direction: column;
  }
  .datepicker-container .preset-buttons {
    flex-direction: row;
    overflow: auto hidden;
    border-right: none;
    border-bottom: 1px solid var(--swatches-surface-alt);
    min-width: auto;
    width: 100%;
    height: 2.5rem;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .datepicker-container .preset-buttons::-webkit-scrollbar {
    display: none;
  }
  .datepicker-container .preset-buttons .btn {
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 8px;
  }
  .datepicker-container .preset-buttons .btn:last-child {
    margin-right: 0;
  }
  .datepicker-container .datepicker-main {
    min-width: auto;
  }
  .datepicker-container .datepicker-select-button {
    font-size: 14px;
    padding: 4px;
  }
  .datepicker-container .datepicker-select-button i {
    width: 14px;
    height: 14px;
  }
  .datepicker-container .datepicker-header {
    padding: 8px 8px 0;
  }
  .datepicker-container .datepicker-header-selectors {
    gap: 4px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}

@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}

.timepicker-container {
  border: 1px solid var(--swatches-base-active-alt);
  background-color: var(--neutral-0);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--swatches-on-surface-base);
  max-width: fit-content;
}

.timepicker-container.radius-pill {
  border-radius: 16px;
}

.timepicker-container.radius-round {
  border-radius: 8px;
}

.timepicker-container.radius-straigh {
  border-radius: 0;
}

.timepicker-container .timepicker-header {
  background-color: var(--swatches-primary-default);
  height: 88px;
  color: var(--swatches-base-default);
  text-align: center;
}

.timepicker-container .time-display {
  margin: 0;
  padding-top: 8px;
}

.timepicker-container .timepicker-mobile {
  max-width: 328px;
  padding: 24px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timepicker-container .timepicker-mobile.timepicker-mobile--minute {
  --number-count: 12;
  --number-center-count: 12;
  --number-radius: 7.2rem;
  --number-center-radius: 4.2rem;
  --number-size: 2.4rem;
  --number-center-size: 2.4rem;
}

.timepicker-container .timepicker-mobile.timepicker-mobile--hour {
  --number-count: 12;
  --number-center-count: 12;
  --number-radius: 7.2rem;
  --number-center-radius: 4.2rem;
  --number-size: 2.4rem;
  --number-center-size: 2.4rem;
  --hand-length: 7.2rem;
}

.timepicker-container .timepicker-mobile .clock-wrap {
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background-color: var(--swatches-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.timepicker-container .timepicker-mobile .clock-numbers {
  width: 100%;
  height: 100%;
  position: relative;
}

.timepicker-container .timepicker-mobile .clock-number {
  margin: 0;
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.12s ease;
  pointer-events: auto;
  transform-origin: 50% 50%;
  top: 50%;
  left: 50%;
}

.timepicker-container .timepicker-mobile .no-interaction .clock-number {
  cursor: default;
  pointer-events: none;
}

.timepicker-container .timepicker-mobile .clock-number.number {
  transform: rotate(calc(var(--i) * 360deg / var(--number-count))) translateY(calc(-1 * var(--number-radius))) rotate(calc(-1 * var(--i) * 360deg / var(--number-count))) translate(-50%, -50%);
}

.timepicker-container .timepicker-mobile .clock-number.number-center {
  transform: rotate(calc(var(--i) * 360deg / var(--number-center-count))) translateY(calc(-1 * var(--number-center-radius))) rotate(calc(-1 * var(--i) * 360deg / var(--number-center-count))) translate(-50%, -50%);
}

.timepicker-container .timepicker-mobile .clock-number.active {
  z-index: 3;
}

.timepicker-container .timepicker-mobile .clock-number.number.active {
  margin: 0;
  background-color: var(--swatches-primary-default);
  color: var(--swatches-base-default);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

.timepicker-container .timepicker-mobile .clock-number.number-center.active {
  background-color: var(--swatches-primary-default);
  color: var(--swatches-base-default);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.timepicker-container .timepicker-mobile .clock-hand {
  position: absolute;
  width: 2px;
  left: 50%;
  bottom: 52%;
  top: auto;
  height: 0;
  background: transparent;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(0deg) scaleY(1);
  border-radius: 1px;
  z-index: 2;
  --hand-length: var(--active-distance, var(--active-distance-fallback, 6rem));
  transition: transform 0.18s ease, --hand-length 0.18s ease;
}

.timepicker-container .timepicker-mobile .clock-hand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: var(--hand-length);
  background-color: var(--swatches-surface-alt-invert);
  transform: translateX(-50%);
  border-radius: 1px;
  z-index: 1;
}

.timepicker-container .timepicker-mobile .clock-hand.number-hand {
  --hand-length: 6.2rem;
  transform: translateX(-50%) rotate(0deg) scaleY(1.25);
}

.timepicker-container .timepicker-mobile .clock-hand.number-center-hand {
  --hand-length: 4.2rem;
  transform: translateX(-50%) rotate(0deg) scaleY(1);
}

.timepicker-container .timepicker-mobile .clock-center {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--swatches-base-default-alt);
  border-radius: 50%;
  z-index: 3;
}

.timepicker-container .timepicker-desktop {
  display: flex;
  gap: 8px;
  min-width: 200px;
}

.timepicker-container .timepicker-desktop .columns {
  display: flex;
  width: 100%;
}

.timepicker-container .timepicker-desktop .col {
  flex: 1;
  max-height: 14rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.timepicker-container .timepicker-desktop .col::-webkit-scrollbar {
  display: none;
}

.timepicker-container .timepicker-desktop .col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timepicker-container .timepicker-desktop #col-minutes {
  border-left: 1px solid var(--swatches-border-base);
}

.timepicker-container .timepicker-desktop .col .item {
  width: 100%;
  padding: 16px;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 600;
}

.timepicker-container .timepicker-desktop .col .item:hover {
  background-color: var(--neutral-200);
}

.timepicker-container .timepicker-desktop .col .item.active {
  background-color: var(--swatches-primary-default);
  color: var(--swatches-base-default);
}

.timepicker-container .action-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid var(--swatches-border-base);
}

@media (min-width: 360px) and (max-width: 767px) {
  .timepicker-container {
    max-width: 18rem;
  }
}

.epjota.light-theme {
  --font-title: "Montserrat", sans-serif;
  --font-body: "Nunito", sans-serif;
  --font-code: "Fira Code", monospace;
  --btn-radius: 1000px;
  --input-radius: 8px;
  --logo-light: url("/assets/epjota-light-CeyWpvDN.svg");
  --logo-dark: url("/assets/epjota-dark-DBNNOw7q.svg");
  --logo-spinner: url("data:image/svg+xml,%3csvg%20width='42'%20height='42'%20viewBox='0%200%2042%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M37.1875%209.56146C37.636%209.56146%2038%209.92434%2038%2010.372V25.5214C38%2032.0932%2034.5995%2035.3427%2028.2324%2035.3427C24.5426%2035.3427%2021.3951%2034.0431%2019.4414%2031.624L22.7256%2027.7382C23.0446%2027.3609%2023.6189%2027.3587%2023.9531%2027.7226C25.1128%2028.9846%2026.3405%2029.6375%2027.7256%2029.6376C29.7875%2029.6376%2030.9091%2028.3741%2030.9092%2025.955V9.56146H37.1875ZM13.9971%207.65717C19.9632%207.65734%2023.7117%2011.1789%2023.7119%2016.8701C23.7119%2022.5261%2019.9627%2026.0478%2013.9961%2026.0478H10.1855V32.5576H4V7.65717H13.9971ZM10.9971%2013.207C10.5485%2013.207%2010.1846%2013.5698%2010.1846%2014.0175V19.6884C10.1846%2020.136%2010.5486%2020.499%2010.9971%2020.499H13.6211C16.1822%2020.4989%2017.4638%2019.1472%2017.4639%2016.871C17.4639%2014.5588%2016.1827%2013.2071%2013.6211%2013.207H10.9971Z'%20fill='%23FAFAFA'/%3e%3c/svg%3e");
  --logo-spinner-invert: url("data:image/svg+xml,%3csvg%20width='42'%20height='42'%20viewBox='0%200%2042%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M38.1396%208.85846C38.6146%208.85846%2039%209.2438%2039%209.71783V25.7579C39%2032.7161%2035.3996%2036.1572%2028.6582%2036.1573C24.7513%2036.1573%2021.4182%2034.7803%2019.3496%2032.2188L22.8271%2028.1055C23.1648%2027.706%2023.773%2027.7029%2024.127%2028.088C25.3548%2029.4241%2026.6546%2030.1161%2028.1211%2030.1163C30.3044%2030.1163%2031.4922%2028.7784%2031.4922%2026.2169V8.85846H38.1396ZM13.585%206.84283C19.9022%206.84295%2023.8709%2010.5717%2023.8711%2016.5977L23.8594%2017.1524C23.6208%2022.816%2019.7043%2026.3155%2013.584%2026.3155H9.54883V33.2081H3V6.84283H13.585ZM10.4082%2012.7188C9.93336%2012.7189%209.54789%2013.1033%209.54785%2013.5772V19.5821C9.54808%2020.0559%209.93348%2020.4404%2010.4082%2020.4405H13.1865C15.8984%2020.4405%2017.2558%2019.0089%2017.2559%2016.5987C17.2559%2014.1504%2015.8989%2012.7188%2013.1865%2012.7188H10.4082Z'%20fill='%23000D3C'/%3e%3c/svg%3e");
  --primary: #000d3c;
  --secondary: #001fbd;
  --tertiary: #0e84c7;
  --quaternary: #707070;
  --pure-white: #fafafa;
  --pure-black: #212121;
  --neutral-0: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-1000: #000000;
  --primary-transparency: rgba(31, 79, 255, 0.2);
  --primary-shallower: #1f4fff;
  --primary-shallow: #0026ad;
  --primary-default: #000d3c;
  --primary-deep: #00061a;
  --primary-deeper: #00030f;
  --secondary-transparency: rgba(175, 188, 255, 0.2);
  --secondary-shallower: #5f7aff;
  --secondary-shallow: #0e36ff;
  --secondary-default: #0e36ff;
  --secondary-deep: #00157e;
  --secondary-deeper: #000a3f;
  --tertiary-transparency: rgba(117, 198, 245, 0.2);
  --tertiary-shallower: #75c6f5;
  --tertiary-shallow: #30aaf1;
  --tertiary-default: #0e84c7;
  --tertiary-deep: #095886;
  --tertiary-deeper: #052c43;
  --quaternary-transparency: rgba(184, 184, 184, 0.2);
  --quaternary-shallower: #b8b8b8;
  --quaternary-shallow: #949494;
  --quaternary-default: #707070;
  --quaternary-deep: #4b4b4b;
  --quaternary-deeper: #252525;
  --support-transparency: rgba(230, 230, 230, 0.2);
  --support-shallower: #fffaf3;
  --support-shallow: #fff5e7;
  --support-default: #ffefda;
  --support-deep: #ffd298;
  --support-deeper: #ffb554;
  --success-transparency: rgba(159, 242, 190, 0.2);
  --success-shallower: #9ff2be;
  --success-shallow: #40e57c;
  --success-default: #16a34a;
  --success-deep: #0f6c31;
  --success-deeper: #073618;
  --warning-transparency: rgba(253, 210, 162, 0.2);
  --warning-shallower: #fdd2a2;
  --warning-shallow: #faa645;
  --warning-default: #d97706;
  --warning-deep: #925004;
  --warning-deeper: #492802;
  --destructive-transparency: rgba(243, 183, 183, 0.2);
  --destructive-shallower: #f3b7b7;
  --destructive-shallow: #e87070;
  --destructive-default: #dc2626;
  --destructive-deep: #951818;
  --destructive-deeper: #4b0c0c;
  --transparency-white-20: rgba(255, 255, 255, 0.2);
  --transparency-white-40: rgba(255, 255, 255, 0.4);
  --transparency-white-60: rgba(255, 255, 255, 0.6);
  --transparency-white-80: rgba(255, 255, 255, 0.8);
  --transparency-black-20: rgba(0, 0, 0, 0.2);
  --transparency-black-40: rgba(0, 0, 0, 0.4);
  --transparency-black-60: rgba(0, 0, 0, 0.6);
  --transparency-black-80: rgba(0, 0, 0, 0.8);
  --transparency-brand-20: rgba(0, 13, 60, 0.2);
  --transparency-brand-40: rgba(0, 13, 60, 0.4);
  --transparency-brand-60: rgba(0, 13, 60, 0.6);
  --transparency-brand-80: rgba(0, 13, 60, 0.8);
  --red-transparency: rgba(255, 201, 201, 0.2);
  --red-shallower: #ffc9ca;
  --red-shallow: #ff9296;
  --red-default: #ff595e;
  --red-deep: #e70008;
  --red-deeper: #740004;
  --yellow-transparency: rgba(255, 235, 189, 0.2);
  --yellow-shallower: #ffebbd;
  --yellow-shallow: #ffcc7a;
  --yellow-default: #ffca3a;
  --yellow-deep: #cf9800;
  --yellow-deeper: #864c00;
  --green-transparency: rgba(217, 241, 179, 0.2);
  --green-shallower: #d9f1b3;
  --green-shallow: #b3e268;
  --green-default: #8ac926;
  --green-deep: #5d861a;
  --green-deeper: #2e430d;
  --blue-transparency: rgba(169, 215, 244, 0.2);
  --blue-shallower: #a9d7f4;
  --blue-shallow: #53b0e9;
  --blue-default: #1982c4;
  --blue-deep: #115881;
  --blue-deeper: #082b41;
  --purple-transparency: rgba(205, 192, 223, 0.2);
  --purple-shallower: #cdc0df;
  --purple-shallow: #9b81be;
  --purple-default: #6a4c93;
  --purple-deep: #473363;
  --purple-deeper: #231931;
  --cta-transparency: rgba(159, 242, 189, 0.2);
  --cta-shallower: #9ff2be;
  --cta-shallow: #40e57c;
  --cta-default: #16a34a;
  --cta-deep: #0f6c31;
  --cta-deeper: #073618;
  --swatches-transparent: rgba(255, 255, 255, 0);
  --swatches-pure-black: #212121;
  --swatches-pure-white: #fafafa;
  --swatches-brand-primary: #000d3c;
  --swatches-brand-secondary: #001fbd;
  --swatches-brand-tertiary: #0e84c7;
  --swatches-brand-quaternary: #707070;
  --swatches-background: #f5f5f5;
  --swatches-surface: #fafafa;
  --swatches-surface-alt: #e5e5e5;
  --swatches-on-surface-neutral: #262626;
  --swatches-on-surface-neutral-alt: #525252;
  --swatches-border: #e5e5e5;
  --swatches-background-invert: #00030f;
  --swatches-surface-invert: #00061a;
  --swatches-surface-alt-invert: #000d3c;
  --swatches-on-surface-invert: #fafafa;
  --swatches-on-surface-alt-invert: #1f4fff;
  --swatches-border-invert: #0026ad;
  --swatches-base-default: #ffffff;
  --swatches-base-hover: #e5e5e5;
  --swatches-base-active: #d4d4d4;
  --swatches-base-selected: #ffffff;
  --swatches-base-subtle: #e5e5e5;
  --swatches-base-default-alt: #171717;
  --swatches-base-hover-alt: #262626;
  --swatches-base-active-alt: #404040;
  --swatches-base-selected-alt: #000000;
  --swatches-base-subtle-alt: #262626;
  --swatches-on-base: #262626;
  --swatches-on-surface-base: #171717;
  --swatches-on-base-alt: #a3a3a3;
  --swatches-on-surface-base-alt: #e5e5e5;
  --swatches-border-base: #a3a3a3;
  --swatches-border-base-alt: #e5e5e5;
  --swatches-border-base-subtle: #fafafa;
  --swatches-border-base-subtle-alt: #525252;
  --swatches-border-base-focus: #a3a3a3;
  --swatches-border-base-focus-alt: #525252;
  --swatches-border-base-input: #a3a3a3;
  --swatches-primary-default: #00061a;
  --swatches-primary-hover: #000d3c;
  --swatches-primary-active: #00030f;
  --swatches-primary-selected: #0026ad;
  --swatches-primary-subtle: rgba(31, 79, 255, 0.2);
  --swatches-on-primary: #ffffff;
  --swatches-on-surface-primary: #000d3c;
  --swatches-border-primary: #00061a;
  --swatches-border-primary-subtle: #1f4fff;
  --swatches-border-primary-focus: #0026ad;
  --swatches-secondary-default: #00157e;
  --swatches-secondary-hover: #0e36ff;
  --swatches-secondary-active: #000a3f;
  --swatches-secondary-selected: #0e36ff;
  --swatches-secondary-subtle: rgba(175, 188, 255, 0.2);
  --swatches-on-secondary: #ffffff;
  --swatches-on-surface-secondary: #0e36ff;
  --swatches-border-secondary: #00157e;
  --swatches-border-secondary-subtle: #5f7aff;
  --swatches-border-secondary-focus: #0e36ff;
  --swatches-tertiary-default: #095886;
  --swatches-tertiary-hover: #0e84c7;
  --swatches-tertiary-active: #052c43;
  --swatches-tertiary-selected: #30aaf1;
  --swatches-tertiary-subtle: rgba(117, 198, 245, 0.2);
  --swatches-on-tertiary: #ffffff;
  --swatches-on-surface-tertiary: #0e84c7;
  --swatches-border-tertiary: #095886;
  --swatches-border-tertiary-subtle: #75c6f5;
  --swatches-border-tertiary-focus: #30aaf1;
  --swatches-quaternary-default: #4b4b4b;
  --swatches-quaternary-hover: #707070;
  --swatches-quaternary-active: #252525;
  --swatches-quaternary-selected: #949494;
  --swatches-quaternary-subtle: rgba(184, 184, 184, 0.2);
  --swatches-on-quaternary: #ffffff;
  --swatches-on-surface-quaternary: #707070;
  --swatches-border-quaternary: #4b4b4b;
  --swatches-border-quaternary-subtle: #b8b8b8;
  --swatches-border-quaternary-focus: #949494;
  --swatches-support-default: #ffd298;
  --swatches-support-surface: #ffefda;
  --swatches-support-surface-alt: #fff5e7;
  --swatches-on-surface-support: #262626;
  --swatches-on-surface-support-alt: #00061a;
  --swatches-border-support: #ffd298;
  --swatches-success-default: #0f6c31;
  --swatches-success-hover: #16a34a;
  --swatches-success-active: #073618;
  --swatches-success-selected: #40e57c;
  --swatches-success-subtle: rgba(159, 242, 190, 0.2);
  --swatches-on-success: #ffffff;
  --swatches-on-surface-success: #0f6c31;
  --swatches-border-success: #0f6c31;
  --swatches-border-success-subtle: #9ff2be;
  --swatches-border-success-focus: #40e57c;
  --swatches-warning-default: #925004;
  --swatches-warning-hover: #d97706;
  --swatches-warning-active: #492802;
  --swatches-warning-selected: #faa645;
  --swatches-warning-subtle: rgba(253, 210, 162, 0.2);
  --swatches-on-warning: #ffffff;
  --swatches-on-surface-warning: #925004;
  --swatches-border-warning: #925004;
  --swatches-border-warning-subtle: #fdd2a2;
  --swatches-border-warning-focus: #faa645;
  --swatches-error-default: #951818;
  --swatches-error-hover: #dc2626;
  --swatches-error-active: #4b0c0c;
  --swatches-error-selected: #e87070;
  --swatches-error-subtle: rgba(243, 183, 183, 0.2);
  --swatches-on-error: #ffffff;
  --swatches-on-surface-error: #951818;
  --swatches-border-error: #951818;
  --swatches-border-error-subtle: #f3b7b7;
  --swatches-border-error-focus: #e87070;
  --swatches-drawer-transparency: rgba(0, 0, 0, 0.8);
  --swatches-cta-default: #0f6c31;
  --swatches-cta-hover: #16a34a;
  --swatches-cta-active: #073618;
  --swatches-cta-selected: #40e57c;
  --swatches-cta-subtle: rgba(159, 242, 189, 0.2);
  --swatches-on-cta: #ffffff;
  --swatches-on-surface-cta: #0f6c31;
  --swatches-border-cta: #0f6c31;
  --swatches-border-cta-subtle: #9ff2be;
  --swatches-border-cta-focus: #40e57c;
  --swatches-on-base-40: rgba(38, 38, 38, 0.4);
  --swatches-on-surface-invert-40: rgba(250, 250, 250, 0.4);
  --svg-stroke-color: #000d3c;
}

.epjota.dark-theme {
  --font-title: "Montserrat", sans-serif;
  --font-body: "Nunito", sans-serif;
  --font-code: "Fira Code", monospace;
  --btn-radius: 1000px;
  --input-radius: 8px;
  --logo-light: url("/assets/epjota-light-CeyWpvDN.svg");
  --logo-dark: url("/assets/epjota-dark-DBNNOw7q.svg");
  --logo-spinner: url("data:image/svg+xml,%3csvg%20width='42'%20height='42'%20viewBox='0%200%2042%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M38.1396%208.85846C38.6146%208.85846%2039%209.2438%2039%209.71783V25.7579C39%2032.7161%2035.3996%2036.1572%2028.6582%2036.1573C24.7513%2036.1573%2021.4182%2034.7803%2019.3496%2032.2188L22.8271%2028.1055C23.1648%2027.706%2023.773%2027.7029%2024.127%2028.088C25.3548%2029.4241%2026.6546%2030.1161%2028.1211%2030.1163C30.3044%2030.1163%2031.4922%2028.7784%2031.4922%2026.2169V8.85846H38.1396ZM13.585%206.84283C19.9022%206.84295%2023.8709%2010.5717%2023.8711%2016.5977L23.8594%2017.1524C23.6208%2022.816%2019.7043%2026.3155%2013.584%2026.3155H9.54883V33.2081H3V6.84283H13.585ZM10.4082%2012.7188C9.93336%2012.7189%209.54789%2013.1033%209.54785%2013.5772V19.5821C9.54808%2020.0559%209.93348%2020.4404%2010.4082%2020.4405H13.1865C15.8984%2020.4405%2017.2558%2019.0089%2017.2559%2016.5987C17.2559%2014.1504%2015.8989%2012.7188%2013.1865%2012.7188H10.4082Z'%20fill='%23000D3C'/%3e%3c/svg%3e");
  --logo-spinner-invert: url("data:image/svg+xml,%3csvg%20width='42'%20height='42'%20viewBox='0%200%2042%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M37.1875%209.56146C37.636%209.56146%2038%209.92434%2038%2010.372V25.5214C38%2032.0932%2034.5995%2035.3427%2028.2324%2035.3427C24.5426%2035.3427%2021.3951%2034.0431%2019.4414%2031.624L22.7256%2027.7382C23.0446%2027.3609%2023.6189%2027.3587%2023.9531%2027.7226C25.1128%2028.9846%2026.3405%2029.6375%2027.7256%2029.6376C29.7875%2029.6376%2030.9091%2028.3741%2030.9092%2025.955V9.56146H37.1875ZM13.9971%207.65717C19.9632%207.65734%2023.7117%2011.1789%2023.7119%2016.8701C23.7119%2022.5261%2019.9627%2026.0478%2013.9961%2026.0478H10.1855V32.5576H4V7.65717H13.9971ZM10.9971%2013.207C10.5485%2013.207%2010.1846%2013.5698%2010.1846%2014.0175V19.6884C10.1846%2020.136%2010.5486%2020.499%2010.9971%2020.499H13.6211C16.1822%2020.4989%2017.4638%2019.1472%2017.4639%2016.871C17.4639%2014.5588%2016.1827%2013.2071%2013.6211%2013.207H10.9971Z'%20fill='%23FAFAFA'/%3e%3c/svg%3e");
  --primary: #ffffff;
  --secondary: #ffffff;
  --tertiary: #ffffff;
  --quaternary: #ffffff;
  --pure-white: #fafafa;
  --pure-black: #212121;
  --neutral-0: #0e141c;
  --neutral-50: #1d293b;
  --neutral-100: #2f3d53;
  --neutral-200: #3e4f69;
  --neutral-300: #4e627f;
  --neutral-400: #5c7090;
  --neutral-500: #7384a2;
  --neutral-600: #8a9ab5;
  --neutral-700: #aab7ce;
  --neutral-800: #c7d4e7;
  --neutral-900: #e8edfd;
  --neutral-1000: #ffffff;
  --primary-transparency: rgba(26, 26, 26, 0.2);
  --primary-shallower: #090d1d;
  --primary-shallow: #111a3c;
  --primary-default: #162661;
  --primary-deep: #334daa;
  --primary-deeper: #90a1de;
  --secondary-transparency: rgba(26, 26, 26, 0.2);
  --secondary-shallower: #000a3f;
  --secondary-shallow: #00157e;
  --secondary-default: #0e36ff;
  --secondary-deep: #5f7aff;
  --secondary-deeper: #afbcff;
  --tertiary-transparency: rgba(5, 44, 67, 0.2);
  --tertiary-shallower: #052c43;
  --tertiary-shallow: #095886;
  --tertiary-default: #0e84c7;
  --tertiary-deep: #30aaf1;
  --tertiary-deeper: #75c6f5;
  --quaternary-transparency: rgba(37, 37, 37, 0.2);
  --quaternary-shallower: #252525;
  --quaternary-default: #4b4b4b;
  --quaternary-shallow: #707070;
  --quaternary-deep: #949494;
  --quaternary-deeper: #b8b8b8;
  --support-transparency: rgba(58, 49, 37, 0.2);
  --support-shallower: #04263a;
  --support-shallow: #084d74;
  --support-default: #0c73af;
  --support-deep: #1099e9;
  --support-deeper: #47b3f2;
  --success-transparency: rgba(7, 54, 24, 0.2);
  --success-shallower: #073618;
  --success-shallow: #0f6c31;
  --success-default: #16a34a;
  --success-deep: #40e57c;
  --success-deeper: #9ff2be;
  --warning-transparency: rgba(73, 40, 2, 0.2);
  --warning-shallower: #492802;
  --warning-shallow: #925004;
  --warning-default: #d97706;
  --warning-deep: #faa645;
  --warning-deeper: #fdd2a2;
  --destructive-transparency: rgba(243, 183, 183, 0.2);
  --destructive-shallower: #4b0c0c;
  --destructive-shallow: #951818;
  --destructive-default: #dc2626;
  --destructive-deep: #e87070;
  --destructive-deeper: #f3b7b7;
  --transparency-white-20: rgba(255, 255, 255, 0.2);
  --transparency-white-40: rgba(255, 255, 255, 0.4);
  --transparency-white-60: rgba(255, 255, 255, 0.6);
  --transparency-white-80: rgba(255, 255, 255, 0.8);
  --transparency-black-20: rgba(0, 0, 0, 0.2);
  --transparency-black-40: rgba(0, 0, 0, 0.4);
  --transparency-black-60: rgba(0, 0, 0, 0.6);
  --transparency-black-80: rgba(0, 0, 0, 0.8);
  --transparency-brand-20: rgba(21, 47, 76, 0.2);
  --transparency-brand-40: rgba(21, 47, 76, 0.4);
  --transparency-brand-60: rgba(21, 47, 76, 0.6);
  --transparency-brand-80: rgba(21, 47, 76, 0.8);
  --red-transparency: rgba(116, 0, 4, 0.2);
  --red-shallower: #740004;
  --red-shallow: #e70008;
  --red-default: #ff595e;
  --red-deep: #ff9296;
  --red-deeper: #ffc9ca;
  --yellow-transparency: rgba(255, 235, 189, 0.2);
  --yellow-subtle: rgba(134, 76, 0, 0.2);
  --yellow-shallower: #864c00;
  --yellow-shallow: #cf9800;
  --yellow-default: #ffca3a;
  --yellow-deep: #ffcc7a;
  --yellow-deeper: #ffebbd;
  --green-transparency: rgba(46, 67, 13, 0.2);
  --green-shallower: #2e430d;
  --green-shallow: #5d861a;
  --green-default: #8ac926;
  --green-deep: #b3e268;
  --green-deeper: #d9f1b3;
  --blue-transparency: rgba(8, 43, 65, 0.2);
  --blue-shallower: #082b41;
  --blue-shallow: #115681;
  --blue-default: #1982c4;
  --blue-deep: #53b0e9;
  --blue-deeper: #a9d7f4;
  --purple-transparency: rgba(35, 25, 49, 0.2);
  --purple-shallower: #231931;
  --purple-shallow: #473363;
  --purple-default: #6a4c93;
  --purple-deep: #9b81be;
  --purple-deeper: #cdc0df;
  --cta-transparency: rgba(7, 54, 24, 0.2);
  --cta-shallower: #073618;
  --cta-shallow: #0f6c31;
  --cta-default: #16a34a;
  --cta-deep: #40e57c;
  --cta-deeper: #9ff2be;
  --swatches-transparent: rgba(255, 255, 255, 0);
  --swatches-pure-black: #212121;
  --swatches-pure-white: #fafafa;
  --swatches-brand-primary: #ffffff;
  --swatches-brand-secondary: #ffffff;
  --swatches-brand-tertiary: #ffffff;
  --swatches-brand-quaternary: #ffffff;
  --swatches-background: #0e141c;
  --swatches-surface: #1d293b;
  --swatches-surface-alt: #3e4f69;
  --swatches-on-surface-neutral: #c7d4e7;
  --swatches-on-surface-neutral-alt: #8a9ab5;
  --swatches-border: #3e4f69;
  --swatches-background-invert: #090d1d;
  --swatches-surface-invert: #111a3c;
  --swatches-surface-alt-invert: #162661;
  --swatches-on-surface-invert: #e8edfd;
  --swatches-on-surface-alt-invert: #90a1de;
  --swatches-border-invert: #162661;
  --swatches-base-default: #2f3d53;
  --swatches-base-hover: #3e4f69;
  --swatches-base-active: #4e627f;
  --swatches-base-selected: #5c7090;
  --swatches-base-subtle: #1d293b;
  --swatches-base-default-alt: #e8edfd;
  --swatches-base-hover-alt: #8a9ab5;
  --swatches-base-active-alt: #aab7ce;
  --swatches-base-selected-alt: #8a9ab5;
  --swatches-base-subtle-alt: #e8edfd;
  --swatches-on-base: #c7d4e7;
  --swatches-on-surface-base: #e8edfd;
  --swatches-on-base-alt: #5c7090;
  --swatches-on-surface-base-alt: #3e4f69;
  --swatches-border-base: #5c7090;
  --swatches-border-base-alt: #3e4f69;
  --swatches-border-base-subtle: #1d293b;
  --swatches-border-base-subtle-alt: #8a9ab5;
  --swatches-border-base-focus: #8a9ab5;
  --swatches-border-base-focus-alt: #5c7090;
  --swatches-border-base-input: #3e4f69;
  --swatches-primary-default: #90a1de;
  --swatches-primary-hover: #334daa;
  --swatches-primary-active: #8a9ab5;
  --swatches-primary-selected: #c7d4e7;
  --swatches-primary-subtle: rgba(26, 26, 26, 0.2);
  --swatches-on-primary: #1d293b;
  --swatches-on-surface-primary: #90a1de;
  --swatches-border-primary: #90a1de;
  --swatches-border-primary-subtle: #334daa;
  --swatches-border-primary-focus: #90a1de;
  --swatches-secondary-default: #afbcff;
  --swatches-secondary-hover: #5f7aff;
  --swatches-secondary-active: #e8edfd;
  --swatches-secondary-selected: #ffffff;
  --swatches-secondary-subtle: rgba(26, 26, 26, 0.2);
  --swatches-on-secondary: #1d293b;
  --swatches-on-surface-secondary: #afbcff;
  --swatches-border-secondary: #afbcff;
  --swatches-border-secondary-subtle: #5f7aff;
  --swatches-border-secondary-focus: #afbcff;
  --swatches-tertiary-default: #75c6f5;
  --swatches-tertiary-hover: #30aaf1;
  --swatches-tertiary-active: #e8edfd;
  --swatches-tertiary-selected: #ffffff;
  --swatches-tertiary-subtle: rgba(5, 44, 67, 0.2);
  --swatches-on-tertiary: #1d293b;
  --swatches-on-surface-tertiary: #75c6f5;
  --swatches-border-tertiary: #75c6f5;
  --swatches-border-tertiary-subtle: #30aaf1;
  --swatches-border-tertiary-focus: #75c6f5;
  --swatches-quaternary-default: #b8b8b8;
  --swatches-quaternary-hover: #949494;
  --swatches-quaternary-active: #e8edfd;
  --swatches-quaternary-selected: #ffffff;
  --swatches-quaternary-subtle: rgba(37, 37, 37, 0.2);
  --swatches-on-quaternary: #1d293b;
  --swatches-on-surface-quaternary: #b8b8b8;
  --swatches-border-quaternary: #b8b8b8;
  --swatches-border-quaternary-subtle: #949494;
  --swatches-border-quaternary-focus: #b8b8b8;
  --swatches-support-default: #04263a;
  --swatches-support-surface: #04263a;
  --swatches-support-surface-alt: #084d74;
  --swatches-on-surface-support: #c7d4e7;
  --swatches-on-surface-support-alt: #3e4f69;
  --swatches-border-support: #0c73af;
  --swatches-success-default: #9ff2be;
  --swatches-success-hover: #40e57c;
  --swatches-success-active: #e8edfd;
  --swatches-success-selected: #ffffff;
  --swatches-success-subtle: rgba(7, 54, 24, 0.2);
  --swatches-on-success: #1d293b;
  --swatches-on-surface-success: #9ff2be;
  --swatches-border-success: #9ff2be;
  --swatches-border-success-subtle: #40e57c;
  --swatches-border-success-focus: #9ff2be;
  --swatches-warning-default: #fdd2a2;
  --swatches-warning-hover: #faa645;
  --swatches-warning-active: #e8edfd;
  --swatches-warning-selected: #ffffff;
  --swatches-warning-subtle: rgba(73, 40, 2, 0.2);
  --swatches-on-warning: #1d293b;
  --swatches-on-surface-warning: #fdd2a2;
  --swatches-border-warning: #fdd2a2;
  --swatches-border-warning-subtle: #faa645;
  --swatches-border-warning-focus: #fdd2a2;
  --swatches-error-default: #f3b7b7;
  --swatches-error-hover: #e87070;
  --swatches-error-active: #e8edfd;
  --swatches-error-selected: #ffffff;
  --swatches-error-subtle: rgba(243, 183, 183, 0.2);
  --swatches-on-error: #1d293b;
  --swatches-on-surface-error: #f3b7b7;
  --swatches-border-error: #f3b7b7;
  --swatches-border-error-subtle: #e87070;
  --swatches-border-error-focus: #f3b7b7;
  --swatches-drawer-transparency: rgba(0, 0, 0, 0.8);
  --swatches-cta-default: #9ff2be;
  --swatches-cta-hover: #40e57c;
  --swatches-cta-active: #e8edfd;
  --swatches-cta-selected: #ffffff;
  --swatches-cta-subtle: rgba(7, 54, 24, 0.2);
  --swatches-on-cta: #1d293b;
  --swatches-on-surface-cta: #9ff2be;
  --swatches-border-cta: #9ff2be;
  --swatches-border-cta-subtle: #40e57c;
  --swatches-border-cta-focus: #9ff2be;
  --swatches-on-base-40: rgba(199, 212, 231, 0.4);
  --swatches-on-surface-invert-40: rgba(232, 237, 253, 0.4);
  --svg-stroke-color: #ffffff;
}

.page-list {
  padding: 0 !important;
}

.page-list .mg-0 {
  margin: 0 !important;
}

.page-list .full-height {
  height: 100% !important;
}

.page-list .table-container table tbody tr {
  background-color: var(--swatches-surface);
}

.page-list .table-container table td.column-actions .btn {
  display: inline-flex;
  vertical-align: middle;
}

p, span {
  font-family: var(--font-body);
}

.modal.content-modal--wide {
  width: 620px;
}

.modal.content-modal--extra-wide {
  width: 680px;
}

.modal-layer:has(.pdf-preview-modal) {
  z-index: 1500 !important;
}

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

a {
  text-decoration: none;
}

body.dark-theme {
  background-color: #0f1724;
  color: #ffffff;
  --border-error: #f3b7b7;
  --icon-color: #c7d4e7;
  --list-hover-bg: #404040;
  --background-color: #262626;
  --bg-color-component: rgba(255, 255, 255, 0.06);
  --card-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6), 0px 1px 2px rgba(255, 255, 255, 0.02);
}

body.light-theme {
  background-color: #fafafa;
  color: #0f1724;
  --border-error: #951818;
  --icon-color: #262626;
  --background-color: #f5f5f5;
  --list-hover-bg: #e5e5e5;
  --bg-color-component: #e5e5e5;
  --card-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
}

.PhotoView__Photo--round {
  border-radius: 50% !important;
  object-fit: cover !important;
}

.picker-dialog-bg {
  z-index: 3000 !important;
}

.picker-dialog {
  z-index: 3001 !important;
}.drawer-card, .card-drawer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bg-color-component);
  background-color: var(--background-color);
  border-radius: 16px;
  justify-content: center;
  margin-bottom: 8px;
  box-sizing: border-box;
  padding: 20px 12px;
  width: 100%;
  box-shadow: var(--card-box-shadow);
}
.drawer-card__avatar {
  margin: 8px;
}
.drawer-card__header {
  margin-left: 16px;
  margin-bottom: 8px;
}
.drawer-card__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 16px;
}
.drawer-card__content .info-icon {
  border-radius: 50%;
}
.drawer-card__actions {
  padding: 16px;
  display: flex;
}

.drawer-footer, .card-drawer-footer {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
}

.drawer-header-card {
  background: var(--neutral-100) !important;
  border: 1px solid var(--neutral-200) !important;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 16px;
}
.drawer-header-card__wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.drawer-header-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.drawer-header-card__title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer-header-card__title {
  margin: 0;
  color: var(--swatches-on-surface-neutral);
}
.drawer-header-card__info-icon {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--neutral-500, #666);
  transition: color 0.2s;
}
.drawer-header-card__info-icon:hover {
  color: var(--primary);
}
.drawer-header-card__info-icon svg {
  width: 20px;
  height: 20px;
}
.drawer-header-card__subtitle {
  margin: 0;
}
.drawer-header-card__actions {
  display: flex;
  align-items: center;
}

.drawer-companies__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 32px;
  color: var(--text-secondary, #6b7280);
}

.drawer-group-details__section-title,
.drawer-companies__section-title {
  margin-bottom: 24px !important;
}
.drawer-group-details__field,
.drawer-companies__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}
.drawer-group-details__field:last-child,
.drawer-companies__field:last-child {
  margin-bottom: 0;
}
.drawer-group-details__field-label,
.drawer-companies__field-label {
  text-transform: none;
}
.drawer-group-details__history,
.drawer-companies__history {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.drawer-group-details__history-item,
.drawer-companies__history-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--swatches-border);
}
.drawer-group-details__history-item:last-child,
.drawer-companies__history-item:last-child {
  border-bottom: none;
}
.drawer-group-details__history-avatar,
.drawer-companies__history-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--swatches-border-base);
}
.drawer-group-details__history-avatar img,
.drawer-companies__history-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drawer-group-details__history-avatar-placeholder,
.drawer-companies__history-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--swatches-surface-alt);
  color: var(--swatches-on-surface-neutral-alt);
}
.drawer-group-details__history-content,
.drawer-companies__history-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drawer-group-details__table,
.drawer-companies__table {
  margin-top: 24px;
}

@media screen and (max-width: 768px) {
  .drawer-group-details {
    padding-bottom: 30px;
  }
}.data-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 !important;
}

.data-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
}
.data-list__item {
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0 !important;
  border: 0;
  border-bottom: 1px solid var(--neutral-200, #e5e5e5);
  background: var(--neutral-0, #ffffff) !important;
  text-align: left;
  width: 100%;
}
.data-list__item:last-child {
  border-bottom: none;
}
.data-list__item:hover {
  background-color: var(--neutral-50, #f9f9f9);
}
.data-list__item:active {
  background-color: var(--neutral-100, #f0f0f0);
}
.data-list__item:focus-visible {
  outline: 2px solid var(--color-primary, #007bff);
  outline-offset: -2px;
}
.data-list--loading, .data-list--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: var(--text-color-secondary, #666);
}
@media (max-width: 768px) {
  .data-list {
    border-radius: 0;
  }
}
.data-list__pagination {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--swatches-surface, #fafafa);
  border-top: 1px solid var(--swatches-border, #e5e5e5);
}
.data-list__pagination .pagination-container {
  border-top: 0 !important;
}
@media (max-width: 768px) {
  .data-list__pagination {
    padding: 12px 16px;
    margin-top: auto;
  }
}.data-table-wrapper {
  margin: 0 !important;
}
.data-table-wrapper .datatable-empty,
.data-table-wrapper .datatable-empty-cell,
.data-table-wrapper .table-empty-message {
  text-align: center !important;
  vertical-align: middle !important;
  width: 100%;
  min-height: 120px;
  padding: 48px 24px;
}
.data-table-wrapper .datatable-container {
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}
.data-table-wrapper .datatable-wrapper {
  overflow: visible !important;
}
.data-table-wrapper .table-container {
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}
.data-table-wrapper .pagination-container {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  background-color: var(--swatches-surface);
}

.data-table-wrapper .table-container table {
  width: 100% !important;
  table-layout: fixed !important;
}

.data-table-wrapper .table-container table td.cell-wrap-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  overflow-wrap: break-word;
}

.data-table-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.filter-bar--desktop {
  margin: 0 !important;
  padding: 0 24px 24px 24px;
}
.filter-bar--desktop .filter-bar__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.filter-bar--desktop .filter-bar__search {
  flex: 1;
}
.filter-bar--desktop .filter-bar__actions {
  margin-left: auto;
}
.filter-bar--mobile {
  background: transparent;
  padding: 0;
  flex-direction: column;
  align-items: flex-start;
}
.filter-bar--mobile .filter-bar__mobile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.filter-bar--mobile .filter-bar__actions {
  width: 100%;
  margin-top: 12px;
}.mass-actions-bar {
  width: 100%;
  max-width: 100%;
  margin: 8px auto 16px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--neutral-200);
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--neutral-0);
}
.mass-actions-bar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-shrink: 1;
}
.mass-actions-bar__select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.mass-actions-bar__select-all span {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--neutral-800, #333);
}
.mass-actions-bar__count {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--neutral-800, #333);
}
.mass-actions-bar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.mass-actions-bar__toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mass-actions-bar__toggle-wrapper span {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--neutral-600, #525252);
}
.mass-actions-bar__icons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mass-actions-bar__icon {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}
.mass-actions-bar__icon:hover:not(:disabled), .mass-actions-bar__icon:focus, .mass-actions-bar__icon:active {
  background: transparent !important;
  background-color: transparent !important;
}
.mass-actions-bar__icon--delete:hover:not(:disabled) {
  background-color: var(--danger-50, #dc2626) !important;
  border: 0;
}
.mass-actions-bar__icon--delete:hover:not(:disabled) svg path {
  stroke: #fff !important;
}
.mass-actions-bar__icon--download:hover:not(:disabled) {
  background-color: var(--neutral-900, #000) !important;
  border: 0;
}
.mass-actions-bar__icon--download:hover:not(:disabled) svg path {
  fill: #fff !important;
}
@media (max-width: 768px) {
  .mass-actions-bar {
    display: none;
  }
}.drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hidden-trigger {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}.action-menu {
  position: relative;
  display: inline-block;
}
.action-menu__trigger {
  all: unset;
  cursor: pointer;
  display: inline-flex;
}
.action-menu__dropdown {
  position: absolute;
  min-width: 180px;
  background: var(--neutral-100, #fff);
  border: 1px solid var(--neutral-200, #e5e5e5);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}
.action-menu__dropdown--bottom-right {
  top: calc(100% + 8px);
  right: 0;
}
.action-menu__dropdown--bottom-left {
  top: calc(100% + 8px);
  left: 0;
}
.action-menu__dropdown--top-right {
  bottom: calc(100% + 8px);
  right: 0;
}
.action-menu__dropdown--top-left {
  bottom: calc(100% + 8px);
  left: 0;
}

.action-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--text-primary, #000);
}
.action-menu-item:hover:not(.action-menu-item--disabled) {
  background: var(--neutral-100, #f5f5f5);
}
.action-menu-item:active:not(.action-menu-item--disabled) {
  background: var(--neutral-200, #e5e5e5);
}
.action-menu-item--danger {
  color: var(--destructive-default, #dc2626) !important;
}
.action-menu-item--danger .action-menu-item__icon {
  color: var(--destructive-default, #dc2626) !important;
  fill: var(--destructive-default, #dc2626) !important;
}
.action-menu-item--danger .action-menu-item__label {
  color: var(--destructive-default, #dc2626) !important;
}
.action-menu-item--danger:hover:not(.action-menu-item--danger--disabled) {
  background: var(--danger-light, #fee);
}
.action-menu-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.action-menu-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  fill: var(--primary);
  color: var(--primary);
}
.action-menu-item__label {
  flex: 1;
  color: var(--primary);
}
.action-menu-item__component {
  display: flex;
  align-items: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.filter-panel {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 0;
}
.filter-panel .filter-panel__filters {
  min-width: 250px;
  display: flex;
  gap: 12px;
}

.search-drawer__filter-panel .filter-panel {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 0;
}
.search-drawer__filter-panel .filter-panel .filter-panel__filters {
  flex-direction: column;
  width: 100%;
  gap: 16px;
  min-width: auto;
}
.search-drawer__filter-panel .filter-panel button {
  width: 100%;
}

.filter-panel-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}.div-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bg-color-component);
  border-radius: 16px;
  box-sizing: border-box;
  min-width: 240px;
  width: 100%;
  margin: 32px 0;
  box-shadow: var(--card-box-shadow);
  overflow: hidden;
}

@media (max-width: 800px) {
  .div-card {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
}.import-modal__description {
  margin-bottom: 12px;
  padding: 0;
}

.import-modal__upload {
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
}
.import-modal__upload .form-upload-field__header,
.import-modal__upload .form-upload-field__label,
.import-modal__upload .form-upload-field__sub-label {
  display: none !important;
}.textarea-custom-label {
  color: var(--neutral-800, #262626);
  font-style: normal;
  margin-bottom: 5px;
  display: block;
}

.optional-label-text {
  color: var(--neutral-500, #737373);
}.form-rich-text-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-rich-text-editor__label {
  color: var(--neutral-800, #262626);
  font-style: normal;
}
.form-rich-text-editor__required {
  color: var(--color-error, #ef4444);
}
.form-rich-text-editor__wrapper .ql-toolbar {
  border-radius: 8px 8px 0 0;
  border-color: var(--neutral-300, #d4d4d4);
}
.form-rich-text-editor__wrapper .ql-container {
  border-radius: 0 0 8px 8px;
  border-color: var(--neutral-300, #d4d4d4);
  min-height: 150px;
}
.form-rich-text-editor__wrapper .ql-editor {
  min-height: 150px;
}
.form-rich-text-editor__wrapper--error .ql-toolbar,
.form-rich-text-editor__wrapper--error .ql-container {
  border-color: var(--color-error, #ef4444);
}
.form-rich-text-editor__error {
  color: var(--color-error, #ef4444);
}.form-input-tags-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 8px;
}html,
body {
  margin: 0;
  padding: 0;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: 88px;
  transition: padding-left 200ms ease;
}

.main > .content {
  flex: 1 0 auto;
  min-height: 0;
  background-color: #f5f5f5;
}

@media (min-width: 360px) and (max-width: 767px) {
  .sidebar {
    z-index: 1200;
    transform: translateX(-110%);
  }
  .sidebar.expanded {
    display: block;
    transform: translateX(0);
  }
  .sidebar.collapsed {
    display: none;
    transform: translateX(-110%);
  }
  .main {
    padding-left: 0;
  }
  .main.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
}
@media (min-width: 1024px) {
  .sidebar.expanded ~ .main,
  #main-content:not(.sidebar-collapsed) {
    padding-left: 310px;
  }
  .sidebar.collapsed ~ .main,
  #main-content.sidebar-collapsed,
  .main.sidebar-collapsed {
    padding-left: 88px;
  }
}
.upload-field-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.upload-field {
  display: flex;
  width: 100%;
  height: 262px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 3px dashed var(--swatches-on-surface-neutral-alt);
  background: var(--swatches-surface-alt);
  cursor: pointer;
}
.upload-field:hover {
  background: var(--swatches-background);
}
.upload-field:focus-visible {
  outline-offset: 3px;
}
.upload-field .upload-field-content {
  display: flex;
  padding: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
}
@media (min-width: 360px) and (max-width: 767px) {
  .upload-field .upload-field-content {
    gap: 16px;
    padding: 24px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .upload-field .upload-field-content {
    gap: 20px;
    padding: 32px;
  }
}
.upload-field .upload-field-content .upload-field-icon {
  display: flex;
  align-items: flex-start;
}
.upload-field .upload-field-content .upload-field-icon i.icon,
.upload-field .upload-field-content .upload-field-icon svg.icon {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 3.415px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.upload-field .upload-field-content .upload-field-icon i.icon {
  background-color: var(--swatches-on-base);
}
.upload-field .upload-field-content .upload-field-icon svg.icon {
  color: var(--swatches-on-base);
}
.upload-field .upload-field-content .upload-field-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
@media (min-width: 360px) and (max-width: 767px) {
  .upload-field .upload-field-content .upload-field-text {
    gap: 8px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .upload-field .upload-field-content .upload-field-text {
    gap: 12px;
  }
}
.upload-field .upload-field-content .upload-field-text .title {
  color: var(--swatches-on-base);
  text-align: center;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  line-height: 130%;
}
@media (min-width: 360px) and (max-width: 767px) {
  .upload-field .upload-field-content .upload-field-text .title {
    font-size: 20px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .upload-field .upload-field-content .upload-field-text .title {
    font-size: 20px;
  }
}
.upload-field .upload-field-content .upload-field-text .description {
  color: var(--swatches-on-base);
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}
@media (min-width: 360px) and (max-width: 767px) {
  .upload-field .upload-field-content .upload-field-text .description {
    font-size: 14px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .upload-field .upload-field-content .upload-field-text .description {
    font-size: 14px;
  }
}

.upload-field.is-hover {
  background: var(--swatches-background);
}

.upload-field.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.form-upload-field {
  width: 100%;
}
.form-upload-field__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.form-upload-field__label {
  color: var(--color-text-primary, #222);
}
.form-upload-field__sub-label {
  color: var(--color-text-secondary, #666);
}
.form-upload-field__description {
  color: var(--color-text-secondary, #666);
  margin-bottom: 12px;
}.form-radio-group__options {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.form-radio-group__options--horizontal {
  flex-direction: row;
  gap: 24px;
}
.form-radio-group__options--vertical {
  flex-direction: column;
}.pdf-preview-modal {
  position: relative;
  background-color: var(--neutral-0, #ffffff);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  width: 90%;
  max-width: 900px;
  height: 90vh;
  max-height: 800px;
  z-index: 1500;
  animation: slideIn 0.3s ease-out;
  display: flex;
  flex-direction: column;
}
.pdf-preview-modal .modal-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--neutral-200, #e5e5e5);
}
.pdf-preview-modal .modal-header .modal-header-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 48px);
}
.pdf-preview-modal .pdf-preview-modal__body {
  flex: 1;
  padding: 0;
  overflow: hidden;
  display: flex;
}
.pdf-preview-modal .pdf-preview-modal__body .pdf-preview-modal__iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 16px 16px;
}
.pdf-preview-modal .pdf-preview-modal__body .pdf-preview-modal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0 0 16px 16px;
}
.pdf-preview-modal .pdf-preview-modal__body .pdf-preview-modal__download {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  width: 100%;
}
.pdf-preview-modal .pdf-preview-modal__body .pdf-preview-modal__download .pdf-preview-modal__download-text {
  margin: 0;
  color: var(--text-color-secondary, #666);
  text-align: center;
}
.pdf-preview-modal .pdf-preview-modal__body .pdf-preview-modal__download .pdf-preview-modal__download-link {
  padding: 10px 20px;
  background: var(--primary-color, #0066cc);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}
.pdf-preview-modal .pdf-preview-modal__body .pdf-preview-modal__download .pdf-preview-modal__download-link:hover {
  opacity: 0.9;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
body.dark-theme .pdf-preview-modal {
  background-color: var(--neutral-900, #1a1a1a);
}
body.dark-theme .pdf-preview-modal .modal-header {
  border-color: var(--neutral-700, #404040);
}

@media (max-width: 768px) {
  .pdf-preview-modal {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
  .pdf-preview-modal .pdf-preview-modal__body .pdf-preview-modal__iframe {
    border-radius: 0;
  }
}.totals-summary {
  display: flex;
  flex-direction: column;
}
.totals-summary-row--header td {
  padding: 12px 16px !important;
  background-color: transparent !important;
  border-bottom: none !important;
}
.totals-summary-row--table-header {
  background-color: var(--background-color) !important;
}
.totals-summary-row--table-header td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border-color, #e5e5e5) !important;
}
.totals-summary-row--total {
  background-color: var(--background-color) !important;
}
.totals-summary-row--total td {
  padding: 12px 16px !important;
  border-bottom: none !important;
}.posting-details-card__body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 1.5rem;
  max-width: 1024px;
  margin: 0 auto;
}
.posting-details-card__body_card {
  display: flex;
  flex-direction: column;
  gap: 80px;
  background: var(--neutral-50);
  box-shadow: var(--card-box-shadow, 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06));
  border-radius: 8px;
  padding: 1.5rem;
}
.posting-details-card__card {
  display: flex;
  background-color: var(--neutral-100);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: var(--card-box-shadow, 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06));
}
.posting-details-card__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.posting-details-card__div {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 24px;
}
.posting-details-card__amount {
  color: var(--primary);
}
.posting-details-card__details-section {
  padding: 0 24px;
}
.posting-details-card__provider-data {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.posting-details-card__actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
.posting-details-card__actions_right {
  display: flex;
  gap: 1rem;
}
.posting-details-card__files {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.posting-details-card__file {
  width: 100%;
}.module-actions-selector {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.module-actions-selector__search {
  padding-bottom: 16px;
  flex-shrink: 0;
}
.module-actions-selector__content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.module-actions-selector__loading, .module-actions-selector__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-color-secondary, #666);
}
.module-actions-selector__functionalities {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.module-actions-selector__functionality {
  background-color: var(--color-background-secondary, #f8f9fa);
  border-radius: 8px;
  padding: 16px;
}
.module-actions-selector__functionality-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-light, #e9ecef);
}
.module-actions-selector__functionality-count {
  color: var(--text-color-secondary, #666);
  background-color: var(--neutral-200, #e5e5e5);
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: auto;
}
.module-actions-selector__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
}
.module-actions-selector__action {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background-color: var(--color-background, #fff);
  border-radius: 6px;
  border: 1px solid var(--color-border-light, #e9ecef);
  transition: all 0.2s ease;
}
.module-actions-selector__action:hover {
  border-color: var(--color-primary-light, #b3d7ff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.module-actions-selector__action-description {
  color: var(--text-color-secondary, #666);
  margin-left: 28px;
}
.module-actions-selector__permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 28px;
  margin-top: 6px;
}
.module-actions-selector__permission-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background-color: var(--color-primary-light, #e3f2fd);
  color: var(--color-primary, #1976d2);
  border-radius: 12px;
  cursor: help;
  transition: background-color 0.2s ease;
}
.module-actions-selector__permission-tag:hover {
  background-color: var(--color-primary, #1976d2);
  color: white;
}.mobile-menu-drawer {
  width: 100%;
}
.mobile-menu-drawer__header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--neutral-100, #e5e5e5);
}
.mobile-menu-drawer__logo {
  height: 32px;
  width: auto;
}
.mobile-menu-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 8px);
}
.mobile-menu-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 12px);
  padding: var(--spacing-md, 16px);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  color: var(--color-text-primary, #1a1a1a);
}
.mobile-menu-drawer__item:hover {
  background: var(--color-background-hover, rgba(0, 0, 0, 0.04));
}
.mobile-menu-drawer__item:active {
  transform: scale(0.98);
}
.mobile-menu-drawer__item--active {
  background-color: var(--neutral-100, #e6f7ff);
  border: 1px solid var(--neutral-200);
  color: var(--color-text-primary, #1a1a1a);
}
.mobile-menu-drawer__item--active .mobile-menu-drawer__icon {
  color: var(--color-text-primary, #1a1a1a);
}
.mobile-menu-drawer__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-secondary, #666666);
  transition: color 0.2s ease;
}
.mobile-menu-drawer__label {
  flex: 1;
}

[data-theme=dark] .mobile-menu-drawer__header {
  border-bottom-color: var(--neutral-200, #333333);
}
[data-theme=dark] .mobile-menu-drawer__item {
  color: var(--color-text-primary, #e0e0e0);
}
[data-theme=dark] .mobile-menu-drawer__item:hover {
  background: var(--color-background-hover, rgba(255, 255, 255, 0.08));
}
[data-theme=dark] .mobile-menu-drawer__item--active {
  background-color: var(--neutral-100, #1a1a1a);
  border: 1px solid var(--neutral-200, #333333);
  color: var(--color-text-primary, #e0e0e0);
}
[data-theme=dark] .mobile-menu-drawer__item--active .mobile-menu-drawer__icon {
  color: var(--color-text-primary, #e0e0e0);
}
[data-theme=dark] .mobile-menu-drawer__icon {
  color: var(--color-text-secondary, #a0a0a0);
}.search-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.search-drawer__header {
  margin-bottom: 24px;
}
.search-drawer__title {
  margin: 0;
  color: var(--color-text-primary, #1a1a1a);
}
.search-drawer__search-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  gap: 16px;
}
.search-drawer__search {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
}
.search-drawer__search > div:first-child {
  flex: 1;
}
.search-drawer__history {
  max-height: 50%;
  overflow-y: auto;
  margin-bottom: 24px;
}
.search-drawer__history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  background: var(--neutral-0, "#FFF");
}
.search-drawer__history-item:last-child {
  border-bottom: none;
}
.search-drawer__history-button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: var(--color-text-primary, #1a1a1a);
}
.search-drawer__history-button:hover {
  opacity: 0.8;
}
.search-drawer__history-icon {
  flex-shrink: 0;
  color: var(--color-text-secondary, #666666);
}
.search-drawer__history-text {
  flex: 1;
}
.search-drawer__footer {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-100, #e5e5e5);
}

[data-theme=dark] .search-drawer__title {
  color: var(--color-text-primary, #e0e0e0);
}
[data-theme=dark] .search-drawer__history-item {
  border-bottom-color: var(--neutral-200, #333333);
}
[data-theme=dark] .search-drawer__history-button {
  color: var(--color-text-primary, #e0e0e0);
}
[data-theme=dark] .search-drawer__history-icon {
  color: var(--color-text-secondary, #a0a0a0);
}
[data-theme=dark] .search-drawer__footer {
  border-top-color: var(--neutral-200, #333333);
}.detail-action-drawer {
  padding: 16px;
  background: transparent;
  border-radius: 16px;
  height: 100%;
}
.detail-action-drawer__switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.detail-action-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-action-drawer__button {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 12px 0;
  color: #222;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
}
.detail-action-drawer__button:hover {
  background: #f5f5f5;
}
.detail-action-drawer__button--delete {
  color: #d32f2f;
}
.detail-action-drawer__button--delete svg {
  color: #d32f2f;
}.action-dropdown {
  position: relative;
  display: inline-block;
}
.action-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--background-color, #fff);
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--text-primary, #000);
}
.action-dropdown-item:hover {
  background: var(--neutral-100, #f5f5f5);
}
.action-dropdown-item:active {
  background: var(--neutral-200, #e5e5e5);
}
.action-dropdown-item--danger {
  color: var(--destructive-default, #dc2626);
}
.action-dropdown-item--danger:hover {
  background: var(--danger-light, #fee);
}
.action-dropdown-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.action-dropdown-item__label {
  flex: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.route-loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  z-index: 9999;
}.form-main-col {
  flex: 0 1 1024px;
  max-width: 1024px;
}

@media (max-width: 800px) {
  .form-main-col {
    max-width: 100%;
  }
}
.avatar-mobile {
  display: none;
}

.avatar-desktop {
  display: inline-block;
}

@media (max-width: 800px) {
  .avatar-mobile {
    display: flex !important;
    justify-content: center;
    margin-bottom: 16px;
  }
  .avatar-desktop {
    display: none !important;
  }
}
.address-helper {
  display: flex;
  align-items: center;
  background: var(--swatches-background);
  border: 1px solid var(--swatches-border);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 8px 0;
  color: var(--swatches-on-surface-neutral);
  box-sizing: border-box;
}
.address-helper__icon {
  margin-right: 8px;
  margin-top: 2px;
  color: var(--swatches-on-surface-neutral);
  flex-shrink: 0;
}
.address-helper__text {
  flex: 1;
}

.form-add-edit-group {
  background-color: var(--swatches-background);
  width: 100%;
  max-width: 100%;
  margin: 0 auto !important;
}
.form-add-edit-group .btn-tab .label-tab {
  white-space: nowrap;
}
.form-add-edit-group .btn-tab.active svg {
  color: var(--neutral-0) !important;
}
.form-add-edit-group .btn-tab.legal-person-form__tab-trigger--error {
  border-color: var(--destructive-default, #dc2626) !important;
}
.form-add-edit-group .legal-person-form__header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.form-add-edit-group .legal-person-form__tabs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.form-add-edit-group .legal-person-form__tabs-row--single-tab {
  margin-bottom: 8px;
}
.form-add-edit-group .legal-person-form__complete-registration-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-add-edit-group .legal-person-form__switch-label {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--neutral-800, #171717);
}
.form-add-edit-group .legal-person-form__tabs-wrapper {
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  .form-add-edit-group .legal-person-form__tabs-wrapper {
    padding-bottom: 96px;
  }
}
.form-add-edit-group .legal-person-form__tab-trigger-wrapper {
  position: relative;
  display: inline-flex;
}
.form-add-edit-group .legal-person-form__tab-error-badge {
  position: absolute;
  top: 0px;
  right: 10px;
  min-width: 14px;
  height: 14px;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--destructive-default, #dc2626);
  color: var(--neutral-0, #fff);
}
.form-add-edit-group .links-tab--has-error {
  border: 1px solid var(--destructive-default, #dc2626);
  border-radius: 12px;
  padding: 16px;
}
.form-add-edit-group .links-tab__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-add-edit-group .links-tab__taker-row {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: flex-start;
  white-space: nowrap;
}
.form-add-edit-group .links-tab__binding-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-add-edit-group .links-tab__cost-center-row {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: flex-start;
  white-space: nowrap;
}
.form-add-edit-group .links-tab__taker-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-add-edit-group .links-tab__add-taker-button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.form-add-edit-group .links-tab__cost-center-select {
  width: 100%;
}
.form-add-edit-group .links-tab__cost-center-value {
  width: 100%;
}
.form-add-edit-group .tab-grid-2x4 {
  width: 65% !important;
  max-width: 1730px !important;
}
.form-add-edit-group .tab-grid-2x4 .tab-col {
  margin: 0 auto !important;
  min-width: 740px !important;
}
@media screen and (max-width: 800px) {
  .form-add-edit-group .tab-grid-2x4 {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    padding-bottom: 5px;
  }
  .form-add-edit-group .tab-grid-2x4 .tab-col {
    min-width: 95% !important;
  }
}
.form-add-edit-group .form-group-wraper-inputs {
  width: 100%;
  padding-bottom: 70px;
}
.form-add-edit-group .form-group-wrapper {
  width: 100%;
  min-width: 400px;
  max-width: 1024px;
  border: 1px solid var(--swatches-border);
  padding: 24px;
  border-radius: 24px;
  gap: 24px;
  display: flex;
  flex-direction: column;
  background: var(--swatches-surface);
  margin: 0 auto;
  box-sizing: border-box;
}
.form-add-edit-group .form-group-wrapper .datatable-header-cell {
  background-color: var(--swatches-background);
}
.form-add-edit-group .form-group__label {
  color: var(--swatches-on-surface-neutral);
}
.form-add-edit-group .form-group__helper-text {
  color: var(--swatches-on-surface-neutral-alt);
  margin: 0 0 8px 0;
}
.form-add-edit-group .form-header {
  display: flex;
  padding: 24px 24px 0 24px !important;
}
.form-add-edit-group .form-header .form-header-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.form-add-edit-group .form-header .form-header-actions .save-draft-button {
  white-space: nowrap !important;
}
.form-add-edit-group .form-header {
  margin: 0 !important;
}
.form-add-edit-group .form-col {
  padding: 0 24px 24px 24px !important;
  gap: 24px !important;
  box-sizing: border-box;
}
.form-add-edit-group .form-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 !important;
  padding: 0 24px 24px 24px;
  gap: 24px !important;
  box-sizing: border-box;
}
.form-add-edit-group .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin: 8px 0 0 0 !important;
}
.form-add-edit-group .form-actions-container {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.form-add-edit-group h6 {
  color: var(--swatches-on-surface-neutral);
}
.form-add-edit-group .documents-info-box {
  margin-bottom: 16px;
  padding: 12px;
  background-color: transparent;
  border-radius: 8px;
}
.form-add-edit-group .documents-info-box ul {
  margin: 0;
  padding-left: 20px;
}
.form-add-edit-group .documents-info-box ul li {
  margin-bottom: 8px;
}
.form-add-edit-group .documents-alert-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.form-add-edit-group .documents-alert-header {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 8px;
}
.form-add-edit-group .payment-alert-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-add-edit-group .payment-alert-header strong {
  color: var(--warning-deep);
}
.form-add-edit-group .payment-alert-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-add-edit-group .document-upload-section-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-add-edit-group .form-row {
  display: flex;
  gap: 24px;
  width: 100%;
}
.form-add-edit-group .form-row > * {
  flex: 1;
}
.form-add-edit-group .form-row p {
  margin: 0;
}
.form-add-edit-group .payment-method-cards {
  display: flex;
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
}
.form-add-edit-group .payment-method-cards .card-option {
  flex: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.form-add-edit-group .payment-method-cards .card-option > div {
  height: 100%;
  border-radius: 12px;
  transition: all 0.2s ease;
}
.form-add-edit-group .payment-method-cards .card-option:hover > div {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.form-add-edit-group .payment-method-cards .card-option:active > div {
  transform: translateY(0);
}
.form-add-edit-group .payment-method-cards .card-option--selected > div {
  border: 2px solid var(--primary-500) !important;
}
.form-add-edit-group .payment-method-cards .card-option:focus-within {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: 12px;
}
.form-add-edit-group .documents-description {
  color: var(--neutral-600);
  margin-bottom: 16px;
}
.form-add-edit-group .upload-area {
  border: 2px dashed var(--neutral-300);
  border-radius: 8px;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  background-color: var(--neutral-50);
  transition: all 0.2s ease;
}
.form-add-edit-group .upload-area:hover {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
}
.form-add-edit-group .upload-area__icon {
  margin: 0 auto 16px;
  color: var(--neutral-400);
}
.form-add-edit-group .upload-area__text {
  margin: 0;
  color: var(--neutral-700);
}
.form-add-edit-group .upload-card {
  border: 2px dashed var(--neutral-300);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background-color: var(--neutral-50);
  margin-bottom: 24px;
  transition: all 0.2s ease;
}
.form-add-edit-group .upload-card:hover {
  border-color: var(--primary-500);
  background-color: var(--primary-50);
}
.form-add-edit-group .upload-card__icon {
  margin: 0 auto 12px;
  color: var(--neutral-400);
}
.form-add-edit-group .upload-card__text {
  margin: 0;
  color: var(--neutral-700);
}
.form-add-edit-group .loading-spin {
  display: inline-block;
  animation: loading-spin 1s linear infinite;
}
@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 800px) {
  .form-add-edit-group:has(.avatar-desktop) > div > div:first-child {
    margin-left: 0;
    padding-left: 0;
  }
  .form-add-edit-group .form-add-edit-group {
    position: relative;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  .form-add-edit-group .form-add-edit-group-header {
    position: sticky;
    top: 0;
    background: var(--neutral-0);
    z-index: 10;
    padding: 16px;
    border-bottom: 1px solid var(--neutral-200);
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px 16px;
    margin: 0 !important;
    gap: 16px;
  }
  .form-add-edit-group .form-header {
    padding: 16px 16px 0 !important;
  }
  .form-add-edit-group .form-col {
    flex: initial !important;
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px 16px;
    margin: 0 !important;
    gap: 16px;
    width: 100%;
  }
  .form-add-edit-group .form-group-wraper-inputs {
    width: 100%;
    margin: 0 !important;
  }
  .form-add-edit-group .form-group-wrapper {
    min-width: unset;
    width: 100%;
    padding: 16px;
  }
  .form-add-edit-group .form-content {
    width: 100%;
    padding: 0 16px 16px;
  }
  .download-template-link {
    margin-bottom: 16px;
  }
  .file-input-label-wrapper {
    margin-bottom: 8px;
  }
  .file-input-label {
    display: block;
    margin-bottom: 4px;
  }
  .file-input-description {
    color: var(--text-color-secondary);
    margin-bottom: 8px;
  }
  .file-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .file-input-display {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color-component);
    cursor: not-allowed;
  }
  .file-input-hidden {
    display: none;
  }
}.profile-actions-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.profile-actions-drawer__warning {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin: 16px 16px 0;
  background-color: var(--color-warning-light, #fff3cd);
  color: var(--color-warning-dark, #856404);
  border: 1px solid var(--color-warning, #ffc107);
  border-radius: 8px;
}
.profile-actions-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--color-border, #e0e0e0);
  flex-shrink: 0;
}.form-login {
  border: 1px solid var(--bg-color-component);
  border-radius: 16px;
  box-sizing: border-box;
  min-width: 240px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  box-shadow: var(--card-box-shadow);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.form-login .form-header {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 24px;
}
.form-login .form-header svg {
  display: inline-block;
  color: #0e84c7;
  width: 64px;
  height: 64px;
}
.form-login .hiperlink-form {
  display: flex;
  justify-content: flex-end;
}
.form-login .email-example {
  width: fit-content;
  background-color: var(--bg-color-component);
  padding: 8px;
  border-radius: 8px;
}
.form-login .form-content {
  display: flex;
  flex-direction: column;
  padding: 0 24px 24px 24px;
  gap: 24px;
}
.form-login .sso-divider {
  display: flex;
  align-items: center;
  gap: 16px;
}
.form-login .sso-divider::before, .form-login .sso-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--border-color, #e0e0e0);
}
.form-login .sso-divider span {
  color: var(--text-color-secondary);
  white-space: nowrap;
}
.form-login .loading-spin {
  display: inline-block;
  animation: loading-spin 1s linear infinite;
}
@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 800px) {
  .form-login {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin: 0;
    border: none;
    box-sizing: border-box;
    box-shadow: none;
  }
  .form-login .submit-button {
    width: 94% !important;
    position: fixed !important;
    left: 16px;
    bottom: 16px;
  }
  .form-login .submit-buttons-group {
    width: 46%;
    position: fixed;
    left: 16px;
    bottom: 16px;
  }
}
.pw-validation {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  gap: 24px;
}
.pw-validation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pw-validation li {
  display: flex;
  align-items: center;
  color: var(--border-error);
  gap: 8px;
}
.pw-validation li svg {
  color: #fff !important;
  stroke-width: 3px !important;
}
.pw-validation li .dot {
  width: 16px;
  height: 16px;
}
.pw-validation li .active {
  color: var(--success, #0f6c31);
}

@media (max-width: 800px) {
  .form-login .form-header,
  .form-login .form-content,
  .pw-validation,
  .pw-validation ul {
    gap: 16px !important;
  }
}
@media (max-width: 400px) {
  .form-login .form-header,
  .form-login .form-content,
  .pw-validation,
  .pw-validation ul {
    gap: 8px !important;
  }
}
.callback-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 24px;
  min-height: 200px;
}
.callback-container .callback-text {
  color: var(--text-color-secondary);
  margin: 0;
}.verification-code-input {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.error-message {
  color: var(--border-error);
}

.verification-code-input input {
  text-align: center;
  padding: 8px 6px;
}.resend-code-button {
  display: flex;
  justify-content: start;
  align-items: center;
}.select-profile .select-header {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
}
.select-profile .select-header svg {
  display: inline-block;
  color: #0e84c7;
  width: 64px;
  height: 64px;
}
.select-profile .select-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: calc(70vh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.select-profile .select-content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.select-profile .select-content::-webkit-scrollbar-track {
  background: transparent;
}
.select-profile .select-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.select-profile .select-content {
  scrollbar-width: thin;
}

@media (max-width: 800px) {
  .select-profile .select-content {
    max-height: 100%;
    overflow-y: visible;
  }
}.app-header__logo--with-divider {
  border-right: 1px solid var(--neutral-200, #e0e0e0) !important;
  padding-right: 24px;
}

.app-header--no-border {
  width: 100%;
}

.app-header-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: var(--neutral-100, #ffffff);
  border-bottom: 1px solid var(--neutral-200, #e0e0e0);
}
.app-header-mobile .app-header-mobile__left,
.app-header-mobile .app-header-mobile__right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-header-mobile .app-header-mobile__logo {
  height: 24px;
  width: auto;
}

.hidden-trigger {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}.notification-bell {
  position: relative;
}
.notification-bell__badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-error, #ef4444);
  color: var(--color-white, #ffffff);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}.notification-panel__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 16px;
  border-bottom: 1px solid var(--neutral-200, #e0e0e0);
}
.notification-panel__mark-all {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.notification-panel__mark-all:hover {
  background: var(--neutral-200, #f0f0f0);
}
.notification-panel__list {
  overflow-y: auto;
  flex: 1;
}
.notification-panel__item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-200, #e0e0e0);
  cursor: pointer;
  transition: background-color 0.15s;
}
.notification-panel__item:last-child {
  border-bottom: none;
}
.notification-panel__item:hover {
  background: var(--neutral-200, #f5f5f5);
}
.notification-panel__item--unread {
  background: var(--color-info-light, #dbeafe);
}
.notification-panel__item--unread:hover {
  background: var(--color-info-light, #dbeafe);
  filter: brightness(0.97);
}
.notification-panel__item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-panel__item-icon--info {
  background: var(--color-info-light, #dbeafe);
  color: var(--color-info, #3b82f6);
}
.notification-panel__item-icon--success {
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success, #22c55e);
}
.notification-panel__item-icon--warning {
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning, #f59e0b);
}
.notification-panel__item-icon--error {
  background: var(--color-error-light, #fee2e2);
  color: var(--color-error, #ef4444);
}
.notification-panel__item-content {
  flex: 1;
  min-width: 0;
}
.notification-panel__item-title {
  color: var(--neutral-800, #262626);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification-panel__item-message {
  color: var(--neutral-600, #525252);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notification-panel__item-time {
  color: var(--neutral-400, #a3a3a3);
}
.notification-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  color: var(--neutral-400, #a3a3a3);
}
.notification-panel__empty svg {
  margin-bottom: 12px;
  opacity: 0.5;
}
.notification-panel__empty p {
  margin: 0;
}.notification-detail__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.notification-detail__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: capitalize;
  padding: 4px 10px;
  border-radius: 12px;
}
.notification-detail__type--info {
  background: var(--color-info-light, #dbeafe);
  color: var(--color-info, #3b82f6);
}
.notification-detail__type--success {
  background: var(--color-success-light, #dcfce7);
  color: var(--color-success, #22c55e);
}
.notification-detail__type--warning {
  background: var(--color-warning-light, #fef3c7);
  color: var(--color-warning, #f59e0b);
}
.notification-detail__type--error {
  background: var(--color-error-light, #fee2e2);
  color: var(--color-error, #ef4444);
}
.notification-detail__timestamp {
  color: var(--neutral-400, #a3a3a3);
}
.notification-detail__title {
  margin: 0 0 12px;
  color: var(--text-color-primary);
}
.notification-detail__content {
  color: var(--text-color-secondary);
}
.notification-detail__content h1,
.notification-detail__content h2,
.notification-detail__content h3,
.notification-detail__content h4,
.notification-detail__content h5,
.notification-detail__content h6 {
  margin: 16px 0 8px;
  color: var(--text-color-primary);
}
.notification-detail__content p {
  margin: 0 0 12px;
}
.notification-detail__content ul,
.notification-detail__content ol {
  margin: 0 0 12px;
  padding-left: 24px;
}
.notification-detail__content a {
  color: var(--color-primary);
  text-decoration: underline;
}
.notification-detail__content blockquote {
  margin: 12px 0;
  padding: 8px 16px;
  border-left: 3px solid var(--neutral-300, #d4d4d4);
  background: var(--neutral-100, #f5f5f5);
  color: var(--text-color-secondary);
}
.notification-detail__content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}.main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-layout main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: var(--neutral-100);
}

@media (max-width: 800px) {
  .main-layout main {
    align-items: flex-start;
    padding: 0;
  }
}.PhotoView-Portal{direction:ltr;height:100%;left:0;overflow:hidden;position:fixed;top:0;touch-action:none;width:100%;z-index:2000}@keyframes PhotoView__rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes PhotoView__delayIn{0%,50%{opacity:0}to{opacity:1}}.PhotoView__Spinner{animation:PhotoView__delayIn .4s linear both}.PhotoView__Spinner svg{animation:PhotoView__rotate .6s linear infinite}.PhotoView__Photo{cursor:grab;max-width:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PhotoView__Photo:active{cursor:grabbing}.PhotoView__icon{display:inline-block;left:0;position:absolute;top:0;transform:translate(-50%,-50%)}.PhotoView__PhotoBox,.PhotoView__PhotoWrap{bottom:0;direction:ltr;left:0;position:absolute;right:0;top:0;touch-action:none;width:100%}.PhotoView__PhotoWrap{overflow:hidden;z-index:10}.PhotoView__PhotoBox{transform-origin:left top}@keyframes PhotoView__fade{0%{opacity:0}to{opacity:1}}.PhotoView-Slider__clean .PhotoView-Slider__ArrowLeft,.PhotoView-Slider__clean .PhotoView-Slider__ArrowRight,.PhotoView-Slider__clean .PhotoView-Slider__BannerWrap,.PhotoView-Slider__clean .PhotoView-Slider__Overlay,.PhotoView-Slider__willClose .PhotoView-Slider__BannerWrap:hover{opacity:0}.PhotoView-Slider__Backdrop{background:#000;height:100%;left:0;position:absolute;top:0;transition-property:background-color;width:100%;z-index:-1}.PhotoView-Slider__fadeIn{animation:PhotoView__fade linear both;opacity:0}.PhotoView-Slider__fadeOut{animation:PhotoView__fade linear reverse both;opacity:0}.PhotoView-Slider__BannerWrap{align-items:center;background-color:rgba(0,0,0,.5);color:#fff;display:flex;height:44px;justify-content:space-between;left:0;position:absolute;top:0;transition:opacity .2s ease-out;width:100%;z-index:20}.PhotoView-Slider__BannerWrap:hover{opacity:1}.PhotoView-Slider__Counter{font-size:14px;opacity:.75;padding:0 10px}.PhotoView-Slider__BannerRight{align-items:center;display:flex;height:100%}.PhotoView-Slider__toolbarIcon{fill:#fff;box-sizing:border-box;cursor:pointer;opacity:.75;padding:10px;transition:opacity .2s linear}.PhotoView-Slider__toolbarIcon:hover{opacity:1}.PhotoView-Slider__ArrowLeft,.PhotoView-Slider__ArrowRight{align-items:center;bottom:0;cursor:pointer;display:flex;height:100px;justify-content:center;margin:auto;opacity:.75;position:absolute;top:0;transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:70px;z-index:20}.PhotoView-Slider__ArrowLeft:hover,.PhotoView-Slider__ArrowRight:hover{opacity:1}.PhotoView-Slider__ArrowLeft svg,.PhotoView-Slider__ArrowRight svg{fill:#fff;background:rgba(0,0,0,.3);box-sizing:content-box;height:24px;padding:10px;width:24px}.PhotoView-Slider__ArrowLeft{left:0}.PhotoView-Slider__ArrowRight{right:0}.layout-container__header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  animation: slideDown 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.layout-container {
  display: flex;
  min-height: 100vh;
}
.layout-container .footer {
  background-color: var(--swatches-background) !important;
  flex-shrink: 0;
  width: 100%;
  display: block;
}
@media (max-width: 768px) {
  .layout-container .footer {
    display: none;
  }
}
.layout-container .footer-content {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.layout-container .footer__copyright {
  font-size: 12px !important;
  width: max-content !important;
  flex: unset !important;
}
.layout-container .sidebar {
  position: inherit !important;
  padding: 24px 16px !important;
  background-color: var(--swatches-surface);
  width: auto !important;
}
.layout-container .sidebar .active .menu-item {
  background-color: var(--swatches-background) !important;
  border: 1px solid var(--swatches-border) !important;
}
.layout-container .title-bottom {
  padding: 0 !important;
}
.layout-container .layout-container__sidebar {
  flex: 0 0 auto;
  position: sticky;
  left: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 110;
}
.layout-container .layout-container__scrollable {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: calc(100% - 83px);
}
.layout-container .layout-container__content-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  flex: 1 1 auto;
}
.layout-container .layout-container__header {
  position: static;
  flex: 0 0 auto;
}
.layout-container .layout-container__header .header-top {
  background-color: var(--swatches-background) !important;
  border-bottom: none !important;
}
.layout-container .layout-container__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.layout-container .layout-container__footer {
  width: 100%;
  flex: 0 0 auto;
}
.layout-container .layout-container__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--swatches-background) !important;
  padding-bottom: 8px;
}
.layout-container .layout-container__content .empty-state {
  min-height: calc(100vh - 320px);
}
@media screen and (max-width: 768px) {
  .layout-container .layout-container__content {
    min-height: calc(100vh - 130px);
  }
}
.layout-container .container {
  max-width: 100%;
  min-width: 100%;
  padding: 0 !important;
}
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
  .layout-container .layout-container__sidebar {
    display: none;
  }
  .layout-container .layout-container__scrollable {
    height: 100%;
    max-width: 100%;
  }
  .layout-container .layout-container__content {
    min-height: 0;
  }
  .layout-container .data-list-wrapper {
    padding-bottom: 70px !important;
  }
  .layout-container .pagination-range {
    margin-bottom: 0 !important;
  }
  .layout-container .layout-container__main {
    padding: 0 !important;
  }
  .layout-container .layout-container__footer {
    display: none;
  }
}.error-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 440px;
  min-width: 220px;
  padding: 24px;
  gap: 16px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.error-page > svg {
  color: var(--swatches-error-default);
}
.error-page button {
  width: 100%;
}

@media (max-width: 800px) {
  .error-page {
    position: static;
    transform: none;
    justify-content: flex-start;
    margin: 10px;
  }
}.home-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-color: var(--bg-color-primary);
  overflow: hidden;
}
.home-page__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.home-page__logo {
  max-width: 300px;
  width: 100%;
  height: auto;
  animation: fadeIn 0.5s ease-in-out;
}
.home-page .logo-light {
  background-image: url(var(--logo-light));
}
.home-page .logo-dark {
  background-image: url(var(--logo-dark));
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 768px) {
  .home-page__logo {
    max-width: 200px;
  }
}
/* Área de crop do avatar */
.image-cropper-crop-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--neutral-100, #f5f5f5);
}
.image-cropper-crop-area .image-cropper-crop-area__image {
  max-width: 100%;
  max-height: 400px;
  display: block;
}

body.dark-theme .image-cropper-crop-area {
  background-color: var(--neutral-800, #2a2a2a);
}

.avatar-crop-view__actions button {
  flex-shrink: 0;
  min-height: 40px;
  padding-inline: 20px;
}

@media (max-width: 768px) {
  .image-cropper-crop-area {
    max-height: 280px;
  }
  .image-cropper-crop-area .image-cropper-crop-area__image {
    max-height: 280px;
  }
}
/* react-photo-view.css já importado em ImageView; reutilizado quando AvatarUpload usa visualização */
.avatar-upload {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.avatar-upload .avatar-upload__container {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  width: 143px;
  height: 143px;
}
.avatar-upload .avatar-upload__container.avatar-upload__container--clickable {
  cursor: pointer;
}
.avatar-upload .avatar-upload__container.avatar-upload__container--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.avatar-upload .avatar-upload__container .avatar-upload__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 50%;
}
.avatar-upload .avatar-upload__container .avatar-upload__overlay span {
  color: #ffffff;
  text-align: center;
}
.avatar-upload .avatar-upload__container:hover:not(.avatar-upload__container--disabled) .avatar-upload__overlay {
  opacity: 1;
}
.avatar-upload .avatar-upload__img {
  width: 143px;
  height: 143px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}
.avatar-upload .avatar-upload__button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-upload__button svg {
  width: 16px !important;
  height: 16px !important;
}
.avatar-upload .avatar-upload__button:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size: 12px;--rc-drag-handle-mobile-size: 24px;--rc-drag-handle-bg-colour: rgba(0, 0, 0, .2);--rc-drag-bar-size: 6px;--rc-border-color: rgba(255, 255, 255, .7);--rc-focus-color: #0088ff}.ReactCrop{position:relative;display:inline-block;cursor:crosshair;max-width:100%}.ReactCrop *,.ReactCrop *:before,.ReactCrop *:after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{overflow:hidden;max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;width:calc(100% + .5px);height:calc(100% + .5px)}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translateZ(0);cursor:move}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid var(--rc-border-color);opacity:.3}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed white}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;background-image:linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;animation-play-state:running;animation-timing-function:linear;animation-iteration-count:infinite}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute;width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color)}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{top:0;left:0;transform:translate(-50%,-50%);cursor:nw-resize}.ReactCrop .ord-n{top:0;left:50%;transform:translate(-50%,-50%);cursor:n-resize}.ReactCrop .ord-ne{top:0;right:0;transform:translate(50%,-50%);cursor:ne-resize}.ReactCrop .ord-e{top:50%;right:0;transform:translate(50%,-50%);cursor:e-resize}.ReactCrop .ord-se{bottom:0;right:0;transform:translate(50%,50%);cursor:se-resize}.ReactCrop .ord-s{bottom:0;left:50%;transform:translate(-50%,50%);cursor:s-resize}.ReactCrop .ord-sw{bottom:0;left:0;transform:translate(-50%,50%);cursor:sw-resize}.ReactCrop .ord-w{top:50%;left:0;transform:translate(-50%,-50%);cursor:w-resize}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(50%)}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(-50%)}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media (pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}
.legal-person-detail-content {
  padding: 24px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.legal-person-detail-content .legal-person-detail-meta-row,
.legal-person-detail-content .legal-person-detail-sections-row {
  margin-bottom: 0;
}
.legal-person-detail-content .legal-person-detail-section-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-person-detail-content .legal-person-detail-field-row {
  margin: 0;
}
.legal-person-detail-content .legal-person-detail-section-title {
  margin: 0 0 24px 0;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--on-surface-primary, #000d3c);
}
.legal-person-detail-content .lp-subtitle2 {
  margin-top: 12px;
}
.legal-person-detail-content .legal-person-detail-loading,
.legal-person-detail-content .legal-person-detail-error {
  padding: 24px;
}

.legal-person-detail-documents {
  margin-top: 12px;
  width: 100%;
}
.legal-person-detail-documents__loading, .legal-person-detail-documents__empty {
  color: var(--on-surface-quaternary, rgba(0, 0, 0, 0.45));
  padding: 8px 0;
}
.legal-person-detail-documents__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--surface-tertiary, #f3f4f6);
}
.legal-person-detail-documents__info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.legal-person-detail-documents__name {
  display: block;
}
.legal-person-detail-documents__meta {
  display: block;
  color: var(--on-surface-quaternary, #6b7280);
}
.legal-person-detail-documents__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spin-animation {
  animation: spin 1s linear infinite;
}.lp-stepper {
  display: block;
}

.lp-steps-wrapper {
  padding: 24px 0;
}

.lp-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-500, var(--primary, #2563eb));
  color: var(--on-primary, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-step-icon--active {
  box-shadow: 0 0 0 4px var(--primary-shallow, rgba(37, 99, 235, 0.12));
}

.lp-stepper__content {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 768px) {
  .lp-stepper__content {
    padding-bottom: 96px;
  }
}

.lp-steps-header {
  display: flex;
  gap: 16px;
}

.lp-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.lp-step-item--active .lp-step-label {
  color: var(--primary-700, var(--primary, #1e40af));
}

.lp-step-label {
  color: var(--gray-600);
}

.lp-step-icon-svg {
  width: 28px;
  height: 28px;
  display: block;
}

.lp-step-icon-svg__circle {
  fill: var(--primary-500, var(--primary, #2563eb));
}

.lp-step-icon-svg__text {
  fill: var(--on-primary, #ffffff);
}

.lp-step-item--active .lp-step-icon-svg__circle,
.lp-step-icon--active .lp-step-icon-svg__circle {
  fill: var(--primary-700, var(--primary, #1e40af));
}.my-file-upload__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.my-file-upload__header--align-end {
  justify-content: flex-end;
}
.my-file-upload__header h6 {
  margin: 0 0 0.5rem;
  color: var(--color-text-primary, #1a1a1a);
}
.my-file-upload__required {
  color: var(--destructive-shallow);
  margin-left: 0.25rem;
}
.my-file-upload__description {
  margin: 0;
  color: var(--color-text-secondary, #666);
}
.my-file-upload__button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.my-file-upload__button--mobile {
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
}
.my-file-upload__button--upload {
  width: 100%;
  justify-content: center;
  margin-bottom: 1rem;
}
.my-file-upload__input-hidden {
  display: none;
}
.my-file-upload__loading {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--color-bg-tertiary, #fff);
  border-radius: 4px;
}
.my-file-upload__loading span {
  color: var(--color-text-secondary, #666);
}
.my-file-upload__spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-border, #e0e0e0);
  border-top-color: var(--color-primary, #007bff);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.my-file-upload__file {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  gap: 0.5rem;
}
.my-file-upload__processing-text {
  color: var(--swatches-on-base);
  white-space: nowrap;
}
.my-file-upload__success {
  padding: 0.75rem;
  background-color: var(--color-success-bg, #d4edda);
  border-radius: 4px;
  color: var(--color-success, #155724);
  margin-top: 0.5rem;
}
.my-file-upload__error {
  padding: 0.75rem;
  background-color: var(--color-error-bg, #f8d7da);
  border-radius: 4px;
  color: var(--color-error, #721c24);
  margin-top: 0.5rem;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}.list-radio-card {
  width: 100%;
  background: var(--neutral-0, #fff);
  border: 0;
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.list-radio-card__header .bamboo-file-upload,
.list-radio-card__header .my-file-upload__file {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.list-radio-card__title {
  color: var(--color-text-primary, #222);
}

.list-radio-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.list-radio-card__dates {
  display: flex;
  align-items: center;
  gap: 24px;
}
.list-radio-card__dates span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.list-radio-card .bamboo-file-upload svg,
.list-radio-card .my-file-upload__file svg {
  color: var(--icon-color, var(--color-text-primary, #222));
  fill: var(--icon-color, var(--color-text-primary, #222));
}

.list-radio-card .bamboo-file-upload {
  display: flex;
  align-items: center;
  gap: 12px;
}

.list-radio-card .bamboo-file-upload > * {
  flex-shrink: 0;
}

.list-radio-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 641px) {
  .list-radio-card__footer {
    flex-wrap: nowrap;
  }
  .list-radio-card__dates,
  .list-radio-card__actions {
    white-space: nowrap;
  }
}
.list-radio-card .bamboo-file-upload__remove,
.list-radio-card .my-file-upload__file button {
  background: transparent;
  border: none;
}

.list-radio-card--disabled {
  opacity: 0.6;
}

@media (max-width: 640px) {
  .list-radio-card {
    padding: 10px;
  }
  .list-radio-card__dates {
    gap: 8px;
  }
}.payment-method-card {
  position: relative;
  flex: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  display: block;
}
.payment-method-card__content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--neutral-0, #ffffff);
  border: 1px solid var(--neutral-200, #e5e5e5);
  border-radius: 16px;
  transition: all 0.2s ease;
  min-height: 88px;
}
.payment-method-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--text-color);
}
.payment-method-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.payment-method-card__title {
  margin: 0;
  color: var(--text-color);
}
.payment-method-card__subtitle {
  margin: 0;
  color: var(--text-color-secondary);
}
.payment-method-card__radio {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.payment-method-card:hover .payment-method-card__content {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--neutral-300, #d4d4d4);
}
.payment-method-card:active .payment-method-card__content {
  transform: translateY(0);
}
.payment-method-card--selected .payment-method-card__content {
  border-color: var(--neutral-200, #e5e5e5);
  background: var(--bg-color-component);
}
.payment-method-card:focus-within .payment-method-card__content {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}.form-payment-method-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pix-data-fields--has-error {
  border: 1px solid var(--destructive-default, #dc2626);
  border-radius: 12px;
  padding: 16px;
}

.bank-data-fields--has-error {
  border: 1px solid var(--destructive-default, #dc2626);
  border-radius: 12px;
  padding: 16px;
}

.payment-method-error {
  color: var(--destructive-default, var(--swatches-error-default, #dc2626));
  margin-top: -4px;
}.document-upload-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.document-upload-section ul {
  margin: 0 0 0 1.25rem;
  padding: 0;
}
.document-upload-section ul li {
  color: inherit;
  margin-bottom: 0.5rem;
}
.document-upload-section__subsection {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.social-contract-alert {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.social-contract-alert__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-contract-alert__title {
  margin: 0;
  color: inherit;
}.taker-contract-section__type-row {
  margin-bottom: 16px;
}
.taker-contract-section__addendums {
  margin-top: 0;
  margin-left: 40px;
}.taker-drawer-content {
  padding-bottom: 24px;
}
.taker-drawer-content .form-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.taker-drawer-content .form-group-wrapper h6 {
  margin-bottom: 0;
}

.taker-block__cost-centers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.taker-block__row-actions {
  display: flex;
  gap: 4px;
  padding-bottom: 4px;
}

.taker-drawer-customer-row {
  align-items: flex-end;
}

.taker-drawer-footer {
  gap: 8px;
  padding-top: 16px;
  margin-top: 24px;
  border-top: 1px solid var(--gray-200);
}.links-tab-list .managers-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.links-tab-list .links-tab-list__empty {
  padding: 24px;
  text-align: center;
  background: var(--gray-50);
  border-radius: 8px;
}
.links-tab-list .links-tab-list__empty-message {
  margin: 0;
  color: var(--neutral-600);
}.mobile-page-header {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  gap: 16px;
}
.mobile-page-header__title {
  margin-top: 5px !important;
}.approval-modal,
.rejection-modal {
  background: white;
  border-radius: 16px;
  padding: 24px;
  min-width: 500px;
  max-width: 600px;
}
.approval-modal__header,
.rejection-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.approval-modal__header-content,
.rejection-modal__header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.approval-modal__title,
.rejection-modal__title {
  color: var(--text-primary);
  margin: 0;
}
.approval-modal__body,
.rejection-modal__body {
  margin-bottom: 24px;
}
.approval-modal__description,
.rejection-modal__description {
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.approval-modal__footer,
.rejection-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.approval-modal__button-success,
.rejection-modal__button-success {
  background-color: var(--success-color) !important;
}
.approval-modal__button-success:hover,
.rejection-modal__button-success:hover {
  background-color: var(--success-dark-color) !important;
}
.approval-modal__button-danger,
.rejection-modal__button-danger {
  background-color: var(--destructive-default) !important;
}
.approval-modal__button-danger:hover,
.rejection-modal__button-danger:hover {
  background-color: var(--danger-dark-color) !important;
}.approval-drawer {
  padding: 0;
}
.approval-drawer .data-table-wrapper {
  min-height: unset !important;
}
.approval-drawer__cover-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.approval-drawer__content {
  margin-top: 8px;
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.approval-drawer__meta {
  width: 100%;
}
.approval-drawer__meta-row {
  width: 100%;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
.approval-drawer__loading {
  padding: 32px;
  text-align: center;
  color: var(--text-secondary, #6b7280);
}
.approval-drawer__section {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.approval-drawer__section:not(:last-child) {
  padding-bottom: 32px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}
.approval-drawer__section--danger {
  padding: 20px 24px;
  margin-top: 8px;
  background-color: rgba(220, 38, 38, 0.1);
  border-radius: 10px;
  border-left: 4px solid var(--destructive-default, #dc2626);
  border-bottom: none;
}
.approval-drawer__section-title {
  color: var(--text-primary, #111827);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.approval-drawer__description {
  color: var(--text-secondary, #374151);
  margin: 0;
}
.approval-drawer__total-value {
  color: var(--success-color, #059669);
  margin: 4px 0 0;
  letter-spacing: -0.02em;
}
.approval-drawer__stepper-header {
  padding: 24px;
  background-color: var(--neutral-50, #f9fafb);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 12px;
  margin: 16px 24px 0;
}
.approval-drawer__stepper {
  margin-top: 24px;
}
.approval-drawer__documents {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.approval-drawer__document {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background-color: var(--neutral-50, #f9fafb);
  border-radius: 10px;
  border: 1px solid var(--neutral-200, #e5e7eb);
  transition: background-color 0.2s, border-color 0.2s;
}
.approval-drawer__document:hover {
  background-color: var(--neutral-100, #f3f4f6);
  border-color: var(--neutral-300, #d1d5db);
}
.approval-drawer__document svg {
  color: var(--text-primary, #111827);
  flex-shrink: 0;
}
.approval-drawer__document button {
  color: var(--text-primary, #111827) !important;
  border-color: var(--text-primary, #111827) !important;
}
.approval-drawer__document button:hover {
  background-color: var(--neutral-100, #f3f4f6) !important;
  border-color: var(--text-primary, #111827) !important;
}
.approval-drawer__document-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.approval-drawer__document-label {
  color: var(--text-primary, #111827);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.approval-drawer__document-name {
  color: var(--text-primary, #111827);
}
.approval-drawer__rejection-reason {
  color: var(--destructive-default, #dc2626);
  margin: 0;
}

body.dark-theme .approval-drawer__section-title {
  color: var(--text-color-primary, #ffffff);
}
body.dark-theme .approval-drawer__description {
  color: var(--text-color-secondary, #e5e7eb);
}
body.dark-theme .approval-drawer__document-label, body.dark-theme .approval-drawer__document-name {
  color: var(--text-color-primary, #ffffff);
}
body.dark-theme .approval-drawer__document svg,
body.dark-theme .approval-drawer__document button {
  color: var(--text-color-primary, #ffffff) !important;
  border-color: var(--text-color-primary, #ffffff) !important;
}.confirm-posting__header {
  max-width: 100%;
}
.confirm-posting__header_actions {
  display: flex;
  gap: 1rem;
}.cost-center-add-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.cost-center-table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color, #e0e0e0);
}
.cost-center-table table {
  table-layout: auto;
  width: 100%;
}
.cost-center-table.cost-center-table thead th:nth-child(1), .cost-center-table.cost-center-table tbody td:nth-child(1), .cost-center-table.cost-center-table tfoot td:nth-child(1) {
  width: 99% !important;
}
.cost-center-table.cost-center-table thead th:nth-child(2), .cost-center-table.cost-center-table tbody td:nth-child(2), .cost-center-table.cost-center-table tfoot td:nth-child(2) {
  width: 1% !important;
  white-space: nowrap !important;
  padding-left: 45px !important;
  padding-right: 8px !important;
}
.cost-center-table.cost-center-table thead th:nth-child(3), .cost-center-table.cost-center-table tbody td:nth-child(3), .cost-center-table.cost-center-table tfoot td:nth-child(3) {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding-left: 0 !important;
  padding-right: 4px !important;
}
.cost-center-table__summary-row {
  background-color: var(--surface-color, #f5f5f5) !important;
}
.cost-center-table__summary-row:first-child {
  border-top: 2px solid var(--border-color, #d0d0d0) !important;
}
.cost-center-table__summary-row td {
  color: var(--text-secondary, #666);
}
.cost-center-table__total-row {
  background-color: var(--surface-color, #f5f5f5) !important;
}
.cost-center-table__total-row--pending td {
  color: #c62828 !important;
}
.cost-center-table__total-row--balanced td {
  color: #1565c0 !important;
}.bonuses-discounts-inline-form {
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--surface-color, #fafafa);
}
.bonuses-discounts-inline-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.bonuses-discounts-add-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.bonuses-discounts-table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color, #e0e0e0);
}
.bonuses-discounts-table table {
  table-layout: auto;
  width: 100%;
}
.bonuses-discounts-table.bonuses-discounts-table thead th:nth-child(1), .bonuses-discounts-table.bonuses-discounts-table tbody td:nth-child(1), .bonuses-discounts-table.bonuses-discounts-table tfoot td:nth-child(1) {
  width: 99% !important;
}
.bonuses-discounts-table.bonuses-discounts-table thead th:nth-child(2), .bonuses-discounts-table.bonuses-discounts-table tbody td:nth-child(2), .bonuses-discounts-table.bonuses-discounts-table tfoot td:nth-child(2) {
  width: 1% !important;
  white-space: nowrap !important;
  padding-left: 8px !important;
  padding-right: 12px !important;
}
.bonuses-discounts-table.bonuses-discounts-table thead th:nth-child(3), .bonuses-discounts-table.bonuses-discounts-table tbody td:nth-child(3), .bonuses-discounts-table.bonuses-discounts-table tfoot td:nth-child(3) {
  width: 1% !important;
  white-space: nowrap !important;
  padding-left: 45px !important;
  padding-right: 8px !important;
}
.bonuses-discounts-table.bonuses-discounts-table thead th:nth-child(4), .bonuses-discounts-table.bonuses-discounts-table tbody td:nth-child(4), .bonuses-discounts-table.bonuses-discounts-table tfoot td:nth-child(4) {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding-left: 0 !important;
  padding-right: 4px !important;
}
.bonuses-discounts-table__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
}
.bonuses-discounts-table__badge--bonus {
  background-color: #e6f4ea;
  color: #0f6c31;
}
.bonuses-discounts-table__badge--discount {
  background-color: #fde8e8;
  color: #c62828;
}
.bonuses-discounts-table__value--bonus {
  color: #0f6c31 !important;
}
.bonuses-discounts-table__value--discount {
  color: #c62828 !important;
}
.bonuses-discounts-table__summary-row {
  background-color: var(--surface-color, #f5f5f5) !important;
}
.bonuses-discounts-table__summary-row:first-child {
  border-top: 2px solid var(--border-color, #d0d0d0) !important;
}
.bonuses-discounts-table__summary-row td {
  color: var(--text-secondary, #666);
}
.bonuses-discounts-table__total-row {
  background-color: var(--surface-color, #f5f5f5) !important;
}.customer-action-drawer .drawer-bottom {
  height: auto !important;
  max-height: 139px !important;
}

.customer-sort-drawer .drawer-bottom {
  height: auto !important;
  max-height: 186px !important;
}.customer-details-drawer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}
.customer-details-drawer__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  height: 100%;
}
.customer-details-drawer__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background-color: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
}
.customer-details-drawer__customer-name {
  color: var(--neutral-900);
  margin: 0;
}
.customer-details-drawer__customer-cnpj {
  color: var(--neutral-600);
  margin: 0;
}
.customer-details-drawer__content {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.customer-details-drawer__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.customer-details-drawer__section-title {
  color: var(--neutral-900);
  margin: 0;
}
.customer-details-drawer__empty-message {
  color: var(--neutral-500);
  margin: 0;
  padding: 16px;
  text-align: center;
  background-color: var(--neutral-50);
  border-radius: 6px;
}
.customer-details-drawer .datatable-header-cell {
  background-color: var(--neutral-100) !important;
}.cost-center-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-end;
}
.cost-center-form-row .cost-center-form-field {
  min-width: 0;
  flex: 1;
}
.cost-center-form-row .cost-center-form-submit {
  flex-shrink: 0;
}
@media screen and (max-width: 800px) {
  .cost-center-form-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .cost-center-form-row .cost-center-form-field,
  .cost-center-form-row .form-group {
    width: 100%;
  }
}

.managers-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.manager-list-item-extra {
  color: var(--neutral-600);
  margin-top: 4px;
}
.manager-list-item-extra span + span {
  margin-left: 12px;
}

.manager-list-item-actions {
  display: flex;
  gap: 8px;
}.manager-drawer-content .form-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.manager-drawer-content .form-group-wrapper h6 {
  margin-bottom: 0;
}

.manager-drawer-footer {
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}.module-functionalities-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.module-functionalities-drawer__content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.module-functionalities-drawer__loading, .module-functionalities-drawer__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--color-text-secondary, #666);
}
.module-functionalities-drawer__functionalities {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.module-functionalities-drawer__functionality {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background-color: var(--color-background-secondary, #f8f9fa);
  border-radius: 8px;
  border: 1px solid var(--color-border-light, #e9ecef);
  transition: all 0.2s ease;
}
.module-functionalities-drawer__functionality:hover {
  border-color: var(--color-primary-light, #b3d7ff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.module-functionalities-drawer__functionality-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.module-functionalities-drawer__functionality-name {
  color: var(--color-text-primary, #333);
}
.module-functionalities-drawer__functionality-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}
.module-functionalities-drawer__functionality-status--active {
  background-color: #e8f5e9;
  color: #2e7d32;
}
.module-functionalities-drawer__functionality-status--inactive {
  background-color: #ffebee;
  color: #c62828;
}
.module-functionalities-drawer__functionality-description {
  color: var(--color-text-secondary, #666);
}
.module-functionalities-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--color-border, #e0e0e0);
  flex-shrink: 0;
}.functionality-actions-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.functionality-actions-drawer__content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.functionality-actions-drawer__loading, .functionality-actions-drawer__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--color-text-secondary, #666);
}
.functionality-actions-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.functionality-actions-drawer__action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background-color: var(--color-background-secondary, #f8f9fa);
  border-radius: 8px;
  border: 1px solid var(--color-border-light, #e9ecef);
  transition: all 0.2s ease;
}
.functionality-actions-drawer__action:hover {
  border-color: var(--color-primary-light, #b3d7ff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.functionality-actions-drawer__action-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.functionality-actions-drawer__action-name {
  color: var(--color-text-primary, #333);
}
.functionality-actions-drawer__action-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}
.functionality-actions-drawer__action-status--active {
  background-color: #e8f5e9;
  color: #2e7d32;
}
.functionality-actions-drawer__action-status--inactive {
  background-color: #ffebee;
  color: #c62828;
}
.functionality-actions-drawer__action-description {
  color: var(--color-text-secondary, #666);
}
.functionality-actions-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--color-border, #e0e0e0);
  flex-shrink: 0;
}.action-permissions-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.action-permissions-drawer__content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.action-permissions-drawer__loading, .action-permissions-drawer__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--color-text-secondary, #666);
}
.action-permissions-drawer__permissions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.action-permissions-drawer__permission {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background-color: var(--color-background-secondary, #f8f9fa);
  border-radius: 8px;
  border: 1px solid var(--color-border-light, #e9ecef);
}
.action-permissions-drawer__permission-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.action-permissions-drawer__permission-description {
  color: var(--color-text-primary, #333);
}
.action-permissions-drawer__permission-method {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.action-permissions-drawer__permission-method--get {
  background-color: #e8f5e9;
  color: #2e7d32;
}
.action-permissions-drawer__permission-method--post {
  background-color: #e3f2fd;
  color: #1565c0;
}
.action-permissions-drawer__permission-method--put {
  background-color: #fff3e0;
  color: #ef6c00;
}
.action-permissions-drawer__permission-method--delete {
  background-color: #ffebee;
  color: #c62828;
}
.action-permissions-drawer__permission-method--patch {
  background-color: #f3e5f5;
  color: #7b1fa2;
}
.action-permissions-drawer__permission-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
}
.action-permissions-drawer__permission-detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.action-permissions-drawer__permission-label {
  color: var(--color-text-secondary, #666);
  min-width: 80px;
}
.action-permissions-drawer__permission-value {
  color: var(--color-text-primary, #333);
  word-break: break-all;
}
.action-permissions-drawer__permission-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: var(--color-warning-light, #fff3cd);
  color: var(--color-warning-dark, #856404);
  margin-left: auto;
}
.action-permissions-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--color-border, #e0e0e0);
  flex-shrink: 0;
}.send-notification__online-users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  background: var(--neutral-0);
}
.send-notification__user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.send-notification__user-item:hover {
  background-color: var(--neutral-100);
}
.send-notification__online-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--success-deep, #16a34a);
  flex-shrink: 0;
}
.send-notification__user-name {
  color: var(--neutral-900);
}
.send-notification__empty-users {
  padding: 24px;
  text-align: center;
  color: var(--neutral-500);
}
.send-notification__loading-users {
  padding: 24px;
  text-align: center;
  color: var(--neutral-500);
}
.send-notification__error-users {
  color: var(--destructive-default, #dc2626);
  margin-top: 4px;
}
.send-notification__section-title {
  color: var(--neutral-900, #171717);
  margin-bottom: 16px;
}body:has(.email-send-page) {
  overflow-x: hidden !important;
}

.email-send-page {
  margin: 0 auto;
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.form-email-send {
  width: 100% !important;
  max-width: 100% !important;
}
.form-email-send .form-header {
  margin-bottom: 32px !important;
  width: 100% !important;
}
.form-email-send .form-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.form-email-send .form-group-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.form-email-send [class*=row],
.form-email-send [class*=Row] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.form-email-send [class*=col],
.form-email-send [class*=Col] {
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

.email-send__section-title {
  color: var(--neutral-900, #171717);
  margin: 0;
}
.email-send__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px !important;
  margin-bottom: 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  background: var(--neutral-0);
  height: calc(100% - 16px);
  transition: all 0.2s ease;
}
.email-send__card:hover {
  border-color: var(--neutral-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.email-send__card-title {
  color: var(--neutral-900);
  flex: 1;
}.selected-legal-persons-list {
  margin-top: 12px;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  overflow: hidden;
}
.selected-legal-persons-list .selected-legal-person-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--neutral-100);
}
.selected-legal-persons-list .selected-legal-person-item:last-child {
  border-bottom: none;
}
.selected-legal-persons-list .selected-legal-person-item:hover {
  background-color: var(--neutral-50);
}
.selected-legal-persons-list .selected-legal-person-item .selected-legal-person-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.selected-legal-persons-list .selected-legal-person-item .selected-legal-person-info .company-name {
  color: var(--neutral-900);
}
.selected-legal-persons-list .selected-legal-person-item .selected-legal-person-info .cnpj {
  color: var(--neutral-500);
}.si-drawer {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.si-drawer__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--neutral-600);
}
.si-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--neutral-100);
  border-radius: 12px;
}
.si-drawer__number {
  color: var(--neutral-900);
}
.si-drawer__amount-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.si-drawer__amount {
  color: var(--primary-500);
}
.si-drawer__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.si-drawer__section-title {
  color: var(--neutral-900);
  margin: 0;
}
.si-drawer__meta-row {
  display: flex;
  gap: 24px;
}
.si-drawer__meta-row > * {
  flex: 1;
}
.si-drawer__files {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.si-drawer__file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--neutral-0);
}
.si-drawer__file-icon {
  flex-shrink: 0;
  color: var(--neutral-500);
}
.si-drawer__file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.si-drawer__file-name {
  color: var(--neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.si-drawer__file-meta {
  color: var(--neutral-500);
}
.si-drawer__file-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .si-drawer__header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .si-drawer__meta-row {
    flex-direction: column;
    gap: 16px;
  }
  .si-drawer__file {
    flex-wrap: wrap;
  }
  .si-drawer__file-actions {
    width: 100%;
    justify-content: flex-end;
  }
}.certificate-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.certificate-status-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.certificate-status-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
}
.certificate-status-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.certificate-status-badge--success {
  background-color: #dcfce7;
  color: #166534;
}
.certificate-status-badge--success .certificate-status-badge__dot {
  background-color: #22c55e;
}
.certificate-status-badge--error {
  background-color: #fee2e2;
  color: #991b1b;
}
.certificate-status-badge--error .certificate-status-badge__dot {
  background-color: #ef4444;
}.timesheet-entries .form-group-wrapper {
  max-width: 100%;
}
.timesheet-entries .form-actions-container {
  max-width: 100%;
}
.timesheet-entries__summary {
  display: flex;
  gap: 24px;
  padding: 12px 16px;
  background-color: var(--neutral-100, #f5f5f5);
  border-radius: 8px;
}
.timesheet-entries__summary-item {
  color: var(--neutral-600, #666);
}
.timesheet-entries__summary-item strong {
  color: var(--neutral-900, #333);
}
.timesheet-entries__start-options {
  margin-top: 16px;
}
.timesheet-entries__start-options h6 {
  margin: 0 0 12px;
}
.timesheet-entries__start-options-buttons {
  display: flex;
  gap: 16px;
}
@media (max-width: 600px) {
  .timesheet-entries__start-options-buttons {
    flex-direction: column;
  }
}
.timesheet-entries__start-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px;
  border: 2px dashed var(--neutral-300, #ccc);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  color: var(--neutral-600, #666);
}
.timesheet-entries__start-option:hover {
  border-color: var(--color-primary, #1565c0);
  background-color: var(--color-primary-background, #f0f7ff);
  color: var(--color-primary, #1565c0);
}
.timesheet-entries__start-option svg {
  color: inherit;
}
.timesheet-entries__start-option-title {
  color: var(--neutral-800, #333);
}
.timesheet-entries__start-option:hover .timesheet-entries__start-option-title {
  color: var(--color-primary, #1565c0);
}
.timesheet-entries__start-option-desc {
  color: var(--neutral-500, #888);
  text-align: center;
}
.timesheet-entries__actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.timesheet-entries__upload-section {
  margin-top: 16px;
}
.timesheet-entries__upload-section h6 {
  margin: 0 0 4px;
}
.timesheet-entries__upload-description {
  color: var(--neutral-500, #888);
  margin: 0 0 12px;
}
.timesheet-entries__file-upload {
  display: flex;
  align-items: center;
  gap: 12px;
}
.timesheet-entries__uploading-text {
  color: var(--color-primary, #1565c0);
  font-style: italic;
}
.timesheet-entries__import-preview {
  margin-top: 16px;
}
.timesheet-entries__import-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.timesheet-entries__import-preview-header h4 {
  margin: 0;
}
.timesheet-entries__import-preview-actions {
  display: flex;
  gap: 8px;
}
.timesheet-entries__saved-section {
  margin-top: 16px;
}
.timesheet-entries__saved-section h6 {
  margin: 0 0 8px;
}

body.dark-theme .timesheet-entries__start-option {
  border-color: var(--neutral-600, #555);
}
body.dark-theme .timesheet-entries__start-option:hover {
  border-color: var(--color-primary, #1565c0);
  background-color: rgba(21, 101, 192, 0.1);
}
body.dark-theme .timesheet-entries__start-option-title {
  color: var(--neutral-200, #ddd);
}.spreadsheet{border:1px solid var(--neutral-200,#e0e0e0);border-radius:8px;overflow:hidden;width:100%}.spreadsheet--scrollable{display:flex;flex-direction:column}.spreadsheet__body{flex:1;min-height:0;overflow:auto}.spreadsheet__table{border-collapse:separate;border-spacing:0;font-family:var(--font-body,"Roboto",sans-serif);font-size:13px;min-width:100%;table-layout:fixed;width:100%}.spreadsheet__col-indicator{width:36px}.spreadsheet__toolbar{align-items:center;background-color:var(--neutral-100,#f5f5f5);border-bottom:1px solid var(--neutral-200,#e0e0e0);display:flex;flex-wrap:wrap;gap:4px;padding:6px 10px}.spreadsheet__toolbar-group{align-items:center;display:flex;gap:2px}.spreadsheet__toolbar-separator{background-color:var(--neutral-300,#ccc);height:24px;margin:0 6px;width:1px}.spreadsheet__toolbar-btn{align-items:center;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--neutral-700,#444);cursor:pointer;display:inline-flex;font-family:var(--font-body,"Roboto",sans-serif);font-size:14px;height:30px;justify-content:center;padding:0;transition:background-color .15s,border-color .15s;width:30px}.spreadsheet__toolbar-btn:hover:not(:disabled){background-color:var(--neutral-200,#e8e8e8)}.spreadsheet__toolbar-btn:disabled{cursor:default;opacity:.4}.spreadsheet__toolbar-btn--active{background-color:var(--neutral-200,#e0e0e0);border-color:var(--neutral-300,#ccc)}.spreadsheet__toolbar-select{background:#fff;border:1px solid var(--neutral-300,#ccc);border-radius:4px;color:var(--neutral-700,#444);cursor:pointer;font-family:var(--font-body,"Roboto",sans-serif);font-size:12px;height:30px;outline:none;padding:0 6px}.spreadsheet__toolbar-select:disabled{cursor:default;opacity:.4}.spreadsheet__toolbar-color{align-items:center;border:1px solid transparent;border-radius:4px;cursor:pointer;display:inline-flex;flex-direction:column;height:30px;justify-content:center;position:relative;width:30px}.spreadsheet__toolbar-color:hover{background-color:var(--neutral-200,#e8e8e8)}.spreadsheet__toolbar-color-label{font-size:14px;font-weight:700;line-height:1}.spreadsheet__toolbar-color-strip{border-radius:1px;height:3px;margin-top:1px;width:14px}.spreadsheet__toolbar-color-input{height:0;opacity:0;pointer-events:none;position:absolute;width:0}.spreadsheet__toolbar-type-wrapper{position:relative}.spreadsheet__toolbar-dropdown{background:#fff;border:1px solid var(--neutral-200,#e0e0e0);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.12);font-family:var(--font-body,"Roboto",sans-serif);left:0;margin-top:4px;min-width:240px;padding:12px;position:absolute;top:100%;z-index:10}.spreadsheet__toolbar-dropdown-section{display:flex;flex-direction:column;gap:8px}.spreadsheet__toolbar-dropdown-label{color:var(--neutral-600,#666);font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}.spreadsheet__toolbar-dropdown-input{background:#fff;border:1px solid var(--neutral-300,#ccc);border-radius:4px;box-sizing:border-box;color:var(--neutral-700,#444);font-family:var(--font-body,"Roboto",sans-serif);font-size:12px;height:30px;outline:none;padding:0 8px;width:100%}.spreadsheet__toolbar-dropdown-input:focus{border-color:var(--color-primary,#1565c0)}.spreadsheet__toolbar-dropdown-input::-moz-placeholder{color:var(--neutral-400,#aaa)}.spreadsheet__toolbar-dropdown-input::placeholder{color:var(--neutral-400,#aaa)}.spreadsheet__toolbar-dropdown-select{background:#fff;border:1px solid var(--neutral-300,#ccc);border-radius:4px;box-sizing:border-box;color:var(--neutral-700,#444);cursor:pointer;font-family:var(--font-body,"Roboto",sans-serif);font-size:12px;height:30px;outline:none;padding:0 6px;width:100%}.spreadsheet__toolbar-dropdown-select--small{min-width:100px;width:auto}.spreadsheet__toolbar-dropdown-row{align-items:center;display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}.spreadsheet__toolbar-dropdown-check{align-items:center;color:var(--neutral-700,#444);cursor:pointer;display:flex;font-size:12px;gap:6px;white-space:nowrap}.spreadsheet__toolbar-dropdown-check input[type=checkbox]{cursor:pointer;margin:0}.spreadsheet__toolbar-dropdown-inline{align-items:center;color:var(--neutral-700,#444);display:flex;font-size:12px;gap:6px;white-space:nowrap}.spreadsheet__toolbar-tags{display:flex;flex-wrap:wrap;gap:4px}.spreadsheet__toolbar-tag{align-items:center;background:var(--neutral-100,#f0f0f0);border:1px solid var(--neutral-200,#ddd);border-radius:4px;color:var(--neutral-700,#444);display:inline-flex;font-size:12px;gap:4px;line-height:1;padding:3px 6px 3px 8px;white-space:nowrap}.spreadsheet__toolbar-tag-remove{align-items:center;background:transparent;border:none;border-radius:2px;color:var(--neutral-500,#999);cursor:pointer;display:inline-flex;height:16px;justify-content:center;padding:0;width:16px}.spreadsheet__toolbar-tag-remove:hover{background:var(--neutral-200,#e0e0e0);color:var(--neutral-800,#333)}.spreadsheet__toolbar-tag-input-row{display:flex;gap:4px}.spreadsheet__toolbar-dropdown-number{border:1px solid var(--neutral-300,#ccc);border-radius:4px;box-sizing:border-box;font-size:12px;height:26px;outline:none;padding:0 4px;text-align:center;width:50px}.spreadsheet__toolbar-dropdown-number:focus{border-color:var(--color-primary,#1565c0)}.spreadsheet__header{background-color:var(--neutral-100,#f9f9f9);border-bottom:1px solid var(--neutral-200,#e0e0e0);border-right:1px solid var(--neutral-200,#e0e0e0);color:var(--neutral-700,#666);font-size:12px;font-weight:600;padding:6px 10px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.spreadsheet__header:last-child{border-right:none}.spreadsheet__header--letter{background-color:var(--neutral-100,#f3f5f8);color:var(--neutral-500,#999);cursor:pointer;font-size:11px;padding:4px 10px;text-align:center}.spreadsheet__header--letter:hover{background-color:var(--neutral-200,#e8e8e8)}.spreadsheet__header--no-select{cursor:default}.spreadsheet__header--no-select:hover{background-color:var(--neutral-100,#f3f5f8)}.spreadsheet__header--label{background-color:var(--neutral-50,#fafafa);border-bottom:2px solid var(--neutral-200,#e0e0e0);color:var(--neutral-700,#555);font-size:12px;font-weight:600}.spreadsheet__header--editable{cursor:pointer}.spreadsheet__header--editable:hover{background-color:var(--neutral-100,#f0f0f0)}.spreadsheet__header--selected{box-shadow:inset 0 0 0 2px var(--color-primary,#1565c0)}.spreadsheet__header--letter.spreadsheet__header--selected{background-color:var(--color-primary,#1565c0);box-shadow:none;color:#fff}.spreadsheet__header--highlighted{background-color:rgba(21,101,192,.08)}.spreadsheet__header--frozen{z-index:4}.spreadsheet__header-input{background:#fff;border:1px solid var(--color-primary,#1565c0);border-radius:2px;box-sizing:border-box;font-family:inherit;font-size:inherit;font-weight:600;outline:none;padding:2px 4px;width:100%}.spreadsheet__indicator{background-color:var(--neutral-100,#f9f9f9);border-bottom:1px solid var(--neutral-200,#eee);border-right:1px solid var(--neutral-200,#e0e0e0);color:var(--neutral-500,#999);cursor:pointer;font-size:11px;font-weight:500;padding:6px 4px;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.spreadsheet__indicator:hover{background-color:var(--neutral-200,#e8e8e8)}.spreadsheet__indicator--selected{background-color:var(--color-primary,#1565c0);color:#fff}.spreadsheet__indicator--no-select{cursor:default}.spreadsheet__indicator--no-select:hover{background-color:var(--neutral-100,#f9f9f9)}.spreadsheet__indicator--frozen{z-index:3}tbody tr:last-child .spreadsheet__indicator{border-bottom-left-radius:7px}.spreadsheet__row-resize-handle{bottom:0;cursor:row-resize;height:5px;left:0;position:absolute;width:100%}.spreadsheet__row-resize-handle:hover{background-color:var(--color-primary,#1565c0);opacity:.4}.spreadsheet__resize-handle{cursor:col-resize;height:100%;position:absolute;right:0;top:0;width:5px}.spreadsheet__resize-handle:hover{background-color:var(--color-primary,#1565c0);opacity:.4}.spreadsheet__cell{background-color:#fff;border-bottom:1px solid var(--neutral-200,#eee);border-right:1px solid var(--neutral-200,#eee);height:auto;min-height:36px;padding:0}.spreadsheet__cell--editing{border-bottom-color:transparent;padding:0}.spreadsheet__cell:last-child{border-right:none}tr:last-child .spreadsheet__cell:last-child{border-bottom-right-radius:7px}tr:last-child .spreadsheet__cell:first-child{border-bottom-left-radius:7px}.spreadsheet__cell:last-child.spreadsheet__cell--range-right{border-right:2px solid var(--color-primary,#1565c0)}.spreadsheet__cell:last-child.spreadsheet__cell--clip-right{border-right:2px dashed var(--color-primary,#1565c0)}.spreadsheet__cell--readonly{background-color:var(--neutral-50,#fafafa);color:var(--neutral-600,#666)}.spreadsheet__cell--editable{cursor:default}.spreadsheet__cell--editable:hover{background-color:var(--color-primary-background,#f0f7ff)}.spreadsheet__cell--selected{box-shadow:inset 0 0 0 2px var(--color-primary,#1565c0)}.spreadsheet__cell--in-range{background-color:rgba(21,101,192,.08)}.spreadsheet__cell--list-editing{overflow:visible;position:relative;z-index:10}.spreadsheet__cell--range-top{border-top:2px solid var(--color-primary,#1565c0)}.spreadsheet__cell--range-bottom{border-bottom:2px solid var(--color-primary,#1565c0)}.spreadsheet__cell--range-left{border-left:2px solid var(--color-primary,#1565c0)}.spreadsheet__cell--range-right{border-right:2px solid var(--color-primary,#1565c0)}.spreadsheet__cell--highlighted{background-color:rgba(21,101,192,.08)}.spreadsheet__cell--frozen{background-color:#fff}.spreadsheet__cell--frozen.spreadsheet__cell--readonly{background-color:var(--neutral-50,#fafafa)}.spreadsheet__cell-value{display:block;overflow:hidden;padding:6px 10px;white-space:pre-wrap;word-break:break-word}.spreadsheet__cell-value--list{align-items:center;display:flex;padding-right:4px}.spreadsheet__cell-text{flex:1;min-width:0;overflow:hidden;white-space:pre-wrap;word-break:break-word}.spreadsheet__cell-dropdown{align-items:center;border-radius:3px;color:var(--neutral-500,#999);cursor:pointer;display:inline-flex;flex-shrink:0;height:20px;justify-content:center;width:20px}.spreadsheet__cell-dropdown:hover{background-color:var(--neutral-200,#e0e0e0);color:var(--neutral-700,#444)}.spreadsheet__input{background:#fff;border:2px solid var(--color-primary,#1565c0);border-radius:0;box-sizing:border-box;font-family:inherit;font-size:inherit;height:100%;outline:none;padding:6px 10px;width:100%}.spreadsheet__input--textarea{min-height:100%;overflow:hidden;resize:none;white-space:pre-wrap;word-break:break-word}.spreadsheet__select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;border:none;border-radius:0;box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:inherit;height:100%;outline:none;padding:4px 24px 4px 8px;width:100%}.spreadsheet__select:focus{background-color:#fff;border:2px solid var(--color-primary,#1565c0)}.spreadsheet__select:disabled{cursor:default;opacity:.6}.spreadsheet__select--editing{background-color:#fff;border:2px solid var(--color-primary,#1565c0)}.spreadsheet__cell--clip-top{border-top:2px dashed var(--color-primary,#1565c0)}.spreadsheet__cell--clip-bottom{border-bottom:2px dashed var(--color-primary,#1565c0)}.spreadsheet__cell--clip-left{border-left:2px dashed var(--color-primary,#1565c0)}.spreadsheet__cell--clip-right{border-right:2px dashed var(--color-primary,#1565c0)}.spreadsheet__custom-select{display:inline-flex;position:relative}.spreadsheet__custom-select-trigger{align-items:center;background:#fff;border:1px solid var(--neutral-300,#ccc);border-radius:4px;color:var(--neutral-700,#444);cursor:pointer;display:inline-flex;font-family:var(--font-body,"Roboto",sans-serif);font-size:12px;gap:4px;height:26px;justify-content:space-between;outline:none;padding:0 6px;white-space:nowrap}.spreadsheet__custom-select-trigger:hover:not(:disabled){border-color:var(--neutral-400,#aaa)}.spreadsheet__custom-select-trigger:disabled{cursor:default;opacity:.4}.spreadsheet__custom-select-trigger--small{font-size:11px;height:24px;min-width:80px;padding:0 5px}.spreadsheet__custom-select-text{overflow:hidden;text-overflow:ellipsis}.spreadsheet__custom-select-dropdown{background:#fff;border:1px solid var(--neutral-200,#e0e0e0);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.12);left:0;margin-top:2px;max-height:200px;min-width:100%;overflow-y:auto;padding:4px 0;position:absolute;top:100%;z-index:20}.spreadsheet__custom-select-option{background:transparent;border:none;color:var(--neutral-700,#444);cursor:pointer;display:block;font-family:var(--font-body,"Roboto",sans-serif);font-size:12px;padding:6px 10px;text-align:left;white-space:nowrap;width:100%}.spreadsheet__custom-select-option:hover{background-color:var(--neutral-100,#f5f5f5)}.spreadsheet__custom-select-option--selected{background-color:rgba(21,101,192,.08);color:var(--color-primary,#1565c0);font-weight:600}.spreadsheet__cell--picker-editing{overflow:visible;position:relative;z-index:10}.spreadsheet__cell-picker-wrapper{height:100%;position:relative;width:100%}.spreadsheet__cell-lookup-wrapper{align-items:center;background:#fff;border:2px solid var(--color-primary,#1565c0);box-sizing:border-box;display:flex;height:100%;width:100%}.spreadsheet__cell-lookup-wrapper .spreadsheet__input{border:none;flex:1;min-width:0}.spreadsheet__cell-datepicker{background:#fff;border:1px solid var(--neutral-200,#e0e0e0);border-radius:0 0 6px 6px;box-shadow:0 4px 12px rgba(0,0,0,.12);font-family:var(--font-body,"Roboto",sans-serif);left:-2px;padding:8px;position:absolute;top:100%;width:260px;z-index:20}.spreadsheet__cell-datepicker--up{border-radius:6px 6px 0 0;bottom:100%;box-shadow:0 -4px 12px rgba(0,0,0,.12);top:auto}.spreadsheet__cell-datepicker-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.spreadsheet__cell-datepicker-nav{align-items:center;background:transparent;border:none;border-radius:4px;color:var(--neutral-600,#666);cursor:pointer;display:inline-flex;font-size:18px;height:28px;justify-content:center;padding:0;width:28px}.spreadsheet__cell-datepicker-nav:hover{background-color:var(--neutral-100,#f5f5f5)}.spreadsheet__cell-datepicker-title{background:transparent;border:none;border-radius:4px;color:var(--neutral-800,#333);cursor:pointer;font-family:var(--font-body,"Roboto",sans-serif);font-size:13px;font-weight:600;padding:4px 8px}.spreadsheet__cell-datepicker-title:hover{background-color:var(--neutral-100,#f5f5f5)}.spreadsheet__cell-datepicker-weekdays{display:grid;gap:0;grid-template-columns:repeat(7,1fr);margin-bottom:4px}.spreadsheet__cell-datepicker-weekday{color:var(--neutral-500,#999);font-size:10px;font-weight:600;padding:4px 0;text-align:center;text-transform:uppercase}.spreadsheet__cell-datepicker-grid{display:grid;gap:1px;grid-template-columns:repeat(7,1fr)}.spreadsheet__cell-datepicker-day{align-items:center;aspect-ratio:1;background:transparent;border:none;border-radius:4px;color:var(--neutral-800,#333);cursor:pointer;display:inline-flex;font-size:12px;justify-content:center;padding:0;width:100%}.spreadsheet__cell-datepicker-day:hover{background-color:var(--neutral-100,#f0f0f0)}.spreadsheet__cell-datepicker-day--outside{color:var(--neutral-400,#bbb)}.spreadsheet__cell-datepicker-day--today{border:1px solid var(--color-primary,#1565c0);font-weight:600}.spreadsheet__cell-datepicker-day--selected{background-color:var(--color-primary,#1565c0);color:#fff;font-weight:600}.spreadsheet__cell-datepicker-day--selected:hover{background-color:var(--color-primary,#1565c0);opacity:.9}.spreadsheet__cell-datepicker-months,.spreadsheet__cell-datepicker-years{display:grid;gap:4px;grid-template-columns:repeat(3,1fr);padding:4px 0}.spreadsheet__cell-datepicker-month,.spreadsheet__cell-datepicker-year{align-items:center;background:transparent;border:none;border-radius:4px;color:var(--neutral-700,#444);cursor:pointer;display:inline-flex;font-family:var(--font-body,"Roboto",sans-serif);font-size:12px;justify-content:center;padding:8px 4px}.spreadsheet__cell-datepicker-month:hover,.spreadsheet__cell-datepicker-year:hover{background-color:var(--neutral-100,#f0f0f0)}.spreadsheet__cell-datepicker-month--current,.spreadsheet__cell-datepicker-year--current{border:1px solid var(--color-primary,#1565c0);font-weight:600}.spreadsheet__cell-datepicker-month--selected,.spreadsheet__cell-datepicker-year--selected{background-color:var(--color-primary,#1565c0);color:#fff;font-weight:600}.spreadsheet__cell-datepicker-month--selected:hover,.spreadsheet__cell-datepicker-year--selected:hover{background-color:var(--color-primary,#1565c0);opacity:.9}.spreadsheet__cell-datepicker-footer{border-top:1px solid var(--neutral-200,#eee);display:flex;justify-content:space-between;margin-top:8px;padding-top:8px}.spreadsheet__cell-datepicker-clear,.spreadsheet__cell-datepicker-today{background:transparent;border:none;border-radius:4px;color:var(--color-primary,#1565c0);cursor:pointer;font-family:var(--font-body,"Roboto",sans-serif);font-size:12px;padding:4px 10px}.spreadsheet__cell-datepicker-clear:hover,.spreadsheet__cell-datepicker-today:hover{background-color:var(--neutral-100,#f5f5f5)}.spreadsheet__cell-timepicker{background:#fff;border:1px solid var(--neutral-200,#e0e0e0);border-radius:0 0 6px 6px;box-shadow:0 4px 12px rgba(0,0,0,.12);font-family:var(--font-body,"Roboto",sans-serif);left:-2px;position:absolute;top:100%;z-index:20}.spreadsheet__cell-timepicker--up{border-radius:6px 6px 0 0;bottom:100%;box-shadow:0 -4px 12px rgba(0,0,0,.12);top:auto}.spreadsheet__cell-timepicker-columns{display:flex;height:200px}.spreadsheet__cell-timepicker-column{border-right:1px solid var(--neutral-200,#eee);overflow-y:auto;width:56px}.spreadsheet__cell-timepicker-column:last-child{border-right:none}.spreadsheet__cell-timepicker-label{background:#fff;color:var(--neutral-500,#999);font-size:10px;font-weight:600;padding:6px 0 4px;position:sticky;text-align:center;text-transform:uppercase;top:0;z-index:1}.spreadsheet__cell-timepicker-item{background:transparent;border:none;color:var(--neutral-700,#444);cursor:pointer;display:block;font-size:13px;padding:4px 0;text-align:center;width:100%}.spreadsheet__cell-timepicker-item:hover{background-color:var(--neutral-100,#f0f0f0)}.spreadsheet__cell-timepicker-item--selected{background-color:var(--color-primary,#1565c0);color:#fff;font-weight:600}.spreadsheet__cell-timepicker-item--selected:hover{background-color:var(--color-primary,#1565c0);opacity:.9}.spreadsheet__cell-timepicker-footer{border-top:1px solid var(--neutral-200,#eee);display:flex;justify-content:space-between;padding:6px 8px}.spreadsheet__cell-timepicker-clear,.spreadsheet__cell-timepicker-now{background:transparent;border:none;border-radius:4px;color:var(--color-primary,#1565c0);cursor:pointer;font-family:var(--font-body,"Roboto",sans-serif);font-size:12px;padding:4px 10px}.spreadsheet__cell-timepicker-clear:hover,.spreadsheet__cell-timepicker-now:hover{background-color:var(--neutral-100,#f5f5f5)}.spreadsheet__cell-list-wrapper{height:100%;position:relative;width:100%}.spreadsheet__cell-list-trigger{align-items:center;background:#fff;border:2px solid var(--color-primary,#1565c0);box-sizing:border-box;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;height:100%;justify-content:space-between;padding:6px 10px;text-align:left;width:100%}.spreadsheet__cell-list-dropdown{background:#fff;border:1px solid var(--neutral-200,#e0e0e0);border-radius:0 0 4px 4px;box-shadow:0 4px 12px rgba(0,0,0,.12);left:-2px;max-height:200px;overflow-y:auto;position:absolute;right:-2px;top:100%;z-index:20}.spreadsheet__cell-list-dropdown--up{border-radius:4px 4px 0 0;bottom:100%;box-shadow:0 -4px 12px rgba(0,0,0,.12);top:auto}.spreadsheet__cell-list-option{background:transparent;border:none;color:var(--neutral-700,#444);cursor:pointer;display:block;font-family:inherit;font-size:inherit;padding:6px 10px;text-align:left;white-space:nowrap;width:100%}.spreadsheet__cell-list-option:hover{background-color:var(--neutral-100,#f5f5f5)}.spreadsheet__cell-list-option--selected{background-color:rgba(21,101,192,.08);color:var(--color-primary,#1565c0);font-weight:600}
/*# sourceMappingURL=spreadsheet.css.map */.app-initializer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--color-background, #fff);
}
.app-initializer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.app-initializer__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border-light, #e9ecef);
  border-top-color: var(--color-primary, #1976d2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.app-initializer__text {
  color: var(--color-text-secondary, #666);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}