.cf-button, .cf-button-reverse { display: block; height: 60px; width: 100%; max-width: 300px; margin: 0 auto; padding: 0 19px; border: 1px solid transparent; border-radius: 3px; box-sizing: border-box; background-color: #008A00; font-weight: 400; font-size: 20px; color: #fff; line-height: 58px; text-align: center; cursor: pointer; transition: .2s; } .cf-button-reverse { border-color: #008A00; color: #008A00; background-color: transparent; } .cf-button:hover, .cf-button-reverse:hover { background-color: #29b344; } .cf-button-reverse:hover { border-color: #29b344; color: #fff; } .cf-button:active, .cf-button-reverse:active { background-color: #23993a; } .cf-button-reverse:active { border-color: #23993a; color: #fff; } .cf-button, .cf-button-reverse { user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; } html.webview #wrapper { margin-bottom: 0; } #menu-flair, #menu-nickname-content > img, #menu-nickname-content > span, #menu-info-button > span, #menu-info-button-profile > span, .menu-statistic-item-header > span, .menu-statistic-item-header > a, .menu-statistic-item-content-button, #menu-links > div > span, #menu-links > a > div, #menu-links > span > a, #content-info-remain-header, #content-info-remain-content-button, #content-wrapper-gifts > h3 > label, #content-wrapper-gifts > h3 > div, .gift-item > img, #wrapper-xpbacks-none > a, #wrapper-xpbacks-none > span > a, #content-wrapper-friends > h3 > label, #content-wrapper-friends > h3 > div > span, #content-friends-tail > h3 > label, .button-friends-seeall, .friend-item-nickname > a, .friend-item-avatar > img, .friend-item-flair, #content-wrapper-tippers > h3 > label, #content-wrapper-tippers > h3 > div > span, #content-tippers-tail > h3 > label, .tipper-item-nickname > a, .tipper-item-avatar > img, .tipper-item-flair, .content-header-button > span, .content-subscription-item-subscribe > a, .gift-item > img, .gift-item-link, .gift-item-xp > span, #content-autocharge-header > a, #content-autocharge-header-status > span, #content-share-header-input-copy, #content-share-header-buttons > * > span, #content-settings-header-labels > label, .content-settings-inner-checkbox > input[type="checkbox"] + label, .settings-save-button, .content-settings-modal-buttons > span, #settings-information-email-update > span, #settings-information-email-init > span:first-child, #menu-nickname-settings-content-color > span, #menu-nickname-settings-content-flair > span, #menu-nickname-settings-content-flairs > div > img, #menu-nickname-settings-content-buttons > span, #content-settings-inner-premium-nickname > div > span, #content-settings-inner-premium-content > h3 > a, #content-settings-inner-premium-thumbnails > div > img, #content-settings-inner-premium-preview > img, #content-settings-inner-room-nickname > div > span, #content-settings-inner-room-nickname > h3 > a, .settings-room-button, .settings-room-text > span[onclick], #avataruploader > h1 > span, #avataruploader-labels > label, #avataruploader-interface-snapshot-buttons > div > *, #avataruploader-interface-file-buttons > div > *, #avataruploader-error > div > div, #content-visits-upgrade-data > div > a { user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; } div[id^="div-gpt-ad"] { padding: 0; } *[tabindex] { outline: none; } html { min-width: 380px; } html.webview { min-width: 320px; } input[type="text"] { outline: none; } body.wait, body.wait * { cursor: wait !important; } #wrapper { position: relative; background-color: #f7f7f7; } #content-wrapper { background-color: inherit; } #content { position: relative; width: 100%; max-width: 1360px; padding: 25px 15px 60px; box-sizing: border-box; font-size: 0; white-space: nowrap; } @media screen and (max-width: 380px) { #content { padding-left: 0; padding-right: 0; } #content:before { content: ''; position: absolute; display: block; height: 95px; width: 100%; top: 0; left: 0; background-color: #fff; } } strong { font-weight: 700; } .reward-badge-wrapper { position: absolute; width: 100%; top: -10px; right: 0; text-align: center; } .reward-badge { position: relative; display: inline-block; height: 20px; border-radius: 20px; background-color: #40BD5E; line-height: 20px; } .reward-badge > * { vertical-align: middle; cursor: default; } .reward-badge > div { display: inline-block; font-weight: 700; font-size: 12px; color: #fff; line-height: 20px; } .reward-badge > div:before { content: '+ '; padding-left: 6px; } .reward-badge > img { display: inline-block; margin: 0 4px; } #public-owner { display: none; height: 70px; margin-bottom: 10px; background-color: #d9ecff; text-align: center; } #public-owner.show { display: block; } #public-owner-content { position: relative; height: 100%; width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 100px; box-sizing: border-box; line-height: 70px; } #public-owner-content > .content-header-button { top: 24px; left: 15px; } #public-owner-content > h2 { display: inline-block; font-weight: 400; font-size: 16px; color: #4d4d4d; line-height: 22px; vertical-align: middle; } #ads-horizontal { height: 90px; width: 100%; max-width: 978px; margin: 0 auto 25px; overflow: hidden; } #ads-vertical { display: inline-block; height: 600px; width: 300px; margin-left: 20px; overflow: hidden; } @media screen and (max-width: 1150px) { #ads-vertical { width: 160px; } } @media screen and (max-width: 1050px) { #ads-horizontal { max-width: 728px; } } @media screen and (max-width: 900px) { #content-inner > #ads-vertical { display: none; } } @media screen and (max-width: 380px) { #ads-horizontal { display: none; } } #content-inner { position: relative; width: 100%; font-size: 0; white-space: nowrap; } @media screen and (max-width: 800px) { #content-inner { white-space: normal; } } #content-inner > div { display: inline-block; vertical-align: top; } #content-menu { position: relative; width: 300px; margin-top: 70px; border-radius: 8px; background-color: #fff; } @media screen and (max-width: 940px) { #content-menu { width: 260px; } } @media screen and (max-width: 800px) { #content-inner { text-align: center; } #content-inner > * { text-align: left; } #content-menu { width: 100%; max-width: 380px; margin-bottom: 50px; border-radius: 0; } } #wrapper-menu-avatar { height: 220px; width: 220px; margin: -70px auto 0; border: 2px solid #fff; border-radius: 100%; box-shadow: 0 5px 7px 0 #e5e5e5; overflow: hidden; } #menu-avatar { position: relative; height: 100%; margin: 0 -12%; text-align: center; } #menu-avatar:before { content: attr(data-nickname); position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; font-size: 50px; text-align: center; line-height: 220px; } #menu-avatar > img { position: relative; height: 100%; opacity: 0; visibility: hidden; transition: .2s; } #menu-avatar.show > img { opacity: 1; visibility: visible; } #menu-avatar > img[src=""] { display: none; } #content div.avatar-manage-btn-container { display: none; } #content.settings #menu-avatar div.avatar-manage-btn-container { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, .4); } .avatar-manage-btn { cursor: pointer; opacity: .7; transition: .2s; margin: 10px 0; } .avatar-manage-btn:hover { opacity: 1; } .avatar-manage-btn.avatar-remove { display: none; } #menu-avatar.show .avatar-manage-btn.avatar-remove { display: block; } #menu-avatar-badge { display: none; height: 20px; } #menu-avatar-badge.show { display: block; } #menu-avatar-badge > .reward-badge { position: static; display: inline-block; pointer-events: none; } #menu-flair { position: absolute; display: block; height: 48px; width: 48px; top: 105px; left: 50%; margin-left: -90px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } #menu-flair.show { opacity: 1; visibility: visible; } #menu-flair[src=""] { transition: 0s; } #menu-nickname { position: relative; width: 100%; margin-top: 32px; padding: 0 30px; box-sizing: border-box; text-align: center; white-space: nowrap; cursor: default; } #menu-nickname-content { width: 100%; overflow: hidden; } #menu-nickname:after { content: ''; position: absolute; display: block; top: 0; right: 0; height: 100%; width: 45px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+33,ffffff+100&0+0,1+33,1+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1); /* IE6-9 */ } #content.settings #menu-nickname:after { width: 70px; } #menu-nickname-content > img { display: none; height: 26px; margin-right: 14px; vertical-align: middle; } #menu-nickname-content > img.show { display: inline-block; } #menu-nickname-content > span { display: inline-block; max-width: 100%; font-weight: 300; font-size: 30px; color: #000; vertical-align: middle; transition: color .2s; } #menu-nickname > svg { position: absolute; padding: 5px; cursor: pointer; } #menu-nickname-settings { position: absolute; display: none; height: 0; width: 100%; top: 45px; left: 0; z-index: 1; } #content.settings #menu-nickname-settings.show { display: block; } #menu-nickname-settings > svg { position: absolute; top: -40px; right: 15px; padding: 8px; cursor: pointer; } #menu-nickname-settings > svg > path { transition: .2s; } #menu-nickname-settings > svg:hover > path, #menu-nickname-settings.show:focus > svg:not(:active) > path { fill: #53ce70; } #menu-nickname-settings > svg:active > path { fill: #30a14b; } #menu-nickname-settings-content { display: none; width: 100%; padding: 13px 0 13px 20px; border: 1px solid #e9e9e9; box-sizing: border-box; background-color: #fff; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1); } #menu-nickname-settings-content:before, #menu-nickname-settings-content:after { content: ''; position: absolute; display: block; height: 0; width: 0; top: -8px; left: 50%; margin-left: -8px; border-width: 0 8px 8px; border-style: solid; border-color: #e9e9e9 transparent; } #menu-nickname-settings-content:after { top: -7px; border-color: #fff transparent; } #menu-nickname-settings.show:focus > #menu-nickname-settings-content { display: block; } #menu-nickname-settings-content-color, #menu-nickname-settings-content-flair { position: relative; display: none; height: 40px; line-height: 40px; text-align: left; } #menu-nickname-settings-content-color.show, #menu-nickname-settings-content-flair.show { display: block; } #menu-nickname-settings-content-color > span, #menu-nickname-settings-content-flair > span { position: absolute; display: block; height: 40px; top: 0; left: 0; right: 170px; box-sizing: border-box; font-weight: 400; font-size: 13px; color: #4d4d4d; line-height: 40px; } #menu-nickname-settings-content-color > span > span, #menu-nickname-settings-content-flair > span > span { display: inline-block; line-height: 18px; vertical-align: middle; white-space: normal; } #menu-nickname-settings-content-color-list, #menu-nickname-settings-content-flair-list { position: absolute; display: block; height: 40px; width: 170px; top: 0; right: 0; padding: 5px 0; box-sizing: border-box; } #menu-nickname-settings-content-color-list > .arrow-left, #menu-nickname-settings-content-color-list > .arrow-right, #menu-nickname-settings-content-flair-list > .arrow-left, #menu-nickname-settings-content-flair-list > .arrow-right { position: absolute; height: 30px; width: 25px; top: 5px; left: 0; padding: 8px 4px 8px 12px; box-sizing: border-box; opacity: 0; visibility: hidden; transition: .2s; } #menu-nickname-settings-content-color-list > .arrow-right, #menu-nickname-settings-content-flair-list > .arrow-right { left: auto; right: 0; padding: 8px 12px 8px 4px; } #menu-nickname-settings-content-color-list.show-left > .arrow-left, #menu-nickname-settings-content-color-list.show-right > .arrow-right, #menu-nickname-settings-content-flair-list.show-left > .arrow-left, #menu-nickname-settings-content-flair-list.show-right > .arrow-right { opacity: 1; visibility: visible; } #menu-nickname-settings-content span.arrow-left > svg > path, #menu-nickname-settings-content span.arrow-right > svg > path { transition: .2s; } #menu-nickname-settings-content span.arrow-left > svg:hover > path, #menu-nickname-settings-content span.arrow-right > svg:hover > path { fill: #a4a4a4; } #menu-nickname-settings-content span.arrow-left > svg:active > path, #menu-nickname-settings-content span.arrow-right > svg:active > path { fill: #181818; } #menu-nickname-settings-content-colors-wrapper, #menu-nickname-settings-content-flairs-wrapper { position: relative; height: 100%; width: 120px; margin: 0 25px; overflow: hidden; } #menu-nickname-settings-content-colors, #menu-nickname-settings-content-flairs { position: absolute; height: 100%; left: 0; white-space: nowrap; transition: .2s; } #menu-nickname-settings-content-colors > div, #menu-nickname-settings-content-flairs > div { position: relative; display: inline-block; height: 30px; width: 30px; cursor: pointer; } #menu-nickname-settings-content-colors > div:before, #menu-nickname-settings-content-flairs > div:before { content: ''; position: absolute; display: block; height: 26px; width: 26px; top: 2px; left: 2px; border: 2px solid #d8d8d8; border-radius: 100%; box-sizing: border-box; opacity: 0; visibility: hidden; transition: .2s; } #menu-nickname-settings-content-colors > div:hover:before, #menu-nickname-settings-content-flairs > div:hover:before { opacity: 1; visibility: visible; } #menu-nickname-settings-content-colors > div.active, #menu-nickname-settings-content-flairs > div.active { cursor: default; } #menu-nickname-settings-content-colors > div.active:before, #menu-nickname-settings-content-flairs > div.active:before { border-color: #34c85b; opacity: 1; visibility: visible; } #menu-nickname-settings-content-colors > div > *, #menu-nickname-settings-content-flairs > div > * { display: none; } #menu-nickname-settings-content-colors > div > div { display: block; height: 18px; width: 18px; margin: 6px; border-radius: 100%; } #menu-nickname-settings-content-flairs > div > img { display: block; height: 20px; width: 20px; margin: 5px; } #menu-nickname-settings-content-buttons { height: 26px; width: 100%; margin-top: 10px; padding-right: 13px; box-sizing: border-box; line-height: 26px; text-align: right; } #menu-nickname-settings-content-buttons > span { display: inline-block; vertical-align: middle; cursor: pointer; } #menu-nickname-settings-content-buttons > span:first-child { margin-right: 17px; font-weight: 400; font-size: 12px; color: #3d95cc; transition: .2s; } #menu-nickname-settings-content-buttons > span:hover:first-child { color: #3cafff; } #menu-nickname-settings-content-buttons > span:active:first-child { color: #0075c7; } #menu-nickname-settings-content-buttons > span:last-child { height: 26px; min-width: 80px; padding: 0 20px; border-radius: 4px; box-sizing: border-box; font-weight: 400; font-size: 12px; color: #fff; line-height: 26px; background-color: #40bd5e; text-align: center; transition: .2s; } #menu-nickname-settings-content-buttons > span:hover:last-child { background-color: #53ce70; } #menu-nickname-settings-content-buttons > span:active:last-child { background-color: #30a14b; } #menu-info { display: block; width: 100%; margin-top: 4px; padding: 0 30px; box-sizing: border-box; text-align: center; overflow: hidden; cursor: default; } #menu-info-status { width: 100%; } #menu-info-status-icon { position: relative; display: inline-block; height: 18px; width: 18px; margin-right: 6px; border: 1px solid #fff; border-radius: 100%; box-sizing: border-box; white-space: nowrap; vertical-align: middle; } #menu-info-status-icon > svg { position: absolute; display: none; height: 18px; width: 18px; top: -1px; left: -1px; } #menu-info-status-data { display: inline-block; font-weight: 400; font-size: 13px; color: #808080; vertical-align: middle; } #menu-info-button, #menu-info-button-profile { position: relative; display: none; height: 19px; margin-top: 13px; padding: 0 25px; border-radius: 19px; font-weight: 800; font-size: 10px; color: #fff; line-height: 19px; background-color: #40bd5e; cursor: pointer; transition: .2s; } #menu-info-button-profile { margin-top: 0; height: 26px; line-height: 26px; cursor: default; } #menu-info-button-profile > span { text-transform: uppercase; } #menu-info-button:hover { background-color: #53ce70; } #menu-info-button:active { background-color: #30a14b; } #menu-info-button.extreme, #menu-info-button-profile.extreme { background-color: #ad6bce; } #menu-info-button.extreme:hover { background-color: #c07ce1; } #menu-info-button.extreme:active { background-color: #9b5bbb; } #menu-info-button.gold, #menu-info-button-profile.gold { background-color: #ffbe00; } #menu-info-button.gold:hover { background-color: #ffcc37; } #menu-info-button.gold:active { background-color: #ecb000; } #menu-info-button.free, #menu-info-button-profile.free { background-color: transparent; height: 30px; font-weight: 600; font-size: 22px; color: #595959; padding: 0; } #content.profile #menu-info-button-profile, #content.settings #menu-info-button { display: inline-block; } #menu-info-button > span { text-transform: uppercase; } #menu-info-button > svg { position: absolute; display: block; height: 11px; width: 12px; top: 4px; right: 5px; } #content-menu:hover #menu-info-button.pro > svg, #content-menu:hover #menu-info-button.extreme > svg, #content-menu:hover #menu-info-button.gold > svg { opacity: 1; visibility: visible; } #menu-followers { display: none; width: 100%; margin: 15px 0 0; padding: 0 26px; box-sizing: border-box; } #content.public #menu-followers { display: block; } #menu-followers-content { position: relative; padding-top: 6px; text-align: center; } #menu-followers-content > * { vertical-align: middle; } #menu-followers-content > svg { margin-right: 6px; } #menu-followers-content > div { display: inline-block; font-weight: 400; font-size: 13px; color: #4d4d4d; line-height: 18px; } #menu-statistic { display: none; width: 100%; margin: 41px 0 0; padding: 0 26px; box-sizing: border-box; } #content.profile #menu-statistic { display: block; } .menu-statistic-item { height: 65px; width: 100%; padding: 8px 0 11px; box-sizing: border-box; } .menu-statistic-item + .menu-statistic-item { border-top: 1px solid #e9e9e9; } .menu-statistic-item.reward { display: none; } .menu-statistic-item.reward.show-rewards { display: block; } .menu-statistic-item-header { position: relative; display: block; height: 14px; width: 100%; margin-bottom: 3px; font-weight: 400; font-size: 10px; color: #9b9b9b; text-align: left; } .menu-statistic-item-header > span, .menu-statistic-item-header > a { position: absolute; min-width: 80px; top: 0; right: 0; color: #3d95cc; text-align: center; cursor: pointer; transition: .2s; } .menu-statistic-item-header > span { vertical-align: top; } .menu-statistic-item-header > span:before { content: '+'; position: relative; display: none; height: 11px; width: 11px; top: 2px; margin-right: 4px; border: 1px solid #3d95cc; border-radius: 100%; box-sizing: border-box; font-weight: 400; font-size: 10px; line-height: 9px; text-align: center; vertical-align: top; transition: .2s; } .menu-statistic-item.coins .menu-statistic-item-header > span:before { display: inline-block; } .menu-statistic-item-header > span:hover, .menu-statistic-item-header > a:hover, .menu-statistic-item-header > span:hover:before { color: #3cafff; border-color: #3cafff; } .menu-statistic-item-header > span:active, .menu-statistic-item-header > a:active, .menu-statistic-item-header > span:active:before { color: #0075c7; border-color: #0075c7; } .menu-statistic-item-content { position: relative; height: 30px; line-height: 30px; } .menu-statistic-item-content > * { display: inline-block; vertical-align: middle; } .menu-statistic-item-content > img { display: inline-block; height: 26px; margin-right: 8px; } .menu-statistic-item-content > img.show { display: inline-block; } .menu-statistic-item-content > svg { margin-right: 8px; } .menu-statistic-item-content .new-notification-icon { display: none; width: 10px; height: 10px; position: absolute; left: 19px; top: 3px; border-radius: 50%; background: #FFF; } .menu-statistic-item-content .new-notification-icon.show { display: block; } .menu-statistic-item-content .new-notification-icon::before { content: ''; width: 8px; height: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #F0251E; border-radius: 50%; } .menu-statistic-item-content > span { height: 30px; font-weight: 600; font-size: 22px; color: #595959; line-height: 30px; } .menu-statistic-item-content-button { position: absolute; top: 2px; right: 0; height: 26px; min-width: 80px; padding: 0 10px; border-radius: 4px; box-sizing: border-box; font-family: Roboto, Tahoma, Arial, sans-serif; font-weight: 400; font-size: 12px; color: #fff; line-height: 26px; text-align: center; background-color: #40bd5e; cursor: pointer; box-shadow: -10px 0 5px 5px #fff; transition: .2s; } .menu-statistic-item-content-button:hover { background-color: #53ce70; } .menu-statistic-item-content-button:active { background-color: #30a14b; } .menu-statistic-item.coins .menu-statistic-item-content-button { background-color: #ffbe00; } .menu-statistic-item.coins .menu-statistic-item-content-button:hover { background-color: #ffcc37; } .menu-statistic-item.coins .menu-statistic-item-content-button:active { background-color: #ecb000; } .menu-statistic-item.reward > .menu-statistic-item-content > img { display: inline-block; } #menu-public { position: relative; display: none; width: 100%; margin: 41px 0 0; padding: 25px 36px; box-sizing: border-box; } #menu-public:before { content: ''; position: absolute; display: block; height: 1px; top: -1px; left: 36px; right: 36px; background-color: #e9e9e9; } #content.public #menu-public { display: block; } .menu-public-item { height: 28px; width: 100%; text-align: left; white-space: nowrap; } .menu-public-item > div { display: inline-block; height: 100%; width: 65%; font-weight: 400; font-size: 13px; color: #7a7a7a; line-height: 28px; text-overflow: ellipsis; overflow: hidden; vertical-align: top; } .menu-public-item > div:first-child { text-transform: capitalize; } .menu-public-item > div + div { width: 35%; color: #4d4d4d; } #menu-links { width: 100%; padding: 22px 24px 28px; box-sizing: border-box; border-top: 1px solid #e0e0e0; } #content.settings #menu-links { margin-top: 41px; } #menu-links > div { position: relative; display: none; height: 38px; width: 100%; padding-left: 39px; box-sizing: border-box; line-height: 38px; } #content.profile #menu-links > #menu-links-share, #content.settings #menu-links > #menu-links-share, #content.profile #menu-links > #menu-links-room, #content.settings #menu-links > #menu-links-room, #content.profile #menu-links > #menu-links-create-room, #content.settings #menu-links > #menu-links-create-room, #content.profile #menu-links > #menu-links-manage-room, #content.settings #menu-links > #menu-links-manage-room { display: none; } #content.profile #menu-links > #menu-links-share.show, #content.profile #menu-links > #menu-links-room.show, #content.profile #menu-links > #menu-links-reward.show, #content.settings #menu-links > #menu-links-share.show, #content.settings #menu-links > #menu-links-room.show, #content.profile #menu-links > #menu-links-reward.show, #content.settings #menu-links > #menu-links-reward.show, #content.profile #menu-links > #menu-links-create-room.show, #content.settings #menu-links > #menu-links-create-room.show, #content.profile #menu-links > #menu-links-manage-room.show, #content.settings #menu-links > #menu-links-manage-room.show { display: block; } #menu-links > #menu-links-reward > svg { display: inline-block; } #content.profile #menu-links > div, #content.settings #menu-links > #menu-links-visits + div { display: block; } #content.public #menu-links > div.show { display: inline-block; } #content.public #menu-links-share.show { margin: 55px 0 -18px; } #content.public #menu-links-share.show:before { content: ''; position: absolute; display: block; height: 1px; top: -20px; left: -24px; right: -24px; background-color: #e0e0e0; } #menu-links > div > svg { position: absolute; display: block; top: 4px; left: 0; } #menu-links > div > span { display: inline-block; font-weight: 400; font-size: 12px; color: #3d95cc; line-height: 19px; vertical-align: middle; white-space: normal; cursor: pointer; transition: .2s; } #menu-links > div > span:hover { color: #3cafff; } #menu-links > div > span:active { color: #0075c7; } #menu-links > div > span > a { color: inherit; } #content.public #menu-links { position: relative; padding: 37px 24px 43px; text-align: justify; white-space: normal; } #content.public #menu-links:after { content: ''; display: inline-block; height: 0; width: 100%; } #menu-links > a { display: none; width: 70px; text-align: center; vertical-align: top; } #content.public #menu-links > a { display: inline-block; } #menu-links > a > div { height: 11px; width: 100%; padding-top: 7px; font-weight: 400; font-size: 10px; color: #7a7a7a; line-height: 11px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #menu-links > a > svg > g > *:first-child { transition: .2s; } #menu-links > a:hover > svg > g > *:first-child { fill: #12eb1d; } #menu-links > a:active > svg > g > *:first-child { fill: #26ca2f; } #menu-links > span { position: absolute; display: none; height: 12px; width: 100%; left: 0; bottom: -34px; line-height: 12px; text-align: center; } #content.public #menu-links > span { display: block; } #menu-links > span > * { vertical-align: middle; } #menu-links > span > a { display: inline-block; height: 12px; margin-left: 6px; font-weight: 400; font-size: 10px; color: #3d95cc; line-height: 12px; cursor: pointer; transition: .2s; } #menu-links > span > a:hover { color: #3cafff; } #menu-links > span > a:active { color: #0075c7; } #wrapper-avataruploader, #wrapper-avatarremover { position: absolute; display: block; height: 100%; width: 100%; top: 0; left: -100%; font-size: 0; opacity: 0; visibility: hidden; z-index: 10; } body.show-avataruploader > #wrapper > #wrapper-avataruploader, body.show-avatarremover > #wrapper > #wrapper-avatarremover { left: 0; opacity: 1; visibility: visible; } #avataruploader-overlay, #avatarremover-overlay { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, .65); } #avataruploader, #avatarremover { position: relative; width: 380px; margin: 70px auto; background-color: #fff; text-align: center; overflow: hidden; } #avataruploader > h1, #avatarremover > h1 { height: 40px; width: 100%; padding: 0 50px; box-sizing: border-box; background-color: #59c959; } #avataruploader > h1 > span, #avatarremover > h1 > span { display: inline-block; height: 100%; width: 100%; font-weight: 300; font-size: 16px; color: #fff; line-height: 40px; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #avataruploader-button-close, #avatarremover-button-close { position: absolute; height: 40px; width: 40px; top: 0; right: 0; line-height: 40px; cursor: pointer; transition: .2s; } #avataruploader-button-close:before, #avatarremover-button-close:before { content: '+'; position: relative; display: inline-block; top: -2px; font-size: 40px; font-weight: 300; color: #fff; vertical-align: middle; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: color .2s; } #avataruploader-button-close:hover, #avatarremover-button-close:hover { background-color: #fff; } #avataruploader-button-close:hover:before, #avatarremover-button-close:hover:before { color: #59c959; } .avatarremover-content { height: 100%; display: flex; flex-direction: column; font-size: 17px; line-height: 23px; font-weight: 400; color: #545454; padding: 72px 18px 40px; } .avatar-remove-warning img { width: 91px; height: 81px; } .avatarremover-content p { margin: 24px 0 72px; } #avataruploader > input { display: none; } #avataruploader-preview { position: relative; height: 380px; width: 380px; background-color: #fff; overflow: hidden; } /* */ #avataruploader-preview:after { content: ''; position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgwIiBoZWlnaHQ9IjM4MCIgdmlld0JveD0iMCAwIDM4MCAzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8cGF0aCBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtb3BhY2l0eT0iLjg1IiBkPSJNMCAwaDM4MHYzODBIMFYwem0xOTAgMzc5YzEwNC4zODIgMCAxODktODQuNjE4IDE4OS0xODlTMjk0LjM4MiAxIDE5MCAxIDEgODUuNjE4IDEgMTkwczg0LjYxOCAxODkgMTg5IDE4OXoiLz4KPC9zdmc+); } #avataruploader-preview-snapshot, #avataruploader-preview-file { position: absolute; height: 100%; width: 100%; top: 0; left: -100%; background-repeat: no-repeat; background-position: center center; background-color: #b1b1b1; overflow: hidden; transition: .4s; } /* */ #avataruploader-preview-snapshot { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA2NCA1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjYiIGQ9Ik0xNC4yMyA4LjMzM0MxNS40MDQgMy41NSAxOS43MjIgMCAyNC44NyAwaDE0LjI2YzUuMTQ3IDAgOS40NjUgMy41NSAxMC42NCA4LjMzM2g2LjAxM2M0LjUzOCAwIDguMjE3IDMuNjggOC4yMTcgOC4yMTd2MjUuMjMzQzY0IDQ2LjMyIDYwLjMyIDUwIDU1Ljc4MyA1MEg4LjIxN0MzLjY4IDUwIDAgNDYuMzIgMCA0MS43ODNWMTYuNTVjMC00LjUzOCAzLjY4LTguMjE3IDguMjE3LTguMjE3aDYuMDEyek0zMiA0My4wNTVjOC40NTIgMCAxNS4zMDQtNi44NCAxNS4zMDQtMTUuMjc4QzQ3LjMwNCAxOS4zNCA0MC40NTIgMTIuNSAzMiAxMi41cy0xNS4zMDQgNi44NC0xNS4zMDQgMTUuMjc3YzAgOC40MzggNi44NTIgMTUuMjc4IDE1LjMwNCAxNS4yNzh6bTAtNC4xNjZjLTYuMTQ3IDAtMTEuMTMtNC45NzYtMTEuMTMtMTEuMTEzIDAtNi4xMzYgNC45ODMtMTEuMTEgMTEuMTMtMTEuMTEgNi4xNDcgMCAxMS4xMyA0Ljk3NCAxMS4xMyAxMS4xMSAwIDYuMTM3LTQuOTgzIDExLjExMi0xMS4xMyAxMS4xMTJ6Ii8+Cjwvc3ZnPg==); } /* */ #avataruploader-preview-file { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA2MyA0OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0ibm9uemVybyIgb3BhY2l0eT0iLjYiIGQ9Ik0zMSAxMWgyMWMzLjg2NiAwIDcgMy4xMzQgNyA3djI0YzAgMy44NjYtMy4xMzQgNy03IDdIN2MtMy44NjYgMC03LTMuMTM0LTctN1YxMWMwLTMuODY1IDMuMTM0LTcgNy03aDE3YzMuODY2IDAgNyAzLjEzNCA3IDd6bTMwIDMyLjY1N1YxN2MwLTQuNDE4LTMuNTgyLTgtOC04SDMyLjkzOEMzMi40NDYgNS4wNTQgMjkuMDggMiAyNSAySDljLS42NjggMC0xLjMxOC4wODItMS45MzguMjM3QzguNjQ3Ljg0NCAxMC43MjUgMCAxMyAwaDEzYzQuMjgzIDAgNy44NjggMi45OTIgOC43NzcgN0g1NGM0Ljk3IDAgOSA0LjAzIDkgOXYyMmMwIDIuMTQzLS43NSA0LjExLTIgNS42NTd6Ii8+Cjwvc3ZnPg==); } #input-snapshot:checked ~ #avataruploader-preview > #avataruploader-preview-snapshot, #input-file:checked ~ #avataruploader-preview > #avataruploader-preview-file { left: 0; } #input-snapshot:checked ~ #avataruploader-preview > #avataruploader-preview-snapshot ~ div, #input-file:checked ~ #avataruploader-preview > #avataruploader-preview-file ~ div { left: 100%; } #avataruploader-preview-snapshot > * { position: absolute; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } #avataruploader-preview-snapshot > *.show { opacity: 1; visibility: visible; } #avataruploader-preview-snapshot > video { height: 800px; top: 0; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: scale(.475); -webkit-transform: scale(.475); } #avataruploader-preview-snapshot > canvas { height: 800px; width: 800px; } #avataruploader-preview-snapshot > img { height: 100%; top: 0; } #avataruploader-preview-file > input { display: none; } #avataruploader-preview-file > img { position: absolute; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } #avataruploader-preview-file > img.show { opacity: 1; visibility: visible; } #avataruploader-preview-file > img.portrait { width: 100%; left: 0; } #avataruploader-preview-file > img.landscape { height: 100%; top: 0; } #avataruploader-labels { position: relative; height: 54px; width: 100%; padding: 22px 18px 0; box-sizing: border-box; text-align: left; } #avataruploader-labels:before { content: ''; position: absolute; height: 1px; bottom: 0; left: 30px; right: 30px; background-color: #dbdbdb; } #avataruploader-labels > label { position: relative; display: inline-block; height: 32px; margin: 0 12px; border-width: 3px 0; border-style: solid; border-color: transparent; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; line-height: 26px; cursor: pointer; transition: .2s; } #avataruploader-labels > label:hover { color: #4a4a4a; } #input-snapshot:checked ~ #avataruploader-labels > label[for="input-snapshot"], #input-file:checked ~ #avataruploader-labels > label[for="input-file"] { border-color: transparent transparent #66c4ff; color: #3d95cc; pointer-events: none; cursor: default; } #avataruploader-interface { position: relative; height: 210px; width: 100%; overflow: hidden; } #avataruploader-interface > div { position: absolute; height: 100%; width: 100%; top: 0; left: -100%; transition: .4s; } #input-snapshot:checked ~ #avataruploader-interface > #avataruploader-interface-snapshot, #input-file:checked ~ #avataruploader-interface > #avataruploader-interface-file { left: 0; } #input-snapshot:checked ~ #avataruploader-interface > #avataruploader-interface-snapshot ~ div, #input-file:checked ~ #avataruploader-interface > #avataruploader-interface-file ~ div { left: 100%; } #avataruploader-interface-snapshot > *, #avataruploader-interface-file > * { position: absolute; display: inline-block; width: 100%; left: 0; padding: 0 30px; box-sizing: border-box; } #avataruploader-interface-snapshot > span, #avataruploader-interface-file > span { bottom: 130px; font-weight: 400; font-size: 14px; color: #545454; line-height: 19px; } #avataruploader-interface-snapshot-buttons, #avataruploader-interface-file-buttons { height: 50px; bottom: 60px; } .avatarremover-buttons-wrapper { display: flex; flex-direction: row; justify-content: center; } .btn-common { height: 100%; width: 100%; min-width: 132px; margin: 0 5px; padding: 0 25px; border-radius: 4px; border: 1px solid transparent; box-sizing: border-box; line-height: 48px; text-align: center; cursor: pointer; transition: .2s; } .btn-secondary { color: #4A4A4A; background: #FFFFFF; border: 1px solid #D0D0D0; } .btn-primary { color: #fff; background-color: #40bd5e; } .btn-primary:hover { background-color: #53ce70; } .btn-primary:active { background-color: #30a14b; } .btn-secondary:hover, .btn-secondary:active { color: #23993B; border: 1px solid #2CBF49; } .btn-secondary:active { background: rgba(46, 203, 77, 0.1); } #avataruploader-interface-snapshot-buttons > div, #avataruploader-interface-file-buttons > div, #avataruploader-interface-snapshot-buttons.selected > div:first-child, #avataruploader-interface-file-buttons.selected > div:first-child { display: none; height: 100%; min-width: 132px; margin: 0 5px; padding: 0 25px; border-radius: 4px; border: 1px solid transparent; box-sizing: border-box; background-color: #40bd5e; line-height: 48px; text-align: center; cursor: pointer; transition: .2s; } #avataruploader-interface-snapshot-buttons > div:first-child, #avataruploader-interface-file-buttons > div:first-child, #avataruploader-interface-snapshot-buttons.selected > div ~ div, #avataruploader-interface-file-buttons.selected > div ~ div { display: inline-block; } #avataruploader-interface-snapshot-buttons > div:hover, #avataruploader-interface-file-buttons > div:hover { background-color: #53ce70; } #avataruploader-interface-snapshot-buttons > div:active, #avataruploader-interface-file-buttons > div:active { background-color: #30a14b; } #avataruploader-interface-snapshot-buttons > div:nth-child(2), #avataruploader-interface-file-buttons > div:nth-child(2) { width: 50px; min-width: inherit; padding: 0; border-color: #40bd5e; background-color: #e4fbe9; } #avataruploader-interface-snapshot-buttons > div:nth-child(2):hover, #avataruploader-interface-file-buttons > div:nth-child(2):hover { border-color: transparent; background-color: #40bd5e; } #avataruploader-interface-snapshot-buttons > div:nth-child(2):active, #avataruploader-interface-file-buttons > div:nth-child(2):active { background-color: #30a14b; } #avataruploader-interface-snapshot-buttons > div > *, #avataruploader-interface-file-buttons > div > * { display: inline-block; font-weight: 400; font-size: 16px; color: #fff; vertical-align: middle; } #avataruploader-interface-snapshot-buttons > div:first-child > svg, #avataruploader-interface-file-buttons > div:first-child > svg { margin-right: 11px; } #avataruploader-interface-snapshot-buttons > div:nth-child(2) > svg > path, #avataruploader-interface-file-buttons > div:nth-child(2) > svg > path { transition: .2s; } #avataruploader-interface-snapshot-buttons > div:nth-child(2):hover > svg > path, #avataruploader-interface-file-buttons > div:nth-child(2):hover > svg > path { fill: #fff; } #avataruploader-preview, #avataruploader-labels, #avataruploader-interface { left: 0; transition: .4s; } #avataruploader-error { position: absolute; width: 100%; top: 40px; bottom: 0; left: 100%; padding: 0 50px; box-sizing: border-box; background-color: #fff; transition: .4s; } #avatarremover-error { position: absolute; width: 100%; top: 40px; bottom: 0; left: 100%; box-sizing: border-box; background-color: #fff; transition: .4s; } #avataruploader.error > #avataruploader-error, #avatarremover.error > #avatarremover-error { left: 0; } #avataruploader.error > #avataruploader-preview, #avataruploader.error > #avataruploader-labels, #avataruploader.error > #avataruploader-interface, #avatarremover.error .avatarremover-content { left: -100%; } #avataruploader-error > svg, #avatarremover-error svg { display: none; } #avataruploader-error.warning > #avataruploader-error-image-warning, #avataruploader-error.success > #avataruploader-error-image-success, #avataruploader-error.error > #avataruploader-error-image-error { display: block; margin: 193px auto 0; } #avatarremover-error.warning #avatarremover-error-image-warning, #avatarremover-error.success #avatarremover-error-image-success, #avatarremover-error.error #avatarremover-error-image-error { display: inline; } #avataruploader-error > h3 { margin-top: 23px; font-weight: 400; font-size: 17px; color: #545454; line-height: 23px; } #avataruploader-error > span { display: inline-block; width: 100%; margin-top: 12px; padding: 0 10px; box-sizing: border-box; font-weight: 400; font-size: 14px; color: #545454; line-height: 19px; } #avataruploader-error > div { position: absolute; left: 0; right: 0; bottom: 59px; } #avataruploader-error > div > div { display: inline-block; height: 50px; min-width: 132px; margin: 0 auto; padding: 0 25px; border-radius: 4px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #fff; background-color: #40bd5e; line-height: 50px; text-align: center; cursor: pointer; transition: .2s; } #avataruploader-error > div > div:hover { background-color: #53ce70; } #avataruploader-error > div > div:active { background-color: #30a14b; } .content-header-button { position: absolute; display: inline-block; height: 22px; top: 38px; left: 40px; padding: 0 20px; font-weight: 400; font-size: 16px; line-height: 22px; color: #3d95cc; cursor: pointer; transition: .2s; } .content-header-button:hover { color: #3cafff; } .content-header-button:active { color: #0075c7; } .content-header-button > svg { position: absolute; display: block; top: 8px; left: 0; vertical-align: middle; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); pointer-events: none; transition: .2s; } .content-header-button:hover > svg { left: -5px; } .content-header-button > svg > path { fill: #3d95cc; } .content-header-button:hover > svg > path { fill: #3cafff; } .content-header-button:active > svg > path { fill: #0075c7; } #content .content-header-button > span { display: inline-block; height: inherit; line-height: inherit; } .wrapper-combobox { position: relative; height: 39px; cursor: pointer; } .combobox { position: absolute; max-height: 39px; left: 0; right: 0; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; background-color: #fff; overflow: hidden; transition: border-color .2s; } .combobox:hover { border-color: #a5a5a5; } .combobox:focus { border-color: #2ecb4e; } .combobox:focus { max-height: 232px; z-index: 1; } .combobox:before { content: attr(data-text); position: relative; display: inline-block; height: 37px; padding: 0 10px; font-weight: 400; font-size: 14px; color: #545454; line-height: 37px; } /* */ .combobox:after { content: ''; position: absolute; display: inline-block; height: 5px; width: 12px; top: 18px; right: 12px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDEyIDUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8cGF0aCBkPSJNMCAwaDEuNWw0LjUyOCAzLjYzNkwxMC41IDBIMTJTNi4zMTMgNC43NCA2LjAyOCA1TDAgMHoiIGZpbGw9IiM4MDgwODAiIGZpbGwtcnVsZT0ibm9uemVybyIvPgo8L3N2Zz4=); background-repeat: no-repeat; pointer-events: none; } /* */ .combobox:hover:after, .combobox:focus:after { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDEyIDUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8cGF0aCBkPSJNMCAwaDEuNWw0LjUyOCAzLjYzNkwxMC41IDBIMTJTNi4zMTMgNC43NCA2LjAyOCA1TDAgMHoiIGZpbGw9IiMxMDEwMTAiIGZpbGwtcnVsZT0ibm9uemVybyIvPgo8L3N2Zz4=); } .combobox.error { border-color: #ff6b6b; } .combobox > ul { max-height: 195px; overflow-y: auto; } .combobox > ul > li { height: 39px; width: 100%; padding-left: 10px; box-sizing: border-box; font-weight: 400; font-size: 14px; color: #545454; line-height: 39px; transition: .2s; } .combobox > ul > li:hover { color: #2d2d2d; background-color: #eaf4ff; } .combobox > ul > li.active { display: none; } #content-info { /* - #content-menu.width - margin-left - margin-right - #ads-vertical.width */ width: calc(100% - 300px - 20px - 20px - 300px); margin-left: 20px; white-space: normal; } @media screen and (max-width: 1150px) { #content-info { /* - #content-menu.width - margin-left - margin-right - #ads-vertical.width */ width: calc(100% - 300px - 20px - 20px - 160px); } } @media screen and (max-width: 940px) { #content-info { /* - #content-menu.width - margin-left - margin-right - #ads-vertical.width */ width: calc(100% - 260px - 20px - 20px - 160px); } } @media screen and (max-width: 900px) { #content-info { /* - #content-menu.width - margin-left */ width: calc(100% - 260px - 20px); } } @media screen and (max-width: 800px) { #content-info { width: 100%; margin-left: 0; } } #content-info-hopping { position: relative; width: 100%; margin-bottom: 20px; opacity: 0; } #content-info-hopping.show { opacity: 1; } #hopping, #content.public #content-info-hopping > #hopping { display: block; height: 50px; width: 100%; padding: 0 45px 0 41px; border: none; border-radius: 4px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #16ca55; background-color: #c6f8cb; transition: .2s; } #content.public #content-info-hopping > #hopping { padding: 0 20px; } #content.public #content-info-hopping > #hopping.hide, #content.public #content-info-hopping > #hopping.hide ~ span { visibility: hidden; } #content-info-hopping:hover > #hopping, #hopping:hover { background-color: #abffb4; } #content-info-hopping > #hopping:focus { background-color: #fff; } #content.public #content-info-hopping > svg, #content.public #content-info-hopping > div { display: none; } #content-info-hopping > svg { position: absolute; display: block; top: 19px; left: 21px; pointer-events: none; } #hopping ~ div { position: absolute; height: 40px; width: 40px; top: 5px; right: 5px; background-color: inherit; line-height: 40px; text-align: center; cursor: pointer; transition: .2s; } #hopping ~ div > svg { vertical-align: middle; } #hopping ~ div > svg > path { fill: #40bd5e; transition: .2s; } #hopping ~ div:hover > svg > path { fill: #53ce70; } #hopping ~ div:active > svg > path { fill: #30a14b; } #hopping ~ span, #content.public #content-info-hopping > #hopping ~ span { position: absolute; height: 0; width: 0; top: 19px; left: -6px; border-width: 6px 6px 6px 0; border-style: solid; border-color: transparent #c6f8cb; transition: .2s; } #content-info-hopping:hover > span { border-color: transparent #abffb4; } #content-info-hopping > #hopping:focus ~ span { border-color: transparent #fff; } @media screen and (max-width: 800px) { #content.public #content-info-hopping > #hopping.hide, #content.public #content-info-hopping > #hopping.hide ~ span, #content-info-hopping > span { display: none; } } #content-info-remain { display: none; width: 100%; margin-bottom: 20px; border: 1px solid #e9e9e9; border-radius: 4px; box-sizing: border-box; background-color: #fff; overflow: hidden; } #content-info-remain.show { display: block; } #content-info-remain-header { position: relative; height: 50px; width: 100%; padding: 0 20px; box-sizing: border-box; font-weight: 700; font-size: 14px; color: #fff; line-height: 50px; text-align: left; background-color: #40bd5e; cursor: pointer; transition: .2s; } /* */ #content-info-remain-header:after { content: ''; position: absolute; display: block; height: 8px; width: 14px; top: 20px; right: 20px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE0IDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8cGF0aCBkPSJNNyAyLjQyNWw1LjU0IDUuNTQgMS40NjgtMS40N0w3LjU1LjAzNWgtMS4xbC02LjQ1OCA2LjQ2IDEuNDcgMS40NyIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+Cjwvc3ZnPg==); background-repeat: no-repeat; cursor: inherit; transform: rotate(180deg); -webkit-transform: rotate(180deg); } #content-info-remain-header.show-content:after { transform: rotate(0deg); -webkit-transform: rotate(0deg); } #content-info-remain-header.pro { background-color: #40bd5e; } #content-info-remain-header:hover, #content-info-remain-header.pro:hover { background-color: #53ce70; } #content-info-remain-header:active, #content-info-remain-header.pro:active { background-color: #30a14b; } #content-info-remain-header.extreme { background-color: #ad6bce; } #content-info-remain-header.extreme:hover { background-color: #c07ce1; } #content-info-remain-header.extreme:active { background-color: #9b5bbb; } #content-info-remain-header.gold { background-color: #ffbe00; } #content-info-remain-header.gold:hover { background-color: #ffcc37; } #content-info-remain-header.gold:active { background-color: #ecb000; } #content-info-remain-header > span { text-transform: uppercase; } #content-info-remain-content { height: 0; width: 100%; box-sizing: border-box; text-align: center; overflow: hidden; } #content-info-remain-header.show-content + #content-info-remain-content { height: auto; padding: 30px 20px; } #content-info-remain-content-header { padding-bottom: 9px; font-weight: 400; font-size: 17px; color: #4d4d4d; line-height: 23px; } #content-info-remain-content-text { padding-bottom: 26px; font-weight: 400; font-size: 13px; color: #4d4d4d; line-height: 18px; } #content-info-remain-content-button { display: inline-block; height: 35px; padding: 0 37px; border-radius: 4px; font-weight: 600; font-size: 14px; color: #fff; line-height: 35px; background-color: #40bd5e; cursor: pointer; transition: .2s; } #content-info-remain-content-button:hover { background-color: #53ce70; } #content-info-remain-content-button:active { background-color: #30a14b; } #content-info-inner { width: 100%; border: 1px solid #e9e9e9; border-radius: 4px; box-sizing: border-box; background-color: #fff; overflow: hidden; } @media screen and (max-width: 380px) { #content-info-inner { border-left: none; border-right: none; border-radius: 0; } } #content-wrapper-rewards { width: 100%; padding: 0 0 15px 0; box-sizing: border-box; } #content-wrapper-rewards > h3 { position: relative; height: 50px; width: 100%; padding: 0 40px; box-sizing: border-box; line-height: 50px; } #content-wrapper-rewards > h3 > * { vertical-align: top; } #content-wrapper-rewards > h3 > span { position: relative; display: inline-block; height: 100%; border-width: 3px 0; border-style: solid; border-color: transparent transparent #66c4ff; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #3d95cc; line-height: 44px; cursor: default; } #content-rewards-header-info, #content-xpback-header-info.show { display: inline-block; margin-left: 8px; line-height: 50px; } #content-xpback-header-info { display: none; vertical-align: top; } #content-rewards-header-info > svg, #content-xpback-header-info > svg { vertical-align: middle; } #content-rewards-header-info > svg > path:first-child, #content-xpback-header-info > svg > path:first-child { transition: .2s; } #content-rewards-header-info:hover > svg > path:first-child, #content-xpback-header-info:hover > svg > path:first-child { fill: #3d95cc; } #content-rewards-header-info > div, #content-xpback-header-info > div { position: absolute; display: block; width: 100%; max-width: 420px; top: 44px; left: 0; right: 0; margin: 0 auto; padding: 20px 30px; box-sizing: border-box; border-radius: 5px; background-color: #3b3b3b; font-weight: 400; font-size: 13px; color: #f1f1f1; line-height: 18px; opacity: 0; visibility: hidden; z-index: 1; transition: .2s; } #content-rewards-header-info:hover > div, #content-xpback-header-info:hover > div { opacity: 1; visibility: visible; } #content-rewards-header-info > div > a, #content-xpback-header-info > div > a { color: #3d95cc; transition: .2s; } #content-rewards-header-info > div > a:hover, #content-xpback-header-info > div > a:hover { color: #3cafff; } #content-rewards-header-info > div > a:active, #content-xpback-header-info > div > a:active { color: #0075c7; } #content-rewards { padding: 20px 40px 0; box-sizing: border-box; } #content-rewards-list { display: flex; align-items: stretch; flex-wrap: wrap; margin: 0 -10px; cursor: default; } #content-rewards-list > div { position: relative; display: inline-block; width: 100%; margin-top: 20px; padding: 0 10px; box-sizing: border-box; text-align: center; vertical-align: top; } #content-rewards-list > div:nth-child(1):nth-last-child(1) { width: 100%; } #content-rewards-list > div:nth-child(1):nth-last-child(2), #content-rewards-list > div:nth-child(2):nth-last-child(1) { width: 50%; } #content-rewards-list > div:nth-child(1):nth-last-child(3), #content-rewards-list > div:nth-child(2):nth-last-child(2), #content-rewards-list > div:nth-child(3):nth-last-child(1) { width: 33.33%; } #content-rewards-list > div:nth-child(1):nth-last-child(4), #content-rewards-list > div:nth-child(2):nth-last-child(3), #content-rewards-list > div:nth-child(3):nth-last-child(2), #content-rewards-list > div:nth-child(4):nth-last-child(1) { width: 25%; } #content-rewards-list.streaks-5 > div { width: 33.3%; } #content-rewards-list > .reward-status { position: relative; min-height: 54px; width: 100%; margin-bottom: 28px; padding: 0 20px 12px 40px; border-radius: 5px; box-sizing: border-box; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6339f5+0,64a1fb+100 */ background: #6339f5; /* Old browsers */ background: -moz-linear-gradient(left, #6339f5 0%, #64a1fb 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #6339f5 0%,#64a1fb 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #6339f5 0%,#64a1fb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6339f5', endColorstr='#64a1fb',GradientType=1 ); /* IE6-9 */ box-shadow: 0 5px 18px 0 rgba(0, 0, 0, .1); overflow: hidden; } .reward-status > div > svg { position: absolute; left: -24px; line-height: 20px; vertical-align: top; } .reward-status > div { position: relative; padding: 0 20px 0 0; margin: 17px 0 0; box-sizing: border-box; } #content-rewards-inner > .reward-status > div, #content-rewards-more-inner > .reward-status > div { margin: 17px 0 0; } .reward-disable { display: none; font-size: 15px; line-height: 20px !important; } .reward-program .reward-disable { display: inline-block; } .reward-status > .reward-status-button { display: inline-block; height: 30px; min-width: 90px; padding: 0; margin: 12px 0 0; } #content-rewards-inner > .reward-status > .reward-status-button, #content-rewards-more-inner > .reward-status > .reward-status-button { margin: 12px 0 0; } .reward-status-button > a { display: block; height: 100%; padding: 0 10px; border-radius: 4px; box-sizing: border-box; font-weight: 600; font-size: 12px; color: #fff; line-height: 30px; text-align: center; background-color: #40bd5e; transition: .2s; } .reward-status-button > a:hover { background-color: #53ce70; } .reward-status-button > a:active { background-color: #30a14b; } .content-rewards-list-item { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 18px 14px 14px 16px; box-sizing: border-box; border-radius: 8px; background-color: #78878e; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15); text-align: left; } #content-rewards-list > div:nth-child(1) > div[data-complete="complete"] { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5223f3+0,24d2fd+100 */ background: #5223f3; /* Old browsers */ background: -moz-linear-gradient(left, #5223f3 0%, #24d2fd 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #5223f3 0%, #24d2fd 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #5223f3 0%, #24d2fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5223f3', endColorstr='#24d2fd', GradientType=1); /* IE6-9 */ } #content-rewards-list > div:nth-child(2) > div[data-complete="complete"] { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#18a73a+0,4ddf70+100 */ background: #18a73a; /* Old browsers */ background: -moz-linear-gradient(left, #18a73a 0%, #4ddf70 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #18a73a 0%, #4ddf70 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #18a73a 0%, #4ddf70 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#18a73a', endColorstr='#4ddf70', GradientType=1); /* IE6-9 */ } #content-rewards-list > div:nth-child(3) > div[data-complete="complete"] { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6147ff+0,9a47ff+100 */ background: #6147ff; /* Old browsers */ background: -moz-linear-gradient(left, #6147ff 0%, #9a47ff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #6147ff 0%, #9a47ff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #6147ff 0%, #9a47ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6147ff', endColorstr='#9a47ff', GradientType=1); /* IE6-9 */ } #content-rewards-list > div:nth-child(4) > div[data-complete="complete"] { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cf2790+0,ff6847+100 */ background: #cf2790; /* Old browsers */ background: -moz-linear-gradient(left, #cf2790 0%, #ff6847 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #cf2790 0%, #ff6847 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #cf2790 0%, #ff6847 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf2790', endColorstr='#ff6847', GradientType=1); /* IE6-9 */ } #content-rewards-list > div:nth-child(5) > div[data-complete="complete"] { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#14abae+0,00ffc7+100 */ background: #14abae; /* Old browsers */ background: -moz-linear-gradient(left, #14abae 0%, #00ffc7 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #14abae 0%, #00ffc7 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #14abae 0%, #00ffc7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#14abae', endColorstr='#00ffc7', GradientType=1); /* IE6-9 */ } .content-rewards-list-item-header { position: relative; min-height: 18px; color: #fff; opacity: .5; } .content-rewards-list-item-header > span { font-weight: 400; font-size: 13px; line-height: 18px; overflow: hidden; white-space: normal; text-overflow: ellipsis; } .content-rewards-list-item[data-complete="complete"] > .content-rewards-list-item-header { opacity: 1; white-space: nowrap; } .content-rewards-list-item[data-complete="complete"] > .content-rewards-list-item-header > span { display: inline-block; width: 100%; padding: 0 26px 0 0; box-sizing: border-box; text-decoration: line-through; } .content-rewards-list-item[data-complete="complete"] > .content-rewards-list-item-header:after { content: ''; position: absolute; display: inline-block; height: 18px; width: 18px; right: 0; bottom: 0; margin: 0 0 0 8px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguMjE0MjcgMTMuNjQ1OUwxNC42NTMxIDcuMDYwODRDMTQuODc1NiA2LjgzMzU3IDE1IDYuNTI2OTkgMTUgNi4yMDgwM0MxNC45OTk0IDUuODg3MDcgMTQuODc0NSA1LjU3OTY3IDE0LjY1MzEgNS4zNTQxQzE0LjE4ODEgNC44ODE5NyAxMy40NDE4IDQuODgxOTcgMTIuOTc2OCA1LjM1NDFMNy44Mjc1MyAxMC42MTk0QzcuNTc2ODUgMTAuODc0NyA3LjE3MzgxIDEwLjg3NDcgNi45MjMxMyAxMC42MTk0TDUuMDIxMDUgOC42NzQ3NkM0LjU1NjM4IDguMjAyMzkgMy44MTAwMSA4LjIwMjM5IDMuMzQ1MzUgOC42NzQ3NkMzLjEyNDM1IDguOTAwMjQgMyA5LjIwNzUyIDMgOS41MjgxM0MzIDkuODQ4NzMgMy4xMjQzNSAxMC4xNTYgMy4zNDUzNSAxMC4zODE1TDYuNTM4MDIgMTMuNjQ1OUM3LjAwMjk5IDE0LjExOCA3Ljc0OTMgMTQuMTE4IDguMjE0MjcgMTMuNjQ1OVoiIGZpbGw9IndoaXRlIi8+PC9zdmc+); vertical-align: top; } .content-rewards-list-item-header > img { margin-right: 7px; vertical-align: top; } .content-rewards-list-item-header > img[src=""] { margin-right: 0; } .content-rewards-list-item-content { position: relative; text-align: left; } .content-rewards-list-item-content > span { display: inline-block; width: 100%; font-weight: 700; font-size: 18px; line-height: 22px !important; color: #ffef29; margin-bottom: 4px; text-align: left; } .reward-badge + span { max-width: 100px; } .content-rewards-list-item-content > .reward-badge { right: 0; bottom: 0; } #content-rewards-list > div:first-child:last-child > div > .content-rewards-list-item-content > span { max-width: 500px; } .content-rewards-list-item[data-complete=""] > .content-rewards-list-item-content > .reward-badge { background: rgba(0, 0, 0, .4); } #content-rewards-complete { position: relative; min-height: 50px; width: 100%; margin-top: 22px; padding: 7px 80px 7px 60px; box-sizing: border-box; border-radius: 2px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e8e1fe+0,e1f9ff+100 */ background: #e8e1fe; /* Old browsers */ background: -moz-linear-gradient(left, #e8e1fe 0%, #e1f9ff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #e8e1fe 0%, #e1f9ff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #e8e1fe 0%, #e1f9ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e1fe', endColorstr='#e1f9ff', GradientType=1); /* IE6-9 */ line-height: 36px; } #content-rewards-complete > img { position: absolute; top: 9px; left: 16px; } #content-rewards-complete-text { display: inline-block; width: 100%; font-weight: 400; font-size: 13px; color: #545454; line-height: 18px; vertical-align: middle; } #content-rewards-complete-text > span:first-child { margin-right: 8px; } #content-rewards-complete-text > span + span { display: inline-block; color: #808080; white-space: nowrap; } #content-rewards-complete > .reward-badge { display: inline-block; top: 15px; right: 16px; } @media screen and (max-width: 1250px) { #content-rewards > #content-rewards-list.streaks-4 > div { width: 50%; } } @media screen and (max-width: 600px) { #content-rewards > #content-rewards-list > div { width: 50%; } #content-rewards > #content-rewards-list.streaks-1 > div { width: 100%; } } #next-reward-progress-wrapper { width: 100%; margin: 30px 0 0; padding: 0 40px; box-sizing: border-box; } #content-wrapper-rewards + #next-reward-progress-wrapper { margin: 5px 0 0; } #next-reward-progress { position: relative; width: 100%; padding: 20px 20px 16px 14px; box-sizing: border-box; border-radius: 8px; background: #2ECB4E; cursor: default; } #next-reward-icon { position: absolute; height: 40px; width: 40px; top: 14px; left: 14px; overflow: hidden; } #next-reward-icon.locked { border-radius: 50%; } #next-reward-icon.locked > svg { display: none; } #next-reward-icon.locked:before { content: ''; position: absolute; display: block; height: 40px; width: 40px; top: 50%; left: 0; margin-top: -20px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAQlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////8IX9KGAAAAFXRSTlMARfd4aDcaBsH058WzpZaDWlBAJ8KvAhg5AAAAZElEQVQY032NSRKAIBADR0BA2cH8/6sK4sKFvqTSVZOhxmr33a70IgDGAPH0wiCUEmClCw5fw4N34RBrRLi+eCAsFwH63sWPieB8FJpID2KTchtPpMQoUpp8MV83Tai8dLIiOgG99AphCT/KewAAAABJRU5ErkJggg); background-repeat: no-repeat; background-position: center; } #next-reward-icon > img { display: none; } #next-reward-icon.locked > img { position: absolute; display: block; height: 100%; left: 0; vertical-align: top; opacity: 0.2; } #next-reward-status { width: 100%; padding: 0 0 0 54px; box-sizing: border-box; } #content #next-reward-status .unlocked-content { max-width: 100%; margin: 12px 0 0; } #next-reward-progressbar { display: block; height: 4px; width: 100%; border-radius: 4px; background-color: rgba(0, 0, 0, .25); overflow: hidden; } #next-reward-progressbar > div { height: 100%; border-radius: inherit; background-color: #FFF83B; } #next-reward-info { position: relative; width: 100%; margin: 12px 0 0; } #next-reward-info > div { display: inline-block; vertical-align: top; } #next-reward-names { width: calc(100% - 190px); padding: 0 16px 0 0; box-sizing: border-box; } #next-reward-names > div { width: 100%; margin: 0 0 6px; font-size: 12px; font-weight: 600; line-height: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #next-reward-names > div:last-child { margin: 0; } #next-reward-percent { position: absolute; width: 190px; right: 0; white-space: nowrap; text-align: right; } #next-reward-percent > div { display: inline-block; position: relative; } #next-reward-percent > div * { display: inline-block; vertical-align: middle; } #next-reward-percent > div > svg { position: absolute; top: 50%; left: 0; margin: -7px 0 0 0; display: none; } #next-reward-percent > div > img { display: inline-block; } #next-reward-percent > div > span { width: 100%; padding: 0 0 0 20px; box-sizing: border-box; font-size: 12px; font-weight: 400; line-height: 16px; color: #fff; white-space: normal; text-align: left; } #next-reward-percent > div > span > .strong { display: inline-block; font-weight: 600; line-height: 16px; } @media screen and (max-width: 1000px) { #next-reward-names, #next-reward-percent { display: block; width: 100%; } #next-reward-percent { position: static; width: 100%; margin: 12px 0 0; text-align: left; } } @media screen and (max-width: 800px) { #next-reward-names { display: inline-block; width: calc(100% - 190px); } #next-reward-percent { position: absolute; width: 190px; margin: 0; text-align: right; } } @media screen and (max-width: 530px) { #next-reward-names, #next-reward-percent { display: block; width: 100%; } #next-reward-percent { position: static; width: 100%; margin: 12px 0 0; text-align: left; } } #content-wrapper-gifts { padding: 15px 0 0; box-sizing: border-box; overflow: hidden; } #content-wrapper-gifts > input { display: none; } #content-wrapper-gifts > h3 { position: relative; height: 50px; width: 100%; padding: 0 40px; box-sizing: border-box; line-height: 50px; } #content-wrapper-gifts > h3 > label, #content-wrapper-gifts > h3 > label.show[for="input-xpbacks"] { position: relative; display: inline-block; height: 100%; border-width: 3px 0; border-style: solid; border-color: transparent; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; line-height: 44px; cursor: pointer; transition: .2s; } #content-wrapper-gifts > h3 > label.show[for="input-xpbacks"] { position: initial; } #content-wrapper-gifts > h3 > label[for="input-xpbacks"] { display: none; } #content-wrapper-gifts > #input-gifts:checked ~ h3 > label[for="input-gifts"], #content-wrapper-gifts > #input-xpbacks:checked ~ h3 > label[for="input-xpbacks"] { border-color: transparent transparent #66c4ff; color: #3d95cc; cursor: default; } #content-wrapper-gifts > h3 > label + label { margin-left: 35px; } #content-gifts-content { position: relative; display: block; height: 335px; } #content-gifts, #content-xpbacks { position: absolute; height: 100%; width: 100%; left: -100%; font-size: 0; white-space: nowrap; opacity: 0; visibility: hidden; transition: .4s; } #xpback-tooltip-info-wrapper > div:first-child { margin-bottom: 20px; } #xpback-tooltip-info-wrapper > div.active { color: #00d1ff; } #input-gifts:checked ~ #content-gifts-content > #content-gifts, #input-xpbacks:checked ~ #content-gifts-content > #content-xpbacks { left: 0; opacity: 1; visibility: visible; } #input-gifts:checked ~ #content-gifts-content > #content-gifts ~ div, #input-xpbacks:checked ~ #content-gifts-content > #content-xpbacks ~ div { left: 100%; } .button-gifts-seeall { position: absolute; display: none; height: 14px; top: -32px; right: 40px; font-weight: 400; font-size: 12px; color: #3d95cc; line-height: 14px; cursor: pointer; z-index: 1; opacity: 1; visibility: visible; transition: .2s; } .button-gifts-seeall.show { display: inline-block; } .button-gifts-seeall:hover { color: #3cafff; } #content-gifts-all-content, #content-xpbacks-all-content { position: relative; height: 100%; padding: 0 31px; box-sizing: border-box; line-height: 205px; overflow: hidden; } #content-gifts-all-content:after, #content-xpbacks-all-content.with-items:after { content: ''; position: absolute; height: 100%; width: 60px; top: 0; right: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+60,ffffff+100&0+0,1+60,1+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-9 */ pointer-events: none; } #wrapper-gifts-none { height: 100%; width: 100%; text-align: center; line-height: 56px; } #gifts-none { display: inline-block; font-weight: 400; font-size: 13px; color: #4d4d4d; line-height: 18px; vertical-align: middle; } .wrapper-gift-item { position: relative; display: inline-block; margin: 45px 7px 20px; white-space: normal; vertical-align: top; } .wrapper-gift-item[data-stack="stack"]:before { content: ''; position: absolute; display: block; height: 136px; width: 130px; top: -12px; left: -2px; background-image: url(/images/profiles/gift_stack.png); background-size: cover; background-repeat: no-repeat; } .gift-item { position: relative; display: block; height: 100px; width: 100px; margin: 0 13px; cursor: pointer; overflow: hidden; } .gift-item.reward-category:after { content: ''; position: absolute; height: 25px; width: 25px; top: 0; right: 0; background-repeat: no-repeat; } .gift-item.reward-category:after { background-image: url("/images/reward/points_icon.svg"); background-size: 25px; } .gift-item > img { height: 100%; opacity: 0; visibility: hidden; transition: .2s; } .gift-status { pointer-events: none; } .gift-status.new { position: absolute; width: 34px; height: 14px; top: 107px; left: 0; right: 0; margin: 0 auto; background-image: url(/images/profiles/new.svg); background-repeat: no-repeat; } #content-status-inner-gifts .gift-status.new { height: 9px; width: 30px; top: 116px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAJCAMAAAASPWyzAAAAflBMVEWM2FOM2FOM2FOM2FOM2FMAAACM2FOM2FN2tEX4+/V9wUqAxkv////u9umLvWRyr0Pm8d7G37K/26mgyYCDuVpzsUTs9OXr9OTf7dTb6s7L4rmx05eUwnB7vUjx9+zw9+vS5sPP5L+416Cu0ZOpzoyJvGJ9tVKGzk96vEh3tkaqF+dtAAAAB3RSTlPdCfuAxgCC/FYGnAAAAJJJREFUGNOFj1cSwyAMRIVLjIDYprk7vd7/giGAh5/MRKMf7UrzVlCSHLLqR2WQkxJI4QdOKX8z26yWvRin3IsFgV3YpfvetjUKieYkl44GNQfYbNTOvplB98P1vAYVINtsNTobL0q23TTzyE/Xd8Qa9UMfp/GwPON1YhslvmwjZiVoFdkpOWeNS86Y7yom//P3By1OCxxTtdMoAAAAAElFTkSuQmCC); } .gift-status.reward-category { position: absolute; height: 25px; width: 25px; top: 0; right: 13px; background-repeat: no-repeat; } .gift-status.reward-category { background-image: url("/images/reward/points_icon.svg"); background-size: 25px; } .gift-item.show > img { opacity: 1; visibility: visible; } .gift-item.animated > img { position: relative; height: 100%; left: 0; } .gift-item-xp { position: absolute; display: block; height: 16px; width: 100%; top: -17px; left: 0; line-height: 16px; text-align: center; } #content .gift-item-xp > span { display: inline-block; height: 100%; padding: 0 11px; border-radius: 16px; font-weight: 700; font-size: 11px; color: #fff; background-color: #9a47ff; line-height: 16px; } .wrapper-gift-item[data-stack="stack"] .gift-item-xp { height: 18px; top: -18px; } #content .wrapper-gift-item[data-stack="stack"] .gift-item-xp > span { border-radius: 18px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9a48ff+0,9433ff+50,ef42ff+100 */ background: #9a48ff; /* Old browsers */ background: -moz-linear-gradient(left, #9a48ff 0%, #9433ff 50%, #ef42ff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #9a48ff 0%, #9433ff 50%, #ef42ff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #9a48ff 0%, #9433ff 50%, #ef42ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9a48ff', endColorstr='#ef42ff', GradientType=1); /* IE6-9 */ line-height: 18px; } #content-xpbacks-all-content.error { line-height: 122px; } #content-xpbacks-all-content.error.upgrade { background-color: #f7f7f7; } #content-xpbacks #wrapper-xpbacks-none { background-color: #fafeff; border: 1px solid rgba(65, 10, 74, 0.08); box-sizing: border-box; border-radius: 7px; padding: 32px 20px; margin-top: 12px; } #wrapper-xpbacks-none { display: inline-block; width: 100%; text-align: center; line-height: normal; vertical-align: middle; white-space: normal; } #wrapper-xpbacks-none > div { display: inline-block; font-weight: 400; font-size: 13px; color: #4d4d4d; line-height: 18px; vertical-align: middle; width: 80%; margin-bottom: 15px; } #wrapper-xpbacks-none > div.xpback-info-item { font-size: 15px; font-style: normal; font-weight: 700; line-height: 19px; color: #4d4d4d; margin: 4px 0; position: relative; } div.xpback-info-item > div { display: inline-block; width: 150px; text-align: left; } div.xpback-info-item > div:first-child { width: 75px; text-align: left; } #wrapper-xpbacks-none > div.xpback-info-item img { fill: #4d4d4d; } #wrapper-xpbacks-none > div.xpback-info-item.active { color: #27B744; } div.xpback-info-item .active-pointer, div.xpback-info-item.active .active-pointer.hide { display: none; } div.tooltip-info-item { position: relative; } #xpback-tooltip-info-wrapper div.tooltip-info-item.active .active-pointer { left: 200px; top: -13px; } #xpback-tooltip-info-wrapper div.tooltip-info-item.active .active-pointer:after { left: initial; right: 108px; border-right: 20px solid #00d1ff; border-left: none; } #xpback-tooltip-info-wrapper div.xpback-info-item.active .active-pointer > h3 { line-height: 18px; font-size: 13px; } div.xpback-info-item.active .active-pointer { display: block; background-color: #00d1ff; width: 110px; height: 44px; position: absolute; left: -18px; top: -10px; border-radius: 4px; padding: 4px 8px; box-sizing: border-box; } div.xpback-info-item.active .active-pointer:after { content: ''; display: block; position: absolute; left: 108px; bottom: 0; width: 0; height: 0; border-left: 20px solid #00d1ff; border-top: 22px solid transparent; border-bottom: 22px solid transparent; } div.xpback-info-item.active .active-pointer > * { font-style: normal; text-align: left; color: #ffffff; display: block; } div.xpback-info-item.active .active-pointer > span { font-weight: 600; line-height: 15px; font-size: 11px; } div.xpback-info-item.active .active-pointer > h3 { font-weight: 700; line-height: 20px; font-size: 15px; } #wrapper-xpbacks-none > div.xpback-info-item.active svg { fill: #00d1ff; } #wrapper-xpbacks-none > div.xpback-info-item span, #wrapper-xpbacks-none > div.xpback-info-item svg { vertical-align: middle; } @media screen and (max-width: 380px) { #content-gifts { margin-left: -24px; margin-right: -24px; } } input[name="friends"], input[name="friends-tail"] { display: none; } #content-wrapper-friends { position: relative; width: 100%; padding-top: 20px; padding-bottom: 30px; } #content-wrapper-gifts ~ #content-wrapper-friends { padding-top: 0; } #content-wrapper-friends > h3 { position: relative; height: 50px; width: 100%; padding: 0 40px; box-sizing: border-box; line-height: 50px; } #content-wrapper-friends > h3:before { content: ''; position: absolute; display: block; height: 1px; bottom: 0; left: 40px; right: 40px; background-color: #dbdbdb; } #content-wrapper-friends > h3 > label, #content-wrapper-friends > h3 > label.show[for="input-added"] { position: relative; display: inline-block; height: 100%; border-width: 3px 0; border-style: solid; border-color: transparent; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; line-height: 44px; cursor: pointer; transition: .2s; } #content-wrapper-friends > h3 > label[for="input-added"] { display: none; } #content-info-inner > #content-wrapper-friends > h3 > label:hover { color: #4a4a4a; } #content-wrapper-friends > #input-friends:checked ~ h3 > label[for="input-friends"], #content-wrapper-friends > #input-added:checked ~ h3 > label[for="input-added"] { border-color: transparent transparent #66c4ff; color: #3d95cc; pointer-events: none; cursor: default; } #content-wrapper-friends > h3 > label + label { margin-left: 35px; } #content-wrapper-friends > h3 > label[data-count]:not([data-count="0"]):after { content: attr(data-count); position: absolute; display: inline-block; height: 13px; min-width: 13px; top: 6px; right: -10px; padding: 0 3px; box-sizing: border-box; border-radius: 13px; font-weight: 600; font-size: 9px; color: #fff; line-height: 13px; text-align: center; background-color: #40bd5e; cursor: default; } #content-wrapper-friends > h3 > div { position: absolute; display: none; top: 0; right: 40px; font-size: 0; white-space: nowrap; } #content-wrapper-friends > h3 > div.show { display: inline-block; } #content-wrapper-friends > h3 > div * { display: inline-block; font-size: 10px; color: #9e9e9e; vertical-align: middle; } #content-wrapper-friends > h3 > div > span { padding-right: 2px; line-height: 20px; cursor: default; } #content-wrapper-friends > h3 > div > svg { margin-left: 6px; cursor: pointer; } #fb-button > path, #tw-button > path { transition: .2s; } #fb-button:hover > path { fill: #4d6eb3; } #fb-button:active > path { fill: #273e6f; } #tw-button:hover > path { fill: #30c0fb; } #tw-button:active > path { fill: #0097d6; } #content-friends { position: relative; width: 100%; overflow: hidden; transition: .4s; } #content-friends-tail, #content-friends-added-tail { position: absolute; width: 100%; top: 0; left: -100%; opacity: 0; visibility: hidden; transition: .4s; } #input-friends:checked ~ #content-friends > #content-friends-tail, #input-added:checked ~ #content-friends > #content-friends-added-tail { left: 0; opacity: 1; visibility: visible; } #input-friends:checked ~ #content-friends > #content-friends-tail ~ div, #input-added:checked ~ #content-friends > #content-friends-added-tail ~ div { left: 100%; } #content-friends-tail > h3 { display: block; height: 64px; padding: 0 40px; line-height: 64px; white-space: nowrap; } #content-friends-tail > h3 > label { display: inline-block; height: 20px; font-weight: 400; font-size: 14px; color: #808080; line-height: 20px; vertical-align: middle; cursor: pointer; transition: .2s; } #content-friends-tail > h3 > label:hover { color: #4a4a4a; } #input-friends-all:checked ~ h3 > label[for="input-friends-all"], #input-friends-online:checked ~ h3 > label[for="input-friends-online"] { color: #3d95cc; pointer-events: none; cursor: default; } #content-friends-tail > h3 > label:after { content: attr(data-count); display: inline-block; padding-left: 3px; } #content-friends-tail > h3 > label + label { margin-left: 20px; } #content-friends > #content-friends-tail > h3 > label + label[data-count=""], #content-friends > #content-friends-tail > h3 > label + label[data-count="0"] { color: #808080; pointer-events: none; cursor: default; } #content-friends-tail-content { position: relative; } #content-friends-added-tail { padding-top: 64px; } #content-friends-tail-content { position: relative; width: 100%; transition: .4s; } #content-friends-all-tail, #content-friends-online-tail { position: absolute; width: 100%; top: 0; left: -100%; opacity: 0; visibility: hidden; transition: left .4s ease 0s, opacity .2s ease 0s, visibility .2s ease 0s; } #input-friends-all:checked ~ #content-friends-tail-content > #content-friends-all-tail, #input-friends-online:checked ~ #content-friends-tail-content > #content-friends-online-tail { left: 0; opacity: 1; visibility: visible; transition: left .4s ease 0s, opacity .2s ease .2s, visibility .2s ease .2s; } #input-friends-all:checked ~ #content-friends-tail-content > #content-friends-all-tail ~ div, #input-friends-online:checked ~ #content-friends-tail-content > #content-friends-online-tail ~ div { left: 100%; } #content-friends-all-tail:after, #content-friends-online-tail:after, #content-friends-added-tail:after { content: ''; position: absolute; display: block; height: 100%; width: 60px; top: 0; right: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+60,ffffff+100&0+0,1+60,1+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-9 */ pointer-events: none; } #content-friends-all-tail-content, #content-friends-online-tail-content, #content-friends-added-tail-content, #content-friends-all { width: 100%; padding: 0 20px; box-sizing: border-box; white-space: nowrap; } #content-friends-all-tail-content, #content-friends-online-tail-content, #content-friends-added-tail-content { overflow-x: hidden; } #content-friends-all-tail-content > div, #content-friends-online-tail-content > div, #content-friends-added-tail-content > div, #content-friends-all > div { position: relative; display: inline-block; width: 140px; padding: 0 5px 40px; box-sizing: border-box; text-align: center; } #content-friends-all-tail-content > .wrapper-friends-none, #content-friends-online-tail-content > .wrapper-friends-none, #content-friends-added-tail-content > .wrapper-friends-none, #content-friends-all > .wrapper-friends-none { height: 120px; width: 100%; margin-bottom: 48px; padding: 0; text-align: center; line-height: 120px; } .friends-none { display: inline-block; font-weight: 400; font-size: 13px; color: #4d4d4d; line-height: 18px; vertical-align: middle; } .friends-none > a { color: #3d95cc; transition: .2s; } .friends-none > a:hover { color: #3cafff; } .friends-none > a:active { color: #0075c7; } .wrapper-friend-item-avatar { display: inline-block; height: 100px; width: 100px; margin-bottom: 10px; border-radius: 100%; overflow: hidden; cursor: pointer; } .friend-item-avatar { display: block; height: 100%; margin: 0 -25px; } .friend-item-avatar:before { content: attr(data-nickname); position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; font-size: 26px; text-align: center; line-height: 100px; } .friend-item-avatar > img { position: relative; height: 100%; max-width: 100%; opacity: 0; visibility: hidden; transition: .2s; } .friend-item-avatar.show > img { opacity: 1; visibility: visible; } .friend-item-flair { position: absolute; height: 32px; width: 32px; top: 71px; left: 17px; opacity: 0; visibility: hidden; transition: .2s; } .friend-item-flair.show { opacity: 1; visibility: visible; } .friend-item-status-icon { position: absolute; display: none; height: 18px; width: 18px; top: 3px; right: 23px; border: 2px solid #fff; border-radius: 100%; box-sizing: border-box; white-space: nowrap; vertical-align: middle; } .friend-item-status-icon > svg { position: absolute; display: none; height: 18px; width: 18px; top: -2px; left: -2px; } .friend-item-nickname { position: relative; display: block; height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; cursor: default; } .friend-item-nickname:after { content: ''; position: absolute; display: block; height: 100%; width: 10px; top: 0; right: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-9 */ pointer-events: none; } .friend-item-nickname > img { display: none; max-height: 12px; margin-right: 5px; vertical-align: middle; } .friend-item-nickname > img.show { display: inline-block; } .friend-item-nickname > img[src=""] { display: none; } #content .friend-item-nickname > a { display: inline-block; height: inherit; font-weight: 400; font-size: 12px; color: rgba(0, 0, 0, .7); line-height: 18px; vertical-align: middle; cursor: pointer; } .button-friends-seeall { position: absolute; display: none; height: 14px; top: -39px; right: 40px; font-weight: 400; font-size: 12px; color: #3d95cc; line-height: 14px; cursor: pointer; z-index: 1; opacity: 1; visibility: visible; transition: .2s; } .button-friends-seeall.show { display: inline-block; } .button-friends-seeall:hover { color: #3cafff; } .button-friends-seeall:active { color: #0075c7; } #content-friends-added-tail > .button-friends-seeall { top: 24px; } @media screen and (max-width: 380px) { #content-friends-all-tail-content { padding-right: 0; } } #content-wrapper-tippers { position: relative; width: 100%; padding: 20px 20px 0; box-sizing: border-box; } #content-wrapper-gifts ~ #content-wrapper-tippers { margin-top: -16px; padding-top: 0; } #content-wrapper-tippers > h3 { position: relative; height: 22px; padding: 0 20px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; line-height: 22px; } #content-wrapper-tippers > h3 > span { color: #b9b9b9; } #content-wrapper-tippers > h3 > div { position: absolute; height: 14px; top: 6px; right: 20px; font-weight: 400; font-size: 12px; color: #3d95cc; line-height: 14px; cursor: pointer; opacity: 1; visibility: visible; transition: .2s; } #content-wrapper-tippers > h3 > div:hover { color: #3cafff; } #content-wrapper-tippers > h3 > div:active { color: #0075c7; } #content-wrapper-tippers > h3[data-count=""] > div, #content-wrapper-tippers > h3[data-count="0"] > div { display: none; } #content-tippers { position: relative; display: block; height: 180px; margin: 20px -5px 0; font-size: 0; white-space: nowrap; overflow: hidden; } #content-tippers:after { content: ''; position: absolute; height: 100%; width: 60px; top: 0; right: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+60,ffffff+100&0+0,1+60,1+100 */ background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-9 */ pointer-events: none; } #content-tippers > div, #content-tippers-all > div { position: relative; display: inline-block; width: 140px; padding: 0 5px 40px; box-sizing: border-box; text-align: center; } .wrapper-tipper-item-avatar { display: inline-block; height: 100px; width: 100px; margin-bottom: 10px; border-radius: 100%; overflow: hidden; cursor: pointer; } .tipper-item-avatar { display: block; height: 100%; margin: 0 -25px; } .tipper-item-avatar:before { content: attr(data-nickname); position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; font-size: 26px; text-align: center; line-height: 100px; } .tipper-item-avatar > img { position: relative; height: 100%; max-width: 100%; opacity: 0; visibility: hidden; transition: .2s; } .tipper-item-avatar.show > img { opacity: 1; visibility: visible; } .tipper-item-flair { position: absolute; height: 32px; width: 32px; top: 71px; left: 17px; opacity: 0; visibility: hidden; transition: .2s; } .tipper-item-flair.show { opacity: 1; visibility: visible; } .tipper-item-status-icon { position: absolute; display: inline-block; height: 18px; width: 18px; top: 3px; right: 23px; border: 2px solid #fff; border-radius: 100%; box-sizing: border-box; white-space: nowrap; vertical-align: middle; } .tipper-item-status-icon > svg { position: absolute; display: none; height: 18px; width: 18px; top: -2px; left: -2px; } .tipper-item-nickname { position: relative; display: block; height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; cursor: default; } .tipper-item-nickname:after { content: ''; position: absolute; display: block; height: 100%; width: 10px; top: 0; right: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-9 */ pointer-events: none; } .tipper-item-nickname > img { display: none; max-height: 12px; margin-right: 5px; vertical-align: middle; } .tipper-item-nickname > img.show { display: inline-block; } #content .tipper-item-nickname > a { display: inline-block; height: inherit; font-weight: 400; font-size: 12px; color: rgba(0, 0, 0, .7); line-height: inherit; vertical-align: middle; cursor: pointer; } .tipper-item-tips { height: 14px; font-weight: 400; font-size: 10px; color: #808080; text-align: center; } #content-wrapper-frogcasts { position: relative; width: 100%; padding: 0 0 30px 0; box-sizing: border-box; } #content-wrapper-gifts ~ #content-wrapper-frogcasts { margin-top: -16px; } .frogcast-item { position: relative; display: block; min-height: 190px; width: 100%; padding: 15px 40px; box-sizing: border-box; background-color: #f8fbff; text-align: left; } .frogcast-item + .frogcast-item { margin-top: 8px; } .frogcast-item-close { position: absolute; height: 20px; width: 20px; top: 14px; right: 14px; line-height: 20px; text-align: center; cursor: pointer; transition: .2s; } .frogcast-item-close:hover { -webkit-filter: brightness(110%); filter: brightness(110%); } .frogcast-item-close:active { -webkit-filter: brightness(90%); filter: brightness(90%); } .frogcast-item-close > svg { display: inline-block; vertical-align: middle; } .frogcast-item > img { position: absolute; height: 160px; width: 160px; top: 15px; left: 40px; } .frogcast-item-wrapper-text { height: 100%; width: 100%; left: 200px; padding: 0 0 0 190px; box-sizing: border-box; } .frogcast-item-wrapper-text:before { content: ''; display: inline-block; height: 100%; min-height: 160px; width: 0; vertical-align: middle; } .frogcast-item-text { display: inline-block; width: 100%; color: #fff; vertical-align: middle; } .frogcast-item.default-color .frogcast-item-text { color: #363636; } .frogcast-item-text > h3 { margin-bottom: 10px; font-weight: 600; font-size: 16px; line-height: 22px; } .frogcast-item-text > div { margin-bottom: 20px; font-weight: 400; font-size: 13px; line-height: 18px; opacity: .5; } .frogcast-item-text > a { display: inline-block; padding: 0 12px; border-radius: 3px; font-weight: 600; font-size: 12px; color: #fff; background-color: #40bd5e; line-height: 24px; text-decoration: none; transition: .2s; } .frogcast-item-text > a:hover { -webkit-filter: brightness(110%); filter: brightness(110%); } .frogcast-item-text > a:active { -webkit-filter: brightness(90%); filter: brightness(90%); } @media screen and (max-width: 480px) { .frogcast-item > img { position: static; } .frogcast-item-wrapper-text { padding: 14px 0 0 0; } .frogcast-item-wrapper-text:before { min-height: inherit; } } #content-inner.show-gifts > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-gifts > #content-info > #content-info-inner > div:not(#content-wrapper-gifts-all), #content-wrapper-gifts-all { display: none; } #content-inner.show-gifts > #content-info > #content-info-inner > #content-wrapper-gifts-all { display: block } #content-wrapper-gifts-all { border-radius: 4px; overflow: hidden; } #content-gifts-all-header { position: relative; padding: 0 20px 45px; box-sizing: border-box; } #content-gifts-all-header > h2 { width: 100%; padding: 37px 120px 20px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; text-align: center; } #content-gifts-all-header > h2 > span { color: #b9b9b9; } #content-gifts-all { text-align: center; } #content-inner.show-xpbacks > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-xpbacks > #content-info > #content-info-inner > div:not(#content-wrapper-xpbacks-all), #content-wrapper-xpbacks-all { display: none; } #content-inner.show-xpbacks > #content-info > #content-info-inner > #content-wrapper-xpbacks-all { display: block } #content-wrapper-xpbacks-all { border-radius: 4px; overflow: hidden; } #content-xpbacks-all-header { position: relative; padding: 0 20px 45px; box-sizing: border-box; } #content-xpbacks-all-header > h2 { width: 100%; padding: 37px 120px 20px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; text-align: center; } #content-xpbacks-all-header > h2 > span { color: #b9b9b9; } #content-xpbacks-all { text-align: center; } #content-inner.show-gifts > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-gifts > #content-info > #content-info-inner > div:not(#content-wrapper-gifts-all), #content-wrapper-gifts-all { display: none; } #content-inner.show-gifts > #content-info > #content-info-inner > #content-wrapper-gifts-all { display: block } #content-wrapper-gifts-all { border-radius: 4px; overflow: hidden; } #content-gifts-all-header { position: relative; padding: 0 20px 45px; box-sizing: border-box; } #content-gifts-all-header > h2 { width: 100%; padding: 37px 120px 20px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; text-align: center; } #content-gifts-all-header > h2 > span { color: #b9b9b9; } #content-gifts-all { text-align: center; } #content-inner.show-friends > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-friends > #content-info > #content-info-inner > div:not(#content-wrapper-friends-all), #content-wrapper-friends-all { display: none; } #content-inner.show-friends > #content-info > #content-info-inner > #content-wrapper-friends-all { display: block } #content-wrapper-friends-all { border-radius: 4px; overflow: hidden; } #content-friends-all { padding: 0; white-space: normal; text-align: center; } #content-friends-all-header { position: relative; padding: 0 20px 45px; box-sizing: border-box; } #content-friends-all-header > h2 { width: 100%; padding: 37px 120px 20px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; text-align: center; } #content-friends-all-header > h2 > span { color: #b9b9b9; } #content-inner.show-tippers > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-tippers > #content-info > #content-info-inner > div:not(#content-wrapper-tippers-all), #content-wrapper-tippers-all { display: none; } #content-inner.show-tippers > #content-info > #content-info-inner > #content-wrapper-tippers-all { display: block } #content-wrapper-tippers-all { border-radius: 4px; overflow: hidden; } #content-tippers-all { padding: 0; white-space: normal; text-align: center; } #content-tippers-all-header { position: relative; padding: 0 20px 45px; box-sizing: border-box; } #content-tippers-all-header > h2 { width: 100%; padding: 37px 120px 20px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; text-align: center; } #content-tippers-all-header > h2 > span { color: #b9b9b9; } @keyframes avatar_right { 0% { left: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { left: 47px; transform: rotate(15deg); -webkit-transform: rotate(15deg); } } @-webkit-keyframes avatar_right { 0% { left: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { left: 47px; transform: rotate(15deg); -webkit-transform: rotate(15deg); } } @keyframes avatar_left { 0% { left: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { left: -47px; transform: rotate(-15deg); -webkit-transform: rotate(-15deg); } } @-webkit-keyframes avatar_left { 0% { left: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { left: -47px; transform: rotate(-15deg); -webkit-transform: rotate(-15deg); } } #content-inner.show-subscription > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-subscription > #content-info > #content-info-inner > div:not(#content-wrapper-subscription), #content-wrapper-subscription { display: none; } #content-inner.show-subscription > #content-info > #content-info-inner > #content-wrapper-subscription { display: block; } #content-wrapper-subscription { border-radius: 4px; text-align: center; overflow: hidden; } #content-subscription-header { position: relative; text-align: left; } #content-subscription-header > h2 { width: 100%; padding: 37px 120px 36px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; text-align: center; } #content-subscription-header > a { position: absolute; display: none; top: 36px; right: 35px; height: 26px; min-width: 80px; padding: 0 10px; border-radius: 4px; box-sizing: border-box; font-family: Roboto, Tahoma, Arial, sans-serif; font-weight: 400; font-size: 12px; color: #fff; line-height: 26px; text-align: center; background-color: #40bd5e; cursor: pointer; transition: .2s; } #content-subscription-header > a:hover { background-color: #53ce70; } #content-subscription-header > a:active { background-color: #30a14b; } #content-subscription-header > a.show { display: inline-block; } #content-subscription-inner { padding-bottom: 40px; } .content-subscription-item { position: relative; padding: 14px 38px 22px; border-width: 0 2px; border-style: solid; border-color: transparent; box-sizing: border-box; font-weight: 400; font-size: 13px; color: #4d4d4d; } .content-subscription-item + .content-subscription-item { margin-top: 1px; } .content-subscription-item.gold { border-color: #fdbd2d; background-color: #fff8eb; } .content-subscription-item.extreme { border-color: #9950a7; background-color: #fdf0ff; } .content-subscription-item.pro { border-color: #46c560; background-color: #e4fbe9; } .content-subscription-item.subscribe, .content-subscription-item.recurrent { padding-bottom: 40px; } .content-subscription-item.cancel { padding-bottom: 18px; } .content-subscription-item > h3 { position: relative; display: block; height: 22px; margin-bottom: 7px; font-weight: 700; font-size: 16px; line-height: 22px; text-align: left; } .content-subscription-item.gold > h3 { color: #fdbd2d; } .content-subscription-item.extreme > h3 { color: #9950a7; } .content-subscription-item.pro > h3 { color: #46c560; } .content-subscription-item + .content-subscription-item > h3 { height: 19px; font-size: 14px; line-height: 19px; } .content-subscription-item > h3:after { content: 'Active'; position: absolute; display: inline-block; top: 0; right: 0; color: #40bd5e; } .content-subscription-item + .content-subscription-item > h3:after { content: 'On hold'; font-weight: 400; font-size: 13px; color: #484848; opacity: .5; } .content-subscription-item > h3 > span { display: inline-block; height: inherit; line-height: inherit; text-transform: uppercase; } #content-inner.show-rewards > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-rewards > #content-info > #content-info-inner > div:not(#content-rewards-all), #content-rewards-all { display: none; } #content-inner.show-rewards > #content-info > #content-info-inner > #content-rewards-all { display: block; } #content-rewards-all { border-radius: 4px; text-align: center; overflow: hidden; } .content-rewards-header { position: relative; text-align: left; } .content-rewards-header > h2 { width: 100%; padding: 37px 120px 36px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; text-align: center; } .content-rewards-header > span { position: absolute; top: 36px; right: 35px; height: 26px; min-width: 80px; padding: 0 10px; border-radius: 4px; box-sizing: border-box; font-family: Roboto, Tahoma, Arial, sans-serif; font-weight: 400; font-size: 12px; color: #fff; line-height: 26px; text-align: center; background-color: #40bd5e; cursor: pointer; transition: .2s; } #content-rewards-all .content-rewards-header > span { line-height: 26px; } .content-rewards-header > span:hover { background-color: #53ce70; } .content-rewards-header > span:active { background-color: #30a14b; } #content-rewards-inner { padding: 0 40px 40px; box-sizing: border-box; } #content-rewards-inner-info, #content-rewards-inner > .reward-status, #content-rewards-more-inner > .reward-status { position: relative; display: block; margin: 0 -40px; padding: 0 30px 9px 60px; box-sizing: border-box; background: #2ECB4E; text-align: left; } #content-rewards-more-inner > .reward-status { margin: 0; } #content-rewards-inner > .reward-status, #content-rewards-more-inner > .reward-status { min-height: 80px; padding: 13px 30px 18px 44px; } #content-rewards-inner-info:before, #content-rewards-more-inner > .reward-status:before, .reward-status:before { content: ''; position: absolute; display: block; height: 100%; width: 100%; right: 0; bottom: 0; background-position: right bottom; background-repeat: no-repeat; } #content-rewards-more-inner > .reward-status:before, #content-rewards-inner-info.internal:before, #content-rewards-inner > .reward-status:before { background-image: url("/images/reward/right_banner_history.png"); } #content-rewards-list > .reward-status:before { width: 75px; background-size: 100%; background-position: right bottom; } #content-rewards-inner-info > div { position: relative; display: inline-block; padding: 18px 60px 6px 0; vertical-align: top; } #content-rewards-inner-info > div > h4 { padding-bottom: 9px; font-weight: 400; font-size: 10px; color: rgba(255, 255, 255, .9); white-space: nowrap; text-transform: uppercase; } #content-rewards-inner-info > div > div { display: inline-block; vertical-align: middle; white-space: nowrap; } #content-rewards-inner-info > div > div > * { display: inline-block; vertical-align: middle; } #content .unlocked-content { display: inline-block; max-width: 215px; font-size: 13px; font-weight: 400; line-height: 20px; white-space: normal; color: #fff; } .unlocked-content > .strong { font-weight: 600; } #content-rewards-inner-info-points > div > img { display: inline-block; margin-right: 8px; } #content-rewards-inner-info-points > div > span { font-weight: 600; font-size: 18px; color: #fff; line-height: 24px; } #content-rewards-inner-info-to-next > div > svg { margin-right: 8px; transform: rotate(-90deg); transform-origin: center; } #content-rewards-inner-info-to-next > div > svg > circle { stroke-width: 2px; stroke: rgba(0, 0, 0, .3); fill: none; fill-rule: evenodd; } #content-rewards-inner-info-to-next > div > svg > circle + circle { stroke-dashoffset: 0; stroke: #FFF83B; } #content-rewards-inner-info-to-next > div > span { font-weight: 600; font-size: 18px; color: #fff; line-height: 24px; } #content-rewards-inner-info-next-bonus > div { position: relative; } #content-rewards-inner-info-next-bonus > div > svg { position: absolute; display: inline-block; height: 14px; width: 14px; top: 50%; left: 0; margin-top: -7px; } #content-rewards-inner-info-next-bonus > div > div { position: relative; display: block; padding-left: 24px; box-sizing: border-box; font-weight: 600; font-size: 13px; color: #fff; line-height: 18px; } #content-rewards-inner-info-next-bonus > div > div:before { content: ''; position: absolute; display: block; height: 14px; width: 14px; top: 2px; left: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOBAMAAADtZjDiAAAAJFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmWAJHAAAADHRSTlNNADo0Ny4fPjwkDxpeCc8LAAAAT0lEQVQI12MQFJQsqBQUBNIO7AyOQFqMSVCIDUgLcwlKMQNpCUZBQQ4g7cCkpMTgyCDIAAKMIJoZSicmQOjAAAhtaAChtRWANFx9AIgOBADO2wdQxY5aSAAAAABJRU5ErkJggg); } #content-rewards-inner-table { padding-top: 12px; } #content-rewards-inner-table > div { position: relative; height: 50px; padding: 0 120px 0 140px; border-bottom: 1px solid rgba(0, 0, 0, .05); box-sizing: border-box; } #content-rewards-inner-table > div > div { padding-left: 20px; box-sizing: border-box; font-weight: 400; font-size: 12px; color: #4d4d4d; line-height: 50px; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #content-rewards-inner-table > div > div:first-child, #content-rewards-inner-table > div > div:last-child { position: absolute; display: inline-block; height: 50px; width: 140px; left: 0; bottom: 0; font-weight: 700; line-height: 50px; } #content-rewards-inner-table > div > div:last-child { width: 120px; left: auto; right: 0; font-weight: 400; } #content-rewards-inner-table > div:first-child > div { font-weight: 400; color: #b7b7b7; } #content-rewards-inner-table > div > div > svg { display: inline-block; margin-right: 8px; vertical-align: middle; } #content-rewards-inner-table > div > div > span { display: inline-block; vertical-align: middle; width: calc(100% - 24px);overflow: hidden; text-overflow: ellipsis; } #content-rewards-inner-loadmore { display: none; padding: 40px 0 0; } #content-rewards-inner-loadmore.show { display: block; } #content-rewards-inner-loadmore > div { display: inline-block; height: 30px; padding: 0 20px; border: 2px solid #cedbea; border-radius: 3px; box-sizing: border-box; font-weight: 600; font-size: 12px; color: #3cafff; line-height: 26px; background-color: #edf5fa; vertical-align: middle; cursor: pointer; transition: .2s; } #content-rewards-inner-loadmore > div:hover, #content-rewards-inner-loadmore > div:active { border-color: #bfddff; color: #3494d9; background-color: #d9f0ff; } #content-rewards-inner-loadmore > div:active { background-color: #b3e0ff; } #content-rewards-inner-info > div:last-child { padding-right: 30px; } @media screen and (max-width: 600px) { #content-rewards-inner-info { padding-left: 50px; } #content-rewards-inner-table > div { padding: 0 100px 0 85px; } #content-rewards-inner-table > div > div { padding-left: 10px; } #content-rewards-inner-table > div > div:first-child { width: 85px; } #content-rewards-inner-table > div > div:last-child { width: 100px; } } @media screen and (max-width: 450px) { #content-rewards-inner { padding-left: 30px; padding-right: 30px; } #content-rewards-inner-info { padding-left: 40px; margin-left: -30px; margin-right: -30px; } } #content-inner.show-rewards-more > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-rewards-empty-history > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-rewards-more > #content-info > #content-info-inner > div:not(#content-rewards-more), #content-inner.show-rewards-empty-history > #content-info > #content-info-inner > div:not(#content-rewards-more), #content-rewards-more { display: none; } #content-inner.show-rewards-more > #content-info > #content-info-inner > #content-rewards-more, #content-inner.show-rewards-empty-history > #content-info > #content-info-inner > #content-rewards-more{ display: block; } #content-rewards-more { border-radius: 4px; text-align: center; overflow: hidden; } #content-rewards-more-inner { padding: 0 0 40px; box-sizing: border-box; } #content-rewards-more-inner > #content-rewards-inner-info { margin-left: 0; margin-right: 0; } #content-rewards-more-inner-header { padding: 40px 40px 30px; font-weight: 400; font-size: 16px; color: #808080; line-height: 22px; text-align: center; } #content-rewards-more-inner-list { } #content-rewards-more-inner-list > div { position: relative; padding: 7px 170px 7px 80px; box-sizing: border-box; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e8e1fe+0,e1f9ff+100 */ background: #e8e1fe; /* Old browsers */ background: -moz-linear-gradient(left, #e8e1fe 0%, #e1f9ff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #e8e1fe 0%, #e1f9ff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #e8e1fe 0%, #e1f9ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e1fe', endColorstr='#e1f9ff', GradientType=1); /* IE6-9 */ text-align: left; line-height: 51px; } #content-rewards-more-inner-list > div + div { margin-top: 8px; } #content-rewards-more-inner-list > div > img { position: absolute; top: 17px; left: 30px; } #content-rewards-more-inner-list > div > div { display: inline-block; width: 100%; max-width: 380px; font-weight: 400; font-size: 12px; color: #808080; line-height: 17px; vertical-align: middle; } #content-rewards-more-inner-list > div > div > strong { font-weight: 700; color: #4d4d4d; } #content-rewards-more-inner-list > div > a { position: absolute; display: inline-block; height: 26px; min-width: 120px; top: 20px; right: 30px; padding: 0 10px; border-radius: 4px; box-sizing: border-box; background-color: #40bd5e; font-weight: 400; font-size: 12px; color: #fff; line-height: 26px; text-align: center; transition: .2s; } #content-rewards-more-inner-list > div > a:hover { background-color: #53ce70; } #content-rewards-more-inner-list > div > a:active { background-color: #30a14b; } @media screen and (max-width: 560px) { #content-rewards-more-inner-list > div { padding-top: 16px; padding-bottom: 16px; padding-right: 30px; line-height: 1; } #content-rewards-more-inner-list > div > div { display: block; } #content-rewards-more-inner-list > div > a { position: static; margin-top: 16px; } } .content-subscription-item-row { position: relative; display: block; height: 20px; font-weight: 400; font-size: 13px; color: #4d4d4d; line-height: 20px; text-align: left; } .content-subscription-item.subscribe > .content-subscription-item-row, .content-subscription-item.recurrent > .content-subscription-item-row { height: 30px; line-height: 30px; } .content-subscription-item.recurrent > .content-subscription-item-row { display: block; } .content-subscription-item-row + .content-subscription-item-row { display: none; border-top: 1px solid rgba(0, 0, 0, .05); } #content .content-subscription-item-row > span { display: inline-block; height: 18px; line-height: 18px; vertical-align: middle; } .content-subscription-item-row > span + span { position: absolute; top: 8px; right: 0; } #content .content-subscription-item-row > span.content-subscription-item-row-lifetime { display: none; } #content .content-subscription-item-row.lifetime > span.content-subscription-item-row-lifetime { display: inline-block; } #content .content-subscription-item-row.lifetime > span.content-subscription-item-row-remaining { display: none; } .content-subscription-item-capitalize { text-transform: capitalize; } .content-subscription-item-cancel { display: none; } .content-subscription-item.cancel > .content-subscription-item-cancel { display: block; height: 14px; text-align: right; } .content-subscription-item-cancel > a { font-weight: 400; font-size: 10px; color: #3d95cc; transition: .2s; } .content-subscription-item-cancel > a:hover { color: #3cafff; } .content-subscription-item-cancel > a:active { color: #0075c7; } #content-settings-inner-sms-label { position: relative; display: none; min-height: 54px; width: 100%; margin-bottom: 28px; padding: 16px 120px 16px 43px; border-radius: 5px; box-sizing: border-box; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6339f5+0,65e0fe+100 */ background: #6339f5; /* Old browsers */ background: -moz-linear-gradient(left, #6339f5 0%, #65e0fe 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #6339f5 0%, #65e0fe 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #6339f5 0%, #65e0fe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6339f5', endColorstr='#65e0fe', GradientType=1); /* IE6-9 */ line-height: 22px; box-shadow: 0 5px 18px 0 rgba(0, 0, 0, .1); overflow: hidden; } #content-settings-inner-sms-label.show { display: block; } #content-settings-inner-sms-label:before { content: ''; position: absolute; display: block; height: 100%; width: 100%; right: 0; bottom: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHUAAABwCAMAAAAXF889AAABKVBMVEUAAAD////4///////////////////////////////////////w/P/i+v/Q9//q/P/l+/++9P/a+f+y8f+c7v+V7f+w8f+Y7v+49v/c//+68/+28v+T7P+H7f/E9P+j7/+G8v+N9f+p8P+n8P+l7/+h7//n+/+88/+k7v+H6//W+P/K9f+q8P+F6/+q8P+O7v/G+f8A0f/////6/v/m+v8j1/+O6v8W1f+p7/9u5f9V4P9I3v/R9v/O9v+i7v893P8N0//8///3/v8d1v/s+/+F6f9R3/9E3f8S1P8K0v/z/f/G9f+98/+J6f/a+P/V9/+t8P812v/f+f+z8f852/8w2f996P905v9d4f8q2f+18f+U7P9M3v9a4f9n5P9g4v9L3v+48v+b7P+boYUtAAAAMXRSTlMAHQMVGwYMCBEOExn++vH+/OH40I1ry4M5ItzWdSroqxMJuratl/zeXDP17bwZvVgtjXC13wAABstJREFUaN68mD1OAzEQRufXY6+JBChKairqrEKEBDQUdEgcgfufAjYFYouQifHOu8BbfzO2dgaWgSyVPHAVEZwQkcpDLskIlkBTZsG/EM59jYXRRcczHo2BVkrHUEOtNuBEpFWzIMZaKVWciLRSxlbanQNitFUnZ7BVGf9HY7bh1oQYbtWKHWgIN9qaBMOtxIjhVhOMtxbsSHy6E/HpTiyWrnBOyUyVCIhUzVLKLH7rcKmvmMIp1ApL75JyUnDQUVqLQh+oenPNCr1QcQZrAMFSKQQdUbcz+KSSoC8kkU5/9w6zbGPuaVXozllpv3D9by8T9KeckRZYADvTugYLQBKd7gT70o0sqsEimFMaV1RRWAaOkfoHxUqXrRIzcxVBFKnMORm15CtuqeUTiXE2x0vYEC+dWyZyoQv+HtS320MHMKfiSazjZsbdStZzMzPPB09SujknnK3E869b36+uXm9vtnez7V6bVZ13Zrsa94+H94/9eL2dLSyarOwr6mZ8+dwdeXoeN00jteuoZS497H44jJuWkdpTVZ7F+0v69vCtXePleBr4qzUz72oihqL4OYiION2LtggCAgruudPalq60dKe07Duo3/9DaKY5nWSSNww9/v6RIzO9TXLffXkH+VDXoyUmaJebjLFyKE2lNo9ePqrzWZ2HshsGAZY6py61yBxOD/Cb/3uLLZP9FuZmTMm1MKuo0kt9pbwYyzDO1Qlw3GGcTIwYZck/FEiq88HiNz7iSmd1oH7GHPKhp46yL549utQF9Y36gDmyxyh3hI0tRfP59M2c7qmWcHCnhOMjxhnUNc3AvAo4zYTywkw20LviP43ixMPTT+Wz3gc/jt2UywD5rHDT1Jfz+aCDWxJOGh7gWpipiK2pZ7xZeqkqM6Eyd1C/ygSlaHra2+ML/wD2JuJVUQriJHF7DDyt0gam0z8x9bw1Qy/VKFsSa70tC9H/evMmVvAmisxo8DOfQSjpJ7q2/H4pHLVs24qGl94vrwUZMuhPm0lvxeJ1KxTbStNnurIatqFgh1dXAjiYCtT5xw9/8d0eDOy9W3wsImaDJcpzg2YYJOFF/yl53nfoo1NwJwbBfqWwW83WatnqbqGyD0Fsx+9Yn1NL9T/7pAWHYfOUKZw2h3Cwkvw5qpvTS6Vtvv4WDuUiM1Asw4E+1pf0Uun9/foZnMNdRrB7KFRfPmmDF/z2d+WT49QL5sPFHkAfKxlj9Df76ohabeZwRsi2La76pIiY83lm3dneYZaNOW8QstkheaxzlJfopTpGOqhNOkOTEdSIEN7eXIqHIlYk/Hb1u7rB9FKTzkonouwmwyhM14jUlygk4ptufL6kE3PHAmBl2YQKWrTqM69mogcP9us1d4OpxIxx97aZSx6/KVUt+t98cLJsVDhq5LqNdqHifIfQ8vij6cRcBAClZE6ALKmqaKYTAFC6ZC7dhz4AJMRNh/JSmIcDkzkAKD+p/ki/A5DRjuMuAmBpRvXArL5UNZH6AOUn9et/BHCSYxqdPIDYOj9WYhThX7fMFEoAiGRUCocX3IAZuQH+jeVkQa/sAfAE/iGvXkJVqoUkgBum093tMjYAsEx2m1XuBqaSASg/SUf1IwTkmc798amw5IcU1QjD0K1jgdw6qYckgEjH1JruJ6NNggimNRvAKVOxASBiVHUNkrKBO1MbroifW0AvZa7WZV7izAOg+rp7OckQd4TcAPpMpdrnzuxKpvxmNtN7ABVvxAOQ/JQd7GMSA240xYEHJnN27aSU64dLIGoO4SUABaaSAzDx0+01N3lLU10Eel25CebB2ZPLYR/YNiZT2FCaDaE6YLmLYzgUNdUNZY8af2w4nDOJEbBpLJwogCpTuRKqkYoNQXWi6iaEtEfNOsacMJkCEDOqWobKPILGkaYaBtruG2JLDmveD4obr1V8NTWvFaFxpalGgIYUvNfg3GpHFQqsWoRGQ1O1gC6TOOems269towE3uEWNHKmtarNph2BN+a6gBXYTXcQ9P4Il6CmeTgENDxZOK7ynLLDkcCVcy/GnUKN5YUq01TjksUmucvJVN3lA+HAKVEAYOerkrFsXTXmfa+PMfsX8ge9DZyI54ie56RWC1hMy+FNYKS2cYdesybfNbEROP1bLWm2ASej95xt9b1LcOybnGymHrDo1+lIOnWn+g39NQpcusnPH9urqP56AOK+XZ2mAgAlw13ii/TfHZ5NIxEl8klv+NxghqSm8FPfcG9K9dxWdA0cHDG9AO2U/22NZsiL0HRHTACZnLBfv62fTQRIBL+ZGuroxHQfTn0Qv/hVMo1FeSCUDnALp/wkXwX/Auj2mn6P32WJAAAAAElFTkSuQmCC); background-position: right bottom; background-repeat: no-repeat; } #content-settings-inner-sms-label > svg { position: absolute; top: 21px; left: 19px; } #content-settings-inner-sms-label > div, .reward-status > div { display: inline-block; font-weight: 400; font-size: 16px; color: #fff; line-height: 20px; vertical-align: top; } #content-settings-inner-sms-label > div > span, .reward-disable > span { font-weight: 700; color: #85ff00; } .content-subscription-item-subscribe { display: none; margin-top: 17px; padding: 20px 40px; box-sizing: border-box; text-align: center; } .content-subscription-item.subscribe > .content-subscription-item-subscribe { display: block; } .content-subscription-item.gold > .content-subscription-item-subscribe { background-color: rgba(253, 189, 45, .1); } .content-subscription-item.extreme > .content-subscription-item-subscribe { background-color: rgba(153, 80, 167, .1); } .content-subscription-item.pro > .content-subscription-item-subscribe { background-color: rgba(70, 197, 96, .1); } .content-subscription-item-subscribe > div { font-weight: 400; font-size: 13px; color: #4d4d4d; line-height: 18px; } .content-subscription-item-subscribe > a { display: inline-block; height: 26px; min-width: 80px; margin-top: 18px; padding: 0 10px; border-radius: 4px; box-sizing: border-box; font-family: Roboto, Tahoma, Arial, sans-serif; font-weight: 400; font-size: 12px; color: #fff; line-height: 26px; text-align: center; background-color: #40bd5e; cursor: pointer; transition: .2s; } .content-subscription-item-subscribe > a:hover { background-color: #53ce70; } .content-subscription-item-subscribe > a:active { background-color: #30a14b; } #content-subscription-inner-empty { display: block; padding: 24px 40px 20px; box-sizing: border-box; text-align: center; } .content-subscription-item + #content-subscription-inner-empty { display: none; } #content-subscription-inner-empty > div { font-weight: 400; font-size: 13px; color: #808080; line-height: 18px; } #content-subscription-inner-empty > a { display: inline-block; height: 40px; min-width: 200px; margin-top: 21px; padding: 0 40px; border-radius: 4px; box-sizing: border-box; font-weight: 600; font-size: 15px; color: #fff; line-height: 40px; text-align: center; background-color: #40bd5e; cursor: pointer; transition: .2s; } #content-subscription-inner-empty > a:hover { background-color: #53ce70; } #content-subscription-inner-empty > a:active { background-color: #30a14b; } #content-inner.show-status > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-status > #content-info > #content-info-inner > div:not(#content-wrapper-status), #content-wrapper-status { display: none; } #content-inner.show-status > #content-info > #content-info-inner > #content-wrapper-status { display: block } #content-wrapper-status { border-radius: 4px; text-align: center; overflow: hidden; } #content-status-header { position: relative; border-bottom: 1px solid #b6ecbc; background-color: #f7fff8; } #content-status-header > h2 { width: 100%; padding: 37px 120px 32px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; } #content-status-header > h2.last > span:first-child, #content-status-header > h2 > span:last-child { display: none; } #content-status-header > h2 > span:first-child, #content-status-header > h2.last > span:last-child { display: inline-block; } @media screen and (max-width: 500px) { #content-settings-inner-sms-label { padding-right: 30px; } #content-settings-inner-sms-label:before { display: none; } } #content-status-header-slider { position: relative; height: 187px; width: 100%; overflow: hidden; } #content-status-header-slider-progress { position: absolute; height: 172px; width: 172px; top: 0; left: 50%; margin-left: -86px; border-radius: 100%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fecc01+0,ed388d+100 */ background: rgb(254,204,1); /* Old browsers */ background: -moz-linear-gradient(top, rgba(254,204,1,1) 0%, rgba(237,56,141,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(254,204,1,1) 0%, rgba(237,56,141,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(254,204,1,1) 0%, rgba(237,56,141,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fecc01', endColorstr='#ed388d', GradientType=0); /* IE6-9 */ overflow: hidden; } #content-status-header-slider-progress > svg { transform: rotate(270deg); } #content-status-header-slider-progress > svg > circle:first-child { fill: transparent; stroke: #e9e9e9; stroke-width: 12px; transition: stroke-dashoffset .8s; } #content-status-header-slider-progress > span { position: absolute; display: inline-block; height: 18px; width: 130px; top: 42px; left: 0; right: 0; margin: 0 auto; font-weight: 400; font-size: 13px; color: rgba(0, 0, 0, .7); line-height: 18px; } #content-status-header-slider-label { position: absolute; display: inline-block; height: 37px; top: 150px; left: 50%; margin-left: 50px; padding: 18px 0 0 35px; box-sizing: border-box; } #content-status-header-slider-label.hide { opacity: 0; visibility: hidden; } #content-status-header-slider-label > svg { position: absolute; top: 0; left: 0; } #content-status-header-slider-label > div { display: inline-block; padding: 0 10px; border-bottom: 1px solid #9cdda3; font-family: Roboto, Tahoma, Arial, sans-serif; font-weight: 400; font-size: 13px; color: rgba(0, 0, 0, .7); white-space: nowrap; } #content-status-header-slider-wrapper-items { position: relative; padding-top: 64px; left: 50%; margin-left: -113px; } #content-status-header-slider-items { position: relative; white-space: nowrap; transition: .5s; } .content-status-header-slider-item { position: relative; display: inline-block; height: 10px; width: 100px; vertical-align: top; opacity: .3; transform: scale(1); -webkit-transform: scale(1); transition: .5s; } .content-status-header-slider-item[data-points="0"]:before { content: '0'; position: absolute; display: block; height: 38px; width: 38px; top: 3px; left: 0; right: 0; margin: 0 auto; border-radius: 100%; font-weight: 800; font-size: 18px; color: #fff; background-color: #c4c4c4; line-height: 38px; transition: .5s; } /* */ .content-status-header-slider-item:after { content: ''; position: absolute; display: block; height: 6px; width: 22px; top: 17px; right: 9px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDIyIDYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8cGF0aCBmaWxsPSIjN2RlMjg4IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAyVjBsNiAzLTYgM1Y0SDBWMmgxNnoiLz4KPC9zdmc+); background-repeat: no-repeat; transform: scale(.87); -webkit-transform: scale(.87); opacity: 0; transition: .2s; } .content-status-header-slider-item:last-child:after { display: none; } .content-status-header-slider-item.selected { width: 226px; opacity: 1; transform: scale(1.15); -webkit-transform: scale(1.15); } .content-status-header-slider-item.selected:after { opacity: 1; transition: .2s ease 1s; } .content-status-header-slider-item.selected[data-points="0"]:before { height: 44px; width: 44px; font-size: 20px; line-height: 44px; } .content-status-header-slider-item.selected ~ div { opacity: 1; } .content-status-header-slider-item > img { height: 38px; margin: 3px auto 7px; vertical-align: top; transition: 1s; } .content-status-header-slider-item > div { height: 18px; font-weight: 400; font-size: 12px; color: rgba(0, 0, 0, .7); line-height: 18px; } #content-status-header-global { padding: 0 35px 20px; box-sizing: border-box; } #content-status-header-global-header { height: 30px; padding-top: 11px; border-bottom: 1px solid #bcf4c2; box-sizing: border-box; font-weight: 400; font-size: 10px; color: #60d86b; text-align: left; } #content-status-header-global-items { position: relative; padding-top: 18px; white-space: nowrap; } #content-status-header-global-items:before { content: ''; position: absolute; display: block; height: 1px; top: 58px; left: 7.7%; right: 0; background-color: #bcf4c2; } .content-status-header-global-item { display: inline-block; width: 7.1%; font-weight: 400; font-size: 10px; color: rgba(89, 89, 89, .3); line-height: 14px; vertical-align: top; transition: .2s; } .content-status-header-global-item.active { color: #595959; } .content-status-header-global-item:first-child { width: 7.7%; padding-top: 30px; text-align: left; color: #595959; } .content-status-header-global-item > img { max-height: 27px; width: 100%; opacity: .3; transform: scale(.8); transition: .2s; } .content-status-header-global-item.active > img { opacity: 1; transform: scale(1); } .content-status-header-global-item > div { height: 14px; margin-top: 3px; } .content-status-header-global-item > div > span { position: relative; display: inline-block; padding: 0 5px; background-color: #f7fff8; } #content-status-inner { padding: 40px 0 0; } #content-status-inner > h3 { display: inline-block; width: 100%; padding: 0 70px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; line-height: 22px; } #content-status-inner-text { display: inline-block; width: 100%; margin: 10px 0 42px; padding: 0 70px; box-sizing: border-box; font-weight: 400; font-size: 13px; color: #808080; line-height: 18px; } #content-status-inner-gifts > .wrapper-gift-item { margin: 0 5px 30px; } .gift-item-link { display: inline-block; height: 17px; max-width: 106px; margin-top: 3px; font-weight: 400; font-size: 12px; color: #3d95cc; line-height: 17px; cursor: pointer; text-overflow: ellipsis; overflow: hidden; transition: .2s; } .gift-item-link:hover { color: #3cafff; } .gift-item-link:active { color: #0075c7; } .gift-item-status { font-weight: 400; font-size: 10px; color: #808080; line-height: 14px; } .settings-information-item > .reward-badge { position: absolute; display: none; top: 27px; right: 32px; pointer-events: none; } .content-settings-inner-checkbox > .reward-badge { display: none; vertical-align: top; margin-left: 5px; margin-bottom: 5px; } .settings-information-item > .reward-badge.show, .content-settings-inner-checkbox > .reward-badge.show { display: inline-block; } #content-settings-inner-privacy { padding-top: 40px; } #content-settings-inner-privacy-request { position: relative; display: none; height: 75px; width: 100%; top: -40px; margin-bottom: -10px; padding: 0 30px; box-sizing: border-box; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f9f9+0,ffffff+100 */ background: #f9f9f9; /* Old browsers */ background: -moz-linear-gradient(top, #f9f9f9 0%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f9f9f9 0%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f9f9f9 0%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#ffffff', GradientType=0); /* IE6-9 */ line-height: 75px; text-align: center; } #content-settings-inner-privacy-request:after { content: ''; position: absolute; display: block; height: 1px; width: 70%; bottom: 0; left: 15%; background-color: #dbdbdb; } #content-settings-inner-privacy-request.show-request-link { display: block; } #content-settings-inner-privacy-request > div { display: inline-block; line-height: 18px; vertical-align: middle; } #content-settings-inner-privacy-request > div > * { display: inline-block; } @media screen and (max-width: 1360px) { #content-status-header-slider { height: 240px; } #content-status-header-slider-label { height: auto; top: auto; bottom: 20px; left: 0; right: 0; margin: 0 auto; padding: 0; } #content-status-header-slider-label > svg { display: none; } #content-status-header-slider-label > div { padding: 0 30px; border: none; } } @media screen and (max-width: 520px) { #content-status-header-slider { height: 250px; } #content-status-header-slider-label { bottom: 30px; } #content-status-header-global { display: none; } } body.show-onegift { overflow: hidden; } #onegift-wrapper { position: fixed; display: block; height: 100%; width: 100%; top: 0; left: -100%; opacity: 0; overflow: hidden; z-index: 10; visibility: hidden; } body.show-onegift > #wrapper > #onegift-wrapper { left: 0; opacity: 1; visibility: visible; } #onegift-overlay { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, .65); } #onegift-window-wrapper { position: relative; height: 100%; min-height: 100%; width: 100%; top: 0; padding: 0 15px; box-sizing: border-box; font-size: 0; overflow-y: scroll; z-index: 1; } #onegift-window { position: relative; width: 100%; max-width: 400px; margin: 70px auto; padding-top: 30px; border-radius: 3px; background-color: #fff; text-align: center; overflow: hidden; } #onegift-button-close { position: absolute; height: 40px; width: 40px; top: 0; right: 0; line-height: 40px; opacity: .4; cursor: pointer; transition: .2s; } #onegift-button-close:before { content: '+'; position: relative; display: inline-block; top: -2px; font-weight: 300; font-size: 40px; color: #979797; vertical-align: middle; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: color .2s; } #onegift-button-close:hover { opacity: .8; } #onegift-button-close:active { opacity: .6; } #onegift-avatar { position: relative; height: 100px; width: 100px; margin: 0 auto; overflow: hidden; } #onegift-avatar.hd { height: 150px; width: 150px; } #onegift-avatar.reward-category:after { content: ''; position: absolute; height: 25px; width: 25px; top: 0; right: 0; background-repeat: no-repeat; } #onegift-avatar.reward-category:after { background-image: url('/images/reward/points_icon.svg'); background-size: 25px; } #onegift-avatar > img { height: 100%; } #onegift-stack { position: relative; display: block; height: 0; width: 100px; margin: 0 auto; } #onegift-stack > [data-stack] { position: absolute; display: inline-block; height: 44px; min-width: 44px; top: -44px; right: -14px; padding: 0 10px; border-radius: 44px; box-sizing: border-box; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fee33a+0,fec53a+100 */ background: rgb(254,227,58); /* Old browsers */ background: -moz-linear-gradient(top, rgba(254,227,58,1) 0%, rgba(254,197,58,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(254,227,58,1) 0%, rgba(254,197,58,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(254,227,58,1) 0%, rgba(254,197,58,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fee33a', endColorstr='#fec53a', GradientType=0); /* IE6-9 */ text-align: center; line-height: 44px; } #onegift-avatar.hd + #onegift-stack { width: 150px; } #onegift-avatar.hd + #onegift-stack > [data-stack] { right: 0; } #onegift-stack > [data-stack] > svg { display: inline-block; margin-right: 2px; vertical-align: middle; } #onegift-stack > [data-stack]:after { content: attr(data-stack); display: inline-block; font-weight: 700; font-size: 20px; color: #fff; vertical-align: middle; } #onegift-name { margin-top: 12px; padding: 0 30px 5px 30px; box-sizing: border-box; font-weight: 600; font-size: 20px; color: #565656; text-align: center; } #onegift-count { height: 17px; margin-top: 1px; font-weight: 700; font-size: 12px; color: #cacaca; } #onegift-count:before { content: attr(data-count); } #onegift-count[data-count=""], #onegift-count[data-count="0"], #onegift-count[data-count="1"] { display: none; } #onegift-xp { position: relative; padding: 4px 0; text-align: center; } #onegift-xp:before { content: '+' attr(data-xp) ' XP'; position: relative; height: 30px; top: 19px; padding: 0 15px; border-radius: 30px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9a48ff+0,9433ff+50,ef42ff+100 */ background: #9a48ff; /* Old browsers */ background: -moz-linear-gradient(left, #9a48ff 0%, #9433ff 50%, #ef42ff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #9a48ff 0%, #9433ff 50%, #ef42ff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #9a48ff 0%, #9433ff 50%, #ef42ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9a48ff', endColorstr='#ef42ff', GradientType=1); /* IE6-9 */ font-weight: 700; font-size: 18px; color: #fff; line-height: 30px; } #onegift-list-wrapper { padding: 30px 5px 0 15px; border-top: 1px solid #f1f1f1; box-sizing: border-box; } #onegift-list-wrapper:after { content: ''; position: absolute; display: block; height: 30px; bottom: 0; left: 30px; right: 35px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0); /* IE6-9 */ } #onegift-list { max-height: 340px; width: 100%; padding-left: 16px; box-sizing: border-box; overflow-x: hidden; overflow-y: scroll; } #onegift-list::-webkit-scrollbar { position: absolute; width: 15px; cursor: pointer; } #onegift-list::-webkit-scrollbar-track { background-color: #fff; } #onegift-list::-webkit-scrollbar-thumb { border: 5px solid #fff; border-radius: 6px/8px; background-color: rgba(0, 0, 0, .2); } #onegift-list::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .4); } #onegift-list:after { content: ''; display: block; height: 15px; width: 100%; } .onegift-sender { position: relative; height: 70px; padding: 17px 16px 17px 46px; box-sizing: border-box; } .onegift-sender + .onegift-sender:before { content: ''; position: absolute; display: inline-block; height: 1px; top: 0; left: 46px; right: 16px; background-color: #f1f1f1; } .onegift-sender-avatar { position: absolute; height: 36px; width: 36px; top: 17px; left: 0; border-radius: 100%; } .onegift-sender-avatar:before { content: attr(data-nickname); display: block; height: 100%; width: 100%; font-size: 15px; line-height: 36px; text-align: center; } .onegift-sender-avatar > img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; border-radius: 100%; opacity: 0; visibility: hidden; transition: .2s; } .onegift-sender-avatar > img + img { height: 20px; width: 20px; top: 19px; left: -3px; border-radius: 0; } .onegift-sender-avatar > img.show { opacity: 1; visibility: visible; } .onegift-sender-nickname, .onegift-sender-date { text-align: left; white-space: nowrap; overflow: hidden; } .onegift-sender-nickname { height: 20px; font-weight: 600; font-size: 0; line-height: 20px; } .onegift-sender-nickname > * { font-size: 12px; vertical-align: middle; } .onegift-sender-nickname > img { display: none; height: 12px; margin-right: 4px; } .onegift-sender-nickname > img.show { display: inline-block; } .onegift-sender-date { height: 14px; padding-top: 2px; font-weight: 400; font-size: 10px; color: #939393; } .onegift-sender-xp { position: absolute; display: inline-block; height: 36px; top: 17px; right: 16px; padding: 10px 0 10px 5px; box-sizing: border-box; background-color: #fff; box-shadow: -5px 0 5px 0 #fff; } .onegift-sender-xp > span { display: inline-block; height: 16px; padding: 0 13px; border-radius: 16px; font-weight: 700; font-size: 11px; color: #fff; background-color: #9a47ff; line-height: 16px; } #content-inner.show-autocharge > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-autocharge > #content-info > #content-info-inner > div:not(#content-wrapper-autocharge), #content-wrapper-autocharge { display: none; } #content-inner.show-autocharge > #content-info > #content-info-inner > #content-wrapper-autocharge { display: block; } #content-wrapper-autocharge { border-radius: 4px; text-align: center; overflow: hidden; } #content-autocharge-header { position: relative; padding-bottom: 32px; border-bottom: 1px solid #ffe8a5; background-color: #fffaed; text-align: left; } #content-autocharge-header > h2 { width: 100%; padding: 37px 120px 36px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; text-align: center; } #content-autocharge-header > a { position: absolute; top: 36px; right: 35px; height: 26px; min-width: 80px; padding: 0 10px; border-radius: 4px; box-sizing: border-box; font-family: Roboto, Tahoma, Arial, sans-serif; font-weight: 400; font-size: 12px; color: #fff; line-height: 26px; text-align: center; background-color: #ffbe00; cursor: pointer; transition: .2s; } #content-autocharge-header > a:hover { background-color: #ffcc37; } #content-autocharge-header > a:active { background-color: #ecb000; } #content-autocharge-header-balance { height: 40px; margin-bottom: 45px; line-height: 40px; text-align: center; } #content-autocharge-header-balance > * { display: inline-block; vertical-align: middle; } #content-autocharge-header-balance > span:first-child { margin-right: 11px; font-weight: 400; font-size: 16px; color: #808080; line-height: 22px; } #content-autocharge-header-balance > span:last-child { margin-left: 7px; font-weight: 600; font-size: 29px; color: #595959; line-height: 40px; } #content-autocharge-header-status { position: relative; display: inline-block; height: 18px; margin-left: 82px; cursor: default; } #content-autocharge-header-status[data-status="on"] { cursor: pointer; } #content-autocharge-header-status[data-status="on"] > span:first-of-type, #content-autocharge-header-status:not([data-status="on"]) > span:last-of-type { font-weight: 400; font-size: 13px; color: #808080; line-height: 18px; } #content-autocharge-header-status > span > span[data-coins=""], #content-autocharge-header-status > span > span[data-coins="0"] { display: none; } #content-autocharge-header-status > span > span:before { content: attr(data-coins); display: inline-block; margin-right: 5px; } #content-autocharge-header-status:before, #content-autocharge-header-status:after { content: ''; position: absolute; display: inline-block; transition: .2s; } #content-autocharge-header-status:before { height: 16px; width: 30px; top: 1px; left: -43px; border-radius: 16px; background-color: #d8d8d8; } #content-autocharge-header-status:after { height: 14px; width: 14px; top: 2px; left: -42px; border-radius: 100%; background-color: #fff; } #content-autocharge-header-status[data-status="on"]:before { background-color: #1ece48; cursor: pointer; } #content-autocharge-header-status[data-status="on"]:hover:before, #content-autocharge-header-status[data-status="on"]:active:before { background-color: #1bb941; } #content-autocharge-header-status[data-status="on"]:after { left: -28px; cursor: pointer; } #content-autocharge-inner { padding: 22px 40px; box-sizing: border-box; } #content-autocharge-inner > div { position: relative; display: block; height: 28px; line-height: 28px; text-align: left; white-space: nowrap; } #content-autocharge-inner > div + div { border-top: 1px solid rgba(0, 0, 0, .05); } #content-autocharge-inner > div > span { display: inline-block; width: 60px; font-weight: 400; font-size: 12px; color: #4d4d4d; vertical-align: middle; } #content-autocharge-inner > div > span + span { font-weight: 600; font-size: 14px; } #content-autocharge-inner > div > div { position: absolute; display: inline-block; height: 28px; top: 0; right: 0; font-weight: 400; font-size: 12px; line-height: 28px; } #content-autocharge-inner > div.ok > div { font-weight: 600; color: #4d4d4d; } #content-autocharge-inner > div.failed > div { color: #ff5858; } #content-autocharge-inner > div.pending > div { color: #b7b7b7; } #content-wrapper-settings { position: relative; padding: 0 40px; border-radius: 4px; box-sizing: border-box; text-align: center; } #content-settings-header { position: relative; padding: 60px 0 0; box-sizing: border-box; } #content-settings-header > .content-header-button { left: 0; } #content-wrapper-settings > input { display: none; } #content-settings-header-labels { position: relative; min-height: 48px; text-align: center; } #content-settings-header-labels:before { content: ''; position: absolute; display: block; height: 1px; width: 100%; bottom: 0; left: 0; background-color: #dbdbdb; } #content-settings-header-labels > label { position: relative; display: inline-block; height: 48px; margin: 0 20px; border-width: 3px 0; border-style: solid; border-color: transparent; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; line-height: 44px; cursor: pointer; transition: .2s; } #content-settings-header-labels > label:hover { color: #4a4a4a; } #input-information:checked ~ #content-settings-header > #content-settings-header-labels > label[for="input-information"], #input-privacy:checked ~ #content-settings-header > #content-settings-header-labels > label[for="input-privacy"], #input-premium:checked ~ #content-settings-header > #content-settings-header-labels > label[for="input-premium"], #input-room:checked ~ #content-settings-header > #content-settings-header-labels > label[for="input-room"] { border-color: transparent transparent #66c4ff; color: #3d95cc; cursor: default; } #content-settings-inner { position: relative; width: 100%; transition: .2s; } #content-settings-inner > div { position: absolute; width: 100%; top: 0; left: -100%; text-align: left; opacity: 0; visibility: hidden; transition: .4s; } #input-information:checked ~ #content-settings-inner > #content-settings-inner-information, #input-privacy:checked ~ #content-settings-inner > #content-settings-inner-privacy, #input-premium:checked ~ #content-settings-inner > #content-settings-inner-premium, #input-room:checked ~ #content-settings-inner > #content-settings-inner-room { left: 0; opacity: 1; visibility: visible; } #input-information:checked ~ #content-settings-inner > #content-settings-inner-information ~ div, #input-privacy:checked ~ #content-settings-inner > #content-settings-inner-privacy ~ div, #input-premium:checked ~ #content-settings-inner > #content-settings-inner-premium ~ div, #input-room:checked ~ #content-settings-inner > #content-settings-inner-room ~ div { left: 100%; } #input-room:disabled ~ #content-settings-header label[for="input-room"] { display: none; } html.webview #content-settings-inner-room { overflow-x: hidden; } #content-settings-inner-information > h3 { height: 22px; margin: 40px 0 18px; font-weight: 400; font-size: 16px; color: #808080; line-height: 22px; } #content-settings-inner-information > h3:first-child { margin-top: 22px; } .content-settings-inner-checkbox.hide { display: none; } .content-settings-inner-checkbox + .content-settings-inner-checkbox { padding-top: 14px; } .content-settings-inner-checkbox > input[type="checkbox"] { display: none; } .content-settings-inner-checkbox > input[type="checkbox"] + label { position: relative; display: inline-block; min-height: 18px; margin-left: 43px; font-weight: 400; font-size: 14px; color: #545454; line-height: 18px; cursor: pointer; } .content-settings-inner-checkbox > input[type="checkbox"] + label:before, .content-settings-inner-checkbox > input[type="checkbox"] + label:after { content: ''; position: absolute; display: inline-block; transition: .2s; } .content-settings-inner-checkbox > input[type="checkbox"] + label:before { height: 16px; width: 30px; top: 1px; left: -43px; border-radius: 16px; background-color: #CCCED0; transition: .2s; } .content-settings-inner-checkbox > input[type="checkbox"] + label:hover:before, .content-settings-inner-checkbox > input[type="checkbox"] + label:active:before { background-color: #c5c5c5; } .content-settings-inner-checkbox > input[type="checkbox"] + label:after { height: 14px; width: 14px; top: 2px; left: -42px; border-radius: 100%; background-color: #fff; } .content-settings-inner-checkbox > input[type="checkbox"]:checked + label:before { background-color: #008A00; } .content-settings-inner-checkbox > input[type="checkbox"]:checked + label:after { left: -28px; } .content-settings-inner-checkbox > input[type="checkbox"]:checked + label:hover:before, .content-settings-inner-checkbox > input[type="checkbox"]:checked + label:active:before { background-color: #1bb941; } .content-settings-inner-checkbox > label[for="input-privacy-enable-reward-program"] > a { color: #3d95cc } label[for="input-information-subscribe-news"] { margin-top: 13px; } .settings-information-text { height: 14px; padding: 0 0 4px 11px; font-weight: 400; font-size: 10px; color: #858585; line-height: 14px; } .content-settings-inner-checkbox > .settings-information-text { margin-left: 44px; padding-left: 0; } .content-settings-inner-checkbox > label[for="input-privacy-enable-reward-program"] > a, .content-settings-inner-checkbox > .settings-information-text > a { color: #3d95cc; transition: .2s; } .content-settings-inner-checkbox > label[for="input-privacy-enable-reward-program"] > a:hover, .content-settings-inner-checkbox > .settings-information-text > a:hover { color: #3cafff; } .content-settings-inner-checkbox > label[for="input-privacy-enable-reward-program"] > a:active, .content-settings-inner-checkbox > .settings-information-text > a:active { color: #0075c7; } .settings-information-items { margin: 0 -20px 0 0; } .settings-information-item { position: relative; display: inline-block; height: 63px; width: 50%; padding-right: 20px; box-sizing: border-box; vertical-align: top; } .settings-information-item.hide { display: none; } .settings-information-item.email-default { height: auto; } #settings-information-birthday > .wrapper-combobox + .wrapper-combobox > .combobox { left: 10px; } #settings-information-birthday > .wrapper-combobox { display: inline-block; width: 25%; } #settings-information-birthday > .wrapper-combobox:first-child { width: 40%; } #settings-information-birthday > .wrapper-combobox:last-child { width: 35%; } input[type="text"], input[type="password"] { display: block; height: 39px; width: 100%; padding: 0 40px 0 10px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; font-weight: 400; font-size: 14px; color: #545454; transition: border-color .2s; } input[type="text"]:hover, input[type="password"]:hover { border-color: #a5a5a5; } input[type="text"]:focus, input[type="password"]:focus { border-color: #2ecb4e; } input[type="text"][disabled] { border-color: #ccc; background-color: #e3e3e3; cursor: not-allowed; } @media screen and (max-width: 700px) { html.webview #content-settings-inner-room-banner-free-inner { text-align: center; } html.webview #content-settings-inner-room-banner-free-inner:after { display: none; } html.webview #content-settings-inner-room-banner-free-content { margin-left: auto; margin-right: auto; } } @media screen and (max-width: 1290px) { .settings-information-item.settings-combobox { width: 100%; } } #content-settings-inner-information .settings-information-item.error > input[type="text"], #content-settings-inner-information .settings-information-item.email-update > input[type="text"].error, #content-settings-inner-information .settings-information-item.email-update > input[type="password"].error, #content-settings-inner-information .settings-information-item.error > #settings-information-birthday > .wrapper-combobox > .combobox, #content-settings-inner-premium-nickname.error > input[type="text"], #content-settings-inner-room-nickname-nickname.error > input[type="text"], #content-settings-inner-room .settings-information-item.error > input[type="text"], #content-settings-inner-room .settings-information-item.error > input[type="password"], #content-settings-modal-forcoins-input.error > input[type="text"] { border-color: #ff6b6b; } .settings-information-error { position: absolute; display: inline-block; right: 20px; margin-top: 7px; opacity: 0; visibility: hidden; } #content-settings-inner-premium-nickname > .settings-information-error, #content-settings-inner-room-nickname-nickname > .settings-information-error, #content-settings-inner-room .settings-information-error { right: 0; } #content-settings-modal-forcoins-input > .settings-information-error { display: block; right: 0; } .settings-information-item.error > .settings-information-error, input.error + .settings-information-error, #content-settings-inner-premium-nickname.error > .settings-information-error, #content-settings-inner-room-nickname-nickname.error > .settings-information-error, #content-settings-modal-forcoins-input.error > .settings-information-error { opacity: 1; visibility: visible; } /* */ .settings-information-error:before { content: ''; position: absolute; display: block; height: 24px; width: 24px; top: -39px; right: 8px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPGNpcmNsZSBmaWxsPSIjZmY2YjZiIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGN4PSI3IiBjeT0iNyIgcj0iNyIvPg0KCTxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTYuNTM1IDkuMDYxYTExLjQyNiAxMS40MjYgMCAwIDEtLjAwNS0uMjljMC0uMzguMDUzLS43MDcuMTYtLjk4My4wOC0uMjA4LjIwNy0uNDE3LjM4Mi0uNjI4LjEzLS4xNTQuMzYxLS4zNzkuNjk2LS42NzQuMzM1LS4yOTYuNTUyLS41MzEuNjUyLS43MDcuMS0uMTc1LjE1LS4zNjcuMTUtLjU3NCAwLS4zNzYtLjE0Ni0uNzA3LS40NC0uOTkxYTEuNDkyIDEuNDkyIDAgMCAwLTEuMDgtLjQyN2MtLjQxMSAwLS43NTUuMTI5LTEuMDMuMzg2LS4yNzYuMjU4LS40NTcuNjYxLS41NDMgMS4yMDlsLS45OTQtLjExOGMuMDktLjczNC4zNTYtMS4yOTcuNzk4LTEuNjg3LjQ0Mi0uMzkgMS4wMjctLjU4NSAxLjc1NC0uNTg1Ljc3IDAgMS4zODQuMjEgMS44NDIuNjI4LjQ1OC40Mi42ODcuOTI2LjY4NyAxLjUyIDAgLjM0NC0uMDguNjYtLjI0MS45NS0uMTYxLjI5LS40NzYuNjQ0LS45NDYgMS4wNTktLjMxNS4yOC0uNTIuNDg1LS42MTcuNjE4YTEuMzc3IDEuMzc3IDAgMCAwLS4yMTUuNDU2Yy0uMDQ3LjE3Mi0uMDczLjQ1MS0uMDguODM4aC0uOTN6TTYuNDc2IDExVjkuODk5aDEuMTAxVjExaC0xLjF6Ii8+DQo8L3N2Zz4); background-repeat: no-repeat; background-position: center; } .settings-information-error > span { position: relative; display: inline-block; padding: 10px 10px; border-radius: 3px; font-weight: 400; font-size: 12px; color: #545454; background-color: #d8d8d8; line-height: 19px; z-index: 1; opacity: 0; visibility: hidden; transition: .2s; } .settings-information-error:hover > span { opacity: 1; visibility: visible; } #settings-information-mobile-update { margin-top: 8px; display: none; } #settings-information-mobile-update.show { display: block; } #settings-information-mobile-update > span { color: #3d95cc; cursor: pointer; transition: .2s; } #settings-information-mobile-update > span:hover { color: #3cafff; } #settings-information-mobile-update > span:active { color: #0075c7; } #settings-information-email-update { position: relative; height: 17px; padding: 14px 0 9px; } #settings-information-email-update > span { font-weight: 400; font-size: 12px; color: #ccc; cursor: default; } #settings-information-email-update.active > span { color: #3d95cc; cursor: pointer; transition: .2s; } #settings-information-email-update.active > span:hover { color: #3cafff; } #settings-information-email-update.active > span:active { color: #0075c7; } #settings-information-email-update > div { position: absolute; display: block; width: 290px; max-width: 100%; top: 36px; left: 0; padding: 10px 12px; box-sizing: border-box; font-weight: 400; font-size: 14px; color: #867750; line-height: 19px; background-color: #f9f2b0; z-index: 1; transition: .2s; opacity: 0; visibility: hidden; box-shadow: 0 0 0 0 rgba(0, 0, 0, .3); } #settings-information-email-update.active > div { display: none; } #settings-information-email-update > div:before, #settings-information-email-update > div:after { content: ''; position: absolute; display: block; height: 0; width: 0; top: -6px; border-width: 0 5px 5px; border-style: solid; border-color: rgba(0, 0, 0, .1) transparent; } #settings-information-email-update > div:after { top: -5px; border-color: #f9f2b0 transparent; } #settings-information-email-update > span:hover + div { opacity: 1; visibility: visible; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .3); } .settings-information-item.email-update, #settings-information-update-email-text, .settings-information-items.show-update > .settings-information-item.email-default, .settings-information-items.show-update > .settings-information-item.email-result { display: none; } .settings-information-items.show-update > #settings-information-update-email-text, .settings-information-items.show-update > .settings-information-item.email-update { display: block; } .settings-information-item.email-update { height: auto; } .settings-information-item.email-update > input { position: relative; } #settings-information-update-email-text { max-width: 480px; margin-bottom: 18px; font-weight: 400; font-size: 14px; color: #545454; line-height: 19px; } .settings-information-item.email-update > .settings-information-error + .settings-information-text { padding-top: 7px; } #settings-information-update-email-buttons { position: relative; padding: 14px 0 9px; } #settings-information-update-email-buttons > span { display: inline-block; height: 26px; padding: 0 13px; border-radius: 4px; font-weight: 400; font-size: 12px; line-height: 26px; cursor: pointer; transition: .2s; } #settings-information-update-email-buttons > span:first-child { color: #fff; background-color: #40bd5e; } #settings-information-update-email-buttons > span:first-child:hover { background-color: #53ce70; } #settings-information-update-email-buttons > span:first-child:active { background-color: #30a14b; } #settings-information-update-email-buttons > span:last-child { margin-left: 6px; color: #3d95cc; } #settings-information-update-email-buttons > span:last-child:hover { color: #3cafff; } #settings-information-update-email-buttons > span:last-child:active { color: #0075c7; } #settings-information-email-result { position: relative; padding: 19px 0 0 24px; box-sizing: border-box; line-height: 39px; } #settings-information-email-result > svg { position: absolute; display: block; top: 27px; left: -7px; } #settings-information-email-result.verified > svg > path { fill: #1ece48; } #settings-information-email-result > div { display: none; width: 100%; color: #858585; line-height: 10px; vertical-align: middle; } #settings-information-email-result.init > #settings-information-email-init, #settings-information-email-result.sended > #settings-information-email-sended, #settings-information-email-result.verified > #settings-information-email-verified { display: inline-block; } #settings-information-email-result > div > span { display: inline-block; height: 14px; font-weight: 400; font-size: 10px; line-height: 14px; } #settings-information-email-result > div > span + span { width: 100%; } #settings-information-email-init > span:first-child { color: #3d95cc; cursor: pointer; transition: .2s; } #settings-information-email-init > span:first-child:hover { color: #3cafff; } #settings-information-email-init > span:first-child:active { color: #0075c7; } #content-settings-inner-privacy { padding-top: 40px; } #content-settings-inner-privacy-request { position: relative; display: none; height: 75px; width: 100%; top: -40px; margin-bottom: -10px; padding: 0 30px; box-sizing: border-box; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f9f9+0,ffffff+100 */ background: #f9f9f9; /* Old browsers */ background: -moz-linear-gradient(top, #f9f9f9 0%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f9f9f9 0%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f9f9f9 0%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#ffffff', GradientType=0); /* IE6-9 */ line-height: 75px; text-align: center; } #content-settings-inner-privacy-request:after { content: ''; position: absolute; display: block; height: 1px; width: 70%; bottom: 0; left: 15%; background-color: #dbdbdb; } #content-settings-inner-privacy-request.show-request-link { display: block; } #content-settings-inner-privacy-request > div { display: inline-block; line-height: 18px; vertical-align: middle; } #content-settings-inner-privacy-request > div > * { display: inline-block; font-weight: 400; font-size: 13px; color: #808080; line-height: inherit; vertical-align: middle; } #content-settings-inner-privacy-request > div > a { margin-left: 10px; color: #3d95cc; transition: .2s; } #content-settings-inner-privacy-request > div > a:hover { color: #3cafff; } #content-settings-inner-privacy-request > div > a:active { color: #0075c7; } #content-settings-inner-premium-deprecate, #content-settings-inner-room-nickname-deprecate { display: none; padding-top: 40px; text-align: center; } #content-settings-inner-premium-deprecate.show, #content-settings-inner-room-nickname-deprecate.show { display: block; } #content-settings-inner-premium-deprecate > div, #content-settings-inner-room-nickname-deprecate > div { display: block; font-weight: 400; font-size: 16px; color: #808080; line-height: 22px; } #content-settings-inner-premium-deprecate > a, #content-settings-inner-room-nickname-deprecate > a { display: inline-block; height: 40px; min-width: 200px; margin-top: 17px; padding: 0 25px; border-radius: 4px; box-sizing: border-box; font-weight: 600; font-size: 15px; color: #fff; line-height: 40px; background-color: #ad6bce; cursor: pointer; transition: .2s; } #content-settings-inner-premium-deprecate > a:hover, #content-settings-inner-room-nickname-deprecate > a.hover { background-color: #c07ce1; } #content-settings-inner-premium-deprecate > a:active, #content-settings-inner-room-nickname-deprecate > a.active { background-color: #9b5bbb; } #content-settings-inner-premium-content, #content-settings-inner-room-nickname-content { position: relative; } #content-settings-inner-premium-deprecate.show + #content-settings-inner-premium-content:after, #content-settings-inner-room-nickname-deprecate.show + #content-settings-inner-room-nickname-content:after { content: ''; position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; background-color: #fff; opacity: .7; } #content-settings-inner-premium-content > h3, #content-settings-inner-room-nickname-content > h3 { position: relative; height: 22px; margin: 40px 0 18px; font-weight: 400; font-size: 16px; color: #808080; text-align: left; line-height: 22px; } #content-settings-inner-premium-content > h3 > a, #content-settings-inner-room-nickname-content > h3 > a { position: absolute; display: inline-block; height: 14px; top: 4px; right: 0; font-weight: 600; font-size: 10px; color: #3d95cc; line-height: 14px; transition: .2s; } #content-settings-inner-premium-content > h3 > a:hover, #content-settings-inner-room-nickname-content > h3 > a:hover { color: #3cafff; } #content-settings-inner-premium-content > h3 > a:active, #content-settings-inner-room-nickname-content > h3 > a:active { color: #0075c7; } #content-settings-inner-premium-content > h3 > a[href=""], #content-settings-inner-room-nickname-content > h3 > a[href=""] { display: none; } #content-settings-inner-premium-text, #content-settings-inner-room-nickname-text { font-weight: 400; font-size: 14px; color: #545454; text-align: left; line-height: 19px; } #content-settings-inner-premium-nickname, #content-settings-inner-room-nickname-nickname { position: relative; width: 100%; max-width: 320px; margin: 23px auto 0; } #content-settings-inner-premium-nickname > input, #content-settings-inner-premium-nickname > input[disabled], #content-settings-inner-room-nickname-nickname > input, #content-settings-inner-room-nickname-nickname > input[disabled] { display: block; height: 39px; width: 100%; max-width: 320px; margin: 0 auto; padding: 0 10px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; font-weight: 400; font-size: 14px; color: #545454; line-height: 37px; text-align: center; transition: border-color .2s; } #content-settings-inner-premium-nickname > input:hover, #content-settings-inner-room-nickname-nickname > input:hover { border-color: #a5a5a5; } #content-settings-inner-premium-nickname > input:focus, #content-settings-inner-room-nickname-nickname > input:focus { border-color: #2ecb4e; } #content-settings-inner-premium-nickname > input[disabled], #content-settings-inner-room-nickname-nickname > input[disabled] { border-color: #ccc; background-color: #e3e3e3; cursor: not-allowed; } #content-settings-inner-premium-nickname > input.error, #content-settings-inner-room-nickname-nickname > input.error { border-color: #ff6b6b; } #content-settings-inner-premium-nickname > div, #content-settings-inner-room-nickname-nickname > div { position: relative; width: 100%; max-width: 300px; margin: 3px auto 7px; text-align: center; } #content-settings-inner-premium-nickname.show-revert > div, #content-settings-inner-room-nickname-nickname.show-revert > div { max-width: 100%; text-align: left; } #content-settings-inner-premium-nickname > div > span, #content-settings-inner-room-nickname-nickname > div > span { display: inline-block; height: 14px; font-weight: 400; font-size: 10px; color: #3d95cc; line-height: 14px; cursor: default; } #content-settings-inner-premium-nickname > div > span + span, #content-settings-inner-room-nickname-nickname > div > span + span { position: absolute; display: none; top: 0; right: 0; cursor: pointer; } #content-settings-inner-premium-nickname.show-revert > div > span + span, #content-settings-inner-room-nickname-nickname.show-revert > div > span + span { display: inline-block; } #content-settings-inner-premium-nickname > div > span + span:hover, #content-settings-inner-room-nickname-nickname > div > span + span:hover { color: #3cafff; } #content-settings-inner-premium-nickname > div > span + span:active, #content-settings-inner-room-nickname-nickname > div > span + span:active { color: #0075c7; } #content-settings-inner-premium-nickname > div > span > svg, #content-settings-inner-room-nickname-nickname > div > span > svg { margin-right: 2px; vertical-align: middle; } #content-settings-inner-premium-nickname > div > span > svg > path, #content-settings-inner-room-nickname-nickname > div > span > svg > path { transition: .2s; } #content-settings-inner-premium-nickname > div > span:hover > svg > path, #content-settings-inner-room-nickname-nickname > div > span:hover > svg > path { fill: #3cafff; } #content-settings-inner-premium-nickname > div > span:active > svg > path, #content-settings-inner-room-nickname-nickname > div > span:active > svg > path { fill: #0075c7; } #content-settings-inner-premium-nickname > div > div, #content-settings-inner-room-nickname-nickname > div > div { position: absolute; width: 100%; top: 14px; left: 0; padding: 7px 10px 9px; border: 1px solid #dfdfdf; box-sizing: border-box; font-weight: 400; font-size: 11px; color: #545454; text-align: left; background-color: #fff; box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0); opacity: 0; visibility: hidden; z-index: 1; transition: .2s; } #content-settings-inner-premium-nickname > div > span:first-child:hover ~ div, #content-settings-inner-premium-nickname > div > div:hover, #content-settings-inner-room-nickname-nickname > div > span:first-child:hover ~ div, #content-settings-inner-room-nickname-nickname > div > div:hover { box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, .1); opacity: 1; visibility: visible; } #content-settings-inner-premium-bycoins, #content-settings-inner-room-nickname-bycoins { display: none; margin: 20px -40px 6px; padding: 11px 40px; box-sizing: border-box; font-weight: 400; font-size: 12px; color: #545454; background-color: #fff7ea; text-align: center; } #content-settings-inner-premium-bycoins.show, #content-settings-inner-room-nickname-bycoins.show { display: block; } #content-settings-inner-premium-bycoins > div + div, #content-settings-inner-room-nickname-bycoins > div + div { margin-top: 2px; } #content-settings-inner-premium-bycoins > div > span, #content-settings-inner-room-nickname-bycoins > div > span { color: #3d95cc; cursor: pointer; transition: .2s; } #content-settings-inner-premium-bycoins > div > span:hover, #content-settings-inner-room-nickname-bycoins > div > span:hover { color: #3cafff; } #content-settings-inner-premium-bycoins > div > span:active, #content-settings-inner-room-nickname-bycoins > div > span:active { color: #0075c7; } #content-settings-inner-premium-thumbnails { text-align: center; } #content-settings-inner-premium-thumbnails > div { position: relative; display: inline-block; margin-top: 5px; padding: 3px; border: 2px solid transparent; border-radius: 3px; box-sizing: border-box; cursor: pointer; transition: .2s; } #content-settings-inner-premium-thumbnails > div:first-child:after { content: ''; position: absolute; display: inline-block; top: 3px; right: 3px; bottom: 3px; left: 3px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; } #content-settings-inner-premium-thumbnails > div.active { border-color: #34c85b; cursor: default; } #content-settings-inner-premium-label { height: 14px; margin: 32px auto 9px; font-weight: 400; font-size: 10px; color: #545454; text-align: center; } #content-settings-inner-premium-preview { width: 100%; text-align: center; } #content-settings-inner-premium-preview { max-width: 100%; } #content-settings-inner-room-banner-free, #content-settings-inner-room-banner { position: relative; display: none; margin: 40px -40px 0; padding: 30px 40px; box-sizing: border-box; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b561df+0,ce6bca+100 */ background: #b561df; /* Old browsers */ background: -moz-linear-gradient(left, #b561df 0%, #ce6bca 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #b561df 0%, #ce6bca 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #b561df 0%, #ce6bca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b561df', endColorstr='#ce6bca', GradientType=1); /* IE6-9 */ } html.webview #content-settings-inner-room-banner-free { margin: auto; } #content-settings-inner-room-banner { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ce6bca+0,b561df+100 */ background: #ce6bca; /* Old browsers */ background: -moz-linear-gradient(top, #ce6bca 0%, #b561df 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ce6bca 0%, #b561df 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ce6bca 0%, #b561df 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce6bca', endColorstr='#b561df', GradientType=0); /* IE6-9 */ } #content-settings-inner-room[data-subscription="free"][data-banner="show"] > #content-settings-inner-room-banner-free { display: block; } #content-settings-inner-room-banner-free-inner { position: relative; max-width: 640px; margin: 0 auto; } #content-settings-inner-room-banner-free-inner:after { content: ''; position: absolute; display: block; height: 100%; width: 265px; top: 0; left: 380px; background-image: url(/images/profiles/settings_room_banner_free.png); background-repeat: no-repeat; background-size: 100% auto; background-position: center; } #content-settings-inner-room-banner-background { position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; background-image: url(/images/profiles/settings_room_banner_confetti.png); background-repeat: no-repeat; background-size: auto; background-position: center top; } #content-settings-inner-room-banner-background:before, #content-settings-inner-room-banner-background:after { content: ''; position: absolute; display: block; height: 190px; width: 170px; bottom: 0; left: 50%; margin-left: -343px; background-image: url(/images/profiles/settings_room_banner_people_left.png); background-repeat: no-repeat; background-size: auto; background-position: center; } #content-settings-inner-room-banner-background:after { background-image: url(/images/profiles/settings_room_banner_people_right.png); margin-left: 173px; } #content-settings-inner-room-banner-free-content, #content-settings-inner-room-banner-content { width: 100%; max-width: 320px; } #content-settings-inner-room-banner-content { position: relative; max-width: 340px; margin: 0 auto; text-align: center; } #content-settings-inner-room-banner-free-content > h3, #content-settings-inner-room-banner-content > h3 { font-weight: 600; font-size: 20px; color: #fff; line-height: 27px; } #content-settings-inner-room-banner-free-content-header, #content-settings-inner-room-banner-content-header { margin-top: 10px; font-weight: 400; font-size: 12px; color: #fff; line-height: 20px; } #content-settings-inner-room-banner-content-header { margin-top: 20px; } #content-settings-inner-room-banner-free-content-header > span, #content-settings-inner-room-banner-content-header > span { color: rgba(255, 255, 255, .8); } #content-settings-inner-room-banner-free-content-header > span[data-discount="discount"], #content-settings-inner-room-banner-content-header > span[data-discount="discount"] { display: inline-block; padding: 0 6px; border-radius: 5px; font-weight: 700; font-size: 11px; color: #fff; line-height: 20px; background-color: #7f37a2; } #content-settings-inner-room-banner-free-content-header > a, #content-settings-inner-room-banner-content-header > a { color: #fff; text-decoration: underline; } #content-settings-inner-room-banner-free-content > .settings-room-button, #content-settings-inner-room-banner-content > .settings-room-button { display: inline-block; width: initial; min-width: initial; margin: 20px 0 0; } #content-settings-inner-room-banner-content > .settings-room-button { margin-top: 26px; } @media screen and (max-width: 460px) { #content-settings-inner-room-banner-free:after { display: none; } #content-settings-inner-room-banner-free-content { max-width: initial; text-align: center; } } #content-settings-inner-room[data-subscription="free"][data-banner="show"] > #content-settings-inner-room-content:after, #content-settings-inner-room[data-subscription="free"][data-banner="show"] > #content-settings-inner-room-nickname-content:after, #content-settings-inner-room-deprecate.show ~ #content-settings-inner-room-content:after, #content-settings-inner-room-deprecate.show ~ #content-settings-inner-room-nickname-content:after { content: ''; position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; background-color: #fff; opacity: .7; margin-top: -40px; padding-bottom: 40px; } #content-settings-inner-room-deprecate { display: none; padding-top: 20px; padding-bottom: 20px; text-align: center; } #content-settings-inner-room-deprecate.show { display: block; } #content-settings-inner-room-deprecate > div { display: block; font-weight: 400; font-size: 16px; color: #808080; line-height: 22px; } #content-settings-inner-room-deprecate > a { display: none; height: 40px; min-width: 200px; margin-top: 17px; padding: 0 25px; border-radius: 4px; box-sizing: border-box; font-weight: 600; font-size: 15px; color: #fff; line-height: 40px; background-color: #40bd5e; cursor: pointer; transition: .2s; } #content-settings-inner-room-deprecate > a.show { display: inline-block; } #content-settings-inner-room-deprecate > a:hover { background-color: #53ce70; } #content-settings-inner-room-deprecate > a:active { background-color: #30a14b; } #content-settings-inner-room-content { position: relative; padding-bottom: 70px; } #content-settings-inner-room-deprecate.show ~ #content-settings-inner-room-content:after, #content-settings-inner-room-deprecate.show ~ #content-settings-inner-room-nickname-content:after { content: ''; position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; background-color: #fff; opacity: .7; } #content-settings-inner-room-content > h3 { position: relative; margin: 40px 0 18px; font-weight: 400; font-size: 14px; color: #545454; line-height: 19px; text-align: center; } #content-settings-inner-room-content[data-type="login"] > *:not([data-type*="login"]), #content-settings-inner-room-content[data-type="register"] > *:not([data-type*="register"]), #content-settings-inner-room-content[data-type="room_started"] > *:not([data-type*="room_started"]), #content-settings-inner-room-content[data-type="room_stopped"] > *:not([data-type*="room_stopped"]) { display: none; } #content-settings-inner-room-content[data-type="room_started"] > #content-settings-inner-room-nickname, #content-settings-inner-room-content[data-type="room_stopped"] > #content-settings-inner-room-nickname { display: block; } #content-settings-inner-room-content > .settings-information-item { display: block; width: 100%; max-width: 300px; margin: 0 auto; padding-right: 0; } .settings-room-button { display: block; height: 40px; width: 100%; min-width: 120px; max-width: 300px; margin: 18px auto 30px; padding: 0 25px; border-radius: 4px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #fff; line-height: 40px; text-align: center; background-color: #40bd5e; cursor: pointer; transition: .2s; } .settings-room-button:hover { background-color: #53ce70; } .settings-room-button:active { background-color: #30a14b; } .settings-room-text { font-weight: 400; font-size: 12px; color: #808080; line-height: 18px; text-align: center; } .settings-room-text > span { color: #3d95cc; cursor: pointer; transition: .2s; } .settings-room-text > span:hover { color: #3cafff; } .settings-room-text > span:active { color: #0075c7; } #settings-room-status { position: relative; display: block; margin: 80px -40px 0; padding: 50px 40px 40px; box-sizing: border-box; text-align: center; } #settings-room-status[data-subscription="green"] { background-color: #e4fbe9; } #settings-room-status[data-subscription="purple"] { background-color: #fdf0ff; } #settings-room-status[data-subscription="gold"] { background-color: #fffDe8; } #settings-room-status[data-subscription="platinum"] { background-color: #eef7fd; } #settings-room-status[data-subscription="diamond"] { background-color: #e9fafe; } #settings-room-status[data-subscription="vip"] { background-color: #ffeff3; } #settings-room-status-avatar { position: absolute; display: block; height: 80px; width: 80px; top: 0; left: 0; right: 0; margin: -40px auto 0; border-radius: 100%; background-color: #efefef; overflow: hidden; } #settings-room-status[data-subscription="green"] > #settings-room-status-avatar { background-color: #c4fbd2; } #settings-room-status[data-subscription="purple"] > #settings-room-status-avatar { background-color: #f2d7ff; } #settings-room-status[data-subscription="gold"] > #settings-room-status-avatar { background-color: #fff3cf; } #settings-room-status[data-subscription="platinum"] > #settings-room-status-avatar { background-color: #def0fc; } #settings-room-status[data-subscription="diamond"] > #settings-room-status-avatar { background-color: #d3f7ff; } #settings-room-status[data-subscription="vip"] > #settings-room-status-avatar { background-color: #ffd3de; } #settings-room-status-avatar:before { content: ''; position: absolute; display: block; height: 41px; width: 44px; top: 19px; left: 18px; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0NCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC4xNSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40MjkyIDAuNDU4Mjc2TDQzLjI3OTYgMTUuODU2OUM0NC4wNjU3IDE2LjQ2NjcgNDQuMjM2MiAxNy42MTcgNDMuNjUzNCAxOC40MjA4TDQyLjU5NDggMTkuODgwNkM0Mi4wMTQgMjAuNjgxNSA0MC44OTkxIDIwLjgzODkgNDAuMTA5MSAyMC4yMjU5QzM5LjM3ODUgMTkuNjU5IDM4LjYyMzEgMTkuOTYwMyAzOC40NzM2IDIwLjkzOTJMMzUuNDczMiAzOS4yMjc2QzM1LjMyNDUgNDAuMjAxNCAzNC4zODg5IDQxIDMzLjM4NTIgNDFIMjkuMDk4NEMyOC4wOTkgNDEgMjcuMjgxMSA0MC4xOTQ5IDI3LjI4MTEgMzkuMjAxN1YzNC4xNzIzQzI3LjI4MTEgMzEuMTU1NiAyNC45MTY5IDI4LjcwOTQgMjIgMjguNzA5NEMxOS4wODMyIDI4LjcwOTQgMTYuNzE5IDMxLjE1NTYgMTYuNzE5IDM0LjE3MjNWMzkuMjAxN0MxNi43MTkgNDAuMTk5NCAxNS45MDU0IDQxIDE0LjkwMTcgNDFIMTAuNjE0OEM5LjYxNTM5IDQxIDguNjc2MzQgNDAuMjA2NSA4LjUyNjkyIDM5LjIyNzZMNS41MjY0NCAyMC45MzkyQzUuMzc3NzkgMTkuOTY1NCA0LjYxNTQ1IDE5LjY2MzcgMy44MjU0NCAyMC4yNzY3QzMuMDk0ODMgMjAuODQzNiAxLjk4ODA1IDIwLjY4NDMgMS40MDUyNCAxOS44ODA2TDAuMzQ2NjQ5IDE4LjQyMDhDLTAuMjM0MTc4IDE3LjYxOTggLTAuMDY4Nzg3NCAxNi40NjkyIDAuNzIwNSAxNS44NTY5TDIwLjU3MDkgMC40NTgyNzZDMjEuMzU3IC0wLjE1MTUxNiAyMi42Mzk5IC0wLjE1NCAyMy40MjkyIDAuNDU4Mjc2WiIvPgo8L3N2Zz4); background-repeat: no-repeat; background-size: 100%; } #settings-room-status[data-subscription="green"] > #settings-room-status-avatar:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0NCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40MjkyIDAuNDU4Mjc2TDQzLjI3OTYgMTUuODU2OUM0NC4wNjU3IDE2LjQ2NjcgNDQuMjM2MiAxNy42MTcgNDMuNjUzNCAxOC40MjA4TDQyLjU5NDggMTkuODgwNkM0Mi4wMTQgMjAuNjgxNSA0MC44OTkxIDIwLjgzODkgNDAuMTA5MSAyMC4yMjU5QzM5LjM3ODUgMTkuNjU5IDM4LjYyMzEgMTkuOTYwMyAzOC40NzM2IDIwLjkzOTJMMzUuNDczMiAzOS4yMjc2QzM1LjMyNDUgNDAuMjAxNCAzNC4zODg5IDQxIDMzLjM4NTIgNDFIMjkuMDk4NEMyOC4wOTkgNDEgMjcuMjgxMSA0MC4xOTQ5IDI3LjI4MTEgMzkuMjAxN1YzNC4xNzIzQzI3LjI4MTEgMzEuMTU1NiAyNC45MTY5IDI4LjcwOTQgMjIgMjguNzA5NEMxOS4wODMyIDI4LjcwOTQgMTYuNzE5IDMxLjE1NTYgMTYuNzE5IDM0LjE3MjNWMzkuMjAxN0MxNi43MTkgNDAuMTk5NCAxNS45MDU0IDQxIDE0LjkwMTcgNDFIMTAuNjE0OEM5LjYxNTM5IDQxIDguNjc2MzQgNDAuMjA2NSA4LjUyNjkyIDM5LjIyNzZMNS41MjY0NCAyMC45MzkyQzUuMzc3NzkgMTkuOTY1NCA0LjYxNTQ1IDE5LjY2MzcgMy44MjU0NCAyMC4yNzY3QzMuMDk0ODMgMjAuODQzNiAxLjk4ODA1IDIwLjY4NDMgMS40MDUyNCAxOS44ODA2TDAuMzQ2NjQ5IDE4LjQyMDhDLTAuMjM0MTc4IDE3LjYxOTggLTAuMDY4Nzg3NCAxNi40NjkyIDAuNzIwNSAxNS44NTY5TDIwLjU3MDkgMC40NTgyNzZDMjEuMzU3IC0wLjE1MTUxNiAyMi42Mzk5IC0wLjE1NCAyMy40MjkyIDAuNDU4Mjc2WiIgZmlsbD0iIzQwQkQ1RSIgZmlsbC1vcGFjaXR5PSIwLjMiLz4KPC9zdmc+Cg==); } #settings-room-status[data-subscription="purple"] > #settings-room-status-avatar:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0NCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40MjkyIDAuNDU4Mjc2TDQzLjI3OTYgMTUuODU2OUM0NC4wNjU3IDE2LjQ2NjcgNDQuMjM2MiAxNy42MTcgNDMuNjUzNCAxOC40MjA4TDQyLjU5NDggMTkuODgwNkM0Mi4wMTQgMjAuNjgxNSA0MC44OTkxIDIwLjgzODkgNDAuMTA5MSAyMC4yMjU5QzM5LjM3ODUgMTkuNjU5IDM4LjYyMzEgMTkuOTYwMyAzOC40NzM2IDIwLjkzOTJMMzUuNDczMiAzOS4yMjc2QzM1LjMyNDUgNDAuMjAxNCAzNC4zODg5IDQxIDMzLjM4NTIgNDFIMjkuMDk4NEMyOC4wOTkgNDEgMjcuMjgxMSA0MC4xOTQ5IDI3LjI4MTEgMzkuMjAxN1YzNC4xNzIzQzI3LjI4MTEgMzEuMTU1NiAyNC45MTY5IDI4LjcwOTQgMjIgMjguNzA5NEMxOS4wODMyIDI4LjcwOTQgMTYuNzE5IDMxLjE1NTYgMTYuNzE5IDM0LjE3MjNWMzkuMjAxN0MxNi43MTkgNDAuMTk5NCAxNS45MDU0IDQxIDE0LjkwMTcgNDFIMTAuNjE0OEM5LjYxNTM5IDQxIDguNjc2MzQgNDAuMjA2NSA4LjUyNjkyIDM5LjIyNzZMNS41MjY0NCAyMC45MzkyQzUuMzc3NzkgMTkuOTY1NCA0LjYxNTQ1IDE5LjY2MzcgMy44MjU0NCAyMC4yNzY3QzMuMDk0ODMgMjAuODQzNiAxLjk4ODA1IDIwLjY4NDMgMS40MDUyNCAxOS44ODA2TDAuMzQ2NjQ5IDE4LjQyMDhDLTAuMjM0MTc4IDE3LjYxOTggLTAuMDY4Nzg3NCAxNi40NjkyIDAuNzIwNSAxNS44NTY5TDIwLjU3MDkgMC40NTgyNzZDMjEuMzU3IC0wLjE1MTUxNiAyMi42Mzk5IC0wLjE1NCAyMy40MjkyIDAuNDU4Mjc2WiIgZmlsbD0iI0FENkJDRSIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+Cjwvc3ZnPgo=); } #settings-room-status[data-subscription="gold"] > #settings-room-status-avatar:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0NCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40MjkyIDAuNDU4Mjc2TDQzLjI3OTYgMTUuODU2OUM0NC4wNjU3IDE2LjQ2NjcgNDQuMjM2MiAxNy42MTcgNDMuNjUzNCAxOC40MjA4TDQyLjU5NDggMTkuODgwNkM0Mi4wMTQgMjAuNjgxNSA0MC44OTkxIDIwLjgzODkgNDAuMTA5MSAyMC4yMjU5QzM5LjM3ODUgMTkuNjU5IDM4LjYyMzEgMTkuOTYwMyAzOC40NzM2IDIwLjkzOTJMMzUuNDczMiAzOS4yMjc2QzM1LjMyNDUgNDAuMjAxNCAzNC4zODg5IDQxIDMzLjM4NTIgNDFIMjkuMDk4NEMyOC4wOTkgNDEgMjcuMjgxMSA0MC4xOTQ5IDI3LjI4MTEgMzkuMjAxN1YzNC4xNzIzQzI3LjI4MTEgMzEuMTU1NiAyNC45MTY5IDI4LjcwOTQgMjIgMjguNzA5NEMxOS4wODMyIDI4LjcwOTQgMTYuNzE5IDMxLjE1NTYgMTYuNzE5IDM0LjE3MjNWMzkuMjAxN0MxNi43MTkgNDAuMTk5NCAxNS45MDU0IDQxIDE0LjkwMTcgNDFIMTAuNjE0OEM5LjYxNTM5IDQxIDguNjc2MzQgNDAuMjA2NSA4LjUyNjkyIDM5LjIyNzZMNS41MjY0NCAyMC45MzkyQzUuMzc3NzkgMTkuOTY1NCA0LjYxNTQ1IDE5LjY2MzcgMy44MjU0NCAyMC4yNzY3QzMuMDk0ODMgMjAuODQzNiAxLjk4ODA1IDIwLjY4NDMgMS40MDUyNCAxOS44ODA2TDAuMzQ2NjQ5IDE4LjQyMDhDLTAuMjM0MTc4IDE3LjYxOTggLTAuMDY4Nzg3NCAxNi40NjkyIDAuNzIwNSAxNS44NTY5TDIwLjU3MDkgMC40NTgyNzZDMjEuMzU3IC0wLjE1MTUxNiAyMi42Mzk5IC0wLjE1NCAyMy40MjkyIDAuNDU4Mjc2WiIgZmlsbD0iI0ZGQkUwMCIgZmlsbC1vcGFjaXR5PSIwLjMiLz4KPC9zdmc+Cg==); } #settings-room-status[data-subscription="platinum"] > #settings-room-status-avatar:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0NCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40MjkyIDAuNDU4Mjc2TDQzLjI3OTYgMTUuODU2OUM0NC4wNjU3IDE2LjQ2NjcgNDQuMjM2MiAxNy42MTcgNDMuNjUzNCAxOC40MjA4TDQyLjU5NDggMTkuODgwNkM0Mi4wMTQgMjAuNjgxNSA0MC44OTkxIDIwLjgzODkgNDAuMTA5MSAyMC4yMjU5QzM5LjM3ODUgMTkuNjU5IDM4LjYyMzEgMTkuOTYwMyAzOC40NzM2IDIwLjkzOTJMMzUuNDczMiAzOS4yMjc2QzM1LjMyNDUgNDAuMjAxNCAzNC4zODg5IDQxIDMzLjM4NTIgNDFIMjkuMDk4NEMyOC4wOTkgNDEgMjcuMjgxMSA0MC4xOTQ5IDI3LjI4MTEgMzkuMjAxN1YzNC4xNzIzQzI3LjI4MTEgMzEuMTU1NiAyNC45MTY5IDI4LjcwOTQgMjIgMjguNzA5NEMxOS4wODMyIDI4LjcwOTQgMTYuNzE5IDMxLjE1NTYgMTYuNzE5IDM0LjE3MjNWMzkuMjAxN0MxNi43MTkgNDAuMTk5NCAxNS45MDU0IDQxIDE0LjkwMTcgNDFIMTAuNjE0OEM5LjYxNTM5IDQxIDguNjc2MzQgNDAuMjA2NSA4LjUyNjkyIDM5LjIyNzZMNS41MjY0NCAyMC45MzkyQzUuMzc3NzkgMTkuOTY1NCA0LjYxNTQ1IDE5LjY2MzcgMy44MjU0NCAyMC4yNzY3QzMuMDk0ODMgMjAuODQzNiAxLjk4ODA1IDIwLjY4NDMgMS40MDUyNCAxOS44ODA2TDAuMzQ2NjQ5IDE4LjQyMDhDLTAuMjM0MTc4IDE3LjYxOTggLTAuMDY4Nzg3NCAxNi40NjkyIDAuNzIwNSAxNS44NTY5TDIwLjU3MDkgMC40NTgyNzZDMjEuMzU3IC0wLjE1MTUxNiAyMi42Mzk5IC0wLjE1NCAyMy40MjkyIDAuNDU4Mjc2WiIgZmlsbD0iIzhBQURCNSIgZmlsbC1vcGFjaXR5PSIwLjI4Ii8+Cjwvc3ZnPgo=); } #settings-room-status[data-subscription="diamond"] > #settings-room-status-avatar:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0NCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40MjkyIDAuNDU4Mjc2TDQzLjI3OTYgMTUuODU2OUM0NC4wNjU3IDE2LjQ2NjcgNDQuMjM2MiAxNy42MTcgNDMuNjUzNCAxOC40MjA4TDQyLjU5NDggMTkuODgwNkM0Mi4wMTQgMjAuNjgxNSA0MC44OTkxIDIwLjgzODkgNDAuMTA5MSAyMC4yMjU5QzM5LjM3ODUgMTkuNjU5IDM4LjYyMzEgMTkuOTYwMyAzOC40NzM2IDIwLjkzOTJMMzUuNDczMiAzOS4yMjc2QzM1LjMyNDUgNDAuMjAxNCAzNC4zODg5IDQxIDMzLjM4NTIgNDFIMjkuMDk4NEMyOC4wOTkgNDEgMjcuMjgxMSA0MC4xOTQ5IDI3LjI4MTEgMzkuMjAxN1YzNC4xNzIzQzI3LjI4MTEgMzEuMTU1NiAyNC45MTY5IDI4LjcwOTQgMjIgMjguNzA5NEMxOS4wODMyIDI4LjcwOTQgMTYuNzE5IDMxLjE1NTYgMTYuNzE5IDM0LjE3MjNWMzkuMjAxN0MxNi43MTkgNDAuMTk5NCAxNS45MDU0IDQxIDE0LjkwMTcgNDFIMTAuNjE0OEM5LjYxNTM5IDQxIDguNjc2MzQgNDAuMjA2NSA4LjUyNjkyIDM5LjIyNzZMNS41MjY0NCAyMC45MzkyQzUuMzc3NzkgMTkuOTY1NCA0LjYxNTQ1IDE5LjY2MzcgMy44MjU0NCAyMC4yNzY3QzMuMDk0ODMgMjAuODQzNiAxLjk4ODA1IDIwLjY4NDMgMS40MDUyNCAxOS44ODA2TDAuMzQ2NjQ5IDE4LjQyMDhDLTAuMjM0MTc4IDE3LjYxOTggLTAuMDY4Nzg3NCAxNi40NjkyIDAuNzIwNSAxNS44NTY5TDIwLjU3MDkgMC40NTgyNzZDMjEuMzU3IC0wLjE1MTUxNiAyMi42Mzk5IC0wLjE1NCAyMy40MjkyIDAuNDU4Mjc2WiIgZmlsbD0iIzZEQzdFRSIgZmlsbC1vcGFjaXR5PSIwLjMiLz4KPC9zdmc+Cg==); } #settings-room-status[data-subscription="vip"] > #settings-room-status-avatar:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0NCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjMuNDI5MiAwLjQ1ODI3Nkw0My4yNzk2IDE1Ljg1NjlDNDQuMDY1NyAxNi40NjY3IDQ0LjIzNjIgMTcuNjE3IDQzLjY1MzQgMTguNDIwOEw0Mi41OTQ4IDE5Ljg4MDZDNDIuMDE0IDIwLjY4MTUgNDAuODk5MSAyMC44Mzg5IDQwLjEwOTEgMjAuMjI1OUMzOS4zNzg1IDE5LjY1OSAzOC42MjMxIDE5Ljk2MDMgMzguNDczNiAyMC45MzkyTDM1LjQ3MzIgMzkuMjI3NkMzNS4zMjQ1IDQwLjIwMTQgMzQuMzg4OSA0MSAzMy4zODUyIDQxSDI5LjA5ODRDMjguMDk5IDQxIDI3LjI4MTEgNDAuMTk0OSAyNy4yODExIDM5LjIwMTdWMzQuMTcyM0MyNy4yODExIDMxLjE1NTYgMjQuOTE2OSAyOC43MDk0IDIyIDI4LjcwOTRDMTkuMDgzMiAyOC43MDk0IDE2LjcxOSAzMS4xNTU2IDE2LjcxOSAzNC4xNzIzVjM5LjIwMTdDMTYuNzE5IDQwLjE5OTQgMTUuOTA1NCA0MSAxNC45MDE3IDQxSDEwLjYxNDhDOS42MTUzOSA0MSA4LjY3NjM0IDQwLjIwNjUgOC41MjY5MiAzOS4yMjc2TDUuNTI2NDQgMjAuOTM5MkM1LjM3Nzc5IDE5Ljk2NTQgNC42MTU0NSAxOS42NjM3IDMuODI1NDQgMjAuMjc2N0MzLjA5NDgzIDIwLjg0MzYgMS45ODgwNSAyMC42ODQzIDEuNDA1MjQgMTkuODgwNkwwLjM0NjY0OSAxOC40MjA4Qy0wLjIzNDE3OCAxNy42MTk4IC0wLjA2ODc4NzQgMTYuNDY5MiAwLjcyMDUgMTUuODU2OUwyMC41NzA5IDAuNDU4Mjc2QzIxLjM1NyAtMC4xNTE1MTYgMjIuNjM5OSAtMC4xNTQgMjMuNDI5MiAwLjQ1ODI3NloiIGZpbGw9IiNFQzUzNzciIGZpbGwtb3BhY2l0eT0iMC4yNiIvPg0KPC9zdmc+); } #settings-room-status-avatar-image { position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; background-repeat: no-repeat; background-size: auto 100%; background-position: center; } #settings-room-status-nickname { font-size: 0; line-height: 25px; white-space: nowrap; text-align: center; } #settings-room-status-nickname > img { display: none; margin-right: 8px; vertical-align: middle; } #settings-room-status-nickname > img.show { display: inline-block; } #settings-room-status-nickname > span { font-weight: 600; font-size: 18px; line-height: 25px; vertical-align: middle; } #settings-room-status-subscription { display: inline-block; margin-top: 12px; padding: 0 10px; border-radius: 10px; font-weight: 800; font-size: 10px; color: #fff; line-height: 19px; text-transform: uppercase; } #settings-room-status-subscription:before { content: attr(data-subscription); } #settings-room-status-subscription[data-subscription="free"] { display: none; } #settings-room-status-subscription[data-subscription="green"] { background-color: #40bd5e; } #settings-room-status-subscription[data-subscription="purple"] { background-color: #ad6bce; } #settings-room-status-subscription[data-subscription="gold"] { background-color: #ffbe00; } #settings-room-status-subscription[data-subscription="platinum"] { background-color: #8aadB5; } #settings-room-status-subscription[data-subscription="diamond"] { background-color: #6dc7ee; } #settings-room-status-subscription[data-subscription="vip"] { background-color: #ec5377; } #settings-room-status[data-subscription="free"] > #settings-room-status-table { display: none; } #settings-room-status-table { padding: 44px 0 14px; font-size: 0; } html.webview #settings-room-status-table { padding-left: 30px; padding-right: 30px; box-sizing: border-box; } html.webview #content-settings-inner-room:not([data-subscription="free"])[data-banner="show"] #content-settings-inner-room-banner { display: none; } #settings-room-status-table > div { padding: 6px 0; } #settings-room-status-table > div { display: none; } #settings-room-status-table[data-renewal-type="one_time"] > div.settings-room-renewal-one-time, #settings-room-status-table[data-renewal-type="active"] > div.settings-room-renewal-active, #settings-room-status-table[data-renewal-type="inactive"] > div.settings-room-renewal-inactive { display: block; } #settings-room-status-table span.settings-room-renewal-text-active { color: #40bd5e; } #settings-room-status-table span.settings-room-renewal-text-inactive { color: #ee5a58; } .settings-room-status-table-cell { display: inline-block; width: 50%; font-weight: 400; font-size: 13px; line-height: 18px; vertical-align: top; } .settings-room-status-table-cell:first-child { color: #808080; text-align: left; } .settings-room-status-table-cell:last-child { color: #4d4d4d; text-align: right; } .settings-room-status-table-cell > a { display: inline-block; margin-top: 8px; margin-left: 12px; font-weight: 400; font-size: 11px; color: #3d95cc; line-height: 15px; transition: .2s; cursor: pointer; } .settings-room-status-table-cell > a.hide { display: none; } .settings-room-status-table-cell > a:hover { color: #3cafff; } .settings-room-status-table-cell > a:active { color: #0075c7; } html.webview .settings-room-status-table-cell > a { margin-top: 0; } #settings-room-status-action { text-align: center; } .settings-room-status-action-button-wrapper { display: none; } .settings-room-status-action-button-wrapper .reward-badge { display: none; line-height: 17px; } .settings-room-status-action-button-wrapper .reward-badge.show { display: inline-block; } #content-settings-inner-room-content[data-type="room_started"] #settings-room-status-action > *[data-type="room_started"], #content-settings-inner-room-content[data-type="room_stopped"] #settings-room-status-action > *[data-type="room_stopped"] { display: block; } .settings-room-status-action-button-wrapper[data-type="room_started"] > .settings-room-button, .settings-room-status-action-button-wrapper[data-type="room_stopped"] > .settings-room-button { display: inline-block; height: 30px; width: auto; min-width: inherit; max-width: inherit; margin: 24px auto 16px; padding: 0 20px; font-size: 12px; line-height: 30px; } .settings-room-status-action-button-wrapper[data-type="room_started"] > .settings-room-button { background-color: #ff7777; } .settings-room-status-action-button-wrapper[data-type="room_started"] > .settings-room-button:hover, .settings-room-status-action-button-wrapper[data-type="room_started"] > .settings-room-button:active { background-color: #ee5e5e; } #settings-room-status-action-link { display: none; } #settings-room-status-action-link > a { display: inline-block; font-weight: 400; font-size: 12px; color: #3d95cc; transition: .2s; } #settings-room-status-action-link > a:hover { color: #3cafff; } #settings-room-status-action-link > a:active { color: #0075c7; } .wrapper-settings-save-button { padding: 50px 0; box-sizing: border-box; text-align: center; } #content-settings-inner-room-nickname div.wrapper-settings-save-button { padding-bottom: 10px; } .settings-save-button { display: inline-block; height: 40px; min-width: 120px; padding: 0 25px; border-radius: 4px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #fff; line-height: 40px; background-color: #40bd5e; cursor: pointer; transition: .2s; } .settings-save-button:hover { background-color: #53ce70; } .settings-save-button:active { background-color: #30a14b; } #content-settings-modal { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, .1); overflow: hidden; opacity: 0; visibility: hidden; transition: .2s; } #content-settings-modal.show { opacity: 1; visibility: visible; } #content-settings-modal:before { content: ''; position: absolute; display: block; height: 230px; width: 100%; top: 108px; left: 0; background-color: #fff; } #content-settings-modal-question, #content-settings-modal-forcoins, #content-settings-modal-error, #content-settings-modal-confirm { position: absolute; display: block; height: 230px; width: 100%; top: 108px; margin-left: 100%; padding: 0 30px; box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s, margin-left 0s ease 1s; } #content-settings-modal[data-type="question"] > #content-settings-modal-question, #content-settings-modal[data-type="forcoins"] > #content-settings-modal-forcoins, #content-settings-modal[data-type="error"] > #content-settings-modal-error, #content-settings-modal[data-type="confirm"] > #content-settings-modal-confirm { margin-left: 0; opacity: 1; visibility: visible; transition: opacity 1s, visibility 0s, margin-left 1s; } .content-settings-modal-buttons { position: absolute; display: block; height: 40px; left: 30px; right: 30px; bottom: 33px; text-align: center; } #content-settings-modal .content-settings-modal-buttons > span { display: inline-block; height: 100%; min-width: 130px; padding: 0 20px; border-radius: 3px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #fff; line-height: 40px; background-color: #40bd5e; vertical-align: middle; cursor: pointer; transition: .2s; } #content-settings-modal .content-settings-modal-buttons > span:hover { background-color: #53ce70; } #content-settings-modal .content-settings-modal-buttons > span:active { background-color: #30a14b; } #content-settings-modal .content-settings-modal-buttons > span + span { margin-left: 10px; border: 2px solid #cedbea; color: #3cafff; background-color: #edf5fa; line-height: 36px; } #content-settings-modal .content-settings-modal-buttons > span + span:hover, #content-settings-modal .content-settings-modal-buttons > span + span:active { border-color: #bfddff; color: #3494d9; background-color: #d9f0ff; } #content-settings-modal .content-settings-modal-buttons > span + span:active { background-color: #b3e0ff; } #content-settings-modal-question { padding-top: 59px; } #content-settings-modal-question > .room, #content-settings-modal-question > .premium { display: none; } #content-settings-modal-question[data-type="premium"] > .premium { display: block; } #content-settings-modal-question[data-type="room"] > .room { display: block; } #content-settings-modal-question > span { font-size: 14px; color: #545454; } #content-settings-modal-forcoins { padding-top: 28px; } #content-settings-modal-forcoins > .room, #content-settings-modal-forcoins > .premium { display: none; } #content-settings-modal-forcoins[data-type="premium"] > .premium { display: block; } #content-settings-modal-forcoins[data-type="room"] > .room { display: block; } #content-settings-modal-forcoins > h3 { min-height: 22px; font-size: 16px; color: #545454; line-height: 22px; text-transform: uppercase; } #content-settings-modal-forcoins > span { display: block; height: 15px; margin: 18px 0 5px; font-size: 11px; color: #b8b8b8; line-height: 15px; } #content-settings-modal-forcoins-input { position: relative; display: inline-block; max-width: 100%; margin: 0 auto; } #content-settings-modal-forcoins-input > input { width: 270px; padding: 0 10px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; font-weight: 400; font-size: 14px; color: #545454; line-height: 37px; text-align: center; } #content-settings-modal-error { padding-top: 28px; } #content-settings-modal-error > svg { display: block; height: 55px; margin: 0 auto; } #content-settings-modal-error > span { display: block; height: 74px; line-height: 74px; } #content-settings-modal-error > span > span { display: inline-block; font-size: 14px; color: #545454; line-height: 19px; vertical-align: middle; } #content-settings-modal-error > span > span > a { color: #3d95cc; transition: .2s; } #content-settings-modal-error > span > span > a:hover { color: #3cafff; } #content-settings-modal-error > span > span > a:active { color: #0075c7; } #content-settings-modal-confirm { padding-top: 38px; } #content-settings-modal-confirm > h3 { min-height: 22px; font-size: 16px; color: #545454; line-height: 22px; text-transform: uppercase; } #content-settings-modal-confirm > h3 > span { display: none; } #content-settings-modal-confirm[data-price="free"] > h3 > span[data-price="free"], #content-settings-modal-confirm[data-price="coins"] > h3 > span[data-price="coins"] { display: inline; } #content-settings-modal-confirm > span { display: block; height: 94px; line-height: 94px; } #content-settings-modal-confirm > span > span { display: inline-block; font-size: 14px; color: #545454; line-height: 19px; vertical-align: middle; } #content-inner.show-share > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-share > #content-info > #content-info-inner > div:not(#content-wrapper-share), #content-wrapper-share { display: none; } #content-inner.show-share > #content-info > #content-info-inner > #content-wrapper-share { display: block; } #content-wrapper-share { position: relative; border-radius: 4px; text-align: center; overflow: hidden; } #content-share-image { position: absolute; display: none; height: 100%; width: 100%; top: 0; left: 0; } #content-wrapper-share[data-type="public"] > #content-share-image { display: block; background-image: url(data:image/png;base64,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); background-repeat: no-repeat; background-size: cover; } #content-wrapper-share[data-type="public"] > #content-share-image > #content-share-image-top { position: absolute; height: 350px; width: 100%; top: 0; left: 0; } #content-wrapper-share[data-type="public"] > #content-share-image > #content-share-image-top:before { content: ''; position: absolute; display: block; height: 303px; width: 288px; top: 19px; left: 21px; background-repeat: no-repeat; background-image: url('/images/reward/share_public_top_left.png'); } #content-wrapper-share[data-type="public"] > #content-share-image > #content-share-image-top:after { content: ''; position: absolute; display: block; height: 303px; width: 90px; top: 34px; right: 28px; background-repeat: no-repeat; background-image: url('/images/reward/share_public_top_right.png'); } #content-wrapper-share[data-type="public"] > #content-share-image > #content-share-image-bottom { position: absolute; height: 351px; width: 100%; bottom: 0; left: 0; background-repeat: no-repeat; background-size: auto 100%; background-position: center; background-image: url('/images/reward/share_public_bottom.png'); } #content-share-header { position: relative; padding: 0 20px 45px; box-sizing: border-box; } #content-share-header > .content-header-button { color: #fff; } #content-share-header > .content-header-button > svg > path { fill: #fff; } #content-share-header > h2 { width: 100%; padding: 80px 30px 0; box-sizing: border-box; font-weight: 700; font-size: 47px; color: #fff; text-align: center; text-shadow: 2px 2px 7px rgba(0, 0, 0, .15); } #content-share-header-info { padding: 0 30px 40px; font-weight: 400; font-size: 15px; color: #fff; line-height: 20px; } #content-share-header-input { position: relative; height: 40px; width: 100%; max-width: 450px; margin: 0 auto; padding: 0 30px; box-sizing: border-box; } #content-share-header-input > input { height: 100%; width: 100%; padding: 0 82px 0 13px; border: none; border-radius: 6px; box-sizing: border-box; font-weight: 400; font-size: 14px; color: #090909; box-shadow: 0 8px 14px 0 rgba(0, 0, 0, .2); } #content-share-header-input-copy { position: absolute; height: 38px; min-width: 82px; top: 1px; right: 31px; padding: 0 10px; border: 4px solid #fff; border-radius: 8px; box-sizing: border-box; font-family: Roboto, Tahoma, Arial, sans-serif; font-weight: 400; font-size: 12px; color: #fff; line-height: 30px; text-align: center; background-color: #40bd5e; cursor: pointer; box-shadow: -12px 0 6px -6px #fff; transition: .2s; } #content-share-header-input-copy:hover { background-color: #53ce70; } #content-share-header-input-copy:active { background-color: #30a14b; } #content-share-header-input-copy.done { background-color: #878787; cursor: default; } #content-share-header-buttons { height: 31px; width: 100%; margin-top: 23px; } #content-share-header-buttons > * { display: inline-block; height: 100%; min-width: 122px; margin: 0 6px; padding: 0 10px; border-radius: 4px; box-sizing: border-box; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: 0 8px 14px 0 rgba(0, 0, 0, .2); transition: .2s; } #content-share-header-buttons > * > svg { margin-right: 8px; vertical-align: middle; } #content-share-header-buttons > * > span { font-family: Roboto, Tahoma, Arial, sans-serif; font-weight: 400; font-size: 12px; color: #fff; line-height: 31px; vertical-align: middle; } #content-share-header-facebook { background-color: #4767ab; } #content-share-header-facebook:hover { background-color: #4d6eb3; } #content-share-header-facebook:active { background-color: #273e6f; } #content-share-header-twitter { background-color: #25baf6; } #content-share-header-twitter:hover { background-color: #30c0fb; } #content-share-header-twitter:active { background-color: #0097d6; } #content-share-header-email { background-color: #b488fc; } #content-share-header-email:hover { background-color: #c19bff; } #content-share-header-email:active { background-color: #a26cfb; } #content-share-content { position: relative; } #content-wrapper-share[data-type="profile"] > #content-share-header { padding-left: 40px; padding-right: 40px; background-repeat: no-repeat; background-size: auto 100%; background-position: center; text-align: left; background-image: url('/images/reward/share_private.png'); } #content-wrapper-share[data-type="profile"] > #content-share-header > h2 { padding: 76px 0 0; text-align: left; } #content-wrapper-share[data-type="profile"] > #content-share-header > #content-share-header-info { max-width: 380px; padding: 6px 0 20px; font-weight: 400; font-size: 14px; text-align: left; } #content-wrapper-share[data-type="profile"] > #content-share-header > #content-share-header-input { max-width: 350px; margin: 0 auto 0 0; padding: 0; } #content-wrapper-share[data-type="profile"] > #content-share-header > #content-share-header-input > input { background-color: #fff; } #content-wrapper-share[data-type="profile"] > #content-share-header > #content-share-header-input > #content-share-header-input-copy { right: 1px; border: 4px solid #fff; box-shadow: -12px 0 6px -6px #fff; } #content-wrapper-share[data-type="profile"] > #content-share-header > #content-share-header-buttons { margin-left: -5px; margin-right: -5px; white-space: nowrap; } #content-wrapper-share[data-type="profile"] > #content-share-header > #content-share-header-buttons > * { min-width: 110px; margin: 0 5px; } #content-share-content-list-block { padding: 40px 90px 54px 82px; box-sizing: border-box; } #content-share-content-list-info { position: relative; padding-bottom: 19px; font-weight: 400; font-size: 16px; color: #808080; line-height: 22px; text-align: left; } #content-share-content-list-info > a { position: absolute; display: inline-block; top: 6px; right: 0; font-weight: 400; font-size: 10px; color: #3d95cc; line-height: 16px; transition: .2s; } #content-share-content-list-info > a > svg > path { transition: .2s; } #content-share-content-list-info > a:hover { color: #3cafff; } #content-share-content-list-info > a:hover > svg > path { fill: #3cafff; } #content-share-content-list-info > a:active { color: #0075c7; } #content-share-content-list-info > a:active > svg > path { fill: #0075c7; } #content-share-content-list { white-space: nowrap; } #content-share-content-list-header { position: relative; height: 17px; margin: 10px 0; font-weight: 400; font-size: 12px; color: #9e9e9e; line-height: 17px; text-align: left; } #content-share-content-list-header:after { content: ''; position: absolute; display: block; height: 1px; width: 100%; bottom: -10px; left: 0; background-color: #e9e9e9; } #content-share-content-list-header > span:after { content: attr(data-count); position: relative; display: inline-block; margin-left: 5px; font-weight: 600; font-size: 12px; color: #777; } #content-share-content-list-items { padding-top: 8px; text-align: left; } #content-share-content-list-items > div { position: relative; height: 19px; margin: 7px 0 0; padding-bottom: 7px; font-weight: 400; font-size: 15px; color: #5a5a5a; line-height: 19px; opacity: 1; } #content-share-content-list-header, #content-share-content-list-items > div { padding-left: 110px; padding-right: 84px; } #content-share-content-list-header > span, #content-share-content-list-items > div > span { display: inline-block; } #content-share-content-list-header > span:nth-child(1), #content-share-content-list-items > div > span:nth-child(1) { position: absolute; width: 110px; top: 0; left: 0; } #content-share-content-list-header > span:nth-child(2), #content-share-content-list-items > div > span:nth-child(2) { width: 100%; text-overflow: ellipsis; overflow: hidden; } #content-share-content-list-header > span:nth-child(3), #content-share-content-list-items > div > span:nth-child(3) { position: absolute; width: 110px; top: 0; padding-left: 5px; box-sizing: border-box; } #content-share-content-list-items > div > span > svg { margin-left: 3px; } #content-share-content-list-items > div > span > img, #content-share-content-list-items > div > span > svg { display: inline-block; } #content-share-content-list-loadmore { display: none; height: 28px; margin-top: 41px; padding: 0 25px; border: 2px solid #cedbea; box-sizing: border-box; border-radius: 3px; font-weight: 600; font-size: 12px; color: #3cafff; background-color: #edf5fa; line-height: 24px; vertical-align: middle; cursor: pointer; transition: .2s; } #content-share-content-list-loadmore:hover, #content-share-content-list-loadmore:active { border-color: #bfddff; color: #3494d9; background-color: #d9f0ff; } #content-share-content-list-loadmore:active { background-color: #b3e0ff; } #content-share-content-list-loadmore.show { display: inline-block; } @media screen and (max-width: 1300px) { #content-share-content-list-block { padding-left: 40px; padding-right: 40px; } #content-share-content-list-header, #content-share-content-list-items > div { padding-left: 90px; } #content-share-content-list-header > span:nth-child(1), #content-share-content-list-items > div > span:nth-child(1) { width: 70px; } } @media screen and (max-width: 500px) { #content-share-content-list-header, #content-share-content-list-items > div { padding-right: 88px; } #content-share-content-list-header > span:nth-child(3), #content-share-content-list-items > div > span:nth-child(3) { width: 90px; } } @media screen and (max-width: 420px) { #content-share-content-list-block { padding-left: 15px; padding-right: 15px; } #content-share-header-info, #content-share-header-input { padding-left: 0; padding-right: 0; } #content-share-header-input > input { padding-right: 13px; } #content-share-header-input-copy { position: static; height: 50px; margin-top: 9px; border-radius: 4px; border: none; font-size: 14px; line-height: 50px; box-shadow: none; } #content-wrapper-share[data-type="profile"] > #content-share-header > #content-share-header-input > #content-share-header-input-copy { box-shadow: none; } #content-share-header-buttons { position: relative; height: 110px; margin-top: 100px; padding: 60px 0 0; box-sizing: border-box; } #content-share-header-buttons > div { position: absolute; display: block; height: 50px; top: 0; left: 5px; right: 50%; margin: 0; line-height: 50px; transform: translate(-5px, 0); -webkit-transform: translate(-5px, 0); } #content-share-header-buttons > div + div { left: 50%; right: 5px; margin: 0; transform: translate(5px, 0); -webkit-transform: translate(5px, 0); } #content-wrapper-share[data-type="profile"] > #content-share-header > #content-share-header-buttons > div + div { right: -5px; } #content-share-header-buttons > * > span { font-size: 14px; line-height: 50px; } #content-share-header-email { width: 100%; margin: 0; } } #content-inner.show-error > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-error > #content-info > #content-info-inner > div:not(#content-wrapper-error), #content-wrapper-error { display: none; } #content-inner.show-error > #content-info > #content-info-inner > #content-wrapper-error { display: block; } #content-wrapper-error { position: relative; border-radius: 4px; text-align: center; overflow: hidden; } #content-error-inner { min-height: inherit; width: 100%; padding: 0 40px; box-sizing: border-box; font-weight: 300; white-space: nowrap; } #content-error-inner:before { content: ''; display: inline-block; min-height: inherit; width: 0; vertical-align: middle; } #content-error-inner-content { display: inline-block; width: 100%; white-space: normal; vertical-align: middle; } #content-error-inner-content > svg { margin-bottom: 15px; } #content-error-inner-content > h2 { font-size: 26px; color: #363636; } #content-error-inner-content > div { padding-top: 3px; font-size: 14px; color: #565656; } #content-inner.show-visits > #content-info > div:not(#content-info-hopping):not(#content-info-inner), #content-inner.show-visits > #content-info > #content-info-inner > div:not(#content-wrapper-visits), #content-wrapper-visits { display: none; } #content-inner.show-visits > #content-info > #content-info-inner > #content-wrapper-visits { display: block; min-height: 400px; } #content-wrapper-visits { position: relative; border-radius: 4px; text-align: center; overflow: hidden; } #content-visits-header { position: relative; padding: 0 20px 10px; box-sizing: border-box; } #content-visits-header > h2 { width: 100%; padding: 37px 120px 20px; box-sizing: border-box; font-weight: 400; font-size: 16px; color: #808080; text-align: center; } #content-visits-header > h2 > span { color: #b9b9b9; } #content-visits { padding: 0 40px 122px; box-sizing: border-box; } #content-visits[data-upgrade=""] { padding-bottom: 40px; } #content-visits[data-upgrade="gold"] #content-visits-upgrade { display: none; } #content-visits-table-header { font-weight: 400; font-size: 12px; color: #b7b7b7; text-align: left; } #content-visits[data-count=""] > #content-visits-table-header, #content-visits[data-count="0"] > #content-visits-table-header { display: none; } #content-visits-list { text-align: left; } .content-visits-list-row { position: relative; height: 50px; padding-right: 125px; border-bottom: 1px solid rgba(0, 0, 0, .05); box-sizing: border-box; text-align: left; } #content-visits[data-unavailable] .content-visits-list-row { filter: blur(3px); pointer-events: none; cursor: default !important; } #content-visits-list > .content-visits-list-row { position: relative; padding-left: 53px; font-weight: 400; font-size: 12px; color: #4d4d4d; } .content-visits-list-row > * { display: inline-block; line-height: 50px; white-space: nowrap; } .content-visits-list-row > div:first-child { width: 100%; } #content-visits-list > .content-visits-list-row > div:first-child { font-weight: 400; font-size: 13px; color: #4a4a4a; } .content-visits-list-row > div + div { position: absolute; width: 115px; top: 0; right: 0; } .content-visits-item-icon-wrapper { position: absolute; height: 27px; width: 27px; top: 12px; left: 18px; } .content-visits-item-icon { height: 100%; width: 100%; border-radius: 100%; overflow: hidden; } .content-visits-item-icon:before { content: attr(data-nickname); position: absolute; display: inline-block; height: 100%; width: 100%; top: 0; left: 0; font-size: 12px; line-height: 27px; text-align: center; } .content-visits-item-icon > img { position: absolute; height: 100%; width: 100%; top: 0; opacity: 0; transition: .2s; border-radius: 100%; } .content-visits-item-icon > img.show { opacity: 1; } .content-visits-item-flair { position: absolute; height: 20px; width: 20px; left: -7px; bottom: 8px; text-align: center; } .content-visits-item-flair> img { max-height: 100%; max-width: 100%; vertical-align: middle; opacity: 0; transition: .2s; border-radius: 100%; } .content-visits-item-flair > img.show { opacity: 1; } .content-visits-item-name { position: relative; width: 100%; overflow: hidden; } .content-visits-item-name:after { content: ''; position: absolute; height: 100%; width: 20px; top: 0; right: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-9 */ } .content-visits-item-name > * { vertical-align: middle; } .content-visits-item-name > img { display: none; margin-right: 5px; } .content-visits-item-name > img.show { display: inline-block; } .content-visits-item-name > a:hover { text-decoration: underline; } #content-visits-loadmore { display: none; height: 28px; margin-top: 41px; padding: 0 25px; border: 2px solid #cedbea; box-sizing: border-box; border-radius: 3px; font-weight: 600; font-size: 12px; color: #3cafff; background-color: #edf5fa; line-height: 24px; vertical-align: middle; cursor: pointer; transition: .2s; } #content-visits-loadmore:hover, #content-visits-loadmore:active { border-color: #bfddff; color: #3494d9; background-color: #d9f0ff; } #content-visits-loadmore:active { background-color: #b3e0ff; } #content-visits-loadmore.show { display: inline-block; } #content-visits-list-empty { display: block; padding: 145px 40px 145px; box-sizing: border-box; text-align: center; } #content-visits-list-empty > span { font-weight: 400; font-size: 13px; color: #4d4d4d; line-height: 18px; } #content-visits-upgrade { position: absolute; height: 82px; width: 100%; left: 0; bottom: 0; border-top: 1px solid #cedbea; border-radius: 0 0 4px 4px; background-color: #edf5fa; line-height: 82px; text-align: center; } #content-visits-upgrade-data { display: inline-block; vertical-align: middle; white-space: nowrap; } #content-visits-upgrade-data > div { display: inline-block; vertical-align: middle; white-space: normal; } #content-visits-upgrade-data > div + div { margin-left: 24px; } #content-visits-upgrade-header { font-weight: 400; font-size: 16px; color: #555; line-height: 22px; } #content-visits-upgrade-info { padding-top: 1px; font-weight: 400; font-size: 11px; color: #828282; line-height: 15px; } #content-visits-upgrade-unavailable { display: none; font-weight: 400; font-size: 16px; color: #555; line-height: 22px; } #content-visits[data-unavailable] #content-visits-upgrade-data > div:first-child > * { display: none; } #content-visits[data-unavailable] #content-visits-upgrade-data > div:first-child > #content-visits-upgrade-unavailable { display: block; } #content-visits-upgrade-data > div > a { display: inline-block; height: 30px; min-width: 90px; padding: 0 10px; border-radius: 4px; box-sizing: border-box; font-family: Roboto, Tahoma, Arial, sans-serif; font-weight: 400; font-size: 12px; color: #fff; line-height: 30px; text-align: center; background-color: #40bd5e; cursor: pointer; transition: .2s; vertical-align: middle; } #content-visits-upgrade-data > div > a:hover { background-color: #53ce70; } #content-visits-upgrade-data > div > a:active { background-color: #30a14b; } #toast { position: fixed; min-height: 70px; width: 100%; top: -100%; left: 0; padding: 0 30px; box-sizing: border-box; font-size: 0; color: #4d4d4d; text-align: center; line-height: 70px; white-space: nowrap; z-index: 10; transition: top .2s; } #toast.show { top: 0; } #toast-content { display: table; height: 100%; margin: 0 auto; } #toast-text { display: table-cell; font-size: 16px; font-weight: 400; vertical-align: middle; white-space: normal; } #toast-text > span { display: inline-block; line-height: 22px; white-space: normal; vertical-align: middle; overflow: hidden; cursor: default; } #toast-buttons { display: table-cell; white-space: nowrap; vertical-align: middle; } #toast-buttons > * { display: inline-block; border: 1px solid rgba(77, 77, 77, .5); border-radius: 4px; box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 15px; color: inherit; background-color: transparent; vertical-align: middle; cursor: pointer; transition: .2s; } #toast-buttons > *:hover, #toast-buttons > *:active { color: #fff; border-color: transparent; } #toast-buttons > *:focus { outline: none; } #toast-button-custom { display: none; height: 30px; min-width: 90px; margin-left: 18px; padding: 0 20px; font-size: 15px; font-weight: 400; line-height: 28px; text-align: center; } #toast-buttons.button-custom > #toast-button-custom { display: inline-block; } #toast-button-close { display: none; height: 26px; width: 26px; margin-left: 18px; padding: 7px; } #toast-buttons.button-close > #toast-button-close { display: inline-block; } #toast-button-close > svg { vertical-align: top; } #toast-button-close > svg > path { fill: #4d4d4d; fill-rule: evenodd; transition: .2s; } #toast-button-close:hover > svg > path, #toast-button-close:active > svg > path { fill: #fff; } #toast[data-type=""] { display: none; } #toast[data-type="default"] { color: #fff; background-color: rgba(0, 0, 0, .65); } #toast[data-type="default"] #toast-buttons > * { border-color: rgba(255, 255, 255, .5); } #toast[data-type="default"] #toast-buttons > *:hover, #toast[data-type="default"] #toast-buttons > *:active { border-color: transparent; color: #4d4d4d; background-color: #ccc; } #toast[data-type="default"] #toast-buttons > *:active { background-color: #a9a9a9; } #toast[data-type="default"] #toast-button-close > svg > path { fill: #fff; } #toast[data-type="default"] #toast-button-close:hover > svg > path, #toast[data-type="default"] #toast-button-close:active > svg > path { fill: #4d4d4d; } #toast[data-type="error"] { background-color: #ffd9d9; } #toast[data-type="error"] #toast-buttons > *:hover { background-color: #ff7777; } #toast[data-type="error"] #toast-buttons > *:active { background-color: #ee5e5e; } #toast[data-type="warning"] { background-color: #ffefc5; } #toast[data-type="warning"] #toast-buttons > *:hover { background-color: #ffbe00; } #toast[data-type="warning"] #toast-buttons > *:active { background-color: #e9ad00; } #toast[data-type="success"] { background-color: #8ceb95; } #toast[data-type="success"] #toast-buttons > *:hover { background-color: #53ce70; } #toast[data-type="success"] #toast-buttons > *:active { background-color: #30a14b; } #toast[data-type="info"] { background-color: #d9ecff; } #toast[data-type="info"] #toast-buttons > *:hover { background-color: #80c0eb; } #toast[data-type="info"] #toast-buttons > *:active { background-color: #58ace5; } #toast a { color: #3d95cc; } .status-online, .status-offline, .status-invisible, .status-busy, .status-away { display: inline-block; } .status-online { background-color: #2ecb4e; } .status-offline, .status-invisible { background-color: #e2e2e2; } .status-busy { background-color: #ee616d; } .status-away { background-color: #fec725; } #menu-info-status-icon.status-privacy > svg { display: block; } @media screen and (max-width: 1340px) { #wrapper-xpbacks-none div.xpback-info-item.active .active-pointer { position: relative; width: 225px; left: 0; top: 0; margin: 10px auto 0; height: 26px; padding: 3px 8px; } #wrapper-xpbacks-none div.xpback-info-item.active .active-pointer > h3 { font-size: 13px; } #wrapper-xpbacks-none div.xpback-info-item.active .active-pointer:after { position: absolute; border-top: none; border-left: 15px solid transparent; border-bottom: 15px solid #00d1ff; border-right: 15px solid transparent; left: 4px; top: -8px; } #wrapper-xpbacks-none div.xpback-info-item.active .active-pointer > * { display: inline-block; } }