html {
  interpolate-size:allow-keywords;
}

html, body {
  height:100%;
}

body {
  display: flex;
  flex-direction: column;

  > div.container-fluid {
    max-height:100vh;
    overflow:auto;
  }
}

/* Size the overall configurator container */
#configuratorContainer {
  position: relative;
  /*left: 0;*/
  /*top: 0;*/
  /*width: 850px;*/
  /*height: 400px;*/
  width: 100%;
  /*overflow: hidden;*/
}

/* begin canvas detect stuff */

/* using modernizr to detect canvas capability of browser. Hides config when canvas not suported and shows DIV with message about upgrading - kpr */

.canvas #configuratorContainerHidden {
  display: none;
}

.no-canvas #configuratorContainer {
  display: none;
}

.no-canvas #configuratorContainerHidden {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.no-canvas #llumar-embed #configuratorContainerHidden {
  top: -50px;
}

.no-canvas #configuratorContainerHidden h2 {
  font-size: 20px;
  margin: 30px 20px 20px;
}

.no-canvas #configuratorContainerHidden p {
  font-size: 16px;
  margin: 20px;
}

.no-canvas #configuratorContainerHidden a {
  font-size: 16px;
  text-decoration: underline;
}
/* end canvas detect stuff */

#configuratorScaler {
  position: relative;
  /*position: absolute;
    left: 0;
    top: 0;*/
  /* width of color container [60px]   */
  /*right: 60px;*/
  /*bottom: 0;*/
  /* Needs to be hidden still for E3 UI - kr */
  /*overflow: hidden;*/
}

#configurator {
  /* true dimensions of configurator assets - gets scaled in config.js */
  /*width: 850px;*/
  /*height: 400px;*/
  width: 100%;
  height: auto;
  position: relative;
  overflow: visible;
}

  /* Configurator internals */
  #configurator div {
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    /*width: 850px;*/ /* testing pixel based dimensions to fix blurry svg in Chrome per http://stackoverflow.com/a/14171613 - kr  */ /* this can stay regardless but then #configurator MUST have a transform: scale() defined even if it's (1,1) */
    /*height: 400px;*/ /* testing pixel based dimensions to fix blurry svg in Chrome - kr  */
    /*width:100%;*/
    /*height:auto;*/
    /* Cannot hide overflow here becuase some content is bigger than 850x400 but is transformed */
    /*overflow: hidden;*/
  }

  #configurator svg {
    overflow: visible;
    margin-bottom: 6px; /* after changing from images stacking using position:absolute to CSS grid, this was needed to fix layer misalignment - abc */
  }

  #configurator .configuratorView {
    pointer-events: none; /* to make the accessory overlays "pass through" so items that should be clickable can be clicked without messing with z-index layering - abc */
  }

/* Vehicle images are full-size */
.configuratorLayer img {
  /*width: 850px;*/
  /*height: 400px;*/
  width: 100%;
  height: auto;
  margin-bottom: 6px; /* after changing from images stacking using position:absolute to CSS grid, this was needed to fix layer misalignment - abc */
}
/* trying to comabat IE/FF bug with Pixastic by putting actual vehicle image w/h here - kr */

/* Views and view-sets are initially hidden... */
.configuratorViewSet,
.configuratorView {
  display: none;
}
  /* ... Unless visible */
.configuratorViewSet.visible,
.configuratorView.visible {
    display: grid;
    place-items: end;
    margin:0 auto;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    > div {
      grid-area: 1 / 1;
    }

    svg, canvas {
      width: 100%;
      height: auto;
    }

    div[name]:has(div[class*='Position']) {
      display: grid;
      align-items: end;
    }

    div[name] > div[class*='Position'] {
      grid-area: 1 / 1;
    }

    .configuratorLayer {
      width: 100%;
    }
}

/* to remove the overlay appearing on FF when swiped! - kr */
.configuratorView.visible:hover, .configuratorView.visible:active,
.configuratorView.visible:focus {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.configuratorHotspotPosition, #configurator {
  /* Keep transforms relative to the top-left */
  transform-origin: top left;
}

.canvas-offset {
  position: absolute !important;
  left: -4000px !important;
}

.asset-part-g {
  display: block;
}

/* Colors-internals */
#configuratorColors {
  /*position: absolute;*/
  /*left: 0;*/
  /*bottom: 0;*/
  /*width: 100%;*/
  /*margin-bottom: 10px;*/ /* =#configuratorRotatorContainer.height on E3 */
  /*overflow: hidden;*/
}

.configuratorColor {
  background-clip: content-box;
  background-position: center center;
  border: 3px solid transparent;
  cursor: pointer;
  /*float: left;*/
  height: 20px;
  /*margin: 2px;*/
  width: 20px;
  border-radius: 5px;
  border:2px solid rgba(30, 30, 30, 0.25);
}

  .configuratorColor.selected {
    border-color: #666;
  }

  /* hiding the color name next to color chicklet by default for E3 - kr */
  .configuratorColor span {
    display: none;
  }

/* Rotator-internals */
#configuratorRotator {
  /*position: absolute;*/
  /*overflow: hidden;*/
  /*height: 100%;*/
  /*inset: 0;*/
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/
}


/* SM and above */
@media (min-width: 576px) {
}



/* MD and above */
@media (min-width: 768px) {
  #configuratorRotatorContainer {
    /*display: none;*/ /* Initial */
    /*position: absolute;*/
    /*inset: 0;*/
    /* min-height: 100%; */
    /*overflow: hidden;*/
    /* anything but auto z-index will overlay the nav causing it to not work - kr */
    /*z-index: auto;*/
    /*z-index: 99;*/
    /*width: 100%;*/
    /*left: 0;*/
    /* top: 0; */
    /*bottom: 0;*/
    /*right: 60px;*/ /* =#configuratorColorsContainer.width */
    /*height: 90px;*/
  }


  #configuratorRotator svg.rot {
    cursor: pointer;
    /*position: absolute;*/
    /* top: 30%; */
    /*top: 50%;*/
    /*bottom: 0;*/
    /*width: 50px;*/
  }
}

/* Medium - md */
@media (min-width: 768px) {
    /*#configuratorRotator svg.prev {left: -85px;}*/
    /*#configuratorRotator svg.next {right: -85px;}*/
}

/* Large - lg */
@media (min-width: 992px) {
    /*#configuratorRotator svg.prev {left: -100px;}*/
    /*#configuratorRotator svg.next {right: -100px;}*/
}

/* Extra Extra Large - xxl */
@media (min-width: 1400px) {
    /*#configuratorRotator svg.prev {left: -110px;}*/
    /*#configuratorRotator svg.next {right: -110px;}*/
}

#configuratorColorsContainer {
  /*position: absolute;*/
  /*right: 10px;*/
  /*bottom: 10px;*/
  /*height:40px;*/
  /*height: 100%;*/
  /*width: 60px;*/ /* Room for two .configuratorColor's */
  /*overflow: hidden;*/
  display: flex;
  justify-content: center;

  &[data-chicklets='false' i] {
    bottom:0;
  }

  #configuratorColors {
    /*display: grid;*/
    /*gap:2px;*/
    display: flex;
    max-width: 174px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap:2px;
  }
}

/* LG and above */
@media (min-width: 992px) {
  #configuratorColorsContainer {
    #configuratorColors {
      /*display: grid;
      gap: 2px 2px;
      grid-template-rows: repeat(8, auto);
      grid-template-columns: repeat(8, auto);
      align-items:center;
      height:100%;
      */
    }
  }
}

/* This is important to make position:sticky work with the vehicle on the left */
body[data-layout="detached"],
body[data-layout="detached"] .wrapper > .content-page {
  overflow: visible !important;
}


.configuratorChicklet {
  background-clip: content-box;
  background-position: center center;
  border: 1px solid transparent;
  cursor: pointer;
  float: left;
  height: 20px;
  margin: 2px;
  width: 20px;
  border-radius: 0px;
}

  .configuratorChicklet.selected {
    border-color: #666;
  }

.cartButton {
  font-size: 20px;
  font-weight: normal;
  color: #b31f24;
  cursor: pointer;
}

/* scaling the placeholders. Placeholder images have been created at the w/h of the configurator in E3 [563x265] but should be created at 850x400 to scale like the configurators do - kr */
img.placeholder {
  max-height: 100%;
  max-width: 100%;
  width: auto !important;
  height: 100%;
}

/* NO dots on E3 */
/*#configurator div.configuratorDot {
display:none;
}*/

#configurator div.configuratorDot {
  background-color: #b31f24 !important;
  border: 1px solid #fff !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 10px;
  cursor: pointer;
}

  /* for double-border on dot - kr */

  #configurator div.configuratorDot:before {
    content: " ";
    position: absolute;
    z-index: -1;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid #fff;
    border-radius: 10px;
    width: 10px;
    height: 10px;
  }


/* Select2 auto width sizer */
#configuratorColorsContainer {
  .select2-container {
    width:auto!important;
    /*left:auto!important;*/
    /*right:0!important;*/
    left:0!important;
    right:auto!important;
    max-width: 50vw;

    .select2-dropdown {
      width:auto!important;
      min-width:100%!important;
      white-space:nowrap;
    }
  }

  .select2-selection__rendered .js-option-text {
    display:none;
  }

  /* MD and above */
  @media (min-width:768px) {
    .select2-selection__rendered .js-option-text {
      display:inline;
    }
  }
}


#lstCategories {
  background:rgba(255, 255, 255, 0.50);

  .nav-item {
    .nav-link {
      display:block;
      width:100%;
    }
  }
}

#categoriesContainerInner {
  #lstCategories {
    display: flex !important;
    flex-direction: row !important;
    background:transparent;
    /*justify-content: space-between;*/
    /*border-bottom:2px solid rgba(0, 0, 0, 0.25)!important;*/

    .nav-item.show-more {
      /*border-bottom:2px solid var(--bs-body-bg);*/
      border-bottom:2px solid rgba(0, 0, 0, 0.25);
    }

    .nav-item {
      flex: 1;
      margin-bottom:-2px;
      /*min-width:0;*/

      &.search,
      &.show-more {
        min-width:auto;
      }

      .nav-link {
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        width:100%;
        border-bottom:2px solid rgba(0, 0, 0, 0.25);
        border-radius:0;

        &.active {
          background:transparent;
          border-bottom:2px solid var(--bs-primary);
          border-radius:0;
        }
      }

      #categoriesOverflow {
        .nav-item:last-of-type {
          .nav-link {
            border:0;
          }
        }
      }
    }
  }
}


.dropdown.no-caret {
  .dropdown-toggle {
    &:after {
      display:none;
    }
  }
}

#btnStartOver {
  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0 !important;
  }
}

#divBuilderWrapper {
  display: flex;

  #divConfiguratorSideLeft,
  #divConfiguratorSideRight {
    transition:width linear 300ms;
  }

  #divConfiguratorSideLeft {
      background:rgba(245, 245, 245, 0.90);
      backdrop-filter:blur(5px);

      #configurator {
        width:85%;
        padding-top:3rem;
      }
  }
}

/* Styles for screens in portrait orientation */
@media screen and (orientation: portrait) {
  #divBuilderWrapper {
    flex-direction: column;

    #divAccessoriesSection {
      margin-top:1.5rem;
    }

    #categoriesContainerDesktop {
      #categoriesContainerInner {
        #lstCategories {
          margin-top:1rem;
          margin-bottom:1rem;
        }
      }
    }

    #divConfiguratorSideLeft,
    #divConfiguratorSideRight {
      width:100%;
    }

    #divConfiguratorSideLeft {
      position: sticky;
      top: 0;
      z-index:1;

      #configuratorContainer {
        #configuratorColorsContainer {
          margin-bottom:1.5rem;
        }
      }
    }

    &[data-show-vehicle=false] {
      #divConfiguratorSideLeft {
/*            pointer-events:none;*/
      }
    }

    &[data-show-vehicle=true] {
      #configurator {
        transition:width 300ms linear;
      }

      &.scrolled {
        #configuratorContainer {
          position:relative;
          padding-top:0;
          transition:padding-top 300ms linear;

          #configurator {
            width:50%;
          }

          #configuratorRotatorContainer {
            #configuratorRotator {
              svg.prev,
              svg.next {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
              }

              svg.prev {
                left: 50px;
              }
              svg.next {
                right: 50px;
              }
            }
          }
        }
      }
    }
  }
}


/* Styles for screens in landscape orientation */
@media screen and (orientation: landscape) {
  #divBuilderWrapper {
    flex-direction: row;

    #categoriesContainerDesktop {
      position:sticky;
      top:0;
      z-index:9;

      #categoriesContainerInner {
        background: rgba(245, 245, 245, 0.90);
        backdrop-filter: blur(5px);

        #lstCategories {
          margin-bottom:1.5rem;
        }
      }
    }

    &[data-show-vehicle=true] {
      #divConfiguratorSideLeft,
      #divConfiguratorSideRight {
        width: 50%;
      }

      #divConfiguratorSideLeft {
        /*margin-bottom:2rem;*/
        position:relative;
        z-index:999; /* to prevent the Select2 dropdown from going behind the category tabs on smaller devices */
      }
    }

    #divConfiguratorSideLeft > div {
        position:sticky;
        top:0;
    }

    #divConfiguratorSideLeft {
      #divConfigurator {
        display:flex;
        align-items:center;
        justify-content:center;
        height:100%;
      }
    }
  }
}


/* Fix for vertically centering the vehicle on the left and scrolling the accessories on the right for Landscape mode */
@media screen and (orientation: landscape) {
  body {
    display: flex;
    flex-direction: column;
  }

  body > div.container-fluid,
  body > div.container-fluid #divBuilderWrapper {
    min-height: 0;
  }

  body > div.container-fluid {
    height:100%;

    .content-page {
      min-height: 0!important;
    }

    #divBuilder {
      height:100%;
      display: flex;
      flex-direction: column;

      #divBuilderWrapper {
        height:100%;

        #divConfiguratorSideRight {
          overflow: auto;
          height: 100%;
        }
      }
    }
  }

  footer {
    z-index: 999;
    background: rgba(245, 245, 245, 0.90);
    backdrop-filter: blur(5px);
  }
}

header {
    position:sticky;
    top:0;
    z-index:999;
}

.d-none-important {
    display:none!important;
}



/* Animation: Open/Close Vehicle */
@media screen and (orientation: portrait) {
	#divBuilderWrapper {
    #divConfiguratorSideLeft {
        #divConfigurator {
            height:auto;
            opacity:1;
        }
    }

		&[data-show-vehicle=true] {
			#divConfiguratorSideLeft {
				#divConfigurator {
					transition:
						height 300ms linear,
						opacity 300ms 500ms linear;
				}
			}
		}

		&[data-show-vehicle=false] {
			#divConfiguratorSideLeft {
				#divConfigurator {
					transition:
						height 300ms 500ms linear,
						opacity 300ms linear;
					height: 0;
					opacity: 0;
				}
			}
		}
	}
}

@media screen and (orientation: landscape) {
  #divBuilderWrapper {
    &[data-show-vehicle=true] {
      #divConfiguratorSideLeft,
      #divConfiguratorSideRight {
        width: 50%;
        transition:
			    opacity 300ms 500ms linear,
			    width 300ms linear;
      }
    }

    &[data-show-vehicle=false] {
      #divConfiguratorSideLeft,
      #divConfiguratorSideRight {
        transition:
			    opacity 300ms linear,
			    width 300ms 500ms linear;
      }

      #divConfiguratorSideLeft {
        width: 0;
        opacity:0;
      }
      #divConfiguratorSideRight {
        width: 100%;
      }
    }
  }
}