/*
 * Box sizing rules.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

/* * 1. Abordagem Padr??o (Firefox)
 * ?? necess??rio definir a cor da barra (thumb) e do fundo (track) juntas.
 * Usamos um cinza neutro para a barra para interferir o m??nimo poss??vel.
 */
/* * 2. Abordagem para WebKit (Chrome, Safari, Edge)
 * Aqui podemos alterar exclusivamente o fundo da scrollbar.
 */
*::-webkit-scrollbar-track {
  background-color: var(--surface-blank);
}

/**
 * Focloca a borda afastada do elemento por padr??o.
 */
/* Document */
/**
  * 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/*
  * Set core root defaults.
  */
html:focus-within {
  scroll-behavior: smooth;
}

/**
  * 1. Remove the margin in all browsers.
  * 2. This prevents short content from leaving empty space below it.
  * 3. Prioritizes legibility over rendering speed and geometric precision.
  * 4. Make the font edges smoother and softer.
  * 5. Applies a type of anti-aliasing only in firefox.
  */
body {
  margin: 0;
  min-height: 100vh;
  min-width: 100vw;
  font-size: var(--defalt-font-size);
  line-height: 1.5;
  font-family: var(--font-family-source), system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

/* Tabular data */
/**
  * 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  * 2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  */
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/* Sections */
/**
  * Render the `main` element consistently in IE.
  */
main {
  display: block;
}

/**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content */
/**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  * 3. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  */
hr {
  box-sizing: content-box; /* 1 */
  overflow: visible; /* 2 */
  color: inherit;
  height: 0;
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/*
  * Remove list styles on elements with a list role.
  */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Text-level semantics */
/**
  * Remove the gray background on active links in IE 10.
  */
a {
  background-color: transparent;
}

/*
  * A elements that don't have a class get default styles.
 */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
abbr[title] {
  border-bottom: none; /* 1 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
b,
strong {
  font-weight: bolder;
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
  * Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/**
  * Add the correct font size in all browsers.
  */
small {
  font-size: 80%;
}

/**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/**
  * Remove the border on images inside links in IE 10.
  */
img {
  max-width: 100%;
  border-style: none;
}

/*
   Make images easier to work with.
  */
picture {
  max-width: 100%;
  display: block;
}

/* Forms */
/**
  * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
button,
input {
  /* 1 */
  overflow: visible;
}

input {
  border: 1px solid var(--border-darker);
}

button {
  background-color: transparent;
}

/**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
  * Correct the inability to style clickable types in iOS and Safari.
  */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
  * Remove the inner border and padding in Firefox.
  */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
  * Restore the focus styles unset by the previous rule.
  */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
  * Restore the focus styles unset by the previous rule.
  */
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
  * Remove the additional ':invalid' styles in Firefox.
  * See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
 */
:-moz-ui-invalid {
  box-shadow: none;
}

/**
  * Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
  */
legend {
  padding: 0;
}

/**
  * Correct the padding in Firefox.
  */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
progress {
  vertical-align: baseline;
}

/**
  * Remove the default vertical scrollbar in IE 10+.
  */
textarea {
  overflow: auto;
}

/**
  * 1. Add the correct box sizing in IE 10.
  * 2. Remove the padding in IE 10.
  */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
    * Remove the inner padding in Chrome and Safari on macOS.
    */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
    * 1. Correct the inability to style clickable types in iOS and Safari.
    * 2. Change font properties to `inherit` in Safari.
    */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive */
/*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */
details {
  display: block;
}

/*
  * Add the correct display in all browsers.
  */
summary {
  display: list-item;
}

/* Misc */
/**
  * Add the correct display in IE 10+.
  */
template {
  display: none;
}

/**
  * Add the correct display in IE 10.
  */
[hidden] {
  display: none;
}

/*
  * Remove default margin.
  */
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

.text-underline {
  text-decoration: underline;
}

.text-overline {
  text-decoration: overline;
}

.text-line-through {
  text-decoration: line-through;
}

.text-no-underline {
  text-decoration: none;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

.font-thin {
  font-weight: var(--font-weight-100);
}

.font-extra-light {
  font-weight: var(--font-weight-100);
}

.font-light {
  font-weight: var(--font-weight-300);
}

.font-regular {
  font-weight: var(--font-weight-500);
}

.font-medium {
  font-weight: var(--font-weight-700);
}

.font-semi-bold {
  font-weight: var(--font-weight-800);
}

.font-bold {
  font-weight: var(--font-weight-900);
}

.font-extra-bold {
  font-weight: var(--font-weight-800);
}

.font-black {
  font-weight: var(--font-weight-900);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-general-sky {
  color: var(--color-general-sky);
}

.text-general-opal {
  color: var(--color-general-opal);
}

.text-general-pig {
  color: var(--color-general-pig);
}

.text-general-cream {
  color: var(--color-general-cream);
}

.text-general-lavander {
  color: var(--color-general-lavander);
}

.text-general-acqua {
  color: var(--color-general-acqua);
}

.text-general-jade {
  color: var(--color-general-jade);
}

.text-general-violet {
  color: var(--color-general-violet);
}

.text-general-cornflower {
  color: var(--color-general-cornflower);
}

.text-general-tangerine {
  color: var(--color-general-tangerine);
}

.text-general-magenta {
  color: var(--color-general-magenta);
}

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

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

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

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

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

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

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

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

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

.text-typography-contrast {
  color: var(--typography-contrast);
}

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

.text-typography-highlighted {
  color: var(--typography-highlighted);
}

.text-typography-disabled {
  color: var(--typography-disabled);
}

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

.text-typography-darker {
  color: var(--typography-darker);
}

.text-typography-soft {
  color: var(--typography-soft);
}

.text-typography-unselected {
  color: var(--typography-unselected);
}

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

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

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

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

.text-typography-info {
  color: var(--typography-info);
}

.text-typography-news {
  color: var(--typography-news);
}

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

.text-surface-minimal {
  color: var(--surface-minimal);
}

.text-surface-blank {
  color: var(--surface-blank);
}

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

.text-surface-darker {
  color: var(--surface-darker);
}

.text-surface-highlighted {
  color: var(--surface-highlighted);
}

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

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

.text-surface-soft {
  color: var(--surface-soft);
}

.text-surface-contrast {
  color: var(--surface-contrast);
}

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

.text-surface-messagebox {
  color: var(--surface-messagebox);
}

.text-surface-infobox {
  color: var(--surface-infobox);
}

.text-surface-disabled {
  color: var(--surface-disabled);
}

.text-surface-pressed {
  color: var(--surface-pressed);
}

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

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

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

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

.text-surface-info {
  color: var(--surface-info);
}

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

.text-border-contrast {
  color: var(--border-contrast);
}

.text-border-smooth {
  color: var(--border-smooth);
}

.text-border-highlighted {
  color: var(--border-highlighted);
}

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

.text-border-darker {
  color: var(--border-darker);
}

.text-border-gray {
  color: var(--border-gray);
}

.text-border-messagebox {
  color: var(--border-messagebox);
}

.text-border-infobox {
  color: var(--border-infobox);
}

.text-border-pressed {
  color: var(--border-pressed);
}

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

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

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

.text-border-info {
  color: var(--border-info);
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  word-break: break-all;
}

.clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  word-break: break-all;
}

.clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  word-break: break-all;
}

.clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  word-break: break-all;
}

.clamp-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  text-overflow: ellipsis;
  word-break: break-all;
}

.clamp-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  text-overflow: ellipsis;
  word-break: break-all;
}

.clamp-none {
  display: initial;
  overflow: initial;
  word-break: unset;
  -webkit-box-orient: unset;
  -webkit-line-clamp: unset;
}

.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-start {
  text-align: start;
}

.text-end {
  text-align: end;
}

.text-huge {
  font-size: var(--font-size-huge);
}

.text-super {
  font-size: var(--font-size-super);
}

.text-xlarge {
  font-size: var(--font-size-xlarge);
}

.text-large {
  font-size: var(--font-size-large);
}

.text-medium {
  font-size: var(--font-size-medium);
}

.text-small {
  font-size: var(--font-size-small);
}

.text-xsmall {
  font-size: var(--font-size-xsmall);
}

.text-caption {
  font-size: var(--font-size-caption);
}

.text-tag {
  font-size: var(--font-size-tag);
}

.text-tiny {
  font-size: var(--font-size-tiny);
}

.text-min {
  font-size: var(--font-size-min);
}

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

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

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

h1 {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--h1-size);
  line-height: var(--spacing-large);
}

h2 {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--h2-size);
  line-height: var(--spacing-default);
}

h3 {
  font-weight: var(--font-weight-900);
  font-family: var(--font-family-source);
  font-size: var(--h3-size);
  line-height: var(--spacing-medium);
}

h4 {
  font-weight: var(--font-weight-900);
  font-family: var(--font-family-source);
  font-size: var(--h4-size);
  line-height: var(--spacing-medium);
}

h5 {
  font-weight: var(--font-weight-600);
  font-family: var(--font-family-source);
  font-size: var(--h5-size);
  line-height: var(--spacing-medium);
}

.h1 {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--h1-size);
  line-height: var(--spacing-large);
}

.h2 {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--h2-size);
  line-height: var(--spacing-default);
}

.h3 {
  font-weight: var(--font-weight-900);
  font-family: var(--font-family-source);
  font-size: var(--h3-size);
  line-height: var(--spacing-medium);
}

.h4 {
  font-weight: var(--font-weight-900);
  font-family: var(--font-family-source);
  font-size: var(--h4-size);
  line-height: var(--spacing-medium);
}

.h5 {
  font-weight: var(--font-weight-600);
  font-family: var(--font-family-source);
  font-size: var(--h5-size);
  line-height: var(--spacing-medium);
}

.typo-display {
  font-weight: var(--font-weight-700);
  font-family: var(--font-family-ubuntu);
  font-size: var(--font-size-huge);
  line-height: var(--spacing-extra);
}

.typo-big-number {
  font-weight: var(--font-weight-900);
  font-family: var(--font-family-source);
  font-size: var(--font-size-super);
  line-height: var(--spacing-large);
}

.typo-body {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--font-size-medium);
  line-height: var(--spacing-medium);
}

.typo-label {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--font-size-small);
  line-height: var(--spacing-medium);
}

.typo-placeholder {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--font-size-xsmall);
  line-height: var(--spacing-small);
}

.typo-link {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--font-size-xsmall);
  line-height: var(--spacing-small);
}

.typo-caption {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--font-size-tiny);
  line-height: var(--spacing-small);
}

.typo-tag {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--font-size-tiny);
  line-height: var(--spacing-small);
}

.typo-title {
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-source);
  font-size: var(--font-size-xlarge);
  line-height: var(--spacing-small);
}

.typo-sub-title {
  font-weight: var(--font-weight-800);
  font-family: var(--font-family-source);
  font-size: var(--font-size-medium);
  line-height: var(--spacing-small);
}

.typo-headline {
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-source);
  font-size: var(--font-size-super);
  line-height: var(--spacing-medium);
}

@keyframes sx-rotate-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.sx-rotate-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sx-rotate-spin 0.8s linear infinite;
}

.girar-90 {
  animation-name: giro90;
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
@keyframes giro90 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(90degdeg);
  }
}

.girar-180 {
  animation-name: giro180;
  animation-duration: 500ms;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
@keyframes giro180 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180degdeg);
  }
}

.girar-360 {
  animation-name: giro360;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
@keyframes giro360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360degdeg);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-general-sky {
  background-color: var(--color-general-sky);
}

.bg-general-opal {
  background-color: var(--color-general-opal);
}

.bg-general-pig {
  background-color: var(--color-general-pig);
}

.bg-general-cream {
  background-color: var(--color-general-cream);
}

.bg-general-lavander {
  background-color: var(--color-general-lavander);
}

.bg-general-acqua {
  background-color: var(--color-general-acqua);
}

.bg-general-jade {
  background-color: var(--color-general-jade);
}

.bg-general-violet {
  background-color: var(--color-general-violet);
}

.bg-general-cornflower {
  background-color: var(--color-general-cornflower);
}

.bg-general-tangerine {
  background-color: var(--color-general-tangerine);
}

.bg-general-magenta {
  background-color: var(--color-general-magenta);
}

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

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

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

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

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

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

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

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

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

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

.bg-surface-minimal {
  background-color: var(--surface-minimal);
}

.bg-surface-blank {
  background-color: var(--surface-blank);
}

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

.bg-surface-darker {
  background-color: var(--surface-darker);
}

.bg-surface-highlighted {
  background-color: var(--surface-highlighted);
}

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

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

.bg-surface-soft {
  background-color: var(--surface-soft);
}

.bg-surface-contrast {
  background-color: var(--surface-contrast);
}

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

.bg-surface-messagebox {
  background-color: var(--surface-messagebox);
}

.bg-surface-infobox {
  background-color: var(--surface-infobox);
}

.bg-surface-disabled {
  background-color: var(--surface-disabled);
}

.bg-surface-pressed {
  background-color: var(--surface-pressed);
}

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

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

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

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

.bg-surface-info {
  background-color: var(--surface-info);
}

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

.bg-border-contrast {
  background-color: var(--border-contrast);
}

.bg-border-smooth {
  background-color: var(--border-smooth);
}

.bg-border-highlighted {
  background-color: var(--border-highlighted);
}

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

.bg-border-darker {
  background-color: var(--border-darker);
}

.bg-border-gray {
  background-color: var(--border-gray);
}

.bg-border-messagebox {
  background-color: var(--border-messagebox);
}

.bg-border-infobox {
  background-color: var(--border-infobox);
}

.bg-border-pressed {
  background-color: var(--border-pressed);
}

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

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

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

.bg-border-info {
  background-color: var(--border-info);
}

.bg-typography-contrast {
  background-color: var(--typography-contrast);
}

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

.bg-typography-highlighted {
  background-color: var(--typography-highlighted);
}

.bg-typography-disabled {
  background-color: var(--typography-disabled);
}

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

.bg-typography-darker {
  background-color: var(--typography-darker);
}

.bg-typography-soft {
  background-color: var(--typography-soft);
}

.bg-typography-unselected {
  background-color: var(--typography-unselected);
}

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

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

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

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

.bg-typography-info {
  background-color: var(--typography-info);
}

.bg-typography-news {
  background-color: var(--typography-news);
}

.min-height-64 {
  min-height: 64px;
}

.pd-top-1 {
  padding-top: 1px;
}

.pd-top-1-i {
  padding-top: 1px !important;
}

.pd-top-2 {
  padding-top: 2px;
}

.pd-top-2-i {
  padding-top: 2px !important;
}

.pd-top-3 {
  padding-top: 3px;
}

.pd-top-3-i {
  padding-top: 3px !important;
}

.pd-top-4 {
  padding-top: 4px;
}

.pd-top-4-i {
  padding-top: 4px !important;
}

.pd-top-5 {
  padding-top: 5px;
}

.pd-top-5-i {
  padding-top: 5px !important;
}

.pd-top-6 {
  padding-top: 6px;
}

.pd-top-6-i {
  padding-top: 6px !important;
}

.pd-top-7 {
  padding-top: 7px;
}

.pd-top-7-i {
  padding-top: 7px !important;
}

.pd-top-8 {
  padding-top: 8px;
}

.pd-top-8-i {
  padding-top: 8px !important;
}

.pd-top-9 {
  padding-top: 9px;
}

.pd-top-9-i {
  padding-top: 9px !important;
}

.pd-top-10 {
  padding-top: 10px;
}

.pd-top-10-i {
  padding-top: 10px !important;
}

.pd-top-11 {
  padding-top: 11px;
}

.pd-top-11-i {
  padding-top: 11px !important;
}

.pd-top-12 {
  padding-top: 12px;
}

.pd-top-12-i {
  padding-top: 12px !important;
}

.pd-top-13 {
  padding-top: 13px;
}

.pd-top-13-i {
  padding-top: 13px !important;
}

.pd-top-14 {
  padding-top: 14px;
}

.pd-top-14-i {
  padding-top: 14px !important;
}

.pd-top-15 {
  padding-top: 15px;
}

.pd-top-15-i {
  padding-top: 15px !important;
}

.pd-top-16 {
  padding-top: 16px;
}

.pd-top-16-i {
  padding-top: 16px !important;
}

.pd-top-17 {
  padding-top: 17px;
}

.pd-top-17-i {
  padding-top: 17px !important;
}

.pd-top-18 {
  padding-top: 18px;
}

.pd-top-18-i {
  padding-top: 18px !important;
}

.pd-top-19 {
  padding-top: 19px;
}

.pd-top-19-i {
  padding-top: 19px !important;
}

.pd-top-20 {
  padding-top: 20px;
}

.pd-top-20-i {
  padding-top: 20px !important;
}

.pd-top-21 {
  padding-top: 21px;
}

.pd-top-21-i {
  padding-top: 21px !important;
}

.pd-top-22 {
  padding-top: 22px;
}

.pd-top-22-i {
  padding-top: 22px !important;
}

.pd-top-23 {
  padding-top: 23px;
}

.pd-top-23-i {
  padding-top: 23px !important;
}

.pd-top-24 {
  padding-top: 24px;
}

.pd-top-24-i {
  padding-top: 24px !important;
}

.pd-top-25 {
  padding-top: 25px;
}

.pd-top-25-i {
  padding-top: 25px !important;
}

.pd-top-26 {
  padding-top: 26px;
}

.pd-top-26-i {
  padding-top: 26px !important;
}

.pd-top-27 {
  padding-top: 27px;
}

.pd-top-27-i {
  padding-top: 27px !important;
}

.pd-top-28 {
  padding-top: 28px;
}

.pd-top-28-i {
  padding-top: 28px !important;
}

.pd-top-29 {
  padding-top: 29px;
}

.pd-top-29-i {
  padding-top: 29px !important;
}

.pd-top-30 {
  padding-top: 30px;
}

.pd-top-30-i {
  padding-top: 30px !important;
}

.pd-top-31 {
  padding-top: 31px;
}

.pd-top-31-i {
  padding-top: 31px !important;
}

.pd-top-32 {
  padding-top: 32px;
}

.pd-top-32-i {
  padding-top: 32px !important;
}

.pd-top-33 {
  padding-top: 33px;
}

.pd-top-33-i {
  padding-top: 33px !important;
}

.pd-top-34 {
  padding-top: 34px;
}

.pd-top-34-i {
  padding-top: 34px !important;
}

.pd-top-35 {
  padding-top: 35px;
}

.pd-top-35-i {
  padding-top: 35px !important;
}

.pd-top-36 {
  padding-top: 36px;
}

.pd-top-36-i {
  padding-top: 36px !important;
}

.pd-top-37 {
  padding-top: 37px;
}

.pd-top-37-i {
  padding-top: 37px !important;
}

.pd-top-38 {
  padding-top: 38px;
}

.pd-top-38-i {
  padding-top: 38px !important;
}

.pd-top-39 {
  padding-top: 39px;
}

.pd-top-39-i {
  padding-top: 39px !important;
}

.pd-top-40 {
  padding-top: 40px;
}

.pd-top-40-i {
  padding-top: 40px !important;
}

.pd-top-41 {
  padding-top: 41px;
}

.pd-top-41-i {
  padding-top: 41px !important;
}

.pd-top-42 {
  padding-top: 42px;
}

.pd-top-42-i {
  padding-top: 42px !important;
}

.pd-top-43 {
  padding-top: 43px;
}

.pd-top-43-i {
  padding-top: 43px !important;
}

.pd-top-44 {
  padding-top: 44px;
}

.pd-top-44-i {
  padding-top: 44px !important;
}

.pd-top-45 {
  padding-top: 45px;
}

.pd-top-45-i {
  padding-top: 45px !important;
}

.pd-top-46 {
  padding-top: 46px;
}

.pd-top-46-i {
  padding-top: 46px !important;
}

.pd-top-47 {
  padding-top: 47px;
}

.pd-top-47-i {
  padding-top: 47px !important;
}

.pd-top-48 {
  padding-top: 48px;
}

.pd-top-48-i {
  padding-top: 48px !important;
}

.pd-top-49 {
  padding-top: 49px;
}

.pd-top-49-i {
  padding-top: 49px !important;
}

.pd-top-50 {
  padding-top: 50px;
}

.pd-top-50-i {
  padding-top: 50px !important;
}

.pd-top-51 {
  padding-top: 51px;
}

.pd-top-51-i {
  padding-top: 51px !important;
}

.pd-top-52 {
  padding-top: 52px;
}

.pd-top-52-i {
  padding-top: 52px !important;
}

.pd-top-53 {
  padding-top: 53px;
}

.pd-top-53-i {
  padding-top: 53px !important;
}

.pd-top-54 {
  padding-top: 54px;
}

.pd-top-54-i {
  padding-top: 54px !important;
}

.pd-top-55 {
  padding-top: 55px;
}

.pd-top-55-i {
  padding-top: 55px !important;
}

.pd-top-56 {
  padding-top: 56px;
}

.pd-top-56-i {
  padding-top: 56px !important;
}

.pd-top-57 {
  padding-top: 57px;
}

.pd-top-57-i {
  padding-top: 57px !important;
}

.pd-top-58 {
  padding-top: 58px;
}

.pd-top-58-i {
  padding-top: 58px !important;
}

.pd-top-59 {
  padding-top: 59px;
}

.pd-top-59-i {
  padding-top: 59px !important;
}

.pd-top-60 {
  padding-top: 60px;
}

.pd-top-60-i {
  padding-top: 60px !important;
}

.pd-right-1 {
  padding-right: 1px;
}

.pd-right-1-i {
  padding-right: 1px !important;
}

.pd-right-2 {
  padding-right: 2px;
}

.pd-right-2-i {
  padding-right: 2px !important;
}

.pd-right-3 {
  padding-right: 3px;
}

.pd-right-3-i {
  padding-right: 3px !important;
}

.pd-right-4 {
  padding-right: 4px;
}

.pd-right-4-i {
  padding-right: 4px !important;
}

.pd-right-5 {
  padding-right: 5px;
}

.pd-right-5-i {
  padding-right: 5px !important;
}

.pd-right-6 {
  padding-right: 6px;
}

.pd-right-6-i {
  padding-right: 6px !important;
}

.pd-right-7 {
  padding-right: 7px;
}

.pd-right-7-i {
  padding-right: 7px !important;
}

.pd-right-8 {
  padding-right: 8px;
}

.pd-right-8-i {
  padding-right: 8px !important;
}

.pd-right-9 {
  padding-right: 9px;
}

.pd-right-9-i {
  padding-right: 9px !important;
}

.pd-right-10 {
  padding-right: 10px;
}

.pd-right-10-i {
  padding-right: 10px !important;
}

.pd-right-11 {
  padding-right: 11px;
}

.pd-right-11-i {
  padding-right: 11px !important;
}

.pd-right-12 {
  padding-right: 12px;
}

.pd-right-12-i {
  padding-right: 12px !important;
}

.pd-right-13 {
  padding-right: 13px;
}

.pd-right-13-i {
  padding-right: 13px !important;
}

.pd-right-14 {
  padding-right: 14px;
}

.pd-right-14-i {
  padding-right: 14px !important;
}

.pd-right-15 {
  padding-right: 15px;
}

.pd-right-15-i {
  padding-right: 15px !important;
}

.pd-right-16 {
  padding-right: 16px;
}

.pd-right-16-i {
  padding-right: 16px !important;
}

.pd-right-17 {
  padding-right: 17px;
}

.pd-right-17-i {
  padding-right: 17px !important;
}

.pd-right-18 {
  padding-right: 18px;
}

.pd-right-18-i {
  padding-right: 18px !important;
}

.pd-right-19 {
  padding-right: 19px;
}

.pd-right-19-i {
  padding-right: 19px !important;
}

.pd-right-20 {
  padding-right: 20px;
}

.pd-right-20-i {
  padding-right: 20px !important;
}

.pd-right-21 {
  padding-right: 21px;
}

.pd-right-21-i {
  padding-right: 21px !important;
}

.pd-right-22 {
  padding-right: 22px;
}

.pd-right-22-i {
  padding-right: 22px !important;
}

.pd-right-23 {
  padding-right: 23px;
}

.pd-right-23-i {
  padding-right: 23px !important;
}

.pd-right-24 {
  padding-right: 24px;
}

.pd-right-24-i {
  padding-right: 24px !important;
}

.pd-right-25 {
  padding-right: 25px;
}

.pd-right-25-i {
  padding-right: 25px !important;
}

.pd-right-26 {
  padding-right: 26px;
}

.pd-right-26-i {
  padding-right: 26px !important;
}

.pd-right-27 {
  padding-right: 27px;
}

.pd-right-27-i {
  padding-right: 27px !important;
}

.pd-right-28 {
  padding-right: 28px;
}

.pd-right-28-i {
  padding-right: 28px !important;
}

.pd-right-29 {
  padding-right: 29px;
}

.pd-right-29-i {
  padding-right: 29px !important;
}

.pd-right-30 {
  padding-right: 30px;
}

.pd-right-30-i {
  padding-right: 30px !important;
}

.pd-right-31 {
  padding-right: 31px;
}

.pd-right-31-i {
  padding-right: 31px !important;
}

.pd-right-32 {
  padding-right: 32px;
}

.pd-right-32-i {
  padding-right: 32px !important;
}

.pd-right-33 {
  padding-right: 33px;
}

.pd-right-33-i {
  padding-right: 33px !important;
}

.pd-right-34 {
  padding-right: 34px;
}

.pd-right-34-i {
  padding-right: 34px !important;
}

.pd-right-35 {
  padding-right: 35px;
}

.pd-right-35-i {
  padding-right: 35px !important;
}

.pd-right-36 {
  padding-right: 36px;
}

.pd-right-36-i {
  padding-right: 36px !important;
}

.pd-right-37 {
  padding-right: 37px;
}

.pd-right-37-i {
  padding-right: 37px !important;
}

.pd-right-38 {
  padding-right: 38px;
}

.pd-right-38-i {
  padding-right: 38px !important;
}

.pd-right-39 {
  padding-right: 39px;
}

.pd-right-39-i {
  padding-right: 39px !important;
}

.pd-right-40 {
  padding-right: 40px;
}

.pd-right-40-i {
  padding-right: 40px !important;
}

.pd-right-41 {
  padding-right: 41px;
}

.pd-right-41-i {
  padding-right: 41px !important;
}

.pd-right-42 {
  padding-right: 42px;
}

.pd-right-42-i {
  padding-right: 42px !important;
}

.pd-right-43 {
  padding-right: 43px;
}

.pd-right-43-i {
  padding-right: 43px !important;
}

.pd-right-44 {
  padding-right: 44px;
}

.pd-right-44-i {
  padding-right: 44px !important;
}

.pd-right-45 {
  padding-right: 45px;
}

.pd-right-45-i {
  padding-right: 45px !important;
}

.pd-right-46 {
  padding-right: 46px;
}

.pd-right-46-i {
  padding-right: 46px !important;
}

.pd-right-47 {
  padding-right: 47px;
}

.pd-right-47-i {
  padding-right: 47px !important;
}

.pd-right-48 {
  padding-right: 48px;
}

.pd-right-48-i {
  padding-right: 48px !important;
}

.pd-right-49 {
  padding-right: 49px;
}

.pd-right-49-i {
  padding-right: 49px !important;
}

.pd-right-50 {
  padding-right: 50px;
}

.pd-right-50-i {
  padding-right: 50px !important;
}

.pd-right-51 {
  padding-right: 51px;
}

.pd-right-51-i {
  padding-right: 51px !important;
}

.pd-right-52 {
  padding-right: 52px;
}

.pd-right-52-i {
  padding-right: 52px !important;
}

.pd-right-53 {
  padding-right: 53px;
}

.pd-right-53-i {
  padding-right: 53px !important;
}

.pd-right-54 {
  padding-right: 54px;
}

.pd-right-54-i {
  padding-right: 54px !important;
}

.pd-right-55 {
  padding-right: 55px;
}

.pd-right-55-i {
  padding-right: 55px !important;
}

.pd-right-56 {
  padding-right: 56px;
}

.pd-right-56-i {
  padding-right: 56px !important;
}

.pd-right-57 {
  padding-right: 57px;
}

.pd-right-57-i {
  padding-right: 57px !important;
}

.pd-right-58 {
  padding-right: 58px;
}

.pd-right-58-i {
  padding-right: 58px !important;
}

.pd-right-59 {
  padding-right: 59px;
}

.pd-right-59-i {
  padding-right: 59px !important;
}

.pd-right-60 {
  padding-right: 60px;
}

.pd-right-60-i {
  padding-right: 60px !important;
}

.pd-bottom-1 {
  padding-bottom: 1px;
}

.pd-bottom-1-i {
  padding-bottom: 1px !important;
}

.pd-bottom-2 {
  padding-bottom: 2px;
}

.pd-bottom-2-i {
  padding-bottom: 2px !important;
}

.pd-bottom-3 {
  padding-bottom: 3px;
}

.pd-bottom-3-i {
  padding-bottom: 3px !important;
}

.pd-bottom-4 {
  padding-bottom: 4px;
}

.pd-bottom-4-i {
  padding-bottom: 4px !important;
}

.pd-bottom-5 {
  padding-bottom: 5px;
}

.pd-bottom-5-i {
  padding-bottom: 5px !important;
}

.pd-bottom-6 {
  padding-bottom: 6px;
}

.pd-bottom-6-i {
  padding-bottom: 6px !important;
}

.pd-bottom-7 {
  padding-bottom: 7px;
}

.pd-bottom-7-i {
  padding-bottom: 7px !important;
}

.pd-bottom-8 {
  padding-bottom: 8px;
}

.pd-bottom-8-i {
  padding-bottom: 8px !important;
}

.pd-bottom-9 {
  padding-bottom: 9px;
}

.pd-bottom-9-i {
  padding-bottom: 9px !important;
}

.pd-bottom-10 {
  padding-bottom: 10px;
}

.pd-bottom-10-i {
  padding-bottom: 10px !important;
}

.pd-bottom-11 {
  padding-bottom: 11px;
}

.pd-bottom-11-i {
  padding-bottom: 11px !important;
}

.pd-bottom-12 {
  padding-bottom: 12px;
}

.pd-bottom-12-i {
  padding-bottom: 12px !important;
}

.pd-bottom-13 {
  padding-bottom: 13px;
}

.pd-bottom-13-i {
  padding-bottom: 13px !important;
}

.pd-bottom-14 {
  padding-bottom: 14px;
}

.pd-bottom-14-i {
  padding-bottom: 14px !important;
}

.pd-bottom-15 {
  padding-bottom: 15px;
}

.pd-bottom-15-i {
  padding-bottom: 15px !important;
}

.pd-bottom-16 {
  padding-bottom: 16px;
}

.pd-bottom-16-i {
  padding-bottom: 16px !important;
}

.pd-bottom-17 {
  padding-bottom: 17px;
}

.pd-bottom-17-i {
  padding-bottom: 17px !important;
}

.pd-bottom-18 {
  padding-bottom: 18px;
}

.pd-bottom-18-i {
  padding-bottom: 18px !important;
}

.pd-bottom-19 {
  padding-bottom: 19px;
}

.pd-bottom-19-i {
  padding-bottom: 19px !important;
}

.pd-bottom-20 {
  padding-bottom: 20px;
}

.pd-bottom-20-i {
  padding-bottom: 20px !important;
}

.pd-bottom-21 {
  padding-bottom: 21px;
}

.pd-bottom-21-i {
  padding-bottom: 21px !important;
}

.pd-bottom-22 {
  padding-bottom: 22px;
}

.pd-bottom-22-i {
  padding-bottom: 22px !important;
}

.pd-bottom-23 {
  padding-bottom: 23px;
}

.pd-bottom-23-i {
  padding-bottom: 23px !important;
}

.pd-bottom-24 {
  padding-bottom: 24px;
}

.pd-bottom-24-i {
  padding-bottom: 24px !important;
}

.pd-bottom-25 {
  padding-bottom: 25px;
}

.pd-bottom-25-i {
  padding-bottom: 25px !important;
}

.pd-bottom-26 {
  padding-bottom: 26px;
}

.pd-bottom-26-i {
  padding-bottom: 26px !important;
}

.pd-bottom-27 {
  padding-bottom: 27px;
}

.pd-bottom-27-i {
  padding-bottom: 27px !important;
}

.pd-bottom-28 {
  padding-bottom: 28px;
}

.pd-bottom-28-i {
  padding-bottom: 28px !important;
}

.pd-bottom-29 {
  padding-bottom: 29px;
}

.pd-bottom-29-i {
  padding-bottom: 29px !important;
}

.pd-bottom-30 {
  padding-bottom: 30px;
}

.pd-bottom-30-i {
  padding-bottom: 30px !important;
}

.pd-bottom-31 {
  padding-bottom: 31px;
}

.pd-bottom-31-i {
  padding-bottom: 31px !important;
}

.pd-bottom-32 {
  padding-bottom: 32px;
}

.pd-bottom-32-i {
  padding-bottom: 32px !important;
}

.pd-bottom-33 {
  padding-bottom: 33px;
}

.pd-bottom-33-i {
  padding-bottom: 33px !important;
}

.pd-bottom-34 {
  padding-bottom: 34px;
}

.pd-bottom-34-i {
  padding-bottom: 34px !important;
}

.pd-bottom-35 {
  padding-bottom: 35px;
}

.pd-bottom-35-i {
  padding-bottom: 35px !important;
}

.pd-bottom-36 {
  padding-bottom: 36px;
}

.pd-bottom-36-i {
  padding-bottom: 36px !important;
}

.pd-bottom-37 {
  padding-bottom: 37px;
}

.pd-bottom-37-i {
  padding-bottom: 37px !important;
}

.pd-bottom-38 {
  padding-bottom: 38px;
}

.pd-bottom-38-i {
  padding-bottom: 38px !important;
}

.pd-bottom-39 {
  padding-bottom: 39px;
}

.pd-bottom-39-i {
  padding-bottom: 39px !important;
}

.pd-bottom-40 {
  padding-bottom: 40px;
}

.pd-bottom-40-i {
  padding-bottom: 40px !important;
}

.pd-bottom-41 {
  padding-bottom: 41px;
}

.pd-bottom-41-i {
  padding-bottom: 41px !important;
}

.pd-bottom-42 {
  padding-bottom: 42px;
}

.pd-bottom-42-i {
  padding-bottom: 42px !important;
}

.pd-bottom-43 {
  padding-bottom: 43px;
}

.pd-bottom-43-i {
  padding-bottom: 43px !important;
}

.pd-bottom-44 {
  padding-bottom: 44px;
}

.pd-bottom-44-i {
  padding-bottom: 44px !important;
}

.pd-bottom-45 {
  padding-bottom: 45px;
}

.pd-bottom-45-i {
  padding-bottom: 45px !important;
}

.pd-bottom-46 {
  padding-bottom: 46px;
}

.pd-bottom-46-i {
  padding-bottom: 46px !important;
}

.pd-bottom-47 {
  padding-bottom: 47px;
}

.pd-bottom-47-i {
  padding-bottom: 47px !important;
}

.pd-bottom-48 {
  padding-bottom: 48px;
}

.pd-bottom-48-i {
  padding-bottom: 48px !important;
}

.pd-bottom-49 {
  padding-bottom: 49px;
}

.pd-bottom-49-i {
  padding-bottom: 49px !important;
}

.pd-bottom-50 {
  padding-bottom: 50px;
}

.pd-bottom-50-i {
  padding-bottom: 50px !important;
}

.pd-bottom-51 {
  padding-bottom: 51px;
}

.pd-bottom-51-i {
  padding-bottom: 51px !important;
}

.pd-bottom-52 {
  padding-bottom: 52px;
}

.pd-bottom-52-i {
  padding-bottom: 52px !important;
}

.pd-bottom-53 {
  padding-bottom: 53px;
}

.pd-bottom-53-i {
  padding-bottom: 53px !important;
}

.pd-bottom-54 {
  padding-bottom: 54px;
}

.pd-bottom-54-i {
  padding-bottom: 54px !important;
}

.pd-bottom-55 {
  padding-bottom: 55px;
}

.pd-bottom-55-i {
  padding-bottom: 55px !important;
}

.pd-bottom-56 {
  padding-bottom: 56px;
}

.pd-bottom-56-i {
  padding-bottom: 56px !important;
}

.pd-bottom-57 {
  padding-bottom: 57px;
}

.pd-bottom-57-i {
  padding-bottom: 57px !important;
}

.pd-bottom-58 {
  padding-bottom: 58px;
}

.pd-bottom-58-i {
  padding-bottom: 58px !important;
}

.pd-bottom-59 {
  padding-bottom: 59px;
}

.pd-bottom-59-i {
  padding-bottom: 59px !important;
}

.pd-bottom-60 {
  padding-bottom: 60px;
}

.pd-bottom-60-i {
  padding-bottom: 60px !important;
}

.pd-left-1 {
  padding-left: 1px;
}

.pd-left-1-i {
  padding-left: 1px !important;
}

.pd-left-2 {
  padding-left: 2px;
}

.pd-left-2-i {
  padding-left: 2px !important;
}

.pd-left-3 {
  padding-left: 3px;
}

.pd-left-3-i {
  padding-left: 3px !important;
}

.pd-left-4 {
  padding-left: 4px;
}

.pd-left-4-i {
  padding-left: 4px !important;
}

.pd-left-5 {
  padding-left: 5px;
}

.pd-left-5-i {
  padding-left: 5px !important;
}

.pd-left-6 {
  padding-left: 6px;
}

.pd-left-6-i {
  padding-left: 6px !important;
}

.pd-left-7 {
  padding-left: 7px;
}

.pd-left-7-i {
  padding-left: 7px !important;
}

.pd-left-8 {
  padding-left: 8px;
}

.pd-left-8-i {
  padding-left: 8px !important;
}

.pd-left-9 {
  padding-left: 9px;
}

.pd-left-9-i {
  padding-left: 9px !important;
}

.pd-left-10 {
  padding-left: 10px;
}

.pd-left-10-i {
  padding-left: 10px !important;
}

.pd-left-11 {
  padding-left: 11px;
}

.pd-left-11-i {
  padding-left: 11px !important;
}

.pd-left-12 {
  padding-left: 12px;
}

.pd-left-12-i {
  padding-left: 12px !important;
}

.pd-left-13 {
  padding-left: 13px;
}

.pd-left-13-i {
  padding-left: 13px !important;
}

.pd-left-14 {
  padding-left: 14px;
}

.pd-left-14-i {
  padding-left: 14px !important;
}

.pd-left-15 {
  padding-left: 15px;
}

.pd-left-15-i {
  padding-left: 15px !important;
}

.pd-left-16 {
  padding-left: 16px;
}

.pd-left-16-i {
  padding-left: 16px !important;
}

.pd-left-17 {
  padding-left: 17px;
}

.pd-left-17-i {
  padding-left: 17px !important;
}

.pd-left-18 {
  padding-left: 18px;
}

.pd-left-18-i {
  padding-left: 18px !important;
}

.pd-left-19 {
  padding-left: 19px;
}

.pd-left-19-i {
  padding-left: 19px !important;
}

.pd-left-20 {
  padding-left: 20px;
}

.pd-left-20-i {
  padding-left: 20px !important;
}

.pd-left-21 {
  padding-left: 21px;
}

.pd-left-21-i {
  padding-left: 21px !important;
}

.pd-left-22 {
  padding-left: 22px;
}

.pd-left-22-i {
  padding-left: 22px !important;
}

.pd-left-23 {
  padding-left: 23px;
}

.pd-left-23-i {
  padding-left: 23px !important;
}

.pd-left-24 {
  padding-left: 24px;
}

.pd-left-24-i {
  padding-left: 24px !important;
}

.pd-left-25 {
  padding-left: 25px;
}

.pd-left-25-i {
  padding-left: 25px !important;
}

.pd-left-26 {
  padding-left: 26px;
}

.pd-left-26-i {
  padding-left: 26px !important;
}

.pd-left-27 {
  padding-left: 27px;
}

.pd-left-27-i {
  padding-left: 27px !important;
}

.pd-left-28 {
  padding-left: 28px;
}

.pd-left-28-i {
  padding-left: 28px !important;
}

.pd-left-29 {
  padding-left: 29px;
}

.pd-left-29-i {
  padding-left: 29px !important;
}

.pd-left-30 {
  padding-left: 30px;
}

.pd-left-30-i {
  padding-left: 30px !important;
}

.pd-left-31 {
  padding-left: 31px;
}

.pd-left-31-i {
  padding-left: 31px !important;
}

.pd-left-32 {
  padding-left: 32px;
}

.pd-left-32-i {
  padding-left: 32px !important;
}

.pd-left-33 {
  padding-left: 33px;
}

.pd-left-33-i {
  padding-left: 33px !important;
}

.pd-left-34 {
  padding-left: 34px;
}

.pd-left-34-i {
  padding-left: 34px !important;
}

.pd-left-35 {
  padding-left: 35px;
}

.pd-left-35-i {
  padding-left: 35px !important;
}

.pd-left-36 {
  padding-left: 36px;
}

.pd-left-36-i {
  padding-left: 36px !important;
}

.pd-left-37 {
  padding-left: 37px;
}

.pd-left-37-i {
  padding-left: 37px !important;
}

.pd-left-38 {
  padding-left: 38px;
}

.pd-left-38-i {
  padding-left: 38px !important;
}

.pd-left-39 {
  padding-left: 39px;
}

.pd-left-39-i {
  padding-left: 39px !important;
}

.pd-left-40 {
  padding-left: 40px;
}

.pd-left-40-i {
  padding-left: 40px !important;
}

.pd-left-41 {
  padding-left: 41px;
}

.pd-left-41-i {
  padding-left: 41px !important;
}

.pd-left-42 {
  padding-left: 42px;
}

.pd-left-42-i {
  padding-left: 42px !important;
}

.pd-left-43 {
  padding-left: 43px;
}

.pd-left-43-i {
  padding-left: 43px !important;
}

.pd-left-44 {
  padding-left: 44px;
}

.pd-left-44-i {
  padding-left: 44px !important;
}

.pd-left-45 {
  padding-left: 45px;
}

.pd-left-45-i {
  padding-left: 45px !important;
}

.pd-left-46 {
  padding-left: 46px;
}

.pd-left-46-i {
  padding-left: 46px !important;
}

.pd-left-47 {
  padding-left: 47px;
}

.pd-left-47-i {
  padding-left: 47px !important;
}

.pd-left-48 {
  padding-left: 48px;
}

.pd-left-48-i {
  padding-left: 48px !important;
}

.pd-left-49 {
  padding-left: 49px;
}

.pd-left-49-i {
  padding-left: 49px !important;
}

.pd-left-50 {
  padding-left: 50px;
}

.pd-left-50-i {
  padding-left: 50px !important;
}

.pd-left-51 {
  padding-left: 51px;
}

.pd-left-51-i {
  padding-left: 51px !important;
}

.pd-left-52 {
  padding-left: 52px;
}

.pd-left-52-i {
  padding-left: 52px !important;
}

.pd-left-53 {
  padding-left: 53px;
}

.pd-left-53-i {
  padding-left: 53px !important;
}

.pd-left-54 {
  padding-left: 54px;
}

.pd-left-54-i {
  padding-left: 54px !important;
}

.pd-left-55 {
  padding-left: 55px;
}

.pd-left-55-i {
  padding-left: 55px !important;
}

.pd-left-56 {
  padding-left: 56px;
}

.pd-left-56-i {
  padding-left: 56px !important;
}

.pd-left-57 {
  padding-left: 57px;
}

.pd-left-57-i {
  padding-left: 57px !important;
}

.pd-left-58 {
  padding-left: 58px;
}

.pd-left-58-i {
  padding-left: 58px !important;
}

.pd-left-59 {
  padding-left: 59px;
}

.pd-left-59-i {
  padding-left: 59px !important;
}

.pd-left-60 {
  padding-left: 60px;
}

.pd-left-60-i {
  padding-left: 60px !important;
}

.border-brand-gray-100 {
  border: 1px solid var(--color-brand-gray-100);
}

.border-brand-gray-200 {
  border: 1px solid var(--color-brand-gray-200);
}

.border-brand-gray-300 {
  border: 1px solid var(--color-brand-gray-300);
}

.border-brand-gray-400 {
  border: 1px solid var(--color-brand-gray-400);
}

.border-brand-gray-500 {
  border: 1px solid var(--color-brand-gray-500);
}

.border-brand-gray-600 {
  border: 1px solid var(--color-brand-gray-600);
}

.border-brand-gray-700 {
  border: 1px solid var(--color-brand-gray-700);
}

.border-brand-gray-800 {
  border: 1px solid var(--color-brand-gray-800);
}

.border-brand-gray-900 {
  border: 1px solid var(--color-brand-gray-900);
}

.border-brand-orange-100 {
  border: 1px solid var(--color-brand-orange-100);
}

.border-brand-orange-200 {
  border: 1px solid var(--color-brand-orange-200);
}

.border-brand-orange-300 {
  border: 1px solid var(--color-brand-orange-300);
}

.border-brand-orange-400 {
  border: 1px solid var(--color-brand-orange-400);
}

.border-brand-orange-500 {
  border: 1px solid var(--color-brand-orange-500);
}

.border-brand-orange-600 {
  border: 1px solid var(--color-brand-orange-600);
}

.border-brand-orange-700 {
  border: 1px solid var(--color-brand-orange-700);
}

.border-brand-orange-800 {
  border: 1px solid var(--color-brand-orange-800);
}

.border-brand-orange-900 {
  border: 1px solid var(--color-brand-orange-900);
}

.border-neutral-100 {
  border: 1px solid var(--color-neutral-100);
}

.border-neutral-200 {
  border: 1px solid var(--color-neutral-200);
}

.border-neutral-300 {
  border: 1px solid var(--color-neutral-300);
}

.border-neutral-400 {
  border: 1px solid var(--color-neutral-400);
}

.border-neutral-500 {
  border: 1px solid var(--color-neutral-500);
}

.border-neutral-600 {
  border: 1px solid var(--color-neutral-600);
}

.border-neutral-700 {
  border: 1px solid var(--color-neutral-700);
}

.border-neutral-800 {
  border: 1px solid var(--color-neutral-800);
}

.border-neutral-900 {
  border: 1px solid var(--color-neutral-900);
}

.border-neutral-1000 {
  border: 1px solid var(--color-neutral-1000);
}

.border-success-100 {
  border: 1px solid var(--color-success-100);
}

.border-success-200 {
  border: 1px solid var(--color-success-200);
}

.border-success-300 {
  border: 1px solid var(--color-success-300);
}

.border-success-400 {
  border: 1px solid var(--color-success-400);
}

.border-success-500 {
  border: 1px solid var(--color-success-500);
}

.border-success-600 {
  border: 1px solid var(--color-success-600);
}

.border-success-700 {
  border: 1px solid var(--color-success-700);
}

.border-success-800 {
  border: 1px solid var(--color-success-800);
}

.border-success-900 {
  border: 1px solid var(--color-success-900);
}

.border-info-100 {
  border: 1px solid var(--color-info-100);
}

.border-info-200 {
  border: 1px solid var(--color-info-200);
}

.border-info-300 {
  border: 1px solid var(--color-info-300);
}

.border-info-400 {
  border: 1px solid var(--color-info-400);
}

.border-info-500 {
  border: 1px solid var(--color-info-500);
}

.border-info-600 {
  border: 1px solid var(--color-info-600);
}

.border-info-700 {
  border: 1px solid var(--color-info-700);
}

.border-info-800 {
  border: 1px solid var(--color-info-800);
}

.border-info-900 {
  border: 1px solid var(--color-info-900);
}

.border-warning-100 {
  border: 1px solid var(--color-warning-100);
}

.border-warning-200 {
  border: 1px solid var(--color-warning-200);
}

.border-warning-300 {
  border: 1px solid var(--color-warning-300);
}

.border-warning-400 {
  border: 1px solid var(--color-warning-400);
}

.border-warning-500 {
  border: 1px solid var(--color-warning-500);
}

.border-warning-600 {
  border: 1px solid var(--color-warning-600);
}

.border-warning-700 {
  border: 1px solid var(--color-warning-700);
}

.border-warning-800 {
  border: 1px solid var(--color-warning-800);
}

.border-warning-900 {
  border: 1px solid var(--color-warning-900);
}

.border-error-100 {
  border: 1px solid var(--color-error-100);
}

.border-error-200 {
  border: 1px solid var(--color-error-200);
}

.border-error-300 {
  border: 1px solid var(--color-error-300);
}

.border-error-400 {
  border: 1px solid var(--color-error-400);
}

.border-error-500 {
  border: 1px solid var(--color-error-500);
}

.border-error-600 {
  border: 1px solid var(--color-error-600);
}

.border-error-700 {
  border: 1px solid var(--color-error-700);
}

.border-error-800 {
  border: 1px solid var(--color-error-800);
}

.border-error-900 {
  border: 1px solid var(--color-error-900);
}

.border-general-white {
  border: 1px solid var(--color-general-white);
}

.border-general-green {
  border: 1px solid var(--color-general-green);
}

.border-general-red {
  border: 1px solid var(--color-general-red);
}

.border-general-yellow {
  border: 1px solid var(--color-general-yellow);
}

.border-general-blue {
  border: 1px solid var(--color-general-blue);
}

.border-general-purple {
  border: 1px solid var(--color-general-purple);
}

.border-general-sky {
  border: 1px solid var(--color-general-sky);
}

.border-general-opal {
  border: 1px solid var(--color-general-opal);
}

.border-general-pig {
  border: 1px solid var(--color-general-pig);
}

.border-general-cream {
  border: 1px solid var(--color-general-cream);
}

.border-general-lavander {
  border: 1px solid var(--color-general-lavander);
}

.border-general-acqua {
  border: 1px solid var(--color-general-acqua);
}

.border-general-jade {
  border: 1px solid var(--color-general-jade);
}

.border-general-violet {
  border: 1px solid var(--color-general-violet);
}

.border-general-cornflower {
  border: 1px solid var(--color-general-cornflower);
}

.border-general-tangerine {
  border: 1px solid var(--color-general-tangerine);
}

.border-general-magenta {
  border: 1px solid var(--color-general-magenta);
}

.border-news-100 {
  border: 1px solid var(--color-news-100);
}

.border-news-200 {
  border: 1px solid var(--color-news-200);
}

.border-news-300 {
  border: 1px solid var(--color-news-300);
}

.border-news-400 {
  border: 1px solid var(--color-news-400);
}

.border-news-500 {
  border: 1px solid var(--color-news-500);
}

.border-news-600 {
  border: 1px solid var(--color-news-600);
}

.border-news-700 {
  border: 1px solid var(--color-news-700);
}

.border-news-800 {
  border: 1px solid var(--color-news-800);
}

.border-news-900 {
  border: 1px solid var(--color-news-900);
}

.border-surface-default {
  border: 1px solid var(--surface-default);
}

.border-surface-minimal {
  border: 1px solid var(--surface-minimal);
}

.border-surface-blank {
  border: 1px solid var(--surface-blank);
}

.border-surface-primary {
  border: 1px solid var(--surface-primary);
}

.border-surface-darker {
  border: 1px solid var(--surface-darker);
}

.border-surface-highlighted {
  border: 1px solid var(--surface-highlighted);
}

.border-surface-tertiary {
  border: 1px solid var(--surface-tertiary);
}

.border-surface-secondary {
  border: 1px solid var(--surface-secondary);
}

.border-surface-soft {
  border: 1px solid var(--surface-soft);
}

.border-surface-contrast {
  border: 1px solid var(--surface-contrast);
}

.border-surface-default-hover {
  border: 1px solid var(--surface-default-hover);
}

.border-surface-messagebox {
  border: 1px solid var(--surface-messagebox);
}

.border-surface-infobox {
  border: 1px solid var(--surface-infobox);
}

.border-surface-disabled {
  border: 1px solid var(--surface-disabled);
}

.border-surface-pressed {
  border: 1px solid var(--surface-pressed);
}

.border-surface-error {
  border: 1px solid var(--surface-error);
}

.border-surface-warning {
  border: 1px solid var(--surface-warning);
}

.border-surface-success {
  border: 1px solid var(--surface-success);
}

.border-surface-success-contrast {
  border: 1px solid var(--surface-success-contrast);
}

.border-surface-info {
  border: 1px solid var(--surface-info);
}

.border-border-default {
  border: 1px solid var(--border-default);
}

.border-border-contrast {
  border: 1px solid var(--border-contrast);
}

.border-border-smooth {
  border: 1px solid var(--border-smooth);
}

.border-border-highlighted {
  border: 1px solid var(--border-highlighted);
}

.border-border-primary {
  border: 1px solid var(--border-primary);
}

.border-border-darker {
  border: 1px solid var(--border-darker);
}

.border-border-gray {
  border: 1px solid var(--border-gray);
}

.border-border-messagebox {
  border: 1px solid var(--border-messagebox);
}

.border-border-infobox {
  border: 1px solid var(--border-infobox);
}

.border-border-pressed {
  border: 1px solid var(--border-pressed);
}

.border-border-error {
  border: 1px solid var(--border-error);
}

.border-border-warning {
  border: 1px solid var(--border-warning);
}

.border-border-warning-box {
  border: 1px solid var(--border-warning-box);
}

.border-border-success {
  border: 1px solid var(--border-success);
}

.border-border-info {
  border: 1px solid var(--border-info);
}

.border-typography-contrast {
  border: 1px solid var(--typography-contrast);
}

.border-typography-primary {
  border: 1px solid var(--typography-primary);
}

.border-typography-highlighted {
  border: 1px solid var(--typography-highlighted);
}

.border-typography-disabled {
  border: 1px solid var(--typography-disabled);
}

.border-typography-secondary {
  border: 1px solid var(--typography-secondary);
}

.border-typography-darker {
  border: 1px solid var(--typography-darker);
}

.border-typography-soft {
  border: 1px solid var(--typography-soft);
}

.border-typography-unselected {
  border: 1px solid var(--typography-unselected);
}

.border-typography-success {
  border: 1px solid var(--typography-success);
}

.border-typography-error {
  border: 1px solid var(--typography-error);
}

.border-typography-warning {
  border: 1px solid var(--typography-warning);
}

.border-typography-neutral {
  border: 1px solid var(--typography-neutral);
}

.border-typography-info {
  border: 1px solid var(--typography-info);
}

.border-typography-news {
  border: 1px solid var(--typography-news);
}

.pointer {
  cursor: pointer;
}

.w-0 {
  width: 0px;
}

.w-px {
  width: 1px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-1-2 {
  width: 50%;
}

.w-1-3 {
  width: 33.333333%;
}

.w-2-3 {
  width: 66.666667%;
}

.w-1-4 {
  width: 25%;
}

.w-2-4 {
  width: 50%;
}

.w-3-4 {
  width: 75%;
}

.w-1-5 {
  width: 20%;
}

.w-2-5 {
  width: 40%;
}

.w-3-5 {
  width: 60%;
}

.w-4-5 {
  width: 80%;
}

.w-1-6 {
  width: 16.666667%;
}

.w-2-6 {
  width: 33.333333%;
}

.w-3-6 {
  width: 50%;
}

.w-4-6 {
  width: 66.666667%;
}

.w-5-6 {
  width: 83.333333%;
}

.w-1-12 {
  width: 8.333333%;
}

.w-2-12 {
  width: 16.666667%;
}

.w-3-12 {
  width: 25%;
}

.w-4-12 {
  width: 33.333333%;
}

.w-5-12 {
  width: 41.666667%;
}

.w-6-12 {
  width: 50%;
}

.w-7-12 {
  width: 58.333333%;
}

.w-8-12 {
  width: 66.666667%;
}

.w-9-12 {
  width: 75%;
}

.w-10-12 {
  width: 83.333333%;
}

.w-11-12 {
  width: 91.666667%;
}

.w-screen {
  width: 100vw;
}

.w-min-content {
  width: -moz-min-content;
  width: min-content;
}

.w-max-content {
  width: -moz-max-content;
  width: max-content;
}

.w-fit-content {
  width: -moz-fit-content;
  width: fit-content;
}

.w-spacing-min {
  width: var(--spacing-min);
}

.w-spacing-tiny {
  width: var(--spacing-tiny);
}

.w-spacing-small {
  width: var(--spacing-small);
}

.w-spacing-medium {
  width: var(--spacing-medium);
}

.w-spacing-default {
  width: var(--spacing-default);
}

.w-spacing-large {
  width: var(--spacing-large);
}

.w-spacing-extra {
  width: var(--spacing-extra);
}

.w-spacing-super {
  width: var(--spacing-super);
}

.w-spacing-max {
  width: var(--spacing-max);
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

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

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

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

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

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

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

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

.flex-1 {
  flex: 1 1 0%;
}

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

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.grow {
  flex-grow: 1;
}

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

.shrink {
  flex-shrink: 1;
}

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

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.order-none {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gap-spacing-min {
  gap: var(--spacing-min);
}

.gap-spacing-tiny {
  gap: var(--spacing-tiny);
}

.gap-spacing-small {
  gap: var(--spacing-small);
}

.gap-spacing-medium {
  gap: var(--spacing-medium);
}

.gap-spacing-default {
  gap: var(--spacing-default);
}

.gap-spacing-large {
  gap: var(--spacing-large);
}

.gap-spacing-extra {
  gap: var(--spacing-extra);
}

.gap-spacing-super {
  gap: var(--spacing-super);
}

.gap-spacing-max {
  gap: var(--spacing-max);
}

.gap-0 {
  gap: 0px;
}

.gap-x-spacing-min {
  -moz-column-gap: var(--spacing-min);
       column-gap: var(--spacing-min);
}

.gap-x-spacing-tiny {
  -moz-column-gap: var(--spacing-tiny);
       column-gap: var(--spacing-tiny);
}

.gap-x-spacing-small {
  -moz-column-gap: var(--spacing-small);
       column-gap: var(--spacing-small);
}

.gap-x-spacing-medium {
  -moz-column-gap: var(--spacing-medium);
       column-gap: var(--spacing-medium);
}

.gap-x-spacing-default {
  -moz-column-gap: var(--spacing-default);
       column-gap: var(--spacing-default);
}

.gap-x-spacing-large {
  -moz-column-gap: var(--spacing-large);
       column-gap: var(--spacing-large);
}

.gap-x-spacing-extra {
  -moz-column-gap: var(--spacing-extra);
       column-gap: var(--spacing-extra);
}

.gap-x-spacing-super {
  -moz-column-gap: var(--spacing-super);
       column-gap: var(--spacing-super);
}

.gap-x-spacing-max {
  -moz-column-gap: var(--spacing-max);
       column-gap: var(--spacing-max);
}

.gap-x-0 {
  -moz-column-gap: 0px;
       column-gap: 0px;
}

.gap-y-spacing-min {
  row-gap: var(--spacing-min);
}

.gap-y-spacing-tiny {
  row-gap: var(--spacing-tiny);
}

.gap-y-spacing-small {
  row-gap: var(--spacing-small);
}

.gap-y-spacing-medium {
  row-gap: var(--spacing-medium);
}

.gap-y-spacing-default {
  row-gap: var(--spacing-default);
}

.gap-y-spacing-large {
  row-gap: var(--spacing-large);
}

.gap-y-spacing-extra {
  row-gap: var(--spacing-extra);
}

.gap-y-spacing-super {
  row-gap: var(--spacing-super);
}

.gap-y-spacing-max {
  row-gap: var(--spacing-max);
}

.gap-y-0 {
  row-gap: 0px;
}

.gap-px {
  gap: 1px;
}

.gap-x-px {
  -moz-column-gap: 1px;
       column-gap: 1px;
}

.gap-y-px {
  row-gap: 1px;
}

:root {
  --defalt-font-size: 16px;
  --h1-size: 2rem;
  --h2-size: 1.5rem;
  --h3-size: 1.25rem;
  --h4-size: 1rem;
  --h5-size: 0.875rem;
  --color-brand-gray-100: #d0d0d1;
  --color-brand-gray-200: #b2b2b3;
  --color-brand-gray-300: #939294;
  --color-brand-gray-400: #747376;
  --color-brand-gray-500: #656467;
  --color-brand-gray-600: #5b5a5d;
  --color-brand-gray-700: #474648;
  --color-brand-gray-800: #323233;
  --color-brand-gray-900: #1e1e1f;
  --color-brand-orange-100: #fce1d7;
  --color-brand-orange-200: #fac4af;
  --color-brand-orange-300: #f7a687;
  --color-brand-orange-400: #f5895f;
  --color-brand-orange-500: #f26b37;
  --color-brand-orange-600: #c2562c;
  --color-brand-orange-700: #914021;
  --color-brand-orange-800: #612b16;
  --color-brand-orange-900: #30150b;
  --color-neutral-100: #fbfcfd;
  --color-neutral-200: #f4f6fa;
  --color-neutral-300: #edf0f8;
  --color-neutral-400: #e6eaf4;
  --color-neutral-500: #dbe1f0;
  --color-neutral-600: #c6cbd8;
  --color-neutral-700: #9a9ea8;
  --color-neutral-800: #6d7078;
  --color-neutral-900: #424448;
  --color-neutral-1000: #161718;
  --color-success-100: #bbecd5;
  --color-success-200: #8edfb9;
  --color-success-300: #60d29d;
  --color-success-400: #33c581;
  --color-success-500: #1dbf73;
  --color-success-600: #1aac68;
  --color-success-700: #148651;
  --color-success-800: #0e5f39;
  --color-success-900: #093a23;
  --color-info-100: #cde3ff;
  --color-info-200: #acd0ff;
  --color-info-300: #8abdff;
  --color-info-400: #69aaff;
  --color-info-500: #59a1ff;
  --color-info-600: #5091e6;
  --color-info-700: #3e71b3;
  --color-info-800: #2c507f;
  --color-info-900: #1b314d;
  --color-warning-100: #ffefb5;
  --color-warning-200: #ffe485;
  --color-warning-300: #ffd953;
  --color-warning-400: #ffce22;
  --color-warning-500: #ffc90a;
  --color-warning-600: #e6b509;
  --color-warning-700: #b38d07;
  --color-warning-800: #7f6405;
  --color-warning-900: #4d3d03;
  --color-error-100: #fec4cb;
  --color-error-200: #fd9da9;
  --color-error-300: #fc7586;
  --color-error-400: #fb4e63;
  --color-error-500: #fb3b52;
  --color-error-600: #e2354a;
  --color-error-700: #b0293a;
  --color-error-800: #7d1d29;
  --color-error-900: #4c1219;
  --color-general-white: #ffffff;
  --color-general-green: #00b000;
  --color-general-red: #f23737;
  --color-general-yellow: #e9a904;
  --color-general-blue: #008ede;
  --color-general-purple: #9747ff;
  --color-general-sky: #d7f0ff;
  --color-general-opal: #e9ffe3;
  --color-general-pig: #ffe2e2;
  --color-general-cream: #fff5db;
  --color-general-lavander: #ecddff;
  --color-general-acqua: #3fc8e4;
  --color-general-jade: #1dbf73;
  --color-general-violet: #5654d4;
  --color-general-cornflower: #59a1ff;
  --color-general-tangerine: #ffc90a;
  --color-general-magenta: #fb3b52;
  --color-news-100: #e0c7ff;
  --color-news-200: #cba3ff;
  --color-news-300: #b67eff;
  --color-news-400: #a159ff;
  --color-news-500: #9747ff;
  --color-news-600: #8840e6;
  --color-news-700: #6a32b3;
  --color-news-800: #4b237f;
  --color-news-900: #2e154d;
  --radius-default: 1rem;
  --radius-small: 0.5rem;
  --radius-medium: 1.5rem;
  --radius-large: 2rem;
  --radius-max: 2.5rem;
  --radius-min: 0.25rem;
  --spacing-default: 1.5rem;
  --spacing-min: 0.25rem;
  --spacing-tiny: 0.5rem;
  --spacing-max: 7rem;
  --spacing-extra: 3rem;
  --spacing-large: 2rem;
  --spacing-medium: 1rem;
  --spacing-small: 0.75rem;
  --spacing-super: 5rem;
  --font-family-source: 'Source Sans 3', calibri ,sans-serif;
  --font-family-ubuntu: 'Ubuntu', courier, sans-serif;
  --font-weight-100: Thin;
  --font-weight-300: Light;
  --font-weight-500: Regular;
  --font-weight-600: 600;
  --font-weight-700: Medium;
  --font-weight-800: SemiBold;
  --font-weight-900: Bold;
  --font-size-huge: 2.5rem;
  --font-size-super: 2rem;
  --font-size-xlarge: 1.5rem;
  --font-size-large: 1.25rem;
  --font-size-medium: 1rem;
  --font-size-small: 0.875rem;
  --font-size-xsmall: 0.8125rem;
  --font-size-caption: 0.6875rem;
  --font-size-tag: 0.625rem;
  --font-size-tiny: 0.75rem;
  --font-size-min: 0.6875rem;
  --icon-size-large: 1.5rem;
  --icon-size-medium: 1rem;
  --icon-size-small: 0.75rem;
  --icons-weight-thin: Thin;
  --icons-weight-light: Light;
  --icons-weight-regular: Regular;
  --icons-weight-bold: Bold;
  --icons-weight-fill: Fill;
  --icons-weight-duotone: duotone;
  --icons-library-phosphor: phosphor;
  --elevation-x-level-1: 0.0625rem;
  --elevation-x-level-2: 0.125rem;
  --elevation-x-level-3: 0rem;
  --elevation-x-level-4: 0rem;
  --elevation-y-level-1: 0.0625rem;
  --elevation-y-level-2: 0.125rem;
  --elevation-y-level-3: 0.375rem;
  --elevation-y-level-4: 0.125rem;
  --elevation-blur-level-1: 0.125rem;
  --elevation-blur-level-2: 0.5rem;
  --elevation-blur-level-3: 0.625rem;
  --elevation-blur-level-4: 1rem;
  --elevation-spread-level-1: 0rem;
  --elevation-spread-level-2: 0rem;
  --elevation-spread-level-3: 0.25rem;
  --elevation-spread-level-4: 0.75rem;
  --border-min: 0.0625rem;
  --border-medium: 0.125rem;
  --border-max: 0.25rem;
  --border-strong: 0.1875rem;
  --surface-default: #ffffff;
  --surface-minimal: #fbfcfd;
  --surface-blank: #eeeded;
  --surface-primary: #f26b37;
  --surface-darker: #474648;
  --surface-highlighted: #fce1d7;
  --surface-tertiary: #c2562c;
  --surface-secondary: #dbe1f0;
  --surface-soft: #f4f6fa;
  --surface-contrast: #5b5a5d;
  --surface-default-hover: #fbfcfd;
  --surface-messagebox: #fff5db;
  --surface-infobox: #d7f0ff;
  --surface-disabled: #d0d0d1;
  --surface-pressed: #914021;
  --surface-error: #fb4e63;
  --surface-success: #33c581;
  --surface-success-contrast: #e9ffe3;
  --surface-info: #69aaff;
  --surface-warning: #e6b509;
  --border-default: #dbe1f0;
  --border-contrast: #f5895f;
  --border-smooth: #edf0f8;
  --border-highlighted: #f7a687;
  --border-primary: #f26b37;
  --border-darker: #e6eaf4;
  --border-gray: #747376;
  --border-messagebox: #fff5db;
  --border-infobox: #2c507f;
  --border-pressed: #914021;
  --border-error: #fc7586;
  --border-warning: #ffd953;
  --border-warning-box: #b38d07;
  --border-success: #60d29d;
  --border-info: #8abdff;
  --typography-contrast: #ffffff;
  --typography-primary: #5b5a5d;
  --typography-highlighted: #f26b37;
  --typography-disabled: #d0d0d1;
  --typography-secondary: #747376;
  --typography-darker: #612b16;
  --typography-soft: #f7a687;
  --typography-unselected: #dbe1f0;
  --typography-success: #1aac68;
  --typography-error: #e2354a;
  --typography-warning: #e6b509;
  --typography-neutral: #6d7078;
  --typography-info: #5091e6;
  --typography-news: #8840e6;
}
@media (prefers-color-scheme: none) {
  :root {
    --surface-default: #424448;
    --surface-minimal: #323233;
    --surface-blank: #161718;
    --surface-primary: #f26b37;
    --surface-darker: #5b5a5d;
    --surface-highlighted: #fce1d7;
    --surface-tertiary: #747376;
    --surface-secondary: #9a9ea8;
    --surface-soft: #474648;
    --surface-contrast: #ffffff;
    --surface-default-hover: #161718;
    --surface-messagebox: #5b5a5d;
    --surface-infobox: #2c507f;
    --surface-disabled: #d0d0d1;
    --surface-pressed: #747376;
    --surface-error: #fb4e63;
    --surface-warning: #e6b509;
    --surface-success: #33c581;
    --surface-success-contrast: #e9ffe3;
    --surface-info: #69aaff;
    --border-default: #424448;
    --border-contrast: #dbe1f0;
    --border-smooth: #474648;
    --border-highlighted: #f26b37;
    --border-primary: #f26b37;
    --border-darker: #6d7078;
    --border-gray: #939294;
    --border-messagebox: #7f6405;
    --border-infobox: #2c507f;
    --border-pressed: #914021;
    --border-error: #fc7586;
    --border-warning: #ffd953;
    --border-success: #60d29d;
    --border-info: #8abdff;
    --border-warning-box: #e6b509;
    --typography-contrast: #ffffff;
    --typography-primary: #ffffff;
    --typography-highlighted: #f26b37;
    --typography-disabled: #5b5a5d;
    --typography-secondary: #d0d0d1;
    --typography-darker: #612b16;
    --typography-soft: #f7a687;
    --typography-unselected: #6d7078;
    --typography-success: #1dbf73;
    --typography-error: #fb3b52;
    --typography-warning: #ffc90a;
    --typography-neutral: #6d7078;
    --typography-info: #59a1ff;
    --typography-news: #9747ff;
  }
}

html {
  font-size: var(--defalt-font-size);
  font-family: var(--font-family-source);
  color: var(--typography-primary);
  background: var(--surface-default);
}

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

.filter-button-wrapper {
  position: relative;
  display: inline-block;
}
.filter-button-wrapper .filter-toggle {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  height: 50px;
  border-color: #6ac25a;
}
.filter-button-wrapper .filter-toggle:hover {
  background-color: #f8f9fa;
  border-color: #6c757d;
}
.filter-button-wrapper .filter-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}
.filter-button-wrapper .filter-toggle i {
  font-size: 18pt;
  color: #6ac25a;
}
.filter-button-wrapper .filter-count {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0.65rem;
  padding: 0.25rem 0.5rem;
  background-color: #dc3545;
  color: white;
  border-radius: 50%;
  min-width: 20px;
  text-align: center;
  font-weight: 600;
}

label.nd-toggle[for=send_mail] {
  height: 100%;
}

label.nd-toggle[for=two_factor_enabled] {
  height: 100%;
}

.nd-form-field.nd-form-field--flex-1.d-flex.align-items-center.gap-2 {
  height: 100%;
}

.nd-form-field--flex-1 {
  height: 100%;
}

.nd-filter-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 0 24px;
}

.nd-filter-panel-title {
  flex: 1;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: #222;
}

.nd-filter-panel-content {
  padding: 16px 24px 0 24px;
}

.nd-filter-panel-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}

.nd-filter-panel-apply {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
}

.nd-filter-panel-clear {
  width: 100%;
  height: 48px;
  color: var(--nd-brand-500, #5cbe4a);
  background: none;
  border: none;
  text-align: center;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nd-filter-form__group-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.nd-filter-form__group-block:last-child {
  margin-bottom: 0;
}

.nd-filter-form__section-title {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--nd-clr-text);
}

.nd-filter-form__row {
  display: flex;
  gap: 16px;
}

.nd-filter-form__row > .nd-form-field {
  flex: 1 1 0;
  min-width: 0;
}

.filter-button-wrapper {
  position: relative;
}
.filter-button-wrapper .filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-color: #6ac25a;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.filter-button-wrapper .filter-toggle:hover {
  background-color: var(--color-bg-hover, #f5f5f5);
  color: var(--color-text-primary, #333);
}
.filter-button-wrapper .filter-toggle:active {
  transform: scale(0.95);
}
.filter-button-wrapper .filter-toggle i {
  font-size: 20px;
}

.filter-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.filter-panel-slide {
  position: fixed;
  top: 1rem;
  right: 1rem;
  max-height: calc(100vh - 2rem);
  width: min(100%, 400px);
  height: 100%;
  background-color: var(--color-bg-primary, #fff);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
}
.filter-panel-slide.translate-x-full {
  transform: translateX(100%);
}
.filter-panel-slide.translate-x-0 {
  transform: translateX(0);
}
@media (max-width: 768px) {
  .filter-panel-slide {
    width: calc(100% - 2rem);
    right: 1rem;
    left: 1rem;
  }
}

.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0px 16px;
  flex-shrink: 0;
}
.filter-panel-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary, #333);
}

.filter-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  color: var(--color-text-secondary, #666);
  flex-shrink: 0;
}
.filter-panel-close:hover {
  background-color: var(--color-bg-hover, #f5f5f5);
  color: var(--color-text-primary, #333);
}
.filter-panel-close i {
  font-size: 20px;
}

.filter-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 16px 16px 16px;
}
.filter-panel-content::-webkit-scrollbar {
  width: 6px;
}
.filter-panel-content::-webkit-scrollbar-track {
  background: transparent;
}
.filter-panel-content::-webkit-scrollbar-thumb {
  background: var(--color-border, #d0d0d0);
  border-radius: 3px;
}
.filter-panel-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary, #999);
}

.filter-panel-footer {
  display: flex;
  gap: 0.75rem;
  padding: 16px;
  flex-shrink: 0;
  justify-content: flex-end;
}
.filter-panel-footer .btn {
  min-width: 100px;
}
.filter-panel-footer .btn i {
  margin-right: 0.5rem;
}

.nd-filter-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nd-filter-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nd-filter-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary, #333);
}

.filter-select {
  min-height: 38px;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.transition {
  transition-property: all;
}

.ease-out {
  timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in {
  timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

:root {
  --nd-brand-100: #e0f3dc;
  --nd-brand-500: #5cbe4a;
  --nd-brand-600: #4a983b;
  --nd-brand-700: #37722c;
  --nd-brand-800: #254c1e;
  --surface-primary: var(--nd-brand-500);
  --surface-highlighted: var(--nd-brand-100);
  --surface-tertiary: var(--nd-brand-600);
  --surface-pressed: var(--nd-brand-700);
  --border-primary: var(--nd-brand-500);
  --border-highlighted: var(--nd-brand-500);
  --border-pressed: var(--nd-brand-700);
  --typography-highlighted: var(--nd-brand-500);
}

.form-signin {
  min-height: 100vh;
}

.nl-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(480px, 50%) minmax(480px, 50%);
  background: var(--surface-default);
  color: var(--typography-primary);
  font-family: var(--font-family-source), "Source Sans Pro", sans-serif;
}

.nl-login__visual {
  position: relative;
  overflow: hidden;
  padding: 48px;
  background: url("/img/login.png") center/cover no-repeat;
}

.nl-login__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 15%, rgba(92, 190, 74, 0.24) 0%, rgba(92, 190, 74, 0) 38%), radial-gradient(circle at 0% 88%, rgba(74, 152, 59, 0.2) 0%, rgba(74, 152, 59, 0) 44%);
}

.nl-login__panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: stretch;
  padding: 40px 72px 28px;
  background: var(--surface-default);
}

.nl-login__content {
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  align-self: center;
  margin-inline: auto;
  justify-content: flex-start;
}

.nl-login__form,
#login-form,
#form {
  width: 100%;
}

.nl-login__brand {
  margin-bottom: 48px;
}

.nl-login__brand img {
  width: 200px;
  height: auto;
  display: block;
}

.nl-login__heading {
  margin: 0 0 48px;
}

.nl-login__heading > .h3 {
  margin: 0 0 16px;
  color: #50637d;
}

.nl-login__heading > .typo-body {
  color: #64748b;
}

.nl-login__feedback {
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid var(--border-error);
  border-radius: 12px;
  background: rgba(251, 59, 82, 0.06);
}

.nl-login__feedback .text-danger,
.nl-login__feedback .text-success {
  display: block;
  margin: 0;
  padding-left: 18px;
}

.nl-login__feedback .text-danger {
  color: var(--typography-error);
}

.nl-login__feedback .text-success {
  color: var(--typography-success);
}

.nl-login__field {
  margin-bottom: 16px;
}

.nl-login__label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--typography-secondary);
  font-size: 14px;
}

.nl-login__control {
  position: relative;
}

.nl-login__input {
  height: 48px;
  width: 100%;
  border: 1px solid var(--border-default) !important;
  border-radius: 10px !important;
  padding: 0 46px 0 16px !important;
  background: var(--surface-default) !important;
  color: var(--typography-primary) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.nl-login__input::-moz-placeholder {
  color: var(--typography-neutral) !important;
}

.nl-login__input::placeholder {
  color: var(--typography-neutral) !important;
}

.nl-login__input:focus {
  border-color: var(--nd-brand-500, #5cbe4a) !important;
  background: var(--surface-default) !important;
  box-shadow: none !important;
  outline: none;
}

.nl-login__icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--typography-neutral);
  font-size: 14px;
  pointer-events: none;
}

.nl-login__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
  margin: 0px 0 32px;
}

.nl-login__meta-spacer {
  flex: 1;
}

.nl-login__forgot {
  color: var(--nd-brand-500, #5cbe4a);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.nl-login__forgot:hover,
.nl-login__forgot:focus {
  color: var(--nd-brand-600, #4a983b);
  text-decoration: none;
}

.nl-login__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 8px;
  background: var(--nd-brand-500, #5cbe4a);
  color: var(--typography-contrast);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 180ms ease, transform 180ms ease;
}

.nl-login__submit:hover,
.nl-login__submit:focus {
  background: var(--nd-brand-600, #4a983b);
  color: var(--typography-contrast);
}

.nl-login__submit:active {
  transform: translateY(1px);
}

.nl-login__submit[disabled] {
  opacity: 0.8;
  cursor: wait;
}

.nl-login__submit .ph {
  font-size: 24px;
}

.nl-login__actions--forgot-password {
  gap: 48px !important;
}

.nl-login__actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nl-login__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nd-brand-500, #5cbe4a);
  text-decoration: none;
  text-align: center;
  gap: 8px;
}
.nl-login__back .ph {
  font-size: 24px;
}

.nl-login__back:hover,
.nl-login__back:focus {
  color: var(--nd-brand-500, #5cbe4a);
  text-decoration: none;
}

.nl-login__footer {
  width: min(100%, 460px);
  margin-top: 24px;
  padding-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--typography-neutral);
  font-size: 11px;
}

@media (max-width: 1200px) {
  .nl-login__panel {
    padding-inline: 56px;
  }
  .nl-login__heading > .h3 {
    margin-bottom: 8px;
    line-height: 24px;
  }
}
@media (max-width: 992px) {
  .nl-login {
    grid-template-columns: 1fr;
  }
  .nl-login__visual {
    min-height: 460px;
    padding: 40px 32px;
  }
  .nl-login__panel {
    padding: 40px 32px 32px;
  }
  .nl-login__content {
    min-height: auto;
  }
  .nl-login__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .nl-login__visual,
  .nl-login__panel {
    padding-inline: 24px;
  }
  .nl-login__visual {
    min-height: 380px;
  }
  .nl-login__brand {
    margin-bottom: 32px;
  }
  .nl-login__heading > .h3 {
    margin-bottom: 8px;
  }
  .nl-login__description {
    margin-bottom: 28px;
  }
}