/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 01 2024 | 03:49:19 */
body {
  margin:0;
  padding:0;
  font-weight:400;
  line-height:1.35;
  color:var(--font-color-main);
  text-align:left;
  background-color:var(--ugg-background-main);
  height:auto !important;
}
:root {
  --ugg-background-main:#070720;
  --ugg-background:#0b0b23;
  --ugg-background-alt:#17172e;
  --ugg-background-alt-2:#222238;
  --ugg-background-alt-3:#17172e;
  --font-color-main:#fff;
  --font-color-alt:#bbbedb;
  --font-color-grey:#92929d;
  --font-color-grey-alt:#bbbedb;
  --forward-slash:#4f4f60;
  --border-color-grey:#2c2c40;
  --ugg-box-shadow:none;
  --ugg-common-blue:#08a6ff;
  --ugg-common-blue-hover:#008ad8;
  --ugg-success-green:#2a9b73;
  --ugg-success-volxd:#ff9b00;
  --input-bg:#31334a;
  --input-border-color:#31334a;
  --match-card-bg-win:rgba(8,166,255,0.3);
  --match-card-bg-win-hover:rgba(8,166,255,0.4);
  --match-card-win-inner-divider:#064b80;
  --match-card-bg-loss:#45192b;
  --match-card-bg-loss-hover:#511b2e;
  --match-card-loss-inner-divider:#5a1f2e;
  --match-card-bg-remake:#222238;
  --match-card-bg-remake-hover:#28283e;
  --match-card-remake-inner-divider:#17172e;
  --filter-color:#191937;
  --filter-not-default-font-color:#fff;
  --filter-option-selected:#313160;
}
.champion-profile-page,
.summoner-profile-container .summoner-profile_content-container,
.text-content-container {
  margin-left:auto !important;
  margin-right:auto !important;
}

.flex {
  display:flex;
}

#masthead .masthead-container .masthead-right,
#masthead .masthead-container .masthead-search-bar-container,
.btn-blue,
.btn-common,
.btn-dark,
.btn-gray,
.btn-light-blue,
.btn-red,
.btn-transparent,
.champion-profile-page .counters-container .counters-column .counters-list .view-more-btn,
.flex-center,
.landing-page-container .landing_account-features .features-list .account-feature .feature-icon_container,
.language-selector .language-selector_button .current-language,
.new-landing-page .ugg-boost_header .header-content_right,
.onboarding-container .bg-selection .bg-selection_content .splash-list .splash-container.is-selected .overlay,
.onboarding-container .bg-selection .bg-selection_content .splash-list .splash-container:hover .overlay,
.premium-confirmation.confirmation_welcome-to-boost,
.settings-page .settings-router .settings_premium .billing-info .premium-btn,
.settings-page .settings_no-user,
.user-verification-bar .user-verification-message {
  display:flex;
  justify-content:center;
  align-items:center;
}
.champion-skill-with-label {
  position:relative;
}

.champion-skill-with-label .skill-label {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:12px;
  height:12px;
  border-radius:50%;
  background-color:#383864;
  font-size:9px;
  font-weight:700;
  pointer-events:none;
}

.jedi .champion-skill-with-label .skill-label {
  color:#fff;
}

.champion-skill-with-label .skill-label.bottom-right {
  bottom:0;
  right:0;
  transform:translate(30%,30%);
}

.champion-skill-with-label .skill-label.bottom-center {
  bottom:1px;
  left:50%;
  transform:translate(-50%,50%);
  border:2px solid #17172e;
  box-sizing:content-box;
}

.jedi .champion-skill-with-label .skill-label.bottom-center {
  border-color:#fbfcff;
}

.skill-path-container {
  display:grid;
}

.skill-path-container .skill-order-row {
  display:flex;
  margin-bottom:6px;
}

.skill-path-container .skill-order-row .skill-row-label {
  display:flex;
  align-items:center;
  height:30px;
  max-width:224px;
  border-radius:3px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  background-color:#11112a;
}

.jedi .skill-path-container .skill-order-row .skill-row-label {
  background-color:#e3e9f8;
}

.skill-path-container .skill-order-row .skill-row-label__with-name {
  flex:1 1;
}

.skill-path-container .skill-order-row .skill-row-label .skill-img {
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:3px;
}

.skill-path-container .skill-order-row .skill-row-label .skill-name {
  display:flex;
  align-items:center;
  margin:0 12px;
  overflow:hidden;
}

.skill-path-container .skill-order-row .skill-row-label .skill-name>span {
  color:#cddcfe;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.jedi .skill-path-container .skill-order-row .skill-row-label .skill-name>span {
  color:#5f648a;
}

.skill-path-container .skill-order-row .skill-order {
  display:flex;
  flex:1 1;
  color:#fff;
}

.skill-path-container .skill-order-row .skill-order .blank-row {
  margin-left:6px;
  width:534px;
  border-radius:3px;
  background-color:rgba(37,37,75,.5);
}

.jedi .skill-path-container .skill-order-row .skill-order .blank-row {
  background-color:#ebf0fd;
}

.skill-path-container .skill-order-row .skill-order .no-skill-up,
.skill-path-container .skill-order-row .skill-order .skill-up {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-left:6px;
  width:30px;
  height:30px;
  border-radius:3px;
  color:#fff;
}

.skill-path-container .skill-order-row .skill-order .skill-up {
  font-weight:700;
  background-color:#3273fa;
}

.skill-path-container .skill-order-row .skill-order .no-skill-up {
  background-color:rgba(37,37,75,.5);
}

.jedi .skill-path-container .skill-order-row .skill-order .no-skill-up {
  background-color:#ebf0fd;
}

.rune-trees-container-2 {
  display:flex;
  justify-content:space-between;
}

.rune-trees-container-2 .stat-shard-divider {
  margin:11px 0;
  width:100%;
  height:1px;
  background-color:#414165;
}

.jedi .rune-trees-container-2 .stat-shard-divider {
  background-color:#dbdfef;
}

.rune-trees-container-2 .stat-shard-divider._is-mobile {
  margin:6px 0;
}

.rune-tree_v2 {
  display:flex;
  flex-direction:column;
  width: 244px;
  align-items:center;
  font-size:14px;
  font-weight:700;
  font-family:Inter;
  line-height:17px;
  color:#fff;
}

.rune-tree_v2 .rune-tree_header {
  display:flex;
  align-items:center;
  margin-bottom:18px;
  padding:6px;
  width:244px;
  height:48px;
  border-radius:3px;
  background-color:#11112a;
}

.jedi .rune-tree_v2 .rune-tree_header {
  background-color:#ebf0fd;
}

.rune-tree_mobile .rune-tree_v2 {
  display:flex;
  flex-direction:column;
  width: 139px;
  align-items:center;
  font-size:14px;
  font-weight:700;
  font-family:Inter;
  line-height:17px;
  color:#fff;
}

.rune-tree_mobile .rune-tree_v2 .rune-tree_header {
  margin-bottom:12px;
  width:139px;
}

.rune-tree_v2 .rune-tree_header .perk-style-title {
  margin-left:6px;
}

.rune-tree_mobile .rune-tree_v2 .rune-tree_header .perk-style-title {
  font-size:12px;
}

.rune-tree_v2 .rune-tree_header .rune-image-container {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:2px;
  background-color:#191937;
}

.rune-tree_v2 .rune-tree_header .rune-image-container img {
  width:100%;
}

.rune-tree_v2.primary-tree .perk-row {
  margin-bottom:18px;
}

.rune-tree_mobile .rune-tree_v2.primary-tree .perk-row {
  margin-bottom:16px;
}

.rune-tree_v2 .perk-row {
  display:flex;
  align-items:center;
  display:grid;
  grid-template-columns:8px 1fr;
  grid-auto-flow:column;
  margin-bottom:12px;
  width:100%;
}

.rune-tree_mobile .rune-tree_v2 .perk-row {
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
}

.rune-tree_v2 .perk-row:last-child {
  margin-bottom:0 !important;
}

.rune-tree_v2 .perk-row.keystone-row {
  padding-bottom:18px;
  border-bottom:1px solid #414165;
}

.rune-tree_v2 .perk-row.keystone-row .row-marker.row-active:before {
  background-color:#3273fa;
}

.jedi .rune-tree_v2 .perk-row.keystone-row {
  border-color:#dbdfef;
}

.rune-tree_mobile .rune-tree_v2 .perk-row.keystone-row {
  margin-bottom:12px;
  padding-bottom:12px;
}

.rune-tree_v2 .perk-row.keystone-row .perks {
  margin:0 0 0 28px;
}

.rune-tree_mobile .rune-tree_v2 .perk-row.keystone-row .perks {
  margin:0 5px;
}

.rune-tree_v2 .perk-row .row-marker {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.rune-tree_mobile .rune-tree_v2 .perk-row .row-marker {
  display:none;
}

.rune-tree_v2 .perk-row .row-marker:before {
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background-color:#25254b;
}

.jedi .rune-tree_v2 .perk-row .row-marker:before {
  background-color:#cddcfe;
}

.rune-tree_v2 .perk-row .row-marker.row-active:before {
  background-color:#fff;
}

.jedi .rune-tree_v2 .perk-row .row-marker.row-active:before {
  background-color:#8489b2;
}

.rune-tree_v2 .perk-row:not(.keystone-row):not(.stat-shard-row) .perks {
  margin:0 8px 0 36px;
}

.secondary-tree .rune-tree_v2 .perk-row:not(.keystone-row):not(.stat-shard-row) .perks {
  margin:0 11px 0 39px;
}

.rune-tree_mobile .rune-tree_v2 .perk-row:not(.keystone-row):not(.stat-shard-row) .perks {
  margin:0 5px;
}

.rune-tree_v2 .perk-row.stat-shard-row .perks {
  margin:0 14px 0 42px;
}

.rune-tree_mobile .rune-tree_v2 .perk-row.stat-shard-row .perks {
  margin:0 8px;
}

.rune-tree_v2 .perk-row .perks {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.rune-tree_mobile .rune-tree_v2 .perk-row .perks {
  width:100%;
}

.rune-tree_v2 .perk-row .perks .perk {
  justify-self:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:50%;
}

.rune-tree_mobile .rune-tree_v2 .perk-row .perks .perk,
.secondary-tree .rune-tree_mobile .rune-tree_v2 .perk-row .perks .perk {
  flex:0 0 24px;
  width:24px;
  height:24px;
}

.secondary-tree .rune-tree_v2 .perk-row .perks .perk {
  flex:0 0 30px;
  width:30px;
  height:30px;
}

.rune-tree_v2 .perk-row .perks .perk>img {
  width:100%;
}

.rune-tree_v2 .perk-row .perks .perk.keystone {
  flex:0 0 52px;
  width:52px;
  height:52px;
}

.rune-tree_mobile .rune-tree_v2 .perk-row .perks .perk.keystone {
  flex:0 0 34px;
  width:34px;
  height:34px;
}

.rune-tree_v2 .perk-row .perks .perk.perk-active:not(.keystone) {
  border:2px solid #3273fa;
}

.rune-tree_mobile .rune-tree_v2 .perk-row .perks .perk.perk-active:not(.keystone) {
  border-width:1px;
}

.rune-tree_v2 .perk-row .perks .perk.perk-inactive {
  filter:grayscale(100%);
  opacity:.27;
}

.rune-tree_v2 .perk-row .perks .shard {
  display:flex;
  justify-content:center;
  align-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  border:2px solid transparent;
}

.rune-tree_v2 .perk-row .perks .shard>img {
  width:16px;
  white-space:nowrap;
  overflow:hidden;
  text-indent:100%;
}

.rune-tree_mobile .rune-tree_v2 .perk-row .perks .shard {
  flex:0 0 24px;
  width:24px;
  height:24px;
}

.rune-tree_mobile .rune-tree_v2 .perk-row .perks .shard>img {
  width:12px;
}

.rune-tree_v2 .perk-row .perks .shard.shard-active {
  border:2px solid #3273fa;
  background-color:#11112a;
}

.jedi .rune-tree_v2 .perk-row .perks .shard.shard-active {
  background-color:#ebf0fd;
}

.rune-tree_mobile .rune-tree_v2 .perk-row .perks .shard.shard-active {
  border-width:1px;
}

.rune-tree_v2 .perk-row .perks .shard.shard-inactive {
  background-color:#25254b;
}

.jedi .rune-tree_v2 .perk-row .perks .shard.shard-inactive {
  background-color:#ebf0fd;
}

.rune-tree_v2 .perk-row .perks .shard.shard-inactive>img {
  filter:grayscale(100%);
  opacity:.3;
}
.btn-blue,
.btn-common,
.btn-dark,
.btn-gray,
.btn-light-blue,
.btn-red,
.btn-transparent,
.champion-profile-page .counters-container .counters-column .counters-list .view-more-btn {
  padding:0 15px;
  min-width:78px;
  min-height:36px;
  border-radius:3px;
  border-width:1px;
  border-style:solid;
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.btn-blue:hover,
.btn-common:hover,
.btn-dark:hover,
.btn-gray:hover,
.btn-light-blue:hover,
.btn-red:hover,
.btn-transparent:hover,
.champion-profile-page .counters-container .counters-column .counters-list .view-more-btn:hover {
  opacity:.8;
  cursor:pointer;
}

.btn-blue:focus,
.btn-common:focus,
.btn-dark:focus,
.btn-gray:focus,
.btn-light-blue:focus,
.btn-red:focus,
.btn-transparent:focus,
.champion-profile-page .counters-container .counters-column .counters-list .view-more-btn:focus {
  outline:none;
}

.btn-box-shadow-hover:hover {
  opacity:1;
  box-shadow:0 11px 8px -5px rgba(7,7,2,.3);
  cursor:pointer;
}

.btn-round {
  height:60px;
  border-radius:30px;
}

.btn-red {
  border-color:#ff4e50;
  background-color:#ff4e50;
  transition:all .3s;
}

.btn-red.btn-red_dim {
  border-color:#541b30;
  background-color:#541b30;
}

.btn-red.btn-red_hover:hover {
  opacity:1;
  border-color:#ff3a3c;
  background-color:#ff3a3c;
}

.btn-light-blue {
  border-color:var(--ugg-common-blue);
  background-color:var(--ugg-common-blue);
}

.btn-blue {
  border-color:#3273fa;
  background-color:#3273fa;
}

.jedi .btn-blue,
.jedi .btn-blue:hover,
.jedi .btn-blue:visited {
  color:#fff;
}

.btn-blue[data-disabled=true] {
  border-color:#bbbedb;
  background-color:#bbbedb;
  pointer-events:none;
}

.btn-blue.btn-blue_hover:hover {
  opacity:1;
  border-color:#2963da;
  background-color:#2963da;
}

.btn-blue.btn-box-shadow-hover:hover {
  background-color:#2963da;
}

.btn-gray {
  border-color:#31334a;
  background-color:#31334a;
}

.btn-dark {
  border-color:#1c1c32;
  background-color:#1c1c32;
}

.btn-dark.btn-box-shadow-hover:hover {
  background-color:#131324;
}

.btn-transparent {
  border-color:var(--border-color-grey);
  color:var(--font-color-main);
}

.jedi .btn-transparent {
  border-color:#dbdfef;
  color:#383864;
}

.btn-success {
  position:relative;
  transition:background-color .3s,border-color .3s;
  overflow:hidden;
}

.btn-success .btn-label,
.btn-success .btn-loader {
  opacity:1;
  transform:scale(1);
  transition:opacity transform .3s .3s;
}

.btn-success .btn-loader {
  width:20px;
}

.btn-success.btn-success_loading {
  pointer-events:none;
}

.btn-success.btn-success_disable {
  opacity:.5;
  pointer-events:none;
}

.btn-success.btn-success_toggle {
  border-color:#229a71;
  background-color:#229a71;
  pointer-events:none;
}

.btn-success.btn-success_toggle .btn-label,
.btn-success.btn-success_toggle .btn-loader {
  opacity:0;
  transform:scale(.2);
}

.btn-success.btn-success_toggle .btn-checkmark {
  top:50%;
  transform:scale(1) translateY(-50%);
  opacity:1;
  transition:opacity .3s,transform .3s;
}

.btn-success .btn-checkmark {
  position:absolute;
  top:50%;
  width:20px;
  transform:scale(.2) translateY(-50%);
  transform-origin:center;
  opacity:0;
}

.download-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px 7px 7px 10px;
  min-width:120px;
  min-height:40px;
  border-radius:3px;
}

.download-btn .apple-icon,
.download-btn .windows-icon {
  margin-right:11px;
  width:16px;
}

.download-btn span {
  font-family:Inter;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.champion-home-page {
  display:flex;
  justify-content:center;
  margin:0 auto;
}

@media(max-width:1139px) {
  .champion-home-page {
    width:100%;
  }
}

.champion-home-page .champion-home-page_content {
  flex:1 1;
  max-width:1014px;
  box-sizing:content-box;
}

.champion-home-page .champion-home-page_header {
  margin:24px 0;
}

.champion-leaderboard {
  max-width:1014px;
  box-sizing:content-box;
}

@media(max-width:1139px) {
  .champion-leaderboard {
    width:100%;
  }
}

.champion-leaderboard .leaderboard-ranking_filters-row {
  display:flex;
  align-items:center;
  margin:36px 0;
  z-index:100;
}

@media(max-width:899px) {
  .champion-leaderboard .leaderboard-ranking_filters-row {
    margin:24px 0;
  }
}

.champion-leaderboard .leaderboard-ranking_filters-row .leaderboard_filters {
  display:flex;
  align-items:center;
}

.champion-leaderboard .leaderboard-ranking_filters-row .leaderboard_filters .filter-label {
  display:flex;
  align-items:center;
  margin-right:24px;
  font-size:14px;
  font-weight:700;
}

@media(max-width:899px) {
  .champion-leaderboard .leaderboard-ranking_filters-row .leaderboard_filters .filter-label {
    margin-right:12px;
  }
}

.champion-leaderboard .leaderboard-ranking_filters-row .leaderboard_filters .filter-label svg {
  width:18px;
}

.champion-leaderboard .leaderboard-ranking_filters-row .leaderboard_filters .filter-label span {
  margin-left:10px;
}

.champion-leaderboard .leaderboard-ranking_filters-row .leaderboard_filters .region-filter {
  margin-right:12px;
}

.champion-leaderboard .leaderboard-ranking_filters-row .filter-select-wrapper {
  z-index:100;
}

.champion-leaderboard .leaderboard-rules {
  display:flex;
  margin:36px auto;
  background-color:#11112a;
  max-width:500px;
  padding:26px;
  border-radius:6px;
}

@media(max-width:899px) {
  .champion-leaderboard .leaderboard-rules {
    margin:24px auto;
  }
}

@media(max-width:1139px) {
  .champion-leaderboard .leaderboard-rules {
    padding:12px;
  }
}

.champion-leaderboard .leaderboard-rules img {
  margin-right:26px;
}

.champion-leaderboard .leaderboard-rules span {
  font-family:Helvetica Neue;
  font-style:normal;
  font-weight:500;
  font-size:14px;
  line-height:21px;
  color:#cddcfe;
}

.champion-leaderboard .leaderboard_table_loading {
  display:flex;
  justify-content:center;
  min-height:100vh;
  width:1014px;
}

@media(max-width:1139px) {
  .champion-leaderboard .leaderboard_table_loading {
    width:100%;
  }
}

.champion-leaderboard .leaderboard_table_loading .spinthatshit-loader {
  align-items:flex-start;
  margin-top:64px;
}

.champion-leaderboard .leaderboard_table_error {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:80px 12px;
  font-size:16px;
  font-weight:500;
  text-align:center;
}

@media(max-width:1139px) {
  .champion-leaderboard .leaderboard_table_error {
    min-width:auto;
    width:100%;
  }
}

.champion-leaderboard .leaderboard_table_error img {
  margin-bottom:15px;
  min-width:50px;
  max-width:200px;
}

.champion-leaderboard .leaderboard_table_error a {
  text-decoration:underline;
}

.champion-leaderboard .leaderboard_top-five {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:min-content min-content;
  grid-auto-flow:column;
  grid-gap:12px;
  margin-bottom:12px;
  font-size:12px;
  font-weight:500;
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five {
    grid-template-columns:1fr;
    grid-template-rows:126px repeat(4,1fr);
    grid-auto-flow:row;
  }
}

.champion-leaderboard .leaderboard_top-five .summoner-name {
  display:block;
  font-family:Barlow;
  font-size:16px;
  font-weight:600;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

.champion-leaderboard .leaderboard_top-five .summoner-name:hover {
  text-decoration:underline;
}

.champion-leaderboard .leaderboard_top-five .rank-display {
  display:flex;
  align-items:center;
  color:#cddcfe;
  white-space:nowrap;
}

.champion-leaderboard .leaderboard_top-five .rank-display img {
  margin-right:12px;
  width:30px;
  flex:0 0 30px;
}

.champion-leaderboard .leaderboard_top-five .wr-with-bar {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  flex:1 1;
  color:#cddcfe;
}

.champion-leaderboard .leaderboard_top-five .wr-with-bar .wr-text {
  white-space:nowrap;
}

.champion-leaderboard .leaderboard_top-five .wr-with-bar .wr-text_win-rate {
  font-weight:700;
}

.champion-leaderboard .leaderboard_top-five .wr-with-bar .wr-bar {
  margin-top:6px;
  width:100px;
  height:4px;
  border-radius:2px;
  background-color:#25254b;
  overflow:hidden;
}

.champion-leaderboard .leaderboard_top-five .ranking-label {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0;
  flex:0 0 36px;
  width:36px;
  height:41px;
  border-radius:6px;
  font-family:Barlow;
  font-size:24px;
  font-weight:700;
}

@media(max-width:1139px) {
  .champion-leaderboard .leaderboard_top-five .ranking-label {
    flex:0 0 32px;
    width:32px;
    height:32px;
  }
}

.champion-leaderboard .leaderboard_top-five .ranking-label_1 {
  position:relative;
  display:flex;
  align-items:center;
  margin-right:24px;
  padding:0 12px 12px;
  flex:0 0 54px;
  width:54px;
  height:71px;
  background-color:#3b2c2e;
  font-size:36px;
  color:#ff9b00;
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .ranking-label_1 {
    margin-right:12px;
    padding:0 6px 6px;
    flex:0 0 36px;
    width:36px;
    height:48px;
    font-size:24px;
  }
}

.champion-leaderboard .leaderboard_top-five .ranking-label_1 .label-underline {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  height:2px;
  border-radius:1px;
  background-color:#ff9b00;
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .ranking-label_1 .label-underline {
    left:6px;
    right:6px;
    bottom:6px;
  }
}

.champion-leaderboard .leaderboard_top-five .ranking-label_2 {
  background-color:rgba(50,115,250,.15);
  color:#3273fa;
}

.champion-leaderboard .leaderboard_top-five .ranking-label_3 {
  background-color:#3c2936;
  color:#ff8335;
}

.champion-leaderboard .leaderboard_top-five .ranking-label_4,
.champion-leaderboard .leaderboard_top-five .ranking-label_5 {
  background-color:#232643;
  color:#fff;
}

.champion-leaderboard .leaderboard_top-five .ranking-data-row {
  display:flex;
  align-items:center;
  padding:0 12px;
  height:42px;
  border-radius:6px;
  background-color:#11112a;
}

.champion-leaderboard .leaderboard_top-five .profile-icon-border-container {
  position:relative;
  flex:0 0 93px;
  width:93px;
  height:93px;
  border-radius:6px;
  border:2px solid #414165;
  background-color:#070720;
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .profile-icon-border-container {
    flex:0 0 48px;
    width:48px;
    height:48px;
  }
}

.champion-leaderboard .leaderboard_top-five .profile-icon-border-container .level-header {
  position:absolute;
  z-index:2;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:20px;
  border-radius:4px;
  border:1px solid #414165;
  background-color:#070720;
  color:#fff;
  font-size:11px;
  font-weight:700;
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .profile-icon-border-container .level-header {
    width:26px;
    height:14px;
    top:-10px;
  }
}

.champion-leaderboard .leaderboard_top-five .profile-icon-border-container .profile-icon-border {
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  border:2px solid #070720;
  border-radius:4px;
  width:100%;
  height:100%;
  overflow:hidden;
}

.champion-leaderboard .leaderboard_top-five .profile-icon-border-container .profile-icon-border .border-notch {
  position:absolute;
  top:-6px;
  left:50%;
  z-index:1;
  transform:translateX(-50%);
  width:40px;
  height:10px;
  border-radius:0 0 6px 6px;
  border:2px solid #070720;
  background-color:#070720;
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .profile-icon-border-container .profile-icon-border .border-notch {
    width:30px;
  }
}

.champion-leaderboard .leaderboard_top-five .profile-icon-border-container .profile-icon-border .profile-icon-image {
  width:100%;
  height:100%;
  border-radius:3px;
}

.champion-leaderboard .leaderboard_top-five .profile-icon-border-container_small,
.champion-leaderboard .leaderboard_top-five .profile-icon-border-container_small .profile-icon-border {
  border-radius:4px;
  border-width:1px;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking {
  border-radius:6px;
  background-color:#191937;
  overflow:hidden;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking .ranking-info-container {
  position:relative;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking .ranking-info-container_mobile {
  display:none;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking .ranking-header {
  display:flex;
  align-items:center;
  width:100%;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking .ranking-header .ranking-player {
  display:flex;
  align-items:center;
  overflow:hidden;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking .ranking-header .ranking-player .summoner-name {
  flex:1 1;
  width:100%;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__other {
  grid-row:2/3;
  padding:12px;
  overflow:hidden;
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other {
    grid-column:1/2;
    grid-row:auto;
  }
}

@media(max-width:899px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .ranking-header {
    flex-direction:column;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .ranking-header .ranking-player {
    justify-content:center;
    width:100%;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .ranking-header .ranking-player .summoner-name {
    flex:unset;
  }
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .ranking-user-column {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  overflow:hidden;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .region-box {
  padding:3px 6px;
  background-color:#383864;
  border-radius:2px;
  font-weight:700;
  font-size:10px;
  line-height:11px;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .summoner-name {
  flex:1 1;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  margin-bottom:3px;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .profile-icon-border-container {
  margin-right:12px;
  flex:0 0 41px;
  width:41px;
  height:41px;
}

@media(max-width:1139px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .profile-icon-border-container {
    margin-right:8px;
    flex:0 0 32px;
    width:32px;
    height:32px;
  }
}

@media(max-width:899px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .profile-icon-border-container {
    flex:0 0 24px;
    width:24px;
    height:24px;
  }
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .ranking-label {
  margin-right:12px;
}

@media(max-width:1139px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .ranking-label {
    margin-right:8px;
  }
}

@media(max-width:899px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .ranking-label {
    margin-right:0;
    margin-bottom:12px;
  }
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .ranking-data-row {
  margin-top:12px;
}

@media(max-width:899px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container .rank-display img {
    width:24px;
    flex:0 0 24px;
  }
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container_mobile {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    grid-auto-flow:column;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container_mobile .player {
    display:flex;
    align-items:center;
    margin-right:12px;
    overflow:hidden;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container_mobile .player .ranking-player {
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container_mobile .player .ranking-label {
    flex:0 0 24px;
    width:24px;
    height:24px;
    font-size:18px;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container_mobile .player .profile-icon-border-container {
    margin-left:6px;
    flex:0 0 24px;
    width:24px;
    height:24px;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container_mobile .player .summoner-name {
    margin-left:6px;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container_mobile .rank-display img {
    width:24px;
    flex:0 0 24px;
  }
}

@media screen and (max-width:700px)and (max-width:599px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container_mobile .rank-display img {
    display:none;
  }
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container_mobile .wr-with-bar {
    align-items:flex-end;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__other .ranking-info-container_mobile .wr-with-bar .wr-bar {
    display:none;
  }
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 {
  position:relative;
  display:flex;
  align-items:center;
  grid-area:1/1/2/5;
  padding:24px;
  background-image:linear-gradient(223deg,#313160 -100%,#191937);
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .ranking-info-container {
  display:flex;
  align-items:center;
  flex:1 1;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .summoner-name {
  margin-bottom:5px;
  font-size:36px;
  width:100%;
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .summoner-name {
    margin-bottom:0;
    font-size:24px;
  }
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .profile-icon-border-container {
  margin-right:24px;
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .profile-icon-border-container {
    margin-right:12px;
  }
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .ranking-info {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1 1;
  overflow:hidden;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .ranking-info .ranking-user-row {
  display:flex;
  align-items:center;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .region-box {
  margin-right:12px;
  padding:5px 8px;
  background-color:#383864;
  border-radius:2px;
  font-weight:700;
  font-size:14px;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .ranking-data-row {
  padding:0 24px 0 12px;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .ranking-data-row .wr-with-bar {
  margin-left:24px;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .champion-splash-bg {
  position:absolute;
  width:400px;
  height:100%;
  right:0;
  border-radius:6px;
  overflow:hidden;
}

.champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .champion-splash-bg>img {
  position:absolute;
  right:0;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg,rgba(25,25,55,0),rgba(25,25,55,.5));
  mask-image:linear-gradient(90deg,rgba(25,25,55,0),rgba(25,25,55,.5));
}

@media screen and (max-width:700px) {
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__1 {
    grid-column:1/2;
    padding:12px;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .ranking-info-container_mobile {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .ranking-info-container_mobile .region-box {
    margin-right:10px;
    padding:3px 5px;
    font-size:12px;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking__1 .ranking-info-container_mobile .ranking-data-row {
    margin-top:12px;
    padding:0 12px;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking .ranking-info-container {
    display:none;
  }
  .champion-leaderboard .leaderboard_top-five .top-five_ranking .ranking-info-container_mobile {
    position:relative;
  }
}

.champion-leaderboard .leaderboard_table {
  width:1014px;
  font-size:12px;
  font-weight:500;
  color:#cddcfe;
}

@media(max-width:1139px) {
  .champion-leaderboard .leaderboard_table {
    width:100%;
  }
}

@media screen and (max-width:750px) {
  .champion-leaderboard .leaderboard_table {
    padding:12px;
  }
}

.champion-leaderboard .leaderboard_table .rt-tbody .rt-tr-group.summoner-highlighted {
  border:1px solid #3273fa;
  background-image:linear-gradient(90deg,rgba(50,115,250,.2) 0,rgba(50,115,250,.2)),linear-gradient(90deg,#11112a 0,#11112a);
}

.champion-leaderboard .leaderboard_table .tier-lp_mobile {
  display:none !important;
}

.champion-leaderboard .leaderboard_table .summoner-col {
  padding-right:0 !important;
}

.champion-leaderboard .leaderboard_table .ranking {
  font-size:14px;
  color:#fff;
}

.champion-leaderboard .leaderboard_table .region {
  font-family:Inter;
  font-weight:400;
  font-size:12px;
  line-height:15px;
  color:#cddcfe;
}

.champion-leaderboard .leaderboard_table .summoner {
  display:flex;
  align-items:center;
  padding-left:12px;
  padding-right:12px;
  flex:1 1;
  max-width:220px;
  overflow:hidden;
}

.champion-leaderboard .leaderboard_table .summoner:hover .summoner-name {
  text-decoration:underline;
}

.champion-leaderboard .leaderboard_table .summoner .profile-icon-container {
  margin-right:12px;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:3px;
  background-color:#d8d8d8;
  overflow:hidden;
}

.champion-leaderboard .leaderboard_table .summoner .profile-icon-container>img {
  width:100%;
}

.champion-leaderboard .leaderboard_table .summoner .summoner-name {
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.champion-leaderboard .leaderboard_table .tier {
  display:flex;
  justify-content:center;
  align-items:center;
}

.champion-leaderboard .leaderboard_table .tier .rank-img {
  margin-right:6px;
  width:24px;
}

.champion-leaderboard .leaderboard_table .win-rate {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  padding:0 12px;
  flex:1 1;
}

.champion-leaderboard .leaderboard_table .win-rate .wr-text {
  display:flex;
  align-items:center;
}

.champion-leaderboard .leaderboard_table .win-rate .wr-text_win-rate {
  font-weight:700;
}

.champion-leaderboard .leaderboard_table .win-rate .wr-text_games {
  margin-left:12px;
}

.champion-leaderboard .leaderboard_table .win-rate .wr-bar {
  margin-top:6px;
  max-width:200px;
  width:100%;
  height:6px;
  border-radius:3px;
  background-color:#25254b;
  overflow:hidden;
}

@media(max-width:899px) {
  .champion-leaderboard .leaderboard_table .ranking {
    font-size:12px;
  }
}

@media screen and (max-width:750px) {
  .champion-leaderboard .leaderboard_table .tier-lp_desktop {
    display:none !important;
  }
  .champion-leaderboard .leaderboard_table .tier-lp_mobile {
    display:flex !important;
  }
}

@media(max-width:599px) {
  .champion-leaderboard .leaderboard_table .profile-icon-container,
  .champion-leaderboard .leaderboard_table .rank-img,
  .champion-leaderboard .leaderboard_table .wr-bar,
  .champion-leaderboard .leaderboard_table .wr-text_games {
    display:none;
  }
}

@media screen and (max-width:450px) {
  .champion-leaderboard .leaderboard_table .summoner {
    padding-left:0;
    padding-right:0;
  }
  .champion-leaderboard .leaderboard_table .rank-img {
    display:none;
  }
}

.champion-leaderboard .leaderboard_pagination {
  margin-top:36px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

@media(max-width:1139px) {
  .champion-leaderboard .leaderboard_pagination {
    margin-top:24px;
    margin-bottom:12px;
  }
}

.champion-leaderboard .leaderboard_pagination .pagination-nav,
.champion-leaderboard .leaderboard_pagination .pagination-nav .pagination-nav_pages {
  display:flex;
  justify-content:center;
  align-items:center;
}

.champion-leaderboard .leaderboard_pagination .pagination-nav .pagination-nav_pages .page-link {
  position:relative;
  padding:2px 6px;
  font-size:14px;
  font-weight:500;
  color:#cddcfe;
}

.champion-leaderboard .leaderboard_pagination .pagination-nav .pagination-nav_pages .page-link:not(:last-child) {
  margin-right:4px;
}

.champion-leaderboard .leaderboard_pagination .pagination-nav .pagination-nav_pages .page-link.page-link_is-current,
.champion-leaderboard .leaderboard_pagination .pagination-nav .pagination-nav_pages .page-link:hover {
  cursor:pointer;
}

.champion-leaderboard .leaderboard_pagination .pagination-nav .pagination-nav_pages .page-link.page-link_is-current:after,
.champion-leaderboard .leaderboard_pagination .pagination-nav .pagination-nav_pages .page-link:hover:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  border-radius:1px;
  background-color:#3273fa;
}

.champion-leaderboard .leaderboard_pagination .skip-to-container {
  display:flex;
  align-items:center;
}

.champion-leaderboard .leaderboard_pagination .skip-to-container:empty {
  display:none;
}

.champion-leaderboard .leaderboard_pagination .skip-to-container_left {
  margin-right:12px;
}

.champion-leaderboard .leaderboard_pagination .skip-to-container_right {
  margin-left:12px;
}

.champion-leaderboard .leaderboard_pagination .skip-to-container .skip-to {
  white-space:nowrap;
  font-size:14px;
  font-weight:700;
  color:#fff;
}

.champion-leaderboard .leaderboard_pagination .skip-to-container .skip-to:hover {
  cursor:pointer;
  text-decoration:underline;
}

.champion-leaderboard .leaderboard_pagination .skip-to-container .skip-to:not(:last-child) {
  margin-right:12px;
}

.champion-leaderboard .leaderboard_pagination .total-rows {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:10px;
  font-size:12px;
  color:#fff;
}

.champion-leaderboard .leaderboard_pagination .total-rows .current-rows .dash {
  color:#5f5f7b;
}

.champion-leaderboard .leaderboard_pagination .total-rows .out-of {
  margin-left:10px;
}

.champion-leaderboard .leaderboard_pagination .total-rows .out-of .label {
  color:#cddcfe;
}

.champion-home {
  max-width:1014px;
  box-sizing:content-box;
  margin-top:34px;
  width:1014px;
}

@media(max-width:1139px) {
  .champion-home {
    width:100%;
  }
}

.champion-home .filter-container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:24px 0;
}

.champion-home input.champion-filter {
  padding:0 15px;
  height:48px;
  width:250px;
  border:none;
  font-size:12px;
  background-color:#2c2c40;
}

.champion-home input.champion-filter::-moz-placeholder {
  color:var(--font-color-grey);
}

.champion-home input.champion-filter::placeholder {
  color:var(--font-color-grey);
}

.champion-home .image-wrapper {
  position:relative;
  border:1px solid var(--border-color-grey);
  overflow:hidden;
}

.champion-home .image-wrapper:after {
  content:"";
  position:absolute;
  top:-110%;
  left:-180%;
  width:220%;
  height:220%;
  opacity:0;
  transform:rotate(45deg);
  background:hsla(0,0%,100%,.13);
  background:linear-gradient(90deg,hsla(0,0%,100%,.13) 0,hsla(0,0%,100%,.13) 77%,hsla(0,0%,100%,.5) 92%,hsla(0,0%,100%,0));
}

.champion-home .champions-container {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  grid-gap:12px 12px;
  padding:20px;
  border:1px solid var(--border-color-grey);
  background-color:var(--ugg-background-alt);
}

@media(max-width:899px) {
  .champion-home .champions-container {
    grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  }
}

@media(max-width:599px) {
  .champion-home .champions-container {
    grid-template-columns:repeat(auto-fill,minmax(60px,1fr));
  }
}

.champion-home .champions-container .champion-link {
  margin:0 auto;
}

.champion-home .champions-container .champion-link:hover .image-wrapper:after {
  opacity:1;
  top:-35%;
  left:-35%;
  transition-property:left,top,opacity;
  transition-duration:.7s,.7s,.15s;
  transition-timing-function:ease;
}

.champion-home .champions-container .champion-link:hover .champion-name {
  font-weight:700;
}

.champion-home .champions-container .champion-link .image-wrapper {
  width:100px;
  height:100px;
}

@media(max-width:1469px) {
  .champion-home .champions-container .champion-link .image-wrapper {
    width:100px;
    height:100px;
  }
}

@media(max-width:899px) {
  .champion-home .champions-container .champion-link .image-wrapper {
    width:80px;
    height:80px;
  }
}

@media(max-width:599px) {
  .champion-home .champions-container .champion-link .image-wrapper {
    width:60px;
    height:60px;
  }
}

.champion-home .champions-container .champion-link .champion-name {
  margin-top:8px;
  font-size:12px;
  color:var(--font-color-main);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align: center;
}

@media(max-width:599px) {
  .champion-home .champions-container .champion-link .champion-name {
    max-width:60px;
  }
}

.champion-home .champion-search-bar {
  margin:0;
  background-color:#fff;
}

.champion-home .champion-search-bar .search-filter-wrapper {
  width:350px;
  max-width:350px;
}

.champion-home .champion-search-bar .search-filter-wrapper input.search-input {
  height:36px;
  color:#000;
  background-color:#fff;
}

.champion-home .champion-search-bar .search-filter-wrapper input.search-input::-moz-placeholder {
  font-size:12px;
}

.champion-home .champion-search-bar .search-filter-wrapper input.search-input::placeholder {
  font-size:12px;
}

.champion-home .champion-search-bar .search-filter-wrapper .search-list {
  top:36px !important;
}

.champion-profile-main-page {
  display:flex;
  margin:0 auto;
}

@media(max-width:1139px) {
  .champion-profile-content-container,
  .champion-profile-main-page {
    width:100%;
  }
}

.champion-profile-placeholder {
  height:600px;
}

@media(max-width:1139px) {
  .champion-profile-placeholder {
    min-width:auto;
    width:100%;
  }
}

@media(max-width:899px) {
  .champion-profile-placeholder {
    min-width:auto;
    width:100%;
  }
}

@media(max-width:599px) {
  .champion-profile-placeholder {
    min-width:auto;
    width:100%;
  }
}

.champion-profile-container {
  z-index:1;
  margin:0 auto;
}

.champion-profile-container .filter-manager::-webkit-scrollbar {
  display:none;
}

.champion-profile-container ._filter-manager {
  margin:36px 0;
}

@media(max-width:1139px) {
  .champion-profile-container ._filter-manager {
    margin:24px 0;
  }
}

.champion-profile-container.page_build,
.champion-profile-container.page_counters,
.champion-profile-container.page_overview_aram,
.champion-profile-container.page_overview_arena,
.champion-profile-container.page_overview_arurf,
.champion-profile-container.page_overview_nexus_blitz,
.champion-profile-container.page_overview_one_for_all,
.champion-profile-container.page_overview_urf,
.champion-profile-container.page_runes {
  width:1014px;
}

@media(max-width:1359px) {
  .champion-profile-container.page_build,
  .champion-profile-container.page_counters,
  .champion-profile-container.page_overview_aram,
  .champion-profile-container.page_overview_arena,
  .champion-profile-container.page_overview_arurf,
  .champion-profile-container.page_overview_nexus_blitz,
  .champion-profile-container.page_overview_one_for_all,
  .champion-profile-container.page_overview_urf,
  .champion-profile-container.page_runes {
    width:900px;
  }
}

@media(max-width:1139px) {
  .champion-profile-container.page_build,
  .champion-profile-container.page_counters,
  .champion-profile-container.page_overview_aram,
  .champion-profile-container.page_overview_arena,
  .champion-profile-container.page_overview_arurf,
  .champion-profile-container.page_overview_nexus_blitz,
  .champion-profile-container.page_overview_one_for_all,
  .champion-profile-container.page_overview_urf,
  .champion-profile-container.page_runes {
    max-width:900px;
    width:100%;
  }
}

.champion-profile-container.page_matchups {
  width:1014px;
}

@media(max-width:1139px) {
  .champion-profile-container.page_matchups {
    width:100%;
  }
}

.champion-profile-container.page_items {
  width:1200px;
}

.champion-profile-container.page_item-paths {
  width:1014px;
}

.champion-profile-container.page_rune-sets,
.champion-profile-container.page_runes-table {
  width:1200px;
}

.champion-profile-container.page_duos,
.champion-profile-container.page_spells-abilities {
  width:1014px;
}

@media(max-width:1139px) {
  .champion-profile-container.page_duos {
    width:100%;
  }
  .champion-profile-container {
    padding-top:24px;
    min-width:auto;
    width:100%;
  }
}

@media(max-width:899px) {
  .champion-profile-container {
    min-width:auto;
    width:100%;
  }
}

@media(max-width:599px) {
  .champion-profile-container {
    min-width:auto;
    width:100%;
  }
}

.champion-profile-container .champion-page-nav {
  margin-top:14px;
}

@media(max-width:899px) {
  .champion-profile-container .favorite-button {
    display:none !important;
  }
}

@media(max-width:599px) {
  .champion-profile-container .favorite-button {
    display:none !important;
  }
}

.champion-profile-container .champion-header {
  margin-bottom:24px;
}

.champion-profile-container .champion-header .champion-header-second-line {
  height:35px;
  display:flex;
  justify-content:space-between;
}

.champion-profile-container .champion-header .champion-header-wrapper {
  width:100%;
  display:flex;
  align-items:center;
}

@media(max-width:899px) {
  .champion-profile-container .champion-header .champion-header-wrapper {
    align-items:flex-start;
  }
}

@media(max-width:399px) {
  .champion-profile-container .champion-header .champion-header-wrapper {
    height:auto;
  }
}

.champion-profile-container .champion-header .champion-image-container {
  position:relative;
  flex:0 0 93px;
  width:93px;
  height:93px;
  border-radius:6px;
  border:2px solid #414165;
  background-color:#17172e;
}

@media(max-width:899px) {
  .champion-profile-container .champion-header .champion-image-container {
    flex:0 0 75px;
    width:75px;
    height:75px;
  }
}

@media(max-width:599px) {
  .champion-profile-container .champion-header .champion-image-container {
    flex:0 0 90px;
    width:90px;
    height:90px;
  }
}

.champion-profile-container .champion-header .champion-image-container .tier-header {
  position:absolute;
  z-index:2;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:20px;
  border-radius:4px;
  border:1px solid #414165;
  background-color:#06061f;
  color:#fff;
  font-size:11px;
  font-weight:700;
}

.champion-profile-container .champion-header .champion-image-container .champion-image-border {
  position:relative;
  border:2px solid #17172e;
  border-radius:4px;
  width:100%;
  height:100%;
  overflow:hidden;
}

.champion-profile-container .champion-header .champion-image-container .champion-image-border .border-notch {
  position:absolute;
  top:-6px;
  left:50%;
  z-index:1;
  transform:translateX(-50%);
  width:40px;
  height:10px;
  border-radius:0 0 6px 6px;
  border:2px solid #070720;
  background-color:#06061f;
}

.champion-profile-container .champion-header .champion-image-container .champion-image-border .champion-image {
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  border-radius:6px;
  transform:translate(-50%,-50%);
}

.champion-profile-container .champion-header .champion-image-container .favorite-button {
  position:absolute;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:5px;
  border:2px solid #17172e;
  background-color:#383864;
}

.champion-profile-container .champion-header .champion-image-container .favorite-button .favorite-button_icon {
  width:10px;
}

.champion-profile-container .champion-header .champion-image-container .favorite-button:hover {
  background-color:#4a4a85;
  cursor:pointer;
}

.champion-profile-container .champion-header .champion-image-container .favorite-button:hover .favorite-button_icon path {
  fill:#7878b5;
}

.champion-profile-container .champion-header .champion-image-container .favorite-button.favorite-button_selected {
  background-color:#ff9b00;
}

.champion-profile-container .champion-header .champion-image-container .favorite-button.favorite-button_selected .favorite-button_icon path {
  fill:#fff;
}

.champion-profile-container .champion-header .champion-image-container .favorite-button.favorite-button_selected:hover {
  background-color:#cc7c00;
  cursor:pointer;
}

.champion-profile-container .champion-header .seo-fluff {
  padding-right:12px;
  color:#cddcfe;
  font-size:12px;
  font-weight:500;
}

.champion-profile-container .champion-header .seo-fluff.seo-fluff_mobile {
  margin-top:24px;
  font-size:10px;
}

.champion-profile-container .champion-header .champion-header-info {
  flex:1 1;
  display:flex;
  flex-direction:column;
  margin-left:24px;
  height:100%;
  justify-content:space-between;
  min-width:0;
}

@media(max-width:899px) {
  .champion-profile-container .champion-header .champion-header-info {
    margin-left:12px;
  }
}

.champion-profile-container .champion-header .champion-header-info .champion-header__row-2 {
  display:flex;
  align-items:center;
  height:32px;
  margin-top:18px;
}

@media(max-width:899px) {
  .champion-profile-container .champion-header .champion-header-info .champion-header__row-2 {
    height:auto;
    flex-direction:column;
    align-items:flex-start;
    margin-top:12px;
  }
}

@media(max-width:599px) {
  .champion-profile-container .champion-header .champion-header-info .champion-header__row-2 {
    margin-bottom:0;
  }
}

.champion-profile-container .champion-header .champion-header-info .champion-skills {
  display:flex;
  align-items:center;
  flex:none;
  margin-right:24px;
}

.champion-profile-container .champion-header .champion-header-info .champion-skills .champion-skill-with-label:not(:last-child) {
  margin-right:6px;
}

.champion-profile-container .champion-header .champion-header-info .champion-skills img {
  width:36px;
  height:36px;
  border-radius:3px;
}

@media(max-width:599px) {
  .champion-profile-container .champion-header .champion-header-info .champion-skills img {
    width:30px;
    height:30px;
  }
}

.champion-profile-container .champion-header .champion-header-info .header-patch {
  display:flex;
  align-items:center;
  margin-left:10px;
  height:36px;
  padding:10px 12px;
  border-radius:3px;
  background-color:#191937;
  font-size:14px;
  font-family:Inter;
  font-style:normal;
  font-weight:700;
}

.champion-profile-container .champion-header .champion-header-info .header-patch span {
  color:#cddcfe;
  font-weight:400;
}

.champion-profile-container .champion-header .champion-label {
  font-family:Barlow;
  margin-top:0;
  margin-bottom:0;
  display:flex;
  align-items:center;
  font-size:36px;
  white-space:nowrap;
}

@media(max-width:899px) {
  .champion-profile-container .champion-header .champion-label {
    font-size:28px;
  }
}

@media(max-width:599px) {
  .champion-profile-container .champion-header .champion-label {
    flex-direction:column;
    align-items:flex-start;
    font-size:28px;
  }
}

.champion-profile-container .champion-header .champion-label .champion-title {
  font-size:36px;
  font-weight:400;
  color:#bbbedb;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

@media(max-width:899px) {
  .champion-profile-container .champion-header .champion-label .champion-title {
    height:auto;
    font-size:28px;
  }
}

@media(max-width:599px) {
  .champion-profile-container .champion-header .champion-label .champion-title {
    height:auto;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-top:1px;
    font-size:24px;
  }
}

.champion-profile-container .champion-header .champion-label .champion-name {
  font-weight:600;
  margin-right:12px;
}

@media(max-width:899px) {
  .champion-profile-container .champion-header .champion-label .champion-name {
    height:auto;
    font-size:28px;
  }
}

@media(max-width:599px) {
  .champion-profile-container .champion-header .champion-label .champion-name {
    height:auto;
    font-size:28px;
  }
}

.champion-ranking-stats-normal {
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-wrap:wrap;
  height:100%;
  flex:1 1;
  background-color:#11112a;
  border-radius:3px;
}

.champion-ranking-stats-normal>div {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:23px 0;
  height:100%;
  flex:1 1;
  white-space:nowrap;
}

.champion-ranking-stats-normal .ban-rate,
.champion-ranking-stats-normal .champion-tier,
.champion-ranking-stats-normal .matches-oppid,
.champion-ranking-stats-normal .overall-rank,
.champion-ranking-stats-normal .pick-rate,
.champion-ranking-stats-normal .win-rate {
  border-right:1px solid #070720;
}

.champion-ranking-stats-normal .tier {
  text-align:center;
}

.champion-ranking-stats-normal .value {
  font-size:20px;
  font-weight:800;
}

@media(max-width:899px) {
  .champion-ranking-stats-normal .value {
    font-size:18px;
  }
}

.champion-ranking-stats-normal .label {
  display:flex;
  align-items:center;
  font-size:12px;
  font-weight:500;
  color:#bbbedb;
}

.champion-ranking-stats-normal .label .ugg-alert {
  margin-left:3px;
}

.champion-ranking-stats-normal .opp-champion {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  font-size:14px;
  font-weight:700;
}

.champion-ranking-stats-normal .opp-champion>img {
  margin-left:12px;
  margin-right:8px;
  width:32px;
}

@media(max-width:599px) {
  .champion-ranking-stats-normal {
    gap:0;
  }
  .champion-ranking-stats-normal>div {
    border-right:none !important;
    flex:1 1;
  }
  .champion-ranking-stats-normal .value {
    font-size:14px;
  }
  .champion-ranking-stats-normal:not(.matchup-view) .matches {
    display:flex;
    gap:4px;
    padding:12px 0;
    flex:0 0 100%;
    border-top:1px solid #070720;
  }
}

.champion-ranking-stats-collapsed {
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-wrap:wrap;
  flex:1 0 300px;
  height:100%;
}

.champion-ranking-stats-collapsed>div:nth-child(-n+3) {
  border-bottom:1px solid #070720;
}

.champion-ranking-stats-collapsed>div {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:23px 0;
  flex:0 0 33.3333333333%;
  height:100%;
  white-space:nowrap;
  background-color:#11112a;
}

.champion-ranking-stats-collapsed .ban-rate,
.champion-ranking-stats-collapsed .champion-tier,
.champion-ranking-stats-collapsed .pick-rate,
.champion-ranking-stats-collapsed .win-rate {
  border-right:1px solid #070720;
}

.champion-ranking-stats-collapsed .tier {
  text-align:center;
}

.champion-ranking-stats-collapsed .value {
  font-size:20px;
  font-weight:800;
}

@media(max-width:899px) {
  .champion-ranking-stats-collapsed .value {
    font-size:18px;
  }
}

.champion-ranking-stats-collapsed .label {
  display:flex;
  align-items:center;
  font-size:12px;
  font-weight:500;
  color:#bbbedb;
}

.champion-ranking-stats-collapsed .label .ugg-alert {
  margin-left:3px;
}

.champion-ranking-stats-collapsed .opp-champion {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  font-size:14px;
  font-weight:700;
}

.champion-ranking-stats-collapsed .opp-champion>img {
  margin-left:12px;
  margin-right:8px;
  width:32px;
}

@media(max-width:599px) {
  .champion-ranking-stats-collapsed {
    gap:0;
  }
  .champion-ranking-stats-collapsed>div {
    border-right:none !important;
    flex:1 1;
  }
  .champion-ranking-stats-collapsed .value {
    font-size:14px;
  }
  .champion-ranking-stats-collapsed:not(.matchup-view) .matches {
    display:flex;
    flex-direction:row;
    gap:4px;
    padding:12px 0;
    flex:0 0 100%;
    border-top:1px solid #070720;
  }
}

.champion-profile-page {
  margin-bottom:0;
}

.champion-profile-page .warning-tooltip {
  margin-left:15px;
  max-width:500px;
  font-size:13px;
  opacity:1;
}

.champion-profile-page .disclaimer {
  display:flex;
  margin-top:20px;
  color:var(--font-color-grey);
  font-size:12px;
  font-weight:700;
}

.champion-profile-page .question-marc>div {
  display:flex;
}

.champion-profile-page .new-path-arrow {
  width:12px;
  height:12px;
}

.champion-profile-page .champion-spells-abilities {
  width:1014px !important;
}

.champion-profile-page .champion-items .grid-block-content-row,
.champion-profile-page .champion-items .grid-block-header {
  background-color:#191937 !important;
}

.champion-profile-page .champion-items,
.champion-profile-page .champion-runes,
.champion-profile-page .champion-spells-abilities,
.champion-profile-page .overview-matchups {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-top:20px;
  width:1200px;
}

.champion-profile-page .champion-items .grid-block,
.champion-profile-page .champion-runes .grid-block,
.champion-profile-page .champion-spells-abilities .grid-block,
.champion-profile-page .overview-matchups .grid-block {
  display:inline-block;
  margin-bottom:6px;
}

.champion-profile-page .champion-items .grid-block-header,
.champion-profile-page .champion-runes .grid-block-header,
.champion-profile-page .champion-spells-abilities .grid-block-header,
.champion-profile-page .overview-matchups .grid-block-header {
  padding:0 18px;
  height:56px;
  display:flex;
  background:#11112a;
  margin-bottom:0;
  border-top-right-radius:3px;
  border-top-left-radius:3px;
  border:none;
}

.champion-profile-page .champion-items .grid-block-content,
.champion-profile-page .champion-runes .grid-block-content,
.champion-profile-page .champion-spells-abilities .grid-block-content,
.champion-profile-page .overview-matchups .grid-block-content {
  border:none;
  background:#070720;
  border-radius:3px;
  margin-bottom:12px;
}

.champion-profile-page .champion-items .grid-block-content-row,
.champion-profile-page .champion-runes .grid-block-content-row,
.champion-profile-page .champion-spells-abilities .grid-block-content-row,
.champion-profile-page .overview-matchups .grid-block-content-row {
  display:flex;
  justify-content:space-between;
  font-weight:700;
  padding:12px 18px;
  font-size:12px;
  background:#11112a;
  margin-top:1px;
}

.champion-profile-page .champion-items .grid-block-content-row .content-row-right-half,
.champion-profile-page .champion-runes .grid-block-content-row .content-row-right-half,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .content-row-right-half,
.champion-profile-page .overview-matchups .grid-block-content-row .content-row-right-half {
  display:flex;
  justify-content:flex-end;
}

.champion-profile-page .champion-items .grid-block-content-row .content-row-right-half .pick-rate,
.champion-profile-page .champion-runes .grid-block-content-row .content-row-right-half .pick-rate,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .content-row-right-half .pick-rate,
.champion-profile-page .overview-matchups .grid-block-content-row .content-row-right-half .pick-rate {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:63px;
}

.champion-profile-page .champion-items .grid-block-content-row .content-row-right-half .pick-rate .pick-matches,
.champion-profile-page .champion-runes .grid-block-content-row .content-row-right-half .pick-rate .pick-matches,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .content-row-right-half .pick-rate .pick-matches,
.champion-profile-page .overview-matchups .grid-block-content-row .content-row-right-half .pick-rate .pick-matches {
  color:#cddcfe;
  font-family:Inter;
  font-style:normal;
  font-weight:500;
  font-size:10px;
  line-height:12px;
}

.champion-profile-page .champion-items .grid-block-content-row .content-row-right-half .win-rate,
.champion-profile-page .champion-runes .grid-block-content-row .content-row-right-half .win-rate,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .content-row-right-half .win-rate,
.champion-profile-page .overview-matchups .grid-block-content-row .content-row-right-half .win-rate {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-right:67px;
}

.champion-profile-page .champion-items .grid-block-content-row .items .sprite,
.champion-profile-page .champion-runes .grid-block-content-row .items .sprite,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .items .sprite,
.champion-profile-page .overview-matchups .grid-block-content-row .items .sprite {
  border-radius:2px;
  overflow:hidden;
}

.champion-profile-page .champion-items .grid-block-content-row .items,
.champion-profile-page .champion-items .grid-block-content-row .skill-path,
.champion-profile-page .champion-items .grid-block-content-row .ss-pair,
.champion-profile-page .champion-runes .grid-block-content-row .items,
.champion-profile-page .champion-runes .grid-block-content-row .skill-path,
.champion-profile-page .champion-runes .grid-block-content-row .ss-pair,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .items,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .skill-path,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .ss-pair,
.champion-profile-page .overview-matchups .grid-block-content-row .items,
.champion-profile-page .overview-matchups .grid-block-content-row .skill-path,
.champion-profile-page .overview-matchups .grid-block-content-row .ss-pair {
  display:flex;
  align-items:center;
  gap:6px;
}

.champion-profile-page .champion-items .grid-block-content-row .skill-path .skill-wrapper,
.champion-profile-page .champion-runes .grid-block-content-row .skill-path .skill-wrapper,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .skill-path .skill-wrapper,
.champion-profile-page .overview-matchups .grid-block-content-row .skill-path .skill-wrapper {
  position:relative;
}

.champion-profile-page .champion-items .grid-block-content-row .skill-path .skill-wrapper .label,
.champion-profile-page .champion-runes .grid-block-content-row .skill-path .skill-wrapper .label,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .skill-path .skill-wrapper .label,
.champion-profile-page .overview-matchups .grid-block-content-row .skill-path .skill-wrapper .label {
  position:absolute;
  left:50%;
  bottom:-7px;
  transform:translateX(-50%);
  width:14px;
  height:14px;
  border:2px solid #191937;
  border-radius:50%;
  background:#383864;
  text-align:center;
}

.champion-profile-page .champion-items .grid-block-content-row .skill-path .skill-wrapper .label span,
.champion-profile-page .champion-runes .grid-block-content-row .skill-path .skill-wrapper .label span,
.champion-profile-page .champion-spells-abilities .grid-block-content-row .skill-path .skill-wrapper .label span,
.champion-profile-page .overview-matchups .grid-block-content-row .skill-path .skill-wrapper .label span {
  display:flex;
  align-items:center;
  justify-content:center;
  height:10px;
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:9px;
  line-height:16px;
  text-align:center;
  color:#fff;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row {
  padding:12px 18px;
  min-height:60px;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row.active,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row.active,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row.active,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row.active {
  background:#191937;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .condensed-runes,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .condensed-runes,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .condensed-runes,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .condensed-runes {
  display:flex;
  align-items:center;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .condensed-runes .condensed-primary,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .condensed-runes .condensed-primary,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .condensed-runes .condensed-primary,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .condensed-runes .condensed-primary {
  padding-right:20px;
  border-right:1px solid var(--border-color-grey);
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .condensed-runes .condensed-sub,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .condensed-runes .condensed-sub,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .condensed-runes .condensed-sub,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .condensed-runes .condensed-sub {
  padding-left:20px;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .condensed-runes .open-arrow,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .condensed-runes .open-arrow,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .condensed-runes .open-arrow,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .condensed-runes .open-arrow {
  margin-right:20px;
  width:12px;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .condensed-runes .open-arrow path,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .condensed-runes .open-arrow path,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .condensed-runes .open-arrow path,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .condensed-runes .open-arrow path {
  fill:var(--font-color-main);
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .condensed-runes .rune-button,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .condensed-runes .rune-button,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .condensed-runes .rune-button,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .condensed-runes .rune-button {
  height:20px;
  width:20px;
  border-radius:3px;
  background:#070720;
  margin-right:8px;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .rune-trees-container,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .rune-trees-container,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .rune-trees-container,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .rune-trees-container {
  margin-top:18px;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row:hover,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row:hover,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row:hover,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row:hover {
  background-color:#191937;
  cursor:pointer;
}

.ugg-theme_light .champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row:hover,
.ugg-theme_light .champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row:hover,
.ugg-theme_light .champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row:hover,
.ugg-theme_light .champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row:hover {
  background-color:#cddcfe;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .right-half-runeset-rates,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .right-half-runeset-rates,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .right-half-runeset-rates,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .right-half-runeset-rates {
  display:flex;
  height:36px;
  width:17.5%;
  justify-content:space-between;
  margin-left:auto;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .pick-rate,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .pick-rate,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .pick-rate,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .pick-rate {
  display:flex;
  flex-direction:column;
  text-align:center;
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  line-height:17px;
  color:#fff;
  width:46%;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .pick-rate .pick-matches,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .pick-rate .pick-matches,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .pick-rate .pick-matches,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .pick-rate .pick-matches {
  font-weight:500;
  font-size:12px;
  line-height:15px;
  color:#cddcfe;
  margin-top:4px;
}

.champion-profile-page .champion-items .grid-block-content-row.condensed-runes-row .win-rate,
.champion-profile-page .champion-runes .grid-block-content-row.condensed-runes-row .win-rate,
.champion-profile-page .champion-spells-abilities .grid-block-content-row.condensed-runes-row .win-rate,
.champion-profile-page .overview-matchups .grid-block-content-row.condensed-runes-row .win-rate {
  font-weight:500;
  font-size:14px;
  line-height:17px;
  color:#cddcfe;
  display:flex;
  flex-direction:column;
  margin-top:8px;
  text-align:center;
  width:38%;
}

.champion-profile-page .champion-items .core-items,
.champion-profile-page .champion-runes .core-items,
.champion-profile-page .champion-spells-abilities .core-items,
.champion-profile-page .overview-matchups .core-items {
  grid-template-columns:2fr .7fr .58fr;
}

.champion-profile-page .champion-items .header-left-half,
.champion-profile-page .champion-runes .header-left-half,
.champion-profile-page .champion-spells-abilities .header-left-half,
.champion-profile-page .overview-matchups .header-left-half {
  display:flex;
  width:43%;
}

.champion-profile-page .champion-items .header-left-half .bluebar,
.champion-profile-page .champion-runes .header-left-half .bluebar,
.champion-profile-page .champion-spells-abilities .header-left-half .bluebar,
.champion-profile-page .overview-matchups .header-left-half .bluebar {
  height:20px;
  width:2px;
  background:#3273fa;
  border-radius:2px;
  margin-right:12px;
}

.champion-profile-page .champion-items .header-left-half .title,
.champion-profile-page .champion-runes .header-left-half .title,
.champion-profile-page .champion-spells-abilities .header-left-half .title,
.champion-profile-page .overview-matchups .header-left-half .title {
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  line-height:20px;
}

.champion-profile-page .champion-items .header-left-half input[type=checkbox],
.champion-profile-page .champion-runes .header-left-half input[type=checkbox],
.champion-profile-page .champion-spells-abilities .header-left-half input[type=checkbox],
.champion-profile-page .overview-matchups .header-left-half input[type=checkbox] {
  visibility:hidden;
  accent-color:#25254b;
  outline:1px solid #7687ad;
  padding:15px;
}

.champion-profile-page .champion-items .header-left-half input[type=checkbox]:checked+label:before,
.champion-profile-page .champion-runes .header-left-half input[type=checkbox]:checked+label:before,
.champion-profile-page .champion-spells-abilities .header-left-half input[type=checkbox]:checked+label:before,
.champion-profile-page .overview-matchups .header-left-half input[type=checkbox]:checked+label:before {
  accent-color:#25254b;
  padding:10px;
}

.champion-profile-page .champion-items .header-left-half input[type=checkbox]:checked+label:after,
.champion-profile-page .champion-runes .header-left-half input[type=checkbox]:checked+label:after,
.champion-profile-page .champion-spells-abilities .header-left-half input[type=checkbox]:checked+label:after,
.champion-profile-page .overview-matchups .header-left-half input[type=checkbox]:checked+label:after {
  accent-color:#25254b;
  padding:5px;
}

.champion-profile-page .champion-items .header-left-half .checkmark,
.champion-profile-page .champion-runes .header-left-half .checkmark,
.champion-profile-page .champion-spells-abilities .header-left-half .checkmark,
.champion-profile-page .overview-matchups .header-left-half .checkmark {
  position:absolute;
  background-color:#25254b;
  height:16px;
  width:16px;
  border-radius:3px;
  margin-left:-16px;
  margin-top:3px;
}

.champion-profile-page .champion-items .header-left-half .checkmark span,
.champion-profile-page .champion-runes .header-left-half .checkmark span,
.champion-profile-page .champion-spells-abilities .header-left-half .checkmark span,
.champion-profile-page .overview-matchups .header-left-half .checkmark span {
  margin-left:10px;
}

.champion-profile-page .champion-items .header-left-half .test:hover input~.checkmark,
.champion-profile-page .champion-runes .header-left-half .test:hover input~.checkmark,
.champion-profile-page .champion-spells-abilities .header-left-half .test:hover input~.checkmark,
.champion-profile-page .overview-matchups .header-left-half .test:hover input~.checkmark {
  background-color:#313160;
}

.champion-profile-page .champion-items .header-left-half .test input:checked~.checkmark,
.champion-profile-page .champion-runes .header-left-half .test input:checked~.checkmark,
.champion-profile-page .champion-spells-abilities .header-left-half .test input:checked~.checkmark,
.champion-profile-page .overview-matchups .header-left-half .test input:checked~.checkmark {
  background:#25254b;
  border:1px solid #7687ad;
  border-radius:3px;
}

.champion-profile-page .champion-items .header-left-half .test input:checked~.checkmark:after,
.champion-profile-page .champion-runes .header-left-half .test input:checked~.checkmark:after,
.champion-profile-page .champion-spells-abilities .header-left-half .test input:checked~.checkmark:after,
.champion-profile-page .overview-matchups .header-left-half .test input:checked~.checkmark:after {
  display:block;
}

.champion-profile-page .champion-items .header-left-half label,
.champion-profile-page .champion-runes .header-left-half label,
.champion-profile-page .champion-spells-abilities .header-left-half label,
.champion-profile-page .overview-matchups .header-left-half label {
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:17px;
  color:#cddcfe;
}

.champion-profile-page .champion-items .header-right-half,
.champion-profile-page .champion-runes .header-right-half,
.champion-profile-page .champion-spells-abilities .header-right-half,
.champion-profile-page .overview-matchups .header-right-half {
  display:flex;
  width:47%;
  justify-content:flex-end;
  font-family:Inter;
  font-style:normal;
  font-weight:500;
  font-size:14px;
  line-height:17px;
  color:#cddcfe;
}

.champion-profile-page .champion-items .header-right-half .blue-bar-horz,
.champion-profile-page .champion-runes .header-right-half .blue-bar-horz,
.champion-profile-page .champion-spells-abilities .header-right-half .blue-bar-horz,
.champion-profile-page .overview-matchups .header-right-half .blue-bar-horz {
  background:#3273fa;
  position:absolute;
  height:2px;
  width:63px;
  border-radius:1px;
  margin-top:24px;
  margin-left:-1px;
}

.champion-profile-page .champion-items .header-right-half div,
.champion-profile-page .champion-runes .header-right-half div,
.champion-profile-page .champion-spells-abilities .header-right-half div,
.champion-profile-page .overview-matchups .header-right-half div {
  margin-left:48px;
}

.champion-profile-page .champion-items .title,
.champion-profile-page .champion-runes .title,
.champion-profile-page .champion-spells-abilities .title,
.champion-profile-page .overview-matchups .title {
  color:var(--font-color-main);
  text-align:center;
  white-space:nowrap;
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  line-height:20px;
  color:#fff;
}

.champion-profile-page .champion-items .title.sortable,
.champion-profile-page .champion-runes .title.sortable,
.champion-profile-page .champion-spells-abilities .title.sortable,
.champion-profile-page .overview-matchups .title.sortable {
  justify-content:center;
  font-weight:500;
  line-height:17px;
  color:#cddcfe;
}

.champion-profile-page .champion-items .title.sortable:hover,
.champion-profile-page .champion-runes .title.sortable:hover,
.champion-profile-page .champion-spells-abilities .title.sortable:hover,
.champion-profile-page .overview-matchups .title.sortable:hover {
  cursor:pointer;
}

.champion-profile-page .champion-items .title:first-child,
.champion-profile-page .champion-runes .title:first-child,
.champion-profile-page .champion-spells-abilities .title:first-child,
.champion-profile-page .overview-matchups .title:first-child {
  text-align:left;
}

.champion-profile-page .champion-items .title .sort-arrows,
.champion-profile-page .champion-runes .title .sort-arrows,
.champion-profile-page .champion-spells-abilities .title .sort-arrows,
.champion-profile-page .overview-matchups .title .sort-arrows {
  display:inline-block;
  width:10px;
  margin-left:10px;
}

.champion-profile-page .champion-items .title .sort-arrows .sorted,
.champion-profile-page .champion-runes .title .sort-arrows .sorted,
.champion-profile-page .champion-spells-abilities .title .sort-arrows .sorted,
.champion-profile-page .overview-matchups .title .sort-arrows .sorted {
  position:relative;
  top:-3px;
}

.champion-profile-page .champion-items .title .sort-arrows path,
.champion-profile-page .champion-runes .title .sort-arrows path,
.champion-profile-page .champion-spells-abilities .title .sort-arrows path,
.champion-profile-page .overview-matchups .title .sort-arrows path {
  fill:var(--font-color-main);
}

.champion-profile-page .champion-items .abilities,
.champion-profile-page .champion-items .summoner-spells,
.champion-profile-page .champion-runes .abilities,
.champion-profile-page .champion-runes .summoner-spells,
.champion-profile-page .champion-spells-abilities .abilities,
.champion-profile-page .champion-spells-abilities .summoner-spells,
.champion-profile-page .overview-matchups .abilities,
.champion-profile-page .overview-matchups .summoner-spells {
  width:calc(50% - 3px);
}

.champion-profile-page .champion-items .abilities img,
.champion-profile-page .champion-items .summoner-spells img,
.champion-profile-page .champion-runes .abilities img,
.champion-profile-page .champion-runes .summoner-spells img,
.champion-profile-page .champion-spells-abilities .abilities img,
.champion-profile-page .champion-spells-abilities .summoner-spells img,
.champion-profile-page .overview-matchups .abilities img,
.champion-profile-page .overview-matchups .summoner-spells img {
  width:30px;
  height:30px;
  border-radius:15%;
}

.champion-profile-page .champion-items .keystone-pairs,
.champion-profile-page .champion-runes .keystone-pairs,
.champion-profile-page .champion-spells-abilities .keystone-pairs,
.champion-profile-page .overview-matchups .keystone-pairs {
  display:inline-block;
  width:calc(25% - 6px);
}

.champion-profile-page .champion-items .keystone-pairs .view-all,
.champion-profile-page .champion-runes .keystone-pairs .view-all,
.champion-profile-page .champion-spells-abilities .keystone-pairs .view-all,
.champion-profile-page .overview-matchups .keystone-pairs .view-all {
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  line-height:20px;
  color:#fff;
}

.champion-profile-page .champion-items .keystone-pairs .view-all:hover,
.champion-profile-page .champion-runes .keystone-pairs .view-all:hover,
.champion-profile-page .champion-spells-abilities .keystone-pairs .view-all:hover,
.champion-profile-page .overview-matchups .keystone-pairs .view-all:hover {
  color:#08a6ff;
  cursor:pointer;
}

.champion-profile-page .champion-items .keystone-pairs .grid-block-content-row,
.champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row,
.champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row,
.champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row {
  grid-template-columns:5.2fr 4.8fr;
}

.champion-profile-page .champion-items .keystone-pairs .grid-block-content-row.active,
.champion-profile-page .champion-items .keystone-pairs .grid-block-content-row:hover,
.champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row.active,
.champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row:hover,
.champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row.active,
.champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row:hover,
.champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row.active,
.champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row:hover {
  background-color:#191937;
  cursor:pointer;
}

.ugg-theme_light .champion-profile-page .champion-items .keystone-pairs .grid-block-content-row.active,
.ugg-theme_light .champion-profile-page .champion-items .keystone-pairs .grid-block-content-row:hover,
.ugg-theme_light .champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row.active,
.ugg-theme_light .champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row:hover,
.ugg-theme_light .champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row.active,
.ugg-theme_light .champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row:hover,
.ugg-theme_light .champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row.active,
.ugg-theme_light .champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row:hover {
  background-color:#cddcfe;
}

.champion-profile-page .champion-items .keystone-pairs .grid-block-content-row span,
.champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row span,
.champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row span,
.champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row span {
  font-weight:400;
}

.champion-profile-page .champion-items .keystone-pairs .grid-block-content-row .pick-rate,
.champion-profile-page .champion-items .keystone-pairs .grid-block-content-row .win-rate,
.champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row .pick-rate,
.champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row .win-rate,
.champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row .pick-rate,
.champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row .win-rate,
.champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row .pick-rate,
.champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row .win-rate {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  white-space:nowrap;
  text-align:left;
  font-family:Inter;
  font-style:normal;
  font-weight:500;
  font-size:12px;
  line-height:15px;
  color:#cddcfe;
}

.champion-profile-page .champion-items .keystone-pairs .grid-block-content-row .pick-rate span,
.champion-profile-page .champion-items .keystone-pairs .grid-block-content-row .win-rate span,
.champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row .pick-rate span,
.champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row .win-rate span,
.champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row .pick-rate span,
.champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row .win-rate span,
.champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row .pick-rate span,
.champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row .win-rate span {
  grid-column:1/2;
}

.champion-profile-page .champion-items .keystone-pairs .grid-block-content-row .pick-rate strong,
.champion-profile-page .champion-items .keystone-pairs .grid-block-content-row .win-rate strong,
.champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row .pick-rate strong,
.champion-profile-page .champion-runes .keystone-pairs .grid-block-content-row .win-rate strong,
.champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row .pick-rate strong,
.champion-profile-page .champion-spells-abilities .keystone-pairs .grid-block-content-row .win-rate strong,
.champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row .pick-rate strong,
.champion-profile-page .overview-matchups .keystone-pairs .grid-block-content-row .win-rate strong {
  grid-column:2/3;
  text-align:right;
  font-weight:600;
  color:#fff;
}

.champion-profile-page .champion-items .keystone-pairs .keystone-pair,
.champion-profile-page .champion-runes .keystone-pairs .keystone-pair,
.champion-profile-page .champion-spells-abilities .keystone-pairs .keystone-pair,
.champion-profile-page .overview-matchups .keystone-pairs .keystone-pair {
  display:flex;
  align-items:center;
}

.champion-profile-page .champion-items .keystone-pairs .keystone-pair .keystone-perk img,
.champion-profile-page .champion-items .keystone-pairs .keystone-pair .primary-perkstyle img,
.champion-profile-page .champion-runes .keystone-pairs .keystone-pair .keystone-perk img,
.champion-profile-page .champion-runes .keystone-pairs .keystone-pair .primary-perkstyle img,
.champion-profile-page .champion-spells-abilities .keystone-pairs .keystone-pair .keystone-perk img,
.champion-profile-page .champion-spells-abilities .keystone-pairs .keystone-pair .primary-perkstyle img,
.champion-profile-page .overview-matchups .keystone-pairs .keystone-pair .keystone-perk img,
.champion-profile-page .overview-matchups .keystone-pairs .keystone-pair .primary-perkstyle img {
  width:42px;
  height:42px;
}

.champion-profile-page .champion-items .keystone-pairs .keystone-pair .primary-perkstyle,
.champion-profile-page .champion-runes .keystone-pairs .keystone-pair .primary-perkstyle,
.champion-profile-page .champion-spells-abilities .keystone-pairs .keystone-pair .primary-perkstyle,
.champion-profile-page .overview-matchups .keystone-pairs .keystone-pair .primary-perkstyle {
  padding-right:5px;
  border-right:1px solid var(--border-color-grey);
}

.champion-profile-page .champion-items .keystone-pairs .keystone-pair .sub-perkstyle,
.champion-profile-page .champion-runes .keystone-pairs .keystone-pair .sub-perkstyle,
.champion-profile-page .champion-spells-abilities .keystone-pairs .keystone-pair .sub-perkstyle,
.champion-profile-page .overview-matchups .keystone-pairs .keystone-pair .sub-perkstyle {
  position:relative;
  top:3px;
}

.champion-profile-page .champion-items .keystone-pairs .keystone-pair .sub-perkstyle img,
.champion-profile-page .champion-runes .keystone-pairs .keystone-pair .sub-perkstyle img,
.champion-profile-page .champion-spells-abilities .keystone-pairs .keystone-pair .sub-perkstyle img,
.champion-profile-page .overview-matchups .keystone-pairs .keystone-pair .sub-perkstyle img {
  width:32px;
  height:32px;
}

.champion-profile-page .champion-items .runes,
.champion-profile-page .champion-runes .runes,
.champion-profile-page .champion-spells-abilities .runes,
.champion-profile-page .overview-matchups .runes {
  display:inline-block;
  width:calc(75% - 6px);
}

.champion-profile-page .champion-items .runes .grid-block-content-row,
.champion-profile-page .champion-items .runes .grid-block-header,
.champion-profile-page .champion-runes .runes .grid-block-content-row,
.champion-profile-page .champion-runes .runes .grid-block-header,
.champion-profile-page .champion-spells-abilities .runes .grid-block-content-row,
.champion-profile-page .champion-spells-abilities .runes .grid-block-header,
.champion-profile-page .overview-matchups .runes .grid-block-content-row,
.champion-profile-page .overview-matchups .runes .grid-block-header {
  grid-template-columns:7.2fr 1.4fr 1.4fr;
}

.champion-profile-page .champion-items .runes .grid-block-content-row .title.sortable,
.champion-profile-page .champion-items .runes .grid-block-header .title.sortable,
.champion-profile-page .champion-runes .runes .grid-block-content-row .title.sortable,
.champion-profile-page .champion-runes .runes .grid-block-header .title.sortable,
.champion-profile-page .champion-spells-abilities .runes .grid-block-content-row .title.sortable,
.champion-profile-page .champion-spells-abilities .runes .grid-block-header .title.sortable,
.champion-profile-page .overview-matchups .runes .grid-block-content-row .title.sortable,
.champion-profile-page .overview-matchups .runes .grid-block-header .title.sortable {
  justify-content:center;
}

.champion-profile-page .champion-items .runes .rune-trees-container,
.champion-profile-page .champion-runes .runes .rune-trees-container,
.champion-profile-page .champion-spells-abilities .runes .rune-trees-container,
.champion-profile-page .overview-matchups .runes .rune-trees-container {
  display:flex;
  justify-content:center;
}

.champion-profile-page .champion-spells-abilities .win-rate {
  margin-right:56px !important;
}

.champion-profile-page .champion-items {
  width:100%;
}

.champion-profile-page .champion-items .champion-items-left {
  width:calc(41% - 4px);
}

.champion-profile-page .champion-items .champion-items-right {
  width:calc(59% - 10px);
}

.champion-profile-page .champion-items .boots,
.champion-profile-page .champion-items .core-items,
.champion-profile-page .champion-items .starting-items {
  width:100%;
  background-color:#191937;
}

.champion-profile-page .champion-items .boots img,
.champion-profile-page .champion-items .core-items img,
.champion-profile-page .champion-items .starting-items img {
  width:34px;
  height:34px;
  border-radius:15%;
}

.champion-profile-page .items-table-container {
  display:grid;
  grid-template-rows:auto 1fr;
  grid-template-columns:repeat(10,1fr);
  grid-gap:12px 13px;
  margin-top:24px;
  width:1200px;
}

.champion-profile-page .items-table-container .grid-block {
  display:inline-block;
  box-shadow:var(--ugg-box-shadow);
  border-radius:3px;
}

.champion-profile-page .items-table-container .grid-block .bluebar {
  height:20px;
  width:2px;
  background:#3273fa;
  border-radius:2px;
  margin-right:12px;
}

.champion-profile-page .items-table-container .grid-block .grid-block-header {
  height:56px;
  border-bottom:1px solid #070720;
}

.champion-profile-page .items-table-container .grid-block.starting-items {
  grid-row:1/2;
  grid-column:1/6;
}

.champion-profile-page .items-table-container .grid-block.starting-items .grid-block-header {
  padding:0 18px;
  border-bottom:none;
}

.champion-profile-page .items-table-container .grid-block.starting-items .grid-block-content {
  padding-bottom:8px;
}

.champion-profile-page .items-table-container .grid-block.boots {
  grid-row:1/2;
  grid-column:6/11;
  padding-bottom:8px;
}

.champion-profile-page .items-table-container .grid-block.boots .grid-block-header {
  padding:0 24px;
  border-bottom:none;
}

.champion-profile-page .items-table-container .grid-block.boots .grid-block-content {
  padding-bottom:8px;
}

.champion-profile-page .items-table-container .grid-block.items-1 {
  grid-row:2/3;
  grid-column:1/3;
}

.champion-profile-page .items-table-container .grid-block.items-2 {
  grid-row:2/3;
  grid-column:3/5;
}

.champion-profile-page .items-table-container .grid-block.items-3 {
  grid-row:2/3;
  grid-column:5/7;
}

.champion-profile-page .items-table-container .grid-block.items-4 {
  grid-row:2/3;
  grid-column:7/9;
}

.champion-profile-page .items-table-container .grid-block.items-5 {
  grid-row:2/3;
  grid-column:9/11;
}

.champion-profile-page .items-table-container .grid-block-header {
  display:flex;
  justify-content:flex-start;
  height:46px;
  padding:0 8px 0 12px;
  background-color:#191937;
}

.champion-profile-page .items-table-container .grid-block-header .header-left-half {
  width:100%;
  display:flex;
}

.champion-profile-page .items-table-container .grid-block-header .header-right-half {
  width:100%;
  display:flex;
  justify-content:flex-end;
}

.champion-profile-page .items-table-container .grid-block-header .header-right-half .blue-bar-horz {
  background:#3273fa;
  position:absolute;
  height:2px;
  width:38px;
  border-radius:1px;
  margin-top:24px;
  margin-left:-1px;
}

.champion-profile-page .items-table-container .grid-block-header .title {
  display:flex;
  color:var(--font-color-main);
}

.champion-profile-page .items-table-container .grid-block-header .title.sortable {
  justify-content:center;
  align-items:center;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  font-family:Inter;
  font-style:normal;
  font-weight:500;
  font-size:14px;
  line-height:17px;
  text-align:center;
  color:#cddcfe;
}

.champion-profile-page .items-table-container .grid-block-header .title.sortable.win-rate {
  display:flex;
  margin-right:44px;
}

.champion-profile-page .items-table-container .grid-block-header .title.sortable.pick-rate {
  display:flex;
  margin-right:21px;
}

.champion-profile-page .items-table-container .grid-block-header .title h2 {
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  line-height:20px;
}

.champion-profile-page .items-table-container .grid-block-header .title .sort-arrows {
  display:inline-block;
  width:8px;
  margin-left:3px;
}

.champion-profile-page .items-table-container .grid-block-header .title .sort-arrows .sorted {
  position:relative;
  top:-2px;
}

.champion-profile-page .items-table-container .grid-block-header .title .sort-arrows path {
  fill:var(--font-color-main);
}

.champion-profile-page .items-table-container .grid-block-content {
  background-color:#191937;
}

.champion-profile-page .items-table-container .grid-block-content-items-table {
  display:flex;
  width:100%;
}

.champion-profile-page .items-table-container .table-labels {
  font-weight:700;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}

.champion-profile-page .items-table-container .table-labels .pick-rate,
.champion-profile-page .items-table-container .table-labels .win-rate {
  cursor:pointer;
}

.champion-profile-page .items-table-container .grid-wrapper {
  flex:1 1;
  background-color:#191937;
}

.champion-profile-page .items-table-container .grid-wrapper:first-child {
  flex:0 0 90px;
}

.champion-profile-page .items-table-container .grid-wrapper:nth-child(n+3) {
  border-left:1px solid #383864;
  height:110px;
}

.champion-profile-page .items-table-container .grid-wrapper .table-labels {
  justify-content:flex-start;
  margin-left:24px;
  background-color:#191937;
}

.champion-profile-page .items-table-container .grid-wrapper .table-labels div {
  justify-content:flex-start;
}

.champion-profile-page .items-table-container .item-column {
  display:grid;
  grid-template-rows:30px 30px 30px 30px;
  background-color:#383864;
  width:100%;
  text-align:center;
  font-size:12px;
}

.champion-profile-page .items-table-container .item-column>* {
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#191937;
  color:#cddcfe;
  font-weight:500;
}

.champion-profile-page .items-table-container .item-row {
  display:grid;
  grid-template-columns:4fr 5fr 3.5fr;
  padding:18px 13px;
  border-bottom:1px solid #070720;
  font-size:12px;
}

.champion-profile-page .items-table-container .item-row .pick-rate,
.champion-profile-page .items-table-container .item-row .win-rate {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-weight:700;
}

.champion-profile-page .items-table-container .item-row .pick-rate .pick-matches,
.champion-profile-page .items-table-container .item-row .win-rate .pick-matches {
  color:#cddcfe;
}

.champion-profile-page .items-table-container .items {
  display:flex;
  align-items:center;
  gap:2px;
}

.champion-profile-page .items-table-container .items .sprite {
  border-radius:1px;
  overflow:hidden;
}

.champion-profile-page .items-table-container .items .image-wrapper img {
  width:24px;
  height:24px;
  border-radius:1px;
}

.champion-profile-page .runes-table-container {
  margin-top:24px;
}

.champion-profile-page .runes-table-container .grid-block {
  border-radius:3px;
}

.champion-profile-page .runes-table-container .legend {
  display:flex;
  align-items:center;
}

.champion-profile-page .runes-table-container .legend .forward-slash {
  margin:0 7px;
}

.champion-profile-page .runes-table-container .legend .legend-key {
  display:flex;
  align-items:center;
}

.champion-profile-page .runes-table-container .legend .legend-key .legend-color {
  margin-right:5px;
  width:10px;
  height:10px;
  border-radius:50%;
}

.champion-profile-page .runes-table-container .legend .legend-key .legend-text {
  font-size:12px;
  background-color:transparent !important;
}

.champion-profile-page .runes-table-container .legend .legend-key .legend-text .plus {
  position:relative;
  top:-1.3px;
}

.champion-profile-page .runes-table-container .legend .legend-key .win-rate {
  color:var(--font-color-main);
  background-color:var(--font-color-main);
}

.champion-profile-page .runes-table-container .legend .legend-key .pick-rate {
  color:var(--font-color-grey);
  background-color:var(--font-color-grey);
}

.champion-profile-page .runes-table-container .legend .legend-key .top-pick-rate {
  color:#ff9b00;
  background-color:#ff9b00;
}

.champion-profile-page .runes-table-container .primary-runes-grid,
.champion-profile-page .runes-table-container .secondary-runes-grid {
  display:grid;
  grid-template-columns:repeat(5,235px);
  grid-gap:1px;
}

.champion-profile-page .runes-table-container .primary-runes-grid {
  margin-bottom:10px;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-header {
  height:40px;
  padding:15px 20px;
  justify-content:flex-start;
  border:none;
  background-color:#191937;
  margin-bottom:0;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-header .bluebar {
  height:20px;
  width:2px;
  background:#3273fa;
  border-radius:2px;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-header .blue-bar-horz {
  background:#3273fa;
  position:absolute;
  height:2px;
  width:63px;
  border-radius:1px;
  margin-top:24px;
  margin-left:-1px;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-header .title {
  display:flex;
  margin-left:12px;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-header .title>* {
  margin:0;
  line-height:1;
  font-size:12px;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-header .title h2 {
  margin-right:10px;
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  line-height:20px;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-header .title span {
  color:#5f5f7b;
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:20px;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content {
  padding:0 15px 20px;
  background-color:#191937;
  border:none;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-keystones,
.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-runes {
  display:flex;
  justify-content:space-between;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-keystones .grayscale,
.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-runes .grayscale {
  filter:grayscale(0);
  opacity:.3;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-keystones .rune,
.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-runes .rune {
  margin-top:20px;
  flex:0 0 25%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  white-space:nowrap;
  font-size:12px;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-keystones .rune .win-rate,
.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-runes .rune .win-rate {
  font-weight:700;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-keystones .rune .win-rate.grayscale,
.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-runes .rune .win-rate.grayscale {
  filter:grayscale(0);
  opacity:.3;
  color:#fff;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-keystones .rune .pick-rate,
.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-runes .rune .pick-rate {
  color:var(--font-color-grey);
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-keystones .rune .pick-rate.volxd-tier,
.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-runes .rune .pick-rate.volxd-tier {
  color:#ff9b00;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-keystones .rune .pick-rate.grayscale,
.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-runes .rune .pick-rate.grayscale {
  filter:grayscale(0);
  opacity:.3;
  color:#cddcfe;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-keystones {
  padding-bottom:20px;
  border-bottom:1px solid #383864;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-keystones img {
  width:40px;
  height:40px;
  margin-bottom:12px;
}

.champion-profile-page .runes-table-container .grid-block .grid-block-content .grid-block-content-runes img {
  width:24px;
  height:24px;
  margin-bottom:10px;
}

.champion-profile-page .counters-container {
  display:grid;
  grid-template-rows:auto auto 1fr;
  grid-template-columns:repeat(3,1fr);
  grid-gap:12px 13px;
  margin-top:24px;
  align-items:flex-start;
}

@media(max-width:899px) {
  .champion-profile-page .counters-container {
    grid-template-columns:repeat(2,1fr);
    grid-gap:24px;
  }
}

@media(max-width:399px) {
  .champion-profile-page .counters-container {
    grid-template-columns:repeat(1,1fr);
    grid-template-rows:repeat(4,auto);
  }
}

.champion-profile-page .counters-container .counters-column {
  border-radius:6px;
  background-color:#191937;
}

.champion-profile-page .counters-container .counters-column .top-half {
  padding:18px;
}

.champion-profile-page .counters-container .counters-column .text-snippet {
  display:flex;
  align-items:center;
  font-weight:400;
  font-size:10px;
  line-height:16px;
  color:#7687ad;
}

.champion-profile-page .counters-container .counters-column .text-snippet .snippet-icon {
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 14px 0 2px;
  flex:0 0 24px;
  width:20px;
}

.champion-profile-page .counters-container .counters-column .text-snippet:nth-child(2) {
  grid-area:2/1/3/2;
}

.champion-profile-page .counters-container .counters-column .text-snippet:nth-child(5) {
  grid-area:2/2/3/3;
}

.champion-profile-page .counters-container .counters-column .text-snippet:nth-child(8) {
  grid-area:2/3/3/4;
}

@media(max-width:899px) {
  .champion-profile-page .counters-container .counters-column .text-snippet:nth-child(2) {
    grid-area:2/1/3/2;
  }
  .champion-profile-page .counters-container .counters-column .text-snippet:nth-child(5) {
    grid-area:2/2/3/3;
  }
  .champion-profile-page .counters-container .counters-column .text-snippet:nth-child(8) {
    grid-area:5/1/6/2;
  }
}

@media(max-width:399px) {
  .champion-profile-page .counters-container .counters-column .text-snippet:nth-child(2) {
    grid-area:2/1/3/2;
  }
  .champion-profile-page .counters-container .counters-column .text-snippet:nth-child(5) {
    grid-area:5/1/6/2;
  }
  .champion-profile-page .counters-container .counters-column .text-snippet:nth-child(8) {
    grid-area:8/1/9/2;
  }
}

.champion-profile-page .counters-container .counters-column .counters-list {
  display:flex;
  flex-direction:column;
  align-items:center;
}

.champion-profile-page .counters-container .counters-column .counters-list:nth-child(3) {
  grid-area:3/1/4/2;
}

.champion-profile-page .counters-container .counters-column .counters-list:nth-child(6) {
  grid-area:3/2/4/3;
}

.champion-profile-page .counters-container .counters-column .counters-list:nth-child(9) {
  grid-area:3/3/4/4;
}

@media(max-width:899px) {
  .champion-profile-page .counters-container .counters-column .counters-list:nth-child(3) {
    grid-area:3/1/4/2;
  }
  .champion-profile-page .counters-container .counters-column .counters-list:nth-child(6) {
    grid-area:3/2/4/3;
  }
  .champion-profile-page .counters-container .counters-column .counters-list:nth-child(9) {
    grid-area:6/1/7/2;
  }
}

@media(max-width:399px) {
  .champion-profile-page .counters-container .counters-column .counters-list:nth-child(3) {
    grid-area:3/1/4/2;
  }
  .champion-profile-page .counters-container .counters-column .counters-list:nth-child(6) {
    grid-area:6/1/7/2;
  }
  .champion-profile-page .counters-container .counters-column .counters-list:nth-child(9) {
    grid-area:9/1/10/2;
  }
}

.champion-profile-page .counters-container .counters-column .counters-list .view-more-btn {
  width:100%;
  border:none;
  border-top:1px solid #070720;
  background-color:#25254b;
  padding:16px 0;
  font-weight:500;
  font-size:12px;
  line-height:125%;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card {
  display:flex;
  align-items:center;
  padding:12px;
  width:100%;
  transition:transform .1s;
  border-top:1px solid #070720;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.best-win-rate .win-rate {
  color:#3273fa;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.best-win-rate:first-child {
  background:rgba(50,115,250,.2);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.best-win-rate:first-child:hover {
  background:rgba(100,149,251,.2);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.best-win-rate:nth-child(2) {
  background:rgba(50,115,250,.15);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.best-win-rate:nth-child(2):hover {
  background:rgba(100,149,251,.15);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.best-win-rate:nth-child(3) {
  background:rgba(50,115,250,.1);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.best-win-rate:nth-child(3):hover {
  background:rgba(100,149,251,.1);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.worst-win-rate .win-rate {
  color:#ff4e50;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.worst-win-rate:first-child {
  background:rgba(255,78,80,.2);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.worst-win-rate:first-child:hover {
  background:rgba(255,129,130,.2);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.worst-win-rate:nth-child(2) {
  background:rgba(255,78,80,.15);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.worst-win-rate:nth-child(2):hover {
  background:rgba(255,129,130,.15);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.worst-win-rate:nth-child(3) {
  background:rgba(255,78,80,.1);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.worst-win-rate:nth-child(3):hover {
  background:rgba(255,129,130,.1);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.gold-diff .win-rate {
  color:#31db9e;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.gold-diff:first-child {
  background:rgba(49,219,158,.2);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.gold-diff:first-child:hover {
  background:rgba(92,227,178,.2);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.gold-diff:nth-child(2) {
  background:rgba(49,219,158,.15);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.gold-diff:nth-child(2):hover {
  background:rgba(92,227,178,.15);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.gold-diff:nth-child(3) {
  background:rgba(49,219,158,.1);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card.gold-diff:nth-child(3):hover {
  background:rgba(92,227,178,.1);
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card .col-2 {
  flex:1 1;
  padding-right:5%;
  overflow:auto;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card .col-3 {
  flex:0 0 70px;
  text-align:right;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card .col-3 .win-rate {
  font-size:12px;
  font-weight:700;
  line-height:15px;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card .col-3 .total-games {
  margin-top:2px;
  color:#cddcfe;
  font-size:11px;
  font-weight:400;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card .champion-name {
  color:#fff;
  font-size:14px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card .win-rate-bar-container {
  margin-top:6px;
  margin-bottom:3px;
  height:6px;
  border-radius:3px;
  background-color:#25254b;
  overflow:hidden;
  max-width:124px;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card .win-rate-bar-container .win-rate-bar {
  height:100%;
  background-color:#cddcfe;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card .champion-image {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-right:9px;
  width:36px;
  height:36px;
  border-radius:2px;
  overflow:hidden;
}

.champion-profile-page .counters-container .counters-column .counters-list .counter-list-card .champion-image>div {
  position:absolute;
  width:100%;
  height:100%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1.1);
}

.champion-profile-page .counters-container .counter-tips {
  grid-area:2/1/4/4;
  flex:1 1;
  padding:24px;
  background-color:#191937;
  border-radius:6px;
}

@media(max-width:899px) {
  .champion-profile-page .counters-container .counter-tips {
    padding:20px;
    grid-area:2/2/2/2;
  }
}

@media(max-width:399px) {
  .champion-profile-page .counters-container .counter-tips {
    grid-area:4/1/5/2;
  }
}

.champion-profile-page .counters-container .counter-tips .tips-container {
  display:grid;
  grid-template-rows:auto;
  grid-template-columns:repeat(2,1fr);
  grid-gap:0 24px;
}

@media(max-width:899px) {
  .champion-profile-page .counters-container .counter-tips .tips-container {
    grid-template-rows:repeat(2,1fr);
    grid-template-columns:1fr;
    grid-gap:24px;
  }
}

@media(max-width:399px) {
  .champion-profile-page .counters-container .counter-tips .tips-container {
    grid-template-rows:repeat(2,1fr);
    grid-template-columns:1fr;
    grid-gap:24px;
  }
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section {
  padding:18px;
  background:#11112a;
  border-radius:2px;
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section .tip-section_header {
  margin-bottom:12px;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  line-height:20px;
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section .tip-item {
  margin:0;
  white-space:pre-wrap;
  font-size:11px;
  line-height:17px;
  color:#7687ad;
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section .tip-item:not(:last-child) {
  margin-bottom:14px;
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section .inline-skill {
  position:relative;
  top:2px;
  display:inline-flex;
  align-items:center;
  padding:3px;
  height:17px;
  border-radius:1px;
  background-color:#17172e;
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section .inline-skill img {
  margin-right:3px;
  width:11px;
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section .inline-skill .skill-value {
  margin-bottom:2px;
  font-size:11px;
  font-weight:700;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section .inline-skill .skill-value.skill-value_Q {
  color:#ff9b00;
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section .inline-skill .skill-value.skill-value_W {
  color:#3273fa;
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section .inline-skill .skill-value.skill-value_E {
  color:#31db9e;
}

.champion-profile-page .counters-container .counter-tips .tips-container .tip-section .inline-skill .skill-value.skill-value_R {
  color:#ff4e50;
}

.champion-profile-page .counters-container .free-header {
  display:flex;
  align-items:center;
  height:auto;
  position:relative;
  padding:0 0 0 12px;
  margin-bottom:18px;
  border:none;
  background-color:#191937;
  font-weight:700;
  font-size:14px;
  line-height:20px;
}

.champion-profile-page .counters-container .free-header:before {
  content:"";
  position:absolute;
  left:0;
  width:2px;
  height:20px;
  border-radius:2px;
  background-color:#3273fa;
}

.champion-profile-page .counters-container .free-header:first-child {
  grid-area:1/1/2/2;
}

.champion-profile-page .counters-container .free-header:nth-child(4) {
  grid-area:1/2/2/3;
}

.champion-profile-page .counters-container .free-header:nth-child(7) {
  grid-area:1/3/2/4;
}

@media(max-width:899px) {
  .champion-profile-page .counters-container .free-header:first-child {
    grid-area:1/1/2/2;
  }
  .champion-profile-page .counters-container .free-header:nth-child(4) {
    grid-area:1/2/2/3;
  }
  .champion-profile-page .counters-container .free-header:nth-child(7) {
    grid-area:4/1/5/2;
  }
}

@media(max-width:399px) {
  .champion-profile-page .counters-container .free-header:first-child {
    grid-area:1/1/2/2;
  }
  .champion-profile-page .counters-container .free-header:nth-child(4) {
    grid-area:4/1/5/2;
  }
  .champion-profile-page .counters-container .free-header:nth-child(7) {
    grid-area:7/1/8/2;
  }
}

.champion-profile-page .counters-container .free-header .counter-warning {
  display:flex;
  justify-content:flex-end;
  flex:1 1;
}

.champion-profile-page .counters-container .free-header .read-length {
  flex:1 1;
  text-align:right;
  color:#cddcfe;
  font-size:14px;
  line-height:20px;
  font-weight:400;
}

@media(max-width:1359px) {
  .champion-profile-page .counters-container {
    min-width:auto;
    width:900px;
  }
}

@media(max-width:1139px) {
  .champion-profile-page .counters-container {
    min-width:auto;
    width:100%;
  }
}

@media(max-width:899px) {
  .champion-profile-page .counters-container {
    min-width:auto;
    width:100%;
  }
}

@media(max-width:599px) {
  .champion-profile-page .counters-container {
    min-width:auto;
    width:100%;
  }
}

.champion-profile-page .counters-container .grid-block {
  display:block;
  margin-bottom:24px;
}

.champion-profile-page .counters-container .good .grid-block-header {
  background:linear-gradient(90deg,#08a6ff -50%,var(--ugg-background-alt) 50%);
}

.champion-profile-page .counters-container .bad .grid-block-header {
  background:linear-gradient(90deg,#ff4e50 -50%,var(--ugg-background-alt) 50%);
}

.champion-profile-page .counters-container .grid-block-header {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:46px;
  padding:0 24px;
}

.champion-profile-page .counters-container .grid-block-header .title {
  display:flex;
  font-size:12px;
}

.champion-profile-page .counters-container .grid-block-header .title h2 {
  margin:0;
  font-size:12px;
  font-weight:700;
  color:var(--font-color-main);
}

.champion-profile-page .counters-container .grid-block-header .view-all {
  height:16px;
  padding:0 11px;
  border:1px solid var(--border-color-grey);
  border-radius:8px;
  font-size:10px;
}

.champion-profile-page .counters-container .grid-block-header .view-all:hover {
  border:1px solid var(--ugg-common-blue);
  background-color:var(--ugg-common-blue);
}

.champion-profile-page .counters-container .grid-block-header .view-all:hover a {
  color:#fff;
}

.champion-profile-page .counters-container .grid-block-header .view-all a {
  text-decoration:none;
  color:var(--font-color-main);
}

.champion-profile-page .counters-container .grid-block-content .subtitle {
  margin-bottom:20px;
  font-size:12px;
  font-weight:700;
}

.champion-profile-page .counters-container .counters-content {
  padding:20px 24px 0;
}

.champion-profile-page .counters-container .counters-content:not(:last-child) {
  border-bottom:1px solid var(--border-color-grey);
}

.champion-profile-page .counters-container .champion-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,96px);
  overflow-x:auto;
}

@media(max-width:1359px) {
  .champion-profile-page .counters-container .champion-list {
    grid-template-columns:repeat(auto-fill,85px);
  }
}

@media(max-width:1139px) {
  .champion-profile-page .counters-container .champion-list {
    grid-template-columns:repeat(auto-fill,96px);
  }
}

@media(max-width:899px) {
  .champion-profile-page .counters-container .champion-list {
    grid-template-columns:repeat(auto-fill,96px);
    display:flex;
    align-items:center;
  }
}

@media(max-width:599px) {
  .champion-profile-page .counters-container .champion-list {
    display:flex;
    align-items:center;
    margin-left:-12px;
  }
}

.champion-profile-page .counters-container .champion-list .counter-champion {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

@media(max-width:899px) {
  .champion-profile-page .counters-container .champion-list .counter-champion {
    flex:0 0 90px;
  }
}

@media(max-width:599px) {
  .champion-profile-page .counters-container .champion-list .counter-champion {
    flex:0 0 75px;
  }
}

.champion-profile-page .counters-container .champion-list .counter-champion span {
  font-size:10px;
  font-weight:400;
  color:var(--font-color-grey);
}

.champion-profile-page .counters-container .champion-list .counter-name {
  font-size:12px;
  font-weight:700;
  margin:10px 0;
}

@media(max-width:599px) {
  .champion-profile-page .counters-container .champion-list .counter-name {
    margin:10px 0 5px;
  }
}

.champion-profile-page .counters-container .champion-list .counter-delta {
  font-size:12px;
  text-align:center;
}

.champion-profile-page .counters-container .champion-list .counter-image {
  position:relative;
  width:64px;
  height:64px;
}

@media(max-width:599px) {
  .champion-profile-page .counters-container .champion-list .counter-image {
    width:48px;
    height:48px;
  }
}

.champion-profile-page .counters-container .champion-list .counter-image a {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  border:1px solid var(--border-color-grey);
  overflow:hidden;
}

.champion-profile-page .counters-container .champion-list .counter-image a img {
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  transform:translate(-50%,-50%) scale(1.1);
}

.champion-profile-page .counters-container .champion-list .counter-image a img:hover {
  opacity:.7;
}

.champion-profile-page .counters-container .champion-list .counter-image .counter-role {
  position:absolute;
  bottom:0;
  right:0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:24px;
  height:24px;
  transform:translateY(25%);
  border-radius:50%;
  border:1px solid var(--border-color-grey);
  background-color:#17172e;
}

.ugg-theme_light .champion-profile-page .counters-container .champion-list .counter-image .counter-role {
  background-color:#fff;
}

.champion-profile-page .counters-container .champion-list .counter-image .counter-role.same-role {
  border:1px solid #ff9b00;
}

.ugg-theme_light .champion-profile-page .counters-container .champion-list .counter-image .counter-role.same-role {
  border:1px solid #08a6ff;
  background-color:#2c2c40;
}

.champion-profile-page .counters-container .champion-list .counter-image .counter-role img {
  width:14px;
  height:14px;
}

.champion-profile-page .overview-matchups .grid-block-content-row,
.champion-profile-page .overview-matchups .grid-block-header {
  grid-template-columns:1.6fr 1fr 1fr 1fr;
}

.champion-profile-page .overview-matchups .best-against,
.champion-profile-page .overview-matchups .worst-against {
  width:calc(50% - 3px);
}

.champion-profile-page .overview-matchups .best-against .champion-opp,
.champion-profile-page .overview-matchups .worst-against .champion-opp {
  display:flex;
  align-items:center;
}

.champion-profile-page .overview-matchups .best-against .champion-image,
.champion-profile-page .overview-matchups .worst-against .champion-image {
  position:relative;
  margin-right:12px;
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid var(--border-color-grey);
  overflow:hidden;
}

.champion-profile-page .overview-matchups .best-against .champion-image img,
.champion-profile-page .overview-matchups .worst-against .champion-image img {
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  transform:translate(-50%,-50%) scale(1.1);
}

.champion-profile-page .overview-matchups .best-against .matches,
.champion-profile-page .overview-matchups .worst-against .matches {
  color:var(--font-color-grey);
  font-weight:400;
}

.champion-profile-page .overview-matchups .best-against .win-rate,
.champion-profile-page .overview-matchups .worst-against .win-rate {
  display:flex;
  justify-content:center;
  align-items:center;
  grid-column:2/3;
}

.champion-profile-page .overview-matchups .best-against .gold-diff,
.champion-profile-page .overview-matchups .worst-against .gold-diff {
  display:flex;
  justify-content:center;
  align-items:center;
  grid-column:3/4;
  font-weight:400;
}

.champion-profile-page .overview-matchups .best-against .xp-diff,
.champion-profile-page .overview-matchups .worst-against .xp-diff {
  display:flex;
  justify-content:center;
  align-items:center;
  grid-column:4/5;
  font-weight:400;
}

.champion-profile-page .champion-profile-error {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top:20px;
  padding:80px 0;
  font-size:16px;
}

@media(max-width:1139px) {
  .champion-profile-page .champion-profile-error {
    min-width:auto;
    width:100%;
  }
}

@media(max-width:899px) {
  .champion-profile-page .champion-profile-error {
    min-width:auto;
    width:100%;
  }
}

@media(max-width:599px) {
  .champion-profile-page .champion-profile-error {
    min-width:auto;
    width:100%;
  }
}

.champion-profile-page .champion-profile-error img {
  margin-bottom:15px;
  min-width:50px;
  max-width:200px;
}

.champion-profile-page .item-error-msg {
  display:flex;
  align-items:center;
  color:var(--font-color-grey) -alt;
}

.champion-profile-page .image-wrapper {
  position:relative;
}

.champion-profile-page .image-wrapper .no-item {
  width:30px;
  height:30px;
}

.champion-profile-page .image-wrapper .label {
  position:absolute;
  bottom:-6px;
  right:-6px;
  display:flex;
  justify-content:center;
  align-items:center;
  height:14px;
  width:14px;
  font-size:11px;
  font-weight:700;
  border-radius:50%;
  border:1px solid #191937;
  background-color:#383864;
  color:#fff;
  z-index:1;
}

.champion-profile-page .builds-page-promo {
  position:relative;
  display:flex;
  align-items:center;
  font-family:Inter;
  overflow:hidden;
  background: #191937;
}

.champion-profile-page .builds-page-promo .promo-background {
  height:100%;
  -o-object-fit:cover;
  object-fit:cover;
}

.champion-profile-page .builds-page-promo .holder {
  position:absolute;
  display:flex;
  flex-direction:column;
  left:0;
  top:0;
  bottom:0;
  margin-left:18px;
  z-index:2;
}

.champion-profile-page .builds-page-promo .holder .promo-header {
  display:flex;
  align-items:center;
  font-size:19px;
  font-weight:600;
  line-height:20px;
}

.champion-profile-page .builds-page-promo .holder .text-box {
  display:flex;
  flex-direction:column;
  margin-top:18px;
  margin-bottom:20px;
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:24px;
  line-height:32px;
  color:#fff;
}

.champion-profile-page .builds-page-promo .holder .link-button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:-moz-max-content;
  width:max-content;
  margin-top:auto;
  padding:10px 8px 10px 12px;
  border-radius:3px;
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:13px;
  line-height:16px;
  color:#fff;
}

.champion-profile-page .builds-page-promo .holder .link-button .arrow-holder {
  height:16px;
  width:16px;
  margin-left:6px;
}

.champion-profile-page .builds-page-promo .holder .link-button:hover {
  cursor:pointer;
}

.champion-profile-page .builds-page-promo .overlay {
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(270deg,rgba(25,25,55,0),#191937);
  z-index:1;
}

.search-list {
  position:absolute;
  z-index:100;
  top:31px !important;
  width:100%;
  overflow:scroll;
  background-color:#fff;
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 6px 20px -10px #000;
  border-bottom:1px solid #08a6ff;
}

.search-list.show {
  display:block;
}

.search-list.hide {
  display:none;
}

input.search-input:focus {
  box-shadow:none;
  outline:none;
}

.counters-placeholder,
.live-game-placeholder,
.overview-matchups-placeholder,
.ranking-stats-placeholder,
.recommended-build-placeholder,
.recommended-build-placeholder .grid-block-content,
.tier-list-placeholder,
.worlds-chart-container_placeholder {
  position:relative;
  background:var(--border-color-grey);
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-iteration-count:infinite;
  animation-name:placeHolderShimmer;
  animation-timing-function:linear;
  background:linear-gradient(90deg,var(--border-color-grey) 0,var(--border-color-grey) 40%,hsla(0,0%,100%,.1) 50%,var(--border-color-grey) 60%,var(--border-color-grey));
  background-repeat:repeat;
  background-size:200% 50%;
}

.live-game-placeholder {
  width:1015px;
  height:264px;
}

.profile-filters-placeholder {
  width:100%;
  height:61px;
  border-bottom:1px solid var(--border-color-grey);
}

.ranking-stats-placeholder {
  margin-top:20px;
  height:46px;
}

.recommended-build-placeholder {
  width:1014px;
  height:562px;
}

.overview-matchups-placeholder {
  height:326px;
}

.counters-placeholder {
  min-width:1014px;
}

.counters-placeholder,
.tier-list-placeholder {
  height:600px;
  width:1014px;
}

.champion-profile-page+#footer {
  max-width:1200px;
  margin:0 auto;
}

.counter-table-header {
  right:"50%";
  color:#fff !important;
  background-color:#0b0b23 !important;
  border-radius:0;
  border:1px solid var(--border-color-grey);
  transition-property:none !important;
  transform:none !important;
  animation:none !important;
}

.counter-table-header.place-top:after {
  right:"50%";
  border-top:6px solid #0b0b23 !important;
}

.champion-profile-ad {
  width:1015px;
  position:relative;
  margin-top:12px;
}

.champion-profile-ad.small {
  width:360px;
  height:auto;
  position:fixed;
  left:260px;
  bottom:-1%;
  z-index:100;
}

.champion-profile-ad.shift-left {
  left:85px;
}

.champion-profile-ad .background {
  z-index:-1;
  position:absolute;
  border:1px solid #3273fa;
}

.champion-profile-ad .content {
  height:260px;
  padding:48px;
  display:flex;
  flex-direction:column;
}

.champion-profile-ad .content .gold-text {
  color:#ff9b00;
  font-size:14px;
  font-weight:500;
  letter-spacing:1.4px;
  font-family:Helvetica Neue,Roboto,Arial;
  margin-bottom:12px;
}

.champion-profile-ad .content .desc {
  color:#fff;
  font-family:Barlow;
  font-size:28px;
  font-weight:600;
  margin-bottom:30px;
}

.champion-profile-ad.small .autosuggest-container {
  left:-30px;
}

.champion-profile-ad.small .autosuggest-container.autosuggest-material .react-autosuggest__container .react-autosuggest__input {
  padding-left:60px;
}

.champion-profile-ad.small .content .desc {
  margin-bottom:-30px;
}

.ad-tab {
  width:205px;
  height:60px;
  border-radius:8px 8px 0 0;
  background-color:#3273fa;
  position:absolute;
  font-size:18px;
  font-family:Barlow;
  font-weight:700;
  display:flex;
  justify-content:center;
  align-items:center;
  top:-60px;
  cursor:pointer;
  overflow:hidden;
}

.ad-tab.collapsed {
  top:-70px;
}

.ad-tab:after {
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  left:-100px;
  background:hsla(0,0%,100%,.13);
  background:linear-gradient(90deg,hsla(0,0%,100%,.13) 0,hsla(0,0%,100%,.13) 77%,hsla(0,0%,100%,.5) 92%,hsla(0,0%,100%,0));
}

.ad-tab.flicker:after {
  opacity:1;
  left:300px;
}

.ad-tab.flicker-back:after,
.ad-tab.flicker:after {
  transition-property:left,opacity;
  transition-duration:1.5s,1.5s;
  transition-timing-function:ease;
}

.ad-tab.flicker-back:after {
  opacity:0;
  left:-100px;
}

.leesin-bgs .region-selector-button {
  left:60px;
  border:none;
  padding:0 15px;
}

.leesin-bgs .small .region-selector-button {
  padding:0 5px;
}

.leesin-bgs .autosuggest-container .autosuggest-button .react-svg div svg {
  width:20px;
  fill:#000 !important;
}

.leesin-bgs .autosuggest-container .react-autosuggest__input {
  background-color:#fff;
  width:100%;
  height:100%;
  color:#000;
  font-size:13px;
  font-weight:500;
  padding-left:8px;
  padding-right:34px;
  border-radius:3px;
}

.leesin-bgs .autosuggest-container .region-selector-button {
  background-color:#f4f7ff !important;
}

.leesin-bgs .autosuggest-container .region-selector-button:hover {
  background-color:#8eadff;
}

.leesin-bgs .autosuggest-container .icon {
  width:24px;
  height:24px;
  cursor:pointer;
}

.no-data {
  height:500px;
  width:1016px;
  background-color:#191937;
  border-radius:3px;
  font-family:Inter;
  font-style:normal;
  font-weight:500;
  font-size:16px;
  line-height:19px;
  text-align:center;
  color:#cddcfe;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.no-data span {
  color:#fff;
}

.no-data svg {
  height:40px;
  width:40px;
}

@media(max-width:1139px) {
  .no-data {
    width:100%;
  }
}

.additional-stats {
  display:flex;
  justify-content:flex-start;
  flex-direction:column;
  flex-wrap:wrap;
  background-color:#191937;
  border-radius:6px;
  flex:1 0 300px;
  padding:18px 24px;
}

.jedi .additional-stats {
  background-color:#ebf0fd;
}

.additional-stats .header-container {
  display:flex;
  align-items:center;
}

.additional-stats .header-container .blue-bar {
  height:20px;
  width:2px;
  background:#3273fa;
  border-radius:2px;
}

.additional-stats .header-container .header {
  font-weight:700;
  font-size:14px;
  line-height:20px;
  margin-left:12px;
}

.additional-stats .main-content {
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  height:100px;
  overflow-y:auto;
  color:#bbbedb;
  margin-top:5px;
}

.additional-stats .main-content .list {
  padding:0;
  font-weight:200;
  margin:0;
  list-style-type:disc;
}

.additional-stats .main-content .list .ability {
  margin-top:4px;
  line-height:8px;
}

.additional-stats .main-content .list .ability .image {
  height:24px;
  width:24px;
  margin-right:8px;
}

.additional-stats .main-content .list .ability .title {
  padding:6px 0;
  font-size:14px;
  display:flex;
  align-content:center;
}

.additional-stats .main-content .list .ability .description {
  padding-left:12px;
  margin-bottom:12px;
}

.additional-stats .main-content .list .ability .bullets {
  line-height:20px;
  margin:4px 14px 0 0;
}

.additional-stats .main-content .list .bold-right {
  font-weight:700;
  margin-right:4px;
  color:#fff;
}

.additional-stats .main-content .list .bold-left {
  font-weight:700;
  margin-left:4px;
  color:#fff;
}

.additional-stats .main-content .list .entireChange {
  display:flex;
  align-items:center;
  padding:0;
}

.additional-stats .main-content .list .bullet {
  height:5px;
  width:5px;
  margin-right:7px;
  border-radius:50%;
  background-color:#bbbedb;
}

.additional-stats .remark {
  padding:0;
  margin:4px 0 0;
  font-weight:300;
  font-size:14px;
  line-height:20px;
  color:#5f5f7b;
}

.additional-stats .link {
  text-decoration:underline;
  color:#5f5f7b;
}

.champion-recommended-build {
  display:flex;
  flex-direction:column;
  margin-top:0;
  max-width:1014px;
  width:1014px;
}

.champion-recommended-build .spinthatshit-loader {
  margin-top:80px;
}

.champion-recommended-build .additional-stats-container {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

.champion-recommended-build .wr-matches {
  white-space:nowrap;
}

.champion-recommended-build .wr-matches .matches {
  color:#cddcfe;
  font-size:14px;
  font-weight:500;
}

.jedi .champion-recommended-build .wr-matches .matches {
  color:#5f648a;
}

@media(max-width:1359px) {
  .champion-recommended-build {
    width:100%;
    max-width:900px;
  }
}

@media(max-width:1139px) {
  .champion-recommended-build {
    min-width:auto;
    width:100%;
  }
}

.champion-recommended-build .row-marker {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#25254b;
}

.champion-recommended-build .row-marker.rec {
  border-radius:0;
}

.champion-recommended-build .row-marker.rec.rec {
  background-color:transparent;
  color:#ff9b00;
}

.champion-recommended-build .row-marker.active {
  background-color:#3273fa;
}

.champion-recommended-build .rune-spell {
  margin-top:18px;
}

.champion-recommended-build .rune-spell .build-tabs {
  display:flex;
  flex-direction:row;
  height:42px;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab {
  padding:10px 12px;
  border-radius:6px 6px 0 0;
  height:42px;
  margin-right:12px;
  display:flex;
  flex-direction:row;
  align-items:center;
  background-color:#191937;
  background:#11112a;
  color:#5f5f7b;
  font-weight:500;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab.multi-build {
  box-shadow:inset 0 2px 0 rgba(50,115,250,.5),inset 0 -2px 2px rgba(0,0,0,.2);
  border-radius:3px 3px 0 0;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab.multi-build.rec {
  box-shadow:inset 0 2px 0 rgba(255,155,0,.5),inset 0 -2px 4px rgba(0,0,0,.2);
}

.champion-recommended-build .rune-spell .build-tabs .build-tab:hover {
  cursor:pointer;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab.active {
  opacity:1;
  font-weight:700;
  color:#fff;
  background:#1f1f41;
  box-shadow:inset 0 2px 0 #3273fa;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab.active .item-image-container,
.champion-recommended-build .rune-spell .build-tabs .build-tab.active .rune-image-container {
  opacity:1;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab.active.rec {
  box-shadow:inset 0 2px 0 #ff9b00;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab .build-name {
  font-family:Inter;
  font-size:14px;
  line-height:20px;
  letter-spacing:0;
  text-align:left;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab .beta-tag {
  width:36px;
  height:17px;
  left:826px;
  top:508px;
  display:flex;
  background:#3273fa;
  border-radius:2px;
  justify-content:center;
  align-items:center;
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:10px;
  line-height:12px;
  text-align:center;
  margin-left:16px;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab .item-image-container {
  margin-left:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:1px;
  background-color:#191937;
  opacity:.5;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab .item-image-container img {
  width:20px;
  height:20px;
  border-radius:1px;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab .rune-image-container {
  margin-left:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:1px;
  background-color:#191937;
  opacity:.5;
}

.champion-recommended-build .rune-spell .build-tabs .build-tab .rune-image-container img {
  width:100%;
}

.champion-recommended-build .rune-spell .build-tabs .auto-import-button {
  display:flex;
  height:34px;
  min-height:34px;
  border-radius:3px;
  padding:8px 0;
  text-align:center;
  margin-left:auto;
}

.champion-recommended-build .rune-spell .build-tabs .auto-import-button svg {
  height:18px;
  width:18px;
}

.champion-recommended-build .rune-spell .build-tabs .tooltip {
  display:flex;
  align-items:center;
  justify-content:center;
  height:34px;
  width:34px;
  background:#191937;
  border-radius:3px;
  padding:8px 0;
  margin-left:6px;
  text-align:center;
}

@media(max-width:1139px) {
  .champion-recommended-build .rune-spell .build-tabs .tooltip {
    margin-left:auto;
  }
}

.champion-recommended-build .rune-spell .build-tabs .tooltip svg {
  height:18px;
  width:18px;
}

.champion-recommended-build .grid-1 {
  display:grid;
  grid-template-rows:min-content 1fr;
  grid-template-columns:minmax(550px,1.3fr) minmax(0,441px);
}

@media(max-width:899px) {
  .champion-recommended-build .grid-1 {
    grid-template-columns:1fr 1fr;
  }
}

.champion-recommended-build .video-guide {
  grid-row:2/3;
  grid-column:2/3;
  background-color:#191937;
}

.champion-recommended-build .recommended-build_runes {
  grid-row:1/3;
  grid-column:1/2;
  border-right:1px solid #070720;
  background:linear-gradient(226.7deg,#313160 -134.31%,#191937),#191937;
}

.champion-recommended-build .recommended-build_runes .content-section_header {
  justify-content:space-between;
}

.champion-recommended-build .recommended-build_runes .content-section_header .main-header {
  display:flex;
  flex-wrap:wrap;
  white-space:nowrap;
  line-height:20px;
}

.champion-recommended-build .recommended-build_runes .rune-trees-container-2 {
  flex:1 1;
}

@media(max-width:899px) {
  .champion-recommended-build .recommended-build_runes {
    grid-column:1/3;
    grid-row:1/2;
    border-right:none;
    border-bottom:1px solid #070720;
  }
  .champion-recommended-build .recommended-build_runes .rune-trees-container-2 {
    justify-content:space-evenly;
  }
  .champion-recommended-build .recommended-build_runes .rune-trees-container-2 .primary-tree {
    margin-right:12px;
  }
}

.champion-recommended-build .summoner-spells {
  grid-row:1/2;
  grid-column:2/3;
  border-bottom:1px solid #070720;
}

.champion-recommended-build .summoner-spells .content-section_header {
  justify-content:space-between;
}

.champion-recommended-build .summoner-spells img {
  width:36px;
  height:36px;
  border-radius:3px;
}

.champion-recommended-build .summoner-spells img:first-child {
  margin-right:12px;
}

@media(max-width:899px) {
  .champion-recommended-build .summoner-spells {
    grid-column:1/3;
    grid-row:2/3;
    border:none;
  }
}

.champion-recommended-build .otp-toughest-matchups-wrapper {
  display:grid;
  max-width:100%;
  grid-template-columns:repeat(2,49%);
  grid-gap:1%;
}

@media(max-width:899px) {
  .champion-recommended-build .otp-toughest-matchups-wrapper {
    grid-template-columns:repeat(2,100%);
  }
}

.champion-recommended-build .otp-toughest-matchups-wrapper-og {
  display:flex;
}

.champion-recommended-build .mobile-margin {
  margin-top:24px;
}

.champion-recommended-build .toughest-matchups {
  flex:1 1;
  border-radius:3px;
  overflow:hidden;
  scrollbar-width:thin;
  scroll-padding:10px;
}

.champion-recommended-build .toughest-matchups .matchups {
  display:grid;
  align-items:center;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  grid-template-columns:unset;
  grid-template-rows:unset;
  grid-gap:12px;
  -webkit-overflow-scrolling:touch;
  overflow:auto;
}

.champion-recommended-build .toughest-matchups .matchups .champion-matchup {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-width:73px;
  padding:6px 0;
  border-radius:3px;
  background-color:#11112a;
  color:#fff;
  text-align:center;
}

.champion-recommended-build .toughest-matchups .matchups .champion-matchup:hover {
  background-color:#25254b;
}

.champion-recommended-build .toughest-matchups .matchups hr {
  margin:6px 0;
  width:70%;
  border:none;
  border-top:1px solid #404064;
}

.champion-recommended-build .toughest-matchups .matchups .champion-name {
  margin-top:6px;
  max-width:70px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
}

.champion-recommended-build .toughest-matchups .matchups .champion-face {
  position:relative;
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:hidden;
}

.champion-recommended-build .toughest-matchups .matchups .champion-face>img {
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  transform:translate(-50%,-50%) scale(1.1);
}

.champion-recommended-build .toughest-matchups .matchups .matchup-stats .win-rate {
  font-size:12px;
}

.champion-recommended-build .toughest-matchups .matchups .matchup-stats .total-matches {
  color:#cddcfe;
}

.champion-recommended-build .otp-stats-container {
  margin-top:24px;
  grid-column:2/4;
}

@media(max-width:1139px) {
  .champion-recommended-build .otp-stats-container {
    grid-column:1/2;
    grid-row:3/4;
  }
}

@media(max-width:899px) {
  .champion-recommended-build .otp-stats-container {
    grid-column:1/2;
    grid-row:3/4;
  }
}

.champion-recommended-build .otp-stats-container .otp-stats {
  display:grid;
  align-items:center;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  grid-template-columns:unset;
  grid-template-rows:unset;
  grid-gap:12px;
  -webkit-overflow-scrolling:touch;
  overflow:auto;
}

.champion-recommended-build .otp-stats-container .otp-stats .no-otp-stats-message {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:48px 24px;
  height:100%;
  color:#cddcfe;
  font-size:14px;
  font-weight:500;
  line-height:20px;
  text-align:center;
}

.champion-recommended-build .otp-stats-container .otp-stats .otp {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-width:100px;
  padding:7px 0 10px;
  border-radius:3px;
  background-color:#11112a;
  color:#fff;
  text-align:center;
}

.champion-recommended-build .otp-stats-container .otp-stats .otp:hover {
  background-color:#25254b;
}

.champion-recommended-build .otp-stats-container .otp-stats hr {
  margin:8px 0;
  width:70%;
  border:none;
  border-top:1px solid #404064;
}

.champion-recommended-build .otp-stats-container .otp-stats .summoner-name {
  margin-top:6px;
  max-width:70px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  font-size:11px;
  font-weight:700;
}

.champion-recommended-build .otp-stats-container .otp-stats .summoner-icon {
  position:relative;
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:hidden;
}

.champion-recommended-build .otp-stats-container .otp-stats .summoner-icon>img {
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  transform:translate(-50%,-50%) scale(1.1);
}

.champion-recommended-build .otp-stats-container .otp-stats .tier-img {
  position:relative;
  width:17px;
  height:17px;
  overflow:hidden;
}

.champion-recommended-build .otp-stats-container .otp-stats .tier-img>img {
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  transform:translate(-50%,-50%) scale(1.1);
}

.champion-recommended-build .otp-stats-container .otp-stats .otp-detail .tier {
  font-size:12px;
  padding-top:3px;
  padding-bottom:3px;
}

.champion-recommended-build .otp-stats-container .otp-stats .otp-detail .win-rate {
  font-size:12px;
}

.champion-recommended-build .otp-stats-container .otp-stats .otp-detail .total-matches {
  color:#cddcfe;
}

.champion-recommended-build .otp-stats-container .otp-stats .otp-detail .region {
  display:inline-block;
  text-align:center;
  border-radius:1%;
  min-width:27px;
  font-size:10px;
  background-color:#414165;
  color:#fff;
}

.champion-recommended-build .recommended-build_skills {
  display:grid;
  grid-template-columns:202px 1fr;
  margin-top:12px;
}

.champion-recommended-build .recommended-build_skills .skill-priority {
  grid-column:1/2;
}

@media(max-width:1920px) {
  .champion-recommended-build .recommended-build_skills .skill-priority {
    border-right:1px solid #070720;
  }
  .jedi .champion-recommended-build .recommended-build_skills .skill-priority {
    border-color:#dbdfef;
  }
}

@media(max-width:899px) {
  .champion-recommended-build .recommended-build_skills .skill-priority {
    grid-column:1/3;
    border-right:none;
    border-bottom:1px solid #070720;
  }
  .jedi .champion-recommended-build .recommended-build_skills .skill-priority {
    border-color:#dbdfef;
  }
}

.champion-recommended-build .recommended-build_skills .skill-priority .skill-priority_content {
  width:-moz-max-content;
  width:max-content;
}

@media(max-width:599px) {
  .champion-recommended-build .recommended-build_skills .skill-priority .skill-priority_content {
    width:auto;
  }
}

.champion-recommended-build .recommended-build_skills .skill-priority .skill-priority_content .skill-priority-path {
  display:flex;
  justify-content:center;
  align-items:center;
}

.champion-recommended-build .recommended-build_skills .skill-priority .skill-priority_content .skill-priority-path img {
  width:36px;
  height:36px;
  border-radius:3px;
}

.champion-recommended-build .recommended-build_skills .skill-priority .skill-priority_content .skill-priority-path .arrow-right {
  margin:0 5px;
  width:13px;
}

.jedi .champion-recommended-build .recommended-build_skills .skill-priority .skill-priority_content .skill-priority-path .arrow-right path {
  fill:#383864;
}

.champion-recommended-build .recommended-build_skills .skill-priority .skill-priority_content .winrate {
  margin-bottom:1px;
  font-size:12px;
  font-weight:700;
}

.champion-recommended-build .recommended-build_skills .skill-priority .skill-priority_content .matches {
  font-size:10px;
  color:#cddcfe;
}

.jedi .champion-recommended-build .recommended-build_skills .skill-priority .skill-priority_content .matches {
  color:#5f648a;
}

.champion-recommended-build .recommended-build_skills .skill-path-block {
  grid-column:2/6;
}

.champion-recommended-build .recommended-build_skills .skill-path-block .content-section_header .main-header {
  flex:1 1;
}

@media(max-width:599px) {
  .champion-recommended-build .recommended-build_skills .skill-path-block {
    grid-column:1/6;
  }
}

@media(max-width:899px) {
  .champion-recommended-build .recommended-build_skills .skill-path-block {
    grid-column:1/6;
  }
}

.champion-recommended-build .recommended-build_skills .skill-path-block .skill-path-container {
  overflow:auto;
}

.champion-recommended-build .recommended-build_skills .skill-path-block .evolution-path {
  display:flex;
  align-items:center;
  border-radius:3px;
  background-color:#11112a;
}

.champion-recommended-build .recommended-build_skills .skill-path-block .evolution-path .evolution-label {
  margin:0 12px;
  color:#cddcfe;
  font-size:11px;
  font-weight:500;
}

.champion-recommended-build .recommended-build_skills .skill-path-block .evolution-path .evolution-skill {
  flex:0 0 24px;
  width:24px;
  height:24px;
  border-radius:3px;
}

.champion-recommended-build .recommended-build_skills .skill-path-block .evolution-path .arrow-right {
  margin:0 6px;
  width:10px;
}

.jedi .champion-recommended-build .recommended-build_skills .skill-path-block .evolution-path .arrow-right path {
  fill:#383864;
}

.champion-recommended-build .recommended-build_skills .skill-path-block .mobile-evolution-path {
  display:inline-flex;
  margin-bottom:12px;
}

.champion-recommended-build .recommended-build_items {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-auto-flow:column;
  margin-top:12px;
  gap:1px;
  background-color:#070720;
}

.jedi .champion-recommended-build .recommended-build_items>:not(:last-child) {
  border-color:#dbdfef;
}

@media(max-width:1359px) {
  .champion-recommended-build .recommended-build_items {
    grid-template-columns:repeat(4,1fr);
  }
}

@media(max-width:899px) {
  .champion-recommended-build .recommended-build_items {
    grid-template-columns:repeat(6,1fr);
  }
}

@media(max-width:599px) {
  .champion-recommended-build .recommended-build_items {
    grid-template-columns:none;
    grid-template-rows:repeat(5,min-content);
    grid-auto-flow:row;
  }
  .champion-recommended-build .recommended-build_items>:not(:last-child) {
    border-right:none;
    border-bottom:1px solid #070720;
  }
  .jedi .champion-recommended-build .recommended-build_items>:not(:last-child) {
    border-color:#dbdfef;
  }
}

.champion-recommended-build .recommended-build_items__arena {
  grid-template-columns:repeat(6,168px);
}

@media(max-width:1359px) {
  .champion-recommended-build .recommended-build_items__arena {
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:min-content 1fr;
    grid-auto-flow:row;
  }
  .champion-recommended-build .recommended-build_items__arena * {
    grid-row:unset !important;
    grid-column:unset !important;
  }
}

@media(max-width:599px) {
  .champion-recommended-build .recommended-build_items__arena {
    grid-template-columns:none;
    grid-template-rows:repeat(6,min-content);
  }
}

.champion-recommended-build .recommended-build_items .item-row {
  display:flex;
  justify-content:center;
  align-items:center;
}

.champion-recommended-build .recommended-build_items .item-img {
  border-radius:3px;
  width:36px;
  height:36px;
  overflow:hidden;
}

.champion-recommended-build .recommended-build_items .item-dupe {
  position:relative;
}

.champion-recommended-build .recommended-build_items .item-dupe .count-label {
  position:absolute;
  right:0;
  bottom:0;
  transform:translate(30%,30%);
  display:flex;
  justify-content:center;
  align-items:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background-color:#383864;
  font-size:11px;
  font-weight:700;
  pointer-events:none;
}

.jedi .champion-recommended-build .recommended-build_items .item-dupe .count-label {
  color:#fff;
}

.champion-recommended-build .recommended-build_items .is-mythic {
  border-radius:3px;
  background:linear-gradient(45deg,#5c463b,#fbae02);
  padding:1px;
}

.champion-recommended-build .recommended-build_items .is-mythic .item-img {
  width:48px;
  height:48px;
}

.champion-recommended-build .recommended-build_items .item-stats {
  white-space:nowrap;
}

.champion-recommended-build .recommended-build_items .item-stats .winrate {
  font-size:12px;
  font-weight:700;
}

.champion-recommended-build .recommended-build_items .item-stats .matches {
  color:#cddcfe;
  font-size:11px;
}

.jedi .champion-recommended-build .recommended-build_items .item-stats .matches {
  color:#5f648a;
}

.champion-recommended-build .recommended-build_items .consumables,
.champion-recommended-build .recommended-build_items .core-items,
.champion-recommended-build .recommended-build_items .item-options-1,
.champion-recommended-build .recommended-build_items .item-options-start {
  display:flex;
  flex-direction:column;
}

.champion-recommended-build .recommended-build_items .consumables .content-section_blurb,
.champion-recommended-build .recommended-build_items .core-items .content-section_blurb,
.champion-recommended-build .recommended-build_items .item-options-1 .content-section_blurb,
.champion-recommended-build .recommended-build_items .item-options-start .content-section_blurb {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  flex:1 1;
  white-space:nowrap;
}

@media(min-width:600px)and (max-width:899px) {
  .champion-recommended-build .recommended-build_items .item-options-start {
    grid-row:1/2;
    grid-column:1/4;
  }
}

.champion-recommended-build .recommended-build_items .starting-items .item-dupe:not(:last-child) {
  margin-right:12px;
}

.champion-recommended-build .recommended-build_items .starting-items .item-stats {
  margin-top:16px;
  text-align:center;
}

@media(min-width:600px)and (max-width:899px) {
  .champion-recommended-build .recommended-build_items .core-items {
    grid-row:1/2;
    grid-column:4/7;
    border-right:none;
  }
}

.champion-recommended-build .recommended-build_items .core-items.mythic-border-container {
  position:relative;
}

.champion-recommended-build .recommended-build_items .core-items.mythic-border-container>* {
  z-index:1;
}

.champion-recommended-build .recommended-build_items .core-items.mythic-border-container:before {
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:-1px;
  right:-1px;
  background:linear-gradient(45deg,#5c463b,#fbae02);
}

.jedi .champion-recommended-build .recommended-build_items .core-items.mythic-border-container:before {
  background:linear-gradient(45deg,#dbdfef,#fbae02);
}

@media(min-width:600px)and (max-width:899px) {
  .champion-recommended-build .recommended-build_items .core-items.mythic-border-container:before {
    bottom:-1px;
    right:0;
  }
}

@media(max-width:599px) {
  .champion-recommended-build .recommended-build_items .core-items.mythic-border-container:before {
    bottom:-1px;
    left:0;
    right:0;
  }
}

.champion-recommended-build .recommended-build_items .core-items.mythic-border-container:after {
  content:"";
  position:absolute;
  z-index:0;
  top:1px;
  bottom:1px;
  left:0;
  right:0;
  background-image:linear-gradient(225deg,#313160,#191937);
}

.jedi .champion-recommended-build .recommended-build_items .core-items.mythic-border-container:after {
  background-image:linear-gradient(225deg,#fbfcff,#ebf0fd);
}

@media(min-width:600px)and (max-width:899px) {
  .champion-recommended-build .recommended-build_items .core-items.mythic-border-container:after {
    bottom:0;
    right:1px;
  }
}

@media(max-width:599px) {
  .champion-recommended-build .recommended-build_items .core-items.mythic-border-container:after {
    bottom:0;
    left:1px;
    right:1px;
  }
}

.champion-recommended-build .recommended-build_items .core-items .arrow-right {
  margin:0 5px;
  width:12px;
  flex:0 0 12px;
}

.jedi .champion-recommended-build .recommended-build_items .core-items .arrow-right path {
  fill:#383864;
}

.champion-recommended-build .recommended-build_items .core-items .item-stats {
  margin-top:16px;
  text-align:center;
}

@media(min-width:600px)and (max-width:899px) {
  .champion-recommended-build .recommended-build_items .item-options {
    border-top:1px solid #070720;
  }
}

@media(max-width:599px) {
  .champion-recommended-build .recommended-build_items .item-options .item-option-list {
    display:flex;
    justify-content:center;
  }
  .champion-recommended-build .recommended-build_items .item-options .item-option-list .item-option {
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:0 0 85px;
    margin:0;
  }
  .champion-recommended-build .recommended-build_items .item-options .item-option-list .item-option:not(:last-child) {
    margin-right:12px;
  }
  .champion-recommended-build .recommended-build_items .item-options .item-option-list .item-option .item-stats {
    margin-left:0;
    margin-top:16px;
    text-align:center;
  }
}

@media(min-width:600px)and (max-width:899px) {
  .champion-recommended-build .recommended-build_items .item-options.item-options-1 {
    grid-row:2/3;
    grid-column:1/3;
  }
  .champion-recommended-build .recommended-build_items .item-options.item-options-2 {
    grid-row:2/3;
    grid-column:3/5;
  }
  .champion-recommended-build .recommended-build_items .item-options.item-options-3 {
    grid-row:2/3;
    grid-column:5/7;
  }
}

.champion-recommended-build .recommended-build_items .item-options .item-option {
  display:flex;
  align-items:center;
  margin-right:12px;
  margin-bottom:12px;
}

.champion-recommended-build .recommended-build_items .item-options .item-option:last-child {
  margin-right:0;
  margin-bottom:0;
}

.champion-recommended-build .recommended-build_items .item-options .item-option .item-stats {
  margin-left:12px;
}
.loader03 {
  border-radius:50%;
  animation:loader-rotate 1s linear infinite;
}

#__next {
  height:100vh;
  min-height:100vh;
}

@media(min-width:400px) {
  .media-query_MOBILE_SMALL {
    display:none !important;
    margin:0 !important;
  }
}

@media(min-width:600px) {
  .media-query_MOBILE_SMALL__MOBILE_MEDIUM {
    display:none !important;
    margin:0 !important;
  }
}

@media(min-width:900px) {
  .media-query_MOBILE_SMALL__MOBILE_LARGE {
    display:none !important;
    margin:0 !important;
  }
}

@media(min-width:1140px) {
  .media-query_MOBILE_SMALL__TABLET {
    display:none !important;
    margin:0 !important;
  }
}

@media(min-width:1360px) {
  .media-query_MOBILE_SMALL__DESKTOP_SMALL {
    display:none !important;
    margin:0 !important;
  }
}

@media(min-width:1470px) {
  .media-query_MOBILE_SMALL__DESKTOP_MEDIUM {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:399px), (min-width:600px) {
  .media-query_MOBILE_MEDIUM {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:399px), (min-width:900px) {
  .media-query_MOBILE_MEDIUM__MOBILE_LARGE {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:399px), (min-width:1140px) {
  .media-query_MOBILE_MEDIUM__TABLET {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:399px), (min-width:1360px) {
  .media-query_MOBILE_MEDIUM__DESKTOP_SMALL {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:399px), (min-width:1470px) {
  .media-query_MOBILE_MEDIUM__DESKTOP_MEDIUM {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:399px) {
  .media-query_MOBILE_MEDIUM__DESKTOP_LARGE {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:599px), (min-width:900px) {
  .media-query_MOBILE_LARGE {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:599px), (min-width:1140px) {
  .media-query_MOBILE_LARGE__TABLET {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:599px), (min-width:1360px) {
  .media-query_MOBILE_LARGE__DESKTOP_SMALL {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:599px), (min-width:1470px) {
  .media-query_MOBILE_LARGE__DESKTOP_MEDIUM {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:599px) {
  .media-query_MOBILE_LARGE__DESKTOP_LARGE {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:899px), (min-width:1140px) {
  .media-query_TABLET {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:899px), (min-width:1360px) {
  .media-query_TABLET__DESKTOP_SMALL {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:899px), (min-width:1470px) {
  .media-query_TABLET__DESKTOP_MEDIUM {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:899px) {
  .media-query_TABLET__DESKTOP_LARGE {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:1139px), (min-width:1360px) {
  .media-query_DESKTOP_SMALL {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:1139px), (min-width:1470px) {
  .media-query_DESKTOP_SMALL__DESKTOP_MEDIUM {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:1139px) {
  .media-query_DESKTOP_SMALL__DESKTOP_LARGE {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:1359px), (min-width:1470px) {
  .media-query_DESKTOP_MEDIUM {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:1359px) {
  .media-query_DESKTOP_MEDIUM__DESKTOP_LARGE {
    display:none !important;
    margin:0 !important;
  }
}

@media(max-width:1469px) {
  .media-query_DESKTOP_LARGE {
    display:none !important;
    margin:0 !important;
  }
}
@media not all and (min-width:1360px) {
  .max-lg\:hidden {
    display:none;
  }
}

@media not all and (min-width:1140px) {
  .max-md\:box-border {
    box-sizing:border-box;
  }
  .max-md\:w-full {
    width:100%;
  }
  .max-md\:min-w-\[60px\] {
    min-width:60px;
  }
  .max-md\:\!pl-0 {
    padding-left:0 !important;
  }
}

@media not all and (min-width:900px) {
  .max-sm\:mt-\[12px\] {
    margin-top:12px;
  }
  .max-sm\:\!flex {
    display:flex !important;
  }
  .max-sm\:hidden {
    display:none;
  }
  .max-sm\:h-\[44px\] {
    height:44px;
  }
  .max-sm\:h-auto {
    height:auto;
  }
  .max-sm\:w-\[100\%\] {
    width:100%;
  }
  .max-sm\:flex-\[0_0_100\%\] {
    flex:0 0 100%;
  }
  .max-sm\:\!flex-col {
    flex-direction:column !important;
  }
  .max-sm\:flex-col {
    flex-direction:column;
  }
  .max-sm\:gap-\[12px\] {
    gap:12px;
  }
  .max-sm\:gap-\[22px\] {
    gap:22px;
  }
  .max-sm\:rounded-\[3px\] {
    border-radius:3px;
  }
  .max-sm\:text-\[14px\] {
    font-size:14px;
  }
}

@media(max-width:800px) {
  .max-\[800px\]\:\!w-\[70px\] {
    width:70px !important;
  }
  .max-\[800px\]\:\!w-\[80px\] {
    width:80px !important;
  }
  .max-\[800px\]\:\!min-w-\[70px\] {
    min-width:70px !important;
  }
  .max-\[800px\]\:\!min-w-\[80px\] {
    min-width:80px !important;
  }
  .max-\[800px\]\:\!flex-\[70\] {
    flex:70 !important;
  }
  .max-\[800px\]\:\!flex-\[80\] {
    flex:80 !important;
  }
  .max-\[800px\]\:\!justify-center {
    justify-content:center !important;
  }
  .max-\[800px\]\:justify-center {
    justify-content:center;
  }
  .max-\[800px\]\:gap-\[8px\] {
    gap:8px;
  }
  .max-\[800px\]\:\!pl-0 {
    padding-left:0 !important;
  }
}

@media not all and (min-width:600px) {
  .max-xs\:hidden {
    display:none;
  }
  .max-xs\:h-\[18px\] {
    height:18px;
  }
  .max-xs\:w-\[18px\] {
    width:18px;
  }
  .max-xs\:max-w-\[70px\] {
    max-width:70px;
  }
  .max-xs\:max-w-\[80px\] {
    max-width:80px;
  }
  .max-xs\:grid-cols-\[6fr_minmax\(60px\2c 1fr\)_minmax\(60px\2c 1fr\)_minmax\(60px\2c 1fr\)_minmax\(60px\2c 1fr\)\] {
    grid-template-columns:6fr minmax(60px,1fr) minmax(60px,1fr) minmax(60px,1fr) minmax(60px,1fr);
  }
  .max-xs\:flex-col {
    flex-direction:column;
  }
  .max-xs\:gap-\[4px\] {
    gap:4px;
  }
  .max-xs\:px-\[12px\] {
    padding-left:12px;
    padding-right:12px;
  }
  .max-xs\:py-\[12px\] {
    padding-top:12px;
    padding-bottom:12px;
  }
  .max-xs\:py-\[8px\] {
    padding-top:8px;
    padding-bottom:8px;
  }
  .max-xs\:pl-\[12px\] {
    padding-left:12px;
  }
  .max-xs\:text-\[12px\] {
    font-size:12px;
  }
}

@media(max-width:600px) {
  .max-\[600px\]\:\!min-w-\[40px\] {
    min-width:40px !important;
  }
  .max-\[600px\]\:\!flex-\[40\] {
    flex:40 !important;
  }
}

@media not all and (min-width:400px) {
  .max-xxs\:invisible {
    visibility:hidden;
  }
  .max-xxs\:hidden {
    display:none;
  }
  .max-xxs\:grid-cols-\[8fr_minmax\(60px\2c 1fr\)_minmax\(60px\2c 1fr\)_minmax\(60px\2c 1fr\)\] {
    grid-template-columns:8fr minmax(60px,1fr) minmax(60px,1fr) minmax(60px,1fr);
  }
  .max-xxs\:pl-\[12px\] {
    padding-left:12px;
  }
  .max-xxs\:pl-\[8px\] {
    padding-left:8px;
  }
}

@media(min-width:360px) {
  .xxxs\:h-\[24px\] {
    height:24px;
  }
  .xxxs\:h-\[30px\] {
    height:30px;
  }
  .xxxs\:w-\[24px\] {
    width:24px;
  }
  .xxxs\:w-\[30px\] {
    width:30px;
  }
  .xxxs\:w-\[40px\] {
    width:40px;
  }
  .xxxs\:min-w-\[160px\] {
    min-width:160px;
  }
  .xxxs\:min-w-\[30px\] {
    min-width:30px;
  }
  .xxxs\:min-w-\[40px\] {
    min-width:40px;
  }
  .xxxs\:min-w-\[50px\] {
    min-width:50px;
  }
  .xxxs\:min-w-\[60px\] {
    min-width:60px;
  }
  .xxxs\:min-w-\[70px\] {
    min-width:70px;
  }
  .xxxs\:min-w-\[80px\] {
    min-width:80px;
  }
  .xxxs\:min-w-\[90px\] {
    min-width:90px;
  }
  .xxxs\:max-w-\[100px\] {
    max-width:100px;
  }
  .xxxs\:max-w-\[180px\] {
    max-width:180px;
  }
  .xxxs\:max-w-\[1ch\] {
    max-width:1ch;
  }
  .xxxs\:max-w-\[30px\] {
    max-width:30px;
  }
  .xxxs\:max-w-\[40px\] {
    max-width:40px;
  }
  .xxxs\:max-w-\[50px\] {
    max-width:50px;
  }
  .xxxs\:max-w-\[60px\] {
    max-width:60px;
  }
  .xxxs\:max-w-\[70px\] {
    max-width:70px;
  }
  .xxxs\:max-w-\[90px\] {
    max-width:90px;
  }
  .xxxs\:scale-\[0\.5\] {
    --tw-scale-x:0.5;
    --tw-scale-y:0.5;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

@media not all and (min-width:900px) {
  .xxxs\:max-sm\:\!hidden {
    display:none !important;
  }
}

@media not all and (min-width:600px) {
  .xxxs\:max-xs\:invisible {
    visibility:hidden;
  }
  .xxxs\:max-xs\:\!hidden {
    display:none !important;
  }
  .xxxs\:max-xs\:hidden {
    display:none;
  }
}

@media not all and (min-width:400px) {
  .xxxs\:max-xxs\:gap-\[4px\] {
    gap:4px;
  }
}
;
}

@media(min-width:400px) {
  .xxs\:hidden {
    display:none;
  }
  .xxs\:max-w-none {
    max-width:none;
  }
}

@media(min-width:600px) {
  .xs\:hidden {
    display:none;
  }
  .xs\:w-\[50px\] {
    width:50px;
  }
  .xs\:w-\[60px\] {
    width:60px;
  }
  .xs\:min-w-\[155px\] {
    min-width:155px;
  }
  .xs\:min-w-\[175px\] {
    min-width:175px;
  }
  .xs\:min-w-\[220px\] {
    min-width:220px;
  }
  .xs\:min-w-\[40px\] {
    min-width:40px;
  }
  .xs\:min-w-\[50px\] {
    min-width:50px;
  }
  .xs\:min-w-\[70px\] {
    min-width:70px;
  }
  .xs\:min-w-\[80px\] {
    min-width:80px;
  }
  .xs\:max-w-\[180px\] {
    max-width:180px;
  }
  .xs\:max-w-\[200px\] {
    max-width:200px;
  }
  .xs\:max-w-\[50px\] {
    max-width:50px;
  }
  .xs\:max-w-\[60px\] {
    max-width:60px;
  }
  .xs\:max-w-\[90px\] {
    max-width:90px;
  }
  .xs\:flex-1 {
    flex:1 1 0%;
  }
  .xs\:scale-\[0\.625\] {
    --tw-scale-x:0.625;
    --tw-scale-y:0.625;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .xs\:\!pl-\[12px\] {
    padding-left:12px !important;
  }
  .xs\:\!pr-\[0px\] {
    padding-right:0 !important;
  }
  .xs\:\!pr-\[12px\] {
    padding-right:12px !important;
  }

@media not all and (min-width:900px) {
  .xs\:max-sm\:flex {
    display:flex;
  }
  .xs\:max-sm\:min-w-\[130px\] {
    min-width:130px;
  }
  .xs\:max-sm\:max-w-\[160px\] {
    max-width:160px;
  }
}
;
}

@media(min-width:800px) {
  .min-\[800px\]\:w-full {
    width:100%;
  }
  .min-\[800px\]\:\!justify-start {
    justify-content:flex-start !important;
  }
}

@media(min-width:900px) {
  .sm\:min-w-\[250px\] {
    min-width:250px;
  }
  .sm\:max-w-\[270px\] {
    max-width:270px;
  }
  .sm\:gap-\[30px\] {
    gap:30px;
  }
  .sm\:pl-16 {
    padding-left:4rem;
  }
  .sm\:text-\[16px\] {
    font-size:16px;
  }
}

@media(min-width:1140px) {
  .md\:z-20 {
    z-index:20;
  }
  .md\:mt-0 {
    margin-top:0;
  }
  .md\:block {
    display:block;
  }
  .md\:flex {
    display:flex;
  }
  .md\:hidden {
    display:none;
  }
  .md\:w-1\/2 {
    width:50%;
  }
  .md\:w-1\/4 {
    width:25%;
  }
  .md\:min-w-\[120px\] {
    min-width:120px;
  }
  .md\:pl-0 {
    padding-left:0;
  }
  .md\:pr-4 {
    padding-right:1rem;
  }
  .md\:pr-4\.5 {
    padding-right:1.125rem;
  }
  .md\:pt-0 {
    padding-top:0;
  }
  .ui-open\:md\:w-\[276px\][data-headlessui-state~=open],
  .ui-open\:md\:w-\[276px\][data-open=true] {
    width:276px;
  }
  .ui-not-open\:md\:flex[data-headlessui-state]:not([data-headlessui-state~=open]) {
    display:flex;
  }
  .ui-not-open\:md\:w-\[65px\][data-headlessui-state]:not([data-headlessui-state~=open]) {
    width:65px;
  }
  .ui-not-open\:md\:flex[data-open=false] {
    display:flex;
  }
  .ui-not-open\:md\:w-\[65px\][data-open=false] {
    width:65px;
  }
}

@media(min-width:1360px) {
  .lg\:pl-0 {
    padding-left:0;
  }
  .lg\:pr-6 {
    padding-right:1.5rem;
  }
}

.\[\&\>\*\:nth-child\(even\)\]\:bg-purple-400>:nth-child(2n) {
  --tw-bg-opacity:1;
  background-color:rgb(25 25 55/var(--tw-bg-opacity));
}

.\[\&\>\*\:nth-child\(odd\)\]\:bg-\[\#1D1D3E\]>:nth-child(odd) {
  --tw-bg-opacity:1;
  background-color:rgb(29 29 62/var(--tw-bg-opacity));
}

@media(min-width:360px) {
  @media not all and (min-width:600px) {
    .xxxs\:max-xs\:\[\&\>\*\]\:hidden>* {
    display:none;
  }
}
;
}

.\[\&\>\.tag-icon\]\:bg-accent-blue-400>.tag-icon {
  --tw-bg-opacity:1;
  background-color:rgb(50 115 250/var(--tw-bg-opacity));
}

.\[\&\>\.tag-icon\]\:bg-accent-green-300>.tag-icon {
  --tw-bg-opacity:1;
  background-color:rgb(24 248 235/var(--tw-bg-opacity));
}

.\[\&\>\.tag-icon\]\:bg-accent-orange-700>.tag-icon {
  --tw-bg-opacity:1;
  background-color:rgb(255 155 0/var(--tw-bg-opacity));
}

.\[\&\>\.tag-icon\]\:bg-accent-red-500>.tag-icon {
  --tw-bg-opacity:1;
  background-color:rgb(255 70 85/var(--tw-bg-opacity));
}

.\[\&\>\.tag-icon\]\:bg-accent-yellow-500>.tag-icon {
  --tw-bg-opacity:1;
  background-color:rgb(234 238 178/var(--tw-bg-opacity));
}

.\[\&\>\.tag-icon\]\:bg-lavender-50>.tag-icon {
  --tw-bg-opacity:1;
  background-color:rgb(205 220 254/var(--tw-bg-opacity));
}

.\[\&\>div\]\:absolute>div {
  position:absolute;
}

.\[\&\>div\]\:left-\[50\%\]>div {
  left:50%;
}

.\[\&\>div\]\:top-\[50\%\]>div {
  top:50%;
}

.\[\&\>div\]\:translate-x-\[-50\%\]>div {
  --tw-translate-x:-50%;
}

.\[\&\>div\]\:translate-x-\[-50\%\]>div,
.\[\&\>div\]\:translate-y-\[-50\%\]>div {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>div\]\:translate-y-\[-50\%\]>div {
  --tw-translate-y:-50%;
}

.\[\&\>div\]\:scale-\[1\.1\]>div {
  --tw-scale-x:1.1;
  --tw-scale-y:1.1;
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media(max-width:800px) {
  .max-\[800px\]\:\[\&\>div\]\:\!p-0>div {
    padding:0 !important;
  }
}

.\[\&_\.bg-cross\]\:fill-purple-400 .bg-cross {
  fill:#191937;
}

@media not all and (min-width:1140px) {
  .max-md\:\[\&_\.champion-name\]\:hidden .champion-name {
    display:none;
  }
}

@media(max-width:800px) {
  .max-\[800px\]\:\[\&_\.champion-name\]\:hidden .champion-name {
    display:none;
  }
}

@media(min-width:600px) {
  .xs\:\[\&_\.role\]\:hidden .role {
    display:none;
  }
}

.\[\&_span\]\:text-accent-gray-100 span {
  --tw-text-opacity:1;
  color:rgb(205 220 254/var(--tw-text-opacity));
}

.pointer-events-none {
  pointer-events:none;
}

.pointer-events-auto {
  pointer-events:auto;
}

.visible {
  visibility:visible;
}

.invisible {
  visibility:hidden;
}

.static {
  position:static;
}

.fixed {
  position:fixed;
}

.absolute {
  position:absolute;
}

.relative {
  position:relative;
}

.sticky {
  position:sticky;
}

.inset-0 {
  inset:0;
}

.-bottom-3 {
  bottom:-.75rem;
}

.bottom-0 {
  bottom:0;
}

.bottom-4 {
  bottom:1rem;
}

.bottom-\[-23\%\] {
  bottom:-23%;
}

.bottom-\[-4px\] {
  bottom:-4px;
}

.bottom-\[15px\] {
  bottom:15px;
}

.bottom-\[17px\] {
  bottom:17px;
}

.bottom-\[30px\] {
  bottom:30px;
}

.left-0 {
  left:0;
}

.left-\[-23\%\] {
  left:-23%;
}

.left-\[15px\] {
  left:15px;
}

.left-\[17px\] {
  left:17px;
}

.left-\[50\%\] {
  left:50%;
}

.left-\[73px\] {
  left:73px;
}

.right-0 {
  right:0;
}

.right-\[-23\%\] {
  right:-23%;
}

.right-\[3px\] {
  right:3px;
}

.top-0 {
  top:0;
}

.top-\[-23\%\] {
  top:-23%;
}

.top-\[1px\] {
  top:1px;
}

.top-\[2px\] {
  top:2px;
}

.top-\[calc\(100\%\)\] {
  top:100%;
}

.isolate {
  isolation:isolate;
}

.z-0 {
  z-index:0;
}

.z-10 {
  z-index:10;
}

.z-20 {
  z-index:20;
}

.z-40 {
  z-index:40;
}

.z-\[1000\] {
  z-index:1000;
}

.z-\[1\] {
  z-index:1;
}

.z-\[2\] {
  z-index:2;
}

.z-\[3000\] {
  z-index:3000;
}

.z-\[3\] {
  z-index:3;
}

.z-\[9999\] {
  z-index:9999;
}

.z-\[999\] {
  z-index:999;
}

.z-modal-content {
  z-index:2001;
}

.z-modal-overlay {
  z-index:2000;
}

.float-right {
  float:right;
}

.m-auto {
  margin:auto;
}

.mx-\[10px\] {
  margin-left:10px;
  margin-right:10px;
}

.mx-auto {
  margin-left:auto;
  margin-right:auto;
}

.my-4 {
  margin-top:1rem;
  margin-bottom:1rem;
}

.my-4\.5 {
  margin-top:1.125rem;
  margin-bottom:1.125rem;
}

.my-\[24px\] {
  margin-top:24px;
  margin-bottom:24px;
}

.my-\[6px\] {
  margin-top:6px;
  margin-bottom:6px;
}

.mb-1 {
  margin-bottom:.25rem;
}

.mb-2 {
  margin-bottom:.5rem;
}

.mb-4 {
  margin-bottom:1rem;
}

.mb-4\.5 {
  margin-bottom:1.125rem;
}

.mb-\[12px\] {
  margin-bottom:12px;
}

.mb-\[1px\] {
  margin-bottom:1px;
}

.mb-\[24px\] {
  margin-bottom:24px;
}

.mb-\[40px\] {
  margin-bottom:40px;
}

.ml-0 {
  margin-left:0;
}

.ml-1 {
  margin-left:.25rem;
}

.ml-1\.5 {
  margin-left:.375rem;
}

.ml-2 {
  margin-left:.5rem;
}

.ml-3 {
  margin-left:.75rem;
}

.ml-\[10px\] {
  margin-left:10px;
}

.ml-\[11px\] {
  margin-left:11px;
}

.ml-\[12px\] {
  margin-left:12px;
}

.ml-\[18px\] {
  margin-left:18px;
}

.ml-\[2px\] {
  margin-left:2px;
}

.ml-\[4px\] {
  margin-left:4px;
}

.ml-\[5px\] {
  margin-left:5px;
}

.ml-\[6px\] {
  margin-left:6px;
}

.ml-\[73px\] {
  margin-left:73px;
}

.ml-\[7px\] {
  margin-left:7px;
}

.ml-\[8px\] {
  margin-left:8px;
}

.ml-auto {
  margin-left:auto;
}

.mr-1 {
  margin-right:.25rem;
}

.mr-2 {
  margin-right:.5rem;
}

.mr-3 {
  margin-right:.75rem;
}

.mr-4 {
  margin-right:1rem;
}

.mr-4\.5 {
  margin-right:1.125rem;
}

.mr-\[10px\] {
  margin-right:10px;
}

.mr-\[12px\] {
  margin-right:12px;
}

.mr-\[25px\] {
  margin-right:25px;
}

.mr-\[8px\] {
  margin-right:8px;
}

.mt-0 {
  margin-top:0;
}

.mt-2 {
  margin-top:.5rem;
}

.mt-3 {
  margin-top:.75rem;
}

.mt-4 {
  margin-top:1rem;
}

.mt-4\.5 {
  margin-top:1.125rem;
}

.mt-6 {
  margin-top:1.5rem;
}

.mt-\[0\.125rem\] {
  margin-top:.125rem;
}

.mt-\[0px\] {
  margin-top:0;
}

.mt-\[10px\] {
  margin-top:10px;
}

.mt-\[12px\] {
  margin-top:12px;
}

.mt-\[18px\] {
  margin-top:18px;
}

.mt-\[4px\] {
  margin-top:4px;
}

.mt-\[50px\] {
  margin-top:50px;
}

.mt-\[6px\] {
  margin-top:6px;
}

.mt-auto {
  margin-top:auto;
}

.box-border {
  box-sizing:border-box;
}

.box-content {
  box-sizing:content-box;
}

.block {
  display:block;
}

.inline-block {
  display:inline-block;
}

.inline-flex {
  display:inline-flex;
}

.table {
  display:table;
}

.table-row {
  display:table-row;
}

.grid {
  display:grid;
}

.contents {
  display:contents;
}

.\!hidden {
  display:none !important;
}

.hidden {
  display:none;
}

.aspect-square {
  aspect-ratio:1/1;
}

.h-1 {
  height:.25rem;
}

.h-1\.5 {
  height:.375rem;
}

.h-11 {
  height:2.75rem;
}

.h-20 {
  height:5rem;
}

.h-4 {
  height:1rem;
}

.h-4\.5 {
  height:1.125rem;
}

.h-40 {
  height:10rem;
}

.h-5 {
  height:1.25rem;
}

.h-6 {
  height:1.5rem;
}

.h-8 {
  height:2rem;
}

.h-9 {
  height:2.25rem;
}

.h-\[10\.5rem\] {
  height:10.5rem;
}

.h-\[100\%\] {
  height:100%;
}

.h-\[10px\] {
  height:10px;
}

.h-\[11\.5rem\] {
  height:11.5rem;
}

.h-\[113px\] {
  height:113px;
}

.h-\[12px\] {
  height:12px;
}

.h-\[144px\] {
  height:144px;
}

.h-\[14px\] {
  height:14px;
}

.h-\[15px\] {
  height:15px;
}

.h-\[2000px\] {
  height:2000px;
}

.h-\[200px\] {
  height:200px;
}

.h-\[20px\] {
  height:20px;
}

.h-\[230px\] {
  height:230px;
}

.h-\[24px\] {
  height:24px;
}

.h-\[25px\] {
  height:25px;
}

.h-\[26px\] {
  height:26px;
}

.h-\[30px\] {
  height:30px;
}

.h-\[31px\] {
  height:31px;
}

.h-\[35px\] {
  height:35px;
}

.h-\[36px\] {
  height:36px;
}

.h-\[44px\] {
  height:44px;
}

.h-\[46\%\] {
  height:46%;
}

.h-\[56px\] {
  height:56px;
}

.h-\[64px\] {
  height:64px;
}

.h-\[65px\] {
  height:65px;
}

.h-\[6px\] {
  height:6px;
}

.h-auto {
  height:auto;
}

.h-fit {
  height:-moz-fit-content;
  height:fit-content;
}

.h-full {
  height:100%;
}

.h-screen {
  height:100vh;
}

.max-h-\[262px\] {
  max-height:262px;
}

.max-h-\[300px\] {
  max-height:300px;
}

.min-h-\[31px\] {
  min-height:31px;
}

.min-h-\[65px\] {
  min-height:65px;
}

.min-h-full {
  min-height:100%;
}

.min-h-screen {
  min-height:100vh;
}

.w-0 {
  width:0;
}

.w-1 {
  width:.25rem;
}

.w-1\.5 {
  width:.375rem;
}

.w-1\/2 {
  width:50%;
}

.w-10 {
  width:2.5rem;
}

.w-20 {
  width:5rem;
}

.w-32 {
  width:8rem;
}

.w-4 {
  width:1rem;
}

.w-4\.5 {
  width:1.125rem;
}

.w-6 {
  width:1.5rem;
}

.w-60 {
  width:15rem;
}

.w-7 {
  width:1.75rem;
}

.w-8 {
  width:2rem;
}

.w-\[100\%\] {
  width:100%;
}

.w-\[100px\] {
  width:100px;
}

.w-\[1016px\] {
  width:1016px;
}

.w-\[10px\] {
  width:10px;
}

.w-\[120px\] {
  width:120px;
}

.w-\[12px\] {
  width:12px;
}

.w-\[13px\] {
  width:13px;
}

.w-\[14px\] {
  width:14px;
}

.w-\[16px\] {
  width:16px;
}

.w-\[170px\] {
  width:170px;
}

.w-\[17px\] {
  width:17px;
}

.w-\[18px\] {
  width:18px;
}

.w-\[1px\] {
  width:1px;
}

.w-\[2000px\] {
  width:2000px;
}

.w-\[200px\] {
  width:200px;
}

.w-\[20px\] {
  width:20px;
}

.w-\[24px\] {
  width:24px;
}

.w-\[250px\] {
  width:250px;
}

.w-\[26px\] {
  width:26px;
}

.w-\[284px\] {
  width:284px;
}

.w-\[28px\] {
  width:28px;
}

.w-\[2px\] {
  width:2px;
}

.w-\[300px\] {
  width:300px;
}

.w-\[30px\] {
  width:30px;
}

.w-\[336px\] {
  width:336px;
}

.w-\[41px\] {
  width:41px;
}

.w-\[450px\] {
  width:450px;
}

.w-\[46\%\] {
  width:46%;
}

.w-\[50px\] {
  width:50px;
}

.w-\[600px\] {
  width:600px;
}

.w-\[64\] {
  width:64;
}

.w-\[65px\] {
  width:65px;
}

.w-\[6px\] {
  width:6px;
}

.w-\[7\.5rem\] {
  width:7.5rem;
}

.w-\[7\.5rrem\] {
  width:7.5rrem;
}

.w-\[7\.625rem\] {
  width:7.625rem;
}

.w-\[77px\] {
  width:77px;
}

.w-\[84px\] {
  width:84px;
}

.w-auto {
  width:auto;
}

.w-fit {
  width:-moz-fit-content;
  width:fit-content;
}

.w-full {
  width:100%;
}

.w-max {
  width:-moz-max-content;
  width:max-content;
}

.min-w-\[135px\] {
  min-width:135px;
}

.min-w-\[150px\] {
  min-width:150px;
}

.min-w-\[200px\] {
  min-width:200px;
}

.min-w-\[26px\] {
  min-width:26px;
}

.min-w-\[400px\] {
  min-width:400px;
}

.min-w-\[65px\] {
  min-width:65px;
}

.min-w-\[70px\] {
  min-width:70px;
}

.min-w-\[900px\] {
  min-width:900px;
}

.min-w-fit {
  min-width:-moz-fit-content;
  min-width:fit-content;
}

.max-w-\[150px\] {
  max-width:150px;
}

.max-w-\[180px\] {
  max-width:180px;
}

.max-w-\[400px\] {
  max-width:400px;
}

.max-w-\[408px\] {
  max-width:408px;
}

.max-w-\[472px\] {
  max-width:472px;
}

.max-w-\[600px\] {
  max-width:600px;
}

.max-w-\[90px\] {
  max-width:90px;
}

.max-w-\[inherit\] {
  max-width:inherit;
}

.max-w-none {
  max-width:none;
}

.flex-1 {
  flex:1 1 0%;
}

.flex-\[1_1\] {
  flex:1 1;
}

.flex-\[41px\] {
  flex:41px;
}

.flex-auto {
  flex:1 1 auto;
}

.flex-none {
  flex:none;
}

.flex-shrink {
  flex-shrink:1;
}

.flex-shrink-0 {
  flex-shrink:0;
}

.shrink {
  flex-shrink:1;
}

.shrink-0 {
  flex-shrink:0;
}

.flex-grow {
  flex-grow:1;
}

.flex-grow-0 {
  flex-grow:0;
}

.grow {
  flex-grow:1;
}

.basis-\[80px\] {
  flex-basis:80px;
}

.basis-full {
  flex-basis:100%;
}

.translate-x-\[-50\%\] {
  --tw-translate-x:-50%;
}

.translate-x-\[-50\%\],
.translate-y-\[50\%\] {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[50\%\] {
  --tw-translate-y:50%;
}

.rotate-180 {
  --tw-rotate:180deg;
}

.rotate-180,
.rotate-\[-90deg\] {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[-90deg\] {
  --tw-rotate:-90deg;
}

.scale-\[1\.1\] {
  --tw-scale-x:1.1;
  --tw-scale-y:1.1;
}

.scale-\[1\.1\],
.scale-y-\[-1\] {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-y-\[-1\] {
  --tw-scale-y:-1;
}

.transform {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.animate-spin {
  animation:spin 1s linear infinite;
}

.cursor-pointer {
  cursor:pointer;
}

.select-none {
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}

.resize-none {
  resize:none;
}

.resize {
  resize:both;
}

.grid-cols-8 {
  grid-template-columns:repeat(8,minmax(0,1fr));
}

.grid-cols-\[5fr_minmax\(60px\2c 1fr\)_minmax\(60px\2c 1fr\)_minmax\(60px\2c 1fr\)_minmax\(60px\2c 1fr\)_minmax\(60px\2c 1fr\)\] {
  grid-template-columns:5fr minmax(60px,1fr) minmax(60px,1fr) minmax(60px,1fr) minmax(60px,1fr) minmax(60px,1fr);
}

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

.flex-col {
  flex-direction:column;
}

.flex-wrap {
  flex-wrap:wrap;
}

.flex-nowrap {
  flex-wrap:nowrap;
}

.content-center {
  align-content:center;
}

.items-center {
  align-items:center;
}

.justify-start {
  justify-content:flex-start;
}

.justify-end {
  justify-content:flex-end;
}

.justify-center {
  justify-content:center;
}

.justify-between {
  justify-content:space-between;
}

.justify-around {
  justify-content:space-around;
}

.justify-stretch {
  justify-content:stretch;
}

.gap-0 {
  gap:0;
}

.gap-1 {
  gap:.25rem;
}

.gap-2 {
  gap:.5rem;
}

.gap-3 {
  gap:.75rem;
}

.gap-4 {
  gap:1rem;
}

.gap-4\.5 {
  gap:1.125rem;
}

.gap-\[12px\] {
  gap:12px;
}

.gap-\[16px\] {
  gap:16px;
}

.gap-\[18px\] {
  gap:18px;
}

.gap-\[1px\] {
  gap:1px;
}

.gap-\[2px\] {
  gap:2px;
}

.gap-\[6px\] {
  gap:6px;
}
._filter-manager {
  position:sticky;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin:24px 0;
  height:36px;
  background-color:var(--background-main);
  box-sizing:content-box;
}

@media(max-width:399px) {
  ._filter-manager {
    height:127px;
  }
}

@media(max-width:599px) {
  ._filter-manager {
    height:127px;
  }
}

@media(max-width:899px) {
  ._filter-manager {
    height:-moz-fit-content;
    height:fit-content;
  }
}

._filter-manager .filter-width-wrapper {
  display:flex;
  align-items:center;
  margin-right:auto !important;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:899px) {
  ._filter-manager .filter-width-wrapper {
    position:relative;
    left:-12px;
    right:-12px;
  }
}

@media(max-width:599px) {
  ._filter-manager .filter-width-wrapper {
    position:relative;
    left:-8px;
    right:-8px;
    margin-top:12px;
    padding-bottom:12px;
  }
}

@media(max-width:399px) {
  ._filter-manager .filter-width-wrapper {
    position:relative;
  }
}

._filter-manager .filter-manager_label {
  display:flex;
  align-items:center;
  margin-right:24px;
  font-size:14px;
  font-weight:700;
}

@media(max-width:899px) {
  ._filter-manager .filter-manager_label {
    margin-right:12px;
  }
}

._filter-manager .filter-manager_label svg {
  width:24px;
  margin-right:-3px;
}

._filter-manager .filter-manager_label span {
  margin-left:10px;
}

._filter-manager .filter-manager_container {
  position:relative;
  display:flex;
  align-items:center;
  flex:1 1;
  flex-wrap:wrap;
  align-content:space-between;
  height:-moz-fit-content;
  height:fit-content;
  row-gap:10px;
}

@media(max-width:899px) {
  ._filter-manager .filter-manager_container {
    padding-left:12px;
    padding-right:12px;
    height:-moz-fit-content;
    height:fit-content;
  }
}

@media(max-width:599px) {
  ._filter-manager .filter-manager_container {
    padding-left:8px;
    padding-right:8px;
    height:-moz-fit-content;
    height:fit-content;
  }
}

@media(max-width:399px) {
  ._filter-manager .filter-manager_container {
    height:-moz-fit-content;
    height:fit-content;
  }
}

._filter-manager .filter-manager_container>:not(:last-child):not(.filter-manager_label) {
  margin-right:12px;
}

@media(max-width:1359px) {
  ._filter-manager .filter-manager_container .filter-select {
    min-width:0 !important;
    width:auto !important;
  }
}

._filter-manager .filter-manager_container .filter-manager_side-text {
  color:#cddcfe;
  font-size:14px;
  font-weight:500;
}

._filter-manager .filter-manager_container .filter-manager_side-text strong {
  color:#fff;
  font-weight:700;
}

._filter-manager .filter-manager_container .filter-tooltip-wrapper {
  position:relative;
}

._filter-manager .filter-manager_container .filter-tooltip-wrapper .clear-selected-option {
  position:absolute;
  top:50%;
  right:15px;
  width:15px;
  height:15px;
  border-radius:50%;
  background-color:#fff;
  transform:translateY(-50%);
  cursor:pointer;
}

._filter-manager .filter-manager_container .filter-tooltip-wrapper .clear-selected-option>img {
  width:100%;
}

._filter-manager .filter-manager_container .more-filters {
  display:flex;
  align-items:center;
}

._filter-manager .filter-manager_container .more-filters>:not(:first-child) {
  margin-left:12px;
}

.filter-collapse {
  display:flex;
  align-items:center;
  position:relative;
  padding:0 12px;
  height:36px;
  border-radius:3px;
  background-color:var(--filter-color);
  font-size:14px;
  font-weight:700;
}

.filter-collapse svg {
  margin-right:6px;
  width:12px;
}

.filter-collapse:hover {
  background-color:var(--filter-option-selected);
  cursor:pointer;
}

.reset-filters {
  font-size:14px;
}

.reset-filters:hover {
  font-weight:700;
  color:#3273fa;
  cursor:pointer;
}

.filter-select {
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  height:36px;
  border-radius:3px;
  background-color:#191937;
}

.jedi .filter-select {
  background-color:transparent;
}

.filter-select:hover {
  background-color:var(--filter-option-selected);
}

.jedi .filter-select:hover {
  background-color:transparent;
}

.filter-select.active {
  background-color:var(--filter-option-selected);
  color:var(--filter-not-default-font-color);
}

.filter-select .default-select__control .default-select__value-container {
  display:flex;
  justify-content:center;
  align-items:center;
}

.filter-select .default-select__control .default-select__value-container span {
  font-size:14px;
}

._filter-manager .filter-select .default-select__control .default-select__indicators {
  display:none;
}

.filter-select .custom-indicator {
  margin-left:6px;
  width:7px;
}

.filter-select .custom-indicator path {
  fill:#fff;
}

.filter-select .custom-indicator_search {
  width:18px;
  height:18px;
  opacity:.6;
}

.filter-select .custom-indicator_search path {
  fill:#fff;
}

.filter-select.filter-select_highlight-error .Select-control {
  border-color:#ff4e50 !important;
}

.filter-select.queue-type {
  font-size:14px;
}

.filter-select.filter-select_show-all {
  padding:0 12px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}

.filter-select.filter-select_victory-only {
  min-width:100px !important;
  width:100px !important;
}

.filter-select.filter-select_league-series {
  min-width:130px;
  width:130px;
}

.filter-select.filter-select_compare-league-series .default-select__single-value {
  padding-right:25px;
}

.filter-select.is-disabled {
  cursor:not-allowed;
}

.filter-select.is-disabled .Select-control {
  filter:grayscale(1);
}

.filter-select.is-focused .Select-control,
.filter-select.is-open .Select-control,
.filter-select .Select-control {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  border-radius:3px;
  background-color:var(--filter-color);
}

.filter-select.is-focused .Select-control .Select-multi-value-wrapper,
.filter-select.is-open .Select-control .Select-multi-value-wrapper,
.filter-select .Select-control .Select-multi-value-wrapper {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.filter-select.is-focused .Select-control .Select-multi-value-wrapper .Select-input,
.filter-select.is-open .Select-control .Select-multi-value-wrapper .Select-input,
.filter-select .Select-control .Select-multi-value-wrapper .Select-input {
  background-color:transparent;
}

.filter-select.is-focused .Select-control .Select-multi-value-wrapper .Select-value,
.filter-select.is-open .Select-control .Select-multi-value-wrapper .Select-value,
.filter-select .Select-control .Select-multi-value-wrapper .Select-value {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  padding:0 12px;
  color:var(--font-color-main);
  font-size:13px;
  font-weight:700;
}

.filter-select.is-focused .Select-control .Select-multi-value-wrapper .Select-value.duo-role-value img,
.filter-select.is-open .Select-control .Select-multi-value-wrapper .Select-value.duo-role-value img,
.filter-select .Select-control .Select-multi-value-wrapper .Select-value.duo-role-value img {
  width:15px;
}

.filter-select.is-focused .Select-control .Select-multi-value-wrapper .Select-value.duo-role-value .forward-slash,
.filter-select.is-open .Select-control .Select-multi-value-wrapper .Select-value.duo-role-value .forward-slash,
.filter-select .Select-control .Select-multi-value-wrapper .Select-value.duo-role-value .forward-slash {
  margin:0 10px;
  opacity:.25;
  color:var(--forward-slash);
  font-size:20px;
  font-weight:400;
}

.filter-select.is-focused .Select-control .Select-multi-value-wrapper .Select-value>.Select-value-label,
.filter-select.is-open .Select-control .Select-multi-value-wrapper .Select-value>.Select-value-label,
.filter-select .Select-control .Select-multi-value-wrapper .Select-value>.Select-value-label {
  color:var(--font-color-main);
  font-size:13px;
  font-weight:700;
}

.filter-select.is-focused .Select-control .Select-arrow-zone,
.filter-select.is-open .Select-control .Select-arrow-zone,
.filter-select .Select-control .Select-arrow-zone {
  display:none;
}

.filter-select.filter_not-default .default-select__control {
  background-color:var(--filter-option-selected) !important;
}

.filter-select.filter_not-default .default-select__control .default-select__value-container .default-select__single-value {
  color:var(--filter-not-default-font-color);
}

.filter-select.filter_not-default .default-select__control .default-select__value-container .default-select__single-value .player-type-value svg:not(.flag-img) g,
.filter-select.filter_not-default .default-select__control .default-select__value-container .default-select__single-value .player-type-value svg:not(.flag-img) path,
.filter-select.filter_not-default .default-select__control .default-select__value-container .default-select__single-value .region-option svg:not(.flag-img) g,
.filter-select.filter_not-default .default-select__control .default-select__value-container .default-select__single-value .region-option svg:not(.flag-img) path {
  fill:#fff;
}

.filter-select:not(.is-disabled).is-focused .Select-control:hover,
.filter-select:not(.is-disabled).is-open .Select-control:hover,
.filter-select:not(.is-disabled) .Select-control:hover {
  background-color:var(--filter-option-selected);
  cursor:pointer;
}

.filter-select .Select-menu-outer {
  position:absolute;
  top:calc(100% + 5px);
  left:0;
  right:0;
  border-radius:3px;
  border:none;
  background-color:transparent;
  box-shadow:0 1px 10px rgba(0,0,0,.6);
  overflow:hidden;
  z-index:9999999;
}

.filter-select .Select-menu-outer>.Select-menu {
  max-height:none;
}

.filter-select .Select-menu-outer>.Select-menu>.Select-option {
  display:flex;
  align-items:center;
  height:36px;
  padding:0 12px;
  background-color:var(--filter-color);
  color:var(--font-color-main);
  font-size:12px;
}

.filter-select .Select-menu-outer>.Select-menu>.Select-option:not(:last-child) {
  border-bottom:1px solid var(--border-color-grey);
}

.filter-select .Select-menu-outer>.Select-menu>.Select-option:hover {
  cursor:pointer;
}

.filter-select .Select-menu-outer>.Select-menu>.Select-option.is-focused,
.filter-select .Select-menu-outer>.Select-menu>.Select-option.is-selected {
  background-color:var(--filter-option-selected);
  color:var(--font-color-main);
  font-weight:700;
}

.filter-select .Select-menu-outer>.Select-menu>.Select-option.role-option {
  display:flex;
  justify-content:space-between;
  align-content:center;
}

.filter-select .Select-menu-outer>.Select-menu>.Select-option.role-option img {
  width:15px;
}

.filter-select .Select-menu-outer>.Select-menu>.Select-option.role-option:hover {
  background-color:var(--filter-option-selected);
  color:var(--font-color-main);
  font-weight:700;
}

.filter-select_mobile {
  display:flex;
  align-items:center;
  color:#cddcfe;
  font-size:12px;
  font-weight:500;
}

.jedi .filter-select_mobile {
  color:#5f648a;
}

.filter-select_mobile .dropdown-indicator {
  margin-left:4px;
  width:7px;
}

.filter-select_mobile .dropdown-indicator path {
  fill:#cddcfe;
}

.jedi .filter-select_mobile .dropdown-indicator path {
  fill:#5f648a;
}

.filter-select_champion {
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  min-width:72px;
  max-width:200px;
  background-color:#191937;
  font-size:14px;
}

.filter-select_champion:hover {
  background-color:#313160;
  cursor:pointer;
}

.filter-select_champion .champion-control {
  display:flex;
  justify-content:center;
  align-items:center;
  flex:1 1;
  padding:0 12px;
  height:100%;
  white-space:nowrap;
}

.filter-select_champion .champion-control span.vs {
  margin-right:6px;
}

.filter-select_champion .champion-control .champion-label input {
  width:100%;
  background-color:transparent;
  outline:none;
  border:none;
  color:#fff;
}

.filter-select_champion .champion-control .champion-label input::-moz-placeholder {
  color:#bec3e1;
}

.filter-select_champion .champion-control .champion-label input::placeholder {
  color:#bec3e1;
}

.filter-select_champion .champion-control .champion-label .champion {
  display:flex;
  align-items:center;
}

.filter-select_champion .champion-control .champion-label .champion .champion-image {
  position:relative;
  margin-right:6px;
  width:24px;
  height:24px;
  border-radius:50%;
  overflow:hidden;
}

.filter-select_champion .champion-control .champion-label .champion .champion-image img {
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  transform:scale(1.1) translate(-45%,-45%);
}

.filter-select_champion .champion-control .clear-champion {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-left:12px;
  padding:4px;
  background-color:#77779f;
  border-radius:50%;
}

.filter-select_champion .champion-control .clear-champion:hover {
  opacity:.8;
}

.filter-select_champion .champion-control .clear-champion svg {
  width:8px;
  fill:#fff;
}

.filter-select_champion .champion-menu {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:100%;
  max-height:500px;
  background-color:#191937;
  border-radius:3px;
  overflow:auto;
  z-index:1;
}

.filter-select_champion .champion-menu .champion-menu_item {
  display:flex;
  align-items:center;
  padding:8px 12px;
}

.filter-select_champion .champion-menu .champion-menu_item.highlighted {
  background-color:#313160;
}

.filter-select_champion .champion-menu .champion-menu_item img {
  margin-right:12px;
  width:26px;
  height:26px;
}

.multi-filter {
  position:relative;
}

.multi-filter .multi-filter-tag {
  display:flex;
  align-items:center;
  font-weight:400;
  background-color:#070720;
  padding:2px 6px;
  border-radius:6px;
  flex-shrink:0;
}

.jedi .multi-filter .multi-filter-tag {
  background-color:#cddcfe;
}

.multi-filter .multi-filter-tag:not(:last-child) {
  margin-right:6px;
}

.multi-filter .multi-filter-tag .x-icon {
  width:9px;
  height:9px;
  opacity:.6;
  flex-shrink:0;
  margin-left:6px;
  cursor:pointer;
}

.multi-filter .multi-filter-tag .x-icon path {
  fill:#fff;
}

.jedi .multi-filter .multi-filter-tag .x-icon path {
  fill:#383864;
}

.multi-filter .multi-filter-tag .x-icon:hover {
  opacity:1;
}

.multi-filter .multi-filter-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 12px;
  font-size:14px;
  background-color:var(--filter-color);
  border:none;
  border-radius:6px;
  color:#cddcfe;
  cursor:pointer;
}

.jedi .multi-filter .multi-filter-label {
  background-color:#ebf0fd;
  color:#5f648a;
}

.multi-filter .multi-filter-label:hover {
  background-color:var(--filter-option-selected);
}

.jedi .multi-filter .multi-filter-label:hover {
  background-color:#e0e4f2;
}

.multi-filter .multi-filter-label .multi-filter-label-tags {
  display:flex;
  align-items:center;
}

.multi-filter .multi-filter-label input {
  background:0 0;
  border:none;
  outline:none;
  color:inherit;
  font-size:inherit;
  font-weight:500;
  min-width:0;
  padding:4px 0;
  flex-grow:1;
  width:225px;
}

.multi-filter .multi-filter-label input::-moz-placeholder {
  color:inherit;
  font-weight:400;
}

.multi-filter .multi-filter-label input::placeholder {
  color:inherit;
  font-weight:400;
}

.multi-filter .multi-filter-label .search-icon {
  width:18px;
  height:18px;
  opacity:.6;
  flex-shrink:0;
  margin-left:10px;
}

.multi-filter .multi-filter-label .search-icon path {
  fill:#fff;
}

.jedi .multi-filter .multi-filter-label .search-icon path {
  fill:#5f648a;
}

.multi-filter .multi-filter-menu {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:100%;
  max-height:550px;
  background-color:#191937;
  border-radius:3px;
  overflow:auto;
  z-index:1;
  color:#cddcfe;
}

.jedi .multi-filter .multi-filter-menu {
  background-color:#fbfcff;
  color:#5f648a;
}

.jedi .multi-filter .multi-filter-menu:has(*) {
  border:1px solid #dbdfef;
}

.multi-filter .multi-filter-menu .multi-filter-menu-tags {
  display:flex;
  align-items:center;
  padding:8px 12px;
}

.multi-filter .multi-filter-menu .multi-filter-menu-title {
  font-size:10px;
  padding:8px 12px;
  line-height:13.5px;
}

.multi-filter .multi-filter-menu .multi-filter-menu-title.divider {
  border-top:1px solid #070720;
}

.jedi .multi-filter .multi-filter-menu .multi-filter-menu-title.divider {
  border-color:#dbdfef;
}

.multi-filter .multi-filter-menu .multi-filter-menu-item {
  display:flex;
  align-items:center;
  padding:8px 12px;
  cursor:pointer;
  font-weight:500;
}

.multi-filter .multi-filter-menu .multi-filter-menu-item.highlighted {
  background-color:#313160;
}

.jedi .multi-filter .multi-filter-menu .multi-filter-menu-item.highlighted {
  background-color:#ebf0fd;
}

.multi-filter .multi-filter-menu .multi-filter-menu-item img {
  margin-right:12px;
  width:26px;
  height:26px;
}

.multi-filter .multi-filter-menu .multi-filter-menu-item span {
  color:#5f5f7b;
  font-weight:400;
}

.multi-filter-champion {
  position:relative;
}

.multi-filter-champion .multi-filter-tag {
  background-color:#313160;
  padding:2px 6px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.jedi .multi-filter-champion .multi-filter-tag {
  background-color:#cddcfe;
}

.multi-filter-champion .multi-filter-tag:not(:last-child) {
  margin-right:6px;
}

.multi-filter-champion .multi-filter-tag .x-icon {
  width:24px;
  height:24px;
  flex-shrink:0;
  position:relative;
  margin-left:auto;
  cursor:pointer;
  margin-right:-13px;
}

.multi-filter-champion .multi-filter-tag .x-icon path {
  fill:#626696;
}

.jedi .multi-filter-champion .multi-filter-tag .x-icon path {
  fill:#383864;
}

.multi-filter-champion .multi-filter-tag .x-icon:hover path {
  fill:#fff;
}

.multi-filter-champion .multi-filter-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 12px;
  font-size:14px;
  background-color:#313160;
  border:none;
  border-radius:3px;
  color:#cddcfe;
  cursor:pointer;
}

.multi-filter-champion .multi-filter-label.no-champ {
  background-color:var(--filter-color);
}

.multi-filter-champion .multi-filter-label.no-champ.active {
  background-color:#25254b;
}

.multi-filter-champion .multi-filter-label.no-champ.searching {
  background:#25254b;
}

.multi-filter-champion .multi-filter-label.no-champ::-moz-placeholder {
  color:#cddcfe;
}

.multi-filter-champion .multi-filter-label.no-champ::placeholder {
  color:#cddcfe;
}

.jedi .multi-filter-champion .multi-filter-label {
  background-color:#ebf0fd;
  color:#5f648a;
}

.multi-filter-champion .multi-filter-label:hover {
  background-color:var(--filter-option-selected);
}

.jedi .multi-filter-champion .multi-filter-label:hover {
  background-color:#e0e4f2;
}

.multi-filter-champion .multi-filter-label .multi-filter-label-tags {
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  line-height:20px;
  color:#fff;
  width:100%;
}

.multi-filter-champion .multi-filter-label .multi-filter-label-tags.no-champ {
  display:flex;
  align-items:center;
}

.multi-filter-champion .multi-filter-label .multi-filter-label-tags.no-champ input {
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:#cddcfe;
  background:0 0;
  border:none;
  outline:none;
  min-width:0;
  padding:4px 0;
  flex-grow:1;
  width:225px;
}

.multi-filter-champion .multi-filter-label .multi-filter-label-tags.no-champ input.active {
  background-color:#25254b;
}

.multi-filter-champion .multi-filter-label span {
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:#cddcfe;
  margin-left:-6px;
}

.multi-filter-champion .multi-filter-label .champion-icon {
  margin:0 5px;
}

.multi-filter-champion .multi-filter-label .champion-icon div {
  overflow:hidden;
  transform:scale(1.15);
  border-radius:1px;
}

.multi-filter-champion .multi-filter-label .champion-name {
  min-width:-moz-fit-content;
  min-width:fit-content;
}

.multi-filter-champion .multi-filter-label img {
  height:16px;
  width:16px;
  border-radius:1px;
  margin-left:5px;
  margin-right:5px;
  position:relative;
  top:-1px;
}

.multi-filter-champion .multi-filter-label input {
  background:0 0;
  border:none;
  outline:none;
  color:inherit;
  font-size:inherit;
  min-width:0;
  padding:4px 0;
  flex-grow:1;
  width:225px;
}

.multi-filter-champion .multi-filter-label input::-moz-placeholder {
  color:inherit;
}

.multi-filter-champion .multi-filter-label input::placeholder {
  color:inherit;
}

.multi-filter-champion .multi-filter-label svg {
  float:right;
}

.multi-filter-champion .multi-filter-label .search-icon {
  width:18px;
  height:18px;
  opacity:.6;
  flex-shrink:0;
  margin-left:10px;
}

.multi-filter-champion .multi-filter-label .search-icon path {
  fill:#626696;
}

.jedi .multi-filter-champion .multi-filter-label .search-icon path {
  fill:#5f648a;
}

.multi-filter-champion .multi-filter-menu-summoner-page {
  position:absolute;
  top:calc(100% + 5px);
  left:0;
  min-width:100%;
  max-height:169px;
  background-color:#25254b;
  border-radius:3px;
  overflow:auto;
  z-index:2;
  color:#cddcfe;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-size:10px;
  line-height:12px;
}

.jedi .multi-filter-champion .multi-filter-menu-summoner-page {
  background-color:#fbfcff;
  color:#5f648a;
}

.jedi .multi-filter-champion .multi-filter-menu-summoner-page:has(*) {
  border:1px solid #dbdfef;
}

.multi-filter-champion .multi-filter-menu-summoner-page .multi-filter-menu-tags {
  display:flex;
  align-items:center;
  padding:8px 12px;
}

.multi-filter-champion .multi-filter-menu-summoner-page .multi-filter-menu-title {
  font-size:10px;
  padding:6px 12px;
  line-height:13.5px;
}

.multi-filter-champion .multi-filter-menu-summoner-page .multi-filter-menu-item {
  display:flex;
  align-items:center;
  padding:8px 12px;
  cursor:pointer;
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:#cddcfe;
}

.multi-filter-champion .multi-filter-menu-summoner-page .multi-filter-menu-item.highlighted {
  background-color:#383864;
}

.jedi .multi-filter-champion .multi-filter-menu-summoner-page .multi-filter-menu-item.highlighted {
  background-color:#ebf0fd;
}

.multi-filter-champion .multi-filter-menu-summoner-page .multi-filter-menu-item img {
  margin-right:12px;
  width:26px;
  height:26px;
}

.multi-filter-champion .multi-filter-menu-summoner-page .multi-filter-menu-item span {
  color:#5f5f7b;
  font-weight:400;
}

.multi-filter-champion .multi-filter-menu-summoner-page .multi-filter-menu-item .champion-icon {
  overflow:hidden;
  margin-right:8px;
  border-radius:2px;
}

.multi-filter-champion .multi-filter-menu-summoner-page .multi-filter-menu-item .champion-icon div {
  transform:scale(1.15);
}

.player-type-filter-img {
  height:14px;
}

.player-type-container,
.role-filter-container {
  display:grid;
  height:36px;
  background-color:#2c2c40;
  box-shadow:0 2px 3px -2px rgba(14,37,84,.22);
}

.jedi .player-type-container,
.jedi .role-filter-container {
  background-color:transparent;
  box-shadow:none;
  border:1px solid #dbdfef;
}

.player-type-container.deactivated,
.role-filter-container.deactivated {
  opacity:.5;
  pointer-events:none;
}

.player-type-container .player-type-filter,
.player-type-container .role-filter,
.role-filter-container .player-type-filter,
.role-filter-container .role-filter {
  grid-row:1/2;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  min-width:36px;
  background-color:var(--filter-color);
}

.jedi .player-type-container .player-type-filter,
.jedi .player-type-container .role-filter,
.jedi .role-filter-container .player-type-filter,
.jedi .role-filter-container .role-filter {
  background-color:#fbfcff;
}

.player-type-container .player-type-filter:first-child,
.player-type-container .role-filter:first-child,
.role-filter-container .player-type-filter:first-child,
.role-filter-container .role-filter:first-child {
  border-top-left-radius:3px;
  border-bottom-left-radius:3px;
}

.player-type-container .player-type-filter:last-child,
.player-type-container .role-filter:last-child,
.role-filter-container .player-type-filter:last-child,
.role-filter-container .role-filter:last-child {
  border-top-right-radius:3px;
  border-bottom-right-radius:3px;
}

.player-type-container .player-type-filter:hover,
.player-type-container .role-filter:hover,
.role-filter-container .player-type-filter:hover,
.role-filter-container .role-filter:hover {
  background-color:var(--filter-option-selected);
  cursor:pointer;
}

.jedi .player-type-container .player-type-filter:hover,
.jedi .player-type-container .role-filter:hover,
.jedi .role-filter-container .player-type-filter:hover,
.jedi .role-filter-container .role-filter:hover {
  background-color:#ebf0fd;
}

.player-type-container .player-type-filter.active,
.player-type-container .role-filter.active,
.role-filter-container .player-type-filter.active,
.role-filter-container .role-filter.active {
  background-color:var(--filter-option-selected);
}

.jedi .player-type-container .player-type-filter.active,
.jedi .player-type-container .role-filter.active,
.jedi .role-filter-container .player-type-filter.active,
.jedi .role-filter-container .role-filter.active {
  background-color:#ebf0fd;
}

.player-type-container .player-type-filter.disabled img,
.player-type-container .role-filter.disabled img,
.role-filter-container .player-type-filter.disabled img,
.role-filter-container .role-filter.disabled img {
  opacity:.1;
}

.player-type-container .player-type-filter.disabled:hover,
.player-type-container .role-filter.disabled:hover,
.role-filter-container .player-type-filter.disabled:hover,
.role-filter-container .role-filter.disabled:hover {
  background-color:#222238;
  cursor:not-allowed;
}

.player-type-container .player-type-filter img,
.player-type-container .player-type-filter svg,
.player-type-container .role-filter img,
.player-type-container .role-filter svg,
.role-filter-container .player-type-filter img,
.role-filter-container .player-type-filter svg,
.role-filter-container .role-filter img,
.role-filter-container .role-filter svg {
  width:16px;
  height:16px;
}

.role-pair-filters-container {
  display:flex;
}

.role-pair-filters-container .role-pair-filter {
  position:relative;
  display:flex;
  align-items:center;
  width:96px;
  height:36px;
  border:1px solid #2c2c40;
  background-color:#222238;
  overflow:hidden;
}

.role-pair-filters-container .role-pair-filter:not(:last-child) {
  margin-right:12px;
}

.role-pair-filters-container .role-pair-filter:hover {
  background-color:var(--filter-color);
  border-bottom:1px solid var(--ugg-common-blue);
  cursor:pointer;
}

.role-pair-filters-container .role-pair-filter:hover .separator {
  background-color:#222238;
}

.role-pair-filters-container .role-pair-filter.active {
  background-color:var(--filter-color);
  border-bottom:1px solid var(--ugg-common-blue);
}

.role-pair-filters-container .role-pair-filter.active .separator {
  background-color:#222238;
}

.role-pair-filters-container .role-pair-filter .role {
  flex:1 1;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
}

.role-pair-filters-container .role-pair-filter .role img,
.role-pair-filters-container .role-pair-filter .role svg {
  width:16px;
  height:16px;
}

.role-pair-filters-container .role-pair-filter .separator {
  position:absolute;
  top:-5px;
  bottom:-5px;
  left:50%;
  transform:translateX(-50%) rotate(20deg);
  width:1px;
  background-color:#2c2c40;
}

.ugg-theme_light ._filter-manager .modal-filter {
  box-shadow:0 2px 3px -2px rgba(14,37,84,.22);
}

.modal-filter .modal-filter__overlay {
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:242px;
  bottom:0;
  z-index:1;
  opacity:.8;
  background-color:#070720;
}

.modal-filter.modal-filter__open {
  z-index:2;
}

.modal-filter.modal-filter__open .modal-filter__overlay {
  display:inherit;
  z-index:1;
}

.select_modal {
  position:relative;
}

.select_modal .select_modal__toggle {
  z-index:1;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
}

.select_modal .select_modal__modal-window {
  position:absolute;
}

.select_modal .select_modal__modal-window.select_modal__modal-window__filter {
  position:absolute;
  left:0;
  top:45px;
  width:350px;
  z-index:2;
  padding:24px;
  border-radius:3px;
  background-color:var(--filter-color);
  box-shadow:0 2px 8px -2px rgba(14,37,84,.22);
  font-size:12px;
  color:var(--font-color-main);
}

.select_modal .select_modal__modal-window .modal_toggle {
  display:flex;
  justify-content:space-between;
}

.select_modal .select_modal__modal-window .modal_toggle .filter-description {
  margin-right:50px;
}

.select_modal .select_modal__modal-window .modal_toggle .filter-description .title {
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  color:var(--font-color-main);
}

.select_modal .select_modal__modal-window .modal_toggle .filter-description .sub-text {
  font-size:12px;
}

.select_modal .select_modal__modal-window .selection-footer {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  height:30px;
  margin-top:18px;
}

.select_modal .select_modal__modal-window .selection-footer .clear {
  margin:0 6px;
}

.select_modal .select_modal__modal-window .selection-footer .clear:hover {
  color:var(--ugg-common-blue);
  cursor:pointer;
}

.select_modal .select_modal__modal-window .selection-footer .apply {
  margin:0 6px;
  font-weight:700;
}

.select_modal .select_modal__modal-window .selection-footer .apply:hover {
  color:var(--ugg-common-blue);
  cursor:pointer;
}

.filter-select_opp .opp-selected {
  position:relative;
  display:flex;
  align-items:center;
  padding-left:12px;
  padding-right:12px;
  width:100%;
  min-width:170px;
  height:100%;
}

.filter-select_opp .opp-selected .vs-placeholder {
  height:32px;
  width:100%;
  color:#000;
  border:1px solid #191937;
  z-index:2;
  position:relative;
  background:#191937;
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:#cddcfe;
}

.filter-select_opp .opp-selected .vs-placeholder .vs-placeholder::-moz-placeholder {
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:#cddcfe;
}

.filter-select_opp .opp-selected .vs-placeholder .vs-placeholder::placeholder {
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:#cddcfe;
}

.filter-select_opp .opp-selected .item-selected {
  display:flex;
  align-items:center;
  padding-left:0;
  width:100%;
  height:100%;
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:#cddcfe;
}

.filter-select_opp .opp-selected .item-selected .champion-image-container {
  position:relative;
  margin-right:10px;
  width:24px;
  height:24px;
  border-radius:50%;
  overflow:hidden;
}

.filter-select_opp .opp-selected .item-selected .champion-image-container .champion-image {
  position:absolute;
  width:100%;
  height:100%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1.1);
}

.filter-select_opp .opp-selected .magnifying-glass {
  height:31px;
  width:31px;
  margin-right:-6px;
}

.filter-select_opp .opp-selected .clear-selected-option {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-left:10px;
  flex:0 0 15px;
  width:15px;
  height:15px;
  background-color:#fff;
  border-radius:50%;
  cursor:pointer;
}

.filter-select_opp .opp-selected .clear-selected-option>img {
  width:100%;
}
.multi-builds-filter-button {
  min-width:128px;
  height:36px;
  margin-left:-8px;
  background:#191937;
  border-radius:3px;
  cursor:pointer;
}

.multi-builds-filter-button.active,
.multi-builds-filter-button:hover {
  background:#313160;
}

.multi-builds-filter-button span {
  position:relative;
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  line-height:20px;
  color:#fff;
  display:flex;
}

.multi-builds-filter-button .multi-builds-content {
  display:flex;
  margin-left:12px;
  margin-top:8px;
  justify-content:space-between;
}

.multi-builds-filter-button .multi-builds-content .image-holder {
  display:flex;
  gap:6px;
  margin-top:2px;
  margin-right:12px;
}

.multi-builds-filter-button .multi-builds-content .image-holder .rune-image-container {
  height:16px;
  width:16px;
  border-radius:1px;
  background-color:#191937;
}

.multi-builds-filter-button .multi-builds-content .image-holder .item-image-container,
.multi-builds-filter-button .multi-builds-content .image-holder img {
  height:16px;
  width:16px;
  border-radius:1px;
}

.multi-builds-filter-button .dropdown-multis {
  background:#191937;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  border-radius:3px;
  width:141px;
  margin-top:20px;
  z-index:2;
  position:absolute;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container:hover {
  background-color:#313160;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container:hover.first {
  border-top-left-radius:3px;
  border-top-right-radius:3px;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container:hover.last {
  border-bottom-left-radius:3px;
  border-bottom-right-radius:3px;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container {
  display:flex;
  height:32px;
  justify-content:space-between;
  align-items:center;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container.only.active {
  background:#313160;
  border-radius:3px;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container.first.active {
  background:#313160;
  border-top-left-radius:3px;
  border-top-right-radius:3px;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container.last.active {
  background:#313160;
  border-bottom-left-radius:3px;
  border-bottom-right-radius:3px;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container.active {
  background:#313160;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container.active span {
  font-weight:600;
  color:#fff;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container span {
  font-family:Inter;
  font-style:normal;
  font-weight:500;
  font-size:14px;
  line-height:15px;
  margin-left:12px;
  color:#cddcfe;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container .image-holder {
  display:flex;
  gap:6px;
  margin-right:12px;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container .image-holder .rune-image-container {
  height:20px;
  width:20px;
  border-radius:1px;
  background-color:#191937;
}

.multi-builds-filter-button .dropdown-multis .indv-multi-container .image-holder .item-image-container,
.multi-builds-filter-button .dropdown-multis .indv-multi-container .image-holder img {
  height:20px;
  width:20px;
  border-radius:1px;
}

.filter-seperator {
  background:#383864;
  width:1px;
  height:36px;
}
.more-button,
.new-profiles-button,
.opp-champion-search,
.player-type-container,
.role-filter-container,
.role-pair-filter,
.select_modal__toggle,
.simple-champion-filter {
  border-radius:3px;
}

.more-button {
  display:flex;
  align-items:center;
  padding:8px 12px;
  height:36px;
  background:#191937;
  cursor:pointer;
}

.more-button:hover {
  background:#313160;
}

.more-button svg {
  margin-right:10px;
  height:16px;
  width:16px;
}

.more-button span {
  font-family:Inter;
  font-style:normal;
  font-weight:700;
  font-size:14px;
  line-height:20px;
  color:#fff;
}
.player-type-value {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.player-type-value svg {
  width:15px;
}

.player-type-value svg g,
.player-type-value svg path {
  fill:var(--font-color-main);
}

.role-value {
  display:flex;
  justify-content:space-between;
  align-items:center;
  white-space:nowrap;
  padding: 8px 12px;
}

.role-value img,
.role-value svg {
  width:16px;
}

.player-type-option {
  display:flex;
  justify-content:space-between;
  align-content:center;
}

.player-type-option svg {
  width:15px;
}

.player-type-option svg g,
.player-type-option svg path {
  fill:var(--font-color-main);
}

.duo-role-option {
  display:flex;
  justify-content:center;
  align-content:center;
}

.duo-role-option img,
.duo-role-option svg {
  width:16px;
}

.duo-role-option .forward-slash {
  margin:0 10px;
  opacity:.25;
  color:var(--forward-slash);
  font-size:20px;
  line-height:20px;
  font-weight:400;
}

.rank-option {
  display:flex;
  align-items:center;
  padding: 8px 12px;
  cursor: not-allowed;
}

.rank-option>.rank-img {
  width:20px;
}

.rank-option>.rank-img.react-svg {
  justify-content:center;
}

.rank-option>.rank-img svg {
  width:18px;
}

.rank-option>.rank-img svg g,
.rank-option>.rank-img svg path {
  fill:var(--font-color-main);
}
.content-section {
  padding:18px;
  border-radius:3px;
  background-color:#191937;
}

.jedi .content-section {
  background-color:#fbfcff;
  box-shadow:0 1px 4px rgba(14,37,84,.22);
}

@media(max-width:899px) {
  .content-section {
    padding:18px;
  }
}

@media(max-width:399px) {
  .content-section {
    padding:12px;
  }
}

.content-section.content-section_unset {
  padding:unset;
  border-radius:unset;
  background-color:unset;
}

.content-section.content-section_no-padding {
  padding:0;
}

.content-section .content-section_content {
  padding:18px;
  background-color:#191937;
}

@media(max-width:899px) {
  .content-section .content-section_content {
    padding:18px;
  }
}

@media(max-width:399px) {
  .content-section .content-section_content {
    padding:12px;
  }
}

.content-section .content-section_header {
  position:relative;
  display:flex;
  align-items:center;
  margin-bottom:18px;
  padding-left:14px;
  width:100%;
  font-size:14px;
  font-weight:700;
  line-height:20px;
}

@media(max-width:899px) {
  .content-section .content-section_header {
    margin-bottom:12px;
  }
}

.content-section .content-section_header:before {
  content:"";
  position:absolute;
  left:0;
  width:2px;
  height:20px;
  border-radius:2px;
  background-color:#3273fa;
}

.content-section .content-section_blurb {
  color:#5f5f7b;
  font-size:14px;
  font-weight:400;
}

.jedi .content-section .content-section_blurb {
  color:#5f648a;
}

.content-section .wr-matches {
  white-space:nowrap;
}

.content-section .wr-matches .matches {
  color:#cddcfe;
  font-size:14px;
  font-weight:500;
}
.font-bold {
  font-weight:700;
}

.\!text-accent-blue-400 {
  --tw-text-opacity:1 !important;
  color:rgb(50 115 250/var(--tw-text-opacity)) !important;
}
@media(prefers-reduced-motion) {
      .animated {
        -webkit-animation:unset !important;
        -webkit-transition:none !important;
        animation:unset !important;
        transition:none !important;
      }
    }
    
    *,

    .before\:content-\[\"\"\]:before,
    .before\:content-\[\'\'\]:before {
      --tw-content:"";
      content:var(--tw-content);
    }
    
    .after\:absolute:after {
      content:var(--tw-content);
      position:absolute;
    }
    
    .after\:bottom-0:after {
      content:var(--tw-content);
      bottom:0;
    }
    
    .after\:h-0:after {
      content:var(--tw-content);
      height:0;
    }
    
    .after\:h-0\.5:after {
      content:var(--tw-content);
      height:.125rem;
    }
    
    .after\:h-\[2px\]:after {
      content:var(--tw-content);
      height:2px;
    }
    
    .after\:w-\[100\%\]:after,
    .after\:w-full:after {
      content:var(--tw-content);
      width:100%;
    }
    
    .after\:rounded-\[2px\]:after {
      content:var(--tw-content);
      border-radius:2px;
    }
    
    .after\:rounded-sm:after {
      content:var(--tw-content);
      border-radius:3px;
    }
    
    .after\:\!bg-accent-blue-400:after {
      content:var(--tw-content);
      --tw-bg-opacity:1 !important;
      background-color:rgb(50 115 250/var(--tw-bg-opacity)) !important;
    }

.items-home-page {
  display:flex;
  margin:0 auto;
}

@media(max-width:1139px) {
  .items-home-page {
    width:100%;
  }
}

.items-home {
  max-width:1014px;
  width:100vw;
  box-sizing:content-box;
}

@media(max-width:1139px) {
  .items-home {
    width:100%;
  }
}

.items-home .items-home-header {
  margin:48px 0 36px;
  display:flex;
  align-items:center;
}

.items-home .items-home-header .items-home-header-pic {
  margin-right:24px;
  flex:none;
}

.items-home .items-home-header .items-header-text {
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}

.items-home .items-home-header .items-header-text h1 {
  font-family:Barlow;
  font-weight:600;
  font-size:36px;
  line-height:34px;
  margin:0;
  padding-bottom:12px;
}

.items-home .items-home-header .items-header-text h2 {
  color:#cddcfe;
  font-family:Inter;
  font-weight:500;
  font-size:16px;
  line-height:22px;
  margin:0;
}

.items-home .items-home-header .items-header-text h2 strong {
  color:#fff;
}

.items-home .items-container {
  display:grid;
  grid-template-columns:minmax(auto,680px) minmax(auto,312px);
  grid-template-rows:repeat(4,auto);
  grid-gap:12px;
}

@media(max-width:899px) {
  .items-home .items-container {
    grid-template-columns:auto;
    grid-template-rows:repeat(5,auto);
    grid-gap:12px 0;
  }
}

.items-home .items-container .items-section {
  padding:18px;
  border-radius:3px;
  background-color:#191937;
}

.items-home .items-container .items-recipe {
  grid-area:1/1/2/2;
}

@media(max-width:899px) {
  .items-home .items-container .items-recipe {
    grid-area:2/1/3/2;
  }
}

.items-home .items-container .items-recipe .recipe-container {
  margin-top:24px;
}

.items-home .items-container .items-recipe .recipe-container .branch-container {
  display:flex;
  flex-direction:column;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main {
  display:flex;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-0,
.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-1 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:24px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-1:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-19px;
  width:1px;
  height:20px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-2 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:24px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-2:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-68px;
  width:1px;
  height:69px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-3 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:24px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-3:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-117px;
  width:1px;
  height:118px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-4 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:24px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-4:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-166px;
  width:1px;
  height:167px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-5 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:24px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-5:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-215px;
  width:1px;
  height:216px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-6 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:24px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-6:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-264px;
  width:1px;
  height:265px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-7 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:24px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-7:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-313px;
  width:1px;
  height:314px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-8 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:24px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-1-8:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-362px;
  width:1px;
  height:363px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-0,
.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-1 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-1:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-19px;
  width:1px;
  height:20px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-2 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-2:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-68px;
  width:1px;
  height:69px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-3 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-3:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-117px;
  width:1px;
  height:118px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-4 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-4:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-166px;
  width:1px;
  height:167px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-5 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-5:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-215px;
  width:1px;
  height:216px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-6 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-6:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-264px;
  width:1px;
  height:265px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-7 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-7:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-313px;
  width:1px;
  height:314px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-8 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-2-8:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-362px;
  width:1px;
  height:363px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-0,
.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-1 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-1:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-19px;
  width:1px;
  height:20px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-2 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-2:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-68px;
  width:1px;
  height:69px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-3 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-3:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-117px;
  width:1px;
  height:118px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-4 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-4:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-166px;
  width:1px;
  height:167px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-5 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-5:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-215px;
  width:1px;
  height:216px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-6 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-6:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-264px;
  width:1px;
  height:265px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-7 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-7:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-313px;
  width:1px;
  height:314px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-8 {
  position:relative;
  height:30px;
  width:36px;
  margin-left:18px;
  border-left:1px solid #565691;
  border-bottom:1px solid #565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .branch-3-8:before {
  content:"";
  position:absolute;
  left:-1px;
  top:-362px;
  width:1px;
  height:363px;
  background-color:#565691;
}

.items-home .items-container .items-recipe .recipe-container .branch-container .branch-main .item-card {
  margin-top:12px;
}

.items-home .items-container .items-details {
  grid-area:1/2/5/3;
  padding:0;
  display:flex;
  flex-direction:column;
}

@media(max-width:899px) {
  .items-home .items-container .items-details {
    grid-area:1/1/2/2;
  }
}

.items-home .items-container .items-details .items-details-container {
  border-radius:3px;
  background-color:#191937;
}

.items-home .items-container .items-details .items-details-container div:last-child {
  border-bottom:none;
}

.items-home .items-container .items-details .items-details-container .items-header {
  margin-bottom:18px;
}

.items-home .items-container .items-details .items-details-container .items-details-header {
  padding:18px 18px 0;
  border-bottom:1px solid #070720;
}

.items-home .items-container .items-details .items-details-container .items-details-pic {
  margin-bottom:18px;
}

.items-home .items-container .items-details .items-details-container .items-details-section {
  display:flex;
  flex-direction:column;
  padding:18px;
  border-bottom:1px solid #070720;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-list {
  display:flex;
  flex-direction:column;
  font-weight:500;
  font-size:14px;
  line-height:17px;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-list:not(:last-child) {
  margin-bottom:13px;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-list .stat-line {
  display:flex;
  align-items:center;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-list .stat-line strong {
  color:#3273fa;
  font-weight:600;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list {
  display:flex;
  flex-direction:column;
  font-weight:500;
  font-size:12px;
  line-height:18px;
  color:#cddcfe;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list:not(:last-child) {
  margin-bottom:18px;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line strong {
  font-weight:700;
  color:#fff;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .passive-title {
  font-weight:700;
  color:#3273fa;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .magic-damage {
  color:#08a6ff;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .physical-damage {
  color:#f89249;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .true-damage {
  color:#ffbf74;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .healing {
  color:#4dff9f;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .speed {
  color:#fff;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .health {
  color:#00c280;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .mana {
  color:#69c9ff;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .armor {
  color:#f1de30;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .magic-resistance {
  color:#f928a5;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .status {
  color:#fff;
}

.items-home .items-container .items-details .items-details-container .items-details-section .passives-list .passive-line .italic {
  font-style:italic;
}

.items-home .items-container .items-details .items-details-container .items-details-section .limitation-text {
  font-weight:500;
  font-size:14px;
  line-height:20px;
  color:#cddcfe;
}

.items-home .items-container .items-details .items-details-container .items-details-section .limitation-text strong {
  color:#3273fa;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-recipe-components {
  display:flex;
  justify-content:center;
  margin-bottom:18px;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-recipe-components .recipe-img-container {
  display:flex;
  align-items:center;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-recipe-components .recipe-img-container .recipe-img {
  margin-right:10px;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-recipe-components .recipe-img-container .plus-icon {
  height:10px;
  width:10px;
  margin-right:10px;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-recipe-info {
  display:flex;
  justify-content:space-evenly;
  font-weight:600;
  font-size:14px;
  line-height:17px;
  color:#fff;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-recipe-info .stats-recipe-data {
  display:flex;
  flex-direction:column;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-recipe-info .stats-recipe-data .recipe-title {
  margin-bottom:3px;
  color:#cddcfe;
}

.items-home .items-container .items-builds-into {
  grid-column:1/2;
}

.items-home .items-container .items-builds-into .builds-into-container {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-gap:18px 0;
}

@media(max-width:599px) {
  .items-home .items-container .items-builds-into .builds-into-container {
    grid-template-columns:repeat(2,1fr);
  }
}

.items-home .items-container .items-cost-analysis {
  padding:18px 0;
  border-radius:3px;
  background-color:#191937;
  grid-column:1/2;
}

.items-home .items-container .items-cost-analysis .items-header {
  margin:0 18px;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container {
  display:flex;
  flex-direction:column;
  margin-top:24px;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container div:last-child {
  border-bottom:none;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .cost-section {
  display:flex;
  flex-direction:column;
  border-bottom:1px solid #070720;
  font-weight:500;
  font-size:14px;
  line-height:20px;
  color:#fff;
  padding:0 18px;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .cost-section .item-name-text {
  color:#fff;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .cost-section:not(:first-child) {
  margin-top:24px;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .cost-section:not(:last-child) {
  padding-bottom:24px;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .cost-section .cost-analysis-pic {
  margin-right:6px;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .stat-values-line {
  display:flex;
  align-items:center;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .stat-values-line:not(:last-child) {
  margin-bottom:12px;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .stat-values-line strong {
  color:#3273fa;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .stat-values-line-dot {
  display:flex;
  align-items:center;
  padding-left:20px;
  position:relative;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .stat-values-line-dot:not(:last-child) {
  margin-bottom:12px;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .stat-values-line-dot:before {
  content:"";
  position:absolute;
  left:10px;
  width:4px;
  height:4px;
  border-radius:50%;
  background-color:#cddcfe;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .stat-values-line-dot strong {
  color:#3273fa;
}

.items-home .items-container .items-cost-analysis .cost-analysis-container .gold-logo {
  margin-left:7px;
}

.items-header {
  display:flex;
  align-items:center;
  position:relative;
  padding-left:12px;
  margin-bottom:24px;
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:20px;
}

.items-header:before {
  content:"";
  position:absolute;
  left:0;
  width:2px;
  height:20px;
  border-radius:2px;
  background-color:#3273fa;
}

.item-card {
  display:flex;
}

.item-card .item-card-info {
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-left:12px;
}

.item-card .item-card-info .text-small {
  color:#cddcfe;
  font-weight:600;
  font-size:12px;
  line-height:15px;
}

.item-card .item-card-info .text-default {
  margin-bottom:4px;
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:17px;
}

.gold-logo {
  display:flex;
  align-items:center;
  color:#f4c874;
  font-weight:500;
  font-size:13px;
  line-height:16px;
}

.gold-logo img {
  width:14px;
  height:14px;
  padding-right:4px;
}

.items-pic-xlarge {
  width:90px;
  height:90px;
}

.items-pic-large {
  width:60px;
  height:60px;
}

.items-pic-medium {
  width:48px;
  height:48px;
}

.items-pic-small {
  width:36px;
  height:36px;
}

.items-pic-30 {
  width:30px;
  height:30px;
}

.items-pic-xsmall {
    margin-bottom: -5px;
    width: 24px;
    height: 24px;
}

.items-border-mythic-large {
  border:2px solid #ff9b00;
  padding:2px;
  border-radius:6px;
}

.items-border-normal-large {
  border:2px solid #565691;
  padding:2px;
  border-radius:6px;
}

.items-border-mythic-small {
  border:1px solid #ff9b00;
  padding:1px;
  border-radius:2px;
}

.items-border-normal-small {
  border:1px solid #565691;
  padding:1px;
  border-radius:2px;
}

.items-directory-home-page {
  display:flex;
  margin:0 auto;
}

@media(max-width:1139px) {
  .items-directory-home-page {
    width:100%;
  }
}

.items-directory-home {
  max-width:1014px;
  width:100vw;
  box-sizing:content-box;
  display:flex;
  flex-direction:column;
}

@media(max-width:1139px) {
  .items-directory-home {
    width:100%;
  }
}

.items-directory-home .directory-header {
  margin:36px 0;
}

.items-directory-home .directory-header h1 {
  font-family:Barlow;
  font-weight:600;
  font-size:36px;
  line-height:34px;
  margin-bottom:30px;
}

.items-directory-home .directory-header h2 {
  font-weight:500;
  font-size:16px;
  line-height:19px;
  color:#cddcfe;
}

.items-directory-home .filter-manager-items {
  margin-top:0;
  margin-bottom:36px;
}

.items-directory-home .directory-items-container {
  display:flex;
  flex-direction:column;
  font-family:Inter;
}

.items-directory-home .directory-items-container .directory-items-section {
  padding:18px;
  border-radius:3px;
  background-color:#191937;
  margin-bottom:12px;
}

.items-directory-home .directory-items-container .directory-items-section .items-header {
  margin-bottom:19px;
}

.items-directory-home .directory-items-container .directory-items-section .items-container {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.items-directory-home .items-search-input {
  display:flex;
  position:relative;
  align-items:center;
}

.items-directory-home .items-search-input input {
  width:175px;
  height:36px;
  border-radius:6px;
  background-color:#25254b;
  border:1px solid #25254b;
  padding-left:14px;
  color:#cddcfe;
  font-weight:400;
  font-size:14px;
  line-height:20px;
}

.items-directory-home .items-search-input input::-moz-placeholder {
  color:#cddcfe;
}

.items-directory-home .items-search-input input::placeholder {
  color:#cddcfe;
}

.items-directory-home .items-search-input input:focus {
  border:1px solid #3273fa;
  outline:none;
}

.items-directory-home .items-search-input svg {
  position:absolute;
  right:12px;
  width:16px;
}

.items-directory-home .items-search-input svg:hover {
  cursor:pointer;
}

.items-directory-home .items-search-input svg path {
  fill:#cddcfe;
}

@keyframes ldio-zx01oum11u {
  0% {
    transform:rotate(0);
  }
  to {
    transform:rotate(1turn);
  }
}
.filter-bar {
	display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
}
.champion-filter {
  margin-bottom: 12px;
  font-size: 18px;
}

.champion-filter input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.champion-filter label img {
}

@media(max-width:500px) {
  .champion-filter label img {
    height: 20px;
  }
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

.champion-filter:hover input ~ .checkmark {
  background-color: #ccc;
}

.champion-filter input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.champion-filter input:checked ~ .checkmark:after {
  display: block;
}

.champion-filter .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
#masthead.landing {
  transition:all .3s ease;
}

#masthead.landing.transparent {
  background-color:transparent;
  border-bottom:1px solid transparent;
}

#masthead.landing.transparent .user-profile-dropdown {
  border-left-color:transparent;
}

#masthead.verification-bar-active,
#masthead.verification-bar-active .masthead-container {
  top:40px;
}

#masthead {
  height:64px;
  margin-top:31px;
}

#masthead.is-landing {
  height:0;
}

@media(max-width:899px) {
  #masthead.is-landing {
    height:64px;
  }
}

#masthead .masthead-container {
  font-size:14px;
  position:fixed;
  top:31px;
  right:0;
  width:calc(100% - 64px);
  padding:0 24px;
  height:65px;
  background-color:#070720;
  color:#fff;
  z-index:9999999;
  display:flex;
  align-items:center;
  flex-direction:row;
  border-bottom:1px solid #0d0d28;
}

@media(max-width:1139px) {
  #masthead .masthead-container {
    width:100%;
    padding-left:18px;
  }
}

@media(max-width:899px) {
  #masthead .masthead-container {
    border-bottom:none;
  }
}

.jedi #masthead .masthead-container {
  background-color:#f0f4fe;
  border-color:#dbdfef;
}

#masthead .masthead-container.verification-bar-active {
  top:40px;
}

#masthead .masthead-container .masthead-right {
  margin-left:auto;
}

#masthead .masthead-container .masthead-right .live-game-shortcut {
  border-radius:3px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.jedi #masthead .masthead-container .masthead-right .live-game-shortcut path {
  fill:#5f648a;
}

@media(max-width:599px) {
  #masthead .masthead-container .masthead-right .live-game-shortcut {
    margin-left:12px;
  }
}

#masthead .masthead-container .masthead-right .live-game-shortcut:hover {
  background-color:#222238;
  cursor:pointer;
}

.jedi #masthead .masthead-container .masthead-right .live-game-shortcut:hover {
  background-color:#e0e4f2;
}

.jedi #masthead .masthead-container .masthead-right .live-game-shortcut:hover path {
  fill:#5f648a;
}

#masthead .masthead-container .masthead-right .live-game-shortcut .masthead_livegame {
  cursor:pointer;
}

#masthead .masthead-container .ugg-u-logo {
  margin-left:20px;
  width:20px;
}

#masthead .masthead-container .hamburger-icon {
  width:16px;
}

#masthead .masthead-container .hamburger-icon:hover {
  cursor:pointer;
}

#masthead .masthead-container .hamburger-icon:hover g,
#masthead .masthead-container .hamburger-icon:hover path {
  fill:#fff;
}

#masthead .masthead-container .masthead_blue-man {
  background:#3273fa;
  border-radius:2px;
  height:28px;
  width:28px;
  position:relative;
  padding:5px;
  margin-left:12px;
  display:grid;
  place-items:center;
}

#masthead .masthead-container .masthead_blue-man.masthead_blue-man-premium {
  background:0 0;
}

#masthead .masthead-container .masthead_blue-man:hover {
  background-color:#1154df;
  cursor:pointer;
}

#masthead .masthead-container .logo-nav {
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:0 16px;
  height:100%;
  width:240px;
  border-right:1px solid var(--masthead-border-color);
}

.jedi #masthead .masthead-container .logo-nav {
  border-color:#dbdfef;
}

@media(max-width:899px) {
  #masthead .masthead-container .logo-nav {
    width:auto;
    border-right:none;
  }
}

#masthead .masthead-container .logo-nav .icon {
  width:24px;
  height:24px;
  cursor:pointer;
}

.jedi #masthead .masthead-container .logo-nav .icon path {
  fill:#5f648a;
}

#masthead .masthead-container .logo-nav img {
  margin-left:24px;
}

#masthead .masthead-container .logo-nav img .ugg-logo {
  margin-left:12px;
}

#masthead .masthead-container .logo-nav.test-game-selector {
  margin-right:0;
}

#masthead .masthead-container .masthead-search-bar-container {
  flex:1 1;
  padding:0 12px;
}

@media(max-width:1139px) {
  #masthead .masthead-container .masthead-search-bar-container {
    display:flex;
    justify-content:flex-start;
  }
}

@media(max-width:899px) {
  #masthead .masthead-container .masthead-search-bar-container {
    display:flex;
    justify-content:flex-start;
  }
}

@media(max-width:599px) {
  #masthead .masthead-container .masthead-search-bar-container {
    display:flex;
    justify-content:flex-start;
  }
}

@media(max-width:399px) {
  #masthead .masthead-container .masthead-search-bar-container {
    display:flex;
    justify-content:flex-start;
  }
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar {
  flex:1 1;
  position:relative;
  display:flex;
  align-items:center;
  height:36px;
  min-width:230px;
  max-width:500px;
  border-radius:3px;
  background-color:#0d0d28;
}

.jedi #masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar {
  background-color:#fff;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

@media(max-width:399px) {
  #masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar {
    display:none;
  }
}

@media(max-width:599px) {
  #masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar {
    display:none;
  }
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar::-moz-placeholder {
  color:#8a8ebb;
  opacity:1;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar::placeholder {
  color:#8a8ebb;
  opacity:1;
}

.jedi #masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar::-moz-placeholder {
  color:#5f5f7b;
}

.jedi #masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar::placeholder {
  color:#5f5f7b;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .region-selector-modal {
  width:230px;
}

@media(max-width:899px) {
  #masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar {
    max-width:420px;
  }
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .modal-filter {
  border-radius:3px;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .react-autosuggest__container {
  position:static;
  width:100%;
  height:100%;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .react-autosuggest__container.react-autosuggest__container_placeholder {
  background-color:#0d0d28;
  border-radius:3px;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .react-autosuggest__container .react-autosuggest__input {
  background-color:#0d0d28;
  width:100%;
  height:100%;
  color:#a9acd1;
  font-weight:500;
  padding-left:12px;
  padding-right:34px;
  border-radius:3px;
  font-size:13px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.jedi #masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .react-autosuggest__container .react-autosuggest__input {
  color:#5f5f7b;
  background-color:#fff;
  filter:none;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .react-autosuggest__container .react-autosuggest__suggestions-container--open {
  color:#000;
  width:auto;
  top:44px;
  left:0;
  right:0;
  border:none;
  font-size:14px;
  border-radius:3px;
}

.ugg-theme_light #masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .react-autosuggest__container .react-autosuggest__suggestions-container--open {
  box-shadow:0 2px 8px -2px rgba(14,37,84,.22);
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .react-autosuggest__container--open {
  height:100%;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .autosuggest-button {
  position:relative;
  fill:#fff;
  width:40px;
  height:100%;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .autosuggest-button svg {
  width:16px;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .region-selector-button {
  border:none !important;
  height:36px !important;
  padding:0 15px;
  background-color:#fff !important;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .region-selector-button:hover {
  background-color:rgba(49,51,74,.3) !important;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .react-autosuggest__container--open~.autosuggest-button {
  border-bottom-right-radius:0;
}

#masthead .masthead-container .masthead-search-bar-container .masthead-ugg-search-bar .spinthatshit-loader {
  position:absolute;
  right:24px;
  width:56px;
  transform:scale(.4);
}

#masthead .masthead-container .nav-dropdown {
  width:240px;
  display:flex;
  justify-content:center;
  align-items:center;
}

#masthead .masthead-container .nav-dropdown .profile-settings {
  width:190px;
  display:flex;
}

#masthead .masthead-container .nav-dropdown .profile-settings a {
  margin-left:10px;
  margin-top:10px;
}

#masthead .masthead-container .nav-dropdown .profile-settings .favorite-profile {
  margin-left:16px;
  margin-top:16px;
}

#masthead .masthead-container .nav-dropdown .login-btn {
  margin-left:12px;
}

#masthead .masthead-container .nav-container .nav {
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  flex-direction:row;
  width:100%;
  justify-content:space-between;
}

#masthead .masthead-container .nav-container .nav .left {
  margin-left:12px;
  width:100%;
}

#masthead .masthead-container .nav-container .nav .right {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
  height:44px;
}

#masthead .masthead-container .nav-container .nav .links {
  height:44px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
}

#masthead .masthead-container .nav-container .nav a {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  min-width:100px;
  padding:0 15px;
  color:#fff;
  white-space:nowrap;
}

#masthead .masthead-container .nav-container .nav a>strong {
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

#masthead .masthead-container .nav-container .nav a:hover>span {
  visibility:hidden;
}

#masthead .masthead-container .nav-container .nav a:hover>strong {
  display:block;
}

#masthead .masthead-container .nav-container .nav a.my-boi {
  min-width:0;
  padding-right:0;
  padding-left:0;
}

#masthead .masthead-container .nav-container .nav a.my-boi:hover {
  border-bottom:0 !important;
}

#masthead .masthead-container .nav-container .nav a.active {
  border-bottom:1px solid #08a6ff;
  font-weight:700;
}

#masthead .masthead-container .nav-container .nav a.my-boi.active {
  border-bottom:0;
  border-radius:50%;
}

#masthead .masthead-container .nav-container .accounts {
  margin-left:auto;
  display:flex;
  align-items:center;
}

#masthead .masthead-container .nav-container .accounts .profile-icon {
  border-radius:50%;
  height:30px;
  border:1px solid #2c2c40;
}

#masthead .masthead-container.with-sub-nav {
  padding-bottom:0;
  border-bottom:none;
}
#side-nav-container {
  top:0;
  font-family:Inter;
  display:flex;
  flex-direction:column;
  margin-top:65px;
  box-shadow:2px 0 4px rgba(0,0,0,.25);
}

#side-nav-container.side-nav_theme__light {
  box-shadow:1px 0 4px rgba(14,37,84,.22);
}

#side-nav-container.side-nav_mobile {
  box-shadow:none;
}

.side-nav_divider-container {
  background-color:#0d0d28;
}

.side-nav_divider-container.margin-top {
  margin-top:18px;
}

.side-nav_divider-container.margin-bottom {
  margin-bottom:18px;
}

.side-nav_theme__light .side-nav_divider-container {
  background-color:#ebf0fd;
}

.side-nav_divider-container .side-nav_divider {
  height:1px;
  margin:0 12px;
  background-color:#191937;
}

.side-nav_theme__light .side-nav_divider-container .side-nav_divider {
  background-color:#dbdfef !important;
}

.side-nav_head {
  position:absolute;
  top:-65px;
  width:100%;
  height:65px;
}

.side-nav_head .side-nav_head__outer {
  position:relative;
  display:flex;
  align-items:center;
  height:100%;
  width:100%;
  background:#0d0d28;
  transition:width .15s;
  overflow:hidden;
}

.side-nav_theme__light .side-nav_head .side-nav_head__outer {
  background-color:#ebf0fd;
}

.side-nav_head .side-nav_head__inner {
  position:absolute;
  display:inline-flex;
  align-items:center;
  padding:0 22px;
  min-height:64px;
  height:100%;
  background:#0d0d28;
  overflow:hidden;
}

.side-nav_theme__light .side-nav_head,
.side-nav_theme__light .side-nav_head .side-nav_head__inner {
  background-color:#ebf0fd;
}

.side-nav_head .side-nav_ugg-logo {
  display:flex;
  align-items:center;
  cursor:pointer;
}

.side-nav_head .side-nav_ugg-logo svg {
  height:26px;
}

.side-nav {
  display:flex;
  flex:1 1;
  flex-direction:column;
  height:100%;
  transition:width .15s;
  background:#0d0d28;
}

.side-nav_collapsed .side-nav {
  width:64px;
}

.side-nav_expanded .side-nav {
  width:276px;
}

.side-nav_theme__light .side-nav {
  background-color:#ebf0fd;
}

.side-nav .area-to-expand {
  position:absolute;
  top:0;
  left:0;
  height:66px;
  width:64px;
  cursor:pointer;
}

.side-nav .masthead-ugg-search-bar {
  position:relative;
  z-index:100;
  margin:0 12px 18px;
}

.side-nav_collapsed.side-nav_mobile .side-nav .masthead-ugg-search-bar {
  overflow:hidden;
}

.tag {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  height:16px;
  opacity:1;
  border-radius:1px;
  color:#fff;
  font-family:Inter;
  font-size:10px;
  font-weight:700;
  line-height:1;
  transition:opacity .15s;
}

.side-nav_collapsed .tag {
  opacity:0;
}

.tag_mini {
  position:absolute;
  top:2px;
  left:28px;
  padding:0 2px;
  width:10px;
  height:10px;
  opacity:0;
  border-radius:1px;
  font-size:8px;
  line-height:10px;
  pointer-events:none;
}

.side-nav_collapsed .tag_mini {
  opacity:1;
}

.tag.new {
  background-color:#3273fa;
}

.tag.beta {
  background-color:#24a87b;
}

.tag.soon {
  background-color:#25254b;
}

.tag.soon sup {
  font-size:6px;
}

.side-nav_links {
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1 1;
  padding:0 12px 12px;
  overflow-y:overlay;
  overflow-x:hidden;
  font-family:Inter;
}

.side-nav_collapsed .side-nav_links::-webkit-scrollbar {
  display:none;
}

.side-nav_expanded .side-nav_links::-webkit-scrollbar {
  width:12px;
}

.side-nav_expanded .side-nav_links::-webkit-scrollbar-thumb {
  background-color:#cddcfe;
  border-radius:6px;
  border:2px solid #0d0d28;
  background-clip:padding-box;
}

.side-nav_expanded .side-nav_links::-webkit-scrollbar-track {
  background-color:#0d0d28;
  border-radius:0;
}

.side-nav_link {
  position:relative;
  display:flex;
  align-items:center;
  padding:10px;
  height:40px;
  border-radius:3px;
  overflow:hidden;
}

.side-nav_link:hover:not(.side-nav_link__active) {
  background-color:#070720;
}

.side-nav_link:hover:not(.side-nav_link__active) .side-nav_link__dropdown-button {
  background-color:#0d0d28;
}

.side-nav_theme__light .side-nav_link:hover:not(.side-nav_link__active) {
  background-color:#dfe7fc;
}

.side-nav_link__active {
  background-color:#3273fa;
}

.side-nav_link__active:hover {
  background-color:#1154df;
}

.side-nav_link__active:hover .side-nav_link__dropdown-button {
  background-color:#0540ba;
}

.side-nav_link__icon {
  position:absolute;
  left:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.side-nav_link__icon,
.side-nav_link__icon>img,
.side-nav_link__icon>svg {
  width:20px;
  height:20px;
}

.side-nav_link__icon>img g,
.side-nav_link__icon>img path,
.side-nav_link__icon>svg g,
.side-nav_link__icon>svg path {
  fill:#5c5c8e;
}

.side-nav_theme__light .side-nav_link__icon>img g,
.side-nav_theme__light .side-nav_link__icon>img path,
.side-nav_theme__light .side-nav_link__icon>svg g,
.side-nav_theme__light .side-nav_link__icon>svg path {
  fill:#5f648a;
}

.side-nav_link__active .side-nav_link__icon>svg g,
.side-nav_link__active .side-nav_link__icon>svg path {
  fill:#fff;
}

.side-nav_link__label {
  display:flex;
  margin-top: 3px;
  align-items:center;
  flex:1 1;
  padding-left:32px;
  font-size:16px;
  font-weight:600;
  color:#5c5c8e;
  white-space:nowrap;
  overflow:hidden;
  opacity:1;
  transition:opacity .15s;
}

.side-nav_collapsed .side-nav_link__label {
  opacity:0;
}

.side-nav_link__active .side-nav_link__label {
  color:#fff;
}

.side-nav_link__label .tag {
  margin-left:8px;
}

.side-nav_link__dropdown-button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:3px;
  background-color:#070720;
  opacity:1;
  transition:opacity .15s;
}

.side-nav_collapsed .side-nav_link__dropdown-button {
  opacity:0;
}

.side-nav_theme__light .side-nav_link__dropdown-button {
  background-color:#cddcfe;
}

.side-nav_link__dropdown-button svg {
  flex:0 0 8px;
  transition:rotate .2s;
}

.side-nav_link__dropdown-button svg g,
.side-nav_link__dropdown-button svg path {
  fill:#5c5c8e;
}

.side-nav_theme__light .side-nav_link__dropdown-button svg g,
.side-nav_theme__light .side-nav_link__dropdown-button svg path {
  fill:#383864;
}

.side-nav_link__active .side-nav_link__dropdown-button {
  background-color:#184fc1;
}

.side-nav_link__active .side-nav_link__dropdown-button svg g,
.side-nav_link__active .side-nav_link__dropdown-button svg path {
  fill:#fff;
}

.side-nav_dropdown-menu {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

.side-nav_dropdown-menu .side-nav_link {
  height:36px;
  background-color:unset;
}

.side-nav_dropdown-menu .side-nav_link__label {
  font-weight:600;
  font-size:14px;
  color:#cddcfe;
}

.side-nav_theme__light .side-nav_dropdown-menu .side-nav_link__label {
  color:#5f648a;
}

.side-nav_dropdown-menu .side-nav_link:hover {
  background-color:#070720;
}

.side-nav_dropdown-menu .side-nav_link:hover .side-nav_link__label,
.side-nav_dropdown-menu .side-nav_link__active .side-nav_link__label {
  color:#fff;
}

.side-nav_theme__light .side-nav_dropdown-menu .side-nav_link:hover .side-nav_link__label,
.side-nav_theme__light .side-nav_dropdown-menu .side-nav_link__active .side-nav_link__label {
  color:#383864;
}

@keyframes footer-overflow {
  0% {
    overflow:hidden;
  }
  99% {
    overflow:hidden;
  }
  to {
    overflow:visible;
  }
}

.side-nav_footer {
  position:relative;
  display:flex;
  align-items:center;
  margin-top:auto;
  height:62px;
  background-color:#191937;
}

.side-nav_theme__light .side-nav_footer {
  background:#dfe7fc !important;
}

.side-nav_collapsed .side-nav_footer {
  overflow:hidden;
}

.side-nav_expanded .side-nav_footer {
  animation:footer-overflow .15s forwards;
}

.side-nav_footer .overflow-container {
  position:relative;
  display:flex;
  align-items:center;
  padding:0 19px;
  flex:1 1;
}

.side-nav_footer .user {
  display:grid;
  grid-template-rows:1fr 1fr;
  grid-template-columns:26px 1fr;
  -moz-column-gap:8px;
  column-gap:8px;
  flex:1 1;
  padding-right:50px;
  height:32px;
}

.side-nav_footer .user_clickable:hover {
  cursor:pointer;
}

.side-nav_footer .user_clickable:hover .user_name {
  text-decoration:underline;
}

.side-nav_footer .user.guest .online-status_label {
  color:#565691;
}

.side-nav_footer .user .user_icon {
  position:relative;
  grid-area:1/1/3/2;
  display:flex;
  align-items:center;
}

.side-nav_footer .user .user_icon img,
.side-nav_footer .user .user_icon svg {
  border-radius:2px;
  height:26px;
  width:26px;
}

.side-nav_footer .user .user_icon .guest-icon {
  position:relative;
  background:#3273fa;
  padding:5px;
}

.side-nav_footer .user .user_name {
  grid-area:1/2/2/3;
  font-size:14px;
  font-weight:700;
  color:#fff;
  line-height:17px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:1;
  transition:opacity .15s;
}

.side-nav_collapsed .side-nav_footer .user .user_name {
  opacity:0;
}

.side-nav_theme__light .side-nav_footer .user .user_name {
  color:#383864;
}

.side-nav_footer .user .online-status_dot {
  position:absolute;
  right:-3px;
  bottom:-3px;
  z-index:1;
  height:12px;
  width:12px;
  border-radius:50%;
  border:2px solid #191937;
  background:#0ade96;
}

.side-nav_theme__light .side-nav_footer .user .online-status_dot {
  border:2px solid #dfe7fc;
}

.side-nav_footer .user .online-status_label {
  grid-area:2/2/3/3;
  font-weight:600;
  font-size:12px;
  line-height:15px;
  white-space:nowrap;
  opacity:1;
  transition:opacity .15s;
}

.side-nav_collapsed .side-nav_footer .user .online-status_label {
  opacity:0;
}

.side-nav_theme__light .side-nav_footer .user .online-status_label {
  color:#5f648a;
}

.side-nav_footer .footer_menu-container {
  position:absolute;
  right:22px;
  display:flex;
  align-items:center;
}

.side-nav_footer .footer_menu-container .footer_menu {
  position:absolute;
  bottom:calc(100% + 35px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  width:150px;
  background:#191937;
  box-shadow:0 4px 12px 1px rgba(7,7,32,.6);
  border-radius:2px;
}

.side-nav_theme__light .side-nav_footer .footer_menu-container .footer_menu {
  background:#dfe7fc;
  color:#5f648a;
  box-shadow:0 1px 4px rgba(14,37,84,.22);
}

.side-nav_footer .footer_menu-container .footer_link {
  display:flex;
  align-items:center;
  padding:0 18px;
  height:33px;
  font-size:12px;
  font-weight:500;
  line-height:15px;
  color:#cddcfe;
}

.side-nav_theme__light .side-nav_footer .footer_menu-container .footer_link {
  color:#5f648a;
}

.side-nav_footer .footer_menu-container .footer_link:hover {
  background-color:#313160;
  font-weight:700;
  cursor:pointer;
}

.side-nav_footer .footer_menu-container .three-dots {
  padding:2px;
  width:20px;
  height:20px;
  border-radius:1px;
}

.side-nav_theme__light .side-nav_footer .footer_menu-container .three-dots g,
.side-nav_theme__light .side-nav_footer .footer_menu-container .three-dots path {
  fill:#383864;
}

.side-nav_footer .footer_menu-container .three-dots:hover {
  background:#5c5c8e;
  border-radius:3px;
  cursor:pointer;
}

.side-nav_theme__light .side-nav_footer .footer_menu-container .three-dots:hover {
  background:#b2c5f1;
}

.side-nav_game-navigator {
  margin:0 12px;
}

.side-nav_game-navigator .game-selector {
  display:flex;
  gap:12px;
  transition:gap .15s;
}

.side-nav_game-navigator .game-selector>* {
  display:contents;
}

.side-nav_collapsed .side-nav_game-navigator .game-selector {
  gap:0;
}

.side-nav_theme__light .side-nav_game-navigator .game-selector {
  border-bottom:1px solid #dbdfef;
}

.side-nav_game-navigator .game-selector .game {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1;
  height:36px;
  border-radius:3px;
  opacity:1;
  overflow:hidden;
  transition:flex .15s,opacity .15s;
}

.side-nav_collapsed .side-nav_game-navigator .game-selector .game:not(.game_active) {
  flex:0 1;
  opacity:0;
}

.side-nav_game-navigator .game-selector .game.game_active,
.side-nav_game-navigator .game-selector .game:hover {
  background:#191937;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  cursor:pointer;
}

.side-nav_theme__light .side-nav_game-navigator .game-selector .game.game_active,
.side-nav_theme__light .side-nav_game-navigator .game-selector .game:hover {
  background:#dfe7fc;
  box-shadow:0 1px 4px rgba(14,37,84,.22);
}

.side-nav_game-navigator .game-selector .game svg {
  flex:0 0 20px;
}

.side-nav_game-navigator .game-selector .game_lol.game_active {
  background-color:#2c2326;
}

.side-nav_game-navigator .game-selector .game_lol.game_active:hover {
  background-color:#3f3337;
}

.side-nav_game-navigator .game-selector .game_valorant.game_active {
  background-color:#39142b;
}

.side-nav_game-navigator .game-selector .game_valorant.game_active:hover {
  background-color:#4b1e3a;
}

.side-nav_game-navigator .game-selector .game_wow.game_active {
  background-color:#381f16;
}

.side-nav_game-navigator .game-selector .game_wow.game_active:hover {
  background-color:#492c22;
}

.side-nav_game-navigator .game-navigator_link {
  position:relative;
  display:flex;
  align-items:center;
  padding:10px;
  height:40px;
  border-radius:3px;
  background-color:#2c2326;
  overflow:hidden;
}

.side-nav_theme__light .side-nav_game-navigator .game-navigator_link {
  background:linear-gradient(.746turn,rgba(227,178,90,.3),rgba(191,146,62,.3)),#f4f7ff;
}

.side-nav_game-navigator .game-navigator_link__icon {
  position:absolute;
  left:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
}

.side-nav_game-navigator .game-navigator_link__icon svg {
  width:20px;
  height:20px;
}

.side-nav_game-navigator .game-navigator_link__label {
  flex:1 1;
  padding-left:32px;
  font-size:16px;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  opacity:1;
  transition:opacity .15s;
}

.side-nav_collapsed .side-nav_game-navigator .game-navigator_link__label {
  opacity:0;
}

.side-nav_theme__light .side-nav_game-navigator .game-navigator_link__label {
  color:#383864;
}

.side-nav_game-navigator .game-navigator_link__dropdown-button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:3px;
  background-color:rgba(7,7,32,.2);
}

.side-nav_theme__light .side-nav_game-navigator .game-navigator_link__dropdown-button {
  background-color:rgba(191,146,62,.6);
}

.side-nav_game-navigator .game-navigator_link__dropdown-button svg {
  flex:0 0 8px;
  transition:rotate .2s;
}

.side-nav_game-navigator .game-navigator_link__dropdown-button svg g,
.side-nav_game-navigator .game-navigator_link__dropdown-button svg path {
  fill:#fff;
}

@media(max-width:400px) {
  #side-nav-container.xxxs\:side-nav_mobile#side-nav-container {
    content:"mobile";
  }
  #side-nav-container.xxxs\:side-nav_mobile .side-nav_head {
    display:none;
  }
  #side-nav-container.xxxs\:side-nav_mobile .side-nav_footer .footer_menu-container .footer_menu {
    left:unset;
    transform:unset;
    right:-9px;
  }
  #side-nav-container.xxxs\:side-nav_mobile.side-nav_expanded .side-nav {
    width:100vw;
  }
  #side-nav-container.xxxs\:side-nav_mobile.side-nav_collapsed .side-nav {
    width:0;
    overflow:hidden;
  }
}

@media(max-width:600px) {
  #side-nav-container.xxs\:side-nav_mobile#side-nav-container {
    content:"mobile";
  }
  #side-nav-container.xxs\:side-nav_mobile .side-nav_head {
    display:none;
  }
  #side-nav-container.xxs\:side-nav_mobile .side-nav_footer .footer_menu-container .footer_menu {
    left:unset;
    transform:unset;
    right:-9px;
  }
  #side-nav-container.xxs\:side-nav_mobile.side-nav_expanded .side-nav {
    width:100vw;
  }
  #side-nav-container.xxs\:side-nav_mobile.side-nav_collapsed .side-nav {
    width:0;
    overflow:hidden;
  }
}

@media(max-width:900px) {
  #side-nav-container.xs\:side-nav_mobile#side-nav-container {
    content:"mobile";
  }
  #side-nav-container.xs\:side-nav_mobile .side-nav_head {
    display:none;
  }
  #side-nav-container.xs\:side-nav_mobile .side-nav_footer .footer_menu-container .footer_menu {
    left:unset;
    transform:unset;
    right:-9px;
  }
  #side-nav-container.xs\:side-nav_mobile.side-nav_expanded .side-nav {
    width:100vw;
  }
  #side-nav-container.xs\:side-nav_mobile.side-nav_collapsed .side-nav {
    width:0;
    overflow:hidden;
  }
}

@media(max-width:1140px) {
  #side-nav-container.sm\:side-nav_mobile#side-nav-container {
    content:"mobile";
  }
  #side-nav-container.sm\:side-nav_mobile .side-nav_head {
    display:none;
  }
  #side-nav-container.sm\:side-nav_mobile .side-nav_footer .footer_menu-container .footer_menu {
    left:unset;
    transform:unset;
    right:-9px;
  }
  #side-nav-container.sm\:side-nav_mobile.side-nav_expanded .side-nav {
    width:100vw;
  }
  #side-nav-container.sm\:side-nav_mobile.side-nav_collapsed .side-nav {
    width:0;
    overflow:hidden;
  }
}

@media(max-width:1360px) {
  #side-nav-container.md\:side-nav_mobile#side-nav-container {
    content:"mobile";
  }
  #side-nav-container.md\:side-nav_mobile .side-nav_head {
    display:none;
  }
  #side-nav-container.md\:side-nav_mobile .side-nav_footer .footer_menu-container .footer_menu {
    left:unset;
    transform:unset;
    right:-9px;
  }
  #side-nav-container.md\:side-nav_mobile.side-nav_expanded .side-nav {
    width:100vw;
  }
  #side-nav-container.md\:side-nav_mobile.side-nav_collapsed .side-nav {
    width:0;
    overflow:hidden;
  }
}

@media(max-width:1470px) {
  #side-nav-container.lg\:side-nav_mobile#side-nav-container {
    content:"mobile";
  }
  #side-nav-container.lg\:side-nav_mobile .side-nav_head {
    display:none;
  }
  #side-nav-container.lg\:side-nav_mobile .side-nav_footer .footer_menu-container .footer_menu {
    left:unset;
    transform:unset;
    right:-9px;
  }
  #side-nav-container.lg\:side-nav_mobile.side-nav_expanded .side-nav {
    width:100vw;
  }
  #side-nav-container.lg\:side-nav_mobile.side-nav_collapsed .side-nav {
    width:0;
    overflow:hidden;
  }
}

@media(max-width:9999999px) {
  #side-nav-container.xl\:side-nav_mobile#side-nav-container {
    content:"mobile";
  }
  #side-nav-container.xl\:side-nav_mobile .side-nav_head {
    display:none;
  }
  #side-nav-container.xl\:side-nav_mobile .side-nav_footer .footer_menu-container .footer_menu {
    left:unset;
    transform:unset;
    right:-9px;
  }
  #side-nav-container.xl\:side-nav_mobile.side-nav_expanded .side-nav {
    width:100vw;
  }
  #side-nav-container.xl\:side-nav_mobile.side-nav_collapsed .side-nav {
    width:0;
    overflow:hidden;
  }
}

:root {
  --side-nav-bg:#17172e;
  --side-nav-link-active:#3273fa;
  z-index:0;
}

.ugg-theme_light {
  --side-nav-bg:#f4f7ff;
  --side-nav-link-active:#fff;
}

#side-nav-container {
  position:fixed;
  top:31px;
  bottom:0;
  left:0;
  z-index:9999999999;
}

#side-nav-container .masthead-ugg-search-bar {
  display:none;
}

@media(max-width:1140px) {
  #side-nav-container.sm\:side-nav_mobile .masthead-ugg-search-bar {
    display:flex;
    position:relative;
    z-index:100;
    margin:0 12px 18px;
  }
}

.title-header h1 {
  font-family:Barlow;
  font-size:36px;
  line-height:34px;
  display:flex;
  align-items:center;
  margin:0;
}

.title-header h1,
.title-header h1 .title-header_main {
  font-weight:600;
  color:#fff;
}

.title-header h1 .title-header_secondary {
  color:#cddcfe;
  font-weight:400;
}

.title-header h2 {
  font-weight:500;
  font-size:18px;
  color:#cddcfe;
  margin-top:12px;
  margin-bottom:0;
  letter-spacing:0;
}

.title-header h2 span:not(.forward-slash) {
  color:#cddcfe;
}

.title-header .header-patch {
  display:flex;
  align-items:center;
  margin-left:10px;
  height:36px;
  padding:10px 12px;
  border-radius:3px;
  background-color:#191937;
  font-size:14px;
  font-weight:700;
}

@supports not selector(::-webkit-scrollbar) {
  * {
  scrollbar-width:thin;
  scrollbar-color:#cddcfe #25254b;
}
}

::-webkit-scrollbar {
  width:14px;
  height:14px;
}

::-webkit-scrollbar-track {
  background-color:#25254b;
  box-shadow:inset 0 0 99px #25254b;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border-radius:7px;
  border:4px solid transparent;
  background-clip:padding-box;
}

::-webkit-scrollbar-thumb {
  background-color:#5c5c8e;
}

::-webkit-scrollbar-thumb:hover {
  background-color:#cddcfe;
}

::-webkit-scrollbar-corner {
  background-color:transparent;
}

.items-home .items-container .items-details .items-details-container .items-details-section .stats-list :not(:last-child) {
    margin-bottom: 13px;
}
a,
a:active,
a:focus,
a:hover,
a:visited {
  text-decoration:none;
  outline:none;
  color: #fff;
}

.landing-page-container {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.landing-page-container.landing-page_loading {
  justify-content:center;
  height:calc(100vh - 65px);
}

.landing-page-container .landing-header {
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
}

.landing-page-container .landing-header .YIR-Banner {
  height:85px;
  width:100%;
  box-shadow:0 1px 8px 2px rgba(7,7,32,.64);
  font-family:Barlow;
  font-size:30px;
  font-weight:600;
  font-style:normal;
  letter-spacing:normal;
  line-height:normal;
  text-align:left;
  text-transform:uppercase;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:#3273fa;
  cursor:pointer;
}

.landing-page-container .landing-header .YIR-Banner img {
  height:40px;
  width:40px;
}

.landing-page-container .landing-header .YIR-Banner .divider {
  width:1px;
  height:36px;
  background-color:#fff;
  margin:0 24px;
}

.landing-page-container .landing-header .YIR-Banner .basic-text {
  color:#fff;
  font-size:30px;
  font-weight:500;
}

.landing-page-container .landing-header .landing-text-container {
  display:flex;
  width:1025px;
  padding-left:75px;
  justify-content:space-between;
}

.landing-page-container .landing-header .landing-text-container.YIR-container {
  padding-left:0;
  width:839px;
}

.landing-page-container .landing-header .landing-text-container .small-ugg-logo {
  height:36px;
  margin-left:4px;
  margin-bottom:5px;
}

.landing-page-container .landing-header .landing-text-container .UGG-logo {
  margin-bottom:70px;
}

.landing-page-container .landing-header .landing-text-container .YIR-icon {
  width:100px;
  height:100px;
}

.landing-page-container .landing-header .landing-text-container .YIR-text {
  font-size:38px;
  font-weight:500;
  font-family:Barlow;
  width:515px;
  color:#fff;
}

.landing-page-container .landing-header .header {
  width:100%;
  margin-top:0;
  margin-bottom:30px;
  font-size:55px;
  line-height:60px;
  font-style:normal;
  font-weight:700;
}

.landing-page-container .landing-header .sub-header {
  font-size:13px;
  font-weight:700;
}

.landing-page-container .landing_account-features {
  display:flex;
  margin-top:50px;
  margin-bottom:30px;
  width:100%;
  flex-direction:column;
}

.landing-page-container .landing_account-features .bottom {
  display:flex;
}

.landing-page-container .landing_account-features .landing-signup-cta {
  margin-top:50px;
  width:240px;
  height:40px;
  font-size:14px;
}

.landing-page-container .landing_account-features .landing-chibi {
  width:440px;
  height:337px;
}

.landing-page-container .landing_account-features .header {
  margin-bottom:50px;
  font-size:28px;
  font-weight:700;
}

.landing-page-container .landing_account-features .header .title {
  font-size:60px;
  font-weight:700;
}

.landing-page-container .landing_account-features .header>div:first-child {
  margin-bottom:8px;
}

.landing-page-container .landing_account-features .features-list .account-feature {
  display:flex;
  align-items:center;
}

.landing-page-container .landing_account-features .features-list .account-feature:not(:last-child) {
  margin-bottom:40px;
}

.landing-page-container .landing_account-features .features-list .account-feature .feature-icon_container {
  margin-right:20px;
  width:30px;
  height:30px;
}

.landing-page-container .landing_account-features .features-list .account-feature .feature-text {
  font-size:20px;
  color:hsla(0,0%,100%,.8);
}

.ugg-theme_light .landing-page-container .landing_account-features .features-list .account-feature .feature-text {
  color:rgba(0,0,0,.8);
}

.landing-page-container .landing_account-features .features-list .account-feature .feature-text>span:first-child {
  font-weight:500;
  color: #fff;
}

.landing-page-container.landing-page_yir {
  display:flex;
  width:100%;
  height:calc(100vh - 65px);
  background-color:#0b0b23;
  background-image:url(https://static.bigbrain.gg/assets/lol/landing/year_in_review/year_in_review_landing_bg.jpg);
  background-position:50% 0;
  background-repeat:no-repeat;
}

.landing-page-container.landing-page_yir .landing-page_yir-content {
  display:flex;
  align-items:center;
  margin-top:170px;
}

.landing-page-container.landing-page_yir .landing-page_yir-content .yir-cta .yir-message {
  display:flex;
  flex-direction:column;
  margin-top:35px;
  line-height:33px;
  font-size:22px;
  color:#0b0b23;
}

.landing-page-container.landing-page_yir .landing-page_yir-content .yir-cta .yir-countdown {
  position:relative;
  right:19px;
  display:grid;
  grid-template-columns:repeat(4,85px);
  grid-gap:2px;
  margin-top:120px;
  background-color:#2c2c40;
}

.landing-page-container.landing-page_yir .landing-page_yir-content .yir-cta .yir-countdown>.countdown-time {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-color:#0b0b23;
}

.landing-page-container.landing-page_yir .landing-page_yir-content .yir-cta .yir-countdown>.countdown-time .countdown-value {
  font-family:Barlow;
  font-size:30px;
  font-weight:600;
  color:#dba54b;
}

.landing-page-container.landing-page_yir .landing-page_yir-content .yir-cta .yir-countdown>.countdown-time .countdown-label {
  margin-top:14px;
  font-size:16px;
  color:#fff;
}

.landing-page-container.landing-page_yir .landing-page_yir-content .yir-cta .yir-btn {
  margin-top:54px;
  width:321px;
  height:50px;
  font-size:20px;
}

.landing-page-container.landing-page_yir .landing-page_yir-content .yir-preview {
  position:relative;
  margin-left:140px;
  width:553px;
  height:593px;
  background-image:linear-gradient(34deg,rgba(80,95,110,.14),rgba(140,166,187,.14) 27%,rgba(116,150,181,.14) 68%,rgba(205,220,254,.14));
  background-color:#0b0b23;
}

.landing-page-container.landing-page_yir .landing-page_yir-content .yir-preview video {
  position:relative;
  width:100%;
}

.landing-page-container.landing-page_yir .landing-page_yir-content .yir-preview .box-glow {
  position:absolute;
  top:50%;
  left:50%;
  z-index:0;
  width:590px;
  height:510px;
  border-radius:200px;
  background-color:#3273fa;
  opacity:.58;
  filter:blur(40px);
  transform:translate(-50%,-50%);
}

.content-title {
  margin-bottom:24px;
  font-size:14px;
}

.content-title strong:first-of-type {
  color: #fff;
}

.content-title span,
.content-title strong:nth-of-type(2) {
  color: #92929d;
}

.view-btn {
  height:16px;
  padding:9px 11px 11px;
  border:1px solid  #92929d;
  border-radius:8px;
  font-size:11px;
  color: #fff;
}

.view-btn:hover {
  border:1px solid #08a6ff;
  background-color: #08a6ff;
}

.landing-page-container_mobile {
  position:relative;
  text-align:center;
  color:#fff;
}

.landing-page-container_mobile .grid-block {
  display:block;
}

.landing-page-container_mobile .content-side-padding-region {
  padding-left:5vw;
  padding-right:5vw;
}

.landing-page-container_mobile .grid-block-header {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  height:40px;
  padding:0 24px;
  border:none;
  background-color:#191937;
  text-decoration:none;
}

.landing-page-container_mobile .grid-block-header .title {
  display:flex;
  justify-content:center;
  align-content:center;
  font-size:12px;
}

.landing-page-container_mobile .grid-block-header .title .role-icon {
  margin-right:10px;
}

.landing-page-container_mobile .grid-block-header .title .role-icon svg {
  width:24px;
  height:24px;
}

.landing-page-container_mobile .grid-block-header .title h2 {
  margin:0;
  font-size:16px;
  font-weight:700;
}

.landing-page-container_mobile .grid-block-content {
  padding:10px 15px 16px;
  background-color:#191937;
  border:none;
  border-radius:6px;
}

.landing-page-container_mobile .background-splashart {
  width:100%;
  height:auto;
}

.landing-page-container_mobile .all-landing-page-content {
  width:100%;
}

.landing-page-container_mobile .all-landing-page-content .landing-background {
  display:flex;
  justify-content:center;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-4;
  height:100vh;
}

.landing-page-container_mobile .all-landing-page-content .landing-background>.overlay {
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:radial-gradient(133.49% 100% at 50% 0,rgba(7,7,32,.5) 0,#070720 100%);
}

.landing-page-container_mobile .all-landing-page-content .landing-background>video {
  position:absolute;
  z-index:-4;
  min-width:1920px;
  width:100%;
}

.landing-page-container_mobile .all-landing-page-content .landing-background .background-image {
  background-image:url(https://khanhhy.vn/wp-content/img/lien-quan/bg.png);
  background-size:cover;
  background-position:50%;
  width:100vw;
}

.landing-page-container_mobile .all-landing-page-content .landing-header {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
}

.landing-page-container_mobile .all-landing-page-content .landing-header .header {
  width:60%;
  font-family:Barlow;
  font-style:normal;
  font-weight:600;
  line-height:32px;
  font-size:21px;
  text-align:center;
  text-transform:uppercase;
  margin-top:20px;
  margin-bottom:25px;
}

.landing-page-container_mobile .all-landing-page-content .landing-header .ugg-logo {
  height:50px;
  margin-top:32px;
  cursor:pointer;
}

.landing-page-container_mobile .all-landing-page-content .landing-header .container1 {
  position:relative;
  text-align:center;
  color:#fff;
  width:100%;
  height:auto;
}

.landing-page-container_mobile .all-landing-page-content .landing-header .container1 .background-gradient {
  background:linear-gradient(179.86deg,rgba(7,7,32,0) .12%,#070720 87.13%),linear-gradient(227.82deg,rgba(7,7,32,0) 7.35%,#070720 92.47%);
  position:absolute;
  bottom:8px;
  left:16px;
  width:100%;
}

.landing-page-container_mobile .testimonial {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-top:50px;
  height:300px;
  background-color:#17172e;
  overflow:hidden;
}

.landing-page-container_mobile .testimonial>* {
  z-index:1;
}

.landing-page-container_mobile .testimonial .quote {
  margin:34px 0 24px;
  font-size:14px;
  font-weight:700;
  text-align:center;
}

.landing-page-container_mobile .testimonial .author {
  font-size:12px;
}

.landing-page-container_mobile .game-switcher {
  display:flex;
  gap:12px;
  padding-top:36px;
  position:relative;
  justify-content:center;
}

.landing-page-container_mobile .game-switcher #aov a {
  background-color:#191937;
}

.landing-page-container_mobile .game-switcher #aov a:hover {
  background-color:#25254b;
}

.landing-page-container_mobile .game-switcher #wow:hover svg path {
  fill:#ff9b00;
}

.landing-page-container_mobile .game-switcher #val:hover svg path {
  fill:#ff4655;
}

.landing-page-container_mobile .game-switcher .switch-icon-wrapper {
  display:flex;
  flex-direction:column;
  align-items:center;
}

.landing-page-container_mobile .game-switcher .game-switch-icon {
  display:flex;
  justify-content:center;
  align-items:center;
  width:60px;
  height:60px;
  background-color:#070720;
  border-radius:3px;
}

.landing-page-container_mobile .game-switcher .game-switch-icon.active,
.landing-page-container_mobile .game-switcher .game-switch-icon svg {
  width:32px;
  height:32px;
}

.landing-page-container_mobile .game-switcher .new-icon {
  width:32px;
  background-color:#3273fa;
  color:#fff;
}

.landing-page-container_mobile .game-switcher .new-icon,
.landing-page-container_mobile .game-switcher .soon-icon {
  display:flex;
  justify-content:center;
  align-items:center;
  height:16px;
  margin-top:6px;
  font-weight:700;
  font-size:10px;
  border-radius:2px;
  padding:2px 4px;
  line-height:12.1px;
}

.landing-page-container_mobile .game-switcher .soon-icon {
  background-color:#25254b;
  color:#cddcfe;
}

.landing-page-container_mobile {
  flex:1 1;
  padding-bottom:24px;
  width:100%;
}

.landing-page-container_mobile .autosuggest-container {
  display:flex;
  align-items:center;
  position:relative;
  height:60px;
  width:calc(100vw - 48px);
  margin-left:calc(-5vw + 24px);
  border-radius:3px;
}

.landing-page-container_mobile .autosuggest-container .landing-region-selector {
  position:absolute;
  z-index:1;
}

.landing-page-container_mobile .autosuggest-container .fancy-suggest {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  z-index:100;
  display:flex;
  align-items:center;
  margin-left:8px;
  font-size:14px;
  font-weight:700;
  color:#92929d;
  pointer-events:none;
  white-space:nowrap;
}

.landing-page-container_mobile .autosuggest-container .react-autosuggest__container {
  flex:1 1;
  height:100%;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
}

.landing-page-container_mobile .autosuggest-container .react-autosuggest__container.react-autosuggest__container_placeholder {
  background-color:#fff;
}

.landing-page-container_mobile .autosuggest-container input {
  width:100%;
  height:100%;
  padding-left:79px;
  font-size:16px;
  border-radius:5px;
  border:none;
  color:#000;
  background-color:#fff;
  font-family:Inter,sans-serif;
  font-style:normal;
  font-weight:400;
}

.landing-page-container_mobile .autosuggest-container .autosuggest-button {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  width:60px;
  border-radius:0 3px 3px 0;
  background-color:#fff;
}

.landing-page-container_mobile .autosuggest-container .autosuggest-button svg {
  height:24px;
  width:24px;
}

.landing-page-container_mobile .autosuggest-container .autosuggest-button svg g,
.landing-page-container_mobile .autosuggest-container .autosuggest-button svg path {
  fill:#626696;
}

.landing-page-container_mobile .autosuggest-container .react-autosuggest__suggestions-container {
  position:relative;
  left:0;
  right:0;
  z-index:100;
  width:calc(100% + 46px);
  color:#4e4f60;
  background-color:#fff;
  margin-top:12px;
}

.landing-page-container_mobile .autosuggest-container .react-autosuggest__suggestions-container .react-autosuggest__section-container {
  font-size:12px;
}

.landing-page-container_mobile .autosuggest-container .react-autosuggest__suggestions-container ul {
  padding-left:0;
}

.landing-page-container_mobile .autosuggest-container .react-autosuggest__suggestions-container ul li {
  padding:4px 8px;
  list-style:none;
}

.landing-page-container_mobile .autosuggest-container .react-autosuggest__suggestions-container ul li:hover {
  background-color:#e3e3eb;
}

.landing-page-container_mobile .autosuggest-container .react-autosuggest__suggestions-container ul li .render-suggestion {
  position:relative;
  display:flex;
  align-items:center;
}

.landing-page-container_mobile .autosuggest-container .react-autosuggest__suggestions-container ul li .render-suggestion .suggest-text {
  margin-left:10px;
}

.landing-page-container_mobile .autosuggest-container .react-autosuggest__suggestions-container ul li .render-suggestion .page-type {
  position:absolute;
  top:2px;
  left:-8px;
}

.landing-page-container_mobile .autosuggest-container::-moz-placeholder {
  color:#8a8ebb;
}

.landing-page-container_mobile .autosuggest-container::placeholder {
  color:#8a8ebb;
}

.landing-page-container_mobile .game-switcher-dropdown {
  position:absolute;
  cursor:pointer;
  margin-left:12px;
  z-index:1;
}

.landing-page-container_mobile .game-switcher-dropdown .main-game {
  display:flex;
  align-items:center;
  height:36px;
  width:56px;
  border-radius:1px;
  background-color:#e7eeff;
  color:#626696;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-size:14px;
  line-height:17px;
}

.landing-page-container_mobile .game-switcher-dropdown .game-dropdowns {
  display:flex;
  flex-direction:column;
  margin-top:6px;
  position:absolute;
}

.landing-page-container_mobile .game-switcher-dropdown .game-dropdowns .indv-game {
  display:flex;
  align-items:center;
  height:32px;
  width:56px;
  background-color:#e7eeff;
  color:#626696;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-size:14px;
  line-height:17px;
  justify-content:center;
}

.landing-page-container_mobile .game-switcher-dropdown .game-dropdowns .indv-game.first {
  border-top-left-radius:1px;
  border-top-right-radius:1px;
}

.landing-page-container_mobile .game-switcher-dropdown .game-dropdowns .indv-game.last {
  border-bottom-left-radius:1px;
  border-bottom-right-radius:1px;
}

.landing-page-container_mobile .game-switcher-dropdown .game-dropdowns .indv-game svg {
  height:20px;
  width:20px;
  margin:0 8px;
}

.landing-page-container_mobile .game-switcher-dropdown .game-dropdowns .indv-game:hover {
  background:#c9d5f2;
}

.landing-page-container_mobile .all-region-dropdown {
  display:flex;
  flex-direction:column;
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  border-radius:3px;
  height:258px;
  overflow:scroll;
  margin-top:12px;
  margin-left:calc(-5vw + 24px);
  width:calc(100vw - 48px);
}

.landing-page-container_mobile .all-region-dropdown .region-header {
  background-color:#f4f7ff;
  height:28px;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-size:10px;
  color:#383864;
  text-align:left;
  line-height:28px;
}

.landing-page-container_mobile .all-region-dropdown .region-header span {
  margin-left:8px;
}

.landing-page-container_mobile .all-region-dropdown .indv-region-selector {
  display:flex;
  align-items:center;
  min-height:28px;
  font-family:Inter;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:20px;
  color:#5f5f7b;
}

.landing-page-container_mobile .all-region-dropdown .indv-region-selector:hover {
  background:#e7eeff;
  cursor:pointer;
}
.desktop-app-landing-page {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-height:calc(100vh - 1px);
  padding-top:65px;
  overflow:hidden;
}

.desktop-app-landing-page .landing-background {
  display:flex;
  justify-content:center;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-4;
  height:100vh;
}

.desktop-app-landing-page .landing-background>.overlay {
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:radial-gradient(133.49% 100% at 50% 0,rgba(7,7,32,.5) 0,#070720 100%);
}

.desktop-app-landing-page .landing-background>video {
  position:absolute;
  z-index:-4;
  min-width:1920px;
  width:100%;
}

.desktop-app-landing-page .landing-background .background-image {
  background-image:url(https://khanhhy.vn/wp-content/img/lien-quan/bg.png);
  background-size:cover;
  background-position:50%;
  width:100vw;
}

.desktop-app-landing-page .landing-page-layout-container {
  align-items:center;
  display:flex;
  flex-direction:column;
  margin:250px 10px 0;
  max-width:1016px;
  width:100%;
}

.desktop-app-landing-page .search-container {
  height:60px;
  max-width:700px;
  position:relative;
  width:100%;
  z-index:10;
}

.desktop-app-landing-page .desktop-app-landing-page_header {
  align-items:center;
  display:flex;
  gap:24px;
  justify-content:space-between;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:60px;
}

.desktop-app-landing-page .desktop-app-landing-page_header>img {
  height:80px;
}

.desktop-app-landing-page .desktop-app-landing-page_header .header-right-side {
  display:flex;
  flex-direction:column;
  font-size:24px;
  font-weight:700;
  gap:12px;
}

.desktop-app-landing-page .desktop-app-landing-page_header .header-right-side .download-button-container {
  align-items:center;
  display:flex;
  flex-direction:row nowrap;
}

.desktop-app-landing-page .desktop-app-landing-page_header .header-right-side .download-button-container .download-btn {
  min-height:36px;
  height:36px;
  width:150px;
}

.desktop-app-landing-page .desktop-app-landing-page_header .header-right-side .download-button-container .riot-logo {
  margin:0 12px 0 18px;
  min-width:24px;
  width:24px;
}

.desktop-app-landing-page .desktop-app-landing-page_header .header-right-side .download-button-container p {
  color:#cddcfe;
  font-size:12px;
  font-weight:400;
}

.desktop-app-landing-page .featured-product-container {
  align-items:center;
  display:flex;
  flex-flow:row nowrap;
  gap:12px;
  justify-content:space-between;
  margin-top:180px;
  max-width:1016px;
  width:100%;
}

@media(max-width:1139px) {
  .desktop-app-landing-page .featured-product-container {
    padding:0 12px;
  }
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side {
  display:flex;
  flex-direction:column;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side>p {
  font-size:24px;
  font-weight:700;
  margin-bottom:24px;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .logo-and-title {
  align-items:center;
  display:flex;
  flex-flow:row nowrap;
  font-size:36px;
  font-weight:700;
  gap:12px;
  margin-bottom:12px;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .logo-and-title .game-logo-container {
  align-items:center;
  background:#191937;
  border-radius:3px;
  display:flex;
  height:26px;
  justify-content:center;
  min-width:26px;
  width:26px;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .logo-and-title .game-logo-container .game-logo {
  min-width:18px;
  width:18px;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .subtext {
  color:#cddcfe;
  font-size:18px;
  font-weight:400;
  margin-bottom:36px;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .buttons-container {
  display:flex;
  flex-flow:row nowrap;
  gap:12px;
  font-size:13px;
  font-weight:700;
  margin-bottom:18px;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .buttons-container .download-icon {
  min-width:18px;
  width:18px;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .buttons-container .promo-button {
  align-items:center;
  border-radius:3px;
  display:flex;
  flex-flow:row nowrap;
  gap:8px;
  height:36px;
  justify-content:center;
  width:150px;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .buttons-container .promo-button.download-button {
  background-color:#ff4e50;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .buttons-container .promo-button.download-button:hover {
  background-color:#ff3a3c;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .buttons-container .promo-button.see-features-button {
  background-color:#3273fa;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .buttons-container .promo-button.see-features-button:hover {
  background-color:#2963da;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .riot-compliance-container {
  align-items:center;
  color:#5c5c8e;
  display:flex;
  flex-flow:row nowrap;
  font-size:12px;
  font-weight:400;
  gap:12px;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .riot-compliance-container .riot-logo {
  min-width:24px;
  width:24px;
}

.desktop-app-landing-page .featured-product-container .featured-product-left-side .riot-compliance-container .riot-logo path {
  fill:#5c5c8e;
}

.desktop-app-landing-page .featured-product-container .featured-product-right-side {
  width:602px;
}

.desktop-app-landing-page .featured-product-container .featured-product-right-side video {
  border-radius:6px;
}

.desktop-app-landing-page .game-library-container {
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  font-size:24px;
  font-weight:700;
  gap:36px;
  margin-top:80px;
  max-width:1016px;
  width:100%;
}

@media(max-width:1139px) {
  .desktop-app-landing-page .game-library-container {
    padding:0 12px;
  }
}

.desktop-app-landing-page .game-library-container .all-games {
  display:grid;
  font-size:14px;
  gap:18px;
  grid-template-columns:repeat(5,1fr);
  row-gap:24px;
}

@media(max-width:1139px) {
  .desktop-app-landing-page .game-library-container .all-games {
    grid-template-columns:repeat(4,1fr);
  }
}

.desktop-app-landing-page .game-library-container .all-games .game-container {
  position:relative;
}

.desktop-app-landing-page .game-library-container .all-games .game-container .game-tag {
  border-radius:1px;
  box-shadow:0 1px 1px 0 rgba(0,0,0,.4);
  font-size:10px;
  font-weight:700;
  padding:2px 4px;
  position:absolute;
  right:-6px;
  top:6px;
  z-index:1;
}

.desktop-app-landing-page .game-library-container .all-games .game-container .img-container {
  background-size:cover;
  background-repeat:no-repeat;
  border-radius:6px;
  flex-shrink:0;
  height:250px;
  position:relative;
  width:189px;
}

.desktop-app-landing-page .game-library-container .all-games .game-container .img-container .hover-gloss {
  background:hsla(0,0%,100%,.5);
  border-radius:6px;
  bottom:0;
  display:none;
  height:100%;
  left:0;
  mix-blend-mode:soft-light;
  position:absolute;
  right:0;
  top:0;
  width:100%;
}

.desktop-app-landing-page .game-library-container .all-games .game-container .img-container .hover-gloss:last-child {
  left:1px;
  width:99%;
}

.desktop-app-landing-page .game-library-container .all-games .game-container .img-container:hover .hover-gloss {
  display:block;
}

.desktop-app-landing-page .game-library-container .all-games .game-container .game-title {
  margin-top:8px;
  text-align: center;
}
.large-search .react-autosuggest__container {
  flex:1 1;
}

.large-search .react-autosuggest__container.react-autosuggest__container_placeholder {
  height:60px;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
  background-color:#fff;
}

.large-search .react-autosuggest__input {
  padding:10px 60px 10px 18px;
  width:calc(100% - 36px);
  height:60px;
  border:none;
  font-size:16px;
  font-weight:500;
  line-height:16px;
  border-radius:3px;
  background-color:#fff;
}

.ugg-theme_light .large-search .react-autosuggest__input {
  border:1px solid #2c2c40;
}

.large-search .autosuggest-container {
  position:relative;
  height:60px;
}

.large-search .autosuggest-container .modal-filter .select_modal .select_modal__toggle {
  border:0;
}

.large-search .autosuggest-container .modal-filter:hover .show-all-container {
  background-color:#eff4ff;
  border-radius:30px 0 0 30px;
}

.large-search .autosuggest-container .modal-filter .region-selector-button {
  height:60px !important;
  border-radius:30px 0 0 30px !important;
  background-color:#f4f7ff !important;
  width:100px;
}

.large-search .autosuggest-container .modal-filter .region-selector-button:hover {
  background-color:#eff4ff !important;
}

.large-search .autosuggest-container .modal-filter .region-selector-button .arrow-icon svg g,
.large-search .autosuggest-container .modal-filter .region-selector-button .arrow-icon svg path {
  fill:#92929d;
}

.large-search .autosuggest-container .modal-filter .select_modal__modal-window.region-selector-modal {
  top:60px;
  left:20px;
}

.large-search .outer-search-tag {
  position:relative;
  top:-12px;
  z-index:10;
}

.large-search .outer-search-tag .search-tag {
  position:absolute;
  width:100px;
  height:25px;
  border-radius:12px;
  border:1px solid #bbbedb;
  background-color:#f4f7ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Helvetica Neue,Roboto,Arial;
  color:#5f5f7b;
  font-size:18px;
  font-weight:400;
}

.large-search .fancy-suggest {
  pointer-events:none;
  position:absolute;
  top:0;
  left:60px;
  margin-left:0;
  font-size:20px;
  font-weight:700;
  color:#92929d;
  z-index:10;
  height:100%;
  display:flex;
  align-items:center;
}

.large-search .fancy-suggest.clear {
  opacity:0;
}

.large-search .fancy-suggest-fade-in {
  -webkit-animation:animateWord 6.6s linear;
}

.large-search .autosuggest-button {
  height:100%;
  border-radius:3px;
  width:51px;
}

.large-search .autosuggest-button div {
  pointer-events:none;
}

.large-search .autosuggest-button .react-svg,
.large-search .autosuggest-button svg {
  height:30px;
  width:30px;
  pointer-events:none;
}

.large-search .region-search {
  display:flex;
  position:relative;
  align-items:center;
  left:1px;
}

.large-search .region-search svg {
  height:24px;
  width:24px;
  right:20px;
  z-index:2;
  position:relative;
  margin-left:31px;
}

.large-search .game-switcher-dropdown {
  position:absolute;
  cursor:pointer;
  margin-left:12px;
  z-index:1;
}

.large-search .game-switcher-dropdown .main-game {
  display:flex;
  align-items:center;
  height:36px;
  width:140px;
  border-radius:1px;
  background-color:#e7eeff;
  color:#626696;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-size:14px;
  line-height:17px;
}

.large-search .game-switcher-dropdown .game-dropdowns {
  display:flex;
  flex-direction:column;
  margin-top:6px;
  position:absolute;
}

.large-search .game-switcher-dropdown .game-dropdowns .indv-game {
  display:flex;
  align-items:center;
  height:32px;
  width:140px;
  background-color:#e7eeff;
  color:#626696;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-size:14px;
  line-height:17px;
}

.large-search .game-switcher-dropdown .game-dropdowns .indv-game.first {
  border-top-left-radius:1px;
  border-top-right-radius:1px;
}

.large-search .game-switcher-dropdown .game-dropdowns .indv-game.last {
  border-bottom-left-radius:1px;
  border-bottom-right-radius:1px;
}

.large-search .game-switcher-dropdown .game-dropdowns .indv-game svg {
  height:20px;
  width:20px;
  margin:0 8px;
}

.large-search .game-switcher-dropdown .game-dropdowns .indv-game:hover {
  background:#c9d5f2;
}

.large-search .react-autosuggest__suggestions-container--open {
  width:calc(100% + 47px);
  top:60px;
  margin-top:12px;
  font-size:14px;
}

.large-search .react-autosuggest__section-title {
  font-size:10px;
}
.search-bar-region-selector {
  font-family:Inter;
}

.search-bar-region-selector.no-labels-homepage {
  position:absolute;
  right:60px;
  z-index:1;
}

.search-bar-region-selector.no-labels-homepage .menu-button.region-tag {
  color:#fff;
  font-size:12px;
  height:24px;
  width:36px;
}

.search-bar-region-selector.no-labels-homepage .menu {
  background-color:#fff;
  box-shadow:0 2px 2px 0 rgba(0,0,0,.4);
  display:flex;
  left:-11px;
  overflow-x:hidden;
  top:30px;
  width:58px;
  scrollbar-width:none;
}

.search-bar-region-selector.no-labels-homepage .menu::-webkit-scrollbar,
.search-bar-region-selector.no-labels-homepage .menu::-webkit-scrollbar:hover {
  width:6px;
}

.search-bar-region-selector.no-labels-homepage .menu::-webkit-scrollbar-track,
.search-bar-region-selector.no-labels-homepage .menu::-webkit-scrollbar-track:hover {
  background:rgba(92,92,142,.3019607843);
}

.search-bar-region-selector.no-labels-homepage .menu::-webkit-scrollbar-thumb,
.search-bar-region-selector.no-labels-homepage .menu::-webkit-scrollbar-thumb:hover {
  background:#5c5c8e;
}

.search-bar-region-selector.no-labels-homepage .menu .inner-menu {
  width:100%;
}

.search-bar-region-selector.no-labels-homepage .menu .inner-menu .options li {
  display:flex;
  height:32px;
  justify-content:center;
  padding:0;
  width:58px;
}

.search-bar-region-selector.no-labels-homepage .menu .inner-menu .options li:hover {
  background-color:#cddcfe;
}

.search-bar-region-selector.no-labels-homepage .menu .inner-menu .options li .region-tag {
  color:#fff;
  height:16px;
  margin-right:0;
}

.search-bar-region-selector .region-tag {
  display:flex;
  justify-content:center;
  align-items:center;
  color:#cddcfe;
  background:#191937;
  width:28px;
  height:18px;
  font-size:10px;
  font-weight:700;
  border-radius:1px;
}

.search-bar-region-selector_theme__light.search-bar-region-selector .region-tag {
  color:#5f648a;
  background-color:#f4f7ff;
}

.search-bar-region-selector .region-tag.bg-na1 {
  background-color:#ff9b00;
}

.search-bar-region-selector .region-tag.bg-euw1 {
  background-color:#1e48a8;
}

.search-bar-region-selector .region-tag.bg-eun1 {
  background-color:#3374a9;
}

.search-bar-region-selector .region-tag.bg-kr {
  background-color:#4d2ac0;
}

.search-bar-region-selector .region-tag.bg-br1 {
  background-color:#6cd7a2;
}

.search-bar-region-selector .region-tag.bg-jp1 {
  background-color:#ec5d8c;
}

.search-bar-region-selector .region-tag.bg-ru {
  background-color:#bf2828;
}

.search-bar-region-selector .region-tag.bg-oc1 {
  background-color:#8eced5;
}

.search-bar-region-selector .region-tag.bg-tr1 {
  background-color:#ec5c57;
}

.search-bar-region-selector .region-tag.bg-la1 {
  background-color:#f7c544;
}

.search-bar-region-selector .region-tag.bg-la2 {
  background-color:#ed642b;
}

.search-bar-region-selector .region-tag.bg-ph2 {
  background-color:#576bce;
}

.search-bar-region-selector .region-tag.bg-sg2 {
  background-color:#2b90ed;
}

.search-bar-region-selector .region-tag.bg-th2 {
  background-color:#af893d;
}

.search-bar-region-selector .region-tag.bg-tw2 {
  background-color:#00c280;
}

.search-bar-region-selector .region-tag.bg-vn2 {
  background-color:#145a66;
}

.search-bar-region-selector .menu-button:hover {
  cursor:pointer;
}

.search-bar-region-selector .menu {
  position:absolute;
  width:auto;
  top:44px;
  left:0;
  right:0;
  border-radius:3px;
  background-color:#0d0d28;
  overflow:auto;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}

.search-bar-region-selector_theme__light.search-bar-region-selector .menu {
  background:#fff;
}

.search-bar-region-selector .menu .title {
  color:#cddcfe;
  background-color:#191937;
  padding:8px;
  font-size:12px;
  font-weight:600;
}

.search-bar-region-selector_theme__light.search-bar-region-selector .menu .title {
  color:#383864;
  background:#f4f7ff;
}

.search-bar-region-selector .menu .options li {
  display:flex;
  align-items:center;
  padding:0 8px;
  height:28px;
}

.search-bar-region-selector .menu .options li:hover {
  background-color:#0b0b23;
  cursor:pointer;
}

.search-bar-region-selector .menu .options li:hover .region-label {
  font-weight:600;
  color:#fff;
}

.search-bar-region-selector .menu .options li .region-tag {
  margin-right:8px;
}

.search-bar-region-selector .menu .options li .region-label {
  font-size:14px;
  font-weight:500;
  color:#cddcfe;
}
.render-suggestion {
  position:relative;
  display:flex;
  align-items:center;
  flex-direction:row;
}

.render-suggestion .champion-icon div {
  transform:scale(1.15);
}

.render-suggestion img.suggest {
  margin-right:5px;
  height:40px;
}

.render-suggestion img.page-type {
  position:absolute;
  width:16px;
  height:16px;
  top:-8px;
  left:-8px;
  display:none;
}

.render-suggestion img.summoner-icon {
  width:20px;
  height:20px;
  border-radius:2px;
}

.render-suggestion .suggestion-image {
  width:24px;
  height:24px;
}

.render-suggestion div.region-tag {
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:4px;
  width:24px;
  height:24px;
  background-color:#08a6ff;
  color:#fff;
  font-size:10px;
  font-weight:700;
}

.render-suggestion .suggest-text {
  margin-left:8px;
  color:#5f5f7b;
  font-size:14px;
  font-weight:400;
  font-family:Inter;
  line-height:17px;
}

.jedi .render-suggestion .suggest-text {
  color:#5f5f7b;
}

.render-suggestion .suggest-text-secondary {
  margin-left:8px;
  color:#9d9db0;
  font-size:10px;
  font-weight:500;
  font-family:Inter;
  line-height:20px;
}

.jedi .render-suggestion .suggest-text-secondary {
  color:#9d9db0;
}

.render-suggestion .suggest-tag-container {
  display:flex;
  gap:4px;
  margin-left:auto;
  margin-right:-2px;
}

.render-suggestion .suggest-tag-container .tag {
  height:18px;
  border-radius:6px;
  padding:2px 4px;
  font-size:12px;
  font-weight:400;
  cursor:pointer;
}

.render-suggestion .suggest-tag-container.build .ranked {
  background-color:rgba(234,238,178,.2);
  color:#eaeeb2;
}

.large-search .render-suggestion .suggest-tag-container.build .ranked {
  background-color:#a4584e;
  color:#fff;
}

.render-suggestion .suggest-tag-container.build .aram {
  background-color:rgba(24,248,235,.2);
  color:#18f8eb;
}

.large-search .render-suggestion .suggest-tag-container.build .aram {
  background-color:#25acd6;
  color:#fff;
}

.render-suggestion .suggest-tag-container.build .arena {
  background-color:rgba(50,115,250,.2);
  color:#3273fa;
}

.large-search .render-suggestion .suggest-tag-container.build .arena {
  background-color:#3273fa;
  color:#fff;
}

.render-suggestion .suggest-tag-container.build .counters {
  background-color:rgba(205,220,254,.2);
  color:#cddcfe;
}

.large-search .render-suggestion .suggest-tag-container.build .counters {
  background-color:#5c5c8e;
  color:#fff;
}

.render-suggestion .suggest-tag-container.pages .tag {
  background-color:rgba(205,220,254,.2);
  color:#cddcfe;
  opacity:.25;
}

.render-suggestion .suggest-tag-container.pages .tag.active {
  opacity:1 !important;
}

.large-search .render-suggestion .suggest-tag-container.pages .tag {
  background-color:#5c5c8e;
  color:#fff;
  opacity:.25;
}

.render-suggestion .suggest-right {
  margin-left:auto;
  margin-right:-2px;
  border-radius:1px;
}

.autosuggest-container {
  display:flex;
  align-items:center;
  flex-direction:row;
}

.autosuggest-container .autosuggest-button {
  position:absolute;
  right:0;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-left:15px;
  padding-right:15px;
  background-color:#fff;
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
  border:none;
}

.autosuggest-container .autosuggest-button:hover {
  cursor:pointer;
}

.autosuggest-container::-moz-placeholder {
  color:#8a8ebb;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-size:16px;
  line-height:19px;
}

.autosuggest-container::placeholder {
  color:#8a8ebb;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-size:16px;
  line-height:19px;
}

.react-autosuggest__container {
  position:relative;
}

.react-autosuggest__input {
  width:500px;
  height:21px;
  padding:10px 110px;
  font-family:Inter;
  font-weight:300;
  font-size:12px;
  border-radius:4px;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border:none;
  color:#a9acd1;
}

@media(max-width:1139px) {
  .react-autosuggest__input {
    padding:10px 110px 10px 12px;
  }
}

.react-autosuggest__input--focused {
  outline:none;
}

.react-autosuggest__input--open {
  z-index:10;
}

.react-autosuggest__suggestions-container {
  display:none;
}

.react-autosuggest__suggestions-container--open {
  display:block;
  position:absolute;
  z-index:2;
  width:500px;
  background-color:#fff;
  color:#5f5f7b;
  font-family:Inter;
  font-weight:400;
  font-size:14px;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  border-radius:3px;
  max-height:500px;
  overflow-y:auto;
}

.jedi .react-autosuggest__suggestions-container--open {
  background:#fff;
}

.react-autosuggest__suggestions-list {
  margin:4px 0;
  padding:0;
  list-style-type:none;
}

.react-autosuggest__suggestion {
  cursor:pointer;
  padding:4px 8px;
}

.react-autosuggest__suggestion--highlighted {
  background-color:#e7eeff;
}

.jedi .react-autosuggest__suggestion--highlighted {
  background:#ebf0fd;
}

.react-autosuggest__section-title {
  padding:8px;
  font-size:10px;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  line-height:12px;
  text-align:left;
}

.jedi .react-autosuggest__section-title,
.react-autosuggest__section-title {
  background-color:#f4f7ff;
  color:#383864;
}

.react-autosuggest__section-title strong {
  font-weight:600;
}

.large-search .react-autosuggest__container {
  flex:1 1;
}

.large-search .react-autosuggest__container.react-autosuggest__container_placeholder {
  height:60px;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
  background-color:#fff;
}

.large-search .autosuggest-container {
  position:relative;
  height:60px;
}

.large-search .autosuggest-container .modal-filter .select_modal .select_modal__toggle {
  border:0;
}

.large-search .autosuggest-container .modal-filter:hover .show-all-container {
  background-color:#eff4ff;
  border-radius:30px 0 0 30px;
}

.large-search .autosuggest-container .modal-filter .region-selector-button {
  height:60px !important;
  border-radius:30px 0 0 30px !important;
  background-color:#f4f7ff !important;
  width:100px;
}

.large-search .autosuggest-container .modal-filter .region-selector-button:hover {
  background-color:#eff4ff !important;
}

.large-search .autosuggest-container .modal-filter .region-selector-button .arrow-icon svg g,
.large-search .autosuggest-container .modal-filter .region-selector-button .arrow-icon svg path {
  fill:#92929d;
}

.large-search .autosuggest-container .modal-filter .select_modal__modal-window.region-selector-modal {
  top:60px;
  left:20px;
}

.large-search .outer-search-tag {
  position:relative;
  top:-12px;
  z-index:10;
}

.large-search .outer-search-tag .search-tag {
  position:absolute;
  width:100px;
  height:25px;
  border-radius:12px;
  border:1px solid #bbbedb;
  background-color:#f4f7ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Helvetica Neue,Roboto,Arial;
  color:#5f5f7b;
  font-size:18px;
  font-weight:400;
}

.large-search .fancy-suggest {
  pointer-events:none;
  position:absolute;
  top:0;
  left:60px;
  margin-left:0;
  font-size:20px;
  font-weight:700;
  color:#92929d;
  z-index:10;
  height:100%;
  display:flex;
  align-items:center;
}

.large-search .fancy-suggest.clear {
  opacity:0;
}

.large-search .fancy-suggest-fade-in {
  -webkit-animation:animateWord 6.6s linear;
}

.large-search .autosuggest-button {
  height:100%;
  border-radius:3px;
  width:51px;
}

.large-search .autosuggest-button div {
  pointer-events:none;
}

.large-search .autosuggest-button .react-svg,
.large-search .autosuggest-button svg {
  height:30px;
  width:30px;
  pointer-events:none;
}

.large-search .region-search {
  display:flex;
  position:relative;
  align-items:center;
  left:1px;
}

.large-search .region-search svg {
  height:24px;
  width:24px;
  right:20px;
  z-index:2;
  position:relative;
  margin-left:31px;
}

.large-search .game-switcher-dropdown {
  position:absolute;
  cursor:pointer;
  margin-left:12px;
  z-index:1;
}

.large-search .game-switcher-dropdown .main-game {
  display:flex;
  align-items:center;
  height:36px;
  width:140px;
  border-radius:1px;
  background-color:#e7eeff;
  color:#626696;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-size:14px;
  line-height:17px;
}

.large-search .game-switcher-dropdown .game-dropdowns {
  display:flex;
  flex-direction:column;
  margin-top:6px;
  position:absolute;
}

.large-search .game-switcher-dropdown .game-dropdowns .indv-game {
  display:flex;
  align-items:center;
  height:32px;
  width:140px;
  background-color:#e7eeff;
  color:#626696;
  font-family:Inter;
  font-style:normal;
  font-weight:600;
  font-size:14px;
  line-height:17px;
}

.large-search .game-switcher-dropdown .game-dropdowns .indv-game.first {
  border-top-left-radius:1px;
  border-top-right-radius:1px;
}

.large-search .game-switcher-dropdown .game-dropdowns .indv-game.last {
  border-bottom-left-radius:1px;
  border-bottom-right-radius:1px;
}

.large-search .game-switcher-dropdown .game-dropdowns .indv-game svg {
  height:20px;
  width:20px;
  margin:0 8px;
}

.large-search .game-switcher-dropdown .game-dropdowns .indv-game:hover {
  background:#c9d5f2;
}

.large-search .react-autosuggest__suggestions-container--open {
  width:calc(100% + 47px);
  top:60px;
  margin-top:12px;
  font-size:14px;
}

.large-search .react-autosuggest__section-title {
  font-size:10px;
}

.autosuggest-container.autosuggest-material {
  position:relative;
  width:100%;
  height:44px;
  min-width:300px;
  max-width:650px;
}

.autosuggest-container.autosuggest-material .react-autosuggest__container {
  position:static;
  width:100%;
  height:100%;
}

.autosuggest-container.autosuggest-material .react-autosuggest__container.react-autosuggest__container_placeholder {
  border-top-left-radius:22px;
  border-bottom-left-radius:22px;
  background-color:#fff;
}

.autosuggest-container.autosuggest-material .react-autosuggest__container .react-autosuggest__input {
  padding-left:100px;
  width:100%;
  height:100%;
  border-top-left-radius:22px;
  border-bottom-left-radius:22px;
  font-size:14px;
}

.autosuggest-container.autosuggest-material .react-autosuggest__container .react-autosuggest__suggestions-container--open {
  width:auto;
  top:44px;
  left:0;
  right:0;
  border:none;
  border-bottom-left-radius:22px;
  border-bottom-right-radius:22px;
  font-size:14px;
}

.autosuggest-container.autosuggest-material .react-autosuggest__container--open {
  height:100%;
}

.autosuggest-container.autosuggest-material .autosuggest-button {
  width:60px;
  height:100%;
  padding:0 20px;
  border-top-right-radius:22px;
  border-bottom-right-radius:22px;
  background-color:#fff;
}

.autosuggest-container.autosuggest-material .autosuggest-button svg {
  fill:#fff !important;
}

.autosuggest-container.autosuggest-material .react-autosuggest__container--open~.autosuggest-button {
  border-bottom-right-radius:0;
}

.autosuggest-container .modal-filter__open .region-selector-button {
  background-color:#b1b3bb !important;
}

.autosuggest-container .region-selector-button {
  height:44px !important;
  background-color:#f4f7ff !important;
  border-radius:3px 0 0 3px;
}

.autosuggest-container .region-selector-button:hover {
  background-color:#b1b3bb !important;
}

.autosuggest-container .region-selector-button .arrow-icon svg g,
.autosuggest-container .region-selector-button .arrow-icon svg path {
  fill:#92929d;
}