:root {
    --mc-color-main: #68ca34;
    --mc-color-darkish: #666;
    --mc-color-dark: #333;
    --mc-color-darkest: #000;
    --mc-color-lightest: #fff;

    --text-color: var(--mc-color-lightest);
    --background-color-dark: var(--mc-color-dark);
    --background-color: var(--mc-color-darkish);

    --mc-color-secondary-dark: #900;
    --mc-color-secondary-darker: #600;
    --mc-color-secondary-darkest: #300;
    --mc-color-secondary-light: #a00;
    --mc-color-secondary-lighter: #c00;
    --mc-color-secondary-lightest: #f00;

    --mc-color-tertiary: #69c;

    --mc-color-online: #0f0;
    --mc-color-offline: #999;
    
    --mc-color-achievement-miniconomy: #68ca34;
    --mc-color-achievement-diamond: #c4fdff;
    --mc-color-achievement-gold: gold;
    --mc-color-achievement-oil: silver;
    --mc-color-achievement-clay: #ca7a38;

    --menu-color: #9cf;
    --menu-color-text: darkblue;
    --menu-background-gradient: linear-gradient(var(--menu-color), rgb(134, 194, 255));

    --top-background: linear-gradient(#68ca34, #99de62);
    
    --box-top-border: 2px solid rgba(134, 194, 255, .5);
    
    --menu-width: 220px;
    
    --font-size: 14px;
    --font-size-small: 12px;
    
    --gap: .5em;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
/*
        --text-color: var(--mc-color-darkest);
*/
    }
}

html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    background: var(--background-color) linear-gradient(var(--background-color-dark), var(--background-color)) !important;
    background-repeat: repeat-x !important;
    background-size: 100% 300px !important;
    background-attachment: fixed !important;
    color: var(--text-color);
    scroll-behavior: smooth;
    margin: .5em;
}

body,
input,
button,
textarea,
select,
table,
td,
th {
    font-family: ClearSansRegular, Verdana;
    font-size: var(--font-size);
    line-height: normal;
}

/* Do not show page outline when switching pages */
main:focus {
    outline: none;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
}

.border-box {
    box-sizing: border-box;
}

input,
select,
button,
.form,
.fixform {
    border: 1px solid var(--mc-color-secondary-darkest);
    padding-left: 2px;
    background-color: var(--mc-color-secondary-dark);
    color: var(--text-color);
    font-weight: bold;
}

input[type="text"],
input[type="submit"],
input[type="button"],
button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

input.form,
textarea {
    padding: 2px;
    margin: 1px;
    background-color: var(--mc-color-secondary-dark);
}

input.form,
textarea,
option,
select {
    padding: 4px 6px;
    box-shadow: inset 1px 1px 4px var(--mc-color-secondary-darker);
}

select {
    padding: 2px 0;
}

select option {
    overflow: hidden;
    text-overflow: ellipsis;
}

button,
.button,
input[type=submit] {
    min-width: 5em;
    font-weight: bold;
}

.no-min-width {
    min-width: unset;
}

button,
.button,
.sbutton,
input[type=submit] {
    display: inline-block;
    box-shadow: inset 1px 1px 4px var(--mc-color-secondary-lighter);
    padding: 4px;
    margin: 1px;
    background-color: var(--mc-color-secondary-dark);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
}

button[disabled],
input[type=submit][disabled],
a.button-disabled,
.disabled {
    filter: grayscale();
    color: grey;
}

.sbutton {
    font-size: .8em;
}

button:hover,
.button:hover,
.sbutton:hover,
input[type=submit]:hover {
    box-shadow: inset 1px 1px 4px var(--mc-color-secondary-lightest), 0 0 4px var(--mc-color-secondary-lightest);
}

button:active,
.button:active,
.sbutton:active {
    box-shadow: inset 1px 1px 4px var(--mc-color-darkest);
    color: var(--mc-color-secondary-lightest);
}

.button-on {
    background-color: var(--mc-color-secondary-lightest);
}

option:nth-child(even) {
    background-color: var(--mc-color-secondary-darker);
}

option:nth-child(odd) {
    background-color: var(--mc-color-secondary-dark);
}

progress {
    height: .5em;
    background-color: var(--mc-color-darkest);
    border-color: var(--mc-color-dark);
}

.fixform {
    font-family: "Courier New", Courier, mono;
}

.fixed-width-font {
    font-family: "Courier New", Courier, mono;
}

.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

table {
    border-spacing: 0;
    border: none !important;
    border-collapse: collapse;
    width: 100%;
}

tr {
    border: 1px solid rgb(0, 0, 0, .5);
    border-width: 1px 0;
}

tr:first-child {
    border-top: none !important;
}

tr:last-child {
    border-bottom: none !important;
}

th, td {
    border: none !important;
}

table.sh td,
table.sh th,
table.shadow td,
table.shadow th {
    padding: 6px !important;
}

table.sh,
table.ssh,
table.shadow,
table.sshadow {
    border-width: 1px;
    border-style: solid;
    border-color: #aaa #888 #888 #aaa;
    margin-bottom: 20px;
}

table.sh td,
table.sh th,
table.shadow td,
table.shadow th {
    padding: 4px;
}

table.ssh td,
table.ssh th,
table.sshadow td,
table.sshadow th {
    padding: 4px;
    font-size: .8em;
}

table.sh td,
table.ssh td,
table.shadow td,
table.sshadow td {
    background-color: var(--background-color-dark);
    border-bottom: 1px solid var(--mc-color-darkest);
    border-right: 1px solid var(--mc-color-darkest);
}

table.sh td a.activeLink {
    background-color: var(--mc-color-secondary-dark);
    padding: .2em;
}

.dshadow {
    background-color: #444 !important;
    color: #ccc;
}

table.sh th,
table.ssh th,
table.shadow th,
table.sshadow th,
td.header {
    text-align: left;
    background-color: var(--mc-color-secondary-dark);
    border-bottom: 1px solid #999;
    font-weight: bold;
}

table.sh th i,
table.ssh th i,
table.shadow th i,
table.sshadow th i,
td.header i {
    font-weight: normal;
}

table.sh table td,
table.sh table th {
    background: none;
    border: none;
    border-bottom: none;
}

table.hover tr:hover td {
    background-color: var(--mc-color-secondary-darkest);
}

.hover, .hover-bright {
    transition: .2s;
}

.hover:hover {
    background-color: var(--mc-color-secondary-darkest);
}

.hover-bright:hover {
    filter: brightness(120%);
}

ul.no-list-style {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

img {
    border: none;
}

.top {
    padding: 8px;
    background: var(--background-color-dark) !important;
}

a {
    color: var(--mc-color-lightest);
    text-decoration: underline;
}

a:active {
    text-decoration: none;
}

a:hover {
    color: var(--mc-color-lightest);
    text-decoration: none;
}

.noline {
    text-decoration: none;
}

.front,
.club {
    display: block;
    text-decoration: none;
    width: 100%;
}

a.club {
    font-weight: bold;
}

.nopadding {
    padding: 0 !important;
}

.nomargin {
    margin: 0 !important;
}

.width-20px {
    width: 20px;
}

.default-font-size {
    font-size: var(--font-size) !important;
}

.small-font-size {
    font-size: var(--font-size-small) !important;
}

.s0 {
    font-size: 8px;
}

.s05 {
    font-size: 9px;
}

.s1,
.sm {
    font-size: .8em;
}

.s2 {
    font-size: 1em;
}

.s3 {
    font-size: 1.2em;
}

.s4 {
    font-size: 1.4em;
}

.s5 {
    font-size: 1.6em;
}

.uppercase {
    text-transform: uppercase;
}

.underline {
    text-decoration: underline;
}

.big:not(input) {
    font-size: 30px;
    line-height: 30px;
    padding: .5em;
}

.large:not(input) {
    font-size: 40px;
}

.big-dynamic:not(input) {
    font-size: max(1em, min(calc(2vw - 5px), 3em));
    line-height: max(1em, min(calc(2vw - 5px), 3em));
}

.center {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.justify {
    text-align: justify;
}

/* Player names */
.p {
    text-decoration: none;
}

.p-bgcolor-a {
    background-color: #aa8800;
}

.p-bgcolor-b {
    background-color: #006600;
}

.p-bgcolor-c {
    background-color: #880000;
}

.p-bgcolor-d {
    background-color: #0044aa;
}

.p-bgcolor-none {
    background-color: var(--mc-color-darkest)000;
}

.p-birthday {
    color: #0fa !important;
}

.p-designer {
    color: var(--mc-color-lightest) !important;
}

.p-male {
    color: #0ff !important;
}

.p-female {
    color: #f6f !important;
}

.p-company {
    color: #0f0 !important;
}

.p-tourist {
    color: var(--mc-color-lightest) !important;
    font-style: italic;
}

.p-icon {
    width: 10px;
    height: 10px;
}

.p-icon-space {
    margin-right: 4px;
}

.p-icon-space-left {
    margin-left: 4px;
}

.p-yellow {
    color: yellow !important;
}

.p-guest {
    color: #aaa !important;
}

.p-bankrupt {
    color: #999 !important;
    text-decoration: line-through !important;
}

.online:before {
    content: '\2022';
    color: var(--mc-color-online);
    padding-right: 3px;
}

.offline:before {
    content: '\2022';
    color: var(--mc-color-offline);
    padding-right: 3px;
}

a.profile:hover {
    background-color: #222;
}

div.pd,
div.pm,
div.pv,
div.pb,
div.pj {
    display: inline;
    margin-right: 5px;
}

div.pd,
div.pd a {
    color: var(--mc-color-lightest);
}

div.pm,
div.pm a {
    color: #0ff;
}

div.pv,
div.pv a {
    color: #f6f;
}

div.pb,
div.pb a {
    color: #0f0;
}

div.pj,
div.pj a {
    color: #0fa;
}

.guest>* {
    color: #aaa !important;
}

.bankrupt>* {
    color: #999 !important;
}

div.bankrupt a {
    text-decoration: line-through;
}

.indent {
    margin-left: 30px;
}

.flag {
    border: none;
    margin-right: 6px;
    vertical-align: middle;
    width: 26px;
    /* height: 14px; */
}

.flag-large {
    width: 52px;
}

.flag-small {
    width: 15px;
}

/* INTERFACE */
p {
    margin: 0;
    /* padding: 0 6px; */
}

.box_menu_item {
    position: relative;
    box-sizing: border-box;
    background: var(--menu-background-gradient);
    color: var(--menu-color-text);
}

.box_menu_item a {
    color: var(--menu-color-text);
    user-select: none;
    text-decoration: none
}

.box_menu_item a:hover {
    background-color: var(--mc-color-tertiary);
    color: var(--mc-color-lightest);
}

.box_menu_item:hover .keyboard-shortcut {
    display: inline-flex;
}

.menu {
    background: none;
}

.menu-columns {
    display: grid;
    gap: 1px;
    grid-auto-rows: 1fr;
}

.menu-columns .menu-simplemode {
    grid-column: 1 / span 3;
}

.menu-columns-2 {
    grid-template-columns: 1fr 1fr;
}

.menu-columns-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.menu .list-group-item {
    text-align: center;
    color: white;
    max-height: 8em;
}

.menu .list-group-item a {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    border: 2px solid transparent;
    text-decoration: none;
    transition: .1s;
    transition-timing-function: ease-in-out;
}

.menu .list-group-item a:hover, .menu .list-group-item a.menu-item-active {
    background-color: rgba(0, 0, 0, .7);
    border-color: var(--menu-color);
}

.menu .list-group-item a:hover .fa, .menu .list-group-item a:hover .product {
    transform: scale(1.15);
}

.menu .list-group-item a .badge {
    position: absolute;
    right: .2em;
    top: .2em;
}

.menu .list-group-item a > :first-child {
    flex-grow: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu .list-group-item i {
    align-self: center;
    padding-top: 1px;
    font-size: max(3vh, 100%);
}

.menu .list-group-item i.fa-thumbs-o-up {
    font-size: 1em;
}

.menu .menu-item {
    font-size: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: center;
    flex-grow: 1;
}

.right-menu .list-group-item i {
    font-size: 150%;
}

.menu-small .list-group-item {
    min-width: .1em;
}

.menu-group-trade a {
    color: rgb(220, 255, 220) !important;
}

.menu-group-trade-2 a {
    color: rgb(220, 220, 255) !important;
}

.menu-group-social a {
    color: rgb(255, 220, 220) !important;
}

.menu-group-bookmarks a {
    color: rgb(255, 255, 220) !important;
}

.player_name {
    font-weight: bold;
    color: white !important;
}

.product-selector {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: 1px;
}

.product {
    height: 30px;
    width: auto;
    justify-self: center;
    line-height: 1em;
    border: 3px solid transparent;
    vertical-align: middle;
    filter: brightness(120%);
}

.product-hover:hover {
    border-color: var(--menu-color);
    background-color: rgba(0, 0, 0, .7);
}

.product:hover {
    filter: brightness(120%);
}

.product-no-border {
    border: none;
}

.product-big {
    height: 50px !important;
    width: auto;
}

.product-bigger {
    height: 80px !important;
    width: auto;
}

.product-small {
    height: 20px !important;
    width: auto;
}

.product-clickable {
    cursor: pointer;
}

#container_content {
    background: var(--background-color) linear-gradient(var(--background-color-dark), var(--background-color));
    background-repeat: repeat-x;
    background-size: 100% 300px;
    background-attachment: fixed;
}

div.header,
.pageheader,
.pageheader2 {
    position: relative;
    background-color: var(--mc-color-tertiary);
    padding: 4px 0;
    color: var(--mc-color-lightest);
    margin-bottom: 4px;
}

.pageheader {
    font-size: 2em;
    padding: .2em;
}

.pageheader p i {
    line-height: 0;
}

.pageheader-description {
    margin-right: 50px;
    font-family: Verdana, sans-serif, Arial, Helvetica;
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
}

.pageheader2 {
    padding: 0;
    background: none;
    font-size: 1.2em;
}

.pageheader2 i {
    font-weight: normal;
}

.pageheader a {
    background-color: var(--mc-color-tertiary);
}

.header i {
    font-size: 1em;
}

.header p {
    margin: 0;
    padding: 0 8px;
    line-height: 1em;
}

.pl_row {
    padding: 4px;
    height: 14px;
    clear: both;
}

.menu-rank {
    color: var(--mc-color-lightest);
    background-color: var(--mc-color-tertiary);
    font-size: .7em;
    padding: 1px 2px;
    line-height: .7em;
}

#player_header {
    margin-bottom: 0px;
}

.d_messages {
    font-weight: normal;
}

#player_header .pl_row {
    height: 16px;
    padding-top: 0;
}

.pl_row_l {
    float: left;
}

.pl_row_r {
    float: right;
    text-overflow: ellipsis;
}

.menu-boxed-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 4px;
}

#products {
    background-image: none;
}

.box_menu_item .icon,
.box_menu_item .icon_d {
    margin-right: 4px;
    padding: 0;
    vertical-align: bottom;
    background-color: var(--menu-background-color);
    background-image: url(/images/interface/curvy/bg_rounded.gif);
    background-repeat: no-repeat;
}

.box_menu_item .icon_d {
    background-color: var(--mc-color-tertiary);
    background-image: url(/images/interface/curvy/bg_rounded_d.gif);
}

img.messages {
    vertical-align: middle;
}

.small:not(input) {
    font-size: 0.8em;
}

a.cabcity {
    display: block;
    color: white;
    margin-top: 2px;
    padding: 10px 2px;
}

a.cabcity:hover {
    background-color: var(--mc-color-tertiary);
}

.on_pl {
    width: 200px;
    float: left;
}

.nowrap {
    white-space: nowrap;
}

.wrap {
    white-space: pre-wrap;
}

.info,
.info-tiny,
.warning,
.warning-tiny,
.error,
.error-tiny {
    position: relative;
    padding: 10px 10px 10px 60px;
    font-weight: bold;
}

.info,
.warning,
.error {
    padding: 1em 1em 1em 60px;
    min-height: 3em;
}

.warning,
.warning-tiny,
.error,
.error-tiny {
    border: 1px solid var(--mc-color-secondary-darkest);
    background-color: var(--mc-color-secondary-darker);
}

.info,
.info-tiny {
    border: 1px solid #003;
    border-top: var(--box-top-border);
    background-color: #005;
}

.info:before,
.warning:before,
.error:before {
    position: absolute;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline;
    text-decoration: none;
    font-size: 3em;
    margin: 0 -1.2em;
    opacity: .5;
}

.warning:before,
.error:before {
    content: "\f071";
    /* left: .8em; */
}

.info:before {
    content: "\f05a";
}

.info-tiny:before {
    font-family: FontAwesome;
    content: "\f05a";
    margin-right: .5em;
}

.warning-tiny:before,
.error-tiny:before {
    font-family: FontAwesome;
    content: "\f071";
    margin-right: .5em;
}

.info-tiny,
.warning-tiny,
.error-tiny {
    background-image: none;
    padding: 4px;
    min-height: inherit;
}

.happy,
.happy-tiny {
    border: 1px solid #003;
    padding: 10px 10px 10px 66px;
    font-weight: bold;
    background-color: #6C0;
    background-image: url(/images/interface/curvy/messagebox_happy.png);
    background-repeat: no-repeat;
    background-position: 8px 8px;
    min-height: 40px;
}

.happy p {
    background-color: var(--background-color-dark);
    padding: 10px;
}

@keyframes pulse_animation {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }

    70% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

.pulse {
    animation-name: pulse_animation;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.tutorial_activated_action {
    padding: 2px;
    font-weight: bold;
    background-color: red !important;
    color: white !important;
    animation-name: pulse_animation;
    animation-duration: 3000ms;
    transform-origin: 70% 70%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#products .tutorial_activated_action {
    padding: 0;
}

a.ext-link,
a[href^="http://"]:not([href*="miniconomy."]):after,
a[href^="https://"]:not([href*="miniconomy."]):after {
    content: "\f08e";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    padding-left: .3em;
    text-decoration: none;
    font-size: .8em;
}

.float,
.float-left {
    float: left;
}

.float-right {
    float: right;
}

.unfloat {
    clear: both;
}

.unfloat_spacer {
    clear: both;
    height: 10px;
}

a.profile {
    text-decoration: none;
    padding: 2px 4px;
    white-space: nowrap;
}

.circle {
    border-radius: 100%;
}

.dropshadow {
    box-shadow: 0 0 10px var(--background-color-dark);
}

.clickable {
    cursor: pointer;
}

.scrollable {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.pad {
    padding: 10px;
}

.dim {
    color: var(--background-color);
}

.transparent-white {
    color: rgb(255, 255, 255, .5);
}

div.spon,
div.spoff {
    font-size: 10px;
    display: inline;
    margin-right: 6px;
}

div.spon {
    color: #0f0;
}

div.spoff {
    color: var(--mc-color-secondary-light);
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.shadow {
    box-shadow: .5em .5em .5em rgba(0, 0, 0, .5);
}

.shadow-big {
    box-shadow: 0 0 10px 10px var(--background-color-dark);
}

input.supertiny,
select.supertiny {
    width: 2em;
}

input.tiny,
select.tiny {
    width: 4em;
}

input.small,
select.small {
    width: 5em;
}

input.medium,
select.medium {
    width: 10em;
}

input.big,
select.big button.big {
    width: 20em;
}

input.price,
input.amount,
select.price {
    width: 7em;
}

.blink {
    animation: blink 1s steps(5, start) infinite;
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}

.fixed {
    position: fixed !important;
}

.fixed-bottom {
    position: fixed !important;
    bottom: 0;
}

a.list-group-item i {
    padding-left: 2px;
}

.read-space {
    margin: 4px !important;
}

.read-space-tiny {
    margin: 2px !important;
}

.read-space-big {
    margin: 8px !important;
}

.read-space-padding {
    padding: 4px !important;
}

.read-space-padding-big {
    padding: 8px !important;
}

.top-space {
    margin-top: 8px;
}

.top-space-huge {
    margin-top: 20px;
}

.bottom-space {
    margin-bottom: 8px;
}

.bottom-space-small {
    margin-bottom: 4px;
}

.bottom-space-tiny {
    margin-bottom: 1px;
}

.bottom-space-huge {
    margin-bottom: 20px;
}

.bottom-space-super {
    margin-bottom: 40px;
}

.bottom-space-enormous {
    margin-bottom: 80px;
}

.left-space {
    margin-left: 8px;
}

.right-space {
    margin-right: 8px;
}

.col-menu-dark {
    color: var(--mc-color-tertiary);
}

.col-nok-bg {
    color: var(--mc-color-secondary-darker);
}

.col-dark {
    color: var(--mc-color-darkest);
}

.col-grey {
    color: var(--mc-color-darkish);
}

.col-lightgrey {
    color: #ddd;
}

.col-ok,
.col-green {
    color: #0f0;
}

.col-nok,
.col-red {
    color: #f00;
}

.col-white {
    color: white;
}

.col-text {
    color: var(--text-color);
}

.col-warning {
    color: yellow;
}

.grayscale {
    filter: grayscale(100%);
}

.contrast {
    filter: contrast(0%);
}

.opacity-50 {
    opacity: 0.5;
}

.table-fixed {
    table-layout: fixed;
}

.label {
    background-color: var(--mc-color-tertiary);
    color: white;
    padding: .4em;
    font-size: 80%;
    text-transform: uppercase;
}

.table-zebra-0 {
    background-color: var(--background-color-dark) !important;
}

.table-zebra-1 {
    background-color: #222 !important;
}

th.rotate {
    height: 140px;
    white-space: nowrap;
}

th.rotate>div {
    transform: translate(1em, 51px) rotate(315deg);
    width: 30px;
}

th.rotate>div>span {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}

.hover-bg-black:hover {
    background-color: black !important;
}

@font-face {
    font-family: 'Folksolid';
    src: url('/style/fonts/Folksolid-webfont.eot');
    src: url('/style/fonts/Folksolid-webfont.eot?#iefix') format('embedded-opentype'), url('/style/fonts/Folksolid-webfont.woff') format('woff'), url('/style/fonts/Folksolid-webfont.ttf') format('truetype'), url('/style/fonts/Folksolid-webfont.svg#Folksolid') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'UbuntuTitlingBold';
    src: url('/style/fonts/UbuntuTitling-Bold-webfont.eot');
    src: url('/style/fonts/UbuntuTitling-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/style/fonts/UbuntuTitling-Bold-webfont.woff') format('woff'), url('/style/fonts/UbuntuTitling-Bold-webfont.ttf') format('truetype'), url('/style/fonts/UbuntuTitling-Bold-webfont.svg#UbuntuTitlingBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BearpawRegular';
    src: url('/style/fonts/BEARPAW_-webfont.eot');
    src: url('/style/fonts/BEARPAW_-webfont.eot?#iefix') format('embedded-opentype'), url('/style/fonts/BEARPAW_-webfont.woff') format('woff'), url('/style/fonts/BEARPAW_-webfont.ttf') format('truetype'), url('/style/fonts/BEARPAW_-webfont.svg#BearpawRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KomikaTitleRegular';
    src: url('/style/fonts/KomikaTitle-webfont.eot');
    src: url('/style/fonts/KomikaTitle-webfont.eot?#iefix') format('embedded-opentype'), url('/style/fonts/KomikaTitle-webfont.woff') format('woff'), url('/style/fonts/KomikaTitle-webfont.ttf') format('truetype'), url('/style/fonts/KomikaTitle-webfont.svg#KomikaTitleRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('/style/fonts/BebasNeue-webfont.eot');
    src: url('/style/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('/style/fonts/BebasNeue-webfont.woff') format('woff'), url('/style/fonts/BebasNeue-webfont.ttf') format('truetype'), url('/style/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ColaborateRegular';
    src: url('/style/fonts/ColabReg-webfont.eot');
    src: url('/style/fonts/ColabReg-webfont.eot?#iefix') format('embedded-opentype'), url('/style/fonts/ColabReg-webfont.woff') format('woff'), url('/style/fonts/ColabReg-webfont.ttf') format('truetype'), url('/style/fonts/ColabReg-webfont.svg#ColaborateRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ClearSansRegular';
    src: url('/style/fonts/ClearSans-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DroidSansRegular';
    src: url('/style/fonts/DroidSans-webfont.eot');
    src: url('/style/fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('/style/fonts/DroidSans-webfont.woff') format('woff'), url('/style/fonts/DroidSans-webfont.ttf') format('truetype'), url('/style/fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'humanitarian_icons';
    src: url('/style/fonts/humanitarian_icons.eot');
    src: url('/style/fonts/humanitarian_icons.eot?#iefix') format('embedded-opentype'), url('/style/fonts/humanitarian_icons.ttf') format('truetype'), url('/style/fonts/humanitarian_icons.woff') format('woff'), url('/style/fonts/humanitarian_icons.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Overpass';
    src: url('/style/fonts/Overpass-Reg.eot');
    /* IE9 Compat Modes */
    src: url('/style/fonts/Overpass-Reg.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('/style/fonts/Overpass-Reg.woff') format('woff'),
        /* Modern Browsers */
        url('/style/fonts/Overpass-Reg.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('/style/fonts/Overpass-Reg.svg#Overpass-Reg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 600;
}

[class^="icon-"] {
    font-family: 'humanitarian_icons';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online:before {
    content: '\2022';
    color: #0f0;
}

.offline:before {
    content: '\2022';
    color: #999;
}

.topspace {
    margin-top: 3em;
}

.badge {
    background-color: var(--mc-color-tertiary);
    color: white;
    padding: 2px 4px;
    font-size: .8em;
}

.badge-small {
    padding: 1px 2px;
    font-size: .6em;
}

.badge-round {
    shape-outside: circle(50%);
}

.badge-large {
    font-size: 1.2em;
}

.badge:empty {
    display: none;
}

.badge-red {
    background-color: var(--mc-color-secondary-dark);
}

.tick-ok {
    display: inline-block;
    width: 10px;
    height: 8px;
    background-image: url(/images/interface/curvy/ok.png);
    background-repeat: no-repeat;
}

.tick-nok {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-image: url(/images/interface/curvy/nok.png);
    background-repeat: no-repeat;
}

.product-need {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 4px 10px 4px 0;
    padding: 4px;
    position: relative;
    background-color: #222;
    background-repeat: no-repeat;
    background-position: center center;
    vertical-align: middle;
}

.product-need:hover {
    background-color: black;
    /* transform: translateY(6px); */
}

.product-need .needs {
    position: absolute;
    display: inline-block;
    top: -8px;
    right: -4px;
    border: 2px solid var(--background-color);
    padding: 1px 2px;
    font-size: .8em;
    background-color: black;
    line-height: 10px;
    transition: .2s;
}

.product-need:hover .needs {
    transform: scale(1.4) translateY(-10px);
}

.product-need .needs-ok {
    border-color: #0f0;
    background-color: #060;
}

.product-need .needs-nok {
    border-color: #f00;
    background-color: var(--mc-color-secondary-darker);
}

.box {
    background-color: var(--background-color-dark);
    padding: 10px;
    border-top: var(--box-top-border);
}

.box .box {
    border-top: none;
}

.box-smallpadding {
    padding: 6px;
    margin: .2em 0;
}

.box-toppadding {
    padding: 6px 0 0 0;
}

.box-toppadding-huge {
    padding: 20px 0 0 0;
}

.box h1,
.box h2,
.box h3,
.box h4 {
    margin-top: 0;
    padding-top: 0;
}

.box-light {
    background-color: #999;
}

.box-small {
    padding: 4px;
}

.box-border {
    border: 1px solid lightgrey;
}

.noselect,
.unselectable {
    user-select: none;
}

.no-background-color, .no-background-color:hover {
    background-color: transparent;
}

footer.footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4px;
    background-color: var(--background-color-dark);
}

.valign-middle {
    display: table-cell;
    vertical-align: middle;
}

.valign-top {
    vertical-align: top;
}

.valign-middle input {
    vertical-align: middle;
}

.valign-bottom {
    vertical-align: bottom;
}

.tb-padding {
    padding: 10px 0;
}

.clickable {
    cursor: pointer;
}

.lr-space {
    padding: 0 4px;
}

.lr-space-big {
    padding: 0 8px;
}

.lr-space-small {
    padding: 0 2px;
}

.lr-space-tiny {
    padding: 0 1px;
}

.color-nolink {
    color: white;
}

.color-darker {
    color: #666;
}

.color-black {
    color: var(--mc-color-darkest);
}

.color-ok {
    color: #0c0;
}

.color-nok {
    color: #f00;
}

.color-nok-darker {
    color: var(--mc-color-secondary-dark);
}

.blackBg {
    background: none !important;
    background-color: black !important;
}

.modal {
    position: fixed;
    top: 100px;
    margin: auto;
    min-width: 400px;
    border: 5px solid white;
    padding: 10px;
    background-color: #222;
    box-shadow: 0 0 10px var(--mc-color-darkest);
    z-index: 1001;
}

.modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    background-color: rgb(0, 0, 0, .6);
    z-index: 1000;
}

.modal-bg-light {
    background-color: rgb(0, 0, 0, .2);
}

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

.flash-message {
    position: fixed;
    top: -10px;
    left: 50%;
    margin-left: -25%;
    width: 50%;
    min-height: 100px;
    padding: 10px;
    text-align: center;
    border: 2px solid white;
    box-shadow: 0 0 10px var(--mc-color-darkest);
    background-color: var(--mc-color-darkest);
    z-index: 10000;
}

.flash-message-ok {
    background-color: green;
}

.flash-message-nok {
    background-color: var(--mc-color-secondary-dark);
}

.cursor-help {
    cursor: help;
}

.full-width {
    width: 100%;
}

input.full-width,
textarea.full-width {
    box-sizing: border-box;
}

img.full-width {
    height: auto;
}

.full-height {
    height: 100%;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.absolute-full-page {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 99;
}

.columns {
    column-gap: 1em;
}

.columns>* {
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
}

.columns-2 {
    column-count: 2;
}

.flex-columns {
    display: flex;
    gap: 1em;
}

.flex-column-2 {
    flex: 50%;
    justify-content: space-around;
    flex-basis: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.flex-column-3 {
    flex: 33.33333%;
    flex-basis: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.flex-column-4 {
    flex: 25%;
    flex-basis: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.flex-column-2 *,
.flex-column-3 *,
.flex-column-4 * {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

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

.flex-container {
    display: flex;
}

.flex-container-element {
    flex-grow: 1;
    flex-basis: 0;
    justify-content: space-around;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow, .flex-grow-1 {
    flex-grow: 1;
}

.flex-grow-2 {
    flex-grow: 2;
}

.flex-grow-3 {
    flex-grow: 3;
}

.flex-basis {
    flex-basis: 0;
}

.flex-basis-100p {
    flex-basis: 100% !important;
}

.flex-center {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-justify-center {
    justify-content: center;
}

.flex-align-end {
    align-items: flex-end;
}

.flex-align-center {
    align-items: center;
}

.flex-align-self-center {
    align-self: center;
}

.flex-align-self-end {
    align-self: flex-end;
}

.flex-space-between {
    justify-content: space-between;
}

.flex-space-around {
    justify-content: space-around;
}

.flex-space-evenly {
    justify-content: space-evenly
}

.flex-vertical-align {
    display: flex !important;
    align-items: center;
}

.flex-gap {
    gap: .5em;
}

.flex-gap-tiny {
    gap: 1px;
}

.flex-gap-big {
    gap: 2em;
}

.flex-direction-column {
    flex-direction: column;
}

.flex-align-around {
    align-content: space-around;
}

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

.justify-content-right {
    justify-content: right;
}

.info-modal {
    max-height: 80%;
    overflow: auto;
    border: 4px solid #555;
    background-color: black;
    padding: .5em 1em;
    z-index: 10000;
}

.info-modal-bigtext {
    font-size: 200%;
}

.info-modal-normal-size {
    font-size: 100%;
}

.value-update-positive {
    color: darkgreen;
    background-color: darkgreen;
    outline: 2px solid darkgreen;
    color: white;
}

.value-update-negative {
    color: darkred;
    background-color: darkred;
    outline: 2px solid darkred;
    color: white;
}

.wiki {
    transition: 500ms;
}

.wiki:hover {
    background-color: rgb(0, 26, 95);
}

.wiki-info {
    flex-basis: 30px;
    text-align: center;
}

.wiki-info-i {
    border-radius: 100%;
    background-color: rgb(0, 68, 255);
    opacity: 0.8;
}

.wiki:hover .wiki-info-i {
    border-radius: 0;
}

.wiki-info-text {
    display: none;
}

.wiki:hover .wiki-info-text {
    display: inline;
}

@media all and (max-width: 640px) {
    .sticky-top {
        position: static;
    }
}

label {
    margin: 0 !important;
}

label.fixed-width {
    display: inline-block;
    width: 8em;
}

label.fixed-width-small {
    width: 4em;
}

.in-front {
    z-index: 1000;
}

.in-front-2 {
    z-index: 100000;
}

.in-front-3 {
    z-index: 1000000;
}

.play-video {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: darkred;
}

.play-video:hover {
    background-color: var(--mc-color-secondary-dark);
}

.fa-bg {
    position: absolute;
    left: .6em;
    top: .1em;
    color: #616161;
}

.label-beta {
    font-size: 26px;
    padding: 6px;
    position: absolute;
    left: 383px;
    top: 15px;
    color: #ffea00;
}

fieldset legend {
    border: 1px solid white;
    padding: 6px 12px;
    background-color: var(--mc-color-secondary-dark);
    font-weight: bold;
    font-size: 1.2em;
    color: white;
}

.flex-form .wrapper {
    display: flex;
    align-items: center;
}

.flex-form label:not(.internal) {
    min-width: 8em;
}

.flex-form .wrapper input {
    flex: 1 1 auto;
}

.form-invalid {
    outline: 2px solid red;
}

.form-ok {
    outline: 2px solid green;
}

.block {
    display: block;
}

.inline {
    display: inline !important;
}

.font-font-awesome {
    font-family: FontAwesome;
}

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 100s linear infinite;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.no-decoration {
    text-decoration: none;
}

.margin-small {
    margin: .2em;
}

.margin-medium {
    margin: .5em;
}

.padding-small {
    padding: .2em;
}

.padding-medium {
    padding: .5em;
}

.energy-after-dp {
    color: #999;
    font-size: .8em;
}

.not-powered {
    filter: brightness(70%);
}

.text-shadow {
    text-shadow: 1px 1px 0 var(--mc-color-darkest);
}

.responsive-table {
    overflow-x: auto;
}

.normal-line-height {
    line-height: normal !important;
}

.small-line-height {
    line-height: 1em;
}

.medium-line-height {
    line-height: 1.2em;
}

.thumbnail {
    max-height: 200px;
    max-width: 200px;
}

.svg-icon-tiny {
    width: 10px;
    height: 10px;
}

.svg-icon-small {
    width: 15px;
    height: 15px;
}

.svg-icon-medium {
    width: 20px;
    height: 20px;
}

.form-large div,
.form-large td,
.form-large input,
.form-large select {
    font-size: larger;
}

.form-large td {
    padding: 1em;
}

.form-large input[type="submit"] {
    padding: 1.2em !important;
}

.show-mobile {
    display: none;
}

.hover-target .show-on-hover {
    visibility: hidden;
}

.hover-target:hover .show-on-hover{
    visibility: visible;
}

a:hover .highlight-on-hover {
    color: var(--mc-color-tertiary);
}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}

.center-column {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.keyboard-shortcut {
    display: none;
    box-sizing: border-box;
    line-height: .7em;
    font-size: .7em;
    padding: .2em;
    background-color: rgb(0, 0, 0, .2);
    color: rgb(0, 0, 0, .6);
    text-align: center;
    margin-left: 1em;
}

.jail-bars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(to right,
            /* transparent,
            transparent 7%,
            grey 7%,
            white 9%,
            grey 11%); */
            transparent,
            transparent 1%,
            grey 1%,
            white 3%,
            grey 5%,
            transparent 5%,
            transparent 9.4%);

}

.info_item,
.info_item_large {
    flex-grow: 1;
    flex-basis: 0;
    justify-content: space-around;
    min-width: 18em;
    font-size: .8em;
    text-align: center;
    background-color: var(--background-color-dark);
    margin: 0 1px 1px 0;
    padding: .5em;
    text-decoration: none;
    transition: .2s;
}

.info_item:hover,
.info_item_large:hover {
    background-color: #111;
}

.max-wh-100p {
    max-width: 100%;
    max-height: 100%;
}

/* Checkbox switch */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  vertical-align: middle;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--mc-color-secondary-dark);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--mc-color-main);
}

input:focus + .slider {
  box-shadow: 0 0 2px var(--mc-color-secondary-dark);
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

.break-word {
    word-break: break-word;
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

/* Bootstrap overrides */

.btn {
    text-decoration: none;
}

/* Table sorter */

table.tablesorter thead tr .header {
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table.tablesorter thead tr .headerSortUp {
    background-image: url(/javascript/jquery/css/asc.gif);
}

table.tablesorter thead tr .headerSortDown {
    background-image: url(/javascript/jquery/css/desc.gif);
}

table.tablesorter th {
    padding-right: 22px;
}

.product-dropdown {
    display: none;
}

.responsive-logout {
    display: none;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    position: absolute;
    min-width: 120px;
    background-color: #555;
    color: var(--mc-color-lightest);
    text-align: center;
    padding: 5px 0;
    z-index: 1;
}

.tooltip-red .tooltip-text {
    background-color: red;
}

.tooltip-top {
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-right {
    top: -5px;
    left: 125%;
}

.tooltip-bottom {
    top: 135%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-left {
    top: -5px;
    bottom: auto;
    right: 128%;
}

.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip .tooltip-right.tooltip-text::after {
    left: unset;
    top: 50%;
    right: 100%;
    border-color: transparent #555 transparent transparent;
}

.tooltip .tooltip-bottom.tooltip-text::after {
    top: unset;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent #555 transparent;
}

.tooltip .tooltip-left.tooltip-text::after {
    top: 50%;
    left: 100%;
    right: unset;
    border-color: transparent transparent transparent #555;
}

.tooltip-red .tooltip-text::after {
    border-color: red transparent transparent transparent;
}

.tooltip-red .tooltip-right.tooltip-text::after {
    border-color: transparent red transparent transparent;
}

.tooltip-red .tooltip-bottom.tooltip-text::after {
    border-color: transparent transparent red transparent;
}

.tooltip-red .tooltip-left.tooltip-text::after {
    border-color: transparent transparent transparent red;
}

.graph-min-height {
    min-height: 400px;
}

/* Media queries */

@media all and (max-height: 400px) {
    /* Hide product selector and show dropdown instead */
    .product-selector {
        display: none;
    }

    .product-dropdown {
        display: block;
    }

    .responsive-logout {
        display: block;
    }

    .divider {
        display: none;
    }

    .hide-medium {
        display: none;
    }

    .show-medium {
        display: inline;
    }
}

@media all and (max-height: 220px) {
    .hide-small {
        display: none;
    }

    .pl_row {
        padding: 0 4px;
    }
}

@media print {
    .no-print,
    .no-print * {
        display: none !important;
    }
}

#toast-container>div {
    opacity: .95;
}

.layout {
    box-sizing: border-box;
}

.layout-top {
    grid-area: top;
    margin: 4px 4px 0 4px !important;
}

.layout-menu {
    display: block;
    grid-area: menu;
    overflow: auto;
    margin-left: 4px;
}

.layout-main {
    display: block;
    grid-area: main;
    margin-right: 4px;
}

/*
.layout-right {
    display: block;
    grid-area: right;
    overflow: auto;
    margin-right: 4px;
}
* */

.layout-footer {
    display: block;
    position: relative;
    grid-area: footer;
    margin: 0 4px 4px 4px !important;
}

.layout-mobile-nav {
    display: none;
    grid-area: mobile-nav;
    z-index: 10000;
}

.layout-container {
    display: grid;
    grid-template-areas:
        'top top'
        'menu main'
        'footer footer';
    grid-gap: 4px;
    grid-template-columns: var(--menu-width) auto;
    grid-template-rows: 120px auto minmax(150px, 28%);
    max-width: 1300px;
    margin: 0 auto;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
}

.layout-container.full-width-layout {
    max-width: initial;
}

.container_top {
    background: url(/images/skyline-header.png), var(--top-background);
    background-size: contain;
    background-position: left 0 bottom 36px, left 0 bottom 0;
    background-repeat: repeat-x;
}

.container_top.news-event-breaking {
    background-image: linear-gradient(#aa0000, #740000);
}

.container_top.news-event-flash {
    background-image: linear-gradient(#99ccff, #0281ff);
}

.container_top.news-event-bonus {
    background-image: linear-gradient(#ff9900, #ffcc00);
}

.logo-top {
    grid-area: logo-top;
    display: flex;
    justify-content: space-between;
}

.top-marquee a.profile {
    padding: 0 2px;
    border-radius: 0;
}

.top-marquee-info {
    grid-area: marquee-info;
    display: flex;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 4px;
}

.top-marquee-info-clock {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-menu {
    grid-area: stats-menu;
    height: 40px;
    padding: 0;
    background-color: rgba(0, 0, 0, .8);
}

.stats-menu-container {
    display: block;
    padding: 4px var(--gap);
    text-decoration: none;
    transition: .4s;
    border: 1px solid transparent;
}

.stats-menu-container:hover {
    background-color: rgba(0, 0, 0, .7);
    border-bottom: 1px solid #F6CF5C;
}

.stats-menu-header {
    font-size: 10px;
    color: #F6CF5C;
}

.stats-menu-value {
    font-size: 12px;
    /*font-family: BebasNeueRegular;*/
}

.top-time {
    background: rgba(0, 0, 0, .2);
    padding: 2px 4px;
}

.top-marquee {
    grid-area: marquee;
    position: relative;
    white-space: nowrap;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    text-overflow: ellipsis;
    background-color: rgba(0, 0, 0, 0.5);
}

.top-marquee .lnf-message {
    margin-left: var(--gap);
}

.players-online-container {
    padding: 0 .3em;
}

.top-marquee img {
    max-height: 1em;
    margin: 0;
    padding: 0;
}

.mobile-menu {
    grid-area: mobile-menu;
}

.lnf-header {
    font-size: 12px;
}

@keyframes newstickermarquee {
    0% {
        left: 0;
    }

    100% {
        transform: translate(-3000px, 0);
    }
}

.top-logo {
    grid-area: logo;
    padding: 4px;
}

.top-logo img {
    height: 40px;
    padding: 2px;
    margin-bottom: -4px;
}

.top-header-info {
    grid-area: header-info;
}

.top-profile {
    grid-area: profile;
    position: relative;
    padding: 4px;
    align-self: center;
    justify-self: end;
    display: inline-block;
}

.top-profile-player-container {
    position: relative;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    line-height: 40px;
    padding: 0 20px;
    min-width: 80px;
}

.top-profile-player-container:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.top-profile-avatar {
    float: left;
    box-sizing: border-box;
    border: 1px solid rgb(0, 0, 0, .8);
    width: 40px;
    height: 40px;
    margin: 0 10px 0 -20px;
    border-radius: 100%;
    background-size: cover;
}

.top-profile-player {
    display: inline-block;
    text-decoration: none;
}

.top-profile:hover .top-profile-player-container {
    min-width: 120px;
}

.top-profile-player-messages {
    position: absolute;
    top: -4px;
    right: -2px;
    z-index: 1000;
    line-height: 1em;
    border-radius: 50%;
    padding: 4px;
}

.top-profile-menu {
    display: none;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 0 0 20px 20px;
}

.top-profile-menu a.top-profile-menu-link {
    display: flex;
    gap: var(--gap);
    align-items: center;
    padding: 10px;
    line-height: 1.5em;
    text-decoration: none;
    white-space: normal;
}

.top-profile-menu a.top-profile-menu-link .fa {
    font-size: 120%;
    text-align: center;
    transition: .1s;
    transition-timing-function: ease-in-out;
}

.top-profile-menu a.top-profile-menu-link:hover .fa {
    color: yellow;
    transform: scale(1.2);
}

.top-profile-menu a.top-profile-menu-link:last-child {
    border-radius: 0 0 20px 20px;
}

.top-profile-menu a:hover {
    background-color: var(--mc-color-secondary-dark);
}

.top-profile:hover .top-profile-menu {
    display: block;
    position: absolute;
}

.top-profile:hover .top-profile-player-container {
    border-radius: 20px 20px 0 0;
}

.message-counter {
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(255, 0, 0, 0.5);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 10px;
}

.breaking-news,
.news-flash {
    display: none;
    float: right;
    background-color: darkred;
    font-weight: bolder;
    padding: 2px 4px;
}

.news-flash {
    background-color: #005db9;
}

.news-event-breaking .breaking-news {
    display: inline-block;
}

.news-event-flash .news-flash {
    display: inline-block;
}

.news-event-flash .news-bonus {
    display: inline-block;
}

.mobile-player-info,
.mobile-player-extrainfo {
    background-color: rgb(0, 0, 0, .8);
    padding: .2em .5em;
    z-index: 10;
}

.mobile-nav-button {
    position: relative;
    margin: auto;
    width: 90%;
    height: 3em;
}

.animated.fastest {
    -webkit-animation-duration: 250ms;
    animation-duration: 250ms;
}

.pl_row {
    padding: 4px 2px;
}

.newmessage {
    z-index: 1001;
}

.darker-bg,
.selected {
    background-color: rgba(0, 0, 0, .5);
}

.darker-bg-border {
    border: 4px solid transparent;
}

.nmc {
    height: 100%;
    display: grid;
    grid-template-areas:
        "nmc-chat-header nmc-users-header nmc-channels-header"
        "nmc-chat nmc-users nmc-channels"
        "nmc-chat-input nmc-users nmc-channels";
    grid-template-columns: auto 175px 165px;
    grid-template-rows: 20px auto 40px;

    font-size: 13px;
    line-height: 1.3em;
}

.nmc-container a {
    text-decoration: none;
}

/* @TODO: FIX MAX-HEIGHT */
.nmc-container {
    overflow: auto;
}

.nmc header {
    padding: .1em .5em;
}

.nmc-content {
    padding: .5em;
}

.nmc-container-chat-header {
    grid-area: nmc-chat-header;
}

.nmc-container-chat {
    grid-area: nmc-chat;
    background-color: var(--mc-color-secondary-light);
}

.nmc-container-chat .cm_time {
    float: left;
    width: 40px;
}

.nmc-container-chat .cm_sender {
    float: left;
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nmc-container-chat .cm_message {
    margin-left: 100px;
    white-space: pre-wrap;
}

.cm_metadata,
.nmc-container-chat .cm_time {
    color: var(--mc-color-secondary-darkest);
}

.cm_container {
    clear: both;
}

.nmc-container-chat-input {
    grid-area: nmc-chat-input;
    background-color: var(--mc-color-secondary-darker);
}

.nmc-container-chat-input form {
    display: flex;
}

.nmc-container-users-header {
    grid-area: nmc-users-header;
}

.nmc-container-users {
    grid-area: nmc-users;
    background-color: var(--mc-color-secondary-dark);
}

.nmc-container-channels-header {
    grid-area: nmc-channels-header;
}

.nmc-container-channels {
    grid-area: nmc-channels;
    background-color: var(--mc-color-secondary-darker);
}

.lnf-header {
    text-transform: uppercase;
    border-bottom: 1px solid var(--mc-color-secondary-darkest);
    background-color: var(--background-color-dark);
    text-shadow: 1px 1px 0 var(--mc-color-darkest);
    color: #999;
}

.lnf-header i {
    color: #999;
    padding-left: 4px;
}

.lnf-header i:hover {
    color: white;
}

.nmc-action-icon {
    padding-left: .25em;
}

/* @TODO: fix JS */
.nmc-container-lnf-footer:hover {
    background-color: #4e6d8c;
}

.chat-channel-content ul,
.chat-user-content ul {
    padding: 0;
    margin: 0;
}

.chat-channel-content li,
.chat-user-content li {
    display: flex;
    gap: .2em;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 2px;
}

.chat-user-content li a {
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-active {
    color: #ff0 !important;
    background-color: black;
}

.channel-offline {
    color: #aaa;
}

.channel-count {
    color: yellow;
    cursor: pointer;
}

.chat-message {
    padding: 4px;
}

.chat-message-input {
    width: 100%;
    background-repeat: no-repeat;
    text-indent: 20px;
    background-position: 4px center;
}

.chat-status {
    padding-top: 2px;
}

.lnf-container.breaking-news {
    background-color: #f00;
    color: white;
    text-align: center;
    font-size: 1.5em;
}

.lnf-container.news-flash {
    background-color: #090;
    color: white;
    text-align: center;
    font-size: 1.5em;
}

.breaking-news .lnf-content,
.news-flash .lnf-content {
    line-height: 1.5em;
    overflow: hidden;
}

.total-unread {
    position: absolute;
    color: yellow;
    font-size: 11px;
}

.total-unread-chat {
    right: 20px;
}

.total-unread-responsive-buttons {
    right: 1em;
}

.nmc-header-button {
    text-decoration: none;
    padding: 0 6px;
    margin-left: .5em;
}

.chat-history-delimiter {
    border-top: 1px solid var(--mc-color-secondary-darker);
    padding-top: .2em;
    margin-top: .2em;
}

.chat-history {
    filter: sepia(100%) opacity(75%);
}

.nmc-container {
    position: relative;
}

.nmc-container-users a,
.nmc-container-channels a {
    background-color: var(--mc-color-secondary-darker);
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    padding: 0 6px;
    transition: .2s;
}

.nmc-container-users a:hover,
.nmc-container-channels a:hover {
    background-color: #700;
}

/* Modals */
footer .modal {
    display: none;
    position: absolute;
    border: 4px solid white;
    background-color: var(--mc-color-darkest);
    padding: 10px;
    top: 1em;
    left: 200px;
    z-index: 100;
}

footer .modal-overlay {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: black;
    filter: opacity(30%);
}

.user-enters {
    color: #ff0;
}

.usermenu {
    position: relative;
    border: 1px solid var(--background-color-dark);
    background-color: var(--mc-color-darkest);
    padding: 4px;
    z-index: 100;
    overflow: auto;
}

.usermenu-name {
    padding: 4px;
    font-weight: bold;
}

.chat-language-flag {
    filter: opacity(75%);
    vertical-align: text-bottom;
    margin-left: 1em;
}

.typing-indicator {
    position: relative;
    display: inline-block;
    padding-left: .2em;
}

.typing-indicator span {
    height: 3px;
    width: 3px;
    margin: 0 1px;
    background-color: #fff;
    display: inline-block;
    border-radius: 50%;
    opacity: 0.6;
}

.typing-indicator span:nth-child(1) {
    animation: 1.5s blink infinite .5s;
}

.typing-indicator span:nth-child(2) {
    animation: 1.5s blink infinite 1s;
}

.typing-indicator span:nth-child(3) {
    animation: 1.5s blink infinite 1.5s;
}

.speech-bubble {
    position: relative;
    background: var(--mc-color-main);
    border-radius: .4em;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: var(--mc-color-main);
    border-bottom: 0;
    border-left: 0;
    margin-left: -10px;
    margin-bottom: -20px;
}

.appearance-none {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@keyframes blink {
    50% {
        opacity: 1;
    }
}

.overflow {
    overflow: auto;
}

.achievement {
    font-weight: bold;
}

.achievement-miniconomy {
    color: var(--mc-color-achievement-miniconomy);
}

.achievement-diamond {
    color: var(--mc-color-achievement-diamond);
}

.achievement-gold {
    color: var(--mc-color-achievement-gold);
}

.achievement-oil {
    color: var(--mc-color-achievement-oil);
}

.achievement-clay {
    color: var(--mc-color-achievement-clay);
}

.scale-11 {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/***********************************/
/************  MOBILE  *************/
/***********************************/
@media only screen and (max-width: 767px) {
    body {
        -webkit-text-size-adjust: none;
    }

    .hide-mobile {
        display: none;
    }

    .show-mobile {
        display: block;
    }
    
    .layout-container {
        display: flex;
        flex-direction: column;
    }

    .layout-top {
        position: sticky;
        top: 0;
        z-index: 10000;
        font-size: .9em !important;
    }

    .top-profile-player-container {
        line-height: 1.5em;
        border-radius: 20px;
    }
    
    .top-profile-avatar {
        width: 20px;
        height: 20px;
    }    

    .layout-main {
        padding: 4px 4px 40px 4px;
        overflow: initial;
    }

    .layout-menu {
        margin-bottom: 42px;
    }
    
    .layout-footer {
        box-sizing: border-box;
        height: calc(100% - 80px - 3em);
    }

    .layout-mobile-nav {
        height: 3em;
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
    }

    .top-logo img {
        width: 40vw;
        height: auto;
        padding: 0px;
    }

    .columns {
        columns: 1 !important;
    }

    .flex-columns {
        display: block;
    }

    .menu .list-group-item i {
        font-size: max(5vh, 100%);
    }

    .nmc {
        grid-template-areas:
            "nmc-chat-header nmc-chat-header"
            "nmc-chat nmc-chat"
            "nmc-chat-input nmc-chat-input"
            "nmc-users-header nmc-channels-header"
            "nmc-users nmc-channels";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 20px 1fr 40px 20px 1fr;
    }

    .nmc .cm_sender {
        width: auto;
        padding-right: 1em;
        max-width: 130px;
        font-weight: bold;
    }

    .nmc .cm_sender::after {
        content: ": ";
    }

    #lotselector-content {
        flex-wrap: wrap;
    }

    #lotselector-selector #selectform {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .big-dynamic:not(input) {
        font-size: 5vw;
        line-height: 5vw;
    }

    .roundbottom-hide-mobile {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .scroll-touch {
        -webkit-overflow-scrolling: touch;
    }

    .box_menu_item:hover .keyboard-shortcut {
        display: none;
    }

    .container_top {
        grid-template-columns: 100px auto;
    }

    .top-marquee {
        overflow-y: scroll;
        text-overflow: initial;
    }

    #products,
    .product-selector,
    .menu,
    .nmc {
        height: 100%;
    }
    
    .product-big {
        height: 30px !important;
    }

    .product-bigger {
        height: 50px !important;
    }
    
    .info_item,
    .info_item_large {
        min-width: 10em;
    }
}