@font-face {
    font-family: "Pixelation";
    src: url('/assets/fonts/Pixelation.ttf') format("truetype");
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: none;
    transform: scale(1);
    font-weight: normal;
    text-rendering: optimizeSpeed;
}

@font-face {
    font-family: "Eight-Bit-Madness";
    src: url('/assets/fonts/Eight-Bit-Madness.ttf') format("truetype");
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: none;
    transform: scale(1);
    font-weight: normal;
    text-rendering: optimizeSpeed;
}

html{
    width: 100%;
    height: 100%;
}

body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: none;
    overflow: hidden;
}

body, html, canvas {
    touch-action: manipulation;  /* Disables double-tap to zoom */
    user-select: none;           /* Prevents text selection */
    -webkit-user-select: none;   /* Prevents text selection on iOS Safari/Chrome */
    -ms-user-select: none;       /* Prevents text selection on IE/Edge */
    -moz-user-select: none;      /* Prevents text selection on Firefox */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the tap highlight color on iOS */
}

.clear {
    clear: both;
}

.no-margin-top{
    margin-top: 0 !important;
}

/* JOYSTICK */

div#mainJoystick {
    border: 1px solid black;
    position: fixed;
    display: none;
    border-radius: 100%;
    padding: 20px;
    background: #0000009e;
    bottom: 70px;
    left: 12px;
    width: 82px;
    height: 82px;
}

.joystick {
    background-color: #FFF;
    border-radius: 100%;
    cursor: pointer;
    height: 100%;
    user-select: none;
    width: 100%;
    outline: none;
    -webkit-tap-highlight-color: transparent;  
    user-select: none;         
    -webkit-user-select: none;   
    -ms-user-select: none;      
    -moz-user-select: none; 
}  

/* END JOYSTICK */

div#server-processing-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    max-width: 100%;
    max-height: 100%;
    display: none;
}

div#server-processing-overlay .server-processing-animation-holder {
    width: 60px;
    height: 60px;
    position: absolute;
    top: calc(50% + 30px);
    left: calc(50% + 30px);
    background-color: #FFF;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0 2px 6px 1px #000000a6;
    background-image: url(images/loading-animation.gif);
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    scale: 2;
}

a:hover,
a:focus,
button:hover,
button:focus{
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    outline: none;
}

#overall-container{
    width: 100%;
    height: 100%;
    background: #282828;
}  

#preload-assets{
    visibility: hidden;
    height: 0;
    overflow: hidden;
    width: 0;
}

div#game-container {
    background: #282828;
    width: 100%;
    height: calc(100% - 52px);
    overflow: hidden;            
    padding: 0;
    position: relative;
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard */
}

div#game-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    margin: 0 !important;
    padding: 0 !important; 
    font-family: "Pixelation";  
}

div#menu-bar {
    position: relative;
    overflow: hidden;
    height: 37px;
    background: #9e9e9e;
    padding: 7px 5px;
    border-top: 1px solid #3b3b3b;
    margin: 0 auto;
    pointer-events: none;
    opacity: 0.4;
}

form#chat-form {
    width: calc(100% - 141px);
    float: left;
    overflow: hidden;
}

form#chat-form input {
    width: calc(100% - 22px);
    padding: 10px;
    border-radius: 7px;
    border: 1px solid #000;
    box-shadow: inset -1px 1px 0px 1px #d7d7d7;
    font-family: Arial, sans-serif !important;
}

form#chat-form input:focus {
    border: 2px solid #000;
    outline: none;
    box-shadow: inset 0 0 1px 2px #d7d7d7;
    width: calc(100% - 22px);
    padding: 9px;
}

/* START INITIAL LOADER */

img#initial-load-logo {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    display: block;
    margin: 4px auto 11px;
}

div#initial-load-container {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 46px);
    max-width: 380px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background: #FFF;
    position: fixed;
    padding: 8px 11px;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    backface-visibility: hidden;
    z-index: 9997;
}

div#initial-load-container .initial-load-rule-container {
    background: #e3e3e3;
    margin: 4px 0;
    align-items: center;
    padding: 6px;
    border-radius: 6px;    
    display: flex;
}

div#initial-load-container .initial-load-rule-img {
    width: 30px;
    height: 30px;
    background: #FFF;
    border-radius: 3px;
    box-shadow: 0 1px 1px #0000004a;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    background-image: url(images/loading-rule-icons.png); 
}

div#initial-load-container .initial-load-rule-text {
    padding-left: 8px;
    font-size: 14px;
}

div#initial-load-loading-bar-container {
    width: calc(100% - 8px);
    height: 22px;
    border: 2px solid #000;
    margin: 10px 0 4px;
    padding: 2px;
    position: relative;
}

div#initial-load-loading-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(45deg, #3ac7fd, #fdc33a, #fd543a, #fd3aac, #b164ed, #467bfb, #44e45a);
    animation: rainbowAnimation 12s ease infinite;
    background-size: 800% 800%;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#initial-load-percent-loaded-text {
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0px 1px 1px #FFF;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 5px;
}

div#initial-load-container .initial-load-rule-img.rule-icon-1{  
    background-position: 0 0;    
}

div#initial-load-container .initial-load-rule-img.rule-icon-2{ 
    background-position: 0 -30px;    
}

div#initial-load-container .initial-load-rule-img.rule-icon-3{ 
    background-position: 0 -60px;    
}

div#initial-load-container .initial-load-rule-img.rule-icon-4{ 
    background-position: 0 -90px;    
}

div#initial-load-container .initial-load-rule-img.rule-icon-5{ 
    background-position: 0 -120px;    
}

div#initial-load-container .initial-load-rule-img.rule-icon-6{ 
    background-position: 0 -150px;    
}

div#initial-load-container .initial-load-rule-img.rule-icon-7{ 
    background-position: 0 -180px;    
}

div#initial-load-container .initial-load-rule-img.rule-icon-8{ 
    background-position: 0 -210px;    
}

@media(max-height:400px){ 
    div#initial-load-container {
        scale: 0.5;
        top: 50%;
        left: 50%;
        transform: translate(-100%, -100%);
    }
}

@media (max-width: 320px) {
    div#initial-load-container .initial-load-rule-text {
        font-size: 12px;
        padding-left: 5px;
    }

    div#initial-load-container .initial-load-rule-container {
        padding: 3px;
    }
}

/* END INITIAL LOADER */

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

/* START LOADING TIPS */

div#loading-tips-container-flex{
    display: none;
}

div#loading-tips-container {
    width: 245px;
    user-select: none;
    background: #FFF;
    padding: 12px;
    border-radius: 17px;
    font-family: Arial, sans-serif;
    backface-visibility: hidden;
    box-shadow: 0 3px 4px #000;
    position: relative;
    margin-top: -160px;
}

div#loading-tips-img-container {
    width: 245px;
    height: 229px;
    background-image: url(assets/spritesheets/loading-tips-spritesheet.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    overflow: hidden;
    position: relative;
}

div#loading-tips-heading {
    position: absolute;
    bottom: 5px;
    width: 100%;
    font-weight: 600;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 1px -1px 0px #0000005e;
    text-align: center;
}

div#loading-tips-text {
    font-size: 14px;
    text-align: center;
    padding: 12px 0 3px;
}

div#loading-tips-img-display {
    width: 229px;
    height: 191px;
    background-image: url(assets/spritesheets/loading-tips-spritesheet.png);
    background-repeat: no-repeat;
    background-position: 0 -229px;
    margin: 8px 0 0 8px;
    background-color: #818181;
}

div#loading-tips-loading-text {
    position: absolute;
    width: calc(100% - 24px);
    bottom: -27px;
    color: #8d8d8d;
    font-size: 13px;
    text-align: center;
}

div#loading-tips-early-dev {
    position: absolute;
    color: #000;
    text-align: center;
    width: calc(100% - 20px);
    font-size: 11px;
    padding: 29px 10px 10px 10px;
    left: 1px;
    border-radius: 14px;
    background-color: #ffe484;
    background-image: url(images/construction-bar.png);
    background-repeat: no-repeat;
    background-position: 8px 9px;
    bottom: -122px;
}

div#loading-tips-early-dev span {
    font-weight: 800;
    font-style: italic;
    font-size: 18px;
    color: #000;
    display: block;
    margin: 0 0 -2px 0;
    padding: 0;
}

@media (max-height: 540px) {
    div#loading-tips-early-dev {
        display: none;
    }
    
    div#loading-tips-container {
        margin-top: -85px;
    }  
}

@media(max-height:415px){ 
    div#loading-tips-container-flex {
        scale: 0.7;
    }
}

/* END LOADING TIPS */

div#bullet-allowance {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #FFF;
    text-shadow: 1px 1px 1px #000;
    font-family: 'Pixelation';
    font-size: 18px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    display: none;
}

div#mouse-attack-hint{
    display: none;
    background: #000000a3;
    color: #FFF;
    padding: 7px 9px 7px 25px;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    bottom: 5px;
    right: 5px;
    position: absolute;
    font-size: 12px;
    text-shadow: 0 1px 1px #000;
    background-image: url(images/attack-left-click-icon.png);
    background-repeat: no-repeat;
    background-position: 7px 6px;    
}

div#room-activity {
    position: fixed;
    top: 20px;
    left: 20px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #FFF;
    overflow: hidden;
    height: 83px;
}

#room-activity .activityLike {
    background-image: url(assets/graphics/heart-icon.png);
    color: #bdbdbd;
}

#room-activity span.activityLiker {
    color: #ffffff;
    font-weight: 600;
}

#room-activity span.activityLiked {
    font-weight: 600;
    color: #ffa9c1;
    text-shadow: 0 1px 0 #000;
}

.activityEntry {
    background-color: #000000ab;
    padding: 6px 7px 6px 28px;
    border-radius: 3px;
    margin: 0 0 2px 0;    
    background-repeat: no-repeat;
    background-position: 2px 2px;
}

@media (max-width: 550px) {  
    div#room-activity{
        top: 53px;
        left: 8px;
    }    
}

.activityError{
    background-image: url(assets/graphics/error-icon.png);
}

.activityDeath{
    background-image: url(assets/graphics/death-icon.png);
}

.activityReload{
    background-image: url(assets/graphics/bulletmound.png);
}

.activityPowerUp{
    background-image: url(assets/graphics/fire-rate-powerup-2x.png);
}

.activityLevelUp{
    background-image: url(assets/graphics/level-up.png);
}

.activityYarnbloom{
    background-image: url(assets/graphics/yarnbloom-collected.png);
}

.activityWarpedIn{
    background-image: url(assets/graphics/warped-in.png);
}

.activityFishCaught{
    background-image: url(assets/graphics/fish-caught.png);
}

.activityWatered{
    background-image: url(assets/graphics/water-icon.png);
}

.activityTilled{
    background-image: url(assets/graphics/tilled-icon.png);
}

.activityPlanted{
    background-image: url(assets/graphics/planted-icon.png);
}

.activityTick{
    background-image: url(assets/graphics/tick-icon.png);
}

.activityTreated{
    background-image: url(assets/graphics/treated-icon.png);
}

.activityToken{
    background-image: url(assets/graphics/token-icon.png);
}

.activityMultiplier10{
    background-image: url(assets/graphics/multiplier-10.png);
}

span.activityKiller {
    font-weight: 600;
    color: #78e344;
}

span.activityKilled {
    font-weight: 600;
    color: #ffa5a5;
}

div#chat-display {
    width: 254px;
    height: 145px;
    background: #0000009e;
    border-radius: 10px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    border: 1px solid #000;
    padding: 10px;
    color: #FFF;
    font-family: Arial, sans-serif;
    font-size: 13px;
    display: none;
}

@media (max-width: 600px) {
    div#chat-display {
        width: calc(100% - 180px);
        height: 120px;
    }
    
    div#chat-display-inner {
        height: 120px !important;
    }    
}

@media (min-width: 850px) {
    div#chat-display {
        width: 410px;
        height: 222px;
        font-size: 14px;
    }

    div#chat-display-inner {
        height: 222px !important;
    }
}

@media (min-width: 1200px) {
    div#chat-display {
        width: 500px;
        height: 302px;
        font-size: 16px;
    }
    
    div#chat-display-inner {
        height: 304px !important;
    }
}

@media(max-height:415px){ 
    div#chat-display-inner {
        height: 125px !important;
    }
    
    div#chat-display {
        height: 124px !important;
    }
}

div#chat-display-inner{
    overflow-x: hidden;
    overflow-y: scroll;
    height: 145px;
    cursor: default;
    border: none;
    outline: none;
}

div#chat-display-inner div span {
    font-weight: 600;
    color: #d1d1d1;
    text-shadow: 0 1px 0 #000;
}

div#chat-display-inner div {
    color: #fff;
    font-weight: 300;
    width: calc(100% - 8px);
}

div#chat-display-inner div.red,
div#chat-display-inner div.orange,
div#chat-display-inner div.blue,
div#chat-display-inner div.green,
div#chat-display-inner div.yellow, 
div#chat-display-inner div.purple {
    color: #ffffff;
    background: #ff1661;
    width: calc(100% - 16px);
    font-style: italic;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 1px #00000096;
    margin: 4px 0;
    line-height: 1em;
}

div#chat-display-inner div.orange{
    background: #e97e03;
}

div#chat-display-inner div.purple {
    background: #822bc1;
}

div#chat-display-inner div.green{
    background: #04a359;
}

div#chat-display-inner div.blue{
    background: #00aeff;
}

div#chat-display-inner div.red span, 
div#chat-display-inner div.orange span, 
div#chat-display-inner div.blue span, 
div#chat-display-inner div.green span,
div#chat-display-inner div.purple span{
    color: #FFF;
}

div#chat-display-inner div.yellow {
    background: #ffd600;
}

div#chat-display-inner div.yellow span {
    color: #000;
    text-shadow: none;
}

div#chat-display-inner div.info {
    background: #007fbd;
    border-radius: 3px;
    line-height: 1;
    padding: 5px 6px 5px 6px;
    margin: 3px 0 4px 0;
    font-size: 13px;
    width: calc(100% - 17px);
    box-shadow: 0 1px 1px #000;
}

div#chat-display-inner div.chat-hint { background: #2f2f2f; color: #adadad; }
div#chat-display-inner div.chat-success { background: #008f64; color: #fff; }

div#chat-display-inner div.chat-hint ul{
    margin: 5px 0 0 0;
    padding: 0;
}

div#chat-display-inner div.chat-hint ul li {
    margin: 0 0 0 17px;
    padding: 0 0 0 0;
}

div#chat-display-inner div.admin{
    color: #fff998;
    text-shadow: 0px 1px 1px #000;
}
div#chat-display-inner div.admin span{ color: #fff998; }

div#chat-display-inner div.supporter,
div#chat-display-inner div.supporterBlue,
div#chat-display-inner div.supporterPurple,
div#chat-display-inner div.supporterGreen,
div#chat-display-inner div.supporterRed,
div#chat-display-inner div.supporterOrange,
div#chat-display-inner div.supporterPink
{
    text-shadow: 0px 1px 1px #000;
}

div#chat-display-inner div.supporter,
div#chat-display-inner div.supporter span{ color: #7af1ff; }

div#chat-display-inner div.supporterBlue,
div#chat-display-inner div.supporterBlue span{ color: #7af1ff; }

div#chat-display-inner div.supporterPurple,
div#chat-display-inner div.supporterPurple span{ color: #ecd7ff; }

div#chat-display-inner div.supporterGreen,
div#chat-display-inner div.supporterGreen span{ color: #bcffc5; }

div#chat-display-inner div.supporterRed,
div#chat-display-inner div.supporterRed span{ color: #ffadad; }

div#chat-display-inner div.supporterOrange,
div#chat-display-inner div.supporterOrange span{ color: #ffd0b0; }

div#chat-display-inner div.supporterPink,
div#chat-display-inner div.supporterPink span{ color: #ffbde3; }

div#chat-display-inner .blockedMessage {
    font-style: italic;
    opacity: 0.6;
    font-size: 12px;
}

@media (max-width: 600px) {
    div#chat-display-inner div.info{
        font-size: 10px;
    }

    div#chat-display-inner .blockedMessage {
        font-size: 9px;
    }
}

div#chat-display-inner::-webkit-scrollbar {
    width: 8px;
}

div#chat-display-inner::-webkit-scrollbar-thumb {
    background-color: #ababab; 
    border-radius: 4px;
}

div#chat-display-inner::-webkit-scrollbar-track {
    background-color: #333333;
    border-radius: 5px;
}

button#scenes-list,
button#joystick-list,
button#player-list {
    background: #000;
    color: #FFF;
    font-weight: 600;
    padding: 8px 10px 10px;
    border-radius: 7px;
    cursor: pointer;
    border: 2px solid #000;
    float: right;
    width: 116px;
}        

button#scenes-list {
    position: fixed;
    top: 10px;
    right: 41%;
}

button#joystick-list {
    position: fixed;
    top: 10px;
    right: 130px;
}

button#player-list {
    position: fixed;
    top: 10px;
    right: 50%;
}

button#main-menu-btn {
    float: left;
    background-color: #000;
    color: #FFF;
    font-weight: 600;
    padding: 9px 0 9px;
    border-radius: 7px;
    cursor: pointer;
    border: 2px solid #000;
    width: 60px;
    text-align: center;
    text-transform: uppercase;
    margin: 0 3px 0 0;
}

button#send-message,
button#toggle-chat-history{
    float: left;
    background-color: #000;
    color: #FFF;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    border: 2px solid #000;
    width: 36px;
    height: 37px;
    margin: 0 0 0 3px;
    background-position: -2px, 0;
    background-repeat: no-repeat;
}

button#send-message{
    background-image: url(images/send-icon.png);            
}

button#toggle-chat-history{
    background-image: url(images/chat-history-icon.png);
}

button#main-menu-btn:hover,
button#main-menu-btn:active,
button#scenes-list:hover,
button#scenes-list:active,
button#player-list:hover,
button#player-list:active,
button#send-message:hover,
button#send-message:active,
button#toggle-chat-history:hover,
button#toggle-chat-history:active {
    background-color: #3c3c3c;
}

button#main-menu-btn:focus,
button#scenes-list:focus,
button#player-list:focus,
button#send-message:focus,
button#toggle-chat-history:focus{
    outline: none;
}

@media (max-width: 1180px) {
    button#scenes-list,
    button#joystick-list,
    button#player-list {
        display: none;
    }
}

div#main-menu-buttons-container{
    overflow: hidden;
}

div#main-menu {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 9px 10px;
    background: #FFF;
    border-radius: 10px;
    z-index: 1;
    width: 212px;
    border: 1px solid #000;
    display: none;
    box-shadow: 0 2px 6px 1px #000000a6;    
}

div#main-menu button.close-button{
    z-index: 1;
}

div#main-menu div#coins-balance-holder {
    background: #ffbc00;
    width: auto;
    color: #000;
    cursor: default;
    box-shadow: inset 0 0 3px #000;
    border: none;
    padding: 7px 0;
    font-weight: 600;
    border-radius: 7px;
    text-align: center;
    margin: 1px 0;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

div#main-menu button#resume-tutorial {
    background-color: #000;
    color: #FFF;
    font-weight: 600;
    padding: 7px 0 7px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid #000;
    text-align: center;
    text-transform: uppercase;
    display: block;
    width: 100%;
    margin-top: 5px;
}

div#main-menu button#lresume-tutorial:hover,
div#main-menu button#resume-tutorial:active{
    background-color: #3c3c3c;
}

div#main-menu .menu-btn-container {
    width: 49%;
    float: left;
    background: #000;
    margin-right: 2%;
    margin-top: 2%;
    border-radius: 7px;
    height: 70px;
    background-repeat: repeat-x;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    color: #FFF;
    font-weight: 600;
    font-family: Arial, sans-serif;
    text-shadow: 0 1px 1px #000;
    position: relative;
    box-shadow: 0 1px 1px #000;
    background-position: 0 -3px !important;
}

div#main-menu .menu-btn-container:hover{
    opacity: 0.9;    
}

div#main-menu .menu-btn-container:active{
    box-shadow: inset 0 0 6px #000;
}

div#main-menu .menu-btn-container button{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
}

div#main-menu .menu-btn-container:nth-child(2n) {
    margin-right: 0;
}

div#main-menu .menu-btn-container.menu-btn-change-look {
    background: url(images/menu/change-look-bg.png);
    margin-top: 0;
}

div#main-menu .menu-btn-container.menu-btn-inventory {
    background: url(images/menu/inventory-bg.png);
    margin-top: 0;
}

div#main-menu .menu-btn-container.menu-btn-friends {
    background: url(images/menu/friends-bg.png);
}

div#main-menu .menu-btn-container.menu-btn-groups {
    background: url(images/menu/groups-bg.png);
}

div#main-menu .menu-btn-container.menu-btn-supporter {
    background: url(images/menu/supporter-bg.png);
}

div#main-menu .menu-btn-container.menu-btn-quests {
    background: url(images/menu/quests-bg.png);
}

div#main-menu .menu-btn-container.menu-btn-help {
    background: url(images/menu/help-bg.png);
}

div#main-menu .menu-btn-container.menu-btn-settings {
    background: url(images/menu/settings-bg.png);
}

/* --- */

div#main-menu .menu-btn-container.menu-btn-change-look .menu-btn-icon {
    background: url(images/menu/change-look-icon.png);       
}

div#main-menu .menu-btn-container.menu-btn-inventory .menu-btn-icon {
    background: url(images/menu/inventory-icon.png);
}

div#main-menu .menu-btn-container.menu-btn-supporter .menu-btn-icon {
    background: url(images/menu/supporter-icon.png);
}

div#main-menu .menu-btn-container.menu-btn-quests .menu-btn-icon {
    background: url(images/menu/quests-icon.png);
}

div#main-menu .menu-btn-container.menu-btn-friends .menu-btn-icon {
    background: url(images/menu/friends-icon.png);
}

div#main-menu .menu-btn-container.menu-btn-groups .menu-btn-icon {
    background: url(images/menu/groups-icon.png);
}

div#main-menu .menu-btn-container.menu-btn-help .menu-btn-icon {
    background: url(images/menu/help-icon.png);
}

div#main-menu .menu-btn-container.menu-btn-settings .menu-btn-icon {
    background: url(images/menu/settings-icon.png);
}

div#main-menu .menu-btn-container .menu-btn-icon{
    margin-bottom: 3px;
    width: 100%;    
    height: 43px;
    background-position: center !important;    
    background-repeat: no-repeat !important; 
}

/* --- */

div#health-container {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 200px;
    height: 14px;
    background: #fff;
    border: 2px solid #000;
    box-shadow: 0 2px 0px 0px #0000001f;
    display: none !important;
}

div#health-container #health-meter {
    height: calc(100% - 2px);
    background: #14c414;
    border: 1px solid #FFF;
}

div#health-container #health-meter.medium-health{
    background: #ee9b00;
}

div#health-container #health-meter.low-health{
    background: #e72949;
}

@media(max-width:500px){
    div#health-container {
        width: 100px;
    }
}

/* LOGIN/REGSITER */

div.form-left {
    width: 48.5%;
    float: left;
}

div.form-right {
    width: 48.5%;
    float: right;
}

div#screen-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000000a3;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    display: block;
    background-image: url(images/loading-text.png);
    background-repeat: no-repeat;
    background-position: center center;
}

div#eco-mode {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #00000073;
    z-index: 9999;
    max-width: 100%;
    max-height: 100%;
    display: none;
    background-image: url(images/eco-mode.png);
    background-repeat: no-repeat;
    background-position: center center;
}

div#login-form-container,
div#register-form-container{
    display: none;
}

div#pixadom-welcome {
    text-align: center;
}

div#pixadom-welcome img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    max-width: 100%;
    height: auto;
}

button.welcome-btn {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    margin: 0;
    background: #000;
    color: #FFF;
    border-radius: 4px;
    border: 2px solid #000;
    cursor: pointer;
    margin-top: 2px;
    background-repeat: no-repeat;
}

button.welcome-btn:hover,
button.welcome-btn:active{
    background-color: #3c3c3c;
}

button#revealLogin {
    background-image: url(images/login-register/login-icon.png);
    text-indent: 32px;
    background-position: 25px 8px;
}

button#revealRegister {
    background-image: url(images/login-register/register-icon.png);
    text-indent: 26px;
    background-position: 20px 8px;
}

button#continueAsGuest {
    background-image: url(images/login-register/guest-icon.png);
    text-indent: 26px;
    background-position: 51px 8px;
}

button#continueAsGuest:hover,
button#continueAsGuest:active{
    background-color: #3c3c3c;
}

#pixadom-welcome div.form-left {
    width: 128px;
}

#pixadom-welcome div.form-right {
    width: 128px;
}

button#continueAsGuest {
    margin-top: 4px;
}

div#login-register-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFF;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px 1px #000000a6;
    width: 100%;
    max-width: 260px;
    display: block;
    border: 1px solid #000;
    font-family: Arial, sans-serif;
    z-index: 2;
    display: none;
}

div#login-register-container h2 {
    background: linear-gradient(45deg, #3ac7fd, #fdc33a, #fd543a, #fd3aac, #b164ed, #467bfb, #44e45a);
    color: #FFF;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 6px 10px 5px;
    text-shadow: 0 1px 1px #000;
    animation: rainbowAnimation 12s ease infinite;
    background-size: 800% 800%;
    margin: 0;
    font-size: 22px;
    text-align: center;
}

div#login-register-container label,
div#login-register-container input{
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

div#login-register-container label{
    color: #FFF;
    text-transform: uppercase;
    font-size: 10px;
    display: block;
    background: #535252;
    padding: 4px 6px;
    margin-top: 5px;
    width: auto;
    border-radius: 4px 4px 0 0;
}

div#login-register-container input:not([type="submit"]) {
    font-size: 14px;
    background: #e9e9e9;
    padding: 9px 8px;
    width: calc(100% - 16px);
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 0 3px #0000007d;
}

div#login-register-container input:not([type="submit"]):hover,
div#login-register-container input:not([type="submit"]):active,
div#login-register-container input:not([type="submit"]):focus{
    border: none;
    outline: none;
    box-shadow: inset 0 0 3px 1px #0000007d;
}

div#login-register-container input[type="submit"] {
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    margin: 7px 0 0 0;
    background: #000;
    color: #FFF;
    border-radius: 4px;
    border: 2px solid #000;
    cursor: pointer;
}    

div#login-register-container input[type="submit"]:hover {
    background-color: #3c3c3c;
}

div#login-register-container .clear{
    clear: both;
}

#login-register-container .login-register-back-btn {
    background-color: #c5c5c5;
    border: 2px solid #c5c5c5;
    color: #000;
    margin-top: 5px;
}

#login-register-container .login-register-back-btn:hover,
#login-register-container .login-register-back-btn:active{
    background-color: #aaaaaa;
    border: 2px solid #767676;
    color: #000;
}

#login-register-container .email-registration-warning {
    font-size: 11px;
    text-align: center;
    background: #df5959;
    color: #FFF;
    padding: 5px;
    border-radius: 4px;
    margin: 3px 0 0 0;
}

div#login-register-container #login-form-container input[type="submit"] {
    background-image: url(images/login-register/login-icon.png);
    text-indent: 31px;
    background-position: 90px 8px;
    background-repeat: no-repeat;
}

div#login-register-container #register-form-container input[type="submit"] {
    background-image: url(images/login-register/register-icon.png);
    text-indent: 27px;
    background-position: 87px 8px;
    background-repeat: no-repeat;
}

@media (max-width: 1180px), (max-height: 820px) {
    div#game-container {
        max-width: 100%;
        max-height: calc(100% - 52px);
    }

    div#menu-bar{
        max-width: 100%;
    }
}

@media (max-width: 500px) {
    div#login-register-container {
        padding: 12px;
    }

    div#login-register-container input[type="submit"],
    #login-register-container .login-register-back-btn {
        padding: 8px;
    } 
}

@media(max-height: 470px){
    div#main-menu {
        width: calc(100% - 43px);
        max-width: 400px;
    }
    
    div#main-menu .menu-btn-container {
        width: 24.2%;
        margin-right: 1%;
        margin-top: 1%;
    }
    
    div#main-menu .menu-btn-container:nth-child(2n) {
        margin-right: 1% !important;
    }

    div#main-menu .menu-btn-container:nth-child(4n) {
        margin-right: 0 !important;
    }
}

@media(max-height: 450px){
    img.welcome-logo {
        display: none;
    }

    div#login-register-container h2 {
        font-size: 18px;
    }
}

@media(max-height: 400px){
    div#login-register-container {
        scale: 0.6;
        transform: translate(-84%, -84%);
    }
    
    div#login-register-container img {image-rendering: auto !important;}
}

/* LEADERBOARD */

div#bz-leaderboard {
    position: fixed;
    background: #FFF;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 6px 1px #000000a6;
    border: 1px solid #000;
    width: calc(100% - 40px);
    max-width: 200px;
    display: none;
}

div#bz-leaderboard h2 {
    margin: 0 0 4px 0;
    font-size: 22px;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    font-weight: 600;
    background: #000;
    color: #FFF;
    padding: 7px 11px;
    border-radius: 4px;
    text-align: center;
}

table.leaderboard-table {
    width: 100%;
    font-family: Arial, sans-serif;
}

table.leaderboard-table tr {
    text-align: left;
    background: #ededed;
}

table.leaderboard-table th {
    background: #cdcdcd;
    padding: 4px 7px;
    font-size: 14px;
}

table.leaderboard-table tr td {
    padding: 3px;
    font-size: 13px;
}

button#bz-leaderboard-close {
    background-color: #d85254;
    background-image: url(images/close.png);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 8px 10px;
    position: absolute;
    top: -15px;
    right: -15px;
    border: 2px solid #000;
}

button#bz-leaderboard-close:hover {
    background-color: #fd7173;
}

/* BATTLZONE COUNTDOWN */

div#bz-countdown {
    position: fixed;
    color: #FFF;
    bottom: 76px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 78px;
    text-shadow: 0 2px 0px #000;
    font-family: "Eight-Bit-Madness";
    display: none;
}

/* GENERAL BUTTON */

.button {
    position: fixed;    
    border: 2px solid #000;
    background: #000;
    color: #FFF;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 10px;
    border-radius: 7px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
}

.button:hover, .button:active {
    background: #3c3c3c;
}

.button:focus{
    outline: none;
}

/* GENERAL INTERFACE */

.middle-of-screen{
    top: 0;
    left: 0;
    visibility: hidden;
    backface-visibility: hidden;
}

.interface {
    position: fixed;
    background: #FFF;   
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 6px 1px #000000a6;
    border: 1px solid #000;
    width: 332px;
    font-family: Arial, sans-serif;
    backface-visibility: hidden;
}

.interface-loading {
    font-weight: 600;
    display: block;
    text-align: center;
    padding: 16px 0 7px 0;
}

.interface-content-container {
    height: calc(100% - 44px);
}

button.close-button {
    background-color: #d85254;
    background-image: url(images/close.png);
    border: none;
    width: 39px;
    height: 39px;
    border-radius: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 10px 12px;
    position: absolute;
    top: -15px;
    right: -15px;
    border: 2px solid #000;
}

button.close-button:hover {
    background-color: #fd7173;
}

.interface:not(.news-article-interface) h2 {
    margin: 0 0 4px 0;
    font-size: 22px;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    font-weight: 600;
    background: #000;
    color: #FFF;
    padding: 7px 11px;
    border-radius: 4px;
    text-align: center;
}

/* GENERAL INTERFACE - Tabs */

#tabs{
    height: 100%;
}

.ui-tabs-nav {
    margin: 0 0 4px;
    padding: 0;
    clear: both;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.ui-tabs-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    height: calc(100% - 31px);
}

.ui-tabs-nav li {
    list-style: none;
    float: left;
    text-align: center;
    margin: 0 2px 0 0;
    flex: 1;
}

.ui-tabs-nav li a {
    text-decoration: none;
    font-size: 14px;
    background: #dbdbdb;
    display: block;                
    padding: 5px 10px;
    border-radius: 3px;
    color: #000;
    box-shadow: inset 0 0 3px #00000069;
}

.ui-tabs-nav li:last-of-type {
    margin-right: 0;
}

.ui-tabs-nav li.ui-state-active a {
    background: #878787;
    color: #FFF;
}

.ui-tabs-panel span {
    font-size: 14px;
}

.ui-tabs-nav li a {
    font-size: 13px;
    padding: 5px 10px;
}

.ui-tabs-nav {
    margin: 0 0 5px;
    padding-bottom: 4px;
    overflow-x: scroll;
}

.ui-tabs-nav::-webkit-scrollbar-track {
    background-color: #cfcfcf;
    border-radius: 5px;
}

.ui-tabs-nav::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 4px;
}

.ui-tabs-nav::-webkit-scrollbar {
    height: 8px;
}

@media (max-width: 640px) and (max-height: 900px) {    
    .interface {
        width: 254px;
    }    
    
    .ui-tabs-panel {
        height: calc(100% - 40px);
    }
}

/* END Interface */

/* Regular alert */

.interface.regular-alert-positive h2 {
    background: #0e9161;
}

.interface.regular-alert-negative h2 {
    background: #c54245;
}

.interface.regular-alert-neutral h2 {
    background: #000;
}

.interface.regular-alert-interface {
    text-align: center;
    width: 360px;
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
    top: 50%;
    left: 50%;
    backface-visibility: hidden;
}

.interface.regular-alert-interface p {
    font-size: 14px;
    line-height: 1.3em;
    margin: 18px 0 20px;
}

.interface.regular-alert-interface button {   
    padding: 10px 25px;
    text-transform: uppercase;
    font-weight: 600;
    border: 2px solid #000000;
    background: #000000;
    color: #FFF;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
}

.interface.regular-alert-interface button:hover {
    background: #3c3c3c;
}

button.general-button{
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    background: #000000;
    color: #FFF;
    border-radius: 4px;
    border: 2px solid #000000;
    cursor: pointer;
    margin-top: 4px;
    background-repeat: no-repeat;
    font-family: Arial, sans-serif;
}

button.general-button:hover,
button.general-button:active{
    background: #3c3c3c;
}

button.green-button,
.interface button.green-button {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    background: #0e9161;
    color: #FFF;
    border-radius: 4px;
    border: 2px solid #0e9161;
    cursor: pointer;
    margin-top: 4px;
    background-repeat: no-repeat;
    font-family: Arial, sans-serif;
}

button.green-button:hover,
button.green-button:active,
.interface button.green-button:hover,
.interface button.green-button:active{
    background: #26b17d;
}

button.red-button,
.interface button.red-button {
    background: #d85254;
    border: 2px solid #d85254;
}

button.red-button:hover,
button.red-button:active,
.interface button.red-button:hover,
.interface button.red-button:active{
    background: #fd7173;
}

div#alert-no-button {
    padding-bottom: 4px;
}

@media (max-width: 425px) {
    .interface.regular-alert-interface {
        text-align: center;
        width: 255px;
    }

    .interface.regular-alert-negative h2,
    .interface.regular-alert-positive h2 {
        font-size: 18px;
    }
}

/* CHOICE ALERT */

#choice-alert-content {
    background: #e5e5e5;
    border: 1px solid #CCC;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    padding: 10px 10px;
    margin: 8px 0 15px;
}

div#choice-alert-button-holder button {
    margin-left: 2px;
    margin-right: 2px;
}

.choice-alert input#alert-password-field {
    width: calc(100% - 28px);
    display: block;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: inset -1px 1px 2px #00000052;
    padding: 13px;
    font-size: 16px;
    margin: -2px 0 13px;
}

/* PLAYERS ONLINE COUNTER */

div#player-online-counter-holder {
    position: absolute;
    top: -28px;
    right: -1px;
    background: #0000009e;
    padding: 5px 8px 6px;
    font-size: 11px;
    border-radius: 7px;
    text-shadow: 0 1px 1px #000;
}

/* HELP INTERFACE */

div#help-interface {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 65px);
    max-width: 600px;
    display: none;
    position: fixed;
    background: #FFF;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 6px 1px #000000a6;
    border: 1px solid #000;
    font-family: Arial, sans-serif;
}

div#help-interface h3 {
    background: #447ef6;
    color: #FFF;
    margin: 5px 0 0;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 1px #1a4ea9;
    padding: 9px 10px 7px;
}

div#help-interface h3:hover,
div#help-interface h3:active {
    background: #2569f6;
}

div#help-interface h3:focus{
    outline: none;
}

div#help-interface p,
div#help-interface li{
    font-size: 14px;
}

div#help-interface p{
    margin: 10px 0;
    line-height: 1.2em;
}

div#help-interface ul,
div#help-interface li{
    margin: 0;
    padding: 0;
}

div#help-interface ul{
    margin: 10px 0 10px 17px;
}

div#help-interface li{
    line-height: 1.2em;
    margin: 9px 0;
}

div#help-accordion div:last-of-type {
    margin-bottom: -8px;
}

div#help-accordion {
    overflow-y: scroll;
    height: 508px;
    padding-right: 4px;
    padding-bottom: 3px;
}

div#help-accordion::-webkit-scrollbar {
    width: 8px;
}

div#help-accordion::-webkit-scrollbar-thumb {
    background-color: #333333; 
    border-radius: 4px;
}

div#help-accordion::-webkit-scrollbar-track {
    background-color: #ababab; 
    border-radius: 5px;
}

div#help-interface a {
    color: #4181f1;
    text-decoration: none;
}

div#help-interface a:hover {
    text-decoration: underline;
    color: #2569f6;
}

a#join-us-on-discord-btn {
    background: rgb(0,0,0);
    background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(59,59,59,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(59,59,59,1) 100%);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(59,59,59,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#3b3b3b",GradientType=1);
    display: block;
    text-align: center;
    line-height: 0;
    padding: 15px 10px 9px;
    border-radius: 5px;
    height: 60px;
    border: none;
    outline: none;
    user-select: none;
}

a#join-us-on-discord-btn:hover,
a#join-us-on-discord-btn:focus{
    background: rgb(29,29,29);
    background: -moz-linear-gradient(0deg, rgba(29,29,29,1) 0%, rgba(78,78,78,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(29,29,29,1) 0%, rgba(78,78,78,1) 100%);
    background: linear-gradient(0deg, rgba(29,29,29,1) 0%, rgba(78,78,78,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1d1d1d",endColorstr="#4e4e4e",GradientType=1);
}

a#join-us-on-discord-btn img {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
}

@media (max-height: 635px){
    div#help-accordion{
        height: 370px;
    }

    div#help-interface p, div#help-interface li {
        font-size: 12px;
    }
    
    div#help-interface h3 {
        font-size: 14px;
        padding: 7px 10px 7px;
    }
}

@media (max-height: 485px){
    div#help-accordion{
        height: 210px;
    }
}

/* PLAYER PROFILES */

/* --- Main player options */
div#mainplayer-options {
    position: fixed;
    top: calc(50% - 185px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    background: #0000007a;
    background: linear-gradient(0deg, rgba(0,0,0,0.8477766106442577) 0%, rgb(0 0 0 / 51%) 100%);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #000;
    display: none;
}

div#mainplayer-options button:not(.close-button) {
    display: block;
    width: 100%;
    margin: 0 0 5px 0;
    padding: 8px 9px;
    background: #FFF;
    border: 2px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    box-shadow: 0 1px 3px #000;
    color: #000;
}

div#mainplayer-options button:last-of-type {
    margin-bottom: 0;
}

div#mainplayer-options button:not(.inactive, .close-button):hover,
div#mainplayer-options button:not(.inactive, .close-button):active{
    background: #dfdfdf;
}

div#mainplayer-options button.inactive {
    cursor: auto;
    background: #666666;
    color: #CCC;
    border-color: #8b8b8b;
}

@media(max-height:415px){ 
    div#mainplayer-options {
        top: calc(50% - -34px);
    }
}

/* --- Profiles */

div#user-profile {
    position: fixed;
    background: #FFF;
    bottom: 70px;
    right: 17px;
    width: 230px;
    padding: 9px 10px;
    border-radius: 10px;
    z-index: 1;
    border: 1px solid #000;
    box-shadow: 0 2px 6px 1px #000000a6;
    font-family: Arial, sans-serif;
    display: none;
}

div#user-profile button.close-button{
    z-index: 1;
}

div#user-profile-username {
    background: #000;
    color: #FFF;
    text-align: center;
    border-radius: 5px;
    padding: 5px 9px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

div#user-profile-page-1 {
    position: relative;
}

div#user-profile-device-category {
    position: absolute;
    width: 19px;
    height: 20px;
    background-image: url(assets/graphics/spritesheets/device-category-icons-spritesheet.png);
    top: 4px;
    left: 4px;
    background-position: 0 0;
    background-repeat: no-repeat;
    overflow: hidden;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

div#user-profile-main-details {height: 81px;}

div#user-profile-avatar-container {
    background: white;
    width: 80px;
    height: 81px;
    float: left;
    border-radius: 3px;
    box-shadow: inset 0 0 3px 0px #000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

div#user-profile-main-details-right {
    float: right;
    width: 146px;
    height: 81px;
    overflow: hidden;
}

div#user-profile-main-details-right div {
    box-shadow: inset -1px 1px 1px #9b9b9b;
    font-size: 13px;
    padding: 5px 6px;
    margin-bottom: 3px;
    text-align: right;
    border-radius: 3px;  
    background-color: #e9e7e7;
    background-repeat: no-repeat;
    background-position: 3px 3px;
}

div#user-profile-bio {
    background: #e9e7e7;
    box-shadow: inset -1px 1px 1px #9b9b9b;
    font-size: 13px;
    padding: 9px 11px;
    margin: 4px 0 0px 0;
    height: 46px;
    border-radius: 5px;
}

div#user-profile-action-buttons {
    overflow: hidden;
    padding-bottom: 2px;
}

div#user-profile-action-buttons button {
    border: none;
    width: 100%;
    font-size: 13px;
    padding: 9px;
    margin: 4px 0 0 0;
    font-weight: 700;
    background-repeat: repeat-x;
    background-position: center;
    color: #FFF;
    text-shadow: 0 1px 0 #000;
    border-radius: 5px;
    outline: none;
    box-shadow: 0 1px 0px 0px #000000;
    cursor: pointer;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
}

div#user-profile-action-buttons button:hover{
    opacity: 0.9;    
}

div#user-profile-action-buttons button:active{
    box-shadow: inset 0 0 4px #000;
}

button#user-profile-add-friend-btn {
    background: url(images/menu/change-look-bg.png);
}

button#user-profile-trade-btn {
    background: url(images/menu/friends-bg.png);
}

button#user-profile-like-btn {
    background: url(images/menu/quests-bg.png);
}

button#user-profile-block-btn {
    background: url(images/menu/supporter-bg.png);
}

button#user-profile-block-btn.unblock {
    background-color: rgb(107 231 138);
    background-blend-mode: luminosity;
    background-position: center;
}

div#user-profile-action-buttons .left {
    float: left;
    width: 49%;
}

div#user-profile-action-buttons .right {
    float: right;
    width: 49%;
}

div#user-profile-badges .badge {
    width: 68px;
    height: 68px;
    background-color: #FFF;
    float: left;
    margin-right: 5px;
    border-radius: 2px;
    background-image: url(images/profiles/no-badge-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
}

div#user-profile-badges .badge img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

div#user-profile-badges {
    overflow: hidden;
    background: black;
    border-radius: 5px;
    margin: 5px 0 0 0;
    padding: 8px;
}

div#user-profile-badges .badge:last-of-type {
    margin-right: 0 !important;
}

div#user-profile-join-date {
    background-image: url(images/profiles/calendar-icon.png);
}

div#user-profile-pixels {
    background-image: url(images/profiles/pixels-icon.png);
}

div#user-profile-likes {
    background-image: url(images/profiles/heart-icon.png);
}

div#user-profile-avatar-base {
    width: 48px;
    height: 55px;
    background-image: url(/assets/spritesheets/player-spritesheet.png);
    background-position: 0 0;
    position: relative;
    margin-top: 12px;
}

div#user-profile-action-buttons button.inactive {
    background-image: none;
    background-color: #b1b1b1;
    box-shadow: inset 0 0 1px 2px #0000001f;
    text-shadow: none;
    cursor: auto;
}

div#user-profile-action-buttons button.inactive:hover {
    opacity: 1;
}

div#user-profile.mainPlayer #user-profile-action-buttons {
    display: none;
    visibility: hidden;
}

div#user-profile-avatar-base div {
    position: absolute;
    width: 48px;
    height: 55px;
}

#user-profile button.edit-btn {
    background: #000;
    display: block;
    width: 100%;
    border: 2px solid #000;
    border-radius: 5px;
    color: #FFF;
    margin: 3px 0 0 0;
    font-weight: 700;
    cursor: pointer;
    padding: 5px;
    text-shadow: 0 1px 0 #000;
}

#user-profile button.edit-btn {
    padding: 9px;
    background: #000;
    border: 2px solid #000;
}

#user-profile button.edit-btn:hover,
#user-profile button.edit-btn:active {
    background: #3c3c3c;
}

div#edit-bio-interface {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 65px);
    max-width: 246px;
    z-index: 2;
}

div#edit-bio-interface textarea {
    width: calc(100% - 22px);
    display: block;
    padding: 10px;
    border: 1px solid #8b8a8a;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    height: 56px;
    line-height: 1.3em;
    overflow: hidden;
    resize: none;
    box-shadow: inset -2px 2px 3px -1px #00000040;
}

div#edit-bio-interface #save-bio-btn {
    display: block;
    width: 100%;
    border: 2px solid #0e9161;
    border-radius: 5px;
    color: #FFF;
    margin: 4px 0 0 0;
    font-weight: 600;
    cursor: pointer;
    padding: 7px 0 9px;
    background: #0e9161;
    font-size: 14px;
}

div#edit-bio-interface #save-bio-btn:hover,
div#edit-bio-interface #save-bio-btn:active{
    background: #26b17d;
}

div#user-profile-action-buttons button[disabled] {
    background-image: none;
    background-color: #ababab;
    text-shadow: none;
    box-shadow: inset 0 0 2px 1px #858585;
    cursor: auto;
}

div#user-profile-action-buttons button[disabled]:hover,
div#user-profile-action-buttons button[disabled]:active{
    opacity: 1;
}

div#user-profile-action-buttons button[disabled]:active{
    box-shadow: inset 0 0 2px 1px #858585;
}

#user-profile.supporter div#user-profile-avatar-container:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(images/profiles/borders/supporter-border.png);
    background-repeat: no-repeat;
}

#user-profile.supporter-tier-3 div#user-profile-username {
    background: linear-gradient(45deg, #3ac7fd, #fdc33a, #fd543a, #fd3aac, #b164ed, #467bfb, #44e45a);
    background-size: 800% 800%;
    animation: rainbowAnimation 12s ease infinite;
    text-shadow: 0 1px 0 #000;
}

#user-profile.supporter-tier-2 div#user-profile-username {
    background: linear-gradient(45deg, #b164ed, #467bfb, #44e45a);
    background-size: 800% 800%;
    animation: rainbowAnimation 12s ease infinite;
    text-shadow: 0 1px 0 #000;
}

#user-profile.supporter-tier-1 div#user-profile-username {
    background: #19b8eb;
    text-shadow: 0 1px 0 #000;
}

#user-profile.staff div#user-profile-avatar-container:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(images/profiles/borders/staff-border.png);
    background-repeat: no-repeat;
}

#user-profile.staff div#user-profile-username {
    background: linear-gradient(45deg, #ffc043, #d07913, #ffc043);
    background-size: 800% 800%;
    animation: rainbowAnimation 12s ease infinite;
    text-shadow: 0 1px 0 #000;
}

div#user-profile-hair {
    z-index: 3;
}

div#user-profile-top {
    z-index: 2;
}

div#user-profile-bottom {
    z-index: 1;
}

#user-profile-page-2{
    display: none;
}

div#profile-page-buttons {
    overflow: hidden;
    text-align: center;
    margin: 9px 0 0 0;
}

div#profile-page-buttons .profile-page-button {
    background: #dfdfdf;
    border: none;
    border-radius: 4px;
    display: inline-block;
    padding: 9px 0;
    width: calc(50% - 3px);
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    color: #000;
}

div#profile-page-buttons .profile-page-button.active {
    background: #00beeb;
    color: #FFF;
    box-shadow: inset 0 0 3px #00000069;
    text-shadow: 0 1px 0 #0000003d;
}

div#profile-page-buttons .profile-page-button:hover {
    background: #d3d3d3;
}

div#profile-page-buttons .profile-page-button.active:hover {
    background: #00beeb;
}

.user-profile-data-item {
    border: 1px solid #CCC;
    width: 103px;
    height: 82px;
    border-radius: 5px;
    float: left;
    margin: 2px;
}

.user-profile-content-holder {
    height: 350px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.user-profile-content-holder::-webkit-scrollbar {
    width: 8px;
}

.user-profile-content-holder::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 4px;
}

.user-profile-content-holder::-webkit-scrollbar-track {
    background-color: #9b9b9b;
    border-radius: 5px;
}

.user-profile-data-item.user-profile-data-item-filled {
    border: none;
    overflow: hidden;
    width: 105px;
    height: 84px;
}

div#user-profile .profile-grid-button {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    background-repeat: no-repeat;
    background-image: url(assets/graphics/spritesheets/profile-grid-buttons-spritesheet.png);
    cursor: pointer;
}

a#fishing-logbook-button {    
    background-position: 0 0;
}

a#fishing-logbook-button:hover {
    background-position: 0 -84px;
}

div#user-profile-avatar-base,
div#user-profile-avatar-base div {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

div#user-profile-main-details-right div {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

@media(max-height:560px){    
    div#user-profile {
        scale: 0.8;
        bottom: 28px;
        right: -14px;
    }

    div#user-profile-avatar-container,
    div#user-profile-avatar-base,
    div#user-profile-avatar-base div,
    div#user-profile-main-details-right div,
    div#user-profile-badges .badge img,
    div#user-profile .profile-grid-button,
    div#user-profile-device-category
    {
        image-rendering: smooth; /* Standard property */
        image-rendering: -moz-crisp-edges; /* Mozilla Firefox */
        image-rendering: -webkit-optimize-contrast; /* Google Chrome, Safari, Opera */
        image-rendering: optimizeQuality; /* Microsoft Edge */    
    }    
}

@media(max-height:415px){   
    div#user-profile {
        scale: 0.65;
        bottom: -5px;
        right: -36px;
    }
    
    div#user-profile button.close-button {
        top: -12px;
        right: -12px;
    }
}

@media(max-width:321px){    
    div#user-profile {
        scale: 0.7;
        bottom: 0px;
        right: -29px;
    }
}

/* APARTMENTS/PRIVATE ROOMS */

div#apartment-rooms-interface {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 65px);
    max-width: 500px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

div#apartment-rooms-interface .clear{
    clear: both;
    float: none;
    height: 0;
    line-height: 0;
}

div#apartments-list {
    max-height: 338px;
    min-height: 338px;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 6px 10px;
    box-shadow: inset 0 0 5px #00000057;
}

div#apartment-search-container {
    background: #000;
    border-radius: 5px;
    padding: 5px;
    overflow: hidden;
}

button#apartment-search-button {
    float: right;
    border: 2px solid #ffbe00;
    background: #ffbe00;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    color: #000;
    padding: 3px 9px 3px;
    font-size: 14px;
    text-align: center;
    width: 89px;
}

button#apartment-search-button:hover {
    background: #ffdd5d;
}

input#apartment-search-field {
    display: block;
    font-size: 13px;
    border: none;
    border-radius: 3px;
    float: left;
    height: 16px;
    padding: 13px 7px;
    width: calc(100% - 94px);
}

input#apartment-search-field:focus {
    outline: none;
    border: none;
}

div#apartments-list::-webkit-scrollbar {
    width: 8px;
}

div#apartments-list::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 4px;
}

div#apartments-list::-webkit-scrollbar-track {
    background-color: #9b9b9b;
    border-radius: 5px;
}

.apartment-item {
    background: #FFF;
    overflow: hidden;
    margin: 4px 0;
    box-shadow: 0 1px 0px 1px #00000021;
    border-radius: 4px;
}

.apartment-item div, .apartment-item button {
    float: left;
    height: 30px;
    line-height: 30px;
    border-radius: 0;
}

.apartment-name {
    width: 296px;
    font-size: 13px;
    padding: 0 10px;
    cursor: pointer;
}

.apartment-name-shadow {
    box-shadow: inset 0px -1px 3px #0000001f;
}

button.apartment-enter {
    border: 2px solid #0e9161;
    background-color: #0e9161;
    color: #FFF;
    font-weight: 600;
    float: right;
    width: 53px;
    text-align: right;
    line-height: 25px;
}

button.apartment-enter {
    background-image: url(images/private-rooms/go-icon.png);
    background-repeat: no-repeat;
    background-position: 6px 8px;
}

button.apartment-enter:hover,
button.apartment-enter:active{
    background-color: #26b17d;
}

.apartment-capacity {
    font-size: 12px;
    background: #f5f5f5;
    width: 43px;
    text-align: center;
    color: #7f7f7f;
    font-weight: normal;
}

.apartment-item button {
    cursor: pointer;
}

button.apartment-fav-btn {
    background: #ededed;
    width: 30px;
    padding: 0;
    border-radius: 0;
    border: none;
    border-left: 1px solid #CCC;
    position: relative;
}

#apartments-list .apartment-locked-status {
    background: #ededed;
    width: calc(30px - 1px);
    padding: 0;
    height: 30px;
    border-left: 1px solid #CCC;
    position: relative;
}

.apartment-item.red .apartment-name {
    background: #dd4e68;
    color: #FFF;
    font-weight: 600;
}

.apartment-item.red .apartment-capacity {
    background: #f5c2c2;
    color: #8d3b3b;
}

.apartment-item.yellow .apartment-name {
    background: #e79f43;
    color: #FFF;
    font-weight: 600;
}

.apartment-item.yellow .apartment-capacity {
    background: #f1dfba;
    color: #795a38;
}

.apartment-item.green .apartment-name {
    background: #13bb87;
    color: #FFF;
    font-weight: 600;
}

.apartment-item.green .apartment-capacity {
    background: #bfdfd4;
    color: #477364;
}

.apartment-item.red button.apartment-fav-btn {
    border-color: #d9abb3;
}

.apartment-item.yellow button.apartment-fav-btn {
    border-color: #e6bb8c;
}

.apartment-item.green button.apartment-fav-btn {
    border-color: #89bdaf;
}

#apartments-list .apartment-info {
    background: #FFF;
    color: #000;
    font-size: 12px;
    height: auto;
    width: auto;
    float: none;
    padding: 10px;
    display: none;
}

#apartments-list .apartment-info div,
#apartments-list .apartment-info button {
    height: auto;
    line-height: normal;
    font-weight: normal;
    float: none;
    width: auto;
}

#apartments-list .apartment-info-cell {
    background: #ededed;
    padding: 8px;
    margin: 2px 0;
    border-radius: 3px;
    overflow: hidden;
}

#apartments-list .apartment-info div p {
    margin: 5px 0 0 0;
    line-height: 1.2em;
}

#apartments-list .apartment-interactions button, #apartments-list .apartment-interactions div {
    float: left;
    height: 30px;
    line-height: 30px;
}

.apartment-interactions {
    overflow: hidden;
    margin-top: 2px;
}

#apartments-list .apartment-interactions button {
    width: 30px;
    border-radius: 4px 0 0 4px;
    border: none;
    background: rgb(193,193,193);
    background: -moz-linear-gradient(0deg, rgba(193,193,193,1) 0%, rgba(217,217,217,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(193,193,193,1) 0%, rgba(217,217,217,1) 100%);
    background: linear-gradient(0deg, rgba(193,193,193,1) 0%, rgba(217,217,217,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c1c1c1",endColorstr="#d9d9d9",GradientType=1);
    box-shadow: inset 1px -1px 0 #00000029;
    position: relative;
}

#apartments-list .apartment-info .apartment-info-owner {
    float: left;
    width: 296px;
    margin-right: 4px;
}

#apartments-list .apartment-interactions div {
    width: 36px;
    border-radius: 0 4px 4px 0;
    background: #ededed;
    text-align: center;
}

#apartments-list .apartment-interactions button:last-of-type {
    margin-left: 4px;
}

button.apartment-fav-btn:before {
    background-image: url(images/private-rooms/heart-icon.png);
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 19px;
    height: 16px;
    position: absolute;
    top: 7px;
    left: 5px;
}

button.apartment-fav-btn:hover:before {
    background-position: 0 -16px;
}

.apartment-locked-status:before {
    background-image: url(images/private-rooms/lock-icon.png);
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 15px;
    height: 17px;
    position: absolute;
    top: 6px;
    left: 7px;
}

.apartment-locked-status.apartment-locked:before {
    background-position: 0 -17px;
}

button.apartment-int-like-btn:before {
    background-image: url(images/private-rooms/like-icon.png);
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 6px;
    left: 6px;
}

button.apartment-int-like-btn:hover:before{
    background-position: 0 -16px;
}

button.apartment-int-fav-btn:before {
    background-image: url(images/private-rooms/fav-icon.png);
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 16px;
    height: 14px;
    position: absolute;
    top: 8px;
    left: 7px;
}

button.apartment-int-fav-btn:hover:before{
    background-position: 0 -14px;
}

.apartment-item.red .apartment-name:hover {
    background: #f4607a;
}

.apartment-item.yellow .apartment-name:hover {
    background: #f3ab4f;
}

.apartment-item.green .apartment-name:hover {
    background: #1ac892;
}

button.apartment-fav-btn:hover {
    background-color: #e5e5e5;
}

button.apartment-fav-btn:active {
    background-color: #f1f1f1;
}

#apartments-list .apartment-interactions button:hover {
    background: rgb(182,182,182);
    background: -moz-linear-gradient(0deg, rgba(182,182,182,1) 0%, rgba(205,205,205,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(182,182,182,1) 0%, rgba(205,205,205,1) 100%);
    background: linear-gradient(0deg, rgba(182,182,182,1) 0%, rgba(205,205,205,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b6b6b6",endColorstr="#cdcdcd",GradientType=1);
}

#apartments-list .apartment-interactions button:active {
    background: rgb(221,221,221);
    background: -moz-linear-gradient(0deg, rgba(221,221,221,1) 0%, rgba(227,227,227,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(221,221,221,1) 0%, rgba(227,227,227,1) 100%);
    background: linear-gradient(0deg, rgba(221,221,221,1) 0%, rgba(227,227,227,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dddddd",endColorstr="#e3e3e3",GradientType=1);
}

div#apartments-my-room-options {
    overflow: hidden;
    margin: 13px 0 0 0;
}

div#apartments-my-room-options button {
    border: none;
    color: #FFF;
    text-transform: uppercase;
    width: calc(50% - 5px);
    margin-right: 5px;
    outline: none;
    cursor: pointer;
    font-weight: 600;
    padding: 65px 10px 10px 10px;
    border-radius: 4px;
    font-size: 16px;
    box-shadow: inset 1px -1px 0px #0000007a;
    background: rgb(0,145,100);
    background: -moz-linear-gradient(0deg, rgba(0,145,100,1) 0%, rgba(12,201,143,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0,145,100,1) 0%, rgba(12,201,143,1) 100%);
    background: linear-gradient(0deg, rgba(0,145,100,1) 0%, rgba(12,201,143,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#009164",endColorstr="#0cc98f",GradientType=1);
    position: relative;
}

div#apartments-my-room-options button:last-child {
    margin-right: 0 !important;
}

div#apartments-my-room-options button:hover{
    background: rgb(1,126,87);
    background: -moz-linear-gradient(0deg, rgba(1,126,87,1) 0%, rgba(3,176,123,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(1,126,87,1) 0%, rgba(3,176,123,1) 100%);
    background: linear-gradient(0deg, rgba(1,126,87,1) 0%, rgba(3,176,123,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#017e57",endColorstr="#03b07b",GradientType=1);  
}

button#apartments-create:before {
    content: "";
    background-image: url(images/private-rooms/create-room-icon.png);
    width: 52px;
    height: 49px;
    display: block;
    position: absolute;
    top: 9px;
    left: calc(50% - 26px);
}

button#apartments-my-rooms:before {
    content: "";
    background-image: url(images/private-rooms/my-rooms-icon.png);
    width: 68px;
    height: 46px;
    display: block;
    position: absolute;
    top: 9px;
    left: calc(50% - 34px);
}

button#backToLobbyBtn {
    display: block;
    width: 100%;
    position: relative;
    margin-top: 8px;
}

#apartments-list .apartment-info button.edit-apartment-btn,
#apartments-list .apartment-info button.delete-apartment-btn{
    width: calc(50% - 2px);
    display: block;
    margin: 3px 0 10px 0;
    border: 2px solid #000;
    background: #000;
    color: #FFF;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 4px;
    border-radius: 3px;
}

#apartments-list .apartment-info button.edit-apartment-btn:hover{
    background: #3c3c3c;
}

#apartments-list .apartment-info button.edit-apartment-btn {
    float: left;
}

#apartments-list .apartment-info button.delete-apartment-btn {
    float: right;
    border: 2px solid #d85254;
    background: #d85254;
}

#apartments-list .apartment-info button.delete-apartment-btn:hover{
    background: #fd7173;
}

@media(max-width:575px){
    div#apartments-list {
        max-height: 287px;
        min-height: 287px;
        border: 1px solid #000;
    }
    
    div#apartments-my-room-options button {
        font-size: 12px;
        padding: 60px 10px 5px 10px;
    }
    
    button#apartments-create:before {
        top: 5px;
    }
    
    button#apartments-my-rooms:before {
        top: 7px;
    }
    
    .apartment-item {
        background: #ededed;
    }
    
    .apartment-name {
        background: #FFF;
        border-bottom: 1px solid #00000059;
        width: 100%;
        float: none;
    }
    
    #apartments-list .apartment-locked-status {
        border-right: 1px solid #CCC;
    }

    #apartments-list .apartment-info .apartment-info-owner {
        float: none;
        width: calc(100% - 16px);
        margin: 0;
    }
    
    #apartments-list .apartment-interaction-likes,
    #apartments-list .apartment-interaction-favs {
        width: calc(50% - 32px) !important;
    }
    
    .apartment-item.selected {
        border: 2px solid #000;
        box-shadow: 0 0 12px 4px #00000085;
    }
}

@media(max-height:595px){
    div#apartments-list {
        max-height: 220px;
        min-height: 220px;
    }
}

@media(max-height:470px){ 
    div#apartments-list {
        max-height: 145px;
        min-height: 145px;
    }
}

/* CREATE APARTMENT INTERFACE/FORM */

div#apartment-form-interface {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 65px);
    max-width: 315px;
    height: calc(70vh);
    max-height: 738px;
}

div#apartment-form-interface.update-apartment-interface {
    height: auto;
}

div#apartment-form-scrollable {
    height: calc(70vh - 138px);
    overflow-y: scroll;
    padding-right: 3px;
    max-height: 600px;
}

div#apartment-form-scrollable::-webkit-scrollbar-track {
    background-color: #cfcfcf;
    border-radius: 5px;
}

div#apartment-form-scrollable::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 4px;
}

div#apartment-form-scrollable::-webkit-scrollbar {
    width: 5px;
}

.apartment-form-container label {
    color: #FFF;
    text-transform: uppercase;
    font-size: 10px;
    display: block;
    background: #535252;
    padding: 4px 6px;
    margin-top: 5px;
    width: auto;
    border-radius: 4px 4px 0 0;
}

.apartment-form-container input:not([type="submit"]),
.apartment-form-container textarea{
    font-size: 14px;
    background: #e9e9e9;
    padding: 9px 8px;
    width: calc(100% - 16px);
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 0 3px #0000007d;
    display: block;
    margin: 0;
    border: none;
    font-family: Arial, sans-serif;
}

.apartment-form-container input:not([type="submit"]):focus,
.apartment-form-container textarea:focus{
    border: none;
    outline: none;
    box-shadow: inset 0 0 3px 1px #0000007d;
}

.apartment-form-container textarea {
    height: 50px;
    resize: none;
}

.apartment-form-container select#roomStatus {
    width: 100%;
    background: #e9e9e9;
    box-shadow: inset 0 0 3px #0000007d;
    border: none;
    border-radius: 0 0 4px 4px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 7px 5px 9px;
}

.apartment-form-container .apt-layout-option {
    margin-top: 3px;
    background: #e9e9e9;
    padding: 10px;
    text-align: center;
    border-radius: 3px;
    border: 2px solid #e9e9e9;
    cursor: pointer;
}

.apartment-form-container .apt-layout-option.selected {
    border: 2px solid #009164;
    background: #ceede4;
}

.apartment-form-container .apt-layout-option:not(.selected):hover {
    border: 2px solid #000;
}

.apartment-form-container .apt-layout-info {
    font-size: 12px;
    background: #00000036;
    color: #FFF;
    margin: 2px 0 0 0;
    padding: 3px;
    border-radius: 3px;    
}

.apartment-form-container .apt-layout-option.selected .apt-layout-info {
    background: #8bb7ab;
}

.apartment-form-container .apt-layout-img {
    width: 200px;
    height: 128px;
    margin: 0 auto 10px;
    background-image: url(images/private-rooms/apartment-layouts-spritesheet.png);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.apartment-form-container .apt-layout-img-2 {
    background-position: 0 -128px;
}

.apartmentFormSubmit {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    margin: 0;
    background: #0e9161;
    color: #FFF;
    border-radius: 4px;
    border: 2px solid #0e9161;
    cursor: pointer;
    margin-top: 6px;
    background-repeat: no-repeat;
}

.apartmentFormSubmit:hover,
.apartmentFormSubmit:active {
    background: #26b17d;
}

button#backToApartmentList {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    margin: 0;
    background: #c5c5c5;
    color: #FFF;
    border-radius: 4px;
    border: 2px solid #c5c5c5;
    cursor: pointer;
    margin-top: 2px;
    background-repeat: no-repeat;
    color: #000;
    margin-top: 5px;
}

button#backToApartmentList:hover {
    background-color: #aaaaaa;
    border-color: #767676;
}

/* TILE PLACEMENT FROM INVENTORY */

div.item-placement-chooser {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 65px);
    max-width: 250px;
}

div.item-placement-chooser p {
    text-align: center;
    font-size: 14px;
}

/* PRIVATE ROOM UI STUFF */

button#roomExitBtn {
    background-color: #26b17d;
    color: #FFF;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid #282828;
    font-size: 15px;
    cursor: pointer;
    border-radius: 7px;
    background-image: url(images/private-rooms/room-exit-icon.png);
    background-repeat: no-repeat;
    padding: 8px 10px 8px 39px;
    background-position: 6px 7px;
    margin-left: 3px;
}

button#roomExitBtn:hover {
    background-color: #27d191;
}

button#roomExitBtn.mobile-exit {
    width: 44px;
    height: 37px;
    padding: 0;
}

div#backToMainAptListContainer {
    background: #000;
    color: #FFF;
    overflow: hidden;
    border-radius: 5px;
    padding: 5px;
}

span#backToMainAptListText {
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    float: left;    
    padding: 5px 0 0 8px;
}

button#backToMainAptListText {
    float: right;
    border: 2px solid #ffbe00;
    background: #ffbe00;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 3px 9px 3px;
    font-size: 14px;
    cursor: pointer;
    color: #000;
}

button#backToMainAptListText:hover {
    background: #ffdd5d;
}

/* DEV NOTICE */

div#dev-notice-interface,
div#tutorial-notice-interface {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: calc(100% - 64px);
    max-width: 600px;
    height: calc(100% - 64px);
    max-height: 500px;
}

#dev-notice-interface .interface-content-container,
#tutorial-notice-interface .interface-content-container {
    height: 100%;
    max-height: 500px;
}

div#dev-notice-body,
div#tutorial-notice-body {
    max-height: 500px;
    height: calc(100% - 46px);
    overflow-y: scroll;
    padding-right: 8px;
}

div#dev-notice-body::-webkit-scrollbar,
div#tutorial-notice-body::-webkit-scrollbar {
    width: 8px;
}

div#dev-notice-body::-webkit-scrollbar-thumb,
div#tutorial-notice-body::-webkit-scrollbar-thumb {
    background-color: #333333; 
    border-radius: 4px;
}

div#dev-notice-body::-webkit-scrollbar-track,
div#tutorial-notice-body::-webkit-scrollbar-track {
    background-color: #ababab; 
    border-radius: 5px;
}

#dev-notice-body h1,
#tutorial-notice-body h1 {
    color: #008ce1;
    display: block;
    text-align: center;
    margin: 0;
    padding: 10px 10px 1px;
    font-size: 26px;
}

#dev-notice-body h2,
#tutorial-notice-body h2 {
    font-size: 18px;
    background: #008ce1;
}

#dev-notice-body ul,
#tutorial-notice-body ul {
    padding-left: 26px;
}

/* TUTORIAL */

div#tutorial-notice-body img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#tutorial-notice-body ul li {
    background: #e1e1e1;
    border-radius: 4px;
    list-style: none;
    margin: 3px 0 0 0;
    padding: 8px 11px 9px 9px;
    font-size: 14px;
    border-left: 4px solid #b1b1b1;
}

#tutorial-notice-body ul {
    margin: 5px 0 15px 0;
    padding: 0;
}

div#tutorial-notice-body p {
    font-size: 14px;
}

.img-container {
    background: rgb(111,111,111);
    background: -moz-radial-gradient(circle, rgba(111,111,111,1) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(111,111,111,1) 0%, rgba(0,0,0,1) 100%);
    background: radial-gradient(circle, rgba(111,111,111,1) 0%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6f6f6f",endColorstr="#000000",GradientType=1);
    padding: 10px;
    border-radius: 4px;
}

#tutorial-notice-interface a {
    color: #008edd;
    font-weight: bold;
}

#tutorial-notice-interface a:hover {
    color: #00b0e7;
}

@media(max-width: 600px){
    #tutorial-notice-body h1 {
        font-size: 24px;
    }

    #tutorial-notice-body h2 {
        font-size: 14px;
    }

    .img-container {
        padding: 7px;
    }

    div#tutorial-notice-body p,
    div#tutorial-notice-body ul li {
        font-size: 13px;
    }

    div#tutorial-notice-body img {
        max-width: 100%;
        max-height: 100%;
        backface-visibility: visible;
        image-rendering: auto;
    }
}

@media(max-width: 300px){
    #tutorial-notice-body h1 {
        font-size: 20px;
    }
}

/* GOPHER LEADERBOARD */

div#minigame-leaderboard-interface {
    transform: translate(-50%, calc(-50% - -38px)) scale(1);
    left: 50%;
    top: 50%;
    width: calc(100% - 60px);
    max-width: 320px;
}

table.minigame-leaderboard-table {
    width: 100%;
    font-family: Arial, sans-serif;
    border-radius: 0 0 13px 13px !important;
    overflow: hidden;
}

table.minigame-leaderboard-table tr {
    text-align: left;
    background: #ededed;
}

table.minigame-leaderboard-table tr:nth-child(1) th:nth-child(1){
    width: 70%;
}

table.minigame-leaderboard-table tr:nth-child(1) th:nth-child(2){
    text-align: center;
}

table.minigame-leaderboard-table th {
    background: #cdcdcd;
    padding: 8px 7px;
    font-size: 16px;
    background: #00abe7;
    color: #FFF;
    text-shadow: 0 1px 0px #0000006e;
}

table.minigame-leaderboard-table tr td {
    padding: 5px 6px;
    font-size: 14px;
}

table.minigame-leaderboard-table td.count-cell {
    text-align: center;
}

div#minigame-leaderboard-my-count {
    text-align: center;
    background-color: #cfebe2;
    border: 1px solid #a8d1c5;
    border-radius: 4px;
    padding: 10px;
    line-height: 1.3em;
    font-size: 14px;
    margin: 4px auto 0;
    width: calc(100% - 26px);
    color: #435952;
}

div#minigame-leaderboard-my-count {
    text-align: center;
    background-color: #cfebe2;
    border: 1px solid #a8d1c5;
    border-radius: 4px;
    padding: 10px;
    line-height: 1.3em;
    font-size: 14px;
    margin: 4px auto 0;
    width: calc(100% - 26px);
    color: #435952;
}

table.minigame-leaderboard-table tr:nth-child(2) {
    background-color: #f9cc53;
    font-weight: 600;
    color: #5f3e2b;
    text-shadow: -1px 1px 0px #ffffff7a;
}

table.minigame-leaderboard-table tr:nth-child(1) th:nth-child(1) {
    border-radius: 5px 0 0 0;
}

table.minigame-leaderboard-table tr:nth-child(1) th:nth-child(2) {
    border-radius: 0 5px 0 0;
}

div#minigame-leaderboard-header-container {
    position: relative;
    backface-visibility: hidden;
}

img#minigame-leaderboard-header-img {
    position: absolute;
    backface-visibility: hidden;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: 321px;
    height: auto;
}

div#minigame-leaderboard-float-container {
    width: calc(100% - 5px);
    overflow: hidden;
    margin: 6px auto 0;
}

div#minigame-leaderboard-days-remaining {
    background: #fd5232;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-size: 46px;
    float: left;
}

div#minigame-leaderboard-prize {
    background: linear-gradient(45deg, #ffe26d, #ffa412);
    background-size: 200% 200%;
    animation: rainbowAnimation 6s ease infinite;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-size: 46px;
    float: right;
}

div#minigame-leaderboard-float-container div {
    border-radius: 5px;
    width: 49%;
    position: relative;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 14px;
}

div#minigame-leaderboard-float-container div:before{
    font-size: 12px;
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    text-shadow: 0 1px 0 #0000006e;
    background: #00000024;
    padding: 2px 0;
    border-radius: 3px
}

div#minigame-leaderboard-days-remaining:before {
    content: "Days remaining:";    
}

div#minigame-leaderboard-prize:before {
    content: "The prize:";
}

img#minigame-leaderboard-prize-img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.fishing-leaderboard .minigame-leaderboard-table th {
    background: #2caf7c;
}

.fishing-leaderboard #minigame-leaderboard-days-remaining {
    background: #1aaf7f;
}

@media (max-width: 400px) or (max-height: 655px) {
    table.minigame-leaderboard-table tr td {
        font-size: 12px;
        padding: 4px 5px;
    }

    table.minigame-leaderboard-table th {
        padding: 4px 9px;
    }

    div#minigame-leaderboard-my-count {
        font-size: 12px;
        padding: 8px 7px 7px;
    }

    table.minigame-leaderboard-table tr:nth-child(n+7) {
        display: none;
    }

    img#minigame-leaderboard-header-img {
        max-width: 255px;
        width: 100%;
        image-rendering: inherit;
        image-rendering: inherit;
        image-rendering: inherit;
        top: -119px !important;
        left: calc(50% - 128px);
    }

    div#minigame-leaderboard-float-container div {
        height: 74px;
        padding-top: 20px;
    }
}

/* GENERAL BUTTONS */

.general-green-button {
    background: #0e9161;
    border: 2px solid #0e9161;
    display: block;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    margin: 0;    
    color: #FFF;
    border-radius: 4px;    
    cursor: pointer;
    font-family: Arial, sans-serif;
}

.general-red-button {
    background: #d85254;
    border: 2px solid #d85254;
    display: block;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    margin: 0;    
    color: #FFF;
    border-radius: 4px;
    cursor: pointer;
    font-family: Arial, sans-serif;
}

.general-green-button:hover,
.general-green-button:active{
    background: #26b17d;
}

.general-red-button:hover,
.general-red-button:active{
    background: #fd7173;
}

.inline-block{
    display: inline-block;
}

/* TOOL TIPS */

.bottom-middle-tool-tip {
    width: 100%;
    max-width: 270px;
    transform: translate(-50%, 0) scale(1);
    left: 50%;
    bottom: 62px;
    text-align: center;
}

.bottom-middle-tool-tip .tool-tip-text,
#quest-help-tool-tip .tool-tip-text {
    margin: 8px 0 13px;
    font-size: 14px;
}

.bottom-middle-tool-tip .tool-tip-error-heading {
    background-color: #c54245;
    margin-bottom: 13px;
}

.bottom-middle-tool-tip .tool-tip-alert-heading,
#quest-help-tool-tip .tool-tip-alert-heading {
    background-color: #000;
    margin-bottom: 13px;
    font-size: 20px;
}

#tool-tip-image-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 15px 0 13px;
}

.tool-tip-image-holder {
	position: relative;
	width: 70px;
	height: 70px;
	flex-shrink: 0;
	border: 2px solid #000;
	border-radius: 5px
}

.tool-tip-image-holder img {
	width: 100%;
	height: 100%;
}

.tool-tip-image-quantity {
	position: absolute;
	right: -5px;
	top: -5px;
	background: #000;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	border-radius: 8px;
	padding: 2px 5px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

@media (max-width: 400px){
    .tool-tip-text {
        font-size: 13px;
    }
}

/* FISHING MINIGAME/GIFT OPENING */

div#fish-caught-image-container, 
div#item-reward-image-container {
    margin: -2px auto 10px;
}

div#fish-caught-image-container img,
div#item-reward-image-container img {
    border: 2px solid #000;
    border-radius: 8px;
    overflow: hidden;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* FURNI INSCRIPTION START */

div#furni-inscription {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 64px);
    max-width: 400px;
    background: #FFF;
    position: fixed;
    background: linear-gradient(45deg, #ffe474, #ffc731);
    animation: rainbowAnimation 6s ease infinite;
    background-size: 200% 200%;
    padding: 12px;
    color: #854e14;
    text-shadow: -1px 1px 1px #fff9b5;
}

div#furni-inscription-shine {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(assets/graphics/inscription-shine-overlay.png);
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    left: 0;
}

div#furni-inscription-sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(assets/graphics/inscription-sparkles.gif);
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    left: 0;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

div#furni-inscription-message {
    font-weight: 600;
    text-align: center;
    font-size: 16px;
    padding: 25px 15px;
}

div#furni-inscription-date {
    text-align: center;
    font-size: 12px;
    margin: 3px 0 8px;
}

div#furni-inscription-to {
    float: left;
}

div#furni-inscription-from {
    float: right;
}

.furni-inscription-to-from {
    font-size: 14px;
    background: #f3be40;
    width: calc(50% - 16px);
    padding: 3px 7px 4px;
    box-shadow: inset -1px 1px 1px #b5821f;
    border-radius: 4px;
    text-align: center;
}

/* FURNI INSCRIPTION END */

/* TRADING START */

div#trade-window {
    width: 243px;
    background: #FFF;
    font-family: Arial, sans-serif;
    backface-visibility: hidden;
    box-shadow: 0 3px 4px #000;
    position: relative;
}

#trade-window.interface h2 {
    font-size: 20px;
    padding: 5px 11px 4px;
}

.trade-offering-slot {
    width: 76px;
    height: 76px;
    border: 1px solid #CCC;
    border-radius: 4px;
    float: left;
    margin: 0 4px 4px 0;
    position: relative;
    backface-visibility: hidden;
}

#trade-add-items-button .trade-offering-slot {
    cursor: pointer;
}

button#trade-add-items[disabled] {
    background: #CCC;
    border-color: #CCC;
    cursor: default;
}

.trade-offering-username {
    background: #dfdfdf;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 6px 8px 4px;
    font-weight: 600;
    box-shadow: 0 1px 1px #b7b7b7;
    margin: 0 0 7px;
    text-shadow: -1px 1px #ffffff78;
}

.trade-offering-slots-container {
    overflow: hidden;
}

div#trade-offer-other-player {
    font-size: 13px;
    text-align: center;
    background: #ef3c64;
    color: #FFF;
    padding: 5px;
    border-radius: 3px;
    margin: 2px 0 10px;
}

button#lock-in-trade {
    background: #0e9161;
    color: #FFF;
    font-weight: 600;
    padding: 9px;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid #0e9161;
    text-align: center;
    width: 100%;
    margin: 2px 0 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    text-transform: uppercase;
}

button#lock-in-trade:hover,
button#lock-in-trade:active{
    background: #26b17d;
}

button#lock-in-trade.unlock-edit-trade {
    background: #d85254;
    border-color: #d85254;
}

button#lock-in-trade.unlock-edit-trade:hover,
button#lock-in-trade.unlock-edit-trade:active {
    background-color: #fe7376;
}

div#general-trade-warning {
    font-size: 12px;
    text-align: center;
    border: 1px solid #cd4866;
    border-radius: 4px;
    padding: 10px;
    background: #ffdde5;
    color: #b51034;
}

.trade-offering-container-other-player {
    border-top: 1px solid #bdbdbd;
    padding-top: 11px;
    margin-top: 11px;
}

.trade-offering-slot:nth-child(3n) {
    margin-right: 0;
}

.interface button.green-choice-button {
    background: #0e9161;
    font-size: 14px;
    border-color: #0e9161;
}

.interface button.green-choice-button:hover,
.interface button.green-choice-button:active{
    background: #26b17d;
}

.interface button.red-choice-button {
    background: #d85254;
    font-size: 14px;
    border-color: #d85254;
}

.interface button.red-choice-button:hover,
.interface button.red-choice-button:active{
    background: #fe7376;
}

#trade-window-container .trade-offering-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#trade-window-container .trade-item-quantity {
    position: absolute;
    font-size: 10px;
    top: 2px;
    left: 2px;
    background: #2ead90;
    color: #FFF;
    border-radius: 3px;
    width: 22px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    font-weight: 600;
    z-index: 1;
}

#trade-window-container button.close-button {
    top: 2px;
    right: 2px;
    width: 22px;
    height: 18px;
    background-position: 6px 5px;
    border-radius: 3px;
    border: none;
    background-size: 10px auto;
}

div#trade-processing-container {
    text-align: center;
    padding: 18px;
    border: 2px solid #000;
    border-radius: 4px;
    margin: 9px 0 10px 0;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 19%, rgba(196,196,196,1) 100%);
    height: 95px;
}

div#trade-processing-container button#cancel-trade-btn {
    position: relative;
    border-radius: 5px;
}

div#trade-processing-container div#trade-countdown {
    font-size: 28px;
    font-weight: 600;
    margin: 10px 0 10px;
}

div#trade-processing-container div#countdown-text {
    font-size: 14px;
}

div#trade-processing-container div#trade-processing-msg {
    font-size: 12px;
    font-weight: 600;
    margin: 8px 0 0;
    text-shadow: 0px 1px 0px #fff;
}

div#trade-actions-container {
    overflow: hidden;
    margin: 2px 0 0;
}

div#trade-actions-container .button {
    position: relative;
    width: calc(50% - 2px);
    float: left;
    margin: 0 3px 0 0;
    border-radius: 5px;
    font-size: 12px;
    padding: 9px;
}

div#trade-actions-container .button#lock-in-trade {
    margin-right: 0;
}

@media (max-height: 665px){
    div#trade-window-container {
        max-height: 380px;
        overflow-y: scroll;
    }
}

/* TRADING END */

/* MULTI USE QUANTITY SELECTOR */

div#quantity-selector-popup {
    width: 180px;
    text-align: center;
}

#quantity-selector-popup input#multiuse-quantity-input {
    width: calc(100% - 24px);
    font-size: 24px;
    padding: 8px 10px;
    text-align: center;
    box-shadow: inset -2px 2px 3px 0px #0000002e;
    border: 1px solid #000;
    border-radius: 5px;
    margin: 0 0 5px 0;
}

input#multiuse-quantity-input[type=number]::-webkit-inner-spin-button, 
input#multiuse-quantity-input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

input#multiuse-quantity-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

#multiuse-quantity-decrease,
#multiuse-quantity-increase {
    background: #000;
    border: 2px solid #000;
    color: #FFF;
    border-radius: 5px;
    width: 87px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
}

#multiuse-quantity-decrease:hover,
#multiuse-quantity-increase:active,
#multiuse-quantity-decrease:hover,
#multiuse-quantity-increase:active{
    background: #3c3c3c;
}

/* END - MULTI USE QUANTITY SELECTOR */

/* GEMS UI */

div#gems-ui-container {
    position: fixed;
    top: 8px;
    right: 8px;
    display: none;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

button#gems-shop-btn {
    background-color: #e447f5;
    width: 132px;
    height: 37px;
    border: none;
    background-image: url(images/gem-shop-btn-spritesheet.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    overflow: hidden;
    border-radius: 9px;
    cursor: pointer;
    float: left;
    margin-right: 3px;
    text-align: right;
    font-weight: 600;
    text-transform: uppercase;
    color: #FFF;
    font-size: 15px;
    padding-right: 7px;
    border: 2px solid #000;
    text-shadow: 0px 1px 0px #000;
}

button#gems-shop-btn:hover {
    background-position: 0 -33px;
    background-color: #ef5fff;
}

div#gems-counter {
    width: 74px;
    height: 37px;
    background-image: url(images/gem-counter-bg.gif);
    float: left;
    cursor: pointer;
    border-radius: 9px;
    position: relative;
    font-family: Arial, sans-serif;
}

div#gem-counter-text {
    position: absolute;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    top: 10px;
    right: 9px;
    width: 45px;
    text-align: center;
}

div#gems-counter.gems-counter-positive {
    background-position: 0 -37px;
}

div#gems-counter.gems-counter-positive #gem-counter-text {
    color: #FFF;
    text-shadow: 0 1px 0px #000000a1;
}

div#coins-counter {
    height: 33px;
    float: left;
    cursor: pointer;
    border-radius: 9px;
    position: relative;
    font-family: Arial, sans-serif;
    border: 2px solid #000;
    background: #ffd32d;
    padding: 0 10px;
    display: flex;
    align-items: center;
    margin-left: 3px;
    padding-left: 25px;
    background-image: url(images/coin.png);
    background-repeat: no-repeat;
    background-position: 5px 9px;
    box-shadow: inset 0 1px 1px #FFF;
}

.coins-counter-text {
    font-weight: 600;
    text-shadow: -1px 1px 0 #ffe396;
}

#gems-ui-container.gems-ui-mobile button#gems-shop-btn {
    width: 95px;
}

/* Add Note Interface */

div#add-note-text-interface {
    width: 100%;
    max-width: 280px;
    transform: translate(-50%, -50%) scale(1);
    left: 50%;
    top: 50%;
}

textarea#add-note-textarea {
    width: calc(100%);
    padding: 15px;
    border: 1px solid #000;
    border-radius: 4px;
    font-size: 14px;
    margin: 5px 0 5px;
    height: 185px !important;
    font-family: Arial, sans-serif;
    resize: none;
    overflow: auto;
    box-sizing: border-box;
}

textarea#add-note-textarea::-webkit-scrollbar {
    width: 8px;
}

textarea#add-note-textarea::-webkit-scrollbar-thumb {
    background-color: #ababab; 
    border-radius: 4px;
}

textarea#add-note-textarea::-webkit-scrollbar-track {
    background-color: #333333;
    border-radius: 5px;
}

div#add-note-warning {
    font-size: 11px;
    border: 1px solid #cd4866;
    border-radius: 4px;
    padding: 10px;
    background: #ffdde5;
    line-height: 1.3em;
    color: #b51034;
    margin: 0 0 8px;
}

button#add-note-submit {
    text-transform: uppercase;
}

/* Display Note Interface */

div#add-note-view-interface {
    width: 290px;
    transform: translate(-50%, -50%) scale(1);
    left: 50%;
    top: 50%;
    position: fixed;
    height: 337px;
}

div#add-note-view-content {
    position: absolute;
    top: 43px;
    left: 23px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    width: 245px;
    height: 194px;
    overflow-y: scroll;
}

div#add-note-view-content::-webkit-scrollbar {
    width: 8px;
}

div#add-note-view-content::-webkit-scrollbar-thumb {
    background-color: #a1a1a1; 
    border-radius: 4px;
}

div#add-note-view-content::-webkit-scrollbar-track {
    background-color: #cfcfcf;
    border-radius: 5px;
}

button.close-button.add-note-view-interface-close-button {
    right: -11px;
    top: -11px;
}

/* Seasonal Collectables Minigame */

div#game-container.collectable-game-active:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1e0e2b00;
    background: radial-gradient(at center, #1e0e2b00, #1e0e2b);
}

div#collectable-leaderboard-interface {
    width: 290px;
    transform: translate(-50%, -50%) scale(1);
    left: 50%;
    top: 50%;
    position: fixed;
    height: 100%;
    max-height: 436px;
}

div#minigame-leaderboard-table-container {
    max-height: 176px;
    overflow-y: scroll;
}

div#minigame-leaderboard-table-container::-webkit-scrollbar {
    width: 8px;
}

div#minigame-leaderboard-table-container::-webkit-scrollbar-thumb {
    background-color: #a1a1a1; 
    border-radius: 4px;
}

div#minigame-leaderboard-table-container::-webkit-scrollbar-track {
    background-color: #cfcfcf;
    border-radius: 5px;
}

div#collectable-leaderboard-redemption-info {
    font-size: 14px;
    text-align: center;
    background: #ededed;
    border: 1px solid #9d9d9d;
    padding: 10px;
    margin: 10px auto 0;
    border-radius: 4px;
    box-shadow: inset 0 0 2px #0000004a;
    width: calc(100% - 24px);
}

div#minigame-leaderboard-my-count {
    width: calc(100% - 26px);
}

button#collectable-leaderboard-redemption-options-btn {
    width: calc(100% - 2px);
    margin: 5px auto 0;
}

div#collectable-leaderboard-intro {
    font-size: 14px;
    text-align: center;
    background: #e68119;
    border: 2px solid #9e5203;
    padding: 8px;
    margin: 0 auto 4px;
    border-radius: 4px;
    width: calc(100% - 21px);
    color: #FFF;
}

div#collectable-leaderboard-interface table.minigame-leaderboard-table th {
    background: #00ade3;
}

/* Redemption Options */

div#collectable-redeem-container {
    width: auto;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    left: 50%;
    position: fixed;
    height: auto;
}

div#collectable-redeem-my-count {
    text-align: center;
    border-radius: 4px;
    line-height: 1.3em;
    font-size: 14px;
    margin: 2px auto 0;
    width: calc(100% - 23px);
    background-color: #f7e4b2;
    border: 1px solid #c58f50;
    color: #964e20;
    padding: 8px;
}

div#collectable-redeem-options-container {
    width: 526px;
    backface-visibility: hidden;
}

.collectable-redeem-option {
    margin-top: 8px;
    background: #e9e9e9;
    padding: 10px;
    text-align: center;
    box-shadow: inset 0 0 4px #000;
    border-radius: 4px;
    float: left;
    display: block;
    width: calc(50% - 23px);
}

.collectable-redeem-option:nth-child(1) {
    margin-right: 5px;
}

.collectable-redeem-option img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    border-radius: 4px;
    box-shadow: 0 2px 1px #000;
    margin: 0 0 2px 0;
    overflow: hidden;
}

.collectable-redeem-option-title {
    background: #000;
    color: #FFF;
    padding: 8px;
    font-weight: 600;
    border-radius: 4px;
}

.collectable-redeem-option-desc {
    font-size: 13px;
    background: #FFF;
    box-shadow: 0 1px 2px #000;
    padding: 10px;
    border-radius: 3px;
    margin: 6px 0;
}

@media (max-width: 620px) or (max-height: 770px){
    div#collectable-leaderboard-interface {
        width: 258px;
        max-height: 378px;
    }

    div#minigame-leaderboard-table-container {
        max-height: 146px;
    }

    div#collectable-leaderboard-interface table.minigame-leaderboard-table tr:nth-child(n+7) {
        display: table-row;
    }

    div#collectable-leaderboard-interface div#minigame-leaderboard-my-count {
        width: calc(100% - 18px);
        font-size: 12px;
        padding: 7px 7px 6px;
    }

    div#collectable-leaderboard-intro {
        font-size: 12px;
    }

    div#collectable-leaderboard-redemption-info {
        font-size: 12px;
        margin: 6px auto 0;
    }

    button#collectable-leaderboard-redemption-options-btn {
        margin: 4px auto 0;
    }

    div#collectable-leaderboard-interface table.minigame-leaderboard-table th {
        font-size: 14px;
    }

    div#collectable-redeem-content {
        max-height: 385px;
        overflow-y: scroll;
        padding-right: 4px;
    }

    div#collectable-redeem-content::-webkit-scrollbar {
        width: 8px;
    }
    
    div#collectable-redeem-content::-webkit-scrollbar-thumb {
        background-color: #a1a1a1; 
        border-radius: 4px;
    }
    
    div#collectable-redeem-content::-webkit-scrollbar-track {
        background-color: #cfcfcf;
        border-radius: 5px;
    }

    div#collectable-redeem-container .collectable-redeem-option {
        float: none;
        width: calc(100% - 24px);
    }
    
    div#collectable-redeem-container .collectable-redeem-option:nth-child(1) {
        margin-right: 0;
    }
    
    div#collectable-redeem-container div#collectable-redeem-options-container {
        width: auto;
    }
    
    div#collectable-redeem-container div#collectable-redeem-my-count {
        width: calc(100% - 22px);
        margin: 0;
    }
}

/* REWARD ADS */

div#applixir_vanishing_div {
    z-index: 9999;
}

/* GENERAL FORM */

.form label {
    color: #FFF;
    text-transform: uppercase;
    font-size: 10px;
    display: block;
    background: #535252;
    padding: 4px 6px;
    margin-top: 5px;
    width: auto;
    border-radius: 4px 4px 0 0;
}

.form input:not([type="checkbox"]) {
    font-size: 14px;
    background: #e9e9e9;
    padding: 9px 8px;
    width: calc(100% - 16px);
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 0 3px #0000007d;
    display: block;
    margin: 0;
    border: none;
    font-family: Arial, sans-serif;
}

.form textarea {
    font-size: 14px;
    background: #e9e9e9;
    padding: 9px 8px;
    width: calc(100% - 16px);
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 0 3px #0000007d;
    display: block;
    margin: 0;
    border: none;
    font-family: Arial, sans-serif;
}

/* GIFTS */

div#gift-tag {
    width: 462px;
    height: 212px;
    background: url(images/ui-elements/gift-tag.png);
    background-repeat: no-repeat;
    margin-left: -87px;
    background-position: 0 0;
    position: relative;
    font-family: Arial, sans-serif !important;
}

div#gift-tag-message {
    position: absolute;
    top: 96px;
    left: 119px;
    font-size: 14px;
    width: 312px;
    height: 84px;
    overflow: hidden;
    line-height: 1.24em;
}

div#gift-tag-to {
    position: absolute;
    left: 172px;
}

div#gift-tag-from {
    left: 342px;
    width: 93px;
}

div.gift-tag-to-from-text {
    position: absolute;
    font-size: 14px;
    overflow: hidden;
    top: 58px;
}

button#gift-tag-close {
    position: absolute;
    top: 16px;
    right: 17px;
    background: url(images/ui-elements/gift-tag-close.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 28px;
    height: 28px;
    border: none;
    cursor: pointer;
}

button#gift-tag-close:hover {
    background-position: 0 -28px;
}

button#gift-tag-open {
    position: absolute;
    left: calc(50% - 13px);
    bottom: -49px;
    width: 110px;
    box-shadow: 0 2px 3px 0px #000;
    text-shadow: 1px 1px 1px #00000057;
}

button#gift-tag-open:hover {
    border-color: #17c58f;
}

#send-gift-container textarea {
    height: 82px;
    overflow: hidden;
    resize: none;
}

#send-gift-container button#send-gift-buy-btn {
    width: 100%;
}

div#end-gift-anonymous-container {
    background: #e9e9e9;
    margin: 6px 0;
    border-radius: 4px;
    overflow: hidden;
}

input#send-gift-anonymous {
    margin: 6px;
    float: left;
}

div#end-gift-anonymous-container div {
    font-size: 14px;
    padding: 4px 0 0 0;
    float: left;
}

div#gift-color-selection {
    font-size: 14px;
    background: #e9e9e9;
    padding: 9px 8px;
    width: calc(100% - 16px);
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 0 3px #0000007d;
    display: flex;
    flex-direction: row; /* Ensures the children are laid out in a row */
    margin: 0;
    border: none;
    font-family: Arial, sans-serif;
    overflow-x: auto; /* Makes the container horizontally scrollable */
    overflow-y: hidden; /* Prevent vertical scrolling */
    height: 85px;
    align-items: center; /* Vertically aligns the children */
    gap: 0px; /* Adds spacing between the children */
}

.gift-color {
    width: 80px;
    height: 78px;
    display: flex;
    flex-direction: column; /* Stack contents vertically */
    justify-content: flex-end; /* Align text at the bottom */
    align-items: center; /* Center content horizontally */
    text-align: center;
    margin-right: 5px; /* Adds spacing between items */
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 2px #0000007d;
    cursor: pointer;
    transition: transform 0.2s ease; /* Add smooth hover effect */
    min-width: 80px;
    padding-bottom: 4px;
    font-size: 12px;
}

.gift-color:hover {
    box-shadow: 0 0 4px #0000007d;
}

.gift-color:last-child{
    margin-right: 0 !important;
}

/* Optional: Style the scrollbar for Webkit-based browsers */
div#gift-color-selection::-webkit-scrollbar {
    height: 8px;
}

div#gift-color-selection::-webkit-scrollbar-thumb {
    background-color: #000000; 
    border-radius: 4px;
}

div#gift-color-selection::-webkit-scrollbar-track {
    background-color: #ababab;
    border-radius: 5px;
}

.gift-color div {
    width: 33px;
    height: 49px;
    background-image: url(../assets/rooms/private/furniture/objects/gifts-spritesheet.png);
    background-repeat: no-repeat;
    margin-bottom: 5px;
}

.gift-color[data-color='blue'] div {
    background-position: 0 0;
}

.gift-color[data-color='turquoise'] div {
    background-position: 0 -49px;
}

.gift-color[data-color='teal'] div {
    background-position: 0 -98px;
}

.gift-color[data-color='green'] div {
    background-position: 0 -147px;
}

.gift-color[data-color='olive'] div {
    background-position: 0 -196px;
}

.gift-color[data-color='yellow'] div {
    background-position: 0 -245px;
}

.gift-color[data-color='orange'] div {
    background-position: 0 -294px;
}

.gift-color[data-color='red'] div {
    background-position: 0 -343px;
}

.gift-color[data-color='pink'] div {
    background-position: 0 -392px;
}

.gift-color[data-color='fuchsia'] div {
    background-position: 0 -441px;
}

.gift-color[data-color='purple'] div {
    background-position: 0 -490px;
}

.gift-color[data-color='lavender'] div {
    background-position: 0 -539px;
}

.gift-color[data-color='black'] div {
    background-position: 0 -588px;
}

.gift-color.selected {
    box-shadow: inset 0px 0px 0px 2px #000;
}

@media (max-width: 500px){
    div#gift-tag {
        scale: 0.8;
        background-size: 100% auto;
        margin-left: -32px;
        width: 352px;
        height: 217px;
        overflow: hidden;
    }
    
    button#gift-tag-open {
        bottom: 7px;
        left: calc(50% - 24px);
    }
    
    div#gift-tag-to {
        left: 130px;
    }
    
    div.gift-tag-to-from-text {
        top: 43px;
    }
    
    div#gift-tag-from {
        left: 259px;
    }
    
    button#gift-tag-close {
        top: 9px;
        right: 10px;
    }
    
    div#gift-tag-message {
        top: 72px;
        left: 89px;
        width: 241px;
        height: 69px;
    }

    div.gift-tag-to-from-text {
        width: 72px !important;
        overflow: hidden;
    }
}

/* LOGIN QUEUE AND INVENTORY LOADING BAR */

div#loginLoadingFeedback {
    position: absolute;
    z-index: 9999;
    left: 50%;
    bottom: 12px;
    transform: translate(-50%, 0);
    font-family: Arial, sans-serif;
    font-size: 14px;
    background: #FFF;
    padding: 12px 9px;
    width: calc(269px - 18px);
    text-align: center;
    border-radius: 17px;
    box-shadow: 0 3px 4px #000;
}

div#loginLoadingFeedback p {
    margin: 0;
    padding: 0;
}

div#loginLoadingFeedbackLoadingBar {
    width: calc(100% - 4px);
    border: 2px solid #000;
    margin: 14px 0 0;
    height: 13px;
    position: relative;
}

div#loginLoadingFeedbackLoadingBarText {
    font-size: 11px;
    margin: 4px 0 0;
}

div#loginLoadingFeedbackLoadingBar:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--loading-bar-width, 0%);
    height: 100%;
    background: #2ccb90;
    transition: width 0.1s ease-in-out;
}

@media (max-width: 500px){
    div#loginLoadingFeedback {
        padding: 5px 9px;
        border-radius: 8px;
        bottom: 9px;
    }
    
    div#loginLoadingFeedbackLoadingBar {
        margin: 5px 0 0;
        height: 8px;
    }
}

@media (min-height: 900px){
    div#loginLoadingFeedback {
        bottom: 65px;
    }
}

/* SIDEBAR/ZOOM LEVELS */

button.sidebar-button {
    position: absolute;
    right: 0;
    font-size: 0;
    line-height: 0;
    width: 40px;
    height: 40px;
    border: 2px solid #000;
    border-radius: 9px;
    cursor: pointer;
}

button.zoom-button {
    background-image: url(images/ui-elements/zoom-buttons-spritesheet.png);
}

button#zoom-in-btn {
    top: 42px;
    background-position: 0 0;
}

button#zoom-in-btn:hover {
    background-position: -36px 0;
}

button#zoom-out-btn {
    top: 85px;
    background-position: 0 -36px;
}

button#zoom-out-btn:hover {
    background-position: -36px -36px;
}

button.news-button {
    background-image: url(images/ui-elements/news-button-spritesheet.png);
    top: 128px;
}

button.news-button:hover {
    background-position: -36px 0;
}

button#news-button.unread:before {
    content: attr(data-unread);
    display: block;
    position: absolute;
    background: #e53935;
    height: 16px;
    width: 16px;
    color: #FFF;
    top: -6px;
    right: -8px;
    font-size: 10px;
    line-height: 16px;
    padding: 0;
    margin: 0;
    font-weight: 600;
    border-radius: 100%;
    border: 2px solid #FFF;
    box-shadow: 0 2px 2px #00000096;
    animation: bounceBadge 1s infinite ease-in-out;
}

button#news-button.unread{
    background-position: -36px 0;
    background-repeat: no-repeat;
    background-color: #ffd32d;
    animation: unreadNewsPulse 1s infinite ease-in-out;
}

@keyframes unreadNewsPulse {
    0%   { background-color: #ffe78b; }
    50%  { background-color: #ffd32d; } 
    100% { background-color: #ffe78b; } 
}

@keyframes bounceBadge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* END - SIDEBAR/ZOOM LEVELS */

/* SELL COLLECTABLES TO NPC */

div#coin-offer-label {
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    display: block;
    background: #ffbc00;
    padding: 4px 6px;
    margin-top: 5px;
    width: auto;
    border-radius: 4px 4px 0 0;
    text-align: center;
    font-weight: 600;
    border: 1px solid #af6b17;
}

div#coin-offer-amount {
    text-align: center;
    font-size: 16px;
    background: #ffedc9;
    padding: 9px 8px;
    width: calc(100% - 16px);
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 0 2px #a1875b;
    margin: 0 0 10px;
}

/* END - SELL COLLECTABLES TO NPC */

/* INSTANCE CHOOSER */

.instance-chooser-entry {
    overflow: hidden;
    margin: 5px 0 0 0;
    background: #ebebeb;
    border-radius: 4px;
    height: 36px;
}

.instance-chooser-entry div {
    float: left;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    padding-left: 29px;
    font-weight: 600;
}

#instance-chooser .instance-chooser-entry-player-go-btn {
    float: right;
    padding: 0;
    height: 36px;
    width: 12%;
    border-left: 3px solid #FFF;
}

#instance-chooser .instance-chooser-entry-name {
    font-weight: 600;
    width: calc(55.5% - 4px);
    padding-left: 12px;
    text-align: left;
}

div#instance-chooser {
    width: 100%;
    max-width: 450px;
}

#instance-chooser .instance-chooser-entry-player-go-btn button {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    background-color: #0e9161;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
    text-shadow: 0px 1px 0px #00000057;
    border-left: 1px solid #0037237d;
    border-bottom: 1px solid #0037237d;
    margin: 0;
    background-image: url(images/private-rooms/go-icon.png);
    background-repeat: no-repeat;
    background-position: 5px 12px;
    padding: 2px 0 0 13px;
}

#instance-chooser .instance-chooser-entry-player-go-btn button:hover{
    background-color: #26b17d;
}

.instance-chooser-entry-used-plots, .instance-chooser-entry-player-counter {
    position: relative;
    background: #e1e0e0;
    width: 12%;
    text-align: right;
    color: #797979;
    box-shadow: inset 0px 3px 3px #d3d3d3;
}

.instance-chooser-entry-used-plots {
    width: 5.5%;
}

.instance-chooser-entry-used-plots, .instance-chooser-entry-player-counter {
    text-shadow: -1px 1px 0px #ffffff;
    color: #000;
}

.instance-chooser-entry-used-plots:before, .instance-chooser-entry-player-counter:before {
    content: '';
    background-image: url(images/ui-elements/instance-chooser-icons.png);
    background-repeat: no-repeat;
    display: block;
    width: 15px;
    height: 18px;
    position: absolute;
    top: 8px;
    left: 8px;
    background-position: 0px -18px;
}

.instance-chooser-entry-player-counter:before {
    background-position: -15px -18px;
}

.instance-chooser-entry-player-counter {
    width: calc(9% - 21px);
    margin-left: 0;
    border-left: 3px solid #FFF;
}

.instance-chooser-entry-red {
    background: #d85254;
    color: #FFF;
}

.instance-chooser-entry-red .instance-chooser-entry-used-plots, .instance-chooser-entry-red .instance-chooser-entry-player-counter {
    background: #ffd4d4;
    box-shadow: inset 0px 3px 3px #e99597;
}

.instance-chooser-entry-orange {
    background: #e79617;
    color: #FFF;
}

.instance-chooser-entry-orange .instance-chooser-entry-used-plots, .instance-chooser-entry-orange .instance-chooser-entry-player-counter {
    background: #ffe8bc;
    box-shadow: inset 0px 3px 3px #cfb27a;
}

.instance-chooser-entry-green {
    background: #13a570;
    color: #FFF;
}

.instance-chooser-entry-green .instance-chooser-entry-used-plots, .instance-chooser-entry-green .instance-chooser-entry-player-counter {
    background: #d7ebe4;
    box-shadow: inset 0px 3px 3px #97c7b6;
}

.instance-chooser-entry-red .instance-chooser-entry-used-plots:before,
.instance-chooser-entry-orange .instance-chooser-entry-used-plots:before,
.instance-chooser-entry-green .instance-chooser-entry-used-plots:before {
    background-position: 0 0;
}

.instance-chooser-entry-red .instance-chooser-entry-player-counter:before,
.instance-chooser-entry-orange .instance-chooser-entry-player-counter:before,
.instance-chooser-entry-green .instance-chooser-entry-player-counter:before {
    background-position: -15px 0;
}

div#instance-chooser-note {
    background: #daebf7;
    border: 2px solid #85a0b3;
    padding: 8px;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
    margin: 8px 0 0 0;
    color: #486579;
}

button#back-to-town-button {
    border: 2px solid #000;
    border-radius: 4px;
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px 5px;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    background-color: #f5bb0f;
    cursor: pointer;
}

button#back-to-town-button:hover {
    background-color: #f5d010;
}

@media(max-width:530px){ 
    div#instance-chooser {
        max-width: calc(100% - 70px);
    }

    div#instance-chooser.interface h2 {
        font-size: 18px;
        padding: 8px 11px 7px;
    }
    
    .instance-chooser-entry-used-plots, .instance-chooser-entry-player-counter {
        display: block;
        width: calc(33.5% - 42px);
    }
    
    #instance-chooser .instance-chooser-entry-name {
        float: none;
        width: calc(100% - 20px);
        display: block;
        padding: 10px;
        border-bottom: 3px solid #FFF;
    }
    
    .instance-chooser-entry {
        height: auto;
        border: 1px solid #000;
        box-shadow: 0px 2px 2px #0000003d;
        margin: 0 0 5px 0;
    }

    .instance-chooser-entry:last-of-type {
        margin-bottom: 0;
    }
    
    #instance-chooser .instance-chooser-entry-player-go-btn {
        width: 33%;
    }
    
    #instance-chooser .instance-chooser-entry-player-go-btn button {
        border: none;
        background-position: 8px 13px;
    }
    
    div#instance-chooser-note {
        font-size: 12px;
    }

    div#instance-chooser-entries-container {
        height: calc(100vh - 220px);
        overflow-x: hidden;
        overflow-y: scroll;
        max-height: 411px;
        padding-right: 2px;
    }
    
    div#instance-chooser-entries-container::-webkit-scrollbar-track {
        background-color: #cfcfcf;
        border-radius: 5px;
    }
    
    div#instance-chooser-entries-container::-webkit-scrollbar-thumb {
        background-color: #000000;
        border-radius: 4px;
    }
    
    div#instance-chooser-entries-container::-webkit-scrollbar {
        width: 5px;
    }

    button#back-to-town-button {
        margin: 2px 0 6px 0;
        font-size: 16px;
    }
}

/* END - INSTANCE CHOOSER */

/* MINIGAME COUNTDOWN */

div#starting-minigame {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    top: 0;
    left: 0;
    background: #000000a3;
    color: #FFF;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    flex-direction: column;
}

div#starting-minigame .starting-minigame-text {
    font-size: 14px;
    margin: 0 0 10px;
}

div#starting-minigame .starting-minigame-counter {
    font-size: 48px;
    font-weight: 600;
    text-shadow: 0 2px 2px #000;
}

/* END - MINIGAME COUNTDOWN */

/* ITEM CHOOSER INTERFACE */

#item-chooser-interface {
    z-index: 3;
    transform: translate(-50%, -50%) scale(1);
    left: 50%;
    top: 50%;
    width: 240px;
}

#item-chooser-interface
.item-chooser-interface-content-container 
> .item-holder:nth-child(3n)
{
    margin-right: 0 !important;
}

/* SCROLL STYLING */

.activate-scroll::-webkit-scrollbar-track {
    background-color: #cfcfcf;
    border-radius: 5px;
}

.activate-scroll::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 4px;
}

.activate-scroll::-webkit-scrollbar {
    width: 5px;
}

/* RESYNC OVERLAY */

div#resync-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    font-family: Arial, sans-serif;
}

div#resync-img, div#resync-overlay img{
    width:92px;
    height: 30px;
}

div#resync-overlay h4 {
    font-size: 16px;
    margin: 5px 0;
}

div#resync-overlay p {
    font-size: 12px;
    color: #CCC;
    margin: 0;
}

/* SKIP TOKENS */

div.skip-token-amount {
    font-size: 50px;
    font-weight: 600;
    color: #ffe448;
    text-shadow: 0 2px 2px #00000052;
}

div#skip-token-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #7a1c8a;
    border-radius: 6px;
    padding: 10px;
    background: #DA56ED;
    background: linear-gradient(0deg, rgb(218 105 235) 0%, rgb(200 79 218) 100%);
    box-shadow: inset 0 1px 8px #0000007d;
}

#skip-token-img-container img {
    margin-right: 7px;
}

div#skip-token-text {
    text-align: center;
    padding: 14px 15px 15px;
    background: #e9e9e9;
    border: 1px solid #949494;
    border-radius: 4px;
    margin: 8px 0 8px 0;
    line-height: 1.3em;
    color: #333;
    font-size: 14px;
}

div#skip-token-options button {
    display: block;
    width: 100%;
}

button#use-skip-token {
    background: #e8ba00;
    background: linear-gradient(0deg, rgb(238 159 3) 0%, rgba(255, 225, 0, 1) 100%);
    color: #5b3313;
    text-shadow: -1px 1px 0px #ffffff73;
    box-shadow: inset -1px 1px 0px #ffffff8c;
    padding: 16px 10px;border-color: #8c4e1c;
}

button#use-skip-token:hover {
    background: #ffef73;
    background: linear-gradient(0deg, rgba(255, 239, 115, 1) 0%, rgba(255, 225, 0, 1) 16%, rgb(255 198 0) 100%);
}

/* GENERIC INTERFACE POPUP */

div#generic-interface-container {
    padding-bottom: 3px;
    text-align: center;
}

h2#generic-interface-heading {
    font-size: 20px;
    line-height: 1em;
    padding: 8px 11px;
}

img#generic-interface-image {
    display: inline-block;
    margin: 12px 0 0 0;
}

div#generic-interface-content {
    text-align: center;
    font-size: 14px;
}

div#generic-interface-content p {
    line-height: 1.3em;
}

@media(max-width:500px){ 
    h2#generic-interface-heading {
        font-size: 16px;
        padding: 9px 11px 8px;
    }
}

/* GEM SHOP ON SALE STICKER */

/*
#gem-shop-sale-container {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  position: absolute;
  bottom: -27px;
  left: 2px;
  background: #FFF;
  font-family: Arial, sans-serif;
  font-size: 8px;
  height: 17px;
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0 1px 3px #000;
  width: 83px;
}

.gem-shop-sale-icon {
  width: 17px;
  height: 17px;
  object-fit: contain;
  margin-right: 5px;
}

.gem-shop-sale-text {
  display: flex;
  align-items: center;
}

#gem-shop-sale-container::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid #fff;
}

@media(min-width:500px){ 
    #gem-shop-sale-container {
        font-size: 12px;
        width: 115px;
        left: 4px;
        bottom: -28px;
    }
}
*/

#gem-shop-sale-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: -27px;
  left: 2px;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 8px;
  height: 17px;
  padding: 4px 6px;
  border-radius: 4px;
  box-shadow: 0 1px 3px #000;
  width: 79px;
}

.gem-shop-sale-icon {
  width: 17px;
  height: 17px;
  object-fit: contain;
  flex-shrink: 0;
}

.gem-shop-sale-text {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gem-shop-sale-container::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid #fff;
}

@media (min-width: 500px) {
  #gem-shop-sale-container {
    font-size: 12px;
    width: 113px;
    left: 4px;
    bottom: -28px;
  }
}