/**
 * material-design-lite - Material Design Components in CSS, JS and HTML
 * @version v1.3.0
 * @license Apache-2.0
 * @copyright 2015 Google, Inc.
 * @link https://github.com/google/material-design-lite
 */
@charset "UTF-8";

/* ==========================================================================
                                Base styles: opinionated defaults
 ========================================================================== */

:root {
  --primary100: #EDE1F5;
  --primary200: #DAC3EA;
  --primary300: #C8A5E0;
  --primary400: #B587D6;
  --primary500: #A369CC;
  --primary600: #914BC1;
  --primary700: #7C3AAA;
  --primary800: #66308C;
  --primary900: #542874;
  --primary1000: #431F5C;

  --secondary100: #FFEEDB;
  --secondary200: #FFDDB6;
  --secondary300: #FFCC92;
  --secondary400: #FEBB6E;
  --secondary500: #FEAA49;
  --secondary600: #FE9925;
  --secondary700: #FC8701;
  --secondary800: #D67301;
  --secondary900: #B05F01;
  --secondary1000: #8B4A01;

  --neutrals100: #F7F6F6;
  --neutrals200: #ECEAEA;
  --neutrals300: #E0E0E0;
  --neutrals400: #D3D3D3;
  --neutrals500: #B5B5B5;
  --neutrals600: #9E9B9B;
  --neutrals700: #8C8A8A;
  --neutrals800: #757575;
  --neutrals900: #595858;
  --neutrals1000: #474545;

  --error100: #FCE1DD;
  --error200: #FAC2BB;
  --error300: #F7A498;
  --error400: #F58576;
  --error500: #F58576;
  --error600: #EF4831;
  --error700: #E92C12;
  --error800: #C6250F;
  --error900: #A31F0C;
  --error1000: #80180A;

  --warning100: #FFF8E0;
  --warning200: #FFF2C2;
  --warning300: #FFEBA3;
  --warning400: #FFE485;
  --warning500: #FFDB5D;
  --warning600: #FFD234;
  --warning700: #FFC90C;
  --warning800: #E3B100;
  --warning900: #BB9100;
  --warning1000: #927200;

  --success100: #E8FCF9;
  --success200: #D2FAF3;
  --success300: #BBF7ED;
  --success400: #A4F4E7;
  --success500: #58EBD3;
  --success600: #32E6C9;
  --success700: #1AD4B6;
  --success900: #15AE96;
  --success900: #15AE96;
  --success1000: #108975;

  --info100: #E1ECF7;
  --info200: #C2D9EE;
  --info300: #A4C6E6;
  --info400: #85B3DD;
  --info500: #4B8ECD;
  --info600: #357CBF;
  --info700: #2D6AA2;
  --info800: #255786;
  --info900: #1D4569;
  --info1000: #15324D;

  --transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

html {
  color: var(--neutral5) var(--transition);
  font-size: 1em;
  line-height: 1.4;
  width: 100%;
  height: 100%;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background-color: #fff !important;
  overflow-x: hidden;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: var(--neutrals1000);
}

body.modal-open {
  height: 100vh;
  overflow-y: hidden;
}

body.modal-open .header-bar {
  display: none !important;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

a {
  cursor: pointer;
}

/*
                                 * A better looking default horizontal rule
                                 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--neutrals200);
  ;
  margin: 1em 0;
  padding: 0;
}

/*
                                 * Remove the gap between audio, canvas, iframes,
                                 * images, videos and the bottom of their containers:
                                 * https://github.com/h5bp/html5-boilerplate/issues/440
                                 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
                                 * Remove default fieldset styles.
                                 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
                                 * Allow only vertical resizing of textareas.
                                 */
textarea {
  resize: vertical;
}


.tar {
  text-align: right !important;
}

.tal {
  text-align: left !important;
}

.tac {
  text-align: center !important;
}

.taj {
  text-align: justify !important;
}

.j-space-between {
  justify-content: space-between !important;
}

.j-center {
  justify-content: center !important;
}

.pr-1 {
  padding-right: 1rem !important;
}

/* ==========================================================================
                                   Browser Upgrade Prompt
                                   ========================================================================== */
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: var(--neutral5);
  padding: 0.2em 0;
}

.hidden {
  display: none !important;
}

.gap-1 {
  gap: 4px;
}

.gap-2 {
  gap: .5rem;
}

.gap-3 {
  gap: 1rem;
}

.gap-4 {
  gap: 1.5rem;
}

.gap-5 {
  gap: 2rem;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

:focus-visible {
  outline: var(--primary600) auto 1px;
}

.invisible {
  visibility: hidden;
}

.visible {
  display: block !important;
}

.highlight {
  color: var(--secondarycolor) !important;
}

.bold {
  font-weight: 700 !important;
}

.small-proportion {
  font-size: 0.8em;
}

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

.fa-stack.small {
  font-size: 0.5em;
}

.fa-1-5x {
  font-size: 1.5em;
}

.desk {
  display: none;
}

@media screen and (min-width: 768px) {
  .desk {
    display: initial;
  }
}

@media screen and (min-width: 768px) {
  .mov {
    display: none !important;
  }
}

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}


@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}


@media print {

  *,
  *:before,
  *:after,
  *:first-letter {
    background: transparent !important;
    color: var(--neutral5) !important;
    /* Black prints faster: http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
  }

  a,
  .secondarycolor,
  .underline {
    color: var(--primary800);
    font-weight: 500;
  }

  a.underline:hover {
    color: var(--primary600);
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
                                     * Don't show links that are fragment identifiers,
                                     * or use the `javascript:` pseudo protocol
                                     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }


  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

a,
.mdl-accordion,
.mdl-button,
.mdl-card,
.mdl-checkbox,
.mdl-dropdown-menu,
.mdl-icon-toggle,
.mdl-item,
.mdl-radio,
.mdl-slider,
.mdl-switch,
.mdl-tabs__tab {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/*
                                 * Make html take up the entire screen
                                 * Then set touch-action to avoid touch delay on mobile IE
                                 */
html {
  width: 100%;
  height: 100%;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

/*
                                * Make body take up the entire screen
                                * Remove body margin so layout containers don't cause extra overflow.
                                */
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background-color: #fff;
  overflow-x: hidden;
}


.main-content {
  background-color: #fff;
}


/*
                                 * Main display reset for IE support.
                                 * Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011
                                 */
main {
  display: block;
}

/*
                                * Apply no display to elements with the hidden attribute.
                                * IE 9 and 10 support.
                                */
*[hidden] {
  display: none !important;
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  font-weight: 400;
}



.omnilife-v2 h1,
.omnilife-v2 .h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 56px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.omnilife-v2 h2,
.omnilife-v2 .h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 34px;
}

.omnilife-v2 .h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 34px;
  line-height: 40px;
}

.omnilife-v2 h4,
.omnilife-v2 .h4 {
  font-family: "Noto Sans", sans-serif;
  font-size: 24px;
  line-height: 32px;
  -moz-osx-font-smoothing: grayscale;
}

.omnilife-v2 h5,
.omnilife-v2 .h5 {
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.omnilife-v2 h6,
.omnilife-v2 .h6 {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.04em;
}

.omnilife-v2 p {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}



blockquote {
  font-family: "Noto Sans", sans-serif;
  position: relative;
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

blockquote:before {
  position: absolute;
  left: -1em;
  content: '\f10d';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
}

blockquote:after {
  content: '\f10e';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  margin-left: -.05em
}

mark {
  background-color: #f4ff81;
}

dt {
  font-weight: 700;
}

address {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  font-style: normal;
}

ul,
ol {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}


.mdl-typography--display-4 {
  font-family: "Noto Sans", sans-serif;
  font-size: 112px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

.mdl-typography--display-4-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 112px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: 0.54;
}

.mdl-typography--display-3 {
  font-family: "Noto Sans", sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.mdl-typography--display-3-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  opacity: 0.54;
}

.mdl-typography--display-2 {
  font-family: "Noto Sans", sans-serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 48px;
}

.mdl-typography--display-2-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 48px;
  opacity: 0.54;
}

.mdl-typography--display-1 {
  font-family: "Noto Sans", sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 40px;
}

.mdl-typography--display-1-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 40px;
  opacity: 0.54;
}

.mdl-typography--headline {
  font-family: "Noto Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  -moz-osx-font-smoothing: grayscale;
}

.mdl-typography--headline-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0.87;
}

.mdl-typography--title {
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.mdl-typography--title-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0.87;
}

.mdl-typography--subhead {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
}

.mdl-typography--subhead-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
  opacity: 0.87;
}

.mdl-typography--body-2 {
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  letter-spacing: 0;
}

.mdl-typography--body-2-color-contrast {
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  letter-spacing: 0;
  opacity: 0.87;
}

.mdl-typography--body-1 {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.mdl-typography--body-1-color-contrast {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  opacity: 0.87;
}

.mdl-typography--body-2-force-preferred-font {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
}

.mdl-typography--body-2-force-preferred-font-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  opacity: 0.87;
}

.mdl-typography--body-1-force-preferred-font {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.mdl-typography--body-1-force-preferred-font-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  opacity: 0.87;
}

.mdl-typography--caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.mdl-typography--caption-force-preferred-font {
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.mdl-typography--caption-color-contrast {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.54;
}

.mdl-typography--caption-force-preferred-font-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.54;
}

.mdl-typography--menu {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.mdl-typography--menu-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.87;
}

.mdl-typography--button {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
}

.mdl-typography--button-color-contrast {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.87;
}

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

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

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

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

.mdl-typography--text-nowrap {
  white-space: nowrap;
}

.mdl-typography--text-lowercase {
  text-transform: lowercase;
}

.mdl-typography--text-uppercase {
  text-transform: uppercase;
}

.mdl-typography--text-capitalize {
  text-transform: capitalize;
}

.mdl-typography--font-thin {
  font-weight: 200 !important;
}

.mdl-typography--font-light {
  font-weight: 300 !important;
}

.mdl-typography--font-regular {
  font-weight: 400 !important;
}

.mdl-typography--font-medium {
  font-weight: 500 !important;
}

.mdl-typography--font-bold {
  font-weight: 700 !important;
}

.mdl-typography--font-black {
  font-weight: 900 !important;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  word-wrap: normal;
  -moz-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* Colors */

.color-primary {
  color: var(--primary800) !important;
}

.color-primary1 {
  color: var(--primary100) !important;
}

.color-primary2 {
  color: var(--primary400) !important;
}

.color-primary3 {
  color: var(--primary600) !important;
}

.color-primary4 {
  color: var(--primary700) !important;
}

.color-primary5 {
  color: var(--primary900) !important;
}

.color-primary1000 {
  color: var(--primary1000) !important;
}

.color-neutral {
  color: var(--neutral) !important;
}

.color-neutral1 {
  color: var(--neutral1) !important;
}

.color-neutral2 {
  color: var(--neutral2) !important;
}

.color-neutral3 {
  color: var(--neutral3) !important;
}

.color-neutral4 {
  color: var(--neutral4) !important;
}

.color-neutral5 {
  color: var(--neutral5) !important;
}

.bg-primary {
  background-color: var(--primary800) !important;
  color: #fff;
}

.bg-primary1 {
  background-color: var(--primary100) !important;
}

.bg-primary2 {
  background-color: var(--primary400) !important;
}

.bg-primary3 {
  background-color: var(--primary600) !important;
  color: #fff;
}

.bg-primary4 {
  background-color: var(--primary700) !important;
  color: #fff;
}

.bg-primary5 {
  background-color: var(--primary900) !important;
  color: #fff;
}


.color-secondary {
  color: var(--secondary600) !important;
}

.color-secondary1 {
  color: var(--secondary100) !important;
}

.color-secondary2 {
  color: var(--secondary200) !important;
}

.color-secondary3 {
  color: var(--secondary400) !important;
}

.color-secondary4 {
  color: var(--secondary500) !important;
}

.color-secondary5 {
  color: var(--secondary900) !important;
}

.color-secondary6 {
  color: var(--secondary700) !important;
}

.bg-secondary {
  background-color: var(--secondary600) !important;
  color: #fff;
}

.bg-secondary1 {
  background-color: var(--secondary100) !important;
}

.bg-secondary2 {
  background-color: var(--secondary200) !important;
}

.bg-secondary3 {
  background-color: var(--secondary400) !important;
}

.bg-secondary4 {
  background-color: var(--secondary500) !important;
  color: #fff;
}

.bg-secondary5 {
  background-color: var(--secondary900) !important;
  color: #fff;
}

.bg-neutral {
  background-color: #fff;
}

.bg-neutral1 {
  background-color: var(--neutral1) !important;
}

.bg-neutral2 {
  background-color: var(--neutral2) !important;
}

.bg-neutral3 {
  background-color: var(--neutral3) !important;
}

.bg-neutral4 {
  background-color: var(--neutral4) !important;
  color: #fff;
}

.bg-neutral5 {
  background-color: var(--neutral5) !important;
  color: #fff;
}

.mdl-secondary-color {
  color: var(--secondary600) !important;
}

.mdl-color-text--indigo {
  color: var(--primary800) !important;
}


.mdl-color--primary {
  color: var(--primary800) !important;
}

.mdl-color--primary-contrast {
  color: rgb(255, 255, 255) !important;
}

.mdl-color--accent {
  color: var(--secondary600) !important;
}

.mdl-color--accent-contrast {
  color: rgb(255, 255, 255) !important;
}

.mdl-color-text--primary {
  color: var(--primary800) !important;
}

.mdl-color-white {
  color: rgb(255, 255, 255) !important;
}


.mdl-color-text--accent {
  color: var(--secondary600) !important;
}

.mdl-color-text--accent-contrast {
  color: rgb(255, 255, 255) !important;
}


/* CHIP */
.mdl-ripple {
  background: #5f00a5;
  border-radius: 50%;
  height: 50px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50px;
  overflow: hidden;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .mdl-ripple {
    background: #5f00a5;
    opacity: 0.001;
  }
}

.mdl-ripple.is-animating {
  transition: width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.mdl-ripple.is-visible {
  opacity: 0.3;
}


/* transitions */
.mdl-animation--default {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-animation--fast-out-slow-in {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-animation--linear-out-slow-in {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.mdl-animation--fast-out-linear-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}


/* CHIP */
.mdl-badge {
  position: relative;
  white-space: nowrap;
  margin-right: 24px;
}

.mdl-badge:not([data-badge]) {
  margin-right: auto;
}

.mdl-badge[data-badge]:after {
  content: attr(data-badge);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: -11px;
  right: -24px;
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary600);
  color: rgb(255, 255, 255);
}

.mdl-button .mdl-badge[data-badge]:after {
  top: -10px;
  right: -5px;
}

.mdl-badge.mdl-badge--no-background[data-badge]:after {
  color: var(--primary600);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 1px gray;
}

.mdl-badge.mdl-badge--overlap {
  margin-right: 10px;
}

.mdl-badge.mdl-badge--overlap:after {
  right: -10px;
}

.full-width {
  width: 100% !important;
  max-width: 100% !important;
}

.mdl-button {
  border: none;
  color: var(--primary700);
  border-radius: 120px;
  position: relative;
  background: none;
  margin: 0;
  min-width: 64px;
  padding: 16px 24px;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  font-family: "Noto Sans", sans-serif;
  gap: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  will-change: box-shadow;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
}

.mdl-button::-moz-focus-inner {
  border: 0;
}

.mdl-button:hover {
  color: var(--primary700);
  background-color: var(--primary100);
}

.mdl-button:focus:not(:active) {
  background-color: var(--primary100);
}

.mdl-button:active {
  background-color: var(--primary1);
}

.mdl-button.primary:active {
  background-color: var(--primary1);
  box-shadow: 0 4px 5px 0 #7f44a887, 0 1px 10px 0 #66308c3d, 0 2px 4px -1px #66308c21;
}

.mdl-button.secondary:active {
  background-color: var(--primary1);
  box-shadow: 0 4px 5px 0 #7f44a887, 0 1px 10px 0 #66308c3d, 0 2px 4px -1px #66308c21;
}

.mdl-button.mdl-button--colored {
  color: var(--primary800);
}

.mdl-button--accent:focus:not(:active) {
  background-color: var(--primary100);
  color: var(--secondary600)
}

.mdl-button.mdl-button--colored:focus:not(:active) {
  background-color: rgba(0, 0, 0, 0.12);
}

input.mdl-button[type="submit"] {
  -webkit-appearance: none;
}

.mdl-button--raised {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.mdl-button--raised:active {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.mdl-button--raised:focus:not(:active) {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
}

.mdl-button--raised.mdl-button--colored {
  background: var(--primary800);
  color: rgb(255, 255, 255);
}

.mdl-button--raised.mdl-button--colored:hover {
  background-color: var(--primary800);
}

.mdl-button--raised.mdl-button--colored:active {
  background-color: var(--primary800);
}

.mdl-button--raised.mdl-button--colored:focus:not(:active) {
  background-color: var(--primary800);
}

.mdl-button--raised.mdl-button--colored .mdl-ripple {
  background: rgb(255, 255, 255);
}

.mdl-button--fab {
  border-radius: 50%;
  font-size: 24px;
  height: 56px;
  margin: auto;
  min-width: 56px;
  width: 56px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
  position: relative;
  line-height: normal;
}

.mdl-button--fab .material-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-12px, -12px);
  transform: translate(-12px, -12px);
  line-height: 24px;
  width: 24px;
}

.mdl-button--fab.mdl-button--mini-fab {
  height: 40px;
  min-width: 40px;
  width: 40px;
}

.mdl-button--fab .mdl-button__ripple-container {
  border-radius: 50%;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.mdl-button--fab:active {
  box-shadow: 0 4px 5px 0 #66308c2e, 0 1px 10px 0 #66308c45, 0 2px 4px -1px #66308c;
  background-color: var(--primary100);
  color: var(--primary800);
}

.mdl-button--fab:focus:not(:active) {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
  background-color: rgba(158, 158, 158, 0.40);
}

.mdl-button--fab.mdl-button--colored {
  background: var(--primary600);
  color: rgb(255, 255, 255);
}

.mdl-button--fab.mdl-button--colored:hover {
  background-color: var(--primary600);
}

.mdl-button--fab.mdl-button--colored:focus:not(:active) {
  background-color: var(--primary600);
}

.mdl-button--fab.mdl-button--colored:active {
  background-color: var(--primary600);
}

.mdl-button--fab.mdl-button--colored .mdl-ripple {
  background: rgb(255, 255, 255);
}

.mdl-button--icon {
  border-radius: 50%;
  height: 32px;
  margin-left: 0;
  margin-right: 0;
  min-width: 32px;
  width: 32px;
  padding: 0;
  overflow: hidden;
  line-height: normal;
}

.mdl-button--icon .material-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-12px, -12px);
  transform: translate(-12px, -12px);
  line-height: 24px;
  width: 24px;
}

.mdl-button--icon.mdl-button--mini-icon {
  height: 24px;
  min-width: 24px;
  width: 24px;
}

.mdl-button--icon.mdl-button--mini-icon .material-icons {
  top: 0px;
  left: 0px;
}

.mdl-button--icon .mdl-button__ripple-container {
  border-radius: 50%;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.mdl-button__ripple-container {
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
  overflow: hidden;
}

.mdl-button[disabled] .mdl-button__ripple-container .mdl-ripple,
.mdl-button.mdl-button--disabled .mdl-button__ripple-container .mdl-ripple {
  background-color: transparent;
}

.mdl-button--primary.mdl-button--primary {
  color: var(--primary800);
}

.mdl-button--primary.mdl-button--primary .mdl-ripple {
  background: rgb(255, 255, 255);
}

.mdl-button--primary.mdl-button--primary.mdl-button--raised,
.mdl-button--primary.mdl-button--primary.mdl-button--fab {
  color: rgb(255, 255, 255);
  background-color: var(--primary800);
}

.mdl-button--accent.mdl-button--accent {
  background-color: var(--primary600);
  color: #fff;
}

.mdl-button--accent:active {
  background-color: var(--primary500);
  box-shadow: 0 4px 5px 0 #b38045c7, 0 1px 10px 0 #fe9925, 0 2px 4px -1px #fe9925;
}

.mdl-button--accent.mdl-button--accent .mdl-ripple {
  background: rgb(255, 255, 255);
}

.mdl-button--accent.mdl-button--accent.mdl-button--raised,
.mdl-button--accent.mdl-button--accent.mdl-button--fab {
  color: rgb(255, 255, 255);
  background-color: var(--primary600);
}

.mdl-button--accent.mdl-button--fab:active {
  box-shadow: 0 4px 5px 0 #6f4c2366, 0 1px 10px 0 #fe99252b, 0 2px 4px -1px #ffa640;
}

.mdl-button[disabled][disabled],
.mdl-button.mdl-button--disabled.mdl-button--disabled {
  color: rgba(0, 0, 0, 0.26) !important;
  cursor: default;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.12) !important;
}

.mdl-button.secondary[disabled][disabled],
.button[disabled],
.mdl-button.secondary.mdl-button--disabled.mdl-button--disabled {
  border: 1px solid var(--neutrals200);
  background-color: #fff !important;
}

.mdl-button[disabled][disabled]:active,
.mdl-button.mdl-button--disabled.mdl-button--disabled:focus {
  box-shadow: none;
}

.mdl-button[disabled][disabled]:hover,
.mdl-button.mdl-button--disabled.mdl-button--disabled:hover {
  background-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.26);
}

.mdl-button--fab[disabled][disabled],
.mdl-button--fab.mdl-button--disabled.mdl-button--disabled {
  background-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.26);
}

.mdl-button--raised[disabled][disabled],
.mdl-button--raised.mdl-button--disabled.mdl-button--disabled {
  background-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.26);
  box-shadow: none;
}

.mdl-button--colored[disabled][disabled],
.mdl-button--colored.mdl-button--disabled.mdl-button--disabled {
  color: rgba(0, 0, 0, 0.26);
}

.mdl-button .material-icons {
  vertical-align: middle;
}


/* CARDS */
.mdl-card {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 250px;
  overflow: hidden;
  width: 100%;
  z-index: 1;
  position: relative;
  background: rgb(255, 255, 255);
  border-radius: 16px;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  transition: var(--transition);
}

.mdl-card-info p {
  margin: 0;
}

.mdl-card.mdl-card__full {
  height: 100%;
}

.mdl-card__img img {
  width: 100%;
}

.mdl-card.outline {
  background: #ffffffd9;
  border: 1px solid var(--neutrals600);
  -webkit-backdrop-filter: saturate(160%) blur(5px);
  backdrop-filter: saturate(160%) blur(5px);
}

.mdl-card__media {
  background-color: var(--primary600);
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-origin: padding-box;
  background-attachment: scroll;
  box-sizing: border-box;
}

.mdl-card__title {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: rgb(0, 0, 0);
  display: block;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: stretch;
  -ms-flex-pack: stretch;
  justify-content: stretch;
  line-height: normal;
  padding: 16px 16px;
  -webkit-perspective-origin: 165px 56px;
  perspective-origin: 165px 56px;
  -webkit-transform-origin: 165px 56px;
  transform-origin: 165px 56px;
  box-sizing: border-box;
}

.mdl-card__title.mdl-card--border {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mdl-card__title-text {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  color: inherit;
  display: block;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 24px;
  font-weight: 300;
  line-height: normal;
  overflow: hidden;
  -webkit-transform-origin: 149px 48px;
  transform-origin: 149px 48px;
  margin: 0;
}

.mdl-card__subtitle-text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.54);
  margin: 0;
}

.mdl-card__supporting-text {
  color: rgba(0, 0, 0, 0.54);
  font-size: 1rem;
  line-height: 18px;
  overflow: hidden;
  padding: 16px 16px;
}

.mdl-card__supporting-text.mdl-card--border {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mdl-card__actions {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  gap: 5px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;
  align-items: center;
}

.mdl-card__actions.mdl-card--border {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mdl-card--expand {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.mdl-card__menu {
  position: absolute;
  right: 16px;
  top: 16px;
}

/* CHECKBOXES */
.mdl-checkbox {
  position: relative;
  z-index: 1;
  vertical-align: middle;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
}

.mdl-checkbox.is-upgraded {
  padding-left: 24px;
}

.mdl-checkbox__input {
  line-height: 24px;
}

.mdl-checkbox.is-upgraded .mdl-checkbox__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  -ms-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

.mdl-checkbox__box-outline {
  position: absolute;
  top: 3px;
  left: 0;
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.54);
  border-radius: 2px;
  z-index: 2;
}

.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
  border: 2px solid var(--primary800);
}

fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,
.mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
  border: 2px solid rgba(0, 0, 0, 0.26);
  cursor: auto;
}

.mdl-checkbox__focus-helper {
  position: absolute;
  top: 3px;
  left: 0;
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: transparent;
}

.mdl-checkbox.is-focused .mdl-checkbox__focus-helper {
  box-shadow: 0 0 0px 8px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.1);
}

.mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {
  box-shadow: 0 0 0px 8px rgba(63, 81, 181, 0.26);
  background-color: rgba(63, 81, 181, 0.26);
}

.mdl-checkbox__tick-outline {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg==");
  mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxwYXRoCiAgICAgICAgIGQ9Ik0gMCwwIDAsMSAxLDEgMSwwIDAsMCB6IE0gMC44NTM0Mzc1LDAuMTY3MTg3NSAwLjk1OTY4NzUsMC4yNzMxMjUgMC40MjkzNzUsMC44MDM0Mzc1IDAuMzIzMTI1LDAuOTA5Njg3NSAwLjIxNzE4NzUsMC44MDM0Mzc1IDAuMDQwMzEyNSwwLjYyNjg3NSAwLjE0NjU2MjUsMC41MjA2MjUgMC4zMjMxMjUsMC42OTc1IDAuODUzNDM3NSwwLjE2NzE4NzUgeiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KICAgIDwvY2xpcFBhdGg+CiAgICA8bWFzayBpZD0ibWFzayIgbWFza1VuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgbWFza0NvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPgogICAgICA8cGF0aAogICAgICAgICBkPSJNIDAsMCAwLDEgMSwxIDEsMCAwLDAgeiBNIDAuODUzNDM3NSwwLjE2NzE4NzUgMC45NTk2ODc1LDAuMjczMTI1IDAuNDI5Mzc1LDAuODAzNDM3NSAwLjMyMzEyNSwwLjkwOTY4NzUgMC4yMTcxODc1LDAuODAzNDM3NSAwLjA0MDMxMjUsMC42MjY4NzUgMC4xNDY1NjI1LDAuNTIwNjI1IDAuMzIzMTI1LDAuNjk3NSAwLjg1MzQzNzUsMC4xNjcxODc1IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgogIDxyZWN0CiAgICAgd2lkdGg9IjEiCiAgICAgaGVpZ2h0PSIxIgogICAgIHg9IjAiCiAgICAgeT0iMCIKICAgICBjbGlwLXBhdGg9InVybCgjY2xpcCkiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIgLz4KPC9zdmc+Cg==");
  background: transparent;
  transition-duration: 0.28s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: background;
}

.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
  background: var(--primary800) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
}

fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
.mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline {
  background: rgba(0, 0, 0, 0.26) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
}

.mdl-checkbox__label {
  position: relative;
  cursor: pointer;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
}

fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
.mdl-checkbox.is-disabled .mdl-checkbox__label {
  color: rgba(0, 0, 0, 0.26);
  cursor: auto;
}

.mdl-checkbox__ripple-container {
  position: absolute;
  z-index: 2;
  top: -6px;
  left: -10px;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.mdl-checkbox__ripple-container .mdl-ripple {
  background: var(--primary800);
}

fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container,
.mdl-checkbox.is-disabled .mdl-checkbox__ripple-container {
  cursor: auto;
}

fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple,
.mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple {
  background: transparent;
}

.mdl-chip {
  height: auto;
  font-family: "Noto Sans", sans-serif;
  line-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background-color: var(--primary100);
  display: inline-flex;
  margin: 2px 0;
  gap: 5px;
  align-items: center;
  color: var(--primary700);
}

.omnilife-v2 #home-productos-principales .mdl-chip {
  border: 1px solid var(--primary800);
}

.mdl-chip.small {
  line-height: 26px;
  padding: 0 5px;
}

.mdl-chip.big {
  padding: .5rem 1.5rem;
}

.mdl-chip.secondary {
  background-color: var(--secondary100);
  color: var(--secondary800);
}

.mdl-chip.info {
  background: var(--info200);
  border: none;
  color: var(--info700);
}

.color-info {
  color: var(--info700);
}

.mdl-chip.success {
  background: var(--success200);
  border: none;
  color: var(--success1000);
}

.mdl-chip.error {
  background: var(--error200);
  border: none;
  color: var(--error700);
}

.mdl-chip.warning {
  background: var(--warning200);
  border: none;
  color: var(--warning700);
}

.mdl-chip__text {
  font-size: 13px;
  vertical-align: middle;
  display: inline-block;
}

.mdl-chip__action {
  height: 24px;
  width: 24px;
  background: transparent;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  margin: 0 0 0 4px;
  text-decoration: none;
  border: none;
  outline: none;
  overflow: hidden;
  border-radius: 90px;
}

.mdl-chip__action:hover {
  color: var(--primary700);
  transform: scale(1.2);
}

.mdl-chip__contact {
  height: 32px;
  width: 32px;
  border-radius: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  overflow: hidden;
  text-align: center;
  font-size: 18px;
  line-height: 32px;
}

.mdl-chip:focus {
  outline: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}


.mdl-chip--deletable {
  padding-right: 4px;
}

.mdl-chip--contact {
  padding-left: 0;
}


.mdl-data-table {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-collapse: collapse;
  white-space: nowrap;
  font-size: 13px;
  background-color: rgb(255, 255, 255);
}

.mdl-data-table thead {
  padding-bottom: 3px;
}

.mdl-data-table thead .mdl-data-table__select {
  margin-top: 0;
}

.mdl-data-table tbody tr {
  position: relative;
  height: 48px;
  transition-duration: 0.28s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: background-color;
}

.mdl-data-table tbody tr.is-selected {
  background-color: #e0e0e0;
}

.mdl-data-table tbody tr:hover {
  background-color: #eeeeee;
}

.mdl-data-table td,
.mdl-data-table th {
  padding: 0 18px 12px 18px;
  text-align: right;
}

.mdl-data-table td:first-of-type,
.mdl-data-table th:first-of-type {
  padding-left: 24px;
}

.mdl-data-table td:last-of-type,
.mdl-data-table th:last-of-type {
  padding-right: 24px;
}

.mdl-data-table td {
  position: relative;
  vertical-align: middle;
  height: 48px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 12px;
  box-sizing: border-box;
}

.mdl-data-table td .mdl-data-table__select {
  vertical-align: middle;
}

.mdl-data-table th {
  position: relative;
  vertical-align: bottom;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  letter-spacing: 0;
  height: 48px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.54);
  padding-bottom: 8px;
  box-sizing: border-box;
}

.mdl-data-table th.mdl-data-table__header--sorted-ascending,
.mdl-data-table th.mdl-data-table__header--sorted-descending {
  color: var(--neutral5);
}

.mdl-data-table th.mdl-data-table__header--sorted-ascending:before,
.mdl-data-table th.mdl-data-table__header--sorted-descending:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  word-wrap: normal;
  -moz-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  content: "\e5d8";
  margin-right: 5px;
  vertical-align: sub;
}

.mdl-data-table th.mdl-data-table__header--sorted-ascending:hover,
.mdl-data-table th.mdl-data-table__header--sorted-descending:hover {
  cursor: pointer;
}

.mdl-data-table th.mdl-data-table__header--sorted-ascending:hover:before,
.mdl-data-table th.mdl-data-table__header--sorted-descending:hover:before {
  color: rgba(0, 0, 0, 0.26);
}

.mdl-data-table th.mdl-data-table__header--sorted-descending:before {
  content: "\e5db";
}

.mdl-data-table__select {
  width: 16px;
}

.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
  text-align: left;
}


.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px;
}

.mdl-dialog__title {
  padding: 24px 24px 0;
  margin: 0;
  font-size: 2.5rem;
}

.mdl-dialog__actions {
  padding: 8px 8px 8px 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mdl-dialog__actions>* {
  margin-right: 8px;
  height: 36px;
}

.mdl-dialog__actions>*:first-child {
  margin-right: 0;
}

.mdl-dialog__actions--full-width {
  padding: 0 0 8px 0;
}

.mdl-dialog__actions--full-width>* {
  height: 48px;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding-right: 16px;
  margin-right: 0;
  text-align: right;
}

.mdl-dialog__content {
  padding: 20px 24px 24px 24px;
  color: rgba(0, 0, 0, 0.54);
}


.mdl-mega-footer {
  padding: 16px 40px;
  color: rgb(158, 158, 158);
  background-color: var(--neutrals1000);
}

.mdl-mega-footer--top-section:after,
.mdl-mega-footer--middle-section:after,
.mdl-mega-footer--bottom-section:after,
.mdl-mega-footer__top-section:after,
.mdl-mega-footer__middle-section:after,
.mdl-mega-footer__bottom-section:after {
  content: '';
  display: block;
  clear: both;
}

.mdl-mega-footer--left-section,
.mdl-mega-footer__left-section {
  margin-bottom: 16px;
}

.mdl-mega-footer--right-section,
.mdl-mega-footer__right-section {
  margin-bottom: 16px;
}

.mdl-mega-footer--right-section a,
.mdl-mega-footer__right-section a {
  display: block;
  margin-bottom: 16px;
  color: inherit;
  text-decoration: none;
}

@media screen and (min-width: 760px) {

  .mdl-mega-footer--left-section,
  .mdl-mega-footer__left-section {
    float: left;
  }

  .mdl-mega-footer--right-section,
  .mdl-mega-footer__right-section {
    float: right;
  }

  .mdl-mega-footer--right-section a,
  .mdl-mega-footer__right-section a {
    display: inline-block;
    margin-left: 16px;
    line-height: 36px;
    vertical-align: middle;
  }
}

.mdl-mega-footer--social-btn,
.mdl-mega-footer__social-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background-color: rgb(158, 158, 158);
  border: none;
}

.mdl-mega-footer--drop-down-section,
.mdl-mega-footer__drop-down-section {
  display: block;
  position: relative;
}

@media screen and (min-width: 760px) {

  .mdl-mega-footer--drop-down-section,
  .mdl-mega-footer__drop-down-section {
    width: 33%;
  }

  .mdl-mega-footer--drop-down-section:nth-child(1),
  .mdl-mega-footer--drop-down-section:nth-child(2),
  .mdl-mega-footer__drop-down-section:nth-child(1),
  .mdl-mega-footer__drop-down-section:nth-child(2) {
    float: left;
  }

  .mdl-mega-footer--drop-down-section:nth-child(3),
  .mdl-mega-footer__drop-down-section:nth-child(3) {
    float: right;
  }

  .mdl-mega-footer--drop-down-section:nth-child(3):after,
  .mdl-mega-footer__drop-down-section:nth-child(3):after {
    clear: right;
  }

  .mdl-mega-footer--drop-down-section:nth-child(4),
  .mdl-mega-footer__drop-down-section:nth-child(4) {
    clear: right;
    float: right;
  }

  .mdl-mega-footer--middle-section:after,
  .mdl-mega-footer__middle-section:after {
    content: '';
    display: block;
    clear: both;
  }

  .mdl-mega-footer--bottom-section,
  .mdl-mega-footer__bottom-section {
    padding-top: 0;
  }
}

@media screen and (min-width: 1024px) {

  .mdl-mega-footer--drop-down-section,
  .mdl-mega-footer--drop-down-section:nth-child(3),
  .mdl-mega-footer--drop-down-section:nth-child(4),
  .mdl-mega-footer__drop-down-section,
  .mdl-mega-footer__drop-down-section:nth-child(3),
  .mdl-mega-footer__drop-down-section:nth-child(4) {
    width: 24%;
    float: left;
  }
}

.mdl-mega-footer--heading-checkbox,
.mdl-mega-footer__heading-checkbox {
  position: absolute;
  width: 100%;
  height: 55.8px;
  padding: 32px;
  margin: 0;
  margin-top: -16px;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
}

.mdl-mega-footer--heading-checkbox+.mdl-mega-footer--heading:after,
.mdl-mega-footer--heading-checkbox+.mdl-mega-footer__heading:after,
.mdl-mega-footer__heading-checkbox+.mdl-mega-footer--heading:after,
.mdl-mega-footer__heading-checkbox+.mdl-mega-footer__heading:after {
  font-family: 'Material Icons';
  content: '\E5CE';
}

.mdl-mega-footer--heading-checkbox:checked~.mdl-mega-footer--link-list,
.mdl-mega-footer--heading-checkbox:checked~.mdl-mega-footer__link-list,
.mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer--heading+.mdl-mega-footer--link-list,
.mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer__heading+.mdl-mega-footer__link-list,
.mdl-mega-footer__heading-checkbox:checked~.mdl-mega-footer--link-list,
.mdl-mega-footer__heading-checkbox:checked~.mdl-mega-footer__link-list,
.mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer--heading+.mdl-mega-footer--link-list,
.mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer__heading+.mdl-mega-footer__link-list {
  display: none;
}

.mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer--heading:after,
.mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer__heading:after,
.mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer--heading:after,
.mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer__heading:after {
  font-family: 'Material Icons';
  content: '\E5CF';
}

.mdl-mega-footer--heading,
.mdl-mega-footer__heading {
  position: relative;
  width: 100%;
  padding-right: 39.8px;
  margin-bottom: 16px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 23.8px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: rgb(224, 224, 224);
}

.mdl-mega-footer--heading:after,
.mdl-mega-footer__heading:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 23.8px;
  height: 23.8px;
  background-size: cover;
}

.mdl-mega-footer--link-list,
.mdl-mega-footer__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 32px;
}

.mdl-mega-footer--link-list:after,
.mdl-mega-footer__link-list:after {
  clear: both;
  display: block;
  content: '';
}

.mdl-mega-footer--link-list li,
.mdl-mega-footer__link-list li {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  line-height: 20px;
}

.mdl-mega-footer--link-list a,
.mdl-mega-footer__link-list a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

@media screen and (min-width: 760px) {

  .mdl-mega-footer--heading-checkbox,
  .mdl-mega-footer__heading-checkbox {
    display: none;
  }

  .mdl-mega-footer--heading-checkbox+.mdl-mega-footer--heading:after,
  .mdl-mega-footer--heading-checkbox+.mdl-mega-footer__heading:after,
  .mdl-mega-footer__heading-checkbox+.mdl-mega-footer--heading:after,
  .mdl-mega-footer__heading-checkbox+.mdl-mega-footer__heading:after {
    content: '';
  }

  .mdl-mega-footer--heading-checkbox:checked~.mdl-mega-footer--link-list,
  .mdl-mega-footer--heading-checkbox:checked~.mdl-mega-footer__link-list,
  .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer__heading+.mdl-mega-footer__link-list,
  .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer--heading+.mdl-mega-footer--link-list,
  .mdl-mega-footer__heading-checkbox:checked~.mdl-mega-footer--link-list,
  .mdl-mega-footer__heading-checkbox:checked~.mdl-mega-footer__link-list,
  .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer__heading+.mdl-mega-footer__link-list,
  .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer--heading+.mdl-mega-footer--link-list {
    display: block;
  }

  .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer--heading:after,
  .mdl-mega-footer--heading-checkbox:checked+.mdl-mega-footer__heading:after,
  .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer--heading:after,
  .mdl-mega-footer__heading-checkbox:checked+.mdl-mega-footer__heading:after {
    content: '';
  }
}

.mdl-mega-footer--bottom-section,
.mdl-mega-footer__bottom-section {
  padding-top: 16px;
  margin-bottom: 16px;
}

.mdl-logo {
  margin-bottom: 16px;
  color: white;
}

.mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
.mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
  float: left;
  margin-bottom: 0;
  margin-right: 16px;
}

@media screen and (min-width: 760px) {
  .mdl-logo {
    float: left;
    margin-bottom: 0;
    margin-right: 16px;
  }
}


/* CHIP */
.mdl-mini-footer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 32px 16px;
  color: rgb(158, 158, 158);
  background-color: var(--neutrals1000);
}

.mdl-mini-footer:after {
  content: '';
  display: block;
}

.mdl-mini-footer .mdl-logo {
  line-height: 36px;
}

.mdl-mini-footer--link-list,
.mdl-mini-footer__link-list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mdl-mini-footer--link-list li,
.mdl-mini-footer__link-list li {
  margin-bottom: 0;
  margin-right: 16px;
}

@media screen and (min-width: 760px) {

  .mdl-mini-footer--link-list li,
  .mdl-mini-footer__link-list li {
    line-height: 36px;
  }
}

.mdl-mini-footer--link-list a,
.mdl-mini-footer__link-list a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.mdl-mini-footer--left-section,
.mdl-mini-footer__left-section {
  display: inline-block;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}

.mdl-mini-footer--right-section,
.mdl-mini-footer__right-section {
  display: inline-block;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

.mdl-mini-footer--social-btn,
.mdl-mini-footer__social-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background-color: rgb(158, 158, 158);
  border: none;
}


/* CHIP */
.mdl-icon-toggle {
  position: relative;
  z-index: 1;
  vertical-align: middle;
  display: inline-block;
  height: 32px;
  margin: 0;
  padding: 0;
}

.mdl-icon-toggle__input {
  line-height: 32px;
}

.mdl-icon-toggle.is-upgraded .mdl-icon-toggle__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  -ms-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

.mdl-icon-toggle__label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 32px;
  width: 32px;
  min-width: 32px;
  color: rgb(97, 97, 97);
  border-radius: 50%;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  background-color: transparent;
  will-change: background-color;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-icon-toggle__label.material-icons {
  line-height: 32px;
  font-size: 24px;
}

.mdl-icon-toggle.is-checked .mdl-icon-toggle__label {
  color: var(--primary800);
}

.mdl-icon-toggle.is-disabled .mdl-icon-toggle__label {
  color: rgba(0, 0, 0, 0.26);
  cursor: auto;
  transition: none;
}

.mdl-icon-toggle.is-focused .mdl-icon-toggle__label {
  background-color: rgba(0, 0, 0, 0.12);
}

.mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label {
  background-color: rgba(63, 81, 181, 0.26);
}

.mdl-icon-toggle__ripple-container {
  position: absolute;
  z-index: 2;
  top: -2px;
  left: -2px;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.mdl-icon-toggle__ripple-container .mdl-ripple {
  background: rgb(97, 97, 97);
}

.mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container {
  cursor: auto;
}

.mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple {
  background: transparent;
}


.mdl-list {
  display: block;
  padding: 8px 0;
  list-style: none;
}

.mdl-list__item {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
  line-height: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 48px;
  box-sizing: border-box;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: default;
  color: var(--neutral5);
  overflow: hidden;
}

.mdl-list__item i {
  margin-right: 20px;
  color: var(--primary600);
}

.mdl-list__item .mdl-list__item-primary-content .mdl-list__item-avatar {
  margin-right: 16px;
}

.mdl-list__item .mdl-list__item-secondary-content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-left: 16px;
}

.mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-action label {
  display: inline;
}

.mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.54);
}

.mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-sub-header {
  padding: 0 0 0 16px;
}

.mdl-list__item-icon,
.mdl-list__item-icon.material-icons {
  height: 24px;
  width: 24px;
  font-size: 24px;
  box-sizing: border-box;
  color: var(--primary600);
}

.mdl-list__item-avatar,
.mdl-list__item-avatar.material-icons {
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: rgb(117, 117, 117);
  font-size: 40px;
  color: white;
}

.mdl-list__item--two-line {
  height: 72px;
}

.mdl-list__item--two-line .mdl-list__item-primary-content {
  height: 36px;
  line-height: 20px;
  display: block;
}

.mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-avatar {
  float: left;
}

.mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-icon {
  float: left;
  margin-top: 6px;
}

.mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-secondary-content {
  height: 36px;
}

.mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-sub-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.54);
  display: block;
  padding: 0;
}

.mdl-list__item--three-line {
  height: 88px;
}

.mdl-list__item--three-line .mdl-list__item-primary-content {
  height: 52px;
  line-height: 20px;
  display: block;
}

.mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-avatar,
.mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-icon {
  float: left;
}

.mdl-list__item--three-line .mdl-list__item-secondary-content {
  height: 52px;
}

.mdl-list__item--three-line .mdl-list__item-text-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  line-height: 18px;
  height: 52px;
  color: rgba(0, 0, 0, 0.54);
  display: block;
  padding: 0;
}


.mdl-menu__container {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  position: absolute;
  overflow: visible;
  height: 0;
  width: 0;
  visibility: hidden;
  z-index: -1;
}

.mdl-menu__container.is-visible,
.mdl-menu__container.is-animating {
  z-index: 999;
  visibility: visible;
}

.mdl-menu__outline {
  display: block;
  background: rgb(255, 255, 255);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  will-change: transform;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.mdl-menu__container.is-visible .mdl-menu__outline {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 999;
}

.mdl-menu__outline.mdl-menu--bottom-right {
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.mdl-menu__outline.mdl-menu--top-left {
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

.mdl-menu__outline.mdl-menu--top-right {
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.mdl-menu {
  position: absolute;
  list-style: none;
  top: 0;
  left: 0;
  height: auto;
  width: auto;
  min-width: 124px;
  padding: 0px;
  margin: 0;
  opacity: 0;
  clip: rect(0 0 0 0);
  z-index: -1;
}

.mdl-menu__container.is-visible .mdl-menu {
  opacity: 1;
  z-index: 999;
}

.mdl-menu.is-animating {
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), clip 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-menu.mdl-menu--bottom-right {
  left: auto;
  right: 0;
}

.mdl-menu.mdl-menu--top-left {
  top: auto;
  bottom: 0;
}

.mdl-menu.mdl-menu--top-right {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
}

.mdl-menu.mdl-menu--unaligned {
  top: auto;
  left: auto;
}

.mdl-menu__item,
.mdl-menu__item>a {
  display: block;
  border: none;
  color: var(--neutral5);
  background-color: transparent;
  text-align: left;
  margin: 0;
  padding: 0 12px;
  outline-color: rgb(189, 189, 189);
  position: relative;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  height: 48px;
  line-height: 48px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mdl-menu__container.is-visible .mdl-menu__item,
.mdl-menu__container.is-visible .mdl-menu__item>a {
  opacity: 1;
}

.mdl-menu__item::-moz-focus-inner,
.mdl-menu__item::-moz-focus-inner>a {

  border: 0;
}

.mdl-menu__item--full-bleed-divider,
.mdl-menu__item--full-bleed-divider>a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mdl-menu__item[disabled],
.mdl-menu__item[data-mdl-disabled],
.mdl-menu__item[disabled]>a,
.mdl-menu__item[data-mdl-disabled]>a {
  color: rgb(189, 189, 189);
  background-color: transparent;
  cursor: auto;
}

.mdl-menu__item[disabled]:hover,
.mdl-menu__item[data-mdl-disabled]:hover,
.mdl-menu__item[disabled]:hover>a,
.mdl-menu__item[data-mdl-disabled]:hover>a {
  background-color: transparent;
}

.mdl-menu__item[disabled]:focus,
.mdl-menu__item[data-mdl-disabled]:focus,
.mdl-menu__item[disabled]:focus>a,
.mdl-menu__item[data-mdl-disabled]:focus>a {
  background-color: transparent;
}

.mdl-menu__item[disabled] .mdl-ripple,
.mdl-menu__item[data-mdl-disabled] .mdl-ripple,
.mdl-menu__item[disabled] .mdl-ripple>a,
.mdl-menu__item[data-mdl-disabled] .mdl-ripple>a {
  background: transparent;
}

.mdl-menu__item:hover,
.subBtn:hover,
.mdl-menu__item:hover>a,
.subBtn:hover>a {
  background-color: var(--primary100);

}

.menuCard:hover>*:last-child {
  border-radius: 0px 0px 10px 10px;
}

.secondLevelMenuContainer ul>*:last-child,
.menuCard .subBtn:last-of-type {
  border-radius: 0px 0px 10px 10px !important;
}

.mdl-menu__item:focus,
.mdl-menu__item:focus>a {
  outline: none;
  background-color: var(--primary100);
}

.mdl-menu__item:active {
  background-color: var(--primary100);
}

.mdl-menu__item--ripple-container {
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
  overflow: hidden;
}


/* CHIP */
.mdl-progress {
  display: block;
  position: relative;
  height: 4px;
  width: 500px;
  max-width: 100%;
}

.mdl-progress>.bar {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0%;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-progress>.progressbar {
  background-color: var(--primary800);
  z-index: 1;
  left: 0;
}

.mdl-progress>.bufferbar {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, var(--primary800), var(--primary800));
  z-index: 0;
  left: 0;
}

.mdl-progress>.auxbar {
  right: 0;
}

@supports (-webkit-appearance: none) {

  .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate)>.auxbar,
  .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate)>.auxbar {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, var(--primary800), var(--primary800));
    -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
    mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
  }
}

.mdl-progress:not(.mdl-progress--indeterminate)>.auxbar,
.mdl-progress:not(.mdl-progress__indeterminate)>.auxbar {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(to right, var(--primary800), var(--primary800));
}

.mdl-progress.mdl-progress--indeterminate>.bar1,
.mdl-progress.mdl-progress__indeterminate>.bar1 {
  background-color: var(--primary800);
  -webkit-animation-name: indeterminate1;
  animation-name: indeterminate1;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.mdl-progress.mdl-progress--indeterminate>.bar3,
.mdl-progress.mdl-progress__indeterminate>.bar3 {
  background-image: none;
  background-color: var(--primary800);
  -webkit-animation-name: indeterminate2;
  animation-name: indeterminate2;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes indeterminate1 {
  0% {
    left: 0%;
    width: 0%;
  }

  50% {
    left: 25%;
    width: 75%;
  }

  75% {
    left: 100%;
    width: 0%;
  }
}

@keyframes indeterminate1 {
  0% {
    left: 0%;
    width: 0%;
  }

  50% {
    left: 25%;
    width: 75%;
  }

  75% {
    left: 100%;
    width: 0%;
  }
}

@-webkit-keyframes indeterminate2 {
  0% {
    left: 0%;
    width: 0%;
  }

  50% {
    left: 0%;
    width: 0%;
  }

  75% {
    left: 0%;
    width: 25%;
  }

  100% {
    left: 100%;
    width: 0%;
  }
}

@keyframes indeterminate2 {
  0% {
    left: 0%;
    width: 0%;
  }

  50% {
    left: 0%;
    width: 0%;
  }

  75% {
    left: 0%;
    width: 25%;
  }

  100% {
    left: 100%;
    width: 0%;
  }
}


.mdl-navigation {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.mdl-navigation__link {
  color: var(--neutrals1000);
  text-decoration: none;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.mdl-navigation__link .material-icons {
  vertical-align: middle;
}

.mdl-layout {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.mdl-layout.is-small-screen .mdl-layout--large-screen-only {
  display: none;
}

.mdl-layout:not(.is-small-screen) .mdl-layout--small-screen-only {
  display: none;
}

.mdl-layout__container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.mdl-layout__title,
.mdl-layout-title {
  display: block;
  position: relative;
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 400;
  box-sizing: border-box;
}

.mdl-layout-spacer {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.mdl-layout__drawer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #ffffff;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  overflow: visible;
  overflow-y: auto;
  z-index: 9999999;
}

.mdl-layout__drawer.is-visible {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.mdl-layout__drawer.is-visible~.mdl-layout__content.mdl-layout__content {
  overflow: hidden;
}

.mdl-layout__drawer>* {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.mdl-layout__drawer>.mdl-layout__title,
.mdl-layout__drawer>.mdl-layout-title {
  line-height: 64px;
  padding-left: 40px;
}

@media screen and (max-width: 1024px) {

  .mdl-layout__drawer>.mdl-layout__title,
  .mdl-layout__drawer>.mdl-layout-title {
    line-height: 56px;
    padding-left: 16px;
  }
}

.mdl-layout__drawer .mdl-navigation {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding-top: 16px;
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
  display: block;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 16px 40px;
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
    padding: 16px 16px;
  }
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
  background-color: rgb(224, 224, 224);
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current {
  background-color: rgb(224, 224, 224);
  color: rgb(0, 0, 0);
}

@media screen and (min-width: 1025px) {
  .mdl-layout--fixed-drawer>.mdl-layout__drawer {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.mdl-layout__drawer-button {
  display: block;
  position: absolute;
  height: 48px;
  width: 48px;
  border: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  font-size: 26px;
  line-height: 56px;
  margin: 8px 12px;
  top: 0;
  left: 0;
  color: rgb(255, 255, 255);
  z-index: 4;
}

.mdl-layout__header .mdl-layout__drawer-button {
  position: absolute;
  color: rgb(255, 255, 255);
  background-color: inherit;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header .mdl-layout__drawer-button {
    margin: 4px;
  }
}

@media screen and (max-width: 1024px) {
  .mdl-layout__drawer-button {
    margin: 4px;
    color: rgba(0, 0, 0, 0.5);
  }
}

@media screen and (min-width: 1025px) {
  .mdl-layout__drawer-button {
    line-height: 54px;
  }

  .mdl-layout--no-desktop-drawer-button .mdl-layout__drawer-button,
  .mdl-layout--fixed-drawer>.mdl-layout__drawer-button,
  .mdl-layout--no-drawer-button .mdl-layout__drawer-button {
    display: none;
  }
}

.mdl-layout__header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  box-sizing: border-box;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  min-height: 64px;
  max-height: 1000px;
  z-index: 3;
  background-color: var(--primary800);
  color: rgb(255, 255, 255);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: max-height, box-shadow;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header {
    min-height: 56px;
  }
}

.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__header {
  margin-left: 240px;
  width: calc(100% - 240px);
}

@media screen and (min-width: 1025px) {
  .mdl-layout--fixed-drawer>.mdl-layout__header .mdl-layout__header-row {
    padding-left: 40px;
  }
}

.mdl-layout__header>.mdl-layout-icon {
  position: absolute;
  left: 40px;
  top: 16px;
  height: 32px;
  width: 32px;
  overflow: hidden;
  z-index: 3;
  display: block;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header>.mdl-layout-icon {
    left: 16px;
    top: 12px;
  }
}

.mdl-layout.has-drawer .mdl-layout__header>.mdl-layout-icon {
  display: none;
}

.mdl-layout__header.is-compact {
  max-height: 64px;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header.is-compact {
    max-height: 56px;
  }
}

.mdl-layout__header.is-compact.has-tabs {
  height: 112px;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header.is-compact.has-tabs {
    min-height: 104px;
  }
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header {
    display: none;
  }

  .mdl-layout--fixed-header>.mdl-layout__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

.mdl-layout__header--transparent.mdl-layout__header--transparent {
  background-color: transparent;
  box-shadow: none;
}

.mdl-layout__header--seamed {
  box-shadow: none;
}

.mdl-layout__header--scroll {
  box-shadow: none;
}

.mdl-layout__header--waterfall {
  box-shadow: none;
  overflow: hidden;
}

.mdl-layout__header--waterfall.is-casting-shadow {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.mdl-layout__header--waterfall.mdl-layout__header--waterfall-hide-top {
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.mdl-layout__header-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 64px;
  margin: 0;
  padding: 0 40px 0 80px;
}

.mdl-layout--no-drawer-button .mdl-layout__header-row {
  padding-left: 40px;
}

@media screen and (min-width: 1025px) {
  .mdl-layout--no-desktop-drawer-button .mdl-layout__header-row {
    padding-left: 40px;
  }
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header-row {
    height: 56px;
    padding: 0 16px 0 72px;
  }

  .mdl-layout--no-drawer-button .mdl-layout__header-row {
    padding-left: 16px;
  }
}

.mdl-layout__header-row>* {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.mdl-layout__header--scroll .mdl-layout__header-row {
  width: 100%;
}

.mdl-layout__header-row .mdl-navigation {
  margin: 0;
  padding: 0;
  height: 64px;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header-row .mdl-navigation {
    height: 56px;
  }
}

.mdl-layout__header-row .mdl-navigation__link {
  display: block;
  color: rgb(255, 255, 255);
  line-height: 64px;
  padding: 0 24px;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header-row .mdl-navigation__link {
    line-height: 56px;
    padding: 0 16px;
  }
}

.mdl-layout__obfuscator {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 4;
  visibility: hidden;
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-layout__obfuscator.is-visible {
  background-color: rgba(0, 0, 0, 0.5);
  visibility: visible;
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
  background-color: rgba(0, 0, 0, .5);
}


@supports (pointer-events: auto) {
  .mdl-layout__obfuscator {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition-property: opacity;
    visibility: visible;
    pointer-events: none;
  }

  .mdl-layout__obfuscator.is-visible {
    pointer-events: auto;
    opacity: 1;
  }
}

.mdl-layout__content {
  -ms-flex: 0 1 auto;
  position: relative;
  display: inline-block;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}

.mdl-layout--fixed-drawer>.mdl-layout__content {
  margin-left: 240px;
}

.mdl-layout__container.has-scrolling-header .mdl-layout__content {
  overflow: visible;
}

@media screen and (max-width: 1024px) {
  .mdl-layout--fixed-drawer>.mdl-layout__content {
    margin-left: 0;
  }

  .mdl-layout__container.has-scrolling-header .mdl-layout__content {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.mdl-layout__tab-bar {
  height: 96px;
  margin: 0;
  width: calc(100% - 112px);
  padding: 0 0 0 56px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: var(--primary800);
  overflow-y: hidden;
  overflow-x: scroll;
}

.mdl-layout__tab-bar::-webkit-scrollbar {
  display: none;
}

.mdl-layout--no-drawer-button .mdl-layout__tab-bar {
  padding-left: 16px;
  width: calc(100% - 32px);
}

@media screen and (min-width: 1025px) {
  .mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar {
    padding-left: 16px;
    width: calc(100% - 32px);
  }
}

@media screen and (max-width: 1024px) {
  .mdl-layout__tab-bar {
    width: calc(100% - 60px);
    padding: 0 0 0 60px;
  }

  .mdl-layout--no-drawer-button .mdl-layout__tab-bar {
    width: calc(100% - 8px);
    padding-left: 4px;
  }
}

.mdl-layout--fixed-tabs .mdl-layout__tab-bar {
  padding: 0;
  overflow: hidden;
  width: 100%;
}

.mdl-layout__tab-bar-container {
  position: relative;
  height: 48px;
  width: 100%;
  border: none;
  margin: 0;
  z-index: 2;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow: hidden;
}

.mdl-layout__container>.mdl-layout__tab-bar-container {
  position: absolute;
  top: 0;
  left: 0;
}

.mdl-layout__tab-bar-button {
  display: inline-block;
  position: absolute;
  top: 0;
  height: 48px;
  width: 56px;
  z-index: 4;
  text-align: center;
  background-color: var(--primary800);
  color: transparent;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button,
.mdl-layout--no-drawer-button .mdl-layout__tab-bar-button {
  width: 16px;
}

.mdl-layout--no-desktop-drawer-button .mdl-layout__tab-bar-button .material-icons,
.mdl-layout--no-drawer-button .mdl-layout__tab-bar-button .material-icons {
  position: relative;
  left: -4px;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__tab-bar-button {
    width: 60px;
  }
}

.mdl-layout--fixed-tabs .mdl-layout__tab-bar-button {
  display: none;
}

.mdl-layout__tab-bar-button .material-icons {
  line-height: 48px;
}

.mdl-layout__tab-bar-button.is-active {
  color: rgb(255, 255, 255);
}

.mdl-layout__tab-bar-left-button {
  left: 0;
}

.mdl-layout__tab-bar-right-button {
  right: 0;
}

.mdl-layout__tab {
  margin: 0;
  border: none;
  padding: 0 24px 0 24px;
  float: left;
  position: relative;
  display: block;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  text-decoration: none;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__tab {
    padding: 0 12px 0 12px;
  }
}

.mdl-layout--fixed-tabs .mdl-layout__tab {
  float: none;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 0;
}

.mdl-layout.is-upgraded .mdl-layout__tab.is-active {
  color: rgb(255, 255, 255);
}

.mdl-layout.is-upgraded .mdl-layout__tab.is-active::after {
  height: 2px;
  width: 100%;
  display: block;
  content: " ";
  bottom: 0;
  left: 0;
  position: absolute;
  background: var(--primary600);
  -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
  animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
  transition: all 1s cubic-bezier(0.4, 0, 1, 1);
}

.mdl-layout__tab .mdl-layout__tab-ripple-container {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
}

.mdl-layout__tab .mdl-layout__tab-ripple-container .mdl-ripple {
  background-color: rgb(255, 255, 255);
}

.mdl-layout__tab-panel {
  display: block;
}

.mdl-layout.is-upgraded .mdl-layout__tab-panel {
  display: none;
}

.mdl-layout.is-upgraded .mdl-layout__tab-panel.is-active {
  display: block;
}

.mdl-radio {
  position: relative;
  font-size: 16px;
  line-height: 24px;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  margin: 3px 23px 0px 0px;
}

label.mdl-radio:hover {
  cursor: pointer;
}

.mdl-radio.is-upgraded {
  padding-left: 36px;
}

.cardProducts .mdl-radio.is-upgraded {
  padding-left: 0;
}

.mdl-radio__button {
  line-height: 24px;
}

.mdl-radio.is-upgraded .mdl-radio__button {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  -ms-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

.mdl-radio__outer-circle {
  position: absolute;
  top: 0px;
  left: 0;
  display: inline-block;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
  border: 1px solid var(--neutral4);
}

.mdl-radio.is-checked .mdl-radio__outer-circle {
  border: 2px solid var(--primary800);
  height: 24px !important;
  width: 24px !important;
}

.unavailable .mdl-radio__outer-circle {
  border: 1.5px solid black !important;
}


.productVariant .mdl-radio__outer-circle {
  width: 100%;
  border: none;
}

.circle__color.d-no.circle__selected {
  border-color: var(--primary);
}

.productVariant .mdl-radio.is-disabled .mdl-radio__inner-circle {
  background: no-repeat;
}

.unavailable .mdl-radio__outer-circle::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  /* Grosor de la línea */
  background: black;
  /* Color de la línea */
  top: 47%;
  left: 0;
  transform: rotate(-45deg);
  pointer-events: none;
}

.unavailable .mdl-radio__outer-circle {
  z-index: 10;
  pointer-events: none;
}


.mdl-radio__outer-circle fieldset[disabled] .mdl-radio,
.mdl-radio.is-disabled .mdl-radio__outer-circle {
  border: 2px solid rgba(0, 0, 0, 0.26);
  cursor: auto;
}

.mdl-radio__inner-circle {
  position: absolute;
  z-index: 1;
  margin: 0;
  top: 4px;
  left: 4px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition-duration: 0.28s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
  border-radius: 50%;
  background: var(--primary800);
  z-index: 11;
}

.productVariant span.mdl-radio__inner-circle {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 22px;
  height: 22px;
  top: 50%;
  left: 50%;
  transform: translate(0%, -36%);
  padding: 5px;
  border-radius: 7px;
  background: none;
}

.productVariant span.mdl-radio__outer-circle {
  border-radius: 8px;
}

.mdl-radio.is-checked .mdl-radio__inner-circle {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

fieldset[disabled] .mdl-radio .mdl-radio__inner-circle,
.mdl-radio.is-disabled .mdl-radio__inner-circle {
  background: rgba(0, 0, 0, 0.26);
  cursor: auto;
}

.mdl-radio.is-focused .mdl-radio__inner-circle {
  box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1);
}

.mdl-radio__label {
  cursor: pointer;
}

.mdl-radio:hover .mdl-radio__label {
  color: var(--primary600);
}

fieldset[disabled] .mdl-radio .mdl-radio__label,
.mdl-radio.is-disabled .mdl-radio__label {
  color: rgba(0, 0, 0, 0.26);
  cursor: auto;
}

.mdl-radio__ripple-container {
  position: absolute;
  z-index: 2;
  top: -9px;
  left: -9px;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.mdl-radio__ripple-container .mdl-ripple {
  background: var(--primary800);
}

.right-radio .mdl-radio__outer-circle {
  right: 0px;
  left: unset;
}

.right-radio .mdl-radio__inner-circle {
  right: 4px;
  left: unset;
}

.right-radio .mdl-radio__ripple-container {
  right: -9px;
  left: unset;
}

.mdl-radio.right-radio.is-upgraded {
  padding-right: 36px;
  padding-left: 0;
}

fieldset[disabled] .mdl-radio .mdl-radio__ripple-container,
.mdl-radio.is-disabled .mdl-radio__ripple-container {
  cursor: auto;
}

fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple,
.mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple {
  background: transparent;
}


/* CHIP */
_:-ms-input-placeholder,
:root .mdl-slider.mdl-slider.is-upgraded {
  -ms-appearance: none;
  height: 32px;
  margin: 0;
}

.mdl-slider {
  width: calc(100% - 40px);
  margin: 0 20px;
}

.mdl-slider.is-upgraded {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 2px;
  background: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
  padding: 0;
  color: var(--primary800);
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  z-index: 1;
  cursor: pointer;
  /**************************** Tracks ****************************/
  /**************************** Thumbs ****************************/
  /**************************** 0-value ****************************/
  /**************************** Disabled ****************************/
}

.mdl-slider.is-upgraded::-moz-focus-outer {
  border: 0;
}

.mdl-slider.is-upgraded::-ms-tooltip {
  display: none;
}

.mdl-slider.is-upgraded::-webkit-slider-runnable-track {
  background: transparent;
}

.mdl-slider.is-upgraded::-moz-range-track {
  background: transparent;
  border: none;
}

.mdl-slider.is-upgraded::-ms-track {
  background: none;
  color: transparent;
  height: 2px;
  width: 100%;
  border: none;
}

.mdl-slider.is-upgraded::-ms-fill-lower {
  padding: 0;
  background: linear-gradient(to right, transparent, transparent 16px, var(--primary800) 16px, var(--primary800) 0);
}

.mdl-slider.is-upgraded::-ms-fill-upper {
  padding: 0;
  background: linear-gradient(to left, transparent, transparent 16px, rgba(0, 0, 0, 0.26) 16px, rgba(0, 0, 0, 0.26) 0);
}

.mdl-slider.is-upgraded::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--primary800);
  border: none;
  transition: border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-slider.is-upgraded::-moz-range-thumb {
  -moz-appearance: none;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  background-image: none;
  background: var(--primary800);
  border: none;
}

.mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(63, 81, 181, 0.26);
}

.mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb {
  box-shadow: 0 0 0 10px rgba(63, 81, 181, 0.26);
}

.mdl-slider.is-upgraded:active::-webkit-slider-thumb {
  background-image: none;
  background: var(--primary800);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.mdl-slider.is-upgraded:active::-moz-range-thumb {
  background-image: none;
  background: var(--primary800);
  transform: scale(1.5);
}

.mdl-slider.is-upgraded::-ms-thumb {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--primary800);
  transform: scale(0.375);
  transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb {
  background: radial-gradient(circle closest-side, var(--primary800) 0%, var(--primary800) 37.5%, rgba(63, 81, 181, 0.26) 37.5%, rgba(63, 81, 181, 0.26) 100%);
  transform: scale(1);
}

.mdl-slider.is-upgraded:active::-ms-thumb {
  background: var(--primary800);
  transform: scale(0.5625);
}

.mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb {
  border: 2px solid rgba(0, 0, 0, 0.26);
  background: transparent;
}

.mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb {
  border: 2px solid rgba(0, 0, 0, 0.26);
  background: transparent;
}

.mdl-slider.is-upgraded.is-lowest-value+.mdl-slider__background-flex>.mdl-slider__background-upper {
  left: 6px;
}

.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.12);
}

.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb {
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.12);
}

.mdl-slider.is-upgraded.is-lowest-value:active::-webkit-slider-thumb {
  border: 1.6px solid rgba(0, 0, 0, 0.26);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.mdl-slider.is-upgraded.is-lowest-value:active+.mdl-slider__background-flex>.mdl-slider__background-upper {
  left: 9px;
}

.mdl-slider.is-upgraded.is-lowest-value:active::-moz-range-thumb {
  border: 1.5px solid rgba(0, 0, 0, 0.26);
  transform: scale(1.5);
}

.mdl-slider.is-upgraded.is-lowest-value::-ms-thumb {
  background: radial-gradient(circle closest-side, transparent 0%, transparent 66.67%, rgba(0, 0, 0, 0.26) 66.67%, rgba(0, 0, 0, 0.26) 100%);
}

.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb {
  background: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.12) 25%, rgba(0, 0, 0, 0.26) 25%, rgba(0, 0, 0, 0.26) 37.5%, rgba(0, 0, 0, 0.12) 37.5%, rgba(0, 0, 0, 0.12) 100%);
  transform: scale(1);
}

.mdl-slider.is-upgraded.is-lowest-value:active::-ms-thumb {
  transform: scale(0.5625);
  background: radial-gradient(circle closest-side, transparent 0%, transparent 77.78%, rgba(0, 0, 0, 0.26) 77.78%, rgba(0, 0, 0, 0.26) 100%);
}

.mdl-slider.is-upgraded.is-lowest-value::-ms-fill-lower {
  background: transparent;
}

.mdl-slider.is-upgraded.is-lowest-value::-ms-fill-upper {
  margin-left: 6px;
}

.mdl-slider.is-upgraded.is-lowest-value:active::-ms-fill-upper {
  margin-left: 9px;
}

.mdl-slider.is-upgraded:disabled:focus::-webkit-slider-thumb,
.mdl-slider.is-upgraded:disabled:active::-webkit-slider-thumb,
.mdl-slider.is-upgraded:disabled::-webkit-slider-thumb {
  -webkit-transform: scale(0.667);
  transform: scale(0.667);
  background: rgba(0, 0, 0, 0.26);
}

.mdl-slider.is-upgraded:disabled:focus::-moz-range-thumb,
.mdl-slider.is-upgraded:disabled:active::-moz-range-thumb,
.mdl-slider.is-upgraded:disabled::-moz-range-thumb {
  transform: scale(0.667);
  background: rgba(0, 0, 0, 0.26);
}

.mdl-slider.is-upgraded:disabled+.mdl-slider__background-flex>.mdl-slider__background-lower {
  background-color: rgba(0, 0, 0, 0.26);
  left: -6px;
}

.mdl-slider.is-upgraded:disabled+.mdl-slider__background-flex>.mdl-slider__background-upper {
  left: 6px;
}

.mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-webkit-slider-thumb,
.mdl-slider.is-upgraded.is-lowest-value:disabled:active::-webkit-slider-thumb,
.mdl-slider.is-upgraded.is-lowest-value:disabled::-webkit-slider-thumb {
  border: 3px solid rgba(0, 0, 0, 0.26);
  background: transparent;
  -webkit-transform: scale(0.667);
  transform: scale(0.667);
}

.mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-moz-range-thumb,
.mdl-slider.is-upgraded.is-lowest-value:disabled:active::-moz-range-thumb,
.mdl-slider.is-upgraded.is-lowest-value:disabled::-moz-range-thumb {
  border: 3px solid rgba(0, 0, 0, 0.26);
  background: transparent;
  transform: scale(0.667);
}

.mdl-slider.is-upgraded.is-lowest-value:disabled:active+.mdl-slider__background-flex>.mdl-slider__background-upper {
  left: 6px;
}

.mdl-slider.is-upgraded:disabled:focus::-ms-thumb,
.mdl-slider.is-upgraded:disabled:active::-ms-thumb,
.mdl-slider.is-upgraded:disabled::-ms-thumb {
  transform: scale(0.25);
  background: rgba(0, 0, 0, 0.26);
}

.mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-ms-thumb,
.mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-thumb,
.mdl-slider.is-upgraded.is-lowest-value:disabled::-ms-thumb {
  transform: scale(0.25);
  background: radial-gradient(circle closest-side, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.26) 50%, rgba(0, 0, 0, 0.26) 100%);
}

.mdl-slider.is-upgraded:disabled::-ms-fill-lower {
  margin-right: 6px;
  background: linear-gradient(to right, transparent, transparent 25px, rgba(0, 0, 0, 0.26) 25px, rgba(0, 0, 0, 0.26) 0);
}

.mdl-slider.is-upgraded:disabled::-ms-fill-upper {
  margin-left: 6px;
}

.mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-fill-upper {
  margin-left: 6px;
}

.mdl-slider__ie-container {
  height: 18px;
  overflow: visible;
  border: none;
  margin: none;
  padding: none;
}

.mdl-slider__container {
  height: 18px;
  position: relative;
  background: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.mdl-slider__background-flex {
  background: transparent;
  position: absolute;
  height: 2px;
  width: calc(100% - 52px);
  top: 50%;
  left: 0;
  margin: 0 26px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  border: 0;
  padding: 0;
  -webkit-transform: translate(0, -1px);
  transform: translate(0, -1px);
}

.mdl-slider__background-lower {
  background: var(--primary800);
  -webkit-flex: 0;
  -ms-flex: 0;
  flex: 0;
  position: relative;
  border: 0;
  padding: 0;
}

.mdl-slider__background-upper {
  background: rgba(0, 0, 0, 0.26);
  -webkit-flex: 0;
  -ms-flex: 0;
  flex: 0;
  position: relative;
  border: 0;
  padding: 0;
  transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}


.mdl-snackbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  cursor: default;
  background-color: #323232;
  z-index: 3;
  display: block;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-family: "Noto Sans", sans-serif;
  will-change: transform;
  -webkit-transform: translate(0, 80px);
  transform: translate(0, 80px);
  transition: -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none;
}

@media (max-width: 479px) {
  .mdl-snackbar {
    width: 100%;
    left: 0;
    min-height: 48px;
    max-height: 80px;
  }
}

@media (min-width: 480px) {
  .mdl-snackbar {
    min-width: 288px;
    max-width: 568px;
    border-radius: 2px;
    -webkit-transform: translate(-50%, 80px);
    transform: translate(-50%, 80px);
  }
}

.mdl-snackbar--active {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  pointer-events: auto;
  transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
  transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
  transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
}

@media (min-width: 480px) {
  .mdl-snackbar--active {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
}

.mdl-snackbar__text {
  padding: 14px 12px 14px 24px;
  vertical-align: middle;
  color: white;
  float: left;
}

.mdl-snackbar__action {
  background: transparent;
  border: none;
  color: var(--primary600);
  float: right;
  text-transform: uppercase;
  padding: 14px 24px 14px 12px;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  outline: none;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.mdl-snackbar__action::-moz-focus-inner {
  border: 0;
}

.mdl-snackbar__action:not([aria-hidden]) {
  opacity: 1;
  pointer-events: auto;
}


/* CHIP */
.mdl-spinner {
  display: inline-block;
  position: relative;
  width: 28px;
  height: 28px;
}

.mdl-spinner:not(.is-upgraded).is-active:after {
  content: "Loading...";
}

.mdl-spinner.is-upgraded.is-active {
  -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
  animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
}

@-webkit-keyframes mdl-spinner__container-rotate {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes mdl-spinner__container-rotate {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.mdl-spinner__layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.mdl-spinner__layer-1 {
  border-color: rgb(66, 165, 245);
}

.mdl-spinner--single-color .mdl-spinner__layer-1 {
  border-color: var(--primary800);
}

.mdl-spinner.is-active .mdl-spinner__layer-1 {
  -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.mdl-spinner__layer-2 {
  border-color: rgb(244, 67, 54);
}

.mdl-spinner--single-color .mdl-spinner__layer-2 {
  border-color: var(--primary800);
}

.mdl-spinner.is-active .mdl-spinner__layer-2 {
  -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.mdl-spinner__layer-3 {
  border-color: rgb(253, 216, 53);
}

.mdl-spinner--single-color .mdl-spinner__layer-3 {
  border-color: var(--primary800);
}

.mdl-spinner.is-active .mdl-spinner__layer-3 {
  -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.mdl-spinner__layer-4 {
  border-color: rgb(76, 175, 80);
}

.mdl-spinner--single-color .mdl-spinner__layer-4 {
  border-color: var(--primary800);
}

.mdl-spinner.is-active .mdl-spinner__layer-4 {
  -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  25% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  37.5% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }

  50% {
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg);
  }

  62.5% {
    -webkit-transform: rotate(675deg);
    transform: rotate(675deg);
  }

  75% {
    -webkit-transform: rotate(810deg);
    transform: rotate(810deg);
  }

  87.5% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg);
  }

  to {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
  }
}

@keyframes mdl-spinner__fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  25% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  37.5% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }

  50% {
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg);
  }

  62.5% {
    -webkit-transform: rotate(675deg);
    transform: rotate(675deg);
  }

  75% {
    -webkit-transform: rotate(810deg);
    transform: rotate(810deg);
  }

  87.5% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg);
  }

  to {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
  }
}

@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
  from {
    opacity: 0.99;
  }

  25% {
    opacity: 0.99;
  }

  26% {
    opacity: 0;
  }

  89% {
    opacity: 0;
  }

  90% {
    opacity: 0.99;
  }

  100% {
    opacity: 0.99;
  }
}

@keyframes mdl-spinner__layer-1-fade-in-out {
  from {
    opacity: 0.99;
  }

  25% {
    opacity: 0.99;
  }

  26% {
    opacity: 0;
  }

  89% {
    opacity: 0;
  }

  90% {
    opacity: 0.99;
  }

  100% {
    opacity: 0.99;
  }
}

@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
  from {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  25% {
    opacity: 0.99;
  }

  50% {
    opacity: 0.99;
  }

  51% {
    opacity: 0;
  }
}

@keyframes mdl-spinner__layer-2-fade-in-out {
  from {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  25% {
    opacity: 0.99;
  }

  50% {
    opacity: 0.99;
  }

  51% {
    opacity: 0;
  }
}

@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
  from {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  50% {
    opacity: 0.99;
  }

  75% {
    opacity: 0.99;
  }

  76% {
    opacity: 0;
  }
}

@keyframes mdl-spinner__layer-3-fade-in-out {
  from {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  50% {
    opacity: 0.99;
  }

  75% {
    opacity: 0.99;
  }

  76% {
    opacity: 0;
  }
}

@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
  from {
    opacity: 0;
  }

  65% {
    opacity: 0;
  }

  75% {
    opacity: 0.99;
  }

  90% {
    opacity: 0.99;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mdl-spinner__layer-4-fade-in-out {
  from {
    opacity: 0;
  }

  65% {
    opacity: 0;
  }

  75% {
    opacity: 0.99;
  }

  90% {
    opacity: 0.99;
  }

  100% {
    opacity: 0;
  }
}

.mdl-spinner__gap-patch {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.mdl-spinner__gap-patch .mdl-spinner__circle {
  width: 1000%;
  left: -450%;
}

.mdl-spinner__circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.mdl-spinner__circle-clipper.mdl-spinner__left {
  float: left;
}

.mdl-spinner__circle-clipper.mdl-spinner__right {
  float: right;
}

.mdl-spinner__circle-clipper .mdl-spinner__circle {
  width: 200%;
}

.mdl-spinner__circle {
  box-sizing: border-box;
  height: 100%;
  border-width: 3px;
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent !important;
  border-radius: 50%;
  -webkit-animation: none;
  animation: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.mdl-spinner__left .mdl-spinner__circle {
  border-right-color: transparent !important;
  -webkit-transform: rotate(129deg);
  transform: rotate(129deg);
}

.mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle {
  -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.mdl-spinner__right .mdl-spinner__circle {
  left: -100%;
  border-left-color: transparent !important;
  -webkit-transform: rotate(-129deg);
  transform: rotate(-129deg);
}

.mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle {
  -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes mdl-spinner__left-spin {
  from {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }

  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  to {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }
}

@keyframes mdl-spinner__left-spin {
  from {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }

  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  to {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }
}

@-webkit-keyframes mdl-spinner__right-spin {
  from {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }

  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  to {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
}

@keyframes mdl-spinner__right-spin {
  from {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }

  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  to {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
  }
}


.mdl-switch {
  position: relative;
  z-index: 1;
  vertical-align: middle;
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  height: 30px;
  margin: 4px;
  padding: 0;
  overflow: visible;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
}

.mdl-switch:hover .mdl-switch__label {
  color: var(--primary600);
}

.mdl-switch.is-upgraded {
  padding-left: 66px;
  padding-right: 16px;
}

.mdl-switch__input {
  line-height: 24px;
}

.mdl-switch.is-upgraded .mdl-switch__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  -ms-appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

.mdl-switch__track {
  background: rgba(0, 0, 0, 0.26);
  position: absolute;
  left: 4px;
  top: 0px;
  height: 28px;
  width: 48px;
  border-radius: 14px;
  cursor: pointer;
}

.mdl-switch.is-checked .mdl-switch__track {
  background: var(--primary800);
}

.mdl-switch__track fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__track {
  background: rgba(0, 0, 0, 0.12);
  cursor: auto;
}

.mdl-switch__thumb {
  background: rgb(250, 250, 250);
  position: absolute;
  left: 6px;
  top: 2px;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  transition-duration: 0.28s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: left;
}

.mdl-switch.is-checked .mdl-switch__thumb {
  background: var(--primary100);
  left: 26px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
}

.mdl-switch__thumb fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__thumb {
  background: rgb(189, 189, 189);
  cursor: auto;
}

.mdl-switch__focus-helper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-4px, -4px);
  transform: translate(-4px, -4px);
  display: inline-block;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: transparent;
}

.mdl-switch.is-focused .mdl-switch__focus-helper {
  box-shadow: 0 0 0px 20px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.1);
}

.mdl-switch.is-focused.is-checked .mdl-switch__focus-helper {
  box-shadow: 0 0 0px 20px rgba(63, 81, 181, 0.26);
  background-color: rgba(63, 81, 181, 0.26);
}

.mdl-switch__label {
  position: relative;
  cursor: pointer;
  font-size: 16px;
  line-height: 18px;
  margin: 0;
}

.mdl-switch__label fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__label {
  color: rgb(189, 189, 189);
  cursor: auto;
}

.mdl-switch__ripple-container {
  position: absolute;
  z-index: 2;
  top: -12px;
  left: -6px;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
  transition-duration: 0.40s;
  transition-timing-function: step-end;
  transition-property: left;
}

.mdl-switch__ripple-container .mdl-ripple {
  background: var(--primary800);
}

.mdl-switch__ripple-container fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__ripple-container {
  cursor: auto;
}

fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple,
.mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple {
  background: transparent;
}

.mdl-switch.is-checked .mdl-switch__ripple-container {
  left: 16px;
}


/* CHIP */
.mdl-tabs {
  display: block;
  width: 100%;
}

.mdl-tabs__tab {
  margin: 0;
  border: none;
  padding: 0 24px 0 24px;
  float: left;
  position: relative;
  display: block;
  text-decoration: none;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.54);
  overflow: hidden;
}

.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
  color: var(--neutral5);
}

.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
  height: 2px;
  width: 100%;
  display: block;
  content: " ";
  bottom: 0px;
  left: 0px;
  position: absolute;
  background: var(--primary800);
  -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
  animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;
  transition: all 1s cubic-bezier(0.4, 0, 1, 1);
}

.mdl-tabs__tab .mdl-tabs__ripple-container {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 1;
  overflow: hidden;
}


.mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple {
  background: var(--primary800);
}

.mdl-tabs__panel {
  display: block;
}

.mdl-tabs.is-upgraded .mdl-tabs__panel {
  display: none;
}

.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active {
  display: block;
}

@-webkit-keyframes border-expand {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    width: 100%;
  }
}

@keyframes border-expand {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    width: 100%;
  }
}


.mdl-textfield {
  position: relative;
  font-size: 16px;
  display: inline-block;
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
  margin: 0;
  padding: 16px 0;
}

.mdl-textfield[disabled],
.mdl-textfieldl[readonly] {
  opacity: .4;
}

textarea.mdl-textfield__input {
  min-height: 112px;
  padding: 1rem 1rem 1rem 8px !important;
}

.mdl-textfield .mdl-button {
  position: absolute;
  bottom: 20px;
}

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

.mdl-textfield--full-width {
  width: 100%;
}

.mdl-textfield--expandable {
  min-width: 32px;
  width: auto;
  min-height: 32px;
}

.mdl-textfield--expandable .mdl-button--icon {
  top: 16px;
}

.mdl-textfield__input {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  display: block;
  font-size: 16px;
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: none;
  text-align: left;
  color: inherit;
}

.mdl-textfield__input[type="number"] {
  -moz-appearance: textfield;
}

.mdl-textfield__input[type="number"]::-webkit-inner-spin-button,
.mdl-textfield__input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mdl-textfield.is-focused .mdl-textfield__input {
  outline: none;
}

.mdl-textfield.is-invalid .mdl-textfield__input {
  box-shadow: none;
  border: 2px solid rgb(213, 0, 0);
}

fieldset[disabled] .mdl-textfield .mdl-textfield__input,
.mdl-textfield.is-disabled .mdl-textfield__input {
  background-color: var(--neutral1) !important;
  border: 1px solid var(--neutral3);
  color: rgba(0, 0, 0, 0.26);
}

.mdl-textfield textarea.mdl-textfield__input {
  display: block;
}

.mdl-textfield__label {
  bottom: 0;
  color: rgba(0, 0, 0, 0.26);
  font-size: 16px;
  left: 0;
  right: 0;
  pointer-events: none;
  position: absolute;
  display: block;
  top: 24px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}

.mdl-textfield.is-dirty .mdl-textfield__label,
.mdl-textfield.has-placeholder .mdl-textfield__label {
  visibility: hidden;
}

.mdl-textfield--floating-label .mdl-textfield__label {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
  transition: none;
}

fieldset[disabled] .mdl-textfield .mdl-textfield__label,
.mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
  color: rgba(0, 0, 0, 0.26);
}

.mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
  color: var(--primary800);
  top: 4px;
  visibility: visible;
}

.mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder .mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder .mdl-textfield__label,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder .mdl-textfield__label {
  top: -16px;
}

.mdl-textfield--floating-label.is-invalid .mdl-textfield__label {
  color: rgb(213, 0, 0);
  font-size: 12px;
}

.mdl-textfield__label:after {
  background-color: var(--primary800);
  bottom: 20px;
  content: '';
  height: 2px;
  left: 45%;
  position: absolute;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  width: 10px;
}

.mdl-textfield.is-focused .mdl-textfield__label:after {
  left: 0;
  visibility: visible;
  width: 100%;
}

.mdl-textfield.is-invalid .mdl-textfield__label:after {
  background-color: rgb(213, 0, 0);
}

.mdl-textfield__error {
  color: rgb(213, 0, 0);
  position: absolute;
  font-size: 12px;
  margin-top: 3px;
  visibility: hidden;
  display: block;
}

.mdl-textfield.is-invalid .mdl-textfield__error {
  visibility: visible;
}

.mdl-textfield__expandable-holder {
  display: inline-block;
  position: relative;
  margin-left: 32px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  max-width: 0.1px;
}

.mdl-textfield.is-focused .mdl-textfield__expandable-holder,
.mdl-textfield.is-dirty .mdl-textfield__expandable-holder {
  max-width: 600px;
}

.mdl-textfield__expandable-holder .mdl-textfield__label:after {
  bottom: 0;
}


/* CHIP */
.mdl-tooltip {
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: top center;
  transform-origin: top center;
  z-index: 999;
  background: rgba(97, 97, 97, 0.9);
  border-radius: 2px;
  color: rgb(255, 255, 255);
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  max-width: 170px;
  position: fixed;
  top: -500px;
  left: -500px;
  padding: 8px;
  text-align: center;
  border-radius: 8px;
}

.mdl-tooltip.is-active {
  -webkit-animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
  animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

.mdl-tooltip--large {
  line-height: 16px;
  font-size: 16px;
  padding: 16px;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  50% {
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
}


.mdl-shadow--2dp {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.mdl-shadow--3dp {
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
}

.mdl-shadow--4dp {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.mdl-shadow--6dp {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}

.mdl-shadow--8dp {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

.mdl-shadow--16dp {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.mdl-shadow--24dp {
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
}

.mdl-grid {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 0 auto 0 auto;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.mdl-grid.mdl-grid--no-spacing {
  padding: 0;
}

.mdl-cell {
  box-sizing: border-box;
}

.mdl-cell--top {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.mdl-cell--middle {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.mdl-cell--bottom {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.mdl-cell--stretch {
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

.mdl-grid.mdl-grid--no-spacing>.mdl-cell {
  margin: 0;
}

.mdl-cell--order-1 {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

.mdl-cell--order-2 {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

.mdl-cell--order-3 {
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}

.mdl-cell--order-4 {
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}

.mdl-cell--order-5 {
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}

.mdl-cell--order-6 {
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}

.mdl-cell--order-7 {
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}

.mdl-cell--order-8 {
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}

.mdl-cell--order-9 {
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}

.mdl-cell--order-10 {
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}

.mdl-cell--order-11 {
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}

.mdl-cell--order-12 {
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}

@media (max-width: 479px) {
  .mdl-grid {
    padding: 8px;
  }

  .mdl-cell {
    margin: 8px;
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell {
    width: 100%;
  }

  .mdl-cell--hide-phone {
    display: none !important;
  }

  .mdl-cell--order-1-phone.mdl-cell--order-1-phone {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .mdl-cell--order-2-phone.mdl-cell--order-2-phone {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .mdl-cell--order-3-phone.mdl-cell--order-3-phone {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .mdl-cell--order-4-phone.mdl-cell--order-4-phone {
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .mdl-cell--order-5-phone.mdl-cell--order-5-phone {
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .mdl-cell--order-6-phone.mdl-cell--order-6-phone {
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  .mdl-cell--order-7-phone.mdl-cell--order-7-phone {
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
  }

  .mdl-cell--order-8-phone.mdl-cell--order-8-phone {
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
  }

  .mdl-cell--order-9-phone.mdl-cell--order-9-phone {
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
  }

  .mdl-cell--order-10-phone.mdl-cell--order-10-phone {
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
  }

  .mdl-cell--order-11-phone.mdl-cell--order-11-phone {
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
  }

  .mdl-cell--order-12-phone.mdl-cell--order-12-phone {
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
  }

  .mdl-cell--1-col,
  .mdl-cell--1-col-phone.mdl-cell--1-col-phone {
    width: calc(25% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--1-col,
  .mdl-grid--no-spacing>.mdl-cell--1-col-phone.mdl-cell--1-col-phone {
    width: 25%;
  }

  .mdl-cell--2-col,
  .mdl-cell--2-col-phone.mdl-cell--2-col-phone {
    width: calc(50% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--2-col,
  .mdl-grid--no-spacing>.mdl-cell--2-col-phone.mdl-cell--2-col-phone {
    width: 50%;
  }

  .mdl-cell--3-col,
  .mdl-cell--3-col-phone.mdl-cell--3-col-phone {
    width: calc(75% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--3-col,
  .mdl-grid--no-spacing>.mdl-cell--3-col-phone.mdl-cell--3-col-phone {
    width: 75%;
  }

  .mdl-cell--4-col,
  .mdl-cell--4-col-phone.mdl-cell--4-col-phone {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--4-col,
  .mdl-grid--no-spacing>.mdl-cell--4-col-phone.mdl-cell--4-col-phone {
    width: 100%;
  }

  .mdl-cell--5-col,
  .mdl-cell--5-col-phone.mdl-cell--5-col-phone {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--5-col,
  .mdl-grid--no-spacing>.mdl-cell--5-col-phone.mdl-cell--5-col-phone {
    width: 100%;
  }

  .mdl-cell--6-col,
  .mdl-cell--6-col-phone.mdl-cell--6-col-phone {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--6-col,
  .mdl-grid--no-spacing>.mdl-cell--6-col-phone.mdl-cell--6-col-phone {
    width: 100%;
  }

  .mdl-cell--7-col,
  .mdl-cell--7-col-phone.mdl-cell--7-col-phone {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--7-col,
  .mdl-grid--no-spacing>.mdl-cell--7-col-phone.mdl-cell--7-col-phone {
    width: 100%;
  }

  .mdl-cell--8-col,
  .mdl-cell--8-col-phone.mdl-cell--8-col-phone {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--8-col,
  .mdl-grid--no-spacing>.mdl-cell--8-col-phone.mdl-cell--8-col-phone {
    width: 100%;
  }

  .mdl-cell--9-col,
  .mdl-cell--9-col-phone.mdl-cell--9-col-phone {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--9-col,
  .mdl-grid--no-spacing>.mdl-cell--9-col-phone.mdl-cell--9-col-phone {
    width: 100%;
  }

  .mdl-cell--10-col,
  .mdl-cell--10-col-phone.mdl-cell--10-col-phone {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--10-col,
  .mdl-grid--no-spacing>.mdl-cell--10-col-phone.mdl-cell--10-col-phone {
    width: 100%;
  }

  .mdl-cell--11-col,
  .mdl-cell--11-col-phone.mdl-cell--11-col-phone {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--11-col,
  .mdl-grid--no-spacing>.mdl-cell--11-col-phone.mdl-cell--11-col-phone {
    width: 100%;
  }

  .mdl-cell--12-col,
  .mdl-cell--12-col-phone.mdl-cell--12-col-phone {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--12-col,
  .mdl-grid--no-spacing>.mdl-cell--12-col-phone.mdl-cell--12-col-phone {
    width: 100%;
  }

  .mdl-cell--1-offset,
  .mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
    margin-left: calc(25% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-phone.mdl-cell--1-offset-phone {
    margin-left: 25%;
  }

  .mdl-cell--2-offset,
  .mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
    margin-left: calc(50% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-phone.mdl-cell--2-offset-phone {
    margin-left: 50%;
  }

  .mdl-cell--3-offset,
  .mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
    margin-left: calc(75% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-phone.mdl-cell--3-offset-phone {
    margin-left: 75%;
  }
}

@media (min-width: 480px) and (max-width: 839px) {
  .mdl-grid {
    padding: 8px;
  }

  .mdl-cell {
    margin: 8px;
    width: calc(50% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell {
    width: 50%;
  }

  .mdl-cell--hide-tablet {
    display: none !important;
  }

  .mdl-cell--order-1-tablet.mdl-cell--order-1-tablet {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .mdl-cell--order-2-tablet.mdl-cell--order-2-tablet {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .mdl-cell--order-3-tablet.mdl-cell--order-3-tablet {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .mdl-cell--order-4-tablet.mdl-cell--order-4-tablet {
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .mdl-cell--order-5-tablet.mdl-cell--order-5-tablet {
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .mdl-cell--order-6-tablet.mdl-cell--order-6-tablet {
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  .mdl-cell--order-7-tablet.mdl-cell--order-7-tablet {
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
  }

  .mdl-cell--order-8-tablet.mdl-cell--order-8-tablet {
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
  }

  .mdl-cell--order-9-tablet.mdl-cell--order-9-tablet {
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
  }

  .mdl-cell--order-10-tablet.mdl-cell--order-10-tablet {
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
  }

  .mdl-cell--order-11-tablet.mdl-cell--order-11-tablet {
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
  }

  .mdl-cell--order-12-tablet.mdl-cell--order-12-tablet {
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
  }

  .mdl-cell--1-col,
  .mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
    width: calc(12.5% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--1-col,
  .mdl-grid--no-spacing>.mdl-cell--1-col-tablet.mdl-cell--1-col-tablet {
    width: 12.5%;
  }

  .mdl-cell--2-col,
  .mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
    width: calc(25% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--2-col,
  .mdl-grid--no-spacing>.mdl-cell--2-col-tablet.mdl-cell--2-col-tablet {
    width: 25%;
  }

  .mdl-cell--3-col,
  .mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
    width: calc(37.5% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--3-col,
  .mdl-grid--no-spacing>.mdl-cell--3-col-tablet.mdl-cell--3-col-tablet {
    width: 37.5%;
  }

  .mdl-cell--4-col,
  .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
    width: calc(50% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--4-col,
  .mdl-grid--no-spacing>.mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
    width: 50%;
  }

  .mdl-cell--5-col,
  .mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
    width: calc(62.5% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--5-col,
  .mdl-grid--no-spacing>.mdl-cell--5-col-tablet.mdl-cell--5-col-tablet {
    width: 62.5%;
  }

  .mdl-cell--6-col,
  .mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
    width: calc(75% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--6-col,
  .mdl-grid--no-spacing>.mdl-cell--6-col-tablet.mdl-cell--6-col-tablet {
    width: 75%;
  }

  .mdl-cell--7-col,
  .mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
    width: calc(87.5% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--7-col,
  .mdl-grid--no-spacing>.mdl-cell--7-col-tablet.mdl-cell--7-col-tablet {
    width: 87.5%;
  }

  .mdl-cell--8-col,
  .mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--8-col,
  .mdl-grid--no-spacing>.mdl-cell--8-col-tablet.mdl-cell--8-col-tablet {
    width: 100%;
  }

  .mdl-cell--9-col,
  .mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--9-col,
  .mdl-grid--no-spacing>.mdl-cell--9-col-tablet.mdl-cell--9-col-tablet {
    width: 100%;
  }

  .mdl-cell--10-col,
  .mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--10-col,
  .mdl-grid--no-spacing>.mdl-cell--10-col-tablet.mdl-cell--10-col-tablet {
    width: 100%;
  }

  .mdl-cell--11-col,
  .mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--11-col,
  .mdl-grid--no-spacing>.mdl-cell--11-col-tablet.mdl-cell--11-col-tablet {
    width: 100%;
  }

  .mdl-cell--12-col,
  .mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--12-col,
  .mdl-grid--no-spacing>.mdl-cell--12-col-tablet.mdl-cell--12-col-tablet {
    width: 100%;
  }

  .mdl-cell--1-offset,
  .mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
    margin-left: calc(12.5% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-tablet.mdl-cell--1-offset-tablet {
    margin-left: 12.5%;
  }

  .mdl-cell--2-offset,
  .mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
    margin-left: calc(25% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-tablet.mdl-cell--2-offset-tablet {
    margin-left: 25%;
  }

  .mdl-cell--3-offset,
  .mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
    margin-left: calc(37.5% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-tablet.mdl-cell--3-offset-tablet {
    margin-left: 37.5%;
  }

  .mdl-cell--4-offset,
  .mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
    margin-left: calc(50% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset-tablet.mdl-cell--4-offset-tablet {
    margin-left: 50%;
  }

  .mdl-cell--5-offset,
  .mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
    margin-left: calc(62.5% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset-tablet.mdl-cell--5-offset-tablet {
    margin-left: 62.5%;
  }

  .mdl-cell--6-offset,
  .mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
    margin-left: calc(75% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset-tablet.mdl-cell--6-offset-tablet {
    margin-left: 75%;
  }

  .mdl-cell--7-offset,
  .mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
    margin-left: calc(87.5% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset-tablet.mdl-cell--7-offset-tablet {
    margin-left: 87.5%;
  }
}

@media (min-width: 840px) {
  .mdl-grid {
    padding: 8px;
  }

  .mdl-cell {
    margin: 8px;
    width: calc(33.3333333333% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell {
    width: 33.3333333333%;
  }

  .mdl-cell--hide-desktop {
    display: none !important;
  }

  .mdl-cell--order-1-desktop.mdl-cell--order-1-desktop {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .mdl-cell--order-2-desktop.mdl-cell--order-2-desktop {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .mdl-cell--order-3-desktop.mdl-cell--order-3-desktop {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .mdl-cell--order-4-desktop.mdl-cell--order-4-desktop {
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .mdl-cell--order-5-desktop.mdl-cell--order-5-desktop {
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .mdl-cell--order-6-desktop.mdl-cell--order-6-desktop {
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  .mdl-cell--order-7-desktop.mdl-cell--order-7-desktop {
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
  }

  .mdl-cell--order-8-desktop.mdl-cell--order-8-desktop {
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
  }

  .mdl-cell--order-9-desktop.mdl-cell--order-9-desktop {
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
  }

  .mdl-cell--order-10-desktop.mdl-cell--order-10-desktop {
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
  }

  .mdl-cell--order-11-desktop.mdl-cell--order-11-desktop {
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
  }

  .mdl-cell--order-12-desktop.mdl-cell--order-12-desktop {
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
  }

  .mdl-cell--1-col,
  .mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
    width: calc(8.3333333333% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--1-col,
  .mdl-grid--no-spacing>.mdl-cell--1-col-desktop.mdl-cell--1-col-desktop {
    width: 8.3333333333%;
  }

  .mdl-cell--2-col,
  .mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
    width: calc(16.6666666667% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--2-col,
  .mdl-grid--no-spacing>.mdl-cell--2-col-desktop.mdl-cell--2-col-desktop {
    width: 16.6666666667%;
  }

  .mdl-cell--3-col,
  .mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
    width: calc(25% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--3-col,
  .mdl-grid--no-spacing>.mdl-cell--3-col-desktop.mdl-cell--3-col-desktop {
    width: 25%;
  }

  .mdl-cell--4-col,
  .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
    width: calc(33.3333333333% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--4-col,
  .mdl-grid--no-spacing>.mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
    width: 33.3333333333%;
  }

  .mdl-cell--5-col,
  .mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
    width: calc(41.6666666667% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--5-col,
  .mdl-grid--no-spacing>.mdl-cell--5-col-desktop.mdl-cell--5-col-desktop {
    width: 41.6666666667%;
  }

  .mdl-cell--6-col,
  .mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
    width: calc(50% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--6-col,
  .mdl-grid--no-spacing>.mdl-cell--6-col-desktop.mdl-cell--6-col-desktop {
    width: 50%;
  }

  .mdl-cell--7-col,
  .mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
    width: calc(58.3333333333% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--7-col,
  .mdl-grid--no-spacing>.mdl-cell--7-col-desktop.mdl-cell--7-col-desktop {
    width: 58.3333333333%;
  }

  .mdl-cell--8-col,
  .mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
    width: calc(66.6666666667% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--8-col,
  .mdl-grid--no-spacing>.mdl-cell--8-col-desktop.mdl-cell--8-col-desktop {
    width: 66.6666666667%;
  }

  .mdl-cell--9-col,
  .mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
    width: calc(75% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--9-col,
  .mdl-grid--no-spacing>.mdl-cell--9-col-desktop.mdl-cell--9-col-desktop {
    width: 75%;
  }

  .mdl-cell--10-col,
  .mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
    width: calc(83.3333333333% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--10-col,
  .mdl-grid--no-spacing>.mdl-cell--10-col-desktop.mdl-cell--10-col-desktop {
    width: 83.3333333333%;
  }

  .mdl-cell--11-col,
  .mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
    width: calc(91.6666666667% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--11-col,
  .mdl-grid--no-spacing>.mdl-cell--11-col-desktop.mdl-cell--11-col-desktop {
    width: 91.6666666667%;
  }

  .mdl-cell--12-col,
  .mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
    width: calc(100% - 16px);
  }

  .mdl-grid--no-spacing>.mdl-cell--12-col,
  .mdl-grid--no-spacing>.mdl-cell--12-col-desktop.mdl-cell--12-col-desktop {
    width: 100%;
  }

  .mdl-cell--1-offset,
  .mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
    margin-left: calc(8.3333333333% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--1-offset-desktop.mdl-cell--1-offset-desktop {
    margin-left: 8.3333333333%;
  }

  .mdl-cell--2-offset,
  .mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
    margin-left: calc(16.6666666667% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--2-offset-desktop.mdl-cell--2-offset-desktop {
    margin-left: 16.6666666667%;
  }

  .mdl-cell--3-offset,
  .mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
    margin-left: calc(25% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--3-offset-desktop.mdl-cell--3-offset-desktop {
    margin-left: 25%;
  }

  .mdl-cell--4-offset,
  .mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
    margin-left: calc(33.3333333333% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--4-offset-desktop.mdl-cell--4-offset-desktop {
    margin-left: 33.3333333333%;
  }

  .mdl-cell--5-offset,
  .mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
    margin-left: calc(41.6666666667% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--5-offset-desktop.mdl-cell--5-offset-desktop {
    margin-left: 41.6666666667%;
  }

  .mdl-cell--6-offset,
  .mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
    margin-left: calc(50% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--6-offset-desktop.mdl-cell--6-offset-desktop {
    margin-left: 50%;
  }

  .mdl-cell--7-offset,
  .mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
    margin-left: calc(58.3333333333% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--7-offset-desktop.mdl-cell--7-offset-desktop {
    margin-left: 58.3333333333%;
  }

  .mdl-cell--8-offset,
  .mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
    margin-left: calc(66.6666666667% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--8-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--8-offset-desktop.mdl-cell--8-offset-desktop {
    margin-left: 66.6666666667%;
  }

  .mdl-cell--9-offset,
  .mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
    margin-left: calc(75% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--9-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--9-offset-desktop.mdl-cell--9-offset-desktop {
    margin-left: 75%;
  }

  .mdl-cell--10-offset,
  .mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
    margin-left: calc(83.3333333333% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--10-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--10-offset-desktop.mdl-cell--10-offset-desktop {
    margin-left: 83.3333333333%;
  }

  .mdl-cell--11-offset,
  .mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
    margin-left: calc(91.6666666667% + 8px);
  }

  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--11-offset,
  .mdl-grid.mdl-grid--no-spacing>.mdl-cell--11-offset-desktop.mdl-cell--11-offset-desktop {
    margin-left: 91.6666666667%;
  }
}




/* ==========================================================================
                     OMNILIFE THEME 2024
                     ========================================================================== */

/* buttons  */

.button-container {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.mdl-button.small {
  padding: 8px 20px;
  font-size: 14px;
}


.mdl-button.big {
  padding: 30px;
  font-weight: 600;
}

.mdl-button.primary {
  background-color: var(--primary800);
  color: #fff;
}

.mdl-button.primary:hover {
  background-color: var(--primary700);
}

.mdl-button.primary:active {
  color: #fff;
  background: var(--primary900);
}

.mdl-button.primary .mdl-ripple {
  background: var(--primary100);
}

.mdl-button.primary:focus:not(:active) {
  background-color: var(--primary100);
  color: var(--primary600);
  /* border: 1px solid var(--primary400); */
}

.mdl-button.secondary {
  background-color: #fff;
  color: var(--primary800);
}

.mdl-button.secondary:hover {
  background-color: var(--primary100);
}

.mdl-button.secondary:active {
  color: var(--primary400);
  background: #fff;
}

.mdl-button.secondary:focus:not(:active) {
  background-color: var(--primary100);
  color: var(--primary600);
  border: 1px solid var(--primary400);
}

.mdl-button.link span {
  text-decoration: underline;
}

.mdl-button.link {
  background: none !important;
  color: var(--primary800);
  padding: 10px;
  font-weight: 500;
  line-height: 24px;
}

.mdl-button.link:hover {
  color: var(--primary600);
}

/* text blocks */
.mdl-block {
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  margin: 8px 0;
}

.mdl-text-block {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

/* cards */
.mdl-card-info {
  width: 100%;
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  background-color: rgb(102 48 140 / 80%);
  color: #fff;
  position: absolute;
  bottom: 0;
  border-radius: 16px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid rgb(51 51 51 / 25%);
  opacity: 0;
  transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
  padding: 24px;
  box-shadow: 0 -10px 20px rgb(0 0 0 / 10%);
}

.mdl-card:hover .mdl-card-info,
.mdl-card-info.active {
  opacity: 1;
  transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

#home-noticias .mdl-card__main .mdl-card-info.active {
  opacity: 0;
}

.mdl-card.mdl-card__full.active:hover .mdl-card-info.active {
  opacity: 1 !important;
}

.mdl-card__main .mdl-card.mdl-card__full.active img {
  height: 100%;
}

@media (max-width: 990px) {
  #home-noticias .mdl-card__main .mdl-card-info.active {
    opacity: 1 !important;
  }
}

.mdl-card__chip-container {
  display: flex;
  align-content: center;
  justify-content: end;
  position: absolute;
  width: 100%;
  padding: 10px;
}

.mdl-card__media img {
  width: 100%;
}

.mdl-card.small {
  min-height: auto;
}

.mdl-card__prices .discount-price {
  text-decoration: line-through;
  opacity: .7;
}


.container-mdl-card {
  display: flex;
  gap: 20px;
  background-color: var(--primary100);
  padding: 20px;
  border-radius: 20px;
}

.mdl-card-info.active {
  opacity: 1;
  transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
  padding: 10px;
  transform: scale(1);
}

.container-mdl-card .mdl-card:hover,
.container-mdl-card .mdl-card.active {
  width: 100%;
  transition: var(--transition);
}

.container-mdl-card .mdl-card {
  width: 40%;
}

img.mdl-card__image {
  min-width: 400px !important;
}

.mdl-big-banner img.mdl-big-banner-bg {
  width: 100%;
  transition: all 2000ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  /* easeOutCirc */
}

.mdl-big-banner__content:not(:has(.bg-secondary1.mdl-card.small)) {
  margin-top: 0px !important;
}

.bg-block {
  height: 30vh;
  background: var(--primary100);
  border-radius: 32px 32px 0 0;
  min-height: 400px;
  width: 100%;
  position: absolute;
  margin: auto;
  margin-top: 50px;
}

section#home-empresarios {
  margin: 40px 0;
  padding: 40px 0;
}

/* big banner */
.mdl-big-banner {
  border-radius: 20px;
  overflow: hidden;
  margin-top: 130px;
}

.mdl-big-banner figure {
  border-radius: 20px;
  overflow: hidden;
  max-height: 460px;
  background: var(--primary800);
}

.mdl-big-banner__content .bg-secondary1.mdl-card:hover,
#home-valores .mdl-card:hover {
  box-shadow: none;
}

#home-valores .mdl-text-block .mdl-card__actions {
  z-index: 100;
}

.mdl-big-banner__content {
  margin-top: -50px;
}

/* slider principal */

#home-slider .mdl-card:hover {
  box-shadow: none;
}

#home-slider {
  padding: 16px 0px;
}

.owl-mdl-principal-slider .center .mdl-card.small {
  display: flex !important;
  position: relative;
  background: transparent;
  transform: scale(1) translate(-70%, 0px);
  transition: var(--transition);
  width: 170%;
}

.owl-mdl-principal-slider .owl-item.active.center {
  z-index: 3;
}

.owl-mdl-principal-slider .owl-item.active {
  z-index: 2;
}

.owl-mdl-principal-slider .owl-grab .mdl-card.small {
  opacity: 0;
}

.owl-mdl-principal-slider .owl-item.active .mdl-slide-figure {
  transform: scale(0.4) translate(-80%, 0px);
  transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
  opacity: 1;
  padding: 0;
}

.owl-mdl-principal-slider.grab .mdl-card.small {
  opacity: 0;
}

.owl-mdl-principal-slider.owl-grab .mdl-card.small {
  opacity: 0;
}

.owl-mdl-principal-slider.owl-grab .owl-item.active .mdl-slide-figure {
  transform: scale(.6) translate(-60%, 0px);
  transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  opacity: 1;
}

.owl-mdl-principal-slider .mdl-card.small {
  display: none;
  position: absolute;
  background: transparent;
  transform: scale(.0) translate(-80%, 0px);
  transition: var(--transition);
  max-width: 470px;
}

.owl-mdl-principal-slider .owl-item.center .mdl-slide-figure {
  transform: scale(1.5) translate(-28%, 10px);
  transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
  opacity: 1;
  z-index: 5;
}

.owl-mdl-principal-slider .owl-item .mdl-slide-figure {
  transform: scale(.3) translate(-570%, 10px);
  border-radius: 100%;
  opacity: .5;
  width: 50%;
  width: 370px;
  padding: 50px;
  min-width: 200px;
  min-height: 420px;
  display: flex;
  align-items: center;
}

.owl-mdl-principal-slider .owl-grab .owl-item.active .mdl-slide-figure {
  transform: scale(.4);
  border-radius: 100%;
  transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  box-shadow: 0 0 0 15px #fe9925, 0 0 0 50px #fff, 0 0 0 140px #66308c;
  display: inline-flex;
  opacity: .5;
}

.owl-mdl-principal-slider .owl-item {
  padding: 30px 0;
}


.owl-mdl-principal-slider button.owl-next span,
.owl-mdl-principal-slider button.owl-prev span {
  color: transparent !important;
}

.owl-mdl-principal-slider button.owl-prev span:after {
  content: 'a';
  content: '\f104';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -30px;
  position: relative;
}

.owl-mdl-principal-slider button.owl-next span:after {
  content: 'a';
  content: '\f105';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -30px;
  position: relative;
}

.owl-mdl-principal-slider .owl-nav {
  display: flex;
  justify-content: space-around;
  max-width: 520px;
  margin: auto;
  margin-bottom: -36px;
}

.owl-mdl-principal-slider button.owl-next span,
.owl-mdl-principal-slider button.owl-prev span {
  border: 1px solid var(--primary400) !important;
}

.owl-mdl-principal-slider button.owl-next span:hover,
.owl-mdl-principal-slider button.owl-prev span:hover {
  background-color: var(--primary100) !important;
  box-shadow: 0 10px 10px -10px;
}

button.owl-dot.active span {
  background: var(--primary800) !important;
  padding: 0px 20px;
  transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

button.owl-dot span {
  transition: all .5s cubic-bezier(0.680, -0.550, 0.265, 1.550) !important;
}

.owl-mdl-principal-slider button.owl-next:hover span,
.owl-mdl-principal-slider button.owl-prev:hover span {
  border: 1px solid #fff;
  color: #fff;
  background: #fff;
}

.owl-mdl-principal-slider button.owl-next span:active,
.owl-mdl-principal-slider button.owl-prev span:active {
  box-shadow: 0 5px 10px -4px var(--primary800);
}


.owl-mdl-principal-slider .wrapper {
  width: 100%;
}

.owl-mdl-principal-slider .mdl-card.small h2 b {
  background: var(--primary600);
  color: #fff;
  padding: 6px 20px;
  display: inline-block;
}


/* seccion testimonios  */

section#home-testimonios {
  width: 100%;
  overflow: hidden;
  padding-top: 3rem;
}

.bg-secondary-circles {
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/deco-circle.svg);
  background-position: 100% -145%;
  background-size: 440px;
  background-repeat: no-repeat;
}

.mdl-carousel.owl-carousel.owl-theme.owl-loaded.owl-drag.owl-testimonials {
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/deco-circle.svg);
  background-position: 44% 10px;
  background-size: 440px;
  background-repeat: no-repeat;
}

.owl-testimonials .mdl-card {
  background: #ffffffd9;
  border: 1px solid var(--neutral2);
  -webkit-backdrop-filter: saturate(160%) blur(5px);
  backdrop-filter: saturate(160%) blur(5px);
}

.bg-testimonios {
  background: var(--primary400);
  border-radius: 0 400px 400px 0;
  width: 100%;
  height: 420px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mdl-card img.mdl-thumb {
  border-radius: 200px;
}

.owl-testimonials .owl-item {
  padding: 20px;
}

.bg-testimonios img {
  z-index: 2;
  position: relative;
  max-height: 600px;
  bottom: -120px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.bg-testimonios figure {
  overflow: hidden;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  border-radius: 0 850px 490px 0px;
}

.owl-testimonials .owl-item {
  padding: 10px 0;
}

/* valores */

.owl-valores .mdl-card-info {
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  background-color: #f3e0ffdb;
  border-radius: 16px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid rgb(51 51 51 / 25%);
  position: absolute;
  top: 0;
  display: inline-flex;
  height: auto !important;
  bottom: unset;
}

.mdl-card.valor-1 {
  min-height: 280px;
  top: 100px;
}

.mdl-card.valor-2 {
  min-height: 300px;
  top: 50px;
}

.mdl-card.valor-3 {
  min-height: 350px;
  top: -50;
}

#home-valores .owl-stage {
  display: flex;
  align-items: flex-start;
  padding: 80px 0;
}

#home-valores {
  display: flex;
  align-items: flex-end;
}

.bg-big-circle {
  background: var(--primary100);
  position: absolute;
  width: 45vh;
  height: 45vh;
  border-radius: 100%;
  right: 20%;
  top: -180px;
  box-shadow: 0 0 0 50px #fff, 0 0 0 52px var(--primary600);
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.bg-big-circle-container {
  position: absolute;
  height: 45vh;
  width: 100%;
}

.owl-valores .active.center .mdl-card .mdl-card-info::focus {
  opacity: 1;
  transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

.valores-estrella {
  width: 40px;
  min-width: 40px;
}

/*  big numbers */

#home-big-numbers b,
.bigNumbers b {
  color: var(--primary600);
  font-family: Montserrat;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
}

p.big-numbers-count {
  color: var(--primary600);
  font-family: Montserrat;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
  white-space: pre-line;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}

.big-numbers-content {
  padding: 10px;
  border-right: 1px solid var(--primary600);
}

#home-big-numbers .col-lg-4:last-child .big-numbers-content {
  border: none;
}


.home-news li .mdl-text-block {
  text-align: left;
}

ul.home-news {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.home-news li {
  padding: 5px 0;
}

/* noticias */

.noticias-callto1 {
  text-align: right;
  display: block;
}


/* responsivo */

@media (max-width: 992px) {
  .owl-content-img {
    order: 1;
  }

  .bg-secondary-circles .col-lg-12 {
    margin-top: 0 !important;
    z-index: 2;
  }

  .owl-content-text {
    order: 2;
  }

  .mdl-button.main {
    width: 100%;
  }

  #home-slider h2 {
    font-size: 24px;
  }

  .lg-order-1 {
    order: 1;
  }

  .lg-order-2 {
    order: 2;
  }

  .lg-order-3 {
    order: 3;
  }

  .lg-order-4 {
    order: 4;
  }

  .container-mdl-card .mdl-card {
    width: 100%;
  }

  .container-mdl-card {
    flex-direction: column;
    padding: 0;
  }


  .owl-mdl-principal-slider .d-flex.flex-center {
    flex-direction: column;
  }

  .owl-mdl-principal-slider .owl-item.center .mdl-slide-figure {
    transform: scale(1) translate(0, 20px);
    transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
    opacity: 1;
    z-index: 5;
    order: 1;
  }

  .owl-mdl-principal-slider .center .mdl-card.small {
    display: flex !important;
    position: relative;
    transform: scale(1) translate(0, 0px);
    transition: var(--transition);
    max-width: 100%;
    order: 2;
  }

  .owl-mdl-principal-slider .owl-item .mdl-slide-figure {
    transform: scale(0.4) translate(-360%, 0px);
    opacity: .5;
  }

  .bg-testimonios figure {
    border-radius: 0 0 135px;
    overflow: hidden;
    top: -50px;
    position: relative;
  }

  .bg-testimonios {
    display: flex;
    justify-content: center;
    padding: 0;
    margin-top: 3rem;
    height: 270px;
    align-items: center;
  }

  .bg-testimonios img {
    max-height: 370px;
    top: 50px;
  }

  #home-big-numbers .big-numbers-content {
    border-bottom: 1px solid var(--primary600);
    border-right: none;
  }

  .set-default-container {
    order: -1;
    text-align: left !important;
    display: flex !important;
    justify-content: center !important;
  }

}

/**HEDER & FOOTER*/
.footerTopBorder a {
  color: var(--primary1000);

}

.footerPrimary {
  color: var(--primary1000);
  padding-top: 40px;
  width: auto;
}

.footerTopBorder {
  border-top: 1px solid var(--primary400);
  display: flex;
  justify-content: center;
  align-items: center;
}

.iconFooter {
  height: 24px;
  width: 24px;
  font-size: 24px;
  margin-right: 10px;
  color: var(--primary800);
}

.footerImg {
  width: 179.84px;
  height: 47.96px;
  top: 0.03px;
  gap: 0px;
  opacity: 0px;

}

.imgCertFooter {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.footerTopBorder {
  border-top: 1px solid var(--primary400);
}

.sideBar p {
  cursor: pointer;
}

.modalLocation {
  display: none;
}

.modalLocation {

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.modalLocation,
.modalLanguage {
  background-color: #ffffff;
}

.select2-results {
  background-color: #ffffff;
}

.modalLanguage {
  display: none;
}

.modalContainer .mdl-card__title {
  color: var(--neutrals900);
}

.modalLocation .mdl-card__title {
  justify-content: center;
  display: grid;
  gap: 16px;
  margin-top: 1.5rem;
}

.actionsModalLocation {
  justify-content: space-around;
}

.modalLanguage .mdl-card__title {
  justify-content: center;
}

.actionsModalLanguage {
  justify-content: space-around;
}

.actionsModalLanguage a {
  min-width: 10rem;
  border: 1px solid var(--primary800);
  height: 2.5rem;
}

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



.selectSBContainer {
  overflow: visible;
  color: black;
  display: inline-grid;
  justify-content: center;
  min-height: 6rem;
  height: fit-content;
  display: grid;
  gap: 2rem;
}

.labelInputSelect::after {
  display: none;
}

.iconSelect {
  position: relative;
  font-size: 25px;
  color: #595858;
  right: 5px;
  cursor: pointer;
  z-index: -1;
}

.mdl-selectfield {
  position: relative;
  font-size: 16px;
  display: inline-block;
  width: 90%;
  max-width: 300px;
}

.mdl-selectfield input {
  color: black;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  display: inline-block;
  font-size: 16px;
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: none;
  box-sizing: border-box;
}

.mdl-selectfield input:focus {
  outline: none;
  border-bottom: 2px solid var(--primary700);
}

.mdl-selectfield label {
  color: #b0b0b0;
  font-size: 16px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.2s ease all;
}

.mdl-selectfield input:focus~label,
.mdl-selectfield input:not(:placeholder-shown)~label {
  color: var(--primary700);
  font-size: 12px;
  top: -20px;
  transition: 0.2s ease all;
}

.mdl-selectfield .dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
  max-height: 250px;
  overflow-y: auto;
  width: 100%;
}

.dropdown-content .option {
  color: black;
  display: inline-flex;
}

.mdl-selectfield .dropdown-content.active {
  display: block;
}

.mdl-selectfield .dropdown-content div {
  padding: 10px;
  cursor: pointer;
  width: 100%;
  align-items: center;
}

.mdl-selectfield .dropdown-content div:hover {
  background-color: #f1f1f1;
}

.modalLocation,
.modalLanguage {
  width: 400px;
}

.modalContainer {
  display: none;
  justify-content: center;
  /* Centra horizontalmente */
  align-items: center;
  /* Centra verticalmente */
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
  background-color: rgba(0, 0, 0, .5);
}

.modalContainer .actionsModalLanguage .closeModalLanguageNF {
  border: 1px solid var(--primary800);
  ;
}

.modalContainer .actionsModalLocation .closeModalLocationNF {
  border: 1px solid var(--primary800);
}

.menuTextSidebar .fa-chevron-down {
  position: absolute;
  right: 20px;
}

.submenuSideBar {
  display: none;
  MARGIN-LEFT: 10PX;
}

.mobileSideBar .sideBar {
  width: 86%;
  border-radius: 0pc;
  height: 90%;
}

.mobileSideBar {
  height: 100rem;
  width: 100%;
  position: fixed;
  top: 0;
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
  background-color: rgba(0, 0, 0, .5);
}

.mdl-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 107;
}

.omnilife-v2.private-zone-content {

  margin-left: 353px !important;
}

.subMenuContainer {
  display: flex;
  position: relative;
  align-items: center;
  height: 100%;
}

.topNavContainerDesktop .mdl-button {
  padding: 10px 24px;
}

.searchIcon {
  padding: 0px !important;
  min-width: fit-content;
  width: 3rem;
  height: 3rem;
  font-size: 19px;
  right: 2px;
  box-shadow: none;
}

.labelSearch {
  top: 15px;
  left: 10px;
  font-size: 13px !important;
}

.topNavContainerDesktop {
  display: inline-flex;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.nav-btn {
  border-radius: 0.5rem;

  font-size: 1rem;
}

.nav-btn span {
  text-decoration: underline;

}

.searchContainer {
  height: 53px;
  width: 307px;
  border-radius: 50px;
}


.shopIcon.mdl-badge[data-badge]:after {
  top: -12px;
  right: -11px;
  font-size: x-small;
  border: 0.696px solid var(--primary1000);
  background: var(--primary100);
  color: var(--primary1000);
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1rem;
  width: fit-content;
  height: unset !important;
  padding: 1.5px;
  aspect-ratio: 1 / 1;
  min-width: 20px;
}

#btnShopCar {
  overflow: visible;
}

.mdl-textfield__label:after {
  display: none !important;
}

.inputSearch {
  border-bottom: 0px;
  margin-left: 7px;
}

input.inputSearch:focus {
  outline: none !important;
  border: 0px !important;
}

.logInBtn {
  border-radius: var(--Radius-Radius-circle, 6.25rem);
  border: 1px solid var(--primary800);
  background: #fff;
}

.mobileSideBar {
  display: none;
}

.searchContainer {
  border-radius: 1.75rem;
  border: 1px solid var(--neutrals800);
  width: 23rem;
  margin: 0px 15px;
  display: inline-flex;
  height: 3.5rem;
  background-color: white;
}

.searchInput {
  display: flex;
  padding: 0.25rem;
  align-items: center;
  gap: 0.5rem;
  flex: 1 0 0;
  align-self: stretch;
  width: 70%;
}

#global-search-container {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
}

.topNav {
  height: 70px;
  background-color: white;
  display: flex;
  align-items: center;
}

.nav2Desktop {
  height: 56px;
  background: var(--primary800);
  align-items: center;
  display: flex;
  width: 100%;
  color: #fff;

}

.nav2DesktopContainer>*:first-child {
  padding-left: 0px !important;
}

.nav2DesktopContainer>*:last-child {
  padding-right: 0px !important;
}

.logoImage {
  width: 9.50531rem;
  height: 2.35719rem;
  cursor: pointer;
}

.nav2DesktopContainer .menu-items li a {
  border-radius: 0.5rem;
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
}

.nav2DesktopContainer .menu-category .mega-menu__title,
.nav2DesktopContainer ul.mega-links li a {
  color: var(--primarycolor);
}

.subMenuContainer {
  width: 100%;
}

.firstLevelMenuContainer {
  width: 100%;
  height: 100%;
}

.nav2DesktopContainer .mdl-button {
  border-radius: 0.5rem;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  padding: 16px 0px;
  line-height: 1.2;
}

.nav2DesktopContainer .mdl-button:hover,
.nav2DesktopContainer .mdl-button:hover>a {
  background: none;
  color: white;
  border-radius: 20px;
}

#icart:hover {
  background-color: var(--primary100);
}

.nav2DesktopContainer {
  display: inline-flex;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 3.5rem;
  gap: 15px;
}

.secondLevelMenuContainer {
  position: absolute;
  right: 1px;
  top: -47px;
}

.subBtn {
  padding: 0 16px;
  width: 100%;
  border-radius: 0px;
  color: var(--neutral5);
  font-weight: 400;
  display: block;
  border: none;
  color: var(--neutral5);
  background-color: transparent;
  text-align: left;
  margin: 0;
  padding: 0 24px;
  outline-color: rgb(189, 189, 189);
  position: relative;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  height: 48px;
  line-height: 48px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: space-between;
}


.nav2DesktopContainer .mdl-menu--bottom-left {
  min-width: fit-content !important;

}

.nav2DesktopContainer .mdl-menu--bottom-left ul li {
  padding: 0px 20px;
}

.nav2DesktopContainer .mdl-button {
  width: 100%;
  height: 100%;
  justify-content: start !important;
  gap: 10px;
}

.selectedBtnNav,
.selectedBtnNav>a {
  color: #fff !important;
  font-family: "Noto Sans", sans-serif !important;
  font-size: 1rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.5rem !important;
  /* 150% */
}

@media (max-width: 1160px) {
  .nav2Desktop {
    height: 60px;
  }
}

.topNavContainerMobile {
  display: none;
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
}

.topNavContainerMobile .mdl-button {
  font-size: 2rem;
  z-index: 0;
}

.shopIconMobile.mdl-badge[data-badge]:after {
  width: 1.5rem;
  height: 1.5rem;
  top: -8px;
  right: -7px;
  border: 0.696px solid var(--primary1000);
  background: var(--primary100);
  color: var(--primary1000);
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1rem;
}

.nav2Mobile .wrapper {
  display: flex;
  justify-content: center;
  HEIGHT: 72PX;
  ALIGN-ITEMS: CENTER;

}

.nav2Mobile .searchContainer {
  width: 85%;
  margin: 0PX;
}

.nav2Mobile {
  display: none;
  background-color: #EDE1F5;
  width: 100%;
}

.show-in-mobile {
  display: none;
}

@media (max-width: 920px) {
  .mdl-message-box.alert-fadeable {
    margin-right: 0px;
  }

  .register-kits>div.custom-row:first-of-type {
    display: block;
  }

  #addressInfo-field .mdl-textfield__label span span {
    display: none;
  }

  .points-data:has(.fa-calendar) {
    justify-content: space-between;
  }

  .show-in-mobile {
    display: block;
  }

  .mdl-searchSection .searchContainer {
    width: 23rem !important;
  }

  .topNavContainerMobile {
    display: inline-flex;
  }

  .nav2Mobile {
    display: inline-flex;
  }

  .nav2Desktop {
    display: none;
  }

  .modalGeolocation {
    right: 1rem !important;
    top: 165px !important;
  }

  .searchSectionInputContainer .searchContainer {
    display: none;
  }

  .mdl-searchSection {
    top: 142px !important;
  }

  .hideInMobile {
    display: none !important;
  }

  .search-results,
  .testimonial-results {
    width: 90%;
  }
}

@media (min-width: 921px) {
  .topNavContainerDesktop {
    display: inline-flex;
  }



  .topNavContainerMobile {
    display: none;
  }

  .nav2Mobile {
    display: none;
  }

  .nav2Desktop {
    display: inline-flex;
  }

}

.selectedSubBtn {
  color: #66308C;
  border-radius: 0px !important;
}

.bodyMediumBold {
  color: var(--primary1000);
  text-align: right;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.footerTopBorder a {
  text-decoration: underline;
  margin: 8px 0px;
}

.footerTopBorder a:hover {
  color: var(--primary600);
}

.footerTopBorder .fa {
  width: 1.5rem;
  height: 1.5rem;
}

.alignLeft {
  text-align: left !important;
}

.modalContainer .modalLanguage {
  overflow: visible;
}

.modalContainer .modalLocation {
  overflow: visible;
}

.labelInputSelect {
  color: var(--neutrals1000) !important;
}

.modalLanguage .mdl-selectfield.dropdown-content {
  border-radius: 0.25rem;
}

.modalLocation .mdl-selectfield.dropdown-content {
  border-radius: 0.25rem;
}

.selectSBContainer .group {
  background-color: #EDE1F5;
}

.dropdown-content {
  position: relative;
  overflow-y: auto;
  max-height: 400px;
}

.group {
  cursor: default !important;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  justify-content: center;
  display: flex;

}

.group:hover {
  background-color: #EDE1F5 !important;
}

.inputZipCode,
.locationContainer {
  display: none;
}

.modalGeolocation {
  position: absolute;
  height: fit-content;
  width: 340px;
  right: 22rem;
  top: 60px;
  border-radius: 0.75rem;
  border: 1px solid var(--neutrals600);
  background: var(--neutrals100);
  box-shadow: 0px 4px 8px -2px rgba(89, 88, 88, 0.04);
  display: inline-flex;
  padding: 0rem 0.5rem 0.75rem 0.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  z-index: 999999;
}

.textContainerGeo {
  width: 100%;
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
}

.btnContainerGeo {
  margin-top: 1rem;
  display: flex;
  padding: 0rem var(--Radius-Radius-md, 0.5rem);
  align-items: center;
  gap: var(--Radius-Radius-md, 0.5rem);
  align-self: stretch;
}

.btnContainerGeo a:first-child {
  text-decoration: underline;
}

.btnContainerGeo a:nth-child(2) {
  border-radius: var(--Radius-Radius-circle, 6.25rem);
  border: 1px solid var(--primary800);
  background: #fff;
  display: flex;
  height: 2.5rem;
  min-width: 10rem;
  padding: 0.5rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.h4Medium {
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
}

.modalGeolocation {
  border-radius: 0.5rem;
  background: #fff;
}

.mdl-selectfield input:focus~label,
.mdl-selectfield input:not(:placeholder-shown)~label {
  top: -17px;
  left: 10px;
  justify-content: center;
  display: flex;
  background-color: #F7F6F6;
  height: 100%;
  padding: 0 7px;
  height: 16px;
}


.modalContainer .selectContainer,
.mdl-select .selectContainer {
  border-radius: var(--Radius-Radius-md, 0.5rem);
  border: 1px solid var(--neutrals900);
  height: 3rem;
}


.modalContainer .mdl-selectfield input {
  color: var(--neutrals1000) !important;
  border-bottom: 0px;
  width: 110%;
  cursor: pointer;
  margin-left: 10px;
  font-size: 1rem;
}

.modalContainer .mdl-selectfield label {
  left: 8px;
  top: 5px;
}

.modalContainer .mdl-selectfield .dropdown-content {
  width: 108%;
  top: 34px;
}

.modalContainer .selectSBContainer .select2-container {
  width: 17rem !important;
}

.modalContainer .mdl-card__actions.mdl-card--border {
  border: 0px;
  margin: 3rem 0 1.5rem 0;
}

.searchContainer {
  transition: all 0.5s ease;
}

.searchContainer.expanded {
  position: absolute;
  z-index: 1;
  width: 50rem;
}

.mdl-searchSection .searchContainer.expanded {
  position: absolute;
  z-index: 1;
  width: 50rem;
}

.sectionSearch {
  width: 100%;
  position: fixed;
  top: 0;
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
  background-color: rgba(0, 0, 0, .5);
}

.searchContainerModal {
  position: absolute;
  z-index: 1;
  width: 50rem;
  border-radius: 1.75rem;
  border: 1px solid var(--neutrals800);
  margin: 0px 15px;
  display: inline-flex;
  height: 3.5rem;
  background-color: white;
}

.sectionSearch {
  display: none;
}

.cancelBtn {
  border-radius: var(--Radius-Radius-circle, 6.25rem);
  border: 1px solid var(--primary800);
  background: #fff;
}

.actionsModalLocation a {
  display: flex;
  height: 2.5rem;
  min-width: 10rem;
  padding: 0.5rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.imgSelectCountry {
  width: 35px;
  margin-right: 23px !important;
}

.mdl-searchSection h3 {
  line-height: normal;
  font-weight: bold;
}

.mdl-searchSection .searchContainer {
  position: absolute;
  z-index: 1;
  width: 40rem;
}

.searchSectionInputContainer {
  height: 70px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.search-result .mdl-cell.mdl-cell--10-col {
  display: flex;
  align-items: center;
}

.closeSearch {
  z-index: 1;
  width: 50px;
  height: 50px;
  background-color: var(--primary800);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 30px;
  right: 25px;
  top: 1rem;
  position: absolute;
  color: white;
  cursor: pointer;
}

/*End footer & header*/

/*ppl*/
.showMoreProductsBtnContainer {
  justify-content: center;
  align-content: center;
  display: flex;
}


.infoCardContainer {
  display: grid;
  padding: 0px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  align-self: stretch;
}

.counterProdcut {
  display: flex;
  max-width: 140px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  background: #FFF;
  border: 1px solid var(--primary800);
}

.minusbtn,
.plusBtn {
  display: flex;
  width: 35px !important;
  height: 35px !important;
  ;
  padding: 8px !important;
  min-width: 35px !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  border: none !important;
}

.minusbtn.limit {
  border: 1px solid var(--neutrals600);
}

.numberProd {
  display: flex;
  max-width: 140px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--neutrals1000);

  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.cardProducts .mdl-button {
  display: flex;
  height: 40px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 1px solid var(--primary800);
  background: #fff;
  flex: 1;
}

.cardProducts {
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--neutrals400);
  gap: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

input.numberProd[type=number]::-webkit-outer-spin-button,
input.numberProd[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.numberProd {
  text-align: center;
  border: none;
  width: 3rem;
}

.puntos-info p.body-medium-regular {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 5px;
}

input.numberProd[type=number] {
  -moz-appearance: textfield;
  border: none;
  width: 2rem;
}


#product-detail .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 37px;
}

.productsContainer .mdl-grid {
  display: flex;
  justify-content: center;
  align-content: space-between;
  align-items: stretch;
}

.iconCategory {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.colorCat1 {
  background-color: #FEAA49;
}

.colorCat2 {
  background-color: #15AE96;
}

.colorCat3 {
  background-color: #C6250F;
}

.colorCat4 {
  background-color: #255786;
}

.colorCat5 {
  background-color: #C8A5E0;
}

.categoryCardContainer {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

#global-search-results .categoryCardContainer {
  border: none !important;
  text-decoration: underline;
}

#global-search-results .nameCategory {
  font-size: 10px !important;
}


.nameCategory {
  color: var(--neutrals800);
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.productName,
.productName a {
  color: var(--primary800) !important;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  text-decoration-line: underline;
}

.productDesc {
  overflow: hidden;
  color: var(--neutrals800);
  text-overflow: ellipsis;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.productMetaDesc {
  color: var(--neutrals800);
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.pplContainer {
  padding: 1rem;
}

h2:has(>.productName) {
  font-size: larger;
}


.titlePPLContainer {
  display: flex;
  justify-content: start;
  align-items: flex-end;
  gap: 16px;
  align-self: stretch;
  border-bottom: 1px solid var(--neutrals400);
  background: #fff;
  padding: 24px 0;
}

.titleProducts {
  color: var(--primary1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
}

.highlightedTitle {
  color: var(--primary600);
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

.bodyMedium {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.breadCrumbContainer.bodyMedium {
  color: var(--neutrals900);
}

.titleNumber {
  color: var(--neutrals900);
}

.cardImgContainer {
  border-radius: 8px;
  justify-content: center;
  display: flex;
  background-color: var(--neutrals100);
  position: relative;
  margin: 16px;
}

.labelProduct {
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: 8px;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  display: flex;
  padding: 4px 8px;
  align-items: center;
  gap: 4px;
}


.labelProduct.bestseller {
  background: var(--primary200);
  color: var(--primary1000);
}

.labelProduct.newProduct {
  background: var(--primary600);
  color: #fff;
}

.labelProduct.offLabel {
  background: var(--primary1000);
  color: #FFFFFF;
}

.labelProduct.notAvailable {
  background: var(--neutrals900);
  color: #FFFFFF;
}

.notAvailableProduct .cardImg {
  opacity: 0.5;
}

.notAvailableProduct .iconCategory {
  background-color: #9E9B9B !important;
}

.notAvailableProduct .productName {
  color: var(--neutral3) !important;
}

.notAvailableProduct .productDesc {
  color: var(--neutrals600);
}

.notAvailableProduct .productPrice,
.notAvailableProduct .productMetaDesc {
  color: var(--neutrals800);
}

.notAvailableProduct .counterProdcut {
  display: none;
}

.notAvailableProduct .addToCarBtn {
  display: none;
}

.cardImg {
  height: 100%;
}

.notAvailableProduct .checkInStoreBtn {
  display: flex
}

.notAvailableProduct .productName {
  pointer-events: none;
}


.checkInStoreBtn {
  border: none !important;
  text-decoration: underline;
  display: none;

}

.limitCounter {
  border: 1px solid var(--neutrals600) !important;
}

.labelProduct.newProductOMNI {
  background: var(--primary600);
  color: #fff;
}

.labelProduct.bestsellerOMNI {
  background: var(--primary1000);
  color: #FFFFFF;
}

.cardImg {
  height: 140px;
}

.limitCounter {
  border: 1px solid var(--neutrals600) !important;
}

.showMoreProductsBtn {
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 1px solid var(--primary800);
  background: #fff;
  display: flex;
  width: 163px;
  height: 40px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.productsContainer .mdl-card__full {
  min-height: 720px;
}

.showMoreProductsBtn[disabled][disabled] {
  border-radius: var(--Radius-Radius-circle, 100px) !important;
  border: 1px solid var(--neutrals500) !important;
  background: #fff !important;
  display: flex;
  width: 251px;
  height: 56px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}


.bodyMedium.mdl-checkbox__label {
  color: var(--neutrals1000);
  text-align: center;
}

.titleAsideCat {
  display: flex;
  width: 440px;
  padding: 16px 8px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--primary600);
  background: #fff;
}


.titleAsideCat .bodyMediumBold {
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.filterButtonsContainer {
  display: flex;
  padding: 0px 16px;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.colorCat2 {
  background-color: #15AE96;
}

.colorCat3 {
  background-color: #C6250F;
}

.colorCat4 {
  background-color: #255786;
}

.colorCat5 {
  background-color: #C8A5E0;
}

.descPrice {
  overflow: hidden;
  color: var(--neutrals800);
  text-overflow: ellipsis;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  text-decoration: line-through;
}

.productVariantContainer {
  gap: 8px;
  display: inline-grid;
}

.accordion-header.bodyMedium {
  color: #595858;
}

.productVariant {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.productVariant .mdl-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 24px;
}


.productVariant .mdl-radio__button {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.productVariant .mdl-indicador-mas-variantes {
  background: white;
  font-size: 16px;
  text-align: center;
  align-content: center;
  color: var(--primary800);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.productVariant .color-circle {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid transparent;
  box-sizing: border-box;
  transition: border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.productVariant .color-option.unavailable::before {
  content: "\f00d";
  font-family: 'Font Awesome 5 Pro';
  color: #fff;
  font-weight: 100;
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Estado seleccionado */
.productVariant .mdl-radio.is-checked .color-circle {
  border-color: #474747;
  transform: translateY(-1px);
}

.color-option.mdl-radio,
.size-option.mdl-radio {
  padding-left: 0 !important;
  margin-right: 6px !important;
  margin-bottom: 6px !important;
  height: auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.color-option .mdl-radio__button {
  display: none !important;
}

.color-circle.has-texture {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.color-option.is-checked .color-circle {
  border: 2px solid rgba(0, 0, 0, 0.6) !important;
  box-shadow: 0 0 0 1.5px #ffffff inset;
  transform: scale(1.12);
}

.productVariantName {
  color: var(--neutrals800);
  font-family: "Noto Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  line-height: 16px;
}

.productVariantName .name_variant {
  font-weight: 400;
}

.asideBarCategories .accordion {
  width: 100%;
  max-width: 600px;
  background-color: transparent;
  padding: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.asideBarCategories .accordion-item {
  border-top: 1px solid var(--neutrals200);
}

.asideBarCategories .accordion-item:first-child {
  border-top: none;
}

.asideBarCategories .accordion-header {
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.2s ease;
}



.asideBarCategories .accordion-content {
  display: none;
  width: 440px;
  padding: 8px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.asideBarCategories .accordion-content p {
  margin: 0;
}

.productPrice {
  color: var(--primary700);
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.checkInStoreBtn {
  border: none !important;
  text-decoration: underline;
  display: none;

}

.asideBarCategories {
  width: 30rem;
}

.mdl-chip.gray-chip {
  background-color: var(--neutrals100);
  border: 1px solid var(--neutrals400);
  border-radius: 12px;
  padding: 4px 8px;
  line-height: 1rem;
  min-width: 220px;
  font-weight: 500;
}

.gray-chip .mdl-chip__text {
  font-size: 14px;
  flex: 1;
}

.mdl-chip.big-chip {
  background-color: #fff;
  border: 1px solid var(--neutral3);
  font-size: 1rem;
  color: var(--neutral);
  border-radius: 8px;
  padding: 4px 12px;
}

.big-chip .mdl-chip__text {
  font-size: 16px;
}

span.available {
  color: var(--success1000);
}

.product-presentation {
  padding: 16px 8px;
  font-size: 16px;
  width: 100%;
  gap: 16px;
  flex-direction: column;
  align-items: flex-start;
}

.mdl-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mdl-select .mdl-selectfield input {
  border: none;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.mdl-select .mdl-selectfield {
  max-width: 100%;
  width: 100%;
  display: inline-flex;
}

.mdl-select .mdl-selectfield label {
  padding: 4px 8px;
  color: var(--neutral5)
}

.mdl-select:hover .mdl-selectfield label {
  color: var(--primary700) !important;
}

.featured-product {
  order: -1;
}

@media (max-width: 768px) {

  .productsContainer .mdl-card__full {
    min-height: 420px;
  }


  .filters-container .select2-container {
    min-width: 220px !important;
  }

  .col-product-highlight {
    padding: 0 8px !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    flex-direction: column;
  }
}

@media (max-width: 441px) {

  .col-product {
    flex: 0 0 100%;
    max-width: 100%;
  }

}

@media (min-width: 768px) and (max-width: 1190px) {
  .knowNFBtn {
    top: 21rem !important;
  }

  .bannerNFContainer {
    margin-top: 3%;
  }

  .banner .custom-row:first-child {
    height: 27rem !important;
  }
}

.asideBarCategoriesContainer,
.asideBarFilterContainer {
  display: none;
  height: 100rem;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 102;
}


.asideBarCategoriesContainer .mdl-layout__header.mdl-layout__header--transparent.is-casting-shadow,
.asideBarFiltersContainer .mdl-layout__header.mdl-layout__header--transparent.is-casting-shadow {
  display: none;
}

.asideBarCategories,
.asideBarFilter {
  display: flex;
  width: 488px;
  height: 100vh;
  padding: 10px 24px 136px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  overflow-x: hidden;
}

.titleasideBarCategories {
  width: 100%;
  display: flex;
  padding: 16px 8px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--primary600);
  background: #fff;
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.accordion-item {
  display: flex;
  padding: 8px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.accordion-header-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.accordion-header-container .far {
  color: #66308C;
}

.butonsAsideBarContainer {
  display: flex;
  padding: 24px 0px;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.clearFilterBtn {
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 1px solid var(--primary800);
  background: #fff;
}


.titleProductsContainer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.titleProducts {
  color: var(--primary1000);
  font-family: "Noto Sans" !important;
  font-size: 32px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 40px !important;
}

.highlightedTitle {
  color: var(--primary600);
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

.accordion-header.bodyMedium {
  color: #595858;
}

.accordion-header span {
  text-decoration: underline;
}

.accordion-content a span {
  text-decoration: underline;
  padding: 8px 0;
}

.subCategoriesAccoirdion {
  padding-left: 25px;
}

.productVariantContainer.noVariantProduct {
  visibility: hidden;
}

.filterButtonsContainer .mdl-selectfield input:not(:placeholder-shown)~label {
  background-color: #FFF;
}



.mdl-select .mdl-selectfield input:focus~label,
.mdl-select .mdl-selectfield input:not(:placeholder-shown)~label {
  background: #fff;
  gap: 5px;
  align-items: center;
}

.contentAsideCat .mdl-checkbox {
  height: 40px;
}

.accordion-content .mdl-checkbox {
  height: 60px;
}

.accordion-content .mdl-checkbox:first-child {
  margin-top: 10px;
}

.accordion-content .subCategoriesAccoirdion .mdl-checkbox {
  height: 45px;
}

.iconContainer {
  cursor: pointer;
}

.backBtnMobile span {
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 150% */
}

.backBtnMobile {
  display: none;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .titleProductsContainer {
    display: grid;
  }

  .breadCrumbContainer {
    display: none;
  }

  .backBtnMobile {
    display: flex;
    gap: 8px;
  }

  .asideBarCategories {
    height: 100%;
    width: 100%;
    padding: 17px 24px 136px 24px;
  }
}

.desctiptionBigProd {
  width: 50%;
}

.infoCardContainer {
  flex: 1;
}

.accordion-content .contentAsideCat .mdl-checkbox {
  height: 60px !important;
}



.filterButtonsContainer .mdl-selectfield input {
  border: 0px;
  margin-left: 10px;
}

.filterButtonsContainer .iconSelect {
  background: white;
  z-index: 1;
  padding: 2%;
}

@media (max-width: 840px) {
  .pplContainer .mdl-grid {
    justify-content: center;
    display: flex;
    padding: 0px;
    align-content: center;
    align-items: stretch;
  }

  .pplContainer .mdl-cell--4-col-phone .mdl-cell--6-col {
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0px;
  }

}


.pplContainer .mdl-selectfield label {
  top: 2px;
  left: 10px;
}


.cardProducts .mdl-card__actions .mdl-button {
  min-width: 120px;
}

.accordion-content a:hover {
  color: var(--primary800);
}

@media (max-width: 768px) {
  .knowNFBtn {
    width: 100%;
    padding: 0px 24px;
  }

  .asideBarCategories {
    width: 100%;
    padding: 5px 24px 136px 24px;
  }

  .asideBarCategoriesContainer {
    position: static;
  }

  .butonsAsideBarContainer .mdl-button {
    padding: 18px;
  }
}

.asideBarCategoriesContainer .selectedAH {
  color: var(--primary800);
}


.mdl-select .mdl-selectfield {
  max-width: 100%;
  width: 100%;
  display: inline-flex;
}

.mdl-select .mdl-selectfield label {
  padding: 4px 8px;
  color: var(--neutral5)
}

.mdl-select:hover .mdl-selectfield label {
  color: var(--primary700) !important;
}


.mdl-select .mdl-selectfield input:focus~label,
.mdl-select .mdl-selectfield input:not(:placeholder-shown)~label {
  background: #fff;
  gap: 5px;
  align-items: center;
}

.color__choosed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  align-self: stretch;
}

.circle__selected {
  box-shadow: 0 5px 10px -4px;
  border: 2px solid #0A0A0B;
  box-shadow: 0 8px 16px -8px rgba(89, 88, 88, 0.08);
}

.color__choosed button.color__picker {
  height: 32px;
  width: 32px;
  border-radius: 8px;
}

.color__choosed .circle__color {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 10px;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1 / 1;
  top: 0;
  right: 0;
  border-radius: 8px;
}

.comp-prod-container .cardProducts {
  width: 100%;
}

.available,
.available a {
  color: var(--success1000);
}

.mdl-textfield:has(#password)+.mt-0>.available {
  color: var(--neutrals1000);
  font-style: italic;
  font-size: small;
}

.not-available a,
.not-available {
  color: var(--error800);
}

h3.product-price,
.h3-bold.product-price {
  display: inline-block;
  color: var(--primary700);
}

.omnilife-v2.detail .product-price {
  display: inline-block;
  color: var(--primary600);
}

.omnilife-v2.detail .product-title {
  color: var(--neutral5);
  /* h3/bold */
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  /* 125% */
}

.mdl-layout__drawer-right.active>.mdl-layout-title,
.mdl-layout__drawer>.mdl-layout-title {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 20px;
  border-bottom: 1px solid var(--neutral2);
  width: 100%;
  align-items: baseline;
}

.alert-container.alert-success,
.alert-container.alert-error {
  position: absolute;
  bottom: 11%;
  width: 100%;
  transform: translateX(-50%) translateY(20px);
  /* Añadir efecto deslizante */
  opacity: 0;
  /* Empieza invisible */
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* Suavidad en el desplazamiento y aparición */
  left: 50%;
  background-color: var(--success100);
  border-radius: 8px;
  max-width: 360px;
}

@media (max-width: 768px) {

  .alert-container.alert-success,
  .alert-container.alert-error {
    /*position: relative !important; se mantiene absolute para que no altere la altura del padre*/
    bottom: 11%;
    width: 100%;
    transform: translateX(13%) translateY(-40px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    background-color: var(--success100);
    border-radius: 8px;
    max-width: 360px;
  }
}

.alert-container.alert-success .alert,
.alert-container.alert-error .alert {
  display: flex !important;
  height: 48px;
  justify-content: center;
  padding: 8px;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border-radius: 8px;
}

.alert-container.alert-success .bodyMedium {
  color: var(--neutral5);
}

.alert-container.alert-success i {
  color: var(--success1000);
  font-size: 18px;
}

.alert-container.alert-error .bodyMedium {
  color: var(--error800);
}

.alert-container.alert-error i {
  color: var(--error800);
  font-size: 18px;
}

.alert-container.alert-error .alert {
  background-color: var(--error100);
}

.featured-product .alert-container.alert-success,
.featured-product .alert-container.alert-error {
  position: absolute;
  bottom: 20%;
  width: 100%;
  transform: translateX(-50%) translateY(20px);
  /* Añadir efecto deslizante */
  opacity: 0;
  /* Empieza invisible */
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* Suavidad en el desplazamiento y aparición */
  left: 85%;
  background-color: var(--success100);
  border-radius: 8px;
  max-width: 360px;
}

/* Estados visibles */
.alert-container.alert-success.alert-active,
.alert-container.alert-error.alert-active {
  transform: translateX(-50%) translateY(-20%);
  /* Vuelve a su posición original */
  opacity: 1;
  /* Aparece */
  width: max-content;
  /* Ajuste cuando se agrega al carrito VALIDAR*/
}

@media (max-width: 768px) {

  /*Silver: Fix en movil, centrar notificacion*/
  .alert-container.alert-success.alert-active,
  .alert-container.alert-error.alert-active {
    /*left: 0% !important;
    right: auto !important;
    transform: translateX(calc(50vw - 50%)) translateY(-150%) !important;
    width: max-content;
    max-width: calc(100vw - 32px);
    margin: 0 auto;*/
    right: auto !important;
    transform: translateX(-50%) translateY(-7rem);
    width: 100%;
  }

  #sost__ejes .sostenibilidad .mdl-block__container {
    display: flex;
    flex-direction: column !important;
  }

  .sostenibilidad .h4-bold {
    font-size: 24px;
    line-height: 32px;
    text-align: center !important;
  }
}

.principal__desc .alert-container.alert-success.alert-active {
  bottom: 40%;
  /*transform: translateX(-60%) translateY(10%); Se elimina esta regla para que la notificacion este centrada*/
}


/* PRODUCTOS - Vista de detalle de producto */


.card-puntos-compra.detalle-product-puntos {
  display: none;
}

@media (max-width: 992px) {
  .principal__actions .size__chosed.mt-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
  }

  .principal__actions .button-container.full .addToCarBtn,
  #contenedorBtnAgregarCarrito {
    width: 100%;
  }

  .principal__actions .counterProdcut {
    max-width: 10rem;
    width: 100%;
  }

  .principal__desc .size__chosed.mt-2 .select2-container {
    width: 21.5rem !important;
  }

  .principal__ctrls .col-lg-3.mt-1 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.gc-display-area {
  transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
  border: 1px solid var(--neutrals100) !important;
}

.mdl-label-category {
  background-color: var(--primary700);
  padding: 10px 20px;
  color: #fff;
  display: inline-flex;
  border-radius: 16px 0 16px;
}

ul.breadcrumbs {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  /*padding: 0;*/
  position: relative;
  margin: 0 auto;
  max-width: 1400px;
  width: 95%;
  align-items: center;
  gap: 5px;

}

.breadcrumbs a.mdl-button {
  padding: 8px 4px;
  transition: var(--transition);
}

.breadcrumbs .breadcrumb__category:last-child a.mdl-button {
  color: var(--neutral4);
}

ul.breadcrumbs li {
  display: flex;
  font-weight: 300;
}

.breadcrumbs a.mdl-button:hover {
  transition: var(--transition);
  padding: 8px 10px;
}

.omnilife-v2 .principal__social li.dropdown-item {
  font-size: 1rem !important;
}


.product-label-container .labelProduct {
  width: auto;
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 16px;
  position: static;
}

.principal__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.mdl-product__labels {
  flex-wrap: wrap;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.mdl-product__labels img.labels__img {
  width: 80px;
  cursor: pointer;
}

.mdl-layout__drawer-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: #ffffff;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  overflow: visible;
  overflow-y: auto;
  z-index: 9999999;
}

.mdl-layout__drawer-right.active {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.mdl-layout__obfuscator-right {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 665;
  transition-property: background-color;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

#ingredientes .d-flex {
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dashed var(--neutral2);
}

.mdl-layout__drawer-right>.mdl-layout-title {
  line-height: 56px;
  padding-left: 16px;
}

li.social-item {
  min-width: 200px;
  padding: 4px;
  transition: var(--transition);
}

.social-container {
  position: absolute;
  z-index: 999;
  right: 10px;
  display: inline-flex;
  padding: 5px 20px;
  color: var(--primary800);
}

li.social-item:hover {
  background-color: var(--primary100);
  color: var(--primary700);
  padding-left: 10px;
  transition: var(--transition);
}

li.social-item .mdl-button {
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  padding: 4px 8px;
  border-radius: 0;
}

.ingredients-open-text table td:last-child {
  padding: 6px 5px;
  text-align: right;
}

.ingredients-open-text table td {
  border-bottom: 1px dashed var(--neutral2);
}

.ingredients-open-text table {
  width: 100%;
}

.breadCrumbContainer {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Chips de categorias */

.chip-cat {
  background: none;
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 8px;
  border-radius: var(--Spacing-2, 8px);
}

.chip-hidden {
  display: none;
  /* Clase para ocultar las chips */
}

.name-color--cat-1 {
  color: var(--secondary900) !important;
}

.name-color--cat-2 {
  color: var(--success900) !important;
}

.name-color--cat-3 {
  color: var(--error900) !important;
}

.name-color--cat-4 {
  color: var(--info900);
}

.name-color--cat-5 {
  color: var(--primary1000);
}

.name-color--cat-6 {
  color: var(--neutrals1000);
}

.nameCategoryBreadCrum {
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 150% */
}


.deleteFiltrosContainer {
  display: none;
  /* Por defecto, el botón de eliminar filtros está oculto */
}

.deleteFiltrosContainer.visibleDeleteFiltros {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  height: 40px;
}

.deleteFiltrosContainer button {
  border: none !important;
  box-shadow: none !important;
}

button#open-drawer-filtros {
  border: none !important;
  line-height: 24px;
  box-shadow: none;
}

button#open-drawer-filtros i {
  scale: 1.5;
}

.border-bottom {
  border-bottom: 1px solid var(--neutral3);
}

.backButton {
  display: none;
}


.withChipsCategory {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 15px;
}

/* End Chips de categoria */
/* Estilos de view categoria */
.nameCategoryBreadCrum {
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  /* 150% */
}



.categoryFilterContainer {
  display: flex;
  padding: 0px 16px;
  justify-content: flex-start;
  gap: 24px;
}

@media (max-width: 768px) {
  .breadCrumbContainer {
    display: none;
  }

  .backButton {
    display: flow;
    margin: 0em;
  }

  .titleProductsContainer {
    flex-direction: column;
    align-items: flex-start;
  }

  .titleProducts,
  .highlightedTitle {
    font-size: 24px;
    font-weight: 700;
  }

  .titleNumber {
    font-size: 16px;
    align-self: self-start;
  }

  .cardProducts {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .imgBannerCategoria {
    display: none;
  }

  .categoryFilterContainer {
    display: flex;
    padding: 0px 16px;
    justify-content: center;
    gap: 24px;
  }
}

.mdl-layout__drawer-left {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  /* Cambiado de right: 0 a left: 0 */
  background: #ffffff;
  transform: translateX(-100%);
  /* Cambiado de translateX(100%) a translateX(-100%) */
  transform-style: preserve-3d;
  will-change: transform;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-property: transform;
  overflow: visible;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 666;
}

.mdl-layout__drawer-left.active {
  transform: translateX(0);
  /* Sin cambios necesarios */
}

.mdl-layout__obfuscator-left {
  position: fixed;
  top: 0;
  left: 0;
  /* Sin cambios necesarios */
  height: 100vh;
  width: 100%;
  z-index: 665;
  transition-property: background-color;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}


.btn-chip {
  background-color: #fff;
  border: none;
}

.infoCardContainer {
  overflow: visible;
}

/* fix del home */

.logInBtn span {
  text-decoration: none;
}

i.fal.fa-shopping-cart.mdl-badge.shopIcon {
  font-size: 24px;
  margin-right: 4px;
}

.logInBtn i {
  transform: scale(1.5);
}

.mdl-menu__outline.mdl-menu--bottom-left {
  width: webkit-fill-available !important;
  border-radius: 0 0 10px 10px;
}

.mdl-card-info h5 {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

.owl-mdl-principal-slider h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 41px;
  font-weight: 400;
  line-height: 52px;
}

.selectedBtnNav i {
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.nav2DesktopContainer .mdl-button i {
  font-weight: 400;
}

.selectedBtnNav i.fa-home-lg-alt {
  transform: none;
}

.followBtn svg {
  min-width: 25px;
}

.mdl-card-info .mdl-card__actions {
  padding: 0;
}

.omnilife-v2 .owl-theme .owl-dots .owl-dot span {
  width: 16px;
  height: 16px;
  margin: 5px 7px;
  background: var(--primary100);
  border-radius: 30px;
}

.omnilife-v2 .owl-theme .owl-dots .owl-dot.active span,
.omnilife-v2 .owl-theme .owl-dots .owl-dot:hover span {
  background: var(--primary400);
}

.owl-mdl-principal-slider p {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  padding-top: 20px;
  font-weight: 400;
  line-height: 24px;
}

#home-productos-principales h2 {
  color: var(--neutral5);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  font-family: "Noto Sans", sans-serif;
}

.mdl-list__item i.fa-star-christmas:before {
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/deco-star.svg);
  content: '';
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 4px;
  background-size: cover;
}

.mdl-list__item i {
  font-size: 24px;
}

section#home-productos-principales .mdl-card.small {
  border-radius: 0;
  border-left: 1px solid var(--primary800);
}

#home-productos-principales .mdl-card.small:hover,
#home-big-numbers .mdl-card:hover,
.owl-testimonials .mdl-card:hover,
#home-noticias .mdl-card:hover,
.mdl-card-no-hover {
  box-shadow: none;
}

.subBtn i {
  font-weight: 500;
}

img.mdl-big-banner-thumbs {
  width: 200px;
}

.mdl-big-banner__content .bg-secondary1.mdl-card.small {
  padding: 24px;
  /*Padding al card 25k empresarios activos en el home*/
}

.owl-testimonials .mdl-card p {
  font-weight: bold;
  font-size: 16px;
}

.owl-testimonials.owl-carousel .owl-item .flag img {
  border-radius: 2px;
}

section#home-testimonios .offset-lg-5.col-lg-7,
.fortalecer-mi-negocio__container #home-testimonios .offset-lg-5.col-lg-7 {
  padding-left: 40px;
}

.custom-row .offset-lg-5 h5 {
  margin-top: 10px;
  line-height: 30px;
}

.owl-valores .mdl-card-info p {
  color: var(--neutral5);
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px;
}

.owl-valores .mdl-card-info p b {
  color: var(--primary800);
}

ul.home-news small {
  font-size: 14px;
}

#home-noticias .mdl-card-info {
  padding: 24px;
}

#home-noticias .mdl-card-info p {
  padding: 10px 0;
}

#home-noticias .mdl-card-info .mdl-card__actions .col-6 {
  padding: 0;
}

/** Landign Page CREAR MI NEGOCIO **/
.bannerTitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  justify-content: center;
}

#seccion__conocer_omnilife-1 ul.breadcrumbs {
  width: 100%;
}

@media (min-width: 920px) {
  #seccion__conocer_omnilife-1 ul.breadcrumbs {
    border-bottom: 1px solid #D3D3D3;
    padding-bottom: 1rem;
  }

  #home-productos-principales,
  ul.home-news {
    padding: 0px !important;
  }
}

section#seccion__consejo_administracion .align-content-center {
  gap: 25px;
  display: flex;
  flex-direction: column;
  align-self: center;
}

.omnilife-v2 .h1-bold {
  color: #fff;

  /* h1/bold */
  font-family: "Montserrat", sans-serif;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 80px;
  /* 125% */
}

.omnilife-v2 .h2-bold {
  /* h2/bold */
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
  /* 133.333% */
}

.omnilife-v2 .h2-medium {
  color: var(--neutrals900);
  text-align: center;

  /* h2/medium */
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 64px;
  /* 133.333% */
}

.omnilife-v2 .h3-bold,
.h3-bold {
  color: var(--primary800);

  /* h3/bold */
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  /* 125% */
}

.omnilife-v2 .h3-medium {
  color: var(--primary1000);

  /* h3/medium */
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
  /* 125% */
}

.omnilife-v2 .h4-medium,
.modal-producto-agregado .h4-medium {
  color: var(--neutrals900);

  font-family: "Noto Sans", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  /* 133.333% */
}

.omnilife-v2 .h4-regular {
  color: var(--neutrals900);

  /* h4/regular */
  font-family: "Noto Sans", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  /* 133.333% */
}

.omnilife-v2 .h4-bold {
  /* h4/bold */
  font-family: "Noto Sans", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  color: var(--neutrals900);
  /* 133.333% */
}

.omnilife-v2 .h5-bold {
  color: #fff;

  /* h5/bold */
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  /* 140% */
}

.omnilife-v2 .h5-regular {
  color: var(--neutrals1000);

  /* h5/regular */
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  /* 140% */
}

.omnilife-v2 .body-medium-card {
  color: #fff;

  /* body-medium/regular */
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
}

.omnilife-v2 .body-medium-bold,
#drawer-categorias .body-medium-bold,
#drawer-filtros .body-medium-bold,
.modal-producto-agregado .body-medium-bold {
  color: var(--neutrals900);

  /* body-medium/bold */
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.omnilife-v2 .body-large-regular {
  color: var(--neutrals1000);

  /* body-large/regular */
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px;
  /* 150% */
}

.omnilife-v2 .title-card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

.card-crear-negocio {
  display: flex;
  width: 100%;
  max-width: 280px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-height: 330px;
}


#seccion__crear_negocio_3 {
  display: flex;
  width: 100%;
  padding: 16px 32px;
  justify-content: center;
  align-items: flex-end;
  gap: 56px;
}

.card-purple-1 {
  background: var(--primary1000);
  color: #fff;
}

.card-purple-2 {
  background: var(--primary800);
  color: #fff;
}

.card-purple-3 {
  background: var(--primary100);
  color: var(--primary900) !important;
}

.card-purple-3 h5.h5-bold {
  color: var(--primary900) !important;
}

.card-purple-3 div.body-medium-card {
  color: var(--primary900) !important;
}

.card-content {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.description-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 40px;
  flex: 1 0 0;
}

.description-container ul {
  padding-inline-start: 0px
}

.description-container li {
  list-style-type: none;
  display: flex;
  gap: 8px;
  align-items: center;
}

.description-container i {
  color: #66308C;
}

.beneficios-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.beneficios-list-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

/*Se elimina color: var(--neutrals1000); por que el título de seccion Un negocio con grandes oportunidades de ganar y crecer debe ser morado no gris*/

#seccion__crear_negocio_4 {
  background: var(--primary100);
  height: 676px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 48px 0px;
}

#seccion__crear_negocio_4 .wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.images-content {
  position: relative;
  top: -30px;
}

.images-content .img-collage {
  height: 773px;
  width: 676px;
}

@media (max-width: 920px) {
  .images-content .img-collage {
    height: auto !important;
    width: auto !important;
  }

  .images-content {
    top: -60px !important;
  }
}

.oportunidades-container {
  display: flex;
  padding: 100px 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.oportunidades-desc {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.oportunidades-desc .h5-bold {
  color: var(--neutrals1000);
}


.card-testimonio-crear-negocio {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
  min-height: 200px;
  border-radius: var(--Radius-Radius-xl, 16px);
  border: 1px solid var(--neutrals300);
  background: rgba(255, 255, 255, 0.80);
}

.card-testimonio-crear-negocio .title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-testimonio-crear-negocio .body-medium-bold {
  color: var(--neutrals900);
  /*Ajuste de color en "Impulsamos tu desarrollo personal a gris neutral*/
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.card-testimonio-crear-negocio i {
  color: var(--primary900);
}

.omnilife-v2 .body-medium-regular,
.modal-producto-agregado .body-medium-regular {
  color: var(--neutrals900);

  /* body-medium/regular */
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
}

.negocio-ganas-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.negocio-ganas-container div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.elipse-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.elipse-container .h4-bold {
  color: var(--neutrals900) !important;
}

.cards-pasos-crear-negocio-container {
  display: flex;
  gap: 32px;
  align-items: center;
  max-width: 100%;
}

.cards-pasos-crear-negocio {
  display: flex;
  gap: 32px;
  width: 100%;
}

.card-banner {
  display: flex;
  width: 280px;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: var(--Radius-Radius-xl, 16px);
  border: 1px solid var(--neutrals300);
  background: var(--neutrals100);
  position: absolute;
  right: 104px;
  bottom: -56px;
}

#ganas-negocio .mdl-grid {
  flex-flow: wrap-reverse;
}

@media (max-width: 840px) {
  #seccion__crear_negocio_4 {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .oportunidades-container {
    padding: 0px;
  }
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .cards-crear-negocio-container {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cards-crear-negocio-container .mdl-cell--4-col {
    flex: 0 0 auto;
  }

  .cards-pasos-crear-negocio div {
    flex: 0 0 auto;
  }

  .cards-pasos-crear-negocio-container {
    flex-direction: column;
  }

  .cards-pasos-crear-negocio {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0px 10px;
  }

  #seccion__crear_negocio_2 {
    padding: 0px;
  }

  .oportunidades-container {
    margin: 36px 0px;
  }

  .secciones__crear_negocio {
    gap: 24px !important;
  }

  .omnilife-v2 .h1-bold {
    font-size: 32px;
    font-size: 48px;
    line-height: 40px;
  }

  .omnilife-v2 .h2-bold {
    font-size: 32px;
    line-height: 48px;
  }

  .omnilife-v2 .h2-medium {
    font-size: 32px;
    line-height: 40px;
    text-align: left;
    font-weight: 500;
  }

  .omnilife-v2 .h3-medium {
    font-size: 24px;
    line-height: 32px;
  }

  .omnilife-v2 .h4-regular {
    font-size: 18px;
    line-height: 27px;
  }

  .omnilife-v2 .h4-medium {
    font-size: 24px;
    line-height: 32px;
  }

  .bannerTitle .h4-medium {
    font-size: 16px;
    line-height: 24px;
  }

  .cards-pasos-crear-negocio-container .bannerTitle .h4-medium {
    font-size: 18px;
    line-height: 27px;
  }

  .description-container {
    gap: 32px;
    padding: 8px;
  }

  .omnilife-v2 .h4-bold {
    font-size: 24px;
    line-height: 32px;
  }

  .omnilife-v2 .h5-regular {
    font-size: 18px;
    line-height: 27px;
  }

  .omnilife-v2 .h5-bold {
    font-size: 18px;
    line-height: 27px;
  }

  .omnilife-v2 .body-medium-regular {
    font-size: 16px;
    line-height: 24px;
  }

  #seccion__crear_negocio_3 {
    padding: 0px;
  }

  .elipse-container {
    flex-wrap: wrap;
    gap: 16px;
  }

  .card-banner {
    display: flex;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    gap: 8px;
    position: static;
  }

  .negocio-ganas-container button {
    display: none;
  }


  .oportunidades-container .h3-medium {
    color: var(--neutrals900);
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
  }

  .crear-negocio-big-numbers {
    text-align: center;
  }

  .crear-negocio-big-numbers .big-numbers-content {
    border: none !important;
  }

  .bannerTitle {
    gap: 8px;
  }

  .elipse-container a {
    display: block !important;
  }


  .negocio-ganas-container a {
    display: none;
  }
}

.card-purple-3 .mdl-card--content .title-card h4 {
  color: var(--primary900);
  font-weight: 700;
}

.card-purple-3 .mdl-card--content .title-card h3 {
  color: var(--primary900);
  font-weight: 700;
}

#crear-negocio-big-numbers .big-numbers-content .big-numbers-count {
  color: var(--primary600);

  /* h2/bold */
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
  /* 133.333% */
}

#crear-negocio-big-numbers b {
  color: var(--primary600);
  font-family: Montserrat;
  /* font-size: 48px; */
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
  font-size: 2.7rem;
}


#crear-negocio-big-numbers .col-lg-4:last-child .big-numbers-content {
  border: none;
}

.mdl-card.card-testimonio-crear-negocio .desc p.body-medium-regular {
  text-align: justify;
}

.modalContainer .mdl-card__title .body-medium-regular {
  display: flex;
  justify-content: center;
  align-items: center;
}

#crear-negocio-big-numbers .col-lg-5 h2,
#crear-negocio-big-numbers .col-lg-5 h5 {
  display: flex;
  flex-direction: column;
  text-align: justify;
}

section#crear-negocio-big-numbers .mdl-card {
  min-height: auto;
}

#crear-negocio-big-numbers .col-lg-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (max-width: 479px) {
  #seccion__crear_negocio_3 .mdl-grid {
    padding: 0px;
  }

}

.secciones__crear_negocio {
  display: flex;
  flex-direction: column;
  gap: 48px;
}


.bannerTitle h1 b {
  background: var(--primary600);
  color: #fff;
  padding: 6px 20px;
  display: inline-block;
}

#seccion__formas-compra-1 .NFBold {
  margin-bottom: 9px;
  display: block;
}

.negocio-ganas-container h2 b {
  background: var(--primary600);
  color: #fff;
  padding: 6px 20px;
  display: inline-block;
}

.oportunidades-container .h3-bold {
  font-weight: 700;
}

.oportunidades-container .h3-medium {
  color: var(--neutrals900);
}

.owl-pasos-crear-negocio .owl-stage-outer .owl-item {
  display: flex;
  justify-content: center;
}

.owl-pasos-crear-negocio .owl-stage-outer .owl-stage {
  display: flex;
}

.title-card .card-crear-mi-negocio-img-1 {
  width: 50px !important;
}

.title-card .card-crear-mi-negocio-img-2 {
  width: 100px !important;
}

/** Fin Landing Page CREAR MI NEGOCIO **/



/** Nuevos estilos del Menu  **/


.no-results-information {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}

.no-results-information img {
  height: 140px;
  width: 140px;
}

.no-results-information .h5-medium {
  padding: 12px;
  display: flex;
  width: 100%;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  color: #334155;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (max-width: 920px) {
  .mdl-textfield--floating-label.outline.has-placeholder:has(#id-tracking) .mdl-textfield__label span {
    white-space: initial;
    position: relative;
    top: -18px;
    width: 90%;
  }

  .mdl-textfield.outline:has(#id-tracking) .mdl-textfield__label {
    overflow: visible;
  }

  .mdl-textfield--floating-label.outline.has-placeholder:has(#id-tracking).is-focused .mdl-textfield__label span {
    top: -4px;
  }

  .nav2Desktop .wrapper {
    width: 80%;
    height: -webkit-fill-available;
    overflow-y: scroll !important;
    position: fixed;
    height: 100%;
    background: #fff;
    border-top: 1px solid var(--neutral3);
  }

  .selectedBtnNav {
    border-bottom: 1px solid #66308C;
    border-radius: 0px;
  }

  .firstLevelMenuContainer {
    width: 100%;
  }

  .nav2DesktopContainer .mdl-button {
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden !important;
  }

  .nav2DesktopContainer {
    position: absolute;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: baseline;
    width: 100%;
    z-index: 1000;
    flex-flow: column;
    top: auto;
    background: #fff;
    padding: 8px 0px;
    overflow: scroll;
    height: 80vh;
    border-bottom: 1px solid var(--primary500);
  }

  .nav2DesktopContainer .mdl-button i {
    color: var(--primary800);
  }

  .nav2DesktopContainer .mdl-button:last-child {
    border-radius: var(--Radius-Radius-circle, 6.25rem);
    border: 1px solid var(--primary800);
    background: #fff;
    display: flex;
    height: 2.5rem;
    min-width: 10rem;
    padding: 0.5rem 1.5rem;
    justify-content: center !important;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    width: 90%;
    margin: 10px auto;

  }

  .firstLevelMenuContainer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .menuCard {
    position: static !important;
    box-shadow: none;
  }

  .mdl-button.desktop-btn {
    width: 100%;
    text-align: left;
    padding: 1em;
    border-bottom: none;
  }

  #btnLocation .flag {
    margin: unset;
    height: 3rem;
    width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav2Desktop .mdl-button {
    margin: 0px;
    padding: 0px 24px;
    min-height: 40px;
    color: var(--primary800);
    height: 3rem;
  }

  .nav2Desktop .selectedBtnNav {
    padding: 0px 50px;
  }

  .mdl-menu__item {
    padding-left: 1rem;
    opacity: 1;
  }

  .label-container-mobile {
    display: flex;
    padding: 8px 20px;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
  }
}

.mdl-layout__obfuscator-header {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 0;
  transition-property: background-color;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.img_country_mobile {
  display: none;
}

.topNavContainerDesktop .mdl-menu__outline {
  width: 100% !important;
  min-width: 325px;
}

.mdl-menu.mdl-menu--bottom-right {
  left: unset;
  right: unset;
}

.info-user-container {
  min-width: 325px !important;
  width: 100%;
}

.info-user-container li:first-child {
  border-bottom: 1px solid #D3D3D3;
}

#drawer-ZE .mdl-block i {
  margin-right: 1rem;
}

.info-user-container li a {
  color: #474545;
}

.info-user-container li {
  cursor: pointer;
  display: flex;
  justify-content: normal;
  align-items: center;
  position: relative;
  gap: 14px;
  min-height: 46px;
  padding-left: 10px;

}

.info-user-container li .fal {
  font-size: 16px;
  color: #66308C;


}

.info-user-container li .fa-chevron-right {
  position: absolute;
  right: 16px;
  font-size: 24px;
  color: #66308C;
}

.info-user-container li:hover {
  background-color: var(--primary100);
}

.empresario-code {
  border-radius: var(--Radius-Radius-md, 8px);
  border: 1px solid var(--secondary900);
  background: var(--secondary100);
  padding: 4px 8px;
  color: var(--secondary900);
  text-align: center;
}

@media (max-width: 920px) {
  .nav2Desktop {
    height: calc(120% - 55px);
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 70px;
    left: 0;
    backdrop-filter: saturate(180%) blur(5px);
    background-color: rgba(0, 0, 0, .5);
  }

  .mdl-menu__outline.mdl-menu--bottom-left {
    display: none;
  }

  .mdl-menu__container.is-visible,
  .mdl-menu__container.is-animating {
    visibility: visible;
    display: contents;
  }

  .nav2DesktopContainer .mdl-menu--bottom-left {
    width: 100%;
    position: static !important;
  }

  .mdl-menu__container {
    display: none;
  }

  .secondLevelMenuContainer .mdl-menu__container {
    background: #fff;
  }

  .secondLevelMenuContainer {
    position: initial;
  }

  #btnInicio {
    order: -1;
    border-bottom: 1px solid var(--primary800);
    display: flex;
    justify-content: start;
    border-radius: 0px;
    max-height: 3rem;
  }

  #btnLanguage {
    text-decoration: none;
    justify-content: flex-start;

  }

  #btnLocation {
    text-decoration: none;
    justify-content: flex-start;
  }

  #btnLocation i {
    display: none;
  }

  #btnFollow {
    justify-content: flex-start;
  }

  #mdl-btn-login {
    justify-content: flex-end;
    flex-direction: row-reverse;
  }

  .nav-btn span {
    text-decoration: none;
  }

  .topNavContainerDesktop {
    display: flex;
    flex-flow: column-reverse;
    border-bottom: 1px solid var(--neutrals200);
    background: #fff;
    gap: 20px;
    padding-bottom: 20px;
  }

  .topNavContainerDesktop .searchContainer {
    display: none;
  }

  .topNavContainerDesktop .logoImage {
    display: none;
  }

  .topNavContainerDesktop #btnShopCar,
  .topNavContainerDesktop .btnShopCar {
    display: none;
  }

  .topNavContainerDesktop button i {
    transform: scale(1.2);
    width: 24px;
  }

  .topNavContainerDesktop .mdl-button:focus:not(:active) {
    background-color: var(--primary100);
  }

  .logInBtn {
    border: none;
  }

  .logInBtn i {
    transform: scale(1.2);
  }

  .topNavContainerMobile #btnShop {
    margin-right: -35px;
  }

  .secondLevelMenu.active {
    display: block;
  }

  .img_country_mobile {
    display: block;
    width: 25px;
  }

  .modalContainer {
    height: 100%;
  }
}

@media (max-width: 920px) {
  .subMenuContainer {
    width: 100%;
    display: flex;
    height: fit-content;
  }

  .subMenuContainer .subBtn {
    white-space: normal;
    height: fit-content;
    line-height: normal;
    padding: 5px 30px;
  }

  .mdl-layout-title-name .img-distributor-icon {
    display: flex;
    width: 3rem;
    height: 3rem;
  }

  .mdl-layout-title-name .circle-element-ze {
    min-width: 3rem;
    height: 3rem;
  }
}

/* botón animado del nav */

.menu-btn.active {
  background: #fff;
  width: 34px;
  height: 35px;
  border-radius: 30px;
  padding: 9px 10px 10px 10px;
  text-align: right;
  align-self: center;
  border: 2px solid var(--primary800);
}

.menu-btn.active .menu-btn__lines {
  -webkit-transform: translateX(1rem);
  -ms-transform: translateX(1rem);
  transform: translateX(1rem);
  background: transparent;
}

.menu-btn__lines::before {
  -webkit-transform: translateY(-0.5rem) translatex(-0.8rem);
  -ms-transform: translateY(-0.5rem) translatex(-0.8rem);
  transform: translateY(-0.6rem) translatex(-0.7rem);
}

.menu-btn__lines::after {
  -webkit-transform: translateY(0.5rem) translatex(-.8rem);
  -ms-transform: translateY(0.5rem) translatex(-.8rem);
  transform: translateY(0.6rem) translatex(-.7rem);
}

.menu-btn.active .menu-btn__lines::before {
  background: var(--primary800);
  -webkit-transform: rotate(45deg) translate(-1.3rem, 1.3rem);
  -ms-transform: rotate(45deg) translate(-1.3rem, 1.3rem);
  transform: rotate(45deg) translate(-1.3rem, 1.3rem);
  width: 17px;
}

.menu-btn.active .menu-btn__lines::after {
  background: var(--primary800);
  -webkit-transform: rotate(-45deg) translate(-1.3rem, -1.3rem);
  -ms-transform: rotate(-45deg) translate(-1.3rem, -1.3rem);
  transform: rotate(-45deg) translate(-1.3rem, -1.3rem);
  width: 17px;
}

.menu-btn__lines,
.menu-btn__lines::before,
.menu-btn__lines::after {
  width: 22px;
  height: 2px;
  background: var(--primary800);
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  border-radius: 30px;
}

.menu-btn {
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 38px;
  height: 38px;
  cursor: pointer;
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

/** Fin Nuevos estilos del Menu **/


/*selects2 styles*/
.filterButtonsContainer .mdl-selectfield input.search-input {
  border-bottom: 1px solid var(--primary800);
  width: 90%;
  margin-bottom: 6px;
}

.mdl-selectfield .dropdown-content.active {
  width: 173px;
}

.option {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

.hide {
  opacity: 0;
  transform: translateY(-20px);
}


.select2::after {
  content: none !important;
}

.select2-container {
  width: 17rem !important;

}

.select2-container--default .select2-selection--multiple {
  border-radius: var(--Radius-Radius-md, 0.5rem) !important;
  border: 1px solid var(--neutrals900);
  padding: 6px;
  min-height: 3rem;
}

.select2-selection.select2-selection--single {
  height: 3rem;
}

.select2-container--default .select2-selection--single {
  height: 3rem !important;
  border-radius: var(--Radius-Radius-md, 0.5rem) !important;
  padding-left: 6px !important;

}

.select2-container--default .select2-selection--single span {
  color: var(--neutrals800);
  ;
}

.select2-selection--single {
  overflow-x: hidden;
}

.select2-container--open .select2-selection--single {
  overflow: visible;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 100%;
  align-items: center;
  display: flex;
  /*overflow-y: auto;*/
  overflow-x: hidden !important;

}

.select2-selection__rendered {
  overflow: visible;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--neutrals1000);
  padding: 0px 5px;
  border-radius: 8px;
  line-height: 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.7rem;
  width: 30px;
  background-color: white;
  border-radius: 10px;
  right: 1px;
  /* top: 25%;
  right: 3%;
  top: 11px !important; */
}

.select2-dropdown {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 0px;
  color: var(--M3-sys-light-on-surface, #1F1A1F);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  border-radius: 4px;
  background: var(--neutrals100);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);

}

.select2-selection__rendered {
  position: static;
  overflow: hidden;
}

.select2-selection__placeholder {
  position: absolute;
  top: 8px;
  background-color: white;
  transition: top 0.3s ease;
  /* Agrega una transición suave */
}

.select2-container--open .select2-selection__placeholder {
  top: -15px;
  /* La posición final cuando se abre el select2 */
}

.spanContainerSelect {
  display: flex;
  height: 48px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  height: 100%;
}

.select2-results__group {
  color: var(--M3-sys-light-on-surface, #1F1A1F);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.select2-dropdown.mdl-select-dropdown {
  z-index: 22;
}

.imgSelectFlag {
  width: 30px;
}

.spanContainerSelect {
  display: flex;
  gap: 10px;
}

.selectNameSpan {
  top: -8px;
  left: 10px;
  padding: 0px 5px;
  color: var(--neutrals1000);
  font-size: 12px;
  border-radius: 8px;
}

.search-container-tracking .selectNameSpan {
  color: var(--primary);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--primary100) !important;
  color: var(--M3-sys-light-on-surface, #1F1A1F);
}

li.select2-results__option.select2-results__option--selectable.select2-results__option--selected.select2-results__option--highlighted,
.select2-container--default .select2-results__option--selected {
  background-color: var(--primary200) !important;
}

.select2-selection__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 7% !important;
  right: .9% !important;
}

.modalContainer .select2-selection__arrow {
  top: 5% !important;
  right: 1px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {

  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/icons/chevron-down-light.svg);
  background-repeat: no-repeat;
  background-size: contain;
  border: none !important;
  height: 20px !important;
  width: 20px !important;
  margin: auto !important;
  top: auto !important;
  left: auto !important;
}

.select2-container--open .select2-selection--single .select2-selection__arrow b {

  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/icons/chevron-up-light.svg);
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain;
  border: none !important;
  height: 20px !important;
  width: 20px !important;
  margin: auto !important;
  top: auto !important;
  left: auto !important;
}

.modalLocation .mdl-textfield {
  width: 100%;
}

.filters-container {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
  position: relative;
  z-index: 1;
}

.modalLocation .mdl-textfield__input {
  height: 3rem;
  border-radius: var(--Radius-Radius-md, 0.5rem) !important;
  border: 1px solid var(--neutrals900);
  padding-left: 6px;
}

.modalLocation .mdl-textfield__label {
  left: 8px;
  top: 30px;
  color: var(--neutrals1000) !important;
}

.modalLocation .inputZipCode .mdl-textfield__label {
  top: 10px;
}

.modalLocation .inputZipCode .mdl-textfield--floating-label.is-dirty .mdl-textfield__label {
  top: -10px;

}

.modalLocation .mdl-textfield--floating-label.is-dirty .mdl-textfield__label {
  height: 25px;
  width: fit-content;
  background-color: white;
  justify-content: center;
  display: flex;
  font-size: 1rem;
}

/*NFUERZA*/

.mdl-card__title span {
  margin-left: 20px;
}

.cardsPilarContainer {
  display: flex;
  padding: 10px;
  gap: 10px;
  justify-content: center;
}

.ctaContainerColored .custom-row {
  width: 80%;
  border-radius: 16px;
  background: var(--primary100);
  height: 100%;
  align-items: center;
  min-height: 8rem;
}

.bannerNFContainer {
  margin-top: 7%;
}

.bannerNFContainer h1 {
  padding-right: 5rem;
  line-height: 35px;
}

.NFBold {
  background: var(--primary600) !important;
  color: #fff !important;
  font-family: Montserrat !important;
  font-size: 48px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 64px !important;
  width: fit-content !important;
  padding: 0px 16px !important;
}

.imgBanner {
  max-height: 500px;
}

.NFContainer {
  display: flex;
  flex-direction: column;
  padding: 0px 16px;
}

.NFContainer .breadcrumbs a.mdl-button {
  color: var(--neutrals900) !important;
}

.cardPilar.mdl-card {
  min-height: unset;
  height: 100%;
  padding: 3%;
}

.omnilife-v2 .bodySmallRegular {
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.omnilife-v2 .body-small-bold {
  font-family: "Noto Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}


.cardsPilarContainer .col-md-3 {
  padding: .5rem;
}

.cardsPilarContainer .mdl-card__supporting-text {
  padding: 0px 0px 16px 16px;
}

.cardsPilarContainer .mdl-shadow--2dp {
  box-shadow: none;
  border: 1px solid var(--neutrals300);
}


.banner .mdl-button {
  max-width: 230px;
  padding: 15px;
  padding: 24px 8PX;
}

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

.NFH3 {
  color: var(--primary1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
}

.NFH3 b {
  color: var(--primary1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

.bigNumbers .custom-row .big-numbers-content:nth-of-type(3) {
  border: 0px !important;
}

.bigNumbers .big-numbers-content,
.crear-negocio-big-numbers .big-numbers-content {
  height: 90%;
}

.bigNumbers .bg-neutral1 .col-lg-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.bigNumbers .bg-neutral1 .col-lg-5 h3 {
  color: var(--primary600);
  font-family: Montserrat;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;

}


.NFContainer .bigNumbers .bg-neutral1 .col-lg-5 h3 {
  width: 60%;
}

.bigNumbers .bg-neutral1 {
  border-radius: 32px;
  padding: 2rem;
}

.textContainerCardInfo {
  display: flex;
  padding: 16px 32px 48px 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.cardInfoNF {
  border-radius: 16px;
  background: var(--primary100);
  min-height: 171px;
  text-align: justify;
  min-height: 171px;
}

.knowNFBtn {
  position: absolute;
  top: 18rem;
}

.bigCardNF .mdl-card__title,
.verticalCardInfoNF .mdl-card__title {
  padding: 0px;
}

.verticalCardInfoNF .mdl-card__supporting-text {
  background: var(--primary100);
  padding: 22px 10px;
}

.NFLogoContainer {
  height: 100%;
  justify-content: center;
  display: flex;
}

.verticalCardInfoNF,
.bigCardNF {
  height: 100%;
  text-align: justify;
}

.bigCardNF .mdl-card__supporting-text {
  background: var(--primary100);
  padding: 30px 10px;
}

.cardInfoNF .mdl-card__title {
  position: relative;
}

.cardInfoNF .mdl-card__title svg {
  position: absolute;
  top: 15px;
  left: 10px;
}

.verticalCardImg,
.bigCardImg {
  height: 100%;
  object-fit: cover;
}

.verticalCards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

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

.textContainerCardInfo h5 {
  line-height: 28px;
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
}

.bigNumbers h3 {
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.cardsInfoContainer {
  padding-top: 16px;
}

.cardsInfoContainer b {
  color: var(--primary600);
}

.omnilife-v2 .tabsContent {
  width: 100%;
  height: max-content;
  padding-top: 24px;
}


.omnilife-v2 .tab-container {
  margin: 0 auto;
}

.omnilife-v2 .tabs {
  display: flex;
  /* cursor: pointer; */
  overflow-x: auto;
}

.omnilife-v2 .tab-button:hover {
  background-color: #f0f0f0 !important;
  color: var(--neutrals1000) !important;
}

.omnilife-v2 .tab-content,
.tab-kits-content {
  display: none;
  padding: 20px;
  border-top: none;
  padding-top: 12px;
}

.omnilife-v2 .tab-button {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  transition: background-color 0.3s ease;
  text-align: center;
  height: auto;
}



.NFContainer .tab-button {
  background: var(--neutrals100);
}

.NFContainer .tab-button.active {
  border-radius: 8px 8px 0px 0px !important;
  background: var(--primary100) !important;
  color: var(--primary800) !important;
  border-bottom: 1px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.NFContainer .home-news {
  padding-left: 0px;
}

.tab-content.active {
  display: block;
}

.NFContainer .tab-content.active::after {
  content: "";
  position: relative;
  left: 5%;
  width: 90%;
  border-bottom: 2px solid #E0E0E0;
  padding-bottom: 20px;
  bottom: 0px;
}

#sost__intro .col-lg-6.p-0 {
  align-self: stretch;
}

#sost__intro .col-lg-6.p-0 .video-responsive {
  height: 100%;
}

#sost__intro .col-lg-6.p-0 .video-responsive iframe {
  height: 100%;
}

#sost__intro iframe {
  min-height: 25rem;
  ;
}

.h5Medium {
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.tab-content ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  padding: 16px 0px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.login-page .tab-content ul.mb-2 {
  padding: 0px;
  margin: 0px;

}

.login-page .tab-content .mdl-text-block.p-1 {
  padding: 0px !important;
  padding-top: 10px;
}

.NFContainer .tab-content .fal {
  color: #66308C;
  font-size: 24px;
  margin-right: 6px;
}

.NFContainer.tab-content .custom-row {
  padding-bottom: 48px;
}

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

.btnShowMoreNF {
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 1px solid var(--primary800);
  background: #fff;
  margin-top: 20px;
}

.newsSection {
  width: 90%;
}

.banner2 {
  padding: 16px 0px;
}

.banner2 .NFBold {
  margin-top: 2px;
}

.banner2 h4 {
  color: var(--primary1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  max-width: 400px;
}

.bodyMediumLarge {
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px;
}

.newsSection .mdl-button.medium {
  padding: 14px 24px;
}

.ctaContainerColored {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 25px 0px;
}

.ctaContainerColored .custom-row.w-100 {
  padding: 20px;
}

.NFLogoContainer {
  height: 50px;
}

.ctaContainerColored .mdl-button.primary {
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 56px;
}

.coloredText {
  color: var(--primary600);
}

.pilares {
  padding-top: 24px;
}

.pilares h2 {
  color: var(--neutrals900);
}

.NFContainer .tabsContent li p:nth-child(n+2) {
  margin-left: 30px;
}

.custom-row>.col-lg-4:nth-of-type(3)>.big-numbers-content,
.custom-row>.col-lg-4:nth-of-type(6)>.big-numbers-content {
  border: 0px;
}

.coloredTitle {
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
}

.coloredTitle b {
  color: var(--primary600);
}

.banner2ImgContiner {
  padding: 4%;
}

.banner2TextContainer {
  display: flex;
  justify-content: start;
  align-items: center;
}

.owl-testimonials2 h5 {
  padding-bottom: 8px;
}

.bigCardContainer {
  padding: 0px;
}

@media screen and (max-width: 1200px) {
  .bigCardContainer {
    padding: 16px 10px 0px 10px;
  }
}

@media (max-width: 768px) {
  .banner {
    flex-direction: column;
    text-align: center;
  }

  .imgBannerContainer {
    text-align: center;
    margin-bottom: 20px;
  }

  .knowNFBtn {
    order: 2;
    position: static;
  }

  .bannerNFContainer {
    justify-content: center;
    margin: 1rem;
  }

  .bannerNFContainer h1 {
    padding-right: 0;
  }

  .imgBannerContainer {
    margin: 3%;
  }

  .textContainerCardInfo {
    padding: 3%;
  }

  .tab-button {
    height: revert;
  }

  .coloredSectionText {
    display: flex;
    padding: 32px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }

  .banner2TextContainer {
    padding: 10%;
  }

  .ctaContainerColored {
    width: 100%;
    height: fit-content;
    align-self: center;
    text-align: center;
  }

  .ctaContainerColored .custom-row {
    gap: 15px;
    padding: 2rem 1rem !important;
  }

  .pilaresTitleContainer h2 {
    font-family: "Noto Sans", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
  }

  .pilares .custom-row {
    padding: 12px 16px;
  }

  .pilares .col-sm-12 {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .NFBold {
    font-family: "Noto Sans", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
  }

  .NFH3 {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    line-height: 32px;
    font-size: 24px;
    font-style: normal;
  }

  .NFH3 b {
    font-family: "Noto Sans", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
  }

  .banner .mdl-button {
    width: 100%;
    max-width: unset;
    height: 53px;
  }

  .bigNumbers {
    display: flex;
    padding: 0px;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }

  .bigNumbers .col-lg-5 {
    text-align: left !important;
    font-size: 32px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    padding: 0 24px;
    overflow-wrap: break-word;
  }

  .bigNumbers h2 {
    text-align: left !important;
    font-size: 32px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    max-width: none !important;
  }

  .bigNumbers h5 {
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  .bannerNFContainer {
    gap: 8px;
  }

  .bigNumbers .bg-neutral1 {
    padding: 46px 16px;
  }

  .textContainerCardInfo h3 {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
  }

  .textContainerCardInfo h3 b {
    font-weight: 700;
  }

  .textContainerCardInfo h5 {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
  }

  .coloredTitle {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
  }

  .coloredTitle b {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
  }

  .coloredSectionText h5 {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 27px;
  }

  .tab-button {
    padding: 10px 15px;
  }

  .banner2 .col-md-8 {
    order: 2;
  }

  .banner2Text h4 {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
  }

  .NFLogoContainer {
    height: 38px;
    width: 100%;
    justify-content: start;
    margin-left: 16px;
  }

  .pilares .NFLogoContainer {
    justify-content: center;
    margin-left: 0px;
    margin-bottom: 10px;
  }

  .coloredSection .wrapper::before {
    height: 35% !important;
    left: 0px !important;
  }

  .banner2Text {
    display: flex;
    width: 343px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ctaContainerColored .h4Medium {
    padding: 15px 0px;
  }

  .bigCardContainer {
    order: 3;
  }


  .verticalSingleCard {
    order: 2;
  }

  .verticalCards {
    order: 1;
    padding: 5% 7%;
    width: 50%;
    order: 1;
  }

  .bigCardContainer {
    order: 3;
  }

  .tinyCardContainer {
    padding: 0px 16px;
  }

  .verticalSingleCard {
    order: 2;
    width: 50%;
    padding: 0% 3%;
  }
}




@media (max-width: 991px) {
  .big-numbers-content {
    border: 0px !important;
  }

  .bg-circle2 .half-round-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .bg-circle2 {
    background: none !important;
  }

  .big-numbers-content {
    border: 0px !important;
  }
}

.bigNumbers h2 {
  color: var(--primary600);
  max-width: 200px;
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
}

.coloredSection .wrapper::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 0;
  height: 45%;
  border-left: 1px solid var(--primary600);
}

.coloredSection {
  background: var(--primary100);
  width: 100%;
  padding: 16px;
  margin-top: 16px;
}

.coloredSectionText {
  display: flex;
  width: 541px;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.omnilife-v2 .coloredSection .owl-theme .owl-dots .owl-dot span {
  background: var(--primary400);
}

/*FIN NFUERZA*/


/* Filtros categorías  y mdl-accordion */
.col-product {
  margin-top: 16px;

}

.col-product-highlight {
  display: flex;
  padding: 0 16px;
  width: 100%;
  flex: 0 0 100%;
}

#grid-big.active,
#grid-small.active {
  color: var(--primary700);
}

#grid-big,
#grid-small {
  color: var(--neutral4);
}

#grid-big:hover,
#grid-small:hover {
  color: var(--primary600);
}

.mdl-drawer__ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mdl-accordion.mdl-accordion--opened {
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  margin-top: -1px;
}

.mdl-accordion.mdl-accordion--opened+.mdl-accordion.mdl-accordion--opened {
  border-top: none;
  margin-top: 0;
}

.mdl-accordion .mdl-accordion__content-wrapper {
  overflow: hidden;
}

.mdl-accordion .mdl-accordion__content {
  transition-property: margin-top;
  transition-duration: 0.2s;
}

.mdl-accordion .mdl-accordion__icon {
  transition-property: transform;
  transition-duration: 0.2s;
  color: rgba(0, 0, 0, 0.3);
  color: var(--primary800);
}

.mdl-accordion.mdl-accordion--opened .mdl-accordion__icon {
  transform: rotate(-180deg);
}


.mdl-accordion.mdl-accordion--opened .mdl-accordion__content {
  margin-top: 0 !important;
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 16px 20px;
}

.mdl-accordion .mdl-navigation__link.mdl-button.mdl-js-button {
  border-radius: 0;
}


.mdl-layout__drawer .mdl-navigation .mdl-drawer__ul .mdl-navigation__link span {
  color: var(--primary800);
  text-decoration: underline;
}

ul.mdl-drawer__ul .mdl-navigation__link span {
  padding-left: 8px;
}

.mdl-accordion--opened a.mdl-navigation__link.mdl-accordion__button.mdl-button {
  font-weight: 700;
}

#drawer-filtros-testimonios .mdl-accordion__button b {
  color: var(--primary800);
}

#drawer-filtros-testimonios .mdl-drawer__ul li {
  padding: 8px 0px;
}

#drawer-filtros-testimonios .mdl-layout-title {
  border-bottom: 1px solid var(--primary600);

}

#drawer-filtros-testimonios .mdl-layout-title h4 {
  color: var(--neutrals1000);
  /* body-medium/bold */
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px
}

#drawer-filtros-testimonios .mdl-navigation ul {
  color: var(--neutrals1000);
  text-align: center;
  /* body-medium/regular */
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

#drawer-filtros-testimonios .mdl-button--icon .mdl-button__ripple-container {
  border: 1.5px solid #66308C;
}

#drawer-filtros-testimonios .mdl-button--icon {
  height: 18px;
  width: 18px;
  min-width: unset;
}

#drawer-filtros-testimonios .mdl-button--icon .fa-times {
  font-size: 15px;
}

ul.subCategoriesAccoirdion {
  list-style: none;
  margin: 0;
}

label.mdl-checkbox.mdl-navigation__link.mdl-js-checkbox {
  padding: 24px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.mdl-drawer__actions {
  background: #d7b7ed;
  padding: 24px;
  position: sticky;
  bottom: 0;
  width: 100%;
  z-index: 9;
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(10px);
  background-color: rgb(255 255 255 / 50%);
  border-top: 1px solid var(--primary400);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.mdl-layout__drawer span.mdl-checkbox__label {
  display: inline-block;
  padding: 0 0 10px 0;
}

#drawer-filtros .mdl-drawer__ul li {
  padding: 24px 20px;
}


#drawer-filtros ul.subCategoriesAccoirdion {
  border-left: 1px solid var(--neutral2);
  padding: 0;
}

#drawer-filtros .is-checked ul.subCategoriesAccoirdion {
  border-left: 1px solid var(--neutral2);
  padding: 0 10px;
}

.productVariantContainer .select2-container {
  min-width: 154px;
}

.cardProducts .mdl-card__actions {
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  align-items: center;
}

/* .filters-container .mdl-button {
  flex: 1;
} */

.loader__base {
  fill: none;
  stroke: var(--primary100);
  stroke-width: 7;
}

.loader__path {
  fill: none;
  stroke: var(--primary600);
  stroke-width: 2;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  -webkit-animation: dash 1.5s ease-in-out infinite;
  -moz-animation: dash 1.5s ease-in-out infinite;
  -o-animation: dash 1.5s ease-in-out infinite;
  -ms-animation: dash 1.5s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite;
}

/*MENSAJE ERROR*/
.error-h2 {
  color: var(--error800);
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

.error-h2 b {
  font-family: Montserrat;
  font-size: 48px;
  line-height: 64px;
}

.body-medium-large {
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px;
}

.section-error-detail .body-bold-large i {
  color: #C6250F;
  font-size: 16px;
}

.body-bold-large {
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 18px !important;
  font-style: normal;
  font-weight: 700;
  line-height: 27px !important;
}

.img-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.section-error-text {
  border-radius: 16px;
  background: var(--primary100);
  display: flex;
  padding: 32px;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.error-desc {
  color: var(--error800);
  padding: 0px 24px;
}

.section-error-text .h4-medium .colored {
  color: var(--primary600);
}

.error-container {
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.section-error-detail {
  gap: 16px;
  display: inline-grid;
  padding: 0px 16px;
}

.error-img-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.error-img-container img {
  width: 58px;
}

.error-page {
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/error-circles.svg);
  background-position: 75% 40%;
  background-repeat: no-repeat;
  background-size: auto;
  height: 100%;
}

@media (max-width: 768px) {
  .error-container {
    width: 90%;
  }

  .error-page {
    background: none;
  }

  .error-img-container {
    justify-content: flex-start;
    padding: 32px;
    padding-bottom: 32px;
    gap: 24px;
    padding-bottom: 1rem;
  }

  .error-img-container img {
    width: 38px;
  }

  .section-error-text {
    margin-bottom: 1rem;
    width: 93% !important;
  }

  .img-error {
    justify-content: flex-start;
  }

  .section-error-number {
    padding: 0 32px 32px 32px;
    gap: 24px;
  }

  .section-error-number .custom-row {
    gap: 24px;
  }
}

.logo-secction {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.logo-secction img {
  width: 13rem;
}

.error-page .breadcrumb__back .mdl-button {
  color: var(--neutrals900);

}

.error-container {
  padding-top: 2rem;
}

.error-msg-input .mdl-textfield__input,
.error-msg-input .select2-selection {
  border: 3px solid var(--error800);
  position: relative;
}

.inputZipCode .mdl-textfield__label {
  background-color: white;
  height: fit-content;
  width: fit-content;
  padding: 5px;
}

.img-error img {
  min-width: 45px;
}

.error-msg-input .mdl-textfield__label,
.error-msg-input .select2-selection__placeholder {
  color: var(--error800) !important;
}

.error-msg-text {
  color: var(--error800);
  text-align: center;
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.4px;
}

.error-msg-question {
  color: var(--neutrals1000);
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  padding-top: 15px;
}

.error-msg-link {
  color: var(--error800);
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: underline;
  cursor: pointer;
  display: block;
}

.icon-error-container {
  position: absolute;
  right: 10px;
  top: 2rem;
  font-size: 24px;
  color: #C6250F;
}

.error-mgs-container {
  gap: 10px;
  display: flex;
  padding: 5px 0px;
  display: grid;
}

.error-mgs-container {
  display: none;
}

.error-msg-text {
  display: none;
}

.error-msg-question {
  display: none;
}

.error-msg-link {
  display: none;
}

.icon-error-container {
  display: none;
}

.error-msg-input .error-msg-container {
  display: block;
}

.error-msg-input .error-msg-text {
  display: block;
}

.error-msg-input .error-msg-question {
  display: block;
}

.error-msg-input .error-msg-link {
  display: block;
}

.error-msg-input .icon-error-container {
  display: block;
}

.error-msg-input .error-mgs-container {
  display: block;
}

.modalLocation .h4Medium {
  justify-content: center;
  align-items: center;
  display: flex;
}

.modalLocation .mdl-card__title span {
  margin-left: 0px;
}

/* FIN MENSAJE DE ERROR */

/* INICIO LANDING FORMAS DE COMPRA */

.forma-compra-info .bg-secondary-circles {
  background: none;
}

.forma-compra-info:has(.bg-secondary-circles .button-container) {
  padding: 0;
}

#seccion__formas-compra-1 .custom-row,
#seccion__formas-compra-2 .custom-row {
  align-items: center;
}

#seccion__formas-compra-2 .card-crear-negocio {
  height: auto;
  min-height: auto;
}

#seccion__formas-compra-2 .card-crear-negocio .title-card {
  justify-content: flex-start !important;
}

.omnilife-v2.wrapper.pt-2.formas-compras-container {
  padding-top: 4rem;
}

@media (min-width: 920px) {
  .formas-compras-container .breadcrumbs {
    margin: 0px;
    padding: 1rem !important;
    border-bottom: 1px solid var(--neutral2);
  }
}



.forma-compra-info .bg-secondary-circles .custom-row .bg-circle {
  max-width: 930px;
}

@media (width <=768px) {
  .formas-compras-container #seccion__cta .ctaContainerColored a.mdl-button {
    width: 100%;
  }

  .ctaContainerColored .mdl-button.primary {
    width: -moz-available;
    width: -webkit-fill-available;
  }
}

.mdl-card-formas-compra {
  display: flex;
  width: 180px;
  max-width: 176px;
  height: 192px;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  border-radius: var(--Radius-Radius-xl, 16px);
  border: 1px solid var(--neutrals400);
  background: #fff;
  box-shadow: 0px 16px 24px -16px rgba(89, 88, 88, 0.10);
}

#seccion__formas-compra-2 .owl-item>div {
  display: flex;
  justify-content: center;
}

.mdl-card-formas-compra.active {
  border-radius: var(--Radius-Radius-xl, 16px);
  border: 1px solid var(--primary800);
  background: #fff;
  box-shadow: 0px 32px 48px -24px rgba(89, 88, 88, 0.40);
}

.mdl-card-formas-compra.active .card-formas-compras-icon {
  background: #EDE1F5;
}

.mdl-card-formas-compra.active .card-formas-compras-icon i,
.card-icon i {
  transform: scale(3.5);
  color: #66308C;
}

.mdl-card-formas-compra.active .body-medium-card {
  color: var(--primary800);
}

.card-select-country,
.selected-kit {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid #D3D3D3;
  flex-wrap: wrap;
  background: #fff;
  padding: 8px;
}


.mdl-card-filters {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid #D3D3D3;
  flex-wrap: wrap;
  background: #fff;
  padding: 24px;
}

.formas-compras-container,
.conocer-omnilife-container {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 5rem 16px !important;
}

.select2-search__field:focus-visible {
  outline: 1px solid var(--primarycolor);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--primarycolor);
}

.conocer-omnilife-container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.conocer-omnilife-container>section {
  margin-bottom: 0px !important;
}

/*.sostenibilidad>section {
  margin-bottom: 0px !important;
  padding-top: 0px !important;
}*/

.sostenibilidad #seccion__news-letter form {
  padding: 0px 24px !important;
}

.owl-formas-compra .owl-nav {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  margin-bottom: -36px;
}

.owl-formas-compra .owl-nav button.owl-prev {
  position: absolute;
  top: 30%;
  left: -15px;
}

.owl-formas-compra .owl-nav button.owl-next {
  position: absolute;
  top: 30%;
  right: -15px;
}

.owl-formas-compra button.owl-next span,
.owl-formas-compra button.owl-prev span {
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 3px solid #66308C !important;
  background: #fff;
}

.owl-formas-compra button.owl-next span,
.owl-formas-compra button.owl-prev span {
  color: transparent !important;
  background: white;
}

.reconocimientos-container .info-reconocimientos-section .owl-nav button.owl-prev span {
  color: transparent !important;
  background: white;
}

.reconocimientos-container #seccion__formas-compra-1 figure img {
  height: 25rem;

}

.reconocimientos-container .card-banner {
  right: 11rem;
  bottom: 1.5rem;
}

.reconocimientos-container .elipse-container {
  padding: 0px;
  padding-bottom: 60px;
}

.owl-formas-compra .owl-theme .owl-nav.disabled,
.owl-formas-compra .owl-theme .owl-nav.disabled {
  opacity: 1 !important;
  cursor: default;
}

.owl-formas-compra button.owl-next span:after {
  content: 'a';
  content: '\f105';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -32px;
  position: relative;
}

.owl-formas-compra button.owl-prev span:after {
  content: 'a';
  content: '\f104';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -32px;
  left: -3px;
  position: relative;
}

.owl-formas-compra button.owl-next span:active,
.owl-formas-compra button.owl-prev span:active {
  box-shadow: 0 5px 10px -4px var(--primary800);
}

.owl-formas-compra button.owl-next span:hover,
.owl-formas-compra button.owl-prev span:hover {
  background-color: var(--primary100) !important;
  box-shadow: 0 10px 10px -10px;
}

.owl-formas-compra .owl-item {
  display: flex;
  justify-content: center;
}


.card-formas-compras-icon,
.card-icon {
  /* background: #F7F6F6; */
  width: 80px;
  height: 80px;
  min-height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-formas-compras-icon i,
.card-icon i {
  transform: scale(3.5);
}

.mdl-card-formas-compra .body-medium-card {
  color: var(--neutrals900);
  text-align: center;

  /* body-medium/bold */
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
}

.title-forma-compra {
  text-align: center;
  gap: 16px;
}

.title-forma-compra .h3-bold {
  color: var(--neutrals900);
  text-align: center;

  /* h3/bold */
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  /* 125% */
}

.title-forma-compra h2.h3-bold {
  color: var(--primary800) !important;
}

.title-forma-compra .body-large-regular {
  color: var(--neutrals1000);
  text-align: center;

  /* body-large/regular */
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px;
  /* 150% */
}

.seccion__formas-compra-3 .cards-accordion-formas-compra .mdl-accordion .mdl-accordion__button {
  width: 100%;
  display: flex;
  text-align: left;
  justify-content: space-between;
}

.seccion__formas-compra-3 .cards-accordion-formas-compra .mdl-accordion--opened .mdl-accordion__button {
  border-bottom: 1px solid var(--primary800) !important;
}

.seccion__formas-compra-3 .cards-accordion-formas-compra .mdl-accordion {
  width: 100%;
  border: none;
}

.cards-accordion-formas-compra {
  display: flex;
  width: 100%;
  padding: 16px;
  align-items: flex-start;
  gap: 8px;
  border-radius: 8px;
  border-bottom: 1px solid var(--primary200);
  background: #FFF;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-bottom: 8px;
}

.cards-accordion-formas-compra .bodyMediumBold {
  text-align: left;
}

.cards-accordion-formas-compra .mdl-button:focus:not(:active) {
  background-color: #FFF;
}

@media (width <=431px) {
  .owl-pasos-formas-compra {
    margin-top: 16px;
  }

  .owl-formas-compra .owl-item {
    display: block;
  }

  .formas-compras-container #seccion__cta .ctaContainerColored .custom-row .col-sm-12 {
    padding: 0px !important;
  }

  .formas-compras-container #seccion__cta .ctaContainerColored {
    text-align: left !important;
  }

  .formas-compras-container #seccion__cta .NFLogoContainer {
    margin: 0 !important;
  }

  .forma-compra-info .bg-secondary-circles .custom-row {
    min-width: 375px;
  }

  .formas-compras-container,
  .conocer-omnilife-container {
    padding: 0px !important;
  }
}

@media (width <=768px) {
  .formas-compras-container #seccion__cta .ctaContainerColored .custom-row .col-sm-12 {
    padding: 0px !important;
  }

  .formas-compras-container #seccion__cta .ctaContainerColored {
    text-align: left !important;
  }

  .formas-compras-container #seccion__cta .NFLogoContainer {
    margin: 0 !important;
  }
}

.mdl-list-formas-pago {
  display: flex;
  align-items: baseline;
  padding: 32px 16px 0px 16px;
  gap: 8px;
  flex-wrap: wrap;
}

.mdl-list-formas-pago .fa-badge-check {
  color: #7C3AAA;
}

.cards-accordion-formas-compra i.far.fa-chevron-down.mdl-accordion__icon.mdl-animation--default {
  transform: scale(1.5);
}

.cards-accordion-formas-compra .mdl-accordion.mdl-accordion--opened .mdl-accordion__icon {
  transform: rotate(-180deg) scale(1.5) !important;
}

.seccion__formas-compra-3 {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.container-cards-credit {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.container-cards-credit i {
  transform: scale(2.5);
  width: 40px;
  display: flex;
  height: 30px;
  justify-content: center;
  align-items: center;
}

.metodos-pago-container {
  display: flex;
  align-items: baseline;
  padding: 32px 16px 0px 16px;
  gap: 8px;
}

.metodos-pago-container table {
  width: 100%;
  display: grid;
}

.metodos-pago-container table thead,
.metodos-pago-container table tbody {
  width: 100%;
  display: contents;
}

.metodos-pago-container table caption {
  padding: 10px 24px;
  border-radius: 8px 8px 0px 0px;
  background: var(--primary200);
}

.metodos-pago-container table th,
.metodos-pago-container table td {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 8px 24px;
  align-items: center;
  text-align: right;
  text-wrap: balance;
}

.metodos-pago-container table th {
  background: var(--neutrals100);
  overflow: hidden;
  color: var(--neutrals1000);
  text-overflow: ellipsis;
  /* body-medium/bold */
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.metodos-pago-container table td {
  border-bottom: 1px solid var(--primary100);
  overflow: hidden;
  color: var(--neutrals900);
  text-overflow: ellipsis;

  /* body-medium/regular */
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
}

.metodos-pago-container table td span:last-child {
  text-align: right !important;
}

.metodos-pago-container table td span:first-child {
  text-align: start !important;
}



section.forma-compra-info {
  width: 100%;
  overflow: hidden;
  padding-top: 5rem;
  justify-content: center;
}

#dynamic-paragraph span {
  color: var(--neutrals1000);
  /* body-large/regular */
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 27px;
}

.btn-forma-compra-call-to-action {
  order: 3;
  position: relative;
  top: -230px;
}

.btn-forma-compra-call-to-action .noticias-callto1 {
  margin-right: 60px;
}

.forma-compra-info .bg-testimonios {
  background: #FFDDB6;
}

.description-forma-pago {
  display: flex;
  padding: 0px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.description-forma-pago h5 {
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.description-forma-pago h5 span {
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.mdl-table-mobile tr:nth-child(1) td:nth-child(2) {
  display: grid;
  gap: 10px;
  border: 0px;
  height: 7rem;
}

.mdl-table-mobile tr:nth-child(1) td:nth-child(2) i {
  font-size: 1.5rem;
}

@media (max-width: 1300px) and (min-width: 920px) {}

@media (max-width: 920px) {
  .info-reconocimiento-container .searchContainer {
    margin: 0px;
  }

  .table-title {
    margin-left: 7px;
  }

  .filter-rec-container .h3-bold {
    padding-left: 0px !important;
  }

  .section-cards-levels-short .mdl-card-consejo {
    margin: 0rem 2rem !important;
  }

  .section-cards-levels .mdl-card-consejo {
    margin: 0rem 3.4rem !important;
  }

  .section-cards-levels-short .owl-stage .owl-item {
    margin: 0rem !important;
  }

  .section-cards-levels-short .owl-item.active.center {
    margin: 0rem -1rem;
  }


  .open-menu-mobile {
    opacity: 0;
    visibility: hidden;
    display: none !important;
  }

  .selectedSubBtn {
    border-bottom: 1px solid #66308C !important;
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    min-height: 3rem;
  }

  .selectedBtnNav {
    color: var(--primary1000) !important;
    font-family: "Noto Sans" !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    border-bottom: 1px solid var(--primary800) !important;
    position: relative;
    border-radius: 0px !important;


  }

  .selectedBtnNav .fa-chevron-down {
    position: absolute;
    left: 0;
    transform: rotate(90deg) !important;
    left: 24px;
  }

  .selectedSubBtn {
    position: relative;
    padding-left: 35px;
  }

  .selectedSubBtn .fa-chevron-right {
    position: absolute;
    left: 0;
    transform: rotate(180deg) !important;
    left: 18px;
  }

  .nav2DesktopContainer .mdl-button:hover,
  .nav2DesktopContainer .mdl-button:hover>a {
    background: none;
    color: var(--primary1000);
  }

  .selectedBtnNav {
    color: var(--primary1000);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
  }


  .NFContainer .bigNumbers .bg-neutral1 .col-lg-5 h3 {

    width: 100%;
  }

  .newsSection {
    width: 100%;
  }

  .card-select-country {
    justify-content: center;
    text-align: center;
  }

  .card-select-country .h6 {
    width: 70%;
    text-align: left;

  }

  .tab-content {
    padding: 16px;
  }

  .tab-content .mdl-card.small .card-content {
    padding: 16px;
  }

  .btn-forma-compra-call-to-action {
    top: 0px !important;
  }

  .btn-forma-compra-call-to-action .noticias-callto1 {
    margin-right: 0px;

  }

  .btn-forma-compra-call-to-action .noticias-callto1 .p-1 {
    display: flex;
    gap: 16px;
    flex-direction: column;
  }

  section.forma-compra-info {
    overflow: visible;
    padding-top: 2rem;
    padding-bottom: 2em;
  }

  #show-more-testimonial {
    margin-left: 30px;
    margin-right: 30px;
  }

}

.bg-circle {
  position: relative;
}

.bg-circle::after {
  content: "";
  position: absolute;
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/deco-circle.svg);
  background-position: -150px -45px;
  background-size: 440px;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bg-circle::before {
  content: "";
  position: absolute;
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/deco-circle.svg);
  background-position: 110% -170px;
  background-size: 440px;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.img-formas-compra {
  width: 200px !important;
  height: 90px !important;
  object-fit: cover;
}

/* FIN LANDING FORMAS DE COMPRA */


/* LOGIN */

.mdl-textfield.outline .mdl-textfield__input {
  background: #fff;
}

.toggle-password {
  cursor: pointer;
}

.outline .filters-container {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
}

.outline .mdl-textfield__input {
  height: 3rem;
  border: 1px solid var(--neutrals900);
  padding-left: 6px;
  border-radius: 8px;
}

.mdl-textfield.outline .mdl-textfield__label {
  left: 8px;
  top: 30px;
  color: var(--neutral4);
}

.register-page:has(#privacy-terms) :not(.is-invited)>.mdl-textfield.outline .mdl-textfield__label {
  top: 14px;
}

.register-page:has(#privacy-terms) :not(.is-invited)>.mdl-textfield--floating-label.outline.is-focused .mdl-textfield__label,
.register-page:has(#privacy-terms) :not(.is-invited)>.mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label {
  top: -8px;
}

.mdl-textfield--icon {
  position: absolute;
  right: 10px;
  top: 33%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
}

.mdl-textfield--icon:hover {
  background-color: var(--neutral1);
  color: var(--primary700);
}

.outline .mdl-textfield__input:hover {
  border: 1px solid var(--primary700);
}

.mdl-textfield--floating-label.outline.is-focused .mdl-textfield__label,
.mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label {
  color: var(--primary800);
  font-size: 12px;
  top: 4px;
  visibility: visible;
}

.mdl-textfield--floating-label.outline.is-focused .mdl-textfield__label span,
.mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label span,
.mdl-textfield--floating-label.outline.has-placeholder .mdl-textfield__label span {
  background: #fff;
  padding: 0px 6px;
  border-radius: 8px;
  display: inline-block;
}

.mdl-textfield.outline .mdl-textfield--floating-label.is-dirty .mdl-textfield__label {
  top: 10px;
  height: 20px;
  width: 44%;
  background-color: white;
  justify-content: center;
  display: flex;
  font-size: 1rem;
}

.mdl-components__warning {
  border-radius: 8px;
  background: var(--primary200);
  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
  color: var(--primary900);
  display: flex;
  padding: 4px 8px 4px 16px;
  align-items: center;
  gap: 8px;
}

.mdl-message-box {
  border-radius: 8px;
  background: var(--primary200);
  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
  color: var(--neutrals900);
  padding: 4px 8px 4px 16px;
  gap: 8px;
  position: relative;
}

.mdl-message-box.info {
  background: var(--info200);
  color: var(--info800);
}

.mdl-message-box.info i {
  color: var(--info800);
}

.mdl-message-box.error {
  background: var(--error200);
}

.mdl-message-box.error i {
  color: var(--error800);
}

.mdl-message-box.success {
  background: var(--success200);
}

.mdl-message-box.success i {
  color: var(--success1000);
}

.mdl-message-box.warning {
  background: var(--warning200);
}

.mdl-message-box.warning i {
  color: var(--secondary);
}

.mdl-message-box .mdl-message-close i {
  color: var(--primary800);
}

.mdl-message-box {
  border-radius: 1rem;
  background: var(--primary200);
  box-shadow: none;
  padding: 4px 8px 4px 16px;
}

.raised .tab-button {
  background-color: #fff;
  border-bottom: 1px solid var(--neutral2);
  border-radius: 0;
  padding: 14px 16px;
}

button.tab-button.mdl-button {
  border-radius: 10px 10px 0 0;
  background: var(--M3-sys-light-surface, #FFF7FB);
  color: var(--neutrals900);
}

.raised button.tab-button.active {
  background: var(--primary100);
  color: var(--primary800);
  border-bottom: 2px solid var(--primary800);
}

.tab-container.raised {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1), 0 1px 20px 2px rgba(0, 0, 0, 0.12);
}


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

.raised .tab-content.active::after {
  display: none;
}

.login-page .bg-big-circle-container {
  position: absolute;
  height: 95vh;
  width: 100%;
}

.login-page {
  margin-top: 2rem;
}

.login-page .bg-big-circle {
  bottom: 0;
  right: 0;
}

.login-page .bg-secondary-circles {
  background-position: 110% -10%;
}

.omnilife-v2.login-page,
.omnilife-v2.register-page,
.omnilife-v2.confirmation-page {
  margin-top: 0;
  padding-top: 0;
}

.omnilife-v2.login-page {
  margin-top: 4rem;
}

.register-page .tab-button,
.register-page .breadcrumbs a.mdl-button,
.confirmation-page .tab-button,
.confirmation-page .breadcrumbs a.mdl-button {
  font-size: 14px;
}

.register-page .tabs,
.confirmation-page .tabs {
  position: sticky;
  top: 70px;
  z-index: 4;
  border-bottom: 1px solid var(--neutral2);
  background: #fff;
}

.register-page .tab-container,
.confirmation-page .tab-container {
  overflow: visible;
}

.register-page ul.breadcrumbs,
.login-page ul.breadcrumbs,
.confirmation-page ul.breadcrumbs {
  margin-top: -8px;
  margin-bottom: 4px;
}

.register-page #login-section,
.confirmation-page #login-section {
  min-height: 90vh;
}

.mdl-info-block {
  display: none;
  border-radius: 12px;
  border: 1px solid var(--neutral2);
  background: var(--neutral1);
  width: 282px;
  height: 338px;
  padding: 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  z-index: 6;
  position: absolute;
  box-shadow: 0px 4px 10px -2px rgb(89 88 88 / 28%);
}

.mdl-info-block.active {
  display: flex;
}

.info-image-container.mx {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--neutral2);
  margin-top: 8px;
}

.active .info-image-container.mx img {
  transform: scale(3.5) translate(-33%, 2%);
}

.info-image-container.mx img {
  transform: scale(0) translate(0%, 0);
}

.omnilife-v2.crear-mi-negocio-container {
  margin-top: 5.5rem !important;

}

@media (max-width: 768px) {
  #banner__crear_negocio .h4-medium {
    font-size: 24px !important;
  }
}

/* datepicker */
span.ui-icon.ui-icon-circle-triangle-e,
span.ui-icon.ui-icon-circle-triangle-w {
  display: none;
}

a.ui-datepicker-next.ui-corner-all:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  content: '\f138';
  font-size: 24px;
  margin-top: 10px;
  display: inline-block;
  color: #FFF;
}

.ui-widget-header {
  background: var(--primary800);
}


a.ui-datepicker-prev.ui-corner-all:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  font-size: 24px;
  margin-top: 10px;
  display: inline-block;
  color: #FFF;
  content: '\f137';
  margin-left: 4px;
}

table.ui-datepicker-calendar {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.ui-datepicker .ui-datepicker-header {
  padding: 8px 0px;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  padding: 2px;
}

.ui-datepicker th {
  color: var(--primary800);
}

.ui-datepicker .ui-datepicker-buttonpane button {}

button.ui-datepicker-close.ui-state-default.ui-priority-primary.ui-corner-all {
  background: rebeccapurple;
  border-radius: 30px;
  border: none;
  padding: 8px 24px;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  line-height: 1;
}

button.ui-datepicker-current.ui-state-default.ui-priority-secondary.ui-corner-all {
  background: #fff;
  border-radius: 30px;
  border: none;
  padding: 8px 24px;
  color: var(--primary800);
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  line-height: 1;
  border: 1px solid var(--primary800);
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid var(--primary800);
  background: var(--primary100);
  color: var(--primary800);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid var(--primary800);
  background: var(--primary800);
  font-weight: normal;
  color: #ffffff;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
  background: none;
  border: none;
}

.full-width .select2-container {
  min-width: auto;
  width: 100% !important;
  max-width: 100%;
}

.full-width .select2-container--default .select2-selection--single {
  min-height: 3rem;
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  height: fit-content;
}

.full-width .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 100%;
  align-items: center;
  display: flex;
  overflow: visible;
  flex-wrap: wrap;
  width: 90%;
  padding: 4px;
  white-space: normal;
  line-height: normal;
  text-wrap: wrap;
  overflow: visible;
}

.full-width .select2-selection__placeholder {
  top: 12px;
}

.full-width .select2-selection__placeholder.selectNameSpan {
  top: -8px;
  color: var(--primary800);
  font-size: 12px;
}

.mdl-button.tab-button[disabled][disabled] {
  background: #fff !important;
}

#container-upsell .mdl-card__actions {
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0;
  align-items: center;
}



/* ==============================
    CONTENIDO NUEVO
=============================== */

.crear-negocio-video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.mb-60 {
  margin-bottom: -60px;
}

.align-content-end {
  align-content: flex-end;
}

.p-16 {
  padding: 16px;
}

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

.card-banner .h4-bold .span {
  color: #66308C;
}

.row-reverse {
  flex-flow: row wrap-reverse;
}

/*NFUERZA*/
.slider-banner-NFuerza h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 41px;
  font-weight: 400;
  line-height: 52px;
}

.slider-banner-NFuerza {
  padding-bottom: 24px;
}

.verticalCards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  justify-content: center;
}

@media (max-width: 768px) {
  .banner2TextContainer {
    padding: 5%;
    justify-content: center;
  }

  .verticalCards {
    order: 1;
    padding: 2%;
    width: 50%;
    order: 1;
    justify-content: center;
    padding: 0px 16px 0px 24px;

  }
}

/* INICIO AGREGAR A CARRITO TONO / TALLA */

#drawer-elegir-tono .mdl-snackbar--active {
  -webkit-transform: translate(-50%, 0) !important;
  transform: translate(0%, 0) !important;
  transition: none;
}

#drawer-elegir-tono .mdl-block,
#drawer-carrito-compra .mdl-block {
  margin: 0px;
  padding: 12px 16px;
}

#drawer-elegir-tono .h3-medium,
#drawer-carrito-compra .h3-medium {
  font-size: 25.6px;
}

#drawer-elegir-tono .h5-medium,
#drawer-elegir-tono .productPrice,
#drawer-carrito-compra .h5-medium,
#drawer-carrito-compra .productPrice {
  font-size: 16px;
}

#drawer-elegir-tono .body-medium-regular,
#drawer-elegir-tono .productName,
#drawer-elegir-tono .bodyMediumBold,
#drawer-carrito-compra .body-medium-regular,
#drawer-carrito-compra .productName,
#drawer-carrito-compra.bodyMediumBold {
  font-size: 12.8px;
}

#drawer-elegir-tono .productDesc,
#drawer-elegir-tono .productMetaDesc,
#drawer-elegir-tono .productVariantName,
#drawer-carrito-compra .productDesc,
#drawer-carrito-compra .productMetaDesc,
#drawer-carrito-compra .productVariantName {
  font-size: 11.2px;
}

#drawer-elegir-tono .productVariantContainer,
#drawer-carrito-compra .productVariantContainer {
  padding: 4px 0px;
  gap: 4px;
}


#card-producto-carrito.mdl-block {
  margin: 0px !important;
}

#card-producto-carrito {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

#card-producto-carrito img {
  width: 115px;
  height: 115px;
  border-radius: 8px;
  background: var(--neutrals100);
}

.product-desc-shopping-car {
  display: flex;
  padding-top: 4px;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1 0 0;
}

.chip-puntos-compra {
  border-radius: 8px;
  background: var(--secondary100);
  width: fit-content;
  display: flex;
  height: 32px;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.chip-puntos-compra i {
  color: #FC8701;
}

.chip-puntos-compra .bodyMediumBold {
  color: var(--secondary1000);
  font-weight: 700 !important;
}


.w-100 {
  width: 100%;
}

.card-puntos-compra {
  display: flex;
  width: 100%;
  padding: 16px;
  align-items: center;
  gap: 8px;
  border-radius: var(--Radius-Radius-xl, 16px);
  border: 1px solid var(--neutrals400);
  background: #fff;
  box-shadow: 0px 16px 24px -16px rgba(89, 88, 88, 0.10);
}

.card-puntos-compra .puntos-info.discount p.body-medium-regular strong,
.body-medium-regular strong {
  margin-left: 3px;
  margin-right: 3px;
}

.discount .card-puntos-acumulados p.h2-bold.white {
  font-size: 35px;
}

.puntos-info.discount :nth-child(4) {
  display: none;
}

.mdl-pagination-container {
  margin-top: 1rem;
}

.card-puntos-compra-icon {
  background: #FFEEDB;
  width: 42px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #FC8701;
}

.card-puntos-compra-icon i {
  color: #FC8701;
}

.puntos-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
}

.card-puntos-acumulados {
  display: flex;
  height: 55px;
  padding: 0px 8px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--primary600);
  background: var(--primary600);
}

.card-puntos-faltantes {
  display: flex;
  width: 100%;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  border-radius: 4px;
  background: var(--primary100);
}

.card-puntos-faltantes .body-bold-large {
  color: var(--primary600);
}

.card-puntos-acumulados .h2-bold {
  color: white !important;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
}


.omnilife-v2 .h5-medium {
  color: var(--primary700);
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  /* 140% */
}

.total-pagar-container {
  display: flex;
  justify-content: space-between;
  width: 90%;
}

.spinner {
  position: static;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 32px;
  /* Ajuste de altura a 32px */
  width: 32px;
  /* Ajuste de ancho a 32px */
  box-sizing: border-box;
  background: conic-gradient(from 90deg at 50% 50%,
      rgba(39, 174, 96, 0) 0deg,
      rgba(31, 144, 255, 0) 0.11deg,
      /* Ajuste del primer color stop */
      #66308C 360deg);
  border-radius: 32px;
  /* Ajuste del radio del borde */
  animation: 2s rotate infinite linear;
}

.spinner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 25px;
  /* Ajuste de altura a 24px */
  width: 25px;
  /* Ajuste de ancho a 24px */
  background: #fff;
  border-radius: 50%;
  /* Ajuste del radio del borde */
}

.primary .spinner {
  background: conic-gradient(from 90deg at 50% 50%,
      rgba(39, 174, 96, 0) 0deg,
      rgba(31, 144, 255, 0) 0.11deg,
      /* Ajuste del primer color stop */
      #fff 360deg);
  width: 24px;
  height: 24px;
}

.primary .spinner::after {
  background: #fff;
  height: 2.5px;
  width: 2.5px;
}

.primary .spinner::before {
  background: #66308C;
  width: 18px;
  height: 18px;
}

.primary:hover .spinner::before {
  background: var(--primary700);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader-productos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.card-puntos-acumulados .body-medium-bold {
  color: #fff;
  font-weight: 500;
}

.img-select-tono {
  width: 25px !important;
  height: 25px !important;
  border-radius: 8px !important;
  border: 2px solid !important;
}

@media (max-width: 920px) {
  .open-menu-mobile {
    opacity: 0;
    visibility: hidden;
    display: none !important;
  }

  .nav2DesktopContainer button a {
    color: var(--primary800) !important;
  }

  .selectedSubBtn {
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    min-height: 3rem;
  }

  .selectedBtnNav {
    color: var(--primary1000) !important;
    font-family: "Noto Sans" !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    border-bottom: 1px solid var(--primary800) !important;
    position: relative;
    border-radius: 0px !important;


  }

  .selectedBtnNav .fa-chevron-down {
    position: absolute;
    left: 0;
    transform: rotate(90deg) !important;
    left: 24px;
  }

  .selectedSubBtn {
    position: relative;
    padding-left: 35px;
  }

  .selectedSubBtn .fa-chevron-right {
    position: absolute;
    left: 0;
    transform: rotate(180deg) !important;
    left: 18px;
  }

  .nav2DesktopContainer .mdl-button:hover,
  .nav2DesktopContainer .mdl-button:hover>a {
    background: none;
    color: var(--primary1000);
  }

  .selectedBtnNav {
    color: var(--primary1000);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
  }


  .nav2DesktopContainer button a {
    color: var(--primary800) !important;
  }

  #mdl-btn-login {
    display: none;
  }

  .card-puntos-acumulados h2 {
    color: var(--neutrals100);
    font-family: "Noto Sans", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
  }

  .card-puntos-acumulados {
    display: flex;
    padding: 0px 8px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    height: auto;
  }
}

/* FIN AGREGAR A CARRITO TONO / TALLA */


/* PANTALLA DE CARGA */
.pantalla-carga-container {
  opacity: 0.95;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 999999;
  display: grid;
  place-items: center;
}

.pantalla-carga-container.fade-out {
  animation: fade-out 0.5s ease-in forwards;
  /* Animación de salida */
}

@keyframes fade-out {
  from {
    opacity: 0.95;
  }

  to {
    opacity: 0;
  }
}

.pantalla-carga-container.hidden {
  pointer-events: none;
  display: none;
  /* Ocultar el elemento después de la animación */
}

.loader-omnilife {
  position: relative;
  width: 164px;
  height: 164px;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #66308C 97%, #0000) top/16px 16px no-repeat,
    conic-gradient(#0000 3%, #66308C);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 16px), #000 0);
  animation: s3 3s infinite linear;
}

@keyframes s3 {
  100% {
    transform: rotate(1turn);
  }
}

.loader-omnilife-container {
  display: flex;
  width: 256px;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.icon-pantalla-carga-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -140%);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-pantalla-carga-container i {
  color: #FC8701;
  opacity: 0;
  /* Ocultar los íconos por defecto */
  transition: opacity 0.5s;
  /* Transición suave entre íconos */
  position: absolute;
  animation: swing-icons-pantalla-carga 1s ease infinite;
}

.icon-pantalla-carga-container i.active {
  opacity: 1;
  /* Mostrar el ícono activo */
}

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

.text-dinamic-container .h4-bold {
  color: #66308C;
}

@keyframes swing-icons-pantalla-carga {
  0% {
    transform: scale(4) rotate(0deg);
  }

  20% {
    transform: scale(4) rotate(15deg);
  }

  40% {
    transform: scale(4) rotate(-10deg);
  }

  60% {
    transform: scale(4) rotate(5deg);
  }

  80% {
    transform: scale(4) rotate(-5deg);
  }

  100% {
    transform: scale(4) rotate(0deg);
  }
}

/* FIN PANTALLA DE CARGA */

.img-card-testimonial-container {
  display: flex;
  gap: 10px;
}

.img-card-testimonial {
  width: 24px;

}

#drawer-filtros-testimonios {
  padding: 0px 24px;
}

#drawer-filtros-testimonios .mdl-drawer__ul {
  display: flex;
  padding: 8px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.title-testimonial {
  padding: 16px 0 24px 0;
}

.title-testimonial b {
  color: var(--primary600);
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

.video-testimonial-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5%;
}

.video-testimonial-section iframe {
  height: 30rem;
  width: 80%;
}

@media (max-width: 1025px) and (min-width: 990px) {}

@media (max-width: 989px) and (min-width: 601px) {
  .testimonial-container {
    height: 69rem !important;
  }
}

@media (max-width: 600px) {
  .testimonial-container {
    height: 86rem !important;
  }
}

@media (max-width: 990px) {
  .paginator-container {
    max-width: 17rem;
  }

  .mdl-pagination-container #pageNumbers span {
    padding: 3px;
  }

  .productsContainer .mdl-grid .mdl-cell.mdl-cell--3-col {
    width: 100%;
  }

  .filter-container .custom-row {
    gap: 16px;
  }

  .filter-container .select2-container {
    width: 100% !important;
    max-width: unset !important;
  }

  #button-filter-testimonios {
    width: 100%;
  }

  .title-testimonial {
    padding: 0px 16px;
  }

  .title-testimonial .h3-medium {
    border-bottom: 1px solid var(--neutrals400);
    padding-bottom: 16px;
  }

  .body-medium-medium {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
  }

  .testimonial-img-container {
    min-height: unset !important;
    height: fit-content !important;
  }

  .img-testimonial {
    border-top-left-radius: 32px !important;
    border-top-right-radius: 32px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    height: 15rem !important;
    min-height: unset !important;
    object-position: top;
  }

  .text-container-lg-testimonial {
    padding-left: 26px;
    padding-right: 26px;
  }

  .testimonial-img-container .card-banner {
    width: 10rem;
  }

  .testimonial-text-container {
    border-radius: var(--Spacing-8, 16px) var(--Radius-Radius-2xl, 16px) var(--Radius-Radius-2xl, 16px) var(--Spacing-8, 16px);
    position: inherit !important;
    left: 0px !important;
    top: -25px !important;
    margin-left: 16px;
    margin-right: 16px;
    padding: 32px 16px !important;
    z-index: 1 !important;
    margin-top: -20PX !important;
  }

  .quote-icon-testimonial {
    position: inherit !important;
  }

  .second-img-lg-testimonial-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .second-img-lg-testimonial {
    width: 343px !important;
    height: 343px !important;
  }

  .video-testimonial-section {
    padding: 0px;
  }

  .video-testimonial-section iframe {
    width: 100%;
    padding: 16px;
    height: 16rem;
  }

  .show-more-testimonial-comtainer {
    padding-left: 16px;
    padding-right: 16px;
  }

  #show-more-testimonial {
    width: 90%;
  }

  .colums-text-testimonial {
    padding-left: 16px;
    padding-right: 16px;
    gap: 4px;
  }

  .title-test .quote-icon-testimonial {
    padding-bottom: 16px;
    padding-top: 24px;
  }

  .cards-testimonios-container {
    padding-top: 1rem !important;
  }

  .h1-bold-testimonial {
    padding-left: 24px;
    padding-right: 24px;
  }

  .cards-testimonios-container {
    padding-top: 8rem !important;
  }

  .cards-testimonios-container .h3-medium {
    font-family: "Noto Sans", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    margin-left: 16px;
    padding: 1rem 0px;
  }

  .svg-shape {
    width: 3rem !important;
    height: 6rem !important;
    background: var(--primary600) !important;
    border-radius: 0 3rem 3rem 0 !important;
  }
}

.half-round-container {
  padding-left: 16px;
}

.cards-testimonios-container {
  padding-top: 4rem;
}

.cards-testimonios-container h3 {
  padding: 32px 5%;
}

.text-container-lg-testimonial {
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonial-text-container .quote-icon-testimonial {
  position: absolute;
  font-size: 65px;
  color: #FC8701;
  left: -3rem;
}

.testimonial-img-container .card-banner {
  padding: 8px 16px;
  gap: 8px;
}

.banner-testimonios b {
  background: var(--primary600);
  color: #fff;
  font-family: Montserrat;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
}

.half-round-container {
  display: flex;
}

.second-baner-testimonial-container {
  gap: 16px;
  display: grid;
  position: absolute;
  left: 45%;
}

.half-round-section {
  gap: 24px;
  display: grid;
}

.more-text-testimonial-container {
  gap: 24px;
  display: grid;
  padding: 32px;
}

.body-medium-medium {
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.breadcrumbs .body-medium-medium {
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;

}

.filter-container {
  padding: 5%;
}

.show-more-testimonial-container {
  display: none;
}

.large-testimonial .banner-section-testimonal,
.large-testimonial .imag-and-text-testimonial,
.large-testimonial .colums-text-testimonial {
  display: flex;
}

.colums-text-testimonial {
  position: relative;
}

.colums-text-testimonial::before {
  content: '';
  position: absolute;
  width: 27rem;
  height: 27rem;
  background-image: url(/uploads/images/portal/pages/Testimonios/background/element_deco.png);
  background-size: cover;
  z-index: -1;
  right: 56px;
  top: -120px;
}

.large-testimonial.show-more-testimonial-container {
  padding: 1rem;
  display: flex;

}



.filter-container .custom-row {
  border-radius: var(--Spacing-2, 8px);
  border: 1px solid var(--neutrals400);
  display: flex;
  padding: 24px;
  justify-content: space-between;
  align-items: center;
}

.filter-container .custom-row .col-md-4 {
  flex: 1;
}

.banner-testimonios-img-container {
  position: relative;
}

.second-img-lg-testimonial {
  border-radius: var(--Radius-Radius-none, 488px);
  width: 488px;
  height: 488px;
}

.testimonial-img-container .card-banner {
  position: absolute;
  bottom: 2rem;
  left: 4rem;
}

.filter-button-testimonios-container {
  display: flex;
  justify-content: flex-end;
}

.filter-container .select2-container {
  min-width: unset;
  max-width: 250px;
  width: 100%;
}

.cards-testimonios {
  padding: 0px 5%;
}

.cards-testimonios .mdl-card__supporting-text {
  gap: 16px;
  display: grid;

}

.cards-testimonios .mdl-card {
  padding: 10px;
  margin-bottom: 1rem;
  border-radius: var(--Radius-Radius-xl, 16px);
  border: 1px solid var(--neutrals300);
  background: rgba(255, 255, 255, 0.80);
}

.name-filt {
  color: var(--primary1000);
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.location-card-testimonios {
  display: block ruby;
  padding-top: 8px;
}

.chip-testimonios {
  border-radius: var(--Radius-Radius-md, 8px);
  border: 1px solid var(--primary1000);
  background: #fff;
  padding: 4px 8px;
}

.chip-testimonios span {
  margin-left: 0px;

}

.btn-read-testimonios {
  text-decoration: underline;
}

.img-card-testimonios {
  width: 50px !important;
  height: 50px;
  border-radius: 50% !important;
  object-fit: cover;
}

.name-card-testimonios.bodyMediumBold {
  color: var(--neutrals900);

}

.omnilife-v2 .body-small-regular,
.body-small-regular {
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.large-testimonial.testimonial-container {
  position: relative;
  height: 54rem;
  overflow: hidden;
  transition: max-height 2s ease-in-out;
  display: grid;
  gap: 32px;

}

.testimonial-container .custom-row {
  padding-left: 16px;
  padding-right: 16px;
}

.open-testimonial {
  height: auto !important;

}

.colored-h2 {
  color: var(--primary600);
}

.testimonial-container {
  height: fit-content;
}

.large-testimonial.open-testimonial::after {
  content: none !important;
}

.large-testimonial.testimonial-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10rem;
  background: linear-gradient(transparent, white 70%, white);
}

.show-more-testimonial-container {
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;

}

.testimonial-is-open {
  position: inherit;
}

.testimonial-is-open .testimonial-closed-text {
  display: none !important;
}

.testimonial-open-text {
  display: none !important;
}

.testimonial-is-open .testimonial-open-text {
  display: block !important;
}

.svg-shape {
  width: 90px;
  /* Ancho del semicírculo */
  height: 190px;
  /* Altura del semicírculo */
  background: var(--primary600);
  border-radius: 0px 100px 100px 0px / 50%;
  /* border-radius para formar el semicírculo */

}

.img-testimonial {
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
}

.open-testimonial::after {
  content: none;
  overflow: auto;
}

.breadcrumbs {
  padding-top: 2rem !important;
  padding-left: 1rem;
}


#drawer-filtros-testimonios {
  padding: 0px 24px;
}

#drawer-filtros-testimonios .mdl-drawer__ul {
  display: flex;
  padding: 8px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.banner-testimonios b {
  background: var(--primary600);
  color: #fff;
  font-family: Montserrat;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
}

.banner-testimonios button {
  display: flex !important;
}

.filter-container {
  padding: 5%;
}

.filter-container .custom-row {
  border-radius: var(--Spacing-2, 8px);
  border: 1px solid var(--neutrals400);
  display: flex;
  padding: 24px;
  justify-content: space-between;
  align-items: center;
}

.cards-testimonios .custom-row:first-child {
  margin-bottom: 20px;
  /* Cambia 20px por el valor que necesites */
}

.filter-container .custom-row .col-md-4 {
  flex: 1;
}

.banner-testimonios-img-container {
  position: relative;
}

.flag-card-testimonios {
  width: 24px !important;
  border-radius: 0px !important;
}

.filter-container .select2-container {
  min-width: unset;
  max-width: 250px;
  width: 100%;
}

.cards-testimonios {
  padding: 0px 5%;
}

.cards-testimonios .mdl-card__supporting-text {
  gap: 16px;
  display: grid;

}

.cards-testimonios .mdl-card {
  padding: 10px;
  margin-bottom: 1rem;
  border-radius: var(--Radius-Radius-xl, 16px);
  border: 1px solid var(--neutrals300);
  background: rgba(255, 255, 255, 0.80);
  box-shadow: none !important;
}

.name-filt {
  color: var(--primary1000);
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.location-card-testimonios {
  display: block ruby;
}

.chip-testimonios {
  border-radius: var(--Radius-Radius-md, 8px);
  border: 1px solid var(--primary1000);
  background: #fff;
  padding: 4px 8px;
}

.card-testimonio-container .mdl-shadow--2dp {
  box-shadow: none !important;
  display: grid;
}

.card-testimonio-container {
  display: flex;
  align-items: stretch;
}


/* FIN TESTIMONIOS*/


/* Registro  - Selecciona tu kit */
img.radio-img {
  display: inline-block;
  width: 80%;
  max-height: 200px;
  max-width: 200px;
}

.send-mail-toast {
  padding: 4px;
}

#formRegister .color-neutral,
#formRegister .mdl-text-block p,
.register-cards-container .mdl-card-content,
#formRegister .color-neutral5 {
  color: var(--neutrals900) !important;
}

.mdl-message-box .custom-row {
  flex-wrap: nowrap;
  gap: 8px;
}

.choose-kits label.mdl-radio.mdl-js-radio,
.mdl-radio.outline.mdl-js-radio {
  display: flex;
  padding: 10px;
  border-radius: 1rem;
  border: 1px solid var(--neutrals600);
  flex-wrap: wrap;
  align-content: space-between;
  height: fit-content;
  margin: 10px 0;
  transition: var(--transition);
  overflow: hidden;
}

.mdl-radio.outline.mdl-js-radio:hover {
  border: 1px solid var(--primary300);
}

.choose-kits .mdl-radio__label,
.outline .mdl-radio__label {
  margin-left: 30px;
  margin: 5px 0px 10px 40px;
}

.choose-kits label.mdl-radio:hover,
.outline label.mdl-radio:hover {
  box-shadow: 0 3px 10px -5px;
  transition: var(--transition);
}

.choose-kits label.mdl-radio.is-checked,
.outline label.mdl-radio.is-checked {
  background: var(--pirmary1);
}

.choose-kits label.mdl-radio.is-upgraded.is-checked,
label.mdl-radio.outline.is-upgraded.is-checked {
  color: var(--primary700);
  border: 1px solid var(--primary600);
}

#cart-side-left label.mdl-radio.outline.is-upgraded.is-checked {
  background-color: var(--primary1);
}

label.mdl-radio.outline.clear.is-upgraded.is-checked .mdl-card {
  background-color: transparent;
}

label.mdl-radio.outline.clear.alt.is-upgraded.is-checked {
  background: var(--primary1);
}

.choose-kits span.mdl-radio__outer-circle,
.outline span.mdl-radio__outer-circle {
  left: 20px;
  top: 20px;
}

.choose-kits span.mdl-radio__inner-circle,
.outline span.mdl-radio__inner-circle {
  top: 24px;
  left: 24px;
}

.choose-kits .mdl-radio__ripple-container,
.outline .mdl-radio__ripple-container {
  left: 10px;
  top: 10px;
}

.mdl-radio__images {
  display: flex;
  gap: 4px;
}


/* ==============================
    CLASES REPETIDAS (revisar)
=============================== */


.mdl-tabs__tab-bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: space-between;
  -ms-flex-line-pack: justify;
  align-content: space-between;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  height: 48px;
  padding: 0 0 0 0;
  margin: 0;
  border-bottom: 1px solid rgb(224, 224, 224);
}

.mdl-textfield.is-invalid .mdl-textfield__input {
  border-color: rgb(213, 0, 0);
  box-shadow: none;
}

.mdl-textfield.is-invalid .mdl-textfield__label span {
  color: rgb(213, 0, 0) !important;
}

.elipse-container a {
  display: none;
}

.bannerTitle a {
  display: block;
  margin: 10px 0px;
}


.tab-button {
  flex: 1;
  padding: 10px 20px;
  border: none;
  background: none;
  outline: none;
  transition: background-color 0.3s ease;
  text-align: center;
  background: var(--neutrals100);
  height: 48px;
}


.tab-button.active {
  border-radius: 8px 8px 0px 0px !important;
  background: var(--primary100) !important;
  color: var(--primary800) !important;
  border-bottom: 2px solid var(--primary800) !important;
}

#seccion__registrate-banner .elipse-container .mdl-button {
  background-color: var(--primary800);
  color: #fff;
  border: 1px solid var(--primary800);
}

.select-country-reg-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 45px;
  width: 100%
}

.select-country-reg-container div {
  display: flex;
  justify-content: center;
}

.select-country-reg-container {
  display: flex;
}

@media (max-width: 990px) {
  .select-country-reg-container {
    display: grid;
  }
}

.btnShowMoreNFContainer .mdl-button {
  background-color: #fff;
  color: var(--primary800);
  border: 1px solid var(--primary800);
}

.btnShowMoreNFContainer .mdl-button:hover {
  background: var(--primary100);
}

.tab-button.active .body-medium-medium {
  color: var(--primary800);
  border-bottom: 1px solid #66308C;
  width: fit-content;
}

.banner2TextContainer .mdl-button.primary {
  padding: 4%;
  width: 11rem;
}

.banner2Text .custom-row {
  width: 100%;
  justify-content: center;
}

.cards-accordion-formas-compra .h5-medium {
  color: var(--neutrals1000);
}

.mdl-textfield.outline {
  width: 100%;
}

.outline .mdl-textfield__input {
  height: 3rem;
  border-radius: var(--Radius-Radius-md, 0.5rem) !important;
  border: 1px solid var(--neutrals600);
  padding-left: 6px;
}

.mdl-textfield.outline .mdl-textfield__label {
  left: 8px;
  top: 34px;
  color: var(--neutrals1000) !important;
}

.mdl-textfield--icon {
  position: absolute;
  right: 10px;
  top: 33%;
}

.mdl-textfield--icon:hover {
  color: var(--primary600);
}

/*TESTIMONIOS  */
.testimonial-img-container {
  position: relative;
  height: auto;
  min-height: 42rem;
  max-width: 100%;
}

.img-testimonial {
  width: 100%;
  object-fit: cover;
  object-position: left;
  height: 100%;
}

.testimonial-text-container {
  position: absolute;
  left: -5%;
  min-height: 42rem;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 32px;
  background: var(--neutrals100);
  padding: 32px;
  gap: 10px;
  position: relative;
  height: fit-content;
}

.banner-section-testimonal .h1-bold-testimonial {
  color: var(--neutrals1000) !important;
  font-family: Montserrat;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 80px;
}

#seccion__registrate-tabs .tab-button.active {

  border-bottom: 0px !important;
}

#seccion__registrate-tabs .tab-button.active {
  padding: 0px;
}

#seccion__registrate-tabs .tab-button.active .body-medium-medium {
  height: 100% !important;
  border-bottom: 2px solid #66308C;
  line-height: 1;
}

@media (max-width: 990px) {
  #seccion__registrate-tabs .tab-button.active {
    border-bottom: 2px !important;
    border-radius: 8px 8px 0px 0px !important;
    background: var(--primary100) !important;
    color: var(--primary800) !important;
    border-bottom: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #seccion__registrate-tabs .tab-button {
    height: 48px;
  }

  .testimonial-img-container .card-banner {
    position: absolute;
    left: 3rem;
    bottom: 2rem;
    min-width: 11rem;
    width: fit-content;
  }

  .banner-testimonios .bannerTitle .h3-medium b {
    display: inline;
    font-family: "Noto Sans", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
  }

  .banner-section-testimonal .h1-bold-testimonial {
    font-family: "Noto Sans", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
  }

  .banner-section-testimonal .h1-bold-testimonial span {
    font-family: "Noto Sans" !important;
    font-size: 32px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 40px !important;
  }
}

.banner-section-testimonal .h1-bold-testimonial span {
  color: #fff;
  font-family: Montserrat;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 80px;
  background-color: var(--primary600);
  padding-left: 16px;
  /* Padding a la izquierda */
  padding-right: 16px;
}


/* ===============================
    FIN DE CONTENIDO REPETIDO
=============================== */

/* ====================================================
        INICIO LANDING CONOCER GRUPO OMNILIFE
============================================== */
.title-container {
  display: flex;
  width: 488px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  justify-content: center;
}

.title-container h2 b {
  background: var(--primary600);
  color: #fff;
  padding: 6px 20px;
  display: inline-block;
}

#seccion__conocer_omnilife-6 .title-seccion,
#seccion__conocer_omnilife-7 .title-seccion {
  padding: 2rem 0;
}

#seccion__conocer_omnilife-3 .beneficios-list-title b {
  color: var(--primary800);
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

#seccion__conocer_omnilife-3 .grupo-omnilife-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  flex: 1 0 0;
  align-self: stretch;
}

.grupo-omnilife-container .description-container {
  gap: 16px;
}

.grupo-omnilife-container ul {
  padding-inline-start: 0px;
  list-style: none;
}

.grupo-omnilife-container ul li {
  display: flex;
  gap: 4px;
}

.grupo-omnilife-container ul li i.fa-star-christmas:before {
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/deco-star.svg);
  content: '';
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  background-size: cover;
}

#seccion__conocer_omnilife-3 .mdl-grid .mdl-cell {
  align-content: center;
}

.title-seccion {
  display: flex;
  gap: 16px;
}

.card-plantas {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--neutrals400);
}

.card-plantas-info-container {
  display: flex;
  padding: 0px 16px 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.card-plantas-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.card-plantas-info ul {
  margin: 0px;
}

.card-plantas img {
  height: 170px;
  align-self: stretch;
  border-radius: 8px 8px var(--Radius-Radius-none, 0px) var(--Radius-Radius-none, 0px);
  background: lightgray 50% / cover no-repeat, var(--neutrals100);
  object-fit: cover;
}

#seccion__cards_reconocimientos {
  display: flex;
  width: 100%;
  padding: 32px 80px;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  row-gap: 40px;
  flex-wrap: wrap;
  border-radius: var(--Radius-Radius-2xl, 32px);
  background: var(--secondary100);
}

.reconocimiento-container {
  display: flex;
  padding: 8px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  border-right: 1px solid var(--primary600);
}

#seccion__cards_reconocimientos .col-md-4:last-child .reconocimiento-container {
  border: none;
}


.reconocimiento-container .h4-bold {
  color: var(--primary600);
}

.label-comming-soon {
  position: absolute;
  top: 0px;
  left: 15px;
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 10px;
  border-radius: 8px 0px;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  border-radius: 8px 0px;
  background: var(--primary600);
  color: white;
}

.mdl-card-certificaciones .label-comming-soon {
  left: 0;
  top: 0;
}

.mdl-card-certificaciones {
  position: relative;
  display: flex;
  width: 280px;
  min-height: 330px;
  padding: 48px 24px 24px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  border-radius: var(--Radius-Radius-xl, 16px);
  border: 1px solid var(--neutrals400);
  background: #fff;
  box-shadow: 0px 16px 24px -16px rgba(89, 88, 88, 0.10);
}


.owl-cards-certificaciones .owl-nav {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  margin-bottom: -36px;
}

.owl-cards-certificaciones .owl-nav button.owl-prev {
  position: absolute;
  top: 95px;
  left: -15px;
}

.owl-cards-certificaciones .owl-nav button.owl-next {
  position: absolute;
  top: 95px;
  right: -15px;
}

.owl-cards-certificaciones button.owl-next span,
.owl-cards-certificaciones button.owl-prev span {
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 3px solid #66308C !important;
  background: #fff;
}

.owl-cards-certificaciones button.owl-next span,
.owl-cards-certificaciones button.owl-prev span {
  color: transparent !important;
  background: white;
}


.owl-cards-certificaciones .owl-theme .owl-nav.disabled,
.owl-cards-certificaciones .owl-theme .owl-nav.disabled {
  opacity: 1 !important;
  cursor: default;
}

.owl-cards-certificaciones button.owl-next span:after {
  content: 'a';
  content: '\f105';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -32px;
  position: relative;
}

.owl-cards-certificaciones button.owl-prev span:after {
  content: 'a';
  content: '\f104';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -32px;
  left: -3px;
  position: relative;
}

.owl-cards-certificaciones button.owl-next span:active,
.owl-cards-certificaciones button.owl-prev span:active {
  box-shadow: 0 5px 10px -4px var(--primary800);
}

.owl-cards-certificaciones button.owl-next span:hover,
.owl-cards-certificaciones button.owl-prev span:hover {
  background-color: var(--primary100) !important;
  box-shadow: 0 10px 10px -10px;
}

.owl-cards-certificaciones .owl-item {
  display: flex;
  justify-content: center;
}


.owl-cards-empresas .owl-nav {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  margin-bottom: -36px;
}

.owl-cards-empresas .owl-nav button.owl-prev {
  position: absolute;
  top: 50px;
  left: -15px;
}

.owl-cards-empresas .owl-nav button.owl-next {
  position: absolute;
  top: 50px;
  right: -15px;
}

.owl-cards-empresas button.owl-next span,
.owl-cards-empresas button.owl-prev span {
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 3px solid #66308C !important;
  background: #fff;
}

.owl-cards-empresas button.owl-next span,
.owl-cards-empresas button.owl-prev span {
  color: transparent !important;
  background: white;
}


.owl-cards-empresas .owl-theme .owl-nav.disabled,
.owl-cards-empresas .owl-theme .owl-nav.disabled {
  opacity: 1 !important;
  cursor: default;
}

.owl-cards-empresas button.owl-next span:after {
  content: 'a';
  content: '\f105';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -32px;
  position: relative;
}

.owl-cards-empresas button.owl-prev span:after {
  content: 'a';
  content: '\f104';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -32px;
  left: -3px;
  position: relative;
}

.owl-cards-empresas button.owl-next span:active,
.owl-cards-empresas button.owl-prev span:active {
  box-shadow: 0 5px 10px -4px var(--primary800);
}

.owl-cards-empresas button.owl-next span:hover,
.owl-cards-empresas button.owl-prev span:hover {
  background-color: var(--primary100) !important;
  box-shadow: 0 10px 10px -10px;
}

.owl-cards-empresas .owl-item {
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .conocer-omnilife-container .crear-negocio-big-numbers .col-lg-5 {
    align-items: baseline !important;
  }
}

.mdl-card-certificaciones .h5-bold {
  color: var(--neutrals900);
}

.mdl-card-certificaciones .h5-bold,
.mdl-card-certificaciones .body-bold-large,
.mdl-card-certificaciones .body-medium-regular {
  text-align: center;
}

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

.mdl-card-consejo {
  display: flex;
  width: 280px;
  height: 410px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: var(--Radius-Radius-xl, 16px);
}

.mdl-card-consejo .mdl-card-consejo-info {
  display: flex;
  width: 280px;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  position: absolute;
  bottom: 0px;
  border-radius: var(--Radius-Radius-xl, 16px);
  background: var(--primary100);
}

.nuestra-historia-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
}

.nuestra-historia-container b {
  background: var(--primary600);
  color: #fff;
  padding: 6px 20px;
  display: inline-block;
}

.nuestra-historia-container .body-medium-regular strong {
  color: var(--primary800);
}

.name-consejo {
  color: var(--primary600);
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 27px;
}

.time-line-container {
  display: flex;
  gap: 32px;
}

.timelapse-dates-container {
  display: flex;
  width: 176px;
  height: 482px;
  padding: 16px;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  border-radius: var(--Spacing-2, 8px);
  background: #fff;
  box-shadow: 0px 32px 48px -24px rgba(89, 88, 88, 0.40);
}

.card-time-line {
  display: flex;
  width: 592px;
  height: 481px;
  align-items: center;
  flex: 1 0 0;
  box-shadow: 0px 24px 32px -24px rgba(89, 88, 88, 0.20);
}

.carrousel-timelapse {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.carrousel-timelapse button.owl-next span,
.carrousel-timelapse button.owl-prev span {
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 3px solid #66308C !important;
  background: #fff;
}

.carrousel-timelapse button.owl-next span,
.carrousel-timelapse button.owl-prev span {
  color: transparent !important;
  background: white;
}


.carrousel-timelapse button.owl-next span:after {
  content: '\f105';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -32px;
  position: relative;
}

.carrousel-timelapse button.owl-prev span:after {
  content: '\f104';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -32px;
  left: -3px;
  position: relative;
}

.carrousel-timelapse button.owl-next span:active,
.carrousel-timelapse button.owl-prev span:active {
  box-shadow: 0 5px 10px -4px var(--primary800);
}

.carrousel-timelapse button.owl-next span:hover,
.carrousel-timelapse button.owl-prev span:hover {
  background-color: var(--primary100) !important;
  box-shadow: 0 10px 10px -10px;
}

.carrousel-timelapse button.owl-next,
.carrousel-timelapse button.owl-prev {
  background: 0 0;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
  outline: none;
}

.carrousel-timelapse button.owl-next {
  transform: rotate(90deg);
  width: fit-content;
}

.carrousel-timelapse button.owl-prev {
  transform: rotate(90deg);
  width: fit-content;
}

.fecha-timelapse {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: center;
}

.fechas-container .fecha-timelapse .body-bold-large {
  color: var(--neutral4);
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.fechas-container .fecha-timelapse.active .body-bold-large {
  color: var(--primary);
}

.dots-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dot-timeline {
  width: 3px;
  height: 3px;
  background-color: #757575;
  border-radius: 100%;
}

.fechas-container {
  padding: 4px 0px;
  height: 325px;
  overflow-y: hidden;
}

.fecha-timelapse .body-bold-large {
  height: min-content;
  cursor: pointer;
}

.owl-timeline {
  transition: transform 0.5s ease;
  width: 100px;
}

.owl-timeline .fecha-timelapse:last-child .dot-timeline {
  display: none;
}

.fecha-timelapse.active .body-bold-large {
  color: #66308C;
  position: relative;
  left: -4px;
}

.fecha-timelapse.active .dot-timeline {
  background-color: #66308C;
}

.fecha-timelapse.active .dots-timeline i {
  scale: 2;
  color: #66308C;
}

.info-timelapse-container {
  position: relative;
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: var(--Spacing-2, 8px);
  background: #fff;
  box-shadow: 0px 4px 8px -2px rgba(89, 88, 88, 0.04);
}

.info-timelapse-container::before {
  content: "";
  width: 16px;
  height: 16px;
  background: #fff;
  position: absolute;
  left: -7px;
  rotate: -45deg;
  box-shadow: -4px -4px 6px rgba(0, 0, 0, 0.04);
}

.info-timelapse {
  display: flex;
  padding-left: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-left: 1px solid var(--primary600);
}

.info-timelapse p,
.info-timelapse h3 {
  width: 100%;
  opacity: 0;
  /* Inicialmente oculto */
  transition: opacity 0.5s ease;
  /* Transición de opacidad */
}

.info-timelapse p.show,
.info-timelapse h3.show {
  opacity: 1;
  /* Muestra el elemento cuando tiene la clase 'show' */
}

.owl-cards-empresas .mdl-card-formas-compra .card-formas-compras-icon {
  background-color: #EDE1F5;
}

.owl-cards-empresas .mdl-card-formas-compra .card-formas-compras-icon img {
  width: 74px;
  height: 74px;
}

.owl-cards-empresas .mdl-card-formas-compra:not(:has(.card-formas-compras-icon)),
.owl-cards-empresas .mdl-card-formas-compra:not(:has(p)) {
  justify-content: center;
}

.owl-cards-empresas .mdl-card-formas-compra {
  max-width: 375px;
  height: 230px;
}

/*  Estilos Responsive Landing CONOCER GRUPO OMNILIFE  */

@media (max-width: 920px) {
  .time-line-container {
    gap: 16px;
  }

  .fecha-timelapse {
    display: grid;
  }

  .timelapse-dates-container {
    width: auto;
  }

  .fecha-timelapse.active .body-bold-large {
    color: #66308C;
    position: relative;
    left: 0;
  }

  #seccion__conocer_omnilife-3 .grupo-omnilife-container {
    gap: 8px;
  }
}

@media(max-width: 767px) {
  .banner2 .custom-row .col-md-6:first-child {
    order: 2;
  }

  #seccion__cards_reconocimientos {
    display: flex;
    width: 100%;
    padding: 32px 24px;
  }

  .reconocimiento-container {
    border-bottom: 1px solid var(--primary600);
    border-right: 0px;
    gap: 24px;
    padding: 24px 32px;
  }

  .omnilife-v2 .h3-medium .h3-bold {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
  }
}

@media(max-width: 576px) {
  #seccion__card_plantas .custom-row {
    gap: 32px;
  }

  .timelapse-dates-container,
  .card-time-line {
    min-height: 361px;
  }

  .conocer-omnilife-container {
    gap: 24px;
  }
}

.omnilife-v2 .h3-medium .h3-bold {
  color: var(--primary600);
}

.fecha-timelapse.active .dots-timeline i::after {
  content: "";
  width: 15px;
  height: 15px;
  background: #EDE1F5;
  display: grid;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  z-index: -1;
}

.card-plantas-info .imgSelectFlag {
  border-radius: 0px;
  width: 30px;
  height: 25px;
}

figure.crear-negocio-video iframe {
  height: 100% !important;
}

section#seccion__conocer_omnilife-8 .title-seccion {
  margin-bottom: 16px;
}

@media (min-width: 1024px) {

  section#seccion__conocer_omnilife-2 .bannerTitle b {
    /* h2/bold */
    font-family: Montserrat;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 64px;
  }
}


/* ====================================================
        FIN LANDING CONOCER GRUPO OMNILIFE
============================================== */

/* ====================================================
        INICIO LANDING REGISTRARSE
============================================== */

#seccion__registrate-banner-2 {
  background: var(--primary100);
}

#seccion__registrate-info-2 .col-12 {
  padding: 24px 45px;
}

#seccion__registrate-info-2 .h3-bold {
  color: var(--primary600);

}

.cards-kit-container {
  margin-bottom: 24px;
}

#btn-banner-registrarse {
  color: white;
  padding-bottom: 24px;
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 1px solid var(--primary800);
  background: var(--primary800);
}

#seccion__registrate-banner {
  border-bottom: 1px solid var(--neutrals300);
  padding-bottom: 5rem !important;
  padding: 16px;
}

#seccion__registrate-banner .col-md-12 {
  justify-content: center;
}

#seccion__registrate-tabs {
  padding: 16px;
}

#seccion__registrate-benefits-1 {
  padding: 16px;
}

#seccion__registrate-info-1 {
  border-left: 1px solid var(--primary600);
  display: flex;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 48px;
  margin-bottom: 48px;
}

#seccion__registrate-info-1 .h5-medium,
#seccion__registrate-info-1 .h3-medium {
  color: var(--neutrals1000) !important;
}

#seccion__registrate-tabs .tabs:hover {
  background-color: #f0f0f0;
}

.register-client-list,
.register-distributor-list {
  background-color: #FFF;
}

.h2-bold.colored-text {
  background: var(--primary600);
  color: #f0f0f0;
  padding: 0px 16px;
}

.register-distributor-list {
  padding: 24px;
}

.register.fullsteps {
  padding-top: 1px;
}

.register-client-title,
.register-client-list,
.register-distributor-list {
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 24px;
  border-radius: 16px;
  border: 1px solid var(--neutrals400);
  padding: 24px;
  width: 90%;
}

.register-client-list {
  padding: 24px;
}

.benefits-tabs-list li {
  display: flex;
}

.benefits-tabs-list .body-medium-regular {
  margin-left: 8px;
}

.open-client-register .opened-accoirdion-benefits {
  padding: 24px 0px;
}

.title-benefits .h5-bold {
  color: var(--primary600);
}

.register-client-list,
.register-distributor-list {
  display: flow;
}

.cards-kit-container ul {
  list-style-type: none;
  display: grid;
  gap: 16px;
  padding: 0px;
}

.register-client-list li,
.register-distributor-list li {
  display: flex;
}

.register-client-list li .body-medium-regular,
.register-distributor-list li .body-medium-regular {
  margin-left: 8px;
}

.register-client-list .fal,
.register-distributor-list .fal {
  color: var(--primary800);
  font-size: 24px;
}

.register-client-title .fal {
  color: var(--primary600);
  font-size: 54px;
}

.register-client-title .h5-bold {
  color: var(--neutrals1000);
}

.benefits-container {
  justify-content: center;
  align-items: center;
  display: flex;
}

.cards-kit-container {
  justify-content: center;
}

.long-card-kit-img {
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}


.card-kit .h5-medium {
  color: var(--neutrals1000);
}

#seccion__registrate-benefits-2 {
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/j8TxmWK.png);
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: bottom;
  padding-bottom: 5rem;
}

.benefits-info-container .custom-row {
  padding: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.card-kit ul {
  border-top: 1px solid var(--neutrals400);
  padding: 24px 18px;
}

.card-kit .mdl-card__title {
  justify-content: center;
  align-items: center;
  display: flex;
  border-bottom: 1px solid var(--neutrals400);
}

.list-item-benefits {
  display: flex;
  gap: 8px;
}

.list-item-benefits span {
  margin-left: 10px;
}

.icon-list-star {
  background-image: url('https://portalqa.omnilife.com/uploads/images/portal/redesign/deco-star.svg');
  width: 20px;
  height: 20px;
  background-size: cover;
  padding: 8px;
  margin-top: 1.5px;

}

.accordion-title {
  display: none;
  font-size: 24px;
  color: #66308C;
}

#seccion__registrate-banner-2 .h3-medium {
  color: var(--neutrals900) !important;
}

#seccion__registrate-banner-2 .h3-medium b {
  color: var(--primary600) !important;
}

.seccion__registrate-banner-2 .custom-row>.col-md-6.col-sm-12:first-of-type {
  gap: 24px;
  display: grid;
}

.colored-container-text {
  display: grid;
  gap: 24px;
  padding: 24px;
  justify-content: center;
  align-content: center;
  position: relative;
  overflow: visible;
}

#seccion__registrate-banner-2 .custom-row {
  padding: 24px;
}

#seccion__registrate-tabs .h3-bold {
  color: var(--primary600);
}

.long-card-kit-img {
  margin-bottom: 10px;
}

.cards-kit-container .mdl-card__supporting-text {
  padding: 0px;
}

.long-card-kit-info .mdl-card__title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.long-card-kit-info ul {
  padding: 0px 24px;
}

.register-distributor-list ul,
.register-client-list ul {
  padding: 0px;
  gap: 12px;
  display: grid;
}


.long-card-kit-info .mdl-card__title .h5-medium {
  border-bottom: 1px solid var(--neutrals400);
  width: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  color: var(--neutrals1000);
}

.info-section {
  padding: 28px 24px;
  display: grid;
  gap: 12px;
}

.img-kit-container {
  justify-content: center;
  align-items: center;
  display: flex;
}

.img-kit-container img {
  height: 270px;
}

.btn-accordion-benefits {
  display: flex;
  align-items: center;
}

.btn-accordion-benefits h5 {
  margin: 0;
}

.btn-accordion-benefits i {
  margin-left: auto;
  display: none;
}

.show-info-accordion {
  display: grid !important;
}

#seccion__registrate-banner-2 {
  justify-content: center;
  height: 25rem;
  display: flex;
  margin: 72px 0px;
  align-items: center;
}

.benefits-info-container .col-md-12:first-child {
  justify-content: end;
}

.benefits-info-container .col-md-12:nth-child(2) {
  justify-content: start;
}

#seccion__registrate-banner-2 .colored-container {
  height: 22rem;
}

.colored-container-img {
  position: relative;
  justify-content: center;
  align-items: center;
  display: flex;
}

.colored-container-img img {
  max-height: 30rem;
  position: absolute;
  top: -54px;
}

.show {
  display: grid !important;
}

#seccion__registrate-tabs .tab-content h4 {
  padding: 24px;
}

.title-benefits-container {
  text-align: center;
}

.title-benefits-container b {
  color: var(--primary600);

}


.benefits-container .mdl-button {
  padding: 8px 24px !important;
}

#seccion__registrate-tabs .tab-button.active {
  border: none;
}

#seccion__registrate-tabs .tab-button.active h3 {
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.colored-container .mdl-button {
  width: 20rem;
}

@media only screen and (max-width: 767px) {
  .colored-container-img {
    order: 1;
  }

  .colored-container-text {
    order: 2;
  }

}


@media only screen and (max-width: 992px) {

  .benefits-info-container .col-md-12.col-lg-6:nth-of-type(2) {
    padding-top: 3rem;
  }

  .ctaContainerColored .custom-row {
    width: 100%;

  }


  .join-distributor-btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .join-distributor-btn .mdl-button {
    width: 90%;
  }

  .opened-accoirdion-benefits {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--primary800);
  }

  .btnShowMoreNFContainer .mdl-button {
    height: 1;
  }

  .tab-img-distributor {
    display: none;
  }

  #seccion__registrate-tabs .tab-content h4 {
    padding: 0px;
  }

  .cards-kit-container {
    margin: 16px;
  }

  .cards-kit-container .col-sm-12 {
    margin-bottom: 24px;
  }

  .join-client-btn {
    position: absolute;
    margin-top: 2.5rem;
    width: 75%;
  }

  .btn-accordion-benefits i {
    display: flex;
  }

  .register-client-list .show {
    display: none !important;
  }

  .register-client-list.opened-accoirdion-benefits .show {
    display: grid !important;
  }


  .accordion-title {

    display: flex;
  }

  #seccion__registrate-benefits-2 {
    background: none;
  }

  .flex-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .no-margin {
    margin: 0 !important;
  }

  .register-client-list .h5-bold,
  .register-distributor-list .h5-bold {
    color: var(--neutrals1000);
    font-family: "Noto Sans", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
  }

  #info-benefits-sell,
  #info-benefits-buy,
  .opened-accoirdion-benefits ul {
    display: none;
    border-radius: var(--Radius-Radius-md, 8px);
    border-bottom: 1px solid var(--primary200);
    background: #fff;
    box-shadow: 0px 16px 24px -16px rgba(89, 88, 88, 0.10);
    padding-bottom: 24px;

  }

  .register-client-list {
    border: none;
    border-radius: var(--Radius-Radius-md, 8px);
    border-bottom: 1px solid var(--primary200);
    background: #fff;
    box-shadow: 0px 16px 24px -16px rgba(89, 88, 88, 0.10);
    padding-bottom: 24px;
    padding: 24px;
  }

  #info-benefits-buy,
  #info-benefits-sell,
  .opened-accoirdion-benefits ul {
    padding: 0px;
    gap: 12px;
    padding-bottom: 24px;
  }

  .benefits-info-container>div:first-child {
    margin-top: 3rem;
  }

  #info-benefits-client {
    display: none;
    padding: 0px;
    gap: 12px;
    padding-bottom: 24px;
  }

  .btn-accordion-benefits+.icon-info-container+ul {
    display: none;
    padding: 0px;
    gap: 12px;
    padding-bottom: 24px;
  }



  .register-client-list li,
  .register-distributor-list li {
    margin-left: 24px;
  }

  .opened-accoirdion-benefits #info-benefits-client,
  .opened-accoirdion-benefits #info-benefits-buy,
  .opened-accoirdion-benefits #info-benefits-sell,
  .opened-accoirdion-benefits ul {
    display: grid !important;
  }

  .btn-accordion-benefits.opened-accoirdion-benefits+.icon-info-container+ul {
    display: grid !important;
  }

  .register-client-list:first-of-type .title-benefits {
    border-radius: var(--Radius-Radius-md, 8px);
    border-bottom: 1px solid var(--Color-Primary-Primary200, #DAC3EA);
    background: var(--Color-Neutral-Base-White, #FFF);
    box-shadow: 0px 16px 24px -16px rgba(89, 88, 88, 0.10);
    padding-bottom: 24px;
    padding: 24px;
  }

  .register-client-list:first-of-type {
    border: none !important;
  }

  .register-distributor-list .title-benefits {
    border: none;
    border-radius: var(--Radius-Radius-md, 8px);
    border-top: 1px solid var(--primary100);
    background: #fff;
    box-shadow: 0px 16px 24px -16px rgba(89, 88, 88, 0.10);
  }

  .register-distributor-list .title-benefits {
    padding: 24px 11px;
  }

  .register-distributor-list .closed-accoirdion-benefits {
    border-radius: 16px;
    margin-bottom: 24px;
  }

  .opened-accoirdion-benefits {
    box-shadow: none !important;
  }

  .register-distributor-list {
    border: 0px;
    padding: 0px;
  }

  #seccion__registrate-banner-2 {
    height: max-content;
    margin: 0px;
    ;
  }

  #seccion__registrate-banner-2 .colored-container {
    height: max-content;
  }

  .colored-container-img img {
    position: inherit;
    top: 0px;
  }

  .open-client-register {
    border: 0px;
    border-radius: var(--Radius-Radius-md, 8px);
    border-bottom: 1px solid var(--primary200);
    background: #fff;
    box-shadow: 0px 16px 24px -16px rgba(89, 88, 88, 0.10);
  }


  #seccion__registrate-banner-2 {
    width: 100%;
  }

  .registrateContainer {
    overflow: hidden !important;
    width: 100% !important;
  }
}

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

.registrateContainer {
  margin-top: 7rem !important;
}

.registrateContainer ul.breadcrumbs li {
  font-weight: 400 !important;
}

.registrateContainer .breadcrumbs {
  /*padding-left: 10rem; ESTO ES DEMASIADO*/
}

.registrateContainer .tab-container .h3-bold b {
  color: var(--neutrals1000);

}

.registrateContainer>.custom-row:first-child {
  margin: 0 auto;
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

/* ====================================================
        FIN LANDING REGISTRARSE
============================================== */
/* ==============================================
        Login - restablecer contraseña
============================================== */
.mdl-textfield.is-invalid:after {
  content: "\f06a";
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  color: var(--error1000);
  font-size: 1.3rem;
  position: absolute;
  top: 40%;
  right: 20px;
  background: #fff;
}

/* ==================================================
      CORRECCION DE ESTILOS HOME
===================================================== */
@media (max-width: 540px) {
  .owl-mdl-principal-slider .owl-nav {
    justify-content: space-between;
    width: 90%;
  }
}

.nav2DesktopContainer button a {
  color: #fff;
  cursor: pointer;
}

#home-productos-secundarios h2 {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  font-family: "Noto Sans", sans-serif;
}

#home-productos-principales h3 {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  font-family: "Noto Sans", sans-serif;
}

#home-productos-secundarios h3 {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  font-family: "Noto Sans", sans-serif;
}

.omnilife-v2 #home-productos-secundarios .mdl-chip {
  border: 1px solid var(--primary800);
}

#home-empresarios h2,
#home-valores h2 {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  font-family: "Noto Sans", sans-serif;
}

#home-big-numbers .col-lg-5 h3 {
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

#home-big-numbers .mdl-card {
  min-height: auto;
}

#home-big-numbers .mdl-card .custom-row {
  align-items: baseline;
}

.omnilife-v2 .noticia-titulo {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

#home-noticias h2 {
  font-family: "Noto Sans", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px
}

#home-noticias .mdl-card__main h3 {
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

#home-productos-principales .mdl-card__prices p.price,
#home-productos-secundarios .mdl-card__prices p.price {
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

section#home-valores .mdl-text-block {
  gap: 16px;
}

section#home-empresarios .mdl-card--content p {
  text-align: left;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

section#home-empresarios .mdl-card--content p .color-primary {
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  color: var(--primary600) !important;
}

.mdl-carousel-margin-top {
  margin-top: -170px;
}

.mdl-icon-empresarios {
  width: 200px;
  height: 200px;
  position: absolute;
  top: -70px;
  left: 80px;
}

@media (max-width: 1140px) {
  .mdl-carousel-margin-top {
    margin-top: -35px;
  }
}

@media (max-width: 768px) {
  section#home-empresarios .mdl-big-banner {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  section#home-empresarios .mdl-big-banner figure {
    max-width: 95%;
  }

  section#home-empresarios .mdl-icon-empresarios {
    width: 102.772px;
    height: 76px;
    left: 40px;
    top: -40px;
  }

  section#home-empresarios .mdl-big-banner__content {
    padding: 0px 16px;
    margin-top: -100px;
  }

  section#home-empresarios .mdl-big-banner__content .custom-row .col-12 {
    justify-content: center;
    display: flex;
  }

  section#home-empresarios .mdl-big-banner__content .custom-row .col-12 .mdl-card.small {
    width: 90%;
  }

  section#home-empresarios .mdl-big-banner__content .custom-row .col-12 .mdl-card .mdl-card--content.p-1 {
    padding: 0rem !important;
  }

  section#home-empresarios .bg-block {
    min-height: 236px;
  }

  section#home-valores .mdl-text-block {
    padding: 0px 16px;
  }



  section#home-productos-secundarios .mdl-text-block {
    gap: 16px;
    margin-bottom: 24px;
  }

}

/* ==============================================
        Producto destacado
============================================== */
.featured-product-image {
  border: 1px solid var(--neutrals400);
  border-radius: var(--Spacing-2, 8px) var(--Radius-Radius-none, 0px) var(--Radius-Radius-none, 0px) 8px;
  background-color: var(--neutrals100);
  padding: 0px;
}

.featured-product-info {
  border-radius: var(--Radius-Radius-none, 0px) 8px var(--Spacing-2, 8px) var(--Radius-Radius-none, 0px);
  border: 1px solid var(--neutrals400);
  background: var(--primary100);
  backdrop-filter: blur(21px);
}

.featured-product-image .categoryCardContainer {
  border-radius: var(--Spacing-2, 8px);
  border: 1px solid var(--primary1000);
  background: var(--neutrals100);
  width: fit-content;
  padding: 8px;
  margin-top: 24px;
  margin-left: 24px;
  position: absolute;
}

.search-result .search-row .categoryCardContainer a {
  display: contents;
}

.search-result .search-row .categoryCardContainer a .nameCategory {
  text-decoration: underline;
}

.featured-product-info .productName {
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

.featured-product-info .productPrice {
  color: var(--primary700);
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

.featured-product-info .descPrice {
  font-size: 16px;
}

.featured-product-info .productVariantName {
  color: var(--neutrals800);
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  line-height: 16px;
}

.img-feadured {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-feadured img {
  height: 300px;
}


.featured-product .featured-product-info {
  position: relative;
}

.featured-product-info .counterProdcut {
  position: absolute;
  bottom: 24px;
  right: 24px;
  max-width: unset;
  width: 46%;
  background: transparent;
  border: none;
}

.featured-product-info .counterProdcut .mdl-button {
  background-color: white;
}

.counter-btns-container {
  display: flex;
  gap: 4px;
  background-color: white;
  border-radius: 30px;
  justify-content: space-between;
  border: 1px solid var(--primary800);
}

.featured-product-info .counterProdcut .mdl-button.secondary {
  padding: 8px 24px;
  min-width: 86px;
}

.featured-product-info .featured-product-info-text {
  padding-top: 32px;
  margin-left: 32px;
  gap: 8px;
  display: grid;
}

.featured-product-info-text .productVariantContainer {
  width: 50% !important;
  padding-bottom: 1rem;
}



@media(max-width: 767px) {
  .button-tontainer.product-presentation {
    padding-left: 10px;
  }

  .featured-product-info-text .productVariantContainer {
    width: 100% !important;
    padding-bottom: .7rem;
  }

  .featured-product-info .featured-product-info-text {
    padding-top: 24px;
    margin-left: 0;
  }

  .featured-product-info .counterProdcut .mdl-button.secondary {
    padding: 12px 24px;
    width: 100%;
  }

  .featured-product {
    margin: 32px 8px;
  }

  .featured-product-image {
    border-radius: 8px 8px 0px 0px;
    border: 1px solid var(--neutrals400);
    flex: 0;
  }

  .featured-product-info {
    border-radius: 0px 0px 8px 8px;
    border: 2px solid var(--primary100);
    background: var(--primary100);
    backdrop-filter: blur(21px);
  }

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

  .mdl-indicador-mas-variantes.addToCarBtn {
    flex: 0;
  }

  .img-feadured img {
    height: 15rem;
  }

  .featured-product .mdl-radio {
    margin: 0px;
  }

}

/* ==============================================
       FIN Producto destacado
============================================== */



/* ==============================================
       EVENTOS
============================================== */
.image-and-text-section-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-and-text-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-content-horizontal-banner {
  height: 20rem;
  padding: 0px;
  border-radius: 16px;
}

.horizontal-banner {
  padding-top: 1rem;
}

.horizontal-banner>.custom-row:first-child {
  position: relative;
}

.background-horizontal-banner {
  height: 20rem;
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.horizontal-banner h1.sost-banner__title b {
  width: fit-content !important;
  padding: 0 16px;
  gap: 8px;
}

.icons-events-logo-container img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.float-img-horizontal-banner {
  position: absolute;
  height: 250px;
  left: 45%;
  transform: translateX(-50%);
  top: 30%;
  z-index: 1;
}

.bottom-content-horizontal-banner {
  height: 20rem;
  align-items: center;
  justify-content: center;
}

.bottom-content-horizontal-banner .body-large-regular {
  color: var(--primary1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 27px;
}

.images-horizontal-banner-container {
  display: grid;
  justify-content: center;
  align-items: center;
}

.banner-2-section {
  padding-top: 42px;
}

.banner-2-section .card-banner {
  bottom: -37px;
}

.colored-and-image-section {
  background: var(--primary100);
  padding: 24px 0px;
  margin-top: 42px;
}

@media (max-width: 480px) {
  .colored-and-image-section {
    margin-top: 0px;
  }

  .horizontal-banner h1.sost-banner__title b {
    font-size: 48px !important;
  }
}

.colored-and-image-section .img-container-colored {
  display: flex;
  justify-content: center;
  align-items: center;
}

.colored-and-image-section .text-container-colored>:first-child {
  margin-bottom: 16px;
}

.colored-and-image-section .text-container-colored .h2-bold {
  color: var(--primary800);
}

.colored-and-image-section .text-container-colored p:first-child {
  padding-top: 16px;
}

.colored-and-image-section .text-container-colored p {
  padding-bottom: 16px;
  color: var(--neutrals1000);
}

.colored-and-image-section .text-container-colored ul {
  padding: 0px;
  display: grid;
  gap: 16px;
}

@media (max-width: 480px) {
  .colored-and-image-section .text-container-colored .h2-bold {
    font-family: 'Noto Sans';
    font-weight: 500;
  }

  .colored-and-image-section .img-container-colored {
    margin-bottom: 24px;
  }
}

.circle-img {
  width: 488px;
  height: 488px;
  border-radius: 244px;
  object-fit: cover;
}

.icon-shaer-card-container {
  width: 40px;
  height: 40px;
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 1px solid var(--primary800);
  background: var(--primary800);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5rem;
  position: absolute;
  top: 16px;
  right: 16px;
}

.btn-colored-cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-event-card .h5-bold {
  color: var(--neutrals800);
}

.rectangle-cards-sections .title-seccion {
  flex-direction: column;
  padding-bottom: 48px;
}

.rectangle-cards-sections .title-seccion * {
  color: var(--neutrals900) !important;
  text-align: center;
}

.info-event-card .mdl-card__supporting-text {
  padding: 0px;
}

.info-event-card {
  border-radius: 8px;
  border: 1px solid var(--neutrals400);
  position: relative;
  margin-bottom: 24px;
}

.info-section-card {
  display: grid;
  gap: 4px;
  padding: 16px;

}

.body-small-medium {
  color: var(--neutrals800);
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.info-event-card a {
  color: var(--primary800);
  text-decoration-line: underline;
}

.info-event-card-large {
  border-radius: var(--Spacing-2, 8px) var(--Spacing-2, 8px) 8px 8px;
  border: 1px solid var(--neutrals400);
  max-height: unset;
  height: 97.5%;

}

.info-event-card-large .mdl-card__supporting-text {
  padding: 0px;
  height: 100%;
}

.info-event-card-large .info-section-card {
  border-radius: 0px 0px var(--Spacing-2, 8px) var(--Spacing-2, 8px);
  border-top: 1px solid var(--neutrals400);
  background: var(--primary100);
  backdrop-filter: blur(21px);
  height: 30%;
}

.info-event-card-large .btn-info-event {
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 1px solid var(--primary800);
  background: #fff;
  color: var(--primary800);
}

.btn-info-container {
  text-align: end;
  /* padding-bottom: 24px; */
}

.event-type-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #914BC1;
  border: 1px solid #542874;
}

.event-type-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-and-text-image img {
  border-radius: 16px;
  border: 1px solid var(--neutrals400);

}

.img-logo-col {
  display: flex;
  justify-content: start;
  align-items: center;
}

.img-events-logo-container {
  height: 100px;
  border-radius: 16px;
  background: var(--primary600);
  padding: 16px;
  width: 206px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-events-logo-container img {
  width: 140px;
  height: 49px;
}

.icons-events-logo-container {
  display: flex;
  justify-content: end;
  background: var(--primary100);
  border-radius: 16px;
  aspect-ratio: 1 / 1;
}

.text-horizontal-banner-container {
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.igm-event-card-container {
  height: 70%;
  max-height: 170px;
  overflow: hidden;
}

.igm-event-card-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.mdl-card.info-event-card-large .igm-event-card-container {
  max-height: 600px;
}

.image-and-text-button {
  display: flex;
  justify-content: start;
  align-items: center;
}

.image-and-text-section ul {
  padding: 0px;
  display: grid;
  gap: 16px;
}

@media (max-width: 767px) {
  .image-and-text-button {
    justify-content: center;
  }

  .banner-2-section .title-container {
    padding: 16px 34px;
  }

  .banner-2-section .elipse-container {
    padding: 34px;
  }

  .image-and-text-text {
    padding: 0px 34px;
  }

  .float-img-horizontal-banner {
    top: 30%;
    height: 230px;
    right: -9.2rem;
    left: unset;
  }

  .horizontal-banner {
    overflow-x: hidden;
  }

  .bottom-content-horizontal-banner {
    height: fit-content;
  }

  .top-content-horizontal-banner {
    padding: 0 16px;
    height: 262px;
    position: relative;
  }

  .owl-events .owl-stage {
    display: contents;
  }

  .owl-events .owl-dots {
    display: none;
  }

  .owl-events .owl-item {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text-container-colored {
    padding: 0px 42px;
  }

  .p-sm-1 {
    padding: 1rem;
  }

  .horizontal-banner .mdl-block__container {
    justify-content: center;
  }

  .horizontal-banner.banner-cresiendo .mdl-block__container {
    justify-content: space-between !important;
  }

  .horizontal-banner.banner-cresiendo .p-sm-1,
  .horizontal-banner.banner-cresiendo .sost-banner__title {
    padding: 1rem 0;
  }

  .br-hidden-sm br {
    display: none;
  }
}

@media(max-width: 480px) {
  .horizontal-banner .col-xl-3.col-lg-4:has(.text-alterpos-xs) {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media (max-width: 990px) {
  .noticia-descripcion {
    display: none;
  }

  .image-and-text-image img {
    height: 15rem;
  }

  .image-and-text-image {
    padding: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .info-event-card-large .btn-info-container {
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .info-event-card-large .btn-info-event {
    width: 80%;
  }

  .info-event-card-large {
    height: fit-content;
    margin-bottom: 24px;
  }

  .text-horizontal-banner-container h1,
  .text-horizontal-banner-container h2 {
    color: #fff;
    font-family: Montserrat;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 64px;
    padding: 10px 16px;
  }

  .circle-img {
    width: 300px;
    height: 300px;
  }

  .background-horizontal-banner {
    height: 100%;
    border-radius: 16px;
  }

  .bottom-content-horizontal-banner .body-large-regular {
    margin: 24px 60px;
  }

  .img-logo-col {
    justify-content: center;
  }

  .img-container-colored .mdl-icon-empresarios {
    width: 98px;
    height: 72px;
    top: -10px;
    left: 43px;
  }


}

.title-container .mdl-button.medium {
  padding: 16px;
}

.title-container .h2-bold {
  color: #FFF;
  background: var(--primary600);
  padding: 0px 16px;
}

.carousel-events-section .owl-dot.active span {
  padding: 0px !important;
}

.bottom-content-horizontal-banner .col-md-12 {
  padding: 0px;
}

/* ==============================================
       FIN EVENTOS
============================================== */

/* ========================================================================
      ESTILOS PARA EL COMPONENTE DEL CALENDARIO
========================================================================== */

/* RESPONSIVE */
@media (width < 992px) {
  .mdl-calendar--container {
    flex-direction: column;
  }

  .mdl-listado-calendar {
    justify-content: flex-start;
    gap: 0 !important;
  }

  .mdl-listado-calendar .col-sm-6,
  .mdl-listado-calendar .col-12 {
    margin-bottom: 24px;
  }

  .mdl-btn--date {
    width: 100%;
  }

  .mdl-date-details {
    border-right: none !important;
  }

  .mdl--prev-btn-text,
  .mdl--next-btn-text {
    display: none;
  }

  .mdl-pagination-container .mdl-pagination-btn {
    border: 3px solid var(--primary800) !important;
    border-radius: 100%;
    width: 40px !important;
    height: 40px !important;
    ;
  }

  .mdl-pagination-container #prevBtn::after {
    content: '\f053';
    color: var(--primary800);
    font-family: 'Font Awesome 5 Pro';
    font-weight: 500;
    font-size: 28px;
    top: 8px;
    left: 9px;
    position: absolute;
  }

  .mdl-pagination-container #nextBtn::after {
    content: '\f054';
    color: var(--primary800);
    font-family: 'Font Awesome 5 Pro';
    font-weight: 500;
    font-size: 28px;
    top: 8px;
    left: 12px;
    position: absolute;
  }

  .mdl-pagination-container .mdl-pagination-btn i {
    scale: 0 !important;
    color: var(--primary800) !important;
  }

  .mdl-pagination-container .mdl-pagination-btn:hover {
    background: var(--primary100)
  }

  .mdl-pagination #pageNumbers {
    max-width: 14rem;
  }


}

/* FIN RESPONSIVE */

.mdl-date-info {
  display: flex;
  gap: 24px;
}

#calendar-filters .mdl-select {
  width: 100%;
  justify-content: center;
}

#calendar-filters .custom-row .col-12.mdl-card-filters .custom-row .col-12:first-child {
  margin-bottom: 32px;
}

div#calendar-filters .mdl-card-filters .custom-row>* {
  margin: 8px 0;
}

div#deleteFilterCalendarButtonContainer {
  justify-content: center;
}

div#deleteFilterCalendarButtonContainer>* {
  width: -webkit-fill-available;
  max-width: 266px;
}

div#filterCalendarButtonContainer {
  display: flex;
  justify-content: center;
}

#results-filter-calendar .titleProductsContainer {
  border-bottom: 1px solid #D3D3D3;
  padding: 24px 16px;
}

.mdl-calendar-filter-btn {
  display: flex;
  height: 48px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  width: 100%;
  max-width: 266px;
  display: inline-flex;
}

section#calendar-section {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#calendar-section:not(:has(#results-filter-calendar)) .mdl-listado-calendar>div {
  max-width: 100%;
  width: 100%;
  flex: 0 0 100%;
}

.mdl-calendar-title {
  display: flex;
  gap: 16px;
}

.mdl-pagination-container .mdl-pagination-btn {
  display: flex;
  overflow: hidden;
  color: #595858;
  text-overflow: ellipsis;
  background: white;
  border: none;
  align-items: center;
  position: relative;
  width: 48px;
  height: 48px;
}

.mdl-pagination-container {
  width: 100%;
}

@media (min-width: 920px) {

  .mdl-pagination-btn {
    width: auto !important;
    height: auto !important;
    gap: 8px;
  }
}

.mdl-pagination-container .mdl-pagination-btn i {
  scale: 1.5;
}

.mdl-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.mdl-pagination #pageNumbers {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mdl-pagination-container #pageNumbers span {
  display: flex;
  width: 32px;
  padding: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.mdl-pagination-container #pageNumbers span.current,
.mdl-pagination-container #pageNumbers span:focus {
  border-radius: 4px;
  background: var(--primary800);
  color: #fff;
}

.mdl-pagination-container #pageNumbers span:hover {
  border-radius: 4px;
  background: var(--primary100);
  color: var(--neutral5);
  cursor: pointer;
}

.mdl-listado-calendar {
  justify-content: center;
  gap: 24px;
}

.mdl-calendar--container {
  display: flex;
  padding: 24px;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  border-radius: 16px;
  border: 1px solid #D3D3D3;
  background: #FFF;
}

.mdl-date--calendar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  min-width: 133px;

}

.mdl-date-details {
  display: flex;
  padding: 0 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-right: 1px solid #D3D3D3;
  border-left: 1px solid #D3D3D3;
}

.mdl-flag--calendar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.mdl-date-country,
.mdl-date-modalidad {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mdl-dot-date-modalidad-presencial {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--primary600);
  border: 1px solid var(--primary800);
}

.mdl-dot-date-modalidad-online {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--primary600);
  border: 1px solid var(--primary800);
}

.mdl-calendar-imagen {
  width: 100px;
  height: 100px;
  object-fit: cover;
  background-color: var(--primary600);
  border-radius: 50%;
}

.mdl-date-more-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  flex: 1 0 0;
}

.mdl-date-speaker,
.mdl-date-location,
.mdl-date-title-event {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mdl-date-speaker i,
.mdl-date-location i,
.mdl-date-title-event i {
  color: var(--primary800);
  scale: 1.3;
}

.mdl-btn--date {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mdl-btn--date .h4-bold {
  text-align: right;
}


.mdl-calendar--container.is-expired .mdl-btn--date .mdl-button {
  color: var(--neutral3);
  pointer-events: none;
  cursor: not-allowed;
  border: 1px solid var(--neutral3);
}

.mdl-calendar--container.is-expired .mdl-dot-date-modalidad-presencial {
  background-color: var(--neutral3);
  border: 1px solid var(--neutral3);
}

.mdl-calendar--container.is-expired {
  opacity: 0.5;
}

.mdl-calendar--container.is-expired img {
  filter: grayscale();
}

.mdl-calendar--container.is-expired,
.mdl-calendar--container.is-expired i,
.mdl-calendar--container.is-expired .link-medium {
  color: var(--neutral4) !important;
  cursor: not-allowed;
  pointer-events: none;
}

.mdl-calendar--container .mdl-spent {
  border: 1px solid var(--neutral3);
  color: var(--neutral3);
  pointer-events: none;
  cursor: not-allowed;
}

.mdl-calendar--container .mdl-button .mdl-label {
  display: contents;
}

/* ==========================================================
    FIN DE ESTILOS COMPONENTE DE CALENDARIO
========================================================= */

/* ===============================================================
    INICIO ESTILOS COMPONENTES RALLY, DIA MORADO, TOUR PRENDETE
================================================================== */
.link-medium {
  color: var(--primary800) !important;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  text-decoration-line: underline;
}

.mdl-dia--morado-info-img {
  height: 424px;
  object-fit: cover;
  border-radius: 28px;
  width: 513px;
}

.mdl-dia--morado-info-ubication,
.mdl-dia--morado-info-calendar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.mdl-dia--morado-info-ubication i,
.mdl-dia--morado-info-calendar i {
  scale: 1.3;
  color: var(--primary800);
}

.ctaContainerColored .custom-row.large {
  width: 100%;
}

section#seccion__news-letter .mdl-news--letter {
  text-align: center;
  margin: 48px 0px;
  gap: 16px;
}

section#seccion__news-letter {
  border-top: 1px solid #D3D3D3;
  display: flex;
  flex-direction: column;
}

#seccion__news-letter .bg-primary1.mdl-card {
  max-width: 800px !important;
}

section#seccion__news-letter .mdl-news--letter .col-12 .h3-bold {
  color: var(--neutral5);
}

section#seccion__news-letter form {
  display: flex;
  justify-content: center;
}


.custom-row.mdl-boletos-cards-container {
  justify-content: center;
}

.mdl-flag--calendar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

#seccion__bg--purple {
  display: flex;
  height: 348px;
  align-items: center;
  background: var(--primary100);
  margin-bottom: 130px;
}

#seccion__bg--purple .wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8rem;
  padding: 24px 16px;
}

#seccion__bg--purple .col-lg-7.col-md-7.col-sm-12.col-12 {
  padding-left: 32px;
  border-left: 1px solid var(--primary600);
}

#seccion__bg--purple .cards-testimonios .mdl-card {
  background: #fff !important;
  min-height: auto !important;
}

#seccion__bg--purple .cards-testimonios {
  padding: 0px !important;
}

#seccion__bg--purple p.name-card-testimonios.bodyMediumBold {
  text-align: left;
}

#seccion__bg--purple p.flag-card-testimonios.body-small-regular {
  display: contents;
}

@media (max-width: 480px) {
  #seccion__bg--purple .titulo__bg--purple {
    margin-top: 48px;
  }

  .mdl-dia--morado-info-img {
    object-fit: cover;
    border-radius: 28px;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  #seccion__dia_morado .mdl-img--center {
    padding-bottom: 24px;
  }

  .mdl-dia--morado-info-list .custom-row {
    gap: 32px;
  }

  .mdl-cta-dia-morado .custom-row,
  .mdl-cta-dia-morado .btnNFCat,
  .mdl-cta-dia-morado .btnNFCat .mdl-button {
    width: 100%;
  }

  .mdl-date-info {
    gap: 12px;
    border-bottom: 2px solid #ededed;
    padding-bottom: 8px;
  }

  .mdl-date-details {
    padding: 0 0 0 16px;
  }

  .events-container .title-seccion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
  }

  .events-container .title-seccion>* {
    text-align: center;
  }
}

.events-container #seccion__news-letter .h3-bold .color-primary3 {
  /*color: var(--primary600) !important;*/
  color: var(--neutrals1000) !important;
}

.mdl--img-globos-rally {
  width: 397px;
  height: 428px;
  position: absolute;
  right: 0;
  bottom: 15px;
}

@media (max-width: 768px) {
  .mdl--img-globos-rally {
    display: none;
  }

  .mdl-filters .custom-row {
    gap: 32px;
  }

  #seccion__news-letter .ctaContainerColored .custom-row {
    width: 92% !important;
  }
}

#seccion__news-letter .h3-bold {
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

#seccion__news-letter .ctaContainerColored .custom-row {
  width: 800px;
  padding: 32px;
}

#seccion__news-letter .ctaContainerColored {
  height: auto;
}

#seccion__mapa_gira #mapa-gira--filters .mdl-filters {
  margin: 48px 0px;
}

.omnilife-v2.events-container {
  display: flex;
  flex-direction: column;
  gap: 48px;
  /*El gap en los sections de las vistas reportadas a liryam, 48 es el correcto no 16*/
  overflow-x: hidden;
  -ms-overflow-x: hidden;
}

.omnilife-v2.events-container #home-empresarios {
  padding: 0 !important;
  margin: 0 !important;
}

.omnilife-v2.events-container #home-empresarios .bg-block {
  margin-top: 0 !important;
}

.omnilife-v2.events-container .banner-2-section {
  padding-top: 0 !important;
}

@media (max-width: 480px) {
  .omnilife-v2.events-container {
    padding: 0 16px;
    gap: 24px;
    margin-top: 7rem !important;
    padding-top: 0px;
  }

  .omnilife-v2 .events-container .breadcrumbs {
    padding-top: 2rem !important;
    padding-left: 1rem !important;
  }

  .omnilife-v2.events-container.pt-4 {
    padding-top: 0px;
  }

  .omnilife-v2 .mdl-full--width {
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  .events-container .title-container,
  .events-container .elipse-container {
    padding: 0 16px;
  }

  .omnilife-v2.events-container section {
    margin-bottom: 0px;
  }
}


@media (max-width: 840px) {
  .omnilife-v2 .mdl-news--letter-colored {
    display: grid;
    width: 80%;
  }

  .omnilife-v2 .mdl-news--letter-input {
    display: grid;
    place-items: center;
    gap: 24px;
  }

  .omnilife-v2 .mdl-news--letter-input .mdl-textfield__input {
    width: auto !important;
  }
}

@media (min-width: 841px) {
  .omnilife-v2 .mdl-news--letter-colored {
    display: flex;
    width: 800px;
    padding: 32px;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 24px;
    border-radius: 16px;
    background: var(--primary100);
  }

  .omnilife-v2 .mdl-news--letter-input {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .omnilife-v2 .mdl-cta-dia-morado .custom-row {
    width: 90% !important;
    padding: 32px;
    max-width: 1400px;
  }
}

.omnilife-v2 .mdl-news--letter-colored {
  padding: 32px;
  justify-content: center;
  align-items: center;
  align-self: center;
  gap: 24px;
  border-radius: 16px;
  background: var(--primary100);
}

.omnilife-v2 .mdl-news--letter-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}



.omnilife-v2 .mdl-news--letter-input .mdl-textfield__input {
  width: 406px;
  height: 56px;
}

.omnilife-v2 .mdl-news--letter .mdl-button--subcribe {
  display: flex;
  height: 48px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.omnilife-v2 .mdl-img--center {
  display: flex;
  justify-content: center;
  height: 100%;
}

.carousel-events-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
}

.mdl-dates-content .h2-bold {
  text-align: center;
}

/* =====================================================
      FIN ESTILOS COMPONENTES RALLY , DIA MORADO, TOUR PRENDETE
   =====================================================
*/



/* =====================================================
      Template EXTRAVAGANAS 2025
   =====================================================
*/

.omnilife-v2.template-xtrvgns {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#xtrvgns-intro {
  margin-top: -48px;
}

#xtrvgns-main-banner {
  padding: 90px 0;
  color: #fff;
  min-height: 500px;
  background-size: cover;
  overflow: hidden;
  background-position: center;
  margin-top: -24px;
}

#xtrvgns-main-banner .bannerTitle .h2-bold {
  background: var(--primary600);
  color: #fff;
  padding: 6px 20px;
}


#xtrvgns-main-banner .bannerInfo .h2-bold {
  display: flex;
  gap: 20px;
  color: #fff;
}

#xtrvgns-main-banner .bannerInfo i {
  text-align: center;
  display: inline-block;
  width: 50px;
}

#xtrvgns-intro .bg-block {
  height: auto;
  background: var(--primary100);
  border-radius: 32px 32px 0 0;
  min-height: 400px;
  width: 100%;
  position: relative;
  margin: auto;
  margin-top: 50px;
  padding: 32px;
}

img.xtrvgns-intro-img {
  border-radius: 100%;
  max-width: 480px;
  margin: auto;
  width: 100%;
}

.xtrvgns-icons-container img {
  min-width: 90px;
  width: 70%;
  margin: auto;
}

.xtrvgns-icons-container {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-around;
}

#xtrvgns-intro .xtrvgns-icons-container {
  margin-top: -90px;
  margin-bottom: -160px;
  min-height: 200px;
}

#xtrvgns__highlights iframe {
  border-radius: 10px;
}

.icon-rotate-1 {
  animation: rotate-1 10s ease 0s infinite normal forwards;
}


#xtrvgns__country-details {
  border-radius: var(--Radius-Radius-xl, 16px);
  background: linear-gradient(180deg, #FFEEDB 0%, #FFF 100%);
}

#xtrvgns__country-selection #dynamic-content {
  width: 100%;
}

#xtrvgns__country-selection h2#dynamic-title span {
  color: var(--primary600);
}

.card-formas-compras-icon figure img {
  width: 60px !important;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.card-formas-compras-icon figure {
  overflow: hidden;
  border-radius: 100%;
}

/* xtrvgns countdown */
.mdl-countdown {
  border-radius: var(--Radius-Radius-2xl, 32px);
  background: linear-gradient(180deg, #66308C 52.59%, #FEAA49 180.92%);
  padding: 24px;
}

.mdl-countdown .h3-bold {
  color: #fff;
  margin: auto;
  text-align: center;
  padding: 24px;
}

.mdl-countdown .countdown-timer {
  animation: fadeIn 2s ease-in-out;
  color: #fff;
  width: 100%;
}

.mdl-countdown .countdown-timer .mdl-countdown__items {
  display: flex;
  justify-content: space-evenly;
  gap: 42px;
}

.mdl-countdown__timer {
  border-radius: 25px;
  margin: auto auto 15px auto;
  text-align: center;
  transition: opacity 0.7s ease-in-out;
  position: relative;
}

.mdl-countdown__timer .deadline-label {
  color: #fff;
  font-size: 12px;
  margin-bottom: 5px;
  margin-right: 10%;
  text-align: right;
  text-transform: uppercase;
}

.mdl-countdown .countdown-timer .date-item {
  background-color: #fafafa52;
  color: #fff;
  text-align: center;
  border-radius: 7.302px;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0.10) 0%, rgba(250, 250, 250, 0.10) 100%), rgba(255, 255, 255, 0.02);
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  position: relative;
}


.mdl-countdown .date-item.day {
  display: flex;
  padding: 8px 42px;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--primary100);
}


.date-item.day:after {
  content: '';
  border-right: 1px solid;
  height: 100%;
  width: 1px;
  position: absolute;
  right: -13%;
}


.date-item.hour:after,
.date-item.minute:after {
  content: ':';
  position: absolute;
  margin-right: 44px;
  font-size: 70px;
  right: -75px;
}

h4.mdl-countdown__title:before,
h4.mdl-countdown__title:after {
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/deco-star.svg);
  content: '';
  width: 45px;
  height: 45px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 0px;
  background-size: cover;
  filter: grayscale(100%) brightness(100);
  animation: rotate-2 20s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s infinite normal both;
  margin: 0 20px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes rotate-1 {
  0% {
    transform: rotate(0);
  }

  80% {
    opacity: 0;
  }

  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

.icon-rotate-2 {
  animation: rotate-2 20s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s infinite normal both;
}

@keyframes rotate-2 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* =====================================================
     DRAWER ZONA EMPRESARIOS
   =====================================================
*/
.mdl-button.linkMedium[disabled][disabled] {
  background-color: transparent !important;
}

#drawer-ZE .mdl-layout-title {
  padding: 20px 16px 16px 16px;
  display: flex;
  line-height: inherit;

}

#drawer-ZE .mdl-layout-title-name {
  border-bottom: 1px solid var(--primary800);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  gap: 30px;
  padding-left: 30px;

}

#drawer-ZE .mdl-block .mdl-button {
  border-radius: 0px;
}

#drawer-ZE .mdl-block .mdl-button a {
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
}

#drawer-ZE a {
  color: var(--primary800) !important;
}

#drawer-ZE .mdl-block {
  display: grid;
  color: var(--primary800);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  padding: 10px 20px !important;
}

#drawer-ZE .mdl-block span {
  min-height: 50px;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 16px
}

.empresario-code-text {
  color: var(--primary1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
}

.topNavContainerDesktop {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/*
  NUEVOS ESTILOS PARA ASIDE DE CATEGORIAS DE PRODUCTOS
*/

.level-categorias,
.level-subcategorias {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0 16px
}

.mdl-title-category-container,
.mdl-title-subcategory-container {
  display: flex;
  padding: 8px 16px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  justify-content: space-between;
  cursor: pointer;
}


.mdl-title-category-container {
  border-bottom: 1px solid var(--neutrals400);
}

.mdl-accordion__content.level-categorias {
  padding: 0px;
}

.filters-categorias-btns,
.filters-products-btns {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 920px) {

  .filters-categorias-btns,
  .filters-products-btns {
    justify-content: space-around;
    flex: 0 0 100%;
  }

  .filters-categorias-btns button {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {

  .filters-container div.button-container {
    width: 100%;
    justify-content: space-around;
  }
}

.pplContainer .breadcrumbs {
  padding: 0px !important;
  width: auto;
}

.pplContainer .cardProducts .mdl-card__actions {
  display: flex !important;
}



.xtrvgns__bg-gradient {
  background: rgb(255, 238, 219);
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgba(255, 255, 255, 1) 100%)
}

.mdl-card-icon {
  display: flex;
  min-width: 176px;
  min-height: 192px;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-radius: var(--Radius-Radius-xl, 16px);
  border: 1px solid var(--neutrals400);
  background: #fff;
  max-width: 70%;
  text-align: center;
  justify-content: space-around;
  color: var(--primary800);
}

.mdl-card-icon:hover {
  border: 1px solid var(--primary800);
}

.owl-default .owl-stage {
  display: flex;
}

.mdl-card-icon .card-icon {
  background-color: var(--primary100);
}


.owl-default .owl-nav {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  margin-bottom: -36px;
}

.owl-default .owl-nav button.owl-prev {
  position: absolute;
  top: 40%;
  left: -15px;
}

.owl-default .owl-nav button.owl-next {
  position: absolute;
  top: 40%;
  right: -15px;
}

.owl-default button.owl-next span,
.owl-default button.owl-prev span {
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 3px solid #66308C !important;
  background: #fff;
}

.owl-default button.owl-next span,
.owl-default button.owl-prev span {
  color: transparent !important;
  background: white;
}


.owl-default .owl-theme .owl-nav.disabled,
.owl-default .owl-theme .owl-nav.disabled {
  opacity: 1 !important;
  cursor: default;
}

.owl-default button.owl-next span:after {
  content: 'a';
  content: '\f105';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -32px;
  position: relative;
}

.owl-default button.owl-prev span:after {
  content: 'a';
  content: '\f104';
  color: var(--primary600);
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: inline-block;
  padding: 8px;
  width: 40px;
  font-size: 40px;
  height: 40px;
  border-radius: 20px;
  top: -32px;
  left: -3px;
  position: relative;
}

.owl-default .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px 0;
}

.owl-default button.owl-next span:active,
.owl-default button.owl-prev span:active {
  box-shadow: 0 5px 10px -4px var(--primary800);
}

.owl-default button.owl-next span:hover,
.owl-default button.owl-prev span:hover {
  background-color: var(--primary100) !important;
  box-shadow: 0 10px 10px -10px;
}

.owl-default .owl-item {
  display: flex;
  justify-content: center;
}

#tickets-available .mdl-btn--date {
  flex: 1;
}

#no-tickets-available {
  display: none;
}

#no-tickets-available.active {
  display: block;
}

.mdl-event-info--container {
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #D3D3D3;
  background: #FFF;
  margin-top: 8px;
}

.mdl-event-price {
  color: var(--primary700);
}

.mdl-event-info--container.mdl-calendar--container {
  display: block;
}

.mdl-event-info--container .mdl-date-details {
  border-left: none;
}

#country-highlights .mdl-card .mdl-card-info {
  display: flex;
  width: 100%;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  position: absolute;
  bottom: 0px;
  border-radius: var(--Radius-Radius-xl, 16px);
  background: var(--primary100);
  opacity: 1;
}

#seccion__suplementos .mdl-card .mdl-card-info {
  display: flex;
  width: 100%;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  bottom: 0px;
  background: var(--primary100);
  opacity: 1;
  border-radius: 0;
  height: 100%;
  border: none;
}

#seccion__suplementos .mdl-card .mdl-card-info .mdl-card-info-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#seccion__suplementos .owl-carousel .owl-item img {
  border-radius: 0 !important;
  aspect-ratio: 1 / 1;
}

#country-highlights .mdl-card .mdl-card-info h3.body-medium-bold {
  color: var(--primary700);
}

#country-highlights .mdl-card {
  min-height: 300px;
  max-height: 400px;
  margin-top: 16px;
}

#xtrvgns__galery .xtrvgns-icons-container {
  overflow: hidden;
  max-height: 100px;
  display: flex;
  align-items: flex-start;
  padding-top: 20px;
  justify-content: space-around;
}

.xtrvgns-icons-container figure {
  flex: 1;
  max-height: 200px;
}

/* col-md */
@media (max-width: 768px) {
  .custom-container {
    max-width: 720px;
  }

  .mdl-countdown .countdown-timer .mdl-countdown__items {
    gap: 16px;
  }

  .date-item.hour:after,
  .date-item.minute:after {
    right: -62px;
  }

  .mdl-countdown,
  .mdl-countdown .h3-bold {
    padding: 8px;
  }
}

/*
    NUEVOS CAMBIOS EN PDP (DETALLE DEL PRODUCTO)
  */

.mdl-card__prices {
  display: flex;
  flex-direction: column;
}

.mdl-card__actions.mdl-card-price-points {
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  gap: 8px;
}

.detalle-product-puntos {
  background-color: var(--primary100);
  max-width: max-content;
}

.detalle-product-puntos .puntos-info div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

#product-detail span#select2--container {
  padding-top: 10px;
}

#product-detail .select2-selection__arrow {
  top: 10px;
  right: 5px;
}

.products-complementarios-container {
  width: 100%;
}

.products-complementarios-container .col-product {
  padding: 0px;
}

.products-complementarios-container .owl-productos-complementarios .col-product .cardImg {
  object-fit: contain !important;
}

.pb-3 {
  padding-bottom: 3rem !important;
}

.mdl-layout__drawer-right.active h2.color-primary {
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}


/* =====================================================
      FORTALECER MI NEGOCIO
   =====================================================
*/
.omnilife-v2.pt-1.fortalecer-mi-negocio__container .h3-bold {
  /*color: var(--primary800)!important;*/
  /*Los titulos de cada paso y Recursos para el 1º Paso es gris de a cuerdo a la maqueta*/
}

.omnilife-v2.pt-1.fortalecer-mi-negocio__container section {
  padding: 1rem;
}

/*.omnilife-v2.pt-1.fortalecer-mi-negocio__container {
  padding-top: 4rem !important; Ya no es necesario este padding
}*/

.fortalecer-mi-negocio__container .elipse-container a {
  display: block !important;
}

figure.img-circled-bg:before {
  background: #00000042;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  z-index: 1;
}

figure.img-circled-bg img {
  position: relative;
  z-index: 2;
}

figure.img-circled-bg {
  padding: 24px;
}

.mdl-circle-number p {
  text-align: center;
  font-family: Montserrat;
  font-size: 128px;
  font-style: normal;
  font-weight: 700;
  line-height: 80px;
}

.mdl-circle-number {
  background-color: var(--primary100);
  height: 120px;
  width: 120px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary800);
  flex: none;
}

.mdl-block.left-border {
  border-left: 1px solid var(--primary700);
  border-radius: 0;
}

.mdl-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.mdl-counter .mdl-block {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.mdl-counter .h3-bold {
  color: var(--neutrals900);
}

.owl-fort-negocio__descargables .mdl-card-icon {
  min-width: 200px !important;
  padding: 24px 8px;
}

/*
  ACADEMIA CRESIENDO
*/

.banner-cresiendo .icons-events-logo-container img {
  padding: 10px;
  animation: rotate-2 20s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s infinite normal both;
}

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

.card-plantas.mdl-card-niveles-academia img {
  height: 280px;
}

.mdl-card-niveles-academia .mdl-card__actions {
  justify-content: end;
}

.mdl-card-niveles-academia .card-plantas-info-container,
.mdl-card-niveles-academia .card-plantas-info {
  height: 100%;
  word-break: break-word;
}

.d-content {
  display: contents;
}

.mdl-entrenamiento-negocio-container {
  display: flex;
  padding: 24px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}

#seccion__big_card .mdl-card {
  border: 1px solid #D3D3D3;
}

#seccion__big_card .mdl-card .custom-row:first-child {
  height: 100%;
}

#seccion__big_card .mdl-card .mdl-card__actions {
  justify-content: flex-start;
  flex-wrap: wrap-reverse;
}

#seccion__big_card .mdl-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#country-highlights.most-wanted .owl-cresiendo-virtual .owl-item .mdl-card {
  height: 280px !important;
  width: 280px !important;
}

#country-highlights.most-wanted .mdl-card img {
  object-fit: cover !important;
}

.mdl-cards-cresiendo-virtual--info .register-client-list {
  height: 100%;
  width: auto;
}

@media only screen and (max-width: 992px) {
  .mdl-cards-cresiendo-virtual--info #info-benefits-client {
    display: grid;
    padding: 0;
  }

  .mdl-cards-cresiendo-virtual--info .custom-row {
    gap: 16px;
  }

  .mdl-cards-cresiendo-virtual--info .register-client-list {
    border: 1px solid var(--neutrals400) !important;
  }

  .mdl-cards-cresiendo-virtual--info .register-client-list:first-of-type .title-benefits {
    box-shadow: none;
    border-bottom: none;
    padding: 0
  }

  .mdl-cards-cresiendo-virtual--info .register-client-list li {
    margin-left: 0;
  }

  .mdl-arrowbox-left:after,
  .mdl-arrowbox-right:after {
    bottom: 100% !important;
    left: 50% !important;
    border: solid transparent !important;
    content: "";
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff !important;
    border-width: 10px !important;
    margin-left: -10px;
    top: -10px !important;
  }


}

@media (min-width: 768px) {
  #seccion__cta .ctaContainerColored .custom-row:not(:has(.btnNFCatContainer))>*:last-child {
    flex: 0 0 90%;
    max-width: -webkit-fill-available;
  }
}

.mdl-banner__cresiendo .mdl-big-banner .mdl-big-banner__content .mdl-list span.mdl-list__item-primary-content {
  display: flex;
}

#seccion__cta .ctaContainerColored .custom-row {
  padding: 32px;
  max-width: 1005px;
}

#seccion__cta .ctaContainerColored .btnNFCatContainer {
  justify-content: flex-end;
}

#seccion__cards_modulos .mdl-card {
  border: 1px solid #B3B3B3;
}

#seccion__cards_modulos .seccion__formas-compra-3 {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

#seccion__cards_modulos .mdl-card .cards-accordion-formas-compra {
  border-radius: var(--Radius-Radius-md, 8px);
  border: 1px solid var(--primary100);
  background: #fff;
  box-shadow: 0px 16px 24px -16px rgba(89, 88, 88, 0.10);
  padding: 16px;
}

#seccion__cards_modulos .seccion__formas-compra-3 .cards-accordion-formas-compra .mdl-accordion {
  align-self: center;
}


.mdl-card.mdl-about--level figure {
  height: 280px;

}

.mdl-about--entrenamientos-cresiendo figure iframe {
  height: 100%;
}

@media (width <=768px) {
  .mdl-about--entrenamientos-cresiendo figure {
    height: 240px !important;
    max-height: 280px;
  }

  #seccion__big_card .mdl-card .mdl-card__actions .mdl-button {
    width: 100%;
  }

  #seccion__cta .ctaContainerColored .btnNFCat {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .mdl-card-niveles-academia .mdl-card__actions>* {
    width: 100%;
  }

  #seccion__desarrollo_personal .mdl-counter {
    flex-direction: column;
  }
}

#seccion__desarrollo_personal .mdl-counter .mdl-block h2 {
  text-align: start;
}

#seccion__desarrollo_personal .mdl-counter {
  justify-content: flex-start;
}

/*
  ESTILOS SELECT ORDENAR POR
*/

/* Estilos básicos del dropdown */
.mdl-dropdown {
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
}

/* Estilos del botón */
.mdl-dropdown-btn {
  background-color: #fff;
  color: var(--neutral);
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 12px;
}

.mdl-dropdown-btn:disabled span {
  color: #D3D3D3 !important;
}

.mdl-dropdown-btn:disabled i {
  color: #D3D3D3 !important;
}

/* Estilos del menú */
.mdl-dropdown-menu {
  display: none;
  position: absolute;
  margin-top: 8px;
  right: 0;
  border-radius: 4px;
  z-index: 1;
  width: 210px;
  min-width: 112px;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 0px;
  align-items: flex-start;
  background: var(--neutrals100);
  /* M3/Elevation Light/2 */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
}

/* Estilos de los elementos del menú */
.mdl-dropdown-item {
  padding: 10px 20px;
  cursor: pointer;
  color: #333;
  transition: background-color 0.3s;
  display: block;
  width: 100%;
}

.mdl-dropdown-item:hover {
  background-color: #f0f0f0;
}

/* Animación del icono cuando el menú está abierto */
.mdl-dropdown.open .fa-chevron-down {
  transform: rotate(180deg);
}

.mdl-dropdown .fa-chevron-down {
  transition: transform 0.3s ease;
  /* Aplica la transición */
}

/* ESTILOS PARA EL BUSCADOR DE PRODUCTOS */
.filters-container .searchSectionInputContainer {
  flex: 1 0 0;
  justify-content: end;
}

@media (width <=920px) {
  .filters-container .searchSectionInputContainer {
    display: none;
  }
}

/*Buscador */
.img-result-search {
  width: 7rem;
}

#btnLoginMobile {
  padding: 10px;
}

#btnLoginMobile .circle-element-ze {
  border: 2px solid var(--primary800);
  width: 2.5rem;
  height: 2.5rem;

}

#btnLoginMobile .mdl-button {
  padding: 0px;
}

.circle-element-ze {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--primary800);
  border-radius: var(--Radius-Radius-circle, 100px);
  display: flex;
  background: #EDE1F5;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.topNavContainerDesktop #btnLogin.mdl-button {
  padding: 8px 24px;
}

.name-initials-container {
  display: none;
}

.img-distributor-image {
  width: 100%;
  min-width: 40px;
  border-radius: var(--Radius-Radius-circle, 100px);
}

.img-distributor-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--Radius-Radius-circle, 100px);
  padding: 1.5px;
}

.search-result.product .mdl-cell.mdl-cell--2-col {
  display: flex;
  justify-content: center;
  align-items: center;

}

.search-result.product .col-12.col-md-4 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#global-search-container {
  overflow: scroll;
}

.result-name {
  text-decoration: underline;
  color: var(--primarycolor);
}

.search-row {
  display: flex;
}

h3.search-row,
h3.search-row a {
  color: var(--primarycolor);
}

.result-meta-desc,
.search-row-description,
.result-description {
  color: var(--neutrals900);
  padding: 10px;
}

#global-search-empty .result-name,
#global-search-error .result-name {
  color: var(--neutrals900);
  text-decoration: none;
}

#global-search-empty .search-row-description,
#global-search-error .search-row-description {
  color: var(--primarycolor);
}

.search-results {
  border-radius: 20px;
}

.search-results h3 a {
  color: var(--primarycolor);
}

@media (max-width: 990px) {
  .name-initials-container {
    display: flex;
  }

  .img-distributor-icon {
    display: none;
  }

  .search-results {
    width: 97%;
    margin: 8px auto 0;
  }

  .searchSectionInputContainer {
    height: fit-content;
  }

  .search-row {
    display: grid !important;
  }

  .result-meta-desc {
    font-size: 14px;
    padding: 0px;
    text-align: justify;
  }

  .result-description {
    padding: 0px;
    font-size: 14px;
  }

  .search-result.product .search-row-description {
    display: none;
  }

  .cedis-result .search-row-description {
    display: block !important;
  }

  .cedis-result .search-row-description {
    display: block !important;
  }

  .page-result .search-row-description {
    display: block !important;
  }

  .search-result.product>div:first-child {
    display: grid !important;
    /* Asegúrate de que el contenedor use grid */
    grid-template-columns: 30% 70% !important;
  }

  .search-result h3.search-row small.description,
  .search-result .small-label.default {
    width: fit-content;
    padding: 2px 13px !important;
  }

  .search-result.product>div>div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-row {
    gap: 7px;

  }

  .search-result.product .col-4.col-md-2 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-result.product a {
    margin-left: 0px !important;
  }
}

.search-result.product a {
  margin-left: 1rem;
}

.search-result.product .categoryCardContainer {
  text-decoration: underline;
}

.search-result.product .categoryCardContainer .nameCategory {
  color: var(--primarycolor) !important;
}

.search-result.product>div>a:first-of-type {
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-title .search-row {
  font-size: 1.375em !important;
}

.search-result.product div>div h3 {
  font-size: 1.125em !important;
  display: flex;
  width: 100%;
  align-items: center;
}

.search-result.product a h3 {
  font-size: 1.125em !important;
}

.bg-circle2 {
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/element-deco.svg);
  background-repeat: no-repeat;
  background-position: 90% 10px;
  background-size: 33%;
  padding: 40px 16px;
  display: flex !important;
}

.bg-circle2 .half-round-container {
  margin-top: -10rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

/* =====================================================
      SOSTENIBILIDAD
   =====================================================
*/

#banner-sostenibilidad .mdl-card {
  max-height: 320px;
  justify-content: end;
}

#banner-sostenibilidad .mdl-block__container .mdl-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mdl-block__container {
  gap: 1rem;
  display: flex;
}

.mdl-outline {
  border-radius: 16px;
  border: 1px solid var(--neutral3);
  overflow: hidden;
}

.revive-img {
  max-height: 70px;
}

.mdl-arrowbox-left,
.mdl-arrowbox-right {
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 20px -2px rgb(89 88 88 / 40%);
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.mdl-arrowbox-left:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #ffffff;
  border-width: 10px;
  margin-top: -10px;
}

.mdl-arrowbox-right:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #ffffff;
  border-width: 10px;
  margin-top: -10px;
}

#sost__ejes .mdl-card {
  display: flex;
  justify-content: center;
}

/* ==============================================
    ESTILOS PAGINA CUIDAR MI SALUD
=============================================== */
#seccion__suplementos .text-container,
#seccion__cosmeticos .text-container {
  display: flex;
  padding-left: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  border-left: 1px solid var(--primary600);
}

#seccion__cosmeticos {
  background-color: #F7F6F6;
  padding: 72px 0px;
}

#seccion__suplementos .mdl-card {
  max-width: 300px;
  /* max-height: 470px; */
}

#seccion__suplementos .mdl-button {
  padding: 12px 24px;
}

.cards-container-salud {
  display: flex;
  align-items: stretch;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

.cards-container-salud .mdl-card-icon {
  max-width: 314.667px;
  ;

}


.cards-categorias-seytu {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  justify-content: space-evenly;
}

.cards-categorias-seytu .mdl-card-icon {
  flex: 1 0 0;
  max-height: 224px;
}

.cards-categorias-seytu .cards-container {
  display: flex;
  gap: 20px;
  width: 100%;
}

.cards-categorias-seytu .mdl-card-icon .mdl-button,
.cards-categorias-seytu .mdl-card-icon h3.body-medium-bold {
  width: max-content;
}

.cards-categorias-seytu .mdl-card-icon .card-icon .mdl-thumb {
  border-radius: 50%;
}



.mdl-cards-salud .card-plantas-info-container {
  padding: 24px 16px;
}

.mdl-cards-salud img {
  min-height: 280px;
  object-fit: cover;
}

.mdl-product--bg {
  background-color: var(--primary200);
  transition: background-color 0.3s ease;
  max-width: 280px;
  /* Transición suave del fondo */
}

.mdl-product--bg .body-medium-bold {
  color: var(--primary800);
}

.mdl-product--bg {
  position: relative;
  overflow: hidden;
  /* Asegura que las imágenes no salgan del contenedor */
  display: flex;
  justify-content: center;
  align-items: center;
}

.mdl-product--bg img {
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%) scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mdl-product--bg img.mdl-product-image {
  opacity: 1;
  /* Primera imagen visible por defecto */
  z-index: 1;
}

.mdl-product--bg img.mdl-product-image-back {
  opacity: 0;
  /* Segunda imagen oculta por defecto */
  z-index: 0;
  transform: translateX(-50%) scale(1);
  transition: var(--transition);
}

.mdl-product--bg:hover img.mdl-product-image,
.mdl-product--bg:focus img.mdl-product-image {
  opacity: 0;
  /* Oculta la primera imagen en hover o focus */
  z-index: 0;
}

.mdl-product--bg:hover img.mdl-product-image-back,
.mdl-product--bg:focus img.mdl-product-image-back {
  opacity: 1;
  z-index: 1;
}

.owl-formatos-suplementos .mdl-card .mdl-card-info {
  z-index: 2;
}

#seccion__cards .bg-big-circle {
  right: -180px;
  top: -50px;
  z-index: -1;
}

@media (max-width: 480px) {
  #seccion__cards .bg-big-circle {
    display: none;
  }
}

.cards-container-salud .img-deco-left {
  width: 45vh;
  height: 45vh;
  position: absolute;
  left: -75px;
  top: -115px;
  z-index: -1;
}

.cards-container-salud .img-deco-rigth {
  width: 45vh;
  height: 45vh;
  position: absolute;
  right: -50px;
  z-index: -1;
}

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  flex: 1 0 0;
  align-self: stretch;
}

.owl-categorias-omnilife .owl-item {
  display: flex;
  justify-content: center;
}

.owl-categorias-omnilife .owl-stage {
  display: flex;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  #seccion__cosmeticos .wrapper {
    padding: 0 16px;
  }

  #seccion__cosmeticos .cards-categorias-seytu {
    padding-top: 32px;
  }

  .cards-categorias-seytu .mdl-card-icon {
    min-width: 167px;
    max-width: 167.5px;
  }

  .cards-categorias-seytu .cards-container {
    gap: 8px;
    justify-content: center;
    /*Silver: Fix cards en cuidar bienestar*/
  }

  #seccion__cosmeticos .mdl-product__labels img.labels__img {
    margin-right: 5px;
  }

  #seccion__cards .cards-container {
    gap: 28px;
  }
}

@media (width >=768px) {
  #seccion__cards .cards-container>* {
    padding-bottom: 16px;
  }
}

@media (max-width:768px) {
  .omnilife-v2.sostenibilidad h1.sost-banner__title:first-child b {
    font-size: 35px;
  }

  .omnilife-v2.sostenibilidad h1.sost-banner__title b:nth-child(2) {
    font-size: 48px !important;
  }
}

h1.sost-banner__title {
  color: var(--primary600);
  font-size: 48px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 1rem;
}

h1.sost-banner__title b {
  background-color: var(--primary600) !important;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: 64px;
  padding: 1rem;
  background-color: var(--primary600) !important;
  color: #fff;
}

h1.sost-banner__title:first-child b {
  font-size: 48px;
}

h1.sost-banner__title b:nth-child(2) {
  font-size: 64px;
  font-weight: 700;
  line-height: 80px;
}

.mdl-title b {
  color: var(--primary600);
}

.infoCardContainer li.mdl-list__item {
  align-items: flex-start;
  -webkit-align-items: start;
  -ms-flex-align: start;
}

#xtrvgns-main-banner h1.sost-banner__title b {
  font-size: 48px;
  font-weight: 700;
  line-height: 64px;
  padding: 6px 20px;
}

#xtrvgns-main-banner h1.sost-banner__title {
  display: inline-flex;
  gap: 16px;
  align-items: flex-start;
}

/*RECONOCIMIENTOS*/

.rec-contaner-title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
}

@media (max-width: 920px) {
  .dont-have-address .mdl-button.link.p-0 {
    justify-content: start;
  }

  .search-container-elements {
    padding: 0px 5px;
  }

  .mtp-earnings {
    padding: 0px;
  }

  .mdl-table tr:last-child td:first-child {
    max-width: 55%;
  }

  .mdl-table tr:last-child td:last-child {
    padding: 0px;
  }
}

.reconocimientos-container .rectangle-section {
  margin-bottom: 3rem;

}

.info-reconocimientos-section .rectangle-section {
  width: 80%;
}

.info-reconocimiento-container-millonarios {
  padding: 10px 10px !important;
}

.mdl-table-mobile {
  display: none;
}

.rectangle-section {
  border-radius: 8px;
  border: 1px solid var(--neutrals400);
}

.video-container {
  position: static;
}

.video-container iframe,
.video-container img {
  height: 20rem;
  width: 100%;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.countdown-section {
  padding: 4rem;
}

.galery-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mdl-table-mobile tr {
  display: inline-table;
}

.galery-container .custom-row {
  width: 75%;
}

.galery-container .owl-carousel.owl-drag .owl-item {
  width: 350px;
  height: 350px;
}

.col-12 .owl-niveles .owl-stage .owl-item:last-child {
  margin-right: 18px;
}

.galery-container .owl-nav {
  position: relative;
}

.galery-container .mdl-carousel .owl-stage-outer {
  padding-top: 3rem;
  margin-right: -6px;
}



.section-cards-levels .mdl-card-consejo {
  margin-left: 5rem;
}

.galery-container-rec .owl-carousel .owl-item {
  margin-left: 0.5rem;
}

.galery-container .owl-prev {
  position: absolute;
  left: -5rem;
  top: -13.5rem;
}

.galery-container .owl-next {
  position: absolute;
  right: -1rem;
  top: -13.5rem;
}

@media (max-width: 990px) {
  .col-md-9 .owl-carousel .owl-stage-outer {
    padding: 0px !important;
  }

  .owl-galery-photos .owl-next {
    right: -3rem;
  }

  .owl-galery-photos .owl-prev {
    left: -2.8rem;
  }

  .owl-niveles .owl-next {
    right: -1rem !important;
  }

  .owl-niveles .owl-prev {
    left: -7px !important;
  }
}

.owl-niveles .owl-next {
  position: absolute;
  top: 44%;
  right: -4rem;
}

.owl-niveles .owl-next span {
  border: 2px solid #66308C !important;
  color: var(--primary) !important;
  background-color: white;
}

.owl-niveles .owl-next span:hover {
  background: var(--primary100) !important;
}

.owl-niveles .owl-prev {
  position: absolute;
  top: 44%;
  left: 1rem;
}

.col-md-9 .owl-niveles .owl-prev {
  left: -4rem;
}

.reconocimientos-container .rectangle-section {
  height: 20rem;
}

.rectangle-section .custom-row {
  height: 100%;
}

.reconocimientos-container .rectangle-section .custom-row {
  height: fit-content;
}

.video-container img {
  height: 100%;
}

.rectangle-section .video-container img {
  height: 19.9rem;
}

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.reconocimientos-container .mdl-countdown .h3-bold {
  padding: 12px;
}

.reconocimientos-container .card-select-country .button-container .mdl-button {
  min-width: 11rem;
}

.filter-rec-container {
  margin: 0px 8.5rem;
}

.filter-rec-container .h3-bold {
  padding-left: 5.5rem;

}

.filter-rec-container .select2-container {
  min-width: 17rem;
}

.filter-rec-container .searchSectionInputContainer {
  width: 20rem;
}

.filter-rec-container .searchSectionInputContainer .searchContainer {
  display: inline-flex;
  border: 1px solid var(--primary800);

}

.filter-rec-container .select2-container--default .select2-selection--single {
  height: 3.1rem !important;
  overflow: hidden;
}

.card-select-country p {
  margin-left: 1rem;
}

#step2-1 .card-select-country b {
  max-width: 85%;
}

.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-12:has(#password) .mdl-textfield.is-invalid,
.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-12:has(#password2) .mdl-textfield.is-invalid {
  padding-bottom: 30px !important;
}

.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-12:has(#password2) .mdl-textfield.is-invalid {
  margin-top: 20px !important;
}

.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-12:has(#email) .mdl-textfield.is-invalid {
  padding-bottom: 60px !important;
}

.step2-1 .col-12:has(.is-invalid:has(#email)) .mdl-textfield {
  border: 1px solid var(--danger600);
}

.col-12:has(.card-select-country) {
  margin-bottom: 10px;
}

.countdown-section .mdl-countdown .h3-bold {
  margin: unset;
}

.title-countdown-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-rec {
  display: flex;
  justify-content: center;
  align-items: center;
}

.reconocimientos-container .breadcrumbs {
  padding-bottom: 1rem;
}

.reconocimientos-container .elipse-container {
  padding: 2rem;
  padding-right: 0px;

}

.reconocimientos-container .card-banner {
  right: 7rem;
  bottom: 1rem;
}

.active .mdl-table-desktop .header-table {
  display: table-row !important;
}

.table-mobile-container {
  gap: 16px;
  display: grid;
  padding-bottom: 2rem;
}

.mdl-table-mobile {
  border: 1px solid var(--neutrals400) !important;
  border-bottom: none !important;
}

.mdl-table-mobile .info-row-content {
  justify-content: start;
}

.title-levels-container {
  padding: 2rem 0px;
}

.galery-container-rec h2 {
  padding: 2rem 0px;
}

.title-rec .h3-bold {
  color: var(--neutrals1000);
}

.title-rec .h3-bold span {
  color: var(--primary600);
}

.bannerTitle .h3-medium b {
  background: var(--primary600);
  color: #fff;
  padding: 6px 20px;
  display: inline-block;
}

.reconocimientos-container .bannerTitle .h3-medium b {
  padding: 0px 16px !important;
  margin-top: 5px;
  display: block;
  width: fit-content;
}

.mdl-title {
  padding: 2rem 0px;
}

.search-container-elements {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.galery-container .owl-carousel .owl-stage {
  display: flex;
  gap: 16px;
}

.table-title {
  padding: 3rem 0px;
}

.table-dist-container {
  display: grid;
  justify-content: center;
  align-items: center;
}

.info-reconocimientos-section {
  border-radius: var(--Radius-Radius-xl, 16px);
  background: linear-gradient(180deg, #F7F6F6 0%, #FFF 100%);
}


.owl-formas-compra.owl-reconocimientos .owl-stage-outer {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--primary800);
  margin: 0 auto;
  padding-bottom: 3rem;
  overflow-y: visible;
}

.owl-formas-compra.owl-reconocimientos .owl-stage {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.img-incentivo {
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 2px solid var(--primary800);
  width: 82px;
  height: 82px;
  object-fit: cover;
}

.mdl-table {
  border-radius: 8px;
  border: 1px solid var(--neutrals400);
  border-collapse: collapse;
}

.mdl-table tr:first-child {
  border-radius: 10px 0 0 10px;
  /* Esquina superior izquierda e inferior izquierda */
}

.mdl-table td,
.mdl-table th {
  border-bottom: 1px solid var(--neutrals400);
  /* Borde inferior de cada celda */
  padding: 8px;
  /* Espaciado interno para que el contenido tenga un poco de espacio */
}

.mdl-table tr:last-child td {
  border-bottom: none;
  /* Elimina el borde inferior de la última fila */
}

/* Redondear las esquinas de la tabla */
.mdl-table th:first-child,
.mdl-table td:first-child {
  border-top-left-radius: 8px;
}

.mdl-table th:last-child,
.mdl-table td:last-child {
  border-top-right-radius: 8px;
}

.mdl-table tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.mdl-table tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

.mdl-table tr {
  border-bottom: 1px solid var(--neutrals400);
}

.mdl-table td,
.mdl-table th {
  padding: 16px;
}

.section-cards-levels .h3-bold {
  color: var(--primary600);
}

.section-cards-levels-short .owl-niveles .owl-stage {
  gap: 3rem;
  width: 100% !important;
}

.section-cards-levels-short .col-md-3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-cards-levels-short .title-levels-container .h3-bold {
  color: var(--primary600);
  width: 50%;

}

.info-reconocimiento-container-diamante .info-row-content {
  justify-content: start !important;
}

.info-reconocimiento-container .info-row-content {
  justify-content: start;
}

.linkLogoutNF {
  gap: 3px !important;
  color: var(--neutrals900) !important;

}

.info-row-content {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
}

.info-reconocimiento-container table tr td:nth-child(3) .info-row-content,
.info-reconocimiento-container table tr td:nth-child(4) .info-row-content {
  justify-content: start;
}

.info-row-content i {
  color: var(--primary800);
}

.mdl-table-mobile tr:nth-child(1) td:nth-child(2) .info-row-content {
  justify-content: start !important;
}

.mdl-title .colored-h2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rectangle-section .mdl-button.medium {
  padding: 13px 23px;
}

.body-large-bold {
  font-family: "Noto Sans", sans-serif !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 28px !important;
}

.owl-niveles .body-large-bold {
  color: var(--primary600);

}

.owl-niveles .owl-stage {
  display: flex;
  justify-content: center;
  align-items: center;
}

.reconocimientos-container .mdl-select {}

.mdl-title .paragraph-info {
  margin-left: -21rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-row-content .fa-database {
  color: var(--primary1000);
}

.galery-container-rec .h3-bold {
  color: var(--neutrals1000);
}

.galery-container-rec .h3-bold b {
  color: var(--primary600);
}

.circle-img-dist {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-img-dist img {
  width: 5rem;
  border: 2px solid var(--primary800);
  border-radius: var(--Radius-Radius-circle, 100px);
}

.circle-img-dist img {
  border-radius: var(--Radius-Radius-circle, 100px);
}

.table-dist-container .circle-img-dist img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: top;
  background-color: var(--primary200);
}

.circle-name-dist {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--Radius-Radius-circle, 100px);
  border: 2px solid var(--primary800);
  background: var(--primary100);
  width: 32px;
  height: 32px;
  padding: 16px;

  color: var(--primary800);
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.mdl-table td {
  color: var(--neutrals1000);
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.img-flag-dist {
  border-radius: 50%;
  width: 35px;
  height: 35px;
  object-fit: cover;
}

.mdl-table th {
  color: var(--neutrals900);
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 27px;
}

.owl-niveles .button-container .mdl-button.medium {
  padding: 14px 24px !important;
}

.reconocimientos-container button.owl-dot.active span {
  padding: 0px;
}

.table-mobile-container {
  display: none;
}

/* Reconocimientos MTP*/
.mtp-row {
  max-width: 260px;
}

.mtp-earnings {
  font-size: 1rem;
  color: #333;
  justify-content: center;
}

.mtp-earnings span {
  display: grid;
  width: 100%;
}

.mtp-earnings span strong {
  display: flex !important;
  justify-content: center !important;
}

.mtp-earnings span em {
  font-size: 0.85em;
  color: #66308C;
  display: flex;
  justify-content: center;
}

@media (max-width: 990px) {
  .mtp-earnings span {
    padding: 5px;
  }

  .info-reconocimiento-container-mtp .mdl-table-mobile tr:nth-of-type(2) td {
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .info-reconocimiento-container-mtp .mdl-table-mobile .mtp-earnings {
    padding: 0px;
  }

  .info-reconocimiento-container-mtp .mdl-table-mobile .img-flag-dist {
    position: absolute;
  }

  .info-reconocimiento-container-mtp .mdl-table-mobile tr th {
    padding: 8px;
  }

  .info-reconocimiento-container-mtp .mdl-table-mobile tr:first-of-type th {
    padding: 15px;
  }

  .info-reconocimiento-container-mtp .mdl-table-mobile tr:first-of-type .info-row-content {
    display: block;
  }

  .info-reconocimiento-container-mtp .mdl-table-mobile tr:last-of-type {
    border-bottom: 1px solid var(--neutrals400) !important;
  }

  .info-reconocimiento-container-mtp .mdl-table-mobile tr:last-of-type td {
    max-width: 60%;
  }

  .info-reconocimiento-container-mtp .mdl-table tr {
    border: 0px !important;
  }

  .info-reconocimiento-container-mtp .mdl-table-mobile tr:nth-of-type(5) th:nth-child(1) {
    width: 55%;
  }

  .info-reconocimiento-container-mtp .mdl-table-mobile tr:nth-of-type(5) th:nth-child(2) {
    padding: 10px;
    line-height: 1;
    font-size: medium;
  }

  .mdl-table-mobile i {
    color: var(--primary800);
  }

  .mdl-table-mobile tr:last-child {
    justify-content: space-around !important;
  }
}

.mdl-table tr:nth-child(even) {
  background-color: #F5F5F5;
}

/* Fin Reconocimientos MTP*/

@media (max-width: 990px) {
  .table-dist-container .circle-img-dist img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
  }

  .rectangle-section .video-container img {
    object-fit: cover;
  }

  .table-dist-container .circle-img-dist img {
    width: 5rem;
  }

  .info-reconocimiento-container .info-row-content {
    justify-content: center;
  }

  .reconocimientos-container .filter-rec-container .select2-container {
    width: 20rem !important;
  }

  .reconocimientos-container .card-banner {
    right: 204px;
    bottom: 49px;
  }

  .section-cards-levels-short .owl-niveles .owl-stage {
    gap: 0px;
    width: fit-content !important;
  }

  .section-cards-levels-short .owl-niveles .owl-item:first-child {}

  .section-cards-levels-short .title-levels-container .h3-bold {
    width: fit-content;
  }

  .reconocimientos-container .rectangle-section {
    height: fit-content;
  }

  .filter-rec-container {
    margin: unset;
  }

  .countdown-section {
    padding: 0px;
  }

  .galery-container .owl-carousel .owl-stage {
    gap: unset;
  }

  .galery-container .custom-row {
    width: 80%;
  }

  .table-mobile-container {
    display: grid;
  }

  .mdl-table-desktop {
    display: none;
  }

  .reconocimientos-container .elipse-container img {
    height: auto;
  }

  .reconocimientos-container .elipse-container {
    padding: 1rem 2rem;
  }

  .owl-formas-compra.owl-reconocimientos .owl-stage-outer {
    justify-content: flex-start;
    border-bottom: 0px;
    width: 75%;
  }

  .mdl-title .paragraph-info {
    margin-left: 0px;
  }

  /* .reconocimientos-container {
    padding-top: 3rem !important;
  } */

  .reconocimientos-container .mdl-countdown .date-item.day {
    width: 94%;
  }

  .reconocimientos-container {
    padding: 0px 0.7rem;
  }

  .reconocimientos-container .bannerTitle .h3-medium {
    gap: 10px;
    display: inline-grid;
  }

  .reconocimientos-container .bannerTitle .h3-medium b {
    width: fit-content;
  }

  .info-container {
    padding: 2rem;
  }

  .mdl-title b {
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
  }

  .mdl-title .h3-bold {
    display: grid;
    justify-content: center;
    align-items: center;
  }

  .info-reconocimientos-section .rectangle-section {
    width: 100%;
  }

  .video-container img {
    height: 13rem;
  }

  .search-container-elements {
    display: contents;
  }

  .img-incentivo {
    width: 48px;
    height: 48px;
  }
}

.active .mdl-table-desktop tr {
  display: none;
}

.show-element-table {
  display: revert-layer !important;
}


.reconocimientos-container .owl-galery-photos .owl-nav button.owl-next span,
.reconocimientos-container .owl-nav button.owl-prev span {
  color: var(--primary) !important;
  background-color: white;
}

.owl-galery-photos .mdl-card-consejo {
  width: 280px;
  height: 100%;
  border-radius: 0px;
}

.owl-galery-photos .owl-item img {
  border-radius: 0px !important;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.info-reconocimiento-container {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, max-height 0.5s ease, visibility 0.5s;
}

.info-reconocimiento-container.active {
  opacity: 1;
  visibility: visible;
  max-height: fit-content;
  padding-bottom: 3rem;
}

.info-reconocimiento-container-nivel h2.h3-bold>span,
.info-reconocimiento-container-mtp h2.h3-bold>span {
  padding-left: 0px;
}

.download-btn-reward {
  color: var(--primary800);
  text-decoration-line: underline;
}

.download-btn-reward i {
  color: var(--primary800);
  font-size: large;
  padding: 0px 10px;
}

.mdl-table-mobile tr:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logoImage img {
  max-height: 3rem;
}

#xtrvgns__highlights .bannerTitle .h3-medium b {
  background: none;
  padding: inherit;
}

#login-section form#loginFormNF label.mdl-textfield__label {
  color: var(--primary800);
  font-size: 12px;
  top: 4px;
  visibility: visible;
}

#login-section form#loginFormNF label.mdl-textfield__label span {
  background: #fff;
  padding: 0px 6px;
  border-radius: 8px;
  display: inline-block;
}

button#menu_item_ConocerAlGRUPOOMNILIFE {
  min-width: 160px;
}

/*Estilos Checkout antiguo**/



.omnilife-v2 .button.small.new-address {
  margin-bottom: 2rem;
}

.omnilife-v2 .product.slider__item .numeric .form-control {
  border: none;
}

.omnilife-v2 .card__content .card__title {
  padding-bottom: 1.5rem;
}

.omnilife-v2 .products__wrap .minus,
.products__wrap .plus {
  background-color: white;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 20px;
  margin: 0px !important;
}

.products.slider .products__wrap .minus:hover,
.products.slider .products__wrap .plus:hover {
  background: var(--primary100);
}

.omnilife-v2 .products__wrap .minus svg,
.plus svg {
  vertical-align: -2px;
}

.omnilife-v2 .product.slider__item .form-group .form-control {
  width: 2rem !important;
  font-size: 1rem !important;
  margin: 0px;
}

.omnilife-v2 #upsell .form-group.numeric.item-quantity-container {
  border: 1px solid var(--primary4);
  display: inline-flex;
  border-radius: 74px;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  align-content: center;
}

.omnilife-v2 .numeric span svg {
  stroke: var(--primary700);
}


.omnilife-v2 .button--shopping.cart::before {
  top: 20%;
}

.modal.alert .form-group.numeric .minus,
.modal.alert .form-group.numeric .plus {
  background-color: #fff;
  border-radius: 40px;
  height: 1.8rem;
  width: 1.8rem;
  border: 1px solid var(--primarycolor);
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.modal.alert .form-group.numeric .form-control.number {
  border: none;
  border-radius: 0px !important;
  padding: 0px;
  height: fit-content;
  width: 20px;
}

.modal.alert .form-group .form-label {
  margin: 1rem;
}

.modal__body .form-group .card__title {
  padding: 1rem 0rem;
}

.postal-code__description {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.omnilife-v2 .modal.alert p.card__price.discount {
  width: 100%;
}

.payment-container .oxxo {
  width: 25rem;
  padding-right: 1rem;
}

.buttons-container .payment-container.oxxo #oxxo-button {
  max-width: unset !important;
  width: 11rem;
}

.register .buttons-container {
  margin-bottom: 3.5rem;
}

.cart.fullsteps {
  padding-top: 1rem;
}

.cart-product__item {
  margin: 1rem;
}

.form-radio.card.stack .card__content-wrap:before {
  display: none !important;
}

#info_box-send_bill {
  background: transparent !important;
  color: var(--neutral) !important;
}

.products.slider .products__wrap .minus,
.products.slider .products__wrap .plus {
  height: 2rem;
  width: 2rem;
}

.products.slider .products__wrap .minus svg,
.products.slider .products__wrap .plus svg {
  vertical-align: -5px;
}

.omnilife-v2 .modal.alert .form-group.numeric {
  margin-top: 1rem;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: fit-content;
  border-radius: 39px;
}

@media (max-width: 1090px) and (min-width: 1023px) {
  .site-header .mdl-ul {
    padding: 8px 10px !important;
  }

  .site-nav li a,
  .site-nav li button {
    padding: 4px !important;
  }
}

@media (max-width: 990px) {
  .site-header .mdl-ul li {
    flex: 0 1;
  }

  .site-header .mdl-ul>li:has(> .search-header-container) {
    width: 100% !important;
    position: absolute !important;
  }

  .register .buttons-container {
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .owl-galery-photos .mdl-card-consejo {
    margin-right: -2.3rem;
    padding-right: 1rem;

  }

  .owl-carousel .owl-nav button.owl-next,
  .owl-carousel .owl-nav button.owl-prev,
  .owl-carousel button.owl-dot {
    margin-right: 10px;
  }

  .owl-formas-compra.owl-reconocimientos .owl-stage {
    margin-left: 2rem;
  }

  #alertShippingAddress .modal.alert {
    height: 38rem;
    padding: 0rem 2rem !important;
  }

  .products-block.complementary .button,
  #upsell .button {
    padding: .6rem;
  }

  .omnilife-v2 .modal.alert {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .postal-code__description {
    max-width: unset;
  }

  .omnilife-v2 .modal.alert .form-label {
    margin: 0px;
  }

  .omnilife-v2 .modal.alert .form-radio.card.card.discount {
    width: 100%;

  }

  .omnilife-v2 .modal.alert .card__content-wrap {
    width: 100%;
  }

  .omnilife-v2 .modal.alert .button.small {
    margin-top: 0px;
  }

  .omnilife-v2 .cierre-indistinto {
    display: grid;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-top: 3rem;
  }

  .omnilife-v2 .modal__inner.ps-container {
    height: fit-content !important;
  }

  #modalManual .buttons-container {
    flex-wrap: wrap;
    gap: 20px;
  }

  #downloadManual {
    padding: 10px;
  }

  .omnilife-v2 #alertChangeShippingAddress .modal__inner.ps-container {
    height: fit-content !important;
  }

  .omnilife-v2 #alertChangeShippingAddress .modal.alert {
    padding: 0px !important;
    height: 80vh;
  }

  .cart.fullsteps.register {
    margin-top: 1rem !important;
  }

  .omnilife-v2 #alertChangeShippingAddress .modal__inner.ps-container {
    height: 100 !important;
    padding-top: 4rem;

  }

  .step1 .buttons-container button.secondary.small {
    max-width: unset;
  }

  #to-step1 {
    max-width: unset;
    width: 11rem;
  }
}

.form-group.numeric.discount {
  background-color: white;
  border-radius: 20px;
}

.numeric span svg {
  stroke: var(--primary700);
}

.form-radio input[type="radio"]:checked+.radio-fake {
  background-color: var(--secondarycolor) !important;
}

/*Fin estilos Checkout antiguo*/

/* ==============================================
       Fix - fortalecer mi negocio
============================================== */

#fort-negocio__paso2 .mdl-card.outline.mt-1 .mdl-block:last-child,
#fort-negocio__paso4 .mdl-card.outline.mt-1 .mdl-block:last-child {
  padding-top: 4px;
}

#fort-negocio__paso2 .mdl-card.outline.mt-1 .mdl-block:first-child,
#fort-negocio__paso4 .mdl-card.outline.mt-1 .mdl-block:first-child {
  padding-bottom: 4px;
}

section#fort-negocio__paso5 .custom-row.flex-center {
  display: flex;
  align-items: flex-start;
}

section#fort-negocio__intro .col-lg-6.flex-center.wow.fadeInUp {
  align-self: end;
}

#fort-negocio__intro .mdl-card.card-purple-2.small.mt-1 .col-sm-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

#forma-compra-1 .mdl-accordion.mdl-accordion--opened .button-container {
  margin-left: 54px;
}

section#fort-negocio__intro .mt-2.bannerTitle {
  margin-top: 0;
}

section#fort-negocio__intro hr {
  display: none;
}

section#fort-negocio__intro {
  padding-bottom: 0;
}

section#fort-negocio__paso1 {
  padding-top: 0;
}

.omnilife-v2.social-la-primera-mini-pitch-en-jalisco-article .bg-circle2 .half-round-container {
  margin-bottom: 0;
}

.video-responsive,
.crear-negocio-video,
.crear-negocio-video {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  position: relative;
  margin-bottom: 24px;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed,
.crear-negocio-video iframe,
.crear-negocio-video object,
.crear-negocio-video embed,
.crear-negocio-video iframe,
.crear-negocio-video object,
.crear-negocio-video embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#btnSelectOtherAddress {
  background-color: white;
  border: 2px solid var(--primarycolor);
  ;
  color: var(--primarycolor);
  ;
  max-width: 15rem;
}

#btnSelectOtherAddress:hover {
  color: var(--primary700);
  background-color: var(--primary100);
}

.puntos-info div p.body-medium-regular:first-of-type {
  display: block;
}

.select-rec-container .owl-item {
  cursor: pointer;
}


#xtrvgns__highlights .mdl-block {
  padding: 0 16px;
  margin: 0;
}

#xtrvgns__highlights .mt-2.bannerTitle {
  margin-top: 0;
}

#xtrvgns__country-details .xtrvgns__bg-gradient.p-1 .wrapper.pt-3 {
  padding-top: 1rem !important;
}

h3#dynamic-title span {
  color: var(--primary600);
}

.mdl-date-location .mdl-button {
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 16px;
}

#home-big-numbers .col-lg-7 {
  padding: 0;
}

#home-big-numbers .col-lg-4 {
  padding: 0;
}

p.big-numbers-count i {
  display: inline-flex;
}

#sost__objetivos h2.h3-medium b {
  text-align: left !important;
  display: block !important;
}

#xtrvgns__newsletter p.pb-2 {
  margin-top: 1rem;
}

.owl-xtrvgns-promos .mdl-card-icon {
  padding: 10px;
}

#sost__more-articles h2.h3-medium {
  margin-bottom: 1rem;
}

.small-label.default {
  font-family: barlow semi condensed, Sans-Serif !important;
  font-style: italic !important;
  font-size: .9rem !important;
  color: #333 !important;
  padding: 2px 10px !important;
  background: #efefef !important;
  border-radius: 10px !important;
  margin: 0 0px 0px 10px !important;
}

.search-result.product .small-label.default {
  font-family: barlow semi condensed, Sans-Serif !important;
  font-style: italic !important;
  font-size: .9rem !important;
  color: #333 !important;
  padding: 2px 10px !important;
  background: #efefef !important;
  border-radius: 10px !important;
  margin: 0 0px 0px 10px !important;
}

/*ESTILOS PARA BETA*/

/* grupo-omnilife  */
.testimonials.slider .testimonial__about .testimonial__extract {
  width: 22rem;
}

.omnilife-v2 .front-banners .front-banner__description {
  min-height: 15rem;
  max-width: 23rem !important;
}

.history--container .history--description p {
  margin: 10px 0px;
}

.brands--container {
  margin-top: 18px;
}

.brand__item.slider__item img {
  object-fit: contain;
}

.brand__item.slider__item figure {
  background-color: var(--primary1);
}

.brand--location {
  margin-top: 20px;
}

.brands--container h2 {
  margin-top: 24px;
}

/*nosotros*/
.history--title.omnilife {
  margin: 8px 0px;
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .products-desc.withbg.mid.wrapper {
    padding: 20px;
  }
}

.myomnibusiness.product {
  border-radius: 0px;
}

/*cresiendo*/
.cases__body .testimonial.cases__item.story-item h1.testimonial__name {
  font-size: xx-large;
}

.testimonial.cases__item.story-item .testimonial__frase {
  margin: 3rem;
  padding: 0px 12px;
}

.theme--green a,
.history--container a {
  color: var(--secondarycolor);
}

.business__item-description.contact {
  padding: 2rem;
}

.routes__list {
  max-height: 21rem;
}

.business__item-description a {
  color: var(--secondarycolor);
}

.millionaire--flag {
  top: 13%;
}

.products-maintitle {
  margin-left: 2.5rem;
}

.brands--container .brand__item figure {
  max-height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem;
}

.brand__item.slider__item figure img {
  width: auto;
}

#seccion__formas-compra-1 .custom-row {
  align-items: flex-start;
}

/*cupon todos ganan*/

#home-products .products__wrap.slider__wrap {
  min-height: 51rem;
}

/*REconocimientos*/
.distributor-gifts__filters {
  padding: 1rem;
}

.tools__form-group {
  padding: 1rem;
}

.select-distributor--level .icon-search img {
  right: 10px;
}

.datefilter__group .icon-search img {
  top: 11px;
}

.business .navbarX .nav.navbar-nav.landing-menu-ul {
  padding-top: 4rem;
}

.cases__banner--testimonial-modifier h2.highlight {
  color: white !important;
}

.cases__banner--testimonial-modifier .bottom-banner__content h2.highlight {
  color: white !important;
}

.modal-user-path-div {
  min-height: 10rem !important;
}

.testimonial__metas {
  display: block;
}

.omnilife-v2 .front-banners .front-banner__description {
  min-height: 15rem;
}

.history--container .history--description p {
  margin: 10px 0px;
}

.brands--container {
  margin-top: 18px;
}

.brand__item.slider__item img {
  object-fit: contain;
}

.brand__item.slider__item figure {
  background-color: var(--primary1);
}

.brand--location {
  margin-top: 20px;
}

.brands--container h2 {
  margin-top: 24px;
}

/*nosotros*/
.history--title.omnilife {
  margin: 8px 0px;
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .products-desc.withbg.mid.wrapper {
    padding: 20px;
  }
}

.myomnibusiness.product {
  border-radius: 0px;
}

/*cresiendo*/
.cases__body .testimonial.cases__item.story-item h1.testimonial__name {
  font-size: xx-large;
}

.testimonial.cases__item.story-item .testimonial__frase {
  margin: 3rem;
  padding: 0px 12px;
}

.theme--green a,
.history--container a {
  color: var(--secondarycolor);
}

.business__item-description.contact {
  padding: 2rem;
}

.routes__list {
  max-height: 21rem;
}

.business__item-description a {
  color: var(--secondarycolor);
}

.millionaire--flag {
  top: 13%;
}

.products-maintitle {
  margin-left: 2.5rem;
}

.brands--container .brand__item figure {
  max-height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem;
}

.brand__item.slider__item figure img {
  width: auto;
}

/*cupon todos ganan*/
#home-products .products__wrap.slider__wrap {
  min-height: 51rem;
}

/*REconocimientos*/
.distributor-gifts__filters {
  padding: 1rem;
}

.tools__form-group {
  padding: 1rem;
}

.select-distributor--level .icon-search img {
  right: 10px;
}

.datefilter__group .icon-search img {
  top: 11px;
}

.business .navbarX .nav.navbar-nav.landing-menu-ul {
  padding-top: 4rem;
}

.cases__banner--testimonial-modifier h2.highlight {
  color: white !important;
}

.cases__banner--testimonial-modifier .bottom-banner__content h2.highlight {
  color: white !important;
}

.modal-user-path-div {
  min-height: 10rem !important;
}

.testimonial__metas {
  display: block;
}

@media (max-width: 990px) {

  .omnilife-v2 .slider.mainslider.business-slider.initialized {
    margin-top: 9rem;
  }

  .omnilife-v2 .business-slider .mainslider__content {
    height: 100%;
  }
}

.front-banners .wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.front-banners .front-banner {
  flex: 1 1 calc(20% - 16px);
  display: grid;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
}

.front-banner_img {
  max-width: 23rem;
}

.front-banners .front-banner:nth-child(n+5) {
  margin-top: 0px;
}

.full-size-mobile.ezone__container {
  max-height: unset !important;
}

/*ESTILOS PARA BETA*/
#blog-r90 .testimonial.cases__item.story-item .testimonial__frase {
  margin: 1rem 0rem;
  padding: 0px;
}

#blog-r90 blockquote.testimonial__frase {
  display: flex;
  justify-content: start;
  width: 100%;
}

#blog-r90 .cases__about {
  padding: 1rem !important;
}

#blog-r90 .products-desc__title {
  padding: 0rem 2rem;
}

#blog-r90 .cases__headline {
  height: fit-content !important;
}

#blog-r90 .business__main-inner {
  padding: 0px !important;
}

#blog-r90 .cases__item {
  padding: 1rem !important;
}

.dashboard-to-top {
  display: none;
}

.sr-input:focus,
input[type="text"]:focus,
button:focus,
.cart__left .focused {
  box-shadow: none !important;
}

.cart__left .buttons-container {
  position: relative;
}

.omnilife-v2 .period--selected .dynamic-secondary-background {
  background-color: white !important;
  border: 1px solid black;
}

.omnilife-v2 .period--selected .dynamic-secondary-background .color-white {
  color: #444;
}


.omnilife-v2 .period--selected ul .dropdown-list.list-nostyle li {
  border-top: 0px !important;
}

.omnilife-v2 .period--selected ul .dropdown-list.list-nostyle li:hover {
  background-color: var(--primary100);
}

.search.search__testimonies--modifier .icon-cross {
  top: 8px !important;
  right: 2em;
}

.omnilife-v2 .period--selected .dynamic-secondary-background .color-white {
  border-left: 0px !important;
}

.cart__left a:hover {
  filter: brightness(1) !important;
}

.cart__left a:active {
  filter: brightness(1) !important;
}

/*estilos justificacion menu */
.nav2DesktopContainer> :first-child,
.nav2DesktopContainer> :nth-child(2),
.nav2DesktopContainer> :last-child {
  justify-content: center;
  width: fit-content;
  overflow: visible;
  min-width: fit-content;
}

.nav2DesktopContainer> :first-child {
  padding-right: 40px !important;
}

.nav2DesktopContainer> :nth-last-child(2) {
  justify-content: center;
}

.nav2DesktopContainer .mdl-button {
  display: flex;
  justify-content: center !important;
  align-items: center;
  gap: 7px;
  padding: 10px;
  overflow: inherit;
}

/*estilos justificacion menu */


/* ESTILOS PARA SECCION DE CONTRATO*/

.contract-check-container {
  background-color: transparent;
  padding-top: 1rem;
  width: 70%;
  display: grid;
  justify-content: start;
  margin-left: 16%;
}

.header-bar {
  width: 100%;
  background: var(--primary200);
  position: sticky;
  z-index: 9999999;
  top: 0;
  padding: 8px;
  color: var(--primary);
}

.header-bar-container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

/* Estiliza las etiquetas como botones */
.mdl-radio-form .label-input-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background 0.3s ease;
}

/* Efecto hover */
.mdl-radio-form .label-input-radio:hover::before {
  box-shadow: inset 0 0 0 3px white, 0 0 3px rgba(102, 48, 140, 0.7);
}

/* Círculo personalizado de 24x24 */
.mdl-radio-form .label-input-radio::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #555;
  display: inline-block;
  position: relative;
  background: white;
  transition: all 0.3s ease;
}

/* Cuando el radio está seleccionado, se agrega un círculo interno con borde blanco */
.mdl-radio-form input[type="radio"]:checked+.label-input-radio::before {
  border-color: #66308C;
  box-shadow: inset 0 0 0 3px white, 0 0 3px rgba(102, 48, 140, 0.7);
  background: #66308C;
}

.contract-check-container {
  margin-top: 20px;
}

.contract-check-container .mdl-textfield__input {
  height: 3rem;
  border-radius: var(--Radius-Radius-md, 0.5rem) !important;
  border: 1px solid var(--neutrals900);
  padding-left: 6px;
}

.contract-check-container .mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.contract-check-container .is-dirty .mdl-textfield__label {
  left: 15px !important;
  top: 10px !important;
  padding: 0px 5px;
  background-color: white;
  height: fit-content;
  width: fit-content;
}

.contract-check-container .mdl-textfield--floating-label .mdl-textfield__label {
  left: 10px;
  top: 30px;
}

.close-modal-terms-btn {
  position: absolute;
  z-index: 4;
  top: 57px;
  right: 12rem;
}

.download-pdf-btn {
  display: flex;
  justify-content: center;
  align-items: center
}

.download-pdf-btn .mdl-button.link {
  text-decoration: underline;
}

.stick-buttons-modal-container {
  position: sticky;
  bottom: 0px;
  text-align: center;
  background-color: white;
  padding: 20px 0px;
  display: grid;
  gap: 15px;
}

.div-info-check-container {
  display: grid;
  justify-content: center;
  gap: 20px;
}

.info-option-container .h5-bold {
  color: var(--primary);
  padding-top: 1rem;
}

.stick-buttons-modal-container .seccondary {
  border: 1px solid;
}

.option-container .contract-modal-option {
  display: grid;
  gap: 20px;
}

.ifram-container-check {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ifram-container-check iframe {
  min-width: 54rem;
  min-height: 50rem;
}

.buttons-check-container {
  padding-top: 2rem;
}

.buttons-check-container a {
  min-width: 10rem;
}

.alert-info-check-contract {
  text-align: justify;
  padding: 15px;
}

.check-pdf-btn .mdl-button {
  min-width: 15rem;
}

.spinElement {
  animation: spin 1s linear infinite;
}

.info-creo-span-text {
  font-size: small;
}

.contract-terms-secction .bg-secondary-circles {
  z-index: 10;
  position: absolute;
}

#default-language .full-width .select2-container--default .select2-selection--single {
  overflow: hidden;
}

#button-accept-terms.disabled {

  pointer-events: none;

}

.checkbox-fake,
.checkbox-label a:hover {
  cursor: pointer !important;
}

@media (max-width: 990px) {
  .check-pdf-btn {
    display: grid;
    padding: 10px;
    gap: 10px;
  }

  .alert-info-check-contract {
    padding: 15px 0px;
  }

  .contract-check-container {
    width: 100%;
    padding: 2rem;
    margin-left: 0px;
    ;
  }

  .contract-modal-option p {
    display: flex;
    align-items: center;
  }

  .ifram-container-check iframe {
    min-width: 100%;
    min-height: 40rem;
  }

  .title-check-container .h3-bold {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
  }


}



.omnilife-v2.private-zone-content.pt-4 {
  top: 0 !important;
}

button#icart {
  overflow: visible;
}

/* Homologación de beta */

#collapsePromo295-BR .form-label {
  font-size: 1rem;
}

#promo .form-label {
  text-align: center;
  margin-bottom: 0;
}

.bussines-centers-buttons .button:first-child {
  color: white !important;
}

.add-product-search {
  display: flex !important;
  margin-left: auto;
}

.add-product-search .alert-active {
  top: 0;
  right: 0;
  width: fit-content;
  height: fit-content;
  transform: translateX(44%) translateY(-30%) !important;
}

.add-product-search .addToCarBtn {
  padding: 8px 28px;
  height: fit-content;
}

@media (max-width: 990px) {
  .add-product-search {
    gap: 10px;
    justify-content: center;
    align-items: center;
  }

  .add-product-search .addToCarBtn {
    padding: 10px 40px;
  }

  .add-product-search .counterProdcut {
    max-width: 90%;
  }

  .mdl-menu__container.is-visible .mdl-menu {
    gap: 5px;
    display: grid;
    margin-top: 10px;
  }
}

@media screen and (max-device-width: 920px) and (-webkit-min-device-pixel-ratio: 2) and (hover: none) {
  .nav2Desktop .wrapper {
    top: 70px !important;
  }
}

@media (max-width: 920px) {
  .nav2Desktop .wrapper {
    top: 0px !important;
  }
}



/* ==============================================
       Selecionar Paqueteria
============================================== */

.shipping_comp.shipping_comp {
  width: 100% !important;
  flex: auto !important;
  order: 0 !important;
}

.shipping-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: start;
}

.shipping_comp {
  flex: unset !important;
  margin: 0px;
  margin-left: 0px !important;
  margin-right: auto !important;
  position: relative !important;
}

.suggested-opt-txt {
  font-size: x-small;
  position: absolute;
  right: 5px;
  top: 5px;
}

.label-shipping {
  right: 0px;
  left: unset;
  padding: 5px;
  border-radius: 0px 5px 0px 5px;
  position: absolute;
  top: 0px;
  background: var(--primary600);
  color: #fff;
}

.drop-off-point {
  order: 2;
}

.iframe-container {
  width: 100%;
  padding: 10px;
}

.iframe-container iframe {
  width: 100%;
  height: 35rem;
  ;
}

.choose-drop-off-section {
  padding: 20px 0px;
}

.choose-drop-off-section h5 {
  padding: 10px 0px;
}

.form-radio .radio-fake {
  flex-shrink: 0;
}

.shipping-options-section .card__content {
  align-items: center;
  display: flex;
}

.shipping-options-section .radio-label img {
  height: 60px;
  width: 60px;
  object-fit: contain;
  filter: grayscale(100%);
}

.shipping-options-section .form-radio.card .radio-label {
  display: inline-flex;
  gap: 10px;
}

.shipping-options-section .form-radio.card .radio-label span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shipping-options-section .form-radio.card i {
  font-size: xx-large;
  margin: 0px 15px;
}

@media (max-width: 990px) {

  .label-shipping {
    padding: 3px
  }
}

.shipping-options-section {
  padding: 20px 0px;
}

.shipping-options-section-info {
  padding: 20px 0px;
}

.choose-drop-off-section .form-radio {
  margin: 0px;
  display: flex;
  gap: 15px;
}

.small-txt {
  font-size: small;
  text-align: justify;
}

.choose-drop-off-section .radio-label {
  display: grid;
}

.choose-drop-off-section .col-3 {
  margin-top: 16px;
  padding: 0px;
}

.choose-drop-off-section .form-container-drop-off {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px 0px;
  max-height: 19rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  padding: 1rem;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(232, 232, 232);
  border-radius: 10px;
}

.choose-drop-off-section .form-container-drop-off .radio-label {
  cursor: pointer;
}

.choose-drop-off-section .form-container-drop-off .form-radio.inline {
  padding: 10px 0px;
  border-radius: 20px;
  padding-left: 20px;
}

.choose-drop-off-section .form-container-drop-off .labelProduct.notAvailable {
  left: unset;
  right: 0px;
  border-top-right-radius: 20px;

}


.choose-drop-off-section .form-container-drop-off .form-radio.inline.disabled {
  background-color: var(--neutrals400);
  pointer-events: none;
}

.choose-drop-off-section .form-container-drop-off .form-radio.inline.disabled .radio-fake {
  visibility: hidden;
}

.form-container-drop-off .radio-fake {
  margin-top: 5px;
}

.cart__left .cart__main-title {
  padding: 10px 0px;

}

figure.business_center_video.pdf_format.pos-rel a:hover {
  filter: none !important;
}

@media (max-width: 990px) {
  div.ezone #ezone-menu {
    height: 68vh;
  }

  .choose-drop-off-section .form-container-drop-off {
    grid-template-columns: unset;
    max-height: 19rem;
  }

  .choose-drop-off-section .form-container-drop-off .form-radio.inline.disabled .radio-fake {
    display: none;
  }

  .choose-drop-off-section .form-container-drop-off .labelProduct.notAvailable {
    font-size: smaller;
    padding: 0px 10px;
  }

  .choose-drop-off-section .form-container-drop-off .form-radio.inline.disabled {
    padding-top: 24px;
  }

  .register.fullsteps #stripe_form {
    padding-bottom: 20vh;
  }

  #upsell .product.slider__item {
    width: 45%;
    flex: 1;
  }

  .form__kit {
    margin-bottom: 6rem;
  }

  #tabs_register .register__step.step.step3.fade-in-down.active {
    position: static;
  }

  #cart-resume {
    position: absolute;
    bottom: -20px;
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    padding-right: 20px;
    padding: 10px;
    right: 0px !important;
  }

  #alertShippingAddress {
    height: fit-content;
  }


  #cart-list.cart__right .cart-product__list {
    max-height: 25rem !important;
  }

  #cart-preview .cart-preview__head {
    padding: 10px;
  }

  #register-contract-code {
    overflow: scroll;
  }

  .cart-preview__content #error__box-resumeQuotation {
    margin: 0px;
    padding: 0px;
  }

  .cart__right .cart-product__list {
    margin-top: 15px !important;
  }

  #cart-preview #cart-list li {
    padding: 5px !important;
    margin: 5px 20px !important;
  }

  #cart-preview #cart-list li:last-child {
    margin-bottom: 5rem;
  }

  #cart-preview.cart-preview .icon-cross {
    z-index: 999 !important;
    right: 2rem;
  }

  .tabs-static {
    margin-top: 0px !important;
  }

  .register.fullsteps .tabs-static {
    /*Mantiene el margen top en registro cliente, manteniendo visible el stepper*/
    margin-top: 30px !important;
  }

  /*#tabs_register {
    Se elimina el margin extra del registro, por ajuste en margin del breadcrumb
    margin-top: 2rem;
  }*/

  #div-oxxo-ticket .opps {
    display: contents;
  }

  #div-oxxo-ticket .opps-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  #div-oxxo-ticket .opps-ammount {
    width: 100%;
  }

  .buttons-container .payment-container.oxxo #oxxo-button {
    width: auto;
  }

  #div-oxxo-ticket .opps-instructions {
    width: 100%;
    max-width: 25rem;
  }

  #divResumeQuotationErrors2 {
    margin: 10px 0px;
  }

  .ezone__info-edit.checkout {
    right: 0px;
  }

  .ezone__info-replace.checkout {
    top: 10px;
    right: 2rem;
  }

  #modalConfimationNextStep {
    height: fit-content;
  }

  .wrapper.full-size-mobile.business__main h3.products-maintitle {
    margin: 0px 10px !important;
    font-size: 1.4rem !important;
  }
}

@media (max-width: 650px) {
  #div-oxxo-ticket.opps-header {
    width: 100%;
    max-width: 21rem;
  }
}

@media (max-width: 768px) {
  .tabs-static {
    margin-top: 28px !important;
  }
}

.modal-open #tabs_register {
  z-index: 100 !important;
}

.business_center_video a:hover {
  filter: none !important;
}

#tabs_register #cart-resume {
  min-height: 5rem !important;
}

#tabs_register .message.is-success {
  margin: 2px;
}

.events-container #seccion__cta .btnNFCat i {
  display: none;
}

.owl-item a:hover {
  cursor: pointer;
}

@media (max-height: 750px) {
  .cart__right .cart-product__list {
    max-height: 12rem !important;
    min-height: unset !important;
  }
}

/*NUTRE EL DEPORTE*/
#testimonios .brands--container .brand__item.slider__item p {
  padding: 15px;
  ;
}

.master-template .cases__about {
  width: 100%;
}

@media (max-width: 990px) {

  .cases__item.active .cases__testimonial,
  .cases__item.active .cases__video {
    max-height: fit-content;
  }

  #testimonios .business__grid.list-nostyle.slider__wrap {
    gap: 20px;
    display: grid
  }

  #testimonios .testimonial .cases__testimonial-body .ps__rail-y {
    display: none;
  }

  #testimonios .master-template #testimonios blockquote.testimonial__frase {
    display: flex;
    padding: 0px;
    margin: 15px;
  }

  .brands--container .business__grid.list-nostyle.slider__wrap {
    display: grid;
    gap: 1rem;
  }

  .list-nostyle.slider__wrap {
    display: grid;
    gap: 15px
  }


}

.testimonial.cases__item.story-item.active .cases__about p:nth-of-type(2),
.testimonial.cases__item.story-item.active .cases__about p:nth-of-type(3) {
  display: none;
}

#testimonios .cases__testimonial-inner {
  pointer-events: none;
  overflow: auto;
}

#testimonios .cases__testimonial-inner button {
  pointer-events: auto;
}

#testimonios .ps__rail-y {
  display: none;
}

#testimonios .cases__item.active .cases__video {
  padding-bottom: 2rem;
  padding-top: 1rem;
  width: 100%;
}

/*RETO 90**/
@media (max-width: 990px) {
  .r90-template .ezone__body {
    padding: 0px;
  }

  .r90-template form.multiproduct-form.d-flex {
    padding: 0px !important;
  }

  .r90-template .selectator_options .selectator_option .selectator_option_subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2em;
  }

  .r90-template .multiple .selectator_input {
    width: 100%;
  }

}


/****    MODAL PROMOCIONES      *****/
.modal-promos .panel-heading {
  background-color: white !important;
  border: 2px solid var(--primary);
}

.modal-promos .panel-heading .btn a::after {
  color: var(--primary);
}

.modal-promos .panel-heading.panel-pending {
  border: 2px solid red !important;
  background-color: white !important;
  border-radius: 7px;
  color: var(--primary);
  color: #474545;
}

.modal-promos .panel-heading.panel-pending {
  background-color: white !important;
}

.modal-promos .panel-heading.panel-pending a {
  color: red !important;
}

.modal-promos .panel-heading.panel-pending {
  background-color: white;
  border: 1px solid var(--primary);
  background-color: white;
  border-radius: 7px;
  color: var(--primary);
  color: #474545;
  border: 1px solid red;
  color: red !important;
}

.modal-promos .panel-heading .accordion-toggle.collapsed:after,
.panel-heading .accordion-toggle::after {
  color: var(--primary)
}

.modal-promos a.btn.promo_collpase.accordion-toggle {
  color: var(--primary)
}

.modal-promos .form-group.numeric.discount {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.modal-promos .promos-butons-container {
  display: flex;
  gap: 10px;
  position: sticky;
  bottom: -1px;
  background-color: #EDECEC;
  padding: 10px;
  text-align: center;
  z-index: 2;
  position: sticky;
  border: 0px;
  justify-content: center;
}

.modal-promos .numeric span svg {
  margin-top: 6px;
}

.modal-promos .modal-promos form {
  overflow-x: clip;
}

.modal-promos .panel-title a {
  cursor: pointer;
}

.modal-promos .modal__body {
  overflow-x: hidden;
  max-height: 20rem;
}

.modal-promos.active {
  height: fit-content;
  max-height: 90%;
}

.button-promo-continue {
  display: flex !important;
}

.highlight-text {
  background-color: yellow;
  font-weight: bold;
  display: inline;
  padding: 0;
  margin: 0;
}

/***** FIN DE MODAL PROMOCIONES *****/

.cedis__gallery--main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25rem;
}

@media (max-width: 990px) {
  .cedis__gallery--main {
    padding-top: 4rem;
    width: auto;
  }

  .cedis__gallery--main img {
    width: 90% !important;
    margin: auto !important;
  }

  aside.ezone__banners .ezone__banner {
    width: 100%;
  }

  aside.ezone__banners .ezone__banner div#map {
    width: 20rem;
    height: 30rem;
  }

  aside.ezone__banners.mul {
    margin-top: 15px;
  }
}


#register-contract-code h6 {
  margin-block: 4px !important;
}

.modal__body.promotions-modal {
  max-height: 30rem !important;
}

/* ESTILOS PARA KITS */

.tiny_img__kit {
  bottom: 0px !important;
}

.form__kit {
  margin-bottom: 0px !important;
  /* height: fit-content; */
}

label.card__content-wrap.container-kit {
  padding: 4px;
  display: flex;
}

#kits {
  gap: 12px;
  margin-bottom: 120px !important;
}

#kits .form__kit {
  display: block;
  height: fit-content;
  max-height: unset;
  margin-bottom: unset !important;
}

#kits .tiny_img__kit {
  position: revert;
}

#kits .form-radio.inline.card {
  display: contents;
}

#forma-compra-info-2 {
  overflow: visible;
}

#forma-compra-info-2 .bg-testimonios img {
  -webkit-transform: unset;
  transform: unset;
  bottom: -80px !important;
}

/* ==============================================
       Micrositios
============================================== */

#microsite-bar .d-flex.flex-center {
  gap: 8px;
}

.footer-bar {
  width: 100%;
  background: var(--primary200);
  position: sticky;
  z-index: 9999999;
  bottom: 0;
  padding: 8px;
  color: var(--primary);
}

.footer-bar2 {
  width: 100%;
  background: var(--primary200);
  padding: 8px;
  color: var(--primary);
}

/* paquetería no disponible */
.form-radio.inline.selected {
  background-color: var(--primary1);
  border: 1px solid var(--primary600);
}

#shipping_address_select label.disabled {
  color: var(--neutrals800);
}

p.warning-drop-off {
  font-size: small;
  position: absolute;
  right: 0px;
  top: 7rem;
  max-width: 50%;
  text-align: end;
  line-height: 20px;
}

@media (max-width: 1045px) {
  p.warning-drop-off {
    bottom: -40px;
  }
}

/* 768 */
@media (max-width: 768px) {
  p.warning-drop-off {
    position: relative;
    text-align: center;
    top: 15px;
    max-width: unset;
  }
}

@media (max-width: 990px) {
  .choose-drop-off-section .form-container-drop-off .radio-label {
    width: 100%;
  }
}


.form-group span.link {
  color: var(--primarycolor);
  text-decoration: underline;
  cursor: pointer;
}

.change-address-text {

  cursor: pointer;
}

.change-address-text span {
  color: var(--primarycolor);
  text-decoration: underline;
}

.form-group.disabled label {
  color: var(--neutrals500);
}

.countdownTimer {
  font-weight: bold;
}

.countdownContainer {
  display: flex;
  gap: 10px;

}

#countdownTimer p:first-of-type {
  font-size: small;
}

.timeOver {
  color: var(--error700);
}

.search-container-elements .select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 1px !important;
}

/* ==========================================================================

/* ==========================================================================
  ****************** ESTILOS PARA EL NUEVO MENÚ. ************************
   ========================================================================== */
/* ==========================================================================
   1. ESTILOS GLOBALES Y DE BASE
   ========================================================================== */
body.modal-open {
  height: fit-content;
}

.logo-image {
  width: 121px;
  max-width: 121px;
  cursor: pointer;
}

/* ==========================================================================
    2. ESTILOS COMPARTIDOS PARA HEADER Y NAV
    ========================================================================== */
.site-header,
.site-nav {
  background: var(--primary800);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  position: relative;
  height: 52px;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
}

.site-nav {
  position: sticky !important;
  top: 52px;
  padding: 12px 32px;
}


.site-header .mdl-ul,
.site-nav .mdl-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  width: 100%;
}

.site-header .span-language {
  border-left: 1.9px solid var(--primary800);
}

.site-header #btnLocation {
  display: contents;
}

.site-header #btnLocation span {
  padding: 2px 6px;
}

.site-header li,
.site-nav li {
  height: inherit;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

.site-header a,
.site-nav a {
  color: white;
}

/* ==========================================================================
    3. ESTILOS DEL HEADER (.site-header)
    ========================================================================== */
.site-header .mdl-ul {
  gap: 15px;
  padding: 8px 12px;
  align-self: stretch;
}

.site-header .mdl-ul>li {
  height: 40px;
}

.site-header.private-zone-header .mdl-ul>li:has(> .search-header-container) {
  width: 440px;
}

.private-zone-header.site-header .mdl-ul>li:has(> .changeLocationNF) {

  margin-left: auto;
}

.site-header .mdl-ul>li:has(> #private-zone-menu-btn) {
  display: none;
}

.site-header .mdl-ul .primary span {
  color: white;
}

.site-header .mdl-button {
  padding: 8px;
}

.title-search-result {
  color: var(--neutrals1000);
  font-family: "Noto Sans", serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px
}

.search-results-zona-privada-list li {
  padding: 8px;
}

.search-results-zona-privada-list li a {
  color: var(--neutrals900);
  font-family: "Noto Sans", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  padding: 0 8px;
}


.sidebar-private-zone-menu .mdl-ul {
  position: relative;
}

.search-active {
  width: 100%;
  display: flex;
  position: absolute;
  top: 0px;
  left: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.private-zone-header.site-header.private-zone-header .mdl-ul>li.search-active:nth-child(3) {
  position: absolute !important;
  width: 100%;
  top: 0px;
  margin-left: 0px;
  height: 5vh;
  z-index: 999;
  background: #F9F1FF;
}

.search-active input {
  display: flex !important;
  right: -100%;
  top: -2px;
  margin-left: 0px;
  padding: 16px;
  width: 100%;
  border: 1px solid var(--primary800);
}

.private-zone-header .search-active .icon-search-btn {
  right: 10px;
  position: absolute;
  top: 5px;
}

.site-header.private-zone-header .search-active .search-header-container .icon-search-btn {
  background-color: transparent;
}

.icon-close-search-mobile {
  display: none;
  border: none;
  background: none;
  width: 30px;
}

@media (max-width: 920px) {
  .search-active .icon-close-search-mobile {
    display: block;
  }
}

.site-header.private-zone-header ul.search-results-zona-privada-list:not(.notifications-list) li:nth-child(3):not(:has(.search-header-container)) {
  margin-left: unset;
}

.highlight-temp {
  border-radius: 16px;
  transition: box-shadow 0.4s ease;
  border: 2px solid var(--primary800);
  outline-offset: 2px;
  box-shadow: 0 8px 16px -8px rgba(89, 88, 88, 0.08);
}

/* --- Componentes del Header --- */
.search-header-container {
  display: flex;
  align-items: center;
  padding: 0 5px 0 15px;
  border-radius: 25px;
  width: 100%;
  background-color: white;
  border: 1px solid var(--primary800);
}

.search-header-container input {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 12px;
  height: 34px;
  background-color: white;
  border-radius: 20px;
  ;
}

.search-header-container .icon-search-btn {
  border: none;
  cursor: pointer;
  color: var(--primary800);
  border-radius: 30px;
  background-color: white;
}

.site-header #btnLogin {
  height: 40px;
  padding: 16px 24px;
}

.site-header #btnFollow i,
.site-header #btnShopCar i,
.logInIcon,
#btnShopCora {
  font-size: 28px;
}

#btnFollow {
  min-width: fit-content;
}



#btnLocation {
  justify-content: center;
}

.logInIcon {
  display: none;
  /* Se muestra solo en móvil */
  color: var(--primary800);
}

/* ==========================================================================
    4. ESTILOS DE NAVEGACIÓN PRINCIPAL (.site-nav)
    ========================================================================== */
.site-nav .mdl-ul {
  justify-content: center;
  gap: 8px;
}

.site-nav li {
  padding: 4px 8px;
}

.site-nav button {
  border: unset;
  background-color: unset;
  color: white;
}

.site-nav li a,
.site-nav li button {
  gap: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* --- Contenedor de búsqueda en Nav (móvil) --- */
.nav-search-container {
  display: none;
  /* Se muestra solo en móvil */
  padding: 8px 16px;
  background-color: #EDE1F5;
}

/* --- Submenú Nivel 2 --- */
.site-nav .container-submenu {
  position: absolute;
  top: 115%;
  width: max-content;
  min-width: 280px;
  gap: 32px;
  border-radius: 0 0 10px 10px;
  background-color: white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  z-index: 9;

}

.modal-change-location-container {
  display: flex;
}

.modal-change-location-container:not(.hidden) {
  z-index: 99999;
}

.modal-change-location-container:not(.hidden) .modalLocation {
  display: flex;
  z-index: 10;
}

.modalContainer~.select2-container--open .select2-dropdown--below {
  z-index: 99999;
}

.site-header #btnLocation {
  display: block ruby;
}

.changeLocationNF:hover {
  background: var(--primary100);
}

.site-header {
  height: fit-content;
  display: block;
}

.notice-bar {
  width: 100%;
  height: 40px;
  background: var(--primary100);
  position: sticky;
  top: 0px;
  padding: 5px;
  display: flex;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--primary)
}

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

.notice-bar-close {
  background: none;
  position: absolute;
  right: 10px;
  border: none;
}

.modalContainer .modal-change-location-container {
  z-index: 99999
}

.modalContainer .select2-container {
  z-index: 12;
}

.warning-notice,
.warning-notice .notice-bar-text {
  background: var(--secondary100) !important;
  color: var(--secondary900) !important;
}

.modalContainer .selectSBContainer {
  gap: 16px;
}

.inputZipCode .mdl-textfield {
  padding: 0px;

}

.modal-change-location-container .modalLocation .mdl-textfield__label {
  top: 10px;
}

.modal-change-location-container .mdl-textfield--floating-label.is-dirty .mdl-textfield__label {
  top: -13px;
}

@media screen and (max-width: 1299px) {

  .notice-bar-text {
    text-align: inherit;
  }

  .notice-bar {
    height: 62px;

  }

  .notice-bar span {
    width: 87%;
    ;
  }
}

.site-nav .container-submenu ul {
  padding: 16px 0;
}

.site-nav .container-submenu li {
  padding: 0 32px;
}

.site-nav .container-submenu a,
.site-nav .container-submenu button {
  color: #000;
  text-align: justify;
  width: 100%;
  justify-content: space-between;
  height: 48px;
  padding: 6px;
}

.site-nav .container-submenu li:hover {
  cursor: pointer;
}

.site-nav .container-submenu li:hover>button,
.site-nav .container-submenu li:hover>a {
  background-color: var(--primary200);
}

/* --- Submenú Nivel 3 --- */
.site-nav .third-level-container {
  position: absolute;
  left: 100%;
  top: 0;
  border-radius: 0 0 10px 10px;
  background-color: white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.site-nav .third-level-container.left-open {
  left: auto;
  right: 100%;
}

.site-nav .third-level-container ul {
  padding: 16px 12px;
  width: max-content;
}

.site-nav .third-level-container li {
  height: 48px;
}

.site-nav .third-level-container li:hover,
.site-nav .container-submenu a:hover {
  background-color: var(--primary200);
}

.menu-level-3 li {
  width: 100%;
}

.menu-element button,
.menu-element a {
  width: 100%;
  height: 48px;
}

/* ==========================================================================
    5. TRANSICIONES Y ESTADOS
    ========================================================================== */
.btn-submenu i,
.third-level-btn i {
  transition: transform 0.3s ease-in-out;
}

.site-nav .third-level-btn i {
  transition: transform 0.3s ease;
}

.site-nav .btn-submenu i {
  transition: transform 0.3s ease;
}

.rotate {
  transform: rotate(180deg);
  /* up → down */
}

/* Estado rotado para íconos de chevron */
/* .fa-chevron-up,
.fa-chevron-left {
  transform: rotate(180deg);
} */
/* actualiación OCT 2025 - Esto ocasionaba que todos los chevron-left no se pudiera rotar, 
ser más especificos a la hora de aplicar estilos así. (aplicarle una clase antes para que
solo aplique al menú o a esa sección en especial) */

.rotate {
  transform: rotate(-180deg);
  /* right → left */
}

/* ==========================================================================
    6. UTILIDADES Y BOTONES DE MENÚ
    ========================================================================== */
.menu-btn {
  display: none;
  /* Se muestra solo en móvil */
}

#menu-btn-new {
  overflow: visible;
}

.hide-in-desktop {
  display: none;
}

.log-in-mobile-button {
  height: 40px;
  width: 40px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.log-in-mobile-button i {
  transform: unset !important;
  font-size: 40px;
}

.hide-in-desktop.log-in-mobile-button {
  display: none !important;
}

/* ==========================================================================
    7. MEDIA QUERIES (DISEÑO RESPONSIVO)
    ========================================================================== */

/* --------------------------------------------------------------------------
    7.1. DESKTOP (1280px y más)
    -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  #btnFollow span {
    display: block;
  }

  .site-header {
    background: white;
  }

  .site-nav {
    max-height: unset;
  }
}

/* --------------------------------------------------------------------------
    7.2. TABLET GRANDE (hasta 1279px)
    -------------------------------------------------------------------------- */
@media (max-width: 1279px) {

  .site-header {
    background-color: #fff;
  }

  .mdl-ul .mdl-button {
    min-width: unset;
  }

  .site-nav li {
    padding: 4px 2px;
  }

  .hide-in-tablet {
    display: none !important;
  }

  li:has(.changeLocationNF) {
    border-right: none !important;
  }

  li:has(#btnFollow) {
    border-right: none !important;
  }

}

/* --------------------------------------------------------------------------
    7.3. TABLET PEQUEÑA (Estilo especial entre 1024px y 1128px)
    -------------------------------------------------------------------------- */
@media (max-width: 1128px) {
  .site-nav {
    padding: 0px;
  }

  .site-nav li button {
    padding: 4px 2px;
  }

  .site-nav li a,
  .site-nav li button {
    gap: 8px;
    padding: 4px 8px;
  }
}

/* --------------------------------------------------------------------------
    7.4. MÓVIL (hasta 1023px)
    -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .site-header:not(.private-zone-header) .mdl-ul>li:has(> .search-header-container) .search-header-container .icon-search-btn {
    position: absolute;
    right: 30px;
    padding: 0px;
  }

  .search-header-container {
    padding: 0px !important;
  }

  .site-nav .mdl-ul {
    gap: 0;
    height: 100vh;
  }

  .btn-mobile-menu {
    border-bottom: 1px solid var(--neutrals400);
  }

  .hide-in-mobie {
    display: none !important;
  }

  .site-header .mdl-ul {
    gap: 0px;
    padding: 16px 8px;
    align-self: stretch;
  }

  .home-btn-container {
    border-top: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
  }

  /* --- Visibilidad de elementos --- */
  .hide-in-mobile {
    display: none !important;
  }

  .hide-in-desktop {
    display: block;
  }

  .menu-btn {
    display: flex;
  }

  .site-header ul {
    position: relative;
  }

  li:has(.search-header-container) {
    position: absolute;
    top: 72px;
  }

  .site-header .mdl-ul>li:has(> .search-header-container) {
    width: 100%;
    padding: 8px 16px;
    height: unset;
    background-color: var(--primary100);
    height: unset;

  }

  .site-header .search-header-container input {
    width: 100%;
  }

  .private-zone-header .site-header .search-header-container input {}



  .nav-search-container {
    display: flex;
  }

  .site-header #btnLogin {
    display: none;
  }

  .logInIcon {
    display: block;
  }

  /*Oculta todos los span excepto el que no tiene atributos de clase,
  como el span que contiene el nombre del país seleccionado*/
  #btnLocation span:not(:not([class])) {
    display: none;
  }

  /* --- Estructura y Layout del Menú Móvil --- */
  .site-nav {
    display: none;
    width: 100%;
    background-color: white;
  }

  .site-nav.mobile-open {
    display: flex;
    overflow: hidden;
    height: 100%;
    align-items: self-start;
  }

  .site-nav .mdl-ul {
    display: block;
    /* Cambia a layout vertical */
  }

  /* --- Estilos de los elementos del menú móvil --- */
  .site-nav li {
    justify-content: start;
    padding: 0 0px;
  }

  .site-nav li.selected {
    display: block;
  }

  .site-nav li a,
  .site-nav li button {
    color: var(--primary);
    justify-content: start;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }

  .site-nav li .btn-submenu i {
    transform: rotate(270deg);
    position: absolute;
    right: 24px;
    font-size: 16px;
    font-weight: 500;
  }

  .menu-element button:hover,
  .menu-element a:hover,
  .btn-submenu:hover {
    background-color: var(--primary200);
  }

  /* --- Estilos de submenús en móvil --- */
  .site-nav .container-submenu,
  .site-nav .third-level-container.left-open {
    position: static;
    width: 100%;
    box-shadow: none;
  }

  .site-nav li .btn-submenu i {
    transform: rotate(270deg);
    position: absolute;
    right: 24px;
  }

  .menu-element button:hover,
  .menu-element a:hover,
  .btn-submenu:hover {
    background-color: var(--primary200);
  }

  /* --- Estilos de submenús en móvil --- */
  .site-nav .container-submenu,
  .site-nav .third-level-container.left-open {
    position: static;
    width: 100%;
    box-shadow: none;
  }

  .site-nav .third-level-container.left-open {
    display: contents;
    /* Permite que los hijos se integren en el layout */
  }

  .site-nav .container-submenu ul {
    padding: 0;
    width: 100%;
  }

  .site-nav .container-submenu li {
    padding: 0 16px;
    margin: 6px 0;
  }

  /* --- Estilos para elementos seleccionados (activos) --- */
  .menu-element.selected>.btn-submenu:first-of-type {
    color: var(--primary1000);
    border-bottom: 1px solid var(--primary800);
    font-weight: 700;
    padding-left: 42px;
  }

  .site-nav li.selected .btn-submenu i {
    left: 24px;
    right: unset;

  }

  .menu-level-2 li.selected .third-level-btn {
    color: var(--primary1000);
    border-bottom: 1px solid var(--primary800);
    font-weight: 700;
    padding-left: 42px;
  }

  .menu-level-2 li.selected .third-level-btn i {
    left: 24px;
    right: unset;
    position: absolute;

  }
}

@media (max-width: 1023px) {
  .site-header .mdl-ul>li:has(> .search-header-container) {
    position: static;
    width: fit-content;
    border: none;
    background-color: transparent;
    font-size: 24px;
    padding: 0px;
  }
}

nav ul.mdl-ul li .search-header-container {

  background-color: transparent;
}

.site-header :not(.site-nav) .mdl-ul>li:nth-child(4) {

  margin-left: auto;
}


nav ul.mdl-ul li:has(.search-header-container) {}

nav ul.mdl-ul li .search-header-container {

  background-color: transparent;
}

.site-header .mdl-ul>li:has(> .search-header-container) {
  margin-left: 0px;
  width: 400px;
}



.site-header :not(.site-nav) .mdl-ul>li:nth-child(4) {

  margin-left: auto;
}

nav ul.mdl-ul li:has(.search-header-container) i {

  font-size: 21px;
  font-weight: unset;
}

@media screen and (max-width: 920px) {
  .site-header .mdl-ul>li:has(> .search-header-container) {
    width: 100%;
    position: absolute;
    left: 0px;
    background-color: var(--primary100);
    padding: 8px 18px;
  }

  .site-header:not(.private-zone-header) .mdl-ul>li:has(> .search-header-container) .search-header-container .icon-search-btn {
    position: absolute;
    right: 30px;
    padding: 0px;
  }

  .site-header .mdl-ul>li:has(> .search-header-container) .search-header-container {
    width: 100%;
    padding: 0px;
  }

  #addressInfo-field .mdl-textfield.outline .mdl-textfield__label {
    padding: 0px !important;
  }

  #addressInfo-field.is-focused .mdl-textfield__label {
    top: 4px !important;
  }
}

/* ==========================================================================
  ****************** FINAL DE ESTILOS PARA EL NUEVO MENÚ. ************************
   ========================================================================== */
/* ==============================================
       Registro
============================================== */
/*.col-lg-4.col-5.pr-0:has(.country-code),
.col-lg-8.col-7:has(#phone) {
    min-height: 5.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}*/
#step3 .col-12:has(#terms-1) {
  margin-top: 10px;
}


.toast-info-address-c {
  margin-top: 16px;

}

.toast-info-address-c .col-11 .col-12 {
  padding-bottom: 0px !important;

}


.is-invalid .info-input-text {
  visibility: hidden;
}

.info-input-text {
  font-size: 12px;
  height: 2rem;
  color: var(--neutrals1000);
}

.col-md-6 #addressInfo-field {
  font-size: clamp(10px, 2vw, 16px);
}



@media screen and (max-width: 920px) {


  .info-input-text {
    font-size: 11px;
    line-height: 14px;
  }

  a.modalContract {
    border-radius: 0px;
  }

  a.modalContract span {
    text-align: left;
  }

  #modal-distribuidor {
    height: fit-content;
  }

  #modal-distribuidor .modal__inner {
    height: fit-content !important;
  }

  #step2-1 .mdl-checkbox .modalTerms {
    padding: 0px;
  }
}

a.modalTerms {
  overflow: visible;
}

.address-info-check {
  padding: 8px;
  display: flex;
  align-items: center;
}

.address-info-check button {
  padding: 0px 8px !important;
}


.private-nav {
  background: #F9F1FF;
}

.login-from {
  padding: 8px;
}

.topNavContainerPrivate,
.private-nav .topNavContainerDesktop,
.private-nav .topNavContainerMobile {
  display: none;
}

.private-nav .topNav {
  background: none;
  padding: 8px 0;
  height: auto;
}

.private-nav .topNavContainerPrivate {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.register-cards-container label.mdl-radio.outline {
  flex: 1;
}

.register-cards .mdl-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.register-cards .mdl-radio__outer-circle,
.register-cards .mdl-ripple--center,
.register-cards span.mdl-radio__inner-circle {
  display: none;
}

.register-cards .mdl-card {
  display: flex;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-radius: var(--Radius-Radius-xl, 16px);
  text-align: center;
  justify-content: space-around;
  color: var(--neutrals1000);
  max-width: 100%;
}

.register-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.register-cards .card-image {
  background: var(--neutrals100);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.register-cards .mdl-card:hover .card-image {
  background: var(--primary100);
}

label.mdl-radio.outline.is-upgraded.is-checked .card-image {
  box-shadow: 0 0 100px 10px inset var(--primary200);
  transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  overflow: hidden;
}


.register-cards .card-image img {
  max-width: 240px;
}

.register-kits .register-cards-container label.mdl-radio.outline {
  padding: 0;
  border-radius: 1rem;
  min-width: 240px;
}

.kit-cont label.mdl-radio {
  padding: 0 !important;
}

.register-kits .mdl-card-content.color-neutral5 {
  padding: 16px;
}

.kit-cont.col-lg-4.active {
  margin-top: 20px;
}

.register-kits .custom-row {
  display: flex;
  align-items: flex-end;
  align-content: flex-end;
}

.register-kits label.mdl-radio.is-checked img,
.register-kits label.mdl-radio:hover img {
  transform: scale(1.1);
  transition: var(--transition);
}

.register-footer,
.addressmodal-footer,
.checkout-footer {
  display: flex;
  width: 100%;
  position: sticky;
  bottom: 0;
  padding: 1rem 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
  box-shadow: 0 -20px 50px -29px #0000003b;
}

.register-footer .button-container,
.addressmodal-footer .button-container,
.checkout-footer .button-container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}


.progress {
  width: 100%;
  display: table;
  position: relative;
  text-align: center;
  padding: 8px 0px 0px 0px;
}

.progress ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 15px;
}

.progress ul li {
  background-color: #d6d6d6;
  display: flex;
  width: 100%;
  position: relative;
  height: 2px;
  z-index: -3;
  transition: background-color 0.75s, color 0.5s;
  border-radius: 10px;
  align-items: center;
}

.progress ul li::before {
  content: '';
  width: 16px;
  height: 16px;
  line-height: 0px;
  text-align: center;
  left: -15px;
  background-color: #f8f8f8;
  /* Default Circle Color */
  border: solid 2px #d6d6d6;
  /* Default Circle Color */
  index: -9;
  position: absolute;
  display: block;
  top: -8px;
  margin-right: auto;
  margin-left: auto;
  z-index: -1;
  transition: background-color 0.75s, color 0.5s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

/* CURRENT STEP */
.progress ul li.current {
  display: inline-block;
  width: 100%;
  z-index: -3;
  color: var(--primary700);
  position: relative;
  transition: background-color 0.75s, color 0.5s;
  font-weight: 700;
}

.progress ul li.current::before {
  border: solid 2px #914BC1;
  /* Current Step Circle Color */
  background-color: #FFF;
  transition: background-color 0.75s, color 0.5s;
  -webkit-animation: pulse 3s ease-out;
  -moz-animation: pulse 3s ease-out;
  animation: pulse 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* COMPLETED STEPS */
.progress ul li.complete {
  background-color: #914BC1;
  /* Completed Step Bar Color */
  transition: background-color 0.75s, color 0.5s;
}

.progress ul li.complete::before {
  background-color: #914BC1;
  /* Completed Step Circle Color */
  border: 1px solid transparent;
  transition: background-color 0.75s, color 0.5s;
}

/* REMOVE FIRST STEP COLOR BAR LINE */
.progress ul li:last-of-type {
  background-color: transparent;
  width: 224px;
}

.progress ul li.current:last-of-type,
.progress ul li.complete:last-of-type {
  background-color: transparent;
}

.prog-title {
  display: flex;
  position: absolute;
  top: -24px;
  left: -60px;
  text-align: center;
  width: 100%;
  min-width: 140px;
}

.progress ul.prog-titles li {
  background: none;
  height: 0;
  position: relative;
  text-wrap: nowrap;
}

.progress ul.prog-titles li.complete::before,
.progress ul.prog-titles li::before,
.progress ul.prog-titles li.current::before,
.prog-counter {
  display: none;
}


@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1, 1);
  }

  50% {
    -webkit-transform: scale(1.1, 1.1);
  }

  100% {
    -webkit-transform: scale(1, 1);
  }
}

@-keyframes pulse {
  0% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.1, 1.1);
  }

  100% {
    transform: scale(1, 1);
  }
}


.register-kits .card-image img {
  max-height: 220px;
  margin: auto;
}

.register-kits .outline span.mdl-radio__outer-circle {
  display: none;
}

.register-kits .outline .mdl-radio__label {
  top: 220px;
  position: absolute;
  z-index: 2;
  left: 0;
  margin: 1rem;
  color: var(--primary4);
}

.register-kits .outline span.mdl-radio__inner-circle {
  display: none;
}

.register-kits .mdl-radio__ripple-container {
  display: none;
}

.register-kits .card-image {
  background: var(--neutrals100);
  overflow: hidden;
}

#partitioned {
  letter-spacing: 53px;
  border: 0;
  outline: none;
  z-index: 9;
  position: relative;
  background: none;
  font-family: monospace;
  overflow: visible !important;
  padding: 0px 21px;
  text-align: left;
  width: 130%;
  display: flex;
}

#divInner {
  left: 0;
  position: relative;
  width: 240px;
  text-align: center;
  padding: 1px;
  overflow: visible;
}

#divOuter {
  width: 100%;
}

.inner-sqare {
  border: 1px solid;
  flex: 1;
  height: 56;
  border-radius: 8px;
}

.inner-sqares {
  display: flex;
  position: absolute;
  width: 100%;
  gap: 8px;
  overflow: visible;
  top: -20px;
}

#divOuter {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.kit-lang {
  display: none;
  padding: 0px;
  background: var(--primary1);
  border-radius: 8px;
  color: var(--primary5);
  gap: 8px;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  padding-left: 16px;
}

.kit-cont.active .kit-lang {
  display: flex;
}

.kit-cont label.mdl-radio .button-container {
  display: flex;
  justify-content: flex-end;
}

.switch-field {
  display: flex;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  border: 1px solid var(--neutral3);
}

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  color: var(--neutral5);
  line-height: 1;
  text-align: center;
  padding: 8px 16px;
  margin-right: -1px;
  transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked+label {
  background-color: var(--neutrals200);
  box-shadow: none;
  color: var(--primary600);
  font-weight: 700;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

#info-kits {
  max-width: 400px;
  padding: 1rem;
  width: 90%;
  height: fit-content;
}

#info-kits .modal__inner {
  height: fit-content !important;

}

.mdl-modal__header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.modal.alert .modal__title.highlight {
  position: initial;
}

.mdl-modal {
  border-radius: 1rem;
}

.mdl-modal__header .modal-close,
.mdl-button.icon {
  padding: 0;
  min-width: 36px;
  height: 36px;
}

#step2-1,
#step2-2,
.progress ul.desk,
.progress-containe,
.reg-step-buttons,
.sel-whats,
.sel-email,
.sel-sms {
  display: none !important;
}

#step2-1.active,
#step2-2.active,
.progress-container.active,
.reg-step-buttons.active,
.sel-whats.active,
.sel-email.active,
.sel-sms.active {
  display: flex !important;
}

.sel-sms .mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label,
.sel-sms .mdl-textfield--floating-label.outline.is-focused .mdl-textfield__label,
.sel-sms .mdl-textfield--floating-label.outline.has-placeholder .mdl-textfield__label {
  top: -8px !important;
}

label.mdl-checkbox .mdl-button.link {
  padding: 0;
}

.big-icon.success {
  background: var(--success100);
  color: var(--success1000);
}

.big-icon.error {
  background: var(--error100);
  color: var(--error700);
}

.big-icon.warning {
  background: var(--warning100);
  color: var(--warning700);
}

.big-icon.info {
  background: var(--info100);
  color: var(--info700);
}

.big-icon {
  padding: 2rem;
  display: inline-block;
  position: relative;
  margin: auto;
  border-radius: 100%;
  background-color: var(--primary100);
}

.big-icon svg {
  width: 40px;
}

.mdl-textfield.is-verified .mdl-textfield__input {
  border: 1px solid var(--success1000);
}

.mdl-textfield.is-verified:after {
  content: "\f058";
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
  position: absolute;
  width: 20px;
  z-index: 99;
  top: 35px;
  right: 10px;
  color: var(--success1000);
  font-size: 20px;
}

.eo-code-field.mdl-textfield.is-verified:after {
  top: 50px;
}

#id_num1-field {
  padding: 0px;
}

#step2 #eo-code-field,
#step3 #eo-code-field {
  padding: 0px;
}

#register-root #step2-1 .mdl-textfield .mdl-textfield--icon.toggle-password,
#step1-1 .mdl-textfield .mdl-textfield--icon.toggle-password {
  top: 14%;
}

#step1-1 .mdl-textfield.is-invalid .mdl-textfield--icon.toggle-password {
  top: 10%;
}

#step1-1 .mdl-textfield.is-invalid .mdl-textfield--icon.toggle-password {
  top: 10%;
}

#step3 .col-md-4 #numero-field,
#step3 .col-md-8 #address-field {
  padding: 0px;
}

#info-kits .owl-nav {
  position: absolute;
  top: 130px;
  z-index: 99;
  left: -5px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#info-kits button.owl-next {
  margin: 0;
}

.selected-kit {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-start;
  border: 1px solid var(--primary600);
}

.selected-kit .card-image {
  max-width: 80px;
  flex: 1;
}

.selected-kit h3 {
  flex: 1;
  text-align: left;
}

/* ==============================================
       ZONA PRIVADA
============================================== */

@media screen and (max-width: 920px) {
  .summary-section>.custom-row {
    display: flex;
    flex-wrap: wrap;
  }

  /* Hacemos que las .card de ambas columnas estén al mismo nivel flex */
  .summary-section>.custom-row>.col-md-6 {
    flex: 1 1 100%;
    display: contents;
  }

  /* Ahora sí podemos controlar el orden */
  .summary-section .card.profile-card {
    order: 1;
  }

  .summary-section .card.earnings-card.card--money {
    order: 2;
  }

  .summary-section .card.earnings-card.card--points {
    order: 3;
  }

  .summary-section .card.level-card {
    order: 4;
  }

  .summary-section .career-level-card {
    order: 5;
  }

  .summary-section .card.level-card:has(.comparation-filter) {
    order: 6;
  }

  .summary-section .container-dash-elements {
    order: 7;
  }

  .summary-section .col-12:has(.container-chart) {
    order: 99;
  }

  .card,
  .container-dash-elements {
    width: 100%;
    margin: 10px;
  }

  .tracking-list-container .card {
    margin: 0px;
  }

  .org-points.empty-state.card {
    margin: 0px;
  }

  .private-zone-header .mdl-ul li:nth-child(4) {
    margin: unset !important;
  }
}

.private-zone-content .mdl-modal:not(.modal-obj-lvl, .modal-nxt-lvl) {
  max-width: 560px;
}

.private-zone-content .mdl-modal.modal-nxt-lvl {
  display: flex;
}

.modal-links button.tab-button.mdl-button {
  background-color: white;
}

.private-zone-header a {
  color: var(--primary);
}

.private-zone-header {
  border-bottom: 1px solid var(--primary400);
  background: #F9F1FF !important;
  height: fit-content;
}

.sidebar-logo-container-mobile:not(.profile) {
  display: none;
}

.site-header.private-zone-header .mdl-ul>li:nth-child(3) {
  width: unset;
}

.site-header.private-zone-header:not(.profile) .mdl-ul>li:nth-child(4) {
  margin-left: auto;
}

.btn-submenu i:not(.fa-chevron-down) {
  font-size: 30px;
  ;
}

.private-zone-header #btn-profile,
.site-header ul #btn-profile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  border: none;
  color: var(--primary);
}

.private-zone-header #btn-profile span,
.site-header ul #btn-profile span {
  text-decoration: underline;
}

.toast-notification {
  border-radius: 100px;
  height: 8px;
  width: 8px;
  background: var(--secondary500);
  display: none;
}

#btn-notifications.mdl-button {
  padding: 8px;
  min-width: unset;
}

.private-zone-header .toast-notification {
  position: absolute;
  right: 0px;
  top: 3px;
}

.sidebar-private-zone-menu {
  position: absolute;
  background-color: var(--primary900);
  padding: 0 0 32px 32px;
  align-items: flex-start;
  gap: 16px;
  width: 353px;
  height: 100vh;
  color: white;
  left: 0px;
  top: 0px;
  gap: 24px;
  z-index: inherit;
}

.main-menu-private-zone {
  margin: 0px;
  padding: 0px;
}

.main-menu-private-zone .menu-element .btn-submenu {
  position: relative;
}

.main-menu-private-zone .menu-element .fa-book-open {
  font-size: 30px;
}

.main-menu-private-zone .menu-element .btn-submenu i:last-child:not(:first-child) {
  position: absolute;
  right: 16px;
}

.site-header .sidebar-private-zone-menu li {
  height: auto;
  display: flow;
  color: white;
}

.name-menu-private-zone {
  margin: 24px 0px;
}

.site-header .sidebar-private-zone-menu li a {
  padding: 1px 6px;
}

.site-header .sidebar-private-zone-menu .menu-level-2 {
  border-left: 1px solid var(--primary500);
  padding-left: 8px;
}

.site-header .sidebar-private-zone-menu .menu-level-2 li a {
  color: white;
  height: auto;
  padding: 8px 12px;
}

.site-header .sidebar-private-zone-menu .menu-element-zona-empresarios .menu-level-2 {
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
}

.site-header .sidebar-private-zone-menu .menu-element-zona-empresarios .menu-level-2 li:before {
  content: none;
}

.sidebar-logo-container {
  padding: 24px 0 16px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-logo-container img {
  width: 150px;
  height: 40px;
}

.sidebar-logo-container-mobile img {
  width: 150px;
  height: 40px;
  display: none;
}

.private-zone-content {
  height: 10rem;
  background-color: #F7F6F6;
  margin-left: 353px !important;
}

.private-zone-content main {
  padding: 32px;
  display: grid;
  gap: 32px;
}

.omnilife-v2.pt-4.private-zone-content {
  padding-top: 0px !important;
  height: fit-content;
}

.omnilife-v2.pt-4 {
  padding-top: 4rem;
}

.sidebar-private-zone-menu .btn-submenu,
.sidebar-private-zone-menu .menu-element a {
  display: flex;
  justify-content: start;
  align-items: center;
  border: none;
}

.private-zone-header .search-header-container input {
  width: 372px;
  margin-left: 10px;
}

.private-zone-content main.follow-up-section-container {
  gap: 4px;
}

.sidebar-private-zone-menu .btn-submenu.selected {
  background-color: var(--primary700);
  border-right: 4px solid var(--secondary600);
  padding: 16px 16px 16px 8px;
  height: 64px;
}

.sidebar-private-zone-menu .menu-level-2 li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0px;
}

#btn-notifications i {
  font-size: 24px;
  font-weight: 500px;
}

.sidebar-private-zone-menu .menu-level-2 li a {
  display: flex;
  align-items: center;
}

.sidebar-private-zone-menu .menu-level-2 li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--secondary);
  flex-shrink: 0;
}


.sidebar-private-zone-menu .menu-element>a,
.sidebar-private-zone-menu .menu-element>button {
  color: white;
  border-radius: 8px 0 0 8px;
  background-color: transparent;
  gap: 8px;
}

.sidebar-private-zone-menu .menu-element>a:hover,
.sidebar-private-zone-menu .menu-element>button:hover {
  background: rgba(255, 255, 255, 0.20) !important;
}

.sidebar-private-zone-menu .container-submenu {
  padding: 12px 0 12px 24px;
}

.menu-level-2 li.selected {
  font-weight: 700;
}

.sidebar-private-zone-menu .container-submenu li:hover>button,
.sidebar-private-zone-menu .container-submenu li:hover>a {
  background: rgba(255, 255, 255, 0.20) !important;
}

.modal-info-user.mdl-modal {
  position: absolute;
  background-color: white;
  display: grid;
  min-width: 100px;
  box-shadow: 12px 24px 32px 12px rgba(89, 88, 88, 0.20);
  border-radius: 12px;
  display: flex;
  width: 382px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transform: none;
  left: auto !important;
  top: 140%;
  right: 0px;
  overflow-y: auto;
}

.modal-info-user-content,
.modal-info-user-footer {
  width: 100%;
  ;
}

.modal-info-user-content ul,
.modal-info-user-footer ul {
  padding-left: 0px;
  gap: 8px;
  display: grid;
}

.modal-info-user-content li,
.modal-info-user-footer li {
  display: flex;
  justify-content: start;
  padding: 8px;
  gap: 8px;
  color: var(--neutrals900);
}

.modal-info-user-content li:hover,
.modal-info-user-footer li:hover {
  background: var(--neutrals100);
  border-radius: 8px;
}

.modal-info-user-content a:active {
  color: var(--primary);
}


.modal-info-user-content li a,
.modal-info-user-content li button,
.modal-info-user-footer li a,
.modal-info-user-footer li button {
  color: var(--neutrals900);
  width: 100%;
  display: inline-flex;
  gap: 8px;
  align-items: center;

}

.modal-info-user-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
  width: 100%;
  justify-content: space-between;
}

.user-code-span {
  display: flex;
  padding: 4px 8px;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  background: var(--primary100);
  width: fit-content;
  color: var(--primary);
}

.user-name {
  font-family: "Noto Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: right;
}

.user-role {
  color: var(--neutrals800);
  font-family: "Noto Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  display: flex;
}


.section-dashboard-title i,
.title-level i {
  color: var(--secondarycolor);
  padding: 4px;
  cursor: pointer;
}

.modal-info-user-header .info-user-container {
  width: -webkit-fill-available;
  min-width: unset !important;
}

.modal-info-user-header .img-distributor-image {
  min-width: 40px;
}

.modal-alert {
  max-width: 30rem !important;
}

.modal-alert-content {
  padding: 8px 16px;

}

.modal-alert-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 8px;
}

.modal-alert-footer button {
  max-width: 12rem;
}

.modal-alert-footer button.close-modal.close-drawer {
  padding: 8px 16px;
}

.close-user-container i {
  font-size: 25px;
}

.modal-info-user-header .img-distributor-image {
  min-width: 40px;
}

.close-user-container i {
  font-size: 25px;
}

.private-zone-header .mdl-ul .modal-info-user-content li,
.private-zone-header .mdl-ul .modal-info-user-footer li {
  width: 100%;
}

.separator-menu {
  border: none;
  height: 1px;
  background-color: var(--neutrals400);
  width: 100%;
  margin: 0px !important;
}

.title-private-zone {
  font-family: "Noto Sans" !important;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 600;
  line-height: 24px !important;
  color: var(--neutrals1000);
  display: flex;
  height: 24px;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;

}

.btn-shortcuts {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 0px;
  background-color: white;
  max-width: 12rem;

}

.btn-shortcut:hover span {
  color: var(--primary600);
}

.btn-shortcuts span {
  text-align: center;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.btn-shortcuts i {
  color: var(--primary600);
  font-size: 32px;
}

.card {
  border-radius: 12px;
  border: 1px solid var(--neutrals400);
}

.level-card {
  gap: 16px;
}

.summary-section {
  gap: 16px;
  display: grid;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.summary-grid .card {
  background-color: white;
  display: flex;
  padding: 16px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
  position: relative;
  gap: 16px;
}

.level-header h4 {
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.level-header,
.nxt-lvl-span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.level-img-icon {
  height: 40px;
  width: 40px;
}

.btn-shortcuts-container {
  display: flex;
  gap: 12px;
}

.float-span {
  position: absolute;
  top: 16px;
  right: 16px;
  border-radius: var(--Spacing-2, 8px);
  display: flex;
  padding: 4px 8px;
  align-items: center;
  gap: 4px;
  z-index: 1;
}

.modal-open .float-span,
.modal-open .footer-profile-card {
  z-index: 0;
}

.float-span.user-code {
  color: var(--secondary900);
  background-color: var(--secondary100);
}

.float-span.tag-info {
  color: var(--info900);
  background-color: var(--info100);
}

.points-section .tab-container {
  width: 100%;
}

.points-section button.tab-button.mdl-button {
  background-color: white;
  border-bottom: 1px solid var(--Color-Neutral-Neutrals400, #D3D3D3);
}

.points-section .tab-button.active .body-medium-medium {
  border-bottom: none;
}

.points-section .tab-content.bg-neutral {
  border-radius: 0 0 12px 12px;
  border-right: 1px solid var(--Color-Neutral-Neutrals400, #D3D3D3);
  border-bottom: 1px solid var(--Color-Neutral-Neutrals400, #D3D3D3);
  border-left: 1px solid var(--Color-Neutral-Neutrals400, #D3D3D3);
  background: var(--Color-Neutral-Base-White, #FFF);
  padding: 0px;
}

.category-card-container {
  display: grid;
  gap: 20px;
}

.category-card {
  border-radius: 12px;
  border: 1px solid var(--neutrals200);
  background: var(--neutrals100);
  padding: 12px;
  gap: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}

.profile-card {
  background-image:
    linear-gradient(to right, var(--primary1000), var(--primary600));
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  color: white;
  padding: 16px;
  gap: 8px;
  display: grid;
}

.profile-card .title-level {
  color: var(--Semantic-Warning-200, #FFF2C2);
  font-family: "Noto Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.profile-card .title-level b {
  font-weight: 700;
}

.orange-deco {
  position: absolute;
  bottom: -70px;
  right: -76px;
  width: 12rem;
  height: 12rem;
  background: var(--secondary);
  border-radius: 50%;
  z-index: 0;
}

.qr-button {
  background-color: #FAF2FF;
}

.qr-button span {
  color: #2F2F2F;
}

.purple-deco {
  position: absolute;
  top: -45px;
  right: -80px;
  width: 150px;
  height: 150px;
  background: #DAC3EA;
  border-radius: 50%;
  z-index: 0;
}

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

/* .private-zone-content .mdl-button {
  padding: 8px 16px;
} */


.card-level-actions {
  display: flex;
  justify-content: end;
}

.amount-w {
  color: var(--neutrals1000) !important;
  font-family: "Noto Sans" !important;
  font-size: 40px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 40px !important;
}

.amount-txt,
.trend-info,
.amount-txt.label-medium,
.nxt-lvl-span {
  color: var(--neutrals900) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;
}

.nxt-lvl-span b {
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 24px !important;
}

.trend-status-up {
  color: #38AC82;
}

.trend-status-down {
  color: #ac3838;
}

.card-level-content {
  width: 100%;
}

.card-level-content .progress .prog-bars {
  overflow: clip;
  padding: 0px;
  margin-bottom: 8px;
}

.card-level-content .progress .prog-bars {
  overflow: clip;
  padding: 0px
}

.card-level-content .progress ul li {
  z-index: auto !important;
  height: 4px;
}

.card-level-content .progress ul li.current:last-of-type,
.card-level-content .progress ul li.complete:last-of-type {
  width: 100%;
}

.card-level-content .progress ul li.current:last-of-type {
  background-color: #d6d6d6;
}

.card-level-content .progress ul li.complete:last-of-type {
  background-color: var(--primary700);
}

.nxt-lvl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.points-chart-container {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}

.points-chart-container:has(.col-chart-container) {
  justify-content: center;
}

.col-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.title-points-chart {
  color: var(--neutrals900);
  font-family: "Noto Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.chart-points-info {
  display: grid;
  color: var(--neutrals1000);
  text-align: center;
  font-family: "Noto Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}

.chart-points-info span {
  padding: 4px;
  gap: 2px;
}

.col-chart-container i {
  font-size: 12px;
}

.plds-1 {
  color: var(--primary100);
}

.plds-2 {
  color: var(--secondary100);
}

.points-1 {
  color: var(--primary600);
}

.points-2 {
  color: #FE9925;
}

.private-zone-content .mdl-modal {
  padding: 16px;
}

.modal-qr-footer,
.modal-material-footer {
  padding: 16px;
  gap: 16px;
  display: grid;
}


.modal-qr-content {
  display: grid;
  justify-content: center;
  align-items: center;
}

.modal-qr-content span {
  justify-content: center;
  align-items: center;
  display: flex;
  color: var(--Color-Neutral-Neutrals900, #595858);
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.modal-qr .modal-notifications-header {
  justify-content: space-around;
  align-items: center;

}

.modal-alert.mdl-modal .modal-notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.modal-notifications .tab-container {
  display: grid !important;
}

.modal-notifications-content {
  overflow: hidden;
}

.modal-qr .modal-notifications-header span,
.modal-alert-header span {
  color: var(--neutrals900);
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  width: 100%;
}

.modal-qr .modal-notifications-header .mdl-button,
.modal-nxt-lvl .modal-notifications-header .mdl-button,
.private-zone-content .modal-links .mdl-button {
  padding: 0px;
}

.objetives-list li>span {
  max-width: 70%;
}

.objetives-list li>.obj-span {
  height: fit-content;
}

.img-qr-container {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.modal-qr .modal-notifications-header .mdl-button,
.modal-nxt-lvl .modal-notifications-header .mdl-button,
.private-zone-content .modal-links .mdl-button {
  padding: 0px;
}

.img-qr-container {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.objetives-grid {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.objetives-list-title {
  border-radius: 4px;
  background-color: var(--primary100);
  padding: 4px 8px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}

.objetives-list-title i {
  color: var(--primary600);
  font-size: 20px;
}

.earnings-filter-ctnr {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.comparation-filter {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--neutrals400);
  padding-bottom: 12px;
}

.comparation-filter {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.comparation-filter .switch-field label,
.points-data .switch-field label {
  padding: 4px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.year-input {
  border: none;
}

.yearpicker-items:hover,
.yearpicker-prev,
.yearpicker-next {
  color: #000;
  padding: 5px 1rem;
  height: 100%;
}

.yearpicker-prev:hover,
.yearpicker-next:hover {
  background-color: var(--primary100);
}

.yearpicker-header {
  justify-content: space-between;
}

.yearpicker-items {
  box-shadow: none;
  border-radius: 4px;
}

.yearpicker-items.selected {
  background-color: var(--primarycolor);
  border-color: var(--primarycolor);

  color: #fff;

}

.air-datepicker-cell.-selected- {
  background-color: var(--primarycolor) !important;
  color: #ffffff !important;
}

.air-datepicker-cell.-current- {
  color: var(--primarycolor) !important;
}

.air-datepicker-cell.-selected-.-current- {
  color: #fff !important;
}

.air-datepicker-cell:hover {
  background-color: var(--primary100) !important;
}

.air-datepicker-body--day-names {
  gap: 5px;

}

.air-datepicker-body--day-name {
  color: var(--primary);
  background-color: var(--primary100);
  border-radius: 4px;

}

.points-data input {
  border: none;
}

.info-pz-modal {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  color: #0A0A0B;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.4px;
  background-color: var(--primary100);
  text-align: left;
  min-width: 250px;
}

@media screen and (max-width: 920px) {
  .modal-notifications {
    left: 0px !important;
  }

  .modal-info-user,
  .modal-notifications {
    width: 100%;
    top: 0px !important;
    right: 0px !important;
    transform: unset !important;
    height: 100vh;
    overflow: scroll
  }
}

.actions-container * {
  display: grid;
  justify-content: center;
  align-items: center;
}

.actions-container a {
  text-decoration: underline;
}

.date-notification-ctnr {
  color: var(--neutrals800);
  text-align: center;
  font-family: "Noto Sans";
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.earnings-card .earnings-category-card div:first-of-type {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.category-card .span-amount {
  color: var(--primary600);

}

.title-accordion-pz {
  color: #2F2F2F;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.custom-datalabel {
  background-color: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 8px;
  text-align: left;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  position: absolute;
  text-align: center;
  overflow-wrap: break-word;
  left: -1.5rem;
  top: -50px;
  width: 10rem !important;
  z-index: 6;
  font-size: 15px;
}


.highcharts-label:nth-of-type(1) span .custom-datalabel {
  left: -6.2rem;
  top: 1.5rem;
}

.container-chart {
  background-color: white;
  display: grid;
  width: inherit;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid var(--neutrals400);
}

.highcharts-label:nth-of-type(1) span .custom-datalabel {
  left: -6.2rem;
  top: 1.5rem;
}

.container-chart {
  background-color: white;
  display: grid;
  width: inherit;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid var(--neutrals400);
}

.title-accordion-pz {
  color: #2F2F2F;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.custom-datalabel {
  background-color: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 8px;
  text-align: left;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  position: absolute;
  max-width: 8rem !important;
  text-align: center;
  overflow-wrap: break-word;
  left: -2rem;
  width: 9rem !important;
}

.custom-datalabel:nth-of-type(2) {
  left: -6.2rem;
  top: 2rem;
}

.container-chart {
  background-color: white;
  display: grid;
  width: inherit;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid var(--neutrals400);

}

.btn-notifications-pending .toast-notification {
  display: flex;
}

.btn-notifications-pending i {
  font-weight: 500 !important;
}

.modal-notifications.mdl-modal {
  background-color: white;
  position: absolute;
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  width: 415px;
  height: 455px;
  transform: none;
  top: 130% !important;
  left: auto !important;
  right: 0px;
  border-radius: 12px;
  box-shadow: 12px 24px 32px 12px rgba(89, 88, 88, 0.20);
  overflow: auto;
}

.modal-notifications .tabs {
  display: flex;
  margin: 12px 0px;
}

.modal-notifications .body-medium-medium {
  border-bottom: none !important;
}

.notifications-list li {
  padding: 8px;
  gap: 8px;
  border-bottom: 1px solid var(--neutrals200);

}

.modal-notifications .tab-button {
  height: fit-content;
  padding: 4px;
  border-bottom: 1px solid var(--neutrals400);
}

.modal-notifications button.tab-button.mdl-button {
  background: white;
}

.icon-container i {
  font-size: 20px;
}

.notification-title {
  font-family: "Noto Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  color: var(--neutrals900);
}

.label-bold {
  color: var(--neutrals900);
  font-family: "Noto Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px
}

.content-container {
  display: grid;
  gap: 4px;
}

.modal-notifications-content .tab-content ul {
  height: 344px;
  overflow-y: auto;
  justify-content: flex-start;
}

.modal-notifications-content .tab-content::after {
  content: '';
  /* Requerido para que el seudo-elemento se muestre */
  position: absolute;
  /* Lo posiciona sobre el contenedor padre */
  bottom: 0;
  /* Lo pega a la parte de abajo */
  left: 0;
  width: 100%;
  height: 75px;
  /* La altura del desvanecido, ajústala a tu gusto */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
}

.modal-notifications-content .tab-content {
  display: none;
}

.modal-notifications-content .tab-content.active {
  display: flex;
}

.modal-notifications-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.icon-container.warning i {
  color: #FFC90C;
}

.icon-container.info i {
  color: #357CBF;
}

.icon-container.success i {
  color: #01784D;
}

.modal-obj-nxt {
  min-width: 526px;
  padding: 24px;
  gap: 16px;
  color: var(--neutrals900);
}

.modal-nxt-lvl {
  min-width: 840px;
  padding: 24px;
  gap: 16px;
}

.objetives-list {
  list-style-type: none;
  gap: 8px;
  display: grid;
  padding-left: 0px;
  padding: 0px 12px;
}

.objetives-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.obj-span {
  display: flex;
  padding: 4px 8px;
  align-items: center;
  gap: 8px;
  border-radius: 8px;

}

.error-span {
  background-color: var(--error100) !important;
  color: var(--error800) !important;
}



.success-span {
  background-color: var(--success100);
  color: #01784D !important;
}

.info-span {
  background-color: #E1ECF7 !important;
  color: var(--info800) !important;
}

.orange-span {
  color: #aa7031;
  background-color: #ffe0bf;
}

.warning-span {
  background-color: var(--warning100) !important;
  color: var(--warning1000) !important;
}

.secondary-span {
  background-color: var(--neutrals200) !important;
  color: var(--neutrals900) !important;
}

.primary-span {
  background-color: var(--neutrals200) !important;
  color: var(--neutrals900) !important
}


.modal-links {
  padding: 24px;
}

.modal-links .tabs {
  height: 32px;
}

.modal-links .tabs .tab-button.active .body-medium-medium {
  border-bottom: 0px;
}


.modal-links-footer {
  display: inline-flex;
  justify-content: end;
  gap: 16px;
}

.modal-links-footer .mdl-button {
  padding: 8px 24px !important;
  width: 132px !important;
}

.points-data {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.points-data:has(.fa-calendar) {
  justify-content: start;
  align-items: center;
  gap: 16px;
}

.category-title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--neutrals1000);
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.points-data .data-column {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cards-accordion-pz .category-card-group ul {
  display: grid;
}

.cards-accordion-pz .category-card-group .gp-number {
  color: var(--primary600);
}

.error-span {
  background-color: var(--error100) !important;
  color: var(--error800) !important;
}

.modal-links {
  padding: 24px;
}

.modal-links .tabs {
  height: 32px;
}

.modal-links .tabs .tab-button.active .body-medium-medium {
  border-bottom: 0px;
}

.selects-prices-container {
  display: grid;
  gap: 16px;
}

.modal-links-footer {
  display: inline-flex;
  justify-content: end;
  gap: 16px;
}

.modal-links-footer .mdl-button {
  padding: 8px 24px !important;
  width: 132px !important;
}



.category-title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--neutrals1000);
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.points-data .data-column {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cards-accordion-pz .category-card-group ul {
  display: grid;
}

.points-number {
  color: var(--primary600) !important;
  text-align: center;

}

.title-points-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.number-points-container {
  color: var(--neutrals1000);
  font-family: "Noto Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
}

.number-points-container b {
  font-weight: 700 !important;
}

.points-separator {
  border: .5px solid var(--neutrals400);
  height: 105%;
}

.title-points-group-container {
  display: grid;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.category-card-group {
  border-radius: 12px;
  border: 1px solid var(--neutrals200);
  background: var(--neutrals100);
}

.category-card-group ul {
  display: flex;
  padding: 8px 24px;
  gap: 4px;
}

.category-card-group li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.gp-number {
  color: var(--primary600);
}

.org-points .tab-content.active {
  display: grid;
  padding: 16px !important;
  gap: 18px;
}

.private-zone-content .mdl-modal {
  width: max-content;
  min-width: 280px;
}

.lines-container {
  display: flex;
  justify-content: space-between;
}

.earnings-section .mdl-accordion {
  width: 100%;
}

.earnings-section .mdl-accordion__button {
  width: 100%;
  justify-content: space-between;
}

.earnings-section .mdl-accordion--opened .mdl-accordion__button:hover {
  border-radius: 12px 12px 0px 0px !important;
}

.earnings-section .mdl-accordion__button:hover {
  border-radius: 12px !important;

}

.cards-accordion-pz {
  border-radius: 12px;
  border: 1px solid var(--neutrals400);
  background: white;
  height: fit-content;
}

.private-zone-content .mdl-accordion.mdl-accordion--opened {
  border-top: 0px;
  border-bottom: 0px;
}

.cards-accordion-pz span {
  color: #2F2F2F;
}

.cards-accordion-pz .title-accordion-pz {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.earnings-col-container {
  gap: 16px;
  display: grid;
}

.off-span {
  border-radius: 8px;
  background: var(--primary600);
  padding: 4px 8px;
}

.amount-txt {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-re-container {
  display: grid;
}

.info-re-amount {
  color: var(--neutrals1000);
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.points-data .info-re-date {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 4px;
  color: var(--neutrals900);
  font-family: "Noto Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px
}

.points-data .info-re-date i {

  font-size: 12px;
}

.info-re-date.start-re-date i {
  color: var(--primary600);
}

.info-re-date.end-re-date i {
  color: var(--secondary);
}

.percent-info {
  font-family: "Noto Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}

.percent-info.success,
.percent-info.success i {
  color: #38AC82;
}

.percent-info.error,
.percent-info.error i {
  color: var(--error800);
}

.shortcut-container .d-flex {
  justify-content: space-between;
  align-items: center;
}

.shortcut-container .d-flex button {
  padding: 8px;
  justify-content: end;
}

.private-zone-content .linkMedium {
  text-decoration: underline;
}


.private-zone-content .card {
  background-color: white;
  padding: 16px;
  gap: 12px;
  display: grid;
}

.earnings-card .mdl-dropdown-menu {
  left: 0px;
}

.private-zone-content .mdl-dropdown-menu {
  right: unset;
  width: stretch;
}

.earnings-card .level-header {
  justify-content: space-between;
  width: 100%;
}

.private-zone-content .accordion-content-container {
  max-height: 23rem;
  overflow-y: auto;
}

.cards-accordion-pz .accordion-content-container {
  display: grid;
  gap: 10px;
}

.container-dash-elements {
  display: grid;
  gap: 12px;
}

.icon-empty-state {
  background-color: var(--primary100);
  padding: 10px;
  border-radius: 30px;
}

.icon-empty-state i {
  color: var(--primary800);
  font-size: 40px;

}

.icon-container-empty-state,
.title-empty-state,
.text-empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.title-empty-state {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.text-empty-state {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.actions-empty-state {
  background-color: white;
  padding-top: 24px;
  gap: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.amount-ctnr {
  display: flex;
  gap: 10px;
  justify-content: start;
}

.accordions-ctnr {
  width: 100%;
}

.accordions-ctnr .mdl-accordion .mdl-accordion__content-wrapper {
  height: 0px;
}

.accordions-ctnr .mdl-accordion.mdl-accordion--opened .mdl-accordion__content-wrapper {
  height: fit-content;
  padding: 8px 0px;
}

.accordions-ctnr .mdl-accordion--opened a.mdl-navigation__link.mdl-accordion__button.mdl-button {
  border-radius: 8px 8px 0px 0px;
}

.cards-accordion-pz {
  border-radius: 6px;
}

.earnings-card .mdl-dropdown-menu {
  left: 0px;
}

.earnings-card .level-header {
  justify-content: space-between;
  width: 100%;
}

.private-zone-content .accordion-content-container {
  max-height: 23rem;
  overflow-y: auto;
}

.cards-accordion-pz .accordion-content-container {
  padding: 16px;
  display: grid;
  gap: 10px;
}

.container-dash-elements {
  display: grid;
  gap: 12px;
}


.accordions-ctnr .mdl-accordion.mdl-accordion--opened .mdl-accordion__content-wrapper {
  height: fit-content;
}

.mdl-dropdown i {
  color: var(--primary600);
}

.mdl-dropdown-item:hover {
  background-color: var(--primary1)
}

.title-level {
  color: var(--Color-Neutral-Base-Black, #0A0A0B);
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.registration-section,
.shortcut-container {
  display: grid;
  gap: 16px;
}

.col-12 .container-chart {
  margin-top: 16px;

}

.col-12 .container-chart .points-chart-container {
  justify-content: start;
}

.modal-open .private-zone-header {
  z-index: 1;
}

@media screen and (max-width: 1299px) {
  .private-zone-header.site-header.private-zone-header .mdl-ul>li:nth-child(3) {
    position: unset !important;
    padding: 0px;
  }

  .private-zone-header.site-header .mdl-ul>li:has(> .search-header-container) {
    background-color: transparent;
  }

  .private-zone-header.site-header.private-zone-header .mdl-ul>li .search-header-container input {
    display: none;
  }

  .onboarding-modal {
    padding: 12px;
  }

  .amount-txt,
  .trend-info,
  .amount-txt.label-medium,
  .nxt-lvl-span {
    color: var(--neutrals900) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
  }

  .amount-w {
    font-size: 28px !important;
    font-style: bold !important;
    font-weight: 700 !important;
    line-height: 32px !important;
  }

  .shortcut-container .d-flex {
    margin-bottom: 0px;
  }

  .shortcut-container .d-flex .section-dashboard-title {
    margin-bottom: 0px;
  }

  .sidebar-private-zone-menu {
    transform: translateX(-100%);
    top: 60px;
    transition: transform 0.3s ease;
  }

  .sidebar-private-zone-menu.is-open {
    transform: translateX(0);
  }

  .omnilife-v2.private-zone-content {
    margin-left: 0px !important;
  }

  .site-header.private-zone-header .mdl-ul {
    margin-left: unset;
    display: flex;
    align-items: center;
    gap: unset;
  }

  #private-zone-menu-btn .menu-btn__lines::before {
    transform: translateY(-0.5rem) translatex(-0.7rem);
  }

  #private-zone-menu-btn .menu-btn__lines::after {
    transform: translateY(0.5rem) translatex(-.7rem);
  }

  #private-zone-menu-btn .menu-btn.active .menu-btn__lines::before {
    transform: rotate(45deg) translate(-1.3rem, 1.3rem);
  }

  #private-zone-menu-btn .menu-btn.active .menu-btn__lines::after {
    transform: rotate(-45deg) translate(-1.3rem, -1.3rem);
  }

  .site-header .mdl-ul>li:has(> #private-zone-menu-btn) {
    display: flex;
  }

  .site-header.private-zone-header>.mdl-ul>li:nth-child(3):not(:has(.search-header-container)) {
    margin-left: auto;
  }

  .registration-section,
  .shortcut-container {
    display: grid;
    gap: 16px;
  }

  .shortcut-container .d-flex {
    margin-bottom: 8px;
  }

  .site-header.private-zone-header .mdl-ul li:nth-child(1),
  .site-header.private-zone-header .mdl-ul li:nth-child(2) {
    margin-right: 0;
    /* opcional si quieres pegados */
  }


  .site-header.private-zone-header:not(.profile) ul:not(.notifications-list) li:nth-child(3):not(:has(.search-header-container)) {
    margin-left: auto;
  }


  .col-12 .container-chart {
    margin-top: 16px;
  }

  .modal-open .private-zone-header {
    z-index: 1;
  }


  .private-zone-header .search-header-container #search {
    display: none;
  }

  .private-zone-header .menu-btn {
    display: flex;
  }

  .modal-open .private-zone-header {
    z-index: 200;
  }

  .mdl-layout__obfuscator.is-visible {
    z-index: 210;
  }

  .private-zone-content .modal-notifications.mdl-modal {
    width: 100%;
    left: 0px !important;
    top: 0px !important;
    height: 100%;
  }

  .sidebar-private-zone-menu {
    padding: 24px 0px 0px 16px;
  }

  .sidebar-private-zone-menu .sidebar-logo-container {
    display: none;
  }

  .sidebar-private-zone-menu .name-menu-private-zone {
    margin: 0px;
    margin-bottom: 16px;
  }

  .private-zone-content main {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    padding: 24px 16px;
  }

  .btn-shortcuts {
    padding: 8px;
    display: grid;
    min-width: 6.5rem;
  }

  .btn-shortcuts-container {
    overflow-x: auto;
    white-space: nowrap;
    margin-top: 0px;
    padding: 8px;
  }

  .btn-shortcuts-container {
    overflow-x: auto;
    white-space: nowrap;
    margin-top: 8px;
    padding: 0px;
  }

  .registration-section {
    gap: 8px;
  }

  .section-dashboard-title {
    margin-bottom: 8px;
  }


  .modal-notifications-content {
    width: 100%;
    height: 100%;

  }

  .modal-notifications-content .notifications-list {
    width: 100%;
  }

  .private-zone-content .data-column p {
    font-size: 14px;
    line-height: 16px;
  }

  .site-header.private-zone-header .mdl-ul {
    justify-content: space-between;
  }

  .private-zone-header {}

  .modal-notifications-content .notifications-list {
    width: 100%;
  }

  .private-zone-content .data-column p {
    font-size: 14px;
    line-height: 16px;
  }

  .site-header.private-zone-header .mdl-ul {
    justify-content: space-between;
  }

  .private-zone-header {
    padding: 10px 16px;
  }

  .site-header .mdl-ul>li:has(> .search-header-container) {
    margin-left: 0px;
  }

  .site-header.private-zone-header .mdl-ul {
    padding: 0px;
  }

  .sidebar-logo-container-mobile {
    display: flex !important;
  }

  .sidebar-logo-container-mobile img {
    display: flex;
    height: 32px;
    width: 120px;
    min-width: 120px;
  }

  .site-header.private-zone-header .search-header-container {
    padding: 1px !important;
    border: none;
    background-color: white;
    font-size: 21px;
    display: flex !important;
    margin-left: unset !important;
  }

  .site-header.private-zone-header .search-header-container .icon-search-btn {
    background-color: #F9F1FF;
    color: var(--primarycolor);
  }

  .tracking-container .search-header-container .icon-search-btn {
    position: absolute;
    right: 5px;
  }

  .site-header.private-zone-header .search-header-container .icon-search-btn i {
    font-weight: normal;
  }

  #btn-profile span,
  #btn-profile i {
    display: none !important;
  }

  .accordions-ctnr .mdl-accordion__content.mdl-animation--default {
    padding: 0px !important;
  }

  .earnings-card .accordions-ctnr .mdl-accordion__content.mdl-animation--default {
    padding: 8px !important;
  }

  .level-card .card-level-actions {
    display: contents;
    width: 100%;
  }

  .level-card .card-level-actions button {
    width: 100%;
    min-width: unset;
  }

}

.col-chart-container span span {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}

.highcharts-label span div:not(.custom-datalabel) {
  position: relative;
  top: -1rem;
}

.mdl-modal.modal-info-user {
  z-index: 999999;
  max-height: 80vh;
}

.img-distributor-image {
  width: 40px;
  height: 40px;
}

.initials-container {
  border: 1px solid var(--primary);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
}

.site-header.private-zone-header .search-header-container {
  padding: 1px !important;
  border: none;
  background-color: transparent;
  font-size: 21px;
  display: flex !important;
  margin-left: 332px;
}

.site-header.private-zone-header .search-header-container .icon-search-btn {
  color: var(--primarycolor);
}

.site-header.private-zone-header .search-header-container .icon-search-btn i {
  font-weight: normal;
}

#btn-profile span,
#btn-profile i {
  display: flex;
}

.accordions-ctnr .mdl-accordion__content.mdl-animation--default {
  padding: 0px !important;
}

.earnings-card .accordions-ctnr .mdl-accordion__content.mdl-animation--default {
  padding: 8px !important;
}

.level-card .card-level-actions {
  display: contents;
  width: 100%;
}

.level-card .card-level-actions button {
  width: 100%;
  min-width: unset;
}

.col-chart-container span span {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}

.highcharts-label span div:not(.custom-datalabel) {
  position: relative;
  top: -1rem;
}

.modal-notifications-content .notifications-list {
  width: 100%;
}


.private-zone-content .data-column p {
  font-size: 14px;
  line-height: 16px;
}

.site-header.private-zone-header .mdl-ul {
  justify-content: space-between;
}


.sidebar-logo-container-mobile img {
  display: flex;
  height: 32px;
  width: 120px;
}

.site-header.private-zone-header .search-header-container {
  padding: 1px !important;
  border: 1px solid var(--primary);
  background-color: white;
  font-size: 21px;
  display: flex !important;
}

.site-header.private-zone-header .search-header-container .icon-search-btn {
  color: var(--primarycolor);
}

.site-header.private-zone-header .search-header-container .icon-search-btn i {
  font-weight: normal;
}

.accordions-ctnr .mdl-accordion__content.mdl-animation--default {
  padding: 0px !important;
}

.earnings-card .accordions-ctnr .mdl-accordion__content.mdl-animation--default {
  padding: 8px !important;
}

.level-card .card-level-actions {
  display: contents;
  width: 100%;
}

.level-card .card-level-actions button {
  width: 100%;
  min-width: unset;
}


.col-chart-container span span {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}

@media screen and (max-width: 700px) {

  .summary-section .custom-row {
    display: flex;
    gap: 16px;
  }
}

.card.profile-card h3 {
  z-index: 99;
}

@media (min-width: 920px) and (max-width: 1700px) {
  .card.profile-card h3 {
    max-width: 24rem;
  }
}

@media screen and (max-width: 920px) {
  .mdl-modal.modal-info-user {
    height: 100vh;
    max-height: unset;
  }

  .points-data {
    justify-content: space-around;
  }

  .btn-shortcuts i {
    font-size: 20px;
  }

  .card.profile-card h3 {
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  .card.profile-card h3 b {
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
  }

  .footer-profile-card {
    flex-direction: column;
    gap: 16px;
    justify-content: start !important;
    align-items: baseline !important;
  }

  .nxt-lvl-span .level-img-icon {
    height: 24px;
    width: 24px;
  }

  .section-dashboard-title h2,
  .section-dashboard-title,
  .section-dashboard-title {
    margin: 0px;
  }

  .btn-shortcuts-container {
    margin-top: 0px;
  }

  .section-dashboard-title {
    display: grid;
    gap: 0px;
  }

  .col-chart-container span {
    font-size: 14px;
  }

  .col-chart-container span span {
    font-size: 13px;
  }


  .section-dashboard-title {
    display: grid;
    gap: 0px;
  }

  .col-chart-container span {
    font-size: 14px;
  }

  .section-dashboard-title {
    position: relative;
    display: flex;
  }

  .cards-accordion-pz {
    display: block;
  }

  .card-level-actions {
    display: flex;
    width: 100%;
    gap: 8px;

  }

  .nxt-lvl-steps {
    color: var(--primary800);
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
  }

  .career-level-card .card-level-actions {
    display: contents !important;
  }

  .peyment-level-card .card-level-actions {
    justify-content: center !important;
  }

  .modal-info-user.mdl-modal {
    position: fixed;
    width: 100%;
    max-width: unset;
  }

  .modal-notifications.mdl-modal {
    position: fixed;
    width: 100%;
    max-width: unset;
    width: 100%;
    display: inline-table;
    height: 100vh;
    top: 0px !important;
    width: 100%;

  }

  .card-level-actions .secondary {
    order: 1;
  }

  .card-level-actions .linkMedium {
    order: 2;
  }

  .section-dashboard-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px
  }

  .btn-shortcuts span {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }

  .summary-grid {
    grid-template-columns: auto;
  }


  .modal-info-user-header {
    position: sticky;
    top: -5px;
    z-index: 99;
    background-color: white;
    flex: none;
  }

  .modal-notifications-content .tab-content ul {
    height: min-content;
  }

  .sidebar-private-zone-menu {
    overflow: auto;
    height: 100vh;
  }

  .col-chart-container span span {
    font-size: 13px;
  }

  .info-pz-modal {
    width: 14rem;
  }

  .objetives-grid {
    display: flex;
    flex-direction: column;
  }


  .modal-nxt-lvl.mdl-modal {
    width: 90%;
    min-width: unset;
    max-height: 80%;
    overflow: auto;
  }

  .mdl-modal .modal-notifications-header:not(.modal-pdf-visor .modal-notifications-header, .modal-preview-check .modal-notifications-header) {
    position: sticky;
    top: -24px;
    background-color: white;
  }

  .private-zone-content .mdl-modal {
    max-width: 90% !important;
  }

  .private-zone-content .modal-co-empresario-nuevo,
  .private-zone-content .modal-co-empresario-pendiente,
  .private-zone-content .modal-co-empresario-editar {
    height: calc(100vh - 10%);
    overflow-y: scroll;
  }

  .mdl-modal .actions {
    display: flex;
    gap: 8px;
    flex-direction: column-reverse;
  }

  .mdl-modal .actions button {
    width: 100% !important;
  }
}

.private-zone-content .mdl-modal .close-modal {
  padding: 0px;
}

.objetives-col:not(.col-12 .objetives-col) {
  width: 400px;
  height: -webkit-fill-available;
  border-radius: 8px;
}

.summary-section,
.card.level-card {
  display: grid;
  min-height: 180px;
}

.title-level {
  color: var(--Color-Neutral-Base-Black, #0A0A0B);
  font-family: "Noto Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  width: 50%;
}


.earnings-card .level-header .linkMedium {
  padding: 6px;
}

.earnings-card .level-header span,
.earnings-card .level-header .section-dashboard-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
}

.section-dashboard-title h2,
.section-dashboard-title {
  color: var(--neutrals1000) !important;
  font-family: "Noto Sans" !important;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  display: flex;
  gap: 4px;
}

.section-dashboard-title {
  position: relative;
  display: flex;
}

.cards-accordion-pz {
  display: block;
}

.card-level-actions {
  display: flex;
  width: 100%;
  gap: 8px;

}

.nxt-lvl-steps {
  color: var(--primary800);
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.career-level-card .card-level-actions {
  display: flex;
  justify-content: space-around;
}

.career-level-card .card-level-actions .secondary {
  order: 2;
}

.peyment-level-card .card-level-actions {
  display: flex;
  justify-content: end;
}

.peyment-level-card .card-level-actions button {
  width: fit-content;
  ;
}

.card-level-actions .secondary {
  order: 1;
}


.section-dashboard-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px
}

.btn-shortcuts span {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.summary-grid {
  grid-template-columns: auto;
}


.modal-info-user-header {
  position: sticky;
  top: -25px;
  z-index: 5;
  background-color: white;
  flex: none;
}

.modal-notifications-content .tab-content ul {
  height: min-content;
}

.sidebar-private-zone-menu {
  overflow: auto;
  height: 100vh;
}

.points-data i {
  color: var(--primary);
}

.points-data .switch-field {
  max-height: 32px;
}

.accordions-ctnr .mdl-accordion__button {
  width: 100%;
}

.accordions-ctnr .mdl-accordion__content.mdl-animation--default {
  display: grid;
  padding: 0px 16px;
  gap: 20px;
}

.footer-profile-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

.modal-material-content .tab-container {
  display: block;
}

.notifications-list .actions-container div {
  display: flex;
  gap: 8px;
}

.notifications-list .actions-container div i {
  font-size: 8px;
  color: var(--secondary);
  display: none;
}

.notifications-list .unread-notification .actions-container div i {
  display: block;
}

.wallet-save-container {
  display: flex;
  justify-content: space-between;
}

.wallet-save-container button {
  border: none;
  background: none;
}

.add-to-wallet-container img {
  height: 40px;
  width: 120px;
}

section.shortcut-container .btn-shortcuts-container button {
  text-wrap-mode: wrap;
}


.points-data i {
  color: var(--primary);
}

.points-data .switch-field {
  max-height: 32px;
}

.accordions-ctnr .mdl-accordion__button {
  width: 100%;
}

.accordions-ctnr .mdl-accordion__content.mdl-animation--default {
  display: grid;
  padding: 16px;
  gap: 20px;
}

.footer-profile-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

.modal-material-content .tab-container {
  display: block;
}

.notifications-list .actions-container div {
  display: flex;
  gap: 8px;
}

.notifications-list .actions-container div i {
  font-size: 8px;
  color: var(--secondary);
  display: none;
}

.notifications-list .unread-notification .actions-container div i {
  display: block;
}

.wallet-save-container {
  display: flex;
  justify-content: space-between;
}

.wallet-save-container button {
  border: none;
  background: none;
}

.add-to-wallet-container img {
  height: 40px;
  width: 120px;
}


/* ===============================
    FIN DE ZONA PRIVADA
=============================== */


/* ===============================
    EDITAR PERFIL CLIENTE
=============================== */

.private-zone-content .breadcrumbs {
  padding-top: 0rem !important;
  padding-left: 0rem !important;
}

.private-zone-content ul.breadcrumbs {
  margin-left: 0px;

}

.input-date-picker {
  background: #fff;
  height: 3rem;
  border-radius: var(--Radius-Radius-md, 0.5rem) !important;
  border: 1px solid var(--neutrals900);
  padding-left: 6px;
  width: 100%;
}

.edit-profile-card .select2-container {
  width: 100% !important;
  position: relative;
  font-size: 16px;
  display: inline-block;
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
  margin: 0;
  padding: 20px 0;
}

.edit-profile-card .select2-container--default .select2-selection--single .select2-selection__arrow b {
  top: 1.7rem !important;
}

.edit-profile-card .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: fit-content;
}

.edit-profile-card .select2-container--open .select2-selection__placeholder {
  top: 1.5px;
  font-size: 12px;
}

.edit-profile-card .select2-selection__placeholder {
  top: 29px;
}

.edit-profile-card .selectNameSpan {
  top: 1.5px;
  font-size: 12px;
}

.edit-profile-card .input-mail-ctnr {
  padding: 0px;
}

.input-mail-ctnr.mdl-textfield.outline .mdl-textfield__label {
  top: 14px;
}

.input-mail-ctnr.mdl-textfield--floating-label.outline.is-focused .mdl-textfield__label {
  top: -13px;
}

.date-picker-select-container {
  position: relative;
}

.date-input-label {
  position: absolute;
  top: 36%;
  left: 8px;
  transition: all 0.2s ease-in-out;
}

.date-input-label.open {
  top: 0px;
  left: 12px;
  background-color: #fff;
  font-size: 12px;
}

.edit-profile-card {
  position: relative;
}

.private-zone-content.profile .level-header {
  position: sticky;
  top: 5rem;
  z-index: 2;
  background-color: white;
}

.card.earnings-card.edit-profile-card {
  padding: 0px 16px 16px 16px;
}

.card.earnings-card.edit-profile-card .level-header {
  padding: 16px 0px 16px 0px;
}

.date-input-label.open {
  top: -15px;
  background-color: #fff;
  font-size: 12px;
}

.edit-profile-card {
  position: relative;
}

.private-zone-content.profile .level-header {
  position: sticky;
  top: 5rem;
  z-index: 2;
  background-color: white;
}

.card.earnings-card.edit-profile-card {
  padding: 0px 16px 16px 16px;
}

.card.earnings-card.edit-profile-card .level-header {
  padding: 16px 0px 16px 0px;
}

.edit-profile-card .country-code-select .select2-container {
  max-width: 5rem !important;
}

.edit-profile-card .phone-number-container .select2-container {
  width: 70%;
  min-width: 10rem;
}

.phone-number-container {
  display: flex;
  gap: 16px;
}

.phone-number-container .country-code-phone {
  width: 100%;
}

.country-code-container .imgSelectFlag {
  width: 20px;
}

.edit-profile-card .circle-img-dist {
  position: relative;
}

.edit-profile-card .circle-img-dist button {
  position: absolute;
  top: -8px;
  right: -8px;
  border-radius: 30px;
  width: 32px;
  height: 32px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  aspect-ratio: 1/1;
  border-radius: 30px;
  background: var(--secondary700);
  border: 0px;
  color: #fff;
}

.private-zone-content.profile main {
  gap: 24px;
}

.private-zone-content.profile .card {
  margin: 0px;
}

.edit-profile-card .user-name {
  color: var(--neutrals900);
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

.edit-profile-card .profile-img {
  border: none;
}

.info-user-ctnr {
  display: flex;
}

.txt-user-info {
  display: grid;
  justify-content: start;
  align-items: center;
  width: 70%;
  margin-left: 24px;
}

.private-zone-content.profile .card .level-header {
  display: flex;
  justify-content: space-between;
}

.omnilife-v2.private-zone-content.client-profile {
  margin-left: 0px !important;
}

.site-header.private-zone-header.client-header .mdl-ul {
  margin-left: 0px;
}

.site-header.private-zone-header.client-header .menu-btn {
  display: flex;
}

@media screen and (max-width: 920px) {
  .actions-container-profile {
    position: fixed;
    bottom: 0px;
    z-index: 999999;
    background-color: white;
    width: 100%;
    height: 3rem;
    justify-content: center;
    align-items: center;
    display: flex;
    right: 0px;
    padding: 16px;
  }

  .level-header {
    top: 3.8rem;
  }

  .date-picker-select-container {
    padding: 16px 0px;
  }

  .edit-profile-card .phone-number-container .select2-container {
    min-width: 8rem;
  }

  .edit-profile-card .spanContainerSelect {
    font-size: 14px;
  }
}

@media screen and (max-width: 920px) {
  .actions-container-profile {
    position: fixed;
    bottom: 0px;
    z-index: 999999;
    background-color: white;
    width: 100%;
    height: 3rem;
    justify-content: center;
    align-items: center;
    display: flex;
    right: 0px;
    padding: 16px;
  }

  .level-header {
    top: 3.8rem;
  }

  .date-picker-select-container {
    padding: 16px 0px;
  }

  .edit-profile-card .phone-number-container .select2-container {
    min-width: 8rem;
  }

  .edit-profile-card .spanContainerSelect {
    font-size: 14px;
  }
}

/* ===============================
    FIN DEEDITAR PERFIL CLIENTE
=============================== */

/* ===============================
    ONBOARDING
=============================== */


.onboarding-modal {
  background-color: white;
  padding: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 22rem;
  position: fixed;
  z-index: 665;
  width: 95%;
}

.onboarding-modal .modal-qr-footer {
  display: grid;
  justify-content: center;
  align-items: center;
}

.onboarding-modal .modal-qr-footer button {
  width: 225px;
  max-width: 225px;
}

.onboarding-modal .title-text {
  color: var(--neutrals1000);
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.highlight {
  z-index: 999 !important;
  background-color: white;
  padding: 10px;
}

.private-zone-content .card.highlight {
  position: relative;
}

.onboarding-step-1 {
  border: none;
}

.onboarding-step-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .7) !important;
  /* semitransparente opcional */
  backdrop-filter: blur(6px);
  z-index: 5;
  /* se coloca sobre todo el contenido */
  border-bottom: none !important;
}

.step2 .sidebar-private-zone-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .5) !important;
  /* semitransparente opcional */
  backdrop-filter: blur(7px);
  z-index: 5;
  /* se coloca sobre todo el contenido */
  border-bottom: none !important;
}

.step2 {
  position: relative;
}

.step2 li:has(> #btn-profile) {
  position: relative;
  z-index: 10;
  background-color: #F9F1FF;
}



.highlight {
  position: relative;
  pointer-events: none;
  top: 2rem;
}

@media screen and (max-width: 1299px) {
  .site-header.private-zone-header .search-header-container .icon-search-btn {
    border: none;
  }

  .site-header.private-zone-header .search-header-container {
    border: none;
    background-color: #F9F1FF;

  }

  .private-zone-header.highlight {
    position: relative;
  }

  .private-zone-header.highlight {
    position: relative;
  }

  /* El <li> que contiene el botón queda encima del blur */
  .private-zone-header.highlight.onboarding-step-1 li:has(> #private-zone-menu-btn) {
    position: relative;
    z-index: 10;
    background-color: #F9F1FF !important;
  }

  .onboarding-modal {
    padding: 16px;
  }

  .modal-qr-footer,
  .modal-material-footer {
    gap: 8px;
  }

  .modal-qr-content span {
    padding: 8px 0px;
  }

  .private-zone-content .card.highlight {
    margin: 15px 0px;
    padding: 12px;
  }

  .modal-download-check .modal-qr-footer {
    gap: 16px !important;
  }
}

#modal-delay-delivery {
  display: none;
}

/* ===============================
   FIN ONBOARDING
=============================== */


li:has(.changeLocationNF) {
  border-right: 1px solid var(--neutrals300);
}

li:has(#btnFollow) {
  border-right: 1px solid var(--neutrals300);
}


/* ==========================================
          BUSCADOR DE ZONA PRIVADA
========================================== */


.search-results-zona-privada {
  display: grid;
  height: fit-content;
  background-color: white;
  position: fixed;
  top: 61.5px;
  width: 25rem;
  padding: 16px;
  gap: 8px;
  border-radius: 12px;
  box-shadow: 0 24px 32px -24px rgba(89, 88, 88, 0.20);
}

.private-zone-header .search-results-zona-privada-list li:nth-child(2) {
  display: flex;
  margin-left: unset;
}

.search-results-zona-privada-list {
  display: grid;
  gap: 8px;
  width: 100%;
  font-family: "Noto Sans";
  color: var(--neutrals900);
  padding-left: 0px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.search-results-zona-privada-list li {
  display: flex;
  justify-content: space-between;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.search-results-zona-privada-list li a {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
  color: var(--neutrals900);

}

.search-results-zona-privada-list li button:hover {
  background-color: var(--primary100);
  border-radius: 50%;
}

.search-results-zona-privada-list i {
  color: var(--primary);
}

.search-results-container ul {
  padding-left: 0px;
}

.search-results-zona-privada-list li a i {
  border-radius: 50%;
  padding: 5px;
}

/* Estado al eliminar */
.search-results-zona-privada-list li.removing {
  opacity: 0;
  transform: translateX(-20px);
}

.delete-item {
  background-color: transparent;
  border: none;
}

.search-history-container,
.search-results-container {
  gap: 8px;
  display: grid;
}

/* ==========================================
          FINAL BUSCADOR DE ZONA PRIVADA
========================================== */

/* ==========================================
        SEGUIMIENTO DE PEDIDO
========================================== */

.card.products-list-card .product-list-accordion.h5-bold,
.card.resume-card .h5-bold,
.confirmation-card .h5-bold {
  color: var(--neutral100);
}


.tracking-container .search-header-container {
  max-width: 440px;
}

.filter-tracking {
  display: flex;
  gap: 24px;
  align-items: center;
}

.filter-tracking-container {
  display: grid;
  gap: 24px;
}

.mdl-buttons-check-container {
  display: flex;
  gap: 16px;
}

.mdl-check-button {
  border-radius: 100px;
  color: var(--neutrals800);
  border: 1px solid var(--neutrals200);
  display: flex;
  padding: var(--Spacing-2, 8px) 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: white;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.mdl-check-button i {
  display: none;
}

.mdl-check-button.checked {
  color: var(--primary);
  background: var(--primary100);
  border: 1px solid var(--primary100);
  transform: scale(1.05);
}

.mdl-check-button.checked i {
  display: block;
}

.card-tracking {
  display: flex;
  justify-content: space-between;
}

.card-tracking .tracking-info .header {
  display: flex;
  gap: 16px;
  align-items: center;
}

.separator-bar {
  width: 24px;
  background-color: var(--neutrals400);
  height: 2px;
  transform: rotate(90deg);
}

.card-tracking {
  padding: 16px 24px;
}

.tracking-stepper {
  width: 50%;
  height: 4px;
  background-color: var(--neutrals100);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}


.progress-fill {
  height: 100%;
  background-color: var(--primary600);
  border-radius: 10px 0 0 10px;
  transition: width 0.4s ease;
  /* animación */
}

.tracking-images-container {
  display: flex;
  gap: 16px;
}

.tracking-info {
  display: grid;
  gap: 16px;
}

.tracking-image {
  width: 50px;
  height: 50px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  background-color: var(--neutrals100);
}

.tracking-data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}

.tracking-data-amount {
  gap: 16px;
}

.tracking-data-amount:has(.buttons-tracking) {
  display: grid;
}


.tracking-container .search-header-container {
  max-width: 440px;
}

.filter-tracking {
  display: flex;
  gap: 24px;
  align-items: center;
}

.filter-tracking-container {
  display: grid;
  gap: 24px;
}

.mdl-buttons-check-container {
  display: flex;
  gap: 16px;
}

.mdl-check-button {
  border-radius: 100px;
  color: var(--neutrals800);
  border: 1px solid var(--neutrals200);
  display: flex;
  padding: var(--Spacing-2, 8px) 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: white;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.mdl-check-button i {
  display: none;
}

.mdl-check-button.checked {
  color: var(--primary);
  background: var(--primary100);
  border: 1px solid var(--primary100);
  transform: scale(1.05);
}

.mdl-check-button.checked i {
  display: block;
}

.card-tracking .tracking-info .header {
  display: flex;
  gap: 16px;
  align-items: center;
}

.separator-bar {
  width: 24px;
  background-color: var(--neutrals400);
  height: 2px;
}

.card-tracking {
  padding: 16px 24px;
}

.tracking-stepper {
  width: 50%;
  height: 4px;
  background-color: var(--neutrals100);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.obj-span {
  max-width: fit-content;
}

.progress-fill {
  height: 100%;
  background-color: var(--primary600);
  border-radius: 10px 0 0 10px;
  transition: width 0.4s ease;
  /* animación */
}

.tracking-images-container {
  display: flex;
  gap: 16px;
}

.tracking-info {
  display: grid;
  gap: 16px;
}

.tracking-image {
  width: 50px;
  height: 50px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  background-color: var(--neutrals100);
}

.tracking-data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}

.tracking-data-amount {
  gap: 16px;
}

.tracking-data-amount:has(.buttons-tracking) {
  display: grid;
}

.tracking-data-amount:not(:has(.buttons-tracking)) {
  display: flex;
  justify-content: end;

}

.tracking-data-amount button {
  padding: 8px 24px;
}

.amount-tracking {
  display: flex;
  gap: 8px;
  justify-content: end;
}

.tracking-points {
  align-content: center;
  color: var(--neutrals800);
}

.tracking-header {
  display: grid;
  gap: 16px;
}

.tracking-header .breadcrumbs {
  padding: 0px !important;
  margin: 0px !important;
}

.tracking-list-container {
  display: grid;
  gap: 16px;
}

.more-images-indicator {
  position: relative;
}

.more-images-indicator img {
  filter: blur(.8px) grayscale(67%);
}

.more-images-indicator span {
  position: absolute;
  top: 14px;
  left: 14px;
  color: white;
  padding: 2px;
}

.tracking-footer {
  display: grid;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.tracking-footer .text {
  display: grid;
  gap: 8px;
}

.tracking-footer span {
  display: grid;
  justify-content: center;
  align-items: center;
}

.tracking-footer .mdl-card-icon i {
  font-size: 24px !important;
  transform: scale(1) !important;

}

.tracking-footer .cards-footer {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.tracking-footer .card-icon {
  width: 35px;
  height: 35px;
  min-height: unset;
}

.buttons-tracking {
  display: flex;
  gap: 8px;
}

.tracking-footer .mdl-card-icon {
  padding: 8px 16px;
  gap: 12px;
  min-height: unset;
  min-width: unset;
  width: 203px !important;
  justify-content: center;
  display: flex;
  align-items: center;
}

.search-container-tracking {
  display: flex;
  gap: 24px;
}

.purchase-channel-label {
  border-radius: 8px;
  padding: 6px;
  font-size: 12px;
  width: fit-content;
}

.purchase-channel-label.primary {
  background: var(--primary1000);
  color: #fff;
}

.purchase-channel-label.secondary {
  background: var(--primary600);
  color: #fff;
}

.modal-sub-purchase .modal-qr-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-sub-purchase .modal-qr-footer button {
  max-width: 12rem;
}

.modal-alert .modal-alert-footer {
  gap: 12px;
}

.modal-alert .modal-alert-footer .mdl-button {
  padding: 8px !important;
  font-size: 14px;
}

@media screen and (max-width: 920px) {

  .time-line-tracking-card .header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }

  .time-line-tracking-card .header .actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .time-line-tracking-card .header .actions button {
    width: 100%;
  }

  .time-line-tracking-card .header .actions button.secondary {
    order: 2;
  }

  .tracking-container.omnilife-v2 {
    display: block;
    margin-top: 0px;
  }

  .card-tracking.card {
    display: grid;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 16px;
  }

  .card-tracking .pink-span {
    right: 5px !important;
    top: 90px !important;
  }

  .card-tracking.card>* {
    width: 100%;
  }

  .tracking-info .header {
    display: grid !important;
  }

  .tracking-image {
    width: 40px;
    height: 40px;
  }

  .tracking-images-container {
    max-width: 100%;
  }

  .buttons-tracking {
    display: grid;
  }

  .cards-footer {
    display: grid;
  }

  .mdl-card-icon {
    width: 100%;
    display: flex;

    flex-direction: inherit;
  }

  .mdl-buttons-check-container {
    display: flex;
    gap: 16px;
    padding: 10px;
    overflow-x: auto;
    margin: 16px 0px;
    max-width: 21rem;
  }

  .mdl-buttons-check-container .mdl-check-button {
    max-height: 40px;
    white-space: nowrap;
  }

  .search-container-tracking {
    gap: 18px !important;
    display: grid !important;

  }

  .search-container-tracking .search-header-container #search {
    display: block;
    position: absolute;
  }


  .search-container-tracking .search-header-container {
    height: 2rem !important;

  }

  .search-container-tracking .select2-container {
    width: 100% !important;
  }

  .search-container-tracking .search-header-container {
    padding-left: 10px !important;
  }


  .mdl-check-button {
    padding: 8px 24px;
  }

  .tracking-footer .cards-footer {
    display: grid;
  }

  .tracking-footer .cards-footer .mdl-card-icon {
    width: 100% !important;
    max-width: unset;
    justify-content: start;
    gap: 16px;
  }
}

@media (max-width: 768px) {

  .cards-container-salud,
  .cards-categorias-seytu .mdl-card-icon {
    flex-direction: column !important;
  }
}

.order-tracking-header {
  display: flex;
  justify-content: space-between;
}

.order-tracking-header .info-content {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
}

.icon-info-tracking {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.icon-info-tracking {
  background-color: var(--neutrals700);
  color: white;
  ;
}

.icon-info-tracking.success {
  background-color: #01784D;
  color: white;
  ;
}

.icon-info-tracking.primary {
  background-color: var(--info600);
  color: white;
  ;
}

.step-tracking-separator {
  height: 2px;
  background-color: var(--neutrals400);
  width: 24px;
}

.step-tracking-container {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin: 0px;
  padding: 0px;
}

.step-tracking {
  display: flex;
  gap: 8px;
  align-items: center;

}

.step-tracking .information {
  display: grid;
  gap: 4px;
}

.tracking-list-container .card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 26rem;

}

.time-line-tracking-card {
  height: fit-content !important;
}

.time-line-tracking-card .header {
  display: flex;
  justify-content: space-between;

}

.name-container {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
}

.tracking-container .mdl-button {
  padding: 8px 24px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.step-tracking .information span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.step-tracking .information .info {
  color: var(--info600);
}

.step-tracking .information .error {
  color: var(--error800);
}

.delivery-name {
  color: #2F2F2F;
}

.delivery-number {
  color: var(--neutrals800)
}

.container-cards-tracking {
  display: flex;
  gap: 24px;
}

.container-cards-tracking .card {
  width: 50%;
}

.resume-card ul {
  list-style: none;
  display: block;
  align-items: center;
  padding: 0px;
  margin: 0px;
  width: 100%;
  overflow: auto;
  padding-right: 4px;
}

.resume-card ul li {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

.products-list-card ul {
  padding: 0px;
  margin: 0px;
  display: grid;
  gap: 20px;
  max-height: 25rem;
  overflow: auto;
  padding-bottom: 40px;
  padding-right: 4px;
}

.products-list-card ul li {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.products-list-card {
  position: relative;
}

.products-list-card img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
}

.resume-card ul li span:first-of-type {
  color: var(--neutrals800);
}

.resume-card ul li span:nth-of-type(2) {
  color: var(--neutrals1000);
}

.resume-card ul li:last-child span:nth-of-type(2) {
  color: var(--neutrals1000);
}

.tracking-container .h5-bold {
  color: var(--neutrals900)
}

.total-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

.info-product-list {
  width: 100%;
}

.blur-list-element {
  width: 93%;
  position: absolute;
  left: 24px;
  bottom: 5px;
  height: 6rem;
  background: linear-gradient(to top, white, transparent);
}

.name-info-product-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.confirmation-card .header {
  display: grid;
  gap: 8px;
}

.confirmation-card .content {
  display: grid;
  gap: 24px;
}

.confirmation-card .content ul {
  display: flex;
  justify-content: space-between;
  padding: 0px;
  margin: 0px;
  gap: 40px;
}

.confirmation-card .content ul li {
  display: grid;
  gap: 12px;
  max-width: 400px;
}

.confirmation-card .footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;

}

.confirmation-card .footer .information {
  display: grid;
  gap: 8px;
}

.confirmation-card .footer .actions,
.confirmation-card .header .actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.confirmation-card .header {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.confirmation-card .header .title {
  display: grid;
  gap: 8px;
}

.confirmation-card .footer .actions .mdl-button,
.confirmation-card .header .actions .mdl-button {
  text-decoration: underline;
}



.products-list-card .h5-bold i {
  display: none;
}

.toast {
  width: 100%;
  display: flex;
  padding: 8px;
  justify-content: space-between;
  border-radius: 12px;
  gap: 8px;
}

.tracking-single .toast {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

.tracking-single .toast> :nth-child(3) {
  margin-left: auto;
}

.toast .toast-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.toast-warning {
  background-color: var(--warning100);
  justify-content: flex-start;
  align-items: anchor-center;
}

.toast-warning .toast-icon {
  color: var(--warning700)
}

.toast-information {
  display: flex;
  flex-direction: column;
  width: 80%;
}

.toast-information span {
  height: fit-content;
}

.toast-actions {
  display: grid;
  justify-content: center;
  align-items: center;

}

.toast-actions .mdl-button {
  text-decoration: underline;
  padding: 8px;
}

.toast-info {
  background-color: var(--info100)
}

.toast-info .toast-icon {
  color: var(--info700);
}

.toast-success {
  background-color: var(--success100);
  justify-content: flex-start;
  align-items: center;
  width: auto;
}

.toast-success .toast-icon {
  color: var(--success1000)
}

.toast-icon.times {
  margin-left: auto;
}

.omnilife-v2.products-page.inner.detail.pt-2 {
  padding-top: 7rem;
}


@media screen and (max-width: 1283px) {
  .site-nav .mdl-ul {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
  }
}

@media screen and (max-width: 1064px) {
  .site-nav .mdl-ul {
    gap: 0px;
  }

  .menu-level-2 li,
  .third-level-container li {
    font-size: 14px;
  }
}

@media screen and (max-width: 1024px) {

  .order-tracking-header {
    display: grid;
    gap: 8px;
  }

  .step-tracking-container {
    display: grid;
    gap: 12px;
    padding-bottom: 4rem;
  }

  .time-line-tracking-card {
    position: relative;

  }

  .tracking-btn {
    position: absolute;
    bottom: 16px;
  }


  .tracking-list-container .card {
    height: fit-content;
    padding: 12px;
    max-height: fit-content;
  }

  .container-cards-tracking {
    display: grid;
  }

  .container-cards-tracking .card {
    width: 100%;
  }

  .confirmation-card .content ul {
    display: grid;
  }

  .confirmation-card .footer {
    display: grid;
  }

  .confirmation-card .footer .actions,
  .confirmation-card .header .actions {
    justify-content: start;
  }

  .tracking-footer {
    padding: 16px 0px;
  }

  .tracking-container .confirmation-card .mdl-button {
    padding-left: 0px !important;
  }

  .tracking-container {
    font-size: 14px;
    line-height: 16px;
  }

  .tracking-container .mdl-button {
    width: 100%;
  }

  .order-tracking-header .info-content {
    display: grid;
  }

  .order-tracking-header>div:first-child {
    display: grid;
    gap: 8px;
  }



  .products-list-card ul {
    max-height: unset;
  }

  .confirmation-card .header {
    display: grid;
  }

  .confirmation-card .header .actions button,
  .confirmation-card .footer .actions .mdl-button {
    justify-content: start;
  }



  .confirmation-card .content ul li {
    gap: 8px;
  }

  .products-list-card .h5-bold {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .products-list-card .h5-bold i {
    display: flex;
  }

  .accordion-container.active .product-list-accordion i {
    transform: rotate(180deg);
  }

  .order-tracking-header {
    position: relative;
  }

  .card-tracking .obj-span {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  .products-list-card ul li {
    position: relative;
  }

  .products-list-card ul li.blur-list-element {
    display: none;
  }

  .toast-information {
    width: 100%;
  }

  .toast {}

  .tracking-container .mdl-button {
    width: 90%;
  }

  .order-tracking-header .info-content {
    display: grid;
  }

  .order-tracking-header>div:first-child {
    display: grid;
    gap: 8px;
  }



  .products-list-card ul {
    max-height: unset;
  }

  .confirmation-card .header {
    display: grid;
  }

  .confirmation-card .header .actions button,
  .confirmation-card .footer .actions .mdl-button {
    justify-content: start;
  }

  .confirmation-card .content ul li span {
    padding: 0px;
  }

  .confirmation-card .content ul li {
    gap: 8px;
  }

  .products-list-card .h5-bold {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .products-list-card .h5-bold i {
    display: flex;
  }

  .accordion-container.active .product-list-accordion i {
    transform: rotate(180deg);
  }

  .order-tracking-header {
    position: relative;
  }

  .profile-container .obj-span {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  .profile-card-user .obj-span {
    position: static;
  }

  .products-list-card ul li {
    position: relative;
  }

  .products-list-card ul li.blur-list-element {
    display: none;
  }


  .toast:not(.m-0) {
    margin: 16px 0px;
  }

  .modal-producto-agregado .toast,
  .products-page .toast {
    margin: 0;
  }

  .products-list-card ul {
    display: none;
  }

  .product-list-accordion {
    cursor: pointer;
  }

  .products-list-card.open-accordion ul {
    display: block;
  }

  .product-list-accordion i {
    transition: transform 0.3s ease;
  }

  /* Cuando el contenedor está abierto, rota el ícono */
  .open-accordion .product-list-accordion i {
    transform: rotate(180deg);
  }

  main.pedido:has(.tracking-container) {
    padding: 12px;
  }

}

.toast-actions a,
.toast-actions button {
  overflow: visible
}


.tracking-container .search-header-container {
  max-width: 440px;
}

.filter-tracking {
  display: flex;
  gap: 24px;
  align-items: center;
}

.filter-tracking-container {
  display: grid;
  gap: 24px;
}

.mdl-buttons-check-container {
  display: flex;
  gap: 16px;
}

.mdl-check-button {
  border-radius: 100px;
  color: var(--neutrals800);
  border: 1px solid var(--neutrals200);
  display: flex;
  padding: var(--Spacing-2, 8px) 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: white;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.mdl-check-button i {
  display: none;
}

.mdl-check-button.checked {
  color: var(--primary);
  background: var(--primary100);
  border: 1px solid var(--primary100);
  transform: scale(1.05);
}

.mdl-check-button.checked i {
  display: block;
}

.card-tracking {
  display: flex;
  justify-content: space-between;
}

.card-tracking.card:hover {
  cursor: pointer;
  border: 1px solid var(--primary);
}

.card-tracking:has(.buttons-tracking:hover) {
  border: 1px solid var(--neutrals400);
}

.card-tracking .tracking-info .header {
  display: flex;
  gap: 16px;
  align-items: center;
}

.separator-bar {
  width: 1px;
  background-color: var(--neutrals400);
  height: 16px;
}

.card-tracking {
  padding: 16px 24px;
}

.tracking-stepper {
  width: 50%;
  height: 4px;
  background-color: var(--neutrals100);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}


.progress-fill {
  height: 100%;
  background-color: var(--primary600);
  border-radius: 10px 0 0 10px;
  transition: width 0.4s ease;
  /* animación */
}

.tracking-images-container {
  display: flex;
  gap: 16px;
}

.tracking-info {
  display: grid;
  gap: 16px;
}

.tracking-image {
  width: 50px;
  height: 50px;
  aspect-ratio: 1/1;
  border-radius: 8px;
  background-color: var(--neutrals100);
}

.tracking-data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}

.tracking-data-amount {
  gap: 16px;
}

.tracking-data-amount:has(.buttons-tracking) {
  display: flex;
  flex-direction: column;
}

.tracking-data-amount:not(:has(.buttons-tracking)) {
  display: flex;
  justify-content: end;
}

.tracking-data-amount button {
  padding: 8px 24px;
}

.amount-tracking {
  display: flex;
  gap: 8px;
  justify-content: end;
}

.tracking-points {
  align-content: center;
  color: var(--neutrals800);
}

.tracking-header {
  display: grid;
  gap: 16px;
}

.tracking-header h1.h4-bold {
  justify-content: start !important;
}

.tracking-header .breadcrumbs {
  padding: 0px !important;
  margin: 0px !important;
}

.tracking-list-container {
  display: grid;
  gap: 16px;
}

.more-images-indicator {
  position: relative;
}

.more-images-indicator img {
  filter: blur(.8px) grayscale(67%);
}

.more-images-indicator span {
  position: absolute;
  top: 14px;
  left: 14px;
  color: white;
  padding: 2px;
}

.tracking-footer {
  display: grid;
  gap: 16px;
  justify-content: center;
  align-items: center;
  padding-top: 24px;
}

.tracking-footer .text {
  display: grid;
  gap: 8px;
}

.tracking-footer span {
  display: grid;
  justify-content: center;
  align-items: center;
}

.tracking-footer .mdl-card-icon i {
  font-size: 24px !important;
  transform: scale(1) !important;

}

.tracking-footer .cards-footer {
  display: flex;
  gap: 12px;
}

.tracking-footer .card-icon {
  width: 35px;
  height: 35px;
  min-height: unset;
}

.buttons-tracking {
  display: flex;
  gap: 8px;
}

.tracking-footer .mdl-card-icon {
  padding: 8px 16px;
  gap: 12px;
  min-height: unset;
  min-width: unset;
  width: 203px;
  justify-content: center;
  display: flex;
  align-items: center;
}

.search-container-tracking {
  display: flex;
  gap: 24px;
  align-items: center;
}

.tracking-container .mdl-button.link {
  text-decoration: underline;
}

.tracking-container .mdl-button.link i {
  text-decoration: none;
}

@media screen and (max-width: 920px) {
  .tracking-content {

    justify-content: center;
  }

  .tracking-container .mdl-button {
    width: 100%;
  }

  .tracking-container.omnilife-v2 {
    display: block;
    margin-top: 0px;
  }

  .card-tracking.card {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 16px;
    position: relative;
    padding-bottom: 24px;
    margin: 0px;
    padding-top: 40px;
  }

  .tracking-stepper {
    position: absolute;
    bottom: 12px;
    width: 90%;
  }

  .card-tracking.card>* {
    width: 100%;
    /* 🔥 hace que cada hijo ocupe todo el ancho */
  }

  .tracking-info,
  .tracking-info,
  .tracking-data {
    display: flex;
    flex-direction: column;
  }

  .tracking-data .obj-span {
    position: absolute;
    right: 5px;
    top: 8px;
  }

  .tracking-info .header {
    display: grid !important;
  }

  .tracking-image {
    width: 40px;
    height: 40px;
  }

  .tracking-images-container {
    max-width: 100%;
  }

  .buttons-tracking {
    display: grid;
  }

  .cards-footer {
    display: grid;
  }

  /*.mdl-card-icon { Esta clase se repite en la linea 29216
    width: 100%;
    display: flex;

    flex-direction: inherit;
  }*/

  .mdl-buttons-check-container {
    display: flex;
    gap: 16px;
    padding: 10px;
    overflow-x: auto;
    margin: 16px 0px;
  }

  .mdl-buttons-check-container .mdl-check-button {
    max-height: 40px;
    white-space: nowrap;
  }

  .search-container-tracking .search-header-container #search {
    display: block;
    height: fit-content;
  }


  .mdl-check-button {
    padding: 8px 24px;
  }

  .tracking-footer .cards-footer {
    display: grid;
  }


  #select-filter-tracking {
    display: none;
  }

  .tracking-data-amount {
    width: 100%;
  }

  .omnilife-v2.tracking-container .h4-bold {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
  }

  .omnilife-v2.tracking-container .tracking-info .h4-bold {
    justify-content: start;

  }

  .tracking-single.omnilife-v2,
  .tracking-container.omnilife-v2 {
    margin-top: 0px !important;
  }

  .amount-tracking,
  .tracking-data-amount {
    display: flex;
    justify-content: space-between;
  }

  .tracking-container .mdl-pagination-container .mdl-pagination-btn {
    border: 1px solid var(--primary100) !important;
  }

  .tracking-container .mdl-pagination-container #pageNumbers span {
    max-width: 32px;
    height: 32px;
  }

  .tracking-container .mdl-pagination-container #nextBtn::after,
  .tracking-container .mdl-pagination-container #prevBtn::after {
    top: 11px !important;
    width: 41% !important;
    height: 100% !important;
  }

  .order-tracking-header .info-content .obj-span {
    position: relative;
    right: 0px;
    top: 0;
  }

  .time-line-tracking-card .name-container button {
    width: 90%;

  }

  .time-line-tracking-card .header .actions {
    position: fixed;
    bottom: 0px;
    background-color: white;
    width: 100%;
    padding: 15px;
    left: 14px;
    z-index: 5;
    margin-left: -10px;
  }

  .separator-bar {
    display: none;
  }

  .tracking-single .separator-bar {
    display: flex;
  }

  .card-tracking:has(.pink-span) .separator-bar {
    background-color: transparent;
    display: flex;
  }

}

.time-line-tracking-card .name-container button {
  padding: 8px 24px;
  min-width: unset;
}

.time-line-tracking-card .actions button {
  padding: 8px 24px;
}

.mdl-modal {
  z-index: 999;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 16px 24px -16px rgba(89, 88, 88, 0.10);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  gap: 16px;
  max-width: 700px;
}

.info-sub-purchase {
  background-color: var(--info100);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.info-sub-purchase .header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-sub-purchase .header i {
  font-size: 20px;
  color: var(--info700);
}

.info-sub-purchase .body-small-bold {
  font-size: 14px;
}

.mdl-buttons-check-container {
  display: flex;
  gap: 16px;
  padding: 10px;
  overflow-x: auto;
  margin: 16px 0px;
}

.mdl-buttons-check-container .mdl-check-button {
  max-height: 40px;
  white-space: nowrap;
}

.search-container-tracking .search-header-container #search {
  display: block;
}

.search-container-tracking .search-header-container {
  height: fit-content;
  position: relative;
}

.search-container-tracking .select2-container--default .select2-selection--single {
  font-size: 14px;
}

.mdl-check-button {
  padding: 8px 24px;
}


.tracking-footer .cards-footer .mdl-card-icon {
  width: 100%;
  max-width: unset;
  justify-content: start;
  gap: 16px;
}

.tracking-data-amount {
  width: 100%;
}

.omnilife-v2.tracking-container .h4-bold {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.omnilife-v2.tracking-container .tracking-info .h4-bold {
  color: var(--neutral1000);

}

/*.mdl-modal {
  top: 50%;
  left: 50%;
  z-index: 9999999;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 16px 24px -16px rgba(89, 88, 88, 0.10);
  position: fixed;
  /* Mejor que absolute para centrar respecto a la pantalla
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  gap: 16px;
}*/

.info-sub-purchase {
  background-color: var(--info100);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.info-sub-purchase .header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-sub-purchase .header i {
  font-size: 20px;
  color: var(--info700);
}

.info-sub-purchase .body-small-bold {
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}

.info-sub-purchase ul {
  padding: 0px;
  margin: 0px;
  padding-left: 16px;
}

.modal-sub-purchase .modal-qr-footer {
  margin-top: 20px;
}

.modal-sub-purchase .modal-content,
.modal-filter-tracking .modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-tracking .h4-bold {
  padding: 16px 8px 8px 8px;
}

.search-tracking {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 60%;
}

.card-search-tracking {
  margin-top: 32px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 600px;
}

.card-search-tracking .actions {
  display: flex;
  justify-content: end;
}

.tracking-search-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 80%;

}

.tracking-search-container .actions .mdl-button {
  padding: 8px 24px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

@media (max-width: 920px) {
  .tracking-search-container {
    margin-top: 0rem !important;
  }

  .tracking-search-container {
    padding: 0px 8px;
  }

  .search-tracking {
    align-items: flex-start;

  }

  .card-search-tracking {
    min-width: unset;
    margin-top: 16px;
  }

  .search-tracking .h4-bold {
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    padding: 16px 0px 8px 0px;
    line-height: 28px
  }

  .search-tracking .body-medium-large {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  .search-tracking .body-medium-large {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  .search-tracking .body-medium-medium {
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
  }

  .tracking-search-container .actions .mdl-button {
    min-width: 100%;
    max-width: unset;
  }

}

.historial-pedido,
.pedido {
  padding-top: 0px !important;
  display: grid;
}

.card-tracking .obj-span:not(.pink-span) {
  position: absolute;
  top: 12px;
}

/* ==========================================
       FIN  SEGUIMIENTO DE PEDIDO
========================================== */

/* ==========================================
              EDITAR PERFIL
========================================== */
.success-action-modal.mdl-modal {
  gap: 0px;
  width: 437px;
}

.success-action-modal .content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 24px;
}

.success-action-modal .text {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.success-action-modal .modal-info-user-header {
  padding: 0px;
  justify-content: end;
}

.success-action-modal .icon-container {
  position: relative;
  padding: 20px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  overflow: hidden;
}

.success-action-modal .icon-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--success100);
  border-radius: 100%;
  transform: scale(0);
  animation: growBg 1s ease-out forwards;
  z-index: 0;
}

.success-action-modal .icon-container i {
  font-size: 48px;
  color: #01784D;
  position: relative;
  z-index: 1;
}

@keyframes growBg {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  70% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

.profile-container {
  background-color: var(--neutrals100);
  display: flex;
  flex-direction: column;
}

.profile-image img {
  border-radius: 100px;
  width: 82px;
  height: 82px;

}

.profile-card-user.card {
  background-color: transparent;
  display: flex;
  border: none !important;
  gap: 8px;
  padding: 0;
}

.profile-card-user .header {
  display: flex;
  justify-content: start;
  gap: 24px;
  position: relative;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 12px 40px 12px 12px;
}

.profile-card-user .content {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  width: 50%;
}

.profile-card-user .phone i {
  color: var(--primary);
  transform: rotate(90deg);
  gap: 4px;
}

.countryFlagImage {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  order: -1;
}

.profile-card-user .profile-info .profile-type-user {
  display: flex;
  order: -1;
  gap: 8px;
  align-items: center;
}

.profile-card-user .profile-info .countryFlagImage {
  order: 2;
  object-fit: cover;
}

.co-empresario-information {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background-color: #ffffff;
  border-radius: 8px;
  width: 50%;
}

.profile-container .h5-bold,
.profile-container .body-large-bold {
  color: var(--neutrals900)
}

.information-text {
  color: var(--neutrals900);
  font-family: "Noto Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px
}

.co-empresario-information .info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.presentador-information {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background-color: #ffffff;
  border-radius: 8px;
  width: 50%;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
}

.information-account-container .content {
  width: 100%;
}

.card-info-reporte-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.profile-data-info-billing .custom-row,
.profile-data-info .custom-row,
.card-info-edit-container .custom-row,
.information-account-container .custom-row,
.edit-information-account-container .custom-row,
.edit-billing-container .custom-row,
.container-co-emp-list .data-list .custom-row {
  gap: 16px 0px;
}

.card-info-co-empresario-edit-container .custom-row {
  gap: 0;
}

.profile-data-info .header,
.profile-data-info-billing .header,
.edit-billing-container .header,
.card-info-edit-container .header,
.card-info-co-empresario-edit-container .actions-edit-address,
.edit-address-container .header,
.edit-address-container .actions-edit-address,
.card-info-reporte-container .header {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-info-reporte-container .header.reporte-denuncia-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.card-info-reporte-container {
  gap: 4px 20px !important;
}

.card-info-co-empresario-edit-container .custom-row>div {
  height: 88px;
  align-content: center;
}

.profile-item .interests {
  display: flex;
  gap: 8px;
}

.profile-item .interests span {
  padding: 4px;
  border-radius: 4px;
  background-color: var(--neutrals100);
}

.my-info-card {
  padding: 16px;
  margin: 0 !important;
}

.profile-container .mdl-button.link {
  padding: 8px;
}

.profile-container .mdl-button.secondary {
  padding: 8px 24px;
}

.tab-content.active,
.tab-kits-content.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.header-tab-address {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-tab-address div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-address .actions {
  display: flex;
  padding: 0px;
  align-items: flex-start;

}

.card-address {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  gap: 16px;
}

.card-address .mdl-button {
  padding: 8px;
}

.card-address .content {
  display: flex;
  flex-direction: column;
  gap: 16px;

}

.omnilife-v2.profile-container .tab-content {
  padding-top: 20px;
  background-color: transparent;
}

.date-picker-select-container input {
  cursor: pointer;
}

.profile-container .date-input-label.open {
  top: -13px;
  padding: 0px 8px;
}

.date-picker-select-container i {
  position: absolute;
  top: 1rem;
  right: 0.5rem;
  font-weight: normal;
  pointer-events: none;
  cursor: pointer;
}

.mdl-select .select2-selection__choice {
  background-color: var(--neutrals100);
  border: none !important;
}

.mdl-select .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-right: none !important;
}

.select2-results__option--selected {
  margin: 4px 0px;
}

.container-co-emp-list .actions-edit-address,
.card-info-co-empresario-edit-container .actions-edit-address,
.edit-address-container .actions-edit-address,
.my-info-card .actions-edit-address,
.card-info-account-data .actions-edit-address {
  justify-content: end;
  display: flex;
  gap: 16px;
}

.container-co-emp-list button,
.card-info-co-empresario-edit-container .actions-edit-address button,
.edit-address-container button {
  width: fit-content;
  padding: 8px 24px;
}

.actions-edit-address .primary {
  order: 2;
}

.actions-edit-address .secondary {
  order: 1;
}

.actions-edit-address .link {
  order: 3;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-address-container {
  background-color: #ffffff;
  padding: 16px;
  border-radius: 8px;
  gap: 24px;
  display: flex;
  flex-direction: column;
}


.upload-imagen-container input {
  display: none;
}

.omnilife-v2 .tabs-container-section .tab-content {
  padding: 0px;
}

.omnilife-v2 .tabs-container-section .tab-container .tabs {
  display: block ruby;
  margin-bottom: 16px;
}

.omnilife-v2 .profile-container .tab-button {
  padding: 14px 16px !important;
  height: fit-content;
  text-wrap-mode: nowrap;
}

.profile-container {
  gap: 16px;
}

.card-info-account-data {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-info-account-data .header,
.card-info-edit-container .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.card-info-language .profile-item {
  display: flex;
  justify-content: space-between;
  flex-direction: unset;
}

.card-info-language .header {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.modal-co-empresario {
  width: 90%;
  max-width: unset;
  display: flex;
  flex-direction: column;
  gap: 26px;
  overflow-y: auto;
  padding: 0px 16px 16px 16px;
}

.modal-co-empresario .container {
  display: flex;
  flex-direction: column;
  gap: 26px;

}

.modal-info-user-header {
  padding: 8px 0px;
}

.profile-container .select2-container {
  width: 100% !important;
}

.modal-select-language .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.air-datepicker-global-container {
  z-index: 999;
}

.select2-search__field {
  background-color: #ffffff;
}

.select2-search__field {}

.select2-container.select2-container--open .select2-search--inline .select2-search__field {
  display: none;

}

.select2-container .js-example-basic-multiple+.select2-container .selection {
  position: relative;
}

.js-example-basic-multiple+.select2-container .selection .span-placeholder-select-multiple {
  background-color: white;
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 12px;
  padding: 0px 6px;
}

.select2-container.select2-container--focus .span-placeholder-select-multiple {
  display: none;
}

.modal-select-language .modal-info-user-header,
.modal-validation .modal-info-user-header {
  padding: 0px;
}

.modal-validation .actions {
  width: 100%;
  padding: 16px;
}

.modal-validation .actions button {
  width: 100%;
}

.profile-image {
  position: relative;
}

.edit-profile-image-button {
  background-color: var(--primary700);
  border-radius: 32px;
  border: 1px solid white;
  color: white;
  font-size: 12px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  display: flex;
  padding: 8px;
  align-items: center;
}

#fileInput button {
  display: none;
}

.preview-profile-photo {
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
}

.profile-container ul.breadcrumbs {
  margin-left: 0px;
}

.profile-container .profile-title {
  color: var(--neutrals1000);
  font-family: "Noto Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}

.profile-card-user .header {
  width: 50%;
}

.profile-card-user:not(:has(.content)) .header {
  flex: 1;
}

.profile-container .tab-container .card {
  background-color: #ffffff;
}

.profile-container .tabs {
  border-bottom: 1px solid var(--neutrals200)
}

.change-photo-container,
.change-photo-container div,
.preview-photo-container,
.preview-photo-container .actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.validation-code-container .mb-1.mdl-text-block.tac {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-container .mdl-radio__label {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;

}

.profile-container .mdl-radio {
  font-family: "Noto Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  height: 1.5rem;
}

.modal-validation.mdl-modal,
.modal-co-empresario-validation-new.mdl-modal {
  width: 25rem !important;
}

.mdl-modal .actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.mdl-modal .actions.end {
  justify-content: flex-end;
}

.mdl-modal .actions.center {
  justify-content: center;
}

@media (max-width: 1024px) {
  .separator-bar {
    transform: rotate(0deg);
    width: 2px;
    height: 24px;
    position: relative;
    left: 6%;
  }

  .hide-in-desktop.log-in-mobile-button {
    display: flex !important;
  }


  .profile-card-user {
    display: flex;
    flex-direction: column;
  }

  .container-co-emp-list .data-list,
  .card-info-co-empresario-edit-container,
  .edit-billing-container,
  .card-info-reporte-container {
    display: flex;
    flex-direction: column;
  }

  .profile-card-user .content {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .co-empresario-information,
  .presentador-information {
    width: 100%;
  }

  .profile-container .card {
    background-color: #ffffff;
  }

  .profile-card-user .header {
    padding: 0px 16px 20px 0px;
    width: 100%;
  }

  .profile-card-user.card {
    padding: 24px;
  }

  .co-empresario-info-empty,
  .co-empresario-info-pending {
    justify-content: space-between;
    width: 100%;
    flex-direction: row-reverse;
  }

  .co-empresario-info-pending button {
    align-self: start !important;
  }

  .countryFlagImage {
    position: absolute;
    top: 16px;
    right: 16px
  }

  .profile-card-user .profile-info .countryFlagImage {
    position: static;
  }

  .card-info-account-data .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .modal-co-empresario .data-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .modal-co-empresario.mdl-modal {
    max-height: 90%;
    overflow-y: scroll;
  }

  .date-picker-select-container i {
    top: 2rem;
  }

  .actions-edit-address {
    display: flex;
    flex-direction: column;
    position: sticky;
    padding: 16px;
    gap: 16px;
    bottom: 0px;
    background-color: white;
    z-index: 10 !important;
  }

  .card-info-co-empresario-edit-container .actions-edit-address button {
    width: 100%;
  }

  .actions-edit-address button {
    width: 100%;
  }

  .omnilife-v2 .tabs-container-section .tab-container .tabs {
    display: flex;
  }

}

/* ==========================================
            FIN EDITAR PERFIL
========================================== */

label.mdl-radio.right.outline {
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding: 10px 46px 10px 10px;
}

.right.outline span.mdl-radio__outer-circle {
  left: unset;
  right: 20px;
}

.right.outline span.mdl-radio__inner-circle {
  left: unset;
  right: 24px;
}

.right.outline .mdl-radio__ripple-container {
  left: unset;
  right: 10px;
}

.right.outline .mdl-radio__label {
  margin: 5px 40px 0 0px;
}

figure.cart-product_img {
  width: 32px;
  margin: 0px 4px;
}

.cart-product_bottom,
.shared-times_container {
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0 4px;
  align-items: center;
}

.cart-product_list hr {
  margin: 8px 0px;
}

.cart-product_bottom p {
  font-size: 14px;
}

ul.cart-product_list.list-nostyle.ps.cart-list li {
  flex: 1;
}

ul.cart-product_list li {
  padding: 0 8px;
}

ul.cart-product_list li .d-flex {
  flex: 1;
}

ul.cart-product_list {
  gap: 0;
  margin: 0;
  padding: 4px;
  font-size: 14px;
  width: 100%;
  list-style: none;
}

.current-shipping-addres .card-content {
  gap: 8px;
  padding: 16px;
}

.mdl-radio.clear span.mdl-radio__outer-circle,
.mdl-radio.clear span.mdl-radio__inner-circle,
.mdl-radio.clear .mdl-radio__ripple-container {
  display: none;
}

#shipping-companies .cart-product_img {
  width: 42px;
  border-radius: 4px;
  overflow: hidden;
  margin: 4px 8px 0 0px;
}

#lista-direcciones .mdl-radio__label {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-right: 40px;
  gap: 8px;
}

#lista-direcciones .outline span.mdl-radio__outer-circle {
  top: 35%;
}

#lista-direcciones .outline span.mdl-radio__inner-circle {
  top: 37.3%;
  border: 2px solid #ffffff;
  box-sizing: content-box;
  right: 22px;
  box-shadow: 0 0 0 2px #ffffff inset;
}

#direcciones-section .modal-content {
  height: 83vh;

}

#direcciones-section .offset-lg-2.offset-xl-3.col-lg-7.col-xl-6 {
  overflow-y: scroll;
  height: 77vh;
}

#lista-direcciones .outline .mdl-radio__ripple-container {
  top: 24%;
}

.set-default-container {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  min-height: 40px;
  align-items: center;
  flex: 1;
  padding: 10px;
}

.set-default-container .mdl-checkbox {
  max-width: fit-content;
}


#payment-method figure.cart-product_img {
  width: 56px;
  display: flex;
  align-items: center;
  padding: 4px;
}

.side-cart {
  top: 65px;
  position: -webkit-sticky;
  position: sticky !important;
}

.mdl-button.squared {
  display: flex;
  border-radius: 1rem;
  border: 1px solid var(--neutral2);
  transition: var(--transition);
  justify-content: space-between;
}

.promo-added {
  display: none;
}

.input-wrapper .mdl-button {
  bottom: inherit;
  right: .5rem;
}

.input-wrapper {
  display: flex;
  border-radius: 8px;
  height: 48px;
  margin: .5rem 0;
  justify-content: flex-end;
  align-items: center;
}

#cart-side-right .promos-img figure {
  max-width: 34px !important;
  max-height: 34px;
  border-radius: 6px;
  min-width: auto;
}

.promos-img figure {
  max-width: 48px;
  border-radius: 8px;
  overflow: hidden;
  max-height: 48px;
  display: flex;
  justify-content: space-between;
  flex: 1;
  min-width: 48px;
}

.promos-img {
  gap: 8px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

figure.mas-promos span {
  position: relative;
  background: #00000070;
  height: 48px;
  width: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 0 3px black;
  margin-left: -48px;
}

.current-payment-img {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}


.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  border-bottom: 1px solid var(--neutrals200);
  height: auto;
  padding: 8px 0;
}


.cart-item img {
  width: 115px;
  height: 115px;
  border-radius: 8px;
  background: var(--neutrals100);
  border-radius: 8px;
}

.cart-item__segment {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item__segment.segment-2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.cart-item__segment.segment-1 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 1rem;
}

.cart-item__segment.segment-3 {
  justify-content: flex-end;
  display: flex;
  flex: 3;
}

.cart-item__segment.price-points {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: end;
  flex: 1;
  width: 100%;
  justify-content: end;
}

.cart-item__actions .counterProdcut {
  flex: 0 !important;
}

.cart-item__actions {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  flex: 1;
  gap: 1rem;
}

.cart-item .mdl-chip.small.primary {
  opacity: 1;
  padding: 0 8px;
  font-family: Noto Sans;
  font-size: 12px;
  background: var(--primary700);
  color: #fff;
}

ul.list-productos-carrito {
  margin: 0;
  padding: 0;
}


.list-productos-carrito .product-desc-shopping-car {
  flex: 2 0 0;
}

.list-productos-carrito .productPrice {
  align-self: auto;
}

.list-productos-carrito .counterProdcut {
  flex: 1;
  max-width: none;
}

.list-productos-carrito .del-prod {
  flex: 0;
  padding: 10px;
  min-width: 42px;
}



.circle-icon.color-secondary {
  background: var(--secondary100);
  max-width: 24px;
  max-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 60px;
  border: 2px solid;
}

.mdl-button.social-icon img {
  width: 32px;
}

a.mdl-button.social-icon {
  padding: 4px;
  height: 48px;
  max-width: 48px;
  min-width: 48px;
  border: 1px solid;
  border-radius: 200px;
}


.hr-text.m-half {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  page-break-inside: 8px;
  gap: 1rem;
}

.hr-text.m-half span:after {
  content: '';
  width: 40%;
  height: 1px;
  border-bottom: 1px solid black;
  position: relative;
  right: 30px;
}


.hr-lineleft,
.hr-lineright {
  border-top: 1px solid var(--neutral3);
  width: 100%;
  flex: 1;
  height: 0px;
}

#login-social {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem 2rem;
  gap: 3rem;
}

img.login-small-circle {
  max-width: 200px;
  position: absolute;
  top: -50px;
  right: -40px;
  z-index: 1;
}

.login-banner .mdl-card {
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-banner .h2 {
  font-family: Montserrat;
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  vertical-align: middle;
}

.login-banner {
  background-color: var(--secondary100) !important;
  padding: 2rem;
  border-radius: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.login-banner img.naranjitas {
  max-width: 200px;
  position: absolute;
  bottom: -50px;
  z-index: 1;
  right: -20px;
}

.login-banner .circulito {
  max-width: 100px;
  left: -20px;
  position: relative;
  top: -50px;
  min-width: 50px;
}

.login-banner__content {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

@media screen and (max-width: 920px) {
  .document-toast {
    padding: 10px 18px 0px 0px;
  }

  .objetives-col {
    width: 100% !important;
  }

  .objetives-grid span,
  .objetives-grid strong {
    font-size: 14px;
  }

  .element-container {}

  .contact-levels-container .mdl-button {
    display: none;
  }

  .contact-list {
    max-width: unset !important;
    width: 100%;
  }
}

/* =====================================================
     Empty states
   =====================================================
*/

.img-empty-state {
  height: 104px;
}

.img-empty-state-sm {
  height: 49.871px;
}

.empty-state-card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-direction: column;
}

.empty-state-card .content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.empty-state-card p {
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-state-card .content .body-medium-bold {
  color: var(--primary700);
  text-align: center;
}

.empty-state-card .content .body-medium-small {
  text-align: center;
  padding: 8px 36px 36px 8px;
}

.empty-state-card .content .mdl-button {
  width: fit-content;
  align-self: center;
  height: 40px;
  margin-top: 16px;
}

.card.level-card .cards-accordion-pz:has(.empty-state-card) {
  border: none !important;
}

.card.level-card .cards-accordion-pz .empty-state-card {
  height: 340px;
}

.container-chart .empty-state-card {
  justify-content: center;
  align-items: center;
  display: flex;
}

.summary-section .col-md-6 {
  display: flex;
  gap: 16px;
  flex-direction: column;
}

.objetives-list-title {
  display: flex;
}

.label-medium,
.label-bold {
  color: var(--primary700)
}

.objetives-list-title div {
  display: flex;
  flex-direction: column;
}

.nxt-lvl-container {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
}

.nxt-lvl-container div {
  width: 70%;
  display: flex;
  flex-direction: inherit;
}

.nxt-lvl-container div div {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.nxt-lvl-container .mdl-button {
  padding: 10px;
  min-width: unset;
}

.contact-list {
  display: flex;
  gap: 8px;
  overflow: auto;
  max-width: 80%;
  scrollbar-width: none;
}

.contact-levels-container {
  display: flex;
  justify-content: space-between;
  max-width: 39rem;
  padding: 0px 12px;
  gap: 8px;
  margin-bottom: 8px;
}

.icon-lvl-small {
  width: 20px;
  height: 20px;
  ;
}

.card.contact-lavel {
  display: flex;
}

.contact-levels-container .mdl-button {
  padding: 0px;
  min-width: 40px;
  height: 40px;
  width: 40px;
  top: 15px;
}

.objetives-list li div {
  width: 100%;
  justify-content: space-between;
}

.objetives-list .missing-elements {
  justify-content: end;
  text-align: right;
  font-family: "Noto Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  margin-top: -8px;
  gap: 4px;
}

.objetives-list li div ul {
  color: var(--neutrals700);
  padding: 0px;
}

.objetives-col {
  background-color: var(--neutrals100);
}

.objetive-done {
  color: #01784D;
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.element-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.error-color {
  color: var(--error700);
}

.objetives-col {
  overflow-x: hidden;
}

.element-container strong {
  font-size: 14px;
}

.element-container span {
  font-family: "Noto Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  max-width: 75%;
}

.button-show-hide-level-container {
  right: 24px;
  position: fixed;
  width: fit-content;


}

.button-show-hide-level-container i {
  transition: transform 0.3s ease;
}

.button-show-hide-level-container i.rotado {
  transform: rotate(180deg);
}


/**
 Nuevos estilos y clases para los siguientes componentes:
    1.- Etiquetas de Disponibilidad de Producto
    2.- Corazón de favoritos
    3.- Botones y modal para Notificar de productos y cambio en dirección de entrega
    4.- Ajustes visuales en detalle de producto
    5.- Sticky footer en detalle de producto
 */
.name-product-with-heart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.mdl-availability-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  padding: 8px;
}

.mdl-availability-container .availabitity-case,
.mdl-availability-container .availabitity-location {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

@media (max-width: 480px) {
  .mdl-availability-container .availabitity-location {
    margin-left: 24px;
  }
}

.mdl-availability-container .availabitity-case.success,
.mdl-availability-container .availabitity-case.success .body-medium-medium {
  color: #01784D;
  flex-shrink: 0;
}

.mdl-availability-container .availabitity-case.danger,
.mdl-availability-container .availabitity-case.danger .body-medium-medium {
  color: #C6250F;
  flex-shrink: 0;
}

.mdl-availability-container .availabitity-case.warning,
.mdl-availability-container .availabitity-case.warning .body-medium-medium {
  color: var(--warning1000);
  flex-shrink: 0;
}

.mdl-availability-container i {
  display: flex;
  width: 24px;
  height: 24px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  line-height: normal;
}

.mdl-button.mdl-btn-notify-product {
  height: 48px;
}

.mdl-btn-notify-product i {
  display: flex;
  width: 24px;
  height: 24px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


.modal-notificacion-producto {
  width: 560px;
  min-width: 280px;
  max-width: 560px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.modal-notificacion-producto .mdl-button--icon .fa-times {
  font-size: 24px;
}

.mdl-availability-container-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  align-self: stretch;
}

.mdl-availability-container-input #btn-close-modal-product {
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 40px;
}

.mdl-availability-container-input .mdl-card__actions.mdl-card--border {
  border: 0;
  margin: 0;
  display: flex;
  justify-content: end;
  padding: 0;
}

.mdl-btn__change_location {
  display: flex;
  padding: 0 !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.toast.toast-warning.toast-low-stock-product,
.toast.toast-warning.toast-low-stock-product .toast-information {
  width: fit-content;
  align-content: center;
}

@media(max-width: 480px) {

  .toast.toast-warning.toast-low-stock-product,
  .toast.toast-warning.toast-low-stock-product .toast-information {
    width: 100%;
    align-content: center;
    margin: 0;
  }
}

.product-details-ficha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease, margin 0.4s ease;
  opacity: 0;
}

.product-details-ficha .body-bold-large {
  font-family: "Noto Sans", sans-serif !important;
}

.product-details-ficha.open {
  max-height: 2000px;
  /* Ajusta según el contenido */
  opacity: 1;
}

/* Animación del ícono chevron */
#view-prod-desc .fa-chevron-down {
  display: inline-block;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

#view-prod-desc .fa-chevron-down.rotate {
  transform: rotate(180deg);
}

@media(max-width: 1200px) {
  .products-page .color__choosed .color__product {
    flex: 1;
    justify-content: flex-start;
  }

  .products-page .color__choosed .color__title {
    text-align: left;
    width: 100%;
  }

  .products-page .color__choosed {
    align-items: flex-start;
  }
}

.color__title p {
  flex-shrink: 0;
}

.color__title:has(.toast) {
  padding-bottom: 6px;
}

/* Barra inferior fija para móvil */
.sticky-footer-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 -24px 32px -24px rgba(89, 88, 88, 0.20);
  z-index: 66;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: none;
}

/* Mostrar solo en móvil */
@media (max-width: 768px) {
  .sticky-footer-mobile {
    display: block;
  }

  .modal-notificacion-producto {
    width: 90%;
  }


}

.sticky-footer-mobile.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.4s ease, padding 0.4s ease, margin 0.4s ease;
}

.sticky-footer-content {
  gap: 16px;
  display: flex;
  min-width: 375px;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
}

.sticky-footer-content .price-info {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.sticky-footer-mobile .labelProduct.omnilight {
  position: static;
  font-size: 14px;
  height: 28px;
}

.sticky-footer-mobile .mdl-card__actions {
  padding: 0;
}

.sticky-footer-mobile .mdl-button {
  height: 40px;
}

.mdl-product__view,
.mdl-product__detail {
  padding-top: 120px !important;
}

.mdl-btn__ficha_product {
  display: flex;
  padding: 8px 1px !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}

.mdl-btn__ficha_product * {
  text-decoration: none !important;
}

.mdl-product__detail .principal {
  padding: 0;
}

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

@media (width >=720px) {
  .mdl-product__detail .breadcrumbs {
    padding-left: 0 !important;
    width: 100%;
    padding-bottom: 4rem;
  }
}

/*
Clases y estilos para Banners de promociones en productos y card de producto con precio especial
*/
.mdl-banner__promo_container {
  padding: 40px 0;
  position: relative;
  z-index: 0;
}

.mdl-banner__promo {
  display: flex;
  height: 281px;
  align-items: center;
  align-self: stretch;
  border-radius: 16px;
  overflow: hidden;
}

#mdl-template_1.mdl-banner__promo {
  background: var(--primary700);
}

#mdl-template_1.mdl-banner__promo .mdl-banner__promo_imgs {
  flex: 1 0 0;
}

#mdl-template_1.mdl-banner__promo .mdl-banner__promo_btn {
  background-color: white;
  color: var(--primary)
}


#mdl-template_2.mdl-banner__promo {
  background: var(--secondary100);
}

#mdl-template_2.mdl-banner__promo .mdl-banner__promo_imgs {
  background-image: url(https://cdn.omnilife.com/public/uploads/images/products/promotions/slider%20promociones/background-temp-banner-promo1.svg);
  background-color: var(--secondary200);
  flex-shrink: 0;
}

#mdl-template_3.mdl-banner__promo {
  background: var(--success100);
}

#mdl-template_3.mdl-banner__promo .mdl-banner__promo_imgs {
  background-image: url(https://cdn.omnilife.com/public/uploads/images/products/promotions/slider%20promociones/background-temp-banner-promo2.svg);
  background-color: var(--success300);
  flex-shrink: 0;
}

#mdl-template_4.mdl-banner__promo {
  background: var(--secondary100);
}

#mdl-template_4.mdl-banner__promo .mdl-banner__promo_imgs::after {
  content: "";
  position: absolute;
  top: -120px;
  right: 0;
  background-image: url(https://portalqa.omnilife.com/uploads/images/portal/redesign/deco-star.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
  filter: opacity(0.4);
  width: 240px;
  height: 240px;
}

#mdl-template_4.mdl-banner__promo .mdl-banner__promo_imgs::before {
  content: "";
  position: absolute;
  bottom: -120px;
  left: -5%;
  width: 240px;
  height: 240px;
  background-image: url("https://portalqa.omnilife.com/uploads/images/portal/redesign/deco-star.svg");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
  filter: opacity(0.4);
}

#mdl-template_4.mdl-banner__promo .mdl-banner__promo_imgs {
  position: relative;
  flex: 1 0 0;
  overflow: hidden;
}

#mdl-template_4.mdl-banner__promo .mdl-banner__promo_imgs picture {
  position: relative;
  z-index: 2;
}

#mdl-template_5.mdl-banner__promo {
  background: var(--primary100);
}

#mdl-template_5.mdl-banner__promo .mdl-banner__promo_imgs {
  background-image: url(https://cdn.omnilife.com/public/uploads/images/products/promotions/slider%20promociones/background-temp-banner-promo3.svg);
  background-color: var(--primary300);
  flex-shrink: 0;
}

#mdl-template_2 .mdl-countdown .mdl-countdown__items *,
#mdl-template_3 .mdl-countdown .mdl-countdown__items *,
#mdl-template_4 .mdl-countdown .mdl-countdown__items *,
#mdl-template_5 .mdl-countdown .mdl-countdown__items * {
  color: var(--neutrals900) !important;
}



#mdl-template_2 .mdl-countdown .countdown-timer .date-item,
#mdl-template_3 .mdl-countdown .countdown-timer .date-item,
#mdl-template_4 .mdl-countdown .countdown-timer .date-item,
#mdl-template_5 .mdl-countdown .countdown-timer .date-item {
  background: linear-gradient(0deg, rgb(137 137 137 / 10%) 0%, rgb(137 137 137 / 10%) 100%), rgb(137 137 137 / 10%);
}


.owl-banner-promociones .owl-nav {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: space-between;
  top: 35%;
}

.owl-banner-promociones .owl-nav button {
  border-radius: 50% !important;
  background-color: white !important;
}

.owl-banner-promociones .owl-nav button.owl-prev {
  position: relative;
  right: 25px;
}

.owl-banner-promociones .owl-nav button.owl-next {
  position: relative;
  left: 25px;
}

.mdl-banner__promo_info_container {
  display: flex;
  padding: 24px 48px 40px 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
}

.mdl-banner__promo_info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.mdl-banner__promo_imgs {
  min-width: 511px;
  padding: 0 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  display: flex;
}

.mdl-banner__promo_imgs img {
  object-fit: contain;
  max-height: 209px;
}

.mdl-banner__promo_info .labelProduct {
  position: static;
}

.mdl-banner__promo_info_container .button-container:not(:has(.mdl-countdown)) {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.mdl-banner__promo_info_container .mdl-countdown {
  padding: 0;
  background: none;
  padding-left: 14px;
}

.mdl-banner__promo_info_container .mdl-countdown .countdown-timer .mdl-countdown__items {
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
}

.mdl-banner__promo_info_container .mdl-countdown .date-item.hour:after,
.mdl-banner__promo_info_container .mdl-countdown .date-item.minute:after {
  margin-right: 55px;
  font-size: 60px;
  right: -72px;
  top: 25%;
}


#mdl-template_1.mdl-banner__promo .labelProduct.tag-promo {
  background-color: var(--secondary100);
  color: var(--secondary1000);
}

#mdl-template_1.mdl-banner__promo .h4-bold,
#mdl-template_1.mdl-banner__promo .body-small-regular {
  color: white;
}

#mdl-template_2.mdl-banner__promo .labelProduct.tag-promo {
  background-color: var(--primary600);
  color: white;
}

#mdl-template_3.mdl-banner__promo .labelProduct.tag-promo {
  background-color: var(--info600);
  color: white;
}

#mdl-template_4.mdl-banner__promo .labelProduct.tag-promo {
  background-color: var(--primary100);
  color: var(--primary600);
}

#mdl-template_5.mdl-banner__promo .labelProduct.tag-promo {
  background-color: var(--secondary700);
  color: white;
}

.mdl-banner__promo_info_container .mdl-countdown .mdl-countdown__items .date-item {
  padding: 4px 8px;
}

.mdl-banner__promo_btn {
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 40px;
}

@media (max-width: 720px) {
  .mdl-banner__promo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    min-height: 445px;
  }

  .mdl-banner__promo_imgs {
    min-width: 343px;
    width: -webkit-fill-available;
  }

  .mdl-banner__promo_info_container {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }

  .mdl-banner__promo_info_container .button-container .mdl-banner__promo_btn {
    padding: 16px 24px;
    font-size: 16px;
    width: 100%;
  }

  .mdl-banner__promo_info_container .button-container:has(.mdl-countdown) {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .mdl-banner__promo_info_container .mdl-countdown .date-item.hour:after,
  .mdl-banner__promo_info_container .mdl-countdown .date-item.minute:after {
    content: ':';
    position: absolute;
    margin-right: 60px;
    font-size: 60px;
    right: -78px;
    top: 15px;
  }
}

.cardProducts.p-special {
  background-color: var(--primary);
  border-radius: 16px;
}

.cardProducts.p-special *:not(.mdl-button):not(i) {
  color: white !important;
}


.cardProducts.p-special .counterProdcut .numberProd {
  color: var(--primary800) !important;
}

.labelProduct.precio-especial {
  background-color: var(--secondary);
  color: #fff;
}

.labelProduct.omnilight {
  background-color: var(--primary100);
  color: var(--primary600);
}

.mdl-text__white {
  color: #fff !important;
}

/*EMPTY*/
.objetive-title-container {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.4s ease;
  gap: 4px;
  top: 0;
  left: 0;
  width: 100%;
}

/* Animaciones */
.slide-in-right {
  display: block;
  transform: translateX(100%);
  opacity: 0;
  animation: slideInRight 0.4s forwards;
}

.slide-in-left {
  display: block;
  transform: translateX(-100%);
  opacity: 0;
  animation: slideInLeft 0.4s forwards;
}

.slide-out-left {
  animation: slideOutLeft 0.4s forwards;
}

.slide-out-right {
  animation: slideOutRight 0.4s forwards;
}

@keyframes slideInRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slideOutRight {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.buttons {
  position: relative;
  z-index: 10;
  margin-top: 150px;
}

.img-contact-ctnr {
  width: max-content;
}

.label-check-check {
  display: flex;
  gap: 8px;
}

.label-check-check input[type="checkbox"] {
  height: 18px;
  width: 18px;
}

.label-check-img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.modal-qr-content {
  gap: 16px;
}

.label-check-img-container img {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}

.private-zone-content .mdl-modal.modal-preview-check {
  width: 95%;
  background: transparent;
  padding: 0px !important;
}

.modal-preview-check .modal-notifications-header>* {
  color: #fff !important;
}

.modal-download-check .modal-qr-content {
  gap: 16px;
}

.secondary.mdl-button[disabled][disabled] {
  background-color: white;
}

.check-previer-img {
  width: 590px;
  height: 219px;
  border-radius: 8px;

}

.preview-check-container {
  display: none;
}

.modal-preview-check .preview-check-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 8px;
}

.modal-preview-check .modal-qr-content,
.modal-preview-check .modal-qr-footer,
.modal-preview-check .modal-cheque-footer {
  display: none;
}

/* =====================================================
     Checkout
   =====================================================
*/

.owl-theme .owl-nav [class*=owl-]:hover {
  background: transparent !important;
}

.mdl-message-box.promo {
  color: var(--neutrals1000);
  background: #FFEDCC;
  background: linear-gradient(90deg, rgba(255, 237, 204, 1) 0%, rgba(255, 249, 225, 1) 50%, rgba(255, 237, 204, 1) 100%);
}

.mdl-message-box.promo i {
  color: var(--error400);
}

.promo .text-secondary {
  color: var(--error400);
  padding: 16px 24px;
}

#optional-promos .mdl-card.small.outline.mt-1 {
  border: 1px solid var(--secondary700);
  background: var(--secondary1);

}

#promo-choose-before {
  margin-top: -.5rem;
  margin-bottom: 1rem;
}

#optional-promos {
  padding-bottom: 2rem;
}

#payment-method label.mdl-radio {
  margin: 0;
  border-radius: 0;
}


#payment-method label.mdl-radio:first-of-type {
  border-radius: 10px 10px 0 0;
}

.pmnt-cntn.hidden {
  opacity: 0;
  transition: all 500ms cubic-bezier(0.000, 0.000, 0.580, 1.000);
  height: 0px;
  min-height: 0;
  display: block !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
}

.pmnt-cntn {
  opacity: 1;
  transition: all 500ms cubic-bezier(0.000, 0.000, 0.580, 1.000);
  height: auto;
  min-height: 90px;
  border: 1px solid var(--primary400);
  border-radius: 0 0 8px 8px;
  background: var(--neutral1);
  border-top: 0;
  padding: 1rem 0;
  top: 0;
  position: relative;
}

.mdl-card.small.outline.added {
  background: #FFF8E080 !important;
  border: 1px solid #fff8e0 !important;
}

.mdl-card.small.outline.added .promos-img {
  display: flex;
  flex-direction: row-reverse;
}

#optional-promos .mdl-card.small.outline .opt-added {
  display: none;
}

#optional-promos .mdl-card.small.outline.added .opt-added {
  display: flex;
}

#optional-promos .mdl-card.small.outline.added .not-added {
  display: none;
}

.promo-container.has-counter.active .counterProdcut {
  display: flex;
  opacity: 1;
  transform: scale(1);
  transition: var(--transition);
}

.paypal-btn {
  background-color: #FFC335 !important;
  color: var(--neutral5) !important;
}

.promo-container.has-counter .counterProdcut {
  display: flex;
  opacity: 0;
  transform: scale(0);
  transition: var(--transition);
  position: absolute;
  bottom: 20px;
}

.has-counter .mdl-radio.is-checked {
  padding-bottom: 60px;
}

div#selected-promos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promo-obl {
  padding-top: 1rem;
  border-top: 1px dashed var(--neutral2);
}

.selected-promo {
  padding: 0 .5rem;
}

/* Estilos Productos/Detalle Fase 2-3 */
.product-social_favorite {
  display: flex;
  gap: 12px;
}

.principal__desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (min-width: 992px) {
  #product-purchase-actions button {
    width: 40%;
  }
}


/* Mobile */
@media (max-width: 768px) {
  .mdl-product__car_actions {
    flex-direction: column;
    width: 100%;
  }

  .counterProdcut {
    flex: 1;
  }

  .mdl-product__car_actions .mdl-button.addToCarBtn {
    flex: 1;
    min-width: 0;
  }

  .mdl-product__car_actions .mdl-button.buyNowBtn {
    width: 100%;
  }
}

.mdl-card.card-descuentos-opciones {
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  width: 70%;
  border-radius: 12px;
  border: 1px solid var(--neutrals500);
  min-height: auto;
}

#name__color.color-unavailable,
#name__size.size-unavailable {
  text-decoration: line-through;
}

.card-descuentos-opciones .mdl-accordion__content-wrapper {
  overflow: hidden;
  display: none;
}

.card-descuentos-opciones .mdl-accordion__button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  align-self: stretch;
}

.card-descuentos-opciones .mdl-accordion__button .btn-view-list-desc {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-descuentos-opciones .mdl-accordion .mdl-drawer__ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-descuentos-opciones .mdl-accordion .mdl-drawer__ul li {
  display: flex;
  justify-content: space-between;
}

.card-descuentos-opciones .mdl-accordion__icon {
  transition: transform 0.25s ease;
}

.card-descuentos-opciones .mdl-accordion--opened .mdl-accordion__icon {
  transform: rotate(180deg);
  /* Flecha hacia arriba cuando está abierto */
}

.card-descuentos-opciones .mdl-accordion.mdl-accordion--opened {
  border-top: 0;
  border-bottom: 0;
  margin-top: 0;
}

.size__chosed~.size__picker {
  border: 1px solid var(--primary800) !important;
  border-radius: 8px !important;
  color: var(--primary800) !important;
  font-weight: bold;
}

.size__option {
  width: 64px;
  height: 28px;
  position: absolute;
}

.color__product {
  align-items: center;
  align-content: center;
  gap: 12px 30px;
  align-self: stretch;
}

.product-social_favorite .mdl-button {
  min-width: max-content !important;
  border-radius: 0;
}

.product-social_favorite .mdl-button:is(:focus, :hover) {
  background-color: #fff;
}

.container-icon-punts {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  align-content: center;
  font-size: 13px;
}


.size__product {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.size__option.unavailable~.size__picker {
  opacity: 0.6;
  pointer-events: none;
  border: 1px dashed var(--neutrals500) !important;
  color: var(--neutrals900) !important;
}

@media (max-width: 1024px) {
  .mdl-card.card-descuentos-opciones {
    width: 100%;
  }
}


.featured-product .button-container {
  justify-content: end;
  margin-bottom: 8px;
  margin-top: 8px;
}

.featured-product .button-container .secondary {
  height: 40px;
}


.modal-producto-agregado.mdl-modal,
.modal-selector-variante-producto.mdl-modal {
  max-width: 375px;
  display: flex;
  padding: 24px 16px;
  flex-direction: column;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.20);
  position: fixed;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

@media (min-width: 769px) {
  .modal-producto-agregado {
    top: 155px;
    right: 20px;
    left: auto;
    max-width: 375px;
    transform: translateX(20px);
  }

  .modal-producto-agregado.is-visible {
    transform: translateX(0);
  }
}

/* --- Mobile: bottom sheet --- */
@media (max-width: 768px) {

  .modal-producto-agregado,
  .modal-selector-variante-producto {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: none !important;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .modal-producto-agregado.is-visible,
  .modal-selector-variante-producto.is-visible {
    transform: translateY(0);
  }
}

/* Estado visible */
.modal-producto-agregado.is-visible,
.modal-selector-variante-producto.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.modal-producto-agregado .header-modal,
.modal-selector-variante-producto .header-modal {
  display: flex;
  justify-content: space-between;
}

.modal-selector-variante-producto .cardImgContainer {
  background-color: #fff;
  margin: 0;
}

.modal-cart-product-img {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  background: var(--neutrals100);
  border-radius: 8px;
}

.container.modal-cart-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
}

.modal-cart-product {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  align-self: stretch;
}

.modal-cart-product-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
}

@media screen and (max-width: 980px) {
  .modal-cart-product-info {
    flex-direction: column;
  }
}

.modal-cart-product-info>:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}

.modal-cart-product-qty {
  display: flex;
  padding-right: 8px;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

.modal-cart-footer.button-container {
  flex-direction: column;
}

.modal-producto-agregado .modal-botom-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.modal-producto-agregado .favoriteContainer i.fa-heart {
  font-size: 24px;
}

.mdl-text-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

/* Estilos para visor de imagenes de producto en mobile */
.pswp__img {
  background: #fff;
}

/* Barra superior */
.pswp__top-bar {
  background: #333333;
  color: #ffffff;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pswp__title {
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 0 0;
  padding: 0px 16px;
}

.pswp__counter {
  font-size: 18px !important;
  opacity: 1 !important;
  position: static !important;
}

/* Ocultamos caption original */
.pswp__caption,
.pswp__preloader {
  display: none !important;
}

/* Barra inferior tipo pill blanca */
.pswp__bottom-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  color: #fff;
  padding: 4px 18px;
  display: flex;
  font-size: 18px;
  font-weight: 500;
  width: 100%;
  gap: 32px;
  align-items: baseline;
  justify-content: center;
}

.pswp__bottom-text {
  white-space: nowrap;
}

/* Opcional: espacio arriba para que no choque con la top-bar */
.pswp__scroll-wrap {
  padding-top: 32px;
}

.pswp__button--arrow--right:before {
  font-family: 'Font Awesome 5 Pro' !important;
  content: "\f054" !important;
  border-radius: 100%;
  font-size: 24px;
  color: var(--primary800);
  position: static !important;
  background-image: none !important;
  background-color: transparent !important;
}

.pswp__button--arrow--right {
  background: #ffffff !important;
  opacity: 1 !important;
  width: 32px !important;
  height: 32px !important;
  position: static !important;
  border-radius: 50%;
}

.pswp__button--arrow--left:before {
  font-family: 'Font Awesome 5 Pro' !important;
  content: "\f053" !important;
  border-radius: 100%;
  font-size: 24px;
  color: var(--primary800);
  position: static !important;
  background-image: none !important;
  background-color: transparent !important;
}

.pswp__button--arrow--left {
  background: #ffffff !important;
  opacity: 1 !important;
  width: 32px !important;
  height: 32px !important;
  position: static !important;
  border-radius: 50%;
}

/* chip de talla */
.size-pill {
  min-width: 32px;
  padding: 2px 10px;
  border-radius: 8px;
  border: 1px solid var(--neutrals200);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  box-sizing: border-box;
  background: #fff;
  transition: border-color .15s ease,
    font-weight .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    transform .15s ease;
}

/* seleccionada */
.productVariant .mdl-radio.is-checked .size-pill {
  border-color: #7E2BCB;
  background: #f8f0ff;
  color: var(--primary800);
  font-weight: bold;
  transform: translateY(-1px);
}

/* talla no disponible */
.size-option.unavailable .size-pill {
  opacity: .4;
  cursor: not-allowed;
  position: relative;
}

.minusbtn[disabled][disabled] {
  background-color: #fff !important;
}

.chip-puntos-compra.small {
  display: flex;
  padding: 4px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: auto;
}

.chip-puntos-compra.small .bodyMediumBold {
  text-align: center;
  font-family: "Noto Sans";
  font-size: 14px;
  font-style: normal;
  line-height: 16px;
}

.chip-puntos-compra.small .container-icon-punts {
  width: 20px;
  height: 20px;
}

.chip-puntos-compra.small i {
  font-size: 12px;
}

/* Clases para perfil de ZE */
.address-list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-container .address-list-container .address-list .card.card-address {
  display: flex;
}

.profile-container .card {
  margin: 0 !important;
}

.modal-change-profile-image.mdl-modal .actions {
  flex-direction: row;
  justify-content: center;
}

.mdl-icon-verified {
  color: var(--info600);
}

@media (min-width: 1024px) {
  .modal-co-empresario.mdl-modal {
    min-width: 672px;
  }
}

.co-empresario-empty,
.co-empresario-pending {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
  align-self: stretch;
  padding: 12px;
  background-color: #fff;
  border-radius: 8px;
}

.co-empresario-empty .co-empresario-info-empty,
.co-empresario-pending .co-empresario-info-pending {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  align-self: stretch;
}

.co-empresario-empty .co-empresario-info-empty div,
.co-empresario-pending .co-empresario-info-pending div {
  display: flex;
  flex-direction: column;
}

.co-empresario-empty div:last-child,
.co-empresario-pending div:last-child {
  align-self: center;
}

.co-empresario-info-pending button {
  align-self: end;
  width: fit-content;
}

.modal-baja-co-empresario.mdl-modal {
  width: 436px !important;
}

.modal-filter-tracking~.select2-container {
  z-index: 10000000;
}

#btn-change-location-information {
  padding: 0px;
  text-decoration: underline;
}

#btn-change-location-information:hover {
  background-color: var(--primary100) !important;
}




#addressInfo-field .mdl-textfield__label {
  top: 13px !important;
  width: fit-content;
  height: 20px;
  background-color: white;
}

#addressInfo-field.is-dirty .mdl-textfield__label {
  top: -10px !important;
}



.container-co-emp-list .card {
  display: flex;
  margin-bottom: 16px !important;
}

.br-0 {
  border-radius: 0;
}

.br-8 {
  border-radius: 8px;
}

.otp-wrapper {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 20px 0;
}

.otp-digit {
  width: 46px;
  height: 52px;
  border: 2px solid var(--neutrals400);
  border-radius: 8px;
  outline: none;
  color: var(--neutrals1000);
  text-align: center;
  font-family: "Noto Sans", Sans-Serif, serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
}

.otp-digit:focus {
  border-color: var(--primary700);
}

.otp-digit.error {
  border-color: var(--error800);
}

.req-validation .mdl-textfield__error.is-visible {
  visibility: visible !important;
  display: block;
}

.req-validation .mdl-textfield__error {
  padding: 0 40px;
  margin-top: 0;
  bottom: 15px;
  text-align: left;
  left: 0;
  position: relative;
  display: none;
}

@media (max-width: 578px) {
  .req-validation .mdl-textfield__error {
    padding: 0 16px;
  }
}

#req-new-code {
  background: #fff;
  border: 0;
  padding: 0;
}

#req-new-code[disabled][disabled] {
  color: var(--neutrals500) !important;
}

.level-card .cards-accordion-pz {
  border: none;
}

.cards-accordion-pz .accordion-content-container {
  padding: 0px;
}

.card.level-card .mdl-accordion__button {
  padding: 8px 0px;
  pointer-events: none;
}

.card.level-card .mdl-accordion__button i {
  display: none;
}

img.secure-checkout {
  max-width: 290px;
  margin: auto;
}

.dont-have-address .edit-address {
  display: flex !important;
  width: 100%;
  flex: 1;
  align-items: stretch;
  justify-content: space-between;
  color: var(--neutral5);
}

.dont-have-address .edit-address:hover {
  background: none;
  color: var(--primary700);
}

.dont-have-address.mdl-card.small.outline:hover {
  border: 1px solid var(--primary400);
}

#resumen-mini .resumen-thumbnails {
  max-width: 320px;
}

#resumen-mini .resumen-thumbnails figure {
  max-width: 54px !important;
  max-height: 52px;
  border-radius: 6px;
  min-width: auto;
}

.mdl-accordion--opened #resumen-mini {
  overflow: hidden;
  height: 0px;
  opacity: 0;
  transition: var(--transition);
}

.producto-unico.cart-product--name {
  text-align: left;
  flex: 1;
}

#listado-productos ul.cart-product_list li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--neutrals300);
  padding: 1rem;
  gap: 8px;
}

#listado-productos ul.cart-product_list figure.cart-product_img {
  width: 54px;
}

#add-products-modal label.mdl-textfield__label.labelSearch {
  font-size: 1rem !important;
}

#add-products-modal .searchContainer {
  display: flex !important;
  width: 100%;
  margin: 0;
  font-size: 1rem;
}

#add-products-modal label.mdl-textfield__label.labelSearch {
  font-size: 1rem !important;
}

#promos-opcionales .owl-nav {
  display: none;
}

#listado-productos .h5.cart-product--pts {
  color: var(--primary);
}

.promo-container.has-counter.active {
  display: flex;
  justify-content: center;
}

.has-counter .mdl-radio {
  width: 100%;
}

.promo-container.has-counter {
  justify-content: center;
  display: flex;
}

#step4-buttons .mdl-accordion.mdl-accordion--opened {
  border: none;
}

.cart-product--qty {
  min-width: 30px;
  display: inline-block;
}

/* Modales ZE zona privada */
.modal-qr-inputs-radio {
  display: flex;
  justify-content: space-around;
}

.modal-qr-inputs-select {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-qr-loader .spinner {
  position: relative;
  animation: 3s rotate-spinner infinite linear;
}

.spinner.md {
  height: 40px;
  width: 40px;
}

.spinner.md:before {
  height: 32px;
  width: 32px;
}

@keyframes rotate-spinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.icon-empty-state.warning {
  background-color: var(--warning100);
}

.icon-empty-state.warning i {
  color: var(--warning700);
}

/*Clases extra para modal nxt level*/
.modal-nxt-lvl .modal-obj-list,
.modal-obj-lvl .modal-obj-list {
  list-style: none;
  margin: 16px 0;
  font-size: 14px;
  color: var(--neutrals900);
}

.modal-nxt-lvl .modal-obj-label,
.modal-obj-lvl .modal-obj-label {
  color: var(--neutrals900);
}

.modal-nxt-lvl .modal-obj-item-group,
.modal-obj-lvl .modal-obj-item-group {
  flex-wrap: wrap;
}

.modal-nxt-lvl .modal-obj-item-group .modal-obj-sublist,
.modal-obj-lvl .modal-obj-item-group .modal-obj-sublist {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 16px;
  flex: 0 0 100%;
}

.modal-nxt-lvl .modal-obj-subitem,
.modal-obj-lvl .modal-obj-subitem {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--neutrals700);
  margin-bottom: 2px;
}

.modal-obj-lvl.mdl-modal {
  width: 570px;
}

.modal-qr .select2-container {
  width: 100% !important;
}

.name-menu-private-zone p.body-small-regular {
  color: #fff;
}

.search-results-zona-privada .search-results-container {
  position: static;
  border-radius: 0;
  box-shadow: none;
}

@media(max-width: 768px) {
  .search-results-zona-privada {
    width: 100%;
    height: 100%;
    left: 0;
  }

  .search-results-zona-privada .search-history-container,
  .search-results-zona-privada .search-results-container {
    height: fit-content;
  }

  .modal-cheque-footer {
    flex-direction: column-reverse;
  }

  .modal-cheque-footer .mdl-button,
  .modal-qr-footer .mdl-button {
    width: 100% !important;
  }
}

.modal-reembolso-generacion,
.modal-reembolso-generacion-dp {
  min-width: 350px !important;
}

.modal-reembolso-generacion ul,
.modal-reembolso-generacion-dp ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-reembolso-generacion ul li,
.modal-reembolso-generacion-dp ul li {
  display: flex;
  justify-content: space-between;
}

.modal-cheque-footer {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.modal-qr.modal-account,
.modal-qr.modal-reports,
.modal-qr.modal-calculator {
  width: 350px;
}

.modal-qr.modal-account .tab-container {
  margin: 0;
}

.modal-qr.modal-account .tab-container .tab-content {
  padding: 16 0 0 0;
}

.modal-qr.modal-account .tab-container .tab-button.active .body-medium-medium {
  border-bottom: 0;
}

/* SHARE SOCIAL LINK */
.modal-share-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
}

.modal-share-link .share--options {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

.modal-share-link .share--options .share--opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  flex: 0;
  min-width: 67px;
}

.btn-share--opt {
  width: 48px;
  height: 48px;
  border-radius: 99%;
  color: white;
  border: none;
  outline: none;
}

.share--opt:has(.btn-share--opt:hover) {
  background: var(--primary200);
}

.btn-share--opt i:not(.fa-link):before {
  font-size: 30px;
}

.btn-share--opt i.fa-link:before {
  font-size: 25px;
}

.btn-share--opt.link {
  background: var(--primary600);
}

.btn-share--opt.link.is-copied {
  opacity: .6;
}

.btn-share--opt.whatsapp {
  background: #65D072;
}

.btn-share--opt.facebook {
  background: #425893;
}

.btn-share--opt.x {
  background: #000000;
}

.btn-share--opt.email {
  background: #888888;
}

/* .private-zone-content .mdl-modal .mdl-button:not(.close-modal) {
  padding: 10px 20px;
  width: fit-content;
  justify-self: center;
  height: 40px;
} */

.private-zone-content .card.denuncia-container {
  justify-items: center;
  margin: 0;
}

.private-zone-content .character-counter {
  margin-top: 4px;
  position: absolute;
}

.private-zone-content .character-counter span {
  font-size: 12px;
  color: #4C444C;
}

@media (max-width: 576px) {
  .full-width-sm {
    width: 100% !important;
  }
}

#payment-method label.mdl-checkbox .mdl-button.link {
  padding: 0;
  word-break: break-word;
  word-wrap: normal;
  display: inline;
  vertical-align: text-bottom;
}

.applied-codes span.mdl-chip {
  margin: 2px;
}

#login-section .mdl-accordion.mdl-accordion--opened .mdl-accordion__content {
  height: auto;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

#login-section .mdl-accordion .mdl-accordion__content {
  height: 0;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* SIDEBAR MENU Y HEADER MENU PERFIL DE USUARIOS */
li:has(.sidebar-logo-container-mobile.profile) {
  margin: auto;
}

.sidebar-private-zone-menu.profile {
  background: #F9F1FF;
  top: 57px;
  padding: 32px 16px;
  transition: .4s ease;
}

.sidebar-private-zone-menu.profile .menu-element>a {
  color: var(--neutrals900);
  border-radius: 8px !important;
  padding: 8px;
}

.sidebar-private-zone-menu.profile .menu-element>a:hover {
  background: var(--primary100) !important;
  color: var(--primary700);
}

.sidebar-private-zone-menu.profile .menu-element .btn-submenu i:before {
  font-size: 18px;
}

.sidebar-private-zone-menu.profile .menu-element .btn-submenu i {
  width: 24px;
  text-align: center;
}

.sidebar-private-zone-menu.profile .menu-element .btn-submenu.selected {
  font-weight: 600;
  background: var(--primary100);
  border-right: none;
  color: var(--primary800);
  height: 48px;
}

.sidebar-private-zone-menu.profile ul.main-menu-private-zone {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.menu-element-zona-empresarios {
  background: var(--primary900);
  margin: 8px -16px;
  padding: 8px 16px;
}

.menu-element-zona-empresarios .menu-element .btn-submenu.selected {
  background: var(--primary900) !important;
  color: #fff !important;
}

.menu-element-zona-empresarios .menu-element .btn-submenu i:last-child {
  margin-left: auto;
}

.menu-element-zona-empresarios .menu-element .btn-submenu.selected {
  padding: 6px;
}

/* DESKTOP: Convertir en dropdown flotante */
@media (min-width: 921px) {

  /* Wrapper para posicionar el dropdown */
  .sidebar-private-zone-menu .d-flex.justify-content-center {
    position: relative;
  }

  /* El menú se convierte en dropdown */
  .menu-element-zona-empresarios {
    position: absolute;
    top: 0;
    left: 57%;
    width: 320px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 999999;
    max-height: 70vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }

  /* Cuando está expandido (sin .hidden o con .expanded) */
  .menu-element-zona-empresarios:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    max-height: 70vh;
  }
}

/* Si NO existe el botón, el tercer li tiene margin-right: auto */
.site-header.private-zone-header.profile:not(:has(#zona-empresarios-btn)) .mdl-ul>li:nth-child(2) {
  margin: 0 auto 0 0;
}

@media (max-width: 1299px) {
  .sidebar-private-zone-menu.profile {
    top: 60px;
    height: calc(100vh - 60px);
  }
}

/* PAGE ZONA PRIVADA : SUSCRIPCIONES */
/* Card container: mantiene la fila superior */
.mdl-card-suscripcion {
  border-radius: 8px;
  background: white;
  display: flex !important;
  padding: 16px 24px !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0 !important;
  align-self: stretch;
}

.mdl-card-suscripcion .payment-state-text {
  color: var(--neutrals900);
  font-family: "Noto Sans", serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}

/* Row superior: layout en fila */
.mdl-card-suscripcion .main-row {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
}

/* Sectiones internas */
.mdl-card-suscripcion .section-product {
  display: flex;
  gap: 24px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.mdl-card-suscripcion .section-actions {
  justify-content: center;
  flex: 1;
  display: flex;
  align-items: end;
  flex-direction: column;
  gap: 16px;
}

.mdl-card-suscripcion .media-row {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}

/* Imagen */
.mdl-card-suscripcion .card-image {
  width: 104px;
  height: 104px;
  background: var(--neutrals100);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.mdl-card-suscripcion .card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Info del producto */
.mdl-card-suscripcion .product-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
  min-width: 204px;
}

/* Botón toggle */
.mdl-card-suscripcion .toggle-details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 0;
}

.mdl-card-suscripcion .toggle-details .fa-chevron-down {
  transition: transform 0.3s ease;
}

.mdl-card-suscripcion .detail-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s cubic-bezier(.2, .8, .2, 1), padding 0.25s;
  padding: 0 0;
  display: block;
}


.mdl-card-suscripcion .detail-content.open {
  max-height: 1200px;
  padding: 16px 0;
  width: 100%;
}

/* Visuales dentro del detalle */
.mdl-card-suscripcion .detail-content hr {
  border: none;
  border-top: 1px solid var(--neutrals200);
  margin: 8px 0 12px;
}

/* Historial de pagos */
.mdl-card-suscripcion .payment-history {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 8px;
}

.mdl-card-suscripcion .payment-history>div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

/* Lista de productos */
.mdl-card-suscripcion .product-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 12px;
}

.mdl-card-suscripcion .product-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.mdl-card-suscripcion .product-item .thumb {
  width: 48px;
  height: 48px;
  background: var(--neutrals100);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mdl-card-suscripcion .product-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Responsive: en pantallas pequeñas apila la fila superior */
@media (max-width: 380px) {
  .modal-cancelacion-suscripcion {
    height: calc(100dvh - 5%);
    overflow: auto;
  }
}

@media (max-width: 767px) {
  .mdl-card-suscripcion .toggle-details {
    display: none;
  }

  .mdl-card-suscripcion {
    gap: 16px !important;
    padding: 16px !important;
  }

  .mdl-card-suscripcion .main-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px !important;
  }

  .mdl-card-suscripcion .section-actions {
    width: 100%;
    align-items: normal;
    margin-top: 16px;
  }

  .mdl-card-suscripcion .product-list {
    grid-template-columns: 1fr;
  }

  .mdl-card-suscripcion .price-info-sub {
    flex-direction: row !important;
    justify-content: space-between
  }

  .mdl-card-suscripcion .section-product {
    flex-direction: column !important;
  }

  .mdl-card-suscripcion .section-details {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .mdl-card-suscripcion .payment-history {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .mdl-card-suscripcion .payment-block {
    width: 100% !important;
  }

  .mdl-card-suscripcion .payment-info {
    flex-direction: row !important;
    align-items: center;
    padding-bottom: 16px;
  }

  .mdl-card-icon.small {
    justify-content: flex-start;
  }

  .mdl-card-suscripcion .payment-state-text {
    font-weight: 500;
  }

  .suscripcion-search-container .search-header-container {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 576px) {
  .suscripcion-search-container .search-header-container {
    margin-top: 16px;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .mdl-card-suscripcion .section-actions {
    margin: 16px auto auto;
    flex-direction: row;
  }
}


.mdl-card-suscripcion .tag-suscripcion {
  display: flex;
  padding: 4px 8px;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  background: #FD4F85;
  color: #fff;
  width: fit-content;
  font-size: 14px;
}

.mdl-card-suscripcion .price-info-sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mdl-card-suscripcion .price-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mdl-card-suscripcion .section-details {
  display: flex;
  gap: 56px;
  flex: 1;
  justify-content: space-between;
}

.mdl-card-suscripcion .payment-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  width: 197px;
}

.mdl-card-suscripcion .toast .toast-information {
  width: 100%;
  justify-content: center;
}

.mdl-card-suscripcion .toast {
  width: auto;
  margin: 0;
  padding: 4px 8px;
}

.mdl-card-suscripcion .mdl-button.primary,
.mdl-card-suscripcion .mdl-button.secondary {
  padding: 8px 24px !important;
  height: 40px;
}

.mdl-card-suscripcion .payment-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suscripcion-search-container .search-header-container {
  min-width: 200px;
  max-width: 440px;
}

.suscripcion-search-container {
  display: flex;
}

.suscripcion-search-container .mdl-dropdown-btn {
  background-color: transparent !important;
}

.suscripcion-search-container .mdl-dropdown .mdl-dropdown-menu {
  right: 0 !important;
}

.tabs-suscripciones .tabs {
  border-bottom: 0;
  width: max-content;
  gap: 4px;
}

.tabs-suscripciones .tab-container {
  width: 100%;
  overflow: auto;
}


.tab-button.tab-pill {
  border-radius: 99px !important;
  background: #fff !important;
  border: 1px solid var(--neutrals200) !important;
  padding: 8px 24px !important;
  height: 40px !important;
  color: var(--neutrals900);
  min-width: fit-content;
}

.tab-button.tab-pill.active {
  background: var(--primary100) !important;
  color: var(--primary900);
  font-weight: 700;
}

.accordion-payment-history .mdl-accordion__button,
.accordion-payment-products .mdl-accordion__button {
  width: 100%;
  justify-content: space-between !important;
  padding: 0;
  display: flex;
  align-items: center;
}

.accordion-payment-history,
.accordion-payment-products {
  width: 100%;
}

.mdl-card-suscripcion .mdl-accordion__content-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-card-suscripcion .mdl-accordion__content-wrapper.open {
  max-height: fit-content;
}

.mdl-card-suscripcion .mdl-accordion__icon {
  transition: transform 0.3s ease;
}

.modal-inputs-radio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-renovacion-suscripcion .content,
.modal-cancelacion-suscripcion .content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-renovacion-suscripcion .content .toast,
.modal-cancelacion-suscripcion .content .toast {
  justify-content: flex-start;
  margin: 0 !important;
}

.mdl-card-icon.small {
  min-height: auto;
  padding: 8px 16px;
  gap: 8px;
}

.card-icon.small {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.card-icon.small i {
  transform: scale(1);
}

.cards-container-salud.mdl-card-opciones-ayuda {
  gap: 12px;
}

.section-help .card {
  width: fit-content;
  justify-self: center;
}

.col-md-3:has(#numero-field) {
  padding: 0px;
  padding-right: 13px;
}

#cep-field {
  padding: 20px 0px 0px 0px;
}



#cep-field.is-dirty .mdl-textfield__label span span,
#cep-field.is-focused .mdl-textfield__label span span,
#address-field.is-dirty .mdl-textfield__label span span,
#address-field.is-focused .mdl-textfield__label span span,
#addressInfo-field.is-dirty .mdl-textfield__label span span,
#addressInfo-field.is-focused .mdl-textfield__label span span {
  display: none;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  height: 100%;
}

.tab-content .col-8:has(.info-pz-modal) {
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* suscripciones  */
.tabs-kits-container .tab-button.active .body-medium-medium {
  border-bottom: 0px !important;
}

.tabs-kits-container .subscriptions-tab .modal-info-kits {
  padding: 0px 6px;
}

.tabs-kits-container .subscriptions-tab .card-image img {
  width: 145px
}

.subscriptions-tab .register-kits .outline .mdl-radio__label {
  top: 150px;
}

.subscriptions-tab .obj-span {
  position: absolute;
  z-index: 9;
  top: 160px;
  right: 10px;
}

.pink-span {
  background-color: #FD4F85;
  color: white;
}



#confirm-datos .modal-content.custom-row {
  min-height: 84vh;
}


.tab-content:has(#privacy-terms) .mdl-textfield {
  overflow-x: clip;
  padding: 0px !important;
}

.tab-content .full-width .select2-container--default .select2-selection--single {
  height: fit-content !important;
  display: flex;
  gap: 0px;
  align-items: center;
  flex-wrap: nowrap;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 6px !important;
}

#eu-document {
  min-height: fit-content;
  margin: 0px;
  margin-bottom: 32px;
  ;
}

.oxxopay-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

img.oxxopay-logo {
  width: auto;
  height: 40px;
}

.oxxo-barcode {
  text-align: center;
  margin: auto;
  display: flex;
  padding: 8px 16px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--Color-Neutral-400, #D3D3D3);
  width: 100%;
}

.oxxopay-ticket-cont {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  flex: 1;
  position: relative;
  margin: auto;
  max-width: 300px;
}

.mdl-chip.suscripcion {
  border-radius: 8px;
  background: #FD4F85;
  color: #fff;
  font-size: 14px;
}

.profile-container .tabs-suscripciones .tab-content.active {
  padding-top: 10px;
}

#eu-document .card-content {
  padding: 15px;
}

#eu-document .card-content .col-12 {
  padding: 0px;
}

.kit-cont.active {
  display: block;
}




.tabs-kits-container:has(.tab-kits-content) .tabs {
  margin-top: 20px;
  position: static;
}




/* Estilos para el contenedor de términos cuando password2 es inválido */
.col-12:has(.mdl-textfield.is-invalid #password2)+.col-12:has(#privacy-terms) {
  padding-top: 15px;
}


.country-code-dropdown .spanContainerSelect {
  font-size: 13px;
}

div:has(> .is-invalid) {
  padding-bottom: 25px;
}

.kit-cont:not(:is(.register-subs-kit > .kit-cont)) .mdl-card-content {
  min-height: 13rem;
  max-height: 15rem;
}

.kit-cont:not(:is(.register-subs-kit > .kit-cont)) .button-container {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 16px;
  right: 0px;
  background-color: white;
  z-index: 99;
  width: 100%;
}



.col-md-4 #country+.select2-container--default .select2-selection--single .select2-selection__placeholder {
  font-size: 15px;
  padding-left: 10px;
  top: 4px;
  width: 8rem;
}

#promos-obl .mdl-button.link span {
  text-decoration-line: none;
}

#shipping-companies .mdl-radio__label {
  width: 100%;
}

#shipping-companies .mdl-radio .mdl-radio__label div {
  width: 100%;
  width: 100%;
  flex: 1;
}

.shipping-company-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

#shipping-companies .d-flex {
  align-items: center;
}

.mdl-modal.modal {
  height: fit-content;
}

.fa-stack.small.coin {
  font-size: 0.8rem;
  box-shadow: 0 0 0px 2px white;
  border-radius: 40px;
  width: 25px;
}

#fechas-suscripciones ul {
  list-style-type: disc;
  display: block;
  padding: 0 1rem;
  align-items: flex-start;
}



.subscription-kit-link {
  display: grid;
  gap: 10px;
  margin-left: 16px;
}

.card-select-country:has(.subscription-kit-link) {
  padding: 16px;
}

.card-select-country:has(.subscription-kit-link) .selected-kit {
  padding: 16px;
}

#login-section .offset-0 .tab-content.active {
  padding-top: 0px;
}

#kit-1000-container #login-section .offset-0 .tab-content.active,
#step1 {
  padding-top: 0px;
  padding-bottom: 5rem !important;
}

/* ESTILOS PARA FLUJO DE REGISTRO */

.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-lg-12>*,
.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-md-12>*,
.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-12>*,
.register-page #step3 .custom-row.flex-center.pb-1>.col-12>* {
  padding: 0px;
}

.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-lg-4 {
  padding: 0px 16px 32px 0px;
}


.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-lg-8 {
  padding: 0px 0px 32px 16px;
}

.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-12:has(#password) .mdl-textfield {
  padding: 0px 0px 16px 0px !important;
  margin-top: 16px;
}

#verif-method .active {
  margin-top: 20px;
}

#verif-method .mdl-textfield .mdl-textfield__label {
  top: 30px;
}

#verif-method .mdl-textfield .mdl-textfield__label {
  padding: 0px;
}

.mdl-textfield.is-invalid {
  margin: 16px 0px 16px 0px !important;
}

/*
.tab-content:has(#privacy-terms) .mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label,

.tab-content:has(#privacy-terms) .mdl-textfield--floating-label.outline.is-focused .mdl-textfield__label{
    top: -11px;
 }
 
.tab-content:has(#privacy-terms) .mdl-textfield--icon{
    top: 16%;
    }
  */
.tab-content:has(#privacy-terms) p.bold.mt-1 {
  margin-bottom: 16px;
}

.tab-content:has(#privacy-terms) .col-12 .mdl-textfield.is-dirty {
  margin-top: 16px;
}

.tab-content:has(#privacy-terms) .mdl-textfield:has(#password2) {
  margin-top: 32px;
}

.custom-row.flex-center.pb-1 {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-left: 4px;
}

.register-page .custom-row.flex-center.pb-1:has(#phone),
.register-page .custom-row.flex-center.pb-1:has(.country-code),
.register-page .custom-row.flex-center.pb-1:has(.info-input-text) {
  align-items: flex-start;
}

.register-page .custom-row.flex-center.pb-1>.col-md-4.order-0>* {
  padding: 0px !important;
}

.register-page .custom-row.flex-center.pb-1>.col-md-8.order-0>*,
.col-md-7>* {
  padding: 0px !important;
}

/* --- PRIMERAS COLUMNAS (Izquierda) --- */
.register-page .custom-row.flex-center.pb-1>.col-sm-6:nth-child(odd of .col-sm-6),
.register-page .custom-row.flex-center.pb-1>.col-md-6:nth-child(odd of .col-md-6),
.register-page .custom-row.flex-center.pb-1>.col-lg-6:nth-child(odd of .col-lg-6),
.register-page .custom-row.flex-center.pb-1>.col-lg-6:has(#lastname1-field),
.register-page #step3 .custom-row.flex-center.pb-1>.col-md-8,
.register-page #step3 .custom-row.flex-center.pb-1 .col-md-4.order-0,
.register-page #step3 .custom-row.flex-center.pb-1 .col-md-5,
.register-page #step3 .custom-row.flex-center.pb-1>.col-md-4.odd,
#step2 .offset-lg-2.offset-xl-3 .custom-row.flex-center.pb-1 .custom-row .col-md-6:nth-child(odd of .col-md-6) {
  padding-right: 8px;
  padding-left: 0;
  padding-bottom: 32px;
}

/* --- SEGUNDAS COLUMNAS (Derecha) --- */
.register-page .custom-row.flex-center.pb-1>.col-sm-6:nth-child(even of .col-sm-6),
.register-page .custom-row.flex-center.pb-1>.col-md-6:nth-child(even of .col-md-6),
.register-page .custom-row.flex-center.pb-1>.col-lg-6:nth-child(even of .col-lg-6),
.register-page .custom-row.flex-center.pb-1>.col-lg-6:has(#lastname2-field),
.register-page #step3 .custom-row.flex-center.pb-1>.col-md-4,
.register-page #step3 .custom-row.flex-center.pb-1>.col-md-8.even,
.register-page #step3 .custom-row.flex-center.pb-1 .col-md-8.order-0,
.register-page #step3 .custom-row.flex-center.pb-1 .col-md-7,
#step2 .offset-lg-2.offset-xl-3 .custom-row.flex-center.pb-1 .custom-row .col-md-6:nth-child(even of .col-md-6) {
  padding-left: 8px;
  padding-right: 0;
  padding-bottom: 32px;
}


.register-page .custom-row.flex-center.pb-1>.col-sm-6>*,
.register-page .custom-row.flex-center.pb-1>.col-md-6>*,
.register-page .custom-row.flex-center.pb-1>.col-lg-6>*,
#step3 .col-md-12>* {
  padding: 0px !important;
}



.register-page #step1 .custom-row.flex-center.pb-1>.col-12,
.register-page #step1 .custom-row.flex-center.pb-1>.col-lg-12,
.register-page #step1 .custom-row.flex-center.pb-1>.col-md-12,
.register-page #step1 .col-md-12,
.register-page #step1 .col-12,
.register-page #step2-1 .custom-row.flex-center.pb-1>.col-12,
.register-page #step2-1 .custom-row.flex-center.pb-1>.col-lg-12,
.register-page #step3 .custom-row.flex-center.pb-1>.col-12,
.register-page #step3 .custom-row.flex-center.pb-1>.col-md-12,
.register-page #step1-1 .custom-row.flex-center.pb-1>.col-lg-12,
.register-page #step1-1 .custom-row.flex-center.pb-1>.col-12,
.register-page #step2 .custom-row.flex-center.pb-1>.col-12,
.register-page #step2 .custom-row.flex-center.pb-1>.col-md-12,
.register-page #step2 .col-md-12,
.register-page #step2 .col-12,
.register-page #step3 .custom-row.flex-center.pb-1 .col-12 .col-12 {
  padding: 0px;
  padding-bottom: 32px !important;
  margin-top: 0px;

}

.register-page #step3 .custom-row.flex-center.pb-1>.col-12:has(.nationality-toast):has(.hidden),
.register-page #step3 .custom-row.flex-center.pb-1>.col-12:has(.nationality-toast):has(.hidden),
.register-page #step3 .custom-row.flex-center.pb-1>.col-12:has(.info-zipcode-container):has(.hidden),
.register-page #step3 .custom-row.flex-center.pb-1>.col-md-4.order-0>*,
.register-page #step3 .custom-row.flex-center.pb-1>.col-md-8.order-0>*,
.register-page #step3 .custom-row.flex-center.pb-1>.col-md-8:has(#referencia-field)>*,
.register-page #step3 .custom-row.flex-center.pb-1>.col-md-4:has(#zip-code-field)>*,
.register-page #step3 .custom-row.flex-center.pb-1>.col-md-7>*,
.register-page #step3 .custom-row.flex-center.pb-1 .col-md-4 #col-field,
.register-page #step3 .custom-row.flex-center.pb-1 .col-md-4 #cp-field,
.register-page #step3 .custom-row.flex-center.pb-1 .col-md-8 #apartment-field {
  padding: 0px !important;
}

.tab-content:has(#privacy-terms) .mdl-textfield.is-invalid:after {
  top: 15px;
  right: 12px;
}

.register-page #step3 .custom-row.flex-center.pb-1>.col-12 .nationality-toast {
  margin: 0px;
}

.custom-row.flex-center.pb-1 .col-12>.mdl-card.small:has(#eo-code-field) {
  overflow: visible;
}

.register-page #step1 .mdl-textfield.is-verified:after {
  top: 14px;
}

#step1 #contract-code-field {
  padding: 16px 0px;
}

#step1 .offset-sm-2.col-sm-7 #contract-code-field {
  padding: 0px;

}

.register-page #step3 #addressInfo-field .mdl-textfield__label {
  max-width: 97%;
}

.register-page #verif-method .col-12:has(> .mdl-radio.is-checked) {
  padding-bottom: 16px !important;
}

.register-page .col-md-4 {
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 16px;
}

.register-page .col-md-4:has(#estado) {
  padding-left: 8px;
  padding-right: 8px;
}

.register-page .col-md-8 {
  padding-right: 0px;
  padding-bottom: 16px;
}

.register-page .custom-row.flex-center.pb-1 .custom-row:has(#apartment-field) {
  margin-left: 0px;
  margin-right: 0px;
}

.register-page .tab-content #b-date.mdl-textfield.is-invalid:after {
  right: 25px !important;
}

/*  Esto se rompe en SAFARI
.register-page .custom-row.flex-center.pb-1 .col-lg-4 {
  height: -webkit-fill-available;
} */

@supports (-webkit-touch-callout: none) {

  /* Solo Safari */
  .register-page .custom-row.flex-center.pb-1 .col-lg-4 {
    height: fit-content;
  }
}

@media (max-width: 760px) {

  .register-page.offset-lg-2.offset-xl-3.col-lg-7.col-xl-6 {
    padding: 0px;
  }

  .register-page .col-md-8 {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 16px;
  }

  .toast-info-address-c .col-11 .col-12,
  .toast-info-address-c .col-11 .col-11 {
    padding: 8px !important;
  }

  .register-page .custom-row.flex-center.pb-1 .errorMessage-container .custom-row .col-12 {
    padding: 8px 16px 0px 6px !important;
  }

  .register-page #step2 .offset-lg-2.offset-xl-3.col-lg-7.col-xl-6,
  .register-page #step3 .offset-lg-2.offset-xl-3.col-lg-7.col-xl-6,
  .register-page #step4 .offset-lg-2.offset-xl-3.col-lg-7.col-xl-6 {
    padding: 4px;
  }

  .register-page #step2 .offset-lg-2.offset-xl-3.col-lg-7.col-xl-6,
  .register-page #step3 .offset-lg-2.offset-xl-3.col-lg-7.col-xl-6,
  .register-page #step4 .offset-lg-2.offset-xl-3.col-lg-7.col-xl-6 {
    padding: 4px;
  }

  #step3 .col-12:has(.errorMessage-container):not(:has(.hidden)) {
    padding-bottom: 12px;
  }

  #step2-1 .card-select-country b {
    max-width: unset;
  }

  #step2 .offset-lg-2.offset-xl-3 .custom-row.flex-center.pb-1 .custom-row {
    padding: 12px;
  }
}

.register-page .contract-modal-option p:has(.checks-terms-contract) {
  display: flex;
}

.register-page .contract-modal-option p:has(.checks-terms-contract) {
  display: flex;
}

.register-page #step2-2 #verif-method .mdl-textfield.outline,
.register-page #step1-2 #verif-method .mdl-textfield.outline {
  padding: 0px;
}

.register-page #step2-2 #verif-method .mdl-textfield.outline,
.register-page #step1-2 #verif-method .mdl-textfield.outline {
  padding: 0px;
}

.register-page #step2-2 #verif-method .mdl-textfield.is-invalid .mdl-textfield__error,
.register-page #step1-2 #verif-method .mdl-textfield.is-invalid .mdl-textfield__error {
  bottom: -20px;
}

.register-page #step2-2 #verif-method .mdl-textfield.is-invalid .mdl-textfield__error,
.register-page #step1-2 #verif-method .mdl-textfield.is-invalid .mdl-textfield__error {
  bottom: -20px;
}

.mdl-message-close {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 24px !important;
  height: 24px !important;
  font-size: 12px;
}

.mdl-message-close {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 24px !important;
  height: 24px !important;
  font-size: 12px;
}

.errorMessage-container {
  position: relative;
  display: block;
}


.resumen-confirmacion .promo-img img {
  border-radius: 5px;
}


.resumen-confirmacion li.cart-product--li {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px dashed var(--neutrals300);
  padding: 4px 8px !important;
}

.resumen-confirmacion li.cart-product--li .pl-1 {
  text-align: right;
}

p.cart-product--pts {
  background-color: var(--secondary100);
  color: var(--secondary800);
  padding: 0px 8px;
  border-radius: 6px;
}

.error-register-container .error-msg-link {
  display: flex;
}

#login-section #invoice {
  display: flex;
  align-items: flex-end;
}

#login-section #invoice a.link.modal-invoice-btn {
  position: relative;
  padding: 0;
  overflow: visible;
}

.fa-stack.outline .fa-circle:before {
  border: 2px solid var(--secondary1);
  border-radius: 30px;
}


.cart-puntos-info,
.cart-discount-login,
.cart-changeZip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 30px 1rem 1rem;
  width: 100%;
}

.cart-puntos-info span.fa-stack.outline,
.cart-discount-login span.fa-stack.outline {
  min-width: 36px;
  font-size: .8rem;
}

.cart-discount-login.mdl-message-box a {
  line-height: normal;
  vertical-align: bottom;
}

a.mdl-accordion__button.mdl-navigation__link.cart-promos-obl {
  justify-content: space-between;
}

.mdl-chip.productPoints {
  width: max-content;
}

.out-stock-products img.cart-item__img {
  opacity: .5;
}

.empty-cart-icon .st0 {
  opacity: 0.4;
  fill: #66308C;
  enable-background: new;
}

.empty-cart-icon .st1 {
  fill: #66308C;
}

.mdl-card.outline.cart-empty {
  padding: 6rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}


.cart-empty .mdl-button.primary {
  max-width: 300px;
}


.contract-modal-option p {
  display: flex;
  max-width: 90%;
  align-items: center;
  cursor: pointer;
}



.register-page #step3 .custom-row.flex-center.pb-1>.col-12:has(> .h6.bold:only-child) {
  padding-bottom: 12px !important;
}

.register-page #step3 .custom-row.flex-center.pb-1>.col-12:has(> .h6.bold:only-child) {
  padding-bottom: 12px !important;
}

.register-page .tab-content:has(#privacy-terms):not(.is-invited) .custom-row.flex-center.pb-1 .col-12 .selected-kit {
  padding: 16px !important;
}

#step2 .offset-lg-2.offset-xl-3 .custom-row.flex-center.pb-1 .custom-row {
  margin: 0px;
}

#step2 .offset-lg-2.offset-xl-3 .custom-row.flex-center.pb-1 .custom-row .col-12:has(> .h6.bold:only-child) {
  padding-bottom: 12px !important;
}

.register-page .select2-container--default .select2-selection--single {
  padding-left: 0px !important;
}



.notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0px;
}

.notifications-header h2 {
  height: 100%;
}

.notification-button {
  border-radius: 8px;
  border: 1px solid var(--Schemes-Outline-Variant, #CAC4D0);
  padding: 6px 16px 6px 8px;
  display: inline-flex;
  gap: 8px;
  transition: all 0.3s ease;
}

.notification-button.selected {
  background-color: #E8F0FE;
  border-color: #357CBF;
}

.notifications-container {
  gap: 0px;
  display: grid;
}

.notifications-container .notifications-header {
  display: flex;
  justify-content: space-between;
  padding: 16px 0px;
}

.notifications-actions {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--Color-Neutral-200, #ECEAEA);
  background-color: transparent;
  padding-bottom: 12px
}

.notifications-list {
  list-style: none;
  display: grid;
  gap: 8px;
  background-color: white;
  padding-left: 0px;
  padding: 16px;
  max-height: 70vh;
  overflow: auto;
  margin: 0px;
  border-radius: 16px;
  margin-top: 16px;
}

.notification-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--Color-Neutral-50, #FFFFFF);
  justify-content: space-between;

}

i.primary {
  color: #357CBF;
}

i.warning {
  color: #FFC90C;
}

i.success {
  color: #01784D;
}

.actions-container {
  display: flex;
  gap: 16px;
  justify-content: end;
  align-items: end;

  height: 100%;
}

.actions-container a {
  text-decoration: none;
}

.notification-card.unread {
  background-color: #F4F5F9;
}

.notification-card.unread .toast-notification {
  display: none;
}

.notifications-container .notifications-list .notification-card {
  position: relative;
}

.notification-card .toast-notification {
  display: block !important;
  position: absolute !important;
  top: 8px;
  right: 16px;

}

.private-zone-content .notifications-container .mdl-button {
  padding: 6px 12px;
  min-width: 105px;
  max-height: 30px;
  font-size: 14px;

}

.notifications-container .notifications-list li {
  padding: 16px 24px 16px 16px;
}

.notification-content {
  display: grid;
  gap: 4px;
}

.notification-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notification-card .icon-container {
  flex: 0 0 auto;
  height: 100%;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.actions-container {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.img-file-notification {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.img-notification-container {
  gap: 4px;
  display: flex;
  align-items: center;
}

.info-file-notification {
  display: grid;
  gap: 4px;
}

.notification-card .date-notification-ctnr {
  text-align: unset;
}

.notification-card .label-medium {
  color: var(--neutral500)
}

.notifications-options {
  list-style: none;
  display: grid;
  gap: 16px;
  padding-left: 0px;
}

.input:checked+.sliderCheck:before {
  left: 3px !important;
}

.notifications-options li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notifications-options input:checked+.sliderCheck {
  background-color: #736D95;
}

.switchCheck {
  width: 36px;
  height: 20px;
}

.notifications-options li .col-md-2 {
  display: flex;
  justify-content: end;
  align-items: normal;
  padding: 0px;
}

.notifications-options .sliderCheck.round:before {
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
}

.notifications-options input:checked+.sliderCheck:before {
  transform: translateX(17px);
}

.notifications-options .body-small-regular {
  color: var(--neutrals700);
}

.notifications-options .custom-row {
  width: ;
}

.private-zone-content .notifications-container .notifications-tabs-container .mdl-button {
  border-radius: 10px 10px 0 0;
  color: var(--neutrals900);
  padding: 16px 8px;
  max-height: unset;
  min-width: 151px;
}

.private-zone-content .notifications-container .mdl-button.selected {
  font-weight: 700;
  border-bottom: 2px solid var(--primary800);
  color: var(--primary800);
  background-color: var(--primary100);
}

.notifications-header .h4 {
  font-weight: 600;
}

.modal-notifications-configurations.mdl-modal {
  max-width: unset;
  width: 50%;
  gap: 0px;
}

.modal-notifications-configurations .toast {
  justify-content: flex-start;
  margin: 0px;
}

.modal-notifications-configurations .content {
  gap: 12px;
  display: grid;
}

.modal-notifications-configurations .toast-information {
  width: 100%;
}

.modal-notifications-configurations .bodyMediumBold {
  color: var(--neutrals900);
}

.private-zone-content .modal-preview-file {
  max-width: unset;
  width: 100%;
}

.modal-preview-file,
.modal-preview-file .modal-info-user-header {
  background-color: transparent;

}

#visorPDF {
  height: 80vh;
}

.modal-preview-file .actions {
  justify-content: end;
  gap: 8px;
}

.modal-preview-file .bodyLargeBold,
.modal-preview-file .modal-info-user-header .mdl-button i {
  color: white;
}

.modal-preview-file .modal-info-user-header .mdl-button:hover i {
  color: var(--primary800);
}

.file-pdf-preview {
  width: 100%;
  height: 600px;
}

.file-image-preview {
  max-width: 100%;
  height: auto;
}

.img-empty-state-notifications-container img {
  height: 105px;
  width: 105px;
}

.notifications-empty-state {
  display: grid;
  gap: 16px;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.notifications-empty-state span,
.img-empty-state-notifications-container {
  display: flex;
  justify-content: center;
  text-align: center;
}

.notifications-empty-state .actions-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.notifications-empty-state .mdl-button {
  width: fit-content;
}

.modal-notifications-content .notification-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon content"
    "actions actions";
  gap: 8px 12px;
  align-items: start;
  margin-bottom: 16px;
  padding: 12px;
}

.modal-notifications-content .notification-card .actions-container {
  width: 100%;
  display: flex;
  grid-area: actions;
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 4px 0px;

}

.modal-notifications-content .notification-card .actions-container .mdl-button {
  min-width: 10rem;
}

.modal-notifications-content .tab-content.active {
  height: 19rem;
}

.modal-notifications-content .tab-content ul {
  height: revert-layer;
}

@media (max-width: 920px) {
  .modal-notifications-content .tab-content.active {
    height: 88vh;
  }

  .modal-notifications.mdl-modal {
    padding: 8px;
  }

  .notifications-empty-state {
    display: block;
  }

  .notifications-empty-state .actions-container {
    height: fit-content;
    padding: 16px 0px;
    justify-content: center;
  }

  .modal-preview-file .actions a {
    width: 100% !important;
  }

  .modal-notifications-configurations .modal-info-user-header .close-modal-container {
    font-size: 1.5rem;
  }

  .modal-notifications-configurations .content {
    gap: 8px;
  }

  .modal-notifications-configurations.mdl-modal {
    max-width: unset !important;
    width: 100%;
    height: 100%;
  }

  .notification-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon content"
      "actions actions";
    gap: 8px 12px;
    align-items: start;
    margin-bottom: 16px;
    position: relative;

  }

  .notification-card .toast-notification {
    position: absolute !important;
    top: 8px;
    right: 16px;
  }

  .icon-container {
    grid-area: icon;
  }

  .notification-content {
    grid-area: content;
  }

  .actions-container {
    grid-area: actions;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 4px 0px;
  }



  .notifications-actions {
    display: grid;
    padding-bottom: 0px;
  }

  .notifications-buttons-container {
    display: flex;
    overflow: auto;
    padding: 8px 0px;
    gap: 13px;
  }

  .notifications-header button.mdl-button {
    display: flex;
    justify-content: end;
  }

  .notifications-header button.mdl-button i {
    font-size: 20px;
  }

  .private-zone-content .notifications-container .mdl-button {
    flex: 1;
    width: 100%;
    max-width: 10rem;
  }

  .notifications-tabs-container {
    display: flex;
    width: 100%;
  }

  .private-zone-content .notifications-container .notifications-tabs-container .mdl-button {
    padding: 12px;
  }

  .notifications-list {
    max-height: unset;
    display: block;
  }

  .private-zone-content .modal-preview-file {
    width: 100%;
  }

}

/* ==========================================================================
        Seguimiento de mi organización
 ========================================================================== */

.title-search-result {
  color: var(--neutrals1000);
  font-family: "Noto Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.search-results-zona-privada-list li {
  padding: 8px;
}

.search-results-zona-privada-list li a {
  color: var(--neutrals900);
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  padding: 0px 8px;
}

.sidebar-private-zone-menu .mdl-ul {
  position: relative;
}

.search-active {
  width: 100%;
  display: flex;
  position: absolute;
  top: 0px;
  left: -30px;
  justify-content: center;
  align-items: center;
}

.private-zone-header.site-header.private-zone-header .mdl-ul>li.search-active:nth-child(3) {
  position: absolute !important;
  width: 100%;
  top: 0px;
  margin-left: 0px;
  height: 5vh;
  z-index: 999;
  background: #F9F1FF;
}

.search-active input {
  display: flex !important;
  right: -100%;
  top: -2px;
  margin-left: 0px;
  padding: 16px;
  width: 100%;
  border: 1px solid var(--primary800);
}

.private-zone-header .search-active .icon-search-btn {
  right: 10px;
  position: absolute;
  top: 5px;
}

.site-header.private-zone-header .search-active .search-header-container .icon-search-btn {
  background-color: transparent;
}

.icon-close-search-mobile {
  display: none;
  border: none;
  background: none;
  width: 30px;
}

.card-alert-container {
  width: 100%;
  background-color: white;
  padding: 16px;
  border-left: 8px solid #FE9925;
  border-radius: 14px;
  display: flow;
  margin-left: 0px;
}

.card-alerts-section {
  display: grid;
  gap: 16px;
}

.card-alert-container .modal-notifications-header {
  width: 100%;
}

.card-alert {
  display: grid;
  gap: 12px;
}

@media (max-width: 920px) {
  .search-active .icon-close-search-mobile {
    display: block;
  }
}

.site-header.private-zone-header ul.search-results-zona-privada-list:not(.notifications-list) li:nth-child(3):not(:has(.search-header-container)) {
  margin-left: unset;
}

.highlight-temp {
  border-radius: 16px;
  transition: box-shadow 0.4s ease;
  border: 2px solid var(--primary800);
  outline-offset: 2px;
  box-shadow: 0 8px 16px -8px rgba(89, 88, 88, 0.08);
}

.card-alert-menu-container {
  padding: 16px;
  width: 93%;
  cursor: pointer;
}

.alert-point-item .label-medium {
  color: #8C8A8A;
}

.card-alert-menu {
  background-color: var(--neutrals100);
  border-radius: 16px;
  padding: 16px;
}

.card-alert-menu .col-md-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-alert-menu i {
  font-size: 24px;
}

.card-alert-menu .col-md-10 {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

.alert-points-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.alert-point-item {
  display: flex;
  gap: 8px;
}

.alert-point-icon {
  height: 32px;
  width: 32px;
  background-color: #FFEEDB;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.alert-point-icon i {
  color: var(--secondary800);
}

.alert-point-data {
  display: grid;
}

.primary-color {
  color: var(--primary800);
}

.mdl-data-table {
  border: none;
  background-color: transparent;
}

.mdl-data-table thead {
  background-color: var(--primary100);
}

table.dataTable thead .sorting {
  margin-top: 0px;
}

table.dataTable thead .sorting:after {
  color: var(--primarycolor);
  opacity: 1;
  top: 28%;
}

.mdl-data-table td {
  border: none;
}

.mdl-data-table thead tr th:first-child {
  border-top-left-radius: 16px;
}

.mdl-data-table thead tr th:last-child {
  border-top-right-radius: 16px;
}

.dataTables_paginate.paging_simple_numbers {
  display: flex;
  justify-content: end;
  padding: 16px;
  gap: 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  z-index: 1;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
  width: 24px;
  height: 24px;
  border: 1px solid var(--primary100);
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paginate_button.current {
  background-color: var(--primary800);
  padding: 1px 6px;
  border-radius: 4px;
  color: white;
}

.sorting.sorting_desc .fa-sort-alt,
.sorting.sorting_asc .fa-sort-alt {
  display: none;
}

table.dataTable thead>tr>th.sorting {
  text-align: start;
}

.search-row-follow-up {
  display: flex;
  justify-content: space-between;
  padding: 8px 0px;
}

.follow-up-header {
  display: flex;
}

.follw-up-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.follw-up-cards .card {
  display: flex;
  gap: 8px;
  width: 100%;
}

.follw-up-cards .icon-container {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--primary100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primarycolor);
}

.toast-follow-up-container {
  padding: 16px 0px;
}

.toast-actions .mdl-button.close-toast-follow-up {
  text-decoration: none;
}

.toast-follow-up-container .toast-information {
  width: 100%;
}

.follow-up-periods-wrapper {
  display: flex;
  gap: 24px;
  padding: 16px;
  margin: 16px 0px;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: 12px;
}

.period-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.period-label {
  color: #8C8A8A;
  font-weight: 500;
  font-size: 14px;
}

.period-value {
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-follow-up {
  width: 20rem;
}

.card-mobile {
  background-color: white;
  border-radius: 12px;
  padding: 8px;
  width: 100%;
  border: 1px solid var(--primary100, #eee);
  box-sizing: border-box;
}

.card-mobile-subtitle {
  font-size: 14px;
  color: #8c8a8a;
  font-weight: 500;
}

.card-mobile .header {
  display: flex;
  gap: 16px;
  padding: 12px;
  border-bottom: 1px solid var(--primary100);
  justify-content: space-between;
}

.card-mobile .header>div:nth-child(odd) span {
  display: grid;
  gap: 4px;
  justify-content: start;
}

.card-mobile .header>div:nth-child(even) span {
  display: grid;
  gap: 4px;
  justify-content: end;
}

.card-mobile .content {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.card-mobile .content .info {
  display: flex;
  gap: 16px;
}

.card-mobile .info-container {
  padding: 0px;
  gap: 4px;
  align-items: start;
}

.card-mobile .info .img-container img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.card-mobile .footer>span {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 12px;
}

.card-mobile .content>div {
  text-align: start;
}

.card-mobile .content .label-medium {
  color: var(--neutrals800);
}

.card-mobile .body-small {
  color: var(--neutrals900);
}

.follow-up-content .toast {
  padding: 12px;
  align-items: center;
}

.follow-up-header-text {
  display: grid;
  gap: 8px;
}

.follow-up-header-text .body-medium-regular {
  width: 90%;
}

.alert-number-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--error800);
  color: var(--white);
  position: absolute;
  font-size: 10px;
  top: 3px;
  left: -19px;
}

.follow-up-content .mdl-data-table td {
  text-align: start;
  padding: 0px;
  padding-top: 0px;
  padding-left: 12px;
}

.follow-up-content .mdl-data-table tbody tr td:nth-child(5) {
  background-color: #EBECF4;
}

.search-row-follow-up .mdl-dropdown-btn {
  min-width: 10rem;
  justify-content: space-between;

}

.search-row-follow-up .mdl-dropdown-btn {
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background-color: transparent;

}

.search-row-follow-up .mdl-dropdown i {
  color: #000;
}

@media screen and (max-width: 920px) {
  .follow-up-header {
    display: grid;
  }

  .follow-up-header-text .body-medium-regular {
    width: 100%;
  }

  .follow-up-content .filters-products-btns {
    flex: none;
  }

  .follw-up-cards {
    display: flex;
    gap: 9px;
  }

  .follw-up-cards .card {
    margin: 0px;
    display: grid;
    justify-content: center;
    align-items: center;
  }

  .follw-up-cards .card .icon-container {
    order: 1;
  }

  .follw-up-cards .card .content {
    order: 2;
  }

  .follw-up-cards .card .icon-container-row {
    display: grid;
  }

  .follw-up-cards .card .card-body {
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  .follow-up-periods-wrapper {
    display: grid;
  }

  .period-item {
    justify-content: space-between;
    gap: 4px;
  }

  #example.dataTable tbody {
    display: block;
  }

  #example.dataTable tbody tr {
    display: block !important;
    width: 100%;
    margin-bottom: 16px;
    background-color: transparent;
    height: auto !important;
    min-height: 100px;
  }

  #example.dataTable tbody td {
    display: block;
    padding: 0;
    border: none;
    height: auto !important;
  }

  .search-row-follow-up {
    display: grid;
    gap: 12px;
    justify-content: stretch;
  }

  .search-follow-up {
    order: 2;
    width: 100%;
  }

  .filters-products-btns {
    order: 1;
  }

  .search-row-follow-up .filters-products-btns {

    justify-content: start;
  }

  .search-row-follow-up .mdl-dropdown .mdl-dropdown-btn {
    width: 100%;
    justify-content: space-between;
  }

  .follow-up-header-button .mdl-button {
    position: absolute;
    top: 26rem;
    right: 14px;
  }

  .hidden .follow-up-header-button .mdl-button {
    display: none;
  }

  .search-row-follow-up .mdl-dropdown {
    width: 100%;
  }

  .card-alert {
    gap: 4px;
  }

  .card-alert-menu {
    flex-wrap: nowrap;
  }

  .alert-number-error {
    top: 1px;
    left: -13px;
  }

  .alert-points-wrapper {
    margin-top: 12px;
  }

  .alert-points-wrapper .alert-point-item {
    width: 100%;
  }

  .card-alert-menu-container .card-alert-menu .col-sm-2.col-md-2 {
    width: 10%;
  }
}

/****************************
	**    CARRITOS PREARMADOS  **
	*****************************/

.pre-cart__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  justify-items: stretch;
  align-items: center;
  justify-content: stretch;
}

.pre-cart__item .header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1rem;
  justify-content: space-between;
}

.pre-cart__segment {
  grid-template-columns: 2fr 1fr 40px;
  display: grid;
  gap: 1rem;
  justify-items: stretch;
  align-items: center;
}

#contenedorDestino {
  display: none;
}

.pre-cart__content .tracking-images-container {
  display: flex;
  flex-wrap: wrap;
}

.pre-cart__opt ul.mdl-dropdown-menu {
  right: 0 !important;
  gap: 0px;
  padding: 0;
  min-width: 190px;
  z-index: 2;
}

.pre-cart__item.card {
  position: relative;
}

.pre-cart__opt .mdl-dropdown-item {
  border-bottom: 1px solid var(--neutral3);
  width: 100%;
  padding: 16px;
}

li.mdl-dropdown-item a {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--neutrals1000);
}

.pre-cart__opt-dropdown {
  border-radius: 100px;
}

.pre-cart__opt .mdl-dropdown-item i {
  color: var(--neutrals1000);
}

.pre-cart__opt .mdl-dropdown-item:hover i,
.pre-cart__opt .mdl-dropdown-item:hover a {
  color: var(--primary600);
}

.pre-cart__search-container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.pre-cart .search-header-container {
  flex: 1;
  max-width: 400px;
}

.pre-cart img.tracking-image {
  width: 40px;
  height: 40px;
}

.pre-cart button.tab-button {
  flex: unset;
}

.pre-cart .tabs {
  border-bottom: 2px solid var(--neutrals200);
}

.pre-cart .tab-button.active .body-medium-medium {
  border: none;
}

.new-precart-section__header .progress {
  z-index: 1;
  margin-top: 30px;
}

.new-precart-section__header {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1rem;
  padding: 1rem 0 1rem 0;
  justify-content: space-between;
  align-items: center;
}

.new-precart-section__header .title-mov {
  display: none;
}

a.mdl-button.title-mov {
  display: inline-flex;
}

#new-precart-section {
  margin-top: -1rem;
}

.new-precart-section__content {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.new-precart-section__content .mdl-block {
  border-radius: 12px;
  padding: 1rem;
  margin: 0;
}

.new-precart-section__content .mdl-block .h5 {
  padding: 1rem 0;
}

.logInBtn:has(.circle-element-ze) {
  background-color: transparent;
}

@media screen and (max-width: 920px) {
  .pre-cart__search-container .mdl-dropdown {
    width: 100%;
    padding: 8px 0px;
  }

  .pre-cart__search-container .mdl-dropdown-btn {
    width: 100%;
  }

  .pre-cart__search-container .mdl-dropdown-btn .body-medium-regular {
    width: 100%;
  }

  .filters-products-btns .mdl-dropdown {
    max-width: 50%;
  }

  .menu-btn {
    display: flex;
  }

  .menu-btn.open {
    background: #3c1159;
    width: 34px;
    height: 35px;
    border-radius: 30px;
    padding: 9px 10px 10px 10px;
    text-align: right;
    align-self: center;
    border: 1px solid var(--secondarycolor);
  }
}

/* @media all and (max-width: 480px) */
@media all and (max-width: 480px) {
  .menu-btn.open {
    -moz-transform: scale(.9);
    -webkit-transform: scale(.9);
    -o-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }
}


@media screen and (max-width: 1299px) {
  .omnilife-v2 .p-2 {
    padding: 12px;
  }

  .omnilife-v2 .events-container .p-2 {
    padding: 2rem;
  }

  .omnilife-v2 .pre-cart-section .tab-content.active {
    padding: 0px;
  }

  .pre-cart__search-container {
    padding-top: 12px;
  }

  .private-zone-header.site-header.private-zone-header .mdl-ul>li:nth-child(3) {
    position: unset !important;
    padding: 0px;
  }

  .private-zone-header.site-header .mdl-ul>li:has(> .search-header-container) {
    background-color: transparent;
  }

  .private-zone-header.site-header.private-zone-header .mdl-ul>li .search-header-container input {
    display: none;
  }

  .onboarding-modal {
    padding: 12px;
  }

  .amount-txt,
  .trend-info,
  .amount-txt.label-medium,
  .nxt-lvl-span {
    color: var(--neutrals900) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
  }

  .amount-w {
    font-size: 28px !important;
    font-style: bold !important;
    font-weight: 700 !important;
    line-height: 32px !important;
  }

  .shortcut-container .d-flex {
    margin-bottom: 0px;
  }

  .shortcut-container .d-flex .section-dashboard-title {
    margin-bottom: 0px;
  }

  .sidebar-private-zone-menu {
    transform: translateX(-100%);
    top: 60px;
    transition: transform 0.3s ease;
  }

  .sidebar-private-zone-menu.is-open {
    transform: translateX(0);
  }

  .omnilife-v2.private-zone-content {
    margin-left: 0px !important;
  }

  .site-header.private-zone-header .mdl-ul {
    margin-left: unset;
    display: flex;
    align-items: center;
    gap: unset;
  }

  #private-zone-menu-btn .menu-btn__lines::before {
    transform: translateY(-0.5rem) translatex(-0.7rem);
  }

  #private-zone-menu-btn .menu-btn__lines::after {
    transform: translateY(0.5rem) translatex(-.7rem);
  }

  #private-zone-menu-btn .menu-btn.active .menu-btn__lines::before {
    transform: rotate(45deg) translate(-1.3rem, 1.3rem);
  }

  #private-zone-menu-btn .menu-btn.active .menu-btn__lines::after {
    transform: rotate(-45deg) translate(-1.3rem, -1.3rem);
  }

  .site-header .mdl-ul>li:has(> #private-zone-menu-btn) {
    display: flex;
  }

  .site-header.private-zone-header>.mdl-ul>li:nth-child(3):not(:has(.search-header-container)) {
    margin-left: auto;
  }

  .registration-section,
  .shortcut-container {
    display: grid;
    gap: 16px;
  }

  .shortcut-container .d-flex {
    margin-bottom: 8px;
  }

  .site-header.private-zone-header .mdl-ul li:nth-child(1),
  .site-header.private-zone-header .mdl-ul li:nth-child(2) {
    margin-right: 0;
    /* opcional si quieres pegados */
  }


  .site-header.private-zone-header:not(.profile) ul:not(.notifications-list) li:nth-child(3):not(:has(.search-header-container)) {
    margin-left: auto;
  }


  .col-12 .container-chart {
    margin-top: 16px;
  }

  .modal-open .private-zone-header {
    z-index: 1;
  }


  .private-zone-header .search-header-container #search {
    display: none;
  }

  .private-zone-header .menu-btn {
    display: flex;
  }

  .modal-open .private-zone-header {
    z-index: 200;
  }

  .mdl-layout__obfuscator.is-visible {
    z-index: 210;
  }

  .private-zone-content .modal-notifications.mdl-modal {
    width: 100%;
    left: 0px !important;
    top: 0px !important;
    height: 100%;
  }

  .sidebar-private-zone-menu {
    padding: 24px 0px 0px 16px;
  }

  .sidebar-private-zone-menu .sidebar-logo-container {
    display: none;
  }

  .sidebar-private-zone-menu .name-menu-private-zone {
    margin: 0px;
    margin-bottom: 16px;
  }

  .private-zone-content main {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    padding: 24px 16px;
  }

  .notification-center .private-zone-content main {
    padding: 0;
  }

  .notification-center .card.level-card {
    margin: 0;
    padding: 0;
    border: none;
  }

  .private-zone-content.notification-center {
    background: #fff;
  }

  .omnilife-v2.pt-4.private-zone-content {
    padding-top: 0px !important;
    height: fit-content;
  }

  .btn-shortcuts {
    padding: 8px;
    display: grid;
    min-width: 6.5rem;
  }

  .btn-shortcuts-container {
    overflow-x: auto;
    white-space: nowrap;
    margin-top: 0px;
    padding: 8px;
  }

  .btn-shortcuts-container {
    overflow-x: auto;
    white-space: nowrap;
    margin-top: 8px;
    padding: 0px;
  }

  .registration-section {
    gap: 8px;
  }

  .section-dashboard-title {
    margin-bottom: 8px;
  }


  .modal-notifications-content {
    width: 100%;
    height: 100%;

  }

  .modal-notifications-content .notifications-list {
    width: 100%;
  }

  .private-zone-content .data-column p {
    font-size: 14px;
    line-height: 16px;
  }

  .site-header.private-zone-header .mdl-ul {
    justify-content: space-between;
  }

  .modal-notifications-content .notifications-list {
    width: 100%;
  }

  .private-zone-content .data-column p {
    font-size: 14px;
    line-height: 16px;
  }

  .private-zone-header {
    padding: 10px 16px;
  }

  .site-header .mdl-ul>li:has(> .search-header-container) {
    margin-left: 0px;
  }

  .site-header.private-zone-header .mdl-ul {
    padding: 0px;
  }

  .sidebar-logo-container-mobile {
    display: flex !important;
  }

  .sidebar-logo-container-mobile img {
    display: flex;
    height: 32px;
    width: 120px;
    min-width: 120px;
  }

  .site-header.private-zone-header .search-header-container {
    padding: 1px !important;
    border: none;
    background-color: white;
    font-size: 21px;
    display: flex !important;
    margin-left: unset !important;
  }

  .site-header.private-zone-header .search-header-container .icon-search-btn {
    background-color: #F9F1FF;
    color: var(--primarycolor);
  }

  .tracking-container .search-header-container .icon-search-btn {
    position: absolute;
    right: 5px;
  }

  .site-header.private-zone-header .search-header-container .icon-search-btn i {
    font-weight: normal;
  }

  #btn-profile span,
  #btn-profile i {
    display: none !important;
  }

  .accordions-ctnr .mdl-accordion__content.mdl-animation--default {
    padding: 0px !important;
  }

  .earnings-card .accordions-ctnr .mdl-accordion__content.mdl-animation--default {
    padding: 8px !important;
  }

  .level-card .card-level-actions {
    display: contents;
    width: 100%;
  }

  .level-card .card-level-actions button {
    width: 100%;
    min-width: unset;
  }

  .new-precart-section__content .select2-container--default .select2-selection--single #select2-prc-country-code-edit-container .select2-selection__placeholder {
    font-size: smaller;
    top: 7px;
  }
}

#prc-edit__created .full-width .select2-container--default .select2-selection--single {
  overflow: hidden;
}

.pre-cart-section .mdl-message-box {
  position: relative;
  margin-right: 0px;
}

@media screen and (max-width: 1024px) {
  .tracking-list-container .card {
    height: fit-content;
    max-height: fit-content;
  }
}

.pre-cart__search-container #dropdown-button-earings {
  background-color: #EBECF4 !important;
  border-radius: 8px;
}

.more-prod {
  display: flex;
  justify-content: center;
  align-items: center;
}


.pre-cart__item.card.expired button.share-precart__button {
  display: none;
}

.pre-cart__item.card.expired .title-text,
.pre-cart__item.card.expired .shared,
.pre-cart__item.card.expired .tracking-info,
.pre-cart__item.card.expired .cart-total {
  opacity: 0.5;
}

.pre-cart__item.card.expired .pre-cart__opt-edit {
  opacity: 1;
  width: 100%;
  pointer-events: auto;
  cursor: pointer;
}

.pre-cart__item.card.expired .pre-cart__title .mdl-chip {
  font-size: 16px;
  font-weight: 500;
  padding: 0px 8px;
}

.info-cart-list {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-cart-list li {
  list-style-type: none;
  display: flex;
  align-items: start;
  gap: 16px;
  ;

}

.info-content-header {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
  ;
}

.info-content-header .d-flex.align-items-center.justify-content-start {
  display: flex;
  gap: 24px;
}

.info-content-header i {
  font-size: 1.5rem;
  color: var(--warning600);
}

.mdl-moldal.share-cart-modal {
  gap: 8px !important;
}

.share-cart-modal .actions-container {
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 16px;
}

.info-cart-list-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-cart-list {
  max-width: 70%;
}

.mdl-message-box.warning:has(.fa-1-5x) {
  padding: 12px 24px !important;
}

.mdl-message-box.warning .fa-1-5x {
  display: flex;
  justify-content: center;
  align-items: center;

}

.share-cart-modal-footer {
  padding: 12px;
}

@media screen and (max-width: 920px) {
  .share-cart-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}

@media screen and (max-width: 1299px) {
  .modal-qr-footer.share-cart-modal-footer {
    gap: 30px;
  }
}

.pre-cart__page .mdl-button.link {
  overflow: visible;
}

.new-precart-section__content .span-6 div .span-10>div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/****************************
	**   FINAL CARRITOS PREARMADOS  **
	*****************************/




/*--- CSS Grid           -------*/
.grid-container-fluid,
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  padding: 10px 20px;
}

.grid-container {
  max-width: 1360px;
  margin: 0 auto;
}

.grid-example [class*=span-] {
  /* This can be removed in your own project, it is here to show the columns visually. */
  background-color: #373839;
  color: #fff;
  overflow: hidden;
  padding: 10px;
  border-radius: 10px;
}

/* Defining columns spans and offsets */
.span-1 {
  grid-column-end: span 1;
}

.span-2 {
  grid-column-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
}

.span-4 {
  grid-column-end: span 4;
}

.span-5 {
  grid-column-end: span 5;
}

.span-6 {
  grid-column-end: span 6;
}

.span-7 {
  grid-column-end: span 7;
}

.span-8 {
  grid-column-end: span 8;
}

.span-9 {
  grid-column-end: span 9;
}

.span-10 {
  grid-column-end: span 10;
}

.span-11 {
  grid-column-end: span 11;
}

.span-12 {
  grid-column-end: span 12;
}

.offset-0 {
  grid-column-start: 1;
}

.offset-1 {
  grid-column-start: 2;
}

.offset-2 {
  grid-column-start: 3;
}

.offset-3 {
  grid-column-start: 4;
}

.offset-4 {
  grid-column-start: 5;
}

.offset-5 {
  grid-column-start: 6;
}

.offset-6 {
  grid-column-start: 7;
}

.offset-7 {
  grid-column-start: 8;
}

.offset-8 {
  grid-column-start: 9;
}

.offset-9 {
  grid-column-start: 10;
}

.offset-10 {
  grid-column-start: 11;
}

.offset-11 {
  grid-column-start: 12;
}

.offset-12 {
  grid-column-start: 13;
}


@media (max-width: 1560px) {
  .xxl-span-1 {
    grid-column-end: span 1;
  }

  .xxl-span-2 {
    grid-column-end: span 2;
  }

  .xxl-span-3 {
    grid-column-end: span 3;
  }

  .xxl-span-4 {
    grid-column-end: span 4;
  }

  .xxl-span-5 {
    grid-column-end: span 5;
  }

  .xxl-span-6 {
    grid-column-end: span 6;
  }

  .xxl-span-7 {
    grid-column-end: span 7;
  }

  .xxl-span-8 {
    grid-column-end: span 8;
  }

  .xxl-span-9 {
    grid-column-end: span 9;
  }

  .xxl-span-10 {
    grid-column-end: span 10;
  }

  .xxl-span-11 {
    grid-column-end: span 11;
  }

  .xxl-span-12 {
    grid-column-end: span 12;
  }

  .xxl-offset-0 {
    grid-column-start: 1;
  }

  .xxl-offset-1 {
    grid-column-start: 2;
  }

  .xxl-offset-2 {
    grid-column-start: 3;
  }

  .xxl-offset-3 {
    grid-column-start: 4;
  }

  .xxl-offset-4 {
    grid-column-start: 5;
  }

  .xxl-offset-5 {
    grid-column-start: 6;
  }

  .xxl-offset-6 {
    grid-column-start: 7;
  }

  .xxl-offset-7 {
    grid-column-start: 8;
  }

  .xxl-offset-8 {
    grid-column-start: 9;
  }

  .xxl-offset-9 {
    grid-column-start: 10;
  }

  .xxl-offset-10 {
    grid-column-start: 11;
  }

  .xxl-offset-11 {
    grid-column-start: 12;
  }

  .xxl-offset-12 {
    grid-column-start: 13;
  }
}

@media (max-width: 1200px) {
  .xl-span-1 {
    grid-column-end: span 1;
  }

  .xl-span-2 {
    grid-column-end: span 2;
  }

  .xl-span-3 {
    grid-column-end: span 3;
  }

  .xl-span-4 {
    grid-column-end: span 4;
  }

  .xl-span-5 {
    grid-column-end: span 5;
  }

  .xl-span-6 {
    grid-column-end: span 6;
  }

  .xl-span-7 {
    grid-column-end: span 7;
  }

  .xl-span-8 {
    grid-column-end: span 8;
  }

  .xl-span-9 {
    grid-column-end: span 9;
  }

  .xl-span-10 {
    grid-column-end: span 10;
  }

  .xl-span-11 {
    grid-column-end: span 11;
  }

  .xl-span-12 {
    grid-column-end: span 12;
  }

  .xl-offset-0 {
    grid-column-start: 1;
  }

  .xl-offset-1 {
    grid-column-start: 2;
  }

  .xl-offset-2 {
    grid-column-start: 3;
  }

  .xl-offset-3 {
    grid-column-start: 4;
  }

  .xl-offset-4 {
    grid-column-start: 5;
  }

  .xl-offset-5 {
    grid-column-start: 6;
  }

  .xl-offset-6 {
    grid-column-start: 7;
  }

  .xl-offset-7 {
    grid-column-start: 8;
  }

  .xl-offset-8 {
    grid-column-start: 9;
  }

  .xl-offset-9 {
    grid-column-start: 10;
  }

  .xl-offset-10 {
    grid-column-start: 11;
  }

  .xl-offset-11 {
    grid-column-start: 12;
  }

  .xl-offset-12 {
    grid-column-start: 13;
  }
}

@media (max-width: 992px) {
  .lg-span-1 {
    grid-column-end: span 1;
  }

  .lg-span-2 {
    grid-column-end: span 2;
  }

  .lg-span-3 {
    grid-column-end: span 3;
  }

  .lg-span-4 {
    grid-column-end: span 4;
  }

  .lg-span-5 {
    grid-column-end: span 5;
  }

  .lg-span-6 {
    grid-column-end: span 6;
  }

  .lg-span-7 {
    grid-column-end: span 7;
  }

  .lg-span-8 {
    grid-column-end: span 8;
  }

  .lg-span-9 {
    grid-column-end: span 9;
  }

  .lg-span-10 {
    grid-column-end: span 10;
  }

  .lg-span-11 {
    grid-column-end: span 11;
  }

  .lg-span-12 {
    grid-column-end: span 12;
  }

  .lg-offset-0 {
    grid-column-start: 1;
  }

  .lg-offset-1 {
    grid-column-start: 2;
  }

  .lg-offset-2 {
    grid-column-start: 3;
  }

  .lg-offset-3 {
    grid-column-start: 4;
  }

  .lg-offset-4 {
    grid-column-start: 5;
  }

  .lg-offset-5 {
    grid-column-start: 6;
  }

  .lg-offset-6 {
    grid-column-start: 7;
  }

  .lg-offset-7 {
    grid-column-start: 8;
  }

  .lg-offset-8 {
    grid-column-start: 9;
  }

  .lg-offset-9 {
    grid-column-start: 10;
  }

  .lg-offset-10 {
    grid-column-start: 11;
  }

  .lg-offset-11 {
    grid-column-start: 12;
  }

  .lg-offset-12 {
    grid-column-start: 13;
  }
}

@media (max-width: 768px) {
  .md-span-1 {
    grid-column-end: span 1;
  }

  .md-span-2 {
    grid-column-end: span 2;
  }

  .md-span-3 {
    grid-column-end: span 3;
  }

  .md-span-4 {
    grid-column-end: span 4;
  }

  .md-span-5 {
    grid-column-end: span 5;
  }

  .md-span-6 {
    grid-column-end: span 6;
  }

  .md-span-7 {
    grid-column-end: span 7;
  }

  .md-span-8 {
    grid-column-end: span 8;
  }

  .md-span-9 {
    grid-column-end: span 9;
  }

  .md-span-10 {
    grid-column-end: span 10;
  }

  .md-span-11 {
    grid-column-end: span 11;
  }

  .md-span-12 {
    grid-column-end: span 12;
  }

  .md-offset-0 {
    grid-column-start: 1;
  }

  .md-offset-1 {
    grid-column-start: 2;
  }

  .md-offset-2 {
    grid-column-start: 3;
  }

  .md-offset-3 {
    grid-column-start: 4;
  }

  .md-offset-4 {
    grid-column-start: 5;
  }

  .md-offset-5 {
    grid-column-start: 6;
  }

  .md-offset-6 {
    grid-column-start: 7;
  }

  .md-offset-7 {
    grid-column-start: 8;
  }

  .md-offset-8 {
    grid-column-start: 9;
  }

  .md-offset-9 {
    grid-column-start: 10;
  }

  .md-offset-10 {
    grid-column-start: 11;
  }

  .md-offset-11 {
    grid-column-start: 12;
  }

  .md-offset-12 {
    grid-column-start: 13;
  }
}

@media (max-width: 576px) {
  .sm-span-1 {
    grid-column-end: span 1;
  }

  .sm-span-2 {
    grid-column-end: span 2;
  }

  .sm-span-3 {
    grid-column-end: span 3;
  }

  .sm-span-4 {
    grid-column-end: span 4;
  }

  .sm-span-5 {
    grid-column-end: span 5;
  }

  .sm-span-6 {
    grid-column-end: span 6;
  }

  .sm-span-7 {
    grid-column-end: span 7;
  }

  .sm-span-8 {
    grid-column-end: span 8;
  }

  .sm-span-9 {
    grid-column-end: span 9;
  }

  .sm-span-10 {
    grid-column-end: span 10;
  }

  .sm-span-11 {
    grid-column-end: span 11;
  }

  .sm-span-12 {
    grid-column-end: span 12;
  }

  .sm-offset-0 {
    grid-column-start: 1;
  }

  .sm-offset-1 {
    grid-column-start: 2;
  }

  .sm-offset-2 {
    grid-column-start: 3;
  }

  .sm-offset-3 {
    grid-column-start: 4;
  }

  .sm-offset-4 {
    grid-column-start: 5;
  }

  .sm-offset-5 {
    grid-column-start: 6;
  }

  .sm-offset-6 {
    grid-column-start: 7;
  }

  .sm-offset-7 {
    grid-column-start: 8;
  }

  .sm-offset-8 {
    grid-column-start: 9;
  }

  .sm-offset-9 {
    grid-column-start: 10;
  }

  .sm-offset-10 {
    grid-column-start: 11;
  }

  .sm-offset-11 {
    grid-column-start: 12;
  }

  .sm-offset-12 {
    grid-column-start: 13;
  }
}

/* CSS Grid Media Queries */
@media (max-width: 380px) {
  [class*=span-] {
    grid-column-end: span 12;
  }

  [class*=offset-] {
    grid-column-start: 1;
  }
}

#new-precart-section .grid-container {
  max-width: 100%;
  width: 100%;
  align-items: center;
  padding: 0;
}

#saveSend-section .mdl-button.link {
  overflow: visible;
}

.upload-section {

  border-radius: 16px;
  border: 1px #C4C4C4 dashed;
  padding: 1rem;
  position: relative;
  margin-top: 1rem;
}

.uploaded-container {
  text-align: center;
  max-width: 220px;
  margin: 1rem 0;
}

.button-container.wow.fadeInUp.active {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.new-precart-section__footer .mdl-button {
  min-width: 140px;
  display: block;
  width: auto;
}

.pricePoints-container {
  display: flex;
  gap: 4px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

#addProd-section .mdl-card__supporting-text {
  color: var(--neutrals1000);
  font-family: Noto Sans;
  font-weight: 500;
  font-size: 16px;
}

.mdl-chip.blackfriday {
  max-width: max-content;
  background: #2E2C3A;
  color: #fff;
}

#addProd-section #resumen-compra {
  position: sticky;
  top: 5rem;
}

.h4.prc__cart-name {
  margin: 1rem 1rem 0 1rem;
}

.cart-total__container .cart-total {
  padding-top: 1rem;
  border-top: 1px solid var(--neutrals200);
  margin-top: 1rem;
}

#addProd-section .productPrice {
  font-size: 16px;
}

#addProd-section .mdl-chip.productPoints {
  font-size: 14px;
}

a#open__cart-total {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  color: var(--neutrals1000);
  padding: .5rem 1rem;
  gap: 1rem;
}

#cart-total {
  width: 100%;
}

.prc__saved-cart.mdl-block.card .grid-container {
  width: 100%;
  gap: 1.5rem;
}

#prc__search-prod,
#prc__search,
.filters-container #search {
  padding-left: 16px;
  width: 100%;
}

#prc-alerts {
  position: fixed;
  top: 88px;
  right: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 50%;
  width: 100%;
}

a#open__cart-total i {
  order: 2;
}

#prc__mobile-cart {
  max-width: 100% !important;
  width: 100%;
  border-radius: 24px 24px 0px 0px;
  transform: translate(0px, 0px);
  position: fixed;
  top: unset;
  bottom: 0px;
  margin: 0 !important;
  left: 0;
  padding: 0 1rem;
}

#prc__mobile-cart-content {
  gap: 4px;
}

#prc__mobile-cart-content .modal-close {
  padding: 0px !important;
  height: 36px;
  right: 0px;
  color: var(--primary);
  top: 0;
}


ul#cart-product_list__mob {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  position: relative;
  gap: .5rem;
  margin: 0;
}

ul#cart-product_list__mob li {
  display: flex;
  width: 100% !important;
  min-width: 100%;
  max-width: 100%;
  justify-content: space-between;
}

ul#cart-product_list__mob li .d-flex {
  width: 100%;
}

li.prc_shared-li {
  padding: 10px 20px;
  border-bottom: 1px solid var(--neutrals300);
}

.prc-cat1 {
  background-color: #F4F5F9;
  color: #4F4C63;
}

.prc-cat2 {
  background-color: #FFEEDB;
  color: #8B4A01;
}

.prc-cat3 {
  background-color: #FFF8E0;
  color: #BB9100;
}

.gray-btns-container button {
  padding: 8px 12px;
  background: #f7f6f6;
  border-radius: 0;
}

.filters-products-btns .mdl-button {
  border-radius: 8px;
}

.view-reco-precart__button {
  border-radius: 10px;
  background: var(--neutrals100);
}

.pre-cart__item .header {
  padding-right: 12px;
}

.tab-content ul.breadcrumbs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.pre-cart-section {
  gap: 0 !important;
}

#pre-cart .btn-chip {
  background: none;
}

.Pre-cart__info {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
}

.prc-categories__container {
  display: flex;
  width: 100%;
  gap: 1rem;
  padding: 0px 0;
  justify-content: space-between;
}


.share-precart__button {
  width: 100%;
}

li.reco-item {
  list-style: none;
  padding: 4px 0;
}

.reco-item__content {
  display: flex;
  gap: 1rem;
}

.reco-item__text .product-info {
  display: block;
  color: var(--neutrals700);
}

ul.reco-item__list.grid-container {
  width: 100%;
}


/* ESTILOS NUEVO HOME */


.slider-back-container__content {
  position: absolute;
  top: 30%;
  max-width: 1000px;
  z-index: 1;
}

.slider-back-container__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 0;
}

.slider-back-container__img img {
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.slider-back-container {
  height: 425px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.media-row-slider {
  display: flex;
  width: 100%;
  max-width: 1000px;
}

.info-owl {
  display: flex;
  gap: 12px;
}

.img-thumbnail-owl {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  object-fit: cover;
}

.info-container-owl {
  display: flex;
  justify-content: start;
  padding: 32px;
  flex-direction: column;
  width: 50%;
  gap: 12px;
}

.img-slider-st {
  height: 20rem;
  object-fit: cover;
}

.img-slider-big {
  width: 100%;
  object-fit: cover;
  height: 600px;
  width: 1930px !important;
}

.owl-slider-big-mobile .img-slider-big {
  height: 35rem;
  width: 100% !important;
  border-radius: 0px !important;
}

.home-slider-big .owl-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-container-owl {
  width: 50%;
}

.media-container-owl .btn-play-video {
  position: absolute;
  z-index: 99;
}

.media-container-owl .btn-play-video.t-left {
  top: 20px;
  bottom: auto;
  left: 20px;
  right: auto;
}

.media-container-owl .btn-play-video.t-right {
  top: 20px;
  bottom: auto;
  right: 20px;
  left: auto;
}

.media-container-owl .btn-play-video.b-left {
  bottom: 20px;
  top: auto;
  left: 20px;
  right: auto;
}

.media-container-owl .btn-play-video.b-right {
  bottom: 20px;
  top: auto;
  right: 20px;
  left: auto;
}

.slider-back-container .mdl-card {
  width: 1000px;
}

.testimonials-sections {
  height: fit-content;
  margin-bottom: 20rem;
}

.testimonials-sections .slider-back-container__content .h2-bold {
  padding: 8px 0px;
}

.media-container-owl iframe {
  width: 100%;
  border-radius: 8px;
  height: 294px;

}

.info-product-owl {
  position: absolute;
  z-index: 999;
  bottom: 0px;
}

.info-product-owl .span-8 {
  display: grid;
  grid-area: 8px;
}

.prc-edit__addProd-section>.p-1:first-child {
  padding: 0px !important;
}

@media (max-width: 920px) {
  .slider-back-container__content {
    top: 20%;
  }

  .pre-cart-section.pre-cart.p-2 {
    padding: 12px !important;
  }

  #new-precart-section .p-2 {
    padding: 16px !important;
  }

  .prc__saved-cart.mdl-block.card .grid-container {
    gap: 0px;
  }

  #new-precart-section .p-2 {
    padding: 16px !important;
  }

  .prc__saved-cart.mdl-block.card .grid-container {

    gap: 0px;
  }

  .brochure-iframe-container {
    order: 1;
  }

  .slider-back-container .mdl-card {
    width: 100%;
  }

  .mdl-big-banner__content .bg-secondary1.mdl-card.small {
    padding: 12px;
  }

  .media-row-slider {
    display: grid !important;
    padding: 8px;
    width: 100% !important;
    width: 22rem !important;
  }

  .media-container-owl,
  .info-container-owl {
    width: 100%;
  }

  .testimonials-sections {
    height: max-content;
      margin-bottom: 80% !important;

  }

  .info-container-owl {
    gap: 8px;
  }

  .info-container-owl .body-large-regular .h3-bold {
    font-size: 16px;
    line-height: 35px;
  }

  .owl-new-testimonials {
    padding: 8px;
  }

  .img-slider-st,
  .media-container-owl iframe {
    height: 131px !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }

  .testimonials-sectionsyert .owl-carousel .owl-item.active {
    width: 100% !important;
  }
}

.owl-slider-big .owl-carousel {
  position: relative;
}

.owl-slider-big .owl-prev,
.owl-slider-big .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.owl-slider-big .owl-prev {
  left: 10px;
}

.owl-slider-big .owl-next {
  right: 10px;
}

.owl-slider-big .owl-item.active {
  z-index: 2;
}

.video-thumbnail {
  object-fit: cover;
  object-position: center center;
  height: 100%;
}

.owl-social-media .owl-stage {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mdl-card-social-media iframe {
  margin: 0 auto;
  /* Asegura que la tarjeta no se pegue a la izquierda */
  width: 100%;
}

/* Centra el bloque del carrusel en la página */
.owl-social-media {
  max-width: 1400px;
  /* Ajusta este valor según qué tan pegados los quieras */
  margin: 0 auto;
  /* Centra el contenedor horizontalmente */
  display: block;
}

/* Fuerza a que los ítems se agrupen al centro si el ancho sobra */
.owl-social-media .owl-stage {
  display: flex;
  justify-content: center;
}

.owl-carousel .owl-item .video-facade {
  width: 100%;
  height: 450px;
}

.info-product-owl .mdl-button.primary {
  border-radius: 8px;
  padding: 12px 8px;
}

.video-facade-gif {
  padding: 8px;
}

.video-facade-gif:hover {
  padding: 0px;
}

.video-facade-gif .info-product-owl {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-facade-gif:hover .info-product-owl {
  opacity: 1;
  visibility: visible;
}

.brochure-section-content {
  gap: 24px;
  display: grid;

}

.brochure-section-content .mdl-button.primary {
  max-width: 200px;
}

.mdl-card-social-media:hover .info-product-owl {
  display: flex;
  justify-content: space-between;
  width: 98%;
}

.focused-brochure {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 1. Solo afectamos al grid que está dentro de nuestra sección especial */
.focused-brochure .grid-container {
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  margin: 0px;

  animation: fadeInContainer 0.6s ease-out;
}

.slider-back-container__content .owl-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.focused-brochure .brochure-iframe-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.omnilife-v2 {
  margin-top: 7rem;
}

.seytu-mdl-card .mdl-card-info>p {
  display: none;
}

.seytu-mdl-card .mdl-card-info .price {
  font-size: 12px;
}

.seytu-mdl-card .mdl-card-info .mdl-button {
  padding: 8px 12px;
}

.owl-mdl-principal-slider button.owl-next span,
.owl-mdl-principal-slider button.owl-prev span {
  border: 1px solid var(--primary800) !important
}



.overlay-item .mdl-slide-img {
  height: 220px !important;
  width: 220px !important;
}

.tiktok-embed {
  height: 450px !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0px !important;
}

.home-slider-big .owl-carousel .owl-item img {
  border-radius: 0px;
}

.owl-mdl-principal-slider .owl-item.center.text-version .mdl-slide-figure {
  transform: scale(1.0) !important;
  WIDTH: 100%;
  HEIGHT: 100%;
}

.text-version {
  transform: scale(1.0) !important;

}

.text-version .owl-mdl-principal-slider .owl-item .mdl-slide-figure {
  transform: scale(1.0) !important;
}

.text-version .center .mdl-slide-figure {
  transform: scale(1.0) !important;
}

.text-version .owl-carousel .owl-item img {
  WIDTH: 100% ! IMPORTANT;
  HEIGHT: 100% ! IMPORTANT;
}

.text-version .mdl-slide-img {
  height: 100% !important;
  width: 100% !important;
}

.text-version.center .title-text-version,
.text-version.center .button-text-version {
  display: flex;
}

.button-text-version {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  bottom: 5px;
}

.text-version.center .button-text-version button {
  height: 40px;
  top: 100%;
  right: -280%;
}

ul#cart-product_list #card-producto-carrito img {
  width: 60px;
  height: auto;
}

li.cart-product_li {
  margin: 1rem 0;
}

.card-producto-carrito {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  width: 100%;
  margin: 4px 0;
}

li.cart-product_li .product-name {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  color: var(--primary800);
}

#prc__mobile-cart-content .mdl-modal__header.flex-center {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 10px 0;
}

li.cart-product_li {
  border-bottom: 1px solid var(--neutrals300);
  padding-bottom: 14px !important;
}

.new-precart-section__content .mdl-buttons-check-container {
  max-width: 100%;
}

#prc__mobile-cart .mdl-drawer__actions {
  z-index: 100;
}

.pre-cart__page ul.mdl-dropdown-menu {
  min-width: 210px;
}

.pre-cart__item.card.recommended-item {
  margin: 0;
}

.filters-products-btns.lg-span-12.span-4.full-width {
  display: flex;
  justify-content: space-between;
}

.pre-cart__item.card .mdl-message-box {
  margin-right: 20px;
}

.prc__empty-cart-container {
  text-align: center;
}

#cart-product__total-mobil {
  width: 100%;
}

/* ==========================================================================
           nuevos estilos rediseño productos
 ========================================================================== */
.products-container-wrapper .mdl-accordion__content-wrapper {
  display: none;
}

.products-container-wrapper .mdl-accordion--opened .mdl-accordion__content-wrapper {
  display: block;
}

.products-container-wrapper .tittle-section-products {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.products-container-wrapper .tittle-section-products .filter-butotns-container .mdl-button.link {
  color: var(--neutrals900)
}

.products-container-wrapper .tittle-section-products .filter-butotns-container .mdl-button.link span {
  text-decoration: none;

}

.search-products-container {
  margin: 0px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.products-container-wrapper .tabs-products-container .tab-container {
  display: block;
  gap: 12px;
}

.search-products-container input {
  width: 100%;
  max-width: 715px;
  padding: 0px 16px;
  border-radius: 25px;
  height: 40px;
  border: 1px solid var(--primary);
}




.product-points-label {
  padding: 4px 8px;
  background-color: var(--secondary100);
  border-radius: 8px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--secondary200);
  width: fit-content;
}

.icon-star-container {
  background-color: var(--secondary700);
  border-radius: 50%;
  height: 14px;
  width: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
}

.icon-star-container i {
  color: var(--secondary200);
}

.product-points-label .label-bold {
  color: var(--secondary700);
}

.products-header {
  display: grid;
  gap: 12px;
}

.products-container-wrapper .tabs-products-container .tab-button {
  padding: 8px 12px;
  white-space: nowrap;
}

.products-container-wrapper .tabs-products-container .tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

.products-container-wrapper .tabs-products-container .tabs .tab-button:hover {
  cursor: pointer !important;
}

.products-container-wrapper .tabs-products-container .tabs .tab-button {
  color: var(--neutrals1000) !important;
}

.tittle-section-products .mdl-button.link span {
  text-decoration: underline;
}

.products-container-wrapper .tabs-products-container .tittle-section-products {
  padding: 12px 0px;
}

.products-container-wrapper .tabs-products-container .tab-content.active {
  gap: 8px;
}

.products-container-wrapper .tabs-products-container .col-product {
  margin-top: 0px;
}


.products-container-wrapper .tabs-products-container .owl-banner-promociones .owl-nav button.owl-next {
  left: 17px;
}

.products-container-wrapper .tabs-products-container .owl-banner-promociones .owl-nav button.owl-prev {
  right: 17px;
}

.products-container-wrapper.omnilife-v2>section .tabs-products-container .owl-theme .owl-dots {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

.omnilife-v2 .tabs-products-container .owl-theme .owl-dots .owl-dot span {
  display: block;
}

.products-container-wrapper .tabs-products-container .productsRow {
  padding: 0px 8px;
}

.products-container-wrapper.productsContainer .tabs-products-container .custom-row.productsRow .col-product {
  margin-bottom: 24px;
}

.header-filters-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-bottom: 24px;
}

.header-filters-section .mdl-button {
  padding: 8px 12px;
  height: -webkit-fill-available;
}

.header-filters-section .mdl-button.active {
  background-color: var(--primary100);
}

#banner__crear_negocio figure img {
  height: 23rem;
}

#banner__crear_negocio .card-banner {
  right: 24%;
  bottom: -20%;
}

#drawer-filtros.drawer-filter-products .mdl-drawer__actions {
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-bottom: 24px;
}

.NFContainer .tab-content.active::after {}

#drawer-filtros.drawer-filter-products .mdl-drawer__actions .mdl-button {
  min-width: 17rem;
}

.products-container-wrapper .tab-container .mdl-banner__promo_container {
  padding: 0px;
}

@media (max-width: 920px) {
  #step5 .mdl-text-block p {
    padding: 16px;
  }

  .oxxopay-header {
    display: grid;
  }

  #login-section:has(.cart-has-products)~.checkout-footer {
    bottom: 0px;
  }

  #login-section:has(.cart-has-products)~.checkout-footer {
    bottom: 0px;
  }

  #seccion__registrate-banner #btn-banner-registrarse {
    display: none !important;
  }

  #banner__crear_negocio figure img {
    height: auto;
  }

  .header-filters-section {
    overflow: scroll;
    justify-content: start;
  }

  .header-filters-section .mdl-button {
    min-width: fit-content;
  }

  .products-container-wrapper .tabs-products-container .tittle-section-products {
    display: flex;
    padding: 12px 0px;
  }

  .products-container-wrapper .tabs-products-container .tittle-section-products .h3-bold {
    max-width: 70%;
  }

  .products-container-wrapper .tabs-products-container .tittle-section-products>* {
    max-width: 70%;
  }

  .products-container-wrapper .tabs-products-container .tab-content.active,
  .pplContainer {
    padding: 0px;
    overflow: hidden;
  }

  /*Fix para mantener el default padding en todo productos como en productivo
  Se agregan a la plantilla HTML los ID's para la especificidad de las reglas 
  a estas vistas.
  El fix anterior corresponde a arthur con un padding-top: 5rem !important;*/
  #productosContainer.pplContainer,
  #categoriaProdContainer.pplContainer,
  #subCategoriaProdContainer.pplContainer {
    padding: 1rem !important;
  }

  .products-container-wrapper .tabs-products-container .col-product {
    padding: 8px;
  }

  .products-container-wrapper .tabs-products-container .cardProducts {
    height: fit-content;
  }

  .products-container-wrapper .tabs-products-container .counterProdcut {
    max-width: unset;
  }

  .products-container-wrapper .tabs-products-container .tabs {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: start;
  }


}

a.nameCategory {
  text-decoration: underline;
  color: var(--primary)
}

a.nameCategory {
  text-decoration: underline;
  color: var(--primary)
}

/* ==========================================================================
          FINAL nuevos estilos rediseño productos
 ========================================================================== */

.wrapper.error-container.error-link {
  display: flex;
  justify-content: center;
  height: 80vh;
  align-items: center;
  gap: 0;
  padding: 0;
}

#product-detail #contenedorCounterProduct.col-lg-3 {
  max-width: none;
  flex: 0;
}

#product-detail .custom-row.principal__ctrls .col-lg-8 {
  max-width: none;
  flex: 1;
}

#product-detail .custom-row.principal__ctrls {
  display: flex;
  flex-direction: row;
  margin-top: 0;
}

#product-detail .complementary_card .counterProdcut {
  flex: none;
  width: 120px;
}

#product-detail .complementary_card .addToCarBtn.mdl-button {
  min-width: 100px;
}

#product-detail .principal__ctrls {
  margin-top: 0;
}

#product-detail .principal__content hr {
  width: 100%;
  margin: 0;
}

span.message-text .mdl-button.link i {
  color: inherit;
}

.breadcrumb-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#lista-direcciones .mdl-textfield__error {
  position: relative;
  margin: -6px 0 10px 10px;
}

label.mdl-radio.right.outline.mdl-js-radio.mdl-js-ripple-effect.is-error {
  border: 1px solid var(--error600);
}

section#seccion__card_plantas .col-md-3.col-sm-4.col-12 {
  margin-bottom: 16px;
}

.register-page #step2 .custom-row.flex-center.pb-1>.col-12.pb-1.fix {
  padding-bottom: 1rem !important;
}

.register-page #step2 .custom-row.flex-center.pb-1>.col-md-12,
.register-page #step2 .col-md-12.pb-0.fix {
  padding-bottom: 0rem !important;
}

/* ==========================================================================
          Estilso para corregir|
 ========================================================================== */
.formas-compras-container .card-select-country,
.reconocimientos-container .card-select-country {
  padding: 20px;

}

.spanContainerSelect:has(.imgSelectFlag) {
  height: 48px;
}



/* #seccion__formas-compra-2 .owl-formas-compra .owl-item.active {
  min-width: 230px
} */

.modal__inner .modal__head .highlight {
  background-color: transparent;
}

.modal__inner.ps-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#alertChangeShippingAddress #btnChangeAddress {
  background-color: white;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.featured-product-movil .cardProducts {
  background: var(--primary1);
}

/* ==========================================================================
          Estilso para corregir|
 ========================================================================== */

.saldo-favor-texto {
  padding-top: 20px;
  border: 1px;
}

.saldo-card {
  margin: 0 0 1rem 0 !important;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid var(--neutrals600);
}

.register-page #step2 .mdl-message-box .col-12 {
  padding: 0 !important;
}


.register-page #step2 .offset-lg-2.offset-xl-3 .custom-row.flex-center.pb-1 .mdl-message-box .custom-row {
  padding: 0;
}

.register-page .mdl-textfield.outline.full-width.mdl-js-textfield.mdl-textfield--floating-label.is-upgraded.is-dirty.is-invalid {
  margin: 0 !important;
}

.register-page:has(#privacy-terms) :not(.is-invited)>.payment5-content .mdl-textfield.outline .mdl-textfield__label,
.register-page:has(#na-id_num1-field)>.mdl-textfield.outline .mdl-textfield__label {
  top: 30px;
}

.register-page #step3 .custom-row.flex-center.pb-1 .col-12 .mdl-message-box .col-12 {
  padding: 0 !important;
}

.register-page #step3 .custom-row.flex-center.pb-1 .col-12 .mdl-message-box .col-12 {
  padding: 0 !important;
}


.register-page #step3 .mdl-textfield.is-verified:after {
  top: 15px;
}

.register-page #step3 #has-eo-code {
  align-items: flex-start;
}

.form-sex-container {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 2rem;
}

.tracking-container .cart-empty .mdl-button {
  padding: 16px 24px;
  max-width: 340px !important;
}

#promos label.mdl-radio.outline.is-upgraded.is-checked:after {
  position: absolute;
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
  color: var(--primary1);
  z-index: 2;
  content: "\f00c";
  background: var(--primary4);
  border-radius: 100px;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 4px;
  top: 4px;
}

#promos-obl {
  max-height: 866px;
  overflow-y: scroll;
  overflow-x: hidden;
}

label.mdl-radio.outline.is-upgraded.is-checked .promo-price {
  margin-top: 22px;
}

label.mdl-checkbox.outline {
  display: flex;
  padding: 10px;
  border-radius: 1rem;
  border: 1px solid var(--neutrals600);
  flex-wrap: wrap;
  align-content: space-between;
  height: fit-content;
  margin: 10px 0;
  transition: var(--transition);
  overflow: hidden;
}

label.mdl-checkbox.outline.mdl-js-checkbox.is-checked {
  color: var(--primary700);
  border: 1px solid var(--primary600);
  background-color: var(--primary1);
}

label.mdl-checkbox.outline.mdl-js-checkbox.is-checked .mdl-card {
  background: transparent;
}



label.mdl-checkbox.outline.mdl-js-checkbox .promo-price {
  margin-top: 22px;
}

.has-counter .mdl-checkbox.is-checked {
  padding-bottom: 60px;
}

label.mdl-checkbox.outline.is-checked:has(.has-counter.active) .counterProdcut {
  z-index: 1;
}

/*10546 Ajuste de color en "Impulsamos tu desarrollo personal a gris neutral
.card-testimonio-crear-negocio .body-medium-bold {
  color: var(--neutrals900); 
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}*/

/* 13190:: Ajuste de orientacion columna en cards objetivos y ejes de gestión en sostenibilidad version movil*/
@media (max-width: 768px) {
  #sost__objetivos .mdl-block__container {
    flex-direction: column;
    text-align: center;

    .h5-bold {
      padding: 10px 0px;
    }
  }

  #sost__ejes .mdl-block__container {
    flex-direction: column;
    text-align: center;

    .h5-bold {
      padding: 10px 0px;
    }
  }
}

/*19768:: Re ajuste a columna de los pasos*/
@media (max-width: 768px) {
  .omnilife-v2.pt-1.fortalecer-mi-negocio__container .mdl-counter {
    flex-direction: column;
  }

  .omnilife-v2.pt-1.fortalecer-mi-negocio__container .mdl-counter .mdl-block {
    padding-top: 0;
  }

  .omnilife-v2.pt-1.fortalecer-mi-negocio__container .mdl-counter .mdl-block h2,
  .omnilife-v2.pt-1.fortalecer-mi-negocio__container .mdl-counter .mdl-block p {
    text-align: center;
  }

  .omnilife-v2.pt-1.fortalecer-mi-negocio__container .mdl-counter .mdl-block span {
    text-align: justify;
  }
}

/*29214:: extravaganas: carrusel de descargables*/
.omnilife-v2.template-xtrvgns.pt-4 .mdl-card-icon {
  width: 100%;
  display: flex;
  flex-direction: column !important;
}

.events-container #seccion__big_card {
  margin-top: 20px;
}

.confirmation-page #step5 {
  padding: 0;
}

.confirmation-page #step5 .offset-lg-2.offset-xl-2.col-lg-7.col-xl-8 {
  padding: 0;
}

.omnilife-v2.products-page.inner.detail.pt-2 {
  margin-top: 7rem;
}

span.select2-dropdown.select2-dropdown--below {
  z-index: 9999999;
}

.omnilife-v2 #modalChangePersonalConsumption .cierre-indistinto {
  padding-top: 0 !important;
}

#message-index-codistribuitor-modal .postal-code__description {
  margin: 0 auto;
}

#message-index-codistribuitor-modal .modal__inner.ps-container {
  gap: 0;
}

span.select2-container.select2-container--default.select2-container--open {
  z-index: 9999999;
}

div#product-detail .color__choosed button.color__picker {
  margin-top: -5px !important;
  background-size: cover;
}

/* ==========================================================================
          Centro de notificaciones
 ========================================================================== */

a.mdl-chip.notif-filter-btn .grid-container {
  margin: 0 !important;
  padding: 4px;
  align-items: center;
}

a.mdl-chip.notif-filter-btn {
  border-radius: 12px;
  border: 1px solid var(--neutrals400);
  background: var(--neutrals100);
  color: var(--neutrals1000);
}

a.mdl-chip.notif-filter-btn.active {
  background: var(--primary200);
}

#noti-center .mdl-buttons-check-container {
  max-width: 100%;
}

li.notif-card.unread {
  border: none;
  padding: 12px;
  gap: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 16px;
  background: var(--Color-Tertiary-50, #F4F5F9);
}

.notif-filter-btn.active i {
  background: #fff;
  border-radius: 100%;
}

li.notif-card.unread:after {
  content: '';
  border-radius: 100px;
  height: 8px;
  width: 8px;
  background: var(--secondary500);
  top: 16px;
  right: 16px;
  position: absolute;
}

li.notif-card {
  /* border: 1px solid var(--neutrals200); */
  padding: 12px;
  gap: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-bottom: 1px solid var(--neutrals300);
  width: 100%;
}

.notif-card__container {
  gap: 8px;
  padding: 1rem;
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#my_codistributor .modal-inner .highlight,
.my_codistributor .modal-inner .highlight {
  padding: 0px;
}

.modal__body button {
  max-width: 300px;
}



.mdl-textfield.is-invalid:has(#password)::after {
  content: "";
}

.mdl-textfield.is-invalid:has(#password2)::after {
  content: "";
}

.mdl-textfield.is-invalid .mdl-textfield--icon {
  color: var(--error800);
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow {
  background-color: #eee;
}

.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label {
  top: 2px !important;
}

.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field .mdl-textfield__label span {
  top: 29;
}


.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield.outline label.mdl-textfield__label {
  top: 30px;

}

.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label,
.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield--floating-label.outline.has-placeholder .mdl-textfield__label {
  top: 3px;
}

#contract-code-field.is-invalid {
  margin-bottom: 20px !important;
}

.register-page .mdl-radio__inner-circle {
  z-index: 2;
}

#step3 .mdl-message-box .custom-row,
#step3 .mdl-message-box .custom-ro {
  gap: 16px;
  padding: 8px;

}

div[x-data*="countryCodeTel"]~.select_error {
  position: absolute;
  top: 70px;
}

.notif-card .button-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.have-address .current-shipping-addres {
  color: var(--primary700);
  border: 1px solid var(--primary600) !important;
  background-color: var(--primary1) !important;
}

#div-container-payments-list {
  display: grid;
  gap: 16px;

}

.checkout-footer .mdl-accordion--opened .fa-chevron-up {
  display: none;
}

.calendarSlide:has(#info-eo) {
  overflow-y: scroll;

}

#validate-contract {
  margin-top: 16px;
}

.form-sex-container span:first-of-type {
  margin-right: 8px;
}

#my_codistributor .modal-inner .highlight,
.my_codistributor .modal-inner .highlight {
  padding: 0px;
}

.modal__body button {
  max-width: 300px;
}



.mdl-textfield.is-invalid:has(#password)::after {
  content: "";
}

.mdl-textfield.is-invalid:has(#password2)::after {
  content: "";
}

.mdl-textfield.is-invalid .mdl-textfield--icon {
  color: var(--error800);
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow {
  background-color: #eee;
}

.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label {
  top: 2px !important;
}

.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field .mdl-textfield__label span {
  top: 29;
}


.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield.outline label.mdl-textfield__label {
  top: 30px;

}

.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label,
.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield--floating-label.outline.has-placeholder .mdl-textfield__label {
  top: 3px;
}

#contract-code-field.is-invalid {
  margin-bottom: 20px !important;
}

.register-page .mdl-radio__inner-circle {
  z-index: 2;
}

#step3 .mdl-message-box .custom-row,
#step3 .mdl-message-box .custom-ro {
  gap: 16px;
  padding: 8px;

}

div[x-data*="countryCodeTel"]~.select_error {
  position: absolute;
  top: 70px;
}

.notif-card .button-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.have-address .current-shipping-addres {
  color: var(--primary700);
  border: 1px solid var(--primary600) !important;
  background-color: var(--primary1) !important;
}

#div-container-payments-list {
  display: grid;
  gap: 16px;

}

.checkout-footer .mdl-accordion--opened .fa-chevron-up {
  display: none;
}

#validate-contract {
  margin-top: 16px;
}

.form-sex-container span:first-of-type {
  margin-right: 8px;
}

#my_codistributor .modal-inner .highlight,
.my_codistributor .modal-inner .highlight {
  padding: 0px;
}

.modal__body button {
  max-width: 300px;
}



.mdl-textfield.is-invalid:has(#password)::after {
  content: "";
}

.mdl-textfield.is-invalid:has(#password2)::after {
  content: "";
}

.mdl-textfield.is-invalid .mdl-textfield--icon {
  color: var(--error800);
  top: 10%;
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow {
  background-color: #eee;
}

.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label {
  top: 2px !important;
}

.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field .mdl-textfield__label span {
  top: 29;
}


.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield.outline label.mdl-textfield__label {
  top: 30px;

}

.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield--floating-label.outline.is-dirty .mdl-textfield__label,
.register-page:has(#privacy-terms) :not(.is-invited)>#contract-code-field.mdl-textfield--floating-label.outline.has-placeholder .mdl-textfield__label {
  top: 3px;
}

#contract-code-field.is-invalid {
  margin-bottom: 20px !important;
}

.register-page .mdl-radio__inner-circle {
  z-index: 2;
}

#step3 .mdl-message-box .custom-row,
#step3 .mdl-message-box .custom-ro {
  gap: 16px;
  padding: 8px;

}

div[x-data*="countryCodeTel"]~.select_error {
  position: absolute;
  top: 70px;
}

.notif-card .button-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

li.notif-card.notif-cat__informativas i {
  color: var(--info600);
}


li.notif-card.notif-cat__actualizaciones i {
  color: var(--warning700);
}

li.notif-card.notif-cat__recompesas i {
  color: var(--success1000);
}

.notification-category i {
  font-size: 1.2rem;
  margin-top: 3px;
}

li.notif-card button.info-btn {
  min-width: 110px;
}

p.notification-setting-description {
  color: var(--neutrals700);
  font-size: 14px;
  line-height: 16px;
}

.notification-setting-item {
  margin-bottom: 1rem;
}

.info-kits .modal__inner {
  max-height: none;
  overflow-y: auto;
  flex: 1 1 auto;
  width: 100%;
}

.info-kits .modal__inner ul {
  gap: 0;
}

.pre-cart-section .checkout-footer {
  box-shadow: none;
  overflow-y: scroll;
}

.pre-cart-section .checkout-footer {
  box-shadow: none;
  overflow: scroll;
}

/*Incentivos page Linea: 39438*/
.incentivos-section-container {
  display: flex;
  flex-direction: column;
  gap: 24px !important;
  min-width: 0;
  width: 100%;
}

.incentivos-section-container .registration-section {
  min-width: 0;
  width: 100%;
}

.incentivos-section-container .chip-container {
  display: flex;
  padding-right: 16px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 13px;
  align-self: stretch;
  flex-wrap: wrap;

  .mdl-chip {
    border-radius: 8px;
    border: 1px solid var(--Schemes-Outline-Variant, #CAC4D0);
    background-color: var(--neutrals100);
    color: #595858;
  }
}

/* Contenedor principal de las tarjetas de avance */
.avance-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

/* Contenedor principal de las tarjetas de incentivos */
.incentivos-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.filter-butotns-container .chip-container .mdl-chip {
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s eas
}

/* Estado activo del chip */
.filter-butotns-container .chip-container .mdl-chip.is-active {
  background-color: var(--primary100);
  /*#49454F1A;*/
}

/* Forzar que el texto herede el color blanco cuando está activo */
.filter-butotns-container.chip-container .mdl-chip.is-active.mdl-chip__text {
  color: inherit;
}

@media (max-width: 768px) {
  .incentivos-cards-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .chip-container {
    display: flex;
    padding-right: 16px;
    align-items: flex-start;
    gap: 13px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    padding-bottom: 8px;
  }

  .mdl-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
  }

  .filter-butotns-container {
    max-width: 100%;
    min-width: 0;
  }
}

/* --- SECCIÓN SUPERIOR --- */
/* Tarjeta Base */
.avance-card.mdl-card {
  flex: 1 1 calc(33.333% - 16px);
  min-width: 280px;
  max-width: 100%;
  padding: 16px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  min-height: 100%;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.avance-card__top {
  display: flex;
  gap: 8px;
  /* Regla 1 */
  align-items: flex-start;
  width: 100%;
}

.avance-card__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.avance-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Regla 1 */
  flex-grow: 1;
  min-width: 0;
  /* Permite que el texto interno se trunque correctamente */
}

.avance-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  /* Regla 1 */

  .body-medium-bold {
    padding: 0px !important;
  }
}

.avance-card__title-row .body-medium-bold {
  margin: 0;
  color: #333333;
  /* Truncado a 2 líneas para pantallas pequeñas (opcional, basado en tu imagen 3) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Chip - Regla 5 (Border radius de 4px) */
.chip-sencillo {
  background-color: var(--secondary100, #FFEEDB);
  color: var(--secondary900, #B05F01);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  height: fit-content;
}

/* --- SECCIÓN INFERIOR (ESTADÍSTICAS) --- */
.avance-card__stats {
  display: flex;
  gap: 8px;
  width: 100%;
  height: fit-content;
}

@media (max-width: 768px) {
  .avance-card.mdl-card {
    flex: auto;
    min-height: fit-content;
    height: fit-content;
  }

  .avance-card__stats {
    height: 100%;
  }

  .avance-card__stats {
    margin-top: 16px;
    ;
  }
}

.avance-card:has(.stat-alert-banner) .avance-card__top {
  border-bottom: 1px solid var(--neutral3, #E0E0E0);
  padding-bottom: 16px;
  /* Agregamos padding para que el contenido no quede pegado a la línea */
}

.stat-box {
  flex: 1;
  background-color: var(--neutrals100, #F7F6F6);
  border-radius: 4px;
  padding-top: 12px;
  /* Espaciado superior equilibrado */
  padding-bottom: 12px;
  /* Regla 3 (Padding bottom de 12px) */
  padding-left: 8px;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Regla 3 (Contenido centrado) */
  justify-content: center;
  gap: 4px;
}

.stat-box .body-medium-bold {
  margin: 0;
  color: #333333;
}

.stat-alert-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  width: 100%;
  border-radius: 8px;
  background-color: var(--error100, #FCE1DD);
  color: var(--error900, #A31F0C);
  box-sizing: border-box;
  height: fit-content;
  align-self: self-end;
}

.stat-alert-banner i {
  font-size: 18px;
}

/* Sobrescribimos el color de la clase tipográfica para que herede el rojo del banner */
.stat-alert-banner .body-small-medium {
  color: inherit;
  margin: 0;
}

.incentivos-section-container .body-small-medium,
.inscripcion-container .body-small-medium,
.mi-avance-container .body-small-medium {
  overflow: hidden;
  color: var(--Color-Neutral-900, #595858);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

#avance-carousel-container {
  width: 100%;
  min-width: 0;
  padding-bottom: 16px;
}

#avance-carousel-container .owl-item img.avance-card__thumb {
  width: 40px !important;
  height: auto !important;
  max-width: none !important;
}

#avance-carousel-container .owl-item .avance-card__top {
  display: flex !important;
  align-items: center !important;
}

#avance-section-resume {
  display: none;
}

@media (max-width: 920px) {
  #avance-section {
    display: none !important;
  }

  #avance-section-resume {
    display: block;
  }

  .avance-resume {
    display: flex;
    gap: 8px;
    height: auto;
    flex-direction: row;
    justify-content: space-between;
    padding: 16px;
    background-color: #FFF;
    border-radius: 8px;

    .route-icon {
      padding: 8px;
      border-radius: 8px;
      transform: none;
      border: 1px solid var(--Schemes-Outline-Variant, #CAC4D0);
    }

    h3 {
      font-size: 14px !important;
      color: #474545 !important;
      text-align: start;
      width: 100%;
      font-weight: 700 !important;
    }

    * {
      align-self: anchor-center;
    }
  }
}

/* Cards del inicio de incentivos, se elimina el mdl card para evitar el crop de la imagen */
.custom-card {
  /*.mdl-card*/
  min-height: auto;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.custom-card__media {
  /*height: 163px; mantenemos las dimensiones de la imagen original*/
  align-self: stretch;
  /*width: 100%; mantenemos el ancho en auto*/
  width: auto;
  object-fit: cover;
  display: block;
  border-radius: 12px 12px 0px 0px;
}

.incentivos-section-container .infoCardContainer {
  padding: 12px;
  gap: 12px;
}

.infoCardContainer .complementary_card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: var(4px, 4px) 0;

  .mdl-button.secondary {
    padding: 8px 24px;
  }

  .linkMedium {
    padding: 8px 8px;
  }
}

.custom-card__chips-container {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Estilos individuales para cada chip */
.incentivos-section-container .chip {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  font-family: "Noto Sans";
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;

}

.chip-neutral {
  background-color: var(--neutrals100);
  color: var(--neutrals900);
}

.chip-secondary {
  background-color: var(--secondary100);
  color: var(--secondary1000);
}

.chip-warn {
  background-color: var(--warning200);
  color: var(--warning900);
}

.banner-detalles {
  width: 100%;
  /*550px*/
  height: 180px;
  /*132px*/
  margin: 24px auto;
  /* Centra el banner horizontalmente */
  overflow: hidden;
  border-radius: 8px;
  background: #f5f5f5;
}

.banner-detalles img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.incentivos-section-container .registration-section {
  gap: 16px;

  p {
    padding-bottom: 16px;
  }
}

.detalles-container .registration-section p {
  border-bottom: 1px solid var(--neutral3);
}

/*Detalles del incentivo, Visor de PDF*/
/* CSS para acomodar la barra sobre el PDF */

.pdf-wrapper {
  width: 100%;
  border: 1px solid #E0E0E0;
  /* Opcional: un borde suave para contener todo */
  border-radius: 8px;
  overflow: hidden;
  /* Para que el iframe respete los bordes redondeados */
  background-color: #F8F9FA;
  /* El fondo claro que se ve detrás de tu PDF */
}

.pdf-custom-toolbar {
  display: flex;
  justify-content: flex-end;
  /* Alinea los botones a la derecha */
  align-items: center;
  gap: 24px;
  /* Espacio entre los botones */
  padding: 16px 24px;
}

.mi-avance-container .wrapper .registration-section {
  gap: 12px;
}

.mi-avance-container .wrapper .registration-section:nth-child(2) {
  margin-top: 24px;
}

.mi-avance-container .puntos-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  .mdl-card {
    border-radius: 8px;
  }
}

@media (max-width: 920px) {
  .mi-avance-container .puntos-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
  }

  .mi-avance-container .puntos-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .mi-avance-container .puntos-container .card-puntos:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/*Cards de mis puntos y card alert amarillo*/


.mi-avance-container .puntos-container .mdl-card {
  padding: 8px;
  min-height: fit-content;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  span {
    color: var(--Color-Neutral-1000, #474545);
    font-family: "Noto Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
  }
}

/* ========================================================
   Estructura interna para replicar la maqueta (Textos, Iconos y Flechas)
   ======================================================== */
.mi-avance-container .puntos-container .mdl-card .card-puntos__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.mi-avance-container .puntos-container .mdl-card .card-puntos__header h6 {
  margin: 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}

.mi-avance-container .puntos-container .mdl-card .card-puntos__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.mi-avance-container .puntos-container .mdl-card .card-puntos__footer {
  width: 100%;
  margin-top: auto;
  text-align: right;
  padding-top: 4px;
}

.mi-avance-container .puntos-container .mdl-card .card-puntos__body h3 {
  margin: 0;
}

.mi-avance-container .puntos-container .mdl-card .card-puntos__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mi-avance-container .puntos-container .mdl-card .indicator-green {
  color: var(--success1000, #108975);
  /* Ajusta a tu variable de verde */
  font-size: 14px;
  font-weight: 700;
}

/* ========================================================
   Tarjeta Alerta Amarilla (Cuarto Elemento)
   ======================================================== */
.mi-avance-container .card-alert,
#formInscription .card-alert {
  display: flex;
  padding: var(--Spacing-2, 8px);
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  border-radius: 8px;
  background-color: var(--warning100);
  text-align: center;

  span {
    font-family: "Noto Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    line-height: 16px;
  }
}

@media (max-width: 920px) {
  .mi-avance-container .card-alert h6 span {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-size: 18px !important;
    line-height: 28px !important;
  }
}

/*Fin puntos container y alert amarillo*/

.mi-avance-container .registration-section .bodyMedium {
  font-weight: 500;
  margin: 12px 0px;
}

.mi-avance-container .info-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .mi-avance-container .info-container {
    grid-template-columns: repeat(1, 1fr);
    padding: 0px;
  }
}

.mi-avance-container .info-container .mdl-card {
  border-radius: 8px;
  padding: 16px;
  gap: 16px;
  min-height: fit-content;
}

.mi-avance-container .info-container .mdl-card .info-card-header {
  display: grid;
  grid-template-columns: 1fr 7fr 2fr;
  column-gap: 8px;
  justify-items: center;

  img {
    width: 68.658px !important;
    height: auto !important;
    max-width: none !important
  }

  .incentivos-section-container .chip {
    height: fit-content;
    text-align: center;
    width: fit-content;
  }
}

.mi-avance-container .info-container .mdl-card .info-card-content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  row-gap: 16px;
  column-gap: 8px;
}

@media (max-width:920px) {

  .mi-avance-container .info-container .mdl-card .info-card-content {
    grid-template-columns: minmax(0, 2fr) 72px;
    gap: 12px 8px;
  }

  .mdl-travel-card {
    min-width: 0;
    padding: 8px;
  }

  .mdl-travel-header {
    margin-bottom: 8px;
  }

  .mdl-travel-title,
  .mdl-travel-counter {
    font-size: 16px;
  }

  .mdl-travel-counter {
    font-size: 16px;
  }

  .mdl-travel-steps {
    /*gap: 4px !important;*/
    padding: 8px 6px !important;
    /*justify-content: center !important;      */
  }

  .mdl-travel-steps i {
    font-size: 12px;
    line-height: 1;
  }

  .stat-box {

    min-width: 72px;
  }

  .travel-progress {
    grid-column: 1/-1;
    width: 100%;
    min-width: 0;

    .mdl-cell {
      margin: 8px 0px !important;
    }

    .mdl-typography--title {
      font-size: 14px !important;
    }
  }

  .travel-progress .mdl-grid div:nth-child(1) {
    width: auto;
  }

}

/*Travel cards*/
.info-card-content .stat-box .body-medium-bold {
  padding: 8px;
  background: #EBECF4;
}

.mdl-travel-card {
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  background: #F5F5F8;
  padding: 12px;
}

/* =========================================
   Tarjeta de Viaje - Estado Éxito
   ========================================= */

/* Fondos para estado de éxito */
.travel-success-bg {
  background-color: var(--success100);
}

/* Color de texto principal para éxito */
.travel-success-text {
  color: #01784D !important;
}

/* Contenedor del mensaje de felicitación */
.travel-success-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  gap: 10px;
}

/* Texto del mensaje de felicitación */
.travel-success-message {
  color: #01784D !important;
  margin: 0;
  font-size: 14px !important;
}

/* Icono de verificación */
.travel-success-icon {
  color: #01784D;
  width: 12px;
  height: auto;
}

/* Utilidad para remover fondos en contadores/estadísticas */
.stat-box-transparent {
  background: transparent !important;
}

.mdl-travel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.mdl-travel-title {
  font-size: 18px;
  font-weight: 500;
  color: #666;
}

.mdl-travel-counter {
  font-size: 18px;
  font-weight: 700;
  color: #000;
}

.mdl-travel-steps {
  display: flex;
  align-items: center;
  /*gap:10px;*/
  justify-content: space-between;
  background: #ECECF4;
  border-radius: 8px;
  padding: 12px;
}

.mdl-travel-steps i {
  font-size: 16px;
}

.info-card-header .completed,
.info-card-content .completed {
  color: #6D3BA8;
}

.info-card-header .chip,
.info-card-content .stat-box .body-medium-bold {
  border-radius: 4px;
}

.pending {
  color: #D9D9D9 !important;
}

.pending-bg {
  background-color: #F7F6F6;
}

.info-card-header .current,
.info-card-content .current,
.avance-grid .current {
  color: #FF8A00;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.travel-progress {
  grid-column: 1/-1;
  width: 100%;
  min-width: 0;
}

/* Contenedor principal del slider */
.custom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  /* Grosor exacto al mockup */
  border-radius: 10px;
  outline: none;
  margin: 0;
  pointer-events: none;
  /* Desactiva el click si es solo de lectura */

  /* El truco de la variable: pinta morado hasta --value, y luego gris */
  background: linear-gradient(to right,
      #9333ea 0%,
      #c084fc var(--value, 0%),
      #e5e7eb var(--value, 0%),
      #e5e7eb 100%);
}

/* ---------------------------------------------------
   Diseño del "Círculo" (Thumb) para Webkit (Chrome/Safari) 
   --------------------------------------------------- */
.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  /* Fondo blanco */
  border: 2px solid #8b5cf6;
  /* Borde morado */
}

/* ---------------------------------------------------
   Diseño del "Círculo" (Thumb) para Firefox 
   --------------------------------------------------- */
.custom-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #8b5cf6;
}

/*PV CONTAINER*/
.pv-container {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

/* Móvil y tablet: 2 columnas (hasta 919px) */
@media (max-width: 919px) {
  .pv-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Si el último card está en posición impar, ocupa ambas columnas */
  .pv-container .custom-stat-box:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Desktop: 1 fila (todas en la misma línea) */
@media (min-width: 920px) {
  .pv-container {
    display: flex;
    flex-wrap: nowrap;
  }

  .custom-stat-box {
    flex: 1 1 auto;
  }

  .custom-stat-box {
    flex: 1 1 calc(25% - 12px);
  }
}

/* ============================================================
   TARJETA DE ESTADÍSTICA
   ============================================================ */

.custom-stat-box {
  background-color: #f4f5f8;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 16px 8px;

  /* Flexbox para centrar contenido */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;

  /* Asegura que el texto esté centrado */
  text-align: center;
}

/* Evita que Flexbox deforme iconos o textos */
.custom-stat-box>div,
.custom-stat-box>i {
  flex-shrink: 0;
}

/* Si hay un icono junto a otros elementos */
.custom-stat-box:has(i) {
  flex-direction: row;
}

/*PV CONTAINER FIN*/

.mi-avance-container .info-container .mdl-card .mdl-grid {
  width: 100%;
}

.mi-avance-container .info-container .mdl-card .mdl-grid .mdl-typography--body-1,
.mdl-typography--subhead {
  color: var(--neutrals800);
  font-family: "Noto Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;

  strong {
    color: #000;
    font-weight: bold;
  }
}


/*Info general*/
/* Estilo base de los contenedores (borde y espaciado según tu imagen) */
.custom-border-card {
  border: 1px solid #d1d5db;
  /* Ajusta el color exacto de tu borde */
  border-radius: 6px;
  padding: 16px;
  background-color: #ffffff;
}

/* Grids internos para ordenar el contenido */
.puntos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 columnas iguales */
  gap: 16px;
}

.avance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 columnas iguales */
  gap: 16px;
}

/* El flexbox atómico para alinear perfectamente ICONO + TEXTO */
.mi-avance-container .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  /* Ajusta a tu tipografía */
  color: #4b5563;
  /* Gris oscuro */
}

/* Estilo para el subrayado de los textos en la tarjeta izquierda */
.custom-underline {
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
  text-decoration: underline;
  text-decoration-color: #9ca3af;
  /* Subrayado gris suave */
  text-underline-offset: 3px;
  /* Separa un poco la línea del texto */
}

.custom-underline:hover {
  opacity: 0.8;
  color: var(--primary800)
    /* Ajusta este color al de tu paleta principal si lo deseas */
}

/* Responsividad: Si la pantalla es muy pequeña (móviles), pasa los ítems a 1 sola columna */
@media (max-width: 920px) {
  .avance-grid {
    grid-template-columns: 1fr;
  }
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 6px 12px;
  gap: 16px;
}

/* =========================================
   CONTENEDOR DEL MODAL Y SCROLL DETALLE MI VIAJE
   ========================================= */
.modal-vuelos-estatus {
  width: 70% !important;
  /* Forza el ancho sobre la clase .mdl-modal nativa */
  height: 70vh !important;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  /* Asegura esquinas redondeadas en tu diseño general */
  background-color: transparent !important;
}

.titulo-modal {
  color: #FFF;
  text-align: center;
  /* body-large/bold */
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

.modal-vuelos-estatus.mdl-modal {
  max-width: 50% !important;
}

@media (max-width: 768px) {
  .modal-vuelos-estatus {
    width: calc(100% - 32px) !important;
  }

  .modal-vuelos-estatus.mdl-modal {
    max-width: 100% !important;
  }
}

.modal-vuelos-estatus-content {
  flex: 1;
  overflow-y: auto;
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* =========================================
   DISEÑO DE LAS CARDS
   ========================================= */
.passenger-card.mdl-card {
  display: flex;
  flex-direction: row;
  width: 100%;
  /* Corrección de altura para evitar cortes */
  height: auto !important;
  min-height: min-content;
  flex-shrink: 0;
  /* Evita que la tarjeta se comprima en el scroll */

  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

@media (max-width: 768px) {
  .passenger-card.mdl-card {
    flex-direction: column;
  }

  .passenger-card__left,
  .passenger-card__right {
    /* En móviles regresan a ocupar el 100% de la tarjeta */
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }

  .passenger-card__right {
    padding: 24px 16px;
    /* Un padding más amigable para pantallas chicas */
  }
}

/* SECCIÓN IZQUIERDA (MORADA) */
.passenger-card__left {
  background-color: #542874;
  padding: 24px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 25%;
  max-width: 25%;
  position: relative;
  box-sizing: border-box;
  overflow: hidden
}

.passenger-card__left::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 124px;
  height: 145px;
  /* Icono del mundo simulado en SVG */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="80" r="60" fill="none" stroke="%2366308C" stroke-width="4"/><path d="M-40,80 Q20,40 80,80 M20,20 Q60,80 20,140" fill="none" stroke="%2366308C" stroke-width="4"/></svg>') no-repeat bottom left;
  background-size: cover;
  opacity: 0.6;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  z-index: 1;
}

.passenger-card__left .data-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 2;
}

.passenger-card__left .data-label {
  font-size: 12px;
  opacity: 0.8;
  font-weight: 400;
}

.passenger-card__left .data-value {
  font-size: 15px;
  font-weight: 700;
}

/* SECCIÓN DERECHA (BLANCA) */
.passenger-card__right {
  background-color: #FFFFFF;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;

  /* Forza exactamente 3/4 del ancho total */
  flex: 0 0 75%;
  max-width: 75%;

  box-sizing: border-box;
}

/* Fila 1: Ruta */
.flight-route {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.flight-route::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 20%;
  right: 20%;
  height: 35px;
  border-top: 1.5px solid #66308C;
  border-radius: 50% 50% 0 0;
}

.route-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  z-index: 2;
}

.route-point.left {
  align-items: flex-start;
}

.route-point.right {
  align-items: flex-end;
}

.route-code {
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.route-city {
  font-size: 13px;
  color: #757575;
}

.route-icon {
  color: #66308C;
  font-size: 18px;
  background: #FFFFFF;
  padding: 0 16px;
  z-index: 2;
  transform: translateY(-5px);
}

/* Fila 2: Detalles */
.flight-details {
  display: flex;
  justify-content: space-between;
}

.flight-details .data-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flight-details .data-label {
  font-size: 12px;
  color: #757575;
}

.flight-details .data-value {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.flight-details .right-align {
  align-items: flex-end;
  text-align: right;
}

/* Fila 3: Estatus Pasaporte */
.passport-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 24px;
  align-self: center;
  font-size: 13px;
  font-weight: 500;
  width: fit-content;
}

.status--approved {
  background-color: #F4F5F9;
  color: #542874;
}

.status--invalid {
  background-color: #FCE1DD;
  color: #C6250F;
}

.status--missing {
  background-color: #FFEEDB;
  color: #D67301;
}

.status-action {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
  margin-left: 4px;
}

/* Fila 4: Footer */
.card-footer {
  text-align: center;
  color: #757575;
  font-size: 12px;
  margin: 0;
}

/* =========================================
   COMPORTAMIENTO MÓVIL (Separación y Bordes)
   ========================================= */
@media (max-width: 768px) {

  .modal-vuelos-estatus {
    height: 100vh !important;

    .modal-notifications-header {
      background-color: transparent !important;
    }
  }

  /* 1. Modal Transparente */
  .modal-vuelos-estatus {
    background-color: transparent !important;
    box-shadow: none !important;
    width: calc(100% - 32px) !important;
  }

  /* Header con texto e icono blanco */
  .modal-notifications-header {
    border-bottom: none;
    padding: 0 0 16px 0;
    color: #FFFFFF;
  }

  .modal-notifications-header span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85%;
  }

  .modal-vuelos-estatus.modal-notifications-header button i {
    color: #FFFFFF !important;
  }

  /* 2. Contenedor de Tarjeta (Ahora con GAP) */
  .passenger-card.mdl-card {
    flex-direction: column;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  .passenger-card__left,
  .passenger-card__right {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    /* <-- Evita que el contenido de abajo se corte */
  }

  /* 3. Sección Morada (Superior) */
  .passenger-card__left {
    border-radius: 16px !important;
    /* <-- Bordes redondeados en TODAS las esquinas */
    padding: 24px !important;
    /* <-- Regresamos al padding normal, eliminando los 44px extra */
  }

  /* Ajuste del mundo (SVG) alineado a la derecha */
  .passenger-card__left::after {
    left: auto;
    right: -20px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    clip-path: none;
  }

  /* 4. Sección Blanca (Inferior) */
  .passenger-card__right {
    border-radius: 16px !important;
    margin-top: 0 !important;
    /* <-- Eliminamos el margin negativo (sin superposición) */
    position: relative;
    z-index: 2;
    padding: 24px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }

  /* Alineación de textos a la izquierda en móvil */
  .flight-details .right-align {
    align-items: flex-start;
    text-align: left;
  }
}

/*INSCRIPCION*/
#formInscription {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.travelers .mdl-card {
  padding: 24px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;

  #frameTravelType {
    gap: 8px;
    display: flex;
    flex-direction: column;
  }

  .form-group {
    margin-bottom: 0px;
  }

  .travelers .card-actions {
    width: 100%;
  }
}

.pasaporte-header {
  align-items: center;
  display: flex;
  flex-direction: column;
}

@media (max-width: 920px) {

  .pasaporte-header {
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pasaporte-header .body-small-medium {
    white-space: normal !important;
  }

  .travelers .mdl-card.passport {
    padding: 16px !important;
  }

  .travelers .card-actions {
    flex-direction: column;

    * {
      width: 100%;
    }
  }
}

.travelers .datos-persona {
  width: 100%;
  gap: 24px;
  display: flex;
  flex-direction: column;
}

#datosCoempresario {
  display: none;
}

.travelers .mdl-card.passport {
  border-radius: 16px;
  border-style: dashed;
  border-width: 2px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 48px;
  background-color: var(--neutrals100);
  align-items: center;

  * {
    width: fit-content;
  }

  .card-alert {
    gap: 8px !important;
    align-self: center !important;
  }
}

.travelers .puntos-grid {
  width: 100%;
}

.traveler-data {
  display: flex;
  flex-direction: column;

  * {
    text-align: start;
    width: 100%;
  }

  .mdl-textfield__label {
    width: fit-content !important;
  }
}

#lista-hijos {
  width: 100%;
  gap: 24px;
  display: flex;
  flex-direction: inherit;

  .datos-persona {
    gap: 8px;
  }
}

/*******************************************************/
.passport-state {
  display: none;
}

.passport[data-state="idle"] .passport-state--idle,
.passport[data-state="uploading"] .passport-state--uploading,
.passport[data-state="error"] .passport-state--error,
.passport[data-state="success"] .passport-state--success {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.passport-file-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.passport-file-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}

.passport-icon-action {
  cursor: pointer;
  flex-shrink: 0;
}

.passport-icon-error {
  color: var(--error, #d92d20);
}

.passport-icon-success {
  color: var(--success, #17b26a);
}

.passport-error-text {
  color: var(--error, #d92d20);
}

.passport-progress {
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: var(--neutrals200, #e4e4e7);
  overflow: hidden;
}

.passport-progress__fill {
  height: 100%;
  background: var(--primary, #6941c6);
  transition: width .15s linear;
}

.travelers .mdl-card.passport[data-dragging="true"] {
  background-color: var(--neutrals200, #e4e4e7);
  border-color: var(--primary, #6941c6);
}

.passport-file-row.mdl-card {
  min-height: fit-content;
  width: 50% !important;
  padding: 16px;
  border-radius: 12px;
  align-self: center !important;
  flex-direction: row;
  align-items: center;
}

@media(max-width: 920px) {
  .passport-file-row.mdl-card {
    width: 100% !important;
    padding: 8px;
    gap: 10px !important;
  }

  .travelers .mdl-card.passport {
    padding: 16px !important;
    min-height: fit-content;
  }

  .puntos-grid.hijo-form {
    grid-template-columns: 1fr !important;
  }

}

/* =========================================
   CONTENEDOR PRINCIPAL
   ========================================= */
.empty-state-viajes {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0px;
  text-align: center;
  width: 100%;
}

/* =========================================
   Sin viajes
   ========================================= */
.empty-state-viajes__icon i {
  font-size: 104px;
  color: var(--primary700);
}

.empty-state-viajes__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Pequeño respiro entre el título y el subtítulo */
}

.empty-state-viajes__text {
  font-size: 14px;
  line-height: 16px;

  h3 {
    font-weight: 700;
  }

  p {
    font-weight: 500;
  }
}

#new-address-modal .mdl-select:has(#stateKey),
#new-address-modal .mdl-select:has(#cityKey),
#new-address-modal .mdl-select:has(#shippingCompany) {
  padding: 16px 0px
}

.modal-card-force .color-neutral3,
#preCartTimer,
#preCartTimer .modal__head {
  color: var(--neutrals900) !important;
}

#prc-edit__preview .mdl-button.link {
  overflow: visible !important;
}

.modal-card-force .buttons-container button {
  min-width: 10rem;
}

#preCartTimer .modal__head i {
  font-size: x-large;
  color: var(--primarycolor);
}

#sendmail-info-politicas+.mdl-textfield__label {
  top: 30px !important;
}

label.is-checked i {
  color: var(--primarycolor);
}

.card a.link {
  overflow: visible;
}

#prc-edit__created>.p-2 {
  padding: 12px !important;
}

#modalCheckPersonalConsumption {
  min-height: unset;
}

#modalCheckPersonalConsumption {

  .cierre-indistinto {
    display: flex;
    padding-top: 1rem;
  }

  .postal-code__description {
    margin: 0px !important;
  }

  .changeMonth {
    font-size: x-large;
  }
}

#form-payment,
#form-payment .form-group {
  gap: 16px;
  display: grid;
}

#form-payment .switchCheck {
  width: 60px !important;
  height: 34px !important;
}

#form-payment .card__content {
  background-color: transparent;
  border: none;
}

#form-payment #contenedor_saldo_favor_opcional {
  background-color: rgba(216, 216, 216, 0.2);
}

.form-radio.card.stack:has(input[type="radio"]:checked) {
  border-color: var(--primarycolor);
  background-color: var(--primary100) !important;
}

#idSalePolicyLink {
  color: var(--primary) !important;
}

#form-payment~#payment-buttons-container {
  gap: 20px;

}


@media (max-width: 990px) {
  #form-payment~#payment-buttons-container {
    gap: 0px;
  }

  #modal-cierre-indistinto {
    padding: 16px !important;
  }
}

#div_fichas_deposito {
  margin-top: 16px;
}

#divCheckSalePolicy .checkbox-fake {
  position: absolute;
}

#divCheckSalePolicy .checkbox-label {
  margin-left: 25px !important;
}

#divCheckSalePolicy .form-group.accordion.contract_option,
#divCheckSalePolicy .contract_option {
  display: grid;
}

#modalValidation .form-label.block {
  display: block;
  text-align: initial;
  font-size: large;
}

#modalValidation div:has(#btnLinkMyInformationCloseModal) {
  justify-content: center;
  display: flex;
}

.mdl-button.secondary {
  border: 1px solid var(--primarycolor);
}

.promo-group .buttons-container .mdl-button {
  max-width: 98%;
}

.cart-product--li .cart-product--pts {
  white-space: nowrap;
}

.confirmation-page .limitCounter .form-row {
  display: block;
}

.promo-container .mdl-card {
  overflow: visible;
}

#global-search-container mark {
  background-color: var(--secondary200) !important;
  ;
}

#modalManual {
  height: fit-content;
}

#register-footer:has(#step4-buttons) {
  bottom: 5rem;
}

.cart-preview-mov {
  background-color: var(--primary700);
}

.prearmado-welcome-card button.mdl-button {
  background: var(--primary700) !important;
  font-weight: 400 !important;
  padding: 16px 24px !important;
}

.prearmado-welcome-card strong {
  color: var(--primary700) !important;
}

#saveSend-section .pre-cart__item.card {
  margin: 0;
}

#triggermodal,
#triggermodalusr,
#triggermodalManual {
  color: var(--primary)
}

.cart.fullsteps #step4 h3 {
  color: var(--primary);
}

.client-types.is-checked {
  background-color: var(--primary100) !important;
}

.client-types.is-checked .mdl-card {
  background-color: var(--primary100) !important;
}

span.color-circle.has-texture {
  background-color: var(--neutrals100);
}

#step3 .info-zipcode-container .mdl-message-box .custom-row {
  width: 100%;
}

.register-page #step2 .custom-row.flex-center.pb-1>.col-md-12:has(#id-type),
.register-page #step2 .custom-row.flex-center.pb-1>.col-md-12:has(#id_num1-field) {
  padding-bottom: 2rem !important;
}

.form-distributor-type-container {
  padding-bottom: 2rem;
}


.testimonials-sections .owl-theme .owl-nav.disabled+.owl-dots {
  display: block !important;
}

/* -----------------------------------------------------------------------------
 * 2. CHIP "Elegible kit 1000" 
 * Separa el chip del de puntos cuando ambos caen en la misma línea dentro de la tarjeta. 
 * -------------------------------------------------------------------------- */
#kit-1000-container .kit1000-eligible-chip,
#add-products-modal .kit1000-eligible-chip {
  margin-right: .25rem;
  margin-right: .25rem;
}

/* ==========================================================================
/* ==========================================================================
                  estilos de correción
 ========================================================================== */
.new-dashboard p.m-0.color-gray-darkest-3.underline.cursor_pointer {
  color: var(--primary) !important;
}

.dashboard-presenter a {
  color: var(--primary) !important;
}

b.dashboard_consultar_informacion_puntos_de_mi_organizacion {
  color: var(--primary);
}

.toggle-presenter.color_omni_light.tal.underline.cursor_pointer.pos-rel.mb-half.d-none.d-tablet-show {
  color: var(--primary);
}

.dashboard-main-content h2.primarycolor.tabs__item.ezone__title {
  min-width: auto;
}

@media (max-width: 920px) {
 .filter-package-select + .select2-container {
  width: 90% !important;
}
.card-search-tracking .mdl-message-box.warning{
   margin: 16px 0px !important;
}

  .col-xl-5:has(#xtrvgns-main-banner),
  #xtrvgns-main-banner h1.sost-banner__title {
    padding: 0px;
  }

  #xtrvgns-main-banner h1.sost-banner__title b {
    line-height: 45px;
    font-size: 40px;
    padding: 4px 12px;
  }

  .ezone__body:has(#bonuses-container) {
    padding: 0px;
  }

  #bonuses-container {
    display: flex;
    gap: 8px;
  }

  #bonuses-container {
    display: flex;
    gap: 8px;
  }

  #posibles-inactivos .ezone__section .center {
    margin: 10px 0px;
    width: 100%;
  }

  #posibles-inactivos .ezone__section .center {
    margin: 10px 0px;
    width: 100%;
  }

  #posibles-inactivos #bonuses-container .ezone__grid-img img {
    height: 8rem !important;
  }

  #posibles-inactivos #bonuses-container .ezone__grid-img img {
    height: 8rem !important;
  }

  #posibles-inactivos .ezone__grid-item {
    margin: 0px;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 24rem;
    justify-content: end;
    align-content: flex-start;
    padding-top: 24px;
  }

  #posibles-inactivos .ezone__grid-item {
    margin: 0px;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 24rem;
    justify-content: end;
    align-content: flex-start;
    padding-top: 24px;
  }

  #posibles-inactivos .ezone__grid-item__title {
    font-size: larger;
  }

  #posibles-inactivos .ezone__grid-item__title {
    font-size: larger;
  }

  .ezone__body:has(#bonuses-container) {
    padding: 0px;
  }

  .ezone__body:has(#bonuses-container) {
    padding: 0px;
  }
}

#posibles-inactivos .ezone__section .center {
  margin: 10px 0px;
  width: 100%;
  margin: 10px 0px;
  width: 100%;
}

#posibles-inactivos .ezone__grid-item__title {
  font-size: larger;
  font-size: larger;
}

.ezone__body:has(#bonuses-container) {
  padding: 0px;
  padding: 0px;
}

@media (max-width: 768px) {
  .bannerTitle .h4-medium {
    font-size: 16px;
    line-height: 24px;
  }

  .bannerTitle .h4-medium {
    font-size: 16px;
    line-height: 24px;
  }
}


#calendar-section .select2-selection__placeholder {
  top: 30% !important;
}

#thanks .success--story__message {
  text-decoration: none;
}

.success--story {
  padding-top: 0px;
}

#id-tracking~label.mdl-textfield__label {
  font-size: 14px;
  line-height: 16px;
  line-height: 16px;
}

#id-tracking~.mdl-textfield__label {
  top: 11%
}

/* FIX Carrito  */


.promo-options-scroll .promos-img.mb-half.gap-2 {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  border-top: 1px dashed #ddd;
}

.promo-options-scroll .promos-img.mb-half.gap-2:nth-child(1) {
  border: none;
  padding: 0;
}

.promo-options-scroll .promo-obl .promo-container.has-counter label.mdl-radio.outline.is-checked {
  padding-bottom: 0 !important;
}

.promo-options-scroll.col-12.custom-row .col-6 {
  flex: 1;
}

.promo-group .promo-options-scroll {
  max-height: 420px;
  overflow-y: auto;
  width: 100%;
  margin: 0;
  padding: 0;
}

.promo-options-scroll .promo-container.has-counter label.mdl-radio.outline.is-checked label.is-checked {
  padding-bottom: 0 !important;
}

.promo-options-scroll .is-checked .promo-price {
  margin-top: 0 !important;
}

.promo-options-scroll.col-12.custom-row .col-6:nth-child(odd) {
  padding-right: 4px;
}

.promo-options-scroll.col-12.custom-row .col-6:nth-child(even) {
  padding-left: 4px;
}
.payment-plan-card .switchCheck{
    width: 60px;
    height: 34px;
}
.payment-plan-card .flex-align-feCheck span {
    align-content: center;
    padding-left: 8px;
}
.payment-plan-card .radio-label{
  display: grid;
  gap: 8px;
}
    @media(max-width:768px) {
    .cart-total.hidden-xs {
      display: block !important;
    }
  }
    @media(max-width:768px) {
    .cart-total.hidden-xs {
      display: block !important;
    }
  }