@charset "UTF-8";
/* -------------------------------------------------------------------
 * ## Design System
 * ------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-primary: #0038ff;
  --color-primary-strong: #0030d9;
  --color-primary-800: #0027b2;
  --color-primary-500: #2b59ff;
  --color-primary-300: #809cff;
  --color-primary-200: #aabdff;
  --color-primary-hover: #557aff;
  --color-text-primary: #4a4a4a;
  --color-text-secondary: #a4a4a4;
  --color-text-inverse: #ffffff;
  --color-text-brand: #0038ff;
  --color-icon-brand: #0038ff;
  --color-icon-black: #4a4a4a;
  --color-icon-grey: #a4a4a4;
  --color-icon-white: #ffffff;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-status-success-text: #289a45;
  --color-status-success-bg: #ecfff1;
  --color-status-error-text: #ea0c00;
  --color-status-error-bg: rgba(234, 12, 0, 0.08);
  --color-status-warning-text: #c67300;
  --color-status-warning-bg: #fff1e0;
  --color-status-info-text: #0085cc;
  --color-status-info-bg: #ecf8ff;
  --color-border-focus: rgba(0, 56, 255, 0.3);
  --color-border-error: #ff7c75;
  --color-border-success: #34c759;
  --color-border-warning: #ff9500;
  --color-border-info: #1aafff;
  --color-text-disabled: #d2d2d2;
  --color-bg-disabled: rgba(51, 51, 51, 0.1);
  --color-chart-mint: #37ffb4;
  /* Typography */
  --font-family-base: 'PrologueRegular', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-base: 16px;
  --font-size-lg: 19px;
  --font-size-xl: 20px;
  --font-size-2xl: 23px;
  --font-size-3xl: 32px;
  --font-size-4xl: 39px;
  --font-size-5xl: 48px;
  /* Spacing */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 32px;
  /* Radius */
  --radius-xs: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-round: 999px;
  /* Elevation */
  --shadow-s: 0 2px 4px rgba(27, 28, 29, 0.04);
  --shadow-focus: 1px 1px 4px rgba(0, 56, 255, 0.2);
  --shadow-card: 2px 2px 11.6px 0 rgba(186, 201, 255, 0.36);
}

/* --- Typography ---*/
/* --- bordes ---*/
/* $border:solid 1px #cfcfcf;
 */
/* --- shadows ---*/
/* $shadow:0px 3px 6px rgba(0, 0, 0, 0.16);
$shadowFX:0px 0px 30px #0436e6;
 */
/* ============================================
    Primitives — light.tokens.json (mode: light)
    ============================================ */
:root {
  /* Colors / Primary */
  --color-primary-50: #eaefff;
  --color-primary-100: #d4deff;
  --color-primary-200: #aabdff;
  --color-primary-300: #809cff;
  --color-primary-400: #557aff;
  --color-primary-500: #2b59ff;
  --color-primary-600: #0038ff;
  --color-primary-700: #0030d9;
  --color-primary-800: #0027b2;
  --color-primary-900: #001f8c;
  --color-primary-1000: #001666;
  --color-primary-alpha-10: rgba(0, 56, 255, 0.1);
  --color-primary-alpha-15: rgba(0, 56, 255, 0.15);
  --color-primary-alpha-20: rgba(0, 56, 255, 0.2);
  --color-primary-alpha-25: rgba(0, 56, 255, 0.25);
  --color-primary-alpha-30: rgba(0, 56, 255, 0.3);
  --color-primary-alpha-35: rgba(0, 56, 255, 0.35);
  --color-primary-alpha-40: rgba(0, 56, 255, 0.4);
  --color-primary-alpha-45: rgba(0, 56, 255, 0.45);
  --color-primary-alpha-50: rgba(0, 56, 255, 0.5);
  --color-primary-alpha-75: rgba(0, 56, 255, 0.75);
  /* Colors / Secondary */
  --color-secondary-100: #d0fefe;
  --color-secondary-200: #a1fdfd;
  --color-secondary-300: #73fcfc;
  --color-secondary-400: #44fbfb;
  --color-secondary-500: #15fafa;
  --color-secondary-600: #05e7e7;
  --color-secondary-700: #04c5c5;
  --color-secondary-800: #03a2a2;
  --color-secondary-900: #038080;
  --color-secondary-1000: #025e5e;
  --color-secondary-alpha-10: rgba(21, 250, 250, 0.1);
  --color-secondary-alpha-15: rgba(21, 250, 250, 0.15);
  --color-secondary-alpha-20: rgba(21, 250, 250, 0.2);
  --color-secondary-alpha-25: rgba(21, 250, 250, 0.25);
  --color-secondary-alpha-30: rgba(21, 250, 250, 0.3);
  --color-secondary-alpha-35: rgba(21, 250, 250, 0.35);
  --color-secondary-alpha-40: rgba(21, 250, 250, 0.4);
  --color-secondary-alpha-45: rgba(21, 250, 250, 0.45);
  --color-secondary-alpha-50: rgba(21, 250, 250, 0.5);
  --color-secondary-alpha-75: rgba(21, 250, 250, 0.75);
  /* Colors / Neutral */
  --color-neutral-100: #ffffff;
  --color-neutral-200: #e8e8e8;
  --color-neutral-300: #d2d2d2;
  --color-neutral-400: #bbbbbb;
  --color-neutral-500: #a4a4a4;
  --color-neutral-600: #8e8e8e;
  --color-neutral-700: #777777;
  --color-neutral-800: #606060;
  --color-neutral-900: #4a4a4a;
  --color-neutral-1000: #333333;
  --color-neutral-alpha-10: rgba(51, 51, 51, 0.1);
  --color-neutral-alpha-15: rgba(51, 51, 51, 0.15);
  --color-neutral-alpha-20: rgba(51, 51, 51, 0.2);
  --color-neutral-alpha-25: rgba(51, 51, 51, 0.25);
  --color-neutral-alpha-30: rgba(51, 51, 51, 0.3);
  --color-neutral-alpha-35: rgba(51, 51, 51, 0.35);
  --color-neutral-alpha-40: rgba(51, 51, 51, 0.4);
  --color-neutral-alpha-45: rgba(51, 51, 51, 0.45);
  --color-neutral-alpha-50: rgba(51, 51, 51, 0.5);
  --color-neutral-alpha-75: rgba(51, 51, 51, 0.75);
  /* Colors / Success (source token group named "Sucess") */
  --color-success-50: #ecfff1;
  --color-success-100: #bbedc7;
  --color-success-200: #76db90;
  --color-success-300: #34c759;
  --color-success-400: #289a45;
  --color-success-500: #1d6e31;
  /* Colors / Error */
  --color-error-50: #fff4f5;
  --color-error-100: #ffbeba;
  --color-error-200: #ff7c75;
  --color-error-300: #ff3b30;
  --color-error-400: #ea0c00;
  --color-error-500: #a40900;
  /* Colors / Warning */
  --color-warning-50: #fff1e0;
  --color-warning-100: #ffdcaa;
  --color-warning-200: #ffb855;
  --color-warning-300: #ff9500;
  --color-warning-400: #c67300;
  --color-warning-500: #8c5200;
  /* Colors / Info */
  --color-info-50: #ecf8ff;
  --color-info-100: #b3e4ff;
  --color-info-200: #66caff;
  --color-info-300: #1aafff;
  --color-info-400: #0085cc;
  --color-info-500: #005e91;
  /* Spacing */
  --spacing-0: 0px;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 6px;
  --spacing-4: 8px;
  --spacing-5: 12px;
  --spacing-6: 16px;
  --spacing-7: 20px;
  --spacing-8: 24px;
  --spacing-9: 32px;
  --spacing-10: 40px;
  /* Radius */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 10px;
  --radius-6: 12px;
  --radius-7: 16px;
  --radius-8: 20px;
  --radius-none: 0px;
  --radius-full: 999px;
  /* Stroke (primitive width scale) */
  --stroke-0: 0px;
  --stroke-1: 1px;
  --stroke-2: 2px;
  --stroke-3: 3px;
  --stroke-4: 4px;
  --stroke-5: 5px;
  /* ============================================
     Semantic aliases — Mode 1.tokens.json
     (each aliases a primitive above, per Figma
     aliasData)
     ============================================ */
  /* Radius */
  --radius-2xs: var(--radius-1);
  --radius-xs: var(--radius-2);
  --radius-s: var(--radius-3);
  --radius-m: var(--radius-4);
  --radius-xl: var(--radius-6);
  --radius-round: var(--radius-full);
  /* Colours / Fill */
  --color-fill-brand-1-default: var(--color-primary-600);
  --color-fill-brand-1-hover: var(--color-primary-400);
  --color-fill-brand-1-strong: var(--color-primary-700);
  --color-fill-brand-1-subtle: var(--color-primary-50);
  --color-fill-status-disabled: var(--color-neutral-alpha-10);
  --color-fill-status-error-default: var(--color-error-300);
  --color-fill-status-error-subtle: var(--color-error-50);
  --color-fill-status-info-default: var(--color-info-300);
  --color-fill-status-info-subtle: var(--color-info-50);
  --color-fill-status-warning-default: var(--color-warning-300);
  --color-fill-status-warning-subtle: var(--color-warning-50);
  --color-fill-status-success-default: var(--color-success-300);
  --color-fill-status-success-subtle: var(--color-success-50);
  --color-fill-neutral-white: var(--color-neutral-100);
  --color-fill-neutral-subtle: var(--color-neutral-100);
  --color-fill-neutral-default: var(--color-neutral-200);
  --color-fill-neutral-grey: var(--color-neutral-1000);
  --color-fill-neutral-hover: var(--color-neutral-800);
  --color-fill-neutral-pressed: var(--color-neutral-1000);
  /* Colours / Stroke */
  --color-stroke-brand-1-default: var(--color-primary-600);
  --color-stroke-brand-1-strong: var(--color-primary-700);
  --color-stroke-focus-default: var(--color-primary-alpha-30);
  --color-stroke-focus-error: var(--color-error-200);
  --color-stroke-status-disabled: var(--color-neutral-200);
  --color-stroke-status-error: var(--color-error-200);
  --color-stroke-primary-default: var(--color-neutral-900);
  /* Colours / Icon */
  --color-icon-white: var(--color-neutral-100);
  --color-icon-brand-1: var(--color-primary-600);
  --color-icon-black: var(--color-neutral-900);
  --color-icon-grey: var(--color-neutral-500);
  --color-icon-status-disabled: var(--color-neutral-300);
  --color-icon-status-error: var(--color-error-400);
  --color-icon-status-success: var(--color-success-400);
  --color-icon-status-warning: var(--color-warning-400);
  --color-icon-status-info: var(--color-info-400);
  /* Colours / Text */
  --color-text-inverse: var(--color-neutral-100);
  --color-text-brand-1: var(--color-primary-600);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-status-disabled: var(--color-neutral-300);
  --color-text-status-error: var(--color-error-400);
  --color-text-status-success: var(--color-success-400);
  --color-text-status-warning: var(--color-warning-400);
  --color-text-status-info: var(--color-info-400);
  /* Spacing / Gap */
  --spacing-gap-3xs: var(--spacing-1);
  --spacing-gap-2xs: var(--spacing-2);
  --spacing-gap-xs: var(--spacing-4);
  /* Spacing / Padding */
  --spacing-padding-2xs: var(--spacing-2);
  --spacing-padding-xs: var(--spacing-3);
  --spacing-padding-s: var(--spacing-4);
  --spacing-padding-m: var(--spacing-5);
  --spacing-padding-l: var(--spacing-6);
  /* Stroke (semantic) */
  --stroke-s: var(--stroke-1);
  --stroke-m: var(--stroke-2);
  --stroke-l: var(--stroke-4);
}

/* -------------------------------------------------------------------
 * ## Reset
 * ------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li,
figure {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

button {
  padding: 0;
  border: none;
  padding-block: 0;
  padding-inline: 0;
  cursor: pointer;
  display: block;
}

a:active {
  color: unset;
}

ul {
  list-style: none;
}

/* --- Fonts ---*/
/*
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)
950	Extra Black (Ultra Black)
*/
@font-face {
  font-family: "PrologueRegular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/PrologueRegular.woff2") format("woff2"), url("../fonts/PrologueRegular.woff") format("woff"), url("../fonts/PrologueRegular.ttf") format("truetype");
}
@font-face {
  font-family: "PrologueMedium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/PrologueMedium.woff2") format("woff2"), url("../fonts/PrologueMedium.woff") format("woff"), url("../fonts/PrologueMedium.ttf") format("truetype");
}
@font-face {
  font-family: "PrologueSemiBold";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/PrologueSemiBold.woff2") format("woff2"), url("../fonts/PrologueSemiBold.woff") format("woff"), url("../fonts/PrologueSemiBold.ttf") format("truetype");
}
/* -------------------------------------------------------------------
 * ## mixins
 * ------------------------------------------------------------------- */
/*-- BREAK POINTS--*/
/*
  $s: 678px;//no se pone el corte a 834 como figma porque se desborda
  $m: 1024px;// medida cambio header
  $xxl: 1400px;1550px NUEVO

*/
html {
  scroll-behavior: smooth;
  font-family: "PrologueRegular", sans-serif;
}

.contentLimit {
  width: 100%;
  max-width: 1920px;
  padding: 0 16px 16px 16px;
  padding: 0 16px 0 16px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .contentLimit {
    padding: 0 84px 128px 84px;
    padding: 0 84px 0 84px;
  }
}

.main {
  display: flex;
  justify-content: center;
  margin-top: 68px;
  flex-direction: column;
  width: 100%;
  gap: 32px;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .main {
    margin-top: 80px;
  }
}

.header {
  background: var(--color-primary);
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  font-family: "PrologueRegular", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.header .inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}
.header {
  /* Mobile header without dropdown: account is always visible and the logo uses the reduced mark. */
}
.header .logo {
  width: auto;
  flex-shrink: 0;
  display: none;
}
.header .logo--mobile {
  display: block;
  height: 38px;
  aspect-ratio: 153/39;
}
@media (min-width: 690px) {
  .header .logo--mobile {
    display: none;
  }
}
@media (min-width: 690px) {
  .header .logo--desktop {
    display: block;
    height: 38px;
    aspect-ratio: 254/29;
  }
}
.header .account {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-s);
}
@media (min-width: 1024px) {
  .header .account {
    gap: 21px;
  }
}
.header .avatar {
  display: block;
  width: 38px;
  height: 38px;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  border-radius: var(--radius-round);
  object-fit: cover;
  border: 1px solid var(--Colors-Neutral-100, #FFF);
}
@media (min-width: 1024px) {
  .header .avatar {
    width: 48px;
    height: 48px;
  }
}
.header .accountText {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.header .accountText .name {
  font-family: "PrologueRegular", sans-serif;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-inverse);
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 690px) {
  .header .accountText .name {
    font-size: var(--Font-sizes-XL-20, 20px);
    line-height: var(--Font-line-height-XL, 24px); /* 120% */
    max-width: none;
    overflow: visible;
    white-space: normal;
  }
}
.header .accountText .logout {
  font-size: var(--font-size-sm);
  color: var(--color-text-inverse);
  text-decoration: underline;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: "PrologueRegular", sans-serif;
  color: var(--Colours-Text-Inverse, #FFF);
  text-align: center;
  border-radius: var(--Radius-M, 8px);
  padding: var(--Spacing-Padding-S, 8px) var(--Spacing-Padding-L, 16px) var(--Spacing-Padding-S, 8px) var(--Spacing-6, 16px);
  background: var(--Colours-Fill-Brand-1-Default, #0038FF);
  /*   border: var(--Stroke-S, 1px) solid var(--Colours-Stroke-Brand-1-Default, #0038FF); */
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  text-wrap-mode: nowrap;
  height: fit-content;
  width: fit-content;
  border: var(--Stroke-M, 1px) solid var(--Colours-Fill-Brand-1-Default);
  cursor: pointer;
}
.btn i {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  color: var(--Colours-Text-Inverse, #FFF);
}
.btn i::before {
  color: inherit;
}
.btn.line {
  background: transparent;
  border: var(--Stroke-S, 1px) solid var(--Colours-Stroke-Brand-1-Default, #0038FF);
  color: var(--Colours-Text-Brand-1, #0038FF);
}
.btn.line:hover {
  border: var(--Stroke-S, 1px) solid var(--Colours-Stroke-Brand-1-Default, #0038FF);
  color: var(--Colours-Text-Brand-1, #0038FF);
  background: transparent;
}
.btn.line:active {
  border: var(--Stroke-S, 1px) solid var(--Colours-Stroke-Brand-1-Default, #0038FF);
  color: var(--Colours-Text-Brand-1, #0038FF);
  background: transparent;
}
.btn.line:focus {
  border: var(--Stroke-S, 1px) solid var(--Colours-Stroke-Brand-1-Default, #0038FF);
  color: var(--Colours-Text-Brand-1, #0038FF);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  background: transparent;
}
.btn.line.disabled {
  pointer-events: none;
  color: var(--Colours-Text-Status-Disabled, #D2D2D2);
  background-color: transparent;
  border: var(--Stroke-S, 1px) solid var(--Colours-Stroke-Status-Disabled, #E8E8E8);
}
.btn.line i {
  color: var(--Colours-Text-Brand-1, #0038FF);
}
.btn.line i::before {
  color: var(--Colours-Text-Brand-1, #0038FF);
}
.btn.line.grey {
  background: transparent;
  border: var(--Stroke-S, 1px) solid var(--Colours-Stroke-Primary-Default, #4A4A4A);
  color: var(--Colours-Text-Primary, #4A4A4A);
}
.btn.line.grey:hover {
  color: var(--Colours-Text-Primary, #4A4A4A);
  border: var(--Stroke-S, 1px) solid var(--Colours-Icon-Grey, #A4A4A4);
  background: transparent;
}
.btn.line.grey:active {
  color: var(--Colours-Text-Primary, #4A4A4A);
  background: transparent;
}
.btn.line.grey:focus {
  border: var(--Stroke-S, 1px) solid var(--Colours-Stroke-Primary-Default, #4A4A4A);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  background: transparent;
}
.btn.line.grey.disabled {
  pointer-events: none;
  color: var(--Colours-Text-Status-Disabled, #D2D2D2);
  background-color: transparent;
  border: var(--Stroke-S, 1px) solid var(--Colours-Stroke-Status-Disabled, #E8E8E8);
}
.btn.line.grey i {
  color: var(--Colours-Text-Primary, #4A4A4A);
}
.btn.line.grey i::before {
  color: var(--Colours-Text-Primary, #4A4A4A);
}
.btn:hover {
  background: var(--Colours-Fill-Brand-1-Hover, #557AFF);
}
.btn:active {
  background: var(--Colours-Fill-Brand-1-Strong, #0030D9);
}
.btn:focus {
  border: var(--Stroke-M, 1px) solid var(--Colours-Stroke-Brand-1-Strong, #0030D9);
  background: var(--Colours-Fill-Brand-1-Default, #0038FF);
  box-shadow: 1px 1px 4px 0 rgba(0, 56, 255, 0.2);
}
.btn.disabled {
  pointer-events: none;
  color: var(--Colours-Text-Status-Disabled, #D2D2D2);
  background: var(--Colours-Fill-Status-Disabled, rgba(51, 51, 51, 0.1));
}
.btn.rounded {
  border-radius: var(--Radius-Round, 999px);
}
.btn.small {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  padding: var(--Spacing-Padding-2XS, 4px) var(--Spacing-Padding-L, 16px);
}
.btn.grey {
  background: var(--Colours-Fill-Neutrals-Grey, #333);
  border: var(--Stroke-M, 2px) solid var(--Colours-Fill-Neutrals-Grey, #333);
}
.btn.grey:hover {
  background: var(--Colors-Neutral-800, #606060);
  border: var(--Stroke-M, 2px) solid var(--Colors-Neutral-800, #606060);
}
.btn.grey:active {
  background: var(--Colours-Fill-Neutrals-Grey, #333);
}
.btn.grey:focus {
  /*    border: var(--Stroke-M, 2px) solid var(--Colours-Fill-Neutrals-Default, #E8E8E8); */
  background: var(--Colours-Fill-Neutrals-Grey, #333);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}

.blockButtons {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs);
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius-round);
}
.blockButtons__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-2xs) var(--space-l);
  border: none;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
}
.blockButtons__btn.active {
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/*           <div class="inputField is-disabled">
            <div class="inputField__label">
              <label for="periodo-search">Label</label>
            </div>
            <div class="inputField__control ">
              <span class="inputField__icon-left"><i class="icon-form-usuario"></i></span>
              <span class="inputField__divider"></span>
              <input class="inputField__input is-error" type="text" id="periodo-search" placeholder="Placeholder text...">
              <button type="button" class="inputField__icon-right" aria-label="Ayuda">
                <i class="icon-ok"></i>
              </button>
            </div>
            <p class="inputField__hint">Hint text to help users</p>
            <p class="inputField__error">Hint text to help users</p>
          </div> */
/* -------------------------------------------------------------------
 * ## Input Field
 * ------------------------------------------------------------------- */
.wrapperInputField:has(.datepicker.is-open) .inputField__control {
  border-color: var(--color-border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
}
.wrapperInputField:has(.datepicker.is-open) .inputField__control .inputField__divider {
  background: var(--color-border-focus) !important;
}
.wrapperInputField:has(.datepicker.is-open) .inputField__control .inputField__icon-left i {
  color: var(--color-icon-brand) !important;
}
.wrapperInputField:has(.datepicker.is-open) .inputField__control .inputField__icon-left i::before {
  color: var(--color-icon-brand) !important;
}

.wrapperInputField {
  align-self: flex-start;
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .wrapperInputField:not(:has(.inputField__label)) .inputField {
    margin-top: 32px;
  }
}

.inputField {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
  position: relative;
  background: var(--color-surface);
}
.inputField__label {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}
.inputField__wrapp {
  position: relative;
}
.inputField__label label {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
}
.inputField__control {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  height: 44px;
  padding: var(--space-m) var(--space-s);
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  position: relative;
}
.inputField:not(.is-error):not(.is-disabled) .inputField__control:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.inputField:not(.is-error):not(.is-disabled) .inputField__control:focus-within .inputField__divider {
  background: var(--color-border-focus);
}
.inputField:not(.is-error):not(.is-disabled) .inputField__control:focus-within .inputField__icon-left i {
  color: var(--color-icon-brand);
}
.inputField:not(.is-error):not(.is-disabled) .inputField__control:focus-within .inputField__icon-left i::before {
  color: var(--color-icon-brand);
}
.inputField__icon-left, .inputField__icon-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
}
.inputField__icon-left {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--color-icon-black);
}
.inputField__icon-left.btnExpand::after {
  content: "";
  position: absolute;
  inset: -8px -16px -8px -8px;
  cursor: pointer;
}
.inputField__icon-right {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--color-icon-brand);
  cursor: pointer;
}
.inputField__divider {
  align-self: stretch;
  width: 1px;
  background: var(--color-text-secondary);
  flex-shrink: 0;
}
.inputField__input {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text-primary);
}
.inputField__input::placeholder {
  color: var(--color-text-secondary);
}
.inputField__hint {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-secondary);
}
.inputField__error {
  display: none;
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-secondary);
}
.inputField {
  /* --- states --- */
}
.inputField.is-error .inputField__control {
  border-color: var(--color-border-error);
}
.inputField.is-error .inputField__hint {
  color: var(--color-status-error-text);
}
.inputField.is-error .inputField__error {
  color: var(--color-status-error-text);
  display: inline-block;
}
.inputField.is-disabled .inputField__control {
  background: var(--color-bg-disabled);
  border-color: transparent;
  pointer-events: none;
}
.inputField.is-disabled .inputField__input,
.inputField.is-disabled .inputField__icon-left,
.inputField.is-disabled .inputField__icon-right {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.inputField.is-disabled .inputField__input::placeholder {
  color: var(--color-text-disabled);
}

/* datepicker */
.inputField__control {
  position: relative;
  z-index: 1;
}

.datepicker {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  z-index: 0;
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--stroke-s) solid var(--color-border-focus);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    grid-template-rows 200ms ease-in-out,
    opacity 120ms ease-in-out,
    visibility 0s linear 200ms;
}
.datepicker.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    grid-template-rows 200ms ease-in-out,
    opacity 120ms ease-in-out;
}
.datepicker__hidden {
  overflow: hidden;
  min-height: 0;
}
.datepicker__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  align-items: center;
}
.datepicker__body > div:not(.datepicker__header) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.datepicker__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: var(--space-s);
  border: none;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--color-text-brand);
  cursor: pointer;
}
.datepicker__nav svg {
  width: 24px;
  height: 24px;
}
.datepicker__nav:hover {
  background: var(--color-primary-alpha-10);
}
.datepicker__title {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  margin: 0;
  color: var(--color-text-primary);
  text-align: center;
}
.datepicker__weekdays {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3xs);
  justify-content: space-between;
  width: 100%;
}
.datepicker__weeks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  width: 100%;
}
.datepicker__week {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.datepicker__footer {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-l);
  border-top: var(--stroke-s) solid var(--color-border-focus);
  width: 100%;
}
.datepicker__footer .btn {
  flex: 1 0 0;
  width: auto;
}
.datepicker .weekday {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-secondary);
}
.datepicker .day {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-m);
  background: transparent;
  font-family: inherit;
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.datepicker .day:hover:not(.day--disabled):not(.day--selected) {
  background: var(--color-primary-alpha-10);
}
.datepicker .day--highlight {
  color: var(--color-text-brand);
  background: transparent;
}
.datepicker .day--disabled {
  color: var(--color-text-disabled);
  cursor: default;
  pointer-events: none;
}
.datepicker .day--selected {
  background: var(--color-primary);
  box-shadow: none;
  color: var(--color-text-inverse);
}

.wrapperInputField--campaignFilter {
  z-index: 3;
}

.campaignFilter.is-open .inputField__control {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.campaignFilter.is-open .inputField__divider {
  background: var(--color-border-focus);
}

.campaignFilter.is-open .inputField__icon-left i,
.campaignFilter.is-open .inputField__icon-left i::before {
  color: var(--color-icon-brand);
}

.campaignFilter__trigger {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.campaignFilter__value {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.campaignFilter__chevron {
  margin-left: auto;
  transition: transform 160ms ease;
}

.campaignFilter.is-open .campaignFilter__chevron {
  transform: rotate(180deg);
}

.campaignFilter__panel {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  z-index: 0;
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--stroke-s) solid var(--color-border-focus);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    grid-template-rows 200ms ease-in-out,
    opacity 120ms ease-in-out,
    visibility 0s linear 200ms;
}

.campaignFilter.is-open .campaignFilter__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    grid-template-rows 200ms ease-in-out,
    opacity 120ms ease-in-out,
    visibility 0s linear 0s;
}

.campaignFilter__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-height: 0;
  max-height: 260px;
  padding: var(--space-l) var(--space-m) var(--space-m);
  overflow-y: auto;
}

.campaignFilter__option {
  width: 100%;
  padding: var(--space-2xs) 0;
}

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

html {
  scroll-behavior: smooth;
}

.pageInit {
  padding-top: 32px;
}
.pageInit h1 {
  /* Desktop/4XL */
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 52.8px */
  letter-spacing: -0.48px;
  color: var(--Colours-Text-Primary, #4A4A4A);
  border-bottom: 1px solid var(--Colours-Icon-Brand-1, #0038FF);
  padding-bottom: 20px;
  font-family: "PrologueSemiBold", sans-serif;
}

.titleSecction {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--Colours-Icon-Brand-1, #0038FF);
}
@media (min-width: 1024px) {
  .titleSecction {
    flex-direction: row;
  }
}
.titleSecction h2 {
  /* Desktop/3XL */
  font-size: 39px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 42.9px */
  letter-spacing: -0.39px;
  color: var(--Colours-Text-Brand-1, #0038FF);
}

html {
  scroll-behavior: smooth;
}

.sectionData {
  display: flex;
}
.sectionData .contentLimit {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blockGraphics {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--Colors-Primary-200, #AABDFF);
  /*   @media (min-width: 1024px) {
      flex-direction: row;
    } */
}

.card {
  border: 1px solid var(--color-primary-200);
  /*   border-radius: var(--radius-m); */
  /*  box-shadow: var(--shadow-card); */
  background: var(--color-surface);
  padding: var(--space-m);
}

.info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.info__title {
  /* Desktop/XXL */
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 38.4px */
  letter-spacing: -0.352px;
  color: var(--Colours-Text-Primary, #4A4A4A);
  margin: 0;
}
.info__dates {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--Colours-Text-Brand-1, #0038FF);
  margin: 0;
}
.info__dates .dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-round);
  background: var(--Colours-Text-Brand-1, #0038FF);
}

.firstGraph {
  width: 100%;
}
.firstGraph #mainChart {
  min-height: 380px;
}

.chartLegend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-l);
  row-gap: var(--space-2xs);
  padding: 0 var(--space-l);
  margin-top: var(--space-m);
}
.chartLegend .checkbox {
  padding: var(--space-2xs);
}
.chartLegend__node {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: var(--radius-round);
  background: var(--legend-color);
}
.chartLegend__label {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-brand-1);
  white-space: nowrap;
}
.checkbox__input:not(:checked) ~ .chartLegend__node, .checkbox__input:not(:checked) ~ .chartLegend__label {
  opacity: 0.45;
}
@media (max-width: 768px) {
  .chartLegend {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    column-gap: 0;
    row-gap: 0;
    padding: 0 var(--space-s);
  }
}

.apexcharts-tooltip.apexcharts-theme-light {
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

.chartTooltip {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-primary-200);
  min-width: 160px;
}
.chartTooltip__date {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
  margin: 0;
}
.chartTooltip__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.chartTooltip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
}
.chartTooltip__legend {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.chartTooltip__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-round);
  background: var(--dot-color);
  flex-shrink: 0;
}
.chartTooltip__label, .chartTooltip__value {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-brand-1);
  white-space: nowrap;
}

.cardsInfo {
  display: grid;
  align-items: start;
  gap: var(--space-l);
  grid-template-columns: 1fr;
  grid-template-areas: "post" "alcance" "impresiones" "likes" "comentarios" "clicks" "ftds" "cpa";
}
@media (min-width: 700px) {
  .cardsInfo {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "post post post alcance alcance alcance" "impresiones impresiones likes likes comentarios comentarios" "clicks clicks ftds ftds cpa cpa";
  }
}
@media (min-width: 1400px) {
  .cardsInfo {
    grid-template-columns: repeat(15, 1fr);
    grid-template-areas: "post post post alcance alcance alcance impresiones impresiones impresiones likes likes likes comentarios comentarios comentarios" "clicks clicks clicks clicks clicks ftds ftds ftds ftds ftds cpa cpa cpa cpa cpa";
  }
}

.metricCard {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  border: 1px solid var(--Colors-Primary-200, #AABDFF);
  box-shadow: 2px 2px 11.6px 0 rgba(186, 201, 255, 0.36);
}
.metricCard.post {
  grid-area: post;
}
.metricCard.alcance {
  grid-area: alcance;
}
.metricCard.impresiones {
  grid-area: impresiones;
}
.metricCard.likes {
  grid-area: likes;
}
.metricCard.comentarios {
  grid-area: comentarios;
}
.metricCard.clicks {
  grid-area: clicks;
}
.metricCard.ftds {
  grid-area: ftds;
}
.metricCard.cpa {
  grid-area: cpa;
}
.metricCard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.metricCard__label {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-text-primary);
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  text-wrap: nowrap;
}
.metricCard__label i {
  font-size: 24px;
  color: var(--color-icon-brand);
}
.metricCard__label i::before {
  color: inherit;
}
.metricCard__valueRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.metricCard__value {
  /* Desktop/4XL */
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 52.8px */
  letter-spacing: -0.48px;
  color: var(--color-primary);
  margin: 0;
  display: flex;
  align-items: flex-end;
}
.metricCard__value small {
  /* Desktop/L */
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 34.5px */
  letter-spacing: -0.253px;
  font-weight: 400;
}
.metricCard__spark {
  width: 98px;
  height: 66px;
  flex-shrink: 0;
}

.secondsGraph {
  display: grid;
  grid-template-columns: 2.01fr 0.99fr;
  gap: var(--space-l);
}
@media (max-width: 900px) {
  .secondsGraph {
    grid-template-columns: 1fr;
  }
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  position: relative;
}
.panel__title {
  /* Desktop/XXL */
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 38.4px */
  letter-spacing: -0.352px;
  color: var(--Colours-Text-Primary, #4A4A4A);
  margin: 0;
}
@media (min-width: 901px) {
  .panel:last-child::after {
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background: var(--color-primary-200);
    position: absolute;
    left: -8px;
  }
}

.evolutionChart {
  height: 100%;
}
@media (min-width: 901px) {
  .evolutionChart > div {
    height: 100% !important;
  }
  .evolutionChart > div > svg {
    height: 100% !important;
  }
}

.donutLayout {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.donutChart {
  height: 180px;
}

.donutLayout .contentTable {
  width: 100%;
  border-collapse: collapse;
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-primary);
}
.donutLayout .contentTable thead tr {
  border-bottom: 1px solid var(--color-text-secondary);
}
.donutLayout .contentTable th,
.donutLayout .contentTable td {
  padding: var(--space-2xs) 0;
  text-align: left;
  color: var(--color-text-secondary);
  /* border-bottom: 1px solid var(--color-primary-200); */
}
.donutLayout .contentTable th {
  color: var(--color-text-secondary);
  font-weight: 400;
}
.donutLayout .contentTable th:nth-child(2),
.donutLayout .contentTable td:nth-child(2),
.donutLayout .contentTable th:nth-child(3),
.donutLayout .contentTable td:nth-child(3) {
  text-align: right;
}
.donutLayout .contentTable .dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: var(--space-2xs);
  border-radius: var(--radius-round);
}

.selectWrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-m);
  max-width: 200px;
}
.selectWrap__label {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-primary);
}

.select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  padding: 0 var(--space-s);
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
}

/* -------------------------------------------------------------------
 * ## Capsule
 * ------------------------------------------------------------------- */
.capsule {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  padding: var(--space-2xs) var(--space-m) var(--space-2xs) var(--space-s);
  border: 1px solid var(--color-border-success);
}
.capsule[hidden] {
  display: none !important;
}
.capsule:not(:has(i)) {
  padding: var(--space-2xs) var(--space-m) var(--space-2xs) var(--space-m);
}
.capsule {
  border-radius: var(--radius-round);
  background: var(--color-status-success-bg);
  color: var(--color-status-success-text);
}
.capsule i {
  font-size: 16px;
  color: inherit;
}
.capsule i::before {
  color: inherit;
}
.capsule span {
  /* Desktop/XSmall */
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 16.5px */
  letter-spacing: -0.121px;
  color: inherit;
  white-space: nowrap;
}
.capsule.brand {
  border: 1px solid var(--Colours-Stroke-Brand-1-Default, #0038FF);
  background: var(--Colours-Fill-Brand-1-Subtle, #EAEFFF);
  color: var(--Colours-Text-Brand-1, #0038FF);
}
.capsule.success {
  border-radius: var(--radius-round);
  background: var(--color-status-success-bg);
  color: var(--color-status-success-text);
}
.capsule.down {
  border-color: var(--color-border-error);
  background: var(--color-status-error-bg);
  color: var(--color-status-error-text);
}
.capsule.neutral {
  border-color: var(--color-icon-grey);
  background: var(--color-bg-disabled);
  color: var(--color-text-secondary);
}
.capsule.warning {
  border-color: var(--color-border-warning);
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
}
.capsule.info {
  border-color: var(--color-border-info);
  background: var(--color-status-info-bg);
  color: var(--color-status-info-text);
}

.pagination {
  display: flex;
  justify-content: center;
  width: 100%;
}
.pagination__simple, .pagination__complete {
  align-items: center;
  gap: var(--space-s);
}
.pagination__simple {
  display: flex;
}
.pagination__complete {
  display: none;
}
@media (min-width: 1024px) {
  .pagination__simple {
    display: none;
  }
  .pagination__complete {
    display: flex;
  }
}
.pagination__btn {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-l);
  border: none;
  background: none;
  border-radius: var(--radius-m);
  color: var(--color-primary);
  cursor: pointer;
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
}
.pagination__btn i {
  font-size: 24px;
}
.pagination__btn i::before {
  color: inherit;
}
.pagination__btn:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.pagination__btn--next {
  border-radius: var(--radius-round);
}
.pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-s) var(--space-l);
  border: none;
  border-radius: var(--radius-round);
  background: none;
  color: var(--color-primary);
  cursor: pointer;
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
}
.pagination__page.is-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-m);
}
.pagination__ellipsis {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-primary);
  padding: 0 var(--space-2xs);
}

.blockTable {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--Colors-Primary-200, #AABDFF);
  /*   &:nth-of-type(2n){ */
}
.blockTable[hidden] {
  display: none !important;
}
.blockTable .contentTable {
  width: 100%;
  border-collapse: collapse;
}
.blockTable .contentTable th,
.blockTable .contentTable td {
  padding: var(--space-s);
}
.blockTable .contentTable th:not(:first-child),
.blockTable .contentTable td:not(:first-child) {
  display: none;
}
@media (min-width: 1024px) {
  .blockTable .contentTable th:not(:first-child),
  .blockTable .contentTable td:not(:first-child) {
    display: table-cell;
  }
}
.blockTable .contentTable thead th {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-primary-500);
}
.blockTable .contentTable thead th:first-child {
  width: 227px;
  text-align: left;
}
.blockTable .contentTable__col--sort {
  cursor: pointer;
}
.blockTable .contentTable__col--sort i {
  font-size: 20px;
  vertical-align: middle;
  margin-left: var(--space-2xs);
}
.blockTable .contentTable tbody tr {
  border-bottom: 1px solid var(--color-primary-alpha-25);
  cursor: pointer;
}
.blockTable .contentTable tbody tr:hover {
  background: var(--color-primary-50);
}
.blockTable .contentTable tbody tr:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}
.blockTable .contentTable__value {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
  text-align: center;
  white-space: nowrap;
}
.blockTable .contentTable__creatorCell {
  text-align: left;
}
.blockTable .contentTable__creator {
  display: flex;
  align-items: center;
  gap: 21px;
}
.blockTable .contentTable__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-s);
}
.blockTable .contentTable__thumb {
  width: 82px;
  height: 48px;
  border-radius: var(--radius-m);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-s);
}
.blockTable .contentTable__creatorInfo {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.blockTable .contentTable__name {
  /* Desktop/M */
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 28.5px */
  letter-spacing: -0.209px;
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: nowrap;
}
.blockTable .contentTable__handle {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-primary);
  margin: 0;
}
.blockTable .contentTable__handle:hover {
  text-decoration: underline;
}
.blockTable .contentTable__meta {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-secondary);
  margin: 0;
}

.wrappBlockFilters {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: 100%;
}
@media (min-width: 690px) {
  .wrappBlockFilters {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.wrappBlockFilters .blockFilters {
  width: 100%;
}
.wrappBlockFilters .btnViewAll {
  align-self: flex-start;
}
@media (min-width: 690px) {
  .wrappBlockFilters .btnViewAll {
    margin-top: 32px;
  }
}

.blockFilters {
  display: none;
}
@media (min-width: 690px) {
  .blockFilters {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .blockFilters.page {
    justify-content: flex-start;
    gap: var(--space-m);
  }
  .blockFilters.page .blockButtons {
    margin-left: auto;
  }
  .blockFilters__group {
    width: 100%;
  }
}
.blockFilters .wrapperInputField {
  width: 100%;
  max-width: 360px;
}
.blockFilters .blockButtons {
  margin-top: 32px;
  align-self: flex-start;
}
@media (max-width: 689px) {
  .blockFilters.activeMobile {
    display: flex;
    align-items: flex-start;
    gap: var(--space-l);
  }
  .blockFilters.activeMobile.page {
    flex-wrap: wrap;
  }
  .blockFilters.activeMobile .blockButtons {
    order: -1;
    margin-top: 0;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 200ms ease;
  }
  .blockFilters.activeMobile .blockButtons.is-none {
    display: none;
  }
  .blockFilters.activeMobile .blockButtons__btn:not(.active) {
    display: none;
  }
  .blockFilters.activeMobile .blockButtons.is-expanded .blockButtons__btn:not(.active) {
    display: flex;
  }
  .blockFilters.activeMobile .wrapperInputField {
    max-width: none;
    flex: 1 1 0%;
    min-width: 0;
    transition: width 200ms ease;
  }
  .blockFilters.activeMobile .wrapperInputField--campaignFilter {
    flex: 0 0 100%;
    flex-basis: 100%;
    order: 1;
  }
  .blockFilters.activeMobile .inputField__icon-right {
    display: none;
  }
  .blockFilters.activeMobile .inputField__label {
    display: none;
  }
  .blockFilters.activeMobile .datepicker {
    top: 37px;
  }
  .modalMasonry .blockFilters.activeMobile {
    display: flex;
    padding: var(--space-l) 0;
  }
}

@media (min-width: 690px) {
  .blockTable .blockFilters {
    align-items: flex-end;
    width: 100%;
    gap: 32px;
    justify-content: flex-end;
  }
  .blockTable .blockFilters .wrapperInputField:only-child {
    align-self: flex-end;
  }
  .blockTable .blockFilters .wrapperInputField:only-child .inputField {
    margin-top: 0;
  }
}
.blockTable .blockFilters__group {
  display: flex;
  align-items: flex-end;
  gap: 17px;
  width: 100%;
}

.blockSlider {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.slider {
  width: 100%;
  overflow-x: auto;
}

.slider::-webkit-scrollbar {
  height: 8px;
}

.slider::-webkit-scrollbar-track {
  background: var(--color-bg-disabled);
  border-radius: var(--radius-round);
}

.slider::-webkit-scrollbar-thumb {
  background: var(--color-border-primary);
  border-radius: var(--radius-round);
}

.slider .listCards {
  display: flex;
  gap: 20px;
  padding-bottom: var(--space-s);
}

.slider .listCards .cardPost {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 262px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-focus);
}
@media (min-width: 1200px) {
  .slider .listCards .cardPost {
    width: 405px;
  }
}
.slider .listCards .cardPost__media {
  position: relative;
  width: 100%;
  height: 464px;
  overflow: hidden;
}
.slider .listCards .cardPost__media:has(video) {
  cursor: pointer;
}
@media (min-width: 1200px) {
  .slider .listCards .cardPost__media {
    height: 720px;
  }
}
.slider .listCards .cardPost__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider .listCards .cardPost__playIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: var(--color-text-inverse);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
.slider .listCards .cardPost__playIcon::before {
  color: var(--color-text-inverse);
}
.slider .listCards .cardPost__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 7px 10px;
  background: linear-gradient(to bottom, rgba(51, 51, 51, 0.8) 8.297%, rgba(51, 51, 51, 0) 31.034%);
}
.slider .listCards .cardPost__overlay .cardPost__handle {
  color: var(--color-text-inverse);
}
@media (min-width: 1200px) {
  .slider .listCards .cardPost__overlay {
    display: none;
  }
}
.slider .listCards .cardPost__user {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.slider .listCards .cardPost__avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-round);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-s);
}
.slider .listCards .cardPost__handle {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
  margin: 0;
}
.slider .listCards .cardPost__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-s);
  padding: var(--space-l);
}
.slider .listCards .cardPost__row {
  display: none;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
}
@media (min-width: 1200px) {
  .slider .listCards .cardPost__row {
    display: flex;
  }
}
.slider .listCards .cardPost__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.slider .listCards .cardPost__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.slider .listCards .cardPost__meta--mobile {
  align-self: flex-start;
}
@media (min-width: 1200px) {
  .slider .listCards .cardPost__meta--mobile {
    display: none;
  }
}
.slider .listCards .cardPost__stats {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}
.slider .listCards .cardPost__stat {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  /* Desktop/M */
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 28.5px */
  letter-spacing: -0.209px;
  color: var(--color-text-primary);
}
.slider .listCards .cardPost__stat i {
  font-size: 24px;
  color: var(--color-icon-black);
}
.slider .listCards .cardPost__stat i::before {
  color: inherit;
}
.slider .listCards .cardPost__date {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body.is-locked {
  overflow: hidden;
}

/* -------------------------------------------------------------------
 * ## Modal Masonry
 * ------------------------------------------------------------------- */
.modalMasonry {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  visibility: hidden;
  pointer-events: none;
}
@media (min-width: 890px) {
  .modalMasonry {
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .modalMasonry {
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
  }
}
.modalMasonry .modalMasonry__body {
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-400, #bbbbbb) var(--color-bg-disabled);
}
.modalMasonry .modalMasonry__body::-webkit-scrollbar {
  width: 6px;
}
.modalMasonry .modalMasonry__body::-webkit-scrollbar-track {
  background: var(--color-bg-disabled);
  border-radius: var(--radius-round);
}
.modalMasonry .modalMasonry__body::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400, #bbbbbb);
  border-radius: var(--radius-round);
}
.modalMasonry .modalMasonry__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-600, #8e8e8e);
}
.modalMasonry.is-open {
  visibility: visible;
  pointer-events: auto;
}
.modalMasonry.is-open .modalMasonry__backdrop {
  opacity: 1;
}
.modalMasonry.is-open .modalMasonry__panel {
  transform: translate(0, 0);
}
.modalMasonry__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-neutral-alpha-30, rgba(51, 51, 51, 0.3));
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
  cursor: pointer;
}
.modalMasonry__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100dvh - 72px);
  max-height: calc(100dvh - 72px);
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-card);
  transform: translateY(100%);
  transition: transform 0.35s ease;
  overflow: hidden;
  padding: 16px 16px 32px 16px;
}
@media (min-width: 890px) {
  .modalMasonry__panel {
    width: calc(404px * 2 + var(--space-xl) * 3 + 2px);
    /*  width: 100%; */
    width: calc(404px * 3 + var(--space-xl) * 4 + 1px);
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-left: 1px solid var(--color-border-focus);
    border-radius: 0;
    box-shadow: -10px 0 26px 0 rgba(186, 201, 255, 0.61);
    transform: translateX(100%);
    width: 100%;
    max-width: 980px;
    max-width: 1000px;
  }
}
@media (min-width: 890px) and (min-width: 1024px) {
  .modalMasonry__panel {
    padding: 32px 24px 32px 48px;
  }
}
@media (min-width: 1400px) {
  .modalMasonry__panel {
    max-width: 1364px;
  }
}
.modalMasonry__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-l);
  padding: 0 0 var(--space-l);
  flex-shrink: 0;
  /*  margin:0  var(--space-xl) 0 var(--space-l); */
}
@media (min-width: 1024px) {
  .modalMasonry__header {
    border-bottom: 1px solid var(--color-primary);
  }
}
.modalMasonry__header h2 {
  /* Desktop/3XL */
  font-size: 39px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 42.9px */
  letter-spacing: -0.39px;
  color: var(--color-text-brand);
  margin: 0;
}
.modalMasonry__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
}
.modalMasonry__close i {
  font-size: 24px;
}
.modalMasonry__close i::before {
  color: inherit;
}
.modalMasonry .blockFilters {
  padding: var(--space-l) 0;
  gap: var(--space-l);
}
@media (min-width: 1024px) {
  .modalMasonry .blockFilters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-l) 0;
  }
  .modalMasonry .blockFilters .blockButtons {
    width: fit-content;
    height: fit-content;
    align-self: flex-start;
  }
}
.modalMasonry__body {
  flex: 1 1 auto;
  overflow-y: auto;
  /*  padding: var(--space-l) var(--space-l) var(--space-xl); */
  padding: var(--space-l) 0;
  padding: 0;
}
.modalMasonry__list {
  column-gap: var(--space-xl);
  column-count: 1;
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 890px) {
  .modalMasonry__list {
    column-count: 2;
    column-width: 404px;
    max-width: none;
    margin: 0;
  }
}
@media (min-width: 1024px) {
  .modalMasonry__list {
    column-count: 3;
    column-width: 404px;
  }
}
.modalMasonry__list .cardPost {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-focus);
  break-inside: avoid;
}
.modalMasonry__list .cardPost__media {
  position: relative;
  width: 100%;
}
.modalMasonry__list .cardPost__media:has(video) {
  cursor: pointer;
}
.modalMasonry__list .cardPost__playIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: var(--color-text-inverse);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
.modalMasonry__list .cardPost__playIcon::before {
  color: var(--color-text-inverse);
}
.modalMasonry__list .cardPost__image {
  display: block;
  width: 100%;
  height: auto;
}
.modalMasonry__list .cardPost__overlay {
  display: none;
}
.modalMasonry__list .cardPost__user {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.modalMasonry__list .cardPost__avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-round);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-s);
}
.modalMasonry__list .cardPost__handle {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
  margin: 0;
}
.modalMasonry__list .cardPost__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-s);
  padding: var(--space-l);
}
.modalMasonry__list .cardPost__row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
}
.modalMasonry__list .cardPost__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.modalMasonry__list .cardPost__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.modalMasonry__list .cardPost__meta--mobile {
  display: none;
}
.modalMasonry__list .cardPost__stats {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}
.modalMasonry__list .cardPost__stat {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  /* Desktop/M */
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 28.5px */
  letter-spacing: -0.209px;
  color: var(--color-text-primary);
}
.modalMasonry__list .cardPost__stat i {
  font-size: 24px;
  color: var(--color-icon-black);
}
.modalMasonry__list .cardPost__stat i::before {
  color: inherit;
}
.modalMasonry__list .cardPost__date {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body.is-locked {
  overflow: hidden;
}

/* -------------------------------------------------------------------
 * ## Modal Creator
 * ------------------------------------------------------------------- */
.modalCreator {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  visibility: hidden;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .modalCreator {
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
  }
}
.modalCreator.is-open {
  visibility: visible;
  pointer-events: auto;
}
.modalCreator.is-open .modalCreator__backdrop {
  opacity: 1;
}
.modalCreator.is-open .modalCreator__panel {
  transform: translate(0, 0);
}
.modalCreator__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-neutral-alpha-30, rgba(51, 51, 51, 0.3));
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
  cursor: pointer;
}
.modalCreator__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  height: calc(100dvh - 72px);
  max-height: calc(100dvh - 72px);
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-card);
  transform: translateY(100%);
  transition: transform 0.35s ease;
  overflow: visible;
  padding: 16px 16px 32px 16px;
}
@media (min-width: 1024px) {
  .modalCreator__panel {
    width: 100%;
    max-width: 930px;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-left: 1px solid var(--color-border-focus);
    border-radius: 0;
    box-shadow: -10px 0 26px 0 rgba(186, 201, 255, 0.61);
    transform: translateX(100%);
    padding: 32px 24px 32px 48px;
  }
}
.modalCreator__header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-l);
  padding: var(--space-l);
  /*   border-bottom: 1px solid var(--color-primary); */
  flex-shrink: 0;
  padding: 0 0 var(--space-l) 0;
  z-index: 20;
}
@media (min-width: 1024px) {
  .modalCreator__header {
    padding: var(--space-xl);
    padding: 0 0 var(--space-xl) 0;
  }
}
.modalCreator__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
}
.modalCreator__close i {
  font-size: 24px;
}
.modalCreator__close i::before {
  color: inherit;
}
.modalCreator__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-l);
  padding: var(--space-l) 0;
}
@media (min-width: 1024px) {
  .modalCreator__body {
    padding: var(--space-xl);
    padding: 0 0;
  }
}

.modalCreator__body .blockInfo {
  width: 100%;
  flex-direction: column;
  gap: 32px;
  display: flex;
}

.modalCreator__body .blockInfo .info {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.modalCreator__body .blockInfo .info__top {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media (min-width: 1024px) {
  .modalCreator__body .blockInfo .info__top {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    max-width: 450px;
  }
}
.modalCreator__body .blockInfo .info__badges {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}
@media (min-width: 1024px) {
  .modalCreator__body .blockInfo .info__badges {
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
  }
}
.modalCreator__body .blockInfo .info__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--color-neutral-1000);
  border-radius: var(--radius-round);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-neutral-1000);
  text-transform: uppercase;
  white-space: nowrap;
}
.modalCreator__body .blockInfo .info__badge i {
  font-size: 16px;
  color: inherit;
}
.modalCreator__body .blockInfo .info__badge i::before {
  color: inherit;
}
.modalCreator__body .blockInfo .info__bio {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-1000);
  margin: 0;
}
.modalCreator__body .blockInfo .info__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-brand);
  text-decoration: none;
}
.modalCreator__body .blockInfo .info__link i {
  font-size: 16px;
  color: inherit;
}
.modalCreator__body .blockInfo .info__link i::before {
  color: inherit;
}
.modalCreator__body .blockInfo .info__link:hover {
  text-decoration: underline;
}

.modalCreator__body .blockInfo .data {
  display: flex;
  /*   flex-direction: column; */
  gap: var(--space-l);
}
@media (min-width: 1024px) {
  .modalCreator__body .blockInfo .data {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-xl);
  }
}
.modalCreator__body .blockInfo .data__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s) 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) {
  .modalCreator__body .blockInfo .data__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
  }
}
.modalCreator__body .blockInfo .data__item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--space-2xs) var(--space-s);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-1000);
  white-space: nowrap;
}
.modalCreator__body .blockInfo .data__item:nth-child(odd) {
  border-right: 1px solid var(--black-alpha-50, rgba(0, 0, 0, 0.5));
}
@media (min-width: 1024px) {
  .modalCreator__body .blockInfo .data__item:not(:last-child) {
    border-right: 1px solid --black-alpha-50, rgba(0, 0, 0, 0.5);
  }
}
.modalCreator__body .blockInfo .data__item i {
  font-size: 16px;
  color: inherit;
}
.modalCreator__body .blockInfo .data__item i::before {
  color: inherit;
}
.modalCreator__body .blockInfo .data__download {
  display: none;
}
@media (min-width: 1024px) {
  .modalCreator__body .blockInfo .data__download {
    display: inline-flex;
    flex-shrink: 0;
  }
}
.modalCreator__body .blockInfo .data__download[hidden] {
  display: none !important;
}

.modalCreator__body .blockInfo .tabs {
  display: flex;
  width: 100%;
}
.modalCreator__body .blockInfo .tabs__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--space-l);
  border-bottom: 1.5px solid var(--color-primary-alpha-15, #dbe3ff);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-neutral-700, #727272);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
.modalCreator__body .blockInfo .tabs__item.is-active {
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.modalCreator__body .blockContent {
  width: 100%;
  padding: var(--space-l) 0 0 0;
}
.modalCreator__body .blockContent .summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.modalCreator__body .blockContent .summary .blockGraphics {
  border-bottom: none;
  padding-bottom: 0;
}
.modalCreator__body .blockContent .posts {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.modalCreator__body .blockContent .posts .modalMasonry__body {
  padding: 0;
}

.modalCreator__body .blockContent .summary .cardsInfo {
  display: grid;
  align-items: start;
  gap: var(--space-l);
  grid-template-columns: 1fr;
  grid-template-areas: "post" "alcance" "impresiones" "likes" "comentarios" "clicks" "ftds" "cpa";
}
@media (min-width: 900px) {
  .modalCreator__body .blockContent .summary .cardsInfo {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "post post post alcance alcance alcance" "impresiones impresiones likes likes comentarios comentarios" "clicks clicks ftds ftds cpa cpa";
  }
}

.modalCreator__body .blockContent .summary .secondsGraph .card {
  border: unset;
}

/* -------------------------------------------------------------------
 * ## Selector de perfil (dropdown con buscador)
 * ------------------------------------------------------------------- */
.selectorPerfil {
  position: relative;
  width: fit-content;
  min-width: 280px;
}
.selectorPerfil.is-open {
  z-index: 30;
}
.selectorPerfil__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  width: 100%;
  padding: var(--space-s);
  border: 1px solid var(--Colours-Stroke-Focus-Default, rgba(0, 56, 255, 0.3));
  border-radius: var(--radius-m);
  background: var(--color-bg);
  cursor: pointer;
  text-align: left;
  position: relative;
  z-index: 1;
}
.selectorPerfil__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-s);
}
.selectorPerfil__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1 1 auto;
  min-width: 0;
}
.selectorPerfil__name {
  /* Desktop/M */
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 28.5px */
  letter-spacing: -0.209px;
  color: var(--color-text-primary);
}
.selectorPerfil__handle {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-secondary);
}
.selectorPerfil__chevron {
  flex-shrink: 0;
  font-size: 24px;
  color: var(--Colours-Icon-Brand-1, #0038FF);
  transition: transform 0.2s ease;
}
.selectorPerfil__chevron::before {
  color: inherit;
  color: var(--Colours-Icon-Brand-1, #0038FF) !important;
}
.selectorPerfil.is-open .selectorPerfil__chevron {
  transform: rotate(180deg);
}
.selectorPerfil.is-open .selectorPerfil__trigger {
  border: 1px solid var(--Colours-Stroke-Brand-1-Default, #0038FF);
}
.selectorPerfil__panel {
  position: absolute;
  top: calc(100% - var(--space-s));
  left: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: var(--space-s);
  width: max(100%, 280px);
  padding: var(--space-l) var(--space-s) var(--space-s);
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  box-shadow: var(--shadow-card);
}
.selectorPerfil.is-open .selectorPerfil__panel {
  display: flex;
}
.selectorPerfil__list {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
}
.selectorPerfil__option {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  width: 100%;
  padding: var(--space-s);
  border: none;
  border-bottom: 1px solid var(--color-border-focus);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.selectorPerfil__option:hover {
  background: var(--color-primary-alpha-10);
}
.selectorPerfil__list li:last-child .selectorPerfil__option {
  border-bottom: none;
}

body.login {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
}

.login__video {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.login__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-l);
}
.login__card {
  display: flex;
  width: 100%;
  max-width: 342px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (min-width: 1024px) {
  .login__card {
    max-width: 1136px;
    height: min(808px, 88vh);
    border-radius: 32px;
  }
}
.login__side {
  display: none;
  position: relative;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-xl);
  outline: 12px solid #FFF;
  outline-offset: -12px;
  border-radius: 32px;
  margin-right: -12px;
}
@media (min-width: 1024px) {
  .login__side:after {
    content: "";
    position: absolute;
    /* inset: 0; */
    background: #fff;
    width: 36px;
    height: 36px;
    top: 0;
    right: 0;
    border-radius: 0 0 0 36px;
    corner-shape: scoop;
  }
  .login__side:before {
    content: "";
    position: absolute;
    /* inset: 0; */
    background: #fff;
    width: 36px;
    height: 36px;
    bottom: 0;
    right: 0;
    border-radius: 36px 0 0 0;
    corner-shape: scoop;
  }
  .login__side {
    display: flex;
  }
}
.login__slogan {
  /* Desktop/4XL */
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 52.8px */
  letter-spacing: -0.48px;
  color: var(--Colors-Neutral-100, #FFF);
  font-size: 89.939px;
  font-style: normal;
  font-weight: 400;
  line-height: 100px; /* 111.187% */
  letter-spacing: -0.899px;
  margin: 0;
}
.login__slogan strong {
  font-family: "PrologueSemiBold", sans-serif;
}
.login__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex: 1 1 0;
  width: 100%;
  padding: var(--space-xl) var(--space-l);
  background: var(--color-bg);
  text-align: center;
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .login__panel {
    justify-content: space-between;
    padding: var(--space-xl);
    text-align: left;
  }
}
.login__logo {
  width: 250px;
  height: auto;
  flex-shrink: 0;
}
.login__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
}
@media (min-width: 1024px) {
  .login__body {
    max-width: 460px;
  }
}
.login__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
  text-align: center;
}
.login__title {
  /* Desktop/3XL */
  font-size: 39px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 42.9px */
  letter-spacing: -0.39px;
  color: var(--color-text-brand);
  margin: 0;
}
.login__text {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
  margin: 0;
}
.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: 100%;
  max-width: 333px;
}
.login__helpIcon {
  display: flex;
}
@media (min-width: 1024px) {
  .login__helpIcon {
    display: none;
  }
}
.login__submit {
  width: 100%;
  justify-content: center;
}
.login__help {
  display: block;
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  color: var(--color-text-primary);
  margin: 0;
}
.login__help a {
  color: inherit;
  text-decoration: underline;
}
@media (min-width: 1024px) {
  .login__help {
    display: block;
    flex-shrink: 0;
  }
}

/* -------------------------------------------------------------------
 * ## Checkbox
 * Figma: operators.betandeal.com-V2.0 — node 324:16613
 * Tamaños: medium (18px, por defecto) / large (24px, .checkbox--large)
 * Estados: default, hover, pressed (:active), focus (:focus-visible), disabled (.is-disabled)
 * ------------------------------------------------------------------- */
/*
<!-- Checkbox medium, sin marcar -->
<label class="checkbox">
  <input type="checkbox" class="checkbox__input">
  <span class="checkbox__box"></span>
  <span class="checkbox__label">Label</span>
</label>

<!-- Checkbox medium, marcado -->
<label class="checkbox">
  <input type="checkbox" class="checkbox__input" checked>
  <span class="checkbox__box"></span>
  <span class="checkbox__label">Label</span>
</label>

<!-- Checkbox large, sin marcar -->
<label class="checkbox checkbox--large">
  <input type="checkbox" class="checkbox__input">
  <span class="checkbox__box"></span>
  <span class="checkbox__label">Label</span>
</label>

<!-- Checkbox large, marcado -->
<label class="checkbox checkbox--large">
  <input type="checkbox" class="checkbox__input" checked>
  <span class="checkbox__box"></span>
  <span class="checkbox__label">Label</span>
</label>

<!-- Checkbox deshabilitado, sin marcar -->
<label class="checkbox is-disabled">
  <input type="checkbox" class="checkbox__input" disabled>
  <span class="checkbox__box"></span>
  <span class="checkbox__label">Label</span>
</label>

<!-- Checkbox deshabilitado, marcado -->
<label class="checkbox is-disabled">
  <input type="checkbox" class="checkbox__input" checked disabled>
  <span class="checkbox__box"></span>
  <span class="checkbox__label">Label</span>
</label>

<!-- Checkbox sin label, solo la caja -->
<label class="checkbox">
  <input type="checkbox" class="checkbox__input">
  <span class="checkbox__box"></span>
</label>
*/
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  width: fit-content;
  cursor: pointer;
}
.checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.checkbox__box {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  border: var(--stroke-s) solid var(--color-icon-brand-1);
  background: var(--color-fill-neutral-white);
  box-shadow: var(--shadow-s);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.checkbox__box::before {
  font-family: "icomoon" !important;
  content: "\e9d6";
  font-size: 12px;
  line-height: 1;
  color: var(--color-fill-neutral-white);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.1s ease, transform 0.1s ease;
}
.checkbox__label {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
}
.checkbox {
  /* --- hover --- */
}
.checkbox:hover .checkbox__box {
  background: var(--color-fill-neutral-subtle);
}
.checkbox:hover .checkbox__input:checked ~ .checkbox__box {
  background: var(--color-fill-brand-1-hover);
  border-color: var(--color-stroke-brand-1-default);
}
.checkbox {
  /* --- pressed --- */
}
.checkbox:active .checkbox__box {
  background: var(--color-fill-neutral-default);
}
.checkbox:active .checkbox__input:checked ~ .checkbox__box {
  background: var(--color-fill-brand-1-strong);
  border-color: var(--color-stroke-brand-1-default);
}
.checkbox {
  /* --- focus --- */
}
.checkbox__input:focus-visible ~ .checkbox__box {
  border-color: var(--color-stroke-focus-default);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-25);
}
.checkbox {
  /* --- checked --- */
}
.checkbox__input:checked ~ .checkbox__box {
  background: var(--color-fill-brand-1-default);
  border-color: var(--color-stroke-brand-1-strong);
}
.checkbox__input:checked ~ .checkbox__box::before {
  opacity: 1;
  transform: scale(1);
}
.checkbox {
  /* --- disabled --- */
}
.checkbox.is-disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.checkbox.is-disabled .checkbox__box {
  background: var(--color-stroke-status-disabled);
  border-color: var(--color-stroke-status-disabled);
}
.checkbox.is-disabled .checkbox__input:checked ~ .checkbox__box {
  background: var(--color-fill-status-disabled);
}
.checkbox.is-disabled .checkbox__input:checked ~ .checkbox__box::before {
  color: var(--color-icon-status-disabled);
}
.checkbox.is-disabled .checkbox__label {
  color: var(--color-text-disabled);
}

/* -------------------------------------------------------------------
 * ## CreatorsHub dynamic behavior compatibility
 * ------------------------------------------------------------------- */
.blockTable .contentTable--sortable thead th.contentTable__col--sort {
  padding: 0;
}

.blockTable .contentTable__sort {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: 100%;
  max-width: 100%;
  padding: var(--space-s);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
}

.blockTable .contentTable--sortable thead th:first-child .contentTable__sort {
  justify-content: flex-start;
}

.blockTable .contentTable__sort:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

.blockTable .contentTable__sortIcon,
.blockTable .contentTable__sort i {
  font-size: 20px;
  line-height: 1;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.blockTable .contentTable__sortIcon:not([class*="icon-"]) {
  visibility: hidden;
}

.blockTable .contentTable__sort i:not([class]),
.blockTable .contentTable__sort i[class=""] {
  display: none;
}

.apexcharts-legend .apexcharts-legend-series {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
}

.apexcharts-legend .apexcharts-legend-marker {
  flex: 0 0 auto;
  margin-right: 0 !important;
}

.apexcharts-legend .chartLegendCheckbox {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin: 0;
  border: 1.5px solid var(--color-primary-300);
  border-radius: 3px;
  background-color: var(--color-surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  cursor: pointer;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.apexcharts-legend .chartLegendCheckbox:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.6 6.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.apexcharts-legend .apexcharts-inactive-legend .chartLegendCheckbox {
  border-color: var(--color-primary-300);
  background-color: var(--color-surface);
  background-image: none;
}

.apexcharts-legend .chartLegendLabel {
  line-height: 1.2;
}

.slider .listCards .cardPost__playIcon,
.modalMasonry__list .cardPost__playIcon {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.slider .listCards .cardPost__playIcon.is-visible,
.modalMasonry__list .cardPost__playIcon.is-visible {
  opacity: 1;
}

.slider .listCards .cardPost__media.is-paused:hover [data-video-feedback=play],
.slider .listCards .cardPost__media.is-paused:focus-visible [data-video-feedback=play],
.modalMasonry__list .cardPost__media.is-paused:hover [data-video-feedback=play],
.modalMasonry__list .cardPost__media.is-paused:focus-visible [data-video-feedback=play] {
  opacity: 1;
}

.modalMasonry__list .cardPost--fadeIn {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.modalMasonry__list .cardPost--fadeIn.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.modalMasonry__footer {
  display: flex;
  justify-content: center;
  padding: var(--space-l) 0 0;
}

.modalMasonry__loadMore {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
}

.modalMasonry__loadMore[hidden] {
  display: none !important;
}

.modalMasonry__loadMore.is-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-round);
  animation: modalMasonryLoadingSpin 0.7s linear infinite;
}

.modalMasonry__loadMore:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@keyframes modalMasonryLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

.modalCreator__body .blockContent [hidden] {
  display: none !important;
}

.modalCreator__body .blockContent .posts .modalMasonry__body {
  overflow: visible;
}

.selectorPerfil__panel .inputField {
  width: 100%;
}

.selectorPerfil__option:focus-visible {
  background: var(--color-primary-alpha-10);
  outline: none;
}

.inputField[data-range-date-picker] .inputField__control,
.inputField[data-range-date-picker] .inputField__input {
  cursor: pointer;
}

.inputField[data-range-date-picker] .inputField__input {
  cursor: text;
}

.inputField[data-range-date-picker] .inputField__input[readonly] {
  caret-color: transparent;
}

.datepicker .day:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.datepicker__footer .btn:disabled {
  pointer-events: none;
  color: var(--Colours-Text-Status-Disabled, #D2D2D2);
  background: var(--Colours-Fill-Status-Disabled, rgba(51, 51, 51, 0.1));
  border-color: transparent;
}

footer {
  background: var(--Colours-Fill-Neutrals-Default, #E8E8E8);
}
footer .innerFooter {
  width: 100%;
  max-width: 1920px;
  padding: 16px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  text-align: center;
}
footer .innerFooter span {
  /* Desktop/small */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: -0.143px;
  cursor: pointer;
  color: var(--Colours-Text-Primary, #4A4A4A);
}
.checkbox {
  /* --- size: large --- */
}
.checkbox--large .checkbox__box {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-s);
}
.checkbox--large .checkbox__box::before {
  font-size: 16px;
}
.checkbox--large .checkbox__input:focus-visible ~ .checkbox__box {
  border-width: var(--stroke-m);
}

.pageInitLink {
  padding-top: 32px;
}
.pageInitLink h1 {
  /* Desktop/4XL */
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 52.8px */
  letter-spacing: -0.48px;
  color: var(--Colours-Text-Primary, #4A4A4A);
  font-family: "PrologueSemiBold", sans-serif;
}
.pageInitLink p {
  /* Desktop/M */
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 28.5px */
  letter-spacing: -0.209px;
  color: var(--Colours-Text-Primary, #4A4A4A);
  border-bottom: 1px solid var(--Colours-Icon-Brand-1, #0038FF);
  padding-bottom: 20px;
}

.link-view {
  width: 100%;
  max-width: 1920px;
  padding: 0 16px 0 16px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .link-view {
    padding: 0 84px 0 84px;
  }
}
.link-view {
  /* Figma: node 422:33421 (mobile) / node 422:29774 (desktop). */
}
.link-view__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}
.link-view__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  width: 100%;
}
@media (min-width: 600px) {
  .link-view__group {
    gap: 64px;
  }
}
.link-view__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
}
@media (min-width: 1024px) {
  .link-view__heading {
    width: auto;
  }
}
.link-view__title {
  /* Desktop/XXL */
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 38.4px */
  letter-spacing: -0.352px;
  color: var(--color-text-primary);
  margin: 0;
}
.link-view__subtitle {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Desktop/L */
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 34.5px */
  letter-spacing: -0.253px;
  color: var(--color-text-primary);
}
.link-view__subtitle p {
  margin: 0;
}
@media (min-width: 1024px) {
  .link-view__subtitle {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-s);
    width: auto;
  }
}
.link-view__email {
  color: var(--color-text-brand-1);
}
.link-view__form {
  display: contents;
}
.link-view__cta {
  width: 100%;
}
@media (min-width: 600px) {
  .link-view__cta {
    width: fit-content;
  }
}
.link-view__about {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: 100%;
}
.link-view__divider {
  width: 100%;
  height: 1px;
  border: none;
  margin: 0;
  background: var(--color-primary-200);
}
.link-view__text {
  /* Desktop/P */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.176px;
  color: var(--color-text-primary);
  margin: 0;
}
.link-view__error {
  width: 100%;
  padding: var(--space-m);
  color: #A63D3D;
  background: #FFE6E6;
  border: 1px solid #F2BCBC;
  border-radius: var(--radius-s);
}

.link-view {
  /* Figma: node 422:33523 (mobile) / node 422:33484 (desktop). */
}
.link-view__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  width: 100%;
}
@media (min-width: 1024px) {
  .link-view__result {
    flex-direction: row;
    gap: var(--space-l);
    width: auto;
  }
}
.link-view__icon {
  width: 90px;
  height: 80px;
  aspect-ratio: 95.9026/85.5422;
  flex-shrink: 0;
}
.link-view__icon--broken {
  height: 90px;
  aspect-ratio: 1/1;
}
.link-view__resultText {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
}
.link-view__resultTitle {
  /* Desktop/XXL */
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 38.4px */
  letter-spacing: -0.352px;
  color: var(--color-text-primary);
  margin: 0;
}
.link-view__resultSubtitle {
  /* Desktop/L */
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 34.5px */
  letter-spacing: -0.253px;
  color: var(--color-text-primary);
  margin: 0;
}
/*# sourceMappingURL=main.css.map */