.APCRecWidget {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;
  overflow: hidden;
  max-width: 100%;
}

.APCRecWidget.carousel {
  min-height: 460px;
}

.APCRecWidget.grid {
  min-height: 825px;
}

.APCRecWidget.preview {
  border: 1px dashed var(--brand-color-border-primary);
  background-color: rgba(120,120,120, 0.3);
  padding: 10px;
  justify-content: center;
  align-items: center;
  color: #000;
}

.APCRecWidget.preview > div {
  font-size: 2em;
}

.APCRecWidget.preview.error {
  background-color: var(--sfly-color-semantic-red-icon);
}

.APCRecWidget.preview.error .APCContainerError {
  font-size: 1rem;
}
.APCInitiator {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;
  overflow: hidden;
  max-width: 100%;
  border: 1px dashed var(--brand-color-border-primary);
  background-color: rgba(120, 120, 120, 0.3);
  padding: 10px;
  justify-content: center;
  align-items: center;
  color: #000;
}

.APCInitiator>div {
  font-size: 2em;
}

.APCInitiator .hidden-initiator-preview {
  display:none;
}

.APCInitiator.error {
  background-color: var(--sfly-color-semantic-red-icon);
}

.APCInitiator.error .APCContainerError {
  font-size: 1rem;
}
.Tabs {
    margin: 0;
    padding: 0;
    display: flex;
    list-style-type: none;
}

.Tabs.TabsDesign1 {
    margin: 2.1429rem auto;
    align-items: center;
    justify-content: space-around;
}

.Tabs.TabsDesign2 {
    margin: 2.5rem 0;
}

.Tabs li {
    padding: 0.1429rem 0.1429rem 0.7143rem;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    height: 100%;
}

.Tabs.TabsDesign2 li {
    padding-bottom: 1.1429rem;
}

.Tabs li span {
    position: relative;
    cursor: pointer;
    color: var(--text-color);
}

.Tabs.TabsDesign1 li span {
    font-weight: var(--font-weight-semibold);
    font-size: calc(1.1429rem + (20 - 16) * ((100vw - 54.8571rem)/ (1600 - 768)));
    text-transform: var(--sfly-font-transform-lettercase);
    letter-spacing: 0.02em;
    line-height: 1.23em;
}

.Tabs.TabsDesign2 li span {
    font-weight: var(--font-weight-light);
    font-size: 1.7771rem;
}

.Tabs.TabsDesign1 li.active span {
    color: var(--brand-color-border-primary);
}

.Tabs.TabsDesign2 li.active span {
    font-weight: var(--brand-fontweight-callout);
    color: #636466;
}

.Tabs li.active span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.7143rem;
    display: inline-block;
    width: 100%;
    height: 0.2143rem;
}

.Tabs.TabsDesign1 li.active span::after {
    background: var(--brand-color-background-primary);
}

.Tabs.TabsDesign2 li.active span::after {
    bottom: -1.0714rem;
    background: #636466;
}

@media screen and (max-width: 991px) {
    .Tabs.TabsDesign1 {
        flex-flow: column nowrap;
        margin: 0;
    }

    .Tabs.TabsDesign1 li {
        width: 100%;
        border-bottom: 1px var(--sfly-border-style-solid) var(--color-silver);
        padding: 0.3571rem 0;
    }

    .Tabs.TabsDesign1 li span,
    .Tabs.TabsDesign1 li.active span::after {
        content: none;
    }

    .Tabs.TabsDesign2 {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    .Tabs.TabsDesign2::-webkit-scrollbar {   
        visibility: hidden;
    }

    .Tabs.TabsDesign2::after {
        content: '';
        position: absolute;
        right: 0;
        width: 2.8571rem;
        height: 100%;
        background: -webkit-gradient(linear,right top,left top,from(#fff),to(hsla(0,0%,100%,0)));
        background: linear-gradient(270deg,#fff,hsla(0,0%,100%,0));
        pointer-events: none;
        z-index: 1;
    }

    .Tabs.TabsDesign2 li {
        margin-right: 3.2143rem;
    }
}

@media screen and (max-width: 768px) {
    .Tabs.TabsDesign2 li span {
        font-size: 1.3329rem;
    }
}

@media screen and (max-width: 480px) {
    .Tabs.TabsDesign2 li {
        margin-right: 2.5rem;
    }
}
.DevWidget {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 100%;
    position: sticky;
    top: 40px;
    z-index: 9999;
    border: 1px var(--sfly-border-style-solid) var(--brand-color-border-primary);
    background: #fff;
    box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.33);
    width: 100%;
    margin: 10px auto;
    overflow: hidden;
    font-size: 11px;
    box-sizing: border-box;
    padding: 0 0 5px 0;
}

.DevWidget div {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}

.DevWidget div.header {
    padding: 3px;
    border-bottom: 1px var(--sfly-border-style-solid) var(--brand-color-border-primary);
    justify-content: space-between;
    background: var(--brand-color-background-primary);
    color: #fff;
    font-size: 14px;
    flex-flow: row nowrap;
    height: auto;
}

.DevWidget a.close {
    display: flex;
    width: 20px;
    height: 20px;
    --height: calc(var(--width) / 10);
    --width: 20px;
    color: var(--brand-color-border-primary);
    margin-right: 5px;
    position: relative;
    cursor: pointer;
    --color: #fff;
}

.DevWidget a.close:hover {
    --color: rgba(255,255,255, 0.75)
}

.DevWidget a.close::after,
.DevWidget a.close::before {
    content: "";
    position: absolute;
    background-color: var(--color);
    transform: rotate(45deg);
}
.DevWidget a.close::before {
    width: var(--height);
    height: var(--width);
    top: calc(50% - var(--width)*0.5);
    right: calc(50% - var(--height)*0.5);
}
.DevWidget a.close::after {
    width: var(--width);
    height: var(--height);
    top: calc(50% - var(--height)*0.5);
    right: calc(50% - var(--width)*0.5);
}
.DevWidget h4 {
    display: flex;
    font-weight: var(--font-weight-bold);
    margin: 0;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
}

.DevWidget h5 {
    display: flex;
    font-weight: var(--font-weight-regular);
    margin: 0;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.DevWidget h5::before {
    content: '[ ';
}

.DevWidget h5::after {
    content: ' ]';
}

.DevWidget ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

.DevWidget ul li {
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
    flex: 1 1 100%;
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}
.DevWidget ul li span {
    display: flex;
    font-weight: var(--font-weight-bold);
    font-size: 13px;
}

.DevWidget ul li pre {
    display: flex;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
    border: 1px dashed #fff;
    flex: 1 1 100%;
    padding: 5px;
    background: rgba(0,0,0, 0.75);
    color: #fff;
    box-sizing: border-box;
}

.DevWidget ul.log {
    margin: 3px;
    background: rgba(0,0,0, 0.75);
    border: 1px dashed #fff;
    max-height: 200px;
    overflow-y: auto;
}
.DevWidget ul.log li {
    flex-flow: row nowrap;
    flex: 1 0 auto;
    padding: 3px;
    color: #fff;
}

.DevWidget a.clear {
    margin: 10px;
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    text-transform: var(--sfly-font-transform);
    padding: 5px;
    border: 1px var(--sfly-border-style-solid) var(--brand-color-border-primary);
    color: #fff;
    border-radius: var(--sfly-border-radius-small);
    background: var(--brand-color-background-primary);
}

.DevWidget a.clear:hover {
    border: var(--sfly-border-thickness-thin) var(--sfly-border-style-solid) #000;
    background: #000;
}

.br-cms-layout .AppLink.button {
  display: inline-block;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  text-transform: var(--button-font-transform);
  text-align: center;
  padding: var(--button-space-padding);
  min-width: 32px;
  color: var(--button-color-text-primary);
  border-radius: var(--button-border-radius);
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  line-height: var(--button-line-height); 
  min-height: var(--button-height);
}

.br-cms-layout .brand-TP .AppLink.button {
  min-height: unset;
  line-height: 1.17;
  padding: 10px 20px; /*maintaing padding as per production values*/
}

.br-cms-layout .AppLink.noHover {
  cursor: default;
}

.br-cms-layout .AppLink.button:is(:active, :focus, :hover, :link, :visited) {
  text-decoration: none;
  transition: all 0.1s ease-in-out;
}

/* fallback: for browsers that do not support :focus-visible */
.br-cms-layout .AppLink.button:not([tabindex="-1"]):focus,
.br-cms-layout .AppLink.button:not([disabled]):focus,
.br-cms-layout .AppLink.button:not(.disabled):focus {
  outline: var(--brand-state-focus-outline);
  box-shadow: var(--primary-button-shadow-ring);
}

/* invalidates previous declaration for browsers that do support it */
.br-cms-layout .AppLink.button:not([tabindex="-1"]):focus:not(:focus-visible),
.br-cms-layout .AppLink.button:not([disabled]):focus:not(:focus-visible),
.br-cms-layout .AppLink.button:not(.disabled):focus:not(:focus-visible) {
  outline: var(--brand-state-focus-outline);
  box-shadow: none;
}

/* actual modern approach */
.br-cms-layout .AppLink.button:not([tabindex="-1"]):focus-visible,
.br-cms-layout .AppLink.button:not([disabled]):focus-visible,
.br-cms-layout .AppLink.button:not(.disabled):focus-visible {
  outline: var(--brand-state-focus-outline);
  box-shadow: var(--primary-button-shadow-ring);
}

.br-cms-layout .AppLink.button:not(.disabled):hover {
  filter: var(--brand-state-hover-shadow);
}

.br-cms-layout .AppLink.button.white-od:not(.disabled):hover,
.br-cms-layout .AppLink.button.black-od:not(.disabled):hover {
  box-shadow: 0 3px 3px 0 var(--black);
}

.br-cms-layout .AppLink.button:not(.disabled):active,
.br-cms-layout a.AppLink.button:not(.disabled):active {
  -webkit-filter: var(--brand-state-active-brightness);
  filter: var(--brand-state-active-brightness);
}

.br-cms-layout .AppLink.button.disabled,
.br-cms-layout .AppLink.link.disabled {
  opacity: var(--brand-state-disabled-opacity);
  pointer-events: none;
}

.br-cms-layout .AppLink.primary-button,
.br-cms-layout .AppLink.deep-carrot {
  font-weight: var(--button-font-weight) !important;
  background-color: var(--sfly-color-brand-spicy);
  border-width: 0
}

.br-cms-layout .AppLink.secondary-button,
.br-cms-layout .AppLink.white-ow,
.br-cms-layout .AppLink.white-od {
  font-weight: var(--button-font-weight);
  color: var(--button-color-text-secondary);
  background-color: var(--button-color-background-secondary);
  border: var(--button-border-thickness) var(--button-border-style) var(--button-color-border-secondary);
}

.br-cms-layout .AppLink.button.raven {
  background-color: var(--br-cms-color-brand-raven);
  color: var(--button-color-text-light);
}
.br-cms-layout .AppLink.button.raven:hover {
  background-color: var(--br-cms-color-brand-raven-hover);
}

.br-cms-layout .AppLink.button.heron {
  background-color: var(--br-cms-color-brand-heron);
  color: var(--button-color-text-dark);
}
.br-cms-layout .AppLink.button.heron:hover {
  background-color: var(--br-cms-color-brand-heron-hover);
}

.br-cms-layout .AppLink.button.monarch {
  background-color: var(--br-cms-color-brand-monarch);
  color: var(--button-color-text-light);
}
.br-cms-layout .AppLink.button.monarch:hover {
  background-color: var(--br-cms-color-brand-monarch-hover);
}

.br-cms-layout .AppLink.button.mallard {
  background-color: var(--br-cms-color-brand-mallard);
  color: var(--button-color-text-light);
}
.br-cms-layout .AppLink.button.mallard:hover {
  background-color: var(--br-cms-color-brand-mallard-hover);
}

.br-cms-layout .AppLink.button.raven:hover,
.br-cms-layout .AppLink.button.heron:hover,
.br-cms-layout .AppLink.button.monarch:hover,
.br-cms-layout .AppLink.button.mallard:hover {
  filter: none;
}

.br-cms-layout .AppLink.link:hover {
  text-decoration: underline;
}

.br-cms-layout .AppLink.link.LinkDesign.raven,
.br-cms-layout .AppLink.link.LinkDesign.monarch,
.br-cms-layout .AppLink.link.LinkDesign.mallard {
  font-weight: var(--brand-font-weight-callout);
  font-size: 1.143rem;
  text-transform: none;
}

/* To avoid the carat symbol after the text link*/
.br-cms-layout .AppLink.link.LinkDesign.raven::after,
.br-cms-layout .AppLink.link.LinkDesign.monarch::after,
.br-cms-layout .AppLink.link.LinkDesign.mallard::after {
  content: none;
  display: none;
}


.br-cms-layout .AppLink.link.LinkDesign.raven {
  color: var(--br-cms-color-brand-raven);
}
.br-cms-layout .AppLink.link.LinkDesign.raven:hover {
  color: var(--br-cms-color-brand-raven-hover);
}

.br-cms-layout .AppLink.link.LinkDesign.monarch {
  color: var(--br-cms-color-brand-monarch);
}
.br-cms-layout .AppLink.link.LinkDesign.monarch:hover {
  color: var(--br-cms-color-brand-monarch-hover);
}

.br-cms-layout .AppLink.link.LinkDesign.mallard {
  color: var(--br-cms-color-brand-mallard);
}
.br-cms-layout .AppLink.link.LinkDesign.mallard:hover {
  color: var(--br-cms-color-brand-mallard-hover);
}

.br-cms-layout .AppLink.tertiary-link {
  color: var(--color-blue);
  font-weight: var(--brand-fontweight-interactive) !important;
  font-size: 14px;
  line-height: 16px;
  text-transform: none;
  text-decoration: none;
  cursor: pointer
}


.br-cms-layout button.AppLink.tertiary-link {
  background-color: transparent;
  border: none;
  padding: 0;
  height: auto
}


.br-cms-layout .AppLink.tertiary-link:hover {
  text-decoration: underline
}

.br-cms-layout .AppLink.tertiary-link:active {
  text-decoration: underline;
  color: #004985
}

.br-cms-layout .AppLink.tertiary-link.disabled {
  color: var(--color-fog);
  cursor: default
}

.br-cms-layout .AppLink.tertiary-link.disabled:hover {
  text-decoration: none
}

.br-cms-layout .AppLink.black-ow,
.br-cms-layout .AppLink.black-od {
  color: var(--white);
  background-color: var(--text-color-gray);
}

.br-cms-layout .AppLink.black-od {
  border: var(--button-border-thickness) var(--button-border-style) var(--sfly-color-neutrals-white);
}

.br-cms-layout .AppLink.deep-teal {
  color: var(--button-color-text-primary);
  background-color: var(--sfly-color-brand-deep-teal);
}

.br-cms-layout .AppLink.deep-blue {
  color: var(--button-color-text-primary);
  background-color: var(--sfly-color-brand-deep-blue);
}

.br-cms-layout .AppLink.dark-red {
  color: var(--button-color-text-primary);
  background-color: var(--button-bg-dark-red);
}

.br-cms-layout .AppLink.snapfish {
  color: var(--button-color-text-primary);
  background-color: var(--sfly-color-brand-snp-teal);
}


@keyframes smooth-animation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.br-cms-layout .promo-cta-section {
  animation: smooth-animation 0.5s ease-in;
}

.br-cms-layout .cta-applied-promo {
  color: var(--text-color);
  font-weight: var(--font-weight-bold);
  line-height: 1.5rem;
  animation: smooth-animation 0.5s ease-in;

  @media screen and (min-width:769px) {
    color: var(--text-color-mweb);
  }
}

.br-cms-layout .promo-applied-svg {
  margin-right: 10px;
  width: 10px;
  height: 10px;
  fill: var(--text-color);

  @media screen and (min-width:769px) {
    fill: var(--text-color-mweb);
  }
}

.br-cms-layout .promo-cta-waiting-status {
  color: transparent;
  line-height: 1.5rem;
}
.Icon {
    display: flex;
    flex: 0 0 auto;
}

.Icon>svg {
    display: flex;
    flex: 1 1 100%;
}
.cms-heading {
    margin: 0;
    font-weight: normal;
}

.cms-heading.default-title-line-height {
    line-height: 1.2;
}

.dropdown-menu-comp {
    z-index: 1;
    position: absolute;
    text-align: left;
}

.dropdown-menu-comp ul {
    list-style: none;
    min-width: 11.4286rem;
    max-width: 25.7143rem;
    background: var(--bg-color-white);
    border: var(--sfly-border-style-solid) 0.0714rem rgba(0,0,0,.2);
    border-radius: 0.4286rem;
    box-shadow: 0 0.3571rem 0.7143rem rgba(0,0,0,.2);
    overflow: visible;
    padding: 0.2857rem 0;
    margin: 0;
}

.dropdown-menu-comp li {
    font-weight: var(--brand-fontweight-callout);
    font-size: 0.8571rem;
    padding: 0;
    line-height: 1.2857rem;
    margin: 0.8571rem 1.2143rem;
    white-space: nowrap;
    display: block;
}

.dropdown-menu-comp li a {
    color: var(--text-color);
}

.dropdown-menu-comp li:hover a {
    color: var(--brand-color-border-primary);
}

.dropdown-menu-comp li.divider {
    border-top: var(--sfly-border-style-solid) 0.0714rem var(--light-grey-2);
    padding: 0;
    margin: 0.3571rem 0;
    display: block;
    height: auto;
}
/* top left direction */
.dropdown-menu-comp.show-pointer::before {
    position: absolute;
    top: -0.4286rem;
    left: 0.6429rem;
    content: '';
    border-left: 0.5rem var(--sfly-border-style-solid) transparent;
    border-right: 0.5rem var(--sfly-border-style-solid) transparent;
    border-bottom: 0.5rem var(--sfly-border-style-solid);
    border-bottom-color: rgba(0,0,0,.2);
    display: inline-block;
}

.dropdown-menu-comp.show-pointer::after {
    position: absolute;
    top: -0.3571rem;
    left: 0.7143rem;
    content: '';
    border-left: 0.4286rem var(--sfly-border-style-solid) transparent;
    border-right: 0.4286rem var(--sfly-border-style-solid) transparent;
    border-bottom: 0.4286rem var(--sfly-border-style-solid) var(--bg-color-white);
    display: inline-block;
}

/* Top right */
.dropdown-menu-comp.top-right::before {
    left: auto;
    right: 0.6429rem;
}

.dropdown-menu-comp.top-right::after {
    left: auto;
    right: 0.7143rem;
}
/* Top center */
.dropdown-menu-comp.top-center::before {
    right: auto;
    left: 43%;
}

.dropdown-menu-comp.top-center::after {
    right: auto;
    left: 43.5%;
}

/* Bottom Left */
.dropdown-menu-comp.bottom-left::before {
    border: 0;
}

.dropdown-menu-comp.bottom-left::after {
    right: auto;
    top: auto;
    bottom: -0.3571rem;
    border-top: 0.4286rem var(--sfly-border-style-solid) var(--white);
    border-right: 0.4286rem var(--sfly-border-style-solid) transparent;
    border-left: 0.4286rem var(--sfly-border-style-solid) transparent;
    border-bottom: 0;
}

/* Bottom Right */
.dropdown-menu-comp.bottom-right::before {
    border: 0;
}

.dropdown-menu-comp.bottom-right::after {
    top: auto;
    left: auto;
    bottom: -0.3571rem;
    border-top: 0.4286rem var(--sfly-border-style-solid) var(--white);
    border-right: 0.4286rem var(--sfly-border-style-solid) transparent;
    border-left: 0.4286rem var(--sfly-border-style-solid) transparent;
    border-bottom: 0;
    right: 0.6429rem;
}

/* Bottom Center */
.dropdown-menu-comp.bottom-center::before {
    border: 0;
}

.dropdown-menu-comp.bottom-center::after {
    top: auto;
    bottom: -0.3571rem;
    border-top: 0.4286rem var(--sfly-border-style-solid) var(--white);
    border-right: 0.4286rem var(--sfly-border-style-solid) transparent;
    border-left: 0.4286rem var(--sfly-border-style-solid) transparent;
    border-bottom: 0;
    left: 44%;
}

/* right side */
.dropdown-menu-comp.right-side-center::before {
    border-left: 0.5286rem var(--sfly-border-style-solid) rgba(0,0,0,.2); 
    border-right: 0.5286rem var(--sfly-border-style-solid) transparent;
    border-bottom: 0.5286rem var(--sfly-border-style-solid) transparent;
    border-top: 0.5286rem var(--sfly-border-style-solid) transparent;
    top:36%;
    left: auto;
    right:-1.157rem !important;
}

.dropdown-menu-comp.right-side-center::after {
    border-left: 0.5286rem var(--sfly-border-style-solid) var(--white); 
    border-right: 0.5286rem var(--sfly-border-style-solid) transparent;
    border-bottom: 0.5286rem var(--sfly-border-style-solid) transparent;
    border-top: 0.5286rem var(--sfly-border-style-solid) transparent;
    top:36%;
    left: auto;
    right:-1.086rem !important;
}


.SingleAccordion * {
    box-sizing: border-box;
    color: var(--text-color);
}

.SingleAccordionTitle,
.SingleAccordionContent {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 1.2857rem;
}

.SingleAccordionTitle {
    padding: 1.1429rem 0;
    border: none;
    font-weight: var(--font-weight-semibold);
    background: none;
    text-align: left;
    cursor: pointer;
    align-items: center;
}

.SingleAccordionTitle > div {
    padding-left: 0.1429rem;
    width: calc(100% - 4.7143rem);
}

.SingleAccordionContent {
    margin: 0;
    overflow: hidden;
    transition: max-height 200ms ease-out;
    width: 70%;
    height: auto;
    max-height: 0;
    font-weight: var(--font-weight-regular);
}

.SingleAccordionContent p {
    margin: 0.1429rem 0;
}

.SingleAccordionContent.opened {
    margin-bottom: 1.7143rem;
    max-height: 42.8571rem;
    transition: max-height 350ms ease-in;
}

.SingleAccordionContent.closed {
    max-height: 0;
}

.plus-icon {
    position: relative;
    margin: 0 1.7143rem;
    display: inline-block;
    width: 1.2857rem;
    height: 1.2857rem;
}


.plus-icon::before,
.plus-icon::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: var(--sfly-border-radius-medium);
    background: var(--text-color);
}

.plus-icon::before {
    width: 100%;
    height: 0.1429rem;
}

.plus-icon::after {
    width: 0.1429rem;
    height: 100%;
    transition: transform 200ms;
}

.SingleAccordionTitle.open .plus-icon::after {
    transform: rotate(90deg);
}


.minus-icon {
    position: relative;
    margin: 0 1.7143rem;
    display: inline-block;
    width: 1.2857rem;
    height: 0;
}

.minus-icon::before,
.minus-icon::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: var(--sfly-border-radius-medium);
    background: var(--text-color);
}

.minus-icon::before {
    width: 100%;
    height: 0.1429rem;
}

.minus-icon::after {
    width: 0.1429rem;
    height: 100%;
    transition: transform 200ms;
}


@media screen and (max-width: 768px) {
    .SingleAccordionTitle,
    .SingleAccordionContent {
        font-size: 1rem;
    }

    .SingleAccordionContent {
        width: 100%;
    }

    .SingleAccordionTitle > div {
        width: calc(100% - 4.4286rem);
    }
    
    .plus-icon {
        width: 1rem;
        height: 1rem;
    }

    .minus-icon {
        width: 1rem;
    }
}

picture  {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

picture img {
    max-width: 100%;
    object-fit: contain;
    height: auto;
}

.hotspot-image-box {
  position: relative;
}

.hotspot-image-box .hotspot-box {
  position: absolute;
  background-color: transparent;
  height: 100%;
  width: 100%;
  top: 0rem;
  visibility: hidden;
  margin: 0;
  padding: 0;
}

.hotspot-image-box .hotspot-box.show {
  visibility: visible;
}

.hotspot-image-box  .hotspot-box ul {
  list-style-type: none;
}

.hotspot-image-box .hotspot-box li {
  position: absolute;
  list-style-type: none;
}

.hotspot-image-box .hotspot {
  transition: all 250ms ease-in-out;
  /* Translate length needs to be updated if there is any change in the hotspot width and height */
  transform: translateX(-1.286rem) translateY(-1.286rem);
  padding: 0;
  width: 2.571rem;
  height: 2.571rem;
  border: 0.071rem var(--sfly-border-style-solid) var(--hotspot-border-color);
  position: absolute;
  background: var(--white);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hotspot-image-box .hotspot .spot-icon {
  width: 1.143rem;
  height: 1.143rem;
}

.hotspot-image-box .hotspot .spot-icon svg path{
  fill: var(--hotspot-icon-color);
}

@media (hover: hover) {
  .hotspot-image-box .hotspot:hover {
    opacity: 0.9;
    box-shadow: 0 0 0 0.286rem var(--hotspot-hover-box-shadow-color);
    border: var(--sfly-border-thickness-thick) var(--sfly-border-style-solid) var(--hotspot-border-color);
  }
}

.hotspot-image-box .hotspot.active {
  background-color: var(--hotspot-border-color);
  border: 0.143rem var(--sfly-border-style-solid) var(--white);
}

.hotspot-image-box .hotspot.active .spot-icon svg path {
  fill: var(--white);
}

.hotspot-image-box .hotspot:focus-visible {
  outline: solid;
  outline-color: var(--brand-color-border-primary);
  outline-offset: 0.214rem;
  border: 0.143rem var(--sfly-border-style-solid) var(--hotspot-border-color);
}

.hotspot-image-box .hotspot-popup {
  background: var(--hotspot-popin-bg-color);
  visibility: hidden;
  opacity: 0;
  width: max-content;
  max-width: 17.6429rem;
  min-width: 13.7143rem;
  padding: 1.1429rem 1.4286rem 1.1429rem 1.1429rem;
  box-sizing: border-box;
  position: absolute;
  text-align: left;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
  z-index: 999;
  font-size: 1rem;
}

.hotspot-image-box .hotspot-popup > *:not(:last-child) {
  margin-bottom: 0.5714rem;
}

.hotspot-image-box .hotspot-popup .svg-btn-icon {
  position: absolute;
  border: none;
  background: initial;
  right: 0;
  padding: 0;
  top: 0px;
  margin: 0.5714rem;
  cursor: pointer;
}

.hotspot-image-box .hotspot-popup .svg-btn-icon svg {
  width: 0.7143rem;
  height: 0.7143rem;
}

.hotspot-image-box .hotspot-popup.section1 {
  transform: translateY(1.286rem);
}

.hotspot-image-box .hotspot-popup.section2 {
  transform: translateX(-100%) translateY(1.286rem);
}

.hotspot-image-box .hotspot-popup.section3 {
  transform: translateY(-100%) translateY(-1.286rem);
}

.hotspot-image-box .hotspot-popup.section4 {
  transform: translateX(-100%) translateY(-100%) translateY(-1.286rem);
}

.hotspot-image-box .hotspot-popup.section12 {
  transform: translateX(-50%) translateY(1.286rem);
}

.hotspot-image-box .hotspot-popup.section34 {
  transform: translateX(-50%) translateY(-100%) translateY(-1.286rem);
}

.hotspot-image-box .hotspot-popup.section13 {
  transform: translateY(-50%) translateX(1.286rem);
}

.hotspot-image-box .hotspot-popup.section24 {
  transform: translateX(-100%) translateX(-1.286rem) translateY(-50%);
}

.hotspot-image-box .hotspot-popup * {
  word-wrap: break-word;
}

.hotspot-image-box .hotspot-popup .Title {
  font-weight: var(--font-weight-bold);
  color: var(--text-color-gray);
  line-height: 1.2857rem;
}

.hotspot-image-box .hotspot-popup .Description {
  font-weight: var(--font-weight-regular);
  line-height: 1.1429rem;
  color: var(--text-color-gray);
}

.hotspot-image-box .PriceSection {
  line-height: 1.5rem;
  color: var(--text-color-fog);
}

.hotspot-image-box .PricePrefix + .OriginalPrice, .hotspot-image-box .PricePrefix + .SalePrice {
  margin-left: 0.3571rem;
}

.hotspot-image-box .OriginalPrice + .SalePrice{
  margin-left: 0.5rem;
}

.hotspot-image-box .StrikeThru {
  text-decoration: line-through;
}

.hotspot-image-box .SalePrice {
  color: var(--brand-color-border-primary);
  font-weight: var(--font-weight-regular);
}

.hotspot-image-box .LinkArrow {
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  text-transform: var(--sfly-font-transform-interactive);
  text-decoration: none;
  color: var(--text-color-gray);
  display: block;
}

.hotspot-image-box .LinkArrow:after {
  content: "";
  margin: 0 0 0.0714rem 0.2143rem;
  display: inline-block;
  width: 0.4286rem;
  height: 0.4286rem;
  border: var(--sfly-border-style-solid) var(--text-color-gray);
  border-width: 2px 2px 0 0;
  border-radius: var(--sfly-border-radius-small) var(--sfly-border-radius-small) 0 0;
  transform: rotate(45deg);
}

.hotspot-image-box .LinkArrow.AlignRight {
  text-align: right;
}

.hotspot-image-box .hotspot-popup .LinkSection a + a {
  margin-top: 0.5714rem;
}

.hotspot-image-box .hotspot.active + .hotspot-popup {
    visibility: visible;
    opacity: 1;
}

.hotspot-image-box li.hideForAll{
  display: none;
}

@media screen and (min-width: 993px) and (max-width: 1024px){
  .hotspot-image-box .hotspot-box.hideOnextended {
    display: none;
  }
}


@media screen and (max-width: 768px){
  .hotspot-image-box .hotspot-popup {
    padding: 0.5714rem 1.4286rem 0.5714rem 0.5714rem;
    max-width: calc(100vw/2 - 1.1429rem);
    min-width: calc(100vw/2 - 1.1429rem);
  }
}

@media screen and (min-width: 769px) and (max-width: 992px){
  .hotspot-image-box .hotspot-box.hideOnmedium {
    display: none;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px){
  .hotspot-image-box .hotspot-box.hideOnsmall {
    display: none;
  }
}

@media screen and (max-width: 480px){
  .hotspot-image-box .hotspot-box.hideOnextrasmall {
    display: none;
  }
}

@media screen and (min-width: 993px){
  .hotspot-image-box .hotspot-box li.OnlyDesktop, .hotspot-image-box .hotspot-box li.TabletAndDesktop, .hotspot-image-box .hotspot-box li.MobileAndDesktop {
    display: list-item;
  }
}

@media screen and (min-width: 769px) and (max-width: 992px){
  .hotspot-image-box .hotspot-box li.OnlyTablet, .hotspot-image-box .hotspot-box li.TabletAndDesktop, .hotspot-image-box .hotspot-box li.MobileAndTablet {
    display: list-item;
  }
}

@media screen and (max-width: 768px){
  .hotspot-image-box .hotspot-box li.OnlyMobile, .hotspot-image-box .hotspot-box li.MobileAndTablet, .hotspot-image-box .hotspot-box li.MobileAndDesktop {
    display: list-item;
  }
}


.footer-app-download.app-download-mobileOnly {
    background-color: var(--brand-highLights-bg-color);
    padding: 1.714rem;
}

.footer-app-download .footer-app-banner-content {
    display: flex;
    width: 30.5714rem;
    margin: 0 auto;
}

.footer-app-download .AppIcon, .footer-app-download .footer-open-button {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.footer-app-download .footer-open-button {
    align-items: flex-end;
}

.br-cms-layout .footer-app-download .footer-open-button .AppLink.button {
    padding: var(--button-space-padding);
}

.footer-app-download .info {
    padding-left: 1.1429rem;
    line-height: 1.5rem;
    color: var(--text-color-fog);
    font-weight: var(--brand-fontweight-callout);
    margin: auto auto auto 0;
    flex: 1;
}



.footer-app-download .app-download-title {
    display: block;
    margin-bottom: 0.2857rem;
    color: var(--text-color-fog);
    font-weight: var(--font-weight-semibold);
}

.footer-app-download .app-download-sub-title-two {
    font-weight: var(--font-weight-regular);
}


.footer-app-download .app-download-sub-title {
    display: block;
    color: var(--text-color-fog);
    font-weight: var(--font-weight-semibold);
}

.footer-app-download img {
    width: auto;
    height: 4.7143rem;
}

@media (min-width: 769px) {
    .footer-app-download.app-download-mobileOnly {
        display: none;
    }
}

@media (max-width: 480px) {
    .footer-app-download .footer-app-banner-content {
        width: 100%;
    }
}

@media screen and (max-width: 372px) {
    .footer-app-download.app-download-mobileOnly {
       padding: 1.714rem 1.1429rem;
    }
}

.Badge {
    text-transform: var(--sfly-font-transform-lettercase);
    display: inline-block;
}

.Badge.SFLY,
.Badge.SFLY_BOLD,
.Badge.TP,
.Badge.TP_BOLD {
    color: var(--brand-color-border-primary) !important;
}

.Badge.SFLY_BOLD,
.Badge.TP_BOLD {
    font-weight: var(--font-weight-bold) !important;
}

.ColumnContent {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.ColumnContainer {
    margin: 0 0 2.1429rem;
}

.ColumnContent li,
.ColumnContainer .ColumnHeader {
    text-align: left;
    line-height: 1.5;
    margin-bottom: 0.7143rem;
    font-size: 0.9286rem;
}

.ColumnContainer .ColumnHeader {
    margin: 0 0 0.8571rem;
    letter-spacing: normal;
}

.ColumnContainer .ColumnHeader a,
.ColumnContainer .ColumnHeader a:hover {
    text-decoration: none;
}

.ColumnContainer .ColumnHeader a,
.ColumnContainer .ColumnHeader span {
    font-weight: var(--font-weight-bold);
    color: var(--text-color-gray);
    text-transform: var(--sfly-font-transform-interactive);
}

.ColumnContent li a,
.ColumnContent li span {
    text-decoration: none;
    font-weight: var(--brand-fontweight-interactive);
    font-size: 0.9286rem;
    color: var(--text-color);
    display: inline-block;
    word-spacing: normal;
    letter-spacing: normal;
}

.ColumnContent li a:hover {
    text-decoration: underline !important;
    text-decoration-color: #aaa;
}


.ColumnContainer div.ColumnHeader a::after {
    content: ' >';
}

.ColumnContainer div.ColumnHeader a:focus:after {
    display: inline;
}

.ColumnContent li.ColumnThumbItem img {
    min-width: 11.0714rem;
    max-width: 100%;
    height: 8.5714rem;
}
@media screen and (min-width: 992px) {
    .ColumnContent .ColumnItem.hideOnDesktop {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .ColumnContent .ColumnItem.hide-on-mobile {
        display: none;
    }
    .ColumnContainer.hideonMobile {
        display: none;
    }
}
.NColumns-Container {
  margin: 2.3571rem auto 0.8571rem;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.NColumns-Container.Default {
  padding: 0 1.4286rem;
}

.NColumns-Container .ColumnContent li {
  margin-bottom: 0;
  margin-top: 0.4286rem;
}

.NColumns-Container .ColumnContainer div.ColumnHeader {
  margin-top: 0.4286rem;
  margin-bottom: 0.8571rem;
}

.NColumns-Container .ColumnContent li a,
.NColumns-Container .ColumnContent li span {
  font-weight: var(--brand-fontweight-interactive);
  font-size: 0.8571rem;
  color: var(--text-color);
}

.NColumns-Container .ColumnContainer div.ColumnHeader a,
.NColumns-Container .ColumnContainer div.ColumnHeader span {
  font-weight: var(--font-weight-semibold);
  font-size: 0.8571rem;
  color: var(--footer-text-color);
}

.NColumns-Links-Label {
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: var(--brand-state-focus-outline);
}

.NColumns-Links-Label span.CaretDown {
  margin-left: 0.3571rem;
  margin-top: 0.1429rem;
  border-top: 5px dashed;
  border-right: 5px var(--sfly-border-style-solid) transparent;
  border-left: 5px var(--sfly-border-style-solid) transparent;
}

.NColumns-Links-Container {
  display: flex;
  position: absolute;
  width: 100%;
  margin: 2.1429rem auto 0.8571rem;
  height: auto;
  top: 0;
  flex-direction: column;
  align-items: stretch;
  border-radius: 0.4286rem;
  box-shadow: 0 0.3571rem 1.0714rem 0 rgb(0 0 0 / 8%), 0 0.1429rem 0.2857rem 0 rgb(0 0 0 / 11%);
  background-color: var(--white);
  z-index: 999;
}

.NColumns-Links-Container .Close-Links-Container {
  position: absolute;
  margin: 1rem 1rem 0 0;
  display: flex;
  align-self: flex-end;
}

.NColumns-Links-Container .Close-Links-Container span.CloseIcon { 
  width: 1.1429rem;
  height: 1.1429rem;
  cursor: pointer;
  padding: 0;
}

.NColumns-Links-Container .Close-Links-Container span.CloseIcon svg {
  fill: rgb(145, 148, 151);
}

.NColumns-Links-Wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 1.4286rem;
  margin: 0.5714rem auto 0.8571rem;
}

.NColumns-Links-Wrapper .ColumnContent,
.NColumns-Links-Wrapper .ColumnContainer {
  flex-basis: 50%;
}    
.NColumns-Links-Wrapper .ColumnContent li,
.NColumns-Links-Wrapper .ColumnContainer h2 {
  margin-right: 0.7143rem;
}

.row-content {
    font-weight: var(--font-weight-regular);
    font-size: 0.7857rem;
    letter-spacing: 0;
    text-align: center;
    color: var(--text-color);
}

.row-content a, .row-content a:active, .row-content a:visited, 
.row-content a:link, .row-content span {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.7857rem;
}

.row-content a:hover {
    text-decoration: underline;
}

.row-content em {
    font-style: normal; 
    margin-top: 0.7143rem;
}

@media screen and (min-width: 992px) {
    .mobile-only {
        display: none !important;
    }

    .row-content {
        padding-bottom: 0.7143rem;
    }

    .row-content span {
        display: inline-block;
    }  

    .row-content span em {
        padding: 0 0.7143rem;
    }
}

@media screen and (max-width: 991px) { 
    .row-content {
        padding-bottom: 1.7143rem;
    }
    .row-content, .row-content div.mobile-only {
        display: flex;
        flex-direction: column; 
    }

    .row-content span {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .row-content span em {
        padding: 0 0.3571rem;
    }

    .row-content em {
        margin-top: 0.5714rem;
    }
    
    .row-content em.mobile-only:first-child {
        margin-top: 0;
    }

    .desktop-only {
        display: none !important;
    }
}
.cart-count-icon path {
    fill: var(--text-color);
}
.cart-count-icon .svg-icon {
    width: 1.5714rem;
    height: 1.5714rem;
}
.cart-count-icon circle.orange {
    fill: var(--ignite);
}
.cart-count-icon text {
    font-weight: var(--brand-fontweight-callout);
    fill: var(--white);
}
.cart-count-icon:hover path {
    fill: var(--ignite);
}

.wrapper-social {
    display: flex;
    flex-direction: row;
    padding-bottom: 2.8571rem;
    align-items: center;
    justify-content: center;
    column-gap: 2.7857rem;
    color: var(--footer-text-color);
}

.wrapper-social span.social-label{
  color: var(--footer-text-color);
}

.wrapper-offer .heading, .wrapper-social .heading {
    margin-bottom: 0.8571rem;
    margin-top: 0rem;
    font-family: var(--font-font--md);
    font-size: 0.9286rem;
    font-weight: 600;
}



.wrapper-social .links {
    display: flex;
    column-gap: 2.5714rem;
}

.wrapper-social ul.links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wrapper-social ul.links img, .wrapper-social ul.links svg {
    height: 1.5714rem;
    width: 1.5714rem;
}

.link .wrapper-offer {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.social-label {
    font-weight: var(--font-weight-semibold);
}

.referralOfferLinks .link .TP svg circle {
    fill: var(--sfly-color-brand-tp-teal);
}

.referralOfferLinks .link {
    text-decoration: none !important;
}
@media screen and (max-width: 768px) {
    .wrapper-social {
        display: flex;
        flex-direction: column;
        margin-left: auto;
        align-items: center;
    } 
    .social-label {
        padding-bottom: 1.143rem;
    }
}
  
.logos-tab {
  max-width: 66.4286rem;
  box-sizing: border-box;
  border-bottom: 0.0714rem var(--sfly-border-style-solid) var(--color-fog-light);
}

.logos-tab .logo-container {
  vertical-align: middle;
  max-height: 4.5rem;
  display: flex;
  flex-wrap: wrap;

  list-style-type: none;
  margin: 0;
  padding: 0;
  align-items: center;

}

.logos-tab .logo-container li {
  cursor: pointer;
  margin-bottom: 0;
}

.logos-tab .logo-container .svg-logo svg,
.logos-tab .logo-container a picture img {
  width: 13.2143rem;
  height: 4.5rem;
  text-align: center;
  display: block;
}

.SFLY-SVG .active.old-xp span svg {
  background: var(--ignite);
}

.TP-SVG .active.old-xp span svg {
  background: var(--color-sf-light-blue);
}

/* svg-logo with additional text */

.logos-tab .logo-container .brand-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 11.5rem;
  min-height: 4.5rem;
}

.logos-tab .logo-container .brand-logo span.additional-text + a .svg-logo svg,
.logos-tab .logo-container .brand-logo span.additional-text + a .svg-logo img,
.logos-tab .logo-container .brand-logo span.additional-text + a picture img {
  height: 1.8071rem;
  width: 7.8571rem;
}

/* additional text */
.logos-tab .logo-container .brand-logo .additional-text {
  color: var(--text-color);
  font-weight: var(--brand-fontweight-callout);
  font-size: 0.8571rem;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: center;
}

@media only screen and (max-width: 991px) {
  .logos-tab .logo-container .spoonflower-SVG ,
  .logos-tab:not(.newx) .logo-container .custom-logo {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .logos-tab .logo-container .brand-logo {
    min-width: 8.6429rem;
    min-height: 3.4286rem;
  }

  .logos-tab.newx .logo-container .brand-logo {
    min-height: auto;
    min-width: auto;
  }

  .logos-tab .logo-container .TP-SVG {
    min-width: 8.3571rem;
    min-height:  3.4286rem;
  }

  .logos-tab .logo-container .svg-logo svg,
  .logos-tab .logo-container .custom-logo a picture img {
    width: 10.0715rem;
    height: 3.4286rem;
    object-fit: fill;
  }

  .logos-tab.newx .logo-container .custom-logo a picture img {
    width: auto;
  }

  .logos-tab .logo-container .TP-SVG .svg-logo svg {
    width: 10.0714rem;
    height: 3.4286rem;
  }
}

:root {
    --visual-title-text-color: var(--text-color);
    --visual-title-font-family: var(--br-cms-font-sohne);
    --visual-title-imgblockbg-text-color: var(--text-color);
    --visual-title-imgblock-font-family: var(--br-cms-font-hue);
    --visual-title-imgblockimg-text-color: var(--white);
    --visual-tile-bg-color: var(--visual-tile-bg); 
    --visual-tile-badge-bg-color: var(--br-cms-color-brand-heron);
}

.br-cms-layout .VisualFlyOut .visualUXTile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.571rem;
    width: 12.143rem;
    height: 12.857rem;
    position: relative;
}

.br-cms-layout .VisualFlyOut .visualUXTile:hover .visualUXImgBlockContainer {
    box-shadow: 0 0.214rem 0.214rem 0 rgba(0, 0, 0, 0.20);
}

.br-cms-layout .VisualFlyOut .visualUXTile .visualUXTileTitle {
    height: 3.143rem;
    flex: 1 0 0;
    text-align: center;
    font-family: var(--visual-title-font-family);
    font-weight: var(--font-weight-medium);
    font-size: 1.143rem;
    line-height: 1.571rem;
    margin: 0 0.571rem;
    color: var(--visual-title-text-color);
    overflow: hidden;
}

.br-cms-layout .VisualFlyOut .visualUXTile .tileBGColor .visualBlockTitle {
    color: var(--visual-title-imgblockbg-text-color);
}

.br-cms-layout .VisualFlyOut .visualUXTile .visualUXImgBlockContainer:not(.tileBGColor) .visualBlockTitle.visualBlockImgBGText {
    color: var(--visual-title-imgblockimg-text-color);
}

.br-cms-layout .VisualFlyOut .visualUXTile .visualBlockImgBGText {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    text-align: center;
}

.br-cms-layout .VisualFlyOut .visualUXTile .visualBlockTitle {
    font-family: var(--visual-title-imgblock-font-family);
    font-size: 1.714rem;
    line-height: 2.286rem;
    padding: 1.143rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.br-cms-layout .VisualFlyOut .visualUXTile .visualBlockBadge {
    font-family: var(--br-cms-font-sohne);
    font-size: 0.929rem;
    max-height: calc(100% - 1.5rem);
    max-width: calc(100% - 2.286rem);
    color: var(--visual-tile-badge-text-color);
    background-color: var(--visual-tile-badge-bg-color);
    font-weight: var(--font-weight-medium);
    padding: 0.214rem 0.571rem 0.143rem;
    left: 0.571rem;
    top: 0.571rem;
    border-radius: 0.429rem;
}

.br-cms-layout .VisualFlyOut .visualUXTile .visualUXImgBlockContainer {
    height: 9.107rem;
    width: 12.143rem;
}

.br-cms-layout .VisualFlyOut .visualUXTile .visualUXImgBlockContainer.enableRoundedCorners,
.br-cms-layout .VisualFlyOut .visualUXTile .visualUXImgBlockContainer.enableRoundedCorners img {
    border-radius: 0.857rem;
}

.br-cms-layout .VisualFlyOut .visualUXTile .visualUXImgBlockContainer.tileBGColor {
    background-color: var(--visual-tile-bg-color);
    position: relative;
}

.br-cms-layout .VisualFlyOut .visualUXTile .visualUXTileImage > picture {
    position: absolute;
}

.br-cms-layout .VisualFlyOut .visualUXTile .visualUXTileImage img {
    aspect-ratio: 4 / 3;
}

@media screen and (max-width: 991.5px) {
    .br-cms-layout .VisualFlyOut .visualUXTile {
        width: 11.821rem;
        height: 12.571rem;
    }
    .br-cms-layout .VisualFlyOut .visualUXTile .visualUXImgBlockContainer{
        width: 11.821rem;
        height: 8.857rem;   
    }
    
    .br-cms-layout .visual-flyout-wrapper .VisualFlyOut .visualUXTile .visualUXTileTitle {
        margin-top: 0.571rem;
    }

    .br-cms-layout .VisualFlyOut .visualUXTile .visualUXImgBlockContainer.enableRoundedCorners,
    .br-cms-layout .VisualFlyOut .visualUXTile .visualUXImgBlockContainer.enableRoundedCorners img {
        border-radius: 1.143rem;
    }
}

@media screen and (max-width: 374.5px) {
    
    .br-cms-layout .VisualFlyOut .visualUXTile,
    .br-cms-layout .VisualFlyOut .visualUXTile .visualUXImgBlockContainer,
    .br-cms-layout .VisualFlyOut .visualUXTile .visualUXImgBlockContainer img {
        width: 100%;
    }
}

.br-cms-layout .VisualFlyOut .AppLink.visualUXTile.link {
    text-decoration: none;
}

.br-cms-layout .VisualFlyOut .AppLink.visualUXTile.link:hover .visualUXTileTitle {
    text-decoration: underline;
}
.br-cms-layout .header-flyout-container.newVisualNav .header-flyout-content-wrapper:has(> .VisualFlyOut > .visualUXTile){
    width: 81.714rem;
    max-width: fit-content;
    max-height: 34.786rem;
    border-radius: 1.714rem;
    background: var(--white);
    box-shadow: 0 0.214rem 0.714rem 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    overflow: hidden;
}

.br-cms-layout .VisualFlyOut:has(> .visualUXTile) {
    gap: 0.857rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 34.786rem;
    padding: 1.714rem 2.286rem;
    width: 100%;
}

@media screen and (max-width: 1200.5px) {
    .br-cms-layout .header-flyout-container.newVisualNav .header-flyout-content-wrapper:has(> .VisualFlyOut > .visualUXTile){
        width: 68.714rem;
    }

    .br-cms-layout .VisualFlyOut:has(> .visualUXTile) {
        grid-template-columns: repeat(5, 1fr);
    }   
}

@media screen and (max-width: 991.5px) {
    .br-cms-layout .VisualFlyOut:has(> .visualUXTile) {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        width: 26.786rem;
        border-radius: 0;
        box-shadow: none;
        max-height: 100%;
        padding: 0 1.143rem;
        max-width: fit-content;
        background: var(--white);
        box-sizing: border-box;
    }   
}

@media screen and (max-width: 374.5px) {
    .br-cms-layout .VisualFlyOut:has(> .visualUXTile) {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 992px) {
    .VisualFlyOut::-webkit-scrollbar {   
        width: 1.857rem; 
    }

    .VisualFlyOut::-webkit-scrollbar-thumb {   
        border: 0.571rem solid rgba(0, 0, 0, 0);
        background-clip: padding-box;   
        -webkit-border-radius: 1.429rem;
        background-color: rgba(0, 0, 0, 0.15);
    }
}
.header-flyout-container {
    position: absolute;
    z-index: 99998;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    top: 100%;
}

.header-flyout-container:not(.newVisualNav) {
    box-shadow: 0 0.7143rem 0.7143rem 0 rgba(0, 0, 0, 0.2);
    background-color: var(--white);
    max-width: 1600px;
    width: 100vw;
    left: -1.7857rem;
    border-top: 1px var(--sfly-border-style-solid) var(--sfly-color-neutrals-slate);
    font-weight: var(--brand-fontweight-callout);
}

.header-flyout-container.cms-flyout-hide {
    display: none;
}

.header-flyout-container .flyout-content .ColumnHeader{

     font-size: 0.929rem !important;
}
.header-flyout-container:not(.newVisualNav) .header-flyout-content-wrapper {
    padding: 1.0714rem 1.7857rem 0;
}

.header-flyout-container .header-flyout-content-wrapper .flyout-header {
    font-weight: var(--font-weight-semibold);
    padding: 0 1.0714rem;
    font-size: 1.7143rem;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--text-color-gray);
    outline: var(--brand-state-focus-outline);
}

.header-flyout-container .flyout-content {
    display: flex;
    margin-top: 1.0714rem;
}

.header-flyout-container .flyout-content .content {
    width: 20%;
    padding: 0 1.1429rem;
    box-sizing: border-box;
}

.header-flyout-container .flyout-content .content ul:not(:last-child) {
    margin-bottom: 2.1429rem;
}

@media screen and (max-width: 768.5px) {
    .header-flyout-container {
        display: none;
    }
}
.category-nav-wrapper {
    max-width: 100%;
    display: flex;
    padding: 0 1.7857rem;
    border-bottom: 0.0714rem var(--sfly-border-style-solid) var(--color-fog-light);
} 

.navbar-element-container a.AppLink{
    text-decoration: none;
    text-transform: var(--sfly-font-transform-interactive);
}

.navbar-element-container .AppLink, .cat-item-text{
    font-size: 1em !important;
} 

.navbar-element-container span {
    font-weight: var(--font-weight-semibold);
    font-size: 1em !important;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--text-color-gray);
    text-transform: var(--sfly-font-transform);
    -webkit-appearance: initial;
}
  
@media screen and (max-width: 991.5px) {
    .category-nav-wrapper {
        padding: 0 0.7143rem;
    }
}


.category-list-container {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

.NavBarWrapper.NewSubNav .category-list-container {
    position: static;
}

.category-list-container .primary-list{
    display: flex;
    height: 4rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    font-weight: var(--font-weight-semibold);
    background-color: var(--white);
}

.category-list-container .primary-list li.category-item {
    display: inline-block;
    margin-bottom: 0;
    border-right-width: 0;
    color: var(--text-color-gray);
}

.category-list-container .primary-list li.category-item.hidden {
    display: none;
}

.category-list-container .primary-list li.category-item .navbar-element-container {
    margin-left: 0;
    margin-right: 1.71441rem;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-bottom: 0.1429rem var(--sfly-border-style-solid) transparent;
}

.category-list-container .primary-list li.category-item .navbar-element-container:hover,
.category-list-container .primary-list li.category-item .navbar-element-container.flyout-open { 
    border-bottom-left-radius: 0 !important;
    border-bottom: var(--sfly-border-thickness-thick) var(--sfly-border-style-solid) var(--brand-color-border-primary);
}

.category-list-container .primary-list li.category-item.more-item .navbar-element-container span.svg-icon {
    margin-left: 0.4286rem;
    vertical-align: middle;
}

.category-list-container .primary-list li.category-item.more-item .navbar-element-container span.svg-icon svg {
    width: 0.875rem;
    height: 0.875rem;
}

.hidden {
    display: none !important;
}
.category-list-container .primary-list li.category-item.active-nav-category .navbar-element-container,
.category-list-container .primary-list li.category-item.more-item .dropdown-menu-comp.show-pointer ul li.category-item.active-nav-category .navbar-element-container {
    border-bottom: 0.1429rem var(--sfly-border-style-solid) var(--brand-color-border-primary);
}

.category-list-container .primary-list li.category-item:first-child,
.cat-list-mobile-container .primary-list li.category-item:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.2857rem;
}

.category-list-container .primary-list li.category-item:last-child {
    border-top-right-radius: 0.2857rem;
    border-bottom-left-radius: 0;
    border-right-width: 0.0714rem;
}
.category-list-container .primary-list li.category-item:last-child .navbar-element-container {
    margin-right: 0;
}

.navbar-element-container :hover {
    text-decoration: none !important;
    cursor: pointer;
}

@media screen and (min-width: 769px) {  
    
    .category-list-container .primary-list li.category-item.more-item {
        display: block;
    }

    .category-list-container .primary-list li.category-item.more-item.relative-position { 
        position: relative;
    }
    
    .category-list-container .primary-list li.category-item.more-item .cat-item-container {
        margin-right: 0;
    }

    li.category-item.more-item .dropdown-menu-comp li.category-item .navbar-element-container { 
        padding: 0;
    }

    .category-list-container .primary-list li.category-item.more-item .navbar-element-container:hover { 
        border-bottom: var(--sfly-border-thickness-thick) var(--sfly-border-style-solid) transparent;
    }

    #moreDropDownContainer ul {
        height: 4rem;
        padding: 0;
    }

    #moreDropDownContainer li {
        margin: 0;
        height: 4rem;
        display: flex;
        align-items: center;
    }

    #moreDropDownContainer.new-flag-true li {
        align-items: unset !important;
        margin-top: 0.1429rem;
    }

    #moreDropDownContainer .category-item:hover {
        border-bottom: none !important;
    }

    #moreDropDownContainer li div.navbar-element-container:hover {
        border-bottom: var(--sfly-border-thickness-thick) var(--sfly-border-style-solid) var(--brand-color-border-primary);
        text-decoration: none;
        background-color: transparent;
    }

    #moreDropDownContainer .secondary li.category-item .navbar-element-container:hover,
    #moreDropDownContainer .secondary li.category-item .navbar-element-container.flyout-open { 
        border-bottom-left-radius: 0 !important;
        border-bottom: var(--sfly-border-thickness-thick) var(--sfly-border-style-solid) var(--brand-color-border-primary);
    }

    .category-list-container .primary-list li.category-item.more-item .dropdown-menu-comp {
        z-index: 99999;
    }

    .category-list-container .primary-list li.category-item.more-item .dropdown-menu-comp.show-pointer {
        top: 0%;
        right: 61%;
        height: 4rem;
    }

    .category-list-container .primary-list li.category-item.more-item .dropdown-menu-comp.show-pointer ul { 
        padding-top: 0rem;
        padding-bottom: 0rem; 
    }

    .category-list-container .primary-list li.category-item.more-item .dropdown-menu-comp.show-pointer ul li {
        margin: 0.3571rem 1.2143rem 0.3571rem 1.2143rem;
        font-size: 1em;
        padding: 0;
        line-height: 1.2857rem;
        white-space: nowrap;
        display: block;
    }

    .category-list-container .primary-list li.category-item.more-item .dropdown-menu-comp.show-pointer ul li div {
        float: none;
        width: fit-content;
    }

    .category-list-container .primary-list li.category-item.more-item .dropdown-menu-comp.show-pointer ul li .navbar-element-container {
        height: 100%;
        border-bottom: 0.1429rem var(--sfly-border-style-solid) transparent;
    }
   
    .category-list-container .primary-list li.category-item.more-item .dropdown-menu-comp.show-pointer:before {
        right: 16%;
    }

    .category-list-container .primary-list li.category-item.more-item .dropdown-menu-comp.show-pointer:after {
        right: 17%;
    }

    .category-list-container .primary-list li.category-item.more-item .navbar-element-container span.svg-icon {
        margin-left: 0.4286rem;
        vertical-align: middle;
    }

    .category-list-container .primary-list li.category-item.more-item .navbar-element-container span.svg-icon svg {
        width: 0.875rem;
        height: 0.875rem;
    }

    .hidden {
        display: none !important;
    }
}

.relative-position .navbar-element-container .newCategoryBadge {
    text-align: center;
}


.navbar-element-container .newCategoryBadge {
    font-size: 0.6429rem;
    font-weight: var(--font-weight-semibold);
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: right;
    color: var(--brand-color-border-primary);
    display: block;
}

.new-flag-true .right-side-center {
    top: 10% !important;
}

.navbar-element-container .new-category-badge-hide {
    visibility: hidden;
}

.navbar-element-container.new-badge-padding {
    justify-content: unset !important;
    padding-top: 0.5714rem;
}

/* mweb */
@media screen and (max-width: 768.5px) {
    .category-nav-wrapper {
        display: none;
    }

    .category-list-container .primary-list li.category-item {
        padding: 0.2857rem 0 0.8571rem 0;
    }

    .cat-list-mobile-container li.category-item.more-item {
        display: none !important;
    }
    
    .cat-list-mobile-container {
        position: relative;
        margin-bottom: 0;
        width: calc(100% - 3.5714rem);
    }
    .cat-list-mobile-container.hideNav {
        width: 0;
        visibility: none;
        -moz-transition: width 0.4s ease-in-out;
        -o-transition: width 0.4s ease-in-out;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
    .cat-list-mobile-container.showNav {
        visibility: visible;
        -moz-transition: width 0.4s ease-in-out;
        -o-transition: width 0.4s ease-in-out;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
    
    .cat-list-mobile-container .mobile-nav-menu-wrapper {
        position: relative;
    }
    
    .cat-list-mobile-container .mobile-nav-menu-wrapper .mobile-fade-menu-right {
        background: -webkit-linear-gradient(left, var(--white), rgba(255, 255, 255, 0));
        background: -o-linear-gradient(left, var(--white), rgba(255, 255, 255, 0));
        background: -moz-linear-gradient(left, var(--white), rgba(255, 255, 255, 0));
        background-image: linear-gradient(to left, var(--white), rgba(255, 255, 255, 0));
        position: absolute;
        height: 100%;
        right: 0;
        width: 2.8571rem;
        pointer-events: none;
        z-index: 1;
    }
      
    .cat-list-mobile-container .mobile-nav-menu-wrapper .mobile-fade-menu-left {
        background: -webkit-linear-gradient(right, var(--white), rgba(255, 255, 255, 0));
        background: -o-linear-gradient(right, var(--white), rgba(255, 255, 255, 0));
        background: -moz-linear-gradient(right, var(--white), rgba(255, 255, 255, 0));
        background-image: linear-gradient(to right, var(--white), rgba(255, 255, 255, 0));
        position: absolute;
        height: 100%;
        left: 0;
        width: 2.8571rem;
        pointer-events: none;
        display: none;
        z-index: 1;
    }
      
    .cat-list-mobile-container .mobile-nav-menu-wrapper .mobile-sub-bar-menu-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        background: var(--white);
        overflow: -moz-scrollbars-none;
        -ms-overflow-style: none;
        scrollbar-width: none;
    } 
    
    .cat-list-mobile-container .mobile-nav-menu-wrapper .mobile-sub-bar-menu-wrap::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
      
    .cat-list-mobile-container .mobile-nav-menu-wrapper .mobile-sub-bar-menu-wrap .mobile-sub-bar-menu {
        display: inline-block;
        margin: 0;
    } 
    
    .cat-list-mobile-container .mobile-nav-menu-wrapper .mobile-sub-bar-menu-wrap .mobile-sub-bar-menu li.category-item {
        display: inline-block;
        -webkit-appearance: initial;
        padding: 0.2857rem 0;
        padding-bottom: 0.8571rem;
        margin-right: 1.4286rem;
        border-bottom: 0.1429rem var(--sfly-border-style-solid) #fff0;
    }
      
    .cat-list-mobile-container .mobile-nav-menu-wrapper .mobile-sub-bar-menu-wrap .mobile-sub-bar-menu li.category-item.active-nav-category {
        border-bottom: 0.1429rem var(--sfly-border-style-solid) var(--brand-color-border-primary);
    }
                
    .cat-list-mobile-container .mobile-nav-menu-wrapper .mobile-sub-bar-menu-wrap .mobile-sub-bar-menu li.category-item span {
        font-size: 0.8571rem;
    }
      
    .cat-list-mobile-container .mobile-nav-menu-wrapper .mobile-sub-bar-menu-wrap .mobile-sub-bar-menu li.category-item .newCategoryBadge {
        font-size: 0.6429rem;
    }
      
    .cat-list-mobile-container .mobile-nav-menu-wrapper .mobile-sub-bar-menu-wrap .mobile-sub-bar-menu:first-child {
        padding-left: 0.5714rem;
        padding-top: 0.2143rem;
        padding-bottom: 0.2143rem;
    }
    
}

li.category-item.hide {
    display: none !important;
}
@media screen and (min-width: 992px) {
    li.category-item.hide-on-desktop {
        display: none !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 991.5px) {
    li.category-item.hide-on-tablet {
        display: none !important;
    }
}
@media screen and (max-width: 768.5px) {
    .cat-list-mobile-container li.category-item.hide-on-mobile {
        display: none !important;
    }
}
.uni-header-menu-items {
    font-weight: var(--brand-fontweight-callout);
    font-size: 0.8571rem;
    line-height: 1.2;
    height: 3.3571rem;
    overflow: visible;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.uni-header-menu-items li.dropdownLink-container,
.uni-header-menu-items li.toolbar-menu {
    margin-bottom: 0;
    margin-right: 1.714rem;
}

.dropdownLink-container .dropdown-menu-comp .logged-in-dropdown-list .signin-button:hover .AppLink.button {
    color: var(--button-color-text-primary);
}

.uni-header-menu-items .menu-item a {
    font-weight: var(--brand-fontweight-interactive);
    font-size: 0.9286rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}

.uni-header-menu-items .menu-item a span {
    font-weight: var(--brand-fontweight-interactive);
    font-size: 1rem;
    color: var(--text-color);
    margin-top: 0.3571rem;
    padding: 0.107rem;

}


.uni-header-menu-items .menu-item a .accountIcon-label,
.minWidth {
    margin-left: 0.571rem;
}

.uni-header-menu-items .menu-item a svg,
.uni-header-menu-items .menu-item a svg g[id*="_selected-color-/"],
.uni-header-menu-items .menu-item a svg g[id*="-black_"],
.uni-header-menu-items .menu-item a svg.groupIcon g path:last-child {
    fill: var(--text-color);
}

.uni-header-menu-items .menu-item.active a {
    cursor: pointer;
}

.uni-header-menu-items .dropdown-icon {
    width: 0.6429rem;
    height: 0.3571rem;
    margin-top: 0.143rem !important;
    line-height: 0 !important;
    margin-left: 0.4286rem;
    vertical-align: middle;
}

.dropdownLink-container .dropdown-menu-comp {
    right: .1rem;
    top: 2.4rem;
    width: 12rem;
    z-index: 99997;
}

.dropdownLink-container .dropdown-menu-comp li {
    font-weight: var(--brand-fontweight-callout);
}

.dropdownLink-container .dropdown-menu-comp li:hover a {
    color: var(--text-color);
    text-decoration: underline;
    cursor: pointer;
}

.dropdownLink-container .dropdown-menu-comp li:hover a.button.deep-carrot {
    color: var(--sfly-color-brand-spicy);
}

.dropdownLink-container .dropdown-menu-comp li:hover a.button {
    text-decoration: none;
}

.dropdownLink-container .dropdown-menu-comp li .button {
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: initial;
}

.dropdownLink-container .dropdown-menu-comp li:hover a.button.primary-button,
.dropdownLink-container .dropdown-menu-comp li .button.primary-button {
    color: var(--button-color-text-primary);
}

.dropdownLink-container .dropdown-menu-comp li .button.primary-button:hover {
    color: var(--button-color-text-primary) !important;
}

.uni-header-menu-items .accountIcon,
.uni-header-menu-items .groupIcon {
    width: 1.5714rem;
    height: 1.5714rem;
}

.uni-header-menu-items .accountIcon-label {
    max-width: 14.2857rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uni-header-menu-items li {
    list-style-type: none;
    position: relative;
    margin-right: 1.0714rem;
    vertical-align: middle;
}

.uni-header-menu-items .account-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.uni-header-menu-items .account-container .hello-text {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 0;
    text-overflow: ellipsis;
    margin-left: 0;
}

.uni-header-menu-items li.signInLink-container {
    padding: 0.1429rem 0.5714rem;
}

.uni-header-menu-items .dropdownLink-container a:not(.button) {
    text-align: right;
    padding: 0.1429rem 0.2143rem 0.1429rem 0;
    cursor: pointer;
    text-decoration: none;
}

.uni-header-menu-items .my-photos-label {
    vertical-align: middle;
}

.uni-header-menu-items li.cartLink-container {
    padding: 0.1429rem 0 0 0.1429rem;
    list-style-type: none;
}

.uni-header-menu-items li.cartLink-container .cartLink span {
    margin-top: 0.2143rem;
}

.uni-header-menu-items .cart-icon {
    display: inline-block;
    width: 1.5714rem;
    height: 1.5714rem;
}

.uni-header-menu-items .cart-count-icon {
    margin: -0.3571rem 0 0 0;
}

.uni-header-menu-items .cart-count-icon text {
    font-size: 2.1429rem;
}

.uni-header-menu-items .cart-count-icon:hover path {
    fill: var(--text-color);
}

.uni-header-menu-items .dropdownLink-container .menu-item .signIn-label {
    white-space: nowrap;
}

.uni-header-menu-items .desktop-only {
    display: inline-block;
}

.uni-header-menu-items li.desktop-only {
    display: block;
    margin-right: 1.714rem;
}

.uni-header-menu-items .menu-item a span.hello-text,
.uni-header-menu-items .menu-item a span.dropdown-icon {
    padding: 0;
}

.uni-header-menu-items .NewX.desktop-only {
    display: block;
}

.uni-header-menu-items .mobile-only,
.uni-header-menu-items .hamburger-mobileonly {
    display: none;
}

.brand-TP .header-menu-items .dropdownLink-container .dropdown-menu-comp.anchor-right li:hover a,
.brand-TP .uni-header-menu-items .dropdownLink-container .dropdown-menu-comp.anchor-right li:hover a {
    cursor: pointer;
}

.brand-TP .header-menu-items .dropdownLink-container .dropdown-menu-comp.anchor-right li:hover path,
.brand-TP .uni-header-menu-items .dropdownLink-container .dropdown-menu-comp.anchor-right li:hover path {
    fill: var(--color-sf-light-blue);
}

.svg-icon-main.hamburger-icon>svg {
    width: 1.5720rem;
    cursor: pointer;
    height: auto;
    max-height: 1.1429rem;
}

.dropdownLink-container.arrowAllignment .dropdown-menu-comp.top-right:before {
    right: 5.45rem;
}

.dropdownLink-container.arrowAllignment .dropdown-menu-comp.top-right:after {
    right: 5.54rem;
}

.dropdownLink-container.arrowAllignment .dropdown-menu-comp {
    right: -5.35rem;
    top: 2.6rem
}

@media only screen and (max-width: 991.5px) {
    .UniversalHeaderWrapper button.uh-btn {
        line-height: normal;
        padding: 0.071rem 0 0.071rem 0.429rem;
    }

    .uni-header-menu-items.newX-toolbar-menu li.toolbar-menu {
        margin-left: 1.7143rem;
        margin-right: 0;
    }

    .uni-header-menu-items.newX-toolbar-menu li:last-child {
        margin-right: 0.9286rem;
    }

    .uni-header-menu-items.newX-toolbar-menu .cart-count-icon {
        margin-left: 0;
    }

    .uni-header-menu-items li {
        padding: 0.1429rem 0.4286rem 0 0;
    }

    .uni-header-menu-items li.PTExperience-2 {
        padding: 0;

    }

    .uni-header-menu-items .menu-item a {
        padding-top: 1rem;
    }

    .uni-header-menu-items .menu-item a span:not(.PTExperience-2) {
        display: none !important;
    }

    .uni-header-menu-items .menu-item a span.PTExperience-2 {
        margin-left: 0;
        margin-top: 0;
    }

    .uni-header-menu-items .dropdownLink-container a.PTExperience-2 {
        padding: 1rem 0 0 0;

    }

    .uni-header-menu-items .dropdownLink-container a.buttonAppearanceNormal {
        -webkit-appearance: none;
    }

    .uni-header-menu-items .dropdownLink-container.PTExperience-2 .dropdown-menu-comp.show-pointer.top-right {
        right: -1.6rem;
        top: 3.1rem;

    }

    .uni-header-menu-items .dropdownLink-container.PTExperience-2 .dropdown-menu-comp.top-right::before {
        right: 1.8rem;
    }

    .uni-header-menu-items .dropdownLink-container.PTExperience-2 .dropdown-menu-comp.top-right::after {
        right: 1.9rem;
    }

    .uni-header-menu-items .accountIcon-label {
        max-width: 5rem;
    }

    .uni-header-menu-items li.cartLink-container {
        padding: 0;
    }

    .uni-header-menu-items .desktop-only {
        display: none !important;
    }

    .uni-header-menu-items .mobile-only {
        display: block;
    }

    .uni-header-menu-items .my-projects-user-menu-option.NewX.mobile-only,
    .uni-header-menu-items .my-photos-user-menu-option.NewX.mobile-only {
        display: block !important;
    }

    .uni-header-menu-items .hamburger-mobileonly {
        display: block;
    }
}

@media only screen and (max-width: 768.5px) {
    .uni-header-menu-items {
        font-weight: var(--brand-fontweight-callout);
        font-size: 0.7143rem;
        margin: 0.0714rem 0 0;
        padding: 0;
        align-items: initial;
    }

    .uni-header-menu-items .menu-item a {
        display: block;
        text-align: center;
        margin: 0;
    }

    .uni-header-menu-items .accountIcon,
    .uni-header-menu-items .groupIcon {
        width: 1.3571rem;
        height: 1.3571rem;
        margin: 0 auto;
        display: inline-block;
        visibility: visible;
        vertical-align: middle;
    }

    .uni-header-menu-items .dropdownLink-container.PTExperience-2 .dropdown-menu-comp.show-pointer.top-right {
        left: auto !important;
        transform: none !important;
    }

    .uni-header-menu-items .accountIcon.PTExperience-2 {
        width: 1.5714rem;
        height: 1.5714rem;
    }

    .uni-header-menu-items .accountIcon-label {
        max-width: 3.2143rem;
        display: block;
        text-align: right;
        margin-top: 0.5714rem;
    }


    .uni-header-menu-items li.signInLink-container .signIn-label {
        display: block;
        text-align: center;
        margin: 0.5rem 0 0;
    }



    .uni-header-menu-items .my-photos-label {
        display: block;
        text-align: center;
        margin: 0.3571rem 0 0;
    }

    .uni-header-menu-items .my-photos-label .my-photos-label-my {
        display: none;
    }

    .uni-header-menu-items:not(.newX-toolbar-menu) li.toolbar-menu {
        margin: 0;
    }

}

@media screen and (min-width: 480px) and (max-width: 1024.5px) {
    .uni-header-menu-items:not(.newX-toolbar-menu) li {
        margin-right: 0.8571rem;
    }
}

@media only screen and (max-width: 480.5px) {
    .uni-header-menu-items li {
        padding: 0.1429rem 0.2857rem;
    }
}

.minWidth {
    min-width: max-content;

}
.hbm-toolbar-menu {
    border-bottom: var(--sfly-border-style-solid) 0.0714rem var(--slate-gray);
    background-color: var(--white);
    font-weight: var(--font-weight-semibold);
    font-size: 0.9286rem;
    display: flex;
    height: 3.5rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.hbm-toolbar-menu .menu-item {
    width: 50%;
    cursor: pointer;
}
.hbm-toolbar-menu .menu-item > a {
    color: var(--text-color);
    display: flex;
    font-weight: var(--font-weight-regular);
    font-size: 0.9286rem;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    justify-content: center;
}
.hbm-toolbar-menu .menu-item a svg path,
.hbm-toolbar-menu .menu-item a svg {
    fill: var(--text-color);
}
.hbm-toolbar-menu .menu-item a span.expanded {
    transform: rotate(180deg);
    transition-duration: 0.5s;
    min-width: 0.6429rem;
    width: 0.6429rem;
    height: 0.3571rem;
}
.hbm-toolbar-menu .menu-item a span.collapsed {
    transition-duration: 0.5s;
    min-width: 0.6429rem;
    width: 0.6429rem;
    height: 0.3571rem;
}
.hbm-toolbar-menu .menu-item a .hbm-toolbar-menu-label {
    padding-left: 0.3571rem;
    color: var(--text-color);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp {
    z-index: 1;
    position: absolute;
    text-align: left;
    margin-top: 0.8571rem;
    left: 0;
    right: 0;
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp ul {
    max-width: none;
    border-radius: var(-sfly-border-radius-none);
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp::before, .hbm-toolbar-menu .menu-item .dropdown-menu-comp::after {
    display: none;
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp a {
    justify-content: flex-start;
    font-weight: var(--font-weight-regular);
    font-size: 0.9286rem;
    text-decoration: none;
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp li:hover a {
    color: var(--text-color);
    text-decoration: underline;
    cursor: pointer;
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp li:hover a.button {
    text-decoration: none;
}

.hbm-toolbar-menu .menu-item .dropdown-menu-comp li:hover path {
    fill: var(--ignite);
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp a.button {
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: 1rem;
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp li:hover a.button.primary-button,
.hbm-toolbar-menu .menu-item .dropdown-menu-comp a.button.primary-button:hover,
.hbm-toolbar-menu .menu-item .dropdown-menu-comp a.button.primary-button {
    color: var(--button-color-text-primary);
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp .sign-in-up-buttons {
    display: flex;
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp .sign-in-up-buttons li {
    width: 50%;
    margin: 1.0714rem;
    margin-top: 1.4286rem;
    margin-bottom: 0.7143rem;
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp .sign-in-up-buttons li:nth-child(odd) {
    margin-right: 0.7143rem;
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp .sign-in-up-buttons li:nth-child(even) {
    margin-left: 0.7143rem;
}
.hbm-toolbar-menu .menu-item .dropdown-menu-comp .sign-in-up-buttons li .button-initial-appearance {
    -webkit-appearance: initial;
}
.hbm-toolbar-menu span .accountIcon-svg {
    min-width: 1.5714rem;
    min-height: 1.5714rem;
    width: 1.5714rem;
    height: 1.5714rem;
    margin-left: 0.3571rem;
    margin-right: 0.3571rem;
}
.hbm-toolbar-menu span .accountIcon-svg span.svg-icon {
    width: 1.5714rem;
    height: 1.5714rem;
}
.hbm-toolbar-menu span .accountIcon-svg g g {
    transform: translate(1.5714rem, 1.5714rem);
}
.hbm-toolbar-menu span .projectIcon-svg {
    min-width: 1.2857rem;
    min-height: 1.5714rem;
    width: 1.2857rem;
    height: 1.5714rem;
}
.hbm-toolbar-menu span .accountIcon-label {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.myAccount-link .dropdown-menu-comp {
    left: 0;
    right: 0;
}
.myAccount-link .dropdown-menu-comp .logged-in-dropdown-list {
    max-width: none;
    border-radius: var(-sfly-border-radius-none);
}
@media screen and (min-width: 992px) {
    .hbm-toolbar-menu {
        display: none;
    }
}


.hamburger-menus {
    overflow: hidden;
}
.hamburger-menu-wrapper-container {
    overflow-y: auto;
    height: calc(100vh - 10.2857rem);
    font-weight: var(--font-weight-regular);
}

.hamburger-menu-wrapper-container.noScrollMenu {
    overflow-y: unset;
}
.hamburger-menu-wrapper-container .hbm-categories {
    list-style-type: none;
    /* padding-right: 1.7143rem;
    padding-left: 1.7857rem; */
    padding: 0;
    margin-top: 0;
    height: auto;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent; 
}
.hamburger-menu-wrapper-container .hbm-category-item .Title {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    position: relative;
    padding: 1.0714rem 1.4286rem 0.7143rem 1.7857rem;
    margin-right: 1.7143rem;
}
.hamburger-menu-wrapper-container .hbm-category-item .Title.Level_1 {
    font-size: 1.2857rem;
}
.hamburger-menu-wrapper-container .hbm-category-item:first-child .Title.Level_1 {
    margin-top: 1rem;
}
.hamburger-menu-wrapper-container .hbm-category-item ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.hamburger-menu-wrapper-container .title-bar {
    color: var(--text-color-fog);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-left: 1.7857rem;
    padding-right: 1.7143rem;
}
.hamburger-menu-wrapper-container .title-bar.justifyCenter{
    justify-content: center;
    padding: 1.143rem 0 1.714rem 0;
}
.hamburger-menu-wrapper-container .title-bar .titile {
  max-width: var(--max-width);
  max-height: var(--max-height);
  color: var(--text-color-fog);
  font-weight: var(--font-weight-semibold);
  font-size: 1.3329rem;
  line-height: 2rem;
}
.hamburger-menu-wrapper-container .visual-flyout-wrapper {
    height: calc(100vh - 7.571rem);
    overflow-y: auto;
}

.hamburger-menu-wrapper-container .visual-flyout-wrapper .VisualFlyOut {
    padding-bottom: 8rem;
}

.hamburger-menu-wrapper-container .title-bar.justifyCenter .titile{
    font-size: 1.714rem;
}

.hamburger-menus .hbm-categories .hbm-category-item .title-bar a {
  height: 1.2857rem;
  color: var(--text-color-fog) !important;
  font-weight: var(--brand-fontweight-interactive);
  font-size: 1rem;
  line-height: 1.2857rem;
  text-decoration:none;
  margin-bottom: 0.1429rem;
  width: 4.7857rem;
  margin-right: 0.2857rem;
}

.hamburger-menu-wrapper-container .hbm-icon-span {
    right: 0.3571rem;
    left: auto;
    height: 0.9871rem;
}

.hamburger-menu-wrapper-container .hbm-icon-span> svg {
    height: 0.9871rem;
    width: 0.5714rem;
    transform: rotate(180deg);
}

.hbm-categories .hbm-category-item {
    /* position: relative; */
    /* padding: 1.0714rem 1.4286rem 0.7143rem 0; */
    color: var(--text-color);
    text-decoration: none;
    font-weight: var(--font-weight-regular);
    /* display: flex; */
}

.hbm-categories .hbm-category-item > .Title .hbm-icon-span svg path {
    fill: black;
}

.hbm-categories .hbm-category-item > .Title:hover .hbm-icon-span svg path, 
.hamburger-menu-wrapper-container .hbm-back:hover svg {
    fill: var(--ignite);
}

.hbm-categories .hbm-category-item.tinyprint > .Title:hover .hbm-icon-span svg path,
.hamburger-menu-wrapper-container .hbm-back.tinyprint:hover svg{
    fill: var(--color-sf-light-blue);
}

.hbm-category-item .hbm-icon-span > svg > path {
    fill: black;
}

.hbm-categories .hbm-category-item div, .hbm-back {
    cursor: pointer;
}
.hamburger-menus .hbm-categories .hbm-category-item a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: var(--font-weight-regular);
    display: list-item;
    width: 100%;
}
.hamburger-menu-wrapper-container .hbm-see-all-link:first-child {
    width: 4.7857rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hamburger-menus .additional-logos {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--fog-light);
    height: 3.1429rem;
}
.hbm-category-item .Title .hbm-icon-span {
    position: absolute;
    right: 0.3571rem;
    left: auto;
}
.hbm-category-item .hbm-icon-span > svg{
    width: 0.5714rem;
    height: 0.9586rem;
    transform: rotate(180deg);
}
.hbm-categories.grayout {
    background-color: var(--light-black);
}
.hamburger-menu-wrapper-container .hbm-back {
    padding-top: 1.4286rem;
    padding-right: 1.7143rem;
    padding-bottom: 0.3571rem;
    padding-left: 1.7143rem;
    font-weight: var(--brand-fontweight-interactive);
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0;
}

.hamburger-menu-wrapper-container .hbm-back-visual {
    padding: 1.143rem 1.143rem 0 1.143rem;
    font-weight: var(--brand-fontweight-interactive);
    font-size: 1.143rem;
    line-height: 1.571rem;
    letter-spacing: 0;
    display: flex;
    justify-content: space-between;
    width: fit-content;
}

.hamburger-menu-wrapper-container .hbm-back:hover,
.hbm-categories .hbm-category-item > .Title:hover,
.hbm-categories .hbm-category-item > .Title div:hover,
.hbm-categories .hbm-category-item .AppLink:hover {
    color: var(--sfly-color-brand-ignite) !important;
}

.hamburger-menu-wrapper-container .hbm-back.tinyprint:hover,
.hbm-categories .hbm-category-item.tinyprint > .Title:hover,
.hbm-categories .hbm-category-item.tinyprint > .Title div:hover,
.hbm-categories .hbm-category-item.tinyprint .AppLink:hover{
    color: var(--sfly-color-brand-tp-teal) !important;
}

.hamburger-menu-wrapper-container .hbm-back .hbm-back-arrow {
    margin-right: 0.7143rem;
}
.hamburger-menu-wrapper-container .hbm-back-visual .hbm-back-arrow-vis {
    height: 1.143rem;
    width: 1.143rem;
    display: flex;
    align-items: center;
}
.hamburger-menu-wrapper-container .hbm-back .hbm-back-arrow > svg{
    height: 0.7143rem;
    width: 0.4286rem;
    fill: var(--text-color-fog-b);
}


.hamburger-menu-wrapper-container .hbm-back-visual .closeNavigationMenu {
    width: 1.571rem;
    height: 1.571rem;
}
.hamburger-menu-wrapper-container .hbm-back-visual .back-wrapper {
    display: flex;
    align-items: center;
    height: 1.143rem,
}
.hamburger-menu-wrapper-container .hbm-back-visual .hbm-back-arrow-vis> svg{
    height: 0.714rem;
    width: 0.429rem;
}
.hbm-categories.hbm-not-home {
    margin-top: 0;
    margin-bottom: 0;
}
.hbm-menu-title {
    font-weight: var(--font-weight-regular);
    font-size: 1.1429rem;
    line-height: 1.23;
    color: var(--sfly-color-brand-ignite);
    padding: 1.4286rem 1.4286rem 0.7143rem;
}

.hbm-categories.grayout:focus, 
.hbm-categories.grayout:hover,
.hbm-categories.grayout:focus-within {
    outline: var(--brand-state-focus-outline);
    cursor: default;
    color: var(--light-black);
}
.tinyPrintsSelectedMenu {
    color: var(--sfly-color-brand-tp-teal);
}

.closeNavigationMenu {
    padding: 5px;
    padding-top: 0px;
}

@media screen and (max-width: 762.5px) {
    .hbm-categories.hbm-not-home {
        margin-bottom: 2.2429rem;
    }
    .hamburger-menu-wrapper-container .hbm-categories {
        margin-bottom: 3.143rem;
    }
}
@media screen and (min-width: 992px) {
    .hamburger-menus {
        display: none;
    }
}
@media screen and (max-width: 991.5px) {

    .hamburger-menus .newX-hamburger-title{
        display: flex;
        justify-content: space-between;
    }
    .hamburger-menus .newX-hamburger-title.moveToTopPosition.positionEnd .closeNavigationMenu{
        padding: 0;
        position: absolute;
        right: 1.143rem;
        top: 1.143rem;
        width: 1.571rem;
        height: 1.571rem;
    } 
    .hamburger-menus .newX-hamburger-title.moveToTopPosition.positionEnd .closeNavigationMenu span,
    .hamburger-menus .newX-hamburger-title.moveToTopPosition.positionEnd .closeNavigationMenu svg {
        padding: 0;
        width: 1.571rem;
        height: 1.571rem;
    }

    .hamburger-menus .newX-hamburger-title.moveToTopPosition 
    .hamburger-menus .hamburger-menu-wrapper-container{
        transition: transform 350ms linear
    }

    /* .hamburger-menus .hamburger-menu-wrapper-container.TransitionForward {
        transform: translateX(100%);
    }

    .hamburger-menus .hamburger-menu-wrapper-container.TransitionBackward {
        transform: translateX(-100%);
    } */

    .hamburger-menus .hamburger-menu-wrapper-container.NoTransition {
        transform: none;
    }

    .hamburger-menus .newX-hamburger-title.BoxShadow{
        box-shadow: 0 .1429rem .2857rem 0 rgba(0,0,0,0.1), 0 .3571rem 1.0714rem 0 rgba(0,0,0,0.08);
        z-index: 2;
        position: relative;
    }

    .hamburger-menus .newX-hamburger-title.moveToTopPosition{
        position: absolute;
        top: 0;
        width: calc(100% - 0.7857rem);
    }

    .hamburger-menus:first-child {
        padding-top: 3.5rem;
    }

    .hamburger-menus.noPadding {
        padding-top: 0;
    }
    .Drawer .hamburger-menus.noPadding .newX-hamburger-title {
        padding-top: 0;
        box-shadow: none;
    }

    .hamburger-menus .newX-hamburger-title span {
        display: flex;
        width: 100%;
        height: 100%;
    }
    .hamburger-menus .newX-hamburger-title .close-icon {
        display: flex;
        height: 1.3329rem;
        width: 1.3329rem;
    }
    .hamburger-menus .newX-hamburger-title .close-icon svg{
        height: auto;
        width: 1.3329rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 991.5px) {
    li.hbm-category-item.hide-on-tablet{
        display: none;
    }

}
@media screen and (max-width: 768.5px) {
    li.hbm-category-item.hide-on-mobile{
        display: none;
    }

}


.br-cms-layout .Default_Dropdown{
    background: #fff;
    border: none;
    box-shadow: none;
    cursor: default;
    display: block;
    left: 0;
    max-width: 100%;
    padding: 0;
    /* position: absolute;
    right: auto;
    top: 0; */
    transform: translateX(100%);
    width: 100%;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
}

.br-cms-layout .Hide_Lvl_2, .br-cms-layout .hide-prev-lvl {
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    height: 0;
    padding: 0 !important;
    margin: 0 !important;
}
.category-backward-transform {
    transform: translateX(-100%);
}
.hide-prev-lvl {
    height: 0;
}
.br-cms-layout .Show-Next-Lvl {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    z-index: 1;
    transform: translateX(-0%);
}
.br-cms-layout .CategoryTransition {
    transition: transform 350ms linear
}
.UniversalHeaderWrapper .searchbar-desktop-wrapper .search-bar {
    width: 23.3571em;
}

.UniversalHeaderWrapper .search-bar .dropdown-menu-comp {
    z-index: 999 !important;
    right: 0;
}

.UniversalHeaderWrapper .recent-list > * {
    border-bottom: 0.0714em var(--sfly-border-style-solid) var(--list-item-border-color);
}

.UniversalHeaderWrapper .recent-header > *:last-child {
    border: none;
}

.UniversalHeaderWrapper .recently-viewed-wrapper *:active, .UniversalHeaderWrapper .recently-viewed-wrapper *:focus {
    outline: 0;
}

.UniversalHeaderWrapper .search-bar .dropdown-menu-comp ul li {
    cursor: pointer;
    margin: 0;
    padding: 0.443em 1.2em;
}

.UniversalHeaderWrapper .search-bar .dropdown-menu-comp .recent-list li {
    cursor: default !important;
    padding: 0;
}

.UniversalHeaderWrapper .search-bar .dropdown-menu-comp .search-result li:hover{
    background-color: var(--dropdown-background-color);
}

.UniversalHeaderWrapper .search-bar .dropdown-menu-comp ul {
    width: 25.1429em;
    padding: 0 !important;
}

.UniversalHeaderWrapper .autocomplete-container {
    overflow-x: hidden !important; 
    width: 25.1429em
}

.UniversalHeaderWrapper .autocomplete-container ul {
    margin-top: 0;
    padding-top: 0 !important;
}

.UniversalHeaderWrapper .search-bar .dropdown-menu-comp li:hover a {
    color: var(--text-color) !important;
}

.UniversalHeaderWrapper .search-bar .dropdown-menu-comp li a {
    text-decoration: none;
    white-space: normal;
}

.UniversalHeaderWrapper .search-bar .dropdown-menu-comp .autocomplete-container .header {
    padding: 0 1em;
    align-items: center;
}

.UniversalHeaderWrapper .autocomplete-container .header{
    border-top: none;
    padding: 0;
    border-top-left-radius: 0.2857em;
    border-top-right-radius: 0.2857em;
    font-weight: var(--font-weight-semibold) !important;
    font-size: 1em;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.5;
    color: var(--text-color);
    padding-left: 0.7143em;
    height: 2.5714em;
    mix-blend-mode: darken;
    box-shadow: inset 0 -0.0714em 0 0 var(--dropdown-header-box-shadow);
    background-color: var(--fog-light);
    margin: 0;
}

.UniversalHeaderWrapper .search-bar .text_box_wrapper {
    width: auto;
    min-width: 18.0714em;
    height: 2.7143em;
    border: 0.0714em var(--form-border-style) var(--light-grey-2); /* This em value not rem */
    border-radius: 0.4286em; /* This em value not rem */
}
.UniversalHeaderWrapper .search-bar .text_box_wrapper:hover {
    border-color:var(--textbox-border-hover-color);
}

.UniversalHeaderWrapper .search-bar svg {
    fill: var(--text-color);
}

.UniversalHeaderWrapper .autocomplete-container .recent-header {
    display: flex;
    justify-content: space-between;
    padding: 0 1em;
}

.UniversalHeaderWrapper .search-bar {
    position: relative;
}

.UniversalHeaderWrapper .search-bar .ScrollContent {
    color: var(--text-color-light);
    width:  calc(100% - var(--search-icon-width));
    visibility: initial;
    margin: auto;
    position: absolute;
    overflow: hidden;
    align-self: center;
    bottom: 0;
}

.UniversalHeaderWrapper .search-bar .ScrollContent .SearchText {
    display: inline-block;
    margin-left: .7143em;
    line-height: 2.7143em !important;
    height: 100%;
}

.UniversalHeaderWrapper .search-bar .ScrollContent .ListContainer {
    position: absolute;
    width: calc(100% - 3.4593em);
    list-style: none;
    left: 3.8571em;
    /* animation-delay: 2s; */
    font-size: inherit;
    line-height: 2.7143em;
    /* Handling Elipsis */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.UniversalHeaderWrapper .search-bar .ScrollContent .ListContainer .List {
    overflow: hidden;
    padding: 0;
    margin-left: .7143em;
    margin-top: 0;
    margin-bottom: 0;
}

.UniversalHeaderWrapper .search-bar .ScrollContent .ListContainer .List .ListItem {
    box-sizing: border-box;
    height: 2.0714em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 2.7143em;
}

.UniversalHeaderWrapper .search-bar .ScrollContent.HiddenVisiBility {
    visibility: hidden;
}

.UniversalHeaderWrapper .search-bar .text_box_wrapper .text_box_icon {
    z-index: 1;
    background: transparent;
}

@media screen and (max-width: 991.5px) {
    .UniversalHeaderWrapper .search-bar .dropdown-menu-comp ul {
        width: 26.8571em;
    }

    .UniversalHeaderWrapper .search-bar .ScrollContent {
        height: 100%;
    }
}
.UniversalHeaderWrapper .recently-viewed-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.4286rem 1.7857rem;
    height: 6.0714rem;
}

.UniversalHeaderWrapper .section-1 {
    flex: 1;
}

.UniversalHeaderWrapper .section-2 {
    flex: 1;
}

.UniversalHeaderWrapper .search-bar .header> *:last-child {
    cursor: pointer;
}

.UniversalHeaderWrapper .section-1 a {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var( --text-color-light);
    text-decoration: none;
}

.UniversalHeaderWrapper .section-2 a {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: var( --text-color-light);
    text-decoration: none;
    align-items: center;
}

.UniversalHeaderWrapper .section-2 img {
    min-width: 2rem;
    max-width: 4.5714rem;
    max-height: 4.5714rem;
}

.UniversalHeaderWrapper .section-2 .product-title {
    color: var( --text-color-light);
    font-size: 0.8571rem;
    letter-spacing: 0;
    line-height: 1.2857rem;
    padding-top: 0.2143rem;
    font-weight: var(--brand-fontweight-callout) !important;
}

.UniversalHeaderWrapper .item-view-all {
    text-decoration: none;
    font-weight: var(--font-weight-semibold) !important;
    color: var( --text-color-light);
    font-size: 0.8571rem;
}

.UniversalHeaderWrapper .item-label {
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    color: var( --text-color-light);
    font-size: 0.8571rem;
}

.UniversalHeaderWrapper .search-bar .wrapper li {
    cursor: default;
}
.recommanded-link, .recommanded-link:hover {
    text-decoration: none !important;
    color: var(--text-color);
}

.recommanded-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.recommanded-wrapper .ImageWrapper {
    width: 4.2857rem;
    min-width: 4.2857rem;
    height: 4.2857rem;
    display: flex;
}

.recommanded-wrapper img {
    min-width: 3.5714rem;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.recommanded-wrapper p {
    margin-left: 1.0714rem;
}
.skip-links-wrapper {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -105%);
    transition: transform 0.2s ease-out;
    background-color: var(--white);
    border: 0.0714rem var(--sfly-border-style-solid) var(--myprojects-border);
    border-top: none;
    padding: 1.0714rem 0;
}

.skip-links-wrapper.active {
    transform: translate(-50%, -1px);
    transition: transform 0.2s ease-out;
}

.skip-links-wrapper.SFLY {
    border: 0.0714rem var(--sfly-border-style-solid) var(--ignite);
}

.skip-links-wrapper.TP {
    border: 0.0714rem var(--sfly-border-style-solid) #0192b5;
}

.skip-links-wrapper .skip-links-list {
    display: flex;
    padding: 0;
    margin: 0;

}
.skip-links-wrapper .skip-links-list .skip-link-wrapper {
    display: inline-block;
    padding: 0 0.3571rem;
    margin: 0.3571rem 0.7143rem;
    line-height: 1.1429rem;
}

.skip-links-wrapper .skip-links-list .skip-link-wrapper .skip-link {
    font-weight: var(--brand-fontweight-interactive);
    color: #0065B8;
    font-size: 1rem;
    line-height: 1.1429rem;
    text-decoration: none;
    white-space: nowrap;
}

.skip-links-wrapper .skip-links-list .skip-link-wrapper .skip-link:focus {
        text-decoration: underline;
}
    

@media screen and (max-width: 480.5px) {
    .skip-links-list {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .skip-link-wrapper {
        margin: 0.7143rem;
    }
}

.footer-brands-tab {
  margin: 0 auto;
  padding: 1.7143rem 1.7143rem 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.footer-brands-tab .label {
  display: block;
  padding: 0rem;
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  color: var(--text-color-fog);
  line-height: 1.714rem;
  height: 1.714rem;
  white-space: nowrap;
}

.footer-brands-tab .logos-tab {
  border-bottom: none;
  max-width: unset;
}

.footer-brands-tab .logos-tab .logo-container .brand-logo,
.footer-brands-tab .logos-tab .logo-container .brand-logo a{
  min-width: unset;
  min-height: unset;
}

.footer-brands-tab .logos-tab .logo-container {
  max-height: none;
  column-gap: 2.857rem;
  row-gap: 1.714rem;
  justify-content: center;
  max-width: var(--FooterLogoWidth);
}

.footer-brands-tab .logos-tab .logo-container .svg-logo {
  display: flex;
}

.footer-brands-tab .logos-tab .logo-container .svg-logo svg,
.footer-brands-tab .logos-tab .logo-container .custom-logo a picture img {
  height: auto;
  width: auto;
  text-align: center;
  display: inline;
}

.footer-brands-tab .logos-tab .logo-container .custom-logo a picture img {
  max-height: 2rem;
}

.footer-brands-tab .logos-tab .logo-container .boxRightShadow {
  box-shadow: none;
}

.footer-brands-tab .hide-on-desktop { 
  display: none;
}

.footer-brands-tab .hide-on-mweb {
  display: flex;
  gap: 2.857rem;
}

@media only screen and (max-width: 991px) {
  .footer-brands-tab .logos-tab .logo-container {
    max-width: var(--FooterMWebLogoWidth);
  }
  .footer-brands-tab {
    padding-bottom: 2.8571rem;
  }
  .footer-brands-tab .label {
    font-size: .8571rem;
    height: 1.286rem;
    line-height: 1.286rem;
  }

  .footer-brands-tab .logos-tab .logo-container .spoonflower-SVG,
  .footer-brands-tab .logos-tab .logo-container .custom-logo {
    display: inline;
  }

  .footer-brands-tab .logos-tab .logo-container, .footer-brands-tab .hide-on-mweb {
    column-gap: 1.7143rem;
  }

  .footer-brands-tab .logos-tab .logo-container .svg-logo svg,
  .footer-brands-tab .logos-tab .logo-container .custom-logo a picture img {
    max-width: var(--FooterMaxWidthMWeb) !important;
  }
}


@media only screen and (max-width: 768px) {
  .footer-brands-tab .logos-tab .logo-container {
    max-width: unset;
    padding-top: 1.1429rem;
  }
  .footer-brands-tab .hide-on-mweb {
    display: none;
  }
  .footer-brands-tab .hide-on-desktop { 
    display: inline !important;
    max-width: 34.2857rem;
  }
  .footer-brands-tab .hide-on-desktop .label{ 
    font-size: .8571rem;
    text-align: center;
    max-height: unset;
    line-height: 1.5rem;
  }
}

@media (max-width:991px) {
    .BackToTop{
        display: none !important;
    }
}
.BackToTop {
    display: none;
    position: fixed;
    bottom: 7.1429rem;
    right: 0.8571rem;
    width: 6.1429rem;
    z-index: 999;
    cursor: pointer;
    border: 0.0714rem var(--sfly-border-style-solid) var(--color-fog-light);
    border-radius: 0.4286rem;
    background-color: var(--white);
    box-shadow: 0 0.0714rem 0.2857rem 0 rgb(0 0 0 / 14%), 0 0.2143rem 0.1429rem 0 rgb(0 0 0 / 30%);
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

.BackToTop:focus-visible {
    outline: 0.0714rem auto var(--brand-color-border-primary);
}

.BackToTop:hover {
    border: var(--sfly-border-thickness-thin) var(--sfly-border-style-solid) var(--text-color-fog);
    border-radius: 0.4286rem;
    background-color: var(--white);
}

.BackToTop:active {
    background-color: var(--back-to-top-bg); 
}


.BackToTop span {
    box-sizing: unset;
    transform: rotate(90deg);
    height: 1.1786rem;
    width: 0.6979rem;
    fill: var(--text-color-fog);
    padding-left: 0.6786rem;
    display: inline-block;
}

.BackToTop div {
    padding: 0.5322rem 2.0714rem 0.85714rem;
    line-height: 1.5rem;
    color: var(--text-color-fog);
    font-weight: var(--brand-fontweight-callout);
    letter-spacing: 0;
    text-align: center;
    box-sizing: border-box;
}
.ComponentWrapper {
    position: relative;
}
.ManageContentButton {
    display: block;
    position: absolute;
    z-index: 100;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
}

.fallback-component {
    max-height: inherit;
    max-width: inherit;
    padding: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.fallback-component p {
    font-weight: var(--font-weight-semibold);
    color: var(--text-color)
}

.fallback-component button {
    all: unset;
    text-decoration: underline;
    color: var(--color-blue);
}

.fallback-component .options {
    display: flex;
    justify-content: space-around;
}

.fallback-component .options > * {
    cursor: pointer;
}
.NotFound {
    flex-flow: column nowrap;
    flex: 0 1 auto;
    max-width: 80%;
    margin: 0 auto;
}

.NotFound h1 {
    font-size: 50px;
    text-transform: var(--sfly-font-transform-lettercase);
    margin: 0;
    display: flex;
    flex: 0 1 auto;
    justify-content: center;
}

.NotFound p {
    font-size: 22px;
    margin: 5px 0;
    padding: 0;
    text-align: center;
}

.NotFound ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.NotFound li {
    --padding: 10px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    padding: var(--padding);
    flex: 0 1 auto;
    width: calc(50% - (var(--padding)) * 2)
}

.NotFound li a {
    display: flex;
    flex-flow: column nowrap;
    font-size: 20px;
    text-decoration: none;
    color: var(--text-color);
}
.NotFound li img {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
}

.NotFound li span {
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    margin: 10px 0;
}

@media (max-width: 479px) {
    .NotFound ul {
        flex-flow: column nowrap;
    }
    .NotFound li {
        width: 100%;
    }
}
.AnalyticsData {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 auto;
    min-height: 60px;
}
.AnalyticsData ul {
    display: flex;
    flex-flow: row wrap;
    flex: 1 1 auto;
    list-style-type: none;
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0;
}
.AnalyticsData li {
    display: flex;
    flex-flow: row nowrap;
    flex: 0 1 33%;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    margin: 0;
    border: 1px var(--sfly-border-style-solid) var(--brand-color-border-primary);
    height: 30px;
}

.AnalyticsData li strong {
    display: flex;
    flex: 0 1 33%;
    background-color: var(--brand-color-background-primary);
    color: var(--white);
    align-items: center;
    justify-content: flex-end;
    padding: 0 3px;
}

.AnalyticsData li em {
    display: flex;
    flex: 1 1 67%;
    background-color: var(--white);
    color: var(--text-color);
    align-items: center;
    justify-content: flex-start;
    padding: 0 3px;
    font-weight: var(--font-weight-semibold);
}
.cms-Carousel {
    display: flex;
    flex-flow: column nowrap;
    flex: 0 1 auto;
    width: 100%;
    position: relative;
    align-items: center;
    overflow: hidden;
}

.cms-Carousel:hover ul.nav {
    display: flex;
}

.cms-Carousel.below {
    --pad: 35px;
    padding-bottom: var(--pad);
}

.cms-Carousel ul.nav {
    display: flex;
    flex-flow: row wrap;
    flex: 0 0 auto;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
    position: absolute;
    bottom: 10px;
}

.cms-Carousel .preview-area {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
}

@media (min-width: 768px) {
    .cms-Carousel ul.nav {
        display: none;
    }
}

.cms-Carousel ul.nav li {
    --size: 16px;
    display: flex;
    flex: 0 0 auto;
    background-color: transparent;
    overflow: hidden;
    border: transparent;
    margin: 0 4px;
    color: transparent;
    box-sizing: border-box;
    padding: 0;
    user-select: none;
}

@media (max-width: 768px) {
    .cms-Carousel ul.nav li {
        --size: 7px;
    }
}

.cms-Carousel ul.nav li a {
    color: transparent;
    cursor: pointer;
    display: flex;
    flex: 1 1 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: var(--size);
    height: var(--size);
    user-select: none;
    z-index: 1;
    background: rgba(0, 0, 0, .2);
    border-radius: 50%;
}

.cms-Carousel ul.nav li a:focus {
    outline : 2px var(--color-blue) solid;
    outline-offset: -2px;
}

.cms-Carousel ul.nav li a:hover {
    border: var(--sfly-border-thickness-thin) var(--sfly-border-style-solid) var(--text-color-light);
    color: transparent;
    background-color: rgba(235, 237, 240, .9);
}

.cms-Carousel ul.nav li a.active {
    display: flex;
    flex: 1 1 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: var(--size);
    height: var(--size);
    background-color: var(--ignite);
    border-radius: 50%;
    z-index: 1;
    cursor: default;
}

.cms-Carousel a.next,
.cms-Carousel a.prev {
    display: none;
    position: absolute;
    height: 48px;
    width: 24px;
    top: calc(50% - 24px);
    z-index: 1;
    color: transparent;
    border: 1px var(--sfly-border-style-solid) #c6c7c9;
    background: #fff;
    border-radius: var(--sfly-border-radius-interactive);
    user-select: none;
}

.cms-Carousel a.next:focus,
.cms-Carousel a.prev:focus {
    outline : 0.1429rem var(--color-blue) solid;
    overflow: hidden;
}

.cms-Carousel.below a.next,
.cms-Carousel.below a.prev {
    top: calc(50% - var(--pad))
}

.cms-Carousel:hover a.next,
.cms-Carousel:hover a.prev {
    display: flex;
    cursor: pointer;
}

.cms-Carousel a.next.disabled,
.cms-Carousel a.prev.disabled {
    opacity: var(--brand-state-disabled-opacity);
    cursor: default;
    pointer-events: none;
}

.cms-Carousel a.next::before,
.cms-Carousel a.prev::before {
    content: "";
    height: 5px;
    width: 5px;
    border: var(--sfly-border-style-solid) var(--text-color-fog);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    position: absolute;
}

.cms-Carousel a.next::before {
    transform: translate(1px, 17px) rotate(-45deg)
}

.cms-Carousel a.prev::before {
    transform: translate(7px, 17px) rotate(135deg)
}

.cms-Carousel a.next:hover,
.cms-Carousel a.prev:hover {
    border: var(--sfly-border-thickness-thin) var(--sfly-border-style-solid) var(--text-color-light);
    color: transparent;
    background-color: rgba(235, 237, 240, .9);
}

.cms-Carousel a.next:active,
.cms-Carousel a.prev:active {
    border: 1px var(--sfly-border-style-solid) var(--text-color-fog);
    background-color: rgba(220, 222, 225, .9);
    color: transparent;
}

.cms-Carousel a.next {
    right: 8px;
}

.cms-Carousel a.prev {
    left: 8px;
}

.cms-Carousel .items {
    --idx: 0;
    --item-width: 100%;
    display: flex;
    flex-flow: row nowrap;
    overflow: visible;
    position: relative;
    left: calc(var(--idx) * -1 * var(--item-width));
    transition: left 0.3s ease-in-out;
    width: 100%;
}

.cms-Carousel .items>* {
    display: flex;
    flex: 0 0 auto;
    position: relative;
    width: var(--item-width);
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s linear;
    opacity: 0;
}

.cms-Carousel .items>.active {
    opacity: 1;
}

.cms-Carousel .items .slide-preview {
    visibility: hidden;
}

.cms-Carousel .items .active + .slide-preview {
    visibility: visible;
}
.announcements {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
}
:root {
    --product-pricing-originalPrice: var(--brand-color-text-secondary);
}

.PriceComponent {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

.PriceComponent .PriceTagUnitName, .PriceComponent .PriceTagPrefixName {
    display: inline-block;
    margin: 0 0.4571rem;
    color: var(--text-color);
}

.PriceComponent .PriceComponentPriceTag {
    display: inline-block;
}

.PriceComponent .sale {
    display: none;
}

.PriceComponent.onsale .original{
    margin-right: 0.4571rem;
}

.PriceComponent.onsale .original .originalPrice{
    text-decoration: line-through;
}

.br-cms-layout .product-pricing .PriceComponent .original .originalPrice,
.br-cms-layout .PriceComponent .original .originalPrice,
.br-cms-layout .Nup.hasTextColor .NupElement .PriceComponent span.originalPrice {
    color: var(--product-pricing-originalPrice);
}

.PriceComponent.onsale .sale {
    color: var(--text-color-red);
    display: inline-block;
}




.VideoBlock {
  max-width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.VideoBlock > video,
.youtube-player iframe {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

.VideoBlock > video[poster] {
  object-fit: cover;
}

.VideoBlock > .youtube-player {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
}

.VideoBlock > .youtube-player > div {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.VideoBlock > .youtube-player iframe {
  height: 100%;
}

@supports not (aspect-ratio: 16 / 9) {
  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
}

.br-cms-layout .BackgroundContainer {
  width: 100%;
  height: 100%;
  background-image: var(--default-bg-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: background-image 0.2s ease-in-out;
}

@media (max-width: 1200px) {
  .br-cms-layout .BackgroundContainer {
    background-image: var(--bg-large);
  }
}

@media (max-width: 991px) {
  .br-cms-layout .BackgroundContainer {
    background-image: var(--bg-medium);
  }
}

@media (max-width: 768px) {
  .br-cms-layout .BackgroundContainer {
    background-image: var(--bg-small);
  }
}

@media (max-width: 480px) {
  .br-cms-layout .BackgroundContainer {
    background-image: var(--bg-extra-small);
  }
}






.Loading {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 100%;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    font-weight: var(--brand-fontweight-callout);
    letter-spacing: 0;
    line-height: 17px;
    z-index: 0;
}

.Loading p {
    animation: fadeIn 0.6s ease-in-out 0s 1;
}

.Loading .indicator {
    display: flex;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: auto;
    position: relative;
    box-sizing: border-box;
    background: #fff;
    background-clip: padding-box;
    border: var(--sfly-border-style-solid) 5px transparent;
    border-radius: 50%;
}

.Loading .indicator:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -3px;
    border-radius: inherit;
    background: linear-gradient(to right, #fff, #f05323);
    animation: rotate 0.5s linear 0s infinite, fadeIn 0.5s ease-in-out 0s 1;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.APCContainer {
    display: flex;
    flex: 1 1 auto;
    flex-flow: column nowrap;
    overflow: hidden;
    max-width: 100%;
    min-height: 450px;
}

.APCContainer.preview {
    border: 1px dashed var(--brand-color-border-primary);
    background-color: rgba(120,120,120, 0.3);
    padding: 10px;
    justify-content: center;
    align-items: center;
    color: #000;
}

.APCContainer.preview > div {
    font-size: 2em;
}

.APCContainer.preview.error {
    background-color: var(--sfly-color-semantic-red-icon);
}

.APCContainer.preview.error .APCContainerError {
    font-size: 1rem;
}
.SimpleCarousel {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.br-cms-layout .SliderContainer .slides {
    --index: 0;
    --slide-width: 100%;
    display: flex;
    flex-flow: row nowrap;
    overflow: visible;
    position: relative;
    width: 100%;
}

.br-cms-layout .slides>* {
    display: block;
    width: var(--slide-width);
    transition: opacity 0.5s linear, transform var(--slide-transition-duration) ease-in-out;
    opacity: 0;
}

.br-cms-layout .SliderContainer .slides .active {
    position: relative;
    opacity: 1;
}

.br-cms-layout .SliderContainer .slides .notActive {
    position: absolute;
    top: 0;
    bottom: 0;
}


.br-cms-layout .SliderContainer .bottomNav {
    position: absolute;
    bottom: 0.8571rem;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.7143rem;
    z-index: 4;
}

.br-cms-layout .SliderContainer .Dot {
    width: 0.8571rem;
    height: 0.8571rem;
    background-color: var(--white);
    border: 0.0714rem var(--sfly-border-style-solid) var(--nav-dots-color);
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
}

.br-cms-layout .SliderContainer .Dot.Active {
    background-color: var(--nav-dots-color);
}

.br-cms-layout .SliderContainer .Dot+.Dot {
    margin-left: 1.4286rem;
}
.Tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 99999;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.Modal {
    display: flex;
    position: relative;
    outline: var(--brand-state-focus-outline);
}
.abtest-utility {
    position: fixed;
    z-index: 1000000;
    background: var(--black);
    font-weight: var(--brand-fontweight-callout);
    font-size: 1rem;
    bottom: 1.429rem;
    padding: 0.5714rem ;
    transform: translateX(-100%);
    left: 1.429rem;
    color: black;
    margin: 0.286rem;
    transition: all 150ms ease-out;
}

.abtest-utility div:first-child{
    display: flex;
}

.abtest-utility.utility-active {
    transition: 150ms ease-in;
    transform: translateX(0);
    animation-iteration-count: 1
}

.abtest-utility button,
.abtest-utility select,
.abtest-utility label,
.abtest-utility input{
    padding: 0.5714rem ;
    margin: 0.286rem ;
    font-weight: var(--brand-fontweight-interactive);
    font-size: 1rem;
}


.showaboutlines [data-abtestid^="activity"]:before,
.showaboutlines [data-abtestid^="Fix"]:before {
    content: attr(data-abtestid);
    color: var(--textColor);
    background: var(--textBackground);
    display: inline-block;
    position: absolute;
    top: -2.071rem;
    left: 6.9vw;
    padding: 0.214rem 1.429rem;
    border: 0.071rem var(--sfly-border-style-solid) #4b4b4b;
    border-bottom: 0;
}

[data-abtestid][forcehide="true"]{
    display: none!important;
}

.showaboutlines [data-abtestid^="activity"],
.showaboutlines [data-abtestid^="Fix"]
{
    position: relative;
    margin-top: 2.143rem;
    border: 0.357rem var(--sfly-border-style-solid) var(--textBackground);
}

[data-abtestid*="activity-1-"]{
    --textColor: black;
    --textBackground: #1cdc1c;
}

[data-abtestid*="activity-2-"] {
    --textColor: white;
    --textBackground: #ff8200;
}

[data-abtestid*="activity-3-"] {
    --textColor: black;
    --textBackground: #ffff21;
}

[data-abtestid*="activity-4-"] {
    --textColor: black;
    --textBackground: #08e8e6;
}

[data-abtestid*="activity-5-"] {
    --textColor: var(--black);
    --textBackground: #ffdddd;
}

[data-abtestid*="activity-6-"] {
    --textColor: white;
    --textBackground: #ff8200;
}
[data-abtestid^="Fix Me"]{
    --textColor: rgb(232, 232, 232);
    --textBackground: red;
}

.abtest-utility .alterEgoMenu .element.checked::before{
    content: "\2713";
    position: absolute;
    left: 1rem;
}

.abtest-utility .alterEgoMenu .element{
    color: var(--white);  
    padding: 0.143rem 0.429rem 0.143rem 2.143rem;
}
  
.abtest-utility .alterEgoMenu .element[data-abtestid]{
    color: var(--textBackground);  
}

.abtest-utility .alterEgoMenu .element:hover {
    background: rgba(50,110,200,0.6);
    border-radius: 5%;
}


.abtest-utility .alterEgoMenu {
    position: absolute;
    bottom: 100%;
    padding: 0.85rem;
    background: rgb(8 6 6 / 75%);
    backdrop-filter: blur(1.786rem) saturate(180%);
    right: 0;
    overflow-y: auto;
    max-height: 21.429rem;
    border-radius: 2%;
}

.abtest-utility .alterEgoMenuHidden{
    display : none;
}

.abtest-utility .element:hover {
    background: rgba(50,110,200,0.15);
}

.abtest-utility .utility-arrow{
    color:#ffff21;
    font-size:  xx-large;
    transition: all 300ms ease-in;

}

.abtest-utility.utility-hidden .utility-arrow{
    
    transform: rotate(180deg);
}

.ErrorDetails {
    display: flex;
    flex: 1 1 100%;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.ErrorDetails a {
    display: flex;
    text-decoration: none;
    color: #d74012;
}

.ErrorDetails a:hover {
    text-decoration: underline;
    color: #d74012;
}
.Page {
    position: relative;
}

.page-loading{
    position: fixed;
    top:50vh;
    left:50vw;
}
.dropdown-option {
  font-weight: var(--font-weight-light);
  font-size: 1rem;
	margin: 0.5rem;
	display: flex;
	align-items: center;
  padding: 0.8rem;
	color: var(--text-color);
	cursor: pointer;
	transition: background .1s ease-out;
	transform-origin: top center;
  animation: rotateX 700ms 0.6ms ease-in-out;
  min-width: 3.9286rem;
}

.dropdown-option:hover {
  background: var(--light-fog-gray);
  text-decoration: underline;
}

.dropdown-title {
	margin-left: 1.2857rem;
}

@media screen and (max-width: 768px){
  li.sticky span.Icon {
    border: 0.0714rem var(--sfly-border-style-solid) #9797975c;
    border-radius: 0.7857rem;
    padding: 0.7143rem;
  }

  .dropdown-title.sticky {
    font-size: 0.7429rem;
    line-height: 1.1429rem;
    margin-top: 0.3714rem;
    margin-left: 0;
  }  

  .dropdown-option.sticky {
    flex-direction: column;
  }
}

@keyframes rotateX {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}
.dropdown-container {
  box-sizing: border-box;
  width: 100%;
  border: var(--form-border-thickness) var(--form-border-style) var(--light-grey-2);
  border-radius: var(--form-border-radius);
  background-color: var(--white);
  box-shadow: 0 0 0.6429rem rgb(0 0 0 / 10%);
  position: relative;
}

.dropdown-options-container, .dropdown-container {
  padding: 0;
}

.dropdown-options-container {
  margin: 0.8571rem 0;
}

.dropdown-modal-title {
  display: none;
}

.dropdown-container::before, .dropdown-container::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.5714rem var(--sfly-border-style-solid) transparent;
  border-right: 0.5714rem var(--sfly-border-style-solid) transparent;
  border-bottom: 0.7143rem var(--sfly-border-style-solid) var(--light-grey-2);
  transform: translateX(-50%);
  left: 50%;
}

.dropdown-container::before {
  top: -0.7143rem;
  border-width: 0.7857rem;
}

.dropdown-container::after {
  top: -0.6429rem;
  border-color: white transparent;
  border-width: 0.7143rem;
}

@media screen and (max-width: 768px){
  .dropdown-container.sticky {
    border-radius: 0.8571rem;
  }
  
  .dropdown-options-container.sticky {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0;
  }

  .dropdown-container.sticky::before, .dropdown-container.sticky::after{
    content: none;
  }

  .cms-heading.dropdown-modal-title {
    display: block;
    margin-top: 1.2857rem;
  }
}