.visually-hidden {
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important
      }

      .visually-hidden:not(caption) {
        position: absolute !important
      }

       .visually-hidden,
       .visually-hidden-focusable:not(:focus):not(:focus-within):not(:active) {
         width: 1px !important;
         height: 1px !important;
         padding: 0 !important;
         margin: -1px !important;
         overflow: hidden !important;
         clip: rect(0, 0, 0, 0) !important;
         white-space: nowrap !important;
         border: 0 !important;

         &:not(caption) {
           position: absolute !important;
         }
       }

      :host {
          .sr-header-connected {
            --sr-z-header: 300;

            position: sticky;
            top: 0;
            display: block;
            padding: 12px 48px 0;
            border-bottom: 1px solid var(--border-neutral-dark);
            background: var(--background-neutral-primary);
            z-index: var(--sr-z-header);

            @media screen and (max-width: 768px) {
              padding: 16px 16px 0;
              border: none;
            }
          }

          .sr-dropdown-button {
            --sr-dropdown-button-width: auto;

            display: block;
            max-width: 100%;
          }

          .sr-icon {
            position: relative;
            flex: 0 0 auto;
            display: block;
            width: max-content;
            border-radius: var(--radius-8);
            background-color: var(--sr-icon-background-color, transparent);
          }

          .sr-menu {
            display: block;
          }

          .sr-menu-item {
            display: block;

            &:not(:last-child) {
              border-bottom: 1px solid var(--border-neutral-medium);
            }
          }

          .sr-navigation-connected {
            --sr-panel-z: 200;
          }
          
        }

              * {
        font-family: 'EDF2020', sans-serif;
      }

      *, ::before, ::after {
        box-sizing: border-box;
      }

      .visually-hidden {
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important
      }

      .visually-hidden:not(caption) {
        position: absolute !important
      }

       .visually-hidden,
       .visually-hidden-focusable:not(:focus):not(:focus-within):not(:active) {
         width: 1px !important;
         height: 1px !important;
         padding: 0 !important;
         margin: -1px !important;
         overflow: hidden !important;
         clip: rect(0, 0, 0, 0) !important;
         white-space: nowrap !important;
         border: 0 !important;

         &:not(caption) {
           position: absolute !important;
         }
       }

      :host {
        display: block;
        box-sizing: border-box;

        .sr-menu--separator-top {
          border-top: 2px solid var(--border-neutral-medium);
        }

        .sr-menu--separator-bottom {
          border-bottom: 2px solid var(--border-neutral-medium);
        }

        &:not(:last-child) {
          border-bottom: 1px solid var(--border-neutral-medium);
        }

        .sr-tag {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: var(--radius-4);

          p {
            margin: 0;
            padding: 0;
          }

          &.sr-tag--neutral {
            color: var(--text-neutral-primary);
            background-color: var(--background-status-neutral);
          }

          &.sr-tag--blue {
            color: var(--text-status-info);
            background-color: var(--background-colored-tertiary);
          }

          &.sr-tag--green {
            color: var(--text-neutral-primary);
            background-color: var(--background-status-positive);
          }

          &.sr-tag--orange {
            color: var(--text-status-advisory);
            background-color: var(--background-status-advisory);
          }

          &.sr-tag--cancelled {
            border: 1px solid var(--border-neutral-dark);
            color: var(--text-neutral-primary);
            background-color: var(--background-neutral-primary);
            font-weight: 400;
          }

          &.sr-tag--promo {
            border-radius: 0;
            color: var(--text-neutral-primary);
            background-color: var(--orange-juice-600);
            line-height: var(--line-height-34);
            font-weight: 700;
            font-size: var(--font-size-22);
            font-style: italic;
            text-transform: uppercase;
          }

          &.sr-tag--on-color:is(.sr-tag--blue, .sr-tag--neutral, .sr-tag--orange) {
            background-color: var(--background-neutral-primary);
          }

          &.sr-tag--on-color.sr-tag--green {
            background-color: var(--background-neutral-primary);
            color: var(--text-status-positive);
          }

          &.sr-tag--large {
            height: var(--size-7_5);
            padding: var(--spacing-16) var(--spacing-12);
            font: var(--typography-body-s-bold);
          }

          &.sr-tag--small {
            height: var(--size-6);
            padding: var(--spacing-4) 0.375rem;
            font: var(--typography-caption-m);
          }
        }

        .sr-dropdown-button {
          --sr-dropdown-button-width: auto;

          display: block;
          max-width: 100%;
        }
      }

      :host(:not(.is-link)) {
        .sr-menu-item {
          position: relative;
          display: grid;
          grid-template-columns: minmax(0, 1fr) max-content;
          grid-template-areas:
            'label     badge     info'
            'paragraph paragraph paragraph';
          align-items: center;
          overflow: hidden;
          padding: 12px 16px;
          background: var(--background-neutral-primary);
          color: var(--text-neutral-primary);
          font: var(--typography-body-s);
          text-decoration: none;
          cursor: pointer;
          outline-offset: -4px;

          &--selected:not([aria-disabled]) {
            background: var(--background-colored-tertiary);

            &::before {
              flex-shrink: 0;
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 2px;
              background: var(--border-state-input-active);
              content: '';
            }

            .sr-menu-item__label,
            .sr-menu-item__paragraph {
              color: var(--text-state-active);
            }
          }

          &[aria-disabled] {
            color: var(--text-state-disabled);
            cursor: not-allowed;
          }
        }

        .sr-menu-item:hover:not(.sr-menu-item--disabled):not([class*=--cta-]),
        .sr-menu-item:focus-visible {
          background: var(--background-colored-tertiary);
        }

        .sr-menu-item__label {
          grid-area: label;
          font: var(--typography-body-s-bold);

          &--truncate {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .sr-menu-item--danger:not([aria-disabled]) .sr-menu-item__label {
          color: var(--text-status-critical);
        }

        .sr-menu-item__badge {
          grid-area: badge;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 1rem;
          width: 1rem;
          margin-left: 0.25rem;
          border-radius: 0.5rem;
          background: var(--background-colored-hot);
          color: var(--text-inverse-primary);
          font-size: 0.75rem;
          line-height: 0.8;
        }

        .sr-menu-item__info {
          grid-area: info;
          margin-left: 0.25rem;

          &:empty {
            display: none;
          }
        }

        .sr-menu-item__paragraph {
          grid-area: paragraph;
          margin-top: 4px;
          color: var(--text-neutral-tertiary);

          .sr-menu-item[aria-disabled] & {
            color: var(--text-state-disabled);
          }
        }

        .sr-menu-item:focus-visible {
          outline: var(--outline);
        }
      }

      :host(.is-cta) {
        border: none;
        padding: 4px 16px;

        &:first-child {
          padding-top: 12px;
        }

        &:last-child {
          padding-bottom: 12px;
        }

        .sr-menu-item--cta-primary,
        .sr-menu-item--cta-secondary,
        .sr-menu-item--cta-tertiary {
          display: inline-flex;
          gap: 8px;
          align-items: center;
          justify-content: center;
          min-height: 54px;
          width: 100%;
          padding: 12px 16px;
          border: 2px solid var(--sr-button-border-color);
          border-radius: 4px;
          background-color: var(--sr-button-background-color);
          font: var(--typography-body-m-bold);
          text-align: center;
          text-decoration: none;
          cursor: pointer;
          transition: all ease-in-out 0.1s;
          outline-offset: 2px;

          &:is(button, a, :visited) {
            color: var(--sr-button-text-color);
          }
        }

        .sr-menu-item--cta-primary {
          --sr-button-background-color: var(--background-colored-state-primary);
          --sr-button-border-color: var(--background-colored-state-primary);
          --sr-button-text-color: var(--text-state-primary);

          &:hover {
            --sr-button-background-color: var(--background-colored-state-primary-hover);
            --sr-button-border-color: var(--background-colored-state-primary-hover);
          }

          &:disabled,
          &[aria-disabled] {
            --sr-button-background-color: var(--background-colored-state-disabled);
            --sr-button-border-color: var(--background-colored-state-disabled);
            --sr-button-text-color: var(--text-state-disabled);
          }
        }

        .sr-menu-item--cta-secondary {
          --sr-button-background-color: var(--background-colored-state-secondary);
          --sr-button-border-color: var(--border-state-button);
          --sr-button-text-color: var(--text-state-secondary);

          &:hover {
            --sr-button-background-color: var(--background-colored-state-secondary-hover);
            --sr-button-border-color: var(--border-state-button-hover);
            --sr-button-text-color: var(--text-state-secondary-hover);
          }

          &:disabled,
          &[aria-disabled] {
            --sr-button-background-color: var(--background-colored-state-disabled);
            --sr-button-border-color: var(--background-colored-state-disabled);
            --sr-button-text-color: var(--text-state-disabled);
          }
        }

        .sr-menu-item--cta-tertiary {
          --sr-button-background-color: transparent;
          --sr-button-border-color: transparent;
          --sr-button-text-color: var(--text-state-secondary);

          &:hover {
            --sr-button-background-color: var(--background-colored-state-secondary-hover);
            --sr-button-border-color: var(--background-colored-state-secondary-hover);
            --sr-button-text-color: var(--text-state-secondary-hover);
          }

          &:disabled,
          &[aria-disabled] {
            --sr-button-background-color: transparent;
            --sr-button-border-color: transparent;
            --sr-button-text-color: var(--text-state-disabled);
          }
        }
      }