:root{
  --bg1: linear-gradient( 90deg,rgb(255, 255, 255) 0%,rgb(255, 255, 255, 80%) 5%,rgba(12, 12, 20, 0) 54%,rgba(250, 250, 250, 50%) 90%,rgb(255, 255, 255) 100% );  
  --bg2: linear-gradient( 90deg,rgb(255, 255, 255) 0%,rgb(255, 255, 255) 5%,rgba(12,12,20,0) 54%,rgb(255, 255, 255) 90%,rgb(255, 255, 255) 100% );
  --bg3: linear-gradient( 90deg,rgb(19, 4, 7) 0%,rgb(19, 4, 7) 4%,rgba(12,12,20,0) 50%,rgb(19, 4, 7) 96%,rgb(19, 4, 7) 100% );
  --bg4: linear-gradient( 90deg,rgb(19, 20, 6) 0%,rgb(19, 20, 6) 4%,rgba(12,12,20,0) 50%,rgb(19, 20, 6) 96%,rgb(19, 20, 6) 100% );
  --bg5: linear-gradient( 90deg,rgb(25, 24, 36) 0%,rgba(25, 24, 36) 4%,rgba(12,12,20,0) 50%,rgba(25, 24, 36) 96%,rgb(25, 24, 36) 100% ) !important;
  --bg6: linear-gradient( 90deg,rgb(26, 25, 25) 0%,rgb(26, 25, 25) 4%,rgba(12,12,20,0) 50%,rgb(26, 25, 25) 96%,rgb(26, 25, 25) 100% );
  --bg7: linear-gradient( 90deg,rgb(23, 25, 32) 0%,rgb(23, 25, 32) 4%,rgba(12,12,20,0) 50%,rgb(23, 25, 32) 96%,rgb(23, 25, 32) 100% );
}


.lootbox-case-window {
 max-width:100%;
 height:max-content;
 position:relative;
 margin-bottom:20px;
 overflow:hidden;
 margin:auto
}
.lootbox-case-window::before {
 width:100%;
 height:100%;
 position:absolute;
 background: var(--bg7);
 left:0;
 z-index:10;
 content:""
}
.lootbox-case-line {
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
 margin:auto;
 width:28px;
 height:100%;
 z-index:10;
}
.lootbox-case-line::before {
 transform:scale(1);
 top:0
}
.lootbox-case-line::after {
 transform:scale(-1);
 bottom:0
}
.lootbox-case-line::before,
.lootbox-case-line::after {
 width:28px;
 height:22px;
 background:url(../images/wheel_of_fortune/arrow_roulette.png);
 position:absolute;
 left:-115px;
 right:0;
 margin:auto;
 content:""
}
.lootbox-case-line-dash {
  width: 0;
  height: 77%;
  position: absolute;
  border: 1px dashed blue;
  top:25px;
  left:-115px;
  right:1px;
  margin:auto;
}

.lootbox-case-spinnable {
 width:max-content;
 position:relative;
 left:35px
}
.list-item {
 position:relative;
 display:inline-block
}
.lootbox-case-item {
 float:left;
 margin-right:3px;
 width:217px;
 height:217px;
 display:flex;
 flex-direction:column;
 justify-content:center;
 background:gray;
 position:relative;
 z-index:9
}
.lootbox-case-item::before {
 width:100%;
 height:100%;
 background:linear-gradient(180deg,#0c0c18 0%,rgba(12,12,26,0.712) 100%);
 position:absolute;
 left:0;
 content:""
}
.lootbox-content {
 height:100%;
 position:relative;
 z-index:1
}
.lootbox-case-item .name {
 height:30px;
 display:flex;
 align-items:center;
 justify-content:center;
 flex-direction:column;
 text-transform:uppercase;
 position:absolute;
 bottom:30px;
 left:0;
 right:0;
 margin:0 auto
}
.lootbox-case-item .name p:nth-child(1) {
 font-size:1.1rem;
 color: #ffffffc7;
}
.lootbox-case-item .name p:nth-child(2) {
 font-size:1.1;
 font-weight:400
}
.lootbox-case-item .image {
 flex:1;
 display:flex;
 align-items:center;
 justify-content:center;
 margin-top:35px
}
.lootbox-case-item .image img {
 max-width:100px;
 max-height:100px
}
.percent_item {
 position:absolute;
 right:10px;
 top:10px;
 color: #ffffffc7;
}
.boxItems {
 margin-top:35px
}
.wonItem {
 border:2px solid green!important;
 box-shadow:0 0 10px rgba(14,26,12,.712)
}
.item-name {
 position:relative;
 z-index:10;
 font-size:.8rem;
 text-align:center
}
.summary_user {
	width: max-content;
}
.summary_user .summary_user_content {
	padding: 0 15px;
	display: flex;
	align-items: center;
}
.summary_user .summary_user_content .user_balance {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
}
.summary_user .summary_user_content .user_balance .coin_box, .summary_user .summary_user_content .user_balance .coin_box2 {
	max-width: 200px;
	padding: 10px;
	position: relative;
	z-index: 10;
	font-size: 1rem;
	font-weight: 500;
}
.summary_user .summary_user_content .user_balance .coin_box::before, .summary_user .summary_user_content .user_balance .coin_box2::before {
	width: 100%;
	height: 80%;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	left: 0;
	transform: skewX(-10deg);
	content: "";
}
.coin_box::before {
	background: linear-gradient( 180deg,rgba(24,22,4,0) 10%,rgb(196,171,62) 200% );
	border: 2px solid #c4ab3e;
}
@media (max-width: 800px) {
  .d-flex {
    flex-direction: column;
  }
}
.mysteryBoxCommon{
  color: gray;  
}
.mysteryBoxCommonBg{
  border: 2px solid gray;  
  background-color: gray; 
}
.mysteryBoxUnCommon{
  color: yellow;  
}
.mysteryBoxUnCommonBg{
  border: 2px solid yellow;  
  background-color: yellow; 
}
.mysteryBoxRare{
  color: blue;  
}
.mysteryBoxRareBg{
  border: 2px solid blue;  
  background-color: blue; 
}
.mysteryBoxEpic{
  color: purple;  
}
.mysteryBoxEpicBg{
  border: 2px solid purple;  
  background-color: purple; 
}
.mysteryBoxLegendary{
  color: orange;  
}
.mysteryBoxLegendaryBg{
  border: 2px solid orange;  
  background-color: orange; 
}
.mysteryBoxMythical{
  color: red;  
}
.mysteryBoxMythicalBg{
   border: 2px solid red;  
  background-color: red; 
}

.sliderm {
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
	height: 130px;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.sliderm::before,
.sliderm::after {
	background: linear-gradient(to right, #101320 0%, rgba(255, 255, 255, 0) 100%);
	content: "";
	height: 130px;
	position: absolute;
	width: 185px;
	z-index: 2;
}

.sliderm::after {
	right: 0;
	top: 0;
	-webkit-transform: rotateZ(180deg);
	transform: rotateZ(180deg);
}

.sliderm::before {
	left: 0;
	top: 0;
}

.sliderm .slide-track {
	display: flex;
	width: calc(250px * 28);
}

.sliderm .slidem {
	width: 122px;
	height: 130px;
	margin-left: 5px;
	text-align: center;
}

.slidem img {}

.box-molde-ac {
	background: url(../images/Mystery_Box/moldes/box-molde-ac.webp);
	background-repeat: no-repeat;
}

.box-molde-ar {
	background: url(../images/Mystery_Box/moldes/box-molde-ar.webp);
	background-repeat: no-repeat;
}

.box-molde-ae {
	background: url(../images/Mystery_Box/moldes/box-molde-ae.webp);
	background-repeat: no-repeat;
}

.box-molde-al {
	background: url(../images/Mystery_Box/moldes/box-molde-al.webp);
	background-repeat: no-repeat;
}

.box-molde-am {
	background: url(../images/Mystery_Box/moldes/box-molde-am.webp);
	background-repeat: no-repeat;
}

.box-molde-log-ac {
	background: url(../images/Mystery_Box/moldes/log/box-molde-log-ac.webp);
}

.box-molde-log-ar {
	background: url(../images/Mystery_Box/moldes/log/box-molde-log-ar.webp);
}

.box-molde-log-ae {
	background: url(../images/Mystery_Box/moldes/log/box-molde-log-ae.webp);
}

.box-molde-log-al {
	background: url(../images/Mystery_Box/moldes/log/box-molde-log-al.webp);
}

.box-molde-log-am {
	background: url(../images/Mystery_Box/moldes/log/box-molde-log-am.webp);
}

@keyframes slideAnimation {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}