.wrapper {
    position: absolute;
    bottom: 40px;
    opacity: 1;
    left: 0;
    width: 100%;
    height: 64px;
    overflow: visible;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: transparent;
    
    /* transition: all 0.2s linear; */
}

#infinityrt-canvas {
    /* transition: all 0.2s linear; */
}

.wrapper.hide {
    opacity: 0;
    pointer-events: none;
}

.nav-container{
    
    width: calc(100% - (135px + 91px));
    height: var(--exteriorInteriorBtnHeight);
    /* height: auto; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--navContainerMarginLeft);
    transform: scale(var(--navContainerScale));
    transform-origin: center bottom;
}
.nav-container nav{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* min-width: 1032px; */
    /* border: 1px solid var(--greybababa); */
    /* border-radius: 5px; */
    /* background-color: coral; */
}
.nav-container nav .exterior-interior-color-zoom-container{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-width: 1032px; */
    border: 1px solid var(--greybababa); 
    border-left: 0;
    border-right: 0;
    border-radius: 9px;
    background-color: var(--whiteffffff);
    position: relative;
}

.interior-selected .nav-container nav .exterior-interior-color-zoom-container, .interior-selected .nav-container nav .btn{
    background-color: rgba(255, 255, 255, 0.90);
}

.interior-selected .nav-container nav .exterior-interior-color-zoom-container .exterior{
    background-color: unset;
}

.nav-container nav .exterior-interior-color-zoom-container .interior {
    background-color: unset;
}

.interior-selected .nav-container nav .exterior-interior-color-zoom-container .exterior:hover {
    background-color: var(--black000000);
    border-color: var(--black000000);
    color: var(--whiteffffff);
}

.nav-container nav .btn{
    width: var(--exteriorInteriorBtnHeight);
    height: var(--exteriorInteriorBtnHeight);
    border: 1px solid var(--greybababa);
    border-radius: 9px;
    background-color: var(--whiteffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--black000000);
    transition: all 0.15s ease-in-out;
}
.nav-container nav .btn:hover, .nav-container nav .btn.active{
    background-color: var(--black000000);
    border-color: var(--black000000);
    color: var(--whiteffffff);
}
.nav-container nav .exterior-interior-color-zoom-container .exterior,
.nav-container nav .exterior-interior-color-zoom-container .interior{
    min-width: var(--exteriorInteriorBtnWidth);
    /* padding-top: 8px;
    padding-bottom: 8px; */
    /* max-height: var(--exteriorInteriorBtnHeight); */
    height: var(--exteriorInteriorBtnHeight);
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.nav-container nav .exterior-interior-color-zoom-container .zoom-slider-container{
    min-width: var(--zoomSliderContainerWidth);
    height: var(--exteriorInteriorBtnHeight);
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding-top: var(--zoomSliderContainerPaddingTop);
    position: relative;
}
.nav-container nav .exterior-interior-color-zoom-container .color{
    width: var(--exteriorInteriorBtnHeight);
    height: var(--exteriorInteriorBtnHeight);
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.nav-container nav .exterior-interior-color-zoom-container .color.disabled{
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}
.nav-container nav .exterior-interior-color-zoom-container .color .color-swatch-arrow{
    position: absolute;
    top: 1px;
    left: 1px;
    
}

.nav-container nav .exterior-interior-color-zoom-container .color-swatch-container{
    width: var(--exteriorInteriorBtnHeight);
    height: 0px;
    opacity: 0;
    z-index: 0;
    bottom: 0px;
    position: absolute;
    background-color: rgba(186, 186, 186, 0.5);
    border-radius: 9px;
    left: var(--colorSwatchContainerLeft);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    transition: all 0.3s ease-in-out;
    row-gap: var(--colorSwatchContainerRowGap);
    padding-bottom: 10px;
}
.nav-container nav .exterior-interior-color-zoom-container .color-swatch-container.active{
    height: var(--colorSwatchContainerHeight);
    opacity: 1;
    z-index: 1;
    bottom: var(--colorSwatchContainerBottom);
}
.nav-container nav .exterior-interior-color-zoom-container .color-swatch{
    width: var(--colorSwatchWidthHeight);
    height: var(--colorSwatchWidthHeight);
    /* border: 5px solid #000000; */
    border-radius: 50%;
    cursor: pointer;
}
.nav-container nav .exterior-interior-color-zoom-container .color-swatch.active{
    outline: 2px solid var(--whiteffffff);
    outline-offset: 4px;
}
.nav-container nav .exterior-interior-color-zoom-container .color-swatch.c1{
    background: #ede5da;
    background: linear-gradient(180deg,rgba(220, 220, 222, 1) 0%, rgba(160, 160, 160, 1) 100%);
}   
.nav-container nav .exterior-interior-color-zoom-container .color-swatch.c2{
    background: #C5C1BD;
    background: linear-gradient(180deg,rgba(197, 193, 189, 1) 0%, rgba(89, 87, 85, 1) 100%);
}   
.nav-container nav .exterior-interior-color-zoom-container .color-swatch.c3{
    background: #6C6C6B;
    background: linear-gradient(180deg,rgba(108, 108, 107, 1) 0%, rgba(35, 35, 35, 1) 100%);
}   
.nav-container nav .exterior-interior-color-zoom-container .color-swatch.c4{
    background: #5B5B5F;
    background: linear-gradient(180deg,rgba(91, 91, 95, 1) 0%, rgba(13, 14, 15, 1) 100%);
}   
.nav-container nav .exterior-interior-color-zoom-container .color-swatch.c5{
    background: #545e13;
    background: linear-gradient(180deg,rgba(84, 94, 19, 1) 0%, rgba(23, 26, 9, 1) 100%);
}   
.nav-container nav .reset,
.nav-container nav .info{
    /* margin-left: var(--resetInfoBtnGap); */

}
.nav-container nav .reset{
    margin-left: var(--resetInfoBtnGap);

}
.nav-container nav .infoBtnPopupContainer{
    margin-left: var(--resetInfoBtnGap);
    position: relative;

}

.zoom-out, .zoom-in{
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    margin-top: -7px;
}
.zoom-out:focus, .zoom-in:focus{
    outline: none;
}

.line-slider-container{
    max-width: 321px;
    /* background: red; */
    overflow-y: hidden;
    width: 80%;
    /* display: flex; */
    height: 100%;
    /* align-items: center; */
    position: relative;
    padding-top: var(--lineSliderContainerPaddingTop);
}

.zoom-level-lines{
    position: absolute;
    z-index: 1;
    width: 99.5%;
    height: 9px;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    flex-direction: row;
    bottom: var(--zoomLevelLinesBottom);
    flex-wrap: wrap;
    overflow: hidden;
    row-gap: 10px;
    background: url('../images/slider-zoom-lines.png') no-repeat center bottom;
    /* background: url('../images/slider-zoom-lines-321x9.png') no-repeat center bottom; */
    /* background-color: tomato; */
}

.zoom-level-lines .line{
    width: 1px;
    min-height: 3px;
    background-color: var(--black000000);
    display: inline-block;
    margin: 0 2px;
}

.zoom-slider{
    width: 100%;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    background: #F3F3F5;
    background: linear-gradient(180deg,rgba(243, 243, 245, 1) 0%, rgba(245, 245, 247, 1) 100%);
    box-shadow: -1px -1px rgba(0,0,0,0.3);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    position: relative;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.zoom-slider::-webkit-slider-track {
    width: 100%;
    height: 12px;
    background: #F3F3F5;
    background: linear-gradient(180deg,rgba(243, 243, 245, 1) 0%, rgba(245, 245, 247, 1) 100%);
    box-shadow: 0 -2px rgba(0,0,0,0.3);
    border: none;

}

.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 27px;
    height: 27px;
    background: url('../images/slider-thumb-27x27.png') no-repeat center;
    background-size: contain;
    box-shadow: none;
    cursor: pointer;
    border: none;
    margin-top: 0;
    transform: scale(var(--sliderThumbScale));
}

/* Firefox */
.zoom-slider::-moz-range-track {
    width: 100%;
    height: 12px;
    background: #F3F3F5;
    background: linear-gradient(180deg,rgba(243, 243, 245, 1) 0%, rgba(245, 245, 247, 1) 100%);
    border: none;
}

.zoom-slider::-moz-range-thumb {
    width: 27px;
    height: 27px;
    background: url('../images/slider-thumb-27x27.png') no-repeat center;
    background-size: contain;
    cursor: pointer;
    border: none;
}

/* IE/Edge */
.zoom-slider::-ms-track {
    width: 100%;
    height: 12px;
    background: #F3F3F5;
    background: linear-gradient(180deg,rgba(243, 243, 245, 1) 0%, rgba(245, 245, 247, 1) 100%);
    border-color: transparent;
    color: transparent;
}

.zoom-slider::-ms-fill-lower {
    background: #F3F3F5;
    background: linear-gradient(180deg,rgba(243, 243, 245, 1) 0%, rgba(245, 245, 247, 1) 100%);
}

.zoom-slider::-ms-fill-upper {
    background: #F3F3F5;
    background: linear-gradient(180deg,rgba(243, 243, 245, 1) 0%, rgba(245, 245, 247, 1) 100%);
}

.zoom-slider::-ms-thumb {
    width: 27px;
    height: 27px;
    background: url('../images/slider-thumb-27x27.png') no-repeat center;
    background-size: contain;
    cursor: pointer;
    border: none;
}




.qr-container{
    width: calc(135px + 91px);
    height: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-container .qr-box{
    width: 133px;
    height: 133px;
    border: 1px solid var(--greybababa);
    border-radius: 10px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(var(--qrContainerScale));
    transform-origin: right bottom;
}

/*mobile*/

.mobile .wrapper{bottom: 0;height: 80px; transition: all 0.2s linear;}
.mobile .wrapper.interior-selected{bottom: -40px;}
.mobile .nav-container{width: 100%; height: 80px; margin-left: auto;}
.mobile .qr-container{display: none;}
.mobile .nav-container nav{width: 100%;}
.mobile .nav-container nav .btn{
    border-radius: 0; 
    height: 40px; 
    /* width: 50%; */
    flex-grow: 1;
    border: none;
    border-left: 1px solid #000;
    /* border-top: 1px solid #676767; */
}
.mobile .nav-container nav .reset, .mobile .nav-container nav .info{display: none;}
.mobile .nav-container nav .exterior-interior-color-zoom-container{
    border-radius: 0;
    flex-wrap: wrap;
    width: 100%;
    border: none;
    border-top: 1px solid #676767;
    
    /* border-top: 1px solid #676767;
    border-bottom: 1px solid #444444; */
    /* border-left: none;
    border-right: none; */
}
.mobile .nav-container nav .exterior-interior-color-zoom-container .zoom-slider-container{display: none;}
.mobile .nav-container nav .exterior-interior-color-zoom-container .color{display: none;}
.mobile .nav-container nav .exterior-interior-color-zoom-container .color-swatch-container{
    width: 100%;
    height: 40px;
    background-color: #000000;
    opacity: 1;
    z-index: 1;
    flex-direction: row;
    justify-content:flex-start;
    border-radius: 0;
    order: 3;
    position: static;
    /* border-top: 1px solid #444444; */
    padding-left: 10px;
    padding-bottom: 0;
    column-gap: 15px;
    row-gap: 0;
}

.mobile .exterior .exterior-icon{
    transform: scale(0.54);
}
.mobile .interior .interior-icon{
    transform: scale(0.54);
}

.mobile .nav-container nav .exterior-interior-color-zoom-container .color-swatch{
    width: 20px;
    height: 20px;
}

.mobile .nav-container nav .exterior-interior-color-zoom-container .color-swatch.active{
    outline: 1px solid var(--whiteffffff);
    outline-offset: 3px;
}
.arBtn {
    font-weight: 600;
}

.mobile .nav-container nav .infoBtnPopupContainer{
    display: none;

}

.mobile.landscape .wrapper{
    display: none;
}

.mobile .nav-container nav .exterior-interior-color-zoom-container .color-swatch-container.disabled{
    cursor: default;
    opacity: 0;
    pointer-events: none;
}


/*ipad*/
.ipad .wrapper {
    bottom: 0;
    height: 80px;
    transition: all 0.2s linear;
}

.ipad .wrapper.interior-selected {
    bottom: -40px;
}

.ipad .nav-container {
    width: 100%;
    height: 80px;
    margin-left: auto;
    transform: scale(1);
}

.ipad .qr-container {
    display: none;
}

.ipad .nav-container nav {
    width: 100%;
}

.ipad .nav-container nav .btn {
    border-radius: 0;
    height: 40px;
    /* width: 50%; */
    flex-grow: 1;
    border: none;
    border-left: 1px solid #000;
    /* border-top: 1px solid #676767; */
}

.ipad .nav-container nav .reset,
.ipad .nav-container nav .info {
    display: none;
}

.ipad .nav-container nav .exterior-interior-color-zoom-container {
    border-radius: 0;
    flex-wrap: wrap;
    width: 100%;
    border: none;
    border-top: 1px solid #676767;
    /* border-top: 1px solid #676767;
    border-bottom: 1px solid #444444; */
    /* border-left: none;
    border-right: none; */
}

.ipad .nav-container nav .exterior-interior-color-zoom-container .zoom-slider-container {
    display: none;
}

.ipad .nav-container nav .exterior-interior-color-zoom-container .color {
    display: none;
}

.ipad .nav-container nav .exterior-interior-color-zoom-container .color-swatch-container {
    width: 100%;
    height: 40px;
    background-color: #000000;
    opacity: 1;
    z-index: 1;
    flex-direction: row;
    justify-content: flex-start;
    border-radius: 0;
    order: 3;
    position: static;
    /* border-top: 1px solid #444444; */
    padding-left: 10px;
    padding-bottom: 0;
    column-gap: 15px;
    row-gap: 0;
}

.ipad .exterior .exterior-icon {
    transform: scale(0.54);
}

.ipad .interior .interior-icon {
    transform: scale(0.54);
}

.ipad .nav-container nav .exterior-interior-color-zoom-container .color-swatch {
    width: 20px;
    height: 20px;
}

.ipad .nav-container nav .exterior-interior-color-zoom-container .color-swatch.active {
    outline: 1px solid var(--whiteffffff);
    outline-offset: 3px;
}

.ipad .nav-container nav .infoBtnPopupContainer {
    display: none;

}

.ipad .nav-container nav .exterior-interior-color-zoom-container .color-swatch-container.disabled {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

/*desktopResizeMob*/
.desktopResizeMob .wrapper {
    bottom: 0;
    height: 80px;
    transition: all 0.2s linear;
}

.desktopResizeMob .wrapper.interior-selected {
    bottom: -40px;
}

.desktopResizeMob .nav-container {
    width: 100%;
    height: 80px;
    margin-left: auto;
    transform: scale(1);
}

.desktopResizeMob .qr-container {
    display: none;
}

.desktopResizeMob .nav-container nav {
    width: 100%;
}

.desktopResizeMob .nav-container nav .btn {
    border-radius: 0;
    height: 40px;
    /* width: 50%; */
    flex-grow: 1;
    border: none;
    border-left: 1px solid #000;
    /* border-top: 1px solid #676767; */
}

.desktopResizeMob .nav-container nav .reset,
.desktopResizeMob .nav-container nav .info {
    display: none;
}

.desktopResizeMob .nav-container nav .exterior-interior-color-zoom-container {
    border-radius: 0;
    flex-wrap: wrap;
    width: 100%;
    border: none;
    border-top: 1px solid #676767;
    /* border-top: 1px solid #676767;
    border-bottom: 1px solid #444444; */
    /* border-left: none;
    border-right: none; */
}

.desktopResizeMob .nav-container nav .exterior-interior-color-zoom-container .zoom-slider-container {
    display: none;
}

.desktopResizeMob .nav-container nav .exterior-interior-color-zoom-container .color {
    display: none;
}

.desktopResizeMob .nav-container nav .exterior-interior-color-zoom-container .color-swatch-container {
    width: 100%;
    height: 40px;
    background-color: #000000;
    opacity: 1;
    z-index: 1;
    flex-direction: row;
    justify-content: flex-start;
    border-radius: 0;
    order: 3;
    position: static;
    /* border-top: 1px solid #444444; */
    padding-left: 10px;
    padding-bottom: 0;
    column-gap: 15px;
    row-gap: 0;
}

.desktopResizeMob .exterior .exterior-icon {
    transform: scale(0.54);
}

.desktopResizeMob .interior .interior-icon {
    transform: scale(0.54);
}

.desktopResizeMob .nav-container nav .exterior-interior-color-zoom-container .color-swatch {
    width: 20px;
    height: 20px;
}

.desktopResizeMob .nav-container nav .exterior-interior-color-zoom-container .color-swatch.active {
    outline: 1px solid var(--whiteffffff);
    outline-offset: 3px;
}

.desktopResizeMob .nav-container nav .infoBtnPopupContainer {
    display: none;

}

.desktopResizeMob .nav-container nav .exterior-interior-color-zoom-container .color-swatch-container.disabled {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

/* AR not support */

#arnotsupport {
    background-color: #ebebeb;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    padding: 30px;
    position: absolute;
    z-index: 102;
    top: 0;
}
#arnotsupport #arerrorContent {
    background: #fff;
    padding: 40px 20px;
    border-radius: 15px;
    font-size: 16px;
    position: relative;
}

#arnotsupport #arerrorContent span {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 999;
    font-weight: 900;
}