#shop {
   background: url(../images/bg/shop04.jpg) no-repeat center center;
   background-size: cover;
}

#shop canvas {
}

.sub,
.shopPage {
   position: absolute; /* because we need background effects*/
   left: 0;
   top: 40px;
   width: 100vw;
   height: auto !important;
   bottom: 10px;
   padding: 30px 3% 0 3%;
   overflow-y: auto;
   text-align: center;
   z-index: 1;

   justify-items: center;
}

.sub table {
   height: 100%;
   width: 100%;
}

.sub table thead {
   flex-shrink: 0;
   flex-grow: 0;
}

.sub table tbody {
   flex-grow: 1;
   overflow-y: auto; /* Enables vertical scrolling */
}

#listCredits {
}

.iap {
   position: relative;
   max-width: 95%;
   min-width: 100px;
   min-height: 200px;
   aspect-ratio: 368/549;
   text-align: center;
}

.iap::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background: url(../images/iaps/bg-iap.png) no-repeat top center;
   background-size: contain;
   opacity: 1;
   z-index: 0;
}

.iapCrate::after {
   background-image: url(../images/iaps/bg-crates.png);
}

.iap .boxImg {
   position: absolute;
   top: 0;
   left: 5%;
   width: 90%;
   aspect-ratio: 1/1;
}

.iap .boxImg div {
   position: absolute;
   bottom: 0;
   height: 100%;
   width: 100%;
   background-size: 100%;
   background-position: center bottom;
   background-repeat: no-repeat;
   border-radius: 20px; /* cut off corners */
}

.iap .boxPale {
   filter: grayscale(100%);
   opacity: 0.5;
   z-index: 0;
}

.iap .boxColor {
   z-index: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.9);
   box-shadow: 0 -3px 5px rgba(230, 245, 255, 0.5);
}

#shop .iap h3,
.iap .iapTitle {
   position: absolute;
   top: 60%;
   left: 7%;
   width: 86%;
   z-index: 3;
   font-size: 0.8em;
   margin: 0;
   padding: 0px;
   color: #eff;
}

.boxCreditsCost {
   position: absolute;
   top: 8%;
   left: 10%;
   width: 80%;
   color: #61ac44;
   font-size: 1.3em;
   z-index: 1;
   opacity: 0.92;
}

.iapCrate .desc {
   position: absolute;
   top: 70%;
   left: 8%;
   width: 84%;
   z-index: 3;
   font-size: 0.7em;
   margin: 0;
   padding: 0px;
}

.iapCrate .boxCredits {
   position: absolute;
   bottom: -3%;
   border: 1.5px solid black;
   left: 15%;
   width: 70%;
   margin: 0;
   font-size: 1em;
   z-index: 1;
}

.price {
   color: rgba(255, 255, 255, 0.5);
   background: rgba(0, 0, 0, 0.5);
}

.priceBorder {
   border: 4px solid #2F9A0D!important
}

.priceColor {
   color: #2F9A0D!important
}

#shop .price {
   position: absolute;
   bottom: 10%;
   left: 10%;
   width: 80%;
   margin: 0;
   font-size: 1em;
   z-index: 1;
}

/* daily offer box */

.bgShadow {
   position: absolute;
   left: 10%;
   right: 10%;
   top: 10%;
   bottom: 10%;
   background-image: url(../images/bg/shadow.png);
   background-repeat: no-repeat;
   background-size: 100% auto;
}

.boxOffer {
}

.boxOffer div {
   width: 600px;
   border: 2px solid rgba(255, 255, 255, 0.7);
   border-radius: 10px;
}

/*   popup crate   */
#popupCrate {
}

/*   daily deal   */
.dailyDeal {
   position: absolute;
   left: 5%;
   right: 5%;
   top: 0%;
   z-index: 1;
}

.imgDeal {
   position: absolute;
   left: 5vw;
   top: 4vw;
}

.imgDeal .card {
   zoom: 0.9;
   /* width: auto;
   height: 60vh;
   aspect-ratio: 240/390; */
}

.popup .imgDeal .card .boxIconDesc {
   display: none;
}

.dealInfo {
   position: absolute;
   left: 40%;
   right: 5%;
   padding-top: 12vw;

   aspect-ratio: 820/789;

   background-image: url(../images/bg/dailyDeal_s.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: top right;

   font-family: "Orbitron", sans-serif;
   text-align: center;
}

.dealInfo div,
.dealInfo h1 {
   margin-left: auto;
   margin-right: auto;
}

.dailyDeal h1 {
   color: #5cffff;
   text-shadow: 0 0 4px #eef, 0 0 10px #eef;
   font-size: 2em;
   font-weight: normal;
   text-transform: uppercase;
   margin: 0 auto 0.3em auto;
   text-align: center;
}

.dealDiscount {
   font-size: 2em;
   margin: 0.5em auto 0.5em auto;
   color:  #FB6B20;
   background: rgba(0,10,20,0.97);

   border-radius: 7px;
   border: 1px solid #FB6B20;

   padding: 6px 46px;
   display: inline-block;

}

.dailyDeal .boxCredits {
   background: #FB6B20;
}

.dealOldPrice {
   width: 130px;
   text-align: left !important;
   text-align: center;
   margin: 0;
   color: #f89f19;
   text-decoration: line-through;
   text-decoration-color: white;
}

.dealInfo .boxCredits {
   zoom: 1.15;
   max-width: 150px;
   margin: auto;
}