.infobox {
  background: #262626;
  color: #fbfbfb;
  font-family: FrizQuadrataC;
  font-size: 14px;
  margin: 0 0 16px;
  width: 304px;
}
.infobox__header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #303030;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 17px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 8px 4px;
  text-shadow: 0 0 2px #000;
  width: 100%;
}
.infobox[data-grade="0"] .infobox__header,
.infobox-reward__item-name[data-grade="0"] {
  color: #fbfbfb;
}
.infobox[data-grade="1"] .infobox__header,
.infobox-reward__item-name[data-grade="1"] {
  color: #8cf801;
}
.infobox[data-grade="2"] .infobox__header,
.infobox-reward__item-name[data-grade="2"] {
  color: #00aaf2;
}
.infobox[data-grade="3"] .infobox__header,
.infobox-reward__item-name[data-grade="3"] {
  color: #c841f4;
}
.infobox[data-grade="4"] .infobox__header,
.infobox-reward__item-name[data-grade="4"] {
  color: #f18d00;
}
.infobox[data-grade="5"] .infobox__header,
.infobox-reward__item-name[data-grade="5"] {
  color: #f95d00;
}
.infobox-wrap {
  padding: 0 8px;
}
.infobox-item {
  background-position: -50px 0;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 70px;
  margin: 4px 0 16px;
  text-shadow: 0 0 2px #000;
}
.infobox[data-grade="0"] .infobox-item {
  background-image: -o-radial-gradient(bottom, ellipse, hsla(0, 0%, 98.4%, .4) 0, hsla(0, 0%, 98.4%, 0) 70%);
  background-image: radial-gradient(ellipse at bottom, hsla(0, 0%, 98.4%, .4) 0, hsla(0, 0%, 98.4%, 0) 70%);
}
.infobox[data-grade="1"] .infobox-item {
  background-image: -o-radial-gradient(bottom, ellipse, rgba(140, 248, 1, .4) 0, rgba(140, 248, 1, 0) 70%);
  background-image: radial-gradient(ellipse at bottom, rgba(140, 248, 1, .4) 0, rgba(140, 248, 1, 0) 70%);
}
.infobox[data-grade="2"] .infobox-item {
  background-image: -o-radial-gradient(bottom, ellipse, rgba(0, 170, 242, .4) 0, rgba(0, 170, 242, 0) 70%);
  background-image: radial-gradient(ellipse at bottom, rgba(0, 170, 242, .4) 0, rgba(0, 170, 242, 0) 70%);
}
.infobox[data-grade="3"] .infobox-item {
  background-image: -o-radial-gradient(bottom, ellipse, rgba(200, 65, 244, .4) 0, rgba(200, 65, 244, 0) 70%);
  background-image: radial-gradient(ellipse at bottom, rgba(200, 65, 244, .4) 0, rgba(200, 65, 244, 0) 70%);
}
.infobox[data-grade="4"] .infobox-item {
  background-image: -o-radial-gradient(bottom, ellipse, rgba(241, 141, 0, .4) 0, rgba(241, 141, 0, 0) 70%);
  background-image: radial-gradient(ellipse at bottom, rgba(241, 141, 0, .4) 0, rgba(241, 141, 0, 0) 70%);
}
.infobox[data-grade="5"] .infobox-item {
  background-image: -o-radial-gradient(bottom, ellipse, rgba(249, 93, 0, .4) 0, rgba(249, 93, 0, 0) 70%);
  background-image: radial-gradient(ellipse at bottom, rgba(249, 93, 0, .4) 0, rgba(249, 93, 0, 0) 70%);
}
.infobox-item__img {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 12px 0 0;
  width: 64px;
}
.infobox-item__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.infobox-info__description {
  color: #dfc578;
  padding: 0 0 16px;
}
.infobox-reward {
  border-top: 1px solid #1c1c1c;
  padding: 8px 0 8px 8px;
}
.infobox-reward__header {
  color: #fbfbfb;
  margin: 0 8px 8px 0;
  text-align: center;
}
.infobox-reward__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 6px 0;
  max-height: 144px;
}
.infobox-reward__warning {
  color: #9e9e9e;
  padding: 4px 0;
  text-align: center;
  width: 100%;
}
.infobox-readmore {
  border-top: 1px solid #1c1c1c;
  display: none;
}
.infobox-readmore a {
  display: block;
  font-size: 14px;
  height: 100%;
  line-height: 40px;
  padding: 0 0 0 96px;
  text-decoration: none;
  width: 100%;
}
.infobox-readmore .infobox-readmore__icon {
  color: #c00;
  display: inline-block;
  margin: 0 0 0 8px;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transition: all .15s linear;
  -o-transition: all .15s linear;
  transition: all .15s linear;
}
.infobox-readmore:hover .infobox-readmore__icon {
  margin: 0 0 0 16px;
}

/* achievement (begin) */
.infobox--achievement .spoiler {
  border: none;
  bottom: 10px;
  position: relative;
}
.infobox--achievement .spoiler__title,
.infobox--achievement .spoiler__content {
  font-family: FrizQuadrataC;
  font-size: 14px;
}
.infobox--achievement .spoiler__title {
  margin: 0;
  padding: 10px 0 10px 35px;
}
.infobox--achievement .spoiler__marker {
  top: 5px;
}
.infobox--achievement .spoiler__content {
  padding: 0 !important;
}
#content .infobox--achievement .infobox__list-obj {
  margin: 0;
}
#content .infobox--achievement .infobox__list-obj li:before {
  color: #dfc578;
  content: "\2605";
  padding: 0 0 0 6px;
}
.infobox--achievement .infobox__list-obj {
  color: #dfc578;
}
/* achievement (end) */

/* honortitle (begin) */
.infobox--honortitle .infobox-item__notice {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.infobox--honortitle .infobox-item__notice-icon {
  margin: 0 4px;
}
/* honortitle (end) */