/* MAIN */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(/assets/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
    url(/assets/iconfont/MaterialIcons-Regular.woff) format('woff'),
    url(/assets/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

html {
    font-family: 'Varela Round', sans-serif, Verdana;
}

a {
    text-decoration: none;
}

* {
    padding: 0;
    margin: 0;
}

ul, li {
    list-style-type: none;
}

html, body, canvas, #app {
    width: 100%;
    height: 100%;
    margin: 0;

    overflow: hidden;
}

button, a.btn {
    background-color: #f1f1f1;
    border: 0;
    border-radius: 3px;
    /* box-shadow: 0 2px 0 #c3c3c3; */
    /* margin-bottom: 2px; */
    cursor: pointer;
    padding:5px;
}

a.btn {
    background-color: #ffffff;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 2px 0 #ddd;
}

button.icon-button {
    padding:0;
}

a.mobile-icon-button {
    background-color: #ca5b5b;
    padding: 3px 6px;
    border-radius: 5px;
    box-shadow: 0 2px 0 #844747;
    color: #610d0d !important;
}

.btn-green {
    background-color: #16d400;
    /* box-shadow: 0 2px 0 #12b300; */
    color: #fff;
}

.btn-red {
    background-color: #ff0000;
    box-shadow: 0 2px 0 #d00000;
    color: #fff;
}

.btn-blue {
    background-color: #00a9ea;
    color: #fff;
    box-shadow: 0 2px 0 #007bab;
}

.btn-orange {
    background-color: #ffb161;
    color: #ffffff;
}

button:disabled {
    cursor: default !important;
    background-color: #f1f1f1 !important;
    color: #ddd !important;
    box-shadow: 0 2px 0 #ddd !important;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of table rather than block is only necessary if using
 *    :before to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.horizontal-center {
    left: 50%;
    transform: translate(-50%,0);
}

.vertical-center {
    top:50%;
    transform: translate(0,-50%);
}

.full-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.material-icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
    vertical-align: middle;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* END GLOBAL */

#app {
    background-color: transparent;
    position: fixed;
    pointer-events: none;
}

#item-bar {
    width: 100%;
    /* position: fixed; */
    /* bottom: 5px; */
    text-align: center;
}
#item-bar ul {}

#drop-area {}

#bottom-bar {
    width: 100%;
    position: fixed;
    bottom: 5px;
    text-align: center;
}

#bottom-bar > div {
}

.inventory-list>li {
    height: 6vw;
    width: 6vw;
    max-height: 60px;
    max-width: 60px;
    display: inline-block;
    /* box-shadow: inset 1px 1px 10px rgba(0,0,0,.3); */
    background-color: rgba(0,0,0,0.14);
    border-radius: 5px;
    margin-right: 5px;
    pointer-events: all;
    /* overflow: hidden; */
    position: relative;
}

#item-bar ul li {}

.inventory-list>li.equipped {
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
    margin-bottom: 5px;
}

.inventory-list>li .actions {
    position: absolute;
    top: -29px;
    text-align: center;
    left: 0;
    right: 0;
}

.inventory-list>li>.item-inner{
    width:100%;
    height:100%;
}

.inventory-list>li .actions .store-button {
    box-shadow: 0 2px 0 #ff8100;
}

.inventory-list .item-info {
    position: absolute;
    bottom: 100%;
    /* right: 0; */
    /* left: 0; */
    text-align: center;
    white-space: nowrap;
    display: inline-table;
}

.inventory-list .item-info .inner {
    background-color: rgba(0,0,0,0.57);
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 7px;
}

.inventory-list .item-info .inner:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: rgba(0,0,0,0.57);
    border-width: 7px;
    margin-left: -7px;
    margin-top: -7px;
}

.inventory-list .item-info .name {
    display: block;
    color: #fff;
    font-size: .8em;
}

.inventory-list .item-info .item-actions {margin-top: 5px;}

.inventory-list .item-info .item-actions > * {
    padding: 4px;
}

.inventory-list .item-info .repair-list {
    display: block;
    background-color: rgba(255,255,255,0.12);
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
}


.inventory-list .item-info .repair-list:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: rgba(255,255,255,0.12);
    border-width: 7px;
    margin-left: -24px;
    /* margin-top: -7px; */
}

.inventory-list .item-info .repair-list li {
    border-radius: 5px;
    /* background-color: rgba(255,255,255,0.18); */
    margin: 3px;
    /* padding: 5px; */
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
}

.inventory-list .item-info .repair-list li img {
    display: inline-block;
    vertical-align: middle;
}

.inventory-list .item-info .repair-list li .amount {
    position: absolute;
    bottom: 0;
    right: 0px;
    font-size: .7em;
    color: #fff;
}

#item-bar ul li.equipped {}

.inventory-item {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.inventory-item>div {
    width:100%;
    height:100%;
}

.inventory-item img {pointer-events:none;max-width: 80%;max-height: 80%;display: inline-block;position: absolute;top: 0;bottom: 0;margin: auto;/* transform: rotate(45deg); */left: 0;right: 0;/* z-index: 1; */}

.inventory-item .count {
    position: absolute;
    bottom: 0px;
    right: 2px;
    font-weight: bold;
}

.inventory-item .hp.meter {
    position: absolute;
    width: 80%;
    left: 10%;
    height: 5px;
    bottom: 7px;
    background-color: #ff0000;
    opacity: .6;
}
.inventory-item .hp .meter-inner {
    background-color: #91ff00;
}

.inventory-item .index {
    position: absolute;
    left: 4px;
    top: 2px;
    font-size: .8em;
    color: rgba(255,255,255,0.74);
}

/* STATS */

.meter {
    background-color: #000;
    width: 100px;
    position: relative;
    height: 15px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
}

.meter .meter-inner {
    background-color: #ff0000;
    height: 100%;
}

.meter .meter-text {
    position: absolute;
    font-size: 12px;
    vertical-align: middle;
    color: #fff;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
}

#stats {
    /* position: fixed; */
    /* bottom: 8vw; */
    width: 100%;
    text-align: center;
    margin-top: 4px;
}

#stats ul {}

#stats ul li {
    display: inline-block;
}

#stats .meter {
    width: 175px;
    height: 20px;
    background-color: rgba(0,0,0,0.32);
    border-radius: 5px;
}

#stats .meter-inner {
    /* border-radius: 5px; */
}

.meter.nutrition .meter-inner {
    background-color: rgba(255,0,0,0.53);
}

.meter.hidration .meter-inner {
    background-color: rgba(67,203,255,0.55);
}

.meter.energy .meter-inner {
    background-color: rgba(255,197,0,0.88);
}

#stats .meter.xp {display: inline-block;width: 335px;height: 12px;padding: 2px;overflow: visible;margin: 3px 0;}

#stats .meter.xp .meter-inner {
    background-color: rgba(255,247,0,0.75);
    border-radius: 3px;
}

#stats .meter.xp .level {
    position: absolute;
    left: -12px;
    background-color: #5d5d5d;
    border-radius: 20px;
    width: 25px;
    height: 25px;
    line-height: 26px;
    font-size: .8em;
    bottom: -5px;
    border: 1px solid rgba(0,0,0,0.45);
    color: #fff;
}

/* STORAGE */

.draggable-dialog {
    position: fixed;
    z-index: 10;
}

.draggable-dialog>.dialog-content {
    background-color: #634312;
    border-radius: 5px;
    pointer-events: all;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.43);
    /* border: 1px solid #58320b; */
    color: #cecece;
}

.draggable-dialog>.sub-content {
    margin-top: 15px;
    text-align: center;
}

.draggable-dialog>.sub-content .title {position: absolute;top: 0;text-align: center;font-size: .7em;color: rgba(206,206,206,0.61);}

.draggable-dialog>.dialog-content>.content {
    padding: 5px;
}
.draggable-dialog>.dialog-content>.content>.inner {}

.draggable-dialog>.dialog-content>.header {
    min-height: 30px;
    position: relative;
}

.draggable-dialog>.dialog-content>.header .title {
    vertical-align: middle;
    display: block;
    text-align: center;
    color: #ffffff;
    padding: 0 40px;
    padding-top: 7px;
}

.draggable-dialog>.dialog-content>.header .close {
    vertical-align: middle;
    /* font-size: 20px; */
    position: absolute;
    right: 3px;
    top: 3px;
    background-color: #d83030;
    padding: 3px 5px;
    border-radius: 5px;
    /* box-shadow: 0 2px 0 #6d3535; */
    color: #610d0d;
}

.draggable-dialog>.dialog-content>.header .close i {
    font-size: 20px;
}

.draggable-dialog .actions {text-align: center;padding: 6px 3px 2px;}

.draggable-dialog .actions button {font-size: .9em;padding: 4px 11px;color: #ffffff;}

.storage-container {
    max-width: 330px;
    padding: 10px 0px 5px 10px;
    border-radius: 5px;
    background-color: #7d6e5f;
    text-align: center;
}

/* ARMOR */

.armor-container {
    max-width: 330px;
    padding: 5px;
    border-radius: 5px;
    background-color: #7d6e5f;
    text-align: center;
}

.armor-container .inventory-list {}

.armor-container .inventory-list>li {
    display: block;
    margin: 0 auto 6px auto;
}

.armor-container .inventory-list>li:last-child {
    margin-bottom: 0px;
}

.armor-container .inventory-list .armor-type-1:before {
    background-image: url(person.png);
    background-size: 86%;
    background-position: center center;
    background-repeat: no-repeat;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .2;
    z-index: 0;
}

.armor-container .inventory-list .armor-type-2:before {
    background-image: url(hands.png);
    background-size: 86%;
    background-position: center center;
    background-repeat: no-repeat;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .2;
    z-index: 0;
}

/* RECIPES */

#recipes-container {
    position: fixed;top: 10px;left: 10px;
    z-index:5;
}

#recipes-container .left-menu {
    float: left;
}

#recipes-container .left-menu > a {
    padding: 15px;
    background-color: rgba(0,0,0,0.41);
    border-radius: 5px;
    color: #fff;
    display: block;
    pointer-events: all;
}

#recipes-container .left-menu > a > *{
    vertical-align: top;
}

#recipes-container .makeable-recipes {
    margin-top: 5px;
}

#recipes-container .makeable-recipes li {
    padding: 5px;
    background-color: rgba(0,0,0,0.19);
    border-radius: 5px;
    color: #fff;
    display: block;
    pointer-events: all;
    width: 5vh;
    height: 5vh;
    text-align: center;
    margin-bottom: 5px;
    max-height: 30px;
    max-width: 30px;
    min-width: 23px;
    min-height: 23px;
    box-shadow: 0 3px 0 rgba(0,0,0,0.29);
    cursor: pointer;
    position: relative;
}

#recipes-container .makeable-recipes .details {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 5px;
    background-color: rgba(0,0,0,0.34);
    border-radius: 5px;
    padding: 5px 10px 7px;
    text-align: left;
    display: table;
    white-space: nowrap;
}

#recipes-container .makeable-recipes .details .name {
    display: block;
    margin-bottom: 2px;
}

#recipes-container .makeable-recipes .details .description {
    display: table-row;
    color: #ddd;
    font-size: .8em;
}


#recipes-container .recipe-categories {
    float: left;
    margin-left: 10px;
}

#recipes-container .recipe-categories ul {}

#recipes-container .recipe-categories li , #recipes-container .recipe-categories .selected-category {
    padding: 5px;
    background-color: rgba(0,0,0,0.41);
    border-radius: 5px;
    color: rgba(255,255,255,0.79);
    display: block;
    pointer-events: all;
    cursor: pointer;
    margin-bottom: 6px;
    font-size: .7em;
}

#recipes-container .recipe-categories .selected-category {
    color: #fff;
}

#recipes-container .recipe-categories .separator {
    margin: 5px 0;
    border-top: 1px solid rgba(0,0,0,0.22);
    /* width: 80%; */
    height: 1px;
}

#recipes-container .content {float: left;margin-left: 10px;}

#recipes-container .recipes {
}

#recipes-container .recipes li {
    float: left;
    margin-right: 5px;
    position: relative;
    /* width: 30px; */
    /* height: 30px; */
}

#recipes-container .recipe-icon {
    padding: 5px;
    background-color: rgba(0,0,0,0.41);
    border-radius: 5px;
    color: #fff;
    display: block;
    /* width: 30px; */
    /* height: 30px; */
    pointer-events: all;
}

#recipes-container .recipe-icon>*{
    vertical-align: top;
}

.recipe-icon.open {
    /* min-width: 80px; */
}

.recipe-icon .header {}

.recipe-icon .header .image {
    width: 30px;
    height: 30px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.recipe-icon .header .image img {}

.recipe-icon .header .name {
    display: inline-block;
    vertical-align: middle;
    font-size: .8em;
}

.recipe-icon .ingredients {
    display: block;
    background-color: rgba(255,255,255,0.12);
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.recipe-icon .ingredients li {
    border-radius: 5px;
    /* background-color: rgba(255,255,255,0.18); */
    margin: 3px;
    /* padding: 5px; */
    width: 30px;
    height: 30px;
}

.recipe-icon .ingredients li img {
    display: inline-block;
    vertical-align: middle;
}

.recipe-icon .ingredients li .amount {
    position: absolute;
    bottom: 0;
    right: 0px;
    font-size: .7em;
}

.recipe-icon .actions {
    text-align: center;
}

.recipe-icon .actions .create {
}

/* CONSUMING */

#consuming {
    width: 100%;
    text-align: center;
}

#consuming ul {
    background-color: rgba(0,0,0,0.15);
    padding: 3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
}

#consuming .consuming-item {
    /* float: left; */
    /* width: 30px; */
    /* height: 30px; */
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    height: 4vw;
    width: 4vw;
    max-height: 30px;
    max-width: 30px;
}

#consuming .consuming-item:first-child {
    margin-left: 0;
}

#consuming .consuming-item img {
    display: inline-block;
    vertical-align: middle;
}

/* NEW ENTITIES */

#new-entities {
    position: fixed;
    bottom: 90px;
    left: 20px;
    bottom: 20px;
}

#new-entities .new-entity-item {
    height: 20px;
    padding: 5px;
    background-color: rgba(0,0,0,0.20);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    margin-top: 5px;
    font-size: .8em;
}

#new-entities .new-entity-item .amount {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

#new-entities .new-entity-item img {
    max-width: 40px;
    display: inline-block;
    vertical-align: middle;
}

/* FPS DISPLAY */

#fps-display {
    position: fixed;
    top: 0;
    left: 5px;
    color: #27ff00;
}

/* DROP */

.number-input {
    border-radius: 4px;
    border: 1px solid #fff;
    display: inline-block;
    max-width: 34px;
    text-align: center;
}

.drop-dialog {text-align: center;z-index: 10;}

.drop-dialog .total {
    color: #fff;
    font-weight: bold;
}

.drop-dialog #drop-button {}

.dialog-actions {
    text-align: center;
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid #7b571f;
}

/* CHAT */

#chat-container {
    /* position: fixed; */
    text-align: center;
    /* bottom: 100px; */
    margin-bottom: 20px;
}

#chat-container .message-container {}

#chat-container .message-container input {
    border: 0;
    border-radius: 5px;
    padding: 5px;
    background-color: rgba(0,0,0,0.21);
    color: #fff;
    pointer-events: all;
}

#chat-container .chat-actions {
    text-align: center;
    margin-top: 5px;
}

#chat-container .chat-actions button {
    background-color: rgba(0,0,0,0.21);
    /* box-shadow: 0 2px 0 rgba(0,0,0,0.33); */
    pointer-events: all;
    margin-right:5px;
}

#chat-container .chat-actions button:last-child {
    margin-right:0;
}

/* MENU */

.content-box {
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 5px 0 #d0d0d0;
    padding: 5px;
    pointer-events: all;
}

.content-box .title {
    color: #929292;
    margin-bottom: 5px;
    display: block;
}

#menu-container {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: all;
    background-color: rgba(0,0,0,0.15);
}

#menu-container>.inner{
    position: fixed;
    width: 100%;
    text-align: center;
}

#menu-container .logo {
    font-size: 80px;
    color: #fff;
    text-shadow: 0 2px 0 #b1b1b1;
    /* font-weight: bold; */
    line-height: 80px;
    text-align: center;
}

#menu-container .game-name {
    position: relative;
}

#menu-container .game-subtitle {
    position: absolute;
    font-size: 14px;
    top: -10px;
    white-space: nowrap;
    text-shadow: none;
    left: 100%;
}

#menu-container .boxes-container {}

#menu-container .boxes-container > div {
    display: inline-block;
    margin-right: 5px;
    vertical-align: top;
}

#menu-container .boxes-container > div:last-child {
    margin-right: 0;
}

#menu-container #center-menu {
    text-align: center;
}

#menu-container #center-menu .warn-container {
    max-width: 370px;
    padding: 15px;
}
#menu-container #center-menu .warn-container p {}

#menu-container #left-sidebar {
    width: 300px;
}
#menu-container #left-sidebar > *{

    margin-bottom: 10px;
}
#menu-container #left-sidebar > *:last-child{

    margin-bottom: 0;
}

@media (max-width: 700px) {
    #right-sidebar {
        display: none !important;
    }
}

@media (max-width: 1000px) {
    #left-sidebar {
        display: none !important;
    }
}

#menu-container #right-sidebar {
    width: 300px;
}

#menu-container .changelog-container {
}

#menu-container .language-container {
    font-size: .8em;
    color: #808080;
    margin-top: 12px;
}

#menu-container .language-container #language-selector {
    border-radius: 5px;
    border: 0;
    padding: 2px;
    text-align: center;
    background-color: #efefef;
}

#menu-container .changelog {
    width: 100%;
    min-height: 30px;
    background-color: #f7f7f7;
    border-radius: 5px;
    color: #b5b5b5;
    font-size: .8em;
    white-space: pre-line;
    max-height: 220px;
    overflow-y: scroll;
    padding: 5px;
    box-sizing: border-box;
    text-align: left;
}

#menu-container .social-links {
    margin: 5px 0;
}
#menu-container .social-links a {
    display: inline-block;
    color: #464646;
}

#menu-container .social-links .reddit {
    color: #fff;
    background-color: #15b3ff;
    box-shadow: 0 2px 0 #0c85bf;
}
#menu-container .social-links .discord {
    color: #fff;
    background-color: #4e4e4e;
    box-shadow: 0 2px 0 #000000;
}

#menu-container .play-container {
    padding: 10px 5px;
}

#menu-container .ad-container {
    min-width: 336px;
    min-height: 280px;
    margin-top: 30px;
}

.dialog-ad-container {
    min-width: 250px;
    min-height: 250px;
    max-width: 300px;
    max-height: 250px;
    padding: 19px 10px 10px;
    position: relative;
    text-align: center;
    display: inline-block;
}

#menu-container input.name {
    padding: 3px;
    border-radius: 5px;
    /* border: 3px solid #f1f1f1; */
    border: 1px solid #ddd;
    /* box-shadow: inset 0px 2px 3px #ddd; */
    background-color: #ddd;
    color: #000;
    font-weight: bold;
    text-align: center;
    font-size: 23px;
}

#menu-container select.servers {
    padding: 4px;
    border-radius: 5px;
    /* border: 3px solid #f1f1f1; */
    border: 1px solid #ddd;
    background-color: #ddd;
}

#menu-container #center-menu .name-container {}
#menu-container #center-menu .servers-container {
    margin-top: 10px;
}

#menu-container .actions-container {margin-top: 8px;}

#menu-container .actions-container .play {font-size: 20px;padding: 6px 30px;box-shadow: 0 2px 0 #12b300;}
#menu-container .actions-container .feedback {font-size: 20px;padding: 6px 10px;/* box-shadow: 0 2px 0 #12b300; */}


/* PLAY STATS */

#play-stats {text-align: center;padding: 5px 10px;}

#play-stats .die-message {
}

#play-stats .name {color: #fff;font-size: 2em;}

#play-stats .play-time-container {
    margin: 10px 0;
    padding: 10px 0;border-top: 1px solid #754d11;border-bottom: 1px solid #754d11;}

#play-stats .play-time-container .time {color: #fff;/* font-weight: bold; */}

#play-stats .details {margin: 0 0 10px;padding: 0 0 10px;border-bottom: 1px solid #754d11;}

#play-stats .details>div {display: inline-block;margin: 5px;padding: 5px 10px;background-color: #734f17;border-radius: 5px;box-shadow: 0 2px 0 #50350b;}

#play-stats .title {display: block;font-size: 0.9em;}

#play-stats .value {display: block;font-size: 1.5em;color: #fff;}

#play-stats .actions {

}
#play-stats .actions .next-round-note {display: block;margin-bottom: 5px;margin-top: -5px;font-size: .9em;color: #cecece;}

#play-stats .actions .next-round-note .level {
    color: #fff;
    /* font-weight: bold; */
}

#play-stats .actions button {font-size: 1em;padding: 6px 15px;}


/* SERVER MESSAGES */

#server-messages{
    position: fixed;
    top: 5px;
}

#server-messages ul {}

#server-messages ul li {
    /* border-radius: 5px; */
    background-color: rgba(255,255,255,0.22);
    color: #fff;
    padding: 1px 10px;
    margin-bottom: 5px;
}

#server-messages span.message {}

/* HOME */

a.translate {
    background-color: #ffae3a;
    margin: 10px;
    /* display: block; */
    padding: 7px 18px;
}

#links {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    padding: 4px 10px;
    border-radius: 0 5px;
    box-shadow: 0px 1px 7px rgba(0,24,33,0.30);
}

#links a {
    text-decoration: none;
    color: #7d7d7d;
}


/* JOYSTICKS */

#joystick-area {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: all;
    /*z-index: 100;*/
}

/* TOP RIGHT MENU */

#top-right-menu {
    position: fixed;
    top: 10px;
    right: 10px;
}

#top-right-menu > div {
    display: inline-block;
    vertical-align: top;
    text-align: right;
}

#top-right-menu .button-container {margin-bottom: 5px;}

#top-right-menu .button-container a {
    background-color: rgba(0,0,0,0.25);
    padding: 15px;
    border-radius: 5px;
    display: inline-block;
    color: #fff;
    pointer-events: all;
    position: relative;
    text-align: center;
}

#top-right-menu .button-container a .button-note {position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);background-color: #e80202;padding: 0 5px;border-radius: 3px;color: #fff;box-shadow: 0 2px 3px #0003;}

#top-right-menu .button-container a .button-note.green {
    background-color: #1fe219;
}

/* LEADERBOARD */

#leaderboard {
    background-color: rgba(0,0,0,0.38);
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
}

#leaderboard #toggle-leaderboard {
    background-color: rgba(48,180,229,0.33);
    padding: 15px;
    border-radius: 5px;
    display: inline-block;
    color: #fff;
    pointer-events: all;
}

#leaderboard .title {
    padding: 2px 10px;
    text-align: center;
    color: #ffffff;
    background-color: rgba(255,255,255,0.12);
}

#leaderboard ul {
    padding: 2px;
}

#leaderboard ul li {
    padding: 2px 5px;
    font-size: .8em;
    color: #ddd;
}

#leaderboard ul li .name {
    float: left;
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
}

#leaderboard ul li .score {
    float: right;
    margin-left: 10px;
    color: #fff;
}

/* TRIBES */

.near-tribes-container {
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color: #7d5b25;
}

.near-tribes-container ul {
    min-width: 160px;
    min-height: 70px;
    max-height: 150px;
}

.near-tribes-container ul li {
}

.horizontal-spread {
    text-align: justify;
    font-size: 1px;
}

.horizontal-spread:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

.near-tribes-container ul li .name {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #e4e4e4;
}

.near-tribes-container ul li .join {
    /* float: right; */
    display: inline-block;
    vertical-align: middle;
}

.near-tribes-container .refresh {
    color: #fff;
}

.create-tribe-container {}

.create-tribe-container .tribe-name {
    border-radius: 5px;
    border: 0;
    padding: 5px;
}

.create-tribe-container .create-tribe {}


.tribe-members {
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color: #7d5b25;
}

.tribe-members ul {
    min-width: 160px;
    min-height: 70px;
    max-height: 150px;
}

.tribe-members ul li {}

.tribe-members ul li .name {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #fff;
}

.tribe-members ul li .kick {
    display: inline-block;
    vertical-align: middle;
}

.tribe-actions {
    text-align: center;
}

.tribe-actions .quit-tribe {
    background-color: #ff0000;
    color: #fff;
    box-shadow: 0 2px 0 #900000;
}

.near-tribes-container .title, .tribe-members .title {
    display: block;
    text-align: center;
    font-size: 1em;
    color: #cacaca;
    margin-top: -3px;
    /* font-size: .8em; */
}

/* TRIBE REQUESTS */

#tribe-join-requests {
    background-color: rgba(0,0,0,0.11);
    padding: 5px 10px;
    border-radius: 5px;
}

#tribe-join-requests .person-name {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

#tribe-join-requests button {
    background-color: rgba(255,255,255,0.46);
    pointer-events: all;
    display: inline-block;
    vertical-align: middle;
}

#tribe-join-requests .accept {color: #00a90e;}

#tribe-join-requests .refuse {
    color: #aa0101;
}


/*nearby-interactions */

#nearby-interactions {
    position: fixed;
    top: 5px;
    z-index: 3;
}

#nearby-interactions ul {}

#nearby-interactions ul li {
    text-align: center;
    width: 50px;
    max-width: 5vw;
    background-color: rgba(0,0,0,0.21);
    border-radius: 5px;
    padding: 3px 5px;
    padding-bottom: 0px;
    color: #fff;
    opacity: 0.8;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    pointer-events: all;
    cursor: pointer;
}

#nearby-interactions ul li:last-child {
    margin-right: 0;
}

#nearby-interactions ul li .image-container {}

#nearby-interactions ul li .image-container img {
    display: block;
}

#nearby-interactions ul li .indication {
    font-size: .8em;
}


/* TOOLTIPS */

.tooltip {
    display: block !important;
    z-index: 10000;
    font-size: .8em;
}

.tooltip .tooltip-inner {
    background: rgba(0,0,0,.8);
    color: white;
    border-radius: 5px;
    padding: 3px 6px 2px;
}

.tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: black;
    z-index: 1;
}

.tooltip[x-placement^="top"] {
    margin-bottom: 5px;
}

.tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}

.tooltip[x-placement^="bottom"] {
    margin-top: 5px;
}

.tooltip[x-placement^="bottom"] .tooltip-arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}

.tooltip[x-placement^="right"] {
    margin-left: 5px;
}

.tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}

.tooltip[x-placement^="left"] {
    margin-right: 5px;
}

.tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}

.tooltip.popover .popover-inner {
    background: #f9f9f9;
    color: black;
    padding: 24px;
    border-radius: 5px;
    box-shadow: 0 5px 30px rgba(black, .1);
}

.tooltip.popover .popover-arrow {
    border-color: #f9f9f9;
}

.tooltip[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
}

.tooltip[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
}

/* END TOOLTIPS */

/* SECONDARY STATS */

.secondary-stats-container {
    background-color: #7d5b25;
    padding: 5px;
    border-radius: 4px;
    min-width: 200px;
}

.secondary-stats-container .available-points {
    text-align: center;
    margin-bottom: 5px;
}

.secondary-stats-container .available-points span {
    color: #fff;
}

.secondary-stats-container .stat-header {
    text-align: justify;
    margin-bottom: -1em;
}

.secondary-stats-container .stat-header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

.secondary-stats-container .stat-header > *,
.secondary-stats-container .stat-child > *{
    display: inline-block;
    vertical-align: middle;
}

.secondary-stats-container > .stat-row .stat-name {}

.secondary-stats-container > .stat-row .stat-value {
    color: #fff;
}

.secondary-stats-container > .stat-row .stat-value > * {
    display: inline-block;
    vertical-align: middle;
}

.secondary-stats-container > .stat-row .stat-actions {}

.secondary-stats-container > .stat-row .stat-actions button {}

.secondary-stats-container > .stat-row .stat-children {
    font-size: .8em;
    color: #b18f59;
    margin-top: -20px;
}

.secondary-stats-container > .stat-row .stat-children .stat-child {}

.secondary-stats-container > .stat-row .stat-children .stat-child .name {}

.secondary-stats-container > .stat-row .stat-children .stat-child .value {
    color: #b1a086;
}
/* END SS */

/* RECENT VIDEOS */

#recent-videos {
    text-align: center;
}

#recent-videos ul {}

#recent-videos ul li {
    max-width: 170px;
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0px 1px 5px #ccc;
    position: relative;
    opacity: .7;
}

#recent-videos ul li:hover{
    opacity:1;
}

#recent-videos ul li a {}

#recent-videos ul li a img {
    display: inline-flex;
    vertical-align: middle;
}

#recent-videos ul li a .title {
    position: absolute;
    bottom: 0;
    color: rgba(255,255,255,0.82);
    background-color: rgba(0,0,0,0.39);
    font-size: 0.8em;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    padding: 2px 2px;
}

/* CONTENT GROUP */

.content-group {
    background-color: #f5f5f5;
    border-radius: 5px;
    margin: 0;
}

.content-group .title {
    font-size: .8em;
    color: #b5b5b5;
}



/* SKINS SELECTOR */

.skins-container {
    margin-bottom: 11px;
}

.skins-container .content-group {
    margin-top: 5px;
}

.skins-container .skin-selector-container {
    display: inline-block;
}
.skins-container .skin-selector-container > div {
    display: inline-block;
    vertical-align: middle;
}
.skins-container .skin-selector-container .button-container {}
.skins-container .skin-selector-container .button-container > * {}

.skins-container .skin-selector-container .skin-container {padding: 10px;background-color: #d2d2d2;border-radius: 5px;}

.skins-container .skin-selector-container .skin {
    position: relative;
    width: 50px;
    height: 50px;
}

.skins-container .skin-selector-container .skin .head {
    position: absolute;
}

.skins-container .skin-selector-container .skin .hands {
    position: absolute;
}

.skins-container .skin-selector-container .skin .hair-container {}

.skins-container .skin-selector-container .skin .hair {
    display: inline-block;
    vertical-align: middle;
}

.skins-container .hair-color-container {}

.skins-container .hair-color-container .hair-color {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 5px;
    border-radius: 15px;
    border: 2px solid rgba(0,0,0,0.16);
    cursor: pointer;
}

.skins-container .hair-color-container .hair-color:hover {
    border-radius: 5px;
}

.skins-container .hair-color-container .hair-color.active {
    border-radius: 5px;
}