.customslider {
    -webkit-touch-callout: none;
    touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: #0000;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 1;
    block-size: inherit;
    max-height: 100%;
    margin: 0;
    text-align: center;
    width: 100%;
    margin: 5px 0 17px 0;
    background: white;
    padding: 8px;
    border-radius: 0.5rem;
    transition: transform ease-in-out .15s;
    box-shadow: 0 0 30px #39486e0d;
    border: 1px solid rgba(0,0,0,0.125);
}
 .customslider-inner {
     flex-direction: column;
     flex-wrap: nowrap!important;
     height: 100%; 
     display: flex!important;
     max-width: 460px;
}
.customslider .swiper.product {
	max-width: 100%;
    position: relative!important;
    z-index: 43;
    display: inline-block!important;
    left: 0!important;
    top: 0!important;
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0px 0 10px 0;
}
.customslider .swiper {
     width: 600px;
     height: 500px;
}
.customslider .swiper-slide{
     text-align: center;
     font-size: 18px;
     display: flex;
     justify-content: center;
     align-items: center;
}
.customslider .swiper-slide.swiper-slide-visible {
    max-width: 78px !important;
    margin-right: 10px !important;
}
.customslider .swiper-slide img{
     object-fit: cover;
}
.customslider .swiper-button-next, .swiper-rtl .swiper-button-prev{
     right: 140px !important;
     left: auto;
}
.customslider .swiper-button-prev, .swiper-rtl .swiper-button-next{
     left: 140px !important;
     right: auto;
}
.customslider .swiper-container.swiper-container-thumbs {
     flex-grow: 0;
     flex-shrink: 0;
     position: relative!important;
     z-index: 42;
     width: 100%;
	 overflow: hidden;
}
 @media only screen and (max-width: 600px) {
     #modalImg {
         max-width: 90%;
         max-height: 90%;
    }
}
 #imageModal{
    inset: 0px;
    width: auto;
    height: auto;
    overflow: hidden;
    z-index: 2147483647;
	display: none;
    background-color: #fff;
    touch-action: none;
	justify-content: center;
    align-items: center;
}
 #imageModal img {
     max-width: 80%;
     max-height: 80%;
     transition: transform 0.25s ease;
}
 #imageModal img:hover {
     transform: scale(1.1);
     transition: transform 0.5s ease;
}
 #imageModal button {
     top: 10px;
     font-size: 24px;
     background-color: white;
     border: 1px solid #ddd;
     border-radius: 4px;
     cursor: pointer;
     padding: 10px 10px;
}
 #zoomControls{
    position: absolute;
    top: 10px;
    right: 13px;
    z-index: 99;
}
 #zoomControls button {
     display: block;
     margin-bottom: 5px;
     width: 50px;
}
 #modalImg{
     max-width: 80%;
     max-height: 80%;
     margin: auto;
     display: block;
}
.myModalSwiper {
	overflow: hidden;
    flex-direction: column;
    width: 100%;
	height: 90%;
}
.myModalSwiper .image-container {
    /* max-height: 100%; */
    height: 100%;
}