.case.case-clothes #t-shirt-preview {
     background-color: #fff;
}


#showroom {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 50px;
     padding: 128px 0;
     flex-wrap: wrap;
     position: relative;
}
#showroom.hide {
     display: none;
}
.row-3.hide {
     display: none;
}

.webgl {
     position: fixed;
     top: 0;
     left: calc(50% - 480px);
     outline: none;
     /*border: 1px solid #000;*/
     z-index: 10;
     box-sizing: border-box;
}
.video-container {
     /*position: fixed;*/
     /*top: 0;*/
     /*transform: translateX(-50%);*/
     /*left: 50%;*/
     z-index: 5;
     position: relative;
     width: 512px;
     height: 512px;
     overflow: hidden;
     border-radius: 32px;
     display: flex;
     justify-content: center;
}
.showroom .br { display: none }
@media (max-width: 768px) {
     .video-container {
          width: 311px;
          height: 311px;
     }
     #showroom .arrow-right, #showroom .arrow-left { display: none}
}
.video-container .video-wrapper {
     position: relative;
}
.video-container video, .video-container canvas {
     /*width: 100% !important;*/
     /*height: 100% !important;*/
     object-fit: cover;
}
.video-container canvas.output_canvas {
     z-index: 10;
}
.video-container canvas {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
#webcamButton {
     position: fixed;
     top: 20px;
     left: calc(50% - 90px);
     width: 180px;
     padding: 6px 16px;
     text-align: center;
     font-size: 12px;
     font-weight: 600;
     border-radius: 8px;
     font-family: sans-serif;
     background-color: rgba(255, 255, 255, 0.5);
     border: 2px solid rgba(130, 130, 130, 0.9);
     cursor: pointer;
     transition: 300ms;
     z-index: 31;
}
#webcamButton.hidden { display: none}
#webcamButton:disabled {
     cursor: unset;
}
#webcamButton:not(:disabled):hover {
     box-shadow: 0 0 5px #666;
}

/* icons */

.preview-wrapper, .preview-preparing  {
     position: absolute;
     top: 0;
     transform: translateX(-50%);
     left: 50%;
     width: 100%;
     height: 100%;
     z-index: 30;
     display: none;
}
.preview-wrapper.show { display: flex}
.preview-container {
     width: 100%;
     height: 100%;
     position: relative;
}
#preview {
     position: absolute;
     width: 100%;
     height: 100%;
     object-fit: cover;
}
.preview-wrapper .buttons-wrapper {
     position: absolute;
     bottom: 0;
     height: 100px;
     left: 0;
     width: 100%;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
}
.preview-preparing {
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 15;
}
.preview-preparing p {
     display: none;
     font-size: 72px;
     font-family: sans-serif;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.8);
}
.preview-preparing.show-3,
.preview-preparing.show-2,
.preview-preparing.show-1 {
     display: flex;
}
.preview-preparing.show-3 .n-3 { display: block}
.preview-preparing.show-2 .n-2 { display: block}
.preview-preparing.show-1 .n-1 { display: block}

.loader-container {
     position: absolute;
     z-index: 99;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #1A191D;
}
.loader-container img {
     width: 100%;
     height: 100%;
     object-fit: contain;
}
.loader-container.hide {
     display: none;
}

.tshirt-nav {
     width: 100%;
     display: flex;
     justify-content: center;
     gap: 45px;
}
.tshirt-nav img {
     border: 16px solid transparent;
     outline: 1px solid transparent;
     width: 336px;
     height: 378px;
     object-fit: cover;
     border-radius: 40px;
}
@media (max-width: 768px) {
     .tshirt-nav {
          gap: 22px;
     }
     .tshirt-nav img {
          border: 8px solid transparent;
          width: 168px;
          height: 189px;
          border-radius: 20px;
     }
}
.tshirt-nav img.active {
     outline: 1px solid #fff;
}
/*===========================*/
#showroom .screenshot-container,
#showroom .close-container {
     position: absolute;
     height: 64px;
     width: 64px;
     z-index: 15;
}
#showroom .close-container.hide { display: none  }
#showroom .screenshot-container.hide { display: none  }
#showroom .screenshot-wrapper,
#showroom .close-wrapper {
     position: relative;
     width: 100%;
     height: 100%;
}
#showroom .screenshot,
#showroom .close-app {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transition: 0.5s;
     cursor: pointer;
}
#showroom .screenshot.hovered,
#showroom .close-app.hovered {
     opacity: 0;
     transform: scale(1.05);
}
#showroom .screenshot.activated,
#showroom .close-app.activated {
     opacity: 0;
}
#showroom .screenshot-container:hover .screenshot.hovered,
#showroom .close-container:hover .close-app.hovered {
     opacity: 1;
}
#showroom .screenshot-container:active .screenshot.activated,
#showroom .close-container:active .close-app.activated {
     opacity: 1;
}
/*===========================*/
#showroom .screenshot-container {
     bottom: 0;
     left: 0;
}
#showroom .close-container {
     top: 0;
     right: 0;
}
#showroom .close-container img, #showroom .screenshot-container img {
     border-radius: 0;
}
/*===========================*/
#showroom .arrow {
     width: 48px;
     height: 48px;
     cursor: pointer;
}
#showroom .arrow.arrow-right {
     transform: scaleX(-1);
}

.open-camera {
     display: none;
}
#showroom .download, #showroom .cancel {
     position: relative;
     width: 64px;
     height: 64px;
}
#showroom .download img, #showroom .cancel img {
     position: absolute;
     transition: 0.5s;
     cursor: pointer;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     border-radius: 0;
}
#showroom .download img.hovered, #showroom .cancel img.hovered { opacity: 0 }

#showroom .download:hover .download-img.normal{ opacity: 0 }
#showroom .cancel:hover .cancel-img.normal{ opacity: 0 }

#showroom .download:hover .download-img.hovered{ opacity: 1 }
#showroom .cancel:hover .cancel-img.hovered{ opacity: 1 }

#showroom .preview-container button,
#showroom .preview-container a {
     text-decoration: none;
     background-color: transparent;
     border: none;
     outline: none;
}
@media (max-width: 768px) {
     #showroom .screenshot-container, #showroom .close-container,
     #showroom .download, #showroom .cancel {
          width: 48px;
          height: 48px;
     }
}