html,
body {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

html {
  font-size: var(--default-text-size) !important;
  font-family: var(--font-family) !important;
  font-weight: var(--normal-text-weight) !important;
  line-height: var(--normal-line-height) !important;
  letter-spacing: var(--letter-spacing) !important;
  color: var(--neutral-600) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-tap-highlight-color: transparent !important;
}

body {
  font-size: var(--size-sm) !important;
}

.main-layout {
  max-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 60px 1fr;
  gap: 0px 0px;
  grid-template-areas:
    'logo top-nav'
    'left-nav content';
}

.main-layout-logo {
  display: flex;
  justify-content: start;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #f2f4f7;
  padding: 0 30px;
}

.main-layout-logo img {
  width: 150px;
}

.main-layout-left {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-right: 1px solid #f2f4f7;
  align-items: stretch;
  height: 100vh;
}

.main-layout-topnav {
  background: #ffffff;
  border-bottom: 1px solid #f2f4f7;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
  height: 100%;
}

.design4-nav {
  padding: 12px;
}

.design4-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  margin-bottom: 0;
}

.design4-nav ul li {
  width: 100%;
}

.design4-nav ul li.active {
  border-radius: 12px;
  background: var(--color-primary-25);
}

.design4-topnav ul li.active {
  border-radius: 12px;
  background: var(--color-primary-25);
}

.design4-nav ul li.active.menu-item,
.design4-nav ul li.active.menu-item span {
  color: var(--color-primary-500);
  font-weight: var(--semibold-weight);
}

.design4-topnav ul li.active.menu-item,
.design4-topnav ul li.active.menu-item span {
  color: var(--color-primary-500);
  font-weight: var(--semibold-weight);
}

.design4-nav ul.sub-menu-1 {
  margin-left: 30px;
  position: relative;
  display: none;
}

.design4-nav li.open ul.sub-menu-1 {
  display: flex;
}

.design4-nav li.open.menu-item.menu-dropdown > span::after {
  background-image: url(/public/icons/arrow-up-1.svg);
}

.design4-nav li.menu-item {
  line-height: 1.7rem;
  color: var(--color-neutral-500);
  align-items: center;
  border-radius: 12px;
}

.design4-nav li a,
.design4-nav li span.text-sm {
  color: var(--color-neutral-500);
  width: 100%;
  height: 100%;
  display: block;
  padding: 16px;
  display: flex;
  align-items: center;
}

.main-layout-content {
  padding: 25px !important;
  box-sizing: content-box;
  overflow-y: auto;
  margin-bottom: 67px;
  gap: 16px;
}

.design4-topnav li {
  font-size: 1.1rem;
  color: var(--color-neutral-500);
  border-radius: 12px;
  position: relative;
}

.design4-topnav li a {
  color: var(--color-neutral-500);
}

.design4-topnav ul {
  list-style: none;
  display: flex;
  flex-direction: row-reverse;
  padding: 0;
  margin: 0;
  gap: 16px;
}

.design4-nav li svg,
.design4-topnav li svg {
  padding-right: 12px;
}

.design4-topnav li svg {
  height: 20px;
}

.design4-nav li svg {
  height: 24px;
}

.menu-item.menu-dropdown > span::after {
  content: '';
  display: inline-block;
  margin-left: auto;
}

.design4-nav .menu-item.menu-dropdown > span::after {
  content: ' ';
  display: inline-block;
  background-size: 20px 20px;
  height: 20px;
  width: 20px;
  background-image: url(/public/icons/arrow-down.svg);
  background-repeat: no-repeat;
  margin-left: auto;
}

.design4-topnav li.open ul.sub-menu-1 {
  display: flex;
}

.design4-topnav ul.sub-menu-1 {
  display: none;
  background-color: white;
  z-index: 999999;
  position: absolute;
  flex-direction: column;
  padding: 12px 0;
  right: 0;
  top: calc(100% + 12px);
  min-width: 170px;
  gap: 6px;
}

.design4-topnav .sub-menu-1 li {
  padding: 6px 12px;
}

.design4-topnav .menu-item {
  font-size: 1.1rem;
  color: var(--color-neutral-500);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 7px;
}

.design4-nav li a:hover,
.design4-nav li a:active {
  text-decoration: none;
}

.design4-topnav li a:hover,
.design4-topnav li a:active {
  text-decoration: none;
}

.menu-item.menu-dropdown {
  cursor: pointer;
}

.design4-topnav .profile_top_nav {
  border-radius: 12px;
  outline: 1px solid #eaecf0;
}

.main-layout-topnav {
  grid-area: top-nav;
}

.main-layout-content {
  grid-area: content;
}

.main-layout-logo {
  grid-area: logo;
}

.main-layout-left {
  grid-area: left-nav;
}

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-neutral-900: #101828;
  --color-neutral-800: #1d2939;
  --color-neutral-700: #344054;
  --color-neutral-600: #475467;
  --color-neutral-500: #667085;
  --color-neutral-400: #98a2b3;
  --color-neutral-300: #d0d5dd;
  --color-neutral-200: #eaecf0;
  --color-neutral-100: #f2f4f7;
  --color-neutral-50: #f9fafb;
  --color-neutral-25: #fcfcfd;
  --color-primary-900: #194185;
  --color-primary-800: #1849a9;
  --color-primary-700: #175cd3;
  --color-primary-600: #1570ef;
  --color-primary-500: #2e90fa;
  --color-primary-400: #53b1fd;
  --color-primary-300: #84caff;
  --color-primary-200: #b2ddff;
  --color-primary-100: #d1e9ff;
  --color-primary-50: #eff8ff;
  --color-primary-25: #f5faff;
  --color-secondary-900: #055d5c;
  --color-secondary-800: #077a78;
  --color-secondary-700: #099e9b;
  --color-secondary-600: #0ccac6;
  --color-secondary-500: #0ddeda;
  --color-secondary-400: #3de5e1;
  --color-secondary-300: #5de9e6;
  --color-secondary-200: #90f0ee;
  --color-secondary-100: #b4f5f4;
  --color-secondary-50: #e7fcfb;
  --color-success-900: #054f31;
  --color-success-800: #05603a;
  --color-success-700: #027a48;
  --color-success-600: #039855;
  --color-success-500: #12b76a;
  --color-success-400: #32d583;
  --color-success-300: #6ce9a6;
  --color-success-200: #a6f4c5;
  --color-success-100: #d1fadf;
  --color-success-50: #ecfdf3;
  --color-success-25: #f6fef9;
  --color-warning-900: #7a2e0e;
  --color-warning-800: #93370d;
  --color-warning-700: #b54708;
  --color-warning-600: #dc6803;
  --color-warning-500: #f79009;
  --color-warning-400: #fdb022;
  --color-warning-300: #fec84b;
  --color-warning-200: #fedf89;
  --color-warning-100: #fef0c7;
  --color-warning-50: #fffaeb;
  --color-warning-25: #fffcf5;
  --color-error-900: #7a271a;
  --color-error-800: #912018;
  --color-error-700: #b42318;
  --color-error-600: #d92d20;
  --color-error-500: #f04438;
  --color-error-400: #f97066;
  --color-error-300: #fda29b;
  --color-error-200: #fecdca;
  --color-error-100: #fee4e2;
  --color-error-50: #fef3f2;
  --color-error-25: #fffbfa;
  --color-tertiary-900: #3e1c96;
  --color-tertiary-800: #4a1fb8;
  --color-tertiary-700: #5925dc;
  --color-tertiary-600: #6938ef;
  --color-tertiary-500: #7a5af8;
  --color-tertiary-400: #9b8afb;
  --color-tertiary-300: #bdb4fe;
  --color-tertiary-200: #d9d6fe;
  --color-tertiary-100: #ebe9fe;
  --color-tertiary-50: #f4f3ff;
  --color-tertiary-25: #fafaff;
  --color-quaternary-900: #6f1877;
  --color-quaternary-800: #821890;
  --color-quaternary-700: #9f1ab1;
  --color-quaternary-600: #ba24d5;
  --color-quaternary-500: #d444f1;
  --color-quaternary-400: #e478fa;
  --color-quaternary-300: #eeaafd;
  --color-quaternary-200: #f6d0fe;
  --color-quaternary-100: #fbe8ff;
  --color-quaternary-50: #fdf4ff;
  --color-quaternary-25: #fefaff;

  --font-family: 'Google Sans Flex', sans-serif;
  --default-text-size: 16px;

  --letter-spacing: 0%;
  --letter-spacing-condensed: -2%;

  --normal-text-weight: 400;
  --medium-text-weight: 500;
  --semibold-weight: 600;
  --bold-text-weight: 700;

  --line-height: 16px;
  --size-xxs: 0.625rem;

  --size-xs: 0.75rem;
  --size-xs-line-height: 18px;

  --size-sm: 0.875rem;
  --size-sm-line-height: 20px;

  --paragraph-spacing-1: 12px;
  --paragraph-spacing-2: 14px;
  --paragraph-spacing-3: 16px;
  --paragraph-spacing-4: 18px;
  --paragraph-spacing-5: 20px;
  --paragraph-spacing-6: 24px;
  --paragraph-spacing-7: 30px;
  --paragraph-spacing-8: 32px;
  --paragraph-spacing-9: 36px;
  --paragraph-spacing-10: 38px;
  --paragraph-spacing-11: 48px;
  --paragraph-spacing-12: 60px;
  --paragraph-spacing-13: 72px;

  --size-md: 1rem;
  --size-md-line-height: 24px;

  --size-lg: 1.125rem;
  --size-lg-line-height: 28px;

  --size-xl: 1.25rem;
  --size-xl-line-height: 30px;

  --display-size-xs: 1.5rem;
  --display-size-xs-line-height: 32px;
  --display-size-xs-line-height-large: 36px;

  --display-size-sm: 1.875rem;
  --display-size-sm-line-height: 38px;
  --display-size-sm-line-height-large: 44px;

  --display-size-md: 2.25rem;
  --display-size-md-line-height: 44px;
  --display-size-md-line-height-large: 44px;

  --display-size-lg: 3rem;
  --display-size-lg-line-height: 60px;
  --display-size-lg-line-height-large: 60px;

  --display-size-xl: 3.75rem;
  --display-size-xl-line-height: 72px;
  --display-size-xl-line-height-large: 72px;

  --display-size-2xl: 4.5rem;
  --display-size-2xl-line-height: 90px;
  --display-size-2xl-line-height-large: 90px;
}

.design4 .bold {
  font-weight: var(--bold-text-weight);
}

.design4 .semibold {
  font-weight: var(--semibold-weight);
}

.design4 .medium {
  font-weight: var(--medium-text-weight);
}

.design4 .normal {
  font-weight: var(--normal-text-weight);
}

.design4 .italic {
  font-style: italic;
}

.design4 .underlined {
  text-decoration: underline;
}

.design4 .text-xxs {
  font-size: var(--size-xxs);
  line-height: var(--size-xs-line-height);
}

.design4 .text-xs {
  font-size: var(--size-xs);
  line-height: var(--size-xs-line-height);
}

.design4 .text-sm {
  font-size: var(--size-sm);
  line-height: var(--size-xs-line-height);
}

.design4 .text-md {
  font-size: var(--size-md);
  line-height: var(--size-md-line-height);
}

.design4 .text-lg {
  font-size: var(--size-lg);
  line-height: var(--size-lg-line-height);
}

.design4 .text-xl {
  font-size: var(--size-xl);
  line-height: var(--size-xl-line-height);
}

.design4 .display-xs {
  font-size: var(--display-size-xs);
  line-height: var(--display-size-xs-line-height);
}

.design4 .display-xs.italic {
  line-height: var(--display-size-xs-line-height-large);
}

.design4 .display-sm {
  font-size: var(--display-size-sm);
  line-height: var(--display-size-sm-line-height);
}

.design4 .display-sm.italic {
  line-height: var(--display-size-sm-line-height-large);
}

.design4 .display-md {
  font-size: var(--display-size-md);
  line-height: var(--display-size-md-line-height);
  letter-spacing: var(--letter-spacing-condensed);
}

.design4 .display-md.italic {
  line-height: var(--display-size-md-line-height-large);
}

.design4 .display-lg {
  font-size: var(--display-size-lg);
  line-height: var(--display-size-lg-line-height);
  letter-spacing: var(--letter-spacing-condensed);
}

.design4 .display-lg.italic {
  line-height: var(--display-size-lg-line-height-large);
}

.design4 .display-xl {
  font-size: var(--display-size-xl);
  line-height: var(--display-size-xl-line-height);
  letter-spacing: var(--letter-spacing-condensed);
}

.design4 .display-2xl {
  font-size: var(--display-size-2xl);
  line-height: var(--display-size-2xl-line-height);
  letter-spacing: var(--letter-spacing-condensed);
}

.design4 .text-black {
  color: var(--color-black);
}

.design4 .text-white {
  color: var(--color-white);
}

.design4 .text-neutral-900 {
  color: var(--color-neutral-900);
}

.design4 .text-neutral-800 {
  color: var(--color-neutral-800);
}

.design4 .text-neutral-700 {
  color: var(--color-neutral-700);
}

.design4 .text-neutral-600 {
  color: var(--color-neutral-600);
}

.design4 .text-neutral-500 {
  color: var(--color-neutral-500);
}

.design4 .text-neutral-400 {
  color: var(--color-neutral-400);
}

.design4 .text-neutral-300 {
  color: var(--color-neutral-300);
}

.design4 .text-neutral-200 {
  color: var(--color-neutral-200);
}

.design4 .text-neutral-100 {
  color: var(--color-neutral-100);
}

.design4 .text-neutral-50 {
  color: var(--color-neutral-50);
}

.design4 .text-neutral-25 {
  color: var(--color-neutral-25);
}

.design4 .text-primary-900 {
  color: var(--color-primary-900);
}

.design4 .text-primary-800 {
  color: var(--color-primary-800);
}

.design4 .text-primary-700 {
  color: var(--color-primary-700);
}

.design4 .text-primary-600 {
  color: var(--color-primary-600);
}

.design4 .text-primary-500 {
  color: var(--color-primary-500);
}

.design4 .text-primary-400 {
  color: var(--color-primary-400);
}

.design4 .text-primary-300 {
  color: var(--color-primary-300);
}

.design4 .text-primary-200 {
  color: var(--color-primary-200);
}

.design4 .text-primary-100 {
  color: var(--color-primary-100);
}

.design4 .text-primary-50 {
  color: var(--color-primary-50);
}

.design4 .text-primary-25 {
  color: var(--color-primary-25);
}

.design4 .text-secondary-900 {
  color: var(--color-secondary-900);
}

.design4 .text-secondary-800 {
  color: var(--color-secondary-800);
}

.design4 .text-secondary-700 {
  color: var(--color-secondary-700);
}

.design4 .text-secondary-600 {
  color: var(--color-secondary-600);
}

.design4 .text-secondary-500 {
  color: var(--color-secondary-500);
}

.design4 .text-secondary-400 {
  color: var(--color-secondary-400);
}

.design4 .text-secondary-300 {
  color: var(--color-secondary-300);
}

.design4 .text-secondary-200 {
  color: var(--color-secondary-200);
}

.design4 .text-secondary-100 {
  color: var(--color-secondary-100);
}

.design4 .text-secondary-50 {
  color: var(--color-secondary-50);
}

.design4 .text-tertiary-900 {
  color: var(--color-tertiary-900);
}

.design4 .text-tertiary-800 {
  color: var(--color-tertiary-800);
}

.design4 .text-tertiary-700 {
  color: var(--color-tertiary-700);
}

.design4 .text-tertiary-600 {
  color: var(--color-tertiary-600);
}

.design4 .text-tertiary-500 {
  color: var(--color-tertiary-500);
}

.design4 .text-tertiary-400 {
  color: var(--color-tertiary-400);
}

.design4 .text-tertiary-300 {
  color: var(--color-tertiary-300);
}

.design4 .text-tertiary-200 {
  color: var(--color-tertiary-200);
}

.design4 .text-tertiary-100 {
  color: var(--color-tertiary-100);
}

.design4 .text-tertiary-50 {
  color: var(--color-tertiary-50);
}

.design4 .text-success-900 {
  color: var(--color-success-900);
}

.design4 .text-success-800 {
  color: var(--color-success-800);
}

.design4 .text-success-700 {
  color: var(--color-success-700);
}

.design4 .text-success-600 {
  color: var(--color-success-600);
}

.design4 .text-success-500 {
  color: var(--color-success-500);
}

.design4 .text-success-400 {
  color: var(--color-success-400);
}

.design4 .text-success-300 {
  color: var(--color-success-300);
}

.design4 .text-success-200 {
  color: var(--color-success-200);
}

.design4 .text-success-100 {
  color: var(--color-success-100);
}

.design4 .text-success-50 {
  color: var(--color-success-50);
}

.design4 .text-success-25 {
  color: var(--color-success-25);
}

.design4 .text-warning-900 {
  color: var(--color-warning-900);
}

.design4 .text-warning-800 {
  color: var(--color-warning-800);
}

.design4 .text-warning-700 {
  color: var(--color-warning-700);
}

.design4 .text-warning-600 {
  color: var(--color-warning-600);
}

.design4 .text-warning-500 {
  color: var(--color-warning-500);
}

.design4 .text-warning-400 {
  color: var(--color-warning-400);
}

.design4 .text-warning-300 {
  color: var(--color-warning-300);
}

.design4 .text-warning-200 {
  color: var(--color-warning-200);
}

.design4 .text-warning-100 {
  color: var(--color-warning-100);
}

.design4 .text-warning-50 {
  color: var(--color-warning-50);
}

.design4 .text-warning-25 {
  color: var(--color-warning-25);
}

.design4 .text-error-900 {
  color: var(--color-error-900);
}

.design4 .text-error-800 {
  color: var(--color-error-800);
}

.design4 .text-error-700 {
  color: var(--color-error-700);
}

.design4 .text-error-600 {
  color: var(--color-error-600);
}

.design4 .text-error-500 {
  color: var(--color-error-500);
}

.design4 .text-error-400 {
  color: var(--color-error-400);
}

.design4 .text-error-300 {
  color: var(--color-error-300);
}

.design4 .text-error-200 {
  color: var(--color-error-200);
}

.design4 .text-error-100 {
  color: var(--color-error-100);
}

.design4 .text-error-50 {
  color: var(--color-error-50);
}

.design4 .text-error-25 {
  color: var(--color-error-25);
}

.design4 .text-quaternary-900 {
  color: var(--color-quaternary-900);
}

.design4 .text-quaternary-800 {
  color: var(--color-quaternary-800);
}

.design4 .text-quaternary-700 {
  color: var(--color-quaternary-700);
}

.design4 .text-quaternary-600 {
  color: var(--color-quaternary-600);
}

.design4 .text-quaternary-500 {
  color: var(--color-quaternary-500);
}

.design4 .text-quaternary-400 {
  color: var(--color-quaternary-400);
}

.design4 .text-quaternary-300 {
  color: var(--color-quaternary-300);
}

.design4 .text-quaternary-200 {
  color: var(--color-quaternary-200);
}

.design4 .text-quaternary-100 {
  color: var(--color-quaternary-100);
}

.design4 .text-quaternary-50 {
  color: var(--color-quaternary-50);
}

.design4 .text-quaternary-25 {
  color: var(--color-quaternary-25);
}

.design4 .bg-transparent {
  background-color: transparent;
}

.design4 .bg-black {
  background-color: var(--color-black);
}

.design4 .bg-white {
  background-color: var(--color-white);
}

.design4 .bg-neutral-900 {
  background-color: var(--color-neutral-900);
}

.design4 .bg-neutral-800 {
  background-color: var(--color-neutral-800);
}

.design4 .bg-neutral-700 {
  background-color: var(--color-neutral-700);
}

.design4 .bg-neutral-600 {
  background-color: var(--color-neutral-600);
}

.design4 .bg-neutral-500 {
  background-color: var(--color-neutral-500);
}

.design4 .bg-neutral-400 {
  background-color: var(--color-neutral-400);
}

.design4 .bg-neutral-300 {
  background-color: var(--color-neutral-300);
}

.design4 .bg-neutral-200 {
  background-color: var(--color-neutral-200);
}

.design4 .bg-neutral-100 {
  background-color: var(--color-neutral-100);
}

.design4 .bg-neutral-50 {
  background-color: var(--color-neutral-50);
}

.design4 .bg-neutral-25 {
  background-color: var(--color-neutral-25);
}

.design4 .bg-primary-900 {
  background-color: var(--color-primary-900);
}

.design4 .bg-primary-800 {
  background-color: var(--color-primary-800);
}

.design4 .bg-primary-700 {
  background-color: var(--color-primary-700);
}

.design4 .bg-primary-600 {
  background-color: var(--color-primary-600);
}

.design4 .bg-primary-500 {
  background-color: var(--color-primary-500);
}

.design4 .bg-primary-400 {
  background-color: var(--color-primary-400);
}

.design4 .bg-primary-300 {
  background-color: var(--color-primary-300);
}

.design4 .bg-primary-200 {
  background-color: var(--color-primary-200);
}

.design4 .bg-primary-100 {
  background-color: var(--color-primary-100);
}

.design4 .bg-primary-50 {
  background-color: var(--color-primary-50);
}

.design4 .bg-primary-25 {
  background-color: var(--color-primary-25);
}

.design4 .bg-secondary-900 {
  background-color: var(--color-secondary-900);
}

.design4 .bg-secondary-800 {
  background-color: var(--color-secondary-800);
}

.design4 .bg-secondary-700 {
  background-color: var(--color-secondary-700);
}

.design4 .bg-secondary-600 {
  background-color: var(--color-secondary-600);
}

.design4 .bg-secondary-500 {
  background-color: var(--color-secondary-500);
}

.design4 .bg-secondary-400 {
  background-color: var(--color-secondary-400);
}

.design4 .bg-secondary-300 {
  background-color: var(--color-secondary-300);
}

.design4 .bg-secondary-200 {
  background-color: var(--color-secondary-200);
}

.design4 .bg-secondary-100 {
  background-color: var(--color-secondary-100);
}

.design4 .bg-secondary-50 {
  background-color: var(--color-secondary-50);
}

.design4 .bg-tertiary-900 {
  background-color: var(--color-tertiary-900);
}

.design4 .bg-tertiary-800 {
  background-color: var(--color-tertiary-800);
}

.design4 .bg-tertiary-700 {
  background-color: var(--color-tertiary-700);
}

.design4 .bg-tertiary-600 {
  background-color: var(--color-tertiary-600);
}

.design4 .bg-tertiary-500 {
  background-color: var(--color-tertiary-500);
}

.design4 .bg-tertiary-400 {
  background-color: var(--color-tertiary-400);
}

.design4 .bg-tertiary-300 {
  background-color: var(--color-tertiary-300);
}

.design4 .bg-tertiary-200 {
  background-color: var(--color-tertiary-200);
}

.design4 .bg-tertiary-100 {
  background-color: var(--color-tertiary-100);
}

.design4 .bg-tertiary-50 {
  background-color: var(--color-tertiary-50);
}

.design4 .bg-success-900 {
  background-color: var(--color-success-900);
}

.design4 .bg-success-800 {
  background-color: var(--color-success-800);
}

.design4 .bg-success-700 {
  background-color: var(--color-success-700);
}

.design4 .bg-success-600 {
  background-color: var(--color-success-600);
}

.design4 .bg-success-500 {
  background-color: var(--color-success-500);
}

.design4 .bg-success-400 {
  background-color: var(--color-success-400);
}

.design4 .bg-success-300 {
  background-color: var(--color-success-300);
}

.design4 .bg-success-200 {
  background-color: var(--color-success-200);
}

.design4 .bg-success-100 {
  background-color: var(--color-success-100);
}

.design4 .bg-success-50 {
  background-color: var(--color-success-50);
}

.design4 .bg-success-25 {
  background-color: var(--color-success-25);
}

.design4 .bg-warning-900 {
  background-color: var(--color-warning-900);
}

.design4 .bg-warning-800 {
  background-color: var(--color-warning-800);
}

.design4 .bg-warning-700 {
  background-color: var(--color-warning-700);
}

.design4 .bg-warning-600 {
  background-color: var(--color-warning-600);
}

.design4 .bg-warning-500 {
  background-color: var(--color-warning-500);
}

.design4 .bg-warning-400 {
  background-color: var(--color-warning-400);
}

.design4 .bg-warning-300 {
  background-color: var(--color-warning-300);
}

.design4 .bg-warning-200 {
  background-color: var(--color-warning-200);
}

.design4 .bg-warning-100 {
  background-color: var(--color-warning-100);
}

.design4 .bg-warning-50 {
  background-color: var(--color-warning-50);
}

.design4 .bg-warning-25 {
  background-color: var(--color-warning-25);
}

.design4 .bg-error-900 {
  background-color: var(--color-error-900);
}

.design4 .bg-error-800 {
  background-color: var(--color-error-800);
}

.design4 .bg-error-700 {
  background-color: var(--color-error-700);
}

.design4 .bg-error-600 {
  background-color: var(--color-error-600);
}

.design4 .bg-error-500 {
  background-color: var(--color-error-500);
}

.design4 .bg-error-400 {
  background-color: var(--color-error-400);
}

.design4 .bg-error-300 {
  background-color: var(--color-error-300);
}

.design4 .bg-error-200 {
  background-color: var(--color-error-200);
}

.design4 .bg-error-100 {
  background-color: var(--color-error-100);
}

.design4 .bg-error-50 {
  background-color: var(--color-error-50);
}

.design4 .bg-error-25 {
  background-color: var(--color-error-25);
}

.design4 .bg-quaternary-900 {
  background-color: var(--color-quaternary-900);
}

.design4 .bg-quaternary-800 {
  background-color: var(--color-quaternary-800);
}

.design4 .bg-quaternary-700 {
  background-color: var(--color-quaternary-700);
}

.design4 .bg-quaternary-600 {
  background-color: var(--color-quaternary-600);
}

.design4 .bg-quaternary-500 {
  background-color: var(--color-quaternary-500);
}

.design4 .bg-quaternary-400 {
  background-color: var(--color-quaternary-400);
}

.design4 .bg-quaternary-300 {
  background-color: var(--color-quaternary-300);
}

.design4 .bg-quaternary-200 {
  background-color: var(--color-quaternary-200);
}

.design4 .bg-quaternary-100 {
  background-color: var(--color-quaternary-100);
}

.design4 .bg-quaternary-50 {
  background-color: var(--color-quaternary-50);
}

.design4 .bg-quaternary-25 {
  background-color: var(--color-quaternary-25);
}

.design4 .hover-text-black:hover {
  color: var(--color-black);
}

.design4 .hover-text-white:hover {
  color: var(--color-white);
}

.design4 .hover-text-neutral-900:hover {
  color: var(--color-neutral-900);
}

.design4 .hover-text-neutral-800:hover {
  color: var(--color-neutral-800);
}

.design4 .hover-text-neutral-700:hover {
  color: var(--color-neutral-700);
}

.design4 .hover-text-neutral-600:hover {
  color: var(--color-neutral-600);
}

.design4 .hover-text-neutral-500:hover {
  color: var(--color-neutral-500);
}

.design4 .hover-text-neutral-400:hover {
  color: var(--color-neutral-400);
}

.design4 .hover-text-neutral-300:hover {
  color: var(--color-neutral-300);
}

.design4 .hover-text-neutral-200:hover {
  color: var(--color-neutral-200);
}

.design4 .hover-text-neutral-100:hover {
  color: var(--color-neutral-100);
}

.design4 .hover-text-neutral-50:hover {
  color: var(--color-neutral-50);
}

.design4 .hover-text-neutral-25:hover {
  color: var(--color-neutral-25);
}

.design4 .hover-text-primary-900:hover {
  color: var(--color-primary-900);
}

.design4 .hover-text-primary-800:hover {
  color: var(--color-primary-800);
}

.design4 .hover-text-primary-700:hover {
  color: var(--color-primary-700);
}

.design4 .hover-text-primary-600:hover {
  color: var(--color-primary-600);
}

.design4 .hover-text-primary-500:hover {
  color: var(--color-primary-500);
}

.design4 .hover-text-primary-400:hover {
  color: var(--color-primary-400);
}

.design4 .hover-text-primary-300:hover {
  color: var(--color-primary-300);
}

.design4 .hover-text-primary-200:hover {
  color: var(--color-primary-200);
}

.design4 .hover-text-primary-100:hover {
  color: var(--color-primary-100);
}

.design4 .hover-text-primary-50:hover {
  color: var(--color-primary-50);
}

.design4 .hover-text-primary-25:hover {
  color: var(--color-primary-25);
}

.design4 .hover-text-secondary-900:hover {
  color: var(--color-secondary-900);
}

.design4 .hover-text-secondary-800:hover {
  color: var(--color-secondary-800);
}

.design4 .hover-text-secondary-700:hover {
  color: var(--color-secondary-700);
}

.design4 .hover-text-secondary-600:hover {
  color: var(--color-secondary-600);
}

.design4 .hover-text-secondary-500:hover {
  color: var(--color-secondary-500);
}

.design4 .hover-text-secondary-400:hover {
  color: var(--color-secondary-400);
}

.design4 .hover-text-secondary-300:hover {
  color: var(--color-secondary-300);
}

.design4 .hover-text-secondary-200:hover {
  color: var(--color-secondary-200);
}

.design4 .hover-text-secondary-100:hover {
  color: var(--color-secondary-100);
}

.design4 .hover-text-secondary-50:hover {
  color: var(--color-secondary-50);
}

.design4 .hover-text-tertiary-900:hover {
  color: var(--color-tertiary-900);
}

.design4 .hover-text-tertiary-800:hover {
  color: var(--color-tertiary-800);
}

.design4 .hover-text-tertiary-700:hover {
  color: var(--color-tertiary-700);
}

.design4 .hover-text-tertiary-600:hover {
  color: var(--color-tertiary-600);
}

.design4 .hover-text-tertiary-500:hover {
  color: var(--color-tertiary-500);
}

.design4 .hover-text-tertiary-400:hover {
  color: var(--color-tertiary-400);
}

.design4 .hover-text-tertiary-300:hover {
  color: var(--color-tertiary-300);
}

.design4 .hover-text-tertiary-200:hover {
  color: var(--color-tertiary-200);
}

.design4 .hover-text-tertiary-100:hover {
  color: var(--color-tertiary-100);
}

.design4 .hover-text-tertiary-50:hover {
  color: var(--color-tertiary-50);
}

.design4 .hover-text-success-900:hover {
  color: var(--color-success-900);
}

.design4 .hover-text-success-800:hover {
  color: var(--color-success-800);
}

.design4 .hover-text-success-700:hover {
  color: var(--color-success-700);
}

.design4 .hover-text-success-600:hover {
  color: var(--color-success-600);
}

.design4 .hover-text-success-500:hover {
  color: var(--color-success-500);
}

.design4 .hover-text-success-400:hover {
  color: var(--color-success-400);
}

.design4 .hover-text-success-300:hover {
  color: var(--color-success-300);
}

.design4 .hover-text-success-200:hover {
  color: var(--color-success-200);
}

.design4 .hover-text-success-100:hover {
  color: var(--color-success-100);
}

.design4 .hover-text-success-50:hover {
  color: var(--color-success-50);
}

.design4 .hover-text-success-25:hover {
  color: var(--color-success-25);
}

.design4 .hover-text-warning-900:hover {
  color: var(--color-warning-900);
}

.design4 .hover-text-warning-800:hover {
  color: var(--color-warning-800);
}

.design4 .hover-text-warning-700:hover {
  color: var(--color-warning-700);
}

.design4 .hover-text-warning-600:hover {
  color: var(--color-warning-600);
}

.design4 .hover-text-warning-500:hover {
  color: var(--color-warning-500);
}

.design4 .hover-text-warning-400:hover {
  color: var(--color-warning-400);
}

.design4 .hover-text-warning-300:hover {
  color: var(--color-warning-300);
}

.design4 .hover-text-warning-200:hover {
  color: var(--color-warning-200);
}

.design4 .hover-text-warning-100:hover {
  color: var(--color-warning-100);
}

.design4 .hover-text-warning-50:hover {
  color: var(--color-warning-50);
}

.design4 .hover-text-warning-25:hover {
  color: var(--color-warning-25);
}

.design4 .hover-text-error-900:hover {
  color: var(--color-error-900);
}

.design4 .hover-text-error-800:hover {
  color: var(--color-error-800);
}

.design4 .hover-text-error-700:hover {
  color: var(--color-error-700);
}

.design4 .hover-text-error-600:hover {
  color: var(--color-error-600);
}

.design4 .hover-text-error-500:hover {
  color: var(--color-error-500);
}

.design4 .hover-text-error-400:hover {
  color: var(--color-error-400);
}

.design4 .hover-text-error-300:hover {
  color: var(--color-error-300);
}

.design4 .hover-text-error-200:hover {
  color: var(--color-error-200);
}

.design4 .hover-text-error-100:hover {
  color: var(--color-error-100);
}

.design4 .hover-text-error-50:hover {
  color: var(--color-error-50);
}

.design4 .hover-text-error-25:hover {
  color: var(--color-error-25);
}

.design4 .hover-text-quaternary-900:hover {
  color: var(--color-quaternary-900);
}

.design4 .hover-text-quaternary-800:hover {
  color: var(--color-quaternary-800);
}

.design4 .hover-text-quaternary-700:hover {
  color: var(--color-quaternary-700);
}

.design4 .hover-text-quaternary-600:hover {
  color: var(--color-quaternary-600);
}

.design4 .hover-text-quaternary-500:hover {
  color: var(--color-quaternary-500);
}

.design4 .hover-text-quaternary-400:hover {
  color: var(--color-quaternary-400);
}

.design4 .hover-text-quaternary-300:hover {
  color: var(--color-quaternary-300);
}

.design4 .hover-text-quaternary-200:hover {
  color: var(--color-quaternary-200);
}

.design4 .hover-text-quaternary-100:hover {
  color: var(--color-quaternary-100);
}

.design4 .hover-text-quaternary-50:hover {
  color: var(--color-quaternary-50);
}

.design4 .hover-text-quaternary-25:hover {
  color: var(--color-quaternary-25);
}

.design4 .hover-bg-transparent:hover {
  background-color: transparent;
}

.design4 .hover-bg-black:hover {
  background-color: var(--color-black);
}

.design4 .hover-bg-white:hover {
  background-color: var(--color-white);
}

.design4 .hover-bg-neutral-900:hover {
  background-color: var(--color-neutral-900);
}

.design4 .hover-bg-neutral-800:hover {
  background-color: var(--color-neutral-800);
}

.design4 .hover-bg-neutral-700:hover {
  background-color: var(--color-neutral-700);
}

.design4 .hover-bg-neutral-600:hover {
  background-color: var(--color-neutral-600);
}

.design4 .hover-bg-neutral-500:hover {
  background-color: var(--color-neutral-500);
}

.design4 .hover-bg-neutral-400:hover {
  background-color: var(--color-neutral-400);
}

.design4 .hover-bg-neutral-300:hover {
  background-color: var(--color-neutral-300);
}

.design4 .hover-bg-neutral-200:hover {
  background-color: var(--color-neutral-200);
}

.design4 .hover-bg-neutral-100:hover {
  background-color: var(--color-neutral-100);
}

.design4 .hover-bg-neutral-50:hover {
  background-color: var(--color-neutral-50);
}

.design4 .hover-bg-neutral-25:hover {
  background-color: var(--color-neutral-25);
}

.design4 .hover-bg-primary-900:hover {
  background-color: var(--color-primary-900);
}

.design4 .hover-bg-primary-800:hover {
  background-color: var(--color-primary-800);
}

.design4 .hover-bg-primary-700:hover {
  background-color: var(--color-primary-700);
}

.design4 .hover-bg-primary-600:hover {
  background-color: var(--color-primary-600);
}

.design4 .hover-bg-primary-500:hover {
  background-color: var(--color-primary-500);
}

.design4 .hover-bg-primary-400:hover {
  background-color: var(--color-primary-400);
}

.design4 .hover-bg-primary-300:hover {
  background-color: var(--color-primary-300);
}

.design4 .hover-bg-primary-200:hover {
  background-color: var(--color-primary-200);
}

.design4 .hover-bg-primary-100:hover {
  background-color: var(--color-primary-100);
}

.design4 .hover-bg-primary-50:hover {
  background-color: var(--color-primary-50);
}

.design4 .hover-bg-primary-25:hover {
  background-color: var(--color-primary-25);
}

.design4 .hover-bg-secondary-900:hover {
  background-color: var(--color-secondary-900);
}

.design4 .hover-bg-secondary-800:hover {
  background-color: var(--color-secondary-800);
}

.design4 .hover-bg-secondary-700:hover {
  background-color: var(--color-secondary-700);
}

.design4 .hover-bg-secondary-600:hover {
  background-color: var(--color-secondary-600);
}

.design4 .hover-bg-secondary-500:hover {
  background-color: var(--color-secondary-500);
}

.design4 .hover-bg-secondary-400:hover {
  background-color: var(--color-secondary-400);
}

.design4 .hover-bg-secondary-300:hover {
  background-color: var(--color-secondary-300);
}

.design4 .hover-bg-secondary-200:hover {
  background-color: var(--color-secondary-200);
}

.design4 .hover-bg-secondary-100:hover {
  background-color: var(--color-secondary-100);
}

.design4 .hover-bg-secondary-50:hover {
  background-color: var(--color-secondary-50);
}

.design4 .hover-bg-tertiary-900:hover {
  background-color: var(--color-tertiary-900);
}

.design4 .hover-bg-tertiary-800:hover {
  background-color: var(--color-tertiary-800);
}

.design4 .hover-bg-tertiary-700:hover {
  background-color: var(--color-tertiary-700);
}

.design4 .hover-bg-tertiary-600:hover {
  background-color: var(--color-tertiary-600);
}

.design4 .hover-bg-tertiary-500:hover {
  background-color: var(--color-tertiary-500);
}

.design4 .hover-bg-tertiary-400:hover {
  background-color: var(--color-tertiary-400);
}

.design4 .hover-bg-tertiary-300:hover {
  background-color: var(--color-tertiary-300);
}

.design4 .hover-bg-tertiary-200:hover {
  background-color: var(--color-tertiary-200);
}

.design4 .hover-bg-tertiary-100:hover {
  background-color: var(--color-tertiary-100);
}

.design4 .hover-bg-tertiary-50:hover {
  background-color: var(--color-tertiary-50);
}

.design4 .hover-bg-success-900:hover {
  background-color: var(--color-success-900);
}

.design4 .hover-bg-success-800:hover {
  background-color: var(--color-success-800);
}

.design4 .hover-bg-success-700:hover {
  background-color: var(--color-success-700);
}

.design4 .hover-bg-success-600:hover {
  background-color: var(--color-success-600);
}

.design4 .hover-bg-success-500:hover {
  background-color: var(--color-success-500);
}

.design4 .hover-bg-success-400:hover {
  background-color: var(--color-success-400);
}

.design4 .hover-bg-success-300:hover {
  background-color: var(--color-success-300);
}

.design4 .hover-bg-success-200:hover {
  background-color: var(--color-success-200);
}

.design4 .hover-bg-success-100:hover {
  background-color: var(--color-success-100);
}

.design4 .hover-bg-success-50:hover {
  background-color: var(--color-success-50);
}

.design4 .hover-bg-success-25:hover {
  background-color: var(--color-success-25);
}

.design4 .hover-bg-warning-900:hover {
  background-color: var(--color-warning-900);
}

.design4 .hover-bg-warning-800:hover {
  background-color: var(--color-warning-800);
}

.design4 .hover-bg-warning-700:hover {
  background-color: var(--color-warning-700);
}

.design4 .hover-bg-warning-600:hover {
  background-color: var(--color-warning-600);
}

.design4 .hover-bg-warning-500:hover {
  background-color: var(--color-warning-500);
}

.design4 .hover-bg-warning-400:hover {
  background-color: var(--color-warning-400);
}

.design4 .hover-bg-warning-300:hover {
  background-color: var(--color-warning-300);
}

.design4 .hover-bg-warning-200:hover {
  background-color: var(--color-warning-200);
}

.design4 .hover-bg-warning-100:hover {
  background-color: var(--color-warning-100);
}

.design4 .hover-bg-warning-50:hover {
  background-color: var(--color-warning-50);
}

.design4 .hover-bg-warning-25:hover {
  background-color: var(--color-warning-25);
}

.design4 .hover-bg-error-900:hover {
  background-color: var(--color-error-900);
}

.design4 .hover-bg-error-800:hover {
  background-color: var(--color-error-800);
}

.design4 .hover-bg-error-700:hover {
  background-color: var(--color-error-700);
}

.design4 .hover-bg-error-600:hover {
  background-color: var(--color-error-600);
}

.design4 .hover-bg-error-500:hover {
  background-color: var(--color-error-500);
}

.design4 .hover-bg-error-400:hover {
  background-color: var(--color-error-400);
}

.design4 .hover-bg-error-300:hover {
  background-color: var(--color-error-300);
}

.design4 .hover-bg-error-200:hover {
  background-color: var(--color-error-200);
}

.design4 .hover-bg-error-100:hover {
  background-color: var(--color-error-100);
}

.design4 .hover-bg-error-50:hover {
  background-color: var(--color-error-50);
}

.design4 .hover-bg-error-25:hover {
  background-color: var(--color-error-25);
}

.design4 .hover-bg-quaternary-900:hover {
  background-color: var(--color-quaternary-900);
}

.design4 .hover-bg-quaternary-800:hover {
  background-color: var(--color-quaternary-800);
}

.design4 .hover-bg-quaternary-700:hover {
  background-color: var(--color-quaternary-700);
}

.design4 .hover-bg-quaternary-600:hover {
  background-color: var(--color-quaternary-600);
}

.design4 .hover-bg-quaternary-500:hover {
  background-color: var(--color-quaternary-500);
}

.design4 .hover-bg-quaternary-400:hover {
  background-color: var(--color-quaternary-400);
}

.design4 .hover-bg-quaternary-300:hover {
  background-color: var(--color-quaternary-300);
}

.design4 .hover-bg-quaternary-200:hover {
  background-color: var(--color-quaternary-200);
}

.design4 .hover-bg-quaternary-100:hover {
  background-color: var(--color-quaternary-100);
}

.design4 .hover-bg-quaternary-50:hover {
  background-color: var(--color-quaternary-50);
}

.design4 .hover-bg-quaternary-25:hover {
  background-color: var(--color-quaternary-25);
}

.design4 .disabled-text-black[disabled] {
  color: var(--color-black);
}

.design4 .disabled-text-white[disabled] {
  color: var(--color-white);
}

.design4 .disabled-text-neutral-900[disabled] {
  color: var(--color-neutral-900);
}

.design4 .disabled-text-neutral-800[disabled] {
  color: var(--color-neutral-800);
}

.design4 .disabled-text-neutral-700[disabled] {
  color: var(--color-neutral-700);
}

.design4 .disabled-text-neutral-600[disabled] {
  color: var(--color-neutral-600);
}

.design4 .disabled-text-neutral-500[disabled] {
  color: var(--color-neutral-500);
}

.design4 .disabled-text-neutral-400[disabled] {
  color: var(--color-neutral-400);
}

.design4 .disabled-text-neutral-300[disabled] {
  color: var(--color-neutral-300);
}

.design4 .disabled-text-neutral-200[disabled] {
  color: var(--color-neutral-200);
}

.design4 .disabled-text-neutral-100[disabled] {
  color: var(--color-neutral-100);
}

.design4 .disabled-text-neutral-50[disabled] {
  color: var(--color-neutral-50);
}

.design4 .disabled-text-neutral-25[disabled] {
  color: var(--color-neutral-25);
}

.design4 .disabled-text-primary-900[disabled] {
  color: var(--color-primary-900);
}

.design4 .disabled-text-primary-800[disabled] {
  color: var(--color-primary-800);
}

.design4 .disabled-text-primary-700[disabled] {
  color: var(--color-primary-700);
}

.design4 .disabled-text-primary-600[disabled] {
  color: var(--color-primary-600);
}

.design4 .disabled-text-primary-500[disabled] {
  color: var(--color-primary-500);
}

.design4 .disabled-text-primary-400[disabled] {
  color: var(--color-primary-400);
}

.design4 .disabled-text-primary-300[disabled] {
  color: var(--color-primary-300);
}

.design4 .disabled-text-primary-200[disabled] {
  color: var(--color-primary-200);
}

.design4 .disabled-text-primary-100[disabled] {
  color: var(--color-primary-100);
}

.design4 .disabled-text-primary-50[disabled] {
  color: var(--color-primary-50);
}

.design4 .disabled-text-primary-25[disabled] {
  color: var(--color-primary-25);
}

.design4 .disabled-text-secondary-900[disabled] {
  color: var(--color-secondary-900);
}

.design4 .disabled-text-secondary-800[disabled] {
  color: var(--color-secondary-800);
}

.design4 .disabled-text-secondary-700[disabled] {
  color: var(--color-secondary-700);
}

.design4 .disabled-text-secondary-600[disabled] {
  color: var(--color-secondary-600);
}

.design4 .disabled-text-secondary-500[disabled] {
  color: var(--color-secondary-500);
}

.design4 .disabled-text-secondary-400[disabled] {
  color: var(--color-secondary-400);
}

.design4 .disabled-text-secondary-300[disabled] {
  color: var(--color-secondary-300);
}

.design4 .disabled-text-secondary-200[disabled] {
  color: var(--color-secondary-200);
}

.design4 .disabled-text-secondary-100[disabled] {
  color: var(--color-secondary-100);
}

.design4 .disabled-text-secondary-50[disabled] {
  color: var(--color-secondary-50);
}

.design4 .disabled-text-tertiary-900[disabled] {
  color: var(--color-tertiary-900);
}

.design4 .disabled-text-tertiary-800[disabled] {
  color: var(--color-tertiary-800);
}

.design4 .disabled-text-tertiary-700[disabled] {
  color: var(--color-tertiary-700);
}

.design4 .disabled-text-tertiary-600[disabled] {
  color: var(--color-tertiary-600);
}

.design4 .disabled-text-tertiary-500[disabled] {
  color: var(--color-tertiary-500);
}

.design4 .disabled-text-tertiary-400[disabled] {
  color: var(--color-tertiary-400);
}

.design4 .disabled-text-tertiary-300[disabled] {
  color: var(--color-tertiary-300);
}

.design4 .disabled-text-tertiary-200[disabled] {
  color: var(--color-tertiary-200);
}

.design4 .disabled-text-tertiary-100[disabled] {
  color: var(--color-tertiary-100);
}

.design4 .disabled-text-tertiary-50[disabled] {
  color: var(--color-tertiary-50);
}

.design4 .disabled-text-success-900[disabled] {
  color: var(--color-success-900);
}

.design4 .disabled-text-success-800[disabled] {
  color: var(--color-success-800);
}

.design4 .disabled-text-success-700[disabled] {
  color: var(--color-success-700);
}

.design4 .disabled-text-success-600[disabled] {
  color: var(--color-success-600);
}

.design4 .disabled-text-success-500[disabled] {
  color: var(--color-success-500);
}

.design4 .disabled-text-success-400[disabled] {
  color: var(--color-success-400);
}

.design4 .disabled-text-success-300[disabled] {
  color: var(--color-success-300);
}

.design4 .disabled-text-success-200[disabled] {
  color: var(--color-success-200);
}

.design4 .disabled-text-success-100[disabled] {
  color: var(--color-success-100);
}

.design4 .disabled-text-success-50[disabled] {
  color: var(--color-success-50);
}

.design4 .disabled-text-success-25[disabled] {
  color: var(--color-success-25);
}

.design4 .disabled-text-warning-900[disabled] {
  color: var(--color-warning-900);
}

.design4 .disabled-text-warning-800[disabled] {
  color: var(--color-warning-800);
}

.design4 .disabled-text-warning-700[disabled] {
  color: var(--color-warning-700);
}

.design4 .disabled-text-warning-600[disabled] {
  color: var(--color-warning-600);
}

.design4 .disabled-text-warning-500[disabled] {
  color: var(--color-warning-500);
}

.design4 .disabled-text-warning-400[disabled] {
  color: var(--color-warning-400);
}

.design4 .disabled-text-warning-300[disabled] {
  color: var(--color-warning-300);
}

.design4 .disabled-text-warning-200[disabled] {
  color: var(--color-warning-200);
}

.design4 .disabled-text-warning-100[disabled] {
  color: var(--color-warning-100);
}

.design4 .disabled-text-warning-50[disabled] {
  color: var(--color-warning-50);
}

.design4 .disabled-text-warning-25[disabled] {
  color: var(--color-warning-25);
}

.design4 .disabled-text-error-900[disabled] {
  color: var(--color-error-900);
}

.design4 .disabled-text-error-800[disabled] {
  color: var(--color-error-800);
}

.design4 .disabled-text-error-700[disabled] {
  color: var(--color-error-700);
}

.design4 .disabled-text-error-600[disabled] {
  color: var(--color-error-600);
}

.design4 .disabled-text-error-500[disabled] {
  color: var(--color-error-500);
}

.design4 .disabled-text-error-400[disabled] {
  color: var(--color-error-400);
}

.design4 .disabled-text-error-300[disabled] {
  color: var(--color-error-300);
}

.design4 .disabled-text-error-200[disabled] {
  color: var(--color-error-200);
}

.design4 .disabled-text-error-100[disabled] {
  color: var(--color-error-100);
}

.design4 .disabled-text-error-50[disabled] {
  color: var(--color-error-50);
}

.design4 .disabled-text-error-25[disabled] {
  color: var(--color-error-25);
}

.design4 .disabled-text-quaternary-900[disabled] {
  color: var(--color-quaternary-900);
}

.design4 .disabled-text-quaternary-800[disabled] {
  color: var(--color-quaternary-800);
}

.design4 .disabled-text-quaternary-700[disabled] {
  color: var(--color-quaternary-700);
}

.design4 .disabled-text-quaternary-600[disabled] {
  color: var(--color-quaternary-600);
}

.design4 .disabled-text-quaternary-500[disabled] {
  color: var(--color-quaternary-500);
}

.design4 .disabled-text-quaternary-400[disabled] {
  color: var(--color-quaternary-400);
}

.design4 .disabled-text-quaternary-300[disabled] {
  color: var(--color-quaternary-300);
}

.design4 .disabled-text-quaternary-200[disabled] {
  color: var(--color-quaternary-200);
}

.design4 .disabled-text-quaternary-100[disabled] {
  color: var(--color-quaternary-100);
}

.design4 .disabled-text-quaternary-50[disabled] {
  color: var(--color-quaternary-50);
}

.design4 .disabled-text-quaternary-25[disabled] {
  color: var(--color-quaternary-25);
}

.design4 .disabled-bg-transparent[disabled] {
  background-color: transparent;
}

.design4 .disabled-bg-black[disabled] {
  background-color: var(--color-black);
}

.design4 .disabled-bg-white[disabled] {
  background-color: var(--color-white);
}

.design4 .disabled-bg-neutral-900[disabled] {
  background-color: var(--color-neutral-900);
}

.design4 .disabled-bg-neutral-800[disabled] {
  background-color: var(--color-neutral-800);
}

.design4 .disabled-bg-neutral-700[disabled] {
  background-color: var(--color-neutral-700);
}

.design4 .disabled-bg-neutral-600[disabled] {
  background-color: var(--color-neutral-600);
}

.design4 .disabled-bg-neutral-500[disabled] {
  background-color: var(--color-neutral-500);
}

.design4 .disabled-bg-neutral-400[disabled] {
  background-color: var(--color-neutral-400);
}

.design4 .disabled-bg-neutral-300[disabled] {
  background-color: var(--color-neutral-300);
}

.design4 .disabled-bg-neutral-200[disabled] {
  background-color: var(--color-neutral-200);
}

.design4 .disabled-bg-neutral-100[disabled] {
  background-color: var(--color-neutral-100);
}

.design4 .disabled-bg-neutral-50[disabled] {
  background-color: var(--color-neutral-50);
}

.design4 .disabled-bg-neutral-25[disabled] {
  background-color: var(--color-neutral-25);
}

.design4 .disabled-bg-primary-900[disabled] {
  background-color: var(--color-primary-900);
}

.design4 .disabled-bg-primary-800[disabled] {
  background-color: var(--color-primary-800);
}

.design4 .disabled-bg-primary-700[disabled] {
  background-color: var(--color-primary-700);
}

.design4 .disabled-bg-primary-600[disabled] {
  background-color: var(--color-primary-600);
}

.design4 .disabled-bg-primary-500[disabled] {
  background-color: var(--color-primary-500);
}

.design4 .disabled-bg-primary-400[disabled] {
  background-color: var(--color-primary-400);
}

.design4 .disabled-bg-primary-300[disabled] {
  background-color: var(--color-primary-300);
}

.design4 .disabled-bg-primary-200[disabled] {
  background-color: var(--color-primary-200);
}

.design4 .disabled-bg-primary-100[disabled] {
  background-color: var(--color-primary-100);
}

.design4 .disabled-bg-primary-50[disabled] {
  background-color: var(--color-primary-50);
}

.design4 .disabled-bg-primary-25[disabled] {
  background-color: var(--color-primary-25);
}

.design4 .disabled-bg-secondary-900[disabled] {
  background-color: var(--color-secondary-900);
}

.design4 .disabled-bg-secondary-800[disabled] {
  background-color: var(--color-secondary-800);
}

.design4 .disabled-bg-secondary-700[disabled] {
  background-color: var(--color-secondary-700);
}

.design4 .disabled-bg-secondary-600[disabled] {
  background-color: var(--color-secondary-600);
}

.design4 .disabled-bg-secondary-500[disabled] {
  background-color: var(--color-secondary-500);
}

.design4 .disabled-bg-secondary-400[disabled] {
  background-color: var(--color-secondary-400);
}

.design4 .disabled-bg-secondary-300[disabled] {
  background-color: var(--color-secondary-300);
}

.design4 .disabled-bg-secondary-200[disabled] {
  background-color: var(--color-secondary-200);
}

.design4 .disabled-bg-secondary-100[disabled] {
  background-color: var(--color-secondary-100);
}

.design4 .disabled-bg-secondary-50[disabled] {
  background-color: var(--color-secondary-50);
}

.design4 .disabled-bg-tertiary-900[disabled] {
  background-color: var(--color-tertiary-900);
}

.design4 .disabled-bg-tertiary-800[disabled] {
  background-color: var(--color-tertiary-800);
}

.design4 .disabled-bg-tertiary-700[disabled] {
  background-color: var(--color-tertiary-700);
}

.design4 .disabled-bg-tertiary-600[disabled] {
  background-color: var(--color-tertiary-600);
}

.design4 .disabled-bg-tertiary-500[disabled] {
  background-color: var(--color-tertiary-500);
}

.design4 .disabled-bg-tertiary-400[disabled] {
  background-color: var(--color-tertiary-400);
}

.design4 .disabled-bg-tertiary-300[disabled] {
  background-color: var(--color-tertiary-300);
}

.design4 .disabled-bg-tertiary-200[disabled] {
  background-color: var(--color-tertiary-200);
}

.design4 .disabled-bg-tertiary-100[disabled] {
  background-color: var(--color-tertiary-100);
}

.design4 .disabled-bg-tertiary-50[disabled] {
  background-color: var(--color-tertiary-50);
}

.design4 .disabled-bg-success-900[disabled] {
  background-color: var(--color-success-900);
}

.design4 .disabled-bg-success-800[disabled] {
  background-color: var(--color-success-800);
}

.design4 .disabled-bg-success-700[disabled] {
  background-color: var(--color-success-700);
}

.design4 .disabled-bg-success-600[disabled] {
  background-color: var(--color-success-600);
}

.design4 .disabled-bg-success-500[disabled] {
  background-color: var(--color-success-500);
}

.design4 .disabled-bg-success-400[disabled] {
  background-color: var(--color-success-400);
}

.design4 .disabled-bg-success-300[disabled] {
  background-color: var(--color-success-300);
}

.design4 .disabled-bg-success-200[disabled] {
  background-color: var(--color-success-200);
}

.design4 .disabled-bg-success-100[disabled] {
  background-color: var(--color-success-100);
}

.design4 .disabled-bg-success-50[disabled] {
  background-color: var(--color-success-50);
}

.design4 .disabled-bg-success-25[disabled] {
  background-color: var(--color-success-25);
}

.design4 .disabled-bg-warning-900[disabled] {
  background-color: var(--color-warning-900);
}

.design4 .disabled-bg-warning-800[disabled] {
  background-color: var(--color-warning-800);
}

.design4 .disabled-bg-warning-700[disabled] {
  background-color: var(--color-warning-700);
}

.design4 .disabled-bg-warning-600[disabled] {
  background-color: var(--color-warning-600);
}

.design4 .disabled-bg-warning-500[disabled] {
  background-color: var(--color-warning-500);
}

.design4 .disabled-bg-warning-400[disabled] {
  background-color: var(--color-warning-400);
}

.design4 .disabled-bg-warning-300[disabled] {
  background-color: var(--color-warning-300);
}

.design4 .disabled-bg-warning-200[disabled] {
  background-color: var(--color-warning-200);
}

.design4 .disabled-bg-warning-100[disabled] {
  background-color: var(--color-warning-100);
}

.design4 .disabled-bg-warning-50[disabled] {
  background-color: var(--color-warning-50);
}

.design4 .disabled-bg-warning-25[disabled] {
  background-color: var(--color-warning-25);
}

.design4 .disabled-bg-error-900[disabled] {
  background-color: var(--color-error-900);
}

.design4 .disabled-bg-error-800[disabled] {
  background-color: var(--color-error-800);
}

.design4 .disabled-bg-error-700[disabled] {
  background-color: var(--color-error-700);
}

.design4 .disabled-bg-error-600[disabled] {
  background-color: var(--color-error-600);
}

.design4 .disabled-bg-error-500[disabled] {
  background-color: var(--color-error-500);
}

.design4 .disabled-bg-error-400[disabled] {
  background-color: var(--color-error-400);
}

.design4 .disabled-bg-error-300[disabled] {
  background-color: var(--color-error-300);
}

.design4 .disabled-bg-error-200[disabled] {
  background-color: var(--color-error-200);
}

.design4 .disabled-bg-error-100[disabled] {
  background-color: var(--color-error-100);
}

.design4 .disabled-bg-error-50[disabled] {
  background-color: var(--color-error-50);
}

.design4 .disabled-bg-error-25[disabled] {
  background-color: var(--color-error-25);
}

.design4 .disabled-bg-quaternary-900[disabled] {
  background-color: var(--color-quaternary-900);
}

.design4 .disabled-bg-quaternary-800[disabled] {
  background-color: var(--color-quaternary-800);
}

.design4 .disabled-bg-quaternary-700[disabled] {
  background-color: var(--color-quaternary-700);
}

.design4 .disabled-bg-quaternary-600[disabled] {
  background-color: var(--color-quaternary-600);
}

.design4 .disabled-bg-quaternary-500[disabled] {
  background-color: var(--color-quaternary-500);
}

.design4 .disabled-bg-quaternary-400[disabled] {
  background-color: var(--color-quaternary-400);
}

.design4 .disabled-bg-quaternary-300[disabled] {
  background-color: var(--color-quaternary-300);
}

.design4 .disabled-bg-quaternary-200[disabled] {
  background-color: var(--color-quaternary-200);
}

.design4 .disabled-bg-quaternary-100[disabled] {
  background-color: var(--color-quaternary-100);
}

.design4 .disabled-bg-quaternary-50[disabled] {
  background-color: var(--color-quaternary-50);
}

.design4 .disabled-bg-quaternary-25[disabled] {
  background-color: var(--color-quaternary-25);
}

.design4 .border-transparent {
  border-color: transparent;
}

.design4 .border-black {
  border-color: var(--color-black);
}

.design4 .border-white {
  border-color: var(--color-white);
}

.design4 .border-neutral-900 {
  border-color: var(--color-neutral-900);
}

.design4 .border-neutral-800 {
  border-color: var(--color-neutral-800);
}

.design4 .border-neutral-700 {
  border-color: var(--color-neutral-700);
}

.design4 .border-neutral-600 {
  border-color: var(--color-neutral-600);
}

.design4 .border-neutral-500 {
  border-color: var(--color-neutral-500);
}

.design4 .border-neutral-400 {
  border-color: var(--color-neutral-400);
}

.design4 .border-neutral-300 {
  border-color: var(--color-neutral-300);
}

.design4 .border-neutral-200 {
  border-color: var(--color-neutral-200);
}

.design4 .border-neutral-100 {
  border-color: var(--color-neutral-100);
}

.design4 .border-neutral-50 {
  border-color: var(--color-neutral-50);
}

.design4 .border-neutral-25 {
  border-color: var(--color-neutral-25);
}

.design4 .border-primary-900 {
  border-color: var(--color-primary-900);
}

.design4 .border-primary-800 {
  border-color: var(--color-primary-800);
}

.design4 .border-primary-700 {
  border-color: var(--color-primary-700);
}

.design4 .border-primary-600 {
  border-color: var(--color-primary-600);
}

.design4 .border-primary-500 {
  border-color: var(--color-primary-500);
}

.design4 .border-primary-400 {
  border-color: var(--color-primary-400);
}

.design4 .border-primary-300 {
  border-color: var(--color-primary-300);
}

.design4 .border-primary-200 {
  border-color: var(--color-primary-200);
}

.design4 .border-primary-100 {
  border-color: var(--color-primary-100);
}

.design4 .border-primary-50 {
  border-color: var(--color-primary-50);
}

.design4 .border-primary-25 {
  border-color: var(--color-primary-25);
}

.design4 .border-secondary-900 {
  border-color: var(--color-secondary-900);
}

.design4 .border-secondary-800 {
  border-color: var(--color-secondary-800);
}

.design4 .border-secondary-700 {
  border-color: var(--color-secondary-700);
}

.design4 .border-secondary-600 {
  border-color: var(--color-secondary-600);
}

.design4 .border-secondary-500 {
  border-color: var(--color-secondary-500);
}

.design4 .border-secondary-400 {
  border-color: var(--color-secondary-400);
}

.design4 .border-secondary-300 {
  border-color: var(--color-secondary-300);
}

.design4 .border-secondary-200 {
  border-color: var(--color-secondary-200);
}

.design4 .border-secondary-100 {
  border-color: var(--color-secondary-100);
}

.design4 .border-secondary-50 {
  border-color: var(--color-secondary-50);
}

.design4 .border-tertiary-900 {
  border-color: var(--color-tertiary-900);
}

.design4 .border-tertiary-800 {
  border-color: var(--color-tertiary-800);
}

.design4 .border-tertiary-700 {
  border-color: var(--color-tertiary-700);
}

.design4 .border-tertiary-600 {
  border-color: var(--color-tertiary-600);
}

.design4 .border-tertiary-500 {
  border-color: var(--color-tertiary-500);
}

.design4 .border-tertiary-400 {
  border-color: var(--color-tertiary-400);
}

.design4 .border-tertiary-300 {
  border-color: var(--color-tertiary-300);
}

.design4 .border-tertiary-200 {
  border-color: var(--color-tertiary-200);
}

.design4 .border-tertiary-100 {
  border-color: var(--color-tertiary-100);
}

.design4 .border-tertiary-50 {
  border-color: var(--color-tertiary-50);
}

.design4 .border-success-900 {
  border-color: var(--color-success-900);
}

.design4 .border-success-800 {
  border-color: var(--color-success-800);
}

.design4 .border-success-700 {
  border-color: var(--color-success-700);
}

.design4 .border-success-600 {
  border-color: var(--color-success-600);
}

.design4 .border-success-500 {
  border-color: var(--color-success-500);
}

.design4 .border-success-400 {
  border-color: var(--color-success-400);
}

.design4 .border-success-300 {
  border-color: var(--color-success-300);
}

.design4 .border-success-200 {
  border-color: var(--color-success-200);
}

.design4 .border-success-100 {
  border-color: var(--color-success-100);
}

.design4 .border-success-50 {
  border-color: var(--color-success-50);
}

.design4 .border-success-25 {
  border-color: var(--color-success-25);
}

.design4 .border-warning-900 {
  border-color: var(--color-warning-900);
}

.design4 .border-warning-800 {
  border-color: var(--color-warning-800);
}

.design4 .border-warning-700 {
  border-color: var(--color-warning-700);
}

.design4 .border-warning-600 {
  border-color: var(--color-warning-600);
}

.design4 .border-warning-500 {
  border-color: var(--color-warning-500);
}

.design4 .border-warning-400 {
  border-color: var(--color-warning-400);
}

.design4 .border-warning-300 {
  border-color: var(--color-warning-300);
}

.design4 .border-warning-200 {
  border-color: var(--color-warning-200);
}

.design4 .border-warning-100 {
  border-color: var(--color-warning-100);
}

.design4 .border-warning-50 {
  border-color: var(--color-warning-50);
}

.design4 .border-warning-25 {
  border-color: var(--color-warning-25);
}

.design4 .border-error-900 {
  border-color: var(--color-error-900);
}

.design4 .border-error-800 {
  border-color: var(--color-error-800);
}

.design4 .border-error-700 {
  border-color: var(--color-error-700);
}

.design4 .border-error-600 {
  border-color: var(--color-error-600);
}

.design4 .border-error-500 {
  border-color: var(--color-error-500);
}

.design4 .border-error-400 {
  border-color: var(--color-error-400);
}

.design4 .border-error-300 {
  border-color: var(--color-error-300);
}

.design4 .border-error-200 {
  border-color: var(--color-error-200);
}

.design4 .border-error-100 {
  border-color: var(--color-error-100);
}

.design4 .border-error-50 {
  border-color: var(--color-error-50);
}

.design4 .border-error-25 {
  border-color: var(--color-error-25);
}

.design4 .border-quaternary-900 {
  border-color: var(--color-quaternary-900);
}

.design4 .border-quaternary-800 {
  border-color: var(--color-quaternary-800);
}

.design4 .border-quaternary-700 {
  border-color: var(--color-quaternary-700);
}

.design4 .border-quaternary-600 {
  border-color: var(--color-quaternary-600);
}

.design4 .border-quaternary-500 {
  border-color: var(--color-quaternary-500);
}

.design4 .border-quaternary-400 {
  border-color: var(--color-quaternary-400);
}

.design4 .border-quaternary-300 {
  border-color: var(--color-quaternary-300);
}

.design4 .border-quaternary-200 {
  border-color: var(--color-quaternary-200);
}

.design4 .border-quaternary-100 {
  border-color: var(--color-quaternary-100);
}

.design4 .border-quaternary-50 {
  border-color: var(--color-quaternary-50);
}

.design4 .border-quaternary-25 {
  border-color: var(--color-quaternary-25);
}

.design4 .disabled-border-transparent[disabled] {
  border-color: transparent;
}

.design4 .disabled-border-black[disabled] {
  border-color: var(--color-black);
}

.design4 .disabled-border-white[disabled] {
  border-color: var(--color-white);
}

.design4 .disabled-border-neutral-900[disabled] {
  border-color: var(--color-neutral-900);
}

.design4 .disabled-border-neutral-800[disabled] {
  border-color: var(--color-neutral-800);
}

.design4 .disabled-border-neutral-700[disabled] {
  border-color: var(--color-neutral-700);
}

.design4 .disabled-border-neutral-600[disabled] {
  border-color: var(--color-neutral-600);
}

.design4 .disabled-border-neutral-500[disabled] {
  border-color: var(--color-neutral-500);
}

.design4 .disabled-border-neutral-400[disabled] {
  border-color: var(--color-neutral-400);
}

.design4 .disabled-border-neutral-300[disabled] {
  border-color: var(--color-neutral-300);
}

.design4 .disabled-border-neutral-200[disabled] {
  border-color: var(--color-neutral-200);
}

.design4 .disabled-border-neutral-100[disabled] {
  border-color: var(--color-neutral-100);
}

.design4 .disabled-border-neutral-50[disabled] {
  border-color: var(--color-neutral-50);
}

.design4 .disabled-border-neutral-25[disabled] {
  border-color: var(--color-neutral-25);
}

.design4 .disabled-border-primary-900[disabled] {
  border-color: var(--color-primary-900);
}

.design4 .disabled-border-primary-800[disabled] {
  border-color: var(--color-primary-800);
}

.design4 .disabled-border-primary-700[disabled] {
  border-color: var(--color-primary-700);
}

.design4 .disabled-border-primary-600[disabled] {
  border-color: var(--color-primary-600);
}

.design4 .disabled-border-primary-500[disabled] {
  border-color: var(--color-primary-500);
}

.design4 .disabled-border-primary-400[disabled] {
  border-color: var(--color-primary-400);
}

.design4 .disabled-border-primary-300[disabled] {
  border-color: var(--color-primary-300);
}

.design4 .disabled-border-primary-200[disabled] {
  border-color: var(--color-primary-200);
}

.design4 .disabled-border-primary-100[disabled] {
  border-color: var(--color-primary-100);
}

.design4 .disabled-border-primary-50[disabled] {
  border-color: var(--color-primary-50);
}

.design4 .disabled-border-primary-25[disabled] {
  border-color: var(--color-primary-25);
}

.design4 .disabled-border-secondary-900[disabled] {
  border-color: var(--color-secondary-900);
}

.design4 .disabled-border-secondary-800[disabled] {
  border-color: var(--color-secondary-800);
}

.design4 .disabled-border-secondary-700[disabled] {
  border-color: var(--color-secondary-700);
}

.design4 .disabled-border-secondary-600[disabled] {
  border-color: var(--color-secondary-600);
}

.design4 .disabled-border-secondary-500[disabled] {
  border-color: var(--color-secondary-500);
}

.design4 .disabled-border-secondary-400[disabled] {
  border-color: var(--color-secondary-400);
}

.design4 .disabled-border-secondary-300[disabled] {
  border-color: var(--color-secondary-300);
}

.design4 .disabled-border-secondary-200[disabled] {
  border-color: var(--color-secondary-200);
}

.design4 .disabled-border-secondary-100[disabled] {
  border-color: var(--color-secondary-100);
}

.design4 .disabled-border-secondary-50[disabled] {
  border-color: var(--color-secondary-50);
}

.design4 .disabled-border-tertiary-900[disabled] {
  border-color: var(--color-tertiary-900);
}

.design4 .disabled-border-tertiary-800[disabled] {
  border-color: var(--color-tertiary-800);
}

.design4 .disabled-border-tertiary-700[disabled] {
  border-color: var(--color-tertiary-700);
}

.design4 .disabled-border-tertiary-600[disabled] {
  border-color: var(--color-tertiary-600);
}

.design4 .disabled-border-tertiary-500[disabled] {
  border-color: var(--color-tertiary-500);
}

.design4 .disabled-border-tertiary-400[disabled] {
  border-color: var(--color-tertiary-400);
}

.design4 .disabled-border-tertiary-300[disabled] {
  border-color: var(--color-tertiary-300);
}

.design4 .disabled-border-tertiary-200[disabled] {
  border-color: var(--color-tertiary-200);
}

.design4 .disabled-border-tertiary-100[disabled] {
  border-color: var(--color-tertiary-100);
}

.design4 .disabled-border-tertiary-50[disabled] {
  border-color: var(--color-tertiary-50);
}

.design4 .disabled-border-success-900[disabled] {
  border-color: var(--color-success-900);
}

.design4 .disabled-border-success-800[disabled] {
  border-color: var(--color-success-800);
}

.design4 .disabled-border-success-700[disabled] {
  border-color: var(--color-success-700);
}

.design4 .disabled-border-success-600[disabled] {
  border-color: var(--color-success-600);
}

.design4 .disabled-border-success-500[disabled] {
  border-color: var(--color-success-500);
}

.design4 .disabled-border-success-400[disabled] {
  border-color: var(--color-success-400);
}

.design4 .disabled-border-success-300[disabled] {
  border-color: var(--color-success-300);
}

.design4 .disabled-border-success-200[disabled] {
  border-color: var(--color-success-200);
}

.design4 .disabled-border-success-100[disabled] {
  border-color: var(--color-success-100);
}

.design4 .disabled-border-success-50[disabled] {
  border-color: var(--color-success-50);
}

.design4 .disabled-border-success-25[disabled] {
  border-color: var(--color-success-25);
}

.design4 .disabled-border-warning-900[disabled] {
  border-color: var(--color-warning-900);
}

.design4 .disabled-border-warning-800[disabled] {
  border-color: var(--color-warning-800);
}

.design4 .disabled-border-warning-700[disabled] {
  border-color: var(--color-warning-700);
}

.design4 .disabled-border-warning-600[disabled] {
  border-color: var(--color-warning-600);
}

.design4 .disabled-border-warning-500[disabled] {
  border-color: var(--color-warning-500);
}

.design4 .disabled-border-warning-400[disabled] {
  border-color: var(--color-warning-400);
}

.design4 .disabled-border-warning-300[disabled] {
  border-color: var(--color-warning-300);
}

.design4 .disabled-border-warning-200[disabled] {
  border-color: var(--color-warning-200);
}

.design4 .disabled-border-warning-100[disabled] {
  border-color: var(--color-warning-100);
}

.design4 .disabled-border-warning-50[disabled] {
  border-color: var(--color-warning-50);
}

.design4 .disabled-border-warning-25[disabled] {
  border-color: var(--color-warning-25);
}

.design4 .disabled-border-error-900[disabled] {
  border-color: var(--color-error-900);
}

.design4 .disabled-border-error-800[disabled] {
  border-color: var(--color-error-800);
}

.design4 .disabled-border-error-700[disabled] {
  border-color: var(--color-error-700);
}

.design4 .disabled-border-error-600[disabled] {
  border-color: var(--color-error-600);
}

.design4 .disabled-border-error-500[disabled] {
  border-color: var(--color-error-500);
}

.design4 .disabled-border-error-400[disabled] {
  border-color: var(--color-error-400);
}

.design4 .disabled-border-error-300[disabled] {
  border-color: var(--color-error-300);
}

.design4 .disabled-border-error-200[disabled] {
  border-color: var(--color-error-200);
}

.design4 .disabled-border-error-100[disabled] {
  border-color: var(--color-error-100);
}

.design4 .disabled-border-error-50[disabled] {
  border-color: var(--color-error-50);
}

.design4 .disabled-border-error-25[disabled] {
  border-color: var(--color-error-25);
}

.design4 .disabled-border-quaternary-900[disabled] {
  border-color: var(--color-quaternary-900);
}

.design4 .disabled-border-quaternary-800[disabled] {
  border-color: var(--color-quaternary-800);
}

.design4 .disabled-border-quaternary-700[disabled] {
  border-color: var(--color-quaternary-700);
}

.design4 .disabled-border-quaternary-600[disabled] {
  border-color: var(--color-quaternary-600);
}

.design4 .disabled-border-quaternary-500[disabled] {
  border-color: var(--color-quaternary-500);
}

.design4 .disabled-border-quaternary-400[disabled] {
  border-color: var(--color-quaternary-400);
}

.design4 .disabled-border-quaternary-300[disabled] {
  border-color: var(--color-quaternary-300);
}

.design4 .disabled-border-quaternary-200[disabled] {
  border-color: var(--color-quaternary-200);
}

.design4 .disabled-border-quaternary-100[disabled] {
  border-color: var(--color-quaternary-100);
}

.design4 .disabled-border-quaternary-50[disabled] {
  border-color: var(--color-quaternary-50);
}

.design4 .disabled-border-quaternary-25[disabled] {
  border-color: var(--color-quaternary-25);
}

.design4 .hover-border-transparent:hover {
  border-color: transparent;
}

.design4 .hover-border-black:hover {
  border-color: var(--color-black);
}

.design4 .hover-border-white:hover {
  border-color: var(--color-white);
}

.design4 .hover-border-neutral-900:hover {
  border-color: var(--color-neutral-900);
}

.design4 .hover-border-neutral-800:hover {
  border-color: var(--color-neutral-800);
}

.design4 .hover-border-neutral-700:hover {
  border-color: var(--color-neutral-700);
}

.design4 .hover-border-neutral-600:hover {
  border-color: var(--color-neutral-600);
}

.design4 .hover-border-neutral-500:hover {
  border-color: var(--color-neutral-500);
}

.design4 .hover-border-neutral-400:hover {
  border-color: var(--color-neutral-400);
}

.design4 .hover-border-neutral-300:hover {
  border-color: var(--color-neutral-300);
}

.design4 .hover-border-neutral-200:hover {
  border-color: var(--color-neutral-200);
}

.design4 .hover-border-neutral-100:hover {
  border-color: var(--color-neutral-100);
}

.design4 .hover-border-neutral-50:hover {
  border-color: var(--color-neutral-50);
}

.design4 .hover-border-neutral-25:hover {
  border-color: var(--color-neutral-25);
}

.design4 .hover-border-primary-900:hover {
  border-color: var(--color-primary-900);
}

.design4 .hover-border-primary-800:hover {
  border-color: var(--color-primary-800);
}

.design4 .hover-border-primary-700:hover {
  border-color: var(--color-primary-700);
}

.design4 .hover-border-primary-600:hover {
  border-color: var(--color-primary-600);
}

.design4 .hover-border-primary-500:hover {
  border-color: var(--color-primary-500);
}

.design4 .hover-border-primary-400:hover {
  border-color: var(--color-primary-400);
}

.design4 .hover-border-primary-300:hover {
  border-color: var(--color-primary-300);
}

.design4 .hover-border-primary-200:hover {
  border-color: var(--color-primary-200);
}

.design4 .hover-border-primary-100:hover {
  border-color: var(--color-primary-100);
}

.design4 .hover-border-primary-50:hover {
  border-color: var(--color-primary-50);
}

.design4 .hover-border-primary-25:hover {
  border-color: var(--color-primary-25);
}

.design4 .hover-border-secondary-900:hover {
  border-color: var(--color-secondary-900);
}

.design4 .hover-border-secondary-800:hover {
  border-color: var(--color-secondary-800);
}

.design4 .hover-border-secondary-700:hover {
  border-color: var(--color-secondary-700);
}

.design4 .hover-border-secondary-600:hover {
  border-color: var(--color-secondary-600);
}

.design4 .hover-border-secondary-500:hover {
  border-color: var(--color-secondary-500);
}

.design4 .hover-border-secondary-400:hover {
  border-color: var(--color-secondary-400);
}

.design4 .hover-border-secondary-300:hover {
  border-color: var(--color-secondary-300);
}

.design4 .hover-border-secondary-200:hover {
  border-color: var(--color-secondary-200);
}

.design4 .hover-border-secondary-100:hover {
  border-color: var(--color-secondary-100);
}

.design4 .hover-border-secondary-50:hover {
  border-color: var(--color-secondary-50);
}

.design4 .hover-border-tertiary-900:hover {
  border-color: var(--color-tertiary-900);
}

.design4 .hover-border-tertiary-800:hover {
  border-color: var(--color-tertiary-800);
}

.design4 .hover-border-tertiary-700:hover {
  border-color: var(--color-tertiary-700);
}

.design4 .hover-border-tertiary-600:hover {
  border-color: var(--color-tertiary-600);
}

.design4 .hover-border-tertiary-500:hover {
  border-color: var(--color-tertiary-500);
}

.design4 .hover-border-tertiary-400:hover {
  border-color: var(--color-tertiary-400);
}

.design4 .hover-border-tertiary-300:hover {
  border-color: var(--color-tertiary-300);
}

.design4 .hover-border-tertiary-200:hover {
  border-color: var(--color-tertiary-200);
}

.design4 .hover-border-tertiary-100:hover {
  border-color: var(--color-tertiary-100);
}

.design4 .hover-border-tertiary-50:hover {
  border-color: var(--color-tertiary-50);
}

.design4 .hover-border-success-900:hover {
  border-color: var(--color-success-900);
}

.design4 .hover-border-success-800:hover {
  border-color: var(--color-success-800);
}

.design4 .hover-border-success-700:hover {
  border-color: var(--color-success-700);
}

.design4 .hover-border-success-600:hover {
  border-color: var(--color-success-600);
}

.design4 .hover-border-success-500:hover {
  border-color: var(--color-success-500);
}

.design4 .hover-border-success-400:hover {
  border-color: var(--color-success-400);
}

.design4 .hover-border-success-300:hover {
  border-color: var(--color-success-300);
}

.design4 .hover-border-success-200:hover {
  border-color: var(--color-success-200);
}

.design4 .hover-border-success-100:hover {
  border-color: var(--color-success-100);
}

.design4 .hover-border-success-50:hover {
  border-color: var(--color-success-50);
}

.design4 .hover-border-success-25:hover {
  border-color: var(--color-success-25);
}

.design4 .hover-border-warning-900:hover {
  border-color: var(--color-warning-900);
}

.design4 .hover-border-warning-800:hover {
  border-color: var(--color-warning-800);
}

.design4 .hover-border-warning-700:hover {
  border-color: var(--color-warning-700);
}

.design4 .hover-border-warning-600:hover {
  border-color: var(--color-warning-600);
}

.design4 .hover-border-warning-500:hover {
  border-color: var(--color-warning-500);
}

.design4 .hover-border-warning-400:hover {
  border-color: var(--color-warning-400);
}

.design4 .hover-border-warning-300:hover {
  border-color: var(--color-warning-300);
}

.design4 .hover-border-warning-200:hover {
  border-color: var(--color-warning-200);
}

.design4 .hover-border-warning-100:hover {
  border-color: var(--color-warning-100);
}

.design4 .hover-border-warning-50:hover {
  border-color: var(--color-warning-50);
}

.design4 .hover-border-warning-25:hover {
  border-color: var(--color-warning-25);
}

.design4 .hover-border-error-900:hover {
  border-color: var(--color-error-900);
}

.design4 .hover-border-error-800:hover {
  border-color: var(--color-error-800);
}

.design4 .hover-border-error-700:hover {
  border-color: var(--color-error-700);
}

.design4 .hover-border-error-600:hover {
  border-color: var(--color-error-600);
}

.design4 .hover-border-error-500:hover {
  border-color: var(--color-error-500);
}

.design4 .hover-border-error-400:hover {
  border-color: var(--color-error-400);
}

.design4 .hover-border-error-300:hover {
  border-color: var(--color-error-300);
}

.design4 .hover-border-error-200:hover {
  border-color: var(--color-error-200);
}

.design4 .hover-border-error-100:hover {
  border-color: var(--color-error-100);
}

.design4 .hover-border-error-50:hover {
  border-color: var(--color-error-50);
}

.design4 .hover-border-error-25:hover {
  border-color: var(--color-error-25);
}

.design4 .hover-border-quaternary-900:hover {
  border-color: var(--color-quaternary-900);
}

.design4 .hover-border-quaternary-800:hover {
  border-color: var(--color-quaternary-800);
}

.design4 .hover-border-quaternary-700:hover {
  border-color: var(--color-quaternary-700);
}

.design4 .hover-border-quaternary-600:hover {
  border-color: var(--color-quaternary-600);
}

.design4 .hover-border-quaternary-500:hover {
  border-color: var(--color-quaternary-500);
}

.design4 .hover-border-quaternary-400:hover {
  border-color: var(--color-quaternary-400);
}

.design4 .hover-border-quaternary-300:hover {
  border-color: var(--color-quaternary-300);
}

.design4 .hover-border-quaternary-200:hover {
  border-color: var(--color-quaternary-200);
}

.design4 .hover-border-quaternary-100:hover {
  border-color: var(--color-quaternary-100);
}

.design4 .hover-border-quaternary-50:hover {
  border-color: var(--color-quaternary-50);
}

.design4 .hover-border-quaternary-25:hover {
  border-color: var(--color-quaternary-25);
}

.design4 .border-solid {
  border-style: solid;
}

.design4 .border-dashed {
  border-style: dashed;
}

.design4 .border-dotted {
  border-style: dotted;
}

.design .border-0 {
  border-width: 0;
}

.design .border-1 {
  border-width: 1px;
}

.design .border-2 {
  border-width: 2px;
}

.design .border-3 {
  border-width: 3px;
}

.design .border-4 {
  border-width: 4px;
}

h1 {
  font-size: var(--size-xl);
  line-height: var(--size-xl-line-height);
  font-weight: var(--bold-text-weight);
}

h2 {
  font-size: var(--size-lg);
  line-height: var(--size-lg-line-height);
  font-weight: var(--bold-text-weight);
}

h3 {
  font-size: var(--size-md);
  line-height: var(--size-md-line-height);
  font-weight: var(--bold-text-weight);
}

h4 {
  font-size: var(--size-sm);
  line-height: var(--size-sm-line-height);
  font-weight: var(--bold-text-weight);
}

.design4 svg .bg-transparent {
  fill: rgba(0, 0, 0, 0);
}

.design4 svg .bg-black {
  fill: var(--color-black);
}

.design4 svg .bg-white {
  fill: var(--color-white);
}

.design4 svg .bg-primary-900 {
  fill: var(--color-primary-900);
}

.design4 svg .bg-primary-800 {
  fill: var(--color-primary-800);
}

.design4 svg .bg-primary-700 {
  fill: var(--color-primary-700);
}

.design4 svg .bg-primary-600 {
  fill: var(--color-primary-600);
}

.design4 svg .bg-primary-500 {
  fill: var(--color-primary-500);
}

.design4 svg .bg-primary-400 {
  fill: var(--color-primary-400);
}

.design4 svg .bg-primary-300 {
  fill: var(--color-primary-300);
}

.design4 svg .bg-primary-200 {
  fill: var(--color-primary-200);
}

.design4 svg .bg-primary-100 {
  fill: var(--color-primary-100);
}

.design4 svg .bg-primary-50 {
  fill: var(--color-primary-50);
}

.design4 svg .bg-primary-25 {
  fill: var(--color-primary-25);
}

.design4 svg .bg-secondary-900 {
  fill: var(--color-secondary-900);
}

.design4 svg .bg-secondary-800 {
  fill: var(--color-secondary-800);
}

.design4 svg .bg-secondary-700 {
  fill: var(--color-secondary-700);
}

.design4 svg .bg-secondary-600 {
  fill: var(--color-secondary-600);
}

.design4 svg .bg-secondary-500 {
  fill: var(--color-secondary-500);
}

.design4 svg .bg-secondary-400 {
  fill: var(--color-secondary-400);
}

.design4 svg .bg-secondary-300 {
  fill: var(--color-secondary-300);
}

.design4 svg .bg-secondary-200 {
  fill: var(--color-secondary-200);
}

.design4 svg .bg-secondary-100 {
  fill: var(--color-secondary-100);
}

.design4 svg .bg-secondary-50 {
  fill: var(--color-secondary-50);
}

.design4 svg .bg-secondary-25 {
  fill: var(--color-secondary-25);
}

.design4 svg .bg-tertiary-900 {
  fill: var(--color-tertiary-900);
}

.design4 svg .bg-tertiary-800 {
  fill: var(--color-tertiary-800);
}

.design4 svg .bg-tertiary-700 {
  fill: var(--color-tertiary-700);
}

.design4 svg .bg-tertiary-600 {
  fill: var(--color-tertiary-600);
}

.design4 svg .bg-tertiary-500 {
  fill: var(--color-tertiary-500);
}

.design4 svg .bg-tertiary-400 {
  fill: var(--color-tertiary-400);
}

.design4 svg .bg-tertiary-300 {
  fill: var(--color-tertiary-300);
}

.design4 svg .bg-tertiary-200 {
  fill: var(--color-tertiary-200);
}

.design4 svg .bg-tertiary-100 {
  fill: var(--color-tertiary-100);
}

.design4 svg .bg-tertiary-50 {
  fill: var(--color-tertiary-50);
}

.design4 svg .bg-tertiary-25 {
  fill: var(--color-tertiary-25);
}

.design4 svg .bg-warning-900 {
  fill: var(--color-warning-900);
}

.design4 svg .bg-warning-800 {
  fill: var(--color-warning-800);
}

.design4 svg .bg-warning-700 {
  fill: var(--color-warning-700);
}

.design4 svg .bg-warning-600 {
  fill: var(--color-warning-600);
}

.design4 svg .bg-warning-500 {
  fill: var(--color-warning-500);
}

.design4 svg .bg-warning-400 {
  fill: var(--color-warning-400);
}

.design4 svg .bg-warning-300 {
  fill: var(--color-warning-300);
}

.design4 svg .bg-warning-200 {
  fill: var(--color-warning-200);
}

.design4 svg .bg-warning-100 {
  fill: var(--color-warning-100);
}

.design4 svg .bg-warning-50 {
  fill: var(--color-warning-50);
}

.design4 svg .bg-warning-25 {
  fill: var(--color-warning-25);
}

.design4 svg .bg-error-900 {
  fill: var(--color-error-900);
}

.design4 svg .bg-error-800 {
  fill: var(--color-error-800);
}

.design4 svg .bg-error-700 {
  fill: var(--color-error-700);
}

.design4 svg .bg-error-600 {
  fill: var(--color-error-600);
}

.design4 svg .bg-error-500 {
  fill: var(--color-error-500);
}

.design4 svg .bg-error-400 {
  fill: var(--color-error-400);
}

.design4 svg .bg-error-300 {
  fill: var(--color-error-300);
}

.design4 svg .bg-error-200 {
  fill: var(--color-error-200);
}

.design4 svg .bg-error-100 {
  fill: var(--color-error-100);
}

.design4 svg .bg-error-50 {
  fill: var(--color-error-50);
}

.design4 svg .bg-error-25 {
  fill: var(--color-error-25);
}

.design4 svg .bg-success-900 {
  fill: var(--color-success-900);
}

.design4 svg .bg-success-800 {
  fill: var(--color-success-800);
}

.design4 svg .bg-success-700 {
  fill: var(--color-success-700);
}

.design4 svg .bg-success-600 {
  fill: var(--color-success-600);
}

.design4 svg .bg-success-500 {
  fill: var(--color-success-500);
}

.design4 svg .bg-success-400 {
  fill: var(--color-success-400);
}

.design4 svg .bg-success-300 {
  fill: var(--color-success-300);
}

.design4 svg .bg-success-200 {
  fill: var(--color-success-200);
}

.design4 svg .bg-success-100 {
  fill: var(--color-success-100);
}

.design4 svg .bg-success-50 {
  fill: var(--color-success-50);
}

.design4 svg .bg-success-25 {
  fill: var(--color-success-25);
}

.design4 svg .bg-quaternary-900 {
  fill: var(--color-quaternary-900);
}

.design4 svg .bg-quaternary-800 {
  fill: var(--color-quaternary-800);
}

.design4 svg .bg-quaternary-700 {
  fill: var(--color-quaternary-700);
}

.design4 svg .bg-quaternary-600 {
  fill: var(--color-quaternary-600);
}

.design4 svg .bg-quaternary-500 {
  fill: var(--color-quaternary-500);
}

.design4 svg .bg-quaternary-400 {
  fill: var(--color-quaternary-400);
}

.design4 svg .bg-quaternary-300 {
  fill: var(--color-quaternary-300);
}

.design4 svg .bg-quaternary-200 {
  fill: var(--color-quaternary-200);
}

.design4 svg .bg-quaternary-100 {
  fill: var(--color-quaternary-100);
}

.design4 svg .bg-quaternary-50 {
  fill: var(--color-quaternary-50);
}

.design4 svg .bg-quaternary-25 {
  fill: var(--color-quaternary-25);
}

.design4 .icon.bg-transparent svg {
  fill: rgba(0, 0, 0, 0);
}

.design4 .icon.bg-black svg {
  fill: var(--color-black);
}

.design4 .icon.bg-white svg {
  fill: var(--color-white);
}

.design4 .icon.bg-neutral-900 svg {
  fill: var(--color-neutral-900);
}

.design4 .icon.bg-neutral-800 svg {
  fill: var(--color-neutral-800);
}

.design4 .icon.bg-neutral-700 svg {
  fill: var(--color-neutral-700);
}

.design4 .icon.bg-neutral-600 svg {
  fill: var(--color-neutral-600);
}

.design4 .icon.bg-neutral-500 svg {
  fill: var(--color-neutral-500);
}

.design4 .icon.bg-neutral-400 svg {
  fill: var(--color-neutral-400);
}

.design4 .icon.bg-neutral-300 svg {
  fill: var(--color-neutral-300);
}

.design4 .icon.bg-neutral-200 svg {
  fill: var(--color-neutral-200);
}

.design4 .icon.bg-neutral-100 svg {
  fill: var(--color-neutral-100);
}

.design4 .icon.bg-neutral-50 svg {
  fill: var(--color-neutral-50);
}

.design4 .icon.bg-neutral-25 svg {
  fill: var(--color-neutral-25);
}

.design4 .icon.bg-primary-900 svg {
  fill: var(--color-primary-900);
}

.design4 .icon.bg-primary-800 svg {
  fill: var(--color-primary-800);
}

.design4 .icon.bg-primary-700 svg {
  fill: var(--color-primary-700);
}

.design4 .icon.bg-primary-600 svg {
  fill: var(--color-primary-600);
}

.design4 .icon.bg-primary-500 svg {
  fill: var(--color-primary-500);
}

.design4 .icon.bg-primary-400 svg {
  fill: var(--color-primary-400);
}

.design4 .icon.bg-primary-300 svg {
  fill: var(--color-primary-300);
}

.design4 .icon.bg-primary-200 svg {
  fill: var(--color-primary-200);
}

.design4 .icon.bg-primary-100 svg {
  fill: var(--color-primary-100);
}

.design4 .icon.bg-primary-50 svg {
  fill: var(--color-primary-50);
}

.design4 .icon.bg-primary-25 svg {
  fill: var(--color-primary-25);
}

.design4 .icon.bg-secondary-900 svg {
  fill: var(--color-secondary-900);
}

.design4 .icon.bg-secondary-800 svg {
  fill: var(--color-secondary-800);
}

.design4 .icon.bg-secondary-700 svg {
  fill: var(--color-secondary-700);
}

.design4 .icon.bg-secondary-600 svg {
  fill: var(--color-secondary-600);
}

.design4 .icon.bg-secondary-500 svg {
  fill: var(--color-secondary-500);
}

.design4 .icon.bg-secondary-400 svg {
  fill: var(--color-secondary-400);
}

.design4 .icon.bg-secondary-300 svg {
  fill: var(--color-secondary-300);
}

.design4 .icon.bg-secondary-200 svg {
  fill: var(--color-secondary-200);
}

.design4 .icon.bg-secondary-100 svg {
  fill: var(--color-secondary-100);
}

.design4 .icon.bg-secondary-50 svg {
  fill: var(--color-secondary-50);
}

.design4 .icon.bg-secondary-25 svg {
  fill: var(--color-secondary-25);
}

.design4 .icon.bg-tertiary-900 svg {
  fill: var(--color-tertiary-900);
}

.design4 .icon.bg-tertiary-800 svg {
  fill: var(--color-tertiary-800);
}

.design4 .icon.bg-tertiary-700 svg {
  fill: var(--color-tertiary-700);
}

.design4 .icon.bg-tertiary-600 svg {
  fill: var(--color-tertiary-600);
}

.design4 .icon.bg-tertiary-500 svg {
  fill: var(--color-tertiary-500);
}

.design4 .icon.bg-tertiary-400 svg {
  fill: var(--color-tertiary-400);
}

.design4 .icon.bg-tertiary-300 svg {
  fill: var(--color-tertiary-300);
}

.design4 .icon.bg-tertiary-200 svg {
  fill: var(--color-tertiary-200);
}

.design4 .icon.bg-tertiary-100 svg {
  fill: var(--color-tertiary-100);
}

.design4 .icon.text-black svg path {
  stroke: var(--color-black);
}

.design4 .icon.text-white svg path {
  stroke: var(--color-white);
}

.design4 .icon.text-neutral-900 svg path {
  stroke: var(--color-neutral-900);
}

.design4 .icon.text-neutral-800 svg path {
  stroke: var(--color-neutral-800);
}

.design4 .icon.text-neutral-700 svg path {
  stroke: var(--color-neutral-700);
}

.design4 .icon.text-neutral-600 svg path {
  stroke: var(--color-neutral-600);
}

.design4 .icon.text-neutral-500 svg path {
  stroke: var(--color-neutral-500);
}

.design4 .icon.text-neutral-400 svg path {
  stroke: var(--color-neutral-400);
}

.design4 .icon.text-neutral-300 svg path {
  stroke: var(--color-neutral-300);
}

.design4 .icon.text-neutral-200 svg path {
  stroke: var(--color-neutral-200);
}

.design4 .icon.text-neutral-100 svg path {
  stroke: var(--color-neutral-100);
}

.design4 .icon.text-neutral-50 svg path {
  stroke: var(--color-neutral-50);
}

.design4 .icon.text-neutral-25 svg path {
  stroke: var(--color-neutral-25);
}

.design4 .icon.text-primary-900 svg path {
  stroke: var(--color-primary-900);
}

.design4 .icon.text-primary-800 svg path {
  stroke: var(--color-primary-800);
}

.design4 .icon.text-primary-700 svg path {
  stroke: var(--color-primary-700);
}

.design4 .icon.text-primary-600 svg path {
  stroke: var(--color-primary-600);
}

.design4 .icon.text-primary-500 svg path {
  stroke: var(--color-primary-500);
}

.design4 .icon.text-primary-400 svg path {
  stroke: var(--color-primary-400);
}

.design4 .icon.text-primary-300 svg path {
  stroke: var(--color-primary-300);
}

.design4 .icon.text-primary-200 svg path {
  stroke: var(--color-primary-200);
}

.design4 .icon.text-primary-100 svg path {
  stroke: var(--color-primary-100);
}

.design4 .icon.text-primary-50 svg path {
  stroke: var(--color-primary-50);
}

.design4 .icon.text-secondary-900 svg path {
  stroke: var(--color-secondary-900);
}

.design4 .icon.text-secondary-800 svg path {
  stroke: var(--color-secondary-800);
}

.design4 .icon.text-secondary-700 svg path {
  stroke: var(--color-secondary-700);
}

.design4 .icon.text-secondary-600 svg path {
  stroke: var(--color-secondary-600);
}

.design4 .icon.text-secondary-500 svg path {
  stroke: var(--color-secondary-500);
}

.design4 .icon.text-secondary-400 svg path {
  stroke: var(--color-secondary-400);
}

.design4 .icon.text-secondary-300 svg path {
  stroke: var(--color-secondary-300);
}

.design4 .icon.text-secondary-200 svg path {
  stroke: var(--color-secondary-200);
}

.design4 .icon.text-secondary-100 svg path {
  stroke: var(--color-secondary-100);
}

.design4 .icon.text-secondary-50 svg path {
  stroke: var(--color-secondary-50);
}

.design4 .icon.text-tertiary-900 svg path {
  stroke: var(--color-tertiary-900);
}

.design4 .icon.text-tertiary-800 svg path {
  stroke: var(--color-tertiary-800);
}

.design4 .icon.text-tertiary-700 svg path {
  stroke: var(--color-tertiary-700);
}

.design4 .icon.text-tertiary-600 svg path {
  stroke: var(--color-tertiary-600);
}

.design4 .icon.text-tertiary-500 svg path {
  stroke: var(--color-tertiary-500);
}

.design4 .icon.text-tertiary-400 svg path {
  stroke: var(--color-tertiary-400);
}

.design4 .icon.text-tertiary-300 svg path {
  stroke: var(--color-tertiary-300);
}

.design4 .icon.text-tertiary-200 svg path {
  stroke: var(--color-tertiary-200);
}

.design4 .icon.text-tertiary-100 svg path {
  stroke: var(--color-tertiary-100);
}

.design4 .icon.text-tertiary-50 svg path {
  stroke: var(--color-tertiary-50);
}

.design4 .icon.text-success-900 svg path {
  stroke: var(--color-success-900);
}

.design4 .icon.text-success-800 svg path {
  stroke: var(--color-success-800);
}

.design4 .icon.text-success-700 svg path {
  stroke: var(--color-success-700);
}

.design4 .icon.text-success-600 svg path {
  stroke: var(--color-success-600);
}

.design4 .icon.text-success-500 svg path {
  stroke: var(--color-success-500);
}

.design4 .icon.text-success-400 svg path {
  stroke: var(--color-success-400);
}

.design4 .icon.text-success-300 svg path {
  stroke: var(--color-success-300);
}

.design4 .icon.text-success-200 svg path {
  stroke: var(--color-success-200);
}

.design4 .icon.text-success-100 svg path {
  stroke: var(--color-success-100);
}

.design4 .icon.text-success-50 svg path {
  stroke: var(--color-success-50);
}

.design4 .icon.text-warning-900 svg path {
  stroke: var(--color-warning-900);
}

.design4 .icon.text-warning-800 svg path {
  stroke: var(--color-warning-800);
}

.design4 .icon.text-warning-700 svg path {
  stroke: var(--color-warning-700);
}

.design4 .icon.text-warning-600 svg path {
  stroke: var(--color-warning-600);
}

.design4 .icon.text-warning-500 svg path {
  stroke: var(--color-warning-500);
}

.design4 .icon.text-warning-400 svg path {
  stroke: var(--color-warning-400);
}

.design4 .icon.text-warning-300 svg path {
  stroke: var(--color-warning-300);
}

.design4 .icon.text-warning-200 svg path {
  stroke: var(--color-warning-200);
}

.design4 .icon.text-warning-100 svg path {
  stroke: var(--color-warning-100);
}

.design4 .icon.text-warning-50 svg path {
  stroke: var(--color-warning-50);
}

.design4 .icon.text-error-900 svg path {
  stroke: var(--color-error-900);
}

.design4 .icon.text-error-800 svg path {
  stroke: var(--color-error-800);
}

.design4 .icon.text-error-700 svg path {
  stroke: var(--color-error-700);
}

.design4 .icon.text-error-600 svg path {
  stroke: var(--color-error-600);
}

.design4 .icon.text-error-500 svg path {
  stroke: var(--color-error-500);
}

.design4 .icon.text-error-400 svg path {
  stroke: var(--color-error-400);
}

.design4 .icon.text-error-300 svg path {
  stroke: var(--color-error-300);
}

.design4 .icon.text-error-200 svg path {
  stroke: var(--color-error-200);
}

.design4 .icon.text-error-100 svg path {
  stroke: var(--color-error-100);
}

.design4 .icon.text-error-50 svg path {
  stroke: var(--color-error-50);
}

.design4 .icon.text-quaternary-900 svg path {
  stroke: var(--color-quaternary-900);
}

.design4 .icon.text-quaternary-800 svg path {
  stroke: var(--color-quaternary-800);
}

.design4 .icon.text-quaternary-700 svg path {
  stroke: var(--color-quaternary-700);
}

.design4 .icon.text-quaternary-600 svg path {
  stroke: var(--color-quaternary-600);
}

.design4 .icon.text-quaternary-500 svg path {
  stroke: var(--color-quaternary-500);
}

.design4 .icon.text-quaternary-400 svg path {
  stroke: var(--color-quaternary-400);
}

.design4 .icon.text-quaternary-300 svg path {
  stroke: var(--color-quaternary-300);
}

.design4 .icon.text-quaternary-200 svg path {
  stroke: var(--color-quaternary-200);
}

.design4 .icon.text-quaternary-100 svg path {
  stroke: var(--color-quaternary-100);
}

.design4 .icon.text-quaternary-50 svg path {
  stroke: var(--color-quaternary-50);
}

.design4 .icon.text-currentColor svg path {
  stroke: currentColor;
}

.design4 .icon.icon-mini svg {
  width: 12px;
  height: 12px;
}

.design4 .icon.icon-large svg {
  height: 24px;
}

.design4 .icon.icon-small svg {
  height: 20px;
}

.design4 .btn {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  gap: 12px;
}

.design4 .icon {
  display: inline-flex;
}

.design4 .btn-size-sm {
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
}

.design4 .btn-size-md {
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
}

.design4 .btn-size-lg {
  height: 44px;
  line-height: 44px;
  padding: 0 24px;
}

.design4 .btn-size-xl {
  height: 48px;
  line-height: 48px;
  padding: 0 24px;
}

.design4 .btn-size-2xl {
  height: 60px;
  line-height: 60px;
  padding: 0 32px;
}

.design4 .btn.disabled,
.design4 .btn[disabled] {
  opacity: 1 !important;
}

.design4 .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  border-radius: 12px;
}

.design4 .card .card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  gap: 24px;
  width: 100%;
}

.design4 .card.collapsible .card-header {
  cursor: pointer;
}

.design4 .card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 24px 24px 24px;
  width: 100%;
}

.design4-topnav .sub-menu-1 {
  top: 4.1em;
  border-radius: 12px;
  filter: drop-shadow(3px 3px 3px rgba(13, 20, 31, 0.25));
}

.design4 .smart-form fieldset {
  margin: 0;
}

.design4 .smart-form fieldset,
.design4.smart-form fieldset {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  padding: 10px 0;
}

.design4 .form-control--disabled {
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

.design4 input[type='checkbox']:disabled {
  --form-control-color: var(--form-control-disabled);
  color: var(--form-control-disabled);
}

/*input[type="radio"], */
.design4 label.checkbox {
  font-size: var(--size-sm);
  line-height: var(--size-sm-line-height);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(var(--size-xl) * 0.5);
  padding-left: 24px;
}

.design4 label.checkbox input[type='checkbox'] {
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-white);
  color: currentColor;
  width: var(--size-xl);
  height: var(--size-xl);
  transform: translateY(-0.075em);
  place-content: center;
  border: 1px solid var(--color-neutral-300);
  border-radius: 4px;
  display: inline-block;
  float: none;
  left: unset;
  cursor: pointer;
  position: relative;
}

.design4 input[type='checkbox']::before {
  content: '';
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: var(--color-primary-600);
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  display: inline-block;
  left: 19.67%;
  right: 16.67%;
  top: 25%;
  bottom: 29.17%;
  position: absolute;
  transform: scale(0);
}

.design4 input[type='checkbox']:checked {
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-600);
}

.design4 input[type='checkbox']:checked::before {
  transform: scale(1);
}

.design4 input[type='checkbox']:hover,
.design4 input[type='checkbox']:focus {
  background: var(--color-primary-100);
  border: 1px solid var(--color-primary-600);
}

.design4 input[type='radio']:hover,
.design4 input[type='radio']:focus {
  background: var(--color-primary-100);
  border: 1px solid var(--color-primary-600);
}

.design4.smart-form *,
.design4.smart-form section > *:after,
.design4.smart-form section > *:before,
.design4 .smart-form *,
.design4 .smart-form section > *:after,
.design4 .smart-form section > *:before {
  box-sizing: border-box !important;
}

.design4 .card.collapsible .card-header::after {
  content: '';
  background-image: url(/public/icons/arrow-down.svg);
  width: 24px;
  height: 24px;
}

.design4 .card.collapsible.opened .card-header::after {
  transform: rotate(180deg);
  transition: transform 0.1s ease-in-out;
}

.design4 .card.collapsible.closed .card-header::after {
  background-image: url(/public/icons/arrow-down.svg);

  transition: transform 0.1s ease-in-out;
}

.design4 .card.collapsible.opened .card-body {
  opacity: 1;
  max-height: 1000px;
  transition: opacity 0.5s ease-out, max-height 0.5s ease-out;
}

.design4 .card.collapsible.closed .card-body {
  padding-bottom: 0;
  max-height: 0;
  opacity: 0;

  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.design4 .smart-form fieldset {
  background: none;
}

.smart-form footer {
  padding: 15px;
}

.design4 .smart-form footer {
  display: block !important;
  padding: 15px 0 0 0 !important;
  border-top: none !important;
  background: none !important;
}

.design4 input[type='radio'] {
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-white);
  font: inherit;
  color: currentColor;
  width: var(--default-text-size);
  height: var(--default-text-size);
  transform: translateY(0.0075em);
  place-content: center;
  border: 1px solid var(--color-neutral-300);
  border-radius: 8px;
  display: inline-block;
  float: none;
  left: unset;
  position: absolute;
  margin: 4px 0 0 -20px;
  cursor: pointer;
}

.design4 input[type='radio']:checked {
  border: 1px solid var(--color-primary-600);
  background: var(--color-primary-50);
}

.design4 input[type='radio']::before {
  content: '';
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: var(--color-primary-600);
  transform-origin: bottom left;
  display: inline-block;
  left: 31.25%;
  right: 31.25%;
  top: 31.25%;
  bottom: 31.25%;
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
}

.design4 .smart-form .radio i,
.design4 .smart-form .checkbox i {
  display: none !important;
}

.design4 .smart-form .radio input + i:after,
.design4 .smart-form .checkbox input + i:after {
  content: none !important;
}

.design4 input[type='radio']:checked::before {
  background-color: var(--color-primary-600);
  transform: scale(1);
}

.design4 .card .card-body > * {
  width: 100%;
}

.design4 .smart-form section.form-required-desc {
  padding: 0 !important;
}

.design4 .widget-body-toolbar,
.design4 .smart-form.widget-body-toolbar {
  margin: 0;
  min-height: 42px;
  border-bottom: none;
  background: none;
}

.design4 .dt-toolbar {
  float: none !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 24px !important;
}

.design4 .dt-toolbar > :first-child .dataTables_filter > :only-child,
.design4 .dt-toolbar > :first-child .DTTT,
.design4 .dt-toolbar > :first-child .pagination,
.design4 .dt-toolbar > :first-child .dataTables_length {
  display: flex;
  float: none !important;
}

.design4 .dataTables_filter .input-group-addon {
  float: none;
}

.design4 .dataTables_filter .input-group-addon + .form-control {
  float: none;
  padding: 0;
}

.design4 .dataTable > tbody > tr:nth-of-type(odd) {
  border-bottom: 1px solid var(--color-neutral-200);
  background: var(--color-white);
}

.design4 .dataTable > tbody > tr:nth-of-type(even) {
  border-bottom: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
}

.design4 .table-hover > tbody > tr:hover {
  border-bottom: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-100);
}

.design4 .wizard > .actions ul li {
  margin-left: 0;
}

.design4 .card .card-body > .dataTables_wrapper {
  margin-left: -24px;
  width: calc(100% + 48px);
}

.design4 .dt-toolbar-footer {
  background-color: var(--color-white);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.design4 .dt-toolbar-footer .dataTables_length {
  margin-right: 16px;
}

.design4 div.dataTables_wrapper div.dataTables_info {
  padding: 0;
}

.design4 div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--color-neutral-100);
}

.design4 .dataTables_wrapper li.paginate_button {
  display: flex;
  height: 40px;
  padding: 10px 16px;
  align-items: center;
  border-right: 1px solid var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.design4 .dt-toolbar-footer > :last-child .pagination {
  float: none;
}

.design4 .pagination > li > a,
.design4 .pagination > li > span {
  position: relative;
  float: none;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  color: unset;
  background-color: unset;
  border: none;
  margin-left: 0;
}

.design4 .pagination .disabled {
  color: var(--color-neutral-400);
}

.design4 .pagination > li.active {
  background-color: var(--color-neutral-50);
}

.design4 .pagination > .active > a,
.design4 .pagination > .active > a:hover,
.design4 .pagination > .active > a:focus,
.design4 .pagination > .active > span,
.design4 .pagination > .active > span:hover,
.design4 .pagination > .active > span:focus {
  z-index: 2;
  color: unset;
  background-color: unset;
  border-color: unset;
  cursor: default;
}

.design4 textarea {
  border-radius: 6px !important;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-50) !important;
}

.design4 label.select i {
  right: 14px !important;
  top: 15px !important;
  background: transparent;
  box-shadow: none;
}

.design4 label.select select {
  padding-right: 32px !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-neutral-300) !important;
  background: var(--color-neutral-50) !important;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
}

.design4 .input .icon-append {
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.design4 .input .icon-append + input {
  padding-right: 56px !important;
}

.smart-form fieldset section .input .tooltip,
.smart-form fieldset section .textarea .tooltip {
  background-color: var(--color-neutral-900) !important;
  color: var(--color-neutral-100) !important;
  padding: 16px !important;
  border-radius: 6px !important;
}

.smart-form fieldset section .input .tooltip:after,
.smart-form fieldset section .textarea .tooltip:after {
  border-top-color: var(--color-neutral-900) !important;
}

.design4 input[type='text'],
.design4 input[type='search'],
.design4 input[type='email'],
.design4 input[type='number'],
.design4 input[type='password'],
.design4 input[type='date'],
.design4 input[type='tel'] {
  border-radius: 6px !important;
  border: 1px solid var(--color-neutral-300) !important;
  background: var(--color-neutral-50) !important;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
}

.design4 input[type='text']:focus,
.design4 input[type='text']:active,
.design4 textarea:focus,
.design4 textarea:active,
.design4 select:focus,
.design4 select:active,
.design4 input[type='search']:focus,
.design4 input[type='search']:active,
.design4 input[type='email']:focus,
.design4 input[type='email']:active,
.design4 input[type='number']:focus,
.design4 input[type='number']:active,
.design4 input[type='password']:focus,
.design4 input[type='password']:active,
.design4 input[type='date']:focus,
.design4 input[type='date']:active,
.design4 input[type='tel']:focus,
.design4 input[type='tel']:active {
  border: 1px solid var(--color-primary-300) !important;
}

.design4 .buttons-search .dataTables_filter .input-group-addon {
  border-radius: 6px 0px 0px 6px !important;
  height: 40px;
  line-height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px !important;
}

.design4 .buttons-search .dataTables_filter input[type='search'] {
  border-radius: 0px 8px 8px 0px !important;
}

.design4 ::placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}

.design4 .select i {
  right: 15px !important;
}

.design4 .wizard > .steps ul[role='tablist'] li:after {
  right: -15px;
}

div.tl_dialog {
  background-color: #f6fef9;
  border: 1px solid #a6f4c5 !important;
}

#no-case-alert {
  color: #f04438;
  border-radius: 8px;
  background-color: #fff;
}