html, body {
    max-width: 100%;
    overflow-x: hidden;    
    font-size: 12px;
    color: white;
    background-color: #2a3145;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

/* home section */
.homeContainer {  
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;

}



.innerHome img{
  max-width: 200px;
}

.innerHome {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 5px;
  padding: 10px;
  justify-content: space-around;

}

.innerHome > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}




#profileBannerS, #removeBannerS, #promoBannerS{
  display: none;
}

#tradeBannerS,#pokerBannerS, 
#rouletteBannerS, #stakingBannerS{
  position: relative;
  cursor: default;

}

#tradeBannerS::after ,#pokerBannerS::after,
#rouletteBannerS::after, #stakingBannerS::after{
  content: ""; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); 
  pointer-events: none;
  border-radius: 10px;
}



.homeSelectionBaseOuter{
  background-color: RGBA(255, 255, 255, 0.1);
  margin: 10px;
  border-radius: 10px;
  cursor: pointer;
}

.homeSelectionBaseOuter:not(.non-clickable-image):hover{
  background-color: RGBA(255, 255, 255, 0.5);
}



/* end home section */


/* main page for cases */
#outerCasesSectionDiv{
  background-color: #1f273a;

}

.POTATOTokenWon{
  font-size: 2em;
}

#casesSectionDiv{
  margin-bottom: 20px;
  padding-bottom: 40px;
  padding-top: 20px;
  width: 80vw;
  margin: auto;

}

#SpecialDiv,
#RarityDiv,
#TYPEDiv,
#ClassicDiv,
#FARMDiv,
#CollectionDiv{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.outerCaseMainDiv{
  border-top: solid #252F4D;

  margin: auto;


}



.caseDiv{
  flex: 2;
  max-width: 180px;
  text-align: center;
  margin: 50px;
  position: relative;
  cursor: pointer;
  max-height: 200px;
  height: 200px;
}

.caseDiv:hover{
  transform: scale(1.3);

}



#caseImageID{
  width: 300px;
}


.casePriceMenu{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  font-weight: bold;
  font-size: 1.2em;
}

.casePriceBackground{
  border: 1px solid limegreen;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  width: 100px;

  border: 1px solid ;
}

.casePriceMenu:hover{
  font-weight: bold;
  font-size: 1.4em;
}



.caseDiv img{
  width: 300px;
  max-width: 180px;
}

.caseName{
  font-weight: bold;
  font-size: 1.2em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -51px;
}



.caseCategory{
  display: block;
  font-size: 2em;
}




/* end main page for cases */



#caseOpenPart{
  text-align: center;
  display: none;
  margin-top: -100px;
}

.caseOpenButton{
  background: linear-gradient(limegreen, darkolivegreen);
  border: 2px solid limegreen;
  box-shadow: 0px 0px 10px 2px limegreen;
  width: 160px;
  height: 90px;
  color: white;
  cursor: pointer;
  margin:auto;
  background-color:green;
  font-size: 1.8em;
}

.caseOpenButtonDiv{
  text-align:center;
  width:100vw;
}

#caseNameOnPage{
  padding-top: 20px;
}

#caseInfoTop{
  background-color: #1f273a;
  text-align: center;
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
  align-items: center;
}


#openCaseButton{
  text-align: center;
}


.case-roller{
    width: 50vw;
    border: 3px solid #0B132B;
    height: 190px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow:hidden;
    visibility: hidden;
    box-shadow: 0px 0px 10px 3px #0B132B;
    margin-bottom: 50px;
    z-index: 10;

    /* add this line to make it verticle for case battles
    transform: rotate(90deg); 
    */

}


  
/* the container that contains the skins */
#case-roller-container {
    width: 100%;
    height: 100px;
    width: 9999999999999999999px;
    max-width: 999999999999999999px;
}

.case-roller-holder #selector{
    width:3px;
    background-color: limegreen;
    left:50%;
    height:10%;
    transform:translate(-50%,0%);
    position:absolute;   
    z-index:200;
  }

  .case-roller-holder #selectorBottom{
    width:3px;
    background-color: limegreen;    
    left:50%;
    bottom: 0%;
    height:10%;
    transform:translate(-50%,0%);
    position:absolute;   
    z-index:200;
  }


/* the items in the case*/

.item {
	float: left;
	margin: 0px 0px 0.5px 5px;
    width: 150px;
	height: 188px;
	background-size: 100%;
    background-color:transparent;
    background-repeat: no-repeat;
    background-position: center;

    /*add this line to make it vertical for case battles
     transform: rotate(270deg); 
     */

}


#skinsInCaseTitle{
    text-align: center;
    width: 100vw;
    padding-top: 10px;
    padding-bottom: 20px;
}

#itemsInSlotTitle{
  text-align: center;
  width: 100vw;
  padding-top: 10px;
  padding-bottom: 20px;
}

#infoDivForOpen{
  font-size: 1.5em;
  color: red;
  padding: 10px;
}




#innerCardDivWinner{
    width: 50px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
}

#innerCardDiv{
    width: 50px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35%;
}


.winning-item {

	position: relative;
	top: -1px;
}

.skinType{
  line-height: 0px;
  display: block;
  opacity: 0.6;
  filter: alpha(opacity = 60); 
}



.skinTypeTop{
  line-height: 0px;
  display: block;
  opacity: 0.6;
  filter: alpha(opacity = 60); 
}


.skinNameTop{
  font-weight: bolder;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin:-4px 0 2px 0px;
}

.skinCondition{
    font-size: 1em;
}

.skinImage{
  display: block;
  width: 100%;
}


.skinImageProfile{
  display: block;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.skinImageTop{
  display: block;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  clear:both
}


.tradeURLTextField{
  background-color: #26293B;
  border: 1px solid #464F89;
  color: white;
  margin-right: 1px;
  width: 300px;
}

#buySkinPageInfo{
  font-size: 1.6em;
}


#editTradeURLButton, #setTradeURLButton{
  background-color: #26293B;
  border: 1px solid #464F89;
  color: white;
}



.amountWonTop,
.amountWon{
  color: lightgreen; 
  display: inline;
  float: left;
}

.skinOdds{
  display: inline;
  float: right;
  padding: 5px;
  margin-top: 25px;
}

.skinPrice{
  font-size: 2em;
    color: lightgreen;
    display: inline;
    float: left;
}

#skinImageInOpen{
  display: block;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  clear:both
}

.dateOpenedTop{
  display: inline;
  float: right;
}


/* withdraw/promo */
#createWithdraw,
#createPromoCode{
    display: block;
    text-align: left;
    width: 500px;
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    margin-top: 10vh;
}

#createWithdraw input[type=text],
#createPromoCode input[type=text]{
    height: 30px;
    width: 100%;
    background: linear-gradient(to right, #1f273a, #1f273a);
    border: 2px solid #1f273a;
    color: white;
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

#searchSkins input[type=text],
#searchPrices,
#searchSkins button{
  background: linear-gradient(to right, #0B132B, #0B132B);
  border: 2px solid #26293B;
  color: gray;
  height: 50px;
  width: 200px;
}


#solDepositOptions, #solWithdrawOptions{
    height: 60px;
    width: 75%;
    background: linear-gradient(to right, #1f273a, #1f273a);
    border: 2px solid #1f273a;
    color: white;
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    box-shadow: 0px 0px 10px 2px #1f273a;
    font-size: 1em;
}

#solDepositOptions option, #solWithdrawOptions option{
  background-color:   #1f273a;
}

#genQRButton{
  background: linear-gradient(to right,#5BC0BE,#3A506B);
  border: 2px solid #5BC0BE;
  font-size: 1.5em;
  color: white;

}



#searchSkins input[type=text]
{
  width: 400px;
  margin-bottom: 20px;
}

#searchSkins button{
cursor: pointer;
}

#createWithdraw input[type=submit],
#reqWithdrawButton,
#createPromoCode input[type=submit]{
    height: 40px;
    width: 100%;
    background: linear-gradient(to right,#5BC0BE,#3A506B);
    border: 2px solid #5BC0BE;
    color: black;
    font-weight: 900;
    margin-top: 5px;
    margin-bottom: 20px;
    cursor: pointer;    
    margin-left: auto;
    margin-right: auto;
}



  /*------- deposit div --------*/
  #depositDiv{
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    font-size: 2em;
    text-align: center;
    width: 100vw;
    height: 100%;
    background-color: #252F4D;
    max-width: 800px;
    max-height: 600px;
    box-shadow: 0px 0px 10px 2px #6171B1;
  }

  .gg-close-r {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 4px;
    float: right;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
   }
   
   .gg-close-r::after,
   .gg-close-r::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 12px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    border-radius: 5px;
    top: 8px;
    left: 3px
   }
   
   .gg-close-r::after {
    transform: rotate(-45deg)
   } 



 .depositCointainerGrid img{
  width: 100%;
  max-width: 300px;
} 

.depositCointainerGrid {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  height: 100%;
  border-right: 5px solid #0B132B;

  } 

 .topDepositInfo{
  text-align: center;
  position: absolute;
  top: 0;
  left: 45%;
} 

.coinBaseDeposit{
  position: relative;
  max-width: 200px;
  margin: 20px;
  margin-bottom: 50px;
  cursor: pointer;
}

.CoinbaseDepositButton{
  background: linear-gradient(to right,#5BC0BE,#3A506B);
    border: 2px solid #5BC0BE;
    font-size: 1.5em;
    color: white;
}


.solPayDeposit{
  max-width: 200px;
  margin: 20px;
  cursor: pointer;

} 

.solPayDeposit:hover, .coinBaseDeposit:hover{
  border: inset 2px solid #031C80; 
  box-shadow: 0px 0px 10px 4px #6171B1;
}

#solanaQR{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}


  

  #winningSkinDiv{
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    text-align: center;
    width: 300px;
    background-color: #0B132B;
    border: 2px solid black;
    box-shadow: 0px 0px 10px 2px black;
    }

  #POTATODiv{
    border-bottom: 1px solid white;
    font-size: 1.5em;
    color: #8ecae6;
    height: 10%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #081416;
    box-shadow: 0px 0px 10px 2px inset #081416;
  }

  .POTATOBalance{
    color: #8ecae6;
  }


  
  #skinInfoForWinning{
    text-align: center;
    width: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
  }

  #loginReq, #loginSolanaDiv{
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    text-align: left;
    width: 600px;
    background-color: #252F4D;
    border: 1px solid #0B132B;
    font-size: 1.5em;
    height: 300px;
  }

  #loginSolanaDiv{
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    text-align: left;
    width: 600px;
    background-color: #252F4D;
    border: 1px solid #0B132B;
    font-size: 1.5em;
    height: 300px;
    z-index: 100;

  }

  #loginSolanaDivTitle{
    position: absolute;
    top: 0;
    left: 0;
    line-height: 10px;
    font-size: 1.31em;
  }

  #solanaCloseButton{
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bolder;
    text-align: center;
  }

  #phantomLoginDiv{
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    margin-top: 50px;
  }

  #phantomLogintextTerms{
    font-size: 1.31em;
    margin-left: 20px;
  }

 
  #phantomLoginLogoTerms{
    width: 100px;
  }

  #infosectionpsolana{
    text-align: center;
    font-size: 1.3em;
  }

  .loginConfirm{
    padding-bottom: 10px;
    background-color: #0B132B;
    margin-top: -10px;
    font-size: 3em;
    padding: 20px;
  }


  .loginError{
    font-weight: bold;
    color: red;
  }

  #userLoginDivTerms{
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    background-color: #0B132B;
    margin-top: 10px;
  }


  input[type=checkbox] {
    cursor: pointer;
    width: 25px;
    height: 16px;
    border: 2px solid #555555;
    border-radius: 3px;
    background-color: white;

}

.termsPrLabel a{
  color: white;
  font-weight: bolder;
}



  .amountWonPopUP{
    display: inline;
    font-size: 2em;
    color: lightgreen; 
    float: left;
  }

  .skinOddsPopUP{
    font-size: 2em;
    display: inline;
    float: right;
  }

  .skinImagePopUP{
    display: inline;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .skinTypePopUP{
    line-height: 0px;
    display: block;
    opacity: 0.6;
    filter: alpha(opacity = 60); 
  }

  .skinNamePopUP{
    font-weight: bolder;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin:-4px 0 2px 0px;
  }

  .skinConditionPopUP{
    display: block;
    font-weight: bolder;
    text-align: center;
  }



input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


  #depositDiv input[type=number]{
    background: linear-gradient(to right, #1f273a, #1f273a);
    border: 2px solid #1f273a;
    height: 40px;
    box-shadow: 0px 0px 10px 2px #1f273a;
    color: white;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 1em;
    max-width: 600px;
  }

  #depositResponseInfo{
    padding-top: 5px;
    color: red;
    display: block;
    font-weight: bolder;
    font-size: 0.9em;
    font-style: italic;
  }


  #depositAmount{
    height: 60px;
  }



  #outSideCenter{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }



  #topUserOuter{
    padding-bottom: 60px;
    background-color: #1f273a;
    margin-bottom: 20px;
    height: 1vh;
    width: 100vw;
    background-position: center;
  }
  #topUserInfoOutSideProfile{
    display: flex;
    align-items: center;    
    margin: 0px;
    padding: 0px;
  }

  .userLoginDiv{
    width: 150px;
    display: flex;
    flex-direction: row;
    justify-content: right;
    cursor: pointer;
    color: white;
    text-align: center;
    margin-right: 3vw;
  }

  .userLoginLogo, #steamLoginLogoTerms, #solanaLoginLogoTerms{
    width: 40px;
    height: 30px;
    display: inline;
    padding-top: 5px;
    text-align: center;
    margin: 5px;
  }

  .logoutIMG{
    width: 25px;
    height: 20px;
    display: inline;
    margin-left: 15px;
    margin-top: 15px;
    cursor: pointer;
  }

  .userLoginText{
    text-align: center;
    padding: 10px;
    font-size: 1.3em;
    border-radius: 10px;

    background: linear-gradient(117.5deg, rgb(89, 233, 162) 20.5%, rgb(29, 209, 185) 100.2%);



    color: white;
    border: 2px solid limegreen;

  }


  .profileImgAndUserImgOutSideProfile{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: right;
    float: right;
    margin-right: 20px;
  }

  #setTradeURLButton{
    display: none;
  }


  #showMoreSkins{
    text-align: center;
    background-color: #1f273a;
    height: 50px;
    display: none;
    margin-top: -30px;
    cursor: pointer;
  }

  #showMoreSkins p{
    font-size: larger;
    font-weight: bolder;
  }




  .profileImageMenu{
    cursor: pointer;
    background: linear-gradient(#0B132B, #1f273a);
    border: 2px solid #0B132B;
    box-shadow: 0px 0px 10px 2px #0B132B;
    display: inline;
    margin-left: 10px;
    /* margin-top: 10px; */
  }

  #depositOpenSectionButtonOutSideProfile{
    z-index: 3;
    color: white;
    background: linear-gradient(limegreen, darkolivegreen);
    border: 2px solid limegreen;
    box-shadow: 0px 0px 10px 2px limegreen;
    cursor: pointer; 
    width: 40px;
    height: 30px;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 30px;
    display: inline;
  }

  .balanceElementOutSideProfile{
    color: limegreen;
    z-index: 3;
    font-size: 1.5em;
    display: inline;
  }



  .profileMenuTop{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin-top: 15px;
    margin-left: 5px;
  }

  .menuItemCases,
  .menuItemCasesBottom{
    color: white;
    z-index: 3;
    font-size: 1.5em;
    width: 100px;
    display: inline;
    cursor: pointer;
  }
  


  .homeLink{
    color: #5BC0BE;
    text-decoration: none;
    z-index: 3;
    font-size: 1.5em;
    display: inline-block;
    padding: 10px;
    /* margin-right: 20px; */
    background: linear-gradient(#0B132B, #1f273a);
    border: 2px solid #0B132B;
    box-shadow: 0px 0px 10px 2px #0B132B
  }


  


  /* -------- profile div ------ */


  #topUserInfo{
    margin: auto;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #1f273a;
    width: 100vw;
    margin-bottom: 20px;
  }

  #allUserTokensSelect{
    height: 60px;
    width: 100%;
    max-width: 200px;
    background: linear-gradient(to right, #252F4D, #252525);
    border: 2px solid #1f273a;
    color: white;
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    box-shadow: 0px 0px 10px 2px #1f273a;
    font-size: 1.38em;
  }

  #allUserTokensSelect option{
    background-color:   #252525;
  }

  #casePart{
    margin: auto;
    text-align: center;
    padding-bottom: 60px;
    background-color: #1f273a;
    width: 100vw;
    margin-bottom: 5vh;
  }




  #finalOutsidetopOpen{
    background-color: #1f273a;
    margin-bottom: 20px;
    padding-bottom: 20px;
    cursor: default;
    display: block;
  }

  #outSideTop{
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;  
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #outSideTop::-webkit-scrollbar {
    display: none;
  }


  #latestTopOpeningInCase{
    margin-left: auto;
    margin-right: auto;   
    display: flex;
    justify-content: left;
  }

  .skinInfoTop{
    cursor: default;
    z-index: 2;
    min-width: 130px;
  }

  /* The skin with it's case and info */
  

  #allSkinsContainer{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #1f273a;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  #allSlotsInfoContainer{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #1f273a;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  #allSkinsContainerInProfile{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #1f273a;
    margin-bottom: 20px;
    padding-bottom: 40px;
    padding-top: 20px;
  }

  #allSkinsOpened{
    display: block;
  }

  #showSkinTypesDiv{
    padding-left: 3vw;
    margin-bottom: 0px;
    border-bottom: 1px solid #0B132B;
    background-color: #1f273a;
    padding: 20px;
    text-wrap: nowrap;
  }

  #showAllOpenedSkins, #showWithdrawnSkinsOnly{
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    color: white;
    font-size: 1.5em;
  }

  #showAllOpenedSkins{
   border-bottom: 1px solid limegreen;
   color: #45C665;
  }


   .skinContainer, .skinContainerBase{
    text-align: center;
    width: 200px;
    margin: 5px;
    background: linear-gradient(#0B132B, #1f273a);
    border: 2px solid #0B132B;
    box-shadow: 0px 0px 10px 2px #0B132B;
    position: relative;
  } 


  .itemType{
    line-height: 0px;
    display: block;
    opacity: 0.6;
    filter: alpha(opacity = 60); 
  }

  .skinName{
    font-weight: bolder;
    display: block;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin:-4px 0 2px 0px;
}

.slot3match{
  font-weight: bolder;
  display: block;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: greenyellow;
}


.slot2match{
  font-weight: bolder;
  display: block;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 10px;
  opacity: 1;
  color: white;
}


.bottomLineSkin{
  width: 98%;
  position: absolute;
  bottom: 0;
  left: 0;
}






    /* the skin info only */
    .skinInfo{
      position: relative;
      cursor: pointer;
      z-index: 2;
      height: 100%;
    }



    .conditionDiv{
      display: inline-flex;
      height: 130px;
      width: 130px;
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }

  

  
  .profileImgAndUserImg{
    position: relative;
    z-index: 1;
  }

  .profileImage{
    background: linear-gradient(#0B132B, #1f273a);
    border: 2px solid #0B132B;
    box-shadow: 0px 0px 10px 2px #0B132B;
    cursor: pointer;
  }



  .balanceElement{
    color: limegreen;
  }

  #depositOpenSectionButton{
    z-index: 3;
    position: absolute;
    font-size: 2em;
    margin-left: 10px;
    margin-right: auto;
    margin-top: 100px;
    color: white;
    background: linear-gradient(limegreen, darkolivegreen);
    border: 2px solid limegreen;
    box-shadow: 0px 0px 10px 2px limegreen;
    cursor: pointer;
  }




  .totalOpened{
    color: #5e98d9;
  }

  .steamImage{
    z-index: 2;
    width: 50px;
    position: absolute;
    margin-left: -180px;
    margin-right: auto;
    margin-top: 130px;
    cursor: pointer;

  }


  .pendingTrandactionDiv{
    margin-top: 30px;
    background-color:  #1f273a;
    border: 2px solid #0B132B;
    box-shadow: 0px 0px 10px 2px #0B132B;
  }

  #withdrawDivOuter{
    width: 100vw;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
    background-color:  #1f273a;
    border: 2px solid #0B132B;
    box-shadow: 0px 0px 10px 2px #0B132B;
    -ms-overflow-style: none;
    scrollbar-width: none;  
    margin: 0;
    display: block;
    margin-top: 40px;
    max-height: 500px;
  }



  #withdrawDivOuter::-webkit-scrollbar {
    display: none;
  }

  #showWithdrawHistoryButtonDiv{
    display: block;
    text-align: left;
    width: 500px;
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-49%, 0%);
    margin-top: 10vh;
  }


  #showWithdrawHistoryButton{
    display: none;
    color: white;
    background: linear-gradient(#0B132B, #1f273a);
    border: 2px solid #0B132B;
    box-shadow: 0px 0px 10px 2px #0B132B;
    height: 30px;
    margin: 10px;
    text-wrap: nowrap;
  }


  .withdrawMenu{
    display: flex;
    justify-content: space-between;  
    width: 100%;
    padding: 20px;  
}

.wtihdrawalResult{
  margin-bottom: 20px;
}


#statusDIV, #dateDiv, #amountDiv, #reAddressDiv, #tHash{
    margin-right: 20px; 
}

#statusDIV p, #dateDiv p, #amountDiv p, #reAddressDiv p, #tHash p{
    margin-bottom: 20px;
    margin-right: 20px; 

}

/* new skin open section */
#latestOpens{
    display: flex;
    position: relative;
    justify-content: left;
    width: 100vw;
    background-color:  #1f273a;
    border: 2px solid #0B132B;
    box-shadow: 0px 0px 10px 2px #0B132B;
    margin-bottom: 20px;
    overflow:hidden;
    
}

.latestOpenBox{
  position: relative;
  display: inline;
  font-size: 0.8em;
  text-align: center;
  z-index: 1;
	margin: 0px 0px 0.5px 5px;
  width: 150px;
}





.caseInfo{
  position: absolute;
  display: none;
  justify-content: center; 
  align-items: center; 
  top: 0;
  bottom: 0;
  z-index: 10;
  vertical-align: middle;
}

.caseInfoInProfile{
  position: absolute;
  display: none;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-top: 25px;
  vertical-align: middle;
}

#caseImage{
  cursor: pointer;  
  width: 90%;
  max-height: 80%;
  margin-top: -15px;
}

#userOpenImage{
  position: absolute;
  cursor: pointer;
  left: 0;
  top: 31px;
  width: 40px;
  border-radius: 100px;
  border: 1px solid white;
}

.skinInfoLatestAnimationToo{
  animation: append-animate 0.3s linear;
}

.latestOpenBox img{
  width: 100px;
}


@keyframes append-animate {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
  100% {
		transform: translateY(0%);
		opacity: 1;
	}

} 




#latestOpens img{
    display: inline;
}


.skinNameLatest{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    margin:4px 0 5px 0px;
    width: 100px;
    max-width: 100px;
    min-width: 100px;
  }

.skinTypeLatest{
    display: block;
    font-weight: bold;
    margin: 5px 0 2px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
    max-width: 100px;
    min-width: 100px;
}

.userIDLatest{
  display: block;
  font-weight: bold;
  margin: 5px 0 2px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
  max-width: 100px;
  min-width: 100px;
}

.payAmoutLatest{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  font-size: 1.2em;
  margin:4px 0 5px 0px;
  width: 100px;
  max-width: 100px;
  min-width: 100px;
}


#bottomMobileMenu {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  background-color: #0B132B;
  border: 2px solid #1f273a;
  display: none;
  z-index: 1000;
}

.logoImageInMenu{
  width: 80px;
  margin-right: 20px;
  cursor: pointer;
  margin-top: -20px;
}


.mainSection{
  position: relative;
  min-height: 100vh;
  display: none;
}


.footerContainer {
  margin-top: 20px;
  background-color: #1f273a;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 0.1fr 0.1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "about about socials"
    "infosection infosection infosection"; 
    width: 100vw;
    background-position: center;


}



.landingPage{
  display: flex;
    justify-content: center; 
    align-items: center; 
    height: 100vh; /
}

.landingPage img{
  max-width: 100%;
  max-height: 100%;

  animation: grow 2000ms ease-in-out forwards infinite;
}


.winningSlotAnimation{
  animation: pulseSlot 200ms ease-in-out alternate;
}

@keyframes pulseSlot {
  from{
    transform: scale(1);
  }

  to{
    transform: scale(1.2);
  }
}


@keyframes grow {
  from{
    transform: scale(0.5);
  }

  to{
    transform: scale(0.8);
  }
}


.about{
  grid-area: about; 
  font-weight: lighter;
  font-size: small;
  font-style: oblique;
  font-size: 1em;
}

.contractClass{
  color: #00FF99;
  font-size: 1.2em;
}

.infosection{
  grid-area: infosection; 
  height: 20px;
  margin-top: 20px;
  font-size: 0.8em;
  font-weight: lighter;
  font-size: small;
  opacity: 0.7;
  font-style: oblique;  
}

.infosection li{
  font-size: 1.2em;
  font-weight: bold;
  background-color: RGBA(255, 255, 255, 0.1);
  border: 2px solid RGBA(255, 255, 255, 0.1);
  box-shadow: 0px 0px 10px 2px RGBA(255, 255, 255, 0.1);
}



.socials{
  grid-area: socials; 
  padding-top: 10px;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.8em;
  font-weight: lighter;
  font-size: small;
  opacity: 0.7;
  font-style: oblique;
}

.socials img{
  width: 30px;
}

.infosection a{
  text-decoration: none;
  color: white;
}

.socials ul,
.infosection ul{
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.socials li,
.infosection li{
  font-size: 0.8em;
  margin-right: 5px;
  margin-left: 5px;
  float: left;
}





/* faq section */

.faq{
  width: 60vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  padding-bottom: 100px;
}

.collapsible {
  background-color: #1f273a;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;  
  margin-bottom: 10px;
  color: white;
  font-size: 1em;
}

.active, .collapsible:hover {
  background-color: #495A8D;
}

.collapsible:after {
  font-weight: bolder;
  float: right;
  margin-left: 5px;
}


.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #495A8D;
  margin-bottom: 10px;
  font-weight: bold;

}
/* end faq section */


/* privacy policy section */
.privacypolicy{
  width: 50vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  padding-bottom: 100px;
}

.privacyContent{
  width: 100%;
}

.privacypolicy li{
  margin-left: 20px;
}

/* end privacy policy section */


/* begin terms section */
.termsofservice{
  width: 50vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  padding-bottom: 100px;
}
/* end terms section */



#withdrawSkinsFrame{
 background: #1f273a; 
  overflow-y:scroll; 
  margin-left: auto;
  margin-right: auto;   
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;  
  overflow-x: auto;
  white-space: wrap;
  padding: 0 4px;
  justify-content: center;
  padding-bottom: 5vh;
  border: 2px solid #1f273a;
  box-shadow: 0px 0px 10px 2px #1f273a;
}


 #pendingSkinsFrame{
  background: #1f273a; 
   overflow-y:scroll; 
   margin-left: auto;
   margin-right: auto;   
   display: flex;
   flex-wrap: wrap;
   overflow: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;  
   overflow-x: auto;
   white-space: wrap;
   padding: 0 4px;
   justify-content: center;
 }

 #outerWithdrawSkinsFrame{
  background: #1f273a; 
 }

#outerWithdrawSkinsFrameW{
  background: #1f273a; 
  display: none;
 }

 #outerPendingSkinsFrame{
  background: #1f273a; 
  display: none;
  padding: 10px;
 }


 #searchSkins{
  background-color: #1f273a;
  margin: 10px;
  padding: 10px;
  text-align: center;
 }


.skinFrame,.skinFramePending{
  position: relative;
  background: linear-gradient(#0B132B, #1f273a);
  border: 2px solid #0B132B;
  box-shadow: 0px 0px 10px 2px #0B132B;
  max-width: 200px;
  width: 200px;
  text-align: center;
  cursor: default;
  margin: 5px;
}

.skinFrameW{
  position: relative;
  background: linear-gradient(#0B132B, #1f273a);
  border: 2px solid #0B132B;
  box-shadow: 0px 0px 10px 2px #0B132B;
  max-width: 200px;
  width: 200px;
  text-align: center;
  cursor: pointer;
  margin: 5px;
  height: 250px;
  margin-top: 20px;
}


#searchSkins{
  text-align: center;
}

#skinsTitleOnWithdraw{
  text-align: center;
  overflow: auto;
}
.withdrawSkinButtonDiv{
  text-align: center;
  margin-top: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}

.withdrawSkinButton{
  background: linear-gradient(#00FF99, #7EA6D3);
  border: 1px solid #2AE1AC;
  box-shadow: 0px 0px 10px 2px #15F0A3;
  color: white;
  display: block;
  position: absolute; 
  bottom: 0; 
  left: 0;
  right: 0;
  padding: 0px;
  cursor: pointer;
  height: 40px;
}


#withdrawSkinBaseDiv,#withdrawSkinBaseDivPending{
  cursor: default;
  z-index: 2;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100%;
}

.skinFloat{
  display: inline-block;
  align-self: flex-end;
}

.skinNameWithdraw{
  display: block;
  font-weight: bolder;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.skinPriceWithdraw{
  color: lightgreen;
  display: block;
  float: left;
}

.skinImageWithdraw{
  display: block;
  width: 100%;
}


.skinTradeP{
  color: limegreen;
  margin: 5px;
  padding: 5px;
  font-size: larger;
  font-weight: bolder;
  text-decoration: underline;
  cursor: pointer;
}

/* withdraw menu options */

#outerWihdrawOptionsMenu{
  background-color: #1f273a;
  text-align: center;
  height: 80vh;
}

#withdrawOptionsMenu {
  display: flex;
  align-items: center;
  justify-content: center;
}

#wSkinWithdrawDivInner,#wUSDCSkinWithdrawDivInner, #wSOLANASPLWithdrawDivInner{
  text-align: center;
  background: linear-gradient(#0B132B, #1f273a);
  border: 2px solid #0B132B;
  box-shadow: 0px 0px 10px 2px #0B132B;
  color: #5e98d9;
  font-weight: bolder;
  cursor: pointer;
  width: 230px;
  max-width: 230px;
  height: 300px;
  margin: 4px;
  max-height: 300px;
  flex: 30%;
}

#withdrawOptionsMenu img{
  width: 100%;
}

#withdrawMethodsTtileDiv{
  margin:10px;
  padding: 10px;
}


/* slots page */

/* #slotArea{
  width: 500px; 
    height: 500px; 
    background-color: #eee;
    text-align: center;
    line-height: 500px; 
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 0;
}
 */


#slotCover{
  display: flex;
  justify-content: center;
  align-items: center;
}

.outerSlotSection {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -345px;
  z-index: 100;

}

.innerSlotSection {
  background: #fafafa;
  box-shadow: 0px 0px 5px #FF6347;


  width: 100px;
  height: 150px;
  overflow: hidden;

  border-radius: 1ex;
  margin: 1ch;
}

.boxes {
  /* transform: translateY(0); */
  transition: transform 1s ease-in-out;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 3rem;


  float: left;
	margin: 0px 0px 0px 0px;
    width: 150px;
    max-width: 150px;
	height: 188px;
	background-size: 100%;
    background-color:transparent;
    background-repeat: no-repeat;
    background-position: center;
}


#slotButtons{
  display: block;
  text-align: center;
  position: relative;
}

#resultsForspin{
  color: white;
  position: absolute;
  top: -87px;
  left: 50%;
  transform: translate(-50%, -50%);
}

#slotMenuAndRollButton{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0px;
  margin-top: 80px;
  gap: 50px;
}



#runSl{
  background-image: url("/slots/spin.webp");
  background-color: white;
	background-size: 100%;
    background-color:transparent;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    max-width: 50px;
    height: 50px;
    border: 0px;
    cursor: pointer;
    border-radius: 200px;

}

#paymentMenuOpenButton{
  background-image: url("/slots/menuChip.webp");
  background-color: white;
	background-size: 100%;
    background-color:transparent;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    max-width: 50px;
    height: 50px;
    border: 0px;
    cursor: pointer;
    border-radius: 200px;

}

#paymentMenuOpenButton:hover, #runSl:hover{
  box-shadow: 0px 0px 5px #FF6347;
  background-color: rgb(70, 130, 180);
}



#paymentOptionSlot{
  border: 0px;
  width: 90px;
  height: 30px;
}

#slotResultInfoDiv{
  display: flex;
  justify-content: center;
  text-align: center;
  height: 100vh;
  margin-top: 50px;
  font-size: 2em;
}

#betPriceInfoDiv{
  width: 500px;

}

#betAmountLabelInMain{
  font-size: 2em;
}


#resultsForspin{
  font-size: 2em;
}




#betMenu{
  margin: auto;
  width: 80%;
  max-width: 313px;
  border: 3px solid rgb(70, 130, 180);
  padding: 10px;
  text-align: center;

  background-color: #252F4D;
  box-shadow: 0px 0px 10px 2px rgb(70, 130, 180);

  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 50px;
  display: none;
  z-index: 100;
}

/* #balanceTypeLabel, #paymentOptionSlot, #balancAmountLabel, #payAmountField{
  width: 100px; 
  height: 100px; 
  background-color: #f0f0f0;
  border: 1px solid #999; 
  margin: 10px; 
} */


#balanceTypeLabel{
  font-size: 2em;
  display: block;
  margin-top: 20px;
}
#paymentOptionSlot{
  border: 0px;
  width: 120px;
  height: 30px;
  border-radius: 0;
}

#balancAmountLabel{
  margin-top: 60px;
  font-size: 2em;
}

#payAmountField{
  width: 100px;
  font-size: 2em;
  height: 30px;
  text-align: center;
}

#decreaseBtn, #increaseBtn{
  border-radius: 0;
  border: 0px;

  width: 50px;
  height: 50px;
  margin-left: 10px;
  margin-right: 10px;


}




/* end slots page */



  @media only screen and (max-width: 1500px) {
    .case-roller{
        width: 90vw;
    }

    .innerHome{
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .innerHome img{
      max-width: 300px;
    }


    #depositOpenSectionButton{
        font-size: 1.5em;
        margin-left: 2px;
      }


      .caseDiv{
        max-width: 180px;
      }

      .caseDiv img{
        max-width: 180px;
      }

  }


  

  @media only screen and (max-width: 900px) {

    .innerHome{
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .innerHome img{
      max-width: 200px;
    }

    
#betMenu{
  top: 30%;

}

    .menuItemCasesBottom{
      display: inline;
      margin-right: 20px;
      width: 100px;
    }


    #bottomMobileMenu{
      left: -2px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding-bottom: 30px;
      padding-top: 30px;
      background: none;
      height: 1vh;
      background-color: #0B132B;
    }

    
    .caseDiv{
      max-width: 180px;
    }

    .caseDiv img{
      max-width: 180px;
    }

#casesSectionDiv{
  margin-bottom: 20px;
  padding-bottom: 40px;
  padding-top: 20px;
  width: 100vw;
  margin: auto;

}




    .menuItemCases{
      display: none;
    }

    .profileImageMenu{
      margin-right: 3px;
    }

    #depositOpenSectionButtonOutSideProfile{
      width: 23px;
      height: 20px;
      margin-top: 12px;
      margin-right: 5px;
      padding: 0px;
      padding-bottom: 10px;
    }



    .profileImgAndUserImgOutSideProfile{
      padding-top: 10px;
    }


    .faq{
      width: 100vw;
    }

    #createWithdraw,
    #createPromoCode,
    #showWithdrawHistoryButtonDiv{
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 100vw;
      margin-top: 10vh;
}

.privacypolicy{
  width: 100vw;
}

.termsofservice{
  width: 100vw;
}




.userOpenImage{
  width: 10px;
}

#loginReq, #loginSolanaDiv{
  width: 80vw;
  font-size: 1em;
  font-weight: bold;
  height: 300px;
  padding-bottom: 0px;
}

#userLoginDivTerms{
  margin-top: 80px;
}

.skinFrame,.skinFramePending{
  flex: 20%;
  max-width: 20%;
}



}



  
  @media only screen and (max-width: 600px) {

    .innerHome{
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .innerHome img{
      max-width: 150px;
    }


    .case-roller{
      width: 100vw;
  }

    .skinContainerBase{
    max-width: 45%;
    min-width: 45%;
  } 

  #searchSkins input[type=text]
{
  width: 100%;
  margin-bottom: 20px;
  margin: 0px;
  padding: 0px;
  margin-bottom: 10px;
}

  .skinFrameW{
    max-width: 45%;
    min-width: 45%;
  }





  .skinFrame,.skinFramePending{
    flex: 40%;
    max-width: 40%;
  
  }

  #withdrawOptionsMenu {
    width: 100vw;
  }

  #loginReq, #loginSolanaDiv{
    width: 90vw;
    font-size: 1em;
    font-weight: bold;
    height: 300px;
    padding-bottom: 0px;
    text-wrap: nowrap;
  }

  #showAllOpenedSkins, #showWithdrawnSkinsOnly{
    font-size: 1em;
  }




  #depositDiv{
    max-height: 600px;
    width: 100vw;

  }

  .depositCointainerGrid img{
    width: 100%;
    max-width: 130px;
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .depositCointainerGrid {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  display: block;
  height: 100%;
  max-height: 120px;
  border-bottom: 5px solid #0B132B;

  }

  .topDepositInfo{
     margin-top: 130px;
    display: block;
    text-align: center;
    position: relative;
    top: 0;
    left: 0; 
  }

  .coinBaseDeposit{
    display: inline;
    position: relative;
    max-width: 200px;
    margin: 20px;
    margin-bottom: 100px;
    cursor: pointer;
    }

.solPayDeposit{
  position: relative;
  display: inline;
  max-width: 200px;
  margin: 20px;
  cursor: pointer;
  margin-bottom: 190px;
}

#topupTitleDeposit{
  display: none;
}

#closeButtonDeposit, #closeButtonSlotMenu{
  position: absolute;
  top: 0;
  right: 0;
}




.caseDiv{
  max-width: 180px;
  text-align: center;
  margin: 3px;
  margin-bottom: 50px;
  position: relative;
  cursor: pointer;
}

#casesSectionDiv{
  margin-bottom: 20px;
  padding-bottom: 40px;
  padding-top: 20px;
  width: 100vw;
  margin: auto;

}


.footerContainer {
  margin-top: 20px;
  background-color: #1f273a;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 0.1fr 0.15fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "about about socials"
    "infosection infosection infosection"; 
    width: 100vw;
    background-position: center;


}



  }