* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
 
    /* scroll */
    --scrollbar-size: 10px;
 
    /* Colors */
    --gray-25: #fcfcfd !important;
    --gray-50: #f9fafb !important;
    --gray-100: #f2f4f7 !important;
    --gray-200: #eaecf0 !important;
    --gray-300: #d0d5dd !important;
    --gray-400: #98a2b3 !important;
    --gray-500: #667085 !important;
    --gray-600: #475467 !important;
    --gray-700: #344054 !important;
    --gray-800: #1d2939 !important;
    --gray-900: #101828 !important;
 
    /* Primary-Color */
    --primary-25: #bed2ff !important;
    --primary-50: #aec6ff !important;
    --primary-100: #9dbaf0 !important;
    --primary-200: #9dbaf0 !important;
    --primary-300: #7da2f5 !important;
    --primary-400: #6d96eb !important;
    --primary-500: #5d8ae1 !important;
    --primary-600: #4d7ed7 !important;
    --primary-700: #3d72cd !important;
    --primary-800: #2d66c3 !important;
    --primary-900: #0d5db8 !important;
 
    /* Error-Color */
    --error-25: #fffbfa;
    --error-50: #fef3f2;
    --error-100: #fee4e2;
    --error-200: #fecdca;
    --error-300: #fda29b;
    --error-400: #f97066;
    --error-500: #f04438;
    --error-600: #d92d20;
    --error-700: #b42318;
    --error-800: #912018;
    --error-900: #7a271a;
 
    /* Warning-Color */
    --warning-25: #fffcf5;
    --warning-50: #fffaeb;
    --warning-100: #fef0c7;
    --warning-200: #fedf89;
    --warning-300: #fec84b;
    --warning-400: #fdb022;
    --warning-500: #f79009;
    --warning-600: #dc6803;
    --warning-700: #b54708;
    --warning-800: #93370d;
    --warning-900: #7a2e0e;
 
    /*  Success-Color */
    --success-25: #f6fef9;
    --success-50: #ecfdf3;
    --success-100: #d1fadf;
    --success-200: #a6f4c5;
    --success-300: #6ce9a6;
    --success-400: #32d583;
    --success-500: #12b76a;
    --success-600: #039855;
    --success-700: #027a48;
    --success-800: #05603a;
    --success-900: #054f31;
 
    /* Colors G2 */
 
    /* Primary-Color */
    --blue-50: #eaf2ff;
    --blue-100: #d5e5ff;
    --blue-200: #a6c8ff;
    --blue-300: #77abff;
    --blue-400: #489eff;
    --blue-500: #1254ff; /* Base */
    --blue-600: #0041cc;
    --blue-700: #003199;
    --blue-800: #002066;
    --blue-900: #001033;
 
    /* Error-Color */
    --red-50: #ffe8e0;
    --red-100: #ffd1c1;
    --red-200: #ffa392;
    --red-300: #ff7c63;
    --red-400: #ff5534;
    --red-500: #f76120;
    --red-600: #c23e18;
    --red-700: #911a0f;
    --red-800: #5f0e08;
    --red-900: #2e0704;
 
    /* Warning-Color */
    --yellow-50: #fff8e1;
    --yellow-100: #fff0c2;
    --yellow-200: #ffe999;
    --yellow-300: #ffdb70;
    --yellow-400: #ffce47;
    --yellow-500: #ffb838; /* Base */
    --yellow-600: #cc971f;
    --yellow-700: #996e15;
    --yellow-800: #66460c;
    --yellow-900: #332306;
 
    /*  Success-Color */
    --green-50: #e5f4e0;
    --green-100: #c9e9c1;
    --green-200: #9edf99;
    --green-300: #73d471;
    --green-400: #47c948;
    --green-500: #238202; /* Base */
    --green-600: #1a6300;
    --green-700: #113f00;
    --green-800: #092600;
    --green-900: #040d00;
 
    /* Warning-Color */
    --orange-25: #fffcf5;
    --orange-50: #fffaeb;
    --orange-100: #fef0c7;
    --orange-200: #fedf89;
    --orange-300: #fec84b;
    --orange-400: #fdb022;
    --orange-500: #f79009;
    --orange-600: #dc6803;
    --orange-700: #b54708;
    --orange-800: #93370d;
    --orange-900: #7a2e0e;
 
    /* Fonts */
    --body-font: "Inter", sans-serif;
    --text-small-xs: 12px !important; /* 12px */
    --text-small-sm: 14px !important; /* 14px */
    --text-small-md: 16px !important; /* 16px */
    --text-small-lg: 18px !important; /* 18px */
    --text-small-xl: 20px !important; /* 20px */
    --text-headline-sm: 24px !important; /* 24px */
    --text-headline-md: 28px !important; /* 28px */
    --text-headline-lg: 35px !important; /* 35px */
    --text-display-sm: 48px !important; /* 48px */
    --text-display-md: 60px !important; /* 60px */
    --text-display-lg: 72px !important; /* 72px */
 
    /* Font weight */
    --weight-regular: 400 !important;
    --weight-medium: 500 !important;
    --weight-semibold: 600 !important;
    --weight-bold: 700 !important;
 
    --container-width-lg: 95% !important;
    --container-width-md: 95% !important;
    --container-width-ms: 95% !important;
  }
 
  html {
    scroll-behavior: smooth;
    /* scrollbar-width: thin;
    scrollbar-color: var(--gray-200) var(--gray-300); */
  }
 
  body {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  }
 
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
 
  li {
    margin: 0;
    padding: 0;
  }
 
  body,
  input,
  textarea,
  button {
    /* color: var(--gray-500); */
  }
 
  img,
  picture,
  video,
  svg {
    display: block;
    max-width: 100%;
  }
 
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
 
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
    color: var(--gray-800);
    font-weight: 600;
  }
 
  #root,
  #__next {
    isolation: isolate;
  }
 
  button {
    cursor: pointer;
  }
 
  @media (max-width: 1080px) {
    html {
      font-size: 93.75%;
    }
  }
 
  @media (max-width: 720px) {
    html {
      font-size: 87.5%;
    }
  }
  .container-app {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
  }
 
  .main-app {
    height: calc(100vh - 60px);
  }
 
  .scroll-bar {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) var(--gray-200);
  }
 
  .bar {
    &::-webkit-scrollbar {
      width: 4px;
      height: 5px;
    }
 
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--gray-300);
      border-radius: 2px;
    }
  }