@charset "UTF-8";
/* ITCSS LAYER: GENERIC */
/* Document
 * ========================================================================== */
/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Breaks words to prevent overflow in all browsers (opinionated).
 * 4. Use a 4-space tab width in all browsers (opinionated).
 * 5. Remove the grey highlight on links in iOS (opinionated).
 * 6. Prevent adjustments of font size after orientation changes in iOS.
 */
:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
}

/* Sections
 * ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
:where(body) {
  margin: 0;
}

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

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

/**
 * 1. Correct the inheritance of border color in Firefox.
 * 2. Add the correct box sizing in Firefox.
 */
:where(hr) {
  color: inherit; /* 1 */
  height: 0; /* 2 */
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}

/**
 * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
 */
:where(nav li)::before {
  content: "​";
  float: left;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Prevent overflow of the container in all browsers (opinionated).
 */
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}

/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(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.
 */
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

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

/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */
:where(iframe) {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
:where(svg:not([fill])) {
  fill: currentColor;
}

/* Tabular data
 * ========================================================================== */
/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: inherit; /* 2 */
  text-indent: 0; /* 3 */
}

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, [type=button i], [type=reset i], [type=submit i]) {
  -webkit-appearance: button;
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */
:where(fieldset) {
  border: 1px solid var(--color-gray-500);
}

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

/**
 * 1. Remove the margin in Firefox and Safari.
 * 3. Change the resize direction in all browsers (opinionated).
 */
:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}

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

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons 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 styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in Safari.
 */
:where(details > summary:first-of-type) {
  display: list-item;
}

/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
:where([aria-busy=true i]) {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */
:where([aria-controls]) {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
:where([aria-disabled=true i], [disabled]) {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
:where([aria-hidden=false i][hidden]) {
  display: initial;
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

@property --o-grid-column-min-width {
  syntax: "<length>";
  initial-value: 200px;
  inherits: false;
}
@property --u-flex-dynamic-basis {
  syntax: "<length>";
  initial-value: 100%;
  inherits: false;
}
/* ITCSS LAYER: ELEMENTS */
:root {
  --dimension-core: 16;
  --proportion-xxxs: .125;
  --proportion-xxs: .25;
  --proportion-xs: .5;
  --proportion-sm: .75;
  --proportion-md: 1;
  --proportion-lg: 1.25;
  --proportion-xl: 2;
  --proportion-xxl: 3;
  --proportion-xxxl: 4;
  --spacing-md: calc(var(--dimension-core) * 1px); /* 16px */
  --spacing-xxxs: calc(var(--spacing-md) * var(--proportion-xxxs)); /* 2px  */
  --spacing-xxs: calc(var(--spacing-md) * var(--proportion-xxs)); /* 4px  */
  --spacing-xs: calc(var(--spacing-md) * var(--proportion-xs)); /* 8px  */
  --spacing-sm: calc(var(--spacing-md) * var(--proportion-sm)); /* 12px */
  --spacing-lg: calc(var(--spacing-md) * var(--proportion-lg)); /* 20px */
  --spacing-xl: calc(var(--spacing-md) * var(--proportion-xl)); /* 32px */
  --spacing-xxl: calc(var(--spacing-md) * var(--proportion-xxl)); /* 48px */
  --spacing-xxxl: calc(var(--spacing-md) * var(--proportion-xxxl)); /* 64px */
  --spacing-null: 0 ;
  --spacing-rem-xxxs: calc(var(--proportion-xxxs) * 1rem); /* 0.125rem */
  --spacing-rem-xxs: calc(var(--proportion-xxs) * 1rem); /* 0.25rem */
  --spacing-rem-xs: calc(var(--proportion-xs) * 1rem); /* 0.5rem */
  --spacing-rem-sm: calc(var(--proportion-sm) * 1rem); /* 0.75rem */
  --spacing-rem-md: calc(var(--proportion-md) * 1rem); /* 1rem */
  --spacing-rem-lg: calc(var(--proportion-lg) * 1rem); /* 1.25rem */
  --spacing-rem-xl: calc(var(--proportion-xl) * 1rem); /* 2rem */
  --spacing-rem-xxl: calc(var(--proportion-xxl) * 1rem); /* 3rem */
  --spacing-rem-xxxl: calc(var(--proportion-xxxl) * 1rem); /* 4rem */
  --border-radius-100: 2px;
  --border-radius-200: 4px;
  --border-radius-600: 20px;
  --border-with-200: 2px;
  --border-with-400: 4px;
  --font-size-50: 0.625rem;
  --font-size-100: 0.75rem;
  --font-size-150: 0.875rem;
  --font-size-200: 1rem;
  --font-size-300: 1.25rem;
  --font-size-400: 1.5rem;
  --font-size-500: 2rem;
  --font-size-700: 3rem;
  --font-family: 'Poppins', sans-serif;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-700: 700;
  --transition-duration-200: .1s;
  --transition-duration-500: .3s;
  --shadow-100: 0 0 7px rgba(0, 0, 0, .1);
  --shadow-300: 0 3px 7px rgba(0, 0, 0, .2);
  --color-gray-100: #ECF2F2;
  --color-gray-200: #E1E5E5;
  --color-gray-300: #D1D5D5;
  --color-gray-400: #BCBFBF;
  --color-gray-500: #969999;
  --color-gray-600: #7D8080;
  --color-gray-700: #4B4D4D;
  --color-gray-800: #323333;
  --color-brand-primary-100: #EEFFFD;
  --color-brand-primary-400: #5DE8D7;
  --color-brand-primary-500: #14BBA7;
  --color-brand-primary-600: #0BAB98;
  --color-feedback-success-100: #ECFEF6;
  --color-feedback-success-500: #21D78B;
  --color-feedback-success-600: #0FBF76;
  --color-feedback-success-800: #1BB172;
  --color-feedback-warn-100: #FFF7DE;
  --color-feedback-warn-200: #FFF0C0;
  --color-feedback-warn-500: #FFD345;
  --color-feedback-warn-700: #BB910A;
  --color-feedback-error-100: #FEF6F8;
  --color-feedback-error-200: #FFEDF2;
  --color-feedback-error-500: #F54C80;
  --color-feature-premium-100: #FFF4FF;
  --color-feature-premium-300: #F9B4F6;
  --color-feature-premium-500: #BB14B4;
  --color-feature-favorite-500: #F75B80;
  --color-brand-telegram-100: #f3f8ff;
  --color-brand-telegram-500: #54a9eb;
  --color-brand-telegram-600: #3e95da;
}

:root {
  --global-accent-color-softest: var(--color-brand-primary-100);
  --global-accent-color-soft: var(--color-brand-primary-400);
  --global-accent-color: var(--color-brand-primary-500);
  --global-accent-color-active: var(--color-brand-primary-600);
  --font-color-softest: var(--color-gray-300);
  --font-color-soft: var(--color-gray-500);
  --font-color-default: var(--color-gray-700);
  --font-color-overlay: white;
  --font-color-accent: var(--global-accent-color);
  --font-color-accent-active: var(--global-accent-color-active);
  --font-color-success: var(--color-feedback-success-500);
  --font-color-success-hard: var(--color-feedback-success-800);
  --font-color-error: var(--color-feedback-error-500);
  --font-color-warn: var(--color-feedback-warn-700);
  --font-color-premium: var(--color-feature-premium-500);
  --font-color-coins: var(--color-feedback-warn-500);
  --fill-color-accent: var(--global-accent-color);
  --fill-color-success: var(--color-feedback-success-500);
  --fill-color-error: var(--color-feedback-error-500);
  --fill-color-premium: var(--color-feature-premium-500);
  --fill-color-favorite: var(--color-feature-favorite-500);
  --font-weight-regular: var(--font-weight-400);
  --font-weight-medium: var(--font-weight-500);
  --font-weight-bold: var(--font-weight-700);
  --font-size-tiny: var(--font-size-50);
  --font-size-small: var(--font-size-100);
  --font-size-narrow: var(--font-size-150);
  --font-size-default: var(--font-size-200);
  --font-size-big: var(--font-size-300);
  --font-size-bigger: var(--font-size-400);
  --font-size-biggest: var(--font-size-500);
  --font-size-huge: var(--font-size-700);
  --font-family-default: var(--font-family);
  --bg-color-gray-softest: var(--color-gray-100);
  --bg-color-gray-soft: var(--color-gray-300);
  --bg-color-gray-darkest: var(--color-gray-700);
  --bg-color-hover-softest: var(--bg-color-gray-softest);
  --bg-color-disabled: var(--color-gray-300);
  --bg-color-accent-softest: var(--global-accent-color-softest);
  --bg-color-accent-soft: var(--global-accent-color-soft);
  --bg-color-accent: var(--global-accent-color);
  --bg-color-accent-active: var(--global-accent-color-active);
  --bg-color-feedback-success: var(--color-feedback-success-500);
  --bg-color-feedback-success-softest: var(--color-feedback-success-100);
  --bg-color-feedback-success-default: var(--color-feedback-success-500);
  --bg-color-feedback-success-dark: var(--color-feedback-success-600);
  --bg-color-feedback-success-hover: var(--bg-color-feedback-success-dark);
  --bg-color-feedback-warn-softest: var(--color-feedback-warn-100);
  --bg-color-feedback-error: var(--color-feedback-error-500);
  --bg-color-feedback-error-soft: var(--color-feedback-error-200);
  --bg-color-feedback-error-softest: var(--color-feedback-error-100);
  --bg-color-premium-softest: var(--color-feature-premium-100);
  --bg-color-premium-soft: var(--color-feature-premium-300);
  --bg-color-premium-default: var(--color-feature-premium-500);
  --bg-color-telegram-soft: var(--color-brand-telegram-100);
  --bg-color-telegram: var(--color-brand-telegram-500);
  --bg-color-telegram-active: var(--color-brand-telegram-600);
  --bd-color-softest: var(--color-gray-100);
  --bd-color-soft: var(--color-gray-200);
  --bd-color-default: var(--bd-color-soft);
  --bd-color-brand-soft: var(--global-accent-color-soft);
  --bd-color-accent-active: var(--global-accent-color-active);
  --bd-color-success: var(--color-feedback-success-500);
  --bd-color-success-softest: var(--color-feedback-success-100);
  --bd-color-error-softest: var(--color-feedback-error-200);
  --bd-color-error: var(--color-feedback-error-500);
  --bd-color-premium-softest: var(--color-feature-premium-100);
  --bd-color-premium: var(--color-feature-premium-300);
  --bd-color-telegram: var(--color-brand-telegram-500);
  --border-with-default: var(--border-with-200);
  --border-with-strong: var(--border-with-400);
  --bd-default: var(--bd-color-default) var(--border-with-default) solid;
  --bd-strong: var(--bd-color-default) var(--border-with-strong) solid;
  --bd-softest: var(--bd-color-softest) var(--border-with-default) solid;
  --bd-softest-strong: var(--bd-color-softest) var(--border-with-strong) solid;
  --box-shadow: var(--shadow-100);
  --box-shadow-heavy: var(--shadow-300);
  --text-shadow-heavy: var(--shadow-300);
  --border-radius-default: var(--border-radius-100);
  --border-radius-lg: var(--border-radius-200);
  --border-radius-xxl: var(--border-radius-600);
  --border-radius-full: 1000px;
  --motion-duration-default: var(--transition-duration-500);
  --motion-duration-fast: var(--transition-duration-200);
  --global-whatsapp-color--soft: var(--color-feedback-success-100);
  --global-whatsapp-color: var(--color-feedback-success-500);
  --global-whatsapp-color-active: var(--color-feedback-success-600);
  --active-user-color: var(--color-feedback-success-500);
  --body-bg-color: white;
  --body-font-color: var(--font-color-default);
  --body-font-family: var(--font-family-default);
  --body-font-weight: var(--font-weight-regular);
  --atoms-min-height-sm: 2rem;
  --atoms-min-height-default: 3rem;
  --atoms-min-height-lg: 3.75rem;
  --atoms-min-width-default: 7.5rem;
  --container-x-padding: var(--spacing-lg);
  --container-width-default: 1300px;
  --container-width-md: 1100px;
  --container-width-sm: 900px;
  --container-width-xs: 600px;
  --dialog-width-default: var(--container-width-xs);
  --dialog-width-sm: calc(var(--dialog-width-default) / 1.75);
}

:root {
  --grid-template-custom-size: unset;
  --grid-template-custom-gap: unset;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  line-height: 1.25;
}

ul, ol {
  list-style: none outside none;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
button {
  font-family: inherit;
  font-weight: inherit;
}
a:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

b {
  font-weight: var(--font-weight-bold);
}

p {
  margin: 0;
}

body {
  font-family: var(--body-font-family), sans-serif;
  font-weight: var(--body-font-weight);
  color: var(--body-font-color);
  background-color: var(--body-bg-color);
  line-height: 1.25;
  text-underline-offset: 4px;
  min-height: 100svh;
}
body:not(.p-refactor) {
  display: grid;
  grid-template: "header" auto "messages" auto "main" 1fr "footer" auto;
}
body > main {
  grid-area: main;
}

img {
  max-width: 100%;
}

figure {
  margin: 0;
}

:where(dialog) {
  position: fixed;
  border: none;
  padding: var(--spacing-md);
  color: var(--font-color-default);
  background-color: white;
}

::backdrop {
  --backdrop-bg-color: 50, 51, 51;
  backdrop-filter: blur(1.5px);
  background-color: rgba(var(--backdrop-bg-color), 0.8);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.material-symbols-rounded::selection {
  background-color: transparent;
}

.material-symbols-rounded,
.material-symbols-rounded-fill--hover {
  --icon-current-size: 24px;
  font-size: var(--icon-current-size);
  height: var(--icon-current-size);
  width: var(--icon-current-size);
  min-width: var(--icon-current-size);
  overflow: hidden;
  display: inline-block;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

.material-symbols-rounded-fill,
.material-symbols-rounded-fill--hover:hover {
  font-variation-settings: "FILL" 1;
}

.material-symbols-rounded--light {
  font-variation-settings: "wght" 300;
}

.material-symbols-rounded--sm {
  --icon-current-size: 20px;
}

.material-symbols-rounded--lg {
  --icon-current-size: 40px;
}

/* ITCSS LAYER: OBJECTS */
.o-inset {
  --o-inset-current-size: var(--spacing-md);
  padding: var(--o-inset-current-size);
}

.o-inset--xs {
  --o-inset-current-size: var(--spacing-xs);
}

.o-inset--lg {
  --o-inset-current-size: var(--spacing-lg);
}

.o-inset--xl {
  --o-inset-current-size: var(--spacing-xl);
}

.o-inset--xxl {
  --o-inset-current-size: var(--spacing-xxl);
}

.o-inset--squish {
  padding-top: calc(var(--o-inset-current-size) / 2);
  padding-bottom: calc(var(--o-inset-current-size) / 2);
}

.o-inset--stretch {
  padding-left: calc(var(--o-inset-current-size) / 2);
  padding-right: calc(var(--o-inset-current-size) / 2);
}

.o-inset--section {
  padding-left: 0;
  padding-right: 0;
}
.o-inset--section:has(.o-container) {
  display: grid;
}

.o-stack {
  display: grid;
  align-content: start;
  row-gap: var(--o-stack-current-size, var(--spacing-rem-md));
}
.o-stack--flex {
  display: flex;
  flex-direction: column;
}

.o-stack--xxs {
  --o-stack-current-size: var(--spacing-xxs);
}

.o-stack--xs {
  --o-stack-current-size: var(--spacing-xs);
}

.o-stack--sm {
  --o-stack-current-size: var(--spacing-sm);
}

.o-stack--md {
  --o-stack-current-size: var(--spacing-md);
}

.o-stack--lg {
  --o-stack-current-size: var(--spacing-lg);
}

.o-stack--xl {
  --o-stack-current-size: var(--spacing-xl);
}

.o-stack--xxl {
  --o-stack-current-size: var(--spacing-xxl);
}

.o-stack--xxxl {
  --o-stack-current-size: var(--spacing-xxxl);
}

.o-flex {
  min-width: 0;
  display: flex;
  gap: var(--spacing-rem-xs);
}

.o-inline-flex {
  display: inline-flex;
  gap: var(--spacing-rem-xs);
}

.o-flex--between-center {
  justify-content: space-between;
  align-items: center;
}

.o-flex--center-center {
  justify-content: center;
  align-items: center;
}

.o-flex--around-center {
  justify-content: space-around;
  align-items: center;
}

.o-flex--end-end {
  justify-content: end;
  align-items: end;
}

.o-flex--end-center {
  justify-content: end;
  align-items: center;
}

.o-flex--end-start {
  justify-content: end;
  align-items: start;
}

.o-flex--between-start {
  justify-content: space-between;
  align-items: flex-start;
}

.o-flex--between-end {
  justify-content: space-between;
  align-items: flex-end;
}

@media screen and (width >= 768px) {
  .o-flex--start-center\@sm {
    justify-content: start;
    align-items: center;
  }
}
.o-container {
  --container-width: var(--container-width-default);
  --container-padding: var(--container-x-padding);
  max-width: var(--container-width);
  padding: 0 var(--container-padding);
  width: 100%;
  place-self: start center;
  container: main-container/inline-size;
  position: relative;
}
.o-container--md {
  --container-width: var(--container-width-md);
}
.o-container--sm {
  --container-width: var(--container-width-sm);
}
.o-container--xs {
  --container-width: var(--container-width-xs);
}
.o-container--p-none-temporal {
  --container-padding: 0;
}

.o-sticky {
  top: 0;
  position: sticky;
  z-index: 2;
}
@media screen and (width < 768px) {
  .o-sticky\@sm-max {
    top: 0;
    position: sticky;
    z-index: 2;
  }
}
@media screen and (width >= 768px) {
  .o-sticky\@sm {
    top: 0;
    position: sticky;
    z-index: 2;
  }
}

.o-grid-auto-columns {
  --o-grid-column-gap: var(--custom-column-gap, var(--spacing-md));
  --o-grid-row-gap: var(--custom-row-gap, var(--spacing-md));
  grid-template-columns: repeat(auto-fit, minmax(var(--o-grid-column-min-width), 1fr));
  column-gap: var(--o-grid-column-gap);
  row-gap: var(--o-grid-row-gap);
  display: grid;
}

/* ITCSS LAYER: COMPONENTS */
.body-modal [role=dialog] {
  position: fixed !important;
  z-index: 1001 !important;
  padding: 20px;
}
.body-modal [role=dialog] .wrap {
  margin: 40px auto;
}

.qq-upload-photo-list {
  list-style-type: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-sm);
}
.qq-upload-photo-list:not(:has(li:nth-child(2))) {
  grid-template-columns: 200px;
}
.qq-upload-photo-list .is-main {
  justify-items: center;
  display: none;
}
.qq-upload-photo-list li {
  position: relative;
}
.qq-upload-photo-list li.resaltado:after {
  position: absolute;
  top: 0;
  height: 150px;
  right: 0;
  left: 0;
  content: "";
  background-color: var(--bg-color-feedback-error);
  opacity: 0.2;
  z-index: 1;
}
.qq-upload-photo-list li:first-child .order-up {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.qq-upload-photo-list li:first-child .set-as-main {
  display: none;
}
.qq-upload-photo-list li:first-child .is-main {
  display: grid;
}
.qq-upload-photo-list li:last-child .order-down {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

.qq-upload-list {
  list-style: none;
  margin: auto;
  background: #fff;
  padding: 10px;
  display: none;
  text-align: center;
  width: 100%;
}
.qq-upload-list li {
  color: var(--color-gray-600);
  line-height: 200%;
  display: inline !important;
}

.qq-upload-file,
.qq-upload-size,
.qq-upload-cancel {
  margin-right: 7px;
}

.qq-upload-cancel {
  display: inline-block;
  width: 13px;
  height: 16px;
  vertical-align: text-bottom;
}

.qq-upload-fail {
  color: #e03838;
  display: none;
}

.qq-upload-fail-text {
  color: #e03838;
  display: none;
}

.qq-upload-success {
  display: none;
}
.qq-upload-success::after {
  content: "✔️";
  color: green;
}

.qq-upload-size {
  color: var(--color-gray-500);
}

.qq-upload-file,
.qq-upload-size,
.qq-upload-fail,
.qq-upload-fail-text,
.qq-upload-success {
  display: none !important;
}

.qq-upload-drop-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  background: white;
  -webkit-transition: opacity 0.4s 0s ease;
  -moz-transition: opacity 0.4s 0s ease;
  -o-transition: opacity 0.4s 0s ease;
  transition: opacity 0.4s 0s ease;
}

.qq-upload-drop-area-active {
  opacity: 0.3;
}

.qq-uploaded-image {
  height: 150px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-default);
  border: 1px solid var(--bd-color-softest);
}
.resaltado .qq-uploaded-image {
  border: 2px solid var(--bd-color-error);
}

.invoices__filter-form {
  display: grid;
  gap: 1rem;
}
.invoices__actions-grid {
  border: 2px solid var(--color-gray-100);
  border-radius: 0.5rem;
  display: flex;
}
.invoices__actions-grid .invoices__search-widget {
  display: block;
  border: none;
  color: var(--color-gray-600);
  height: 2.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  padding: 0 10px;
}
.invoices__actions-grid .invoices__search-widget:hover {
  height: 2.5rem;
  background-color: transparent;
  border: none;
  border-right: 1px solid var(--color-gray-100);
}
.invoices__actions-grid select {
  margin: 0;
}
.invoices__actions-form-item {
  flex-grow: 1;
  position: relative;
  display: grid;
  border-right: 1px solid var(--color-gray-100);
}
.invoices__actions-form-item label {
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #ffffff;
  height: 16px;
  margin: 0 -4px;
  padding: 0 4px;
}
.invoices__sort-form-item {
  width: 120px;
}
.invoices__sort-form-item select {
  width: 100%;
}
.invoices__actions-select, .invoices__actions-select:hover {
  background-color: #a0a0a0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23a0a0a0'><path d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 8px;
}
.invoices__buttons {
  grid-column: -2/-1;
  width: auto;
  display: flex;
}
.invoices__form-button {
  font-family: monospace;
  font-size: var(--font-size-narrow);
  color: #fff;
  border: none;
  transition: 0.3s;
  padding: 12px;
  cursor: pointer;
  margin: 0;
}
.invoices__form-button:last-child {
  border-radius: 0 6px 6px 0;
}
.invoices__form-button--export {
  margin: -2px 0 -2px -2px;
  background-color: var(--bg-color-gray-softest);
  color: var(--font-color-default) !important;
}
.invoices__form-button--export:hover {
  background-color: var(--bg-color-gray-soft);
}
.invoices__form-button--submit {
  margin: -2px -2px -2px 0;
  background-color: var(--bg-color-accent);
}
.invoices__form-button--submit:hover {
  background-color: var(--bg-color-accent-active);
}
.invoices__paginator {
  display: grid;
  position: sticky;
  bottom: 0;
  margin-top: -11px;
  z-index: 10;
  text-align: center;
  background-color: white;
  border-top: 1px solid var(--color-gray-100);
  justify-items: center;
}
.invoices__subtitle {
  display: flex;
  justify-content: space-between;
}
.invoices__quarters {
  --gap: 1rem;
  --line-thickness: 2px;
  --bg-color: #ffffff;
  --border-radius: 0.5rem;
  --text-color: var(--color-gray-700, #605e5e);
  --text-secondary-color: var(--color-gray-600, #8f9097);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
  box-sizing: border-box;
}
.invoices__quarter {
  display: grid;
  grid-template-rows: 2.5rem 1fr;
  grid-template-columns: 1fr auto;
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  box-shadow: -1px 2px 5px 0 rgba(14, 21, 47, 0.15);
}
.invoices__invoice-type {
  grid-column: span 2;
  font-size: var(--font-size-default);
  font-weight: bold;
  color: var(--text-color);
  padding: 1rem;
}
.invoices__exchanges {
  grid-column: span 2;
  font-size: 0.8rem;
  color: var(--text-secondary-color);
  padding: 0 1rem 1rem;
}
.invoices__quarter-invoiced {
  grid-column: 1/1;
  padding: 1rem;
  box-sizing: border-box;
}
.invoices__quarter-number {
  grid-column: 2/2;
  padding: 1rem;
  box-sizing: border-box;
}
.invoices__label {
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
  color: var(--text-secondary-color);
}
.invoices__integer {
  font-size: var(--font-size-big);
  font-weight: bold;
  color: var(--text-color);
}
.invoices__currency {
  font-size: var(--font-size-big);
  font-weight: bold;
  color: var(--text-color);
  align-self: end;
  margin-left: 0.25rem;
}
.invoices__text-right {
  text-align: right;
}

.c-button {
  --current-color: var(--global-accent-color);
  --hover-color: var(--global-accent-color-active);
  --bg-color: var(--current-color);
  --bd-color: var(--current-color);
  --bd-color-hover: var(--hover-color);
  --font-color: white;
  --font-color-hover: var(--font-color);
  --button-font-size: var(--font-size-default);
  --min-width: var(--atoms-min-width-default);
  --min-height: var(--atoms-min-height-default);
  --padding-X: var(--spacing-lg);
  --border-radius: var(--border-radius-default);
  --svg-fill-color: var(--font-color);
  min-width: var(--min-width);
  height: var(--min-height);
  border-radius: var(--border-radius);
  border: var(--border-with-default) solid var(--bd-color);
  background-color: var(--bg-color);
  padding: 0 var(--padding-X);
  font-size: var(--button-font-size);
  transition: var(--motion-duration-default);
  color: var(--font-color);
  font-weight: var(--font-weight-medium);
  gap: var(--spacing-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
}
.c-button svg,
.c-button svg path {
  --fill-color: var(--svg-fill-color);
  fill: var(--svg-fill-color);
  transition: var(--motion-duration-default);
}
.c-button:hover, .c-button:focus, .c-button:focus-visible {
  --bg-color: var(--hover-color);
  --svg-fill-color: var(--font-color-hover);
  border-color: var(--bd-color-hover);
  color: var(--font-color-hover);
  outline: none;
}
.c-button:disabled {
  --current-color: var(--bg-color-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
.c-button--sm {
  --min-height: var(--atoms-min-height-sm);
  --padding-X: 10px;
  --min-width: initial;
  --button-font-size: var(--font-size-small);
}
.c-button--sm .material-symbols-rounded {
  font-size: var(--font-size-big);
  --icon-current-size: 20px;
}
.c-button--outline {
  --bg-color: transparent;
  --font-color: var(--current-color);
  --hover-color: var(--bg-color-accent-softest);
  --bd-color-hover: var(--bg-color-accent);
}
.c-button--secondary {
  --bg-color: transparent;
  --font-color: var(--current-color);
  --hover-color: var(--global-accent-color-softest);
  --font-color-hover: var(--current-color);
  --bd-color-hover: var(--current-color);
}
.c-button--softest {
  --current-color: var(--bg-color-gray-softest);
  --font-color: var(--font-color-default);
  --hover-color: var(--bg-color-gray-softest);
  --bd-color-hover: var(--bg-color-gray-soft);
}
.c-button--rounded {
  --border-radius: var(--border-radius-full);
}
.c-button--neutral {
  --font-color: var(--font-color-default);
  --font-color-hover: var(--font-color);
  --bg-color: transparent;
  --hover-color: var(--bg-color-gray-softest);
  --bd-color: transparent;
  --bd-color-hover: var(--bd-color);
}
.c-button--neutral:disabled {
  --font-color: var(--font-color-softest);
}
.c-button--destructive {
  --font-color-hover: var(--font-color-error) ;
}
.c-button--lg {
  --min-height: var(--atoms-min-height-lg);
  --padding-X: 2rem;
}
@media screen and (width >= 640px) {
  .c-button--md\@xs {
    --button-font-size: var(--font-size-default);
    --min-width: var(--atoms-min-width-default);
    --min-height: var(--atoms-min-height-default);
    --padding-X: var(--spacing-lg);
  }
}
@media screen and (width >= 1024px) {
  .c-button--lg\@md {
    --min-height: var(--atoms-min-height-lg);
    --padding-X: 2rem;
  }
}
.c-button--square {
  --padding-X: 0;
  --min-width: var(--min-height);
  width: var(--min-width);
}
@media screen and (width < 768px) {
  .c-button--square\@sm-max {
    --padding-X: 0;
    --min-width: var(--min-height);
    width: var(--min-width);
  }
}
.c-button--whatsapp {
  --current-color: var(--global-whatsapp-color);
  --hover-color: var(--global-whatsapp-color-active);
}
.c-button--whatsapp.c-button--secondary {
  --hover-color: var(--global-whatsapp-color--soft);
  --bd-color-hover: var(--global-whatsapp-color);
}
.c-button--telegram {
  --current-color: var(--bg-color-telegram);
  --hover-color: var(--bg-color-telegram-active);
}
.c-button--telegram.c-button--secondary {
  --hover-color: var(--bg-color-telegram-soft);
  --bd-color-hover: var(--bd-color-telegram);
}

.c-tag {
  --tag-bg-color: var(--bg-color-premium-default);
  --tag-font-color: white;
  --tag-bd-color: transparent;
  color: var(--tag-font-color);
  background-color: var(--tag-bg-color);
  border: 1px solid var(--tag-bd-color);
  padding: var(--spacing-rem-xxxs) var(--spacing-xs);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-small);
  display: inline-block;
}
.c-tag--soft {
  --tag-bg-color: white;
  --tag-font-color: var(--font-color-accent);
  --tag-bd-color: var(--bd-color-brand-soft);
}
.c-tag--dark\/80 {
  --tag-bg-color: rgba(0,0,0, .8);
  --tag-font-color: white;
  --tag-bd-color: transparent;
}

.c-switch {
  --switch-padding: var(--spacing-xxs);
  --switch-ball-size: var(--spacing-lg);
  --switch-ball-space: calc(var(--switch-ball-size) * 2);
  --switch-with: calc(var(--switch-ball-space) + calc(var(--switch-padding) * 2));
  --switch-transition: var(--motion-duration-fast);
  padding: var(--switch-padding);
  width: var(--switch-with);
  background-color: var(--bg-color-disabled);
  transition: var(--switch-transition);
  border-radius: var(--border-radius-full);
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.c-switch:has(input:checked) {
  background-color: var(--bg-color-feedback-success-default);
}
.c-switch:has(input:checked) .c-switch__ball {
  margin-left: var(--switch-ball-size);
}
.c-switch:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}
.c-switch input {
  position: absolute;
  height: 0;
  width: 0;
  border: 0;
  outline: none;
  text-indent: -9999em;
  opacity: 0;
  pointer-events: none;
}
.c-switch__ball {
  width: var(--switch-ball-size);
  transition: var(--switch-transition);
  border-radius: var(--border-radius-full);
  transition-timing-function: ease;
  margin-left: 0;
  display: block;
  content: "";
  aspect-ratio: 1/1;
  background-color: white;
}

.c-checkbox {
  --c-checkbox-no-checked-opacity: 1;
  --c-checkbox-checked-opacity: 0;
  display: block;
  position: relative;
  height: 1.5rem;
  aspect-ratio: 1/1;
}
.c-checkbox__icon {
  color: var(--font-color-soft);
  transition: var(--motion-duration-fast);
  position: absolute;
  z-index: 1;
  content: "";
  left: 0;
  top: 0;
}
.c-checkbox__icon--no-checked {
  opacity: var(--c-checkbox-no-checked-opacity);
}
.c-checkbox__icon--checked {
  color: var(--font-color-success);
  opacity: var(--c-checkbox-checked-opacity);
  z-index: 2;
}
.c-checkbox:has(input:checked) {
  --c-checkbox-no-checked-opacity: 0;
  --c-checkbox-checked-opacity: 1;
}
.c-checkbox input {
  position: absolute;
  height: 0;
  width: 0;
  border: 0;
  outline: none;
  text-indent: -9999em;
  opacity: 0;
  pointer-events: none;
}

.c-svg-container--sm svg {
  width: var(--font-size-bigger);
  height: var(--font-size-bigger);
}

.c-svg-container--lg svg {
  width: calc(var(--font-size-bigger) * 1.5);
  height: calc(var(--font-size-bigger) * 1.5);
}

.c-active-circle {
  --active-circle-size: 6px;
  display: inline-block;
  content: "";
  height: var(--active-circle-size);
  width: var(--active-circle-size);
  border-radius: 20px;
  background-color: var(--active-user-color);
}
.c-active-circle--lg {
  --active-circle-size: 10px;
}

.c-action-icon {
  --current-gap: var(--action-icon-gap, var(--spacing-xxs));
  display: inline-flex;
  gap: var(--current-gap);
  grid-template-columns: auto 1fr;
  align-items: center;
}
.c-action-icon:has(.c-checkbox) {
  align-items: flex-start;
}
.c-action-icon:is(button) {
  background-color: transparent;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: inherit;
}

.c-separator {
  --separator-width: var(--border-with-default);
  --separator-color: var(--bd-color-softest);
  display: block;
  height: var(--separator-width);
  background-color: var(--separator-color);
  border-radius: var(--border-radius-lg);
}
.c-separator--strong {
  --separator-width: var(--border-with-strong);
}
.c-separator--sm {
  width: 8rem;
  margin: 0 auto;
}

.c-arrow-hover {
  --menu-arrow-opacity: 1;
  --current-arrow-color: var(--c-arrow-hover-color, var(--font-color-softest));
}
.c-arrow-hover, .c-arrow-hover:hover {
  --menu-arrow-translate: 0;
}
@media screen and (width >= 768px) {
  .c-arrow-hover {
    --menu-arrow-translate: -8px;
    --menu-arrow-opacity: 0;
  }
  .c-arrow-hover:hover {
    --menu-arrow-opacity: 1;
  }
}
.c-arrow-hover__arrow {
  opacity: var(--menu-arrow-opacity);
  transform: translateX(var(--menu-arrow-translate));
  color: var(--current-arrow-color);
  transition: var(--motion-duration-default);
}

.c-tooltip {
  position: relative;
}
.c-tooltip::before, .c-tooltip::after {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  transition: var(--motion-duration-fast);
  opacity: 0;
}
.c-tooltip::before {
  content: attr(data-tooltip);
  top: calc(100% + var(--spacing-xxs) + 4px);
  background-color: var(--bg-color-gray-darkest);
  color: white;
  padding: var(--spacing-xxs);
  border-radius: var(--border-radius-default);
  white-space: nowrap;
  font-size: var(--font-size-small);
  line-height: 1;
}
.c-tooltip:hover::before, .c-tooltip:hover::after {
  opacity: 1;
}
.c-tooltip:hover::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  top: 100%;
  border-width: var(--spacing-xxs);
  border-style: solid;
  border-color: transparent transparent var(--bg-color-gray-darkest);
}

.c-field {
  --field-border-radius: var(--border-radius-default);
  --field-min-width: var(--atoms-min-width-default);
  --field-padding-x: var(--spacing-md);
  --field-padding-y: 0;
  --field-padding-left: var(--field-padding-x);
  --field-padding-right: var(--field-padding-x);
  --field-min-height: var(--atoms-min-height-default);
  --field-font-size: var(--font-size-default);
  border-radius: var(--field-border-radius);
  min-width: var(--field-min-width);
  padding: var(--field-padding-y) var(--field-padding-right) var(--field-padding-y) var(--field-padding-left);
  min-height: var(--field-min-height);
  font-size: var(--field-font-size);
  border: var(--bd-default);
  font-family: var(--font-family-default), sans-serif;
  color: var(--font-color-default);
  background-color: white;
}
.c-field-wrapper .c-field {
  --field-min-width: initial;
  position: relative;
  z-index: 1;
  width: 100%;
}
.c-field:is(textarea) {
  --field-padding-y: var(--spacing-xs);
}
.c-field--rounded {
  --field-border-radius: var(--border-radius-full);
  --field-padding-left: var(--spacing-lg);
}
.c-field--sm {
  --field-min-height: var(--atoms-min-height-sm);
  --field-font-size: var(--font-size-small);
}
.c-field:focus-visible {
  border-color: var(--global-accent-color);
  outline-color: var(--global-accent-color);
}
.c-field-wrapper:has(.c-field-wrapper__icon--left) .c-field {
  --field-padding-left: var(--field-wrapper-icon-push);
}
.c-field-wrapper:has(.c-field-wrapper__icon--right) .c-field {
  --field-padding-right: var(--field-wrapper-icon-push);
  -webkit-appearance: none;
}

.c-field-wrapper {
  --field-wrapper-icon-push: var(--atoms-min-height-default);
  --field-wrapper-width-icons: var(--field-wrapper-icon-push);
  --field-wrapper-min-width: var(--atoms-min-width-default);
  min-width: var(--field-wrapper-min-width);
  display: grid;
  font-size: var(--font-size-small);
  gap: var(--spacing-xxs);
}
.c-field-wrapper__main {
  display: block;
  position: relative;
}
.c-field-wrapper__icon {
  width: var(--field-wrapper-width-icons);
  pointer-events: none;
  font-size: var(--font-size-big);
  color: var(--font-color-soft);
  text-align: center;
  position: absolute;
  height: 1.5rem;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}
.c-field-wrapper__icon--left {
  left: 0;
}
.c-field-wrapper__icon--right {
  right: 0;
}
.c-field-wrapper:has(.c-field--sm) {
  --field-wrapper-icon-push: var(--atoms-min-height-sm);
}
.c-field-wrapper:has(.c-field--rounded) {
  --field-wrapper-width-icons: calc(var(--field-wrapper-icon-push) * 1.25);
}

.c-field-group {
  display: flex;
}
.c-field-group .c-field-wrapper:not(:last-child) .c-field {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.c-field-group .c-field-wrapper:not(:first-child) .c-field {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left: none;
}

.c-paginator {
  gap: var(--spacing-xs);
}
.c-paginator__separator {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
}
.c-paginator__separator span {
  width: 6px;
  height: 6px;
  border-radius: 16px;
  background-color: var(--bg-color-gray-soft);
}
@container main-container (width < 700px) {
  .c-paginator {
    gap: var(--spacing-xxs);
  }
  .c-paginator__hidden-mobile {
    display: none;
  }
  .c-paginator__sm-button {
    --min-height: var(--atoms-min-height-sm);
    --padding-X: 10px;
    --button-font-size: var(--font-size-small);
  }
}
@container main-container (width >= 700px) {
  .c-paginator__show-mobile {
    display: none;
  }
}

.c-footer {
  grid-area: footer;
  background-color: var(--bg-color-gray-softest);
  text-align: center;
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-xxxl);
  color: var(--font-color-soft);
  justify-items: center;
}
.c-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  justify-content: center;
  font-weight: var(--font-weight-regular);
}
.c-footer__link {
  transition: var(--motion-duration-default);
}
.c-footer__link.active, .c-footer__link:hover {
  color: var(--font-color-default);
}
.c-footer svg {
  width: 250px;
}
.c-footer img {
  mix-blend-mode: multiply;
}
@media screen and (width >= 768px) {
  .p-user .c-footer {
    display: none;
  }
}

.c-header {
  --header-top-sticky-position: 0;
  --header-border-bottom: var(--bd-default);
  --header-box-shadow: none;
  --header-link-min-height: 4rem;
  --header-link-min-width: 0;
  --header-link-bg-color: transparent;
  --header-link-bg-color-hover: var(--bg-color-gray-softest);
  --header-link-x-padding: var(--spacing-lg);
  --header-link-gap: var(--spacing-xs);
  --action-icon-gap: var(--header-link-gap);
  border-bottom: var(--header-border-bottom);
  box-shadow: var(--header-box-shadow);
  column-gap: var(--spacing-md);
  background-color: white;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  position: relative;
  z-index: 100;
}
.c-header__brand {
  padding-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}
.c-header__menu {
  display: flex;
  justify-content: flex-end;
}
.c-hidden-aside .c-header {
  grid-template-columns: auto 1fr;
}
body.p-home .c-header {
  position: sticky;
  top: var(--header-top-sticky-position);
}
.c-header__link {
  min-height: var(--header-link-min-height);
  min-width: var(--header-link-min-width);
  background-color: var(--header-link-bg-color);
  padding: 0 var(--header-link-x-padding);
  transition: var(--motion-duration-default);
  border: none;
  border-left: var(--bd-default);
  gap: var(--header-link-gap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
}
.c-header__link:hover, .c-header__link:focus, .c-header__link:focus-visible {
  background-color: var(--header-link-bg-color-hover);
}
.c-header__link--cta {
  --header-link-bg-color: var(--bg-color-feedback-success-default);
  --header-link-bg-color-hover: var(--bg-color-feedback-success-hover);
  color: white;
  border: none;
}
.c-header__link--private {
  --header-link-bg-color: var(--bg-color-feedback-success-dark);
  --header-link-bg-color-hover: var(--bg-color-feedback-success-dark);
  color: white;
  border: none;
  position: relative;
}
.c-header__link--square {
  --header-link-min-width: var(--header-link-min-height);
  --header-link-x-padding: 0;
}
@media screen and (width >= 768px) {
  .c-header__link--mobile {
    display: none;
  }
}
@media screen and (width < 768px) {
  .c-header__link--desktop {
    display: none;
  }
}
.c-header__user-menu {
  display: none;
  position: absolute;
  color: var(--body-font-color);
  top: 100%;
  right: 0;
}
@media screen and (width < 640px) {
  .c-header {
    --header-top-sticky-position: -4rem;
    grid-area: header;
    grid-template-columns: auto 1fr;
    grid-template: "brand menu" "select select";
  }
  .c-header__brand {
    padding-left: var(--spacing-sm);
    grid-area: brand;
    margin-right: 0;
  }
  .c-header__menu {
    grid-area: menu;
  }
  .c-header__select {
    border-top: var(--bd-default);
    padding: var(--spacing-sm) var(--spacing-lg);
    grid-area: select;
    background-color: #fff;
  }
  body:not(.p-home) .c-header__select {
    display: none;
  }
}
@media screen and (width >= 768px) {
  .c-header {
    --header-border-bottom: none;
    --header-box-shadow: var(--box-shadow);
  }
  .p-user .c-header {
    display: none;
  }
  .c-header__link--private:hover .c-header__user-menu {
    display: grid;
  }
}
@media screen and (width >= 1024px) {
  .c-header {
    --header-link-min-width: 8rem;
    --header-link-x-padding: var(--spacing-lg);
  }
}
@media screen and (width >= 1280px) {
  .c-header {
    --header-link-min-width: 12rem;
    --header-link-x-padding: var(--spacing-xl);
    --header-link-gap: var(--spacing-sm);
  }
}

.c-menu {
  --menu-link-active-font-color: var(--global-accent-color-active);
  --menu-link-active-bg-color: var(--bg-color-accent-softest);
  --c-arrow-hover-color: var(--font-color-softest);
}
@media screen and (width >= 768px) {
  .c-menu {
    --menu-arrow-opacity: 0;
    --menu-arrow-translate: -8px;
    --c-arrow-hover-color: var(--global-accent-color-soft);
  }
}
.c-menu__section:not(:first-of-type) {
  border-top: var(--bd-softest-strong);
  padding-top: var(--spacing-sm);
}
.c-menu__link {
  transition: var(--transition-duration-500);
}
.c-menu__link--secondary {
  color: var(--font-color-soft);
}
.c-menu__link--active {
  --c-arrow-hover-color: var(--global-accent-color-soft);
  color: var(--menu-link-active-font-color);
  background-color: var(--menu-link-active-bg-color);
}
main .c-menu__link--header {
  display: none;
}
@media screen and (width >= 768px) {
  .c-menu__link:hover {
    --menu-arrow-opacity: 1;
    --menu-arrow-translate: 0;
    color: var(--menu-link-active-font-color);
    background-color: var(--menu-link-active-bg-color);
  }
}

.c-admin-menu {
  display: none;
  background-color: var(--bg-color-gray-softest);
  min-height: var(--atoms-min-height-default);
}
.c-admin-menu__item {
  padding: 0 var(--spacing-sm);
  display: flex;
  align-items: center;
}
@media screen and (width >= 768px) {
  .c-admin-menu {
    display: grid;
  }
}

.c-table {
  container-type: inline-size;
  --table-cell-padding: var(--spacing-md) var(--spacing-xs);
}
.c-table th,
.c-table td {
  border-collapse: collapse;
  padding: var(--table-cell-padding);
}
.c-table__details-cell br + br,
.c-table__details-cell br:last-child {
  display: none;
}
.c-table__row:nth-child(2n) {
  background-color: var(--color-gray-100);
}
@container main-container (width < 600px) {
  .c-table {
    --table-cell-padding: var(--spacing-xxs) var(--spacing-md);
    border: var(--bd-softest);
  }
  .c-table__header {
    display: none;
  }
  .c-table td {
    display: grid;
    grid-template-columns: 15ch 1fr;
  }
  .c-table td:before {
    color: var(--font-color-default);
    font-weight: var(--font-weight-bold);
    content: attr(data-cell) ": ";
  }
  .c-table td:first-child {
    padding-top: var(--spacing-lg);
  }
  .c-table td:last-child {
    padding-bottom: var(--spacing-lg);
  }
  .c-table__row:last-child {
    border: none !important;
  }
}
@container main-container (width > 800px) {
  .c-table {
    --table-cell-padding: var(--spacing-lg) var(--spacing-md);
  }
}

.c-dialog {
  box-shadow: var(--box-shadow-heavy);
  width: calc(100% - var(--spacing-xl));
  max-width: var(--dialog-width-default);
  border-radius: var(--border-radius-default);
}
.c-dialog:focus-visible {
  outline: none;
}
.c-dialog--sm {
  max-width: var(--dialog-width-sm);
}
.c-dialog__close {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
}

.c-dialog-ticket {
  padding: 0;
}
.c-dialog-ticket .filepond--item {
  width: 65px;
}
.c-dialog-ticket__wizard {
  display: grid;
  min-height: 25rem;
  grid-template-rows: auto 1fr;
}
@media screen and (width >= 768px) {
  .c-dialog-ticket__wizard {
    grid-template-rows: 1fr;
    grid-template-columns: auto 1fr;
  }
}
.c-dialog-ticket__wizard--loading {
  grid-template: auto/auto !important;
  place-content: center;
  padding-bottom: var(--spacing-xl);
}
.c-dialog-ticket__steps {
  background-color: var(--bg-color-accent);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: small;
  padding: var(--spacing-md);
}
.c-dialog-ticket__steps__separator {
  height: 2px;
  width: 0.5rem;
  background: var(--bg-color-gray-darkest);
  opacity: 0.5;
  border-radius: 1rem;
}
@media screen and (width >= 768px) {
  .c-dialog-ticket__steps {
    padding: var(--spacing-xl) var(--spacing-md);
    display: grid;
    width: auto;
    align-content: start;
  }
  .c-dialog-ticket__steps__separator {
    width: 2px;
    height: 0.5rem;
    margin-left: 9px;
  }
}

.c-filters {
  --filters-display: var(--custom-filters-display, grid);
  display: var(--filters-display);
}

.hidden-c-filters {
  --custom-filters-display: none;
}

.c-flyout-menu {
  position: absolute;
  top: 100%;
  background: white;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
  right: 0;
  min-width: 15rem;
  display: grid;
  border: 1px solid var(--bd-color-default);
}
.c-flyout-menu__item {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-lg);
  transition-duration: var(--motion-duration-default);
}
.c-flyout-menu__item:hover {
  background-color: var(--bg-color-hover-softest);
}
.c-flyout-menu__wrapper {
  position: relative;
}

.c-card {
  --card-border-radius: var(--custom-card-border-radius, var(--border-radius-default));
  --card-border-right-display: var(--custom-card-border-right-display, none);
  --card-border-bottom-display: var(--custom-card-border-bottom-display, none);
  --card-before-bg: rgba(0, 0, 0, .1);
  container: card/inline-size;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  aspect-ratio: 3/5;
  display: grid;
}
.c-card__main {
  --card-main-padding: 0;
  --card-content-padding: var(--spacing-xs);
  --card-title-font-size: var(--font-size-small);
  padding: var(--card-main-padding);
  display: grid;
  overflow: hidden;
  position: relative;
}
@container card (width > 190px) {
  .c-card__main {
    --card-content-padding: var(--spacing-xs);
    --card-title-font-size: var(--font-size-default);
  }
}
@container card (width >= 240px) {
  .c-card__main {
    --card-content-padding: var(--spacing-sm);
    --card-title-font-size: var(--font-size-big);
  }
}
.c-card__content {
  padding: var(--card-content-padding);
  color: var(--font-color-overlay);
  position: relative;
  z-index: 3;
  display: grid;
  justify-content: space-between;
  align-content: space-between;
  grid-template-columns: 1fr;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.6) 93%);
}
.c-card__content:after, .c-card__content:before {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 2;
}
.c-card__content:before {
  display: var(--card-border-right-display);
  width: 1px;
  top: 0;
  right: 0;
}
.c-card__content:after {
  display: var(--card-border-bottom-display);
  left: 0;
  height: 1px;
  width: 100%;
}
.c-card figure {
  --card-content-position: 0;
  position: absolute;
  top: var(--card-content-position);
  bottom: var(--card-content-position);
  left: var(--card-content-position);
  right: var(--card-content-position);
  z-index: 1;
}
@container card (width < 150px) {
  .c-card figure {
    --card-content-position: 0;
  }
}
.c-card figure:before {
  background-color: var(--card-before-bg);
  pointer-events: none;
  content: "";
  position: absolute;
  transition: var(--motion-duration-default);
  top: 0;
  bottom: 0;
  width: 100%;
  display: block;
  left: 0;
  z-index: 2;
}
.c-card:hover {
  --card-before-bg: transparent;
}
.c-card__title {
  font-size: var(--card-title-font-size);
}
.c-card__data {
  display: grid;
  gap: var(--spacing-xxxs);
}
@container card (width <= 190px) {
  .c-card__hidden-sm {
    display: none;
  }
}
@container card (width < 150px) {
  .c-card__hidden-xs {
    display: none;
  }
}
@container card (width >= 150px) {
  .c-card__max-hidden-xs {
    display: none;
  }
}
.c-card--featured {
  background-color: var(--bd-color-premium);
}
.c-card--featured .c-card__data {
  background-color: rgba(187, 20, 180, 0.3);
  margin: calc(var(--card-content-padding) * -1);
  padding: var(--card-content-padding);
}
@container card (width > 150px) {
  .c-card--featured .c-card__main {
    --card-main-padding: 6px;
  }
}
@container card (width > 150px) {
  .c-premium-cards .c-card--featured .c-card__main {
    --card-main-padding: 0;
  }
}
@container card (width > 150px) {
  .c-card--featured figure {
    --card-content-position: var(--card-main-padding);
  }
}

.c-card-grid {
  --card-grid-min-width-item: 110px;
  --card-grid-max-width-item: 1fr;
  --card-grid-justify-content: center;
  --card-grid-margin-x: calc(var(--container-x-padding) * -1);
  --card-grid-gap: 0;
  --custom-card-border-radius: 0;
  --custom-card-border-right-display: block;
  --custom-card-border-bottom-display: block;
  display: grid;
  gap: var(--card-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--card-grid-min-width-item), var(--card-grid-max-width-item)));
  justify-content: var(--card-grid-justify-content);
  margin-left: var(--card-grid-margin-x);
  margin-right: var(--card-grid-margin-x);
}
@container main-container (width > 500px) {
  .c-card-grid {
    --card-grid-min-width-item: 150px;
    --card-grid-justify-content: start;
    --custom-card-border-right-display: none;
    --custom-card-border-bottom-display: none;
    --card-grid-margin-x: 0;
    --card-grid-gap: var(--spacing-xxs);
    --custom-card-border-radius: var(--border-radius-default);
  }
}
@container main-container (width > 750px) {
  .c-card-grid:not(:has(.c-card:nth-child(4))) {
    --card-grid-max-width-item: 230px;
  }
}
@container main-container (width > 900px) {
  .c-card-grid {
    --card-grid-min-width-item: 190px;
    --card-grid-gap: var(--spacing-xs);
  }
}

.c-premium-cards {
  --premium-cards-min-width-item: 150px;
  --premium-cards-max-width-item: 1fr;
  --custom-card-border-radius: 0;
  --custom-card-border-right-display: block;
  --custom-card-border-bottom-display: block;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--premium-cards-min-width-item), var(--premium-cards-max-width-item)));
  scrollbar-color: var(--bg-color-premium-soft) transparent;
  scrollbar-width: thin;
}
@media screen and (width >= 768px) {
  .c-premium-cards {
    --custom-card-border-bottom-display: none;
    --premium-cards-min-width-item: 240px;
    --premium-cards-max-width-item: 240px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    min-width: 0;
    gap: var(--spacing-xs);
    max-width: calc(100svw - var(--spacing-xxl));
    position: relative;
    padding-bottom: var(--spacing-sm);
  }
  .c-premium-cards__wrapper {
    display: grid;
    place-content: center;
  }
  .c-premium-cards .c-card {
    min-width: var(--premium-cards-min-width-item);
    flex-basis: var(--premium-cards-min-width-item);
    border-radius: var(--border-with-strong);
  }
}

.c-list-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-lg);
}
.c-list-item figure {
  max-height: 200px;
  width: 150px;
  overflow: hidden;
  aspect-ratio: 4/5;
  border-radius: var(--border-radius-lg);
}
.c-list-item__content {
  align-content: center;
  padding-bottom: var(--spacing-md);
}

.c-listing {
  display: grid;
  padding: var(--spacing-xl) 0;
  border-bottom: var(--bd-softest-strong);
  grid-template-areas: "image buttons" "main main";
  grid-template-columns: 160px 1fr;
}
.c-listing__wrapper {
  container: listing/inline-size;
}
.c-listing__image {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  grid-area: image;
  min-height: 250px;
}
.c-listing__buttons {
  grid-area: buttons;
}
.c-listing__buttons, .c-listing__buttons__list {
  display: flex;
}
.c-listing__main {
  grid-area: main;
  padding-top: var(--spacing-lg);
}
.c-listing__visible-md {
  display: none;
}
.c-listing__options {
  position: absolute;
  right: 0;
  top: 0;
}
@container listing (width <= 640px) {
  .c-listing__buttons {
    flex-direction: column-reverse;
    margin-right: calc(var(--spacing-lg) * -1);
  }
  .c-listing__buttons__item {
    padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md);
  }
  .c-listing__buttons__list {
    flex-direction: column;
  }
  .c-listing__buttons__item:not(:last-child) {
    border-bottom: var(--bd-softest);
  }
  .c-listing__buttons__list:not(:first-child) {
    border-bottom: var(--bd-softest);
  }
}
@container listing (width > 640px) {
  .c-listing {
    grid-template-columns: 135px 1fr;
    padding: var(--spacing-lg) 0;
    gap: var(--spacing-lg);
    grid-template-areas: "image main" "image buttons";
  }
  .c-listing__title {
    font-size: var(--font-size-big);
  }
  .c-listing__image {
    min-height: 180px;
  }
  .c-listing__buttons {
    justify-content: space-between;
    align-items: center;
  }
  .c-listing__buttons, .c-listing__buttons__list {
    gap: var(--spacing-md);
  }
}
@container listing (width > 640px) and (width < 850px) {
  .c-listing__main {
    padding-right: var(--atoms-min-height-lg);
  }
  .c-listing__hidden-md {
    display: none;
  }
  .c-listing__visible-md {
    display: inline-flex;
  }
}

.c-hidden-aside {
  --hidden-aside-max-width: 350px;
  --hidden-aside-opacity: 0;
  --hidden-aside-translate-x: 100%;
  content: " ";
  z-index: 1049;
  display: block;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  max-width: var(--hidden-aside-max-width);
  opacity: var(--hidden-aside-opacity);
  transform: translateX(var(--hidden-aside-translate-x));
  transition: var(--motion-duration-default);
  background-color: white;
  overflow-x: hidden;
}
.c-hidden-aside--opened {
  --hidden-aside-opacity: 1 !important;
  --hidden-aside-translate-x: 0 !important;
}
.c-hidden-aside\@sm {
  display: none;
}
@media screen and (width < 768px) {
  .c-hidden-aside\@sm {
    --hidden-aside-max-width: 350px;
    --hidden-aside-opacity: 0;
    --hidden-aside-translate-x: 100%;
    content: " ";
    z-index: 1049;
    display: block;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    max-width: var(--hidden-aside-max-width);
    opacity: var(--hidden-aside-opacity);
    transform: translateX(var(--hidden-aside-translate-x));
    transition: var(--motion-duration-default);
    background-color: white;
    overflow-x: hidden;
  }
  .c-hidden-aside\@sm--opened {
    --hidden-aside-opacity: 1 !important;
    --hidden-aside-translate-x: 0 !important;
  }
}
@media screen and (width < 640px) {
  .c-hidden-aside {
    --hidden-aside-max-width: 100%;
  }
}
.c-hidden-aside__bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  display: none;
  z-index: 1048;
  transition: var(--motion-duration-default);
  background-color: transparent;
}
.c-hidden-aside__bg--opened {
  display: block;
  background-color: rgba(0, 0, 0, 0.2);
}
@media screen and (width >= 768px) {
  .c-hidden-aside__bg\@sm {
    display: none !important;
  }
}

@media screen and (width < 1024px) {
  .c-collapse-element\@md-max {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--motion-duration-default);
  }
  .c-collapse-element\@md-max.is-collapsed {
    grid-template-rows: 0fr;
  }
  .c-collapse-element\@md-max > * {
    overflow: hidden;
  }
}
.c-profile-details {
  --profile-details-cols: 2;
  gap: var(--spacing-md);
  display: grid;
  grid-template-columns: repeat(var(--profile-details-cols), 1fr);
}
.c-profile-details__item-lg {
  grid-column: 1/-1;
}

.c-profile-container {
  container: profile-container/inline-size;
  display: flex;
  gap: var(--spacing-xl);
  flex-direction: column-reverse;
}
@media screen and (width >= 768px) {
  .c-profile-container {
    display: grid;
    grid-template-columns: 1fr auto;
  }
}

.c-profile-images {
  display: grid;
  gap: var(--spacing-xxs);
  width: 100%;
}
@media screen and (width >= 640px) {
  .c-profile-images {
    width: 400px;
  }
}
.c-profile-images img {
  cursor: pointer;
}
.c-profile-images__main {
  width: 100%;
  height: 500px;
}
.c-profile-images__main-wrapper {
  position: relative;
  overflow: hidden;
}
.c-profile-images__main-wrapper:hover .c-profile-images__open-dialog {
  top: 1rem;
}
.c-profile-images__open-dialog {
  position: absolute;
  z-index: 2;
  left: 50%;
  transition: var(--motion-duration-default);
  transform: translateX(-50%);
  top: -2rem;
  pointer-events: none;
}
.c-profile-images__slide--mini {
  aspect-ratio: 1/1;
  border-radius: 2px;
  background-color: #fff;
}
.c-profile-images__dialog .c-profile-images__slide--mini {
  background-color: #000;
}
.c-profile-images__slide--mini img {
  transition-duration: 0.15s;
}
.c-profile-images__slide--mini:hover img {
  opacity: 0.5;
}
.c-profile-images__slide--mini.swiper-slide-thumb-active {
  pointer-events: none;
  border: 2px solid var(--bd-color-accent-active);
  border-radius: 4px;
}
.c-profile-images__slide--mini.swiper-slide-thumb-active img {
  opacity: 0.3;
}
.c-profile-images__arrows {
  position: relative;
  width: 100%;
}
.c-profile-images__arrow {
  background-color: rgba(255, 255, 255, 0.9);
  position: absolute;
  z-index: 2;
  transition-duration: var(--motion-duration-default);
  color: var(--font-color-soft);
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 400px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-content: center;
}
.c-profile-images__arrow:hover {
  color: var(--font-color-default);
  background-color: white;
}
.c-profile-images__arrow--disabled {
  opacity: 0;
  pointer-events: none;
}
.c-profile-images__arrow--prev {
  left: -1.25rem;
  padding-left: var(--spacing-xs);
}
.c-profile-images__arrow--next {
  right: -1.25rem;
}
.c-profile-images__dialog {
  --profile-dialog-container-padding: 1rem;
  --profile-dialog-container-gap: 1rem;
  --profile-dialog-thumbs-height: 5rem;
  --profile-dialog-main-height-rest:
          calc(
                  calc(var(--profile-dialog-container-padding) * 2)
                  + var(--profile-dialog-container-gap)
                  + var(--profile-dialog-thumbs-height));
  --profile-dialog-main-height: calc(100vh - var(--profile-dialog-main-height-rest));
}
@media screen and (width >= 768px) {
  .c-profile-images__dialog {
    --profile-dialog-thumbs-height: 10rem;
    --profile-dialog-main-height-rest: 13rem;
  }
}
.c-profile-images__dialog {
  border: none;
  background-color: transparent;
  margin: 0 auto;
  width: 100%;
  max-width: var(--container-width-default);
  padding: 0;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.c-profile-images__dialog--mobile {
  overflow-y: auto;
}
.c-profile-images__dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
  filter: blur(1px);
}
.c-profile-images__dialog__container {
  padding: var(--profile-dialog-container-padding) calc(var(--profile-dialog-container-padding) / 2);
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}
.c-profile-images__dialog__main {
  height: var(--profile-dialog-main-height);
  width: 100%;
}
.c-profile-images__dialog__main__slide {
  display: grid;
  place-content: center;
}
.c-profile-images__dialog__main__slide img {
  max-height: var(--profile-dialog-main-height);
}
.c-profile-images__dialog__thumbs {
  height: var(--profile-dialog-thumbs-height);
}
.c-profile-images__dialog__thumbs .c-profile-images__slide--mini {
  width: var(--profile-dialog-thumbs-height);
}
.c-profile-images__dialog__thumbs {
  width: 100%;
  position: relative;
  z-index: 1;
}
.c-profile-images__dialog__close {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-lg);
  z-index: 10;
}

.c-profile-mobile-chat {
  position: fixed;
  z-index: 100;
  bottom: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
}
.c-profile-mobile-chat .c-button {
  --padding-X: var(--spacing-sm);
  --button-font-size: var(--font-size-narrow);
}

.c-up-post-options {
  --o-grid-column-min-width: 15ch;
  --custom-column-gap: var(--spacing-xs);
  --custom-row-gap: var(--spacing-xs);
}
@container main-container (width > 500px) {
  .c-up-post-options {
    --o-grid-column-min-width: 20ch;
    --custom-column-gap: var(--spacing-sm);
    --custom-row-gap: var(--spacing-sm);
  }
  .c-up-post-options--max-3cols {
    --o-grid-column-min-width: 220px;
  }
}
@container main-container (width > 900px) {
  .c-up-post-options {
    --o-grid-column-min-width: 25ch;
    --custom-column-gap: var(--spacing-md);
    --custom-row-gap: var(--spacing-md);
  }
}
.c-up-post-options__item {
  --item-border-color: var(--bd-color-premium-softest);
  --item-bg-color: transparent;
  font-size: var(--font-size-default);
  border: var(--item-border-color) var(--border-with-strong) solid;
  background-color: var(--item-bg-color);
  transition: background-color var(--motion-duration-default);
  border-radius: var(--border-radius-default);
  cursor: pointer;
}
.c-up-post-options__item input {
  position: absolute;
  height: 0;
  width: 0;
  border: 0;
  outline: none;
  text-indent: -9999em;
  opacity: 0;
  pointer-events: none;
}
.c-up-post-options__item:not(:has(input:checked)):hover {
  --item-bg-color: var(--bg-color-premium-softest);
}
.c-up-post-options__item:has(input:checked) {
  --item-border-color: transparent;
  --item-bg-color: var(--bg-color-feedback-success-default);
}
.c-up-post-options__item:has(input:checked), .c-up-post-options__item:has(input:checked) * {
  color: white;
}

.c-steps {
  color: var(--font-color-softest);
  white-space: nowrap;
  overflow: auto;
}
.c-steps, .c-steps > div {
  display: flex;
  align-items: center;
}
.c-steps__current {
  font-weight: var(--font-weight-bold);
  color: var(--font-color-success);
}
.c-steps__previous {
  color: var(--font-color-default);
}
.c-steps__previous .material-symbols-rounded {
  color: var(--font-color-softest);
}

/* ITCSS LAYER: COMPONENTS */
.p-user {
  --p-user-columns: 480px auto;
  --p-user-box-padding: var(--spacing-xl);
  --p-user-hero-X-padding: var(--spacing-xxl);
  --p-user-hero-title-scale: 1;
}
.p-user__box {
  padding: var(--p-user-box-padding);
  background-color: white;
}
.p-user__hero {
  padding: 0 var(--p-user-hero-X-padding) 10vh;
  display: none;
  align-content: end;
  position: relative;
}
.p-user__hero__title {
  font-size: calc(var(--font-size-huge) * var(--p-user-hero-title-scale));
}
.p-user__bg {
  content: " ";
  z-index: -1;
  display: grid;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  --p-user-bg-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  grid-template-columns: var(--p-user-bg-template-columns);
}
@container (width < 1190px) {
  .p-user__bg {
    --p-user-bg-template-columns: repeat(7, 1fr) ;
  }
}
.p-user__bg:before {
  content: " ";
  z-index: 30;
  display: block;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}
.p-user__bg__column {
  animation: column-even 130s infinite alternate linear;
  position: relative;
  z-index: 10;
}
.p-user__bg__column:is(:nth-child(2n)) {
  animation-name: column-odd;
}
.p-user__bg__column:is(:nth-child(2)) {
  z-index: 9;
}
.p-user__bg__column:is(:nth-child(3)) {
  z-index: 8;
}
.p-user__bg__column:is(:nth-child(4)) {
  z-index: 7;
}
.p-user__bg__column:is(:nth-child(5)) {
  z-index: 6;
}
.p-user__bg__column:is(:nth-child(6)) {
  z-index: 5;
}
.p-user__bg__column:is(:nth-child(7)) {
  z-index: 4;
}
.p-user__bg__item {
  overflow: hidden;
  aspect-ratio: 3/5;
}
@media screen and (width >= 640px) {
  .p-user__box {
    grid-template-columns: 400px;
    justify-content: center;
  }
}
@media screen and (width >= 768px) {
  .p-user {
    --p-user-box-padding: var(--spacing-xl);
  }
  .p-user__main {
    display: grid;
    grid-template-columns: var(--p-user-columns);
    max-height: 100vh;
    overflow: hidden;
  }
  .p-user__box {
    overflow: auto;
    box-shadow: var(--box-shadow-heavy);
  }
  .p-user__hero {
    display: grid;
  }
}
@media screen and (width >= 1280px) {
  .p-user {
    --p-user-columns: 2fr 3fr;
    --p-user-hero-X-padding: 120px;
    --p-user-hero-title-scale: 1.5;
  }
}
@media screen and (width >= 1536px) {
  .p-user {
    --p-user-columns: 1fr 2fr;
    --p-user-hero-title-scale: 2;
  }
}

@keyframes column-even {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(100vh - 100%));
  }
}
@keyframes column-odd {
  0% {
    transform: translateY(calc(100vh - 100%));
  }
  100% {
    transform: translateY(0);
  }
}
.p-admin {
  --p-admin-content-border-left: none;
  --p-admin-content-x-padding: var(--spacing-lg);
  --p-admin-content-y-padding: var(--spacing-xl);
  --p-admin-content-padding: var(--p-admin-content-y-padding) var(--p-admin-content-x-padding) var(--spacing-xxxl);
  --p-admin-featured-margin: calc(var(--p-admin-content-y-padding) * -1) calc(var(--p-admin-content-x-padding) * -1) 0;
}
.p-admin__aside {
  align-self: start;
  padding-bottom: var(--spacing-xxxl);
}
.p-admin__content {
  border-left: var(--p-admin-content-border-left);
  padding: var(--p-admin-content-padding);
  display: grid;
  gap: var(--spacing-xl);
  align-content: start;
  container: main-container/inline-size;
}
.p-admin__featured {
  margin: var(--p-admin-featured-margin);
}
@media screen and (width < 768px) {
  .p-admin .c-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}
@media screen and (width >= 768px) {
  .p-admin {
    --p-admin-content-x-padding: var(--spacing-xl);
    --p-admin-content-border-left: var(--bd-softest-strong);
    --p-admin-featured-margin: 0;
  }
  .p-admin__main {
    display: grid;
    grid-template-columns: 15rem 1fr;
    place-self: stretch center;
    width: 100%;
    max-width: var(--container-width-md);
  }
}

.p-details > main {
  position: relative;
  z-index: 1;
}
.p-details__title {
  font-size: var(--font-size-big);
}
@media screen and (width >= 768px) {
  .p-details__title {
    font-size: var(--font-size-bigger);
  }
}
@media screen and (width >= 1024px) {
  .p-details__title:not(.p-details__title--empty) {
    font-size: var(--font-size-biggest);
  }
}
.p-details__header--hidden .p-details__title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media screen and (width >= 1024px) {
  .p-details__header--hidden .p-details__title {
    font-size: var(--font-size-bigger);
  }
}
@media screen and (width < 768px) {
  .p-details .c-footer {
    padding-bottom: calc(var(--spacing-xxxl) * 2);
  }
}

.p-content .pregunta-respuesta {
  display: grid;
  gap: var(--spacing-md);
}
.p-content .pregunta-respuesta summary {
  color: var(--font-color-accent);
  cursor: pointer;
}
.p-content .pregunta-respuesta p {
  padding-left: var(--spacing-md);
}
.p-content .pregunta-respuesta + h2 {
  font-size: var(--font-size-big);
  font-weight: var(--font-weight-bold);
  margin: var(--spacing-xl) 0 var(--spacing-lg);
}

.p-stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xxl) var(--spacing-lg);
}
.p-stats__section-title {
  font-size: var(--font-size-big);
  display: block;
  width: 100%;
}
.p-stats__item {
  width: 100%;
}
@media screen and (width >= 768px) {
  .p-stats__item {
    width: 48%;
  }
}

/* ITCSS LAYER: UTILITIES */
.u-flex-wrap {
  flex-wrap: wrap;
}

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

.u-flex-basis--100 {
  flex-basis: 100%;
}

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

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

.u-flex-dynamic {
  --u-flex-dynamic-basis: var(--custom-basis, 100%);
  flex: 1 1 var(--u-flex-dynamic-basis);
}

@media screen and (width >= 640px) {
  .u-flex-basis--50\@xs {
    flex-basis: 49%;
  }
  .u-flex-basis--auto\@xs {
    flex-basis: auto;
  }
  .u-flex-grow--0\@xs {
    flex-grow: 0;
  }
}
@media screen and (width >= 768px) {
  .u-flex-wrap--nowrap\@sm {
    flex-wrap: nowrap;
  }
  .u-flex-direction--row\@sm {
    flex-direction: row;
  }
  .u-flex-basis--auto\@sm {
    flex-basis: auto;
  }
  .u-flex-basis--100\@sm {
    flex-basis: 100%;
  }
}
@media screen and (width >= 1024px) {
  .u-flex-direction--row-reverse\@md {
    flex-direction: row-reverse;
  }
  .u-flex-wrap--nowrap\@md {
    flex-wrap: nowrap;
  }
  .u-flex-basis--100\@md {
    flex-basis: 100%;
  }
}
.u-width--full {
  width: 100%;
}

@media screen and (width >= 640px) {
  .u-width--auto\@xs {
    width: auto;
  }
}
.u-grid-template--auto-fit {
  --grid-template-custom-size: var(--custom-size, 200ch);
  --grid-template-custom-max-size: var(--custom-max-size, 1fr);
  --grid-template-custom-column-gap: var(--custom-column-gap, var(--custom-gap, var(--spacing-md)));
  --grid-template-custom-row-gap: var(--custom-row-gap, var(--custom-gap, var(--spacing-md)));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-template-custom-size), var(--grid-template-custom-max-size)));
  column-gap: var(--grid-template-custom-column-gap);
  row-gap: var(--grid-template-custom-row-gap);
}

.u-grid-columns--span-2 {
  grid-column: span 2;
}

.u-grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (width >= 640px) {
  .u-grid-cols-3\@xs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (width >= 768px) {
  .u-grid-cols-4\@sm {
    grid-template-columns: repeat(4, 1fr);
  }
}
.u-justify-items--end {
  justify-items: end;
}

.u-justify-items--center {
  justify-items: center;
}

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

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

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

.u-justify-self--end {
  justify-self: end;
}

.u-justify-self--start {
  justify-self: start;
}

.u-justify-self--center {
  justify-self: center;
}

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

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

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

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

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

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

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

@media screen and (width >= 640px) {
  .u-justify-content--between\@xs {
    justify-content: space-between;
  }
  .u-justify-content--end\@xs {
    justify-content: end;
  }
}
@media screen and (width >= 768px) {
  .u-justify-content--normal\@sm {
    justify-content: normal;
  }
  .u-justify-content--start\@sm {
    justify-content: start;
  }
  .u-align-content--around\@sm {
    align-content: space-around;
  }
  .u-align-self--start\@sm {
    align-self: start;
  }
}
.u-font-size--tiny {
  font-size: var(--font-size-tiny);
}
.u-font-size--small {
  font-size: var(--font-size-small);
}
.u-font-size--narrow {
  font-size: var(--font-size-narrow);
}
.u-font-size--default {
  font-size: var(--font-size-default);
}
.u-font-size--big {
  font-size: var(--font-size-big);
}
.u-font-size--bigger {
  font-size: var(--font-size-bigger);
}
.u-font-size--biggest {
  font-size: var(--font-size-biggest);
}
.u-font-size--huge {
  font-size: var(--font-size-huge);
}
@media screen and (width >= 640px) {
  .u-font-size--default\@xs {
    font-size: var(--font-size-default);
  }
  .u-font-size--big\@xs {
    font-size: var(--font-size-big);
  }
}
@media screen and (width >= 768px) {
  .u-font-size--tiny\@sm {
    font-size: var(--font-size-tiny);
  }
  .u-font-size--small\@sm {
    font-size: var(--font-size-small);
  }
  .u-font-size--default\@sm {
    font-size: var(--font-size-default);
  }
  .u-font-size--bigger\@sm {
    font-size: var(--font-size-bigger);
  }
}
@media screen and (width >= 1024px) {
  .u-font-size--default\@md {
    font-size: var(--font-size-default);
  }
  .u-font-size--big\@md {
    font-size: var(--font-size-big);
  }
  .u-font-size--biggest\@md {
    font-size: var(--font-size-biggest);
  }
}
@media screen and (width >= 1280px) {
  .u-font-size--bigger\@lg {
    font-size: var(--font-size-bigger);
  }
  .u-font-size--huge\@lg {
    font-size: var(--font-size-huge);
  }
}
.u-font-weight--default, .u-font-weight--medium {
  font-weight: var(--body-font-weight);
}
.u-font-weight--regular {
  font-weight: var(--font-weight-regular);
}
.u-font-weight--bold {
  font-weight: var(--font-weight-bold);
}

.u-gap--none {
  gap: 0;
}

.u-gap--0\.25 {
  gap: 1px;
}

.u-gap--xxs {
  gap: var(--spacing-xxs);
}

.u-gap--xs {
  gap: var(--spacing-xs);
}

.u-gap--sm {
  gap: var(--spacing-sm);
}

.u-gap--md {
  gap: var(--spacing-md);
}

.u-gap--lg {
  gap: var(--spacing-lg);
}

.u-gap--xl {
  gap: var(--spacing-xl);
}

.u-column-gap--xl {
  column-gap: var(--spacing-xl);
}

.u-row-gap--none {
  row-gap: 0;
}

.u-row-gap--xs {
  row-gap: var(--spacing-xs);
}

.u-row-gap--xl {
  row-gap: var(--spacing-xl);
}

@media screen and (width >= 640px) {
  .u-row-gap--xl\@xs {
    row-gap: var(--spacing-rem-xl);
  }
  .u-gap--lg\@xs {
    gap: var(--spacing-rem-lg);
  }
  .u-gap--xl\@xs {
    gap: var(--spacing-rem-xl);
  }
}
@media screen and (width >= 768px) {
  .u-row-gap--xxs\@sm {
    row-gap: var(--spacing-rem-xxs);
  }
  .u-row-gap--xxl\@sm {
    row-gap: var(--spacing-rem-xxl);
  }
  .u-gap--xs\@sm {
    gap: var(--spacing-xs);
  }
  .u-gap--md\@sm {
    gap: var(--spacing-md);
  }
  .u-gap--lg\@sm {
    gap: var(--spacing-lg);
  }
  .u-gap--xxl\@sm {
    gap: var(--spacing-xxl);
  }
}
.u-color--white {
  color: white;
}
.u-color--overlay {
  color: var(--font-color-overlay);
}
.u-color--accent\:hover:hover, .u-color--accent {
  transition: var(--motion-duration-fast);
  color: var(--font-color-accent);
}
.u-color--softest {
  color: var(--font-color-softest);
}
.u-color--soft {
  color: var(--font-color-soft) !important;
}
.u-color--default, .u-color--hard {
  color: var(--font-color-default);
}
.u-color--success {
  color: var(--font-color-success);
}
.u-color--success--hard {
  color: var(--font-color-success-hard);
}
.u-color--warn {
  color: var(--font-color-warn);
}
.u-color--error\:hover:hover, .u-color--error {
  color: var(--font-color-error);
}
.u-color--coins {
  color: var(--font-color-coins);
}
.u-color--premium {
  color: var(--font-color-premium);
}
.u-color--favorite {
  color: var(--fill-color-favorite);
}
.u-color--active-user {
  color: var(--active-user-color);
}

.u-bg-color--white {
  background-color: #fff;
}

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

.u-bg-color--softest\:hover {
  transition: var(--motion-duration-default);
}
.u-bg-color--softest\:hover:hover {
  background-color: var(--bg-color-gray-softest);
}

.u-bg-color--warn--softest {
  background-color: var(--bg-color-feedback-warn-softest);
}

.u-bg-color--featured--softest {
  background-color: var(--bg-color-premium-softest);
}

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

.u-bg-color--error--soft {
  background-color: var(--bg-color-feedback-error-soft);
}

.u-bg-color--error--softest {
  background-color: var(--bg-color-feedback-error-softest);
}

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

.u-bg-color--success--softest {
  background-color: var(--bg-color-feedback-success-softest);
}

.u-bg-color--accent-softest {
  background-color: var(--bg-color-accent-softest);
}

@media screen and (width >= 640px) {
  .u-bg-color--animated-gradient\@xs {
    background: linear-gradient(-45deg, var(--bg-color-premium-default), var(--bg-color-feedback-error), #23a6d5, var(--bg-color-accent), var(--bg-color-feedback-success));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  }
}
@media screen and (width < 768px) {
  .u-bg-color--softest\@sm-max {
    background-color: var(--bg-color-gray-softest);
  }
}
@media screen and (width >= 768px) {
  .u-bg-color--transparent\@sm {
    background-color: transparent;
  }
}
@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.u-text-align--center {
  text-align: center;
}

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

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

.u-cursor--pointer {
  cursor: pointer;
}

.u-fill--white, .u-fill--white path {
  --fill-color: white;
  fill: var(--fill-color);
}

.hover\@u-text-decoration--underline:hover {
  text-decoration: underline;
}

.hover\@u-text-decoration--underline-parent:hover .u-text-decoration-target {
  text-decoration: underline;
}

.u-text-shadow--overlay {
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.u-text-underline-offset--sm {
  text-underline-offset: 2px;
}

.u-text-transform--uppercase {
  text-transform: uppercase;
}

.u-object-fit--cover {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}

.u-opacity--05 {
  opacity: 0.5;
}

.u-border--none {
  border: none;
}

.u-border--right--none {
  border-right: none;
}

.u-border--all {
  --current-bd-color: var(--u-bd-color, var(--bd-color-default));
  --current-bd-witdh: var(--u-bd-width, var(--border-with-default));
  border: var(--current-bd-witdh) var(--current-bd-color) solid;
}

.u-border--bottom {
  --current-bd-color: var(--u-bd-color, var(--bd-color-default));
  --current-bd-witdh: var(--u-bd-width, var(--border-with-default));
  border-bottom: var(--current-bd-witdh) var(--current-bd-color) solid;
}

.u-border--top {
  --current-bd-color: var(--u-bd-color, var(--bd-color-default));
  --current-bd-witdh: var(--u-bd-width, var(--border-with-default));
  border-top: var(--current-bd-witdh) var(--current-bd-color) solid;
}

.u-border--y {
  --current-bd-color: var(--u-bd-color, var(--bd-color-default));
  --current-bd-witdh: var(--u-bd-width, var(--border-with-default));
  border-bottom: var(--current-bd-witdh) var(--current-bd-color) solid;
  border-top: var(--current-bd-witdh) var(--current-bd-color) solid;
}

.u-bd-width--default {
  --u-bd-width: var(--border-with-default) ;
}

.u-bd-width--strong {
  --u-bd-width: var(--border-with-strong) ;
}

.u-bd-color--softest {
  --u-bd-color: var(--bd-color-softest);
}

.u-bd-color--transparent {
  --u-bd-color: transparent;
}

.u-bd-color--error--softest {
  --u-bd-color: var(--bd-color-error-softest);
}

.u-bd-color--success--softest {
  --u-bd-color: var(--bd-color-success-softest);
}

.u-bd-color--featured--softest {
  --u-bd-color: var(--bd-color-premium-softest);
}

.u-border-radius--default {
  border-radius: var(--border-radius-default);
}

.u-border-radius--full {
  border-radius: var(--border-radius-full);
}

.u-border-radius--lg {
  border-radius: var(--border-radius-lg);
}

.u-border-radius--left--none {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.u-border-radius--right--none {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.u-overflow--hidden {
  overflow: hidden;
}

.u-overflow-y--auto {
  overflow-y: auto;
}

.u-p--none {
  padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.u-px--container {
  padding-right: var(--container-x-padding);
  padding-left: var(--container-x-padding);
}

.u-px--none {
  padding-left: 0;
  padding-right: 0;
}

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

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

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

.u-pl--none {
  padding-left: 0;
}

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

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

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

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

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

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

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

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

.u-pb--none {
  padding-bottom: 0;
}

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

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

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

.u-pb--xxxl {
  padding-bottom: var(--spacing-xxxl);
}

@media screen and (width >= 640px) {
  .u-px--sm\@xs {
    padding-right: var(--spacing-sm);
    padding-left: var(--spacing-sm);
  }
  .u-px--xl\@xs {
    padding-right: var(--spacing-xl);
    padding-left: var(--spacing-xl);
  }
  .u-pt--xl\@xs {
    padding-top: var(--spacing-xl);
  }
}
@media screen and (width < 768px) {
  .u-pt--null\@sm-max {
    padding-top: 0;
  }
}
@media screen and (width >= 768px) {
  .u-p--none\@sm {
    padding: 0;
  }
  .u-px--none\@sm {
    padding-left: 0;
    padding-right: 0;
  }
  .u-px--sm\@sm {
    padding-right: var(--spacing-sm);
    padding-left: var(--spacing-sm);
  }
  .u-px--xl\@sm {
    padding-right: var(--spacing-xl);
    padding-left: var(--spacing-xl);
  }
  .u-p--xl\@sm {
    padding: var(--spacing-xl);
  }
  .u-pb--xxl\@sm {
    padding-bottom: var(--spacing-xxl);
  }
  .u-pl--sm\@sm {
    padding-left: var(--spacing-sm);
  }
  .u-pt--xxl\@sm {
    padding-top: var(--spacing-xxl);
  }
}
@media screen and (width >= 1024px) {
  .u-py--xxl\@md {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
  }
  .u-py--xxxl\@md {
    padding-top: var(--spacing-xxxl);
    padding-bottom: var(--spacing-xxxl);
  }
  .u-pt--0\@md {
    padding-top: 0;
  }
}
.u-mx--none {
  margin-left: 0;
  margin-right: 0;
}

.u-mx--xl-negative {
  margin-right: calc(var(--spacing-xl) * -1);
  margin-left: calc(var(--spacing-xl) * -1);
}

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

.u-mt--1px {
  margin-top: 1px;
}

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

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

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

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

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

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

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

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

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

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

.u-ml--sm-negative {
  margin-left: calc(var(--spacing-sm) * -1);
}

@media screen and (width < 768px) {
  .u-mt--xl\@sm-max {
    margin-top: var(--spacing-xl);
  }
  .u-mr--container\@sm-max {
    margin-right: calc(var(--container-padding) * -1);
  }
  .u-mx--container\@sm-max {
    margin-right: calc(var(--container-padding) * -1);
    margin-left: calc(var(--container-padding) * -1);
  }
  .u-mx--p-admin-content\@sm-max {
    margin-right: calc(var(--p-admin-content-x-padding) * -1);
    margin-left: calc(var(--p-admin-content-x-padding) * -1);
  }
}
.u-box-shadow {
  box-shadow: var(--box-shadow);
}

.u-min-height--atoms-default {
  min-height: var(--atoms-min-height-default);
}

.u-line-height--1 {
  line-height: 1;
}

.u-line-height--1\.5 {
  line-height: 1.5;
}

.u-white-space--nowrap {
  white-space: nowrap;
}

.u-links-container a {
  color: var(--font-color-accent-active);
}
.u-links-container a:hover {
  text-decoration: underline;
}

.u-z-index--1 {
  z-index: 1;
}

.u-z-index--3 {
  z-index: 3;
}

.u-text-overflow--ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.u-position--relative {
  position: relative;
}

.u-pointer-events--none {
  pointer-events: none;
}
.u-pointer-events--all {
  pointer-events: all;
}

.u-animate--rotate {
  animation: u-animate-rotate 3s linear infinite;
}

@keyframes u-animate-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1turn);
  }
}
.u-scrollbar-soft {
  scrollbar-color: var(--bg-color-gray-soft) transparent;
  scrollbar-width: thin;
}

.u-backdrop-blur--lg::backdrop {
  backdrop-filter: blur(30px);
}

.u-display--none {
  display: none;
}

.u-display--none\:empty:not(:has(:nth-child(1))) {
  display: none;
}

.u-display--none\:is-last:last-child {
  display: none;
}

.u-display--block {
  display: block;
}

.u-display--grid {
  display: grid;
}

.u-display--inline-flex {
  display: inline-flex;
}

.u-display--flex {
  display: flex;
}

@media screen and (width >= 640px) {
  .u-display--none\@xs {
    display: none;
  }
}
.u-display--inline-flex\@xs {
  display: none;
}
@media screen and (width >= 640px) {
  .u-display--inline-flex\@xs {
    display: inline-flex;
  }
}

.u-display--inline\@xs {
  display: none;
}
@media screen and (width >= 640px) {
  .u-display--inline\@xs {
    display: inline;
  }
}

@media screen and (width >= 640px) {
  .u-display--flex\@xs {
    display: flex;
  }
}

@media screen and (width >= 768px) {
  .u-display--none\@sm {
    display: none;
  }
}
.u-display--inline\@sm {
  display: none;
}
@media screen and (width >= 768px) {
  .u-display--inline\@sm {
    display: inline;
  }
}

.u-display--grid\@sm {
  display: none;
}
@media screen and (width >= 768px) {
  .u-display--grid\@sm {
    display: grid;
  }
}

.u-display--flex\@sm {
  display: none;
}
@media screen and (width >= 768px) {
  .u-display--flex\@sm {
    display: flex;
  }
}

.u-display--inline-flex\@sm {
  display: none;
}
@media screen and (width >= 768px) {
  .u-display--inline-flex\@sm {
    display: inline-flex;
  }
}

@media screen and (width >= 1024px) {
  .u-display--none\@md {
    display: none;
  }
}
.u-display--inline\@md {
  display: none;
}
@media screen and (width >= 1024px) {
  .u-display--inline\@md {
    display: inline;
  }
}

.u-display--block\@md {
  display: none;
}
@media screen and (width >= 1024px) {
  .u-display--block\@md {
    display: block;
  }
}

.u-display--flex\@md {
  display: none;
}
@media screen and (width >= 1024px) {
  .u-display--flex\@md {
    display: flex;
  }
}

.u-display--inline-flex\@md {
  display: none;
}
@media screen and (width >= 1024px) {
  .u-display--inline-flex\@md {
    display: inline-flex;
  }
}

.u-display--grid\@md {
  display: none;
}
@media screen and (width >= 1024px) {
  .u-display--grid\@md {
    display: grid;
  }
}

@media screen and (width >= 1280px) {
  .u-display--none\@lg {
    display: none;
  }
}
.u-display--inline\@lg {
  display: none;
}
@media screen and (width >= 1280px) {
  .u-display--inline\@lg {
    display: inline;
  }
}