/* Custom CSS theme */
div.cover__logo {
  display: none;
}

.s2p-buy-now {
  width: 210px !important;
  padding-top: 17px !important;
  padding-bottom: 17px !important;
  padding-left: 27px !important;
  padding-right: 27px !important;
  margin-bottom: 10px !important;
  font-size: 18px !important;
  font-family: IBM Plex Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif !important;
  font-weight: 600;
}

/* To avoid semitransparent on top of product images */
.grid-product__shadow {
  background-color: rgba(0, 0, 0, 0) !important;
}

.ins-tile__wrap {
  margin-top: 0px !important;
}

/* Projectlist and sharing */
#S2PProjectList {
  margin-top: 20px;
  min-height: 500px;
}

#S2PProjectList > div > img {
  width: 400px;
}

.S2PIsShared {
  color: green;
}

.S2Ptd {
  font-size: 16px !important;
}

.S2PTableHeader {
  font-size: 16px !important;
}

.S2PButton {
  font-size: 16px !important;
}

.S2PPlainText {
  font-size: 16px !important;
}

.s2p-warning {
  background-color: #ff0000 !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

.mpAddToCartButton {
  background-color: #04AA9B !important;
  color: #ffffff !important;
}

.cover__button {
  background-color: #04AA9B !important;
  font-family: 'Proxima Nova' !important;
  color: #FFFFFF !important;
  /* padding: 17px 27px !important; */
  border-radius: 3px !important;
  border: none !important;
  cursor: pointer !important;
}

.cover__button-text {
  color: #ffffff !important;
}

.S2PProductThemeStart {
  padding: 3px 3px !important;
  height: 30px;
}

.SPALinkToSPA {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Proxima Nova;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

@-webkit-keyframes glowing {
  0% {
    background-color: #B20000;
    -webkit-box-shadow: 0 0 3px #B20000;
  }
  50% {
    background-color: #FF0000;
    -webkit-box-shadow: 0 0 40px #FF0000;
  }
  100% {
    background-color: #B20000;
    -webkit-box-shadow: 0 0 3px #B20000;
  }
}

@-moz-keyframes glowing {
  0% {
    background-color: #B20000;
    -moz-box-shadow: 0 0 3px #B20000;
  }
  50% {
    background-color: #FF0000;
    -moz-box-shadow: 0 0 40px #FF0000;
  }
  100% {
    background-color: #B20000;
    -moz-box-shadow: 0 0 3px #B20000;
  }
}

@-o-keyframes glowing {
  0% {
    background-color: #B20000;
    box-shadow: 0 0 3px #B20000;
  }
  50% {
    background-color: #FF0000;
    box-shadow: 0 0 40px #FF0000;
  }
  100% {
    background-color: #B20000;
    box-shadow: 0 0 3px #B20000;
  }
}

@keyframes glowing {
  0% {
    background-color: #B20000;
    box-shadow: 0 0 3px #B20000;
  }
  50% {
    background-color: #FF0000;
    box-shadow: 0 0 40px #FF0000;
  }
  100% {
    background-color: #B20000;
    box-shadow: 0 0 3px #B20000;
  }
}

.SPAContainer {
  width: 100%;
  /*  background-color: #3b4f4c !important; */
  /*  color: #ffffff; */
}

.SPAContainerMobile {
  width: 100%;
  background-color: #3b4f4c !important;
  color: #ffffff;
}

.SPANewPSC {
  width: 100%;
  font-family: Proxima Nova, Arial, sans-serif;
  border-style: solid !important;
  border-color: black !important;
  border-width: thin !important;
  border-radius: 8px;
  padding: 10px !important;
  padding-left: 45px !important;
  margin-bottom: 10px !important;
}

.SPANewPSCMobile {
  width: 100%;
  margin: auto;
  font-family: Proxima Nova, Arial, sans-serif;
  font-size: 18px;
  background-color: darkorange;
  border-radius: 3px;
  padding: 10px;
}

.spaPSC1 {
  margin-right: 5px;
}

.spaPSC2 {
  margin-right: 5px;
}

.spaPSC3 {
  margin-right: 5px;
}

.SPAPSCs {
  padding-top: 10px;
  width: 50%;
  margin: auto;
  margin-top: 10px;
  background-color: darkorange;
  color: black;
  border-radius: 3px;
  padding: 10px;
}

.SPAPSCsMobile {
  width: 100%;
  margin: auto;
  display: none;
}

.SPAPictures {
  display: block;
  border: 1px fixed solid;
  width: 100%;
  /* 50% */
  margin: auto;
  margin-top: 10px;
}

.SPAPicturesMobile {
  display: block;
  border: 1px fixed solid;
  width: 100%;
  margin: auto;
  margin-top: 10px;
}

.SPAThumb {
  display: unset;
  padding: 4px !important;
  margin: 4px !important;
  background-color: #ffffff !important;
  border-style: solid !important;
  border-width: medium;
  border-radius: 4px;
  border-color: white !important;
}

.SPAThumb:hover {
  transform: scale(1.1);
  transition: transform .2s ease 0s;
}

.SPAThumbSelected {
  border-color: #fca726 !important;
}

/*------------------------*/
.SPAPreviewContainer {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px !important;
}

.SPAProductBox {
  flex: 50%;
  text-align: center;
  margin-top: 20px !important;
  padding: 10px !important;
}

@media (max-width: 1600px) {
  .SPAProductBox {
    flex: 50%;
  }
}

@media (max-width: 1350px) {
  .SPAProductBox {
    flex: 50%;
  }
}

@media (max-width: 1100px) {
  .SPAProductBox {
    flex: 100%;
  }
}

@keyframes example {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

.SPAPreviewImages,
.SPAPreviewImagesMobile {
  height: 320px !important;
  object-fit: cover;
  cursor: pointer;
  /* display: block;
 margin-left: -25%; */
  transition: transform .2s ease 0s !important;
  /* TEST */
  animation-name: example;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: alternate-reverse;
}

.SPAPreviewImages:hover {
  transform: scale(1.02);
}

.SPAPictureWrapper {
  /* width: 320px; */
  margin: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  box-shadow: none !important;
  border-color: black !important;
  border-width: thin !important;
  border-style: solid !important;
  border-bottom-style: none !important;
}

.SPAPictureBox,
.SPAPictureBoxMobile {
  height: 320px;
  position: relative !important;
}

.SPAPriceBox {
  display: inline-block !important;
  position: absolute !important;
  top: 10px;
  /* right: 50px; */
  padding: 0px 10px 0px 10px !important;
  background-color: #FCA726 !important;
  z-index: 9999 !important;
}

.SPAProductName {
  border-color: black !important;
  border-width: thin !important;
  border-style: solid !important;
  border-top-style: none !important;
  border-bottom-style: none !important;
  font-weight: 900;
}

.SPAButtonsBox {
  padding-top: 10px !important;
  padding-bottom: 60px !important;
  height: 60px;
  border-color: black !important;
  border-width: thin !important;
  border-style: solid !important;
  border-top-style: none !important;
}

.SPAButtonDiv {
  width: 50%;
}

.SPAButtonDivEdit {
  float: left;
}

.SPAButtonDivBuy {
  float: right;
}

.SPAButton {
  border-radius: 3px;
  border-style: hidden;
  height: 50px;
  fontSize: 18px;
  padding: 10px !important;
}

.SPAEditButton {
  background-color: black !important;
  color: white !important;
}

.SPAEditButton:hover {
  background-color: #333333 !important;
}

.SPABuyButton {
  background-color: lightgray !important;
  color: black !important;
}

.SPABuyButton:hover {
  background-color: #dddddd !important;
}

.SPAModal {
  display: none;
  /* Hidden by default */
  position: fixed !important;
  /* Stay in place */
  z-index: 99999 !important;
  /* Sit on top */
  padding-top: 100px !important;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black !important;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9) !important;
  /* Black w/ opacity */
}

.SPAModal-content {
  margin: auto !important;
  display: block;
  /*  width: 80%; */
  /*  max-width: 700px; */
}

.SPAModalClose {
  position: absolute !important;
  /* top: 15px; */
  right: 35px;
  color: #f1f1f1 !important;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s !important;
}

.SPAModalClose:hover,
.SPAModalClose:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Following are new to show a larger preview when hover */
.SPApreview {
  display: none;
  position: absolute;
  top: 0;
  left: 0px;
  /* Adjust based on your layout */
  z-index: 100;
}

.SPApreview img {
  width: 300px;
  /* Adjust based on your desired preview size */
  height: auto;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.SPAthumbnail-container {
  position: relative;
  display: inline-block;
}

.SPAthumbnail-container:hover .SPApreview {
  display: block;
}