.rcp-fe-lol-clash-login-modal-dialog lol-uikit-flat-button-group { --flat-button-group-background-color: transparent; } .clash-invite-dialog .clash-invite-dialog-max-tier-subtitle, .clash-invite-dialog .search-error, .clash-invite-dialog .selected-count { font-family: var(--font-body); } .clash-invite-dialog .clash-invite-dialog-max-tier-subtitle, .clash-invite-dialog .search-error, .clash-invite-dialog .selected-count { -webkit-user-select: none; } .clash-invite-dialog .clash-invite-dialog-max-tier-subtitle, .clash-invite-dialog .search-error, .clash-invite-dialog .selected-count { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-invite-dialog .clash-invite-dialog-max-tier-subtitle, .clash-invite-dialog .selected-count { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-invite-dialog .clash-invite-dialog-max-tier-subtitle:lang(ar-ae), .clash-invite-dialog .selected-count:lang(ar-ae) { letter-spacing: 0; } .clash-invite-dialog .search-error { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-invite-dialog .search-error:lang(ja-jp) { font-size: 13px; } .clash-invite-dialog .search-error:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-invite-dialog .search-box-container .search { border: 0; color: transparent; cursor: pointer; transition: -webkit-filter $transitionSpeed; font: 0/0 a; outline: none; text-shadow: none; } .clash-invite-dialog .search-box-container .search:hover { filter: brightness(1.3); } .clash-invite-dialog .search-box-container .search.disabled, .clash-invite-dialog .search-box-container .search.disabled:hover { filter: brightness(0.5); cursor: default; } .clash-invite-dialog { height: 590px; width: 420px; display: flex; flex-direction: column; -webkit-user-select: none; cursor: default; position: relative; text-align: left ; } .clash-invite-dialog .clash-invite-dialog-header { display: flex; flex-direction: column; margin-bottom: 6px; } .clash-invite-dialog .clash-invite-dialog-max-tier-subtitle { margin: 5px 0; } .clash-invite-dialog .clash-invite-dialog-container { width: 100%; height: 537px; padding: 11px 0px 19px 19px; box-sizing: border-box; } .clash-invite-dialog .search-box-container { display: flex; margin: 4px 0 5px; } .clash-invite-dialog .search-box-container.not-found { animation: shake-horizontal 250ms; } .clash-invite-dialog .search-box-container .search-box-input { width: 379px; height: 26px; } .clash-invite-dialog .search-box-container .search { background-size: contain; vertical-align: middle; display: inline-block; min-width: 31px; min-height: 30px; margin-top: -2px; } .clash-invite-dialog .search-error { color: #be1e37; } .clash-invite-dialog .remaining-invite-icons-container { display: flex; width: 379px; justify-content: center; align-items: center; } .clash-invite-dialog .remaining-invite-icons-container .remaining-invite-hr { width: 22px; height: 2px; margin-left: 20px; margin-right: 20px; background-color: #785a28; border: none; } .clash-invite-dialog .remaining-invite-icons-container .remaining-invite-icon { width: 24px; height: 24px; } .clash-invite-dialog .groups { width: 379px; margin-bottom: 40px; } .clash-invite-dialog .selected-count { direction: ltr; display: flex; align-items: center; justify-content: center; padding: 0 20px; } .clash-invite-dialog .selected-count-item { margin: 0 5px; pointer-events: none; } .clash-invite-dialog .selected-count-decoration { height: 1px; flex: 1; margin: 0 5px; background: rgba(255,255,255,0.22); } .clash-invite-dialog lol-uikit-scrollable { height: 478px; will-change: inherit; } @-moz-keyframes shake-horizontal { 0% { transform: translate(0px, 0px); } 2% { transform: translate(-4px, 0px); } 4% { transform: translate(2px, 0px); } 6% { transform: translate(-3px, 0px); } 8% { transform: translate(9px, 0px); } 10% { transform: translate(2px, 0px); } 12% { transform: translate(-6px, 0px); } 14% { transform: translate(-7px, 0px); } 16% { transform: translate(2px, 0px); } 18% { transform: translate(7px, 0px); } 20% { transform: translate(-1px, 0px); } 22% { transform: translate(-10px, 0px); } 24% { transform: translate(-10px, 0px); } 26% { transform: translate(3px, 0px); } 28% { transform: translate(-5px, 0px); } 30% { transform: translate(4px, 0px); } 32% { transform: translate(-6px, 0px); } 34% { transform: translate(-2px, 0px); } 36% { transform: translate(-6px, 0px); } 38% { transform: translate(-2px, 0px); } 40% { transform: translate(4px, 0px); } 42% { transform: translate(8px, 0px); } 44% { transform: translate(-3px, 0px); } 46% { transform: translate(-10px, 0px); } 48% { transform: translate(4px, 0px); } 50% { transform: translate(-6px, 0px); } 52% { transform: translate(6px, 0px); } 54% { transform: translate(-8px, 0px); } 56% { transform: translate(5px, 0px); } 58% { transform: translate(9px, 0px); } 60% { transform: translate(7px, 0px); } 62% { transform: translate(1px, 0px); } 64% { transform: translate(2px, 0px); } 66% { transform: translate(-2px, 0px); } 68% { transform: translate(-7px, 0px); } 70% { transform: translate(-1px, 0px); } 72% { transform: translate(-6px, 0px); } 74% { transform: translate(5px, 0px); } 76% { transform: translate(0px, 0px); } 78% { transform: translate(9px, 0px); } 80% { transform: translate(-3px, 0px); } 82% { transform: translate(8px, 0px); } 84% { transform: translate(-2px, 0px); } 86% { transform: translate(-1px, 0px); } 88% { transform: translate(-3px, 0px); } 90% { transform: translate(4px, 0px); } 92% { transform: translate(0px, 0px); } 94% { transform: translate(4px, 0px); } 96% { transform: translate(2px, 0px); } 98% { transform: translate(-2px, 0px); } } @-webkit-keyframes shake-horizontal { 0% { transform: translate(0px, 0px); } 2% { transform: translate(-4px, 0px); } 4% { transform: translate(2px, 0px); } 6% { transform: translate(-3px, 0px); } 8% { transform: translate(9px, 0px); } 10% { transform: translate(2px, 0px); } 12% { transform: translate(-6px, 0px); } 14% { transform: translate(-7px, 0px); } 16% { transform: translate(2px, 0px); } 18% { transform: translate(7px, 0px); } 20% { transform: translate(-1px, 0px); } 22% { transform: translate(-10px, 0px); } 24% { transform: translate(-10px, 0px); } 26% { transform: translate(3px, 0px); } 28% { transform: translate(-5px, 0px); } 30% { transform: translate(4px, 0px); } 32% { transform: translate(-6px, 0px); } 34% { transform: translate(-2px, 0px); } 36% { transform: translate(-6px, 0px); } 38% { transform: translate(-2px, 0px); } 40% { transform: translate(4px, 0px); } 42% { transform: translate(8px, 0px); } 44% { transform: translate(-3px, 0px); } 46% { transform: translate(-10px, 0px); } 48% { transform: translate(4px, 0px); } 50% { transform: translate(-6px, 0px); } 52% { transform: translate(6px, 0px); } 54% { transform: translate(-8px, 0px); } 56% { transform: translate(5px, 0px); } 58% { transform: translate(9px, 0px); } 60% { transform: translate(7px, 0px); } 62% { transform: translate(1px, 0px); } 64% { transform: translate(2px, 0px); } 66% { transform: translate(-2px, 0px); } 68% { transform: translate(-7px, 0px); } 70% { transform: translate(-1px, 0px); } 72% { transform: translate(-6px, 0px); } 74% { transform: translate(5px, 0px); } 76% { transform: translate(0px, 0px); } 78% { transform: translate(9px, 0px); } 80% { transform: translate(-3px, 0px); } 82% { transform: translate(8px, 0px); } 84% { transform: translate(-2px, 0px); } 86% { transform: translate(-1px, 0px); } 88% { transform: translate(-3px, 0px); } 90% { transform: translate(4px, 0px); } 92% { transform: translate(0px, 0px); } 94% { transform: translate(4px, 0px); } 96% { transform: translate(2px, 0px); } 98% { transform: translate(-2px, 0px); } } @-o-keyframes shake-horizontal { 0% { transform: translate(0px, 0px); } 2% { transform: translate(-4px, 0px); } 4% { transform: translate(2px, 0px); } 6% { transform: translate(-3px, 0px); } 8% { transform: translate(9px, 0px); } 10% { transform: translate(2px, 0px); } 12% { transform: translate(-6px, 0px); } 14% { transform: translate(-7px, 0px); } 16% { transform: translate(2px, 0px); } 18% { transform: translate(7px, 0px); } 20% { transform: translate(-1px, 0px); } 22% { transform: translate(-10px, 0px); } 24% { transform: translate(-10px, 0px); } 26% { transform: translate(3px, 0px); } 28% { transform: translate(-5px, 0px); } 30% { transform: translate(4px, 0px); } 32% { transform: translate(-6px, 0px); } 34% { transform: translate(-2px, 0px); } 36% { transform: translate(-6px, 0px); } 38% { transform: translate(-2px, 0px); } 40% { transform: translate(4px, 0px); } 42% { transform: translate(8px, 0px); } 44% { transform: translate(-3px, 0px); } 46% { transform: translate(-10px, 0px); } 48% { transform: translate(4px, 0px); } 50% { transform: translate(-6px, 0px); } 52% { transform: translate(6px, 0px); } 54% { transform: translate(-8px, 0px); } 56% { transform: translate(5px, 0px); } 58% { transform: translate(9px, 0px); } 60% { transform: translate(7px, 0px); } 62% { transform: translate(1px, 0px); } 64% { transform: translate(2px, 0px); } 66% { transform: translate(-2px, 0px); } 68% { transform: translate(-7px, 0px); } 70% { transform: translate(-1px, 0px); } 72% { transform: translate(-6px, 0px); } 74% { transform: translate(5px, 0px); } 76% { transform: translate(0px, 0px); } 78% { transform: translate(9px, 0px); } 80% { transform: translate(-3px, 0px); } 82% { transform: translate(8px, 0px); } 84% { transform: translate(-2px, 0px); } 86% { transform: translate(-1px, 0px); } 88% { transform: translate(-3px, 0px); } 90% { transform: translate(4px, 0px); } 92% { transform: translate(0px, 0px); } 94% { transform: translate(4px, 0px); } 96% { transform: translate(2px, 0px); } 98% { transform: translate(-2px, 0px); } } @keyframes shake-horizontal { 0% { transform: translate(0px, 0px); } 2% { transform: translate(-4px, 0px); } 4% { transform: translate(2px, 0px); } 6% { transform: translate(-3px, 0px); } 8% { transform: translate(9px, 0px); } 10% { transform: translate(2px, 0px); } 12% { transform: translate(-6px, 0px); } 14% { transform: translate(-7px, 0px); } 16% { transform: translate(2px, 0px); } 18% { transform: translate(7px, 0px); } 20% { transform: translate(-1px, 0px); } 22% { transform: translate(-10px, 0px); } 24% { transform: translate(-10px, 0px); } 26% { transform: translate(3px, 0px); } 28% { transform: translate(-5px, 0px); } 30% { transform: translate(4px, 0px); } 32% { transform: translate(-6px, 0px); } 34% { transform: translate(-2px, 0px); } 36% { transform: translate(-6px, 0px); } 38% { transform: translate(-2px, 0px); } 40% { transform: translate(4px, 0px); } 42% { transform: translate(8px, 0px); } 44% { transform: translate(-3px, 0px); } 46% { transform: translate(-10px, 0px); } 48% { transform: translate(4px, 0px); } 50% { transform: translate(-6px, 0px); } 52% { transform: translate(6px, 0px); } 54% { transform: translate(-8px, 0px); } 56% { transform: translate(5px, 0px); } 58% { transform: translate(9px, 0px); } 60% { transform: translate(7px, 0px); } 62% { transform: translate(1px, 0px); } 64% { transform: translate(2px, 0px); } 66% { transform: translate(-2px, 0px); } 68% { transform: translate(-7px, 0px); } 70% { transform: translate(-1px, 0px); } 72% { transform: translate(-6px, 0px); } 74% { transform: translate(5px, 0px); } 76% { transform: translate(0px, 0px); } 78% { transform: translate(9px, 0px); } 80% { transform: translate(-3px, 0px); } 82% { transform: translate(8px, 0px); } 84% { transform: translate(-2px, 0px); } 86% { transform: translate(-1px, 0px); } 88% { transform: translate(-3px, 0px); } 90% { transform: translate(4px, 0px); } 92% { transform: translate(0px, 0px); } 94% { transform: translate(4px, 0px); } 96% { transform: translate(2px, 0px); } 98% { transform: translate(-2px, 0px); } } .clash-invite-dialog-group .header, .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier { font-family: var(--font-display); } .clash-invite-dialog-group .invite-dialog-friend { font-family: var(--font-body); } .clash-invite-dialog-group .header, .clash-invite-dialog-group .invite-dialog-friend, .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier { -webkit-user-select: none; } .clash-invite-dialog-group .header, .clash-invite-dialog-group .invite-dialog-friend, .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-invite-dialog-group .header, .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier { text-transform: uppercase; } .clash-invite-dialog-group .header:lang(ko-kr), .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier:lang(ko-kr), .clash-invite-dialog-group .header:lang(ja-jp), .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier:lang(ja-jp), .clash-invite-dialog-group .header:lang(tr-tr), .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier:lang(tr-tr), .clash-invite-dialog-group .header:lang(el-gr), .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier:lang(el-gr), .clash-invite-dialog-group .header:lang(th-th), .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier:lang(th-th), .clash-invite-dialog-group .header:lang(zh-tw), .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier:lang(zh-tw) { text-transform: none; } .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier:lang(ar-ae) { letter-spacing: 0; } .clash-invite-dialog-group .header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-invite-dialog-group .header:lang(ja-jp) { font-size: 13px; } .clash-invite-dialog-group .header:lang(ar-ae) { letter-spacing: 0; } .clash-invite-dialog-group .header { color: #a09b8c; } .clash-invite-dialog-group .invite-dialog-friend { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-invite-dialog-group .invite-dialog-friend:lang(ja-jp) { font-size: 13px; } .clash-invite-dialog-group .invite-dialog-friend:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-invite-dialog-group { margin-bottom: 4px; } .clash-invite-dialog-group .header { display: flex; align-items: center; padding: 0.25em 0.1em; cursor: pointer; background-color: #1d2126; transition: color 150ms ease-out; } .clash-invite-dialog-group .header:hover { color: #f0e6d2; } .clash-invite-dialog-group .header::before { content: ''; border-top: 3.464px solid transparent; border-bottom: 3.464px solid transparent; border-left: 4px solid #a09b8c; transform: rotate(0deg) ; margin: 6px 10px; } .clash-invite-dialog-group .invite-dialog-friend { height: 0; opacity: 0; display: flex; align-items: center; transition: height 150ms ease-out; overflow: hidden; white-space: nowrap; } .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox { width: 100%; height: 100%; } .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox label { width: 100%; } .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper { float: right ; } .clash-invite-dialog-group .invite-dialog-friend .invite-dialog-friend-checkbox .clash-tier-wrapper .clash-tier { font-size: 12px; background: #a09b8c; color: #000; padding: 0 4px; border-radius: 3px; min-width: 50px; text-align: center; } .clash-invite-dialog-group .invite-dialog-friend:hover { color: #f0e6d2; } .clash-invite-dialog-group .invite-dialog-friend:hover::before { background-image: url("$checkboxHoverImage"); } .clash-invite-dialog-group.expanded .invite-dialog-friend { height: 45px; padding-top: 5px; opacity: 1; } .clash-invite-dialog-group.expanded .header::before { transform: rotate(90deg); } .clash-thirdparty-group .header { font-family: var(--font-display); } .clash-thirdparty-group .invite-dialog-friend { font-family: var(--font-body); } .clash-thirdparty-group .header, .clash-thirdparty-group .invite-dialog-friend { -webkit-user-select: none; } .clash-thirdparty-group .header, .clash-thirdparty-group .invite-dialog-friend { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-thirdparty-group .header { text-transform: uppercase; } .clash-thirdparty-group .header:lang(ko-kr), .clash-thirdparty-group .header:lang(ja-jp), .clash-thirdparty-group .header:lang(tr-tr), .clash-thirdparty-group .header:lang(el-gr), .clash-thirdparty-group .header:lang(th-th), .clash-thirdparty-group .header:lang(zh-tw) { text-transform: none; } .clash-thirdparty-group .header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-thirdparty-group .header:lang(ja-jp) { font-size: 13px; } .clash-thirdparty-group .header:lang(ar-ae) { letter-spacing: 0; } .clash-thirdparty-group .header { color: #a09b8c; } .clash-thirdparty-group .invite-dialog-friend { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-thirdparty-group .invite-dialog-friend:lang(ja-jp) { font-size: 13px; } .clash-thirdparty-group .invite-dialog-friend:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-thirdparty-group { margin-bottom: 4px; } .clash-thirdparty-group .header { display: flex; align-items: center; padding: 0.25em 0.1em; cursor: pointer; background-color: #1d2126; transition: color 150ms ease-out; } .clash-thirdparty-group .header:hover { color: #f0e6d2; } .clash-thirdparty-group .header::before { content: ''; border-top: 3.464px solid transparent; border-bottom: 3.464px solid transparent; border-left: 4px solid #a09b8c; transform: rotate(0deg); margin: 6px 10px; } .clash-thirdparty-group .invite-dialog-friend { height: 0; opacity: 0; cursor: pointer; display: flex; align-items: center; padding-left: 1rem; transition: height 150ms ease-out; overflow: hidden; white-space: nowrap; } .clash-thirdparty-group .invite-dialog-friend .invite-dialog-friend-checkbox { width: 100%; height: 100%; } .clash-thirdparty-group .invite-dialog-friend:hover { color: #f0e6d2; } .clash-thirdparty-group .invite-dialog-friend:hover::before { background-image: url("$checkboxHoverImage"); } .clash-thirdparty-group.expanded .invite-dialog-friend { height: 41px; opacity: 1; } .clash-thirdparty-group.expanded .header::before { transform: rotate(90deg); } .clash-lft-group .header { font-family: var(--font-display); } .clash-lft-group .invite-dialog-friend { font-family: var(--font-body); } .clash-lft-group .header, .clash-lft-group .invite-dialog-friend { -webkit-user-select: none; } .clash-lft-group .header, .clash-lft-group .invite-dialog-friend { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-lft-group .header { text-transform: uppercase; } .clash-lft-group .header:lang(ko-kr), .clash-lft-group .header:lang(ja-jp), .clash-lft-group .header:lang(tr-tr), .clash-lft-group .header:lang(el-gr), .clash-lft-group .header:lang(th-th), .clash-lft-group .header:lang(zh-tw) { text-transform: none; } .clash-lft-group .header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-lft-group .header:lang(ja-jp) { font-size: 13px; } .clash-lft-group .header:lang(ar-ae) { letter-spacing: 0; } .clash-lft-group .header { color: #a09b8c; } .clash-lft-group .invite-dialog-friend { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-lft-group .invite-dialog-friend:lang(ja-jp) { font-size: 13px; } .clash-lft-group .invite-dialog-friend:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-lft-group { margin-bottom: 4px; } .clash-lft-group .header { display: flex; align-items: center; padding: 0.25em 0.1em; cursor: pointer; background-color: #1d2126; transition: color 150ms ease-out; position: relative; } .clash-lft-group .header:hover { color: #f0e6d2; } .clash-lft-group .header::before { content: ''; border-top: 3.464px solid transparent; border-bottom: 3.464px solid transparent; border-left: 4px solid #a09b8c; transform: rotate(0deg); margin: 6px 10px; } .clash-lft-group .header .expand-button-hitbox { position: absolute; width: 85%; height: 100%; } .clash-lft-group .header .header-title { width: 100%; } .clash-lft-group .header .refresh-button { position: absolute; right: 30px; height: 14px; width: 14px; } .clash-lft-group .invite-dialog-friend { height: 0; opacity: 0; display: flex; align-items: center; transition: height 150ms ease-out; overflow: hidden; white-space: nowrap; } .clash-lft-group.expanded .invite-dialog-friend { height: 45px; padding-top: 5px; opacity: 1; } .clash-lft-group.expanded .header::before { transform: rotate(90deg); } .clash-suggested-group .header { font-family: var(--font-display); } .clash-suggested-group .invite-dialog-friend { font-family: var(--font-body); } .clash-suggested-group .header, .clash-suggested-group .invite-dialog-friend { -webkit-user-select: none; } .clash-suggested-group .header, .clash-suggested-group .invite-dialog-friend { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-suggested-group .header { text-transform: uppercase; } .clash-suggested-group .header:lang(ko-kr), .clash-suggested-group .header:lang(ja-jp), .clash-suggested-group .header:lang(tr-tr), .clash-suggested-group .header:lang(el-gr), .clash-suggested-group .header:lang(th-th), .clash-suggested-group .header:lang(zh-tw) { text-transform: none; } .clash-suggested-group .header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-suggested-group .header:lang(ja-jp) { font-size: 13px; } .clash-suggested-group .header:lang(ar-ae) { letter-spacing: 0; } .clash-suggested-group .header { color: #a09b8c; } .clash-suggested-group .invite-dialog-friend { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-suggested-group .invite-dialog-friend:lang(ja-jp) { font-size: 13px; } .clash-suggested-group .invite-dialog-friend:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-suggested-group { margin-bottom: 4px; } .clash-suggested-group .header { display: flex; align-items: center; padding: 0.25em 0.1em; cursor: pointer; background-color: #1d2126; transition: color 150ms ease-out; } .clash-suggested-group .header:hover { color: #f0e6d2; } .clash-suggested-group .header::before { content: ''; border-top: 3.464px solid transparent; border-bottom: 3.464px solid transparent; border-left: 4px solid #a09b8c; transform: rotate(0deg); margin: 6px 10px; } .clash-suggested-group .invite-dialog-friend { height: 0; opacity: 0; display: flex; align-items: center; transition: height 150ms ease-out; overflow: hidden; white-space: nowrap; } .clash-suggested-group.expanded .invite-dialog-friend { height: 45px; padding-top: 5px; opacity: 1; } .clash-suggested-group.expanded .header::before { transform: rotate(90deg); } .clash-pending-group .header { font-family: var(--font-display); } .clash-pending-group .invite-dialog-friend { font-family: var(--font-body); } .clash-pending-group .header, .clash-pending-group .invite-dialog-friend { -webkit-user-select: none; } .clash-pending-group .header, .clash-pending-group .invite-dialog-friend { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-pending-group .header { text-transform: uppercase; } .clash-pending-group .header:lang(ko-kr), .clash-pending-group .header:lang(ja-jp), .clash-pending-group .header:lang(tr-tr), .clash-pending-group .header:lang(el-gr), .clash-pending-group .header:lang(th-th), .clash-pending-group .header:lang(zh-tw) { text-transform: none; } .clash-pending-group .header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-pending-group .header:lang(ja-jp) { font-size: 13px; } .clash-pending-group .header:lang(ar-ae) { letter-spacing: 0; } .clash-pending-group .header { color: #a09b8c; } .clash-pending-group .invite-dialog-friend { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-pending-group .invite-dialog-friend:lang(ja-jp) { font-size: 13px; } .clash-pending-group .invite-dialog-friend:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-pending-group { margin-bottom: 4px; } .clash-pending-group .header { display: flex; align-items: center; padding: 0.25em 0.1em; cursor: pointer; background-color: #1d2126; transition: color 150ms ease-out; } .clash-pending-group .header:hover { color: #f0e6d2; } .clash-pending-group .header::before { content: ''; border-top: 3.464px solid transparent; border-bottom: 3.464px solid transparent; border-left: 4px solid #a09b8c; transform: rotate(0deg); margin: 6px 10px; } .clash-pending-group .invite-dialog-friend { height: 0; opacity: 0; display: flex; align-items: center; transition: height 150ms ease-out; overflow: hidden; white-space: nowrap; } .clash-pending-group.expanded .invite-dialog-friend { height: 45px; padding-top: 5px; opacity: 1; } .clash-pending-group.expanded .header::before { transform: rotate(90deg); } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name, .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier, .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text { font-family: var(--font-display); } .clash-summoner-display .summoner-details-container, .clash-summoner-display .buttons-container .clash-status-text { font-family: var(--font-body); } .clash-summoner-display .summoner-details-container, .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name, .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier, .clash-summoner-display .buttons-container .clash-status-text, .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text { -webkit-user-select: none; } .clash-summoner-display .summoner-details-container, .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name, .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier, .clash-summoner-display .buttons-container .clash-status-text, .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name, .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier, .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text { text-transform: uppercase; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name:lang(ko-kr), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier:lang(ko-kr), .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text:lang(ko-kr), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name:lang(ja-jp), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier:lang(ja-jp), .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text:lang(ja-jp), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name:lang(tr-tr), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier:lang(tr-tr), .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text:lang(tr-tr), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name:lang(el-gr), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier:lang(el-gr), .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text:lang(el-gr), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name:lang(th-th), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier:lang(th-th), .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text:lang(th-th), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name:lang(zh-tw), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier:lang(zh-tw), .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text:lang(zh-tw) { text-transform: none; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name { text-transform: none; } .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text:lang(ar-ae) { letter-spacing: 0; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name, .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name:lang(ja-jp), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier:lang(ja-jp) { font-size: 13px; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name:lang(ar-ae), .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier:lang(ar-ae) { letter-spacing: 0; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name { letter-spacing: 0.0375em; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name:lang(ar-ae) { letter-spacing: 0; } .clash-summoner-display .buttons-container .clash-status-text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-summoner-display .buttons-container .clash-status-text:lang(ar-ae) { letter-spacing: 0; } .clash-summoner-display .summoner-details-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-summoner-display .summoner-details-container:lang(ja-jp) { font-size: 13px; } .clash-summoner-display .summoner-details-container:lang(ar-ae) { letter-spacing: 0; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name, .clash-summoner-display .summoner-details-container .summoner-subtitle-wrapper .summoner-subtitle, .clash-summoner-display .summoner-details-container .summoner-subtitle-wrapper .summoner-subtitle.highlight { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-summoner-display { display: flex; max-width: 375px; min-width: 375px; height: 45px; margin: 2px; align-items: center; justify-content: flex-start; } .clash-summoner-display .summoner-position-and-icon-container { display: flex; } .clash-summoner-display .summoner-position-and-icon-container .position-roles-container { display: flex; flex-direction: column; justify-content: center; min-width: 16px; } .clash-summoner-display .summoner-position-and-icon-container .position-roles-container .position-icon { height: 16px; width: 16px; background-size: cover; } .clash-summoner-display .summoner-position-and-icon-container .position-roles-container .position-icon[data-position="BOTTOM"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-bottom.png"); } .clash-summoner-display .summoner-position-and-icon-container .position-roles-container .position-icon[data-position="TOP"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-top.png"); } .clash-summoner-display .summoner-position-and-icon-container .position-roles-container .position-icon[data-position="JUNGLE"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-jungle.png"); } .clash-summoner-display .summoner-position-and-icon-container .position-roles-container .position-icon[data-position="MIDDLE"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-middle.png"); } .clash-summoner-display .summoner-position-and-icon-container .position-roles-container .position-icon[data-position="UTILITY"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-utility.png"); } .clash-summoner-display .summoner-position-and-icon-container .position-roles-container .position-icon[data-position="FILL"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-fill.png"); } .clash-summoner-display .summoner-position-and-icon-container .summoner-icon-container { height: 32px; width: 32px; margin: 0 5px; } .clash-summoner-display .summoner-details-container { display: flex; flex-direction: column; justify-content: center; min-width: 60px; padding-right: 10px; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper { display: flex; width: 100%; min-width: 30px; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .summoner-name { min-width: 30px; color: #f0e6d2; margin-right: 5px; } .clash-summoner-display .summoner-details-container .summoner-name-and-tier-wrapper .clash-tier { font-size: 12px; background: #a09b8c; color: #000; padding: 0 4px; border-radius: 4px; text-align: center; } .clash-summoner-display .summoner-details-container .summoner-subtitle-wrapper { display: flex; min-width: 30px; width: 100%; margin-top: 3px; } .clash-summoner-display .summoner-details-container .summoner-subtitle-wrapper .summoner-subtitle { min-width: 30px; flex-shrink: 1; color: #a09b8c; } .clash-summoner-display .summoner-details-container .summoner-subtitle-wrapper .summoner-subtitle.highlight { min-width: 30px; margin-left: 3px; flex-shrink: 1000; color: #c89b3c; } .clash-summoner-display .buttons-container { float: right; display: flex; align-items: center; justify-content: flex-end; padding-right: 7px; margin-left: auto; } .clash-summoner-display .buttons-container .clash-status-icon { width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: 2px solid transparent; background: #010a13; box-shadow: 0 0 0 2px #010a13; margin-top: -1px; } .clash-summoner-display .buttons-container .clash-status-icon.yellow { background-color: #463714; border-color: #c89b3c; } .clash-summoner-display .buttons-container .clash-status-icon.red { border-color: #9c3213; } .clash-summoner-display .buttons-container .clash-status-text { color: #f0e6d2; padding-left: 6px; max-width: 150px; } .clash-summoner-display .buttons-container .clash-status-text.declined { color: #a09b8c; } .clash-summoner-display .buttons-container .clash-vertical-separator { width: 1px; background: #785a28; margin-left: 9px; height: 20px; } .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text { color: #cdbe91; } .clash-summoner-display .buttons-container .clash-invite-accept-button .clash-invite-accept-text.gray { color: #5b5a56; } .clash-summoner-display .buttons-container .clash-invite-decline-button { width: 13px; height: 13px; margin-left: 8px; } .clash-generic-button.match-w, .clash-generic-button.match-w .clash-generic-button-root, .clash-generic-button.match-w .clash-generic-button-state, .clash-generic-button.match-w img { width: 100%; } .clash-generic-button.match-h, .clash-generic-button.match-h .clash-generic-button-root, .clash-generic-button.match-h .clash-generic-button-state, .clash-generic-button.match-h img { height: 100%; } .clash-generic-button.flip-x .clash-generic-button-root .clash-generic-button-state .clash-generic-button-primary-img-container { transform: scaleX(-1); } .clash-generic-button.flip-y .clash-generic-button-root .clash-generic-button-state .clash-generic-button-primary-img-container { transform: scaleY(-1); } .clash-generic-button .clash-generic-button-root { pointer-events: auto; cursor: pointer; } .clash-generic-button .clash-generic-button-root .clash-generic-button-state { position: relative; display: flex; align-items: center; justify-content: center; } .clash-generic-button .clash-generic-button-root .clash-generic-button-state:not(.active) { display: none; } .clash-generic-button .clash-generic-button-root .clash-generic-button-state .clash-generic-button-primary-img-container { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .clash-generic-button .clash-generic-button-root .clash-generic-button-state .clash-generic-button-primary-img-container.has-bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .clash-generic-button .clash-generic-button-root .clash-generic-button-state .clash-generic-button-text { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .clash-generic-button .clash-generic-button-root .clash-generic-button-state .clash-generic-button-custom-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .clash-generic-button .clash-generic-button-root .disabled { cursor: auto; } .clash-login-modal-header-text, .clash-login-modal-section-title { font-family: var(--font-display); } .clash-login-modal-section-description { font-family: var(--font-body); } .clash-login-modal-header-text, .clash-login-modal-section-title, .clash-login-modal-section-description { -webkit-user-select: none; } .clash-login-modal-header-text, .clash-login-modal-section-title, .clash-login-modal-section-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-login-modal-header-text, .clash-login-modal-section-title { text-transform: uppercase; } .clash-login-modal-header-text:lang(ko-kr), .clash-login-modal-section-title:lang(ko-kr), .clash-login-modal-header-text:lang(ja-jp), .clash-login-modal-section-title:lang(ja-jp), .clash-login-modal-header-text:lang(tr-tr), .clash-login-modal-section-title:lang(tr-tr), .clash-login-modal-header-text:lang(el-gr), .clash-login-modal-section-title:lang(el-gr), .clash-login-modal-header-text:lang(th-th), .clash-login-modal-section-title:lang(th-th), .clash-login-modal-header-text:lang(zh-tw), .clash-login-modal-section-title:lang(zh-tw) { text-transform: none; } .clash-login-modal-header-text, .clash-login-modal-section-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-login-modal-header-text:lang(ar-ae), .clash-login-modal-section-title:lang(ar-ae) { letter-spacing: 0; } .clash-login-modal-section-description { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-login-modal-section-description:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-login-modal { direction: ltr; padding: 18px 62px 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: default; background-image: linear-gradient(to bottom, #010a13 0%, rgba(0,148,255,0.05) 100%); } .clash-login-modal-close-button { position: absolute; top: 10px; left: auto ; right: 15px ; height: 14px; width: 14px; } .clash-login-modal-header { direction: ltr ; display: flex; align-items: center; justify-content: center; } .clash-login-modal-header-logo { height: 40px; margin: 0 26px; } .clash-login-modal-header-decoration { height: 5px; } .clash-login-modal-header-decoration.flipped { transform: scaleX(-1); } .clash-login-modal-header-text { margin-top: 14px; } .clash-login-modal-main-content { margin-top: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .clash-login-modal-section { height: 140px; display: flex; align-items: center; justify-content: center; } .clash-login-modal-section-image { height: 100%; width: 163px; display: flex; align-items: center; justify-content: center; } .clash-login-modal-section-image img { height: 100%; } .clash-login-modal-section-text { display: flex; flex-direction: column; margin: 0 0 0 16px ; } .clash-login-modal-section-title { text-align: left ; } .clash-login-modal-section-description { width: 360px; margin-top: 14px; line-height: 22px; } .clash-login-modal-button-glow { position: absolute; bottom: 0; left: 51.5%; transform: translateX(-50%); animation: 4s clash-login-modal-magic-fade-loop linear infinite; opacity: 0; } .clash-login-modal-button-glow.delayed { animation-delay: 2s; } @-moz-keyframes clash-login-modal-magic-fade-loop { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes clash-login-modal-magic-fade-loop { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes clash-login-modal-magic-fade-loop { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes clash-login-modal-magic-fade-loop { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .clash-rewards-modal-display .clash-rewards-modal-title, .clash-rewards-modal-display .clash-rewards-modal-status, .clash-rewards-modal-display .clash-rewards-modal-current-tier, .clash-rewards-modal-display .clash-rewards-modal-vp, .clash-rewards-modal-display .clash-rewards-modal-vp-current, .clash-rewards-modal-display .clash-rewards-modal-vp-previous, .clash-rewards-modal-display .clash-rewards-modal-card-title, .clash-rewards-modal-display .clash-rewards-modal-card-rewards { font-family: var(--font-display); } .clash-rewards-modal-display .clash-rewards-modal-description-text, .clash-rewards-modal-display .clash-rewards-modal-card-text, .clash-rewards-modal-display .clash-rewards-modal-card-bottom-text { font-family: var(--font-body); } .clash-rewards-modal-display .clash-rewards-modal-title, .clash-rewards-modal-display .clash-rewards-modal-description-text, .clash-rewards-modal-display .clash-rewards-modal-status, .clash-rewards-modal-display .clash-rewards-modal-current-tier, .clash-rewards-modal-display .clash-rewards-modal-vp, .clash-rewards-modal-display .clash-rewards-modal-vp-current, .clash-rewards-modal-display .clash-rewards-modal-vp-previous, .clash-rewards-modal-display .clash-rewards-modal-card-title, .clash-rewards-modal-display .clash-rewards-modal-card-rewards, .clash-rewards-modal-display .clash-rewards-modal-card-text, .clash-rewards-modal-display .clash-rewards-modal-card-bottom-text { -webkit-user-select: none; } .clash-rewards-modal-display .clash-rewards-modal-title, .clash-rewards-modal-display .clash-rewards-modal-description-text, .clash-rewards-modal-display .clash-rewards-modal-status, .clash-rewards-modal-display .clash-rewards-modal-current-tier, .clash-rewards-modal-display .clash-rewards-modal-vp, .clash-rewards-modal-display .clash-rewards-modal-vp-current, .clash-rewards-modal-display .clash-rewards-modal-vp-previous, .clash-rewards-modal-display .clash-rewards-modal-card-title, .clash-rewards-modal-display .clash-rewards-modal-card-rewards, .clash-rewards-modal-display .clash-rewards-modal-card-text, .clash-rewards-modal-display .clash-rewards-modal-card-bottom-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-rewards-modal-display .clash-rewards-modal-title, .clash-rewards-modal-display .clash-rewards-modal-status, .clash-rewards-modal-display .clash-rewards-modal-current-tier, .clash-rewards-modal-display .clash-rewards-modal-vp, .clash-rewards-modal-display .clash-rewards-modal-vp-current, .clash-rewards-modal-display .clash-rewards-modal-vp-previous, .clash-rewards-modal-display .clash-rewards-modal-card-title, .clash-rewards-modal-display .clash-rewards-modal-card-rewards { text-transform: uppercase; } .clash-rewards-modal-display .clash-rewards-modal-title:lang(ko-kr), .clash-rewards-modal-display .clash-rewards-modal-status:lang(ko-kr), .clash-rewards-modal-display .clash-rewards-modal-current-tier:lang(ko-kr), .clash-rewards-modal-display .clash-rewards-modal-vp:lang(ko-kr), .clash-rewards-modal-display .clash-rewards-modal-vp-current:lang(ko-kr), .clash-rewards-modal-display .clash-rewards-modal-vp-previous:lang(ko-kr), .clash-rewards-modal-display .clash-rewards-modal-card-title:lang(ko-kr), .clash-rewards-modal-display .clash-rewards-modal-card-rewards:lang(ko-kr), .clash-rewards-modal-display .clash-rewards-modal-title:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-status:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-current-tier:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-vp:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-vp-current:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-vp-previous:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-card-title:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-card-rewards:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-title:lang(tr-tr), .clash-rewards-modal-display .clash-rewards-modal-status:lang(tr-tr), .clash-rewards-modal-display .clash-rewards-modal-current-tier:lang(tr-tr), .clash-rewards-modal-display .clash-rewards-modal-vp:lang(tr-tr), .clash-rewards-modal-display .clash-rewards-modal-vp-current:lang(tr-tr), .clash-rewards-modal-display .clash-rewards-modal-vp-previous:lang(tr-tr), .clash-rewards-modal-display .clash-rewards-modal-card-title:lang(tr-tr), .clash-rewards-modal-display .clash-rewards-modal-card-rewards:lang(tr-tr), .clash-rewards-modal-display .clash-rewards-modal-title:lang(el-gr), .clash-rewards-modal-display .clash-rewards-modal-status:lang(el-gr), .clash-rewards-modal-display .clash-rewards-modal-current-tier:lang(el-gr), .clash-rewards-modal-display .clash-rewards-modal-vp:lang(el-gr), .clash-rewards-modal-display .clash-rewards-modal-vp-current:lang(el-gr), .clash-rewards-modal-display .clash-rewards-modal-vp-previous:lang(el-gr), .clash-rewards-modal-display .clash-rewards-modal-card-title:lang(el-gr), .clash-rewards-modal-display .clash-rewards-modal-card-rewards:lang(el-gr), .clash-rewards-modal-display .clash-rewards-modal-title:lang(th-th), .clash-rewards-modal-display .clash-rewards-modal-status:lang(th-th), .clash-rewards-modal-display .clash-rewards-modal-current-tier:lang(th-th), .clash-rewards-modal-display .clash-rewards-modal-vp:lang(th-th), .clash-rewards-modal-display .clash-rewards-modal-vp-current:lang(th-th), .clash-rewards-modal-display .clash-rewards-modal-vp-previous:lang(th-th), .clash-rewards-modal-display .clash-rewards-modal-card-title:lang(th-th), .clash-rewards-modal-display .clash-rewards-modal-card-rewards:lang(th-th), .clash-rewards-modal-display .clash-rewards-modal-title:lang(zh-tw), .clash-rewards-modal-display .clash-rewards-modal-status:lang(zh-tw), .clash-rewards-modal-display .clash-rewards-modal-current-tier:lang(zh-tw), .clash-rewards-modal-display .clash-rewards-modal-vp:lang(zh-tw), .clash-rewards-modal-display .clash-rewards-modal-vp-current:lang(zh-tw), .clash-rewards-modal-display .clash-rewards-modal-vp-previous:lang(zh-tw), .clash-rewards-modal-display .clash-rewards-modal-card-title:lang(zh-tw), .clash-rewards-modal-display .clash-rewards-modal-card-rewards:lang(zh-tw) { text-transform: none; } .clash-rewards-modal-display .clash-rewards-modal-title, .clash-rewards-modal-display .clash-rewards-modal-card-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-rewards-modal-display .clash-rewards-modal-title:lang(ar-ae), .clash-rewards-modal-display .clash-rewards-modal-card-title:lang(ar-ae) { letter-spacing: 0; } .clash-rewards-modal-display .clash-rewards-modal-status { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-rewards-modal-display .clash-rewards-modal-status:lang(ar-ae) { letter-spacing: 0; } .clash-rewards-modal-display .clash-rewards-modal-current-tier, .clash-rewards-modal-display .clash-rewards-modal-vp, .clash-rewards-modal-display .clash-rewards-modal-vp-current, .clash-rewards-modal-display .clash-rewards-modal-vp-previous, .clash-rewards-modal-display .clash-rewards-modal-card-rewards { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-rewards-modal-display .clash-rewards-modal-current-tier:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-vp:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-vp-current:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-vp-previous:lang(ja-jp), .clash-rewards-modal-display .clash-rewards-modal-card-rewards:lang(ja-jp) { font-size: 13px; } .clash-rewards-modal-display .clash-rewards-modal-current-tier:lang(ar-ae), .clash-rewards-modal-display .clash-rewards-modal-vp:lang(ar-ae), .clash-rewards-modal-display .clash-rewards-modal-vp-current:lang(ar-ae), .clash-rewards-modal-display .clash-rewards-modal-vp-previous:lang(ar-ae), .clash-rewards-modal-display .clash-rewards-modal-card-rewards:lang(ar-ae) { letter-spacing: 0; } .clash-rewards-modal-display .clash-rewards-modal-description-text, .clash-rewards-modal-display .clash-rewards-modal-card-text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-rewards-modal-display .clash-rewards-modal-description-text:lang(ar-ae), .clash-rewards-modal-display .clash-rewards-modal-card-text:lang(ar-ae) { letter-spacing: 0; } .clash-rewards-modal-display .clash-rewards-modal-card-bottom-text { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-rewards-modal-display .clash-rewards-modal-card-bottom-text:lang(ja-jp) { font-size: 13px; } .clash-rewards-modal-display .clash-rewards-modal-card-bottom-text:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-rewards-modal-display .clash-rewards-modal { direction: ltr; width: 912px; height: 639px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: default; background-image: url("/fe/lol-clash/assets/images/rewards-modal/background.png"); } .clash-rewards-modal-display .clash-rewards-modal-close-button { position: absolute; top: 10px; left: auto ; right: 15px ; height: 14px; width: 14px; } .clash-rewards-modal-display .clash-rewards-modal-header { width: 1263px; height: 236px; left: 163px; top: 1269px; } .clash-rewards-modal-display .clash-rewards-trophy-image { left: 49.01%; right: 48.99%; top: 9.71%; bottom: 86.46%; } .clash-rewards-modal-display .clash-rewards-modal-trophy-percent { left: 41.55%; right: 57.63%; top: 15.94%; bottom: 83.78%; } .clash-rewards-modal-display .clash-rewards-modal-title { top: 26px; line-height: 28px; color: #c8aa6e; } .clash-rewards-modal-display .clash-rewards-modal-header-wing { align-items: center; width: 614px; height: 35.31px; left: 148px; display: flex; top: 46px; flex-direction: row; justify-content: space-around; } .clash-rewards-modal-display .clash-rewards-modal-wing-right { left: 100%; top: 100%; bottom: -100%; margin-top: -22px; } .clash-rewards-modal-display .clash-rewards-modal-wing-left { left: 0%; top: 100%; bottom: -100%; transform: matrix(-1, 0, 0, 1, 0, 0); margin-top: -22px; } .clash-rewards-modal-display .clash-rewards-modal-description { width: 762px; height: 131.1px; left: 75px; top: 92px; display: flex; justify-content: space-between; } .clash-rewards-modal-display .clash-rewards-modal-description-text { line-height: 24px; display: flex; align-items: center; width: 476.08px; height: 131.1px; left: 75px; top: 92px; color: #a09b8c; } .clash-rewards-modal-display .clash-rewards-modal-status { width: 261px; height: 88px; align-self: center; justify-content: center; flex-direction: column; display: flex; justify-content: center; text-align: center; color: #a09b8c; border: 1px solid #3c3c41; box-sizing: border-box; background: #010f1c; } .clash-rewards-modal-display .clash-rewards-modal-status-holder { display: flex; flex-direction: row; justify-content: center; line-height: 24px; } .clash-rewards-modal-display .clash-rewards-modal-status-value { color: #c8aa6e; padding-left: 4px; } .clash-rewards-modal-display .clash-rewards-modal-cards { height: 351px; display: flex; flex-direction: row; flex-wrap: nowrap; padding-top: 18px; justify-content: space-between; margin-left: 1890px; transition-property: transform; transition-duration: 0.5s; } .clash-rewards-modal-display .clash-rewards-modal-card-holder { padding-left: 15px; padding-right: 15px; display: flex; flex-direction: column; align-items: center; } .clash-rewards-modal-display .clash-rewards-modal-current-tier-div { height: 22px; justify-items: center; display: flex; flex-direction: column; margin-top: 5px; margin-bottom: -27px; visibility: hidden; position: absolute; } .clash-rewards-modal-display .clash-rewards-modal-current-tier-div-visible { height: 22px; justify-items: center; display: flex; flex-direction: column; margin-top: 5px; margin-bottom: -27px; visibility: visible; position: absolute; } .clash-rewards-modal-display .clash-rewards-modal-current-tier-wing-1 { margin-top: -3px; } .clash-rewards-modal-display .clash-rewards-modal-current-tier-wing-2 { margin-top: -14px; } .clash-rewards-modal-display .clash-rewards-modal-current-tier { line-height: 16px; display: flex; align-items: center; text-align: center; background-color: #c89b3c; width: 240px; height: 18px; margin-top: -26px; padding-top: 4px; padding-bottom: 4px; justify-content: center; color: #1e2328; } .clash-rewards-modal-display .clash-rewards-modal-vp { line-height: 16px; height: 30px; width: 96px; justify-content: center; display: flex; align-items: center; text-align: center; margin-top: 29px; position: relative; background-image: url("/fe/lol-clash/assets/images/rewards-modal/not-yet-achieved.png"); color: #b2d9db; } .clash-rewards-modal-display .clash-rewards-modal-vp-current { line-height: 16px; height: 30px; width: 96px; justify-content: center; display: flex; align-items: center; text-align: center; margin-top: 29px; position: relative; background-image: url("/fe/lol-clash/assets/images/rewards-modal/current-tier.png"); color: #b2d9db; } .clash-rewards-modal-display .clash-rewards-modal-vp-previous { line-height: 16px; height: 30px; width: 96px; justify-content: center; display: flex; align-items: center; text-align: center; margin-top: 29px; position: relative; background-image: url("/fe/lol-clash/assets/images/rewards-modal/previous-tier.png"); color: #b2d9db; } .clash-rewards-modal-display .clash-rewards-modal-single-card-champion { display: flex; flex-direction: column; align-items: center; width: 240px; height: 280px; background-image: url("/fe/lol-clash/assets/images/rewards-modal/champion-container.png"); } .clash-rewards-modal-display .clash-rewards-modal-single-card-conquerer { display: flex; flex-direction: column; align-items: center; width: 240px; height: 280px; background-image: url("/fe/lol-clash/assets/images/rewards-modal/conquerer-container.png"); } .clash-rewards-modal-display .clash-rewards-modal-single-card-contender { display: flex; flex-direction: column; align-items: center; width: 240px; height: 280px; background-image: url("/fe/lol-clash/assets/images/rewards-modal/contender-container.png"); } .clash-rewards-modal-display .clash-rewards-modal-card-title { line-height: 36px; display: flex; align-items: center; text-align: center; color: #f0e6d2; padding-top: 26px; } .clash-rewards-modal-display .clash-rewards-modal-card-rewards { line-height: 16px; display: flex; align-items: center; text-align: center; padding-bottom: 30px; color: #cdbe91; } .clash-rewards-modal-display .clash-rewards-modal-card-text { line-height: 24px; display: flex; flex-direction: row; align-items: center; width: 170px; padding-bottom: 19px; color: #a09b8c; } .clash-rewards-modal-display .clash-rewards-modal-card-icon { left: 0%; top: 100%; bottom: -100%; padding-right: 15px; height: 22px; width: 22px; } .clash-rewards-modal-display .clash-rewards-modal-card-bottom-text { padding-top: 9px; line-height: 16px; display: flex; align-items: center; text-align: center; color: #5b5a56; } .clash-rewards-modal-display .arrow-button-left { height: 66px; width: 66px; position: absolute; bottom: 40%; visibility: visible; } .clash-rewards-modal-display .arrow-button-left-hidden { height: 66px; width: 66px; position: absolute; bottom: 40%; visibility: hidden; } .clash-rewards-modal-display .arrow-button-right { height: 66px; width: 66px; position: absolute; bottom: 40%; visibility: visible; } .clash-rewards-modal-display .arrow-button-right-hidden { height: 66px; width: 66px; position: absolute; bottom: 40%; visibility: hidden; } .clash-rewards-modal-display .side-shadow-left { position: absolute; left: 0px; bottom: 0%; width: 227px; height: 589px; background: url("/fe/lol-clash/assets/images/rewards-modal/side-shadow.png"); } .clash-rewards-modal-display .side-shadow-right { position: absolute; right: 0%; bottom: 0%; width: 227px; height: 589px; background: url("/fe/lol-clash/assets/images/rewards-modal/side-shadow.png"); transform: matrix(-1, 0, 0, 1, 0, 0); } .clash-rewards-modal-display .clash-rewards-modal-bottom-line { height: 4px; width: 270px; margin-left: 270px; position: absolute; margin-top: 322px; background: #0a96aa; outline-color: #a09b8c; outline-width: 0.5px; outline-style: solid; outline-offset: 2px; } .clash-rewards-modal-display .hidden { visibility: hidden; } .clash-rewards-modal-display .clash-rewards-modal-bottom-line-grey { height: 4px; width: 270px; margin-left: 270px; position: absolute; margin-top: 322px; background: #5b5a56; outline-color: #a09b8c; outline-width: 0.5px; outline-style: solid; outline-offset: 2px; } .clash-start-modal-header-text, .clash-start-modal-section-title { font-family: var(--font-display); } .clash-start-modal-subheader-text, .clash-start-modal-section-description { font-family: var(--font-body); } .clash-start-modal-header-text, .clash-start-modal-subheader-text, .clash-start-modal-section-title, .clash-start-modal-section-description { -webkit-user-select: none; } .clash-start-modal-header-text, .clash-start-modal-subheader-text, .clash-start-modal-section-title, .clash-start-modal-section-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-start-modal-header-text, .clash-start-modal-section-title { text-transform: uppercase; } .clash-start-modal-header-text:lang(ko-kr), .clash-start-modal-section-title:lang(ko-kr), .clash-start-modal-header-text:lang(ja-jp), .clash-start-modal-section-title:lang(ja-jp), .clash-start-modal-header-text:lang(tr-tr), .clash-start-modal-section-title:lang(tr-tr), .clash-start-modal-header-text:lang(el-gr), .clash-start-modal-section-title:lang(el-gr), .clash-start-modal-header-text:lang(th-th), .clash-start-modal-section-title:lang(th-th), .clash-start-modal-header-text:lang(zh-tw), .clash-start-modal-section-title:lang(zh-tw) { text-transform: none; } .clash-start-modal-header-text { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .clash-start-modal-header-text:lang(ar-ae) { letter-spacing: 0; } .clash-start-modal-section-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-start-modal-section-title:lang(ar-ae) { letter-spacing: 0; } .clash-start-modal-subheader-text, .clash-start-modal-section-description { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-start-modal-subheader-text:lang(ar-ae), .clash-start-modal-section-description:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-start-modal { direction: ltr; width: 796px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: default; background-image: url("/fe/lol-clash/assets/images/clash-start-modal/background.png"); background-repeat: no-repeat; background-position: top; } .clash-start-modal-close-button { position: absolute; top: 10px; left: auto ; right: 15px ; height: 14px; width: 14px; } .clash-start-modal-header { display: flex; align-items: center; justify-content: center; width: 100%; position: relative; } .clash-start-modal-header-logo { margin-top: 28px; } .clash-start-modal-header-decoration { position: absolute; left: auto; right: -20px; top: 14px; } .clash-start-modal-header-decoration.flipped { transform: scaleX(-1); left: -20px; right: auto; } .clash-start-modal-header-text { margin-top: 5px; } .clash-start-modal-subheader-text { margin-top: 12px; } .clash-start-modal-main-content { margin-top: 25px; display: inline-block; } .clash-start-modal-section { width: 226px; display: inline-block; margin: 0 10px; position: relative; } .clash-start-modal-section-frame { background-position-y: -6px; background-repeat: no-repeat; } .clash-start-modal-section-text { display: flex; flex-direction: column; margin-top: 16px; margin-bottom: 80px; } .clash-start-modal-section-title { text-align: center; } .clash-start-modal-section-description { text-align: center; margin-top: 8px; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-lol-pending-loader { display: flex; align-items: center; justify-content: space-between; width: 16px; box-sizing: border-box; } .clash-lol-pending-loader-segment { display: inline-block; width: 4px; height: 4px; background-color: #f0e6d2; border-radius: 2px; } .clash-lol-pending-loader-segment:nth-of-type(1) { animation: bounceLoader 1s -0.2s ease infinite; } .clash-lol-pending-loader-segment:nth-of-type(2) { animation: bounceLoader 1s -0.1s ease infinite; } .clash-lol-pending-loader-segment:nth-of-type(3) { animation: bounceLoader 1s 0s ease infinite; } @-moz-keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } @-webkit-keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } @-o-keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } @keyframes bounceLoader { 0%, 60% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.4) scaleX(1.4); } } .clash-tier-placement-visual { font-family: var(--font-display); } .clash-tier-placement-visual { -webkit-user-select: none; } .clash-tier-placement-visual { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tier-placement-visual { text-transform: uppercase; } .clash-tier-placement-visual:lang(ko-kr), .clash-tier-placement-visual:lang(ja-jp), .clash-tier-placement-visual:lang(tr-tr), .clash-tier-placement-visual:lang(el-gr), .clash-tier-placement-visual:lang(th-th), .clash-tier-placement-visual:lang(zh-tw) { text-transform: none; } .clash-tier-placement-visual { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-tier-placement-visual:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tier-placement-visual { font-size: 16px ; background: #a09b8c; color: #000; padding: 0 4px 1px ; border-radius: 3px; } .clash-pip-counter .clash-pip-counter-number { font-family: var(--font-body); } .clash-pip-counter .clash-pip-counter-number { -webkit-user-select: none; } .clash-pip-counter .clash-pip-counter-number { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-pip-counter .clash-pip-counter-number { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-pip-counter .clash-pip-counter-number:lang(ja-jp) { font-size: 13px; } .clash-pip-counter .clash-pip-counter-number:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-pip-counter { height: 16px; padding: 0 6px; background: #c89b3c; border-radius: 3px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 250ms linear; } .clash-pip-counter.has-pips { opacity: 1; } .clash-pip-counter .clash-pip-counter-number { font-weight: bold; color: #010a13; margin-top: 1px; } .clash-ticket-display .clash-ticket-display-ticket-count { font-family: var(--font-display); } .clash-ticket-display .clash-ticket-display-ticket-count { -webkit-user-select: none; } .clash-ticket-display .clash-ticket-display-ticket-count { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-ticket-display .clash-ticket-display-ticket-count { color: #a09b8c; font-size: 16px; font-weight: normal; line-height: 24px; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .clash-ticket-display .clash-ticket-display-ticket-count:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-ticket-display { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .clash-ticket-display .clash-ticket-display-ticket-selector { position: relative; height: 100%; display: flex; justify-content: center; align-items: center; } .clash-ticket-display .clash-ticket-display-img { height: 100%; } .clash-ticket-display .clash-ticket-offer-container-local { position: absolute; height: 100%; } .clash-ticket-display .clash-ticket-display-ticket-count { font-size: 13px; font-weight: 900; pointer-events: none; } .clash-ticket-display .clash-ticket-display-ticket-count.is-animating { visibility: hidden; } .clash-ticket-display.ticket-display-remote .clash-ticket-display-ticket-count { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; } .clash-ticket-display.ticket-display-local .clash-ticket-display-ticket-count { height: 100%; } .clash-ticket-display.ticket-display-local .clash-ticket-display-ticket-count .clash-generic-button-root .clash-generic-button-text { font-size: 22px; margin-bottom: 3px; pointer-events: none; } .clash-ticket-display .clash-ticket-display-ticket-count.ctd-selected, .clash-ticket-display.ticket-display-local .clash-ticket-display-ticket-count.ctd-selected .clash-generic-button-root .clash-generic-button-text { color: #2c220e; } .clash-ticket-display .clash-ticket-display-ticket-count.ctd-lockedin, .clash-ticket-display.ticket-display-local .clash-ticket-display-ticket-count.ctd-lockedin .clash-generic-button-root .clash-generic-button-text, .clash-ticket-display.ticket-display-local .clash-ticket-display-ticket-count.ctd-buyin-0-disabled .clash-generic-button-root .clash-generic-button-text { color: #1d1609; } .clash-ticket-display.ticket-display-local .clash-ticket-display-ticket-count.ctd-buyin-0 .clash-generic-button-root .clash-generic-button-text, .clash-ticket-display.ticket-display-local .clash-ticket-display-ticket-count.ctd-selected .clash-generic-button-root .clash-generic-button-state.over .clash-generic-button-text { color: #b2d9db; } .clash-ticket-display .clash-ticket-display-multi-bg { position: absolute; height: 100%; left: 50%; transform: translateX(-50%); } .clash-ticket-display .clash-ticket-display-multi-bg { opacity: 1; } .clash-ticket-display .clash-ticket-display-multi-bg.is-animating, .clash-ticket-display .clash-ticket-display-multi-bg.hidden { opacity: 0; } .clash-ticket-display-ticket-offer { width: 32px; height: 32px; } .clash-ticket-display-ticket-offer.local { margin: -8px; } .clash-ticket-offer-tooltip-offer { font-family: var(--font-body); } .clash-ticket-offer-tooltip-offer { -webkit-user-select: none; } .clash-ticket-offer-tooltip-offer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-ticket-offer-tooltip-offer { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-ticket-offer-tooltip-offer:lang(ja-jp) { font-size: 13px; } .clash-ticket-offer-tooltip-offer:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-ticket-offer { width: 100%; height: 100%; pointer-events: none; display: flex; align-items: center; } .clash-ticket-offer .offer-spinner { pointer-events: auto; } .clash-ticket-offer-button-container { height: 100%; } .clash-ticket-offer-button-container .pending-indicator { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .clash-ticket-offer-button { width: 32px; height: 32px; left: 32px; display: flex; align-items: center; justify-content: center; pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); } .clash-ticket-offer-button.disable-hover { pointer-events: none; } .clash-ticket-offer-tooltip-offer { line-height: normal; display: flex; align-items: center; justify-content: center; } .clash-ticket-offer-tooltip-offer img { height: 20px; margin-left: 1px; } .clash-ticket-offer-prize-img { height: 60%; } .clash-roster-details-visual .clash-roster-details-team-tag, .clash-roster-details-visual .clash-roster-details-team-name { font-family: var(--font-display); } .clash-roster-details-visual .clash-roster-details-team-tag, .clash-roster-details-visual .clash-roster-details-team-name { -webkit-user-select: none; } .clash-roster-details-visual .clash-roster-details-team-tag, .clash-roster-details-visual .clash-roster-details-team-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-roster-details-visual .clash-roster-details-team-tag, .clash-roster-details-visual .clash-roster-details-team-name { text-transform: uppercase; } .clash-roster-details-visual .clash-roster-details-team-tag:lang(ko-kr), .clash-roster-details-visual .clash-roster-details-team-name:lang(ko-kr), .clash-roster-details-visual .clash-roster-details-team-tag:lang(ja-jp), .clash-roster-details-visual .clash-roster-details-team-name:lang(ja-jp), .clash-roster-details-visual .clash-roster-details-team-tag:lang(tr-tr), .clash-roster-details-visual .clash-roster-details-team-name:lang(tr-tr), .clash-roster-details-visual .clash-roster-details-team-tag:lang(el-gr), .clash-roster-details-visual .clash-roster-details-team-name:lang(el-gr), .clash-roster-details-visual .clash-roster-details-team-tag:lang(th-th), .clash-roster-details-visual .clash-roster-details-team-name:lang(th-th), .clash-roster-details-visual .clash-roster-details-team-tag:lang(zh-tw), .clash-roster-details-visual .clash-roster-details-team-name:lang(zh-tw) { text-transform: none; } .clash-roster-details-visual .clash-roster-details-team-tag { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .clash-roster-details-visual .clash-roster-details-team-tag:lang(ar-ae) { letter-spacing: 0; } .clash-roster-details-visual .clash-roster-details-team-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-roster-details-visual .clash-roster-details-team-name:lang(ar-ae) { letter-spacing: 0; } .clash-roster-details-visual .clash-roster-details-team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-roster-details-visual { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; } .clash-roster-details-visual .clash-roster-details-center-row { flex: 1; height: 44px; display: flex; flex-direction: row; margin: 0 0 0 6px ; } .clash-roster-details-visual .clash-roster-details-center-row.editable { cursor: pointer; } .clash-roster-details-visual .clash-roster-details-name-column { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .clash-roster-details-visual .clash-roster-details-tier-row { display: flex; flex-direction: row; } .clash-roster-details-visual .clash-roster-details-requests-pending-visual { font-size: 13px; background: #85aec1; color: #000; padding: 2px 8px 0; border-radius: 6px; margin-left: 4px; } .clash-roster-details-visual .clash-roster-details-requests-pending-visual.clickable { cursor: pointer; } .clash-roster-details-visual .clash-roster-details-team-logo { flex-shrink: 1; position: relative; } .clash-roster-details-visual .clash-roster-details-team-logo.editable { cursor: pointer; } .clash-roster-details-visual .clash-roster-details-team-logo.roster-no-team-logo .clash-roster-details-team-logo-img { opacity: 0.22; } .clash-roster-details-visual .clash-roster-details-team-logo .clash-roster-details-team-logo-img { height: 80px; width: 80px; } .clash-roster-details-visual .clash-roster-details-logo-pending-indicator { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .clash-roster-details-visual .clash-roster-details-pip-indicator { position: absolute; top: 5px; right: 0; } .clash-roster-details-visual .clash-roster-details-invalid-logo { position: absolute; top: 5px; right: 0; height: 20px; } .clash-roster-details-visual .clash-roster-details-invalid-logo-icon { height: 100%; } .clash-roster-details-visual .clash-roster-details-team-tag { font-size: 58px; color: #c8aa6e; } .clash-roster-details-visual .clash-roster-details-team-tag.editable { cursor: pointer; } .clash-roster-details-visual .clash-roster-details-team-tag.is-roster-detail-placeholder { color: #5b5a56; } .clash-roster-details-visual .clash-roster-details-vertical-separator { width: 1px; background: #785a28; margin: 1px 10px; } .clash-roster-details-visual .clash-roster-details-team-name { font-size: 22px; color: #f0e6d2; max-width: 370px; } .clash-roster-details-visual .clash-roster-details-team-name.editable { cursor: pointer; } .clash-roster-details-visual .clash-roster-details-team-name.is-roster-detail-placeholder { color: #5b5a56; } .clash-roster-details-visual .clash-roster-details-team-tier { display: flex; margin: 0 10px 0 0 ; } .clash-roster-details-visual .clash-roster-details-pick-side-container { width: 18px; height: 18px; } .clash-roster-details-visual .clash-roster-details-pick-side-image { width: 18px; height: 18px; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag, .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name { font-family: var(--font-display); } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag, .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name { -webkit-user-select: none; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag, .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag, .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name { text-transform: uppercase; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag:lang(ko-kr), .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name:lang(ko-kr), .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag:lang(ja-jp), .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name:lang(ja-jp), .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag:lang(tr-tr), .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name:lang(tr-tr), .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag:lang(el-gr), .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name:lang(el-gr), .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag:lang(th-th), .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name:lang(th-th), .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag:lang(zh-tw), .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name:lang(zh-tw) { text-transform: none; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag:lang(ar-ae) { letter-spacing: 0; } .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name:lang(ar-ae) { letter-spacing: 0; } .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-roster-details-visual-team { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; } .clash-roster-details-visual-team .clash-roster-details-team-logo { flex-shrink: 1; position: relative; margin-left: 22px; margin-top: 5px; } .clash-roster-details-visual-team .clash-roster-details-team-logo.editable { cursor: pointer; } .clash-roster-details-visual-team .clash-roster-details-team-logo.roster-no-team-logo .clash-roster-details-team-logo-img { opacity: 0.22; } .clash-roster-details-visual-team .clash-roster-details-team-logo .clash-roster-details-team-logo-img { height: 70px; width: 70px; } .clash-roster-details-visual-team .clash-roster-details-logo-pending-indicator { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .clash-roster-details-visual-team .clash-roster-details-pip-indicator { position: absolute; top: 5px; right: 0; } .clash-roster-details-visual-team .clash-roster-details-invalid-logo { position: absolute; top: 5px; right: 0; height: 20px; } .clash-roster-details-visual-team .clash-roster-details-invalid-logo-icon { height: 100%; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-left: 13px; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag { color: #c8aa6e; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag.editable { cursor: pointer; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-team-tag.is-roster-detail-placeholder { color: #5b5a56; } .clash-roster-details-visual-team .clash-roster-details-team-tag-and-tier-container .clash-roster-details-tier-row { display: flex; flex-direction: row; margin-top: 5px; } .clash-roster-details-visual-team .clash-roster-details-vertical-separator { width: 1px; background: #5b5a56; margin-left: 20px; margin-right: 15px; margin-top: 5px; height: 60px; } .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container { margin-top: 5px; } .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name { color: #f0e6d2; max-width: 360px; } .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name.editable { cursor: pointer; } .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-roster-details-team-name.is-roster-detail-placeholder { color: #5b5a56; } .clash-roster-details-visual-team .clash-roster-details-team-name-and-open-team-container .clash-open-team-toggle { margin-top: 10px; margin-left: -5px; } lol-uikit-tooltip .clash-open-team-tooltip-title { font-family: var(--font-display); } lol-uikit-tooltip .clash-open-team-tooltip-title { -webkit-user-select: none; } lol-uikit-tooltip .clash-open-team-tooltip-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } lol-uikit-tooltip .clash-open-team-tooltip-title { text-transform: uppercase; } lol-uikit-tooltip .clash-open-team-tooltip-title:lang(ko-kr), lol-uikit-tooltip .clash-open-team-tooltip-title:lang(ja-jp), lol-uikit-tooltip .clash-open-team-tooltip-title:lang(tr-tr), lol-uikit-tooltip .clash-open-team-tooltip-title:lang(el-gr), lol-uikit-tooltip .clash-open-team-tooltip-title:lang(th-th), lol-uikit-tooltip .clash-open-team-tooltip-title:lang(zh-tw) { text-transform: none; } lol-uikit-tooltip .clash-open-team-tooltip-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } lol-uikit-tooltip .clash-open-team-tooltip-title:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } lol-uikit-tooltip .clash-open-team-tooltip-title { color: #32281e; padding-bottom: 5px; } lol-uikit-tooltip .clash-open-team-tooltip-title.hidden { display: none; } .clash-open-team-toggle { display: flex; align-items: center; } .clash-open-team-toggle .clash-open-team-tooltip-icon { --uikit-info-icon-widtht: 18px; --uikit-info-icon-height: 18px; margin-top: -1px; margin-left: 3px; } .clash-open-team-toggle .clash-requests-pending-visual { font-size: 12px; background: #c89b3c; color: #000; padding: 3px 12px 2px 12px; border-radius: 10px; margin-left: 20px; } .clash-open-team-toggle .clash-requests-pending-visual.clickable:hover { cursor: pointer; background: #fabe0a; } .clash-open-team-toggle .clash-open-team-toggle-wrapper { direction: ltr; margin: 0 5px 0 0; } .clash-open-team-toggle .clash-open-team-toggle-wrapper .toggle-container { position: relative; width: 50px; height: 21px; background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-closed.png"); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; } .clash-open-team-toggle .clash-open-team-toggle-wrapper .toggle-container:lang(ar-AE) { background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-closed-rtl.png"); } .clash-open-team-toggle .clash-open-team-toggle-wrapper .toggle-container .open { position: absolute; top: 0; left: 0 ; right: auto ; width: 50px; height: 21px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-open.png"); opacity: 0; transition: opacity 0.5s; } .clash-open-team-toggle .clash-open-team-toggle-wrapper .toggle-container .open:lang(ar-AE) { background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-open-rtl.png"); } .clash-open-team-toggle .clash-open-team-toggle-wrapper .toggle-container .toggle-button { position: relative; left: 0 ; right: auto ; top: -2px; background-image: url("/fe/lol-clash/assets/images/lft/toggle-button.png"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 27px; height: 27px; } .clash-open-team-toggle .clash-open-team-toggle-wrapper .toggle-container .toggle-button:hover { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button-hover.png"); } .clash-open-team-toggle .clash-open-team-toggle-wrapper .toggle-container .toggle-button:active { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button-click.png"); } .clash-open-team-toggle .clash-open-team-toggle-wrapper .animated { transition: left 0.2s ease-in-out ; } .clash-open-team-toggle .clash-open-team-toggle-wrapper.right .toggle-button { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button.png"); left: 26px ; right: auto ; } .clash-open-team-toggle .clash-open-team-toggle-wrapper.disabled .toggle-button { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button-disabled.png"); } .clash-open-team-toggle .clash-open-team-toggle-wrapper.disabled .toggle-button:hover { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button-disabled.png"); } .clash-open-team-toggle .clash-open-team-toggle-wrapper.disabled .toggle-button:active { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button-disabled.png"); } .clash-open-team-toggle .clash-open-team-toggle-wrapper.open .toggle-container .open { opacity: 1; } .clash-open-team-toggle .clash-open-team-toggle-wrapper.disabled .toggle-container { background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-disabled.png"); cursor: default; } .clash-open-team-toggle .clash-open-team-toggle-wrapper.disabled .toggle-container:lang(ar-AE) { background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-disabled-rtl.png"); } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer, .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number, .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number, .clash-state-countdown .state-countdown-content.landing .countdown-timer, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer, .clash-state-countdown .state-countdown-content.default .countdown-timer, .clash-state-countdown .state-countdown-content.landing .countdown-timer .number, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number, .clash-state-countdown .state-countdown-content.default .countdown-timer .number, .clash-state-countdown .state-countdown-content.HUB .countdown-timer, .clash-state-countdown .state-countdown-content.HUB .countdown-text { font-family: var(--font-display); } .clash-state-countdown .state-countdown-content.SCOUTING .countdown-text, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-text, .clash-state-countdown .state-countdown-content.landing .countdown-text, .clash-state-countdown .state-countdown-content.IDLE .countdown-text, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-text, .clash-state-countdown .state-countdown-content.RESULTS .countdown-text, .clash-state-countdown .state-countdown-content.default .countdown-text { font-family: var(--font-body); } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer, .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number, .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-text, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-text, .clash-state-countdown .state-countdown-content.landing .countdown-timer, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer, .clash-state-countdown .state-countdown-content.default .countdown-timer, .clash-state-countdown .state-countdown-content.landing .countdown-timer .number, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number, .clash-state-countdown .state-countdown-content.default .countdown-timer .number, .clash-state-countdown .state-countdown-content.landing .countdown-text, .clash-state-countdown .state-countdown-content.IDLE .countdown-text, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-text, .clash-state-countdown .state-countdown-content.RESULTS .countdown-text, .clash-state-countdown .state-countdown-content.default .countdown-text, .clash-state-countdown .state-countdown-content.HUB .countdown-timer, .clash-state-countdown .state-countdown-content.HUB .countdown-text { -webkit-user-select: none; } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer, .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number, .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-text, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-text, .clash-state-countdown .state-countdown-content.landing .countdown-timer, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer, .clash-state-countdown .state-countdown-content.default .countdown-timer, .clash-state-countdown .state-countdown-content.landing .countdown-timer .number, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number, .clash-state-countdown .state-countdown-content.default .countdown-timer .number, .clash-state-countdown .state-countdown-content.landing .countdown-text, .clash-state-countdown .state-countdown-content.IDLE .countdown-text, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-text, .clash-state-countdown .state-countdown-content.RESULTS .countdown-text, .clash-state-countdown .state-countdown-content.default .countdown-text, .clash-state-countdown .state-countdown-content.HUB .countdown-timer, .clash-state-countdown .state-countdown-content.HUB .countdown-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer, .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number, .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number, .clash-state-countdown .state-countdown-content.landing .countdown-timer, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer, .clash-state-countdown .state-countdown-content.default .countdown-timer, .clash-state-countdown .state-countdown-content.landing .countdown-timer .number, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number, .clash-state-countdown .state-countdown-content.default .countdown-timer .number, .clash-state-countdown .state-countdown-content.HUB .countdown-timer, .clash-state-countdown .state-countdown-content.HUB .countdown-text { text-transform: uppercase; } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer:lang(ko-kr), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number:lang(ko-kr), .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer:lang(ko-kr), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer:lang(ko-kr), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer:lang(ko-kr), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number:lang(ko-kr), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number:lang(ko-kr), .clash-state-countdown .state-countdown-content.landing .countdown-timer:lang(ko-kr), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer:lang(ko-kr), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer:lang(ko-kr), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer:lang(ko-kr), .clash-state-countdown .state-countdown-content.default .countdown-timer:lang(ko-kr), .clash-state-countdown .state-countdown-content.landing .countdown-timer .number:lang(ko-kr), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number:lang(ko-kr), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number:lang(ko-kr), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number:lang(ko-kr), .clash-state-countdown .state-countdown-content.default .countdown-timer .number:lang(ko-kr), .clash-state-countdown .state-countdown-content.HUB .countdown-timer:lang(ko-kr), .clash-state-countdown .state-countdown-content.HUB .countdown-text:lang(ko-kr), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer:lang(ja-jp), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number:lang(ja-jp), .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer:lang(ja-jp), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer:lang(ja-jp), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer:lang(ja-jp), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number:lang(ja-jp), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number:lang(ja-jp), .clash-state-countdown .state-countdown-content.landing .countdown-timer:lang(ja-jp), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer:lang(ja-jp), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer:lang(ja-jp), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer:lang(ja-jp), .clash-state-countdown .state-countdown-content.default .countdown-timer:lang(ja-jp), .clash-state-countdown .state-countdown-content.landing .countdown-timer .number:lang(ja-jp), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number:lang(ja-jp), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number:lang(ja-jp), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number:lang(ja-jp), .clash-state-countdown .state-countdown-content.default .countdown-timer .number:lang(ja-jp), .clash-state-countdown .state-countdown-content.HUB .countdown-timer:lang(ja-jp), .clash-state-countdown .state-countdown-content.HUB .countdown-text:lang(ja-jp), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer:lang(tr-tr), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number:lang(tr-tr), .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer:lang(tr-tr), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer:lang(tr-tr), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer:lang(tr-tr), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number:lang(tr-tr), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number:lang(tr-tr), .clash-state-countdown .state-countdown-content.landing .countdown-timer:lang(tr-tr), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer:lang(tr-tr), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer:lang(tr-tr), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer:lang(tr-tr), .clash-state-countdown .state-countdown-content.default .countdown-timer:lang(tr-tr), .clash-state-countdown .state-countdown-content.landing .countdown-timer .number:lang(tr-tr), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number:lang(tr-tr), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number:lang(tr-tr), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number:lang(tr-tr), .clash-state-countdown .state-countdown-content.default .countdown-timer .number:lang(tr-tr), .clash-state-countdown .state-countdown-content.HUB .countdown-timer:lang(tr-tr), .clash-state-countdown .state-countdown-content.HUB .countdown-text:lang(tr-tr), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer:lang(el-gr), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number:lang(el-gr), .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer:lang(el-gr), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer:lang(el-gr), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer:lang(el-gr), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number:lang(el-gr), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number:lang(el-gr), .clash-state-countdown .state-countdown-content.landing .countdown-timer:lang(el-gr), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer:lang(el-gr), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer:lang(el-gr), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer:lang(el-gr), .clash-state-countdown .state-countdown-content.default .countdown-timer:lang(el-gr), .clash-state-countdown .state-countdown-content.landing .countdown-timer .number:lang(el-gr), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number:lang(el-gr), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number:lang(el-gr), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number:lang(el-gr), .clash-state-countdown .state-countdown-content.default .countdown-timer .number:lang(el-gr), .clash-state-countdown .state-countdown-content.HUB .countdown-timer:lang(el-gr), .clash-state-countdown .state-countdown-content.HUB .countdown-text:lang(el-gr), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer:lang(th-th), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number:lang(th-th), .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer:lang(th-th), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer:lang(th-th), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer:lang(th-th), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number:lang(th-th), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number:lang(th-th), .clash-state-countdown .state-countdown-content.landing .countdown-timer:lang(th-th), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer:lang(th-th), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer:lang(th-th), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer:lang(th-th), .clash-state-countdown .state-countdown-content.default .countdown-timer:lang(th-th), .clash-state-countdown .state-countdown-content.landing .countdown-timer .number:lang(th-th), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number:lang(th-th), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number:lang(th-th), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number:lang(th-th), .clash-state-countdown .state-countdown-content.default .countdown-timer .number:lang(th-th), .clash-state-countdown .state-countdown-content.HUB .countdown-timer:lang(th-th), .clash-state-countdown .state-countdown-content.HUB .countdown-text:lang(th-th), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer:lang(zh-tw), .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number:lang(zh-tw), .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer:lang(zh-tw), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer:lang(zh-tw), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer:lang(zh-tw), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number:lang(zh-tw), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number:lang(zh-tw), .clash-state-countdown .state-countdown-content.landing .countdown-timer:lang(zh-tw), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer:lang(zh-tw), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer:lang(zh-tw), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer:lang(zh-tw), .clash-state-countdown .state-countdown-content.default .countdown-timer:lang(zh-tw), .clash-state-countdown .state-countdown-content.landing .countdown-timer .number:lang(zh-tw), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number:lang(zh-tw), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number:lang(zh-tw), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number:lang(zh-tw), .clash-state-countdown .state-countdown-content.default .countdown-timer .number:lang(zh-tw), .clash-state-countdown .state-countdown-content.HUB .countdown-timer:lang(zh-tw), .clash-state-countdown .state-countdown-content.HUB .countdown-text:lang(zh-tw) { text-transform: none; } .clash-state-countdown .state-countdown-content.HUB .countdown-timer, .clash-state-countdown .state-countdown-content.HUB .countdown-text { text-transform: none; } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number, .clash-state-countdown .state-countdown-content.landing .countdown-timer .number, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number, .clash-state-countdown .state-countdown-content.default .countdown-timer .number { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number:lang(ar-ae), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number:lang(ar-ae), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number:lang(ar-ae), .clash-state-countdown .state-countdown-content.landing .countdown-timer .number:lang(ar-ae), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number:lang(ar-ae), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number:lang(ar-ae), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number:lang(ar-ae), .clash-state-countdown .state-countdown-content.default .countdown-timer .number:lang(ar-ae) { letter-spacing: 0; } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer, .clash-state-countdown .state-countdown-content.landing .countdown-timer, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer, .clash-state-countdown .state-countdown-content.default .countdown-timer { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer:lang(ar-ae), .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer:lang(ar-ae), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer:lang(ar-ae), .clash-state-countdown .state-countdown-content.landing .countdown-timer:lang(ar-ae), .clash-state-countdown .state-countdown-content.IDLE .countdown-timer:lang(ar-ae), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer:lang(ar-ae), .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer:lang(ar-ae), .clash-state-countdown .state-countdown-content.default .countdown-timer:lang(ar-ae) { letter-spacing: 0; } .clash-state-countdown .state-countdown-content.HUB .countdown-timer { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-state-countdown .state-countdown-content.HUB .countdown-timer:lang(ar-ae) { letter-spacing: 0; } .clash-state-countdown .state-countdown-content.HUB .countdown-timer { letter-spacing: 0.025em; } .clash-state-countdown .state-countdown-content.HUB .countdown-timer:lang(ar-ae) { letter-spacing: 0; } .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer:lang(ar-ae) { letter-spacing: 0; } .clash-state-countdown .state-countdown-content.HUB .countdown-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-state-countdown .state-countdown-content.HUB .countdown-text:lang(ar-ae) { letter-spacing: 0; } .clash-state-countdown .state-countdown-content.HUB .countdown-text { letter-spacing: 0.0375em; } .clash-state-countdown .state-countdown-content.HUB .countdown-text:lang(ar-ae) { letter-spacing: 0; } .clash-state-countdown .state-countdown-content.SCOUTING .countdown-text, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-text, .clash-state-countdown .state-countdown-content.landing .countdown-text, .clash-state-countdown .state-countdown-content.IDLE .countdown-text, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-text, .clash-state-countdown .state-countdown-content.RESULTS .countdown-text, .clash-state-countdown .state-countdown-content.default .countdown-text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-state-countdown .state-countdown-content.SCOUTING .countdown-text:lang(ar-ae), .clash-state-countdown .state-countdown-content.IN_GAME .countdown-text:lang(ar-ae), .clash-state-countdown .state-countdown-content.landing .countdown-text:lang(ar-ae), .clash-state-countdown .state-countdown-content.IDLE .countdown-text:lang(ar-ae), .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-text:lang(ar-ae), .clash-state-countdown .state-countdown-content.RESULTS .countdown-text:lang(ar-ae), .clash-state-countdown .state-countdown-content.default .countdown-text:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer, .clash-state-countdown .state-countdown-content.landing .countdown-timer, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer, .clash-state-countdown .state-countdown-content.default .countdown-timer { color: #f0e6d2; } .clash-state-countdown .state-countdown-content.action-timeline .countdown-timer .number, .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer .number, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer .number, .clash-state-countdown .state-countdown-content.landing .countdown-timer .number, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer .number, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer .number, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer .number, .clash-state-countdown .state-countdown-content.default .countdown-timer .number { color: #f0e6d2; line-height: 0; } .clash-state-countdown .state-countdown-content { pointer-events: none; } .clash-state-countdown .state-countdown-content .countdown-timer { pointer-events: none; } .clash-state-countdown .state-countdown-content.action-timeline { text-align: center; margin-bottom: 5px; } .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer { font-size: 14px; color: #f0e6d2; } .clash-state-countdown .state-countdown-content.game-info-panel .countdown-timer .number { font-size: 18px; } .clash-state-countdown .state-countdown-content.SCOUTING, .clash-state-countdown .state-countdown-content.IN_GAME { position: absolute; bottom: 84px; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; } .clash-state-countdown .state-countdown-content.SCOUTING .countdown-timer, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-timer { margin-bottom: 5px; } .clash-state-countdown .state-countdown-content.SCOUTING .countdown-text, .clash-state-countdown .state-countdown-content.IN_GAME .countdown-text { font-size: 16px; color: #a09b8c; white-space: nowrap; } .clash-state-countdown .state-countdown-content.landing, .clash-state-countdown .state-countdown-content.IDLE, .clash-state-countdown .state-countdown-content.LOCK_IN, .clash-state-countdown .state-countdown-content.RESULTS, .clash-state-countdown .state-countdown-content.default { text-align: center; } .clash-state-countdown .state-countdown-content.landing .countdown-timer, .clash-state-countdown .state-countdown-content.IDLE .countdown-timer, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-timer, .clash-state-countdown .state-countdown-content.RESULTS .countdown-timer, .clash-state-countdown .state-countdown-content.default .countdown-timer { margin-bottom: 5px; } .clash-state-countdown .state-countdown-content.landing .countdown-text, .clash-state-countdown .state-countdown-content.IDLE .countdown-text, .clash-state-countdown .state-countdown-content.LOCK_IN .countdown-text, .clash-state-countdown .state-countdown-content.RESULTS .countdown-text, .clash-state-countdown .state-countdown-content.default .countdown-text { font-size: 16px; color: #a09b8c; white-space: nowrap; } .clash-state-countdown .state-countdown-content.HUB .countdown-timer { margin-left: 15px; color: #f0e6d2; } .clash-state-countdown .state-countdown-content.HUB .countdown-text { float: left; color: #a09b8c; margin-top: 5px; } .clash-state-countdown .state-countdown-content.HUB .countdown-text::after { content: ":"; } .clash-state-countdown .state-countdown-content .clash-spinner-container { position: relative; height: 20px; width: 20px; margin-bottom: 12px; } .clash-state-countdown .state-countdown-content .clash-spinner-container .clash-loading-spinner { position: absolute; top: -50%; left: -50%; } .ps-container{-ms-touch-action:auto;touch-action:auto;overflow:hidden !important;-ms-overflow-style:none}@supports (-ms-overflow-style: none){.ps-container{overflow:auto !important}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.ps-container{overflow:auto !important}}.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block;background-color:transparent}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:.9}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999;height:11px}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:.9}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999;width:11px}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;bottom:0px;height:15px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;-o-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;-moz-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;bottom:2px;height:6px}.ps-container>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x,.ps-container>.ps-scrollbar-x-rail:active>.ps-scrollbar-x{height:11px}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;right:0;width:15px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;-o-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;-moz-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;right:2px;width:6px}.ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y,.ps-container>.ps-scrollbar-y-rail:active>.ps-scrollbar-y{width:11px}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:.9}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999;height:11px}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:.9}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999;width:11px}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999} .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation, .clash-bracket-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-bracket-layout { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .clash-bracket-layout.is-bracket-tab { top: 66px; } .clash-bracket-layout .bracket-layout-overflow-wrapper { height: 100%; width: 100%; overflow: hidden; } .clash-bracket-layout .interactivity-blocker { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: auto; } .clash-bracket-layout .visible-area { position: relative; left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 1%, #000 20%, #000 80%, transparent 99%), linear-gradient(#000, #000); -webkit-mask-size: 100% 93%, auto; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: copy; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper { width: fit-content; -webkit-mask-image: linear-gradient(0deg, transparent 1%, #000 10%, #000 90%, transparent 99%); -webkit-mask-size: 100% 100%, auto; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: copy; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper .bracket-content { position: relative; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper .bracket-content.start-hidden { opacity: 0; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper .bracket-content .matches-wrapper { position: absolute; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper .bracket-content .matches-wrapper .match { width: 278px; height: 62px; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper .bracket-content .matches-wrapper .match.finals { height: 140px; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper .bracket-content .lines-wrapper { position: relative; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper .bracket-content .lines-wrapper .bracket-line { position: absolute; opacity: 0.5; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper .bracket-content .lines-wrapper .bracket-line.local { opacity: 1; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper .bracket-content .lines-wrapper .bracket-line.local path { stroke: #16cae5; stroke-width: 2; } .clash-bracket-layout .visible-area .fade-top-bot-wrapper .bracket-content .lines-wrapper .bracket-line.connector { width: 1px; } .clash-bracket-layout.force-visible .ps .ps-scrollbar-x-rail { opacity: 1; } .clash-bracket-layout .ps-scrollbar-x-rail { margin: 5px 35px; bottom: 25px; } .clash-bracket-layout .ps-scrollbar-x { background-color: #785a28; opacity: 1; border: thin solid #000; } .clash-bracket-layout .ps-scrollbar-x, .clash-bracket-layout .ps-scrollbar-x:hover, .clash-bracket-layout .ps-scrollbar-x-rail, .clash-bracket-layout .ps-scrollbar-x-rail:hover, .clash-bracket-layout .ps-scrollbar-x-rail .ps-scrollbar-x, .clash-bracket-layout .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .clash-bracket-layout.ps-in-scrolling.ps-x .ps-scrollbar-x, .clash-bracket-layout.ps-in-scrolling.ps-x .ps-scrollbar-x:hover, .clash-bracket-layout.ps-in-scrolling.ps-x .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .clash-bracket-layout.ps-in-scrolling.ps-x .ps-scrollbar-x-rail:hover .ps-scrollbar-x:hover, .clash-bracket-layout:hover .ps-scrollbar-x, .clash-bracket-layout:hover .ps-scrollbar-x:hover, .clash-bracket-layout:hover .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .clash-bracket-layout:hover .ps-scrollbar-x-rail:hover .ps-scrollbar-x:hover, .clash-bracket-layout:hover.ps-in-scrolling.ps-x .ps-scrollbar-x, .clash-bracket-layout:hover.ps-in-scrolling.ps-x .ps-scrollbar-x:hover, .clash-bracket-layout:hover.ps-in-scrolling.ps-x .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .clash-bracket-layout:hover.ps-in-scrolling.ps-x .ps-scrollbar-x-rail:hover .ps-scrollbar-x:hover { height: 4px; } .clash-bracket-layout .ps-scrollbar-x-rail, .clash-bracket-layout.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail, .clash-bracket-layout:hover > .ps-scrollbar-x-rail:hover, .clash-bracket-layout:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { background-color: transparent !important; } .clash-bracket-layout.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x, .clash-bracket-layout:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .clash-bracket-layout:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { background-color: #cdbe91; } .clash-bracket-layout .ps-scrollbar-y { opacity: 0; border: 0; } .clash-bracket-layout.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y, .clash-bracket-layout:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .clash-bracket-layout:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { background-color: transparent; } .clash-bracket-layout .bracket-button-wrapper { position: absolute; top: 0; left: 0; width: 30px; height: 100%; transition: transform 300ms ease-in-out; animation: 250ms linear 300ms fadeIn both; } .clash-bracket-layout .bracket-button-wrapper.winners { transform: translateY(100%); } .clash-bracket-layout .bracket-button-wrapper.winners .bracket-button-vertical { transform: translateY(-300%); } .clash-bracket-layout .bracket-button-wrapper.losers { transform: translateY(0); } .clash-bracket-layout .bracket-button-wrapper.losers .bracket-button-vertical { transform: translateY(66%); } .clash-bracket-layout .bracket-button-wrapper .bracket-button-vertical { width: 100%; height: 30px; left: 0; top: 0; transition: transform 300ms ease-in-out; } .clash-bracket-layout .bracket-button-wrapper .bracket-button-horizontal { width: 100%; height: 100%; } .clash-bracket-layout .timers-wrapper .clash-game-timer { position: absolute; color: #a09b8c; width: 78px; text-align: center; } .clash-bracket-win-mark-video-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .clash-bracket-win-mark-video { position: absolute; left: 0; top: 0; } .clash-bracket-video { position: absolute; left: 50%; top: 50%; } .clash-bracket-video video, .clash-bracket-win-mark-video video { transform: translate(-50%, -50%); } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation, .clash-bracket-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-bracket-layout-16 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .clash-bracket-layout-16.is-bracket-tab { top: 66px; } .clash-bracket-layout-16 .bracket-layout-overflow-wrapper { height: 100%; width: 100%; overflow: hidden; } .clash-bracket-layout-16 .interactivity-blocker { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: auto; } .clash-bracket-layout-16 .visible-area { position: relative; left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 1%, #000 20%, #000 80%, transparent 99%), linear-gradient(#000, #000); -webkit-mask-size: 100% 93%, auto; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: copy; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper { width: fit-content; -webkit-mask-image: linear-gradient(0deg, transparent 1%, #000 10%, #000 90%, transparent 99%); -webkit-mask-size: 100% 100%, auto; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: copy; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper .bracket-content { position: relative; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper .bracket-content.start-hidden { opacity: 0; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper .bracket-content .matches-wrapper { position: absolute; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper .bracket-content .matches-wrapper .match { width: 278px; height: 62px; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper .bracket-content .matches-wrapper .match.finals { height: 140px; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper .bracket-content .lines-wrapper { position: relative; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper .bracket-content .lines-wrapper .bracket-line { position: absolute; opacity: 0.5; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper .bracket-content .lines-wrapper .bracket-line.local { opacity: 1; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper .bracket-content .lines-wrapper .bracket-line.local path { stroke: #16cae5; stroke-width: 2; } .clash-bracket-layout-16 .visible-area .fade-top-bot-wrapper .bracket-content .lines-wrapper .bracket-line.connector { width: 1px; } .clash-bracket-layout-16.force-visible .ps .ps-scrollbar-x-rail { opacity: 1; } .clash-bracket-layout-16 .ps-scrollbar-x-rail { margin: 5px 35px; bottom: 25px; } .clash-bracket-layout-16 .ps-scrollbar-x { background-color: #785a28; opacity: 1; border: thin solid #000; } .clash-bracket-layout-16 .ps-scrollbar-x, .clash-bracket-layout-16 .ps-scrollbar-x:hover, .clash-bracket-layout-16 .ps-scrollbar-x-rail, .clash-bracket-layout-16 .ps-scrollbar-x-rail:hover, .clash-bracket-layout-16 .ps-scrollbar-x-rail .ps-scrollbar-x, .clash-bracket-layout-16 .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .clash-bracket-layout-16.ps-in-scrolling.ps-x .ps-scrollbar-x, .clash-bracket-layout-16.ps-in-scrolling.ps-x .ps-scrollbar-x:hover, .clash-bracket-layout-16.ps-in-scrolling.ps-x .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .clash-bracket-layout-16.ps-in-scrolling.ps-x .ps-scrollbar-x-rail:hover .ps-scrollbar-x:hover, .clash-bracket-layout-16:hover .ps-scrollbar-x, .clash-bracket-layout-16:hover .ps-scrollbar-x:hover, .clash-bracket-layout-16:hover .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .clash-bracket-layout-16:hover .ps-scrollbar-x-rail:hover .ps-scrollbar-x:hover, .clash-bracket-layout-16:hover.ps-in-scrolling.ps-x .ps-scrollbar-x, .clash-bracket-layout-16:hover.ps-in-scrolling.ps-x .ps-scrollbar-x:hover, .clash-bracket-layout-16:hover.ps-in-scrolling.ps-x .ps-scrollbar-x-rail:hover .ps-scrollbar-x, .clash-bracket-layout-16:hover.ps-in-scrolling.ps-x .ps-scrollbar-x-rail:hover .ps-scrollbar-x:hover { height: 4px; } .clash-bracket-layout-16 .ps-scrollbar-x-rail, .clash-bracket-layout-16.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail, .clash-bracket-layout-16:hover > .ps-scrollbar-x-rail:hover, .clash-bracket-layout-16:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { background-color: transparent !important; } .clash-bracket-layout-16.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x, .clash-bracket-layout-16:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .clash-bracket-layout-16:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { background-color: #cdbe91; } .clash-bracket-layout-16 .ps-scrollbar-y { opacity: 0; border: 0; } .clash-bracket-layout-16.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y, .clash-bracket-layout-16:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .clash-bracket-layout-16:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { background-color: transparent; } .clash-bracket-layout-16 .bracket-button-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 30px; transition: transform 300ms ease-in-out; animation: 250ms linear 300ms fadeIn both; } .clash-bracket-layout-16 .bracket-button-wrapper.winners { top: 5px; left: 4px; } .clash-bracket-layout-16 .bracket-button-wrapper.losers { top: 450px; left: 1px; } .clash-bracket-layout-16 .bracket-button-wrapper.hidden { display: none; } .clash-bracket-layout-16 .bracket-button-wrapper .bracket-button-vertical { width: 30px; height: 30px; left: 0; top: 0; transition: transform 300ms ease-in-out; margin: auto; } .clash-bracket-layout-16 .timers-wrapper .clash-game-timer { position: absolute; color: #a09b8c; width: 78px; text-align: center; } .clash-bracket-win-mark-video-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .clash-bracket-win-mark-video { position: absolute; left: 0; top: 0; } .clash-bracket-video { position: absolute; left: 50%; top: 50%; } .clash-bracket-video video, .clash-bracket-win-mark-video video { transform: translate(-50%, -50%); } .clash-bracket-match .vs .vs-text { font-family: var(--font-display); } .clash-bracket-match .vs .vs-text { -webkit-user-select: none; } .clash-bracket-match .vs .vs-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-bracket-match .vs .vs-text { text-transform: uppercase; } .clash-bracket-match .vs .vs-text:lang(ko-kr), .clash-bracket-match .vs .vs-text:lang(ja-jp), .clash-bracket-match .vs .vs-text:lang(tr-tr), .clash-bracket-match .vs .vs-text:lang(el-gr), .clash-bracket-match .vs .vs-text:lang(th-th), .clash-bracket-match .vs .vs-text:lang(zh-tw) { text-transform: none; } .clash-bracket-match .vs .vs-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-bracket-match .vs .vs-text:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video, .clash-bracket-match-finals-circle-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-bracket-match { display: flex; flex-direction: column; justify-content: center; background: rgba(29,29,29,0.78); } .clash-bracket-match.hidden { visibility: hidden; } .clash-bracket-match .team-vs-team { position: relative; display: flex; flex-direction: row; justify-content: center; width: 100%; height: 100%; opacity: 0.5; transition: opacity 0.2s linear; } .clash-bracket-match.is-local .team-vs-team, .clash-bracket-match.has-roster:hover .team-vs-team { opacity: 1; transition: unset; } .clash-bracket-match.finals .vs { direction: ltr; margin: 0; width: 46px; } .clash-bracket-match .lines { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; } .clash-bracket-match .vs { position: absolute; left: 50%; transform: translateX(-50%); height: calc(100% - 2px); width: 44px; padding: 1px 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; } .clash-bracket-match .vs .vs-line { flex-shrink: 1; } .clash-bracket-match .vs .vs-box { min-height: 44px; } .clash-bracket-match .vs .vs-text { color: #6a6c6d; display: block; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-style: italic; } .clash-bracket-match .local-player-indicator { background-color: #fabe0a; position: absolute; display: block; bottom: -4px; height: 4px; left: 0; width: calc(50% + 1px); } .clash-bracket-match .withdraw-button-container { position: absolute; left: 50%; transform: translateX(-50%); bottom: -45px; } .clash-bracket-match-finals-circle-spinner { width: 580px; height: 580px; pointer-events: none; } .clash-bracket-match-magic { position: absolute; left: 10px; top: 50%; transform: translate(-50%, -50%); animation: 4s clash-bracket-match-magic-fade-loop linear infinite; opacity: 0; } .clash-bracket-match-magic.delayed { animation-delay: 2s; } .clash-bracket-match-magic.right { transform: scale(-1, -1); left: 20px; top: calc(-50% + 6px); animation-delay: 1s; } .clash-bracket-match-magic.right.delayed { animation-delay: 3s; } @-moz-keyframes clash-bracket-match-magic-fade-loop { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes clash-bracket-match-magic-fade-loop { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes clash-bracket-match-magic-fade-loop { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes clash-bracket-match-magic-fade-loop { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .clash-bracket-match-roster.finals .roster-determined .tag, .clash-bracket-match-roster.winner.finals .tag, .clash-bracket-match-roster.winner.local.finals .tag, .clash-bracket-match-roster .tag { font-family: var(--font-display); } .clash-bracket-match-roster.finals .roster-determined .tag, .clash-bracket-match-roster.winner.finals .tag, .clash-bracket-match-roster.winner.local.finals .tag, .clash-bracket-match-roster .tag { -webkit-user-select: none; } .clash-bracket-match-roster.finals .roster-determined .tag, .clash-bracket-match-roster.winner.finals .tag, .clash-bracket-match-roster.winner.local.finals .tag, .clash-bracket-match-roster .tag { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-bracket-match-roster.finals .roster-determined .tag, .clash-bracket-match-roster .tag { text-transform: uppercase; } .clash-bracket-match-roster.finals .roster-determined .tag:lang(ko-kr), .clash-bracket-match-roster .tag:lang(ko-kr), .clash-bracket-match-roster.finals .roster-determined .tag:lang(ja-jp), .clash-bracket-match-roster .tag:lang(ja-jp), .clash-bracket-match-roster.finals .roster-determined .tag:lang(tr-tr), .clash-bracket-match-roster .tag:lang(tr-tr), .clash-bracket-match-roster.finals .roster-determined .tag:lang(el-gr), .clash-bracket-match-roster .tag:lang(el-gr), .clash-bracket-match-roster.finals .roster-determined .tag:lang(th-th), .clash-bracket-match-roster .tag:lang(th-th), .clash-bracket-match-roster.finals .roster-determined .tag:lang(zh-tw), .clash-bracket-match-roster .tag:lang(zh-tw) { text-transform: none; } .clash-bracket-match-roster.finals .roster-determined .tag { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-bracket-match-roster.finals .roster-determined .tag:lang(ar-ae) { letter-spacing: 0; } .clash-bracket-match-roster .tag { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-bracket-match-roster .tag:lang(ar-ae) { letter-spacing: 0; } .clash-bracket-match-roster.winner.finals .tag, .clash-bracket-match-roster.winner.local.finals .tag { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-bracket-match-roster, .clash-bracket-match-roster .icon, .clash-bracket-match-roster .tag, .roster-determined, .no-roster, .roster-replaced { display: flex; align-items: center; justify-content: center; } .clash-bracket-match-roster { position: relative; height: 100%; width: 50%; padding-right: 8%; } .clash-bracket-match-roster.has-roster { cursor: pointer; } .clash-bracket-match-roster.is-replaced { background-color: rgba(220,112,48,0.09); border: thin solid #d88862; margin-top: -1px; margin-right: -1px; border-right: 0; } .clash-bracket-match-roster.is-replaced.mirrored { border-right: thin solid #d88862; border-left: 0; } .clash-bracket-match-roster.is-replaced { background-color: rgba(220,112,48,0.09); border: thin solid #d88862; margin-top: -1px; margin-right: -1px; border-right: 0; } .clash-bracket-match-roster.is-replaced.mirrored { border-right: thin solid #d88862; border-left: 0; } .clash-bracket-match-roster.was-replaced { background-color: rgba(181,212,58,0.09); border: thin solid #a4ab8e; margin-top: -1px; margin-right: -1px; border-right: 0; } .clash-bracket-match-roster.was-replaced.mirrored { border-right: thin solid #a4ab8e; border-left: 0; } .clash-bracket-match-roster.finals { padding-right: 6%; padding-left: 0; } .clash-bracket-match-roster.mirrored { padding-right: 0; padding-left: 8%; } .clash-bracket-match-roster.mirrored.finals { padding-right: 0; padding-left: 6%; } .clash-bracket-match-roster .bracket-match-background { position: absolute; left: 0; right: 0; top: -1px; bottom: -1px; background-size: cover; transform: scaleX(-1); } .clash-bracket-match-roster .bracket-match-background .bracket-match-glow { display: none; position: absolute; top: 0; left: 0; height: 100%; } .clash-bracket-match-roster.mirrored .bracket-match-background { transform: scaleX(1); } .clash-bracket-match-roster:hover .bracket-match-background { background-image: url("/fe/lol-clash/assets/images/brackets/match-normal-over.png"); } .clash-bracket-match-roster:hover .bracket-match-background .bracket-match-glow { display: block; } .clash-bracket-match-roster:active .bracket-match-background { background-image: url("/fe/lol-clash/assets/images/brackets/match-normal-down.png"); } .clash-bracket-match-roster:active .bracket-match-background .bracket-match-glow { display: none; } .clash-bracket-match-roster.finals:hover .bracket-match-background { background-image: url("/fe/lol-clash/assets/images/brackets/match-finals-over.png"); } .clash-bracket-match-roster.finals:active .bracket-match-background { background-image: url("/fe/lol-clash/assets/images/brackets/match-finals-down.png"); } .clash-bracket-match-roster.finals:active .bracket-match-background .bracket-match-glow { display: none; } .clash-bracket-match-roster:active .icon { transform: scale(0.9); -webkit-filter: saturate(0.5); } .clash-bracket-match-roster.finals .roster-determined { flex-direction: column; } .clash-bracket-match-roster.finals .roster-determined .icon img { height: 65%; margin-top: 5px; } .clash-bracket-match-roster.finals .roster-determined .tag { direction: ltr; margin-top: 0; margin-bottom: 8px; flex-direction: row ; justify-content: center; width: 100%; } .clash-bracket-match-roster.finals .roster-determined .tag .tag-icon { margin-top: 0; margin-left: 20px; } .clash-bracket-match-roster.finals .roster-determined .tag .tag-icon img { height: 26px; } .clash-bracket-match-roster.finals .roster-determined.mirrored .tag { flex-direction: row-reverse ; } .clash-bracket-match-roster.finals .roster-determined.mirrored .tag .tag-icon { margin-left: 0; margin-right: 20px; } .clash-bracket-match-roster.local .tag, .clash-bracket-match-roster.local.finals .tag, .clash-bracket-match-roster.local.loser .tag, .clash-bracket-match-roster.local.loser.finals .tag { color: #fabe0a; } .clash-bracket-match-roster.loser, .clash-bracket-match-roster.loser.finals { opacity: 0.7; } .clash-bracket-match-roster.loser .icon img, .clash-bracket-match-roster.loser.finals .icon img { -webkit-filter: saturate(0); } .clash-bracket-match-roster.loser .tag, .clash-bracket-match-roster.loser.finals .tag { color: #5b5a56; } .clash-bracket-match-roster.winner .tag, .clash-bracket-match-roster.winner.finals .tag, .clash-bracket-match-roster.winner.local .tag, .clash-bracket-match-roster.winner.local.finals .tag { color: #0a96aa; } .clash-bracket-match-roster:hover .tag, .clash-bracket-match-roster:hover.finals .tag, .clash-bracket-match-roster:hover.local .tag, .clash-bracket-match-roster:hover.loser .tag, .clash-bracket-match-roster:hover.winner .tag { color: #f0e6d2; } .clash-bracket-match-roster:active .tag, .clash-bracket-match-roster:active.finals .tag, .clash-bracket-match-roster:active.local .tag, .clash-bracket-match-roster:active.loser .tag, .clash-bracket-match-roster:active.winner .tag { color: #5b5a56; } .clash-bracket-match-roster.finals.loser .tag, .clash-bracket-match-roster.finals.winner .tag { justify-content: flex-end; } .clash-bracket-match-roster .icon { float: left; height: 100%; width: 60%; } .clash-bracket-match-roster .icon img { max-height: 85%; } .clash-bracket-match-roster .tag { direction: ltr; width: 40%; flex-direction: column; } .clash-bracket-match-roster .tag .tag-icon { margin-top: 4px; } .clash-bracket-match-roster .tag .tag-icon img { height: 15px; } .roster-determined { position: relative; height: 100%; width: 100%; flex-direction: row; } .roster-determined.mirrored { flex-direction: row-reverse; } .no-roster { height: 100%; width: 100%; } .no-roster img { width: 40px; } .no-roster.finals img { width: 70px; } .roster-replaced { height: 100%; width: 100%; } .roster-replaced img { width: 80px; } .roster-replaced.finals img { width: 120px; } .clash-dash-circle-spinner-dashes { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; } .clash-dash-circle-spinner-outer-mask { height: 68%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 10%, #000 40%, #000 60%, transparent 90%, transparent 100%); } .clash-dash-circle-spinner-outer { height: 100%; opacity: 0.3; animation: 36s clash-trophy-circle-spin linear infinite; } .clash-dash-circle-spinner-inner-mask { height: 46%; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 10%, transparent 20%, transparent 80%, #000 90%, #000 100%); } .clash-dash-circle-spinner-inner { height: 100%; opacity: 0.3; animation: 36s clash-trophy-circle-spin linear reverse infinite; } @-moz-keyframes clash-trophy-circle-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes clash-trophy-circle-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes clash-trophy-circle-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes clash-trophy-circle-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .clash-spectate-button .spectate-timer { font-family: var(--font-display); } .clash-spectate-button .spectate-timer { -webkit-user-select: none; } .clash-spectate-button .spectate-timer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-spectate-button .spectate-timer { text-transform: uppercase; } .clash-spectate-button .spectate-timer:lang(ko-kr), .clash-spectate-button .spectate-timer:lang(ja-jp), .clash-spectate-button .spectate-timer:lang(tr-tr), .clash-spectate-button .spectate-timer:lang(el-gr), .clash-spectate-button .spectate-timer:lang(th-th), .clash-spectate-button .spectate-timer:lang(zh-tw) { text-transform: none; } .clash-spectate-button .spectate-timer { text-transform: none; } .clash-spectate-button .spectate-timer { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-spectate-button .spectate-timer:lang(ar-ae) { letter-spacing: 0; } .clash-spectate-button .spectate-timer { letter-spacing: 0.0375em; } .clash-spectate-button .spectate-timer:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-spectate-button { position: absolute; top: 100%; display: inline-block; width: 100%; text-align: center; margin-top: 18px; } .clash-spectate-button .button-and-spinner { display: flex; align-items: center; justify-content: center; } .clash-spectate-button .button-and-spinner .spectate-watch-now { display: inline-block; width: 150px; text-align: center; margin-left: 35px; margin-right: 35px; } .clash-spectate-button .button-and-spinner .spectate-watch-now .spectate-red-dot { background-color: #b32d49; width: 8px; height: 8px; border-radius: 100%; margin-left: 8px; margin-bottom: 3px; } .clash-spectate-button .button-and-spinner .spectate-loading-spinner { width: 32px; height: 32px; margin-left: -32px; } .clash-spectate-button .spectate-timer { color: #f0e6d2; margin-top: 8px; } .clash-toast-notification .clash-toast-notification-content .title, .clash-notification-modal .clash-modal-title, .clash-notification-modal-with-icon .clash-modal-title { font-family: var(--font-display); } .clash-toast-notification .clash-toast-notification-content .description, .clash-notification-modal .clash-modal-body, .clash-notification-modal-with-icon .clash-modal-body { font-family: var(--font-body); } .clash-toast-notification .clash-toast-notification-content .title, .clash-toast-notification .clash-toast-notification-content .description, .clash-notification-modal .clash-modal-title, .clash-notification-modal .clash-modal-body, .clash-notification-modal-with-icon .clash-modal-title, .clash-notification-modal-with-icon .clash-modal-body { -webkit-user-select: none; } .clash-toast-notification .clash-toast-notification-content .title, .clash-toast-notification .clash-toast-notification-content .description, .clash-notification-modal .clash-modal-title, .clash-notification-modal .clash-modal-body, .clash-notification-modal-with-icon .clash-modal-title, .clash-notification-modal-with-icon .clash-modal-body { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-toast-notification .clash-toast-notification-content .title, .clash-notification-modal .clash-modal-title, .clash-notification-modal-with-icon .clash-modal-title { text-transform: uppercase; } .clash-toast-notification .clash-toast-notification-content .title:lang(ko-kr), .clash-notification-modal .clash-modal-title:lang(ko-kr), .clash-notification-modal-with-icon .clash-modal-title:lang(ko-kr), .clash-toast-notification .clash-toast-notification-content .title:lang(ja-jp), .clash-notification-modal .clash-modal-title:lang(ja-jp), .clash-notification-modal-with-icon .clash-modal-title:lang(ja-jp), .clash-toast-notification .clash-toast-notification-content .title:lang(tr-tr), .clash-notification-modal .clash-modal-title:lang(tr-tr), .clash-notification-modal-with-icon .clash-modal-title:lang(tr-tr), .clash-toast-notification .clash-toast-notification-content .title:lang(el-gr), .clash-notification-modal .clash-modal-title:lang(el-gr), .clash-notification-modal-with-icon .clash-modal-title:lang(el-gr), .clash-toast-notification .clash-toast-notification-content .title:lang(th-th), .clash-notification-modal .clash-modal-title:lang(th-th), .clash-notification-modal-with-icon .clash-modal-title:lang(th-th), .clash-toast-notification .clash-toast-notification-content .title:lang(zh-tw), .clash-notification-modal .clash-modal-title:lang(zh-tw), .clash-notification-modal-with-icon .clash-modal-title:lang(zh-tw) { text-transform: none; } .clash-notification-modal .clash-modal-title, .clash-notification-modal-with-icon .clash-modal-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-notification-modal .clash-modal-title:lang(ar-ae), .clash-notification-modal-with-icon .clash-modal-title:lang(ar-ae) { letter-spacing: 0; } .clash-toast-notification .clash-toast-notification-content .title { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-toast-notification .clash-toast-notification-content .title:lang(ja-jp) { font-size: 13px; } .clash-toast-notification .clash-toast-notification-content .title:lang(ar-ae) { letter-spacing: 0; } .clash-toast-notification .clash-toast-notification-content .description, .clash-notification-modal .clash-modal-body, .clash-notification-modal-with-icon .clash-modal-body { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-toast-notification .clash-toast-notification-content .description:lang(ja-jp), .clash-notification-modal .clash-modal-body:lang(ja-jp), .clash-notification-modal-with-icon .clash-modal-body:lang(ja-jp) { font-size: 13px; } .clash-toast-notification .clash-toast-notification-content .description:lang(ar-ae), .clash-notification-modal .clash-modal-body:lang(ar-ae), .clash-notification-modal-with-icon .clash-modal-body:lang(ar-ae) { letter-spacing: 0; } .clash-toast-notification { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; } .clash-toast-notification .clash-toast-notification-content { display: flex; flex-direction: column; justify-content: center; overflow-wrap: break-word; } .clash-toast-notification .clash-toast-notification-content .title { margin-bottom: 10px; letter-spacing: initial; } .clash-toast-notification .clash-toast-notification-icon { height: 80px; width: 80px; max-width: 80px; margin-left: 5px; flex-grow: 1; flex-shrink: 0; } .clash-toast-notification-background { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url("/fe/lol-clash/assets/images/background/background-toast.jpg"); background-size: cover; } .clash-notification-modal { min-height: 100px; text-align: center; } .clash-notification-modal .clash-modal-body { margin-top: 15px; } .clash-notification-modal-with-icon { min-height: 250px; width: 350px !important; text-align: center; } .clash-notification-modal-with-icon .clash-modal-title { margin-bottom: 15px; } .clash-notification-modal-with-icon .clash-modal-body { margin-top: 25px; } .clash-notification-modal-with-icon .clash-modal-icon { height: 80px; width: 80px; background-image: url("/fe/lol-clash/assets/placeholder/general/logo.png"); background-size: cover; margin: auto; } .clash-social-persistent .clash-social-persistent-next-state-header { font-family: var(--font-display); } .clash-social-persistent .clash-social-persistent-next-state-text { font-family: var(--font-body); } .clash-social-persistent .clash-social-persistent-next-state-header, .clash-social-persistent .clash-social-persistent-next-state-text { -webkit-user-select: none; } .clash-social-persistent .clash-social-persistent-next-state-header, .clash-social-persistent .clash-social-persistent-next-state-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-social-persistent .clash-social-persistent-next-state-header { text-transform: uppercase; } .clash-social-persistent .clash-social-persistent-next-state-header:lang(ko-kr), .clash-social-persistent .clash-social-persistent-next-state-header:lang(ja-jp), .clash-social-persistent .clash-social-persistent-next-state-header:lang(tr-tr), .clash-social-persistent .clash-social-persistent-next-state-header:lang(el-gr), .clash-social-persistent .clash-social-persistent-next-state-header:lang(th-th), .clash-social-persistent .clash-social-persistent-next-state-header:lang(zh-tw) { text-transform: none; } .clash-social-persistent .clash-social-persistent-next-state-header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-social-persistent .clash-social-persistent-next-state-header:lang(ja-jp) { font-size: 13px; } .clash-social-persistent .clash-social-persistent-next-state-header:lang(ar-ae) { letter-spacing: 0; } .clash-social-persistent .clash-social-persistent-next-state-text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-social-persistent .clash-social-persistent-next-state-text:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-social-persistent { direction: ltr; background: linear-gradient(to bottom, #0a1428 0%, #005a82 100%); overflow: hidden; position: relative; } .clash-social-persistent .clash-social-persistent-magic-bg { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; } .clash-social-persistent .clash-social-persistent-magic-background { position: absolute; top: 0; left: 0; pointer-events: none; width: 223px; height: 311px; } .clash-social-persistent .clash-social-persistent-separator { width: 100%; height: 1px; background-color: rgba(255,255,255,0.22); } .clash-social-persistent .clash-social-persistent-next-state { position: relative; padding: 10px; pointer-events: none; } .clash-social-persistent .clash-social-persistent-next-state-header { color: #a09b8c; font-weight: 500; } .clash-social-persistent .clash-social-persistent-next-state-text { color: #f0e6d2; font-size: 12px; line-height: 16px; margin-top: 4px; } .clash-section-header .clash-section-header-text { font-family: var(--font-display); } .clash-section-header .clash-section-header-text { -webkit-user-select: none; } .clash-section-header .clash-section-header-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-section-header .clash-section-header-text { text-transform: uppercase; } .clash-section-header .clash-section-header-text:lang(ko-kr), .clash-section-header .clash-section-header-text:lang(ja-jp), .clash-section-header .clash-section-header-text:lang(tr-tr), .clash-section-header .clash-section-header-text:lang(el-gr), .clash-section-header .clash-section-header-text:lang(th-th), .clash-section-header .clash-section-header-text:lang(zh-tw) { text-transform: none; } .clash-section-header .clash-section-header-text { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-section-header .clash-section-header-text:lang(ja-jp) { font-size: 13px; } .clash-section-header .clash-section-header-text:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-section-header { height: 32px; } .clash-section-header .clash-section-header-content { width: 100%; height: 100%; display: flex; align-items: center; } .clash-section-header .clash-section-header-arrow-toggle { margin: 0 0 0 10px; } .clash-section-header .clash-section-header-arrow-toggle:lang(ar-ae) { margin: 0 10px 0 0; } .clash-section-header .clash-section-header-text { color: #a09b8c; font-weight: 500; margin: 0 0 0 10px; } .clash-section-header .clash-section-header-text:lang(ar-ae) { margin: 0 10px 0 0; } .clash-section-header .tournament-arrow-hitbox:hover .clash-section-header-text { color: #f0e6d2; } .clash-section-header .clash-section-header-pip-counter { margin: 0 8px 0 auto ; opacity: 1; transition: opacity 250ms linear; } .clash-section-header .clash-section-header-pip-counter.is-section-open { opacity: 0; } .clash-tournament-schedule .clash-tournament-schedule-roster-short-name { font-family: var(--font-display); } .clash-tournament-schedule .clash-tournament-schedule-current-state-name, .clash-tournament-schedule .clash-tournament-schedule-lockedin-subbedout-txt { font-family: var(--font-body); } .clash-tournament-schedule .clash-tournament-schedule-roster-short-name, .clash-tournament-schedule .clash-tournament-schedule-current-state-name, .clash-tournament-schedule .clash-tournament-schedule-lockedin-subbedout-txt { -webkit-user-select: none; } .clash-tournament-schedule .clash-tournament-schedule-roster-short-name, .clash-tournament-schedule .clash-tournament-schedule-current-state-name, .clash-tournament-schedule .clash-tournament-schedule-lockedin-subbedout-txt { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tournament-schedule .clash-tournament-schedule-roster-short-name { text-transform: uppercase; } .clash-tournament-schedule .clash-tournament-schedule-roster-short-name:lang(ko-kr), .clash-tournament-schedule .clash-tournament-schedule-roster-short-name:lang(ja-jp), .clash-tournament-schedule .clash-tournament-schedule-roster-short-name:lang(tr-tr), .clash-tournament-schedule .clash-tournament-schedule-roster-short-name:lang(el-gr), .clash-tournament-schedule .clash-tournament-schedule-roster-short-name:lang(th-th), .clash-tournament-schedule .clash-tournament-schedule-roster-short-name:lang(zh-tw) { text-transform: none; } .clash-tournament-schedule .clash-tournament-schedule-roster-short-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-tournament-schedule .clash-tournament-schedule-roster-short-name:lang(ar-ae) { letter-spacing: 0; } .clash-tournament-schedule .clash-tournament-schedule-current-state-name, .clash-tournament-schedule .clash-tournament-schedule-lockedin-subbedout-txt { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-tournament-schedule .clash-tournament-schedule-current-state-name:lang(ja-jp), .clash-tournament-schedule .clash-tournament-schedule-lockedin-subbedout-txt:lang(ja-jp) { font-size: 13px; } .clash-tournament-schedule .clash-tournament-schedule-current-state-name:lang(ar-ae), .clash-tournament-schedule .clash-tournament-schedule-lockedin-subbedout-txt:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tournament-schedule { position: relative; max-height: 226px; } .clash-tournament-schedule .clash-tournament-schedule-content { padding: 6px 10px; min-height: 70px; } .clash-tournament-schedule .clash-tournament-schedule-current-state-info { display: flex; flex-direction: row; align-items: center; } .clash-tournament-schedule .clash-tournament-schedule-roster-icon { height: 40px; } .clash-tournament-schedule .clash-tournament-schedule-roster-icon img { height: 100%; } .clash-tournament-schedule .clash-tournament-schedule-timer-container { flex-grow: 1; margin: 0 12px; } .clash-tournament-schedule .clash-tournament-schedule-roster-short-name { color: #c8aa6e; } .clash-tournament-schedule .clash-tournament-schedule-current-state-name { color: #cdbe91; } .clash-tournament-schedule .clash-tournament-schedule-open-tournaments-btn { width: 24px; height: 24px; transform: none ; } .clash-tournament-schedule .clash-tournament-schedule-open-tournaments-btn .clash-generic-button-root .clash-generic-button-state.disabled { opacity: 0; } .clash-tournament-schedule .clash-tournament-schedule-lockedin-section { padding: 0 0 0 50px ; display: flex; align-items: center; } .clash-tournament-schedule .clash-tournament-schedule-lockedin-member-icon { height: 32px; width: 32px; margin: 0 -7px; } .clash-tournament-schedule .clash-tournament-schedule-lockedin-subbedout-img { height: 22px; width: 22px; } .clash-tournament-schedule .clash-tournament-schedule-lockedin-subbedout-txt { color: #ff2345; margin-left: 3px; } .clash-tournament-schedule .clash-tournament-schedule-pending-animation-container { height: 36px; margin-top: 4px; margin-left: 10px; display: flex; align-items: center; } .clash-tournament-schedule .clash-tournament-schedule-withdraw-button { float: right ; height: 32px; width: 32px; } .clash-tournament-schedule .clash-tournament-schedule-withdraw-button.is-matchmaking { margin-top: 10px; } .clash-tournament-invite-panel .clash-social-persistent-lockin-countdown { font-family: var(--font-body); } .clash-tournament-invite-panel .clash-social-persistent-lockin-countdown { -webkit-user-select: none; } .clash-tournament-invite-panel .clash-social-persistent-lockin-countdown { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tournament-invite-panel .clash-social-persistent-lockin-countdown { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-tournament-invite-panel .clash-social-persistent-lockin-countdown:lang(ja-jp) { font-size: 13px; } .clash-tournament-invite-panel .clash-social-persistent-lockin-countdown:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tournament-invite-panel { position: relative; } .clash-tournament-invite-panel .clash-tournament-invite-panel-content { display: none; } .clash-tournament-invite-panel .clash-invites-visible { display: block; } .clash-tournament-invite-panel .clash-social-persistent-separator.clash-tournament-invite-scroll-separator { margin: 0 7px; width: calc(100% - 14px); visibility: hidden; } .clash-tournament-invite-panel .clash-social-persistent-separator.clash-tournament-invite-scroll-separator.is-separator-visible { visibility: visible; } .clash-tournament-invite-panel .clash-tournament-invite-panel-invite-list-container { position: relative; } .clash-tournament-invite-panel .clash-tournament-invite-panel-invite-list { position: relative; display: flex; flex-direction: column; justify-content: space-between; max-height: 0; overflow: scroll; transition: max-height 0.12s linear; } .clash-tournament-invite-panel .clash-tournament-invite-panel-invite-list::-webkit-scrollbar { display: none; } .clash-tournament-invite-panel .clash-tournament-invite-panel-invite-list.invites-1 { transition: max-height 0.3s linear; } .clash-tournament-invite-panel .clash-tournament-invite-panel-invite-list.invites-1.open { max-height: 60px; } .clash-tournament-invite-panel .clash-tournament-invite-panel-invite-list.invites-2 { transition: max-height 0.18s linear; } .clash-tournament-invite-panel .clash-tournament-invite-panel-invite-list.invites-2.open { max-height: 120px; } .clash-tournament-invite-panel .clash-tournament-invite-panel-invite-list.open { max-height: 150px; } .clash-tournament-invite-panel .clash-tournament-invite-panel-bottom-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5)); pointer-events: none; } .clash-tournament-invite-panel .clash-tournament-invite-panel-invite { width: 100%; height: 0; transition: height 0.2s ease-in; } .clash-tournament-invite-panel .clash-tournament-invite-panel-invite.is-visible { height: 60px; } .clash-tournament-invite-panel .clash-social-persistent-lockin-countdown { color: #f0e6d2; font-size: 12px; padding-left: 10px; padding-top: 1px; height: 39px; display: flex; align-items: center; } .clash-tournament-invite .clash-tournament-invite-title-text { font-family: var(--font-display); } .clash-tournament-invite .clash-tournament-invite-description { font-family: var(--font-body); } .clash-tournament-invite .clash-tournament-invite-title-text, .clash-tournament-invite .clash-tournament-invite-description { -webkit-user-select: none; } .clash-tournament-invite .clash-tournament-invite-title-text, .clash-tournament-invite .clash-tournament-invite-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tournament-invite .clash-tournament-invite-title-text { text-transform: uppercase; } .clash-tournament-invite .clash-tournament-invite-title-text:lang(ko-kr), .clash-tournament-invite .clash-tournament-invite-title-text:lang(ja-jp), .clash-tournament-invite .clash-tournament-invite-title-text:lang(tr-tr), .clash-tournament-invite .clash-tournament-invite-title-text:lang(el-gr), .clash-tournament-invite .clash-tournament-invite-title-text:lang(th-th), .clash-tournament-invite .clash-tournament-invite-title-text:lang(zh-tw) { text-transform: none; } .clash-tournament-invite .clash-tournament-invite-title-text { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-tournament-invite .clash-tournament-invite-title-text:lang(ar-ae) { letter-spacing: 0; } .clash-tournament-invite .clash-tournament-invite-description { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-tournament-invite .clash-tournament-invite-description:lang(ar-ae) { letter-spacing: 0; } .clash-tournament-invite .clash-tournament-invite-description, .clash-tournament-invite .clash-tournament-invite-description-normal { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tournament-invite { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; opacity: 0; transition: opacity 0.2s ease-in; } .clash-tournament-invite:hover { background: rgba(255,255,255,0.1); } .clash-tournament-invite.is-invite-visible { opacity: 1; } .clash-tournament-invite .clash-tournament-invite-icon { width: 40px; } .clash-tournament-invite .clash-tournament-invite-icon img { width: 100%; } .clash-tournament-invite .clash-tournament-invite-roster-info { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; padding: 0 8px; max-width: 85px; } .clash-tournament-invite .clash-tournament-invite-title { display: flex; align-items: center; } .clash-tournament-invite .clash-tournament-invite-title-text { color: #c8aa6e; } .clash-tournament-invite .clash-tournament-invite-title-sub-icon { height: 20px; width: 20px; margin-left: 3px; } .clash-tournament-invite .clash-tournament-invite-description { color: #a09b8c; font-size: 12px; } .clash-tournament-invite .clash-tournament-invite-description-normal.hidden { display: none; } .clash-tournament-invite .clash-tournament-invite-description-view-roster, .clash-tournament-invite .clash-tournament-invite-description-cancel-invite { display: none; color: #f0e6d2; } .clash-tournament-invite .clash-tournament-invite-description-view-roster.visible, .clash-tournament-invite .clash-tournament-invite-description-cancel-invite.visible { display: inline; } .clash-tournament-invite .clash-tournament-invite-button.clash-tournament-invite-view-roster { width: 32px; height: 32px; margin: 0 0 0 2px ; } .clash-tournament-invite .clash-tournament-invite-button.clash-tournament-invite-view-roster .clash-generic-button-primary-img-container { transform: none ; } .clash-tournament-invite .clash-tournament-invite-button.clash-tournament-invite-view-roster .clash-tournament-invite-view-roster-inner { width: 100%; height: 100%; display: none; } .clash-tournament-invite .clash-tournament-invite-button.clash-tournament-invite-view-roster .clash-tournament-invite-view-roster-inner.view-roster-inner-visible { display: block; } .clash-tournament-invite .clash-tournament-invite-button.clash-tournament-invite-view-roster .clash-generic-button-root .clash-generic-button-state.disabled { visibility: hidden; pointer-events: none; } .clash-tournament-invite .clash-tournament-invite-button.clash-tournament-invite-cancel { width: 24px; height: 24px; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title, .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text { font-family: var(--font-display); } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title, .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text { -webkit-user-select: none; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title, .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title, .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text { text-transform: uppercase; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title:lang(ko-kr), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text:lang(ko-kr), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title:lang(ja-jp), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text:lang(ja-jp), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title:lang(tr-tr), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text:lang(tr-tr), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title:lang(el-gr), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text:lang(el-gr), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title:lang(th-th), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text:lang(th-th), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title:lang(zh-tw), .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text:lang(zh-tw) { text-transform: none; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text:lang(ar-ae) { letter-spacing: 0; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title:lang(ja-jp) { font-size: 13px; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-container { position: relative; background: linear-gradient(to bottom, #0a1428 0%, #8b0000 100%); border-top: 2px solid #44484a; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-content { background: linear-gradient(to top, #1e282d 0%, #27363d 100%); position: relative; padding: 10px 10px 5px 10px; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-body { margin-top: 10px; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-caret-top { position: absolute; top: -22px; right: 20px; height: 25px; width: 50px; background-image: url("/fe/lol-clash/assets/images/withdraw/withdraw-card-arrow-top.png"); background-size: cover; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-title { color: #a09b8c; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-icon { float: left; margin-top: 6px; margin-right: 25px; height: 45px; width: 45px; background-image: url("/fe/lol-clash/assets/images/withdraw/withdraw-icon.png"); background-size: cover; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-status { height: 32px; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-progress-text { color: #cdbe91; font-size: 26px; } .clash-withdraw-status-panel .clash-tournament-schedule-vote-withdraw-btn { width: 36px; height: 36px; float: right; } .clash-withdraw-status-panel .clash-tournament-schedule-vote-withdraw-btn .clash-generic-button-root .clash-generic-button-state.disabled { opacity: 0; } .clash-withdraw-status-panel .clash-tournament-schedule-withdraw-cancel-button { position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; } .clash-withdraw-status-panel .clash-tournament-schedule-vote-block { height: 24px; width: 22px; margin-left: -4px; margin-right: 8px; display: inline-block; background-size: cover; } .clash-withdraw-status-panel .clash-tournament-schedule-vote-block.yes { background-image: url("/fe/lol-clash/assets/images/withdraw/withdraw-yes.png"); } .clash-withdraw-status-panel .clash-tournament-schedule-vote-block.no { background-image: url("/fe/lol-clash/assets/images/withdraw/withdraw-no.png"); } .clash-withdraw-status-panel .clash-tournament-schedule-vote-block.wait { background-image: url("/fe/lol-clash/assets/images/withdraw/withdraw-wait.png"); } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-arrow-toggle { display: flex; align-items: center; justify-content: center; outline: none; border: 0; background: none; min-width: 8px; min-height: 8px; box-sizing: border-box; cursor: pointer; } .clash-arrow-toggle .arrow-toggle { border: 4px solid transparent; margin: 2px 0 -2px; border-top-color: #a09b8c; transform: rotate(-90deg) ; transform-origin: 50% 25%; } .clash-arrow-toggle .arrow-toggle.use-animation { transition: transform 0.2s cubic-bezier(0, 0, 0, 1); } .clash-arrow-toggle .arrow-toggle.open { transform: rotate(0deg); } .clash-arrow-toggle .arrow-toggle.medium { border-width: 6px 4px; margin-top: 4px; } .clash-arrow-toggle.golden { border-top-color: #cdbe91; } .tournament-arrow-hitbox:not(:disabled) { cursor: pointer; } .tournament-arrow-hitbox:hover:not(:disabled) .clash-arrow-toggle .arrow-toggle, .clash-arrow-toggle:hover:not(:disabled) .arrow-toggle { border-top-color: #f0e6d2; } .tournament-arrow-hitbox:active:not(:disabled) .clash-arrow-toggle .arrow-toggle, .clash-arrow-toggle:active:not(:disabled) .arrow-toggle { border-top-color: #cdbe91; } .tournament-arrow-hitbox.active.golden .clash-arrow-toggle .arrow-toggle { border-top-color: #785a28; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game { font-family: var(--font-display); } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-content .clash-scouting-skip-container { font-family: var(--font-body); } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-content .clash-scouting-skip-container { -webkit-user-select: none; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-content .clash-scouting-skip-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier, .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game { text-transform: uppercase; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading:lang(ko-kr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket:lang(ko-kr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier:lang(ko-kr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game:lang(ko-kr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading:lang(ja-jp), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket:lang(ja-jp), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier:lang(ja-jp), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game:lang(ja-jp), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading:lang(tr-tr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket:lang(tr-tr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier:lang(tr-tr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game:lang(tr-tr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading:lang(el-gr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket:lang(el-gr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier:lang(el-gr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game:lang(el-gr), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading:lang(th-th), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket:lang(th-th), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier:lang(th-th), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game:lang(th-th), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading:lang(zh-tw), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket:lang(zh-tw), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier:lang(zh-tw), .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game:lang(zh-tw) { text-transform: none; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket:lang(ar-ae) { letter-spacing: 0; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier:lang(ar-ae) { letter-spacing: 0; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game:lang(ar-ae) { letter-spacing: 0; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading:lang(ja-jp) { font-size: 13px; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading:lang(ar-ae) { letter-spacing: 0; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-content .clash-scouting-skip-container { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-content .clash-scouting-skip-container:lang(ar-ae) { letter-spacing: 0; } .clash-scouting-intro-flow { position: absolute; width: 1280px; height: 720px; left: 0; top: 0; margin: 0; padding: 0 0; background-color: rgba(0,0,0,0.75); } .clash-scouting-intro-flow .clash-scouting-intro-wrapper { position: absolute; height: 100%; width: 100%; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container { position: absolute; top: 100px; left: 0; right: 0; margin: auto; text-align: center; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-heading { color: #cdbe91; opacity: 0; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-bracket { color: #cdbe91; opacity: 0; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-tier { color: #cdbe91; font-family: $fonts_lol_body; opacity: 0; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-text-container .clash-scouting-text-game { color: #785a28; font-family: $fonts_lol_body; opacity: 0; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-content { position: absolute; height: 100%; width: 100%; overflow: hidden; opacity: 0; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-content .scouting-intro-animation-container { position: absolute; height: 100%; width: 100%; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-content .clash-scouting-view-opponent-button-container { position: absolute; margin: auto; left: 0; right: 0; bottom: 100px; display: none; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper .clash-scouting-content .clash-scouting-skip-container { position: absolute; margin: auto; left: 0; right: 0; bottom: 70px; width: 180px; text-align: center; cursor: pointer; text-decoration: underline; } .clash-scouting-intro-flow .clash-scouting-intro-wrapper video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .tournament-end-of-game-flow { -webkit-user-select: none; } .tournament-end-of-game-flow { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .tournament-end-of-game-flow { margin: 0; width: 1280px; height: 720px; position: absolute; left: 0; right: 1; top: 0; bottom: 1; padding: 0 0; } .tournament-end-of-game-flow .clash-loading-spinner-container { opacity: 1; position: absolute; flex: 1 1 auto; display: flex; text-align: left; align-items: center; justify-content: center; height: 330px; width: 100%; top: 186px; } .tournament-end-of-game-flow .clash-loading-spinner-container .loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .tournament-end-of-game-flow .clash-celebration-intro-magic { position: absolute; top: 136px; left: 0; } .tournament-end-of-game-flow .clash-celebration-background-default { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; background: #000; opacity: 1; } .tournament-end-of-game-flow .clash-celebration-background { position: absolute; opacity: 1; left: 0; top: 0; width: 1280px; height: 720px; background-size: 100% 100%; } .tournament-end-of-game-flow .clash-celebration-background.visible.high { opacity: 0; animation: 0.2s linear forwards fadeIn, blurFilter 1s cubic-bezier(0, 0, 0, 1) 1s 1 forwards; } @-webkit-keyframes blurFilter { to { -webkit-filter: blur(2px); } } .tournament-end-of-game-flow .clash-celebration-background.visible.low { opacity: 1; visibility: visible; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .tournament-end-of-game-flow .clash-wrapper { opacity: 0; position: absolute; text-align: left; height: 100%; width: 100%; } .tournament-end-of-game-flow .clash-wrapper.animateFadeOut { animation: 0.5s forwards clash-fade-out; } .tournament-end-of-game-flow .clash-wrapper.animateFadeIn { animation: 0.5s forwards clash-fade-in; } .tournament-end-of-game-flow .clash-reward-pips { position: absolute; bottom: 100px; width: 200px; margin: auto; left: 0; right: 0; display: flex; justify-content: center; align-items: center; } .tournament-end-of-game-flow .clash-reward-pips .clash-reward-pip { height: 2px; width: 2px; background-color: #f00; } .tournament-end-of-game-flow .clash-reward-pips .clash-reward-pip.active { background-color: #008000; } .tournament-end-of-game-flow .clash-reward-pips .clash-reward-pip.complete { background-color: #ff0; } .tournament-end-of-game-flow .clash-banner { width: 100%; background: rgba(0,0,0,0.5); position: absolute; height: 360px; left: 0; } .tournament-end-of-game-flow .clash-top-banner { display: flex; align-items: flex-end; justify-content: center; width: 100%; top: 0; animation: 1s cubic-bezier(0.5, 0, 0, 1) forwards clash-banner-open-large; } .tournament-end-of-game-flow .clash-top-banner::before { content: ""; position: absolute; bottom: 0; left: 0; height: 2px; background-image: -webkit-linear-gradient(left, #32281e 0%, #785a28 50%, #32281e 100%); width: 1280px; } .tournament-end-of-game-flow .clash-top-banner.animate-banner-open-large { animation: 1s cubic-bezier(0.5, 0, 0, 1) forwards clash-banner-open-large; } .tournament-end-of-game-flow .clash-top-banner.animate-banner-open-small { animation: 1s cubic-bezier(0.5, 0, 0, 1) forwards clash-banner-open-small; } .tournament-end-of-game-flow .clash-top-banner.animate-banner-large-small { animation: 0.4s cubic-bezier(0, 0, 0, 1) forwards clash-banner-large-small; } .tournament-end-of-game-flow .clash-top-banner.animate-banner-small-large { animation: 0.4s cubic-bezier(0, 0, 0, 1) forwards clash-banner-small-large; } .tournament-end-of-game-flow .clash-top-banner.animate-banner-close-large { animation: 0.4s cubic-bezier(0, 0, 0, 1) forwards clash-banner-close-large; } .tournament-end-of-game-flow .clash-top-banner.animate-banner-close-small { animation: 0.4s cubic-bezier(0, 0, 0, 1) forwards clash-banner-close-small; } .tournament-end-of-game-flow .clash-bottom-banner { bottom: 0; z-index: initial; animation: 1s cubic-bezier(0.5, 0, 0, 1) forwards clash-banner-open-large; } .tournament-end-of-game-flow .clash-bottom-banner::before { content: ""; position: absolute; top: 0; left: 0; height: 2px; background-image: -webkit-linear-gradient(left, #32281e 0%, #785a28 50%, #32281e 100%); width: 1280px; } .tournament-end-of-game-flow .clash-bottom-banner.animate-banner-open-large { animation: 1s cubic-bezier(0.5, 0, 0, 1) forwards clash-banner-open-large; } .tournament-end-of-game-flow .clash-bottom-banner.animate-banner-open-small { animation: 1s cubic-bezier(0.5, 0, 0, 1) forwards clash-banner-open-small; } .tournament-end-of-game-flow .clash-bottom-banner.animate-banner-large-small { animation: 0.4s cubic-bezier(0, 0, 0, 1) forwards clash-banner-large-small; } .tournament-end-of-game-flow .clash-bottom-banner.animate-banner-small-large { animation: 0.4s cubic-bezier(0, 0, 0, 1) forwards clash-banner-small-large; } .tournament-end-of-game-flow .clash-bottom-banner.animate-banner-close-large { animation: 0.4s cubic-bezier(0, 0, 0, 1) forwards clash-banner-close-large; } .tournament-end-of-game-flow .clash-bottom-banner.animate-banner-close-small { animation: 0.4s cubic-bezier(0, 0, 0, 1) forwards clash-banner-close-small; } .tournament-end-of-game-flow .clash-bottom-banner .next-button-container { position: absolute; width: 120px; margin: auto; left: 0; right: 0; bottom: 30px; } .tournament-end-of-game-flow .clash-bottom-banner .next-button-container #clash-countdown-meter-container { position: absolute; width: 100%; margin-top: 5px; } .tournament-end-of-game-flow .clash-bottom-banner .next-button-container .clash-countdown-meter, .tournament-end-of-game-flow .clash-bottom-banner .next-button-container .clash-countdown-meter-background { position: absolute; transform-origin: left center; } @-webkit-keyframes clash-banner-open-large { from { height: 356px; opacity: 0; } to { height: 80px; opacity: 1; } } @-webkit-keyframes clash-banner-open-small { from { height: 356px; opacity: 0; } to { height: 185px; opacity: 1; } } @-webkit-keyframes clash-banner-close-large { from { height: 80px; opacity: 1; } to { height: 356px; opacity: 0; } } @-webkit-keyframes clash-banner-close-small { from { height: 185px; opacity: 1; } to { height: 356px; opacity: 0; } } @-webkit-keyframes clash-banner-large-small { from { height: 80px; } to { height: 185px; } } @-webkit-keyframes clash-banner-small-large { from { height: 185px; } to { height: 80px; } } @-webkit-keyframes clash-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes clash-fade-in { from { opacity: 0; } to { opacity: 1; } } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title, .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle { font-family: var(--font-display); } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title, .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle { -webkit-user-select: none; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title, .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title, .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle { text-transform: uppercase; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title:lang(ko-kr), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle:lang(ko-kr), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title:lang(ja-jp), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle:lang(ja-jp), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title:lang(tr-tr), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle:lang(tr-tr), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title:lang(el-gr), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle:lang(el-gr), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title:lang(th-th), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle:lang(th-th), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title:lang(zh-tw), .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle:lang(zh-tw) { text-transform: none; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle { text-transform: none; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title:lang(ar-ae) { letter-spacing: 0; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle { letter-spacing: 0.0375em; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-title, .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle { font-family: var(--font-display); } .bracket-celebration { height: 100%; width: 1280px; } .bracket-celebration .clash-eog-bracket-celebration-title-container { position: absolute; top: 112px; left: 0; right: 0; margin: auto; text-align: center; animation: 0.5s linear 3.5s fadeIn; animation-fill-mode: both; } .bracket-celebration .clash-eog-bracket-celebration-title-container .clash-bracket-celebration-subtitle { color: #a09b8c; margin-top: 4px; } .bracket-celebration .end-of-game-modal-content { height: 400px; width: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .bracket-celebration .end-of-game-modal-content.clash-eog-bracket-celebration-content { height: 600px; } .bracket-celebration .end-of-game-modal-content .loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title, .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { font-family: var(--font-display); } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title, .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { -webkit-user-select: none; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title, .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title, .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { text-transform: uppercase; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(ko-kr), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ko-kr), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(ja-jp), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ja-jp), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(tr-tr), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(tr-tr), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(el-gr), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(el-gr), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(th-th), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(th-th), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(zh-tw), .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(zh-tw) { text-transform: none; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { text-transform: none; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(ar-ae) { letter-spacing: 0; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { letter-spacing: 0.0375em; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .capsule-grant-celebration { height: 100%; width: 1280px; } .capsule-grant-celebration .clash-eog-celebration-title-container { position: absolute; top: 112px; left: 0; right: 0; margin: auto; text-align: center; } .capsule-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { color: #a09b8c; margin-top: 4px; } .capsule-grant-celebration .clash-capsule-grant-celebration-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 346px; width: 100%; } .capsule-grant-celebration .clash-capsule-grant-celebration-container .clash-capsule-image-container { position: absolute; top: 23px; left: 0; right: 0; margin: auto; height: 255px; width: 255px; } .capsule-grant-celebration .clash-capsule-grant-celebration-container .clash-capsule-image-container .clash-capsule-grant-frame, .capsule-grant-celebration .clash-capsule-grant-celebration-container .clash-capsule-image-container .clash-capsule-grant-item { position: absolute; height: 100%; width: 100%; } .capsule-grant-celebration .clash-capsule-grant-video-container { position: absolute; height: 255px; width: 255px; } .capsule-grant-celebration .clash-capsule-grant-video-container #clash-capsule-grant-video-state-machine { height: 100%; width: 100%; } .capsule-grant-celebration .clash-capsule-grant-video-container #clash-capsule-grant-video-state-machine video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .capsule-grant-celebration #clash-frame-grant { height: 500px; width: 500px; left: -123px; top: -122px; position: absolute; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title, .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { font-family: var(--font-display); } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title, .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { -webkit-user-select: none; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title, .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title, .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { text-transform: uppercase; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(ko-kr), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ko-kr), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(ja-jp), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ja-jp), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(tr-tr), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(tr-tr), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(el-gr), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(el-gr), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(th-th), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(th-th), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(zh-tw), .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(zh-tw) { text-transform: none; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { text-transform: none; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(ar-ae) { letter-spacing: 0; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { letter-spacing: 0.0375em; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .capsule-upgrade-celebration { height: 100%; width: 1280px; } .capsule-upgrade-celebration .clash-eog-celebration-title-container { position: absolute; top: 112px; left: 0; right: 0; margin: auto; text-align: center; } .capsule-upgrade-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { color: #a09b8c; margin-top: 4px; } .capsule-upgrade-celebration .clash-capsule-upgrade-celebration-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 346px; width: 100%; } .capsule-upgrade-celebration .clash-capsule-upgrade-celebration-container .clash-capsule-image-container { position: absolute; top: 23px; left: 0; right: 0; margin: auto; height: 255px; width: 255px; } .capsule-upgrade-celebration .clash-capsule-upgrade-celebration-container .clash-capsule-image-container .clash-capsule-upgrade-frame, .capsule-upgrade-celebration .clash-capsule-upgrade-celebration-container .clash-capsule-image-container .clash-capsule-upgrade-item { position: absolute; height: 100%; width: 100%; } .capsule-upgrade-celebration .clash-capsule-upgrade-video { position: absolute; height: 255px; width: 255px; } .capsule-upgrade-celebration .clash-capsule-upgrade-video video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #clash-frame-pips { height: 499px; width: 499px; left: -123px; top: -122px; position: absolute; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title, .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text { font-family: var(--font-display); } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title, .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text { -webkit-user-select: none; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title, .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title, .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text { text-transform: uppercase; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title:lang(ko-kr), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle:lang(ko-kr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text:lang(ko-kr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display:lang(ko-kr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier:lang(ko-kr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display:lang(ko-kr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text:lang(ko-kr), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title:lang(ja-jp), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle:lang(ja-jp), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text:lang(ja-jp), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display:lang(ja-jp), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier:lang(ja-jp), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display:lang(ja-jp), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text:lang(ja-jp), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title:lang(tr-tr), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle:lang(tr-tr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text:lang(tr-tr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display:lang(tr-tr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier:lang(tr-tr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display:lang(tr-tr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text:lang(tr-tr), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title:lang(el-gr), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle:lang(el-gr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text:lang(el-gr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display:lang(el-gr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier:lang(el-gr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display:lang(el-gr), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text:lang(el-gr), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title:lang(th-th), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle:lang(th-th), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text:lang(th-th), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display:lang(th-th), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier:lang(th-th), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display:lang(th-th), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text:lang(th-th), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title:lang(zh-tw), .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle:lang(zh-tw), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text:lang(zh-tw), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display:lang(zh-tw), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier:lang(zh-tw), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display:lang(zh-tw), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text:lang(zh-tw) { text-transform: none; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle { text-transform: none; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display:lang(ar-ae) { letter-spacing: 0; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-title:lang(ar-ae), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display:lang(ar-ae) { letter-spacing: 0; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle { letter-spacing: 0.0375em; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text:lang(ja-jp), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier:lang(ja-jp), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text:lang(ja-jp) { font-size: 13px; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text:lang(ar-ae), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier:lang(ar-ae), .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text:lang(ar-ae) { letter-spacing: 0; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .vp-grant-celebration { position: absolute; height: 100%; width: 1280px; top: 0; left: 0; } .vp-grant-celebration .clash-reward-display-container { opacity: 0; } .vp-grant-celebration .clash-eog-celebration-vp-title-container { position: absolute; top: 112px; left: 0; right: 0; margin: auto; text-align: center; } .vp-grant-celebration .clash-eog-celebration-vp-title-container .clash-celebration-subtitle { color: #a09b8c; margin-top: 4px; } .vp-grant-celebration .clash-vp-grant-celebration-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 346px; width: 600px; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container { position: absolute; right: 0; text-align: center; width: 130px; height: 130px; bottom: 125px; opacity: 0; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-background { position: absolute; height: 100%; width: 100%; background-image: url("/fe/lol-clash/assets/images/celebration/bonus-vp-ticks.svg"); opacity: 0.5; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-background-circle-outline { position: absolute; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-text { position: relative; text-align: center; margin-top: 25px; color: #a09b8c; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-display { position: relative; text-align: center; font-style: italic; letter-spacing: 0.01em; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-bonus-vp-container .bonus-vp-tier { position: relative; text-align: center; margin-top: 6px; color: #a09b8c; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper { height: 100%; width: 100%; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper.animateFadeOut { animation: 0.5s forwards clash-fade-out; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper.animateFadeIn { animation: 0.5s forwards clash-fade-in; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container { width: 256px; height: 256px; position: relative; margin: auto; top: 23px; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals { height: 100%; width: 100%; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals .clash-vp-progress-circle { position: absolute; margin: auto; left: 0; right: 0; width: 256px; height: 256px; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals .clash-vp-progress-circle img { position: absolute; height: 100%; width: 100%; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals .clash-vp-progress-circle #clash-vp-meter-regular, .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals .clash-vp-progress-circle #clash-vp-meter-bonus { position: absolute; height: 250px; width: 250px; top: 5px; left: 3px; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals .vp-reward-image-container { position: absolute; width: 100%; height: 100%; -webkit-mask-image: url("/fe/lol-clash/assets/images/hub/vp-progress-reward-mask.png"); -webkit-mask-size: cover; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals .vp-reward-image-container .vp-reward-image-flag { position: absolute; width: 170px; height: 170px; left: 43px; top: 43px; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals .vp-reward-image-container .banner { display: block; position: absolute; transform-origin: 0 50%; width: 92px; height: 159px; top: 76px; left: 87px; background-size: cover; background-repeat: no-repeat; transform: rotate3d(-4.5, 2.4, -1.25, 46deg); } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals .vp-reward-image-container .vp-reward-image-logo { position: absolute; width: 128px; height: 128px; left: 64px; top: 64px; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals .vp-reward-image-container.fade { opacity: 0.4; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .clash-vp-container .clash-vp-container-visuals .clash-vp-reward-complete-image { -webkit-mask-image: url("/fe/lol-clash/assets/images/hub/vp-progress-mask.png"); -webkit-mask-size: cover; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display { position: relative; text-align: center; margin-top: 10px; } .vp-grant-celebration .clash-vp-grant-celebration-container .clash-vp-view-wrapper .vp-display-text { position: relative; text-align: center; margin-top: 8px; color: #a09b8c; } .vp-grant-celebration .reward-complete-video { position: absolute; left: 0; right: 0; margin: auto; height: 256px; width: 256px; top: 256px; } .vp-grant-celebration .reward-complete-video video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title, .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle, .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description { font-family: var(--font-display); } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title, .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle, .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description { -webkit-user-select: none; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title, .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle, .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title, .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle, .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description { text-transform: uppercase; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(ko-kr), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ko-kr), .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description:lang(ko-kr), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(ja-jp), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ja-jp), .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description:lang(ja-jp), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(tr-tr), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(tr-tr), .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description:lang(tr-tr), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(el-gr), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(el-gr), .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description:lang(el-gr), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(th-th), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(th-th), .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description:lang(th-th), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(zh-tw), .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(zh-tw), .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description:lang(zh-tw) { text-transform: none; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { text-transform: none; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-title:lang(ar-ae) { letter-spacing: 0; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description:lang(ar-ae) { letter-spacing: 0; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { letter-spacing: 0.0375em; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .reward-grant-celebration { position: absolute; height: 100%; width: 1280px; top: 0; left: 0; } .reward-grant-celebration .clash-eog-reward-grant-background { position: absolute; height: 100%; width: 100%; } .reward-grant-celebration .clash-eog-reward-grant-background.animateFadeIn { animation: 0.1s forwards clash-fade-in; } .reward-grant-celebration .clash-eog-celebration-title-container { position: absolute; top: 112px; left: 0; right: 0; margin: auto; text-align: center; } .reward-grant-celebration .clash-eog-celebration-title-container .clash-celebration-subtitle { color: #a09b8c; margin-top: 4px; } .reward-grant-celebration .clash-reward-grant-celebration-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 346px; width: 100%; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-background-image { position: absolute; height: 100%; width: 100%; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-image-container { height: 290px; width: 290px; position: absolute; margin: 28px auto; left: 0; right: 0; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-image-container .clash-reward-banner-frame, .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-image-container .clash-reward-banner-frame-shadow, .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-image-container .clash-reward-banner-image, .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-image-container .clash-reward-image { position: absolute; height: 100%; width: 100%; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-image-container .banner { display: block; position: absolute; transform-origin: 0 50%; width: 146px; height: 248px; top: 57px; left: 82px; background-size: cover; background-repeat: no-repeat; transform: rotate3d(-4.5, 2.4, -1.25, 46deg); } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-image-container .clash-reward-frame-image { position: absolute; top: 40px; height: 60%; width: 100%; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-image-container .clash-reward-image-summoner-icon { position: absolute; height: 60%; width: 60%; margin: auto; left: 0; right: 0; top: 20%; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-animation-container { height: 290px; width: 290px; position: absolute; margin: 28px auto; left: 0; right: 0; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-animation-container .clash-reward-animation-lottie-container { height: 900px; width: 720px; position: absolute; margin: auto; top: -285px; left: -215px; right: 0; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-animation-container #frameIntroVideo { position: absolute; height: 100%; width: 100%; margin: auto; } .reward-grant-celebration .clash-reward-grant-celebration-container .clash-reward-text-description { position: absolute; bottom: 18px; margin: auto; left: 0; right: 0; color: #c8aa6e; text-align: center; } .reward-grant-celebration video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description, .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title { font-family: var(--font-display); } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-subtitle { font-family: var(--font-body); } .clash-eos-celebration, .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description, .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title, .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-subtitle { -webkit-user-select: none; } .clash-eos-celebration, .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description, .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title, .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-subtitle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description, .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title { text-transform: uppercase; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description:lang(ko-kr), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title:lang(ko-kr), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description:lang(ja-jp), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title:lang(ja-jp), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description:lang(tr-tr), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title:lang(tr-tr), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description:lang(el-gr), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title:lang(el-gr), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description:lang(th-th), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title:lang(th-th), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description:lang(zh-tw), .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title:lang(zh-tw) { text-transform: none; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-title:lang(ar-ae) { letter-spacing: 0; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description:lang(ar-ae) { letter-spacing: 0; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-subtitle { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-subtitle:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-eos-celebration { margin: 0; width: 1280px; height: 720px; position: absolute; left: 0; right: 1; top: 0; bottom: 1; padding: 0 0; } .clash-eos-celebration .clash-eos-celebration-wrapper { height: 100%; width: 100%; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-background { position: absolute; height: 100%; width: 100%; opacity: 0; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-background.visible { animation: 0.5s linear 0.6s fadeIn; animation-fill-mode: both; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents { position: relative; display: flex; justify-content: space-evenly; align-items: center; width: 100%; opacity: 0; margin-top: -40px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents.visible { animation: 0.5s linear 0.6s fadeIn; animation-fill-mode: both; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents.tier-2 { margin-top: -70px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry { height: 300px; width: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description { position: absolute; bottom: 15px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description.tier-1 { bottom: -30px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-contents-entry-description.tier-2 { bottom: -50px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-contents-wrapper .clash-eos-celebration-contents .clash-eos-contents-entry .clash-eos-logo-image { height: 100px; width: 100px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container { position: absolute; top: 100px; left: 0; right: 0; margin: auto; text-align: center; opacity: 0; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container.visible { animation: 0.5s linear 0.6s fadeIn; animation-fill-mode: both; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container.tier-1 { top: 50px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container.tier-2 { top: 27px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-subtitle { color: #a09b8c; margin-top: 4px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-title-container .clash-eos-celebration-subtitle b { color: #f0e6d2; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-close-button-container { position: absolute; width: 160px; margin: auto; left: 0; right: 0; bottom: 80px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-close-button-container.tier-1 { bottom: 50px; } .clash-eos-celebration .clash-eos-celebration-wrapper .clash-eos-celebration-close-button-container.tier-2 { bottom: 35px; } .clash-eos-celebration .clash-eos-celebration-video-container { position: absolute; height: 100%; width: 100%; top: 0; } .clash-eos-celebration .clash-eos-celebration-video-container video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-ticket-offer-notification-title, .clash-ticket-offer-notification-sender { font-family: var(--font-display); } .clash-ticket-offer-notification-description { font-family: var(--font-body); } .clash-ticket-offer-notification-title, .clash-ticket-offer-notification-sender, .clash-ticket-offer-notification-description { -webkit-user-select: none; } .clash-ticket-offer-notification-title, .clash-ticket-offer-notification-sender, .clash-ticket-offer-notification-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-ticket-offer-notification-title, .clash-ticket-offer-notification-sender { text-transform: uppercase; } .clash-ticket-offer-notification-title:lang(ko-kr), .clash-ticket-offer-notification-sender:lang(ko-kr), .clash-ticket-offer-notification-title:lang(ja-jp), .clash-ticket-offer-notification-sender:lang(ja-jp), .clash-ticket-offer-notification-title:lang(tr-tr), .clash-ticket-offer-notification-sender:lang(tr-tr), .clash-ticket-offer-notification-title:lang(el-gr), .clash-ticket-offer-notification-sender:lang(el-gr), .clash-ticket-offer-notification-title:lang(th-th), .clash-ticket-offer-notification-sender:lang(th-th), .clash-ticket-offer-notification-title:lang(zh-tw), .clash-ticket-offer-notification-sender:lang(zh-tw) { text-transform: none; } .clash-ticket-offer-notification-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-ticket-offer-notification-title:lang(ar-ae) { letter-spacing: 0; } .clash-ticket-offer-notification-sender { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-ticket-offer-notification-sender:lang(ar-ae) { letter-spacing: 0; } .clash-ticket-offer-notification-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .clash-ticket-offer-notification-description:lang(ja-jp) { font-size: 13px; } .clash-ticket-offer-notification-description:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-ticket-offer-notification { direction: ltr; width: 416px; padding-bottom: 55px; } .clash-ticket-offer-notification-background { position: relative; height: 246px; width: 100%; } .clash-ticket-offer-notification-text { position: relative; text-align: center; padding: 0 40px; pointer-events: none; } .clash-ticket-offer-notification-sender { padding: 17px 0; display: flex; align-items: center; justify-content: center; } .clash-ticket-offer-notification-sender .clash-ticket-offer-summoner-icon { position: relative; width: 32px; height: 32px; margin: 0 10px; display: flex; align-items: center; justify-content: center; } .clash-ticket-offer-notification-sender .clash-roster-member-empty-summoner-icon { height: 100%; } .clash-ticket-offer-notification-sender .clash-ticket-offer-from { color: #a09b8c; } .clash-ticket-offer-notification-sender .clash-ticket-offer-summoner-name { color: #c89b3c; } .clash-ticket-offer-notification-button-container { position: relative; margin-left: auto; display: flex; align-items: center; } .clash-ticket-offer-notification-button-accept { width: 36px; height: 36px; } .clash-ticket-offer-notification-button-decline { width: 14px; height: 14px; margin: 0 10px; } .clash-view-roster-modal .clash-view-roster-modal-warning-text { font-family: var(--font-body); } .clash-view-roster-modal .clash-view-roster-modal-warning-text { -webkit-user-select: none; } .clash-view-roster-modal .clash-view-roster-modal-warning-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-view-roster-modal .clash-view-roster-modal-warning-text { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-view-roster-modal .clash-view-roster-modal-warning-text:lang(ja-jp) { font-size: 13px; } .clash-view-roster-modal .clash-view-roster-modal-warning-text:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-view-roster-modal { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: default; overflow: hidden; background-color: #040d18; animation: 0.5s fadein ease-out both; } .clash-view-roster-modal .clash-view-roster-modal-roster-layout { width: 665px; animation: 0.5s fadein ease-out 0.5s both; } .clash-view-roster-modal .clash-view-roster-modal-countdown { direction: ltr; margin-top: 50px; animation: 0.5s fadein ease-out 0.5s both; } .clash-view-roster-modal .clash-view-roster-modal-warning-text { margin-top: 10px; max-width: 250px; text-align: center; } @-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; } } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-roster-layout { flex: 1; display: flex; flex-direction: column; position: relative; } .clash-roster-layout-background { position: absolute; top: -66px; left: 50%; transform: translateX(-50%); width: 85%; opacity: 0.08; pointer-events: none; -webkit-filter: blur(3px); } .clash-tier-placement-tooltip-title { font-family: var(--font-display); } .clash-tier-placement-tooltip-member-name { font-family: var(--font-body); } .clash-tier-placement-tooltip-title, .clash-tier-placement-tooltip-member-name { -webkit-user-select: none; } .clash-tier-placement-tooltip-title, .clash-tier-placement-tooltip-member-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tier-placement-tooltip-title { text-transform: uppercase; } .clash-tier-placement-tooltip-title:lang(ko-kr), .clash-tier-placement-tooltip-title:lang(ja-jp), .clash-tier-placement-tooltip-title:lang(tr-tr), .clash-tier-placement-tooltip-title:lang(el-gr), .clash-tier-placement-tooltip-title:lang(th-th), .clash-tier-placement-tooltip-title:lang(zh-tw) { text-transform: none; } .clash-tier-placement-tooltip-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-tier-placement-tooltip-title:lang(ar-ae) { letter-spacing: 0; } .clash-tier-placement-tooltip-member-name { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .clash-tier-placement-tooltip-member-name:lang(ja-jp) { font-size: 13px; } .clash-tier-placement-tooltip-member-name:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tier-placement { position: relative; } .clash-tier-placement #introVideo video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 84px; } .clash-tier-placement-tooltip { position: relative; width: 350px; white-space: normal; } .clash-tier-placement-tooltip-membertiers { position: relative; width: 300px; white-space: normal; padding: 0 15px; } .clash-tier-placement-tooltip-member { display: flex; min-height: 50px; display: flex; align-items: center; border-bottom: thin solid rgba(255,255,255,0.22); } .clash-tier-placement-tooltip-member:last-child { border-bottom: 0; } .clash-tier-placement-tooltip-title { font-size: 14px; color: #f0e6d2; margin-bottom: 6px; } .clash-tier-placement-tooltip-member-name { color: #a09b8c; } .clash-tier-placement-tooltip-tier { margin-left: auto; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-roster-team-logo-background { position: absolute; width: 350px; height: 350px; right: -100px; opacity: 0.17; } .clash-roster-team-logo-background .clash-roster-team-logo-background-image { position: absolute; width: 100%; height: 100%; } .clash-roster-team-logo-background .clash-roster-team-logo-background-overlay-gradient { position: absolute; width: 100%; height: 100%; background: linear-gradient(270.5deg, #000 0.43%, rgba(0,0,0,0) 80.18%); } .clash-roster-details-visual-team { position: absolute; } .clash-roster-details { position: relative; direction: ltr; height: 84px; min-height: 84px; padding: 0 10px 0 0 ; background-color: rgba(40,45,56,0.75); display: flex; align-items: center; justify-content: center; overflow: hidden; } .clash-roster-details.is-roster-details-editable:hover { border-image: linear-gradient(to bottom, #c8aa6e, #785a28) 1 stretch; } .clash-roster-details:not(.is-roster-details-editable) { border: thin solid transparent; } .clash-roster-details .clash-roster-details-edit-icon { position: absolute; right: 22px; width: 18px; height: 18px; opacity: 1; } .clash-roster-details .clash-roster-details-edit-icon.editable { cursor: pointer; } .clash-roster-details .clash-roster-details-edit-icon img { height: 100%; } .clash-roster-details.is-roster-details-editable .clash-roster-details-edit-icon { background-image: url("/fe/lol-clash/assets/images/buttons/icon-lock.png"); background-repeat: no-repeat; background-size: cover; } .clash-roster-details.is-roster-details-editable .clash-roster-details-edit-icon:hover { background-image: url("/fe/lol-clash/assets/images/buttons/icon-lock-over.png"); } .clash-roster-details.is-roster-details-editable.is-captain .clash-roster-details-edit-icon { background: url("/fe/lol-clash/assets/images/buttons/icon-edit.png"); background-repeat: no-repeat; background-size: cover; } .clash-roster-details.is-roster-details-editable.is-captain .clash-roster-details-edit-icon:hover { background-image: url("/fe/lol-clash/assets/images/buttons/icon-edit-over.png"); } .clash-roster-details:not(.is-roster-details-editable) .clash-roster-details-edit-icon { background-image: url("/fe/lol-clash/assets/images/buttons/icon-lock.png"); background-repeat: no-repeat; background-size: cover; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-roster-member-list { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; } .ticket-dropdown-header { font-family: var(--font-display); } .clash-roster-member .clash-roster-member-summoner-name, .clash-roster-member .clash-roster-member-visual-state, .clash-roster-member .clash-roster-member-empty-slot-text { font-family: var(--font-body); } .clash-roster-member .clash-roster-member-summoner-name, .clash-roster-member .clash-roster-member-visual-state, .clash-roster-member .clash-roster-member-empty-slot-text, .ticket-dropdown-header { -webkit-user-select: none; } .clash-roster-member .clash-roster-member-summoner-name, .clash-roster-member .clash-roster-member-visual-state, .clash-roster-member .clash-roster-member-empty-slot-text, .ticket-dropdown-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .ticket-dropdown-header { text-transform: uppercase; } .ticket-dropdown-header:lang(ko-kr), .ticket-dropdown-header:lang(ja-jp), .ticket-dropdown-header:lang(tr-tr), .ticket-dropdown-header:lang(el-gr), .ticket-dropdown-header:lang(th-th), .ticket-dropdown-header:lang(zh-tw) { text-transform: none; } .ticket-dropdown-header { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .ticket-dropdown-header:lang(ar-ae) { letter-spacing: 0; } .clash-roster-member .clash-roster-member-summoner-name, .clash-roster-member .clash-roster-member-visual-state, .clash-roster-member .clash-roster-member-empty-slot-text { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-roster-member .clash-roster-member-summoner-name:lang(ar-ae), .clash-roster-member .clash-roster-member-visual-state:lang(ar-ae), .clash-roster-member .clash-roster-member-empty-slot-text:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-roster-member .clash-roster-member-right-align-container, .clash-roster-member .clash-roster-member-right-align-col-0, .clash-roster-member .clash-roster-member-right-align-col-1, .clash-roster-member .clash-roster-member-right-align-col-2 { width: 0; height: 0; } .clash-roster-member .clash-roster-member-captain-icon, .clash-roster-member .clash-roster-member-sub-icon, .clash-roster-member .clash-roster-member-ticket-selector, .clash-roster-member .clash-roster-member-position-selector, .clash-roster-member .clash-roster-member-blocking-action-button { transform: translate(-50%, -50%); position: relative; } .clash-roster-member .clash-roster-member-summoner-name, .clash-roster-member .clash-roster-member-visual-state, .clash-roster-member .clash-roster-member-empty-slot-text { color: #5b5a56; font-size: 14px; } .clash-roster-member { direction: ltr; position: relative; min-height: 52px; max-height: 52px; margin-left: 3px; border: 0; border-bottom: thin solid; border-image: linear-gradient(to right, transparent, rgba(255,255,255,0.22) 10%, rgba(255,255,255,0.22) 90%, transparent) 1; display: flex; flex-direction: row; align-items: center; } .clash-roster-member.clash-roster-member-local { min-height: 102px; max-height: 102px; } .clash-roster-member:not(.is-being-viewed):hover { background: linear-gradient(to right, transparent, rgba(255,255,255,0.1) 10%, rgba(255,255,255,0.1) 90%, transparent); } .clash-roster-member .clash-roster-member-pending-or-invite-container { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; cursor: pointer; } .clash-roster-member .clash-roster-member-name-state-section { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-left: 13px; } .clash-roster-member .clash-roster-member-name-state-section:lang(ar-ae) { margin-right: 13px; } .clash-roster-member.clash-roster-member-local .clash-roster-member-name-state-section { margin-left: 13px; } .clash-roster-member.clash-roster-member-local .clash-roster-member-name-state-section:lang(ar-ae) { margin-right: 13px; } .clash-roster-member .clash-roster-member-right-align-container { direction: ltr ; flex: 1; display: flex; flex-direction: row ; justify-content: flex-end; } .clash-roster-member .clash-roster-member-right-align-col-0 { margin: 0 50px 0 0; } .clash-roster-member .clash-roster-member-right-align-col-0:lang(ar-ae) { margin: 0 0 0 50px; } .clash-roster-member .clash-roster-member-right-align-col-1 { margin: 0 130px 0 0; } .clash-roster-member .clash-roster-member-right-align-col-1:lang(ar-ae) { margin: 0 0 0 130px; } .clash-roster-member .clash-roster-member-right-align-col-2 { margin: 0 122px 0 0; } .clash-roster-member .clash-roster-member-right-align-col-2:lang(ar-ae) { margin: 0 0 0 122px; } .clash-roster-member .clash-roster-member-info-icon { width: 20px; height: 20px; margin: 0 5px; } .clash-roster-member .clash-roster-member-info-icon img { width: 100%; } .clash-roster-member.clash-roster-member-local .clash-roster-member-info-icon { display: none; } .clash-roster-member .clash-roster-member-summoner-icon { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .clash-roster-member.clash-roster-member-local .clash-roster-member-summoner-icon { width: 56px; height: 56px; margin-left: 18px; position: relative; } .clash-roster-member.clash-roster-member-local .clash-roster-member-summoner-icon .clash-image-ring-spinner { display: flex; position: absolute; pointer-events: none; } .clash-roster-member.clash-roster-member-local .clash-roster-member-summoner-icon .clash-image-ring-spinner.animated { top: -8px; left: -8px; width: 72px; height: 72px; animation: summoner-object-spin 1s cubic-bezier(0, 0, 0.43, 0.7), summoner-object-spin 1.55s linear infinite; animation-delay: 0s, 1s; background: url("/fe/lol-clash/assets/images/roster/player-object-spinner-gold.png") no-repeat; } .clash-roster-member.clash-roster-member-local .clash-roster-member-summoner-icon .clash-image-ring-spinner.not-animated { top: 0px; left: 0px; height: 56px; width: 56px; background-size: 100%; background-repeat: no-repeat; background-image: url("/fe/lol-clash/assets/images/roster/player-ring-bright-m.png"); } .clash-roster-member .clash-roster-member-empty-summoner-icon { height: 100%; } .clash-roster-member .clash-roster-member-sms-verification-icon { width: 8px; margin-left: 2px; } .clash-roster-member .clash-roster-member-summoner-name { margin-top: 2px; color: #a09b8c; } .clash-roster-member.clash-roster-member-local .clash-roster-member-summoner-name { color: #fabe0a; } .clash-roster-member .clash-roster-member-visual-state { width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; margin-top: -2px; } .clash-roster-member .clash-roster-member-visual-state.inviting, .clash-roster-member .clash-roster-member-visual-state.FORCED_NOT_READY, .clash-roster-member .clash-roster-member-visual-state.NOT_READY, .clash-roster-member .clash-roster-member-visual-state.ticket_selected, .clash-roster-member .clash-roster-member-visual-state.is_subbed_out, .clash-roster-member .clash-roster-member-visual-state.sub_for_other_team { color: #ff2345; } .clash-roster-member .clash-roster-member-visual-state.PENDING, .clash-roster-member .clash-roster-member-visual-state.waiting_for_phase, .clash-roster-member .clash-roster-member-visual-state.READY, .clash-roster-member .clash-roster-member-visual-state.in_queue { color: #5b5a56; } .clash-roster-member .clash-roster-member-captain-icon { position: relative; width: 24px; display: flex; align-items: center; justify-content: center; } .clash-roster-member .clash-roster-member-captain-icon img { width: 100%; } .clash-roster-member .clash-roster-member-sub-icon { width: 32px; height: 32px; } .clash-roster-member .clash-roster-member-sub-icon.hide { display: none; } .clash-roster-member .clash-ticket-selector-contents { transform: translate(50%, 0%); margin-right: 180px; } .clash-roster-member .clash-ticket-selector-contents:lang(ar-ae) { transform: translate(-50%, 0%); margin-left: 180px; } .clash-roster-member .clash-roster-member-ticket-selector { height: 48px; width: 144px; position: relative; } .clash-roster-member.clash-roster-member-local .clash-roster-member-ticket-selector { height: 78px; width: 142px; text-align: center; } .clash-roster-member .clash-roster-member-position-selector { height: 24px; width: 24px; position: relative; } .clash-roster-member.clash-roster-member-local .clash-roster-member-position-selector { height: 56px; width: 56px; } .clash-roster-member .clash-roster-member-position-pending { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: center; transform: none ; } .clash-roster-member .clash-roster-member-blocking-action-button { width: fit-content; margin-left: -22px; } .clash-roster-member .clash-roster-member-actions { width: 14px; height: 14px; margin-right: 10px; } .clash-roster-member .clash-roster-member-invite-button { width: 32px; height: 32px; } .clash-roster-member .clash-roster-member-empty-slot-text { margin: 0 0 0 13px; } .clash-roster-member .clash-roster-member-empty-slot-text:lang(ar-ae) { margin: 0 13px 0 0; } .clash-roster-member .clash-roster-member-streak-container { position: absolute; opacity: 0; bottom: -2px; pointer-events: none; left: -50px; } .clash-roster-member #introVideo video { position: absolute; top: 51%; left: 39%; transform: translate(-50%, -50%); } .clash-roster-member #captainIconVideo video { position: absolute; top: 62%; left: 50%; transform: translate(-50%, -50%); } .ticket-dropdown-header { height: 100%; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; border-bottom: thin solid #463714; } .ticket-dropdown-header-ticket-icon { height: 60%; margin: 0 5px; min-width: 24px; } .clash-ticket-selector-item { height: 100%; width: 100%; display: flex; align-items: center; } .clash-ticket-selector-item img { height: 50%; margin-left: auto; } .clash-roster-member-availability-icon { position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: 2px solid transparent; flex-shrink: 0; background: #010a13; box-shadow: 0 0 0 2px #010a13; } .clash-roster-member-availability-icon.chat, .clash-roster-member-availability-icon.available, .clash-roster-member-availability-icon.online { background-color: #09a646; border-color: #66f8a0; } .clash-roster-member-availability-icon.dnd, .clash-roster-member-availability-icon.spectating { background-color: #005176; border-color: #0ac5e1; } .clash-roster-member-availability-icon.away { border-color: #9c3213; } .clash-roster-member-availability-icon.offline { border-color: #9c988a; } .clash-roster-member-availability-icon.mobile { width: 7px; height: 11px; margin: 0px 5px 1px 1px; border-radius: 2px; background: #010a13 url("/fe/lol-clash/assets/images/roster/status_mobile.png") no-repeat center; background-size: 16px; } .clash-roster-member-availability-icon.not-friend { border-color: #9c988a; } @-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); } } .clash-player-positions { position: relative; height: 100%; width: 100%; } .clash-position-selector-background { position: absolute; height: 100%; width: 100%; pointer-events: none; cursor: default; } .clash-position-selector-background.disabled { cursor: default; pointer-events: none; } .clash-position-selector-background .clash-position-selector-contents { width: 100%; height: 100%; pointer-events: none; } .clash-position-selector-background .clash-position-icon { position: absolute; width: 100%; height: 100%; pointer-events: none; background-size: cover; transition: opacity 500ms cubic-bezier(0, 0, 0, 1); margin: auto; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.5; } .clash-position-selector-background .clash-position-icon.local { opacity: 1; } .clash-position-selector-background.enabled { height: 100%; width: 100%; cursor: pointer; pointer-events: auto; } .clash-position-selector-background.enabled::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-image: url(/fe/lol-clash/button.png); background-repeat: no-repeat; pointer-events: none; } .clash-position-selector-background.enabled:hover::before { background-image: url(/fe/lol-clash/button-hover.png); } .clash-position-selector-background.enabled.disabled::before { background-image: url(/fe/lol-clash/button-disabled.png); } .clash-position-selector-background.enabled .clash-position-icon { width: 48%; height: 48%; } .clash-position-selector-background[data-position="BOTTOM"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-bottom.png); } .clash-position-selector-background[data-position="TOP"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-top.png); } .clash-position-selector-background[data-position="JUNGLE"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-jungle.png); } .clash-position-selector-background[data-position="MIDDLE"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-middle.png); } .clash-position-selector-background[data-position="UTILITY"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-utility.png); } .clash-position-selector-background[data-position="FILL"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-fill.png); } .clash-position-selector-background[data-position="UNSELECTED"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-unselected.png); } .clash-position-selector-background:hover[data-position="BOTTOM"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-bottom-hover.png); } .clash-position-selector-background:hover[data-position="TOP"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-top-hover.png); } .clash-position-selector-background:hover[data-position="JUNGLE"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-jungle-hover.png); } .clash-position-selector-background:hover[data-position="MIDDLE"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-middle-hover.png); } .clash-position-selector-background:hover[data-position="UTILITY"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-utility-hover.png); } .clash-position-selector-background:hover[data-position="FILL"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-fill-hover.png); } .clash-position-selector-background:hover[data-position="UNSELECTED"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-unselected-hover.png); } .clash-position-selector-background.disabled[data-position="BOTTOM"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-bottom-disabled.png); } .clash-position-selector-background.disabled[data-position="TOP"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-top-disabled.png); } .clash-position-selector-background.disabled[data-position="JUNGLE"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-jungle-disabled.png); } .clash-position-selector-background.disabled[data-position="MIDDLE"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-middle-disabled.png); } .clash-position-selector-background.disabled[data-position="UTILITY"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-utility-disabled.png); } .clash-position-selector-background.disabled[data-position="FILL"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-fill-disabled.png); } .clash-position-selector-background.disabled[data-position="UNSELECTED"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-unselected-disabled.png); } .clash-position-selector-background.state-blue[data-position="BOTTOM"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-bottom-blue.png); } .clash-position-selector-background.state-blue[data-position="TOP"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-top-blue.png); } .clash-position-selector-background.state-blue[data-position="JUNGLE"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-jungle-blue.png); } .clash-position-selector-background.state-blue[data-position="MIDDLE"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-middle-blue.png); } .clash-position-selector-background.state-blue[data-position="UTILITY"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-utility-blue.png); } .clash-position-selector-background.state-blue[data-position="FILL"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-fill-blue.png); } .clash-position-selector-background.state-blue[data-position="UNSELECTED"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-unselected-blue.png); } .clash-position-selector-background.state-blue:hover[data-position="BOTTOM"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-bottom-blue-hover.png); } .clash-position-selector-background.state-blue:hover[data-position="TOP"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-top-blue-hover.png); } .clash-position-selector-background.state-blue:hover[data-position="JUNGLE"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-jungle-blue-hover.png); } .clash-position-selector-background.state-blue:hover[data-position="MIDDLE"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-middle-blue-hover.png); } .clash-position-selector-background.state-blue:hover[data-position="UTILITY"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-utility-blue-hover.png); } .clash-position-selector-background.state-blue:hover[data-position="FILL"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-fill-blue-hover.png); } .clash-position-selector-background.state-blue:hover[data-position="UNSELECTED"] .clash-position-icon { background-image: url(/fe/lol-clash/icon-position-unselected-blue-hover.png); } .clash-position-text { font-family: var(--font-display); } .clash-position-text { -webkit-user-select: none; } .clash-position-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-position-text { text-transform: uppercase; } .clash-position-text:lang(ko-kr), .clash-position-text:lang(ja-jp), .clash-position-text:lang(tr-tr), .clash-position-text:lang(el-gr), .clash-position-text:lang(th-th), .clash-position-text:lang(zh-tw) { text-transform: none; } .clash-position-text { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-position-text:lang(ar-ae) { letter-spacing: 0; } .clash-position-selector-modal lol-uikit-full-page-backdrop { overflow: hidden; } .clash-position-selector { position: absolute; } .clash-position-selector-small-backdrop { position: relative; background: radial-gradient(ellipse at center, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.46) 57%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%); width: 400px; height: 400px; } .clash-position-text { position: absolute; width: 230px; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; opacity: 1; } .clash-position-text.position-text-utility { text-align: left; left: auto ; margin-left: 45px; } .clash-position-text.position-text-top { left: -245px; text-align: right; } .clash-position-text.position-text-middle { top: -37.5px; left: -100px; } .clash-position-text.position-text-jungle { left: -245px; text-align: right; } .clash-position-text.position-text-bottom { left: auto ; text-align: left; margin-left: 45px; } .clash-position-text.position-text-fill { left: -100px; top: 37.5px; } .clash-position-text.position-text-none { left: -100px; top: 37.5px; } .clash-position-text.hidden { opacity: 0; } .clash-position-selector-hextech-dashed-ring { position: absolute; width: 230px; height: 230px; top: 50%; left: 50%; margin-left: -115px; margin-top: -115px; } .clash-position-selector-hextech-dashed-ring:before { content: ''; position: absolute; width: 100%; height: 100%; background: url(/fe/lol-clash/radial-hextech-dashed-ring.png) no-repeat center; animation: clash-spin 120s linear infinite; background-size: 230px 230px; top: 0px; } /** The circular pointer that spins in the middle on hover **/ .clash-position-selection-pointers { position: relative; width: 200px; height: 200px; margin-top: 15px; margin-left: 15px; } .clash-position-selection-pointer { position: absolute; opacity: 1; width: 200px; height: 200px; } .clash-position-selection-pointer.clash-position-pointer-unselected { background: url(/fe/lol-clash/radial-hextech-unselected.png) no-repeat center; background-size: 80% 80%; } .clash-position-selection-pointer.clash-position-pointer-middle { background: url(/fe/lol-clash/radial-hextech-middle.png) no-repeat center; background-size: 80% 80%; } .clash-position-selection-pointer.clash-position-pointer-jungle { background: url(/fe/lol-clash/radial-hextech-jungle.png) no-repeat center; background-size: 80% 80%; } .clash-position-selection-pointer.clash-position-pointer-top { background: url(/fe/lol-clash/radial-hextech-top.png) no-repeat center; background-size: 80% 80%; } .clash-position-selection-pointer.clash-position-pointer-utility { background: url(/fe/lol-clash/radial-hextech-utility.png) no-repeat center; background-size: 80% 80%; } .clash-position-selection-pointer.clash-position-pointer-bottom { background: url(/fe/lol-clash/radial-hextech-bottom.png) no-repeat center; background-size: 80% 80%; } .clash-position-selection-pointer.clash-position-pointer-fill { background: url(/fe/lol-clash/radial-hextech-fill.png) no-repeat center; background-size: 80% 80%; } .clash-position-selection-pointer.clash-position-pointer-none { background: url(/fe/lol-clash/radial-hextech-fill.png) no-repeat center; background-size: 80% 80%; } .clash-position-selection-pointer.hidden { opacity: 0; } /** ICONS THAT ARE SELECTED **/ .clash-position-selection-icons { position: absolute; top: 50%; left: 50%; } .clash-position-selection-icon { direction: ltr; background-repeat: no-repeat; background-size: contain; cursor: pointer; width: 30px; height: 30px; } .clash-position-icon-jungle { position: absolute; top: -85px; left: -85px; background-image: url(/fe/lol-clash/icon-position-jungle.png); } .clash-position-icon-jungle.active { background-image: url(/fe/lol-clash/icon-position-jungle.png); background-image: url(/fe/lol-clash/icon-position-jungle-hover.png); } .clash-position-icon-middle { position: absolute; top: -115px; left: -15px; background-image: url(/fe/lol-clash/icon-position-middle.png); } .clash-position-icon-middle.active { background-image: url(/fe/lol-clash/icon-position-middle.png); background-image: url(/fe/lol-clash/icon-position-middle-hover.png); } .clash-position-icon-bottom { position: absolute; top: -85px; left: 55px; background-image: url(/fe/lol-clash/icon-position-bottom.png); } .clash-position-icon-bottom.active { background-image: url(/fe/lol-clash/icon-position-bottom.png); background-image: url(/fe/lol-clash/icon-position-bottom-hover.png); } .clash-position-icon-utility { position: absolute; top: -15px; left: 85px; background-image: url(/fe/lol-clash/icon-position-utility.png); } .clash-position-icon-utility.active { background-image: url(/fe/lol-clash/icon-position-utility.png); background-image: url(/fe/lol-clash/icon-position-utility-hover.png); } .clash-position-icon-fill { position: absolute; top: 85px; left: -15px; background-image: url(/fe/lol-clash/icon-position-fill.png); } .clash-position-icon-fill.active { background-image: url(/fe/lol-clash/icon-position-fill.png); background-image: url(/fe/lol-clash/icon-position-fill-hover.png); } .clash-position-icon-none { position: absolute; top: 85px; left: -15px; background-image: url(/fe/lol-clash/icon-position-none.png); } .clash-position-icon-none.active { background-image: url(/fe/lol-clash/icon-position-none.png); background-image: url(/fe/lol-clash/icon-position-none-hover.png); } .clash-position-icon-top { position: absolute; top: -15px; left: -115px; background-image: url(/fe/lol-clash/icon-position-top.png); } .clash-position-icon-top.active { background-image: url(/fe/lol-clash/icon-position-top.png); background-image: url(/fe/lol-clash/icon-position-top-hover.png); } .clash-position-selector-pie { position: absolute; top: -525px; left: -525px; width: 1280px; height: 1280px; margin: 0px; padding: 0px; list-style: none; cursor: default; } /** * To create the equal slices of pie for us to hover and select, * we need to rotate and skew the child divs at their appropriate angles. **/ .clash-position-selection:nth-child(1) { transform: rotate(-67.5deg) skewY(-45deg); } .clash-position-selection:nth-child(2) { transform: rotate(-22.5deg) skewY(-45deg); } .clash-position-selection:nth-child(3) { transform: rotate(22.5deg) skewY(-45deg); } .clash-position-selection:nth-child(4) { transform: rotate(67.5deg) skewY(-45deg); } .clash-position-selection:nth-child(5) { transform: rotate(112.5deg) skewY(-45deg); } .clash-position-selection:nth-child(6) { transform: rotate(157.5deg) skewY(-45deg); } .clash-position-selection:nth-child(7) { transform: rotate(202.5deg) skewY(-45deg); } .clash-position-selection:nth-child(8) { transform: rotate(247.5deg) skewY(-45deg); } .clash-position-selection { overflow: hidden; position: absolute; top: 0px; right: 0px; width: 50%; height: 50%; transform-origin: 0% 100%; } .clash-position-selection .clash-position-selection-proxy { width: 50px; height: 100px; position: absolute; bottom: 0; } .clash-current-position-icon { position: absolute; width: 70px; height: 70px; top: calc(50% - 70px / 2); left: calc(50% - 70px / 2); background-image: url(/fe/lol-clash/icon-position-unselected-hover.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: center; border-radius: 50%; cursor: pointer; } .clash-current-position-icon.icon-middle { background-image: url(/fe/lol-clash/icon-position-middle-hover.png); } .clash-current-position-icon.icon-jungle { background-image: url(/fe/lol-clash/icon-position-jungle-hover.png); } .clash-current-position-icon.icon-utility { background-image: url(/fe/lol-clash/icon-position-utility-hover.png); } .clash-current-position-icon.icon-bottom { background-image: url(/fe/lol-clash/icon-position-bottom-hover.png); } .clash-current-position-icon.icon-top { background-image: url(/fe/lol-clash/icon-position-top-hover.png); } .clash-current-position-icon.icon-fill { background-image: url(/fe/lol-clash/icon-position-fill-hover.png); } @-moz-keyframes clash-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes clash-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes clash-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes clash-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .clash-standard-tooltip { font-family: var(--font-display); } .clash-standard-tooltip { -webkit-user-select: none; } .clash-standard-tooltip { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-standard-tooltip { text-transform: uppercase; } .clash-standard-tooltip:lang(ko-kr), .clash-standard-tooltip:lang(ja-jp), .clash-standard-tooltip:lang(tr-tr), .clash-standard-tooltip:lang(el-gr), .clash-standard-tooltip:lang(th-th), .clash-standard-tooltip:lang(zh-tw) { text-transform: none; } .clash-standard-tooltip { text-transform: none; } .clash-standard-tooltip { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-standard-tooltip:lang(ar-ae) { letter-spacing: 0; } .clash-standard-tooltip { letter-spacing: 0.0375em; } .clash-standard-tooltip:lang(ar-ae) { letter-spacing: 0; } .clash-root .clash-root-background, .clash-root .clash-root-background-landing { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-image: url("/fe/lol-clash/assets/images/background/background-default.jpg"); } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-root { cursor: default; } .clash-root .clash-root-action-timeline-background-gradient { position: absolute; height: 250px; width: 100%; bottom: 0px; background-image: url("/fe/lol-clash/assets/images/action-timeline-background-gradient.png"); background-size: 100% 100%; } .clash-root .clash-root-loading-spinner { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .clash-root .clash-root-faq-button { direction: ltr; position: absolute; bottom: 15px; left: auto ; } .clash-root .clash-root-tournament-selector { position: absolute; min-width: 200px; } .clash-root .clash-root-tournament-selector[tab="hub"] { bottom: 41px; left: 26px; } .clash-root .clash-root-tournament-selector[tab="bracket"], .clash-root .clash-root-tournament-selector[tab="winners"], .clash-root .clash-root-tournament-selector[tab="team"], .clash-root .clash-root-tournament-selector[tab="awards"] { display: none; } .clash-votes-container { height: 20px; width: 360px; margin: 10px auto; } .clash-votes-container .vote-block { height: 36px; width: 36px; margin: 0 10px; display: inline-block; background-size: cover; } .clash-votes-container .vote-block.yes { background-image: url("/fe/lol-clash/assets/images/withdraw/withdraw-yes.png"); } .clash-votes-container .vote-block.no { background-image: url("/fe/lol-clash/assets/images/withdraw/withdraw-no.png"); } .clash-votes-container .vote-block.wait { background-image: url("/fe/lol-clash/assets/images/withdraw/withdraw-wait.png"); } .clash-text-bold { font-weight: 700; color: #f0e6d2; } .clash-tab-hub { font-family: var(--font-body); } .clash-tab-hub { -webkit-user-select: none; } .clash-tab-hub { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tab-hub { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-tab-hub:lang(ja-jp) { font-size: 13px; } .clash-tab-hub:lang(ar-ae) { letter-spacing: 0; } .clash-tab-hub { position: absolute; top: 79px; left: 0; bottom: 0; width: 1055px; overflow: hidden; cursor: default; color: #a09b8c; } .clash-tab-hub .clash-tab-hub-content { position: absolute; top: 66px; bottom: 13px; right: 35px; left: 35px; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tab-hub { direction: ltr; } .clash-tab-hub .clash-tab-hub-explanation-button { float: right; position: relative; top: 14px; right: 10px; } .clash-tab-hub .clash-tab-hub-content { display: flex; flex-direction: column; justify-content: space-between; } .clash-tab-hub .clash-tab-hub-content.showLandingGlow { background-image: url("/fe/lol-clash/assets/images/landing/glow-background.png"); background-repeat: no-repeat; background-size: contain; background-position-x: 5px; background-position-y: 155px; } .clash-tab-hub .clash-tab-hub-action-timeline { position: absolute; bottom: 0; display: flex; width: 100%; pointer-events: none; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title, .clash-team-notification-scouting-container .header-text, .clash-team-notification-consolation-container .header-text, .clash-team-notification-bye-container .header-text, .clash-tier-update-container .header-text, .clash-tier-update-container .clash-tier, .clash-tier-update-container .clash-team-tag, .clash-phase-full-container .header-text, .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full, .clash-phase-full-container .image-container .bracket-image-container .bracket-caption, .clash-restart-modal { font-family: var(--font-display); } .clash-tab-team .clash-tab-team-root, .clash-team-notification-scouting-container .description-text, .clash-team-notification-consolation-container .description-text, .clash-team-notification-bye-container .description-text, .clash-tier-update-container .description-text, .clash-phase-full-container .description-text { font-family: var(--font-body); } .clash-tab-team .clash-tab-team-root, .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title, .clash-team-notification-scouting-container .header-text, .clash-team-notification-scouting-container .description-text, .clash-team-notification-consolation-container .header-text, .clash-team-notification-consolation-container .description-text, .clash-team-notification-bye-container .header-text, .clash-team-notification-bye-container .description-text, .clash-tier-update-container .header-text, .clash-tier-update-container .description-text, .clash-tier-update-container .clash-tier, .clash-tier-update-container .clash-team-tag, .clash-phase-full-container .header-text, .clash-phase-full-container .description-text, .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full, .clash-phase-full-container .image-container .bracket-image-container .bracket-caption, .clash-restart-modal { -webkit-user-select: none; } .clash-tab-team .clash-tab-team-root, .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title, .clash-team-notification-scouting-container .header-text, .clash-team-notification-scouting-container .description-text, .clash-team-notification-consolation-container .header-text, .clash-team-notification-consolation-container .description-text, .clash-team-notification-bye-container .header-text, .clash-team-notification-bye-container .description-text, .clash-tier-update-container .header-text, .clash-tier-update-container .description-text, .clash-tier-update-container .clash-tier, .clash-tier-update-container .clash-team-tag, .clash-phase-full-container .header-text, .clash-phase-full-container .description-text, .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full, .clash-phase-full-container .image-container .bracket-image-container .bracket-caption, .clash-restart-modal { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title, .clash-team-notification-scouting-container .header-text, .clash-team-notification-consolation-container .header-text, .clash-team-notification-bye-container .header-text, .clash-tier-update-container .header-text, .clash-tier-update-container .clash-tier, .clash-tier-update-container .clash-team-tag, .clash-phase-full-container .header-text, .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full, .clash-phase-full-container .image-container .bracket-image-container .bracket-caption, .clash-restart-modal { text-transform: uppercase; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title:lang(ko-kr), .clash-team-notification-scouting-container .header-text:lang(ko-kr), .clash-team-notification-consolation-container .header-text:lang(ko-kr), .clash-team-notification-bye-container .header-text:lang(ko-kr), .clash-tier-update-container .header-text:lang(ko-kr), .clash-tier-update-container .clash-tier:lang(ko-kr), .clash-tier-update-container .clash-team-tag:lang(ko-kr), .clash-phase-full-container .header-text:lang(ko-kr), .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full:lang(ko-kr), .clash-phase-full-container .image-container .bracket-image-container .bracket-caption:lang(ko-kr), .clash-restart-modal:lang(ko-kr), .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title:lang(ja-jp), .clash-team-notification-scouting-container .header-text:lang(ja-jp), .clash-team-notification-consolation-container .header-text:lang(ja-jp), .clash-team-notification-bye-container .header-text:lang(ja-jp), .clash-tier-update-container .header-text:lang(ja-jp), .clash-tier-update-container .clash-tier:lang(ja-jp), .clash-tier-update-container .clash-team-tag:lang(ja-jp), .clash-phase-full-container .header-text:lang(ja-jp), .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full:lang(ja-jp), .clash-phase-full-container .image-container .bracket-image-container .bracket-caption:lang(ja-jp), .clash-restart-modal:lang(ja-jp), .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title:lang(tr-tr), .clash-team-notification-scouting-container .header-text:lang(tr-tr), .clash-team-notification-consolation-container .header-text:lang(tr-tr), .clash-team-notification-bye-container .header-text:lang(tr-tr), .clash-tier-update-container .header-text:lang(tr-tr), .clash-tier-update-container .clash-tier:lang(tr-tr), .clash-tier-update-container .clash-team-tag:lang(tr-tr), .clash-phase-full-container .header-text:lang(tr-tr), .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full:lang(tr-tr), .clash-phase-full-container .image-container .bracket-image-container .bracket-caption:lang(tr-tr), .clash-restart-modal:lang(tr-tr), .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title:lang(el-gr), .clash-team-notification-scouting-container .header-text:lang(el-gr), .clash-team-notification-consolation-container .header-text:lang(el-gr), .clash-team-notification-bye-container .header-text:lang(el-gr), .clash-tier-update-container .header-text:lang(el-gr), .clash-tier-update-container .clash-tier:lang(el-gr), .clash-tier-update-container .clash-team-tag:lang(el-gr), .clash-phase-full-container .header-text:lang(el-gr), .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full:lang(el-gr), .clash-phase-full-container .image-container .bracket-image-container .bracket-caption:lang(el-gr), .clash-restart-modal:lang(el-gr), .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title:lang(th-th), .clash-team-notification-scouting-container .header-text:lang(th-th), .clash-team-notification-consolation-container .header-text:lang(th-th), .clash-team-notification-bye-container .header-text:lang(th-th), .clash-tier-update-container .header-text:lang(th-th), .clash-tier-update-container .clash-tier:lang(th-th), .clash-tier-update-container .clash-team-tag:lang(th-th), .clash-phase-full-container .header-text:lang(th-th), .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full:lang(th-th), .clash-phase-full-container .image-container .bracket-image-container .bracket-caption:lang(th-th), .clash-restart-modal:lang(th-th), .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title:lang(zh-tw), .clash-team-notification-scouting-container .header-text:lang(zh-tw), .clash-team-notification-consolation-container .header-text:lang(zh-tw), .clash-team-notification-bye-container .header-text:lang(zh-tw), .clash-tier-update-container .header-text:lang(zh-tw), .clash-tier-update-container .clash-tier:lang(zh-tw), .clash-tier-update-container .clash-team-tag:lang(zh-tw), .clash-phase-full-container .header-text:lang(zh-tw), .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full:lang(zh-tw), .clash-phase-full-container .image-container .bracket-image-container .bracket-caption:lang(zh-tw), .clash-restart-modal:lang(zh-tw) { text-transform: none; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title:lang(ar-ae) { letter-spacing: 0; } .clash-team-notification-bye-container .header-text, .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-team-notification-bye-container .header-text:lang(ar-ae), .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full:lang(ar-ae) { letter-spacing: 0; } .clash-tier-update-container .clash-team-tag { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-tier-update-container .clash-team-tag:lang(ar-ae) { letter-spacing: 0; } .clash-team-notification-scouting-container .header-text, .clash-team-notification-consolation-container .header-text, .clash-tier-update-container .header-text, .clash-tier-update-container .clash-tier, .clash-phase-full-container .header-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-team-notification-scouting-container .header-text:lang(ar-ae), .clash-team-notification-consolation-container .header-text:lang(ar-ae), .clash-tier-update-container .header-text:lang(ar-ae), .clash-tier-update-container .clash-tier:lang(ar-ae), .clash-phase-full-container .header-text:lang(ar-ae) { letter-spacing: 0; } .clash-phase-full-container .image-container .bracket-image-container .bracket-caption, .clash-restart-modal { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-phase-full-container .image-container .bracket-image-container .bracket-caption:lang(ja-jp), .clash-restart-modal:lang(ja-jp) { font-size: 13px; } .clash-phase-full-container .image-container .bracket-image-container .bracket-caption:lang(ar-ae), .clash-restart-modal:lang(ar-ae) { letter-spacing: 0; } .clash-tab-team .clash-tab-team-root, .clash-team-notification-scouting-container .description-text, .clash-team-notification-consolation-container .description-text, .clash-team-notification-bye-container .description-text, .clash-tier-update-container .description-text, .clash-phase-full-container .description-text { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-tab-team .clash-tab-team-root:lang(ja-jp), .clash-team-notification-scouting-container .description-text:lang(ja-jp), .clash-team-notification-consolation-container .description-text:lang(ja-jp), .clash-team-notification-bye-container .description-text:lang(ja-jp), .clash-tier-update-container .description-text:lang(ja-jp), .clash-phase-full-container .description-text:lang(ja-jp) { font-size: 13px; } .clash-tab-team .clash-tab-team-root:lang(ar-ae), .clash-team-notification-scouting-container .description-text:lang(ar-ae), .clash-team-notification-consolation-container .description-text:lang(ar-ae), .clash-team-notification-bye-container .description-text:lang(ar-ae), .clash-tier-update-container .description-text:lang(ar-ae), .clash-phase-full-container .description-text:lang(ar-ae) { letter-spacing: 0; } .clash-tab-team .clash-tab-team-root { position: absolute; top: 79px; left: 0; bottom: 0; width: 1055px; overflow: hidden; cursor: default; color: #a09b8c; } .clash-tab-team .clash-tab-team-content { position: absolute; top: 66px; bottom: 13px; right: 35px; left: 35px; } .clash-tab-team .clash-tab-team-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-image: url("/fe/lol-clash/assets/images/background/background-default.jpg"); } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tab-team .clash-tab-team-background { background-image: url("/fe/lol-clash/assets/images/background/background-roster.jpg"); } .clash-tab-team .clash-tab-team-background.is-lobby { background-image: url("/fe/lol-clash/assets/images/background/background-lobby.jpg"); } .clash-tab-team .clash-tab-team-content { display: flex; flex-direction: column; } .clash-tab-team .clash-tab-team-top-row { display: flex; flex-direction: row; justify-content: space-between; } .clash-tab-team .clash-tab-team-tournament-info { display: flex; flex-direction: column; width: 280px; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-my-tickets { margin-top: 2px; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .your-tier { display: none; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view { width: 192px; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav { justify-content: center; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-button { display: none; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-item-title { font-size: 18px; line-height: initial; } .clash-tab-team .clash-tab-team-tournament-info .clash-tournament-info .clash-tournament-info-rewards-view .clash-capsule-progress .clash-carousel .clash-carousel-nav.use-buttons-on-nav .clash-carousel-nav-pips-container { display: none; } .clash-tab-team .clash-tab-team-roster { display: flex; flex-direction: column; width: 665px; height: 394px; } .clash-tab-team .clash-capacity-indicator-container { position: absolute; display: flex; justify-content: center; width: 100%; bottom: 128px; } .clash-tab-team .clash-tab-team-action-timeline { position: absolute; display: flex; bottom: 0; left: 0; width: 100%; pointer-events: none; } .clash-team-notification-scouting-container { width: 300px; height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; } .clash-team-notification-scouting-container .header-text { text-align: center; margin-top: 10px; } .clash-team-notification-scouting-container .description-image { height: 120px; } .clash-team-notification-scouting-container .description-text { text-align: justify; margin-left: 15px; margin-right: 15px; } .clash-team-notification-consolation-container { width: 460px; height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; margin-bottom: 25px; } .clash-team-notification-consolation-container .header-text { text-align: center; margin-top: 10px; margin-left: 60px; margin-right: 60px; } .clash-team-notification-consolation-container .description-image { height: 130px; margin-top: 5px; } .clash-team-notification-consolation-container .description-text { text-align: center; margin-left: 15px; margin-right: 15px; } .clash-team-notification-bye-container { direction: ltr; width: 450px; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; margin-bottom: 25px; } .clash-team-notification-bye-container .header-text { text-align: center; margin: 10px 30px 0; } .clash-team-notification-bye-container .description-image { height: 130px; } .clash-team-notification-bye-container .description-text { text-align: center; margin: 0 35px 25px; } .clash-tier-update-container { width: 400px; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; margin: 10px 0 40px; } .clash-tier-update-container .header-text { text-align: center; margin: 10px; } .clash-tier-update-container .description-text { text-align: center; margin-left: 15px; margin-right: 15px; } .clash-tier-update-container .clash-roster-container { display: flex; align-items: center; } .clash-tier-update-container .clash-team-tier-container { margin: 0 5px 8px; } .clash-tier-update-container .clash-hr { width: 60%; } .clash-tier-update-container .clash-tier { font-size: 16px; background: #a09b8c; color: #000; padding: 0 4px; border-radius: 3px; } .clash-tier-update-container .clash-team-logo { flex-shrink: 1; position: relative; } .clash-tier-update-container .clash-team-logo-img { height: 80px; width: 80px; } .clash-phase-full-container { width: 400px; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; margin: 10px 0 40px; } .clash-phase-full-container .header-text { text-align: center; margin: 10px; } .clash-phase-full-container .description-text { text-align: center; margin: 15px; } .clash-phase-full-container .image-container { margin: 10px; display: flex; flex-direction: row; justify-content: space-around; } .clash-phase-full-container .image-container .bracket-image-container { position: relative; width: 140px; height: 80px; margin: 0 15px 10px; } .clash-phase-full-container .image-container .bracket-image-container .background-image { height: 100%; width: 100%; background-size: cover; background-image: url("/fe/lol-clash/assets/images/capacity/bracket-icon.png"); } .clash-phase-full-container .image-container .bracket-image-container .background-image.full { opacity: 0.2; } .clash-phase-full-container .image-container .bracket-image-container .bracket-image-full { position: absolute; text-align: center; top: 22px; left: 0; right: 0; } .clash-phase-full-container .image-container .bracket-image-container .bracket-caption { white-space: nowrap; text-align: center; } .clash-restart-modal { width: 300px; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; margin: 10px 0 40px; } .clash-tab-bracket .clash-tab-bracket-root { font-family: var(--font-body); } .clash-tab-bracket .clash-tab-bracket-root { -webkit-user-select: none; } .clash-tab-bracket .clash-tab-bracket-root { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tab-bracket .clash-tab-bracket-root { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-tab-bracket .clash-tab-bracket-root:lang(ja-jp) { font-size: 13px; } .clash-tab-bracket .clash-tab-bracket-root:lang(ar-ae) { letter-spacing: 0; } .clash-tab-bracket .clash-tab-bracket-root { position: absolute; top: 79px; left: 0; bottom: 0; width: 1055px; overflow: hidden; cursor: default; color: #a09b8c; } .clash-tab-bracket .clash-tab-bracket-content { position: absolute; top: 66px; bottom: 13px; right: 35px; left: 35px; } .clash-tab-bracket .clash-tab-bracket-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-image: url("/fe/lol-clash/assets/images/background/background-default.jpg"); } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tab-bracket .clash-tab-bracket-header, .clash-tab-bracket .clash-tab-bracket-nav { position: absolute; display: block; top: 0; left: 0; height: 52px; } .clash-tab-bracket .clash-tab-bracket-content { pointer-events: none; } .clash-tab-bracket .clash-tab-bracket-header { width: 60%; pointer-events: auto; } .clash-tab-bracket .clash-tab-bracket-nav { left: 60%; width: 40%; pointer-events: auto; } .clash-tab-bracket .clash-tab-bracket-layout { position: absolute; top: 52px; left: 0; right: 0; bottom: 0; } .clash-tab-bracket .clash-tab-bracket-loading-spinner { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .clash-tab-winners-no-results .clash-tab-winners-no-results-text, .clash-tab-winners-tournament-selector, .clash-tab-winners-tournament-title { font-family: var(--font-display); } .clash-tab-winners { font-family: var(--font-body); } .clash-tab-winners, .clash-tab-winners-no-results .clash-tab-winners-no-results-text, .clash-tab-winners-tournament-selector, .clash-tab-winners-tournament-title { -webkit-user-select: none; } .clash-tab-winners, .clash-tab-winners-no-results .clash-tab-winners-no-results-text, .clash-tab-winners-tournament-selector, .clash-tab-winners-tournament-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tab-winners-no-results .clash-tab-winners-no-results-text, .clash-tab-winners-tournament-selector, .clash-tab-winners-tournament-title { text-transform: uppercase; } .clash-tab-winners-no-results .clash-tab-winners-no-results-text:lang(ko-kr), .clash-tab-winners-tournament-selector:lang(ko-kr), .clash-tab-winners-tournament-title:lang(ko-kr), .clash-tab-winners-no-results .clash-tab-winners-no-results-text:lang(ja-jp), .clash-tab-winners-tournament-selector:lang(ja-jp), .clash-tab-winners-tournament-title:lang(ja-jp), .clash-tab-winners-no-results .clash-tab-winners-no-results-text:lang(tr-tr), .clash-tab-winners-tournament-selector:lang(tr-tr), .clash-tab-winners-tournament-title:lang(tr-tr), .clash-tab-winners-no-results .clash-tab-winners-no-results-text:lang(el-gr), .clash-tab-winners-tournament-selector:lang(el-gr), .clash-tab-winners-tournament-title:lang(el-gr), .clash-tab-winners-no-results .clash-tab-winners-no-results-text:lang(th-th), .clash-tab-winners-tournament-selector:lang(th-th), .clash-tab-winners-tournament-title:lang(th-th), .clash-tab-winners-no-results .clash-tab-winners-no-results-text:lang(zh-tw), .clash-tab-winners-tournament-selector:lang(zh-tw), .clash-tab-winners-tournament-title:lang(zh-tw) { text-transform: none; } .clash-tab-winners-tournament-selector, .clash-tab-winners-tournament-title { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clash-tab-winners-tournament-selector:lang(ar-ae), .clash-tab-winners-tournament-title:lang(ar-ae) { letter-spacing: 0; } .clash-tab-winners-no-results .clash-tab-winners-no-results-text { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-tab-winners-no-results .clash-tab-winners-no-results-text:lang(ja-jp) { font-size: 13px; } .clash-tab-winners-no-results .clash-tab-winners-no-results-text:lang(ar-ae) { letter-spacing: 0; } .clash-tab-winners { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-tab-winners:lang(ja-jp) { font-size: 13px; } .clash-tab-winners:lang(ar-ae) { letter-spacing: 0; } .clash-tab-winners { position: absolute; top: 79px; left: 0; bottom: 0; width: 1055px; overflow: hidden; cursor: default; color: #a09b8c; } .clash-tab-winners-content { position: absolute; top: 66px; bottom: 13px; right: 35px; left: 35px; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tab-winners-search-box-container { position: absolute; top: 79px; right: 35px; min-width: 220px; } .clash-tab-winners-loading-spinner { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .clash-tab-winners-no-results { position: absolute; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; transform: translate(-50%, -50%); top: 50%; left: 50%; } .clash-tab-winners-no-results .clash-tab-winners-no-results-img { width: 204px; height: 192px; } .clash-tab-winners-no-results .clash-tab-winners-no-results-text { text-transform: none; color: #5b5a56; font-size: 14px; margin-top: 4px; } .clash-tab-winners-tournament-selector { color: #c8aa6e; position: relative; width: 400px; } .clash-tab-winners-tournament-selector .tournament-selector-dropdown { vertical-align: top; margin-top: -10px; --flat-dropdown-scrollable-max-height: 450px; --flat-dropdown-current-content-text-transform: uppercase; --flat-dropdownactive-z-index: 1; } .clash-tab-winners-tier-selector { direction: ltr; position: relative; width: 40%; margin-left: 15px; } .clash-tab-winners-tournament-title { direction: ltr; position: relative; margin-top: 2px; margin-bottom: 16px; margin-left: 10px; text-align: left; } .winners-roster-scroll-container { position: relative; width: calc(100% + 10px) ; height: 420px; margin-top: 38px; margin-left: 10px; } .winners-roster-scroll-padding { width: 100%; height: 84px; } .winners-rosters { display: flex; flex-direction: row; flex-flow: row wrap; } .clash-tab-awards { font-family: var(--font-body); } .clash-tab-awards { -webkit-user-select: none; } .clash-tab-awards { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tab-awards { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-tab-awards:lang(ja-jp) { font-size: 13px; } .clash-tab-awards:lang(ar-ae) { letter-spacing: 0; } .clash-tab-awards { position: absolute; top: 79px; left: 0; bottom: 0; width: 1055px; overflow: hidden; cursor: default; color: #a09b8c; } .clash-tab-awards .clash-tab-awards-content { position: absolute; top: 66px; bottom: 13px; right: 35px; left: 35px; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-landing .center-container .landing-title, .clash-landing .center-container .landing-date, .clash-landing .center-container .clash-landing-table-title, .clash-landing .center-container .clash-landing-graph-title { font-family: var(--font-display); } .clash-landing .center-container .landing-copy, .clash-landing .center-container .clash-landing-graph-disclaimer, .clash-landing .center-container .clash-landing-table-warning { font-family: var(--font-body); } .clash-landing .center-container .landing-title, .clash-landing .center-container .landing-date, .clash-landing .center-container .landing-copy, .clash-landing .center-container .clash-landing-table-title, .clash-landing .center-container .clash-landing-graph-title, .clash-landing .center-container .clash-landing-graph-disclaimer, .clash-landing .center-container .clash-landing-table-warning { -webkit-user-select: none; } .clash-landing .center-container .landing-title, .clash-landing .center-container .landing-date, .clash-landing .center-container .landing-copy, .clash-landing .center-container .clash-landing-table-title, .clash-landing .center-container .clash-landing-graph-title, .clash-landing .center-container .clash-landing-graph-disclaimer, .clash-landing .center-container .clash-landing-table-warning { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-landing .center-container .landing-title, .clash-landing .center-container .landing-date, .clash-landing .center-container .clash-landing-table-title, .clash-landing .center-container .clash-landing-graph-title { text-transform: uppercase; } .clash-landing .center-container .landing-title:lang(ko-kr), .clash-landing .center-container .landing-date:lang(ko-kr), .clash-landing .center-container .clash-landing-table-title:lang(ko-kr), .clash-landing .center-container .clash-landing-graph-title:lang(ko-kr), .clash-landing .center-container .landing-title:lang(ja-jp), .clash-landing .center-container .landing-date:lang(ja-jp), .clash-landing .center-container .clash-landing-table-title:lang(ja-jp), .clash-landing .center-container .clash-landing-graph-title:lang(ja-jp), .clash-landing .center-container .landing-title:lang(tr-tr), .clash-landing .center-container .landing-date:lang(tr-tr), .clash-landing .center-container .clash-landing-table-title:lang(tr-tr), .clash-landing .center-container .clash-landing-graph-title:lang(tr-tr), .clash-landing .center-container .landing-title:lang(el-gr), .clash-landing .center-container .landing-date:lang(el-gr), .clash-landing .center-container .clash-landing-table-title:lang(el-gr), .clash-landing .center-container .clash-landing-graph-title:lang(el-gr), .clash-landing .center-container .landing-title:lang(th-th), .clash-landing .center-container .landing-date:lang(th-th), .clash-landing .center-container .clash-landing-table-title:lang(th-th), .clash-landing .center-container .clash-landing-graph-title:lang(th-th), .clash-landing .center-container .landing-title:lang(zh-tw), .clash-landing .center-container .landing-date:lang(zh-tw), .clash-landing .center-container .clash-landing-table-title:lang(zh-tw), .clash-landing .center-container .clash-landing-graph-title:lang(zh-tw) { text-transform: none; } .clash-landing .center-container .landing-title { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .clash-landing .center-container .landing-title:lang(ar-ae) { letter-spacing: 0; } .clash-landing .center-container .landing-date, .clash-landing .center-container .clash-landing-table-title, .clash-landing .center-container .clash-landing-graph-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-landing .center-container .landing-date:lang(ar-ae), .clash-landing .center-container .clash-landing-table-title:lang(ar-ae), .clash-landing .center-container .clash-landing-graph-title:lang(ar-ae) { letter-spacing: 0; } .clash-landing .center-container .clash-landing-graph-disclaimer, .clash-landing .center-container .clash-landing-table-warning { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-landing .center-container .clash-landing-graph-disclaimer:lang(ja-jp), .clash-landing .center-container .clash-landing-table-warning:lang(ja-jp) { font-size: 13px; } .clash-landing .center-container .clash-landing-graph-disclaimer:lang(ar-ae), .clash-landing .center-container .clash-landing-table-warning:lang(ar-ae) { letter-spacing: 0; } .clash-landing .center-container .landing-copy { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .clash-landing .center-container .landing-copy:lang(ja-jp) { font-size: 13px; } .clash-landing .center-container .landing-copy:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-landing { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .clash-landing .center-container { display: flex; flex-direction: column; align-items: center; text-align: center; word-wrap: break-word; width: 100%; padding-bottom: 66px; } .clash-landing .center-container .landing-title { color: #f0e6d2; width: 100%; } .clash-landing .center-container .landing-date { font-size: 14px; font-weight: 500; color: #c8aa6e; width: 100%; margin-top: 10px; } .clash-landing .center-container .landing-copy { width: 470px; margin-top: 20px; } .clash-landing .center-container .landing-graph-container { margin: 40px; } .clash-landing .center-container .clash-landing-table-title { color: #f0e6d2; margin: 30px 0 10px; } .clash-landing .center-container .clash-landing-graph-title { color: #f0e6d2; margin: 50px 0 0; } .clash-landing .center-container .clash-lockin-time-graph rect { fill: #785a28; } .clash-landing .center-container .clash-lockin-time-graph .tier-1 { fill: #c89b3c; } .clash-landing .center-container .clash-lockin-time-graph .tier-2 { fill: #785a28; } .clash-landing .center-container .clash-lockin-time-graph .tier-3 { fill: #463714; } .clash-landing .center-container .clash-lockin-time-graph .tier-4 { fill: #6b5c4d; } .clash-landing .center-container .clash-lockin-time-graph text { fill: #fff; text-anchor: end ; } .clash-landing .center-container .clash-lockin-time-graph .label { font-weight: bold; } .clash-landing .center-container .clash-lockin-time-graph .axis path, .clash-landing .center-container .clash-lockin-time-graph .axis line { fill: none; stroke: #fff; shape-rendering: crispEdges; stroke-width: 0px; } .clash-landing .center-container .clash-landing-table table { border-collapse: collapse; } .clash-landing .center-container .clash-landing-table table th { color: #f0e6d2; } .clash-landing .center-container .clash-landing-table table td, .clash-landing .center-container .clash-landing-table table th { padding: 8px 20px; } .clash-landing .center-container .clash-landing-table table td, .clash-landing .center-container .clash-landing-table table th { border: thin solid #5c5b57; } .clash-landing .center-container .clash-landing-table table tr:first-child th { border-top: 0; } .clash-landing .center-container .clash-landing-table table tr:last-child td { border-bottom: 0; } .clash-landing .center-container .clash-landing-table table tr td:first-child, .clash-landing .center-container .clash-landing-table table tr th:first-child { color: #f0e6d2; border-left: 0; } .clash-landing .center-container .clash-landing-table table tr td:last-child, .clash-landing .center-container .clash-landing-table table tr th:last-child { border-right: 0; } .clash-landing .center-container .clash-landing-table-warning { max-width: 400px; margin: 30px; } .clash-landing .center-container .clash-landing-table-warning .red { color: #f00; } .clash-tournament-info .clash-tournament-info-title, .clash-tournament-info .clash-tournament-info-subtitle { font-family: var(--font-display); } .clash-tournament-info .your-tier { font-family: var(--font-body); } .clash-tournament-info .clash-tournament-info-title, .clash-tournament-info .clash-tournament-info-subtitle, .clash-tournament-info .your-tier { -webkit-user-select: none; } .clash-tournament-info .clash-tournament-info-title, .clash-tournament-info .clash-tournament-info-subtitle, .clash-tournament-info .your-tier { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tournament-info .clash-tournament-info-title, .clash-tournament-info .clash-tournament-info-subtitle { text-transform: uppercase; } .clash-tournament-info .clash-tournament-info-title:lang(ko-kr), .clash-tournament-info .clash-tournament-info-subtitle:lang(ko-kr), .clash-tournament-info .clash-tournament-info-title:lang(ja-jp), .clash-tournament-info .clash-tournament-info-subtitle:lang(ja-jp), .clash-tournament-info .clash-tournament-info-title:lang(tr-tr), .clash-tournament-info .clash-tournament-info-subtitle:lang(tr-tr), .clash-tournament-info .clash-tournament-info-title:lang(el-gr), .clash-tournament-info .clash-tournament-info-subtitle:lang(el-gr), .clash-tournament-info .clash-tournament-info-title:lang(th-th), .clash-tournament-info .clash-tournament-info-subtitle:lang(th-th), .clash-tournament-info .clash-tournament-info-title:lang(zh-tw), .clash-tournament-info .clash-tournament-info-subtitle:lang(zh-tw) { text-transform: none; } .clash-tournament-info .clash-tournament-info-title { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-tournament-info .clash-tournament-info-title:lang(ar-ae) { letter-spacing: 0; } .clash-tournament-info .clash-tournament-info-subtitle { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-tournament-info .clash-tournament-info-subtitle:lang(ar-ae) { letter-spacing: 0; } .clash-tournament-info .your-tier { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-tournament-info .your-tier:lang(ar-ae) { letter-spacing: 0; } .clash-tournament-info .clash-tournament-info-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tournament-info { direction: ltr; flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 15px; min-height: 100%; } .clash-tournament-info.clash-tournament-info-show-border { border: 1px solid rgba(255,255,255,0.22); } .clash-tournament-info .clash-tournament-info-title { color: #f0e6d2; text-align: center; max-width: 265px; text-overflow: ellipsis; overflow: hidden; } .clash-tournament-info .clash-tournament-info-subtitle { width: 100%; color: #5b5a56; text-align: center; } .clash-tournament-info .horizontal-line { width: 175px; margin: 18px 0 14px; border-bottom: thin solid; border-image: linear-gradient(to right, transparent, rgba(255,255,255,0.22) 30%, rgba(255,255,255,0.22) 70%, transparent) 1; } .clash-tournament-info .your-tier { font-size: 12px; text-align: center; display: flex; justify-content: center; align-items: center; } .clash-tournament-info .your-tier .clash-tier-placement { background-color: #a09b8c; margin: 0 0 0 8px ; border-radius: 3px; } .clash-tournament-info .your-tier .clash-tier-placement .clash-tier-placement-visual { font-size: 14px; } .clash-tournament-info .clash-tournament-info-rewards-view { width: 200px; position: relative; pointer-events: none; margin-top: -10px; } .clash-tournament-info .clash-tournament-info-my-tickets { width: 160px; height: 32px; margin-top: 10px; display: flex; align-items: center; justify-content: center; } lol-uikit-tooltip .clash-lft-tooltip-title { font-family: var(--font-display); } .clash-lft-toggle .clash-free-agent-row .clash-lft-title { font-family: var(--font-body); } lol-uikit-tooltip .clash-lft-tooltip-title, .clash-lft-toggle .clash-free-agent-row .clash-lft-title { -webkit-user-select: none; } lol-uikit-tooltip .clash-lft-tooltip-title, .clash-lft-toggle .clash-free-agent-row .clash-lft-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } lol-uikit-tooltip .clash-lft-tooltip-title { text-transform: uppercase; } lol-uikit-tooltip .clash-lft-tooltip-title:lang(ko-kr), lol-uikit-tooltip .clash-lft-tooltip-title:lang(ja-jp), lol-uikit-tooltip .clash-lft-tooltip-title:lang(tr-tr), lol-uikit-tooltip .clash-lft-tooltip-title:lang(el-gr), lol-uikit-tooltip .clash-lft-tooltip-title:lang(th-th), lol-uikit-tooltip .clash-lft-tooltip-title:lang(zh-tw) { text-transform: none; } lol-uikit-tooltip .clash-lft-tooltip-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } lol-uikit-tooltip .clash-lft-tooltip-title:lang(ar-ae) { letter-spacing: 0; } .clash-lft-toggle .clash-free-agent-row .clash-lft-title { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-lft-toggle .clash-free-agent-row .clash-lft-title:lang(ja-jp) { font-size: 13px; } .clash-lft-toggle .clash-free-agent-row .clash-lft-title:lang(ar-ae) { letter-spacing: 0; } lol-uikit-tooltip .clash-lft-tooltip-title { color: #32281e; padding-bottom: 5px; } lol-uikit-tooltip .clash-lft-tooltip-title.hidden { display: none; } .clash-lft-toggle { margin-top: 5px; } .clash-lft-toggle .clash-free-agent-row { display: flex; justify-content: center; align-items: center; } .clash-lft-toggle .clash-free-agent-row .clash-lft-title { display: flex; margin: 8px 0 8px 0; text-align: center; } .clash-lft-toggle .clash-free-agent-row .clash-lft-title .clash-lft-tooltip-icon { --uikit-info-icon-width: 18px; --uikit-info-icon-height: 18px; margin-left: 6px; } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper { direction: ltr; margin: 0px 8px 0 5px; } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper .toggle-container { position: relative; width: 50px; height: 21px; background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-closed.png"); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper .toggle-container:lang(ar-AE) { background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-closed-rtl.png"); } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper .toggle-container .open { position: absolute; top: 0; left: 0 ; right: auto ; width: 50px; height: 21px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-open.png"); opacity: 0; transition: opacity 0.5s; } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper .toggle-container .open:lang(ar-AE) { background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-open-rtl.png"); } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper .toggle-container .toggle-button { position: relative; left: 0 ; right: auto ; top: -2px; background-image: url("/fe/lol-clash/assets/images/lft/toggle-button.png"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 27px; height: 27px; } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper .toggle-container .toggle-button:hover { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button-hover.png"); } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper .toggle-container .toggle-button:active { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button-click.png"); } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper .animated { transition: left 0.2s ease-in-out ; } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper.right .toggle-button { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button.png"); left: 26px ; right: auto ; } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper.disabled .toggle-button { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button-disabled.png"); } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper.disabled .toggle-button:hover { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button-disabled.png"); } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper.disabled .toggle-button:active { background-image: url("/fe/lol-clash/assets/images/lft/toggle-button-disabled.png"); } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper.open .toggle-container .open { opacity: 1; } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper.disabled .toggle-container { background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-disabled.png"); cursor: default; } .clash-lft-toggle .clash-free-agent-row .clash-lft-toggle-wrapper.disabled .toggle-container:lang(ar-AE) { background-image: url("/fe/lol-clash/assets/images/lft/toggle-slider-disabled-rtl.png"); } .clash-lft-toggle .clash-lft-position-wrapper { display: flex; position: relative; margin: 5px auto auto auto; width: 1px; } .clash-lft-toggle .clash-lft-position-wrapper .position-element { position: absolute; height: 60px; width: 60px; } .clash-lft-toggle .clash-lft-position-wrapper .primary { transition: 500ms cubic-bezier(0, 0, 0, 1); left: -66px; top: 4px; } .clash-lft-toggle .clash-lft-position-wrapper .secondary { left: 18px; top: 4px; transition: 500ms cubic-bezier(0, 0, 0, 1); } .clash-lft-toggle .clash-lft-position-wrapper.single-selector .primary { transform: translateX(42px); } .clash-lft-toggle .clash-lft-position-wrapper.single-selector .secondary { transform: translateX(-45px) scale(0.8); opacity: 0; } .clash-trophy-container { position: relative; height: 205px; top: 10px; } .clash-trophy-pedestal, .clash-trophy-cupgem { position: absolute; left: 50%; transform: translateX(-50%); } .clash-trophy-pedestal { height: 69px; bottom: 0; } .clash-trophy-cupgem { height: 177px; top: 0; } .clash-trophy-placeholder-cupgem { height: 170px; top: 30px; transform: scale(1.6); margin: auto; position: absolute; left: 0; right: 0; } .clash-roster-lobby-view { position: absolute; left: 0; right: 0; display: flex; flex-direction: row; align-items: flex-start; padding-left: 10px; padding-right: 10px; } .clash-roster-lobby-view .clash-tab-team-match-info { position: absolute; left: 40px ; right: auto ; top: 340px; } .clash-roster-lobby-view .lobby-animation-container { position: absolute; left: 605px; top: 215px; } .clash-roster-lobby-view .lobby-animation-container video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-roster-lobby-member .summoner-name-container .summoner-name, .clash-roster-lobby-member.local .summoner-name-container .summoner-name { font-family: var(--font-display); } .clash-roster-lobby-member .summoner-name-container .summoner-name, .clash-roster-lobby-member.local .summoner-name-container .summoner-name { -webkit-user-select: none; } .clash-roster-lobby-member .summoner-name-container .summoner-name, .clash-roster-lobby-member.local .summoner-name-container .summoner-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-roster-lobby-member .summoner-name-container .summoner-name, .clash-roster-lobby-member.local .summoner-name-container .summoner-name { text-transform: uppercase; } .clash-roster-lobby-member .summoner-name-container .summoner-name:lang(ko-kr), .clash-roster-lobby-member.local .summoner-name-container .summoner-name:lang(ko-kr), .clash-roster-lobby-member .summoner-name-container .summoner-name:lang(ja-jp), .clash-roster-lobby-member.local .summoner-name-container .summoner-name:lang(ja-jp), .clash-roster-lobby-member .summoner-name-container .summoner-name:lang(tr-tr), .clash-roster-lobby-member.local .summoner-name-container .summoner-name:lang(tr-tr), .clash-roster-lobby-member .summoner-name-container .summoner-name:lang(el-gr), .clash-roster-lobby-member.local .summoner-name-container .summoner-name:lang(el-gr), .clash-roster-lobby-member .summoner-name-container .summoner-name:lang(th-th), .clash-roster-lobby-member.local .summoner-name-container .summoner-name:lang(th-th), .clash-roster-lobby-member .summoner-name-container .summoner-name:lang(zh-tw), .clash-roster-lobby-member.local .summoner-name-container .summoner-name:lang(zh-tw) { text-transform: none; } .clash-roster-lobby-member .summoner-name-container .summoner-name, .clash-roster-lobby-member.local .summoner-name-container .summoner-name { text-transform: none; } .clash-roster-lobby-member.local .summoner-name-container .summoner-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-roster-lobby-member.local .summoner-name-container .summoner-name:lang(ar-ae) { letter-spacing: 0; } .clash-roster-lobby-member.local .summoner-name-container .summoner-name { letter-spacing: 0.025em; } .clash-roster-lobby-member.local .summoner-name-container .summoner-name:lang(ar-ae) { letter-spacing: 0; } .clash-roster-lobby-member .summoner-name-container .summoner-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-roster-lobby-member .summoner-name-container .summoner-name:lang(ar-ae) { letter-spacing: 0; } .clash-roster-lobby-member .summoner-name-container .summoner-name { letter-spacing: 0.0375em; } .clash-roster-lobby-member .summoner-name-container .summoner-name:lang(ar-ae) { letter-spacing: 0; } .clash-roster-lobby-member .summoner-name-container .summoner-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-roster-lobby-member { position: relative; height: 290px; width: 145px; margin-top: 12px; margin-left: 19px; margin-right: 19px; display: flex; flex-direction: column; align-items: center; background-size: cover; background-repeat: no-repeat; } .clash-roster-lobby-member .roster-captain-icon-container { position: absolute; width: 100%; top: 0; opacity: 0; } .clash-roster-lobby-member .roster-captain-icon-container .roster-captain-icon-border { position: absolute; margin: auto; left: 0; right: 0; width: 85px; top: -5px; } .clash-roster-lobby-member .summoner-icon-halo { opacity: 0; } .clash-roster-lobby-member .summoner-icon { width: 75px; height: 75px; } .clash-roster-lobby-member .summoner-name-container { direction: ltr; display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; min-height: 30px; margin-top: 10px; } .clash-roster-lobby-member .summoner-name-container .roster-captain-icon { background-image: url("/fe/lol-clash/assets/images/roster/captain-icon.png"); background-size: contain; background-repeat: no-repeat; min-width: 18px; width: 18px; height: 18px; margin: 0 6px 0 0 ; background-position-y: 1px; } .clash-roster-lobby-member .summoner-name-container .summoner-name { color: #a09b8c; opacity: 0; text-align: center; } .clash-roster-lobby-member .role-selector-button-container { margin-top: 20px; width: 35px; height: 35px; opacity: 0; } .clash-roster-lobby-member .ticket-selector-button-container { margin-top: 10px; height: 60px; opacity: 0; } .clash-roster-lobby-member .ticket-selector-button-container img { height: 100%; } .clash-roster-lobby-member.local { height: 400px; width: 200px; margin-top: 15px; margin-left: 16px; margin-right: 16px; } .clash-roster-lobby-member.local .roster-captain-icon-container .roster-captain-icon-border { width: 114px; top: -7px; } .clash-roster-lobby-member.local .summoner-icon { width: 100px; height: 100px; } .clash-roster-lobby-member.local .summoner-name-container .summoner-name { color: #f0e6d2; } .clash-roster-lobby-member.local .role-selector-button-container { margin-top: 30px; width: 64px; height: 64px; } .clash-roster-lobby-member.local .ticket-selector-button-container { height: 78px; margin-top: 10px; } .clash-match-info .header, .clash-match-info .main-content .roster-bye .roster-bye-tag, .clash-match-info .main-content .roster-info .tag, .clash-match-info .main-content .center-piece, .clash-match-info .vs .vs-text { font-family: var(--font-display); } .clash-match-info .pick-side-labels-container .pick-side-label-first, .clash-match-info .pick-side-labels-container .pick-side-label-second { font-family: var(--font-body); } .clash-match-info .header, .clash-match-info .main-content .roster-bye .roster-bye-tag, .clash-match-info .main-content .roster-info .tag, .clash-match-info .main-content .center-piece, .clash-match-info .vs .vs-text, .clash-match-info .pick-side-labels-container .pick-side-label-first, .clash-match-info .pick-side-labels-container .pick-side-label-second { -webkit-user-select: none; } .clash-match-info .header, .clash-match-info .main-content .roster-bye .roster-bye-tag, .clash-match-info .main-content .roster-info .tag, .clash-match-info .main-content .center-piece, .clash-match-info .vs .vs-text, .clash-match-info .pick-side-labels-container .pick-side-label-first, .clash-match-info .pick-side-labels-container .pick-side-label-second { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-match-info .header, .clash-match-info .main-content .roster-bye .roster-bye-tag, .clash-match-info .main-content .roster-info .tag, .clash-match-info .main-content .center-piece, .clash-match-info .vs .vs-text { text-transform: uppercase; } .clash-match-info .header:lang(ko-kr), .clash-match-info .main-content .roster-bye .roster-bye-tag:lang(ko-kr), .clash-match-info .main-content .roster-info .tag:lang(ko-kr), .clash-match-info .main-content .center-piece:lang(ko-kr), .clash-match-info .vs .vs-text:lang(ko-kr), .clash-match-info .header:lang(ja-jp), .clash-match-info .main-content .roster-bye .roster-bye-tag:lang(ja-jp), .clash-match-info .main-content .roster-info .tag:lang(ja-jp), .clash-match-info .main-content .center-piece:lang(ja-jp), .clash-match-info .vs .vs-text:lang(ja-jp), .clash-match-info .header:lang(tr-tr), .clash-match-info .main-content .roster-bye .roster-bye-tag:lang(tr-tr), .clash-match-info .main-content .roster-info .tag:lang(tr-tr), .clash-match-info .main-content .center-piece:lang(tr-tr), .clash-match-info .vs .vs-text:lang(tr-tr), .clash-match-info .header:lang(el-gr), .clash-match-info .main-content .roster-bye .roster-bye-tag:lang(el-gr), .clash-match-info .main-content .roster-info .tag:lang(el-gr), .clash-match-info .main-content .center-piece:lang(el-gr), .clash-match-info .vs .vs-text:lang(el-gr), .clash-match-info .header:lang(th-th), .clash-match-info .main-content .roster-bye .roster-bye-tag:lang(th-th), .clash-match-info .main-content .roster-info .tag:lang(th-th), .clash-match-info .main-content .center-piece:lang(th-th), .clash-match-info .vs .vs-text:lang(th-th), .clash-match-info .header:lang(zh-tw), .clash-match-info .main-content .roster-bye .roster-bye-tag:lang(zh-tw), .clash-match-info .main-content .roster-info .tag:lang(zh-tw), .clash-match-info .main-content .center-piece:lang(zh-tw), .clash-match-info .vs .vs-text:lang(zh-tw) { text-transform: none; } .clash-match-info .vs .vs-text { text-transform: none; } .clash-match-info .main-content .roster-info .tag, .clash-match-info .main-content .center-piece, .clash-match-info .vs .vs-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-match-info .main-content .roster-info .tag:lang(ar-ae), .clash-match-info .main-content .center-piece:lang(ar-ae), .clash-match-info .vs .vs-text:lang(ar-ae) { letter-spacing: 0; } .clash-match-info .vs .vs-text { letter-spacing: 0.025em; } .clash-match-info .vs .vs-text:lang(ar-ae) { letter-spacing: 0; } .clash-match-info .main-content .roster-bye .roster-bye-tag { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-match-info .main-content .roster-bye .roster-bye-tag:lang(ar-ae) { letter-spacing: 0; } .clash-match-info .header { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-match-info .header:lang(ja-jp) { font-size: 13px; } .clash-match-info .header:lang(ar-ae) { letter-spacing: 0; } .clash-match-info .pick-side-labels-container .pick-side-label-first, .clash-match-info .pick-side-labels-container .pick-side-label-second { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-match-info .pick-side-labels-container .pick-side-label-first:lang(ja-jp), .clash-match-info .pick-side-labels-container .pick-side-label-second:lang(ja-jp) { font-size: 13px; } .clash-match-info .pick-side-labels-container .pick-side-label-first:lang(ar-ae), .clash-match-info .pick-side-labels-container .pick-side-label-second:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-match-info { display: flex; flex-direction: column; align-items: flex-start; } .clash-match-info .header { direction: ltr; color: #a09b8c; width: 100%; text-align: center; margin-bottom: 5px; } .clash-match-info .header .header-number { color: #f0e6d2; } .clash-match-info .main-content { display: flex; flex-direction: row; align-items: center; justify-content: center; border-color: #5c5b57; border-width: 2px; border-style: double; } .clash-match-info .main-content .roster-bye { height: 120px; width: 235px; background-image: url("/fe/lol-clash/assets/images/bye-radial-offset.png"), radial-gradient(#000, rgba(255,255,255,0.1)); background-repeat: no-repeat; background-size: contain; background-position: center; } .clash-match-info .main-content .roster-bye .roster-bye-tag { direction: ltr; color: #c8aa6e; position: relative; width: 100%; text-align: center; top: 97px; } .clash-match-info .main-content .roster-info { position: relative; height: 100%; width: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .clash-match-info .main-content .roster-info.local { position: relative; } .clash-match-info .main-content .roster-info.local .tag-row { flex-direction: row; } .clash-match-info .main-content .roster-info.local .tag { color: #fabe0a; } .clash-match-info .main-content .roster-info.local .pick-side-image { left: initial; right: 0px; } .clash-match-info .main-content .roster-info .tag-row { display: flex; justify-content: center; width: 100%; flex-direction: row-reverse; margin-top: 6px; } .clash-match-info .main-content .roster-info .pick-side-image { width: 10px; height: 10px; position: absolute; margin-top: 5px; left: 0px; } .clash-match-info .main-content .roster-info .tag { color: #5b5a56; } .clash-match-info .main-content .roster-info .tag.roster-tbd { margin-top: 6px; letter-spacing: initial; font-size: 16px; } .clash-match-info .main-content .roster-info .icon { height: 70px; } .clash-match-info .main-content .roster-info .icon.roster-tbd { height: 70px; } .clash-match-info .main-content .roster-info .icon img { height: 100%; } .clash-match-info .main-content .center-piece { color: #c89b3c; width: 65px; margin: 0 10px; text-align: center; } .clash-match-info .vs { width: 45px; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; } .clash-match-info .vs path, .clash-match-info .vs rect { stroke: #5c5b57; stroke-width: 2px; fill: transparent; } .clash-match-info .vs .vs-line { flex-shrink: 1; width: 4px; height: 36px; } .clash-match-info .vs .vs-line.bot-line { height: 44px; } .clash-match-info .vs .vs-text { color: #a09b8c; position: absolute; left: 50%; top: 70px; transform: translate(-50%, 0%); text-align: center; } .clash-match-info .pick-side-labels-container { display: flex; flex-direction: row; justify-content: space-around; width: 100%; margin-top: 8px; } .clash-match-info .pick-side-labels-container .pick-side-label-first { direction: ltr; color: #a09b8c; } .clash-match-info .pick-side-labels-container .pick-side-label-second { direction: ltr; color: #a09b8c; } .clash-faq-link { font-family: var(--font-body); } .clash-faq-link { -webkit-user-select: none; } .clash-faq-link { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-faq-link { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .clash-faq-link:lang(ja-jp) { font-size: 13px; } .clash-faq-link:lang(ar-ae) { letter-spacing: 0; } .clash-faq-link { color: #0596aa; text-decoration: none; } .clash-faq-link:hover, .clash-faq-link.hover { color: #cdfafa; } .clash-faq-link:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-clash/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .clash-faq-link:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .clash-faq-link:hover:after { background-color: #cdfafa; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-faq { position: relative; } .clash-faq-link { cursor: pointer; } .clash-hub { display: flex; flex-direction: row ; width: 100%; height: 100%; } .clash-hub .clash-hub-left-no-tournament { display: flex; align-items: center; justify-content: center; } .clash-hub .clash-hub-no-tournament-img { width: 80%; } .clash-hub .clash-hub-left { width: 280px; height: 460px; } .clash-hub .clash-hub-middle { height: 460px; position: relative; flex-grow: 1; margin-left: 24px; } .clash-hub .clash-hub-middle::before { content: ''; position: absolute; left: -1px ; right: auto ; width: 1px; height: 100%; background: -webkit-linear-gradient(rgba(60,60,65,0), #3c3c41 20%, #3c3c41 80%, rgba(60,60,65,0)); } .clash-parallax-background { height: 100%; width: 100%; position: relative; overflow: hidden; } .clash-parallax-background #parallax-target { position: absolute; top: 0; left: 0; height: 100%; } .clash-bracket-header .header-info .bracket-text, .clash-bracket-header .header-info .tournament-text { font-family: var(--font-display); } .clash-bracket-header .header-info .bracket-text, .clash-bracket-header .header-info .tournament-text { -webkit-user-select: none; } .clash-bracket-header .header-info .bracket-text, .clash-bracket-header .header-info .tournament-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-bracket-header .header-info .bracket-text, .clash-bracket-header .header-info .tournament-text { text-transform: uppercase; } .clash-bracket-header .header-info .bracket-text:lang(ko-kr), .clash-bracket-header .header-info .tournament-text:lang(ko-kr), .clash-bracket-header .header-info .bracket-text:lang(ja-jp), .clash-bracket-header .header-info .tournament-text:lang(ja-jp), .clash-bracket-header .header-info .bracket-text:lang(tr-tr), .clash-bracket-header .header-info .tournament-text:lang(tr-tr), .clash-bracket-header .header-info .bracket-text:lang(el-gr), .clash-bracket-header .header-info .tournament-text:lang(el-gr), .clash-bracket-header .header-info .bracket-text:lang(th-th), .clash-bracket-header .header-info .tournament-text:lang(th-th), .clash-bracket-header .header-info .bracket-text:lang(zh-tw), .clash-bracket-header .header-info .tournament-text:lang(zh-tw) { text-transform: none; } .clash-bracket-header .header-info .bracket-text { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clash-bracket-header .header-info .bracket-text:lang(ar-ae) { letter-spacing: 0; } .clash-bracket-header .header-info .tournament-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-bracket-header .header-info .tournament-text:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-bracket-header { height: 100%; width: 100%; display: flex; flex-direction: row; align-items: center; } .clash-bracket-header .header-logo { margin-right: 10px; width: 52px; } .clash-bracket-header .header-info { display: flex; flex-direction: column; justify-content: space-between; height: 100%; margin-top: 3px; white-space: nowrap; } .clash-bracket-header .header-info .bracket-text { direction: ltr; display: flex; flex-direction: row ; align-items: center; margin-bottom: 3px; } .clash-bracket-header .header-info .tournament-text { direction: ltr; display: flex; flex-direction: row ; align-items: center; color: #a09b8c; } .clash-bracket-nav .button .clash-generic-button-root { font-family: var(--font-display); } .clash-bracket-nav .button .clash-generic-button-root { -webkit-user-select: none; } .clash-bracket-nav .button .clash-generic-button-root { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-bracket-nav .button .clash-generic-button-root { text-transform: uppercase; } .clash-bracket-nav .button .clash-generic-button-root:lang(ko-kr), .clash-bracket-nav .button .clash-generic-button-root:lang(ja-jp), .clash-bracket-nav .button .clash-generic-button-root:lang(tr-tr), .clash-bracket-nav .button .clash-generic-button-root:lang(el-gr), .clash-bracket-nav .button .clash-generic-button-root:lang(th-th), .clash-bracket-nav .button .clash-generic-button-root:lang(zh-tw) { text-transform: none; } .clash-bracket-nav .button .clash-generic-button-root { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-bracket-nav .button .clash-generic-button-root:lang(ja-jp) { font-size: 13px; } .clash-bracket-nav .button .clash-generic-button-root:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-bracket-nav { direction: ltr; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; } .clash-bracket-nav .button { height: 35px; max-width: 200px; flex-grow: 1; } .clash-bracket-nav .button .clash-generic-button-root { color: #c8aa6e; position: relative; } .clash-bracket-nav .button .clash-generic-button-root .clash-generic-button-state { text-align: center; line-height: 35px; } .clash-bracket-nav .button .clash-generic-button-root .clash-generic-button-state.over, .clash-bracket-nav .button .clash-generic-button-root .clash-generic-button-state.selected { color: #f0e6d2; } .clash-bracket-nav .button .clash-generic-button-root .clash-generic-button-state.down { color: #785a28; } .clash-bracket-nav .button .clash-generic-button-root .clash-generic-button-state:not(.selected)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background-color: rgba(200,200,200,0.5); } .clash-bracket-nav .button .clash-generic-button-root .clash-generic-button-state.selected::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background-color: #785a28; } .clash-bracket-nav-16 .button .clash-generic-button-root { font-family: var(--font-display); } .clash-bracket-nav-16 .button .clash-generic-button-root { -webkit-user-select: none; } .clash-bracket-nav-16 .button .clash-generic-button-root { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-bracket-nav-16 .button .clash-generic-button-root { text-transform: uppercase; } .clash-bracket-nav-16 .button .clash-generic-button-root:lang(ko-kr), .clash-bracket-nav-16 .button .clash-generic-button-root:lang(ja-jp), .clash-bracket-nav-16 .button .clash-generic-button-root:lang(tr-tr), .clash-bracket-nav-16 .button .clash-generic-button-root:lang(el-gr), .clash-bracket-nav-16 .button .clash-generic-button-root:lang(th-th), .clash-bracket-nav-16 .button .clash-generic-button-root:lang(zh-tw) { text-transform: none; } .clash-bracket-nav-16 .button .clash-generic-button-root { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-bracket-nav-16 .button .clash-generic-button-root:lang(ja-jp) { font-size: 13px; } .clash-bracket-nav-16 .button .clash-generic-button-root:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-bracket-nav-16 { direction: ltr; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; } .clash-bracket-nav-16 .button { height: 35px; max-width: 200px; flex-grow: 1; } .clash-bracket-nav-16 .button .clash-generic-button-root { color: #c8aa6e; position: relative; } .clash-bracket-nav-16 .button .clash-generic-button-root .clash-generic-button-state { text-align: center; line-height: 35px; } .clash-bracket-nav-16 .button .clash-generic-button-root .clash-generic-button-state.over, .clash-bracket-nav-16 .button .clash-generic-button-root .clash-generic-button-state.selected { color: #f0e6d2; } .clash-bracket-nav-16 .button .clash-generic-button-root .clash-generic-button-state.down { color: #785a28; } .clash-bracket-nav-16 .button .clash-generic-button-root .clash-generic-button-state:not(.selected)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background-color: rgba(200,200,200,0.5); } .clash-bracket-nav-16 .button .clash-generic-button-root .clash-generic-button-state.selected::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background-color: #785a28; } .clash-action-timeline .action-flow-container .action .countdown .headlineTitle, .clash-action-timeline .action-flow-container .action .countdown .infoTitle, .clash-action-timeline .action-flow-container .action .name, .clash-action-timeline .action-flow-container .action .name.in-queue { font-family: var(--font-display); } .action-button-container-content, .action-button-container-content .clash-bracket-estimate { font-family: var(--font-body); } .action-button-container-content, .action-button-container-content .clash-bracket-estimate, .clash-action-timeline .action-flow-container .action .countdown .headlineTitle, .clash-action-timeline .action-flow-container .action .countdown .infoTitle, .clash-action-timeline .action-flow-container .action .name, .clash-action-timeline .action-flow-container .action .name.in-queue { -webkit-user-select: none; } .action-button-container-content, .action-button-container-content .clash-bracket-estimate, .clash-action-timeline .action-flow-container .action .countdown .headlineTitle, .clash-action-timeline .action-flow-container .action .countdown .infoTitle, .clash-action-timeline .action-flow-container .action .name, .clash-action-timeline .action-flow-container .action .name.in-queue { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-action-timeline .action-flow-container .action .countdown .headlineTitle, .clash-action-timeline .action-flow-container .action .countdown .infoTitle, .clash-action-timeline .action-flow-container .action .name, .clash-action-timeline .action-flow-container .action .name.in-queue { text-transform: uppercase; } .clash-action-timeline .action-flow-container .action .countdown .headlineTitle:lang(ko-kr), .clash-action-timeline .action-flow-container .action .countdown .infoTitle:lang(ko-kr), .clash-action-timeline .action-flow-container .action .name:lang(ko-kr), .clash-action-timeline .action-flow-container .action .name.in-queue:lang(ko-kr), .clash-action-timeline .action-flow-container .action .countdown .headlineTitle:lang(ja-jp), .clash-action-timeline .action-flow-container .action .countdown .infoTitle:lang(ja-jp), .clash-action-timeline .action-flow-container .action .name:lang(ja-jp), .clash-action-timeline .action-flow-container .action .name.in-queue:lang(ja-jp), .clash-action-timeline .action-flow-container .action .countdown .headlineTitle:lang(tr-tr), .clash-action-timeline .action-flow-container .action .countdown .infoTitle:lang(tr-tr), .clash-action-timeline .action-flow-container .action .name:lang(tr-tr), .clash-action-timeline .action-flow-container .action .name.in-queue:lang(tr-tr), .clash-action-timeline .action-flow-container .action .countdown .headlineTitle:lang(el-gr), .clash-action-timeline .action-flow-container .action .countdown .infoTitle:lang(el-gr), .clash-action-timeline .action-flow-container .action .name:lang(el-gr), .clash-action-timeline .action-flow-container .action .name.in-queue:lang(el-gr), .clash-action-timeline .action-flow-container .action .countdown .headlineTitle:lang(th-th), .clash-action-timeline .action-flow-container .action .countdown .infoTitle:lang(th-th), .clash-action-timeline .action-flow-container .action .name:lang(th-th), .clash-action-timeline .action-flow-container .action .name.in-queue:lang(th-th), .clash-action-timeline .action-flow-container .action .countdown .headlineTitle:lang(zh-tw), .clash-action-timeline .action-flow-container .action .countdown .infoTitle:lang(zh-tw), .clash-action-timeline .action-flow-container .action .name:lang(zh-tw), .clash-action-timeline .action-flow-container .action .name.in-queue:lang(zh-tw) { text-transform: none; } .clash-action-timeline .action-flow-container .action .name, .clash-action-timeline .action-flow-container .action .name.in-queue { text-transform: none; } .clash-action-timeline .action-flow-container .action .countdown .headlineTitle { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-action-timeline .action-flow-container .action .countdown .headlineTitle:lang(ar-ae) { letter-spacing: 0; } .clash-action-timeline .action-flow-container .action .name.in-queue { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-action-timeline .action-flow-container .action .name.in-queue:lang(ar-ae) { letter-spacing: 0; } .clash-action-timeline .action-flow-container .action .name.in-queue { letter-spacing: 0.0375em; } .clash-action-timeline .action-flow-container .action .name.in-queue:lang(ar-ae) { letter-spacing: 0; } .clash-action-timeline .action-flow-container .action .countdown .infoTitle, .clash-action-timeline .action-flow-container .action .name { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-action-timeline .action-flow-container .action .countdown .infoTitle:lang(ja-jp), .clash-action-timeline .action-flow-container .action .name:lang(ja-jp) { font-size: 13px; } .clash-action-timeline .action-flow-container .action .countdown .infoTitle:lang(ar-ae), .clash-action-timeline .action-flow-container .action .name:lang(ar-ae) { letter-spacing: 0; } .clash-action-timeline .action-flow-container .action .name { letter-spacing: 0.0375em; } .clash-action-timeline .action-flow-container .action .name:lang(ar-ae) { letter-spacing: 0; } .action-button-container-content, .action-button-container-content .clash-bracket-estimate { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .action-button-container-content:lang(ja-jp), .action-button-container-content .clash-bracket-estimate:lang(ja-jp) { font-size: 13px; } .action-button-container-content:lang(ar-ae), .action-button-container-content .clash-bracket-estimate:lang(ar-ae) { letter-spacing: 0; } .clash-action-timeline .action-flow-container .action .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .centering-padding { width: calc(50% - (180px / 2)); display: flex; flex-direction: row; justify-content: flex-end; } .action-button-wing-left, .action-button-wing-right { background-image: url("/fe/lol-clash/assets/images/action-timeline-wing-left.png"); background-repeat: no-repeat; background-size: contain; background-position-y: 10px; margin: 0 32px 0 0; width: 250px; } .action-button-wing-right { transform: scaleX(-1); margin: 0 0 0 32px; } .action-button-container-content { position: absolute; margin: 4px auto; left: 0; right: 0; width: 180px; height: 36px; text-align: center; opacity: 0; animation: 0.5s linear 1s forwards clash-fade-in; } .action-button-container-content .clash-bracket-estimate .body { color: #785a28; } .clash-action-timeline { pointer-events: none; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 10px; width: 100%; height: 100%; } .clash-action-timeline .action-button-container { display: flex; flex-direction: row; justify-content: center; direction: ltr ; } .clash-action-timeline .action-button-container .action-button-arrow-container { pointer-events: auto; } .clash-action-timeline .action-button-container .action-button-arrow-container .arrow-footer { justify-content: flex-start; } .clash-action-timeline .action-button-container .action-button-arrow-container .arrow-footer .arrow-footer-decoration { display: none; } .clash-action-timeline .action-button-container .action-button-arrow-container.fade-out { animation: 1s forwards clash-fade-out; } .clash-action-timeline .action-button-container .action-button-flat-container { display: flex; pointer-events: auto; min-width: 180px; align-self: flex-start; margin: -5px 5px 0; border-style: solid; padding: 3px; border-color: #463714; border-width: 1px; } .clash-action-timeline .action-button-container .action-button-flat-container .action-button-flat { width: 100%; } .clash-action-timeline .action-button-container .action-button-flat-container lol-uikit-flat-button { --flat-button-height: 28px; --flat-button-min-height: 0px; } .clash-action-timeline .action-button-container .action-button-flat-container.fade-out { animation: 1s forwards clash-fade-out; pointer-events: none; } .clash-action-timeline .action-flow-container { direction: ltr; display: flex; flex-direction: row; align-items: flex-end; pointer-events: none; } .clash-action-timeline .action-flow-container .action { margin: 0 25px; padding-bottom: 10px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 100px; min-height: 50px; } .clash-action-timeline .action-flow-container .action .countdown { margin-bottom: -6px; white-space: nowrap; } .clash-action-timeline .action-flow-container .action .countdown .countdown-timer { height: 32px; } .clash-action-timeline .action-flow-container .action .countdown .headlineTitle { color: #cdbe91; margin-bottom: 15px; text-align: center; } .clash-action-timeline .action-flow-container .action .countdown .headlineTitle.wrap { white-space: normal; } .clash-action-timeline .action-flow-container .action .countdown .infoTitle { color: #5b5a56; pointer-events: auto; margin-bottom: 8px; } .clash-action-timeline .action-flow-container .action .countdown .infoTitle.active { color: #f0e6d2; margin-top: 12px; } .clash-action-timeline .action-flow-container .action .countdown .infoTitle.emphasis { color: #0a96aa; } .clash-action-timeline .action-flow-container .action .action-complete { width: 20px; display: flex; align-items: flex-end; } .clash-action-timeline .action-flow-container .action .action-complete img { width: 100%; } .clash-action-timeline .action-flow-container .action .name { color: #5b5a56; height: 35px; display: flex; align-items: center; white-space: nowrap; } .clash-action-timeline .action-flow-container .action .name.in-queue { opacity: 0; color: #0596aa; animation: 0.5s linear 1s forwards clash-fade-in; } .clash-action-timeline .action-flow-container .action.centered { width: 180px; pointer-events: none; margin: 0px; padding-bottom: 10px; } .clash-action-timeline .action-flow-container .action.active { width: 180px; pointer-events: none; margin: 0px; padding-bottom: 10px; background-image: url("/fe/lol-clash/assets/images/action-timeline-glow.png"); background-size: cover; background-repeat: no-repeat; background-position-y: -4px; } .clash-action-timeline .action-flow-container .action.has-tooltip { pointer-events: auto; } .clash-action-timeline .action-flow-container .arrow-right { width: 20px; padding-bottom: 10px; transform: none ; } .clash-action-timeline .action-flow-container .arrow-right img { width: 100%; } .clash-action-timeline .clash-action-flow-action-disabled { margin: 20px 0; } .clash-action-timeline .clash-action-flow-action-disabled .action-disabled-lock { height: 36px; width: 36px; margin: auto; background-image: url("/fe/lol-clash/assets/images/hub/honor-lock-icon.png"); background-size: cover; background-repeat: no-repeat; } .clash-action-timeline .clash-action-flow-action-disabled .action-disabled-lock:hover { background-image: url("/fe/lol-clash/assets/images/hub/honor-lock-icon-hover.png"); } .clash-defaults-dialog { min-width: 400px; } .clash-defaults-dialog .details { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin: 20px 0; } .clash-defaults-dialog .details .icon { height: 120px; } .clash-defaults-dialog .details .icon img { height: 100%; } .clash-defaults-dialog .details .name { color: #c8aa6e; text-overflow: ellipsis; width: 400px; white-space: nowrap; overflow: hidden; } .clash-defaults-dialog .details .tag { color: #c8aa6e; } #clash-leave-gameflow-lobby-dialog { width: 100%; max-width: 520px; } .clash-leave-gameflow-lobby-dialog > h4 { margin-bottom: 18px; } .clash-leave-gameflow-lobby-dialog > p { padding-bottom: 5px; } .clash-tournament-selector .clash-tournament-selector-dropdown { font-family: var(--font-display); } .clash-tournament-selector .clash-tournament-selector-dropdown { -webkit-user-select: none; } .clash-tournament-selector .clash-tournament-selector-dropdown { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tournament-selector .clash-tournament-selector-dropdown { text-transform: uppercase; } .clash-tournament-selector .clash-tournament-selector-dropdown:lang(ko-kr), .clash-tournament-selector .clash-tournament-selector-dropdown:lang(ja-jp), .clash-tournament-selector .clash-tournament-selector-dropdown:lang(tr-tr), .clash-tournament-selector .clash-tournament-selector-dropdown:lang(el-gr), .clash-tournament-selector .clash-tournament-selector-dropdown:lang(th-th), .clash-tournament-selector .clash-tournament-selector-dropdown:lang(zh-tw) { text-transform: none; } .clash-tournament-selector .clash-tournament-selector-dropdown { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-tournament-selector .clash-tournament-selector-dropdown:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tournament-selector { width: 100%; height: 100%; } .clash-tournament-selector .clash-tournament-selector-dropdown { color: #c8aa6e; height: 35px; --flat-dropdown-scrollable-max-height: 450px; --flat-dropdownactive-opens-upward-container-padding: 0 0 0 0; --flat-dropdownactive-opens-upward-container-margin: 0 0 -37px 0; --flat-dropdownactive-max-width: 400px; --flat-dropdownactive-current-display: none; --flat-dropdown-current-content-text-transform: uppercase; --flat-dropdown-current-content-font-size: 14px; --flat-dropdown-current-content-line-height: 18px; --flat-dropdown-current-content-letter-spacing: 0.075em; --flat-dropdown-current-content-color: #3c3c41; --flat-dropdown-current-height: 35px; } .clash-tournament-selector .clash-tournament-selector-dropdown lol-uikit-dropdown-option { --dropdown-option-flat-height: 35px; --dropdown-option-flat-font-weight: normal; --dropdown-option-flat-overflow: hidden; --dropdown-option-flat-text-overflow: ellipsis; --dropdown-option-flat-white-space: nowrap; } .clash-tournament-selector .clash-tournament-selector-dropdown lol-uikit-dropdown-optgroup { --dropdown-optgroup-header-font-size: 14px; } .winners-roster-component .winners-roster-name-container, .winners-roster-component .winners-roster-short-name { font-family: var(--font-display); } .winners-roster-component .winners-roster-win-container { font-family: var(--font-body); } .winners-roster-component .winners-roster-name-container, .winners-roster-component .winners-roster-short-name, .winners-roster-component .winners-roster-win-container { -webkit-user-select: none; } .winners-roster-component .winners-roster-name-container, .winners-roster-component .winners-roster-short-name, .winners-roster-component .winners-roster-win-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .winners-roster-component .winners-roster-name-container, .winners-roster-component .winners-roster-short-name { text-transform: uppercase; } .winners-roster-component .winners-roster-name-container:lang(ko-kr), .winners-roster-component .winners-roster-short-name:lang(ko-kr), .winners-roster-component .winners-roster-name-container:lang(ja-jp), .winners-roster-component .winners-roster-short-name:lang(ja-jp), .winners-roster-component .winners-roster-name-container:lang(tr-tr), .winners-roster-component .winners-roster-short-name:lang(tr-tr), .winners-roster-component .winners-roster-name-container:lang(el-gr), .winners-roster-component .winners-roster-short-name:lang(el-gr), .winners-roster-component .winners-roster-name-container:lang(th-th), .winners-roster-component .winners-roster-short-name:lang(th-th), .winners-roster-component .winners-roster-name-container:lang(zh-tw), .winners-roster-component .winners-roster-short-name:lang(zh-tw) { text-transform: none; } .winners-roster-component .winners-roster-name-container, .winners-roster-component .winners-roster-short-name { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .winners-roster-component .winners-roster-name-container:lang(ar-ae), .winners-roster-component .winners-roster-short-name:lang(ar-ae) { letter-spacing: 0; } .winners-roster-component .winners-roster-win-container { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .winners-roster-component .winners-roster-win-container:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .winners-roster-component { margin-top: 10px; margin-bottom: 10px; } .winners-roster-component .winners-roster-wrapper { display: flex; flex-direction: row; align-items: center; width: 326px; height: 84px; box-sizing: border-box; padding: 0 0 0 14px ; } .winners-roster-component .winners-roster-text-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-around; margin: 0 0 0 16px ; } .winners-roster-component .winners-roster-name-container { font-size: 18px; color: #a09b8c; line-height: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; max-width: 208px; max-height: 54px; } .winners-roster-component .winners-roster-short-name { font-size: 18px; font-weight: bolder; color: #c8aa6e; } .winners-roster-component .winners-roster-win-container { color: #a09b8c; margin-top: 5px; } .winners-roster-component .winners-roster-friend-icon { width: 14px; height: 14px; margin: 0 0 0 4px ; } .winners-roster-component { position: relative; cursor: pointer; } .winners-roster-component:hover:before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-image: url("/fe/lol-clash/assets/images/winners/roster-hover.svg"); background-size: 326px 84px; transform: none ; pointer-events: none; } .winners-roster-component:active { background: linear-gradient(90deg, rgba(0,0,0,0), rgba(100,100,100,0.1)) ; cursor: pointer; } .winners-roster-component:nth-child(3n) { border-left: 2px solid rgba(181,181,181,0.2); } .winners-roster-component:nth-child(3n-1) { border-left: 2px solid rgba(181,181,181,0.2); } .center-in-parent, .uikit-video-center-in-parent video, .clash-capsule-progress .clash-capsule-progress-change-bid-animation video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-capsule-progress { position: relative; min-height: 248px; width: 100%; left: 0; top: 0; } .clash-capsule-progress .clash-capsule-progress-background { position: absolute; top: 0; left: 0; width: 100%; } .clash-capsule-progress .clash-capsule-progress-content { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .clash-capsule-progress .clash-capsule-progress-reward { position: absolute; left: -32px; width: 256px; } .clash-capsule-progress .clash-capsule-progress-reward.capsule { top: -40px; } .clash-capsule-progress .clash-capsule-progress-reward.orb { top: -30px; } .clash-capsule-progress .clash-capsule-progress-progression { position: absolute; width: 100%; bottom: 0; } .clash-capsule-progress .clash-capsule-progress-change-bid-animation video { top: 36%; width: 300px; height: 300px; } .clash-capsule-progress-tooltip-container { position: absolute; top: 22%; height: 80%; left: 0; width: 100%; pointer-events: auto; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root { font-family: var(--font-display); } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root { -webkit-user-select: none; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root { text-transform: uppercase; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root:lang(ko-kr), .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root:lang(ja-jp), .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root:lang(tr-tr), .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root:lang(el-gr), .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root:lang(th-th), .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root:lang(zh-tw) { text-transform: none; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root:lang(ja-jp) { font-size: 13px; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-underlined-selector { height: 100%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; } .clash-underlined-selector .clash-underlined-selector-button.clash-underlined-selector-title-button .clash-generic-button-root .clash-generic-button-state.disabled .clash-generic-button-text { justify-content: flex-start; white-space: nowrap; min-width: 100px; color: #a09b8c; } .clash-underlined-selector .clash-underlined-selector-button { height: 30px; flex-grow: 1; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root { color: #c8aa6e; position: relative; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root .clash-generic-button-state { text-align: center; line-height: 30px; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root .clash-generic-button-state.up .clash-generic-button-text { color: #a09b8c; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root .clash-generic-button-state.over .clash-generic-button-text, .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root .clash-generic-button-state.selected .clash-generic-button-text { color: #f0e6d2; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root .clash-generic-button-state.down .clash-generic-button-text { color: #785a28; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root .clash-generic-button-state.disabled .clash-generic-button-text { color: #5b5a56; cursor: default; } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root .clash-generic-button-state:not(.selected)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background-color: rgba(200,200,200,0.5); } .clash-underlined-selector .clash-underlined-selector-button .clash-generic-button-root .clash-generic-button-state.selected::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background-color: #fabe0a; } .clash-vp-progress .text-container .vp-progress-text { font-family: var(--font-display); } .clash-vp-progress .text-container .vp-progress-text { -webkit-user-select: none; } .clash-vp-progress .text-container .vp-progress-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-vp-progress .text-container .vp-progress-text { text-transform: uppercase; } .clash-vp-progress .text-container .vp-progress-text:lang(ko-kr), .clash-vp-progress .text-container .vp-progress-text:lang(ja-jp), .clash-vp-progress .text-container .vp-progress-text:lang(tr-tr), .clash-vp-progress .text-container .vp-progress-text:lang(el-gr), .clash-vp-progress .text-container .vp-progress-text:lang(th-th), .clash-vp-progress .text-container .vp-progress-text:lang(zh-tw) { text-transform: none; } .clash-vp-progress .text-container .vp-progress-text { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clash-vp-progress .text-container .vp-progress-text:lang(ar-ae) { letter-spacing: 0; } .clash-vp-progress .text-container .vp-progress-text { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .clash-vp-progress { display: flex; flex-direction: column; } .clash-vp-progress .vp-progress-container { width: 200px; height: 200px; pointer-events: auto; } .clash-vp-progress .vp-progress-container .vp-progress-circle { position: absolute; width: 200px; height: 200px; } .clash-vp-progress .vp-progress-container .vp-progress-circle .vp-progress-item { width: 200px; height: 200px; background-size: contain; background-repeat: no-repeat; } .clash-vp-progress .vp-progress-container .vp-progress-circle .vp-progress-background { background-image: url("/fe/lol-clash/assets/images/celebration/vp_progression_frame.png"); } .clash-vp-progress .vp-progress-container .vp-progress-circle .vp-progress-percent { background-image: url("/fe/lol-clash/assets/images/hub/vp-progress.png"); -webkit-mask-image: url("/fe/lol-clash/assets/images/hub/vp-progress-mask.png"); -webkit-mask-size: cover; } .clash-vp-progress .vp-progress-container .vp-progress-circle .vp-progress-complete { background-image: url("/fe/lol-clash/assets/images/celebration/vp_progression_meter_complete.png"); -webkit-mask-image: url("/fe/lol-clash/assets/images/hub/vp-progress-mask.png"); -webkit-mask-size: cover; } .clash-vp-progress .vp-progress-container .vp-reward-image-container { width: 100%; height: 100%; -webkit-mask-image: url("/fe/lol-clash/assets/images/hub/vp-progress-reward-mask.png"); -webkit-mask-size: cover; display: flex; align-items: center; justify-content: center; } .clash-vp-progress .vp-progress-container .vp-reward-image-container.desaturate { -webkit-filter: grayscale(85%); } .clash-vp-progress .vp-progress-container .vp-reward-image-container .vp-reward-image-flag { position: absolute; width: 128px; height: 128px; left: 36px; top: 36px; } .clash-vp-progress .vp-progress-container .vp-reward-image-container .banner { display: block; position: absolute; transform-origin: 0 50%; width: 68px; height: 120px; top: 63px; left: 70px; background-size: contain; background-repeat: no-repeat; transform: rotate3d(-4.6, 2.5, -1.25, 44deg); } .clash-vp-progress .vp-progress-container .vp-reward-image-container .vp-reward-image-logo { width: 112px; height: 112px; } .clash-vp-progress .vp-progress-container .vp-reward-complete-black-cover { position: absolute; top: 0; left: 0; height: 100%; opacity: 0.5; } .clash-vp-progress .vp-progress-container .vp-reward-complete-image { position: absolute; height: 200px; width: 200px; left: 0; right: 0; } .clash-vp-progress .text-container { display: flex; flex-direction: column; align-items: center; margin-top: -20px; width: 100%; } .clash-vp-progress .text-container .vp-progress-text { font-size: 18px; display: flex; align-items: center; } .clash-vp-progress-tooltip-container { position: absolute; top: 22%; height: 80%; left: 0; width: 100%; } .rewards-modal-question-mark { height: 18px; width: 18px; padding-left: 3px; cursor: pointer; pointer-events: all; } .clash-carousel .clash-carousel-nav-item-title { font-family: var(--font-display); } .clash-carousel .clash-carousel-nav-item-title { -webkit-user-select: none; } .clash-carousel .clash-carousel-nav-item-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-carousel .clash-carousel-nav-item-title { text-transform: uppercase; } .clash-carousel .clash-carousel-nav-item-title:lang(ko-kr), .clash-carousel .clash-carousel-nav-item-title:lang(ja-jp), .clash-carousel .clash-carousel-nav-item-title:lang(tr-tr), .clash-carousel .clash-carousel-nav-item-title:lang(el-gr), .clash-carousel .clash-carousel-nav-item-title:lang(th-th), .clash-carousel .clash-carousel-nav-item-title:lang(zh-tw) { text-transform: none; } .clash-carousel .clash-carousel-nav-item-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-carousel .clash-carousel-nav-item-title:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-carousel, .clash-carousel .clash-carousel-content, .clash-carousel .clash-carousel-nav, .clash-carousel .clash-carousel-nav-info-section, .clash-carousel .clash-carousel-nav-pips-container { display: flex; flex-direction: row; align-items: center; justify-content: center; } .clash-carousel { position: absolute; height: 100%; width: 100%; left: 0; top: 0; flex-direction: column; } .clash-carousel .clash-carousel-content { position: relative; top: 0; left: 0; width: 100%; height: 100%; } .clash-carousel .clash-carousel-section-controller { position: absolute; } .clash-carousel .clash-carousel-nav { height: 70px; width: 100%; justify-content: center; } .clash-carousel .clash-carousel-nav.use-buttons-on-nav { justify-content: space-between; } .clash-carousel .clash-carousel-nav-info-section { flex-direction: column; } .clash-carousel .clash-carousel-content-buttons { direction: ltr ; position: relative; width: 100%; display: flex; justify-content: space-between; } .clash-carousel .clash-carousel-item { position: absolute; height: 100%; width: 100%; left: 0; top: 0; } .clash-carousel .clash-carousel-nav-item-title { color: #a09b8c; font-size: 12px; text-align: center; flex: 1; margin-bottom: 7px; } .clash-carousel .clash-carousel-nav-pip { width: 4px; height: 4px; margin: 0 4.5px; border: thin solid #785a28; border-radius: 4px; } .clash-carousel .clash-carousel-nav-pip.clash-carousel-nav-pip-selected { background: #785a28; } .clash-carousel .clash-carousel-nav-button { margin: 0 12px; } .clash-carousel-button { height: 30px; width: 30px; visibility: hidden; } .clash-carousel-button.clash-carousel-button-is-visible { visibility: visible; } .clash-hub-roster .hub-roster-record-tournament-name { font-family: var(--font-display); } .clash-hub-roster .hub-roster-record-tournament-name { -webkit-user-select: none; } .clash-hub-roster .hub-roster-record-tournament-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-hub-roster .hub-roster-record-tournament-name { text-transform: uppercase; } .clash-hub-roster .hub-roster-record-tournament-name:lang(ko-kr), .clash-hub-roster .hub-roster-record-tournament-name:lang(ja-jp), .clash-hub-roster .hub-roster-record-tournament-name:lang(tr-tr), .clash-hub-roster .hub-roster-record-tournament-name:lang(el-gr), .clash-hub-roster .hub-roster-record-tournament-name:lang(th-th), .clash-hub-roster .hub-roster-record-tournament-name:lang(zh-tw) { text-transform: none; } .clash-hub-roster .hub-roster-record-tournament-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-hub-roster .hub-roster-record-tournament-name:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-hub-roster { display: flex; flex-direction: row; justify-content: flex-start; width: 665px; height: 100px; min-height: 100px; margin-bottom: 1px; cursor: pointer; } .clash-hub-roster:hover { background: -webkit-linear-gradient(left, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0)) ; } .clash-hub-roster:hover .hub-roster-details-name { color: #f0e6d2; } .clash-hub-roster:hover .hub-roster-record-tournament-name { color: #f0e6d2; } .clash-hub-roster:hover .hub-roster-details .clash-roster-details-team-tier .clash-tier-placement { background-color: #a09b8c; } .clash-hub-roster .hub-roster-record { width: 319px; height: 100px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; } .clash-hub-roster .hub-roster-record-text-container { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 233px; } .clash-hub-roster .hub-roster-record-tournament-name { color: #cdbe91; font-size: 12px; font-weight: 400; text-align: center; line-height: 12px; max-height: 24px; word-wrap: normal; display: flex; flex-direction: row; justify-content: center; width: 100%; } .clash-hub-roster .hub-roster-record-tournament-days { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; margin-top: 12px; } .clash-hub-roster .hub-roster-record-trophy { margin-top: 10px; } .clash-hub-roster .hub-roster-record-trophy img { width: 84px; height: 84px; } .clash-hub-roster-details .hub-roster-details-name, .clash-hub-roster-details .hub-roster-details-short-name { font-family: var(--font-display); } .clash-hub-roster-details .hub-roster-details-name, .clash-hub-roster-details .hub-roster-details-short-name { -webkit-user-select: none; } .clash-hub-roster-details .hub-roster-details-name, .clash-hub-roster-details .hub-roster-details-short-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-hub-roster-details .hub-roster-details-name, .clash-hub-roster-details .hub-roster-details-short-name { text-transform: uppercase; } .clash-hub-roster-details .hub-roster-details-name:lang(ko-kr), .clash-hub-roster-details .hub-roster-details-short-name:lang(ko-kr), .clash-hub-roster-details .hub-roster-details-name:lang(ja-jp), .clash-hub-roster-details .hub-roster-details-short-name:lang(ja-jp), .clash-hub-roster-details .hub-roster-details-name:lang(tr-tr), .clash-hub-roster-details .hub-roster-details-short-name:lang(tr-tr), .clash-hub-roster-details .hub-roster-details-name:lang(el-gr), .clash-hub-roster-details .hub-roster-details-short-name:lang(el-gr), .clash-hub-roster-details .hub-roster-details-name:lang(th-th), .clash-hub-roster-details .hub-roster-details-short-name:lang(th-th), .clash-hub-roster-details .hub-roster-details-name:lang(zh-tw), .clash-hub-roster-details .hub-roster-details-short-name:lang(zh-tw) { text-transform: none; } .clash-hub-roster-details .hub-roster-details-name, .clash-hub-roster-details .hub-roster-details-short-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-hub-roster-details .hub-roster-details-name:lang(ar-ae), .clash-hub-roster-details .hub-roster-details-short-name:lang(ar-ae) { letter-spacing: 0; } .clash-hub-roster-details .hub-roster-details-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-hub-roster-details { width: 346px; height: 100px; display: flex; position: relative; flex-direction: row; align-items: center; justify-content: flex-start; } .clash-hub-roster-details .hub-roster-details-caret { width: 26px; height: 50px; margin: 0 0 0 -1px ; transform: none ; } .clash-hub-roster-details .hub-roster-details-caret img { width: 100%; height: 100%; } .clash-hub-roster-details .pending-icon { -webkit-filter: grayscale(100%); opacity: 0.3; } .clash-hub-roster-details .pending-text { color: #5b5a56; } .clash-hub-roster-details .hub-roster-details-icon { margin: 17px 11px 20px 18px; } .clash-hub-roster-details .hub-roster-details-icon img { width: 64px; height: 64px; } .clash-hub-roster-details .hub-roster-details-name-container { display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; justify-content: center; } .clash-hub-roster-details .hub-roster-details-name { font-size: 18px; color: #a09b8c; line-height: 18px; max-height: 36px; max-width: 280px; } .clash-hub-roster-details .hub-roster-details-name-container-bottom { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .clash-hub-roster-details .hub-roster-details-short-name { font-size: 21px; color: #c8aa6e; margin: 0 8px 0 0 ; } .clash-hub-roster-details .hub-roster-details .clash-roster-details-team-tier .clash-tier-placement { font-size: 12px; background-color: #838075; } .clash-hub-roster-record-day .hub-roster-record-day-name, .clash-hub-roster-record-day .hub-roster-record-day-score, .clash-hub-roster-record-day .hub-roster-record-day-score-win { font-family: var(--font-display); } .clash-hub-roster-record-day .hub-roster-record-day-name, .clash-hub-roster-record-day .hub-roster-record-day-score, .clash-hub-roster-record-day .hub-roster-record-day-score-win { -webkit-user-select: none; } .clash-hub-roster-record-day .hub-roster-record-day-name, .clash-hub-roster-record-day .hub-roster-record-day-score, .clash-hub-roster-record-day .hub-roster-record-day-score-win { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-hub-roster-record-day .hub-roster-record-day-name, .clash-hub-roster-record-day .hub-roster-record-day-score, .clash-hub-roster-record-day .hub-roster-record-day-score-win { text-transform: uppercase; } .clash-hub-roster-record-day .hub-roster-record-day-name:lang(ko-kr), .clash-hub-roster-record-day .hub-roster-record-day-score:lang(ko-kr), .clash-hub-roster-record-day .hub-roster-record-day-score-win:lang(ko-kr), .clash-hub-roster-record-day .hub-roster-record-day-name:lang(ja-jp), .clash-hub-roster-record-day .hub-roster-record-day-score:lang(ja-jp), .clash-hub-roster-record-day .hub-roster-record-day-score-win:lang(ja-jp), .clash-hub-roster-record-day .hub-roster-record-day-name:lang(tr-tr), .clash-hub-roster-record-day .hub-roster-record-day-score:lang(tr-tr), .clash-hub-roster-record-day .hub-roster-record-day-score-win:lang(tr-tr), .clash-hub-roster-record-day .hub-roster-record-day-name:lang(el-gr), .clash-hub-roster-record-day .hub-roster-record-day-score:lang(el-gr), .clash-hub-roster-record-day .hub-roster-record-day-score-win:lang(el-gr), .clash-hub-roster-record-day .hub-roster-record-day-name:lang(th-th), .clash-hub-roster-record-day .hub-roster-record-day-score:lang(th-th), .clash-hub-roster-record-day .hub-roster-record-day-score-win:lang(th-th), .clash-hub-roster-record-day .hub-roster-record-day-name:lang(zh-tw), .clash-hub-roster-record-day .hub-roster-record-day-score:lang(zh-tw), .clash-hub-roster-record-day .hub-roster-record-day-score-win:lang(zh-tw) { text-transform: none; } .clash-hub-roster-record-day .hub-roster-record-day-name, .clash-hub-roster-record-day .hub-roster-record-day-score, .clash-hub-roster-record-day .hub-roster-record-day-score-win { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-hub-roster-record-day .hub-roster-record-day-name:lang(ar-ae), .clash-hub-roster-record-day .hub-roster-record-day-score:lang(ar-ae), .clash-hub-roster-record-day .hub-roster-record-day-score-win:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-hub-roster-record-day { display: flex; flex-direction: column; align-items: center; min-width: 77px; } .clash-hub-roster-record-day:not(:last-child) { border-right: thin solid #3c3c41; } .clash-hub-roster-record-day:not(:last-child):lang(ar-ae) { border-right: none; border-left: thin solid #3c3c41; } .clash-hub-roster-record-day .hub-roster-record-day-name { font-size: 12px; color: #5b5a56; } .clash-hub-roster-record-day .hub-roster-record-day-score { font-size: 18px; color: #5b5a56; } .clash-hub-roster-record-day .hub-roster-record-day-score img { width: 18px; height: 18px; } .clash-hub-roster-record-day .hub-roster-record-day-score-win { font-size: 18px; background: -webkit-linear-gradient(#cdbe91, #c8aa6e 40%, #785a28); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-day-planner { width: 100%; margin-top: 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; } .clash-day-planner-node { font-family: var(--font-display); } .clash-day-planner-node { -webkit-user-select: none; } .clash-day-planner-node { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-day-planner-node { text-transform: uppercase; } .clash-day-planner-node:lang(ko-kr), .clash-day-planner-node:lang(ja-jp), .clash-day-planner-node:lang(tr-tr), .clash-day-planner-node:lang(el-gr), .clash-day-planner-node:lang(th-th), .clash-day-planner-node:lang(zh-tw) { text-transform: none; } .clash-day-planner-node { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-day-planner-node:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-day-planner-node { display: flex; align-items: center; justify-content: center; height: 46px; width: 80px; margin: 0 2px; background-image: url("/fe/lol-clash/assets/images/day-planner/dayplanner-off.png"); background-size: cover; color: #cdbe91; } .clash-day-planner-node.interactive:hover { background-image: url("/fe/lol-clash/assets/images/day-planner/dayplanner-off-over.png"); } .clash-day-planner-node.active { background-image: url("/fe/lol-clash/assets/images/day-planner/dayplanner-on.png"); color: #f0e6d2; } .clash-day-planner-node.active.interactive:hover { background-image: url("/fe/lol-clash/assets/images/day-planner/dayplanner-on-over.png"); } .clash-day-planner-node .clash-day-planner-node-text { margin-top: 8px; } .clash-day-planner-node:not(.interactive) .clash-day-planner-node-text { color: #5b5a56; } .clash-day-planner-node .clash-day-planner-node-complete { background-image: url("/fe/lol-clash/assets/images/day-planner/checkmark.png"); background-size: contain; height: 24px; width: 24px; margin: 6px auto 0; } .clash-day-planner-node .clash-day-planner-node-warning { height: 24px; margin-top: 8px; } .clash-hub-roster-current .hub-roster-details-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-hub-roster-current { display: flex; position: relative; flex-direction: row; justify-content: flex-start; width: 665px; height: 100px; min-height: 100px; margin-bottom: 16px; cursor: pointer; } .clash-hub-roster-current .hub-roster-details-name { max-width: 280px; color: #fabe0a; } .clash-hub-roster-current:hover .hub-roster-details-name { color: #f0e6d2; } .clash-hub-roster-current:hover .hub-roster-record-tournament-name { color: #f0e6d2; } .clash-hub-roster-current:hover .hub-roster-details .clash-roster-details-team-tier .clash-tier-placement { background-color: #a09b8c; } .clash-hub-roster-current #hub-roster-current-background-animation { margin: 0 0 0 -32px ; pointer-events: none; } .clash-hub-roster-current .hub-roster-current-icons { position: relative; display: flex; flex-grow: 1; flex-direction: row; justify-content: center; align-items: center; } .clash-hub-roster-current .hub-roster-current-icons .hub-roster-current-icon { width: 32px; height: 32px; margin-left: 6px; margin-right: 6px; margin-bottom: 0; margin-top: 0; } .clash-hub-roster-current video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-season-vp-display .clash-season-vp-display-vp-amount, .clash-season-vp-display .clash-season-vp-display-vp-text { font-family: var(--font-display); } .clash-season-vp-display .clash-season-vp-display-vp-amount, .clash-season-vp-display .clash-season-vp-display-vp-text { -webkit-user-select: none; } .clash-season-vp-display .clash-season-vp-display-vp-amount, .clash-season-vp-display .clash-season-vp-display-vp-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-season-vp-display .clash-season-vp-display-vp-amount, .clash-season-vp-display .clash-season-vp-display-vp-text { text-transform: uppercase; } .clash-season-vp-display .clash-season-vp-display-vp-amount:lang(ko-kr), .clash-season-vp-display .clash-season-vp-display-vp-text:lang(ko-kr), .clash-season-vp-display .clash-season-vp-display-vp-amount:lang(ja-jp), .clash-season-vp-display .clash-season-vp-display-vp-text:lang(ja-jp), .clash-season-vp-display .clash-season-vp-display-vp-amount:lang(tr-tr), .clash-season-vp-display .clash-season-vp-display-vp-text:lang(tr-tr), .clash-season-vp-display .clash-season-vp-display-vp-amount:lang(el-gr), .clash-season-vp-display .clash-season-vp-display-vp-text:lang(el-gr), .clash-season-vp-display .clash-season-vp-display-vp-amount:lang(th-th), .clash-season-vp-display .clash-season-vp-display-vp-text:lang(th-th), .clash-season-vp-display .clash-season-vp-display-vp-amount:lang(zh-tw), .clash-season-vp-display .clash-season-vp-display-vp-text:lang(zh-tw) { text-transform: none; } .clash-season-vp-display .clash-season-vp-display-vp-amount { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .clash-season-vp-display .clash-season-vp-display-vp-amount:lang(ar-ae) { letter-spacing: 0; } .clash-season-vp-display .clash-season-vp-display-vp-text { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-season-vp-display .clash-season-vp-display-vp-text:lang(ar-ae) { letter-spacing: 0; } .clash-season-vp-display .clash-season-vp-display-vp-amount { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-season-vp-display { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; } .clash-season-vp-display .clash-season-vp-display-header { height: 32px; margin-top: 20px; } .clash-season-vp-display .clash-season-vp-display-vp-images { position: relative; height: 165px; margin-top: 16px; } .clash-season-vp-display .clash-season-vp-display-vp-img-frame { height: 100%; } .clash-season-vp-display .clash-season-vp-display-vp-img-logo { position: absolute; left: 18%; top: 16%; height: 64%; opacity: 0.5; } .clash-season-vp-display .clash-season-vp-display-vp-text { color: #a09b8c; font-size: 16px; margin-top: 8px; display: flex; } .clash-season-vp-display .clash-season-vp-display-my-tickets { width: 160px; height: 32px; margin-top: 28px; display: flex; align-items: center; justify-content: center; } .clash-season-vp-display .rewards-modal-question-mark { height: 18px; width: 18px; padding-left: 3px; cursor: pointer; } .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header { font-family: var(--font-display); } .clash-my-tickets-container .my-tickets-ticket-display .my-tickets-ticket-counter { font-family: var(--font-body); } .clash-my-tickets-container .my-tickets-ticket-display .my-tickets-ticket-counter, .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header { -webkit-user-select: none; } .clash-my-tickets-container .my-tickets-ticket-display .my-tickets-ticket-counter, .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header { text-transform: uppercase; } .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header:lang(ko-kr), .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header:lang(ja-jp), .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header:lang(tr-tr), .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header:lang(el-gr), .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header:lang(th-th), .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header:lang(zh-tw) { text-transform: none; } .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header:lang(ar-ae) { letter-spacing: 0; } .clash-my-tickets-container .my-tickets-ticket-display .my-tickets-ticket-counter { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-my-tickets-container .my-tickets-ticket-display .my-tickets-ticket-counter:lang(ja-jp) { font-size: 13px; } .clash-my-tickets-container .my-tickets-ticket-display .my-tickets-ticket-counter:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-my-tickets-container { display: flex; justify-content: center; align-items: center; background-color: rgba(30,35,40,0.7); border-radius: 6px; padding-right: 16px; } .clash-my-tickets-container .my-tickets-button { width: 34px; height: 31px; } .clash-my-tickets-container .my-tickets-ticket-display { display: flex; justify-content: center; align-items: center; margin-left: 13px; } .clash-my-tickets-container .my-tickets-ticket-display .my-tickets-ticket-icon { width: 8px; height: 11px; } .clash-my-tickets-container .my-tickets-ticket-display .my-tickets-ticket-counter { color: #a09b8c; margin-left: 4px; margin-top: 2px; } .my-tickets-ticket-tooltip { display: flex; flex-direction: column; align-items: center; } .my-tickets-ticket-tooltip .my-tickets-ticket-tooltip-header { color: #f0e6d2; margin-bottom: 5px; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-capacity-indicator .capacity-indicator-image { height: 14px; margin-right: 6px; } .clash-capacity-indicator .capacity-indicator { display: flex; align-items: center; } .clash-capacity-indicator .capacity-indicator.low { color: #00a741; } .clash-capacity-indicator .capacity-indicator.medium { color: #c89b3c; } .clash-capacity-indicator .capacity-indicator.high { color: #be1e37; } .clash-capacity-indicator .capacity-indicator.full { color: #5b5a56; } .clash-hub-content .content-container .heading { font-family: var(--font-display); } .clash-hub-content .content-container .heading { -webkit-user-select: none; } .clash-hub-content .content-container .heading { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-hub-content .content-container .heading { text-transform: uppercase; } .clash-hub-content .content-container .heading:lang(ko-kr), .clash-hub-content .content-container .heading:lang(ja-jp), .clash-hub-content .content-container .heading:lang(tr-tr), .clash-hub-content .content-container .heading:lang(el-gr), .clash-hub-content .content-container .heading:lang(th-th), .clash-hub-content .content-container .heading:lang(zh-tw) { text-transform: none; } .clash-hub-content .content-container .heading { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-hub-content .content-container .heading:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-hub-content .tabs { margin-bottom: 5px; } .clash-hub-content .content-container { height: 390px; } .clash-hub-content .content-container .heading { text-align: left ; width: 100%; margin: 10px 0 0 24px ; } .clash-hub-content .clash-schedule-modal { position: fixed; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-hub-content .clash-schedule-modal .clash-schedule-modal-container { padding: 40px 50px; } .clash-hub-content .clash-schedule-modal .clash-schedule-modal-x-button { position: absolute; right: 0 ; left: auto ; height: 16px; width: 16px; margin: 15px; } .clash-hub-content video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-schedule-view .heading, .clash-schedule-view .create-team .create-team-button-text, .clash-schedule-view .create-team .create-team-right .create-team-tournament-name, .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text { font-family: var(--font-display); } .clash-schedule-view .create-team .create-team-right .create-team-tournament-description { font-family: var(--font-body); } .clash-schedule-view .heading, .clash-schedule-view .create-team .create-team-button-text, .clash-schedule-view .create-team .create-team-right .create-team-tournament-name, .clash-schedule-view .create-team .create-team-right .create-team-tournament-description, .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text { -webkit-user-select: none; } .clash-schedule-view .heading, .clash-schedule-view .create-team .create-team-button-text, .clash-schedule-view .create-team .create-team-right .create-team-tournament-name, .clash-schedule-view .create-team .create-team-right .create-team-tournament-description, .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-schedule-view .heading, .clash-schedule-view .create-team .create-team-button-text, .clash-schedule-view .create-team .create-team-right .create-team-tournament-name, .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text { text-transform: uppercase; } .clash-schedule-view .heading:lang(ko-kr), .clash-schedule-view .create-team .create-team-button-text:lang(ko-kr), .clash-schedule-view .create-team .create-team-right .create-team-tournament-name:lang(ko-kr), .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text:lang(ko-kr), .clash-schedule-view .heading:lang(ja-jp), .clash-schedule-view .create-team .create-team-button-text:lang(ja-jp), .clash-schedule-view .create-team .create-team-right .create-team-tournament-name:lang(ja-jp), .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text:lang(ja-jp), .clash-schedule-view .heading:lang(tr-tr), .clash-schedule-view .create-team .create-team-button-text:lang(tr-tr), .clash-schedule-view .create-team .create-team-right .create-team-tournament-name:lang(tr-tr), .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text:lang(tr-tr), .clash-schedule-view .heading:lang(el-gr), .clash-schedule-view .create-team .create-team-button-text:lang(el-gr), .clash-schedule-view .create-team .create-team-right .create-team-tournament-name:lang(el-gr), .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text:lang(el-gr), .clash-schedule-view .heading:lang(th-th), .clash-schedule-view .create-team .create-team-button-text:lang(th-th), .clash-schedule-view .create-team .create-team-right .create-team-tournament-name:lang(th-th), .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text:lang(th-th), .clash-schedule-view .heading:lang(zh-tw), .clash-schedule-view .create-team .create-team-button-text:lang(zh-tw), .clash-schedule-view .create-team .create-team-right .create-team-tournament-name:lang(zh-tw), .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text:lang(zh-tw) { text-transform: none; } .clash-schedule-view .create-team .create-team-button-text, .clash-schedule-view .create-team .create-team-right .create-team-tournament-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-schedule-view .create-team .create-team-button-text:lang(ar-ae), .clash-schedule-view .create-team .create-team-right .create-team-tournament-name:lang(ar-ae) { letter-spacing: 0; } .clash-schedule-view .heading { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-schedule-view .heading:lang(ar-ae) { letter-spacing: 0; } .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text:lang(ja-jp) { font-size: 13px; } .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text:lang(ar-ae) { letter-spacing: 0; } .clash-schedule-view .create-team .create-team-right .create-team-tournament-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .clash-schedule-view .create-team .create-team-right .create-team-tournament-description:lang(ja-jp) { font-size: 13px; } .clash-schedule-view .create-team .create-team-right .create-team-tournament-description:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-schedule-view { height: 100%; } .clash-schedule-view .hub-content-scroll-container { -webkit-mask-image: -webkit-linear-gradient(top, #000 95%, rgba(0,0,0,0)); overflow-x: hidden; } .clash-schedule-view .heading { text-align: left; width: 100%; margin-left: 24px; margin-top: 10px; } .clash-schedule-view .create-team { position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; height: 100px; min-height: 100px; margin-bottom: 1px; cursor: pointer; } .clash-schedule-view .create-team #create-team-background-animation { right: auto ; margin-left: -40px; pointer-events: none; opacity: 1; transition: opacity 300ms linear; } .clash-schedule-view .create-team.call-in-progress #create-team-background-animation { opacity: 0; } .clash-schedule-view .create-team.call-in-progress { cursor: default; color: #785a28; } .clash-schedule-view .create-team .create-team-caret { width: 26px; height: 50px; margin-left: -1px; position: relative; } .clash-schedule-view .create-team .create-team-caret img { width: 100%; height: 100%; transform: none ; } .clash-schedule-view .create-team .create-team-left { display: flex; position: relative; flex-direction: row; justify-content: flex-start; align-items: center; flex-grow: 1; } .clash-schedule-view .create-team .create-team-left .plus-button { margin-left: 32px; margin-right: 30px; } .clash-schedule-view .create-team .create-team-left .plus-button img { width: 32px; height: 32px; } .clash-schedule-view .create-team .create-team-button-text { font-size: 18px; color: #c8aa6e; transition: color 300ms linear; } .clash-schedule-view .create-team.call-in-progress .create-team-button-text { color: #785a28; } .clash-schedule-view .create-team .create-team-right { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; } .clash-schedule-view .create-team .create-team-right .create-team-tournament-name { color: #cdbe91; font-size: 12px; font-weight: 400; text-align: center; line-height: 12px; max-height: 24px; word-wrap: normal; display: flex; flex-direction: row; justify-content: center; width: 100%; } .clash-schedule-view .create-team .create-team-right .create-team-tournament-description { text-align: center; margin-top: 6px; max-width: 300px; } .clash-schedule-view .create-team:not(.call-in-progress):hover .create-team-left .create-team-button-text { color: #f0e6d2; } .clash-schedule-view .create-team:not(.call-in-progress):hover .create-team-right .create-team-tournament-name { color: #f0e6d2; } .clash-schedule-view .clash-schedule-tab-no-tournaments { position: absolute; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; transform: translate(-50%, -50%); top: 50%; left: 50%; } .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-img { width: 204px; height: 192px; } .clash-schedule-view .clash-schedule-tab-no-tournaments .clash-schedule-tab-no-tournaments-text { text-transform: none; color: #5b5a56; font-size: 16px; } .clash-schedule-view video { position: absolute; top: 50%; left: 50% ; right: auto ; transform: translate(-50%, -50%) ; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-history-view { height: 100%; } .clash-history-view .roster-stats-list { display: flex; flex-direction: column; width: 100%; height: 100%; overflow-x: hidden; -webkit-mask-image: -webkit-linear-gradient(top, #000 95%, rgba(0,0,0,0)); } .clash-upcoming-tournament-entry .heading, .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name, .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date { font-family: var(--font-display); } .clash-upcoming-tournament-entry .heading, .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name, .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date { -webkit-user-select: none; } .clash-upcoming-tournament-entry .heading, .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name, .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-upcoming-tournament-entry .heading, .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name, .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date { text-transform: uppercase; } .clash-upcoming-tournament-entry .heading:lang(ko-kr), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name:lang(ko-kr), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date:lang(ko-kr), .clash-upcoming-tournament-entry .heading:lang(ja-jp), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name:lang(ja-jp), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date:lang(ja-jp), .clash-upcoming-tournament-entry .heading:lang(tr-tr), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name:lang(tr-tr), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date:lang(tr-tr), .clash-upcoming-tournament-entry .heading:lang(el-gr), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name:lang(el-gr), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date:lang(el-gr), .clash-upcoming-tournament-entry .heading:lang(th-th), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name:lang(th-th), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date:lang(th-th), .clash-upcoming-tournament-entry .heading:lang(zh-tw), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name:lang(zh-tw), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date:lang(zh-tw) { text-transform: none; } .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name:lang(ar-ae) { letter-spacing: 0; } .clash-upcoming-tournament-entry .heading, .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-upcoming-tournament-entry .heading:lang(ar-ae), .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date:lang(ar-ae) { letter-spacing: 0; } .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name, .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-upcoming-tournament-entry .heading { text-align: left; width: 100%; margin-left: 24px; margin-top: 10px; } .clash-upcoming-tournament-entry .upcoming-tournament-entry { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; min-height: 80px; margin-bottom: 1px; } .clash-upcoming-tournament-entry .upcoming-tournament-entry:hover { background-color: rgba(255,255,255,0.03); } .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-icon { margin: 15px 20px 20px 26px; } .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-icon img { width: 48px; height: 48px; } .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-name { font-size: 18px; line-height: 18px; max-height: 36px; max-width: 280px; } .clash-upcoming-tournament-entry .upcoming-tournament-entry .upcoming-tournament-details-container .tournament-date { color: #5b5a56; line-height: 18px; max-height: 36px; max-width: 320px; } .clash-upcoming-tournament-entry .upcoming-tournament-entry .view-schedule-button-container { height: 32px; margin-left: auto; margin-right: 50px; } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name, .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date, .clash-schedule-graph .clash-schedule-graph-title { font-family: var(--font-display); } .clash-schedule-graph .clash-schedule-graph-disclaimer { font-family: var(--font-body); } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name, .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date, .clash-schedule-graph .clash-schedule-graph-title, .clash-schedule-graph .clash-schedule-graph-disclaimer { -webkit-user-select: none; } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name, .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date, .clash-schedule-graph .clash-schedule-graph-title, .clash-schedule-graph .clash-schedule-graph-disclaimer { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name, .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date, .clash-schedule-graph .clash-schedule-graph-title { text-transform: uppercase; } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name:lang(ko-kr), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date:lang(ko-kr), .clash-schedule-graph .clash-schedule-graph-title:lang(ko-kr), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name:lang(ja-jp), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date:lang(ja-jp), .clash-schedule-graph .clash-schedule-graph-title:lang(ja-jp), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name:lang(tr-tr), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date:lang(tr-tr), .clash-schedule-graph .clash-schedule-graph-title:lang(tr-tr), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name:lang(el-gr), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date:lang(el-gr), .clash-schedule-graph .clash-schedule-graph-title:lang(el-gr), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name:lang(th-th), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date:lang(th-th), .clash-schedule-graph .clash-schedule-graph-title:lang(th-th), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name:lang(zh-tw), .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date:lang(zh-tw), .clash-schedule-graph .clash-schedule-graph-title:lang(zh-tw) { text-transform: none; } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name:lang(ar-ae) { letter-spacing: 0; } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date, .clash-schedule-graph .clash-schedule-graph-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date:lang(ar-ae), .clash-schedule-graph .clash-schedule-graph-title:lang(ar-ae) { letter-spacing: 0; } .clash-schedule-graph .clash-schedule-graph-disclaimer { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-schedule-graph .clash-schedule-graph-disclaimer:lang(ja-jp) { font-size: 13px; } .clash-schedule-graph .clash-schedule-graph-disclaimer:lang(ar-ae) { letter-spacing: 0; } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-name, .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-schedule-graph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .clash-schedule-graph .clash-schedule-tournament-name-container { margin-bottom: 30px; text-align: center; } .clash-schedule-graph .clash-schedule-tournament-name-container .clash-schedule-tournament-date { color: #5b5a56; } .clash-schedule-graph .clash-schedule-graph-title { color: #f0e6d2; } .clash-schedule-graph .clash-lockin-time-graph rect { fill: #785a28; } .clash-schedule-graph .clash-lockin-time-graph .tier-1 { fill: #c89b3c; } .clash-schedule-graph .clash-lockin-time-graph .tier-2 { fill: #785a28; } .clash-schedule-graph .clash-lockin-time-graph .tier-3 { fill: #463714; } .clash-schedule-graph .clash-lockin-time-graph .tier-4 { fill: #6b5c4d; } .clash-schedule-graph .clash-lockin-time-graph text { fill: #fff; text-anchor: end ; } .clash-schedule-graph .clash-lockin-time-graph .label { font-weight: bold; } .clash-schedule-graph .clash-lockin-time-graph .axis path, .clash-schedule-graph .clash-lockin-time-graph .axis line { fill: none; stroke: #fff; shape-rendering: crispEdges; stroke-width: 0px; } .clash-awards-root { position: relative; height: 575px; width: 1029px; overflow: hidden; } .clash-awards-root .clash-awards-container { display: flex; flex-direction: row; margin-top: 3px; padding: 0; position: relative; height: 100%; width: 100%; } .clash-awards-root .clash-awards-container .clash-awards-control-panel { position: relative; width: 194px; height: 100%; margin-right: 35px; } .clash-awards-root .clash-awards-container .clash-awards-grid { position: relative; display: flex; width: 774px; height: 100%; justify-content: center; } .clash-awards-grid .no-owned-collectible .message-container .message, .clash-awards-grid .no-matching-collectibles .message, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title { font-family: var(--font-display); } .clash-awards-grid .no-owned-collectible .message-container .message, .clash-awards-grid .no-matching-collectibles .message, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title { -webkit-user-select: none; } .clash-awards-grid .no-owned-collectible .message-container .message, .clash-awards-grid .no-matching-collectibles .message, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-awards-grid .no-owned-collectible .message-container .message, .clash-awards-grid .no-matching-collectibles .message, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title { text-transform: uppercase; } .clash-awards-grid .no-owned-collectible .message-container .message:lang(ko-kr), .clash-awards-grid .no-matching-collectibles .message:lang(ko-kr), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(ko-kr), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(ko-kr), .clash-awards-grid .no-owned-collectible .message-container .message:lang(ja-jp), .clash-awards-grid .no-matching-collectibles .message:lang(ja-jp), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(ja-jp), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(ja-jp), .clash-awards-grid .no-owned-collectible .message-container .message:lang(tr-tr), .clash-awards-grid .no-matching-collectibles .message:lang(tr-tr), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(tr-tr), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(tr-tr), .clash-awards-grid .no-owned-collectible .message-container .message:lang(el-gr), .clash-awards-grid .no-matching-collectibles .message:lang(el-gr), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(el-gr), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(el-gr), .clash-awards-grid .no-owned-collectible .message-container .message:lang(th-th), .clash-awards-grid .no-matching-collectibles .message:lang(th-th), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(th-th), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(th-th), .clash-awards-grid .no-owned-collectible .message-container .message:lang(zh-tw), .clash-awards-grid .no-matching-collectibles .message:lang(zh-tw), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(zh-tw), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(zh-tw) { text-transform: none; } .clash-awards-grid .no-owned-collectible .message-container .message, .clash-awards-grid .no-matching-collectibles .message { text-transform: none; } .clash-awards-grid .no-owned-collectible .message-container .message, .clash-awards-grid .no-matching-collectibles .message, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-awards-grid .no-owned-collectible .message-container .message:lang(ar-ae), .clash-awards-grid .no-matching-collectibles .message:lang(ar-ae), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title:lang(ar-ae) { letter-spacing: 0; } .clash-awards-grid .no-owned-collectible .message-container .message, .clash-awards-grid .no-matching-collectibles .message { letter-spacing: 0.025em; } .clash-awards-grid .no-owned-collectible .message-container .message:lang(ar-ae), .clash-awards-grid .no-matching-collectibles .message:lang(ar-ae) { letter-spacing: 0; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-title:lang(ar-ae) { letter-spacing: 0; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle, .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count { font-size: 16px; font-weight: 700; font-style: italic; letter-spacing: 0.075em; -webkit-font-smoothing: subpixel-antialiased; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle:lang(ar-ae), .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count:lang(ar-ae) { letter-spacing: 0; } .clash-awards-grid { position: relative; width: 774px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .clash-awards-grid .no-owned-collectible { display: flex; flex-direction: column; align-items: center; } .clash-awards-grid .no-owned-collectible .illustration { max-width: 102px; } .clash-awards-grid .no-owned-collectible .message-container { display: flex; flex-direction: column; align-items: center; margin-top: 10px; margin-bottom: 10px; } .clash-awards-grid .no-owned-collectible.hidden { display: none; } .clash-awards-grid .no-matching-collectibles { display: flex; align-items: flex-start; justify-content: center; } .clash-awards-grid .no-matching-collectibles.hidden { display: none; } .clash-awards-grid .page-view-wrapper { height: 100%; } .clash-awards-grid .page-view-wrapper.hidden { display: none; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper { display: flex; position: relative; padding: 10px 0 0 17px ; overflow-y: auto; overflow-x: hidden; flex-direction: row; flex-wrap: wrap; flex-grow: 1; justify-content: flex-start; align-items: flex-start; height: 100%; will-change: auto; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper { display: flex; margin-bottom: 15px; flex-basis: 100%; align-items: flex-end; width: 750px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.hidden { opacity: 0; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-owned-count { padding: 0 ; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title { display: inline; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-subtitle { display: inline; margin: 0 0 0 25px ; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count { display: inline; margin: 0 0 0 25px ; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-count .group-total-count { margin: 0 0 0 10px ; font-size: 14px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title-inline-separator-wrapper { display: flex; flex-grow: 1; margin-left: 10px; margin-right: 10px; height: 18px; justify-content: center; align-items: center; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .group-title-inline-separator-wrapper .group-title-inline-separator { display: inline-block; border: solid #1b292a; border-width: 1px 0 0 0; width: 100%; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper .hidden { display: none; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-subtitle { font-size: 14px; margin-left: 12px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-title-wrapper.subtitle .group-count { font-size: 14px; margin-left: 12px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .group-separator { width: 750px; border: solid #1b292a; border-width: 1px 0 0 0; margin-bottom: 10px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-logo-row { display: flex; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-logo-row .clash-logo-wrapper { position: relative; width: 140px; height: 140px; margin: 0 8px 0 0; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-logo-row .clash-logo-wrapper.dimmed { opacity: 0.5; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-logo-row .clash-logo-wrapper .clash-logo-img { height: auto; width: 120px; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-logo-row .clash-logo-wrapper .clash-logo-border-wrapper { position: absolute; display: flex; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-logo-row .clash-logo-wrapper .clash-logo-border-wrapper .clash-logo-border { background-image: url("/fe/lol-clash/assets/images/awards-case/border-logo.svg"); height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row { display: flex; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row .clash-banner-wrapper { position: relative; width: 140px; height: 240px; margin: 0 8px 0 0; cursor: pointer; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row .clash-banner-wrapper .clash-banner-img { height: auto; width: 110px; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 20px; pointer-events: none; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row .clash-banner-wrapper .clash-banner-img.dimmed { opacity: 0.5; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row .clash-banner-wrapper .clash-banner-border-wrapper { position: absolute; display: flex; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; pointer-events: none; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row .clash-banner-wrapper .clash-banner-border-wrapper .clash-banner-border { position: absolute; background-image: url("/fe/lol-clash/assets/images/awards-case/border-large.png"); height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row .clash-banner-wrapper .clash-banner-border-wrapper .clash-banner-background { position: absolute; background-image: url("/fe/lol-clash/assets/images/awards-case/background-large.svg"); height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; top: 6px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row .clash-banner-wrapper .clash-banner-border-wrapper .clash-banner-border-lock { position: absolute; background-image: url("/fe/lol-clash/assets/images/awards-case/icon-lock-large.png"); height: 30px; width: 30px; background-size: contain; background-repeat: no-repeat; bottom: -16px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row .clash-banner-wrapper .clash-banner-border-wrapper .clash-banner-border-lock.hidden { display: none; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row .clash-banner-wrapper .clash-banner-border-wrapper.unowned { border: thin solid #3c3c41; height: 200px; top: 7px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-banner-row .clash-banner-wrapper .clash-banner-border-wrapper.unowned .clash-banner-border { background-image: none; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row { display: flex; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row .clash-trophy-wrapper { position: relative; width: 140px; height: 240px; margin: 0 8px 0 0; cursor: pointer; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row .clash-trophy-wrapper .clash-trophy-img { height: auto; width: 110px; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 50px; pointer-events: none; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row .clash-trophy-wrapper .clash-trophy-img.dimmed { opacity: 0.5; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row .clash-trophy-wrapper .clash-trophy-border-wrapper { position: absolute; display: flex; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; pointer-events: none; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row .clash-trophy-wrapper .clash-trophy-border-wrapper .clash-trophy-border { position: absolute; background-image: url("/fe/lol-clash/assets/images/awards-case/border-large.png"); height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row .clash-trophy-wrapper .clash-trophy-border-wrapper .clash-trophy-background { position: absolute; background-image: url("/fe/lol-clash/assets/images/awards-case/background-large.svg"); height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; top: 6px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row .clash-trophy-wrapper .clash-trophy-border-wrapper .clash-trophy-border-lock { position: absolute; background-image: url("/fe/lol-clash/assets/images/awards-case/icon-lock-large.png"); height: 30px; width: 30px; background-size: contain; background-repeat: no-repeat; bottom: -16px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row .clash-trophy-wrapper .clash-trophy-border-wrapper .clash-trophy-border-lock.hidden { display: none; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row .clash-trophy-wrapper .clash-trophy-border-wrapper.unowned { border: thin solid #3c3c41; height: 200px; top: 7px; } .clash-awards-grid .page-view-wrapper .collectibles-grid-wrapper .clash-trophy-row .clash-trophy-wrapper .clash-trophy-border-wrapper.unowned .clash-trophy-border { background-image: none; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned, .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label, .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned, .clash-awards-control-panel .clash-awards-feature-description { font-family: var(--font-display); } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-text-filter .clash-awards-collection-search-text, .clash-awards-control-panel .clash-awards-feature-description { font-family: var(--font-body); } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned, .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label, .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned, .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-text-filter .clash-awards-collection-search-text, .clash-awards-control-panel .clash-awards-feature-description { -webkit-user-select: none; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned, .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label, .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned, .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-text-filter .clash-awards-collection-search-text, .clash-awards-control-panel .clash-awards-feature-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned, .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label, .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned { text-transform: uppercase; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned:lang(ko-kr), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label:lang(ko-kr), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned:lang(ko-kr), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned:lang(ja-jp), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label:lang(ja-jp), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned:lang(ja-jp), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned:lang(tr-tr), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label:lang(tr-tr), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned:lang(tr-tr), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned:lang(el-gr), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label:lang(el-gr), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned:lang(el-gr), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned:lang(th-th), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label:lang(th-th), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned:lang(th-th), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned:lang(zh-tw), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label:lang(zh-tw), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned:lang(zh-tw) { text-transform: none; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned, .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned:lang(ar-ae), .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned:lang(ar-ae) { letter-spacing: 0; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label:lang(ja-jp) { font-size: 13px; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label:lang(ar-ae) { letter-spacing: 0; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label { color: #a09b8c; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-text-filter .clash-awards-collection-search-text, .clash-awards-control-panel .clash-awards-feature-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-text-filter .clash-awards-collection-search-text:lang(ja-jp), .clash-awards-control-panel .clash-awards-feature-description:lang(ja-jp) { font-size: 13px; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-text-filter .clash-awards-collection-search-text:lang(ar-ae), .clash-awards-control-panel .clash-awards-feature-description:lang(ar-ae) { letter-spacing: 0; } .clash-awards-control-panel .clash-awards-feature-description { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .clash-awards-control-panel .clash-awards-feature-description:lang(ar-ae) { letter-spacing: 0; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned, .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-total-owned { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .clash-awards-control-panel { width: 194px; margin-right: 35px; } .clash-awards-control-panel .separator { border-style: solid; border-top-width: 1px; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-color: #1b292a; margin-top: 5px; margin-bottom: 5px; width: 168px; margin-bottom: 0; } .clash-awards-control-panel .clash-awards-collection-details-wrapper { cursor: default; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-top-frame { background-image: url("/fe/lol-clash/assets/images/awards-case/frame.png"); background-repeat: no-repeat; background-size: contain; background-position-y: 1px; height: 120px; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper { position: absolute; display: flex; justify-content: center; top: 20px; width: 194px; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary { display: flex; flex-direction: column; align-items: center; } .clash-awards-control-panel .clash-awards-collection-details-wrapper .clash-awards-collection-owned-summary-wrapper .clash-awards-collection-owned-summary .clash-awards-collection-total-owned-label { text-transform: uppercase; margin-top: 5px; max-width: 110px; text-align: center; } .clash-awards-control-panel .clash-awards-collection-search-panel { margin-top: 18px; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-text-filter .clash-awards-collection-search-text { width: 100%; padding: 0 0 0 27px ; height: 30px; line-height: 30px; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-ownership-filter { margin-top: 12px; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-ownership-filter.invisible { display: none; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-availability-filter { margin-top: 12px; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-availability-filter.invisible { display: none; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-checkbox-label { margin-left: 12px; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-grouping-options { margin-top: 20px; } .clash-awards-control-panel .clash-awards-collection-search-panel .clash-awards-collection-sort-options { margin-top: 12px; } .clash-awards-control-panel .clash-awards-collection-search-panel lol-uikit-framed-dropdown { --framed-dropdown-scrollable-max-height: 200px; } .clash-awards-control-panel .clash-awards-feature-description { margin-top: 12px; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title { font-family: var(--font-display); } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-refresh-container { font-family: var(--font-body); } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title, .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-refresh-container { -webkit-user-select: none; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title, .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-refresh-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title { text-transform: uppercase; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title:lang(ko-kr), .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title:lang(ja-jp), .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title:lang(tr-tr), .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title:lang(el-gr), .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title:lang(th-th), .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title:lang(zh-tw) { text-transform: none; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title:lang(ar-ae) { letter-spacing: 0; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-refresh-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-refresh-container:lang(ja-jp) { font-size: 13px; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-refresh-container:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-find-team-view { display: flex; flex-direction: row ; width: 100%; height: 100%; } .clash-find-team-view .clash-find-team-section-left { width: 280px; height: 460px; } .clash-find-team-view .clash-find-team-section-middle { height: 460px; position: relative; flex-grow: 1; margin-left: 24px; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header { width: 100%; height: 40px; background-color: #1e2328; opacity: 0.8; color: #fff; display: flex; justify-content: space-between; align-items: center; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-title { margin-left: 20px; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-refresh-container { display: flex; align-items: center; margin-right: 20px; } .clash-find-team-view .clash-find-team-section-middle .clash-find-team-header .clash-find-team-refresh-container .clash-find-team-refresh-button { margin: 0 5px; height: 24px; width: 24px; } .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag, .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name, .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button { font-family: var(--font-display); } .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag, .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name, .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button { -webkit-user-select: none; } .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag, .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name, .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag, .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name, .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button { text-transform: uppercase; } .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag:lang(ko-kr), .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name:lang(ko-kr), .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button:lang(ko-kr), .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag:lang(ja-jp), .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name:lang(ja-jp), .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button:lang(ja-jp), .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag:lang(tr-tr), .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name:lang(tr-tr), .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button:lang(tr-tr), .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag:lang(el-gr), .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name:lang(el-gr), .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button:lang(el-gr), .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag:lang(th-th), .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name:lang(th-th), .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button:lang(th-th), .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag:lang(zh-tw), .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name:lang(zh-tw), .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button:lang(zh-tw) { text-transform: none; } .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag:lang(ar-ae) { letter-spacing: 0; } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name, .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-name:lang(ar-ae), .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-find-team-entry { display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #282d38; } .clash-find-team-entry .clash-find-team-logo-container { margin: 10px 18px 10px 0; } .clash-find-team-entry .clash-find-team-logo-container .clash-find-team-logo-image { height: 65px; width: 65px; } .clash-find-team-entry .clash-find-team-tag-tier-container { min-width: 80px; margin: 0 16px 10px 0; display: flex; flex-direction: column; } .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tag { color: #c8aa6e; margin-bottom: 3px; } .clash-find-team-entry .clash-find-team-tag-tier-container .clash-team-tier { display: inherit; } .clash-find-team-entry .clash-find-team-data-container { margin: 10px; flex-grow: 1; height: 58px; } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description { display: flex; margin-top: 14px; } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-needs { display: flex; } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-needs .position-icon { height: 20px; width: 20px; margin-right: 4px; background-size: cover; } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-needs .position-icon[data-position="BOTTOM"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-bottom.png"); } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-needs .position-icon[data-position="TOP"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-top.png"); } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-needs .position-icon[data-position="JUNGLE"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-jungle.png"); } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-needs .position-icon[data-position="MIDDLE"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-middle.png"); } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-needs .position-icon[data-position="UTILITY"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-utility.png"); } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-needs .position-icon[data-position="FILL"] { background-image: url("/fe/lol-clash/assets/images/position-selector/positions/icon-position-fill.png"); } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-vertical-separator { width: 1px; background: #785a28; margin: 1px 10px; height: 18px; } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-members { display: flex; } .clash-find-team-entry .clash-find-team-data-container .clash-find-team-description .clash-find-team-members .clash-find-team-member { height: 24px; width: 24px; margin-right: 6px; } .clash-find-team-entry .clash-find-team-request-button-container .clash-find-team-request-button { color: #cdbe91; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-member-summoner { position: relative; height: 100%; width: 100%; } .clash-member-summoner .clash-member-summoner-img { height: 100%; width: 100%; } .clash-member-summoner .summoner-friend-icon { position: absolute; height: 12px; width: 12px; right: -2px; bottom: 0; background-image: url("/fe/lol-clash/assets/images/find-team/friend-icon.png"); background-size: contain; background-repeat: no-repeat; } .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input, .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input { font-family: var(--font-display); } .clash-roster-details-selector .clash-roster-details-name-tag-error { font-family: var(--font-body); } .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input, .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input, .clash-roster-details-selector .clash-roster-details-name-tag-error { -webkit-user-select: none; } .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input, .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input, .clash-roster-details-selector .clash-roster-details-name-tag-error { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input, .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input { text-transform: uppercase; } .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input:lang(ko-kr), .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input:lang(ko-kr), .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input:lang(ja-jp), .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input:lang(ja-jp), .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input:lang(tr-tr), .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input:lang(tr-tr), .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input:lang(el-gr), .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input:lang(el-gr), .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input:lang(th-th), .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input:lang(th-th), .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input:lang(zh-tw), .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input:lang(zh-tw) { text-transform: none; } .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input, .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input:lang(ar-ae), .clash-roster-details-selector .clash-roster-details-name-input lol-uikit-flat-input input:lang(ar-ae) { letter-spacing: 0; } .clash-roster-details-selector .clash-roster-details-name-tag-error { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-roster-details-selector .clash-roster-details-name-tag-error:lang(ja-jp) { font-size: 13px; } .clash-roster-details-selector .clash-roster-details-name-tag-error:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-roster-details-selector-root { width: 600px; height: 450px; } .clash-roster-details-selector .clash-roster-details-selector-dialog { width: 100%; height: 100%; display: flex; flex-direction: column; cursor: default; } .clash-roster-details-selector .clash-roster-details-selector-header { height: 40px; padding: 0 13px 0 15px; display: flex; align-items: center; border-bottom: 1px #785a28 solid; } .clash-roster-details-selector .clash-roster-details-selector-x-button { width: 13px; height: 13px; margin: -1px 0 0 auto ; } .clash-roster-details-selector .clash-roster-details-name-tag-section { height: 60px; padding: 14px 18px 0; display: flex; flex-direction: column; border-bottom: 1px #785a28 solid; } .clash-roster-details-selector .clash-roster-details-name-tag-section-row { display: flex; } .clash-roster-details-selector .clash-roster-details-tag-input { height: 32px; width: 99px; } .clash-roster-details-selector .clash-roster-details-tag-input lol-uikit-flat-input input { color: #c8aa6e; text-align: center; } .clash-roster-details-selector .clash-roster-details-name-input { height: 32px; margin-left: 11px; flex: 1; } .clash-roster-details-selector .clash-roster-details-name-tag-error { margin-top: 6px; } .clash-roster-details-selector .clash-roster-details-selector-icon-section { height: 295px; display: flex; border-bottom: 1px #785a28 solid; } .clash-roster-details-selector .clash-roster-details-selector-icon-container { flex: 2; display: flex; border-right: 1px #785a28 solid; overflow: hidden; } .clash-roster-details-selector .clash-roster-details-selector-icon-container:lang(ar-ae) { border-right: none; border-left: 1px #785a28 solid; } .clash-roster-details-selector .clash-roster-details-selector-icon-list { padding: 7px 0 0 13px; display: flex; flex-wrap: wrap; } .clash-roster-details-selector .clash-roster-details-selector-icon-button { position: relative; width: 60px; height: 60px; margin-right: 15px; margin-bottom: 15px; } .clash-roster-details-selector .clash-roster-details-selector-icon-button:nth-child(5) { margin-right: 0; } .clash-roster-details-selector .clash-roster-details-selector-icon-button.is-icon-unavailable .clash-generic-button-root .clash-generic-button-state img { -webkit-filter: saturate(0%); opacity: 0.7; } .clash-roster-details-selector .clash-roster-details-selector-icon-button.is-icon-unavailable .clash-generic-button-root .clash-generic-button-state.over img, .clash-roster-details-selector .clash-roster-details-selector-icon-button.is-icon-unavailable .clash-generic-button-root .clash-generic-button-state.down img { opacity: 1; } .clash-roster-details-selector .clash-roster-details-selector-icon-button .clash-generic-button-root .clash-generic-button-state { border: 2px solid transparent; } .clash-roster-details-selector .clash-roster-details-selector-icon-button .clash-generic-button-root .clash-generic-button-state img { width: 58px; height: 58px; padding: 1px; } .clash-roster-details-selector .clash-roster-details-selector-icon-button .clash-generic-button-root .clash-generic-button-state.over { background: rgba(255,255,255,0.1); } .clash-roster-details-selector .clash-roster-details-selector-icon-button .clash-generic-button-root .clash-generic-button-state.down, .clash-roster-details-selector .clash-roster-details-selector-icon-button .clash-generic-button-root .clash-generic-button-state.up.selected, .clash-roster-details-selector .clash-roster-details-selector-icon-button .clash-generic-button-root .clash-generic-button-state.over.selected { border: 2px solid transparent; border-image: linear-gradient(to top, #c8aa6e 0%, #c89b3c 44%, #a07b32 59%, #785a28 100%); border-image-slice: 1; padding: 0; background: rgba(255,255,255,0.1); } .clash-roster-details-selector .clash-roster-details-selector-icon-unavailable { position: absolute; left: 24px; bottom: -2px; width: 15px; pointer-events: none; } .clash-roster-details-selector .clash-roster-details-selector-new-logo-pip { position: absolute; top: 3px; right: 0; height: 10px; width: 10px; background: #c89b3c; border-radius: 6px; } .clash-roster-details-selector .clash-roster-details-selector-chroma-container { flex: 1.05; display: flex; flex-direction: column; justify-content: space-around; align-items: center; overflow: hidden; } .clash-roster-details-selector .clash-roster-details-selector-title { text-align: center; margin: 0 10px; } .clash-roster-details-selector .clash-roster-details-selector-full-logo { height: 170px; position: relative; } .clash-roster-details-selector .clash-roster-details-selector-full-logo-img { height: 100%; } .clash-roster-details-selector .clash-roster-details-selector-invalid-logo { position: absolute; top: 0; right: 0; height: 35px; } .clash-roster-details-selector .clash-roster-details-selector-invalid-logo-icon { height: 100%; } .clash-roster-details-selector .clash-roster-details-selector-chroma-list { display: flex; } .clash-roster-details-selector .clash-roster-details-selector-chroma-unavailable { position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; width: 9px; pointer-events: none; } .clash-roster-details-selector .clash-roster-details-selector-chroma-button { position: relative; height: 20px; width: 20px; margin: 2px 7px; } .clash-roster-details-selector .clash-roster-details-selector-chroma-button .clash-generic-button-root .clash-generic-button-state img { width: 14px; height: 14px; padding: 3px; } .clash-roster-details-selector .clash-roster-details-selector-chroma-button .clash-generic-button-root .clash-generic-button-state.over:after { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; background: url("/fe/lol-clash/assets/images/roster-logos/chroma-selector.png") no-repeat; background-size: cover; } .clash-roster-details-selector .clash-roster-details-selector-chroma-button .clash-generic-button-root .clash-generic-button-state.down:after { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; background: url("/fe/lol-clash/assets/images/roster-logos/chroma-selector.png") no-repeat; background-size: cover; } .clash-roster-details-selector .clash-roster-details-selector-chroma-button .clash-generic-button-root .clash-generic-button-state.up.selected:after { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; background: url("/fe/lol-clash/assets/images/roster-logos/chroma-selector.png") no-repeat; background-size: cover; } .clash-roster-details-selector .clash-roster-details-selector-chroma-button .clash-generic-button-root .clash-generic-button-state.over.selected:after { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; background: url("/fe/lol-clash/assets/images/roster-logos/chroma-selector.png") no-repeat; background-size: cover; } .clash-roster-details-selector .clash-roster-details-selector-color-new-pip { position: absolute; top: -2px; right: -2px; height: 7px; width: 7px; background: #c89b3c; border-radius: 4px; } .clash-async-text-field .display { font-family: var(--font-display); } .clash-async-text-field .display { -webkit-user-select: none; } .clash-async-text-field .display { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-async-text-field .display, .clash-async-text-field .edit-input input { text-transform: uppercase; } .clash-async-text-field .display:lang(ko-kr), .clash-async-text-field .edit-input input:lang(ko-kr), .clash-async-text-field .display:lang(ja-jp), .clash-async-text-field .edit-input input:lang(ja-jp), .clash-async-text-field .display:lang(tr-tr), .clash-async-text-field .edit-input input:lang(tr-tr), .clash-async-text-field .display:lang(el-gr), .clash-async-text-field .edit-input input:lang(el-gr), .clash-async-text-field .display:lang(th-th), .clash-async-text-field .edit-input input:lang(th-th), .clash-async-text-field .display:lang(zh-tw), .clash-async-text-field .edit-input input:lang(zh-tw) { text-transform: none; } .clash-async-text-field .display { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-async-text-field .display:lang(ar-ae) { letter-spacing: 0; } .clash-async-text-field .display { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-async-text-field { position: relative; width: 100%; height: 100%; } .clash-async-text-field .begin-edit-btn-container { position: absolute; height: 100%; width: 100%; opacity: 0; } .clash-async-text-field .begin-edit-btn-container:hover { opacity: 1; } .clash-async-text-field .begin-edit-btn { position: absolute; height: 26px; width: 26px; margin: auto; left: 0; right: 0; bottom: 0; } .clash-async-text-field .edit-input { position: relative; margin: 0 auto; width: 100%; height: 100%; } .clash-async-text-field .edit-input lol-uikit-flat-input, .clash-async-text-field .edit-input lol-uikit-flat-input input { width: 100%; height: 100%; } .clash-async-text-field .edit-input .validation-indicator { display: none; position: absolute; height: 100%; top: 0; right: -30px; } .clash-async-text-field .edit-input .validation-indicator img { height: 60%; margin-top: 25%; } .clash-async-text-field .edit-input.has-txt.valid .validation-indicator { display: block; } .clash-async-text-field .edit-input.has-txt.invalid input { border-color: #781e31; } .clash-async-text-field .edit-input.has-txt.invalid input:focus { border-image: linear-gradient(to bottom, #781e31, #b32d49) 1 stretch; } .clash-async-text-field .edit-input.has-txt.invalid .validation-indicator { display: block; } .clash-async-text-field .edit-input .clash-button-tutorial-animation { --border-width: 1px; } .clash-async-text-field .loading-spinner { position: absolute; top: 10px; right: 10px; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-select-description-text, .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-selection-container .clash-ticket-selection-title { font-family: var(--font-body); } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-select-description-text, .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-selection-container .clash-ticket-selection-title { -webkit-user-select: none; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-select-description-text, .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-selection-container .clash-ticket-selection-title { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-selection-container .clash-ticket-selection-title { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-selection-container .clash-ticket-selection-title:lang(ar-ae) { letter-spacing: 0; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-select-description-text { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-select-description-text:lang(ja-jp) { font-size: 13px; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-select-description-text:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-ticket-select-modal .clash-ticket-select-dialog { width: 420px; padding-top: 22px; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-select-title-text { pointer-events: none; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-select-description-text { width: 300px; margin: 16px auto 0; pointer-events: none; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-selection-container { width: 300px; height: 190px; margin: 20px auto 0; background-image: url("/fe/lol-clash/assets/images/ticket-selector/tick-marks.png"); background-size: cover; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-selection-container .clash-ticket-selection-title { color: #f0e6d2; pointer-events: none; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-selection-container .clash-ticket-selection-contents { position: relative; display: flex; justify-content: center; margin-top: 15px; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-selection-container .clash-ticket-selection-contents::after { content: ""; height: 100%; width: 2px; background-image: url("/fe/lol-clash/assets/images/ticket-selector/ticket-modal-vertical-separator.png"); background-size: contain; position: absolute; left: 0; right: 0; margin: auto; } .clash-ticket-select-modal .clash-ticket-select-dialog .clash-ticket-selection-container .clash-ticket-selection-contents .clash-ticket-element { height: 134px; width: 134px; } .clash-ticket-select-modal-element .clash-ticket-title { font-family: var(--font-display); } .clash-ticket-select-modal-element .clash-ticket-bottom-container { font-family: var(--font-body); } .clash-ticket-select-modal-element .clash-ticket-title, .clash-ticket-select-modal-element .clash-ticket-bottom-container { -webkit-user-select: none; } .clash-ticket-select-modal-element .clash-ticket-title, .clash-ticket-select-modal-element .clash-ticket-bottom-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-ticket-select-modal-element .clash-ticket-title { text-transform: uppercase; } .clash-ticket-select-modal-element .clash-ticket-title:lang(ko-kr), .clash-ticket-select-modal-element .clash-ticket-title:lang(ja-jp), .clash-ticket-select-modal-element .clash-ticket-title:lang(tr-tr), .clash-ticket-select-modal-element .clash-ticket-title:lang(el-gr), .clash-ticket-select-modal-element .clash-ticket-title:lang(th-th), .clash-ticket-select-modal-element .clash-ticket-title:lang(zh-tw) { text-transform: none; } .clash-ticket-select-modal-element .clash-ticket-title { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-ticket-select-modal-element .clash-ticket-title:lang(ja-jp) { font-size: 13px; } .clash-ticket-select-modal-element .clash-ticket-title:lang(ar-ae) { letter-spacing: 0; } .clash-ticket-select-modal-element .clash-ticket-bottom-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-ticket-select-modal-element .clash-ticket-bottom-container:lang(ja-jp) { font-size: 13px; } .clash-ticket-select-modal-element .clash-ticket-bottom-container:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-ticket-select-modal-element { position: relative; height: 100%; width: 100%; } .clash-ticket-select-modal-element .clash-ticket-container { height: 100%; width: 100%; text-align: center; } .clash-ticket-select-modal-element .clash-ticket-title { position: absolute; white-space: nowrap; margin: auto; left: 0; right: 0; color: #f0e6d2; } .clash-ticket-select-modal-element .clash-ticket-title.selected { color: #f0e6d2; } .clash-ticket-select-modal-element .clash-ticket-bottom-container { position: absolute; width: 100%; text-align: center; margin-top: -8px; pointer-events: none; } .clash-ticket-select-modal-element .clash-ticket-bottom-container .clash-ticket-bottom-image { height: 10px; width: 12px; margin: auto; } .clash-selector-palette .option-container .option { font-family: var(--font-body); } .clash-selector-palette .option-container .option { -webkit-user-select: none; } .clash-selector-palette .option-container .option { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-selector-palette .option-container .option { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-selector-palette .option-container .option:lang(ja-jp) { font-size: 13px; } .clash-selector-palette .option-container .option:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-selector-palette { position: absolute; width: 170px; z-index: 9001; } .clash-selector-palette .caret { width: 26px; position: relative; margin-bottom: -6px; } .clash-selector-palette .option-container { background-color: #010a13; border: 2px solid; border-image: linear-gradient(to bottom, #463714, #785a28) 2 stretch; } .clash-selector-palette .option-container .option { color: #cdbe91; height: 40px; display: flex; align-items: center; padding: 0 12px; cursor: pointer; } .clash-selector-palette .option-container .option.no-padding { padding: 0; } .clash-selector-palette .option-container .option.enabled:hover { background-color: #1e2328; color: #f0e6d2; } .clash-selector-palette .option-container .option:not(.enabled) { color: #5b5a56; cursor: default; } .util-tournament-scouting-member-name, .tournament-scouting .tournament-scouting-debug { font-family: var(--font-display); } .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip { font-family: var(--font-body); } .util-tournament-scouting-member-name, .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting .tournament-scouting-debug { -webkit-user-select: none; } .util-tournament-scouting-member-name, .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting .tournament-scouting-debug { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .util-tournament-scouting-member-name, .tournament-scouting .tournament-scouting-debug { text-transform: uppercase; } .util-tournament-scouting-member-name:lang(ko-kr), .tournament-scouting .tournament-scouting-debug:lang(ko-kr), .util-tournament-scouting-member-name:lang(ja-jp), .tournament-scouting .tournament-scouting-debug:lang(ja-jp), .util-tournament-scouting-member-name:lang(tr-tr), .tournament-scouting .tournament-scouting-debug:lang(tr-tr), .util-tournament-scouting-member-name:lang(el-gr), .tournament-scouting .tournament-scouting-debug:lang(el-gr), .util-tournament-scouting-member-name:lang(th-th), .tournament-scouting .tournament-scouting-debug:lang(th-th), .util-tournament-scouting-member-name:lang(zh-tw), .tournament-scouting .tournament-scouting-debug:lang(zh-tw) { text-transform: none; } .util-tournament-scouting-member-name { text-transform: none; } .util-tournament-scouting-member-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .util-tournament-scouting-member-name:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-member-name { letter-spacing: 0.0375em; } .util-tournament-scouting-member-name:lang(ar-ae) { letter-spacing: 0; } .tournament-scouting .tournament-scouting-debug { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .tournament-scouting .tournament-scouting-debug:lang(ja-jp) { font-size: 13px; } .tournament-scouting .tournament-scouting-debug:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .util-tournament-scouting-subitem-primary:lang(ja-jp), .util-tournament-scouting-subitem-secondary:lang(ja-jp), .util-tournament-scouting-subitem-tertiary:lang(ja-jp), .util-tournament-scouting-subitem-filler:lang(ja-jp), .util-tournament-scouting-subitem-tooltip:lang(ja-jp) { font-size: 13px; } .util-tournament-scouting-subitem-primary:lang(ar-ae), .util-tournament-scouting-subitem-secondary:lang(ar-ae), .util-tournament-scouting-subitem-tertiary:lang(ar-ae), .util-tournament-scouting-subitem-filler:lang(ar-ae), .util-tournament-scouting-subitem-tooltip:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-member { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: center; min-width: 200px; } .util-tournament-scouting-member-summary { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch; width: 100%; min-height: 130px; } .util-tournament-scouting-member-name { color: #f0e6d2; align-self: center; } .util-tournament-scouting-member-summary-separator { width: 120px; height: 7px; background-repeat: no-repeat; align-self: center; background-image: url(/fe/lol-clash/summarySeparator.png); margin-top: 10px; } .util-tournament-scouting-subitems { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; height: 310px; } .util-tournament-scouting-subitem { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; margin-top: 15px; } .util-tournament-scouting-subitem-champion-icon-container { background: url(/fe/lol-clash/playerobject_m_sprite.png) no-repeat top; background-size: cover; width: 46px; height: 46px; margin: 0 10px 0 50px ; } .util-tournament-scouting-subitem-champion-icon { border-radius: 0; -webkit-clip-path: circle(50px at center); transform: scale(0.42); position: relative; top: -37px; left: -37px ; right: auto ; } .util-tournament-scouting-subitem-filler-icon-container { width: 46px; height: 46px; margin: 0 15px 0 46px ; } .util-tournament-scouting-subitem-filler-icon { background-repeat: no-repeat; align-self: center; background-image: url(/fe/lol-clash/fillerIcon.png); background-size: contain; background-position-y: -4px; width: 55px; height: 55px; } .util-tournament-scouting-subitem-data { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start; } .util-tournament-scouting-subitem-primary { color: #cdbe91; } .util-tournament-scouting-subitem-secondary { color: #a98d58; } .util-tournament-scouting-subitem-tertiary { color: #888; } .util-tournament-scouting-subitem-filler { color: #785a28; } .util-tournament-scouting-subitem-tooltip-group { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; } .tournament-scouting { direction: ltr; position: relative; width: 100%; height: 639px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; background-image: url("/fe/lol-clash/assets/images/background/background-default.jpg"); background-size: cover; /* * HEADER */ /* * ALL MEMBERS */ /* * LOADING SPINNER */ /* * DEBUG */ } .tournament-scouting .tournament-scouting-header { width: 100% ; height: 100px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; margin: 20px 0 40px 30px ; } .tournament-scouting .tournament-scouting-nav-container { align-self: center; min-width: 350px; margin-right: 34px ; } .tournament-scouting .tournament-scouting-members { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; height: 440px; margin: 0 0 0 20px ; } .tournament-scouting .tournament-scouting-members-separator { width: 2px; height: 435px; background-color: #463714; -webkit-animation: fadein 1s; } .tournament-scouting .loading-spinner { visibility: hidden; opacity: 0; position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; background: transparent url(/fe/lol-clash/spinner.png) no-repeat 50% 50%; background-size: contain; animation: profile-fadein 250ms forwards, profile-spin 4000ms infinite linear; margin-left: -30px; } .tournament-scouting .tournament-scouting-debug { color: #888; align-self: flex-end; margin-top: 30px; margin-right: 30px; user-select: initial; } @-moz-keyframes profile-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes profile-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes profile-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes profile-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes profile-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @-webkit-keyframes profile-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @-o-keyframes profile-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @keyframes profile-fadein { 0% { visibility: visible; opacity: 0; } 100% { visibility: visible; opacity: 1; } } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root { font-family: var(--font-display); } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root { -webkit-user-select: none; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root { text-transform: uppercase; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root:lang(ko-kr), .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root:lang(ja-jp), .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root:lang(tr-tr), .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root:lang(el-gr), .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root:lang(th-th), .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root:lang(zh-tw) { text-transform: none; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root:lang(ja-jp) { font-size: 13px; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .tournament-scouting-nav { height: 100%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; } .tournament-scouting-nav .tournament-scouting-nav-button { height: 35px; flex-grow: 1; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root { color: #c8aa6e; position: relative; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root .disabled { color: #a09b8c; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root .clash-generic-button-state { text-align: center; line-height: 35px; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root .clash-generic-button-state.over, .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root .clash-generic-button-state.selected { color: #f0e6d2; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root .clash-generic-button-state.down { color: #785a28; } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root .clash-generic-button-state:not(.selected)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background-color: rgba(200,200,200,0.5); } .tournament-scouting-nav .tournament-scouting-nav-button .clash-generic-button-root .clash-generic-button-state.selected::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background-color: #785a28; } .util-tournament-scouting-member-name { font-family: var(--font-display); } .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip { font-family: var(--font-body); } .util-tournament-scouting-member-name, .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip { -webkit-user-select: none; } .util-tournament-scouting-member-name, .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .util-tournament-scouting-member-name { text-transform: uppercase; } .util-tournament-scouting-member-name:lang(ko-kr), .util-tournament-scouting-member-name:lang(ja-jp), .util-tournament-scouting-member-name:lang(tr-tr), .util-tournament-scouting-member-name:lang(el-gr), .util-tournament-scouting-member-name:lang(th-th), .util-tournament-scouting-member-name:lang(zh-tw) { text-transform: none; } .util-tournament-scouting-member-name { text-transform: none; } .util-tournament-scouting-member-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .util-tournament-scouting-member-name:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-member-name { letter-spacing: 0.0375em; } .util-tournament-scouting-member-name:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .util-tournament-scouting-subitem-primary:lang(ja-jp), .util-tournament-scouting-subitem-secondary:lang(ja-jp), .util-tournament-scouting-subitem-tertiary:lang(ja-jp), .util-tournament-scouting-subitem-filler:lang(ja-jp), .util-tournament-scouting-subitem-tooltip:lang(ja-jp) { font-size: 13px; } .util-tournament-scouting-subitem-primary:lang(ar-ae), .util-tournament-scouting-subitem-secondary:lang(ar-ae), .util-tournament-scouting-subitem-tertiary:lang(ar-ae), .util-tournament-scouting-subitem-filler:lang(ar-ae), .util-tournament-scouting-subitem-tooltip:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-member { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: center; min-width: 200px; } .util-tournament-scouting-member-summary { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch; width: 100%; min-height: 130px; } .util-tournament-scouting-member-name { color: #f0e6d2; align-self: center; } .util-tournament-scouting-member-summary-separator { width: 120px; height: 7px; background-repeat: no-repeat; align-self: center; background-image: url(/fe/lol-clash/summarySeparator.png); margin-top: 10px; } .util-tournament-scouting-subitems { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; height: 310px; } .util-tournament-scouting-subitem { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; margin-top: 15px; } .util-tournament-scouting-subitem-champion-icon-container { background: url(/fe/lol-clash/playerobject_m_sprite.png) no-repeat top; background-size: cover; width: 46px; height: 46px; margin: 0 10px 0 50px ; } .util-tournament-scouting-subitem-champion-icon { border-radius: 0; -webkit-clip-path: circle(50px at center); transform: scale(0.42); position: relative; top: -37px; left: -37px ; right: auto ; } .util-tournament-scouting-subitem-filler-icon-container { width: 46px; height: 46px; margin: 0 15px 0 46px ; } .util-tournament-scouting-subitem-filler-icon { background-repeat: no-repeat; align-self: center; background-image: url(/fe/lol-clash/fillerIcon.png); background-size: contain; background-position-y: -4px; width: 55px; height: 55px; } .util-tournament-scouting-subitem-data { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start; } .util-tournament-scouting-subitem-primary { color: #cdbe91; } .util-tournament-scouting-subitem-secondary { color: #a98d58; } .util-tournament-scouting-subitem-tertiary { color: #888; } .util-tournament-scouting-subitem-filler { color: #785a28; } .util-tournament-scouting-subitem-tooltip-group { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; } .tournament-scouting-member-ranked-rank { font-family: var(--font-display); } .tournament-scouting-member-ranked-rank { -webkit-user-select: none; } .tournament-scouting-member-ranked-rank { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .tournament-scouting-member-ranked-rank { text-transform: uppercase; } .tournament-scouting-member-ranked-rank:lang(ko-kr), .tournament-scouting-member-ranked-rank:lang(ja-jp), .tournament-scouting-member-ranked-rank:lang(tr-tr), .tournament-scouting-member-ranked-rank:lang(el-gr), .tournament-scouting-member-ranked-rank:lang(th-th), .tournament-scouting-member-ranked-rank:lang(zh-tw) { text-transform: none; } .tournament-scouting-member-ranked-rank { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .tournament-scouting-member-ranked-rank:lang(ja-jp) { font-size: 13px; } .tournament-scouting-member-ranked-rank:lang(ar-ae) { letter-spacing: 0; } .tournament-scouting-member-ranked-group { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; } .tournament-scouting-member-ranked-rank { color: #c89b3c; align-self: center; height: 20px; margin-top: 1px; } .regalia-crest-container { width: 40px; height: 40px; position: relative; margin-top: 15px; margin-bottom: 15px; } .regalia-crest-container.rank-override { width: 75px; height: 75px; margin-top: 0px; margin-bottom: 0px; } .regalia-crest-sizer { width: 100%; height: 100%; position: absolute; } .util-tournament-scouting-member-name { font-family: var(--font-display); } .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-top-champion-stat-wins-percentage, .tournament-scouting-top-champion-stat-games-played, .tournament-scouting-top-champion-stat-kda, .tournament-scouting-top-champion-stat-kda-average, .tournament-scouting-top-champion-stat-kda-text { font-family: var(--font-body); } .util-tournament-scouting-member-name, .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-top-champion-stat-wins-percentage, .tournament-scouting-top-champion-stat-games-played, .tournament-scouting-top-champion-stat-kda, .tournament-scouting-top-champion-stat-kda-average, .tournament-scouting-top-champion-stat-kda-text { -webkit-user-select: none; } .util-tournament-scouting-member-name, .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-top-champion-stat-wins-percentage, .tournament-scouting-top-champion-stat-games-played, .tournament-scouting-top-champion-stat-kda, .tournament-scouting-top-champion-stat-kda-average, .tournament-scouting-top-champion-stat-kda-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .util-tournament-scouting-member-name { text-transform: uppercase; } .util-tournament-scouting-member-name:lang(ko-kr), .util-tournament-scouting-member-name:lang(ja-jp), .util-tournament-scouting-member-name:lang(tr-tr), .util-tournament-scouting-member-name:lang(el-gr), .util-tournament-scouting-member-name:lang(th-th), .util-tournament-scouting-member-name:lang(zh-tw) { text-transform: none; } .util-tournament-scouting-member-name { text-transform: none; } .util-tournament-scouting-member-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .util-tournament-scouting-member-name:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-member-name { letter-spacing: 0.0375em; } .util-tournament-scouting-member-name:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-top-champion-stat-wins-percentage, .tournament-scouting-top-champion-stat-games-played, .tournament-scouting-top-champion-stat-kda, .tournament-scouting-top-champion-stat-kda-average, .tournament-scouting-top-champion-stat-kda-text { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .util-tournament-scouting-subitem-primary:lang(ja-jp), .util-tournament-scouting-subitem-secondary:lang(ja-jp), .util-tournament-scouting-subitem-tertiary:lang(ja-jp), .util-tournament-scouting-subitem-filler:lang(ja-jp), .util-tournament-scouting-subitem-tooltip:lang(ja-jp), .tournament-scouting-top-champion-stat-wins-percentage:lang(ja-jp), .tournament-scouting-top-champion-stat-games-played:lang(ja-jp), .tournament-scouting-top-champion-stat-kda:lang(ja-jp), .tournament-scouting-top-champion-stat-kda-average:lang(ja-jp), .tournament-scouting-top-champion-stat-kda-text:lang(ja-jp) { font-size: 13px; } .util-tournament-scouting-subitem-primary:lang(ar-ae), .util-tournament-scouting-subitem-secondary:lang(ar-ae), .util-tournament-scouting-subitem-tertiary:lang(ar-ae), .util-tournament-scouting-subitem-filler:lang(ar-ae), .util-tournament-scouting-subitem-tooltip:lang(ar-ae), .tournament-scouting-top-champion-stat-wins-percentage:lang(ar-ae), .tournament-scouting-top-champion-stat-games-played:lang(ar-ae), .tournament-scouting-top-champion-stat-kda:lang(ar-ae), .tournament-scouting-top-champion-stat-kda-average:lang(ar-ae), .tournament-scouting-top-champion-stat-kda-text:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-member { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: center; min-width: 200px; } .util-tournament-scouting-member-summary { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch; width: 100%; min-height: 130px; } .util-tournament-scouting-member-name { color: #f0e6d2; align-self: center; } .util-tournament-scouting-member-summary-separator { width: 120px; height: 7px; background-repeat: no-repeat; align-self: center; background-image: url(/fe/lol-clash/summarySeparator.png); margin-top: 10px; } .util-tournament-scouting-subitems { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; height: 310px; } .util-tournament-scouting-subitem { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; margin-top: 15px; } .util-tournament-scouting-subitem-champion-icon-container { background: url(/fe/lol-clash/playerobject_m_sprite.png) no-repeat top; background-size: cover; width: 46px; height: 46px; margin: 0 10px 0 50px ; } .util-tournament-scouting-subitem-champion-icon { border-radius: 0; -webkit-clip-path: circle(50px at center); transform: scale(0.42); position: relative; top: -37px; left: -37px ; right: auto ; } .util-tournament-scouting-subitem-filler-icon-container { width: 46px; height: 46px; margin: 0 15px 0 46px ; } .util-tournament-scouting-subitem-filler-icon { background-repeat: no-repeat; align-self: center; background-image: url(/fe/lol-clash/fillerIcon.png); background-size: contain; background-position-y: -4px; width: 55px; height: 55px; } .util-tournament-scouting-subitem-data { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start; } .util-tournament-scouting-subitem-primary, .tournament-scouting-top-champion-stat-wins-percentage, .tournament-scouting-top-champion-stat-kda-average { color: #cdbe91; } .util-tournament-scouting-subitem-secondary { color: #a98d58; } .util-tournament-scouting-subitem-tertiary, .tournament-scouting-top-champion-stat-games-played, .tournament-scouting-top-champion-stat-kda-text { color: #888; } .util-tournament-scouting-subitem-filler { color: #785a28; } .util-tournament-scouting-subitem-tooltip-group { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; } .tournament-scouting-top-champion-stat-group { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } .tournament-scouting-top-champion-stat-games-played { margin: 0 0 0 4px ; } .tournament-scouting-top-champion-stat-kda-group { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } .tournament-scouting-top-champion-stat-kda-low { color: #c83535; } .tournament-scouting-top-champion-stat-kda-high { color: #35b138; } .tournament-scouting-top-champion-stat-kda-text { margin: 0 0 0 4px ; } .tournament-scouting-member-mastery-total, .tournament-scouting-member-mastery-total-label { font-family: var(--font-display); } .tournament-scouting-member-mastery-total, .tournament-scouting-member-mastery-total-label { -webkit-user-select: none; } .tournament-scouting-member-mastery-total, .tournament-scouting-member-mastery-total-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .tournament-scouting-member-mastery-total, .tournament-scouting-member-mastery-total-label { text-transform: uppercase; } .tournament-scouting-member-mastery-total:lang(ko-kr), .tournament-scouting-member-mastery-total-label:lang(ko-kr), .tournament-scouting-member-mastery-total:lang(ja-jp), .tournament-scouting-member-mastery-total-label:lang(ja-jp), .tournament-scouting-member-mastery-total:lang(tr-tr), .tournament-scouting-member-mastery-total-label:lang(tr-tr), .tournament-scouting-member-mastery-total:lang(el-gr), .tournament-scouting-member-mastery-total-label:lang(el-gr), .tournament-scouting-member-mastery-total:lang(th-th), .tournament-scouting-member-mastery-total-label:lang(th-th), .tournament-scouting-member-mastery-total:lang(zh-tw), .tournament-scouting-member-mastery-total-label:lang(zh-tw) { text-transform: none; } .tournament-scouting-member-mastery-total { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .tournament-scouting-member-mastery-total:lang(ar-ae) { letter-spacing: 0; } .tournament-scouting-member-mastery-total-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .tournament-scouting-member-mastery-total-label:lang(ja-jp) { font-size: 13px; } .tournament-scouting-member-mastery-total-label:lang(ar-ae) { letter-spacing: 0; } .tournament-scouting-member-mastery-total { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tournament-scouting-member-mastery-total { font-size: 24px; font-weight: 700; font-style: italic; letter-spacing: 0.05em; } .tournament-scouting-member-mastery-total:lang(ar-ae) { letter-spacing: 0; } .tournament-scouting-member-mastery-total { align-self: center; margin-top: 20px; font-size: 36px; min-height: 42px; } .tournament-scouting-member-mastery-total-label { color: #888; align-self: center; margin-top: 13px; margin-bottom: 4px; } .util-tournament-scouting-member-name { font-family: var(--font-display); } .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-top-mastery-stat-rank-points, .tournament-scouting-top-mastery-stat-rank, .tournament-scouting-top-mastery-stat-grade-label, .tournament-scouting-top-mastery-stat-grade { font-family: var(--font-body); } .util-tournament-scouting-member-name, .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-top-mastery-stat-rank-points, .tournament-scouting-top-mastery-stat-rank, .tournament-scouting-top-mastery-stat-grade-label, .tournament-scouting-top-mastery-stat-grade { -webkit-user-select: none; } .util-tournament-scouting-member-name, .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-top-mastery-stat-rank-points, .tournament-scouting-top-mastery-stat-rank, .tournament-scouting-top-mastery-stat-grade-label, .tournament-scouting-top-mastery-stat-grade { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .util-tournament-scouting-member-name { text-transform: uppercase; } .util-tournament-scouting-member-name:lang(ko-kr), .util-tournament-scouting-member-name:lang(ja-jp), .util-tournament-scouting-member-name:lang(tr-tr), .util-tournament-scouting-member-name:lang(el-gr), .util-tournament-scouting-member-name:lang(th-th), .util-tournament-scouting-member-name:lang(zh-tw) { text-transform: none; } .util-tournament-scouting-member-name { text-transform: none; } .util-tournament-scouting-member-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .util-tournament-scouting-member-name:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-member-name { letter-spacing: 0.0375em; } .util-tournament-scouting-member-name:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-top-mastery-stat-rank-points, .tournament-scouting-top-mastery-stat-rank, .tournament-scouting-top-mastery-stat-grade-label, .tournament-scouting-top-mastery-stat-grade { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .util-tournament-scouting-subitem-primary:lang(ja-jp), .util-tournament-scouting-subitem-secondary:lang(ja-jp), .util-tournament-scouting-subitem-tertiary:lang(ja-jp), .util-tournament-scouting-subitem-filler:lang(ja-jp), .util-tournament-scouting-subitem-tooltip:lang(ja-jp), .tournament-scouting-top-mastery-stat-rank-points:lang(ja-jp), .tournament-scouting-top-mastery-stat-rank:lang(ja-jp), .tournament-scouting-top-mastery-stat-grade-label:lang(ja-jp), .tournament-scouting-top-mastery-stat-grade:lang(ja-jp) { font-size: 13px; } .util-tournament-scouting-subitem-primary:lang(ar-ae), .util-tournament-scouting-subitem-secondary:lang(ar-ae), .util-tournament-scouting-subitem-tertiary:lang(ar-ae), .util-tournament-scouting-subitem-filler:lang(ar-ae), .util-tournament-scouting-subitem-tooltip:lang(ar-ae), .tournament-scouting-top-mastery-stat-rank-points:lang(ar-ae), .tournament-scouting-top-mastery-stat-rank:lang(ar-ae), .tournament-scouting-top-mastery-stat-grade-label:lang(ar-ae), .tournament-scouting-top-mastery-stat-grade:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-member { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: center; min-width: 200px; } .util-tournament-scouting-member-summary { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch; width: 100%; min-height: 130px; } .util-tournament-scouting-member-name { color: #f0e6d2; align-self: center; } .util-tournament-scouting-member-summary-separator { width: 120px; height: 7px; background-repeat: no-repeat; align-self: center; background-image: url(/fe/lol-clash/summarySeparator.png); margin-top: 10px; } .util-tournament-scouting-subitems { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; height: 310px; } .util-tournament-scouting-subitem { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; margin-top: 15px; } .util-tournament-scouting-subitem-champion-icon-container { background: url(/fe/lol-clash/playerobject_m_sprite.png) no-repeat top; background-size: cover; width: 46px; height: 46px; margin: 0 10px 0 50px ; } .util-tournament-scouting-subitem-champion-icon { border-radius: 0; -webkit-clip-path: circle(50px at center); transform: scale(0.42); position: relative; top: -37px; left: -37px ; right: auto ; } .util-tournament-scouting-subitem-filler-icon-container { width: 46px; height: 46px; margin: 0 15px 0 46px ; } .util-tournament-scouting-subitem-filler-icon { background-repeat: no-repeat; align-self: center; background-image: url(/fe/lol-clash/fillerIcon.png); background-size: contain; background-position-y: -4px; width: 55px; height: 55px; } .util-tournament-scouting-subitem-data, .tournament-scouting-top-mastery-subitem-data { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start; } .util-tournament-scouting-subitem-primary, .tournament-scouting-top-mastery-stat-rank, .tournament-scouting-top-mastery-stat-grade { color: #cdbe91; } .util-tournament-scouting-subitem-secondary, .tournament-scouting-top-mastery-stat-rank-points { color: #a98d58; } .util-tournament-scouting-subitem-tertiary, .tournament-scouting-top-mastery-stat-grade-label { color: #888; } .util-tournament-scouting-subitem-filler { color: #785a28; } .util-tournament-scouting-subitem-tooltip-group { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; } .tournament-scouting-top-mastery-subitem-data { justify-content: center; } .tournament-scouting-top-mastery-stat-group { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } .tournament-scouting-top-mastery-stat-rank-icon { height: 14px; width: 18px; align-self: center; background-image: url(/fe/lol-clash/genericRank.png); background-repeat: no-repeat; background-size: contain; } .tournament-scouting-top-mastery-stat-rank { margin: 2px 0 0 4px ; } .tournament-scouting-top-mastery-stat-grade { margin-left: 4px; } .tournament-scouting-member-history-total, .tournament-scouting-member-history-total-wins, .tournament-scouting-member-history-total-losses, .tournament-scouting-member-history-total-label { font-family: var(--font-display); } .tournament-scouting-member-history-total, .tournament-scouting-member-history-total-wins, .tournament-scouting-member-history-total-losses, .tournament-scouting-member-history-total-label { -webkit-user-select: none; } .tournament-scouting-member-history-total, .tournament-scouting-member-history-total-wins, .tournament-scouting-member-history-total-losses, .tournament-scouting-member-history-total-label { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .tournament-scouting-member-history-total, .tournament-scouting-member-history-total-wins, .tournament-scouting-member-history-total-losses, .tournament-scouting-member-history-total-label { text-transform: uppercase; } .tournament-scouting-member-history-total:lang(ko-kr), .tournament-scouting-member-history-total-wins:lang(ko-kr), .tournament-scouting-member-history-total-losses:lang(ko-kr), .tournament-scouting-member-history-total-label:lang(ko-kr), .tournament-scouting-member-history-total:lang(ja-jp), .tournament-scouting-member-history-total-wins:lang(ja-jp), .tournament-scouting-member-history-total-losses:lang(ja-jp), .tournament-scouting-member-history-total-label:lang(ja-jp), .tournament-scouting-member-history-total:lang(tr-tr), .tournament-scouting-member-history-total-wins:lang(tr-tr), .tournament-scouting-member-history-total-losses:lang(tr-tr), .tournament-scouting-member-history-total-label:lang(tr-tr), .tournament-scouting-member-history-total:lang(el-gr), .tournament-scouting-member-history-total-wins:lang(el-gr), .tournament-scouting-member-history-total-losses:lang(el-gr), .tournament-scouting-member-history-total-label:lang(el-gr), .tournament-scouting-member-history-total:lang(th-th), .tournament-scouting-member-history-total-wins:lang(th-th), .tournament-scouting-member-history-total-losses:lang(th-th), .tournament-scouting-member-history-total-label:lang(th-th), .tournament-scouting-member-history-total:lang(zh-tw), .tournament-scouting-member-history-total-wins:lang(zh-tw), .tournament-scouting-member-history-total-losses:lang(zh-tw), .tournament-scouting-member-history-total-label:lang(zh-tw) { text-transform: none; } .tournament-scouting-member-history-total, .tournament-scouting-member-history-total-wins, .tournament-scouting-member-history-total-losses { color: #f0e6d2; font-size: 40px; font-weight: 700; line-height: 42px; letter-spacing: 0.05em; } .tournament-scouting-member-history-total:lang(ar-ae), .tournament-scouting-member-history-total-wins:lang(ar-ae), .tournament-scouting-member-history-total-losses:lang(ar-ae) { letter-spacing: 0; } .tournament-scouting-member-history-total-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .tournament-scouting-member-history-total-label:lang(ja-jp) { font-size: 13px; } .tournament-scouting-member-history-total-label:lang(ar-ae) { letter-spacing: 0; } .tournament-scouting-member-history-total, .tournament-scouting-member-history-total-wins, .tournament-scouting-member-history-total-losses { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tournament-scouting-member-history-total, .tournament-scouting-member-history-total-wins, .tournament-scouting-member-history-total-losses { font-size: 24px; font-weight: 700; font-style: italic; letter-spacing: 0.05em; } .tournament-scouting-member-history-total:lang(ar-ae), .tournament-scouting-member-history-total-wins:lang(ar-ae), .tournament-scouting-member-history-total-losses:lang(ar-ae) { letter-spacing: 0; } .tournament-scouting-member-history-total, .tournament-scouting-member-history-total-wins, .tournament-scouting-member-history-total-losses { align-self: center; margin-top: 20px; font-size: 36px; min-height: 42px; } .tournament-scouting-wins-losses { align-self: center; } .tournament-scouting-member-history-total-wins { background: linear-gradient(to bottom, #cdb391 0%, #7d632f 100%); display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tournament-scouting-wins-losses-separator { width: 2px; height: 36px; position: relative; top: 5px; margin-left: 8px; margin-right: 8px; background-color: #463714; -webkit-animation: fadein 1s; display: inline-block; } .tournament-scouting-member-history-total-losses { background: linear-gradient(to bottom, #e34b4b 0%, #a52626 100%); display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tournament-scouting-member-history-total-label { color: #888; align-self: center; margin-top: 13px; margin-bottom: 4px; } .util-tournament-scouting-member-name, .tournament-scouting-last-matches-result, .tournament-scouting-last-matches-win, .tournament-scouting-last-matches-loss { font-family: var(--font-display); } .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-last-matches-position-text, .tournament-scouting-last-matches-gold-text, .tournament-scouting-last-matches-gold-high-text, .tournament-scouting-last-matches-gold-normal-text, .tournament-scouting-last-matches-subitem-handle { font-family: var(--font-body); } .util-tournament-scouting-member-name, .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-last-matches-result, .tournament-scouting-last-matches-win, .tournament-scouting-last-matches-loss, .tournament-scouting-last-matches-position-text, .tournament-scouting-last-matches-gold-text, .tournament-scouting-last-matches-gold-high-text, .tournament-scouting-last-matches-gold-normal-text, .tournament-scouting-last-matches-subitem-handle { -webkit-user-select: none; } .util-tournament-scouting-member-name, .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-last-matches-result, .tournament-scouting-last-matches-win, .tournament-scouting-last-matches-loss, .tournament-scouting-last-matches-position-text, .tournament-scouting-last-matches-gold-text, .tournament-scouting-last-matches-gold-high-text, .tournament-scouting-last-matches-gold-normal-text, .tournament-scouting-last-matches-subitem-handle { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .util-tournament-scouting-member-name, .tournament-scouting-last-matches-result, .tournament-scouting-last-matches-win, .tournament-scouting-last-matches-loss { text-transform: uppercase; } .util-tournament-scouting-member-name:lang(ko-kr), .tournament-scouting-last-matches-result:lang(ko-kr), .tournament-scouting-last-matches-win:lang(ko-kr), .tournament-scouting-last-matches-loss:lang(ko-kr), .util-tournament-scouting-member-name:lang(ja-jp), .tournament-scouting-last-matches-result:lang(ja-jp), .tournament-scouting-last-matches-win:lang(ja-jp), .tournament-scouting-last-matches-loss:lang(ja-jp), .util-tournament-scouting-member-name:lang(tr-tr), .tournament-scouting-last-matches-result:lang(tr-tr), .tournament-scouting-last-matches-win:lang(tr-tr), .tournament-scouting-last-matches-loss:lang(tr-tr), .util-tournament-scouting-member-name:lang(el-gr), .tournament-scouting-last-matches-result:lang(el-gr), .tournament-scouting-last-matches-win:lang(el-gr), .tournament-scouting-last-matches-loss:lang(el-gr), .util-tournament-scouting-member-name:lang(th-th), .tournament-scouting-last-matches-result:lang(th-th), .tournament-scouting-last-matches-win:lang(th-th), .tournament-scouting-last-matches-loss:lang(th-th), .util-tournament-scouting-member-name:lang(zh-tw), .tournament-scouting-last-matches-result:lang(zh-tw), .tournament-scouting-last-matches-win:lang(zh-tw), .tournament-scouting-last-matches-loss:lang(zh-tw) { text-transform: none; } .util-tournament-scouting-member-name { text-transform: none; } .util-tournament-scouting-member-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .util-tournament-scouting-member-name:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-member-name { letter-spacing: 0.0375em; } .util-tournament-scouting-member-name:lang(ar-ae) { letter-spacing: 0; } .tournament-scouting-last-matches-result, .tournament-scouting-last-matches-win, .tournament-scouting-last-matches-loss { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .tournament-scouting-last-matches-result:lang(ja-jp), .tournament-scouting-last-matches-win:lang(ja-jp), .tournament-scouting-last-matches-loss:lang(ja-jp) { font-size: 13px; } .tournament-scouting-last-matches-result:lang(ar-ae), .tournament-scouting-last-matches-win:lang(ar-ae), .tournament-scouting-last-matches-loss:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-subitem-primary, .util-tournament-scouting-subitem-secondary, .util-tournament-scouting-subitem-tertiary, .util-tournament-scouting-subitem-filler, .util-tournament-scouting-subitem-tooltip, .tournament-scouting-last-matches-position-text, .tournament-scouting-last-matches-gold-text, .tournament-scouting-last-matches-gold-high-text, .tournament-scouting-last-matches-gold-normal-text, .tournament-scouting-last-matches-subitem-handle { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .util-tournament-scouting-subitem-primary:lang(ja-jp), .util-tournament-scouting-subitem-secondary:lang(ja-jp), .util-tournament-scouting-subitem-tertiary:lang(ja-jp), .util-tournament-scouting-subitem-filler:lang(ja-jp), .util-tournament-scouting-subitem-tooltip:lang(ja-jp), .tournament-scouting-last-matches-position-text:lang(ja-jp), .tournament-scouting-last-matches-gold-text:lang(ja-jp), .tournament-scouting-last-matches-gold-high-text:lang(ja-jp), .tournament-scouting-last-matches-gold-normal-text:lang(ja-jp), .tournament-scouting-last-matches-subitem-handle:lang(ja-jp) { font-size: 13px; } .util-tournament-scouting-subitem-primary:lang(ar-ae), .util-tournament-scouting-subitem-secondary:lang(ar-ae), .util-tournament-scouting-subitem-tertiary:lang(ar-ae), .util-tournament-scouting-subitem-filler:lang(ar-ae), .util-tournament-scouting-subitem-tooltip:lang(ar-ae), .tournament-scouting-last-matches-position-text:lang(ar-ae), .tournament-scouting-last-matches-gold-text:lang(ar-ae), .tournament-scouting-last-matches-gold-high-text:lang(ar-ae), .tournament-scouting-last-matches-gold-normal-text:lang(ar-ae), .tournament-scouting-last-matches-subitem-handle:lang(ar-ae) { letter-spacing: 0; } .util-tournament-scouting-member { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: center; min-width: 200px; } .util-tournament-scouting-member-summary { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch; width: 100%; min-height: 130px; } .util-tournament-scouting-member-name { color: #f0e6d2; align-self: center; } .util-tournament-scouting-member-summary-separator { width: 120px; height: 7px; background-repeat: no-repeat; align-self: center; background-image: url(/fe/lol-clash/summarySeparator.png); margin-top: 10px; } .util-tournament-scouting-subitems { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; height: 310px; } .util-tournament-scouting-subitem, .tournament-scouting-match-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; margin-top: 15px; } .util-tournament-scouting-subitem-champion-icon-container, .tournament-scouting-subitem-champion-icon-container { background: url(/fe/lol-clash/playerobject_m_sprite.png) no-repeat top; background-size: cover; width: 46px; height: 46px; margin: 0 10px 0 50px ; } .util-tournament-scouting-subitem-champion-icon { border-radius: 0; -webkit-clip-path: circle(50px at center); transform: scale(0.42); position: relative; top: -37px; left: -37px ; right: auto ; } .util-tournament-scouting-subitem-filler-icon-container { width: 46px; height: 46px; margin: 0 15px 0 46px ; } .util-tournament-scouting-subitem-filler-icon { background-repeat: no-repeat; align-self: center; background-image: url(/fe/lol-clash/fillerIcon.png); background-size: contain; background-position-y: -4px; width: 55px; height: 55px; } .util-tournament-scouting-subitem-data, .tournament-scouting-last-matches-subitem-data { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start; } .util-tournament-scouting-subitem-primary, .tournament-scouting-last-matches-position-text, .tournament-scouting-last-matches-gold-text, .tournament-scouting-last-matches-gold-high-text, .tournament-scouting-last-matches-gold-normal-text, .tournament-scouting-last-matches-subitem-handle { color: #cdbe91; } .util-tournament-scouting-subitem-secondary { color: #a98d58; } .util-tournament-scouting-subitem-tertiary { color: #888; } .util-tournament-scouting-subitem-filler { color: #785a28; } .util-tournament-scouting-subitem-tooltip-group { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start; } .tournament-scouting-subitem:first-child { margin-top: 5px; } .tournament-scouting-match-container { position: relative; width: 180px; cursor: pointer; justify-content: flex-start; padding: 5px 0; margin: 0 0 0 9px ; } .tournament-scouting-match-container:hover { background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0)); } .tournament-scouting-match-container:hover .tournament-scouting-last-matches-subitem-handle { display: inline-block; } .tournament-scouting-subitem-champion-icon-container { margin: 3.5px 10px 0 30px ; } .tournament-scouting-last-matches-result, .tournament-scouting-last-matches-win, .tournament-scouting-last-matches-loss { vertical-align: middle; font-size: 12px; align-self: left; } .tournament-scouting-last-matches-win { color: #0ac1dd; } .tournament-scouting-last-matches-loss { color: #c83535; } .tournament-scouting-last-matches-subitem-data { vertical-align: middle; justify-content: center; } .tournament-scouting-last-matches-subitem-data-row { vertical-align: middle; height: 17px; white-space: normal ; } .tournament-scouting-last-matches-stat-group { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } .tournament-scouting-last-matches-position-text { display: inline-block; vertical-align: middle; color: #a98d58; } .tournament-scouting-last-matches-position-icon { width: 15px; height: 15px; vertical-align: middle; display: inline-block; } .tournament-scouting-last-matches-gold-text, .tournament-scouting-last-matches-gold-high-text, .tournament-scouting-last-matches-gold-normal-text { display: inline-block; vertical-align: middle; } .tournament-scouting-last-matches-gold-high-text { color: #36d987; } .tournament-scouting-last-matches-gold-normal-text { color: #a98d58; } .tournament-scouting-last-matches-gold-icon { width: 15px; height: 15px; display: inline-block; background-color: #c8aa6e; vertical-align: middle; -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-image: url(/fe/lol-clash/icon-gold.png); } .tournament-scouting-last-matches-subitem-handle { display: none; margin: auto 5px auto auto ; height: 18px; transform: none ; vertical-align: middle; } .clash-tournament-overview .clash-tournament-overview-tournament-name, .clash-tournament-overview .clash-tournament-overview-tournament-week, .clash-tournament-overview .clash-tournament-overview-tournament-time { font-family: var(--font-display); } .clash-tournament-overview .clash-tournament-overview-tournament-name, .clash-tournament-overview .clash-tournament-overview-tournament-week, .clash-tournament-overview .clash-tournament-overview-tournament-time { -webkit-user-select: none; } .clash-tournament-overview .clash-tournament-overview-tournament-name, .clash-tournament-overview .clash-tournament-overview-tournament-week, .clash-tournament-overview .clash-tournament-overview-tournament-time { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-tournament-overview .clash-tournament-overview-tournament-name, .clash-tournament-overview .clash-tournament-overview-tournament-week, .clash-tournament-overview .clash-tournament-overview-tournament-time { text-transform: uppercase; } .clash-tournament-overview .clash-tournament-overview-tournament-name:lang(ko-kr), .clash-tournament-overview .clash-tournament-overview-tournament-week:lang(ko-kr), .clash-tournament-overview .clash-tournament-overview-tournament-time:lang(ko-kr), .clash-tournament-overview .clash-tournament-overview-tournament-name:lang(ja-jp), .clash-tournament-overview .clash-tournament-overview-tournament-week:lang(ja-jp), .clash-tournament-overview .clash-tournament-overview-tournament-time:lang(ja-jp), .clash-tournament-overview .clash-tournament-overview-tournament-name:lang(tr-tr), .clash-tournament-overview .clash-tournament-overview-tournament-week:lang(tr-tr), .clash-tournament-overview .clash-tournament-overview-tournament-time:lang(tr-tr), .clash-tournament-overview .clash-tournament-overview-tournament-name:lang(el-gr), .clash-tournament-overview .clash-tournament-overview-tournament-week:lang(el-gr), .clash-tournament-overview .clash-tournament-overview-tournament-time:lang(el-gr), .clash-tournament-overview .clash-tournament-overview-tournament-name:lang(th-th), .clash-tournament-overview .clash-tournament-overview-tournament-week:lang(th-th), .clash-tournament-overview .clash-tournament-overview-tournament-time:lang(th-th), .clash-tournament-overview .clash-tournament-overview-tournament-name:lang(zh-tw), .clash-tournament-overview .clash-tournament-overview-tournament-week:lang(zh-tw), .clash-tournament-overview .clash-tournament-overview-tournament-time:lang(zh-tw) { text-transform: none; } .clash-tournament-overview .clash-tournament-overview-tournament-name, .clash-tournament-overview .clash-tournament-overview-tournament-week, .clash-tournament-overview .clash-tournament-overview-tournament-time { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-tournament-overview .clash-tournament-overview-tournament-name:lang(ar-ae), .clash-tournament-overview .clash-tournament-overview-tournament-week:lang(ar-ae), .clash-tournament-overview .clash-tournament-overview-tournament-time:lang(ar-ae) { letter-spacing: 0; } .clash-tournament-overview .clash-tournament-overview-tournament-week, .clash-tournament-overview .clash-tournament-overview-tournament-time { color: #a09b8c; } .clash-tournament-overview .clash-tournament-overview-tournament-name, .clash-tournament-overview .clash-tournament-overview-tournament-week, .clash-tournament-overview .clash-tournament-overview-tournament-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-tournament-overview { direction: ltr; position: relative; width: 100%; height: 639px; background-image: url("/fe/lol-clash/assets/images/overview/Background_Magic_720.jpg"); background-size: cover; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; cursor: default; } .clash-tournament-overview .clash-tournament-overview-header { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; margin: 0 0 0 35px ; } .clash-tournament-overview .clash-tournament-overview-team-details { height: 78px; padding-right: 37px; display: flex; flex-direction: row; align-items: center; } .clash-tournament-overview .clash-tournament-overview-summoners { position: absolute; top: 0px; right: 49px ; left: auto ; height: 78px; display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; } .clash-tournament-overview .clash-tournament-overview-summoners .clash-tournament-overview-summoner { height: 40px; width: 40px; margin-left: 5px; margin-right: 5px; margin-bottom: 16px; } .clash-tournament-overview .clash-tournament-overview-top-separator { width: 985px; } .clash-tournament-overview .clash-tournament-overview-tournament-info { height: 38px; width: 985px; margin-top: 4px; } .clash-tournament-overview .clash-tournament-overview-tournament-name { display: inline-block; } .clash-tournament-overview .clash-tournament-overview-tournament-week { margin: 0 0 0 20px ; display: inline-block; } .clash-tournament-overview .clash-tournament-overview-tournament-time { float: right; color: #3c3c41; } .clash-tournament-overview .clash-tournament-overview-periods { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; margin-top: 10px; } .clash-tournament-overview .clash-tournament-overview-carousel { height: 180px; margin-top: 25px; margin-left: 24px; margin-right: 24px; } .clash-overview-period .clash-overview-period-name, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.trophy, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy, .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text { font-family: var(--font-display); } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-description, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-text { font-family: var(--font-body); } .clash-overview-period .clash-overview-period-name, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-description, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.trophy, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-text, .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text { -webkit-user-select: none; } .clash-overview-period .clash-overview-period-name, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-description, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.trophy, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-text, .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-overview-period .clash-overview-period-name, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy, .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text { text-transform: uppercase; } .clash-overview-period .clash-overview-period-name:lang(ko-kr), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title:lang(ko-kr), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container:lang(ko-kr), .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy:lang(ko-kr), .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text:lang(ko-kr), .clash-overview-period .clash-overview-period-name:lang(ja-jp), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title:lang(ja-jp), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container:lang(ja-jp), .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy:lang(ja-jp), .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text:lang(ja-jp), .clash-overview-period .clash-overview-period-name:lang(tr-tr), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title:lang(tr-tr), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container:lang(tr-tr), .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy:lang(tr-tr), .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text:lang(tr-tr), .clash-overview-period .clash-overview-period-name:lang(el-gr), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title:lang(el-gr), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container:lang(el-gr), .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy:lang(el-gr), .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text:lang(el-gr), .clash-overview-period .clash-overview-period-name:lang(th-th), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title:lang(th-th), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container:lang(th-th), .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy:lang(th-th), .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text:lang(th-th), .clash-overview-period .clash-overview-period-name:lang(zh-tw), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title:lang(zh-tw), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container:lang(zh-tw), .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy:lang(zh-tw), .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text:lang(zh-tw) { text-transform: none; } .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy:lang(ar-ae) { letter-spacing: 0; } .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.no-trophy { color: #a09b8c; } .clash-overview-period .clash-overview-period-name, .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-overview-period .clash-overview-period-name:lang(ar-ae), .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title:lang(ar-ae) { letter-spacing: 0; } .clash-overview-period .clash-overview-period-name { color: #a09b8c; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container:lang(ar-ae) { letter-spacing: 0; } .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text:lang(ja-jp) { font-size: 13px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text:lang(ar-ae) { letter-spacing: 0; } .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text { color: #a09b8c; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-description, .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-text { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-description:lang(ja-jp), .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-text:lang(ja-jp) { font-size: 13px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-description:lang(ar-ae), .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-text:lang(ar-ae) { letter-spacing: 0; } .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.trophy { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.trophy { font-size: 24px; font-weight: 700; font-style: italic; letter-spacing: 0.05em; } .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.trophy:lang(ar-ae) { letter-spacing: 0; } .clash-overview-period .clash-overview-period-name, .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-overview-period { position: relative; width: 305px; height: 300px; margin: 0 0 0 35px ; } .clash-overview-period .clash-overview-period-name { margin: 0 auto 8px; text-align: center; height: 20px; } .clash-overview-period .clash-overview-period-content { position: relative; width: 100%; margin-top: 28px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data { position: relative; width: 100%; height: 277px; margin-top: -20px; margin-bottom: -3px; background-image: url("/fe/lol-clash/assets/images/overview/Overview_BG_Fade.png"); background-size: cover; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-summary-container { position: absolute; height: 100%; width: 100%; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-matches-container { position: absolute; height: 100%; width: 100%; opacity: 0; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data { position: relative; height: 100%; width: 100%; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-period-data-background-missed { position: absolute; height: 100%; width: 100%; background-image: url("/fe/lol-clash/assets/images/overview/overview-period-bg-logo.png"); background-size: cover; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-period-data-background-day-planner { position: absolute; height: 100%; width: 100%; background-image: url("/fe/lol-clash/assets/images/overview/overview-period-bg-day-planner.png"); background-size: cover; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents { position: absolute; height: 100%; width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-header { height: 63px; width: 228px; margin-top: 28px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-title { margin-top: 8px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; margin-top: 1px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-return-time-container .clash-overview-day-planner-return-time-deco { width: 55px; height: 2px; background-color: #785a28; margin: 0 10px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-day-planner-contents .clash-overview-day-planner-description { width: 200px; text-align: center; margin-top: 10px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-data .clash-overview-period-data-no-data .clash-overview-period-data-background-upcoming { position: absolute; height: 100%; width: 100%; background-image: url("/fe/lol-clash/assets/images/overview/overview-period-bg-upcoming.png"); background-size: cover; } .clash-overview-period .clash-overview-period-content .clash-overview-period-trophy { height: 170px; top: 30px; transform: scale(1.6); margin: auto; position: absolute; left: 0; right: 0; } .clash-overview-period .clash-overview-period-content .clash-overview-period-trophy.no-trophy { top: 40px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-trophy-bkgd { position: absolute; top: 40px; width: 250px; margin: auto; left: 0; right: 0; } .clash-overview-period .clash-overview-period-content .clash-overview-period-no-matches-gap { height: 189px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container { position: absolute; width: 100%; bottom: 14px; text-align: center; } .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums { margin-top: 6px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-nums.trophy { font-style: normal; } .clash-overview-period .clash-overview-period-content .clash-overview-period-wins-losses-container .clash-overview-period-wins-losses-text { color: #5b5a56; margin-top: 6px; } .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header { width: 100%; height: 33px; background: #1e2328; opacity: 0; } .clash-overview-period .clash-overview-period-content .clash-overview-period-bracket-header-text { line-height: 33px; margin: 0 0 0 12px ; } .clash-overview-period .clash-overview-period-content .clash-overview-winners-match-container, .clash-overview-period .clash-overview-period-content .clash-overview-losers-match-container { position: relative; width: 100%; height: 53px; opacity: 0; } .clash-overview-period .clash-overview-period-content .clash-overview-motion-blur { margin-top: -50px; pointer-events: none; opacity: 0; } .clash-overview-period .clash-overview-period-button { cursor: pointer; position: absolute; height: 31px; width: 31px; top: -14px; right: 16px ; left: auto ; background-size: cover; background-image: url("/fe/lol-clash/assets/images/overview/toggle-button.png"); transform: none ; } .clash-overview-period .clash-overview-period-button:hover { background-image: url("/fe/lol-clash/assets/images/overview/toggle-button-over.png"); } .clash-overview-period .clash-overview-period-button:active { background-image: url("/fe/lol-clash/assets/images/overview/toggle-button-down.png"); } .clash-overview-period .clash-overview-period-button .clash-overview-toggle-button-icon-container { height: 41px; width: 67px; position: absolute; top: -4px; left: -18px; } .clash-overview-period .clash-overview-period-top-frame { position: absolute; height: 24px; width: 100%; top: -3px; transform: none ; } .clash-overview-period .clash-overview-period-top-frame.grey { height: 7px; opacity: 0.5; } .clash-overview-period .clash-overview-period-bottom-frame { position: absolute; width: 100%; height: 7px; } .clash-overview-period .clash-overview-period-bottom-frame.grey { opacity: 0.5; } .clash-overview-period video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-overview-match, .clash-overview-match .clash-overview-match-view-history { font-family: var(--font-body); } .clash-overview-match, .clash-overview-match .clash-overview-match-view-history { -webkit-user-select: none; } .clash-overview-match, .clash-overview-match .clash-overview-match-view-history { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-overview-match .clash-overview-match-opponent-tag, .clash-overview-match .clash-overview-match-no-opponent-tag { text-transform: uppercase; } .clash-overview-match .clash-overview-match-opponent-tag:lang(ko-kr), .clash-overview-match .clash-overview-match-no-opponent-tag:lang(ko-kr), .clash-overview-match .clash-overview-match-opponent-tag:lang(ja-jp), .clash-overview-match .clash-overview-match-no-opponent-tag:lang(ja-jp), .clash-overview-match .clash-overview-match-opponent-tag:lang(tr-tr), .clash-overview-match .clash-overview-match-no-opponent-tag:lang(tr-tr), .clash-overview-match .clash-overview-match-opponent-tag:lang(el-gr), .clash-overview-match .clash-overview-match-no-opponent-tag:lang(el-gr), .clash-overview-match .clash-overview-match-opponent-tag:lang(th-th), .clash-overview-match .clash-overview-match-no-opponent-tag:lang(th-th), .clash-overview-match .clash-overview-match-opponent-tag:lang(zh-tw), .clash-overview-match .clash-overview-match-no-opponent-tag:lang(zh-tw) { text-transform: none; } .clash-overview-match { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-overview-match:lang(ja-jp) { font-size: 13px; } .clash-overview-match:lang(ar-ae) { letter-spacing: 0; } .clash-overview-match .clash-overview-match-view-history { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .clash-overview-match .clash-overview-match-view-history:lang(ja-jp) { font-size: 13px; } .clash-overview-match .clash-overview-match-view-history:lang(ar-ae) { letter-spacing: 0; } .clash-overview-match .clash-overview-match-view-history { color: #0596aa; text-decoration: none; } .clash-overview-match .clash-overview-match-view-history:hover, .clash-overview-match .clash-overview-match-view-history.hover { color: #cdfafa; } .clash-overview-match .clash-overview-match-view-history:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-clash/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .clash-overview-match .clash-overview-match-view-history:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .clash-overview-match .clash-overview-match-view-history:hover:after { background-color: #cdfafa; } .clash-overview-match .clash-overview-match-kills, .clash-overview-match .clash-overview-match-view-history { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-overview-match { position: absolute; height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } .clash-overview-match .clash-overview-period-details-divider { position: absolute; bottom: 0; width: 100%; height: 1px; transform: none ; } .clash-overview-match .clash-overview-match-round-num { min-width: 10px; margin: 0 0 0 12px ; } .clash-overview-match .clash-overview-match-win-loss { width: 16px; margin: 0 0 3px 25px ; } .clash-overview-match .clash-overview-match-champ-played { height: 30px; width: 30px; min-width: 30px; margin-left: 10px; } .clash-overview-match .clash-overview-match-kills { width: 100%; margin: 0 0 0 25px ; } .clash-overview-match .clash-overview-match-view-history { width: 100%; text-decoration: underline; color: #785a28; cursor: pointer; text-align: right; padding: 0 20px 0 0 ; } .clash-overview-match .clash-overview-match-view-history:after { background-color: #785a28; margin-top: -2px; } .clash-overview-match .clash-overview-match-opponent-tag { width: 150px; margin: 0 0 0 15px ; } .clash-overview-match .clash-overview-match-no-opponent-tag { color: #785a28; margin: 0 0 0 15px ; } .clash-overview-match .clash-overview-match-opponent-logo { width: 30px; margin: 0 0 0 10px ; } .clash-overview-game .clash-overview-game-name, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text, .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text { font-family: var(--font-display); } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text { font-family: var(--font-body); } .clash-overview-game .clash-overview-game-name, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text, .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text { -webkit-user-select: none; } .clash-overview-game .clash-overview-game-name, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text, .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-overview-game .clash-overview-game-name, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text, .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text { text-transform: uppercase; } .clash-overview-game .clash-overview-game-name:lang(ko-kr), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text:lang(ko-kr), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text:lang(ko-kr), .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text:lang(ko-kr), .clash-overview-game .clash-overview-game-name:lang(ja-jp), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text:lang(ja-jp), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text:lang(ja-jp), .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text:lang(ja-jp), .clash-overview-game .clash-overview-game-name:lang(tr-tr), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text:lang(tr-tr), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text:lang(tr-tr), .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text:lang(tr-tr), .clash-overview-game .clash-overview-game-name:lang(el-gr), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text:lang(el-gr), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text:lang(el-gr), .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text:lang(el-gr), .clash-overview-game .clash-overview-game-name:lang(th-th), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text:lang(th-th), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text:lang(th-th), .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text:lang(th-th), .clash-overview-game .clash-overview-game-name:lang(zh-tw), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text:lang(zh-tw), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text:lang(zh-tw), .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text:lang(zh-tw) { text-transform: none; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text:lang(ar-ae) { letter-spacing: 0; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text { color: #a09b8c; } .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text:lang(ar-ae) { letter-spacing: 0; } .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container .clash-overview-game-text { color: #a09b8c; } .clash-overview-game .clash-overview-game-name, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-overview-game .clash-overview-game-name:lang(ar-ae), .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text:lang(ar-ae) { letter-spacing: 0; } .clash-overview-game .clash-overview-game-name, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text { color: #a09b8c; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text { font-size: 12px; font-weight: normal; outline: 0; letter-spacing: 0.05em; -webkit-font-smoothing: subpixel-antialiased; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text:lang(ja-jp) { font-size: 13px; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text:lang(ar-ae) { letter-spacing: 0; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text { color: #0596aa; text-decoration: none; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text:hover, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text.hover { color: #cdfafa; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text:after { width: 9px; height: 9px; content: ''; display: inline-block; vertical-align: middle; -webkit-mask: url(/fe/lol-clash/external-link-mask.png) no-repeat; -webkit-mask-size: contain; background-color: #0596aa; margin: 0 0 0 5px; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text:lang(ar-ae):after { margin: 0 5px 0 0; transform: scaleX(-1); } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text:hover:after { background-color: #cdfafa; } .clash-overview-game .clash-overview-game-name, .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-overview-game { position: relative; width: 305px; height: 300px; margin-left: 35px; } .clash-overview-game .clash-overview-game-name { margin: 0 auto 8px; text-align: center; height: 20px; } .clash-overview-game .clash-overview-game-content { position: relative; width: 100%; margin-top: 28px; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data { position: relative; width: 100%; height: 277px; margin-top: -20px; margin-bottom: -3px; background-image: url("/fe/lol-clash/assets/images/overview/Overview_BG_Fade.png"); background-size: cover; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container { position: absolute; height: 100%; width: 100%; text-align: center; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-victory-defeat-text { color: #f0e6d2; margin-top: 60px; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-score-text { margin-top: 5px; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-champions { margin-top: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-champions .champion-icon-frame { width: 46px; height: 46px; margin: 0 5px; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-champions .champion-icon { -webkit-clip-path: circle(50px at center); } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-summary-container .clash-overview-game-match-history-text { position: absolute; width: 100%; bottom: 20px; text-align: center; margin-left: 5px; text-decoration: underline; color: #0596aa; cursor: pointer; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-game-data-no-data { position: relative; height: 100%; width: 100%; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-game-data-no-data .clash-overview-game-data-background-missed { position: absolute; height: 100%; width: 100%; background-image: url("/fe/lol-clash/assets/images/overview/overview-period-bg-logo.png"); background-size: cover; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-game-data-no-data .clash-overview-game-data-background-day-planner { position: absolute; height: 100%; width: 100%; background-image: url("/fe/lol-clash/assets/images/overview/overview-period-bg-day-planner.png"); background-size: cover; } .clash-overview-game .clash-overview-game-content .clash-overview-game-data .clash-overview-game-data-no-data .clash-overview-game-data-background-upcoming { position: absolute; height: 100%; width: 100%; background-image: url("/fe/lol-clash/assets/images/overview/overview-period-bg-upcoming.png"); background-size: cover; } .clash-overview-game .clash-overview-game-content .clash-overview-game-text-container { position: absolute; width: 100%; text-align: center; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .clash-overview-game .clash-overview-game-top-frame { position: absolute; height: 24px; width: 100%; top: -3px; } .clash-overview-game .clash-overview-game-top-frame.grey { height: 7px; opacity: 0.5; } .clash-overview-game .clash-overview-game-bottom-frame { position: absolute; width: 100%; height: 7px; } .clash-overview-game .clash-overview-game-bottom-frame.grey { opacity: 0.5; } .clash-overview-stats-carousel { position: relative; width: 100%; height: 100%; } .clash-overview-stats-carousel .clash-overview-stats-carousel-content { height: 100%; width: 100%; min-height: 146px; margin-right: 25px; margin-left: 25px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } .clash-overview-stats-carousel .clash-overview-stats-carousel-divider { height: 146px; width: 3px; } .clash-overview-stat .clash-overview-stat-name, .clash-overview-stat .clash-overview-stat-num { font-family: var(--font-display); } .clash-overview-stat .clash-overview-stat-subtext, .clash-overview-stat .clash-overview-stat-recipient, .clash-overview-stat .clash-overview-stat-na { font-family: var(--font-body); } .clash-overview-stat .clash-overview-stat-name, .clash-overview-stat .clash-overview-stat-num, .clash-overview-stat .clash-overview-stat-subtext, .clash-overview-stat .clash-overview-stat-recipient, .clash-overview-stat .clash-overview-stat-na { -webkit-user-select: none; } .clash-overview-stat .clash-overview-stat-name, .clash-overview-stat .clash-overview-stat-num, .clash-overview-stat .clash-overview-stat-subtext, .clash-overview-stat .clash-overview-stat-recipient, .clash-overview-stat .clash-overview-stat-na { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-overview-stat .clash-overview-stat-name { text-transform: uppercase; } .clash-overview-stat .clash-overview-stat-name:lang(ko-kr), .clash-overview-stat .clash-overview-stat-name:lang(ja-jp), .clash-overview-stat .clash-overview-stat-name:lang(tr-tr), .clash-overview-stat .clash-overview-stat-name:lang(el-gr), .clash-overview-stat .clash-overview-stat-name:lang(th-th), .clash-overview-stat .clash-overview-stat-name:lang(zh-tw) { text-transform: none; } .clash-overview-stat .clash-overview-stat-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-overview-stat .clash-overview-stat-name:lang(ar-ae) { letter-spacing: 0; } .clash-overview-stat .clash-overview-stat-subtext, .clash-overview-stat .clash-overview-stat-recipient, .clash-overview-stat .clash-overview-stat-na { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-overview-stat .clash-overview-stat-subtext:lang(ar-ae), .clash-overview-stat .clash-overview-stat-recipient:lang(ar-ae), .clash-overview-stat .clash-overview-stat-na:lang(ar-ae) { letter-spacing: 0; } .clash-overview-stat .clash-overview-stat-num { background: linear-gradient(to bottom, #cdbe91 0%, #c8aa6e 35%, #765c29 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .clash-overview-stat .clash-overview-stat-num { font-size: 24px; font-weight: 700; font-style: italic; letter-spacing: 0.05em; } .clash-overview-stat .clash-overview-stat-num:lang(ar-ae) { letter-spacing: 0; } .clash-overview-stat .clash-overview-stat-subtext, .clash-overview-stat .clash-overview-stat-recipient, .clash-overview-stat .clash-overview-stat-na { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-overview-stat { height: 146px; width: 237px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } .clash-overview-stat .clash-overview-stat-name { margin: auto; width: 80%; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .clash-overview-stat .clash-overview-stat-subtext { color: #5b5a56; line-height: 30px; } .clash-overview-stat .clash-overview-stat-img { margin-top: 10px; height: 40px; width: 40px; } .clash-overview-stat .clash-overview-stat-recipient { margin-top: 10px; } .clash-overview-stat .clash-overview-stat-na { margin-top: 10px; color: #5b5a56; } .clash-missed-lockin-modal .clash-missed-lockin-modal-header { font-family: var(--font-display); } .clash-missed-lockin-modal .clash-missed-lockin-modal-description { font-family: var(--font-body); } .clash-missed-lockin-modal .clash-missed-lockin-modal-header, .clash-missed-lockin-modal .clash-missed-lockin-modal-description { -webkit-user-select: none; } .clash-missed-lockin-modal .clash-missed-lockin-modal-header, .clash-missed-lockin-modal .clash-missed-lockin-modal-description { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-missed-lockin-modal .clash-missed-lockin-modal-header { text-transform: uppercase; } .clash-missed-lockin-modal .clash-missed-lockin-modal-header:lang(ko-kr), .clash-missed-lockin-modal .clash-missed-lockin-modal-header:lang(ja-jp), .clash-missed-lockin-modal .clash-missed-lockin-modal-header:lang(tr-tr), .clash-missed-lockin-modal .clash-missed-lockin-modal-header:lang(el-gr), .clash-missed-lockin-modal .clash-missed-lockin-modal-header:lang(th-th), .clash-missed-lockin-modal .clash-missed-lockin-modal-header:lang(zh-tw) { text-transform: none; } .clash-missed-lockin-modal .clash-missed-lockin-modal-header { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-missed-lockin-modal .clash-missed-lockin-modal-header:lang(ar-ae) { letter-spacing: 0; } .clash-missed-lockin-modal .clash-missed-lockin-modal-description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .clash-missed-lockin-modal .clash-missed-lockin-modal-description:lang(ja-jp) { font-size: 13px; } .clash-missed-lockin-modal .clash-missed-lockin-modal-description:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-missed-lockin-modal { padding: 18px 40px 0px; background-image: url("/fe/lol-clash/assets/images/background/background-default.jpg"); background-size: contain; cursor: default; } .clash-missed-lockin-modal .clash-missed-lockin-modal-day-planner { position: relative; margin: 42px 0; } .clash-missed-lockin-modal .clash-missed-lockin-modal-day-planner-bottom-border { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.22) 50%, transparent); } .clash-missed-lockin-modal .clash-missed-lockin-modal-description { margin-bottom: 18px; } .clash-missed-lockin-modal .clash-missed-lockin-modal-bracket-times-container { width: 100%; display: flex; justify-content: space-around; } .clash-missed-lockin-modal .clash-missed-lockin-modal-bracket-time { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 80px; } .clash-missed-lockin-modal .clash-missed-lockin-modal-bracket-time.previous-phase { opacity: 0.45; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .component-factory-application.TicketSelector { direction: ltr ; } .clash-ticket-selector { position: absolute; height: 100%; width: 100%; transform: translate(-100%, -50%) ; } .clash-ticket-selector .clash-ticket-selector-backdrop { position: absolute; height: 100%; width: 100%; background-image: url("/fe/lol-clash/assets/images/ticket-selector/selector-background.png"); transform: none ; } .clash-ticket-selector .clash-ticket-selector-container { position: relative; height: 100%; width: 100%; } .clash-ticket-selector .clash-ticket-selector-container .clash-ticket-selector-contents { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; overflow: hidden; } .clash-ticket-selector .clash-ticket-selector-container .clash-ticket-selector-contents .clash-ticket-selector-background-container { position: absolute; width: 232px; height: 232px; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-mask-image: url("/fe/lol-clash/assets/images/ticket-selector/tick-marks-mask.png"); -webkit-mask-size: cover; } .clash-ticket-selector .clash-ticket-selector-container .clash-ticket-selector-contents .clash-ticket-selector-background-container .clash-ticket-selector-background { height: 100%; width: 100%; background-image: url("/fe/lol-clash/assets/images/ticket-selector/tick-marks-full.png"); background-size: cover; -webkit-animation: clash-spin 30s linear infinite; } .clash-ticket-selector .clash-ticket-selector-container .clash-ticket-selector-contents .clash-ticket-element { width: 78px; height: 78px; opacity: 0; } .clash-ticket-selector .clash-ticket-selector-container .clash-ticket-selector-contents .clash-ticket-element .clash-ticket-flyout { position: absolute; top: 0; height: 100%; width: 100%; opacity: 0; } .clash-ticket-selector .clash-ticket-selector-container .clash-ticket-selector-contents .clash-ticket-select-close-button { height: 34px; width: 34px; } .clash-ticket-selector-element .clash-ticket-title, .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay { font-family: var(--font-display); } .clash-ticket-selector-element .clash-ticket-bottom-container { font-family: var(--font-body); } .clash-ticket-selector-element .clash-ticket-title, .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay, .clash-ticket-selector-element .clash-ticket-bottom-container { -webkit-user-select: none; } .clash-ticket-selector-element .clash-ticket-title, .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay, .clash-ticket-selector-element .clash-ticket-bottom-container { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-ticket-selector-element .clash-ticket-title, .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay { text-transform: uppercase; } .clash-ticket-selector-element .clash-ticket-title:lang(ko-kr), .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay:lang(ko-kr), .clash-ticket-selector-element .clash-ticket-title:lang(ja-jp), .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay:lang(ja-jp), .clash-ticket-selector-element .clash-ticket-title:lang(tr-tr), .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay:lang(tr-tr), .clash-ticket-selector-element .clash-ticket-title:lang(el-gr), .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay:lang(el-gr), .clash-ticket-selector-element .clash-ticket-title:lang(th-th), .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay:lang(th-th), .clash-ticket-selector-element .clash-ticket-title:lang(zh-tw), .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay:lang(zh-tw) { text-transform: none; } .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay:lang(ar-ae) { letter-spacing: 0; } .clash-ticket-selector-element .clash-ticket-title { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-ticket-selector-element .clash-ticket-title:lang(ar-ae) { letter-spacing: 0; } .clash-ticket-selector-element .clash-ticket-bottom-container { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-ticket-selector-element .clash-ticket-bottom-container:lang(ja-jp) { font-size: 13px; } .clash-ticket-selector-element .clash-ticket-bottom-container:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-ticket-selector-element { position: relative; height: 100%; width: 100%; } .clash-ticket-selector-element .clash-ticket-container { height: 100%; width: 100%; } .clash-ticket-selector-element .clash-ticket-description-container { position: absolute; display: flex; flex-direction: column; top: 23px; width: 140px; } .clash-ticket-selector-element .clash-ticket-description-container.right { text-align: left; left: 100%; } .clash-ticket-selector-element .clash-ticket-description-container.left { text-align: right; left: -140px; } .clash-ticket-selector-element .clash-ticket-description-container.hidden { opacity: 0; } .clash-ticket-selector-element .clash-ticket-title { direction: ltr; color: #f0e6d2; width: 100%; } .clash-ticket-selector-element .clash-ticket-subtitle { width: 100%; font-size: 11px; } .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay { position: absolute; top: 0; left: 1px; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #f0e6d2; opacity: 1; pointer-events: none; } .clash-ticket-selector-element .clash-ticket-zero-tickets-overlay.hidden { opacity: 0; } .clash-ticket-selector-element .clash-ticket-bottom-container { direction: ltr; position: absolute; width: 100%; text-align: center; margin-top: -8px; } .clash-ticket-selector-element .clash-ticket-bottom-container .clash-ticket-bottom-image { height: 10px; width: 12px; margin: auto; } .clash-ticket-selector-element .clash-ticket-bottom-container.hidden { opacity: 0; } .clash-ticket-selector-element .clash-ticket-bottom-container.underline { text-decoration: underline; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name { font-family: var(--font-display); } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .description { font-family: var(--font-body); } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .description, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name { -webkit-user-select: none; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .description, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag, .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name { text-transform: uppercase; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name:lang(ko-kr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo:lang(ko-kr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag:lang(ko-kr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name:lang(ko-kr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name:lang(ja-jp), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo:lang(ja-jp), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag:lang(ja-jp), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name:lang(ja-jp), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name:lang(tr-tr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo:lang(tr-tr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag:lang(tr-tr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name:lang(tr-tr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name:lang(el-gr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo:lang(el-gr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag:lang(el-gr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name:lang(el-gr), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name:lang(th-th), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo:lang(th-th), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag:lang(th-th), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name:lang(th-th), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name:lang(zh-tw), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo:lang(zh-tw), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag:lang(zh-tw), .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name:lang(zh-tw) { text-transform: none; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag:lang(ar-ae) { letter-spacing: 0; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name:lang(ar-ae) { letter-spacing: 0; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name.logo:lang(ar-ae) { letter-spacing: 0; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name:lang(ar-ae) { letter-spacing: 0; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .description { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .description:lang(ja-jp) { font-size: 13px; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .description:lang(ar-ae) { letter-spacing: 0; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-awards-tooltip lol-uikit-tooltip { min-width: 320px; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container { width: 100%; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .top-content { display: flex; justify-content: center; align-items: center; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .top-content .collectible-name { flex-grow: 1; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .name { display: inline; white-space: nowrap; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .description { margin-top: 3px; color: #a09b8c; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container { display: flex; flex-direction: row; justify-content: center; margin-top: 12px; height: 36px; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container.separator { border-top: thin solid #785a28; padding-top: 16px; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-logo { flex-shrink: 1; position: relative; margin-right: 5px; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-logo .clash-awards-team-logo-img { height: 36px; width: 36px; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag { color: #c8aa6e; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tag.clickable { cursor: pointer; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-vertical-separator { width: 1px; background: #785a28; margin: 1px 8px; height: 100%; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-name { color: #f0e6d2; max-width: 370px; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .team-info-container .clash-awards-team-tier { display: flex; margin: 0 10px 0 0 ; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .info-container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 12px; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .info-container.separator { border-top: thin solid #785a28; padding-top: 16px; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .info-container .row { margin-top: 8px; } .clash-awards-tooltip lol-uikit-tooltip .clash-awards-tooltip-container .info-container .description p { font-size: 13px; } .clash-pending-lft-requests-modal .clash-pending-lft-requests-header { font-family: var(--font-display); } .clash-pending-lft-requests-modal .clash-pending-lft-requests-header { -webkit-user-select: none; } .clash-pending-lft-requests-modal .clash-pending-lft-requests-header { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-pending-lft-requests-modal .clash-pending-lft-requests-header { text-transform: uppercase; } .clash-pending-lft-requests-modal .clash-pending-lft-requests-header:lang(ko-kr), .clash-pending-lft-requests-modal .clash-pending-lft-requests-header:lang(ja-jp), .clash-pending-lft-requests-modal .clash-pending-lft-requests-header:lang(tr-tr), .clash-pending-lft-requests-modal .clash-pending-lft-requests-header:lang(el-gr), .clash-pending-lft-requests-modal .clash-pending-lft-requests-header:lang(th-th), .clash-pending-lft-requests-modal .clash-pending-lft-requests-header:lang(zh-tw) { text-transform: none; } .clash-pending-lft-requests-modal .clash-pending-lft-requests-header { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .clash-pending-lft-requests-modal .clash-pending-lft-requests-header:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-pending-lft-requests-modal { height: 450px; } .clash-pending-lft-requests-modal .clash-pending-lft-requests-header { margin: 6px 0 0 16px; } .clash-pending-lft-requests-modal .clash-pending-lft-requests-container { height: 100%; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag, .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name { font-family: var(--font-display); } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag, .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name { -webkit-user-select: none; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag, .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag, .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name { text-transform: uppercase; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag:lang(ko-kr), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name:lang(ko-kr), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag:lang(ja-jp), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name:lang(ja-jp), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag:lang(tr-tr), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name:lang(tr-tr), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag:lang(el-gr), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name:lang(el-gr), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag:lang(th-th), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name:lang(th-th), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag:lang(zh-tw), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name:lang(zh-tw) { text-transform: none; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag, .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag:lang(ar-ae), .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-name:lang(ar-ae) { letter-spacing: 0; } .center-in-parent, .uikit-video-center-in-parent video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clash-lottie-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } @-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; } } .clash-pending-lft-requests-entry { display: flex; align-items: center; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-logo-container { margin: 10px 18px 10px 0; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-logo-container .clash-pending-lft-requests-logo-image { height: 50px; width: 50px; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container { min-width: 80px; margin: 0 16px 10px 0; display: flex; flex-direction: column; flex-grow: 1; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper { display: flex; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tag-name-wrapper .clash-team-tag { color: #c8aa6e; margin-bottom: 3px; margin-right: 3px; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-name-container .clash-team-tier { display: inherit; } .clash-pending-lft-requests-entry .clash-pending-lft-requests-cancel-button { height: 16px; width: 16px; margin-right: 8px; } .rcp-fe-lol-clash-full-sub-nav { -webkit-user-select: none; position: absolute; top: 79px; left: 35px; } .rcp-fe-lol-clash-full-sub-nav lol-uikit-navigation-item { margin-top: 9px; }