/* Basics */
/* Blocks */
/* HR */
.member-header .avatar-border.avatar-border-earth {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-earth img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-earth::after {
    content: "";
    display: block;
    height: 210px;
    width: 210px;
    position: absolute;
    background: url(images/profile/avatar-borders/earth.png);
    background-size: 210px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-fire {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-fire img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-fire::after {
    content: "";
    display: block;
    height: 210px;
    width: 210px;
    position: absolute;
    background: url(images/profile/avatar-borders/fire.png);
    background-size: 210px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-ice {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-ice img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-ice::after {
    content: "";
    display: block;
    height: 210px;
    width: 210px;
    position: absolute;
    background: url(images/profile/avatar-borders/ice.png);
    background-size: 210px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-rune {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-rune img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-rune::after {
    content: "";
    display: block;
    height: 210px;
    width: 210px;
    position: absolute;
    background: url(images/profile/avatar-borders/rune.png);
    background-size: 210px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-water {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-water img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-water::after {
    content: "";
    display: block;
    height: 210px;
    width: 210px;
    position: absolute;
    background: url(images/profile/avatar-borders/water.png);
    background-size: 210px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-golden {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-golden img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-golden::after {
    content: "";
    display: block;
    height: 210px;
    width: 210px;
    position: absolute;
    background: url(images/profile/avatar-borders/golden.png);
    background-size: 210px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-metal {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-metal img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-metal::after {
    content: "";
    display: block;
    height: 210px;
    width: 210px;
    position: absolute;
    background: url(images/profile/avatar-borders/metal.png);
    background-size: 210px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-rock {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-rock img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-rock::after {
    content: "";
    display: block;
    height: 210px;
    width: 210px;
    position: absolute;
    background: url(images/profile/avatar-borders/rock.png);
    background-size: 210px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-wooden {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-wooden img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-wooden::after {
    content: "";
    display: block;
    height: 210px;
    width: 210px;
    position: absolute;
    background: url(images/profile/avatar-borders/wooden.png);
    background-size: 210px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-quantum-rim-red {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-quantum-rim-red img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-quantum-rim-red::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-red.png);
    background-size: 250px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .member-header .avatar-border.avatar-border-quantum-rim-red > img {
    border-radius: 50%;
    width: 150px;
    height: 150px !important;
  }
}
.member-header .avatar-border.avatar-border-quantum-rim-pink {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-quantum-rim-pink img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-quantum-rim-pink::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-pink.png);
    background-size: 250px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .member-header .avatar-border.avatar-border-quantum-rim-pink > img {
    border-radius: 50%;
    width: 150px;
    height: 150px !important;
  }
}
.member-header .avatar-border.avatar-border-quantum-rim-orange {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-quantum-rim-orange img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-quantum-rim-orange::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-orange.png);
    background-size: 250px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .member-header .avatar-border.avatar-border-quantum-rim-orange > img {
    border-radius: 50%;
    width: 150px;
    height: 150px !important;
  }
}
.member-header .avatar-border.avatar-border-quantum-rim-purple {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-quantum-rim-purple img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-quantum-rim-purple::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-purple.png);
    background-size: 250px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .member-header .avatar-border.avatar-border-quantum-rim-purple > img {
    border-radius: 50%;
    width: 150px;
    height: 150px !important;
  }
}
.member-header .avatar-border.avatar-border-quantum-rim-yellow {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-quantum-rim-yellow img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-quantum-rim-yellow::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-yellow.png);
    background-size: 250px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .member-header .avatar-border.avatar-border-quantum-rim-yellow > img {
    border-radius: 50%;
    width: 150px;
    height: 150px !important;
  }
}
.member-header .avatar-border.avatar-border-quantum-rim-blue {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-quantum-rim-blue img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-quantum-rim-blue::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-blue.png);
    background-size: 250px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .member-header .avatar-border.avatar-border-quantum-rim-blue > img {
    border-radius: 50%;
    width: 150px;
    height: 150px !important;
  }
}
.member-header .avatar-border.avatar-border-quantum-rim-green {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-quantum-rim-green img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-quantum-rim-green::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-green.png);
    background-size: 250px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .member-header .avatar-border.avatar-border-quantum-rim-green > img {
    border-radius: 50%;
    width: 150px;
    height: 150px !important;
  }
}
.member-header .avatar-border.avatar-border-quantum-rim-dark-blue {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-quantum-rim-dark-blue img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-quantum-rim-dark-blue::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-dark-blue.png);
    background-size: 250px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .member-header .avatar-border.avatar-border-quantum-rim-dark-blue > img {
    border-radius: 50%;
    width: 150px;
    height: 150px !important;
  }
}
.member-header .avatar-border.avatar-border-golden-ruby {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-golden-ruby img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-golden-ruby::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/golden-ruby.png);
    background-size: 250px;
    top: -90px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-feeling-silvery-blue {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-feeling-silvery-blue img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-feeling-silvery-blue::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/feeling-silvery-blue.png);
    background-size: 250px;
    top: -90px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-golden-jade {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-golden-jade img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-golden-jade::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/golden-jade.png);
    background-size: 250px;
    top: -90px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-golden-azure {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-golden-azure img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-golden-azure::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/golden-azure.png);
    background-size: 250px;
    top: -90px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-golden-azure::after {
  top: -84px;
}
.member-header .avatar-border.avatar-border-golden-jade::after {
  top: -84px;
}
.member-header .avatar-border.avatar-border-feeling-silvery-blue::after {
  top: -87px;
}
.member-header .avatar-border.avatar-border-all-lit-up {
  position: relative;
  display: block;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-all-lit-up img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-all-lit-up::after {
    content: "";
    display: block;
    height: 250px;
    width: 240px;
    position: absolute;
    background: url(images/profile/avatar-borders/all-lit-up.png);
    background-size: 250px;
    top: -44px;
    left: 50%;
    transform: translate(-50%);
  }
  .member-header .avatar-border.avatar-border-all-lit-up > img {
    border-radius: 50%;
    width: 150px;
    height: 150px !important;
  }
}

.forum-posts li.comment .userbit .avatar-border.avatar-border-earth {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-earth::after {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/earth.png);
    background-size: 190px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-fire {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-fire::after {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/fire.png);
    background-size: 190px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-ice {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-ice::after {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/ice.png);
    background-size: 190px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-rune {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-rune::after {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/rune.png);
    background-size: 190px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-water {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-water::after {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/water.png);
    background-size: 190px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-golden {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-golden::after {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/golden.png);
    background-size: 190px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-metal {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-metal::after {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/metal.png);
    background-size: 190px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-rock {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-rock::after {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/rock.png);
    background-size: 190px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-wooden {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-wooden::after {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/wooden.png);
    background-size: 190px;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-red {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-red::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-red.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-red > img {
    border-radius: 50%;
    width: 135px;
    height: 135px;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-pink {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-pink::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-pink.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-pink > img {
    border-radius: 50%;
    width: 135px;
    height: 135px;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-orange {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-orange::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-orange.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-orange > img {
    border-radius: 50%;
    width: 135px;
    height: 135px;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-purple {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-purple::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-purple.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-purple > img {
    border-radius: 50%;
    width: 135px;
    height: 135px;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-yellow {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-yellow::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-yellow.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-yellow > img {
    border-radius: 50%;
    width: 135px;
    height: 135px;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-blue {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-blue::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-blue.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-blue > img {
    border-radius: 50%;
    width: 135px;
    height: 135px;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-green {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-green::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-green.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-green > img {
    border-radius: 50%;
    width: 135px;
    height: 135px;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-dark-blue {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-dark-blue::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/quantum-rim-dark-blue.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-quantum-rim-dark-blue > img {
    border-radius: 50%;
    width: 135px;
    height: 135px;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-golden-ruby {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-golden-ruby::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/golden-ruby.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-feeling-silvery-blue {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-feeling-silvery-blue::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/feeling-silvery-blue.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-golden-jade {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-golden-jade::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/golden-jade.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-golden-azure {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-golden-azure::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/golden-azure.png);
    background-size: 225px;
    top: -65px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-golden-azure::after {
  top: -80px;
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-golden-azure > img {
  width: 120px;
  height: 120px;
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-golden-jade::after {
  top: -92px;
  height: 260px;
  width: 260px;
  background-size: 260px;
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-feeling-silvery-blue::after {
  top: -81px;
  height: 230px;
  width: 230px;
  background-size: 238px;
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-all-lit-up {
  position: relative;
  display: block;
  margin: 15px auto;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-all-lit-up::after {
    content: "";
    display: block;
    height: 225px;
    width: 225px;
    position: absolute;
    background: url(images/profile/avatar-borders/all-lit-up.png);
    background-size: 225px;
    top: -38px;
    left: 50%;
    transform: translate(-50%);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-all-lit-up > img {
    border-radius: 50%;
  }
}

/* roboto-300 - latin-ext_latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(""), url("fonts/roboto-v29-latin-ext_latin-300.woff2") format("woff2"), url("fonts/roboto-v29-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-regular - latin-ext_latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("fonts/roboto-v29-latin-ext_latin-regular.woff2") format("woff2"), url("fonts/roboto-v29-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-500 - latin-ext_latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(""), url("fonts/roboto-v29-latin-ext_latin-500.woff2") format("woff2"), url("fonts/roboto-v29-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700 - latin-ext_latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("fonts/roboto-v29-latin-ext_latin-700.woff2") format("woff2"), url("fonts/roboto-v29-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-900 - latin-ext_latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local(""), url("fonts/roboto-v29-latin-ext_latin-900.woff2") format("woff2"), url("fonts/roboto-v29-latin-ext_latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-300 - latin-ext_latin */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(""), url("fonts/roboto-condensed-v19-latin-ext_latin-300.woff2") format("woff2"), url("fonts/roboto-condensed-v19-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-regular - latin-ext_latin */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("fonts/roboto-condensed-v19-latin-ext_latin-regular.woff2") format("woff2"), url("fonts/roboto-condensed-v19-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-700 - latin-ext_latin */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("fonts/roboto-condensed-v19-latin-ext_latin-700.woff2") format("woff2"), url("fonts/roboto-condensed-v19-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* noto-sans-regular - latin-ext_latin */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("fonts/noto-sans-v21-latin-ext_latin-regular.woff2") format("woff2"), url("fonts/noto-sans-v21-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* noto-sans-700 - latin-ext_latin */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("fonts/noto-sans-v21-latin-ext_latin-700.woff2") format("woff2"), url("fonts/noto-sans-v21-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
h6 {
  font-size: 19px;
}

h5 {
  font-size: 21px;
}

h4 {
  font-size: 23px;
}

h3 {
  font-size: 25px;
}

h2 {
  font-size: 27px;
}

h1 {
  font-size: 29px;
}

li.logo img {
  height: 100px;
}

h6, h5, h4, h3, h2, h1 {
  margin-top: 0;
  margin-bottom: 15px;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
h6, h6 a, h6 a:visited, h5, h5 a, h5 a:visited, h4, h4 a, h4 a:visited, h3, h3 a, h3 a:visited, h2, h2 a, h2 a:visited, h1, h1 a, h1 a:visited {
  color: var(--heading-color);
  text-decoration: none;
  font-weight: 400;
}

.block header h1, .block header h2, .block header h3, .block header h4 {
  padding-left: 10px;
  padding-top: 5px;
  color: var(--font-color);
}

.grid-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 10px;
}
.grid-blocks .block + .block {
  margin-top: 0;
}

section.articles h1 a, section.articles h2 a, section.articles h3 a, section.articles h4 a {
  color: var(--font-color);
}

p {
  margin: 1.05rem 0;
  word-spacing: 0.06em;
}
p:first-child {
  margin-top: 0;
}

strong, b {
  font-weight: 500;
}

* {
  box-sizing: border-box;
}

.content-wrap {
  max-width: 1400px;
  margin: 0 auto;
}
.content-wrap.ultrawide {
  max-width: 100%;
}

html {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--site-background);
  font-size: 17px;
  line-height: 1.7;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-display: swap;
  color: var(--font-color);
  display: flex;
  flex-direction: column;
  font-weight: 300;
  width: 100%;
  min-height: 100%;
}
body main {
  flex-grow: 1;
  flex-shrink: 0;
}
@media screen and (max-width: 1200px) {
  body main {
    margin-top: 10px;
  }
}

a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 500;
}
a:visited {
  color: var(--link-visited-color);
}
a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}
a.set-icon-link::before {
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: bottom;
  content: "";
  background-color: #FEFEFE;
  mask: url(images/hearth/set-icons/set-basic.svg) no-repeat;
  mask-image: url(images/hearth/set-icons/set-basic.svg) no-repeat;
  -webkit-mask: url(images/hearth/set-icons/set-basic.svg) no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  margin-right: 5px;
}
a.set-icon-link-large::before {
  width: 64px;
  height: 64px;
  margin-right: 0px;
}
a.set-icon-link-medium::before {
  width: 40px;
  height: 40px;
  margin-right: 0px;
}
a.region-icon-link:before {
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: bottom;
  content: "";
  margin-right: 5px;
}
a.region-icon-link.region-demacia:before {
  background: url(images/runeterra/card/region/demacia.png) no-repeat;
  background-size: cover;
}
a.region-icon-link.region-freljord:before {
  background: url(images/runeterra/card/region/freljord.png) no-repeat;
  background-size: cover;
}
a.region-icon-link.region-ionia:before {
  background: url(images/runeterra/card/region/ionia.png) no-repeat;
  background-size: cover;
}
a.region-icon-link.region-noxus:before {
  background: url(images/runeterra/card/region/noxus.png) no-repeat;
  background-size: cover;
}
a.region-icon-link.region-piltover-zaun:before {
  background: url(images/runeterra/card/region/piltover-zaun.png) no-repeat;
  background-size: cover;
}
a.region-icon-link.region-shadow-isles:before {
  background: url(images/runeterra/card/region/shadow-isles.png) no-repeat;
  background-size: cover;
}
a.region-icon-link.region-bilgewater:before {
  background: url(images/runeterra/card/region/bilgewater.png) no-repeat;
  background-size: cover;
}
a.region-icon-link.region-targon:before {
  background: url(images/runeterra/card/region/targon.png) no-repeat;
  background-size: cover;
}
a.region-icon-link.region-shurima:before {
  background: url(images/runeterra/card/region/shurima.png) no-repeat;
  background-size: cover;
}
a.region-icon-link.region-bandle-city:before {
  background: url(images/runeterra/card/region/bandle-city.png) no-repeat;
  background-size: cover;
}
a.card-tooltip {
  font-weight: 600;
}
a.discuss {
  display: inline-block;
  background: #0085ba;
  padding: 6px 10px;
  border-radius: 5px;
  margin: 10px 0 0 6px;
  color: #fff;
}
a.discuss:hover {
  background: #36b5c6;
}
a.set-basic::before {
  mask-image: url("images/hearth/set-icons/set-basic.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-basic.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #a1bdb8;
}
a.set-classic::before {
  mask-image: url("images/hearth/set-icons/set-classic.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-classic.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #2f8eb4;
}
a.set-legacy::before {
  mask-image: url("images/hearth/set-icons/set-legacy.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-legacy.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #afd3e0;
}
a.set-hall-of-fame::before {
  mask-image: url("images/hearth/set-icons/set-hall-of-fame.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-hall-of-fame.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #e9e281;
}
a.set-curse-of-naxxramas::before {
  mask-image: url("images/hearth/set-icons/set-naxx.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-naxx.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #00a870;
}
a.set-goblins-vs-gnomes::before {
  mask-image: url("images/hearth/set-icons/set-gvg.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-gvg.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #787779;
}
a.set-blackrock-mountain::before {
  mask-image: url("images/hearth/set-icons/set-brm.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-brm.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #ffa34d;
}
a.set-the-grand-tournament::before {
  mask-image: url("images/hearth/set-icons/set-tgt.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-tgt.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #beaed8;
}
a.set-league-of-explorers::before {
  mask-image: url("images/hearth/set-icons/set-loe.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-loe.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #8f752f;
}
a.set-whispers-of-the-old-gods::before {
  mask-image: url("images/hearth/set-icons/set-wog.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-wog.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #5f5668;
}
a.set-one-night-in-karazhan::before {
  mask-image: url("images/hearth/set-icons/set-kara.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-kara.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #d868ad;
}
a.set-mean-streets-of-gadgetzan::before {
  mask-image: url("images/hearth/set-icons/set-msg.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-msg.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #e04747;
}
a.set-journey-to-ungoro::before {
  mask-image: url("images/hearth/set-icons/set-ung.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-ung.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #a16f25;
}
a.set-knights-of-the-frozen-throne::before {
  mask-image: url("images/hearth/set-icons/set-kft.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-kft.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #3989d4;
}
a.set-kobolds-and-catacombs::before {
  mask-image: url("images/hearth/set-icons/set-knc.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-knc.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #e09249;
}
a.set-the-witchwood::before {
  mask-image: url("images/hearth/set-icons/set-ww.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-ww.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #0a7567;
}
a.set-the-boomsday-project::before {
  mask-image: url("images/hearth/set-icons/set-boomsday.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-boomsday.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #ba62dd;
}
a.set-rastakhans-rumble::before {
  mask-image: url("images/hearth/set-icons/set-rr.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-rr.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #22c064;
}
a.set-rise-of-shadows::before {
  mask-image: url("images/hearth/set-icons/set-shadows.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-shadows.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #d613fd;
}
a.set-saviors-of-uldum::before {
  mask-image: url("images/hearth/set-icons/set-uldum.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-uldum.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #c9bb70;
}
a.set-descent-of-dragons::before {
  mask-image: url("images/hearth/set-icons/set-descent.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-descent.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #287ecf;
}
a.set-galakronds-awakening::before {
  mask-image: url("images/hearth/set-icons/set-galakrond.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-galakrond.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #287ecf;
}
a.set-demon-hunter-initiate::before {
  mask-image: url("images/hearth/set-icons/set-demonhunter.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-demonhunter.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #13fd9b;
}
a.set-ashes-of-outland::before {
  mask-image: url("images/hearth/set-icons/set-outland.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-outland.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #39c545;
}
a.set-scholomance-academy::before {
  mask-image: url("images/hearth/set-icons/set-scholomance-academy.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-scholomance-academy.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #ddc146;
}
a.set-madness-at-the-darkmoon-faire::before {
  mask-image: url("images/hearth/set-icons/set-madness-at-the-darkmoon-faire.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-madness-at-the-darkmoon-faire.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #c458bf;
}
a.set-core-2021::before {
  mask-image: url("images/hearth/set-icons/set-core-2021.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-core-2021.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #2db3c5;
}
a.set-forged-in-the-barrens::before {
  mask-image: url("images/hearth/set-icons/set-barrens.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-barrens.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #be3838;
}
a.set-united-in-stormwind::before {
  mask-image: url("images/hearth/set-icons/set-stormwind.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-stormwind.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #3882be;
}
a.set-fractured-in-alterac-valley::before {
  mask-image: url("images/hearth/set-icons/set-alterac.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-alterac.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #78bbf1;
}
a.set-core-2022::before {
  mask-image: url("images/hearth/set-icons/set-core-2022.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-core-2022.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #2db3c5;
}
a.set-voyage-to-the-sunken-city::before {
  mask-image: url("images/hearth/set-icons/set-sunken-city.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-sunken-city.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #4fe9d4;
}
a.set-murder-at-castle-nathria::before {
  mask-image: url("images/hearth/set-icons/set-castle-nathria.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-castle-nathria.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #e9544f;
}
a.set-march-of-the-lich-king::before {
  mask-image: url("images/hearth/set-icons/set-lich-king.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-lich-king.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #4f9ce9;
}
a.set-year-of-the-wolf-core-set::before {
  mask-image: url("images/hearth/set-icons/set-wolf.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-wolf.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #2d8dc5;
}
a.set-festival-of-legends::before {
  mask-image: url("images/hearth/set-icons/set-festival-of-legends.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-festival-of-legends.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #c58b2d;
}
a.set-titans::before {
  mask-image: url("images/hearth/set-icons/set-titans.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-titans.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #af9c7d;
}
a.set-showdown-in-the-badlands::before {
  mask-image: url("images/hearth/set-icons/set-showdown-in-the-badlands.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-showdown-in-the-badlands.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #d69c1e;
}
a.set-year-of-the-pegasus-core-set::before {
  mask-image: url("images/hearth/set-icons/set-pegasus.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-pegasus.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #debced;
}
a.set-whizbangs-workshop::before {
  mask-image: url("images/hearth/set-icons/set-whizbangs-workshop.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-whizbangs-workshop.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #ad41ff;
}
a.set-perils-in-paradise::before {
  mask-image: url("images/hearth/set-icons/set-perils-in-paradise.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-perils-in-paradise.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #41ffdc;
}
a.set-the-great-dark-beyond::before {
  mask-image: url("images/hearth/set-icons/set-the-great-dark-beyond.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-the-great-dark-beyond.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #9a41ff;
}
a.set-year-of-the-raptor-core-set::before {
  mask-image: url("images/hearth/set-icons/set-raptor.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-raptor.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #488ecf;
}
a.set-into-the-emerald-dream::before {
  mask-image: url("images/hearth/set-icons/set-into-the-emerald-dream.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-into-the-emerald-dream.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #52cf41;
}
a.set-the-lost-city-of-ungoro::before {
  mask-image: url("images/hearth/set-icons/set-the-lost-city-of-ungoro.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-the-lost-city-of-ungoro.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #d1ad41;
}
a.set-across-the-timeways::before {
  mask-image: url("images/hearth/set-icons/set-across-the-timeways.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/set-across-the-timeways.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #84c5d7;
}
a.year-dragon::before {
  mask-image: url("images/hearth/set-icons/rotation-dragon.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/rotation-dragon.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #488ecf;
}
a.year-gryphon::before {
  mask-image: url("images/hearth/set-icons/rotation-gryphon.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/rotation-gryphon.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #488ecf;
}
a.year-hydra::before {
  mask-image: url("images/hearth/set-icons/rotation-hydra.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/rotation-hydra.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #488ecf;
}
a.year-wolf::before {
  mask-image: url("images/hearth/set-icons/rotation-wolf.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/rotation-wolf.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #488ecf;
}
a.year-pegasus::before {
  mask-image: url("images/hearth/set-icons/rotation-pegasus.svg") no-repeat;
  -webkit-mask: url("images/hearth/set-icons/rotation-pegasus.svg") no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: #debced;
}

/* Special Mobile-Only Info Helper */
.mobile-data {
  display: none;
}

.content-deleted {
  opacity: 0.7;
}
.content-deleted:before {
  content: "[DELETED]";
  display: inline-block;
  color: #DF4444;
  margin-right: 10px;
}

section.site-content.no-min-height {
  min-height: 0;
}

section.site-content.fancy-expansion-header {
  padding-top: 180px;
  background-position: top center;
  background-color: var(--site-background-dark);
  background-repeat: no-repeat;
}
section.site-content.fancy-expansion-header.header-basic {
  background-image: url(images/cms/headers/basic.jpg);
}
section.site-content.fancy-expansion-header.header-classic {
  background-image: url(images/cms/headers/classic.jpg);
}
section.site-content.fancy-expansion-header.header-hall-of-fame {
  background-image: url(images/cms/headers/hall-of-fame.jpg);
}
section.site-content.fancy-expansion-header.header-curse-of-naxxramas {
  background-image: url(images/cms/headers/curse-of-naxxramas.jpg);
}
section.site-content.fancy-expansion-header.header-goblins-vs-gnomes {
  background-image: url(images/cms/headers/goblins-vs-gnomes.jpg);
}
section.site-content.fancy-expansion-header.header-blackrock-mountain {
  background-image: url(images/cms/headers/blackrock-mountain.jpg);
}
section.site-content.fancy-expansion-header.header-the-grand-tournament {
  background-image: url(images/cms/headers/the-grand-tournament.jpg);
}
section.site-content.fancy-expansion-header.header-league-of-explorers {
  background-image: url(images/cms/headers/league-of-explorers.jpg);
}
section.site-content.fancy-expansion-header.header-whispers-of-the-old-gods {
  background-image: url(images/cms/headers/whispers-of-the-old-gods.jpg);
}
section.site-content.fancy-expansion-header.header-one-night-in-karazhan {
  background-image: url(images/cms/headers/one-night-in-karazhan.jpg);
}
section.site-content.fancy-expansion-header.header-mean-streets-of-gadgetzan {
  background-image: url(images/cms/headers/mean-streets-of-gadgetzan.jpg);
}
section.site-content.fancy-expansion-header.header-journey-to-ungoro {
  background-image: url(images/cms/headers/journey-to-ungoro.jpg);
}
section.site-content.fancy-expansion-header.header-knights-of-the-frozen-throne {
  background-image: url(images/cms/headers/knights-of-the-frozen-throne.jpg);
}
section.site-content.fancy-expansion-header.header-kobolds-and-catacombs {
  background-image: url(images/cms/headers/kobolds-and-catacombs.jpg);
}
section.site-content.fancy-expansion-header.header-the-witchwood {
  background-image: url(images/cms/headers/the-witchwood.jpg);
}
section.site-content.fancy-expansion-header.header-the-boomsday-project {
  background-image: url(images/cms/headers/the-boomsday-project.jpg);
}
section.site-content.fancy-expansion-header.header-rastakhans-rumble {
  background-image: url(images/cms/headers/rastakhans-rumble.jpg);
}
section.site-content.fancy-expansion-header.header-rise-of-shadows {
  background-image: url(images/cms/headers/rise-of-shadows.jpg);
}
section.site-content.fancy-expansion-header.header-saviors-of-uldum {
  background-image: url(images/cms/headers/saviors-of-uldum.jpg);
}
section.site-content.fancy-expansion-header.header-descent-of-dragons {
  background-image: url(images/cms/headers/descent-of-dragons.jpg);
}
section.site-content.fancy-expansion-header.header-galakronds-awakening {
  background-image: url(images/cms/headers/galakronds-awakening.jpg);
}
section.site-content.fancy-expansion-header.header-ashes-of-outland {
  background-image: url(images/cms/headers/ashes-of-outland.jpg);
}
section.site-content.fancy-expansion-header.header-demon-hunter-initiate {
  background-image: url(images/cms/headers/demon-hunter-initiate.jpg);
}
section.site-content.fancy-expansion-header.header-scholomance-academy {
  background-image: url(images/cms/headers/scholomance-academy.jpg);
}
section.site-content.fancy-expansion-header.header-madness-at-the-darkmoon-faire {
  background-image: url(images/cms/headers/madness-at-the-darkmoon-faire.jpg);
}
section.site-content.fancy-expansion-header.header-forged-in-the-barrens {
  background-image: url(images/cms/headers/forged-in-the-barrens.jpg);
}
section.site-content.fancy-expansion-header.header-united-in-stormwind {
  background-image: url(images/cms/headers/united-in-stormwind.jpg);
}
section.site-content.fancy-expansion-header.header-fractured-in-alterac-valley {
  background-image: url(images/cms/headers/fractured-in-alterac-valley.jpg);
}
section.site-content.fancy-expansion-header.header-voyage-to-the-sunken-city {
  background-image: url(images/cms/headers/voyage-to-the-sunken-city.jpg);
}
section.site-content.fancy-expansion-header.header-murder-at-castle-nathria {
  background-image: url(images/cms/headers/murder-at-castle-nathria.jpg);
}
section.site-content.fancy-expansion-header.header-naxxramas {
  background-image: url(images/cms/headers/naxxramas.jpg);
}
section.site-content.fancy-expansion-header.header-blackrock mountain {
  background-image: url(images/cms/headers/blackrock mountain.jpg);
}
section.site-content.fancy-expansion-header.header-league-of-explorers {
  background-image: url(images/cms/headers/league-of-explorers.jpg);
}
section.site-content.fancy-expansion-header.header-karazhan {
  background-image: url(images/cms/headers/karazhan.jpg);
}
section.site-content.fancy-expansion-header.header-icecrown-citadel {
  background-image: url(images/cms/headers/icecrown-citadel.jpg);
}
section.site-content.fancy-expansion-header.header-dungeon-run {
  background-image: url(images/cms/headers/dungeon-run.jpg);
}
section.site-content.fancy-expansion-header.header-monster-hunt {
  background-image: url(images/cms/headers/monster-hunt.jpg);
}
section.site-content.fancy-expansion-header.header-puzzle-lab {
  background-image: url(images/cms/headers/puzzle-lab.jpg);
}
section.site-content.fancy-expansion-header.header-rumble-run {
  background-image: url(images/cms/headers/rumble-run.jpg);
}
section.site-content.fancy-expansion-header.header-rastakhans-rumble {
  background-image: url(images/cms/headers/rastakhans-rumble.jpg);
}
section.site-content.fancy-expansion-header.header-the-dalaran-heist {
  background-image: url(images/cms/headers/the-dalaran-heist.jpg);
}
section.site-content.fancy-expansion-header.header-tombs-of-terror {
  background-image: url(images/cms/headers/tombs-of-terror.jpg);
}
section.site-content.fancy-expansion-header.header-galakronds-awakening {
  background-image: url(images/cms/headers/galakronds-awakening.jpg);
}
section.site-content.fancy-expansion-header.header-trial-by-felfire {
  background-image: url(images/cms/headers/trial-by-felfire.jpg);
}
section.site-content.fancy-expansion-header.header-trial-by-felfire-challenges {
  background-image: url(images/cms/headers/trial-by-felfire-challenges.jpg);
}
section.site-content.fancy-expansion-header.header-runeterra-set-1 {
  background-image: url(images/cms/headers/runeterra/set-1.jpg);
}
section.site-content.fancy-expansion-header.header-runeterra-foundations {
  background-image: url(images/cms/headers/runeterra/foundations.jpg);
}
section.site-content.fancy-expansion-header.header-runeterra-rising-tides {
  background-image: url(images/cms/headers/runeterra/rising-tides.jpg);
}
section.site-content.fancy-expansion-header.header-runeterra-call-of-the-mountain {
  background-image: url(images/cms/headers/runeterra/call-of-the-mountain.jpg);
}
section.site-content.fancy-expansion-header.header-runeterra-monuments-of-power {
  background-image: url(images/cms/headers/runeterra/monuments-of-power.jpg);
}
section.site-content.fancy-expansion-header.header-runeterra-empires-of-the-ascended {
  background-image: url(images/cms/headers/runeterra/empires-of-the-ascended.jpg);
}
section.site-content.fancy-expansion-header.header-runeterra-beyond-the-bandlewood {
  background-image: url(images/cms/headers/runeterra/beyond-the-bandlewood.jpg);
}
section.site-content.fancy-expansion-header.header-mythgard-the-winter-war {
  background-image: url(images/cms/headers/mythgard/the-winter-war.jpg);
}
section.site-content.fancy-expansion-header.header-snap- {
  background-image: url(images/cms/headers/snap/default.jpg);
}
section.site-content.fancy-expansion-header.header-tavern-brawl {
  background-image: url(images/cms/headers/tavern-brawl.jpg);
}
section.site-content.fancy-expansion-header.header-battlegrounds {
  background-image: url(images/cms/headers/battlegrounds.jpg);
}
section.site-content.fancy-expansion-header.header-hero-skins {
  background-image: url(images/cms/headers/hero-skins.jpg);
}

hr {
  border: 1px solid var(--hr-color);
  margin-bottom: 20px;
}

body.fluffysite.fluffysite-game-community header.site {
  background: url("images/headers/header-site.webp") bottom center no-repeat;
}
body.fluffysite.fluffysite-game-hearthstone header.site {
  background: url("images/headers/header-badlands.webp") bottom center no-repeat;
}
body.fluffysite.fluffysite-game-mercenaries header.site {
  background: url("images/headers/header-mercenaries.webp") bottom center no-repeat;
}
body.fluffysite.fluffysite-game-runeterra header.site {
  background: url("images/headers/header-runeterra-bandlewood.webp") bottom center no-repeat;
}
body.fluffysite.fluffysite-game-magic header.site {
  background: url("images/headers/header-magic-theros.webp") bottom center no-repeat;
}
body.fluffysite.fluffysite-game-mythgard header.site {
  background: url("images/headers/header-mythgard.webp") bottom center no-repeat;
}
body.fluffysite.fluffysite-game-yugioh header.site {
  background: url("images/headers/header-yugioh.webp") bottom center no-repeat;
}
body.fluffysite.fluffysite-game-snap header.site {
  background: url("images/headers/header-snap.webp") bottom center no-repeat;
}
body.fluffysite.fluffysite-game-pokemon header.site {
  background: url("images/headers/header-pokemon.webp") bottom center no-repeat;
}
body.fluffysite.fluffysite-game-carbs header.site {
  background: url("images/headers/header-carbs.webp") bottom center no-repeat;
}

header.site {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
header.site.no-hide {
  margin-bottom: 70px;
}
header.site .menu-header {
  display: none;
  font-size: 22px;
  padding: 10px;
}
header.site .menu-header #nav-toggle.open {
  color: var(--link-color);
}
header.site .menu-header .logo {
  flex-grow: 1;
}
header.site .header-above-nav {
  height: 140px;
}
header.site .header-above-nav ul {
  padding-left: 0;
  align-content: center;
  height: 100%;
}
header.site nav.nav {
  background-image: linear-gradient(to top, #1f2024, #262d31);
}
header.site ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  color: #e6e2df;
  flex-wrap: wrap;
  justify-content: flex-start;
}
header.site .logo {
  margin-right: auto;
}
@media screen and (max-width: 950px) {
  header.site .logo img {
    display: none;
  }
}
header.site .search {
  align-self: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  margin-left: 30px;
}
header.site .search button {
  height: 45px;
  margin-top: 0 !important;
  height: 45px;
  margin-top: 0 !important;
}
header.site .social {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.8);
  padding: 17px;
  border-radius: 5px;
  align-self: center;
}
header.site .social li + li {
  margin-left: 30px;
}
header.site .social i {
  opacity: 0.9;
}
header.site .social a, header.site .social a:visited {
  color: rgba(255, 255, 255, 0.9);
}
header.site .social a:hover .fa-twitter {
  color: #1DA1F2;
}
header.site .social a:hover .fa-facebook-f {
  color: #3C5A99;
}
header.site .social a:hover .fa-discord {
  color: #7289DA;
}
header.site .header-top-bar {
  background-color: rgba(19, 21, 23, 0.941);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  height: 60px;
  margin-bottom: 80px;
}
@media screen and (max-width: 600px) {
  header.site .header-above-nav {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  header.site .header-above-nav .social {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  header.site .header-above-nav {
    height: 90px;
  }
}
@media screen and (max-width: 1200px) {
  header.site .header-top-bar {
    margin-bottom: 0;
    height: 120px;
    padding: 0 10px;
  }
  header.site .menu-header {
    display: flex;
    background-image: linear-gradient(to top, #1f2024, #262d31);
    position: fixed;
    top: 0;
    width: 100%;
  }
  header.site .menu-contents {
    display: none;
    text-align: right;
  }
  header.site .menu-contents.open {
    display: block;
    position: fixed;
    right: 0;
    top: 43px;
    min-width: 250px;
  }
  header.site ul.site-nav {
    flex-direction: column;
  }
  header.site ul.site-nav li {
    padding: 10px;
  }
  header.site ul.site-nav li a {
    padding: 10px;
  }
}

nav.nav {
  text-transform: uppercase;
  font-size: 90%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  position: relative;
}
nav.nav ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding-left: 0;
}
@media screen and (min-width: 1201px) {
  nav.nav ul {
    align-items: center;
  }
}
nav.nav li a {
  padding: 20px 20px 15px;
  color: #e6e2df;
  font-weight: normal;
  display: block;
}
nav.nav li a:hover {
  color: #c76e29;
}
@media screen and (min-width: 1201px) {
  nav.nav li.home a {
    font-size: 0;
    background: url(images/out-of-cards-beta-logo.png);
    background-size: 100%;
    background-position: 0;
    background-repeat: no-repeat;
    width: 180px;
    margin-right: 10px;
  }
  nav.nav li h1 {
    margin-bottom: 0;
  }
}
nav.nav li.subnav {
  position: relative;
  border-bottom: 5px solid transparent;
}
nav.nav li.subnav div.nav-menu {
  display: none;
  position: absolute;
  top: 103px;
  z-index: 9900;
  text-transform: none;
}
nav.nav li.subnav div.nav-menu ul {
  background: rgb(29, 28, 28);
  padding: 0 15px;
  display: block;
}
nav.nav li.subnav div.nav-menu ul li {
  display: block;
}
nav.nav li.subnav div.nav-menu ul li a {
  display: block;
  padding: 10px 0;
  min-width: 190px;
}
nav.nav li.subnav div.nav-menu ul li + li {
  border-top: 1px solid #212528;
}
nav.nav li.subnav div.nav-menu.no-hide {
  display: block;
  z-index: 9800;
}
nav.nav li.subnav:hover, nav.nav li.subnav:focus {
  border-color: var(--button-bg);
}
nav.nav li.subnav:hover div.nav-menu, nav.nav li.subnav:focus div.nav-menu {
  display: block;
}
nav.nav li.subnav:focus-within div.nav-menu {
  display: block;
}
nav.nav li.subnav > a:before {
  display: block;
  text-align: center;
  font-weight: 300;
  font-size: 30px;
  line-height: 30px;
  height: 30px;
  margin-bottom: 10px;
  content: "";
}
@media screen and (max-width: 1200px) {
  nav.nav li.subnav > a:before {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  nav.nav li.subnav div.nav-menu {
    position: relative;
    top: 0;
  }
}
@media only screen and (max-width: 1200px) {
  nav.nav {
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  nav.nav ul {
    flex-direction: column;
  }
  nav.nav::-webkit-scrollbar {
    display: none;
  }
}

nav.navigation .navigation-brand-text a {
  font-size: 18px;
}
nav.navigation .content-wrap {
  width: 100%;
}
nav.navigation .navigation-link i[class*=fa] {
  font-size: 19px;
  margin-right: 5px;
  margin-bottom: 4px;
}
nav.navigation .navigation-link.oozefest {
  color: #2daf03;
}
nav.navigation .navigation-link.snowpocalypse {
  color: #038daf;
}
nav.navigation a.nav-hsclass {
  padding: 7px 30px 7px 30px;
}
nav.navigation a.nav-hsclass::before {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  background-size: 24px;
  margin-right: 6px;
  position: relative;
  left: 0;
  transform: none;
}
nav.navigation a.nav-death-knight::before {
  background-image: url(images/hearth/class-icons/death-knight.png);
}
nav.navigation a.nav-demon-hunter::before {
  background-image: url(images/hearth/class-icons/demon-hunter.png);
}
nav.navigation a.nav-druid::before {
  background-image: url(images/hearth/class-icons/druid.png);
}
nav.navigation a.nav-hunter::before {
  background-image: url(images/hearth/class-icons/hunter.png);
}
nav.navigation a.nav-mage::before {
  background-image: url(images/hearth/class-icons/mage.png);
}
nav.navigation a.nav-paladin::before {
  background-image: url(images/hearth/class-icons/paladin.png);
}
nav.navigation a.nav-priest::before {
  background-image: url(images/hearth/class-icons/priest.png);
}
nav.navigation a.nav-rogue::before {
  background-image: url(images/hearth/class-icons/rogue.png);
}
nav.navigation a.nav-shaman::before {
  background-image: url(images/hearth/class-icons/shaman.png);
}
nav.navigation a.nav-warlock::before {
  background-image: url(images/hearth/class-icons/warlock.png);
}
nav.navigation a.nav-warrior::before {
  background-image: url(images/hearth/class-icons/warrior.png);
}
nav.navigation a.nav-neutral::before {
  background-image: url(images/hearth/class-icons/neutral.png);
}
nav.navigation a.set-icon-link::before {
  transform: none;
  position: relative;
  left: 0;
}
nav.navigation .navigation-megamenu, nav.navigation .navigation-dropdown {
  box-shadow: inset 0 1px 0 hsl(210, 86%, 34%), 0 12px 20px -5px rgba(0, 0, 0, 0.05);
}
nav.navigation .navigation-inline-form button {
  margin: 0 !important;
  background: none;
}
@media screen and (max-width: 1200px) {
  nav.navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    will-change: opacity;
    z-index: 19998;
  }
  nav.navigation .navigation-body-section + .navigation-menu:not(.navigation-social-menu) > .navigation-item:first-child > .navigation-link {
    border-top: solid 1px #333333;
  }
}
@media screen and (min-width: 1200px) {
  nav.navigation .navigation-body-header {
    display: none;
  }
}
@media screen and (min-width: 600px) {
  nav.navigation .search-mobile {
    display: none;
  }
}
@media (max-width: 500px) {
  nav.navigation .navigation-body {
    height: calc(100% - 100px);
  }
}

iframe {
  max-width: 100%;
  border: 3px solid #27292d;
}

section.site-content {
  background: var(--page-background);
  border-radius: 5px;
  min-height: 400px;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}
section.site-content:empty {
  display: none;
}
section.site-content.halfpagesize {
  grid-gap: 25px;
}
section.site-content .main {
  grid-column: span 12;
  width: 100%;
}
section.site-content .main img {
  max-width: 100%;
  height: auto;
}
section.site-content .main.has-sidebar {
  grid-column: span 8;
}
section.site-content .main.has-sidebar.mainhalfpage {
  grid-column: span 6;
}
section.site-content .main.has-smaller-sidebar {
  grid-column: span 9;
}
@media screen and (max-width: 1000px) {
  section.site-content .main.has-smaller-sidebar {
    grid-column: span 8;
  }
}
@media screen and (max-width: 800px) {
  section.site-content .main.has-smaller-sidebar {
    grid-column: span 12;
  }
  section.site-content .main.has-smaller-sidebar.sidebar-goes-under + .sidebar {
    grid-column: span 12;
  }
}
section.site-content .sidebar {
  grid-column: span 4;
  overflow: hidden;
}
section.site-content .sidebar.sidehalfpage {
  grid-column: span 6;
}
section.site-content .sidebar.smaller-sidebar {
  grid-column: span 3;
}
@media screen and (max-width: 1000px) {
  section.site-content .sidebar.smaller-sidebar {
    grid-column: span 4;
  }
}
@media screen and (min-width: 800px) {
  section.site-content .sidebar.sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    height: 100vh;
  }
}
section.site-content .top {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}
section.site-content .top .block {
  grid-column: span 4;
  overflow: hidden;
}
section.site-content .top .block.block {
  margin-top: 0;
}
@media screen and (max-width: 1000px) {
  section.site-content .top .block {
    grid-column: span 12 !important;
  }
  section.site-content .top.block {
    margin-top: 10px;
  }
}
@media screen and (max-width: 1000px) {
  section.site-content section.active-tab {
    grid-column: span 12 !important;
  }
  section.site-content section.hidden-tab {
    display: none;
  }
}

/* CMS */
section.articles, .article-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}
@media screen and (max-width: 400px) {
  section.articles, .article-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 650px) {
  section.articles, .article-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
section.articles.member-articles article.article-excerpt:first-child, .article-list.member-articles article.article-excerpt:first-child {
  grid-column: span 1;
}
section.articles h4, .article-list h4 {
  font-size: 19px;
}
section.articles article.article-excerpt, .article-list article.article-excerpt {
  padding: 10px;
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to top, var(--site-gradient-from), var(--site-gradient-to));
  border-color: #292929;
}
section.articles article.article-excerpt:first-child, .article-list article.article-excerpt:first-child {
  grid-column: span 2;
}
@media screen and (max-width: 400px) {
  section.articles article.article-excerpt:first-child, .article-list article.article-excerpt:first-child {
    grid-column: span 1;
  }
}
@media screen and (max-width: 650px) {
  section.articles article.article-excerpt:first-child, .article-list article.article-excerpt:first-child {
    grid-column: span 1;
  }
}
section.articles article.article-excerpt .article-thumb, .article-list article.article-excerpt .article-thumb {
  margin: -10px -10px 0px;
}
section.articles article.article-excerpt img.post-image, .article-list article.article-excerpt img.post-image {
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
section.articles .articles-between-sweet, .article-list .articles-between-sweet {
  grid-column: span 2;
}
@media screen and (max-width: 400px) {
  section.articles .articles-between-sweet, .article-list .articles-between-sweet {
    grid-column: span 1;
  }
}
@media screen and (max-width: 650px) {
  section.articles .articles-between-sweet, .article-list .articles-between-sweet {
    grid-column: span 1;
  }
}

.article-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.article-details h1, .article-details h2 {
  flex-grow: 1;
  line-height: 30px;
  font-size: 27px;
}
.article-details footer {
  color: #747474;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}
.article-details footer a {
  color: #747474;
}
.article-details footer span.usergroup-registered-user a {
  color: #E5AF37;
}
.article-details .article-admin {
  margin-right: 10px;
}
.article-details .article-comments {
  align-self: flex-end;
  margin-left: auto;
}
.article-details .article-comments a:hover {
  color: var(--link-hover-color);
}

.article-folder {
  padding: 2px 10px;
  border-radius: 5px;
  background: #5f4094;
  color: #FEFEFE;
  font-size: 14px;
  font-weight: 700;
  width: fit-content;
  width: max-content;
  margin: 5px 0;
  text-shadow: 1px 1px 4px black;
  text-shadow: 1px 0 4px rgba(0, 0, 0, 0.6), 0 -1px 4px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.6), -1px 0 4px rgba(0, 0, 0, 0.6);
  display: table;
  margin-top: -45px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.6);
}
.article-folder:visited {
  color: #FEFEFE;
}
.article-folder:before {
  background-size: cover;
  background-color: #FEFEFE;
  width: 17px;
  height: 17px;
  display: inline-block;
  mask-size: cover;
  -webkit-mask-size: cover;
  vertical-align: bottom;
  margin-right: 5px;
  vertical-align: text-bottom;
}
.article-folder.article-folder-hearthstone {
  background: linear-gradient(12deg, var(--color-blue-dark) 40%, var(--color-blue));
}
.article-folder.article-folder-hearthstone:before {
  content: "";
  mask: url(images/game-logo-hearthstone.svg) no-repeat;
  mask-image: url(images/game-logo-hearthstone.svg) no-repeat;
  -webkit-mask: url(images/game-logo-hearthstone.svg) no-repeat;
}
.article-folder.article-folder-legends-of-runeterra {
  background: linear-gradient(12deg, var(--color-turqoise-dark) 40%, var(--color-turqoise));
}
.article-folder.article-folder-legends-of-runeterra:before {
  content: "";
  mask: url(images/game-logo-runeterra.svg) no-repeat;
  mask-image: url(images/game-logo-runeterra.svg) no-repeat;
  -webkit-mask: url(images/game-logo-runeterra.svg) no-repeat;
}
.article-folder.article-folder-magic-arena {
  background: linear-gradient(12deg, var(--color-red-dark) 40%, var(--color-red));
}
.article-folder.article-folder-magic-arena:before {
  content: "";
  mask: url(images/game-logo-magic-arena.svg) no-repeat;
  mask-image: url(images/game-logo-magic-arena.svg) no-repeat;
  -webkit-mask: url(images/game-logo-magic-arena.svg) no-repeat;
}
.article-folder.article-folder-mythgard {
  background-color: var(--color-pink-dark);
  background: linear-gradient(12deg, var(--color-pink-dark) 40%, var(--color-pink));
}
.article-folder.article-folder-mythgard:before {
  content: "";
  mask: url(images/game-logo-mythgard.svg) no-repeat;
  mask-image: url(images/game-logo-mythgard.svg) no-repeat;
  -webkit-mask: url(images/game-logo-mythgard.svg) no-repeat;
}
.article-folder.article-folder-pokemon {
  background: linear-gradient(12deg, var(--color-peach-dark) 40%, var(--color-peach));
}
.article-folder.article-folder-pokemon:before {
  content: "";
  mask: url(images/game-logo-pokemon.svg) no-repeat;
  mask-image: url(images/game-logo-pokemon.svg) no-repeat;
  -webkit-mask: url(images/game-logo-pokemon.svg) no-repeat;
}
.article-folder.article-folder-second-dinner {
  background-color: var(--color-purple-dark);
}
.article-folder.article-folder-yu-gi-oh {
  background: linear-gradient(12deg, var(--color-yellow-dark) 40%, var(--color-yellow));
}
.article-folder.article-folder-yu-gi-oh:before {
  content: "";
  mask: url(images/game-logo-yugioh.svg) no-repeat;
  mask-image: url(images/game-logo-yugioh.svg) no-repeat;
  -webkit-mask: url(images/game-logo-yugioh.svg) no-repeat;
}
.article-folder.article-folder-gwent {
  background-color: var(--color-green-dark);
}
.article-folder.article-folder-blizzard {
  background-color: #2b70bf;
}

article.article {
  padding: 10px 40px;
}
@media screen and (max-width: 900px) {
  article.article {
    padding: 10px 0px;
  }
}
article.article header.article-header {
  position: relative;
}
article.article header.article-header h1, article.article header.article-header h2 {
  margin-bottom: 0;
}
article.article header.article-header .article-tools {
  position: absolute;
  top: 10px;
  right: 20px;
}
article.article .content-header-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
  margin: 0 -40px 50px -40px;
}
@media screen and (max-width: 900px) {
  article.article .content-header-image {
    height: 300px;
    margin: 0 -20px 50px -20px;
  }
}
@media screen and (max-width: 500px) {
  article.article .content-header-image {
    height: 240px;
  }
}
article.article .article-byline {
  color: #747474;
  font-size: 13px;
  font-size: 14px;
  margin-bottom: 20px;
}

header.article-header {
  position: relative;
}
header.article-header h1, header.article-header h2 {
  margin-bottom: 0;
}
header.article-header .article-tools {
  position: absolute;
  top: 10px;
  right: 20px;
}

header {
  position: relative;
}
@media screen and (min-width: 900px) {
  header .header-buttons {
    position: absolute;
    top: 10px;
    right: 20px;
  }
}

table {
  margin: 0px;
  list-style: none;
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border-color: var(--table-border-color);
  overflow-x: auto;
}
@media screen and (max-width: 1200px) {
  table {
    max-width: 100%;
    width: fit-content;
    display: block;
  }
}
table a {
  font-weight: normal;
}
table thead {
  background: var(--table-heading-background);
}
table tbody tr {
  background: var(--table-odd-background);
  border: 1px solid var(--table-border-color);
}
table tbody tr:nth-child(even) {
  background: var(--table-even-background);
}
table tr {
  padding: 10px;
}
table tr th, table tr td {
  padding: 10px;
}
table tr.deleted {
  opacity: 0.3;
}
table .col-title {
  text-align: left;
}
table .col-count {
  width: 80px;
  text-align: center;
}
table .col-latest {
  width: 220px;
}
table .forum-title {
  font-size: 24px;
}

table.cardpatchchange .cardpatchchange-patch {
  text-align: left;
}
table.cardpatchchange .cardpatchchange-change {
  text-align: left;
  width: 70%;
}

/* Breadcrumbs */
section.breadcrumbs {
  background: var(--page-background);
  border-radius: 5px;
  padding: 10px 40px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 20px;
}
section.breadcrumbs .breadcrumbs-arrow {
  margin-right: 5px;
  margin-left: 5px;
  color: #636363;
}
section.breadcrumbs ol {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 600px) {
  section.breadcrumbs li {
    display: none;
  }
  section.breadcrumbs li:nth-last-child(2) {
    display: block;
  }
  section.breadcrumbs .breadcrumbs-arrow i:before {
    content: "\f104";
  }
}

/* Buttons */
.button, button {
  color: var(--button-color);
  padding: 5px 10px;
  border: 1px solid var(--button-border);
  display: inline-block;
  border-radius: 5px;
  background: var(--button-bg);
  background-image: linear-gradient(var(--button-bg-top-gradient), var(--button-bg-bottom-gradient));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(143, 143, 143, 0.2);
  font-size: 13px;
  cursor: pointer;
}
.button.large, .button.btn.btn-large, button.large, button.btn.btn-large {
  padding: 10px 20px;
  font-size: 100%;
}
.button:hover, button:hover {
  background: var(--button-hover-bg);
  background-image: linear-gradient(var(--button-hover-bg-top-gradient), var(--button-hover-bg-bottom-gradient));
  transform: translateY(-1px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.button:visited, button:visited {
  color: var(--button-color);
}
.button.hearthstone, button.hearthstone {
  background: #a02a2a;
  border: 1px solid #7d0f0f;
}
.button.faded, button.faded {
  border-color: var(--button-border-faded);
  background-image: linear-gradient(var(--button-bg-top-gradient-faded), var(--button-bg-bottom-gradient-faded));
}
.button[disabled=disabled], button[disabled=disabled] {
  border-color: black;
  background-image: linear-gradient(grey, grey);
  cursor: not-allowed;
}

a.button.large {
  line-height: 1.15;
  font-weight: normal;
}

div.comment-actions .button, div.comment-actions button {
  background: var(--button-faded-bg);
  background-image: linear-gradient(var(--button-faded-bg-top-gradient), var(--button-faded-bg-bottom-gradient));
  border-color: var(--button-faded-border);
}
div.comment-actions .button:hover, div.comment-actions button:hover {
  background: var(--button-bg);
  background-image: linear-gradient(var(--button-bg-top-gradient), var(--button-bg-bottom-gradient));
}

/* Boxbois */
input, select {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  border-radius: 3px;
  box-shadow: 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  color: var(--font-color);
  padding: 10px 5px;
  height: 45px;
}
input[type=radio], select[type=radio] {
  border: 0;
  background: 0;
  box-shadow: none;
  height: auto;
}
input[type=file], select[type=file] {
  border: 0;
  background: 0;
  box-shadow: none;
  height: auto;
}
input[type=checkbox], select[type=checkbox] {
  border: 0;
  background: 0;
  box-shadow: none;
  height: 25px;
  width: auto;
}
input:focus, select:focus {
  outline: solid 1px var(--button-bg);
}

select[multiple] {
  height: 150px;
}

fieldset {
  border: 0;
}

select {
  min-width: 150px;
}

section.login-wrap {
  padding: 30px;
  text-align: center;
  min-width: 450px;
  grid-column: span 12;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to top, var(--site-gradient-from), var(--site-gradient-to));
  background: var(--widget-background);
}
section.login-wrap input {
  width: 100%;
}
section.login-wrap label {
  text-align: left;
  display: block;
}
section.login-wrap .forgot-password {
  text-align: right;
  margin-top: -0.9rem;
}
section.login-wrap button {
  min-width: 150px;
}
@media screen and (max-width: 450px) {
  section.login-wrap {
    min-width: 100%;
  }
}

section.fancy-box {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

li.comment {
  list-style: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  position: relative;
  margin-top: 20px;
  border-radius: 5px;
}
@media screen and (max-width: 950px) {
  li.comment {
    display: flex;
    flex-direction: column;
  }
}
li.comment.premium-comment {
  border-color: #6a3f00;
}
li.comment.staff-comment {
  border-color: #2a7fa1 !important;
}
li.comment:first-child {
  margin-top: 0;
}
li.comment.comment-deleted {
  border: 2px solid purple;
}
li.comment.comment-spam {
  border: 2px solid red;
}
li.comment .userbit {
  display: flex;
  padding: 10px;
}
@media screen and (max-width: 950px) {
  li.comment .userbit {
    flex-direction: row;
  }
}
li.comment .userbit .created-by-avatar {
  margin-right: 20px;
  position: relative;
}
li.comment .userbit .created-by-avatar img {
  border-radius: 50%;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  width: 40px;
  height: 40px;
}
li.comment .userbit .avatar-border {
  display: inline-flex;
  padding: 2px;
  border-radius: 5px;
}
li.comment .userbit .avatar-border.avatar-border-bronze-supporter {
  background: linear-gradient(to bottom, #CD7F32 0%, #BE7023 100%);
  border: 1px solid #AF6114;
}
li.comment .userbit .avatar-border.avatar-border-bronze-supporter img {
  border: 1px solid #AF6114 !important;
  box-shadow: 0 1px 3px #dc8e41 !important;
}
li.comment .userbit .avatar-border.avatar-border-silver-supporter {
  background: linear-gradient(to bottom, #757575 0%, #666666 100%);
  border: 1px solid #575757;
}
li.comment .userbit .avatar-border.avatar-border-silver-supporter img {
  border: 1px solid #575757 !important;
  box-shadow: 0 1px 3px #848484 !important;
}
li.comment .userbit .avatar-border.avatar-border-gold-supporter {
  background: linear-gradient(to bottom, #CBA135 0%, #BC9226 100%);
  border: 1px solid #AD8317;
}
li.comment .userbit .avatar-border.avatar-border-gold-supporter img {
  border: 1px solid #AD8317 !important;
  box-shadow: 0 1px 3px #DAB044 !important;
}
li.comment .userbit .avatar-border.avatar-border-mythic-supporter {
  background: linear-gradient(to bottom, #AC1E44 0%, #9D0F35 100%);
  border: 1px solid #8E0026;
}
li.comment .userbit .avatar-border.avatar-border-mythic-supporter img {
  border: 1px solid #8E0026 !important;
  box-shadow: 0 1px 3px #BB2D53 !important;
}
@media screen and (max-width: 950px) {
  li.comment .userbit .avatar-border {
    padding: 1px;
  }
}
li.comment .userbit .avatar-pin {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 10%;
  left: 10%;
  z-index: 5;
}
li.comment .userbit .avatar-pin img {
  background: none !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: none !important;
  z-index: 5;
}
@media screen and (max-width: 948px) {
  li.comment .userbit .avatar-pin {
    display: none;
  }
}
li.comment .userbit .usertitle {
  font-size: 13px;
}
@media screen and (max-width: 948px) {
  li.comment .userbit .usertitle {
    line-height: 29px;
  }
}
li.comment .userbit .created-by-details {
  display: flex;
  align-self: center;
  flex-flow: column;
}
li.comment .userbit .created-by {
  font-weight: normal;
}
li.comment .userbit .created-at {
  color: #747474;
}
li.comment .comment-body, li.comment .comment-actions {
  padding: 5px 0;
  word-break: break-word;
}
li.comment .comment-signature {
  max-height: 100px;
  border-top: 3px solid #3A3A3A;
  padding: 10px 10px;
  overflow: hidden;
}
li.comment .comment-signature p:first-child {
  margin-top: 0px;
}
li.comment .comment-signature p:last-child {
  margin-bottom: 0px;
}
li.comment .comment-signature.staff-signature {
  max-height: 200px;
}
li.comment .comment-meta, li.comment .comment-edit-info {
  font-size: 12px;
  color: #747474;
}
li.comment.im-a-reply {
  margin-left: 20px;
}
li.comment .halloween-lightbulb-on {
  --fa-primary-color: gold;
  --fa-secondary-color: gold;
}
li.comment .halloween-lightbulb-off {
  --fa-primary-color: rgb(197, 197, 197);
  --fa-secondary-color: rgb(138, 136, 125);
}

ul.children {
  margin: 0;
  padding-left: 20px;
}
ul.children li:first-child {
  margin-top: 20px;
}

.comments.fancy-box .user-stat, .comments.wrapper-box .user-stat {
  display: none;
}
.comments.fancy-box .user-stat.user-stat-achievement-points, .comments.wrapper-box .user-stat.user-stat-achievement-points {
  color: #D89B00;
  font-size: 15px;
  display: block;
  position: absolute;
  left: 10px;
  top: 60px;
}
.comments.fancy-box .user-stat.user-stat-halloween-light, .comments.wrapper-box .user-stat.user-stat-halloween-light {
  display: block;
  font-size: 13px;
}
.comments.fancy-box .user-quick-icons, .comments.wrapper-box .user-quick-icons {
  color: #747474;
  font-size: 13px;
}
.comments.fancy-box .user-quick-icons a, .comments.wrapper-box .user-quick-icons a {
  color: #747474;
}
.comments.fancy-box .user-quick-icons a:hover, .comments.wrapper-box .user-quick-icons a:hover {
  color: var(--link-hover-color);
}
.comments.fancy-box .user-quick-icons a + a, .comments.wrapper-box .user-quick-icons a + a {
  margin-left: 5px;
}
.comments.fancy-box .created-by, .comments.wrapper-box .created-by {
  line-height: 18px;
}
.comments.fancy-box .usergroup, .comments.wrapper-box .usergroup {
  font-size: 13px;
  color: #747474;
  display: block;
}
.comments.fancy-box .postbit, .comments.wrapper-box .postbit {
  margin-left: 75px;
  border-top: 1px solid #2c3235;
}
.comments.fancy-box .comment-meta, .comments.wrapper-box .comment-meta {
  position: absolute;
  top: 6px;
  right: 10px;
}
.comments.fancy-box > .children, .comments.wrapper-box > .children {
  padding-left: 0;
}
.comments.fancy-box li.comment .userbit .avatar-pin, .comments.wrapper-box li.comment .userbit .avatar-pin {
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 10%;
  left: 10%;
  z-index: 5;
}
.comments.fancy-box li.comment .userbit .avatar-pin img, .comments.wrapper-box li.comment .userbit .avatar-pin img {
  background: none !important;
  border: none !important;
  width: 20px !important;
  height: 20px !important;
  box-shadow: none !important;
  z-index: 5;
}
@media screen and (max-width: 948px) {
  .comments.fancy-box li.comment .userbit .avatar-pin, .comments.wrapper-box li.comment .userbit .avatar-pin {
    display: none;
  }
}

.forum-posts li.comment {
  display: flex;
}
.forum-posts li.comment .userbit {
  min-width: 200px;
  flex-direction: column;
  text-align: center;
  background: #1d1e22;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 950px) {
  .forum-posts li.comment .userbit {
    flex-direction: row;
    align-items: center;
    position: relative;
  }
}
.forum-posts li.comment .userbit .created-by {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 950px) {
  .forum-posts li.comment .userbit .created-by {
    flex-direction: row;
  }
  .forum-posts li.comment .userbit .created-by span {
    margin-left: 10px;
  }
}
.forum-posts li.comment .userbit .avatar-border {
  padding: 4px;
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-hearth-card-design-champion {
  position: relative;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-hearth-card-design-champion {
    margin-bottom: 15px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-hearth-card-design-champion::after {
    content: "";
    display: block;
    height: 160px;
    width: 155px;
    position: absolute;
    background: url(images/hearth/fancreations/cdc-avatar-border.png);
    background-size: 155px 160px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-oozefest-slime-skull {
  position: relative;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-oozefest-slime-skull {
    margin-bottom: 15px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-oozefest-slime-skull::after {
    content: "";
    display: block;
    height: 160px;
    width: 155px;
    position: absolute;
    background: url(images/profile/avatar-borders/oozefest-border-slime-skull.png);
    background-size: 155px 160px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-snowpocalypse-snowball {
  position: relative;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-snowpocalypse-snowball {
    margin-bottom: 15px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-snowpocalypse-snowball::after {
    content: "";
    display: block;
    height: 160px;
    width: 155px;
    position: absolute;
    background: url(images/profile/avatar-borders/snowball-avatar-border.png);
    background-size: 155px 160px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-snowpocalypse-holly {
  position: relative;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-snowpocalypse-holly {
    margin-bottom: 15px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-snowpocalypse-holly::after {
    content: "";
    display: block;
    height: 160px;
    width: 155px;
    position: absolute;
    background: url(images/profile/avatar-borders/holly-avatar-border.png);
    background-size: 155px 160px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-oozefest-splat {
  position: relative;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-oozefest-splat {
    margin-bottom: 30px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-oozefest-splat img {
    z-index: 2;
    border: 2px solid #74dd0b;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(149, 229, 17), inset 0 1px 1px rgba(91, 253, 67, 0.2);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-oozefest-splat::before {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/oozefest-border-splat.png);
    background-size: 190px 190px;
    top: -10px;
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
  }
}
@media screen and (min-width: 500px) and (max-width: 948px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-oozefest-splat {
    margin-bottom: 0px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-oozefest-splat img {
    z-index: 2;
    border: 2px solid #74dd0b;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(149, 229, 17), inset 0 1px 1px rgba(91, 253, 67, 0.2);
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-oozefest-splat::before {
    content: "";
    display: block;
    height: 40px;
    width: 40px;
    position: absolute;
    background: url(images/profile/avatar-borders/oozefest-border-splat.png);
    background-size: 40px 40px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-ice-dungeon {
  position: relative;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-ice-dungeon {
    margin-bottom: 30px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-ice-dungeon img {
    z-index: 2;
    border-radius: 50%;
    width: 115px;
    height: 115px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-ice-dungeon::before {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/ice-dungeon.png);
    background-size: 190px 190px;
    top: -20px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }
}
@media screen and (min-width: 500px) and (max-width: 948px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-ice-dungeon {
    margin-bottom: 0px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-ice-dungeon img {
    z-index: 2;
    border-radius: 50%;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-ice-dungeon::before {
    content: "";
    display: block;
    height: 44px;
    width: 44px;
    position: absolute;
    background: url(images/profile/avatar-borders/ice-dungeon.png);
    background-size: 44px 44px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-pumpkin-head {
  position: relative;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-pumpkin-head {
    margin-bottom: 25px;
    margin-top: 20px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-pumpkin-head img {
    z-index: 2;
    margin-top: 27px;
    width: 115px;
    height: 115px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-pumpkin-head::before {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/halloween-pumpkin-head.png);
    background-size: 190px 190px;
    top: -20px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }
}
@media screen and (min-width: 500px) and (max-width: 948px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-pumpkin-head {
    margin-bottom: 0px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-pumpkin-head img {
    z-index: 2;
    margin-top: 5px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-pumpkin-head::before {
    content: "";
    display: block;
    height: 44px;
    width: 44px;
    position: absolute;
    background: url(images/profile/avatar-borders/halloween-pumpkin-head.png);
    background-size: 44px 44px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-boney {
  position: relative;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-boney {
    margin-bottom: 4px;
    margin-top: 10px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-boney img {
    z-index: 2;
    margin-top: -8px;
    width: 160px;
    height: 160px;
    max-height: 160px;
    min-height: 160px;
    border-radius: 50%;
    border: 2px solid #3f3f3f;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-boney::before {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/halloween-bones.png);
    background-size: 190px 190px;
    top: -20px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }
}
@media screen and (min-width: 500px) and (max-width: 948px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-boney {
    margin-bottom: 0px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-boney img {
    z-index: 2;
    margin-top: 2px;
    border-radius: 50%;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-boney::before {
    content: "";
    display: block;
    height: 44px;
    width: 44px;
    position: absolute;
    background: url(images/profile/avatar-borders/halloween-bones.png);
    background-size: 44px 44px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }
}
.forum-posts li.comment .userbit .avatar-border.avatar-border-spooky-crate {
  position: relative;
}
@media screen and (min-width: 949px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-spooky-crate {
    margin-bottom: 10px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-spooky-crate img {
    z-index: 2;
    margin-top: 16px;
    width: 145px;
    height: 145px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-spooky-crate::before {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/halloween-spooky-crate.png);
    background-size: 190px 190px;
    top: -20px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }
}
@media screen and (min-width: 500px) and (max-width: 948px) {
  .forum-posts li.comment .userbit .avatar-border.avatar-border-spooky-crate {
    margin-bottom: 0px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-spooky-crate img {
    z-index: 2;
    margin-top: 6px;
  }
  .forum-posts li.comment .userbit .avatar-border.avatar-border-spooky-crate::before {
    content: "";
    display: block;
    height: 44px;
    width: 44px;
    position: absolute;
    background: url(images/profile/avatar-borders/halloween-spooky-crate.png);
    background-size: 44px 44px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
  }
}
.forum-posts li.comment .userbit .created-by-avatar {
  margin: 0;
}
.forum-posts li.comment .userbit .created-by-avatar img {
  border-radius: 0;
  margin: 0;
  width: 140px;
  height: 140px;
  max-height: 140px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 950px) {
  .forum-posts li.comment .userbit .created-by-avatar img {
    width: 30px;
    height: 30px;
    max-height: 30px;
    vertical-align: middle;
  }
}
.forum-posts li.comment .userbit .user-stat {
  color: #747474;
  font-size: 13px;
}
@media screen and (max-width: 950px) {
  .forum-posts li.comment .userbit .user-stat {
    display: none;
    line-height: 29px;
  }
  .forum-posts li.comment .userbit .user-stat.user-stat-halloween-light {
    display: inline-block;
    right: 10px;
    position: absolute;
  }
}
.forum-posts li.comment .userbit .user-stat.user-stat-achievement-points {
  color: #FFCA45;
  font-size: 15px;
}
.forum-posts li.comment .userbit .user-quick-icons a {
  color: #747474;
}
.forum-posts li.comment .userbit .user-quick-icons a:hover {
  color: var(--link-hover-color);
}
.forum-posts li.comment .userbit .user-quick-icons a + a {
  margin-left: 10px;
}
.forum-posts li.comment .postbit {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media screen and (max-width: 950px) {
  .forum-posts li.comment .postbit {
    margin-left: 0;
    margin-top: 10px;
  }
}
.forum-posts li.comment .postbit .comment-meta {
  padding: 5px 20px 0;
}
.forum-posts li.comment .postbit .comment-body {
  flex-grow: 1;
  padding: 10px 20px;
}
.forum-posts li.comment .postbit .comment-actions {
  border-top: 1px solid #3A3A3A;
  padding: 5px 20px;
}

/* Forums */
.forum-category {
  margin-top: 40px;
}
.forum-category .forum-listing {
  min-width: 100%;
}
.forum-category .forum-listing h3 {
  color: var(--font-color);
  font-size: 18px;
  margin-bottom: 0;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
}
.forum-category .forum-listing h3 a {
  color: var(--link-color);
}
.forum-category .forum-listing h3 a:hover {
  color: var(--link-hover-color);
}
.forum-category .forum-listing h3 a:visited {
  color: var(--link-visited-color);
}
@media screen and (max-width: 650px) {
  .forum-category .forum-listing {
    grid-template-columns: repeat(1, 1fr);
  }
}
.forum-category .forum-listing .subforum {
  background: var(--table-odd-background);
  border: 1px solid var(--table-border-color);
  padding: 10px;
  font-size: 14px;
  color: var(--font-color);
  display: flex;
  flex-direction: row;
}
.forum-category .forum-listing .subforum:nth-child(even) {
  background: var(--table-even-background);
}
.forum-category .forum-listing .subforum .forum-main {
  flex-grow: 1;
}
.forum-category .forum-listing .subforum .created-by-avatar img {
  width: 40px;
  height: 40px;
  max-height: 40px;
}
.forum-category .forum-listing .subforum .forum-stats {
  display: flex;
  text-align: center;
}
.forum-category .forum-listing .subforum .forum-stats .forum-stat {
  padding: 0 10px;
}
.forum-category .forum-listing .subforum .forum-stats .stat-title {
  color: #747474;
  font-size: 13px;
  display: block;
}
@media screen and (max-width: 900px) {
  .forum-category .forum-listing .subforum .forum-stats {
    display: none;
  }
}
.forum-category .forum-listing .subforum > div {
  margin-left: 10px;
}
.forum-category .forum-listing .subforum .forum-recent {
  width: 250px;
  flex-shrink: 0;
}
@media screen and (max-width: 750px) {
  .forum-category .forum-listing .subforum .forum-recent {
    width: 200px;
  }
  .forum-category .forum-listing .subforum .forum-recent .comment-avatar {
    display: none;
  }
}
@media screen and (max-width: 650px) {
  .forum-category .forum-listing .subforum .forum-recent {
    display: none;
  }
}
.forum-category .forum-listing .subforum + .subforum {
  border-top: 0;
}

.recent-comment {
  display: flex;
}
.recent-comment > span {
  margin-left: 10px;
  min-width: 40px;
}
.recent-comment .comment-meta {
  width: 100%;
}
.recent-comment .thread-title {
  overflow: hidden;
  width: 100%;
}
.recent-comment .thread-title a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.recent-comment .posted-at {
  color: #747474;
  font-size: 13px;
}

.forums .col-thread, .listing-recent-threads .col-thread {
  line-height: 20px;
}
.forums .col-thread .thread-wrapper, .listing-recent-threads .col-thread .thread-wrapper {
  display: flex;
  flex-direction: row;
}
.forums .col-thread .posted-by, .listing-recent-threads .col-thread .posted-by {
  font-size: 12px;
  color: #747474;
}
.forums .col-thread .posted-by a, .listing-recent-threads .col-thread .posted-by a {
  font-weight: normal;
}
.forums td.col-updated-at, .listing-recent-threads td.col-updated-at {
  font-size: 14px;
}
.forums td.col-updated-at .posted-by, .listing-recent-threads td.col-updated-at .posted-by {
  color: #747474;
  font-size: 13px;
}
@media screen and (max-width: 550px) {
  .forums .col-updated-at, .listing-recent-threads .col-updated-at {
    display: none;
  }
}
@media screen and (max-width: 650px) {
  .forums .col-views, .listing-recent-threads .col-views {
    display: none;
  }
}
.forums .responsive-comment-jump, .listing-recent-threads .responsive-comment-jump {
  display: none;
}
@media screen and (max-width: 550px) {
  .forums .responsive-comment-jump, .listing-recent-threads .responsive-comment-jump {
    display: inline;
  }
}
.forums tr, .listing-recent-threads tr {
  font-size: 15px;
  line-height: 15px;
  padding: 6px 10px;
}

.forums {
  text-align: left;
}

.forums.forums-stickies td {
  padding: 4px 10px;
}

a.comment-jump {
  color: rgb(154.25, 154.25, 154.25);
}
a.comment-jump:hover {
  color: rgb(230.75, 230.75, 230.75);
}

.thread-status a {
  color: #17191B;
  margin-left: -10px;
}
.thread-status a .icon-front {
  color: #9C9C9C;
}
.thread-status a:hover {
  color: rgb(27.692, 30.1, 32.508);
}
.thread-status.unread .icon-front {
  font-weight: 700;
  color: var(--button-bg);
}

.thread-pagination {
  margin-top: 5px;
}
.thread-pagination .pagination {
  margin: 0;
}
.thread-pagination .pagination li a {
  font-size: 12px;
  padding: 4px 8px;
  background-color: #1e2027;
}
.thread-pagination .pagination li + li {
  margin-left: 4px;
}

.col-comment-count, .col-views, .col-category {
  text-align: center;
}

.forum-tools {
  margin-bottom: 10px;
}

a.card-tooltip.rarity-basic, a.card-tooltip.rarity-invalid, a.card-tooltip.rarity-none, a.card-tooltip.rarity-free, a.rarity-basic, a.rarity-invalid, a.rarity-none, a.rarity-free {
  color: #FFFFFF;
}
a.card-tooltip.rarity-common, a.rarity-common {
  color: #2BAD19;
}
a.card-tooltip.rarity-rare, a.rarity-rare {
  color: #1E90fF;
}
a.card-tooltip.rarity-epic, a.rarity-epic {
  color: #BC5BFF;
}
a.card-tooltip.rarity-legendary, a.rarity-legendary {
  color: #FF8000;
}

.listing-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}
@media screen and (max-width: 450px) {
  .listing-main {
    grid-template-columns: repeat(1, 1fr);
  }
}
.listing-main ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.listing-main ul li {
  padding: 7px 0;
  border-top: 1px solid #2d3133;
}
.listing-main ul li:last-child {
  padding-bottom: 0px;
}
.listing-main ul li:first-child {
  padding-top: 0px;
  border-top: none;
}
.listing-main .list-item {
  background: #232529;
  border: 1px solid black;
  border-radius: 4px;
  padding: 15px;
  font-size: 90%;
  color: var(--font-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.listing-main .list-item.nohover:hover {
  background: #232529;
}
.listing-main .list-item:hover {
  background-color: #212327;
}
.listing-main .listing-desc-small {
  font-size: 12px;
  color: grey;
  text-transform: uppercase;
}

.listing-deckbuilder-mode .list-item {
  cursor: pointer;
}
.listing-deckbuilder-mode .list-item.mode-duels {
  background: url(images/hearth/deckbuilder/duelsmode.jpg);
}
.listing-deckbuilder-mode .list-item.inactive {
  opacity: 0.4;
}
.listing-deckbuilder-mode .list-item.inactive:hover {
  opacity: 0.8;
}

.listing-expansion .list-item {
  min-height: 230px;
  background: url(images/hearth/expansion-page-backgrounds/expac-basic.jpg);
  font-size: 140%;
  position: relative;
  font-weight: 500;
}
.listing-expansion .list-item .name {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.8);
  padding: 15px 15px 10px;
  width: 100%;
}
.listing-expansion .list-item .name .desc {
  display: block;
  font-size: 14px;
  line-height: 14px;
  margin-top: -5px;
  font-weight: 400;
}
.listing-expansion.listing-expansion-runeterra .list-item {
  background: url(images/runeterra/set-page-backgrounds/set-foundations.jpg);
}
.listing-expansion.listing-expansion-runeterra .list-item.expansion-set-1 {
  background: url(images/runeterra/set-page-backgrounds/set-set-1.jpg);
}
.listing-expansion.listing-expansion-runeterra .list-item.expansion-foundations {
  background: url(images/runeterra/set-page-backgrounds/set-foundations.jpg);
}
.listing-expansion.listing-expansion-runeterra .list-item.expansion-rising-tides {
  background: url(images/runeterra/set-page-backgrounds/set-rising-tides.jpg);
}
.listing-expansion.listing-expansion-runeterra .list-item.expansion-call-of-the-mountain {
  background: url(images/runeterra/set-page-backgrounds/set-call-of-the-mountain.jpg);
}
.listing-expansion.listing-expansion-runeterra .list-item.expansion-monuments-of-power {
  background: url(images/runeterra/set-page-backgrounds/set-monuments-of-power.jpg);
}
.listing-expansion.listing-expansion-runeterra .list-item.expansion-empires-of-the-ascended {
  background: url(images/runeterra/set-page-backgrounds/set-empires-of-the-ascended.jpg);
}
.listing-expansion.listing-expansion-runeterra .list-item.expansion-beyond-the-bandlewood {
  background: url(images/runeterra/set-page-backgrounds/set-beyond-the-bandlewood.jpg);
}

.listing-web-cards .list-item {
  min-height: 150px;
  position: relative;
}
.listing-web-cards .list-item .name {
  font-size: 20px;
}

.difficulty-wrap {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

i.difficulty-icon {
  font-family: "Font Awesome 6 Duotone";
  font-weight: 900;
  font-size: 40px;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  position: absolute;
}
i.difficulty-icon:before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
i.difficulty-icon:after {
  color: rgba(220, 220, 220, 0.1);
}
i.difficulty-icon.difficulty-icon-easy:before {
  content: "\f691";
  color: #8bc34a;
}
i.difficulty-icon.difficulty-icon-easy:after {
  content: "\10f691";
}
i.difficulty-icon.difficulty-icon-medium:before {
  content: "\f692";
  color: #ffeb3b;
}
i.difficulty-icon.difficulty-icon-medium:after {
  content: "\10f692";
}
i.difficulty-icon.difficulty-icon-hard:before {
  content: "\f693";
  color: #ff9800;
}
i.difficulty-icon.difficulty-icon-hard:after {
  content: "\10f693";
}
i.difficulty-icon.difficulty-icon-master:before {
  content: "\f690";
  color: #f44336;
}
i.difficulty-icon.difficulty-icon-master:after {
  content: "\10f690";
}

ul.fancy-listing {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}
ul.fancy-listing li {
  padding: 7px 0;
  border-top: 1px solid #2d3133;
}
ul.fancy-listing li a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
ul.fancy-listing li:last-child {
  padding-bottom: 0px;
}
ul.fancy-listing li:first-child {
  padding-top: 0px;
  border-top: none;
}
ul.fancy-listing.fancy-flex-listing li {
  display: flex;
}
ul.fancy-listing.fancy-flex-listing li .fancy-grow {
  flex: 1;
}
ul.fancy-listing.no-link-blocks li a {
  display: inline;
}

li.thread-list-item .thread-name {
  display: flex;
  flex-wrap: nowrap;
}
li.thread-list-item .thread-name .thread-link {
  flex-grow: 1;
}
li.thread-list-item .thread-name .comment-jump {
  align-self: flex-end;
  overflow: visible;
  margin-left: 10px;
}

.listing-desc-small {
  font-size: 70%;
  color: grey;
  text-transform: uppercase;
}

.fancy-listing .listing-desc-small {
  display: flex;
}
.fancy-listing .listing-desc-small .posted-in {
  flex-grow: 1;
}

#deckbuilder {
  display: flex;
  flex-direction: row;
}
#deckbuilder #stats {
  background: #18191b;
  font-weight: 700;
  padding: 10px;
  margin-bottom: 5px;
  display: flex;
  border-radius: 5px;
}
#deckbuilder #stats .card-count {
  flex-grow: 1;
}
#deckbuilder #stats .dust-count {
  align-self: flex-end;
}
#deckbuilder #stats .stat-label.card-count.too-many-cards .count {
  color: #DF4444;
}
#deckbuilder #mainbuilder {
  flex: auto;
  padding-right: 10px;
}
#deckbuilder #mainbuilder #filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 5px;
}
#deckbuilder #mainbuilder #filters p {
  grid-column: span 1;
}
#deckbuilder #mainbuilder #filters p select, #deckbuilder #mainbuilder #filters p input {
  width: 100%;
  height: 40px;
}
#deckbuilder #mainbuilder #collection {
  min-height: 560px;
  padding: 10px 0;
  background: #1d1e22;
  border: 1px solid #1D1D1D;
  border-radius: 5px;
  border-top-left-radius: 0px;
  display: flex;
  flex-direction: column;
}
#deckbuilder #mainbuilder #collection .contents {
  display: flex;
  flex-direction: row;
  min-height: 560px;
}
#deckbuilder #mainbuilder #collection .cards {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}
#deckbuilder #mainbuilder #collection .db-card {
  flex-basis: 1;
}
#deckbuilder #mainbuilder #collection .db-card img {
  width: 100%;
  max-width: 175px;
  cursor: pointer;
}
#deckbuilder #mainbuilder #collection .db-card .name {
  display: none;
}
#deckbuilder #mainbuilder a.builder-paging, #deckbuilder #mainbuilder div.db-card {
  cursor: pointer;
}
#deckbuilder #mainbuilder a.builder-paging {
  display: flex;
  font-size: 40px;
  padding: 0 20px;
  align-items: center;
}
#deckbuilder #page {
  background: #1d1e22;
  padding: 10px;
  text-align: center;
}
#deckbuilder #deck-details {
  flex-basis: 320px;
  flex-grow: 0;
  flex-shrink: 0;
}
#deckbuilder #deck-details .hidden {
  display: none;
}
#deckbuilder #deck-details #deck-duel-contents, #deckbuilder #deck-details #deck-core-contents {
  border-radius: 5px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to top, var(--site-gradient-from), var(--site-gradient-to));
  border-color: #292929;
  padding: 10px;
  margin-bottom: 20px;
}
#deckbuilder #deck-details #deck-duel-contents h5, #deckbuilder #deck-details #deck-core-contents h5 {
  margin-bottom: 0;
  font-size: 16px;
}
#deckbuilder #deck-details #deck-duel-contents h4, #deckbuilder #deck-details #deck-core-contents h4 {
  text-align: center;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
#deckbuilder #deck-details #deck-duel-contents .card-cost, #deckbuilder #deck-details #deck-duel-contents .card-count, #deckbuilder #deck-details #deck-core-contents .card-cost, #deckbuilder #deck-details #deck-core-contents .card-count {
  display: none;
}
#deckbuilder #deck-details #deck-contents .card, #deckbuilder #deck-details #deck-duel-contents-hero .card, #deckbuilder #deck-details #deck-duel-contents-treasure .card, #deckbuilder #deck-details #deck-duel-contents-power .card {
  background: rgba(0, 0, 0, 0.2);
  padding: 7.5px;
  margin-bottom: 5px;
  border-radius: 4px;
  display: flex;
  cursor: pointer;
}
#deckbuilder #deck-details #deck-contents .card:hover, #deckbuilder #deck-details #deck-duel-contents-hero .card:hover, #deckbuilder #deck-details #deck-duel-contents-treasure .card:hover, #deckbuilder #deck-details #deck-duel-contents-power .card:hover {
  background: rgba(0, 0, 0, 0.05);
}
#deckbuilder #deck-details #deck-contents .card .card-cost, #deckbuilder #deck-details #deck-duel-contents-hero .card .card-cost, #deckbuilder #deck-details #deck-duel-contents-treasure .card .card-cost, #deckbuilder #deck-details #deck-duel-contents-power .card .card-cost {
  width: 25px;
  text-align: center;
  align-self: flex-end;
  background: #0d4059;
  border-radius: 5px;
  margin-right: 6px;
  font-weight: 600;
}
#deckbuilder #deck-details #deck-contents .card .card-name, #deckbuilder #deck-details #deck-duel-contents-hero .card .card-name, #deckbuilder #deck-details #deck-duel-contents-treasure .card .card-name, #deckbuilder #deck-details #deck-duel-contents-power .card .card-name {
  flex-grow: 1;
}
#deckbuilder #deck-details #deck-contents .card .card-count, #deckbuilder #deck-details #deck-duel-contents-hero .card .card-count, #deckbuilder #deck-details #deck-duel-contents-treasure .card .card-count, #deckbuilder #deck-details #deck-duel-contents-power .card .card-count {
  width: 35px;
  font-size: 15px;
  align-self: flex-end;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
}

#mana-curve {
  height: 180px;
  margin-bottom: 5px;
}
#mana-curve ul.mana-bars {
  display: flex;
  flex-direction: row;
  height: 100%;
  padding-left: 0;
  justify-content: center;
  background: #18191b;
  padding: 10px;
  font-weight: 700;
  border-radius: 5px;
}
#mana-curve ul.mana-bars li {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 25px;
}
#mana-curve ul.mana-bars li .bar {
  position: relative;
  flex-grow: 1;
  border: 1px solid #2c343d;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
#mana-curve ul.mana-bars li .bar .height {
  position: absolute;
  display: block;
  bottom: 1px;
  left: 1px;
  right: 1px;
  background: #1a7abb;
}
#mana-curve ul.mana-bars li .label {
  color: #1A7ABB;
}
#mana-curve ul.mana-bars li + li {
  margin-left: 10px;
}

#deck-saving .card-count-warnings {
  border-radius: 5px;
  padding: 10px;
  max-width: 600px;
  border: 1px solid black;
}
#deck-saving .card-count-warnings p {
  margin: 0;
}
#deck-saving .card-count-warnings.hidden {
  display: none;
}
#deck-saving .too-many-cards {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
#deck-saving .too-few-cards {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
#deck-saving .save-area.hidden {
  display: none;
}
#deck-saving form input, #deck-saving form select {
  width: 50%;
}
#deck-saving form label[for=id_brawl], #deck-saving form select#id_brawl {
  display: none;
}
#deck-saving form label[for=id_lab], #deck-saving form select#id_lab {
  display: none;
}
#deck-saving form label[for=id_boss], #deck-saving form select#id_boss {
  display: none;
}

#builder-class-choice {
  margin-top: 10px;
}
#builder-class-choice .tab {
  background: #1c2028;
  padding: 15px 15px 10px;
  display: inline-block;
  cursor: pointer;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: 1px solid #1d1d1d;
  border-bottom: 0px;
  font-size: 21px;
  font-weight: 400;
  transition: opacity 0.8s ease-out;
}
#builder-class-choice .tab.active {
  background: #1d1e22;
}
#builder-class-choice .tab.hidden {
  opacity: 0;
}
#builder-class-choice .tab i {
  margin-right: 6px;
  vertical-align: text-top;
}
#builder-class-choice .tab i.icon-merc {
  vertical-align: text-bottom;
}

.block {
  background: var(--block-background);
  padding: 20px;
  border: 1px solid var(--block-border);
  border-radius: 4px;
}
.block + .block, .block + .image-block {
  margin-top: 20px;
}
.block > header, .block > div.poll > header {
  margin: -20px;
  margin-bottom: 20px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.block > header h3, .block > div.poll > header h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.block > header h3 .heading-desc, .block > div.poll > header h3 .heading-desc {
  font-size: 60%;
  color: grey;
  margin-top: -10px;
}
.block > header.themed {
  background: #151515;
  margin: -10px -10px 10px;
  padding: 5px 10px 0;
}
.block .buttons {
  text-align: center;
  margin-top: 1.05rem;
}

.image-block {
  border-radius: 4px;
  display: block;
}
.image-block img {
  border-radius: 4px;
}
.image-block + .image-block, .image-block + .block {
  margin-top: 10px;
}

.block.block-brawl {
  background: url(images/hearth/tavernbrawl/widget-bg.jpg) top center;
}
.block.block-brawl.tavern-open {
  background: url(images/hearth/tavernbrawl/widget-bg-open.jpg) top center;
}
.block.block-brawl .tavern-status {
  background: rgba(12, 7, 2, 0.3);
  padding: 10px;
  border: 1px solid #25221e;
  border-radius: 5px;
  text-align: center;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 600;
}
.block.block-brawl .tavern-open {
  background: rgba(0, 3, 4, 0.55);
}
.block.block-brawl .tavern-buttons {
  margin-top: 10px;
  text-align: center;
}

.block.halloween {
  background: #122603;
  border: 1px solid #307219;
  background-image: linear-gradient(#24480a, #122603);
}

.block.patreon-supporter-block {
  text-align: center;
  background: linear-gradient(110deg, #2d110b, #4a231d);
  border: 1px solid rgba(119, 48, 36, 0.368627451);
}
.block.patreon-supporter-block.is_supporter .supporter-profile .avatar-border img {
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
.block.patreon-supporter-block.is_supporter .patreon-button-row {
  display: none;
}
.block.patreon-supporter-block p {
  margin: 0;
}
.block.patreon-supporter-block .supporter-profile {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.block.patreon-supporter-block .supporter-profile .avatar-border img {
  height: 70px;
  width: 70px;
  margin-right: 10px;
}

.button-patreon {
  margin-top: 10px;
  background: hsl(8, 80%, 35%);
  border: 1px solid hsl(8, 70%, 40%);
}
.button-patreon:hover {
  background: hsl(8, 70%, 38%);
}

.button-twitch {
  margin-top: 10px;
  background: hsl(268, 80%, 30%);
  border: 1px solid hsl(268, 70%, 35%);
}
.button-twitch:hover {
  background: hsl(268, 70%, 38%);
}

.tabbed-content .tabs {
  width: 100%;
}
.tabbed-content .tabs a {
  background: hsl(220, 7%, 14%);
  display: inline-block;
  border-radius: 5px;
  padding: 10px;
  color: var(--font-color);
  cursor: pointer;
}
.tabbed-content .tabs a.active {
  background: #1c2028;
  box-shadow: 1px 1px 5px 1px #1b1e25;
}
.tabbed-content .tabs a:hover {
  background: hsl(220, 7%, 20%);
}
.tabbed-content .tab-hide {
  display: none;
}

footer.main {
  margin-top: 50px;
  background: #1d1e22;
  padding: 30px;
  flex-shrink: 0;
}
footer.main .copyright {
  color: #747474;
  font-size: 90%;
}
footer.main .social-link {
  color: orange;
}
footer.main .social-link img {
  width: 40px;
  fill: currentColor;
  stroke: currentColor;
}
footer.main .social-link svg > path {
  fill: currentColor;
  stroke: currentColor;
  fill: current-color;
}
footer.main .social-link + .social-link {
  margin-left: 20px;
}
footer.main .china {
  background: url(images/pooh-china.png) no-repeat top center;
  background-size: contain;
  height: 140px;
  margin-top: 20px;
}
footer.main .footer-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
}
@media screen and (max-width: 1000px) {
  footer.main .footer-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 800px) {
  footer.main .footer-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
footer.main .footer-wrapper ul {
  list-style: none;
  padding: 0;
  font-size: 90%;
  margin: 0;
}
footer.main .footer-wrapper ul li + li {
  margin-top: 8px;
}
footer.main .footer-wrapper .brand-desc {
  margin-bottom: 10px;
}
footer.main .footer-wrapper .brand-logo {
  width: 80%;
}
footer.main .footer-wrapper .sitemap {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  grid-gap: 10px;
}
@media screen and (max-width: 1100px) {
  footer.main .footer-wrapper .sitemap {
    grid-column: span 1;
  }
}

.created-by-avatar {
  display: block;
  position: relative;
}
.created-by-avatar img {
  width: 60px;
  max-height: 60px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.last-updated {
  color: #747474;
  font-size: 90%;
}

.site-content.deck-detail-page {
  background: url(images/hearth/deck/druid-deck-details-background.jpg) no-repeat top center var(--page-background);
}
.site-content.deck-detail-page.deck-hsclass-death-knight {
  background-image: url(images/hearth/deck/death-knight-deck-details-background.jpg);
}
.site-content.deck-detail-page.deck-hsclass-demon-hunter {
  background-image: url(images/hearth/deck/demon-hunter-deck-details-background.jpg);
}
.site-content.deck-detail-page.deck-hsclass-druid {
  background-image: url(images/hearth/deck/druid-deck-details-background.jpg);
}
.site-content.deck-detail-page.deck-hsclass-hunter {
  background-image: url(images/hearth/deck/hunter-deck-details-background.jpg);
}
.site-content.deck-detail-page.deck-hsclass-mage {
  background-image: url(images/hearth/deck/mage-deck-details-background.jpg);
}
.site-content.deck-detail-page.deck-hsclass-paladin {
  background-image: url(images/hearth/deck/paladin-deck-details-background.jpg);
}
.site-content.deck-detail-page.deck-hsclass-priest {
  background-image: url(images/hearth/deck/priest-deck-details-background.jpg);
}
.site-content.deck-detail-page.deck-hsclass-rogue {
  background-image: url(images/hearth/deck/rogue-deck-details-background.jpg);
}
.site-content.deck-detail-page.deck-hsclass-shaman {
  background-image: url(images/hearth/deck/shaman-deck-details-background.jpg);
}
.site-content.deck-detail-page.deck-hsclass-warlock {
  background-image: url(images/hearth/deck/warlock-deck-details-background.jpg);
}
.site-content.deck-detail-page.deck-hsclass-warrior {
  background-image: url(images/hearth/deck/warrior-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-death-knight {
  background-image: url(images/hearth/deck/death-knight-new-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-demon-hunter {
  background-image: url(images/hearth/deck/demon-hunter-new-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-druid {
  background-image: url(images/hearth/deck/druid-new-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-hunter {
  background-image: url(images/hearth/deck/hunter-new-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-mage {
  background-image: url(images/hearth/deck/mage-new-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-paladin {
  background-image: url(images/hearth/deck/paladin-new-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-priest {
  background-image: url(images/hearth/deck/priest-new-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-rogue {
  background-image: url(images/hearth/deck/rogue-new-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-shaman {
  background-image: url(images/hearth/deck/shaman-new-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-warlock {
  background-image: url(images/hearth/deck/warlock-new-deck-details-background.jpg);
}
.site-content.deck-detail-page.new-deck-hsclass-warrior {
  background-image: url(images/hearth/deck/warrior-new-deck-details-background.jpg);
}
.site-content.deck-detail-page .deck-duels-cards {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  border-color: #18191b;
  margin-bottom: 10px;
  padding: 10px 20px 20px;
}
.site-content.deck-detail-page .deck-duels-cards h4 {
  text-align: center;
  border-bottom: 1px solid #18191b;
  margin-bottom: 10px;
}
.site-content.deck-detail-page .deck-duels-cards .duel-cards {
  display: flex;
  justify-content: center;
}
.site-content.deck-detail-page .deck-duels-cards .deck-duels-card {
  text-align: center;
  font-weight: 700;
}
.site-content.deck-detail-page .card-section {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  border-color: #18191b;
}
.site-content.deck-detail-page .card-section + .card-section {
  margin-top: 20px;
}

.card-section-heading {
  background: rgb(63.1, 63.1, 63.1);
  display: flex;
  padding: 10px;
  font-weight: 700;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

ul.card-section-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
ul.card-section-list li {
  display: flex;
  background-color: rgb(70.75, 70.75, 70.75);
  padding: 5px;
  border-top: 1px solid #3A3A3A;
}
ul.card-section-list li:last-child {
  border-bottom: 1px solid #3A3A3A;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
ul.card-section-list li.card-runeterra {
  position: relative;
}
ul.card-section-list li.card-runeterra:after {
  position: absolute;
  right: 45px;
  top: 5px;
  width: 30px;
  height: 30px;
  background-size: 30px;
  display: block;
  content: "";
}
ul.card-section-list li.card-runeterra.bilgewater {
  background: linear-gradient(to right, rgb(70.75, 70.75, 70.75) 60%, #443a3a) !important;
}
ul.card-section-list li.card-runeterra.bilgewater:after {
  background-image: url(images/runeterra/card/region/bilgewater.png);
}
ul.card-section-list li.card-runeterra.targon {
  background: linear-gradient(to right, rgb(70.75, 70.75, 70.75) 60%, #324e4c) !important;
}
ul.card-section-list li.card-runeterra.targon:after {
  background-image: url(images/runeterra/card/region/targon.png);
}
ul.card-section-list li.card-runeterra.demacia {
  background: linear-gradient(to right, rgb(70.75, 70.75, 70.75) 60%, #494949) !important;
}
ul.card-section-list li.card-runeterra.demacia:after {
  background-image: url(images/runeterra/card/region/demacia.png);
}
ul.card-section-list li.card-runeterra.freljord {
  background: linear-gradient(to right, rgb(70.75, 70.75, 70.75) 60%, #1a203c) !important;
}
ul.card-section-list li.card-runeterra.freljord:after {
  background-image: url(images/runeterra/card/region/freljord.png);
}
ul.card-section-list li.card-runeterra.ionia {
  background: linear-gradient(to right, rgb(70.75, 70.75, 70.75) 60%, #3c1a3a) !important;
}
ul.card-section-list li.card-runeterra.ionia:after {
  background-image: url(images/runeterra/card/region/ionia.png);
}
ul.card-section-list li.card-runeterra.noxus {
  background: linear-gradient(to right, rgb(70.75, 70.75, 70.75) 60%, #3c1d1a) !important;
}
ul.card-section-list li.card-runeterra.noxus:after {
  background-image: url(images/runeterra/card/region/noxus.png);
}
ul.card-section-list li.card-runeterra.piltover-zaun {
  background: linear-gradient(to right, rgb(70.75, 70.75, 70.75) 60%, #3c261a) !important;
}
ul.card-section-list li.card-runeterra.piltover-zaun:after {
  background-image: url(images/runeterra/card/region/piltover-zaun.png);
}
ul.card-section-list li.card-runeterra.shadow-isles {
  background: linear-gradient(to right, rgb(70.75, 70.75, 70.75) 60%, #1a3c22) !important;
}
ul.card-section-list li.card-runeterra.shadow-isles:after {
  background-image: url(images/runeterra/card/region/shadow-isles.png);
}
ul.card-section-list li.card-runeterra.shurima {
  background: linear-gradient(to right, rgb(70.75, 70.75, 70.75) 60%, #3c341a) !important;
}
ul.card-section-list li.card-runeterra.shurima:after {
  background-image: url(images/runeterra/card/region/shurima.png);
}
ul.card-section-list li.card-runeterra.bandle-city {
  background: linear-gradient(to right, rgb(70.75, 70.75, 70.75) 60%, #213c1a) !important;
}
ul.card-section-list li.card-runeterra.bandle-city:after {
  background-image: url(images/runeterra/card/region/bandle-city.png);
}
ul.card-section-list li.card-runeterra .card-count {
  background: #1b0d0c;
  border: 1px solid #786962;
  border-radius: 5px;
  min-width: 40px;
  text-align: center;
  display: inline-block;
  font-size: 15px;
}
ul.card-section-list a {
  font-weight: 600;
  flex-grow: 1;
}
ul.card-section-list .card-count {
  width: 35px;
  font-size: 15px;
  align-self: flex-end;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
}
ul.card-section-list span.card-cost {
  width: 25px;
  text-align: center;
  align-self: flex-end;
  background: #0d4059;
  border-radius: 5px;
  margin-right: 6px;
  font-weight: 600;
}

.deck-creator-bar {
  padding: 10px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  background: #1d1e22;
  display: flex;
  align-items: center;
}
.deck-creator-bar + .deck-creator-bar {
  border-top: 0;
}
.deck-creator-bar .created-by {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  flex-grow: 1;
}
.deck-creator-bar .created-by .user-group-name {
  font-size: 80%;
  color: #747474;
}
.deck-creator-bar .vote-widget {
  height: 100%;
  font-size: 20px;
}
.deck-creator-bar .vote-widget a {
  padding: 20px;
}

.deck-vote-prompt {
  border: 1px solid #4b566f;
  background: #1c2028;
  padding: 10px;
  border-radius: 5px;
  margin-top: 50px;
}
.deck-vote-prompt div.portrait {
  background: url(images/hearth/innkeeper-portrait.png) no-repeat bottom center;
  background-size: cover;
  min-width: 130px;
  filter: drop-shadow(1px 1px 0 #4b566f) drop-shadow(-2px 0px 0 #4b566f);
  margin-top: -80px;
}
@media screen and (max-width: 650px) {
  .deck-vote-prompt div.portrait {
    display: none;
  }
}
.deck-vote-prompt .vote-widget {
  font-size: 20px;
  margin-left: 20px;
  align-self: center;
  display: flex;
}
.deck-vote-prompt .vote-widget a {
  padding: 20px;
}

ul.member-area {
  padding: 0;
  align-items: center;
  height: 100%;
}
ul.member-area li + li {
  margin-left: 25px;
}

/* Pagination */
ul.pagination {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding-left: 0;
}
ul.pagination li a {
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  text-decoration: none;
  background-color: #171920;
  border: 1px solid rgb(45, 46, 49);
}
ul.pagination li.disabled a {
  color: #747474;
  cursor: not-allowed;
}
ul.pagination li.active a {
  color: #FFF;
}

/* Article Themes */
article.body-themed {
  padding-top: 180px;
  background-position: top center;
  background-color: var(--site-background-dark);
  background-repeat: no-repeat;
  position: relative;
}
article.body-themed.body-blizzard {
  background-image: url(images/cms/headers/blizzard.jpg);
}
article.body-themed.body-lunar-new-year {
  background-image: url(images/cms/headers/lunar-new-year.jpg);
}
article.body-themed.body-hallows-end {
  background-image: url(images/cms/headers/hallows-end.jpg);
}
article.body-themed.body-rastakhans-rumble {
  background-image: url(images/cms/headers/rastakhans-rumble.jpg);
}
article.body-themed.body-patch {
  background-image: url(images/cms/headers/patch.jpg);
}
article.body-themed.body-esports {
  background-image: url(images/cms/headers/esports.jpg);
}
article.body-themed.body-curse-of-naxxramas {
  background-image: url(images/cms/headers/curse-of-naxxramas.jpg);
}
article.body-themed.body-gnomes-with-cards {
  background-image: url(images/cms/headers/gnomes-with-cards.jpg);
}
article.body-themed.body-hct {
  background-image: url(images/cms/headers/hct.jpg);
}
article.body-themed.body-goblins-vs-gnomes {
  background-image: url(images/cms/headers/goblins-vs-gnomes.jpg);
}
article.body-themed.body-tavern-brawl {
  background-image: url(images/cms/headers/tavern-brawl.jpg);
}
article.body-themed.body-the-grand-tournament {
  background-image: url(images/cms/headers/the-grand-tournament.jpg);
}
article.body-themed.body-hearthstone-classic {
  background-image: url(images/cms/headers/hearthstone-classic.jpg);
}
article.body-themed.body-hearthstone-box {
  background-image: url(images/cms/headers/hearthstone-box.jpg);
}
article.body-themed.body-blackrock-mountain {
  background-image: url(images/cms/headers/blackrock-mountain.jpg);
}
article.body-themed.body-journey-to-ungoro {
  background-image: url(images/cms/headers/journey-to-ungoro.jpg);
}
article.body-themed.body-knights-of-the-frozen-throne {
  background-image: url(images/cms/headers/knights-of-the-frozen-throne.jpg);
}
article.body-themed.body-kobolds-and-catacombs {
  background-image: url(images/cms/headers/kobolds-and-catacombs.jpg);
}
article.body-themed.body-mean-streets-of-gadgetzan {
  background-image: url(images/cms/headers/mean-streets-of-gadgetzan.jpg);
}
article.body-themed.body-one-night-in-karazhan {
  background-image: url(images/cms/headers/one-night-in-karazhan.jpg);
}
article.body-themed.body-the-boomsday-project {
  background-image: url(images/cms/headers/the-boomsday-project.jpg);
}
article.body-themed.body-the-league-of-explorers {
  background-image: url(images/cms/headers/the-league-of-explorers.jpg);
}
article.body-themed.body-the-witchwood {
  background-image: url(images/cms/headers/the-witchwood.jpg);
}
article.body-themed.body-whispers-of-the-old-gods {
  background-image: url(images/cms/headers/whispers-of-the-old-gods.jpg);
}
article.body-themed.body-rise-of-shadows {
  background-image: url(images/cms/headers/rise-of-shadows.jpg);
}
article.body-themed.body-demon-hunter {
  background-image: url(images/cms/headers/demon-hunter.jpg);
}
article.body-themed.body-druid {
  background-image: url(images/cms/headers/druid.jpg);
}
article.body-themed.body-hunter {
  background-image: url(images/cms/headers/hunter.jpg);
}
article.body-themed.body-mage {
  background-image: url(images/cms/headers/mage.jpg);
}
article.body-themed.body-paladin {
  background-image: url(images/cms/headers/paladin.jpg);
}
article.body-themed.body-priest {
  background-image: url(images/cms/headers/priest.jpg);
}
article.body-themed.body-rogue {
  background-image: url(images/cms/headers/rogue.jpg);
}
article.body-themed.body-shaman {
  background-image: url(images/cms/headers/shaman.jpg);
}
article.body-themed.body-warlock {
  background-image: url(images/cms/headers/warlock.jpg);
}
article.body-themed.body-warrior {
  background-image: url(images/cms/headers/warrior.jpg);
}
article.body-themed.body-saviors-of-uldum {
  background-image: url(images/cms/headers/saviors-of-uldum.jpg);
}
article.body-themed.body-tombs-of-terror {
  background-image: url(images/cms/headers/tombs-of-terror.jpg);
}
article.body-themed.body-galakronds-awakening {
  background-image: url(images/cms/headers/galakronds-awakening.jpg);
}
article.body-themed.body-ashes-of-outland {
  background-image: url(images/cms/headers/ashes-of-outland.jpg);
}
article.body-themed.body-madness-at-the-darkmoon-faire {
  background-image: url(images/cms/headers/madness-at-the-darkmoon-faire.jpg);
}
article.body-themed.body-oozefest {
  background-image: url(images/cms/headers/oozefest.jpg);
}
article.body-themed.body-forged-in-the-barrens {
  background-image: url(images/cms/headers/forged-in-the-barrens.jpg);
}
article.body-themed.body-united-in-stormwind {
  background-image: url(images/cms/headers/united-in-stormwind.jpg);
}
article.body-themed.body-fractured-in-alterac-valley {
  background-image: url(images/cms/headers/fractured-in-alterac-valley.jpg);
}
article.body-themed.body-uldum-essentials {
  background-image: url(images/cms/headers/uldum-essentials-header.png);
  background-color: #fff2d8;
  color: #191919;
}
article.body-themed.body-uldum-essentials a.card-tooltip.rarity-basic, article.body-themed.body-uldum-essentials a.card-tooltip.rarity-invalid, article.body-themed.body-uldum-essentials a.card-tooltip.rarity-none, article.body-themed.body-uldum-essentials a.card-tooltip.rarity-free, article.body-themed.body-uldum-essentials a.rarity-basic, article.body-themed.body-uldum-essentials a.rarity-invalid, article.body-themed.body-uldum-essentials a.rarity-none, article.body-themed.body-uldum-essentials a.rarity-free {
  color: #000000;
}
article.body-themed.body-uldum-essentials hr {
  background: url(images/cms/hearthstone-hr.png) top center no-repeat;
  height: 50px;
  border: 0;
  background-size: contain;
}
article.body-themed.body-uldum-essentials h2, article.body-themed.body-uldum-essentials h3, article.body-themed.body-uldum-essentials h4 {
  color: #191919;
}
article.body-themed.body-uldum-essentials .deck-embed {
  border: 1px solid #a79570;
  background: #efe2cb;
}
article.body-themed.body-uldum-essentials .deck-embed header {
  background: #e8d6ae;
  border-bottom: 1px solid #a79570;
}
article.body-themed.body-uldum-essentials .deck-embed .card-count {
  color: #000000;
}

label {
  display: block;
  font-weight: 400;
}

form span.helptext {
  display: block;
  font-size: 14px;
  color: #747474;
}

strong {
  font-weight: 600;
}

blockquote, pre {
  background: var(--block-background);
  margin: 0;
  border: 1px solid rgb(17, 16, 16);
  padding: 10px;
  border-radius: 5px;
}
blockquote header, pre header {
  padding: 10px;
  border-bottom: 1px solid rgb(17, 16, 16);
  background: #131517;
  border-radius: 5px;
}
blockquote header a, blockquote header a:visited, pre header a, pre header a:visited {
  color: var(--font-color);
}
blockquote header a:hover, pre header a:hover {
  color: #FFF;
}
blockquote .quote-body, pre .quote-body {
  padding: 10px;
}
blockquote.blizzard, pre.blizzard {
  color: #00b4ff;
}
blockquote.blizzard .quote-body strong, blockquote.blizzard .quote-body b, blockquote.blizzard .quote-body h1, blockquote.blizzard .quote-body h2, blockquote.blizzard .quote-body h3, blockquote.blizzard .quote-body h4, blockquote.blizzard .quote-body h5, blockquote.blizzard .quote-body h6, blockquote.blizzard .quote-body a, blockquote.blizzard .quote-body em, blockquote.blizzard .quote-body i, pre.blizzard .quote-body strong, pre.blizzard .quote-body b, pre.blizzard .quote-body h1, pre.blizzard .quote-body h2, pre.blizzard .quote-body h3, pre.blizzard .quote-body h4, pre.blizzard .quote-body h5, pre.blizzard .quote-body h6, pre.blizzard .quote-body a, pre.blizzard .quote-body em, pre.blizzard .quote-body i {
  color: var(--heading-color);
}
blockquote.blizzard .quote-body strong, blockquote.blizzard .quote-body b, blockquote.blizzard .quote-body em, blockquote.blizzard .quote-body i, pre.blizzard .quote-body strong, pre.blizzard .quote-body b, pre.blizzard .quote-body em, pre.blizzard .quote-body i {
  color: var(--font-color);
}
blockquote.blizzard .quote-body a, pre.blizzard .quote-body a {
  color: var(--link-color);
}
blockquote.blizzard header, pre.blizzard header {
  background: linear-gradient(45deg, #0c141d 60%, #013669);
}
blockquote.blizzard header::before, pre.blizzard header::before {
  content: "";
  width: 22px;
  height: 15px;
  background: url(images/blockquote/logos/blizzard.gif);
  display: inline-block;
}
blockquote.riot header, pre.riot header {
  background: linear-gradient(45deg, #1d0c0c 60%, #421108);
}
blockquote.riot header::before, pre.riot header::before {
  content: "";
  width: 20px;
  height: 19px;
  background: url(images/blockquote/logos/riot.png);
  display: inline-block;
  background-size: cover;
  vertical-align: middle;
}
blockquote.wizards header, pre.wizards header {
  background: linear-gradient(45deg, #2e2654 60%, #495da7);
}
blockquote.rhino header, pre.rhino header {
  background: linear-gradient(45deg, #083342 60%, #082742);
}
blockquote.rhino header::before, pre.rhino header::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(images/blockquote/logos/rhino.png);
  display: inline-block;
  background-size: cover;
  vertical-align: middle;
}
blockquote.ooc header, pre.ooc header {
  background: linear-gradient(45deg, #08423f 60%, #083542);
}
blockquote blockquote, pre blockquote {
  color: var(--font-color);
  padding: 10px;
}

.patch-date {
  color: #747474;
  font-size: 13px;
}

.deck-embed {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  background: #1d1e22;
  border: 2px solid #292929;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.deck-embed header, .deck-embed footer {
  display: flex;
  flex-direction: row;
  padding: 10px;
  background: var(--block-background);
  align-items: center;
}
.deck-embed header .meta, .deck-embed footer .meta {
  color: #747474;
  font-size: 13px;
}
.deck-embed header .cost, .deck-embed footer .cost {
  color: #2478bb;
}
.deck-embed header .cost.cost-craft, .deck-embed footer .cost.cost-craft {
  color: hsl(161, 91%, 39%);
}
.deck-embed header .score, .deck-embed footer .score {
  color: #18AC18;
}
.deck-embed header .copy, .deck-embed footer .copy {
  margin-left: auto;
}
.deck-embed header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.deck-embed header .deck-image {
  margin-right: 10px;
}
.deck-embed footer {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.deck-embed footer .meta {
  line-height: 13px;
}
.deck-embed footer span + span {
  margin-left: 10px;
}
.deck-embed > div {
  padding: 10px;
}
.deck-embed ul {
  list-style: none;
  padding: 0;
  margin: 0;
  column-count: auto;
  column-width: 280px;
}
.deck-embed ul li {
  padding: 5px;
}
.deck-embed ul li .card-count {
  font-size: 90%;
}
.deck-embed .deck-info {
  flex-grow: 1;
}
.deck-embed .vote-widget {
  height: 100%;
  font-size: 16px;
}
.deck-embed .vote-widget a {
  padding: 10px 20px;
}

.vote-widget {
  background: var(--site-background-dark);
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #3A3A3A;
  font-size: 80%;
  margin-right: 10px;
}
.vote-widget a {
  padding: 5px 10px;
  display: inline-block;
}
.vote-widget a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.vote-widget a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.vote-widget .up, .vote-widget .down {
  background: var(--widget-background-contrast);
  transition: background 0.3s;
}
.vote-widget .up:hover, .vote-widget .down:hover {
  background: var(--widget-background-hover);
}
.vote-widget .up {
  color: #18AC18;
}
.vote-widget .down {
  color: #DF4444;
}
.vote-widget .score {
  color: var(--font-color);
}
.vote-widget.upvoted .up {
  background: #18AC18;
  color: #FFF;
  text-shadow: 0px 0px 5px black;
}
.vote-widget.downvoted .down {
  background: #DF4444;
  color: #FFF;
  text-shadow: 0px 0px 5px black;
}

.author-byline {
  color: #747474;
  font-size: 13px;
}

span.member-name.usergroup-staff a, span.member-name.usergroup-administrator a, span.member-name.usergroup-founder a, span.member-name.usergroup-ceo a, span.member-name.usergroup-senior-writer a, span.member-name.usergroup-senior-editor a, span.member-name.usergroup-robot a, span.member-name.usergroup-global-moderator a {
  color: #379FE5;
  display: inline-block;
}
span.member-name.usergroup-staff a:hover, span.member-name.usergroup-administrator a:hover, span.member-name.usergroup-founder a:hover, span.member-name.usergroup-ceo a:hover, span.member-name.usergroup-senior-writer a:hover, span.member-name.usergroup-senior-editor a:hover, span.member-name.usergroup-robot a:hover, span.member-name.usergroup-global-moderator a:hover {
  color: #64B5EB;
}
span.member-name.usergroup-staff-writer a {
  color: #1ABC9C;
}
span.member-name.usergroup-staff-writer a:hover {
  color: #29D3B1;
}
span.member-name.usergroup-director-of-fun a {
  color: #ff9ff3;
}
span.member-name.usergroup-director-of-fun a:hover {
  color: #ff9ff3;
}

img.image-border {
  border: 2px solid #3A3A3A;
}

.tippy-tooltip.hscard-theme, .tippy-tooltip.transparent-theme, .tippy-tooltip.oocprofile-theme {
  background-color: transparent;
}

.tippy-tooltip.runeterra-mechanic-theme {
  text-align: left;
  background: url(images/transparent-bgs/asfalt-dark.png), #252b2d;
  box-shadow: 0px 0px 5px #1e1f1e;
  border: 2px solid #918c79;
}

.tippy-tooltip.runeterra-related-theme {
  background: url(images/transparent-bgs/asfalt-dark.png), #252b2d;
  box-shadow: 0px 0px 5px #1e1f1e;
  border: 2px solid #918c79;
  max-width: 1380px !important;
}
.tippy-tooltip.runeterra-related-theme .tippy-backdrop {
  display: none;
}
.tippy-tooltip.runeterra-related-theme img {
  display: inline;
}

.tippy-tooltip.oocprofile-theme {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  border-radius: 5px;
  border-color: #292929;
  padding: 0;
  max-width: 450px;
  min-width: 350px;
  font-size: 100%;
  box-shadow: 0px 0px 5px #1e1f1e;
}
.tippy-tooltip.oocprofile-theme .member-tooltip .member-details {
  padding: 10px;
}
.tippy-tooltip.oocprofile-theme .member-tooltip .member-header-tt {
  width: 100%;
  height: 90px;
  background-size: cover;
  position: relative;
  border-bottom: 1px solid #292929;
}
.tippy-tooltip.oocprofile-theme .member-tooltip .member-header-tt .interior {
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  flex-direction: row;
  background: linear-gradient(45deg, #1e1f1e, transparent);
  padding-left: 10px;
}
.tippy-tooltip.oocprofile-theme .member-tooltip .member-header-tt .interior h6 {
  text-align: left;
  margin-bottom: 0px;
}
.tippy-tooltip.oocprofile-theme .member-tooltip .member-header-tt .interior .created-by-avatar {
  margin-right: 10px;
}
.tippy-tooltip.oocprofile-theme .member-tooltip .member-header-tt .interior .created-by-avatar img {
  width: 60px;
}
.tippy-tooltip.oocprofile-theme .member-tooltip .profile-stats {
  flex-direction: column;
  font-size: 80%;
  text-align: left;
  display: table;
}
.tippy-tooltip.oocprofile-theme .member-tooltip .profile-stats .stat {
  display: table-row;
}
.tippy-tooltip.oocprofile-theme .member-tooltip .profile-stats .stat .name, .tippy-tooltip.oocprofile-theme .member-tooltip .profile-stats .stat .value {
  display: table-cell;
  padding: 5px;
}
.tippy-tooltip.oocprofile-theme .member-tooltip .profile-stats .stat + .stat {
  border-top: 1px solid #292929;
}

ul.item-stats {
  padding-left: 0;
  display: grid;
  max-width: 950px;
  grid-template: repeat(5, 1fr)/repeat(6, 1fr);
  grid-template-rows: min-content 1fr;
  grid-gap: 10px;
  grid-auto-flow: row;
}
@media screen and (max-width: 1000px) {
  ul.item-stats {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 850px) {
  ul.item-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 650px) {
  ul.item-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 550px) {
  ul.item-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
ul.item-stats.card-stats {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 650px) {
  ul.item-stats.card-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 550px) {
  ul.item-stats.card-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
ul.item-stats li {
  min-width: 150px;
  list-style: none;
  text-align: left;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  background: #1d1e22;
  padding: 5px;
  display: block;
  border-radius: 5px;
  transform: skew(-5deg);
}
ul.item-stats li span {
  transform: skew(5deg);
  display: block;
}
ul.item-stats li.hsreplay-powered {
  background: #1D3657;
  background: linear-gradient(to right, #1d1e22 25%, #1D3657);
  border: 1px solid #000000;
  grid-column: 1/3;
  display: flex;
  flex-direction: row;
  align-content: center;
  padding: 5px 10px;
}
@media screen and (max-width: 650px) {
  ul.item-stats li.hsreplay-powered {
    grid-column: 1/4;
  }
}
ul.item-stats li.hsreplay-powered:hover {
  background: linear-gradient(to right, #202125 25%, rgb(36, 62, 97));
  border: 1px solid #131313;
}
ul.item-stats li.hsreplay-powered .winrate {
  color: #18AC18;
  flex-grow: 1;
}
ul.item-stats li.hsreplay-powered .winrate.negative {
  color: #DF4444;
}
ul.item-stats li.hsreplay-powered .winrate.old {
  color: #969696;
}
ul.item-stats li.hsreplay-powered .winrate.neutral {
  color: #DF9444;
}
ul.item-stats li.hsreplay-powered .winrate span {
  transform: skew(0deg);
}
ul.item-stats li.hsreplay-powered .winrate .desc {
  color: #747474;
  font-size: 13px;
  line-height: 10px;
  text-transform: uppercase;
}
ul.item-stats li.hsreplay-powered .winrate .value {
  font-size: 32px;
  line-height: 40px;
  font-weight: 800;
  opacity: 0.75;
}
ul.item-stats li.hsreplay-powered a {
  color: #FFF;
  display: block;
  font-weight: 400;
  display: flex;
  width: 100%;
}
ul.item-stats li.hsreplay-powered a:hover {
  text-decoration: none;
}
ul.item-stats li.hsreplay-powered .powered-by {
  margin-left: auto;
}
ul.item-stats li.hsreplay-powered .powered-by span {
  transform: skew(0deg);
}
ul.item-stats li.hsreplay-powered .powered-by .desc {
  color: #747474;
  font-size: 13px;
  padding-left: 22px;
}
ul.item-stats li.hsreplay-powered .powered-by .hsrbrand {
  display: block;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  background-image: url(images/hsr-play-white.png);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: left center;
  padding-left: 22px;
  font-weight: 800;
}
ul.item-stats .stat-type {
  font-size: 12px;
  color: #747474;
  text-transform: uppercase;
}
ul.item-stats .stat-dust + .stat-value {
  color: #379fe5;
}
ul.item-stats .stat-winrate {
  font-weight: 600;
  text-transform: none;
  color: #FFF;
}
ul.item-stats .stat-winrate + .stat-value {
  color: #18AC18;
  font-weight: 600;
}
ul.item-stats .stat-cost + .stat-value, ul.item-stats .stat-attack + .stat-value, ul.item-stats .stat-health + .stat-value {
  font-size: 22px;
}
ul.item-stats .stat-cost + .stat-value {
  color: #3e87e3;
}
ul.item-stats .stat-attack + .stat-value {
  color: #fedc2b;
}
ul.item-stats .stat-health + .stat-value {
  color: #e02b26;
}

h3.hsclass-header {
  text-align: center;
  height: 125px;
  padding: 45px 0 0 0;
  background: url(images/hearth/class-headers/neutral.png) center center no-repeat;
  color: #d4d4d4;
}
h3.hsclass-header.hsclass-death-knight {
  background-image: url(images/hearth/class-headers/death-knight.png);
}
h3.hsclass-header.hsclass-demon-hunter {
  background-image: url(images/hearth/class-headers/demon-hunter.png);
}
h3.hsclass-header.hsclass-druid {
  background-image: url(images/hearth/class-headers/druid.png);
}
h3.hsclass-header.hsclass-hunter {
  background-image: url(images/hearth/class-headers/hunter.png);
}
h3.hsclass-header.hsclass-mage {
  background-image: url(images/hearth/class-headers/mage.png);
}
h3.hsclass-header.hsclass-paladin {
  background-image: url(images/hearth/class-headers/paladin.png);
}
h3.hsclass-header.hsclass-priest {
  background-image: url(images/hearth/class-headers/priest.png);
}
h3.hsclass-header.hsclass-rogue {
  background-image: url(images/hearth/class-headers/rogue.png);
}
h3.hsclass-header.hsclass-shaman {
  background-image: url(images/hearth/class-headers/shaman.png);
}
h3.hsclass-header.hsclass-warlock {
  background-image: url(images/hearth/class-headers/warlock.png);
}
h3.hsclass-header.hsclass-warrior {
  background-image: url(images/hearth/class-headers/warrior.png);
}
h3.hsclass-header.card-backs {
  background-image: url(images/hearth/class-headers/card-backs.png);
}
h3.hsclass-header.heroes {
  background-image: url(images/hearth/class-headers/heroes.png);
}

.card-reveals {
  position: relative;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.card-reveals.card-reveals-no-max {
  max-width: 100%;
}

.card-image {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card-image .card-rating-embed {
  display: inline-block;
}
.card-image .card-rating-embed ul {
  margin: 0 auto;
}
.card-image.card-image-mythgard {
  margin: 10px 20px;
}
.card-image .card-text {
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  background: #0F0F0F;
  width: 100%;
  max-width: 240px;
  margin-top: auto;
}

.card-reveals .card-image-snap {
  display: flex;
  flex-direction: column;
}

.card-image-snap.card-image-snap {
  margin: 10px 20px;
}

.card-image img {
  max-width: 100%;
}

.card-image.card-image-doesnt-exist {
  width: 200px;
  display: inline-block;
}

ul.flex-list {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  align-items: center;
}
ul.flex-list li + li {
  margin-left: 10px;
}
@media screen and (max-width: 650px) {
  ul.flex-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
  ul.flex-list li + li {
    margin: 0;
  }
  ul.flex-list .button {
    width: 100%;
  }
}
@media screen and (max-width: 450px) {
  ul.flex-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

.deck-widget {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  padding: 5px;
  overflow: hidden;
}
.deck-widget + .deck-widget {
  margin-top: 5px;
}
.deck-widget header {
  display: flex;
  flex-direction: row;
}
.deck-widget header .deck-image {
  margin-top: 3px;
  margin-right: 5px;
}
.deck-widget .deck-details {
  width: calc(100% - 45px);
}
.deck-widget .name {
  overflow: hidden;
}
.deck-widget .name a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.deck-widget .created-by {
  color: #747474;
  font-size: 13px;
}
.deck-widget .stats {
  color: #747474;
  font-size: 13px;
  width: 100%;
  margin-top: 5px;
  margin-left: 40px;
}
.deck-widget .stats span + span {
  margin-left: 10px;
}
.deck-widget .stats .score {
  color: #18AC18;
}
.deck-widget .stats .cost {
  color: #2478bb;
}
.deck-widget .stats .cost.cost-craft {
  color: hsl(161, 91%, 39%);
}

.deck-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 10px;
  margin: 10px;
}
.deck-collection.deck-collection-two {
  margin: 0 auto;
  max-width: 650px;
}
.deck-collection.deck-collection-one {
  margin: 0 auto;
  max-width: 450px;
}

.icon-32 {
  width: 32px;
  height: 32px;
}

.mana-crystal {
  position: relative;
  width: 22px;
  height: 12.7px;
  background-color: #53b0dd;
  margin: 6.35px 0;
  transform: rotate(30deg);
}

.mana-crystal:before,
.mana-crystal:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
}

.mana-crystal:before {
  bottom: 100%;
  border-bottom: 6.35px solid #53b0dd;
}

.mana-crystal:after {
  top: 100%;
  width: 0;
  border-top: 6.35px solid #53b0dd;
}

.listing-formset form {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 5px;
}
.listing-formset form .fields-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
  list-style-type: none;
}
.listing-formset form p {
  width: calc(33% - 20px);
  margin: 10px;
}
.listing-formset form input, .listing-formset form select {
  width: 100%;
}
.listing-formset form input[type=checkbox], .listing-formset form select[type=checkbox] {
  width: auto;
}

.write-a-guide {
  padding: 20px 10px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
}

input[name=name], input[name=title] {
  width: 600px;
}

.col-score {
  text-align: center;
}

.col-cost, .col-personalized-cost {
  text-align: center;
}

.col-type {
  text-align: center;
}

i.icon-hsclass {
  background-size: cover;
  width: 40px;
  height: 40px;
  display: block;
}
i.icon-hsclass.small {
  width: 22px;
  height: 22px;
}
i.icon-hsclass.large {
  width: 60px;
  height: 60px;
}
i.icon-hsclass.inline {
  display: inline-block;
}
i.icon-hsclass.icon-hsclass-death-knight {
  background-image: url(images/hearth/class-icons/death-knight.png);
}
i.icon-hsclass.icon-hsclass-demon-hunter {
  background-image: url(images/hearth/class-icons/demon-hunter.png);
}
i.icon-hsclass.icon-hsclass-druid {
  background-image: url(images/hearth/class-icons/druid.png);
}
i.icon-hsclass.icon-hsclass-hunter {
  background-image: url(images/hearth/class-icons/hunter.png);
}
i.icon-hsclass.icon-hsclass-mage {
  background-image: url(images/hearth/class-icons/mage.png);
}
i.icon-hsclass.icon-hsclass-paladin {
  background-image: url(images/hearth/class-icons/paladin.png);
}
i.icon-hsclass.icon-hsclass-priest {
  background-image: url(images/hearth/class-icons/priest.png);
}
i.icon-hsclass.icon-hsclass-rogue {
  background-image: url(images/hearth/class-icons/rogue.png);
}
i.icon-hsclass.icon-hsclass-shaman {
  background-image: url(images/hearth/class-icons/shaman.png);
}
i.icon-hsclass.icon-hsclass-warlock {
  background-image: url(images/hearth/class-icons/warlock.png);
}
i.icon-hsclass.icon-hsclass-warrior {
  background-image: url(images/hearth/class-icons/warrior.png);
}
i.icon-hsclass.icon-hsclass-neutral {
  background-image: url(images/hearth/class-icons/neutral.png);
}
i.icon-hsclass.icon-hsclass-diablo {
  background-image: url(images/hearth/class-icons/diablo.png);
}

h1 > i.icon-hsclass {
  width: 30px;
  height: 30px;
  display: inline-block;
}

i.icon-standard {
  background-size: cover;
  width: 22px;
  height: 22px;
  display: inline-block;
  mask: url(images/hearth/set-icons/rotation-gryphon.svg) no-repeat;
  mask-image: url(images/hearth/set-icons/rotation-gryphon.svg) no-repeat;
  -webkit-mask: url(images/hearth/set-icons/rotation-gryphon.svg) no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  vertical-align: bottom;
  margin-right: 5px;
  background-color: #e4d544;
  vertical-align: text-bottom;
}

i.icon-wild {
  background-size: cover;
  width: 22px;
  height: 22px;
  display: inline-block;
  mask: url(images/hearth/set-icons/mode-wild.svg) no-repeat;
  mask-image: url(images/hearth/set-icons/mode-wild.svg) no-repeat;
  -webkit-mask: url(images/hearth/set-icons/mode-wild.svg) no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  vertical-align: bottom;
  margin-right: 5px;
  background-color: #18AC18;
  vertical-align: text-bottom;
}

i.icon-classic {
  background-size: cover;
  width: 22px;
  height: 22px;
  display: inline-block;
  mask: url(images/hearth/set-icons/mode-classic.svg) no-repeat;
  mask-image: url(images/hearth/set-icons/mode-classic.svg) no-repeat;
  -webkit-mask: url(images/hearth/set-icons/mode-classic.svg) no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  vertical-align: bottom;
  margin-right: 5px;
  background-color: #44bbe4;
  vertical-align: text-bottom;
}

i.icon-twist {
  background-size: cover;
  width: 22px;
  height: 22px;
  display: inline-block;
  mask: url(images/hearth/set-icons/mode-twist.svg) no-repeat;
  mask-image: url(images/hearth/set-icons/mode-twist.svg) no-repeat;
  -webkit-mask: url(images/hearth/set-icons/mode-twist.svg) no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  vertical-align: bottom;
  margin-right: 5px;
  background-color: #44bbe4;
  vertical-align: text-bottom;
}

i.icon-battlegrounds {
  background-size: cover;
  width: 22px;
  height: 22px;
  display: inline-block;
  mask: url(images/hearth/set-icons/mode-battlegrounds.svg) no-repeat;
  mask-image: url(images/hearth/set-icons/mode-battlegrounds.svg) no-repeat;
  -webkit-mask: url(images/hearth/set-icons/mode-battlegrounds.svg) no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  vertical-align: bottom;
  margin-right: 5px;
  background-color: #FFFFFF;
  vertical-align: text-bottom;
}

i.icon-duels {
  background-size: cover;
  width: 22px;
  height: 22px;
  display: inline-block;
  mask: url(images/hearth/set-icons/mode-duels.svg) no-repeat;
  mask-image: url(images/hearth/set-icons/mode-duels.svg) no-repeat;
  -webkit-mask: url(images/hearth/set-icons/mode-duels.svg) no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  vertical-align: bottom;
  margin-right: 5px;
  background-color: #e05151;
  vertical-align: text-bottom;
}

i.icon-game {
  background-size: cover;
  width: 22px;
  height: 22px;
  display: inline-block;
  mask-size: cover;
  -webkit-mask-size: cover;
  vertical-align: bottom;
  margin-right: 5px;
  vertical-align: text-bottom;
}
i.icon-game.icon-game-hearthstone {
  mask: url(images/game-logo-hearthstone.svg) no-repeat;
  mask-image: url(images/game-logo-hearthstone.svg) no-repeat;
  -webkit-mask: url(images/game-logo-hearthstone.svg) no-repeat;
  background-color: var(--color-blue-dark);
}
i.icon-game.icon-game-runeterra, i.icon-game.icon-game-legends-of-runeterra {
  mask: url(images/game-logo-runeterra.svg) no-repeat;
  mask-image: url(images/game-logo-runeterra.svg) no-repeat;
  -webkit-mask: url(images/game-logo-runeterra.svg) no-repeat;
  background-color: var(--color-green-dark);
}
i.icon-game.icon-game-magic-arena {
  mask: url(images/game-logo-magic-arena.svg) no-repeat;
  mask-image: url(images/game-logo-magic-arena.svg) no-repeat;
  -webkit-mask: url(images/game-logo-magic-arena.svg) no-repeat;
  background-color: var(--color-red-dark);
}
i.icon-game.icon-game-mythgard {
  mask: url(images/game-logo-mythgard.svg) no-repeat;
  mask-image: url(images/game-logo-mythgard.svg) no-repeat;
  -webkit-mask: url(images/game-logo-mythgard.svg) no-repeat;
  background-color: var(--color-pink-dark);
}
i.icon-game.icon-game-mercenaries {
  mask: url(images/game-logo-mercenaries.svg) no-repeat;
  mask-image: url(images/game-logo-mercenaries.svg) no-repeat;
  -webkit-mask: url(images/game-logo-mercenaries.svg) no-repeat;
  background-color: var(--color-red-dark);
}
i.icon-game.icon-game-pokemon {
  mask: url(images/game-logo-pokemon.svg) no-repeat;
  mask-image: url(images/game-logo-pokemon.svg) no-repeat;
  -webkit-mask: url(images/game-logo-pokemon.svg) no-repeat;
  background-color: var(--color-blue-dark);
}
i.icon-game.icon-game-yugioh, i.icon-game.icon-game-yu-gi-oh {
  mask: url(images/game-logo-yugioh.svg) no-repeat;
  mask-image: url(images/game-logo-yugioh.svg) no-repeat;
  -webkit-mask: url(images/game-logo-yugioh.svg) no-repeat;
  background-color: var(--color-yellow-dark);
}

i.icon-runeterra-region {
  background-size: cover;
  width: 40px;
  height: 40px;
  display: block;
}
i.icon-runeterra-region.small {
  width: 22px;
  height: 22px;
}
i.icon-runeterra-region.icon-runeterra-region-demacia {
  background-image: url(images/runeterra/card/region/demacia.png);
}
i.icon-runeterra-region.icon-runeterra-region-freljord {
  background-image: url(images/runeterra/card/region/freljord.png);
}
i.icon-runeterra-region.icon-runeterra-region-ionia {
  background-image: url(images/runeterra/card/region/ionia.png);
}
i.icon-runeterra-region.icon-runeterra-region-noxus {
  background-image: url(images/runeterra/card/region/noxus.png);
}
i.icon-runeterra-region.icon-runeterra-region-piltover-zaun {
  background-image: url(images/runeterra/card/region/piltover-zaun.png);
}
i.icon-runeterra-region.icon-runeterra-region-shadow-isles {
  background-image: url(images/runeterra/card/region/shadow-isles.png);
}
i.icon-runeterra-region.icon-runeterra-region-bilgewater {
  background-image: url(images/runeterra/card/region/bilgewater.png);
}
i.icon-runeterra-region.icon-runeterra-region-targon {
  background-image: url(images/runeterra/card/region/targon.png);
}
i.icon-runeterra-region.icon-runeterra-region-shurima {
  background-image: url(images/runeterra/card/region/shurima.png);
}
i.icon-runeterra-region.icon-runeterra-region-bandle-city {
  background-image: url(images/runeterra/card/region/bandle-city.png);
}

.deck-widget-runeterra i.icon-runeterra-region {
  width: 25px;
  height: 25px;
}

form button[type=submit]:last-child {
  margin-top: 10px;
}

.responsive-tabs {
  display: none;
  margin-top: 10px;
}
.responsive-tabs a {
  background: #27292d;
  padding: 10px;
  cursor: pointer;
  flex-grow: 1;
  text-align: center;
  border: 1px solid #0c0c0c;
}
.responsive-tabs a.active {
  background: #1c2028;
  color: #FEFEFE;
}
.responsive-tabs a + a {
  border-left: 0px;
}
@media screen and (max-width: 1000px) {
  .responsive-tabs {
    display: flex;
  }
}

div#id_faction {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
}
div#id_faction input {
  display: none;
}
div#id_faction input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  width: 80px;
  margin: 10px;
}
div#id_faction input + label[data-label=Clear]:before {
  background-image: url(images/mythgard/faction-icons/clear.png);
}
div#id_faction input + label[data-label=Aztlan]:before {
  background-image: url(images/mythgard/faction-icons/aztlan.png);
}
div#id_faction input + label[data-label=Oberos]:before {
  background-image: url(images/mythgard/faction-icons/oberos.png);
}
div#id_faction input + label[data-label=Norden]:before {
  background-image: url(images/mythgard/faction-icons/norden.png);
}
div#id_faction input + label[data-label=Dreni]:before {
  background-image: url(images/mythgard/faction-icons/dreni.png);
}
div#id_faction input + label[data-label=Parsa]:before {
  background-image: url(images/mythgard/faction-icons/parsa.png);
}
div#id_faction input + label[data-label=Harmony]:before {
  background-image: url(images/mythgard/faction-icons/harmony.png);
}
div#id_faction input + label:before {
  display: block;
  height: 60px;
  width: 60px;
  background-size: 60px;
  filter: grayscale(100%);
  opacity: 0.8;
  content: "";
  margin: auto;
}
div#id_faction input:checked + label {
  font-weight: 700;
}
div#id_faction input:checked + label:before {
  filter: none;
  opacity: 1;
}

div#id_hsclass {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
}
div#id_hsclass > div {
  width: 90px;
  text-align: center;
}
div#id_hsclass input {
  display: none;
}
div#id_hsclass input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  width: 80px;
  margin: 0;
  padding: 0;
  background: none;
}
div#id_hsclass input + label[data-label=Neutral]:before {
  background-image: url(images/hearth/class-icons/neutral.png);
}
div#id_hsclass input + label[data-label="Death Knight"]:before {
  background-image: url(images/hearth/class-icons/death-knight.png);
}
div#id_hsclass input + label[data-label="Demon Hunter"]:before {
  background-image: url(images/hearth/class-icons/demon-hunter.png);
}
div#id_hsclass input + label[data-label=Druid]:before {
  background-image: url(images/hearth/class-icons/druid.png);
}
div#id_hsclass input + label[data-label=Hunter]:before {
  background-image: url(images/hearth/class-icons/hunter.png);
}
div#id_hsclass input + label[data-label=Mage]:before {
  background-image: url(images/hearth/class-icons/mage.png);
}
div#id_hsclass input + label[data-label=Paladin]:before {
  background-image: url(images/hearth/class-icons/paladin.png);
}
div#id_hsclass input + label[data-label=Priest]:before {
  background-image: url(images/hearth/class-icons/priest.png);
}
div#id_hsclass input + label[data-label=Rogue]:before {
  background-image: url(images/hearth/class-icons/rogue.png);
}
div#id_hsclass input + label[data-label=Shaman]:before {
  background-image: url(images/hearth/class-icons/shaman.png);
}
div#id_hsclass input + label[data-label=Warlock]:before {
  background-image: url(images/hearth/class-icons/warlock.png);
}
div#id_hsclass input + label[data-label=Warrior]:before {
  background-image: url(images/hearth/class-icons/warrior.png);
}
div#id_hsclass input + label:before {
  display: block;
  height: 60px;
  width: 60px;
  background-size: 60px;
  filter: grayscale(100%);
  opacity: 0.8;
  content: "";
  margin: auto;
}
div#id_hsclass input:checked + label {
  font-weight: 700;
}
div#id_hsclass input:checked + label:before {
  filter: none;
  opacity: 1;
}

div#id_region {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
}
div#id_region input {
  display: none;
}
div#id_region input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  width: 80px;
  margin: 10px;
}
div#id_region input + label[data-label=Bilgewater]:before {
  background-image: url(images/runeterra/card/region/bilgewater.png);
}
div#id_region input + label[data-label=Demacia]:before {
  background-image: url(images/runeterra/card/region/demacia.png);
}
div#id_region input + label[data-label=Freljord]:before {
  background-image: url(images/runeterra/card/region/freljord.png);
}
div#id_region input + label[data-label=Ionia]:before {
  background-image: url(images/runeterra/card/region/ionia.png);
}
div#id_region input + label[data-label=Noxus]:before {
  background-image: url(images/runeterra/card/region/noxus.png);
}
div#id_region input + label[data-label="Piltover & Zaun"]:before {
  background-image: url(images/runeterra/card/region/piltover-zaun.png);
}
div#id_region input + label[data-label="Shadow Isles"]:before {
  background-image: url(images/runeterra/card/region/shadow-isles.png);
}
div#id_region input + label[data-label=Targon]:before {
  background-image: url(images/runeterra/card/region/targon.png);
}
div#id_region input + label[data-label=Shurima]:before {
  background-image: url(images/runeterra/card/region/shurima.png);
}
div#id_region input + label[data-label="Bandle City"]:before {
  background-image: url(images/runeterra/card/region/bandle-city.png);
}
div#id_region input + label:before {
  display: block;
  height: 60px;
  width: 60px;
  background-size: 60px;
  filter: grayscale(100%);
  opacity: 0.8;
  content: "";
  margin: auto;
}
div#id_region input:checked + label {
  font-weight: 700;
}
div#id_region input:checked + label:before {
  filter: none;
  opacity: 1;
}

div#id_color {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
}
div#id_color input {
  display: none;
}
div#id_color input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  width: 80px;
  margin: 10px;
}
div#id_color input + label[data-label=Red]:before {
  content: "\e603";
}
div#id_color input + label[data-label=Black]:before {
  content: "\e602";
}
div#id_color input + label[data-label=Blue]:before {
  content: "\e601";
}
div#id_color input + label[data-label=Green]:before {
  content: "\e604";
}
div#id_color input + label[data-label=White]:before {
  content: "\e600";
}
div#id_color input + label:before {
  display: block;
  height: 60px;
  width: 60px;
  background-size: 60px;
  filter: grayscale(100%);
  opacity: 0.8;
  content: "";
  margin: auto;
  font: normal normal normal 14px/1 Mana;
  font-size: 60px;
}
div#id_color input:checked + label {
  font-weight: 700;
}
div#id_color input:checked + label:before {
  filter: none;
  opacity: 1;
}
div#id_color input:checked + label[data-label=Red]:before {
  color: #DB8664;
}
div#id_color input:checked + label[data-label=Black]:before {
  color: #9c9188;
}
div#id_color input:checked + label[data-label=Blue]:before {
  color: #a6c1dd;
}
div#id_color input:checked + label[data-label=Green]:before {
  color: #93B483;
}
div#id_color input:checked + label[data-label=White]:before {
  color: #edf2b0;
}

.listing-hearthstone-decks .deck-detail-wrapper, .listing-decks-generic .deck-detail-wrapper {
  display: flex;
  flex-direction: row;
}
.listing-hearthstone-decks .deck-detail-wrapper .deck-image, .listing-decks-generic .deck-detail-wrapper .deck-image {
  margin-top: 3px;
  margin-right: 5px;
}
.listing-hearthstone-decks .col-name, .listing-decks-generic .col-name {
  text-align: left;
}
.listing-hearthstone-decks .col-name.orderable, .listing-decks-generic .col-name.orderable {
  padding-left: 100px;
}
.listing-hearthstone-decks .col-updated, .listing-decks-generic .col-updated {
  min-width: 160px;
}
.listing-hearthstone-decks td.col-updated, .listing-decks-generic td.col-updated {
  font-size: 90%;
}
.listing-hearthstone-decks td.col-cost, .listing-decks-generic td.col-cost {
  color: #1A7ABB;
}
.listing-hearthstone-decks td.col-personalized-cost, .listing-decks-generic td.col-personalized-cost {
  color: #09be85;
}
.listing-hearthstone-decks td.col-score, .listing-decks-generic td.col-score {
  color: #18AC18;
  font-size: 16px;
}
.listing-hearthstone-decks td.col-score::before, .listing-decks-generic td.col-score::before {
  font-family: "Font Awesome 5 Pro";
  display: inline-block;
  font-weight: 700;
  content: "\f0d8";
}
.listing-hearthstone-decks td.col-score.score-negative, .listing-decks-generic td.col-score.score-negative {
  color: #DF4444;
}
.listing-hearthstone-decks td.col-score.score-negative::before, .listing-decks-generic td.col-score.score-negative::before {
  content: "\f0d7";
}
@media screen and (max-width: 950px) {
  .listing-hearthstone-decks .col-type, .listing-decks-generic .col-type {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  .listing-hearthstone-decks .col-archetype, .listing-decks-generic .col-archetype {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .listing-hearthstone-decks .col-cost, .listing-hearthstone-decks .col-updated, .listing-decks-generic .col-cost, .listing-decks-generic .col-updated {
    display: none;
  }
  .listing-hearthstone-decks .col-name .mobile-data, .listing-decks-generic .col-name .mobile-data {
    display: block;
  }
}

.listing-hearthstone-cards .col-cost, .listing-hearthstone-cards .col-attack, .listing-hearthstone-cards .col-health, .listing-hearthstone-cards .col-hsclass, .listing-hearthstone-cards .col-type {
  text-align: center;
}
.listing-hearthstone-cards .col-name {
  text-align: left;
}
@media screen and (max-width: 950px) {
  .listing-hearthstone-cards .col-type {
    display: none;
  }
}
@media screen and (max-width: 850px) {
  .listing-hearthstone-cards .col-cost, .listing-hearthstone-cards .col-attack, .listing-hearthstone-cards .col-health {
    display: none;
  }
}

/* POLLS f005 */
.poll-RATING ul {
  display: flex;
  flex-direction: row;
  padding: 0;
  list-style: none;
}
.poll-RATING ul li + li {
  margin-left: 10px;
}
.poll-RATING input[type=radio] {
  font-family: "Font Awesome 5 Pro";
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  font-size: 20px;
  box-shadow: none;
}
.poll-RATING input[type=radio]:hover:before, .poll-RATING input[type=radio].hover:before, .poll-RATING input[type=radio].selected:before {
  color: #f5fc96;
  cursor: pointer;
}
.poll-RATING input[type=radio]:before {
  color: #bb9e1d;
  display: inline-block;
  content: "\f005";
}
.poll-RATING input[type=radio]:checked:before {
  color: #fdd522;
  font-weight: 900;
}
.poll-RATING input[type=radio].filled-in {
  color: #fdd522;
  font-weight: 900;
}
.poll-RATING input[type=radio].filled-in-hover {
  color: #f5fc96;
  font-weight: 900;
}

.poll-rate-star {
  font-family: "Font Awesome 5 Pro";
}
.poll-rate-star + .poll-rate-star {
  padding-left: 5px;
}
.poll-rate-star:hover:before, .poll-rate-star.hover:before, .poll-rate-star.selected:before {
  color: #f5fc96;
  font-weight: 900;
  cursor: pointer;
}
.poll-rate-star:before {
  color: #bb9e1d;
  display: inline-block;
  content: "\f005";
}
.poll-rate-star.filled-in {
  color: #fdd522;
  font-weight: 900;
}
.poll-rate-star.filled-in-hover {
  color: #f5fc96;
  font-weight: 900;
}

.poll-results-view {
  display: none;
}

.article-header-meta {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
.article-header-meta .article-byline {
  flex-grow: 1;
  line-height: 100%;
  margin-top: 10px;
  margin-bottom: 0;
}

.poll-inline {
  font-size: 13px;
  padding: 10px;
  background: var(--widget-background);
  display: inline-block;
  border-radius: 5px;
}
.poll-inline .poll-rating-data {
  display: inline-block;
  margin-right: 10px;
}

section.support-site a {
  display: block;
  height: 50px;
  line-height: 30px;
  padding: 10px;
  color: #FFF;
  text-shadow: 0px 0px 5px #000000;
}
section.support-site a + a {
  margin-top: 8px;
}
section.support-site a.patreon {
  background: #FB664E;
  border: 2px solid darklightenen(#FB664E, 10%);
}
section.support-site a.twitch {
  background: #593E85;
  border: 2px solid rgb(112.2769230769, 78.2153846154, 167.7846153846);
}
section.support-site a.amazon {
  background: #319ec5;
  border: 2px solid rgb(28.6829268293, 92.487804878, 115.3170731707);
}

section.deck-list-page .listing-formset .fields-wrapper, section.card-list-page .listing-formset .fields-wrapper {
  align-items: center;
}
@media screen and (max-width: 750px) {
  section.deck-list-page .listing-formset .fields-wrapper, section.card-list-page .listing-formset .fields-wrapper {
    justify-content: center;
  }
}
section.deck-list-page .listing-formset .fields-wrapper > li:first-child, section.card-list-page .listing-formset .fields-wrapper > li:first-child {
  width: 100%;
}
section.deck-list-page .listing-formset .fields-wrapper > li, section.card-list-page .listing-formset .fields-wrapper > li {
  width: calc(33% - 20px);
  margin: 10px;
}
@media screen and (max-width: 900px) {
  section.deck-list-page .listing-formset .fields-wrapper > li, section.card-list-page .listing-formset .fields-wrapper > li {
    width: 300px;
  }
}

section.hsclass-header {
  padding-top: 180px;
  background-position: top center;
  background-color: var(--site-background-dark);
  background-repeat: no-repeat;
}
section.hsclass-header.hsclass-header-death-knight {
  background-image: url(images/cms/headers/death-knight.jpg);
}
section.hsclass-header.hsclass-header-demon-hunter {
  background-image: url(images/cms/headers/demon-hunter.jpg);
}
section.hsclass-header.hsclass-header-druid {
  background-image: url(images/cms/headers/druid.jpg);
}
section.hsclass-header.hsclass-header-hunter {
  background-image: url(images/cms/headers/hunter.jpg);
}
section.hsclass-header.hsclass-header-mage {
  background-image: url(images/cms/headers/mage.jpg);
}
section.hsclass-header.hsclass-header-paladin {
  background-image: url(images/cms/headers/paladin.jpg);
}
section.hsclass-header.hsclass-header-priest {
  background-image: url(images/cms/headers/priest.jpg);
}
section.hsclass-header.hsclass-header-rogue {
  background-image: url(images/cms/headers/rogue.jpg);
}
section.hsclass-header.hsclass-header-shaman {
  background-image: url(images/cms/headers/shaman.jpg);
}
section.hsclass-header.hsclass-header-warlock {
  background-image: url(images/cms/headers/warlock.jpg);
}
section.hsclass-header.hsclass-header-warrior {
  background-image: url(images/cms/headers/warrior.jpg);
}
section.hsclass-header.hsclass-header-neutral {
  background-image: url(images/cms/headers/hearthstone-box.jpg);
}

section.cardback-list-page .cardback-category {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  margin-bottom: 20px;
}
section.cardback-list-page .cardback-image {
  text-align: center;
  width: 200px;
}
section.cardback-list-page .cardback-image img {
  width: 200px;
}

table th {
  white-space: nowrap;
}
table th.orderable:after {
  font-family: "Font Awesome 5 Pro";
  display: inline-block;
  font-weight: 700;
  margin-left: 3px;
  content: "\f0dc";
  color: #747474;
}
table th.desc.orderable:after {
  content: "\f0dd";
}
table th.asc.orderable:after {
  content: "\f0de";
}

/* Social Connections */
.socialaccount_provider:before {
  font-family: "Font Awesome 5 Brands";
  display: inline-block;
  margin-right: 5px;
  content: "\f0dc";
  color: #FFF;
  font-weight: 400;
}
.socialaccount_provider.patreon:before {
  content: "\f3d9";
}
.socialaccount_provider.twitch:before {
  content: "\f1e8";
}
.socialaccount_provider.battlenet:before {
  content: "\f835";
}
.socialaccount_provider.discord:before {
  content: "\f392";
}

/* Profiles */
.member-header {
  background: url(images/profile/member-header-default.jpg);
  margin: -20px;
  margin-bottom: 0;
  padding: 20px;
  position: relative;
  border-bottom: 1px solid black;
}
.member-header .member-avatar {
  background: rgba(17, 17, 17, 0.9);
  padding: 20px;
  border-radius: 10px;
  margin-left: 20px;
  display: inline-block;
  text-align: center;
}
@media screen and (max-width: 600px) {
  .member-header .member-avatar {
    margin-left: 5px;
  }
}
.member-header .avatar-image img {
  width: 180px;
  height: 180px !important;
  max-height: 180px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-oozefest-splat {
    display: block;
    margin-bottom: 30px;
    position: relative;
  }
  .member-header .avatar-border.avatar-border-oozefest-splat img {
    z-index: 2;
    position: relative;
    border: 2px solid #74dd0b;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(149, 229, 17), inset 0 1px 1px rgba(91, 253, 67, 0.2);
    width: 160px;
    height: 160px !important;
    margin: 10px;
  }
  .member-header .avatar-border.avatar-border-oozefest-splat::before {
    content: "";
    display: block;
    height: 190px;
    width: 190px;
    position: absolute;
    background: url(images/profile/avatar-borders/oozefest-border-splat.png);
    background-size: 190px 190px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
  }
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-ice-dungeon {
    display: block;
    margin-bottom: 30px;
    position: relative;
    padding: 0 40px;
  }
  .member-header .avatar-border.avatar-border-ice-dungeon img {
    z-index: 2;
    border-radius: 50%;
    width: 140px !important;
    height: 140px !important;
    position: relative;
  }
  .member-header .avatar-border.avatar-border-ice-dungeon::before {
    content: "";
    display: block;
    height: 200px;
    width: 200px;
    position: absolute;
    background: url(images/profile/avatar-borders/ice-dungeon.png);
    background-size: 220px 220px;
    top: -20px;
    left: calc(50% - 8px);
    transform: translate(-50%);
    z-index: 3;
  }
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-oozefest-slime-skull {
    margin-bottom: 0px;
    display: block;
    position: relative;
  }
  .member-header .avatar-border.avatar-border-oozefest-slime-skull img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-oozefest-slime-skull::after {
    content: "";
    display: block;
    height: 200px;
    width: 185px;
    position: absolute;
    background: url(images/profile/avatar-borders/oozefest-border-slime-skull.png);
    background-size: 185px 200px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
  }
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-pumpkin-head {
    margin-bottom: 0px;
    display: block;
    position: relative;
    padding: 0 20px;
  }
  .member-header .avatar-border.avatar-border-pumpkin-head img {
    border-radius: 10px;
    width: 122px;
    height: 122px;
    min-height: 122px;
    max-height: 122px;
    margin-top: 35px;
    margin-bottom: 10px;
  }
  .member-header .avatar-border.avatar-border-pumpkin-head::after {
    content: "";
    display: block;
    height: 180px;
    width: 185px;
    position: absolute;
    background: url(images/profile/avatar-borders/halloween-pumpkin-head.png);
    background-size: 185px 180px;
    top: -10px;
    left: 50%;
    transform: translate(-50%);
  }
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-boney {
    margin-bottom: 0px;
    display: block;
    position: relative;
    padding: 0 20px;
  }
  .member-header .avatar-border.avatar-border-boney img {
    width: 150px;
    height: 150px;
    min-height: 150px;
    max-height: 150px;
    margin-top: 3px;
    margin-bottom: 10px;
    border-radius: 50%;
    border: 2px solid #857c88;
  }
  .member-header .avatar-border.avatar-border-boney::after {
    content: "";
    display: block;
    height: 180px;
    width: 185px;
    position: absolute;
    background: url(images/profile/avatar-borders/halloween-bones.png);
    background-size: 185px 180px;
    top: -10px;
    left: 50%;
    transform: translate(-50%);
  }
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-spooky-crate {
    margin-bottom: 0px;
    display: block;
    position: relative;
    padding: 0 20px;
  }
  .member-header .avatar-border.avatar-border-spooky-crate img {
    border-radius: 10px;
    width: 140px;
    height: 140px;
    min-height: 140px;
    max-height: 140px;
    margin-top: 25px;
    margin-bottom: 10px;
  }
  .member-header .avatar-border.avatar-border-spooky-crate::after {
    content: "";
    display: block;
    height: 180px;
    width: 185px;
    position: absolute;
    background: url(images/profile/avatar-borders/halloween-spooky-crate.png);
    background-size: 185px 180px;
    top: -10px;
    left: 50%;
    transform: translate(-50%);
  }
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-snowpocalypse-snowball {
    margin-bottom: 0px;
    display: block;
    position: relative;
  }
  .member-header .avatar-border.avatar-border-snowpocalypse-snowball img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-snowpocalypse-snowball::after {
    content: "";
    display: block;
    height: 200px;
    width: 185px;
    position: absolute;
    background: url(images/profile/avatar-borders/snowball-avatar-border.png);
    background-size: 185px 200px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
  }
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-snowpocalypse-holly {
    margin-bottom: 0px;
    display: block;
    position: relative;
  }
  .member-header .avatar-border.avatar-border-snowpocalypse-holly img {
    border-radius: 10px;
  }
  .member-header .avatar-border.avatar-border-snowpocalypse-holly::after {
    content: "";
    display: block;
    height: 200px;
    width: 185px;
    position: absolute;
    background: url(images/profile/avatar-borders/holly-avatar-border.png);
    background-size: 185px 200px;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-border.avatar-border-hearth-card-design-champion {
  position: relative;
}
@media screen and (min-width: 500px) {
  .member-header .avatar-border.avatar-border-hearth-card-design-champion {
    margin-bottom: 0px;
    display: block;
    position: relative;
  }
  .member-header .avatar-border.avatar-border-hearth-card-design-champion::after {
    content: "";
    display: block;
    height: 200px;
    width: 200px;
    position: absolute;
    background: url(images/hearth/fancreations/cdc-avatar-border.png);
    background-size: 200px 200px;
    top: -3px;
    left: 50%;
    transform: translate(-50%);
  }
}
.member-header .avatar-pin {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 10%;
  left: 10%;
  z-index: 5;
}
.member-header .avatar-pin img {
  background: none !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: none !important;
  z-index: 5;
}
@media screen and (max-width: 948px) {
  .member-header .avatar-pin {
    display: none;
  }
}
.member-header .username h1, .member-header .username h2 {
  margin-bottom: 0;
}
.member-header .profile-stats {
  position: absolute;
  top: 20px;
  right: 10px;
  text-align: right;
  margin-left: 260px;
}
.member-header .profile-stats span.stat {
  background: rgba(17, 17, 17, 0.7);
  padding: 10px;
  border-radius: 15px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}
.member-header .profile-stats span.stat .name {
  text-transform: uppercase;
  margin-right: 5px;
}
.member-header .profile-stats span.stat + span.stat {
  margin-left: 10px;
}

section.related-decks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  overflow: hidden;
  grid-gap: 10px;
}
section.related-decks .deck-widget {
  grid-column: span 1;
}
section.related-decks .deck-widget + .deck-widget {
  margin-top: 0;
}

section.tavern-brawl-detail-page, section.tavern-brawl-list-page {
  padding-top: 180px;
  background-position: top center;
  background-color: var(--site-background-dark);
  background-repeat: no-repeat;
  background-image: url(images/cms/headers/tavern-brawl.jpg);
}

/* Forum Prefixes */
.thread-prefix {
  background: #2B2C2D;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  font-weight: 700;
  text-shadow: 0px 0px 5px #000000;
}
.thread-prefix.thread-prefix-resolved {
  background: #4CAF50;
}
.thread-prefix.thread-prefix-bug {
  background: #F44336;
}
.thread-prefix.thread-prefix-duplicate {
  background: #3F51B5;
}
.thread-prefix.thread-prefix-feature-request {
  background: #8BC34A;
}
.thread-prefix.thread-prefix-enhancement {
  background: #009688;
}
.thread-prefix.thread-prefix-non-issue {
  background: #795548;
}

/* SELECT 2*/
.select2-container--ooc {
  width: 400px;
}
.select2-container--ooc input {
  border: none;
  background: none;
  box-shadow: none;
}
.select2-container--ooc .select2-selection--multiple {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  border-radius: 3px;
  box-shadow: 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  color: var(--font-color);
  min-height: 45px;
  line-height: 24px;
}
.select2-container--ooc .select2-selection--multiple input.select2-search__field {
  height: 32px;
  outline-color: var(--button-bg);
  padding-left: 5px;
}
.select2-container--ooc .select2-selection--single {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  border-radius: 3px;
  box-shadow: 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  color: var(--font-color);
  min-height: 45px;
  line-height: 24px;
}
.select2-container--ooc .select2-selection--single input.select2-search__field {
  height: 32px;
  outline-color: var(--button-bg);
  padding-left: 5px;
}
.select2-container--ooc .select2-selection--single .select2-selection__rendered {
  margin-top: 10px;
}
.select2-container--ooc .select2-dropdown {
  border: none;
}
.select2-container--ooc .select2-search--dropdown {
  background: #151515;
}
.select2-container--ooc .select2-search__field {
  background: #1d1e22;
}
.select2-container--ooc .select2-selection__choice {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  padding: 3px;
  border-radius: 4px;
  margin-top: 4px;
  background-color: var(--button-bg);
  border-color: var(--button-border);
  font-weight: 400;
  margin-left: 5px;
  display: inline-block;
}
.select2-container--ooc .select2-selection__choice .select2-selection__choice__remove {
  margin-right: 5px;
}
.select2-container--ooc .select2-selection__rendered {
  margin: 0;
  white-space: normal !important;
  list-style: none;
}
.select2-container--ooc .select2-search--inline {
  float: none;
  display: block;
}
.select2-container--ooc .select2-results {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
}
.select2-container--ooc .select2-results .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
  border: none;
}

.achievement {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  border-color: #191919;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  border-width: 2px;
  min-height: 110px;
}
.achievement h4 {
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 40px 40px rgba(0, 0, 0, 0.2);
  padding-bottom: 5px;
}
.achievement.earned {
  border: 2px solid #043e20;
  background: #212826;
}
.achievement.earned .meta .points .point-count {
  color: #158048;
}
.achievement .icon {
  width: 100px;
  display: flex;
  align-items: center;
}
.achievement .icon .icon-bg {
  color: #1D1D1D;
}
.achievement .name {
  flex-grow: 1;
  text-align: center;
}
.achievement .name .reward-description {
  font-size: 13px;
  color: rgb(151, 126, 60);
}
.achievement .name .parent-achieves .icon {
  display: inline;
}
.achievement .meta {
  text-align: center;
  width: 100px;
}
.achievement .meta .points {
  color: #1B1B1B;
}
.achievement .meta .points .point-count {
  font-size: 25px;
  font-weight: 700;
  color: rgb(151, 126, 60);
}
.achievement .meta .earned {
  font-size: 12px;
  text-transform: uppercase;
}
.achievement .meta .earned.not {
  color: #747474;
}

aside.card-reveal-countdown-block {
  border: 1px solid rgba(14, 13, 13, 0.6);
  background: url(images/pixel-bg.png) top center;
  text-align: center;
}
aside.card-reveal-countdown-block .card-reveal-countdown .inner-links {
  display: none;
}
aside.card-reveal-countdown-block .card-reveal-countdown.finished .inner-links {
  display: flex;
}
aside.card-reveal-countdown-block .button {
  background: rgba(0, 0, 10, 0.7);
  border: 1px solid rgba(36, 34, 39, 0.8);
}
aside.card-reveal-countdown-block header h3 {
  border-left: 0;
  text-shadow: 2px 2px 5px #000000;
  font-size: 20px;
}
aside.card-reveal-countdown-block.card-reveal-countdown-saviors-of-uldum {
  background: url(images/uldum-pixel-bg.jpg) top center;
}

.card-reveal-countdown {
  background: rgba(0, 0, 0, 0.7);
  padding: 8px;
  margin-bottom: 7px;
  box-shadow: 1px 1px 3px #000;
  text-align: center;
}
.card-reveal-countdown .inner-timer {
  display: flex;
}
.card-reveal-countdown .inner-links {
  display: flex;
}
.card-reveal-countdown img {
  width: 80px !important;
  height: 80px !important;
  margin-right: 10px;
  border-radius: 5px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.card-reveal-countdown .update-wrapper, .card-reveal-countdown .inner-wrapper {
  display: flex;
  flex-grow: 1;
}
.card-reveal-countdown .inner-wrapper {
  flex-direction: column;
}
.card-reveal-countdown .group {
  display: block;
  flex-grow: 1;
}
.card-reveal-countdown .group + .group {
  margin-left: 5px;
}
.card-reveal-countdown .group .counter {
  display: block;
  font-size: 20px;
  min-width: 60px;
  background: rgba(0, 0, 10, 0.7);
  border-radius: 5px;
  margin-bottom: 5px;
  padding: 10px 20px;
}
.card-reveal-countdown .group .desc {
  padding: 3px;
  border-radius: 5px;
  display: block;
  background: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  font-size: 10px;
  margin-bottom: 5px;
}
.card-reveal-countdown .button {
  background: rgba(0, 0, 10, 0.7);
  border: 1px solid rgba(36, 34, 39, 0.8);
}
.card-reveal-countdown .reveal-button.reveal-source {
  flex-grow: 1;
  margin-left: 5px;
}

.card-reveal-page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}
.card-reveal-page .card-reveal-countdown {
  grid-column: span 4;
  margin-bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)), url(images/pixel-bg.png) top center;
}
@media screen and (max-width: 1200px) {
  .card-reveal-page .card-reveal-countdown {
    grid-column: span 6;
  }
}
@media screen and (max-width: 800px) {
  .card-reveal-page .card-reveal-countdown {
    grid-column: span 12;
  }
}

aside.block.countdowns .card-reveal-countdown {
  background: rgba(15, 30, 45, 0.7);
}
aside.block.countdowns .card-reveal-countdown .reveal-button {
  flex-grow: 1;
}

.listing-formset form input[name=cost_min], .listing-formset form input[name=cost_max] {
  width: 48%;
}

a.nav-sign-in, a.nav-sign-in:visited {
  color: #dc4779;
}

@media screen and (max-width: 440px) {
  .expansion-detail-page .card-image img {
    width: 180px;
  }
}

ul.notifications {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
ul.notifications li {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  background-image: linear-gradient(to top, var(--site-gradient-from), var(--site-gradient-to));
  padding: 10px;
  border-radius: 5px;
  position: relative;
  display: flex;
  flex-direction: row;
}
ul.notifications li + li {
  margin-top: 10px;
}
ul.notifications .timestamp {
  color: #747474;
  font-size: 13px;
}
ul.notifications .details {
  display: flex;
  flex-direction: column;
}
ul.notifications .actor-image {
  margin-right: 10px;
}
ul.notifications a.delete {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
}

#pack-opener-field .pack-score {
  margin: 0 auto;
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: #747474;
  font-size: 13px;
}
#pack-opener-field .pack-score:before {
  display: block;
  margin: 0 auto;
  content: attr(data-score);
  padding: 20px;
  width: 150px;
  border-radius: 5px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  color: var(--font-color);
  font-size: 30px;
}
#pack-opener-field .pack-contents {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
  position: relative;
}
#pack-opener-field .pack-contents video {
  max-width: 100%;
}
#pack-opener-field .pack-contents .pack-card {
  position: relative;
}
#pack-opener-field .pack-contents .card-image, #pack-opener-field .pack-contents .card-image-gold, #pack-opener-field .pack-contents .card-image-diamond {
  visibility: hidden;
  transition: opacity 0.6s;
  opacity: 0;
}
@media screen and (max-width: 540px) {
  #pack-opener-field .pack-contents .card-image img, #pack-opener-field .pack-contents .card-image video, #pack-opener-field .pack-contents .card-image-gold img, #pack-opener-field .pack-contents .card-image-gold video, #pack-opener-field .pack-contents .card-image-diamond img, #pack-opener-field .pack-contents .card-image-diamond video {
    width: 180px;
  }
}
#pack-opener-field .pack-contents .pack-card-back {
  visibility: visible;
  position: absolute;
  opacity: 1;
  cursor: pointer;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  transition: transform 0.3s ease-in-out;
}
#pack-opener-field .pack-contents .pack-card-back:hover {
  transform: scale(1.05) translateY(-50%);
}
#pack-opener-field .pack-contents .pack-card-back.rarity-legendary:hover {
  filter: drop-shadow(0px 0px 10px #FF8000);
}
#pack-opener-field .pack-contents .pack-card-back.rarity-epic:hover {
  filter: drop-shadow(0px 0px 10px #BC5BFF);
}
#pack-opener-field .pack-contents .pack-card-back.rarity-rare:hover {
  filter: drop-shadow(0px 0px 10px #1E90fF);
}
@media screen and (max-width: 900px) {
  #pack-opener-field .pack-contents {
    flex-wrap: wrap;
  }
}
#pack-opener-field.opened .card-image, #pack-opener-field.opened .card-image-gold, #pack-opener-field.opened .card-image-diamond {
  visibility: visible;
  opacity: 1;
}

.explorers-dialog {
  margin: 0 auto;
  max-width: 600px;
  font-size: 17px;
  margin-bottom: 20px;
  text-align: center;
}
.explorers-dialog div {
  display: flex;
  flex-direction: row;
}
.explorers-dialog img {
  border-radius: 50%;
  border: 1px solid black;
  margin: 0 10px;
  height: 100px !important;
  width: 100px;
}
.explorers-dialog p {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  background-image: linear-gradient(to top, var(--site-gradient-from), var(--site-gradient-to));
  padding: 10px;
  border-radius: 5px;
  flex-grow: 1;
}
.explorers-dialog .button-uldum {
  margin: 0 auto;
  background: linear-gradient(#98831b, #774b14);
  border-color: #774b14;
}
.explorers-dialog .button-uldum:hover {
  background: linear-gradient(#a38d20, #915b19);
  border-color: #774b14;
}

.article-author-bio .member-bio:after {
  content: "";
  clear: both;
  display: block;
}
.article-author-bio .member-bio .created-by-avatar {
  float: left;
  padding: 5px 20px 20px 5px;
}

.player-line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  font-size: 13px;
}
.player-line .player img {
  width: 125px;
  height: 125px;
  border: 2px solid #3A3A3A;
}

.player-line-heading {
  text-align: center;
}
.player-line-heading .team-logo {
  height: 20px;
  width: 20px;
  display: inline-block;
}

.player-game-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  font-size: 13px;
  gap: 10px;
  margin: 0 auto;
}
.player-game-grid .country-flag {
  width: 16px;
}
.player-game-grid .player {
  padding: 10px;
  background: var(--block-background);
  border-radius: 5px;
  position: relative;
}
.player-game-grid .player img.player-portrait {
  width: 135px;
  height: 135px;
  border: 2px solid #3A3A3A;
  border-radius: 5px;
}
.player-game-grid .player:after {
  display: inline-block;
  height: 25px;
  width: 25px;
  background-size: cover;
  content: "";
  margin: auto;
  mask-size: cover;
  -webkit-mask-size: cover;
  margin-right: 5px;
  background-color: var(--link-hover-color);
  vertical-align: middle;
  margin-bottom: 4px;
  position: absolute;
  top: 15px;
  right: 10px;
}
.player-game-grid .player.player-hearthstone:after {
  mask: url(images/game-logo-hearthstone.svg) no-repeat;
  mask-image: url(images/game-logo-hearthstone.svg) no-repeat;
  -webkit-mask: url(images/game-logo-hearthstone.svg) no-repeat;
  background-color: hsl(197, 100%, 36%);
}
.player-game-grid .player.player-mercenaries:after {
  mask: url(images/game-logo-mercenaries.svg) no-repeat;
  mask-image: url(images/game-logo-mercenaries.svg) no-repeat;
  -webkit-mask: url(images/game-logo-mercenaries.svg) no-repeat;
  background-color: hsl(0, 58%, 57%);
}
.player-game-grid .player.player-battlegrounds:after {
  mask: url(images/game-logo-battlegrounds.svg) no-repeat;
  mask-image: url(images/game-logo-battlegrounds.svg) no-repeat;
  -webkit-mask: url(images/game-logo-battlegrounds.svg) no-repeat;
  background-color: hsl(49, 82%, 44%);
}

/* Hearth Adventures */
ul.adventure-chapter-list.adventure-chapter-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  grid-gap: 10px;
  text-align: center;
}
ul.adventure-chapter-list.adventure-chapter-list img {
  border: 3px solid #3A3A3A;
}

.adventure-boss-description {
  display: flex;
  flex-direction: row;
}

.adventure-boss-navigation ol, .adventure-boss-navigation ul {
  list-style: none;
  padding-left: 0;
}
.adventure-boss-navigation .adventure-chapter {
  text-align: center;
}
.adventure-boss-navigation .adventure-chapter > ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.adventure-boss-navigation .adventure-chapter + .adventure-chapter {
  padding-top: 10px;
  border-top: 1px solid #3A3A3A;
}
.adventure-boss-navigation .adventure-boss-nav-image {
  text-align: center;
  min-width: 140px;
  flex: 1 1 0px;
  padding-bottom: 20px;
}
.adventure-boss-navigation .adventure-boss-nav-image .adventure-boss-name {
  display: block;
}
.adventure-boss-navigation .adventure-boss-nav-image img {
  border-radius: 10px;
  box-shadow: 0px 0px 2px 3px #17191b;
}

.flex-wrapper {
  display: flex;
  flex-direction: row;
}

/* Runeterra Deckbuilder */
section.site-content.deckbuilder-detail-page {
  padding-top: 180px;
  background: url(images/runeterra/deckbuilder/runeterra-deckbuilder-bg.jpg) no-repeat #0d1311;
}

#deckbuilder.runeterra-deckbuilder ul.fields-wrapper, #deckbuilder.mythgard-deckbuilder ul.fields-wrapper, #deckbuilder.snap-deckbuilder ul.fields-wrapper, .collection-view-page ul.fields-wrapper {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
}
#deckbuilder.runeterra-deckbuilder ul.fields-wrapper > li, #deckbuilder.mythgard-deckbuilder ul.fields-wrapper > li, #deckbuilder.snap-deckbuilder ul.fields-wrapper > li, .collection-view-page ul.fields-wrapper > li {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px;
}
#deckbuilder.runeterra-deckbuilder ul.fields-wrapper > li + li, #deckbuilder.mythgard-deckbuilder ul.fields-wrapper > li + li, #deckbuilder.snap-deckbuilder ul.fields-wrapper > li + li, .collection-view-page ul.fields-wrapper > li + li {
  width: 100%;
  margin-top: 10px;
}
#deckbuilder.runeterra-deckbuilder ul.fields-wrapper > li:nth-child(2), #deckbuilder.mythgard-deckbuilder ul.fields-wrapper > li:nth-child(2), #deckbuilder.snap-deckbuilder ul.fields-wrapper > li:nth-child(2), .collection-view-page ul.fields-wrapper > li:nth-child(2) {
  width: calc(50% - 5px);
}
#deckbuilder.runeterra-deckbuilder ul.fields-wrapper > li:nth-child(3), #deckbuilder.mythgard-deckbuilder ul.fields-wrapper > li:nth-child(3), #deckbuilder.snap-deckbuilder ul.fields-wrapper > li:nth-child(3), .collection-view-page ul.fields-wrapper > li:nth-child(3) {
  width: calc(50% - 5px);
  margin-left: 10px;
}
#deckbuilder.runeterra-deckbuilder div#id_region, #deckbuilder.mythgard-deckbuilder div#id_region, #deckbuilder.snap-deckbuilder div#id_region, .collection-view-page div#id_region {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
}
#deckbuilder.runeterra-deckbuilder div#id_region input, #deckbuilder.mythgard-deckbuilder div#id_region input, #deckbuilder.snap-deckbuilder div#id_region input, .collection-view-page div#id_region input {
  display: none;
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label, #deckbuilder.mythgard-deckbuilder div#id_region input + label, #deckbuilder.snap-deckbuilder div#id_region input + label, .collection-view-page div#id_region input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  width: 65px;
  margin: 10px;
  display: table-cell;
  background: transparent;
  box-shadow: none;
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label:before, #deckbuilder.snap-deckbuilder div#id_region input + label:before, .collection-view-page div#id_region input + label:before {
  display: block;
  height: 45px;
  width: 45px;
  background-size: 45px;
  filter: grayscale(100%);
  opacity: 0.8;
  content: "";
  margin: auto;
  transition: filter 0.25s ease-in-out;
}
#deckbuilder.runeterra-deckbuilder div#id_region input:checked + label, #deckbuilder.mythgard-deckbuilder div#id_region input:checked + label, #deckbuilder.snap-deckbuilder div#id_region input:checked + label, .collection-view-page div#id_region input:checked + label {
  font-weight: 700;
}
#deckbuilder.runeterra-deckbuilder div#id_region input:checked + label:before, #deckbuilder.mythgard-deckbuilder div#id_region input:checked + label:before, #deckbuilder.snap-deckbuilder div#id_region input:checked + label:before, .collection-view-page div#id_region input:checked + label:before {
  filter: none;
  opacity: 1;
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label[data-label="Shadow Isles"]:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label[data-label="Shadow Isles"]:before, #deckbuilder.snap-deckbuilder div#id_region input + label[data-label="Shadow Isles"]:before, .collection-view-page div#id_region input + label[data-label="Shadow Isles"]:before {
  background-image: url(images/runeterra/card/region/shadow-isles.png);
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label[data-label=Ionia]:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label[data-label=Ionia]:before, #deckbuilder.snap-deckbuilder div#id_region input + label[data-label=Ionia]:before, .collection-view-page div#id_region input + label[data-label=Ionia]:before {
  background-image: url(images/runeterra/card/region/ionia.png);
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label[data-label="Piltover & Zaun"]:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label[data-label="Piltover & Zaun"]:before, #deckbuilder.snap-deckbuilder div#id_region input + label[data-label="Piltover & Zaun"]:before, .collection-view-page div#id_region input + label[data-label="Piltover & Zaun"]:before {
  background-image: url(images/runeterra/card/region/piltover-zaun.png);
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label[data-label=Demacia]:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label[data-label=Demacia]:before, #deckbuilder.snap-deckbuilder div#id_region input + label[data-label=Demacia]:before, .collection-view-page div#id_region input + label[data-label=Demacia]:before {
  background-image: url(images/runeterra/card/region/demacia.png);
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label[data-label=Noxus]:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label[data-label=Noxus]:before, #deckbuilder.snap-deckbuilder div#id_region input + label[data-label=Noxus]:before, .collection-view-page div#id_region input + label[data-label=Noxus]:before {
  background-image: url(images/runeterra/card/region/noxus.png);
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label[data-label=Freljord]:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label[data-label=Freljord]:before, #deckbuilder.snap-deckbuilder div#id_region input + label[data-label=Freljord]:before, .collection-view-page div#id_region input + label[data-label=Freljord]:before {
  background-image: url(images/runeterra/card/region/freljord.png);
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label[data-label=Bilgewater]:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label[data-label=Bilgewater]:before, #deckbuilder.snap-deckbuilder div#id_region input + label[data-label=Bilgewater]:before, .collection-view-page div#id_region input + label[data-label=Bilgewater]:before {
  background-image: url(images/runeterra/card/region/bilgewater.png);
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label[data-label=Targon]:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label[data-label=Targon]:before, #deckbuilder.snap-deckbuilder div#id_region input + label[data-label=Targon]:before, .collection-view-page div#id_region input + label[data-label=Targon]:before {
  background-image: url(images/runeterra/card/region/targon.png);
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label[data-label=Shurima]:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label[data-label=Shurima]:before, #deckbuilder.snap-deckbuilder div#id_region input + label[data-label=Shurima]:before, .collection-view-page div#id_region input + label[data-label=Shurima]:before {
  background-image: url(images/runeterra/card/region/shurima.png);
}
#deckbuilder.runeterra-deckbuilder div#id_region input + label[data-label="Bandle City"]:before, #deckbuilder.mythgard-deckbuilder div#id_region input + label[data-label="Bandle City"]:before, #deckbuilder.snap-deckbuilder div#id_region input + label[data-label="Bandle City"]:before, .collection-view-page div#id_region input + label[data-label="Bandle City"]:before {
  background-image: url(images/runeterra/card/region/bandle-city.png);
}
#deckbuilder.runeterra-deckbuilder div#id_card_type, #deckbuilder.mythgard-deckbuilder div#id_card_type, #deckbuilder.snap-deckbuilder div#id_card_type, .collection-view-page div#id_card_type {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
}
#deckbuilder.runeterra-deckbuilder div#id_card_type input, #deckbuilder.mythgard-deckbuilder div#id_card_type input, #deckbuilder.snap-deckbuilder div#id_card_type input, .collection-view-page div#id_card_type input {
  display: none;
}
#deckbuilder.runeterra-deckbuilder div#id_card_type input + label, #deckbuilder.mythgard-deckbuilder div#id_card_type input + label, #deckbuilder.snap-deckbuilder div#id_card_type input + label, .collection-view-page div#id_card_type input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  width: 67px;
  margin: 10px;
  display: table-cell;
  background: transparent;
  box-shadow: none;
}
#deckbuilder.runeterra-deckbuilder div#id_card_type input + label:before, #deckbuilder.mythgard-deckbuilder div#id_card_type input + label:before, #deckbuilder.snap-deckbuilder div#id_card_type input + label:before, .collection-view-page div#id_card_type input + label:before {
  display: block;
  height: 47px;
  width: 47px;
  background-size: 47px;
  filter: grayscale(100%);
  opacity: 0.8;
  content: "";
  margin: auto;
  transition: filter 0.25s ease-in-out;
}
#deckbuilder.runeterra-deckbuilder div#id_card_type input:checked + label, #deckbuilder.mythgard-deckbuilder div#id_card_type input:checked + label, #deckbuilder.snap-deckbuilder div#id_card_type input:checked + label, .collection-view-page div#id_card_type input:checked + label {
  font-weight: 700;
}
#deckbuilder.runeterra-deckbuilder div#id_card_type input:checked + label:before, #deckbuilder.mythgard-deckbuilder div#id_card_type input:checked + label:before, #deckbuilder.snap-deckbuilder div#id_card_type input:checked + label:before, .collection-view-page div#id_card_type input:checked + label:before {
  filter: none;
  opacity: 1;
}
#deckbuilder.runeterra-deckbuilder div#id_card_type input + label:before, #deckbuilder.mythgard-deckbuilder div#id_card_type input + label:before, #deckbuilder.snap-deckbuilder div#id_card_type input + label:before, .collection-view-page div#id_card_type input + label:before {
  opacity: 0.3;
}
#deckbuilder.runeterra-deckbuilder div#id_card_type input + label[data-label=Champion]:before, #deckbuilder.mythgard-deckbuilder div#id_card_type input + label[data-label=Champion]:before, #deckbuilder.snap-deckbuilder div#id_card_type input + label[data-label=Champion]:before, .collection-view-page div#id_card_type input + label[data-label=Champion]:before {
  background-image: url(images/runeterra/card/type/champion.svg);
}
#deckbuilder.runeterra-deckbuilder div#id_card_type input + label[data-label=Follower]:before, #deckbuilder.mythgard-deckbuilder div#id_card_type input + label[data-label=Follower]:before, #deckbuilder.snap-deckbuilder div#id_card_type input + label[data-label=Follower]:before, .collection-view-page div#id_card_type input + label[data-label=Follower]:before {
  background-image: url(images/runeterra/card/type/unit.svg);
}
#deckbuilder.runeterra-deckbuilder div#id_card_type input + label[data-label=Spell]:before, #deckbuilder.mythgard-deckbuilder div#id_card_type input + label[data-label=Spell]:before, #deckbuilder.snap-deckbuilder div#id_card_type input + label[data-label=Spell]:before, .collection-view-page div#id_card_type input + label[data-label=Spell]:before {
  background-image: url(images/runeterra/card/type/spell.svg);
}
#deckbuilder.runeterra-deckbuilder div#id_card_type input + label[data-label=Landmark]:before, #deckbuilder.mythgard-deckbuilder div#id_card_type input + label[data-label=Landmark]:before, #deckbuilder.snap-deckbuilder div#id_card_type input + label[data-label=Landmark]:before, .collection-view-page div#id_card_type input + label[data-label=Landmark]:before {
  background-image: url(images/runeterra/card/type/landmark.svg);
}
#deckbuilder.runeterra-deckbuilder div#id_rarity, #deckbuilder.mythgard-deckbuilder div#id_rarity, #deckbuilder.snap-deckbuilder div#id_rarity, .collection-view-page div#id_rarity {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
  justify-content: left;
}
#deckbuilder.runeterra-deckbuilder div#id_rarity input, #deckbuilder.mythgard-deckbuilder div#id_rarity input, #deckbuilder.snap-deckbuilder div#id_rarity input, .collection-view-page div#id_rarity input {
  display: none;
}
#deckbuilder.runeterra-deckbuilder div#id_rarity input + label, #deckbuilder.mythgard-deckbuilder div#id_rarity input + label, #deckbuilder.snap-deckbuilder div#id_rarity input + label, .collection-view-page div#id_rarity input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  width: 60px;
  margin: 10px;
  display: table-cell;
  background: transparent;
  box-shadow: none;
}
#deckbuilder.runeterra-deckbuilder div#id_rarity input + label:before, #deckbuilder.mythgard-deckbuilder div#id_rarity input + label:before, #deckbuilder.snap-deckbuilder div#id_rarity input + label:before, .collection-view-page div#id_rarity input + label:before {
  display: block;
  height: 40px;
  width: 40px;
  background-size: 40px;
  filter: grayscale(100%);
  opacity: 0.8;
  content: "";
  margin: auto;
  transition: filter 0.25s ease-in-out;
}
#deckbuilder.runeterra-deckbuilder div#id_rarity input:checked + label, #deckbuilder.mythgard-deckbuilder div#id_rarity input:checked + label, #deckbuilder.snap-deckbuilder div#id_rarity input:checked + label, .collection-view-page div#id_rarity input:checked + label {
  font-weight: 700;
}
#deckbuilder.runeterra-deckbuilder div#id_rarity input:checked + label:before, #deckbuilder.mythgard-deckbuilder div#id_rarity input:checked + label:before, #deckbuilder.snap-deckbuilder div#id_rarity input:checked + label:before, .collection-view-page div#id_rarity input:checked + label:before {
  filter: none;
  opacity: 1;
}
#deckbuilder.runeterra-deckbuilder div#id_rarity input + label[data-label=Common]:before, #deckbuilder.mythgard-deckbuilder div#id_rarity input + label[data-label=Common]:before, #deckbuilder.snap-deckbuilder div#id_rarity input + label[data-label=Common]:before, .collection-view-page div#id_rarity input + label[data-label=Common]:before {
  background-image: url(images/runeterra/deckbuilder/rarity-common.png);
}
#deckbuilder.runeterra-deckbuilder div#id_rarity input + label[data-label=Rare]:before, #deckbuilder.mythgard-deckbuilder div#id_rarity input + label[data-label=Rare]:before, #deckbuilder.snap-deckbuilder div#id_rarity input + label[data-label=Rare]:before, .collection-view-page div#id_rarity input + label[data-label=Rare]:before {
  background-image: url(images/runeterra/deckbuilder/rarity-rare.png);
}
#deckbuilder.runeterra-deckbuilder div#id_rarity input + label[data-label=Epic]:before, #deckbuilder.mythgard-deckbuilder div#id_rarity input + label[data-label=Epic]:before, #deckbuilder.snap-deckbuilder div#id_rarity input + label[data-label=Epic]:before, .collection-view-page div#id_rarity input + label[data-label=Epic]:before {
  background-image: url(images/runeterra/deckbuilder/rarity-epic.png);
}
#deckbuilder.runeterra-deckbuilder div#id_rarity input + label[data-label=Champion]:before, #deckbuilder.mythgard-deckbuilder div#id_rarity input + label[data-label=Champion]:before, #deckbuilder.snap-deckbuilder div#id_rarity input + label[data-label=Champion]:before, .collection-view-page div#id_rarity input + label[data-label=Champion]:before {
  background-image: url(images/runeterra/deckbuilder/rarity-legendary.png);
}
#deckbuilder.runeterra-deckbuilder div#id_rarity input + label:before, #deckbuilder.mythgard-deckbuilder div#id_rarity input + label:before, #deckbuilder.snap-deckbuilder div#id_rarity input + label:before, .collection-view-page div#id_rarity input + label:before {
  height: 58px;
}
#deckbuilder.runeterra-deckbuilder div#id_cost, #deckbuilder.mythgard-deckbuilder div#id_cost, #deckbuilder.snap-deckbuilder div#id_cost, .collection-view-page div#id_cost {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
  justify-content: left;
}
#deckbuilder.runeterra-deckbuilder div#id_cost input, #deckbuilder.mythgard-deckbuilder div#id_cost input, #deckbuilder.snap-deckbuilder div#id_cost input, .collection-view-page div#id_cost input {
  display: none;
}
#deckbuilder.runeterra-deckbuilder div#id_cost input + label, #deckbuilder.mythgard-deckbuilder div#id_cost input + label, #deckbuilder.snap-deckbuilder div#id_cost input + label, .collection-view-page div#id_cost input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  width: 50px;
  margin: 10px;
  display: table-cell;
  background: transparent;
  box-shadow: none;
}
#deckbuilder.runeterra-deckbuilder div#id_cost input + label:before, #deckbuilder.mythgard-deckbuilder div#id_cost input + label:before, #deckbuilder.snap-deckbuilder div#id_cost input + label:before, .collection-view-page div#id_cost input + label:before {
  display: block;
  height: 30px;
  width: 30px;
  background-size: 30px;
  filter: grayscale(100%);
  opacity: 0.8;
  content: "";
  margin: auto;
  transition: filter 0.25s ease-in-out;
}
#deckbuilder.runeterra-deckbuilder div#id_cost input:checked + label, #deckbuilder.mythgard-deckbuilder div#id_cost input:checked + label, #deckbuilder.snap-deckbuilder div#id_cost input:checked + label, .collection-view-page div#id_cost input:checked + label {
  font-weight: 700;
}
#deckbuilder.runeterra-deckbuilder div#id_cost input:checked + label:before, #deckbuilder.mythgard-deckbuilder div#id_cost input:checked + label:before, #deckbuilder.snap-deckbuilder div#id_cost input:checked + label:before, .collection-view-page div#id_cost input:checked + label:before {
  filter: none;
  opacity: 1;
}
#deckbuilder.runeterra-deckbuilder div#id_cost label, #deckbuilder.mythgard-deckbuilder div#id_cost label, #deckbuilder.snap-deckbuilder div#id_cost label, .collection-view-page div#id_cost label {
  background: #012d42;
  border-radius: 50%;
  border: 1px solid #153d4e;
  height: 50px;
  line-height: 50px;
  box-shadow: 0px 0px 6px 0 #0a4561;
  transition: background 0.25s ease-in-out;
}
#deckbuilder.runeterra-deckbuilder div#id_cost input:checked + label, #deckbuilder.mythgard-deckbuilder div#id_cost input:checked + label, #deckbuilder.snap-deckbuilder div#id_cost input:checked + label, .collection-view-page div#id_cost input:checked + label {
  background: #065479;
}
#deckbuilder.runeterra-deckbuilder div#id_cost label:before, #deckbuilder.mythgard-deckbuilder div#id_cost label:before, #deckbuilder.snap-deckbuilder div#id_cost label:before, .collection-view-page div#id_cost label:before {
  display: none !important;
}
#deckbuilder.runeterra-deckbuilder #mainbuilder #filters, #deckbuilder.mythgard-deckbuilder #mainbuilder #filters, #deckbuilder.snap-deckbuilder #mainbuilder #filters, .collection-view-page #mainbuilder #filters {
  background: url(images/transparent-bgs/45-degree-fabric-dark.png), linear-gradient(#301918 15%, #28191c);
  background: url(images/transparent-bgs/45-degree-fabric-dark.png), linear-gradient(#25414c 5%, #0d292c);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  grid-template-columns: repeat(1, 1fr);
}
#deckbuilder.runeterra-deckbuilder #mainbuilder #collection, #deckbuilder.mythgard-deckbuilder #mainbuilder #collection, #deckbuilder.snap-deckbuilder #mainbuilder #collection, .collection-view-page #mainbuilder #collection {
  min-height: 720px;
  margin-top: 10px;
  background: url(images/transparent-bgs/asfalt-dark.png), linear-gradient(#271416, #1e191f);
  background: url(images/transparent-bgs/asfalt-dark.png), linear-gradient(#132a2d, #002125);
  border-radius: 10px;
  border: 2px solid #01353c;
}
#deckbuilder.runeterra-deckbuilder #mainbuilder #collection .cards .loading, #deckbuilder.mythgard-deckbuilder #mainbuilder #collection .cards .loading, #deckbuilder.snap-deckbuilder #mainbuilder #collection .cards .loading, .collection-view-page #mainbuilder #collection .cards .loading {
  font-size: 30px;
}
#deckbuilder.runeterra-deckbuilder #mainbuilder a.builder-paging, #deckbuilder.mythgard-deckbuilder #mainbuilder a.builder-paging, #deckbuilder.snap-deckbuilder #mainbuilder a.builder-paging, .collection-view-page #mainbuilder a.builder-paging {
  padding: 0 10px;
}
#deckbuilder.runeterra-deckbuilder #page, #deckbuilder.mythgard-deckbuilder #page, #deckbuilder.snap-deckbuilder #page, .collection-view-page #page {
  background: transparent;
  font-weight: 700;
}
#deckbuilder.runeterra-deckbuilder .db-card, #deckbuilder.mythgard-deckbuilder .db-card, #deckbuilder.snap-deckbuilder .db-card, .collection-view-page .db-card {
  position: relative;
  margin: 5px 5px 20px;
}
#deckbuilder.runeterra-deckbuilder .db-card.full-card img, #deckbuilder.mythgard-deckbuilder .db-card.full-card img, #deckbuilder.snap-deckbuilder .db-card.full-card img, .collection-view-page .db-card.full-card img {
  filter: opacity(30%) grayscale(95%);
}
#deckbuilder.runeterra-deckbuilder .db-card img, #deckbuilder.mythgard-deckbuilder .db-card img, #deckbuilder.snap-deckbuilder .db-card img, .collection-view-page .db-card img {
  max-width: 178px;
}
#deckbuilder.runeterra-deckbuilder .db-card .related, #deckbuilder.mythgard-deckbuilder .db-card .related, #deckbuilder.snap-deckbuilder .db-card .related, .collection-view-page .db-card .related {
  text-align: center;
  visibility: hidden;
}
#deckbuilder.runeterra-deckbuilder .db-card .related a, #deckbuilder.mythgard-deckbuilder .db-card .related a, #deckbuilder.snap-deckbuilder .db-card .related a, .collection-view-page .db-card .related a {
  background: #034149;
  padding: 5px 20px;
  border-radius: 5px;
  color: #FFF;
  font-weight: 400;
}
#deckbuilder.runeterra-deckbuilder .db-card .qty, #deckbuilder.mythgard-deckbuilder .db-card .qty, #deckbuilder.snap-deckbuilder .db-card .qty, .collection-view-page .db-card .qty {
  position: absolute;
  top: 10px;
  right: 0;
}
#deckbuilder.runeterra-deckbuilder .db-card .qty:before, #deckbuilder.mythgard-deckbuilder .db-card .qty:before, #deckbuilder.snap-deckbuilder .db-card .qty:before, .collection-view-page .db-card .qty:before {
  content: attr(data-qty);
  display: block;
  background: #1b0d0c;
  border: 2px solid #786962;
  border-radius: 10px;
  padding: 5px 10px;
}
#deckbuilder.runeterra-deckbuilder .db-card.db-card-runeterra-unit .qty, #deckbuilder.runeterra-deckbuilder .db-card.db-card-runeterra-landmark .qty, #deckbuilder.runeterra-deckbuilder .db-card.db-card-runeterra-champion .qty, #deckbuilder.mythgard-deckbuilder .db-card.db-card-runeterra-unit .qty, #deckbuilder.mythgard-deckbuilder .db-card.db-card-runeterra-landmark .qty, #deckbuilder.mythgard-deckbuilder .db-card.db-card-runeterra-champion .qty, #deckbuilder.snap-deckbuilder .db-card.db-card-runeterra-unit .qty, #deckbuilder.snap-deckbuilder .db-card.db-card-runeterra-landmark .qty, #deckbuilder.snap-deckbuilder .db-card.db-card-runeterra-champion .qty, .collection-view-page .db-card.db-card-runeterra-unit .qty, .collection-view-page .db-card.db-card-runeterra-landmark .qty, .collection-view-page .db-card.db-card-runeterra-champion .qty {
  right: 30px;
}
#deckbuilder.runeterra-deckbuilder .db-card[data-type=Path] img, #deckbuilder.runeterra-deckbuilder .db-card[data-type=Power] img, #deckbuilder.mythgard-deckbuilder .db-card[data-type=Path] img, #deckbuilder.mythgard-deckbuilder .db-card[data-type=Power] img, #deckbuilder.snap-deckbuilder .db-card[data-type=Path] img, #deckbuilder.snap-deckbuilder .db-card[data-type=Power] img, .collection-view-page .db-card[data-type=Path] img, .collection-view-page .db-card[data-type=Power] img {
  max-width: 330px !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card, #deckbuilder.mythgard-deckbuilder #deck-contents .card, #deckbuilder.snap-deckbuilder #deck-contents .card, .collection-view-page #deck-contents .card {
  background: #0d2327 !important;
  position: relative;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card:after, #deckbuilder.snap-deckbuilder #deck-contents .card:after, .collection-view-page #deck-contents .card:after {
  position: absolute;
  right: 35px;
  top: 5px;
  width: 30px;
  height: 30px;
  background-size: 30px;
  display: block;
  content: "";
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.targon, #deckbuilder.mythgard-deckbuilder #deck-contents .card.targon, #deckbuilder.snap-deckbuilder #deck-contents .card.targon, .collection-view-page #deck-contents .card.targon {
  background: linear-gradient(to right, #0d2327 60%, #324e4c) !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.targon:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card.targon:after, #deckbuilder.snap-deckbuilder #deck-contents .card.targon:after, .collection-view-page #deck-contents .card.targon:after {
  background-image: url(images/runeterra/card/region/targon.png);
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.bilgewater, #deckbuilder.mythgard-deckbuilder #deck-contents .card.bilgewater, #deckbuilder.snap-deckbuilder #deck-contents .card.bilgewater, .collection-view-page #deck-contents .card.bilgewater {
  background: linear-gradient(to right, #0d2327 60%, #443a3a) !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.bilgewater:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card.bilgewater:after, #deckbuilder.snap-deckbuilder #deck-contents .card.bilgewater:after, .collection-view-page #deck-contents .card.bilgewater:after {
  background-image: url(images/runeterra/card/region/bilgewater.png);
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.demacia, #deckbuilder.mythgard-deckbuilder #deck-contents .card.demacia, #deckbuilder.snap-deckbuilder #deck-contents .card.demacia, .collection-view-page #deck-contents .card.demacia {
  background: linear-gradient(to right, #0d2327 60%, #494949) !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.demacia:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card.demacia:after, #deckbuilder.snap-deckbuilder #deck-contents .card.demacia:after, .collection-view-page #deck-contents .card.demacia:after {
  background-image: url(images/runeterra/card/region/demacia.png);
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.freljord, #deckbuilder.mythgard-deckbuilder #deck-contents .card.freljord, #deckbuilder.snap-deckbuilder #deck-contents .card.freljord, .collection-view-page #deck-contents .card.freljord {
  background: linear-gradient(to right, #0d2327 60%, #1a203c) !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.freljord:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card.freljord:after, #deckbuilder.snap-deckbuilder #deck-contents .card.freljord:after, .collection-view-page #deck-contents .card.freljord:after {
  background-image: url(images/runeterra/card/region/freljord.png);
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.ionia, #deckbuilder.mythgard-deckbuilder #deck-contents .card.ionia, #deckbuilder.snap-deckbuilder #deck-contents .card.ionia, .collection-view-page #deck-contents .card.ionia {
  background: linear-gradient(to right, #0d2327 60%, #3c1a3a) !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.ionia:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card.ionia:after, #deckbuilder.snap-deckbuilder #deck-contents .card.ionia:after, .collection-view-page #deck-contents .card.ionia:after {
  background-image: url(images/runeterra/card/region/ionia.png);
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.noxus, #deckbuilder.mythgard-deckbuilder #deck-contents .card.noxus, #deckbuilder.snap-deckbuilder #deck-contents .card.noxus, .collection-view-page #deck-contents .card.noxus {
  background: linear-gradient(to right, #0d2327 60%, #3c1d1a) !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.noxus:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card.noxus:after, #deckbuilder.snap-deckbuilder #deck-contents .card.noxus:after, .collection-view-page #deck-contents .card.noxus:after {
  background-image: url(images/runeterra/card/region/noxus.png);
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.piltoverzaun, #deckbuilder.mythgard-deckbuilder #deck-contents .card.piltoverzaun, #deckbuilder.snap-deckbuilder #deck-contents .card.piltoverzaun, .collection-view-page #deck-contents .card.piltoverzaun {
  background: linear-gradient(to right, #0d2327 60%, #3c261a) !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.piltoverzaun:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card.piltoverzaun:after, #deckbuilder.snap-deckbuilder #deck-contents .card.piltoverzaun:after, .collection-view-page #deck-contents .card.piltoverzaun:after {
  background-image: url(images/runeterra/card/region/piltover-zaun.png);
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.shadowisles, #deckbuilder.mythgard-deckbuilder #deck-contents .card.shadowisles, #deckbuilder.snap-deckbuilder #deck-contents .card.shadowisles, .collection-view-page #deck-contents .card.shadowisles {
  background: linear-gradient(to right, #0d2327 60%, #1a3c22) !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.shadowisles:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card.shadowisles:after, #deckbuilder.snap-deckbuilder #deck-contents .card.shadowisles:after, .collection-view-page #deck-contents .card.shadowisles:after {
  background-image: url(images/runeterra/card/region/shadow-isles.png);
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.shurima, #deckbuilder.mythgard-deckbuilder #deck-contents .card.shurima, #deckbuilder.snap-deckbuilder #deck-contents .card.shurima, .collection-view-page #deck-contents .card.shurima {
  background: linear-gradient(to right, #0d2327 60%, #363c1a) !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.shurima:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card.shurima:after, #deckbuilder.snap-deckbuilder #deck-contents .card.shurima:after, .collection-view-page #deck-contents .card.shurima:after {
  background-image: url(images/runeterra/card/region/shurima.png);
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.bandle-city, #deckbuilder.mythgard-deckbuilder #deck-contents .card.bandle-city, #deckbuilder.snap-deckbuilder #deck-contents .card.bandle-city, .collection-view-page #deck-contents .card.bandle-city {
  background: linear-gradient(to right, #0d2327 60%, #2d6139) !important;
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card.bandle-city:after, #deckbuilder.mythgard-deckbuilder #deck-contents .card.bandle-city:after, #deckbuilder.snap-deckbuilder #deck-contents .card.bandle-city:after, .collection-view-page #deck-contents .card.bandle-city:after {
  background-image: url(images/runeterra/card/region/bandle-city.png);
}
#deckbuilder.runeterra-deckbuilder #deck-contents .card-qty, #deckbuilder.mythgard-deckbuilder #deck-contents .card-qty, #deckbuilder.snap-deckbuilder #deck-contents .card-qty, .collection-view-page #deck-contents .card-qty {
  background: #1b0d0c;
  border: 1px solid #786962;
  border-radius: 5px;
  min-width: 40px;
  text-align: center;
  display: inline-block;
  font-size: 15px;
}
#deckbuilder.runeterra-deckbuilder #mana-curve ul.mana-bars, #deckbuilder.mythgard-deckbuilder #mana-curve ul.mana-bars, #deckbuilder.snap-deckbuilder #mana-curve ul.mana-bars, .collection-view-page #mana-curve ul.mana-bars {
  background: #0d2327;
}
#deckbuilder.runeterra-deckbuilder #stats, #deckbuilder.mythgard-deckbuilder #stats, #deckbuilder.snap-deckbuilder #stats, .collection-view-page #stats {
  background: #112e33;
  display: block;
  text-align: center;
}
#deckbuilder.runeterra-deckbuilder #stats .stat-cards-count, #deckbuilder.mythgard-deckbuilder #stats .stat-cards-count, #deckbuilder.snap-deckbuilder #stats .stat-cards-count, .collection-view-page #stats .stat-cards-count {
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: space-around;
}
#deckbuilder.runeterra-deckbuilder #stats .stat-cards-count .stat-label svg, #deckbuilder.mythgard-deckbuilder #stats .stat-cards-count .stat-label svg, #deckbuilder.snap-deckbuilder #stats .stat-cards-count .stat-label svg, .collection-view-page #stats .stat-cards-count .stat-label svg {
  height: 30px;
  width: 30px;
  fill: red;
}

.site-content.runeterra-deck-detail-page {
  background-image: url(images/runeterra/deck/deck-header.jpg);
}
.site-content.runeterra-deck-detail-page .deck-vote-prompt {
  background: url(images/transparent-bgs/asfalt-dark.png), linear-gradient(#141c27, #191d1f);
  border-color: #454065;
  margin-top: 150px;
}
.site-content.runeterra-deck-detail-page .deck-vote-prompt div.portrait {
  background-image: url(images/runeterra/deck/poro-portrait.png);
  min-width: 195px;
  margin-top: -155px;
}

.listing-runeterra-decks .deck-image i {
  display: inline-block;
}
@media screen and (max-width: 425px) {
  .listing-runeterra-decks .deck-image i {
    width: 35px;
    height: 35px;
  }
}
.listing-runeterra-decks tr {
  position: relative;
  background-size: cover;
}
.listing-runeterra-decks tr:hover {
  --deck-listing-gradient-overlay: var(--deck-listing-gradient-overlay-hover);
}
.listing-runeterra-decks th.col-background {
  display: none;
}
.listing-runeterra-decks .col-name .deck-details > a {
  font-size: 18px;
  text-shadow: #000 0 0 2px, #000 0 0 2px, #000 0 0 2px, #000 0 0 2px;
}
.listing-runeterra-decks td.col-score {
  font-size: 26px;
}
.listing-runeterra-decks td.col-score:before {
  font-size: 20px;
  margin-right: 10px;
}
@media screen and (max-width: 500px) {
  .listing-runeterra-decks td.col-score {
    font-size: 20px;
  }
  .listing-runeterra-decks td.col-score:before {
    font-size: 16px;
    margin-right: 5px;
  }
}
.listing-runeterra-decks .deck-detail-wrapper .champions {
  display: flex;
  flex-wrap: wrap;
}
.listing-runeterra-decks .deck-detail-wrapper .champions .champ {
  position: relative;
  border: 2px solid rgba(0, 0, 0, 0.9);
  box-shadow: 1px 1px 4px rgba(80, 80, 80, 0.6);
  border-radius: 3px;
  margin: 5px;
  height: 50px;
  width: 110px;
  background-position: top center;
  background-size: 200%;
  display: block;
}
.listing-runeterra-decks .deck-detail-wrapper .champions .champ .qty {
  position: absolute;
  bottom: 4px;
  right: -8px;
  background: #1b0d0c;
  border: 1px solid #786962;
  border-radius: 10px;
  padding: 3px 8px;
  color: #FFF;
}

.deck-embed-runeterra .deck-image i {
  display: inline-block;
}
.deck-embed-runeterra .deck-contents li {
  padding: 5px 10px;
}
.deck-embed-runeterra .deck-contents li a {
  flex-grow: 1;
}
.deck-embed-runeterra .deck-contents li .card-count {
  align-self: flex-end;
}

.runeterra-deck-list-page div#id_region, .collection-view-page div#id_region {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
}
.runeterra-deck-list-page div#id_region input, .collection-view-page div#id_region input {
  display: none;
}
.runeterra-deck-list-page div#id_region input + label, .collection-view-page div#id_region input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  width: 80px;
  margin: 10px;
  display: table-cell;
  background: transparent;
  box-shadow: none;
}
.runeterra-deck-list-page div#id_region input + label:before, .collection-view-page div#id_region input + label:before {
  display: block;
  height: 60px;
  width: 60px;
  background-size: 60px;
  filter: grayscale(100%);
  opacity: 0.8;
  content: "";
  margin: auto;
  transition: filter 0.25s ease-in-out;
}
.runeterra-deck-list-page div#id_region input:checked + label, .collection-view-page div#id_region input:checked + label {
  font-weight: 700;
}
.runeterra-deck-list-page div#id_region input:checked + label:before, .collection-view-page div#id_region input:checked + label:before {
  filter: none;
  opacity: 1;
}
.runeterra-deck-list-page div#id_region input + label[data-label="Shadow Isles"]:before, .collection-view-page div#id_region input + label[data-label="Shadow Isles"]:before {
  background-image: url(images/runeterra/card/region/shadow-isles.png);
}
.runeterra-deck-list-page div#id_region input + label[data-label=Ionia]:before, .collection-view-page div#id_region input + label[data-label=Ionia]:before {
  background-image: url(images/runeterra/card/region/ionia.png);
}
.runeterra-deck-list-page div#id_region input + label[data-label="Piltover & Zaun"]:before, .collection-view-page div#id_region input + label[data-label="Piltover & Zaun"]:before {
  background-image: url(images/runeterra/card/region/piltover-zaun.png);
}
.runeterra-deck-list-page div#id_region input + label[data-label=Demacia]:before, .collection-view-page div#id_region input + label[data-label=Demacia]:before {
  background-image: url(images/runeterra/card/region/demacia.png);
}
.runeterra-deck-list-page div#id_region input + label[data-label=Noxus]:before, .collection-view-page div#id_region input + label[data-label=Noxus]:before {
  background-image: url(images/runeterra/card/region/noxus.png);
}
.runeterra-deck-list-page div#id_region input + label[data-label=Freljord]:before, .collection-view-page div#id_region input + label[data-label=Freljord]:before {
  background-image: url(images/runeterra/card/region/freljord.png);
}
.runeterra-deck-list-page div#id_region input + label[data-label=Bilgewater]:before, .collection-view-page div#id_region input + label[data-label=Bilgewater]:before {
  background-image: url(images/runeterra/card/region/bilgewater.png);
}
.runeterra-deck-list-page div#id_region input + label[data-label=Targon]:before, .collection-view-page div#id_region input + label[data-label=Targon]:before {
  background-image: url(images/runeterra/card/region/targon.png);
}
.runeterra-deck-list-page div#id_region input + label[data-label=Shurima]:before, .collection-view-page div#id_region input + label[data-label=Shurima]:before {
  background-image: url(images/runeterra/card/region/shurima.png);
}
.runeterra-deck-list-page div#id_region input + label[data-label="Bandle City"]:before, .collection-view-page div#id_region input + label[data-label="Bandle City"]:before {
  background-image: url(images/runeterra/card/region/bandle-city.png);
}
.runeterra-deck-list-page .deck-image, .collection-view-page .deck-image {
  width: 85px;
  text-align: center;
}
@media screen and (max-width: 425px) {
  .runeterra-deck-list-page .deck-image, .collection-view-page .deck-image {
    width: 45px;
  }
}

.lds-ellipsis {
  display: block;
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  text-align: center;
}

.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}
.spoiler .spoiler-heading {
  text-align: center;
  padding: 5px 10px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  background: #1d1e22;
}
.spoiler .spoiler-heading:hover {
  background: rgb(36.0428571429, 37.2857142857, 42.2571428571);
}
.spoiler .spoiler-content {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  padding: 10px;
  display: none;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.spoiler .spoiler-content.show {
  display: block;
}

.card-reveal-slider {
  grid-column: span 12;
  background: var(--block-background);
  padding: 10px;
  border-radius: 4px;
  max-width: 100%;
}
.card-reveal-slider .glide__slide {
  text-align: center;
  align-self: flex-end;
}
.card-reveal-slider .glide__track:before, .card-reveal-slider .glide__track:after {
  width: 90px;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  z-index: 1;
  height: 100%;
}
@media screen and (max-width: 600px) {
  .card-reveal-slider .glide__track:before, .card-reveal-slider .glide__track:after {
    width: 0;
  }
}
.card-reveal-slider .glide__track:before {
  background: linear-gradient(to right, var(--block-background), transparent);
  left: 0;
}
.card-reveal-slider .glide__track:after {
  background: linear-gradient(to left, var(--block-background), transparent);
  right: 0;
}
.card-reveal-slider .glide__arrow--left {
  left: 10px;
}
.card-reveal-slider .glide__arrow--right {
  right: 10px;
}
.card-reveal-slider .reveal-links {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
  justify-content: center;
}
.card-reveal-slider .reveal-links a.button {
  min-width: 250px;
  text-align: center;
  height: 40px;
  font-size: 16px;
  line-height: 31px;
}

.card-rating-embed p {
  display: none;
  text-align: center;
}

.card-pack-listing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.card-pack-listing .card-pack-image {
  transition: transform 0.3s ease-in-out;
}
.card-pack-listing .card-pack-image:hover {
  transform: scale(1.07);
}

.card-pack-wrapper, .pretty-wrapper {
  text-align: center;
  background: var(--widget-background);
  padding: 20px;
  border: 1px solid var(--table-border-color);
  border-radius: 5px;
}

.block.block-grid {
  margin-top: 0;
}
.block.block-grid section {
  padding: 10px;
}
.block.block-grid section.form {
  display: flex;
  flex-direction: column;
}
.block.block-grid section.form form {
  display: flex;
}
.block.block-grid section.form form input {
  flex-grow: 1;
}
.block.block-grid section.form form button {
  margin-left: 20px;
}
.block.block-grid section > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.block.block-grid section > div div:nth-child(1) {
  grid-column: span 1;
  color: #747474;
}
.block.block-grid section > div div:nth-child(2) {
  grid-column: span 2;
}

.block.block-full-span {
  grid-column: span 2;
}

.account-management {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 10px;
}
.account-management .block {
  grid-column: span 1;
}

header a.header-manage-link {
  text-align: right;
  font-size: 17px;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  float: right;
  color: var(--link-color);
  padding-top: 7px;
}
header a.header-manage-link:hover {
  color: var(--link-hover-color);
}
header a.header-manage-link:after {
  font-family: "Font Awesome 5 Pro";
  display: inline-block;
  font-weight: 700;
  content: "\f138";
  margin-left: 5px;
}

.supporter-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 10px;
  text-align: center;
}
.supporter-tiers ul {
  text-align: left;
  flex-grow: 1;
  padding-left: 20px;
}
.supporter-tiers .tier {
  display: flex;
  flex-direction: column;
  background: var(--widget-background);
  padding: 10px;
  border-radius: 5px;
  font-weight: 400;
}
.supporter-tiers .tier.tier-bronze {
  border: 2px solid rgb(92, 58, 19);
}
.supporter-tiers .tier.tier-silver {
  border: 2px solid rgb(75, 73, 73);
}
.supporter-tiers .tier.tier-gold {
  border: 2px solid rgb(110, 81, 1);
}
.supporter-tiers .tier.tier-mythic {
  border: 2px solid rgb(104, 29, 0);
}
.supporter-tiers .button {
  align-self: center;
}

.article-related .related-listing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 10px;
}
.article-related .related-listing .article-excerpt {
  background: var(--widget-background);
  border: 1px solid #292929;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}
.article-related .related-listing .article-excerpt .article-thumb img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.article-related .related-listing .article-details {
  padding: 10px;
}
.article-related .related-listing h1, .article-related .related-listing h2 {
  font-size: 18px;
}

.article-tags {
  border-top: 2px solid var(--hr-color);
  padding-top: 10px;
}

.article-share {
  margin-top: 20px;
  border-top: 2px solid var(--hr-color);
  padding: 10px 0;
  font-size: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 10px;
}
@media screen and (max-width: 600px) {
  .article-share {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
.article-share .end-block {
  border-radius: 5px;
  margin-top: 0;
}
.article-share .end-block .poll-inline {
  background: none;
  padding: 0;
}
.article-share ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  padding: 0;
  margin-bottom: 0;
}
.article-share ul li + li {
  margin-left: 20px;
}
.article-share a {
  color: var(--font-color);
}
.article-share a:hover {
  color: var(--font-color-hover);
}

.button.button-tag {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  background: var(--button-bg);
  border: none;
  margin-left: 20px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-bottom: 10px;
}
.button.button-tag:before {
  content: "";
  position: absolute;
  top: 0;
  left: -17px;
  width: 0;
  height: 0;
  border-color: transparent var(--button-bg) transparent transparent;
  border-style: solid;
  border-width: 15px 17px 17px 0;
}
.button.button-tag:after {
  content: "";
  position: absolute;
  top: 13px;
  left: 1px;
  float: left;
  width: 5px;
  height: 5px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.4);
}
.button.button-tag:hover {
  background: var(--button-hover-bg);
}
.button.button-tag:hover:before {
  border-color: transparent var(--button-hover-bg) transparent transparent;
}

nav#membernav {
  margin: 0 -20px;
  width: calc(100% + 40px);
  z-index: 19990;
}
nav#membernav .navigation-body.is-visible {
  margin-top: 60px;
}
@media screen and (min-width: 1200px) {
  nav#membernav .navigation-body-header {
    display: none;
  }
}

.navigation-profile-for-mobile {
  display: none;
}
@media screen and (max-width: 950px) {
  .navigation-profile-for-mobile {
    display: block;
  }
}

.mobile-nav-desc {
  display: none;
}
@media screen and (max-width: 950px) {
  .mobile-nav-desc {
    display: inline-block;
  }
}

.expansion-compendium-detail-page .compendium-heading {
  text-align: center;
}
.expansion-compendium-detail-page .compendium-section {
  text-align: center;
}
.expansion-compendium-detail-page .compendium-score {
  min-width: 80px;
  padding: 10px 20px;
  font-size: 22px;
  background: #0e6d64;
  border-radius: 5px;
  color: #FFFFFF;
  font-weight: 700;
}
.expansion-compendium-detail-page .compendium-section-magmarager .compendium-score {
  background: #982020;
}

main {
  position: relative;
}

.sweet-wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
}
.sweet-wrap + main {
  margin-top: 20px;
}

.sweet-wrapper {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.sweet-wrapper.sweet-wrapper-remove {
  text-align: center;
}
.sweet-wrapper.sweet-wrapper-remove.sweet-wrapper-full-grid {
  grid-column: span 12;
}
.sweet-wrapper .sweet-remove {
  color: #747474;
  font-size: 13px;
}
.sweet-wrapper .sweet-remove:hover {
  color: #FFFFFF;
}

.sweet-wrapper-footer-after-content {
  margin-top: 20px;
  grid-column: span 12;
}

.sweet-wrapper-header-after-nav {
  margin-top: 20px;
  grid-column: span 12;
}

.sweet-wrapper-hearth-after-reveals {
  margin-top: 20px;
  grid-column: span 12;
}

.sweet-wrapper-forumbetween {
  margin-top: 20px;
}

.sweet-wrapper-sidebar-half {
  margin-top: 20px;
}

#ooc-footer, #ooc-sidebar, #ooc-before-comments, #ooc-top-square {
  max-height: 270px;
}

.portal-listing {
  grid-column: span 8;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.portal-listing li.game-portal {
  border: 1px solid black;
  height: 120px;
  position: relative;
  transition: filter 0.4s;
  background-position: top center;
}
.portal-listing li.game-portal a {
  display: block;
  height: 100%;
  position: relative;
  color: #d0d0d0;
}
.portal-listing li.game-portal a:hover {
  box-shadow: inset 0px 0px 80px 1px hsla(0, 0%, 60%, 0.8);
}
.portal-listing li.game-portal a span {
  position: absolute;
  bottom: 0;
  background: hsla(215, 100%, 4%, 0.8);
  padding: 5px;
  width: 100%;
  text-align: center;
}
.portal-listing li.game-portal.portal-hearthstone {
  background-image: url(images/portals/portal-hearthstone.jpg);
}
.portal-listing li.game-portal.portal-runeterra {
  background-image: url(images/portals/portal-runeterra.jpg);
}
.portal-listing li.game-portal.portal-magic {
  background-image: url(images/portals/portal-magic.jpg);
}
.portal-listing li.game-portal.portal-forums {
  background-image: url(images/portals/portal-forums.jpg);
}
@media screen and (max-width: 1000px) {
  .portal-listing {
    grid-column: span 7;
  }
}
@media screen and (max-width: 800px) {
  .portal-listing {
    grid-column: span 12;
  }
}
@media screen and (max-width: 440px) {
  .portal-listing {
    grid-column: span 12;
    grid-template-columns: repeat(1, 1fr);
  }
}

/* New Portals */
.game-portals ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.game-portals ul li a {
  color: var(--link-hover-color);
  padding: 5px 20px;
  font-size: 25px;
  font-weight: 400;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
}
.game-portals ul li a:hover {
  color: #FEFEFE;
}
.game-portals ul li a:before {
  display: inline-block;
  height: 25px;
  width: 25px;
  background-size: cover;
  content: "";
  margin: auto;
  mask-size: cover;
  -webkit-mask-size: cover;
  margin-right: 5px;
  background-color: var(--link-hover-color);
  vertical-align: middle;
  margin-bottom: 4px;
}
.game-portals ul li a:before:hover {
  background-color: #FEFEFE;
}
.game-portals ul li a.hearthstone-portal-link:before {
  mask: url(images/game-logo-hearthstone.svg) no-repeat;
  mask-image: url(images/game-logo-hearthstone.svg) no-repeat;
  -webkit-mask: url(images/game-logo-hearthstone.svg) no-repeat;
}
.game-portals ul li a.hearthstone-portal-link:hover:before {
  background-color: var(--color-blue-dark);
}
.game-portals ul li a.mercenaries-portal-link:before {
  mask: url(images/game-logo-mercenaries.svg) no-repeat;
  mask-image: url(images/game-logo-mercenaries.svg) no-repeat;
  -webkit-mask: url(images/game-logo-mercenaries.svg) no-repeat;
}
.game-portals ul li a.mercenaries-portal-link:hover:before {
  background-color: var(--color-red-dark);
}
.game-portals ul li a.runeterra-portal-link:before {
  mask: url(images/game-logo-runeterra.svg) no-repeat;
  mask-image: url(images/game-logo-runeterra.svg) no-repeat;
  -webkit-mask: url(images/game-logo-runeterra.svg) no-repeat;
}
.game-portals ul li a.runeterra-portal-link:hover:before {
  background-color: var(--color-green-dark);
}
.game-portals ul li a.magic-portal-link:before {
  mask: url(images/game-logo-magic-arena.svg) no-repeat;
  mask-image: url(images/game-logo-magic-arena.svg) no-repeat;
  -webkit-mask: url(images/game-logo-magic-arena.svg) no-repeat;
}
.game-portals ul li a.magic-portal-link:hover:before {
  background-color: var(--color-red-dark);
}
.game-portals ul li a.mythgard-portal-link:before {
  mask: url(images/game-logo-mythgard.svg) no-repeat;
  mask-image: url(images/game-logo-mythgard.svg) no-repeat;
  -webkit-mask: url(images/game-logo-mythgard.svg) no-repeat;
}
.game-portals ul li a.mythgard-portal-link:hover:before {
  background-color: var(--color-pink-dark);
}
.game-portals ul li a.yugioh-portal-link:before {
  mask: url(images/game-logo-yugioh.svg) no-repeat;
  mask-image: url(images/game-logo-yugioh.svg) no-repeat;
  -webkit-mask: url(images/game-logo-yugioh.svg) no-repeat;
}
.game-portals ul li a.yugioh-portal-link:hover:before {
  background-color: var(--color-yellow-dark);
}
.game-portals ul li a.pokemon-portal-link:before {
  mask: url(images/game-logo-pokemon.svg) no-repeat;
  mask-image: url(images/game-logo-pokemon.svg) no-repeat;
  -webkit-mask: url(images/game-logo-pokemon.svg) no-repeat;
}
.game-portals ul li a.pokemon-portal-link:hover:before {
  background-color: var(--color-peach-dark);
}

.portal-promo {
  grid-column: span 4;
}
@media screen and (max-width: 1000px) {
  .portal-promo {
    grid-column: span 5;
  }
}
@media screen and (max-width: 800px) {
  .portal-promo {
    grid-column: span 12;
  }
}

.collection-set-progression {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.collection-set-progression h6 {
  margin-bottom: 0;
}
.collection-set-progression span.icon {
  vertical-align: text-bottom;
}

.decklist-card {
  background-repeat: no-repeat, no-repeat;
  background-position: center left, center right;
}
.decklist-card .missing-cards {
  font-family: "Font Awesome 5 Pro";
  color: hsl(56, 80%, 49%);
  font-weight: 700;
  margin-right: 6px;
  font-size: 80%;
  align-self: center;
  cursor: help;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 5px;
  text-align: center;
  padding: 0 7px;
}
.decklist-card.card-runeterra .missing-cards {
  margin-right: 32px;
}

.paged-collection {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.paged-collection .collection-card {
  width: 100%;
  background: var(--site-background-dark);
  padding: 10px;
  display: flex;
  position: relative;
}
.paged-collection .collection-card:before {
  display: block;
  position: relative;
  content: attr(data-card-count);
  padding: 3px;
  width: 20px;
  text-align: center;
  font-weight: 700;
  background: var(--table-odd-background);
  border: 1px solid #131617;
  border-radius: 5px;
  margin-right: 10px;
}
.paged-collection .collection-card .card-name {
  align-self: center;
  flex-grow: 1;
}
.paged-collection .collection-card .card-mod {
  padding: 3px 6px;
  border-radius: 5px;
  background-color: hsl(123, 50%, 12%);
  cursor: pointer;
}
.paged-collection .collection-card .card-mod:hover {
  background-color: hsl(123, 50%, 20%);
}
.paged-collection .collection-card .card-mod.remove-card-collection {
  background-color: hsl(0, 50%, 19%);
}
.paged-collection .collection-card .card-mod.remove-card-collection:hover {
  background-color: hsl(0, 50%, 40%);
}
.paged-collection .collection-card .card-mod + .card-mod {
  margin-left: 5px;
}

.collection-view-page {
  margin-top: 10px;
}
.collection-view-page .tab {
  background: #1c2028;
  padding: 10px;
  border-radius: 5px;
}
.collection-view-page .tab.active {
  background: #1d1e22;
}
.collection-view-page .tabbed-content .tabs {
  margin-bottom: 20px;
}

#edit-collection .paging {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  text-align: center;
  padding-top: 20px;
}
#edit-collection .paging a {
  font-size: 140%;
  color: white;
  background: var(--table-even-background);
  cursor: pointer;
  border: 1px solid hsla(0, 0%, 0%, 0.8);
  border-radius: 5px;
}
#edit-collection .paging a:hover {
  background: var(--table-odd-background);
}

.collection-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 5px;
}
.collection-filters p {
  grid-column: span 1;
}
.collection-filters p select, .collection-filters p input {
  width: 100%;
  height: 40px;
}
.collection-filters p:first-child {
  margin-top: 1.05rem;
}

.collection-buttons {
  margin: 10px 0;
}
.collection-buttons #collection-save, .collection-buttons #collection-bulk, .collection-buttons #collection-bulk-remove {
  background: var(--table-even-background);
  cursor: pointer;
  border: 1px solid hsla(0, 0%, 0%, 0.8);
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 120%;
}
.collection-buttons #collection-save:hover, .collection-buttons #collection-bulk:hover, .collection-buttons #collection-bulk-remove:hover {
  background: var(--table-odd-background);
}
.collection-buttons span {
  display: inline-block;
}

.collection-set {
  width: 100%;
  background: var(--site-background-dark);
  padding: 10px;
  border: 1px solid var(--hr-color);
  border-radius: 5px;
}

.collection-saving {
  display: none;
}
.collection-saving.show {
  display: inline-block;
}
.collection-saving .lds-ellipsis {
  width: 50px;
  height: 15px;
}
.collection-saving .lds-ellipsis div {
  top: 5px;
}

progress.collection-stat {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
progress.collection-stat::-webkit-progress-bar, progress.collection-stat {
  background-color: hsl(0, 0%, 22%) !important;
  border: 1px solid #26292f;
  height: 25px;
  color: red !important;
  box-shadow: 0px 0px 2px #1e1f1e;
}
progress.collection-stat::-webkit-progress-value {
  background-color: red !important;
}
progress.collection-stat::-moz-progress-bar {
  background-color: red !important;
}
progress.collection-stat:after {
  display: block;
  text-align: center;
  color: var(--font-color);
  content: attr(value) "/" attr(max);
}

progress.stat-collected::-webkit-progress-value {
  background-color: hsl(167, 55%, 54%) !important;
}
progress.stat-collected::-moz-progress-bar {
  background-color: hsl(167, 55%, 54%) !important;
}

progress.stat-pity::-webkit-progress-value {
  background-color: hsl(29, 55%, 54%) !important;
}
progress.stat-pity::-moz-progress-bar {
  background-color: hsl(29, 55%, 54%) !important;
}

.competition-progress {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
.competition-progress .progression {
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  background: var(--widget-background);
  text-align: center;
}
.competition-progress .progression.progression-inactive {
  opacity: 0.5;
}
.competition-progress .progression.progression-active {
  background: var(--widget-background-active);
}

.custom-card {
  display: grid;
  padding: 20px;
  background: var(--widget-background);
  border-radius: 5px;
  grid-gap: 10px;
}
.custom-card.custom-card-hearthstone {
  grid-template-columns: 1fr 1fr 1fr minmax(300px, 500px);
  grid-template-rows: repeat(4, 1fr);
}
.custom-card.custom-card-hearthstone .card-preview {
  max-height: 70%;
}

.card-design-submission {
  padding: 5px;
  background: var(--widget-background);
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.card-design-submission .entry-details {
  flex-grow: 1;
}
.card-design-submission .mod-tools {
  font-size: 30px;
}
.card-design-submission .mod-tools a {
  color: var(--font-color) !important;
}
.card-design-submission .mod-tools i {
  cursor: pointer;
}
.card-design-submission .mod-tools .disqualified {
  color: red !important;
}
.card-design-submission .score {
  font-size: 22px;
}
.card-design-submission .score .score-label {
  display: block;
  color: #747474;
  font-size: 13px;
}

.competition-submissions {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}
.competition-submissions.competition-submissions-max-1 {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.competition-submissions.competition-submissions-max-2 {
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

.custom-card-hearthstone input, .custom-card-hearthstone select {
  max-width: 100%;
  min-width: 100%;
}

.custom-card-hearthstone .field-wrapper-card_image {
  grid-column: 4;
  grid-row-start: 1;
  grid-row-end: 7;
}

.custom-card-hearthstone .field-wrapper-name {
  grid-column: 1/3;
  grid-row: 1;
}

.custom-card-hearthstone .field-wrapper-race {
  grid-column: 3;
  grid-row: 1;
}

.custom-card-hearthstone .field-wrapper-hsclasses {
  grid-column: 1/4;
  grid-row: 2;
}
.custom-card-hearthstone .field-wrapper-hsclasses .select2 {
  width: 100%;
}

.competition-banner {
  text-align: center;
}

.competition-countdown {
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.3);
  padding: 5px;
  margin-bottom: 0px;
  min-height: 120px;
}
.competition-countdown h6 {
  margin-bottom: 5px;
}
.competition-countdown .inner-timer {
  display: block;
}
.competition-countdown .group .counter {
  padding: 4px 20px;
  background: rgba(0, 0, 10, 0.3);
  font-size: 18px;
}
.competition-countdown .group .desc {
  background: rgba(0, 0, 10, 0.4);
}

.competition-seen {
  text-align: center;
}
.competition-seen p {
  margin-bottom: 5px;
}
.competition-seen .competition-progress-meter {
  padding: 2px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.3);
  max-width: 500px;
  margin: 0 auto 10px;
}
.competition-seen .competition-progress-meter .bar-background {
  background: rgba(0, 0, 0, 0.4);
  padding: 1px;
}
.competition-seen .competition-progress-meter .bar-progression {
  background: hsla(118, 75%, 25%, 0.9);
  height: 20px;
}

#card-design-nav {
  margin: 0 -20px 20px;
  width: calc(100% + 40px);
  z-index: 19990;
}
#card-design-nav .navigation-body.is-visible {
  margin-top: 60px;
}
@media screen and (min-width: 1200px) {
  #card-design-nav .navigation-body-header {
    display: none;
  }
}

.card-design-header {
  margin: -20px;
  margin-top: -30px;
  margin-bottom: 0;
  height: 120px;
}

.block + .articles {
  margin-top: 10px;
}

.block.block-card-competition {
  background: url(images/hearth/fancreations/widget-bg.png) top center;
}
.block.block-card-competition .competition-buttons {
  margin-top: 10px;
  text-align: center;
}

.max100 {
  max-width: 100%;
}

.block.block-hearth-pack-leaderboard .pack-score {
  font-size: 20px;
  color: #D89B00;
  line-height: 50px;
  font-weight: 400;
}
.block.block-hearth-pack-leaderboard .pack-position-1 {
  color: hsl(43, 100%, 45%);
}
.block.block-hearth-pack-leaderboard .pack-position-2 {
  color: hsl(78, 5%, 57%);
}
.block.block-hearth-pack-leaderboard .pack-position-3 {
  color: hsl(31, 36%, 50%);
}
.block.block-hearth-pack-leaderboard .pack-medal {
  text-align: center;
  font-size: 30px;
  margin-right: 10px;
}

table.card-design-report tr.disqualified {
  background: #382323;
}
table.card-design-report tr.disqualified-reason {
  background: #1d0f0f;
}

form#ooc-json-search {
  position: relative;
}
form#ooc-json-search input {
  min-width: 300px;
}
form#ooc-json-search div#results {
  margin: 0;
  padding-left: 0;
  flex-direction: column;
  position: absolute;
  top: 47px;
  background: var(--block-background);
  min-width: 250px;
  max-width: 400px;
  padding: 10px 20px;
  z-index: 20000;
  border: 1px solid var(--block-border);
  border-radius: 4px;
  display: none;
}
form#ooc-json-search div#results.show {
  display: flex;
}
form#ooc-json-search div#results .description {
  text-transform: uppercase;
  color: #747474;
  font-size: 13px;
  display: block;
  margin-bottom: -5px;
}
form#ooc-json-search div#results li {
  padding-top: 4px;
  border-top: 1px solid #2d3133;
}
form#ooc-json-search div#results li:first-child {
  padding-top: 0px;
  border-top: none;
}

.premium-circles {
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  justify-content: center;
  margin: 20px 0;
}
.premium-circles .premium-circle {
  max-width: 230px;
  margin: 20px;
}
.premium-circles .premium-bubble {
  min-height: 100px;
}
.premium-circles .premium-bubble i {
  font-size: 80px;
}
.premium-circles .premium-bubble i.bubble-ads-no {
  color: hsl(0, 78%, 53%);
}
.premium-circles .premium-bubble i.bubble-ads {
  --fa-primary-color: hsl(216, 78%, 53%);
  --fa-secondary-color: hsl(216, 78%, 53%);
}
.premium-circles .premium-bubble i.bubble-cosmetics {
  --fa-primary-color: hsl(39, 78%, 53%);
  --fa-secondary-color: hsl(39, 98%, 69%);
}
.premium-circles .premium-bubble i.bubble-love {
  --fa-primary-color: hsl(345, 78%, 53%);
  --fa-secondary-color: hsl(345, 63%, 66%);
}

.premium-subscribe {
  background: var(--widget-background-contrast);
  margin-left: -20px;
  margin-right: -20px;
  padding: 20px 0;
}
.premium-subscribe .premium-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 10px;
  padding: 10px;
}
.premium-subscribe .premium-choices.solo .premium-choice {
  grid-column: 2/4;
}
@media screen and (max-width: 820px) {
  .premium-subscribe .premium-choices.solo .premium-choice {
    grid-column: 1/3;
  }
}
.premium-subscribe .premium-choices .premium-choice {
  background: var(--site-background-dark);
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  text-align: center;
}
.premium-subscribe .premium-choices .premium-choice .premium-desc {
  flex-grow: 1;
}
.premium-subscribe .premium-choices .premium-choice select {
  margin-bottom: 10px;
}

.premium-benefits {
  margin: 20px 0;
}

.premium-perks {
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
.premium-perks .premium-perk {
  border-radius: 5px;
  padding: 10px;
  background: #1d1e22;
  border: 1px solid #1D1D1D;
}

.hs-class-portal-page-death-knight .class-portal-header {
  background: url(images/hearth/class-headers/banners/death-knight.jpg) top center;
}

.hs-class-portal-page-demon-hunter .class-portal-header {
  background: url(images/hearth/class-headers/banners/demon-hunter.jpg) top center;
}

.hs-class-portal-page-druid .class-portal-header {
  background: url(images/hearth/class-headers/banners/druid.jpg) top center;
}

.hs-class-portal-page-hunter .class-portal-header {
  background: url(images/hearth/class-headers/banners/hunter.jpg) top center;
}

.hs-class-portal-page-mage .class-portal-header {
  background: url(images/hearth/class-headers/banners/mage.jpg) top center;
}

.hs-class-portal-page-paladin .class-portal-header {
  background: url(images/hearth/class-headers/banners/paladin.jpg) top center;
}

.hs-class-portal-page-priest .class-portal-header {
  background: url(images/hearth/class-headers/banners/priest.jpg) top center;
}

.hs-class-portal-page-rogue .class-portal-header {
  background: url(images/hearth/class-headers/banners/rogue.jpg) top center;
}

.hs-class-portal-page-shaman .class-portal-header {
  background: url(images/hearth/class-headers/banners/shaman.jpg) top center;
}

.hs-class-portal-page-warlock .class-portal-header {
  background: url(images/hearth/class-headers/banners/warlock.jpg) top center;
}

.hs-class-portal-page-warrior .class-portal-header {
  background: url(images/hearth/class-headers/banners/warrior.jpg) top center;
}

header.class-portal-header {
  width: calc(100% + 41px);
  height: 220px;
  margin: -20px;
  margin-bottom: 20px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  clip-path: ellipse(95% 100% at 45% 0%);
  position: relative;
}
header.class-portal-header .class-portal-desc {
  padding: 20px;
  background: linear-gradient(to right, hsla(0, 0%, 0%, 0.7) 70%, hsla(0, 0%, 0%, 0) 98%);
  min-width: 400px;
  position: absolute;
  bottom: 40px;
  left: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
header.class-portal-header .class-portal-desc h1 {
  margin-bottom: 0;
}
header.class-portal-header .class-portal-desc .class-portal-text {
  margin-left: 20px;
  font-weight: 700;
}

section.db-guides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 10px;
}
section.db-guides .guide-excerpt {
  padding: 10px;
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to top, var(--site-gradient-from), var(--site-gradient-to));
  border-color: #292929;
}
section.db-guides .guide-excerpt .guide-thumb {
  margin: -10px -10px 0px;
}
section.db-guides .guide-excerpt img.post-image {
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
section.db-guides .guide-excerpt h1, section.db-guides .guide-excerpt h2 {
  margin-bottom: 5px;
}

audio.card-sounds {
  height: 30px;
}

div.sound-file p {
  margin-bottom: 5px;
}
div.sound-file span.sound-name {
  font-weight: 500;
}
div.sound-file span.sound-description {
  color: #747474;
  font-size: 13px;
}

.profile-bar {
  min-height: 60px;
  background: #151515;
  width: 100%;
}
.profile-bar .content-wrap {
  align-items: center;
  display: flex;
}
@media screen and (max-width: 950px) {
  .profile-bar .profile-bar-search {
    margin: 0 10px;
    width: 100%;
  }
  .profile-bar .profile-bar-search form#ooc-json-search input {
    min-width: 100%;
  }
}
.profile-bar .profile-bar-section {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.profile-bar .profile-bar-section.profile-bar-section-right {
  margin-left: auto;
}
@media screen and (max-width: 950px) {
  .profile-bar .profile-bar-section.profile-bar-section-right {
    display: none;
  }
}
@media screen and (max-width: 950px) {
  .profile-bar .profile-bar-section {
    width: 100%;
    margin-top: 7px;
  }
}
.profile-bar .profile-bar-item {
  text-align: center;
  align-items: center;
  min-width: 40px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.profile-bar .profile-bar-item > a {
  line-height: 60px;
  color: var(--font-color);
}
.profile-bar .profile-bar-item + .profile-bar-item {
  margin-left: 20px;
}
.profile-bar .profile-bar-item + .profile-bar-item:hover i {
  color: var(--font-color-hover);
}
.profile-bar .profile-bar-item i {
  color: var(--font-color);
  font-size: 19px;
}
.profile-bar .profile-bar-item .navigation-badge {
  position: absolute;
  right: -2px;
  top: calc(50% - 20px);
}
.profile-bar .profile-bar-item-premium-push a.get-premium {
  padding: 5px 10px;
  line-height: 25px;
  background: var(--button-bg);
  background-image: linear-gradient(var(--button-bg-top-gradient), var(--button-bg-bottom-gradient));
  color: #FFFFFF;
  border-radius: 10px;
  font-size: 14px;
}
.profile-bar .profile-bar-item-premium-push a.get-premium:hover {
  background: var(--button-hover-bg);
  background-image: linear-gradient(var(--button-hover-bg-top-gradient), var(--button-hover-bg-bottom-gradient));
  transform: translateY(-1px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.profile-bar .profile-bar-item-user {
  display: flex;
  flex-direction: row;
  width: 250px;
  text-align: left;
}
.profile-bar .profile-bar-item-user .created-by-avatar img {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  margin-right: 20px;
  vertical-align: middle;
}
.profile-bar .profile-bar-item-user .username-link, .profile-bar .profile-bar-item-user .get-premium {
  display: block;
  line-height: 22px;
}
.profile-bar .profile-bar-item-user .get-premium {
  font-size: 80%;
}
.profile-bar .profile-bar-item-user .member-profile {
  display: flex;
  transition-duration: 0.5s;
  width: 100%;
}
.profile-bar .profile-bar-item-user .member-profile .member-dropdown-icon {
  width: 50px;
  margin-left: auto;
  padding-top: 13px;
  text-align: center;
  margin-bottom: -10px;
}
.profile-bar .profile-bar-item-user .member-profile .member-dropdown-icon:hover {
  cursor: pointer;
}
.profile-bar .profile-bar-item-user .member-profile .member-dropdown-icon:hover + ul.member-dropdown {
  visibility: visible;
  opacity: 1;
  display: block;
}
.profile-bar .profile-bar-item-user .member-profile ul.member-dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  display: none;
  background-color: #222222;
  margin-top: 50px;
  padding: 0;
  font-size: 13px;
  color: rgb(127, 135, 137);
  border-radius: 5px;
  right: 0;
  width: 200px;
  text-align: right;
  z-index: 20000;
}
.profile-bar .profile-bar-item-user .member-profile ul.member-dropdown a {
  padding: 10px;
  display: block;
  color: #FFF;
}
.profile-bar .profile-bar-item-user .member-profile ul.member-dropdown a:hover {
  color: #d8bc45;
  background-color: #151515;
}
.profile-bar .profile-bar-item-user .member-profile ul.member-dropdown:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.stars-ui {
  font-family: "Font Awesome 5 Pro";
}
.stars-ui .starry {
  display: inline-block;
}
.stars-ui .starry::before {
  color: #bb9e1d;
  display: inline-block;
  content: "\f005";
}
.stars-ui .starry.night::before {
  color: #f5fc96;
  font-weight: 900;
}

.arena-impact-review {
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 800px) {
  .arena-impact-review {
    flex-direction: column;
  }
}
.arena-impact-review .impact-card {
  text-align: center;
  min-width: 240px;
}
.arena-impact-review .impact-card .card-rating p {
  margin: 0;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
}
.arena-impact-review .impact-reviews {
  flex-grow: 1;
}
.arena-impact-review .mini-reviews {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.arena-impact-review .mini-reviews .impact-review {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.arena-impact-review .mini-reviews .impact-review h4.reviewer {
  margin-bottom: 0;
  margin-right: 10px;
}
@media screen and (max-width: 500px) {
  .arena-impact-review .mini-reviews .impact-review {
    width: 100%;
  }
  .arena-impact-review .mini-reviews .impact-review .stars-ui {
    flex-grow: 1;
    text-align: right;
  }
}
.arena-impact-review .impact-review {
  padding: 10px;
  border: 1px solid #3e3e3e;
  background: #1B1E23;
  border-radius: 5px;
  margin-bottom: 10px;
}
.arena-impact-review .impact-review h4.reviewer {
  margin-bottom: 0;
}
.arena-impact-review .impact-review.full-review {
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 600px) {
  .arena-impact-review .impact-review.full-review {
    flex-direction: column-reverse;
  }
  .arena-impact-review .impact-review.full-review .created-by-avatar {
    display: none;
  }
}
.arena-impact-review .impact-review .bio {
  min-width: 150px;
  text-align: center;
}
.arena-impact-review .impact-review .bio .created-by-avatar img {
  width: 110px;
  max-height: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2px solid #3e3e3e;
}

.listing-deckbuilder {
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-size: 26px;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  overflow: hidden;
}
.listing-deckbuilder a.list-item {
  position: relative;
  display: flex;
  color: #FFF;
}
.listing-deckbuilder a.list-item .icon:before {
  content: "";
  width: 40px;
  height: 40px;
  display: block;
  background-size: 40px;
  margin-right: 6px;
  position: relative;
  left: 0;
  transform: none;
  background-image: url(images/hearth/class-icons/neutral.png);
}
.listing-deckbuilder a.list-item .name {
  z-index: 2;
}
.listing-deckbuilder a.list-item:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #000000, #000000);
  opacity: 0.8;
}
.listing-deckbuilder a.list-item:hover:before {
  opacity: 0.6;
}
.listing-deckbuilder a.list-item.hsclass-death-knight {
  background: url(images/hearth/class-headers/banners/death-knight.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-death-knight .icon:before {
  background-image: url(images/hearth/class-icons/death-knight.png);
}
.listing-deckbuilder a.list-item.hsclass-demon-hunter {
  background: url(images/hearth/class-headers/banners/demon-hunter.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-demon-hunter .icon:before {
  background-image: url(images/hearth/class-icons/demon-hunter.png);
}
.listing-deckbuilder a.list-item.hsclass-druid {
  background: url(images/hearth/class-headers/banners/druid.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-druid .icon:before {
  background-image: url(images/hearth/class-icons/druid.png);
}
.listing-deckbuilder a.list-item.hsclass-hunter {
  background: url(images/hearth/class-headers/banners/hunter.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-hunter .icon:before {
  background-image: url(images/hearth/class-icons/hunter.png);
}
.listing-deckbuilder a.list-item.hsclass-mage {
  background: url(images/hearth/class-headers/banners/mage.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-mage .icon:before {
  background-image: url(images/hearth/class-icons/mage.png);
}
.listing-deckbuilder a.list-item.hsclass-paladin {
  background: url(images/hearth/class-headers/banners/paladin.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-paladin .icon:before {
  background-image: url(images/hearth/class-icons/paladin.png);
}
.listing-deckbuilder a.list-item.hsclass-priest {
  background: url(images/hearth/class-headers/banners/priest.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-priest .icon:before {
  background-image: url(images/hearth/class-icons/priest.png);
}
.listing-deckbuilder a.list-item.hsclass-rogue {
  background: url(images/hearth/class-headers/banners/rogue.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-rogue .icon:before {
  background-image: url(images/hearth/class-icons/rogue.png);
}
.listing-deckbuilder a.list-item.hsclass-shaman {
  background: url(images/hearth/class-headers/banners/shaman.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-shaman .icon:before {
  background-image: url(images/hearth/class-icons/shaman.png);
}
.listing-deckbuilder a.list-item.hsclass-warlock {
  background: url(images/hearth/class-headers/banners/warlock.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-warlock .icon:before {
  background-image: url(images/hearth/class-icons/warlock.png);
}
.listing-deckbuilder a.list-item.hsclass-warrior {
  background: url(images/hearth/class-headers/banners/warrior.jpg) top center;
  background-size: 100%;
}
.listing-deckbuilder a.list-item.hsclass-warrior .icon:before {
  background-image: url(images/hearth/class-icons/warrior.png);
}

.hearth-arena-impact-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 10px;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-size: 26px;
}
.hearth-arena-impact-pages a.arena-impact-page {
  border: 2px solid #3e3e3e;
  padding: 5px 10px;
  display: flex;
  position: relative;
  color: #FFF;
  border-radius: 5px;
}
.hearth-arena-impact-pages a.arena-impact-page .icon:before {
  content: "";
  width: 40px;
  height: 40px;
  display: block;
  background-size: 40px;
  margin-right: 6px;
  position: relative;
  left: 0;
  transform: none;
  background-image: url(images/hearth/class-icons/neutral.png);
}
.hearth-arena-impact-pages a.arena-impact-page .name {
  z-index: 2;
}
.hearth-arena-impact-pages a.arena-impact-page:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #000000, #000000);
  opacity: 0.8;
}
.hearth-arena-impact-pages a.arena-impact-page:hover:before {
  opacity: 0.6;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-death-knight {
  background: url(images/hearth/class-headers/banners/death-knight.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-death-knight .icon:before {
  background-image: url(images/hearth/class-icons/death-knight.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-demon-hunter {
  background: url(images/hearth/class-headers/banners/demon-hunter.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-demon-hunter .icon:before {
  background-image: url(images/hearth/class-icons/demon-hunter.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-druid {
  background: url(images/hearth/class-headers/banners/druid.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-druid .icon:before {
  background-image: url(images/hearth/class-icons/druid.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-hunter {
  background: url(images/hearth/class-headers/banners/hunter.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-hunter .icon:before {
  background-image: url(images/hearth/class-icons/hunter.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-mage {
  background: url(images/hearth/class-headers/banners/mage.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-mage .icon:before {
  background-image: url(images/hearth/class-icons/mage.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-paladin {
  background: url(images/hearth/class-headers/banners/paladin.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-paladin .icon:before {
  background-image: url(images/hearth/class-icons/paladin.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-priest {
  background: url(images/hearth/class-headers/banners/priest.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-priest .icon:before {
  background-image: url(images/hearth/class-icons/priest.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-rogue {
  background: url(images/hearth/class-headers/banners/rogue.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-rogue .icon:before {
  background-image: url(images/hearth/class-icons/rogue.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-shaman {
  background: url(images/hearth/class-headers/banners/shaman.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-shaman .icon:before {
  background-image: url(images/hearth/class-icons/shaman.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-warlock {
  background: url(images/hearth/class-headers/banners/warlock.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-warlock .icon:before {
  background-image: url(images/hearth/class-icons/warlock.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-warrior {
  background: url(images/hearth/class-headers/banners/warrior.jpg) top center;
  background-size: 100%;
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-warrior .icon:before {
  background-image: url(images/hearth/class-icons/warrior.png);
}
.hearth-arena-impact-pages a.arena-impact-page.arena-impact-page-neutral {
  grid-column-start: 1;
  grid-row-start: 1;
  background: url(images/cms/headers/hearthstone-box.jpg) top center;
}

.listing-formset-fluffy div.form-field-hidden {
  display: none;
}
.listing-formset-fluffy div#dynamic-fields {
  max-width: 300px;
}
.listing-formset-fluffy div#dynamic-fields .form-field {
  position: relative;
}
.listing-formset-fluffy div#dynamic-fields .field-remove {
  position: absolute;
  top: 0;
  right: 0;
  color: #ff4b4b;
  cursor: pointer;
  font-size: 19px;
}
.listing-formset-fluffy .form-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.listing-formset-fluffy .form-field-fluffy-dynamic-field {
  max-width: 370px;
}
.listing-formset-fluffy .form-field-checkbox {
  cursor: pointer;
}
.listing-formset-fluffy .form-field-checkbox label {
  display: inline-block;
  vertical-align: text-bottom;
  cursor: pointer;
}
.listing-formset-fluffy .form-field-checkbox input[type=checkbox] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.listing-formset-fluffy .form-field-checkbox:first-child {
  margin-top: 20px;
}

.taverncrawl-progression {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.taverncrawl-progression .taverncrawl-reward.reward-completed {
  border: 1px solid #043e20;
  background: #212826;
}
.taverncrawl-progression .reward-description {
  color: #747474;
  font-size: 13px;
}

.twitch-player-wrapper {
  text-align: center;
}

.homepage-decks-widget {
  grid-column: span 12;
  margin-bottom: 20px;
}
.homepage-decks-widget .widget-nav {
  display: flex;
  flex-direction: row;
}
.homepage-decks-widget .widget-nav .widget-config {
  margin-left: auto;
  cursor: pointer;
  color: white;
}
.homepage-decks-widget .widget-main {
  background: #1c2028;
  padding: 5px;
  border-radius: 0 5px 5px 5px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  z-index: 2;
  position: relative;
}
.homepage-decks-widget .widget-filters .filters-main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
}
.homepage-decks-widget .widget-filters .filters-main div:first-child {
  left: 0;
  position: absolute;
}
.homepage-decks-widget .widget-filters .filters-main div:last-child {
  right: 0;
  position: absolute;
}
@media screen and (max-width: 730px) {
  .homepage-decks-widget .widget-filters .filters-main {
    flex-direction: column;
    height: 130px;
  }
  .homepage-decks-widget .widget-filters .filters-main .filters-time, .homepage-decks-widget .widget-filters .filters-main .filters-options, .homepage-decks-widget .widget-filters .filters-main .filters-score {
    position: relative !important;
    align-self: center !important;
    margin-top: 5px;
  }
}
.homepage-decks-widget .filters-main {
  height: 40px;
}
.homepage-decks-widget .filters-bottom {
  height: 40px;
  margin-top: 5px;
  display: flex;
  position: relative;
}
.homepage-decks-widget .filters-bottom .loading-indicator {
  display: none;
}
.homepage-decks-widget .filters-bottom .loading-indicator.loading {
  display: block;
}
.homepage-decks-widget .filters-bottom .loading-indicator .lds-ellipsis {
  height: 40px;
}
.homepage-decks-widget .filters-bottom .loading-indicator .lds-ellipsis div {
  top: 15px;
}
.homepage-decks-widget .filters-bottom .filters-options {
  margin-left: auto;
}
.homepage-decks-widget .filters-time, .homepage-decks-widget .filters-score {
  display: flex;
}
.homepage-decks-widget .filters-time span + span, .homepage-decks-widget .filters-score span + span {
  margin-left: 5px;
}
.homepage-decks-widget .filters-time input, .homepage-decks-widget .filters-score input {
  display: none;
}
.homepage-decks-widget .filters-time input + label, .homepage-decks-widget .filters-score input + label {
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.homepage-decks-widget .filters-time input + label:hover, .homepage-decks-widget .filters-score input + label:hover {
  background: rgba(0, 0, 0, 0.3);
}
.homepage-decks-widget .filters-time input:checked + label, .homepage-decks-widget .filters-score input:checked + label {
  background: rgba(0, 0, 0, 0.4);
}
.homepage-decks-widget .filters-options {
  display: flex;
}
.homepage-decks-widget .filters-options .option {
  display: flex;
  flex-direction: row;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}
.homepage-decks-widget .filters-options .option + .option {
  margin-left: 5px;
}
.homepage-decks-widget .filters-options .option input[type=checkbox] {
  margin-top: 2px;
  margin-right: 3px;
}
.homepage-decks-widget .filters-options .option select {
  border: transparent;
  background: transparent;
  box-shadow: none;
  padding: 0;
  height: 100%;
}
.homepage-decks-widget .filters-options .option select option {
  background: rgb(35, 39, 48);
}
.homepage-decks-widget .filters-hsclass li {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  display: inline-block;
}
.homepage-decks-widget .filters-hsclass li + li {
  margin-left: 5px;
}
.homepage-decks-widget .filters-hsclass div#id_hsclass {
  justify-content: space-between;
  margin: 0;
  padding-bottom: 5px;
  white-space: nowrap;
  overflow-x: scroll;
  display: block;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.homepage-decks-widget .filters-hsclass div#id_hsclass::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.homepage-decks-widget .filters-hsclass div#id_hsclass::-webkit-scrollbar-track {
  background: transparent;
}
.homepage-decks-widget .filters-hsclass div#id_hsclass::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
}
.homepage-decks-widget .filters-hsclass div#id_hsclass::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.6);
}
.homepage-decks-widget .filters-hsclass div#id_hsclass input + label {
  width: 95px;
  font-size: 12px;
  line-height: 13px;
  margin: 0;
  padding: 5px;
}
.homepage-decks-widget .filters-hsclass div#id_hsclass input + label:before {
  width: 30px;
  height: 30px;
  background-size: 30px;
  margin-bottom: 4px;
}
.homepage-decks-widget .widget-decks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 5px;
  gap: 5px;
  min-height: 210px;
}
.homepage-decks-widget .widget-decks a.deck {
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.homepage-decks-widget .widget-decks a.deck:hover {
  background: rgba(0, 0, 0, 0.3);
  text-decoration: none;
}
.homepage-decks-widget .widget-decks a.deck header {
  display: flex;
  flex-direction: row;
}
.homepage-decks-widget .widget-decks a.deck header h5 {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: var(--link-visited-color);
  margin-bottom: -10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.homepage-decks-widget .widget-decks a.deck header .deck-image {
  padding-top: 5px;
}
.homepage-decks-widget .widget-decks a.deck header .deck-details {
  width: calc(100% - 45px);
  margin-left: 5px;
}
.homepage-decks-widget .widget-decks a.deck header .deck-details .byline, .homepage-decks-widget .widget-decks a.deck header .deck-details .updated {
  display: inline;
  font-size: 13px;
  color: #747474;
}
.homepage-decks-widget .widget-decks a.deck header .interactions {
  margin-left: auto;
  width: 40px;
}
.homepage-decks-widget .widget-decks a.deck footer {
  margin-left: 45px;
}
.homepage-decks-widget .widget-decks a.deck footer.no-margin {
  margin-left: 0;
}
.homepage-decks-widget .widget-decks a.deck footer .archetype {
  font-size: 14px;
}
.homepage-decks-widget .widget-decks a.deck .meta {
  display: flex;
  flex-direction: row;
  color: #747474;
  font-size: 14px;
}
.homepage-decks-widget .widget-decks a.deck .meta div + div {
  margin-left: 10px;
}
.homepage-decks-widget .widget-decks a.deck .meta .end {
  margin: 0 10px 0 auto;
  display: flex;
}
.homepage-decks-widget .widget-decks a.deck .meta .cost {
  color: #2478bb;
}
.homepage-decks-widget .widget-decks a.deck .meta .cost-craft {
  color: #09be85;
}
.homepage-decks-widget .widget-decks a.deck .meta .views, .homepage-decks-widget .widget-decks a.deck .meta .comments {
  color: #9996a5;
}
.homepage-decks-widget .widget-decks a.deck .meta .score {
  color: #18AC18;
}
.homepage-decks-widget .widget-decks a.deck .meta .score i {
  font-size: 20px;
  vertical-align: middle;
}
.homepage-decks-widget .widget-decks a.deck div {
  font-weight: 400;
  color: var(--font-color);
}

figure.fluffy-fig {
  background: var(--widget-background);
  display: inline-block;
  margin: 0;
  border-radius: 5px;
}
figure.fluffy-fig a {
  display: block;
}
figure.fluffy-fig img {
  margin: 10px;
  background: var(--widget-background-contrast);
}
figure.fluffy-fig figcaption {
  margin: 0 10px;
}

.blocker {
  z-index: 5;
}

.fluffy-listing-magic {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

i.ms + i.ms {
  margin-left: 3px;
}

.card-image-magic {
  position: relative;
}
.card-image-magic .magic-card-flip {
  position: absolute;
  bottom: -10px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #333333;
  box-shadow: 0 0 2px white inset, 0 0 5px black;
  cursor: pointer;
  transition: background-color 0.25s ease-in-out;
  text-indent: -9999px;
}
.card-image-magic .magic-card-flip:before {
  content: "";
  width: 27px;
  height: 35px;
  margin: -17px 0 0 -13px;
  background: url(images/magic/icon-flip-card.svg) 50% 50% no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
}
.card-image-magic.card-layout-split {
  width: 335px;
}
.card-image-magic.card-layout-split img.card-face {
  transform: rotate(90deg);
}
.card-image-magic.card-layout-modal_dfc, .card-image-magic.card-layout-transform {
  min-height: 378px;
}
.card-image-magic.card-layout-modal_dfc img.card-face, .card-image-magic.card-layout-transform img.card-face {
  display: none;
}
.card-image-magic.card-show-face .card-reverse {
  display: none;
}
.card-image-magic.card-show-face img.card-face {
  display: inline-block;
}

.magic-card-placeholder {
  width: 265px;
  background: black;
  border-radius: 14px;
  height: 370px;
  padding: 10px;
  display: inline-block;
}
.magic-card-placeholder .card-inner {
  background: #DEDEDE;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  height: 100%;
}
.magic-card-placeholder .card-inner > span {
  display: block;
  color: black;
  text-align: left;
  padding: 10px 5px;
  font-weight: 400;
}
.magic-card-placeholder .card-inner > span.card-top {
  text-align: left;
  background: #a8a0a0;
  padding: 5px;
  font-size: 14px;
  display: flex;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-weight: 500;
}
.magic-card-placeholder .card-inner > span.card-top .card-cost {
  margin-left: auto;
  min-width: 75px;
  text-align: right;
}
.magic-card-placeholder .card-inner > span.card-typebar {
  display: flex;
  font-size: 14px;
}
.magic-card-placeholder .card-inner > span.card-typebar .card-set {
  margin-left: auto;
}
.magic-card-placeholder .card-inner > span.card-text {
  font-size: 14px;
  flex-grow: 1;
  overflow-x: overlay;
}
.magic-card-placeholder .card-inner > span.card-bottom {
  display: flex;
}
.magic-card-placeholder .card-inner > span.card-bottom .card-stats {
  margin-left: auto;
  background: #a8a0a0;
  min-width: 50px;
  text-align: center;
  border-radius: 5px;
}
.magic-card-placeholder .card-inner > span.card-bottom .card-stats-loyalty {
  margin-left: auto;
  font-size: 17px;
}

.login-area {
  margin: -20px;
  display: flex;
  flex-direction: row;
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}
.login-area .forgot-password {
  margin: 0;
  text-align: right;
  font-size: 80%;
}
.login-area .site-themed {
  background: url(images/login-bgs/runeterra-login-bg.jpg);
  background-position: top right;
  background-repeat: no-repeat;
  background-color: #121315;
  padding: 20px;
  border-right: 1px solid black;
  grid-column: span 4;
}
@media screen and (max-width: 1000px) {
  .login-area .site-themed {
    display: none;
  }
}
.login-area .site-themed .login-intro {
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 600;
  text-shadow: 1px 1px 14px black;
}
.login-area .site-themed ul {
  padding-left: 0;
  font-size: 22px;
  list-style: none;
  font-weight: 500;
  text-shadow: 1px 1px 5px rgba(31, 31, 32, 0.5);
}
.login-area .site-themed ul i {
  text-align: right;
  min-width: 30px;
}
.login-area .site-themed ul li + li {
  margin-top: 10px;
}
.login-area .site-themed.site-themed-hearthstone {
  background-image: url(images/login-bgs/hearthstone-login-bg.jpg);
}
.login-area .site-themed.site-themed-runeterra {
  background-image: url(images/login-bgs/runeterra-login-bg.jpg);
}
.login-area .site-themed.site-themed-mythgard {
  background-image: url(images/login-bgs/mythgard-login-bg.jpg);
}
.login-area .site-themed.site-themed-magic {
  background-image: url(images/login-bgs/magic-login-bg.jpg);
}
.login-area .login-form {
  padding: 20px;
  text-align: center;
  grid-column: span 6;
}
@media screen and (max-width: 1000px) {
  .login-area .login-form {
    grid-column: span 10;
  }
}
.login-area .login-form h1 {
  margin-bottom: 0px;
  text-align: left;
  width: 80%;
  margin: 0 auto;
}
.login-area .login-form .register-agree {
  font-size: 80%;
  margin-top: 0px;
  text-align: left;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 25px;
}
.login-area .login-form .form-field {
  width: 80%;
  margin: 0 auto;
}
.login-area .login-form .form-field + .form-field {
  margin-top: 20px;
}
.login-area .login-form label {
  text-align: left;
}
.login-area .login-form input {
  width: 100%;
}
.login-area .login-form button {
  margin-top: 20px;
}
.login-area.password-reset-success .login-form {
  text-align: left;
}
.login-area.password-reset-success h1 {
  width: 100%;
}

.deck-source {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  background: url(images/transparent-bgs/asfalt-dark.png), linear-gradient(#141c27, #191d1f);
  border-color: #000;
  margin-bottom: 10px;
}
.deck-source h6 {
  margin-bottom: 0;
}

.shop-category-items {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.shop-category-items a.shop-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--site-border-color);
  border-radius: 5px;
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  background-image: linear-gradient(to top, var(--site-gradient-from), var(--site-gradient-to));
  border-color: #292929;
}
.shop-category-items a.shop-item.shop-item-purchased {
  background: #202b21;
}
.shop-category-items a.shop-item.shop-item-purchased i.fad.fa-check-square {
  color: #00d613;
  font-size: 34px;
}
.shop-category-items a.shop-item .portrait {
  min-height: 150px;
  background-size: cover;
  background-position: center;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.shop-category-items a.shop-item .meta {
  padding: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  color: var(--font-color);
  font-weight: normal;
}
.shop-category-items a.shop-item .meta .name {
  font-size: 90%;
  flex-grow: 1;
}
.shop-category-items a.shop-item .meta .prices {
  align-self: flex-end;
}
.shop-category-items a.shop-item .meta .price {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #292929;
  background: var(--site-background-dark);
  align-self: flex-end;
}

.notifyjs-corner {
  z-index: 20001 !important;
  margin: 10px 0 !important;
}

.notifyjs-bootstrap-base {
  white-space: normal !important;
}

.notifyjs-bootstrap-currency, .currency-display, .price-icon {
  text-shadow: none !important;
  background-color: #1c2028 !important;
  border: 2px solid #46494c !important;
  position: relative !important;
  padding-left: 90px !important;
  font-size: 15px !important;
}
.notifyjs-bootstrap-currency:before, .notifyjs-bootstrap-currency:after, .currency-display:before, .currency-display:after, .price-icon:before, .price-icon:after {
  font-family: "Font Awesome 5 Duotone";
  font-weight: 900;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 60px;
}
.notifyjs-bootstrap-currency.currency-candy:before, .currency-display.currency-candy:before, .price-icon.currency-candy:before {
  content: "\f6bd";
  color: hsl(28, 78%, 53%);
}
.notifyjs-bootstrap-currency.currency-candy:after, .currency-display.currency-candy:after, .price-icon.currency-candy:after {
  content: "\10f6bd";
  color: hsl(41, 78%, 53%);
}
.notifyjs-bootstrap-currency.currency-gold:before, .currency-display.currency-gold:before, .price-icon.currency-gold:before {
  content: "\f85c";
  color: hsl(51, 65%, 59%);
}
.notifyjs-bootstrap-currency.currency-gold:after, .currency-display.currency-gold:after, .price-icon.currency-gold:after {
  content: "\10f85c";
  color: hsl(55, 100%, 65%);
}
.notifyjs-bootstrap-currency.currency-snowflakes:before, .currency-display.currency-snowflakes:before, .price-icon.currency-snowflakes:before {
  content: "\f7cf";
  color: hsl(192, 65%, 59%);
}
.notifyjs-bootstrap-currency.currency-snowflakes:after, .currency-display.currency-snowflakes:after, .price-icon.currency-snowflakes:after {
  content: "\10f7cf";
  color: hsl(209, 100%, 65%);
}
.notifyjs-bootstrap-currency.currency-snowball:before, .currency-display.currency-snowball:before, .price-icon.currency-snowball:before {
  content: "\f77e";
  color: hsl(0, 0%, 75%);
}
.notifyjs-bootstrap-currency.currency-snowball:after, .currency-display.currency-snowball:after, .price-icon.currency-snowball:after {
  content: "\10f77e";
  color: hsl(192, 42%, 86%);
}
.notifyjs-bootstrap-currency.currency-quilboar-tuskaroons:before, .currency-display.currency-quilboar-tuskaroons:before, .price-icon.currency-quilboar-tuskaroons:before {
  content: "";
  background-image: url(images/core/shop/quilboar-tuskaroons.png);
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
  display: block;
}
.notifyjs-bootstrap-currency.currency-barrens-giveaway-ticket:before, .currency-display.currency-barrens-giveaway-ticket:before, .price-icon.currency-barrens-giveaway-ticket:before {
  content: "";
  background-image: url(images/core/shop/barrens-ticket.png);
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
  display: block;
}
.notifyjs-bootstrap-currency.currency-shuriman-securi:before, .currency-display.currency-shuriman-securi:before, .price-icon.currency-shuriman-securi:before {
  content: "";
  background-image: url(images/core/shop/shuriman-securi.png);
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
  display: block;
}
.notifyjs-bootstrap-currency.currency-ascension-giveaway-ticket:before, .currency-display.currency-ascension-giveaway-ticket:before, .price-icon.currency-ascension-giveaway-ticket:before {
  content: "";
  background-image: url(images/core/shop/shurima-ticket-giveaway.png);
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
  display: block;
}

.price-icon {
  padding-left: 50px !important;
  display: table;
  margin: 0 auto;
  padding: 10px 5px;
  border-radius: 10px;
  color: white;
}
.price-icon:before, .price-icon:after {
  font-size: 25px;
}

.currency-display {
  padding-left: 60px !important;
  display: table;
  margin: 0 auto;
  padding: 15px 10px;
  border-radius: 10px;
}
.currency-display:before, .currency-display:after {
  font-size: 30px;
}

body.oozefest {
  background-image: url(images/events/oozefest/ooze-top-right.png), url(images/events/oozefest/ooze-splat-huge-bg.png), url(images/events/oozefest/ooze-splat-medium-bg.png), url(images/backgrounds/ooc-background.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-position: top 200px right, top 50% right 40px, top 80% left 30px, top left;
  background-size: 169px, 150px, 200px, 600px;
}
@media screen and (max-width: 900px) {
  body.oozefest {
    background-position: top 140px right, top left;
  }
}
@media screen and (max-width: 500px) {
  body.oozefest {
    background-position: top 50px right, top left;
  }
}

body.halloween-comic-sans .comment {
  font-family: "Comic Sans MS", "Comic Sans";
}

.halloween-modal {
  background: #442f16;
  text-align: center;
  max-width: 1000px;
}
.halloween-modal .main-banner {
  width: 100%;
}
.halloween-modal button {
  border: 1px solid #965218;
  background-image: linear-gradient(#ff9800, #ff5722);
  color: black;
}
.halloween-modal button:hover {
  background-image: linear-gradient(#ffa013, #ff602f);
}
.halloween-modal .halloween-popup-interior {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  max-width: 800px;
  min-height: 250px;
  position: relative;
  background-position: top right;
  margin: 0 auto;
}
.halloween-modal .halloween-popup-interior .inner-text {
  background: rgba(0, 0, 0, 0.9);
  padding: 10px 40px;
  border-radius: 10px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 70px;
  font-weight: 700;
  max-width: 380px;
}
.halloween-modal .halloween-popup-interior .inner-text p:last-child {
  margin-bottom: 0;
}

.button.halloween {
  border: 1px solid #965218;
  background-image: linear-gradient(#ff9800, #ff5722);
  color: black;
}
.button.halloween:hover {
  background-image: linear-gradient(#ffa013, #ff602f);
}

body.snowpocalypse {
  background-image: url(images/events/snowpocalypse/ooc-background.jpg);
}
body.snowpocalypse .painted-target a {
  font-size: 24px;
  color: #FEFEFE !important;
}
body.snowpocalypse .painted-target a:hover {
  color: #F05353 !important;
}

.throwable-snowball-projectile {
  width: 200px;
  height: 150.78125px;
  background-size: 1200px 150.78125px;
  background-image: url(images/events/snowpocalypse/snowball/snowball-sprite.png);
  animation: throwSnowball 0.5s steps(6) infinite;
  z-index: 100;
  position: absolute;
  display: none;
}

#snowball-explosion {
  width: 200px;
  height: 200px;
  z-index: 100;
  position: absolute;
  display: none;
}

.throwable-snowball-explode {
  background-size: 1600px 200px;
  background-image: url(images/events/snowpocalypse/snowball/snowball-explode.png);
  animation: snowballExplode 0.9s steps(8) forwards 1;
  z-index: 100;
}

@keyframes throwSnowball {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: -1200px;
  }
}
@keyframes snowballExplode {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: -1600px;
  }
}
.daily-tasks {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.daily-tasks .task {
  background-color: #1c2028;
  border: 2px solid #46494c;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.daily-tasks .task.task-completed {
  border-color: #026302;
}
.daily-tasks .task.task-completed .name:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f058";
  display: inline-block;
  color: #5fb15f;
  margin-right: 8px;
}
.daily-tasks .task .name {
  font-weight: 500;
}

.treasure-hunt-clues {
  border: 1px solid #18191b;
  border-radius: 5px;
  background: #171d21;
}
.treasure-hunt-clues .clue {
  display: flex;
  flex-direction: column;
  margin-left: 40px;
  position: relative;
}
.treasure-hunt-clues .clue .hint {
  font-weight: 500;
}
.treasure-hunt-clues .clue .answer {
  font-style: italic;
  font-size: 90%;
}
.treasure-hunt-clues .clue.clue-completed:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f058";
  display: inline-block;
  color: #5fb15f;
  margin-right: 8px;
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
}

#ooc-video {
  width: 100%;
}

.ac-player-wrapper {
  z-index: 100000 !important;
}

.header-wrap, .nav-wrap {
  display: flex;
  justify-content: center;
  max-width: 1400px;
  align-items: center;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

#top-unit {
  display: flex;
  justify-content: center;
  max-width: 1400px;
  align-items: flex-start;
  margin: 0 auto;
  position: relative;
  width: 100%;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 1400px) {
  #top-unit {
    justify-content: space-evenly;
  }
}
#top-unit .vid-placement {
  width: 445px;
  width: 282px;
}
#top-unit .banner-placement {
  max-width: 970px;
}
@media screen and (max-width: 768px) {
  #top-unit .banner-placement {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #top-unit .sweet-wrapper-header-slot {
    display: none;
  }
}

.sweet-wrapper-header-slot-unit {
  width: 320px;
  height: 50px;
  background: black;
}
@media screen and (min-width: 1400px) {
  .sweet-wrapper-header-slot-unit {
    width: 970px;
    height: 250px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1529px) {
  .sweet-wrapper-header-slot-unit {
    width: 300px;
    height: 250px;
  }
}

.sweet-wrapper-articlesbetween {
  width: 320px;
  height: 50px;
  background: black;
}
@media screen and (min-width: 1200px) {
  .sweet-wrapper-articlesbetween {
    width: 728px;
    height: 90px;
  }
}

#mega-unit {
  display: grid;
  gap: 10px;
  margin: 20px auto;
  grid-template-columns: minmax(250px, 460px) repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: 1fr min-content;
}
#mega-unit #ooc-header {
  height: 95px;
}
@media screen and (max-width: 800px) {
  #mega-unit #ooc-header {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}
#mega-unit .vid-placement {
  width: 100%;
}
@media screen and (min-width: 800px) {
  #mega-unit .vid-placement {
    grid-row: 1/3;
  }
}
#mega-unit .site-content {
  height: 100%;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  min-height: 100px;
}
#mega-unit .site-content a {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #292929;
  border-radius: 5px;
  position: relative;
}
#mega-unit .site-content a .title {
  position: absolute;
  bottom: 0;
  height: 50px;
  color: white;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px;
  width: 100%;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
#mega-unit .site-content a.cosmic-creation {
  background: url(images/cosmic-creation.jpg) no-repeat;
}
#mega-unit .site-content a.darkmoon-faire {
  background: url(images/darkmoon-faire.jpg) no-repeat;
}
@media screen and (min-width: 1150px) {
  #mega-unit .header-placement {
    grid-column: 2/4;
    grid-row: 2/3;
  }
}
@media screen and (max-width: 1150px) {
  #mega-unit {
    margin: 20px 10px;
  }
}
@media screen and (max-width: 1150px) and (min-width: 801px) {
  #mega-unit .site-content {
    display: none;
  }
  #mega-unit .header-placement {
    grid-column: 2/4;
  }
}
@media screen and (max-width: 800px) {
  #mega-unit {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
  #mega-unit .header-placement {
    height: 150px;
  }
  #mega-unit .header-placement .sweet-wrapper-header-after-nav {
    height: 100px;
  }
  #mega-unit .site-content {
    min-height: 100px;
  }
}
@media screen and (max-width: 550px) {
  #mega-unit {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media screen and (max-width: 800px) {
  .fluffysite.premium-user #mega-unit .header-placement {
    height: 0px;
  }
}

.event-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-gap: 10px;
  margin: 0 auto;
}
.event-calendar .event-calendar-slot {
  border: 1px solid #18191b;
  border-radius: 5px;
  background: #171d21;
  color: #FEFEFE;
  text-align: center;
  background: repeating-linear-gradient(45deg, #9a2323, #9a2323 10px, #319e30 10px, #319e30 20px);
  min-height: 180px;
  text-shadow: 1px 1px 4px black;
  display: flex;
  flex-direction: column;
}
.event-calendar .event-calendar-slot:hover {
  box-shadow: 0px 0px 10px #f08b8b;
}
.event-calendar .event-calendar-slot .name {
  font-size: 40px;
  display: block;
  flex-grow: 1;
}
.event-calendar .event-calendar-slot .date {
  display: block;
  font-weight: 400 !important;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.95);
  padding: 10px;
}
.event-calendar .event-calendar-slot.available .date {
  color: #18AC18;
}
.event-calendar.event-snowpocalypse .event-calendar-slot:nth-child(1) {
  background: repeating-linear-gradient(transparent, transparent 10px, lightcoral 10px, lightcoral 15px, transparent 15px, transparent 20px, lightcoral 15px, lightcoral 40px, transparent 40px, transparent 45px, lightcoral 45px, lightcoral 50px, transparent 50px, transparent 80px), repeating-linear-gradient(90deg, transparent, transparent 10px, lightcoral 10px, lightcoral 15px, transparent 15px, transparent 20px, lightcoral 15px, lightcoral 40px, transparent 40px, transparent 45px, lightcoral 45px, lightcoral 50px, transparent 50px, transparent 80px), floralwhite;
  background-blend-mode: multiply;
}
.event-calendar.event-snowpocalypse .event-calendar-slot:nth-child(2) {
  background: repeating-linear-gradient(-45deg, transparent, transparent 25%, tomato 0, tomato 50%), repeating-linear-gradient(45deg, transparent, transparent 25%, dodgerblue 0, dodgerblue 50%), wheat;
  background-size: 10em 10em;
  background-blend-mode: multiply;
}
.event-calendar.event-snowpocalypse .event-calendar-slot:nth-child(3) {
  background: repeating-linear-gradient(to top left, wheat 0, wheat 20px, transparent 20px, transparent 40px, forestgreen 40px, forestgreen 60px), repeating-linear-gradient(to left, crimson 0, crimson 20px, wheat 20px, wheat 40px, forestgreen 40px, forestgreen 60px), beige;
  background-blend-mode: multiply;
}
.event-calendar.event-snowpocalypse .event-calendar-slot:nth-child(4) {
  background-image: repeating-linear-gradient(90deg, firebrick, firebrick 20px, beige 20px, beige 25px, forestgreen 25px, forestgreen 35px, gold 35px, gold 40px, crimson 40px, crimson 60px), repeating-linear-gradient(firebrick, firebrick 20px, beige 20px, beige 25px, forestgreen 25px, forestgreen 35px, gold 35px, gold 40px, crimson 40px, crimson 60px);
  background-blend-mode: multiply;
}
.event-calendar.event-snowpocalypse .event-calendar-slot:nth-child(5) {
  background-image: repeating-linear-gradient(45deg, black, black 5px, crimson 5px, crimson 25px, forestgreen 25px, forestgreen 30px), repeating-linear-gradient(-45deg, black, black 5px, black 5px, black 35px, forestgreen 35px, forestgreen 42px);
  background-blend-mode: screen;
}

.event-leaderboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 10px;
  margin: 0 auto;
}
.event-leaderboard .leaderboard-member {
  background-color: #1c2028;
  border: 2px solid #46494c;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: row;
}
.event-leaderboard .leaderboard-member .data {
  margin-left: 10px;
}
.event-leaderboard .leaderboard-member .data .verb {
  font-size: 20px;
}

/*
 * DOM element rendering detection
 * https://davidwalsh.name/detect-node-insertion
 */
@keyframes chartjs-render-animation {
  from {
    opacity: 0.99;
  }
  to {
    opacity: 1;
  }
}
.chartjs-render-monitor {
  animation: chartjs-render-animation 0.001s;
}

/*
 * DOM element resizing detection
 * https://github.com/marcj/css-element-queries
 */
.chartjs-size-monitor,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-shrink {
  position: absolute;
  direction: ltr;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  z-index: -1;
}

.chartjs-size-monitor-expand > div {
  position: absolute;
  width: 1000000px;
  height: 1000000px;
  left: 0;
  top: 0;
}

.chartjs-size-monitor-shrink > div {
  position: absolute;
  width: 200%;
  height: 200%;
  left: 0;
  top: 0;
}

.larger-calendar tr {
  height: 40px;
}

.calgame .fc-event-title, .calgame .fc-list-event-title {
  color: white;
}
.calgame .fc-event-title:before, .calgame .fc-list-event-title:before {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-size: cover;
  content: "";
  margin: auto;
  mask-size: cover;
  -webkit-mask-size: cover;
  margin-right: 5px;
  background-color: var(--link-hover-color);
  vertical-align: middle;
  margin-bottom: 4px;
}

.calgame-hearthstone .fc-event-title:before, .calgame-hearthstone .fc-list-event-title:before {
  mask: url(images/game-logo-hearthstone.svg) no-repeat;
  mask-image: url(images/game-logo-hearthstone.svg) no-repeat;
  -webkit-mask: url(images/game-logo-hearthstone.svg) no-repeat;
}

.calgame-legends-of-runeterra .fc-event-title:before, .calgame-legends-of-runeterra .fc-list-event-title:before {
  mask: url(images/game-logo-runeterra.svg) no-repeat;
  mask-image: url(images/game-logo-runeterra.svg) no-repeat;
  -webkit-mask: url(images/game-logo-runeterra.svg) no-repeat;
}

.calgame-mythgard .fc-event-title:before, .calgame-mythgard .fc-list-event-title:before {
  mask: url(images/game-logo-mythgard.svg) no-repeat;
  mask-image: url(images/game-logo-mythgard.svg) no-repeat;
  -webkit-mask: url(images/game-logo-mythgard.svg) no-repeat;
}

.calgame-magic-arena .fc-event-title:before, .calgame-magic-arena .fc-list-event-title:before {
  mask: url(images/game-logo-magic-arena.svg) no-repeat;
  mask-image: url(images/game-logo-magic-arena.svg) no-repeat;
  -webkit-mask: url(images/game-logo-magic-arena.svg) no-repeat;
}

.calgame-yu-gi-oh .fc-event-title:before, .calgame-yu-gi-oh .fc-list-event-title:before {
  mask: url(images/game-logo-yugioh.svg) no-repeat;
  mask-image: url(images/game-logo-yugioh.svg) no-repeat;
  -webkit-mask: url(images/game-logo-yugioh.svg) no-repeat;
}

.calgame-pokemon .fc-event-title:before, .calgame-pokemon .fc-list-event-title:before {
  mask: url(images/game-logo-pokemon.svg) no-repeat;
  mask-image: url(images/game-logo-pokemon.svg) no-repeat;
  -webkit-mask: url(images/game-logo-pokemon.svg) no-repeat;
}

.calgame.fc-daygrid-event .fc-event-title:before {
  height: 15px;
  width: 15px;
}

.fc-theme-standard .fc-list-day-cushion {
  background-color: var(--table-heading-background) !important;
}

.fc .fc-list-event:hover td {
  background-color: var(--table-heading-background) !important;
}

.card-tooltip-data.mythgard-rarity-common {
  color: #ca790f;
}
.card-tooltip-data.mythgard-rarity-uncommon {
  color: #c7c7c7;
}
.card-tooltip-data.mythgard-rarity-rare {
  color: #f5e238;
}
.card-tooltip-data.mythgard-rarity-mythic {
  color: #49cbe2;
}

#deckbuilder.mythgard-deckbuilder #deck-contents .card {
  background-color: #043142 !important;
}
#deckbuilder.mythgard-deckbuilder #mainbuilder #filters {
  background: url(images/transparent-bgs/45-degree-fabric-dark.png), linear-gradient(#104c63 5%, #043142);
}
#deckbuilder.mythgard-deckbuilder #mainbuilder #collection {
  background: url(images/transparent-bgs/asfalt-dark.png), linear-gradient(#104c63 5%, #043142);
  min-height: 840px;
}
#deckbuilder.mythgard-deckbuilder #mainbuilder #collection .db-card img {
  max-width: 230px;
}
#deckbuilder.mythgard-deckbuilder #stats {
  background: #043142;
}
#deckbuilder.mythgard-deckbuilder #stats .stat-cards-count {
  display: none;
}
#deckbuilder.mythgard-deckbuilder #mana-curve ul.mana-bars {
  background: #043142;
}

section.site-content.deckbuilder-detail-page.mythgard-deckbuilder {
  background: url(mythgard/deckbuilder/images/mythgard-deckbuilder-background.jpg) no-repeat #02171f;
}

.deckbuilder-gryphon {
  margin: 0 auto 10px;
  text-align: center;
  padding: 10px;
  border: 1px solid #1D1D1D;
  border-radius: 5px;
  background: url(images/hearth/deckbuilder/deckbuilder-header-gryphon.jpg);
  text-shadow: 2px 2px 5px #000000;
  font-weight: 500;
}
.deckbuilder-gryphon h5 {
  margin-bottom: 0;
}

ul.deck-tags {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  margin-right: 170px;
  flex-wrap: wrap;
}
ul.deck-tags + ul.deck-tags {
  margin-top: 5px;
}
ul.deck-tags li {
  padding: 5px 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--widget-background);
  box-shadow: 1px 1px 1px #101010;
  margin-bottom: 10px;
}
ul.deck-tags li + li {
  margin-left: 10px;
}

@media screen and (max-width: 800px) {
  .deck-detail-page header, .mythgard-deck-detail-page header, .mercenary-party-detail-page header, .carb-meal-detail-page header {
    background: #28292e;
  }
}
.deck-detail-page .content-before, .mythgard-deck-detail-page .content-before, .mercenary-party-detail-page .content-before, .carb-meal-detail-page .content-before {
  position: relative;
}
.deck-detail-page .tools, .mythgard-deck-detail-page .tools, .mercenary-party-detail-page .tools, .carb-meal-detail-page .tools {
  position: absolute;
  top: 0;
  right: 0;
}
@media screen and (max-width: 800px) {
  .deck-detail-page .tools, .mythgard-deck-detail-page .tools, .mercenary-party-detail-page .tools, .carb-meal-detail-page .tools {
    position: relative;
  }
}
.deck-detail-page .main.has-sidebar, .mythgard-deck-detail-page .main.has-sidebar, .mercenary-party-detail-page .main.has-sidebar, .carb-meal-detail-page .main.has-sidebar {
  background: #28292e;
  padding: 10px 20px 20px 10px;
  border-top-right-radius: 10px;
}
.deck-detail-page .user-interactables, .mythgard-deck-detail-page .user-interactables, .mercenary-party-detail-page .user-interactables, .carb-meal-detail-page .user-interactables {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 1000px) {
  .deck-detail-page .user-interactables, .mythgard-deck-detail-page .user-interactables, .mercenary-party-detail-page .user-interactables, .carb-meal-detail-page .user-interactables {
    bottom: 60px;
  }
}
.deck-detail-page .user-interactables .vote-widget, .mythgard-deck-detail-page .user-interactables .vote-widget, .mercenary-party-detail-page .user-interactables .vote-widget, .carb-meal-detail-page .user-interactables .vote-widget {
  margin-right: 0;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.8);
}
.deck-detail-page .user-interactables .vote-widget a, .mythgard-deck-detail-page .user-interactables .vote-widget a, .mercenary-party-detail-page .user-interactables .vote-widget a, .carb-meal-detail-page .user-interactables .vote-widget a {
  padding: 20px;
  font-size: 20px;
}
.deck-detail-page h1, .mythgard-deck-detail-page h1, .mercenary-party-detail-page h1, .carb-meal-detail-page h1 {
  text-shadow: 1px 1px 10px #000000, 0 0 5px #000000;
}

.deck-copy-dropdown {
  margin: 10px 0;
}
.deck-copy-dropdown .deck-copy-button a {
  padding: 5px 20px;
  text-align: center;
  background: #a02a2a;
  border: 1px solid #7d0f0f;
  color: var(--button-color);
  border-radius: 5px;
  cursor: pointer;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(143, 143, 143, 0.2);
  font-size: 22px;
}
.deck-copy-dropdown .copy-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: center;
  margin-top: 10px;
}

#deck-cost-widget {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
#deck-cost-widget > div {
  border-radius: 5px;
  text-align: center;
  background: #18191b;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
#deck-cost-widget > div .stat {
  text-transform: uppercase;
  font-size: 14px;
  color: #747474;
}
#deck-cost-widget > div .value {
  font-size: 20px;
}
#deck-cost-widget > div.deck-cost .value {
  color: #62b9ff;
}
#deck-cost-widget > div.your-cost .value {
  color: #09be85;
}

#deck-copy-dropdown .hearthstone {
  width: 100%;
}

.kazakus-simulator {
  border: 1px solid black;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: url(images/hearth/tools/kazakus/kazakus-sim-bg.jpg);
}
.kazakus-simulator .built-card {
  position: relative;
  width: 260px;
  min-width: 260px;
}
.kazakus-simulator .built-card img {
  width: 260px;
}
.kazakus-simulator .built-card .text-box {
  text-align: center;
  position: absolute;
  top: 245px;
  font-weight: 500;
  line-height: 18px;
  left: 35px;
  width: 180px;
  color: #1b140f;
  font-size: 16px;
}
.kazakus-simulator .built-card .text-box strong {
  font-weight: 600;
}
.kazakus-simulator .golem-options {
  position: relative;
  flex-grow: 1;
  padding: 10px;
  text-align: center;
}
.kazakus-simulator .golem-options .options {
  padding-left: 0;
  list-style: none;
}
.kazakus-simulator .kazakus-golem-choice {
  padding: 5px 15px;
  background: rgba(39, 40, 45, 0.95);
  border: 1px solid #1B1C1F;
  border-radius: 5px;
  cursor: pointer;
  min-width: 300px;
  text-align: left;
  padding-left: 70px;
  position: relative;
}
.kazakus-simulator .kazakus-golem-choice:before {
  content: "";
  width: 50px;
  height: 50px;
  display: block;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.kazakus-simulator .kazakus-golem-choice.swiftthistle:before {
  background-image: url(images/hearth/tools/kazakus/swiftthistle.jpg);
}
.kazakus-simulator .kazakus-golem-choice.earthroot:before {
  background-image: url(images/hearth/tools/kazakus/earthroot.jpg);
}
.kazakus-simulator .kazakus-golem-choice.sungrass:before {
  background-image: url(images/hearth/tools/kazakus/sungrass.jpg);
}
.kazakus-simulator .kazakus-golem-choice.liferoot:before {
  background-image: url(images/hearth/tools/kazakus/liferoot.jpg);
}
.kazakus-simulator .kazakus-golem-choice.fadeleaf:before {
  background-image: url(images/hearth/tools/kazakus/fadeleaf.jpg);
}
.kazakus-simulator .kazakus-golem-choice.gravemoss:before {
  background-image: url(images/hearth/tools/kazakus/gravemoss.jpg);
}
.kazakus-simulator .kazakus-golem-choice.wildvine:before {
  background-image: url(images/hearth/tools/kazakus/wildvine.jpg);
}
.kazakus-simulator .kazakus-golem-choice.gromsblood:before {
  background-image: url(images/hearth/tools/kazakus/gromsblood.jpg);
}
.kazakus-simulator .kazakus-golem-choice.icecap:before {
  background-image: url(images/hearth/tools/kazakus/icecap.jpg);
}
.kazakus-simulator .kazakus-golem-choice.firebloom:before {
  background-image: url(images/hearth/tools/kazakus/firebloom.jpg);
}
.kazakus-simulator .kazakus-golem-choice.mageroyal:before {
  background-image: url(images/hearth/tools/kazakus/mageroyal.jpg);
}
.kazakus-simulator .kazakus-golem-choice.kingsblood:before {
  background-image: url(images/hearth/tools/kazakus/kingsblood.jpg);
}
.kazakus-simulator .kazakus-golem-choice.lessergolem:before {
  background-image: url(images/hearth/tools/kazakus/lessergolem.jpg);
}
.kazakus-simulator .kazakus-golem-choice.greatergolem:before {
  background-image: url(images/hearth/tools/kazakus/greatergolem.jpg);
}
.kazakus-simulator .kazakus-golem-choice.superiorgolem:before {
  background-image: url(images/hearth/tools/kazakus/superiorgolem.jpg);
}
.kazakus-simulator .kazakus-golem-choice + .kazakus-golem-choice {
  margin-top: 10px;
}
.kazakus-simulator .kazakus-golem-choice:hover {
  background: rgba(37, 39, 49, 0.95);
}
.kazakus-simulator .kazakus-golem-choice .name {
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 24px;
}

.deckbuilder-view-page .save-area div#id_tags {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  max-width: 50%;
  gap: 10px;
}
.deckbuilder-view-page .save-area div#id_tags label {
  padding: 5px 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--widget-background-contrast);
  box-shadow: 1px 1px 1px #101010;
  display: initial;
}
.deckbuilder-view-page .save-area div#id_tags input {
  display: none;
}
.deckbuilder-view-page .save-area div#id_tags input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.deckbuilder-view-page .save-area div#id_tags input + label:hover {
  background: var(--widget-background-hover);
}
.deckbuilder-view-page .save-area div#id_tags input:checked + label {
  font-weight: 700;
  background: var(--widget-background-active);
}
.deckbuilder-view-page .save-area div#id_tags input:checked + label:before {
  filter: none;
  opacity: 1;
}

.card-version-change-date {
  color: #747474;
  font-size: 13px;
  margin-bottom: 5px;
  font-size: 15px;
}

.quiz-game {
  max-width: 900px;
  margin: 0 auto;
  background: var(--site-background-dark);
  padding: 20px;
  border-radius: 5px;
}
.quiz-game header {
  font-size: 24px;
  font-weight: 700;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 20px;
  margin: -20px;
  margin-bottom: 20px;
  background: var(--block-background);
  border: 2px solid var(--block-background);
}
.quiz-game header .question-num {
  font-weight: 400;
  font-size: 14px;
}
.quiz-game footer {
  padding: 20px;
  margin: -10px;
  margin-top: 20px;
  background: var(--block-background);
}

.hearth-mercenary-card-rank-embed {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--widget-new-background-border-color);
  background-color: #1d1d1d;
  display: flex;
}
.hearth-mercenary-card-rank-embed + .hearth-mercenary-card-rank-embed {
  margin-top: 10px;
}
.hearth-mercenary-card-rank-embed .rank-gutter {
  margin-right: 20px;
}
.hearth-mercenary-card-rank-embed .rank-gutter img.rank-art {
  border-radius: 10px;
}
.hearth-mercenary-card-rank-embed .rank-name {
  font-size: 19px;
  font-weight: 700;
}
.hearth-mercenary-card-rank-embed .rank-meta {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}
.hearth-mercenary-card-rank-embed .rank-meta .rank-meta-item {
  padding: 0 20px;
  border-radius: 5px;
  background-color: var(--widget-new-background-button-hard);
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px 0px #353535;
  margin-top: 10px;
  margin-left: 10px;
  color: #adadad;
}
.hearth-mercenary-card-rank-embed .rank-meta .rank-meta-spell-school.rank-meta-spell-school-arcane {
  color: #d499d8;
}
.hearth-mercenary-card-rank-embed .rank-meta .rank-meta-spell-school.rank-meta-spell-school-fire {
  color: #ef6d6d;
}
.hearth-mercenary-card-rank-embed .rank-meta .rank-meta-spell-school.rank-meta-spell-school-frost {
  color: #4196ec;
}
.hearth-mercenary-card-rank-embed .rank-meta .rank-meta-spell-school.rank-meta-spell-school-holy {
  color: #b5aa21;
}
.hearth-mercenary-card-rank-embed .rank-meta .rank-meta-spell-school.rank-meta-spell-school-shadow {
  color: #ad8dea;
}
.hearth-mercenary-card-rank-embed .rank-meta .rank-meta-spell-school.rank-meta-spell-school-nature {
  color: #21b533;
}
.hearth-mercenary-card-rank-embed .rank-meta .rank-meta-spell-school.rank-meta-spell-school-fel {
  color: #6ff779;
}

.mercenary-list-page div#id_role {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
}
.mercenary-list-page div#id_role input {
  display: none;
}
.mercenary-list-page div#id_role input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  width: 80px;
  margin: 10px;
}
.mercenary-list-page div#id_role input + label[data-label=Fighter]:before {
  background-image: url(images/hearth/mercenaries/mercenaries-fighter.png);
}
.mercenary-list-page div#id_role input + label[data-label=Caster]:before {
  background-image: url(images/hearth/mercenaries/mercenaries-caster.png);
}
.mercenary-list-page div#id_role input + label[data-label=Protector]:before {
  background-image: url(images/hearth/mercenaries/mercenaries-protector.png);
}
.mercenary-list-page div#id_role input + label[data-label=Neutral]:before {
  background-image: url(images/hearth/mercenaries/mercenaries-neutral.png);
}
.mercenary-list-page div#id_role input + label:before {
  display: block;
  height: 60px;
  width: 60px;
  background-size: 60px;
  filter: grayscale(100%);
  opacity: 0.8;
  content: "";
  margin: auto;
}
.mercenary-list-page div#id_role input:checked + label {
  font-weight: 700;
}
.mercenary-list-page div#id_role input:checked + label:before {
  filter: none;
  opacity: 1;
}

a.hearth-merc-role-icon-link::before, i.icon-merc.hearth-merc-role-icon-link::before {
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: bottom;
  content: "";
  margin-right: 5px;
  background-size: 25px;
  background-repeat: no-repeat;
}
a.hearth-merc-role-icon-link.hearth-merc-role-protector::before, i.icon-merc.hearth-merc-role-icon-link.hearth-merc-role-protector::before {
  background-image: url(images/hearth/mercenaries/mercenaries-protector.png);
}
a.hearth-merc-role-icon-link.hearth-merc-role-fighter::before, i.icon-merc.hearth-merc-role-icon-link.hearth-merc-role-fighter::before {
  background-image: url(images/hearth/mercenaries/mercenaries-fighter.png);
}
a.hearth-merc-role-icon-link.hearth-merc-role-caster::before, i.icon-merc.hearth-merc-role-icon-link.hearth-merc-role-caster::before {
  background-image: url(images/hearth/mercenaries/mercenaries-caster.png);
}
a.hearth-merc-role-icon-link.hearth-merc-role-all::before, i.icon-merc.hearth-merc-role-icon-link.hearth-merc-role-all::before {
  background-image: url(images/hearth/mercenaries/mercenaries-neutral.png);
}
a.icon-merc-mode, i.icon-merc.icon-merc-mode {
  background-image: url(images/game-logo-mercenaries.svg);
}

i.icon-merc.small {
  width: 22px;
  height: 22px;
}
i.icon-merc.large {
  width: 60px;
  height: 60px;
}

#merc-party-builder {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: 1fr;
  grid-template-areas: "choices party" "save save";
  gap: 10px;
}
#merc-party-builder #merc-choices, #merc-party-builder #equip-choices {
  min-height: 646px;
  padding: 10px 0;
  background: #1d1e22;
  border: 1px solid #1D1D1D;
  border-radius: 5px;
  border-top-left-radius: 0px;
  display: flex;
  flex-grow: 1;
  justify-content: center;
}
#merc-party-builder #merc-choices .mercenary-choice img, #merc-party-builder #equip-choices .mercenary-choice img {
  max-width: 220px;
}
#merc-party-builder #merc-choices .merc-interior, #merc-party-builder #equip-choices .merc-interior {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: center;
}
#merc-party-builder #party-builder-main {
  grid-area: choices;
}
#merc-party-builder #merc-party-composition {
  grid-area: party;
  padding: 10px;
  background: #1d1e22;
  border: 1px solid #1D1D1D;
  border-radius: 5px;
}
#merc-party-builder #merc-party-composition .party-count {
  float: right;
}
#merc-party-builder #merc-party-save {
  grid-area: save;
}
#merc-party-builder #merc-party-save div#id_tags {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  max-width: 50%;
}
#merc-party-builder #merc-party-save div#id_tags li {
  margin-bottom: 20px;
}
#merc-party-builder #merc-party-save div#id_tags label {
  padding: 5px 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--widget-background-contrast);
  box-shadow: 1px 1px 1px #101010;
  display: initial;
}
#merc-party-builder #merc-party-save div#id_tags input {
  display: none;
}
#merc-party-builder #merc-party-save div#id_tags input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  margin: 10px;
}
#merc-party-builder #merc-party-save div#id_tags input + label:hover {
  background: var(--widget-background-hover);
}
#merc-party-builder #merc-party-save div#id_tags input:checked + label {
  font-weight: 700;
  background: var(--widget-background-active);
}
#merc-party-builder #merc-party-save div#id_tags input:checked + label:before {
  filter: none;
  opacity: 1;
}
#merc-party-builder #equip-choices {
  padding: 10px;
}
#merc-party-builder #equip-choices .merc-equipment-available, #merc-party-builder #equip-choices .merc-abilities-available {
  display: flex;
}
#merc-party-builder #equip-choices .merc-equipment-available img, #merc-party-builder #equip-choices .merc-abilities-available img {
  max-width: 230px;
}
#merc-party-builder img.highlighter {
  cursor: pointer;
}
#merc-party-builder img.highlighter:hover {
  transform: scale(105%);
  filter: drop-shadow(1px 1px 2px rgb(95, 224, 241)) drop-shadow(-1px -1px 2px rgb(95, 224, 241));
}
#merc-party-builder .mercenary-loadout {
  position: relative;
}
#merc-party-builder .mercenary-loadout i.mercenary-loadout-cancel {
  cursor: pointer;
  color: #DF4444;
  position: absolute;
  top: 10px;
  right: 10px;
}
#merc-party-builder #party-contents .party-member {
  background: #1b1d1f;
  padding: 7.5px;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
}
#merc-party-builder #party-contents .party-member .card-cost {
  width: 25px;
  text-align: center;
  align-self: flex-end;
  background: #0d4059;
  border-radius: 5px;
  margin-right: 6px;
  font-weight: 600;
}
#merc-party-builder #party-contents .party-member .card-name {
  flex-grow: 1;
}
#merc-party-builder #party-contents .party-member .party-mercenary {
  font-weight: 700;
  padding: 10px 10px 10px 0;
  background-position: right;
  background-repeat: no-repeat;
  border-radius: 5px;
}
#merc-party-builder #party-contents .party-member .party-mercenary:hover {
  border-radius: 4px;
  background: rgba(182, 90, 90, 0.45);
  color: var(--font-color) !important;
}
#merc-party-builder #party-contents .party-member .party-mercenary:hover:after {
  font-family: "Font Awesome 5 Pro";
  display: block;
  font-weight: 700;
  content: "\f057";
  float: right;
}
#merc-party-builder #party-contents .party-member .party-mercenary.party-mercenary-rarity-common {
  color: #2BAD19;
}
#merc-party-builder #party-contents .party-member .party-mercenary.party-mercenary-rarity-rare {
  color: #1E90fF;
}
#merc-party-builder #party-contents .party-member .party-mercenary.party-mercenary-rarity-epic {
  color: #BC5BFF;
}
#merc-party-builder #party-contents .party-member .party-mercenary.party-mercenary-rarity-legendary {
  color: #FF8000;
}
#merc-party-builder #party-contents .party-member .party-equipment {
  background: rgba(255, 255, 255, 0.05);
  padding: 7.5px;
  margin-top: 5px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  margin-left: 10%;
}
#merc-party-builder #party-contents .party-member .party-equipment:hover {
  background: rgba(41, 168, 79, 0.35);
}
#merc-party-builder #party-contents .party-member .party-equipment:hover:after {
  font-family: "Font Awesome 5 Pro";
  display: block;
  font-weight: 700;
  content: "\f0ec";
  float: right;
}
#merc-party-builder a.builder-paging {
  cursor: pointer;
  display: flex;
  font-size: 40px;
  padding: 0 20px;
  align-items: center;
}

.mercenary-party-contents .party-member {
  background: #1b1d1f;
  padding: 7.5px;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
}
.mercenary-party-contents .party-member .party-mercenary {
  font-weight: 700;
  padding: 10px 10px 10px 0;
  background-position: right;
  background-repeat: no-repeat;
  border-radius: 5px;
}
.mercenary-party-contents .party-member .party-mercenary.party-mercenary-rarity-common, .mercenary-party-contents .party-member .party-mercenary.party-mercenary-rarity-common a {
  color: #2BAD19;
}
.mercenary-party-contents .party-member .party-mercenary.party-mercenary-rarity-rare, .mercenary-party-contents .party-member .party-mercenary.party-mercenary-rarity-rare a {
  color: #1E90fF;
}
.mercenary-party-contents .party-member .party-mercenary.party-mercenary-rarity-epic, .mercenary-party-contents .party-member .party-mercenary.party-mercenary-rarity-epic a {
  color: #BC5BFF;
}
.mercenary-party-contents .party-member .party-mercenary.party-mercenary-rarity-legendary, .mercenary-party-contents .party-member .party-mercenary.party-mercenary-rarity-legendary a {
  color: #FF8000;
}
.mercenary-party-contents .party-member .party-equipment {
  background: rgba(255, 255, 255, 0.05);
  padding: 7.5px;
  margin-top: 5px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  margin-left: 10%;
}

.merc-party-detail-wrapper .party-meta, .mercs-party-widget-home .party-meta {
  flex-grow: 1;
}
.merc-party-detail-wrapper .merc-portraits img.merc-portrait, .mercs-party-widget-home .merc-portraits img.merc-portrait {
  border: 1px solid black;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  object-fit: cover;
  object-position: 60% 0;
}
.merc-party-detail-wrapper .deck-details, .mercs-party-widget-home .deck-details {
  display: flex;
  flex-direction: row;
  width: 100%;
}
@media screen and (max-width: 900px) {
  .merc-party-detail-wrapper .deck-details, .mercs-party-widget-home .deck-details {
    flex-wrap: wrap;
  }
}

.mercs-party-widget-home header .party-details {
  width: calc(100% - 45px);
  margin-left: 5px;
}
.mercs-party-widget-home header .party-details .byline, .mercs-party-widget-home header .party-details .updated {
  display: inline;
  font-size: 13px;
  color: #747474 !important;
}
.mercs-party-widget-home .merc-portraits {
  display: flex;
  margin-left: 5px;
}
.mercs-party-widget-home .merc-portraits img.merc-portrait {
  width: 35px;
  height: 35px;
}
.mercs-party-widget-home .merc-portraits .mercenary-tooltip + .mercenary-tooltip {
  margin-left: 5px;
}

.deck-embed.party-embed .mercenary-party-contents {
  padding: 0;
  margin: 0;
  column-count: auto;
  column-width: 280px;
}
.deck-embed.party-embed .party-member {
  padding: 5px;
}

.event-halloween-member-box {
  background: url(images/core/events/member-profile-house.jpg);
  width: 100%;
  min-height: 500px;
  position: relative;
  border-radius: 15px;
}

.halloween-house {
  background: url(images/core/events/member-profile-house.jpg);
  min-height: 200px;
  background-size: cover;
  position: relative;
  border-radius: 10px;
  padding: 10px;
  background-position: top right;
}
.halloween-house a {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.halloween-house h4 {
  text-shadow: 1px 1px 10px #000000, 0 0 5px #000000;
  color: #2eb001;
  font-weight: 700;
}

.event-halloween-pumpkin-bucket {
  background: url(images/core/events/pumpkin-bucket.png);
  background-size: 170px 226px;
  width: 170px;
  height: 226px;
  position: absolute;
  bottom: 10px;
  left: 60px;
  display: block;
  filter: drop-shadow(1px 1px 2px rgb(241, 195, 95)) drop-shadow(-1px -1px 2px rgb(241, 195, 95));
  animation: pumpkin-wobble 4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
}
.event-halloween-pumpkin-bucket:hover {
  cursor: pointer;
  transform: scale(110%);
}

@keyframes pumpkin-wobble {
  4%, 32% {
    transform: translate3d(-1px, 0, 0);
  }
  8%, 28% {
    transform: translate3d(2px, 0, 0);
  }
  12%, 24% {
    transform: translate3d(-4px, 0, 0);
  }
  16%, 20% {
    transform: translate3d(4px, 0, 0);
  }
}
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.image-gallery a {
  font-size: 0;
}
.image-gallery img {
  border-radius: 5px;
  border: 3px solid #3A3A3A;
  margin: 5px;
}
@media screen and (max-width: 550px) {
  .image-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

.timeline-item {
  background: #282828;
  margin-bottom: 20px;
  box-shadow: 1px 1px 3px 2px #0c0c0c;
  border-radius: 5px;
}

.timeline-header {
  height: 250px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.timeline-heading {
  background: rgba(40, 40, 40, 0.9);
  display: inline-block;
  min-width: 300px;
  padding: 20px;
  position: absolute;
  bottom: 40px;
  left: 20px;
  box-shadow: 2px 2px 5px 1px #0c0c0c;
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-right: 20px;
}

.timeline-heading h3 {
  margin-bottom: 0;
  transform: rotate(-1.9deg) skew(-3.8deg);
}

.timeline-body {
  padding: 20px;
}

.timeline-date {
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  transform: rotate(-1.9deg) skew(-3.8deg);
}

.timeline-header-twitchclips {
  background: url(images/cms/twitch-header-timeline.png) center;
}
.timeline-header-twitchclips .timeline-heading {
  background: rgb(40, 40, 40);
}

body.page1400 .content-wrap {
  max-width: 1400px;
}

.yugioh-deckbuilder #deckbuilder .card-interior {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

#grid-deckbuilder {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(12, 1fr);
}
#grid-deckbuilder .filters {
  grid-column: span 12;
}
#grid-deckbuilder #cards {
  grid-column: span 9;
  display: flex;
  flex-direction: column;
}
#grid-deckbuilder #cards .components {
  display: flex;
  flex-direction: row;
}
#grid-deckbuilder #cards .components .builder-paging {
  display: flex;
  font-size: 40px;
  padding: 0 20px;
  align-items: center;
  cursor: pointer;
}
#grid-deckbuilder #cards .components .collection {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 600px;
  flex-grow: 1;
}
#grid-deckbuilder #cards .components .collection .deckbuilder-card {
  cursor: pointer;
}
#grid-deckbuilder #cards .page-info {
  text-align: center;
}
#grid-deckbuilder #deck-contents {
  grid-column: span 3;
}

.site-content.carb-meal-detail-page {
  background: url(images/carbs/meal/default-details-background.jpg) no-repeat top center var(--page-background);
}
.site-content.carb-meal-detail-page.meal-archetype-low-carb {
  background-image: url(images/carbs/meal/low-carb-details-background.jpg);
}
.site-content.carb-meal-detail-page.meal-archetype-raw {
  background-image: url(images/carbs/meal/raw-details-background.jpg);
}
.site-content.carb-meal-detail-page.meal-archetype-vegetarian {
  background-image: url(images/carbs/meal/vegetarian-details-background.jpg);
}
.site-content.carb-meal-detail-page.meal-archetype-vegan {
  background-image: url(images/carbs/meal/vegan-details-background.jpg);
}
.site-content.carb-meal-detail-page.meal-archetype-paleo {
  background-image: url(images/carbs/meal/paleo-details-background.jpg);
}
.site-content.carb-meal-detail-page.meal-archetype-keto {
  background-image: url(images/carbs/meal/keto-details-background.jpg);
}
.site-content.carb-meal-detail-page .card-section {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  border-color: #18191b;
}
.site-content.carb-meal-detail-page .card-section + .card-section {
  margin-top: 20px;
}
.site-content.carb-meal-detail-page .deck-vote-prompt {
  background: url(images/transparent-bgs/asfalt-dark.png), linear-gradient(#141c27, #191d1f);
  border-color: #454065;
  margin-top: 150px;
}
.site-content.carb-meal-detail-page .deck-vote-prompt div.portrait {
  background-image: url(images/carbs/meal/cta-portrait.png);
  min-width: 155px;
  margin-top: -80px;
}
.site-content.carb-meal-detail-page ul.card-section-list span.card-cost {
  width: 60px;
}
.site-content.carb-meal-detail-page ul.card-section-list .card-count {
  width: fit-content;
  padding: 0 10px;
}

.ooc-stars {
  padding: 20px;
  background: #17191B;
  border: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}
.ooc-stars h6 {
  margin-bottom: 4px;
}
.ooc-stars .star-object {
  font-family: "Font Awesome 5 Pro";
  font-size: 24px;
}
.ooc-stars .star-object + .star-object {
  padding-left: 5px;
}
.ooc-stars .star-object:hover:before, .ooc-stars .star-object.hover:before, .ooc-stars .star-object.selected:before {
  color: #f5fc96;
  font-weight: 900;
  cursor: pointer;
}
.ooc-stars .star-object:before {
  color: #bb9e1d;
  display: inline-block;
  content: "\f005";
}
.ooc-stars .star-object.star-object-filled {
  color: #fdd522;
  font-weight: 900;
}
.ooc-stars .star-object.star-object-filled:hover {
  color: #f5fc96;
  font-weight: 900;
}

.card-page-card-block {
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 650px) {
  .card-page-card-block {
    flex-direction: column;
  }
}
.card-page-card-block ul.no-fancy {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

main.base-main {
  display: flex;
  justify-content: center;
  max-width: 1400px;
  align-items: flex-start;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
main.base-main .inner-base-main {
  width: 100%;
}

#ooc-siderail-left, #ooc-siderail-right {
  position: sticky;
  z-index: 1000;
  top: 24px;
  margin-top: 24px;
}

@media (min-width: 1560px) {
  #ooc-siderail-left, #ooc-siderail-right {
    width: 160px;
    min-width: 160px;
  }
  #ooc-siderail-left {
    margin-right: 20px;
  }
  #ooc-siderail-right {
    margin-left: 20px;
  }
}
@media (min-width: 1900px) {
  #ooc-siderail-left, #ooc-siderail-right {
    width: 300px;
    min-width: 300px;
  }
}
ul.fancy-class-grid-listing {
  display: grid;
  list-style: none;
  gap: 20px;
  justify-content: center;
  padding-left: 0;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
ul.fancy-class-grid-listing li {
  padding: 5px 10px;
  background: #17191b;
  border-radius: 5px;
}
ul.fancy-class-grid-listing li a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  margin-bottom: 1rem;
}
.featured-items.featured-guides-sidebar {
  grid-template-columns: 1fr;
}
.featured-items.featured-guides-sidebar .featured-item {
  display: flex;
  flex-direction: row;
}
.featured-items.featured-guides-sidebar .featured-item .item-details {
  padding-top: 0;
  padding-bottom: 0;
}
.featured-items.featured-guides-sidebar .featured-item h4 {
  font-size: 18px;
}
.featured-items .featured-item {
  border-radius: 0.375rem;
}
.featured-items .featured-item .item-details {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  padding-top: 0.25rem;
}
.featured-items .featured-item .item-details h4 {
  flex-grow: 1;
}
@media screen and (max-width: 800px) {
  .featured-items .featured-item .item-details h4 {
    font-size: 18px;
  }
}
.featured-items .featured-item .item-details footer {
  display: flex;
  color: #747474;
  font-size: 14px;
}
.featured-items .featured-item .item-details footer .created-on {
  flex-grow: 1;
}
@media screen and (max-width: 800px) {
  .featured-items {
    grid-template-columns: 1fr;
  }
}

.realm-news-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.realm-news-header h3 {
  flex-grow: 1;
}

.listing-item {
  border-radius: 0.375rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.listing-item .title-link {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #FFFFFF;
}
.listing-item .listing-item-meta {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #747474;
  font-size: 13px;
}
.listing-item .listing-item-meta a {
  color: #747474;
  font-size: 13px;
}
.listing-item .listing-item-stats {
  margin-top: 0.5rem;
}
.listing-item.listing-item-link .name, .listing-item.listing-item-link .title {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

a.listing-item-link {
  display: block;
}

.listing-formset-fluffy .form-field-grid {
  display: grid;
  gap: 0.75rem;
}

.listing-formset-fluffy div#dynamic-fields {
  max-width: 300px;
}

.listing-formset-fluffy div#dynamic-fields .form-field {
  position: relative;
}

.listing-formset-fluffy div.form-field-hidden {
  display: none;
}

.form-field-horizontal-icons ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  margin: 0;
  padding-bottom: 1rem;
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
}
.form-field-horizontal-icons ul li {
  flex: 1 1 0%;
}
.form-field-horizontal-icons ul input {
  display: none;
}
.form-field-horizontal-icons ul input + label {
  width: 3rem;
  margin: 0.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  text-align: center;
}
.form-field-horizontal-icons ul input + label:before {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: auto;
  margin-bottom: 0.25rem;
  background-size: 3rem 3rem;
  opacity: 0.8;
  content: "";
}
.form-field-horizontal-icons ul input:checked + label:before {
  filter: none;
  opacity: 1;
}

.listing-item-thread {
  padding: 0.25rem 0.5rem;
  margin-bottom: 1rem;
  background: var(--site-background-dark);
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.listing-item-thread .thread-tag {
  padding: 4px 12px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.listing-item-thread .listing-item-thread-preview {
  height: 5em;
  width: 5em;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listing-item-thread .listing-item-thread-preview a {
  color: #525252;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.listing-item-thread .listing-item-thread-preview img {
  max-width: 100%;
  border-radius: 10px;
}
.listing-item-thread .listing-item-thread-details {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.listing-item-thread .listing-item-thread-content {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.listing-item-thread .listing-item-thread-expand {
  align-self: center;
  color: #8dbce1;
  font-size: 25px;
}
.listing-item-thread .listing-item-thread-expand-preview {
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}
.listing-item-thread .thread-expand-icon {
  cursor: pointer;
}
.listing-item-thread .thread-expand-icon:hover {
  color: white;
}

.article-item {
  display: flex;
  flex-direction: column;
  border-radius: 0.375rem;
}
.article-item img.article-thumb {
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  aspect-ratio: 2/1;
}
.article-item .item-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.article-item .item-details h4 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.article-item .item-details footer {
  color: #747474;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}
.article-item .item-details footer a {
  color: #747474;
}
.article-item .item-details footer span.usergroup-registered-user a {
  color: #E5AF37;
}

section.home-content header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 15px;
}
section.home-content header h2 {
  margin-bottom: 0;
  margin-right: auto;
}

.glide-articles {
  position: relative;
}
.glide-articles li.glide__slide {
  position: relative;
}
.glide-articles li.glide__slide h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  padding: 0.5em;
}
.glide-articles .glide__bullets {
  position: absolute;
  z-index: 30;
  bottom: 1.5rem;
  left: 50%;
  display: inline-flex;
  list-style: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.glide-articles .glide__bullets button {
  background: rgba(255, 255, 255, 0.6);
}
.glide-articles .glide__bullets button.glide__bullet--active {
  background: var(--button-bg);
}

ul.featured-realms {
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  --gradient-start-color: rgba(0, 0, 0, 0.9);
  --gradient-mid-color: rgba(0, 0, 0, 0.6);
}
ul.featured-realms li.realm-featured-item {
  width: calc(50% - 5px);
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
ul.featured-realms li.realm-featured-item:hover {
  --gradient-start-color: rgba(37, 37, 37, 0.9);
  --gradient-mid-color: rgba(37, 37, 37, 0.6);
}
ul.featured-realms li.realm-featured-item img {
  width: 30px;
  height: 30px;
}
ul.featured-realms li.realm-featured-item a {
  display: block;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
}

.responsive-youtube-video {
  position: relative;
  overflow: hidden;
  width: 100;
}
.responsive-youtube-video::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}
.responsive-youtube-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.external-link-preview {
  color: #747474;
  font-size: 13px;
}

.realm-thread-details {
  padding: 20px;
  margin: 20px 0;
  background: var(--site-background-dark);
  border-radius: 5px;
}
.realm-thread-details .realm-thread-description {
  margin-top: 20px;
}

.listing-item-activity {
  position: relative;
  background: var(--site-background-dark);
  padding: 10px;
}
.listing-item-activity .name {
  margin-right: 34px;
}
.listing-item-activity .difficulty-wrap {
  position: absolute;
  top: 8px;
  right: 4px;
  color: #FFFFFF;
}
.listing-item-activity .difficulty-wrap.difficulty-icon-easy {
  --fa-primary-color: #8bc34a;
}
.listing-item-activity .difficulty-wrap.difficulty-icon-medium {
  --fa-primary-color: #ffeb3b;
}
.listing-item-activity .difficulty-wrap.difficulty-icon-hard {
  --fa-primary-color: #ff9800;
}
.listing-item-activity .difficulty-wrap.difficulty-icon-master {
  --fa-primary-color: #f44336;
}
.listing-item-activity .completion-status {
  position: absolute;
  bottom: 8px;
  right: 4px;
}

.listing-item-realm {
  position: relative;
  background: var(--site-background-dark);
  padding: 10px;
}
.listing-item-realm .realm-title {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.listing-item-realm .realm-title .realm-avatar {
  height: 50px;
  width: 50px;
  flex-shrink: 0;
  align-self: flex-start;
}
.listing-item-realm .realm-title .realm-avatar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 2px solid var(--site-border-color);
}
.listing-item-realm .realm-title .realm-heading h3 {
  margin-bottom: 0;
}
.listing-item-realm .realm-title .realm-heading .realm-meta {
  font-size: 1rem;
}

.ui.inverted.form input:not([type]), .ui.inverted.form input[type=color], .ui.inverted.form input[type=date], .ui.inverted.form input[type=datetime-local], .ui.inverted.form input[type=email], .ui.inverted.form input[type=file], .ui.inverted.form input[type=month], .ui.inverted.form input[type=number], .ui.inverted.form input[type=password], .ui.inverted.form input[type=search], .ui.inverted.form input[type=tel], .ui.inverted.form input[type=text], .ui.inverted.form input[type=time], .ui.inverted.form input[type=url], .ui.inverted.form input[type=week] {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  color: var(--font-color);
}

.ui.form select {
  border: 1px solid var(--site-border-color);
  background: var(--site-background-dark);
  color: var(--font-color);
}

.flex-header {
  position: relative;
}
@media screen and (max-width: 600px) {
  .flex-header h1 {
    padding-top: 60px;
  }
}
.flex-header .mod-tools {
  position: absolute;
  top: 0;
  right: 0;
}
@media screen and (max-width: 600px) {
  .flex-header .mod-tools {
    right: inherit;
  }
}

.realm-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.realm-filters ul {
  display: flex;
  flex-direction: row;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.realm-filters ul.filter-link-bubbles li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: var(--font-color);
  font-weight: 700;
  text-align: center;
  transition: background 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  margin: 0;
  cursor: pointer;
}
.realm-filters ul.filter-link-bubbles li a.selected-link-bubble {
  border-radius: 20px;
  background: var(--widget-background-contrast);
  box-shadow: 1px 1px 1px #101010;
}
.realm-filters li {
  position: relative;
  cursor: pointer;
}
.realm-filters li:hover > ul {
  display: block;
}
.realm-filters li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 8px 15px;
}
.realm-filters li a:hover {
  background: var(--widget-background-hover);
}
.realm-filters li.sort-title {
  margin-left: 15px;
}
.realm-filters ul ul {
  display: none;
  position: absolute;
  background-color: var(--widget-background-contrast);
  padding: 15px 0;
  border-radius: 10px;
  min-width: 190px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .realm-filters ul ul {
    position: static;
  }
}

.realm-header {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 12;
}
.realm-header .realm-banner {
  height: 140px;
  background-image: linear-gradient(#1c2028, #161a20);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  position: relative;
}
.realm-header .realm-actions {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: 20px;
  overflow-wrap: break-word;
  margin-top: -1.3em;
  z-index: 10;
  gap: 20px;
}
.realm-header .realm-actions .realm-title {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  justify-content: center;
  margin-top: -1em;
  margin-left: 20px;
}
.realm-header .realm-actions .realm-title .realm-avatar {
  height: 90px;
  width: 90px;
}
.realm-header .realm-actions .realm-title .realm-avatar img {
  height: 90px;
  width: 90px;
  border-radius: 50%;
  border: 2px solid var(--site-border-color);
}
.realm-header .realm-actions .realm-title .realm-heading {
  margin-top: 40px;
}
.realm-header .realm-actions .realm-title .realm-heading h3 {
  margin-bottom: 0;
}
.realm-header .realm-actions .realm-title .realm-heading .realm-meta {
  font-size: 1rem;
}
.realm-header .realm-actions .realm-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.desktop-only {
  display: block;
}
@media screen and (max-width: 1200px) {
  .desktop-only {
    display: none !important;
  }
}

.mobile-tablet-only {
  display: none;
}
@media screen and (max-width: 800px) {
  .mobile-tablet-only {
    display: block !important;
  }
}

.mobile-only {
  display: none;
}
@media screen and (max-width: 400px) {
  .mobile-only {
    display: block !important;
  }
}

.base-margin-bottom {
  margin-bottom: 20px;
}

#odyn-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 10px 20px;
  border-top-right-radius: 10px;
  background: rgb(21, 21, 21);
  color: white;
  max-width: 350px;
}
#odyn-overlay h6 {
  font-size: 14px;
  margin-bottom: 4px;
}
#odyn-overlay .interior {
  font-family: monospace;
  font-size: 12px;
}

.notifyjs-articleWithThumbnail-base {
  position: relative;
  background: rgb(21, 21, 21);
  max-width: 250px;
  border-radius: 10px;
  margin-top: 10px;
}
.notifyjs-articleWithThumbnail-base .title {
  padding: 10px;
  padding-top: 0;
}
.notifyjs-articleWithThumbnail-base .close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  cursor: pointer;
  text-shadow: 0px 0px 10px #000000;
}
.notifyjs-articleWithThumbnail-base .notify-desc {
  margin-left: 10px;
  color: #747474;
  font-size: 13px;
}
.notifyjs-articleWithThumbnail-base img {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.articles-extended {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}
.articles-extended .article-list-item {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  border-bottom: 2px solid var(--hr-color);
  padding-bottom: 10px;
}
@media screen and (max-width: 1000px) {
  .articles-extended .article-list-item {
    flex-direction: column;
  }
}
.articles-extended .article-list-item .article-thumb img {
  min-width: 200px;
  width: 200px;
  height: 100px;
  border-radius: 10px;
}
@media screen and (max-width: 1000px) {
  .articles-extended .article-list-item .article-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 2/1;
  }
}
.articles-extended .article-list-item .article-details {
  display: flex;
  flex-direction: column;
}
.articles-extended .article-list-item .article-details h2 {
  margin-bottom: 0;
}
.articles-extended .article-list-item .article-details .article-created-on {
  color: var(--font-color-faded);
}
.articles-extended .article-list-item .article-details .article-preview {
  font-size: 1rem;
}

.premium-sidebar-box {
  display: flex;
  flex-direction: column;
  text-align: center;
  min-height: 200px;
  border-radius: 20px;
  background: #000;
  padding: 30px;
  background-image: url(images/premium-sidebar-background.webp);
  background-size: cover;
  border: 1px solid #204B73;
  color: #FFFFFF;
}
.premium-sidebar-box .get-premium {
  background-image: linear-gradient(25deg, #df43a6 0%, #5ecced 85%);
  border-radius: 10px;
  padding: 15px;
  color: #FFFFFF;
}
.premium-sidebar-box .get-premium:hover {
  background-image: linear-gradient(25deg, #ea57b4 0%, #6ed1ef 85%);
}
.premium-sidebar-box .details {
  flex-grow: 1;
  font-weight: 700;
}
.premium-sidebar-box .support-us {
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 1px 1px 5px #000000;
}

.social-sidebar-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 20px;
}
.social-sidebar-box a.social-account {
  padding: 10px;
  color: white;
}
.social-sidebar-box a.social-account:first-child {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
.social-sidebar-box a.social-account:last-child {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.social-sidebar-box a.social-account.social-account-bluesky {
  background: #1da1f2;
  background-image: linear-gradient(25deg, #187fcd 0%, #1da1f2 85%);
}
.social-sidebar-box a.social-account.social-account-facebook {
  background: #3b5998;
  background-image: linear-gradient(25deg, #2d4373 0%, #3b5998 85%);
}
.social-sidebar-box a.social-account.social-account-x {
  background: #323232;
  background-image: linear-gradient(25deg, #1e1e1e 0%, #323232 85%);
}
.social-sidebar-box a.social-account.social-account-discord {
  background: #7289da;
  background-image: linear-gradient(25deg, #5b6e91 0%, #7289da 85%);
}
.social-sidebar-box a.social-account.social-account-epic-games {
  background: #313131;
  background-image: linear-gradient(25deg, #1e1e1e 0%, #313131 85%);
}

.tox .tox-notification--error {
  background-color: #6d1919;
  border-color: #eb6262;
  color: #fff;
}

.third-party-login-choices {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.third-party-login-choices form.third-party-login button {
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  font-size: 30px;
  line-height: 30px;
  appearance: unset;
  -webkit-appearance: unset;
  height: 70px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.third-party-login-choices form.third-party-login.login-battlenet button {
  background: #00aeff;
  color: #fff;
}
.third-party-login-choices form.third-party-login.login-discord button {
  background: #7289da;
  color: #fff;
}
.third-party-login-choices form.third-party-login.login-epicgames button {
  background: #313131;
  color: #fff;
}
.third-party-login-choices form.third-party-login.login-facebook button {
  background: #3b5998;
  color: #fff;
}
.third-party-login-choices form.third-party-login.login-google button {
  background: #db4437;
  color: #fff;
}
.third-party-login-choices form.third-party-login.login-twitter button {
  background: #2e4a5b;
  color: #fff;
}
.third-party-login-choices form.third-party-login.login-xbox button {
  background: #107c10;
  color: #fff;
}
.third-party-login-choices form.third-party-login.login-steam button {
  background: #333741;
  border-color: rgba(0, 0, 0, 0.1);
  color: #fff;
}
.third-party-login-choices form.third-party-login.login-twitch button {
  background: #6441a5;
  color: #fff;
}
.third-party-login-choices form.third-party-login.login-patreon button {
  background: #f96854;
  color: #fff;
}

.realm-thread-type-choices {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

a.thread-type-btn {
  cursor: pointer;
  padding: 15px 90px;
  background-color: #232323;
  border: 1px solid #3b3b3b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #FFF;
  text-decoration: none;
}
a.thread-type-btn:hover {
  background-color: #1a1a1a;
}
a.thread-type-btn i {
  display: block;
}
a.thread-type-btn:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
a.thread-type-btn:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.thread-type-btn.active {
  background-color: #1a1a1a;
}

.thread-form {
  border: 1px solid #1a1a1a;
  padding: 20px;
  display: none;
}
.thread-form.active {
  display: block;
}

.fluffy-checkbox-select-multiple {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 10px;
}
.fluffy-checkbox-select-multiple label {
  padding: 5px 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--checkbox-background-contrast);
  box-shadow: 1px 1px 1px #101010;
  display: initial;
}
.fluffy-checkbox-select-multiple input {
  display: none;
}
.fluffy-checkbox-select-multiple input + label {
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.fluffy-checkbox-select-multiple input + label:hover {
  background: var(--checkbox-background-hover);
}
.fluffy-checkbox-select-multiple input:checked + label {
  font-weight: 700;
  background: var(--checkbox-background-active);
}
.fluffy-checkbox-select-multiple input:checked + label:before {
  filter: none;
  opacity: 1;
}

.realm-featured-item {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.realm-featured-item img {
  border-radius: 50%;
}

.frosty-table-of-contents {
  padding: 20px;
  background: #1a1a1a;
  border-radius: 10px;
  box-shadow: 1px 1px 1px #101010;
  margin: 20px 0;
}

/*# sourceMappingURL=ryzen3-inside.css.map */