.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;
}
}