@font-face {
  font-family: "Shentox";
  src: url("/fe/lol-esports-spectate/assets/shentox/shentox.ttf");
}
@font-face {
  font-family: "Shentox";
  src: url("/fe/lol-esports-spectate/assets/shentox/shentox-semibold.ttf");
  font-weight: 600;
}
@font-face {
  font-family: "Shentox";
  src: url("/fe/lol-esports-spectate/assets/shentox/shentox-light.ttf");
  font-weight: 300;
}
.champ-select-spectate-component {
  --left-side-color: #0b849e;
  --right-side-color: #be1e37;
  background: #000;
  color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  font-family: "Shentox", sans-serif;
}
.champ-select-spectate-component .champion-select-header {
  height: 108px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(104deg, #15171b 25%, #000 35%);
}
.champ-select-spectate-component .champion-select-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 108px;
  width: 50%;
  background-image: linear-gradient(74deg, #000 30%, #15171b 50%);
}
.champ-select-spectate-component .champion-select-header .timer-left,
.champ-select-spectate-component .champion-select-header .timer-right {
  width: 148px;
  height: 108px;
  color: #fff;
  position: absolute;
  top: 0;
  padding-top: 33px;
  font-size: 39px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0;
}
.champ-select-spectate-component .champion-select-header .timer-left.visible,
.champ-select-spectate-component .champion-select-header .timer-right.visible {
  transition: opacity 0.3s;
  opacity: 1;
}
.champ-select-spectate-component .champion-select-header .timer-left .timer-bg,
.champ-select-spectate-component .champion-select-header .timer-right .timer-bg {
  position: absolute;
  top: 0;
  width: 98px;
  height: 108px;
  transition: opacity 0.3s;
}
.champ-select-spectate-component .champion-select-header .timer-left .timer-inner,
.champ-select-spectate-component .champion-select-header .timer-right .timer-inner {
  position: absolute;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4), -1px 1px 3px rgba(0,0,0,0.4), -1px -1px 3px rgba(0,0,0,0.4), 1px -1px 3px rgba(0,0,0,0.4);
}
.champ-select-spectate-component .champion-select-header .timer-left {
  left: 396px;
}
.champ-select-spectate-component .champion-select-header .timer-left .timer-bg {
  transform: skew(14deg);
  background: var(--left-side-color);
  right: 0;
}
.champ-select-spectate-component .champion-select-header .timer-left .timer-inner {
  left: 69px;
}
.champ-select-spectate-component .champion-select-header .timer-right {
  right: 396px;
  text-align: right;
}
.champ-select-spectate-component .champion-select-header .timer-right .timer-bg {
  transform: skew(-14deg);
  background: var(--right-side-color);
  left: 0;
}
.champ-select-spectate-component .champion-select-header .timer-right .timer-inner {
  left: 20px;
}
.champ-select-spectate-component .champion-select-header .header-keystone {
  background: #15171b;
  height: 108px;
  position: absolute;
  top: 0;
  left: 561px;
  right: 561px;
}
.champ-select-spectate-component .champion-select-header .header-keystone > .left-bg-section {
  height: 108px;
  width: 50px;
  position: absolute;
  left: -14px;
  background: #15171b;
  transform: skew(14deg);
}
.champ-select-spectate-component .champion-select-header .header-keystone > .right-bg-section {
  height: 108px;
  width: 50px;
  position: absolute;
  right: -14px;
  background: #15171b;
  transform: skew(-14deg);
}
.champ-select-spectate-component .champion-select-header .header-keystone .header-keystone-inner {
  height: 23px;
  width: calc(100% - 2px);
  position: absolute;
  bottom: 0;
  left: 1px;
  text-align: center;
  background: transparent;
  transition: background 0.3s, opacity 0.3s;
}
.champ-select-spectate-component .champion-select-header .header-keystone .header-keystone-inner > .left-bg-section {
  height: 23px;
  width: 50px;
  position: absolute;
  left: -4px;
  background: transparent;
  transition: background 0.3s;
  transform: skew(14deg);
}
.champ-select-spectate-component .champion-select-header .header-keystone .header-keystone-inner > .right-bg-section {
  height: 23px;
  width: 50px;
  position: absolute;
  right: -4px;
  background: transparent;
  transition: background 0.3s;
  transform: skew(-14deg);
}
.champ-select-spectate-component .champion-select-header .header-keystone .header-keystone-inner > .phase {
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 16px;
  letter-spacing: 0.15px;
  width: 100%;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5), -1px 1px 3px rgba(0,0,0,0.5), -1px -1px 3px rgba(0,0,0,0.5), 1px -1px 3px rgba(0,0,0,0.5);
}
.champ-select-spectate-component.right-side-acting .champion-select-header .header-keystone-inner {
  background: var(--right-side-color);
}
.champ-select-spectate-component.right-side-acting .champion-select-header .header-keystone-inner .left-bg-section,
.champ-select-spectate-component.right-side-acting .champion-select-header .header-keystone-inner .right-bg-section {
  background: var(--right-side-color);
}
.champ-select-spectate-component.right-side-acting .timer-left .timer-bg {
  opacity: 0;
}
.champ-select-spectate-component.left-side-acting .champion-select-header .header-keystone-inner {
  background: var(--left-side-color);
}
.champ-select-spectate-component.left-side-acting .champion-select-header .header-keystone-inner .left-bg-section,
.champ-select-spectate-component.left-side-acting .champion-select-header .header-keystone-inner .right-bg-section {
  background: var(--left-side-color);
}
.champ-select-spectate-component.left-side-acting .timer-right .timer-bg {
  opacity: 0;
}
.champ-select-spectate-component.show-both-timers .champion-select-header .header-keystone-inner {
  opacity: 0;
}
.champ-select-spectate-component.show-both-timers .timer-bg {
  opacity: 0;
}
.champ-select-spectate-component .party {
  position: absolute;
  top: 132px;
  width: 249px;
  height: 453px;
  display: flex;
  flex-direction: column;
}
.champ-select-spectate-component .party .summoner-wrapper {
  width: 100%;
  height: 80px;
  position: relative;
  margin-bottom: 4px;
}
.champ-select-spectate-component .party .summoner-wrapper:nth-child(3) {
  margin-bottom: 23px;
}
.champ-select-spectate-component .party .summoner-wrapper .base-color-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-filter: saturate(0.6);
}
.champ-select-spectate-component .party .summoner-wrapper .gradient-background-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to right, rgba(0,0,0,0.83) 0%, rgba(0,0,0,0.72) 50%, rgba(0,0,0,0.83) 100%);
}
.champ-select-spectate-component .party .summoner-wrapper:first-child .gradient-background-overlay {
  background-image: radial-gradient(ellipse 82% 128% at 50% 90%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.91) 100%);
}
.champ-select-spectate-component .party .summoner-wrapper:last-child .gradient-background-overlay {
  background-image: radial-gradient(ellipse 82% 128% at 50% 10%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.91) 100%);
}
.champ-select-spectate-component .your-party .summoner-wrapper .base-color-background {
  background: var(--left-side-color);
}
.champ-select-spectate-component .enemy-party .summoner-wrapper .base-color-background {
  background: var(--right-side-color);
}
.champ-select-spectate-component .my-bans,
.champ-select-spectate-component .their-bans {
  width: 475px;
  position: absolute;
  height: 116px;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
}
.champ-select-spectate-component .ban-background {
  background: #161719;
  width: 81px;
  height: 83px;
  position: relative;
  overflow: hidden;
}
.champ-select-spectate-component .ban-wrapper {
  width: 81px;
  height: 83px;
  position: relative;
}
.champ-select-spectate-component .ban-wrapper .ban-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.champ-select-spectate-component .ban-wrapper .ban-icon {
  content: '';
  width: 28px;
  height: 28px;
  background: url("/fe/lol-esports-spectate/assets/ban-icon.png");
  background-size: 28px;
  background-repeat: no-repeat;
  position: absolute;
  top: 28px;
  -webkit-filter: brightness(0.3) contrast(0.85);
  transition: all 0.1s cubic-bezier(0.29, 0.27, 0.5, 0.95);
}
.champ-select-spectate-component .ban-wrapper.completed {
  animation: champBannedAnimation 1s ease-out forwards;
}
.champ-select-spectate-component .ban-wrapper.completed .ban-icon {
  -webkit-filter: brightness(1);
  top: 68px;
}
.champ-select-spectate-component .ban {
  width: 105px;
  height: 99px;
  background-size: 431px;
  background-position-x: 51%;
  background-position-y: 27%;
  margin-right: 2px;
  position: absolute;
  top: 0;
  left: -13px;
  opacity: 1;
  transition: opacity 0.2s;
}
.champ-select-spectate-component .ban:last-child {
  margin-right: 0;
}
.champ-select-spectate-component .ban.no-champion {
  opacity: 0;
}
.champ-select-spectate-component .my-bans {
  left: 43px;
}
.champ-select-spectate-component .my-bans .ban-wrapper {
  margin-right: 4px;
}
.champ-select-spectate-component .my-bans .ban-wrapper:nth-child(3) {
  margin-right: 34px;
}
.champ-select-spectate-component .my-bans .ban-wrapper .ban-icon {
  right: 26px;
}
.champ-select-spectate-component .my-bans .ban-wrapper.completed .ban-icon {
  right: 19px;
}
.champ-select-spectate-component .my-bans .ban-wrapper.active .ban-background {
  border-right: 5px solid var(--left-side-color);
  width: 77px;
}
.champ-select-spectate-component .my-bans .ban-background {
  transform: skew(14deg);
}
.champ-select-spectate-component .my-bans .ban-container {
  transform: skew(-14deg);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.champ-select-spectate-component .their-bans {
  right: 43px;
  flex-direction: row-reverse;
}
.champ-select-spectate-component .their-bans .ban-wrapper {
  margin-left: 4px;
}
.champ-select-spectate-component .their-bans .ban-wrapper:nth-child(3) {
  margin-left: 34px;
}
.champ-select-spectate-component .their-bans .ban-wrapper .ban-icon {
  left: 31px;
  transform: scaleX(-1);
}
.champ-select-spectate-component .their-bans .ban-wrapper.completed .ban-icon {
  left: 23px;
}
.champ-select-spectate-component .their-bans .ban-wrapper.active .ban-background {
  border-left: 5px solid var(--right-side-color);
  width: 77px;
}
.champ-select-spectate-component .their-bans .ban-background {
  transform: skew(-14deg);
  margin-left: 4px;
}
.champ-select-spectate-component .their-bans .ban-container {
  transform: scaleX(-1) skew(-14deg);
  background-position-x: 49%;
}
.champ-select-spectate-component .your-party .party {
  left: 0;
}
.champ-select-spectate-component .enemy-party .party {
  right: 0;
}
.champion-select-color-switcher {
  position: absolute;
  top: 200px;
  left: 333px;
}
@-moz-keyframes champBannedAnimation {
  0% {
    -webkit-filter: brightness(1);
  }
  4% {
    -webkit-filter: grayscale(0.7) brightness(1.8);
  }
  100% {
    -webkit-filter: grayscale(0.7) brightness(0.9);
  }
}
@-webkit-keyframes champBannedAnimation {
  0% {
    -webkit-filter: brightness(1);
  }
  4% {
    -webkit-filter: grayscale(0.7) brightness(1.8);
  }
  100% {
    -webkit-filter: grayscale(0.7) brightness(0.9);
  }
}
@-o-keyframes champBannedAnimation {
  0% {
    -webkit-filter: brightness(1);
  }
  4% {
    -webkit-filter: grayscale(0.7) brightness(1.8);
  }
  100% {
    -webkit-filter: grayscale(0.7) brightness(0.9);
  }
}
@keyframes champBannedAnimation {
  0% {
    -webkit-filter: brightness(1);
  }
  4% {
    -webkit-filter: grayscale(0.7) brightness(1.8);
  }
  100% {
    -webkit-filter: grayscale(0.7) brightness(0.9);
  }
}
.champ-select-spectate-component .my-bans .ban[data-id='115'],
.champ-select-spectate-component .their-bans .ban[data-id='115'] {
  background-position-x: 46%;
  background-position-y: 33%;
}
.champ-select-spectate-component .my-bans .ban[data-id='19'],
.champ-select-spectate-component .their-bans .ban[data-id='19'] {
  background-size: 281px;
  background-position-y: 50%;
}
.champ-select-spectate-component .my-bans .ban[data-id='106'],
.champ-select-spectate-component .their-bans .ban[data-id='106'] {
  background-position-y: 20%;
}
.champ-select-spectate-component .my-bans .ban[data-id='161'],
.champ-select-spectate-component .their-bans .ban[data-id='161'] {
  background-position-x: 47%;
  background-size: 295px;
}
.champ-select-spectate-component .my-bans .ban[data-id='44'],
.champ-select-spectate-component .their-bans .ban[data-id='44'] {
  background-position-x: 60%;
}
.champ-select-spectate-component .my-bans .ban[data-id='223'],
.champ-select-spectate-component .their-bans .ban[data-id='223'] {
  background-size: 300px;
}
.champ-select-spectate-component .my-bans .ban[data-id='13'],
.champ-select-spectate-component .their-bans .ban[data-id='13'] {
  background-position-x: 63%;
  background-position-y: 38%;
}
.champ-select-spectate-component .my-bans .ban[data-id='33'],
.champ-select-spectate-component .their-bans .ban[data-id='33'] {
  background-size: 373px;
  background-position-x: 55%;
  background-position-y: 35%;
}
.champ-select-spectate-component .my-bans .ban[data-id='75'],
.champ-select-spectate-component .their-bans .ban[data-id='75'] {
  background-size: 597px;
}
.champ-select-spectate-component .my-bans .ban[data-id='96'],
.champ-select-spectate-component .their-bans .ban[data-id='96'] {
  background-size: 300px;
}
.champ-select-spectate-component .my-bans .ban[data-id='240'],
.champ-select-spectate-component .their-bans .ban[data-id='240'] {
  background-size: 300px;
}
.champ-select-spectate-component .my-bans .ban[data-id='85'],
.champ-select-spectate-component .their-bans .ban[data-id='85'] {
  background-size: 321px;
}
.champ-select-spectate-component .my-bans .ban[data-id='74'],
.champ-select-spectate-component .their-bans .ban[data-id='74'] {
  background-size: 350px;
}
.champ-select-spectate-component .my-bans .ban[data-id='9'],
.champ-select-spectate-component .their-bans .ban[data-id='9'] {
  background-size: 300px;
}
.champ-select-spectate-component .my-bans .ban[data-id='28'],
.champ-select-spectate-component .their-bans .ban[data-id='28'] {
  background-position-y: 22%;
}
.champ-select-spectate-component .my-bans .ban[data-id='122'],
.champ-select-spectate-component .their-bans .ban[data-id='122'] {
  background-position-y: 19%;
}
.champ-select-spectate-component .my-bans .ban[data-id='136'],
.champ-select-spectate-component .their-bans .ban[data-id='136'] {
  background-position-x: 57%;
  background-size: 360px;
  background-position-y: 40%;
}
.champ-select-spectate-component .my-bans .ban[data-id='34'],
.champ-select-spectate-component .their-bans .ban[data-id='34'] {
  background-position-y: 36%;
}
.champ-select-spectate-component .my-bans .ban[data-id='142'],
.champ-select-spectate-component .their-bans .ban[data-id='142'] {
  background-size: 300px;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='268'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='268'] {
  background-position-y: 24%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='122'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='122'] {
  background-position-y: 18%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='28'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='28'] {
  background-position-y: 29%;
  background-size: 165%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='50'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='50'] {
  background-position-y: 22%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='9'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='9'] {
  background-size: 165%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='114'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='114'] {
  background-position-y: 18%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='105'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='105'] {
  background-position-y: 21%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='74'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='74'] {
  background-size: 200%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='420'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='420'] {
  background-position-y: 18%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='39'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='39'] {
  background-size: 320%;
  background-position-y: 26%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='222'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='222'] {
  background-position-y: 24%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='10'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='10'] {
  background-position-y: 18%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='240'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='240'] {
  background-size: 180%;
  background-position-y: 26%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='96'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='96'] {
  background-size: 180%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='7'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='7'] {
  background-position-y: 22%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='64'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='64'] {
  background-position-y: 26%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='236'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='236'] {
  background-position-y: 23%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='267'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='267'] {
  background-position-y: 23%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='20'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='20'] {
  background-position-y: 18%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='33'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='33'] {
  background-size: 180%;
  background-position-x: 67%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='13'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='13'] {
  background-size: 205%;
  background-position-x: 61%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='223'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='223'] {
  background-size: 180%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='112'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='112'] {
  background-position-y: 23%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='8'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='8'] {
  background-position-y: 23%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='201'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='201'] {
  background-position-y: 20%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='106'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='106'] {
  background-size: 220%;
  background-position-y: 17%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='19'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='19'] {
  background-size: 170%;
  background-position-y: 41%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='101'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='101'] {
  background-position-y: 22%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='115'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='115'] {
  background-size: 200%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='83'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='83'] {
  background-position-y: 19%;
  background-size: 170%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='85'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='85'] {
  background-size: 170%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='202'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='202'] {
  background-position-y: 25%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='110'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='110'] {
  background-position-x: 46%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='161'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='161'] {
  background-size: 166%;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background[data-id='142'],
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background[data-id='142'] {
  background-size: 166%;
}
.champ-select-spectate-component [data-id='136'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='432'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='53'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='63'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='42'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='36'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='28'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='86'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='420'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='427'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='24'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='45'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='29'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='27'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='102'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='113'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='13'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='78'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='80'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='76'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='25'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='90'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='236'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='7'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='240'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='203'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='121'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='85'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='82'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='164'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='3'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='497'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='498'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='163'] {
  transform: scaleX(-1);
}
.champ-select-spectate-component [data-id='110'] {
  transform: scaleX(-1);
}
@font-face {
  font-family: "Shentox";
  src: url("/fe/lol-esports-spectate/assets/shentox/shentox.ttf");
}
@font-face {
  font-family: "Shentox";
  src: url("/fe/lol-esports-spectate/assets/shentox/shentox-semibold.ttf");
  font-weight: 600;
}
@font-face {
  font-family: "Shentox";
  src: url("/fe/lol-esports-spectate/assets/shentox/shentox-light.ttf");
  font-weight: 300;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  letter-spacing: 0.8px;
  font-size: 16px;
  font-weight: 300;
  text-shadow: 1px 1px 2px #000, 0px 1px 2px #000, 0px 0px 3px #000, 0px 0px 3px #000, 1px 1px 4px #000;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background,
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .old-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: 241%;
  background-position: 52% 28%;
  opacity: 1;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .background-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .action-text {
  opacity: 0;
  position: absolute;
  bottom: 20px;
  transition: opacity 0.2s;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .edge-border {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  border-left: 0px solid #000;
  border-right: 0px solid #000;
  transition: width 0.15s;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .spells {
  opacity: 1;
  transition: opacity 0.3s;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .spell {
  width: 30px;
  border: 2px solid #000;
  position: absolute;
  box-shadow: 0 0 1px #000;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .spell:first-child {
  top: 7px;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .spell:nth-child(2) {
  top: 39px;
}
.champ-select-spectate-component .summoner-object-component .summoner-object-wrapper .summoner-name {
  position: absolute;
  bottom: 2px;
  transition: left 0.2s, right 0.2s;
}
.champ-select-spectate-component .summoner-object-component.no-champion .spells {
  opacity: 0;
}
.champ-select-spectate-component .summoner-object-component.is-picking-now .action-text {
  opacity: 1;
}
.champ-select-spectate-component .summoner-object-component.champion-not-locked .background,
.champ-select-spectate-component .summoner-object-component.champion-not-locked .old-background {
  -webkit-filter: brightness(0.8);
}
.champ-select-spectate-component .summoner-object-component.champion-locked .background {
  animation: champLockedInAnimation 1.5s ease-out;
}
.champ-select-spectate-component .your-party .summoner-object-component .summoner-object-wrapper .spell {
  left: 11px;
}
.champ-select-spectate-component .your-party .summoner-object-component .summoner-object-wrapper .summoner-name {
  right: 9px;
}
.champ-select-spectate-component .your-party .summoner-object-component .summoner-object-wrapper .edge-border {
  right: 0px;
  background: var(--left-side-color);
}
.champ-select-spectate-component .your-party .summoner-object-component .summoner-object-wrapper .action-text {
  right: 15px;
}
.champ-select-spectate-component .your-party .summoner-object-component.is-picking-now .edge-border {
  width: 4px;
  border-left: 3px solid #000;
  opacity: 1;
}
.champ-select-spectate-component .your-party .summoner-object-component.is-picking-now .summoner-name {
  right: 15px;
}
.champ-select-spectate-component .your-party .summoner-object-component.is-picking-now .action-text {
  animation: fadeInRightAnimation 0.2s, flickerAnimation 3s 0.2s cubic-bezier(0.21, 0.89, 0.2, 0.88) infinite;
}
.champ-select-spectate-component .your-party .summoner-object-component .background-wrapper {
  transform: scaleX(-1);
}
.champ-select-spectate-component .enemy-party .summoner-object-component .summoner-object-wrapper .spell {
  right: 11px;
}
.champ-select-spectate-component .enemy-party .summoner-object-component .summoner-object-wrapper .summoner-name {
  left: 10px;
}
.champ-select-spectate-component .enemy-party .summoner-object-component .summoner-object-wrapper .edge-border {
  left: 0px;
  background: var(--right-side-color);
}
.champ-select-spectate-component .enemy-party .summoner-object-component .summoner-object-wrapper .action-text {
  left: 15px;
}
.champ-select-spectate-component .enemy-party .summoner-object-component.is-picking-now .edge-border {
  width: 4px;
  border-right: 3px solid #000;
  opacity: 1;
}
.champ-select-spectate-component .enemy-party .summoner-object-component.is-picking-now .summoner-name {
  left: 15px;
}
.champ-select-spectate-component .enemy-party .summoner-object-component.is-picking-now .action-text {
  animation: fadeInLeftAnimation 0.2s, flickerAnimation 3s 0.2s cubic-bezier(0.21, 0.89, 0.2, 0.88) infinite;
}
@-moz-keyframes flickerAnimation {
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes flickerAnimation {
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes flickerAnimation {
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flickerAnimation {
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeInRightAnimation {
  0% {
    opacity: 0;
    right: 23px;
  }
  100% {
    opacity: 1;
    right: 15px;
  }
}
@-webkit-keyframes fadeInRightAnimation {
  0% {
    opacity: 0;
    right: 23px;
  }
  100% {
    opacity: 1;
    right: 15px;
  }
}
@-o-keyframes fadeInRightAnimation {
  0% {
    opacity: 0;
    right: 23px;
  }
  100% {
    opacity: 1;
    right: 15px;
  }
}
@keyframes fadeInRightAnimation {
  0% {
    opacity: 0;
    right: 23px;
  }
  100% {
    opacity: 1;
    right: 15px;
  }
}
@-moz-keyframes fadeInLeftAnimation {
  0% {
    opacity: 0;
    left: 23px;
  }
  100% {
    opacity: 1;
    left: 15px;
  }
}
@-webkit-keyframes fadeInLeftAnimation {
  0% {
    opacity: 0;
    left: 23px;
  }
  100% {
    opacity: 1;
    left: 15px;
  }
}
@-o-keyframes fadeInLeftAnimation {
  0% {
    opacity: 0;
    left: 23px;
  }
  100% {
    opacity: 1;
    left: 15px;
  }
}
@keyframes fadeInLeftAnimation {
  0% {
    opacity: 0;
    left: 23px;
  }
  100% {
    opacity: 1;
    left: 15px;
  }
}
@-moz-keyframes champLockedInAnimation {
  0% {
    -webkit-filter: brightness(1);
  }
  4% {
    -webkit-filter: brightness(1.8);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
@-webkit-keyframes champLockedInAnimation {
  0% {
    -webkit-filter: brightness(1);
  }
  4% {
    -webkit-filter: brightness(1.8);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
@-o-keyframes champLockedInAnimation {
  0% {
    -webkit-filter: brightness(1);
  }
  4% {
    -webkit-filter: brightness(1.8);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
@keyframes champLockedInAnimation {
  0% {
    -webkit-filter: brightness(1);
  }
  4% {
    -webkit-filter: brightness(1.8);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}

/*# sourceMappingURL=style.css.map*/