@import url(light.css);

    :root {
      --md-ref-typeface-brand: 'Google Sans Flex', 'Arial', 'Helvetica', sans-serif;
      --md-ref-typeface-plain: 'Google Sans Flex', 'Arial', 'Helvetica', sans-serif;

      font-family: var(--md-ref-typeface-plain);
      font-size: 14px;

      --font-D1: normal 900 64px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-D2: normal 700 48px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-D3: normal 700 40px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;

      --font-H1: normal 700 32px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-H2: normal 700 24px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-H3: normal 700 18px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-H4: normal 700 16px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;

      --font-B1: normal 700 16px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-B2: normal 600 16px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-B3: normal 400 16px/1.25 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-B4: normal 600 14px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-B5: normal 400 14px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;

      --font-C1: normal 600 12px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-C2: normal 400 12px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;

      --font-Button1: normal 700 16px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-Button2: normal 700 14px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-Button3: normal 600 14px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;

      --font-link1: normal 600 16px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-link2: normal 600 14px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --font-link3: normal 600 12px/1.2 'Google Sans Flex', Arial, Helvetica, sans-serif;

      /* ───────────────────────────────
      Z-index tokens (Layering)
      ─────────────────────────────── */
      /* Base Layers */
      --z-base: 0; /* default document flow */
      --z-content: 10; /* standard positioned elements */

      /* Sticky & Persistent UI */
      --z-sticky: 50; /* navbars, banners, progress bars */

      /* Interactive Elements */
      --z-dropdown: 100; /* dropdown menus */
      --z-tooltip: 200; /* tooltips, small floating hints */
      --z-popover: 300; /* popovers, hover cards */

      /* Overlays & Modals */
      --z-modal-backdrop: 900; /* dimmed overlay behind modal */
      --z-modal: 1000; /* dialogs, modals, side drawers */
      --z-toast: 1100; /* toast notifications, alerts */
      --z-overlay: 1200; /* global overlays, spinners */

      /* Utility / Emergency Layers */
      --z-debug: 9999; /* temp use only (debugging) */

      /* Shadow-50 */
      --shadow-50: 0px 7px 13px 3px rgba(0, 0, 0, 0.1);

      --nav-bar-width: 256px;

      --paginator-bar-overlap: 0px;

      /* Transition for main content width when nav bar collapses (none if the sidebar is collapsed + at a new page) */
      --main-content-width-transition: 0.4s;
    }

    body {
      margin: 0;
    }

    
    a {
      color: var(--color-pear-700);
      text-decoration: underline;
    }

    .text-center {
      text-align: center;
    }

    .text-right {
      text-align: right;
    }

    .small {
      font-size: smaller;
    }

    .truncate-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 30ch;
      margin: 0;
    }

    input[type='checkbox'] {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border: 1px solid var(--color-smoke-400);
      border-radius: 4px;
      background: var(--color-white);
      position: relative;
      cursor: pointer;
    }

    input[type='checkbox']:checked {
      background-color: var(--color-pop-900);
      border-color: var(--color-pop-900);
    }

    input[type='checkbox']:checked::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 6px;
      width: 4px;
      height: 8px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    .info-icon svg {
      width: 14px;
      height: 14px;
      color: var(--color-smoke-500);
      vertical-align: middle;
    }

    .icon-small {
      width: 14px;
      height: 14px;
    }

    .icon-medium {
      width: 24px;
      height: 24px;
    }

    .success {
      background-color: var(--color-pop-50);
      color: var(--color-pop-700);
      border-color: var(--color-pop-700);
    }
    .success .icon svg {
      stroke: var(--color-pop-700);
    }
    .error {
      color: var(--color-spark-700);
    }
    div.error {
      background-color: var(--color-spark-50);
      border: 1px solid var(--color-spark-700);
      padding: 8px;
      border-radius: 8px;
    }
    .error .icon svg {
      stroke: var(--color-spark-700);
    }

    .warning {
      background-color: var(--color-hive-50);
      color: var(--color-hive-800);
      border-color: var(--color-hive-500);
    }
    .warning .icon svg {
      stroke: var(--color-hive-500);
    }

    .info {
      background-color: var(--color-white);
      color: var(--color-black);
      border-color: var(--color-pear-500);
    }
    .info .icon svg {
      stroke: var(--color-pear-500);
    }

    /* if there's something too wide due to padding, it's likely this. */
    .bsbb {
      box-sizing: border-box;
    }

    .w100 {
      width: 100%;
    }
    .w50 {
      width: 50%;
    }
    .w-max {
      width: max-content;
    }

    .shadow {
      box-shadow: 0 0 3px rgba(255, 255, 255, 0.15) !important;
    }

    .card {
      color: var(--md-sys-color-on-primary);
    }

    .card2 {
      border-radius: 12px;
      border: 1px solid var(--color-smoke-200);
    }

    .pearpop-spinner {
      --md-circular-progress-active-indicator-color: var(--color-pear-500);
    }

    .section-title {
      font: var(--font-H2);
      margin: 10px 0;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      justify-content: center;
      gap: 6px;
      font: var(--font-C1);
      text-overflow: ellipsis;
      background-color: var(--color-smoke-100);
      color: var(--color-smoke-800);
      border-radius: 16px;
    }

    .filter-chips-container {
      flex-wrap: wrap;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 4px 8px;
    }

    .pill-wrapper {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .pill {
      display: flex;
      padding: 6px 12px;
      justify-content: center;
      align-items: center;
      border-radius: 100px;
      font: var(--font-C1);
      line-height: 1;
      white-space: nowrap;
    }

    md-select.pill-select {
      inline-size: max-content; /* shrink-wrap the field + caret */
      min-inline-size: 96px;

      /* remove the visible outline so the pill looks like the closed state */
      --md-outlined-field-outline-color: transparent;
      --md-outlined-select-text-field-outline-color: transparent;
      --md-outlined-select-text-field-hover-outline-color: transparent;
      /* subtle padding so caret sits near label */
      padding-inline-end: 20px;
    }

    md-select.pill-select::part(field) {
      padding-right: 16px; /* Prevent pill and selector icon overlap */
    }

    .pill.yellow {
      color: var(--color-hive-800);
      background: var(--color-hive-100);
    }

    .pill.green {
      color: var(--color-pop-800);
      background: var(--color-pop-100);
    }

    .pill.red {
      color: var(--color-spark-800);
      background-color: var(--color-spark-100);
    }

    .pill.blue {
      color: var(--color-haze-700);
      background-color: var(--color-blue);
    }

    .pill.gray {
      color: var(--color-haze-900);
      background-color: var(--color-smoke-200);
    }

    .pill.orange {
      color: var(--color-haze-900);
      background-color: var(--color-hive-500);
    }

    .pill.white {
      color: var(--color-haze-900);
      border: 1px solid var(--color-smoke-500);
      background-color: var(--color-white);
    }

    .pill.selected {
      background: var(--color-smoke-100);
    }

    .pill-display {
      position: absolute;
      pointer-events: none;
      white-space: nowrap;
    }

    .disabled {
      opacity: 0.6;
      pointer-events: none;
      cursor: not-allowed;
    }

    .required {
      color: var(--color-spark-500);
    }

    
    .headline-small {
      font-weight: 400;
      font-size: 24px;
      line-height: 32px;
    }

    .headline-medium {
      font-weight: 400;
      font-size: 28px;
      line-height: 36px;
    }

    .title-small {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.1px;
      line-height: 20px;
    }
    .title-medium {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.15px;
      line-height: 24px;
    }
    .title-large {
      font-size: 22px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 28px;
    }
    .title-large-bold {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 28px;
    }

    .d1 {
      font: var(--font-D1);
    }
    .d2 {
      font: var(--font-D2);
    }
    .d3 {
      font: var(--font-D3);
    }

    .h1 {
      font: var(--font-H1);
    }
    .h2 {
      font: var(--font-H2);
    }
    .h3 {
      font: var(--font-H3);
    }

    .b1 {
      font: var(--font-B1);
    }
    .b2 {
      font: var(--font-B2);
    }
    .b3 {
      font: var(--font-B3);
    }
    .b4 {
      font: var(--font-B4);
    }
    .b5 {
      font: var(--font-B5);
    }

    .c1 {
      font: var(--font-C1);
    }
    .c2 {
      font: var(--font-C2);
    }

    /* 
     * TODO: get rid of these color and font combinations, could have infinite combinations. 
     * Just use the font classes and the color classes.
     * And it shouldn't be font classes, just weight and color, shouldn't be changing the font. 
     */
    .c1-smoke-600 {
      font: var(--font-C1);
      color: var(--color-smoke-600);
    }
    .c1-smoke-800 {
      font: var(--font-C1);
      color: var(--color-smoke-800);
    }
    .b1-smoke-600 {
      font: var(--font-B1);
      color: var(--color-smoke-600);
    }
    .b1-smoke-400 {
      font: var(--font-B1);
      color: var(--color-smoke-400);
    }

    @media (width < 840px) {
      .title-small {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.1px;
        line-height: 16px;
      }
      .title-medium {
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.1px;
        line-height: 16px;
      }
      .title-large {
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 18px;
      }
      .title-large-bold {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 18px;
      }
    }
  
    
    .smoke400 {
      color: var(--color-smoke-400);
    }
    .smoke500 {
      color: var(--color-smoke-500);
    }
    .smoke600 {
      color: var(--color-smoke-600);
    }
    .smoke700 {
      color: var(--color-smoke-700);
    }
    .hive700 {
      color: var(--color-hive-700);
    }
    .color-black {
      color: var(--color-black);
    }
    .pear700 {
      color: var(--color-pear-700);
    }
    .pear500 {
      color: var(--color-pear-500);
    }
  
    
    md-card {
      --_container-color: var(--color-white);
      --_outline-color: var(--color-smoke-400);
      --_container-shape: 8px;
    }

    md-nav-item[active] {
      --md-nav-bar-active-indicator-color: var(--color-pear-50);
    }

    md-chip {
      height: 42px;
      --md-filter-chip-outline-color: var(--color-smoke-200);
      --md-filter-chip-label-text-font: var(--font-C1);
      --md-filter-chip-label-text-size: 14px;
      --md-filter-chip-hover-state-layer-color: var(--color-white);
      --md-filter-chip-selected-container-color: var(--color-pear-50);
      --md-filter-chip-selected-outline-color: var(--color-smoke-200);
    }

    md-text-field {
      --_label-text-font: var(--font-B5);
      --_outline-color: var(--color-smoke-200);
      --md-text-field-outline-color: var(--color-smoke-200);
      --md-text-field-hover-outline-color: var(--color-smoke-200);
      --md-text-field-focus-outline-color: var(--color-smoke-200);
      --md-text-field-focus-outline-width: 1px;
      --md-text-field-label-text-color: var(--color-black);
      --md-text-field-hover-label-text-color: var(--color-black);
      --md-text-field-focus-label-text-color: var(--color-black);
      --md-text-field-input-text-color: var(--color-black);
      --md-text-field-hover-input-text-color: var(--color-black);
      --md-text-field-focus-input-text-color: var(--color-black);
      --md-text-field-caret-color: var(--color-black);
      --md-text-field-focus-caret-color: var(--color-black);
    }

    md-field {
      --md-outlined-field-outline-color: var(--color-smoke-200);
      --md-outlined-field-hover-outline-color: var(--color-smoke-200);
      --md-outlined-field-focus-outline-color: var(--color-smoke-200);
      --md-outlined-field-focus-outline-width: 1px;
    }

    md-select {
      --_outline-color: var(--color-smoke-600);
    }

    md-list.navbar {
      display: flex;
      flex-direction: column;
      height: 100%;

      --md-list-container-color: var(--color-haze-900);
      --md-list-item-label-text-color: var(--color-haze-100);
      --md-list-item-label-text-font: var(--font-B4);
    }

    md-list.navbar md-list-item {
      border-radius: 8px;
      padding: 0;
    }

    md-list.navbar md-list-item:hover {
      cursor: pointer;
      background: var(--color-haze-700);
    }

    md-menu {
      --md-menu-container-color: var(--color-white);
    }

    md-menu-item::part(focus-ring) {
      display: none;
    }

    md-nav-bar {
      --_container-color: var(--color-black);
      --_container-height: 80px;
    }

    md-nav-tab[active],
    md-nav-item[active] {
      --md-nav-bar-active-indicator-color: transparent;
      --_active-indicator-color: transparent;
      --_active-icon-color: var(--color-pear-500);
      --_active-label-text-color: var(--color-pear-500);
      --_active-focus-icon-color: var(--color-pear-600);
      --_active-focus-label-text-color: var(--color-pear-600);
      --_active-hover-icon-color: var(--color-pear-600);
      --_active-hover-label-text-color: var(--color-pear-600);
    }

    md-nav-tab,
    md-nav-item {
      --_label-text-font: var(--font-C4);
      --md-nav-bar-inactive-indicator-color: transparent;
      --_active-indicator-color: transparent;
      --_inactive-icon-color: var(--color-haze-100);
      --_inactive-label-text-color: var(--color-haze-100);
      --_inactive-focus-icon-color: var(--color-smoke-600);
      --_inactive-focus-label-text-color: var(--color-smoke-600);
      --_inactive-hover-icon-color: var(--color-smoke-600);
      --_inactive-hover-label-text-color: var(--color-smoke-600);
    }
    md-circular-progress {
      width: 32px;
      height: 32px;
    }

    md-dialog {
      border-start-start-radius: 8px;
      border-start-end-radius: 8px;
      border-end-end-radius: 8px;
      border-end-start-radius: 8px;
      --md-dialog-container-color: var(--color-white);
      max-width: 600px;
    }

    md-snackbar md-button[slot='action'].inverse {
      --md-button-label-text-color: var(--color-pear-400);
      --md-button-hover-label-text-color: var(--color-pear-400);
      --md-button-focus-label-text-color: var(--color-pear-400);
      --md-button-pressed-label-text-color: var(--color-pear-400);
      --md-button-hover-state-layer-opacity: 0;
      --md-button-pressed-state-layer-opacity: 0;
      --md-focus-ring-color: transparent;
      --md-focus-ring-width: 0;
      --md-focus-ring-active-width: 0;
    }
    /* material design overrides */
    
    .p4 {
      padding: 4px;
    }
    .p8 {
      padding: 8px;
    }
    .p12 {
      padding: 12px;
    }
    .p16 {
      padding: 16px;
    }
    .p24 {
      padding: 24px;
    }

    .pt8 {
      padding-top: 8px;
    }
    .pt12 {
      padding-top: 12px;
    }
    .pt40 {
      padding-top: 40px;
    }
    .pt60 {
      padding-top: 60px;
    }
    .pb12 {
      padding-bottom: 12px;
    }
    .pb20 {
      padding-bottom: 20px;
    }
    .pb40 {
      padding-bottom: 40px;
    }
    .pb60 {
      padding-bottom: 60px;
    }

    .m0 {
      margin: 0;
    }
    .m5 {
      margin: 5px;
    }
    .m16 {
      margin: 16px;
    }

    .mt12 {
      margin-top: 12px;
    }
    .mt16 {
      margin-top: 16px;
    }
    .mt20 {
      margin-top: 20px;
    }
    .mt24 {
      margin-top: 24px;
    }
    .mt32 {
      margin-top: 32px;
    }
    .mt48 {
      margin-top: 48px;
    }

    .mb4 {
      margin-bottom: 4px;
    }
    .mb8 {
      margin-bottom: 8px;
    }
    .mb12 {
      margin-bottom: 12px;
    }
    .mb16 {
      margin-bottom: 16px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mb24 {
      margin-bottom: 24px;
    }
    .mb32 {
      margin-bottom: 32px;
    }

    .mr4 {
      margin-right: 4px;
    }
    .mr12 {
      margin-right: 12px;
    }
    .ml16 {
      margin-left: 16px;
    }
    .mlauto {
      margin-left: auto;
    }
    /* padding and margin utilities */
    
    .flex {
      display: flex;
    }

    .flexr {
      display: flex;
    }

    .flexw {
      display: flex;
      flex-wrap: wrap;
    }

    .flexin {
      display: inline-flex;
    }

    .grid {
      display: grid;
    }

    .row {
      flex-direction: row;
    }

    .col {
      flex-direction: column;
    }

    .bb {
      box-sizing: border-box;
    }

    .jcc {
      justify-content: center;
    }
    .jcsb {
      justify-content: space-between;
    }
    .jcse {
      justify-content: space-evenly;
    }
    .jce {
      justify-content: end;
    }
    .jcfs {
      justify-content: flex-start;
    }
    .jcfe {
      justify-content: flex-end;
    }

    .aic {
      align-items: center;
    }
    .ais {
      align-items: stretch;
    }
    .aie {
      align-items: end;
    }

    /* This will right align text in a flex box item or grid item */
    .right {
      margin-left: auto;
    }

    .aifs {
      align-items: flex-start;
    }

    .asc {
      align-self: center;
    }

    .g0 {
      gap: 0px;
    }
    .g2 {
      gap: 2px;
    }
    .g4 {
      gap: 4px;
    }
    .g6 {
      gap: 6px;
    }
    .g8 {
      gap: 8px;
    }
    .g12 {
      gap: 12px;
    }
    .g16 {
      gap: 16px;
    }
    .g20 {
      gap: 20px;
    }
    .g24 {
      gap: 24px;
    }
    .g32 {
      gap: 32px;
    }
    /* flexbox utilities */
    
    button.primary {
      display: inline-flex;
      height: 32px;
      padding: 4px 16px;
      justify-content: center;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      border-radius: 100px;
      background: var(--color-pear-500);
      border: none;
      font: var(--font-B4);
      cursor: pointer;
    }

    button.primary:disabled {
      background: var(--color-smoke-400);
      cursor: not-allowed;
      opacity: 0.6;
    }

    button.primary.large {
      height: 48px;
    }

    button.primary:hover:not(:disabled) {
      background: var(--color-pear-600);
    }

    .badge.blue {
      background-color: var(--color-azure-500);
      color: var(--color-white);
      height: 24px;
      padding: 0 10px;
      border-radius: 12px;
      border: none;
      font: var(--font-C1);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    button.secondary {
      border-radius: 100px;
      border: 1px solid var(--color-pear-500);
      display: inline-flex;
      height: 32px;
      padding: 4px 16px;
      justify-content: center;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      background: var(--color-white);
      font: var(--font-B4);
      color: var(--color-pop-900);
    }

    button.secondary.large {
      height: 48px;
    }

    button.secondary:disabled {
      background-color: var(--color-smoke-100);
      color: var(--color-smoke-400);
      cursor: not-allowed;
      opacity: 0.6;
      border: 1px solid var(--color-smoke-200);
    }

    .btn-icon {
      border: none;
      background-color: transparent;
      color: var(--color-pop-900);
    }

    .btn-icon.cta.pinned,
    md-icon.pinned {
      color: var(--color-hive-500);
      font-variation-settings: 'FILL' 1;
    }

    .btn-icon.hover-circle {
      display: flex;
      width: 38px;
      height: 38px;
      align-items: center;
      justify-content: center;
      background: transparent;
      transition: background 0.2s ease;
      border-radius: 50%;
    }

    .btn-icon.hover-circle:hover {
      background: var(--color-smoke-200);
    }

    .btn-icon.hover-circle:disabled {
      color: var(--color-smoke-400);
      cursor: not-allowed;
    }

    .cta {
      cursor: pointer;
    }

    .pointer {
      cursor: pointer;
    }
    /* button styles */

    
    /* https://m3.material.io/foundations/layout/applying-layout/window-size-classes */

    /* Mobile UI */
    @media (width < 840px) {
      :root {
        --paginator-bar-overlap: 60px;
        --bottom-nav-height: 80px;
      }

      .flexr {
        flex-direction: column;
      }

      .mobOrder1 {
        order: -100;
      }

      .mobOrder2 {
        order: -50;
      }

      .mobOrder3 {
        order: -20;
      }

      .lteMedium {
        display: block;
      }

      .gtMedium {
        /* aka expanded */
        display: none;
      }

      .gteMedium {
        display: block;
      }

      /* Global page organization */
      /* All page including content and sidebar (not shown in mobile) */
      .main-page {
        display: flex;
        min-height: 100%;
        min-width: 100%;
        box-sizing: border-box;
        max-height: 100%;
        max-width: 100%;
      }
      /* Main content including header, body, and bottom */
      .main-content {
        display: flex;
        flex-direction: column;
        min-width: 100%;
        box-sizing: border-box;
        max-height: 100%;
      }
      .main-content-header {
        height: 56px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      }

      .main-content-body {
        margin-top: 56px;
        width: 100%;
        overflow-x: hidden;
        height: calc(100dvh - 136px);
        padding: 8px;
        box-sizing: border-box;

        overflow-y: auto; /* enable scrolling only when needed */
        -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */

        /* hide scrollbar */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
      }
      .main-content-body::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
      }

      .main-content-body.has-bottom-nav {
        height: calc(100dvh - (56px + var(--bottom-nav-height, 80px) + var(--paginator-bar-overlap, 60px)));
      }

      .main-content-body.has-bottom-nav::after {
        height: var(--paginator-bar-overlap, 60px);
      }
      .main-content-body.dashboard {
        padding: 0px 8px;
      }

      .main-content-bottom {
        height: 80px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
      }

      md-chip {
        height: 34px;
        --md-filter-chip-outline-color: var(--color-smoke-200);
        --md-filter-chip-label-text-font: var(--font-C2);
        --md-filter-chip-label-text-size: 14px;
        --md-filter-chip-hover-state-layer-color: var(--color-white);
        --md-filter-chip-selected-container-color: var(--color-pear-50);
        --md-filter-chip-selected-outline-color: var(--color-smoke-200);
      }
      .filter-chips-container {
        padding: 4px 4px 0 4px;
      }

      .pill-wrapper {
        height: 32px;
      }
      .pill {
        padding: 8px 12px;
      }
    }

    /* Desktop UI */
    @media (width >=840px) {
      :root {
        --paginator-bar-overlap: 70px;
        --bottom-nav-height: 0px;
      }

      .gtMedium {
        display: block;
      }
      .lteMedium {
        display: none;
      }

      /* Global page organization */
      /* All of page including content and sidebar */
      .main-page {
        display: flex;
        flex-direction: row;
        min-height: 100%;
        min-width: 100%;
        max-height: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      /* Main content including header, body, and bottom (bottom bar only in mobile) */
      .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        max-width: calc(100% - var(--nav-bar-width, 256px));
        transition:
          max-width var(--main-content-width-transition, 0.4s),
          left var(--main-content-width-transition, 0.4s);
      }
      .main-content-header {
        height: 56px;
        box-sizing: border-box;
        position: fixed;
        top: 0;
      }

      .main-content-body {
        flex: 1 1 auto;
        box-sizing: border-box;
        padding: 8px;
        margin-top: 56px;
        overflow-y: auto;
        height: calc(100dvh - 56px);
      }
      .main-content-body.has-bottom-nav {
        height: calc(100dvh - (60px + var(--paginator-bar-overlap, 70px)));
      }
      .main-content-body.has-bottom-nav::after {
        content: '';
        height: var(--paginator-bar-overlap, 70px);
      }
      .main-content-body.dashboard {
        padding: 0 8px;
      }
    }

    .profile-image {
      height: 32px;
      width: 32px;
      border-radius: 50%;
    }
   /* responsive styles */
    
    .mb-card-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 16px;
    }
    .mb-card-item {
      width: 100%;
      box-sizing: border-box;
      min-width: 300px;
      max-width: 500px;
    }
    .mb-card-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 10px 12px;
    }
    .mb-card-row-left {
      font: var(--font-C1);
      /* color: var(--color-smoke-600); */
      flex: 1;
    }
    .mb-card-row-right {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex: 2;
      font: var(--font-B5);
      gap: 8px;
    }
    .mb-card-divider {
      height: 1px;
      background: var(--color-smoke-200);
    }
    .mb-card-control-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
   /* card styles for Mobile */

    
    .dropdown-anchor {
      position: relative;
    }
    .search-dropdown-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1;
      padding: 7px 16px;
      border-radius: 8px;
      background: var(--color-white);
      border: 1px solid var(--color-smoke-200);
      cursor: pointer;
    }
    .search-dropdown-menu {
      --md-menu-container-color: var(--color-white);
      --md-menu-container-shape: 8px;
      max-height: 360px;
    }
    .menu-search {
      padding: 8px;
      box-sizing: border-box;
    }
    .row-item {
      min-width: 200px;
    }
    .row-item.selected {
      --md-menu-item-container-color: var(--color-pear-50);
      --md-menu-item-label-text-color: var(--color-pear-700);
    }
    @media (max-width: 839px) {
      .search-dropdown-btn {
        padding: 3px 8px;
      }
    }
   /* search filter styles */