:root {
  --_black: 0, 0%, 0%;
  --_grey-600: 0, 0%, 20%;
  --_grey-500: 0, 0%, 31%;
  --_grey-400: 0, 0%, 51%;
  --_grey-300: 0, 0%, 74%;
  --_grey-200: 0, 0%, 88%;
  --_grey-100: 20, 30%, 96%;
  --_white: 0, 0%, 100%;

  --ntm-black: hsl(var(--_black));
  --ntm-grey-600: hsl(var(--_grey-600));
  --ntm-grey-500: hsl(var(--_grey-500));
  --ntm-grey-400: hsl(var(--_grey-400));
  --ntm-grey-300: hsl(var(--_grey-300));
  --ntm-grey-200: hsl(var(--_grey-200));
  --ntm-grey-100: hsl(var(--_grey-100));
  --ntm-white: hsl(var(--_white));

  --_primary-500: 203, 100%, 17%;
  --_primary-100: 197, 35%, 92%;

  --ntm-primary-500: hsl(var(--_primary-500));
  --ntm-primary-100: hsl(var(--_primary-100));

  --ntm-primary: var(--ntm-primary-500);
  --ntm-primary-light: var(--ntm-primary-100);

  --_secondary-600: 146, 49%, 36%;
  --_secondary-500: 146, 49%, 46%;
  --_secondary-100: 81, 44%, 92%;

  --ntm-secondary-600: hsl(var(--_secondary-600));
  --ntm-secondary-500: hsl(var(--_secondary-500));
  --ntm-secondary-100: hsl(var(--_secondary-100));

  --ntm-secondary: var(--ntm-secondary-500);
  --ntm-secondary-light: var(--ntm-secondary-100);
  --ntm-secondary-dark: var(--ntm-secondary-600);

  --_positive-500: 146, 49%, 46%;
  --_positive-100: 81, 44%, 92%;

  --ntm-positive-500: hsl(var(--_positive-500));
  --ntm-positive-100: hsl(var(--_positive-100));

  --ntm-positive: var(--ntm-positive-500);
  --ntm-positive-light: var(--ntm-positive-100);

  --_warning-500: 36, 100%, 50%;
  --_warning-100: 19, 90%, 96%;

  --ntm-warning-500: hsl(var(--_warning-500));
  --ntm-warning-100: hsl(var(--_warning-100));

  --ntm-warning: var(--ntm-warning-500);
  --ntm-warning-light: var(--ntm-warning-100);

  --_negative-500: 353, 82%, 42%;
  --_negative-100: 344, 73%, 90%;

  --ntm-negative-500: hsl(var(--_negative-500));
  --ntm-negative-100: hsl(var(--_negative-100));

  --ntm-negative: var(--ntm-negative-500);
  --ntm-negative-light: var(--ntm-negative-100);

  --_info-500: 193, 64%, 51%;
  --_info-100: 197, 35%, 92%;

  --ntm-info-500: hsl(var(--_info-500));
  --ntm-info-100: hsl(var(--_info-100));

  --ntm-info: var(--ntm-info-500);
  --ntm-info-light: var(--ntm-info-100);

  --ntm-spacing-2xs: 0.125rem;
  --ntm-spacing-xs: 0.5rem;
  --ntm-spacing-sm: 1rem;
  --ntm-spacing-md: 1.25rem;
  --ntm-spacing-lg: 2rem;
  --ntm-spacing-xl: 2.5rem;
  --ntm-spacing-2xl: 3rem;
  --ntm-spacing-3xl: 5rem;
  --ntm-spacing-4xl: 8rem;

  --ntm-font-family: 'Roboto Flex', sans-serif;

  --ntm-base-font-size: 20px;

  --ntm-font-size-xs: 0.875rem;
  --ntm-font-size-sm: 1rem;
  --ntm-font-size-md: 1.25rem;
  --ntm-font-size-lg: 1.4375rem;
  --ntm-font-size-xl: 2.3125rem;
  --ntm-font-size-2xl: 3rem;

  --ntm-font-weight-light: 300;
  --ntm-font-weight-regular: 400;
  --ntm-font-weight-bold: 600;

  --ntm-line-height-xs: 1.25rem;
  --ntm-line-height-sm: 1.5rem;
  --ntm-line-height-md: 1.875rem;
  --ntm-line-height-lg: 2.25rem;
  --ntm-line-height-xl: 2.8125rem;
  --ntm-line-height-2xl: 3.75rem;

  --ntm-border-size-xs: 0.0625rem;
  --ntm-border-size-sm: 0.125rem;

  --ntm-border-radius-sm: 0.3125rem;
}

.sidebar-container.css-r1cy5n {
  background-color: var(--ntm-primary);
  color: var(--ntm-white);

  div.sidebar-header.css-1be7p8e {
    padding-left: 0.25rem;
    padding-top: 0.125rem;

    img.css-32o4gv {
      max-width: 130px !important;
    }
  }

  div.search-field.css-omflal {
    background-color: var(--ntm-white);
    height: 2.5rem;
  }

  .sidebar-item.css-ld0a14 {
    border-radius: 0;
    color: var(--ntm-grey-200);
    height: 1.75rem;
    margin-inline: -0.75rem;

    svg {
      &.css-1e3avu6,
      &.css-1omskcr,
      &.css-ndobih,
      &.css-rqpmm3,
      &.css-9ilfw8 {
        color: var(--ntm-grey-200);
      }
    }

    &:hover {
      background-color: var(--ntm-secondary);
      color: var(--ntm-white);
    }

    &[data-selected='true'] {
      background-color: var(--ntm-white);
      color: var(--ntm-primary);
      font-weight: 500;

      svg {
        &.css-1omskcr,
        &.css-ndobih,
        &.css-rqpmm3,
        &.css-9ilfw8 {
          color: var(--ntm-primary);
        }
      }

      &:hover {
        background-color: var(--ntm-secondary);
        color: var(--ntm-white);

        svg {
          &.css-1omskcr,
          &.css-ndobih,
          &.css-rqpmm3,
          &.css-9ilfw8 {
            color: var(--ntm-white);
          }
        }
      }
    }
  }
}