.lol-tooltip-component { display: none; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm { text-transform: uppercase; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ko-kr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(ja-jp), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(tr-tr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(el-gr), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(th-th), .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm:lang(zh-tw) { text-transform: none; } .decorated-footer { width: 100%; display: flex; flex-direction: row; justify-content: center; padding: 0 0 1px; height: 50px; box-sizing: border-box; } .decorated-footer .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; padding-bottom: 15px; } .decorated-footer .confirm-button-container lol-uikit-primary-magic-button.confirm { display: flex; min-width: 160px; pointer-events: auto; } .decorated-footer .button-img { width: 30px; height: 30px; background-size: contain; background-color: transparent; border: 0px; outline: 0px; } .decorated-footer .button-img.close { background-image: url(/fe/lol-npe-who-to-play/button_close.png); } .decorated-footer .button-img.close:hover { background-image: url(/fe/lol-npe-who-to-play/button_close_hover.png); } .decorated-footer .button-img.close:active { background-image: url(/fe/lol-npe-who-to-play/button_close_click.png); } .decorated-footer .button-img.close:disabled { background-image: url(/fe/lol-npe-who-to-play/button_close_inactive.png); } .decorated-footer .decorated-footer-decoration { display: flex; position: relative; flex: 1 1 auto; height: 34px; margin-top: 15px; } .decorated-footer .decorated-footer-decoration.decorated-footer-left .button { position: absolute; top: -13px; right: 2px; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { font-family: var(--font-display); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { -webkit-user-select: none; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { text-transform: uppercase; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ko-kr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(ja-jp), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(tr-tr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(el-gr), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(th-th), .arrow-footer[version="7.13"] .confirm-button-container button.confirm:lang(zh-tw) { text-transform: none; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { color: #c8aa6e; font-size: 14px; font-weight: 700; letter-spacing: 0.0325em; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover { color: #f0e6d2; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:disabled, .arrow-footer[version="7.13"] .confirm-button-container button.confirm:disabled:hover, .arrow-footer[version="7.13"] .confirm-button-container button.confirm[disabled='true'], .arrow-footer[version="7.13"] .confirm-button-container button.confirm[disabled='true']:hover { color: #5c5b57; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active { color: #785a28; } .arrow-footer[version="7.13"] { width: 100%; display: flex; flex-direction: row; justify-content: center; padding: 0 0 1px; height: 51px; box-sizing: border-box; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm { margin-left: 0px; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm .left-confirm { background-image: url(/fe/lol-npe-who-to-play/LeftStraightDefault.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-npe-who-to-play/LeftStraightHover.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-npe-who-to-play/LeftStraightClick.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-npe-who-to-play/LeftStraightDisabled.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-npe-who-to-play/LeftStraightCompleted.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container button.close { display: none; } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container .border-bg .left-border-bg { background-image: url(/fe/lol-npe-who-to-play/BGLeftStraight.png); } .arrow-footer[version="7.13"].hide-close-button .confirm-button-container .border-bg .middle-border-bg { margin: 0 7px; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration { flex-direction: column; justify-content: center; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child { background-size: 100% 100%; width: 256px; height: 8px; } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child.arrow-footer-decoration-left { margin-right: 50px; align-self: flex-end; background-image: url(/fe/lol-npe-who-to-play/FooterMetalDecorationLeft.png); } .arrow-footer[version="7.13"].hide-close-button .arrow-footer-decoration .arrow-footer-decoration-child.arrow-footer-decoration-right { margin-left: 50px; align-self: flex-start; background-image: url(/fe/lol-npe-who-to-play/FooterMetalDecorationRight.png); } .arrow-footer[version="7.13"] .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; } .arrow-footer[version="7.13"] .confirm-button-container .border-bg { position: absolute; width: 100%; height: 44px; display: flex; top: -5px; } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .left-border-bg { height: 44px; width: 29px; position: absolute; top: 0px; left: -6px; background-size: 100% 100%; background-image: url(/fe/lol-npe-who-to-play/BGLeft.png); } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .middle-border-bg { flex-grow: 1; height: 44px; margin: 0px 12px; background-size: contain; background-image: url(/fe/lol-npe-who-to-play/BGMid.png); } .arrow-footer[version="7.13"] .confirm-button-container .border-bg .right-border-bg { height: 44px; width: 26px; position: absolute; top: 0; right: -6px; background-size: 100% 100%; background-image: url(/fe/lol-npe-who-to-play/BGRight.png); } .arrow-footer[version="7.13"] .confirm-button-container button { border: 0; outline: 0; padding: 0; background-color: transparent; cursor: pointer; } .arrow-footer[version="7.13"] .confirm-button-container button.disabled { cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm { height: 34px; min-width: 170px; margin-left: 29px; padding-right: 1px; color: #a3c7c7; position: relative; display: flex; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm > div { background-size: 100% 100%; height: 34px; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .left-confirm { width: 12px; background-image: url(/fe/lol-npe-who-to-play/LeftDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm { display: flex; justify-content: center; align-items: center; flex-grow: 1; padding: 0px 10px; background-repeat: repeat-x; background-image: url(/fe/lol-npe-who-to-play/MidDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .middle-confirm:lang(ar-ae) { direction: rtl; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm .right-confirm { width: 17px; background-image: url(/fe/lol-npe-who-to-play/RightDefault.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .left-confirm { background-image: url(/fe/lol-npe-who-to-play/LeftHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .middle-confirm { background-image: url(/fe/lol-npe-who-to-play/MidHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:hover .right-confirm { background-image: url(/fe/lol-npe-who-to-play/RightHover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active { color: #005a82; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .left-confirm { background-image: url(/fe/lol-npe-who-to-play/LeftClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .middle-confirm { background-image: url(/fe/lol-npe-who-to-play/MidClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm:active .right-confirm { background-image: url(/fe/lol-npe-who-to-play/RightClick.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled { color: #5c5b57; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .left-confirm { background-image: url(/fe/lol-npe-who-to-play/LeftDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .middle-confirm { background-image: url(/fe/lol-npe-who-to-play/MidDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.disabled .right-confirm { background-image: url(/fe/lol-npe-who-to-play/RightDisabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed { color: #c89b3c; cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .left-confirm { background-image: url(/fe/lol-npe-who-to-play/LeftCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .middle-confirm { background-image: url(/fe/lol-npe-who-to-play/MidCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.confirm.completed .right-confirm { background-image: url(/fe/lol-npe-who-to-play/RightCompleted.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close { width: 34px; height: 34px; background-size: contain; position: absolute; left: 0px; background-image: url(/fe/lol-npe-who-to-play/Normal.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close .close-icon { height: 34px; width: 34px; background-size: 18px; background-repeat: no-repeat; background-position: center; background-image: url(/fe/lol-npe-who-to-play/Exit_Default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close[type="back"] .close-icon { background-image: url(/fe/lol-npe-who-to-play/Back_default.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover { background-image: url(/fe/lol-npe-who-to-play/Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover .close-icon { background-image: url(/fe/lol-npe-who-to-play/Exit_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:hover[type="back"] .close-icon { background-image: url(/fe/lol-npe-who-to-play/Back_Hover.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active { background-image: url(/fe/lol-npe-who-to-play/Clicked.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active .close-icon { background-image: url(/fe/lol-npe-who-to-play/Exit_Click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close:active[type="back"] .close-icon { background-image: url(/fe/lol-npe-who-to-play/Back_click.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled { background-image: url(/fe/lol-npe-who-to-play/Disabled.png); cursor: default; } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled .close-icon { background-image: url(/fe/lol-npe-who-to-play/Exit_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.disabled[type="back"] .close-icon { background-image: url(/fe/lol-npe-who-to-play/Back_Disabled.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed { cursor: default; background-image: url(/fe/lol-npe-who-to-play/Completed.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed .close-icon { background-image: url(/fe/lol-npe-who-to-play/Checkmark.png); } .arrow-footer[version="7.13"] .confirm-button-container button.close.completed[type="back"] .close-icon { background-image: url(/fe/lol-npe-who-to-play/Checkmark.png); } .arrow-footer[version="7.13"] .arrow-footer-decoration { display: flex; position: relative; flex: 1 1 auto; height: 34px; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button, .basic-footer .confirm-button-container lol-uikit-flat-button { text-transform: uppercase; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ko-kr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(ko-kr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(ja-jp), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(ja-jp), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(tr-tr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(tr-tr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(el-gr), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(el-gr), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(th-th), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(th-th), .basic-footer .confirm-button-container lol-uikit-primary-magic-button:lang(zh-tw), .basic-footer .confirm-button-container lol-uikit-flat-button:lang(zh-tw) { text-transform: none; } .basic-footer { padding-left: 34px; padding-right: 35px; } .basic-footer { width: 100%; display: flex; flex-direction: row; justify-content: center; height: 48px; box-sizing: border-box; } .basic-footer .confirm-button-container { position: relative; display: flex; flex-direction: row; justify-content: center; flex-grow: 1; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button, .basic-footer .confirm-button-container lol-uikit-flat-button { display: flex; min-width: 160px; pointer-events: auto; margin-left: 10px; } .basic-footer .confirm-button-container lol-uikit-primary-magic-button:last-child, .basic-footer .confirm-button-container lol-uikit-flat-button:last-child { margin-right: 10px; } .basic-footer .confirm-button-container::after, .basic-footer .confirm-button-container::before { display: flex; border-top: 1px solid #785a28; margin-top: 16px; height: 1px; flex-grow: 1; content: " "; } .media-fader { position: absolute; top: 0; } .media-fader .media-fader-asset { -webkit-user-drag: none; } .media-swapper { position: relative; } .rcp-fe-lol-npe-who-to-play { cursor: default; position: absolute; width: 1055px; height: 718px; } .rcp-fe-lol-npe-who-to-play.loading { pointer-events: none; } .rcp-fe-lol-npe-who-to-play .loading-spinner { top: calc(50% - 25px); left: calc(50% - 25px); } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header { font-family: var(--font-display); } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-subheader { font-family: var(--font-body); } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header, .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-subheader { -webkit-user-select: none; } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header, .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-subheader { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header { text-transform: uppercase; } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header:lang(ko-kr), .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header:lang(ja-jp), .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header:lang(tr-tr), .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header:lang(el-gr), .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header:lang(th-th), .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-header { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-subheader { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-subheader:lang(ja-jp) { font-size: 13px; } .rcp-fe-lol-npe-who-to-play-content-container { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; } .rcp-fe-lol-npe-who-to-play-content-container .npe-who-to-play-content { pointer-events: initial; } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup { position: absolute; height: 100px; width: 400px; top: 158px; left: 40px; } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-icon { background-image: url("/fe/lol-npe-who-to-play/images/who-to-play-icon.png"); background-repeat: no-repeat; background-size: contain; height: 60px; width: 60px; float: left; } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container { width: 325px; float: right; } .rcp-fe-lol-npe-who-to-play-content-container .who-to-play-title-lockup .champion-list-title-container .champion-list-title-subheader { padding-top: 4px; } .rcp-fe-lol-npe-who-to-play-champ-grid { position: absolute; top: 282px; left: 115px; display: flex; flex-wrap: wrap; width: 350px; height: 263px; } .rcp-fe-lol-npe-who-to-play-champ-grid-item { width: 65px; height: 122px; margin: 0 45px 19px 0; } .rcp-fe-lol-npe-who-to-play-champ-grid-item .border { box-sizing: content-box; margin-left: -1px; margin-top: -1px; } .rcp-fe-lol-npe-who-to-play-champ-grid-item .border.selected { border-image-source: linear-gradient(to top, #785a28 0%, #c8aa6e 100%); border-image-slice: 2; border-image-width: 2px; border-width: 2px; margin-left: -2px; margin-top: -2px; } .rcp-fe-lol-npe-who-to-play-champ-grid-item .border:not(.selected):hover { border-color: #785a28; } .rcp-fe-lol-npe-who-to-play-champ-detail-switcher { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; } .rcp-fe-lol-npe-who-to-play-champ-detail h3, .rcp-fe-lol-npe-who-to-play-champ-detail h4, .rcp-fe-lol-npe-who-to-play-champ-detail h5 { font-family: var(--font-display); } .rcp-fe-lol-npe-who-to-play-champ-detail .text-m { font-family: var(--font-body); } .rcp-fe-lol-npe-who-to-play-champ-detail h3, .rcp-fe-lol-npe-who-to-play-champ-detail h4, .rcp-fe-lol-npe-who-to-play-champ-detail h5, .rcp-fe-lol-npe-who-to-play-champ-detail .text-m { -webkit-user-select: none; } .rcp-fe-lol-npe-who-to-play-champ-detail h3, .rcp-fe-lol-npe-who-to-play-champ-detail h4, .rcp-fe-lol-npe-who-to-play-champ-detail h5, .rcp-fe-lol-npe-who-to-play-champ-detail .text-m { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .rcp-fe-lol-npe-who-to-play-champ-detail h3, .rcp-fe-lol-npe-who-to-play-champ-detail h4, .rcp-fe-lol-npe-who-to-play-champ-detail h5 { text-transform: uppercase; } .rcp-fe-lol-npe-who-to-play-champ-detail h3:lang(ko-kr), .rcp-fe-lol-npe-who-to-play-champ-detail h4:lang(ko-kr), .rcp-fe-lol-npe-who-to-play-champ-detail h5:lang(ko-kr), .rcp-fe-lol-npe-who-to-play-champ-detail h3:lang(ja-jp), .rcp-fe-lol-npe-who-to-play-champ-detail h4:lang(ja-jp), .rcp-fe-lol-npe-who-to-play-champ-detail h5:lang(ja-jp), .rcp-fe-lol-npe-who-to-play-champ-detail h3:lang(tr-tr), .rcp-fe-lol-npe-who-to-play-champ-detail h4:lang(tr-tr), .rcp-fe-lol-npe-who-to-play-champ-detail h5:lang(tr-tr), .rcp-fe-lol-npe-who-to-play-champ-detail h3:lang(el-gr), .rcp-fe-lol-npe-who-to-play-champ-detail h4:lang(el-gr), .rcp-fe-lol-npe-who-to-play-champ-detail h5:lang(el-gr), .rcp-fe-lol-npe-who-to-play-champ-detail h3:lang(th-th), .rcp-fe-lol-npe-who-to-play-champ-detail h4:lang(th-th), .rcp-fe-lol-npe-who-to-play-champ-detail h5:lang(th-th), .rcp-fe-lol-npe-who-to-play-champ-detail h3:lang(zh-tw), .rcp-fe-lol-npe-who-to-play-champ-detail h4:lang(zh-tw), .rcp-fe-lol-npe-who-to-play-champ-detail h5:lang(zh-tw) { text-transform: none; } .rcp-fe-lol-npe-who-to-play-champ-detail h3 { color: #f0e6d2; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.05em; } .rcp-fe-lol-npe-who-to-play-champ-detail h4 { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .rcp-fe-lol-npe-who-to-play-champ-detail h5 { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .rcp-fe-lol-npe-who-to-play-champ-detail .text-m { color: #a09b8c; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: 0.025em; -webkit-font-smoothing: subpixel-antialiased; } .rcp-fe-lol-npe-who-to-play-champ-detail { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-overlay { position: absolute; height: 190px; width: 546px; top: 480px; left: 458px; padding: 0 18px; } .rcp-fe-lol-npe-who-to-play-champ-detail h3 { margin: 0; } .rcp-fe-lol-npe-who-to-play-champ-detail h4 { margin: 0; } .rcp-fe-lol-npe-who-to-play-champ-detail h5 { margin: 0; } .rcp-fe-lol-npe-who-to-play-champ-detail .text-m { color: #f0e6d2; } .rcp-fe-lol-npe-who-to-play-champ-detail .champion-lockup { display: flex; margin-bottom: 8px; border-bottom: 1px solid #1e282d; } .rcp-fe-lol-npe-who-to-play-champ-detail .champion-role-icon { background-repeat: no-repeat; background-size: contain; height: 48px; width: 48px; border: 8px solid transparent; margin-right: 10px; } .rcp-fe-lol-npe-who-to-play-champ-detail .champion-role-icon.assassin { background-image: url("/fe/lol-npe-who-to-play/images/role-icon-assassin.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .champion-role-icon.fighter { background-image: url("/fe/lol-npe-who-to-play/images/role-icon-fighter.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .champion-role-icon.mage { background-image: url("/fe/lol-npe-who-to-play/images/role-icon-mage.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .champion-role-icon.marksman { background-image: url("/fe/lol-npe-who-to-play/images/role-icon-marksman.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .champion-role-icon.support { background-image: url("/fe/lol-npe-who-to-play/images/role-icon-support.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .champion-role-icon.tank { background-image: url("/fe/lol-npe-who-to-play/images/role-icon-tank.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .champion-lockup-text { display: flex; flex-direction: column; justify-content: center; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-container { display: flex; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-container h5 { margin-bottom: 2px; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-mastery { width: 50%; display: flex; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-mastery-icon { height: 40px; width: 40px; border: 12px solid transparent; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-mastery-level { height: 100%; display: flex; align-items: center; justify-content: center; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-mastery-text { display: flex; flex-direction: column; justify-content: center; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-mastery-points { display: flex; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-mastery-points-icon { background-image: url("/fe/lol-npe-who-to-play/images/icon-champ-mastery.png"); background-repeat: no-repeat; background-size: contain; height: 18px; width: 18px; margin-right: 8px; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-position { width: 50%; display: flex; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-position-icon { background-repeat: no-repeat; background-size: contain; height: 32px; width: 32px; border: 16px solid transparent; } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-position-icon.top { background-image: url("/fe/lol-npe-who-to-play/images/position-top.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-position-icon.jungle { background-image: url("/fe/lol-npe-who-to-play/images/position-jungle.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-position-icon.middle { background-image: url("/fe/lol-npe-who-to-play/images/position-middle.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-position-icon.bottom { background-image: url("/fe/lol-npe-who-to-play/images/position-bottom.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-position-icon.support { background-image: url("/fe/lol-npe-who-to-play/images/position-support.png"); } .rcp-fe-lol-npe-who-to-play-champ-detail .detail-position-text { display: flex; flex-direction: column; justify-content: center; } .rcp-fe-lol-npe-who-to-play-champ-detail .abilities-button { height: 50px; display: flex; justify-content: center; align-items: center; } .rcp-fe-lol-npe-who-to-play-champ-detail .abilities-button div { box-sizing: border-box; flex: 0 0 calc(100% / 3); } .rcp-fe-lol-npe-who-to-play-champ-detail .abilities-button-left-border { background-image: url("/fe/lol-npe-who-to-play/images/button-metal-l.png"); background-repeat: no-repeat; background-size: contain; height: 100%; } .rcp-fe-lol-npe-who-to-play-champ-detail .abilities-button-right-border { background-image: url("/fe/lol-npe-who-to-play/images/button-metal-r.png"); background-repeat: no-repeat; background-size: contain; background-position: right; height: 100%; } .rcp-fe-lol-npe-who-to-play-champ-detail .abilities-button-container { padding: 0 10px; align-self: flex-end; } .rcp-fe-lol-npe-who-to-play-page-backdrop { width: 100%; height: 100%;     } .rcp-fe-lol-npe-who-to-play-page-backdrop .art-mask { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; -webkit-mask: url("/fe/lol-npe-who-to-play/images/backdrop-mask.png") 50% 50%/100% 100% no-repeat; } .rcp-fe-lol-npe-who-to-play-page-backdrop .art-mask .champion-splash-art { position: absolute; top: 0; left: -5%; width: auto; height: auto; opacity: 0.75; } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-pin-placeholder { position: absolute; width: 46px; height: 62px; bottom: 0px; left: -23px; } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-pin-suggested { background-image: url("/fe/lol-npe-who-to-play/images/pin-suggested.png"); position: absolute; width: 66px; height: 116px; bottom: 0px; left: -33px; } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-pin-suggested .position-pin-portrait-wrapper { border-radius: 50%; width: 56px; height: 56px; margin: 4px 5px; overflow: hidden; } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-pin-suggested .position-pin-portrait-wrapper .champion-portait { width: 64px; margin-left: -4px; margin-top: -4px; } .rcp-fe-lol-npe-who-to-play-page-backdrop .map-positions-container { position: absolute; top: 180px; left: 460px; height: 300px; width: 540px; } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-top { position: relative; top: 64px; left: 113px; height: 0px; width: 0px; } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-top .position-pin-placeholder { background-image: url("/fe/lol-npe-who-to-play/images/pin-placeholder-top.png"); } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-middle { position: relative; top: 156px; left: 263px; height: 0px; width: 0px; } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-middle .position-pin-placeholder { background-image: url("/fe/lol-npe-who-to-play/images/pin-placeholder-middle.png"); } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-bottom { position: relative; top: 270px; left: 500px; height: 0px; width: 0px; } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-bottom .position-pin-placeholder { background-image: url("/fe/lol-npe-who-to-play/images/pin-placeholder-bottom.png"); } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-support { position: relative; top: 250px; left: 447px; height: 0px; width: 0px; } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-support .position-pin-placeholder { background-image: url("/fe/lol-npe-who-to-play/images/pin-placeholder-support.png"); } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-jungle { position: relative; top: 225px; left: 295px; height: 0px; width: 0px; } .rcp-fe-lol-npe-who-to-play-page-backdrop .position-jungle .position-pin-placeholder { background-image: url("/fe/lol-npe-who-to-play/images/pin-placeholder-jungle.png"); } .rcp-fe-lol-npe-who-to-play-page-backdrop .sr-map-backdrop { width: 100%; height: 100%; } .rcp-fe-lol-npe-who-to-play-page-backdrop .suggested-position-top { background-image: url("/fe/lol-npe-who-to-play/images/sr-map-top.png"); } .rcp-fe-lol-npe-who-to-play-page-backdrop .suggested-position-top .position-pin-placeholder.position-top { display: none; } .rcp-fe-lol-npe-who-to-play-page-backdrop .suggested-position-middle { background-image: url("/fe/lol-npe-who-to-play/images/sr-map-middle.png"); } .rcp-fe-lol-npe-who-to-play-page-backdrop .suggested-position-middle .position-pin-placeholder.position-middle { display: none; } .rcp-fe-lol-npe-who-to-play-page-backdrop .suggested-position-bottom { background-image: url("/fe/lol-npe-who-to-play/images/sr-map-bottom.png"); } .rcp-fe-lol-npe-who-to-play-page-backdrop .suggested-position-bottom .position-pin-placeholder.position-bottom { display: none; } .rcp-fe-lol-npe-who-to-play-page-backdrop .suggested-position-support { background-image: url("/fe/lol-npe-who-to-play/images/sr-map-bottom.png"); } .rcp-fe-lol-npe-who-to-play-page-backdrop .suggested-position-support .position-pin-placeholder.position-support { display: none; } .rcp-fe-lol-npe-who-to-play-page-backdrop .suggested-position-jungle { background-image: url("/fe/lol-npe-who-to-play/images/sr-map-top.png"); } .rcp-fe-lol-npe-who-to-play-page-backdrop .suggested-position-jungle .position-pin-placeholder.position-jungle { display: none; }