@import url(https://use.typekit.net/bya0rai.css);
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.cc-grower {
  border-bottom: 1px solid #17313a;
}
.cc-grower div {
  background: #102531 !important;
}
.cc-grower div .cc-compliance {
  border: 1px solid #d47559;
  background: transparent;
  transition: all 0.3s;
}
.cc-grower div .cc-compliance:hover {
  background: #d47559 !important;
}
.app_gdpr--2k2uB {
  --cmpBgColor: #fff;
  --cmpTextColor: #333;
  --cmpBrandColor: #f65002;
  --cmpHoverColor: #912f01;
}
div.intro_intro--Ntqks .intro_logoLink--16ox9 {
  display: none !important;
}
.intro_purposes--_S5Vy li {
  color: #333;
  font-family: sans-serif;
  font-size: 15px;
}
body.cmp-state--bar {
  margin-bottom: 118px;
}
body {
  font-family: "sofia-pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.015em;
  background: #0d202b;
}
.App {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background-color: #0d202b;
  overflow: hidden;
}
.home h1 {
  font-family: "sofia-pro", sans-serif;
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.5em;
  margin: 0;
}
h1 {
  line-height: 1.5em;
}
h1,
h2 {
  font-family: "sofia-pro", sans-serif;
  color: hsla(0, 0%, 100%, 0.9);
  font-size: 21px;
  font-weight: 600;
  margin: 0;
}
h2 {
  line-height: 1.3em;
}
h3 {
  color: hsla(0, 0%, 100%, 0.9);
  font-weight: 600;
}
h3,
h4 {
  font-family: "sofia-pro", sans-serif;
  font-size: 16px;
  line-height: 1em;
  margin: 0;
}
h4 {
  color: #88a0a7;
  font-weight: 400;
}
p {
  color: #88a0a7;
  line-height: 2em;
  margin: 0 0 20px;
  max-width: 700px;
}
ol,
p,
ul {
  font-family: "sofia-pro", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
ol,
ul {
  color: #fff;
  line-height: 1em;
  margin: 0;
}
ol li,
ul li {
  max-width: 700px;
}
ul,
ul li {
  padding: 0;
}
ul li {
  list-style: none;
}
a {
  color: #6287a7;
  transition: all 0.3s;
}
a:active,
a:focus,
a:hover {
  color: #83a0b9;
  text-decoration: none;
}
.disclaimer {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0 0;
  background: #123040;
  border-radius: 3px;
}
.disclaimer p {
  color: #88a0a7;
  font-size: 14px;
  margin: 0;
  line-height: 1.5em;
  max-width: none;
}
.home .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  background: #4080b0;
  border: none;
  border-radius: 0;
  padding: 10px 30px;
  box-shadow: inset 0 0 2px 0 #0d202b;
  border-radius: 3px;
  transition: all 0.3s;
}
.home .btn:hover {
  background: #2c98d6;
  border: none;
}
.set-disclaimer {
  align-items: center;
  color: #88a0a7;
  border: 1px solid #d47559;
  padding: 10px 20px !important;
  font-size: 14px;
  margin-bottom: 20px;
}
.set-cta,
.set-disclaimer {
  display: flex;
  justify-content: center;
}
.set-cta {
  width: 100%;
  margin-bottom: 40px;
}
.mode-btn.dropdown .dropdown-toggle {
  width: auto;
  min-width: 100px;
}
.btn {
  display: flex;
  justify-content: center;
  min-height: 35px;
  border-radius: 0;
  color: hsla(0, 0%, 100%, 0.9);
  border: 1px solid #17313a;
  font-size: 14px;
  align-items: center;
  text-align: center;
  background: transparent;
  padding: 0 20px;
  border-radius: 3px;
  cursor: pointer;
}
.btn:hover {
  border: 1px solid #d47559;
  color: #fff;
}
.btn.secondary {
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  background: #4080b0;
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 2px 0 #0d202b;
  border-radius: 3px;
  transition: all 0.3s;
}
.btn.secondary:hover {
  background: #2c98d6;
  border: none;
}
.btn.disabled {
  cursor: auto;
}
.btn.disabled:hover {
  background: #4080b0;
}
.searchbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: border 0.3s;
  line-height: 1.1em;
  background: transparent;
  min-width: 300px;
  min-height: 35px;
  border: 1px solid #17313a;
  background: #102531;
  margin: 0;
  padding: 5px 10px;
}
.searchbar.player-search {
  align-self: center;
  flex-grow: 1;
  min-height: 0;
  padding: 0;
  margin: 0 150px;
  border-radius: 4px;
}
.searchbar.player-search .searchbar-icon {
  width: auto;
  cursor: pointer;
  transition: opacity 0.3s;
  padding: 0 15px;
  margin: 0;
}
.searchbar.player-search .searchbar-icon:hover {
  opacity: 1;
}
.searchbar.player-search .dropdown {
  margin-right: 10px;
}
.searchbar .searchbar-icon {
  width: 12px;
  height: 12px;
  margin-right: 15px;
  opacity: 0.8;
}
.searchbar .searchbar-input {
  color: hsla(0, 0%, 100%, 0.9);
  font-size: 14px;
  font-weight: 400;
  border: none;
  flex-grow: 1;
  outline: none;
  background: transparent;
  font-family: "sofia-pro", sans-serif;
}
.searchbar .searchbar-input::-webkit-input-placeholder {
  color: #88a0a7;
}
.searchbar .searchbar-input::-ms-input-placeholder {
  color: #88a0a7;
}
.searchbar .searchbar-input::placeholder {
  color: #88a0a7;
}
.searchbar .searchbar-close {
  width: 0;
  height: 0;
  opacity: 0;
  cursor: pointer;
  transition: all 0.3s;
}
.searchbar .searchbar-close.active {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}
.searchbar .searchbar-close.active:hover {
  opacity: 1;
}
.searchbar.focused {
  border: 1px solid #d47559;
}
.divider {
  display: block;
  width: 100%;
  height: 1px;
  background: #17313a;
  margin-top: 20px;
}
.lds-ring {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 50px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border: 8px solid transparent;
  border-top-color: #227aad;
}
.lds-ring div:first-child {
  -webkit-animation-delay: -0.45s;
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  -webkit-animation-delay: -0.15s;
  animation-delay: -0.15s;
}
@-webkit-keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
.notfound .notfound-body {
  margin-top: 20px;
}
.notfound .btn {
  min-width: 200px;
}
.news-list .divider {
  margin-bottom: 20px;
}
.newscard {
  background: #102531;
  border: 1px solid #17313a;
  padding-bottom: 20px;
  transition: all 0.3s;
  height: 100%;
}
.newscard img {
  width: 100%;
  margin-bottom: 25px;
}
.newscard h2,
.newscard p,
.newscard span {
  padding: 0 30px;
}
.newscard h2 {
  line-height: 1.3em;
  margin-bottom: 5px;
}
.newscard p {
  color: #88a0a7;
  margin: 0;
}
.newscard span {
  display: block;
}
.newscard:hover {
  border: 1px solid #d47559;
}
.home {
  padding: 0;
}
.home .row.dark {
  background: #102531;
}
.home .container {
  margin-bottom: 0;
}
.home h3 {
  display: inline-block;
  position: relative;
  padding: 0 10px 15px;
  margin: 60px 0 0;
}
.home h3:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #d47559;
}
.home .divider {
  margin: 0;
}
.home .home-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
  margin-bottom: 80px;
}
.home .home-header h1,
.home .home-header h2,
.home .home-header p {
  text-align: center;
}
.home .home-header h1 {
  margin-bottom: 5px;
}
.home .home-header h2 {
  margin-bottom: 20px;
  color: #d47559;
}
.home .home-header p {
  margin-bottom: 40px;
  color: #88a0a7;
}
.home .home-header .cta {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home .home-header .cta .cta-btn {
  margin-bottom: 10px;
}
.home .home-header .cta .cta-video {
  display: flex;
  align-self: center;
  font-size: 14px;
  color: #88a0a7;
  text-decoration: underline;
  cursor: pointer;
}
.home .home-header .cta .cta-video img {
  width: 14px;
  margin-top: 2px;
  margin-right: 5px;
  opacity: 0.54;
}
.home .home-app {
  padding: 60px 0;
}
.home .home-app.features {
  padding: 80px 0;
}
.home .home-app.alt {
  padding: 0;
}
.home .home-app.alt .divider {
  margin: 10px 0 25px;
}
.home .home-app .features-btn,
.home .home-app .tutorial-btn {
  margin: 0 auto;
}
.home .home-app .app-tutorial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 50px 0;
  padding: 0 50px;
}
.home .home-app .app-tutorial .tutorial-image {
  margin-bottom: 20px;
}
.home .home-app .app-tutorial h4 {
  font-family: "sofia-pro", sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3em;
  margin: 0 0 10px;
}
.home .home-app .app-tutorial p {
  line-height: 1.8em;
  margin: 0;
}
.home .home-app .tutorial-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.home .home-app .tutorial-title h2 {
  font-family: "sofia-pro", sans-serif;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3em;
  margin: 0 0 10px;
}
.home .home-app .app-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #123040;
  margin: 30px 10px 0;
  padding: 0;
  border-radius: 3px;
}
.home .home-app .app-features .divider {
  background: #102531;
}
.home .home-app .app-features h4 {
  font-family: "sofia-pro", sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3em;
  margin: 0;
  padding: 20px;
}
.home .home-app .app-features p {
  line-height: 1.8em;
  margin: 0;
  padding: 20px 20px 40px;
}
.home .home-app .features-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.home .home-app .features-title h2 {
  font-family: "sofia-pro", sans-serif;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3em;
  margin: 0 0 10px;
}
.home .home-app .app-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.home .home-app .app-info.left {
  padding-right: 80px;
}
.home .home-app .app-info.right {
  padding-left: 80px;
}
.home .home-app .app-info h2 {
  font-family: "sofia-pro", sans-serif;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3em;
  margin: 0 0 20px;
}
.home .home-app .app-info p {
  color: #88a0a7;
  line-height: 1.8em;
}
.home .home-app .app-info a {
  display: flex;
  align-items: center;
  color: #4080b0;
  font-weight: 600;
  margin: 2.5px 0;
}
.home .home-app .app-info a:hover {
  color: #97bdd9;
}
.home .home-app .app-info a img {
  width: 10px;
  margin-top: 2px;
  margin-left: 8px;
}
.home .home-app .app-info .cta,
.home .home-app .app-info .cta .btn-outer {
  margin: 0;
}
.home .home-app .app-image {
  position: relative;
  display: flex;
  align-items: center;
}
.home .home-app .app-image.left {
  justify-content: flex-start;
}
.home .home-app .app-image.left .image-full {
  transform: scale(1.05) perspective(2910px) rotateY(12deg) rotateX(3deg)
    rotate(-2deg);
  box-shadow: -20px 20px 60px #0a1a23;
}
.home .home-app .app-image.left .image-crop {
  right: 0;
  transform: translateY(-50%) scale(1.05) perspective(2910px) rotateY(12deg)
    rotateX(3deg) rotate(-2deg);
  box-shadow: -10px 10px 30px #0a1a23;
}
.home .home-app .app-image.right {
  justify-content: flex-end;
}
.home .home-app .app-image.right .image-full {
  transform: scale(1.05) perspective(2910px) rotateY(-12deg) rotateX(-3deg)
    rotate(2deg);
  box-shadow: 20px 20px 60px #0a1a23;
}
.home .home-app .app-image.right .image-crop {
  left: 0;
  transform: translateY(-50%) scale(1.05) perspective(2910px) rotateY(-12deg)
    rotateX(-3deg) rotate(2deg);
  box-shadow: 10px 10px 30px #0a1a23;
}
.home .home-app .app-image .image-crop,
.home .home-app .app-image .image-full {
  box-shadow: 0 13px 27px -5px #102531, 0 8px 16px -8px #102531,
    0 -6px 16px -6px #102531;
  border: 1px solid #17313a;
  border-radius: 3px;
}
.home .home-app .app-image .image-crop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.home .home-app .app-image .ezreal {
  width: 400px;
}
.home .home-news {
  margin-top: 30px;
}
.home .home-characters .characters-list .characters-item {
  width: 25%;
}
.sidebar .sidenav .sidenav-link,
.sidebar .sidenav a {
  display: inline;
  position: relative;
  color: #88a0a7;
  font-weight: 400;
  padding: 10px 0;
  margin: 10px 0;
  transition: all 0.3s;
  cursor: pointer;
}
.sidebar .sidenav .sidenav-link .sidenav-title:last-child(),
.sidebar .sidenav a .sidenav-title:last-child() {
  margin-bottom: 0;
}
.sidebar .sidenav .sidenav-link .sidenav-title:before,
.sidebar .sidenav a .sidenav-title:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0;
  height: 100%;
  background: #227aad;
  transition: all 0.3s;
}
.sidebar .sidenav .sidenav-link:hover .sidenav-title,
.sidebar .sidenav a:hover .sidenav-title {
  color: hsla(0, 0%, 100%, 0.9);
}
.sidebar .sidenav .sidenav-link.active .sidenav-title,
.sidebar .sidenav a.active .sidenav-title {
  color: hsla(0, 0%, 100%, 0.9);
  padding-left: 20px;
}
.sidebar .sidenav .sidenav-link.active .sidenav-title:before,
.sidebar .sidenav a.active .sidenav-title:before {
  width: 4px;
}
.sidebar .sidenav .sidenav-title {
  position: relative;
  color: #88a0a7;
  font-weight: 400;
  padding: 10px 0;
  margin: 10px 0;
  transition: all 0.3s;
  cursor: pointer;
}
.sidebar .sidenav .sidenav-title:last-child() {
  margin-bottom: 0;
}
.sidebar .sidenav .sidenav-title:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0;
  height: 100%;
  background: #227aad;
  transition: all 0.3s;
}
.sidebar .sidenav .sidenav-title:hover,
.sidebar .sidenav .sidenav-title:hover a {
  color: hsla(0, 0%, 100%, 0.9);
}
.sidebar .sidenav .sidenav-title.active {
  color: hsla(0, 0%, 100%, 0.9);
  padding-left: 20px;
}
.sidebar .sidenav .sidenav-title.active:before {
  width: 4px;
}
.sidebar .btn.expand {
  margin-top: 40px;
}
.footer {
  margin-top: auto;
  font-size: 15px;
  padding: 30px 0 0;
  background: #102531;
  border-top: 1px solid #17313a;
}
.footer .divider {
  margin: 20px 0;
}
.footer .dropdown {
  display: flex;
  flex-grow: 1;
  justify-content: center;
}
.footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
.footer .container .footer-about {
  color: hsla(0, 0%, 100%, 0.9);
  font-size: 14px;
  margin-bottom: 0;
  text-align: center;
  max-width: none;
}
.footer .container .footer-copyright {
  color: #88a0a7;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
  max-width: none;
}
.footer .container .footer-links {
  display: flex;
  align-items: center;
}
.footer .container .footer-links .switch {
  justify-content: center;
  font-weight: 400;
}
.footer .container .footer-links .cookies,
.footer .container .footer-links .switch,
.footer .container .footer-links a {
  text-align: center;
  color: #88a0a7;
  margin: 0 30px;
  transition: all 0.3s;
}
.footer .container .footer-links .cookies:hover,
.footer .container .footer-links .switch:hover,
.footer .container .footer-links a:hover {
  color: #fff;
}
.patch .post .page-header h1 {
  margin-bottom: 0;
}
.patch .post .page-header h4 {
  margin: 5px 0;
}
.patch .post .article {
  margin: 0;
}
.patch .post .article p {
  display: block;
  float: left;
}
.patch .post .article p img {
  width: 50px;
  height: 50px;
  display: block;
  float: left;
  margin-right: 20px;
  border: 1px solid #17313a;
}
.patch .post .article ol,
.patch .post .article ul {
  margin-bottom: 20px;
  clear: both;
}
.patch .post .article h2 {
  margin-top: 20px;
}
.patch .post .article hr {
  margin-bottom: 20px;
  clear: both;
}
.patch .post .article h3 {
  font-size: 18px;
  height: 50px;
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 0;
}
.patch .post .article h4,
.patch .post .article h4 img {
  max-width: 100%;
}
.post h1,
.post h2 {
  margin-bottom: 20px;
}
.post h2 {
  text-align: left;
}
.post ul {
  margin-bottom: 50px;
  padding-left: 30px;
}
.post ul li {
  color: #88a0a7;
  line-height: 1.8em;
  margin-bottom: 15px;
  list-style: disc outside none;
  list-style: initial;
}
.post ul li ul {
  margin-top: 20px;
}
.post ul li ul li {
  list-style-type: circle;
}
.post ol {
  margin-bottom: 50px;
  padding-left: 30px;
}
.post ol li {
  color: #88a0a7;
  line-height: 1.8em;
  margin-bottom: 15px;
}
.post ol li ul {
  margin-top: 20px;
}
.post .article {
  margin-top: 40px;
}
.post .article h2 {
  display: inline-block;
  position: relative;
  padding: 0 10px 15px;
  margin: 0;
}
.post .article h2:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #d47559;
}
.post .article h3 {
  margin-bottom: 20px;
}
.post .article h4 {
  margin-bottom: 10px;
}
.post .article hr {
  margin: 0 0 25px;
  border-top: 1px solid #17313a;
}
.mright-5 {
  margin-right: 10px;
}
.mb-50 {
  margin-bottom: 40px;
}
.mt-20 {
  margin-top: 20px;
}
.rc-tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  visibility: visible;
}
.rc-tooltip.ui-tooltip {
  max-width: 300px;
}
.rc-tooltip.ui-tooltip .rc-tooltip-inner {
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 3px;
}
.rc-tooltip .rc-tooltip-arrow {
  display: none;
}
.rc-tooltip .rc-tooltip-inner {
  padding: 10px 20px;
  color: hsla(0, 0%, 100%, 0.9);
  text-align: center;
  text-decoration: none;
  background-color: #123040;
  min-height: 35px;
  border: 1px solid #17313a;
}
.rc-tooltip-hidden {
  display: none;
}
.db-guide .characters-category {
  margin-bottom: 20px;
}
.db-guide ul li {
  margin: 10px 0;
}
.filters-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filters-title i.down {
  border: solid #88a0a7;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  transition: all 0.3s;
}
.filters-title.open i.down {
  transform: rotate(-135deg);
}
.table ul {
  color: #88a0a7;
}
.table p {
  max-width: none;
}
.table .table-bonus-list .table-bonus-heading {
  color: #88a0a7;
}
.table .table-bonus-list .table-bonus-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.table .table-bonus-list .table-bonus-item:first-child {
  margin-top: 0;
}
.table .table-bonus-list .table-bonus-item:last-child {
  margin-bottom: 0;
}
.table .table-bonus-list .table-bonus-item .table-bonus-count {
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #88a0a7;
  font-size: 14px;
  font-weight: 600;
  margin-right: 15px;
  border: 1px solid #17313a;
  border-radius: 100px;
  cursor: default;
}
.table .table-title {
  margin-bottom: 30px;
}
.table .ReactTable {
  margin-top: 20px;
  border: none;
}
.table .ReactTable .c1roll {
  background: #213042;
}
.table .ReactTable .c1roll div {
  color: #fff !important;
}
.table .ReactTable .c2roll {
  background: #156831;
}
.table .ReactTable .c2roll div {
  color: #fff !important;
}
.table .ReactTable .c3roll {
  background: #12407c;
}
.table .ReactTable .c3roll div {
  color: #fff !important;
}
.table .ReactTable .c4roll {
  background: #893088;
}
.table .ReactTable .c4roll div {
  color: #fff !important;
}
.table .ReactTable .c5roll {
  background: #b89d27;
}
.table .ReactTable .c5roll div {
  color: #fff !important;
}
.table .ReactTable a {
  display: flex;
  align-items: center;
}
.table .ReactTable a:hover img {
  border: 1px solid #d47559;
}
.table .ReactTable .table-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
}
.table .ReactTable .table-item:last-child {
  margin-right: 0;
}
.table .ReactTable .table-item .character-wrapper:hover .character-icon {
  border: 1px solid #d47559;
}
.table .ReactTable .characters-item {
  flex-direction: row;
  width: auto;
  padding: 0;
  justify-items: flex-start;
}
.table .ReactTable .characters-item .character-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  margin-right: 10px;
  padding: 0;
  transition: all 0.3s;
}
.table .ReactTable .characters-item .character-wrapper.c1 .character-icon {
  border: 1px solid #213042;
}
.table .ReactTable .characters-item .character-wrapper.c2 .character-icon {
  border: 1px solid #156831;
}
.table .ReactTable .characters-item .character-wrapper.c3 .character-icon {
  border: 1px solid #12407c;
}
.table .ReactTable .characters-item .character-wrapper.c4 .character-icon {
  border: 1px solid #893088;
}
.table .ReactTable .characters-item .character-wrapper.c5 .character-icon {
  border: 1px solid #b89d27;
}
.table .ReactTable .characters-item .character-wrapper.c7 .character-icon {
  border: 1px solid #b89d27;
  border-image: linear-gradient(
    to bottom right,
    #b827fc 0,
    #2c90fc 25%,
    #b8fd33 50%,
    #fec837 75%,
    #fd1892
  );
  border-image-slice: 1;
}
.table .ReactTable .characters-item .character-wrapper .character-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  float: left;
  transition: all 0.3s;
}
.table .ReactTable .characters-item.trait-table {
  width: 100%;
  cursor: default;
}
.table .ReactTable .characters-item.trait-table:first-child {
  margin-bottom: 10px;
}
.table .ReactTable .characters-item.trait-table:last-child {
  margin: 0;
}
.table
  .ReactTable
  .characters-item.trait-table
  .character-wrapper
  .character-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin-right: 10px;
  border: none;
}
.table .ReactTable img {
  width: 50px;
  height: 50px;
  border: 1px solid #17313a;
}
.table .ReactTable img.img-sm {
  width: 26px;
  height: 26px;
}
.table .ReactTable img.item-icon {
  width: 50px;
  height: 50px;
  padding: 4px;
}
.table .ReactTable .table-images {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
.table .ReactTable .table-images a {
  margin: 5px;
}
.table .ReactTable .table-images img {
  width: 30px;
  height: 30px;
}
.table .ReactTable .table-images .characters-item {
  justify-items: flex-start;
}
.table .ReactTable .table-images .characters-item .character-wrapper {
  margin-bottom: 0;
  margin-right: 0;
}
.table
  .ReactTable
  .table-images
  .characters-item
  .character-wrapper
  .character-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
}
.table .ReactTable .origin-icon,
.table .ReactTable .type-icon {
  width: 22px;
  height: 22px;
  margin-right: 10px;
}
.table .ReactTable .rt-table {
  font-size: 15px;
  background: #102531;
  border: 1px solid #17313a;
}
.table .ReactTable .rt-table .rt-thead {
  color: #88a0a7;
  text-align: left;
  font-size: 14px;
}
.table .ReactTable .rt-table .rt-thead .rt-tr {
  text-align: left;
}
.table .ReactTable .rt-table .rt-thead .rt-td,
.table .ReactTable .rt-table .rt-thead .rt-th {
  border: 0;
}
.table .ReactTable .rt-table .rt-thead .rt-td div,
.table .ReactTable .rt-table .rt-thead .rt-th div {
  font-weight: 600;
  color: #88a0a7;
}
.table .ReactTable .rt-table .rt-thead .rt-td.-sort-asc div,
.table .ReactTable .rt-table .rt-thead .rt-td.-sort-desc div,
.table .ReactTable .rt-table .rt-thead .rt-th.-sort-asc div,
.table .ReactTable .rt-table .rt-thead .rt-th.-sort-desc div {
  color: hsla(0, 0%, 100%, 0.9);
}
.table .ReactTable .rt-table .rt-thead .rt-td.-sort-asc,
.table .ReactTable .rt-table .rt-thead .rt-th.-sort-asc {
  box-shadow: inset 0 2px 0 0 #d47559;
}
.table .ReactTable .rt-table .rt-thead .rt-td.-sort-desc,
.table .ReactTable .rt-table .rt-thead .rt-th.-sort-desc {
  box-shadow: inset 0 -2px 0 0 #d47559;
}
.table .ReactTable .rt-table .rt-tbody {
  color: #88a0a7;
}
.table .ReactTable .rt-table .rt-tbody .rt-tr-group {
  border-top: 1px solid #17313a;
  border-bottom: none;
}
.table .ReactTable .rt-table .rt-tbody .rt-tr-group:hover .rt-tr {
  background: #0d202b;
}
.table .ReactTable .rt-table .rt-tbody .rt-td {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: none;
}
.table .ReactTable .rt-table .rt-thead .rt-td,
.table .ReactTable .rt-table .rt-thead .rt-th {
  padding: 10px;
  white-space: pre-wrap;
}
.table .ReactTable .rt-table .rt-thead .rt-td:first-child,
.table .ReactTable .rt-table .rt-thead .rt-th:first-child {
  padding-left: 20px;
}
.table .ReactTable .rt-table .rt-thead .rt-td:last-child,
.table .ReactTable .rt-table .rt-thead .rt-th:last-child {
  padding-right: 20px;
}
.table .ReactTable .rt-td,
.table .ReactTable .rt-th {
  padding: 10px;
  white-space: pre-wrap;
}
.table .ReactTable .rt-td:first-child,
.table .ReactTable .rt-th:first-child {
  padding-left: 20px;
}
.table .ReactTable .rt-td:last-child,
.table .ReactTable .rt-th:last-child {
  padding-right: 20px;
}
.table .ReactTable ul li {
  line-height: 1.8em;
  margin: 10px 0;
  font-size: 15px;
}
.table .ReactTable ul li:first-child {
  margin-top: 0;
}
.table .ReactTable ul li:last-child {
  margin-bottom: 0;
}
.table .ReactTable .rt-noData {
  display: none;
}
.table.db-stats .ReactTable .rt-table .rt-thead .rt-td:not(:first-child),
.table.db-stats .ReactTable .rt-table .rt-thead .rt-th:not(:first-child) {
  text-align: right;
}
.table.db-stats .ReactTable .rt-table .rt-tbody .rt-td:not(:first-child) {
  justify-content: flex-end;
}
.main-filters {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 10px 0 -10px;
  color: hsla(0, 0%, 100%, 0.9);
}
.main-filters .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  flex-grow: 1;
  max-width: calc(25% - 10px);
  text-align: center;
  background: #123040;
  padding: 10px;
  border-radius: 0;
  margin: 0 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.main-filters .tag:first-child {
  margin-left: 0;
}
.main-filters .tag:last-child {
  margin-right: 0;
}
.main-filters .tag:hover {
  color: hsla(0, 0%, 100%, 0.9);
  background: #1d4e68;
}
.main-filters .tag.active {
  background: #1d4e68;
}
.main-filters .filter-ranks {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-left: auto;
  cursor: pointer;
}
.main-filters .filter-ranks .filter-rank {
  width: 24px;
  margin-left: 5px;
  opacity: 0.5;
  transition: all 0.3s;
}
.main-filters .filter-ranks .filter-rank.active,
.main-filters .filter-ranks .filter-rank:hover {
  opacity: 1;
}
.main-filters .switch {
  margin-left: auto;
}
.character .gold-icon {
  margin-left: 5px;
  margin-right: 5px;
}
.character h1 {
  margin-bottom: 10px;
}
.db-champions .gold-icon {
  margin-right: 5px;
}
.selected .gold-icon {
  opacity: 1;
}
.gold-icon {
  width: 15px !important;
  height: auto !important;
  border: none !important;
  margin-right: 10px;
  opacity: 0.54;
  transition: opacity 0.3s;
}
.tier-group {
  color: hsla(0, 0%, 100%, 0.9);
}
.tierlist.teams .tier-group {
  background: none;
}
.update {
  color: hsla(0, 0%, 100%, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 15px;
  margin: -10px 0 10px;
}
.update b {
  color: #88a0a7;
}
.update .update-patch {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #123040;
  padding: 5px 10px;
  font-weight: 400;
  color: #88a0a7;
  margin: 5px;
  height: 35px;
}
.update .update-patch:first-child {
  margin-left: 0;
}
.update .update-patch:last-child {
  margin-right: 0;
  margin-left: 0 auto;
}
.update .legend {
  font-size: 15px;
}
.update .legend,
.update .legend .legend-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.update .legend .legend-item {
  margin-left: 10px;
  border-radius: 3px;
  background: #123040;
  padding: 5px 10px 5px 5px;
  font-weight: 400;
  color: #88a0a7;
  height: 35px;
}
.update .legend .legend-item .legend-down,
.update .legend .legend-item .legend-new,
.update .legend .legend-item .legend-up {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  width: 18px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1em;
  border-radius: 100px;
  margin-right: 5px;
  z-index: 2;
}
.update .legend .legend-item .legend-down {
  color: #ff7f7f;
}
.update .legend .legend-item .legend-up {
  font-family: serif;
  color: #bfff7f;
}
.update .legend .legend-item .legend-new {
  font-size: 10px;
  color: #ffdf7f;
}
.update .legend .legend-item img {
  width: 22px;
  height: 22px;
  background: #102531;
  border-radius: 100px;
  padding: 4px;
  margin-right: 5px;
  border: 1px solid #17313a;
}
.character-wrapper {
  align-content: flex-start;
}
.character-wrapper img {
  display: block;
}
.switch {
  display: flex;
  align-items: center;
  color: #88a0a7;
  margin: 0 15px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.3s;
}
.switch .switch-toggle {
  position: relative;
  display: block;
  width: 26px;
  height: 12px;
  background: #123040;
  border-radius: 100px;
  margin-left: 10px;
}
.switch .switch-toggle:before {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: hsla(0, 0%, 100%, 0.9);
  border-radius: 100px;
}
.switch.active .switch-toggle {
  background: #227aad;
}
.switch.active .switch-toggle:before {
  left: auto;
  right: 1px;
}
.classes .tier-group .characters-list .characters-item,
.races .tier-group .characters-list .characters-item {
  padding: 10px;
  width: 14.28%;
  justify-items: flex-start;
}
.classes .tier-group .characters-list .characters-item .character-wrapper,
.races .tier-group .characters-list .characters-item .character-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  flex-direction: column;
  font-size: 14px;
  color: #88a0a7;
}
.classes .tier-group .characters-list .characters-item .character-wrapper img,
.races .tier-group .characters-list .characters-item .character-wrapper img {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  margin-bottom: 2.5px;
}
.tier-group {
  display: flex;
  margin: 15px 0;
  background: #102531;
}
.tier-group .characters-category,
.tier-group .characters-list {
  margin: 0;
}
.tier-group .characters-category {
  min-width: 70px;
  min-height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tier-group .characters-category.tone {
  background: #ff7f7f;
}
.tier-group .characters-category.ttwo {
  background: #ffbf7f;
}
.tier-group .characters-category.tthree {
  background: #ffdf7f;
}
.tier-group .characters-category.tfour {
  background: #ffff7f;
}
.tier-group .characters-category.tfive {
  background: #bfff7f;
}
.tier-group .characters-category.tsix {
  background: #7fff7f;
}
.tier-group .characters-category h3 {
  color: #0d202b;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  border: none;
}
.tier-group .characters-list {
  min-height: 70px;
  height: 100%;
  flex-grow: 1;
  border: 1px solid #17313a;
  padding: 0;
}
.tier-group .characters-list .characters-item {
  padding: 0;
  width: 9.09%;
  justify-items: flex-start;
}
.tier-group .characters-list .characters-item .character-wrapper {
  width: 100%;
  height: 100%;
  padding: 5px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mr-0 {
  margin-right: 0;
}
.margin-5 {
  margin: 5px !important;
}
.margin-top-20 {
  margin-top: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 35px;
}
.filters-title {
  position: relative;
  color: #88a0a7;
  font-weight: 400;
  padding: 10px 0;
  transition: all 0.3s;
  margin-top: 10px;
  cursor: pointer;
}
.filters-title:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0;
  height: 100%;
  background: #227aad;
  transition: all 0.3s;
}
.filters-title.open {
  color: hsla(0, 0%, 100%, 0.9);
  padding-left: 20px;
}
.filters-title.open:before {
  width: 4px;
}
.filters-item,
.filters-title:hover {
  color: hsla(0, 0%, 100%, 0.9);
}
.filters-item {
  font-size: 15px;
  position: relative;
  padding: 7.5px 0;
  cursor: pointer;
  transition: all 0.3s;
}
.filters-item:first-child {
  padding-top: 15px;
}
.filters-item:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid hsla(0, 0%, 100%, 0.25);
  border-radius: 100px;
  transition: all 0.3s;
}
.filters-item:hover {
  color: #fff;
}
.filters-item:hover:before {
  border: 2px solid #88a0a7;
}
.filters-item.selected {
  color: #fff;
}
.filters-item.selected:before {
  border: 2px solid #227aad;
  background: #227aad;
}
.filters-item.selected .filters-icon {
  opacity: 1;
}
.filters-item .filters-icon {
  margin-right: 10px;
  width: 24px;
  opacity: 0.8;
}
.filter-list {
  display: none;
  flex-wrap: wrap;
  margin-top: 20px;
}
.filter-list .filter-tag {
  min-width: calc(25% - 10px);
  min-height: 35px;
  color: hsla(0, 0%, 100%, 0.9);
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 5px 10px;
  background: #d47559;
  border: 0;
  cursor: pointer;
}
.filter-list .filter-tag img {
  width: 14px;
  height: 14px;
  margin-left: 30px;
  opacity: 0.8;
}
.filter-list .filter-tag:hover {
  background: #de9782;
}
.filter-list .filter-tag:hover img {
  opacity: 1;
}
.filter-list.show {
  display: flex;
}
.page-header {
  justify-content: space-between;
  min-height: 35px;
}
.page-header,
.page-header h1 {
  display: flex;
  align-items: center;
}
.page-header h2 {
  margin: 0;
  line-height: 1.5em;
}
.tierlist.teams .tier-group {
  flex-direction: column;
}
.tierlist.teams .tier-group .team-tier-category {
  border: 1px solid #17313a;
}
.tierlist.teams .tier-group .team-tier-category h3 {
  position: relative;
  display: inline-block;
  padding: 15px 20px;
  color: #0d202b;
}
.tierlist.teams .tier-group .characters-list {
  border: none;
  margin-bottom: 15px;
  min-height: 0;
}
.tierlist.teams .tier-group .characters-list .team-portrait {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid #17313a;
  cursor: pointer;
  margin: 7.5px 0;
  background: #102531;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tierlist.teams .tier-group .characters-list .team-portrait:first-child {
  margin-top: 0;
}
.tierlist.teams .tier-group .characters-list .team-portrait.down .team-name,
.tierlist.teams .tier-group .characters-list .team-portrait.new .team-name,
.tierlist.teams .tier-group .characters-list .team-portrait.up .team-name {
  position: relative;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait.down
  .team-name:before,
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait.new
  .team-name:before,
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait.up
  .team-name:before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #102531;
  border: 1px solid #17313a;
  font-size: 20px;
  width: 18px;
  height: 18px;
  padding: 10px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1em;
  border-radius: 100px;
  z-index: 2;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait.down
  .team-name:before {
  content: "▾";
  color: #ff7f7f;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait.up
  .team-name:before {
  font-family: serif;
  content: "▴";
  color: #bfff7f;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait.new
  .team-name:before {
  content: "N";
  font-size: 10px;
  color: #ffdf7f;
}
.tierlist.teams .tier-group .characters-list .team-portrait:hover {
  background: #102531;
}
.tierlist.teams .tier-group .characters-list .team-portrait.open {
  color: hsla(0, 0%, 100%, 0.9);
  background: #102531;
  border-color: #227aad;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait.open
  .team-more
  i.down {
  transform: rotate(-135deg);
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait.open
  .team-expanded {
  border-top: 1px solid #17313a;
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-playstyle {
  display: flex;
  align-items: center;
  color: #88a0a7;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.05em;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-playstyle
  .info-icon {
  width: 10px;
  opacity: 0.54;
  margin-left: 5px;
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-stats {
  width: 100%;
  background: #0d202b;
  border-top: 1px solid #17313a;
  display: flex;
  align-items: center;
  padding: 5px 20px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-stats
  .team-stat {
  text-align: center;
  flex-grow: 1;
  font-size: 14px;
  color: #88a0a7;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-stats
  .team-stat
  span {
  color: hsla(0, 0%, 100%, 0.9);
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-more i {
  width: 8px;
  height: 8px;
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-more i.down {
  border: solid #88a0a7;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-expanded {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  transition: all 0.5s;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group {
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 33.33%;
  border-bottom: 1px solid #17313a;
  border-right: 1px solid #17313a;
  text-align: center;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group
  .team-expanded-list {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group
  .team-expanded-list
  .characters-item {
  width: auto;
  justify-items: flex-start;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group
  .team-expanded-list
  .characters-item
  .character-wrapper
  .character-icon {
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group
  .team-expanded-title {
  padding: 0 5px;
  color: #88a0a7;
  font-size: 13px;
  font-weight: 400;
  z-index: 1;
  order: -1;
  margin-bottom: 5px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group.mid
  .team-expanded-list {
  justify-content: center;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group.items
  .team-expanded-list
  .characters-item
  .character-wrapper
  .character-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group.builder {
  flex-grow: 1;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group.positioning {
  width: 50%;
  justify-content: center;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group.options {
  width: 50%;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-expanded
  .team-expanded-group.options
  .team-expanded-list {
  flex-direction: column;
}
.tierlist.teams .tier-group .characters-list .team-portrait .carousel-items {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .carousel-items
  .carousel-component {
  position: relative;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .carousel-items
  .carousel-component
  .carousel-full {
  position: absolute;
  bottom: 0;
  right: 0;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .carousel-items
  .carousel-component
  .carousel-full
  .characters-item
  .character-wrapper {
  padding: 0 !important;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .carousel-items
  .carousel-component
  .carousel-full
  .characters-item
  .character-wrapper
  .character-icon {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
}
.tierlist.teams .tier-group .characters-list .team-portrait .carousel-items i {
  width: 8px;
  height: 8px;
  margin: 0 10px 0 5px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .carousel-items
  i.down {
  border: solid #88a0a7;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  transition: all 0.3s;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .carousel-items
  i:last-child {
  display: none;
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-option {
  display: flex;
  align-items: center;
  width: 100%;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-option
  .option-in {
  justify-content: flex-start;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-option
  .option-out {
  justify-content: flex-end;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-option
  .option-in,
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-option
  .option-out {
  display: flex;
  width: calc(50% - 10px);
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-option i {
  width: 8px;
  height: 8px;
  margin: 0 10px 0 5px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-option
  i.down {
  border: solid #88a0a7;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  transition: all 0.3s;
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-positioning {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-positioning
  #hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  overflow: hidden;
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  list-style-type: none;
  padding-bottom: 3%;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-positioning
  #hexGrid
  .hex {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  width: 12%;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-positioning
  #hexGrid
  .hex:after {
  content: "";
  display: block;
  padding-bottom: 90%;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-positioning
  #hexGrid
  .hex
  .hexIn {
  position: absolute;
  width: 90%;
  padding-bottom: 103.923%;
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  transform: rotate(-60deg) skewY(30deg);
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-positioning
  #hexGrid
  .hex
  .hexIn
  .hexLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  background: #123040;
  overflow: hidden;
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  transform: skewY(-30deg) rotate(60deg);
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-positioning
  #hexGrid
  .hex
  .hexIn
  .hexLink
  .characters-item {
  position: absolute;
  left: -100%;
  right: -100%;
  width: 110%;
  height: 110%;
  margin: 0 auto;
  justify-items: flex-start;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-positioning
  #hexGrid
  .hex
  .hexIn
  .hexLink
  .characters-item
  .character-wrapper
  .character-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-positioning
  #hexGrid.four-row
  .hex:nth-child(14n + 8),
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-positioning
  #hexGrid.three-row
  .hex:nth-child(14n + 1) {
  margin-left: 6%;
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-name {
  width: 35%;
  min-width: 35%;
  display: flex;
  align-items: center;
  line-height: 1.3em;
  font-size: 15px;
  padding: 15px 15px 15px 20px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-name
  .team-rank {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  padding: 5px;
  margin-right: 20px;
  color: #0d202b;
  font-weight: 600;
  border-radius: 2.5px;
  cursor: default;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-name
  .team-rank.tone {
  background: #ff7f7f;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-name
  .team-rank.ttwo {
  background: #ffbf7f;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-name
  .team-rank.tthree {
  background: #ffdf7f;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-name
  .team-rank.tfour {
  background: #ffff7f;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-name
  .team-rank.tfive {
  background: #bfff7f;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-name
  .team-synergy {
  display: flex;
  margin-bottom: 5px;
}
.tierlist.teams .tier-group .characters-list .team-portrait .team-characters {
  width: calc(65% - 40px);
  min-width: calc(65% - 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 0;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-characters
  .characters-item {
  position: relative;
  width: auto;
  justify-items: flex-start;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-characters
  .characters-item.chosen
  .character-wrapper
  .character-icon {
  outline: 3px solid #c45dd6;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-characters
  .characters-item.chosen
  .characters-item
  .character-wrapper
  .character-icon {
  outline: none;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-characters
  .characters-item
  .character-wrapper
  .character-icon {
  width: 45px;
  height: 45px;
  min-width: 45px;
  min-height: 45px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-characters
  .characters-item
  .character-items {
  position: absolute;
  display: flex;
  top: calc(100% - 14px);
  left: 50%;
  transform: translateX(-50%);
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-characters
  .characters-item
  .character-items
  .characters-item {
  justify-items: flex-start;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-characters
  .characters-item
  .character-items
  .characters-item
  .character-wrapper {
  padding: 0;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .team-characters
  .characters-item
  .character-items
  .characters-item
  .character-wrapper
  .character-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-color: #17313a;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus {
  height: 100%;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin: 0;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list {
  margin: 0;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item {
  width: 36px;
  margin: 4px 6px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  width: 28px;
  height: 18px;
  margin: 6.93px 0;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon:after,
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon:before {
  content: "";
  position: absolute;
  width: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  z-index: 1;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon:before {
  bottom: 100%;
  border-bottom: 6.93px solid transparent;
  border-left-width: 14px;
  border-right-width: 14px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon:after {
  top: 100%;
  width: 0;
  border-top: 6.93px solid transparent;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon
  img {
  width: 20px;
  z-index: 2;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon
  .builder-bonus-counter {
  top: 50%;
  left: calc(100% - 4px);
  transform: translateY(-50%);
  height: 20px;
  width: 18px;
  font-size: 13px;
  border: none;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-count {
  display: none;
  height: 40px;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.bronze
  .builder-bonus-icon {
  background: #6f4939;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.bronze
  .builder-bonus-icon:after,
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.bronze
  .builder-bonus-icon:before {
  border-bottom-color: #6f4939;
  border-top-color: #6f4939;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.bronze
  .builder-bonus-icon
  .builder-bonus-counter {
  background: #6f4939;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.silver
  .builder-bonus-icon {
  background: #6b6b6b;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.silver
  .builder-bonus-icon:after,
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.silver
  .builder-bonus-icon:before {
  border-bottom-color: #6b6b6b;
  border-top-color: #6b6b6b;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.silver
  .builder-bonus-icon
  .builder-bonus-counter {
  background: #6b6b6b;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.gold
  .builder-bonus-icon {
  background: #a27208;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.gold
  .builder-bonus-icon:after,
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.gold
  .builder-bonus-icon:before {
  border-bottom-color: #a27208;
  border-top-color: #a27208;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.gold
  .builder-bonus-icon
  .builder-bonus-counter {
  background: #a27208;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.chosen
  .builder-bonus-icon {
  background: #c45dd6 !important;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.chosen
  .builder-bonus-icon:after,
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.chosen
  .builder-bonus-icon:before {
  border-bottom-color: #c45dd6 !important;
  border-top-color: #c45dd6 !important;
}
.tierlist.teams
  .tier-group
  .characters-list
  .team-portrait
  .builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.chosen
  .builder-bonus-icon
  .builder-bonus-counter {
  background: #c45dd6 !important;
}
.trait-chosen {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.3;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  z-index: 5;
  cursor: pointer;
}
.trait-chosen.active {
  opacity: 1;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
.meta-report .meta-banner {
  width: 100%;
  margin-top: 20px;
  border: 1px solid #17313a;
}
.meta-report .meta-title {
  text-align: left;
  display: inline-block;
  position: relative;
  padding: 0 10px 15px;
  margin-top: 20px;
}
.meta-report .meta-title:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #b2935d;
}
.meta-report hr {
  width: 100%;
  margin: 0 0 25px;
  border-top: 1px solid #1f1f1f;
}
.legends-list {
  display: flex;
  flex-wrap: wrap;
}
.legends-list .legends-list-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  width: 50%;
}
.legends-list .legends-list-group .legends-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.legends-list .legends-list-group .legends-item img {
  width: calc(33.33% - 10px);
  border: 1px solid #17313a;
  margin: 5px;
}
.legends-list .legends-list-group .legends-name {
  color: #88a0a7;
  margin: 5px;
}
.characters-tier .sidebar .searchbar {
  margin-top: 20px;
  margin-bottom: 17.5px;
}
.characters-tier .sidebar .characters-list .characters-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5px 7.5px;
  width: 16.66%;
  opacity: 1;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  overflow: hidden;
  transition: all 0.3s;
  justify-items: flex-start;
}
.characters-tier
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper
  .character-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  float: left;
  transition: all 0.3s;
  cursor: pointer;
}
.characters-tier .tier-group .characters-item {
  width: 9.09%;
  justify-items: flex-start;
}
.characters-tier
  .tier-group
  .characters-item
  .character-wrapper
  .character-icon {
  width: 45px;
  height: 45px;
  min-width: 45px;
  min-height: 45px;
}
.characters-category {
  border-bottom: 1px solid #17313a;
  margin-top: 20px;
}
.characters-category h3 {
  padding: 0 10px 10px;
  display: inline-block;
  border-bottom: 4px solid #d47559;
}
.characters-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
a.characters-item {
  cursor: pointer;
  justify-items: flex-start;
}
a.characters-item:hover .character-wrapper .character-icon {
  border: 1px solid #d47559;
}
a.characters-item:hover .character-name {
  color: #fff;
}
.characters-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12.5%;
  padding: 10px 15px;
  justify-items: flex-start;
}
.characters-item .character-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  transition: all 0.3s;
}
.characters-item .character-wrapper .character-icon {
  width: 55px;
  height: 55px;
  min-width: 55px;
  min-height: 55px;
  border: 1px solid #17313a;
  vertical-align: initial;
  transition: all 0.3s;
}
.characters-item .character-wrapper .character-synergies {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.characters-item .character-wrapper .character-synergies .character-origin,
.characters-item .character-wrapper .character-synergies .character-type {
  width: 26px;
  background: #123040;
  border-radius: 100px;
  padding: 3px;
}
.characters-item .character-name {
  font-size: 14px;
  text-align: center;
  color: #88a0a7;
  line-height: 1.3em;
  margin: 0;
  transition: all 0.3s;
}
.characters-item.buff,
.characters-item.nerf,
.characters-item.new,
.characters-item.soon,
.characters-item.updated {
  position: relative;
}
.characters-item.buff:before,
.characters-item.nerf:before,
.characters-item.new:before,
.characters-item.soon:before,
.characters-item.updated:before {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 17px;
  font-size: 11px;
  font-weight: 600;
  color: hsla(0, 0%, 100%, 0.9);
  text-transform: uppercase;
  line-height: 1em;
  padding: 5px;
  z-index: 5;
  border-radius: 2.5px;
}
.characters-item.soon:before {
  content: "SOON";
  background: #683ab7;
}
.characters-item.new:before {
  content: "NEW";
  background: #2195f3;
}
.characters-item.updated:before {
  content: "UPDATE";
  background: #f90;
}
.characters-item.buff:before {
  content: "BUFF";
  background: #4caf50;
}
.characters-item.nerf:before {
  content: "NERF";
  background: rgba(244, 67, 54, 0.815686);
}
.characters-item.down,
.characters-item.up {
  position: relative;
}
.characters-item.down:before,
.characters-item.up:before {
  position: absolute;
  top: 2px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #102531;
  border: 1px solid #17313a;
  font-size: 20px;
  width: 18px;
  height: 18px;
  padding: 10px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1em;
  border-radius: 100px;
  z-index: 2;
}
.characters-item.up:before {
  font-family: serif;
  content: "▴";
  color: #bfff7f;
}
.characters-item.down:before {
  content: "▾";
  color: #ff7f7f;
}
.characters-item.rank img {
  height: auto;
  border: none;
}
.characters-item.c1 .character-wrapper img {
  border: 1px solid #213042;
}
.characters-item.c2 .character-wrapper img {
  border: 1px solid #156831;
}
.characters-item.c3 .character-wrapper img {
  border: 1px solid #12407c;
}
.characters-item.c4 .character-wrapper img {
  border: 1px solid #893088;
}
.characters-item.c5 .character-wrapper img {
  border: 1px solid #b89d27;
}
.characters-item.c7 .character-wrapper img {
  border: 1px solid #b89d27;
  border-image: linear-gradient(
    to bottom right,
    #b827fc 0,
    #2c90fc 25%,
    #b8fd33 50%,
    #fec837 75%,
    #fd1892
  );
  border-image-slice: 1;
}
.characters-item.c7 .characters-item .character-wrapper img {
  border-image: none;
}
.bold {
  font-weight: 400;
  color: #88a0a7;
}
.tierlist .sidenav {
  margin-bottom: 20px;
}
.tierlist .extra-filters {
  margin-top: 40px;
}
.tierlist .tier-link {
  margin-top: 20px;
}
.tierlist.classes .characters-item,
.tierlist.races .characters-item {
  width: 10%;
  justify-items: flex-start;
}
.tierlist.classes .characters-item .character-icon,
.tierlist.races .characters-item .character-icon {
  width: 45px;
  height: 45px;
  min-width: 45px;
  min-height: 45px;
  border: none;
}
.tierlist.classes .characters-item:hover .character-icon,
.tierlist.races .characters-item:hover .character-icon {
  border: none;
}
.character .character-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}
.character .character-portrait .character-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 200px;
  overflow: hidden;
  border: 1px solid #17313a;
  margin-bottom: 10px;
}
.character .character-portrait .character-wrapper .character-image {
  min-width: 120px;
  width: 120px;
  height: 120px;
}
.character .character-portrait h1 {
  max-width: 200px;
  margin: 0;
}
.character .character-portrait h3 {
  color: #88a0a7;
}
.character .character-portrait p {
  margin-bottom: 0;
}
.character .character-portrait .character-summary {
  padding: 5px 0;
  background: #2c3243;
  border-radius: 100px;
  min-width: 120px;
  display: flex;
  justify-content: space-between;
  margin-top: -45px;
  margin-bottom: 20px;
}
.character .character-portrait .character-summary img {
  margin: 0 5px;
}
.character .character-portrait .character-summary p {
  margin: 0;
}
.character .character-items .items-list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 3px;
  background: #102531;
  border: 1px solid #17313a;
  padding: 10px;
}
.character .character-items .items-list .characters-item {
  width: auto;
  padding: 0;
  justify-items: flex-start;
}
.character .character-items .items-list .characters-item .character-wrapper {
  margin: 0;
}
.character
  .character-items
  .items-list
  .characters-item
  .character-wrapper
  .character-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0 10px;
}
.character .character-stats .stats-list {
  margin-bottom: 40px;
}
.character .character-stats .stats-list li {
  margin: 10px 0;
  line-height: 1.5em;
}
.character .character-stats .stats-list li:first-child {
  margin-top: 0;
}
.character .character-stats .stats-list li:last-child {
  margin-bottom: 0;
}
.character .character-ability {
  display: flex;
  background: #102531;
  padding: 20px;
  border-radius: 3px;
  margin-bottom: 20px;
  border: 1px solid #17313a;
}
.character .character-ability .ability-image {
  width: 60px;
  min-width: 60px;
  height: 60px;
  padding: 2px;
  border: 1px solid #17313a;
}
.character .character-ability .misc-image {
  width: 32px;
  height: 32px;
}
.character .character-ability .ability-description {
  color: hsla(0, 0%, 100%, 0.9);
  margin-left: 30px;
  width: 100%;
}
.character .character-ability .ability-description h2 {
  margin-bottom: 5px;
}
.character .character-ability .ability-description .ability-description-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.character
  .character-ability
  .ability-description
  .ability-description-header
  .ability-description-name
  h2 {
  margin-bottom: 10px;
}
.character
  .character-ability
  .ability-description
  .ability-description-header
  .ability-description-cost {
  display: flex;
  align-items: center;
}
.character
  .character-ability
  .ability-description
  .ability-description-header
  .ability-description-cost
  img {
  width: 16px;
  margin-right: 5px;
}
.character
  .character-ability
  .ability-description
  .ability-description-header
  .ability-description-cost
  b {
  font-size: 18px;
}
.character
  .character-ability
  .ability-description
  .ability-description-header
  .ability-description-cost
  span {
  font-size: 14px;
}
.character .character-ability .ability-description .ability-list li {
  line-height: 1.8em;
  margin: 5px 0;
}
.character
  .character-ability
  .ability-description
  .ability-list
  li:first-child {
  margin-top: 0;
}
.character .character-ability .ability-description .ability-list li:last-child {
  margin-bottom: 0;
}
.character .character-ability .ability-description .ability-bonus-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.character
  .character-ability
  .ability-description
  .ability-bonus-item:first-child {
  margin-top: 0;
}
.character
  .character-ability
  .ability-description
  .ability-bonus-item:last-child {
  margin-bottom: 0;
}
.character
  .character-ability
  .ability-description
  .ability-bonus-item
  .ability-bonus-count {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #88a0a7;
  font-weight: 600;
  margin-right: 15px;
  border: 1px solid #17313a;
  border-radius: 100px;
  cursor: default;
}
.character .synergy-list {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  padding: 20px;
  background: #102531;
  border: 1px solid #17313a;
  border-radius: 3px;
}
.character .synergy-list:last-child {
  margin-bottom: 0;
}
.character .synergy-list .misc-image {
  width: 28px;
  height: 28px;
  margin-right: 20px;
}
.character .synergy-list .characters-list {
  margin: 0;
  flex-grow: 1;
}
.character .synergy-list .characters-list .characters-item {
  width: 10%;
  padding: 5px 10px;
  justify-items: flex-start;
}
.character .synergy-list .characters-list .characters-item .character-wrapper {
  margin: 0;
}
.character
  .synergy-list
  .characters-list
  .characters-item
  .character-wrapper
  .character-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
}
.character .character-patch {
  font-weight: 700;
  line-height: 1.5em;
}
.character .character-patch.buff {
  color: #4caf50;
}
.character .character-patch.nerf {
  color: rgba(244, 67, 54, 0.815686);
}
.character .character-patch .character-patch-notes {
  color: hsla(0, 0%, 100%, 0.9);
  font-weight: 400;
  margin: 5px 0 5px 30px;
  list-style: disc;
}
.character .character-header {
  display: inline-block;
  padding: 0 10px 15px;
  border-bottom: 4px solid #d47559;
  margin: 0;
}
.character .divider {
  display: block;
  margin: 0 0 20px;
}
.item-builder .item-builder-header {
  margin-top: 20px;
  display: flex;
  align-items: center;
  color: hsla(0, 0%, 100%, 0.9);
}
.item-builder .item-builder-header img {
  width: 30px;
  height: 30px;
  margin-right: 15px;
  border: 1px solid #17313a;
}
.item-builder .item-builder-header .switch {
  margin-left: auto;
}
.item-builder .main-filters {
  margin-bottom: 20px;
}
.item-builder .main-filters .tag {
  max-width: calc(50% - 10px);
}
.item-builder .searchbar {
  min-width: 100%;
  margin: 20px 0;
}
.item-builder .sidebar .characters-list .characters-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px;
  width: 16.67%;
  justify-items: flex-start;
}
.item-builder .sidebar .characters-list .characters-item .character-wrapper {
  cursor: pointer;
  margin-bottom: 0;
}
.item-builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper
  .character-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  opacity: 0.5;
  transition: all 0.3s;
}
.item-builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper
  .character-icon.selected,
.item-builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper:hover
  .character-icon {
  opacity: 1;
  border: 1px solid #d47559;
}
.item-builder .item-bonus {
  margin-left: 10px;
}
.item-builder .table .ReactTable .characters-item {
  justify-items: flex-start;
}
.item-builder .table .ReactTable .characters-item .character-wrapper {
  cursor: pointer;
}
.item-builder
  .table
  .ReactTable
  .characters-item
  .character-wrapper
  .character-icon {
  width: 35px;
  height: 35px;
  min-width: 35px;
  min-height: 35px;
  transition: all 0.3s;
}
.item-builder
  .table
  .ReactTable
  .characters-item
  .character-wrapper:hover
  .character-icon {
  opacity: 1;
  border: 1px solid #d47559;
}
.item-builder .table .ReactTable .table-tier {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  padding: 5px;
  color: #0d202b;
  font-weight: 600;
  border-radius: 2.5px;
  cursor: default;
}
.item-builder .table .ReactTable .table-tier.\31 {
  background: #ff7f7f;
}
.item-builder .table .ReactTable .table-tier.\32 {
  background: #ffbf7f;
}
.item-builder .table .ReactTable .table-tier.\33 {
  background: #ffdf7f;
}
.item-builder .table .ReactTable .table-tier.\34 {
  background: #ffff7f;
}
.item-builder .table .ReactTable .table-tier.\35 {
  background: #bfff7f;
}
.item-builder .table .ReactTable .table-tier.\36 {
  background: #7fff7f;
}
.lv9 {
  padding: 4px 10px;
  border-radius: 3px;
  background: #123040;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.builder {
  color: hsla(0, 0%, 100%, 0.9);
}
.builder .characters-category h3 {
  width: 50%;
  text-align: center;
  border-bottom: 0 solid transparent;
  cursor: pointer;
}
.builder .characters-category h3.active {
  border-bottom: 4px solid #d47559;
}
.builder .searchbar {
  min-width: 100%;
  margin: 20px 0;
}
.builder .sidebar .characters-list {
  margin-top: 7.5px;
}
.builder .sidebar .characters-list .characters-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px;
  width: 16.67%;
  opacity: 1;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  overflow: hidden;
  transition: all 0.3s;
  justify-items: flex-start;
}
.builder .sidebar .characters-list .characters-item .character-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  transition: all 0.3s;
  cursor: pointer;
}
.builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper.c1
  .character-icon {
  border: 1px solid #213042;
}
.builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper.c2
  .character-icon {
  border: 1px solid #156831;
}
.builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper.c3
  .character-icon {
  border: 1px solid #12407c;
}
.builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper.c4
  .character-icon {
  border: 1px solid #893088;
}
.builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper.c5
  .character-icon {
  border: 1px solid #b89d27;
}
.builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper.c7
  .character-icon {
  border: 1px solid #b89d27;
  border-image: linear-gradient(
    to bottom right,
    #b827fc 0,
    #2c90fc 25%,
    #b8fd33 50%,
    #fec837 75%,
    #fd1892
  );
  border-image-slice: 1;
}
.builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper.selected {
  opacity: 0.5;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
.builder
  .sidebar
  .characters-list
  .characters-item
  .character-wrapper
  .character-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  float: left;
  transition: all 0.3s;
}
.builder .sidebar .characters-category {
  margin-top: 7.5px;
}
.builder .btns {
  display: flex;
}
.builder .btns .btn:last-child {
  margin-left: 20px;
}
.builder .characters-list.team {
  align-items: flex-start;
  min-height: 250px;
  margin-bottom: 40px;
}
.builder .characters-list.team .builder-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  width: 100%;
  height: 230px;
  text-align: center;
  border: 1px solid #ff7f7f;
  margin: 20px auto 0;
}
.builder .characters-list.team .characters-item {
  width: 20%;
  justify-items: flex-start;
  cursor: pointer;
}
.builder
  .characters-list.team
  .characters-item
  .character-wrapper.c1
  .character-icon {
  border: 1px solid #213042;
}
.builder
  .characters-list.team
  .characters-item
  .character-wrapper.c2
  .character-icon {
  border: 1px solid #156831;
}
.builder
  .characters-list.team
  .characters-item
  .character-wrapper.c3
  .character-icon {
  border: 1px solid #12407c;
}
.builder
  .characters-list.team
  .characters-item
  .character-wrapper.c4
  .character-icon {
  border: 1px solid #893088;
}
.builder
  .characters-list.team
  .characters-item
  .character-wrapper.c5
  .character-icon {
  border: 1px solid #b89d27;
}
.builder
  .characters-list.team
  .characters-item
  .character-wrapper.c7
  .character-icon {
  border: 1px solid #b89d27;
  border-image: linear-gradient(
    to bottom right,
    #b827fc 0,
    #2c90fc 25%,
    #b8fd33 50%,
    #fec837 75%,
    #fd1892
  );
  border-image-slice: 1;
}
.builder
  .characters-list.team
  .characters-item
  .character-wrapper:hover
  .character-icon {
  border: 1px solid #ff7f7f;
}
.builder .builder-error {
  position: absolute;
  bottom: calc(100% - 5px);
  left: 0;
  width: auto;
  color: #e23f3f;
  background: rgba(226, 63, 63, 0.25);
  border-radius: 3px;
  margin: 20px 0;
  text-align: center;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 600;
}
.builder .board-full {
  display: flex;
  padding: 30px 0;
  align-items: flex-start;
}
.builder .board-full .builder-portrait {
  opacity: 0.15;
}
.builder .board-full .builder-portrait.active {
  opacity: 1;
}
.builder .board-full .drag-zone {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-grow: 1;
  margin-top: 70px;
  margin-left: 20px;
}
.builder .board-full .drag-zone .list-tools {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #17313a;
}
.builder .board-full .drag-zone .list-tools .searchbar {
  flex-grow: 1;
  min-width: auto;
  margin: 0;
  background: #102531;
  border: none;
}
.builder .board-full .drag-zone .list-tools .list-sort {
  border-left: 1px solid #17313a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #88a0a7;
  padding: 5px 10px;
  cursor: pointer;
  width: 50px;
}
.builder .board-full .drag-zone .list-tools .list-sort.active {
  background: #123040;
  color: hsla(0, 0%, 100%, 0.9);
}
.builder .board-full .drag-zone .list-tools .list-sort.active img {
  opacity: 1;
}
.builder .board-full .drag-zone .list-tools .list-sort img {
  width: 16px;
  opacity: 0.54;
}
.builder .board-full .drag-zone .list-tools .list-types {
  width: 100%;
  display: flex;
  border-top: 1px solid #17313a;
}
.builder .board-full .drag-zone .list-tools .list-types .list-type {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #88a0a7;
  padding: 5px 10px;
  cursor: pointer;
}
.builder .board-full .drag-zone .list-tools .list-types .list-type:first-child {
  border-right: 1px solid #17313a;
}
.builder .board-full .drag-zone .list-tools .list-types .list-type.active {
  background: #123040;
  color: hsla(0, 0%, 100%, 0.9);
}
.builder .board-full .drag-zone .searchbar {
  margin: 0;
  background: #102531;
  border: none;
}
.builder .board-full .drag-zone .characters-list {
  align-content: flex-start;
  margin: 0;
  background: #102531;
  border: 1px solid #17313a;
}
.builder .board-full .drag-zone .characters-list .characters-list-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}
.builder .board-full .drag-zone .characters-list.champions {
  width: calc(70% - 20px);
}
.builder .board-full .drag-zone .characters-list.champions .characters-item {
  width: 10%;
  padding: 5px;
  cursor: pointer;
}
.builder
  .board-full
  .drag-zone
  .characters-list.champions
  .characters-item
  .character-wrapper {
  margin: 0;
}
.builder
  .board-full
  .drag-zone
  .characters-list.champions
  .characters-item
  .character-wrapper
  .character-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
}
.builder .board-full .drag-zone .characters-list.items {
  width: 30%;
}
.builder .board-full .drag-zone .characters-list.items .characters-item {
  width: 16.66%;
  padding: 5px;
  cursor: pointer;
}
.builder
  .board-full
  .drag-zone
  .characters-list.items
  .characters-item
  .character-wrapper {
  margin: 0;
}
.builder
  .board-full
  .drag-zone
  .characters-list.items
  .characters-item
  .character-wrapper
  .character-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
}
.builder .board-full .team-item {
  width: 100%;
  display: flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  color: #88a0a7;
  font-weight: 600;
  margin-bottom: 9px;
  background: #102531;
  border-radius: 3px;
  border: 1px solid #17313a;
  padding: 2px;
}
.builder .board-full .team-item.alt {
  background: #123040;
}
.builder .board-full .team-item .item-final {
  justify-content: flex-end;
}
.builder .board-full .team-item .item-components {
  justify-content: flex-start;
}
.builder .board-full .team-item .item-list {
  display: flex;
  flex-wrap: wrap;
}
.builder .board-full .team-item .item-list .characters-item {
  width: auto;
  padding: 2.5px;
}
.builder .board-full .team-item .item-list .characters-item .character-wrapper {
  margin: 0;
}
.builder
  .board-full
  .team-item
  .item-list
  .characters-item
  .character-wrapper
  .character-icon {
  width: 27px;
  height: 27px;
  min-width: 27px;
  min-height: 27px;
}
.builder .board-full .team-item .item-final {
  display: flex;
  margin-right: 5px;
}
.builder .board-full .team-item .item-final .characters-item {
  width: auto;
  padding: 5px;
}
.builder
  .board-full
  .team-item
  .item-final
  .characters-item
  .character-wrapper {
  margin: 0;
}
.builder
  .board-full
  .team-item
  .item-final
  .characters-item
  .character-wrapper
  .character-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
}
.builder .board-full .team-item .item-components {
  display: flex;
  margin-left: 5px;
  padding: 2.5px;
}
.builder .board-full .team-item .item-components .characters-item {
  width: auto;
  padding: 2.5px;
}
.builder
  .board-full
  .team-item
  .item-components
  .characters-item
  .character-wrapper {
  margin: 0;
}
.builder
  .board-full
  .team-item
  .item-components
  .characters-item
  .character-wrapper
  .character-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}
.builder .board-full .builder-bonus-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}
.builder .board-full .builder-bonus {
  width: auto;
}
.builder .board-full .builder-bonus.traits {
  min-width: 200px;
}
.builder .board-full .builder-bonus.builder-board {
  align-content: flex-start;
  flex-grow: 1;
  padding: 0 30px;
}
.builder .board-full .builder-bonus.items {
  width: 200px;
}
.builder
  .board-full
  .builder-bonus.items
  .builder-bonus-group
  .builder-bonus-list {
  flex-direction: row;
  justify-content: space-between;
}
.builder .board-full .builder-bonus .builder-bonus-group {
  width: 100%;
}
.builder .board-full .builder-bonus .builder-bonus-group .empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #102531;
  border: 1px solid #17313a;
  padding: 20px;
  color: #88a0a7;
  font-size: 15px;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .empty-list
  .info-icon {
  width: 18px;
  margin-bottom: 10px;
  opacity: 0.54;
}
.builder .board-full .builder-bonus .builder-bonus-group:first-child,
.builder .board-full .builder-bonus .builder-bonus-group:last-child {
  margin: 0;
}
.builder .board-full .builder-bonus .builder-bonus-group .builder-bonus-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list:first-child {
  display: none;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list:last-child {
  display: flex;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .traits-error {
  font-size: 15px;
  color: #88a0a7;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list.partial
  .builder-bonus-item {
  position: relative;
  display: none;
  align-self: flex-start;
  margin: 15px 15px 15px 0;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list.partial
  .builder-bonus-item.active {
  display: flex;
  order: 5;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list.partial
  .builder-bonus-item.active.platinum {
  order: 1;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list.partial
  .builder-bonus-item.active.gold {
  order: 2;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list.partial
  .builder-bonus-item.active.silver {
  order: 3;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list.partial
  .builder-bonus-item.active.bronze {
  order: 4;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item {
  position: relative;
  display: none;
  align-self: flex-start;
  margin: 15px 15px 15px 0;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active {
  display: none;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active.platinum {
  display: flex;
  order: 1;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active.gold {
  display: flex;
  order: 2;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active.silver {
  display: flex;
  order: 3;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active.bronze {
  display: flex;
  order: 4;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon
  .builder-bonus-counter {
  font-size: 14px;
  font-weight: 600;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.chosen
  .builder-bonus-icon {
  background: #c45dd6 !important;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.chosen
  .builder-bonus-icon:before {
  border-bottom-color: #c45dd6 !important;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.chosen
  .builder-bonus-icon:after {
  border-top-color: #c45dd6 !important;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.chosen
  .builder-bonus-icon
  .builder-bonus-counter {
  background: #c45dd6 !important;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.chosen
  .builder-bonus-info {
  border: 1px solid #c45dd6 !important;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-info {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  width: 180px;
  border: 1px solid #17313a;
  font-size: 14px;
  background: #102531;
  padding: 4px 15px 4px 45px;
  border-radius: 3px;
  line-height: 1.3em;
  white-space: nowrap;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-info
  .builder-bonus-milestone {
  display: flex;
  align-items: center;
  color: #88a0a7;
  font-size: 12px;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-info
  .builder-bonus-milestone
  span.active {
  font-size: 14px;
  color: hsla(0, 0%, 100%, 0.9);
  font-weight: 600;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-info
  .builder-bonus-milestone
  i {
  width: 4px;
  height: 4px;
  margin: 4px 8px 0 5px;
}
.builder
  .board-full
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-info
  .builder-bonus-milestone
  i.down {
  border: solid #88a0a7;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 1.5px;
  transform: rotate(-45deg);
  transition: all 0.3s;
}
.builder .board-full .board .builder-bonus-group .builder-bonus-list {
  background: #102531;
}
.builder .builder-bonus {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.builder .builder-bonus .builder-bonus-group {
  width: calc(50% - 25px);
}
.builder .builder-bonus .builder-bonus-group .page-header h2 {
  font-size: 16px;
}
.builder .builder-bonus .builder-bonus-group .divider {
  margin-top: 10px;
}
.builder .builder-bonus .builder-bonus-group:first-child {
  margin-right: 25px;
}
.builder .builder-bonus .builder-bonus-group:last-child {
  margin-left: 25px;
}
.builder .builder-bonus .builder-bonus-group h3 {
  color: #88a0a7;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px;
}
.builder .builder-bonus .builder-bonus-group .builder-bonus-list {
  display: flex;
  flex-wrap: wrap;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item {
  width: 48px;
  margin: 15px;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  width: 40px;
  height: 25px;
  background: #102531;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon:after,
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon:before {
  content: "";
  position: absolute;
  width: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  z-index: 1;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon:before {
  bottom: 100%;
  border-bottom: 10px solid #102531;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon:after {
  top: 100%;
  border-top: 10px solid #102531;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon
  img {
  width: 21px;
  z-index: 2;
  opacity: 0.54;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon
  .builder-bonus-counter {
  position: absolute;
  top: 50%;
  left: calc(100% - 5px);
  transform: translateY(-50%);
  height: 25px;
  width: 20px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background: #102531;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-icon
  .builder-bonus-counter
  span {
  display: inline-block;
  line-height: 1em;
  margin-top: -3px;
  opacity: 0.54;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item
  .builder-bonus-count {
  display: none;
  height: 40px;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active
  .builder-bonus-icon {
  background: #123040;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active
  .builder-bonus-icon:before {
  border-bottom: 10px solid #123040;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active
  .builder-bonus-icon:after {
  border-top: 10px solid #123040;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active
  .builder-bonus-icon
  img {
  opacity: 1;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active
  .builder-bonus-counter {
  background: #123040;
}
.builder
  .builder-bonus
  .builder-bonus-group
  .builder-bonus-list
  .builder-bonus-item.active
  .builder-bonus-counter
  span {
  opacity: 1;
}
.builder-overlay {
  max-width: 500px;
  margin: -10px -20px;
  display: flex;
  flex-direction: column;
  background: #102531;
  font-size: 15px;
}
.builder-overlay .overlay-title {
  display: flex;
  align-items: center;
  min-width: 100px;
  padding: 10px;
  color: #fff;
  font-size: 16px;
  line-height: 1em;
}
.builder-overlay .overlay-title img {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
.builder-overlay .overlay-bonus-list {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-top: 1px solid #17313a;
  padding: 5px 0;
}
.builder-overlay .overlay-bonus-list .overlay-bonus-heading {
  padding: 10px 15px;
  text-align: left;
  white-space: pre-wrap;
}
.builder-overlay .overlay-bonus-list .overlay-bonus-item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  height: 100%;
  white-space: pre-wrap;
}
.builder-overlay
  .overlay-bonus-list
  .overlay-bonus-item
  .overlay-bonus-item-count {
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #88a0a7;
  font-weight: 600;
  font-size: 14px;
  margin-right: 10px;
  border: 1px solid #17313a;
  border-radius: 100px;
  cursor: default;
}
.builder-overlay
  .overlay-bonus-list
  .overlay-bonus-item
  .overlay-bonus-item-value {
  flex-grow: 1;
  text-align: left;
  color: hsla(0, 0%, 100%, 0.9);
}
.builder-overlay .overlay-recipe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid #17313a;
  padding: 10px;
  background: #0d202b;
  color: #88a0a7;
  width: 100%;
}
.builder-overlay .overlay-recipe .characters-item {
  width: auto;
  padding: 0;
  justify-items: flex-start;
}
.builder-overlay .overlay-recipe .characters-item:first-child {
  margin-left: 5px;
}
.builder-overlay .overlay-recipe .characters-item .character-wrapper {
  margin: 0;
}
.builder-overlay
  .overlay-recipe
  .characters-item
  .character-wrapper
  .character-icon {
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  margin-left: 5px;
}
.builder-overlay.tb
  .overlay-bonus-list
  .overlay-bonus-item
  .overlay-bonus-item-count,
.builder-overlay.tb
  .overlay-bonus-list
  .overlay-bonus-item
  .overlay-bonus-item-value {
  color: hsla(0, 0%, 100%, 0.3);
}
.builder-overlay.tb
  .overlay-bonus-list
  .overlay-bonus-item.active
  .overlay-bonus-item-value {
  color: hsla(0, 0%, 100%, 0.9);
}
.builder-overlay.tb
  .overlay-bonus-list
  .overlay-bonus-item.active
  .overlay-bonus-item-count {
  color: hsla(0, 0%, 100%, 0.9);
  border: 1px solid #d47559;
}
.character-overlay {
  position: relative;
  max-width: 350px;
  margin: -10px -20px;
  display: flex;
  flex-direction: column;
  background: #102531;
  font-size: 15px;
}
.character-overlay .character-top {
  display: flex;
}
.character-overlay .overlay-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: #fff;
}
.character-overlay .overlay-title img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
  border: 1px solid #17313a;
}
.character-overlay .overlay-bonus-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  border-left: 1px solid #17313a;
  flex-grow: 1;
}
.character-overlay .overlay-bonus-list .overlay-bonus-item {
  display: flex;
  align-items: center;
  padding: 5px 15px;
  white-space: pre-wrap;
}
.character-overlay
  .overlay-bonus-list
  .overlay-bonus-item
  .overlay-bonus-item-icon {
  width: 20px;
  margin-right: 5px;
}
.character-overlay
  .overlay-bonus-list
  .overlay-bonus-item
  .overlay-bonus-item-value {
  flex-grow: 1;
  text-align: left;
}
.character-overlay .overlay-cost {
  padding: 5px 10px;
  border-left: 1px solid #17313a;
  background: #0d202b;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1em;
}
.character-overlay .overlay-cost .gold-icon {
  margin-right: 5px;
}
.character-overlay .overlay-recipe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid #17313a;
  padding: 10px;
  background: #0d202b;
  color: #88a0a7;
  width: 100%;
}
.character-overlay .overlay-recipe img {
  width: 25px;
  height: 25px;
  margin-left: 5px;
  border: 1px solid #17313a;
}
.character-overlay .overlay-recipe img:first-child {
  margin-left: 10px;
}
.overlay-patch {
  padding: 10px;
  text-align: left;
  border-top: 1px solid #17313a;
}
.overlay-patch .overlay-patch-buff {
  color: #4caf50;
}
.overlay-patch .overlay-patch-nerf {
  color: rgba(244, 67, 54, 0.815686);
}
.overlay-patch .overlay-patch-buff,
.overlay-patch .overlay-patch-nerf {
  font-size: 14px;
  font-weight: 700;
}
.overlay-patch .overlay-patch-buff .overlay-patch-notes,
.overlay-patch .overlay-patch-nerf .overlay-patch-notes {
  color: #88a0a7;
  font-weight: 400;
  margin: 5px 0 5px 30px;
  list-style: disc;
  line-height: 1.3em;
}
.item-overlay {
  max-width: 500px;
  min-width: 200px;
  margin: -10px -20px;
  display: flex;
  flex-direction: column;
  background: #102531;
  font-size: 15px;
}
.item-overlay .overlay-title {
  display: flex;
  align-items: center;
  margin: 5px;
  padding: 0 5px;
}
.item-overlay .overlay-title img {
  width: 42px;
  height: 42px;
  border: 1px solid #17313a;
}
.item-overlay .overlay-title .overlay-bonus-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  margin: 0;
  padding: 2.5px 10px;
  color: #fff;
  font-size: 16px;
  line-height: 1em;
}
.item-overlay .overlay-title .overlay-bonus-title .item-stats-wrapper {
  display: flex;
}
.item-overlay
  .overlay-title
  .overlay-bonus-title
  .item-stats-wrapper
  .item-stats {
  margin-top: 5px;
  display: flex;
  align-items: center;
  color: hsla(0, 0%, 100%, 0.9);
  font-size: 15px;
}
.item-overlay
  .overlay-title
  .overlay-bonus-title
  .item-stats-wrapper
  .item-stats:first-child {
  margin-right: 10px;
}
.item-overlay
  .overlay-title
  .overlay-bonus-title
  .item-stats-wrapper
  .item-stats:last-child {
  margin-right: 0;
}
.item-overlay
  .overlay-title
  .overlay-bonus-title
  .item-stats-wrapper
  .item-stats
  .item-stat-icon {
  border: none;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.item-overlay .overlay-bonus-list {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  text-align: left;
  border-top: 1px solid #17313a;
  margin-top: 5px;
}
.item-overlay .overlay-bonus-list .overlay-bonus-item {
  display: flex;
  align-items: center;
  margin: 2.5px 5px;
  height: 100%;
  padding: 5px;
  white-space: pre-wrap;
}
.item-overlay .overlay-recipe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid #17313a;
  padding: 10px;
  background: #0d202b;
  color: #88a0a7;
}
.item-overlay .overlay-recipe img {
  width: 25px;
  height: 25px;
  margin-left: 5px;
  border: 1px solid #17313a;
}
.item-overlay .overlay-recipe img:first-child {
  margin-left: 10px;
}
.news {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.news img {
  width: 100%;
  margin-bottom: 60px;
}
.news h1 {
  max-width: 700px;
  width: 100%;
  margin-bottom: 20px;
  line-height: 1.3em;
}
.news h2 {
  text-align: left;
  display: inline-block;
  position: relative;
  padding: 0 10px 15px;
  margin-top: 20px;
  margin-right: auto;
  margin-left: 230px;
}
.news h2:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #d47559;
}
.news h3 {
  margin-bottom: 20px;
}
.news h3,
.news h4 {
  max-width: 700px;
  width: 100%;
}
.news h4 {
  margin-bottom: 40px;
}
.news ul {
  max-width: 700px;
  width: 100%;
  margin-bottom: 20px;
  padding-left: 30px;
}
.news ul li {
  color: hsla(0, 0%, 100%, 0.9);
  line-height: 1.8em;
  margin-bottom: 10px;
  list-style: disc outside none;
  list-style: initial;
}
.news p {
  width: 100%;
}
.news p img {
  margin-bottom: 20px;
  padding: 2px;
  border: 1px solid #17313a;
}
.news hr {
  max-width: 700px;
  width: 100%;
  margin: 0 0 25px;
  border-top: 1px solid #17313a;
}
.shadow {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
@media (max-width: 1259.98px) {
  .page-header {
    flex-wrap: wrap;
  }
  .page-header h1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .page-header .searchbar {
    width: 100%;
    margin-top: 10px;
  }
  .update {
    flex-wrap: wrap;
  }
  .update div {
    width: 100%;
    margin: 5px 0;
    text-align: center;
  }
  .update .legend {
    flex-wrap: wrap;
    margin: 0;
  }
  .update .legend .legend-item {
    flex-grow: 1;
    width: calc(33.33% - 10px);
    margin: 5px;
  }
  .tierlist.teams
    .tier-group
    .characters-list
    .team-portrait
    .team-expanded
    .team-expanded-group.positioning {
    width: 100%;
  }
  .update .update-patch {
    flex-grow: 1;
    text-align: center;
    min-width: calc(50% - 10px);
  }
  .update .update-patch:first-child,
  .update .update-patch:last-child {
    margin: 5px !important;
  }
  .builder
    .board-full
    .drag-zone
    .characters-list.champions
    .characters-item
    .character-wrapper
    .character-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }
  .builder
    .board-full
    .drag-zone
    .characters-list.items
    .characters-item
    .character-wrapper
    .character-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }
  .news h2 {
    margin-left: 115px;
  }
  .characters-item,
  .tierlist.classes .characters-item,
  .tierlist.races .characters-item {
    width: 16.66%;
  }
  .classes .tier-group .characters-list .characters-item,
  .races .tier-group .characters-list .characters-item {
    width: 20%;
  }
  .tier-group .characters-list .characters-item {
    width: 14.28%;
  }
  .tierlist.teams .tier-group .characters-list .team-portrait .team-name {
    width: 54%;
    min-width: 54%;
  }
  .tierlist.teams .tier-group .characters-list .team-portrait .team-characters {
    width: calc(46% - 40px);
    min-width: calc(46% - 40px);
  }
  .tierlist.teams .tier-group .characters-list .team-portrait .characters-item {
    width: auto;
  }
  .tierlist.teams
    .tier-group
    .characters-list
    .team-portrait
    .characters-item
    .character-wrapper
    .character-icon {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }
  .tierlist.teams
    .tier-group
    .characters-list
    .team-portrait
    .team-expanded
    .team-expanded-group {
    min-width: 50%;
  }
  .main-filters .tag {
    max-width: calc(33.33% - 10px);
  }
  .character .synergy-list .characters-list .characters-item {
    width: 12.8%;
  }
  .builder
    .builder-bonus
    .builder-bonus-group
    .builder-bonus-list
    .builder-bonus-item {
    width: calc(33.33% - 20px);
  }
}
@media (max-width: 991.98px) {
  .disclaimer {
    margin: 5px;
  }
  .update {
    margin: 0;
  }
  .builder .switch {
    display: none !important;
  }
  .builder .board-full .builder-bonus.builder-board {
    width: 100%;
  }
  .builder .board-full .builder-bonus.items {
    display: none;
  }
  .builder .board-full .drag-zone .characters-list.champions {
    width: 100%;
    margin-bottom: 10px;
  }
  .builder .board-full .drag-zone .characters-list.items {
    width: 100%;
  }
  .builder .board-full .drag-zone .characters-list.items .characters-item {
    width: 8.33%;
  }
  .builder
    .board-full
    .drag-zone
    .characters-list.champions
    .characters-item
    .character-wrapper
    .character-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }
  .home .home-app.alt {
    padding: 60px 0;
  }
  .home .home-app .app-info {
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
  }
  .home .home-app .app-info.left,
  .home .home-app .app-info.right {
    padding: 0;
  }
  .home .home-app .app-info.right {
    order: -1;
  }
  .home .home-app .app-image.left,
  .home .home-app .app-image.right {
    padding: 0;
  }
  .home .home-app .app-tutorial {
    margin: 30px 0;
    padding: 0 30px;
  }
  .sidebar .sidenav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .sidebar .sidenav .sidenav-link,
  .sidebar .sidenav a {
    width: 100%;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #17313a;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sidebar .sidenav .sidenav-link .sidenav-title,
  .sidebar .sidenav a .sidenav-title {
    max-width: 100%;
    width: 100%;
    text-align: center;
    padding: 15px;
    margin: 0;
  }
  .sidebar .sidenav .sidenav-link .sidenav-title:before,
  .sidebar .sidenav a .sidenav-title:before {
    content: none;
  }
  .sidebar .sidenav .sidenav-link.active,
  .sidebar .sidenav a.active {
    border: 2px solid #d47559;
  }
  .sidebar .sidenav .sidenav-title.no-a {
    flex-grow: 1;
    margin: 0;
    padding: 15px;
    border: 1px solid #17313a;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100%;
  }
  .sidebar .sidenav .sidenav-title.no-a.active {
    border: 2px solid #d47559;
  }
  .sidebar .sidenav .sidenav-title.no-a.active:before {
    content: none;
  }
  .character .sidenav,
  .tierlist .sidenav {
    margin-bottom: 0;
  }
  .builder .sidebar .characters-list .characters-item {
    width: 8.33%;
  }
  .builder .btns {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  .builder .btns .btn {
    width: 100%;
  }
  .builder .btns .btn:last-child {
    margin: 10px 0 0;
  }
  .builder .characters-list.team .characters-item {
    width: 25%;
  }
  .builder .builder-bonus {
    flex-wrap: wrap;
  }
  .builder .builder-bonus .builder-bonus-group {
    width: 100%;
  }
  .builder .builder-bonus .builder-bonus-group:first-child {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .builder .builder-bonus .builder-bonus-group:last-child {
    margin-left: 0;
  }
  .builder
    .builder-bonus
    .builder-bonus-group
    .builder-bonus-list
    .builder-bonus-item {
    width: calc(20% - 20px);
  }
  .extra-filters {
    display: none;
  }
  .character .sidebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .character .sidebar .character-items,
  .character .sidebar .character-portrait,
  .character .sidebar .character-stats {
    width: 100%;
  }
  .sidebar .btn.expand {
    margin-top: 20px;
  }
  .classes .tier-group .characters-list .characters-item,
  .races .tier-group .characters-list .characters-item {
    width: 16.66%;
  }
  .tier-group .characters-list .characters-item {
    width: 12.5%;
  }
  .tierlist.teams .tier-group .characters-list .team-portrait .team-name {
    width: 30%;
    min-width: 30%;
  }
  .tierlist.teams .tier-group .characters-list .team-portrait .team-characters {
    width: calc(70% - 40px);
    min-width: calc(70% - 40px);
  }
  .tierlist.teams .tier-group .characters-list .team-portrait .characters-item {
    width: auto;
  }
  .tierlist.teams
    .tier-group
    .characters-list
    .team-portrait
    .characters-item
    .character-wrapper
    .character-icon {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }
  .tierlist.teams
    .tier-group
    .characters-list
    .team-portrait
    .team-expanded
    .team-expanded-group {
    min-width: 50%;
  }
  .item-builder .sidebar .characters-list .characters-item {
    width: 10%;
  }
}
@media (max-width: 767.98px) {
  .builder .board-full {
    flex-wrap: wrap;
  }
  .builder .board-full .builder-bonus.traits {
    width: 100%;
    margin-bottom: 30px;
  }
  .builder .board-full .drag-zone {
    margin-top: 30px;
  }
  .home .home-app {
    padding: 30px 0;
  }
  .home .home-app.features {
    padding: 50px 0;
  }
  .searchbar {
    width: 100%;
  }
  .searchbar,
  .sidebar .btn.expand {
    margin-top: 20px;
  }
  .characters-item,
  .tierlist.classes .characters-item,
  .tierlist.races .characters-item {
    width: 20%;
  }
  .builder .sidebar .characters-list .characters-item,
  .item-builder .sidebar .characters-list .characters-item {
    width: 12.5%;
  }
  .table {
    font-size: 14px;
  }
  .table .ReactTable .rt-table .rt-tbody .rt-td {
    flex-wrap: wrap;
  }
  .table .ReactTable .rt-table .rt-tbody .rt-td .table-mobile-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: 12px;
  }
  .table
    .ReactTable
    .rt-table
    .rt-tbody
    .rt-td
    .table-mobile-group
    .table-bonus-list
    .table-bonus-item
    .table-bonus-value {
    font-size: 14px;
  }
  .table .ReactTable .origin-icon,
  .table .ReactTable .type-icon {
    width: 26px;
    height: 26px;
    margin: 5px;
  }
  .table .ReactTable .character-wrapper {
    margin: 0;
  }
  .table .ReactTable .characters-item.trait-table .character-wrapper {
    justify-content: center;
    width: 100%;
    margin: 0;
  }
  .table
    .ReactTable
    .characters-item.trait-table
    .character-wrapper
    .character-icon {
    margin: 0;
  }
  .table.db-champions .ReactTable .rt-table .rt-thead .rt-th {
    text-align: center;
  }
  .table.db-champions .ReactTable .rt-table .rt-tbody .rt-tr-group .rt-td {
    justify-content: center;
  }
  .post img {
    margin-bottom: 30px;
  }
  .footer .container .footer-about,
  .footer .container .footer-copyright {
    text-align: center;
  }
  .legends-list .legends-list-group {
    width: 100%;
  }
  .legends-list .legends-list-group .legends-item img {
    width: calc(33.33% - 10px);
    height: calc(33.33% - 10px);
  }
  .classes .tier-group .characters-list .characters-item,
  .races .tier-group .characters-list .characters-item {
    width: 25%;
  }
  .tier-group .characters-list .characters-item {
    width: 16.67%;
  }
  .builder-overlay,
  .character-overlay,
  .item-overlay {
    font-size: 14px;
  }
  .character .character-ability .ability-description .ability-bonus {
    margin-top: 30px;
    margin-left: -90px;
  }
  .character .character-ability .ability-description .ability-list {
    margin-left: -90px;
  }
  .character .character-ability .ability-description .ability-bonus-item {
    margin-left: -62px;
  }
  .character .synergy-list .characters-list .characters-item {
    width: 16.66%;
  }
  .col-12,
  .home-news {
    padding: 0;
  }
  .tierlist.teams .tier-group .characters-list .team-portrait .team-name {
    width: 48%;
    min-width: 48%;
  }
  .tierlist.teams .tier-group .characters-list .team-portrait .team-characters {
    width: calc(52% - 40px);
    min-width: calc(52% - 40px);
  }
  .tierlist.teams
    .tier-group
    .characters-list
    .team-portrait
    .team-expanded
    .team-expanded-group {
    min-width: 50%;
  }
  .item-builder .sidebar .characters-list .characters-item {
    width: 10%;
  }
  .item-builder
    .sidebar
    .characters-list
    .characters-item
    .character-wrapper
    .character-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .footer .container .footer-links {
    flex-wrap: wrap;
    width: 100%;
  }
  .footer .container .footer-links .cookies,
  .footer .container .footer-links .switch,
  .footer .container .footer-links a {
    width: 50%;
    margin: 5px 0;
    text-align: center;
  }
}
@media (max-width: 575.98px) {
  .update .legend .legend-item {
    max-width: 50%;
  }
  .home .home-app .app-image .image-full {
    max-width: 100%;
  }
  .home .home-app .app-image .image-crop {
    display: none;
  }
  .home .home-app .features-title {
    margin-bottom: 20px;
  }
  .home .home-app .app-features {
    margin: 10px 0;
  }
  .home h1 {
    font-size: 28px;
  }
  .home h3 {
    margin-top: 30px;
  }
  .home .home-header .cta {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .home .home-header .cta .btn-outer {
    margin: 10px 0;
    width: 100%;
  }
  .characters-item {
    width: 25%;
  }
  .character .sidebar {
    flex-wrap: wrap;
  }
  .character .sidebar .character-portrait {
    width: 100%;
  }
  .character .sidebar .character-stats {
    width: 100%;
    padding-left: 0;
  }
  .character .synergy-list .characters-list .characters-item {
    width: 25%;
  }
  .tierlist.teams .tier-group .characters-list .team-portrait .team-name {
    width: 56%;
    min-width: 56%;
  }
  .tierlist.teams .tier-group .characters-list .team-portrait .team-characters {
    width: calc(44% - 40px);
    min-width: calc(44% - 40px);
  }
  .tierlist.teams
    .tier-group
    .characters-list
    .team-portrait
    .team-expanded
    .team-expanded-group {
    min-width: 100%;
  }
  .builder .sidebar .characters-list .character-wrapper,
  .item-builder .sidebar .characters-list .character-wrapper {
    width: 20%;
  }
  .builder .sidebar .characters-list .characters-item {
    width: 16.66%;
  }
  .builder .characters-list.team .characters-item {
    width: 33.33%;
    cursor: pointer;
  }
  .builder
    .builder-bonus
    .builder-bonus-group
    .builder-bonus-list
    .builder-bonus-item {
    width: calc(33.33% - 20px);
  }
  .builder
    .builder-bonus
    .builder-bonus-group
    .builder-bonus-list
    .builder-bonus-item
    .builder-bonus-icon {
    padding: 10px;
  }
  .builder
    .builder-bonus
    .builder-bonus-group
    .builder-bonus-list
    .builder-bonus-item
    .builder-bonus-count {
    height: 54px;
  }
  .classes .tier-group .characters-list .characters-item,
  .races .tier-group .characters-list .characters-item {
    width: 50%;
  }
  .tier-group .characters-list .characters-item {
    width: 25%;
  }
  .main-filters .tag {
    max-width: calc(50% - 10px);
  }
  .patch .post .patch-header {
    margin-top: 40px;
    flex-direction: column;
    align-items: flex-start;
  }
  .patch .post .patch-header h1 {
    margin-bottom: 15px;
  }
  .item-builder .sidebar .characters-list .characters-item {
    width: 16.66%;
  }
}
.announcement {
  color: hsla(0, 0%, 100%, 0.9);
  margin-bottom: 20px;
}
.announcement.positive .disclaimer {
  color: #4de23f;
  background: rgba(63, 226, 98, 0.25);
}
.announcement .disclaimer {
  font-size: 15px;
  margin: 10px 0;
  flex-grow: 1;
  color: #e23f3f;
  background: rgba(226, 63, 63, 0.25);
}
.announcement .disclaimer b {
  margin: 0 5px;
  font-weight: 600;
}
.l3:before {
  content: "★★★";
  color: #e4c157;
  position: absolute;
  top: -6px;
  left: 50%;
  font-size: 14px;
  transform: translateX(-50%);
  z-index: 10;
  width: 100%;
  text-align: center;
  text-shadow: 0 3px 3px #000;
  letter-spacing: -3px;
  margin-left: -1px;
}
.Blademaster_3 .builder-bonus-icon,
.Blaster_2 .builder-bonus-icon,
.Brawler_2 .builder-bonus-icon,
.bronze .builder-bonus-icon,
.Celestial_2 .builder-bonus-icon,
.Chrono_2 .builder-bonus-icon,
.Cybernetic_3 .builder-bonus-icon,
.Dark_Star_3 .builder-bonus-icon,
.Infiltrator_2 .builder-bonus-icon,
.Mana-Reaver_2 .builder-bonus-icon,
.Mystic_2 .builder-bonus-icon,
.Protector_2 .builder-bonus-icon,
.Rebel_3 .builder-bonus-icon,
.Sorcerer_2 .builder-bonus-icon,
.Space_Pirate_2 .builder-bonus-icon,
.Star_Guardian_3 .builder-bonus-icon,
.Vanguard_2 .builder-bonus-icon {
  background: #a0715e !important;
}
.Blademaster_3 .builder-bonus-icon:after,
.Blademaster_3 .builder-bonus-icon:before,
.Blaster_2 .builder-bonus-icon:after,
.Blaster_2 .builder-bonus-icon:before,
.Brawler_2 .builder-bonus-icon:after,
.Brawler_2 .builder-bonus-icon:before,
.bronze .builder-bonus-icon:after,
.bronze .builder-bonus-icon:before,
.Celestial_2 .builder-bonus-icon:after,
.Celestial_2 .builder-bonus-icon:before,
.Chrono_2 .builder-bonus-icon:after,
.Chrono_2 .builder-bonus-icon:before,
.Cybernetic_3 .builder-bonus-icon:after,
.Cybernetic_3 .builder-bonus-icon:before,
.Dark_Star_3 .builder-bonus-icon:after,
.Dark_Star_3 .builder-bonus-icon:before,
.Infiltrator_2 .builder-bonus-icon:after,
.Infiltrator_2 .builder-bonus-icon:before,
.Mana-Reaver_2 .builder-bonus-icon:after,
.Mana-Reaver_2 .builder-bonus-icon:before,
.Mystic_2 .builder-bonus-icon:after,
.Mystic_2 .builder-bonus-icon:before,
.Protector_2 .builder-bonus-icon:after,
.Protector_2 .builder-bonus-icon:before,
.Rebel_3 .builder-bonus-icon:after,
.Rebel_3 .builder-bonus-icon:before,
.Sorcerer_2 .builder-bonus-icon:after,
.Sorcerer_2 .builder-bonus-icon:before,
.Space_Pirate_2 .builder-bonus-icon:after,
.Space_Pirate_2 .builder-bonus-icon:before,
.Star_Guardian_3 .builder-bonus-icon:after,
.Star_Guardian_3 .builder-bonus-icon:before,
.Vanguard_2 .builder-bonus-icon:after,
.Vanguard_2 .builder-bonus-icon:before {
  border-bottom-color: #a0715e !important;
  border-top-color: #a0715e !important;
}
.Blademaster_3 .builder-bonus-icon .builder-bonus-counter,
.Blaster_2 .builder-bonus-icon .builder-bonus-counter,
.Brawler_2 .builder-bonus-icon .builder-bonus-counter,
.bronze .builder-bonus-icon .builder-bonus-counter,
.Celestial_2 .builder-bonus-icon .builder-bonus-counter,
.Chrono_2 .builder-bonus-icon .builder-bonus-counter,
.Cybernetic_3 .builder-bonus-icon .builder-bonus-counter,
.Dark_Star_3 .builder-bonus-icon .builder-bonus-counter,
.Infiltrator_2 .builder-bonus-icon .builder-bonus-counter,
.Mana-Reaver_2 .builder-bonus-icon .builder-bonus-counter,
.Mystic_2 .builder-bonus-icon .builder-bonus-counter,
.Protector_2 .builder-bonus-icon .builder-bonus-counter,
.Rebel_3 .builder-bonus-icon .builder-bonus-counter,
.Sorcerer_2 .builder-bonus-icon .builder-bonus-counter,
.Space_Pirate_2 .builder-bonus-icon .builder-bonus-counter,
.Star_Guardian_3 .builder-bonus-icon .builder-bonus-counter,
.Vanguard_2 .builder-bonus-icon .builder-bonus-counter {
  background: #a0715e !important;
}
.Blademaster_6 .builder-bonus-icon,
.Brawler_4 .builder-bonus-icon,
.Celestial_4 .builder-bonus-icon,
.Chrono_4 .builder-bonus-icon,
.Dark_Star_6 .builder-bonus-icon,
.Infiltrator_4 .builder-bonus-icon,
.Protector_4 .builder-bonus-icon,
.Rebel_6 .builder-bonus-icon,
.silver .builder-bonus-icon,
.Sorcerer_4 .builder-bonus-icon {
  background: #7c8f92 !important;
}
.Blademaster_6 .builder-bonus-icon:after,
.Blademaster_6 .builder-bonus-icon:before,
.Brawler_4 .builder-bonus-icon:after,
.Brawler_4 .builder-bonus-icon:before,
.Celestial_4 .builder-bonus-icon:after,
.Celestial_4 .builder-bonus-icon:before,
.Chrono_4 .builder-bonus-icon:after,
.Chrono_4 .builder-bonus-icon:before,
.Dark_Star_6 .builder-bonus-icon:after,
.Dark_Star_6 .builder-bonus-icon:before,
.Infiltrator_4 .builder-bonus-icon:after,
.Infiltrator_4 .builder-bonus-icon:before,
.Protector_4 .builder-bonus-icon:after,
.Protector_4 .builder-bonus-icon:before,
.Rebel_6 .builder-bonus-icon:after,
.Rebel_6 .builder-bonus-icon:before,
.silver .builder-bonus-icon:after,
.silver .builder-bonus-icon:before,
.Sorcerer_4 .builder-bonus-icon:after,
.Sorcerer_4 .builder-bonus-icon:before {
  border-bottom-color: #7c8f92 !important;
  border-top-color: #7c8f92 !important;
}
.Blademaster_6 .builder-bonus-icon .builder-bonus-counter,
.Brawler_4 .builder-bonus-icon .builder-bonus-counter,
.Celestial_4 .builder-bonus-icon .builder-bonus-counter,
.Chrono_4 .builder-bonus-icon .builder-bonus-counter,
.Dark_Star_6 .builder-bonus-icon .builder-bonus-counter,
.Infiltrator_4 .builder-bonus-icon .builder-bonus-counter,
.Protector_4 .builder-bonus-icon .builder-bonus-counter,
.Rebel_6 .builder-bonus-icon .builder-bonus-counter,
.silver .builder-bonus-icon .builder-bonus-counter,
.Sorcerer_4 .builder-bonus-icon .builder-bonus-counter {
  background: #7c8f92 !important;
}
.Blademaster_9 .builder-bonus-icon,
.Blaster_4 .builder-bonus-icon,
.Brawler_4 .builder-bonus-icon,
.Celestial_6 .builder-bonus-icon,
.Chrono_6 .builder-bonus-icon,
.Cybernetic_6 .builder-bonus-icon,
.Dark_Star_9 .builder-bonus-icon,
.Demolitionist_2 .builder-bonus-icon,
.gold .builder-bonus-icon,
.Infiltrator_6 .builder-bonus-icon,
.Mana-Reaver_4 .builder-bonus-icon,
.Mech_Pilot_3 .builder-bonus-icon,
.Mercenary_1 .builder-bonus-icon,
.Mystic_4 .builder-bonus-icon,
.Protector_6 .builder-bonus-icon,
.Rebel_9 .builder-bonus-icon,
.Sniper_2 .builder-bonus-icon,
.Sorcerer_6 .builder-bonus-icon,
.Space_Pirate_4 .builder-bonus-icon,
.Star_Guardian_6 .builder-bonus-icon,
.Starship_1 .builder-bonus-icon,
.Valkyrie_2 .builder-bonus-icon,
.Vanguard_4 .builder-bonus-icon,
.Void_3 .builder-bonus-icon {
  background: #bd9a38 !important;
}
.Blademaster_9 .builder-bonus-icon:after,
.Blademaster_9 .builder-bonus-icon:before,
.Blaster_4 .builder-bonus-icon:after,
.Blaster_4 .builder-bonus-icon:before,
.Brawler_4 .builder-bonus-icon:after,
.Brawler_4 .builder-bonus-icon:before,
.Celestial_6 .builder-bonus-icon:after,
.Celestial_6 .builder-bonus-icon:before,
.Chrono_6 .builder-bonus-icon:after,
.Chrono_6 .builder-bonus-icon:before,
.Cybernetic_6 .builder-bonus-icon:after,
.Cybernetic_6 .builder-bonus-icon:before,
.Dark_Star_9 .builder-bonus-icon:after,
.Dark_Star_9 .builder-bonus-icon:before,
.Demolitionist_2 .builder-bonus-icon:after,
.Demolitionist_2 .builder-bonus-icon:before,
.gold .builder-bonus-icon:after,
.gold .builder-bonus-icon:before,
.Infiltrator_6 .builder-bonus-icon:after,
.Infiltrator_6 .builder-bonus-icon:before,
.Mana-Reaver_4 .builder-bonus-icon:after,
.Mana-Reaver_4 .builder-bonus-icon:before,
.Mech_Pilot_3 .builder-bonus-icon:after,
.Mech_Pilot_3 .builder-bonus-icon:before,
.Mercenary_1 .builder-bonus-icon:after,
.Mercenary_1 .builder-bonus-icon:before,
.Mystic_4 .builder-bonus-icon:after,
.Mystic_4 .builder-bonus-icon:before,
.Protector_6 .builder-bonus-icon:after,
.Protector_6 .builder-bonus-icon:before,
.Rebel_9 .builder-bonus-icon:after,
.Rebel_9 .builder-bonus-icon:before,
.Sniper_2 .builder-bonus-icon:after,
.Sniper_2 .builder-bonus-icon:before,
.Sorcerer_6 .builder-bonus-icon:after,
.Sorcerer_6 .builder-bonus-icon:before,
.Space_Pirate_4 .builder-bonus-icon:after,
.Space_Pirate_4 .builder-bonus-icon:before,
.Star_Guardian_6 .builder-bonus-icon:after,
.Star_Guardian_6 .builder-bonus-icon:before,
.Starship_1 .builder-bonus-icon:after,
.Starship_1 .builder-bonus-icon:before,
.Valkyrie_2 .builder-bonus-icon:after,
.Valkyrie_2 .builder-bonus-icon:before,
.Vanguard_4 .builder-bonus-icon:after,
.Vanguard_4 .builder-bonus-icon:before,
.Void_3 .builder-bonus-icon:after,
.Void_3 .builder-bonus-icon:before {
  border-bottom-color: #bd9a38 !important;
  border-top-color: #bd9a38 !important;
}
.Blademaster_9 .builder-bonus-icon .builder-bonus-counter,
.Blaster_4 .builder-bonus-icon .builder-bonus-counter,
.Brawler_4 .builder-bonus-icon .builder-bonus-counter,
.Celestial_6 .builder-bonus-icon .builder-bonus-counter,
.Chrono_6 .builder-bonus-icon .builder-bonus-counter,
.Cybernetic_6 .builder-bonus-icon .builder-bonus-counter,
.Dark_Star_9 .builder-bonus-icon .builder-bonus-counter,
.Demolitionist_2 .builder-bonus-icon .builder-bonus-counter,
.gold .builder-bonus-icon .builder-bonus-counter,
.Infiltrator_6 .builder-bonus-icon .builder-bonus-counter,
.Mana-Reaver_4 .builder-bonus-icon .builder-bonus-counter,
.Mech_Pilot_3 .builder-bonus-icon .builder-bonus-counter,
.Mercenary_1 .builder-bonus-icon .builder-bonus-counter,
.Mystic_4 .builder-bonus-icon .builder-bonus-counter,
.Protector_6 .builder-bonus-icon .builder-bonus-counter,
.Rebel_9 .builder-bonus-icon .builder-bonus-counter,
.Sniper_2 .builder-bonus-icon .builder-bonus-counter,
.Sorcerer_6 .builder-bonus-icon .builder-bonus-counter,
.Space_Pirate_4 .builder-bonus-icon .builder-bonus-counter,
.Star_Guardian_6 .builder-bonus-icon .builder-bonus-counter,
.Starship_1 .builder-bonus-icon .builder-bonus-counter,
.Valkyrie_2 .builder-bonus-icon .builder-bonus-counter,
.Vanguard_4 .builder-bonus-icon .builder-bonus-counter,
.Void_3 .builder-bonus-icon .builder-bonus-counter {
  background: #bd9a38 !important;
}
.platinum .builder-bonus-icon,
.Sorcerer_8 .builder-bonus-icon {
  background: #ad1457 !important;
}
.platinum .builder-bonus-icon:after,
.platinum .builder-bonus-icon:before,
.Sorcerer_8 .builder-bonus-icon:after,
.Sorcerer_8 .builder-bonus-icon:before {
  border-bottom-color: #ad1457 !important;
  border-top-color: #ad1457 !important;
}
.platinum .builder-bonus-icon .builder-bonus-counter,
.Sorcerer_8 .builder-bonus-icon .builder-bonus-counter {
  background: #ad1457 !important;
}
.align-start {
  align-self: flex-start;
}
.set-update-banner {
  position: relative;
  font-size: 21px;
  background: #102531;
  background-image: url(https://rerollcdn.com/update/set-5-update-bg.png);
  background-position: 50%;
  background-size: cover;
  border: 1px solid #17313a;
  width: 100%;
  height: 100px;
  color: hsla(0, 0%, 100%, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  -webkit-filter: saturate(1);
  filter: saturate(1);
  cursor: pointer;
  transition: all 0.3s;
  margin: 0 auto 30px;
}
.set-update-banner:hover {
  -webkit-filter: saturate(1.2);
  filter: saturate(1.2);
  border: 1px solid #227aad;
}
.set-update-banner:hover .update-title {
  color: #fff;
}
.set-update-banner:hover .update-subtitle {
  color: #2689c2;
}
.set-update-banner:hover:before {
  opacity: 0.8;
}
.set-update-banner .update-subtitle,
.set-update-banner .update-title {
  z-index: 5;
  font-weight: 600;
  transition: all 0.3s;
}
.set-update-banner .update-subtitle {
  font-size: 16px;
  color: #579dd4;
  font-weight: 400;
  transition: all 0.3s;
}
.partners-banner {
  position: relative;
  font-size: 21px;
  background: #102531;
  background-image: url(https://rerollcdn.com/partners-bg.png);
  background-position: 50%;
  background-size: cover;
  border: 1px solid #17313a;
  width: 100%;
  height: 100px;
  color: hsla(0, 0%, 100%, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  -webkit-filter: saturate(1);
  filter: saturate(1);
  cursor: pointer;
  transition: all 0.3s;
  margin: 0 auto 30px;
}
.partners-banner:hover {
  -webkit-filter: saturate(1.2);
  filter: saturate(1.2);
  border: 1px solid #227aad;
}
.partners-banner:hover .update-title {
  color: #fff;
}
.partners-banner:hover .update-subtitle {
  color: #2689c2;
}
.partners-banner:hover:before {
  opacity: 0.8;
}
.partners-banner .update-subtitle,
.partners-banner .update-title {
  z-index: 5;
  font-weight: 600;
  transition: all 0.3s;
}
.partners-banner .update-subtitle {
  font-size: 16px;
  color: #579dd4;
  font-weight: 400;
  transition: all 0.3s;
}
.set-update {
  flex-direction: column;
  background-image: url(https://rerollcdn.com/update/set-5-bg.png);
  background-color: #0d1d2d;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top;
  margin-top: -30px;
  padding: 100px 0;
}
.set-update,
.set-update .set-header {
  display: flex;
  align-items: center;
  justify-content: center;
}
.set-update .set-header {
  margin-bottom: 80px;
}
.set-update .set-header .set-logo {
  width: 450px;
  margin-right: 100px;
}
.set-update .set-header .set-date h1 {
  font-size: 36px;
}
.set-update .set-header .set-date h2 {
  font-size: 24px;
  font-weight: 400;
  color: #5fffd0;
}
.set-update .set-navigation {
  display: flex;
  width: 100%;
  background: #0d202b;
  margin-bottom: 10px;
  border: 1px solid #17313a;
}
.set-update .set-navigation .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  width: 100%;
  margin: 0;
  padding: 10px 30px;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border: none;
  border-right: 1px solid #17313a;
}
.set-update .set-navigation .btn:last-child {
  border-right: none;
}
.set-update .set-navigation .btn:hover {
  border-right: 1px solid #17313a;
  background: #227aad;
}
.set-update .set-navigation .btn:hover:last-child {
  border-right: none;
}
.set-update .set-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 18px;
  line-height: 2em;
  color: hsla(0, 0%, 100%, 0.9);
  margin: 0 auto;
  font-weight: 300;
  background: #0d202b;
  border: 1px solid #17313a;
  padding: 40px;
}
.set-update .set-content .set-champions,
.set-update .set-content .set-items,
.set-update .set-content .set-traits {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 40px;
}
.set-update .set-content .set-cheatsheet {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  border: 1px solid #17313a;
  margin-top: 10px;
}
.set-update .set-content .set-cheatsheet img {
  width: 100%;
}
.set-update .set-content .set-cheatsheet .set-cheatsheet-cta {
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  transition: opacity 0.3s;
  color: #fff;
}
.set-update
  .set-content
  .set-cheatsheet
  .set-cheatsheet-cta
  .cheatsheet-cta-title {
  margin-bottom: 20px;
}
.set-update
  .set-content
  .set-cheatsheet
  .set-cheatsheet-cta
  .cheatsheet-cta-buttons {
  display: flex;
}
.set-update .set-content .set-cheatsheet:hover .set-cheatsheet-cta {
  opacity: 1;
}
.set-update .set-content .set-subtitle {
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px;
}
.set-update .set-content .set-trait {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  width: calc(33.33% - 20px);
  background: #102531;
  border: 1px solid #17313a;
  border-radius: 3px;
  margin: 10px;
}
.set-update .set-content .set-trait .trait-meta {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 20px;
}
.set-update .set-content .set-trait .trait-icon {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}
.set-update .set-content .set-trait .trait-title {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.set-update .set-content .set-trait .trait-title .trait-name {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 5px;
}
.set-update .set-content .set-trait .trait-title .trait-count {
  color: #88a0a7;
  font-size: 15px;
  margin: 0;
}
.set-update .set-content .set-trait .trait-info {
  width: 100%;
  margin-top: 20px;
}
.set-update .set-content .set-trait .trait-info .trait-description {
  font-size: 16px;
  line-height: 1.8em;
  margin-bottom: 10px;
}
.set-update .set-content .set-trait .trait-info .trait-bonus-list {
  margin-bottom: 0;
}
.set-update
  .set-content
  .set-trait
  .trait-info
  .trait-bonus-list
  .trait-bonus-item {
  font-size: 16px;
  color: #88a0a7;
  list-style: none;
  margin-left: 0;
  margin-bottom: 5px;
}
.set-update
  .set-content
  .set-trait
  .trait-info
  .trait-bonus-list
  .trait-bonus-item
  b {
  font-weight: 400;
  margin-right: 10px;
}
.set-update .set-content .set-trait .trait-champions-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid #17313a;
  padding: 5px 0;
}
.set-update .set-content .set-trait .trait-champions-list .characters-item {
  width: auto;
  padding: 5px;
}
.set-update
  .set-content
  .set-trait
  .trait-champions-list
  .characters-item
  .character-wrapper {
  margin: 0;
}
.set-update
  .set-content
  .set-trait
  .trait-champions-list
  .characters-item
  .character-wrapper
  .character-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}
.set-update .set-content .set-champion {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: calc(33.33% - 20px);
  background: #102531;
  border: 1px solid #17313a;
  border-radius: 3px;
  margin: 10px;
  overflow: hidden;
}
.set-update .set-content .set-champion .champion-icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 150px;
  background-size: cover;
  padding-bottom: 20px;
}
.set-update .set-content .set-champion .champion-icon:after {
  content: "";
  background: linear-gradient(0deg, #0d202b 10%, transparent);
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.set-update .set-content .set-champion .champion-icon.c1 {
  border-bottom: 4px solid #213042;
}
.set-update .set-content .set-champion .champion-icon.c1 .champion-cost {
  background: #213042;
}
.set-update .set-content .set-champion .champion-icon.c2 {
  border-bottom: 4px solid #156831;
}
.set-update .set-content .set-champion .champion-icon.c2 .champion-cost {
  background: #156831;
}
.set-update .set-content .set-champion .champion-icon.c3 {
  border-bottom: 4px solid #12407c;
}
.set-update .set-content .set-champion .champion-icon.c3 .champion-cost {
  background: #12407c;
}
.set-update .set-content .set-champion .champion-icon.c4 {
  border-bottom: 4px solid #893088;
}
.set-update .set-content .set-champion .champion-icon.c4 .champion-cost {
  background: #893088;
}
.set-update .set-content .set-champion .champion-icon.c5 {
  border-bottom: 4px solid #b89d27;
}
.set-update .set-content .set-champion .champion-icon.c5 .champion-cost {
  background: #b89d27;
}
.set-update .set-content .set-champion .champion-icon .champion-cost {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 30px;
  border-bottom-left-radius: 20px;
  z-index: 2;
  box-shadow: -2px 2px 10px #0d202b;
}
.set-update
  .set-content
  .set-champion
  .champion-icon
  .champion-cost
  .champion-cost-icon {
  width: 12px;
  margin-right: 3px;
  margin-top: -2px;
}
.set-update
  .set-content
  .set-champion
  .champion-icon
  .champion-cost
  .champion-cost-value {
  font-weight: 500;
  line-height: 1em;
  margin-top: -5px;
}
.set-update .set-content .set-champion .champion-icon .champion-title {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
  z-index: 2;
}
.set-update
  .set-content
  .set-champion
  .champion-icon
  .champion-title
  .champion-name {
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 5px;
}
.set-update
  .set-content
  .set-champion
  .champion-icon
  .champion-title
  .champion-count {
  color: #88a0a7;
  font-size: 15px;
  margin: 0;
}
.set-update .set-content .set-champion .champion-icon .champion-title:before {
  content: "";
}
.set-update .set-content .set-champion .champion-info {
  width: 100%;
  padding: 20px;
}
.set-update .set-content .set-champion .champion-info .champion-skill {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.set-update
  .set-content
  .set-champion
  .champion-info
  .champion-skill
  .champion-skill-icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid #17313a;
}
.set-update
  .set-content
  .set-champion
  .champion-info
  .champion-skill
  .champion-skill-name {
  color: hsla(0, 0%, 100%, 0.9);
  font-size: 18px;
}
.set-update .set-content .set-champion .champion-info .champion-description {
  font-size: 16px;
  line-height: 1.8em;
  margin-bottom: 10px;
}
.set-update .set-content .set-champion .champion-info .champion-bonus-list {
  margin-bottom: 0;
}
.set-update
  .set-content
  .set-champion
  .champion-info
  .champion-bonus-list
  .champion-bonus-item {
  font-size: 16px;
  color: #88a0a7;
  list-style: none;
  margin-left: 0;
  margin-bottom: 5px;
}
.set-update
  .set-content
  .set-champion
  .champion-info
  .champion-bonus-list
  .champion-bonus-item
  b {
  font-weight: 400;
  margin-right: 10px;
}
.set-update .set-content .set-item {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: calc(33.33% - 20px);
  background: #102531;
  border: 1px solid #17313a;
  border-radius: 3px;
  padding: 20px 20px 5px;
  margin: 10px;
}
.set-update .set-content .set-item .set-item-header {
  display: flex;
  width: 100%;
}
.set-update .set-content .set-item .item-icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid #17313a;
}
.set-update .set-content .set-item .item-title {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.set-update .set-content .set-item .item-title .item-name {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-right: 20px;
  line-height: 1.3em;
}
.set-update .set-content .set-item .item-title .item-count {
  color: #88a0a7;
  font-size: 15px;
  margin: 0;
}
.set-update .set-content .set-item .item-stats {
  display: flex;
}
.set-update .set-content .set-item .item-stats .item-stat {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: #88a0a7;
}
.set-update .set-content .set-item .item-stats .item-stat .item-stat-icon {
  width: 14px;
  margin-right: 3px;
}
.set-update .set-content .set-item .item-stats .item-stat:first-child {
  margin-right: 10px;
}
.set-update .set-content .set-item .item-recipe {
  display: flex;
}
.set-update .set-content .set-item .item-recipe .item-recipe-icon {
  width: 30px;
  height: 30px;
  border: 1px solid #17313a;
}
.set-update .set-content .set-item .item-recipe .item-recipe-icon:last-child {
  margin-left: 5px;
}
.set-update .set-content .set-item .item-description {
  width: 100%;
  font-size: 16px;
  line-height: 1.8em;
  margin-top: 10px;
}
.set-update .set-content .set-systems {
  width: 100%;
}
.set-update .set-content .systems-list {
  width: calc(100% - 20px);
  border: 1px solid #17313a;
  padding: 20px;
  background: #102531;
  margin: 10px 10px 40px;
}
.set-update .set-content .systems-list .systems-list-description {
  line-height: 1.8em;
  color: hsla(0, 0%, 100%, 0.9);
}
.set-update .set-content .systems-list .systems-list-item {
  font-size: 16px;
}
.set-update .set-content .systems-table {
  width: calc(100% - 20px);
  margin: 10px;
}
.set-update .set-content .systems-table .ReactTable {
  margin: 0;
}
.set-update .set-content h3 {
  font-size: 18px;
  letter-spacing: 0.1em;
  padding: 0 15px 15px;
  border-bottom: 4px solid #227aad;
  text-transform: uppercase;
}
.set-update .set-content p {
  align-self: center;
  color: hsla(0, 0%, 100%, 0.9);
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 40px;
}
.set-update .set-content p b {
  color: #fff;
}
.set-update .set-content p a {
  color: hsla(0, 0%, 100%, 0.9);
  font-weight: 600;
  text-decoration: underline;
}
.set-update .set-content ul {
  margin-bottom: 30px;
}
.set-update .set-content ul li {
  list-style: disc outside none;
  list-style: initial;
  font-size: 18px;
  font-weight: 300;
  margin: 0 0 10px 35px;
  line-height: 1.8em;
}
.set-update .set-content ul li ul {
  margin: 10px 0 0;
}
.set-update .set-content ul li ul li {
  list-style: circle;
}
.set-update .set-content .cta {
  display: flex;
}
.set-update .set-content .divider {
  margin-top: 0;
  margin-bottom: 10px;
}
.set-update .set-content .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  background: #4080b0;
  border: none;
  border-radius: 0;
  padding: 10px 30px;
  box-shadow: inset 0 0 2px 0 #0d202b;
  border-radius: 3px;
  transition: all 0.3s;
  margin: 0 10px;
}
.set-update .set-content .btn:hover {
  background: #2c98d6;
  border: none;
}
.set-update .set-content .set-highlights {
  margin: 50px;
  width: 100%;
  max-width: 1110px;
  border: 1px solid #17313a;
  border-radius: 3px;
}
@media (max-width: 991.98px) {
  .set-update .set-content .set-champion,
  .set-update .set-content .set-item,
  .set-update .set-content .set-trait {
    width: calc(50% - 20px);
  }
}
@media (max-width: 767.98px) {
  .set-update .set-content .set-champion,
  .set-update .set-content .set-item,
  .set-update .set-content .set-trait {
    width: 100%;
  }
  .set-update .set-navigation {
    flex-wrap: wrap;
  }
  .set-update .set-navigation .btn,
  .set-update .set-navigation .btn:hover {
    border-right: none;
    border-bottom: 1px solid #17313a;
  }
  .set-update .set-navigation .btn:last-child {
    border-bottom: none;
  }
  .set-update .set-content {
    padding: 20px 10px !important;
  }
}
.profile-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #102531;
  border: 1px solid #17313a;
  border-radius: 3px;
  padding: 50px 20px;
}
.profile-error p {
  margin: 10px 0 0;
}
.main {
  flex: 1 1;
}
.sidebar {
  margin-bottom: 30px;
}
.main,
.sidebar {
  padding: 0;
}
.container {
  margin-bottom: 50px;
  padding: 0 15px;
}
.row {
  margin: 0;
}
@media (max-width: 991.99px) {
  .container {
    padding: 15px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 932px;
    padding: 0;
  }
  .main {
    padding: 0 0 0 30px;
    border-left: 1px solid #17313a;
  }
  .sidebar {
    width: 300px;
    max-width: 300px;
    margin-right: 30px;
    padding: 0;
    flex: none;
  }
}
@media (min-width: 1260px) {
  .container {
    max-width: 1200px;
  }
}
.board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 700px;
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  list-style-type: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.board.active .hex .hexIn .hexLink {
  background: #183f54;
}
.board .hex {
  display: inline-block;
  text-align: left;
  position: relative;
  width: 72px;
  height: 42px;
  margin: 20px 5px;
  background-color: #102531;
  background-size: auto 80px;
  background-position: 50%;
  border-left: 3px solid #17313a;
  border-right: 3px solid #17313a;
  cursor: pointer;
}
.board .hex.c1 {
  border-right-color: #213042;
  border-left-color: #213042;
}
.board .hex.c1 .hexTop {
  border-top-color: #213042;
  border-right-color: #213042;
}
.board .hex.c1 .hexBottom {
  border-bottom-color: #213042;
  border-left-color: #213042;
}
.board .hex.c2 {
  border-right-color: #156831;
  border-left-color: #156831;
}
.board .hex.c2 .hexTop {
  border-top-color: #156831;
  border-right-color: #156831;
}
.board .hex.c2 .hexBottom {
  border-bottom-color: #156831;
  border-left-color: #156831;
}
.board .hex.c3 {
  border-right-color: #12407c;
  border-left-color: #12407c;
}
.board .hex.c3 .hexTop {
  border-top-color: #12407c;
  border-right-color: #12407c;
}
.board .hex.c3 .hexBottom {
  border-bottom-color: #12407c;
  border-left-color: #12407c;
}
.board .hex.c4 {
  border-right-color: #893088;
  border-left-color: #893088;
}
.board .hex.c4 .hexTop {
  border-top-color: #893088;
  border-right-color: #893088;
}
.board .hex.c4 .hexBottom {
  border-bottom-color: #893088;
  border-left-color: #893088;
}
.board .hex.c5 {
  border-right-color: #b89d27;
  border-left-color: #b89d27;
}
.board .hex.c5 .hexTop {
  border-top-color: #b89d27;
  border-right-color: #b89d27;
}
.board .hex.c5 .hexBottom {
  border-bottom-color: #b89d27;
  border-left-color: #b89d27;
}
.board .hex.filled:hover .character-level {
  opacity: 1;
}
.board .hex.active .hexIn .hexLink {
  background: #227aad;
}
.board .hex:after {
  content: "";
  display: block;
  padding-bottom: 90%;
}
.board .hex .hexBottom,
.board .hex .hexTop {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  width: 50px;
  height: 50px;
  left: 8px;
}
.board .hex .hexBottom:after,
.board .hex .hexTop:after {
  content: "";
  position: absolute;
  transform-origin: 0 0;
  background: inherit;
  width: 64.5px;
  height: 41px;
  transform: rotate(45deg) scaleY(1.7) translateY(-20.5px);
}
.board .hex .hexTop {
  top: -25px;
  border-top: 4px solid #17313a;
  border-right: 4px solid #17313a;
}
.board .hex .hexTop:after {
  background-position: top;
}
.board .hex .hexBottom {
  bottom: -25px;
  border-bottom: 4px solid #17313a;
  border-left: 4px solid #17313a;
}
.board .hex .hexBottom:after {
  background-position: bottom;
}
.board .hex .character-level {
  opacity: 0;
  color: #6497af;
  position: absolute;
  top: -25px;
  left: 50%;
  font-size: 20px;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  letter-spacing: -3px;
  margin-left: -1px;
  text-shadow: 0 2px 5px #000, 0 2px 5px #000;
  z-index: 10;
}
.board .hex .character-level.active {
  opacity: 1;
  color: #e4c157;
}
.board .hex .characters-item {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  z-index: 5;
}
.board .hex .characters-item .character-wrapper {
  margin: 0;
}
.board .hex .characters-item .character-wrapper .character-icon {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  opacity: 0;
}
.board .hex .character-items {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.board .hex .character-items .characters-item {
  position: static;
  width: auto;
  padding: 0;
  justify-items: flex-start;
  transform: none;
}
.board .hex .character-items .characters-item .character-wrapper {
  padding: 0;
  margin: 0;
}
.board
  .hex
  .character-items
  .characters-item
  .character-wrapper
  .character-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-color: #17313a;
  opacity: 1;
}
.board .hex .hexIn {
  width: 80%;
  padding-bottom: 93.923%;
  margin: 0 2%;
  visibility: hidden;
  transform: rotate(-60deg) skewY(30deg);
}
.board .hex .hexIn,
.board .hex .hexIn .hexLink {
  position: absolute;
  overflow: hidden;
  outline: 1px solid transparent;
}
.board .hex .hexIn .hexLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  background: #123040;
  visibility: visible;
  transform: skewY(-30deg) rotate(60deg);
}
.board .hex .hexIn .hexLink .characters-item {
  position: absolute;
  left: -100%;
  right: -100%;
  top: -13px;
  width: 110%;
  height: 110%;
  margin: 0 auto;
  justify-items: flex-start;
}
.board
  .hex
  .hexIn
  .hexLink
  .characters-item
  .character-wrapper
  .character-icon {
  width: 84px;
  height: 84px;
  min-width: 84px;
  min-height: 84px;
}
.board.four-row .hex:nth-child(14n + 8) {
  margin-left: 12%;
}
@media (max-width: 1259.98px) {
  .builder .board-full .drag-zone {
    margin-top: 50px;
  }
  .board {
    width: 440px;
  }
  .board .hex {
    width: 44px;
    height: 26px;
    margin: 12px 5px;
    background-size: auto 46px;
  }
  .board .hex .hexBottom,
  .board .hex .hexTop {
    width: 30px;
    height: 30px;
    left: 4px;
  }
  .board .hex .hexBottom:after,
  .board .hex .hexTop:after {
    width: 37px;
    height: 22px;
    transform: rotate(45deg) scaleY(1.7) translateY(-11px);
  }
  .board .hex .hexTop {
    top: -15px;
  }
  .board .hex .hexBottom {
    bottom: -15px;
  }
  .board .hex .characters-item {
    top: -12px;
  }
  .board .hex .characters-item .character-wrapper .character-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
  }
  .board .hex .character-level {
    top: -18px;
    font-size: 14px;
  }
  .board
    .hex
    .character-items
    .characters-item
    .character-wrapper
    .character-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
  }
}
@media (max-width: 767.98px) {
  .builder .board-full .drag-zone {
    margin-left: 0;
    margin-top: 30px;
  }
}
@media (max-width: 575.98px) {
  .builder .board-full .builder-bonus.builder-board {
    padding: 0;
  }
  .board {
    width: 100%;
  }
  .board .hex {
    width: 34px;
    height: 20px;
    margin: 10px 5px;
  }
  .board .hex .hexBottom,
  .board .hex .hexTop {
    width: 24px;
    height: 24px;
    left: 2px;
  }
  .board .hex .hexTop {
    top: -12px;
  }
  .board .hex .hexBottom {
    bottom: -12px;
  }
  .builder .board-full .drag-zone .characters-list.champions .characters-item {
    width: 12.5%;
  }
  .builder .board-full .drag-zone .characters-list.items .characters-item {
    width: 10%;
  }
}
.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 50px;
  background: transparent;
  z-index: 100;
  margin-bottom: 30px;
  background: #102531;
  border-bottom: 1px solid #17313a;
}
.nav.toolbar {
  height: 50px;
  margin-bottom: 0;
  background: #0d202b;
  z-index: 150;
}
.nav .dropdown {
  align-self: center;
}
.nav .set-btn {
  margin: 0 5px;
}
.nav .set-btn .dropdown-toggle {
  justify-content: space-between;
  min-height: 0;
  color: hsla(0, 0%, 100%, 0.9);
  font-size: 14px;
  background: #123040;
  border: none;
  padding: 6px 12px;
  border-radius: 3px;
  transition: none;
}
.nav .set-btn .dropdown-toggle:focus,
.nav .set-btn .dropdown-toggle:not(:disabled):not(.disabled):active {
  color: hsla(0, 0%, 100%, 0.9);
  background: #123040;
  box-shadow: none;
}
.nav .set-btn .dropdown-toggle:after {
  margin-left: 20px;
}
.nav .set-btn.show .dropdown-toggle {
  color: hsla(0, 0%, 100%, 0.9);
  background: #123040;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.nav .set-btn.show .dropdown-toggle:focus,
.nav .set-btn.show .dropdown-toggle:not(:disabled):not(.disabled):active {
  background: #123040;
  box-shadow: none;
}
.nav .set-btn.show .dropdown-menu {
  border: 1px solid #17313a;
}
.nav .set-btn .dropdown-menu {
  width: 100%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  font-size: 14px;
  margin: 0;
  padding: 0;
  background: #102531;
  border: none;
}
.nav .set-btn .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  color: hsla(0, 0%, 100%, 0.9);
  padding: 0 12px;
  height: 40px;
}
.nav .set-btn .dropdown-menu .dropdown-item:focus,
.nav .set-btn .dropdown-menu .dropdown-item:hover {
  background: #112d3c;
  outline: none;
  box-shadow: none;
}
.nav .set-btn .dropdown-menu .dropdown-item.active,
.nav .set-btn .dropdown-menu .dropdown-item:active {
  background: #227aad;
}
.nav .set-btn .dropdown-menu .dropdown-item:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.nav .nav-brand {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-right: 15px;
  padding: 10px 0;
}
.nav .nav-brand .brand {
  height: 22px;
}
.nav .nav-wrapper {
  display: flex;
  height: 100%;
  padding: 0;
}
.nav .cta-btn,
.nav .cta-btn .btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav .cta-btn .btn {
  min-height: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  background: #4080b0;
  border: none;
  border-radius: 0;
  padding: 7px 12px;
  box-shadow: inset 0 0 2px 0 #0d202b;
  border-radius: 3px;
  margin-left: 15px;
  transition: all 0.3s;
}
.nav .cta-btn .btn:hover {
  background: #2c98d6;
  border: none;
}
.nav .nav-links {
  justify-content: center;
  height: 100%;
}
.nav .nav-links .nav-item {
  flex-grow: 1;
  height: 100%;
}
.nav .nav-links .nav-item.dropdown .nav-link.active {
  color: #88a0a7;
}
.nav .nav-links .nav-item.dropdown .nav-link:before {
  content: none;
}
.nav .nav-links .nav-item .nav-link {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: auto;
  height: 100%;
  color: #88a0a7;
  font-size: 15px;
  font-weight: 400;
  padding: 0 10px;
  transition: all 0.3s;
  background: transparent;
}
.nav .nav-links .nav-item .nav-link:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  background: #d47559;
  transition: width 0.3s;
}
.nav .nav-links .nav-item .nav-link:active,
.nav .nav-links .nav-item .nav-link:focus,
.nav .nav-links .nav-item .nav-link:hover {
  color: #fff;
}
.nav .nav-links .nav-item .nav-link.new:after {
  content: "NEW";
  color: #579dd4;
  margin-left: 5px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.025em;
  width: 8px;
  height: 8px;
}
.nav .nav-links .nav-item .nav-link.newpatch:after {
  content: "";
  background: #579dd4;
  margin-left: 5px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.025em;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  box-shadow: 0 0 10px #579dd4;
}
.nav .nav-links .nav-item .dropdown-toggle {
  cursor: pointer;
}
.nav .nav-links .nav-item .dropdown-toggle:after {
  content: none;
}
.nav .nav-links .nav-item .dropdown-menu {
  min-width: 200px;
  padding: 5px 0;
  border-radius: 0;
  margin: 0;
  white-space: nowrap;
  background: #102531;
  border: 1px solid #17313a;
  box-shadow: 0 10px 20px #0a1a23;
}
.nav .nav-links .nav-item .dropdown-menu .nav-link {
  justify-content: flex-start;
  color: #88a0a7;
  font-weight: 400;
  background: transparent;
  padding: 15px 30px;
}
.nav .nav-links .nav-item .dropdown-menu .nav-link:hover {
  color: #fff;
}
.nav .nav-links .nav-item .dropdown-menu .nav-link.new:after {
  content: "NEW";
  color: #579dd4;
  margin-left: 5px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.025em;
  width: 8px;
  height: 8px;
}
.nav .nav-links .nav-item .dropdown-menu .nav-link.active,
.nav .nav-links .nav-item .dropdown-menu .nav-link.active:hover {
  color: #fff;
}
.nav .nav-links .nav-item .dropdown-menu .nav-link.active:before {
  width: 0;
}
.nav .nav-links .nav-item .dropdown-menu.open {
  display: block;
}
.nav .nav-links .nav-item .nav-link.active {
  color: #fff;
}
.nav .nav-links .nav-item .nav-link.active:before {
  width: 100%;
}
.nav .nav-links .nav-item.new .nav-link {
  opacity: 1;
  color: #88a0a7;
  transition: color 0.3s;
}
.nav .nav-links .nav-item.new .nav-link:active,
.nav .nav-links .nav-item.new .nav-link:focus,
.nav .nav-links .nav-item.new .nav-link:hover {
  color: #fff;
}
.nav .nav-links .nav-item.new .nav-link.active {
  color: hsla(0, 0%, 100%, 0.9);
}
.nav .nav-links .nav-item.new .nav-link:after {
  content: "NEW";
  color: #579dd4;
  margin-left: 5px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.025em;
}
.nav .nav-links .nav-item.disabled {
  pointer-events: none;
}
.nav .nav-links .nav-item.disabled .nav-link {
  opacity: 0.3;
  text-decoration: line-through;
}
.hamburger {
  display: flex;
  align-items: center;
  overflow: visible;
  margin: 0;
  padding: 15px;
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: 0.15s;
  transition-property: opacity, -webkit-filter;
  transition-property: opacity, filter;
  transition-property: opacity, filter, -webkit-filter;
  text-transform: none;
  color: inherit;
  border: 0;
  background-color: initial;
  z-index: 400;
}
.hamburger .hamburger-box {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 20px;
}
.hamburger .hamburger-box .hamburger-inner {
  position: absolute;
  width: 25px;
  height: 3px;
  border-radius: 3px;
  background-color: #fff;
  top: 50%;
  display: block;
  margin-top: -2px;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition-duration: 0.22s;
  transition-property: transform;
}
.hamburger .hamburger-box .hamburger-inner:after,
.hamburger .hamburger-box .hamburger-inner:before {
  content: "";
  position: absolute;
  display: block;
  width: 25px;
  height: 3px;
  transition-timing-function: ease;
  transition-duration: 0.15s;
  transition-property: transform;
  border-radius: 3px;
  background-color: #fff;
}
.hamburger .hamburger-box .hamburger-inner:before {
  top: -7px;
  transition: top 0.1s ease-in 0.25s, opacity 0.1s ease-in;
}
.hamburger .hamburger-box .hamburger-inner:after {
  bottom: -7px;
  transition: bottom 0.1s ease-in 0.25s,
    transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger.is-active .hamburger-box .hamburger-inner {
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: rotate(225deg);
}
.hamburger.is-active .hamburger-box .hamburger-inner:before {
  top: 0;
  transition: top 0.1s ease-out, opacity 0.1s ease-out 0.12s;
  opacity: 0;
}
.hamburger.is-active .hamburger-box .hamburger-inner:after {
  bottom: 0;
  transition: bottom 0.1s ease-out,
    transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
  transform: rotate(-90deg);
}
.mobile-menu {
  position: absolute;
  top: 60px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: calc(100vh - 60px);
  background: #0d202b;
  z-index: -14;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  padding: 50px 100px;
}
.mobile-menu h2 {
  margin-bottom: 30px;
}
.mobile-menu .mobile-links {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mobile-menu .mobile-links .mobile-item {
  margin: 20px 0;
}
.mobile-menu .mobile-links .mobile-item .mobile-link {
  color: #fff;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
}
.mobile-menu .mobile-links .mobile-item.disabled .mobile-link {
  opacity: 0.4;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.dropdown {
  margin: 0;
}
.dropdown.lang .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  font-size: 14px;
  margin-right: 0;
}
.dropdown.lang .dropdown-toggle:after {
  display: none;
}
.dropdown.lang .dropdown-menu {
  min-width: 0;
  width: 50px;
  background: #102531;
  font-size: 14px;
}
.dropdown.lang .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropdown.lang.show .dropdown-toggle {
  background: #0d202b;
}
.dropdown .dropdown-toggle {
  justify-content: space-between;
  width: 100px;
  min-height: 0;
  color: hsla(0, 0%, 100%, 0.9);
  font-size: 14px;
  background: #123040;
  border: none;
  padding: 6px 12px;
  border-radius: 3px;
  transition: none;
}
.dropdown .dropdown-toggle:focus,
.dropdown .dropdown-toggle:not(:disabled):not(.disabled):active {
  color: hsla(0, 0%, 100%, 0.9);
  background: #123040;
  box-shadow: none;
}
.dropdown .dropdown-toggle:after {
  margin-left: 20px;
}
.dropdown.show .dropdown-toggle {
  color: hsla(0, 0%, 100%, 0.9);
  background: #123040;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dropdown.show .dropdown-toggle:focus,
.dropdown.show .dropdown-toggle:not(:disabled):not(.disabled):active {
  background: #123040;
  box-shadow: none;
}
.dropdown.show .dropdown-menu {
  border: 1px solid #17313a;
}
.dropdown .dropdown-menu {
  width: 100%;
  min-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  font-size: 14px;
  margin: 0;
  padding: 0;
  background: #102531;
  border: none;
}
.dropdown .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  color: hsla(0, 0%, 100%, 0.9);
  padding: 0 12px;
  height: 40px;
}
.dropdown .dropdown-menu .dropdown-item:focus,
.dropdown .dropdown-menu .dropdown-item:hover {
  background: #112d3c;
  outline: none;
  box-shadow: none;
}
.dropdown .dropdown-menu .dropdown-item.active,
.dropdown .dropdown-menu .dropdown-item:active {
  background: #227aad;
}
.dropdown .dropdown-menu .dropdown-item:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
@media (max-width: 1259.98px) {
  .nav .nav-brand {
    margin-right: 15px;
  }
  .nav .nav-links {
    flex-grow: 1;
    margin-left: 0 !important;
  }
  .nav .nav-links .nav-item {
    flex-grow: 1;
  }
  .nav .nav-links .nav-item .nav-link {
    font-size: 15px;
    padding: 0 5px;
  }
  .searchbar.player-search {
    margin: 0 30px;
  }
  .set-update .set-header {
    flex-direction: column;
  }
  .set-update .set-header .set-logo {
    width: 300px;
    margin: 0;
  }
  .set-update .set-header .set-date h1 {
    margin-top: 20px;
    text-align: center;
    font-size: 24px;
  }
  .set-update .set-header .set-date h2 {
    margin-top: 10px;
    text-align: center;
    font-size: 18px;
  }
  .set-update .set-content {
    font-size: 16px;
    padding: 20px;
  }
  .set-update .row {
    width: 100%;
  }
  .set-update .cta {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
  }
  .set-update .cta .btn {
    width: 100%;
    margin-bottom: 5px;
  }
  .set-update .set-content .set-highlights {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .mobile-menu .mobile-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .mobile-menu .mobile-links .mobile-item {
    width: 50%;
    display: flex;
    justify-content: center;
  }
  .searchbar.player-search {
    display: none;
  }
  .set-update-banner .update-subtitle,
  .set-update-banner .update-title {
    text-align: center;
    font-size: 18px;
  }
}
@media (max-width: 575.98px) {
  .set-update-banner .update-subtitle,
  .set-update-banner .update-title {
    font-size: 16px;
  }
  .mobile-menu .mobile-links {
    width: auto;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .mobile-menu .mobile-links .mobile-item {
    width: auto;
  }
  .nav .nav-brand {
    margin-left: 15px;
  }
}
.mid-update .update-subtitle,
.mid-update .update-title {
  text-align: center;
}
.nav .nav-links {
  display: flex;
}
.ad-wrapper {
  position: relative;
  width: 100%;
}
.ad-wrapper.banner {
  margin-bottom: 30px;
}
.ad-wrapper.foot {
  margin-top: 30px;
}
.ad-wrapper.banner,
.ad-wrapper.foot {
  height: 90px;
}
.ad-wrapper.banner .ad-tag,
.ad-wrapper.foot .ad-tag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.ad-wrapper.mobile-banner {
  margin-bottom: 30px;
}
.ad-wrapper.mobile-footer {
  margin-top: 30px;
}
.ad-wrapper.mobile-banner,
.ad-wrapper.mobile-footer {
  height: 50px;
}
.ad-wrapper.mobile-banner .ad-tag,
.ad-wrapper.mobile-footer .ad-tag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.ad-wrapper.side {
  margin-top: 30px;
  height: 250px;
}
.ad-wrapper.left,
.ad-wrapper.small-left {
  left: 0;
}
.ad-wrapper.right,
.ad-wrapper.small-right {
  right: 0;
}
.ad-wrapper.left,
.ad-wrapper.right {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 600px;
}
.ad-wrapper.small-left,
.ad-wrapper.small-right {
  position: fixed;
  top: 100px;
  width: 160px;
  height: 600px;
}
#nn_mpu1 {
  margin-top: 20px;
}
#nn_lb1,
#nn_lb2 {
  display: flex;
}
#nn_lb1,
#nn_lb2,
#nn_mobile_mpu1,
#nn_mobile_mpu2 {
  align-items: center;
  justify-content: center;
  text-align: center;
}
#nn_mobile_mpu1,
#nn_mobile_mpu2 {
  display: none;
  margin: 0 auto;
}
.wrapper-lb1 {
  position: relative;
  width: 729px;
  height: 91px;
  margin: 0 auto;
}
#nn_1by1 {
  z-index: 1000 !important;
}
@media (min-width: 992px) {
  .wrapper-lb1 {
    margin-bottom: 30px;
  }
  #nn_lb2,
  .container-fluid #nn_lb1 {
    margin-top: 30px;
  }
}
@media (max-width: 991.98px) {
  .set-update-banner {
    margin-top: 30px;
  }
  .wrapper-lb1 {
    display: none;
  }
  #nn_mobile_mpu1 {
    display: flex;
    margin-bottom: 30px;
  }
  #nn_mobile_mpu2 {
    display: flex;
    margin-top: 30px;
  }
}
#nn_skinl,
#nn_skinr {
  position: relative;
  z-index: 50;
}
@media (max-width: 1850px) {
  #nn_skinl,
  #nn_skinr {
    display: none !important;
  }
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin-bottom: 40px;
}
.sidebar-header .summoner-rank {
  width: 100px;
}
.sidebar-header .summoner-info {
  display: flex;
  flex-direction: column;
}
.sidebar-header .summoner-info .summoner-name {
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsla(0, 0%, 100%, 0.9);
  font-weight: 700;
}
.sidebar-header .summoner-info .summoner-name h1 {
  margin: 0;
}
.sidebar-header .summoner-info .summoner-name .summoner-region {
  font-size: 14px;
  border-radius: 3px;
  background: #123040;
  padding: 1px 8px;
  font-weight: 600;
  color: #88a0a7;
  margin-left: 10px;
  text-transform: uppercase;
}
.sidebar-header .summoner-info .summoner-tier {
  color: #88a0a7;
  text-transform: capitalize;
}
.sidebar-stats {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  align-content: flex-start;
  overflow: auto;
  background: #102531;
  border-radius: 3px;
  border: 1px solid #17313a;
  color: #88a0a7;
  margin-bottom: 20px;
}
.sidebar-stats::-webkit-scrollbar {
  width: 7px;
  background: #0d202b;
}
.sidebar-stats::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background: #0d202b;
}
.sidebar-stats::-webkit-scrollbar-thumb {
  background-color: #227aad;
}
.sidebar-stats .sidebar-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #17313a;
}
.sidebar-stats .sidebar-stat:last-child {
  border-bottom: none;
}
.sidebar-stats .sidebar-stat .stat-title {
  width: 80px;
}
.sidebar-stats .sidebar-stat .stat-bar {
  flex-grow: 1;
  height: 5px;
  background: #123040;
  border-radius: 100px;
  margin: 0 10px;
  overflow: hidden;
}
.sidebar-stats .sidebar-stat .stat-bar .bar-fill {
  display: block;
  max-width: 100%;
  height: 100%;
  background: #227aad;
}
.sidebar-stats .sidebar-stat .stat-value {
  width: 80px;
  display: flex;
  justify-content: flex-end;
  font-weight: 700;
}
.sidebar-stats .sidebar-stat .stat-value span {
  margin-left: 5px;
  color: #88a0a7;
}
.sidebar-stats .sidebar-stat.alt .stat-value {
  width: auto;
  font-weight: 300;
}
.profile-trends {
  display: flex;
  color: #88a0a7;
  background: #102531;
  border: 1px solid #17313a;
  border-radius: 3px;
  margin-bottom: 20px;
}
.profile-trends .trends-group {
  display: flex;
  flex-direction: column;
  width: 33.33%;
  border-right: 1px solid #17313a;
}
.profile-trends .trends-group:last-child {
  border-right: none;
}
.profile-trends .trends-group .trends-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 10px;
  border-bottom: 1px solid #17313a;
}
.profile-trends .trends-group .trends-row {
  display: flex;
  align-items: center;
  flex-grow: 1;
  font-size: 14px;
  border-bottom: 1px solid #17313a;
}
.profile-trends .trends-group .trends-row:last-child {
  border-bottom: none;
}
.profile-trends .trends-group .trends-row .trends-rank {
  width: 10%;
  font-size: 12px;
  padding: 10px;
}
.profile-trends .trends-group .trends-row .trends-item {
  width: 60%;
  padding: 10px;
  display: flex;
  align-items: center;
  color: hsla(0, 0%, 100%, 0.9);
}
.profile-trends .trends-group .trends-row .trends-count {
  width: 30%;
  text-align: right;
  padding: 10px;
}
.profile-trends .trends-group .trends-row .trends-count .trends-frequency {
  color: hsla(0, 0%, 100%, 0.9);
}
.profile-trends .trends-group .trends-row .trends-count .trends-games {
  font-size: 12px;
}
.profile-trends .trends-group .trends-row .characters-item {
  flex-direction: row;
  width: auto;
  padding: 0;
  justify-items: flex-start;
  color: hsla(0, 0%, 100%, 0.9);
}
.profile-trends .trends-group .trends-row .characters-item.l2:before {
  content: "★★";
  color: #a3d6e4;
  position: absolute;
  top: -10px;
  left: 17px;
  font-size: 14px;
  transform: translateX(-50%);
  z-index: 10;
  width: 100%;
  text-align: center;
  text-shadow: 0 3px 3px #000;
  letter-spacing: -3px;
  margin-left: -1px;
}
.profile-trends .trends-group .trends-row .characters-item.l3:before {
  top: -10px;
  left: 17px;
}
.profile-trends .trends-group .trends-row .characters-item .character-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  margin-right: 7px;
  padding: 0;
  transition: all 0.3s;
}
.profile-trends
  .trends-group
  .trends-row
  .characters-item
  .character-wrapper
  .character-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  float: left;
  transition: all 0.3s;
}
.profile-trends .trends-group .trends-row .builder-bonus-item {
  min-width: 40px;
  width: 40px;
  margin-right: 10px;
}
.profile-trends
  .trends-group
  .trends-row
  .builder-bonus-item
  .builder-bonus-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  width: 28px;
  height: 16px;
  margin: 6.93px 0;
}
.profile-trends
  .trends-group
  .trends-row
  .builder-bonus-item
  .builder-bonus-icon
  img {
  width: 18px;
  z-index: 2;
}
.profile-trends
  .trends-group
  .trends-row
  .builder-bonus-item
  .builder-bonus-icon:after,
.profile-trends
  .trends-group
  .trends-row
  .builder-bonus-item
  .builder-bonus-icon:before {
  content: "";
  position: absolute;
  width: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  z-index: 1;
}
.profile-trends
  .trends-group
  .trends-row
  .builder-bonus-item
  .builder-bonus-icon:before {
  bottom: 100%;
  border-bottom: 10px solid transparent;
  border-left-width: 14px;
  border-right-width: 14px;
}
.profile-trends
  .trends-group
  .trends-row
  .builder-bonus-item
  .builder-bonus-icon:after {
  top: 100%;
  width: 0;
  border-top: 8px solid transparent;
}
.profile-trends
  .trends-group
  .trends-row
  .builder-bonus-item
  .builder-bonus-icon
  .builder-bonus-counter {
  position: absolute;
  top: 50%;
  left: calc(100% - 5px);
  transform: translateY(-50%);
  height: 22px;
  width: 22px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.profile-trends
  .trends-group
  .trends-row
  .builder-bonus-item
  .builder-bonus-icon
  .builder-bonus-counter
  span {
  display: inline-block;
  line-height: 1em;
  margin-top: -3px;
}
.history-matches {
  color: hsla(0, 0%, 100%, 0.9);
}
.history-matches .history-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: #102531;
  margin: 20px 0;
  padding: 10px 15px 10px 5px;
  border: 1px solid #17313a;
  border-left-width: 4px;
}
.history-matches .history-match.r1 {
  border-left: 4px solid #bd9a38;
}
.history-matches .history-match.r2 {
  border-left: 4px solid #7c8f92;
}
.history-matches .history-match.r3 {
  border-left: 4px solid #a0715e;
}
.history-matches .history-match.r4 {
  border-left: 4px solid #284454;
}
.history-matches .history-match.expanded {
  padding-bottom: 0;
}
.history-matches .history-match.expanded .match-more i.down {
  transform: rotate(-135deg);
}
.history-matches .history-match .match-rank {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  padding: 0 10px;
}
.history-matches .history-match .match-rank .match-placement {
  font-size: 16px;
  font-weight: 400;
  color: hsla(0, 0%, 100%, 0.9);
}
.history-matches .history-match .match-rank .match-details {
  font-size: 12px;
  font-weight: 300;
  color: #88a0a7;
  letter-spacing: 0.05em;
  line-height: 1.8em;
}
.history-matches .history-match .match-rank .match-details .match-galaxy {
  display: flex;
  align-items: center;
  color: #88a0a7;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.05em;
}
.history-matches
  .history-match
  .match-rank
  .match-details
  .match-galaxy
  .info-icon {
  width: 10px;
  opacity: 0.54;
  margin-left: 5px;
}
.history-matches .history-match .match-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: calc(100% - 250px);
}
.history-matches .history-match .match-characters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-grow: 1;
}
.history-matches .history-match .match-characters .characters-item {
  position: relative;
  width: auto;
  padding: 0;
}
.history-matches .history-match .match-characters .characters-item.l1:before,
.history-matches .history-match .match-characters .characters-item.l2:before,
.history-matches .history-match .match-characters .characters-item.l3:before {
  position: absolute;
  top: -6px;
  left: 50%;
  font-size: 14px;
  transform: translateX(-50%);
  z-index: 10;
  width: 100%;
  text-align: center;
  text-shadow: 0 3px 3px #000;
  letter-spacing: -3px;
  margin-left: -1px;
}
.history-matches .history-match .match-characters .characters-item.l2:before {
  content: "★★";
  color: #a3d6e4;
}
.history-matches .history-match .match-characters .characters-item.l3:before {
  content: "★★★";
  color: #e4c157;
}
.history-matches
  .history-match
  .match-characters
  .characters-item
  .character-wrapper {
  padding: 5px;
  margin: 0;
}
.history-matches
  .history-match
  .match-characters
  .characters-item
  .character-wrapper
  .character-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.history-matches
  .history-match
  .match-characters
  .characters-item
  .character-items {
  display: flex;
  justify-content: center;
  margin-top: -10px;
}
.history-matches
  .history-match
  .match-characters
  .characters-item
  .character-items
  .characters-item {
  margin: 0;
}
.history-matches
  .history-match
  .match-characters
  .characters-item
  .character-items
  .characters-item
  .character-wrapper {
  padding: 0;
}
.history-matches
  .history-match
  .match-characters
  .characters-item
  .character-items
  .characters-item
  .character-wrapper
  .character-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-color: #17313a;
}
.history-matches .history-match .match-traits {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
}
.history-matches .history-match .match-traits .builder-bonus-item {
  min-width: 36px;
  width: 36px;
  margin: 2.5px;
}
.history-matches
  .history-match
  .match-traits
  .builder-bonus-item
  .builder-bonus-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  width: 24px;
  height: 12px;
  margin: 6.93px 0;
}
.history-matches
  .history-match
  .match-traits
  .builder-bonus-item
  .builder-bonus-icon:after,
.history-matches
  .history-match
  .match-traits
  .builder-bonus-item
  .builder-bonus-icon:before {
  content: "";
  position: absolute;
  width: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  z-index: 1;
}
.history-matches
  .history-match
  .match-traits
  .builder-bonus-item
  .builder-bonus-icon:before {
  bottom: 100%;
  border-bottom: 6.93px solid transparent;
  border-left-width: 12px;
  border-right-width: 12px;
}
.history-matches
  .history-match
  .match-traits
  .builder-bonus-item
  .builder-bonus-icon:after {
  top: 100%;
  width: 0;
  border-top: 6.93px solid transparent;
}
.history-matches
  .history-match
  .match-traits
  .builder-bonus-item
  .builder-bonus-icon
  img {
  width: 18px;
  z-index: 2;
}
.history-matches
  .history-match
  .match-traits
  .builder-bonus-item
  .builder-bonus-icon
  .builder-bonus-counter {
  position: absolute;
  top: 50%;
  left: calc(100% - 5px);
  transform: translateY(-50%);
  height: 15px;
  width: 15px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.history-matches
  .history-match
  .match-traits
  .builder-bonus-item
  .builder-bonus-icon
  .builder-bonus-counter
  span {
  display: inline-block;
  line-height: 1em;
  margin-top: -3px;
}
.history-matches
  .history-match
  .match-traits
  .builder-bonus-item
  .builder-bonus-count {
  display: none;
  height: 40px;
}
.meta .rt-td {
  color: hsla(0, 0%, 100%, 0.9);
}
.meta .builder-bonus-item {
  min-width: 40px;
  width: 40px;
  margin-right: 15px;
  color: #fff;
}
.meta .builder-bonus-item .builder-bonus-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  width: 28px;
  height: 16px;
  margin: 6.93px 0;
}
.meta .builder-bonus-item .builder-bonus-icon img {
  z-index: 2;
  border: none;
  margin: 0;
}
.meta .builder-bonus-item .builder-bonus-icon:after,
.meta .builder-bonus-item .builder-bonus-icon:before {
  content: "";
  position: absolute;
  width: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  z-index: 1;
}
.meta .builder-bonus-item .builder-bonus-icon:before {
  bottom: 100%;
  border-bottom: 10px solid transparent;
  border-left-width: 14px;
  border-right-width: 14px;
}
.meta .builder-bonus-item .builder-bonus-icon:after {
  top: 100%;
  width: 0;
  border-top: 8px solid transparent;
}
.meta .builder-bonus-item .builder-bonus-icon .builder-bonus-counter {
  position: absolute;
  top: 50%;
  left: calc(100% - 5px);
  transform: translateY(-50%);
  height: 22px;
  width: 22px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.meta .builder-bonus-item .builder-bonus-icon .builder-bonus-counter span {
  display: inline-block;
  line-height: 1em;
  margin-top: -3px;
}
.meta .team-portrait .table,
.meta .team-portrait .table .ReactTable {
  margin: 0;
}
.meta .team-portrait .team-nav {
  width: 100%;
  display: flex;
}
.meta .team-portrait .team-nav .team-nav-item {
  flex-grow: 1;
  background: #0d202b;
  padding: 5px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #17313a;
  border-right: none;
  border-bottom: none;
}
.meta .team-portrait .team-nav .team-nav-item:first-child {
  border-left: none;
}
.meta .team-portrait .team-nav .team-nav-item.active {
  background: #227aad;
}
.meta .meta-champion-table {
  background: #102531;
  border: 1px solid #17313a;
  border-radius: 3px;
  margin-top: 20px;
}
.meta .meta-champion-table .meta-champion-header {
  display: flex;
  color: #88a0a7;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #17313a;
  padding: 0 10px;
}
.meta .meta-champion-table .meta-champion-header .meta-champion-category {
  padding: 10px;
  text-align: center;
  width: 15%;
}
.meta
  .meta-champion-table
  .meta-champion-header
  .meta-champion-category:first-child {
  text-align: left;
}
.meta
  .meta-champion-table
  .meta-champion-header
  .meta-champion-category:nth-child(2) {
  width: 20%;
}
.meta .meta-champion-table .meta-champion-body {
  color: hsla(0, 0%, 100%, 0.9);
}
.meta .meta-champion-table .meta-champion-body .meta-champion {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #17313a;
}
.meta .meta-champion-table .meta-champion-body .meta-champion .rt-td,
.meta .meta-champion-table .meta-champion-body .meta-champion .rt-th {
  flex-grow: 0 !important;
  width: 15% !important;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .rt-td:first-child,
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .rt-th:first-child {
  width: 35% !important;
}
.meta .meta-champion-table .meta-champion-body .meta-champion.open {
  background: #0d202b !important;
  border: 1px solid #227aad;
}
.meta .meta-champion-table .meta-champion-body .meta-champion.open i.down {
  transform: rotate(-135deg) !important;
}
.meta .meta-champion-table .meta-champion-body .meta-champion .characters-item {
  width: auto;
  padding: 0;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .characters-item
  .character-wrapper {
  margin: 0;
  padding: 5px;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .characters-item
  .character-wrapper
  .character-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-character {
  display: flex;
  width: 15%;
  padding: 5px 15px;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-items {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  padding: 5px;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-items
  .characters-item {
  width: auto;
  padding: 0;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-items
  .characters-item
  .character-wrapper {
  margin: 0;
  padding: 5px;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-items
  .characters-item
  .character-wrapper
  .character-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 10px;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 10px;
  cursor: pointer;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-more
  i {
  width: 8px;
  height: 8px;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-more
  i.down {
  border: solid #88a0a7;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-expanded {
  width: 100%;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-expanded
  .ReactTable,
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-expanded
  .table {
  margin: 0;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-expanded
  .characters-item {
  width: auto;
  padding: 0;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-expanded
  .characters-item
  .character-wrapper {
  margin: 0;
  padding: 5px;
}
.meta
  .meta-champion-table
  .meta-champion-body
  .meta-champion
  .meta-champion-expanded
  .characters-item
  .character-wrapper
  .character-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}
.meta .meta-champion-table .meta-champion-body .meta-champion:nth-child(odd) {
  background: rgba(0, 0, 0, 0.03);
}
.meta .meta-champion-table .meta-champion-body .meta-champion:last-child {
  border: none;
}
.meta .meta-champion-table .meta-champion-body .meta-champion:hover {
  background: #0d202b;
}
.team-final {
  width: 100% !important;
  min-width: auto !important;
  border-top: 1px solid #17313a;
}
.team-final .team-final-title {
  font-size: 15px;
  width: 35%;
  min-width: 35%;
  padding: 10px 20px;
}
.lower {
  color: rgba(244, 67, 54, 0.815686);
}
.higher,
.lower {
  width: 50px;
  text-align: center;
  padding: 2px 0;
  border-radius: 3px;
}
.higher {
  color: #4caf50;
}
.equal {
  width: 50px;
  text-align: center;
  padding: 2px 0;
  color: hsla(0, 0%, 100%, 0.3);
  border-radius: 3px;
}