// Material Design 3 - Color
// https://m3.material.io/theme-builder#/custom
@use '@angular/material' as mat;

// VARS

:root {
  /* Animations */
  --animation: all 0.24s ease;
  --animation_fast: all 0.15s ease;
  --animation_medium: all 0.24s ease;
  --animation_slow: all 0.4s ease;
  --animation_very_slow: all 0.8s ease;

  // Typography
  --font_title: 'Poppins', "Source Sans Pro", -apple-system, sans-serif;
  --font_text: 'Poppins', "Source Sans Pro", -apple-system, sans-serif;
  --font_size_body_1: 16px;
  --font_size_display_1: 7rem;
  --font_size_display_2: 5.5rem;
  --font_size_display_3: 4.25rem;
  --font_size_h1: 3.25rem;
  --font_size_h2: 2.5rem;
  --font_size_h3: 2.1875rem;
  --font_size_h4: 1.5rem;
  --font_size_h5: 1.25rem;
  --font_size_body_2: 0.875rem;
  --font_size_body_3: 0.75rem;
  --font_size_caption: 0.625rem;

  @media only screen and (max-width: 599.98px) {
    --font_size_body_1: 14px;
    --font_size_display_1: 5.5rem;
    --font_size_display_2: 4.25rem;
    --font_size_display_3: 3.25rem;
    --font_size_h1: 2.5rem;
    --font_size_h2: 2.1875rem;
    --font_size_h3: 1.5rem;
    --font_size_h4: 1.25rem;
    --font_size_h5: 1rem;
  }
  @media only screen and (min-width: 600px) and (max-width: 959px) {
    --font_size_body_1: 15px;
  }

  // Space
  --space_very_small: 8px;
  --space_small: 16px;
  --space_medium: 24px;
  --space_large: 32px;
  --space_very_large: 40px;
  --space_extra_large: 80px;

  @media only screen and (max-width: 599.98px) {
    --space_very_small: 4px;
    --space_small: 8px;
    --space_medium: 16px;
    --space_large: 24px;
    --space_very_large: 24px;
    --space_extra_large: 24px;
  }

  // Colors
  --color_primary: #FF801A;
  --color_accent: #AC8A76;
  --color_tertiary: #7295AA;
  --color_neutral: #998F8A;

  --color_primary_0:   #000000;
  --color_primary_10:  #321300;
  --color_primary_20:  #522300;
  --color_primary_25:  #632c00;
  --color_primary_30:  #743500;
  --color_primary_35:  #863e00;
  --color_primary_40:  #994700;
  --color_primary_50:  #bf5b00;
  --color_primary_60:  #e66f00;
  --color_primary_70:  #ff8d3e;
  --color_primary_80:  #ffb68a;
  --color_primary_90:  #ffdbc8;
  --color_primary_95:  #ffede5;
  --color_primary_98:  #fff8f5;
  --color_primary_99:  #fffbff;
  --color_primary_100: #ffffff;

  --color_accent_0:   #000000;
  --color_accent_10:  #2b1709;
  --color_accent_20:  #432b1c;
  --color_accent_25:  #4f3626;
  --color_accent_30:  #5c4131;
  --color_accent_35:  #684c3c;
  --color_accent_40:  #755847;
  --color_accent_50:  #90705e;
  --color_accent_60:  #ac8a76;
  --color_accent_70:  #c8a48f;
  --color_accent_80:  #e5bfa9;
  --color_accent_90:  #ffdbc8;
  --color_accent_95:  #ffede5;
  --color_accent_98:  #fff8f5;
  --color_accent_99:  #fffbff;
  --color_accent_100: #ffffff;

  --color_error_0:   #000000;
  --color_error_10:  #410002;
  --color_error_20:  #690005;
  --color_error_25:  #7e0007;
  --color_error_30:  #93000a;
  --color_error_35:  #a80710;
  --color_error_40:  #ba1a1a;
  --color_error_50:  #de3730;
  --color_error_60:  #ff5449;
  --color_error_70:  #ff897d;
  --color_error_80:  #ffb4ab;
  --color_error_90:  #ffdad6;
  --color_error_95:  #ffedea;
  --color_error_98:  #fff8f7;
  --color_error_99:  #fffbff;
  --color_error_100: #ffffff;

  --color_neutral_0:   #000000;
  --color_neutral_10:  #201a17;
  --color_neutral_20:  #362f2c;
  --color_neutral_25:  #413a36;
  --color_neutral_30:  #4d4541;
  --color_neutral_35:  #59514d;
  --color_neutral_40:  #655d59;
  --color_neutral_50:  #7e7571;
  --color_neutral_60:  #998f8a;
  --color_neutral_70:  #b4a9a4;
  --color_neutral_80:  #d0c4bf;
  --color_neutral_90:  #ece0d8;
  --color_neutral_95:  #fbeee9;
  --color_neutral_98:  #fff8f5;
  --color_neutral_99:  #fffbff;
  --color_neutral_100: #ffffff;

  --surface_low: rgba(0, 8, 22, 0.25);
  --surface_medium: rgba(0, 8, 22, 0.5);
  --surface_high: rgba(0, 8, 22, 0.9);

  // Shadows
  --box_shadow_low: 0px 6px 24px 0px rgba(0,0,0,0.25);
  --box_shadow_medium: 0px 9px 35px 0px rgba(0,0,0,0.40);
  --box_shadow_high: 0px 11px 45px 0px rgba(0,0,0,0.65);
}


// ANGULAR SETTING
/*
$primary-palette: mat.define-palette((
  50:   var(--color_primary_99),
  100:  var(--color_primary_98),
  200:  var(--color_primary_95),
  300:  var(--color_primary_90),
  400:  var(--color_primary_80),
  500:  var(--color_primary_70),
  600:  var(--color_primary_60),
  700:  var(--color_primary_40),
  800:  var(--color_primary_20),
  900:  var(--color_primary_10),
  A100: var(--color_primary_95),
  A200: var(--color_primary_98),
  A400: var(--color_primary_99),
  A700: var(--color_primary_100),
  contrast: (
    50:   var(--color_primary_10),
    100:  var(--color_primary_10),
    200:  var(--color_primary_10),
    300:  var(--color_primary_10),
    400:  var(--color_primary_10),
    500:  var(--color_primary_95),
    600:  var(--color_primary_95),
    700:  var(--color_primary_95),
    800:  var(--color_primary_95),
    900:  var(--color_primary_95),
    A100: var(--color_primary_10),
    A200: var(--color_primary_10),
    A400: var(--color_primary_10),
    A700: var(--color_primary_10),
  ))
);

$accent-palette: mat.define-palette((
  50:   var(--color_accent_99),
  100:  var(--color_accent_98),
  200:  var(--color_accent_95),
  300:  var(--color_accent_90),
  400:  var(--color_accent_80),
  500:  var(--color_accent_70),
  600:  var(--color_accent_60),
  700:  var(--color_accent_40),
  800:  var(--color_accent_20),
  900:  var(--color_accent_10),
  A100: var(--color_accent_95),
  A200: var(--color_accent_98),
  A400: var(--color_accent_99),
  A700: var(--color_accent_100),
  contrast: (
    50:   var(--color_accent_10),
    100:  var(--color_accent_10),
    200:  var(--color_accent_10),
    300:  var(--color_accent_10),
    400:  var(--color_accent_10),
    500:  var(--color_accent_95),
    600:  var(--color_accent_95),
    700:  var(--color_accent_95),
    800:  var(--color_accent_95),
    900:  var(--color_accent_95),
    A100: var(--color_accent_10),
    A200: var(--color_accent_10),
    A400: var(--color_accent_10),
    A700: var(--color_accent_10),
  ))
);

$warn-palette: mat.define-palette((
  50:   var(--color_error_99),
  100:  var(--color_error_98),
  200:  var(--color_error_95),
  300:  var(--color_error_90),
  400:  var(--color_error_80),
  500:  var(--color_error_70),
  600:  var(--color_error_60),
  700:  var(--color_error_40),
  800:  var(--color_error_20),
  900:  var(--color_error_10),
  A100: var(--color_error_95),
  A200: var(--color_error_98),
  A400: var(--color_error_99),
  A700: var(--color_error_100),
  contrast: (
    50:   var(--color_error_10),
    100:  var(--color_error_10),
    200:  var(--color_error_10),
    300:  var(--color_error_10),
    400:  var(--color_error_10),
    500:  var(--color_error_95),
    600:  var(--color_error_95),
    700:  var(--color_error_95),
    800:  var(--color_error_95),
    900:  var(--color_error_95),
    A100: var(--color_error_10),
    A200: var(--color_error_10),
    A400: var(--color_error_10),
    A700: var(--color_error_10),
  ))
);

$my-primary: mat.define-palette($primary-palette);
$my-accent: mat.define-palette($accent-palette);
$my-warn: mat.define-palette($warn-palette);

$light-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
   warn: $my-warn
 ),
 typography: mat.define-typography-config(
  $font-family: '"Source Sans Pro", sans-serif'
  ),
 density: 0,
));

@include mat.core-theme($light-theme);
@include mat.all-component-themes($light-theme);
*/

html, body { height: 100%; scroll-behavior: smooth; }
body, .mat-body, .mat-typography {
  font: 400 var(--font_size_body_1)/20px var(--font_text);
  font-family: var(--font_text);
  font-size: var(--font_size_body_1);
  margin: 0;
}


// TYPOGRAPHY

.display_1, .display_2, .display_3, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5{
  font-family: var(--font_title);
}

.display_1 { font-size: var(--font_size_display_1); }
.display_2 { font-size: var(--font_size_display_2); }
.display_3 { font-size: var(--font_size_display_3); }
h1,.h1 { font-size: var(--font_size_h1); margin-top: 0; line-height: 1; }
h2,.h2 { font-size: var(--font_size_h2); line-height: 1.1; }
h3,.h3 { font-size: var(--font_size_h3); line-height: 1.2; }
h4,.h4 { font-size: var(--font_size_h4); }
h5,.h5 { font-size: var(--font_size_h5); }
p, .body, .body_1 { font-size: var(--font_size_body_1); }
.body_2, .mat-small { font-size: var(--font_size_body_2); }
.body_3 { font-size: var(--font_size_body_3); }
.caption { font-size: var(--font_size_caption); }

ul{
  padding-left: var(--space_small);
  li{
    margin-bottom: 0px;
  }
}

button, .mdc-button {
  font-family: var(--font_text);
  letter-spacing: 0.4px;
  font-weight: 600;
}


// GENERAL STYLES

@keyframes introComponentBlur {
  0% { opacity: 0; filter: blur(10px); -webkit-filter: blur(10px);}
  100% { opacity: 1; filter: blur(0px); -webkit-filter: blur(0px); }
}

@-o-keyframes introComponentBlur {
  0% { opacity: 0; filter: blur(10px); -webkit-filter: blur(10px); }
  100% { opacity: 1; filter: blur(0px); -webkit-filter: blur(0px); }
}

@-webkit-keyframes introComponentBlur {
  0% { opacity: 0; filter: blur(10px); -webkit-filter: blur(10px);}
  100% { opacity: 1; filter: blur(0px); -webkit-filter: blur(0px); }
}

@-moz-keyframes introComponentBlur {
  0% { opacity: 0; filter: blur(10px); -webkit-filter: blur(10px); }
  100% { opacity: 1; filter: blur(0px); -webkit-filter: blur(0px); }
}

.tots_left_sidebar_button_item{
  cursor: pointer !important;
  width: 100% !important;
  border-radius: 0 !important;
  color: var(--color_neutral_80) !important;
  height: initial !important;
  position: relative !important;
  text-align: left !important;
  justify-content: flex-start !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  font-size: var(--font_size_body_1) !important;
  gap: var(--space_small) !important;
  padding: 12px var(--space_small) !important;

  @media only screen and (max-width: 599.98px) {
    padding: var(--space_medium) !important;
  }

  &:hover {
    color: var(--color_neutral_90) !important;
    .nav-item-title {
      left: var(--space_very_small) !important;
    }

    .mdc-button__ripple {
      width: 100% !important;
    }
  }

  .mdc-button__label{
    display: flex !important;
    align-items: center !important;
    gap: var(--space_small) !important;
    width: 100% !important;
  }

  .mdc-button__ripple {
    background-color: rgba($color: white, $alpha: 0.1) !important;
    width: 0 !important;
    height: 100% !important;
    transition: var(--animation) !important;
    -o-transition: var(--animation) !important;
    -moz-transition: var(--animation) !important;
    -webkit-transition: var(--animation) !important;
    top: 0% !important;
    left: 0% !important;
  }

  .nav-item-icon {
    color: inherit !important;
    margin: 0 !important;
  }

  .nav-item-title {
    transition: var(--animation) !important;
    -o-transition: var(--animation) !important;
    -moz-transition: var(--animation) !important;
    -webkit-transition: var(--animation) !important;
    color: inherit !important;
    position: relative !important;
    left: 0 !important;
  }
}

.tots_left_sidebar_button_item_active {
  background-color: var(--color_accent_30) !important;
  color: var(--color_primary_70) !important;
  .nav-item-icon {
    color: var(--color_primary_70) !important;
  }
  .nav-item-title {
    color: var(--color_primary_70) !important;
  }
}

.animated {
  transition: var(--animation);
  -moz-transition: var(--animation);
  -o-transition: var(--animation);
  -webkit-transition: var(--animation);
}

.animated_fast {
  transition: var(--animation_fast);
  -moz-transition: var(--animation_fast);
  -o-transition: var(--animation_fast);
  -webkit-transition: var(--animation_fast);
}

.animated_medium {
  transition: var(--animation_medium);
  -moz-transition: var(--animation_medium);
  -o-transition: var(--animation_medium);
  -webkit-transition: var(--animation_medium);
}

.animated_slow {
  transition: var(--animation_slow);
  -moz-transition: var(--animation_slow);
  -o-transition: var(--animation_slow);
  -webkit-transition: var(--animation_slow);
}

.animated_very_slow {
  transition: var(--animation_very_slow);
  -moz-transition: var(--animation_very_slow);
  -o-transition: var(--animation_very_slow);
  -webkit-transition: var(--animation_very_slow);
}

.intro_component_blur, .intro_component_animation{
  animation: introComponentBlur 0.3s ease;
  -o-animation: introComponentBlur 0.3s ease;
  -moz-animation: introComponentBlur 0.3s ease;
  -webkit-animation: introComponentBlur 0.3s ease;
}

.container{
  padding: var(--space_very_large) var(--space_extra_large);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.image_container{
  overflow: hidden;
  position: relative;
  display: flex;
}

.avatar_container{
  width: 160px;
  height: 160px;
  min-width: 160px;
  max-width: 160px;
  min-height: 160px;
  max-height: 160px;
  border-radius: 160px;
  overflow: hidden;
  position: relative;

    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
}

.avatar_container_very_small{
  width: 24px;
  height: 24px;
  min-width: 24px;
  max-width: 24px;
  min-height: 24px;
  max-height: 24px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;

  img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.image_cover{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image_contain{
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.box {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: var(--color_neutral_100);
  padding: 24px;
  border-radius: 4px;
}

.box_border{
  background-color: transparent;
  border: 1px solid var(--color_neutral_90);
}

.row {
  display: flex;
  gap: 40px;

  @media only screen and (max-width: 599.98px) {
    flex-direction: column;
    gap: 24px;
  }
}

.d_flex{
  display: flex;
}

.flex_wrap{
  flex-wrap: wrap;
}

.flex_column{
  flex-direction: column;
}

.align_center{
  align-items: center;
}

.align_start{
  align-items: flex-start;
}

.justify_center{
  justify-content: center;
}

.position_relative{
  position: relative;
}

.position_absolute{
  position: absolute;
}

.position_absolute_center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.gap_0              { gap: 0px  !important; }
.gap_1, .gap_low    { gap: var(--space_very_small) !important; }
.gap_2              { gap: var(--space_small) !important; }
.gap_3, .gap_medium { gap: var(--space_medium) !important; }
.gap_4              { gap: var(--space_large) !important; }
.gap_5, .gap_high   { gap: var(--space_very_large) !important; }
.gap_6              { gap: var(--space_extra_large) !important; }

.p_0 { padding: 0px  !important; }
.p_1 { padding: var(--space_very_small)  !important; }
.p_2 { padding: var(--space_small) !important; }
.p_3 { padding: var(--space_medium) !important; }
.p_4 { padding: var(--space_large) !important; }
.p_5 { padding: var(--space_very_large) !important; }
.p_6 { padding: var(--space_extra_large) !important; }

.px_0 { padding-left: 0px  !important; padding-right: 0px  !important; }
.px_1 { padding-left: var(--space_very_small)  !important; padding-right: var(--space_very_small)  !important; }
.px_2 { padding-left: var(--space_small) !important;       padding-right: var(--space_small) !important; }
.px_3 { padding-left: var(--space_medium) !important;      padding-right: var(--space_medium) !important; }
.px_4 { padding-left: var(--space_large) !important;       padding-right: var(--space_large) !important; }
.px_5 { padding-left: var(--space_very_large) !important;  padding-right: var(--space_very_large) !important; }
.px_6 { padding-left: var(--space_extra_large) !important; padding-right: var(--space_extra_large) !important; }

.py_0 { padding-top: 0px  !important; padding-bottom: 0px  !important; }
.py_1 { padding-top: var(--space_very_small)  !important; padding-bottom: var(--space_very_small)  !important; }
.py_2 { padding-top: var(--space_small) !important;       padding-bottom: var(--space_small) !important; }
.py_3 { padding-top: var(--space_medium) !important;      padding-bottom: var(--space_medium) !important; }
.py_4 { padding-top: var(--space_large) !important;       padding-bottom: var(--space_large) !important; }
.py_5 { padding-top: var(--space_very_large) !important;  padding-bottom: var(--space_very_large) !important; }
.py_6 { padding-top: var(--space_extra_large) !important; padding-bottom: var(--space_extra_large) !important; }

.pt_0 { padding-top: 0px  !important; }
.pt_1 { padding-top: var(--space_very_small)  !important; }
.pt_2 { padding-top: var(--space_small) !important; }
.pt_3 { padding-top: var(--space_medium) !important; }
.pt_4 { padding-top: var(--space_large) !important; }
.pt_5 { padding-top: var(--space_very_large) !important; }
.pt_6 { padding-top: var(--space_extra_large) !important; }

.pb_0 { padding-bottom: 0px  !important; }
.pb_1 { padding-bottom: var(--space_very_small)  !important; }
.pb_2 { padding-bottom: var(--space_small) !important; }
.pb_3 { padding-bottom: var(--space_medium) !important; }
.pb_4 { padding-bottom: var(--space_large) !important; }
.pb_5 { padding-bottom: var(--space_very_large) !important; }
.pb_6 { padding-bottom: var(--space_extra_large) !important; }

.pl_0 { padding-left: 0px  !important; }
.pl_1 { padding-left: var(--space_very_small)  !important; }
.pl_2 { padding-left: var(--space_small) !important; }
.pl_3 { padding-left: var(--space_medium) !important; }
.pl_4 { padding-left: var(--space_large) !important; }
.pl_5 { padding-left: var(--space_very_large) !important; }
.pl_6 { padding-left: var(--space_extra_large) !important; }

.pr_0 { padding-right: 0px  !important; }
.pr_1 { padding-right: var(--space_very_small)  !important; }
.pr_2 { padding-right: var(--space_small) !important; }
.pr_3 { padding-right: var(--space_medium) !important; }
.pr_4 { padding-right: var(--space_large) !important; }
.pr_5 { padding-right: var(--space_very_large) !important; }
.pr_6 { padding-right: var(--space_extra_large) !important; }

.br_0 { border-radius: 0px  !important; }
.br_1 { border-radius: var(--space_very_small)  !important; }
.br_2 { border-radius: var(--space_small) !important; }
.br_3 { border-radius: var(--space_medium) !important; }
.br_4 { border-radius: var(--space_large) !important; }
.br_5 { border-radius: var(--space_very_large) !important; }
.br_6 { border-radius: var(--space_extra_large) !important; }
.br_circle { border-radius: 20000px !important; }

.m_0 { margin: 0px  !important; }
.m_1 { margin: var(--space_very_small)  !important; }
.m_2 { margin: var(--space_small) !important; }
.m_3 { margin: var(--space_medium) !important; }
.m_4 { margin: var(--space_large) !important; }
.m_5 { margin: var(--space_very_large) !important; }
.m_6 { margin: var(--space_extra_large) !important; }

.mx_0 { margin-left: 0px  !important; margin-right: 0px  !important; }
.mx_1 { margin-left: var(--space_very_small)  !important; margin-right: var(--space_very_small)  !important; }
.mx_2 { margin-left: var(--space_small) !important;       margin-right: var(--space_small) !important; }
.mx_3 { margin-left: var(--space_medium) !important;      margin-right: var(--space_medium) !important; }
.mx_4 { margin-left: var(--space_large) !important;       margin-right: var(--space_large) !important; }
.mx_5 { margin-left: var(--space_very_large) !important;  margin-right: var(--space_very_large) !important; }
.mx_6 { margin-left: var(--space_extra_large) !important; margin-right: var(--space_extra_large) !important; }

.my_0 { margin-top: 0px  !important; margin-bottom: 0px  !important; }
.my_1 { margin-top: var(--space_very_small)  !important; margin-bottom: var(--space_very_small)  !important; }
.my_2 { margin-top: var(--space_small) !important;       margin-bottom: var(--space_small) !important; }
.my_3 { margin-top: var(--space_medium) !important;      margin-bottom: var(--space_medium) !important; }
.my_4 { margin-top: var(--space_large) !important;       margin-bottom: var(--space_large) !important; }
.my_5 { margin-top: var(--space_very_large) !important;  margin-bottom: var(--space_very_large) !important; }
.my_6 { margin-top: var(--space_extra_large) !important; margin-bottom: var(--space_extra_large) !important; }

.mt_0 { margin-top: 0px  !important; }
.mt_1 { margin-top: var(--space_very_small)  !important; }
.mt_2 { margin-top: var(--space_small) !important; }
.mt_3 { margin-top: var(--space_medium) !important; }
.mt_4 { margin-top: var(--space_large) !important; }
.mt_5 { margin-top: var(--space_very_large) !important; }
.mt_6 { margin-top: var(--space_extra_large) !important; }

.mb_0 { margin-bottom: 0px  !important; }
.mb_1 { margin-bottom: var(--space_very_small)  !important; }
.mb_2 { margin-bottom: var(--space_small) !important; }
.mb_3 { margin-bottom: var(--space_medium) !important; }
.mb_4 { margin-bottom: var(--space_large) !important; }
.mb_5 { margin-bottom: var(--space_very_large) !important; }
.mb_6 { margin-bottom: var(--space_extra_large) !important; }

.ml_0 { margin-left: 0px  !important; }
.ml_1 { margin-left: var(--space_very_small)  !important; }
.ml_2 { margin-left: var(--space_small) !important; }
.ml_3 { margin-left: var(--space_medium) !important; }
.ml_4 { margin-left: var(--space_large) !important; }
.ml_5 { margin-left: var(--space_very_large) !important; }
.ml_6 { margin-left: var(--space_extra_large) !important; }

.mr_0 { margin-right: 0px  !important; }
.mr_1 { margin-right: var(--space_very_small)  !important; }
.mr_2 { margin-right: var(--space_small) !important; }
.mr_3 { margin-right: var(--space_medium) !important; }
.mr_4 { margin-right: var(--space_large) !important; }
.mr_5 { margin-right: var(--space_very_large) !important; }
.mr_6 { margin-right: var(--space_extra_large) !important; }

.mt_auto { margin-top: auto    !important; }
.mb_auto { margin-bottom: auto !important; }
.ml_auto { margin-left: auto   !important; }
.mr_auto { margin-right: auto  !important; }
.mx_auto { margin-left: auto   !important; margin-right: auto  !important; }
.my_auto { margin-top: auto    !important; margin-bottom: auto !important; }

.bg_primary_10 { background-color: var(--color_primary_10) }
.bg_primary_20 { background-color: var(--color_primary_20) }
.bg_primary_25 { background-color: var(--color_primary_25) }
.bg_primary_30 { background-color: var(--color_primary_30) }
.bg_primary_35 { background-color: var(--color_primary_35) }
.bg_primary_40 { background-color: var(--color_primary_40) }
.bg_primary_50 { background-color: var(--color_primary_50) }
.bg_primary_60 { background-color: var(--color_primary_60) }
.bg_primary_70 { background-color: var(--color_primary_70) }
.bg_primary_80 { background-color: var(--color_primary_80) }
.bg_primary_90 { background-color: var(--color_primary_90) }
.bg_primary_95 { background-color: var(--color_primary_95) }
.bg_primary_98 { background-color: var(--color_primary_98) }
.bg_primary_99 { background-color: var(--color_primary_99) }

.bg_accent_10 { background-color: var(--color_accent_10) }
.bg_accent_20 { background-color: var(--color_accent_20) }
.bg_accent_25 { background-color: var(--color_accent_25) }
.bg_accent_30 { background-color: var(--color_accent_30) }
.bg_accent_35 { background-color: var(--color_accent_35) }
.bg_accent_40 { background-color: var(--color_accent_40) }
.bg_accent_50 { background-color: var(--color_accent_50) }
.bg_accent_60 { background-color: var(--color_accent_60) }
.bg_accent_70 { background-color: var(--color_accent_70) }
.bg_accent_80 { background-color: var(--color_accent_80) }
.bg_accent_90 { background-color: var(--color_accent_90) }
.bg_accent_95 { background-color: var(--color_accent_95) }
.bg_accent_98 { background-color: var(--color_accent_98) }
.bg_accent_99 { background-color: var(--color_accent_99) }

.bg_error_10 { background-color: var(--color_error_10) }
.bg_error_20 { background-color: var(--color_error_20) }
.bg_error_25 { background-color: var(--color_error_25) }
.bg_error_30 { background-color: var(--color_error_30) }
.bg_error_35 { background-color: var(--color_error_35) }
.bg_error_40 { background-color: var(--color_error_40) }
.bg_error_50 { background-color: var(--color_error_50) }
.bg_error_60 { background-color: var(--color_error_60) }
.bg_error_70 { background-color: var(--color_error_70) }
.bg_error_80 { background-color: var(--color_error_80) }
.bg_error_90 { background-color: var(--color_error_90) }
.bg_error_95 { background-color: var(--color_error_95) }
.bg_error_98 { background-color: var(--color_error_98) }
.bg_error_99 { background-color: var(--color_error_99) }

.bg_neutral_10 { background-color: var(--color_neutral_10) }
.bg_neutral_20 { background-color: var(--color_neutral_20) }
.bg_neutral_25 { background-color: var(--color_neutral_25) }
.bg_neutral_30 { background-color: var(--color_neutral_30) }
.bg_neutral_35 { background-color: var(--color_neutral_35) }
.bg_neutral_40 { background-color: var(--color_neutral_40) }
.bg_neutral_50 { background-color: var(--color_neutral_50) }
.bg_neutral_60 { background-color: var(--color_neutral_60) }
.bg_neutral_70 { background-color: var(--color_neutral_70) }
.bg_neutral_80 { background-color: var(--color_neutral_80) }
.bg_neutral_90 { background-color: var(--color_neutral_90) }
.bg_neutral_95 { background-color: var(--color_neutral_95) }
.bg_neutral_98 { background-color: var(--color_neutral_98) }
.bg_neutral_99 { background-color: var(--color_neutral_99) }

.color_primary_10 { color: var(--color_primary_10) }
.color_primary_20 { color: var(--color_primary_20) }
.color_primary_25 { color: var(--color_primary_25) }
.color_primary_30 { color: var(--color_primary_30) }
.color_primary_35 { color: var(--color_primary_35) }
.color_primary_40 { color: var(--color_primary_40) }
.color_primary_50 { color: var(--color_primary_50) }
.color_primary_60 { color: var(--color_primary_60) }
.color_primary_70 { color: var(--color_primary_70) }
.color_primary_80 { color: var(--color_primary_80) }
.color_primary_90 { color: var(--color_primary_90) }
.color_primary_95 { color: var(--color_primary_95) }
.color_primary_98 { color: var(--color_primary_98) }
.color_primary_99 { color: var(--color_primary_99) }

.color_accent_10 { color: var(--color_accent_10) }
.color_accent_20 { color: var(--color_accent_20) }
.color_accent_25 { color: var(--color_accent_25) }
.color_accent_30 { color: var(--color_accent_30) }
.color_accent_35 { color: var(--color_accent_35) }
.color_accent_40 { color: var(--color_accent_40) }
.color_accent_50 { color: var(--color_accent_50) }
.color_accent_60 { color: var(--color_accent_60) }
.color_accent_70 { color: var(--color_accent_70) }
.color_accent_80 { color: var(--color_accent_80) }
.color_accent_90 { color: var(--color_accent_90) }
.color_accent_95 { color: var(--color_accent_95) }
.color_accent_98 { color: var(--color_accent_98) }
.color_accent_99 { color: var(--color_accent_99) }

.color_error_10 { color: var(--color_error_10) }
.color_error_20 { color: var(--color_error_20) }
.color_error_25 { color: var(--color_error_25) }
.color_error_30 { color: var(--color_error_30) }
.color_error_35 { color: var(--color_error_35) }
.color_error_40 { color: var(--color_error_40) }
.color_error_50 { color: var(--color_error_50) }
.color_error_60 { color: var(--color_error_60) }
.color_error_70 { color: var(--color_error_70) }
.color_error_80 { color: var(--color_error_80) }
.color_error_90 { color: var(--color_error_90) }
.color_error_95 { color: var(--color_error_95) }
.color_error_98 { color: var(--color_error_98) }
.color_error_99 { color: var(--color_error_99) }

.color_neutral_10 { color: var(--color_neutral_10) }
.color_neutral_20 { color: var(--color_neutral_20) }
.color_neutral_25 { color: var(--color_neutral_25) }
.color_neutral_30 { color: var(--color_neutral_30) }
.color_neutral_35 { color: var(--color_neutral_35) }
.color_neutral_40 { color: var(--color_neutral_40) }
.color_neutral_50 { color: var(--color_neutral_50) }
.color_neutral_60 { color: var(--color_neutral_60) }
.color_neutral_70 { color: var(--color_neutral_70) }
.color_neutral_80 { color: var(--color_neutral_80) }
.color_neutral_90 { color: var(--color_neutral_90) }
.color_neutral_95 { color: var(--color_neutral_95) }
.color_neutral_98 { color: var(--color_neutral_98) }
.color_neutral_99 { color: var(--color_neutral_99) }