.lol-tooltip-component {
  display: none;
}
.decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm {
  text-transform: uppercase;
}
.decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ko-kr),
.decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ja-jp),
.decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(tr-tr),
.decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(el-gr),
.decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(th-th),
.decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(zh-tw) {
  text-transform: none;
}
.decorated-footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 0 1px;
  height: 50px;
  box-sizing: border-box;
}
.decorated-footer .confirm-button-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 15px;
}
.decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm {
  display: flex;
  min-width: 160px;
  pointer-events: auto;
}
.decorated-footer .button-img {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-color: transparent;
  border: 0px;
  outline: 0px;
}
.decorated-footer .button-img.close {
  background-image: url(/fe/lol-champ-select/button_close.png);
}
.decorated-footer .button-img.close:hover {
  background-image: url(/fe/lol-champ-select/button_close_hover.png);
}
.decorated-footer .button-img.close:active {
  background-image: url(/fe/lol-champ-select/button_close_click.png);
}
.decorated-footer .button-img.close:disabled {
  background-image: url(/fe/lol-champ-select/button_close_inactive.png);
}
.decorated-footer .decorated-footer-decoration {
  display: flex;
  position: relative;
  flex: 1 1 auto;
  height: 34px;
  margin-top: 15px;
}
.decorated-footer .decorated-footer-decoration.decorated-footer-left .button {
  position: absolute;
  top: -13px;
  right: 2px;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm {
  font-family: var(--font-display);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm {
  -webkit-user-select: none;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm {
  text-transform: uppercase;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ko-kr),
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ja-jp),
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(tr-tr),
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(el-gr),
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(th-th),
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(zh-tw) {
  text-transform: none;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm {
  color: #c8aa6e;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.0325em;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover {
  color: #f0e6d2;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:disabled,
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:disabled:hover,
.arrow-footer[version="7.13"] .confirm-button-container button.confirm[disabled='true'],
.arrow-footer[version="7.13"] .confirm-button-container button.confirm[disabled='true']:hover {
  color: #5c5b57;
  cursor: default;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:active {
  color: #785a28;
}
.arrow-footer[version="7.13"] {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 0 1px;
  height: 51px;
  box-sizing: border-box;
}
.arrow-footer[version="7.13"] .confirm-button-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.arrow-footer[version="7.13"] .confirm-button-container .border-bg {
  position: absolute;
  width: 100%;
  height: 44px;
  display: flex;
  top: -5px;
}
.arrow-footer[version="7.13"] .confirm-button-container .border-bg .left-border-bg {
  height: 44px;
  width: 29px;
  position: absolute;
  top: 0px;
  left: -6px;
  background-size: 100% 100%;
  background-image: url(/fe/lol-champ-select/BGLeft.png);
}
.arrow-footer[version="7.13"] .confirm-button-container .border-bg .middle-border-bg {
  flex-grow: 1;
  height: 44px;
  margin: 0px 12px;
  background-size: contain;
  background-image: url(/fe/lol-champ-select/BGMid.png);
}
.arrow-footer[version="7.13"] .confirm-button-container .border-bg .right-border-bg {
  height: 44px;
  width: 26px;
  position: absolute;
  top: 0;
  right: -6px;
  background-size: 100% 100%;
  background-image: url(/fe/lol-champ-select/BGRight.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button {
  border: 0;
  outline: 0;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
}
.arrow-footer[version="7.13"] .confirm-button-container button.disabled {
  cursor: default;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm {
  height: 34px;
  min-width: 170px;
  margin-left: 30px;
  color: #a3c7c7;
  position: relative;
  display: flex;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm > div {
  background-size: 100% 100%;
  height: 34px;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm .left-confirm {
  width: 12px;
  background-image: url(/fe/lol-champ-select/LeftDefault.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 0px 10px;
  background-repeat: repeat-x;
  background-image: url(/fe/lol-champ-select/MidDefault.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm .right-confirm {
  width: 17px;
  background-image: url(/fe/lol-champ-select/RightDefault.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .left-confirm {
  background-image: url(/fe/lol-champ-select/LeftHover.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .middle-confirm {
  background-image: url(/fe/lol-champ-select/MidHover.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .right-confirm {
  background-image: url(/fe/lol-champ-select/RightHover.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:active {
  color: #005a82;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .left-confirm {
  background-image: url(/fe/lol-champ-select/LeftClick.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .middle-confirm {
  background-image: url(/fe/lol-champ-select/MidClick.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .right-confirm {
  background-image: url(/fe/lol-champ-select/RightClick.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled {
  color: #5c5b57;
  cursor: default;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .left-confirm {
  background-image: url(/fe/lol-champ-select/LeftDisabled.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .middle-confirm {
  background-image: url(/fe/lol-champ-select/MidDisabled.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .right-confirm {
  background-image: url(/fe/lol-champ-select/RightDisabled.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed {
  color: #c89b3c;
  cursor: default;
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .left-confirm {
  background-image: url(/fe/lol-champ-select/LeftCompleted.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .middle-confirm {
  background-image: url(/fe/lol-champ-select/MidCompleted.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .right-confirm {
  background-image: url(/fe/lol-champ-select/RightCompleted.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close {
  width: 34px;
  height: 34px;
  background-size: contain;
  position: absolute;
  left: 0px;
  background-image: url(/fe/lol-champ-select/Normal.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close .close-icon {
  height: 34px;
  width: 34px;
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(/fe/lol-champ-select/Exit_Default.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close[type="back"] .close-icon {
  background-image: url(/fe/lol-champ-select/Back_default.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close:hover {
  background-image: url(/fe/lol-champ-select/Hover.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close:hover .close-icon {
  background-image: url(/fe/lol-champ-select/Exit_Hover.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close:hover[type="back"] .close-icon {
  background-image: url(/fe/lol-champ-select/Back_Hover.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close:active {
  background-image: url(/fe/lol-champ-select/Clicked.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close:active .close-icon {
  background-image: url(/fe/lol-champ-select/Exit_Click.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close:active[type="back"] .close-icon {
  background-image: url(/fe/lol-champ-select/Back_click.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close.disabled {
  background-image: url(/fe/lol-champ-select/Disabled.png);
  cursor: default;
}
.arrow-footer[version="7.13"] .confirm-button-container button.close.disabled .close-icon {
  background-image: url(/fe/lol-champ-select/Exit_Disabled.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close.disabled[type="back"] .close-icon {
  background-image: url(/fe/lol-champ-select/Back_Disabled.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close.completed {
  cursor: default;
  background-image: url(/fe/lol-champ-select/Completed.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close.completed .close-icon {
  background-image: url(/fe/lol-champ-select/Checkmark.png);
}
.arrow-footer[version="7.13"] .confirm-button-container button.close.completed[type="back"] .close-icon {
  background-image: url(/fe/lol-champ-select/Checkmark.png);
}
.arrow-footer[version="7.13"] .arrow-footer-decoration {
  display: flex;
  position: relative;
  flex: 1 1 auto;
  height: 34px;
}
.basic-footer .confirm-button-container lol-uikit-primary-magic-button,
.basic-footer .confirm-button-container lol-uikit-flat-button {
  text-transform: uppercase;
}
.basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ko-kr),
.basic-footer .confirm-button-container lol-uikit-flat-button:lang(ko-kr),
.basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ja-jp),
.basic-footer .confirm-button-container lol-uikit-flat-button:lang(ja-jp),
.basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(tr-tr),
.basic-footer .confirm-button-container lol-uikit-flat-button:lang(tr-tr),
.basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(el-gr),
.basic-footer .confirm-button-container lol-uikit-flat-button:lang(el-gr),
.basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(th-th),
.basic-footer .confirm-button-container lol-uikit-flat-button:lang(th-th),
.basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(zh-tw),
.basic-footer .confirm-button-container lol-uikit-flat-button:lang(zh-tw) {
  text-transform: none;
}
.basic-footer {
  padding-left: 34px;
  padding-right: 35px;
}
.basic-footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 48px;
  box-sizing: border-box;
}
.basic-footer .confirm-button-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-grow: 1;
}
.basic-footer .confirm-button-container lol-uikit-primary-magic-button,
.basic-footer .confirm-button-container lol-uikit-flat-button {
  display: flex;
  min-width: 160px;
  pointer-events: auto;
  margin-left: 10px;
}
.basic-footer .confirm-button-container lol-uikit-primary-magic-button:last-child,
.basic-footer .confirm-button-container lol-uikit-flat-button:last-child {
  margin-right: 10px;
}
.basic-footer .confirm-button-container::after,
.basic-footer .confirm-button-container::before {
  display: flex;
  border-top: 1px solid #785a28;
  margin-top: 16px;
  height: 1px;
  flex-grow: 1;
  content: " ";
}
.media-fader {
  position: absolute;
  top: 0;
}
.media-fader .media-fader-asset {
  -webkit-user-drag: none;
}
.media-swapper {
  position: relative;
}
.position-assignment-pin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.position-assignment-pin uikit-state-machine {
  position: absolute;
}
.position-assignment-pin uikit-state-machine[state="unloaded"] .pin-drop-vid,
.position-assignment-pin uikit-state-machine[state="lane-animation"] .pin-drop-vid {
  top: -841px;
}
.position-assignment-pin .pin-drop-vid {
  position: absolute;
  top: -430px;
  left: -20px;
  transition: top 0.13s;
}
.position-assignment-pin .pin-loop-vid {
  position: absolute;
  top: 0;
  left: 0;
}
.position-assignment-pin.is-self .pin-drop-vid {
  top: -448px;
  left: -46px;
}
.position-assignment-pin.is-self .pin-loop-vid {
  top: -48px;
  left: -10px;
}
.position-assignment-pin .lane-animation-vid {
  position: absolute;
}
.position-assignment-pin.blue.top .lane-animation-vid {
  left: -86px;
  top: -79px;
}
.position-assignment-pin.blue.jungle .lane-animation-vid {
  top: -38px;
  left: -157px;
}
.position-assignment-pin.blue.middle .lane-animation-vid {
  top: -66px;
  left: -223px;
}
.position-assignment-pin.blue.bottom .lane-animation-vid {
  top: -41px;
  left: -398px;
}
.position-assignment-pin.red.top .lane-animation-vid {
  top: -16px;
  left: -67px;
}
.position-assignment-pin.red.jungle .lane-animation-vid {
  top: -48px;
  left: -16px;
}
.position-assignment-pin.red.middle .lane-animation-vid {
  top: -114px;
  left: -38px;
}
.position-assignment-pin.red.bottom .lane-animation-vid {
  top: -183px;
  left: -62px;
}
.position-assignment-pin .pin-position-icon {
  position: absolute;
  bottom: -59px;
  left: 15px;
  width: 50px;
  height: 50px;
}
.position-assignment-pin .pin-position-icon .svg-icon {
  width: 16px;
}
.position-assignment-pin.is-self .pin-position-icon {
  bottom: -20px;
  left: 9px;
  width: 50px;
  height: 50px;
}
.position-assignment-pin.is-self .pin-position-icon .svg-icon {
  width: 29px;
}
.position-assignment {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.position-assignment .map-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.position-assignment .map-side-assignment {
  background-image: url("/fe/lol-champ-select/images/config/crystal-paladin.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
}
.position-assignment .bottom-left .map-side-assignment {
  bottom: 65px;
  left: 30px;
  width: 88px;
  height: 100px;
}
.position-assignment .top-right .map-side-assignment {
  top: -342px;
  right: 121px;
  width: 74px;
  height: 84px;
}
.position-assignment .position-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 185px;
  text-align: center;
  color: #f0e6d2;
  --filter-fader-opacity: 0;
  --filter-fader-filter: drop-shadow(0 0 30px #f0e6d2) drop-shadow(0 0 30px #f0e6d2) drop-shadow(0 0 30px #f0e6d2);
}
.position-assignment .position-text .position-assignment-title {
  --filter-fader-opacity: 0;
  --filter-fader-filter: drop-shadow(0 0 5px rgba(240,230,210,0.84)) drop-shadow(0 0 5px rgba(240,230,210,0.84)) drop-shadow(0 0 5px rgba(240,230,210,0.84)) drop-shadow(0 0 5px rgba(240,230,210,0.84));
}
.position-assignment .position-text .position-assignment-label {
  --filter-fader-opacity: 0;
  --filter-fader-filter: drop-shadow(0 0 5px rgba(240,230,210,0.84)) drop-shadow(0 0 5px rgba(240,230,210,0.84)) drop-shadow(0 0 5px rgba(240,230,210,0.84)) drop-shadow(0 0 5px rgba(240,230,210,0.84));
}
.position-assignment.defocussed {
  -webkit-filter: brightness(35%);
}
.animation-enabled .position-text .position-assignment-title {
  transform-origin: 50% 50%;
  animation-delay: 0s;
  animation-duration: 0.2s;
  animation-fill-mode: backwards;
  animation-name: position-assignment-scale-intro;
  transition-timing-function: cubic-bezier(1, 0, 1, 1);
}
.animation-enabled .position-text .position-assignment-label {
  transform-origin: 50% 50%;
  animation-delay: 0.13s;
  animation-duration: 0.2s;
  animation-fill-mode: backwards;
  animation-name: position-assignment-scale-intro;
  transition-timing-function: cubic-bezier(1, 0, 1, 1);
}
@-moz-keyframes position-assignment-scale-intro {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes position-assignment-scale-intro {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes position-assignment-scale-intro {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes position-assignment-scale-intro {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.flyout-selected-animation-wrapper .new-selection-icon,
.flyout-selected-animation-wrapper .old-selection-icon {
  position: absolute;
  transition: left 0.133s cubic-bezier(0.8, 0, 1, 1), top 0.133s cubic-bezier(0.8, 0, 1, 1), -webkit-filter 0.133s cubic-bezier(0.8, 0, 1, 1), width 0.133s cubic-bezier(0.8, 0, 1, 1), height 0.133s cubic-bezier(0.8, 0, 1, 1);
  overflow: hidden;
  -webkit-filter: brightness(0.8);
}
.flyout-selected-animation-wrapper .selection-icon-img {
  width: 100%;
  height: 100%;
}
.flyout-selected-animation-wrapper .new-selection-icon .animated-gradient-overlay,
.flyout-selected-animation-wrapper .new-selection-icon .icon-wrapper::after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
}
.flyout-selected-animation-wrapper .new-selection-icon .animated-border-overlay {
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  box-sizing: border-box;
  border: 4px solid #c89b3c;
  transition: opacity 0.5s;
  opacity: 0;
}
.flyout-selected-animation-wrapper .new-selection-icon .animated-gradient-overlay {
  opacity: 0;
  transition: opacity 0.5s;
}
.flyout-selected-animation-wrapper .new-selection-icon .icon-wrapper::after {
  content: '';
  background-image: radial-gradient(23px at 23px 50%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0.3) 20px, rgba(255,255,255,0) 29px);
  opacity: 0;
  transition: opacity 0.2s;
}
.flyout-selected-animation-wrapper .loading-spinner {
  position: absolute;
  width: 51px;
  height: 51px;
  opacity: 0;
  transition: opacity 0.5s;
  animation: FlyoutSelectionsLoadingSpinnerAnimation 1.21s infinite;
  animation-timing-function: linear;
  background: url("/fe/lol-champ-select/images/config/flyout-selector-loading.png") no-repeat center center;
  -webkit-filter: brightness(150%);
}
.flyout-selected-animation-wrapper[state='start'] .new-selection-icon .icon-wrapper::after,
.flyout-selected-animation-wrapper[state='moving'] .new-selection-icon .icon-wrapper::after {
  opacity: 1;
}
.flyout-selected-animation-wrapper[state='start'] .new-selection-icon,
.flyout-selected-animation-wrapper[state='moving'] .new-selection-icon {
  -webkit-filter: brightness(1);
}
.flyout-selected-animation-wrapper[state='landing'] .new-selection-icon .animated-gradient-overlay,
.flyout-selected-animation-wrapper[state='landed'] .new-selection-icon .animated-gradient-overlay {
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0.1) 100%);
  animation-name: FlyoutSelectorSelectedGradientOverlayAnimation;
  animation-fill-mode: both;
  animation-duration: 0.4s;
}
.flyout-selected-animation-wrapper[state='landing'] .new-selection-icon .animated-border-overlay,
.flyout-selected-animation-wrapper[state='landed'] .new-selection-icon .animated-border-overlay {
  animation-name: FlyoutSelectorSelectedBorderOverlayAnimation;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}
.flyout-selected-animation-wrapper[state='landing'] .new-selection-icon .animated-border-overlay {
  opacity: 1;
  transition: opacity 0.1s;
}
.flyout-selected-animation-wrapper[state='spinner'] .new-selection-icon {
  -webkit-filter: brightness(40%) grayscale(65%);
}
.flyout-selected-animation-wrapper[state='spinner'] .loading-spinner {
  opacity: 1;
}
@-moz-keyframes FlyoutSelectionsLoadingSpinnerAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes FlyoutSelectionsLoadingSpinnerAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes FlyoutSelectionsLoadingSpinnerAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes FlyoutSelectionsLoadingSpinnerAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes FlyoutSelectorSelectedGradientOverlayAnimation {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform: translate(0%, 0%);
  }
}
@-webkit-keyframes FlyoutSelectorSelectedGradientOverlayAnimation {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform: translate(0%, 0%);
  }
}
@-o-keyframes FlyoutSelectorSelectedGradientOverlayAnimation {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform: translate(0%, 0%);
  }
}
@keyframes FlyoutSelectorSelectedGradientOverlayAnimation {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform: translate(0%, 0%);
  }
}
@-moz-keyframes FlyoutSelectorSelectedBorderOverlayAnimation {
  0% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.95);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(0.8);
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.7);
    transform: scale(1.05);
    opacity: 0;
  }
}
@-webkit-keyframes FlyoutSelectorSelectedBorderOverlayAnimation {
  0% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.95);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(0.8);
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.7);
    transform: scale(1.05);
    opacity: 0;
  }
}
@-o-keyframes FlyoutSelectorSelectedBorderOverlayAnimation {
  0% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.95);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(0.8);
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.7);
    transform: scale(1.05);
    opacity: 0;
  }
}
@keyframes FlyoutSelectorSelectedBorderOverlayAnimation {
  0% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.95);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(0.8);
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.7);
    transform: scale(1.05);
    opacity: 0;
  }
}
.flyout-selector-button-container {
  position: relative;
  width: 53px;
  height: 53px;
  display: flex;
  transition: 450ms all ease-out;
}
.flyout-selector-button-container.disabled .flyout-selector-button-icon .flyout-selector-button .flyout-selector-button-image {
  opacity: 0.3;
}
.flyout-selector-button-container.disabled .flyout-selector-button-icon .flyout-selector-button:after {
  content: '';
  size: 30px;
  bottom: -14px;
  left: 11px;
  background-size: cover;
  position: absolute;
}
.flyout-selector-button-container .flyout-selector-button-icon {
  display: flex;
  flex: 1;
  position: relative;
  background: #3c3c41;
  margin: 1px;
  cursor: pointer;
}
.flyout-selector-button-container .flyout-selector-button-icon .flyout-selector-button {
  padding: 1px;
  margin: 1px;
  background: #000;
  border: 0;
  display: flex;
  flex: 1;
  -webkit-filter: brightness(80%);
  transition: -webkit-filter 0.3s;
}
.flyout-selector-button-container .flyout-selector-button-icon .flyout-selector-button .flyout-selector-button-image {
  height: 100%;
  opacity: 0.8;
  transition: all 0.3s;
  width: 100%;
}
.flyout-selector-button-container .flyout-selector-button-icon .flyout-selector-button:focus {
  outline: 0;
}
.flyout-selector-button-container.selected-item .flyout-selector-button-icon::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  box-sizing: border-box;
  border-width: 2px;
  border-style: solid;
  -webkit-border-image: linear-gradient(to bottom, #785a28 0, #c8aa6e 100%);
  border-image-slice: 1;
  transition: opacity 0.3s;
  box-shadow: 0 0 0 2px #000 inset;
  animation-name: FlyoutSelectorSelectedButtonIntroAnimation;
  animation-fill-mode: both;
  animation-duration: 0.3s;
  animation-delay: 0.3s;
}
.flyout-selector-button-container:hover .flyout-selector-button {
  -webkit-filter: brightness(100%);
}
.flyout-selector-button-container.disabled .flyout-selector-button-icon {
  cursor: default;
}
.flyout-selector-button-container.disabled:hover .flyout-selector-button {
  -webkit-filter: brightness(80%);
}
.flyout-selector-button-container:focus {
  outline: 0;
}
@-moz-keyframes FlyoutSelectorSelectedButtonIntroAnimation {
  0% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.96);
    opacity: 0;
  }
  10% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.96);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(1);
    transform: scale(0.96);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.8);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes FlyoutSelectorSelectedButtonIntroAnimation {
  0% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.96);
    opacity: 0;
  }
  10% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.96);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(1);
    transform: scale(0.96);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.8);
    transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes FlyoutSelectorSelectedButtonIntroAnimation {
  0% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.96);
    opacity: 0;
  }
  10% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.96);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(1);
    transform: scale(0.96);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.8);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes FlyoutSelectorSelectedButtonIntroAnimation {
  0% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.96);
    opacity: 0;
  }
  10% {
    -webkit-filter: brightness(1.5);
    transform: scale(0.96);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(1);
    transform: scale(0.96);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.8);
    transform: scale(1);
    opacity: 1;
  }
}
.champ-select-chroma-modal .chroma-information .chroma-name {
  font-family: var(--font-display);
}
.champ-select-chroma-modal .chroma-information .chroma-name .chroma-disabled-notification {
  font-family: var(--font-body);
}
.champ-select-chroma-modal .chroma-information .chroma-name {
  font-family: var(--font-display);
}
.champ-select-chroma-modal .chroma-information .chroma-name .chroma-disabled-notification {
  font-family: var(--font-body);
}
.champ-select-chroma-modal .chroma-information .chroma-name .chroma-disabled-notification {
  -webkit-user-select: none;
}
.champ-select-chroma-modal .chroma-information .chroma-name .chroma-disabled-notification {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champ-select-chroma-modal .chroma-information .chroma-name .chroma-disabled-notification {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.champ-select-chroma-modal .chroma-information .chroma-name .chroma-disabled-notification:lang(ja-jp) {
  font-size: 13px;
}
.champ-select-chroma-modal {
  display: flex;
  flex-direction: column;
  width: 305px;
  height: 355px;
  background: #000;
}
.champ-select-chroma-modal.hidden {
  display: none;
}
.champ-select-chroma-modal .chroma-information {
  position: relative;
  flex-grow: 1;
  width: 100%;
  border-bottom: 1px solid #463714;
  background-size: cover;
}
.champ-select-chroma-modal .chroma-information .chroma-information-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
}
.champ-select-chroma-modal .chroma-information .chroma-name {
  font-weight: bold;
  font-size: 24px;
  color: #f7f0de;
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
.champ-select-chroma-modal .chroma-information .chroma-name .chroma-disabled-notification {
  font-style: italic;
}
.champ-select-chroma-modal .chroma-selection {
  flex-grow: 0;
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.champ-select-chroma-modal lol-uikit-close-button {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
}
.chroma-skin-button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 2px #010a13;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chroma-skin-button.locked,
.chroma-skin-button.locked:hover,
.chroma-skin-button.locked:active {
  background: url("/fe/lol-champ-select/images/config/skin-carousel-locked.png") no-repeat;
  background-size: contain;
  cursor: pointer;
  pointer-events: all;
}
.chroma-skin-button.locked:hover:not([purchase-disabled]),
.chroma-skin-button.locked:hover:hover:not([purchase-disabled]),
.chroma-skin-button.locked:active:hover:not([purchase-disabled]) {
  background-image: url("/fe/lol-champ-select/images/config/skin-carousel-locked-hover.png");
}
.chroma-skin-button.locked.purchase-disabled,
.chroma-skin-button.locked:hover.purchase-disabled,
.chroma-skin-button.locked:active.purchase-disabled {
  background-image: url("/fe/lol-champ-select/images/config/skin-carousel-locked-inactive.png");
  pointer-events: none;
}
.chroma-skin-button .contents {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0e6d2 0%, #f0e6d2 48%, #be1e37 48%, #be1e37 52%, #f0e6d2 52%, #f0e6d2 100%);
  border: 2px solid #010a13;
}
.chroma-skin-button:hover,
.chroma-skin-button.selected {
  background: linear-gradient(to bottom, #c89b3c 0%, #916c30 33%, #c89b3c 75%, #cdbe91 100%);
  color: #c89b3c;
}
.chroma-skin-button.disabled,
.chroma-skin-button:active {
  background: none;
  background-color: #463714;
}
.chroma-skin-button.disabled .contents,
.chroma-skin-button:active .contents {
  background: none;
  background-color: #100e0d;
  color: #463714;
}
.chroma-skin-button.disabled:hover .contents,
.chroma-skin-button:active:hover .contents {
  background: none;
  background-color: #100e0d;
  box-shadow: none;
  color: #463714;
}
.trade-animation-container {
  position: absolute;
  top: 0;
  left: 0;
}
.trade-animation-container .trade-animate-left,
.trade-animation-container .trade-animate-right {
  position: absolute;
  transition: top 0.9s cubic-bezier(0, 1, 0, 1);
}
.trade-animation-container .trade-animate-left .champion-icon,
.trade-animation-container .trade-animate-right .champion-icon {
  background-size: cover;
}
.trade-animation-container .trade-animate-left .champion-icon:after,
.trade-animation-container .trade-animate-right .champion-icon:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: radial-gradient(68px at 34px 50%, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 24px, rgba(255,255,255,0) 34px);
}
.trade-animation-container .trade-animate-left .champion-ring,
.trade-animation-container .trade-animate-right .champion-ring {
  width: 62px;
  height: 62px;
  background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-ring.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}
.trade-animation-container .trade-animate-left .champion-icon,
.trade-animation-container .trade-animate-right .champion-icon {
  position: absolute;
  width: calc(62px - 4px);
  height: calc(62px - 4px);
  border-radius: 50%;
  overflow: hidden;
  align-self: center;
  flex: 0 0 auto;
  margin-left: 2px;
  margin-top: 2px;
  transform: translate3d(0, 0, 0);
}
.trade-animation-container .trade-animate-left .champion-icon.fit-icon,
.trade-animation-container .trade-animate-right .champion-icon.fit-icon {
  background-size: 120%;
  background-position: 50%;
}
.trade-animation-container .trade-animate-left .champion-icon video,
.trade-animation-container .trade-animate-right .champion-icon video,
.trade-animation-container .trade-animate-left .champion-icon img,
.trade-animation-container .trade-animate-right .champion-icon img {
  size: 120%;
  margin-left: -10%;
  margin-top: -10%;
}
.trade-animation-container.animating .trade-animate-left {
  animation: tradeAnimateLeft 0.9s 1;
  animation-fill-mode: forwards;
}
.trade-animation-container.animating .trade-animate-right {
  animation: tradeAnimateRight 0.9s 1;
  animation-fill-mode: forwards;
}
.trade-animation-container.animating .trade-animate-left,
.trade-animation-container.animating .trade-animate-right {
  animation-timing-function: cubic-bezier(0, 0, 0, 1);
}
.trade-animation-container.animating .trade-animate-left .champion-icon,
.trade-animation-container.animating .trade-animate-right .champion-icon {
  animation: tradeAnimateBrightness 0.767s;
  animation-fill-mode: forwards;
}
.trade-animation-container.animating .trade-animate-left .champion-icon:after,
.trade-animation-container.animating .trade-animate-right .champion-icon:after {
  animation: tradeAnimateOpacity 0.767s;
  animation-fill-mode: forwards;
}
@-moz-keyframes tradeAnimateLeft {
  0% {
    margin-left: 0;
  }
  15.873214285714285% {
    margin-left: -10px;
  }
  100% {
    margin-left: 0;
  }
}
@-webkit-keyframes tradeAnimateLeft {
  0% {
    margin-left: 0;
  }
  15.873214285714285% {
    margin-left: -10px;
  }
  100% {
    margin-left: 0;
  }
}
@-o-keyframes tradeAnimateLeft {
  0% {
    margin-left: 0;
  }
  15.873214285714285% {
    margin-left: -10px;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes tradeAnimateLeft {
  0% {
    margin-left: 0;
  }
  15.873214285714285% {
    margin-left: -10px;
  }
  100% {
    margin-left: 0;
  }
}
@-moz-keyframes tradeAnimateRight {
  0% {
    margin-left: 0;
  }
  15.873214285714285% {
    margin-left: 10px;
  }
  100% {
    margin-left: 0;
  }
}
@-webkit-keyframes tradeAnimateRight {
  0% {
    margin-left: 0;
  }
  15.873214285714285% {
    margin-left: 10px;
  }
  100% {
    margin-left: 0;
  }
}
@-o-keyframes tradeAnimateRight {
  0% {
    margin-left: 0;
  }
  15.873214285714285% {
    margin-left: 10px;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes tradeAnimateRight {
  0% {
    margin-left: 0;
  }
  15.873214285714285% {
    margin-left: 10px;
  }
  100% {
    margin-left: 0;
  }
}
@-moz-keyframes tradeAnimateOpacity {
  0% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0, 0, 0.66, 1);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes tradeAnimateOpacity {
  0% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0, 0, 0.66, 1);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes tradeAnimateOpacity {
  0% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0, 0, 0.66, 1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes tradeAnimateOpacity {
  0% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0, 0, 0.66, 1);
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes tradeAnimateBrightness {
  0% {
    -webkit-filter: brightness(1.88);
    animation-timing-function: cubic-bezier(0, 0, 0.66, 1);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
@-webkit-keyframes tradeAnimateBrightness {
  0% {
    -webkit-filter: brightness(1.88);
    animation-timing-function: cubic-bezier(0, 0, 0.66, 1);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
@-o-keyframes tradeAnimateBrightness {
  0% {
    -webkit-filter: brightness(1.88);
    animation-timing-function: cubic-bezier(0, 0, 0.66, 1);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
@keyframes tradeAnimateBrightness {
  0% {
    -webkit-filter: brightness(1.88);
    animation-timing-function: cubic-bezier(0, 0, 0.66, 1);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
.trade-dialog .trade-content-container .trade-message {
  font-family: var(--font-body);
}
.trade-dialog .trade-content-container .trade-message {
  -webkit-user-select: none;
}
.trade-dialog .trade-content-container .trade-message {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.trade-dialog .trade-content-container .trade-message {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.trade-dialog .trade-content-container .trade-message:lang(ja-jp) {
  font-size: 13px;
}
.trade-dialog {
  position: absolute;
  width: 330px;
  height: 94px;
  margin-top: -13px;
}
.trade-dialog .trade-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 94px;
}
.trade-dialog .trade-container {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to left, #000, #000);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  -webkit-mask-size: 100%;
  overflow: hidden;
}
.trade-dialog .champion-bg-overlay {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  background: -webkit-radial-gradient(circle closest-side, transparent 0%, transparent 60%, #010a13 85%, #010a13 100%);
  background-size: 400%;
  background-position: 12% 50%;
  background-repeat: no-repeat;
}
.trade-dialog .champion-bg-container {
  position: absolute;
  top: -12%;
  left: 30%;
  width: 100%;
}
.trade-dialog .champion-bg-container .champion-bg {
  overflow: hidden;
  position: absolute;
  width: 100%;
  padding-top: 59%;
  transform-origin: 38% 48%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}
.trade-dialog .trade-content-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  top: 0;
  bottom: 0;
  padding-left: 18px;
}
.trade-dialog .trade-content-container:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  left: 0;
}
.trade-dialog .trade-content-container .trade-message {
  width: 50%;
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.trade-dialog .trade-content-container .accept-button {
  margin-bottom: 10px;
}
.trade-dialog .trade-timer {
  position: relative;
  border-top: 1px solid transparent;
  border-image-source: linear-gradient(to left, #463714 79%, #785a28 100%);
  border-width: 1px 0 0 0;
  border-image-slice: 1 0 0 0;
  height: 4px;
  left: 0;
  bottom: 0;
  width: 100%;
}
.trade-dialog .trade-timer:before {
  content: '';
  position: absolute;
  border: 1px solid transparent;
  border-left: none;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(to right, #0a323c 0%, #0596aa 75%, #0ac8b9 90%, #cdfafa 99%, #cdfafa 100%);
  animation-duration: 15s;
  animation-name: tradetimeranimation;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
.trade-dialog .close-button-frame {
  position: absolute;
  width: 37px;
  height: 37px;
  top: -18px;
  right: -18px;
  padding: 2px;
  border-radius: 50%;
  border: 2px solid #463714;
  background-color: #010a13;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  transition: 500ms all cubic-bezier(0.02, 0.85, 0.08, 0.99), 100ms opacity ease;
}
.trade-dialog .close-button-frame .close-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transition: 500ms all cubic-bezier(0.02, 0.85, 0.08, 0.99), 100ms opacity ease;
}
.trade-dialog .sub-frame-top,
.trade-dialog .sub-frame-right {
  position: absolute;
}
.trade-dialog .sub-frame-top::before,
.trade-dialog .sub-frame-right::before {
  content: '';
  position: absolute;
}
.trade-dialog .sub-frame-top,
.trade-dialog .sub-frame-right,
.trade-dialog .close-button-frame,
.trade-dialog .close-button-frame .close-button {
  opacity: 0;
  animation: fadeIn 500ms ease forwards;
}
.trade-dialog .sub-frame-top {
  top: -4px;
  right: 13px;
  width: calc(15% - 13px);
  height: 0;
}
.trade-dialog .sub-frame-top::before {
  width: calc(100% - 8px);
  height: 0;
  border-image-source: url("/fe/lol-champ-select/images/trades/sub-border-secondary-horizontal.png");
  border-width: 4px 0 0 4px;
  border-image-width: 4px 0 0 4px;
  border-image-slice: 4 4 0 4;
  border-image-repeat: stretch;
}
.trade-dialog .sub-frame-right {
  top: 17px;
  right: 0;
  width: 0;
  height: calc(100% - 15px);
}
.trade-dialog .sub-frame-right::before {
  height: calc(100% - 8px);
  width: 0;
  border-image-source: url("/fe/lol-champ-select/images/trades/sub-border-secondary-vertical.png");
  border-width: 0 4px 4px 0;
  border-image-width: 0 4px 4px 0;
  border-image-slice: 4 4 4 0;
  border-image-repeat: stretch;
}
.trade-dialog.animated .trade-container {
  -webkit-mask-size: 100% 0%;
}
.trade-dialog.animated .champion-bg-container {
  transform: translateX(-15px);
  opacity: 0;
}
.trade-dialog.animated .champion-bg-container.champion-bg {
  transition: 300ms all linear;
}
.trade-dialog.animated .trade-content-container .trade-message {
  opacity: 0;
}
.trade-dialog.animated .trade-timer {
  bottom: 75%;
}
.trade-dialog.animated .close-button-frame {
  top: calc(25% - 18px);
  transform: scale(0.5);
  opacity: 0;
}
.trade-dialog.animated .close-button-frame .close-button {
  transform: rotate(100deg);
  opacity: 0;
}
.trade-dialog.animated .sub-frame-top,
.trade-dialog.animated .sub-frame-right {
  transition: 500ms all cubic-bezier(0.02, 0.85, 0.08, 0.99), 100ms opacity ease;
}
.trade-dialog.animated .sub-frame-top {
  top: 25%;
  right: 4px;
  width: 5px;
  opacity: 0;
}
.trade-dialog.animated .sub-frame-right {
  top: calc(25% + 8px);
  height: 0;
  opacity: 0;
}
.trade-dialog.animated.active .trade-container {
  -webkit-mask-size: 100% 25%;
  animation: maskIntro 500ms cubic-bezier(0.02, 0.85, 0.08, 0.99) forwards;
}
.trade-dialog.animated.active .trade-timer {
  animation: tradetimerIntro 500ms cubic-bezier(0.02, 0.85, 0.08, 0.99) forwards;
}
.trade-dialog.animated.active .trade-content-container .trade-message {
  opacity: 0;
  transform: translateX(-15px);
  animation: fadeIn 1000ms 100ms ease forwards, bgPosition 500ms 100ms ease forwards;
}
.trade-dialog.animated.active .champion-bg-container {
  animation: fadeIn 100ms linear forwards, bgPosition 600ms ease forwards;
}
.trade-dialog.animated.active .close-button-frame {
  top: -18px;
  transform: scale(1);
}
.trade-dialog.animated.active .close-button-frame .close-button {
  transform: rotate(0deg);
}
.trade-dialog.animated.active .sub-frame-top {
  top: -4px;
  right: 13px;
  width: calc(15% - 13px);
}
.trade-dialog.animated.active .sub-frame-right {
  top: 17px;
  height: calc(100% - 15px);
}
.trade-dialog.animated.active.request .champion-bg-container .champion-bg {
  transform: scale(1.1);
  animation: bgFilter 500ms ease forwards, bgScale 14700ms 300ms linear reverse forwards;
}
.trade-dialog.animated.active.receive .champion-bg-container .champion-bg {
  transform: scale(1.35);
  animation: bgFilter 500ms ease forwards, bgScale 14700ms 300ms linear forwards;
}
.trade-dialog.animated.active.receive.canceled .champion-bg-container .champion-bg,
.trade-dialog.animated.active.receive.declined .champion-bg-container .champion-bg,
.trade-dialog.animated.active.receive.busy .champion-bg-container .champion-bg,
.trade-dialog.animated.active.receive.error .champion-bg-container .champion-bg {
  animation-play-state: running, paused;
  animation-name: bgCanceled, bgScale;
  transition: 300ms all ease;
}
.trade-dialog.animated.active.accepted .champion-bg-container .champion-bg {
  animation-play-state: paused;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes bgFilter {
  from {
    -webkit-filter: brightness(1.75);
  }
  to {
    -webkit-filter: brightness(1);
  }
}
@-webkit-keyframes bgFilter {
  from {
    -webkit-filter: brightness(1.75);
  }
  to {
    -webkit-filter: brightness(1);
  }
}
@-o-keyframes bgFilter {
  from {
    -webkit-filter: brightness(1.75);
  }
  to {
    -webkit-filter: brightness(1);
  }
}
@keyframes bgFilter {
  from {
    -webkit-filter: brightness(1.75);
  }
  to {
    -webkit-filter: brightness(1);
  }
}
@-moz-keyframes bgPosition {
  from {
    transform: translateX(-15px);
  }
  to {
    transform: translateX(0);
  }
}
@-webkit-keyframes bgPosition {
  from {
    transform: translateX(-15px);
  }
  to {
    transform: translateX(0);
  }
}
@-o-keyframes bgPosition {
  from {
    transform: translateX(-15px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes bgPosition {
  from {
    transform: translateX(-15px);
  }
  to {
    transform: translateX(0);
  }
}
@-moz-keyframes bgScale {
  from {
    transform: scale(1.35);
  }
  to {
    transform: scale(1.1);
  }
}
@-webkit-keyframes bgScale {
  from {
    transform: scale(1.35);
  }
  to {
    transform: scale(1.1);
  }
}
@-o-keyframes bgScale {
  from {
    transform: scale(1.35);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes bgScale {
  from {
    transform: scale(1.35);
  }
  to {
    transform: scale(1.1);
  }
}
@-moz-keyframes bgCanceled {
  from {
    -webkit-filter: grayscale(0%);
  }
  to {
    -webkit-filter: grayscale(100%);
  }
}
@-webkit-keyframes bgCanceled {
  from {
    -webkit-filter: grayscale(0%);
  }
  to {
    -webkit-filter: grayscale(100%);
  }
}
@-o-keyframes bgCanceled {
  from {
    -webkit-filter: grayscale(0%);
  }
  to {
    -webkit-filter: grayscale(100%);
  }
}
@keyframes bgCanceled {
  from {
    -webkit-filter: grayscale(0%);
  }
  to {
    -webkit-filter: grayscale(100%);
  }
}
@-moz-keyframes maskIntro {
  from {
    -webkit-mask-size: 100% 25%;
  }
  to {
    -webkit-mask-size: 100% 100%;
  }
}
@-webkit-keyframes maskIntro {
  from {
    -webkit-mask-size: 100% 25%;
  }
  to {
    -webkit-mask-size: 100% 100%;
  }
}
@-o-keyframes maskIntro {
  from {
    -webkit-mask-size: 100% 25%;
  }
  to {
    -webkit-mask-size: 100% 100%;
  }
}
@keyframes maskIntro {
  from {
    -webkit-mask-size: 100% 25%;
  }
  to {
    -webkit-mask-size: 100% 100%;
  }
}
@-moz-keyframes tradetimerIntro {
  0% {
    bottom: 75%;
  }
  100% {
    bottom: 0;
  }
}
@-webkit-keyframes tradetimerIntro {
  0% {
    bottom: 75%;
  }
  100% {
    bottom: 0;
  }
}
@-o-keyframes tradetimerIntro {
  0% {
    bottom: 75%;
  }
  100% {
    bottom: 0;
  }
}
@keyframes tradetimerIntro {
  0% {
    bottom: 75%;
  }
  100% {
    bottom: 0;
  }
}
@-moz-keyframes tradetimeranimation {
  0% {
    width: calc(100% - 1px);
  }
  100% {
    width: 0%;
  }
}
@-webkit-keyframes tradetimeranimation {
  0% {
    width: calc(100% - 1px);
  }
  100% {
    width: 0%;
  }
}
@-o-keyframes tradetimeranimation {
  0% {
    width: calc(100% - 1px);
  }
  100% {
    width: 0%;
  }
}
@keyframes tradetimeranimation {
  0% {
    width: calc(100% - 1px);
  }
  100% {
    width: 0%;
  }
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  font-family: var(--font-display);
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  -webkit-user-select: none;
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  text-transform: uppercase;
}
.champion-select .corner-game-info-container .team-size:lang(ko-kr),
.champion-select .corner-game-info-container .queue-name:lang(ko-kr),
.champion-select .corner-game-info-container .team-size:lang(ja-jp),
.champion-select .corner-game-info-container .queue-name:lang(ja-jp),
.champion-select .corner-game-info-container .team-size:lang(tr-tr),
.champion-select .corner-game-info-container .queue-name:lang(tr-tr),
.champion-select .corner-game-info-container .team-size:lang(el-gr),
.champion-select .corner-game-info-container .queue-name:lang(el-gr),
.champion-select .corner-game-info-container .team-size:lang(th-th),
.champion-select .corner-game-info-container .queue-name:lang(th-th),
.champion-select .corner-game-info-container .team-size:lang(zh-tw),
.champion-select .corner-game-info-container .queue-name:lang(zh-tw) {
  text-transform: none;
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  color: #f0e6d2;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.075em;
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  font-family: var(--font-display);
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  font-family: var(--font-display);
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  -webkit-user-select: none;
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  text-transform: uppercase;
}
.champion-select .corner-game-info-container .team-size:lang(ko-kr),
.champion-select .corner-game-info-container .queue-name:lang(ko-kr),
.champion-select .corner-game-info-container .team-size:lang(ja-jp),
.champion-select .corner-game-info-container .queue-name:lang(ja-jp),
.champion-select .corner-game-info-container .team-size:lang(tr-tr),
.champion-select .corner-game-info-container .queue-name:lang(tr-tr),
.champion-select .corner-game-info-container .team-size:lang(el-gr),
.champion-select .corner-game-info-container .queue-name:lang(el-gr),
.champion-select .corner-game-info-container .team-size:lang(th-th),
.champion-select .corner-game-info-container .queue-name:lang(th-th),
.champion-select .corner-game-info-container .team-size:lang(zh-tw),
.champion-select .corner-game-info-container .queue-name:lang(zh-tw) {
  text-transform: none;
}
.champion-select .corner-game-info-container .team-size,
.champion-select .corner-game-info-container .queue-name {
  color: #f0e6d2;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.075em;
}
/*
#rcp-fe-viewport-root {
  section.rcp-fe-viewport-main {
    width: 1278px;
  }

  section.rcp-fe-viewport-sidebar {
    display: none;
  }
}
*/
.champion-select {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  height: 718px;
  background-size: cover;
  background-color: #010a13;
  -webkit-user-select: none;
  cursor: default;
  width: 1278px;
  overflow: hidden;
}
.champion-select .hidden {
  opacity: 0;
  pointer-events: none;
}
.champion-select .removed {
  display: none;
}
.champion-select .top-darken {
  position: absolute;
  width: 100%;
  height: 100px;
  background-image: url("/fe/lol-champ-select/images/top-darkening.png");
}
.champion-select .ban-background-overlay-container {
  background-image: radial-gradient(circle farthest-corner at 50% 40%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 30%, #000 70%), linear-gradient(to top, rgba(183,0,0,0.37) 0%, rgba(165,0,0,0.37) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
}
.champion-select.is-banning-now .ban-background-overlay-container,
.champion-select.ban-showcase-screen .ban-background-overlay-container {
  opacity: 1;
}
.champion-select.ban-showcase-screen .ban-background-overlay-container {
  background-image: radial-gradient(circle farthest-corner at 50% 40%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 30%, #000 70%), linear-gradient(to top, rgba(183,0,0,0.37) 0%, rgba(165,0,0,0.37) 100%);
}
.champion-select.ban-showcase-screen .champ-select-bg {
  -webkit-filter: contrast(1.2) brightness(0.9);
}
.champion-select .champ-select-bg {
  position: absolute;
  background: #000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  transform: translateZ(0);
}
.champion-select .champ-select-bg:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to top, #010a13 0%, rgba(1,10,19,0) 40%);
}
.champion-select lol-uikit-background-switcher {
  background: transparent;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.champion-select lol-uikit-background-switcher .locked {
  -webkit-filter: grayscale(50%);
}
.champion-select lol-uikit-background-switcher.locked::after {
  content: '';
  background: rgba(1,10,19,0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.champion-select .champion-select-summoner-array-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.champion-select .champion-select-main-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25%;
  right: 25%;
}
.champion-select .champion-config-wrapper {
  position: absolute;
  bottom: 16px;
  width: 100%;
}
.champion-select .champion-config-wrapper .champion-config-container {
  width: 100%;
  height: 37px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.champion-select .champion-config-wrapper .champion-config-container:before,
.champion-select .champion-config-wrapper .champion-config-container:after {
  border-top: 1px solid #614a25;
  content: '';
  display: block;
  margin: 0 10px;
  width: 50px;
}
.champion-select .champion-config-wrapper .dropdowns {
  margin-left: 9px;
  display: flex;
  flex-direction: column-reverse;
}
.champion-select .champion-config-wrapper .dropdowns lol-uikit-framed-dropdown {
  height: 27px;
  width: 193px;
}
.champion-select .champion-config-wrapper .dropdowns lol-uikit-framed-dropdown::shadow .ui-dropdown-current .lol-tooltip-component {
  display: none;
}
.champion-select .game-info-container {
  text-align: center;
  position: absolute;
  bottom: 50px;
  width: 100%;
}
.champion-select .pregame-chat-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 184px;
  margin-left: 20px;
  margin-bottom: 20px;
}
.champion-select.selected-screen.pre-animation,
.champion-select.wait-screen.pre-animation {
  -webkit-filter: brightness(1.8) contrast(0.8);
}
.champion-select.selected-screen.pre-animation lol-uikit-background-switcher,
.champion-select.wait-screen.pre-animation lol-uikit-background-switcher {
  opacity: 0;
}
.champion-select.selected-screen.pre-animation .summoner-array.your-party,
.champion-select.wait-screen.pre-animation .summoner-array.your-party {
  transform: translateX(46.5px) translateY(5px) scale(0.9);
}
.champion-select.selected-screen.pre-animation .summoner-array.enemy-party,
.champion-select.wait-screen.pre-animation .summoner-array.enemy-party {
  transform: translateX(-46.5px) translateY(5px) scale(0.9);
}
.champion-select.selected-screen.pre-animation .champion-select-main-container .timer-status,
.champion-select.wait-screen.pre-animation .champion-select-main-container .timer-status {
  transform: translateY(-5px) scale(0.9);
}
.champion-select.selected-screen.pre-animation .champion-select-main-container .skin-select,
.champion-select.wait-screen.pre-animation .champion-select-main-container .skin-select {
  transform: translateY(-10px) scale(0.9);
}
.champion-select.selected-screen.pre-animation .champion-select-main-container .champion-config-wrapper,
.champion-select.wait-screen.pre-animation .champion-select-main-container .champion-config-wrapper {
  transform: translateX(calc(-50% - 25px)) translateY(5px) scale(0.9);
}
.champion-select.selected-screen.pre-animation .champion-splash-ring,
.champion-select.wait-screen.pre-animation .champion-splash-ring {
  transform: translateX(-50%) translateY(5px) scale(0.9);
}
.champion-select .bottom-right-buttons {
  position: absolute;
  right: 20px;
  bottom: 19px;
  display: flex;
  align-items: flex-end;
}
.champion-select .corner-game-info-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 8px;
  margin-bottom: -1px;
}
.champion-select .corner-game-info-container .team-size {
  color: #a09b8c;
}
.champion-select .corner-game-info-container .queue-name {
  color: #a09b8c;
}
.champion-select.pick-screen .champion-splash-ring,
.champion-select.ban-showcase-screen .champion-splash-ring {
  display: none;
}
.champion-select.position-assignment-screen .champion-splash-ring {
  display: none;
}
.champion-select.selected-screen .pick-ban-ring {
  display: none;
}
.champion-select.has-bans {
  --banning-phase-outro-animation-duration: 400ms;
}
.champion-select.has-bans .summoner-wrapper:nth-child(1n + 0) .summoner-object.right .champion-icon-container,
.champion-select.has-bans .summoner-wrapper:nth-child(1n + 0) .summoner-object.right .player-details {
  animation-timing-function: cubic-bezier(0, 0.95, 0, 1);
}
.champion-select.has-bans .summoner-wrapper:nth-child(2n + 0) .summoner-object.right .champion-icon-container,
.champion-select.has-bans .summoner-wrapper:nth-child(2n + 0) .summoner-object.right .player-details {
  animation-timing-function: cubic-bezier(0, 0.9, 0.7, 1);
}
.champion-select.has-bans .summoner-wrapper:nth-child(3n + 0) .summoner-object.right .champion-icon-container,
.champion-select.has-bans .summoner-wrapper:nth-child(3n + 0) .summoner-object.right .player-details {
  animation-timing-function: cubic-bezier(0.1, 0.2, 0.3, 1);
}
.champion-select.has-bans .summoner-object.right .champion-icon-container,
.champion-select.has-bans .summoner-object.right .player-details {
  animation-duration: 400ms;
  animation-delay: 300ms;
  animation-fill-mode: forwards;
  transition: 300ms opacity;
}
.champion-select.has-bans .summoner-object.right .champion-icon-container,
.champion-select.has-bans .summoner-object.right .player-details {
  transform: translateX(52px);
  animation-name: summoner-object-draft-intro-right;
}
.champion-select.has-bans .summoner-object .champion-icon-container .champion-icon {
  background-color: #010a13;
}
.champion-select.has-bans:not(.someone-is-banning) .summoner-object.has-pick-action.on-players-team.actions-complete .summoner-spells,
.champion-select.has-bans:not(.someone-is-banning) .summoner-object.has-pick-action.on-players-team.is-picking-now .summoner-spells {
  opacity: 1;
}
.champion-select.has-bans.is-spectating:not(.someone-is-banning) .summoner-object.has-pick-action.actions-complete .summoner-spells,
.champion-select.has-bans.is-spectating:not(.someone-is-banning) .summoner-object.has-pick-action.is-picking-now .summoner-spells {
  opacity: 1;
}
.champion-select.has-bans .champion-splash-ring .ring-splash-inner {
  transition: -webkit-filter var(--banning-phase-outro-animation-duration);
}
.champion-select.has-bans .champion-splash-ring .ring-splash-outer {
  transition: -webkit-filter var(--banning-phase-outro-animation-duration);
}
.champion-select.has-bans.banning .ring-splash-inner {
  -webkit-filter: saturate(0.5) contrast(0.8) brightness(1.2);
}
.champion-select.has-bans.banning .ring-splash-outer {
  -webkit-filter: saturate(0.8) brightness(0.9) contrast(0.3);
}
.champion-select.has-bans .summoner-array .lines {
  transition: -webkit-filter var(--banning-phase-outro-animation-duration);
  -webkit-filter: saturate(0.3);
}
@-moz-keyframes summoner-object-draft-intro-right {
  0% {
    transform: translateX(52px);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes summoner-object-draft-intro-right {
  0% {
    transform: translateX(52px);
  }
  100% {
    transform: translateX(0);
  }
}
@-o-keyframes summoner-object-draft-intro-right {
  0% {
    transform: translateX(52px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes summoner-object-draft-intro-right {
  0% {
    transform: translateX(52px);
  }
  100% {
    transform: translateX(0);
  }
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button,
.champion-select .banning .action-button {
  font-family: var(--font-display);
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button,
.champion-select .banning .action-button {
  font-family: var(--font-display);
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button,
.champion-select .banning .action-button {
  -webkit-user-select: none;
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button,
.champion-select .banning .action-button {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-select .action-button {
  text-transform: uppercase;
}
.champion-select .action-button:lang(ko-kr),
.champion-select .action-button:lang(ja-jp),
.champion-select .action-button:lang(tr-tr),
.champion-select .action-button:lang(el-gr),
.champion-select .action-button:lang(th-th),
.champion-select .action-button:lang(zh-tw) {
  text-transform: none;
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button,
.champion-select .banning .action-button {
  color: #c8aa6e;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.0325em;
}
.champion-select .picking .action-button:hover,
.champion-select.selected-screen .action-button:hover,
.champion-select .banning .action-button:hover {
  color: #f0e6d2;
}
.champion-select .picking .action-button:disabled,
.champion-select.selected-screen .action-button:disabled,
.champion-select .banning .action-button:disabled,
.champion-select .picking .action-button:disabled:hover,
.champion-select.selected-screen .action-button:disabled:hover,
.champion-select .banning .action-button:disabled:hover,
.champion-select .picking .action-button[disabled='true'],
.champion-select.selected-screen .action-button[disabled='true'],
.champion-select .banning .action-button[disabled='true'],
.champion-select .picking .action-button[disabled='true']:hover,
.champion-select.selected-screen .action-button[disabled='true']:hover,
.champion-select .banning .action-button[disabled='true']:hover {
  color: #5c5b57;
  cursor: default;
}
.champion-select .picking .action-button:active,
.champion-select.selected-screen .action-button:active,
.champion-select .banning .action-button:active {
  color: #785a28;
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button {
  color: #b2d9db;
}
.champion-select .picking .action-button:hover,
.champion-select.selected-screen .action-button:hover {
  color: #cdfafa;
}
.champion-select .picking .action-button:active,
.champion-select.selected-screen .action-button:active {
  color: #005a82;
}
.champion-select .banning .action-button {
  color: #be1e37;
}
.champion-select .banning .action-button:hover {
  color: #ff2345;
}
.champion-select .banning .action-button:active {
  color: #802626;
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button,
.champion-select .banning .action-button {
  font-family: var(--font-display);
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button,
.champion-select .banning .action-button {
  font-family: var(--font-display);
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button,
.champion-select .banning .action-button {
  -webkit-user-select: none;
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button,
.champion-select .banning .action-button {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-select .action-button {
  text-transform: uppercase;
}
.champion-select .action-button:lang(ko-kr),
.champion-select .action-button:lang(ja-jp),
.champion-select .action-button:lang(tr-tr),
.champion-select .action-button:lang(el-gr),
.champion-select .action-button:lang(th-th),
.champion-select .action-button:lang(zh-tw) {
  text-transform: none;
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button,
.champion-select .banning .action-button {
  color: #c8aa6e;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.0325em;
}
.champion-select .picking .action-button:hover,
.champion-select.selected-screen .action-button:hover,
.champion-select .banning .action-button:hover {
  color: #f0e6d2;
}
.champion-select .picking .action-button:disabled,
.champion-select.selected-screen .action-button:disabled,
.champion-select .banning .action-button:disabled,
.champion-select .picking .action-button:disabled:hover,
.champion-select.selected-screen .action-button:disabled:hover,
.champion-select .banning .action-button:disabled:hover,
.champion-select .picking .action-button[disabled='true'],
.champion-select.selected-screen .action-button[disabled='true'],
.champion-select .banning .action-button[disabled='true'],
.champion-select .picking .action-button[disabled='true']:hover,
.champion-select.selected-screen .action-button[disabled='true']:hover,
.champion-select .banning .action-button[disabled='true']:hover {
  color: #5c5b57;
  cursor: default;
}
.champion-select .picking .action-button:active,
.champion-select.selected-screen .action-button:active,
.champion-select .banning .action-button:active {
  color: #785a28;
}
.champion-select .picking .action-button,
.champion-select.selected-screen .action-button {
  color: #b2d9db;
}
.champion-select .picking .action-button:hover,
.champion-select.selected-screen .action-button:hover {
  color: #cdfafa;
}
.champion-select .picking .action-button:active,
.champion-select.selected-screen .action-button:active {
  color: #005a82;
}
.champion-select .banning .action-button {
  color: #be1e37;
}
.champion-select .banning .action-button:hover {
  color: #ff2345;
}
.champion-select .banning .action-button:active {
  color: #802626;
}
.champion-select .action-button-container {
  width: 178px;
  height: 82px;
  margin: 0px auto;
  pointer-events: none;
}
.champion-select .action-button-container::before,
.champion-select .action-button-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/fe/lol-champ-select/images/config/linework-button.png");
  background-repeat: no-repeat;
  background-position: 50% -240px;
  pointer-events: none;
}
.champion-select .action-button-container::after {
  background-image: url("/fe/lol-champ-select/images/config/linework-button-glow.png");
}
.champion-select .action-button {
  position: relative;
  text-align: center;
  height: 42px;
  top: 5px;
  pointer-events: all;
  cursor: pointer;
}
.champion-select .action-button:after {
  content: url("/fe/lol-champ-select/images/action-button/button-lockin-hover.png") url("/fe/lol-champ-select/images/action-button/button-lockin-click.png") url("/fe/lol-champ-select/images/action-button/button-lockin-disable.png") url("/fe/lol-champ-select/images/action-button/button-ban-hover.png") url("/fe/lol-champ-select/images/action-button/button-ban-inactive.png");
  display: none;
  height: 0;
  width: 0;
}
.champion-select .action-button .action-button-background,
.champion-select .action-button .action-button-background::before,
.champion-select .action-button .action-button-background::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: center;
}
.champion-select .action-button .action-button-inner {
  padding-top: 10px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.champion-select.is-picking-now.pick-screen .action-button-container::after {
  background-position: 50% 0px;
}
.champion-select.is-banning-now .action-button-container::after {
  background-position: 50% -120px;
}
.champion-select .picking .action-button .action-button-background::before,
.champion-select.selected-screen .action-button .action-button-background::before {
  background-image: url("/fe/lol-champ-select/images/action-button/button-lockin.png");
}
.champion-select .picking .action-button:hover .action-button-background::after,
.champion-select.selected-screen .action-button:hover .action-button-background::after {
  background-image: url("/fe/lol-champ-select/images/action-button/button-lockin-hover.png");
}
.champion-select .picking .action-button:active .action-button-background::after,
.champion-select.selected-screen .action-button:active .action-button-background::after {
  background-image: url("/fe/lol-champ-select/images/action-button/button-lockin-click.png");
}
.champion-select .picking .action-button[disabled='true'],
.champion-select.selected-screen .action-button[disabled='true'] {
  cursor: default;
}
.champion-select .picking .action-button[disabled='true'] .action-button-background::after,
.champion-select.selected-screen .action-button[disabled='true'] .action-button-background::after {
  background-image: url("/fe/lol-champ-select/images/action-button/button-lockin-disable.png");
}
.champion-select .banning .action-button .action-button-background::before {
  background-image: url("/fe/lol-champ-select/images/action-button/button-ban.png");
}
.champion-select .banning .action-button:hover .action-button-background::after {
  background-image: url("/fe/lol-champ-select/images/action-button/button-ban-hover.png");
}
.champion-select .banning .action-button:active .action-button-background::after {
  background-image: url("/fe/lol-champ-select/images/action-button/button-ban-inactive.png");
}
.champion-select .banning .action-button[disabled='true'] {
  cursor: default;
}
.champion-select .banning .action-button[disabled='true'] .action-button-background::after {
  background-image: url("/fe/lol-champ-select/images/action-button/button-lockin-disable.png");
}
.champion-select.is-banning-now.timer-less-than-11-seconds .action-button-container::after,
.champion-select.is-picking-now.timer-less-than-11-seconds .action-button-container::after {
  animation-name: actionButtonGlowMultiPulse;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 10;
  animation-timing-function: cubic-bezier(0.46, 0.19, 0.7, 0.98);
}
@-moz-keyframes actionButtonGlowMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes actionButtonGlowMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes actionButtonGlowMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes actionButtonGlowMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.ban-showcase .ban-announcement-label,
.ban-showcase .waiting-for-their-bans-text {
  font-family: var(--font-display);
}
.ban-showcase .ban-announcement-label,
.ban-showcase .waiting-for-their-bans-text {
  -webkit-user-select: none;
}
.ban-showcase .ban-announcement-label,
.ban-showcase .waiting-for-their-bans-text {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.ban-showcase .ban-announcement-label,
.ban-showcase .waiting-for-their-bans-text {
  text-transform: uppercase;
}
.ban-showcase .ban-announcement-label:lang(ko-kr),
.ban-showcase .waiting-for-their-bans-text:lang(ko-kr),
.ban-showcase .ban-announcement-label:lang(ja-jp),
.ban-showcase .waiting-for-their-bans-text:lang(ja-jp),
.ban-showcase .ban-announcement-label:lang(tr-tr),
.ban-showcase .waiting-for-their-bans-text:lang(tr-tr),
.ban-showcase .ban-announcement-label:lang(el-gr),
.ban-showcase .waiting-for-their-bans-text:lang(el-gr),
.ban-showcase .ban-announcement-label:lang(th-th),
.ban-showcase .waiting-for-their-bans-text:lang(th-th),
.ban-showcase .ban-announcement-label:lang(zh-tw),
.ban-showcase .waiting-for-their-bans-text:lang(zh-tw) {
  text-transform: none;
}
.ban-showcase .ban-announcement-label,
.ban-showcase .waiting-for-their-bans-text {
  color: #f0e6d2;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.05em;
}
.ban-showcase {
  width: 100%;
  height: 388px;
  position: absolute;
  top: 125px;
}
.ban-showcase .ban-announcement-label {
  width: 564px;
  top: 140px;
  left: 39px;
  position: absolute;
  align-items: center;
  text-align: center;
  display: flex;
  margin-bottom: 4px;
  padding: 46px 0;
}
.ban-showcase .ban-announcement-label:before,
.ban-showcase .ban-announcement-label:after {
  content: '';
  flex: 1 1 100%;
  height: 1px;
  background-color: #be1e37;
  margin: 0 22px;
}
.ban-showcase .ban-announcement-text {
  position: relative;
}
.ban-showcase .ban-announcement-label-glow {
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 0 0 8px #fff, 0 0 10px #fff;
  opacity: 0;
}
.ban-showcase .waiting-for-their-bans-label {
  width: 100%;
  position: absolute;
  top: 302px;
  text-align: center;
  opacity: 0;
}
.ban-showcase .waiting-for-their-bans-text {
  position: relative;
}
.ban-showcase .waiting-for-their-bans-glow {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 0 0 8px #fff, 0 0 10px #fff;
  opacity: 0;
}
.ban-showcase .ban-announcement-label,
.ban-showcase .waiting-for-their-bans-text {
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.ban-showcase .enemy-bans-wrapper {
  width: 100%;
}
.ban-showcase.waiting-for-their-team-bans .waiting-for-their-bans-label {
  animation-name: banShowcaseLabelZoomIntro, fadeIn0to1;
  animation-delay: 0s;
  animation-duration: 0.2s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), linear;
  opacity: 1;
}
.ban-showcase.waiting-for-their-team-bans .waiting-for-their-bans-glow {
  animation-name: fadeOut1to0;
  animation-delay: 0.2s;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77);
}
.ban-showcase.enemy-team-visible {
  animation-name: banShowcaseScaleOutro, fadeOut1to0;
  animation-delay: 6.1s;
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), linear;
  animation-fill-mode: forwards;
}
.ban-showcase.enemy-team-visible .waiting-for-their-bans-label {
  animation-name: banShowcaseLabelZoomOutro, fadeOut1to0;
  animation-delay: 0.53s;
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0, 0, 0, 1), linear;
  animation-fill-mode: backwards, backwards;
}
.ban-showcase.enemy-team-visible .ban-announcement-label {
  animation-name: banShowcaseAnnouncementLabelZoomIntro, fadeIn0to1;
  animation-delay: 0.7s, 0.7s;
  animation-duration: 0.2s, 0.2s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), linear;
}
.ban-showcase.enemy-team-visible .ban-announcement-label-glow {
  animation-name: fadeOut1to0;
  animation-delay: 0.9s;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77);
}
.ban-showcase.enemy-team-visible .ban-announcement-bg-glow {
  background-image: radial-gradient(circle closest-side at 50% 50%, rgba(255,103,127,0.27) 0%, rgba(255,103,127,0.2) 20%, rgba(255,103,127,0) 100%);
  width: 100%;
  height: 225px;
  position: absolute;
  top: -47px;
  left: 0;
  animation-name: fadeOut1to0;
  animation-delay: 0.4s;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77);
  opacity: 0;
}
.ban-showcase.enemy-team-visible .ban-announcement-label::before,
.ban-showcase.enemy-team-visible .ban-announcement-label::after {
  animation-name: fadeIn0to1, banAnnouncementRuleColorIntro;
  animation-delay: 0.33s, 0.4s;
  animation-duration: 0.03s, 0.83s;
  animation-fill-mode: backwards;
  animation-timing-function: linear;
}
@-moz-keyframes banShowcaseLabelZoomIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes banShowcaseLabelZoomIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes banShowcaseLabelZoomIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes banShowcaseLabelZoomIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes banShowcaseAnnouncementLabelZoomIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes banShowcaseAnnouncementLabelZoomIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes banShowcaseAnnouncementLabelZoomIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes banShowcaseAnnouncementLabelZoomIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes banShowcaseLabelZoomOutro {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@-webkit-keyframes banShowcaseLabelZoomOutro {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@-o-keyframes banShowcaseLabelZoomOutro {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes banShowcaseLabelZoomOutro {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@-moz-keyframes banAnnouncementRuleColorIntro {
  0% {
    background-color: #fff;
  }
  100% {
    background-color: #be1e37;
  }
}
@-webkit-keyframes banAnnouncementRuleColorIntro {
  0% {
    background-color: #fff;
  }
  100% {
    background-color: #be1e37;
  }
}
@-o-keyframes banAnnouncementRuleColorIntro {
  0% {
    background-color: #fff;
  }
  100% {
    background-color: #be1e37;
  }
}
@keyframes banAnnouncementRuleColorIntro {
  0% {
    background-color: #fff;
  }
  100% {
    background-color: #be1e37;
  }
}
@-moz-keyframes banShowcaseScaleOutro {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.7);
  }
}
@-webkit-keyframes banShowcaseScaleOutro {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.7);
  }
}
@-o-keyframes banShowcaseScaleOutro {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.7);
  }
}
@keyframes banShowcaseScaleOutro {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.7);
  }
}
.ban-showcase-team .bans-label {
  font-family: var(--font-display);
}
.ban-showcase-team .ban-champion > .champion-name {
  font-family: var(--font-body);
}
.ban-showcase-team .bans-label,
.ban-showcase-team .ban-champion > .champion-name {
  -webkit-user-select: none;
}
.ban-showcase-team .bans-label,
.ban-showcase-team .ban-champion > .champion-name {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.ban-showcase-team .bans-label {
  text-transform: uppercase;
}
.ban-showcase-team .bans-label:lang(ko-kr),
.ban-showcase-team .bans-label:lang(ja-jp),
.ban-showcase-team .bans-label:lang(tr-tr),
.ban-showcase-team .bans-label:lang(el-gr),
.ban-showcase-team .bans-label:lang(th-th),
.ban-showcase-team .bans-label:lang(zh-tw) {
  text-transform: none;
}
.ban-showcase-team .bans-label {
  color: #f0e6d2;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.075em;
}
.ban-showcase-team .ban-champion > .champion-name {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.ban-showcase-team .ban-champion > .champion-name:lang(ja-jp) {
  font-size: 13px;
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail {
  border: 1px solid #3c3c41;
  outline: 1px solid rgba(1,10,19,0.75);
  box-shadow: none;
}
.ban-showcase-team {
  height: 132px;
  width: 100%;
  position: absolute;
  top: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transform: translateZ(0);
}
.ban-showcase-team .bans-label {
  height: 20px;
  color: #0a96aa;
  position: relative;
  transform: translateZ(0);
}
.ban-showcase-team.vote {
  top: 260px;
}
.ban-showcase-team .bans-label-glow {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateZ(0);
}
.ban-showcase-team.my-team .bans-label-glow {
  text-shadow: 0 0 8px #fff, 0 0 12px #fff;
}
.ban-showcase-team.their-team .bans-label-glow {
  text-shadow: 0 0 8px #fff, 0 0 12px #fff;
}
.ban-showcase-team .bans-list {
  width: 510px;
  height: 94px;
  display: flex;
  justify-content: space-around;
  transform: translateZ(0);
}
.ban-showcase-team .ban-champion {
  width: 69px;
  height: 83px;
  padding: 1px;
  transform: translateZ(0);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container {
  width: 69px;
  height: 83px;
  padding: 1px;
  position: absolute;
  transform: translateZ(0);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail {
  display: inline-block;
  width: 67px;
  height: 67px;
  background-color: rgba(1,10,19,0.8);
  -webkit-filter: none;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(1,10,19,0.8);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail > .thumbnail-circle-x-background {
  width: 65%;
  height: 65%;
  position: absolute;
  top: 11px;
  left: 10px;
  transform: translateZ(0);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail > .champion-background-image {
  width: 72px;
  height: 72px;
  position: absolute;
  margin-left: -4px;
  margin-top: -4px;
  -webkit-filter: none;
  transform: translateZ(0);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-champion-thumbnail > .champion-background-image.grayed-out {
  -webkit-filter: grayscale(1) brightness(0.75);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-gradient-background {
  width: 120px;
  height: 120px;
  top: -25px;
  left: -25px;
  position: absolute;
  background-image: radial-gradient(circle closest-side at 50% 50%, rgba(160,15,38,0.47) 0%, rgba(183,14,41,0.8) 20%, rgba(255,103,127,0) 100%);
  opacity: 0;
  transform: translateZ(0);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-marching-border-background-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-marching-border-background-container .ban-marching-border-background {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 71px;
  height: 71px;
  overflow: hidden;
  -webkit-filter: drop-shadow(0px 0px 3px #f00);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-marching-border-background-container .ban-marching-border-background::after {
  content: '';
  position: absolute;
  background-image: linear-gradient(180deg, transparent 57px, #ff3217 61px, rgba(255,50,23,0) 122px);
  top: -50px;
  left: -50px;
  right: 50%;
  bottom: -50px;
  transform: rotate(0deg);
  transform-origin: right center;
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .ban-marching-border-background-container .ban-marching-border-background::before {
  content: '';
  position: absolute;
  background-image: linear-gradient(0deg, transparent 57px, #ff3217 61px, rgba(255,50,23,0) 122px);
  top: -50px;
  left: 50%;
  right: -50px;
  bottom: -50px;
  transform: rotate(0deg);
  transform-origin: left center;
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .circle-x-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("/fe/lol-champ-select/images/ban-showcase/icon-ban.png");
  background-size: 30%;
  background-position-x: 50%;
  background-position-y: 90%;
  background-repeat: no-repeat;
  position: absolute;
  transform: translateZ(0);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container > .circle-x-overlay.red {
  background-image: url("/fe/lol-champ-select/images/ban-showcase/icon-ban-red.png");
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container.vote > .ban-gradient-background {
  background-image: radial-gradient(circle closest-side at 50% 50%, rgba(38,15,160,0.47) 0%, rgba(41,14,183,0.8) 20%, rgba(127,103,255,0) 100%);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container.vote > .ban-marching-border-background-container .ban-marching-border-background::after {
  background-image: linear-gradient(180deg, transparent 57px, #1732ff 61px, rgba(23,50,255,0) 122px);
}
.ban-showcase-team .ban-champion > .ban-champion-shake-container.vote > .ban-marching-border-background-container .ban-marching-border-background::before {
  background-image: linear-gradient(0deg, transparent 57px, #1732ff 61px, rgba(23,50,255,0) 122px);
}
.ban-showcase-team .ban-champion > .champion-name {
  width: 140%;
  top: 70px;
  margin-top: 10px;
  margin-left: -20%;
  position: absolute;
  color: #a09b8c;
  text-align: center;
  -webkit-font-smoothing: subpixel-antialiased;
}
.ban-showcase-team .ban-champion.selected .champion-background-image {
  animation-name: banChampionSelectedSlideIn, banChampionImageSelectedSaturationAndBrightness;
  animation-delay: 0s;
  animation-duration: 0.33s, 0.6s;
  animation-fill-mode: backwards, forwards;
  animation-timing-function: cubic-bezier(0.85, 0, 1, 1), cubic-bezier(0.85, 0, 0, 1);
}
.ban-showcase-team .ban-champion.selected .thumbnail-circle-x-background {
  animation-name: banChampionSelectedSlideOut, fadeOut1to0;
  animation-delay: 0s, 0.33s;
  animation-duration: 0.33s, 0s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(0.85, 0, 1, 1);
}
.ban-showcase-team .ban-champion.selected .champion-name {
  animation-name: banChampionNameSelectedSlideIn, fadeIn0to1;
  animation-delay: 0.27s;
  animation-duration: 0.33s, 0s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(0, 0, 0, 1);
}
.ban-showcase-team .ban-champion.selected .circle-x-overlay {
  animation-name: fadeIn0to1;
  animation-delay: 0.33s;
  animation-duration: 0s;
  animation-fill-mode: backwards;
}
.ban-showcase-team .ban-champion.selected .ban-champion-thumbnail {
  animation-name: banChampionBorderSelectedColorChange;
  animation-delay: 0.33s;
  animation-duration: 0.33s;
  animation-timing-function: linear;
}
.ban-showcase-team .ban-champion.selected.locked-in .ban-champion-shake-container {
  animation-name: banChampionLockedInPositionShakeAndGlow;
  animation-delay: 0s;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
}
.ban-showcase-team .ban-champion.selected.locked-in .champion-name {
  animation-name: banChampionNameLockedInColorChange;
  animation-delay: 0s;
  animation-duration: 0.33s;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
}
.ban-showcase-team .ban-champion.selected.locked-in .champion-background-image {
  animation-name: banChampionImageLockedInSaturationAndBrightness;
  animation-delay: 0s;
  animation-duration: 0.33s;
  animation-timing-function: cubic-bezier(0, 0, 0.66, 1);
  animation-fill-mode: backwards;
}
.ban-showcase-team .ban-champion.selected.locked-in .ban-champion-thumbnail {
  animation-name: banChampionBorderLockedInColorChange;
  animation-delay: 0s;
  animation-duration: 1.17s;
  animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
  animation-fill-mode: forwards;
}
.ban-showcase-team .ban-champion.selected.locked-in .ban-gradient-background {
  animation-name: fadeOut1to0;
  animation-delay: 0s;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77);
}
.ban-showcase-team .ban-champion.selected.locked-in .ban-gradient-background::after {
  animation-delay: 0s;
}
.ban-showcase-team .ban-champion.selected.locked-in .ban-marching-border-background-container {
  animation: fadeOut1to0;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.51, 0.26, 0.64, 0.46);
}
.ban-showcase-team .ban-champion.selected.locked-in .ban-marching-border-background::before,
.ban-showcase-team .ban-champion.selected.locked-in .ban-marching-border-background::after {
  animation-name: banChampionLockedInMarchingBorderRotation;
  animation-delay: 0s;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.1, 0.69, 0.3, 0.93);
  animation-fill-mode: both;
  transform: rotate(45deg);
}
.ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .champion-name,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .champion-name {
  animation-name: fadeIn0to1, banChampionNameLockedInPickSnipedColorChange;
  animation-fill-mode: backwards, both;
}
.ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-champion-thumbnail,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-champion-thumbnail {
  animation-name: banChampionBorderLockedInPickSnipedColorChange;
  box-shadow: 0px 0px 3px #ce4258;
}
.ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-champion-shake-container .circle-x-overlay,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-champion-shake-container .circle-x-overlay {
  background-image: url("/fe/lol-champ-select/images/ban-showcase/icon-ban-red.png");
}
.ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-gradient-background::after,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-gradient-background::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 7px solid #ff3217;
  -webkit-filter: blur(9px);
  border-radius: 36px;
  animation-name: banChampionBorderLockedInPickSnipedGradientBgScale;
  animation-duration: 0.6s;
  animation-fill-mode: both;
  animation-timing-function: linear;
}
.ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background {
  -webkit-filter: drop-shadow(0px 0px 3px #f00) drop-shadow(0px 0px 3px #f00);
}
.ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background::after,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background::after {
  background-image: linear-gradient(180deg, transparent 57px, #ffdfdb 61px, rgba(255,50,23,0) 122px);
}
.ban-showcase-team.my-team .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background::before,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.selected.locked-in.sniped-player-pick .ban-marching-border-background::before {
  background-image: linear-gradient(0deg, transparent 57px, #ffdfdb 61px, rgba(255,50,23,0) 122px);
}
.ban-showcase-team.my-team.intro-animation.my-team-banning .bans-label {
  animation-name: teamBansLabelFadeAndZoomIntro, myTeamBansLabelTextColorIntro;
  animation-delay: 0s, 0.67s;
  animation-duration: 0.2s, 0.7s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), linear;
}
.ban-showcase-team.my-team.intro-animation.my-team-banning.bans-label-glow {
  animation-name: fadeOut1to0;
  animation-delay: 0.2s;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77);
}
.ban-showcase-team.my-team.intro-animation.my-team-banning .ban-champion {
  animation-name: banChampionFadeAndZoomIntro;
  animation-delay: 0.07s;
  animation-duration: 0.17s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(0.75, 0.07, 0, 1);
}
.ban-showcase-team.my-team.intro-animation.my-team-banning .ban-champion:nth-child(2),
.ban-showcase-team.my-team.intro-animation.my-team-banning .ban-champion:nth-child(4) {
  animation-delay: 0.1s;
}
.ban-showcase-team.my-team.intro-animation.my-team-banning .ban-champion:nth-child(3) {
  animation-delay: 0.13s;
}
.ban-showcase-team.my-team.intro-animation.enemy-bans-visible .bans-label,
.ban-showcase-team.my-team.intro-animation.enemy-bans-visible .bans-list {
  animation-name: myTeamBansListSlidePart1, myTeamBansListSlidePart2;
  animation-delay: 0.5s, 0.7s;
  animation-duration: 0.2s, 0.67s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), cubic-bezier(0, 0, 0, 1);
}
.ban-showcase-team.my-team.intro-animation.enemy-bans-visible .bans-list {
  animation-delay: 0.57s, 0.77s;
}
.ban-showcase-team.their-team {
  flex-direction: column-reverse;
  top: 263px;
}
.ban-showcase-team.their-team .waiting-for-bans {
  top: 200px;
}
.ban-showcase-team.their-team .bans-label {
  color: #be1e37;
}
.ban-showcase-team.their-team.enemy-bans-visible .bans-label {
  animation-name: teamBansLabelFadeAndZoomIntro, theirTeamBansLabelTextColorIntro;
  animation-delay: 0.57s, 1.53s;
  animation-duration: 0.2s, 0.7s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), linear;
}
.ban-showcase-team.their-team.enemy-bans-visible .bans-label-glow {
  animation-name: fadeOut1to0;
  animation-delay: 0.77s;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77);
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion {
  animation-name: banChampionFadeAndZoomIntro;
  animation-delay: 0.77s;
  animation-duration: 0.4s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(0.75, 0.07, 0, 1);
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion:nth-child(2),
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion:nth-child(4) {
  animation-delay: 0.8s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion:nth-child(3) {
  animation-delay: 0.83s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-champion-shake-container {
  animation-name: banChampionLockedInPositionShakeAndGlow;
  animation-delay: 0.83s;
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .champion-background-image {
  animation-name: banChampionSelectedSlideIn, banChampionImageLockedInSaturationAndBrightness;
  animation-delay: 0.5s, 0.83s;
  animation-duration: 0.33s, 0.6s;
  animation-fill-mode: backwards, backwards;
  animation-timing-function: cubic-bezier(0.85, 0, 1, 1), cubic-bezier(0, 0, 0, 1);
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .thumbnail-circle-x-background {
  animation-name: banChampionSelectedSlideOut;
  animation-delay: 0.5s;
  animation-duration: 0.33s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(0.85, 0, 1, 1);
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .champion-name {
  animation-name: fadeIn0to1, banChampionNameLockedInColorChange;
  animation-delay: 0.83s;
  animation-duration: 0s, 0.33s;
  animation-fill-mode: backwards, backwards;
  animation-timing-function: linear, linear;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .circle-x-overlay {
  animation-name: fadeIn0to1;
  animation-delay: 0.83s;
  animation-duration: 0s;
  animation-fill-mode: backwards;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-champion-thumbnail {
  animation-name: banChampionBorderSelectedColorChange;
  animation-delay: 0.83s;
  animation-duration: 0.33s;
  animation-timing-function: linear;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-gradient-background {
  animation-name: fadeOut1to0;
  animation-delay: 0.83s;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77);
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-gradient-background::after {
  animation-delay: 0.83s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-marching-border-background-container {
  animation-name: fadeOut1to0;
  animation-fill-mode: forwards;
  animation-delay: 0.83s;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.51, 0.26, 0.64, 0.46);
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-marching-border-background::before,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in .ban-marching-border-background::after {
  animation-name: banChampionLockedInMarchingBorderRotation;
  animation-delay: 0.83s;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.1, 0.69, 0.3, 0.93);
  animation-fill-mode: both;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .champion-background-image,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .thumbnail-circle-x-background {
  animation-delay: 1.15s, 1.48s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .circle-x-overlay,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-champion-thumbnail,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .champion-name,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-gradient-background,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-gradient-background::after,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-champion-shake-container,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-marching-border-background-container,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-marching-border-background::before,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(2) .ban-marching-border-background::after {
  animation-delay: 1.48s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .champion-background-image,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .thumbnail-circle-x-background {
  animation-delay: 1.8s, 2.13s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .circle-x-overlay,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-champion-thumbnail,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .champion-name,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-gradient-background,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-gradient-background::after,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-champion-shake-container,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-marching-border-background-container,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-marching-border-background::before,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(3) .ban-marching-border-background::after {
  animation-delay: 2.13s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .champion-background-image,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .thumbnail-circle-x-background {
  animation-delay: 2.45s, 2.78s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .circle-x-overlay,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-champion-thumbnail,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .champion-name,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-gradient-background,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-gradient-background::after,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-champion-shake-container,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-marching-border-background-container,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-marching-border-background::before,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(4) .ban-marching-border-background::after {
  animation-delay: 2.78s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .champion-background-image,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .thumbnail-circle-x-background {
  animation-delay: 3.1s, 3.43s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .circle-x-overlay,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-champion-thumbnail,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .champion-name,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-gradient-background,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-gradient-background::after,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-champion-shake-container,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-marching-border-background-container,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-marching-border-background::before,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(5) .ban-marching-border-background::after {
  animation-delay: 3.43s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .champion-background-image,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .thumbnail-circle-x-background {
  animation-delay: 3.75s, 4.08s;
}
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .circle-x-overlay,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-champion-thumbnail,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .champion-name,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-gradient-background,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-gradient-background::after,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-champion-shake-container,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-marching-border-background-container,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-marching-border-background::before,
.ban-showcase-team.their-team.enemy-bans-visible .ban-champion.locked-in:nth-child(6) .ban-marching-border-background::after {
  animation-delay: 4.08s;
}
@-moz-keyframes myTeamBansListSlidePart1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-108px);
  }
}
@-webkit-keyframes myTeamBansListSlidePart1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-108px);
  }
}
@-o-keyframes myTeamBansListSlidePart1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-108px);
  }
}
@keyframes myTeamBansListSlidePart1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-108px);
  }
}
@-moz-keyframes myTeamBansListSlidePart2 {
  0% {
    transform: translateY(-108px);
  }
  100% {
    transform: translateY(-122px);
  }
}
@-webkit-keyframes myTeamBansListSlidePart2 {
  0% {
    transform: translateY(-108px);
  }
  100% {
    transform: translateY(-122px);
  }
}
@-o-keyframes myTeamBansListSlidePart2 {
  0% {
    transform: translateY(-108px);
  }
  100% {
    transform: translateY(-122px);
  }
}
@keyframes myTeamBansListSlidePart2 {
  0% {
    transform: translateY(-108px);
  }
  100% {
    transform: translateY(-122px);
  }
}
@-moz-keyframes teamBansLabelFadeAndZoomIntro {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    tranform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes teamBansLabelFadeAndZoomIntro {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    tranform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes teamBansLabelFadeAndZoomIntro {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    tranform: scale(1);
    opacity: 1;
  }
}
@keyframes teamBansLabelFadeAndZoomIntro {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    tranform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes theirTeamBansLabelTextColorIntro {
  0% {
    color: #fff;
  }
  100% {
    color: #be1e37;
  }
}
@-webkit-keyframes theirTeamBansLabelTextColorIntro {
  0% {
    color: #fff;
  }
  100% {
    color: #be1e37;
  }
}
@-o-keyframes theirTeamBansLabelTextColorIntro {
  0% {
    color: #fff;
  }
  100% {
    color: #be1e37;
  }
}
@keyframes theirTeamBansLabelTextColorIntro {
  0% {
    color: #fff;
  }
  100% {
    color: #be1e37;
  }
}
@-moz-keyframes myTeamBansLabelTextColorIntro {
  0% {
    color: #fff;
  }
  100% {
    color: #0a96aa;
  }
}
@-webkit-keyframes myTeamBansLabelTextColorIntro {
  0% {
    color: #fff;
  }
  100% {
    color: #0a96aa;
  }
}
@-o-keyframes myTeamBansLabelTextColorIntro {
  0% {
    color: #fff;
  }
  100% {
    color: #0a96aa;
  }
}
@keyframes myTeamBansLabelTextColorIntro {
  0% {
    color: #fff;
  }
  100% {
    color: #0a96aa;
  }
}
@-moz-keyframes banChampionFadeAndZoomIntro {
  0% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes banChampionFadeAndZoomIntro {
  0% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes banChampionFadeAndZoomIntro {
  0% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes banChampionFadeAndZoomIntro {
  0% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes banChampionSelectedSlideIn {
  0% {
    transform: translateY(-67px);
  }
  100% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes banChampionSelectedSlideIn {
  0% {
    transform: translateY(-67px);
  }
  100% {
    transform: translateY(0px);
  }
}
@-o-keyframes banChampionSelectedSlideIn {
  0% {
    transform: translateY(-67px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes banChampionSelectedSlideIn {
  0% {
    transform: translateY(-67px);
  }
  100% {
    transform: translateY(0px);
  }
}
@-moz-keyframes banChampionSelectedSlideOut {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(67px);
  }
}
@-webkit-keyframes banChampionSelectedSlideOut {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(67px);
  }
}
@-o-keyframes banChampionSelectedSlideOut {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(67px);
  }
}
@keyframes banChampionSelectedSlideOut {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(67px);
  }
}
@-moz-keyframes banChampionNameSelectedSlideInAndColorChange {
  0% {
    transform: translateY(-4px);
    color: #fffefd;
  }
  100% {
    transform: translateY(0px);
    color: #a0998c;
  }
}
@-webkit-keyframes banChampionNameSelectedSlideInAndColorChange {
  0% {
    transform: translateY(-4px);
    color: #fffefd;
  }
  100% {
    transform: translateY(0px);
    color: #a0998c;
  }
}
@-o-keyframes banChampionNameSelectedSlideInAndColorChange {
  0% {
    transform: translateY(-4px);
    color: #fffefd;
  }
  100% {
    transform: translateY(0px);
    color: #a0998c;
  }
}
@keyframes banChampionNameSelectedSlideInAndColorChange {
  0% {
    transform: translateY(-4px);
    color: #fffefd;
  }
  100% {
    transform: translateY(0px);
    color: #a0998c;
  }
}
@-moz-keyframes banChampionNameLockedInColorChange {
  0% {
    color: #fffefd;
  }
  100% {
    color: #a0998c;
  }
}
@-webkit-keyframes banChampionNameLockedInColorChange {
  0% {
    color: #fffefd;
  }
  100% {
    color: #a0998c;
  }
}
@-o-keyframes banChampionNameLockedInColorChange {
  0% {
    color: #fffefd;
  }
  100% {
    color: #a0998c;
  }
}
@keyframes banChampionNameLockedInColorChange {
  0% {
    color: #fffefd;
  }
  100% {
    color: #a0998c;
  }
}
@-moz-keyframes banChampionNameLockedInPickSnipedColorChange {
  0% {
    color: #fffefd;
  }
  100% {
    color: #be1e37;
  }
}
@-webkit-keyframes banChampionNameLockedInPickSnipedColorChange {
  0% {
    color: #fffefd;
  }
  100% {
    color: #be1e37;
  }
}
@-o-keyframes banChampionNameLockedInPickSnipedColorChange {
  0% {
    color: #fffefd;
  }
  100% {
    color: #be1e37;
  }
}
@keyframes banChampionNameLockedInPickSnipedColorChange {
  0% {
    color: #fffefd;
  }
  100% {
    color: #be1e37;
  }
}
@-moz-keyframes banChampionBorderSelectedColorChange {
  0% {
    border-color: #ffebeb;
  }
  100% {
    border-color: #3c3c41;
  }
}
@-webkit-keyframes banChampionBorderSelectedColorChange {
  0% {
    border-color: #ffebeb;
  }
  100% {
    border-color: #3c3c41;
  }
}
@-o-keyframes banChampionBorderSelectedColorChange {
  0% {
    border-color: #ffebeb;
  }
  100% {
    border-color: #3c3c41;
  }
}
@keyframes banChampionBorderSelectedColorChange {
  0% {
    border-color: #ffebeb;
  }
  100% {
    border-color: #3c3c41;
  }
}
@-moz-keyframes banChampionBorderLockedInColorChange {
  0% {
    border-color: #bebdbc;
  }
  100% {
    border-color: #3c3c41;
  }
}
@-webkit-keyframes banChampionBorderLockedInColorChange {
  0% {
    border-color: #bebdbc;
  }
  100% {
    border-color: #3c3c41;
  }
}
@-o-keyframes banChampionBorderLockedInColorChange {
  0% {
    border-color: #bebdbc;
  }
  100% {
    border-color: #3c3c41;
  }
}
@keyframes banChampionBorderLockedInColorChange {
  0% {
    border-color: #bebdbc;
  }
  100% {
    border-color: #3c3c41;
  }
}
@-moz-keyframes banChampionBorderLockedInPickSnipedColorChange {
  0% {
    border-color: #bebdbc;
  }
  100% {
    border-color: #94293a;
  }
}
@-webkit-keyframes banChampionBorderLockedInPickSnipedColorChange {
  0% {
    border-color: #bebdbc;
  }
  100% {
    border-color: #94293a;
  }
}
@-o-keyframes banChampionBorderLockedInPickSnipedColorChange {
  0% {
    border-color: #bebdbc;
  }
  100% {
    border-color: #94293a;
  }
}
@keyframes banChampionBorderLockedInPickSnipedColorChange {
  0% {
    border-color: #bebdbc;
  }
  100% {
    border-color: #94293a;
  }
}
@-moz-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes banChampionImageSelectedSaturationAndBrightness {
  0% {
    -webkit-filter: grayscale(1) brightness(2);
  }
  100% {
    -webkit-filter: grayscale(1) brightness(0.75);
  }
}
@-webkit-keyframes banChampionImageSelectedSaturationAndBrightness {
  0% {
    -webkit-filter: grayscale(1) brightness(2);
  }
  100% {
    -webkit-filter: grayscale(1) brightness(0.75);
  }
}
@-o-keyframes banChampionImageSelectedSaturationAndBrightness {
  0% {
    -webkit-filter: grayscale(1) brightness(2);
  }
  100% {
    -webkit-filter: grayscale(1) brightness(0.75);
  }
}
@keyframes banChampionImageSelectedSaturationAndBrightness {
  0% {
    -webkit-filter: grayscale(1) brightness(2);
  }
  100% {
    -webkit-filter: grayscale(1) brightness(0.75);
  }
}
@-moz-keyframes banChampionImageLockedInSaturationAndBrightness {
  0% {
    -webkit-filter: grayscale(1) brightness(0.75);
  }
  100% {
    -webkit-filter: grayscale(0) brightness(1);
  }
}
@-webkit-keyframes banChampionImageLockedInSaturationAndBrightness {
  0% {
    -webkit-filter: grayscale(1) brightness(0.75);
  }
  100% {
    -webkit-filter: grayscale(0) brightness(1);
  }
}
@-o-keyframes banChampionImageLockedInSaturationAndBrightness {
  0% {
    -webkit-filter: grayscale(1) brightness(0.75);
  }
  100% {
    -webkit-filter: grayscale(0) brightness(1);
  }
}
@keyframes banChampionImageLockedInSaturationAndBrightness {
  0% {
    -webkit-filter: grayscale(1) brightness(0.75);
  }
  100% {
    -webkit-filter: grayscale(0) brightness(1);
  }
}
@-moz-keyframes banChampionLockedInPositionShakeAndGlow {
  0% {
    transform: translate(-1px, -1px);
    -webkit-filter: brightness(1.4) contrast(0.9);
  }
  12% {
    transform: translate(0px, 1px);
    -webkit-filter: none;
  }
  24% {
    transform: translate(1px, 0px);
  }
  36% {
    transform: translate(1px, -1px);
  }
  48% {
    transform: translate(1px, 1px);
  }
  60% {
    transform: translate(0px, 1px);
  }
  72% {
    transform: translate(-0.5px, -0.5px);
  }
  84% {
    transform: translate(0.5px, -0.5px);
  }
  96% {
    transform: tranlate(0px, 0.5px);
  }
}
@-webkit-keyframes banChampionLockedInPositionShakeAndGlow {
  0% {
    transform: translate(-1px, -1px);
    -webkit-filter: brightness(1.4) contrast(0.9);
  }
  12% {
    transform: translate(0px, 1px);
    -webkit-filter: none;
  }
  24% {
    transform: translate(1px, 0px);
  }
  36% {
    transform: translate(1px, -1px);
  }
  48% {
    transform: translate(1px, 1px);
  }
  60% {
    transform: translate(0px, 1px);
  }
  72% {
    transform: translate(-0.5px, -0.5px);
  }
  84% {
    transform: translate(0.5px, -0.5px);
  }
  96% {
    transform: tranlate(0px, 0.5px);
  }
}
@-o-keyframes banChampionLockedInPositionShakeAndGlow {
  0% {
    transform: translate(-1px, -1px);
    -webkit-filter: brightness(1.4) contrast(0.9);
  }
  12% {
    transform: translate(0px, 1px);
    -webkit-filter: none;
  }
  24% {
    transform: translate(1px, 0px);
  }
  36% {
    transform: translate(1px, -1px);
  }
  48% {
    transform: translate(1px, 1px);
  }
  60% {
    transform: translate(0px, 1px);
  }
  72% {
    transform: translate(-0.5px, -0.5px);
  }
  84% {
    transform: translate(0.5px, -0.5px);
  }
  96% {
    transform: tranlate(0px, 0.5px);
  }
}
@keyframes banChampionLockedInPositionShakeAndGlow {
  0% {
    transform: translate(-1px, -1px);
    -webkit-filter: brightness(1.4) contrast(0.9);
  }
  12% {
    transform: translate(0px, 1px);
    -webkit-filter: none;
  }
  24% {
    transform: translate(1px, 0px);
  }
  36% {
    transform: translate(1px, -1px);
  }
  48% {
    transform: translate(1px, 1px);
  }
  60% {
    transform: translate(0px, 1px);
  }
  72% {
    transform: translate(-0.5px, -0.5px);
  }
  84% {
    transform: translate(0.5px, -0.5px);
  }
  96% {
    transform: tranlate(0px, 0.5px);
  }
}
@-moz-keyframes banChampionLockedInMarchingBorderRotation {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(300deg);
  }
}
@-webkit-keyframes banChampionLockedInMarchingBorderRotation {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(300deg);
  }
}
@-o-keyframes banChampionLockedInMarchingBorderRotation {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(300deg);
  }
}
@keyframes banChampionLockedInMarchingBorderRotation {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(300deg);
  }
}
@-moz-keyframes banChampionBorderLockedInPickSnipedGradientBgScale {
  0% {
    transform: scale(0.4);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes banChampionBorderLockedInPickSnipedGradientBgScale {
  0% {
    transform: scale(0.4);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes banChampionBorderLockedInPickSnipedGradientBgScale {
  0% {
    transform: scale(0.4);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes banChampionBorderLockedInPickSnipedGradientBgScale {
  0% {
    transform: scale(0.4);
  }
  100% {
    transform: scale(1);
  }
}
.boost-notification-container {
  display: flex;
  flex-direction: column;
}
.boost-notification-container .boost-body .skin-unlocked {
  font-weight: 700;
}
.champion-bench .bench-label {
  font-family: var(--font-display);
}
.champion-bench .bench-label {
  -webkit-user-select: none;
}
.champion-bench .bench-label {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-bench .bench-label {
  text-transform: uppercase;
}
.champion-bench .bench-label:lang(ko-kr),
.champion-bench .bench-label:lang(ja-jp),
.champion-bench .bench-label:lang(tr-tr),
.champion-bench .bench-label:lang(el-gr),
.champion-bench .bench-label:lang(th-th),
.champion-bench .bench-label:lang(zh-tw) {
  text-transform: none;
}
.champion-bench .bench-label {
  color: #f0e6d2;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.075em;
}
.champion-bench .bench-label:lang(ja-jp) {
  font-size: 13px;
}
.champion-bench {
  top: 10px;
  position: relative;
  align-self: flex-start;
  margin-left: 26px;
}
.champion-bench .bench-container {
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 578px;
  height: 50px;
  margin-left: 5px;
}
.champion-bench .bench-label {
  line-height: 14px;
  color: #a09b8c;
  position: absolute;
  right: 610px;
  top: 5px;
  text-align: right;
}
.champion-bench .bench-info {
  position: absolute;
  width: 18px;
  height: 18px;
  background-size: contain;
  left: 623px;
  top: 10px;
  background-image: url("/fe/lol-champ-select/images/champion-bench/MoreInfo4k_Default.png");
}
.champion-bench .bench-info:hover {
  background-image: url("/fe/lol-champ-select/images/champion-bench/MoreInfo4k_Hover.png");
}
.bench-container .champion-bench-item {
  border: 1px solid #3c3c41;
}
.bench-container .champion-bench-item .bench-champion-background {
  width: 48px;
  height: 48px;
  background-position: center;
  background-size: 115% 115%;
  border: 1px solid #010a13;
  position: relative;
  box-sizing: border-box;
}
.bench-container .champion-bench-item:hover:not(.grayed-out):not(.empty-bench-item):not(.on-cooldown) {
  border: 1px solid #c89b3c;
  cursor: pointer;
}
.bench-container .champion-bench-item .bench-champion-icon {
  position: relative;
  width: 48px;
  height: 48px;
  overflow: hidden;
  align-self: center;
}
.bench-container .champion-bench-item .bench-champion-icon.grayed-out {
  -webkit-filter: grayscale(1) brightness(0.75);
}
.bench-container .champion-bench-item .bench-champion-icon .cooldown-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  opacity: 0.85;
  visibility: hidden;
}
.bench-container .champion-bench-item .bench-champion-icon .cooldown {
  width: 96px;
  height: 96px;
  position: absolute;
  top: -24px;
  left: -24px;
}
.bench-container .champion-bench-item .bench-champion-icon .cooldown .right-half {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform-origin: 0 50%;
  background: #010a13;
}
.bench-container .champion-bench-item .bench-champion-icon .cooldown .left-half-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.bench-container .champion-bench-item .bench-champion-icon .cooldown .left-half {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 100% 50%;
  background: #010a13;
}
.bench-container .champion-bench-item.empty-bench-item .bench-champion-icon {
  opacity: 0.5;
  background-color: #1e2328;
  border: none;
}
.bench-container .champion-bench-item.empty-bench-item .bench-champion-icon .cooldown-mask {
  visibility: hidden;
}
.bench-container .champion-bench-item.on-cooldown .cooldown-mask {
  visibility: visible;
}
.bench-container .champion-bench-item.on-cooldown .cooldown-mask .cooldown .right-half {
  animation: rotate-half linear forwards 1.35s;
}
.bench-container .champion-bench-item.on-cooldown .cooldown-mask .cooldown .left-half {
  animation: rotate-half linear forwards 1.35s 1.35s;
}
@-moz-keyframes rotate-half {
  0% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  99% {
    opacity: 1;
    transform: rotateZ(180deg);
  }
  100% {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}
@-webkit-keyframes rotate-half {
  0% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  99% {
    opacity: 1;
    transform: rotateZ(180deg);
  }
  100% {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}
@-o-keyframes rotate-half {
  0% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  99% {
    opacity: 1;
    transform: rotateZ(180deg);
  }
  100% {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}
@keyframes rotate-half {
  0% {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  99% {
    opacity: 1;
    transform: rotateZ(180deg);
  }
  100% {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}
.champion-grid {
  position: absolute;
  top: 80px;
  left: 8px;
}
.champion-grid.champion-grid-hidden {
  opacity: 0;
  pointer-events: none;
}
.champion-grid.champion-grid-hidden .champion-container {
  transform: translateY(600px);
}
.champion-grid .champion-grid-header {
  height: 40px;
  border-bottom: 1px solid rgba(120,90,40,0.6);
  margin: 0px 22px 13px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.champion-grid .champion-grid-header > div {
  flex-grow: 0;
}
.champion-grid .champion-grid-header > div.spacer {
  flex-grow: 1;
}
.champion-grid .champion-grid-header lol-uikit-flat-input {
  width: 195px;
  float: right;
  margin-top: 8px;
  opacity: 0.45;
}
.champion-grid .champion-grid-header lol-uikit-framed-dropdown {
  margin-top: 8px;
  margin-right: 3px;
  height: 24px;
  width: auto;
}
.champion-grid .champion-grid-header .champion-input {
  height: 24px;
}
.champion-grid .champion-container {
  position: relative;
  min-height: 425px;
  overflow: hidden;
  padding-bottom: 15px;
}
.champion-grid .champions {
  height: 456px;
  width: 622px;
  margin-top: -8px;
}
.champion-grid .champions.champions-disabled {
  pointer-events: none;
}
.champion-grid.champion-grid-animated {
  transition: opacity 350ms;
}
.champion-grid.champion-grid-animated .champions.champions-disabled {
  opacity: 0.5;
}
.champion-grid.champion-grid-unanimated {
  transition: none;
}
.champion-grid.champion-grid-unanimated .champion-container {
  display: flex;
  flex-wrap: wrap;
  min-height: auto;
  margin-left: -9px;
}
.champion-grid.champion-grid-picked .champion-container {
  pointer-events: none;
}
.champion-grid.champion-grid-picked.champion-grid-banning .champion-container {
  pointer-events: auto;
}
.filter-icons {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  width: 180px;
  height: 20px;
}
.filter-icons .filter {
  cursor: pointer;
  width: 20px;
  height: 26px;
  margin: 0 5px;
  box-sizing: border-box;
}
.filter-icons .filter.fighter,
.filter-icons .filter.tank,
.filter-icons .filter.mage,
.filter-icons .filter.assassin,
.filter-icons .filter.support,
.filter-icons .filter.marksman {
  background-size: 180px;
  background-repeat: no-repeat;
  background-image: url("/fe/lol-champ-select/images/champion-grid/role-filter-disabled.png");
}
.filter-icons .filter.fighter.active,
.filter-icons .filter.tank.active,
.filter-icons .filter.mage.active,
.filter-icons .filter.assassin.active,
.filter-icons .filter.support.active,
.filter-icons .filter.marksman.active,
.filter-icons .filter.fighter:hover,
.filter-icons .filter.tank:hover,
.filter-icons .filter.mage:hover,
.filter-icons .filter.assassin:hover,
.filter-icons .filter.support:hover,
.filter-icons .filter.marksman:hover {
  background-size: 180px;
  background-repeat: no-repeat;
  background-image: url("/fe/lol-champ-select/images/champion-grid/role-filter-enabled.png");
}
.filter-icons .filter.fighter {
  background-position: 0 0;
}
.filter-icons .filter.tank {
  background-position: -32px 0;
}
.filter-icons .filter.mage {
  background-position: -64px 0;
}
.filter-icons .filter.assassin {
  background-position: -96px 0;
}
.filter-icons .filter.support {
  background-position: -128px 0;
}
.filter-icons .filter.marksman {
  background-position: -160px 0;
}
.filter-icons .filter.top,
.filter-icons .filter.jungle,
.filter-icons .filter.middle,
.filter-icons .filter.bottom,
.filter-icons .filter.support,
.filter-icons .filter.chest {
  background-size: 180px;
  background-repeat: no-repeat;
  background-image: url("/fe/lol-champ-select/images/champion-grid/filter-icons-disabled.png");
}
.filter-icons .filter.top.active,
.filter-icons .filter.jungle.active,
.filter-icons .filter.middle.active,
.filter-icons .filter.bottom.active,
.filter-icons .filter.support.active,
.filter-icons .filter.chest.active,
.filter-icons .filter.top:hover,
.filter-icons .filter.jungle:hover,
.filter-icons .filter.middle:hover,
.filter-icons .filter.bottom:hover,
.filter-icons .filter.support:hover,
.filter-icons .filter.chest:hover {
  background-size: 180px;
  background-repeat: no-repeat;
  background-image: url("/fe/lol-champ-select/images/champion-grid/filter-icons-enabled.png");
}
.filter-icons .filter.top {
  background-position: 0 0;
}
.filter-icons .filter.jungle {
  background-position: -32px 0;
}
.filter-icons .filter.middle {
  background-position: -64px 0;
}
.filter-icons .filter.bottom {
  background-position: -96px 0;
}
.filter-icons .filter.support {
  background-position: -128px 0;
}
.filter-icons .filter.chest {
  background-position: -160px 0;
}
.filter-icons .filter:first-child {
  margin-left: 0;
}
.filter-icons .filter:last-child {
  margin-right: 0;
}
.filter-icons .filter:after {
  content: url("/fe/lol-champ-select/images/champion-grid/role-filter-enabled.png");
  display: none;
  height: 0;
  width: 0;
}
.filter-icons .filter.active.fighter,
.filter-icons .filter:hover.fighter {
  background-position: 0 0;
}
.filter-icons .filter.active.tank,
.filter-icons .filter:hover.tank {
  background-position: -32px 0;
}
.filter-icons .filter.active.mage,
.filter-icons .filter:hover.mage {
  background-position: -64px 0;
}
.filter-icons .filter.active.assassin,
.filter-icons .filter:hover.assassin {
  background-position: -96px 0;
}
.filter-icons .filter.active.support,
.filter-icons .filter:hover.support {
  background-position: -128px 0;
}
.filter-icons .filter.active.marksman,
.filter-icons .filter:hover.marksman {
  background-position: -160px 0;
}
.filter-icons .filter:after {
  content: url("/fe/lol-champ-select/images/champion-grid/filter-icons-enabled.png");
  display: none;
  height: 0;
  width: 0;
}
.filter-icons .filter.active {
  border-bottom: 3px solid #785a28;
}
.grid-champion > .grid-champion-hitbox > .champion-name {
  font-family: var(--font-body);
}
.grid-champion > .grid-champion-hitbox > .champion-name {
  -webkit-user-select: none;
}
.grid-champion > .grid-champion-hitbox > .champion-name {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.grid-champion > .grid-champion-hitbox > .champion-name {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.grid-champion > .grid-champion-hitbox > .champion-name:lang(ja-jp) {
  font-size: 13px;
}
.champion-grid-banning .grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail,
.champion-grid-banning .grid-champion > .grid-champion-hitbox:not(:active):hover > .champion-grid-champion-thumbnail {
  border-color: #fe734f;
  box-shadow: 0 0 0 1px rgba(1,10,19,0.85), 0 0 7px 1px rgba(190,30,55,0.85);
  outline: none;
}
.grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail,
.champion-grid-banning .grid-champion[disabled] > .grid-champion-hitbox > .champion-grid-champion-thumbnail,
.champion-grid-banning .grid-champion.pick-intented > .grid-champion-hitbox > .champion-grid-champion-thumbnail,
.champion-grid-banning .grid-champion.ban-intented > .grid-champion-hitbox > .champion-grid-champion-thumbnail {
  border: 1px solid #3c3c41;
  outline: 1px solid rgba(1,10,19,0.75);
  box-shadow: none;
}
.grid-champion {
  width: 71px;
  height: 83px;
  cursor: pointer;
  transform: translateZ(0);
}
.grid-champion[disabled],
.grid-champion.grid-champion-selected,
.grid-champion.grid-champion-ban-selected {
  cursor: default;
}
.grid-champion[disabled] > .grid-champion-hitbox,
.grid-champion.grid-champion-selected > .grid-champion-hitbox,
.grid-champion.grid-champion-ban-selected > .grid-champion-hitbox {
  pointer-events: none;
}
.grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail {
  display: inline-block;
  width: 67px;
  height: 67px;
  border-image-slice: 1;
  border-image-repeat: stretch;
  -webkit-filter: none;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(1,10,19,0.8);
}
.grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail > .champion-background-image {
  width: 72px;
  height: 72px;
  margin-left: -4px;
  margin-top: -4px;
}
.grid-champion > .grid-champion-hitbox > .champion-name {
  display: block;
  margin-top: 3px;
  line-height: 12px;
  color: #a09b8c;
  text-align: center;
  width: 140%;
  margin-left: -20%;
  -webkit-font-smoothing: subpixel-antialiased;
}
.grid-champion > .grid-champion-hitbox > .champion-name:lang(ja-jp) {
  letter-spacing: -1px;
}
.grid-champion > .grid-champion-hitbox:hover > .champion-grid-champion-thumbnail {
  border-image-source: linear-gradient(to bottom, #f0e6d2 4%, #c89b3c 100%);
}
.grid-champion > .grid-champion-hitbox:hover > .champion-grid-champion-thumbnail > .champion-background-image {
  -webkit-filter: brightness(1.25);
}
.grid-champion > .grid-champion-hitbox:active > .champion-grid-champion-thumbnail {
  border-image-source: linear-gradient(to bottom, #463714 0%, #695625 100%);
}
.grid-champion.pick-intented .champion-background-image,
.grid-champion.ban-intented .champion-background-image {
  -webkit-filter: grayscale(0.65);
}
.grid-champion[disabled] .champion-background-image {
  -webkit-filter: grayscale(1) brightness(0.75);
}
.champion-grid-animated .grid-champion {
  position: absolute;
  transition: opacity 300ms, transform 300ms;
  backface-visibility: hidden;
}
.champion-grid-animated.hidden {
  opacity: 0;
  pointer-events: none;
}
.champion-grid-unanimated .grid-champion {
  position: relative;
  margin-top: 9px;
  margin-bottom: 4px;
  margin-left: 31px;
}
.champion-grid-unanimated .grid-champion.hidden {
  display: none;
  pointer-events: none;
}
.champion-grid-banning .grid-champion > .grid-champion-hitbox:not(:active):hover > .champion-grid-champion-thumbnail {
  border-image-source: none;
}
.champion-grid-selected .champion-background-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(1,10,19,0.5);
}
.champion-grid-selected .grid-champion-selected .champion-background-image::after,
.champion-grid-selected .grid-champion-hitbox:hover .champion-background-image::after {
  content: none;
}
@-moz-keyframes pickBorderBlinkAnimation {
  0% {
    border-color: #3c3c41;
  }
  75% {
    border-color: #5d5d71;
  }
  100% {
    border-color: #3c3c41;
  }
}
@-webkit-keyframes pickBorderBlinkAnimation {
  0% {
    border-color: #3c3c41;
  }
  75% {
    border-color: #5d5d71;
  }
  100% {
    border-color: #3c3c41;
  }
}
@-o-keyframes pickBorderBlinkAnimation {
  0% {
    border-color: #3c3c41;
  }
  75% {
    border-color: #5d5d71;
  }
  100% {
    border-color: #3c3c41;
  }
}
@keyframes pickBorderBlinkAnimation {
  0% {
    border-color: #3c3c41;
  }
  75% {
    border-color: #5d5d71;
  }
  100% {
    border-color: #3c3c41;
  }
}
/* Priority of icons on champion grid items: Rental > F2P > Owned > F2PQueue > Loyalty */
.grid-champion-overlay {
  width: 81px;
  height: 81px;
  position: absolute;
  top: -6px;
  left: -7px;
  pointer-events: none;
}
.grid-champion-overlay::before {
  content: '';
  background: center no-repeat;
  background-size: contain;
  position: absolute;
  width: 34px;
  height: 40px;
  top: -2px;
  right: -7px;
  background-position: 0 -4px;
}
.champion-grid.sort-by-favorites .grid-champion.grid-champion-favorite > .grid-champion-hitbox > .grid-champion-overlay::before {
  background-image: url("/fe/lol-champ-select/images/config/champ-favorite-flag.png");
}
.champion-grid .grid-champion.grid-champion-free-to-play-reward > .grid-champion-hitbox > .grid-champion-overlay::before {
  background-image: url("/fe/lol-champ-select/images/config/champ-free-to-play-reward-flag.png");
}
.champion-grid .grid-champion.grid-champion-free-to-play-rgm > .grid-champion-hitbox > .grid-champion-overlay::before {
  background-image: url("/fe/lol-champ-select/images/config/champ-free-to-play-rgm-flag.png");
}
.champion-grid .grid-champion.grid-champion-free-to-play > .grid-champion-hitbox > .grid-champion-overlay::before {
  background-image: url("/fe/lol-champ-select/images/config/champ-free-to-play-flag.png");
}
.champion-grid .grid-champion.grid-champion-favorite > .grid-champion-hitbox > .grid-champion-overlay::before {
  background-image: url("/fe/lol-champ-select/images/config/champ-favorite-flag.png");
}
.champion-grid .grid-champion.grid-champion-rented > .grid-champion-hitbox > .grid-champion-overlay::before {
  background-image: url("/fe/lol-champ-select/images/config/champ-rental-flag.png");
}
.champion-grid .grid-champion > .grid-champion-hitbox > .grid-champion-overlay {
  background-repeat: no-repeat;
  background-size: 162px 486px;
  background-image: url("/fe/lol-champ-select/images/config/reticle-sprite-324x324-2x6F.png");
  background-position: 0px 120px;
}
.champion-grid .grid-champion.self-pick-intented > .grid-champion-hitbox > .grid-champion-overlay {
  background-position: 0px -81px;
}
.champion-grid .grid-champion.ban-intented > .grid-champion-hitbox > .grid-champion-overlay {
  background-position: -81px -405px;
}
.champion-grid .grid-champion.pick-intented-middle > .grid-champion-hitbox > .grid-champion-overlay {
  background-position: -81px 0px;
}
.champion-grid .grid-champion.pick-intented-top > .grid-champion-hitbox > .grid-champion-overlay {
  background-position: -81px -81px;
}
.champion-grid .grid-champion.pick-intented-bottom > .grid-champion-hitbox > .grid-champion-overlay {
  background-position: -81px -162px;
}
.champion-grid .grid-champion.pick-intented-utility > .grid-champion-hitbox > .grid-champion-overlay {
  background-position: -81px -243px;
}
.champion-grid .grid-champion.pick-intented-jungle > .grid-champion-hitbox > .grid-champion-overlay {
  background-position: -81px -324px;
}
.champion-grid .grid-champion.grid-champion-selected > .grid-champion-hitbox > .grid-champion-overlay,
.champion-grid .grid-champion.grid-champion-selected > .grid-champion-hitbox:hover > .grid-champion-overlay {
  background-position: 0px -162px;
}
.champion-grid .grid-champion.grid-champion-ban-selected > .grid-champion-hitbox > .grid-champion-overlay,
.champion-grid .grid-champion.grid-champion-ban-selected > .grid-champion-hitbox:hover > .grid-champion-overlay {
  background-position: 0px -324px;
}
.champion-grid .grid-champion > .grid-champion-hitbox:hover > .grid-champion-overlay {
  background-position: 0px 0px;
}
.champion-grid .grid-champion.grid-champion-banned > .grid-champion-hitbox > .grid-champion-overlay {
  background-position: 0px -405px;
}
.champion-grid.champion-grid-banning .grid-champion > .grid-champion-hitbox:hover > .grid-champion-overlay {
  background-position: 0px -243px;
}
.champion-select .champion-splash-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/fe/lol-champ-select/images/config/overlay-defocus.png");
}
.champion-select .champion-splash-background.mask-splash .background-vignette-container {
  -webkit-mask-image: url("/fe/lol-champ-select/images/background/center-splash-mask.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position-y: -45px;
}
.champion-select .champion-splash-background .background-vignette-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.champion-select .champion-splash-background .background-vignette-container.defocussed > .champ-select-bg {
  -webkit-filter: brightness(35%);
}
.champion-select .champion-splash-background .background-vignette-container::after {
  content: '';
  opacity: 1;
  transform: translateZ(0);
}
.champion-select .champion-splash-background .background-vignette-container.defocussed::after {
  opacity: 1;
}
.champion-select .champion-splash-background .background-vignette-container.animated::after::after {
  transition: opacity 300ms cubic-bezier(0, 0.6, 0.1, 1);
}
.champion-select .champion-splash-background .background-vignette-container .champ-select-bg-darken {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/fe/lol-champ-select/images/background/skin-splash-darken.png");
  opacity: 0.55;
}
.champion-select .champion-splash-background.new-pick-outro-left lol-uikit-background-switcher {
  animation-name: transitionFromBright, fadeOut0to1, slideLeft, transitionToBright;
  animation-duration: 0.9s, 0.2s, 0.2s, 0.2s;
  animation-delay: 0s, 1.5s, 1.5s, 1.5s;
  animation-timing-function: cubic-bezier(0, 0, 0, 1), linear, cubic-bezier(1, 0, 1, 1), linear;
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background.new-pick-outro-right lol-uikit-background-switcher {
  animation-name: transitionFromBright, fadeOut0to1, slideRight, transitionToBright;
  animation-duration: 0.9s, 0.2s, 0.2s, 0.2s;
  animation-delay: 0s, 1.5s, 1.5s, 1.5s;
  animation-timing-function: cubic-bezier(0, 0, 0, 1), linear, cubic-bezier(1, 0, 1, 1), linear;
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background #champion-splash-ban-container {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: opacity 300ms linear;
}
.champion-select .champion-splash-background #champion-splash-ban-image {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
}
.champion-select .champion-splash-background #champion-splash-ban-component {
  position: absolute;
  transform: translateX(-50%) translateY(calc(-50% - 68px));
}
.champion-select .champion-splash-background #champion-splash-ban-component .container-slice-rotation {
  transform-origin: 269px;
  transform: rotate(0deg);
}
.champion-select .champion-splash-background #champion-splash-ban-component #image-top,
.champion-select .champion-splash-background #champion-splash-ban-component #image-bottom {
  transform: translateX(0);
}
.champion-select .champion-splash-background #champion-splash-ban-component #rect-container-slice {
  transform-origin: center;
  transform: translateX(-100%);
}
.champion-select .champion-splash-background.is-animating #champion-splash-ban-image {
  transition: opacity 700ms 200ms linear;
  opacity: 0;
}
.champion-select .champion-splash-background.is-showing-grid #champion-splash-ban-container {
  opacity: 0;
}
.champion-select .champion-splash-background .hidden {
  display: none;
}
.champion-select .champion-splash-background.is-not-rotating #champion-splash-ban-component .container-slice-rotation {
  transform: rotate(0deg);
}
.champion-select .champion-splash-background.large-area-animations-enabled.is-animating #champion-splash-ban-component {
  animation: fadeToGrayscale 400ms 300ms cubic-bezier(0, 0.6, 0.1, 1);
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-player-team #champion-splash-ban-component #rect-container-slice {
  animation: sliceMaskPlayer 300ms 100ms cubic-bezier(1, 0, 1, 1);
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-player-team #champion-splash-ban-component #image-top {
  animation: sliceRight 2500ms 250ms cubic-bezier(0, 0.94, 0.21, 1);
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-player-team #champion-splash-ban-component #image-bottom {
  animation: sliceLeft 2500ms 250ms cubic-bezier(0, 0.94, 0.21, 1);
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-player-team.is-rotating #champion-splash-ban-component .container-slice-rotation {
  animation: rotatePlayer 250ms linear;
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-enemy-team #champion-splash-ban-component #rect-container-slice {
  animation: sliceMaskEnemy 300ms 100ms cubic-bezier(1, 0, 1, 1);
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-enemy-team #champion-splash-ban-component #image-top {
  animation: sliceLeft 2500ms 250ms cubic-bezier(0, 0.94, 0.21, 1);
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-enemy-team #champion-splash-ban-component #image-bottom {
  animation: sliceRight 2500ms 250ms cubic-bezier(0, 0.94, 0.21, 1);
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background.large-area-animations-enabled.is-animating.is-rotating #champion-splash-ban-component .container-slice-rotation {
  animation: rotateEnemy 250ms linear;
  animation-fill-mode: forwards;
}
.champion-select .champion-splash-background .background-edge-backlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.champion-select .champion-splash-background .background-edge-backlight::before,
.champion-select .champion-splash-background .background-edge-backlight::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background-repeat: no-repeat;
}
.champion-select .champion-splash-background .background-edge-backlight::after {
  left: 50%;
  right: 0;
  transform: scaleX(-1);
}
.champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight {
  animation-name: edgeBacklightSinglePulse;
  animation-duration: 1.13s;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0, 0, 0.88, 0.47);
  background-color: rgba(248,2,0,0.05);
}
.champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight::before,
.champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight::after {
  background-image: url("/fe/lol-champ-select/images/background/red-background-backlight-bg.png");
}
.champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-0 {
  animation-delay: 0.83s;
}
.champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-1 {
  animation-delay: 1.48s;
}
.champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-2 {
  animation-delay: 2.13s;
}
.champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-3 {
  animation-delay: 2.78s;
}
.champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-4 {
  animation-delay: 3.43s;
}
.champion-select .champion-splash-background.pick-snipe-notification .background-edge-backlight.pick-snipe-banned-by-enemy-index-5 {
  animation-delay: 4.08s;
}
.champion-select.is-banning-now .champion-splash-background .background-edge-backlight {
  opacity: 1;
}
.champion-select.is-banning-now .champion-splash-background .background-edge-backlight::before,
.champion-select.is-banning-now .champion-splash-background .background-edge-backlight::after {
  opacity: 0;
  background-position: -40px;
  transition: opacity 0.5s;
  background-image: url("/fe/lol-champ-select/images/background/red-background-backlight-bg.png");
}
.champion-select.is-picking-now.pick-screen .champion-splash-background .background-edge-backlight {
  opacity: 1;
}
.champion-select.is-picking-now.pick-screen .champion-splash-background .background-edge-backlight::before,
.champion-select.is-picking-now.pick-screen .champion-splash-background .background-edge-backlight::after {
  opacity: 0;
  background-position: -80px;
  transition: opacity 0.5s;
  background-image: url("/fe/lol-champ-select/images/background/blue-background-backlight-bg.png");
}
.champion-select.is-banning-now.timer-less-than-11-seconds .background-edge-backlight,
.champion-select.is-picking-now.pick-screen.timer-less-than-11-seconds .background-edge-backlight {
  animation-name: edgeBacklightMultiPulse;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 10;
  animation-timing-function: cubic-bezier(0.46, 0.19, 0.7, 0.98);
}
.champion-select.is-banning-now.timer-less-than-11-seconds .background-edge-backlight::before,
.champion-select.is-picking-now.pick-screen.timer-less-than-11-seconds .background-edge-backlight::before,
.champion-select.is-banning-now.timer-less-than-11-seconds .background-edge-backlight::after,
.champion-select.is-picking-now.pick-screen.timer-less-than-11-seconds .background-edge-backlight::after {
  opacity: 1;
}
.champion-select .champion-splash-emblem-overlay {
  position: absolute;
  bottom: 255px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.champion-select .champion-splash-emblem-overlay img {
  width: 150px;
}
.champion-select .champselect-ban-lowspec-animation {
  animation: banOpacity 0.4s 0.87s forwards linear, banFilter 900ms forwards cubic-bezier(0, 0, 0.66, 1);
}
@-moz-keyframes edgeBacklightSinglePulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes edgeBacklightSinglePulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes edgeBacklightSinglePulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes edgeBacklightSinglePulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes edgeBacklightMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes edgeBacklightMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes edgeBacklightMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes edgeBacklightMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes transitionFromBright {
  0% {
    -webkit-filter: brightness(1.5);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
@-webkit-keyframes transitionFromBright {
  0% {
    -webkit-filter: brightness(1.5);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
@-o-keyframes transitionFromBright {
  0% {
    -webkit-filter: brightness(1.5);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
@keyframes transitionFromBright {
  0% {
    -webkit-filter: brightness(1.5);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}
@-moz-keyframes fadeOut0to1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut0to1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeOut0to1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut0to1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300px);
  }
}
@-webkit-keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300px);
  }
}
@-o-keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300px);
  }
}
@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300px);
  }
}
@-moz-keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(300px);
  }
}
@-webkit-keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(300px);
  }
}
@-o-keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(300px);
  }
}
@keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(300px);
  }
}
@-moz-keyframes transitionToBright {
  0% {
    -webkit-filter: brightness(1) blur(0px);
  }
  100% {
    -webkit-filter: brightness(1.5) blur(8px);
  }
}
@-webkit-keyframes transitionToBright {
  0% {
    -webkit-filter: brightness(1) blur(0px);
  }
  100% {
    -webkit-filter: brightness(1.5) blur(8px);
  }
}
@-o-keyframes transitionToBright {
  0% {
    -webkit-filter: brightness(1) blur(0px);
  }
  100% {
    -webkit-filter: brightness(1.5) blur(8px);
  }
}
@keyframes transitionToBright {
  0% {
    -webkit-filter: brightness(1) blur(0px);
  }
  100% {
    -webkit-filter: brightness(1.5) blur(8px);
  }
}
@-moz-keyframes banOpacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes banOpacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-o-keyframes banOpacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes banOpacity {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes banFilter {
  from {
    -webkit-filter: grayscale(0) brightness(1.5);
  }
  to {
    -webkit-filter: grayscale(1) brightness(1);
  }
}
@-webkit-keyframes banFilter {
  from {
    -webkit-filter: grayscale(0) brightness(1.5);
  }
  to {
    -webkit-filter: grayscale(1) brightness(1);
  }
}
@-o-keyframes banFilter {
  from {
    -webkit-filter: grayscale(0) brightness(1.5);
  }
  to {
    -webkit-filter: grayscale(1) brightness(1);
  }
}
@keyframes banFilter {
  from {
    -webkit-filter: grayscale(0) brightness(1.5);
  }
  to {
    -webkit-filter: grayscale(1) brightness(1);
  }
}
.champion-select.entry-animation.should-play-intro .ring-splash-outer .left-ring,
.champion-select.entry-animation.should-play-intro .ring-splash-outer .right-ring {
  animation-name: initialOuterRingSizeAnimation, initialOuterRingFlashAnimation;
  animation-duration: 0.8s, 0.9s;
  animation-delay: 0s, 0.8s;
  animation-timing-function: cubic-bezier(0.01, 1, 0.085, 0.915), cubic-bezier(0, 0.755, 0.425, 0.91);
  animation-direction: forwards;
  animation-iteration-count: 1;
}
.champion-select.entry-animation.should-play-intro .ring-splash-inner .left-ring,
.champion-select.entry-animation.should-play-intro .ring-splash-inner .right-ring {
  animation-name: initialInnerRingSizeAnimation, initialInnerRingFlashAnimation;
  animation-duration: 0.8s, 0.9s;
  animation-delay: 0s, 0.8s;
  animation-timing-function: cubic-bezier(0.01, 1, 0.085, 0.915), cubic-bezier(0, 0.755, 0.425, 0.91);
  animation-direction: forwards;
  animation-iteration-count: 1;
}
.champion-select.entry-animation.should-play-intro .ring-splash-dashed:before {
  animation-name: initialDashedRingSizeAnimation, initialDashedRingFlashAnimation;
  animation-duration: 0.8s, 0.9s;
  animation-delay: 0s, 0.8s;
  animation-timing-function: cubic-bezier(0.01, 1, 0.085, 0.915), cubic-bezier(0, 0.755, 0.425, 0.91);
  animation-direction: forwards;
  animation-iteration-count: 1;
}
.champion-splash-ring {
  --caret-rotation-duration: 800ms;
  position: absolute;
  width: 100%;
  height: 100%;
  top: -62.5px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
.champion-splash-ring .ring-splash-dashed {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-repeat: no-repeat;
}
.champion-splash-ring .ring-splash-dashed::before,
.champion-splash-ring .ring-splash-dashed::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/fe/lol-champ-select/images/champion-ring/ring-splash-dashed.png");
  background-repeat: no-repeat;
  background-size: 598px;
  background-position: center;
}
.champion-splash-ring .ring-splash-outer,
.champion-splash-ring .ring-splash-inner {
  position: absolute;
  top: 50%;
  left: 50%;
}
.champion-splash-ring .ring-splash-outer .left-ring,
.champion-splash-ring .ring-splash-inner .left-ring,
.champion-splash-ring .ring-splash-outer .right-ring,
.champion-splash-ring .ring-splash-inner .right-ring {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}
.champion-splash-ring .ring-splash-outer .left-ring,
.champion-splash-ring .ring-splash-inner .left-ring {
  transform: translateX(-100%) translateY(-50%);
}
.champion-splash-ring .ring-splash-outer .right-ring,
.champion-splash-ring .ring-splash-inner .right-ring {
  transform-origin: center;
  transform: scaleX(-1) translateY(-50%);
}
.champion-splash-ring .ring-splash-outer .left-ring,
.champion-splash-ring .ring-splash-outer .right-ring {
  width: 324px;
  height: 404px;
  background-image: url("/fe/lol-champ-select/images/champion-ring/ring-splash-outer-left.png");
}
.champion-splash-ring .ring-splash-inner .left-ring,
.champion-splash-ring .ring-splash-inner .right-ring {
  width: 324px;
  height: 406px;
  background-image: url("/fe/lol-champ-select/images/champion-ring/ring-splash-inner-left.png");
  background-position: 7.5px center;
}
.champion-splash-ring.animation-enabled .ring-splash-dashed::before,
.champion-splash-ring.animation-enabled .ring-splash-dashed::after {
  animation: rotateSplashRing 60s linear infinite;
}
.champion-select.pick-screen.is-acting-now .champion-splash-ring,
.champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring {
  top: 0;
}
.champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-dashed,
.champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-dashed {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 27%, transparent 28.5%, transparent 71.5%, #000 73%);
}
.champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::before,
.champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::before,
.champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::after,
.champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::after {
  opacity: 0.6;
}
.champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::before,
.champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::before {
  left: -50px;
}
.champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::after,
.champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-dashed::after {
  right: -50px;
}
.champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-outer,
.champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-outer,
.champion-select.pick-screen.is-acting-now .champion-splash-ring .ring-splash-inner,
.champion-select.ban-showcase-screen.is-acting-now .champion-splash-ring .ring-splash-inner {
  display: none;
}
.champion-select.selected-screen .champion-splash-ring .ring-splash-dashed,
.champion-select.position-assignment-screen .champion-splash-ring .ring-splash-dashed,
.champion-select.game-starting-screen .champion-splash-ring .ring-splash-dashed {
  -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 160px, #000 160px, #000 565px, transparent 82%);
}
.champion-select.selected-screen .champion-splash-ring .ring-splash-dashed:after,
.champion-select.position-assignment-screen .champion-splash-ring .ring-splash-dashed:after,
.champion-select.game-starting-screen .champion-splash-ring .ring-splash-dashed:after {
  display: none;
}
.champion-select.selected-screen .champion-splash-ring.expanded-header .ring-splash-dashed,
.champion-select.position-assignment-screen .champion-splash-ring.expanded-header .ring-splash-dashed,
.champion-select.game-starting-screen .champion-splash-ring.expanded-header .ring-splash-dashed {
  -webkit-mask-image: linear-gradient(to top, transparent 0, transparent 160px, #000 160px, #000 565px, transparent 80%);
}
@-moz-keyframes initialOuterRingSizeAnimation {
  0% {
    width: 750px;
  }
  100% {
    width: 374px;
  }
}
@-webkit-keyframes initialOuterRingSizeAnimation {
  0% {
    width: 750px;
  }
  100% {
    width: 374px;
  }
}
@-o-keyframes initialOuterRingSizeAnimation {
  0% {
    width: 750px;
  }
  100% {
    width: 374px;
  }
}
@keyframes initialOuterRingSizeAnimation {
  0% {
    width: 750px;
  }
  100% {
    width: 374px;
  }
}
@-moz-keyframes initialInnerRingSizeAnimation {
  0% {
    width: 180px;
  }
  100% {
    width: 287.5px;
  }
}
@-webkit-keyframes initialInnerRingSizeAnimation {
  0% {
    width: 180px;
  }
  100% {
    width: 287.5px;
  }
}
@-o-keyframes initialInnerRingSizeAnimation {
  0% {
    width: 180px;
  }
  100% {
    width: 287.5px;
  }
}
@keyframes initialInnerRingSizeAnimation {
  0% {
    width: 180px;
  }
  100% {
    width: 287.5px;
  }
}
@-moz-keyframes initialOuterRingFlashAnimation {
  0% {
    width: 374px;
  }
  5% {
    width: 324px;
    -webkit-filter: brightness(4);
  }
  100% {
    width: 324px;
    -webkit-filter: brightness(1);
  }
}
@-webkit-keyframes initialOuterRingFlashAnimation {
  0% {
    width: 374px;
  }
  5% {
    width: 324px;
    -webkit-filter: brightness(4);
  }
  100% {
    width: 324px;
    -webkit-filter: brightness(1);
  }
}
@-o-keyframes initialOuterRingFlashAnimation {
  0% {
    width: 374px;
  }
  5% {
    width: 324px;
    -webkit-filter: brightness(4);
  }
  100% {
    width: 324px;
    -webkit-filter: brightness(1);
  }
}
@keyframes initialOuterRingFlashAnimation {
  0% {
    width: 374px;
  }
  5% {
    width: 324px;
    -webkit-filter: brightness(4);
  }
  100% {
    width: 324px;
    -webkit-filter: brightness(1);
  }
}
@-moz-keyframes initialInnerRingFlashAnimation {
  0% {
    width: 287.5px;
  }
  5% {
    width: 324px;
    -webkit-filter: brightness(4);
  }
  100% {
    width: 324px;
    -webkit-filter: brightness(1);
  }
}
@-webkit-keyframes initialInnerRingFlashAnimation {
  0% {
    width: 287.5px;
  }
  5% {
    width: 324px;
    -webkit-filter: brightness(4);
  }
  100% {
    width: 324px;
    -webkit-filter: brightness(1);
  }
}
@-o-keyframes initialInnerRingFlashAnimation {
  0% {
    width: 287.5px;
  }
  5% {
    width: 324px;
    -webkit-filter: brightness(4);
  }
  100% {
    width: 324px;
    -webkit-filter: brightness(1);
  }
}
@keyframes initialInnerRingFlashAnimation {
  0% {
    width: 287.5px;
  }
  5% {
    width: 324px;
    -webkit-filter: brightness(4);
  }
  100% {
    width: 324px;
    -webkit-filter: brightness(1);
  }
}
@-moz-keyframes initialDashedRingSizeAnimation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.175);
  }
}
@-webkit-keyframes initialDashedRingSizeAnimation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.175);
  }
}
@-o-keyframes initialDashedRingSizeAnimation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.175);
  }
}
@keyframes initialDashedRingSizeAnimation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.175);
  }
}
@-moz-keyframes initialDashedRingFlashAnimation {
  0% {
    transform: scale(1.175);
  }
  5% {
    transform: scale(1);
    -webkit-filter: brightness(4);
  }
  100% {
    transform: scale(1);
    -webkit-filter: brightness(1);
  }
}
@-webkit-keyframes initialDashedRingFlashAnimation {
  0% {
    transform: scale(1.175);
  }
  5% {
    transform: scale(1);
    -webkit-filter: brightness(4);
  }
  100% {
    transform: scale(1);
    -webkit-filter: brightness(1);
  }
}
@-o-keyframes initialDashedRingFlashAnimation {
  0% {
    transform: scale(1.175);
  }
  5% {
    transform: scale(1);
    -webkit-filter: brightness(4);
  }
  100% {
    transform: scale(1);
    -webkit-filter: brightness(1);
  }
}
@keyframes initialDashedRingFlashAnimation {
  0% {
    transform: scale(1.175);
  }
  5% {
    transform: scale(1);
    -webkit-filter: brightness(4);
  }
  100% {
    transform: scale(1);
    -webkit-filter: brightness(1);
  }
}
@-moz-keyframes rotateSplashRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@-webkit-keyframes rotateSplashRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@-o-keyframes rotateSplashRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes rotateSplashRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
.masteries-modal {
  position: absolute;
  top: 75px;
  left: 108px;
}
.masteries-modal .masteries-body {
  background-color: #010a13;
}
.emotes-modal {
  position: absolute;
  top: 75px;
  left: 108px;
}
.emotes-modal .emote-root-component {
  padding: 27px;
  padding-right: 29px;
  background: url("/fe/lol-champ-select/images/emotes/emotes-background.png");
  background-size: cover;
}
.emotes-edit-button-container {
  display: flex;
  pointer-events: auto;
}
.emotes-edit-button-container.disabled.showing-emotes {
  pointer-events: none;
}
.emotes-edit-button-container .emotes-edit-button {
  width: 37px;
  height: 37px;
  margin: 0 5px;
  background: url("/fe/lol-champ-select/images/emotes/edit-emotes-normal-off.png") center no-repeat;
  background-size: contain;
  align-self: flex-end;
}
.emotes-edit-button-container .emotes-edit-button.no-ward-skins {
  margin: 12px 2px 0px 8px;
}
.emotes-edit-button-container .emotes-edit-button:after {
  content: url("/fe/lol-champ-select/images/emotes/edit-emotes-hover-off.png") url("/fe/lol-champ-select/images/emotes/edit-emotes-click-off.png");
  display: none;
  height: 0;
  width: 0;
}
.emotes-edit-button-container .emotes-edit-button:hover {
  cursor: pointer;
  background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-hover-off.png");
}
.emotes-edit-button-container .emotes-edit-button:active {
  background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-click-off.png");
}
.emotes-edit-button-container .emotes-edit-button.disabled {
  cursor: default;
  background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-disabled-off.png");
}
.emotes-edit-button-container .emotes-edit-button.showing-emotes {
  background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-normal-on.png");
  cursor: default;
}
.emotes-edit-button-container .emotes-edit-button.showing-emotes:after {
  content: url("/fe/lol-champ-select/images/emotes/edit-emotes-hover-on.png") url("/fe/lol-champ-select/images/emotes/edit-emotes-click-on.png");
  display: none;
  height: 0;
  width: 0;
}
.emotes-edit-button-container .emotes-edit-button.showing-emotes:hover {
  background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-hover-on.png");
}
.emotes-edit-button-container .emotes-edit-button.showing-emotes:active {
  background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-click-on.png");
}
.emotes-edit-button-container .emotes-edit-button.showing-emotes.disabled {
  background-image: url("/fe/lol-champ-select/images/emotes/edit-emotes-disabled-on.png");
}
.flyout-selector-trigger-button {
  width: 37px;
  height: 37px;
  box-sizing: border-box;
  border: 1px solid #3c3c41;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
  margin: 0 5px;
}
.flyout-selector-trigger-button .selection-button-image {
  -webkit-filter: brightness(80%);
  transition: all 200ms;
  background: #010a13;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}
.flyout-selector-trigger-button.disabled {
  background-color: #010a13;
  -webkit-filter: brightness(35%);
  border-image-source: linear-gradient(to bottom, #a09b8c 0, #1e2328 100%);
}
.flyout-selector-trigger-button.disabled .selection-button-image {
  -webkit-filter: grayscale(100%);
}
.flyout-selector-trigger-button .animated-border-overlay,
.flyout-selector-trigger-button .animated-gradient-overlay {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  pointer-events: none;
}
.flyout-selector-trigger-button.enabled:hover,
.flyout-selector-trigger-button.enabled:active {
  cursor: pointer;
  border-color: #c89b3c;
}
.flyout-selector-trigger-button.enabled:hover .selection-button-image,
.flyout-selector-trigger-button.enabled:active .selection-button-image {
  opacity: 1;
  -webkit-filter: brightness(1.35);
}
.flyout-selector-trigger-button.enabled .animated-gradient-overlay {
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0.1) 100%);
}
.flyout-selector-trigger-button.enabled .animated-border-overlay {
  box-sizing: border-box;
  border: 2px solid #c89b3c;
  transition: opacity 0.5s;
}
.flyout-selector-trigger-button.enabled.animate-click .animated-gradient-overlay {
  animation-name: FlyoutSelectorTriggerGradientOverlayAnimation;
  animation-fill-mode: both;
  animation-duration: 0.4s;
}
.flyout-selector-trigger-button.enabled.animate-click .animated-border-overlay {
  animation-name: FlyoutSelectorTriggerBorderOverlayAnimation;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}
@-moz-keyframes FlyoutSelectorTriggerGradientOverlayAnimation {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 0.5;
    transform: translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform: translate(0%, 0%);
  }
}
@-webkit-keyframes FlyoutSelectorTriggerGradientOverlayAnimation {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 0.5;
    transform: translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform: translate(0%, 0%);
  }
}
@-o-keyframes FlyoutSelectorTriggerGradientOverlayAnimation {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 0.5;
    transform: translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform: translate(0%, 0%);
  }
}
@keyframes FlyoutSelectorTriggerGradientOverlayAnimation {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 0.5;
    transform: translate(0%, 0%);
  }
  100% {
    opacity: 0;
    transform: translate(0%, 0%);
  }
}
@-moz-keyframes FlyoutSelectorTriggerBorderOverlayAnimation {
  0% {
    -webkit-filter: brightness(1.4);
    opacity: 0;
  }
  10% {
    -webkit-filter: brightness(1.4);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(0.8);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.7);
    opacity: 0;
  }
}
@-webkit-keyframes FlyoutSelectorTriggerBorderOverlayAnimation {
  0% {
    -webkit-filter: brightness(1.4);
    opacity: 0;
  }
  10% {
    -webkit-filter: brightness(1.4);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(0.8);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.7);
    opacity: 0;
  }
}
@-o-keyframes FlyoutSelectorTriggerBorderOverlayAnimation {
  0% {
    -webkit-filter: brightness(1.4);
    opacity: 0;
  }
  10% {
    -webkit-filter: brightness(1.4);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(0.8);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.7);
    opacity: 0;
  }
}
@keyframes FlyoutSelectorTriggerBorderOverlayAnimation {
  0% {
    -webkit-filter: brightness(1.4);
    opacity: 0;
  }
  10% {
    -webkit-filter: brightness(1.4);
    opacity: 1;
  }
  50% {
    -webkit-filter: brightness(0.8);
    opacity: 1;
  }
  100% {
    -webkit-filter: brightness(0.7);
    opacity: 0;
  }
}
.champion-select .pick-mode {
  font-family: var(--font-display);
}
.champion-select .team-size {
  font-family: var(--font-body);
}
.champion-select .team-size,
.champion-select .pick-mode {
  -webkit-user-select: none;
}
.champion-select .team-size,
.champion-select .pick-mode {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-select .pick-mode {
  text-transform: uppercase;
}
.champion-select .pick-mode:lang(ko-kr),
.champion-select .pick-mode:lang(ja-jp),
.champion-select .pick-mode:lang(tr-tr),
.champion-select .pick-mode:lang(el-gr),
.champion-select .pick-mode:lang(th-th),
.champion-select .pick-mode:lang(zh-tw) {
  text-transform: none;
}
.champion-select .pick-mode {
  color: #f0e6d2;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.05em;
}
.champion-select .team-size {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.champion-select .team-size:lang(ja-jp) {
  font-size: 13px;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text {
  font-family: var(--font-display);
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text {
  -webkit-user-select: none;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text {
  text-transform: uppercase;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(ko-kr),
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(ja-jp),
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(tr-tr),
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(el-gr),
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(th-th),
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:lang(zh-tw) {
  text-transform: none;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text {
  color: #c8aa6e;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.0325em;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:hover {
  color: #f0e6d2;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:disabled,
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:disabled:hover,
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text[disabled='true'],
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text[disabled='true']:hover {
  color: #5c5b57;
  cursor: default;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:active {
  color: #785a28;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text {
  color: #b2d9db;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:hover {
  color: #cdfafa;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:active {
  color: #005a82;
}
.lock-in {
  text-align: center;
  position: absolute;
  pointer-events: none;
  width: 640px;
  top: 583px;
}
.lock-in .lock-in-button-lines {
  background-image: url("/fe/lol-champ-select/images/config/linework-button.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 43px;
}
.lock-in .lock-in-video-wrapper {
  margin: 0 auto;
  height: 43px;
  width: 166px;
  -webkit-clip-path: polygon(13px 0px, 153px 0px, 166px 37px, 50% 100%, 0px 37px);
  position: relative;
  pointer-events: all;
  cursor: pointer;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video {
  position: relative;
  top: 4px;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .magic {
  position: absolute;
  top: -229px;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video lol-uikit-video {
  position: absolute;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video lol-uikit-video.enabled-hover {
  top: -8px;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video lol-uikit-video.enabled-click,
.lock-in .lock-in-video-wrapper .lock-in-button-video lol-uikit-video.enabled-intro {
  top: -58px;
  left: 1px;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video lol-uikit-video.disabled-intro {
  top: -54px;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text {
  margin-top: 6px;
  position: relative;
  top: 11px;
  transition: opacity 600ms, -webkit-filter 100ms;
  opacity: 1;
  -webkit-filter: brightness(1);
  pointer-events: none;
}
.lock-in .lock-in-video-wrapper .lock-in-button-video .lock-in-text:active {
  color: #0596aa;
}
.lock-in .lock-in-video-wrapper.enabledClick .lock-in-text {
  opacity: 0;
  -webkit-filter: brightness(2);
}
.lock-in .lock-in-video-wrapper .disabled-button-bg {
  width: 166px;
  height: 43px;
  position: absolute;
  opacity: 0;
  transition: opacity 500ms;
  background: url("/fe/lol-champ-select/video/lock-in/lock-in-button-disabled-idle.png") 50% no-repeat;
}
.lock-in .lock-in-video-wrapper.disabled {
  pointer-events: none;
  cursor: none;
}
.lock-in .lock-in-video-wrapper.disabled .lock-in-text {
  color: #5c5b57;
}
.lock-in .lock-in-video-wrapper.disabled .disabled-button-bg,
.lock-in .lock-in-video-wrapper.enabledIntro .disabled-button-bg {
  opacity: 1;
}
.lock-in .lock-in-video-wrapper .lock-in-overlay-video {
  pointer-events: none;
  position: absolute;
  top: -26px;
}
.lock-in .lock-in-video-wrapper video {
  transform: translateX(-50%);
}
.lock-in .bansnipe-tooltip {
  position: absolute;
  opacity: 1;
  top: -79px;
  left: 158px;
}
.lock-in .bansnipe-content {
  text-transform: none;
}
.perks-edit-button-container {
  display: flex;
}
.perks-edit-button-container .perks-edit-button {
  width: 30px;
  height: 30px;
  margin: 1px 0px 0px 2px;
  background: url("/fe/lol-champ-select/images/config/button-edit-masteries.png") center no-repeat;
  background-size: contain;
  align-self: flex-end;
}
.perks-edit-button-container .perks-edit-button:after {
  content: url("/fe/lol-champ-select/images/config/button-edit-masteries-hover.png") url("/fe/lol-champ-select/images/config/button-edit-masteries-click.png");
  display: none;
  height: 0;
  width: 0;
}
.perks-edit-button-container .perks-edit-button:hover {
  cursor: pointer;
  background-image: url("/fe/lol-champ-select/images/config/button-edit-masteries-hover.png");
}
.perks-edit-button-container .perks-edit-button:active {
  background-image: url("/fe/lol-champ-select/images/config/button-edit-masteries-click.png");
}
.perks-edit-button-container .perks-edit-button.disabled {
  cursor: default;
  background-image: url("/fe/lol-champ-select/images/config/button-edit-masteries-disabled.png");
}
.perks-champselect-modal.perks-modal {
  position: absolute;
  top: 75px;
  left: 108px;
/* rcp-fe-lol-perks/src/app/styles/shared.styl#L13 */
  width: 1055px;
  height: 635px;
}
.perks-champselect-modal.perks-modal .perks-body {
  background-color: #010a13;
}
.perks-champselect-modal.perks-modal.removed {
  display: none;
}
.perks-page-dropdown-container lol-uikit-framed-dropdown::shadow .ui-dropdown-current-content {
  width: 100%;
}
.perks-page-dropdown-container lol-uikit-framed-dropdown::shadow .ui-dropdown dd.ui-dropdown-options-container ul.ui-dropdown-options lol-uikit-scrollable {
  max-height: 350px;
}
.champion-select .champion-config-wrapper .dropdowns .perks-page-dropdown-container {
  margin-left: 7px;
  position: relative;
  width: 193px;
}
.champion-select .champion-config-wrapper .dropdowns .perks-page-dropdown-container lol-uikit-framed-dropdown {
  height: 37px;
}
.champion-select .champion-config-wrapper .dropdowns .perks-page-dropdown-container lol-uikit-framed-dropdown::shadow .ui-dropdown.opens-upward {
  height: 100%;
}
.current-perks-page-invalid {
  outline-color: #f00;
  outline-width: 1px;
  outline-style: solid;
}
lol-uikit-content-block.champ-select-runes-tutorial-tooltip {
  width: 250px;
  padding: 18px 9px;
}
lol-uikit-content-block.runes-not-yet-unlocked {
  width: 300px;
  text-align: center;
}
lol-uikit-content-block.runes-not-supported-by-mode {
  width: 300px;
  text-align: center;
}
.framed-highlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  animation-name: framedHighlightFadeInAnimation;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
}
.framed-highlight-overlay .framed-highlight-overlay-shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: 0 0 25px #cab568, 0 0 4px rgba(202,181,104,0.5);
  animation-name: framedHighlightShadowAnimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.framed-highlight-overlay .framed-highlight-overlay-border {
  position: absolute;
  top: -1px;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  -webkit-clip-path: polygon(0% 0, 0% 100%, 1px 100%, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px 100%, 100% 100%, 100% 0%);
}
.framed-highlight-overlay .framed-highlight-overlay-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: -100%;
  animation-name: framedHighlightBorderAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background-image: linear-gradient(110deg, #fff 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0) 32%, #fff 50%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 82%, #fff 100%);
}
.framed-highlight-overlay .framed-highlight-overlay-background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
.framed-highlight-overlay .framed-highlight-overlay-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: -100%;
  overflow: hidden;
  animation-name: framedHighlightBackgroundAnimation;
  animation-duration: 11s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background-image: linear-gradient(134deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 14%, rgba(255,255,255,0.08) 17%, rgba(255,255,255,0.12) 18%, rgba(255,255,255,0.14) 20%, rgba(255,255,255,0.12) 22%, rgba(255,255,255,0.08) 23%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 64%, rgba(255,255,255,0.08) 67%, rgba(255,255,255,0.12) 68%, rgba(255,255,255,0.13) 70%, rgba(255,255,255,0.12) 72%, rgba(255,255,255,0.08) 73%, rgba(255,255,255,0) 78%), linear-gradient(114deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0.14) 40%, rgba(255,255,255,0.12) 42%, rgba(255,255,255,0.08) 43%, rgba(255,255,255,0) 48%, rgba(255,255,255,0) 84%, rgba(255,255,255,0.08) 87%, rgba(255,255,255,0.12) 88%, rgba(255,255,255,0.14) 90%, rgba(255,255,255,0.12) 92%, rgba(255,255,255,0.08) 93%, rgba(255,255,255,0) 98%);
  opacity: 0.7;
}
@-moz-keyframes framedHighlightFadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes framedHighlightFadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes framedHighlightFadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes framedHighlightFadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes framedHighlightBackgroundAnimation {
  0% {
    transform: translateX(0);
    opacity: 0.5;
  }
  20% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%);
    opacity: 0.5;
  }
}
@-webkit-keyframes framedHighlightBackgroundAnimation {
  0% {
    transform: translateX(0);
    opacity: 0.5;
  }
  20% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%);
    opacity: 0.5;
  }
}
@-o-keyframes framedHighlightBackgroundAnimation {
  0% {
    transform: translateX(0);
    opacity: 0.5;
  }
  20% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%);
    opacity: 0.5;
  }
}
@keyframes framedHighlightBackgroundAnimation {
  0% {
    transform: translateX(0);
    opacity: 0.5;
  }
  20% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%);
    opacity: 0.5;
  }
}
@-moz-keyframes framedHighlightBorderAnimation {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  10% {
    opacity: 0.9;
  }
  20% {
    opacity: 0.8;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  70% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}
@-webkit-keyframes framedHighlightBorderAnimation {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  10% {
    opacity: 0.9;
  }
  20% {
    opacity: 0.8;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  70% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}
@-o-keyframes framedHighlightBorderAnimation {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  10% {
    opacity: 0.9;
  }
  20% {
    opacity: 0.8;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  70% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}
@keyframes framedHighlightBorderAnimation {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  10% {
    opacity: 0.9;
  }
  20% {
    opacity: 0.8;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  70% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}
@-moz-keyframes framedHighlightShadowAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes framedHighlightShadowAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes framedHighlightShadowAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes framedHighlightShadowAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.perks-page-dropdown-option-content,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content,
.perks-page-dropdown-details,
.perks-page-dropdown-details-style-name {
  font-family: var(--font-display);
}
.perks-page-dropdown-option-content,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content,
.perks-page-dropdown-details-style-name {
  -webkit-user-select: none;
}
.perks-page-dropdown-option-content,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content,
.perks-page-dropdown-details-style-name {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.perks-page-dropdown-details-style-name {
  text-transform: uppercase;
}
.perks-page-dropdown-details-style-name:lang(ko-kr),
.perks-page-dropdown-details-style-name:lang(ja-jp),
.perks-page-dropdown-details-style-name:lang(tr-tr),
.perks-page-dropdown-details-style-name:lang(el-gr),
.perks-page-dropdown-details-style-name:lang(th-th),
.perks-page-dropdown-details-style-name:lang(zh-tw) {
  text-transform: none;
}
.perks-page-dropdown-details-style-name {
  color: #f0e6d2;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.075em;
}
.perks-page-dropdown-option-content,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content {
  color: #c8aa6e;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.0325em;
}
.perks-page-dropdown-option-content:hover,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content:hover {
  color: #f0e6d2;
}
.perks-page-dropdown-option-content:disabled,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content:disabled,
.perks-page-dropdown-option-content:disabled:hover,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content:disabled:hover,
.perks-page-dropdown-option-content[disabled='true'],
.perks-page-dropdown::shadow .perks-page-dropdown-option-content[disabled='true'],
.perks-page-dropdown-option-content[disabled='true']:hover,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content[disabled='true']:hover {
  color: #5c5b57;
  cursor: default;
}
.perks-page-dropdown-option-content:active,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content:active {
  color: #785a28;
}
.perks-page-dropdown-option-content,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content {
  display: flex;
  align-items: center;
}
.perks-page-dropdown-option-content .perks-page-dropdown-option-icon,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content .perks-page-dropdown-option-icon {
  display: inline-flex;
  height: 20px;
  margin-left: -4px;
  margin-right: 4px;
  vertical-align: middle;
  width: 20px;
}
.perks-page-dropdown-option-content .perks-page-dropdown-option-icon .perks-page-dropdown-option-dot,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content .perks-page-dropdown-option-icon .perks-page-dropdown-option-dot {
  display: block;
}
.perks-page-dropdown-option-content .perks-page-dropdown-option-icon.invalid,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content .perks-page-dropdown-option-icon.invalid {
  background: #e62142;
  -webkit-mask-image: url("/fe/lol-champ-select/images/perks/exclamation.svg");
  -webkit-mask-position: 50% 40%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 75%;
}
.perks-page-dropdown-option-content .perks-page-dropdown-option-icon.invalid> .perks-page-dropdown-option-dot,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content .perks-page-dropdown-option-icon.invalid> .perks-page-dropdown-option-dot {
  display: none;
}
.perks-page-dropdown-option-content .perks-page-dropdown-option-icon.modified,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content .perks-page-dropdown-option-icon.modified {
  align-items: center;
  justify-content: center;
}
.perks-page-dropdown-option-content .perks-page-dropdown-option-icon.removed,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content .perks-page-dropdown-option-icon.removed {
  display: none;
}
.perks-page-dropdown-option-content .perks-page-name,
.perks-page-dropdown::shadow .perks-page-dropdown-option-content .perks-page-name {
  display: inline-block;
}
.perks-page-dropdown::shadow .ui-dropdown .ui-dropdown-current .ui-dropdown-current-content {
  padding-left: 2px;
}
.perks-page-dropdown-details {
  background-position: center center;
  background-size: cover;
  color: #cdbe91;
  font-size: 10px;
  letter-spacing: 0.5pt;
  line-height: 17px;
  padding: 18px 20px 14px 48px;
  position: relative;
  text-transform: uppercase;
  width: 270px;
}
.perks-page-dropdown-details-style-name {
  margin-bottom: 6px;
  position: relative;
}
.perks-page-dropdown-details-style-name.secondary {
  margin-top: 25px;
}
.perks-page-dropdown-details-style-name.style8000 {
  color: #c8aa6e;
}
.perks-page-dropdown-details-style-name.style8100 {
  color: #dc4747;
}
.perks-page-dropdown-details-style-name.style8200 {
  color: #6c75f5;
}
.perks-page-dropdown-details-style-name.style8300 {
  color: #48b4be;
}
.perks-page-dropdown-details-style-name.style8400 {
  color: #a4d08d;
}
.perks-page-dropdown-details-style-icon {
  display: block;
  height: 20px;
  left: -28px;
  position: absolute;
  top: -1px;
  width: 20px;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
}
.perks-page-dropdown-details-style-icon.style8000 {
  background: #c8aa6e;
}
.perks-page-dropdown-details-style-icon.style8100 {
  background: #dc4747;
}
.perks-page-dropdown-details-style-icon.style8200 {
  background: #6c75f5;
}
.perks-page-dropdown-details-style-icon.style8300 {
  background: #48b4be;
}
.perks-page-dropdown-details-style-icon.style8400 {
  background: #a4d08d;
}
.perks-page-dropdown-details-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.perks-page-dropdown-details-li {
  margin: 0;
  padding: 0;
  position: relative;
}
.perks-page-dropdown-details-li:before {
  color: #7e7558;
  content: "\25C6"; /* UTF-8 Hex code for a diamond */
  display: block;
  font-size: 9px;
  left: -17px;
  position: absolute;
  top: 7px;
  transform: translate(-50%, -50%);
}
.perks-page-dropdown-details-li.keystone:before {
  font-size: 12px;
}
.phase-transition-text,
.phase-transition-text-glow {
  font-family: var(--font-display);
}
.phase-transition-text,
.phase-transition-text-glow {
  -webkit-user-select: none;
}
.phase-transition-text,
.phase-transition-text-glow {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.phase-transition-text,
.phase-transition-text-glow {
  text-transform: uppercase;
}
.phase-transition-text:lang(ko-kr),
.phase-transition-text-glow:lang(ko-kr),
.phase-transition-text:lang(ja-jp),
.phase-transition-text-glow:lang(ja-jp),
.phase-transition-text:lang(tr-tr),
.phase-transition-text-glow:lang(tr-tr),
.phase-transition-text:lang(el-gr),
.phase-transition-text-glow:lang(el-gr),
.phase-transition-text:lang(th-th),
.phase-transition-text-glow:lang(th-th),
.phase-transition-text:lang(zh-tw),
.phase-transition-text-glow:lang(zh-tw) {
  text-transform: none;
}
.phase-transition-text,
.phase-transition-text-glow {
  color: #f0e6d2;
  font-size: 30px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
}
.phase-transition {
  position: absolute;
  width: 100%;
  top: calc(50% - 40px);
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}
.phase-transition-text,
.phase-transition-text-glow {
  letter-spacing: 0.2em;
  word-wrap: break-word;
}
.phase-transition-text-glow {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 0 0 8px #fff, 0 0 10px #fff;
  opacity: 0;
}
.phase-transition.visible .phase-transition-text-glow {
  animation-name: fadeOut1to0;
  animation-duration: 0.7s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77);
}
.phase-transition.visible .phase-transition-label {
  animation-name: scaleDownTextIntro, fadeIn0to1;
  animation-duration: 0.2s;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), linear;
}
@-moz-keyframes scaleDownTextIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes scaleDownTextIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes scaleDownTextIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleDownTextIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.pick-ban-ring {
  position: absolute;
  top: calc(50% - 33px);
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translateZ(0);
}
.pick-ban-ring:after {
  content: url("/fe/lol-champ-select/images/champion-ring/ring-splash-dashed.png") url("/fe/lol-champ-select/images/champion-ring/ring-splash-outer-left.png") url("/fe/lol-champ-select/images/champion-ring/ring-splash-inner-left.png");
  display: none;
  height: 0;
  width: 0;
}
.pick-ban-ring .counter-rotation-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center;
}
.pick-ban-ring .ring-inner-mask,
.pick-ban-ring .ring-inner-container,
.pick-ban-ring .ring-gear-component-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.pick-ban-ring .ring-inner-mask {
  width: 541px;
  height: 541px;
  transform-origin: center;
}
.pick-ban-ring .ring-inner-mask {
  width: 800px;
}
.pick-ban-ring .ring-inner-mask {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 62px, #000 82px, #000 464px, transparent 484px, transparent 100%);
  -webkit-mask-repeat: no-repeat;
}
.pick-ban-ring .ring-inner-container {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.pick-ban-ring .slash-video {
  display: block;
  transform: translateX(12px) translateY(-6px);
}
.pick-ban-ring .slash-video.red {
  transform: translateX(-12px) translateY(-6px) scaleX(-1);
}
.pick-ban-ring.is-init.expanded-ring .ban-slash-container,
.pick-ban-ring.is-init.expanded-ring .ban-slash-video {
  display: none;
}
.pick-ban-ring.is-pending .ban-slash-container,
.pick-ban-ring.is-pending .ban-slash-video {
  transition-property: none;
}
.pick-ban-ring.is-animating .ring-rotation,
.pick-ban-ring.is-animating .ban-slash-wrapper {
  transition: transform 250ms linear;
}
.pick-phase .champion-name-wrapper .skin-name-text {
  text-transform: uppercase;
}
.pick-phase .champion-name-wrapper .skin-name-text:lang(ko-kr),
.pick-phase .champion-name-wrapper .skin-name-text:lang(ja-jp),
.pick-phase .champion-name-wrapper .skin-name-text:lang(tr-tr),
.pick-phase .champion-name-wrapper .skin-name-text:lang(el-gr),
.pick-phase .champion-name-wrapper .skin-name-text:lang(th-th),
.pick-phase .champion-name-wrapper .skin-name-text:lang(zh-tw) {
  text-transform: none;
}
.pick-phase {
  opacity: 1;
  transition: opacity 200ms;
  display: flex;
  flex-direction: column;
}
.pick-phase.pick-phase-hidden {
  opacity: 0;
}
.pick-phase .champion-name-wrapper {
  position: absolute;
  width: 100%;
  top: 515px;
  width: 100%;
  transition: -webkit-filter 0.9s linear, transform 0.7s ease-out;
  height: 80px;
}
.pick-phase .champion-name-wrapper.just-locked {
  animation-name: fadeOut0to1;
  animation-duration: 0.2s;
  animation-delay: 1.5s;
  animation-timing-function: linear;
}
.pick-phase .champion-grid-toggle {
  width: 50px;
  height: 20px;
  position: absolute;
  left: calc(50% - (50px / 2));
  bottom: 88px;
}
.pick-phase .champion-grid-toggle:before {
  content: '';
  display: block;
  width: 171px;
  height: 7px;
  position: relative;
  left: -175px;
  bottom: -20px;
  background: url("/fe/lol-champ-select/images/config/toggle-button-bracket.png") center top no-repeat;
  transform: scaleX(-1);
}
.pick-phase .champion-grid-toggle:after {
  content: '';
  display: block;
  width: 171px;
  height: 7px;
  position: relative;
  right: -54px;
  bottom: 7px;
  background: url("/fe/lol-champ-select/images/config/toggle-button-bracket.png") center top no-repeat;
}
.pick-phase .toggle-button-content {
  width: 10px;
  height: 7px;
  background: url("/fe/lol-champ-select/images/config/toggle-button-icon.png") center top no-repeat;
}
.pick-phase.champion-grid-visible .toggle-button-content {
  transform: rotate(180deg);
}
.pick-phase .champion-grid-footer {
  border-bottom: 1px solid rgba(120,90,40,0.6);
  position: absolute;
  width: 640px;
  top: 585px;
}
@-moz-keyframes fadeOut0to1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut0to1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut0to1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut0to1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.champion-select .quit-spectate-button {
  width: 165px;
  margin: 20px auto;
}
.champion-select .quit-button {
  width: 125px;
  margin-right: 10px;
}
.reroll-button {
  margin-top: 12px;
  position: relative;
}
.reroll-button .action-button h4 {
  padding-left: 34px;
  margin-top: 0;
  margin-bottom: 0;
}
.reroll-button .action-button .action-button-inner::before {
  content: '';
  background-image: url("/fe/lol-champ-select/images/config/dice.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: center;
  position: absolute;
  top: 0;
  left: calc(50% - 30px);
  width: 30px;
  height: 100%;
}
.reroll-button .action-button .action-button-inner:after {
  content: url("/fe/lol-champ-select/images/config/dice-hover.png") url("/fe/lol-champ-select/images/config/dice-click.png");
  display: none;
  height: 0;
  width: 0;
}
.reroll-button .action-button .action-button-inner:not([disabled='true']):hover::before {
  background-image: url("/fe/lol-champ-select/images/config/dice-hover.png");
}
.reroll-button .action-button .action-button-inner:not([disabled='true']):active::before {
  background-image: url("/fe/lol-champ-select/images/config/dice-click.png");
}
.reroll-button .action-button .action-button-inner[disabled='true'] .reroll-button .action-button .action-button-inner::before {
  background-image: url("/fe/lol-champ-select/images/config/dice-disable.png");
}
.ring-gear-component {
  position: relative;
  width: 0;
  height: 0;
  transform: translateY(-16px);
  --rotatePrimaryDeg: 0deg;
}
.ring-gear-component #ban-ring-component {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
}
.ring-gear-component .expanded-ring-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  opacity: 0;
}
.ring-gear-component .main-ring-container,
.ring-gear-component .expanded-ring-container {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
}
.ring-gear-component #center-ring,
.ring-gear-component #intro-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transform-origin: 50%;
}
.ring-gear-component #center-ring {
  animation: fadeIn 100ms linear forwards;
  opacity: 0;
}
.ring-gear-component #intro-ring {
  animation: fadeOut 100ms 50ms linear forwards;
}
.ring-gear-component #intro-dashed-container,
.ring-gear-component #intro-gear-container {
  transform: translateX(-50%) translateY(-50%);
  transform-origin: 50%;
}
.ring-gear-component #left-ring,
.ring-gear-component #right-ring {
  transform: translateX(0px);
}
.ring-gear-component #left-ring .clip-box,
.ring-gear-component #right-ring .clip-box {
  position: absolute;
  width: 300px;
  height: 550px;
  overflow: hidden;
}
.ring-gear-component #left-ring .clip-box {
  transform: translateX(-100%) translateY(-50%);
}
.ring-gear-component #left-ring .clip-box .ring-offset {
  left: 100%;
}
.ring-gear-component #right-ring .clip-box {
  transform: translateX(0) translateY(-50%);
}
.ring-gear-component #right-ring .clip-box .ring-offset {
  left: 0;
}
.ring-gear-component #dashed-ring-intro,
.ring-gear-component #ban-gear-ring-intro,
.ring-gear-component #center-ring-container {
  transform-origin: 50%;
}
.ring-gear-component #center-ring-container {
  transform: scale(1);
}
.ring-gear-component .slash-line-rotation {
  transform-origin: 50%;
}
.ring-gear-component .slash-ring-rotation {
  transform-origin: 50%;
  transform: rotate(0deg);
}
.ring-gear-component .main-gear-container {
  position: absolute;
  top: 0;
  left: 0;
}
.ring-gear-component .ring-position {
  position: absolute;
}
.ring-gear-component .ring-position.ring-offset {
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.ring-gear-component .gear-ring-rotation {
  transform-origin: 50%;
}
.ring-gear-component .dashed-ring-rotation {
  transform-origin: 50%;
}
.ring-gear-component .ban-line.top {
  transform: translateY(-277px);
}
.ring-gear-component .ban-line.bottom {
  transform: translateY(277px);
}
.ring-gear-component .dashed-ring-circle {
  opacity: 0.5;
}
.ring-gear-component .ban-gear-ring-symbol {
  opacity: 0.75;
}
.ring-gear-component.large-area-animations-enabled #left-ring,
.ring-gear-component.large-area-animations-enabled #right-ring {
  transition: transform 300ms cubic-bezier(0, 0.6, 0.1, 1);
}
.ring-gear-component.large-area-animations-enabled .main-ring-container,
.ring-gear-component.large-area-animations-enabled .expanded-ring-container {
  transition: opacity 150ms linear;
}
.ring-gear-component.large-area-animations-enabled .gear-ring-rotation {
  animation: rotateFullCircle 190s linear infinite;
}
.ring-gear-component.large-area-animations-enabled .dashed-ring-rotation {
  animation: rotateFullCircle 160s linear infinite;
}
.ring-gear-component.large-area-animations-enabled .dashed-ring-circle {
  transition: r 300ms cubic-bezier(0, 0.6, 0.1, 1);
  r: 234.5;
}
.ring-gear-component.large-area-animations-enabled .slash-ring-rotation {
  transform: rotate(var(--rotatePrimaryDeg));
}
.ring-gear-component.large-area-animations-enabled .slash-ring-rotation {
  transition: transform 250ms linear;
}
.ring-gear-component.large-area-animations-enabled.is-not-rotating .slash-line-rotation {
  animation: none;
  transform: rotate(0deg);
}
.ring-gear-component.large-area-animations-enabled.is-player-team.is-rotating .slash-line-rotation {
  animation: rotatePlayer 250ms linear;
  animation-fill-mode: forwards;
}
.ring-gear-component.large-area-animations-enabled.is-enemy-team.is-rotating .slash-line-rotation {
  animation: rotateEnemy 250ms linear;
  animation-fill-mode: forwards;
}
.ring-gear-component.large-area-animations-enabled.is-animating.is-ban-completed #intro-ring {
  animation: fadeIn 100ms linear, glowIntro 400ms 200ms cubic-bezier(0, 1, 0, 1);
  animation-fill-mode: forwards;
}
.ring-gear-component.large-area-animations-enabled.is-animating.is-ban-completed #center-ring-container {
  animation: fadeOut 300ms linear, scaleDown 400ms linear;
  animation-fill-mode: forwards;
}
.ring-gear-component.large-area-animations-enabled.is-animating.is-ban-completed #dashed-ring-intro {
  animation: dashedRingIntro 450ms 200ms linear;
  animation-fill-mode: forwards;
}
.ring-gear-component.large-area-animations-enabled.is-animating.is-ban-completed #ban-gear-ring-intro {
  animation: scaleIntro 300ms 100ms linear;
  animation-fill-mode: forwards;
}
.ring-gear-component.default-ring .expanded-ring-container {
  opacity: 0;
}
.ring-gear-component.default-ring .expanded-ring-container .dashed-ring-circle {
  r: 234.5;
}
.ring-gear-component.default-ring #left-ring,
.ring-gear-component.default-ring #right-ring {
  transform: translateX(0);
}
.ring-gear-component.expanded-ring #left-ring {
  transform: translateX(-60px);
}
.ring-gear-component.expanded-ring #right-ring {
  transform: translateX(60px);
}
.ring-gear-component.expanded-ring .main-ring-container {
  opacity: 0;
}
.ring-gear-component.expanded-ring .expanded-ring-container {
  opacity: 1;
}
.ring-gear-component.expanded-ring .expanded-ring-container .dashed-ring-circle {
  r: 292.5;
}
.ring-gear-component.is-animating .main-ring-container {
  animation: grayscaleFilter 200ms 240ms cubic-bezier(0, 0.6, 0.1, 1) forwards;
}
.ring-gear-component.is-animating .main-ring-container .gear-ring-rotation {
  animation-play-state: paused;
}
.ring-gear-component.is-animating .ban-line {
  transition: transform 300ms cubic-bezier(0, 0.6, 0.1, 1), opacity 250ms linear;
  transform: translateY(0);
}
@-moz-keyframes rotateFullCircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateFullCircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotateFullCircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotateFullCircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-moz-keyframes grayscaleFilter {
  from {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
  }
  to {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
}
@-webkit-keyframes grayscaleFilter {
  from {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
  }
  to {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
}
@-o-keyframes grayscaleFilter {
  from {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
  }
  to {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
}
@keyframes grayscaleFilter {
  from {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
  }
  to {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
}
@-moz-keyframes rotatePlayer {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(45deg);
  }
}
@-webkit-keyframes rotatePlayer {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(45deg);
  }
}
@-o-keyframes rotatePlayer {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(45deg);
  }
}
@keyframes rotatePlayer {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(45deg);
  }
}
@-moz-keyframes rotateEnemy {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}
@-webkit-keyframes rotateEnemy {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}
@-o-keyframes rotateEnemy {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}
@keyframes rotateEnemy {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-o-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes scaleDown {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.8);
  }
}
@-webkit-keyframes scaleDown {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.8);
  }
}
@-o-keyframes scaleDown {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.8);
  }
}
@keyframes scaleDown {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.8);
  }
}
@-moz-keyframes scaleIntro {
  from {
    transform: scale(1.15);
  }
  to {
    transform: scale(1);
  }
}
@-webkit-keyframes scaleIntro {
  from {
    transform: scale(1.15);
  }
  to {
    transform: scale(1);
  }
}
@-o-keyframes scaleIntro {
  from {
    transform: scale(1.15);
  }
  to {
    transform: scale(1);
  }
}
@keyframes scaleIntro {
  from {
    transform: scale(1.15);
  }
  to {
    transform: scale(1);
  }
}
@-moz-keyframes glowIntro {
  0% {
    opacity: 0.7;
    filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  30% {
    opacity: 1;
    filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  90% {
    opacity: 1;
    filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  100% {
    opacity: 0.75;
    filter: brightness(1) grayscale(0);
    -webkit-filter: brightness(1) grayscale(0);
  }
}
@-webkit-keyframes glowIntro {
  0% {
    opacity: 0.7;
    filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  30% {
    opacity: 1;
    filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  90% {
    opacity: 1;
    filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  100% {
    opacity: 0.75;
    filter: brightness(1) grayscale(0);
    -webkit-filter: brightness(1) grayscale(0);
  }
}
@-o-keyframes glowIntro {
  0% {
    opacity: 0.7;
    filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  30% {
    opacity: 1;
    filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  90% {
    opacity: 1;
    filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  100% {
    opacity: 0.75;
    filter: brightness(1) grayscale(0);
    -webkit-filter: brightness(1) grayscale(0);
  }
}
@keyframes glowIntro {
  0% {
    opacity: 0.7;
    filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(1) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  30% {
    opacity: 1;
    filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  90% {
    opacity: 1;
    filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
    -webkit-filter: brightness(3) grayscale(100%) drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
  100% {
    opacity: 0.75;
    filter: brightness(1) grayscale(0);
    -webkit-filter: brightness(1) grayscale(0);
  }
}
@-moz-keyframes dashedRingIntro {
  0% {
    opacity: 0.5;
    transform: scale(1.5);
  }
  35% {
    opacity: 0.8;
    transform: scale(0.85);
  }
  65% {
    opacity: 0.8;
    transform: scale(0.85);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}
@-webkit-keyframes dashedRingIntro {
  0% {
    opacity: 0.5;
    transform: scale(1.5);
  }
  35% {
    opacity: 0.8;
    transform: scale(0.85);
  }
  65% {
    opacity: 0.8;
    transform: scale(0.85);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}
@-o-keyframes dashedRingIntro {
  0% {
    opacity: 0.5;
    transform: scale(1.5);
  }
  35% {
    opacity: 0.8;
    transform: scale(0.85);
  }
  65% {
    opacity: 0.8;
    transform: scale(0.85);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}
@keyframes dashedRingIntro {
  0% {
    opacity: 0.5;
    transform: scale(1.5);
  }
  35% {
    opacity: 0.8;
    transform: scale(0.85);
  }
  65% {
    opacity: 0.8;
    transform: scale(0.85);
  }
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}
.skin-selection-purchase-available-notification[type=notification] {
  font-family: var(--font-body);
}
.skin-selection-purchase-available-notification[type=notification] {
  font-family: var(--font-body);
}
.skin-selection-purchase-available-notification[type=notification] {
  -webkit-user-select: none;
}
.skin-selection-purchase-available-notification[type=notification] {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.skin-selection-purchase-available-notification[type=notification] {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.skin-selection-purchase-available-notification[type=notification]:lang(ja-jp) {
  font-size: 13px;
}
.skin-selection-button-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 520px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6px;
}
.skin-selection-button-container .skin-selection-button {
  flex: 0 0 auto;
  width: 24px;
  height: 32px;
  margin-top: 12px;
}
.skin-selection-button-container .skin-selection-button.left {
  margin-right: 2px;
}
.skin-selection-button-container .skin-selection-button.right {
  margin-left: 2px;
}
.skin-selection-carousel-container {
  width: 100%;
  height: 66px;
  margin-top: -1px;
}
.skin-selection-carousel-container .skin-selection-carousel {
  padding-left: 0;
  list-style-type: none;
  align-items: center;
  margin: 0;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  height: 74px;
  overflow-y: visible;
  transform: translateZ(0);
}
.skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:hover,
.skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:active {
  -webkit-filter: grayscale(50%);
  background: none;
  background-color: #3c3c41;
  transition: none;
}
.skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:hover .skin-selection-thumbnail,
.skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:active .skin-selection-thumbnail {
  -webkit-filter: brightness(100%);
}
.skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:hover .skin-selection-thumbnail:after,
.skin-selection-carousel-container .skin-selection-carousel.disabled .skin-selection-item.disabled:active .skin-selection-thumbnail:after {
  opacity: 0.75;
  background-color: #010a13;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item {
  position: absolute;
  display: flex;
  width: 73px;
  height: 50px;
  background-color: #3c3c41;
  outline: 1px solid rgba(1,10,19,0.6);
  align-items: center;
  transition: all 200ms;
  margin-top: 5px;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail {
  cursor: pointer;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail-gem-overlay {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  position: absolute;
  bottom: 1px;
  left: 0;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail-gem-overlay img {
  width: 100%;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item:hover {
  background: linear-gradient(to top, #c89b3c, #f0e6d2);
  cursor: pointer;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item:hover .skin-selection-thumbnail {
  -webkit-filter: brightness(125%);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item:active {
  background: linear-gradient(to top, #695625, #463714);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item:active .skin-selection-thumbnail:after {
  background-color: #010a13;
  opacity: 0.75;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled {
  background: #3c3c41;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled:hover .skin-selection-thumbnail {
  -webkit-filter: brightness(100%);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled:hover .skin-selection-thumbnail:after {
  opacity: 0.25;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled:active {
  background: linear-gradient(to top, #695625, #463714);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled:active .skin-selection-thumbnail:after {
  background-color: #010a13;
  opacity: 0.5;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled.skin-selection-item-selected {
  border: none;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled .skin-selection-thumbnail {
  -webkit-filter: grayscale(50%);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled .skin-selection-thumbnail:after {
  background-color: #010a13;
  opacity: 0.75;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.disabled:after {
  content: '';
  background: url("/fe/lol-champ-select/images/config/icon-lock-small-noframe.png");
  background-size: contain;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  pointer-events: none;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2 {
  width: 25%;
  height: 66px;
  margin-top: 0;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2 .skin-selection-thumbnail {
  width: 125%;
  cursor: default;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:hover,
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:active {
  cursor: default;
  background: linear-gradient(to top, #c8aa6e 0%, #c89b3c 44%, #a07b32 59%, #785a28 100%);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:hover .skin-selection-thumbnail,
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:active .skin-selection-thumbnail {
  -webkit-filter: brightness(100%);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:hover .skin-selection-thumbnail:after,
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.skin-selection-item-selected:active .skin-selection-thumbnail:after {
  background-color: transparent;
  opacity: 0.75;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:hover,
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:active {
  cursor: default;
  background: #3c3c41;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:hover .skin-selection-thumbnail,
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:active .skin-selection-thumbnail {
  -webkit-filter: grayscale(50%);
  -webkit-filter: brightness(100%);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:hover .skin-selection-thumbnail:after,
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled:active .skin-selection-thumbnail:after {
  background-color: #010a13;
  opacity: 0.75;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-carousel-offset-2.disabled::after {
  display: none;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-hidden {
  display: none;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-placeholder {
  display: none;
  background: transparent;
  border: 0;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-placeholder .skin-selection-thumbnail,
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-placeholder .skin-selection-item-information {
  display: none;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-selected {
  background: linear-gradient(to top, #c8aa6e 0%, #c89b3c 44%, #a07b32 59%, #785a28 100%);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-selected:hover {
  background: linear-gradient(to top, #f0e6d2 0%, #c89b3c 100%);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item.skin-selection-item-selected .skin-selection-thumbnail {
  margin: 2px;
  height: calc(100% - 4px);
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail {
  background-size: calc(100% - 2px);
  background-position: 50% 45%;
  background-repeat: no-repeat;
  margin: 1px;
  flex: 1;
  box-sizing: border-box;
  transition: all 200ms;
  position: relative;
  height: calc(100% - 2px);
  outline: 1px solid transparent;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-thumbnail:before {
  border: 1px solid #1e2328;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 200ms;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  width: 25px;
  height: 25px;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button .content {
  background: url("/fe/lol-champ-select/images/config/button-chroma.png") no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  margin: 1px;
  border-radius: 50%;
  border: 2px solid #010a13;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button:focus {
  outline: 0;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button:after {
  content: url("/fe/lol-champ-select/images/config/button-chroma-hover.png") url("/fe/lol-champ-select/images/config/button-chroma-click.png") url("/fe/lol-champ-select/images/config/button-chroma-disable.png") url("/fe/lol-champ-select/images/config/button-chroma-toggle.png");
  display: none;
  height: 0;
  width: 0;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button:hover .content {
  background-image: url("/fe/lol-champ-select/images/config/button-chroma-hover.png");
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button:active .content {
  background-image: url("/fe/lol-champ-select/images/config/button-chroma-click.png");
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button[disabled] .content {
  background-image: url("/fe/lol-champ-select/images/config/button-chroma-disable.png");
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .chroma-button.open .content {
  background-image: url("/fe/lol-champ-select/images/config/button-chroma-toggle.png");
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .skin-selection-item-information {
  width: 32px;
  height: 32px;
  position: absolute;
  top: -14px;
  right: -14px;
  content: ' ';
  background-repeat: no-repeat;
  pointer-events: none;
  background-size: contain;
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .rental-icon {
  background-image: url("/fe/lol-champ-select/images/config/champ-rental-flag.png");
}
.skin-selection-carousel-container .skin-selection-carousel .skin-selection-item .free-to-play-reward-icon {
  background-image: url("/fe/lol-champ-select/images/config/champ-free-to-play-reward-flag.png");
}
.skin-selection-carousel-container .skin-selection-carousel.will-transition .skin-selection-item {
  transition: none;
}
.skin-selection-carousel-container .skin-selection-carousel.will-transition .skin-selection-item .skin-selection-thumbnail {
  transition: none;
}
.skin-selection-indicator {
  display: flex;
  width: 376px;
  height: 18px;
  flex-direction: row;
  align-items: center;
  margin: auto;
  margin-top: -2px;
}
.skin-selection-indicator.disabled .skin-selection-indicator-selector:hover {
  cursor: default;
}
.skin-selection-indicator .skin-selection-indicator-list {
  display: flex;
  margin: 0 10px;
  padding: 0;
}
.skin-selection-indicator .skin-selection-indicator-selector {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-top: 1px;
  padding: 4px;
  background: url("/fe/lol-champ-select/images/config/skin-carousel-pip.png") center no-repeat;
}
.skin-selection-indicator .skin-selection-indicator-selector.skin-selection-indicator-selector-selected {
  background-image: url("/fe/lol-champ-select/images/config/skin-carousel-pip-selected.png");
}
.skin-selection-indicator .skin-selection-indicator-selector:hover {
  cursor: pointer;
}
.skin-selection-indicator .line {
  width: 50%;
  flex: 1 0;
  height: 2px;
}
.skin-selection-indicator .line.line-left {
  background: linear-gradient(to left, rgba(0,0,0,0) 0, #785a28 20%);
}
.skin-selection-indicator .line.line-right {
  background: linear-gradient(to right, rgba(0,0,0,0) 0, #785a28 20%);
}
.skin-indicator {
  width: 17px;
  height: 17px;
  flex: 0 1 auto;
}
.skin-indicator:not(.selected):hover {
  cursor: pointer;
}
.skin-indicator .icon {
  width: 5px;
  height: 5px;
  margin: 5px;
  border: 1px solid #c8aa6e;
  border-radius: 50%;
}
.skin-indicator.selected .icon {
  background: #c8aa6e;
}
.skin-selection-purchase-available-notification[type=notification] {
  width: 230px;
}
.champion-select .skin-purchase {
  position: absolute;
  width: 100%;
  top: 64px;
  left: 0;
  animation-name: skinPurchaseButtonFadeInAnimation;
  animation-duration: 0.1s;
  animation-delay: 0.2s;
  animation-fill-mode: backwards;
  pointer-events: none;
/**
     * BUGFIX: Chrome doesn't allow us to change a child div's background on
     * parent active state. We could use a ::before pseudo-element, but it has a
     * bug which introduces jitter when dealing with pointer-events: none. We
     * therefore introduce a ::before pseudo-element ONLY on :active and hide
     * the child element.
     */
}
.champion-select .skin-purchase .unlock-skin-hit-area {
  display: block;
  margin: 0 auto;
  width: 56px;
  height: 56px;
  cursor: pointer;
  pointer-events: all;
}
.champion-select .skin-purchase .unlock-skin-hit-area .locked-state,
.champion-select .skin-purchase .unlock-skin-hit-area::before {
  position: absolute;
  pointer-events: none;
  width: 56px;
  height: 56px;
  background-size: contain;
  background-repeat: no-repeat;
}
.champion-select .skin-purchase .unlock-skin-hit-area.hidden {
  pointer-events: none;
}
.champion-select .skin-purchase .unlock-skin-hit-area .locked-state {
  background-image: url("/fe/lol-champ-select/images/config/icon-lock-large.png");
}
.champion-select .skin-purchase .unlock-skin-hit-area.disabled .locked-state {
  background-image: url("/fe/lol-champ-select/images/config/icon-lock-large-inactive.png");
}
.champion-select .skin-purchase .unlock-skin-hit-area.enabled:hover .locked-state {
  background-image: url("/fe/lol-champ-select/images/config/icon-lock-large-hover.png");
}
.champion-select .skin-purchase .unlock-skin-hit-area.enabled:active .locked-state {
  background: none;
}
.champion-select .skin-purchase .unlock-skin-hit-area.enabled:active::before {
  content: "";
  background-image: url("/fe/lol-champ-select/images/config/icon-lock-large-click.png");
}
.champion-select .skin-carousel.will-transition .skin-purchase {
  opacity: 0;
  animation: none;
}
@-moz-keyframes skinPurchaseButtonFadeInAnimation {
  0% {
    opacity: 0;
    pointer-events: none;
  }
  100% {
    opacity: 1;
    pointer-events: all;
  }
}
@-webkit-keyframes skinPurchaseButtonFadeInAnimation {
  0% {
    opacity: 0;
    pointer-events: none;
  }
  100% {
    opacity: 1;
    pointer-events: all;
  }
}
@-o-keyframes skinPurchaseButtonFadeInAnimation {
  0% {
    opacity: 0;
    pointer-events: none;
  }
  100% {
    opacity: 1;
    pointer-events: all;
  }
}
@keyframes skinPurchaseButtonFadeInAnimation {
  0% {
    opacity: 0;
    pointer-events: none;
  }
  100% {
    opacity: 1;
    pointer-events: all;
  }
}
.skin-purchase-notification h3 {
  font-family: var(--font-display);
}
.skin-purchase-notification,
.skin-purchase-notification table {
  font-family: var(--font-body);
}
.skin-purchase-notification,
.skin-purchase-notification h3,
.skin-purchase-notification table {
  -webkit-user-select: none;
}
.skin-purchase-notification,
.skin-purchase-notification h3,
.skin-purchase-notification table {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.skin-purchase-notification h3 {
  text-transform: uppercase;
}
.skin-purchase-notification h3:lang(ko-kr),
.skin-purchase-notification h3:lang(ja-jp),
.skin-purchase-notification h3:lang(tr-tr),
.skin-purchase-notification h3:lang(el-gr),
.skin-purchase-notification h3:lang(th-th),
.skin-purchase-notification h3:lang(zh-tw) {
  text-transform: none;
}
.skin-purchase-notification h3 {
  color: #f0e6d2;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.05em;
}
.skin-purchase-notification {
  color: #a09b8c;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.skin-purchase-notification table {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.skin-purchase-notification table:lang(ja-jp) {
  font-size: 13px;
}
.skin-purchase-notification table .value {
  color: #f0e6d2;
}
.skin-purchase-notification > .skin-purchase-notification-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1px;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to bottom, #fff 75%, transparent 100%);
}
.skin-emblem-container {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 175px;
}
.skin-emblem-container .skin-emblem {
  height: 70px;
}
.skin-purchase-notification lol-uikit-content-block,
.skin-purchase-notification hr {
  position: relative;
}
.skin-purchase-notification {
  text-align: center;
  padding: 0px 40px;
  padding-top: 215px;
  box-sizing: border-box;
  width: 525px;
}
.skin-purchase-notification .skin-description {
  padding-bottom: 10px;
}
.skin-purchase-notification .skin-details {
  padding-top: 10px;
  padding-bottom: 20px;
}
.skin-purchase-notification .purchase-block {
  display: inline-block;
  margin-left: 60px;
}
.skin-purchase-notification .purchase-block:first-of-type {
  margin-left: 0;
}
.skin-purchase-notification .cant-afford {
  color: #be1e37;
}
.skin-purchase-notification .new-balance {
  color: #5b5a56;
}
.skin-purchase-notification lol-uikit-purchase-button {
  display: block;
  margin: 6px auto 7px auto;
  width: 140px;
}
.skin-purchase-notification p {
  margin: 3px;
}
.skin-purchase-notification hr {
  border-color: #463714;
}
.skin-purchase-notification table {
  width: 100%;
}
.skin-purchase-notification table .label {
  text-align: left;
}
.skin-purchase-notification table .value {
  text-align: right;
}
.skin-purchase-notification table .total td {
  border-top: 1px solid #3c3c41;
  padding-top: 5px;
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  font-family: var(--font-display);
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  -webkit-user-select: none;
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  text-transform: uppercase;
}
.champion-select .champion-skin-name .champion-skin:lang(ko-kr),
.champion-select .champion-skin-name .base-skin:lang(ko-kr),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(ko-kr),
.champion-select .champion-skin-name .champion-skin:lang(ja-jp),
.champion-select .champion-skin-name .base-skin:lang(ja-jp),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(ja-jp),
.champion-select .champion-skin-name .champion-skin:lang(tr-tr),
.champion-select .champion-skin-name .base-skin:lang(tr-tr),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(tr-tr),
.champion-select .champion-skin-name .champion-skin:lang(el-gr),
.champion-select .champion-skin-name .base-skin:lang(el-gr),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(el-gr),
.champion-select .champion-skin-name .champion-skin:lang(th-th),
.champion-select .champion-skin-name .base-skin:lang(th-th),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(th-th),
.champion-select .champion-skin-name .champion-skin:lang(zh-tw),
.champion-select .champion-skin-name .base-skin:lang(zh-tw),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(zh-tw) {
  text-transform: none;
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  text-transform: none;
}
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  color: #f0e6d2;
  font-size: 40px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 0.05em;
}
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  letter-spacing: 0.025em;
}
.champion-select .champion-skin-name .champion-skin {
  color: #f0e6d2;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.05em;
}
.champion-select .champion-skin-name .champion-skin {
  letter-spacing: 0.025em;
}
.champion-select .champion-skin-name .champion-skin {
  font-style: italic;
  font-weight: 500;
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  font-family: var(--font-display);
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  font-family: var(--font-display);
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  -webkit-user-select: none;
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  text-transform: uppercase;
}
.champion-select .champion-skin-name .champion-skin:lang(ko-kr),
.champion-select .champion-skin-name .base-skin:lang(ko-kr),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(ko-kr),
.champion-select .champion-skin-name .champion-skin:lang(ja-jp),
.champion-select .champion-skin-name .base-skin:lang(ja-jp),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(ja-jp),
.champion-select .champion-skin-name .champion-skin:lang(tr-tr),
.champion-select .champion-skin-name .base-skin:lang(tr-tr),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(tr-tr),
.champion-select .champion-skin-name .champion-skin:lang(el-gr),
.champion-select .champion-skin-name .base-skin:lang(el-gr),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(el-gr),
.champion-select .champion-skin-name .champion-skin:lang(th-th),
.champion-select .champion-skin-name .base-skin:lang(th-th),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(th-th),
.champion-select .champion-skin-name .champion-skin:lang(zh-tw),
.champion-select .champion-skin-name .base-skin:lang(zh-tw),
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin:lang(zh-tw) {
  text-transform: none;
}
.champion-select .champion-skin-name .champion-skin,
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  text-transform: none;
}
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  color: #f0e6d2;
  font-size: 40px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 0.05em;
}
.champion-select .champion-skin-name .base-skin,
.champion-select .champion-skin-name.skin-selection-disabled .champion-skin {
  letter-spacing: 0.025em;
}
.champion-select .champion-skin-name .champion-skin {
  color: #f0e6d2;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.05em;
}
.champion-select .champion-skin-name .champion-skin {
  letter-spacing: 0.025em;
}
.champion-select .champion-skin-name .champion-skin {
  font-style: italic;
  font-weight: 500;
}
.champion-select .skin-select {
  position: absolute;
  top: 455px;
  width: 100%;
  transform: translateZ(0);
}
.champion-select .skin-select.has-reroll {
  top: 445px;
}
.champion-select .skin-select:after {
  content: url("/fe/lol-champ-select/images/config/skin-carousel-pip.png") url("/fe/lol-champ-select/images/config/skin-carousel-pip-selected.png") url("/fe/lol-champ-select/images/config/icon-lock-small-noframe.png");
  display: none;
  height: 0;
  width: 0;
}
.champion-select .champion-skin-name {
  margin: -30px auto 0;
  display: flex;
  height: 64px;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}
.champion-select .champion-skin-name .champion-skin {
  position: relative;
  bottom: 6px;
  padding: 0 1em;
}
.champion-select .champion-skin-name.skin-selection-disabled {
  position: relative;
  top: 60px;
}
.champion-select .champion-skin-name .skin-name-text {
  white-space: nowrap;
  display: inline-block;
}
.champion-select .summoner-array .first-pick {
  font-family: var(--font-display);
}
.champion-select .summoner-array .first-pick {
  -webkit-user-select: none;
}
.champion-select .summoner-array .first-pick {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-select .summoner-array .first-pick {
  text-transform: uppercase;
}
.champion-select .summoner-array .first-pick:lang(ko-kr),
.champion-select .summoner-array .first-pick:lang(ja-jp),
.champion-select .summoner-array .first-pick:lang(tr-tr),
.champion-select .summoner-array .first-pick:lang(el-gr),
.champion-select .summoner-array .first-pick:lang(th-th),
.champion-select .summoner-array .first-pick:lang(zh-tw) {
  text-transform: none;
}
.champion-select .summoner-array .first-pick {
  color: #f0e6d2;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.075em;
}
.champion-select .summoner-array .first-pick:lang(ja-jp) {
  font-size: 13px;
}
.champion-select .summoner-array {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 30px;
  width: 25%;
  height: 400px;
  transform: translateZ(0);
  margin-top: 66px;
}
.champion-select .summoner-array .first-pick {
  position: absolute;
  text-shadow: 0 0 5px rgba(1,10,19,0.8);
  opacity: 0.65;
  top: 0;
}
.champion-select .summoner-array .summoner-timer-wrapper {
  position: absolute;
  top: 0;
  display: flex;
  height: 100%;
  justify-content: center;
  flex-direction: column;
}
.champion-select .summoner-array.your-party .first-pick {
  margin-left: 13px;
  left: 0px;
}
.champion-select .summoner-array.your-party .party {
  padding-left: 12px;
}
.champion-select .summoner-array.your-party .summoner-timer-wrapper {
  left: 240px;
}
.champion-select .summoner-array.enemy-party .first-pick {
  margin-right: 13px;
  right: 0px;
}
.champion-select .summoner-array.enemy-party .party {
  padding-right: 12px;
}
.champion-select .summoner-array.enemy-party .summoner-timer-wrapper {
  left: 47px;
}
.champion-select .summoner-array .party {
  position: relative;
}
.champion-select .summoner-array .summoner-wrapper {
  position: relative;
  height: 80px;
}
.summoner-object .player-details .champion-vote-projection,
.summoner-object .player-details .summoner-position {
  font-family: var(--font-display);
}
.grid-champion > .grid-champion-hitbox > .champion-name,
.summoner-object .player-details .status-message,
.summoner-object .player-details .club,
.summoner-object .player-details .summoner-name {
  font-family: var(--font-body);
}
.grid-champion > .grid-champion-hitbox > .champion-name,
.summoner-object .player-details .status-message,
.summoner-object .player-details .club,
.summoner-object .player-details .summoner-name,
.summoner-object .player-details .champion-vote-projection,
.summoner-object .player-details .summoner-position {
  -webkit-user-select: none;
}
.grid-champion > .grid-champion-hitbox > .champion-name,
.summoner-object .player-details .status-message,
.summoner-object .player-details .club,
.summoner-object .player-details .summoner-name,
.summoner-object .player-details .champion-vote-projection,
.summoner-object .player-details .summoner-position {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.summoner-object .player-details .champion-vote-projection,
.summoner-object .player-details .summoner-position {
  text-transform: uppercase;
}
.summoner-object .player-details .champion-vote-projection:lang(ko-kr),
.summoner-object .player-details .summoner-position:lang(ko-kr),
.summoner-object .player-details .champion-vote-projection:lang(ja-jp),
.summoner-object .player-details .summoner-position:lang(ja-jp),
.summoner-object .player-details .champion-vote-projection:lang(tr-tr),
.summoner-object .player-details .summoner-position:lang(tr-tr),
.summoner-object .player-details .champion-vote-projection:lang(el-gr),
.summoner-object .player-details .summoner-position:lang(el-gr),
.summoner-object .player-details .champion-vote-projection:lang(th-th),
.summoner-object .player-details .summoner-position:lang(th-th),
.summoner-object .player-details .champion-vote-projection:lang(zh-tw),
.summoner-object .player-details .summoner-position:lang(zh-tw) {
  text-transform: none;
}
.summoner-object .player-details .champion-vote-projection,
.summoner-object .player-details .summoner-position {
  color: #f0e6d2;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.075em;
}
.grid-champion > .grid-champion-hitbox > .champion-name {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.grid-champion > .grid-champion-hitbox > .champion-name:lang(ja-jp) {
  font-size: 13px;
}
.summoner-object .player-details .status-message,
.summoner-object .player-details .club,
.summoner-object .player-details .summoner-name {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.summoner-object .player-details .status-message:lang(ja-jp),
.summoner-object .player-details .club:lang(ja-jp),
.summoner-object .player-details .summoner-name:lang(ja-jp) {
  font-size: 13px;
}
.summoner-object .player-details .champion-vote-projection,
.summoner-object .player-details .summoner-position {
  font-family: var(--font-display);
}
.grid-champion > .grid-champion-hitbox > .champion-name,
.summoner-object .player-details .status-message,
.summoner-object .player-details .club,
.summoner-object .player-details .summoner-name {
  font-family: var(--font-body);
}
.grid-champion > .grid-champion-hitbox > .champion-name,
.summoner-object .player-details .status-message,
.summoner-object .player-details .club,
.summoner-object .player-details .summoner-name,
.summoner-object .player-details .champion-vote-projection,
.summoner-object .player-details .summoner-position {
  -webkit-user-select: none;
}
.grid-champion > .grid-champion-hitbox > .champion-name,
.summoner-object .player-details .status-message,
.summoner-object .player-details .club,
.summoner-object .player-details .summoner-name,
.summoner-object .player-details .champion-vote-projection,
.summoner-object .player-details .summoner-position {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.summoner-object .player-details .champion-vote-projection,
.summoner-object .player-details .summoner-position {
  text-transform: uppercase;
}
.summoner-object .player-details .champion-vote-projection:lang(ko-kr),
.summoner-object .player-details .summoner-position:lang(ko-kr),
.summoner-object .player-details .champion-vote-projection:lang(ja-jp),
.summoner-object .player-details .summoner-position:lang(ja-jp),
.summoner-object .player-details .champion-vote-projection:lang(tr-tr),
.summoner-object .player-details .summoner-position:lang(tr-tr),
.summoner-object .player-details .champion-vote-projection:lang(el-gr),
.summoner-object .player-details .summoner-position:lang(el-gr),
.summoner-object .player-details .champion-vote-projection:lang(th-th),
.summoner-object .player-details .summoner-position:lang(th-th),
.summoner-object .player-details .champion-vote-projection:lang(zh-tw),
.summoner-object .player-details .summoner-position:lang(zh-tw) {
  text-transform: none;
}
.summoner-object .player-details .champion-vote-projection,
.summoner-object .player-details .summoner-position {
  color: #f0e6d2;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.075em;
}
.grid-champion > .grid-champion-hitbox > .champion-name {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.grid-champion > .grid-champion-hitbox > .champion-name:lang(ja-jp) {
  font-size: 13px;
}
.summoner-object .player-details .status-message,
.summoner-object .player-details .club,
.summoner-object .player-details .summoner-name {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.summoner-object .player-details .status-message:lang(ja-jp),
.summoner-object .player-details .club:lang(ja-jp),
.summoner-object .player-details .summoner-name:lang(ja-jp) {
  font-size: 13px;
}
.champion-grid-banning .grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail,
.champion-grid-banning .grid-champion > .grid-champion-hitbox:not(:active):hover > .champion-grid-champion-thumbnail {
  border-color: #fe734f;
  box-shadow: 0 0 0 1px rgba(1,10,19,0.85), 0 0 7px 1px rgba(190,30,55,0.85);
  outline: none;
}
.grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail,
.champion-grid-banning .grid-champion[disabled] > .grid-champion-hitbox > .champion-grid-champion-thumbnail,
.champion-grid-banning .grid-champion.pick-intented > .grid-champion-hitbox > .champion-grid-champion-thumbnail,
.champion-grid-banning .grid-champion.ban-intented > .grid-champion-hitbox > .champion-grid-champion-thumbnail,
.summoner-object .summoner-spells .spells .spell,
.summoner-object .summoner-spells .spells .spell img {
  border: 1px solid #3c3c41;
  outline: 1px solid rgba(1,10,19,0.75);
  box-shadow: none;
}
.grid-champion {
  width: 71px;
  height: 83px;
  cursor: pointer;
  transform: translateZ(0);
}
.grid-champion[disabled],
.grid-champion.grid-champion-selected,
.grid-champion.grid-champion-ban-selected {
  cursor: default;
}
.grid-champion[disabled] > .grid-champion-hitbox,
.grid-champion.grid-champion-selected > .grid-champion-hitbox,
.grid-champion.grid-champion-ban-selected > .grid-champion-hitbox {
  pointer-events: none;
}
.grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail {
  display: inline-block;
  width: 67px;
  height: 67px;
  border-image-slice: 1;
  border-image-repeat: stretch;
  -webkit-filter: none;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(1,10,19,0.8);
}
.grid-champion > .grid-champion-hitbox > .champion-grid-champion-thumbnail > .champion-background-image {
  width: 72px;
  height: 72px;
  margin-left: -4px;
  margin-top: -4px;
}
.grid-champion > .grid-champion-hitbox > .champion-name {
  display: block;
  margin-top: 3px;
  line-height: 12px;
  color: #a09b8c;
  text-align: center;
  width: 140%;
  margin-left: -20%;
  -webkit-font-smoothing: subpixel-antialiased;
}
.grid-champion > .grid-champion-hitbox > .champion-name:lang(ja-jp) {
  letter-spacing: -1px;
}
.grid-champion > .grid-champion-hitbox:hover > .champion-grid-champion-thumbnail {
  border-image-source: linear-gradient(to bottom, #f0e6d2 4%, #c89b3c 100%);
}
.grid-champion > .grid-champion-hitbox:hover > .champion-grid-champion-thumbnail > .champion-background-image {
  -webkit-filter: brightness(1.25);
}
.grid-champion > .grid-champion-hitbox:active > .champion-grid-champion-thumbnail {
  border-image-source: linear-gradient(to bottom, #463714 0%, #695625 100%);
}
.grid-champion.pick-intented .champion-background-image,
.grid-champion.ban-intented .champion-background-image {
  -webkit-filter: grayscale(0.65);
}
.grid-champion[disabled] .champion-background-image {
  -webkit-filter: grayscale(1) brightness(0.75);
}
.champion-grid-animated .grid-champion {
  position: absolute;
  transition: opacity 300ms, transform 300ms;
  backface-visibility: hidden;
}
.champion-grid-animated.hidden {
  opacity: 0;
  pointer-events: none;
}
.champion-grid-unanimated .grid-champion {
  position: relative;
  margin-top: 9px;
  margin-bottom: 4px;
  margin-left: 31px;
}
.champion-grid-unanimated .grid-champion.hidden {
  display: none;
  pointer-events: none;
}
.champion-grid-banning .grid-champion > .grid-champion-hitbox:not(:active):hover > .champion-grid-champion-thumbnail {
  border-image-source: none;
}
.champion-grid-selected .champion-background-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(1,10,19,0.5);
}
.champion-grid-selected .grid-champion-selected .champion-background-image::after,
.champion-grid-selected .grid-champion-hitbox:hover .champion-background-image::after {
  content: none;
}
@-moz-keyframes pickBorderBlinkAnimation {
  0% {
    border-color: #3c3c41;
  }
  75% {
    border-color: #5d5d71;
  }
  100% {
    border-color: #3c3c41;
  }
}
@-webkit-keyframes pickBorderBlinkAnimation {
  0% {
    border-color: #3c3c41;
  }
  75% {
    border-color: #5d5d71;
  }
  100% {
    border-color: #3c3c41;
  }
}
@-o-keyframes pickBorderBlinkAnimation {
  0% {
    border-color: #3c3c41;
  }
  75% {
    border-color: #5d5d71;
  }
  100% {
    border-color: #3c3c41;
  }
}
@keyframes pickBorderBlinkAnimation {
  0% {
    border-color: #3c3c41;
  }
  75% {
    border-color: #5d5d71;
  }
  100% {
    border-color: #3c3c41;
  }
}
.champion-select.is-spectating .summoner-object.right .summoner-spells {
  right: 0px;
}
.in-finalization .summoner-object.actions-complete {
  opacity: 1;
}
.summoner-object {
  --lockinAnimationDuration: 600ms;
  --startBanningAnimationDuration: 180ms;
  --statusMessageTransitionDuration: 200ms;
  --summonerStateTransitionDuration: 500ms;
  flex: 1 0 auto;
  position: relative;
  display: flex;
  padding: 7px 20px 7px 0;
  transition: opacity var(--summonerStateTransitionDuration);
  box-sizing: border-box;
  opacity: 1;
  transform: translateZ(0);
}
.summoner-object > .dim {
  opacity: 0.5;
}
.summoner-object .active-bar {
  width: 8px;
  position: absolute;
  left: -12px;
  top: 0px;
  height: 78px;
}
.summoner-object .active-bar.me {
  background: #fabe0a;
}
.summoner-object .active-bar.myTeam {
  background: #0a96aa;
}
.summoner-object .active-bar.theirTeam {
  background: #be1e37;
}
.summoner-object.right .active-bar {
  right: -12px;
  left: auto;
}
.summoner-object.actions-complete {
  opacity: 0.7;
}
.summoner-object.actions-complete.is-self,
.summoner-object.actions-complete.skin-showcase-active {
  opacity: 1;
}
.summoner-object.left .line {
  left: 0;
}
.summoner-object.left .champion-ring {
  left: 0;
}
.summoner-object.left .champion-icon {
  margin-left: 3px;
}
.summoner-object.left .player-details {
  margin-left: 8px;
}
.summoner-object.right .line {
  right: 0;
}
.summoner-object.right .champion-ring {
  right: 0;
}
.summoner-object.right .champion-icon {
  margin-right: 3px;
}
.summoner-object.right .player-details {
  margin-right: 8px;
}
.summoner-object .champion-icon:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.summoner-object .skin-showcase {
  background-size: 100%;
  background-position: 0 -35px;
  transition: background 0.3s ease-in-out;
  -webkit-mask-image: url("/fe/lol-champ-select/images/summoner-object/skin-showcase-mask.png"), url("/fe/lol-champ-select/images/summoner-object/splash-ring-mask.png");
  -webkit-mask-size: 100% 100%, auto;
  -webkit-mask-composite: source-out;
  -webkit-mask-repeat: no-repeat;
}
.summoner-object.right {
  flex-direction: row-reverse;
  text-align: right;
  padding-right: 0;
  transition: padding-right 200ms;
}
.summoner-object.right .summoner-container {
  flex-direction: row-reverse;
}
.summoner-object.right .summoner-container.collapsed {
  animation-name: summoner-object-expand-initial, summoner-object-expand-final;
  animation-duration: 0.27s, 0.57s;
  animation-delay: 0s, 0.27s;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), cubic-bezier(0, 0, 0, 1);
  margin-right: 4px;
  margin-left: 0px;
}
.summoner-object.right .summoner-container.expanded {
  animation-name: summoner-object-collapse-initial, summoner-object-collapse-final;
  animation-duration: 0.27s, 0.57s;
  animation-delay: 0s, 0.27s;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), cubic-bezier(0, 0, 0, 1);
  margin-right: 42px;
  margin-left: 0px;
}
.summoner-object.right .summoner-ban-item {
  right: 0;
}
.summoner-object.right .champion-icon-container {
  flex-direction: row-reverse;
}
.summoner-object.right .status-message {
  justify-content: flex-end;
}
.summoner-object.right .skin-showcase {
  background-position-x: 100%;
}
.summoner-object.left .champion-icon-container {
  flex-direction: row;
}
.summoner-object.is-self .player-details .status-message,
.summoner-object.is-self .player-details .champion-vote-projection,
.summoner-object.is-self .player-details .summoner-position,
.summoner-object.is-self .player-details .summoner-name {
  color: #fabe0a;
}
.summoner-object .summoner-spells {
  position: absolute;
  height: 62px;
  margin: 7px 6px 0px 6px;
  transition: opacity 0.5s;
  align-items: center;
  opacity: 1;
}
.summoner-object .summoner-spells > .dim {
  opacity: 0.5;
}
.summoner-object .summoner-spells .spells .spell,
.summoner-object .summoner-spells .spells .spell img {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 1 auto;
  object-fit: contain;
  overflow: hidden;
  box-sizing: border-box;
}
.summoner-object .summoner-spells .spells .spell:first-child,
.summoner-object .summoner-spells .spells .spell img:first-child {
  margin-bottom: 1px;
}
.summoner-object .summoner-container {
  height: 100%;
  display: flex;
  flex-direction: row;
}
.summoner-object .summoner-container.collapsed {
  animation-name: summoner-object-collapse-initial, summoner-object-collapse-final;
  animation-duration: 0.27s, 0.57s;
  animation-delay: 0s, 0.27s;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), cubic-bezier(0, 0, 0, 1);
  margin-left: 4px;
  margin-right: 0px;
}
.summoner-object .summoner-container.expanded {
  animation-name: summoner-object-expand-initial, summoner-object-expand-final;
  animation-duration: 0.27s, 0.57s;
  animation-delay: 0s, 0.27s;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), cubic-bezier(0, 0, 0, 1);
  margin-left: 42px;
  margin-right: 0px;
}
.summoner-object .video-magic-background-state-machine {
  position: absolute;
  top: -1.5px;
  width: 315.89px;
  height: 80px;
}
.summoner-object .video-magic-background-state-machine .video-magic-background {
  display: flex;
  position: absolute;
  height: 80px;
  top: 0;
  left: -12px;
  transition: opacity 100ms;
  opacity: 1;
}
.summoner-object .video-magic-background-state-machine .video-magic-background.right {
  left: 18px;
}
.summoner-object .video-magic-background-state-machine .video-magic-background video {
  height: 80px;
}
.summoner-object .video-magic-background-state-machine[state='intro'] .bg-idle-vid,
.summoner-object .video-magic-background-state-machine[state='outro'] .bg-idle-vid {
  opacity: 0;
}
.summoner-object .video-magic-background-state-machine.skin-showcase,
.summoner-object .image-magic-background.skin-showcase {
  width: 480px;
  opacity: 0.7;
  left: -12px;
}
.summoner-object .image-ring-spinner {
  display: flex;
  position: absolute;
}
.summoner-object .image-ring-spinner.animated {
  top: -7px;
  left: -7px;
  width: 75px;
  height: 75px;
  animation: summoner-object-spin 1s cubic-bezier(0, 0, 0.43, 0.7), summoner-object-spin 1.55s linear infinite;
  animation-delay: 0s, 1s;
}
.summoner-object .image-ring-spinner.animated.left-side {
  background: url("/fe/lol-champ-select/images/summoner-object/player-object-spinner-blue.png") no-repeat;
}
.summoner-object .image-ring-spinner.animated.right-side {
  background: url("/fe/lol-champ-select/images/summoner-object/player-object-spinner-red.png") no-repeat;
}
.summoner-object .image-ring-spinner.animated.is-self {
  background: url("/fe/lol-champ-select/images/summoner-object/player-object-spinner-gold.png") no-repeat;
}
.summoner-object .image-ring-spinner.not-animated {
  top: 0px;
  left: 0px;
  height: 62px;
  width: 62px;
  background-size: 100%;
  background-repeat: no-repeat;
}
.summoner-object .image-ring-spinner.not-animated.left-side {
  background-image: url("/fe/lol-champ-select/images/summoner-object/player-ring-bright-blue.png");
}
.summoner-object .image-ring-spinner.not-animated.right-side {
  background-image: url("/fe/lol-champ-select/images/summoner-object/player-ring-bright-red.png");
}
.summoner-object .image-ring-spinner.not-animated.is-self {
  background-image: url("/fe/lol-champ-select/images/summoner-object/player-ring-bright-m.png");
}
.summoner-object .image-ring-spinner.removed {
  display: none;
}
.summoner-object .image-magic-background {
  position: absolute;
  bottom: 2px;
  top: -2px;
  left: 0px;
  right: 0;
  opacity: 0;
  height: 79px;
  transition: opacity 300ms;
  margin-top: 1px;
}
.summoner-object.right .video-magic-background-state-machine {
  right: 0;
}
.summoner-object.right .video-magic-background-state-machine.skin-showcase {
  right: -12px;
}
.summoner-object.right .image-magic-background.is-acting-background {
  right: -10px;
  top: -1px;
  bottom: -3px;
  background: url("/fe/lol-champ-select/images/summoner-object/background-magic-red.png") no-repeat;
  background-size: cover;
  opacity: 1;
}
.summoner-object.left .image-magic-background.is-acting-background {
  left: -12px;
  background: url("/fe/lol-champ-select/images/summoner-object/background-magic-blue.png") no-repeat;
  background-size: cover;
  opacity: 1;
}
.summoner-object.is-self .image-magic-background.is-acting-background {
  left: -12px;
  background: url("/fe/lol-champ-select/images/summoner-object/background-magic-gold.png") no-repeat;
  background-size: cover;
  opacity: 1;
}
.summoner-object:not(.is-picking-now):not(.obfuscation) .champion-ring-pop-animation {
  animation: summoner-object-lockin-ring var(--lockinAnimationDuration) cubic-bezier(0, 0.74, 1, 1);
  animation-delay: calc(0.125 * var(--lockinAnimationDuration));
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-image: radial-gradient(circle at 50% -10px, #feffdf 0%, #feffdf 18px, rgba(254,255,223,0) 35px), linear-gradient(to bottom, #fcfd87 0%, #ddbb63 70%);
  opacity: 0;
}
.summoner-object:not(.is-picking-now):not(.obfuscation) .champion-ring-shine-animation {
  animation: summoner-object-lockin-ring-shine var(--lockinAnimationDuration) cubic-bezier(0, 0, 0.15, 0.99);
  animation-delay: calc(0.125 * var(--lockinAnimationDuration));
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: linear-gradient(-60deg, transparent 40%, rgba(255,255,255,0.8) 45%, rgba(255,255,255,0.8) 55%, transparent 60%);
  background-repeat: no-repeat;
  -webkit-filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)) drop-shadow(0 0 2px rgba(255,255,255,0.8));
  opacity: 0;
}
.summoner-object:not(.is-picking-now):not(.obfuscation) .champion-ring-magic-animation-inner {
  animation: summoner-object-lockin-inner-magic calc(1.25 * var(--lockinAnimationDuration)) linear;
  animation-delay: calc(0.25 * var(--lockinAnimationDuration));
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(62px - 4px);
  height: calc(62px - 4px);
  background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-magic-inner.png");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}
.summoner-object:not(.is-picking-now):not(.obfuscation) .champion-ring-magic-animation-outer {
  animation: summoner-object-lockin-outer-magic calc(0.75 * var(--lockinAnimationDuration)) linear;
  animation-delay: calc(0.25 * var(--lockinAnimationDuration));
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(62px + 24px);
  height: calc(62px + 24px);
  background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-magic-outer.png");
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-filter: brightness(1.4);
  opacity: 0;
}
.summoner-object:not(.is-picking-now):not(.obfuscation) .status-message {
  animation: summoner-object-lockin-status-message calc(1.75 * var(--lockinAnimationDuration)) cubic-bezier(0, 0, 0.84, 0.35);
}
.summoner-object.on-players-team.pick-sniped {
  animation-name: summoner-object-pick-snipe-shake;
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
}
.summoner-object.on-players-team.pick-sniped .portrait-icon {
  -webkit-filter: grayscale(1);
  animation-name: summoner-object-champion-intent-banned-portrait;
  animation-duration: 800ms;
  animation-fill-mode: backwards;
  opacity: 0;
}
.summoner-object.on-players-team.pick-sniped .champion-icon-pick-snipe-glow-animation {
  position: absolute;
  top: -10px;
  left: -20px;
  bottom: -10px;
  right: -20px;
  background-image: radial-gradient(circle closest-side at 50% 50%, #e44f72 12px, transparent 130%);
  opacity: 0;
  animation-name: champion-icon-pick-snipe-fade;
  animation-duration: 800ms;
  animation-timing-function: cubic-bezier(0.16, 0.35, 0.59, 0.82);
}
.summoner-object.on-players-team.pick-sniped .champion-icon-pick-snipe-magic-animation {
  position: absolute;
  top: -10px;
  left: -50px;
  bottom: -10px;
  right: -300px;
  opacity: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #fff 45%, #fff 55%, transparent 100%);
  -webkit-mask-size: 40% 100%;
  -webkit-mask-repeat: no-repeat;
  animation-name: champion-icon-pick-snipe-magic-swipe;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 0.35, 0.59, 0.82);
}
.summoner-object.on-players-team.pick-sniped .champion-icon-pick-snipe-magic-animation::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url("/fe/lol-champ-select/images/summoner-object/background-magic-red.png");
  background-repeat: no-repeat;
  background-position: 20px 0;
}
.summoner-object.on-players-team.pick-sniped .champion-icon-pick-snipe-ring-animation {
  position: absolute;
  background-size: 70px;
  background-repeat: no-repeat;
  top: -4px;
  left: -4px;
  bottom: -4px;
  right: -4px;
  background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-picksnipe-spinner.png");
  opacity: 0;
  animation-name: champion-icon-pick-snipe-ring-spinner, summoner-object-fadeout-intro-animation;
  animation-duration: 1.17s, 1.17s;
  animation-timing-function: cubic-bezier(0, 0, 0, 1), cubic-bezier(0, 0, 0.5, 1);
}
.summoner-object:not(.is-picking-now) .champion-icon {
  animation: summoner-object-lockin-icon var(--lockinAnimationDuration) cubic-bezier(0, 0.74, 1, 1);
  animation-delay: calc(0.125 * var(--lockinAnimationDuration));
}
.summoner-object .champion-icon::after {
  transition: background-color calc(0.125 * var(--lockinAnimationDuration));
}
.summoner-object:not(.actions-complete) .champion-icon::after {
  background-color: rgba(30,35,40,0.5);
}
.summoner-object .actions-complete .champion-icon::after {
  background-color: transparent;
}
.summoner-object:not(.on-players-team) .champion-icon-container .champion-ring {
  background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-m-red.png");
}
.summoner-object:not(.on-players-team).is-picking-now .champion-icon:after {
  background-color: rgba(22,5,10,0.5);
}
.summoner-object:not(.on-players-team) .spell:first-of-type {
  border-bottom: 1px solid #010a13;
}
.summoner-object .champion-icon-container {
  flex: 0 0 auto;
  height: 62px;
  width: 62px;
  position: relative;
  transition: 500ms background-image ease;
  display: flex;
}
.summoner-object .champion-icon-container.has-context-menu {
  cursor: pointer;
}
.summoner-object .champion-icon-container .champion-ring {
  width: 62px;
  height: 62px;
  background-image: url("/fe/lol-champ-select/images/summoner-object/player-object-m.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}
.summoner-object .champion-icon-container .champion-icons {
  width: calc(62px - 4px);
  height: calc(62px - 4px);
  border-radius: 50%;
  align-self: center;
  flex: 0 0 auto;
  position: relative;
  margin: 0 auto;
}
.summoner-object .champion-icon-container .champion-icons .svg-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.summoner-object .champion-icon-container .champion-icons .svg-icon .active {
  transform: translate(0, 0);
}
.summoner-object .champion-icon-container .champion-icons .portrait-icon,
.summoner-object .champion-icon-container .champion-icons .position-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: opacity 0.5s;
}
.summoner-object .champion-icon-container .champion-icons .portrait-icon.fit-icon,
.summoner-object .champion-icon-container .champion-icons .position-icon.fit-icon {
  background-size: 120%;
  background-position: 50%;
}
.summoner-object .champion-icon-container .champion-icons .portrait-icon.fit-icon.position-icon,
.summoner-object .champion-icon-container .champion-icons .position-icon.fit-icon.position-icon {
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center center;
}
.summoner-object .player-details {
  color: #f7f0de;
  position: relative;
  width: 156px;
  max-height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  flex: none;
  align-self: center;
}
.summoner-object .player-details .status-message,
.summoner-object .player-details .club,
.summoner-object .player-details .summoner-name {
  color: #cdbe91;
  text-shadow: 0 0 5px rgba(1,10,19,0.8);
  margin: 0;
  transition: opacity 0.3s, max-height 0.3s;
  flex: none;
}
.summoner-object .player-details .champion-vote-projection {
  color: #f0e6d2;
  text-shadow: 0 0 5px rgba(1,10,19,0.8);
  opacity: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  max-height: 20px;
  display: inline-flex;
}
.summoner-object .player-details .champion-vote-projection.no-vote-percent {
  max-height: 0;
  opacity: 0;
}
.summoner-object .player-details .status-message {
  opacity: 1;
  max-width: 131px;
  max-height: 32px;
  overflow: hidden;
  display: inline-flex;
  line-height: 14px;
}
.summoner-object .player-details .status-message.no-message {
  max-height: 0;
  opacity: 0;
}
.summoner-object .player-details .status-message .status-message-inner {
  display: inline-block;
  align-self: flex-end;
}
.summoner-object .player-details .summoner-position {
  max-width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: opacity 0.5s;
  height: 20px;
  position: relative;
  flex: none;
}
.summoner-object .player-details .summoner-position.hidden {
  display: none;
}
.summoner-object .player-details .summoner-position .summoner-position-glow {
  opacity: 0;
}
.summoner-object .player-details .summoner-name {
  color: #a09b8c;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 16px;
  width: 100%;
  overflow: hidden;
}
.summoner-wrapper .champion-container {
  transform-origin: 50% 50%;
}
.summoner-wrapper .champion-icons-bg {
  background-color: #1e282d;
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.7);
  border-radius: 50%;
}
.summoner-wrapper .intro-animation .champion-icon-container {
  animation-name: summoner-object-scale-intro-animation;
  animation-duration: 0.17s;
  animation-timing-function: cubic-bezier(0.87, 0.07, 0.98, 0.38);
}
.summoner-wrapper .intro-animation .player-details {
  animation-name: summoner-object-slide-intro-animation;
  animation-duration: 0.8s;
  animation-delay: 0.15s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(0, 0, 0, 1);
}
.summoner-wrapper .intro-animation .champion-ring {
  animation-name: summoner-object-fade-intro-animation;
  animation-delay: 0.03s;
  animation-duration: 0.03s;
  animation-fill-mode: backwards;
  animation-timing-function: linear;
  opacity: 1;
}
.summoner-wrapper .intro-animation .champion-ring::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  right: 1px;
  border-radius: 50%;
  animation-name: summoner-object-fadeout-intro-animation;
  animation-duration: 0.9s;
  animation-delay: 0.03s;
  animation-timing-function: linear;
  opacity: 0;
}
.summoner-wrapper .intro-animation .champion-icons-bg {
  animation-name: summoner-object-fade-intro-animation;
  animation-duration: 0.5s;
  animation-delay: 0.12s;
  animation-fill-mode: backwards;
  animation-timing-function: linear;
}
.summoner-wrapper .intro-animation .champion-icons .svg-icon {
  animation-name: summoner-object-fade-intro-animation;
  animation-duration: 0.1s;
  animation-delay: 0s;
  animation-fill-mode: backwards;
  animation-timing-function: linear;
}
.summoner-wrapper .intro-animation .summoner-position-glow {
  animation-name: summoner-object-fadeout-intro-animation;
  animation-duration: 0.8s;
  animation-delay: 0.17s;
  animation-timing-function: linear;
  position: absolute;
  top: 0;
  left: 0;
}
.summoner-wrapper .intro-animation:not(.is-self) .summoner-position-glow {
  text-shadow: 0 0 5px #f7f0de;
}
.summoner-wrapper .intro-animation:not(.is-self) .champion-ring::after {
  border: 2px solid #f7f0de;
  -webkit-filter: drop-shadow(0 0 5px #f7f0de) drop-shadow(0 0 5px #f7f0de) drop-shadow(0 0 5px #f7f0de);
}
.summoner-wrapper .intro-animation.is-self .summoner-position-glow {
  text-shadow: 0 0 5px #fabe0a;
}
.summoner-wrapper .intro-animation.is-self .champion-ring::after {
  border: 2px solid #c8aa6e;
  -webkit-filter: drop-shadow(0 0 5px #c8aa6e) drop-shadow(0 0 5px #c8aa6e) drop-shadow(0 0 5px #c8aa6e);
}
.summoner-ban-item {
  position: absolute;
  top: 23px;
  margin: auto 6px auto 6px;
  border: 1px solid #1e282d;
  background-color: rgba(1,10,19,0.5);
  background-position: center;
  background-size: 66.7% 66.7%;
  background-repeat: no-repeat;
/* Flip the background image for the left side ban containers */
  transform: scaleX(-1);
}
.summoner-ban-item .champ-ban-icon {
  background-size: 100% 100%;
  width: 28px;
  height: 28px;
/* Then flip the champion icons inside of the containers back */
  transform: scaleX(-1);
}
.summoner-ban-item .ban-icon-overlay {
  position: absolute;
  bottom: -30%; /* -width */
  left: 15% /* (100 - width)/2 */;
  width: 70%;
  height: 70%;
  background-size: 100% 100%;
  background-image: url("/fe/lol-champ-select/images/ban-showcase/icon-ban-red.png");
}
.right .summoner-ban-item .ban-icon-overlay {
  left: 25%;
}
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-0,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-0 .portrait-icon,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-0 .champion-icon-pick-snipe-glow-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-0 .champion-icon-pick-snipe-magic-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-0 .champion-icon-pick-snipe-ring-animation {
  animation-delay: 0.83s;
}
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-1,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-1 .portrait-icon,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-1 .champion-icon-pick-snipe-glow-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-1 .champion-icon-pick-snipe-magic-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-1 .champion-icon-pick-snipe-ring-animation {
  animation-delay: 1.48s;
}
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-2,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-2 .portrait-icon,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-2 .champion-icon-pick-snipe-glow-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-2 .champion-icon-pick-snipe-magic-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-2 .champion-icon-pick-snipe-ring-animation {
  animation-delay: 2.13s;
}
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-3,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-3 .portrait-icon,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-3 .champion-icon-pick-snipe-glow-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-3 .champion-icon-pick-snipe-magic-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-3 .champion-icon-pick-snipe-ring-animation {
  animation-delay: 2.78s;
}
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-4,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-4 .portrait-icon,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-4 .champion-icon-pick-snipe-glow-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-4 .champion-icon-pick-snipe-magic-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-4 .champion-icon-pick-snipe-ring-animation {
  animation-delay: 3.43s;
}
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-5,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-5 .portrait-icon,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-5 .champion-icon-pick-snipe-glow-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-5 .champion-icon-pick-snipe-magic-animation,
.ban-showcase-screen .summoner-object.on-players-team.pick-sniped.pick-snipe-banned-by-enemy-index-5 .champion-icon-pick-snipe-ring-animation {
  animation-delay: 4.08s;
}
@-moz-keyframes summoner-object-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes summoner-object-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes summoner-object-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes summoner-object-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes summoner-object-lockin-ring {
  0% {
    width: calc(62px + 13px);
    height: calc(62px + 13px);
    opacity: 1;
  }
  38% {
    width: 62px;
    height: 62px;
    opacity: 1;
  }
  100% {
    width: 62px;
    height: 62px;
    opacity: 0;
  }
}
@-webkit-keyframes summoner-object-lockin-ring {
  0% {
    width: calc(62px + 13px);
    height: calc(62px + 13px);
    opacity: 1;
  }
  38% {
    width: 62px;
    height: 62px;
    opacity: 1;
  }
  100% {
    width: 62px;
    height: 62px;
    opacity: 0;
  }
}
@-o-keyframes summoner-object-lockin-ring {
  0% {
    width: calc(62px + 13px);
    height: calc(62px + 13px);
    opacity: 1;
  }
  38% {
    width: 62px;
    height: 62px;
    opacity: 1;
  }
  100% {
    width: 62px;
    height: 62px;
    opacity: 0;
  }
}
@keyframes summoner-object-lockin-ring {
  0% {
    width: calc(62px + 13px);
    height: calc(62px + 13px);
    opacity: 1;
  }
  38% {
    width: 62px;
    height: 62px;
    opacity: 1;
  }
  100% {
    width: 62px;
    height: 62px;
    opacity: 0;
  }
}
@-moz-keyframes summoner-object-lockin-ring-shine {
  0% {
    width: calc(62px + 13px);
    height: calc(62px + 13px);
    background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%);
  }
  25% {
    background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%);
    opacity: 1;
  }
  38% {
    width: 62px;
    height: 62px;
    opacity: 1;
  }
  66% {
    opacity: 0.6;
  }
  100% {
    width: 62px;
    height: 62px;
    opacity: 0.2;
    background-position: calc(62px / 2 - 10%) calc(62px / 2 - 10%);
  }
}
@-webkit-keyframes summoner-object-lockin-ring-shine {
  0% {
    width: calc(62px + 13px);
    height: calc(62px + 13px);
    background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%);
  }
  25% {
    background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%);
    opacity: 1;
  }
  38% {
    width: 62px;
    height: 62px;
    opacity: 1;
  }
  66% {
    opacity: 0.6;
  }
  100% {
    width: 62px;
    height: 62px;
    opacity: 0.2;
    background-position: calc(62px / 2 - 10%) calc(62px / 2 - 10%);
  }
}
@-o-keyframes summoner-object-lockin-ring-shine {
  0% {
    width: calc(62px + 13px);
    height: calc(62px + 13px);
    background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%);
  }
  25% {
    background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%);
    opacity: 1;
  }
  38% {
    width: 62px;
    height: 62px;
    opacity: 1;
  }
  66% {
    opacity: 0.6;
  }
  100% {
    width: 62px;
    height: 62px;
    opacity: 0.2;
    background-position: calc(62px / 2 - 10%) calc(62px / 2 - 10%);
  }
}
@keyframes summoner-object-lockin-ring-shine {
  0% {
    width: calc(62px + 13px);
    height: calc(62px + 13px);
    background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%);
  }
  25% {
    background-position: calc(-62px / 2 - 10%) calc(-62px / 2 - 10%);
    opacity: 1;
  }
  38% {
    width: 62px;
    height: 62px;
    opacity: 1;
  }
  66% {
    opacity: 0.6;
  }
  100% {
    width: 62px;
    height: 62px;
    opacity: 0.2;
    background-position: calc(62px / 2 - 10%) calc(62px / 2 - 10%);
  }
}
@-moz-keyframes summoner-object-lockin-icon {
  0% {
    box-shadow: 0 1px 3px #9b803c;
  }
  38% {
    box-shadow: 0 1px 3px transparent;
  }
}
@-webkit-keyframes summoner-object-lockin-icon {
  0% {
    box-shadow: 0 1px 3px #9b803c;
  }
  38% {
    box-shadow: 0 1px 3px transparent;
  }
}
@-o-keyframes summoner-object-lockin-icon {
  0% {
    box-shadow: 0 1px 3px #9b803c;
  }
  38% {
    box-shadow: 0 1px 3px transparent;
  }
}
@keyframes summoner-object-lockin-icon {
  0% {
    box-shadow: 0 1px 3px #9b803c;
  }
  38% {
    box-shadow: 0 1px 3px transparent;
  }
}
@-moz-keyframes summoner-object-lockin-inner-magic {
  0% {
    opacity: 0.7;
    transform: translateX(-50%) translateY(-50%) rotateZ(-76deg) scaleY(1.2);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg) scaleY(1);
  }
  40% {
    opacity: 0.8;
    transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1);
  }
}
@-webkit-keyframes summoner-object-lockin-inner-magic {
  0% {
    opacity: 0.7;
    transform: translateX(-50%) translateY(-50%) rotateZ(-76deg) scaleY(1.2);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg) scaleY(1);
  }
  40% {
    opacity: 0.8;
    transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1);
  }
}
@-o-keyframes summoner-object-lockin-inner-magic {
  0% {
    opacity: 0.7;
    transform: translateX(-50%) translateY(-50%) rotateZ(-76deg) scaleY(1.2);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg) scaleY(1);
  }
  40% {
    opacity: 0.8;
    transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1);
  }
}
@keyframes summoner-object-lockin-inner-magic {
  0% {
    opacity: 0.7;
    transform: translateX(-50%) translateY(-50%) rotateZ(-76deg) scaleY(1.2);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg) scaleY(1);
  }
  40% {
    opacity: 0.8;
    transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) rotateZ(28deg) scaleY(1);
  }
}
@-moz-keyframes summoner-object-lockin-outer-magic {
  0% {
    opacity: 0.9;
    transform: translateX(-42%) translateY(-36%) rotateZ(-65deg);
  }
  50% {
    opacity: 1;
    transform: translateX(-54%) translateY(-37%) rotateZ(-21deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-60%) translateY(-39%) rotateZ(12deg);
  }
}
@-webkit-keyframes summoner-object-lockin-outer-magic {
  0% {
    opacity: 0.9;
    transform: translateX(-42%) translateY(-36%) rotateZ(-65deg);
  }
  50% {
    opacity: 1;
    transform: translateX(-54%) translateY(-37%) rotateZ(-21deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-60%) translateY(-39%) rotateZ(12deg);
  }
}
@-o-keyframes summoner-object-lockin-outer-magic {
  0% {
    opacity: 0.9;
    transform: translateX(-42%) translateY(-36%) rotateZ(-65deg);
  }
  50% {
    opacity: 1;
    transform: translateX(-54%) translateY(-37%) rotateZ(-21deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-60%) translateY(-39%) rotateZ(12deg);
  }
}
@keyframes summoner-object-lockin-outer-magic {
  0% {
    opacity: 0.9;
    transform: translateX(-42%) translateY(-36%) rotateZ(-65deg);
  }
  50% {
    opacity: 1;
    transform: translateX(-54%) translateY(-37%) rotateZ(-21deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-60%) translateY(-39%) rotateZ(12deg);
  }
}
@-moz-keyframes summoner-object-lockin-status-message {
  0% {
    -webkit-filter: brightness(1.5) contrast(1.5) blur(0.5px);
    text-shadow: 0 0 3px #a09b8c, 0 0 3px #a09b8c;
    opacity: 0.85;
  }
  100% {
    -webkit-filter: brightness(1) contrast(1) blur(0);
    text-shadow: 0 0 3px transparent, 0 0 3px transparent;
    opacity: 0.65;
  }
}
@-webkit-keyframes summoner-object-lockin-status-message {
  0% {
    -webkit-filter: brightness(1.5) contrast(1.5) blur(0.5px);
    text-shadow: 0 0 3px #a09b8c, 0 0 3px #a09b8c;
    opacity: 0.85;
  }
  100% {
    -webkit-filter: brightness(1) contrast(1) blur(0);
    text-shadow: 0 0 3px transparent, 0 0 3px transparent;
    opacity: 0.65;
  }
}
@-o-keyframes summoner-object-lockin-status-message {
  0% {
    -webkit-filter: brightness(1.5) contrast(1.5) blur(0.5px);
    text-shadow: 0 0 3px #a09b8c, 0 0 3px #a09b8c;
    opacity: 0.85;
  }
  100% {
    -webkit-filter: brightness(1) contrast(1) blur(0);
    text-shadow: 0 0 3px transparent, 0 0 3px transparent;
    opacity: 0.65;
  }
}
@keyframes summoner-object-lockin-status-message {
  0% {
    -webkit-filter: brightness(1.5) contrast(1.5) blur(0.5px);
    text-shadow: 0 0 3px #a09b8c, 0 0 3px #a09b8c;
    opacity: 0.85;
  }
  100% {
    -webkit-filter: brightness(1) contrast(1) blur(0);
    text-shadow: 0 0 3px transparent, 0 0 3px transparent;
    opacity: 0.65;
  }
}
@-moz-keyframes summoner-object-champion-intent-banned-overlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes summoner-object-champion-intent-banned-overlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes summoner-object-champion-intent-banned-overlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes summoner-object-champion-intent-banned-overlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes summoner-object-champion-intent-banned-portrait {
  0% {
    -webkit-filter: grayscale(0);
    opacity: 1;
  }
  10% {
    -webkit-filter: grayscale(1);
    opacity: 1;
  }
  100% {
    -webkit-filter: grayscale(1);
    opacity: 0;
  }
}
@-webkit-keyframes summoner-object-champion-intent-banned-portrait {
  0% {
    -webkit-filter: grayscale(0);
    opacity: 1;
  }
  10% {
    -webkit-filter: grayscale(1);
    opacity: 1;
  }
  100% {
    -webkit-filter: grayscale(1);
    opacity: 0;
  }
}
@-o-keyframes summoner-object-champion-intent-banned-portrait {
  0% {
    -webkit-filter: grayscale(0);
    opacity: 1;
  }
  10% {
    -webkit-filter: grayscale(1);
    opacity: 1;
  }
  100% {
    -webkit-filter: grayscale(1);
    opacity: 0;
  }
}
@keyframes summoner-object-champion-intent-banned-portrait {
  0% {
    -webkit-filter: grayscale(0);
    opacity: 1;
  }
  10% {
    -webkit-filter: grayscale(1);
    opacity: 1;
  }
  100% {
    -webkit-filter: grayscale(1);
    opacity: 0;
  }
}
@-moz-keyframes summoner-object-scale-intro-animation {
  0% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes summoner-object-scale-intro-animation {
  0% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes summoner-object-scale-intro-animation {
  0% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes summoner-object-scale-intro-animation {
  0% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes summoner-object-slide-intro-animation {
  0% {
    visibility: hidden;
    transform: translateX(-10px);
  }
  1% {
    visibility: visible;
    transform: translateX(-10px);
  }
  100% {
    visibility: visible;
    transform: translateX(0px);
  }
}
@-webkit-keyframes summoner-object-slide-intro-animation {
  0% {
    visibility: hidden;
    transform: translateX(-10px);
  }
  1% {
    visibility: visible;
    transform: translateX(-10px);
  }
  100% {
    visibility: visible;
    transform: translateX(0px);
  }
}
@-o-keyframes summoner-object-slide-intro-animation {
  0% {
    visibility: hidden;
    transform: translateX(-10px);
  }
  1% {
    visibility: visible;
    transform: translateX(-10px);
  }
  100% {
    visibility: visible;
    transform: translateX(0px);
  }
}
@keyframes summoner-object-slide-intro-animation {
  0% {
    visibility: hidden;
    transform: translateX(-10px);
  }
  1% {
    visibility: visible;
    transform: translateX(-10px);
  }
  100% {
    visibility: visible;
    transform: translateX(0px);
  }
}
@-moz-keyframes summoner-object-fade-intro-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes summoner-object-fade-intro-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes summoner-object-fade-intro-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes summoner-object-fade-intro-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes summoner-object-fadeout-intro-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes summoner-object-fadeout-intro-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes summoner-object-fadeout-intro-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes summoner-object-fadeout-intro-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes summoner-object-expand-initial {
  0% {
    transform: translateX(-38px);
  }
  100% {
    transform: translateX(-3px);
  }
}
@-webkit-keyframes summoner-object-expand-initial {
  0% {
    transform: translateX(-38px);
  }
  100% {
    transform: translateX(-3px);
  }
}
@-o-keyframes summoner-object-expand-initial {
  0% {
    transform: translateX(-38px);
  }
  100% {
    transform: translateX(-3px);
  }
}
@keyframes summoner-object-expand-initial {
  0% {
    transform: translateX(-38px);
  }
  100% {
    transform: translateX(-3px);
  }
}
@-moz-keyframes summoner-object-expand-final {
  0% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0px);
  }
}
@-webkit-keyframes summoner-object-expand-final {
  0% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0px);
  }
}
@-o-keyframes summoner-object-expand-final {
  0% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes summoner-object-expand-final {
  0% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0px);
  }
}
@-moz-keyframes summoner-object-collapse-initial {
  0% {
    transform: translateX(38px);
  }
  100% {
    transform: translateX(3px);
  }
}
@-webkit-keyframes summoner-object-collapse-initial {
  0% {
    transform: translateX(38px);
  }
  100% {
    transform: translateX(3px);
  }
}
@-o-keyframes summoner-object-collapse-initial {
  0% {
    transform: translateX(38px);
  }
  100% {
    transform: translateX(3px);
  }
}
@keyframes summoner-object-collapse-initial {
  0% {
    transform: translateX(38px);
  }
  100% {
    transform: translateX(3px);
  }
}
@-moz-keyframes summoner-object-collapse-final {
  0% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0px);
  }
}
@-webkit-keyframes summoner-object-collapse-final {
  0% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0px);
  }
}
@-o-keyframes summoner-object-collapse-final {
  0% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes summoner-object-collapse-final {
  0% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0px);
  }
}
@-moz-keyframes champion-icon-pick-snipe-magic-animation-translate {
  0% {
    opacity: 0;
    transform: translateX(0px);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateX(50px) skewY(-3deg);
  }
}
@-webkit-keyframes champion-icon-pick-snipe-magic-animation-translate {
  0% {
    opacity: 0;
    transform: translateX(0px);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateX(50px) skewY(-3deg);
  }
}
@-o-keyframes champion-icon-pick-snipe-magic-animation-translate {
  0% {
    opacity: 0;
    transform: translateX(0px);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateX(50px) skewY(-3deg);
  }
}
@keyframes champion-icon-pick-snipe-magic-animation-translate {
  0% {
    opacity: 0;
    transform: translateX(0px);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateX(50px) skewY(-3deg);
  }
}
@-moz-keyframes champion-icon-pick-snipe-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes champion-icon-pick-snipe-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes champion-icon-pick-snipe-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes champion-icon-pick-snipe-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes champion-icon-pick-snipe-magic-swipe {
  0% {
    -webkit-mask-position: 10% 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    -webkit-mask-position: 80% 0%;
    opacity: 0;
  }
}
@-webkit-keyframes champion-icon-pick-snipe-magic-swipe {
  0% {
    -webkit-mask-position: 10% 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    -webkit-mask-position: 80% 0%;
    opacity: 0;
  }
}
@-o-keyframes champion-icon-pick-snipe-magic-swipe {
  0% {
    -webkit-mask-position: 10% 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    -webkit-mask-position: 80% 0%;
    opacity: 0;
  }
}
@keyframes champion-icon-pick-snipe-magic-swipe {
  0% {
    -webkit-mask-position: 10% 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    -webkit-mask-position: 80% 0%;
    opacity: 0;
  }
}
@-moz-keyframes champion-icon-pick-snipe-ring-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@-webkit-keyframes champion-icon-pick-snipe-ring-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@-o-keyframes champion-icon-pick-snipe-ring-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@keyframes champion-icon-pick-snipe-ring-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@-moz-keyframes summoner-object-pick-snipe-shake {
  0% {
    transform: translate(-1px, -1px);
  }
  12% {
    transform: translate(0px, 1px);
  }
  24% {
    transform: translate(1px, 0px);
  }
  36% {
    transform: translate(1px, -1px);
  }
  48% {
    transform: translate(1px, 1px);
  }
  60% {
    transform: translate(0px, 1px);
  }
  72% {
    transform: translate(-0.5px, -0.5px);
  }
  84% {
    transform: translate(0.5px, -0.5px);
  }
  96% {
    transform: tranlate(0px, 0.5px);
  }
}
@-webkit-keyframes summoner-object-pick-snipe-shake {
  0% {
    transform: translate(-1px, -1px);
  }
  12% {
    transform: translate(0px, 1px);
  }
  24% {
    transform: translate(1px, 0px);
  }
  36% {
    transform: translate(1px, -1px);
  }
  48% {
    transform: translate(1px, 1px);
  }
  60% {
    transform: translate(0px, 1px);
  }
  72% {
    transform: translate(-0.5px, -0.5px);
  }
  84% {
    transform: translate(0.5px, -0.5px);
  }
  96% {
    transform: tranlate(0px, 0.5px);
  }
}
@-o-keyframes summoner-object-pick-snipe-shake {
  0% {
    transform: translate(-1px, -1px);
  }
  12% {
    transform: translate(0px, 1px);
  }
  24% {
    transform: translate(1px, 0px);
  }
  36% {
    transform: translate(1px, -1px);
  }
  48% {
    transform: translate(1px, 1px);
  }
  60% {
    transform: translate(0px, 1px);
  }
  72% {
    transform: translate(-0.5px, -0.5px);
  }
  84% {
    transform: translate(0.5px, -0.5px);
  }
  96% {
    transform: tranlate(0px, 0.5px);
  }
}
@keyframes summoner-object-pick-snipe-shake {
  0% {
    transform: translate(-1px, -1px);
  }
  12% {
    transform: translate(0px, 1px);
  }
  24% {
    transform: translate(1px, 0px);
  }
  36% {
    transform: translate(1px, -1px);
  }
  48% {
    transform: translate(1px, 1px);
  }
  60% {
    transform: translate(0px, 1px);
  }
  72% {
    transform: translate(-0.5px, -0.5px);
  }
  84% {
    transform: translate(0.5px, -0.5px);
  }
  96% {
    transform: tranlate(0px, 0.5px);
  }
}
.spell-select-flyout .spell-information .spell-title,
.spell-select-flyout .spell-information .spell-locked-description {
  font-family: var(--font-display);
}
.spell-select-flyout .spell-information .spell-description,
.spell-select-flyout .spell-information .spell-cooldown {
  font-family: var(--font-body);
}
.spell-select-flyout .spell-information .spell-title,
.spell-select-flyout .spell-information .spell-locked-description {
  font-family: var(--font-display);
}
.spell-select-flyout .spell-information .spell-description,
.spell-select-flyout .spell-information .spell-cooldown {
  font-family: var(--font-body);
}
.spell-select-flyout .spell-information .spell-title,
.spell-select-flyout .spell-information .spell-locked-description,
.spell-select-flyout .spell-information .spell-description,
.spell-select-flyout .spell-information .spell-cooldown {
  -webkit-user-select: none;
}
.spell-select-flyout .spell-information .spell-title,
.spell-select-flyout .spell-information .spell-locked-description,
.spell-select-flyout .spell-information .spell-description,
.spell-select-flyout .spell-information .spell-cooldown {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.spell-select-flyout .spell-information .spell-title,
.spell-select-flyout .spell-information .spell-locked-description {
  text-transform: uppercase;
}
.spell-select-flyout .spell-information .spell-title:lang(ko-kr),
.spell-select-flyout .spell-information .spell-locked-description:lang(ko-kr),
.spell-select-flyout .spell-information .spell-title:lang(ja-jp),
.spell-select-flyout .spell-information .spell-locked-description:lang(ja-jp),
.spell-select-flyout .spell-information .spell-title:lang(tr-tr),
.spell-select-flyout .spell-information .spell-locked-description:lang(tr-tr),
.spell-select-flyout .spell-information .spell-title:lang(el-gr),
.spell-select-flyout .spell-information .spell-locked-description:lang(el-gr),
.spell-select-flyout .spell-information .spell-title:lang(th-th),
.spell-select-flyout .spell-information .spell-locked-description:lang(th-th),
.spell-select-flyout .spell-information .spell-title:lang(zh-tw),
.spell-select-flyout .spell-information .spell-locked-description:lang(zh-tw) {
  text-transform: none;
}
.spell-select-flyout .spell-information .spell-title {
  color: #f0e6d2;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.05em;
}
.spell-select-flyout .spell-information .spell-locked-description {
  color: #f0e6d2;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.075em;
}
.spell-select-flyout .spell-information .spell-description,
.spell-select-flyout .spell-information .spell-cooldown {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.spell-select-flyout .spell-information .spell-description:lang(ja-jp),
.spell-select-flyout .spell-information .spell-cooldown:lang(ja-jp) {
  font-size: 13px;
}
.summoner-spell-container {
  display: flex;
  margin-left: 5px;
  position: relative;
}
.spell-select-flyout {
  width: 270px;
  height: 430px;
  display: flex;
  flex-direction: column;
}
.spell-select-flyout .spell-information {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 213px;
  text-align: center;
  padding: 18px;
  box-sizing: border-box;
  -webkit-user-select: none;
  cursor: default;
}
.spell-select-flyout .spell-information .spell-title {
  position: relative;
  top: 13px;
  color: #f0e6d2;
  margin-top: -6px;
  margin-bottom: 1px;
  animation: SummonerSpellsTitleAnimation 0.763s;
}
.spell-select-flyout .spell-information .spell-locked-description {
  color: #a09b8c;
  margin-top: 2px;
}
.spell-select-flyout .spell-information .spell-description,
.spell-select-flyout .spell-information .spell-cooldown {
  position: relative;
  top: 20px;
  color: #a09b8c;
  margin-top: 6px;
  animation: SummonerSpellsDescriptionAnimation 0.733s;
}
.spell-select-flyout .spell-divider {
  display: flex;
  width: 20%;
  height: 0;
  border-bottom: 1px solid #463714;
  margin: 0 auto;
  transition: 200ms all ease-out;
}
.spell-select-flyout .summoner-spells {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  box-sizing: border-box;
  width: 100%;
  animation: SummonerSpellsSpellsAnimation 0.633s;
  -webkit-user-select: none;
}
.spell-select-flyout.show .spell-title,
.spell-select-flyout.show .spell-description,
.spell-select-flyout.show .spell-cooldown,
.spell-select-flyout.show .summoner-spells {
  top: 0;
}
.spell-select-flyout.show .spell-divider {
  width: 100%;
}
.no-large-area-animations .summoner-spells {
  animation: none;
}
.no-large-area-animations .spell-divider {
  transition: none;
}
@-moz-keyframes SummonerSpellsSpellsAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    top: 21px;
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 16.153241579493056px;
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes SummonerSpellsSpellsAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    top: 21px;
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 16.153241579493056px;
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 0px;
    opacity: 1;
  }
}
@-o-keyframes SummonerSpellsSpellsAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    top: 21px;
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 16.153241579493056px;
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 0px;
    opacity: 1;
  }
}
@keyframes SummonerSpellsSpellsAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    top: 21px;
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 16.153241579493056px;
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 0px;
    opacity: 1;
  }
}
@-moz-keyframes SummonerSpellsDescriptionAnimation {
  0% {
    top: 14px;
    opacity: 0;
  }
  15.921824921135647% {
    top: 14px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  78.98020662460569% {
    top: 0px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes SummonerSpellsDescriptionAnimation {
  0% {
    top: 14px;
    opacity: 0;
  }
  15.921824921135647% {
    top: 14px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  78.98020662460569% {
    top: 0px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@-o-keyframes SummonerSpellsDescriptionAnimation {
  0% {
    top: 14px;
    opacity: 0;
  }
  15.921824921135647% {
    top: 14px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  78.98020662460569% {
    top: 0px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@keyframes SummonerSpellsDescriptionAnimation {
  0% {
    top: 14px;
    opacity: 0;
  }
  15.921824921135647% {
    top: 14px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  78.98020662460569% {
    top: 0px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@-moz-keyframes SummonerSpellsTitleAnimation {
  0% {
    top: 13px;
    opacity: 0;
  }
  21.214802144095852% {
    top: 13px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  84.24335960901782% {
    top: 0px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes SummonerSpellsTitleAnimation {
  0% {
    top: 13px;
    opacity: 0;
  }
  21.214802144095852% {
    top: 13px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  84.24335960901782% {
    top: 0px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@-o-keyframes SummonerSpellsTitleAnimation {
  0% {
    top: 13px;
    opacity: 0;
  }
  21.214802144095852% {
    top: 13px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  84.24335960901782% {
    top: 0px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@keyframes SummonerSpellsTitleAnimation {
  0% {
    top: 13px;
    opacity: 0;
  }
  21.214802144095852% {
    top: 13px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  84.24335960901782% {
    top: 0px;
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
.champion-select .summoner-timer .timer {
  font-family: var(--font-display);
}
.champion-select .summoner-timer .timer {
  -webkit-user-select: none;
}
.champion-select .summoner-timer .timer {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-select .summoner-timer .timer {
  background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.champion-select .summoner-timer .timer {
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.05em;
}
.champion-select .summoner-timer {
  position: absolute;
  top: 0px;
  height: 0px;
}
.champion-select .summoner-timer .timer {
  background: none;
  font-style: normal;
  display: flex;
  position: relative;
  line-height: 77px;
  font-size: 32px;
  color: #f0e6d2;
  -webkit-text-fill-color: initial;
}
.champion-select .summoner-timer .timer.right {
  flex-direction: row-reverse;
}
.champion-select .summoner-timer .timer .action-pointer {
  background-repeat: no-repeat;
  background-size: contain;
  width: 8px;
  position: relative;
}
.champion-select .summoner-timer .timer .action-pointer.left {
  background-image: url("/fe/lol-champ-select/images/summoner-object/action-pointer-blue.png");
  margin-right: 5px;
  top: 31px;
  transform: scaleX(-1);
}
.champion-select .summoner-timer .timer .action-pointer.right {
  background-image: url("/fe/lol-champ-select/images/summoner-object/action-pointer-red.png");
  margin-left: 5px;
  top: 31px;
}
.summoner-wrapper.right .lines {
  transform: scaleX(-1);
  right: 0;
}
.summoner-wrapper .lines {
  position: absolute;
  margin: 0;
  height: 100%;
}
.summoner-wrapper .lines::after,
.summoner-wrapper .lines:first-child:before {
  content: '';
  position: absolute;
  bottom: -3px;
  height: 9px;
  width: 386px;
  background: url("/fe/lol-champ-select/images/summoner-object/linework-horiz.png") left top no-repeat;
  background-size: contain;
}
.summoner-wrapper .lines:first-child:before {
  top: -6px;
  bottom: auto;
}
.team-bans {
  display: flex;
  top: 30px;
  position: absolute;
}
.team-bans.left {
  right: 750px;
}
.team-bans.right {
  left: 750px;
}
.team-bans.right .bans-container {
  justify-content: flex-start;
  flex-direction: row;
}
.team-bans .bans-container {
  justify-content: flex-end;
  display: flex;
  flex-direction: row-reverse;
}
.team-bans.left.flip-my-team-bans .bans-container {
  flex-direction: row;
}
.team-bans-item {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 5px;
  box-sizing: border-box;
  position: relative;
  border: 1px solid #1e282d;
  background-color: rgba(1,10,19,0.5);
  background-image: url("/fe/lol-champ-select/images/team-bans/icon-ban-small.png");
  background-position: center;
  background-size: 66.7% 66.7%;
  background-repeat: no-repeat;
/* Flip the background image for the left side ban containers */
  transform: scaleX(-1);
}
.team-bans-item .champion-icon {
/* Then flip the champion icons inside of the containers back */
  transform: scaleX(-1);
}
.team-bans-item.animating::after {
  display: none;
}
.team-bans-item:not(.animating) .champion-icon {
  animation-play-state: paused;
}
.team-bans-item .video-overlay video {
  position: absolute;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  left: -20px;
  top: -30px;
}
.team-bans-item.static .champion-icon {
  opacity: 1;
  background-size: 100% 100%;
  animation: none;
}
.team-bans-item.static .video-overlay {
  display: none;
}
.bans-container .champion-icon {
  width: 28px;
  height: 28px;
  animation-name: ban-tile-champion-animation;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  overflow: hidden;
  align-self: center;
  position: relative;
}
@-moz-keyframes ban-tile-champion-animation {
  0% {
    opacity: 0;
    background-size: 180% 180%;
  }
  100% {
    opacity: 1;
    background-size: 100% 100%;
  }
}
@-webkit-keyframes ban-tile-champion-animation {
  0% {
    opacity: 0;
    background-size: 180% 180%;
  }
  100% {
    opacity: 1;
    background-size: 100% 100%;
  }
}
@-o-keyframes ban-tile-champion-animation {
  0% {
    opacity: 0;
    background-size: 180% 180%;
  }
  100% {
    opacity: 1;
    background-size: 100% 100%;
  }
}
@keyframes ban-tile-champion-animation {
  0% {
    opacity: 0;
    background-size: 180% 180%;
  }
  100% {
    opacity: 1;
    background-size: 100% 100%;
  }
}
.team-boost {
  position: absolute;
  top: 95px;
  left: 50%;
  transform: translateX(-50%);
}
.team-boost img {
  padding-right: 12px;
  pointer-events: none;
  vertical-align: bottom;
}
.expanded-header .team-boost {
  top: 115px;
}
.team-boost-notification h3 {
  font-family: var(--font-display);
}
.team-boost-notification,
.team-boost-notification table {
  font-family: var(--font-body);
}
.team-boost-notification,
.team-boost-notification h3,
.team-boost-notification table {
  -webkit-user-select: none;
}
.team-boost-notification,
.team-boost-notification h3,
.team-boost-notification table {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.team-boost-notification h3 {
  text-transform: uppercase;
}
.team-boost-notification h3:lang(ko-kr),
.team-boost-notification h3:lang(ja-jp),
.team-boost-notification h3:lang(tr-tr),
.team-boost-notification h3:lang(el-gr),
.team-boost-notification h3:lang(th-th),
.team-boost-notification h3:lang(zh-tw) {
  text-transform: none;
}
.team-boost-notification h3 {
  color: #f0e6d2;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.05em;
}
.team-boost-notification {
  color: #a09b8c;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.team-boost-notification table {
  color: #a09b8c;
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: subpixel-antialiased;
}
.team-boost-notification table:lang(ja-jp) {
  font-size: 13px;
}
.team-boost-notification table .value {
  color: #f0e6d2;
}
.team-boost-notification {
  text-align: center;
  margin-bottom: 30px;
}
.team-boost-notification .boost-description {
  padding-bottom: 10px;
}
.team-boost-notification .boost-details {
  padding-top: 10px;
}
.team-boost-notification h3 {
  margin-bottom: 10px;
}
.team-boost-notification p {
  margin: 3px;
}
.team-boost-notification hr {
  border-color: #785a28;
}
.team-boost-notification table {
  width: 100%;
}
.team-boost-notification table .label {
  text-align: left;
}
.team-boost-notification table .value {
  text-align: right;
}
.team-boost-notification table .total td {
  border-top: 1px solid #3c3c41;
  padding-top: 5px;
}
.champion-select .timer-status .message,
.champion-select .timer-status .message.local-player-acting,
.champion-select .timer-status .timer-container .timer,
.champion-select .timer-status .small-timer {
  font-family: var(--font-display);
}
.champion-select .timer-status .message,
.champion-select .timer-status .message.local-player-acting,
.champion-select .timer-status .timer-container .timer,
.champion-select .timer-status .small-timer {
  -webkit-user-select: none;
}
.champion-select .timer-status .message,
.champion-select .timer-status .message.local-player-acting,
.champion-select .timer-status .timer-container .timer,
.champion-select .timer-status .small-timer {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.champion-select .timer-status .message,
.champion-select .timer-status .message.local-player-acting,
.champion-select .timer-status .timer-container .timer,
.champion-select .timer-status .small-timer {
  text-transform: uppercase;
}
.champion-select .timer-status .message:lang(ko-kr),
.champion-select .timer-status .message.local-player-acting:lang(ko-kr),
.champion-select .timer-status .timer-container .timer:lang(ko-kr),
.champion-select .timer-status .small-timer:lang(ko-kr),
.champion-select .timer-status .message:lang(ja-jp),
.champion-select .timer-status .message.local-player-acting:lang(ja-jp),
.champion-select .timer-status .timer-container .timer:lang(ja-jp),
.champion-select .timer-status .small-timer:lang(ja-jp),
.champion-select .timer-status .message:lang(tr-tr),
.champion-select .timer-status .message.local-player-acting:lang(tr-tr),
.champion-select .timer-status .timer-container .timer:lang(tr-tr),
.champion-select .timer-status .small-timer:lang(tr-tr),
.champion-select .timer-status .message:lang(el-gr),
.champion-select .timer-status .message.local-player-acting:lang(el-gr),
.champion-select .timer-status .timer-container .timer:lang(el-gr),
.champion-select .timer-status .small-timer:lang(el-gr),
.champion-select .timer-status .message:lang(th-th),
.champion-select .timer-status .message.local-player-acting:lang(th-th),
.champion-select .timer-status .timer-container .timer:lang(th-th),
.champion-select .timer-status .small-timer:lang(th-th),
.champion-select .timer-status .message:lang(zh-tw),
.champion-select .timer-status .message.local-player-acting:lang(zh-tw),
.champion-select .timer-status .timer-container .timer:lang(zh-tw),
.champion-select .timer-status .small-timer:lang(zh-tw) {
  text-transform: none;
}
.champion-select .timer-status .message {
  text-transform: none;
}
.champion-select .timer-status .timer-container .timer {
  color: #f0e6d2;
  font-size: 40px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 0.05em;
}
.champion-select .timer-status .message.local-player-acting,
.champion-select .timer-status .small-timer {
  color: #f0e6d2;
  font-size: 30px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
}
.champion-select .timer-status .message {
  color: #f0e6d2;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.05em;
}
.champion-select .timer-status .message {
  letter-spacing: 0.025em;
}
.champion-select .timer-status {
  width: 100%;
  height: 68px;
  margin: 0 auto;
  position: relative;
  text-shadow: 0 0 5px rgba(1,10,19,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateZ(0);
}
.champion-select .timer-status .message {
  font-style: italic;
  font-size: 22px;
  line-height: 20px;
  margin: 0 80px;
  text-align: center;
  color: #a09b8c;
  text-transform: none;
  margin-top: 20px;
  width: 100%;
  min-height: 20px;
}
.champion-select .timer-status .message.local-player-acting {
  font-size: 28px;
  line-height: 20px;
  font-style: normal;
}
.champion-select .timer-status .metal-work {
  position: absolute;
  top: 34px;
  left: -61px;
}
.champion-select .timer-status .metal-work .cls-1 {
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 1px;
}
.champion-select .timer-status .metal-work .cls-1 .stop1 {
  stop-color: #463714;
}
.champion-select .timer-status .metal-work .cls-1 .stop2 {
  stop-color: #785a28;
}
.champion-select .timer-status.expanded-header .metal-work {
  top: 54px;
}
.champion-select .timer-status.expanded-header .timer-container {
  margin-top: 11px;
}
.champion-select .timer-status .metal-work.right {
  left: 360px;
  transform: scaleX(-1);
}
.champion-select .timer-status .timer-container {
  display: flex;
  align-items: center;
  width: 578px;
  min-height: 42px;
}
.champion-select .timer-status .timer-container .burnout-timer {
  height: 5px;
  width: 245px;
  position: relative;
  margin-top: 5px;
  margin-left: 1px;
}
.champion-select .timer-status .timer-container .burnout-timer.left {
  margin-left: 3px;
}
.champion-select .timer-status .timer-container .burnout-timer.blue {
  background-color: rgba(10,150,170,0.2);
}
.champion-select .timer-status .timer-container .burnout-timer.red {
  background-color: rgba(190,30,55,0.2);
}
.champion-select .timer-status .timer-container .burnout-timer-bar {
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #690014 0, #be1e37 50%, #fe7350 85%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: scaleX(0);
  transform-origin: left;
}
.champion-select .timer-status .timer-container .burnout-timer.left .burnout-timer-bar {
  transform-origin: right;
}
.champion-select .timer-status .timer-container .burnout-timer.blue .burnout-timer-bar {
  background-image: linear-gradient(to right, #005a82 10%, #0a96aa 70%, #cdfafa 125%);
}
.champion-select .timer-status .timer-container .burnout-timer.left.blue .burnout-timer-bar {
  background-image: linear-gradient(to left, #005a82 10%, #0a96aa 70%, #cdfafa 125%);
}
.champion-select .timer-status .timer-container .burnout-timer.left.red .burnout-timer-bar {
  background-image: linear-gradient(to left, #690014 0, #be1e37 50%, #fe7350 85%);
}
.champion-select .timer-status .timer-container .burnout-timer-glow {
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #690014 0, #be1e37 50%, #fe7350 85%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-filter: blur(5px);
  transform: scaleX(0);
  transform-origin: left;
}
.champion-select .timer-status .timer-container .burnout-timer.left .burnout-timer-glow {
  transform-origin: right;
}
.champion-select .timer-status .timer-container .burnout-timer.blue .burnout-timer-glow {
  background-image: linear-gradient(to right, #005a82 10%, #0a96aa 70%, #cdfafa 125%);
}
.champion-select .timer-status .timer-container .burnout-timer.left.blue .burnout-timer-glow {
  background-image: linear-gradient(to left, #005a82 10%, #0a96aa 70%, #cdfafa 125%);
}
.champion-select .timer-status .timer-container .burnout-timer.left.red .burnout-timer-glow {
  background-image: linear-gradient(to left, #690014 0, #be1e37 50%, #fe7350 85%);
}
.champion-select .timer-status .timer-container .timer {
  width: 82px;
  position: relative;
  text-align: center;
  font-style: normal;
  color: #f0e6d2;
  -webkit-text-fill-color: initial;
}
.champion-select .timer-status .small-timer {
  position: absolute;
  text-align: center;
  font-style: normal;
  color: #f0e6d2;
  -webkit-text-fill-color: initial;
  left: 645px;
  top: 10px;
}
.champion-select .timer-status.timer-pulse .timer-container .timer::before {
  content: '';
  border-radius: 50%;
  height: 56px;
  width: 52px;
  position: absolute;
  top: calc(50% - 28px);
  left: calc(50% - 26px);
  background: radial-gradient(ellipse at center, #0a95aa 0%, rgba(10,149,170,0.98) 1%, rgba(10,149,170,0.36) 32%, rgba(10,149,170,0) 68%);
  animation: timerStatusTimerGlow 1s linear forwards;
}
.champion-select .timer-status.timer-pulse .timer-container .timer::after {
  color: #be1e37;
  content: attr(data-time);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  animation: timerStatusTimerPulse 1s cubic-bezier(0, 0, 0, 1) forwards;
}
.champion-select .timer-status::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 815px auto;
  background-repeat: no-repeat;
  background-image: url("/fe/lol-champ-select/images/config/linework-top-glow.png");
  background-position: center -203px;
}
.champion-select.is-banning-now .timer-status,
.champion-select.is-banning-now .timer-status::before {
  background-position: center -100px;
}
.champion-select.is-picking-now.pick-screen .timer-status,
.champion-select.is-picking-now.pick-screen .timer-status::before {
  background-position: center 0px;
}
.champion-select.is-banning-now.timer-less-than-11-seconds .timer-status::before,
.champion-select.is-picking-now.timer-less-than-11-seconds .timer-status::before {
  animation-name: timerStatusTimerGlowMultiPulse;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 10;
  animation-timing-function: cubic-bezier(0.46, 0.19, 0.7, 0.98);
}
@-moz-keyframes timerStatusTimerPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@-webkit-keyframes timerStatusTimerPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@-o-keyframes timerStatusTimerPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@keyframes timerStatusTimerPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@-moz-keyframes timerStatusTimerGlow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes timerStatusTimerGlow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes timerStatusTimerGlow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes timerStatusTimerGlow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes timerStatusTimerGlowMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes timerStatusTimerGlowMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes timerStatusTimerGlowMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes timerStatusTimerGlowMultiPulse {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes burnoutTimerBackgroundSize {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@-webkit-keyframes burnoutTimerBackgroundSize {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@-o-keyframes burnoutTimerBackgroundSize {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes burnoutTimerBackgroundSize {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@-moz-keyframes burnoutTimerBackgroundSize2 {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@-webkit-keyframes burnoutTimerBackgroundSize2 {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@-o-keyframes burnoutTimerBackgroundSize2 {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes burnoutTimerBackgroundSize2 {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.champion-trade-button {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 76px;
  bottom: 12px;
  pointer-events: all;
}
.champion-trade-button .icon {
  background-image: url("/fe/lol-champ-select/images/summoner/button-trade.png");
  background-size: contain;
  cursor: pointer;
}
.champion-trade-button:after {
  content: url("/fe/lol-champ-select/images/summoner/button-trade-hover.png") url("/fe/lol-champ-select/images/summoner/button-trade-click.png");
  display: none;
  height: 0;
  width: 0;
}
.champion-trade-button:hover .icon {
  background-image: url("/fe/lol-champ-select/images/summoner/button-trade-hover.png");
}
.champion-trade-button:active .icon {
  background-image: url("/fe/lol-champ-select/images/summoner/button-trade-click.png");
}
.champion-trade-button[disabled] .icon {
  background-image: url("/fe/lol-champ-select/images/summoner/button-trade-disable.png");
}
.ward-skin-select-flyout .ward-skin-details .ward-skin-name {
  font-family: var(--font-display);
}
.ward-skin-select-flyout .ward-skin-details .ward-skin-name {
  font-family: var(--font-display);
}
.ward-skin-select-flyout .ward-skin-details .ward-skin-name {
  -webkit-user-select: none;
}
.ward-skin-select-flyout .ward-skin-details .ward-skin-name {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.ward-skin-select-flyout .ward-skin-details .ward-skin-name {
  text-transform: uppercase;
}
.ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(ko-kr),
.ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(ja-jp),
.ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(tr-tr),
.ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(el-gr),
.ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(th-th),
.ward-skin-select-flyout .ward-skin-details .ward-skin-name:lang(zh-tw) {
  text-transform: none;
}
.ward-skin-select-flyout .ward-skin-details .ward-skin-name {
  color: #f0e6d2;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.05em;
}
.ward-skin-select-flyout {
  width: 270px;
  height: 360px;
  display: flex;
  flex-direction: column;
}
.ward-skin-select-flyout .ward-skin-details {
  height: 172px;
  background-size: cover;
  position: relative;
  box-shadow: 0 0 1px 0 rgba(0,0,0,0.5) inset;
  border-bottom: 1px solid #463714;
  animation: WardSkinDetailsAnimation 0.663s;
}
.ward-skin-select-flyout .ward-skin-details .ward-skin-image {
  height: 160px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.ward-skin-select-flyout .ward-skin-details .ward-skin-shadow {
  height: 180px;
  position: absolute;
  bottom: -6px;
  left: calc(50% - 3px);
  transform: translateX(-50%);
}
.ward-skin-select-flyout .ward-skin-details .ward-skin-name {
  position: absolute;
  bottom: 7px;
  width: 100%;
  text-align: center;
  animation: WardSkinNameAnimation 0.763s;
}
.ward-skin-select-flyout .ward-skins {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  box-sizing: border-box;
  width: calc(100% - 16px);
  animation: WardSkinAnimation 0.633s;
  -webkit-user-select: none;
  margin: 16px 8px;
  padding-left: 12px;
}
.ward-skin-select-flyout .ward-skins .flyout-selector-button-container {
  padding: 2px;
}
.ward-skin-select-flyout .ward-skins .flyout-selector-button-container .flyout-selector-button {
  box-shadow: 0 0 2px 0 #000 inset;
  background: #1e2328;
}
.ward-skin-select-flyout .ward-skins .flyout-selector-button-container .flyout-selector-button .flyout-selector-button-image {
  box-sizing: border-box;
  padding: 3px;
}
.no-large-area-animations .ward-skins {
  animation: none;
}
.no-large-area-animations .ward-skin-details {
  animation: none;
}
@-moz-keyframes WardSkinAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    top: 21px;
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 16.153241579493056px;
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes WardSkinAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    top: 21px;
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 16.153241579493056px;
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 0px;
    opacity: 1;
  }
}
@-o-keyframes WardSkinAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    top: 21px;
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 16.153241579493056px;
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 0px;
    opacity: 1;
  }
}
@keyframes WardSkinAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    top: 21px;
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 16.153241579493056px;
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    top: 0px;
    opacity: 1;
  }
}
@-moz-keyframes WardSkinDetailsAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 1;
  }
}
@-webkit-keyframes WardSkinDetailsAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 1;
  }
}
@-o-keyframes WardSkinDetailsAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 1;
  }
}
@keyframes WardSkinDetailsAnimation {
  0% {
    animation-timing-function: cubic-bezier(0.0001, 0, 0.9999, 0);
    opacity: 0;
  }
  31.579% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0.4;
  }
  100% {
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 1;
  }
}
@-moz-keyframes WardSkinNameAnimation {
  0% {
    bottom: 0px;
    opacity: 0;
  }
  21.214802144095852% {
    bottom: 0px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  84.24335960901782% {
    bottom: 7px;
    opacity: 1;
  }
  100% {
    bottom: 7px;
    opacity: 1;
  }
}
@-webkit-keyframes WardSkinNameAnimation {
  0% {
    bottom: 0px;
    opacity: 0;
  }
  21.214802144095852% {
    bottom: 0px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  84.24335960901782% {
    bottom: 7px;
    opacity: 1;
  }
  100% {
    bottom: 7px;
    opacity: 1;
  }
}
@-o-keyframes WardSkinNameAnimation {
  0% {
    bottom: 0px;
    opacity: 0;
  }
  21.214802144095852% {
    bottom: 0px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  84.24335960901782% {
    bottom: 7px;
    opacity: 1;
  }
  100% {
    bottom: 7px;
    opacity: 1;
  }
}
@keyframes WardSkinNameAnimation {
  0% {
    bottom: 0px;
    opacity: 0;
  }
  21.214802144095852% {
    bottom: 0px;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
  }
  84.24335960901782% {
    bottom: 7px;
    opacity: 1;
  }
  100% {
    bottom: 7px;
    opacity: 1;
  }
}
.ward-skin-container {
  display: inline-block;
  margin: 0 5px;
  width: 37px;
  height: 37px;
}
.ward-skin-container .flyout-selector-trigger-button {
  width: 37px;
  height: 37px;
  margin: 0;
}
.ward-skin-container .flyout-selector-trigger-button.disabled {
  -webkit-filter: brightness(75%);
}
.ward-skin-container .flyout-selector-trigger-button .selection-button-image {
  width: 37px;
  height: 37px;
  background-size: contain;
  object-fit: contain;
}
.new-selection-icon.ward-skin,
.old-selection-icon.ward-skin {
  width: 39px;
  height: 39px;
  border: 1px solid #3c3c41;
}
.new-selection-icon.ward-skin .icon-wrapper .selection-icon-img,
.old-selection-icon.ward-skin .icon-wrapper .selection-icon-img {
  background-size: contain;
  display: block;
  object-fit: contain;
}
.vote-reveal-text,
.vote-reveal-text-glow,
.vote-reveal-champion-name {
  font-family: var(--font-display);
}
.vote-reveal-text,
.vote-reveal-text-glow,
.vote-reveal-champion-name {
  -webkit-user-select: none;
}
.vote-reveal-text,
.vote-reveal-text-glow,
.vote-reveal-champion-name {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}
.vote-reveal-text,
.vote-reveal-text-glow,
.vote-reveal-champion-name {
  text-transform: uppercase;
}
.vote-reveal-text:lang(ko-kr),
.vote-reveal-text-glow:lang(ko-kr),
.vote-reveal-champion-name:lang(ko-kr),
.vote-reveal-text:lang(ja-jp),
.vote-reveal-text-glow:lang(ja-jp),
.vote-reveal-champion-name:lang(ja-jp),
.vote-reveal-text:lang(tr-tr),
.vote-reveal-text-glow:lang(tr-tr),
.vote-reveal-champion-name:lang(tr-tr),
.vote-reveal-text:lang(el-gr),
.vote-reveal-text-glow:lang(el-gr),
.vote-reveal-champion-name:lang(el-gr),
.vote-reveal-text:lang(th-th),
.vote-reveal-text-glow:lang(th-th),
.vote-reveal-champion-name:lang(th-th),
.vote-reveal-text:lang(zh-tw),
.vote-reveal-text-glow:lang(zh-tw),
.vote-reveal-champion-name:lang(zh-tw) {
  text-transform: none;
}
.vote-reveal-champion-name {
  color: #f0e6d2;
  font-size: 30px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.05em;
}
.vote-reveal-text,
.vote-reveal-text-glow {
  color: #f0e6d2;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.05em;
}
.vote-reveal {
  position: absolute;
  width: 400px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 440px;
  text-align: center;
}
.vote-reveal-text,
.vote-reveal-text-glow {
  color: #0596aa;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.vote-reveal-champion-name {
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.text-glow {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 0 0 8px #fff, 0 0 10px #fff;
  opacity: 0;
}
.vote-reveal-champion-name-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.vote-reveal-champion-name-wrapper .vote-reveal-champion-name-text {
  position: relative;
}
.vote-reveal-champion-name-wrapper .line {
  width: 50%;
  height: 2px;
  flex: 1 0;
}
.vote-reveal-champion-name-wrapper .line.line-left {
  background: linear-gradient(to left, rgba(0,0,0,0) 0, #785a28 50%);
}
.vote-reveal-champion-name-wrapper .line.line-right {
  background: linear-gradient(to right, rgba(0,0,0,0) 0, #785a28 50%);
}
.vote-reveal.visible .text-glow {
  animation-name: fadeOut1to0;
  animation-duration: 0.7s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.7, 0.21, 0.68, 0.77);
}
.vote-reveal.visible .vote-reveal-label {
  animation-name: scaleDownTextIntro, fadeIn0to1;
  animation-duration: 0.4s;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(1, 0, 1, 1), linear;
}
@-moz-keyframes scaleDownTextIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes scaleDownTextIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes scaleDownTextIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleDownTextIntro {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut1to0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn0to1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJjaGFtcC1zZWxlY3QuY3NzIiwic291cmNlUm9vdCI6IiJ9*/