.case_item {
  position:relative;
  min-height:158px;
  border-radius:13px;
  background:#161920;
  border:1px solid #3c434930;
  width:100%;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  cursor:pointer;
  justify-content:center;
  gap:4px;
  box-sizing:border-box
}
.case_item p {
  color:#fff;
  text-align:center;
  font-size:13px;
  font-style:normal;
  font-weight:400;
  line-height:16px
}
.case_item-price {
  color:#fff;
  font-size:17px;
  font-style:normal;
  font-weight:500;
  line-height:20px
}
.case_item-stars-icon {
  fill:#ffca5a;
  width:18px;
  height:18px;
  margin-right:3px
}
.case_item_name {
  margin-top:10px;
  height:32px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:16px;
  text-overflow:ellipsis
}
.case_item_content {
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-grow:1;
  justify-content:center
}
.case_item tgs-player {
  width:100%;
  height:100%
}
.case_item-img {
  display:flex;
  align-items:center;
  justify-content:center;
  width:90px;
  height:90px;
  margin:20px 0 10px;
  position:relative
}
.case_item_img {
  width:100%;
  height:100%
}
.case_item_webp_container {
  position:relative;
  width:90px;
  height:90px;
  margin:20px 0 10px;
  display:flex;
  align-items:center;
  justify-content:center
}
.case_item_animation_container {
  position:relative;
  width:100%;
  height:100%
}
.case_item_webp,
.case_item_tgs {
  position:absolute;
  top:0;
  left:0;
  width:90px;
  height:90px;
  transition:opacity 1.5s ease
}
.case_item_webp.fade-out {
  opacity:0
}
.case_item_tgs.fade-out {
  opacity:0;
  pointer-events:none
}
.case_item_tgs.fade-in {
  opacity:1;
  pointer-events:auto
}
.case_item-percent {
  position:absolute;
  top:5px;
  right:5px
}
.chance_tooltip-icon {
  width:18px;
  height:18px;
  fill:#3c4349
}
.chance_tooltip {
  visibility:hidden;
  opacity:0;
  width:-webkit-max-content;
  width:max-content;
  background:#20222b;
  color:#fff;
  text-align:center;
  border-radius:5px;
  padding:4px 8px;
  position:absolute;
  bottom:125%;
  right:-5px;
  font-size:14px;
  white-space:nowrap;
  box-shadow:0 2px 8px #0000004d;
  z-index:10;
  border:1px solid #3f3f4b
}
.case_item-percent:hover .chance_tooltip {
  visibility:visible;
  opacity:1
}
.chance_tooltip:before {
  top:100%;
  left:0;
  width:100%;
  height:15px
}
.chance_tooltip:after {
  bottom:-5.5px;
  width:8px;
  height:8px;
  right:8px;
  background-color:#20222b;
  border-bottom:1px solid #3f3f4b;
  border-right:1px solid #3f3f4b;
  transform:rotate(45deg)
}
.chance_tooltip:after,
.chance_tooltip:before {
  content:"";
  position:absolute
}
.case_item_active {
  border:2px solid #6977b9;
  background:#344079
}
.case_item-price-list {
  display:flex;
  align-items:center;
  gap:5px;
  margin:5px 0 39px
}
@media (max-width: 400px) {
  .case_item-price-list {
    flex-direction:column
  }
  .case_item {
    justify-content:center;
    gap:8px
  }
  .case_item_content {
    margin-bottom:10px
  }
}
.case_item-price-list.vertical {
  flex-direction:column;
  gap:2px;
  align-items:center
}
.case_item-price {
  display:flex;
  align-items:center
}
.case_item.gift .case_item-price-list {
  margin-bottom:30px
}
@media only screen and (max-width: 500px) {
  .case_item {
    max-width:100%;
    width:100%;
    max-height:220px
  }
}