/**
 * Shop App CSS: default theme
 **/

a, a:hover {
    color: black;
}
	       

.item {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid white;
}

.item:hover {
    border-color: black;
    text-decoration: none;
}

.thumbs img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    margin-top: 5px;
    margin-right: 5px;
}

.thumbs img:hover {
    cursor: pointer;
}

.close {
    font-size: 250%;
    font-weight: 100;
    opacity: 1;
    padding-top: .1em;
}

#image-main:hover {
    cursor: zoom-in;
}

.price {
    font-size: 150%;
}


/**
 * Large image preview
 **/

#image-large-modal-content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100vh;
  overflow-y: auto;
  border: none;
}

#image-large-modal-close {
  position: fixed;
  top: 13px;
  right: 24px;
  z-index: 101;
  font-size: 250%;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

#image-large-modal-close:hover {
  color: red;
}

#image-large-lg {
  position: relative;
  width: 100%;
  height: 100%;
}

#image-large-lg-carousel {
  width: 100px;
  margin: 20px 0;
  border-right: 1px solid #e9e9e9;
}

.image-large-lg-carousel-item {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  padding: 6px;
  cursor: pointer;
  transition: border-color .15s ease-out;
  border: 2px solid #fff;
  border-radius: 2px;
}

.image-large-lg-carousel-item:hover {
  border-color: #ffdd60;
}

.image-large-lg-carousel-item.active {
  border-color: #ffdd60;
}

.image-large-lg-carousel-item img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 36px;
  max-height: 36px;
  margin: auto;
}

#image-large-lg-img-container {
  position: relative;
}

#image-large-lg-img-container img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

#image-large-lg-right-bar {
  width: 83px;
}

.image-large-lg-arrow {
  width: 60px;
  height: 45px;
  cursor: pointer;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAPCAMAAAAiTUTqAAAAJ1BMVEWysrFHcEz////f396xsbCxsbDFxcTf396xsbD////39/f////NzcxkYxk/AAAADXRSTlPuACCYPz4KmEIfeTu2toSv6QAAAFNJREFUGNN1yVEOgCAMwNAOYEH0/ufVGJVNRv+ah9jUHXYabWWFgxpbIe/ZIpaSJIs4Eod4csiPbizW6iCDTDSQmT4koBeJ6EGUvIlEqGiP6MKuJ+KMAmfB/afmAAAAAElFTkSuQmCC);
}

.image-large-lg-arrow:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAPCAMAAAAiTUTqAAAAKlBMVEX/AgJHcEz/lZX/AAD/////AAD/AAD/////////5ub/////W1v/AwP/BARtiHq6AAAADnRSTlPuAJg+IA1CHwZ5O7bm58gGvcQAAABTSURBVBjTdclJFoAgDMDQlAKCw/2vqwuHFmp2eR+xFXfYqdQ/UzY0NiWtySKWsmSLOBKHeHLIQBYZySATfchMLxLQg0R0I2VPi0iAR6H1iC7s7QTLhgJn8lc+2QAAAABJRU5ErkJggg==);
}

.image-large-lg-arrow-down {
  transform: rotate(180deg);
}

.image-large-sm {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: visible;
  border-bottom: 1px solid #dee2e6;
  box-shadow: 0px 10px 250px #C0C0C0;
}

.image-large-sm img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

#image-large-sm-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background: #000000;
}

#close-transform-mode {
  display: none;
  position: fixed;
  top: 13px;
  right: 24px;
  z-index: 101;
  font-size: 250%;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

#close-transform-mode:hover {
  color: red;
}