.product-thumb {position: relative; display: flex;}
.cursor{cursor: pointer;}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
 
}
.direct{ opacity:0; transition: .3s;}
.product-thumb:hover .direct{opacity: 1;}
/* Position the "next button" to the right */
.next {right: 15px; border-radius: 3px 0 0 3px;}
.prev{left: 135px}

.prod-thumbbtn{display: flex; flex-direction: column; width: 107px; margin-right: 15px;}
.prod-thumbbtn:after {content: ""; display: table; clear: both;}
/* Six btns side by side */
.btn {float: left; width: 107px; height: 107px; overflow: hidden; margin-bottom: 11.5px; border: 1px solid #dedede;}
.btn:hover{border: 2px solid #212121;}
.btn .thumbnail-btn{width: 107px; height: 107px; object-fit: cover;}
/* Add a transparency effect for thumnbail images */
.demo {opacity: 0.6;}
.btn .thumbnail-btn .active{border: 1px solid #212121!important; display: block;}
.prod-thumb-wrap{width: 600px; height: 700px; overflow: hidden;}
.prod-thumb-inner{width: 600px; height: 700px; overflow: hidden}
.prod-thumb-inner img{width: 600px; height: 700px; object-fit:cover}
.active{border: 2px solid #212121;}