.bp5n61\+suBdME6NT6GlhDQ\=\= {
  position: relative;
  z-index: var(--groovy-z-index-modal);

  & .ReactModal__Overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
  }

  & .ReactModal__Overlay--after-open {
    opacity: 1;
  }

  & .ReactModal__Overlay--before-close {
    opacity: 0;
  }
}

.YgwR7NB42dFKE0Tqkty0bw\=\= {
  /* Raise the modal z-index by 1 */
  z-index: calc(var(--groovy-z-index-modal) + 1);
}

.k8xKLzo3iv6HSHPtnlWr4g\=\= {
  transition: opacity 0.2s ease-in-out;
}

.tF8L\+1ky1IuBFpGPR\+ZhBQ\=\= {
  z-index: var(--modal-z-index);
  position: relative;
  top: 50%;
  left: 50%;
  max-width: 75vw;
  max-height: 85vh;
  overflow: auto;
  background-color: var(--groovy-background-paper);
  border-radius: var(--groovy-border-radius-16);
  box-shadow: var(--groovy-depths-box-shadow);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

  &:focus {
    outline: none;
  }

  @media (width < 960px) {
    max-width: 95vw;
  }
}

.H34ErtTKJei1kprHXCdVfA\=\= {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  max-width: 480px;
  padding: calc(var(--groovy-spacing) * 3);
  text-align: center;
  gap: calc(var(--groovy-spacing) * 3);
  background-color: var(--groovy-background-paper);
  box-shadow: var(--groovy-depths-inside-card);
  border-radius: var(--groovy-border-radius-20);

  @media (width < 1280px) {
    padding: calc(var(--groovy-spacing) * 2);
    margin-right: calc(var(--groovy-spacing) * 1.5);
  }
}

.wJIqIel8wajYhdno5F1oCg\=\= {
  display: -webkit-flex;
  display: flex;
  gap: calc(var(--groovy-spacing) * 1);
  -webkit-justify-content: center;
          justify-content: center;
}

.DO6-grag3Bt2\+z2h4z0rYg\=\= {
  display: grid;
  margin-top: calc(var(--groovy-spacing) * 1);
  gap: calc(var(--groovy-spacing) * 2);
  width: 100%;
}

.OacN\+-aqrU8Py73wmRFcLg\=\= {
  justify-items: center;
}

.cB-bL6yqpeWwoKiUXIAttw\=\= {
  justify-items: left;
}

.v6nrH9RL\+AlRiCMjLuomoA\=\= {
  justify-items: right;
}

.-CYE1\+pqx5qaX2UoyhfLxQ\=\= {
  border-radius: var(--groovy-border-radius-12);
  width: 40px;
  height: 40px;
  display: grid;
  justify-items: center;
  -webkit-align-content: center;
          align-content: center;
}

.\+MNY4V3hMdlPtia6LSvhNg\=\= {
  background-color: var(--groovy-primary-light);
}

.V0u8phwQs6S6i3amPV3KFw\=\= {
  background-color: var(--groovy-yellow-100);
}

.yDmpjdQIdz5aJZBr92PrWw\=\= {
  background-color: var(--groovy-red-100);
}

.zzJdCAEyzz8QDu-zjoN\+dg\=\= {
  max-width: 24px;
  max-height: 24px;
}

.DZMC-tScDVxRHwJtk-mT\+w\=\= {
  width: 100%;
  color: var(--groovy-text-secondary);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  gap: calc(var(--groovy-spacing) * 3);
}

.ntq8dOow\+CpGfwq8FqQTwQ\=\= {
  margin: calc(var(--groovy-spacing) * var(--mt, 0))
    calc(var(--groovy-spacing) * var(--mr, 0)) calc(var(--groovy-spacing) * var(--mb, 0))
    calc(var(--groovy-spacing) * var(--ml, 0));
  padding: calc(var(--groovy-spacing) * var(--pt, 0))
    calc(var(--groovy-spacing) * var(--pr, 0)) calc(var(--groovy-spacing) * var(--pb, 0))
    calc(var(--groovy-spacing) * var(--pl, 0));
}

.XN8F1gu\+XgWfN5trHV626w\=\= {
  display: -webkit-box;
  /** --truncate-max-width is now optional, default to 100%  */
  max-width: var(--truncate-max-width, 100%);
  line-clamp: var(--truncate-x-lines);
  -webkit-line-clamp: var(--truncate-x-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: var(--truncate-overflow-wrap, break-word);
}

.UYXuUJrcsVJ9RwuePTVE6w\=\= {
  display: inline-block;
  /** --truncate-max-width is now optional, default to 100%  */
  max-width: var(--truncate-max-width, 100%);
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: var(--truncate-overflow-wrap, break-word);
}

.jqfzDtVhV-Wy18kyF1pugA\=\= {
  width: var(--icon-width, 24px);
  height: var(--icon-height, 24px);
  color: var(--icon-color, var(--groovy-icon));
  background: var(--icon-background);

  &[data-no-shrink] {
    -webkit-flex-shrink: 0;
            flex-shrink: 0;
  }
}

.YvIe9jT4TzFP7f3KnjJahw\=\= {
  rotate: 90deg;
}

.xFuG96ZOIpa4ATUL3Mo3Zg\=\= {
  rotate: 180deg;
}

.xezZ3W-Wjj-a2lk\+zfkdSQ\=\= {
  rotate: 270deg;
}

.Puz65\+QHdzygA7RtT0nVrA\=\= {
  rotate: -90deg;
}

.s5CWfKDwzraZUdktR5YX\+g\=\= {
  rotate: -180deg;
}

.xFy77ipqViS\+sUID3KJ8Aw\=\= {
  rotate: -270deg;
}

[data-theme="light"] {
  --icon-button-default-hover-background-color: var(--groovy-neutral-200);
}

[data-theme="dark"] {
  --icon-button-default-hover-background-color: var(--groovy-on-dark-500);
}

.mhlYylokHr4jfKzz1Zuylg\=\= {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  border-radius: var(--groovy-border-radius-8);
  width: var(--icon-button-width);
  height: var(--icon-button-height);

  /** Base primary variant colors */
  color: var(--groovy-icon);
  background: var(--icon-button-background);

  /** Base SVG sizing */
  & svg {
    width: var(--icon-button-svg-width, 24px);
    height: var(--icon-button-svg-height, 24px);
  }

  /** Outline variant */
  &[data-variant="outlined"] {
    border: 1.5px var(--icon-border-style, solid) var(--groovy-neutral-300);
  }

  /** Primary variant */
  &[data-variant="primary"] {
    background-color: var(--groovy-primary-main);
    & svg {
      color: var(--groovy-common-white);
    }
  }

  /** Hover states */
  &:hover,
  &:active {
    color: var(--icon-button-hover-color, var(--groovy-text-primary));
    background-color: var(
      --icon-button-hover-background-color,
      var(--icon-button-default-hover-background-color)
    );

    & svg {
      color: var(--icon-button-hover-color, var(--groovy-text-primary));
    }

    /** Primary variant hover override */
    &[data-variant="primary"] {
      background-color: var(--groovy-primary-hover);

      & svg {
        color: var(--groovy-common-white);
      }
    }
  }

  /** Non-hover SVG colors */
  &:not(:hover) svg {
    /** For icon-only button, the default color should be grey 400 */
    color: var(--icon-button-color, var(--groovy-icon));
  }

  &.CmP0ijkn98\+W2b7mvmK0eg\=\= {
    &[data-have-disabled-styles] {
      cursor: not-allowed;
      pointer-events: initial;
      -webkit-user-select: none;
          -ms-user-select: none;
              user-select: none;
      opacity: 0.4;
    }

    /** Outline variant disabled */
    &[data-variant="outline"] {
      border: 1.5px var(--border-style, solid) var(--groovy-neutral-200);
    }

    /** Primary variant disabled */
    &[data-variant="outline"] {
      background-color: var(--groovy-primary-color);
      opacity: 0.4;
    }

    svg {
      color: var(---groovy-grey-300);
    }
  }
}

.QeraF5pEK5rxYZgWkbXyKg\=\= {
  padding: 0;
}

.xl\+h0itBWqxXWn-zw1jpJA\=\= {
  font-size: 48px;
  line-height: 48px;
  @media (width < 960px) {
    font-size: 36px;
    line-height: 40px;
  }
}

.MXrTV1iiahv\+Si6ZA1ZTtA\=\= {
  font-size: 36px;
  line-height: 42px;
  @media (width < 960px) {
    font-size: 30px;
    line-height: 36px;
  }
}

.geYOkdy7Lm3kAmW1\+FTxMA\=\= {
  font-size: 30px;
  line-height: 36px;
  @media (width < 960px) {
    font-size: 24px;
    line-height: 32px;
  }
}

.doae1kmsL\+tza32GzR7r3g\=\= {
  font-size: 24px;
  line-height: 32px;
  @media (width < 960px) {
    font-size: 20px;
    line-height: 28px;
  }
}

.zbLymjjQpXZgJFsL9LWywg\=\= {
  font-size: 20px;
  line-height: 28px;
  @media (width < 960px) {
    font-size: 16px;
    line-height: 24px;
  }
}

.m7VK1o8z3FS7NobSFIBN9g\=\= {
  font-size: 16px;
  line-height: 24px;
  @media (width < 960px) {
    font-size: 14px;
    line-height: 20px;
  }
}

.fxgwSAmN8y6DW01pN9V6GA\=\= {
  font-size: 18px;
  line-height: 28px;
}

.jn6rjUv\+sVhNwPoKQRn60g\=\= {
  font-size: 16px;
  line-height: 24px;
}

.nhyrJanCZ4hEmS1vb57Ygg\=\= {
  font-size: 14px;
  line-height: 20px;
}

.rxPqKRTcPr1LcNaUnNOcSQ\=\= {
  font-size: 12px;
  line-height: 16px;
}

.G\+OxDFcQrTf2CmeX-J9WDg\=\= {
  color: var(--text-color);
  font-weight: var(--text-weight);
  font-style: var(--text-style);
  text-transform: var(--text-transform);
  -webkit-text-decoration: var(--text-decoration);
          text-decoration: var(--text-decoration);
}

.XlQSJW7SpDpKiRjaYHUpyw\=\= {
  line-height: var(--text-line-height);
}

[data-theme="light"] {
  --tooltip-default-background-color: var(--groovy-neutral-700);
  --tooltip-arrow-default-color: var(--groovy-neutral-700);
  --tooltip-text-color: var(--groovy-common-white);
}

[data-theme="dark"] {
  --tooltip-default-background-color: var(--groovy-common-white);
  --tooltip-arrow-default-color: var(--groovy-common-white);
  --tooltip-text-color: var(--groovy-neutral-100);
}

.g4BLvAjPKLbFg\+zI8y5Y1g\=\= {
  background-color: var(
    --tooltip-background-color,
    var(--tooltip-default-background-color)
  );
  border-radius: var(--groovy-border-radius-12);
  padding: calc(var(--groovy-spacing) * 1.25) calc(var(--groovy-spacing) * 1.5)
    calc(var(--groovy-spacing) * 1.25) calc(var(--groovy-spacing) * 1.5);
  box-shadow: var(--groovy-depths-raised-box-shadow);

  /** Override the DiscoText color but style the tooltip arrow separately */
  &:not(.JIiJMxhuXzR1L1ZR9ijV0Q\=\=) {
    & p:not(.vBnDkvXKko-PaCrDAPeUGw\=\=),
    & span:not(.vBnDkvXKko-PaCrDAPeUGw\=\=),
    & ::marker {
      color: var(--tooltip-text-color);
    }
  }

  /** Don't mess with the colours of buttons inside tooltips */
  & a span:not(.vBnDkvXKko-PaCrDAPeUGw\=\=),
  & button span:not(.vBnDkvXKko-PaCrDAPeUGw\=\=) {
    color: unset !important;
  }

  & a {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    text-transform: initial;
  }
}

.vBnDkvXKko-PaCrDAPeUGw\=\= {
  color: var(--tooltip-background-color, var(--tooltip-arrow-default-color));
}

.HtVeWLcmdZYQRGk0cIHfRw\=\= {
  color: var(--groovy-common-white);
}

.Nff-lgV69bCZaWOGIkAS8Q\=\= {
  padding: 0;
  & svg {
    color: var(--groovy-icon);
  }
}

[data-theme="light"] {
  --side-bar-item-text: var(--groovy-neutral-500);
  --side-bar-item-hover-background-color: var(--groovy-neutral-200);
  --side-bar-item-svg-color: var(--groovy-neutral-500);
}

[data-theme="dark"] {
  --side-bar-item-text: var(--groovy-on-dark-200);
  --side-bar-item-hover-background-color: var(--groovy-on-dark-500);
  --side-bar-item-svg-color: var(--groovy-on-dark-200);
}

.YY1fxRYTEg29Zyclx3a7lg\=\= {
  position: relative;
  border-radius: var(--groovy-border-radius-8);
  margin: 0;
  padding: 0;
  width: 100%;

  &,
  &.MGvVr5iORQTFiLt-1Gr9\+w\=\= {
    background-color: var(--groovy-background-paper);
  }

  &[data-is-dragging="true"] {
    box-shadow: var(--groovy-depths-raised-box-shadow);
  }

  & > a {
    width: 100%;
  }

  & p {
    color: var(--side-bar-item-text);
  }

  &:hover {
    background-color: var(--side-bar-item-hover-background-color);

    & p {
      color: var(--groovy-neutral-700);
    }

    /** Show the children element with "showOnHover" module class */
    & ._4RqLmW1YNie2jNfWvl3i1Q\=\= {
      display: -webkit-flex !important;
      display: flex !important;
    }

    /** Hide the children element with "hideOnHover" module class */
    & .lGH2XF1okTmDv0owrUdXhw\=\= {
      display: none !important;
    }
  }

  /** Use selected attribute to override the stubborn MUI default selected styles  */
  &[data-selected="true"],
  &[data-selected="true"]:hover {
    background-color: var(--groovy-primary-main);
    & p {
      color: var(--groovy-primary-contrast-text);
    }
  }
}

.Rt63\+Comdz5g8oGNUJlLrA\=\= {
  & svg {
    color: var(--side-bar-item-svg-color);
  }

  &:hover {
    & svg {
      color: var(--groovy-neutral-700);
    }
  }

  &[data-selected="true"] {
    & svg,
    & .P7uFrGU61SpOx6cXxFe2Iw\=\= svg {
      color: var(--groovy-primary-contrast-text);
      &:hover {
        color: var(--groovy-primary-contrast-text);
      }
    }
  }
}

._9VNLMztnM4LSSO51Hqn96w\=\= {
  display: grid;
  grid-template-columns: -webkit-max-content 1fr -webkit-max-content;
  grid-template-columns: max-content 1fr max-content;
  -webkit-align-items: center;
          align-items: center;
  -webkit-align-content: center;
          align-content: center;
  height: 36px;
  padding: calc(var(--groovy-spacing) * 0.5) calc(var(--groovy-spacing) * 1);
  width: 100%;

  & > p {
    line-height: 20px;
  }
}

._127snpoZK4tHUi1sHQLssw\=\= {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--groovy-background-paper);
  width: 24px;
  height: 24px;
  padding: 1px;
  border-radius: var(--groovy-border-radius-4);
}

.fQHgwWm57keM5Z4-D1ECpA\=\= {
  position: relative;
  display: -webkit-flex;
  display: flex;
  width: auto;
  min-width: 24px;
  height: 24px;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  margin-right: 0;

  &[data-has-left-icon="true"] {
    margin-right: calc(var(--groovy-spacing) * 1);
  }
}

.Z26MYS-Xdp5zJJtUqD6IPw\=\= {
  width: 16px;
  height: 16px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  cursor: pointer;
  &._0W-6iVj0fm\+-hId0ztDbBQ\=\= {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  .fQHgwWm57keM5Z4-D1ECpA\=\= & {
    color: var(--groovy-neutral-400);
  }
}

.P7uFrGU61SpOx6cXxFe2Iw\=\= {
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  gap: calc(var(--groovy-spacing) * 0.75);
  -webkit-flex-grow: 1;
          flex-grow: 1;

  & svg {
    color: var(--groovy-neutral-300);
    &:hover {
      color: var(--groovy-neutral-700);
    }
  }
}

.deHUh1YjEmiSkvNuqJBcfQ\=\= {
  padding: 0;
  width: 100%;
  background: none !important;
  cursor: default;

  &[data-indent="true"] {
    padding-left: 22px;
  }

  & ul {
    width: 100%;
    padding: 0;
  }

  &[data-has-left-icon="true"]::before,
  &[data-indent="true"]::before {
    content: "";
    height: 100%;
    width: 2px;
    background-color: var(--groovy-grey-100);
    border-radius: 2px;
    position: absolute;
    left: 18px;
  }

  &[data-is-collapsed="true"] {
    display: none;
  }
}

.rPUCzyEL9f8YpKPLWGC9jA\=\= {
  display: grid;
  -webkit-align-items: center;
          align-items: center;
}

._9W-YkvPvj-9dCvzGQiKXgA\=\= {
  width: 100%;
}

.VcJzfmWNvBVHW9Y030T6qQ\=\= {
  -webkit-transform: none;
          transform: none;
  border-radius: var(--groovy-border-radius-8);
  &:not(:first-child) {
    margin-top: 1px;
  }
}

/** shareable showOnHover class we can use in all components that need the show on hover class */
._4RqLmW1YNie2jNfWvl3i1Q\=\= {
  display: none !important;
}

.UHqfb1UjQ2Z8-Iff2YTULw\=\= {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
          align-items: center;
  padding-top: 120px;
  text-align: center;
}

._2s1T7XjLzNdRZctZ-\+lLEg\=\= {
  white-space: pre-line;
}

.cEyYeU6mH9UTYKNylMrnSg\=\= {
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.sBbQddX630A5dICR-wWbDg\=\= {
  border-radius: var(--groovy-border-radius-6);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  background-color: var(--badge-color);
  overflow: hidden;
  & img {
    height: 100%;
    width: 100%;
  }

  &:not([data-icon="house"]) svg {
    color: var(--badge-svg-color);
  }

  &.badge-size-16 {
    width: 16px;
    height: 16px;
    font-size: 10px;
    border-radius: 50%;

    & svg {
      height: 16px;
      width: 16px;
    }
  }

  &.badge-size-20 {
    font-size: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;

    & svg {
      height: 20px;
      width: 20px;
    }
  }

  &.badge-size-24 {
    width: 24px;
    height: 24px;
    font-size: 16px;

    & svg {
      height: 24px;
      width: 24px;
    }
  }

  &.badge-size-40 {
    width: 40px;
    height: 40px;
    font-size: 20px;

    & svg {
      height: 24px;
      width: 24px;
    }
  }

  &.badge-size-48 {
    width: 48px;
    height: 48px;
    font-size: 24px;

    & svg {
      height: 42px;
      width: 42px;
    }
  }

  &.badge-size-64 {
    width: 64px;
    height: 64px;
    font-size: 36px;

    & svg {
      height: 64px;
      width: 64px;
    }
  }
}

._8HQKu7nz43OFuxiPy\+51Bw\=\= {
  width: 24px;
}

.Xt7MZpRiifWwf3EqPBVOOQ\=\= {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
}

.x1AHhdfy3VwKjEWSBu3r6g\=\= {
  &:hover {
    background: rgba(0, 0, 0, 0.1);
  }
}

.VCK6FPP6zIRPzz0pEtBxcQ\=\= {
  max-width: 250px;
}

.qzp7zJOkTyu23Q7spr0FiA\=\= {
  &[data-disable-navigation="true"] {
    cursor: unset;
  }
}

.dzEDOmtenK4vKqmd3-6SFg\=\= {
  .vOPiI87BT-mUexEbXfC3zw\=\= svg& {
    color: var(--groovy-neutral-500);
  }
  opacity: 0.5;
}

._8vj0vLFcoHgUMs7U1XvvYQ\=\= {
  position: relative;
  border-radius: var(--groovy-border-radius-6);
  border: 1.5px solid transparent;

  &[data-in-learning-mode="true"][data-is-select="true"] {
    border: 1.5px solid var(--groovy-background-paper);
  }

  &[data-in-learning-mode="true"][data-is-select="false"] {
    border: 1.5px solid var(--groovy-primary-main);
  }
}

.EzsYBybhZDXyv63dbuP0nQ\=\= {
  position: relative;
}

.FkcRbHv7PFB7Zq66wBGw\+w\=\= {
  position: absolute;
  top: 2px;
  right: 0px;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  width: 17.5px;
  height: 13.5px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  border-radius: var(--groovy-border-radius-12);
  background-color: var(--groovy-primary-main);
  border: 1.5px solid var(--groovy-background-paper);

  &:has(._8vj0vLFcoHgUMs7U1XvvYQ\=\=[data-is-selected="true"]) {
    background-color: var(--groovy-background-paper);
    border: 1.5px solid var(--groovy-primary-main);
  }

  & svg {
    width: 9px !important;
    height: 8px !important;

    color: var(--groovy-background-paper);

    &:has(._8vj0vLFcoHgUMs7U1XvvYQ\=\=[data-is-selected="true"]) {
      color: var(--groovy-primary-main);
    }
  }
}

.G8ftTn28EI6HqLRe3iE5uA\=\= {
  cursor: default;
  &:hover {
    background-color: unset;
  }
}

._06Hul9A78TM5xwSBh-p7rA\=\= {
  padding: calc(var(--groovy-spacing) * 0) calc(var(--groovy-spacing) * 2);
  &:hover {
    background-color: unset;
  }
}

.i4xjZASZ5mAE3sycbZNE8A\=\= {
  padding: calc(var(--groovy-spacing) * 0.375);
  &:hover {
    background: rgba(0, 0, 0, 0.1);
  }
}

._2qhAahRzhonQTSOkuntuUg\=\= {
  .PddY8Z-49Q9rCBbgPX1Rdw\=\= svg& {
    color: var(--groovy-neutral-500);
  }

  opacity: 0.5;
}

._6PSKeucM0KxuVGvmjnnvzQ\=\= {
  display: -webkit-flex;
  display: flex;
  padding: var(--groovy-spacing);
}

.jkn0oMGXKeBeNH7j-P58HA\=\= {
  margin-bottom: var(--groovy-spacing);
}

.Nn58hErXm7GsILtCdIEItw\=\= {
  padding: calc(var(--groovy-spacing) * 2);
}

.VYWRgJaA8qi-8FM4OZRcwQ\=\= {
  display: block;
}

.E3ftwJZ7cGbrMmJn1M2mwQ\=\= {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
          align-items: flex-start;
}

.F69XfvNgqj2GCFnYsz6dsw\=\= {
  height: calc(100dvh - var(--app-bar-height));
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1 0 auto;
          flex: 1 0 auto;
}

.Ajpfw8vWstztYLwKnpioCQ\=\= {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  width: 100%;
  min-width: 0;
  height: calc(100dvh - var(--app-bar-height));
  overflow-x: hidden;
  overflow-y: auto;
}

.iRwx1zSraqRJMQU3A4iuPw\=\= {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  min-height: calc(100dvh - var(--app-bar-height) - var(--page-bar-height));
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}

/* Define custom @media query breakpoints (transpiled by postcss-custom-media) */

/**
 * Theme CSS variables
 */
:root {
  /** Spacing unit */
  --groovy-spacing: 8px;

  /** Colors unaffected by dark/light/custom theme */
  --groovy-common-black: #000000;
  --groovy-common-white: #ffffff;

  --groovy-blue-700: #051761;
  --groovy-blue-600: #092ec3;
  --groovy-blue-500: #1542f4;
  --groovy-blue-400: #4467f6;
  --groovy-blue-300: #8aa0f9;
  --groovy-blue-200: #c5d0fc;
  --groovy-blue-100: #eceffe;

  --groovy-red-700: #710a0a;
  --groovy-red-600: #be0e0e;
  --groovy-red-500: #ee1b1b;
  --groovy-red-400: #f25454;
  --groovy-red-300: #f68d8d;
  --groovy-red-200: #fcd9d9;
  --groovy-red-100: #feecec;

  --groovy-green-700: #0f4330;
  --groovy-green-600: #1c9c6d;
  --groovy-green-500: #25d091;
  --groovy-green-400: #52e0ac;
  --groovy-green-300: #86eac5;
  --groovy-green-200: #baf3de;
  --groovy-green-100: #dcf9ee;

  --groovy-yellow-700: #524000;
  --groovy-yellow-600: #e0b000;
  --groovy-yellow-500: #ffce1f;
  --groovy-yellow-400: #ffdc5c;
  --groovy-yellow-300: #ffe999;
  --groovy-yellow-200: #fff2c2;
  --groovy-yellow-100: #fff6d6;

  --groovy-purple-700: #361c5f;
  --groovy-purple-600: #5728a4;
  --groovy-purple-500: #733acf;
  --groovy-purple-400: #966bdb;
  --groovy-purple-300: #b99ce7;
  --groovy-purple-200: #dccef3;
  --groovy-purple-100: #f3effb;

  --groovy-orange-700: #720909;
  --groovy-orange-600: #e03400;
  --groovy-orange-500: #ff531f;
  --groovy-orange-400: #ff825c;
  --groovy-orange-300: #ffb199;
  --groovy-orange-200: #ffe0d6;
  --groovy-orange-100: #ffefeb;

  --groovy-cyan-700: #03464f;
  --groovy-cyan-600: #0d96ab;
  --groovy-cyan-500: #11c8e4;
  --groovy-cyan-400: #41d9f1;
  --groovy-cyan-300: #7ae5f5;
  --groovy-cyan-200: #b3f0f9;
  --groovy-cyan-100: #d9f7fc;

  --groovy-pink-700: #600643;
  --groovy-pink-600: #d40c91;
  --groovy-pink-500: #f32bb0;
  --groovy-pink-400: #f665c6;
  --groovy-pink-300: #f99fdb;
  --groovy-pink-200: #fdd8f1;
  --groovy-pink-100: #feecf8;

  --groovy-grey-700: #18181b;
  --groovy-grey-600: #27272a;
  --groovy-grey-500: #52525b;
  --groovy-grey-400: #a1a1aa;
  --groovy-grey-300: #d4d4d8;
  --groovy-grey-200: #ebebef;
  --groovy-grey-100: #f8f8f8;

  --groovy-on-dark-700: #000000;
  --groovy-on-dark-600: #1b1b1d;
  --groovy-on-dark-500: #27272a;
  --groovy-on-dark-400: #35353d;
  --groovy-on-dark-300: #717179;
  --groovy-on-dark-200: #a1a1aa;
  --groovy-on-dark-100: #f4f4f4;

  --groovy-warning-dark: #524000;
  --groovy-warning-main: #facc15;
  --groovy-warning-light: #fff9e7;

  --groovy-error-dark: #dc2626;
  --groovy-error-main: #f25454;
  --groovy-error-light: #feecec;

  --groovy-success-dark: #0f4330;
  --groovy-success-main: #52e0ac;
  --groovy-success-light: #dcf9ee;

  --groovy-z-index-modal: 10;
}

/**
 * Theme colors are applied in two different ways:
 * 1. By default, the app will have the light theme from index.css. In CustomThemeProvider, if we detect 
 *    that the custom theme primary color is "dark", we will set a meta tag w/ data-theme=dark attribute
 *    to enable dark theme globally
 * 2. "data-theme" (Scoped): If this attribute to set (light or dark) in any element, it will override the
 *    previous theme set by data-theme=X for the element and its children
 */
:root,
[data-theme="light"] {
  /**
   * Default customizable colors (overwritten by custom theme)
   * For computed theme colors, see `createCustomThemeCSSVariables`.
   */
  --groovy-primary-main: #4467f6;
  --groovy-primary-light: #d0d9fd;
  --groovy-primary-dark: #092ec3;
  --groovy-primary-contrast-text: #ffffff;

  --groovy-background-main: #fcfcfc;
  --groovy-background-paper: #ffffff;
  --groovy-background-light: #fcfcfc;
  --groovy-background-nav: #f4f5f7;

  /* Non-customizable light theme colors */
  --groovy-text-primary: #000d25;
  --groovy-text-secondary: #52525b;
  --groovy-text-danger: #cc3748;

  --groovy-neutral-800: #3f3f46;
  --groovy-neutral-700: #18181b;
  --groovy-neutral-600: #27272a;
  --groovy-neutral-500: #52525b;
  --groovy-neutral-400: #a1a1aa;
  --groovy-neutral-300: #d4d4d8;
  --groovy-neutral-200: #ebebef;
  --groovy-neutral-100: #f8f8f8;

  /** Constants */
  --groovy-icon: #a1a1aa;
  --groovy-stroke: #ebebef;
  --groovy-divider: #ebebef;
  --groovy-border-small: 1px solid #ebebef;
  --groovy-border-large: 2px solid #ebebef;
  --groovy-border-small-dark-only: none;
  --groovy-border-large-dark-only: none;
  --groovy-table-border: 2px solid #f4f4f5;
  --groovy-border-dashboard-card: 1px solid #e4e4ef;

  /** Measure */
  --groovy-border-radius-2: 2px; /** small */
  --groovy-border-radius-4: 4px; /** default */
  --groovy-border-radius-6: 6px; /** smedium */
  --groovy-border-radius-8: 8px; /** medium */
  --groovy-border-radius-12: 12px; /** big */
  --groovy-border-radius-16: 16px; /** large */
  --groovy-border-radius-20: 20px; /** xl */
  --groovy-border-radius-24: 24px; /** xxl */
}

/**
 * Dark Theme Overrides
 * Note: CSS declarations inside the selector can reference the :root or default light theme
 * variables, which is useful if we want to set an inverted palette in dark theme for example
 */
[data-theme="dark"] {
  /* Non-customizable dark theme colors */
  --groovy-text-primary: var(--groovy-on-dark-100);
  --groovy-text-secondary: var(--groovy-on-dark-200);
  --groovy-text-danger: #cc3748;

  /** neutral is the inverse of on-dark in dark theme */
  --groovy-neutral-700: var(--groovy-on-dark-100);
  --groovy-neutral-600: var(--groovy-on-dark-200);
  --groovy-neutral-500: var(--groovy-on-dark-300);
  --groovy-neutral-400: var(--groovy-on-dark-400);
  --groovy-neutral-300: var(--groovy-on-dark-500);
  --groovy-neutral-200: var(--groovy-on-dark-600);
  --groovy-neutral-100: var(--groovy-on-dark-700);

  /** grey maps to on-dark in dark theme */
  --groovy-grey-700: var(--groovy-on-dark-700);
  --groovy-grey-600: var(--groovy-on-dark-600);
  --groovy-grey-500: var(--groovy-on-dark-500);
  --groovy-grey-400: var(--groovy-on-dark-400);
  --groovy-grey-300: var(--groovy-on-dark-300);
  --groovy-grey-200: var(--groovy-on-dark-200);
  --groovy-grey-100: var(--groovy-on-dark-100);

  --groovy-icon: var(--groovy-on-dark-200);
  --groovy-stroke: var(--groovy-on-dark-300);
  --groovy-divider: var(--groovy-on-dark-400);
  --groovy-border-small: 1px solid var(--groovy-on-dark-400);
  --groovy-border-large: 2px solid var(--groovy-on-dark-400);
  --groovy-border-small-dark-only: 1px solid var(--groovy-on-dark-400);
  --groovy-border-large-dark-only: 2px solid var(--groovy-on-dark-400);
  --groovy-table-border: 2px solid var(--groovy-on-dark-400);
  --groovy-border-dashboard-card: 1px solid var(--groovy-on-dark-500);
}


/*# sourceMappingURL=main-3f334d008adb4bcd.css.map*/