@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap");/* ========================================
   LOGIN TOKENS (LIGHT DEFAULT)
======================================== */

:root {
  /* BACKGROUNDS */
  --login-left-bg: #ffffff;
  --login-right-bg: #ededed;

  /* TEXT COLORS */
  --login-text-title: #0d0d0d;
  --login-text-subtitle: #949494;
  --login-text-body: #0d0d0d;

  /* TYPOGRAPHY SCALE (Text L) */
  --text-l-size: 16px;
  --text-l-line: 24px;
  --text-l-weight: 400;

  /* TYPOGRAPHY SCALE (H3) */
  --h3-size: 32px;
  --h3-line: 34px;
  --h3-weight: 700;

  /* TREND */
  --trend-bg: rgba(0, 0, 0, 0.08);
  --trend-color: #5c5c5c;

  /* CAROUSEL */
  --login-carousel-dot-active: #5c5c5c;
}

/* ========================================
   DARK THEME
======================================== */

[data-theme='dark'] {
  --login-left-bg: #171923;
  --login-right-bg: #0d0d0d;

  --login-text-title: #ffffff;
  --login-text-subtitle: #949494;
  --login-text-body: #ffffff;

  --select-border-color: #2d3748;

  /* TREND */
  --trend-bg: rgba(255, 255, 255, 0.08);
  --trend-color: #a0a0a0;

  /* CAROUSEL */
  --login-carousel-dot-active: #a0a0a0;

  /* Input specific for dark mode from Figma */
  --login-input-bg: #2a2d3d;
}

/* ACTIONS (Side-by-side buttons) */
.login .login__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.login .register__actions {
  grid-template-columns: 1fr;
}

.login .register__terms {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--login-text-subtitle);
  margin: 0;
}

.login .register__terms::before,
.login .register__terms::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--select-border-color, #ededed);
}

.login .register__terms::before {
  margin-right: 16px;
}

.login .register__terms::after {
  margin-left: 16px;
}

.login .register__remember-invitation {
  text-align: center;
  color: var(--login-text-subtitle);
  font-size: 12px;
  line-height: 16px;
  margin: -24px 0 0 0;
}

/* ========================================
   ICONS / IMAGES
======================================== */

.login .login__logo,
.login .google__logo,
.login .microsoft__logo,
.login .login__image {
  filter: none;
}

.login .google__logo,
.login .microsoft__logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.login .login__forgot-img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

/* IMPORTANT:
   Carousel image NOT inverted (keeps real image colors)
*/
[data-theme='dark'] .login__image {
  filter: none;
}

/* ========================================
   RESET
======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background: transparent;
  color: var(--login-text-body);
  font-family: 'IBM Plex Sans', sans-serif;
}

/* ========================================
   LAYOUT
======================================== */

.login {
  width: 100%;
  height: 100dvh;

  display: grid;
  /* Proporciones exactas de Figma: 766px / 674px */
  grid-template-columns: 53.2% 46.8%;

  overflow: hidden;
  color: var(--login-text-body);
}

/* ========================================
   LEFT
======================================== */

.login .login__left {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: clamp(32px, 5vw, 120px);

  background: var(--login-left-bg);
  min-width: 0;
  max-width: 100%;
}

.login .login__content {
  width: 100%;
  max-width: 520px;

  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.login .login__logo {
  width: clamp(140px, 14vw, 220px);
  height: auto;
}

.login .login__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* TITLE (H3) */
.login h1.login__title {
  margin: 0;

  color: var(--login-text-title);

  font-family: 'IBM Plex Sans', sans-serif;

  font-size: var(--h3-size);
  font-style: normal;
  font-weight: var(--h3-weight);
  line-height: var(--h3-line);

  font-feature-settings:
    'liga' off,
    'clig' off;
}

/* SUBTITLE (Text L) */
.login p.login__subtitle {
  margin: 0;

  color: var(--login-text-subtitle);

  font-size: var(--text-l-size);
  font-style: normal;
  font-weight: var(--text-l-weight);
  line-height: var(--text-l-line);

  font-feature-settings:
    'liga' off,
    'clig' off;
}

/* FORM */
.login .login__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.login .register__password-container {
  display: grid;
  grid-template-columns: 1fr 157px;
  gap: 20px;
  align-items: stretch;
}

.login .register__password-inputs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.login .password-requirements {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  gap: 6px;
  border-radius: 4px;
  background: var(--Grey-Grey-300, #ededed);
  height: 100%;
}

[data-theme='dark'] .login .password-requirements {
  background: #2a2d3d;
}

.login .password-requirements__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transition: all 0.25s ease;
}

.login .password-requirements__icon {
  display: flex;
  align-items: center;
  margin-top: 2px;
  flex-shrink: 0;
  color: #949494;
}

[data-theme='dark'] .login .password-requirements__icon {
  color: #5c5c5c;
}

.login .password-requirements__item--met .password-requirements__icon {
  color: #14be6c;
}

.login .password-requirements__text-wrap {
  display: flex;
  flex-direction: column;
}

.login .password-requirements__text {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--login-text-body);
}

/* FORGOT PASSWORD */
.login .login__forgot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  background: transparent;
  border: none;

  padding: 0;
  margin: -8px 0 0;

  cursor: pointer;
  text-decoration: none;
}

.login .login__forgot:hover .login__forgot-text {
  text-decoration: underline;
}

.login .login__forgot-icon {
  width: 14px;
  height: 14px;
  color: var(--login-text-subtitle, #949494);
  display: block;
}

.login .login__forgot-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--login-text-subtitle, #949494);
  line-height: 19px;
  display: block;
}

/* DIVIDER */
.login .login__divider {
  display: flex;
  align-items: center;
  gap: 16px;
}

.login .login__divider span {
  flex: 1;
  height: 1px;
  background: var(--select-border-color, #ededed);
}

.login .login__divider p {
  margin: 0;
  color: var(--login-text-subtitle);
  white-space: nowrap;
}

/* REGISTER DIVIDER */
.login .register__divider {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* SOCIALS */
.login .login__socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.login .login__socials button,
.login .login__socials > *,
.login .login__socials span,
.login .login__socials p {
  white-space: nowrap !important;
  font-size: 13.5px !important;
}

.login .login__socials button,
.login .login__socials > * {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* ========================================
   RIGHT
======================================== */

.login .login__right {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: clamp(24px, 3vw, 48px);

  background: var(--login-right-bg);
}

/* CARD */
.login .login__card {
  width: 100%;
  max-width: 680px;
  height: 100%;

  display: flex;
  flex-direction: column;

  justify-content: space-between;
  align-items: center;
}

/* MAIN */
.login .login__card-main {
  flex: 1;
  width: 100%;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  gap: clamp(18px, 1.6vw, 32px);
}

/* IMAGE */
.login .login__image-wrapper {
  width: 100%;
  max-width: 560px;

  min-height: 300px;
  max-height: 340px;

  margin-bottom: 24px;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.login .login__image {
  max-width: 520px;
  max-height: 360px;

  width: auto;
  height: auto;

  object-fit: contain;
}

/* INFO */
.login .login__info {
  width: 100%;
  max-width: 560px;

  display: flex;
  flex-direction: column;
}

.login .login__eyebrow {
  margin-bottom: 4px;

  color: var(--login-text-subtitle);

  font-size: var(--text-l-size);
  font-style: normal;
  font-weight: var(--text-l-weight);
  line-height: var(--text-l-line);

  font-feature-settings:
    'liga' off,
    'clig' off;
}

.login h2.login__info-title {
  margin: 0 0 14px;
  color: var(--login-text-title);

  /* Explicitly override host h2 styles from GlobalStyle */
  font-size: var(--h3-size) !important;
  font-weight: var(--h3-weight) !important;
  line-height: var(--h3-line) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

/* LIST */
.login .login__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login .login__list li {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: var(--text-l-size);
  line-height: var(--text-l-line);
}

/* TREND */
.login .login__trend {
  width: 28px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  font-size: 14px;
  font-weight: 700;

  background: var(--trend-bg);
  color: var(--trend-color);
}

/* CAROUSEL */
.login .login__carousel {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 12px;
  padding-bottom: 8px;
}

.login .login__dot {
  width: 10px;
  height: 10px;

  border: none;
  border-radius: 999px;

  background: var(--select-border-color);
  opacity: 0.5;

  cursor: pointer;

  transition: all 0.25s ease;
}

.login .login__dot--active {
  width: 32px;
  opacity: 1;
  background: var(--login-carousel-dot-active);
}

/* ANIMATION */
.login .login__fade {
  animation: fadeSlide 0.35s ease;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1200px) {
  body {
    overflow-y: auto;
  }

  .login {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .login .login__right {
    display: none;
  }
}

/* Para móviles (hasta 767px) */
@media (max-width: 767px) {
  .login .login__left {
    padding: 24px 16px;
  }

  .login .login__content {
    gap: 24px;
  }

  .login .login__actions,
  .login .login__socials {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .login .register__password-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Evita que componentes como <Input /> o <Button /> de AntD rompan el ancho disponible */
  .login .login__form > *,
  .login .login__actions > *,
  .login .login__socials > * {
    width: 100%;
    max-width: 100%;
  }
}

/* Para móviles pequeños (393px de ancho o menos) */
@media (max-width: 393px) {
  .login .password-requirements {
    display: none !important;
  }
}


/* ===========================
   Default base varibles
=========================== */

:root {
  /* Base typography */
  --font-family: "IBM Plex Sans", sans-serif;

  /* Purple */
  --purple-400: #d688ff;

  /* Colores base */
  --color-bg: #111111;
  --color-text: #ffffff;
  --color-text-secondary: #6a1b9a;
  --color-text-disabled: #aaaaaa;

  /* Variants */
  --background-color-primary: #b34be9;

  /* Variants hover */
  --background-color-primary-hover: #57206f;
  --background-color-secondary-hover: #f1e6f7;

  /* Variants disabled */
  --background-color-primary-disabled: #dbdbdb;

  /* Variants login */
  --background-color-login: #0D0D0D;
  --background-color-login-hover: #2C2C2C;
  --background-color-login-disabled: #DBDBDB;
  --color-text-login: #FFFFFF;
  --color-text-login-disabled: #666666;

  /* Chips */
  --chip-height-sm: 14px;
  --chip-height-md: 18px;
  --chip-height-lg: 24px;
  --chip-height-xl: 30px;

  --chip-radius: 100px;
  --chip-font-size-sm: 9px;
  --chip-font-size-md: 9px;
  --chip-font-size-lg: 11px;
  --chip-font-size-xl: 14px;

  --chip-letter-spacing-sm: 1.8px;
  --chip-letter-spacing-md: 1.8px;
  --chip-letter-spacing-lg: 2.42px;
  --chip-letter-spacing-xl: 3.08px;

  --chip-font-weight: 500;
  --chip-gap: 6px;

  /* Fallback de colores de chip */
  --chip-emergency-bg: #f2f3f5;
  --chip-emergency-border: #171923;

  --chip-critical-bg: #f9a9c1;
  --chip-critical-border: #ee084d;

  --chip-high-bg: #ffc48d;
  --chip-high-border: #ff891c;

  --chip-medium-bg: #fff38d;
  --chip-medium-border: #ffe81c;

  --chip-low-bg: #ffdce9;
  --chip-low-border: #ffb9d2;

  --chip-good-bg: #cff6a9;
  --chip-good-border: #a0ec53;

  --chip-normal-bg: #89dfb5;
  --chip-normal-border: #14be6c;

  --chip-criticalSensor-bg: #9fd4ff;
  --chip-criticalSensor-border: #3fa9ff;

  --chip-active-bg: #cbd8ff;
  --chip-active-border: #264dc1;

  --chip-auto400-bg: #dbdbdb;
  --chip-auto400-border: transparent;

  --chip-auto500-bg: #ecd1fa;
  --chip-auto500-border: transparent;

  --chip-unknown-bg: #dbdbdb;
  --chip-unknown-border: #b5b5b5;

  --chip-auto-bg: #dbdbdb;
  --chip-auto-border: #b5b5b5;

  --chip-text: #0D0D0D;

  --chip-counter: #DBDBDB;

  /* Dropdown */
  --select-control-bg: #2A2D3D;
  --select-dropdown-bg: #2A2D3D;
  --select-dropdown-text: #ffffff;
  --select-border-color: #3E3659;
  --select-scrollbar-thumb: rgba(255, 255, 255, 0.35);

  /* Input */
  --input-bg: #EDEDED;
  --input-label-color: #0D0D0D;
  --input-label-disabled-color: rgba(13, 13, 13, 0.2);
  --input-text-color: #0D0D0D;
  --input-placeholder-color: #949494;
  --input-border-color: #EDEDED;
  --input-border-focus-color: #B34BE9;
  --input-border-error-color: #D0345C;
  --input-icon-color: #949494;
  --input-helper-color: #949494;
  --input-helper-disabled-color: rgba(148, 148, 148, 0.2);
  --input-error-color: #D0345C;
  --input-scrollbar-thumb: #C4C4C4;
  --input-scrollbar-track: transparent;
  --input-arrows-hover-bg: rgba(0, 0, 0, 0.08);
  --opacity-disabled: 0.2;

  /* Checkbox */
  --checkbox-border: #DBDBDB;
  --checkbox-bg: #F2F2F2;
  --checkbox-icon-color: #FEFEFE;
  --checkbox-label-color: #0D0D0D;
  --checkbox-active-bg: #B34BE9;
  --checkbox-active-border: #B34BE9;

  /* Modal */
  --modal-bg: #FAFAFA;
  --modal-overlay-bg: rgba(0, 0, 0, 0.6);
  --modal-border-color: #B5B5B5;
  --modal-border-radius: 6px;
  --modal-shadow:  0px 0px 12px 0px rgba(41, 41, 61, 0.08);
  --modal-title-color: #0D0D0D;
  --modal-subtitle-color: #949494;
  --modal-close-color: #0D0D0D;

  /* Card */
  --card-solid-bg: #fafafa;
  --card-solid-border: #f2f2f2;
  --card-outline-bg: transparent;
  --card-outline-border: #f2f2f2;
  --card-only-border-bg: transparent;
  --card-only-border-border: #d9d9d9;
  --card-title-color: #0d0d0d;

  /* Empty */
  --empty-bg: #ededed;
  --empty-text-color: #0d0d0d;
  --empty-action-color: #b34be9;
  --empty-icon-wrapper-bg: #dbdbdb;
  --empty-monom-bg: #dbdbdb;
  --empty-monom-path: #949494;

  /* Notification */
  --notification-list-bg: #FAFAFA;
  --notification-list-border: #B5B5B5;
  --notification-list-radius: 4px;
  --notification-item-bg: #F2F2F2;
  --notification-item-bg-hover: #ededed;
  --notification-title-color: #0D0D0D;
  --notification-subtitle-color: #949494;
  --notification-description-color: #949494;
  --notification-value-color: #0D0D0D;
  --notification-date-color: #949494;
  --notification-header-color: #0D0D0D;
  --notification-action-color: #B34BE9;
  --notification-empty-color: #0D0D0D;
  --notification-empty-icon-color: #0D0D0D;
  --notification-icon-color: #ffffff;

  --notification-emergency-bar: #171923;
  --notification-emergency-icon-bg: #F2F3F5;
  --notification-emergency-icon-color: #171923;

  --notification-critical-bar: #ee084d;
  --notification-critical-icon-bg: #f9a9c1;
  --notification-critical-icon-color: #0D0D0D;

  --notification-high-bar: #ff891c;
  --notification-high-icon-bg: #FFC48D;
  --notification-high-icon-color: #0D0D0D;

  --notification-medium-bar: #ffe81c;
  --notification-medium-icon-bg: #fff38d;
  --notification-medium-icon-color: #0D0D0D;

  --notification-low-bar: #ffb9d2;
  --notification-low-icon-bg: #ffdce9;
  --notification-low-icon-color: #0D0D0D;

  --notification-good-bar: #a0ec53;
  --notification-good-icon-bg: #cff6a9;
  --notification-good-icon-color: #0D0D0D;

  --notification-normal-bar: #14be6c;
  --notification-normal-icon-bg: #89dfb5;
  --notification-normal-icon-color: #0D0D0D;

  --notification-criticalSensor-bar: #3fa9ff;
  --notification-criticalSensor-icon-bg: #9fd4ff;
  --notification-criticalSensor-icon-color: #0D0D0D;

  --notification-active-bar: #264dc1;
  --notification-active-icon-bg: #cbd8ff;
  --notification-active-icon-color: #0D0D0D;

  --notification-auto400-bar: #dbdbdb;
  --notification-auto400-icon-bg: #dbdbdb;
  --notification-auto400-icon-color: #0D0D0D;

  --notification-auto500-bar: #ecd1fa;
  --notification-auto500-icon-bg: #ecd1fa;
  --notification-auto500-icon-color: #0D0D0D;

  --notification-unknown-bar: #B5B5B5;
  --notification-unknown-icon-bg: #DBDBDB;
  --notification-unknown-icon-color: #0D0D0D;

  /* Toast */
  --toast-width: 364px;
  --toast-border-radius: 8px;
  --toast-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.18);
  --toast-title-color: #0D0D0D;
  --toast-description-color: #4A4A4A;
  --toast-close-color: #4A4A4A;

  --toast-ok-bg: #EDF9F2;
  --toast-ok-border: #A0EC53;
  --toast-ok-bar: #14BE6C;

  --toast-alert-bg: #FEF0F4;
  --toast-alert-border: #F9A9C1;
  --toast-alert-bar: #EE084D;

  --toast-alert-orange-bg: #FEF7EE;
  --toast-alert-orange-border: #FFC48D;
  --toast-alert-orange-bar: #FF891C;

  --toast-info-bg: #EEF1FB;
  --toast-info-border: #CBD8FF;
  --toast-info-bar: #264DC1;

  --toast-system-bg: #F2F3F5;
  --toast-system-border: #DBDBDB;
  --toast-system-bar: #6B6B6B;

  /* GROUPING */
  --grouping-bg: #fff;
  --grouping-border-color: #DBDBDB;
  --grouping-shadow: 0px 0px 12px 0px rgba(41, 41, 61, 0.08);

  /* Pagination */
  --pagination-color: #0D0D0D;
  --pagination-hover-bg: rgba(0, 0, 0, 0.05);
  --pagination-active-bg: #B34BE9;
  --pagination-active-color: #FFFFFF;
  --pagination-disabled-opacity: 0.4;
}

/* ===========================
   Theme light
=========================== */

[data-theme="light"],
[data-theme="LIGHT"] {
  --color-bg: #111111;
  --color-text: var(--White, #fff);
  --color-text-secondary: var(--Purple-Purple-400, #d688ff);
  --color-text-disabled: var(--Grey-Grey-600, #949494);

  /* Variants */
  --background-color-primary: var(--Purple-Purple-500, #b34be9);

  /* Variants hover */
  --background-color-primary-hover: var(--Purple-Purple-700, #57206f);
  --background-color-secondary-hover: var(--Purple-Purple-200, #f9f1fd);

  /* Variants disabled */
  --background-color-primary-disabled: var(--Grey-Grey-400, #dbdbdb);

  /* Variants login */
  --background-color-login: #0D0D0D;
  --background-color-login-hover: #2C2C2C;
  --background-color-login-disabled: #DBDBDB;
  --color-text-login: #FFFFFF;
  --color-text-login-disabled: #666666;

  /* Chip Light Variants */
  --chip-emergency-bg: #F2F3F5;
  --chip-emergency-border: #171923;

  --chip-critical-bg: #F9A9C1;
  --chip-critical-border: #EE084D;

  --chip-high-bg: #FFC48D;
  --chip-high-border: #FF891C;

  --chip-medium-bg: #FFF38D;
  --chip-medium-border: #FFE81C;

  --chip-low-bg: #FFDCE9;
  --chip-low-border: #FFB9D2;

  --chip-good-bg: #CFF6A9;
  --chip-good-border: #A0EC53;

  --chip-normal-bg: #89DFB5;
  --chip-normal-border: #14BE6C;

  --chip-criticalSensor-bg: #9FD4FF;
  --chip-criticalSensor-border: #3FA9FF;

  --chip-active-bg: #CBD8FF;
  --chip-active-border: #264DC1;

  --chip-auto400-bg: #DBDBDB;
  --chip-auto500-bg: #ECD1FA;

  --chip-unknown-bg: #DBDBDB;
  --chip-unknown-border: #B5B5B5;

  --chip-auto-bg: #dbdbdb;
  --chip-auto-border: #b5b5b5;

  --chip-text: #0D0D0D;

  --chip-counter: #DBDBDB;

  /* dropdown */
  --select-dropdown-bg: #FFFFFF;
  --select-dropdown-text: #0D0D0D;
  --select-control-bg: #EDEDED;
  --select-border-color: #b5b5b5;
  --select-scrollbar-thumb: rgba(0, 0, 0, 0.35);

  /* Input Light */
  --input-bg: #EDEDED;
  --input-label-color: #0D0D0D;
  --input-label-disabled-color: rgba(13, 13, 13, 0.2);
  --input-text-color: #0D0D0D;
  --input-placeholder-color: #949494;
  --input-border-color: #EDEDED;
  --input-border-focus-color: #B34BE9;
  --input-border-error-color: #D0345C;
  --input-icon-color: #949494;
  --input-helper-color: #949494;
  --input-helper-disabled-color: rgba(148, 148, 148, 0.2);
  --input-error-color: #D0345C;
  --input-scrollbar-thumb: #C4C4C4;
  --input-scrollbar-track: transparent;
  --input-arrows-hover-bg: rgba(0, 0, 0, 0.08);
  --opacity-disabled: 0.2;

  /* Checkbox Light */
  --checkbox-border: #DBDBDB;
  --checkbox-bg: #F2F2F2;
  --checkbox-icon-color: #FEFEFE;
  --checkbox-label-color: #0D0D0D;
  --checkbox-active-bg: #B34BE9;
  --checkbox-active-border: #B34BE9;

  /* Card Light */
  --card-solid-bg: #fafafa;
  --card-solid-border: #f2f2f2;
  --card-outline-bg: transparent;
  --card-outline-border: #f2f2f2;
  --card-only-border-bg: transparent;
  --card-only-border-border: #d9d9d9;
  --card-title-color: #0d0d0d;

  /* Empty Light */
  --empty-bg: #ededed;
  --empty-text-color: #0d0d0d;
  --empty-action-color: #b34be9;
  --empty-icon-wrapper-bg: #dbdbdb;
  --empty-monom-bg: #dbdbdb;
  --empty-monom-path: #949494;

  /* Notification Light */
  --notification-list-bg: #FAFAFA;
  --notification-list-border: #B5B5B5;
  --notification-list-radius: 4px;
  --notification-item-bg: #F2F2F2;
  --notification-item-bg-hover: #ededed;
  --notification-title-color: #0D0D0D;
  --notification-subtitle-color: #949494;
  --notification-description-color: #949494;
  --notification-value-color: #0D0D0D;
  --notification-date-color: #949494;
  --notification-header-color: #0D0D0D;
  --notification-action-color: #B34BE9;
  --notification-empty-color: #0D0D0D;
  --notification-empty-icon-color: #0D0D0D;
  --notification-icon-color: #ffffff;

  --notification-emergency-bar: #171923;
  --notification-emergency-icon-bg: #F2F3F5;
  --notification-emergency-icon-color: #171923;

  --notification-critical-bar: #ee084d;
  --notification-critical-icon-bg: #f9a9c1;
  --notification-critical-icon-color: #0D0D0D;

  --notification-high-bar: #ff891c;
  --notification-high-icon-bg: #FFC48D;
  --notification-high-icon-color: #0D0D0D;

  --notification-medium-bar: #ffe81c;
  --notification-medium-icon-bg: #fff38d;
  --notification-medium-icon-color: #0D0D0D;

  --notification-low-bar: #ffb9d2;
  --notification-low-icon-bg: #ffdce9;
  --notification-low-icon-color: #0D0D0D;

  --notification-good-bar: #a0ec53;
  --notification-good-icon-bg: #cff6a9;
  --notification-good-icon-color: #0D0D0D;

  --notification-normal-bar: #14be6c;
  --notification-normal-icon-bg: #89dfb5;
  --notification-normal-icon-color: #0D0D0D;

  --notification-criticalSensor-bar: #3fa9ff;
  --notification-criticalSensor-icon-bg: #9fd4ff;
  --notification-criticalSensor-icon-color: #0D0D0D;

  --notification-active-bar: #264dc1;
  --notification-active-icon-bg: #cbd8ff;
  --notification-active-icon-color: #0D0D0D;

  --notification-auto400-bar: #dbdbdb;
  --notification-auto400-icon-bg: #dbdbdb;
  --notification-auto400-icon-color: #0D0D0D;

  --notification-auto500-bar: #ecd1fa;
  --notification-auto500-icon-bg: #ecd1fa;
  --notification-auto500-icon-color: #0D0D0D;

  --notification-unknown-bar: #B5B5B5;
  --notification-unknown-icon-bg: #DBDBDB;
  --notification-unknown-icon-color: #0D0D0D;

  /* Modal Light */
  --modal-bg: #FAFAFA;
  --modal-overlay-bg: rgba(0, 0, 0, 0.6);
  --modal-border-color: #B5B5B5;
  --modal-shadow:  0px 0px 12px 0px rgba(41, 41, 61, 0.08);
  --modal-title-color: #0D0D0D;
  --modal-subtitle-color: #949494;
  --modal-close-color: #0D0D0D;

  /* Toast Light */
  --toast-title-color: #0D0D0D;
  --toast-description-color: #4A4A4A;
  --toast-close-color: #4A4A4A;

  --toast-ok-bg: #EDF9F2;
  --toast-ok-border: #A0EC53;
  --toast-ok-bar: #14BE6C;

  --toast-alert-bg: #FEF0F4;
  --toast-alert-border: #F9A9C1;
  --toast-alert-bar: #EE084D;

  --toast-alert-orange-bg: #FEF7EE;
  --toast-alert-orange-border: #FFC48D;
  --toast-alert-orange-bar: #FF891C;

  --toast-info-bg: #EEF1FB;
  --toast-info-border: #CBD8FF;
  --toast-info-bar: #264DC1;

  --toast-system-bg: #F2F3F5;
  --toast-system-border: #DBDBDB;
  --toast-system-bar: #6B6B6B;

  /* GROUPING */
  --grouping-bg: #fff;
  --grouping-border-color: #DBDBDB;
  --grouping-shadow: 0px 0px 12px 0px rgba(41, 41, 61, 0.08);

  /* Pagination Light */
  --pagination-color: #0D0D0D;
  --pagination-hover-bg: rgba(0, 0, 0, 0.05);
  --pagination-active-bg: #B34BE9;
  --pagination-active-color: #FFFFFF;
  --pagination-disabled-opacity: 0.4;
}

/* ===========================
   Theme dark
=========================== */

[data-theme="dark"],
[data-theme="DARK"] {
  --color-bg: #111111;
  --color-text: var(--White, #fff);
  --color-text-secondary: var(--Purple-Purple-400, #d688ff);
  --color-text-disabled: var(--White, #fff);

  /* Variants */
  --background-color-primary: var(--Purple-Purple-500, #b34be9);

  /* Variants hover */
  --background-color-primary-hover: var(--Purple-Purple-700, #57206f);
  --background-color-secondary-hover: var(--DarkBlue-DarkBlue-400, #3e3659);

  /* Variants disabled */
  --background-color-primary-disabled: var(--DarkBlue-DarkBlue-400, #3e3659);

  /* Variants login */
  --background-color-login: #FFFFFF;
  --background-color-login-hover: #E6E6E6;
  --background-color-login-disabled: var(--DarkBlue-DarkBlue-400, #3e3659);
  --color-text-login: #0D0D0D;
  --color-text-login-disabled: #858585;

  /* Chip Dark Variants */
  --chip-emergency-bg: #363636;
  --chip-emergency-border: #EBECF0;

  --chip-critical-bg: #821138;
  --chip-critical-border: #EE084D;

  --chip-high-bg: #8B5120;
  --chip-high-border: #FF891C;

  --chip-medium-bg: #837713;
  --chip-medium-border: #FFE81C;

  --chip-low-bg: #83606E;
  --chip-low-border: #FFB9D2;

  --chip-good-bg: #53792F;
  --chip-good-border: #A0EC53;

  --chip-normal-bg: #166C48;
  --chip-normal-border: #14BE6C;

  --chip-criticalSensor-bg: #235885;
  --chip-criticalSensor-border: #3FA9FF;

  --chip-active-bg: #1F3372;
  --chip-active-border: #264DC1;

  --chip-auto400-bg: #3E3659;
  --chip-auto500-bg: #35394E;

  --chip-unknown-bg: #858585;
  --chip-unknown-border: #DBDBDB;

  --chip-auto-bg: #858585;
  --chip-auto-border: #DBDBDB;

  --chip-text: #FFFFFF;

  --chip-counter: #35394E;

   /* dropdown */
  --select-dropdown-bg: #111111;
  --select-dropdown-text: #FFFFFF;
  --select-control-bg: #2A2D3D;
  --select-border-color: #3E3659;
  --select-scrollbar-thumb: rgba(255, 255, 255, 0.35);

  /* Input Dark */
  --input-bg: #2A2D3D;
  --input-label-color: #FFFFFF;
  --input-label-disabled-color: rgba(255, 255, 255, 0.2);
  --input-text-color: #FFFFFF;
  --input-placeholder-color: #949494;
  --input-border-color: #2A2D3D;
  --input-border-focus-color: #D688FF;
  --input-border-error-color: #D0345C;
  --input-icon-color: #949494;
  --input-helper-color: #949494;
  --input-helper-disabled-color: rgba(148, 148, 148, 0.2);
  --input-error-color: #D0345C;
  --input-scrollbar-thumb: #4A506B;
  --input-scrollbar-track: transparent;
  --input-arrows-hover-bg: #1E2030;
  --opacity-disabled: 0.2;

  /* Checkbox Dark */
  --checkbox-border: #DBDBDB;
  --checkbox-bg: #2A2D3D;
  --checkbox-icon-color: #FFFFFF;
  --checkbox-label-color: #FFFFFF;
  --checkbox-active-bg:#D688FF;
  --checkbox-active-border:#D688FF;

  /* Card Dark */
  --card-solid-bg: #1a1d2e;
  --card-solid-border: #2a2d3d;
  --card-outline-bg: transparent;
  --card-outline-border: #2a2d3d;
  --card-only-border-bg: transparent;
  --card-only-border-border: #3e3659;
  --card-title-color: #ffffff;

  /* Empty Dark */
  --empty-bg: #1e2130;
  --empty-text-color: #ffffff;
  --empty-action-color: #d688ff;
  --empty-icon-wrapper-bg: #2a2d3d;
  --empty-monom-bg: #2a2d3d;
  --empty-monom-path: #ffffff;

  /* Notification Dark */
  --notification-list-bg: #171923;
  --notification-list-border: #3E3659;
  --notification-item-bg: #212330;
  --notification-item-bg-hover: #2A2D3D;
  --notification-title-color: #ffffff;
  --notification-subtitle-color: #949494;
  --notification-description-color: #949494;
  --notification-value-color: #ffffff;
  --notification-date-color: #949494;
  --notification-header-color: #ffffff;
  --notification-action-color: #D688FF;
  --notification-empty-color: #FEFEFE;
  --notification-empty-icon-color: #FEFEFE;
  --notification-icon-color: #ffffff;

  --notification-emergency-bar: #F2F3F5;
  --notification-emergency-icon-bg: #363636;
  --notification-emergency-icon-color: #fff;
  --notification-emergency-icon-border: #F2F3F5;

  --notification-critical-bar: #EE084D;
  --notification-critical-icon-bg: #821138;
  --notification-critical-icon-color: #fff;

  --notification-normal-bar: #14BE6C;
  --notification-normal-icon-bg: #166C48;
  --notification-normal-icon-color: #fff;

  --notification-high-bar: #FF891C;
  --notification-high-icon-bg: #8B5120;
  --notification-high-icon-color: #fff;

  --notification-medium-bar: #FFE81C;
  --notification-medium-icon-bg: #837713;
  --notification-medium-icon-color: #fff;

  --notification-low-bar: #FFB9D2;
  --notification-low-icon-bg: #83606E;
  --notification-low-icon-color: #fff;

  --notification-good-bar: #A0EC53;
  --notification-good-icon-bg: #53792F;
  --notification-good-icon-color: #fff;

  --notification-criticalSensor-bar: #3FA9FF;
  --notification-criticalSensor-icon-bg: #235885;
  --notification-criticalSensor-icon-color: #fff;

  --notification-active-bar: #264DC1;
  --notification-active-icon-bg: #1F3372;
  --notification-active-icon-color: #fff;

  --notification-auto400-bar: #35394E;
  --notification-auto400-icon-bg: #35394E;
  --notification-auto400-icon-color: #fff;

  --notification-auto500-bar: #3E3659;
  --notification-auto500-icon-bg: #3E3659;
  --notification-auto500-icon-color: #fff;

  --notification-unknown-bar: #DBDBDB;
  --notification-unknown-icon-bg: #858585;
  --notification-unknown-icon-color: #fff;

  /* Modal Dark */
  --modal-bg: #171923;
  --modal-overlay-bg: rgba(0, 0, 0, 0.6);
  --modal-border-color: #3E3659;
  --modal-shadow: 0px 6px 50px 0px rgba(0, 0, 0, 0.2);
  --modal-title-color: #FFFFFF;
  --modal-subtitle-color: #949494;
  --modal-close-color: #ffffff;

  /* Toast Dark */
  --toast-title-color: #FFFFFF;
  --toast-description-color: #B5B5B5;
  --toast-close-color: #B5B5B5;

  --toast-ok-bg: #112318;
  --toast-ok-border: #166C48;
  --toast-ok-bar: #14BE6C;

  --toast-alert-bg: #260C12;
  --toast-alert-border: #821138;
  --toast-alert-bar: #EE084D;

  --toast-alert-orange-bg: #231508;
  --toast-alert-orange-border: #8B5120;
  --toast-alert-orange-bar: #FF891C;

  --toast-info-bg: #0D1220;
  --toast-info-border: #1F3372;
  --toast-info-bar: #264DC1;

  --toast-system-bg: #1E2130;
  --toast-system-border: #3E3659;
  --toast-system-bar: #949494;

  /* GROUPING */
  --grouping-bg: #171923;
  --grouping-border-color: #3E3659;
  --grouping-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.4);

  /* Pagination Dark */
  --pagination-color: #FFFFFF;
  --pagination-hover-bg: rgba(255, 255, 255, 0.08);
  --pagination-active-bg: #B34BE9;
  --pagination-active-color: #FFFFFF;
  --pagination-disabled-opacity: 0.4;
}
/*$vite$:1*/