html,
body {
    overflow: hidden;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}
body {
    margin: 0 auto;
    background: url('../img/bg.png');
}
a:hover {
    text-decoration: none;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
input {
    padding: 5px;
    width: 100%;
    background: rgba(0, 0, 0, .05);
    border-width: 0px;
    border: none;
    margin-right: 20px;
}
.desktop {
    margin: 48px;
    width: 1px;
    height: 100%;
}
.clickable-desktop {
    /* position: relative; */
    /* z-index: 0; */
    margin-left: -48px;
    width: 100%;
    height: 100%;
    margin-top: 40px;
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0, .1);
}
.icon-wrapper {
    position: relative;
    z-index: 1;
}
.icon-wrapper>i {
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    /* pointer-events: none; */
}
.icon-wrapper>i>.label {
    font-size: 12px;
    width: auto;
    margin-top: 88px !important;
    text-align: center;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: normal;
    flex-shrink: 0;
    background: rgba(0, 0, 0, .2);
    padding: 3px;
}
#settings {
    position: fixed;
    z-index: 1000;
    right: 220px;
    bottom: 20px;
    width: 140px;
    background-color: lightslategrey;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 12;
    border: 1px solid lightgrey;
    display: none;
}
#gamestats {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    height: 20px;
    /* width: 100%; */
    right: 220px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    background: black;
    outline-offset: -1px;
    outline: 1px solid lightgrey;
}
#goldFountain,
#experienceFountain {
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: 7px;
    left: -238px;
}
#ticker {
    color: limegreen !important;
    font-family: monospace;
    font-size: 10px;
    position: absolute;
    right: 201px;
    max-width: 100%;
    /* min-width: 50%; */
    width: 100%;
    top: 4px;
}
#ticker>marquee {
    color: limegreen !important;
}
#ticker>marquee>span {
    margin-left: 15px;
    margin-right: 15px;
}
#settings>ul {
    list-style-type: none;
    padding: 0;
    margin: 10px;
    /* margin-bottom:10px; */
}
.address {
    background: lightgrey;
    color: black;
}
.version {
    font-size: 10px;
    position: absolute;
    right: 5px;
    bottom: 5px;
}
.jspanel-content {
    border-top: 1px solid grey !important;
}
#notSidebar {
    position: fixed;
    top: 0;
    /* z-index: 200; */
    /* right: 0; */
    right: 220px;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    height: 100%;
}
#sidebar {
    position: fixed;
    z-index: 200;
    right: 0;
    top: 0px;
    /* margin-top: 40px; */
    width: 220px;
    height: 100%;
    /* border: 1px solid grey; */
    background: lightslategrey;
    overflow-y: scroll;
    overflow-x: hidden;
    /* margin-bottom: 25px; */
}
#sidebar>.jsPanel {
    position: unset !important;
    margin-left: 5px;
    margin-top: 5px;
    overflow: visible;
}
#dock {
    z-index: 200;
    position: fixed;
    bottom: 25px;
    left: 0;
    width: 80%;
    height: 220px;
    /* overflow-x: scroll; */
    overflow-y: hidden;
    /* border: 1px solid grey;
    background: black; */
    pointer-events: none;
}
.jsPanel-inactive {
    background: grey !important;
}
.jsPanel-inactive > .jsPanel-titlebar > .jsPanel-title {
    color: black !important;
}
.jspanel-headerbar {
    height: 16px !important;
    background: #000080;
}
.jsPanel-btn {
    transform: scale(0.4, 0.4);
    margin-top: 0px;
    /* margin-right: -12px; */
    /* border: 1px solid #808080; */
    border-radius: 0px !important;
    background: #c0c0c0 !important;
    border-width: 1px;
    border-style: outset;
}
.jsPanel-btn:hover {
    background: #808080 !important;
}
.jsPanel-title {
    font-size: 12px;
    font-weight: 500 !important;
    margin-top: -1px !important;
    margin-left: 2px !important;
    color: white !important;
    font-family: 'Inconsolata', monospace;
}
.jsPanel-controlbar {
    display: flex;
    align-items: center;
    touch-action: none;
    /* margin: 3px; */
    position: relative;
    right: -12px;
    justify-content: space-between;
}
.jsPanel-btn-smallify,
.jsPanel-btn-smallifyrev {}
.jsPanel-headerlogo {
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.blink {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.desktop-icon {
    /* display: block; */
    width: 16px;
    height: 16px;
    /* margin-top: 35px; */
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.leaderboard-icon {
    background-image: url('../img/panels/leaderboard.png');
}
.profile-icon {
    background-image: url('../img/panels/profile.png');
}
.settings-icon {
    background-image: url('../img/panels/settings.png');
}
.loading-dice {
    width: 32px;
    height: 32px;
    background-image: url('../img/loading.gif');
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
#accountInfo {
    /* background: black; */
    display: flex;
    /* position: relative; */
    width: 200px;
    /* left: 5px; */
    margin-top: 2px;
    /* padding-left: 5px; */
    font-size: 10px;
    position: absolute;
    right: 0px;
    font-family: 'Inconsolata', monospace;
}
#accountInfo>div>div {
    margin-right: 3px;
    margin-left: 3px;
}
.spinny {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5.5s;
    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 5.5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
/* WebKit and Opera browsers */
@-webkit-keyframes spinner {
    from {
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-360deg);
    }
}
/* all other browsers */
@keyframes spinner {
    from {
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
    }
}
button {
    background: #c0c0c0;
    border-width: 1px;
    border-style: outset;
    font-family: monospace;
}

.bar-buttons {
    position: absolute;
    right: 3px;
    display: inline-flex;
}

.jsPanel-content > .jsPanel {
    position: initial;
}