#History {
  width: 100%;
  height: 100%;
}

#History>ul {
  width: 100%;
  height: 60vh;
  margin-top: 5vh;
  overflow-y: auto;
  z-index: 1;
  padding-right: 2vh;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 8vh black;
}

#History>ul>li {
  height: 8.5714285714vh;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0 2vh;
  transition: 0.1s;
  overflow: hidden;
}

#History>ul>li.selected {
  background-image: linear-gradient(90deg, rgba(100, 0, 0, 0.2), rgba(100, 100, 0, 0.2));
  box-shadow: 0 0 4vh rgba(255, 255, 255, 0.4) inset;
  padding: 0 3vh;
  border-radius: 1vh;
}

#History>ul>li.disabled {
  opacity: 0.5;
}

#History>ul>li>div {
  height: 100%;
  display: flex;
  align-items: center;
  float: left;
}

#History>ul>li>.icon {
  display: block;
  width: 5.1428571429vh;
  height: 5.1428571429vh;
  margin-top: 1.7142857143vh;
  background-image: url(/itemicon/decoPumpkinJackOLantern.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#History>ul>li>.icon>.mask {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.7);
  mask: url(/itemicon/decoPumpkinJackOLantern.png) 50% 10%/100% no-repeat;
  -webkit-mask: url(/itemicon/decoPumpkinJackOLantern.png) 50% 10%/100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
}

#History>ul>li>.quality {
  display: block;
  width: 3vh;
  height: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.7857142857vh;
  margin-left: 2vh;
  font-size: 1rem;
  background-color: rgba(69, 195, 54, 0.4);
  border-radius: 0.5vh;
  opacity: 0.8;
}

#History>ul>li>.name {
  font-size: 1.1rem;
  margin-left: 1.5vh;
}

#History>ul>li>.count {
  margin-left: 1vh;
  font-style: italic;
  color: rgb(222, 255, 222);
  font-size: 0.95em;
}

#History>ul>li>.sellout {
  display: flex;
  align-items: center;
  margin-left: 2vh;
}

#History>ul>li>.sellout>span {
  color: rgba(255, 120, 120, 0.8);
  font-size: 0.9em;
  border: 1px solid rgba(255, 120, 120, 0.8);
  border-radius: 0.5vh;
  padding: 0.2vh 0.5vh;
}

#History>ul>li>.price {
  float: right;
  color: rgb(255, 233, 200);
  font-size: 1.2rem;
  letter-spacing: 0.1vh;
}

#History>ul>li>.price>i {
  display: block;
  width: 3.4285714286vh;
  height: 3.4285714286vh;
  float: left;
  background-image: url(../../Images/SVG/point.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

#History>ul>li>.price>span {
  margin-left: 0.5vh;
}

#History>ul>li>.progress {
  box-shadow: 0 0 7vh rgba(255, 255, 255, 0.5) inset, 0 0 8vh rgba(255, 255, 255, 0.5);
}