html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

@font-face {
    font-family: Emoji;
    src: local('Segoe UI Emoji'), local('Apple Color Emoji'), local('Noto Color Emoji');
    unicode-range: U+2130-3300, U+1F000-1F9FF
}

@font-face {
    font-family: SpecialI;
    src: local('Verdana');
    unicode-range: U+49
}

html,
body {
    background-color: black;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: white
}

body,
input {
    font-family: Emoji, Verdana, sans-serif
}

body {
    background: black no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    cursor: url(/static/images/arrow.png), default
}

body.if-ie {
    cursor: url(/static/images/arrow.ani), default
}

body:has(#Loading) #container,
body:has(#Loading) #notificationBtn,
body:has(#Loading) #Dragon2D,
body:has(#Loading) #chat_divs,
body:has(#Loading) #TouchShot,
body:has(#Loading) .FilterNewBadge,
body:has(#Loading) .new-mode-badge {
    visibility: hidden !important;
    pointer-events: none !important;
}

.NoSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.CanSelect {
    -webkit-touch-callout: text !important;
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important
}

a:link {
    color: orange;
    text-decoration: none
}

a:visited {
    color: #f85
}

a:active {
    color: red
}

#container {
    position: fixed;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    width: 800px;
    height: 600px;
    margin-left: auto;
    margin-right: auto
}

.HandCursor {
    cursor: url(/static/images/hand.cur), move !important
}

.screen {
    position: relative;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover
}

#myDialog {
    z-index: 9999;
    display: none
}

#channelScreen {
    pointer-events: none
}

#channelScreen * {
    pointer-events: auto
}

#channelInput {
    position: absolute;
    left: 104px;
    top: 576px;
    width: 449px;
    height: 16px;
    color: #acf2f6;
    font-size: 12px;
    background: transparent;
    border: 1px solid transparent;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

#channelInput:focus {
    border: orange solid 1px;
    background-color: #001839
}

#channelInputAlt {
    position: absolute;
    left: 540px;
    top: 578px
}

.BigInput {
    z-index: 999 !important;
    bottom: 11px;
    top: auto !important;
    background-color: rgba(0, 0, 200, 0.5) !important
}

.emoji,
.emojione {
    width: 12px;
    height: 12px;
    vertical-align: bottom
}

#myInfoBox {
    position: absolute;
    left: 584px;
    top: 89px;
    width: 207px;
    height: 180px;
    background: rgba(140, 140, 140, 0.5);
    border-radius: 10px;
    pointer-events: none
}

.SepH {
    height: 1px;
    margin: 2px auto 1px auto;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(90, 90, 200, 0.5), rgba(0, 0, 0, 0))
}

#channel {
    position: absolute;
    left: 18px;
    top: 458px;
    width: 537px;
    height: 116px;
    font-size: 12px;
    color: #acf2f6
}

#channel .viewport {
    width: 522px;
    height: 116px;
    overflow: hidden;
    position: relative
}

#channel .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    word-wrap: break-word;
    width: 522px
}

#channel .scrollbar {
    position: relative;
    float: right;
    width: 13px;
    padding-top: 11px
}

#gameChatHtml .zotata-chat-type0 {
    color: white;
    text-shadow: black -1px 0 2px, black 0 1px 2px, black 1px 0 2px, black 0 -1px 2px
}

.zotata-chat-type2 {
    color: #ef9c10;
    text-shadow: #6b2918 -1px 0 2px, #6b2918 0 1px 2px, #6b2918 1px 0 2px, #6b2918 0 -1px 2px
}

.zotata-chat-type3 {
    color: #84b5ff;
    text-shadow: #525a73 -1px 0 2px, #525a73 0 1px 2px, #525a73 1px 0 2px, #525a73 0 -1px 2px
}

.zotata-chat-type4 {
    color: #eef
}

#gameChatHtml .zotata-chat-type4 {
    color: white;
    text-shadow: black -1px 0 2px, black 0 1px 2px, black 1px 0 2px, black 0 -1px 2px
}

.zotata-chat-type5 {
    color: #debdef;
    text-shadow: #8c4ab5 -1px 0 2px, #8c4ab5 0 1px 2px, #8c4ab5 1px 0 2px, #8c4ab5 0 -1px 2px
}

.zotata-chat-type6 {
    color: #ffde9c;
    text-shadow: #de4c18 -1px 0 2px, #de4c18 0 1px 2px, #de4c18 1px 0 2px, #de4c18 0 -1px 2px
}

.zotata-chat-type7 {
    color: #88cbba;
    text-shadow: black -1px 0 2px, black 0 1px 2px, black 1px 0 2px, black 0 -1px 2px
}

.zotata-chat-type8 {
    color: #ffb673;
    text-shadow: #7d3a03 -1px 0 2px, #7d3a03 0 1px 2px, #7d3a03 1px 0 2px, #7d3a03 0 -1px 2px
}

.zotata-chat-type9 {
    color: #9cffde;
    text-shadow: #41594a -1px 0 2px, #41594a 0 1px 2px, #41594a 1px 0 2px, #41594a 0 -1px 2px
}

.zotata-chat-type12 {
    color: #fcc;
    text-shadow: #f00 -1px 0 1px, #f00 0 1px 1px, #f00 1px 0 1px, #f00 0 -1px 1px
}

.zotata-chat-type13 {
    color: #ffd700;
    text-shadow: #b8860b -1px 0 2px, #b8860b 0 1px 2px, #b8860b 1px 0 2px, #b8860b 0 -1px 2px
}

.zotata-chat-type10 {
    color: #f80;
    text-shadow: #525a73 -1px 0 2px, #525a73 0 1px 2px, #525a73 1px 0 2px, #525a73 0 -1px 2px
}

.zotata-chat-type11 {
    color: #f80;
    text-shadow: black -1px 0 2px, black 0 1px 2px, black 1px 0 2px, black 0 -1px 2px
}

.zotata-chat-type17 {
    color: #9ff;
    text-shadow: #00f -1px 0 1px, #00f 0 1px 1px, #00f 1px 0 1px, #00f 0 -1px 1px
}

.zotata-chat-icon {
    float: left;
    width: 12px;
    height: 12px;
    background-image: url(/static/images/ranks3.png);
    background-repeat: no-repeat;
    margin-right: 3px
}

.zotata-chat-icon1 {
    background-position: 0 -710px
}

.zotata-chat-icon2 {
    background-position: -13px -710px
}

.zotata-chat-icon3 {
    background-position: -26px -710px
}

.zotata-chat-icon5 {
    background-position: -52px -710px
}

.zotata-chat-icon6 {
    background-position: -65px -710px
}

.zotata-chat-icon7 {
    background-position: -104px -710px
}

.zotata-chat-icon8 {
    background-position: -91px -710px
}

.zotata-chat-icon9 {
    background-position: -104px -710px
}

.zotata-chat-icon12 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAB3RJTUUH3gEZFQgsFH1hKgAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAGNSURBVHjalZJNSxtRGIWfTO7M1AkaPyakgtqVtLtAuvQPdN+NUJBCu6sfBTduRHDjzgpCd4Xu/AsKBaFQcBVqdxaLtCIt2EnqmMzMzdyZ+EZQ6tID58J7uee8XxfuiUL/2IPFsm0vuZ4azVT6OcasFYq4XtFeV1rNJJ30vKnN5jPYLuzCypNqdePR0xpMViA4JTj6pntYll+r2wxX4eSMk4NDvgetZTVWLi+M2wo8G4Yc6CrGRiyXriQflvshF0o24wOKXzCvnEpltPvjGOdLAEcicGOwUsil1sN9MRDBucY0NT0YsYzvfw0siKKE9CKERB5LzIAw1uT/QpJIE8hrsWoUZ30/6pW851nYIpOqjDAXgTFiLhQfWsKfwiDj7fWUPtXrO+7Z8WypG+KVQD2QJCLKRBBH8Ff4u82HFzmvVV9w2WjMdR5PJ60LXjrtEEfLvMUqzSCU0tsJ7/dzlm73cIOPEw9fZe3LdybuDPbjPKMpnH/TY+fO4v7HllJT2pitfo/S/vIq/Lnvb7iDK2R3noY07Xa9AAAAAElFTkSuQmCC) !important
}

.zotata-chat-icon13 {
    background-position: -91px -710px
}

.zotata-chat-icon17 {
    background-position: -78px -710px
}

.HD .zotata-chat-icon1 {
    background-position: -878px -1002.5px
}

.HD .zotata-chat-icon2 {
    background-position: -891px -1002.5px
}

.HD .zotata-chat-icon3 {
    background-position: -903px -1002.5px
}

.HD .zotata-chat-icon4 {
    background-position: -915px -1002.5px
}

.HD .zotata-chat-icon5 {
    background-position: -928px -1002.5px
}

.HD .zotata-chat-icon6 {
    background-position: -940px -1002.5px
}

.HD .zotata-chat-icon7,
.HD .zotata-chat-icon9 {
    background-position: -978px -1002.5px
}

.HD .zotata-chat-icon8,
.HD .zotata-chat-icon13 {
    background-position: -965px -1002.5px
}

.HD .zotata-chat-icon12 {
    background-position: -981px -1016px
}

.HD .zotata-chat-icon17 {
    background-position: -953px -1002.5px
}

.blackShadow {
    text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black
}

.blackShadow2 {
    text-shadow: -2px 0 4px black, 0 2px 4px black, 2px 0 4px black, 0 -2px 4px black, 0 -1px 4px black, 1px 0 4px black
}

.whiteShadow {
    text-shadow: -1px 0 2px white, 0 1px 2px white, 1px 0 2px white, 0 -1px 2px white
}

.goldShadow {
    text-shadow: -1px 0 2px #634910, 0 1px 2px #634910, 1px 0 2px #634910, 0 -1px 2px #634910
}

.cashShadow {
    text-shadow: #083863 -1px 0 1px, #083863 0 1px 1px, #083863 1px 0 1px, #083863 0 -1px 1px
}

.cashText {
    color: #8bc2ee;
    text-shadow: #083863 -1px 0 1px, #083863 0 1px 1px, #083863 1px 0 1px, #083863 0 -1px 1px, -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black
}

#playersList {
    position: absolute;
    left: 584px;
    top: 305px;
    width: 211px;
    height: 223px
}

#playersList .viewport {
    width: 198px;
    height: 223px;
    overflow: hidden;
    position: relative
}

#playersList .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%
}

#playersList .scrollbar {
    position: relative;
    float: right;
    width: 13px;
    padding-top: 11px
}

.playerListItem {
    position: relative;
    margin-bottom: 3px;
    height: 15px
}

.playerListItemSelected {
    background-color: #f5f5dc
}

.playerListRank {
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 15px
}

.playerListName {
    position: absolute;
    left: 25px;
    top: 0;
    font-size: 11px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    height: 15px;
    padding: 2px
}

#itemsSelection {
    position: absolute;
    left: 585px;
    top: 306px;
    width: 209px;
    height: 220px;
    z-index: 13;
    background-color: rgba(0, 0, 60, 0.5)
}

#itemsSelection.InRoom {
    top: 256px;
    background-color: inherit
}

#itemsSelectText {
    position: absolute;
    top: 44px;
    width: 100%;
    text-align: center
}

#friendsList {
    position: absolute;
    left: 584px;
    top: 305px;
    width: 211px;
    height: 223px;
    z-index: 13;
    background-color: rgba(0, 0, 60, 0.25)
}

#friendsList.InGame {
    top: 293px
}

#friendsList .viewport {
    width: 198px;
    height: 223px;
    overflow: hidden;
    position: relative
}

#friendsList .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%
}

#friendsList .scrollbar {
    position: relative;
    float: right;
    width: 13px;
    padding-top: 11px
}

#container.Game #friendsList,
#container.Game #guildMembersList,
#container.Shop #friendsList,
#container.Shop #guildMembersList {
    box-shadow: black 0 0 15px, black 0 0 15px inset
}

.scrollbar {
    background: rgba(150, 150, 150, 0.5) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAEsAQMAAAAioqsYAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACpJREFUKM9j+P+DoYGDoYmDoZ2Dob+DYf4Jhv0vgCJAcYjUKBpFo4imCAA7QqZEVSOs/wAAAABJRU5ErkJggg==) no-repeat 0 0
}

.track {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJAQMAAADTtDQpAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACFJREFUCNdj+P+DoYGDYf8LhvknGPo7GNo5GJo4gCJAcQCUUQo9cuz/KAAAAABJRU5ErkJggg==) no-repeat 0 100%;
    height: 100%;
    width: 13px;
    position: relative;
    padding: 0 10px
}

.thumb {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAEsAgMAAABs6XGyAAAACVBMVEUAAAAAAAAdSWtsRpV/AAAAAXRSTlMAQObYZgAAAB1JREFUOMtjmBrawBAa6jCKR/EoHsUDgkVDGYgFAICmCSRPNiU/AAAAAElFTkSuQmCC) no-repeat 50% 100%;
    height: 20px;
    width: 23px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: -5px
}

.thumb .end {
    background-position: 50% 0 !important;
    overflow: hidden;
    height: 5px;
    width: 23px
}

#guildMembersList {
    position: absolute;
    left: 584px;
    top: 305px;
    width: 211px;
    height: 223px;
    z-index: 13;
    font-size: 12px;
    text-align: center;
    background-color: rgba(0, 0, 60, 0.25)
}

#guildMembersList.InGame {
    top: 293px
}

#guildMembersList .viewport {
    width: 198px;
    height: 223px;
    overflow: hidden;
    position: relative
}

#guildMembersList .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%
}

#guildMembersList .scrollbar {
    position: relative;
    float: right;
    width: 13px;
    padding-top: 11px
}

.friendListItem {
    position: relative;
    height: 31px
}

.friendListItem.odd {
    background-color: rgba(0, 0, 0, 0.5)
}

.friendListItem.selected {
    background-color: #f5f5dc
}

.guildMemberListItem {
    position: relative;
    height: 30px
}

.guildMemberListItem.odd {
    background-color: rgba(0, 0, 0, 0.5)
}

.guildMemberListItem.selected {
    background-color: #f5f5dc
}

.friendListPhoto {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 40px;
    text-align: center;
    overflow: hidden
}

.friendListRank {
    position: absolute;
    top: 0;
    left: 40px;
    width: 25px;
    height: 15px
}

.friendListName {
    position: absolute;
    left: 68px;
    top: 2px;
    font-size: 11px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    height: 15px
}

.friendListGP {
    position: absolute;
    left: 40px;
    top: 17px;
    font-size: 11px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    height: 15px;
    width: 70px
}

.friendListLocation {
    position: absolute;
    left: 117px;
    top: 17px;
    font-size: 11px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    height: 15px
}

#friendsListExtra {
    position: absolute;
    left: 584px;
    top: 249px;
    width: 190px;
    height: 36px;
    background-color: #39639c;
    padding: 10px;
    display: none
}

#guildRoomTabExtra {
    position: absolute;
    left: 584px;
    top: 249px;
    width: 190px;
    height: 36px;
    background-color: #39639c;
    padding: 10px;
    display: none
}

.span_rank {
    display: inline-block;
    vertical-align: middle;
    color: transparent;
    text-shadow: none;
    font-size: 0
}

.span_rank2 {
    display: inline-block;
    position: relative;
    top: 3px
}

.rank {
    width: 25px;
    height: 15px;
    background-repeat: no-repeat
}

.rank0 {
    background-position: 0 -723px
}

.rank1 {
    background-position: -26px -723px
}

.rank2 {
    background-position: -52px -723px
}

.rank3 {
    background-position: -78px -723px
}

.rank4 {
    background-position: -104px -723px
}

.rank5 {
    background-position: -130px -723px
}

.rank6 {
    background-position: -156px -723px
}

.rank7 {
    background-position: -182px -723px
}

.rank8 {
    background-position: -208px -723px
}

.rank9 {
    background-position: -234px -723px
}

.rank10 {
    background-position: -260px -723px
}

.rank11 {
    background-position: -286px -723px
}

.rank12 {
    background-position: -312px -723px
}

.rank13 {
    background-position: 0 -739px
}

.rank14 {
    background-position: -26px -739px
}

.rank15 {
    background-position: -52px -739px
}

.rank16 {
    background-position: -78px -739px
}

.rank17 {
    background-position: -104px -739px
}

.rank18 {
    background-position: -130px -739px
}

.rank19 {
    background-position: -156px -739px
}

.rank20 {
    background-position: -182px -739px
}

.rank21 {
    background-position: 0 0
}

.rank22 {
    background-position: -208px -739px
}

.rank23 {
    background-position: -234px -739px
}

.rank24 {
    background-position: -260px -739px
}

.rank25 {
    background-position: -312px -739px
}

.rank26 {
    background-position: -286px -739px
}

.rank27 {
    background-position: -26px 0
}

.rank28 {
    background-position: -52px 0
}

.rank29 {
    background-position: -78px 0
}

.rank30 {
    background-position: -104px 0
}

.rank31 {
    background-position: -130px 0
}

/* Ranks 32-38: no están en el spritesheet (salen transparentes) → PNG individuales */
.rank32,
.HD .rank32 {
    background-image: url(/static/images/ranks/32.png) !important;
    background-position: 0 0 !important;
    background-size: 25px 15px !important;
    background-repeat: no-repeat !important
}

.rank33,
.HD .rank33 {
    background-image: url(/static/images/ranks/33.png) !important;
    background-position: 0 0 !important;
    background-size: 25px 15px !important;
    background-repeat: no-repeat !important
}

.rank34,
.HD .rank34 {
    background-image: url(/static/images/ranks/34.png) !important;
    background-position: 0 0 !important;
    background-size: 25px 15px !important;
    background-repeat: no-repeat !important
}

.rank35,
.HD .rank35 {
    background-image: url(/static/images/ranks/35.png) !important;
    background-position: 0 0 !important;
    background-size: 25px 15px !important;
    background-repeat: no-repeat !important
}

.rank36,
.HD .rank36 {
    background-image: url(/static/images/ranks/36.png) !important;
    background-position: 0 0 !important;
    background-size: 25px 15px !important;
    background-repeat: no-repeat !important
}

.rank37,
.HD .rank37 {
    background-image: url(/static/images/ranks/37.png) !important;
    background-position: 0 0 !important;
    background-size: 25px 15px !important;
    background-repeat: no-repeat !important
}

.rank38,
.HD .rank38 {
    background-image: url(/static/images/ranks/38.png) !important;
    background-position: 0 0 !important;
    background-size: 25px 15px !important;
    background-repeat: no-repeat !important
}

.rank39,
.HD .rank39 {
    background-image: url(/static/images/ranks/39.png) !important;
    background-position: 0 0 !important;
    background-size: 25px 15px !important;
    background-repeat: no-repeat !important
}


.HD .rank0 {
    background-position: -878px -1015px
}

.HD .rank1 {
    background-position: -903.5px -1015px
}

.HD .rank2 {
    background-position: -929px -1015px
}

.HD .rank3 {
    background-position: -954.5px -1015px
}

.HD .rank4 {
    background-position: -878px -1030.5px
}

.HD .rank5 {
    background-position: -903.5px -1030.5px
}

.HD .rank6 {
    background-position: -929px -1030.5px
}

.HD .rank7 {
    background-position: -954.5px -1030.5px
}

.HD .rank8 {
    background-position: -878px -1046px
}

.HD .rank9 {
    background-position: -903.5px -1046px
}

.HD .rank10 {
    background-position: -929px -1046px
}

.HD .rank11 {
    background-position: -954.5px -1046px
}

.HD .rank12 {
    background-position: -878px -1061.5px
}

.HD .rank13 {
    background-position: -903.5px -1061.5px
}

.HD .rank14 {
    background-position: -929px -1061.5px
}

.HD .rank15 {
    background-position: -954.5px -1061.5px
}

.HD .rank16 {
    background-position: -878px -1077px
}

.HD .rank17 {
    background-position: -903.5px -1077px
}

.HD .rank18 {
    background-position: -929px -1077px
}

.HD .rank19 {
    background-position: -954.5px -1077px
}

.HD .rank20 {
    background-position: -878px -1092.5px
}

.HD .rank21 {
    background-position: -903.5px -1092.5px
}

.HD .rank22 {
    background-position: -929px -1092.5px
}

.HD .rank23 {
    background-position: -954.5px -1092.5px
}

.HD .rank24 {
    background-position: -878px -1108px
}

.HD .rank25 {
    background-position: -903.5px -1108px
}

.HD .rank26 {
    background-position: -929px -1108px
}

.HD .rank27 {
    background-position: -954.5px -1108px
}

.HD .rank28 {
    background-position: -878px -1123.5px
}

.HD .rank29 {
    background-position: -903.5px -1123.5px
}

.HD .rank30 {
    background-position: -929px -1123.5px
}

.HD .rank31 {
    background-position: -954.5px -1123.5px
}

/* .HD .rank32-34 ya definidos arriba con PNG individuales */

#myName2,
#myName3,
#myRankEffect {
    position: absolute;
    left: 592px;
    top: 97px;
    pointer-events: none
}

#myName2 {
    display: block;
    white-space: nowrap;
    overflow: visible;
    height: 15px;
    font-size: 11px;
    color: #fff;
    line-height: 15px
}

#myVipInsignia {
    position: absolute;
    top: 97px;
    width: 25px;
    height: 15px;
    z-index: 32;
    pointer-events: none;
}

#myRank2 {
    position: absolute;
    left: 592px;
    top: 97px;
    z-index: 31;
    pointer-events: none;
    overflow: visible;
}

#myPowerUser {
    position: absolute;
    left: 582px;
    top: 74px;
    font-size: 11px;
    color: #fca;
    text-align: center;
    width: 211px
}

#myGP,
#myGP2 {
    position: absolute;
    right: 72px;
    top: 221px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    pointer-events: none;
    z-index: 9
}

#myPUGP {
    position: absolute;
    right: 12px;
    top: 221px;
    color: #fff;
    font-size: 8px;
    background: #f66;
    border-radius: 5px;
    padding: 1px;
    display: none;
    pointer-events: none
}

#myPUG {
    position: absolute;
    right: 12px;
    top: 250px;
    color: #fff;
    font-size: 8px;
    background: #f66;
    border-radius: 5px;
    padding: 1px;
    display: none;
    pointer-events: none
}

#myPlusGP {
    position: absolute;
    right: 41px;
    top: 221px;
    color: #fff;
    font-size: 8px;
    background: #ff6;
    border-radius: 5px;
    padding: 1px;
    display: none;
    pointer-events: none
}

#myGuildGP {
    position: absolute;
    right: 41px;
    top: 208px;
    color: #fff;
    font-size: 8px;
    background: #00c853;
    border-radius: 5px;
    padding: 1px;
    display: none;
    pointer-events: none;
    font-weight: bold;
    z-index: 15;
}

#myGuildGold {
    position: absolute;
    right: 41px;
    top: 250px;
    color: #fff;
    font-size: 8px;
    background: #00c853;
    border-radius: 5px;
    padding: 1px;
    display: none;
    pointer-events: none;
    font-weight: bold;
    z-index: 15;
}

#myCash {
    position: absolute;
    right: 59px;
    top: 236px;
    color: #8bc2ee;
    text-align: right;
    font-size: 11px;
    font-weight: bold;
    pointer-events: none;
    z-index: 12
}

#myCash2 {
    position: absolute;
    right: 59px;
    top: 236px;
    color: #8bc2ee;
    text-align: right;
    font-size: 10px;
    font-weight: bold;
    pointer-events: none;
    z-index: 12
}

#myGold {
    position: absolute;
    right: 60px;
    top: 251px;
    color: #ffea4a;
    text-align: right;
    font-size: 11px;
    font-weight: bold;
    pointer-events: none;
    z-index: 12
}

#myGold2 {
    position: absolute;
    right: 60px;
    top: 248px;
    color: #ffea4a;
    text-align: right;
    font-size: 10px;
    font-weight: bold;
    pointer-events: none;
    z-index: 12
}

#myEventPoints2 {
    position: absolute;
    right: 18px;
    top: 258px;
    text-align: right;
    font-size: 10px;
    font-weight: bold;
    pointer-events: none;
    z-index: 35;
    white-space: nowrap
}

#myEventPoints2 .seasonGpInline {
    display: inline-block;
    vertical-align: middle;
}

#channel_player_bg {
    position: absolute;
    left: 584px;
    top: 89px;
    width: 207px;
    height: 180px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

#channel_player {
    position: absolute;
    pointer-events: none;
    left: 679px;
    top: 218px;
    z-index: 2;
}

#roomsList {
    position: absolute;
    left: 15px;
    top: 130px;
    width: 540px;
    color: white;
    font-size: 11px
}

.room {
    position: absolute;
    background-position: 0 -543px;
    width: 251px;
    height: 62px;
    display: none
}

.HD .room {
    background-position: 0 -110px;
    background-size: 1000px 1500px
}

.powerUserRoom {
    background-position: 0 -1845px
}

.HD .powerUserRoom {
    background-position: -251.5px -110px
}

.roomExtraInfo {
    background-position: 0 -1665px;
    width: 251px;
    height: 148px;
    z-index: 2;
    opacity: 1 !important
}

.HD .roomExtraInfo {
    background-position: 0 -172.5px
}

.powerUserRoom.roomExtraInfo {
    background-position: 0 -2050px
}

.HD .powerUserRoom.roomExtraInfo {
    background-position: -251.5px -172.5px
}

.roomExtraInfoSlot {
    position: absolute;
    color: #000;
    transform: scale(0.8)
}

.roomExtraInfoSlot0 {
    left: 10px;
    top: 65px
}

.roomExtraInfoSlot1 {
    left: 135px;
    top: 65px
}

.roomExtraInfoSlot2 {
    left: 10px;
    top: 85px
}

.roomExtraInfoSlot3 {
    left: 135px;
    top: 85px
}

.roomExtraInfoSlot4 {
    left: 10px;
    top: 105px
}

.roomExtraInfoSlot5 {
    left: 135px;
    top: 105px
}

.roomExtraInfoSlot6 {
    left: 10px;
    top: 125px
}

.roomExtraInfoSlot7 {
    left: 135px;
    top: 125px
}

#room0 {
    left: 0;
    top: 0
}

#room1 {
    left: 265px;
    top: 0
}

#room2 {
    left: 0;
    top: 75px
}

#room3 {
    left: 265px;
    top: 75px
}

#room4 {
    left: 0;
    top: 150px
}

#room5 {
    left: 265px;
    top: 150px
}

#room6 {
    left: 0;
    top: 225px
}

#room7 {
    left: 265px;
    top: 225px
}

#roomsList.rooms8 {
    top: 156px
}

.rooms8 #room2,
.rooms8 #room3 {
    top: 70px
}

.rooms8 #room4,
.rooms8 #room5 {
    top: 140px
}

.rooms8 #room6,
.rooms8 #room7 {
    top: 210px
}

.roomNumber {
    position: absolute;
    left: 2px;
    top: 7px;
    width: 30px;
    height: 12px
}

.roomTitle {
    position: absolute;
    left: 38px;
    top: 5px;
    width: 144px;
    height: 16px;
    white-space: nowrap;
    overflow: hidden;
    line-height: 15px;
    padding-left: 2px
}

.numPlayers {
    position: absolute;
    left: 213px;
    top: 6px;
    width: 10px;
    color: black;
    font-size: 14px
}

.maxPlayers {
    position: absolute;
    left: 233px;
    top: 6px;
    width: 10px;
    color: black;
    font-size: 14px
}

.status {
    position: absolute;
    left: 8px;
    top: 33px;
    pointer-events: none
}

.status-waiting {
    width: 89px;
    height: 27px;
    background-position: 0 -606px
}

.HD .status-waiting {
    background-position: -504px -174.5px;
    width: 89px;
    height: 25px
}

.status-playing {
    width: 86px;
    height: 27px;
    background-position: -90px -606px
}

.HD .status-playing {
    background-position: -504px -201px;
    width: 89px;
    height: 25px
}

.status-full {
    width: 42px;
    height: 27px;
    left: 30px;
    background-position: -177px -606px
}

.HD .status-full,
.HD .BrokerChannel.BrokerChannelFull .BrokerChannelFullIcon {
    background-position: -504px -227.5px;
    width: 89px;
    height: 25px;
    left: 8px
}

.gameMode {
    position: absolute;
    left: 208px;
    top: 17px;
    pointer-events: none
}

.roomMap {
    position: absolute;
    left: 59px;
    top: 18px;
    width: 213px;
    height: 49px;
    transform: scale(0.6)
}

.roomMap canvas {
    filter: brightness(0)
}

.room:hover .roomMap canvas {
    filter: brightness(1)
}

.roomLock {
    position: absolute;
    left: 147px;
    top: 33px
}

.roomLocked {
    background-position: -220px -606px;
    width: 20px;
    height: 21px
}

.HD .roomLocked {
    background-position: -660px -324.5px
}

.allowWatch {
    position: absolute;
    left: 188px;
    top: 8px;
    font-size: 12px
}

#dialogCreateRoom {
    position: absolute;
    top: 120px;
    left: 222px;
    width: 341px;
    height: 258px;
    background-position: 0 -755px;
    box-shadow: 3px 3px 10px 0 #000;
    border-radius: 6px;
    display: none
}

.HD #dialogCreateRoom {
    background-position: 0 -321px;
    background-size: 1000px 1500px
}

#createRoomTitle {
    position: absolute;
    left: 114px;
    top: 41px;
    width: 190px;
    background-color: transparent;
    color: #acf2f6;
    border: 0;
    height: 15px;
    padding-left: 4px
}

#BrokerLogout {
    display: block;
    position: absolute;
    right: 12px;
    bottom: 5px;
    width: 55px;
    height: 51px;
    background-position: -56px -303px
}

.HD #BrokerLogout {
    background-position: -682.5px 0
}

#logoutFBlabel {
    position: absolute;
    bottom: 7px;
    right: 77px;
    font-size: 13px;
    border: 1px dashed black;
    border-radius: 5px;
    padding: 3px;
    text-align: center
}

#buttonStart1v1 {
    position: absolute;
    left: 142px;
    top: 200px;
    text-align: center;
    width: 270px
}

#buttonStart2v2 {
    position: absolute;
    left: 142px;
    top: 235px;
    text-align: center;
    width: 270px
}

#buttonStart4v4 {
    position: absolute;
    left: 142px;
    top: 270px;
    text-align: center;
    width: 270px
}

#room_auto_match_btn {
    position: absolute;
    left: 92px;
    top: 404px;
    text-align: center;
    min-width: 275px
}

#room_auto_match_btn2 {
    position: absolute;
    right: 70px;
    bottom: 5px;
    width: 28px;
    height: 28px;
    border: 2px solid black;
    padding: 11px;
    border-radius: 10px
}

#buttonCreateTeam {
    position: absolute;
    left: 142px;
    top: 305px;
    width: 270px;
    text-align: center
}

#buttonCreateTeam.LoveServer {
    min-width: 273px;
    text-align: left
}

#buttonStart1v1.LoveServer,
#buttonStart2v2.LoveServer,
#buttonStart4v4.LoveServer {
    text-align: left;
    min-width: 301px
}

#buttonCreateTeam.No1v1Btn,
#buttonJoinTeam.No1v1Btn {
    margin-top: -40px
}

#buttonStart1v1.Only1v1Btn,
#buttonStart2v2.Only1v1Btn,
#buttonStart4v4.Only1v1Btn {
    margin-top: 70px
}

#buttonStart1v1.Only1v1BtnPrix,
#buttonStart2v2.Only1v1BtnPrix,
#buttonStart4v4.Only1v1BtnPrix {
    margin-top: -6px
}

#buttonJoinTeam {
    position: absolute;
    left: 142px;
    top: 340px;
    width: 270px;
    text-align: center
}

#buttonRegister {
    position: absolute;
    left: 138px;
    top: 380px;
    min-width: 222px;
    text-align: center
}

#buttonCreateRoom {
    position: absolute;
    left: 144px;
    top: 7px;
    width: 62px;
    height: 62px;
    background-position: 0 -177px
}

.HD #buttonCreateRoom {
    background-position: -62.5px 0
}

#buttonJoin {
    position: absolute;
    left: 226px;
    top: 7px;
    width: 62px;
    height: 62px;
    background-position: 0 -240px
}

.HD #buttonJoin {
    background-position: -125px 0
}

#buttonQuickJoin {
    position: absolute;
    left: 308px;
    top: 7px;
    width: 62px;
    height: 62px;
    background-position: -63px -177px
}

.HD #buttonQuickJoin {
    background-position: 0 0
}

#buttonMyInfo {
    position: absolute;
    left: 390px;
    top: 7px;
    width: 62px;
    height: 62px;
    background-position: -126px -177px
}

.HD #buttonMyInfo {
    background-position: -187.5px 0
}

#buttonShop {
    position: absolute;
    left: 472px;
    top: 7px;
    width: 62px;
    height: 62px;
    background-position: -252px -177px
}

.HD #buttonShop {
    background-position: -250px 0
}

#buttonShopFromRoom {
    position: absolute;
    left: 600px;
    bottom: 5px;
    width: 62px;
    height: 62px;
    background-position: -252px -177px;
    border-radius: 5px;
    transform: scale(0.83);
    transform-origin: left bottom
}

.HD #buttonShopFromRoom {
    background-position: -250px 0
}

#buttonCharge2 {
    position: absolute;
    left: 554px;
    top: 7px;
    width: 62px;
    height: 62px
}

.chargeBtn {
    background-position: -189px -177px
}

.HD .chargeBtn {
    background-position: -312.5px 0
}

#buttonChargeShop {
    position: absolute;
    left: 50px;
    top: 128px;
    width: 62px;
    height: 62px
}

#buttonChargeShop1 {
    position: absolute;
    left: 160px;
    top: 532px;
    width: 62px;
    height: 62px
}

#facebook_post {
    position: absolute;
    left: 636px;
    top: 7px;
    width: 62px;
    height: 62px;
    background-position: -126px -240px;
    color: #ffd273;
    font-size: 9px;
    text-align: center
}

.HD #facebook_post {
    background-position: -437.5px 0
}

#event_button {
    position: absolute;
    left: 718px;
    top: 7px;
    width: 62px;
    height: 62px;
    background-position: -63px -240px;
    color: #ffd273;
    font-size: 9px;
    text-align: center
}

.HD #event_button {
    background-position: -375px 0
}

.buttonGlow {
    box-shadow: 0 0 8px 8px #ff0 !important;
    border-radius: 10px
}

.blinkingGlow {
    border-radius: 10px;
    animation: blinking_glow_anim 1s ease-in infinite alternate;
    -webkit-animation: blinking_glow_anim 1s ease-in infinite alternate
}

@keyframes blinking_glow_anim {
    50% {
        box-shadow: 0 0 0 0 #ff0;
        transform: rotate(0)
    }

    100% {
        box-shadow: 0 0 8px 8px #ff0;
        transform: rotate(10deg)
    }
}

@-webkit-keyframes blinking_glow_anim {
    50% {
        box-shadow: 0 0 0 0 #ff0;
        -webkit-transform: rotate(0)
    }

    100% {
        box-shadow: 0 0 8px 8px #ff0;
        -webkit-transform: rotate(10deg)
    }
}

.squeeze_anim {
    animation: squeeze_anim 100ms;
    -webkit-animation: squeeze_anim 100ms
}

@keyframes squeeze_anim {
    from {
        transform: scaleY(1)
    }

    to {
        transform: scaleY(0.01)
    }
}

@-webkit-keyframes squeeze_anim {
    from {
        -webkit-transform: scaleY(1)
    }

    to {
        -webkit-transform: scaleY(0.01)
    }
}

.grayspin {
    animation: grayspin_anim 1s linear infinite;
    -webkit-animation: grayspin_anim 1s linear infinite
}

@keyframes grayspin_anim {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes grayspin_anim {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

#dialogCreateRoomButtonOK {
    position: absolute;
    right: -32px;
    bottom: -7px
}

#dialogCreateRoomButtonCancel {
    position: absolute;
    left: -39px;
    bottom: -7px
}

#CreateRoomNumPlayersPrev {
    position: absolute;
    left: 181px;
    top: 114px
}

#CreateRoomNumPlayersNext {
    position: absolute;
    left: 290px;
    top: 114px
}

#CreateRoomModePrev {
    position: absolute;
    left: 181px;
    top: 135px
}

#CreateRoomModeNext {
    position: absolute;
    left: 290px;
    top: 135px
}

#CreateRoomPrivateCheckbox {
    position: absolute;
    left: 45px;
    top: 64px
}

#CreateRoomPlayers {
    position: absolute;
    left: 190px;
    top: 112px;
    font-weight: 900;
    text-align: center;
    width: 100px;
    color: #ff6
}

#CreateRoomMode {
    position: absolute;
    left: 190px;
    top: 132px;
    font-weight: 900;
    text-align: center;
    width: 100px;
    pointer-events: none
}

.gameMode0 {
    color: #35f78c
}

.gameMode1 {
    color: #ffac0d
}

.gameMode2 {
    color: #ff07f1
}

.gameMode3 {
    color: #52c6f6
}

.gameMode4 {
    color: #ff4444
}

.gameMode5 {
    color: #af7cf7
}

.gameMode6 {
    color: #ff0000 !important;
}

.gameMode7 {
    color: #ff5b45;
}

.gameMode8 {
    color: #ff4444;
}

.gameMode9 {
    color: #18d9ff;
}

#CreateRoomModeIcon {
    position: absolute;
    left: 45px;
    top: 164px
}

.iconMode0 {
    background-position: -168px -303px;
    width: 44px;
    height: 41px
}

.iconMode1 {
    background-position: -213px -303px;
    width: 44px;
    height: 41px
}

.iconMode2 {
    background-position: -258px -303px;
    width: 44px;
    height: 41px
}

.iconMode3 {
    background-position: -168px -303px;
    width: 44px;
    height: 41px;
    filter: hue-rotate(165deg)
}

.iconMode4 {
    background-position: -168px -303px;
    width: 44px;
    height: 41px;
    filter: hue-rotate(0deg) saturate(2) brightness(1.1)
}

.iconMode5 {
    background-position: -258px -303px;
    width: 44px;
    height: 41px;
    filter: hue-rotate(300deg) brightness(1.2)
}

.iconMode6 {
    background-position: -258px -303px;
    width: 44px;
    height: 41px;
    filter: hue-rotate(-15deg) saturate(6) brightness(0.9);
}

.iconMode7 {
    background-position: -168px -303px;
    width: 44px;
    height: 41px;
    filter: hue-rotate(305deg) saturate(2.4) brightness(1.08);
}

.iconMode8 {
    background-position: -168px -303px;
    width: 44px;
    height: 41px;
    filter: hue-rotate(0deg) saturate(1.5) brightness(0.9);
}

.iconMode9 {
    background-position: -168px -303px;
    width: 44px;
    height: 41px;
    filter: hue-rotate(180deg) saturate(2.2) brightness(1.05);
}

.HD .iconMode0 {
    background-position: -166.5px -63.5px;
    width: 43px
}

.HD .iconMode1 {
    background-position: -211.5px -63.5px
}

.HD .iconMode2 {
    background-position: -257.5px -63.5px;
    width: 43px
}

.HD .iconMode3 {
    background-position: -302.5px -63.5px;
    filter: none
}

.HD .iconMode4 {
    background-position: -166.5px -63.5px;
    width: 43px;
    filter: hue-rotate(0deg) saturate(2) brightness(1.1)
}

.HD .iconMode5 {
    background-position: -257.5px -63.5px;
    width: 43px;
    filter: hue-rotate(300deg) brightness(1.2)
}

.HD .iconMode6 {
    background-position: -257.5px -63.5px;
    width: 43px;
    filter: hue-rotate(-15deg) saturate(6) brightness(0.9);
}

.HD .iconMode7 {
    background-position: -257.5px -63.5px;
    width: 43px;
    height: 41px;
    filter: hue-rotate(180deg) saturate(2.2) brightness(1.05);
}

.HD .iconMode8 {
    background-position: -257.5px -63.5px;
    width: 43px;
    height: 41px;
    filter: hue-rotate(0deg) saturate(1.5);
}

.HD .iconMode9 {
    background-position: -257.5px -63.5px;
    width: 43px;
    height: 41px;
    filter: hue-rotate(180deg) saturate(2.2) brightness(1.05);
}

#CreateRoomPassword {
    position: absolute;
    left: 33px;
    top: 85px;
    background-position: 0 -677px;
    width: 277px;
    height: 17px
}

.HD #CreateRoomPassword {
    background-position: -342px -328px
}

#createRoomPasswordInput {
    position: absolute;
    left: 81px;
    width: 190px;
    background-color: transparent;
    color: #acf2f6;
    border: 0;
    height: 15px;
    padding-left: 4px
}


.SD .buttonOK {
    background: url(/static/images/ok.png);
    width: 180px;
    height: 59px;
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5)
}

.buttonOK:hover {
    filter: brightness(1.25)
}

.SD .buttonOK:active {
    transform: scale(0.47)
}

.HD .buttonOK {
    width: 90px;
    height: 29.5px;
    background-position: -851px -92.5px
}

.HD .buttonOK:active {
    transform: scale(0.96)
}

.SD .buttonCancel {
    background-image: url(/static/images/cancel.png);
    width: 209px;
    height: 59px;
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5)
}

.buttonCancel:hover {
    filter: brightness(1.4)
}

.SD .buttonCancel:active {
    transform: scale(0.47)
}

.HD .buttonCancel {
    width: 90px;
    height: 29.5px;
    background-position: -851px -122.5px
}

.HD .buttonCancel:active {
    transform: scale(0.94)
}

.buttonPrev {
    background-position: -241px -606px;
    width: 9px;
    height: 9px
}

.HD .buttonPrev {
    background-position: -620.5px -326.5px;
    width: 18px;
    height: 18px;
    margin-left: -5px !important;
    margin-top: -5px !important
}

.buttonNext {
    background-position: -251px -606px;
    width: 9px;
    height: 9px
}

.HD .buttonNext {
    background-position: -640px -326.5px;
    width: 18px;
    height: 18px;
    margin-left: -5px !important;
    margin-top: -5px !important
}

.checkboxOff {
    background-position: 0 -695px;
    width: 101px;
    height: 13px
}

.HD .checkboxOff {
    background-position: -504px -278px
}

.checkboxOn {
    background-position: -102px -695px;
    width: 101px;
    height: 14px
}

.HD .checkboxOn {
    background-position: -504px -262px
}

.CheckboxOff {
    background-position: 0 -695px;
    width: 14px;
    height: 14px
}

.CheckboxOn {
    background-position: -102px -695px;
    width: 14px;
    height: 14px
}

.hide {
    display: none
}

#buttonRoomsListUp {
    position: absolute;
    left: 540px;
    top: 205px;
    width: 34px;
    height: 43px;
    background-position: -223px -355px
}

.HD #buttonRoomsListUp {
    background-position: -95.5px -63.5px;
    width: 33px
}

#buttonRoomsListDown {
    position: absolute;
    left: 540px;
    top: 310px;
    width: 34px;
    height: 43px;
    background-position: -223px -355px;
    transform: scaleY(-1)
}

.HD #buttonRoomsListDown {
    background-position: -130.5px -63.5px;
    transform: none
}

#roomScreen {
    display: none;
    color: white;
    font-size: 12px
}

#roomBgLayer,
#roomBgChrome {
    display: none;
}

body.HD:not(.th) .playerInRoom {
    overflow: visible !important;
}

body.HD:not(.th) .playerInRoom > .roomPlayerClip {
    position: absolute !important;
    left: 6px !important;
    top: 18px !important;
    width: 211px !important;
    height: 148px !important;
    overflow: hidden !important;
    z-index: 1;
    pointer-events: none !important;
}

body.HD:not(.th) .SideA .roomPlayerClipInner {
    position: absolute !important;
    top: 70px !important;
    left: 94px !important;
    right: auto !important;
    transform: none !important;
    pointer-events: none !important;
}

body.HD:not(.th) .SideB .roomPlayerClipInner {
    position: absolute !important;
    top: 70px !important;
    left: auto !important;
    right: 94px !important;
    transform: none !important;
    pointer-events: none !important;
}

#roomNumber {
    position: absolute;
    left: 50px;
    top: 5px;
    width: 30px;
    height: 12px
}

#roomTitle {
    position: absolute;
    left: 93px;
    top: 5px;
    width: 450px;
    height: 15px
}

#roomOwner {
    position: absolute;
    right: 10px;
    top: 5px;
    white-space: nowrap
}

#roomButtonBack {
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 57px;
    height: 54px
}

.roomButtonBack {
    background-position: 0 -66px
}

.roomButtonBack:hover {
    background-position: -58px -66px
}

.roomButtonBack:active {
    background-position: -116px -66px
}

.HD .roomButtonBack {
    background-position: -752px -561.5px
}

.HD .roomButtonBack:hover {
    background-position: -810.5px -561.5px
}

.HD .roomButtonBack:active {
    background-position: -869px -561.5px
}

#roomButtonChangeTeam {
    position: absolute;
    left: 297px;
    top: 351px;
    width: 28px;
    height: 27px;
    background-position: 0 0
}

.HD #roomButtonChangeTeam {
    background-position: -752px -495.5px;
    width: 27px;
    height: 27px
}

#roomButtonChangeTeam:hover {
    background-position: -28px 0
}

#roomButtonChangeTeam:active {
    background-position: -57px 0
}

.HD #roomButtonChangeTeam:hover {
    background-position: -780.5px -495.5px
}

.HD #roomButtonChangeTeam:active {
    background-position: -809px -495.5px
}

.buttonMobile {
    width: 33px;
    height: 37px;
    background-position: 0 -28px
}

.HD .buttonMobile {
    background-position: -752px -524px;
    width: 35px;
    height: 36px
}

.buttonMobile:hover {
    background-position: -34px -28px
}

.buttonMobile:active {
    background-position: -68px -28px
}

.HD .buttonMobile:hover {
    background-position: -788.5px -524px
}

.HD .buttonMobile:active {
    background-position: -825px -524px
}

#lobbyButtonMobile {
    position: absolute;
    left: 545px;
    top: 183px;
    z-index: 20
}

#roomButtonMobile {
    position: absolute;
    left: 241px;
    top: 345px;
    z-index: 12;
}

#roomPlayersA {
    position: absolute;
    left: 229px;
    top: 308px;
    font-size: 20px
}

#roomPlayersB {
    position: absolute;
    right: 467px;
    top: 308px;
    font-size: 23px
}

#roomButtonReady {
    position: absolute;
    left: 234px;
    top: 209px;
    width: 96px;
    height: 85px;
    background: url(/static/images/ready2.gif) no-repeat;
    z-index: 20
}

#roomButtonStart {
    position: absolute;
    left: 234px;
    top: 209px;
    width: 96px;
    height: 85px;
    background: url(/static/images/start2.gif) no-repeat;
    z-index: 10
}

.playerInRoom {
    width: 223px;
    height: 95px;
    display: none
}

.SideA .roomPlayerRank {
    position: absolute;
    left: 0;
    top: 2px;
    width: 54px;
    height: 15px;
    z-index: 26;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: visible
}

.SideA .roomPlayerName {
    position: absolute;
    left: 56px;
    top: 2px;
    width: 179px;
    height: 15px;
    z-index: 25;
    font-size: 11px;
    line-height: 15px;
    white-space: nowrap;
    overflow: visible;
    display: flex;
    align-items: flex-start
}

.SideA .playerInRoom:not(.hasSeasonRank):not(.hasVipRank) .roomPlayerRank {
    width: 27px;
}

.SideA .playerInRoom:not(.hasSeasonRank):not(.hasVipRank) .roomPlayerName {
    left: 29px;
    width: 206px;
}

.SideA .roomPlayerInfo {
    position: absolute;
    left: -16px;
    top: 34px;
    width: 43px;
    height: 30px;
    background-position: -260px -216px;
    z-index: 21;
    transform: scale(0.65) rotate(270deg)
}

.chatDialogProfile {
    position: absolute;
    left: 228px;
    bottom: 12px;
    width: 43px;
    height: 30px;
    background-position: -260px -216px
}

.SideA .roomPlayerNotReady {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 77px;
    height: 78px;
    background-position: 0 -121px;
    z-index: 2
}

.HD .SideA .roomPlayerNotReady {
    background-position: -752px -617px
}

.SideA .roomPlayerReady {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 77px;
    height: 78px;
    background-position: -78px -121px;
    z-index: 2
}

.HD .SideA .roomPlayerReady {
    background-position: -830.5px -617px
}

.SideA .roomPlayerMaster {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 77px;
    height: 78px;
    background-position: -156px -121px;
    z-index: 2
}

.HD .SideA .roomPlayerMaster {
    background-position: -909px -617px
}

.SideA .roomPlayerShadow {
    position: absolute;
    left: 58px;
    bottom: 0;
    width: 78px;
    height: 10px;
    background-position: -155px 0
}

.SideA .roomPlayerMyself {
    position: absolute;
    left: -3px;
    top: 67px;
    display: none
}

.SideA .roomPlayerMobile {
    position: absolute;
    left: 100px;
    top: 88px;
    z-index: 5
}

.FlipH {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH"
}

.SideB .roomPlayerRank {
    position: absolute;
    left: 10px;
    top: 2px;
    width: 54px;
    height: 15px;
    z-index: 26;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: visible
}

.SideB .roomPlayerName {
    position: absolute;
    left: 66px;
    top: 2px;
    width: 179px;
    height: 15px;
    z-index: 25;
    font-size: 11px;
    line-height: 15px;
    white-space: nowrap;
    overflow: visible;
    display: flex;
    align-items: flex-start
}

.SideB .playerInRoom:not(.hasSeasonRank):not(.hasVipRank) .roomPlayerRank {
    width: 27px;
}

.SideB .playerInRoom:not(.hasSeasonRank):not(.hasVipRank) .roomPlayerName {
    left: 39px;
    width: 206px;
}

.SideB .roomPlayerInfo {
    position: absolute;
    right: -16px;
    top: 34px;
    width: 43px;
    height: 30px;
    background-position: -260px -216px;
    z-index: 21;
    transform: scale(0.65) rotate(90deg)
}

.HD .roomPlayerInfo,
.HD .chatDialogProfile {
    background-position: -654.5px -156px
}

.SideB .roomPlayerNotReady {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 77px;
    height: 78px;
    background-position: 0 -200px;
    z-index: 2
}

.HD .SideB .roomPlayerNotReady {
    background-position: -752px -696.5px
}

.SideB .roomPlayerReady {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 77px;
    height: 78px;
    background-position: -78px -200px;
    z-index: 2
}

.HD .SideB .roomPlayerReady {
    background-position: -830.5px -696.5px
}

.SideB .roomPlayerMaster {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 77px;
    height: 78px;
    background-position: -156px -200px;
    z-index: 2
}

.HD .SideB .roomPlayerMaster {
    background-position: -909px -696.5px
}

.SideB .roomPlayerShadow {
    position: absolute;
    right: 58px;
    bottom: 0;
    width: 78px;
    height: 10px;
    background-position: -155px 0
}

.HD .SideA .roomPlayerShadow,
.HD .SideB .roomPlayerShadow {
    background-position: -837.5px -495.5px
}

.SideB .roomPlayerMyself {
    position: absolute;
    right: -3px;
    top: 67px;
    display: none;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH"
}

.roomPlayerMyself {
    width: 28px;
    height: 19px;
    background: url(data:image/gif;base64,R0lGODlhHAATANUpAAAAALWlUrWmUrWqWrWtWrWqY7WtY7WuY7Wqa7Wta7Wua7Wqc7Wtc7Wuc7Wqe7Wte7Wue//ve7WqhLWthLWuhLWyhLW1hP/vjP/zhP/3hP/3jP/zlP/3lP/3nP/3pf/zrf/3rf/7rf//rf/3tf/3vf/7vf//vf/7xv//xgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwApACwAAAAAHAATAAAGs0CAcEgsClPIpDJlbBaXSyFqOhmiqlIsAJqUTq9eLHXIZQJIaHQ1vVaToUKTfG4B0O3y+jEKGPn/Iw99foJ/gntdACCLjIuCjI+Ob0hCIpaXlwwAmZuWmohCHqKjpJqjpqKfW2Ydra6uCQCwsq2xoAAcubq5sbq9vJNmF8PEFwYAxMfJwWYazs/H0ADSiIkZ19cEANja3MyU297h2uPf4BHoAUMR6kLs5uBOTmXx8k/0KUEAACH5BAkPACkALAAAAAAcABMAAAa4QIBwCEgRj8WUcrlEOpHMqBBFnRBR1mk2GTUCqNVh+Isddr2kdDqrtrbNUoBpTrfI63eTXRgf+f8jDwCAgn+CfE0AIIuMi4KNj45wXiKVlpYMAJeZmHBCHqChopmjAKGZfEIdq6ysCQCtr66eABy2t7avuLq5k0IXwMEXBgDCxMHEiEpCGs3OxM4a0M3JXMsAGdnZBELa3N6TidoZ3N3k5uXWiRHsAUQR7kLw4UxP9spdTl5PZ0tBAAAh+QQJDwApACwAAAAAHAATAAAGwkCAcAhIEYvHlHK5PAqNziSzCUChJscrUfucQq1coRUrDnuFpDSJDFCT3cOp0ESnW+b1e9107yqFI4GCDwCCgYSGhH5CII2OIISPkACPikVQIpmamQwAmyKdm51PQh6mp6edqB6qqUcdsLGwCQCyHbSytKQAHL2+HLS/wLy+updCF8nKBgDKyczOzIsAGtXV0tYazNnSl38AGeEZBEPi5ODh597f5kTp5eNxcgAREQFH9kT5fkxRUFHyzkhJIsVLiiAAACH5BAkPACkALAAAAAAcABMAAAa8QIBwSBSmUsWjcllsGptLJgA1KVKtVWMUOb0OUV4hOAvYCkloMpqkTg+jQpPcZInP64A5/a0Ujv5/DwCAgYOEglpcIIuMgoyLjo+IZVwilpciDACYmZuYmk8AHqOko5qlHqeloEMdrq8dCQCwsbOwsqEcuruyu7q9vriUQhfFxQYAxsfJysiJQhrRGs7S09DSzpRHQhndBEPdGd/c3nx9AOXg4kTp2ucRAUXw8vGJUkRc+FBb+VpJ/e6iBAEAIfkECQ8AKQAsAAAAABwAEwAABrpAgHBIBKRSxaNyiSw6m0TmUoiaEKtFrFB6pGoBqC/4yxWSzlbAmZRWo4dSoWlusgDodTndvp0CRoCAD3+Bg4GCcEpCIIyNg40gj5CDfU0il5giDACZm5maiUIeo6Sjm6WnqHBCHa2uHQkAr7GvsKEAHLm6sbocvL2xlUIXxMQGAMUXx8nKiV0AGtEax9LTQtXHlc8Z3ARC3Bne393OigDk4+Lp5eYRAUTuRfHafk5RT1xQW0n6RvkpQQAAIfkEBQ8AKQAsAAAAABwAEwAABrxAgHBIBKSKqaRyeSw6nUym8HSSDKtErDCqnFKtgO9Va+QKSWgSBZBes9HushRQqtcr9Htev52P/oAOAIGDhH1dAB+Kix8QiYqOjI6HTSGWl5YLAJeamJqHQh6io6MNAKWnqH1CHa2urQgArrGvsaAAG7m6Gwq4ub27vZRCF8XGBQDHycqUTRrPzwcA0NLQGtLNTRjbGAMA3N7f2+FyS0IZ6OHpQ+vZSUIREQJD8kT17u9P+vj5+01DXJYEAQA7) no-repeat;
    z-index: 20
}

.SideB .roomPlayerMobile {
    position: absolute;
    right: 100px;
    top: 88px;
    z-index: 5
}

.SideA .roomPlayerBalloon {
    position: absolute;
    left: 55px;
    bottom: 55px;
    background-color: white;
    min-width: 30px;
    border: 1px solid black;
    text-shadow: none;
    color: black;
    border-radius: 8px;
    padding: 5px;
    max-width: 300px;
    word-wrap: break-word;
    opacity: .9;
    display: none;
    z-index: 33
}

.bg1 {
    background-color: white !important;
    box-shadow: 0 0 8px 4px #ffd700 !important;
    border: 2px solid #ffd700 !important;
    color: black !important;
}

.bg2 {
    background-color: white !important;
    box-shadow: 0 0 8px 4px #00BFFF !important;
    border: 2px solid #00BFFF !important;
    color: black !important;
}

/* Burbuja en juego - Power User */
div.GamePlayerBalloon.bg1 {
    background-color: white !important;
    box-shadow: 0 0 8px 4px #ffd700 !important;
    border: 2px solid #ffd700 !important;
    color: black !important;
}

div.GamePlayerBalloonTip.bg1 {
    filter: sepia(100%) saturate(1000%) hue-rotate(5deg) !important;
    opacity: 1 !important;
}

div.GamePlayerBalloon.bg2 {
    background-color: white !important;
    box-shadow: 0 0 8px 4px #00BFFF !important;
    border: 2px solid #00BFFF !important;
    color: black !important;
}

div.GamePlayerBalloonTip.bg2 {
    filter: hue-rotate(190deg) saturate(500%) brightness(1.2) !important;
    opacity: 1 !important;
}

.SideB .roomPlayerBalloon {
    position: absolute;
    right: 55px;
    bottom: 55px;
    background-color: white;
    min-width: 30px;
    border: 1px solid black;
    text-shadow: none;
    color: black;
    border-radius: 8px;
    padding: 5px;
    max-width: 300px;
    word-wrap: break-word;
    opacity: .9;
    display: none;
    z-index: 33
}

.roomBotSelect {
    position: absolute;
    left: 136px;
    top: 0;
    width: 82px;
    height: 19px;
    background-position: 0 -279px;
    display: none;
    z-index: 26
}

.HD .roomBotSelect {
    background-position: -751px -776px
}

.roomBotRemove {
    position: absolute;
    left: 136px;
    top: 0;
    width: 82px;
    height: 19px;
    background-position: 0 -299px;
    display: none;
    z-index: 26
}

.HD .roomBotRemove {
    background-position: -917px -776px
}

.roomPlayerBalloon a:link {
    color: blue
}

.roomPlayerBalloon a:visited {
    color: purple
}

.SideA .roomPlayerBalloonTip {
    position: absolute;
    left: 80px;
    bottom: 48px;
    background-position: -85px 0;
    width: 9px;
    height: 8px;
    opacity: .9;
    display: none;
    z-index: 34
}

.SideA .roomPlayerBalloonTip {
    background-position: -837.5px -514.5px
}

.SideB .roomPlayerBalloonTip {
    position: absolute;
    right: 80px;
    bottom: 48px;
    background-position: -95px 0;
    width: 9px;
    height: 8px;
    opacity: .9;
    display: none;
    z-index: 34
}

.SideB .roomPlayerBalloonTip {
    background-position: -847.5px -514.5px
}

.bg1+.roomPlayerBalloonTip {
    filter: sepia(100%) saturate(1000%) hue-rotate(5deg) drop-shadow(0 0 1px #ffd700);
}

#playerInRoom0 {
    position: absolute;
    left: 5px;
    top: 113px
}

#playerInRoom2 {
    position: absolute;
    left: 5px;
    top: 210px
}

#playerInRoom4 {
    position: absolute;
    left: 5px;
    top: 307px
}

#playerInRoom6 {
    position: absolute;
    left: 5px;
    top: 404px
}

#playerInRoom1 {
    position: absolute;
    left: 336px;
    top: 113px
}

#playerInRoom3 {
    position: absolute;
    left: 336px;
    top: 210px
}

#playerInRoom5 {
    position: absolute;
    left: 336px;
    top: 307px
}

#playerInRoom7 {
    position: absolute;
    left: 336px;
    top: 404px
}

#room_timer {
    position: absolute;
    left: 261px;
    top: 386px;
    background-position: -127px -11px;
    width: 50px;
    height: 48px;
    display: none
}

#room_timer_text {
    text-align: center;
    width: 46px;
    margin-top: 19px;
    font-size: 14px;
    font-weight: bold;
    color: #b5d68c
}

#roomInput {
    position: absolute;
    left: 94px;
    top: 578px;
    width: 464px;
    height: 16px;
    background-color: transparent;
    border: 0;
    font-size: 12px;
    color: #adf7f7;
    z-index: 111;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

#roomInput:focus {
    border: orange solid 1px;
    background-color: #001839
}

#roomChat {
    position: absolute;
    left: 8px;
    top: 502px;
    width: 553px;
    height: 75px
}

#roomChatHtml {
    font-size: 12px;
    color: #b5efd6
}

#roomChat .viewport {
    width: 538px;
    height: 75px;
    overflow: hidden;
    position: relative
}

#roomChat .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    word-wrap: break-word;
    width: 538px
}

#roomChat .scrollbar {
    position: relative;
    float: right;
    width: 13px;
    padding-top: 11px
}

#itemDual {
    position: absolute;
    left: 29px;
    top: 121px
}

.itemDual {
    width: 69px;
    height: 31px
}

#itemTeleport {
    position: absolute;
    left: 111px;
    top: 121px
}

.itemNone {
    width: 69px;
    height: 31px;
    background: rgba(150, 150, 150, 0.5)
}

.itemTeleport {
    background-position: -343px 0;
    width: 69px;
    height: 31px
}

#itemDualP {
    position: absolute;
    left: 29px;
    top: 158px
}

.itemDualP {
    background-position: -69px 0;
    width: 69px;
    height: 31px
}

.HD .itemDual {
    background-position: -480px -1382.5px
}

.HD .itemDualP {
    background-position: -480px -1414px
}

.HD .itemTeleport {
    background-position: -480px -1445.5px
}

#itemWindT {
    position: absolute;
    left: 111px;
    top: 158px
}

.itemWindT {
    background-position: -172px 0;
    width: 69px;
    height: 31px
}

.HD .itemWindT {
    background-image: url(/static/images/items2.png);
    background-position: -172px 0;
    background-size: auto
}

.ItemBtn:hover {
    filter: brightness(1.3);
    cursor: pointer
}

.ItemBtn:active {
    margin: 1px 0 0 1px;
    filter: brightness(1.3);
    cursor: pointer
}

.ItemBtn.Pressed {
    box-shadow: inset 0 0 3px 3px #0f0
}

#itemSlot0 {
    position: absolute;
    left: 0;
    top: 0
}

#itemSlot1 {
    position: absolute;
    left: 35px;
    top: 0
}

#itemSlot2 {
    position: absolute;
    left: 70px;
    top: 0
}

#itemSlot3 {
    position: absolute;
    left: 105px;
    top: 0
}

#itemSlot4 {
    position: absolute;
    left: 140px;
    top: 0
}

#itemSlot5 {
    position: absolute;
    left: 175px;
    top: 0
}

#gameItemSlot0 {
    position: absolute;
    left: 291px;
    top: 7px
}

#gameItemSlot1 {
    position: absolute;
    left: 326px;
    top: 7px
}

#gameItemSlot2 {
    position: absolute;
    left: 361px;
    top: 7px
}

#gameItemSlot3 {
    position: absolute;
    left: 396px;
    top: 7px
}

#gameItemSlot4 {
    position: absolute;
    left: 431px;
    top: 7px
}

#gameItemSlot5 {
    position: absolute;
    left: 466px;
    top: 7px
}

#weatherSlot0 {
    position: absolute;
    left: 522px;
    top: 13px;
    width: 19px;
    height: 19px
}

#weatherSlot1 {
    position: absolute;
    left: 544px;
    top: 13px;
    width: 19px;
    height: 19px
}

#weatherSlot2 {
    position: absolute;
    left: 567px;
    top: 13px;
    width: 19px;
    height: 19px
}

#weatherSlot3 {
    position: absolute;
    left: 589px;
    top: 13px;
    width: 19px;
    height: 19px
}

#weatherSlot4 {
    position: absolute;
    left: 612px;
    top: 13px;
    width: 19px;
    height: 19px
}

.weather-0 {
    background-position: -321px -115px
}

.weather-1 {
    background-position: -461px -155px
}

.weather-2 {
    background-position: -341px -115px
}

.weather-3 {
    background-position: -361px -115px
}

.weather-4 {
    background-position: -381px -115px
}

.weather-5 {
    background-position: -401px -115px
}

.weather-6 {
    background-position: -421px -115px
}

.weather-7 {
    background-position: -441px -115px
}

.weather-8 {
    background-position: -461px -115px
}

.HD .weather-0 {
    background-position: -201.5px -1317px
}

.HD .weather-1 {
    background-position: -201.5px -1337.5px
}

.HD .weather-2 {
    background-position: -222px -1317px
}

.HD .weather-3 {
    background-position: -242.5px -1317px
}

.HD .weather-4 {
    background-position: -263px -1317px
}

.HD .weather-5 {
    background-position: -242.5px -1337.5px
}

.HD .weather-6 {
    background-position: -263px -1358px
}

.HD .weather-7 {
    background-position: -263px -1337.5px
}

.HD .weather-8 {
    background-position: -222px -1337.5px
}

.weatherDiv {
    position: absolute;
    width: 128px;
    margin-left: -64px;
    height: 3050px;
    top: -1525px;
    animation: weatherMove .5s linear infinite
}

.weatherDiv3 {
    background-image: url(/static/images/sunforce.png)
}

.weatherDiv4 {
    background-image: url(/static/images/lightningforce.png)
}

.weatherDiv5 {
    background-image: url(/static/images/blackforce.png)
}

.weatherDiv6 {
    background-image: url(/static/images/randomforce.png);
    animation: weatherMove2 10s linear infinite
}

.weatherDiv7 {
    background-image: url(/static/images/mirrorforce.png);
    top: -600px
}

.weatherDiv8 {
    background-image: url(/static/images/tornado.png)
}

@keyframes weatherMove {
    from {
        background-position-y: 0
    }

    12.5% {
        background-position-y: 0
    }

    12.501% {
        background-position-y: -64px
    }

    25% {
        background-position-y: -64px
    }

    25.001% {
        background-position-y: -128px
    }

    37.5% {
        background-position-y: -128px
    }

    37.501% {
        background-position-y: -192px
    }

    50% {
        background-position-y: -192px
    }

    50.001% {
        background-position-y: -256px
    }

    62.5% {
        background-position-y: -256px
    }

    62.501% {
        background-position-y: -320px
    }

    75% {
        background-position-y: -320px
    }

    75.001% {
        background-position-y: -384px
    }

    87.5% {
        background-position-y: -384px
    }

    87.501% {
        background-position-y: -448px
    }

    100% {
        background-position-y: -448px
    }
}

@keyframes weatherMove2 {
    from {
        background-position-y: 0
    }

    to {
        background-position-y: -512px
    }
}

#sky_markers {
    position: absolute
}

.WeatherFall {
    position: absolute;
    top: 0;
    background: url(/static/images/weatherFall.gif) center top no-repeat;
    width: 80px;
    height: 25px;
    text-align: center;
    white-space: nowrap;
    font-size: 10px;
    line-height: 25px;
    margin-left: -40px
}

#message_over_items {
    position: absolute;
    left: 291px;
    top: 7px;
    width: 209px;
    height: 31px;
    display: none
}

#message_over_items.items_locked {
    background-position: 0 -243px
}

#message_over_items.sudden_death {
    background-position: -210px -243px
}

.HD #message_over_items.items_locked {
    background-position: 0 -1451.5px
}

.HD #message_over_items.sudden_death {
    background-position: -210px -1451.5px
}

#gameScreen {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%
}

#gameInput {
    position: absolute;
    left: 290px;
    bottom: 93px;
    width: 455px;
    color: #acf2f6;
    background-color: transparent;
    border: 0;
    font-size: 12px;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

#gameInput:hover {
    background-color: rgba(0, 0, 255, 0.1)
}

#gameInput:focus {
    border: orange solid 1px;
    background-color: #001839
}

#gameChat {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 111px;
    color: #acf2f6;
    font-size: 12px
}

#gameChat .viewport {
    width: 576px;
    height: 111px;
    overflow: hidden;
    position: relative;
    direction: rtl
}

#gameChat .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 2px;
    margin: 0;
    word-wrap: break-word;
    width: 364px;
    direction: ltr
}

#gameChat .scrollbar {
    background-color: transparent;
    position: relative;
    float: left;
    width: 15px;
    padding-top: 11px
}

.overview {
    padding-top: 2px;
    padding-bottom: 1px
}

#gameui {
    position: absolute;
    left: 0;
    top: 516px;
    width: 800px;
    height: 85px;
    background-position: 0 -29px
}

.HD #gameui {
    background-position: 0 -1231.5px
}

#powerBar {
    position: absolute;
    left: 241px;
    bottom: 17px;
    width: 1px;
    height: 19px;
    background-color: #de1821;
    background-position: 0 -223px
}

.HD #powerBar {
    background-position: 0 -1422.5px
}

#walkBar {
    position: absolute;
    left: 241px;
    bottom: 4px;
    width: 1px;
    height: 9px;
    background: #6b8cc6 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAJCAIAAAB8JNGzAAAAB3RJTUUH3gQLEAQia0vRrgAAAAlwSFlzAAAnEAAAJxABlGlRGQAAAARnQU1BAACxjwv8YQUAAAAdSURBVHjaY+hZeo6JgYGB6f7zH2AaGb9/fx9EAwCckQeLx8doUQAAAABJRU5ErkJggg==) repeat-x
}

.HD #walkBar {
    background-position: 0 -1442px
}

#powerMarkArea {
    position: absolute;
    left: 241px;
    bottom: 0;
    width: 400px;
    height: 38px
}

#powerMark {
    position: absolute;
    left: 200px;
    width: 11px;
    height: 23px;
    margin-left: -6px;
    background-position: -294px -166px;
    pointer-events: none
}

.HD #powerMark {
    background-position: -263px -1378.5px
}

#turn_timer {
    position: absolute;
    top: 0;
    left: 675px;
    background-image: url('/static/images/turn_timer.png');
    background-position: 0 -1900px;
    width: 125px;
    height: 100px;
    display: none;
    pointer-events: none;
    -webkit-transition: background-position .2s linear;
    transition: background-position .2s linear
}

#game_back {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden
}

#game_front {
    position: absolute;
    width: 0;
    height: 100%;
    z-index: 2
}

#revive_hand {
    position: absolute;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    background: rgba(255, 0, 0, 0.5);
    pointer-events: none;
    border-radius: 50px;
    border: 2px black solid
}

#revive_hand.CanRevive {
    background: rgba(0, 255, 0, 0.5)
}

#wind_meter2 {
    position: absolute;
    top: -26px;
    left: 334px;
    opacity: .8 !important;
    pointer-events: none;
    transform-origin: 50% 50%;
    transform: scale(0.5)
}

.Shot {
    position: absolute
}

.Player {
    position: absolute;
    display: none;
    width: 160px;
    -webkit-transform: translate3d(0, 0, 0)
}

.ColorTeamA {
    color: #ff9e6b;
    text-shadow: #734529 -1px 0 1px, #734529 0 1px 1px, #734529 1px 0 1px, #734529 0 -1px 1px
}

.ColorTeamB {
    color: #bdcfcf;
    text-shadow: #394d6b -1px 0 1px, #394d6b 0 1px 1px, #394d6b 1px 0 1px, #394d6b 0 -1px 1px
}

.PlayerRank {
    position: absolute;
    top: 17px;
    left: -40px;
    width: 25px;
    height: 15px
}

.ReduecdDef {
    position: absolute;
    top: -6px;
    left: 30px;
    font-size: 11px;
    color: #9cffde;
    text-shadow: #06f -1px 0 1px, #06f 0 1px 1px, #06f 1px 0 1px, #06f 0 -1px 1px
}

.PlayerHPBox {
    position: absolute;
    top: 10px;
    left: -40px;
    width: 76px;
    height: 3px;
    border: 1px solid white;
    background-color: #292c29;
    z-index: 1
}

.PlayerHP {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background-color: #63b64a;
    width: 76px
}

.PlayerShield {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background-color: #00f;
    width: 0
}

.PlayerMobile {
    position: absolute;
    background-repeat: no-repeat
}

.PlayerAimCircle {
    position: absolute;
    margin-left: -43px;
    margin-top: -43px
}

.Ion {
    position: absolute
}

.GamePlayerBalloon {
    position: absolute;
    left: -20px;
    bottom: 77px;
    background-color: white;
    min-width: 24px;
    max-width: 160px;
    border: 1px solid black;
    color: black;
    border-radius: 8px;
    padding: 5px;
    opacity: 0;
    font-size: 11px;
    word-wrap: break-word
}

.GamePlayerBalloon a:link {
    color: blue
}

.GamePlayerBalloon a:visited {
    color: purple
}

.Turn {
    position: absolute;
    left: -16px;
    bottom: 100px;
    width: 32px;
    height: 29px;
    display: none
}

.TurnAnim {
    -webkit-animation: move 1s linear infinite alternate;
    -moz-animation: move 1s linear infinite alternate;
    animation: move 1s linear infinite alternate
}

@keyframes dmgFly {
    from {
        top: 0;
        opacity: 1
    }

    10% {
        top: -30px;
        opacity: 1
    }

    40% {
        top: -30px;
        opacity: 1
    }

    to {
        top: -30px;
        opacity: 0
    }
}

.DamageEffect {
    position: absolute;
    z-index: 150
}

.DamageDigit {
    position: absolute;
    width: 20px;
    height: 21px;
    animation: dmgFly 5s linear 1 forwards
}

.DamageDigitRed0 {
    background-position: -572px -199px
}

.DamageDigitRed1 {
    background-position: -593px -199px
}

.DamageDigitRed2 {
    background-position: -614px -199px
}

.DamageDigitRed3 {
    background-position: -635px -199px
}

.DamageDigitRed4 {
    background-position: -656px -199px
}

.DamageDigitRed5 {
    background-position: -677px -199px
}

.DamageDigitRed6 {
    background-position: -698px -199px
}

.DamageDigitRed7 {
    background-position: -719px -199px
}

.DamageDigitRed8 {
    background-position: -740px -199px
}

.DamageDigitRed9 {
    background-position: -761px -199px
}

.DamageDigitRed- {
    background-position: -782px -199px
}

.DamageDigitBlue0 {
    background-position: -572px -221px
}

.DamageDigitBlue1 {
    background-position: -593px -221px
}

.DamageDigitBlue2 {
    background-position: -614px -221px
}

.DamageDigitBlue3 {
    background-position: -635px -221px
}

.DamageDigitBlue4 {
    background-position: -656px -221px
}

.DamageDigitBlue5 {
    background-position: -677px -221px
}

.DamageDigitBlue6 {
    background-position: -698px -221px
}

.DamageDigitBlue7 {
    background-position: -719px -221px
}

.DamageDigitBlue8 {
    background-position: -740px -221px
}

.DamageDigitBlue9 {
    background-position: -761px -221px
}

.DamageDigitBlue- {
    background-position: -782px -221px
}

.DamageDigitBlueP {
    background-position: -782px -176px
}

.DamageDigitGreen0 {
    background-position: -572px -243px
}

.DamageDigitGreen1 {
    background-position: -593px -243px
}

.DamageDigitGreen2 {
    background-position: -614px -243px
}

.DamageDigitGreen3 {
    background-position: -635px -243px
}

.DamageDigitGreen4 {
    background-position: -656px -243px
}

.DamageDigitGreen5 {
    background-position: -677px -243px
}

.DamageDigitGreen6 {
    background-position: -698px -243px
}

.DamageDigitGreen7 {
    background-position: -719px -243px
}

.DamageDigitGreen8 {
    background-position: -740px -243px
}

.DamageDigitGreen9 {
    background-position: -761px -243px
}

.DamageDigitGreenP {
    background-position: -782px -243px
}

#ss_shot_background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: .8;
    display: none
}

#ss_shot_background.sudden_death {
    background-color: #060;
    opacity: .5
}

.UIGoldDigit {
    background-position: -801px 0;
    width: 13px;
    height: 13px;
    position: absolute;
    top: 66px;
    transition: all 1s ease-in-out
}

.UIGoldDigit.NoTransition {
    transition: none
}

.HD .UIGoldDigit {
    background-position: -981px -319px
}

#UIGoldDigit0 {
    left: 760px
}

#UIGoldDigit1 {
    left: 747px
}

#UIGoldDigit2 {
    left: 734px
}

#UIGoldDigit3 {
    left: 721px
}

#UIGoldDigit4 {
    left: 708px
}

.imgS1 {
    width: 35px;
    height: 35px
}

#btnShot1 {
    position: absolute;
    left: 12px;
    top: 21px;
    width: 35px;
    height: 35px
}

#btnShot1,
.imgS1 {
    background-position: 0 -115px
}

#btnShot1:hover {
    background-position: -36px -115px
}

#btnShot1:active {
    background-position: -72px -115px !important
}

#btnShot1.Pressed {
    background-position: -108px -115px
}

.HD #btnShot1,
.HD .imgS1 {
    background-position: 0 -1316px
}

.HD #btnShot1:hover {
    background-position: -35.5px -1316px
}

.HD #btnShot1:active {
    background-position: -71px -1316px !important
}

.HD #btnShot1.Pressed {
    background-position: -106.5px -1316px
}

#btnShot2 {
    position: absolute;
    left: 55px;
    top: 21px;
    width: 35px;
    height: 35px;
    background-position: 0 -151px
}

#btnShot2:hover {
    background-position: -36px -151px
}

#btnShot2:active {
    background-position: -72px -151px !important
}

#btnShot2.Pressed {
    background-position: -108px -151px
}

.HD #btnShot2 {
    background-position: 0 -1351.5px
}

.HD #btnShot2:hover {
    background-position: -35.5px -1351.5px
}

.HD #btnShot2:active {
    background-position: -71px -1351.5px !important
}

.HD #btnShot2.Pressed {
    background-position: -106.5px -1351.5px
}

#btnShotSS {
    position: absolute;
    left: 98px;
    top: 21px;
    width: 35px;
    height: 35px;
    background-position: 0 -187px
}

#btnShotSS:hover {
    background-position: -36px -187px
}

#btnShotSS:active {
    background-position: -72px -187px !important
}

#btnShotSS.Pressed {
    background-position: -108px -187px
}

.HD #btnShotSS {
    background-position: 0 -1387px
}

.HD #btnShotSS:hover {
    background-position: -35.5px -1387px
}

.HD #btnShotSS:active {
    background-position: -71px -1387px !important
}

.HD #btnShotSS.Pressed {
    background-position: -106.5px -1387px
}

#btnPass {
    position: absolute;
    left: 75px;
    top: 58px;
    width: 58px;
    height: 21px;
    background-position: -144px -115px
}

.HD #btnPass {
    background-position: -142px -1316px
}

#btnEsc {
    position: absolute;
    left: 12px;
    top: 58px;
    width: 58px;
    height: 21px;
    background-position: -144px -137px
}

.HD #btnEsc {
    background-position: -142px -1337.5px
}

#btnFriends {
    position: absolute;
    left: 600px;
    top: -518px;
    white-space: nowrap;
    opacity: .5;
    padding: 4px;
    font-size: 10px;
    line-height: 6px
}

#btnDownloadMap {
    position: absolute;
    left: 522px;
    top: -518px;
    white-space: nowrap;
    opacity: .5;
    padding: 4px;
    font-size: 10px;
    line-height: 6px
}

#touch_ui {
    position: absolute;
    left: 430px;
    top: 150px;
    width: 350px;
    height: 350px;
    display: none;
    z-index: 5
}

#btnShoot {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 150px;
    height: 150px;
    background: url(/static/images/touch_ui.png) no-repeat -100px -100px;
    opacity: .4
}

#btnShoot:hover {
    opacity: .6
}

#btnShoot:active {
    opacity: .8
}

#btnLeft {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 70px;
    height: 150px;
    background: url(/static/images/touch_ui.png) no-repeat 0 -100px;
    opacity: .4
}

#btnLeft:hover {
    opacity: .6
}

#btnLeft.active {
    opacity: .8
}

#btnRight {
    position: absolute;
    left: 280px;
    top: 100px;
    width: 70px;
    height: 150px;
    background: url(/static/images/touch_ui.png) no-repeat -280px -100px;
    opacity: .4
}

#btnRight:hover {
    opacity: .6
}

#btnRight.active {
    opacity: .8
}

#btnUp {
    position: absolute;
    left: 150px;
    top: 0;
    width: 150px;
    height: 70px;
    background: url(/static/images/touch_ui.png) no-repeat -100px 0;
    opacity: .4
}

#btnUp:hover {
    opacity: .6
}

#btnUp.active {
    opacity: .8
}

#btnDown {
    position: absolute;
    left: 150px;
    top: 280px;
    width: 150px;
    height: 70px;
    background: url(/static/images/touch_ui.png) no-repeat -100px -280px;
    opacity: .4
}

#btnDown:hover {
    opacity: .6
}

#btnDown.active {
    opacity: .8
}

#last_power_mark {
    position: absolute;
    left: 240px;
    top: 67px;
    margin-left: -4px;
    background-position: -294px -159px;
    width: 9px;
    height: 6px;
    transition: left 1s ease-out;
    z-index: 1
}

.HD #last_power_mark {
    background-position: -221px -1413px
}

#all_chat {
    position: absolute;
    left: 248px;
    top: -29px;
    width: 31px;
    height: 25px;
    background-position: -265px -197px
}

.HD #all_chat {
    background-position: -199px -1360px
}

#team_chat {
    position: absolute;
    left: 248px;
    top: -29px;
    width: 31px;
    height: 25px;
    background-position: -233px -197px;
    display: none;
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

.HD #team_chat {
    background-position: -199px -1386.5px
}

#team_chat:hover {
    box-shadow: 0 0 10px 10px #ff0
}

#team_chat:active {
    box-shadow: 0 0 10px 10px #0f0
}

#help_btn {
    position: absolute;
    left: 215px;
    top: -31px;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 15px;
    font-size: 24px;
    background: rgba(255, 255, 0, 0.3);
    display: none
}

#game_dnd_btn {
    position: absolute;
    left: 215px;
    top: -59px
}

#friends_list_dnd_btn {
    position: absolute;
    left: 163px;
    top: 6px
}

.dnd_btn {
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 15px;
    font-size: 14px;
    background: rgba(0, 255, 0, 0.3);
    color: #0f0;
    line-height: 24px
}

.dnd_btn.on {
    background: rgba(255, 0, 0, 0.3);
    color: #f93;
    font-size: 10px;
    line-height: 22px
}

.dnd_btn.on:active {
    box-shadow: 0 0 10px 10px #0f0
}

.pmsOnHold {
    position: absolute;
    top: -4px;
    right: 0;
    background-color: #fa3e3e;
    border-radius: 3px;
    color: #fff;
    padding: 1px 2px;
    line-height: 9px;
    font-size: 9px;
    display: none
}

#room_item_buddy_tab2 .pmsOnHold {
    top: 0
}

.glow_button {
    cursor: pointer
}

.glow_button:hover {
    box-shadow: 0 0 10px 10px #ff0 !important
}

.glow_button:active {
    box-shadow: 0 0 10px 10px #9f9 !important
}

.glow_button_anim {
    -webkit-transition: box-shadow .15s ease-in-out;
    -moz-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out;
    cursor: pointer
}

.glow_button_anim:hover {
    box-shadow: 0 0 10px 10px #ff0 !important
}

.glow_button_anim:active {
    box-shadow: 0 0 10px 10px #9f9 !important
}

.GlowTextButtonAnim {
    -webkit-transition: text-shadow .15s ease-in-out;
    -moz-transition: text-shadow .15s ease-in-out;
    transition: text-shadow .15s ease-in-out;
    cursor: pointer
}

.GlowTextButtonAnim:hover {
    text-shadow: 0 0 10px #ff0, 0 0 10px #ff0, 0 0 10px #ff0
}

.GlowTextButtonAnim:active {
    text-shadow: 0 0 10px #9f9, 0 0 10px #9f9
}

.glow_button2 {
    cursor: pointer;
    border-radius: 15px
}

.glow_button2:hover {
    box-shadow: 0 0 10px 10px #ff0 !important
}

.glow_button2:active {
    box-shadow: 0 0 10px 10px #9f9 !important
}

#game_over {
    position: absolute;
    left: 0;
    top: 0;
    width: 800px;
    height: 600px;
    display: none;
    -webkit-transform: translate3d(0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover
}

#game_over.replay {
    border-radius: 0 0 0 150px
}

#scores_lose_a {
    position: absolute;
    left: 115px;
    top: 24px;
    background-position: -200px -708px;
    width: 200px;
    height: 64px
}

#scores_lose_b {
    position: absolute;
    left: 485px;
    top: 24px;
    background-position: -200px -708px;
    width: 200px;
    height: 64px
}

#scores_lose_a.win,
#scores_lose_b.win {
    background-position: 0 -708px
}

.HD #scores_lose_a,
.HD #scores_lose_b {
    background-position: -550.5px -1441px;
    width: 194px;
    height: 57px;
    top: 32px
}

.HD #scores_lose_a.win,
.HD #scores_lose_b.win {
    background-position-y: -1382.5px
}

.score {
    position: absolute;
    background-position: 0 -601px;
    width: 380px;
    height: 106px;
    display: none
}

.HD .score {
    background-position: -746px -1338.5px;
    width: 254px;
    height: 79px
}

#score0 {
    top: 151px
}

#score1 {
    left: 295px;
    top: 151px
}

#score2 {
    top: 257px
}

#score3 {
    left: 295px;
    top: 257px
}

#score4 {
    top: 359px
}

#score5 {
    left: 295px;
    top: 359px
}

#score6 {
    top: 465px
}

#score7 {
    left: 295px;
    top: 465px
}

.HD #score0,
.HD #score2,
.HD #score4,
.HD #score6 {
    left: 126px
}

.HD #score1,
.HD #score3,
.HD #score5,
.HD #score7 {
    left: 421px
}

.score_me {
    position: absolute;
    left: 0;
    top: 0;
    background-position: -381px -601px;
    width: 380px;
    height: 106px
}

.HD .score_me {
    background-position: -746px -1419px;
    width: 254px;
    height: 79px
}

.score_rank {
    position: absolute;
    left: 145px;
    top: 10px;
    width: 25px;
    height: 15px
}

.HD .score_rank {
    left: 19px
}

.score_name {
    position: absolute;
    left: 140px;
    top: 7px;
    width: 300px;
    color: #ffca41;
    font-size: 11px;
    font-weight: bold
}

.HD .score_name {
    left: 15px
}

.score_gp {
    position: absolute;
    left: 140px;
    top: 33px;
    color: #fff;
    font-size: 11px;
    font-weight: bold
}

.HD .score_gp {
    left: 17px
}

.score_gold {
    position: absolute;
    left: 190px;
    top: 33px;
    color: #ffd273;
    font-size: 11px;
    font-weight: bold
}

.HD .score_gold {
    left: 64px
}

.score_bonus_gp {
    position: absolute;
    left: 285px;
    top: 29px;
    color: #f4c;
    font-size: 11px;
    font-weight: bold
}

.HD .score_bonus_gp {
    left: 159px
}

.score_bonus_gold {
    position: absolute;
    left: 285px;
    top: 49px;
    color: #f96;
    font-size: 11px;
    font-weight: bold
}

.HD .score_bonus_gold {
    left: 159px
}

.score_state {
    position: absolute;
    color: #f09;
    font-size: 38px;
    font-weight: bold;
    white-space: nowrap
}

.score_state_computer {
    left: 148px;
    top: 20px;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg)
}

.HD .score_state_computer {
    left: 22px
}

.score_state_left {
    left: 214px;
    top: 23px;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg)
}

.HD .score_state_left {
    left: 88px
}

.score_state_rankup {
    left: 160px;
    top: 40px
}

.HD .score_state_rankup {
    left: 34px
}

.score_mvp {
    position: absolute;
    left: 170px;
    top: 46px;
    color: #ff0;
    text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black, 0 0 10px yellow, 0 0 10px yellow;
    display: none;
    background: url(/static/images/mvp.png);
    background-size: cover;
    width: 61px;
    height: 25px
}

.score_mvp.plus {
    background-image: url(/static/images/mvp1.png) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    width: 120px !important;
    height: 50px !important;
    top: 45px !important;
    left: 35px !important;
}

.classic_nyx_icon {
    display: inline-block;
    width: 23px;
    height: 19px;
    background: url(/static/images/season2/cafe.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-left: 3px;
}

.HD .score_mvp {
    left: 43px
}

#turns_list {
    position: absolute;
    left: 2px;
    bottom: 86px;
    width: 200px;
    border: 1px solid black;
    padding-bottom: 1px;
    overflow: hidden
}

#turn_list_title {
    color: white;
    font-size: 11px;
    padding-bottom: 2px;
    display: flex
}

#turn_number {
    flex: 1;
    text-align: center;
    color: #b4ffb4;
    font-size: 10px;
    line-height: 11px
}

#turn_number.sd {
    color: indianred
}

#turn_delay_type {
    margin: 0
}

.turn_line {
    position: relative;
    height: 15px;
    display: none;
    margin-left: 3px;
    margin-right: 2px
}

.turn_line_number {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 15px
}

.turn_line_number0 {
    background-position: -572px -183px
}

.turn_line_number1 {
    background-position: -584px -183px
}

.turn_line_number2 {
    background-position: -596px -183px
}

.turn_line_number3 {
    background-position: -608px -183px
}

.turn_line_number4 {
    background-position: -620px -183px
}

.turn_line_number5 {
    background-position: -632px -183px
}

.turn_line_number6 {
    background-position: -644px -183px
}

.turn_line_number7 {
    background-position: -656px -183px
}

.HD .turn_line_number0 {
    background-position: -371px -1389px
}

.HD .turn_line_number1 {
    background-position: -382.5px -1389px
}

.HD .turn_line_number2 {
    background-position: -394px -1389px
}

.HD .turn_line_number3 {
    background-position: -405.5px -1389px
}

.HD .turn_line_number4 {
    background-position: -417px -1389px
}

.HD .turn_line_number5 {
    background-position: -428.5px -1389px
}

.HD .turn_line_number6 {
    background-position: -440px -1389px
}

.HD .turn_line_number7 {
    background-position: -451.5px -1389px
}

.turn_line_number_a {
    background-color: #f7a539
}

.turn_line_number_b {
    background-color: #8cb5de
}

.turn_line_rank {
    position: absolute;
    left: 13px;
    top: 0;
    width: 25px;
    height: 15px
}

.turn_line_name {
    position: absolute;
    left: 40px;
    top: 2px;
    margin-left: 1px;
    width: 121px;
    height: 15px;
    color: #ffca41;
    font-size: 12px;
    white-space: nowrap
}

.turn_line_name_a {
    color: #f7a539
}

.turn_line_name_b {
    color: #8cb5de
}

.turn_line_delay {
    position: absolute;
    right: 1px;
    top: 2px;
    color: #fff;
    font-size: 10px
}

.turn_line_me {
    background-color: rgba(148, 140, 132, 0.75)
}

.turn_line_me .turn_line_delay {
    color: #ffe357
}

.turn_line_now {
    box-shadow: inset 3px 0 0 #7dff7d;
    background-color: rgba(70, 140, 70, 0.35)
}

.turn_line_now.turn_line_me {
    background-color: rgba(90, 150, 90, 0.55)
}

.AlertBoxBackground {
    position: absolute;
    width: 800px;
    height: 600px;
    background-color: black;
    opacity: .5;
    z-index: 997
}

.AlertBox {
    position: absolute;
    left: 235px;
    top: 165px;
    width: 300px;
    height: 176px;
    opacity: 1.0;
    z-index: 999;
    background-position: 0 0
}

.HD .AlertBox {
    background-position: -680px -318px;
    background-size: 1000px 1500px
}

.AlertBoxTitle {
    position: absolute;
    left: 23px;
    top: 8px;
    font-size: 16px;
    color: white;
    text-shadow: black -2px 0 4px, black 0 2px 4px, black 2px 0 4px, black 0 -2px 4px, black -1px 0 1px, black 0 1px 1px, black 1px 0 1px, black 0 -1px 1px
}

.AlertBoxContent {
    position: absolute;
    left: 0;
    top: 45px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 12px;
    color: white;
    z-index: 2
}

.AlertBoxOK {
    position: absolute;
    display: none;
    z-index: 3;
    right: -30px;
    bottom: -7px
}

.AlertBoxCancel {
    position: absolute;
    display: none;
    z-index: 3;
    left: -37px;
    bottom: -7px
}

.AlertBold {
    color: #f90
}

.HD #DragonDialogOK,
.HD #dialog_change_name_ok,
.HD #dialogCreateRoomButtonOK,
.HD #dialog_join_room_ok,
.HD #dialogGiftOK,
.HD #RoomOptionsOK,
.HD #roomMobileSelectCancel,
.HD #dialog_change_title_ok {
    right: 10px;
    bottom: 7px
}

.HD #roomMobileSelectOk {
    right: 102px;
    bottom: 7px
}

.HD #DragonDialogCancel,
.HD #dialog_change_name_cancel,
.HD #dialogCreateRoomButtonCancel,
.HD #dialog_join_room_cancel,
.HD #dialogGiftCancel,
.HD #RoomOptionsCancel,
.HD #dialog_change_title_cancel {
    left: 10px;
    bottom: 7px
}

#DragonDesignerOK {
    position: absolute;
    right: 8px;
    top: 32px;
    z-index: 9
}

#DragonDesignerTypeAnimation {
    margin-top: 2px;
    margin-left: -22px;
    width: 273px;
    height: 81px;
    font-size: 9px
}

#ConnectWithFacebook {
    position: absolute;
    left: 51px;
    top: 232px
}

#ConnectWithPassword {
    position: absolute;
    left: 26px;
    top: 400px;
    width: 194px;
    height: 25px;
    background-position: 0 -444px;
    opacity: .4;
    border-radius: 2px
}

#ConnectWithPassword:hover {
    opacity: 1
}

#ConnectWithDragonBound {
    position: absolute;
    left: 26px;
    top: 70px;
    width: 194px;
    height: 25px;
    background: url('/static/images/login_with_dragonbound.png');
    border-radius: 2px
}

.loginBtnInfo {
    position: relative;
    left: 197px;
    top: 6px;
    color: #fff;
    font-size: 10px
}

#NewUser2 {
    position: absolute;
    left: 130px;
    top: -20px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PHRpdGxlPkxheWVyIDE8L3RpdGxlPjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgdHJhbnNmb3JtPSJyb3RhdGUoLTg5Ljg2MTggNzQuNTUgNzYuNDUpIiBkPSJtMy43IDc2LjNsNzAuOS03MS44IDcwLjkgNzEuOCAtMzUuNSAwIDAgNzIuMiAtNzAuOSAwIDAtNzIuMiAtMzUuNSAwIDAgMCAwLjEgMHoiIHN0cm9rZS1saW5lY2FwPSJudWxsIiBzdHJva2UtbGluZWpvaW49Im51bGwiIHN0cm9rZS1kYXNoYXJyYXk9Im51bGwiIHN0cm9rZS13aWR0aD0iNSIgZmlsbD0iI2ZmZmYwMCIvPjwvc3ZnPg==);
    width: 150px;
    height: 150px;
    animation: moveLeftRight_anim 1s infinite alternate ease-in-out;
    opacity: .8
}

#NewUser2Text {
    position: absolute;
    left: 25px;
    top: 49px;
    font-size: 13px;
    line-height: 25px;
    font-family: cursive;
    text-align: center;
    width: 118px
}

#BrokerHelp {
    position: absolute;
    display: none;
    pointer-events: none
}

@keyframes moveLeftRight_anim {
    from {
        left: 180px
    }

    to {
        left: 140px
    }
}

@keyframes huerotate {
    from {
        filter: hue-rotate(0)
    }

    to {
        filter: hue-rotate(360deg)
    }
}

#ranking_panel {
    position: fixed;
    left: -330px;
    top: 0;
    height: 100%;
    width: 300px;
    color: white;
    font-size: 12px;
    z-index: 101;
    background: rgba(0, 0, 0, 0.4);
    transition: left .25s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

#ranking_panel td {
    vertical-align: middle;
    height: 15px;
    padding: 2px;
    white-space: nowrap;
    overflow: hidden
}

#ranking_title {
    font-weight: bold;
    text-align: center;
    font-size: 13px
}

#ranking_title2 {
    text-align: center
}

#ranking_btns {
    padding-left: 3px
}

.ranking_btn {
    display: inline-block;
    background-color: #495d7b;
    padding: 3px 6px;
    margin: 3px 0;
    border-radius: 5px;
    font-size: 12px;
    border: 1px solid black
}

.ranking_btn:hover {
    background-color: #6b8cc6;
    cursor: pointer
}

.ranking_btn:active {
    border: 1px solid white;
    background-color: #8dc
}

.ranking_btn.selected {
    border: 1px solid white;
    background-color: lime
}

.ranking_me {
    background-color: #789
}

.ranking_num {
    width: 1px;
    text-align: right
}

.ranking_rank {
    width: 1px
}

.ranking_name {
    max-width: 100px
}

.ranking_gp {
    width: 1px;
    text-align: right
}

#ranking_data2 {
    clear: both;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    direction: rtl;
    text-align: left
}

#ranking_data {
    direction: ltr;
    text-align: left;
    padding-bottom: 40px
}

#ranking_home {
    direction: ltr;
    text-align: left;
    height: 100%
}

#ranking_data table {
    width: 100%
}

.flexcroll {
    scrollbar-face-color: #367cd2;
    scrollbar-shadow-color: #fff;
    scrollbar-highlight-color: #fff;
    scrollbar-3dlight-color: #fff;
    scrollbar-darkshadow-color: #fff;
    scrollbar-track-color: #fff;
    scrollbar-arrow-color: #fff
}

.rankEventItem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    margin: 16px auto 0;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    background: rgba(8, 18, 40, .72);
    border: 1px solid rgba(255, 210, 90, .35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4)
}

.rankEventItem:hover {
    border-color: #ffd24a;
    background: rgba(16, 28, 52, .88)
}

.rankEventIcon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255, 200, 80, .55))
}

.rankEventEmoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    filter: none
}

.rankEventText {
    min-width: 0
}

.rankEventName {
    color: #ffe082;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 3px #000
}

.rankEventEnd {
    margin-top: 3px;
    color: #d7e3f5;
    font-size: 12px
}

#TicketsEventTimer,
#SeasonEventTimer,
#RuletaEventTimer,
#TragamonedasEventTimer,
#LetrasEventTimer {
    color: #7dff9a;
    font-weight: 700
}

.flexcroll::-webkit-scrollbar {
    width: 12px
}

.flexcroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px
}

.flexcroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0, 192, 255, 0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5)
}

#ranking_panel_open {
    font-size: 11px;
    line-height: 8px;
    color: lightgray;
    position: absolute;
    top: 50%;
    margin-top: -36px;
    width: 72px;
    height: 10px;
    background: rgba(100, 100, 100, 0.5);
    text-align: center;
    padding-top: 3px;
    z-index: 102;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    transition: left .25s ease-in-out
}

@media(min-height: 700px) and (min-width:1100px) {
    #ranking_panel_open {
        font-size: 13px;
        line-height: 11px;
        margin-top: -50px;
        width: 100px;
        height: 13px;
        background: rgba(100, 100, 100, 0.5);
        text-align: center;
        padding-top: 2px
    }
}

#ranking_panel_open:active {
    margin-left: 0;
    filter: brightness(1.6)
}

#dialog_change_name_div {
    display: none
}

#dialog_change_name_ok {
    position: absolute;
    right: -35px;
    bottom: -7px
}

#dialog_change_name_cancel {
    position: absolute;
    left: -42px;
    bottom: -7px
}

#myInfoProfile {
    position: absolute;
    color: inherit;
    left: 10px;
    top: 55px;
    line-height: 5px;
    font-size: 7px;
    font-weight: normal
}

#dialog_join_room_div {
    display: none
}

#dialog_join_room_ok {
    position: absolute;
    right: -31px;
    bottom: -7px
}

#dialog_join_room_div .AlertBox {
    top: 150px
}

#dialog_join_room_cancel {
    position: absolute;
    left: -38px;
    bottom: -7px
}

#dialog_security_lock_ok {
    position: absolute;
    right: 8px;
    bottom: 5px
}

#dialog_security_lock_cancel {
    position: absolute;
    left: 8px;
    bottom: 5px
}

#join_room_input {
    margin-left: 8px;
    width: 125px
}

#join_password_input {
    width: 125px
}

.input_field {
    background-color: #524a7b;
    color: #acf2f6;
    padding: 1px 3px
}

#dialogGift {
    display: none;
    position: absolute;
    z-index: 44
}

#dialogGift .AlertBox {
    top: 130px;
    left: 307px
}

#dialogGiftOK {
    position: absolute;
    right: -31px;
    bottom: -7px
}

#dialogGiftCancel {
    position: absolute;
    left: -38px;
    bottom: -7px
}

#giftUsername {
    width: 110px
}

#giftMessage {
    width: 200px
}

#dialogGiftBuyRoom {
    position: absolute;
    top: -10px;
    right: 10px
}

.BuyRoom {
    color: cyan;
    background: blue
}

#ground_canvas {
    position: absolute;
    width: 1409px;
    height: 760px
}

#game_replay {
    position: absolute;
    top: 400px;
    font-size: 36px;
    color: white;
    display: none;
    text-shadow: black -2px 0 4px, black 0 2px 4px, black 2px 0 4px, black 0 -2px 4px, black -1px 0 1px, black 0 1px 1px, black 1px 0 1px, black 0 -1px 1px;
    width: 800px;
    text-align: center;
    pointer-events: none
}

#game_click_to_revive {
    position: absolute;
    top: 400px;
    font-size: 36px;
    color: white;
    display: none;
    text-shadow: black -2px 0 4px, black 0 2px 4px, black 2px 0 4px, black 0 -2px 4px, black -1px 0 1px, black 0 1px 1px, black 1px 0 1px, black 0 -1px 1px;
    width: 800px;
    text-align: center;
    pointer-events: none
}

#revive_panel {
    position: absolute;
    background: rgba(0, 0, 255, 0.2)
}

#thor {
    position: absolute
}

#thor_laser {
    position: absolute;
    top: -15px;
    width: 500px;
    height: 30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAAB3RJTUUH3gQLDzQv3cZ/rQAAAAlwSFlzAAAnEAAAJxABlGlRGQAAAARnQU1BAACxjwv8YQUAAABKSURBVHjaY2Bg+M/LxMXFwAkiuJg4OSEsKAHkciFxsYmBdDBcuvT/ChMDAwMTs6hogyLT9+8M35m+fYMRQO4PJC42MTgXaMh/KQBXYCrEWIxApwAAAABJRU5ErkJggg==) repeat-x;
    display: none
}

#thor_lvl {
    position: absolute;
    right: -70px;
    top: 30px;
    color: #f73918;
    font-size: 14px
}

#thor_damage {
    position: absolute;
    right: -70px;
    top: 47px;
    color: #ff5a42;
    font-size: 12px
}

.lightning {
    position: absolute;
    width: 64px;
    height: 1024px;
    margin-left: -32px;
    margin-top: -1024px;
    background: url(/static/images/lightnings.png) repeat-y
}

.lightning1 {
    background-position: 0 0
}

.lightning2 {
    background-position: -64px 0
}

.lightning3 {
    background-position: -128px 0
}

.lightning4 {
    background-position: -192px 0
}

#room_game_mode {
    position: absolute;
    top: 30px;
    left: 389px;
    text-align: center;
    width: 100px;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    text-shadow: -1.5px -1.5px 0 #000, 0px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 1.5px 0 #000, 0px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

#room_players {
    position: absolute;
    left: 381px;
    top: 44px;
    width: 115px;
    text-align: center;
    color: #ffad00;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    text-shadow: -1.5px -1.5px 0 #000, 0px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 1.5px 0 #000, 0px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

#room_avatars {
    position: absolute;
    left: 380px;
    top: 58px;
    width: 120px;
    font-size: 12px;
    text-align: center;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    text-shadow: -1.5px -1.5px 0 #000, 0px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 1.5px 0 #000, 0px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

#room_wind {
    position: absolute;
    left: 380px;
    top: 72px;
    width: 120px;
    font-size: 12px;
    text-align: center;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    text-shadow: -1.5px -1.5px 0 #000, 0px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 1.5px 0 #000, 0px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

#room_turn_time_text {
    position: absolute;
    right: 425px;
    top: 83px;
    font-weight: bold
}

#room_turn_time {
    position: absolute;
    left: 380px;
    top: 86px;
    width: 120px;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    text-shadow: -1.5px -1.5px 0 #000, 0px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 1.5px 0 #000, 0px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

#room_change_title_button {
    position: absolute;
    left: 16px;
    top: 3px;
    width: 15px;
    height: 15px;
    background-position: -85px -9px
}

.HD #room_change_title_button {
    background-position: -857px -507.5px
}

#room_options_button {
    position: absolute;
    left: 507px;
    top: 26px;
    width: 55px;
    height: 83px;
    background-position: -178px -11px
}

.HD #room_options_button {
    background-position: -927.5px -532.5px
}

#room_map {
    position: absolute;
    left: 14px;
    top: 55px;
    width: 213px;
    height: 49px
}

.room_map_fix {
    left: 37px !important;
    top: 37px !important
}

.room_options_button_fix {
    top: 15px !important
}

#dialog_change_title_ok {
    position: absolute;
    right: -31px;
    bottom: -7px
}

#dialog_change_title_cancel {
    position: absolute;
    left: -38px;
    bottom: -7px
}

.light_button:hover {
    filter: brightness(1.3);
    cursor: pointer
}

.light_button:active {
    margin: 1px 0 0 0;
    filter: brightness(1.3);
    cursor: pointer
}

.light_button.roomExtraInfo {
    filter: brightness(1)
}

.light_button.grayscale:hover,
.light_button.grayscale:active {
    filter: grayscale(100%) brightness(1.3)
}

.opacity_button:hover {
    opacity: .5;
    cursor: pointer
}

.opacity_button:active {
    margin: 1px 0 0 1px;
    opacity: .5;
    cursor: pointer
}

.opacity_button.noOpacity {
    opacity: 1 !important
}

.opacityButton2:hover {
    opacity: .5;
    cursor: pointer
}

.opacityButton2:active {
    opacity: .5;
    filter: brightness(1.5);
    cursor: pointer
}

#slice_drag_button {
    position: absolute;
    left: 207px;
    top: 42px;
    width: 30px;
    height: 30px;
    background-position: -231px -159px
}

#slice_drag_button.drag {
    background-position: -262px -159px;
    width: 31px
}

.HD #slice_drag_button {
    background-position: -231.5px -1358px
}

.HD #slice_drag_button.drag {
    background-position: -231.5px -1389.5px;
    width: 30px
}

#map_bg {
    position: absolute;
    display: none
}

.shot_img {
    background: url(/static/images/shots.png) no-repeat
}

.shot_img_0 {
    background-position: 0 0;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px
}

.shot_img_1 {
    background-position: 0 -30px;
    width: 38px;
    height: 18px;
    margin-left: -19px;
    margin-top: -9px
}

.shot_img_2 {
    background-position: 0 -48px;
    width: 30px;
    height: 27px;
    margin-left: -15px;
    margin-top: -13px
}

.shot_img_3 {
    background-position: 0 -75px;
    width: 59px;
    height: 27px;
    margin-left: -29px;
    margin-top: -13px
}

.thor-0 {
    background-position: 0 0
}

.thor-1 {
    background-position: -159px 0
}

.thor-2 {
    background-position: -318px 0
}

.thor-3 {
    background-position: -477px 0
}

.thor-4 {
    background-position: -636px 0
}

.thor-5 {
    background-position: -795px 0
}

.thor-6 {
    background-position: -954px 0
}

.thor-7 {
    background-position: -1113px 0
}

.thor-8 {
    background-position: -1272px 0
}

.thor-9 {
    background-position: -1431px 0
}

.thor-10 {
    background-position: -1590px 0
}

.thor-11 {
    background-position: -1749px 0
}

.thor-12 {
    background-position: -1908px 0
}

.thor-13 {
    background-position: -2067px 0
}

.thor-14 {
    background-position: -2226px 0
}

.thor-15 {
    background-position: -2385px 0
}

.thor-16 {
    background-position: -2544px 0
}

.thor-17 {
    background-position: -2703px 0
}

.thor-18 {
    background-position: -2862px 0
}

.thor-19 {
    background-position: -3021px 0
}

.mobile0-0 {
    background-position: 0 0
}

.mobile0-1 {
    background-position: -36px 0
}

.mobile0-2 {
    background-position: -72px 0
}

.mobile0-3 {
    background-position: -108px 0
}

.mobile0-4 {
    background-position: -144px 0
}

.mobile0-5 {
    background-position: -180px 0
}

.mobile0-6 {
    background-position: -216px 0
}

.mobile0-7 {
    background-position: -252px 0
}

.mobile0-8 {
    background-position: -288px 0
}

.mobile0-9 {
    background-position: -324px 0
}

.mobile0-10 {
    background-position: -360px 0
}

.mobile0-11 {
    background-position: -396px 0
}

.mobile0-12 {
    background-position: -432px 0
}

.mobile0-13 {
    background-position: -468px 0
}

.mobile0-14 {
    background-position: -504px 0
}

.mobile0-15 {
    background-position: -540px 0
}

.mobile0-16 {
    background-position: -576px 0
}

.mobile0-17 {
    background-position: -612px 0
}

.mobile1-0 {
    background-position: 0 0
}

.mobile1-1 {
    background-position: -55px 0
}

.mobile1-2 {
    background-position: -110px 0
}

.mobile1-3 {
    background-position: -165px 0
}

.mobile1-4 {
    background-position: -220px 0
}

.mobile1-5 {
    background-position: -275px 0
}

.mobile1-6 {
    background-position: -330px 0
}

.mobile1-7 {
    background-position: -385px 0
}

.mobile1-8 {
    background-position: -440px 0
}

.mobile1-9 {
    background-position: -495px 0
}

.mobile1-10 {
    background-position: -550px 0
}

.mobile1-11 {
    background-position: -605px 0
}

.mobile1-12 {
    background-position: -660px 0
}

.mobile1-13 {
    background-position: -715px 0
}

.mobile1-14 {
    background-position: -770px 0
}

.mobile1-15 {
    background-position: -825px 0
}

.mobile1-16 {
    background-position: -880px 0
}

.mobile1-17 {
    background-position: -935px 0
}

.mobile1-18 {
    background-position: -990px 0
}

.mobile2-0 {
    background-position: 0 0
}

.mobile2-1 {
    background-position: -67px 0
}

.mobile2-2 {
    background-position: -134px 0
}

.mobile2-3 {
    background-position: -201px 0
}

.mobile2-4 {
    background-position: -268px 0
}

.mobile2-5 {
    background-position: -335px 0
}

.mobile2-6 {
    background-position: -402px 0
}

.mobile2-7 {
    background-position: -469px 0
}

.mobile2-8 {
    background-position: -536px 0
}

.mobile2-9 {
    background-position: -603px 0
}

.mobile2-10 {
    background-position: -670px 0
}

.mobile2-11 {
    background-position: -737px 0
}

.mobile2-12 {
    background-position: -804px 0
}

.mobile2-13 {
    background-position: -871px 0
}

.mobile2-14 {
    background-position: -938px 0
}

.mobile2-15 {
    background-position: -1005px 0
}

.mobile2-16 {
    background-position: -1072px 0
}

.mobile2-17 {
    background-position: -1139px 0
}

.mobile2-18 {
    background-position: -1206px 0
}

.mobile2-19 {
    background-position: -1273px 0
}

.mobile3-0 {
    background-position: 0 0
}

.mobile3-1 {
    background-position: -43px 0
}

.mobile3-2 {
    background-position: -86px 0
}

.mobile3-3 {
    background-position: -129px 0
}

.mobile3-4 {
    background-position: -172px 0
}

.mobile3-5 {
    background-position: -215px 0
}

.mobile3-6 {
    background-position: -258px 0
}

.mobile3-7 {
    background-position: -301px 0
}

.mobile3-8 {
    background-position: -344px 0
}

.mobile3-9 {
    background-position: -387px 0
}

.mobile3-10 {
    background-position: -430px 0
}

.mobile3-11 {
    background-position: -473px 0
}

.mobile3-12 {
    background-position: -516px 0
}

.mobile3-13 {
    background-position: -559px 0
}

.mobile3-14 {
    background-position: -602px 0
}

.mobile3-15 {
    background-position: -645px 0
}

.mobile3-16 {
    background-position: -688px 0
}

.mobile3-17 {
    background-position: -731px 0
}

.mobile3-18 {
    background-position: -774px 0
}

.mobile3-19 {
    background-position: -817px 0
}

.mobile4-0 {
    background-position: 0 0
}

.mobile4-1 {
    background-position: -51px 0
}

.mobile4-2 {
    background-position: -102px 0
}

.mobile4-3 {
    background-position: -153px 0
}

.mobile4-4 {
    background-position: -204px 0
}

.mobile4-5 {
    background-position: -255px 0
}

.mobile4-6 {
    background-position: -306px 0
}

.mobile4-7 {
    background-position: -357px 0
}

.mobile4-8 {
    background-position: -408px 0
}

.mobile4-9 {
    background-position: -459px 0
}

.mobile4-10 {
    background-position: -510px 0
}

.mobile4-11 {
    background-position: -561px 0
}

.mobile4-12 {
    background-position: -612px 0
}

.mobile4-13 {
    background-position: -663px 0
}

.mobile4-14 {
    background-position: -714px 0
}

.mobile4-15 {
    background-position: -765px 0
}

.mobile4-16 {
    background-position: -816px 0
}

.mobile4-17 {
    background-position: -867px 0
}

.mobile4-18 {
    background-position: -918px 0
}

.mobile4-19 {
    background-position: -969px 0
}

.mobile4-20 {
    background-position: -1020px 0
}

.mobile4-21 {
    background-position: -1071px 0
}

.mobile4-22 {
    background-position: -1122px 0
}

.mobile4-23 {
    background-position: -1173px 0
}

.mobile4-24 {
    background-position: -1224px 0
}

.mobile4-25 {
    background-position: -1275px 0
}

.mobile4-26 {
    background-position: -1326px 0
}

.mobile4-27 {
    background-position: -1377px 0
}

.mobile4-28 {
    background-position: -1428px 0
}

.mobile4-29 {
    background-position: -1479px 0
}

.mobile4-30 {
    background-position: -1530px 0
}

.mobile4-31 {
    background-position: -1581px 0
}

.mobile4-32 {
    background-position: -1632px 0
}

.mobile4-33 {
    background-position: -1683px 0
}

.mobile4-34 {
    background-position: -1734px 0
}

.mobile4-35 {
    background-position: -1785px 0
}

.mobile4-36 {
    background-position: -1836px 0
}

.mobile4-37 {
    background-position: -1887px 0
}

.mobile4-38 {
    background-position: -1938px 0
}

.mobile4-39 {
    background-position: -1989px 0
}

.mobile5-0 {
    background-position: 0 0
}

.mobile5-1 {
    background-position: -37px 0
}

.mobile5-2 {
    background-position: -74px 0
}

.mobile5-3 {
    background-position: -111px 0
}

.mobile5-4 {
    background-position: -148px 0
}

.mobile5-5 {
    background-position: -185px 0
}

.mobile5-6 {
    background-position: -222px 0
}

.mobile5-7 {
    background-position: -259px 0
}

.mobile5-8 {
    background-position: -296px 0
}

.mobile5-9 {
    background-position: -333px 0
}

.mobile5-10 {
    background-position: -370px 0
}

.mobile5-11 {
    background-position: -407px 0
}

.mobile5-12 {
    background-position: -444px 0
}

.mobile5-13 {
    background-position: -481px 0
}

.mobile5-14 {
    background-position: -518px 0
}

.mobile5-15 {
    background-position: -555px 0
}

.mobile5-16 {
    background-position: -592px 0
}

.mobile5-17 {
    background-position: -629px 0
}

.mobile5-18 {
    background-position: -666px 0
}

.mobile5-19 {
    background-position: -703px 0
}

#shopScreen {
    display: none
}

.shopButton {
    position: absolute
}

#buttonShopExit {
    position: absolute;
    left: 14px;
    top: 541px;
    width: 36px;
    height: 50px;
    background-position: -91px -233px
}

.HD #buttonShopExit {
    background-position: -747.5px -40.5px
}

#buttonShopBuy {
    left: 534px;
    top: 493px;
    width: 72px;
    height: 82px;
    background-position: -232px -245px
}

.HD #buttonShopBuy {
    background-position: -711.5px -92px
}

#buttonShopHead {
    left: 281px;
    top: 493px;
    width: 35px;
    height: 31px;
    background-position: 0 -202px
}

.HD #buttonShopHead {
    background-position: -593.5px -52.5px;
    width: 37px;
    height: 33px;
    top: 495px
}

#buttonShopBody {
    left: 344px;
    top: 493px;
    width: 37px;
    height: 31px;
    background-position: -35px -202px
}

.HD #buttonShopBody {
    background-position: -632px -52.5px;
    width: 37px;
    height: 33px;
    top: 495px
}

#buttonShopGlass {
    left: 407px;
    top: 495px;
    width: 33px;
    height: 31px;
    background-position: -72px -204px
}

.HD #buttonShopGlass {
    background-position: -670.5px -52.5px;
    width: 37px;
    height: 33px
}

#buttonShopFlag {
    left: 470px;
    top: 493px;
    width: 30px;
    height: 33px;
    background-position: -105px -200px
}

.HD #buttonShopFlag {
    background-position: -709px -52.5px;
    width: 37px;
    height: 33px;
    top: 495px
}

#buttonShopBackground {
    left: 285px;
    top: 551px;
    width: 57px;
    height: 26px;
    background-position: -253px -208px
}

.HD #buttonShopBackground {
    background-position: -594.5px -87px;
    width: 57px;
    height: 33px;
    top: 545px
}

#buttonShopForeground {
    left: 371px;
    top: 545px;
    width: 57px;
    height: 33px;
    background-position: -311px -201px
}

.HD #buttonShopForeground {
    background-position: -653px -87px;
    width: 57px;
    height: 33px;
    left: 374px
}

#buttonShopExItem {
    left: 456px;
    top: 549px;
    width: 39px;
    height: 28px;
    background-position: -213px -204px
}

.HD #buttonShopExItem {
    background-position: -653px -121.5px;
    width: 57px;
    height: 33px;
    top: 545px
}

#buttonShopPoints {
    left: 595px;
    top: 546px;
    width: 32px;
    height: 32px;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

#buttonShopPoints:hover {
    transform: scale(1.15);
}

.shopPointsBall {
    width: 24px;
    height: 24px;
    display: block;
    filter: drop-shadow(0 0 2px rgba(217, 20, 36, 0.8));
}

.shopPointsLabel {
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black;
}

.HD #buttonShopPoints {
    left: 605px;
    top: 541px;
    width: 38px;
    height: 38px;
    background: transparent !important;
}

.HD .shopPointsBall {
    width: 30px;
    height: 30px;
}

.HD .shopPointsLabel {
    font-size: 9.5px;
    bottom: -14px;
}

#buttonShopPrev {
    left: 636px;
    top: 496px;
    width: 37px;
    height: 28px;
    background-position: -135px -202px
}

.HD #buttonShopPrev {
    background-position: -568px -121.5px;
    width: 41px;
    height: 33px
}

#buttonShopNext {
    left: 714px;
    top: 496px;
    width: 37px;
    height: 28px;
    background-position: -172px -202px
}

.HD #buttonShopNext {
    background-position: -610.5px -121.5px;
    width: 41px;
    height: 33px
}

#buttonShopPets {
    position: absolute;
    left: 520px;
    top: 489px;
    width: 44px;
    height: 40px;
    background: url(/static/images/themes/petss.png) no-repeat center;
    background-size: contain;
    cursor: pointer;
    display: none !important;
}

.HD #buttonShopPets {
    left: 525px;
    top: 489px;
    width: 44px;
    height: 40px;
}

#buttonShopPets .shotBtnText {
    display: none;
}

#buttonShopSeason {
    position: absolute;
    left: 512px;
    top: 542px;
    width: 57px;
    height: 31px;
    text-align: center;
    background-image: none !important;
    cursor: pointer;
    z-index: 20;
}

#buttonShopEvent {
    position: absolute;
    left: 512px;
    top: 493px;
    width: 57px;
    height: 31px;
    text-align: center;
    background-image: none !important;
    cursor: pointer;
    z-index: 20;
}

#buttonShopEvent .shotBtnText {
    font-size: 9px;
    white-space: nowrap;
    max-width: 56px;
    overflow: hidden;
    text-overflow: clip;
}

#buttonShopVip {
    position: absolute;
    left: 732px;
    top: 542px;
    width: 57px;
    height: 31px;
    text-align: center;
    background-image: none !important;
    cursor: pointer;
    z-index: 20;
    overflow: visible;
}

.shotBtnText {
    position: absolute;
    font-size: 10px;
    white-space: nowrap;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 1px black, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black;
}

.shopSeasonIcon, .shopEventIcon {
    font-size: 22px;
    text-align: center;
    line-height: 26px;
}

.shopVipIcon {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    background: url(/static/images/insignia_vip.png) center / contain no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9));
}

.shop_item0 {
    left: 259px;
    top: 26px
}

.shop_item1 {
    left: 434px;
    top: 26px
}

.shop_item2 {
    left: 609px;
    top: 26px
}

.shop_item3 {
    left: 259px;
    top: 178px
}

.shop_item4 {
    left: 434px;
    top: 178px
}

.shop_item5 {
    left: 609px;
    top: 178px
}

.shop_item6 {
    left: 259px;
    top: 330px
}

.shop_item7 {
    left: 434px;
    top: 330px
}

.shop_item8 {
    left: 609px;
    top: 330px
}

.shop_item {
    position: absolute;
    width: 169px;
    height: 148px
}

.HD .shop_item {
    background-position: -341.5px -346px
}

.shop_item:active {
    margin-left: 2px;
    margin-top: 2px
}

.shop_item.selected {
    background-position: -169px 0
}

.HD .shop_item.selected {
    background-position: -511px -346px
}

.shop_item_icon {
    float: left
}

.shop_item_icon_hm,
.shop_item_icon_ha {
    width: 15px;
    height: 11px;
    background-position: 0 -149px
}

.shop_item_icon_bm,
.shop_item_icon_ba {
    width: 18px;
    height: 13px;
    background-position: -15px -149px
}

.shop_item_icon_gm,
.shop_item_icon_ga {
    width: 18px;
    height: 11px;
    background-position: -33px -149px
}

.shop_item_icon_fa {
    width: 16px;
    height: 13px;
    background-position: -51px -149px
}

.SD .shop_item_icon_fm {
    width: 16px;
    height: 13px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAANCAYAAACgu+4kAAAAB3RJTUUH4AwZBxoR7aOImgAAAAlwSFlzAAAnEAAAJxABlGlRGQAAAARnQU1BAACxjwv8YQUAAAFvSURBVHjajZJNSwJRFIbfMzOpabmoVm7ya2zRstbRDwghaN+mP9CqiNb2U2rbJxT5A4KgiKTCGVFLEDSodOHHOKd7h1CnSfKFyzkznPvwnnMuYUjMjGg8xR2aAoGhoYWS+UQYISISNUOKxZNcLBi4fGlIHGytibnkCgf5HWUz9yfIBbAo4MSD4xCIFZGFcXiSheWrYTa5ygH+QMW8p5EAhupEwyihpzWwEF1E5lSWRHAkQKy0ENbXhKMaqsYNeQAEe5CzinwhD7J90BNxAZLwEJa2zrCX7iCSWGZZ9gvQ63shW7RDXecrbxbBImfFEtHCRnoHn+YteYbIUPooZwasOn+l9a6/CuV8Fyq3xeW7/hzcQ0Rg4EX7gjVRR+8iAx834Rfn1Xz0bMIFaCkzP/dttK+2MW1XUCo8j3wHHgX1dZZSU5sy4L8jpQwD5Bqvc3AsjysXYNKuYz9bQdgujw1w9Tcf01m+xjfzYay+5Rq/AZdrqfDmdry1AAAAAElFTkSuQmCC) !important
}

.SD .shop_item_icon_ff {
    width: 16px;
    height: 13px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAANCAYAAACgu+4kAAAAB3RJTUUH4AwZBxoSdKrZIAAAAAlwSFlzAAAnEAAAJxABlGlRGQAAAARnQU1BAACxjwv8YQUAAAClSURBVHjaY2RAAv///2dIYZL/jyw2599DRgYcgJGRkYEFWQCkGaiBgWHPBRQxfAaxYBO8NX01wgW7NuI1CKsBd+/eBdPKyspww3AZhNUAfAaVBcYwqGWGwgxixGsAukEw0OXmD3bBXPRAJATWXjqOETMEDYBpwhUTLIQ04ksHGCCZUe4/CEBpBkIYBJgwTEFKRMQADAOQExExAMV/IKeT4m9QXgAAeWprQrDQiegAAAAASUVORK5CYII=) !important
}

.shop_item_icon_hf {
    width: 15px;
    height: 11px;
    background-position: -67px -149px
}

.shop_item_icon_bf {
    width: 18px;
    height: 13px;
    background-position: -82px -149px
}

.shop_item_icon_gf {
    width: 18px;
    height: 11px;
    background-position: -100px -149px
}

.shop_item_icon_1a {
    width: 16px;
    height: 12px;
    background-position: -153px -152px
}

.shop_item_icon_2a {
    width: 16px;
    height: 12px;
    background-position: -136px -152px
}

.shop_item_icon_xa {
    width: 16px;
    height: 16px;
    background-position: -119px -149px
}

.HD .shop_item_icon_hm {
    background-position: -878px -966px;
    width: 13px;
    height: 10px
}

.HD .shop_item_icon_hf {
    background-position: -891.5px -966px;
    width: 13px;
    height: 10px
}

.HD .shop_item_icon_ha {
    background-position: -905px -966px;
    width: 13px;
    height: 10px
}

.HD .shop_item_icon_bm {
    background-position: -918.5px -966px;
    width: 18px;
    height: 13px
}

.HD .shop_item_icon_bf {
    background-position: -937px -966px;
    width: 18px;
    height: 13px
}

.HD .shop_item_icon_ba {
    background-position: -955.5px -966px;
    width: 18px;
    height: 13px
}

.HD .shop_item_icon_gm {
    background-position: -915.5px -979.5px;
    width: 18px;
    height: 9px;
    margin-top: 1px
}

.HD .shop_item_icon_gf {
    background-position: -934px -979.5px;
    width: 18px;
    height: 9px;
    margin-top: 1px
}

.HD .shop_item_icon_ga {
    background-position: -952.5px -979.5px;
    width: 18px;
    height: 9px;
    margin-top: 1px
}

.HD .shop_item_icon_fm {
    background-position: -878px -976.5px;
    width: 12px;
    height: 13px
}

.HD .shop_item_icon_ff {
    background-position: -890.5px -976.5px;
    width: 12px;
    height: 13px
}

.HD .shop_item_icon_fa {
    background-position: -903px -976.5px;
    width: 12px;
    height: 13px
}

.HD .shop_item_icon_1a {
    background-position: -878px -990px;
    width: 16px;
    height: 12px
}

.HD .shop_item_icon_2a {
    background-position: -894.5px -990px;
    width: 16px;
    height: 12px
}

.HD .shop_item_icon_xa {
    background-position: -974px -966px;
    width: 16px;
    height: 16px
}

.shop_item_icon_pet,
.shop_item_icon_peta,
.shop_item_icon_petm,
.shop_item_icon_petf,
.shop_item_icon_7a,
.shop_item_icon_7m,
.shop_item_icon_7f,
.HD .shop_item_icon_pet,
.HD .shop_item_icon_peta,
.HD .shop_item_icon_petm,
.HD .shop_item_icon_petf,
.HD .shop_item_icon_7a,
.HD .shop_item_icon_7m,
.HD .shop_item_icon_7f {
    width: 14px;
    height: 14px;
    background: url(/static/images/themes/petss.png) no-repeat center center;
    background-size: contain;
    float: left;
    margin-right: 3px;
}

.shop_item_timer {
    position: absolute;
    left: 13px;
    top: 24px;
    color: black;
    z-index: 9;
    font-size: 15px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-shadow: -1px 0 2px white, 0 1px 2px white, 1px 0 2px white, 0 -1px 2px white
}

.shop_item_name {
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 10px;
    color: white
}

.shop_item_image {
    position: absolute;
    left: 85px;
    top: 94px
}

.shop_item_stat {
    position: absolute;
    z-index: 9
}

.shop_item_stat0 {
    left: 123px;
    top: 101px
}

.shop_item_stat1 {
    left: 89px;
    top: 101px
}

.shop_item_stat2 {
    left: 55px;
    top: 101px
}

.shop_item_stat3 {
    left: 21px;
    top: 101px
}

.shop_item_stat4 {
    left: 123px;
    top: 86px
}

.shop_item_stat5 {
    left: 89px;
    top: 86px
}

.shop_item_stat6 {
    left: 55px;
    top: 86px
}

.shop_item_stat7 {
    left: 21px;
    top: 86px
}

.stat_icon {
    position: absolute;
    width: 14px;
    height: 14px
}

.stat_icon_time {
    background-position: 0 -173px
}

.stat_icon_dig {
    background-position: -14px -173px
}

.stat_icon_atk {
    background-position: -28px -173px
}

.stat_icon_life {
    background-position: -42px -173px
}

.stat_icon_def {
    background-position: -56px -173px
}

.stat_icon_item {
    background-position: -70px -173px
}

.stat_icon_shld {
    background-position: -84px -173px
}

.stat_icon_pop {
    background-position: -98px -173px
}

.stat_icon_time- {
    background-position: 0 -187px
}

.stat_icon_dig- {
    background-position: -14px -187px
}

.stat_icon_atk- {
    background-position: -28px -187px
}

.stat_icon_life- {
    background-position: -42px -187px
}

.stat_icon_def- {
    background-position: -56px -187px
}

.stat_icon_item- {
    background-position: -70px -187px
}

.stat_icon_shld- {
    background-position: -84px -187px
}

.stat_icon_pop- {
    background-position: -98px -187px
}

.HD .stat_icon_time {
    background-position: -878px -935px
}

.HD .stat_icon_dig {
    background-position: -892.5px -935px
}

.HD .stat_icon_atk {
    background-position: -907px -935px
}

.HD .stat_icon_life {
    background-position: -921.5px -935px
}

.HD .stat_icon_def {
    background-position: -936px -935px
}

.HD .stat_icon_item {
    background-position: -950.5px -935px
}

.HD .stat_icon_shld {
    background-position: -965px -935px
}

.HD .stat_icon_pop {
    background-position: -979.5px -935px
}

.HD .stat_icon_time- {
    background-position: -878px -950.5px
}

.HD .stat_icon_dig- {
    background-position: -892.5px -950.5px
}

.HD .stat_icon_atk- {
    background-position: -907px -950.5px
}

.HD .stat_icon_life- {
    background-position: -921.5px -950.5px
}

.HD .stat_icon_def- {
    background-position: -936px -950.5px
}

.HD .stat_icon_item- {
    background-position: -950.5px -950.5px
}

.HD .stat_icon_shld- {
    background-position: -965px -950.5px
}

.HD .stat_icon_pop- {
    background-position: -979.5px -950.5px
}

.stat_digit1 {
    position: absolute;
    left: 15px;
    top: 1px
}

.stat_digit2 {
    position: absolute;
    left: 21px;
    top: 1px
}

.digit0 {
    position: absolute
}

.digit1 {
    position: absolute;
    left: 6px
}

.digit2 {
    position: absolute;
    left: 12px
}

.digit3 {
    position: absolute;
    left: 18px
}

.stat_font {
    width: 6px;
    height: 11px
}

.stat_font0 {
    background-position: 0 -162px
}

.stat_font1 {
    background-position: -6px -162px
}

.stat_font2 {
    background-position: -12px -162px
}

.stat_font3 {
    background-position: -18px -162px
}

.stat_font4 {
    background-position: -24px -162px
}

.stat_font5 {
    background-position: -30px -162px
}

.stat_font6 {
    background-position: -36px -162px
}

.stat_font7 {
    background-position: -42px -162px
}

.stat_font8 {
    background-position: -48px -162px
}

.stat_font9 {
    background-position: -54px -162px
}

.HD .stat_font0 {
    background-position: -911px -991px
}

.HD .stat_font1 {
    background-position: -917.5px -991px
}

.HD .stat_font2 {
    background-position: -924px -991px
}

.HD .stat_font3 {
    background-position: -930.5px -991px
}

.HD .stat_font4 {
    background-position: -937px -991px
}

.HD .stat_font5 {
    background-position: -943.5px -991px
}

.HD .stat_font6 {
    background-position: -950px -991px
}

.HD .stat_font7 {
    background-position: -956.5px -991px
}

.HD .stat_font8 {
    background-position: -963px -991px
}

.HD .stat_font9 {
    background-position: -969.5px -991px
}

.ShopSetSave {
    position: absolute;
    font-size: 10px;
    left: 45px;
    top: 18px
}

.ShopSetInfo {
    position: absolute;
    font-size: 10px;
    left: 95px;
    top: 18px
}

.ShopSetLoad {
    position: absolute;
    font-size: 10px;
    left: 150px;
    top: 18px
}

.ShopSetLoad.Disabled,
.ShopSetInfo.Disabled {
    display: none;
    opacity: .2
}

.shop_item_cash {
    position: absolute;
    top: 117px;
    right: 16px;
    width: 150px;
    height: 12px;
    color: #8bc2ee;
    text-align: right;
    font-size: 11px;
    font-weight: bold
}

.shop_item_gold {
    position: absolute;
    top: 131px;
    right: 16px;
    width: 150px;
    height: 12px;
    color: #ffd273;
    text-align: right;
    font-size: 11px;
    font-weight: bold
}

#shop_player {
    position: absolute;
    left: 117px;
    top: 97px
}

#shop_my_stats {
    position: absolute;
    left: 27px;
    top: 24px
}

#shop_my_items_container {
    position: absolute;
    left: 11px;
    top: 227px;
    width: 219px;
    height: 248px
}

#shop_my_items_container .viewport {
    width: 204px;
    height: 248px;
    overflow: hidden;
    position: relative
}

#shop_my_items_container .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0
}

#shop_my_items_container .scrollbar {
    position: relative;
    float: right;
    width: 13px;
    padding-top: 11px
}

.DragonScroll .viewport::-webkit-scrollbar-button:vertical:increment {
    height: 10px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKAQMAAABVIEaHAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACBJREFUCNdjaOBg+P8DRO5/wTD/BEN/B0M7B0MTB0QcAKO0CsWeIfXOAAAAAElFTkSuQmCC)
}

/*# sourceMappingURL=/jquery-3.6.3.min.map*/
.DragonScroll .viewport::-webkit-scrollbar-button:vertical:decrement {
    height: 10px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKAQMAAABVIEaHAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACFJREFUCNdj+P+DoYGDoYmDoZ2Dob+DYf4Jhv0vgCIQcQChpArF4r18lgAAAABJRU5ErkJggg==)
}

.DragonScroll .viewport::-webkit-scrollbar-button:vertical:increment:hover {
    background-color: #9098b5
}

.DragonScroll .viewport::-webkit-scrollbar-button:vertical:decrement:hover {
    background-color: #9098b5
}

.DragonScroll .viewport::-webkit-scrollbar-thumb {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAABAQMAAAA/57ZEAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjsH8AAAFhASARw1fIAAAAAElFTkSuQmCC)
}

.DragonScroll .viewport::-webkit-scrollbar-thumb:hover {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAABAQMAAAA/57ZEAAAABlBMVEUAAAAgMEA0sIhMAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjsH8AAAFhASARw1fIAAAAAElFTkSuQmCC)
}

.DragonScroll .viewport::-webkit-scrollbar-track {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAABAQMAAAA/57ZEAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjaOAAAAELAIku6lhPAAAAAElFTkSuQmCC)
}

.DragonScroll .viewport::-webkit-scrollbar-track:hover {
    background-color: #9098b5
}

.DragonScroll .viewport::-webkit-scrollbar {
    width: 13px
}

#shop_my_items_number {
    position: absolute;
    left: 210px;
    top: 212px;
    width: 30px;
    height: 15px
}

.shop_my_item {
    position: relative;
    width: 204px;
    height: 31px;
    background-position: -204px -327px;
    overflow: hidden
}

.shop_my_item:hover {
    filter: brightness(1.2)
}

.shop_my_item.empty {
    filter: brightness(0.8)
}

.shop_my_item.selected {
    background-position: -204px -358px
}

.HD .shop_my_item {
    background-position: -751px -815px
}

.HD .shop_my_item.selected {
    background-position: -751px -846.5px
}

.shop_my_item_new {
    filter: sepia(0.5)
}

.shop_my_item_cash {
    position: absolute;
    left: 159px;
    top: 2px;
    width: 36px;
    height: 27px;
    background-position: -37px -333px
}

.shop_my_item_cash.selected {
    background-position: -37px -361px
}

.HD .shop_my_item_cash {
    background-position: -915.5px -878px
}

.HD .shop_my_item_cash.selected {
    background-position: -915.5px -906.5px
}

.shop_my_item_gift {
    position: absolute;
    left: 159px;
    top: 2px;
    width: 36px;
    height: 27px;
    background-position: 0 -333px
}

.shop_my_item_gift.selected {
    background-position: 0 -361px
}

.HD .shop_my_item_gift {
    background-position: -878px -878px
}

.HD .shop_my_item_gift.selected {
    background-position: -878px -906.5px
}

.shop_my_item_icon {
    position: absolute;
    left: 15px;
    top: 4px
}

.shop_my_item_name {
    position: absolute;
    left: 36px;
    top: 4px;
    font-size: 10px;
    color: #295a9c
}

.shop_my_item.selected .shop_my_item_name {
    color: white
}

.shopSetNameInput {
    position: absolute;
    left: 36px;
    top: 4px;
    font-size: 10px;
    width: 126px
}

.shopSetNameOK {
    position: absolute;
    left: 175px;
    top: 5px;
    font-size: 16px
}

.shopSetNameCancel {
    position: absolute;
    left: 9px;
    top: 5px;
    font-size: 16px
}

.shop_my_item_equip.equipped {
    position: absolute;
    left: -1px;
    top: 7px;
    width: 10px;
    height: 17px;
    background-position: 0 -233px
}

.HD .shop_my_item_equip.equipped {
    background-position: -572.5px -52.5px
}

.shop_my_item_stat {
    position: absolute
}

.shop_my_item_stat0 {
    left: 172px;
    top: 15px
}

.shop_my_item_stat1 {
    left: 142px;
    top: 15px
}

.shop_my_item_stat2 {
    left: 112px;
    top: 15px
}

.shop_my_item_stat3 {
    left: 82px;
    top: 15px
}

.shop_my_item_stat4 {
    left: 52px;
    top: 15px
}

.shop_my_item_stat5 {
    left: 22px;
    top: 15px
}

.shop_my_item_stat6 {
    left: 172px;
    top: 1px
}

.shop_my_item_stat7 {
    left: 142px;
    top: 1px
}

.SortBy {
    filter: drop-shadow(0 0 5px yellow)
}

#shop_my_cash {
    position: absolute;
    right: 612px;
    top: 143px;
    width: 150px;
    height: 12px;
    color: #8bc2ee;
    text-align: right;
    font-size: 10px;
    font-weight: bold
}

#shop_my_gold {
    position: absolute;
    right: 612px;
    top: 154px;
    width: 150px;
    height: 12px;
    color: #ffd273;
    text-align: right;
    font-size: 10px;
    font-weight: bold
}

#shop_my_points {
    position: absolute;
    right: 612px;
    top: 165px;
    width: 150px;
    height: 12px;
    text-align: right;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap
}

#shop_security_lock {
    position: absolute;
    right: 586px;
    top: 145px;
    font-size: 20px
}

.SecurityLock.Unlocked {
    opacity: .2
}

.SecurityLock.Unset {
    opacity: .1
}

#shop_buy_dialog {
    position: absolute;
    left: 243px;
    top: 127px;
    width: 386px;
    height: 353px;
    background-position: 0 -389px;
    background-color: transparent;
    border: 0;
    display: none;
    z-index: 22;
    filter: drop-shadow(2px 4px 6px black)
}

.HD #shop_buy_dialog {
    background-position: -491.5px -878px
}

#shop_buy_dialog .shop_item_icon {
    left: 156px;
    top: 33px
}

#shop_buy_dialog .shop_item_name {
    left: 177px;
    top: 36px
}

#shop_buy_dialog .shop_item_image {
    left: 235px;
    top: 138px
}

.buy_option {
    position: absolute;
    text-align: center;
    font-size: 11px;
    font-weight: bold
}

#buy_cash_week {
    left: 85px;
    top: 235px;
    width: 93px;
    color: #8bc2ee
}

#buy_cash_month {
    left: 181px;
    top: 235px;
    width: 93px;
    color: #8bc2ee
}

#buy_cash_perm {
    left: 277px;
    top: 235px;
    width: 93px;
    color: #8bc2ee
}

#buy_gold_week {
    left: 85px;
    top: 265px;
    width: 93px;
    color: #ffd273
}

#buy_gold_month {
    left: 181px;
    top: 265px;
    width: 93px;
    color: #ffd273
}

#buy_gold_perm {
    left: 277px;
    top: 265px;
    width: 93px;
    color: #ffd273
}

#buy_cancel_btn {
    position: absolute;
    left: 332px;
    top: 324px;
    width: 40px;
    height: 23px;
    background-position: -112px -304px
}

.HD #buy_cancel_btn {
    background-position: -553px -94px;
    height: 26px
}

.draggable {
    position: absolute
}

#select_bot_div {
    position: absolute;
    left: 220px;
    width: 340px;
    top: 204px;
    background: #001839 url(/static/images/bg_blue.jpg);
    opacity: .9;
    padding: 10px;
    display: none;
    z-index: 30;
    display: none;
    border: solid 2px black;
    border-radius: 3px
}

.bs_line {
    height: 15px;
    padding: 5px
}

.bs_line:hover {
    background: #634910
}

.bs_rank {
    position: absolute;
    left: 10px
}

.bs_name {
    position: absolute;
    left: 40px
}

.bs_gp {
    position: absolute;
    left: 150px;
    color: yellow
}

.bs_atk_icon {
    position: absolute;
    left: 200px
}

.bs_atk {
    position: absolute;
    left: 215px
}

.bs_def_icon {
    position: absolute;
    left: 235px
}

.bs_def {
    position: absolute;
    left: 250px
}

.bs_life_icon {
    position: absolute;
    left: 270px
}

.bs_life {
    position: absolute;
    left: 285px
}

.bs_dig_icon {
    position: absolute;
    left: 305px
}

.bs_dig {
    position: absolute;
    left: 320px
}

.bs_locked {
    position: absolute;
    left: 200px
}

#add_bot_button {
    position: absolute;
    left: 417px;
    width: 82px;
    height: 19px;
    background-position: -83px -279px
}

.HD #add_bot_button {
    background-position: -834px -776px
}

.vortex {
    position: absolute;
    background: url(/static/images/vortex.png) no-repeat;
    width: 200px;
    height: 200px
}

#vortex0 {
    left: 5px
}

#vortex1 {
    left: 356px
}

#vortex2 {
    left: 5px
}

#vortex3 {
    left: 356px
}

#vortex4 {
    left: 5px
}

#vortex5 {
    left: 356px
}

#vortex6 {
    left: 5px
}

#vortex7 {
    left: 356px
}

#dialog_graphic {
    position: absolute;
    left: 260px;
    top: 110px
}

#dialogCreateMessage {
    position: absolute;
    left: 104px;
    top: 161px;
    color: black;
    font-size: 12px;
    width: 200px
}

#dialogCreateLocked {
    position: absolute;
    left: 231px;
    top: 129px;
    width: 20px;
    height: 21px;
    background-position: -220px -606px;
    display: none
}

#RoomOptionsModeLocked {
    position: absolute;
    left: 147px;
    top: 57px;
    width: 20px;
    height: 21px;
    background-position: -220px -606px;
    display: none
}

.imgLock {
    width: 20px;
    height: 21px;
    background-position: -220px -606px
}

.HD .imgLock,
.HD #dialogCreateLocked,
.HD #RoomOptionsModeLocked {
    background-position: -660px -324.5px
}

#RoomOptionsMessage {
    position: absolute;
    left: 160px;
    top: 80px;
    color: black;
    font-size: 11px;
    width: 200px
}

.event_button_text {
    position: absolute;
    bottom: 8px;
    width: 100%
}

#buttonOptions {
    position: absolute;
    left: 664px;
    top: 542px;
    width: 55px;
    height: 51px;
    background-position: 0 -303px
}

#buttonOptionsRoom {
    position: absolute;
    left: 674px;
    top: 544px;
    width: 55px;
    height: 51px;
    background-position: 0 -303px
}

.HD #buttonOptions,
.HD #buttonOptionsRoom {
    background-position: -571.5px 0
}

#buttonChannels {
    position: absolute;
    left: 733px;
    top: 542px;
    width: 55px;
    height: 51px;
    background-position: -112px -303px
}

.HD #buttonChannels {
    background-position: -627px 0
}

#OptionsDialog {
    position: absolute;
    left: 241px;
    top: 221px;
    width: 317px;
    height: 247px;
    background: #314a5a;
    z-index: 100;
    display: none;
    font-size: 10px;
    color: #cecece;
    border: 1px solid black;
    box-shadow: 5px 5px 30px 10px #000, inset 0 2px 1px #7394b5;
    transform-origin: 0 0
}

.OptionsDialogTitle {
    position: absolute;
    left: 3px;
    top: 4px;
    width: 76px;
    height: 19px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAATCAMAAAANkRs7AAAAllBMVEUAAAAxMTH////GxsbOzs69vb0pQlopQlK1tbXv7++cnJyUlJRjY2OlpaVSWlhSUlJKUlIxQkopOUqMjIpzc3Otra2EhIRaWmMxQloxQlJKSkpCSko8Qko8QkIpOULn5+fe3t7W1tLGxs6YmJB7gIBra2taWlY5OTGlraVrc3NjY2taY2NKUlpCSlIpQkoxOUopOTkpKSHDpOH8AAAAAXRSTlMAQObYZgAAAT5JREFUOMutVNeOhDAMDNgh9N6Wsr1cL///c0fYSKFcdHuCebBkjz04kwgiUdbua0PWwSY8WNZTtIoWO1s7hP1pFbUtWpQC9RkrF2sZxQ4AISw/6mi5mGsdgdKX7bMZLlQyjDi3aHBLIAPwB4zW4Z92vRVhuj/dWq1HMNTSdZUcr8849u4B4iH/dvloN/w5GOBSukKsq0855lIEwLw687ExphWi5u5+NCbSo+kGic1Zx7v2+/EgoiYSsYnIJTfoJj4A0KtrO17HsDg2xNHmUYjxRNFBAgpopo7jZTyTXqijNtlURhIAgmk6HvbHfERMXMtvYiHN0osNgI6wdNo6P6zSAhIV7VdlI6BvDF0ficl6X5G5Nu4mhBnxhfvWEDK5aRGnD0H2ScgHHCV2kvobosT96w/+FuuqjZmaFyv+jR+G/Q6sEDWEjgAAAABJRU5ErkJggg==) no-repeat
}

#OptionsBG {
    position: absolute;
    top: 57px;
    left: 14px
}

.OptionTitle1 {
    color: #ffc65a
}

.GOption {
    width: 100px;
    white-space: nowrap;
    display: inline-block
}

.GOption2 {
    width: 70px;
    white-space: nowrap;
    display: inline-block
}

#OptionsOK {
    position: absolute;
    left: 175px;
    top: 216px;
    width: 116px;
    height: 17px;
    background-position: -117px -1262px
}

.HD #OptionsOK {
    background-position: -503px -292.5px
}

#OptionsLeave {
    position: absolute;
    left: 27px;
    top: 216px;
    width: 116px;
    height: 17px;
    background-position: 0 -1262px
}

.HD #OptionsLeave {
    background-position: -503px -310px
}

.RadioOn {
    width: 10px;
    height: 10px;
    background-position: -234px -1262px
}

.HD .RadioOn {
    background-position: -699px -156px
}

.RadioOff {
    width: 10px;
    height: 10px;
    background-position: -245px -1262px
}

.HD .RadioOff {
    background-position: -699px -166.5px
}

#OptionsLangEN {
    position: absolute;
    left: 95px;
    top: 117px
}

#OptionsLangES {
    position: absolute;
    left: 160px;
    top: 117px
}

#OptionsText1 {
    position: absolute;
    left: 14px;
    top: 29px
}

#OptionsDrag {
    position: absolute;
    left: 99px;
    top: 25px;
    width: 114px;
    height: 27px;
    cursor: pointer
}

#OptionsShootingModeDrag {
    position: absolute;
    left: 34px;
    top: 0
}

#OptionsText2 {
    position: absolute;
    left: 48px;
    top: 0
}

#OptionsText4 {
    position: absolute;
    left: 0;
    top: 15px;
    color: #9df
}

#OptionsSlice {
    position: absolute;
    left: 226px;
    top: 25px;
    width: 91px;
    height: 27px;
    cursor: pointer
}

#OptionsShootingModeSlice {
    position: absolute;
    left: 9px;
    top: 0
}

#OptionsText3 {
    position: absolute;
    left: 24px;
    top: 0
}

#OptionsText5 {
    position: absolute;
    left: 0;
    top: 15px;
    color: #9df
}

#OptionsTextEN {
    position: absolute;
    left: 110px;
    top: 117px;
    cursor: pointer;
    color: white
}

#OptionsTextES {
    position: absolute;
    left: 175px;
    top: 117px;
    cursor: pointer;
    color: white
}

#OptionsLineTheme {
    white-space: nowrap;
    margin: 11px 0;
    height: 15px
}

#buttonAllBuddyList1 {
    position: absolute;
    left: 582px;
    top: 275px
}

.buttonAllBuddyList1 {
    width: 73px;
    height: 30px;
    background-position: 0 -1286px
}

.buttonAllBuddyList1.BuddyList {
    background-position: 0 -1317px;
    width: 66px
}

.buttonAllBuddyList1.Guild {
    background-position: 0 -1814px;
    width: 69px
}

.HD .buttonAllBuddyList1 {
    background-position: -785px 0;
    width: 64.5px
}

.HD .buttonAllBuddyList1.BuddyList {
    background-position: -785px -30.5px;
    width: 64.5px
}

.HD .buttonAllBuddyList1.Guild {
    background-position: -785px -61px;
    width: 64.5px
}

#buttonAllBuddyList2 {
    position: absolute;
    left: 655px;
    top: 275px
}

#buttonAllBuddyList2.BuddyList {
    left: 648px
}

#buttonAllBuddyList2.room_item_buddy_tab2.Guild {
    left: 653px
}

#buttonAllBuddyList2.buttonAllBuddyList2.Guild {
    left: 650px
}

.HD #buttonAllBuddyList2,
.HD #buttonAllBuddyList2.BuddyList,
.HD #buttonAllBuddyList2.buttonAllBuddyList2.Guild,
.HD #room_item_buddy_tab2,
.HD #room_item_buddy_tab2.BuddyList,
.HD #room_item_buddy_tab2.Guild,
.HD #buttonAllBuddyList2.room_item_buddy_tab2.Guild {
    left: 646px
}

.buttonAllBuddyList2 {
    width: 70px;
    height: 30px;
    background-position: -73px -1286px
}

.buttonAllBuddyList2.BuddyList {
    background-position: -66px -1317px;
    width: 78px
}

.buttonAllBuddyList2.Guild {
    background-position: -68px -1814px;
    width: 76px
}

.HD .buttonAllBuddyList2,
.HD .room_item_buddy_tab2 {
    background-position: -849px 0;
    width: 82px
}

.HD .buttonAllBuddyList2.BuddyList,
.HD .room_item_buddy_tab2.BuddyList {
    background-position: -849px -30.5px;
    width: 82px
}

.HD .buttonAllBuddyList2.Guild,
.HD .room_item_buddy_tab2.Guild {
    background-position: -849px -61px;
    width: 82px
}

#buttonAllBuddyList3 {
    position: absolute;
    left: 725px;
    top: 275px
}

.HD #buttonAllBuddyList3,
.HD #room_item_buddy_tab3 {
    left: 727px
}

.buttonAllBuddyList3 {
    width: 72px;
    height: 30px;
    background-position: -143px -1286px
}

.buttonAllBuddyList3.BuddyList {
    background-position: -143px -1317px
}

.buttonAllBuddyList3.Guild {
    background-position: -143px -1814px
}

.HD .buttonAllBuddyList3,
.HD .room_item_buddy_tab3 {
    background-position: -930px 0;
    width: 70px
}

.HD .buttonAllBuddyList3.BuddyList,
.HD .room_item_buddy_tab3.BuddyList {
    background-position: -930px -30.5px;
    width: 70px
}

.HD .buttonAllBuddyList3.Guild,
.HD .room_item_buddy_tab3.Guild {
    background-position: -930px -61px;
    width: 70px
}

#room_item_buddy_tab1 {
    position: absolute;
    left: 582px;
    top: 218px
}

.room_item_buddy_tab1 {
    background-position: -234px 0;
    width: 74px;
    height: 30px
}

.room_item_buddy_tab1.BuddyList {
    background-position: -234px -31px;
    width: 66px
}

.room_item_buddy_tab1.Guild {
    background-position: -234px -62px;
    width: 72px
}

.HD .room_item_buddy_tab1 {
    background-position: -785px -91.5px;
    width: 64.5px
}

.HD .room_item_buddy_tab1.BuddyList {
    background-position: -785px -122px;
    width: 64.5px
}

.HD .room_item_buddy_tab1.Guild {
    background-position: -785px -152.5px;
    width: 64.5px
}

#room_item_buddy_tab2 {
    position: absolute;
    left: 655px;
    top: 218px
}

#room_item_buddy_tab2.BuddyList {
    left: 648px
}

#room_item_buddy_tab2.Guild {
    left: 653px
}

.room_item_buddy_tab2 {
    width: 71px;
    height: 30px;
    background-position: -307px 0
}

.room_item_buddy_tab2.BuddyList {
    background-position: -300px -31px;
    width: 78px
}

.room_item_buddy_tab2.Guild {
    background-position: -305px -62px;
    width: 73px
}

#room_item_buddy_tab3 {
    position: absolute;
    left: 725px;
    top: 218px
}

.room_item_buddy_tab3 {
    width: 72px;
    height: 30px;
    background-position: -377px 0
}

.room_item_buddy_tab3.BuddyList {
    background-position: -377px -31px
}

.room_item_buddy_tab3.Guild {
    background-position: -377px -62px
}

#playerInfoDialog {
    position: absolute;
    left: 37px;
    top: 143px;
    width: 491px;
    height: 327px;
    background-position: 0 -319px;
    display: none;
    z-index: 60
}

.HD #playerInfoDialog {
    background-position: 0 -904px
}

#infoLoading {
    position: absolute;
    left: 200px;
    top: 11px;
    font-size: 30px;
    font-weight: 800;
    color: orange
}

#infoAddBuddy {
    position: absolute;
    left: 229px;
    top: 285px;
    width: 22px;
    height: 25px;
    background-position: -216px -1286px
}

.HD #infoAddBuddy {
    background-position: -495.5px -72.5px
}

#infoGuildInvite {
    position: absolute;
    left: 110px;
    top: 275px;
    width: 55px;
    height: 44px;
    background-position: -193px -1476px
}

.HD #infoGuildInvite {
    background-position: -439px -63.5px
}

#infoChat {
    position: absolute;
    left: 329px;
    top: 282px;
    width: 28px;
    height: 31px;
    background-position: -304px -215px
}

.HD #infoChat {
    background-position: -594.5px -156px
}

#infoClose {
    position: absolute;
    left: 429px;
    top: 282px;
    width: 29px;
    height: 31px;
    background-position: -334px -215px
}

.HD #infoClose {
    background-position: -624px -156px
}

#infoProfile {
    position: absolute;
    left: 172px;
    top: 97px;
    color: inherit
}

#LoginSubmit {
    height: 20px;
    width: 45px;
    text-align: center
}

#infoName {
    position: absolute;
    left: 75px;
    top: 200px;
    width: 85px;
    height: 54px;
    overflow: hidden;
    padding-left: 1px
}

#infoRanking {
    position: absolute;
    left: 250px;
    top: 135px
}

#infoGender {
    position: absolute;
    left: 250px;
    top: 154px
}

#infoGP {
    position: absolute;
    left: 250px;
    top: 173px
}

#infoWinRate {
    position: absolute;
    left: 250px;
    top: 192px
}

#infoDamage {
    position: absolute;
    left: 400px;
    top: 173px
}

#infoWin {
    position: absolute;
    left: 250px;
    top: 211px
}

#infoLose {
    position: absolute;
    left: 250px;
    top: 230px
}

#infoGuild {
    position: absolute;
    left: 400px;
    top: 136px
}

#infoGuildJob {
    position: absolute;
    left: 400px;
    top: 155px
}

#infoRank {
    position: absolute;
    left: 45px;
    top: 200px
}

#infoImageDiv {
    position: absolute;
    left: 34px;
    top: 78px;
    width: 124px;
    height: 106px;
    box-shadow: 0 0 5px 5px #6badde;
    cursor: pointer;
    overflow: hidden
}

#infoKey1 {
    position: absolute;
    left: 176px;
    top: 135px
}

#infoKey2 {
    position: absolute;
    left: 176px;
    top: 154px
}

#infoKey3 {
    position: absolute;
    left: 176px;
    top: 173px
}

#infoKey4 {
    position: absolute;
    left: 176px;
    top: 194px;
    font-size: 10px
}

#infoKey5 {
    position: absolute;
    left: 322px;
    top: 175px;
    font-size: 9px
}

#infoKey6 {
    position: absolute;
    left: 176px;
    top: 212px
}

#infoKey7 {
    position: absolute;
    left: 176px;
    top: 231px
}

#infoKey8 {
    position: absolute;
    left: 322px;
    top: 136px
}

#infoKey9 {
    position: absolute;
    left: 322px;
    top: 154px
}

.ChatDialog {
    position: absolute;
    left: 212px;
    top: 138px;
    width: 375px;
    height: 324px;
    background-position: 0 -647px;
    z-index: 55
}

.HD .ChatDialog {
    background-position: 0 -579.5px
}

.chatDialogName {
    position: absolute;
    left: 50px;
    top: 10px
}

.chatDialogClose {
    position: absolute;
    left: 325px;
    top: 282px;
    width: 29px;
    height: 31px;
    background-position: -334px -215px
}

.HD .chatDialogClose {
    background-position: -624px -156px
}

.chatDialogEsc {
    position: absolute;
    left: 325px;
    top: 314px;
    font-size: 9px;
    color: #faa
}

.chatDialogDelete {
    position: absolute;
    left: 26px;
    top: 288px;
    width: 32px;
    height: 25px;
    background-position: -239px -1286px
}

.HD .chatDialogDelete {
    background-position: -519px -72.5px
}

.chatDialogGuildKick {
    position: absolute;
    left: 118px;
    top: 280px;
    width: 46px;
    height: 36px;
    background-position: -198px -1593px
}

.HD .chatDialogGuildKick {
    background-position: -504px -99px
}

.chatDialogGuildInvite {
    position: absolute;
    left: 115px;
    top: 276px;
    width: 55px;
    height: 44px;
    background-position: -193px -1476px
}

.HD .chatDialogGuildInvite {
    background-position: -439px -63.5px
}

.chatDialogInput {
    position: absolute;
    left: 9px;
    top: 248px;
    width: 341px;
    color: #acf2f6;
    background-color: transparent;
    border: 0;
    font-size: 13px;
    padding: 6px;
    height: 16px
}

.chatDialogInput:focus {
    border: orange solid 1px;
    background-color: #001839
}

.chatDialogText {
    position: absolute;
    left: 15px;
    top: 44px;
    width: 347px;
    height: 195px;
    font-size: 13px;
    color: #acf2f6
}

.chatDialogText .viewport {
    width: 317px;
    height: 198px;
    overflow: hidden;
    position: relative
}

.chatDialogText .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    word-wrap: break-word;
    width: 330px
}

.chatDialogText .scrollbar {
    background-color: transparent;
    position: relative;
    float: right;
    width: 15px;
    padding-top: 11px
}

#dialog_room_options {
    position: absolute;
    left: 94px;
    top: 111px;
    width: 375px;
    height: 383px;
    background-position: 0 -972px;
    z-index: 31
}

.HD #dialog_room_options {
    background-position: -375.5px -494.5px
}

@media(max-height: 590px) {
    #dialog_room_options {
        transform: scale(1.25)
    }
}

@media(max-height: 500px) {
    #dialog_room_options {
        transform: scale(1.5)
    }
}

#RoomOptionsModePrev {
    position: absolute;
    left: 88px;
    top: 63px
}

#RoomOptionsModeNext {
    position: absolute;
    left: 212px;
    top: 63px
}

#RoomOptionsMode {
    position: absolute;
    left: 105px;
    top: 61.5px;
    width: 100px;
    text-align: center
}

#RoomOptionsModeIcon {
    position: absolute;
    left: 233px;
    top: 44px
}

#RoomOptionsNumPlayersPrev {
    position: absolute;
    left: 88px;
    top: 108px
}

#RoomOptionsNumPlayersNext {
    position: absolute;
    left: 212px;
    top: 108px
}

#RoomOptionsPlayers {
    position: absolute;
    left: 97px;
    top: 106px;
    width: 115px;
    color: #ff6;
    text-align: center
}

#RoomOptionsMapPrev {
    position: absolute;
    left: 88px;
    top: 153px
}

#RoomOptionsMapNext {
    position: absolute;
    left: 212px;
    top: 153px
}

#RoomOptionsMapName {
    position: absolute;
    left: 100px;
    top: 151.5px;
    color: #6f9;
    width: 110px;
    text-align: center
}

#RoomOptionsMapImage {
    position: absolute;
    left: 47px;
    top: 171px;
    width: 213px;
    height: 49px
}

#RoomOptionsMapLock {
    position: absolute;
    left: 47px;
    top: 171px;
    width: 213px;
    height: 49px;
    background: rgba(128, 128, 128, 0.5)
}

#RoomOptionsMapLockImg {
    position: absolute;
    left: 100px;
    top: 13px
}

#RoomOptionsMapLockBtn {
    position: absolute;
    left: 15px;
    top: 14px;
    font-size: 9px;
    padding: 0 5px
}

#RoomOptionsAvatars {
    position: absolute;
    left: 100px;
    top: 261.5px;
    width: 110px;
    text-align: center
}

#RoomOptionsAvatarsGP {
    position: absolute;
    left: 135px;
    top: 238px;
    color: #ff0
}

#RoomOptionsAvatarsPrev {
    position: absolute;
    left: 88px;
    top: 263px
}

#RoomOptionsAvatarsNext {
    position: absolute;
    left: 212px;
    top: 263px
}

#RoomOptionsWind {
    position: absolute;
    left: 100px;
    top: 309.5px;
    width: 110px;
    text-align: center
}

#RoomOptionsWindGP {
    position: absolute;
    left: 135px;
    top: 287px;
    color: #ff0
}

#RoomOptionsWindPrev {
    position: absolute;
    left: 88px;
    top: 311px
}

#RoomOptionsWindNext {
    position: absolute;
    left: 212px;
    top: 311px
}

#RoomOptionsCancel {
    position: absolute;
    left: -30px;
    bottom: -6px
}

#RoomOptionsOK {
    position: absolute;
    right: -23px;
    bottom: -6px
}

#RoomOptionsTele {
    position: absolute;
    left: 284px;
    top: 237px
}

#RoomOptionsTeleLock {
    position: absolute;
    left: 284px;
    top: 237px
}

#RoomOptionsTeleRank {
    position: absolute;
    left: 282px;
    top: 254px
}

#RoomOptionsS1 {
    position: absolute;
    left: 238px;
    top: 283px
}

#RoomOptionsS1Lock {
    position: absolute;
    left: 238px;
    top: 285px
}

#RoomOptionsS1Rank {
    position: absolute;
    left: 238px;
    top: 302px
}

#RoomOptionsDualP {
    position: absolute;
    left: 284px;
    top: 285px
}

#RoomOptionsDualPLock {
    position: absolute;
    left: 284px;
    top: 285px
}

#RoomOptionsDualPRank {
    position: absolute;
    left: 282px;
    top: 302px
}

#RoomOptionsWindLock {
    position: absolute;
    left: 174px;
    top: 298px
}

#RoomOptionsWindRank {
    position: absolute;
    left: 172px;
    top: 316px
}

#RoomOptionsRandomTeamsText {
    position: absolute;
    left: 255px;
    top: 90px;
    width: 110px;
    text-align: center
}

#RoomOptionsRandomTeamsValue {
    position: absolute;
    left: 255px;
    top: 106px;
    width: 110px;
    text-align: center;
    color: red
}

#RoomOptionsRandomTeamsLock {
    position: absolute;
    left: 287px;
    top: 114px
}

#RoomOptionsRandomTeamsRank {
    position: absolute;
    left: 304px;
    top: 118px
}

#RoomOptionsRandomTeamsPrev {
    position: absolute;
    left: 267px;
    top: 108px
}

#RoomOptionsRandomTeamsNext {
    position: absolute;
    left: 341px;
    top: 108px
}

#RoomOptionsTurnTimeText {
    position: absolute;
    left: 255px;
    top: 135px;
    width: 110px;
    text-align: center
}

#RoomOptionsTurnTimeValue {
    position: absolute;
    left: 255px;
    top: 151.5px;
    width: 110px;
    text-align: center;
    color: #6f9
}

#RoomOptionsTurnTimeLock {
    position: absolute;
    left: 287px;
    top: 161px
}

#RoomOptionsTurnTimeRank {
    position: absolute;
    left: 304px;
    top: 165px
}

#RoomOptionsTurnTimePrev {
    position: absolute;
    left: 267px;
    top: 153px
}

#RoomOptionsTurnTimeNext {
    position: absolute;
    left: 341px;
    top: 153px
}

.grayText {
    color: #aaa !important
}

#PlayCustomMap {
    position: absolute;
    left: 269px;
    top: 171px;
    font-size: 9px;
    padding: 0 5px
}

#GetCustomMaps {
    position: absolute;
    left: 269px;
    top: 199px;
    font-size: 9px;
    padding: 0 5px
}

#RoomS1Disabled {
    position: absolute;
    left: 267px;
    top: 48px
}

#RoomRandomTeams {
    position: absolute;
    left: 235px;
    top: 110px
}

.roomBuddy {
    position: absolute;
    left: 100px;
    top: 33px;
    width: 64px;
    height: 46px;
    background-position: -94px -355px;
    pointer-events: none
}

.HD .roomBuddy {
    background-position: -348px -63.5px;
    width: 44px;
    height: 41px
}

.roomGuildMember {
    position: absolute;
    left: 136px;
    top: 33px;
    width: 63px;
    height: 46px;
    background-position: -159px -355px;
    pointer-events: none
}

.HD .roomGuildMember {
    background-position: -393.5px -63.5px;
    width: 44px;
    height: 41px
}

#myPhotoDiv {
    position: absolute;
    left: 588px;
    top: 116px;
    width: 35px;
    height: 35px;
    z-index: 10;
    overflow: hidden
}

#myPhotoDiv.glow_button_anim {
    height: 35px;
    cursor: pointer
}

#myGFPhotoDiv {
    position: absolute;
    right: 10px;
    top: 116px;
    width: 35px;
    height: 35px;
    z-index: 10;
    overflow: hidden
}

#myGFPhotoDiv.glow_button_anim {
    height: 35px;
    cursor: pointer
}

#myGFStatus {
    position: absolute;
    right: 10px;
    top: 104px;
    z-index: 11
}

#myGFName {
    position: absolute;
    right: 10px;
    top: 153px;
    z-index: 11;
    text-align: right
}

#infoGFPhotoDiv {
    position: absolute;
    right: 28px;
    top: 71px;
    width: 62px;
    height: 53px;
    overflow: hidden
}

#infoGFPhotoDiv.glow_button_anim {
    height: 53px;
    cursor: pointer
}

#infoGFStatus {
    position: absolute;
    right: 11px;
    top: 53px;
    text-align: center;
    width: 100px
}

#infoGFName {
    position: absolute;
    right: 9px;
    top: 123px;
    text-align: center;
    width: 100px
}

.roomPlayerPhoto {
    position: absolute;
    left: 155px;
    top: 16px;
    width: 62px;
    height: 53px;
    z-index: 22
}

.roomPlayerPhoto .glow_button_anim {
    height: 53px
}

.infoImageS {
    box-shadow: 0 0 3px 3px #6badde
}

#lovePanel {
    position: absolute;
    left: 360px;
    top: 100px;
    width: 200px;
    height: 350px;
    background: rosybrown;
    border: 3px solid saddlebrown
}

.myInfoRelText {
    font-size: 8px;
    font-style: italic;
    text-align: right;
    color: white;
    white-space: nowrap
}

.myInfoRelText1 {
    position: absolute;
    top: -17px
}

.myInfoRelText2 {
    position: absolute;
    top: 52px
}

.myInfoRelText .relationshipIcon,
.relationshipIconE,
.relationshipIconM {
    vertical-align: sub
}

.relationshipIcon {
    width: 16px;
    height: 16px;
    background-image: url(/static/images/heart_icon.png);
    display: inline-block;
    position: relative;
    top: 3px
}

.HD .relationshipIcon {
    background-position: -981px -1029.5px
}

.relationshipIconE {
    width: 16px;
    height: 16px;
    background: url(/static/images/red_ring_icon.png);
    display: inline-block;
    position: relative;
    top: 3px
}

.HD .relationshipIconE {
    background-position: -981px -1064.5px
}

.relationshipIconM {
    width: 16px;
    height: 16px;
    background: url(/static/images/blue_ring_icon.png);
    display: inline-block;
    position: relative;
    top: 3px
}

.HD .relationshipIconM {
    background-position: -981px -1082px
}

.heartBrokenIcon {
    width: 16px;
    height: 16px;
    background: url(/static/images/heart_broken_icon.png);
    display: inline-block;
    position: relative;
    top: 3px
}

.HD .heartBrokenIcon {
    background-position: -981px -1047px
}

#infoRelationBtn {
    position: absolute;
    right: 95px;
    top: 74px;
    padding: 0 3px;
    font-size: 8px
}

#infoRelationBonus {
    position: absolute;
    left: 382px;
    top: 33px;
    width: 100px;
    font-size: 7px;
    color: yellow;
    text-align: center
}

#gp_team_a {
    position: absolute;
    left: 228px;
    top: 465px;
    color: yellow;
    text-align: center
}

#gp_team_b {
    position: absolute;
    left: 291px;
    top: 465px;
    color: yellow;
    text-align: center
}

#gp_rate {
    position: absolute;
    left: 264px;
    top: 449px;
    color: yellow;
    text-align: center
}

.howto1 {
    font-weight: bold;
    text-decoration: underline;
    color: #f60;
    text-align: center
}

.howto2 {
    font-weight: bold;
    color: #ffeb90
}

.howto3 {
    padding: 10px;
    margin-right: 10px;
    color: #fa1
}

.howto4 {
    padding: 5px 10px 10px 10px;
    margin-right: 10px;
    text-align: center;
    color: #fff0d0
}

#guild_create {
    margin-left: 68px;
    width: 71px;
    height: 71px;
    background-position: -72px -1521px
}

.HD #guild_create {
    background-position: -500px 0;
    background-size: 1000px 1500px
}

#create_guild_name {
    text-align: center;
    width: 150px
}

#guild_leave {
    width: 56px;
    height: 36px;
    background-position: -245px -1593px;
    display: inline-block
}

.HD #guild_leave {
    background-position: -504px -136px
}

.GuildName {
    color: #f7a539;
    display: inline-block;
    margin-right: 5px
}

.GuildNameTeamA {
    color: #f09;
    display: inline-block;
    margin-right: 5px
}

.GuildNameTeamB {
    color: #09f;
    display: inline-block;
    margin-right: 5px
}

#BrokerScreen {
    display: none
}

#BrokerWindow {
    position: absolute;
    left: 82px;
    top: 104px;
    width: 636px;
    height: 388px;
    border: black solid 2px;
    border-radius: 20px;
    color: white;
    z-index: 999;
    background: rgba(20, 20, 140, 0.6);
    background-size: cover;
    box-shadow: 5px 10px 30px 10px #000, inset 1px 2px 4px #7394b5
}

#BrokerPlayer {
    position: absolute;
    left: 200px;
    top: 80px;
    width: 400px;
    height: 22px;
    border: black solid 2px;
    border-radius: 40px 40px 0 0;
    color: white;
    z-index: 998;
    background: rgba(20, 20, 240, 0.8);
    background-size: cover;
    box-shadow: 5px 5px 30px 10px #000, inset 1px 2px 4px #7394b5;
    text-align: center;
    padding-top: 3px;
    font-size: 12px
}

.UsernameAboveDialog {
    position: absolute;
    left: -19px;
    top: -34px;
    width: 290px;
    height: 22px;
    border: black solid 2px;
    border-radius: 40px 40px 0 0;
    color: white;
    z-index: -3;
    background: rgba(50, 50, 150, 0.7);
    background-size: cover;
    box-shadow: inset 1px 2px 4px #7394b5;
    text-align: center;
    padding-top: 3px;
    font-size: 12px
}

#BrokerTitle {
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    text-align: center;
    color: white
}

#BrokerTotalPlayers {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: white
}

.BrokerChannel {
    position: absolute;
    width: 190px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat
}

#BrokerChannel0 {
    left: 16px;
    top: 40px
}

#BrokerChannel1 {
    left: 223px;
    top: 40px
}

#BrokerChannel2 {
    left: 430px;
    top: 40px
}

#BrokerChannel3 {
    left: 16px;
    top: 127px
}

#BrokerChannel4 {
    left: 223px;
    top: 127px
}

#BrokerChannel5 {
    left: 430px;
    top: 127px
}

#BrokerChannel6 {
    left: 16px;
    top: 214px
}

#BrokerChannel7 {
    left: 223px;
    top: 214px
}

#BrokerChannel8 {
    left: 430px;
    top: 214px
}

#BrokerChannel9 {
    left: 16px;
    top: 301px
}

#BrokerChannel10 {
    left: 223px;
    top: 301px
}

#BrokerChannel11 {
    left: 430px;
    top: 301px
}

#BrokerChannel12 {
    left: 16px;
    top: 388px
}

#BrokerChannel13 {
    left: 223px;
    top: 388px
}

#BrokerChannel14 {
    left: 430px;
    top: 388px
}

.BrokerPlayersIcon {
    position: absolute;
    left: 99px;
    top: 29px;
    background-image: url(/static/images/serversHD/icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 7px;
    height: 11px
}

.BrokerChannel.BrokerChannelOnline {
    background-position: 0 0
}

.BrokerChannel.BrokerChannelFull {
    color: #9cf
}

.BrokerChannel.BrokerChannelFull .BrokerChannelFullIcon {
    position: absolute;
    top: 38px;
    left: 11px;
    width: 42px;
    height: 20px;
    background-position: -177px -606px
}

.ServerName {
    display: flex;
    align-items: center;
    position: absolute;
    left: 5px;
    top: 0;
    color: white;
    font-size: 12px;
    height: 28px
}

.ServerNamePart {
    display: flex;
    flex-direction: column;
    align-items: center
}

.BrokerNumPlayers2 {
    position: absolute;
    height: 7px;
    background: #0f0;
    width: 0
}

.BrokerMaxPlayers2 {
    position: absolute;
    left: 109px;
    top: 30px;
    height: 7px;
    background: #00f;
    border: 1px solid black;
    width: 74px
}

.BrokerRanks {
    position: absolute;
    left: 57px;
    top: 43px;
    color: black;
    font-size: 22px
}

.BrokerDesc {
    position: absolute;
    left: 10px;
    top: 48px;
    color: black;
    font-size: 12px;
    width: 178px
}

.InlineRank {
    display: inline-block
}

#BrokerRefresh {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 34px;
    height: 20px;
    background-position: -302px -1593px
}

.HD #BrokerRefresh {
    background-position: -552.5px -72.5px
}

#filter_all {
    position: absolute;
    left: 20px;
    top: 28px;
    background-position: 0 -355px;
    width: 46px;
    height: 46px
}

#filter_waiting {
    position: absolute;
    left: 70px;
    top: 28px;
    background-position: -47px -355px;
    width: 46px;
    height: 46px
}

#filter_normal {
    position: absolute;
    left: 137px;
    top: 78px
}

#filter_boss {
    position: absolute;
    left: 187px;
    top: 78px
}

#filter_tag {
    position: absolute;
    left: 237px;
    top: 78px
}

#filter_score {
    position: absolute;
    left: 287px;
    top: 78px
}

#filter_battle_royale {
    position: absolute;
    left: 337px;
    top: 78px
}

#filter_jewel {
    position: absolute;
    left: 387px;
    top: 78px
}

/* Etiqueta roja NEW — referencia Gumbao.min.css */
.FilterNewBadge {
    position: absolute;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: bold;
    line-height: 1;
    background-color: #ff2d2d !important;
    background-image: none !important;
    text-align: center;
    white-space: nowrap;
    border-radius: 6px;
    padding: 2px 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .7);
    transform: translateX(-50%);
    pointer-events: none !important;
    z-index: 20;
    filter: none !important;
    -webkit-filter: none !important;
}

#filter_boss_new {
    left: 209px;
    top: 71px
}

#filter_tag_new {
    left: 259px;
    top: 71px
}

#filter_battle_royale_new {
    left: 359px;
    top: 71px
}

#filter_jewel_new {
    left: 409px;
    top: 71px
}

#filter_survival_new {
    left: 459px;
    top: 71px
}

#container.SpecialLobby .FilterNewBadge,
#container.SpecialLobby .new-mode-badge,
#container.SpecialLobby #filter_boss_new,
#container.SpecialLobby #filter_tag_new,
#container.SpecialLobby #filter_battle_royale_new,
#container.SpecialLobby #filter_jewel_new,
#container.SpecialLobby #filter_survival_new,
#container.SpecialLobby #roomsList,
#container.SpecialLobby .room,
#container.SpecialLobby .rooms8,
#container.SpecialLobby #roomsPage,
#container.SpecialLobby #buttonRoomsListUp,
#container.SpecialLobby #buttonRoomsListDown {
    display: none !important
}

#filter_survival {
    position: absolute;
    left: 437px;
    top: 78px;
    width: 44px;
    height: 41px
}

.HD #filter_survival {
    background-position: -257.5px -63.5px;
    width: 43px;
    height: 41px;
    filter: hue-rotate(180deg) saturate(2.2) brightness(1.05)
}

#filter_survival.selectedFilter,
.HD #filter_survival.selectedFilter {
    filter: hue-rotate(180deg) saturate(2.2) brightness(1.05) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

.HD #filter_survival.selectedFilter {
    filter: hue-rotate(180deg) saturate(2.2) brightness(1.05) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

#filter_friends {
    position: absolute;
    left: 20px;
    top: 78px;
    background-position: -94px -355px;
    width: 64px;
    height: 46px
}

#filter_guild {
    position: absolute;
    left: 70px;
    top: 78px;
    background-position: -159px -355px;
    width: 63px;
    height: 46px
}

.HD #filter_all {
    background-position: 0 -63.5px;
    width: 45.5px;
    height: 45px
}

.HD #filter_waiting {
    background-position: -47.5px -63.5px;
    width: 46px;
    height: 45px
}

.HD #filter_friends {
    background-position: -348.5px -63.5px;
    width: 43px;
    height: 41px
}

.HD #filter_guild {
    background-position: -393.5px -63.5px;
    width: 44px;
    height: 41px
}

#roomsPage {
    position: absolute;
    left: 536px;
    top: 270px;
    text-align: center;
    min-width: 40px
}

.iconMode3.selectedFilter {
    filter: hue-rotate(165deg) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

.selectedFilter,
.HD .iconMode3.selectedFilter {
    filter: drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

.selectedFilter.light_button:hover {
    filter: brightness(1.3) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

#dialogCharge {
    position: absolute;
    left: 200px;
    top: 100px;
    width: 400px;
    height: 350px;
    border: 4px solid black;
    border-radius: 40px;
    padding: 20px;
    display: none;
    background: #dde url(/static/images/bg_cash.jpg)
}

#dialogChargeClose {
    position: absolute;
    right: 10px;
    top: 10px
}

.buttonClose {
    background-position: -197px -478px;
    width: 39px;
    height: 39px;
    border-radius: 20px
}

.HD .buttonClose {
    background-position: -738px 0
}

#channelName {
    position: absolute;
    left: 18px;
    top: 430px;
    color: white;
    font-size: 15px;
    padding: 5px
}

#prixPoints {
    position: absolute;
    right: 243px;
    top: 430px;
    height: 22px;
    line-height: 22px;
    color: #fe0;
    font-size: 15px;
    padding: 0 0 0 6px;
    border: black solid 2px;
    border-radius: 5px;
    background-color: rgba(0, 40, 120, 0.7);
    display: none
}

#resetPrixPoints {
    height: 22px;
    padding: 0 6px
}

.TBGnBorder {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 2px solid #000 !important;
    border-radius: 5px;
    box-shadow: 0 0 4px #f80
}

.TBG {
    background: rgba(0, 0, 0, 0.5) !important
}

.TBGW {
    background: rgba(150, 150, 150, 0.5)
}

#roomInfoBG {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 572px;
    height: 109px;
    background: rgba(100, 100, 100, 0.5);
    border-radius: 18px
}

#roomItemsBG {
    position: absolute;
    left: 582px;
    top: 247px;
    width: 215px;
    height: 283px
}

#roomInfo1 {
    position: absolute;
    right: 410px;
    top: 27px;
    color: #009cff;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    text-shadow: -1.5px -1.5px 0 #000, 0px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 1.5px 0 #000, 0px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

#roomInfo2 {
    position: absolute;
    right: 410px;
    top: 41px;
    color: #ffad00;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    text-shadow: -1.5px -1.5px 0 #000, 0px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 1.5px 0 #000, 0px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

#roomInfo3 {
    position: absolute;
    right: 410px;
    top: 55px;
    color: #ff2a00;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    text-shadow: -1.5px -1.5px 0 #000, 0px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 1.5px 0 #000, 0px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

#roomInfo4 {
    position: absolute;
    right: 410px;
    top: 69px;
    color: #3bf500;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    text-shadow: -1.5px -1.5px 0 #000, 0px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 1.5px 0 #000, 0px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

#roomInfo5 {
    position: absolute;
    left: 613px;
    top: 294px;
    font-size: 18px
}

#roomInfo6 {
    position: absolute;
    left: 583px;
    top: 354px;
    font-size: 18px;
    width: 213px;
    text-align: center
}

#shopTitle {
    position: absolute;
    left: 460px;
    text-shadow: #f00 -20px 0 40px, #f00 0 20px 40px, #f00 20px 0 40px, #f00 0 -20px 40px, #f00 -1px 0 1px, #f00 0 1px 1px, #f00 1px 0 1px, #f00 0 -1px 1px;
    font-size: 24px;
    font-weight: 800;
    color: #fff
}

#shopMyBox {
    position: absolute;
    left: 4px;
    top: 6px;
    width: 210px;
    height: 171px;
    background: rgba(140, 140, 140, 0.5);
    border-radius: 10px
}

#shopInvTitle {
    position: absolute;
    left: 75px;
    top: 185px
}

#shopInvBox {
    position: absolute;
    left: 4px;
    top: 204px;
    width: 229px;
    height: 318px
}

#chargeWindow {
    position: absolute;
    left: 50%;
    top: 10px;
    margin-left: -400px;
    z-index: 1500;
    width: 820px;
    height: 897px;
    display: none;
    background: rgba(0, 50, 100, 0.95);
    border: 4px solid black;
    border-radius: 20px 20px 0 0;
    font-size: 12px;
    transform-origin: center top;
    transition: width .2s ease-in-out
}

@media(max-width: 900px) {
    #chargeWindow {
        transform: scale(0.9)
    }
}

@media(max-width: 799px) {
    #chargeWindow {
        transform: scale(0.8)
    }
}

@media(max-width: 720px) {
    #chargeWindow {
        transform: scale(0.7)
    }
}

@media(max-width: 620px) {
    #chargeWindow {
        transform: scale(0.6)
    }
}

@media(max-width: 535px) {
    #chargeWindow {
        transform: scale(0.5)
    }
}

@media(max-width: 445px) {
    #chargeWindow {
        transform: scale(0.4)
    }
}

@media(max-width: 1150px) {
    #chargeWindow.large {
        transform: scale(0.9)
    }
}

@media(max-width: 1030px) {
    #chargeWindow.large {
        transform: scale(0.8)
    }
}

@media(max-width: 920px) {
    #chargeWindow.large {
        transform: scale(0.7)
    }
}

@media(max-width: 800px) {
    #chargeWindow.large {
        transform: scale(0.6)
    }
}

@media(max-width: 680px) {
    #chargeWindow.large {
        transform: scale(0.5)
    }
}

@media(max-width: 570px) {
    #chargeWindow.large {
        transform: scale(0.4)
    }
}

#chargeWindow.large {
    width: 1100px;
    margin-left: -550px
}

#charge_pin_btn {
    background: url(/static/images/payment_options.png?8) no-repeat 0 -175px;
    top: 10px;
    left: 330px
}

#buypin_btn {
    top: 10px;
    left: 170px;
    background: url(/static/images/payment_options.png?8) no-repeat 0 -105px
}

#charge_bitcoin_btn {
    background: url(/static/images/payment_options.png?8) no-repeat 0 0;
    top: 55px;
    left: 490px
}

#charge_dn_btn {
    top: 10px;
    left: 10px;
    background: url(/static/images/payment_options.png?8) no-repeat 0 -455px
}

#paymentwall_btn {
    top: 55px;
    left: 330px;
    background: url(/static/images/payment_options.png?8) no-repeat 0 -350px
}

#reseller1_btn {
    top: 55px;
    left: 170px;
    background: url(/static/images/payment_options.png?8) no-repeat 0 -420px
}

#reseller2_btn {
    top: 55px;
    left: 10px;
    background: url(/static/images/payment_options.png?8) no-repeat 0 -385px
}

#charge_myinfo_btn {
    background: url(/static/images/payment_options.png?8) no-repeat 0 -140px;
    top: 10px;
    left: 490px
}

#charge_home_btn {
    top: 10px;
    left: 650px;
    width: 40px;
    font-size: 30px
}

#new_charge {
    display: block;
    left: 144px;
    top: -11px;
    display: block;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transfcharge_pin_btnorm: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg)
}

#ChargeWelcomeMsg {
    font-size: 30px;
    margin: 180px auto 0 auto;
    text-align: center
}

.seller_button {
    position: absolute;
    width: 153px;
    height: 34px
}

#chargeWindowPayment {
    margin-top: 92px
}

#chargeWindowClose {
    position: absolute;
    right: -15px;
    top: -15px
}

#new_img {
    position: absolute;
    left: -16px;
    top: -2px;
    width: 90px;
    height: 51px;
    display: none;
    background-position: -252px -1715px
}

#NameChangeLittle {
    font-size: 8px
}

#Face8ookLike {
    position: absolute;
    left: 246px;
    top: 434px
}

.fb_iframe_widget iframe {
    bottom: 0 !important
}

.fb_edge_widget_with_comment span.fb_send_button_form_widget {
    top: -240px !important
}

.fb_iframe_widget_lift {
    z-index: 20 !important
}

#Tweeter {
    position: absolute;
    left: 382px;
    top: 428px
}

#GooglePlus {
    position: absolute;
    left: 489px;
    top: 428px
}

.rank_emoji {
    transform: scale(0.8);
    height: 12px;
    display: inline-block;
    margin-left: -2px;
    margin-right: -2px
}

.wordBreak {
    word-break: break-all
}

.chatSpacer {
    display: inline-block;
    width: 2px
}

#updater {
    position: absolute;
    right: 4px;
    top: 4px;
    background-color: #FEC;
    color: black;
    z-index: 12000;
    padding: 3px;
    box-shadow: 0 0 3px 3px red;
    font-size: 11px;
    display: none
}

.ContactTitle {
    margin-top: 8px;
    color: lightyellow;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    border-bottom: 1px solid #aaa
}

.ContactName {
    margin-top: 8px;
    color: yellow;
    font-weight: bold;
    font-size: 16px;
    text-align: center
}

.ContactLang {
    color: white;
    font-weight: normal;
    font-style: italic;
    font-size: 11px;
    text-align: center
}

.ContactFB {
    text-align: center
}

.ContactFB a {
    padding: 5px
}

.TermsArea {
    background-color: transparent;
    color: #fff;
    width: 100%;
    height: 80%;
    font-size: 11px;
    border: 0;
    font-family: Arial, sans-serif
}

.refresh_button_friends {
    border: 1px solid #25729a;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: arial, helvetica, sans-serif;
    padding: 10px 10px 10px 10px;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: #3093c7;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3093c7), color-stop(100%, #1c5a85));
    background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
    background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
    background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
    background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
    background-image: linear-gradient(top, #3093c7, #1c5a85);
    font-size: 15px;
    width: 138px
}

.refresh_button_friends:hover {
    border: 1px solid #1c5675;
    background-color: #26759e;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #26759e), color-stop(100%, #133d5b));
    background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
    background-image: -moz-linear-gradient(top, #26759e, #133d5b);
    background-image: -ms-linear-gradient(top, #26759e, #133d5b);
    background-image: -o-linear-gradient(top, #26759e, #133d5b);
    background-image: linear-gradient(top, #26759e, #133d5b)
}

.refresh_button_friends:active {
    border: 1px solid #1c5675;
    background-color: #26759e;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #133d5b), color-stop(100%, #26759e));
    background-image: -webkit-linear-gradient(top, #133d5b, #26759e);
    background-image: -moz-linear-gradient(top, #133d5b, #26759e);
    background-image: -ms-linear-gradient(top, #133d5b, #26759e);
    background-image: -o-linear-gradient(top, #133d5b, #26759e);
    background-image: linear-gradient(top, #133d5b, #26759e)
}

.RedButton {
    border: 1px solid #72021c;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 10px 6px;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #fff;
    background-color: #a90329;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a90329), color-stop(100%, #6d0019));
    background-image: -webkit-linear-gradient(top, #a90329, #6d0019);
    background-image: -moz-linear-gradient(top, #a90329, #6d0019);
    background-image: -ms-linear-gradient(top, #a90329, #6d0019);
    background-image: -o-linear-gradient(top, #a90329, #6d0019);
    background-image: linear-gradient(top, #a90329, #6d0019);
    font-size: 14px;
    display: inline-block;
    vertical-align: top
}

.RedButton:hover {
    border: 1px solid #450111;
    background-color: #77021d;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77021d), color-stop(100%, #3a000d));
    background-image: -webkit-linear-gradient(top, #77021d, #3a000d);
    background-image: -moz-linear-gradient(top, #77021d, #3a000d);
    background-image: -ms-linear-gradient(top, #77021d, #3a000d);
    background-image: -o-linear-gradient(top, #77021d, #3a000d);
    background-image: linear-gradient(top, #77021d, #3a000d)
}

.RedButton:active {
    border: 1px solid #450111;
    background-color: #77021d;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3a000d), color-stop(100%, #77021d));
    background-image: -webkit-linear-gradient(top, #3a000d, #77021d);
    background-image: -moz-linear-gradient(top, #3a000d, #77021d);
    background-image: -ms-linear-gradient(top, #3a000d, #77021d);
    background-image: -o-linear-gradient(top, #3a000d, #77021d);
    background-image: linear-gradient(top, #3a000d, #77021d)
}

@keyframes move {
    from {
        bottom: 100px
    }

    to {
        bottom: 70px;
        transform: scale(1.2)
    }
}

@-moz-keyframes move {
    from {
        bottom: 100px
    }

    to {
        bottom: 70px;
        -moz-transform: scale(1.2)
    }
}

@-webkit-keyframes move {
    from {
        bottom: 100px
    }

    to {
        bottom: 70px;
        -webkit-transform: scale(1.2)
    }
}

@keyframes text_anim {
    from {
        opacity: 0;
        transform: translate(-50px, 0) scale(0.1) rotate(-40deg)
    }

    5% {
        opacity: .85;
        transform: translate(0, 0) scale(1) rotate(0)
    }

    95% {
        opacity: .85;
        transform: translate(0, 0) scale(1) rotate(0)
    }

    100% {
        opacity: 0;
        transform: translate(-50px, 0) scale(0.1) rotate(-40deg)
    }
}

@-moz-keyframes text_anim {
    from {
        opacity: 0;
        -moz-transform: translate(-50px, 0) scale(0.1) rotate(-40deg)
    }

    5% {
        opacity: .85;
        -moz-transform: translate(0, 0) scale(1) rotate(0)
    }

    95% {
        opacity: .85;
        -moz-transform: translate(0, 0) scale(1) rotate(0)
    }

    100% {
        opacity: 0;
        -moz-transform: translate(-50px, 0) scale(0.1) rotate(-40deg)
    }
}

@-webkit-keyframes text_anim {
    from {
        opacity: 0;
        -webkit-transform: translate(-50px, 0) scale(0.1) rotate(-40deg)
    }

    5% {
        opacity: .85;
        -webkit-transform: translate(0, 0) scale(1) rotate(0)
    }

    95% {
        opacity: .85;
        -webkit-transform: translate(0, 0) scale(1) rotate(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(-50px, 0) scale(0.1) rotate(-40deg)
    }
}

@keyframes event_anim {
    from {
        opacity: 0;
        transform: translate(-50px, 0) scale(0.1) rotate(40deg)
    }

    25% {
        opacity: .85;
        transform: translate(0, 0) scale(1) rotate(0)
    }

    75% {
        opacity: .85;
        transform: translate(0, 0) scale(1) rotate(0)
    }

    100% {
        opacity: 0;
        transform: translate(-50px, 0) scale(0.1) rotate(40deg)
    }
}

@-moz-keyframes event_anim {
    from {
        opacity: 0;
        -moz-transform: translate(-50px, 0) scale(0.1) rotate(40deg)
    }

    25% {
        opacity: .85;
        -moz-transform: translate(0, 0) scale(1) rotate(0)
    }

    75% {
        opacity: .85;
        -moz-transform: translate(0, 0) scale(1) rotate(0)
    }

    100% {
        opacity: 0;
        -moz-transform: translate(-50px, 0) scale(0.1) rotate(40deg)
    }
}

@-webkit-keyframes event_anim {
    from {
        opacity: 0;
        -webkit-transform: translate(-50px, 0) scale(0.1) rotate(40deg)
    }

    25% {
        opacity: .85;
        -webkit-transform: translate(0, 0) scale(1) rotate(0)
    }

    75% {
        opacity: .85;
        -webkit-transform: translate(0, 0) scale(1) rotate(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(-50px, 0) scale(0.1) rotate(40deg)
    }
}

@keyframes bonus_msg_anim {
    from {
        opacity: 0;
        transform: translate(-50px, 0) scale(0.1) rotate(40deg)
    }

    25% {
        opacity: .85;
        transform: translate(0, 0) scale(1) rotate(0)
    }

    75% {
        opacity: .85;
        transform: translate(0, 0) scale(1) rotate(0)
    }

    100% {
        opacity: 0;
        transform: translate(0, 0) scale(1) rotate(0)
    }
}

@-moz-keyframes bonus_msg_anim {
    from {
        opacity: 0;
        -moz-transform: translate(-50px, 0) scale(0.1) rotate(40deg)
    }

    25% {
        opacity: .85;
        -moz-transform: translate(0, 0) scale(1) rotate(0)
    }

    75% {
        opacity: .85;
        -moz-transform: translate(0, 0) scale(1) rotate(0)
    }

    100% {
        opacity: 0;
        -moz-transform: translate(0, 0) scale(1) rotate(0)
    }
}

@-webkit-keyframes bonus_msg_anim {
    from {
        opacity: 0;
        -webkit-transform: translate(-50px, 0) scale(0.1) rotate(40deg)
    }

    25% {
        opacity: .85;
        -webkit-transform: translate(0, 0) scale(1) rotate(0)
    }

    75% {
        opacity: .85;
        -webkit-transform: translate(0, 0) scale(1) rotate(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(0, 0) scale(1) rotate(0)
    }
}

.text_anim {
    animation: text_anim 7s linear;
    -moz-animation: text_anim 7s linear;
    -webkit-animation: text_anim 7s linear
}

#no_win_bonus {
    position: absolute;
    left: 587px;
    top: 29px;
    background-color: #222;
    color: #fe6001;
    width: 200px;
    padding: 3px;
    display: none
}

#UltimatePayBuyButton {
    width: 356px;
    height: 95px;
    background: url(/static/images/UltimatePay2.png);
    margin: 50px 200px;
    transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out
}

#UltimatePayBuyButton:hover {
    box-shadow: 0 0 50px rgba(0, 0, 255, 1);
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 255, 1);
    -moz-box-shadow: 0 0 50px rgba(0, 0, 255, 1);
    transform: scale(1.1) rotate(-5deg);
    -webkit-transform: scale(1.1) rotate(-5deg);
    -moz-transform: scale(1.1) rotate(-5deg);
    -o-transform: scale(1.1) rotate(-5deg);
    cursor: pointer
}

.EventGameMsg1 {
    position: absolute;
    left: 0;
    top: 240px;
    width: 800px;
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    color: #f48;
    opacity: 0;
    animation: event_anim 10s linear;
    text-shadow: black -20px 0 40px, black 0 20px 40px, black 20px 0 40px, black 0 -20px 40px, black -1px 0 1px, black 0 1px 1px, black 1px 0 1px, black 0 -1px 1px;
    pointer-events: none
}

.EventGameMsg2 {
    position: absolute;
    left: 0;
    top: 240px;
    width: 800px;
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    color: #cf4;
    opacity: 0;
    animation: event_anim 2s linear;
    text-shadow: black -10px 0 20px, black 0 10px 20px, black 10px 0 20px, black 0 -10px 20px, black -1px 0 1px, black 0 1px 1px, black 1px 0 1px, black 0 -1px 1px;
    pointer-events: none
}

.EventGameMsg3 {
    position: absolute;
    left: 0;
    top: 240px;
    width: 800px;
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    color: #f3f;
    opacity: 0;
    animation: event_anim 2s linear;
    text-shadow: black -20px 0 40px, black 0 20px 40px, black 20px 0 40px, black 0 -20px 40px, black -1px 0 1px, black 0 1px 1px, black 1px 0 1px, black 0 -1px 1px;
    pointer-events: none
}

.BonusMsg {
    position: absolute;
    left: 0;
    top: 240px;
    width: 800px;
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    opacity: 0;
    animation: bonus_msg_anim 2s linear;
    text-shadow: black -10px 0 10px, black 0 10px 10px, black 10px 0 10px, black 0 -10px 10px, black -1px 0 1px, black 0 1px 1px, black 1px 0 1px, black 0 -1px 1px;
    pointer-events: none
}

#cashBonus1 {
    position: absolute;
    left: 190px;
    top: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #ff0;
    animation: move 1s linear infinite alternate;
    -moz-animation: move 1s linear infinite alternate;
    -webkit-animation: move 1s linear infinite alternate
}

#cashBonus2 {
    position: absolute;
    left: 350px;
    top: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #ff0;
    animation: move 1s linear infinite alternate;
    -moz-animation: move 1s linear infinite alternate;
    -webkit-animation: move 1s linear infinite alternate
}

#OptionsTheme {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    padding: 2px 10px !important;
    height: 22px !important;
    line-height: 16px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    background-color: #019ad2 !important;
    background-image: linear-gradient(180deg, #33bcef 0%, #019ad2 100%) !important;
    border: 1px solid #057ed0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.35) !important;
    box-sizing: border-box !important;
}

#OptionsTheme:hover {
    background-image: linear-gradient(180deg, #2daddc 0%, #0271bf 100%) !important;
    border-color: #096eb3 !important;
}

#OptionsTheme:active {
    background-image: linear-gradient(180deg, #0271bf 0%, #2daddc 100%) !important;
    transform: translateY(1px) !important;
}

#DragonThemeDialog {
    display: none;
    position: absolute !important;
    z-index: 9999 !important;
    width: 490px !important;
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
    background: linear-gradient(to bottom, #bdcae6 0%, #8ba5c5 100%) !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
}

#DragonThemeDialog .DragonWindowTitleBar {
    height: 28px !important;
    line-height: 28px !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 0 12px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
    background: linear-gradient(to right, #b414a4 0%, #316194 100%) !important;
    position: relative !important;
    user-select: none !important;
}

#DragonThemeDialog .DragonWindowTitle {
    font-size: 12px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

#DragonThemeDialog .DragonWindowClose {
    width: 32px !important;
    height: 18px !important;
    line-height: 16px !important;
    position: absolute !important;
    right: 6px !important;
    top: 5px !important;
    background: linear-gradient(180deg, #e55353 0%, #c93b3b 100%) !important;
    border: 1px solid #ffffff !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}

#DragonThemeDialog .DragonWindowClose::before {
    content: "✕" !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    display: block !important;
    line-height: 16px !important;
}

#DragonThemeDialog .DragonWindowClose:hover {
    background: linear-gradient(180deg, #f06a6a 0%, #d84545 100%) !important;
}

#DragonThemeDialog .DragonWindowBody {
    padding: 12px 14px 14px 14px !important;
    font-size: 11px !important;
    color: #ffffff !important;
}

#DragonThemeDialog .DragonWindowBody .blueBtn {
    display: inline-block !important;
    padding: 4px 12px !important;
    margin-right: 6px !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #33bcef 0%, #019ad2 100%) !important;
    border: 1px solid #057ed0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
}

#DragonThemeDialog .DragonWindowBody .blueBtn:hover {
    background: linear-gradient(180deg, #2daddc 0%, #0271bf 100%) !important;
    border-color: #096eb3 !important;
}

#CustomThemeTable {
    width: 100% !important;
    border-collapse: collapse !important;
}

#CustomThemeTable td {
    padding: 2px 4px !important;
    vertical-align: middle !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000 !important;
}

#CustomThemeTable td:first-child {
    width: 75px !important;
    white-space: nowrap !important;
}

#CustomThemeTable input {
    width: 100% !important;
    height: 20px !important;
    line-height: 20px !important;
    background: #ffffff !important;
    border: 1px solid #7a98b9 !important;
    border-radius: 2px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    color: #000000 !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    outline: none !important;
}

#CustomThemeTable input:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 4px rgba(2, 132, 199, 0.4) !important;
}

#CustomThemeFullText {
    display: inline-block !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    font-weight: bold !important;
    font-size: 11px !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 1px #000000, -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000 !important;
}

#themeFull {
    width: 100% !important;
    height: 90px !important;
    background: #ffffff !important;
    border: 1px solid #7a98b9 !important;
    border-radius: 2px !important;
    padding: 6px !important;
    font-size: 11px !important;
    font-family: Consolas, monospace !important;
    color: #000000 !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    outline: none !important;
    resize: vertical !important;
}

#themeFull:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 4px rgba(2, 132, 199, 0.4) !important;
}

#themeFull:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 4px rgba(2, 132, 199, 0.4) !important;
}

.animRotate {
    animation: animRotate 20s ease infinite;
    -webkit-animation: animRotate 20s ease infinite
}

@keyframes animRotate {
    from {
        transform: rotate(0) scale(1.3)
    }

    10% {
        transform: rotate(0) scale(1)
    }

    20% {
        transform: rotate(-15deg)
    }

    30% {
        transform: rotate(15deg)
    }

    40% {
        transform: rotate(-370deg)
    }

    50% {
        transform: rotate(-350deg)
    }

    60% {
        transform: rotate(-365deg)
    }

    70% {
        transform: rotate(-355deg)
    }

    80% {
        transform: rotate(15deg)
    }

    90% {
        transform: rotate(-15deg)
    }

    100% {
        transform: rotate(0) scale(1.3)
    }
}

@-webkit-keyframes animRotate {
    from {
        -webkit-transform: rotate(0) scale(1.3)
    }

    10% {
        -webkit-transform: rotate(0) scale(1)
    }

    20% {
        -webkit-transform: rotate(-15deg)
    }

    30% {
        -webkit-transform: rotate(15deg)
    }

    40% {
        -webkit-transform: rotate(-370deg)
    }

    50% {
        -webkit-transform: rotate(-350deg)
    }

    60% {
        -webkit-transform: rotate(-365deg)
    }

    70% {
        -webkit-transform: rotate(-355deg)
    }

    80% {
        -webkit-transform: rotate(15deg)
    }

    90% {
        -webkit-transform: rotate(-15deg)
    }

    100% {
        -webkit-transform: rotate(0) scale(1.3)
    }
}

#muteBtn {
    position: absolute;
    right: 11px;
    top: 3px;
    background-image: url(/static/images/mute-button.png);
    width: 50px;
    height: 50px
}

#shareTimer {
    position: absolute;
    left: 50%;
    top: 88px;
    margin-left: -45px;
    background-image: url(/static/images/fb-share-button.png);
    width: 90px;
    height: 23px
}

.popButton {
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out
}

.popButton:hover {
    transform: scale(1.5);
    -webkit-transform: scale(1.5)
}

.alertify,
.alertify-show,
.alertify-log {
    -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275)
}

.alertify-hide {
    -webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045)
}

.alertify-log-hide {
    -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
    transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045)
}

.alertify-cover {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.alertify-cover-hidden {
    display: none
}

.alertify {
    position: fixed;
    z-index: 99999;
    top: 50px;
    left: 50%;
    width: 550px;
    margin-left: -275px;
    opacity: 1
}

.alertify-hidden {
    -webkit-transform: translate(0, -300px);
    -moz-transform: translate(0, -300px);
    -ms-transform: translate(0, -300px);
    -o-transform: translate(0, -300px);
    transform: translate(0, -300px);
    opacity: 0;
    display: none
}

:root *>.alertify-hidden {
    display: block
}

.alertify-logs {
    position: fixed;
    z-index: 5000;
    bottom: 10px;
    right: 10px;
    width: 300px
}

.alertify-logs-hidden {
    display: none
}

.alertify-log {
    display: block;
    margin-top: 10px;
    position: relative;
    right: -300px;
    opacity: 0
}

.alertify-log-show {
    right: 0;
    opacity: 1
}

.alertify-log-hide {
    -webkit-transform: translate(300px, 0);
    -moz-transform: translate(300px, 0);
    -ms-transform: translate(300px, 0);
    -o-transform: translate(300px, 0);
    transform: translate(300px, 0);
    opacity: 0
}

.alertify-dialog {
    padding: 25px
}

.alertify-resetFocus {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.alertify-inner {
    text-align: center
}

.alertify-text {
    margin-bottom: 15px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 100%
}

.alertify-button,
.alertify-button:hover,
.alertify-button:active,
.alertify-button:visited {
    text-decoration: none;
    border: 0;
    line-height: 1.5;
    font-size: 100%;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px
}

.alertify-isHidden {
    display: none
}

@media only screen and (max-width: 680px) {

    .alertify,
    .alertify-logs {
        width: 90%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .alertify {
        left: 5%;
        margin: 0
    }
}

.alertify,
.alertify-log {
    font-family: Arial, sans-serif
}

.alertify {
    background: #FFF;
    border: 10px solid #333;
    border: 10px solid rgba(0, 0, 0, .7);
    border-radius: 8px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box
}

.alertify-text {
    border: 1px solid #CCC;
    padding: 10px;
    border-radius: 4px
}

.alertify-button {
    border-radius: 4px;
    color: #FFF;
    font-weight: bold;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .5);
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
    background-image: linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0))
}

.alertify-button:hover,
.alertify-button:focus {
    outline: 0;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background-image: linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0))
}

.alertify-button:focus {
    box-shadow: 0 0 15px #2b72d5
}

.alertify-button:active {
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05)
}

.alertify-button-cancel,
.alertify-button-cancel:hover,
.alertify-button-cancel:focus {
    background-color: #fe1a00;
    border: 1px solid #d83526
}

.alertify-button-ok,
.alertify-button-ok:hover,
.alertify-button-ok:focus {
    background-color: #5cb811;
    border: 1px solid #3b7808
}

.alertify-log {
    background: #1f1f1f;
    background: rgba(0, 0, 0, .9);
    padding: 15px;
    border-radius: 4px;
    color: #FFF;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .5)
}

.alertify-log-error {
    background: #fe1a00;
    background: rgba(254, 26, 0, .9)
}

.alertify-log-success {
    background: #5cb811;
    background: rgba(92, 184, 17, .9)
}

.alertify-message {
    color: #000
}

.grayscale {
    filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate);
    filter: gray;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.StartGame {
    -moz-box-shadow: inset -2px -1px 5px -28px #fff6af;
    -webkit-box-shadow: inset -2px -1px 5px -28px #fff6af;
    box-shadow: inset -2px -1px 5px -28px #fff6af;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
    background: -moz-linear-gradient(center top, #ffec64 5%, #ffab23 100%);
    background-color: #ffec64;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    border-radius: 24px;
    border: 2px solid #fa2;
    color: #333;
    font-family: Trebuchet MS, sans-serif;
    font-size: 22px;
    font-weight: bold;
    padding: 2px 15px;
    text-decoration: none;
    text-shadow: 3px 1px 0 #fe6;
    white-space: nowrap
}

.StartGame:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
    background: -moz-linear-gradient(center top, #ffab23 5%, #ffec64 100%);
    background-color: #ffab23
}

@keyframes spiner {
    from {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-moz-keyframes spiner {
    from {
        -moz-transform: rotate(0)
    }

    100% {
        -moz-transform: rotate(360deg)
    }
}

@-webkit-keyframes spiner {
    from {
        -webkit-transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

#hourglass {
    width: 800px;
    height: 404px;
    margin: 20px auto 20px auto;
    transform: scale(0.5);
    transform-origin: 0 0
}

#hourglass.AVIF {
    background-image: url(/static/images/hourglass.avif?2)
}

#hourglass.WEBP {
    background-image: url(/static/images/hourglass.webp?2)
}

#hourglass.GIF {
    background-image: url(/static/images/hourglass.gif?2)
}

#hourglass.ROOM {
    transform: scale(0.4);
    margin-left: -62px
}

.Spin75 {
    animation: spiner .75s linear infinite;
    -moz-animation: spiner .75s linear infinite;
    -webkit-animation: spiner .75s linear infinite
}

.Nav {
    text-align: center
}

#rankingOffset {
    width: 39px
}

#tournament_waiting {
    position: absolute;
    left: 100px;
    top: -400px;
    width: 400px;
    height: 312px;
    background-color: #ffd;
    text-align: center;
    z-index: 20;
    border: 5px solid #630;
    color: black;
    display: none
}

#tournament_info {
    position: absolute;
    top: 0;
    padding: 3px;
    color: #ff6;
    display: none;
    font-size: 9px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    width: 368px;
    text-align: center
}

#tournament_info2 {
    position: absolute;
    left: 7px;
    bottom: 168px;
    padding: 5px;
    color: #ff6;
    display: none;
    font-size: 7px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px
}

#tournament_timer_header {
    position: absolute;
    left: 122px;
    top: 132px;
    text-align: center;
    width: 330px;
    color: #ff0;
    display: none;
    font-size: 18px;
    pointer-events: none
}

#tournament_timer_footer {
    position: absolute;
    left: 122px;
    top: 250px;
    text-align: center;
    width: 330px;
    color: #ff0;
    display: none;
    font-size: 14px;
    pointer-events: none
}

#tournament_timer {
    position: absolute;
    left: 122px;
    top: 157px;
    text-align: center;
    width: 330px;
    color: #ff0;
    display: none;
    font-size: 42px;
    animation: scaleout_anim 2000ms ease-in-out infinite alternate;
    pointer-events: none
}

#tournament_timer.InPrix {
    top: 137px;
    color: #0f0;
    animation: scaleout_anim 500ms ease-in-out infinite alternate
}

@keyframes scaleout_anim {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.1)
    }
}

.anim_ease {
    -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275)
}

.cancelwait {
    -moz-box-shadow: inset 0 1px 0 0 #f5978e;
    -webkit-box-shadow: inset 0 1px 0 0 #f5978e;
    box-shadow: inset 0 1px 0 0 #f5978e;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
    background: -moz-linear-gradient(center top, #f24537 5%, #c62d1f 100%);
    background-color: #f24537;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #d02718;
    display: inline-block;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #810e05
}

.cancelwait:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
    background: -moz-linear-gradient(center top, #c62d1f 5%, #f24537 100%);
    background-color: #c62d1f
}

.cancelwait:active {
    position: relative;
    top: 1px
}

#CancelWaiting {
    position: absolute;
    left: 155px;
    top: 299px
}

#CancelWaiting2 {
    position: absolute;
    left: 120px;
    top: 316px
}

#changeNameDiv {
    width: 265px
}

#display_name {
    width: 130px
}

#team_search {
    position: absolute;
    left: 343px;
    top: 133px;
    display: none
}

.emo {
    width: 9px;
    height: 9px;
    transform: scale(1.3);
    margin: 0 1px
}

#roomMobileSelect {
    position: absolute;
    left: 25px;
    top: 75px;
    width: 515px;
    height: 535px;
    background: rgba(0, 20, 35, 0.9);
    z-index: 99;
    display: none;
    border-radius: 15px;
    border: 2px solid rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.85), inset 0 0 15px rgba(0, 255, 255, 0.15);
}

#roomMobileSelectOk {
    position: absolute;
    bottom: 7px;
    right: 102px;
}

#roomMobileSelectCancel {
    position: absolute;
    bottom: 7px;
    right: 10px;
}

#disabledMobilesList,
#mobileSelectHelpText {
    display: none;
}

.mobileSelectBtn {
    position: relative;
    width: 70px;
    height: 70px;
    background: rgba(0, 70, 30, 0.75);
    border: 3px solid #0f9;
    border-radius: 15px;
    float: left;
    margin: 12px
}

.mobileSelectBtn:hover {
    background: rgba(70, 70, 0, 0.75)
}

.mobileSelectBtn:active {
    background: rgba(40, 120, 0, 0.75)
}

.mobileSelectBtn.disabledMobile {
    background: rgba(40, 40, 40, 0.75) !important;
    border-color: #555 !important;
    opacity: 0.6;
    filter: grayscale(100%);
}

.mobileSelectBtn.selectedMyMobile {
    border-color: #ff0 !important;
    box-shadow: 0 0 10px #ff0;
}

.mobileSelectedCheck {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background: #ff0;
    border-radius: 50%;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    z-index: 10;
}

#disabledMobilesList,
#mobileSelectHelpText {
    display: none !important;
}

.mobileName {
    position: absolute;
    left: -15px;
    top: 73px;
    width: 100px;
    text-align: center;
    font-size: 16px;
    color: #ff0
}

#shopFilterMyAvatar {
    position: absolute;
    left: 15px;
    top: 479px;
    font-size: 11px;
    width: 131px;
    border: 1px solid black;
    padding: 2px;
    height: 13px
}

#shopSearchBtn {
    color: black;
    position: absolute;
    left: 155px;
    top: 479px;
    width: 20px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAABZVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMzMzKyspMTEyNjY2WlpYrKytUVFQFBQXIyMjl5eW+vr4HBwe6urqzs7NmZmYcHBwXFxfCwsKjo6NycnI9PT0TExPExMQ4ODi9vb2mpqaampp9fX1CQkIyMjLa2trFxcW/v7+pqamhoaGKioqAgIB6enptbW1dXV0pKSklJSUMDAzb29u2traxsbGtra3Vpp2dnZ2Tk5OHh4d1dXVjY2NHR0coKCgiIiJ0HQwKAgDh4eHX19fQ0NDNxcPciXl5eXlsZ2ZxXltJSUnmYUhISEjoVDjeTzQwMDDJMBOUIw6SIw1/HgxXFQg9DgUlCQO7UniPAAAAJ3RSTlMAdwX84KyDXuX4vIwPxH0Y8+vWmZVJRywLzq9xbjElCvKxompQRjlh6j2+AAACFElEQVQ4y42TV3faQBBGBaKDuwG3OD3fLijqAtFDB9Nxr7HTe09+f0QERwGDj++L5uFqzszODMPY3U6ff5u5gbUNGCyFblDmcXX5/Tc8C7MVD358fPPlD/yzFRbfDsnr92AfzlSW8fPzIaUx3LszS9nC1a/Ld1TMYc42BXfA6HmFBdAkeQFTcYQNJ7TqQzxBzyLTiMNnvo0DDTKdHXjNglYRIWKBSyY4jjO+nJznuH2N41QShcNUgshkxR7KSUB4lgG4NBBLQcgTHqumElhCgXSuKc/FbJwNMiZOdMiRXsrrerzW1fWjiK6ninrMKMUTGCpu4w96HXIGJzNkYVGok2pClGWZ1mRZTMhytpqgtAc3M2IObRLNJRWlL8cVpVBSlPYpTw8Er7UBNpSpmh4vt0FSmLNGFWaVPdoeU4oqzcFmKfZlNElW1DSN7mlaVdW0WpaqfW/YUgIOvCV0ghaW7ZayOZgk/3SMrgCn/f8kRbIjYBLWctxGElKPTtCIKdi07qBEyRRSWB+lecwKn/jibmW3xZvUK5VXHZ4vwXPXNMz1jEiSqMCEk6QTGJiK6bjQj0pSC4sul8uBriq9yGHdiG1WT/O4OJZexrBoHwwsokpqejRlq6fM6cHx+b893ED5ZL/Zm7zQBQ/i5zkB80b8iMXXDxfwTh5faAkG99cGsZ8F4N1iJtn2+5zuYXHBB76VJ8yt+QuSIH6C2k1b7QAAAABJRU5ErkJggg==) no-repeat;
    background-size: 20px 20px
}

.shopNeedLevel {
    position: absolute;
    left: 20px;
    bottom: 10px
}

#SortBtnPop {
    position: absolute;
    left: 12px;
    top: 503px
}

#SortBtnTime {
    position: absolute;
    left: 33px;
    top: 503px
}

#SortBtnAtk {
    position: absolute;
    left: 55px;
    top: 503px
}

#SortBtnDef {
    position: absolute;
    left: 77px;
    top: 503px
}

#SortBtnLife {
    position: absolute;
    left: 99px;
    top: 503px
}

#SortBtnItem {
    position: absolute;
    left: 121px;
    top: 503px
}

#SortBtnDig {
    position: absolute;
    left: 143px;
    top: 503px
}

#SortBtnShld {
    position: absolute;
    left: 165px;
    top: 503px
}

.FilterBtn {
    position: absolute
}

#FilterBtnHead {
    left: 11px;
    top: 211px
}

#FilterBtnBody {
    left: 33px;
    top: 210px
}

#FilterBtnEyes {
    left: 55px;
    top: 211px
}

#FilterBtnFlag {
    left: 77px;
    top: 210px
}

#FilterBtnBG {
    left: 99px;
    top: 211px
}

#FilterBtnFG {
    left: 121px;
    top: 211px
}

#FilterBtnEX {
    left: 143px;
    top: 207px
}

#FilterBtnPet {
    left: 165px;
    top: 210px;
    display: none !important;
}

#FilterBtnAll {
    left: 187px;
    top: 210px;
    width: 20px;
    height: 14px
}

#FilterBtnAll .AvNotif {
    top: -6px;
    right: -5px
}

.AvatarsIcon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOBAMAAADd6iHDAAAAKlBMVEUAAAAAAAD////e3t7GxsbWpUr/xkrGxs6cnJze3uf/xkLn3t7OxsrepUplJs/zAAAAAXRSTlMAQObYZgAAAHNJREFUCNdjYGAQBAIBBhBgVJLoEHYEM4WUFBuVjwiABZWUhJTFC8GCRkpKymDVQspOSkqKQiWCQP0mQkAVSsYuAkC22LJAJSXN6SBDxNIuAlVvgTADgUywqBSIqW1yEGSyoFhoaCDEbsaloYFABhhAnAMAv0kURDrmDiQAAAAASUVORK5CYII=)
}

.HD .AvatarsIcon {
    background-position: -976px -988px
}

.FilterActive,
.SortActive {
    box-shadow: inset 0 0 4px 0 rgba(255, 255, 0, .7), 0 0 2px 2px rgba(255, 255, 0, .7)
}

.abs {
    position: absolute;
    z-index: 9
}

.ShopSetBtn {
    position: absolute;
    left: 12px;
    top: 23px;
    width: 20px;
    height: 14px;
    cursor: pointer
}

.ShopSetBtn.row2 {
    left: 12px;
    top: 38px
}

#howtoplay {
    display: none;
    position: absolute;
    left: 185px;
    top: 100px;
    width: 431px;
    height: 329px;
    background: rgba(200, 155, 155, 0.85) url(/static/images/howtoplay.png) no-repeat;
    border-radius: 40px;
    border: 3px black solid
}

#howtoplayClose {
    position: absolute;
    right: -10px;
    top: -10px
}

#FullScreenButton {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAB3RJTUUH3QkVFCMsn/1wowAAAAlwSFlzAAAIMAAACDABDKU4JQAAAARnQU1BAACxjwv8YQUAAAFzSURBVHja7VXLSgNBEOz1AzQmq/kVRYJ68BLxLmJEgh5yjJ8k+BkeDIhGY4yIvyEGFYWslL2zWXcevTMRr9Ztt7tqZmq6ewguErRIAI7w5SbTrPQyCXLo++SBK2ELdCgAnPgF+qh46TUMQx7cYLGUHmMUNhEYoCrSl/BQdgsJOrz5AkPUHPoyHrWMK2YkuYByHhVeucAIsUGv48mgL/C/VipBxb2jahjU0+gRO2PR1X+WIL1s2OP8lC9YMXawgXebnkm4RqUnHWPV8WALHzZdvqo627kmRpq4CNKzE/8+8g8LfzSRa76PhhjZQS9cBbEqpFesO5FtfIrzQh9h3A3304J9w6aR1VR1mM0LTQIHhAn2ph9mP57rZ8elFrnNRw4O02YCS+zyxzyupY772dudLYF21s5QEm1jDaFlLIkButl8lkZaScdZEqUz0dOwkgTNTpcl5qyM02jsE4ie6czWNOF5GVV28GnzP67H4cfVIyHRgW9V3Erh8bjrfQAAAABJRU5ErkJggg==);
    opacity: .5;
    z-index: 1400;
    display: none
}

#FullScreenButton:hover {
    opacity: 1
}

#roomButtonInvite {
    position: absolute;
    left: 238px;
    top: 160px;
    width: 76px;
    text-align: center;
    background: #30f;
    border: 3px solid white;
    padding: 3px;
    border-radius: 5px;
    font-size: 15px
}

#GameShare {
    position: absolute;
    left: 325px;
    top: 541px;
    width: 150px;
    text-align: center;
    background: #30f;
    border: 3px solid white;
    padding: 7px;
    border-radius: 5px
}

#ReplayRestartBtn2 {
    position: absolute;
    left: 316px;
    top: 423px;
    font-size: 26px;
    padding: 13px;
    border-radius: 20px;
    display: none
}

#ShareWindow {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 400px;
    height: 128px;
    background: #1e5799;
    background: linear-gradient(to bottom, #1e5799 0, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    border: 4px solid white;
    border-radius: 20px;
    z-index: 99;
    display: none;
    box-shadow: 4px 4px 10px 3px #000
}

#ShareToTwitter {
    background-position: -33px 0
}

#ShareToEmail {
    background-position: -99px 0
}

#ShareToNewTab {
    background-position: -165px 0
}

.ShareButton {
    width: 32px;
    height: 32px;
    margin: 29px;
    background: url(/static/images/share.png) no-repeat;
    display: inline-block
}

#ShareURL {
    border-color: #b9b9b9;
    width: 265px;
    color: #666;
    padding: 2px;
    margin: 22px 0 0 20px
}

#CopyToClipboardText {
    color: black;
    margin: 0 20px 20px 20px;
    font-size: 12px
}

#ShareWindowClose {
    position: absolute;
    right: -15px;
    top: -15px
}

.ShareGameBtn {
    cursor: pointer;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    background-color: #019ad2;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(#33bcef, #019ad2);
    background-image: linear-gradient(#33bcef, #019ad2);
    border-radius: 5px;
    padding: 0 5px;
    border: 1px solid #66f;
    height: 13px;
    display: inline-block
}

.ShareGameBtn:hover {
    filter: brightness(1.15)
}

.ShareGameBtn:active {
    opacity: .75
}

.CopyBtn {
    font-size: 7px;
    margin-right: 2px
}

.tipsy {
    font-size: 14px;
    position: absolute;
    padding: 5px;
    z-index: 100000;
    pointer-events: none
}

.tipsy-inner {
    background-color: #000;
    color: #FFF;
    max-width: 250px;
    padding: 5px 8px 4px 8px;
    text-align: center;
    border-radius: 3px
}

.tipsy-arrow {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border: 5px dashed #000
}

.tipsy-arrow-n {
    border-bottom-color: #000
}

.tipsy-arrow-s {
    border-top-color: #000
}

.tipsy-arrow-e {
    border-left-color: #000
}

.tipsy-arrow-w {
    border-right-color: #000
}

.tipsy-n .tipsy-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-bottom-style: solid;
    border-top: 0;
    border-left-color: transparent;
    border-right-color: transparent
}

.tipsy-nw .tipsy-arrow {
    top: 0;
    left: 10px;
    border-bottom-style: solid;
    border-top: 0;
    border-left-color: transparent;
    border-right-color: transparent
}

.tipsy-ne .tipsy-arrow {
    top: 0;
    right: 10px;
    border-bottom-style: solid;
    border-top: 0;
    border-left-color: transparent;
    border-right-color: transparent
}

.tipsy-s .tipsy-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top-style: solid;
    border-bottom: 0;
    border-left-color: transparent;
    border-right-color: transparent
}

.tipsy-sw .tipsy-arrow {
    bottom: 0;
    left: 10px;
    border-top-style: solid;
    border-bottom: 0;
    border-left-color: transparent;
    border-right-color: transparent
}

.tipsy-se .tipsy-arrow {
    bottom: 0;
    right: 10px;
    border-top-style: solid;
    border-bottom: 0;
    border-left-color: transparent;
    border-right-color: transparent
}

.tipsy-e .tipsy-arrow {
    right: 0;
    top: 50%;
    margin-top: -5px;
    border-left-style: solid;
    border-right: 0;
    border-top-color: transparent;
    border-bottom-color: transparent
}

.tipsy-w .tipsy-arrow {
    left: 0;
    top: 50%;
    margin-top: -5px;
    border-right-style: solid;
    border-left: 0;
    border-top-color: transparent;
    border-bottom-color: transparent
}

.shake_anim {
    -webkit-animation: shake 120ms linear 3;
    -moz-animation: shake 120ms linear 3;
    -o-animation: shake 120ms linear 3;
    -ms-animation: shake 120ms linear 3;
    animation: shake 120ms linear 3
}

@-webkit-keyframes shake {
    from {
        margin-top: 0
    }

    25% {
        margin-top: -2px
    }

    50% {
        margin-top: 2px
    }

    100% {
        margin-top: -2px
    }
}

@-moz-keyframes shake {
    from {
        margin-top: 0
    }

    25% {
        margin-top: -2px
    }

    50% {
        margin-top: 2px
    }

    100% {
        margin-top: -2px
    }
}

@-o-keyframes shake {
    from {
        margin-top: 0
    }

    25% {
        margin-top: -2px
    }

    50% {
        margin-top: 2px
    }

    100% {
        margin-top: -2px
    }
}

@-ms-keyframes shake {
    from {
        margin-top: 0
    }

    25% {
        margin-top: -2px
    }

    50% {
        margin-top: 2px
    }

    100% {
        margin-top: -2px
    }
}

@keyframes shake {
    from {
        margin-top: 0
    }

    25% {
        margin-top: -2px
    }

    50% {
        margin-top: 2px
    }

    100% {
        margin-top: -2px
    }
}

.Particle {
    position: absolute
}

.AlertBig {
    background-color: #3a92c8 !important;
    background: -webkit-radial-gradient(circle, #94d2f8, #3a92c8) !important;
    background: -moz-radial-gradient(circle, #94d2f8, #3a92c8) !important;
    background: -ms-radial-gradient(circle, #94d2f8, #3a92c8) !important;
    left: 100px !important;
    top: 150px !important;
    width: 600px !important;
    height: 300px !important
}

#BrokerFacepile {
    position: absolute;
    bottom: 0
}

.shop_item_note {
    position: absolute;
    left: 105px;
    top: 16px;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NSIgaGVpZ2h0PSI1MCI+PHRpdGxlPkxheWVyIDE8L3RpdGxlPjx0aXRsZT5MYXllciAxPC90aXRsZT48cGF0aCBzdHJva2U9IiMwMDAwMDAiIGZpbGw9IiNmZmZmMDAiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTcyLjcgMzEuOGwtOC4zIDAuNCAtMi4yIDEwLjIgLTcuMy0yLjUgLTEwLjYgNy44IC00LTQuNiAtMTcuNCA1LjUgMi4zLTcuOCAtMTUuNy0yLjggNC45LTQuMiAtMTAuOC03LjggNy44LTEuOSAtMi40LTEwLjIgOC4xIDEuMSA2LjctOS40IDUuOSAzLjcgMTMuNy01LjYgMS44IDUuMSAxNi40LTAuMSAtMi44IDQuOSAxMy44IDUuNSAtNi42IDMuMiA2LjkgOS40IDAgMCAwIDAgMCAwIDAgMCAwMHoiLz48L3N2Zz4=);
    width: 75px;
    height: 50px;
    z-index: 12
}

.shot_item_note_text {
    position: absolute;
    top: 20px;
    color: red;
    font-weight: bold;
    text-align: center;
    width: 100%;
    font-size: 13px;
    font-family: arial, helvetica, sans-serif
}

.shot_item_note_text2 {
    top: 13px
}

.buy_btn {
    border: 2px solid #000;
    padding: 4px;
    background: #eee;
    width: 73px !important;
    margin-left: 5px;
    margin-top: -7px
}

#buy_panel1 {
    position: absolute;
    top: 294px;
    width: 100%;
    height: 17px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    filter: drop-shadow(2px 2px 6px black)
}

#buy_panel2 {
    position: absolute;
    left: 8px;
    top: 116px;
    width: 143px;
    height: 17px;
    color: #fff;
    font-size: 12px;
    text-align: center
}

#buy_panel3 {
    position: absolute;
    left: 8px;
    top: 30px;
    width: 143px;
    height: 17px;
    color: #fff;
    font-size: 12px;
    text-align: center
}

#buttonSendGift {
    position: absolute;
    left: 40px;
    top: 47px;
    width: 81px;
    height: 64px
}

#buttonSendGift:hover {
    background-position: -82px 0;
    width: 84px;
    cursor: pointer
}

.HD #buttonSendGift {
    background-position: -801.5px -1232.5px
}

.HD #buttonSendGift:hover {
    background-position: -884px -1232.5px
}

#buy_option1 {
    position: absolute;
    left: 90px;
    top: 203px;
    width: 84px;
    height: 19px;
    color: #fede71;
    font-size: 15px;
    text-align: center
}

#buy_option2 {
    position: absolute;
    left: 186px;
    top: 203px;
    width: 84px;
    height: 19px;
    color: #5ff;
    font-size: 15px;
    text-align: center
}

#buy_option3 {
    position: absolute;
    left: 282px;
    top: 203px;
    width: 84px;
    height: 19px;
    color: #64f567;
    font-size: 15px;
    text-align: center
}

#buy_ui {
    position: absolute;
    bottom: 2px;
    left: 2px;
    color: #fff;
    font-size: 10px
}

#slidersection1 {
    position: absolute;
    left: 68px;
    top: 3px;
    width: 160px
}

#slidersection2 {
    position: absolute;
    left: 68px;
    top: 27px;
    width: 160px
}

.tooltip {
    z-index: 5;
    position: absolute;
    display: block;
    top: -25px;
    width: 35px;
    height: 20px;
    color: #fff;
    text-align: center;
    font: 10pt Tahoma, Arial, sans-serif;
    border-radius: 3px;
    border: 1px solid #333;
    -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: -moz-linear-gradient(top, rgba(69, 72, 77, 0.5) 0, rgba(0, 0, 0, 0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(69, 72, 77, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.5)));
    background: -webkit-linear-gradient(top, rgba(69, 72, 77, 0.5) 0, rgba(0, 0, 0, 0.5) 100%);
    background: -o-linear-gradient(top, rgba(69, 72, 77, 0.5) 0, rgba(0, 0, 0, 0.5) 100%);
    background: -ms-linear-gradient(top, rgba(69, 72, 77, 0.5) 0, rgba(0, 0, 0, 0.5) 100%);
    background: linear-gradient(top, rgba(69, 72, 77, 0.5) 0, rgba(0, 0, 0, 0.5) 100%)
}

.volume,
.ui-slider-handle {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAACWCAMAAAAc0dNcAAABDlBMVEUAAAAAAAAlAAAAAAD/AAARERH/AAD/////AAD/AAAAAAAAAAAAAAAYGBiampoAAAAAAAAAAAAAAAD////////T09SBgYEvLzB9fX3w7/A0NDT///88Li4AAADY2Nj///8yMjKysrL/AACFhYWnp6fp6en/AADY2Nj/AACoqKjX19f/29v/EBDbysr/Ghrm5ubq6uv/AAB3eHhubW5iYmL4+Ph0c3RlZWVoaGju7u/S09Tx8vJOTk4/PT309PXg4eKGhoZubm7Pz9HX2Nnc3N7CwsVZWFmJiYmAgICBgIHHyMr7+/w0NDVaWlo0NDQ2NjdcXFxcXV16envbFxfpERG5ur11V1iCZGSdbW2Vfn7y8478AAAAL3RSTlMADQMSCwcXmcriO2FqerEjcUsvYwfkoZ/niOEXKFakNmDDB6S8/m/kj7nno9mp/nq5RXUAAAJaSURBVEjH7JJbC4IwFIBHmNZzQVe6PUTQBTbF+aBgL6bQVUXr//+RNiQanZ3HHgq/px0+xnT7yBdYYNOqZSjCbC9fS6NNFWWKqaEOBlgrY7OnCFWNhwEQlcr8CIrj+RLkNCvgjhO3vTKnFAjCGYvTuzAm+cBmh/Ch3RNdb4U4p4TnWNZ6RzPX03/0Zrt39D9qjAZ95HJIt/Neo3eNvg/+pjUAWaIeWaKWWeBHRAJK9B3uQCNLdFNWGVhiGO+hkSUewkQaWCK3k1RjLMHcZR7RMp2IEvXIEhFEiTUIv1yij5booSVytESrLvGveLJLh0YAAkEQBCX5nFhOvLn8kwKDbIOiih8/rt9LXJTYlDiUGEocSixKbEo8tsSP9khclHhS4lBiKDGUGEosSgwlFiUWJbYk3tdPu+oigxWHQSAMY8WLmtgEkltOLZTdi3PxMA4oRL0k577/q6xt7LYs7H+cj/8TZ4Rc9FkvUvyZn2TXT9bB1Hfy9AnYMFOA7CPtNA/swzR87Q5jWjMG566DeKsu++7IriVTQHTzr5B1GIIL4EskBAjUsVelJ8CKcgGyENzet5JQk40R0EEhi67mpsQh05BqMrhinSNCRH3o+JnWI7bFnflBNNSp9yn6CPAgqBtRU1p9yhH8FqEy+Fa8LaC3TwC+PFvUtzUI00FO0YL1ZUvZAnZGHP/hywVjJXEtZVszXRbelsCMuhJYm7b7/e7hqkyVtdKoZyLIW7XBrMdaaRF8VF1/g2DrfdTIj1caMlKdH1HSNPASMm5GKeVoOGuqNxOMc87Ee/5vfgAzqIxU77cT4QAAAABJRU5ErkJggg==) !important;
    background-repeat: no-repeat
}

.volume {
    display: inline-block;
    width: 25px;
    height: 25px;
    right: -5px;
    top: -7px;
    background-position: 0 -75px;
    position: absolute
}

.ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 25px !important;
    height: 25px !important;
    cursor: pointer;
    background-color: transparent !important;
    background-position: 0 -125px !important;
    font-weight: bold;
    color: #1c94c4;
    outline: 0;
    top: -7px !important;
    margin-left: -12px !important;
    border: none !important
}

.ui-slider-range {
    background: #fff;
    background: -moz-linear-gradient(top, #fff 0, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #eaeaea));
    background: -webkit-linear-gradient(top, #fff 0, #eaeaea 100%);
    background: -o-linear-gradient(top, #fff 0, #eaeaea 100%);
    background: -ms-linear-gradient(top, #fff 0, #eaeaea 100%);
    background: linear-gradient(top, #fff 0, #eaeaea 100%);
    position: absolute;
    border: 0;
    top: 0;
    height: 100%;
    border-radius: 25px
}

#shop_my_items_stats {
    position: absolute;
    left: 15px;
    top: 482px;
    font-size: 10px
}

.yellowBtn {
    display: inline-block;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 4px;
    background-color: #fd9a0f;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #fee94f, #fd9a0f);
    background-image: linear-gradient(top, #fee94f, #fd9a0f);
    border-color: #fa2;
    font-family: Arial, sans-serif;
    text-decoration: none;
    color: #333
}

.yellowBtn:hover {
    background-color: #fd9512;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #fedc4d, #d80);
    background-image: linear-gradient(top, #fedc4d, #d80);
    border-color: #ec8b11
}

.yellowBtn:link,
.yellowBtn:visited {
    color: #333
}

.redBtn {
    display: inline-block;
    padding: 0 6px;
    font-size: 10px;
    font-weight: bold;
    line-height: 15px;
    cursor: pointer;
    border-radius: 4px;
    background-color: #f44336;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #ffcdd2, #f44336);
    background-image: linear-gradient(top, #ffcdd2, #f44336);
    border-color: #d32f2f;
    font-family: Arial, sans-serif;
    text-decoration: none;
    color: #fff
}

.redBtn:hover {
    background-color: #e53935;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #ffb3b2, #b71c1c);
    background-image: linear-gradient(top, #ffb3b2, #b71c1c);
    border-color: #b71c1c
}

.redBtn:active {
    background-color: #e53935;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #b71c1c, #ffb3b2);
    background-image: linear-gradient(top, #b71c1c, #ffb3b2);
    border-color: #b71c1c;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15)
}

.greenBtn {
    display: inline-block;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 4px;
    background-color: #12fd12;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #bfb, #12fd12);
    background-image: linear-gradient(top, #bfb, #12fd12);
    border-color: #4f4;
    font-family: Arial, sans-serif;
    text-decoration: none;
    color: #333
}

.greenBtn:hover {
    background-color: #12fd12;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #12fd12, #bfb);
    background-image: linear-gradient(top, #12fd12, #bfb);
    border-color: #4f4
}

.greenBtn:link,
.greenBtn:visited {
    color: #333
}

.yellowBtnMini {
    display: inline-block;
    padding: 0 10px;
    font-size: 10px;
    font-weight: bold;
    line-height: 10px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 4px;
    background-color: #fd9a0f;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #fee94f, #fd9a0f);
    background-image: linear-gradient(top, #fee94f, #fd9a0f);
    border: 1px solid black;
    font-family: Arial, sans-serif;
    text-decoration: none;
    color: #333
}

.yellowBtnMini:hover {
    background-color: #fd9512;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #fedc4d, #d80);
    background-image: linear-gradient(top, #fedc4d, #d80);
    border: 1px solid yellow
}

#changePassLink {
    position: absolute;
    white-space: nowrap;
    left: 10px;
    top: 74px;
    border: 1px gray solid;
    padding: 6px 10px;
    font-size: 7px;
    line-height: 5px;
    font-family: Emoji, Arial, sans-serif;
    font-weight: normal
}

#changePassword {
    position: absolute;
    left: 20px;
    top: 143px;
    opacity: .3;
    width: 300px
}

#LoginWindow {
    width: 700px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    border-radius: 20px;
    box-shadow: black 10px 10px 50px 10px;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    z-index: 199;
    display: none;
    background-image: -ms-linear-gradient(top left, #03ffff 0, #05008f 100%);
    background-image: -moz-linear-gradient(top left, #03ffff 0, #05008f 100%);
    background-image: -o-linear-gradient(top left, #03ffff 0, #05008f 100%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #03ffff), color-stop(1, #05008f));
    background-image: -webkit-linear-gradient(top left, #03ffff 0, #05008f 100%);
    background-image: linear-gradient(to bottom right, #03ffff 0, #05008f 100%)
}

#LoginWindow.InFacebookCanvas {
    width: 350px !important;
    height: 200px !important;
    margin-left: -184px !important
}

#LoginMute {
    position: absolute;
    left: 400px;
    top: -30px;
    border: 3px solid black;
    background-color: yellow;
    cursor: pointer
}

#LoginLang {
    position: absolute;
    left: 266px;
    top: -30px;
    width: 25px;
    height: 21px;
    border: 3px solid black;
    background-color: blue;
    text-align: center;
    color: white;
    padding-top: 4px;
    cursor: pointer
}

#loginTitle {
    position: absolute;
    top: 14px;
    text-align: center;
    width: 347px;
    font-size: 24px;
    color: white;
    text-shadow: black -2px 0 4px, black 0 2px 4px, black 2px 0 4px, black 0 -2px 4px, black -1px 0 1px, black 0 1px 1px, black 1px 0 1px, black 0 -1px 1px
}

#registerTitle {
    position: absolute;
    text-align: center;
    width: 348px;
    left: 352px;
    top: 14px;
    font-size: 24px;
    color: white;
    text-shadow: black -2px 0 4px, black 0 2px 4px, black 2px 0 4px, black 0 -2px 4px, black -1px 0 1px, black 0 1px 1px, black 1px 0 1px, black 0 -1px 1px
}

#LoginPart {
    position: absolute;
    left: 30px;
    top: 62px
}

.inputField {
    font-size: 18px;
    padding: 4px 10px;
    border-color: #bdc7d8;
    border-radius: 5px;
    margin: 5px
}

#LoginUsername {
    width: 250px
}

#LoginPass {
    width: 175px
}

#name,
#password {
    width: 270px
}

#name {
    margin-top: 17px
}

#pplink3 {
    position: absolute;
    right: 37px;
    bottom: -30px;
    font-size: 12px;
    color: #0cf
}

#toslink3 {
    position: absolute;
    left: 37px;
    bottom: -30px;
    font-size: 12px;
    color: #0cf
}

.blueBtn {
    display: inline-block;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    background-color: #ccc;
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    font-family: Arial, sans-serif;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    background-color: #019ad2;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(#33bcef, #019ad2);
    background-image: linear-gradient(#33bcef, #019ad2);
    border-color: #057ed0;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: white !important
}

.blueBtn:hover {
    background-color: #0271bf;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(#2daddc, #0271bf);
    background-image: linear-gradient(#2daddc, #0271bf);
    border-color: #096eb3
}

.blueBtn:active {
    background-color: #2daddc;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(#0271bf, #2daddc);
    background-image: linear-gradient(#0271bf, #2daddc);
    border-color: #096eb3
}

.yellowBtn {
    display: inline-block;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 4px;
    background-color: #fd9a0f;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #fee94f, #fd9a0f);
    background-image: linear-gradient(top, #fee94f, #fd9a0f);
    border-color: #fa2;
    font-family: Arial, sans-serif;
    text-decoration: none;
    color: #333
}

.yellowBtn:hover {
    background-color: #fd9512;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, #fedc4d, #d80);
    background-image: linear-gradient(top, #fedc4d, #d80);
    border-color: #ec8b11
}

.yellowBtn:active {
    background-color: #fedc4d;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(#d80, #fedc4d);
    background-image: linear-gradient(#d80, #fedc4d);
    border-color: #ec8b11
}

.resetPass a {
    font-size: 16px;
    color: #0cf;
    padding-left: 8px;
    line-height: 40px
}

#LoginWindowBG {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: 99;
    position: absolute
}

#LoginOR1 {
    position: absolute;
    left: 0;
    top: 208px;
    font-size: 18px;
    font-style: italic;
    width: 347px;
    text-align: center
}

#LoginSap {
    position: absolute;
    left: 347px;
    width: 5px;
    height: 300px;
    background: black
}

#LoginSapH {
    position: absolute;
    top: 200px;
    width: 350px;
    height: 5px;
    background: black
}

#RegisterPart {
    position: absolute;
    left: 374px;
    top: 47px
}

.RegisterSelect {
    border: 1px solid #bdc7d8;
    font-size: 13px;
    height: 30px;
    padding: 5px
}

.formLine {
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 18px
}

.fieldInfo {
    font-size: 11px;
    font-style: italic;
    width: 165px;
    display: inline-block
}

.registerButton {
    text-align: center;
    box-shadow: inset 0 1px 1px #a4e388;
    border-color: #3b6e22 #3b6e22 #2c5115;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    letter-spacing: 1px;
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-family: 'Freight Sans Bold', 'lucida grande', tahoma, verdana, arial, sans-serif !important;
    font-weight: normal !important;
    text-rendering: optimizelegibility;
    font-size: 19px;
    line-height: 126%;
    padding: 7px 25px;
    background: -webkit-gradient(linear, center top, center bottom, from(#67ae55), to(#578843));
    background: -webkit-linear-gradient(top, #67ae55, #578843);
    background-color: #69a74e;
    box-shadow: inset 0 1px 1px #a4e388;
    border-color: #3b6e22 #3b6e22 #2c5115
}

.registerButton:hover {
    background: -webkit-gradient(linear, center top, center bottom, from(#79bc64), to(#578843));
    background: -webkit-linear-gradient(top, #79bc64, #578843)
}

.behindDialog {
    -webkit-filter: grayscale(50%);
    -moz-filter: grayscale(50%);
    -ms-filter: grayscale(50%);
    filter: grayscale(50%)
}

.errorlist {
    color: red;
    text-align: left
}

#GameOverMyGPGot {
    position: absolute;
    right: 0;
    width: 800px;
    text-align: center;
    top: 170px;
    font-size: 30px;
    color: #fff
}

#GameOverMyGP {
    position: absolute;
    right: 0;
    width: 800px;
    text-align: center;
    top: 200px;
    font-size: 70px;
    color: #fff
}

#GameOverMyGPNext {
    position: absolute;
    right: 0;
    width: 800px;
    text-align: center;
    top: 270px;
    font-size: 30px;
    color: #f3c
}

#GameOverMyGoldGot {
    position: absolute;
    right: 0;
    width: 800px;
    text-align: center;
    top: 370px;
    font-size: 30px;
    color: #ffea4a
}

#GameOverMyGold {
    position: absolute;
    right: 0;
    width: 800px;
    text-align: center;
    top: 400px;
    font-size: 65px;
    color: #ffea4a
}

#chat_divs {
    position: relative;
    z-index: 110
}

.ghost {
    opacity: .5;
    animation: grayspin_anim 2s linear infinite;
    -webkit-animation: grayspin_anim 2s linear infinite;
    transform-origin: 10px -20px;
    -webkit-transform-origin: 10px -20px
}

#score_panel {
    position: absolute;
    right: 7px;
    top: -59px;
    width: 133px;
    height: 54px;
    background: url(/static/images/score_panel.png)
}

#score_panel_a {
    position: absolute;
    left: 45px;
    top: 8px;
    font-size: 36px;
    color: #f08
}

#score_panel_b {
    position: absolute;
    left: 105px;
    top: 8px;
    font-size: 36px;
    color: #42f
}

.noPointerEvents {
    pointer-events: none
}

.country {
    position: absolute;
    font-size: 7px;
    color: white
}

.ShotTrace {
    position: absolute;
    background-repeat: no-repeat;
    -webkit-transform-origin: left 50%;
    -moz-transform-origin: left 50%;
    -ms-transform-origin: left 50%;
    -o-transform-origin: left 50%;
    transform-origin: left 50%
}

.ui-helper-hidden {
    display: none
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
    content: "";
    display: table;
    border-collapse: collapse
}

.ui-helper-clearfix:after {
    clear: both
}

.ui-helper-clearfix {
    min-height: 0
}

.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0)
}

.ui-front {
    z-index: 100
}

.ui-state-disabled {
    cursor: default !important
}

.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat
}

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    min-height: 0
}

.ui-accordion .ui-accordion-icons {
    padding-left: 2.2em
}

.ui-accordion .ui-accordion-noicons {
    padding-left: .7em
}

.ui-accordion .ui-accordion-icons .ui-accordion-icons {
    padding-left: 2.2em
}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px
}

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default
}

.ui-button {
    display: inline-block;
    position: relative;
    padding: 0;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    overflow: visible
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
    text-decoration: none
}

.ui-button-icon-only {
    width: 2.2em
}

button.ui-button-icon-only {
    width: 2.4em
}

.ui-button-icons-only {
    width: 3.4em
}

button.ui-button-icons-only {
    width: 3.7em
}

.ui-button .ui-button-text {
    display: block;
    line-height: normal
}

.ui-button-text-only .ui-button-text {
    padding: .4em 1em
}

.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
    padding: .4em;
    text-indent: -9999999px
}

.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: .4em 1em .4em 2.1em
}

.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: .4em 2.1em .4em 1em
}

.ui-button-text-icons .ui-button-text {
    padding-left: 2.1em;
    padding-right: 2.1em
}

input.ui-button {
    padding: .4em 1em
}

.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px
}

.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -8px
}

.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
    left: .5em
}

.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
    right: .5em
}

.ui-buttonset {
    margin-right: 7px
}

.ui-buttonset .ui-button {
    margin-left: 0;
    margin-right: -.3em
}

input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 1px
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px
}

.ui-datepicker .ui-datepicker-next {
    right: 2px
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0
}

.ui-datepicker select.ui-datepicker-month-year {
    width: 100%
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 49%
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: 700;
    border: 0
}

.ui-datepicker td {
    border: 0;
    padding: 1px
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em;
    width: auto;
    overflow: visible
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left
}

.ui-datepicker.ui-datepicker-multi {
    width: auto
}

.ui-datepicker-multi .ui-datepicker-group {
    float: left
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0
}

.ui-datepicker-rtl {
    direction: rtl
}

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
    float: right
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px
}

.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0
}

.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px
}

.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: 0;
    overflow: auto
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer
}

.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px
}

.ui-draggable .ui-dialog-titlebar {
    cursor: move
}

.ui-menu {
    list-style: none;
    padding: 2px;
    margin: 0;
    display: block;
    outline: 0
}

.ui-menu .ui-menu {
    margin-top: -3px;
    position: absolute
}

.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
}

.ui-menu .ui-menu-divider {
    margin: 5px -2px 5px -2px;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-width: 1px 0 0
}

.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0;
    font-weight: 400
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: 400;
    margin: -1px
}

.ui-menu .ui-state-disabled {
    font-weight: 400;
    margin: .4em 0 .2em;
    line-height: 1.5
}

.ui-menu .ui-state-disabled a {
    cursor: default
}

.ui-menu-icons {
    position: relative
}

.ui-menu-icons .ui-menu-item a {
    position: relative;
    padding-left: 2em
}

.ui-menu .ui-icon {
    position: absolute;
    top: .2em;
    left: .2em
}

.ui-menu .ui-menu-icon {
    position: static;
    float: right
}

.ui-progressbar {
    height: 2em;
    text-align: left;
    overflow: hidden
}

.ui-progressbar .ui-progressbar-value {
    margin: -1px;
    height: 100%
}

.ui-progressbar .ui-progressbar-overlay {
    background: url(images/animated-overlay.gif);
    height: 100%;
    filter: alpha(opacity=25);
    opacity: .25
}

.ui-progressbar-indeterminate .ui-progressbar-value {
    background-image: none
}

.ui-resizable {
    position: relative
}

.ui-resizable-handle {
    position: absolute;
    font-size: .1px;
    display: block
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
    display: none
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px
}

.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted #000
}

.ui-slider {
    position: relative;
    text-align: left
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0
}

.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit
}

.ui-slider-horizontal {
    height: .8em
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0
}

.ui-slider-horizontal .ui-slider-range-max {
    right: 0
}

.ui-slider-vertical {
    width: .8em;
    height: 100px
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%
}

.ui-slider-vertical .ui-slider-range-min {
    bottom: 0
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0
}

.ui-spinner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    vertical-align: middle
}

.ui-spinner-input {
    border: 0;
    background: 0;
    color: inherit;
    padding: 0;
    margin: .2em 0;
    vertical-align: middle;
    margin-left: .4em;
    margin-right: 22px
}

.ui-spinner-button {
    width: 16px;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: default;
    display: block;
    overflow: hidden;
    right: 0
}

.ui-spinner a.ui-spinner-button {
    border-top: 0;
    border-bottom: 0;
    border-right: 0
}

.ui-spinner .ui-icon {
    position: absolute;
    margin-top: -8px;
    top: 50%;
    left: 0
}

.ui-spinner-up {
    top: 0
}

.ui-spinner-down {
    bottom: 0
}

.ui-spinner .ui-icon-triangle-1-s {
    background-position: -65px -16px
}

.ui-tabs {
    position: relative;
    padding: .2em
}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: .5em 1em;
    text-decoration: none
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 1px
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
    cursor: text
}

.ui-tabs .ui-tabs-nav li a,
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    cursor: pointer
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: 0
}

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa
}

body .ui-tooltip {
    border-width: 2px
}

.ui-widget {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em
}

.ui-widget .ui-widget {
    font-size: 1em
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1em
}

.ui-widget-content {
    border: 1px solid #aaa;
    background: #fff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
    color: #222
}

.ui-widget-content a {
    color: #222
}

.ui-widget-header {
    border: 1px solid #aaa;
    background: #ccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
    color: #222;
    font-weight: 700
}

.ui-widget-header a {
    color: #222
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    font-weight: 400;
    color: #555
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #555;
    text-decoration: none
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #999;
    background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
    font-weight: 400;
    color: #212121
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
    color: #212121;
    text-decoration: none
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid #aaa;
    background: #fff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
    font-weight: 400;
    color: #212121
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #212121;
    text-decoration: none
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #fcefa1;
    background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;
    color: #363636
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
    color: #363636
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border: 1px solid #cd0a0a;
    background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
    color: #cd0a0a
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
    color: #cd0a0a
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
    color: #cd0a0a
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
    font-weight: 700
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70);
    font-weight: 400
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none
}

.ui-state-disabled .ui-icon {
    filter: Alpha(Opacity=35)
}

.ui-icon {
    width: 16px;
    height: 16px
}

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url(images/ui-icons_222222_256x240.png)
}

.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_222222_256x240.png)
}

.ui-state-default .ui-icon {
    background-image: url(images/ui-icons_888888_256x240.png)
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url(images/ui-icons_454545_256x240.png)
}

.ui-state-active .ui-icon {
    background-image: url(images/ui-icons_454545_256x240.png)
}

.ui-state-highlight .ui-icon {
    background-image: url(images/ui-icons_2e83ff_256x240.png)
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(images/ui-icons_cd0a0a_256x240.png)
}

.ui-icon-blank {
    background-position: 16px 16px
}

.ui-icon-carat-1-n {
    background-position: 0 0
}

.ui-icon-carat-1-ne {
    background-position: -16px 0
}

.ui-icon-carat-1-e {
    background-position: -32px 0
}

.ui-icon-carat-1-se {
    background-position: -48px 0
}

.ui-icon-carat-1-s {
    background-position: -64px 0
}

.ui-icon-carat-1-sw {
    background-position: -80px 0
}

.ui-icon-carat-1-w {
    background-position: -96px 0
}

.ui-icon-carat-1-nw {
    background-position: -112px 0
}

.ui-icon-carat-2-n-s {
    background-position: -128px 0
}

.ui-icon-carat-2-e-w {
    background-position: -144px 0
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px
}

.ui-icon-triangle-1-s {
    background-position: -64px -16px
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px
}

.ui-icon-arrow-1-s {
    background-position: -64px -32px
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px
}

.ui-icon-arrowthick-1-n {
    background-position: 0 -48px
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px
}

.ui-icon-arrow-4 {
    background-position: 0 -80px
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px
}

.ui-icon-extlink {
    background-position: -32px -80px
}

.ui-icon-newwin {
    background-position: -48px -80px
}

.ui-icon-refresh {
    background-position: -64px -80px
}

.ui-icon-shuffle {
    background-position: -80px -80px
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px
}

.ui-icon-folder-open {
    background-position: -16px -96px
}

.ui-icon-document {
    background-position: -32px -96px
}

.ui-icon-document-b {
    background-position: -48px -96px
}

.ui-icon-note {
    background-position: -64px -96px
}

.ui-icon-mail-closed {
    background-position: -80px -96px
}

.ui-icon-mail-open {
    background-position: -96px -96px
}

.ui-icon-suitcase {
    background-position: -112px -96px
}

.ui-icon-comment {
    background-position: -128px -96px
}

.ui-icon-person {
    background-position: -144px -96px
}

.ui-icon-print {
    background-position: -160px -96px
}

.ui-icon-trash {
    background-position: -176px -96px
}

.ui-icon-locked {
    background-position: -192px -96px
}

.ui-icon-unlocked {
    background-position: -208px -96px
}

.ui-icon-bookmark {
    background-position: -224px -96px
}

.ui-icon-tag {
    background-position: -240px -96px
}

.ui-icon-home {
    background-position: 0 -112px
}

.ui-icon-flag {
    background-position: -16px -112px
}

.ui-icon-calendar {
    background-position: -32px -112px
}

.ui-icon-cart {
    background-position: -48px -112px
}

.ui-icon-pencil {
    background-position: -64px -112px
}

.ui-icon-clock {
    background-position: -80px -112px
}

.ui-icon-disk {
    background-position: -96px -112px
}

.ui-icon-calculator {
    background-position: -112px -112px
}

.ui-icon-zoomin {
    background-position: -128px -112px
}

.ui-icon-zoomout {
    background-position: -144px -112px
}

.ui-icon-search {
    background-position: -160px -112px
}

.ui-icon-wrench {
    background-position: -176px -112px
}

.ui-icon-gear {
    background-position: -192px -112px
}

.ui-icon-heart {
    background-position: -208px -112px
}

.ui-icon-star {
    background-position: -224px -112px
}

.ui-icon-link {
    background-position: -240px -112px
}

.ui-icon-cancel {
    background-position: 0 -128px
}

.ui-icon-plus {
    background-position: -16px -128px
}

.ui-icon-plusthick {
    background-position: -32px -128px
}

.ui-icon-minus {
    background-position: -48px -128px
}

.ui-icon-minusthick {
    background-position: -64px -128px
}

.ui-icon-close {
    background-position: -80px -128px
}

.ui-icon-closethick {
    background-position: -96px -128px
}

.ui-icon-key {
    background-position: -112px -128px
}

.ui-icon-lightbulb {
    background-position: -128px -128px
}

.ui-icon-scissors {
    background-position: -144px -128px
}

.ui-icon-clipboard {
    background-position: -160px -128px
}

.ui-icon-copy {
    background-position: -176px -128px
}

.ui-icon-contact {
    background-position: -192px -128px
}

.ui-icon-image {
    background-position: -208px -128px
}

.ui-icon-video {
    background-position: -224px -128px
}

.ui-icon-script {
    background-position: -240px -128px
}

.ui-icon-alert {
    background-position: 0 -144px
}

.ui-icon-info {
    background-position: -16px -144px
}

.ui-icon-notice {
    background-position: -32px -144px
}

.ui-icon-help {
    background-position: -48px -144px
}

.ui-icon-check {
    background-position: -64px -144px
}

.ui-icon-bullet {
    background-position: -80px -144px
}

.ui-icon-radio-on {
    background-position: -96px -144px
}

.ui-icon-radio-off {
    background-position: -112px -144px
}

.ui-icon-pin-w {
    background-position: -128px -144px
}

.ui-icon-pin-s {
    background-position: -144px -144px
}

.ui-icon-play {
    background-position: 0 -160px
}

.ui-icon-pause {
    background-position: -16px -160px
}

.ui-icon-seek-next {
    background-position: -32px -160px
}

.ui-icon-seek-prev {
    background-position: -48px -160px
}

.ui-icon-seek-end {
    background-position: -64px -160px
}

.ui-icon-seek-start {
    background-position: -80px -160px
}

.ui-icon-seek-first {
    background-position: -80px -160px
}

.ui-icon-stop {
    background-position: -96px -160px
}

.ui-icon-eject {
    background-position: -112px -160px
}

.ui-icon-volume-off {
    background-position: -128px -160px
}

.ui-icon-volume-on {
    background-position: -144px -160px
}

.ui-icon-power {
    background-position: 0 -176px
}

.ui-icon-signal-diag {
    background-position: -16px -176px
}

.ui-icon-signal {
    background-position: -32px -176px
}

.ui-icon-battery-0 {
    background-position: -48px -176px
}

.ui-icon-battery-1 {
    background-position: -64px -176px
}

.ui-icon-battery-2 {
    background-position: -80px -176px
}

.ui-icon-battery-3 {
    background-position: -96px -176px
}

.ui-icon-circle-plus {
    background-position: 0 -192px
}

.ui-icon-circle-minus {
    background-position: -16px -192px
}

.ui-icon-circle-close {
    background-position: -32px -192px
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px
}

.ui-icon-circle-check {
    background-position: -208px -192px
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 4px
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 4px
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 4px
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 4px
}

.ui-widget-overlay {
    background: #aaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: .3;
    filter: Alpha(Opacity=30)
}

.ui-widget-shadow {
    margin: -8px 0 0 -8px;
    padding: 8px;
    background: #aaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: .3;
    filter: Alpha(Opacity=30);
    border-radius: 8px
}

#lobby_channel {
    position: absolute;
    left: 17px;
    bottom: 4px;
    width: 85px;
    background: #ddf
}

.fbfan {
    border: 0;
    overflow: hidden;
    height: 70px
}

.Alt {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    font-size: 14px;
    font-family: Arial, sans-serif;
    pointer-events: none;
    background: black;
    display: none;
    text-shadow: none;
    font-weight: normal;
    min-width: 10px;
    text-align: center
}

.Alt.Alt2 {
    color: yellow
}

.AvNotif {
    position: absolute;
    top: -4px;
    right: -7px;
    color: white;
    font-size: 9px;
    font-family: Arial, sans-serif;
    background: red;
    display: none;
    text-align: center;
    border-radius: 20px;
    min-width: 7px;
    line-height: 8px;
    padding: 2px
}

#ranking_panel_open .Alt {
    transform: rotate(-90deg)
}

#shop_delete_avatar {
    position: absolute;
    left: 198px;
    top: 483px;
    width: 25px;
    height: 33px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAhCAMAAAAbHvCRAAABm1BMVEUAAABjgrVKXYRjbYRjfbWcrtalstZjea1KYYycqs5abZRjcYxCWXulrtZrgr1jgr2Ek7Vada1jdZxabZxKVWs6TGuMm71rhr1adaVacZxSbZxSYHtCVHtSWmsxQVo6RFKcrs6Ups6cpsWUosWMl7Vaea1acaVjdZRjcZRSaZRSZJRjaXtaZHMvQGMxPlCtut6cps6Eka1jfa1zhKVrfaVaa4xKZYxaaIRSZIRaaXtKWXs6THNaYGtSWWM6RWNCS1otOE7e5ffW2ubO1ObFyd6UpsWJlr17jq17ia2cn6t7haJreZxaaZRKYpRrdYxjbYxSZYxCVoQ6UntSXXNCVXNCUXMxRWtCTWNKT106RVopNUoeLEfm6fva3++ltt7BxtaxtMWcor2UoL2UoLVaebWpqLGMkq1zhq17iqVjd6VScaVzgpxzfZxjeZxSaZxKZ5xrd5RjaYRaY3trb3NKWXNCUWtra2M6SWMpPVpCSVKtvua1vs6MnsVrhsWEjrWEjqVSbaWMhpRzfZRKXYxCXYxKYYQxSXM6PUIhLTpuvSuaAAAAAXRSTlMAQObYZgAAAlxJREFUKM9VkuWSIjEURtNJu2DdjbszDO4DA+Pu7u7usu67j7090MDu+ZFKfaeSW7m5oA33dH//9HX0sAP8B4scue3e/kPHi/NZirLNOBKV5Km+jYGj0c39aS+lp2VH42A0PntwsNfbH/ri7xt4PypqNaYfr0o+UZvFTVr9fu9AREtl/ONBTOHjHAeAa9KEYaf2o43+GS2G63ElxzHNJAJoThGWnc+7mzsW7C3F35y2jEDpWoNj5t2+7ZQiVDR4/gUBzm5S9gHDaaAe1i+z8vBXFLDxIIX9A0WJ0A5nYghMLgdEqyVIpakAZRZFqxi0QpqGaxMArHw3pdNma9AyExEpKq0x04rpQQAAtB7QNurWVwuEdD5WAW9UlvB2lchPGvLVWCeo45KV92k1GG62wi5eXlyoLqnGUSiWIbTzC3J1ccHpzENnj2q6L94Z4PMfO+9co/PxKu+ML3OquUmMhD6EIC3LPOx6LJ7f1Vj1ttvERTgheA1ZXUoXzrpPHDXQoDS/lRknCbdheIv0FoZ9U6sV1SCJ1B2ThNfwSSD9No8f9XCqCdeIkXGB8LJDAjFsY1J3ruaQsK/EWMhNeHI+wn0+zYytdAOVjt/E0DFDeIoegkEZZiqOmoZzEcZsUvAVk8JgIeO7dYWbprTKGHMMaWSTpNGmM86vtmYxumT0hRhSZ0iSqQfPmNQqA1AsO3TpVgwjnNgGvylNa8LGrrpyg4mRS4G8md4rrCPQojJrhjYuzPp1tscHu/LRbVbKuJ7mlXbCyJx6pAlaXrw+0+vPrsouVbThOuclSSpxreAvPbNiK6OX708AAAAASUVORK5CYII=);
    background-repeat: no-repeat
}

.HD #shop_delete_avatar {
    background-position: -594.5px -219px
}

#buy_gift_btn {
    position: absolute;
    left: 4px;
    top: 74px;
    color: yellow;
    z-index: 1;
    width: 155px;
    text-align: center;
    filter: drop-shadow(2px 4px 6px black);
    pointer-events: none
}

#Mic {
    position: absolute;
    left: 520px;
    bottom: 2px;
    z-index: 120
}

.MicButton {
    background: #5685e4 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAMAAADaFm2tAAAAXVBMVEVWheT///9cieVymej3+f3+/v/7/P7z9v2kvvCduO91nOlqk+fm7ftvl+hXheTY4/i6zfSTse3p7/tlkOZjj+ZXhuTs8fvQ3ffH1/auxfKYtO6Ws+6JqeyIqex+ouowNxdcAAAAhklEQVQI123OxxaDIBBA0WEcOlJE7Pr/n5nIgazydncxBd68Ucp46J3EGJ1deWLf3Nw48pd8bBxYbfhDk7ATk4GdbJ+1tIMWz9w2P0LDKKJPknOZfBQDlI3u+lW5aSsA1kllEa2SztY7q1hCWMTaDuMVpYwXQg9D+AEPrSen9YGVmViNMsAHqlUGC96mVo4AAAAASUVORK5CYII=) center center no-repeat;
    width: 40px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid #009
}

.MicButton.CanClick:hover {
    -webkit-filter: hue-rotate(245deg);
    -moz-filter: hue-rotate(245deg);
    -ms-filter: hue-rotate(245deg);
    -o-filter: hue-rotate(245deg);
    filter: hue-rotate(245deg)
}

.MicButton.recording {
    -webkit-filter: hue-rotate(125deg);
    -moz-filter: hue-rotate(125deg);
    -ms-filter: hue-rotate(125deg);
    -o-filter: hue-rotate(125deg);
    filter: hue-rotate(125deg)
}

.MicButton.recording:hover {
    -webkit-filter: hue-rotate(175deg);
    -moz-filter: hue-rotate(175deg);
    -ms-filter: hue-rotate(175deg);
    -o-filter: hue-rotate(175deg);
    filter: hue-rotate(175deg)
}

#DragonRecorderStatus {
    position: absolute;
    left: 458px;
    bottom: 22px;
    z-index: 121
}

.btnYes {
    display: inline-block;
    background: #5685e4 url(/static/images/yes.png) center center no-repeat;
    width: 60px;
    height: 28px;
    margin: 1px;
    border: 1px solid black;
    border-radius: 7px
}

.btnRetry {
    display: inline-block;
    background: #5685e4 url(/static/images/retry.png) center center no-repeat;
    width: 60px;
    height: 28px;
    margin: 1px;
    border: 1px solid black;
    border-radius: 7px
}

.btnNo {
    display: inline-block;
    background: #5685e4 url(/static/images/no.png) center center no-repeat;
    width: 60px;
    height: 28px;
    margin: 1px;
    border: 1px solid black;
    border-radius: 7px
}

.zotata-chat-line {
    min-height: 14px;
    margin-top: -2px;
    line-height: 12px
}

.zotata-chat-line:hover,
.pmLine:hover {
    background: rgba(127, 255, 255, 0.15)
}

.zotata-chat-line audio {
    vertical-align: middle
}

.ztext2 {
    line-height: 13px;
    margin-left: 6px
}

.BtnBcm {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAB3RJTUUH5AcKDh0T7dDPiAAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAA5nSURBVHja7VhpkB3Vef1u76/fm7fNm1WzSYwUWZKlIQShBQyS7MIhUNiF5QpVJKmkbJdJvBQkTpHEWCGQhdgW2KRs40K2qYKyjE3ZVkxBJT+wBJKQ0IJKYpBGGs2MRrO9fe+9b06/N0ijKYNEkh/+4a7qmTfzbvc9fe75znduE/2WH2zxP1bcsCNlVKsbBS71MGJ5Lrl7J4a/MftbAbBz+Zc/InHpa5zTasf2XEEUmED8TSL/oenxb51ZfHFn/wMfZ4KwQ5DiG1ynSromUTwWJ5GV3hAYPX744GO/+L8CFN/90Nr7lW5yvIcHB/vvuvfTmyL33bsp2tvTFh0fz62czZRXJjo3nagVD80tvDgS3zjIGLuNCVqP71vEuEfM98j3Xcn1eG97/7Z8euqvzhP9lAfjt2/fLq5evVoYHh7mHxigErr+UyFd/fw9n1gf+ru/2crXrulmH17dyfVwiE1O1pZdnMyu7EzdcqxcfiO9GKAghHqIHCLukuc6xJgUkZTYoO9Zy9q7sxcyM3tHg/EARh8EXHAIlz5xSjDO5f6+GMmyxHzfp1Sqhf3l5zbzz392M638vf4tZcv+VseyL625dLHAJFzYkInPBXI5+Y7vQx0+WbZInsM3Ksx66JN3PfwxzrnQmKVxbheb5wdgMBK/KeRztrGrq719/R/0cD2kMMfxSBTFBpMoGDZybm6pZTkro4lbDlYKB/Lh2IZB4vxWSYn2iIpAsqowSRFFH0tdq1chcE7RluhSjzvX/WT3vslz55pMEr0dLDiAPnLtAI3K4bHuvi3ry2U+VK2W2aaNyzE3Jw9sKIrMliyJkWG49PapqQ7GeKyUP7CHCWtTqKJtLYmOvlgqQS3JVhIUnQyLc9PBehMTNT1Gnm30ZnO1HonWTldrRycAzG+C2wFW23G+97JfQbMW2pCu1SvXu47WJUs+/9DKLiZJIrmuR7GYTqoi0qnhGbmzM7r67OlXHrPNXl2StT9q6+4f6OrroNbOTqx7iEybmCDJIocuHadOtmUT97WlTODXJRLrJ4rFQ+ebM94GebTh995rA1gpHbgoqTcWS5Xy1tk5U4+2qLRieQcXILbge8vy6PndB91qzXxrevLVZ4hCKrG2uweWDy5bsaqHBgZ78RAqSaJEydYWkhSFW6Q6FUMQPZbEati9nmv3tOqrxz5WtWaG6Wfu+4ELDunyx0DsjGenn3zB41+MHj9+9l//w7JS0CH75N1DDXH/6uVhIZevCoVC5bl5zmUX1SFLAsUiMnW3qyS4AMhjABmnTCLCLmaq8iSlyYImuSOQyiJbmODxE0s2f4Omhl++mgYXAGS8qYlH/MLMU8+oAw+Ih98cedD3/BX5osUqFYu98OKRQJOH4nH9lfxMcE0yDplKEgDqukTRiEolVaLOtgi1pXQa0rqoZrpsbDLLc9mqc35kSinkfMpOj2x1eLXc1vNFrI4IQbB22zTIsG0SfB5lAivjwQ9bpR+el67EG4i3ecyOP/F0d/+D1vDpC/f//cNjKyVR4KGQehQ3eXJu7MmzzVEtrVh92fehNsenas2mQtGEblySJY1WDeqUiCmUL7Swi9Om/Koi0/G3Z2hyTiVfsDfLgrUc4oF5CLIoyaQFjY3TALx1XPbpXyyixQCvPKYndv6of/BvT4uqcCuQZxzOXga4mUsCDmlh3FMUBYE0TA56qVQqk2nUSdU4LV0aozZZoaV9EWpPoaTlEF+2vNvpaJeVyXPTbemJdJttO6SGQhRu0UnRdJLUGFlmfqVVn/uTkP5g5X0A3iolk2v1Sr40yTTtF1ZZzFWrX88uHOHZtstkxQe7FFYVkqAS26zRxMUc1cGooIZpfMqiflhUHAU30Btmy5dF5YRapV/zMk2PjlClXCFZSVE4EqdkRxvJoTBVKz4VM7XrLaO6Q9q+/QXxv18/cOfgssQnQG9fPmd4pu2iun3Jc7kE9rnvcT/eLsjtPQ8NV+q1XZkLTx1oUigGa4K8AJPGErlgo5TL0fmR85SeK5JhCpRsb6W5EqOOVgDs0um6fokNLuuhsbOzFIu3ULFcIx3aHRrqpZs2rKP2zqQzOjohHzoop44U7JR0+OSRG6NR9aGwHtvQ1ZUibY3c8DtRYhSYi6JIFDCUztTpnTMXNvhpvz+x4q8/OzLyzTGAE2HUMHQiFxrwLZfsukkWWFGw9vVyiWRdp6msSbmSTdm8RflKK9ULFpmeAoBx0rIBwBANLo3TzTd20ECfJp2IttPU6Dk65FZQxR7fjCpc99GtH6KbN/VxTZMZ2hwFlRkAg9+iN4vQluG/9Eqr8KPn9m7L5yv3gb9HyTaKPtc9TRVRtRoQOo0CqeRK5IPNTDRNdS5T3VfQ9BlNhSSaySD1ODVK5zFW0SiEuRRZIAG2zsGIgEpR9BC+E/HgLgBy6nQdz7jzD9eEhtZ1s/dSZG8PeoSu0Z5fvekD95+mLwAgZQvk9DghTaCOVMCZSJEwKhS0emDVQbJxLQPMGtCZjLDDqViqoq2WKJ8rU7VuAHgwxqTR8Tzte3OaRrNLaHq6RNN5e94HkUAEsDU1XSQApKCq+Ly38/kPwc+QplAhXwVTLUIiHu57+1jwzckiUberaSIAoqlgMk0NLAeTejLuZZNRq5GQyxJcCvAZ2NIo8LxqKY9qNxrsIf7Q2TNpyhRPkZacRNCo0OxYM8RLnkgHQ7LwmZ+8eBQ3Nvm6tb1BR0HvREU6bvO0XZqdLfNX940i0cy4nkPfaz6CcalNNVqN55LrmMiEWEamoyE305wBQJZRIxERLhGOkcIYSa5LAggQRBlGKKLTWFScS5Obm6OKUaZaodwEKIb0X9uGsevkyfGvFIqctUSGG8XRED6STDAzsAIoY7OzuLhi7LHK5lNNWGvieBipMRgRS5HQTfQWnFFSUdWebZJRLRODLzoACZUGroxZZejQagCUJBXsQngONFjBkjOkJxBi2ciUAcCJE48U25d+6ZtChZ2ePXZig2k4LcK8EgNgAmNOUJCKJBRVRTkDkg5mMt851xzRkWgAhP8x3DgU0imZ6KBENEUesxr91wcQDQasA3yLrJICZ0JoIA9bAyaIAEmNhwmpKkXh+8lIDNp1aSJzkc4bF5q9OD327WCv8QOiVc+Fkre0LSwOw3UNKu/K/+bSiYJBQQqCbamC3CKFsXGKUyreTjWnACupNqQSwzImwi0U08NBAKayUSWsKGKc24hyOnSpA2BHMkV9bT3cgv9XUThjc1O0qJMM20Z+eGoxjNbWv2gRIslwxvNKdPEJ44qAAbqbfRgFIsLfEAaDFQDbYCsKA4ffIbRGwGJY1ZE5tWCvgAquYawBoCYykRL0S4rAMzU97Bp+RfZFLL0UpfftxTfc8LRcs8fW1i3/XogstVTUXtOHvnqklK2NXAyAiswLyrNuujQ1hwkNmUqgRkKiEQUEXPijioki0KWqag2rQQLm6D3IA1heqEPE6YHlumlSplSkusfkYq1M2fJswXEKc+8NEC1w5vChexJJ/asa8dWwDDukCveJsjDpK8I/YsSzeEQZBSm48Lea4UFrPmEzDYByo8qCIkBcQ5fhpEFnviTwkmM6RbOucCTvZLwPOof9gFEohGozWTxEUCAlqlYLbwk+fX8hQDbvFjg+Gus+cuhR2/PuQMS67oHPbKX16weUffvP0i/3HBuQZfmx6fMA6PG6pEle3XRoNlMhy5WpBh9Fgg1yHe7mkw2mfPzmnsXdus0KlbJSyKc5GkdRF+S8JkvctC0pUyhQsYoO5HsDoiCO45rnSzPf3S0tBveRbV+/sVSqPjWXqQzdcfuQeveda+mOj69GC1RYJCL777wzIwyfzvc044yVh485DmyhVKzhJmhrNXPe4OGBMrqHjD0KYo7rWI5VLyn1ugDrMdFr3P3J1s5dES1iW06m3Uax1KBJ7rsxUZBKlmPsb3aSyz5LQxsevjWXLT2zpHdw8FP3dNBdd6yidWv73n0AsMCFyckMz+Uyk83LCgVZjLn1uo1OVMCyePBJAGWBPWFfLEBfEH/NNZhrVBSjMAs/5Gh12QOOae8af+fR3/hqxF3wecESb++r1/2dK5avHLx9W5d7/+e2SEFlBWxA0VQq1/nP95xkJ05N2rW6ubN5TcVGoPANpJg5pBLLERshQUORSEwh7D65zW00l5rsWhJ80SXHKO23jfo/lfM/eI2u4bgEsGdZ/5+ZdfvDt93STV+4f2ujOwQeFSSaYG/83I8Ps2ee3UupZOSUqIZ+nG1wmAijj4vwLUR9g9BLSIPg1SDHu3bQ4pjhGbJVQ6YwER7qpeOe7zwOcP91WVq8aVdXBdiX/P2ujm55oC/WpBnxPQiiwXrt+uE+/vzut4I3XWcmpwtfSE/szAQb71Ao1Rpk1cCMfQRC28d4eJ2JgnBqBdcsFmUOL8NyIiBU99uO+Xhx7vuvXJ5+BwB+OpCPd1WA05OFOaPGaS7d3/wCrQm64gFz+/bPslIpP1Uo1r6cnnjiDaInGmPCyZYEEitKADIIuoJlQT9o/LUKs4pZ2S5kkOvqqMzqceTBfwe4/1xQlLRwk3ZVgBcmcs/qunz7awfyA+MTLzWEXq7abP+B05TP515PJfSvzYzvfHXhxYqiIKBw5rtBknbgX6bvM+Zxz5dFT234Gwr9gMv9f8tNL9wDb59/afVT72oArwioN938z3+czZX/fGa2pIswe1GS6rLETpbK1vfsytNnF1zT0My7LzAlObHB8+oIpLAJZDEJ1atqCVhGGbrgj4yO7Pxfv8icZ7D5VuHQ6/+wGw3uxbYlG1cF/aha9/LFue9MLHqgBYIWG3/yRsdwKVhqVQ52t2badwvDkih9e0vLipdGLzMnXitziwA2qmh+8qNOZuroifcYv6jagnnmVwuaUBC3wuE47lYex5/fPXXssZ+fvWL8tQP73fH/dfwPdB4/gjRrnUIAAAAASUVORK5CYII=);
    background-size: cover;
    width: 20px;
    height: 20px
}

#lobbyBcm {
    position: absolute;
    left: 557px;
    top: 575px
}

#roomBcm {
    position: absolute;
    left: 560px;
    top: 578px
}

#gameBcm {
    position: absolute;
    left: 217px;
    top: 489px
}

.AnimEnterFromBottom {
    -webkit-animation: AnimEnterFromBottom .5s;
    animation: AnimEnterFromBottom .5s;
    animation-fill-mode: forwards
}

@keyframes AnimEnterFromBottom {
    from {
        transform: translate(0, 1000px)
    }

    to {
        transform: translate(0, 0)
    }
}

@-webkit-keyframes AnimEnterFromBottom {
    from {
        transform: translate(0, 1000px)
    }

    to {
        transform: translate(0, 0)
    }
}

.AnimEnterScaleIn {
    animation: AnimEnterScaleIn .4s;
    transform-origin: 50% 50% !important;
    animation-fill-mode: forwards
}

@keyframes AnimEnterScaleIn {
    from {
        transform: scale(0) rotate(45deg)
    }

    to {
        transform: scale(1) rotate(0)
    }
}

@-webkit-keyframes AnimEnterScaleIn {
    from {
        transform: scale(0) rotate(45deg)
    }

    to {
        transform: scale(1) rotate(0)
    }
}

.AnimEnterScaleIn15 {
    animation: AnimEnterScaleIn15 .4s;
    transform-origin: 50% 50% !important;
    animation-fill-mode: forwards
}

@keyframes AnimEnterScaleIn15 {
    from {
        transform: scale(0) rotate(45deg)
    }

    to {
        transform: scale(1.5) rotate(0)
    }
}

@-webkit-keyframes AnimEnterScaleIn15 {
    from {
        transform: scale(0) rotate(45deg)
    }

    to {
        transform: scale(1.5) rotate(0)
    }
}

.AnimScaleOut {
    animation: AnimScaleOut .2s;
    transform-origin: 50% 50% !important;
    pointer-events: none;
    animation-fill-mode: forwards
}

@keyframes AnimScaleOut {
    from {
        transform: scale(1) rotate(0)
    }

    to {
        transform: scale(0) rotate(45deg)
    }
}

.AnimEnterFadeIn {
    animation: AnimEnterFadeIn .2s
}

.AnimEnterFadeIn4 {
    animation: AnimEnterFadeIn .4s
}

.AnimEnterFadeInLong {
    animation: AnimEnterFadeIn 2s
}

@-webkit-keyframes AnimEnterFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes AnimEnterFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.AnimEnterFadeOut {
    animation: AnimEnterFadeOut .2s;
    transform-origin: 50% 50%
}

@keyframes AnimEnterFadeOut {
    0 {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes AnimEnterFadeOut {
    0 {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.ForceHW {
    -webkit-transform: translateZ(0)
}

#notificationBtn {
    position: absolute;
    top: 100px;
    right: 0;
    width: 48px;
    height: 48px;
    z-index: 99
}

.SD #notificationBtn {
    background-image: url(/static/images/zicon_48.png)
}

.HD #notificationBtn {
    background-position: -942.5px -92.5px
}

.TotalUnread {
    position: absolute;
    font-size: 14px;
    top: -2px;
    right: 6px;
    background: red;
    padding: 3px;
    border-radius: 21px;
    color: white
}

#show_more_friends_button {
    width: 100%
}

#next_avatar_particles {
    position: absolute;
    right: 10px;
    bottom: -1px;
    z-index: 999
}

#next_avatar {
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: greenyellow;
    position: absolute;
    right: 10px;
    bottom: -1px;
    text-align: center;
    background: rgba(0, 50, 200, 0.9);
    border-radius: 10px 10px 0 0;
    padding: 4px 8px;
    border: 1px solid black;
    box-shadow: 2px 4px 20px 7px black
}

#next_avatar_name {
    color: yellow
}

#next_avatar_timer {
    color: yellow
}

#next_avatar_line {
    width: 100%
}

#shopPages {
    position: absolute;
    left: 661px;
    top: 505px;
    font-size: 12px;
    color: black;
    text-align: center;
    width: 70px
}

#Dragon2D {
    background-color: black
}

#Dragon2D canvas {
    background-color: black
}

#LoginHelp {
    position: absolute;
    left: 0;
    top: -190px;
    width: 630px;
    padding: 15px;
    border: 3px solid black;
    border-radius: 20px;
    background: deepskyblue;
    background: linear-gradient(to bottom, rgba(122, 188, 255, 1) 0, rgba(96, 171, 248, 1) 44%, rgba(64, 150, 238, 1) 100%);
    color: white
}

.LoginHelpTitle {
    color: orange;
    font-size: 20px
}

#LoginHelpArrow {
    position: absolute;
    left: -60px
}

.LoginHelpLink {
    color: cyan !important;
    text-decoration: underline !important
}

#LoginFBStatus {
    position: absolute;
    left: 0;
    top: 240px;
    width: 347px;
    font-size: 16px;
    text-align: center;
    font-style: italic;
    color: #ddf
}

#LoginFBStatus.FBFail {
    left: 27px;
    width: 321px;
    color: #fca;
    font-size: 14px
}

.FBLoader {
    background-image: url(/static/images/me.gif);
    width: 28px;
    height: 19px;
    vertical-align: text-bottom;
    display: inline-block
}

.inputFieldD {
    width: 162px;
    padding: 0
}

.Center {
    text-align: center
}

.Bold {
    font-weight: bold
}

#male:focus,
#female:focus,
#GenderM:focus,
#GenderF:focus {
    outline: 5px solid #8f8
}

.DragonWindow {
    position: absolute;
    border: black solid 2px;
    border-radius: 10px;
    color: white;
    z-index: 11;
    box-shadow: 5px 5px 20px 5px #000, inset 0 0 0 1px #fff;
    transform-origin: 0 0;
    background: #bdcae6;
    background: -moz-linear-gradient(top, #bdcae6 0, #8ba5c5 100%);
    background: -webkit-linear-gradient(top, #bdcae6 0, #8ba5c5 100%);
    background: linear-gradient(to bottom, #bdcae6 0, #8ba5c5 100%)
}

.DragonWindowTitleBar {
    height: 26px;
    line-height: 26px;
    border-radius: 10px 10px 0 0;
    padding: 0 15px;
    box-shadow: inset 0 0 0 1px #fff;
    background: #b414a4;
    background: -moz-linear-gradient(left, #b414a4 0, #316194 100%);
    background: -webkit-linear-gradient(left, #b414a4 0, #316194 100%);
    background: linear-gradient(to right, #b414a4 0, #316194 100%)
}

.DragonWindowClose {
    width: 48px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 2px
}

.SD .DragonWindowClose {
    background-image: url(/static/images/close.png)
}

.HD .DragonWindowClose {
    background-position: -942.5px -142px
}

.DragonWindowBody {
    padding: 5px;
    font-size: 14px
}

#freecashWindow {
    display: none;
    width: 500px;
    left: 82px;
    top: 100px;
    z-index: 111
}

#freecashWindow thead {
    color: yellow
}

#freecashWindow td {
    padding: 5px
}

.yellow {
    color: yellow
}

.nowrap {
    white-space: nowrap
}

.meter {
    height: 12px;
    position: relative;
    background: #555;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 2px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3)
}

.meter>span {
    display: block;
    height: 100%;
    border-radius: 20px;
    background-color: #2bc253;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2bc253), color-stop(1, #54f054));
    background-image: -moz-linear-gradient(center bottom, #2bc253 37%, #54f054 69%);
    -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden
}

.meter>span:after,
.stripes,
.animate>span>span {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    z-index: 1;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    -webkit-animation: move_stripes 2s linear infinite;
    -moz-animation: move_stripes 2s linear infinite;
    animation: move_stripes 2s linear infinite;
    border-radius: 20px;
    overflow: hidden
}

.animate>span:after {
    display: none
}

@-webkit-keyframes move_stripes {
    0 {
        background-position: 0 0
    }

    100% {
        background-position: 50px 50px
    }
}

@-moz-keyframes move_stripes {
    0 {
        background-position: 0 0
    }

    100% {
        background-position: 50px 50px
    }
}

.orange>span {
    background-color: #f1a165;
    background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
    background-image: -webkit-linear-gradient(#f1a165, #f36d0a)
}

.red>span {
    background-color: #f0a3a3;
    background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
    background-image: -webkit-linear-gradient(#f0a3a3, #f42323)
}

.nostripes>span>span,
.nostripes>span:after {
    -webkit-animation: none;
    -moz-animation: none;
    background-image: none
}

.meterText {
    position: absolute;
    top: 0;
    width: 100%;
    font-size: 11px;
    text-align: center;
    line-height: 16px
}

#CollectCashBtn {
    width: 61px;
    height: 61px;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    margin-top: 2px
}

.SD #CollectCashBtn {
    background-image: url(/static/images/collectcash2.png);
    background-position: -1px -1px
}

.HD #CollectCashBtn {
    background-position: -851px -153.5px
}

#CollectCashBeta {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    background: url(/static/images/beta.png)
}

.QuestionMark {
    width: 17px;
    height: 17px;
    background: url(/static/images/qmark.png);
    display: inline-block;
    vertical-align: bottom
}

.SD .QuestionMark {
    background-image: url(/static/images/qmark.png)
}

.HD .QuestionMark {
    background-position: -576px -156px
}

#CollectStars {
    text-align: right;
    padding-right: 127px;
    white-space: nowrap
}

.EmptyStar {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle
}

.SD .EmptyStar {
    background-image: url(/static/images/star-empty-24.png)
}

.HD .EmptyStar {
    background-position: -913.5px -179px
}

.FullStar {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle
}

.SD .FullStar {
    background-image: url(/static/images/star-full-24.png)
}

.HD .FullStar {
    background-position: -913.5px -153.5px
}

.PrixTimer {
    position: absolute;
    left: 3px;
    top: 47px;
    z-index: 1
}

.BrokerRanksSize {
    left: 110px
}

.poolBtn {
    width: 16px;
    height: 16px;
    background: dimgray no-repeat;
    margin-left: 4px;
    padding: 0 8px 0 24px;
    border-radius: 4px;
    box-shadow: inset 0 0 1px 0 black;
    cursor: pointer
}

.poolBtnYes {
    background-image: url(/static/images/emo/yes.png)
}

.poolBtnNo {
    background-image: url(/static/images/emo/no.png)
}

.poolBtn1 {
    background-image: url(/static/images/emo/1.png)
}

.poolBtn2 {
    background-image: url(/static/images/emo/2.png)
}

.poolBtn3 {
    background-image: url(/static/images/emo/3.png)
}

.poolBtn4 {
    background-image: url(/static/images/emo/4.png)
}

.ContextMenu {
    position: absolute;
    background: #f0f0f0 url(/static/images/contextmenu.png) repeat-y;
    border: 1px solid #979797;
    min-width: 160px;
    padding: 2px;
    box-shadow: inset 0 0 0 2px #f5f5f5;
    z-index: 1999;
    color: black
}

.ContextMenuAction {
    position: relative;
    border: 1px solid transparent;
    padding: 3px 3px 3px 30px;
    font-size: 12px;
    cursor: pointer
}

.ContextMenuAction:hover {
    background: rgba(230, 240, 255, 0.4);
    background: linear-gradient(to bottom, rgba(242, 248, 255, 0.4) 0, rgba(216, 235, 255, 0.4) 100%);
    border: 1px solid #aecff7;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px #f5f5f5
}

.ContextMenuIcon {
    position: absolute;
    left: -2px;
    top: -1px;
    width: 30px;
    text-align: center;
    font-size: 18px
}

.ContextMenuDefaultAction {
    font-weight: bold
}

#TouchShot {
    position: absolute;
    top: 40%;
    bottom: 0;
    left: 40px;
    width: 80px;
    height: 80px;
    border-radius: 80px;
    box-shadow: 4px 4px 15px 7px #310;
    border: 1px solid black;
    opacity: .8;
    text-align: center;
    font-size: 13px;
    color: darkblue;
    z-index: 777;
    display: none;
    background: #feccb1;
    background: -moz-radial-gradient(center, ellipse cover, #feccb1 0, #f17432 50%, #ea5507 51%, #fb955e 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #feccb1 0, #f17432 50%, #ea5507 51%, #fb955e 100%);
    background: radial-gradient(ellipse at center, #feccb1 0, #f17432 50%, #ea5507 51%, #fb955e 100%);
    animation: blinking_glow_anim 1s ease-in infinite alternate;
    -webkit-animation: blinking_glow_anim 1s ease-in infinite alternate
}

#TouchShot.active {
    animation: blinking_glow_anim .5s ease-in infinite alternate;
    -webkit-animation: blinking_glow_anim .5s ease-in infinite alternate;
    background: #f3c5bd;
    background: -moz-radial-gradient(center, ellipse cover, #f3c5bd 0, #e86c57 50%, #ea2803 51%, #f60 75%, #c72200 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #f3c5bd 0, #e86c57 50%, #ea2803 51%, #f60 75%, #c72200 100%);
    background: radial-gradient(ellipse at center, #f3c5bd 0, #e86c57 50%, #ea2803 51%, #f60 75%, #c72200 100%)
}

#TouchBarMsg {
    position: absolute;
    bottom: 11px;
    left: 172px;
    width: 60px;
    height: 27px;
    border-radius: 5px;
    box-shadow: 4px 4px 15px 7px #310;
    border: 1px solid black;
    opacity: .8;
    text-align: center;
    font-size: 12px;
    line-height: 13px;
    color: darkblue;
    z-index: 777;
    display: none;
    background: #feccb1;
    background: -moz-radial-gradient(center, ellipse cover, #feccb1 0, #f17432 50%, #ea5507 51%, #fb955e 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #feccb1 0, #f17432 50%, #ea5507 51%, #fb955e 100%);
    background: radial-gradient(ellipse at center, #feccb1 0, #f17432 50%, #ea5507 51%, #fb955e 100%);
    animation: blinking_glow_anim 1s ease-in infinite alternate;
    -webkit-animation: blinking_glow_anim 1s ease-in infinite alternate
}

.OptionText {
    position: relative;
    top: -3px
}

#OptionRendererLabel {
    margin-left: 20px
}

#OptionRenderer {
    font-size: 10px;
    margin-top: 5px;
    vertical-align: bottom;
    margin-left: 7px;
    width: 112px
}

#dialogGiftBuyRoom {
    text-align: right
}

#theme_select {
    font-size: 11px;
    margin-left: 4px
}

.iHaveAvatar {
    filter: sepia(100%)
}







.itemTimer {
    position: absolute;
    right: 10px;
    background: white;
    border-radius: 50px;
    width: 59px;
    height: 59px;
    z-index: 1;
    display: none
}











.progress-circle {
    font-size: 11px;
    margin: 2px;
    position: relative;
    padding: 0;
    width: 55px;
    height: 55px;
    background-color: #f8b741;
    border-radius: 50%;
    line-height: 5em
}

.progress-circle:after {
    border: 0;
    position: absolute;
    top: 5px;
    left: 5px;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    background-color: white;
    content: " "
}

.left-half-clipper {
    border-radius: 50%;
    width: 5em;
    height: 5em;
    position: absolute;
    clip: rect(0, 5em, 5em, 2.5em)
}

.progress-circle.over50 .left-half-clipper {
    clip: rect(auto, auto, auto, auto)
}

.value-bar {
    position: absolute;
    clip: rect(0, 2.5em, 5em, 0);
    width: 5em;
    height: 5em;
    border-radius: 50%;
    border: .45em solid #53777a;
    box-sizing: border-box
}

.progress-circle.over50 .first50-bar {
    position: absolute;
    clip: rect(0, 5em, 5em, 2.5em);
    background-color: #53777a;
    border-radius: 50%;
    width: 5em;
    height: 5em
}

.progress-circle:not(.over50) .first50-bar {
    display: none
}

.progress-circle.p0 .value-bar {
    display: none
}

.progress-circle.p1 .value-bar {
    transform: rotate(4deg)
}

.progress-circle.p2 .value-bar {
    transform: rotate(7deg)
}

.progress-circle.p3 .value-bar {
    transform: rotate(11deg)
}

.progress-circle.p4 .value-bar {
    transform: rotate(14deg)
}

.progress-circle.p5 .value-bar {
    transform: rotate(18deg)
}

.progress-circle.p6 .value-bar {
    transform: rotate(22deg)
}

.progress-circle.p7 .value-bar {
    transform: rotate(25deg)
}

.progress-circle.p8 .value-bar {
    transform: rotate(29deg)
}

.progress-circle.p9 .value-bar {
    transform: rotate(32deg)
}

.progress-circle.p10 .value-bar {
    transform: rotate(36deg)
}

.progress-circle.p11 .value-bar {
    transform: rotate(40deg)
}

.progress-circle.p12 .value-bar {
    transform: rotate(43deg)
}

.progress-circle.p13 .value-bar {
    transform: rotate(47deg)
}

.progress-circle.p14 .value-bar {
    transform: rotate(50deg)
}

.progress-circle.p15 .value-bar {
    transform: rotate(54deg)
}

.progress-circle.p16 .value-bar {
    transform: rotate(58deg)
}

.progress-circle.p17 .value-bar {
    transform: rotate(61deg)
}

.progress-circle.p18 .value-bar {
    transform: rotate(65deg)
}

.progress-circle.p19 .value-bar {
    transform: rotate(68deg)
}

.progress-circle.p20 .value-bar {
    transform: rotate(72deg)
}

.progress-circle.p21 .value-bar {
    transform: rotate(76deg)
}

.progress-circle.p22 .value-bar {
    transform: rotate(79deg)
}

.progress-circle.p23 .value-bar {
    transform: rotate(83deg)
}

.progress-circle.p24 .value-bar {
    transform: rotate(86deg)
}

.progress-circle.p25 .value-bar {
    transform: rotate(90deg)
}

.progress-circle.p26 .value-bar {
    transform: rotate(94deg)
}

.progress-circle.p27 .value-bar {
    transform: rotate(97deg)
}

.progress-circle.p28 .value-bar {
    transform: rotate(101deg)
}

.progress-circle.p29 .value-bar {
    transform: rotate(104deg)
}

.progress-circle.p30 .value-bar {
    transform: rotate(108deg)
}

.progress-circle.p31 .value-bar {
    transform: rotate(112deg)
}

.progress-circle.p32 .value-bar {
    transform: rotate(115deg)
}

.progress-circle.p33 .value-bar {
    transform: rotate(119deg)
}

.progress-circle.p34 .value-bar {
    transform: rotate(122deg)
}

.progress-circle.p35 .value-bar {
    transform: rotate(126deg)
}

.progress-circle.p36 .value-bar {
    transform: rotate(130deg)
}

.progress-circle.p37 .value-bar {
    transform: rotate(133deg)
}

.progress-circle.p38 .value-bar {
    transform: rotate(137deg)
}

.progress-circle.p39 .value-bar {
    transform: rotate(140deg)
}

.progress-circle.p40 .value-bar {
    transform: rotate(144deg)
}

.progress-circle.p41 .value-bar {
    transform: rotate(148deg)
}

.progress-circle.p42 .value-bar {
    transform: rotate(151deg)
}

.progress-circle.p43 .value-bar {
    transform: rotate(155deg)
}

.progress-circle.p44 .value-bar {
    transform: rotate(158deg)
}

.progress-circle.p45 .value-bar {
    transform: rotate(162deg)
}

.progress-circle.p46 .value-bar {
    transform: rotate(166deg)
}

.progress-circle.p47 .value-bar {
    transform: rotate(169deg)
}

.progress-circle.p48 .value-bar {
    transform: rotate(173deg)
}

.progress-circle.p49 .value-bar {
    transform: rotate(176deg)
}

.progress-circle.p50 .value-bar {
    transform: rotate(180deg)
}

.progress-circle.p51 .value-bar {
    transform: rotate(184deg)
}

.progress-circle.p52 .value-bar {
    transform: rotate(187deg)
}

.progress-circle.p53 .value-bar {
    transform: rotate(191deg)
}

.progress-circle.p54 .value-bar {
    transform: rotate(194deg)
}

.progress-circle.p55 .value-bar {
    transform: rotate(198deg)
}

.progress-circle.p56 .value-bar {
    transform: rotate(202deg)
}

.progress-circle.p57 .value-bar {
    transform: rotate(205deg)
}

.progress-circle.p58 .value-bar {
    transform: rotate(209deg)
}

.progress-circle.p59 .value-bar {
    transform: rotate(212deg)
}

.progress-circle.p60 .value-bar {
    transform: rotate(216deg)
}

.progress-circle.p61 .value-bar {
    transform: rotate(220deg)
}

.progress-circle.p62 .value-bar {
    transform: rotate(223deg)
}

.progress-circle.p63 .value-bar {
    transform: rotate(227deg)
}

.progress-circle.p64 .value-bar {
    transform: rotate(230deg)
}

.progress-circle.p65 .value-bar {
    transform: rotate(234deg)
}

.progress-circle.p66 .value-bar {
    transform: rotate(238deg)
}

.progress-circle.p67 .value-bar {
    transform: rotate(241deg)
}

.progress-circle.p68 .value-bar {
    transform: rotate(245deg)
}

.progress-circle.p69 .value-bar {
    transform: rotate(248deg)
}

.progress-circle.p70 .value-bar {
    transform: rotate(252deg)
}

.progress-circle.p71 .value-bar {
    transform: rotate(256deg)
}

.progress-circle.p72 .value-bar {
    transform: rotate(259deg)
}

.progress-circle.p73 .value-bar {
    transform: rotate(263deg)
}

.progress-circle.p74 .value-bar {
    transform: rotate(266deg)
}

.progress-circle.p75 .value-bar {
    transform: rotate(270deg)
}

.progress-circle.p76 .value-bar {
    transform: rotate(274deg)
}

.progress-circle.p77 .value-bar {
    transform: rotate(277deg)
}

.progress-circle.p78 .value-bar {
    transform: rotate(281deg)
}

.progress-circle.p79 .value-bar {
    transform: rotate(284deg)
}

.progress-circle.p80 .value-bar {
    transform: rotate(288deg)
}

.progress-circle.p81 .value-bar {
    transform: rotate(292deg)
}

.progress-circle.p82 .value-bar {
    transform: rotate(295deg)
}

.progress-circle.p83 .value-bar {
    transform: rotate(299deg)
}

.progress-circle.p84 .value-bar {
    transform: rotate(302deg)
}

.progress-circle.p85 .value-bar {
    transform: rotate(306deg)
}

.progress-circle.p86 .value-bar {
    transform: rotate(310deg)
}

.progress-circle.p87 .value-bar {
    transform: rotate(313deg)
}

.progress-circle.p88 .value-bar {
    transform: rotate(317deg)
}

.progress-circle.p89 .value-bar {
    transform: rotate(320deg)
}

.progress-circle.p90 .value-bar {
    transform: rotate(324deg)
}

.progress-circle.p91 .value-bar {
    transform: rotate(328deg)
}

.progress-circle.p92 .value-bar {
    transform: rotate(331deg)
}

.progress-circle.p93 .value-bar {
    transform: rotate(335deg)
}

.progress-circle.p94 .value-bar {
    transform: rotate(338deg)
}

.progress-circle.p95 .value-bar {
    transform: rotate(342deg)
}

.progress-circle.p96 .value-bar {
    transform: rotate(346deg)
}

.progress-circle.p97 .value-bar {
    transform: rotate(349deg)
}

.progress-circle.p98 .value-bar {
    transform: rotate(353deg)
}

.progress-circle.p99 .value-bar {
    transform: rotate(356deg)
}

.progress-circle.p100 .value-bar {
    transform: rotate(360deg)
}

#myLoginFB {
    position: absolute;
    z-index: 99;
    cursor: pointer;
    left: 50px;
    top: 54px;
    width: 297px;
    height: 55px
}

.pmMe {
    color: #bfb
}

.pmNotMe {
    color: #eff
}

#RoomWatchers {
    bottom: 171px;
    right: 495px;
    z-index: 1
}

#GameWatchers {
    position: absolute;
    bottom: 124px;
    left: 250px
}

.WatchersBtn {
    position: absolute;
    font-size: 12px;
    text-shadow: none
}

img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em
}

#camera {
    position: absolute
}

.Male {
    display: inline-block;
    background: url(/static/images/gender.png) no-repeat;
    width: 22px;
    height: 21px;
    vertical-align: sub
}

.Female {
    display: inline-block;
    background: url(/static/images/gender.png) -23px 0 no-repeat;
    width: 22px;
    height: 21px;
    vertical-align: sub
}

#chargeMyUserID {
    position: absolute;
    top: 35px;
    right: 0;
    text-align: center;
    width: 172px;
    cursor: initial
}

.slidecontainer {
    width: 100%
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    height: 9px;
    outline: 0;
    transition: filter .2s;
    border: 1px solid #aaa;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: inset 0 0 3px 1px #888
}

.slider:hover {
    filter: brightness(1.15)
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid #333;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: inset 0 0 3px 3px #888
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    cursor: pointer;
    border: 1px solid #333;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: inset 0 0 3px 3px #888
}

#ReplayPanel {
    padding: 5px;
    overflow: auto;
    clear: both;
    height: calc(100% - 23px);
    direction: rtl;
    text-align: left
}

#ReplayPanel2 {
    direction: ltr;
    text-align: left
}

#ReplayRestartBtn {
    font-size: 30px;
    height: 50px;
    width: 62px
}

#ReplayPauseBtn {
    font-size: 30px;
    height: 50px;
    width: 62px
}

#ReplaySlider {
    width: 95%
}

#ReplayTime {
    font-size: 16px
}

#ReplayTimeTD {
    text-align: center;
    width: 100%
}

#ReplaySpeed {
    transform: rotate(270deg);
    position: relative;
    top: 109px;
    width: 150px
}

.ReplaySpeedLine1 {
    margin-left: 70px
}

.ReplaySpeedLine {
    margin: 11px;
    margin-left: 93px
}

#formLineGender {
    margin: 21px 28px 5px 28px
}

#formLineSubmit {
    margin: 30px;
    text-align: center
}

.MainTheme {
    color: blue
}

.CurAutoTheme {
    color: orangered
}

#roomTutorialBack {
    position: absolute;
    right: 19px;
    bottom: 35px;
    display: none;
    pointer-events: none
}

#roomTutorialBack svg {
    width: 153px;
    height: 106px
}

#roomTutorialBack div {
    position: absolute;
    top: 11px;
    padding: 7px 17px;
    color: white
}

#roomTutorialStart {
    position: absolute;
    left: 229px;
    top: 152px;
    display: none;
    z-index: 11;
    pointer-events: none
}

#roomTutorialStart svg {
    width: 101px;
    height: 70px
}

#roomTutorialStart div {
    position: absolute;
    top: 0;
    padding: 6px 10px;
    color: white
}

#gameguidelink {
    font-size: 2em
}

#tosDiv {
    position: absolute;
    left: 3px;
    bottom: 3px;
    font-size: 20px;
    padding: 5px;
    line-height: 30px
}

.Guide {
    background: url(/static/images/help.svg) no-repeat;
    background-size: 50px 50px;
    width: 50px;
    height: 50px
}

#GuideMain {
    display: inline-block;
    padding-left: 60px;
    margin-left: 15px;
    width: 192px;
    line-height: 50px;
    font-size: 22px;
    text-align: left;
    margin-top: 40px
}

#GuideRanks {
    display: inline-block;
    padding-left: 60px;
    margin-left: 15px;
    width: 192px;
    line-height: 50px;
    font-size: 20px
}

#GuideLogin {
    position: absolute;
    left: 324px;
    top: -25px
}

#GuideServers {
    position: absolute;
    left: 40px;
    top: -25px
}

#GuideLobby {
    position: absolute;
    right: 84px;
    bottom: 7px
}

#GuideShop {
    position: absolute;
    left: 78px;
    bottom: 11px
}

#fps {
    position: absolute;
    white-space: nowrap;
    font-size: 8px;
    left: 1px;
    display: none;
    z-index: 999;
    pointer-events: none
}

#fps.canvas {
    color: #ff0
}

#fps.webgl {
    color: #9f9
}

#ping {
    position: absolute;
    white-space: nowrap;
    font-size: 8px;
    left: 1px;
    top: 10px;
    display: none;
    z-index: 999
}

#infoVipBadge {
    position: absolute;
    left: 175px;
    top: 72px;
    display: none
}

.vipicon {
    position: relative;
    background-size: cover;
    width: 30px;
    height: 30px
}

.vip1 {
    background-image: url(/static/images/vip1.png)
}

.vip2 {
    background-image: url(/static/images/vip2.png)
}

.vip3 {
    background-image: url(/static/images/vip3.png)
}

.vip4 {
    background-image: url(/static/images/vip4.png)
}

.vip5 {
    background-image: url(/static/images/vip5.png)
}

.vip6 {
    background-image: url(/static/images/vip6.png)
}

.vip7 {
    background-image: url(/static/images/vip7.png)
}

.vip8 {
    background-image: url(/static/images/vip8.png)
}

.vip9 {
    background-image: url(/static/images/vip9.png)
}

.vip10 {
    background-image: url(/static/images/vip10.png)
}

.viptext {
    position: absolute;
    bottom: -5px;
    font-size: 8px;
    text-align: center;
    width: 100%;
    text-shadow: -2px 0 4px black, 0 2px 4px black, 2px 0 4px black, 0 -2px 4px black, 0 -1px 4px black, 1px 0 4px black;
    filter: drop-shadow(0 0 2px magenta)
}

#myInfoBox {
    box-shadow: white 0 0 15px, white 0 0 15px inset;
    border: 2px solid white
}

#container.Lobby.Auto #itemsSelection,
#container.Lobby.Auto #friendsList,
#container.Lobby.Auto #guildMembersList {
    box-shadow: white 0 0 15px, white 0 0 15px inset;
    border: 2px solid white;
    left: 582px
}

#container.Lobby #itemsSelection #MissionsBtnRoom {
    display: none !important
}

#SelectMap {
    position: absolute;
    z-index: 30;
    left: 0;
    top: 0;
    width: 800px;
    height: 600px;
    background: rgba(0, 0, 0, 0.4);
    display: none
}

#SelectMap.nobg {
    background: 0
}

.selectMap {
    position: absolute;
    left: 142px;
    top: 282px;
    width: 213px;
    height: 49px;
    transform: scale(0.9);
    transition: left .5s ease-out, top .5s ease-out;
    cursor: pointer
}

.selectMap:hover {
    z-index: 111 !important
}

.mapSelectLock {
    position: absolute;
    left: 98px;
    top: 15px
}

#sc {
    display: none
}

#slidersection2 .volume.Loading,
#LoginMute.Loading {
    background-image: url(/static/images/loader124.gif) !important;
    background-position: 0 0 !important;
    background-size: contain !important
}

#mobileInput {
    position: fixed;
    left: 0;
    top: 0;
    background: darkblue;
    border: 1px solid black;
    height: 20px;
    width: 100%;
    color: white;
    z-index: 99999
}

#shopSetName {
    position: absolute;
    top: 7px;
    left: 260px;
    display: none;
    font-size: 12px;
    white-space: nowrap
}

.shopSetBack {
    width: 20px;
    height: 14px;
    display: inline-block;
    vertical-align: middle
}

#SetBroadcastURL {
    height: 11px;
    font-size: 10px;
    padding: 0;
    width: 120px
}

.RankingVideoBtn {
    height: 15px;
    vertical-align: bottom;
    cursor: pointer
}

.RankingVideoBtn.FB {
    filter: hue-rotate(220deg) brightness(1.5)
}

#shopMaxStats {
    position: absolute;
    left: -11px;
    top: 90px;
    font-size: 9px;
    color: #fac;
    text-align: center;
    z-index: 12
}

#shopPowerIcon {
    position: absolute;
    display: none;
    left: 142px;
    top: 67px;
    background-image: url(/static/images/powerpotion64.png);
    width: 55px;
    height: 64px;
    transform: scale(0.3);
    z-index: 12
}

.setBonusTitle {
    background-color: #b3b;
    border: 2px solid #fcf;
    border-radius: 5px;
    padding: 2px 9px;
    color: #fe7
}

#buttonShopBack {
    position: absolute;
    left: 628.5px;
    top: 496px;
    width: 134px;
    height: 133px;
    background-image: url(/static/images/backBtn.png);
    transform: scale(0.4)
}

.ItemHelpBtn {
    position: absolute;
    left: 12px;
    top: 120px
}

.hasSetBonus {
    filter: hue-rotate(225deg) drop-shadow(0 0 5px rgba(255, 0, 255, 1))
}

.stat_icon_set_bonus {
    position: initial;
    display: inline-block;
    vertical-align: text-top
}

.SetBonusPopup {
    color: pink;
    font-size: 10px;
    background: black;
    padding: 2px;
    border-radius: 3px;
    position: absolute;
    white-space: nowrap;
    top: -1px;
    left: 18px;
    display: none
}

.ShopSetBtn:hover .SetBonusPopup {
    display: block
}

#shopSetBonusActive {
    display: none;
    position: absolute;
    left: 192px;
    top: 12px;
    width: 20px;
    height: 14px;
    z-index: 12
}

.MissionsBtn {
    position: absolute;
    background-image: url(/static/images/starBtn.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 55px;
    height: 51px
}

#MissionsBtnLobby {
    left: 594px;
    top: 542px
}

#MissionsBtnRoom {
    left: 75px;
    top: 214px;
    display: none
}

#itemsSelection.InRoom #MissionsBtnRoom {
    display: block
}

#MissionsCenterWindow {
    display: none;
    width: 548px;
    left: 68px;
    top: 52px;
    z-index: 130
}

#MissionsCenterWindow .DragonWindowBody {
    max-height: 505px;
    overflow-y: auto;
}

#MissionsHubTabs {
    display: flex;
    gap: 6px;
    margin: 6px 8px 8px;
    padding: 0 4px;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}
#MissionsHubTabs .MissionsHubTab {
    flex: 1;
    height: 32px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    color: #d6e8ff;
    border: 1px solid rgba(180, 220, 255, .25);
    background: linear-gradient(180deg, #2d4f78, #15283f);
    text-shadow: 0 1px 2px #000;
}
#MissionsHubTabs .MissionsHubTab.is-on {
    filter: none;
    color: #2a1800;
    border-color: #ffe071;
    background: linear-gradient(180deg, #ffe28a, #d4a017);
    box-shadow: 0 0 12px rgba(255, 210, 80, .75);
    text-shadow: none;
}
#MissionsVipPanel, #MissionsFigureAlbumPanel {
    min-height: 300px;
    color: #eaf6ff;
    position: relative;
    z-index: 6;
    pointer-events: auto;
}
#MissionsVipPanel .missionsHubBuy,
#MissionsVipPanel .missionsVipClaim,
#MissionsFigureAlbumPanel .missionsHubBuy,
#MissionsFigureAlbumPanel .missionsAlbumActions {
    position: relative;
    z-index: 8;
    pointer-events: auto !important;
}
.missionsAlbumSprite, .missionsAlbumCard .AniObject {
    pointer-events: none !important;
}
.hubVipBanner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(90, 40, 10, .85), rgba(20, 30, 50, .9));
    border: 1px solid rgba(255, 210, 90, .55);
    box-shadow: inset 0 0 12px rgba(255, 180, 40, .2);
}
.hubAlbumBanner {
    background: linear-gradient(90deg, rgba(18, 48, 78, .95), rgba(12, 22, 40, .95));
    border-color: rgba(120, 190, 255, .45);
}
.hubVipCrest {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background-size: contain !important;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 6px #ffd45a);
}
.hubVipBannerText { flex: 1; min-width: 0; }
.hubVipTitle {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffe28a;
    text-shadow: 0 0 8px rgba(255, 200, 60, .8), 0 1px 2px #000;
    line-height: 18px;
}
.hubAlbumBanner .hubVipTitle { color: #9fd6ff; text-shadow: 0 0 8px rgba(80, 180, 255, .7), 0 1px 2px #000; }
.hubVipSub { font-size: 10px; color: #cfe6f8; opacity: .9; margin-top: 2px; }
.hubVipXpBox {
    text-align: center;
    min-width: 56px;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255, 210, 90, .4);
}
.hubVipXpBox b { display: block; font-size: 18px; color: #ffe28a; line-height: 18px; }
.hubVipXpBox small { color: #cfe6f8; font-size: 10px; }
.hubVipTrack {
    position: relative;
    height: 72px;
    margin: 4px 0 10px;
}
.hubVipBar {
    position: absolute;
    left: 28px;
    right: 36px;
    top: 18px;
    height: 10px;
    background: rgba(0,0,0,.55);
    border-radius: 8px;
    border: 1px solid rgba(255, 210, 90, .25);
    overflow: hidden;
}
.hubVipBar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #f3d56a, #ff8a1a);
    box-shadow: 0 0 8px #ffb020;
}
.hubVipNode {
    position: absolute;
    top: 0;
    width: 48px;
    text-align: center;
}
#MissionsVipPanel .hubVipNode .Chest {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 auto;
    filter: drop-shadow(0 0 4px rgba(255, 200, 60, .6));
}
.hubVipNodeLv {
    width: 22px;
    height: 22px;
    margin: -6px auto 0;
}
.hubVipBuy {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px !important;
    font-size: 13px;
    background: linear-gradient(180deg, #ffe28a, #c48a12) !important;
    color: #2a1800 !important;
    border-color: #ffe071 !important;
    box-shadow: 0 0 10px rgba(255, 200, 60, .45);
}
.hubVipActive {
    text-align: center;
    padding: 6px;
    border-radius: 8px;
    background: rgba(40, 90, 50, .45);
    border: 1px solid #8ff0ad;
}
.missionsHubLead { font-size: 11px; color: #cfe6f8; line-height: 15px; margin-bottom: 8px; }
.missionsHubXp { font-size: 12px; margin-bottom: 8px; color: #ffe078; }
.missionsHubOk { color: #8ff0ad; font-weight: 800; margin-bottom: 8px; }
.missionsHubBuy {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    height: 28px;
    border: 1px solid rgba(255, 218, 91, .7);
    border-radius: 6px;
    background: linear-gradient(180deg, #2a6a9a, #143556);
    color: #fff5bf;
    font-weight: 800;
    cursor: pointer;
}
.missionsHubBuy:disabled { opacity: .5; cursor: default; }
.missionsVipList { display: flex; flex-direction: column; gap: 6px; }
.missionsVipRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(150,200,230,.2);
    font-size: 11px;
    color: #eaf6ff;
}
.missionsVipRow.is-ready {
    border-color: #ffe071;
    box-shadow: 0 0 10px rgba(255, 210, 80, .35);
    background: rgba(60, 45, 10, .45);
}
.missionsVipRow.is-done { opacity: .55; }
.hubVipRowLeft {
    position: relative;
    width: 72px;
    height: 40px;
    flex-shrink: 0;
}
.hubVipRowLeft .hubVipBadge {
    position: absolute;
    left: 0;
    top: 4px;
    width: 32px;
    height: 32px;
}
#MissionsVipPanel .hubVipRowLeft .Chest {
    position: absolute;
    left: 30px;
    top: 0;
}
.hubVipRowMid { flex: 1; min-width: 0; }
.hubVipRowMid b { display: block; color: #ffe28a; }
.hubVipRowMid small { color: #9cb4c8; }
.hubRwRow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.hubRw {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 800;
    color: #fff6c8;
}
.hubVipState {
    font-weight: 800;
    color: #9cb4c8;
    white-space: nowrap;
}
.missionsVipClaim {
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: linear-gradient(180deg, #ffe28a, #d4a017);
    color: #2a1800;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(255, 200, 60, .5);
}
.missionsAlbumActions { display: flex; gap: 6px; margin-bottom: 8px; }
.missionsAlbumActions .missionsHubBuy {
    width: auto;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
}
.hubPackGold {
    background: linear-gradient(180deg, #3a6aaa, #1a3558) !important;
}
.hubAlbumPackIcon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: url(/static/images/chest.png) no-repeat 0 0;
    background-size: 126px 42px;
    filter: drop-shadow(0 0 6px #7ec8ff);
}
.hubAlbumPrize {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 7px 8px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(80, 40, 8, .85), rgba(20, 30, 48, .9));
    border: 1px solid rgba(255, 210, 90, .55);
    color: #ffe28a;
    font-size: 11px;
    font-weight: 800;
    text-shadow: 0 1px 2px #000;
}
.hubAlbumPrize.is-done {
    background: rgba(40, 90, 50, .45);
    border-color: #8ff0ad;
    color: #8ff0ad;
}
.missionsAlbumGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}
.hubVipBanner.is-off {
    background: linear-gradient(90deg, rgba(30, 30, 40, .9), rgba(20, 24, 36, .95));
    border-color: rgba(180, 190, 210, .35);
}
.hubVipTrack.is-locked {
    filter: grayscale(.35);
    opacity: .85;
}
.missionsAlbumCard {
    min-height: 108px;
    border-radius: 8px;
    background: rgba(6, 14, 28, .88);
    border: 1px solid rgba(120, 160, 200, .25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-size: 10px;
    color: #7e97ad;
    text-align: center;
    padding: 2px 2px 6px;
    overflow: hidden;
}
.missionsAlbumCard.is-locked .missionsAlbumSprite {
    filter: grayscale(1) brightness(.7);
}
.missionsAlbumCard.is-owned {
    border-color: #ffe071;
    color: #fff6c8;
    background: linear-gradient(180deg, rgba(70, 55, 12, .7), rgba(10, 24, 42, .95));
    box-shadow: 0 0 8px rgba(255, 210, 80, .35);
}
.missionsAlbumSprite {
    position: relative;
    width: 70px;
    height: 70px;
    overflow: hidden;
    margin: 0 auto 0;
}
.missionsAlbumCard b { display: block; font-size: 10px; line-height: 12px; }
.missionsAlbumCard small { color: #8ff0ad; font-weight: 800; }

#MissionsChests {
    position: relative;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 25px
}

#MissionsProgressBar {
    position: absolute;
    left: 50px;
    top: 16px;
    width: 84%
}

#MissionsPointsIcon {
    position: absolute;
    left: 12px;
    top: 9px;
    width: 32px;
    height: 32px;
    background-image: url(/static/images/starBtn.png);
    background-size: contain;
    background-repeat: no-repeat
}

#MissionsPointsText {
    position: absolute;
    top: 20px;
    font-size: 16px;
    text-align: center;
    width: 31px
}

#MissionsChest1 {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 112px
}

#MissionsChest2 {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 194px
}

#MissionsChest3 {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 276px
}

#MissionsChest4 {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 358px
}

#MissionsChest5 {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 440px
}

.Chest {
    position: absolute;
    background-image: url(/static/images/chest.png);
    background-position: 0 0;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 120px 40px;
    line-height: 70px;
    text-align: center
}

.Chest.Open {
    background-position: -40px 0;
    cursor: pointer;
    animation: spiner2 1s infinite alternate ease-in-out
}

.Chest.Empty {
    background-position: -80px 0
}

.Glowing {
    position: absolute;
    left: 7px;
    top: 6px;
    width: 26px;
    height: 26px;
    border-radius: 26px;
    animation: glowingShrinking 1s infinite alternate ease-in-out
}

@keyframes glowingShrinking {
    0 {
        box-shadow: 0 0 10px #f1c40f, 0 0 20px #f1c40f, 0 0 30px #f1c40f, 0 0 10px #f1c40f, 0 0 20px #f1c40f, 0 0 30px #f1c40f
    }

    100% {
        box-shadow: 0 0 20px #f1c40f, 0 0 40px #f1c40f, 0 0 60px #f1c40f, 0 0 20px #f1c40f, 0 0 40px #f1c40f, 0 0 60px #f1c40f
    }
}

@keyframes spiner2 {
    from {
        transform: rotate(-30deg)
    }

    100% {
        transform: rotate(30deg)
    }
}

#MissionsTimeLeft {
    width: 100%;
    text-align: center;
    margin: 10px 0
}

.MissionsView {
    background: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 307px;
    border-radius: 3px;
    overflow-y: auto
}

.Mission {
    position: relative;
    width: 95%;
    height: 50px;
    margin: 5px auto;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid black;
    border-radius: 8px
}

.MissionStar {
    position: absolute;
    left: 12px;
    top: 9px;
    width: 32px;
    height: 32px;
    background-image: url(/static/images/starBtn.png);
    background-size: contain;
    background-repeat: no-repeat;
    line-height: 56px;
    text-align: center
}

.MissionName {
    position: absolute;
    left: 60px;
    top: 5px;
    font-size: 16px
}

.MissionBar {
    position: absolute;
    left: 60px;
    top: 25px;
    width: 300px
}

.MissionCollectBtn {
    position: absolute;
    left: 376px;
    top: 11px;
    width: 47px;
    text-align: center;
    font-size: 9px
}

.MissionCheck {
    position: absolute;
    left: 393px;
    top: 12px
}

#WindowBG {
    position: absolute;
    left: -4000px;
    width: 10000px;
    top: -4000px;
    height: 10000px;
    background: rgba(0, 0, 0, 0.25);
    z-index: 14;
    display: none
}

#Rewards {
    position: absolute;
    z-index: 120;
    display: none
}

#RewardsBG {
    position: absolute;
    left: -4000px;
    width: 10000px;
    top: -4000px;
    height: 10000px;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer
}

#RewardsTitle {
    position: absolute;
    top: 150px;
    width: 800px;
    text-align: center;
    z-index: 1;
    pointer-events: none
}

#RewardsFooter {
    position: absolute;
    top: 450px;
    width: 800px;
    text-align: center;
    z-index: 1;
    pointer-events: none
}

#RewardsBody {
    position: absolute;
    top: 200px;
    width: 800px;
    height: 200px;
    text-align: center;
    z-index: 1;
    pointer-events: none
}

.Reward {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 27px;
    border: 3px solid #888;
    border-radius: 8px;
    margin: 3px;
    background: yellow;
    animation: AnimEnterScaleDown .15s ease-out
}

@keyframes AnimEnterScaleDown {
    from {
        transform: scale(7);
        opacity: .1
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.RewardStar {
    background: rebeccapurple url(/static/images/starBtn.png) no-repeat;
    background-size: contain;
    background-position-y: 2px
}

.RewardGold {
    background: #46f url(/static/images/goldIcon.png) no-repeat;
    background-size: contain
}

.RewardCash {
    background: yellow url(/static/images/cashIcon.png) no-repeat;
    background-size: contain
}

.RewardTicket,
.RewardTickets {
    background: #1e3a8a url(/static/images/ticket.png) no-repeat center 3px;
    background-size: 38px 25px;
    border-color: #60a5fa;
}

.RewardFigure {
    width: 96px;
    height: 110px;
    line-height: normal;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #4a3410, #1a1206);
    border-color: #ffe071;
    color: #fff6c8;
    padding: 0;
}
.rewardFigSprite {
    position: relative;
    width: 90px;
    height: 78px;
    margin: 4px auto 0;
    overflow: hidden;
}
.rewardFigName {
    font-size: 11px;
    font-weight: 800;
    margin-top: 2px;
    text-shadow: 0 1px 2px #000;
}

.missionTicketBadge {
    color: #38bdf8;
    font-weight: bold;
    font-size: 15px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    position: relative;
    top: -1px;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.missionTicketIcon {
    display: inline-block;
    width: 20px;
    height: 14px;
    margin-left: 3px;
    background: url(/static/images/ticket.png) no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

.chestTooltip {
    min-width: 125px;
    padding: 6px 10px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    text-align: left;
}

.chestTooltipTitle {
    color: #f59e0b;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.chestTooltipRow {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    margin: 4px 0;
    line-height: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.chestRewardIcon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

.chestRewardIcon.goldIcon {
    background-image: url(/static/images/goldIcon.png);
}

.chestRewardIcon.cashIcon {
    background-image: url(/static/images/cashIcon.png);
}

.chestRewardIcon.ticketIcon {
    background-image: url(/static/images/ticket.png);
}

#androidProm {
    margin: 10px;
    font-size: 15px
}

#InstallAppBanner {
    display: none;
    border: 1px solid black;
    border-radius: 20px;
    margin: 0 10px;
    padding: 10px;
    background: rgba(100, 150, 255, 0.3)
}

.center {
    text-align: center
}

.gold {
    color: #ffea4a;
    text-shadow: -1px 0 2px #634910, 0 1px 2px #634910, 1px 0 2px #634910, 0 -1px 2px #634910
}

.cash {
    color: #8bc2ee;
    text-shadow: #083863 -1px 0 1px, #083863 0 1px 1px, #083863 1px 0 1px, #083863 0 -1px 1px
}

#debug {
    display: none;
    white-space: pre
}

#ShowSC {
    font-size: 13px;
    padding: 0 4px
}

.ConnectEmailWithFBDialog .AlertBoxTitle {
    left: 20px;
    font-size: 15px
}

.ConnectEmailWithFBDialog .AlertBoxContent {
    padding: 0 10px;
    top: 35px
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

#FBWarn {
    position: absolute;
    left: 12px;
    top: 103px;
    font-family: Emoji, Arial, sans-serif;
    text-decoration: underline
}

#InstallAppBanner {
    margin-top: 40px
}

#MiniBanner {
    margin-top: 40px;
    display: none
}

#TOSLinks {
    text-align: left;
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 40px
}

.SetNameCat {
    color: lightgreen
}

#tournamentTreeZ {
    position: absolute;
    left: -963px;
    top: -4248px;
    transition: transform .5s ease-out
}

#tournamentTree {
    width: 2500px;
    height: 9000px;
    z-index: 1;
    display: none;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 20%);
}

#tournamentTree.CanMove {
    cursor: move
}

.TreeNode {
    position: absolute;
    font-size: 10px;
    width: 100px;
    height: 15px;
    white-space: nowrap;
    overflow: hidden;
    z-index: 3
}

.TreeLine {
    position: absolute;
    border: beige 2px solid;
    border-radius: 5px;
    z-index: 1
}

.TreeLineWinner {
    border-color: lime;
    z-index: 2
}

.TreeLineLoser {
    border-color: gray
}

.TreeLineFight {
    border-color: red;
    z-index: 2
}

.TreeLineWaiting {
    border-color: yellow;
    z-index: 2
}

.TreeTrophy {
    position: absolute;
    left: 1130px;
    top: 4376px;
    width: 240px;
    text-align: center;
    font-size: 60px
}

.TreeGift {
    position: absolute;
    left: 1220px;
    top: 4536px;
    width: 60px;
    text-align: center;
    font-size: 44px
}

#OlympicsGiftsWindow {
    display: none;
    position: absolute;
    left: 11px;
    top: 88px;
    width: 506px;
    height: 310px;
    box-shadow: 3px 3px 10px 3px #000;
    border-radius: 5px;
    border: 2px solid darkorange;
    background: rgba(50, 0, 0, 0.75);
    font-size: 11px;
    z-index: 9;
    padding: 10px
}

#GiftsOK {
    position: absolute;
    right: 15px;
    bottom: 15px
}

#TreeInfo {
    position: absolute;
    left: 1130px;
    bottom: 4628px;
    font-size: 10px;
    width: 240px;
    line-height: 15px;
    text-align: center;
    z-index: 2
}

.NodeGame {
    border: 1px solid red;
    background: lightpink;
    border-radius: 5px;
    text-align: center;
    line-height: 15px;
    overflow: visible;
    cursor: pointer
}

.NodePrepare {
    border: 1px solid red;
    background: lightpink;
    border-radius: 5px;
    text-align: center;
    line-height: 15px
}

.NodeUnknown {
    border: 2px dashed gray;
    background: beige;
    text-align: center;
    line-height: 13px;
    text-shadow: none;
    color: black;
    width: 96px;
    height: 13px
}

#registeredPlayersInfo {
    position: absolute;
    left: 10px;
    top: 93px;
    color: #ff8;
    font-size: 9px
}

#registeredPlayersList {
    position: absolute;
    left: 5px;
    top: 88px;
    width: 566px;
    height: 334px;
    border: #0f9afd 3px solid;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    align-content: end;
    overflow: hidden;
    pointer-events: none
}

.PlayerInList {
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none !important
}

.PlayerInList .rank {
    height: 9px;
    position: relative;
    top: 1px;
    pointer-events: none !important
}

.Rule {
    display: inline-block;
    background-color: #495d7b;
    padding: 2px 5px;
    margin: 2px;
    border-radius: 5px;
    border: 1px solid black
}

#olympicsMsg {
    position: absolute;
    left: 139px;
    top: 372px;
    width: 300px;
    height: 38px;
    border: 2px solid fuchsia;
    border-radius: 10px;
    color: white;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    padding: 5px;
    display: none;
    box-shadow: 3px 3px 10px 3px #000;
    background: #7900c3;
    background: linear-gradient(130deg, #f00, #fff, #00f);
    background-size: 200% 200%;
    animation: gradientAnimation 2s infinite
}

@keyframes gradientAnimation {
    0 {
        background-position: 10% 0
    }

    50% {
        background-position: 90% 100%
    }

    100% {
        background-position: 10% 0
    }
}

.HeartLeft {
    position: absolute;
    left: 0;
    top: -16px;
    width: 100px;
    text-align: center;
    z-index: -1;
    font-size: 17px;
    line-height: 17px;
    pointer-events: none
}

.HeartRight {
    position: absolute;
    left: 0;
    top: 15px;
    width: 100px;
    text-align: center;
    z-index: -1;
    font-size: 17px;
    line-height: 17px;
    pointer-events: none
}

.hpLeft {
    position: absolute;
    left: 0;
    top: -15px;
    width: 100px;
    text-align: center;
    pointer-events: none;
    color: white
}

.hpRight {
    position: absolute;
    left: 0;
    top: 16px;
    width: 100px;
    text-align: center;
    pointer-events: none;
    color: white
}

.GLeft {
    position: absolute;
    right: 60px
}

.GRight {
    position: absolute;
    left: 43px
}

#centerMeBtn {
    position: absolute;
    left: 397px;
    top: 430px;
    line-height: 22px;
    color: #fe0;
    font-size: 15px;
    padding: 0 6px;
    border: black solid 2px;
    border-radius: 5px;
    background-color: rgba(0, 40, 120, 0.7);
    display: none
}

#centerMeBtn:hover {
    background-color: rgba(120, 120, 120, 0.5);
    cursor: pointer
}

#centerMeBtn:active {
    background-color: rgba(40, 180, 120, 0.5);
    border: black solid 1px
}

#cropTreeBtn {
    position: absolute;
    left: 358px;
    top: 430px;
    color: #fe0;
    padding: 2.5px 6px 1.5px 6px;
    border: black solid 2px;
    border-radius: 5px;
    background-color: rgba(0, 40, 120, 0.7);
    display: none
}

#cropTreeBtn:hover {
    background-color: rgba(120, 120, 120, 0.5);
    cursor: pointer
}

#cropTreeBtn:active {
    background-color: rgba(40, 180, 120, 0.5);
    border: black solid 1px
}

#treeZoom {
    position: absolute;
    left: 443px;
    top: 437px;
    font-size: 10px;
    color: lime;
    text-align: center;
    width: 50px
}

.AnimTrans {
    transition: transform .5s ease-out
}

.ES {
    display: none
}

.rankEffect {
    position: absolute;
    width: 25px;
    height: 15px;
    background-size: cover;
    background-image: url(/static/images/rank_effect.webp)
}

#CollectCashText {
    font-size: 12px
}

#SpamParts {
    position: relative;
    margin: auto;
    width: 1px;
    z-index: 9
}

.roomPlayerName.animated {
    animation: parpadeoColor 2s infinite alternate;
    text-shadow: 0 0 15px 8px white;
    overflow: visible;
}

.roomPlayerName.animated a,
.roomPlayerName.animated a:link,
.roomPlayerName.animated a:visited {
    color: inherit !important;
}

.roomPlayerName.animated::before {
    content: '';
    width: 45px;
    height: 45px;
    position: absolute;
    background: url(/static/images/season2/download.gif) no-repeat scroll 0 0 transparent;
    top: -11px;
    left: 10%;

}

@keyframes parpadeoColor {
    0% {
        color: white;
        text-shadow: 0 0 15px 8px white;
    }

    100% {
        color: #8A2BE2;
        text-shadow: 0 0 15px 8px white;
    }
}

.SelectedMsg {
    background: rgba(255, 255, 127, 0.15) !important
}

.vipTagImage {
    width: 20px;
    /* Ajusta el tamaño si es necesario */
    height: auto;
    vertical-align: middle;
    /* Alinea con el texto */
    margin-left: 5px;
    /* Añade un pequeño margen a la izquierda si es necesario */
    position: relative;
    top: -2px;
    /* Subir la imagen un poco */
    transform: scale(1.5);
}

.vipMembershipInsignia {
    display: inline-block;
    height: 15px !important;
    width: 25px !important;
    max-height: 15px !important;
    max-width: 25px !important;
    object-fit: contain;
    vertical-align: top;
    margin-left: 3px;
    margin-top: 0;
    position: relative;
    top: 0;
    flex: 0 0 25px;
    align-self: flex-start;
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9))
}

.vipTagImage2 {
    width: 20px;
    /* Ajusta el tamaño si es necesario */
    left: 35px;
    height: auto;
    vertical-align: middle;
    /* Alinea con el texto */
    margin-left: 5px;
    /* Añade un pequeño margen a la izquierda si es necesario */
    position: relative;
    top: -10px;
    /* Subir la imagen un poco */
    transform: scale(1.5);
}


.vipTag {
    color: gold;
    font-weight: bold;
    margin-left: 5px;
    /* Para dejar espacio entre el nombre y "VIP" */
}


.myNyxcafeTeamBlue {
    width: 25px;
    height: 15px;
    top: 1px;
    right: 29px;
    position: absolute;
}

.nyxcafe {
    background: url(/static/images/season2/gamelist_cafe.png);
    position: absolute;
}

.caferesult {
    width: 52px;
    height: 30px;
    top: -4px;
    left: -145px;
}



.myNyxcafeTeamBlue2 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe2 {
    background: url(/static/images/season2/vip1.png);
    position: absolute;
    transform: scale(0.3);
}




.myNyxcafeTeamBlue3 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe3 {
    background: url(/static/images/season2/vip2.png);
    position: absolute;
    transform: scale(0.3);
}





.myNyxcafeTeamBlue4 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe4 {
    background: url(/static/images/season2/vip3.png);
    position: absolute;
    transform: scale(0.3);
}


.myNyxcafeTeamBlue5 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe5 {
    background: url(/static/images/season2/vip4.png);
    position: absolute;
    transform: scale(0.3);
}


.myNyxcafeTeamBlue6 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe6 {
    background: url(/static/images/season2/vip5.png);
    position: absolute;
    transform: scale(0.3);
}




.myNyxcafeTeamBlue7 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe7 {
    background: url(/static/images/season2/vip6.png);
    position: absolute;
    transform: scale(0.3);
}



.myNyxcafeTeamBlue8 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe8 {
    background: url(/static/images/season2/vip7.png);
    position: absolute;
    transform: scale(0.3);
}


.myNyxcafeTeamBlue9 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe9 {
    background: url(/static/images/season2/vip8.png);
    position: absolute;
    transform: scale(0.3);
}




.myNyxcafeTeamBlue10 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe10 {
    background: url(/static/images/season2/vip9.png);
    position: absolute;
    transform: scale(0.3);
}



.myNyxcafeTeamBlue11 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe11 {
    background: url(/static/images/season2/vip10.png);
    position: absolute;
    transform: scale(0.3);
}

.myNyxcafeTeamBlue12 {
    width: 150px;
    height: 150px;
    top: 1px;
    right: 57px;
    position: absolute;
}

.nyxcafe12 {
    background: url(/static/images/season2/vip112.png);
    position: absolute;
    transform: scale(0.4);
}




.viptext {
    font-family: sans-serif;
    position: absolute;
    bottom: -7px;
    font-size: 30px;
    text-align: center;
    width: 100px;
    color: white;
    left: 28px;
    text-shadow: -2px 0 4px black, 0 2px 4px black, 2px 0 4px black, 0 -2px 4px black, 0 -1px 4px black, 1px 0 4px black;
    filter: drop-shadow(0 0 2px magenta);
}

/* BrokerRanksSize - Adjust ranks position when timer is present */
.BrokerRanksSize {
    left: 110px !important;
}

/* GP Event Timer - Exact same design as PrixTimer */
.GPTimer {
    position: absolute;
    left: 3px;
    top: 47px;
    z-index: 1;
}

/* GP Event Indicators */
.GPEventIndicator150 {
    background-image: url(/static/images/200GP.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 3px;
    top: 25px;
    width: 90px;
    height: 28px;
    z-index: 10;
    pointer-events: none;
}

.GPEventIndicator200 {
    background-image: url(/static/images/200GP.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 3px;
    top: 25px;
    width: 90px;
    height: 28px;
    z-index: 10;
    pointer-events: none;
}

.GPEventIndicator250 {
    background-image: url(/static/images/300GP.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 9px;
    top: 26px;
    width: 83px;
    height: 25px;
    z-index: 10;
    pointer-events: none;
}

.GPEventIndicator300 {
    background-image: url(/static/images/300GP.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 9px;
    top: 26px;
    width: 83px;
    height: 25px;
    z-index: 10;
    pointer-events: none;
}

.rankEventItem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    margin: 16px auto 0;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    background: rgba(8, 18, 40, .72);
    border: 1px solid rgba(255, 210, 90, .35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4)
}

.rankEventItem:hover {
    border-color: #ffd24a;
    background: rgba(16, 28, 52, .88)
}

.rankEventIcon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255, 200, 80, .55))
}

.rankEventEmoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    filter: none
}

.rankEventText {
    min-width: 0
}

.rankEventName {
    color: #ffe082;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 3px #000
}

.rankEventEnd {
    margin-top: 3px;
    color: #d7e3f5;
    font-size: 12px
}

#TicketsEventTimer,
#SeasonEventTimer,
#RuletaEventTimer,
#TragamonedasEventTimer,
#LetrasEventTimer {
    color: #7dff9a;
    font-weight: 700
}

.flexcroll::-webkit-scrollbar {
    width: 6px;
}

.flexcroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.flexcroll::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px;
}

.flexcroll::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.classic_nyx_icon {
    width: 19px;
    height: 19px;
    background: url(/static/images/season2/gamelist_cafe.png) no-repeat;
    background-position: 0 -44px;
    vertical-align: middle;
    margin-right: 2px;
    margin-left: 3px;
    display: inline-block;
}

/* Custom Chat Bubbles for Lobby - Unified Style */
.roomPlayerBalloon.bg1,
.roomPlayerBalloon.bg2 {
    border: none !important;
    box-shadow: none !important;
    background-color: white !important;
    z-index: 33 !important;
}

.roomPlayerBalloonTip.bg1,
.roomPlayerBalloonTip.bg2 {
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    z-index: 34 !important;
    background-color: transparent !important;
    /* Keep sprite visible */
}

/* Power User (Gold) */
.roomPlayerBalloon.bg1 {
    color: #443300 !important;
    filter: drop-shadow(0px 0px 1.5px #FFCC00) drop-shadow(0px 0px 1.5px #FFCC00) drop-shadow(0px 0px 1.5px #FFCC00) drop-shadow(0px 0px 1.5px #FFCC00);
}

.roomPlayerBalloonTip.bg1 {
    filter: sepia(100%) saturate(1000%) hue-rotate(5deg) brightness(1.1) drop-shadow(0px 0px 1.5px #FFCC00) drop-shadow(0px 0px 1.5px #FFCC00) drop-shadow(0px 0px 1.5px #FFCC00);
    bottom: 50.5px !important;
}

/* GM (Blue) */
.roomPlayerBalloon.bg2 {
    color: #003366 !important;
    filter: drop-shadow(0px 0px 1.5px #00BFFF) drop-shadow(0px 0px 1.5px #00BFFF) drop-shadow(0px 0px 1.5px #00BFFF) drop-shadow(0px 0px 1.5px #00BFFF);
}

.roomPlayerBalloonTip.bg2 {
    filter: hue-rotate(180deg) saturate(500%) brightness(1.2) drop-shadow(0px 0px 1.5px #00BFFF) drop-shadow(0px 0px 1.5px #00BFFF) drop-shadow(0px 0px 1.5px #00BFFF);
    bottom: 50.5px !important;
}

/* BrokerRanksSize - Adjust ranks position when timer is present */
.BrokerRanksSize {
    left: 110px !important;
}

/* GP Event Timer - Exact same design as PrixTimer */
.GPTimer {
    position: absolute;
    left: 3px;
    top: 47px;
    z-index: 1;
}

/* GP Event Indicators */
.GPEventIndicator150 {
    background-image: url(/static/images/200GP.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 3px;
    top: 25px;
    width: 90px;
    height: 28px;
    z-index: 10;
    pointer-events: none;
}

.GPEventIndicator200 {
    background-image: url(/static/images/200GP.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 3px;
    top: 25px;
    width: 90px;
    height: 28px;
    z-index: 10;
    pointer-events: none;
}

.GPEventIndicator250 {
    background-image: url(/static/images/300GP.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 9px;
    top: 26px;
    width: 83px;
    height: 25px;
    z-index: 10;
    pointer-events: none;
}

.GPEventIndicator300 {
    background-image: url(/static/images/300GP.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 9px;
    top: 26px;
    width: 83px;
    height: 25px;
    z-index: 10;
    pointer-events: none;
}

.rankEventItem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    margin: 16px auto 0;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    background: rgba(8, 18, 40, .72);
    border: 1px solid rgba(255, 210, 90, .35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4)
}

.rankEventItem:hover {
    border-color: #ffd24a;
    background: rgba(16, 28, 52, .88)
}

.rankEventIcon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255, 200, 80, .55))
}

.rankEventEmoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    filter: none
}

.rankEventText {
    min-width: 0
}

.rankEventName {
    color: #ffe082;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 3px #000
}

.rankEventEnd {
    margin-top: 3px;
    color: #d7e3f5;
    font-size: 12px
}

#TicketsEventTimer,
#SeasonEventTimer,
#RuletaEventTimer,
#TragamonedasEventTimer,
#LetrasEventTimer {
    color: #7dff9a;
    font-weight: 700
}

.flexcroll::-webkit-scrollbar {
    width: 6px;
}

.flexcroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.flexcroll::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 10px;
}

.flexcroll::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.classic_nyx_icon {
    width: 19px;
    height: 19px;
    background: url(/static/images/season2/gamelist_cafe.png) no-repeat;
    background-position: 0 -44px;
    vertical-align: middle;
    margin-right: 2px;
    margin-left: 3px;
    display: inline-block;
}

/* Custom Chat Bubbles for Lobby - Unified Style */
.roomPlayerBalloon.bg1,
.roomPlayerBalloon.bg2 {
    border: none !important;
    box-shadow: none !important;
    background-color: white !important;
    z-index: 33 !important;
}

.roomPlayerBalloonTip.bg1,
.roomPlayerBalloonTip.bg2 {
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    z-index: 34 !important;
    background-color: transparent !important;
    /* Keep sprite visible */
}

/* Power User (Gold) */
.roomPlayerBalloon.bg1 {
    color: #443300 !important;
    filter: drop-shadow(0px 0px 1.5px #FFCC00) drop-shadow(0px 0px 1.5px #FFCC00) drop-shadow(0px 0px 1.5px #FFCC00) drop-shadow(0px 0px 1.5px #FFCC00);
}

.roomPlayerBalloonTip.bg1 {
    filter: sepia(100%) saturate(1000%) hue-rotate(5deg) brightness(1.1) drop-shadow(0px 0px 1.5px #FFCC00) drop-shadow(0px 0px 1.5px #FFCC00) drop-shadow(0px 0px 1.5px #FFCC00);
    bottom: 50.5px !important;
}

/* GM (Blue) */
.roomPlayerBalloon.bg2 {
    color: #003366 !important;
    filter: drop-shadow(0px 0px 1.5px #00BFFF) drop-shadow(0px 0px 1.5px #00BFFF) drop-shadow(0px 0px 1.5px #00BFFF) drop-shadow(0px 0px 1.5px #00BFFF);
}

.roomPlayerBalloonTip.bg2 {
    filter: hue-rotate(180deg) saturate(500%) brightness(1.2) drop-shadow(0px 0px 1.5px #00BFFF) drop-shadow(0px 0px 1.5px #00BFFF) drop-shadow(0px 0px 1.5px #00BFFF);
    bottom: 50.5px !important;
}

.shop_item_gold {
    position: absolute;
    top: 131px;
    right: 16px;
    width: 150px;
    height: 12px;
    color: #ffd273;
    text-align: right;
    font-size: 11px;
    font-weight: bold;
}

.shop_item_points {
    position: absolute;
    top: 131px;
    right: 16px;
    width: 150px;
    height: 12px;
    color: #00e676;
    text-align: right;
    font-size: 11px;
    font-weight: bold;
}

.pointsShadow {
    text-shadow: 1px 1px 1px black;
}

/* Mobile Mission Styles */
/* Mobile Mission Styles */
#mobileMissionBox {
    position: absolute;
    top: 70px;
    right: 4px;
    width: 195px;
    background: rgba(14, 22, 33, 0.95);
    border: 1px solid rgba(0, 210, 255, 0.6);
    border-radius: 4px;
    padding: 6px;
    color: white;
    font-family: 'Outfit', sans-serif;
    z-index: 100;
    backdrop-filter: blur(2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

.missionMobileTitle {
    font-size: 13px;
    color: #ffd700;
    text-align: center;
    font-weight: bold;
    margin-bottom: 6px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 3px;
}

.missionMobileName {
    font-size: 14px;
    font-weight: bold;
    color: #00d2ff;
    margin-bottom: 2px;
}

.missionMobileGoal {
    font-size: 11px;
    color: #ccc;
    margin-bottom: 6px;
}

.missionMobileReward {
    font-size: 11px;
    font-weight: bold;
    color: #4cd137;
    margin-bottom: 6px;
    display: block;
}

.missionMobileBar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
}

.missionMobileBar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    width: 0%;
    transition: width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.8);
}

.missionMobileAction {
    font-size: 10px;
    color: #ffd700;
    margin-bottom: 4px;
    font-style: italic;
    display: block;
}

.missionMobileReset {
    font-size: 10px;
    color: #ff4757;
    margin-top: 5px;
    text-align: center;
    font-weight: bold;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 3px;
}

/* Emoticon mode: hide the speech bubble completely, show only the sprite */
.SideA .roomPlayerBalloon.emoticon-mode,
.SideB .roomPlayerBalloon.emoticon-mode {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    filter: none !important;
    text-shadow: none !important;
    color: transparent !important;
    word-wrap: normal !important;
}

/* Clean outline design for room info */

.gameMode0 { color: #3bf500 !important; }
.gameMode1 { color: #ffad00 !important; }
.gameMode2 { color: #ff07f1 !important; }
.gameMode3 { color: #009cff !important; }
.gameMode4 { color: #ff2a00 !important; }
.gameMode5 { color: #af7cf7 !important; }
.gameMode6 { color: #ff2a00 !important; }


.room-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.9));
}


/* ============================================================
   BANNER DE DAÑO CRÍTICO / ESPECIAL (Super Shot, Great, etc.)
   ============================================================ */
#CriticalDamageBanner {
    position: absolute;
    left: 400px;
    top: 220px;
    width: 580px;
    height: 400px;
    margin-left: -290px;
    margin-top: -200px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    pointer-events: none;
    text-align: center;
}

#CriticalDamageBanner img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@keyframes criticalPopAnim {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    25% {
        transform: scale(1.35);
        opacity: 1;
    }
    40% {
        transform: scale(1.15);
        opacity: 1;
    }
    82% {
        transform: scale(1.15);
        opacity: 1;
    }
    100% {
        transform: scale(0.95) translateY(-35px);
        opacity: 0;
    }
}

@-webkit-keyframes criticalPopAnim {
    0% {
        -webkit-transform: scale(0.3);
        opacity: 0;
    }
    25% {
        -webkit-transform: scale(1.35);
        opacity: 1;
    }
    40% {
        -webkit-transform: scale(1.15);
        opacity: 1;
    }
    82% {
        -webkit-transform: scale(1.15);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0.95) translateY(-35px);
        opacity: 0;
    }
}

.critical-banner-active {
    display: flex !important;
    animation: criticalPopAnim 2.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    -webkit-animation: criticalPopAnim 2.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ============================================================
   TOAST DE NOTIFICACIÓN DE ACTUALIZACIÓN / HARD REFRESH
   ============================================================ */
#UpdateNotificationToast {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2147483647;
    background: rgba(14, 18, 30, 0.95);
    border: 1px solid #00d2ff;
    border-radius: 8px;
    padding: 10px 16px;
    color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 210, 255, 0.4);
    display: none;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    animation: toastSlideIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#UpdateNotificationToast .update-icon {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    animation: spinUpdateIcon 1.2s linear infinite;
    -webkit-animation: spinUpdateIcon 1.2s linear infinite;
}

#UpdateNotificationToast .update-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

#UpdateNotificationToast .update-title {
    font-weight: bold;
    color: #00e5ff;
    font-size: 13px;
    letter-spacing: 0.3px;
}

#UpdateNotificationToast .update-desc {
    color: #e2e8f0;
    font-size: 11px;
}

@keyframes spinUpdateIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@-webkit-keyframes spinUpdateIcon {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Badge de GP para Pets en Tienda */
.shop_item_pet_gp {
    display: none !important;
    position: absolute;
    left: 12px;
    top: 96px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    background: #3d6e9e;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid #274c72;
    z-index: 10;
    pointer-events: none;
    letter-spacing: 0.5px;
}





/* Icono de Pet y Tickets en el Score Bonus de Fin de Partida */
.score_bonus_gp {
    position: absolute;
    left: 275px;
    top: 20px;
    color: #f4c;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
    line-height: 12px;
}

.HD .score_bonus_gp {
    left: 155px;
}

.score_bonus_gold {
    position: absolute;
    left: 275px;
    top: 47px;
    color: #f96;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 12px;
}

.HD .score_bonus_gold {
    left: 155px;
}

.score_bonus_ticket {
    position: absolute;
    left: 275px;
    top: 61px;
    color: #00e5ff;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    white-space: nowrap;
    line-height: 12px;
    z-index: 10;
}

.HD .score_bonus_ticket {
    left: 155px;
    top: 55px;
}

.score_bonus_pet_icon {
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    background: url(/static/images/themes/petss.png) no-repeat center center;
    background-size: contain;
    margin-right: 2px;
}



/* ==========================================================================
   BONUS ITEMS DOCK (RIGHT SIDE FLOATING WIDGETS)
   ========================================================================== */
#bonusItemsDock {
    position: fixed;
    right: 18px;
    top: 75px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    user-select: none;
}

.bonusDockItem {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.18, 0.89, 0.32, 1.28), filter 0.15s;
}

.bonusDockItem:hover {
    transform: scale(1.08);
    filter: brightness(1.15);
}

.bonusDockItem:active {
    transform: scale(0.95);
}

.bonusDockCircle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(225, 235, 250, 0.85) 60%, rgba(185, 200, 220, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 220, 100, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bonusDockCircle img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.bonusDockItem.power_potion .bonusDockCircle {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 70, 70, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.bonusDockItem.nyx_cafe .bonusDockCircle {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(180, 70, 255, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.bonusDockStock {
    margin-top: 2px;
    font-family: 'Verdana', 'Arial', sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #ffeb3b;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 1px 3px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
}


#itemTimer:hover {
    transform: scale(1.08);
    box-shadow: 0 0 14px #ffd700;
}


#itemTimer2:hover {
    transform: scale(1.08);
    box-shadow: 0 0 14px #ffd700;
}


#itemTimer3:hover {
    transform: scale(1.08);
    box-shadow: 0 0 14px #ffd700;
}













/* ==========================================================================
   ORIGINAL GUMBAO DOCK & EXITEM ACCORDION
   ========================================================================== */
#itemTimer, #itemTimer2, #itemTimer3 {
    position: fixed !important;
    left: auto;
    right: auto;
    width: 59px !important;
    height: 59px !important;
    border-radius: 50%;
    background: #ffffff !important;
    border: 2.5px solid #ffb300 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.55), inset 0 1px 3px #fff !important;
    z-index: 100050 !important;
    cursor: pointer;
    user-select: none;
    overflow: visible !important;
    opacity: 1;
    filter: none;
    pointer-events: auto !important;
}

#itemTimer .progress-circle,
#itemTimer2 .progress-circle,
#itemTimer3 .progress-circle {
    pointer-events: none !important;
    overflow: hidden;
}

#itemTimer {
    top: 92px;
}

#itemTimer2 {
    top: 188px;
}

#itemTimer3 {
    top: 284px;
}

#itemTimer, #itemTimer2, #itemTimer3 {
    transition: transform 320ms cubic-bezier(.22,.78,.22,1), opacity 220ms ease, filter 220ms ease;
}

#itemTimer { --bonus-fold-y: 96px; }
#itemTimer2 { --bonus-fold-y: 0px; }
#itemTimer3 { --bonus-fold-y: -96px; }

#itemTimer:hover, #itemTimer2:hover, #itemTimer3:hover {
    transform: scale(1.08);
    box-shadow: 0 0 14px #ffd700, 0 4px 12px rgba(0,0,0,0.7) !important;
}

/* Solo ocultar al “recoger”; no usar visibility:hidden (rompe reaparición) */
#container.bonusItemsDockFolded #itemTimer,
#container.bonusItemsDockFolded #itemTimer2,
#container.bonusItemsDockFolded #itemTimer3 {
    transform: translate3d(74px, var(--bonus-fold-y), 0) scale(.72);
    opacity: 0;
    filter: saturate(.8) brightness(.9);
    pointer-events: none;
}

#itemTimerFoldTab {
    display: none;
    position: fixed !important;
    right: auto;
    left: auto;
    top: 178px;
    width: 22px;
    height: 50px;
    z-index: 100051;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: .7;
}

#itemTimerFoldTab.isVisible {
    display: block;
}

#itemTimerFoldTab.isFolded {
    opacity: .95;
}

#itemTimerFoldTab:hover {
    opacity: 1;
}

#itemTimerFoldTab .bonusDockArrow {
    position: absolute;
    right: 0;
    top: 8px;
    width: 12px;
    height: 34px;
    text-align: center;
    color: #ffd45f;
    font: bold 18px/32px Arial, sans-serif;
    background: linear-gradient(180deg, rgba(48,69,104,.92), rgba(8,21,43,.92));
    border: 1px solid rgba(255,255,255,.55);
    border-right: 0;
    border-radius: 7px 0 0 7px;
    box-shadow: -1px 0 5px rgba(0,0,0,.4), inset 1px 0 0 rgba(255,204,70,.4);
    text-shadow: 0 1px 2px #000;
    transform: rotate(180deg);
    pointer-events: none;
}

#itemTimerFoldTab.isFolded .bonusDockArrow {
    transform: rotate(0deg);
}

.itemTimerImg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    transform: none !important;
    transform-origin: center center;
    pointer-events: none;
    opacity: 1 !important;
    filter: none !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.itemTimerImg.egg {
    background-image: url(/static/images/luckyegg64.png);
}

.itemTimerImg.power {
    background-image: url(/static/images/powerpotion64.png);
}

.itemTimerImg.nyx {
    background-image: url(/static/images/nyxcafe64.png);
}

.itemTimerStock {
    position: absolute;
    right: -4px;
    top: -4px;
    left: auto;
    bottom: auto;
    transform: none;
    background: linear-gradient(180deg, #1e2638, #0f1522);
    border: 1.5px solid #ffb300;
    color: #ffd700;
    font-size: 11px;
    line-height: 14px;
    font-weight: bold;
    border-radius: 9px;
    padding: 1px 6px;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.85);
    pointer-events: none;
    z-index: 601;
}

.itemTimerText {
    position: absolute;
    left: 50%;
    top: 52px;
    bottom: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #182236, #0c121e);
    border: 1.5px solid #00e5ff;
    color: #00e5ff;
    border-radius: 9px;
    min-width: 52px;
    width: auto;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    font-weight: bold;
    padding: 1px 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 600;
    white-space: nowrap;
}

/* Room Cash Bet */
#roomCashBetShade {
    position: absolute;
    z-index: 500;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    background: radial-gradient(circle at 50% 43%, rgba(4, 27, 55, .16), rgba(0, 5, 15, .62) 72%);
    pointer-events: auto;
}
#roomCashBetModal, #roomCashBetIncoming {
    position: absolute;
    z-index: 501;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 382px;
    box-sizing: border-box;
    display: none;
    overflow: visible;
    pointer-events: auto;
    border: 1px solid rgba(126, 198, 255, .55);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(10, 36, 68, .99) 0%, rgba(4, 21, 43, .99) 56%, rgba(2, 13, 29, .99) 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .72);
    color: #eef8ff;
    font-family: Arial, Helvetica, sans-serif;
}
.roomCashBetHeader {
    min-height: 55px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(153, 210, 255, .15);
}
.roomCashBetCoin {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffe487;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff1a7 0%, #eebc42 36%, #9b6415 100%);
    color: #332005;
    font-size: 15px;
    font-weight: 900;
}
.roomCashBetCoinSword {
    border-radius: 9px;
    border-color: rgba(121, 210, 255, .8);
    background: linear-gradient(180deg, #4f9ccb, #1d4d74);
    color: #fff;
    font-size: 10px;
}
.roomCashBetHeaderCopy { flex: 1; min-width: 0; }
.roomCashBetEyebrow { color: #8acbec; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.roomCashBetTitle { color: #fff; font-size: 15px; font-weight: 800; }
.roomCashBetCloseX {
    width: 26px; height: 26px; border: 0; background: transparent; color: #cfe8ff;
    font-size: 20px; cursor: pointer; line-height: 24px;
}
.roomCashBetBody { position: relative; z-index: 1; padding: 10px 12px 12px; }
.roomCashBetSectionLabel { margin: 8px 0 6px; color: #9ed3f4; font-size: 10px; font-weight: 800; letter-spacing: .6px; }
.roomCashBetStepLabel { display: flex; align-items: center; justify-content: center; gap: 6px; }
.roomCashBetStepLabel > span {
    width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(126, 204, 252, .38); border-radius: 50%; background: rgba(36, 103, 149, .25);
    color: #aaddfa; font-size: 9px; font-weight: 900;
}
.roomCashBetPlayerList {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
    max-height: 145px; overflow: auto;
}
.roomCashBetPlayerPick {
    display: flex; align-items: center; gap: 6px; padding: 6px 7px;
    border: 1px solid rgba(130, 190, 230, .28); border-radius: 8px;
    background: rgba(8, 28, 52, .55); cursor: pointer; text-align: left;
}
.roomCashBetPlayerPick.is-eligible:hover { border-color: rgba(255, 220, 90, .7); }
.roomCashBetPlayerPick.is-selected { border-color: #ffe071; background: rgba(40, 70, 30, .45); }
.roomCashBetPlayerPick.is-disabled, .roomCashBetPlayerPick.is-no-cash { opacity: .55; cursor: default; }
.roomCashBetTeamBadge {
    flex: 0 0 auto; padding: 1px 5px; border-radius: 4px; font-size: 9px; font-weight: 800;
}
.roomCashBetTeamBadge.teamA { background: #2a6aad; color: #fff; }
.roomCashBetTeamBadge.teamB { background: #ad3a3a; color: #fff; }
.roomCashBetPickCopy { min-width: 0; flex: 1; }
.roomCashBetPickCopy b { display: block; font-size: 11px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roomCashBetPickCopy small { color: #9ec3de; font-size: 9px; }
.roomCashBetPickMark { color: #ffe071; font-weight: 900; }
.roomCashBetPlayerEmpty { grid-column: 1 / -1; padding: 10px; color: #c5d8ea; font-size: 11px; text-align: center; }
.roomCashBetVs, .roomCashBetVsEmpty { margin: 8px 0; text-align: center; color: #b9d7ee; font-size: 12px; }
.roomCashBetQuick { display: flex; gap: 5px; justify-content: center; margin-bottom: 7px; }
.roomCashBetQuick button {
    min-width: 42px; height: 24px; border: 1px solid rgba(150, 210, 255, .35); border-radius: 6px;
    background: rgba(20, 55, 90, .8); color: #fff; font-size: 10px; font-weight: 800; cursor: pointer;
}
.roomCashBetQuick button.is-selected { border-color: #ffe071; color: #ffe071; }
.roomCashBetAmountWrap { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
#roomCashBetAmount {
    width: 92px; height: 26px; text-align: center; border: 1px solid #7ec6ff; border-radius: 6px;
    background: #061525; color: #fff; font-weight: 800;
}
.roomCashBetBalance, .roomCashBetContribution { display: flex; justify-content: space-between; font-size: 11px; margin: 3px 0; color: #cfe6f8; }
.roomCashBetBalance strong, .roomCashBetContribution strong { color: #ffe78a; }
.roomCashBetRivalAvailability { min-height: 16px; font-size: 11px; text-align: center; margin: 4px 0; }
.roomCashBetRivalAvailability.is-ok { color: #8ff0ad; }
.roomCashBetRivalAvailability.is-bad { color: #ff9aa4; }
.roomCashBetWarning {
    display: flex; gap: 7px; align-items: flex-start; margin: 8px 0;
    padding: 7px 8px; border-radius: 8px; background: rgba(90, 40, 10, .35);
    color: #ffd9a0; font-size: 10px; line-height: 14px;
}
.roomCashBetWarningIcon {
    width: 16px; height: 16px; flex: 0 0 16px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255, 183, 75, .25); color: #ffd16c; font-weight: 900; font-size: 10px;
}
.roomCashBetActions { display: flex; gap: 8px; margin-top: 8px; position: relative; z-index: 5; pointer-events: auto; }
.roomCashBetActions button {
    flex: 1; height: 32px; border: 0; border-radius: 8px; font-weight: 800; cursor: pointer; font-size: 11px;
    pointer-events: auto !important;
    position: relative;
    z-index: 6;
}
.roomCashBetAccept { background: linear-gradient(180deg, #ffd45a, #e09a18); color: #2a1800; }
.roomCashBetAccept:disabled { opacity: .45; cursor: default; }
.roomCashBetCancel { background: #1c334c; color: #d5e8f8; border: 1px solid rgba(150, 200, 230, .3) !important; }
.roomCashBetIncomingName { text-align: center; font-size: 16px; font-weight: 800; color: #fff; }
.roomCashBetIncomingLead { text-align: center; color: #9ecbe8; font-size: 12px; margin-bottom: 8px; }
.roomCashBetIncomingMoney, .roomCashBetIncomingPot { display: flex; justify-content: space-between; margin: 4px 0; font-size: 12px; }
.roomCashBetIncomingPot strong { color: #8ff0ad; }
.roomCashBetIncomingTimer { text-align: center; color: #ffe078; font-weight: 800; margin: 6px 0; }
#roomCashBetOpenButton {
    position: absolute;
    z-index: 21;
    left: 234px;
    top: 308px;
    width: 96px;
    height: 31px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 218, 91, .78);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(28, 91, 130, .98) 0%, rgba(7, 45, 79, .98) 52%, rgba(3, 27, 54, .99) 100%);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    font-family: Arial, Helvetica, sans-serif;
}
#roomCashBetOpenButton.is-visible { display: flex; }
#roomCashBetOpenButton.is-under-dialog {
    visibility: hidden !important;
    pointer-events: none !important;
}
#roomCashBetOpenButton.is-pending { border-color: rgba(102, 205, 255, .75); }
#roomCashBetOpenButton.is-active, #roomCashBetOpenButton.is-locked {
    border-color: rgba(103, 244, 152, .78);
    background: linear-gradient(180deg, rgba(30, 123, 78, .98), rgba(8, 68, 45, .99));
}
#roomCashBetOpenButton .roomCashBetOpenCoin {
    width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #ffe27a; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a7, #c88920);
    color: #3a2200; font-size: 10px; font-weight: 900;
}
#roomCashBetOpenButton .roomCashBetOpenText { color: #fff5bf; font-size: 9px; font-weight: 900; letter-spacing: .4px; }
#roomCashBetMini {
    position: absolute;
    z-index: 22;
    left: 234px;
    top: 176px;
    width: 96px;
    display: none;
    padding: 3px 4px 4px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 214, 83, .72);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(15, 49, 82, .96), rgba(4, 22, 45, .97));
    color: #eaf6ff;
    text-align: center;
    font-size: 9px;
    pointer-events: none;
}
#roomCashBetMini.is-visible { display: block; }
.roomCashBetMiniTitle { color: #ffe078; font-weight: 900; }
.roomCashBetMiniPot { color: #8ff0ad; font-weight: 900; }

/* Team voice chat */
#gameVoiceBar {
    position: absolute;
    right: 12px;
    top: 50px;
    left: auto;
    bottom: auto;
    z-index: 250;
    display: none;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 2px 5px;
    box-sizing: border-box;
    border: 1px solid rgba(238,198,88,.92);
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(7,37,70,.96), rgba(2,17,37,.98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.65);
}
#gameVoiceMicBtn,
#roomVoiceJoinBtn {
    position: relative;
    width: 22px;
    height: 20px;
    min-width: 22px;
    padding: 0;
    border: 1px solid rgba(126,255,177,.82);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(29,145,70,.96), rgba(9,100,47,.96));
    color: #fff;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}
#roomVoiceJoinBtn {
    width: 30px;
    height: 28px;
    min-width: 30px;
    border-radius: 5px;
}
#gameVoiceMicBtn::before,
#roomVoiceJoinBtn::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 3px;
    width: 5px;
    height: 8px;
    border: 1px solid currentColor;
    border-radius: 5px;
    box-sizing: border-box;
}
#gameVoiceMicBtn::after,
#roomVoiceJoinBtn::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    width: 9px;
    height: 5px;
    border: 1px solid currentColor;
    border-top: 0;
    border-radius: 0 0 7px 7px;
    box-sizing: border-box;
}
#roomVoiceJoinBtn::before {
    left: 10px;
    top: 4px;
    width: 6px;
    height: 10px;
}
#roomVoiceJoinBtn::after {
    left: 8px;
    top: 13px;
    width: 11px;
    height: 6px;
}
#gameVoiceMicBtn.voice_off,
#roomVoiceJoinBtn.voice_off {
    border-color: rgba(255,142,142,.88);
    background: linear-gradient(180deg, rgba(168,52,52,.96), rgba(122,28,28,.96));
}
#gameVoiceMicBtn.self_muted,
#roomVoiceJoinBtn.self_muted {
    border-color: rgba(255,113,113,.94);
    background: linear-gradient(180deg, rgba(134,43,48,.98), rgba(72,18,25,.98));
}
#gameVoiceMicBtn.self_muted::after {
    content: "×";
    left: 0;
    top: -1px;
    width: 20px;
    height: 18px;
    border: 0;
    color: #ffe9e9;
    font: 700 14px/16px Arial, sans-serif;
    text-align: center;
}
#gameVoiceMicBtn.speaking:not(.self_muted) {
    border-color: #9cffb5;
    background: linear-gradient(180deg, rgba(28,164,72,.98), rgba(9,104,44,.98));
    box-shadow: 0 0 7px rgba(55,255,112,.85);
}
#gameVoiceModeLbl {
    min-width: 34px;
    height: 16px;
    padding: 0 4px;
    border: 1px solid rgba(181,166,255,.85);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(78,64,151,.96), rgba(48,38,102,.96));
    color: #fff;
    font: 800 8px Arial, sans-serif;
    line-height: 14px;
    text-align: center;
}
#gameVoiceModeLbl.all {
    border-color: rgba(255,216,113,.92);
    background: linear-gradient(180deg, rgba(176,119,31,.98), rgba(119,73,14,.98));
}
#gameVoicePanel {
    position: absolute;
    right: 12px;
    top: 78px;
    left: auto;
    bottom: auto;
    width: 194px;
    z-index: 249;
    display: none;
    border: 1px solid rgba(238,198,88,.96);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(7,37,70,.97), rgba(2,17,37,.98));
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 9px;
}
#gameVoiceBcm { display: none !important; }
#gameVoicePanel .game_voice_head {
    height: 20px;
    padding: 3px 6px 2px;
    border-bottom: 1px solid rgba(235,199,99,.45);
    background: linear-gradient(180deg, rgba(18,61,103,.92), rgba(7,37,72,.92));
}
#gameVoicePanel .game_voice_title { color: #ffe7a2; font-size: 9px; font-weight: 800; }
#gameVoicePanel .game_voice_mode {
    float: right;
    min-width: 34px;
    height: 13px;
    padding: 0 4px;
    border: 1px solid rgba(123,225,255,.70);
    border-radius: 4px;
    background: rgba(17,94,138,.82);
    color: #e9fbff;
    font-size: 8px;
    font-weight: 800;
    line-height: 11px;
    text-align: center;
}
#gameVoiceMembers { max-height: 125px; overflow-y: auto; padding: 3px; }
#gameVoiceMembers .game_voice_member {
    position: relative;
    height: 21px;
    margin-bottom: 2px;
    padding: 3px 25px 2px 6px;
    border: 1px solid rgba(125,176,214,.22);
    border-radius: 4px;
    background: rgba(255,255,255,.055);
}
#gameVoiceMembers .game_voice_member.me { border-color: rgba(244,202,91,.45); background: rgba(244,202,91,.08); }
#gameVoiceMembers .game_voice_name { display: block; overflow: hidden; text-overflow: ellipsis; color: #f2f7fb; font-size: 9px; line-height: 13px; }
#gameVoiceMembers .game_voice_mic {
    position: absolute;
    right: 3px;
    top: 2px;
    width: 18px;
    height: 16px;
    padding: 0;
    border: 1px solid rgba(160,202,230,.62);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(34,57,80,.98), rgba(18,34,53,.98));
    color: #eaf7ff;
    cursor: pointer;
}
#gameVoiceMembers .game_voice_mic::before {
    content: "";
    position: absolute;
    left: 6px; top: 2px;
    width: 4px; height: 7px;
    border: 1px solid currentColor;
    border-radius: 4px;
    box-sizing: border-box;
}
#gameVoiceMembers .game_voice_mic::after {
    content: "";
    position: absolute;
    left: 5px; top: 8px;
    width: 6px; height: 4px;
    border: 1px solid currentColor;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-sizing: border-box;
}
#gameVoiceMembers .game_voice_member.muted .game_voice_mic {
    border-color: rgba(255,103,103,.94);
    background: linear-gradient(180deg, rgba(130,43,47,.98), rgba(86,24,29,.98));
    color: #ffe7e7;
}
#gameVoiceMembers .game_voice_empty { padding: 9px 4px; color: #b9d8ee; text-align: center; }

#roomVoiceBar {
    position: absolute;
    left: 267px;
    top: 142px;
    z-index: 25;
    display: none;
    width: 32px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.th #roomVoiceBar { left: 400px; top: 177px; }

#roomVoicePanel {
    position: absolute;
    left: 268px;
    top: 88px;
    width: 128px;
    height: 20px;
    z-index: 12;
    pointer-events: none;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 9px;
}
.th #roomVoicePanel { left: 298px; top: 123px; }
.th #gameVoiceBar { right: 12px; top: 50px; left: auto; bottom: auto; }
.th #gameVoicePanel { right: 12px; top: 78px; left: auto; bottom: auto; }
#roomVoicePanel .room_voice_head {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 1px 3px 1px 5px;
}
#roomVoicePanel .room_voice_title {
    color: #dff5ff;
    font-size: 9px;
    font-weight: 800;
    text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000;
}
#roomVoicePanel .room_voice_status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 13px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 800;
    line-height: 11px;
}
#roomVoiceModeStatus {
    min-width: 38px;
    border: 1px solid rgba(181,166,255,.85);
    background: linear-gradient(180deg, rgba(78,64,151,.96), rgba(48,38,102,.96));
}
#roomVoiceModeStatus.all {
    border-color: rgba(255,216,113,.92);
    background: linear-gradient(180deg, rgba(176,119,31,.98), rgba(119,73,14,.98));
}
#roomVoiceEnabledStatus {
    min-width: 28px;
    border: 1px solid rgba(126,255,177,.82);
    background: linear-gradient(180deg, rgba(29,145,70,.96), rgba(9,100,47,.96));
}
#roomVoiceEnabledStatus.off {
    border-color: rgba(255,142,142,.88);
    background: linear-gradient(180deg, rgba(168,52,52,.96), rgba(122,28,28,.96));
}

#RoomOptionsVoiceBox {
    position: absolute;
    left: 130px;
    top: 337px;
    width: 110px;
    height: 43px;
    z-index: 8;
    text-align: center;
}
.th #RoomOptionsVoiceBox { top: 330px; }
#RoomOptionsVoiceText {
    height: 15px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
}
#RoomOptionsVoiceEnabled, #RoomOptionsVoiceMode {
    position: absolute;
    top: 17px;
    height: 17px;
    padding: 0;
    border-radius: 4px;
    color: #fff;
    font: 800 9px Arial, sans-serif;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.28);
}
#RoomOptionsVoiceEnabled { left: 1px; width: 42px; border: 1px solid rgba(82,195,117,.95); background: linear-gradient(180deg, #39bc67, #148642); }
#RoomOptionsVoiceEnabled.off { border-color: rgba(220,87,87,.95); background: linear-gradient(180deg, #d84e4e, #922c2c); }
#RoomOptionsVoiceMode { right: 1px; width: 61px; border: 1px solid rgba(133,119,220,.95); background: linear-gradient(180deg, #7568bf, #493c8c); }
#RoomOptionsVoiceMode.all { border-color: rgba(214,171,72,.95); background: linear-gradient(180deg, #c39032, #8a5d18); }
#RoomOptionsVoiceMode.disabledmode { opacity: .52; filter: grayscale(.7); }

.room_voice_slot_mic {
    position: absolute;
    z-index: 31;
    width: 18px;
    height: 16px;
    padding: 0;
    border: 1px solid rgba(175,213,240,.70);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(34,56,80,.96), rgba(22,35,55,.96));
    color: #eef7ff;
    cursor: pointer;
}
.SideA .room_voice_slot_mic { left: -2px; top: 19px; }
.SideB .room_voice_slot_mic { right: -5px; top: 19px; }
.th .SideA .room_voice_slot_mic { left: -2px; top: -16px; }
.th .SideB .room_voice_slot_mic { right: -2px; top: -16px; }
.room_voice_slot_mic::before {
    content: "";
    position: absolute;
    left: 6px; top: 2px;
    width: 4px; height: 7px;
    border: 1px solid currentColor;
    border-radius: 4px;
    box-sizing: border-box;
}
.room_voice_slot_mic::after {
    content: "";
    position: absolute;
    left: 5px; top: 8px;
    width: 6px; height: 4px;
    border: 1px solid currentColor;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-sizing: border-box;
}
.room_voice_slot_mic.connected { border-color: rgba(131,217,255,.90); }
.room_voice_slot_mic.muted { border-color: rgba(255,103,103,.94); background: linear-gradient(180deg, rgba(130,43,47,.98), rgba(86,24,29,.98)); color: #ffe7e7; }

.team_voice_turn_icon {
    position: absolute;
    width: 14px;
    height: 14px;
    z-index: 90;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(225,246,255,.92);
    border-radius: 50%;
    background: rgba(7,38,57,.88);
    box-shadow: 0 1px 2px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
    opacity: .78;
}
.team_voice_turn_icon::before {
    content: "";
    position: absolute;
    left: 4px; top: 2px;
    width: 4px; height: 6px;
    border: 1px solid #fff;
    border-radius: 4px;
    box-sizing: border-box;
}
.team_voice_turn_icon::after {
    content: "";
    position: absolute;
    left: 3px; top: 7px;
    width: 6px; height: 4px;
    border: 1px solid #fff;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-sizing: border-box;
}
.team_voice_turn_icon.connected { opacity: 1; box-shadow: 0 0 5px rgba(116,235,255,.9); }
.team_voice_turn_icon.muted { border-color: rgba(255,122,122,.98); background: rgba(81,20,26,.94); opacity: 1; }

/* Season ranking / season history (reference Gumbao) */
.score_season_bonus {
    position: absolute;
    right: 10px;
    top: 70px;
    padding: 1px 5px;
    border: 1px solid rgba(197, 255, 120, .9);
    border-radius: 4px;
    color: #e7ffbd;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    display: none;
    white-space: nowrap;
    pointer-events: none;
}

.HD .score_season_bonus {
    right: 33px;
    top: 56px;
    font-size: 9px;
    line-height: 11px;
}

.th .score_season_bonus {
    right: 100px;
    top: 27px;
    font-size: 9px;
    line-height: 11px;
}

.seasonRankBadge {
    display: inline-block;
    position: relative;
    width: 25px;
    height: 15px;
    vertical-align: middle;
    overflow: visible;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    background-color: transparent !important;
    z-index: 3;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.seasonRankBadge[class*="srank"] {
    background-image: none;
}

.seasonRankLoading {
    opacity: .42;
    background: transparent !important;
}

.playerListSeasonRank {
    position: absolute;
    left: 27px;
    top: 0;
    width: 25px;
    height: 15px;
    background-size: 25px 15px !important;
}

#channelPlayersListHtml .playerListName {
    left: 27px;
    right: 0;
    line-height: 15px;
    padding: 0;
    top: 0;
    display: flex;
    align-items: flex-start;
    height: 15px
}

#channelPlayersListHtml .playerListRank {
    overflow: visible
}

#channelPlayersListHtml .playerListItem.hasSeasonRank .playerListName {
    left: 56px;
}

.roomSeasonRank {
    flex: 0 0 25px;
    width: 25px;
    height: 15px;
    margin: 0;
    top: 0;
    align-self: center;
    background-size: 25px 15px !important;
}

.gameSeasonRank {
    position: absolute !important;
    left: -14px !important;
    top: 17px !important;
    z-index: 6;
}

.turnSeasonRank {
    position: absolute;
    left: 40px;
    top: 0;
    width: 25px;
    height: 15px;
    background-size: 25px 15px !important;
}

.turnHasSeasonRank .turn_line_name {
    left: 69px;
    width: 92px;
}

#mySeasonRank {
    position: absolute;
    left: 619px;
    top: 97px;
    z-index: 35;
    overflow: visible;
    pointer-events: none;
    width: 25px;
    height: 15px;
}

#mySeasonGP {
    position: absolute;
    right: 118px;
    top: 260px;
    color: #7fe7ff;
    font-size: 9px;
    font-weight: 700;
    text-align: right;
    z-index: 35;
    white-space: nowrap;
    pointer-events: none;
}


#playersList .playerListSeasonRank,
#channelPlayersListHtml .playerListSeasonRank {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2;
}

.roomPlayerName img,
.roomPlayerName .vipTagImage {
    vertical-align: middle;
    max-height: 12px;
}

.roomPlayerName .vipMembershipInsignia {
    height: 15px !important;
    width: 25px !important;
    max-height: 15px !important;
    max-width: 25px !important;
    vertical-align: top;
    align-self: flex-start;
    margin-top: 0;
    top: 0;
}

.roomPlayerRank .rank,
.roomPlayerRank .seasonRankBadge {
    position: relative;
    display: inline-block;
    flex: 0 0 25px;
    width: 25px;
    height: 15px;
    overflow: visible;
    vertical-align: middle;
    align-self: center;
}

.roomPlayerRank .seasonRankBadge {
    background-size: 25px 15px !important;
    background-position: center center !important;
}

.vipRankBadge {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 15px;
    vertical-align: middle;
}

.vipRankBadge .rankEffect {
    position: absolute;
    top: 0;
    left: 0;
}

#ranking_btn_season {
    background: lime;
}

#ranking_btn_season.selected {
    background: lime;
}

.seasonRankingHeader {
    margin: 2px 4px 4px;
    padding: 5px;
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 151, 180, .72), rgba(0, 74, 104, .78));
    border: 1px solid rgba(111, 236, 255, .9);
    border-radius: 4px;
    color: #fff;
}

.seasonRankingHeader button {
    margin-top: 4px;
}

.seasonHistory {
    padding: 6px;
}

.seasonHistory h3 {
    margin: 2px 0 8px;
    text-align: center;
    color: white;
}

.seasonHistoryRow {
    position: relative;
    min-height: 38px;
    margin-bottom: 5px;
    padding: 5px 4px 5px 38px;
    background: rgba(0, 76, 105, .7);
    border: 1px solid rgba(99, 224, 255, .5);
    border-radius: 4px;
}

.seasonHistoryRow > .seasonRankBadge {
    position: absolute;
    left: 6px;
    top: 10px;
}

.seasonHistoryText {
    line-height: 16px;
}

.seasonHistoryEmpty,
.seasonHistoryLoading {
    padding: 15px;
    text-align: center;
}

#btnBackSeasonRanking {
    display: block;
    margin: 8px auto;
}

.seasonRankBadge.srank0 { background-image: url(/static/images/ranks3/0.png) !important; }
.seasonRankBadge.srank1 { background-image: url(/static/images/ranks3/1.png) !important; }
.seasonRankBadge.srank2 { background-image: url(/static/images/ranks3/2.png) !important; }
.seasonRankBadge.srank3 { background-image: url(/static/images/ranks3/3.png) !important; }
.seasonRankBadge.srank4 { background-image: url(/static/images/ranks3/4.png) !important; }
.seasonRankBadge.srank5 { background-image: url(/static/images/ranks3/5.png) !important; }
.seasonRankBadge.srank6 { background-image: url(/static/images/ranks3/6.png) !important; }
.seasonRankBadge.srank7 { background-image: url(/static/images/ranks3/7.png) !important; }
.seasonRankBadge.srank8 { background-image: url(/static/images/ranks3/8.png) !important; }
.seasonRankBadge.srank9 { background-image: url(/static/images/ranks3/9.png) !important; }
.seasonRankBadge.srank10 { background-image: url(/static/images/ranks3/10.png) !important; }
.seasonRankBadge.srank11 { background-image: url(/static/images/ranks3/11.png) !important; }
.seasonRankBadge.srank12 { background-image: url(/static/images/ranks3/12.png) !important; }
.seasonRankBadge.srank13 { background-image: url(/static/images/ranks3/13.png) !important; }
.seasonRankBadge.srank14 { background-image: url(/static/images/ranks3/14.png) !important; }
.seasonRankBadge.srank15 { background-image: url(/static/images/ranks3/15.png) !important; }
.seasonRankBadge.srank16 { background-image: url(/static/images/ranks3/16.png) !important; }
.seasonRankBadge.srank17 { background-image: url(/static/images/ranks3/17.png) !important; }
.seasonRankBadge.srank18 { background-image: url(/static/images/ranks3/18.png) !important; }
.seasonRankBadge.srank19 { background-image: url(/static/images/ranks3/19.png) !important; }
.seasonRankBadge.srank20 { background-image: url(/static/images/ranks3/20.png) !important; }
.seasonRankBadge.srank21 { background-image: url(/static/images/ranks3/21.png) !important; }
.seasonRankBadge.srank22 { background-image: url(/static/images/ranks3/22.png) !important; }
.seasonRankBadge.srank23 { background-image: url(/static/images/ranks3/23.png) !important; }
.seasonRankBadge.srank24 { background-image: url(/static/images/ranks3/24.png) !important; }
.seasonRankBadge.srank25 { background-image: url(/static/images/ranks3/25.png) !important; }
.seasonRankBadge.srank26 { background-image: url(/static/images/ranks3/26.png) !important; }
.seasonRankBadge.srank27 { background-image: url(/static/images/ranks3/27.png) !important; }
.seasonRankBadge.srank28 { background-image: url(/static/images/ranks3/28.png) !important; }
.seasonRankBadge.srank29 { background-image: url(/static/images/ranks3/29.png) !important; }
.seasonRankBadge.srank30 { background-image: url(/static/images/ranks3/30.png) !important; }
.seasonRankBadge.srank31 { background-image: url(/static/images/ranks3/31.png) !important; }
.seasonRankBadge.srank32 { background-image: url(/static/images/ranks3/32.png) !important; }
.seasonRankBadge.srank33 { background-image: url(/static/images/ranks3/33.png) !important; }
.seasonRankBadge.srank34 { background-image: url(/static/images/ranks3/34.png) !important; }
.seasonRankBadge.srank35 { background-image: url(/static/images/ranks3/35.png) !important; }
.seasonRankBadge.srank36 { background-image: url(/static/images/ranks3/36.png) !important; }
.seasonRankBadge.srank37 { background-image: url(/static/images/ranks3/37.png) !important; }
.seasonRankBadge.srank38 { background-image: url(/static/images/ranks3/38.png) !important; }
.seasonRankBadge.srank39 { background-image: url(/static/images/ranks3/39.png) !important; }
.seasonRankBadge.srank40 { background-image: url(/static/images/ranks3/40.png) !important; }
.seasonRankBadge.srank41 { background-image: url(/static/images/ranks3/41.png) !important; }

#ranking_btn_season,
#ranking_btn_season_ranks,
#rankEventSeason,
#mySeasonRank,
#mySeasonGP,
#btnBackSeasonRanking,
.seasonRankBadge,
.seasonGpInline,
.turnSeasonRank,
.roomSeasonRank,
.gameSeasonRank,
.playerListSeasonRank,
.seasonRankingHeader,
.seasonHistoryRow,
.score_season_bonus {
    display: none !important;
}

/* Sin badge de season visible: no dejar hueco entre rank y nick */
#channelPlayersListHtml .playerListItem.hasSeasonRank .playerListName {
    left: 27px !important;
}

#channelPlayersListHtml .playerListItem.hasVipRank .playerListName {
    left: 55px !important;
}

#channelPlayersListHtml .playerListItem.hasVipRank .playerListRank.vipRankBadge {
    position: absolute;
    left: 27px !important;
    top: 0;
    width: 25px;
    height: 15px;
    display: block !important;
}

.turn_line.hasVipTurn .turn_line_rank {
    width: 54px !important;
    display: flex !important;
    align-items: center !important;
}

.turn_line.hasVipTurn .turn_line_name {
    left: 68px !important;
}

#myVipRank {
    position: absolute;
    left: 619px;
    top: 97px;
    width: 25px;
    height: 15px;
    z-index: 32;
    pointer-events: none;
}

/* Survival Royale */
#jewel_timer_panel { display: none; position: fixed; left: 50%; top: 106px; transform: translateX(-50%); z-index: 35; padding: 6px 14px; border-radius: 9px; background: rgba(12,12,20,.78); border: 1px solid rgba(72,224,255,.45); box-shadow: 0 0 12px rgba(18,217,255,.25); pointer-events: none; }
.jewel_timer_label { display: block; font: 700 10px Arial,sans-serif; color: #7ef9ff; letter-spacing: 1px; text-align: center; }
.jewel_timer_value { display: block; font: 700 16px Arial,sans-serif; color: #fff; text-align: center; text-shadow: 0 0 6px rgba(18,217,255,.6); }
.survivalEffectBadge { position: absolute; left: -52px; top: -24px; min-width: 105px; z-index: 8; text-align: center; white-space: nowrap; color: #7ef9ff; font: 700 10px Arial,sans-serif; text-shadow: -1px -1px 1px #07102b, 1px -1px 1px #07102b, -1px 1px 1px #07102b, 1px 1px 1px #07102b, 0 0 5px #18d9ff; pointer-events: none; }
.survivalShieldAura { display: none; position: absolute; z-index: 1; left: -34px; top: -97px; width: 126px; height: 150px; pointer-events: none; opacity: .96; transform-origin: 50% 58%; filter: saturate(1.08); animation: survivalCrystalBreath 2.15s ease-in-out infinite; }
.survivalShieldAura > span { position: absolute; display: block; box-sizing: border-box; pointer-events: none; }
.survivalShieldGlass, .survivalShieldHex, .survivalShieldShine, .survivalShieldRim, .survivalShieldImpactLayer { inset: 7px 8px 8px; border-radius: 50%; }
.survivalShieldGlass { overflow: hidden; background: radial-gradient(circle at 31% 24%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.09) 15%, rgba(171,247,255,.18) 30%, rgba(78,205,255,.11) 52%, rgba(23,116,216,.06) 72%, rgba(0,33,91,.015) 100%); }
.survivalShieldHex { overflow: hidden; opacity: .52; mix-blend-mode: screen; }
.survivalShieldShine { overflow: hidden; opacity: .56; mix-blend-mode: screen; }
.survivalShieldRim { inset: 5px 6px 6px; border: 2px solid rgba(225,255,255,.94); opacity: .94; }
.survivalShieldCrystal, .survivalShieldNode { background: linear-gradient(135deg,#fff 0%,#c8fbff 28%,#61ddff 62%,#126be5 100%); border: 1px solid rgba(236,255,255,.95); transform: rotate(45deg); }
.survivalShieldCrystalTop { z-index: 4; left: 50%; top: -6px; width: 20px; height: 28px; margin-left: -10px; }
.survivalShieldCrystalBottom { z-index: 4; left: 50%; bottom: -2px; width: 17px; height: 21px; margin-left: -8.5px; }
.survivalShieldNode { z-index: 4; width: 13px; height: 13px; }
.survivalShieldNodeLeft { left: 1px; top: 57px; }
.survivalShieldNodeRight { right: 1px; top: 57px; }
.survivalShieldNodeBottomLeft { left: 19px; bottom: 17px; width: 10px; height: 10px; opacity: .9; }
.survivalShieldNodeBottomRight { right: 19px; bottom: 17px; width: 10px; height: 10px; opacity: .9; }
@keyframes survivalCrystalBreath { 0%,100% { transform: translateY(1px) scale(.985); } 50% { transform: translateY(-1px) scale(1.015); } }
.survivalShieldImpactLayer { z-index: 7; opacity: 0; border: 3px solid rgba(255,255,255,.98); background: radial-gradient(ellipse at center,rgba(255,255,255,.24),rgba(119,235,255,.13) 48%,rgba(0,0,0,0) 73%); box-shadow: 0 0 15px rgba(255,255,255,.98),0 0 38px rgba(104,235,255,.95),inset 0 0 20px rgba(255,255,255,.56); transform: scale(.82); }
.survivalShieldAura.survivalShieldImpact { animation: survivalCrystalImpactBody .46s ease-out 1; }
.survivalShieldAura.survivalShieldImpact .survivalShieldImpactLayer { animation: survivalCrystalImpactFlash .46s ease-out 1; }
.survivalShieldAura.survivalShieldImpact .survivalShieldHex { animation: survivalCrystalHexImpact .46s ease-out 1; }
@keyframes survivalCrystalImpactBody { 0% { transform: scale(1); filter: saturate(1.08); } 34% { transform: scale(1.055); filter: saturate(1.35) brightness(1.18); } 100% { transform: scale(1.01); filter: saturate(1.08); } }
@keyframes survivalCrystalImpactFlash { 0% { opacity: 0; transform: scale(.8); } 28% { opacity: 1; transform: scale(1.075); } 100% { opacity: 0; transform: scale(1.13); } }
@keyframes survivalCrystalHexImpact { 0% { opacity: .48; } 35% { opacity: 1; filter: brightness(1.9); } 100% { opacity: .52; filter: brightness(1); } }
.survivalGiantTank { transform: scale(1.24); transform-origin: 50% 85%; z-index: 3; }
#container.survival-items-locked #gameItemSlot0,#container.survival-items-locked #gameItemSlot1,#container.survival-items-locked #gameItemSlot2,#container.survival-items-locked #gameItemSlot3,#container.survival-items-locked #gameItemSlot4,#container.survival-items-locked #gameItemSlot5 { filter: grayscale(1); opacity: .45; pointer-events: none; }
#container.jewel-mode #score_panel { display: block !important; }

/* Frank Poison + Wolf Fire */
.frankPoisonActive .divMobile,
.frankPoisonActive > div:first-child {
    filter: hue-rotate(92deg) saturate(2.4) brightness(0.88) sepia(0.35) !important;
}

.wolfFireZoneFx {
    position: absolute;
    z-index: 2;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,120,20,.75) 0%, rgba(255,60,0,.45) 45%, rgba(180,20,0,.15) 70%, rgba(0,0,0,0) 100%);
    box-shadow: 0 0 18px rgba(255,100,0,.65), 0 0 36px rgba(255,40,0,.35);
    animation: wolfFirePulse 0.85s ease-in-out infinite alternate;
}

@keyframes wolfFirePulse {
    0% { transform: scale(0.92); opacity: 0.75; }
    100% { transform: scale(1.08); opacity: 1; }
}