@font-face {
    font-family: Pixelforce;
    src: url(./../assets/images/background/PixelForce.ttf);
}

@font-face {
    font-family: CC;
    src: url(./../assets/images/background/cc.ttf);
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_scrollbar2 */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: #222;
    border-radius: 10px;

}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
  border: solid 1px #111;
  width: 15px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #888;

}


*:focus {outline:none}

canvas {
  /*display: none !important;*/
}

div,
span,
label,
.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 */
}

body {
    background-color: black;
    overflow: hidden;
    font-family: PixelForce, arial;
    margin: 0px;
}

#game_title {
    color: white;
    font-size: 40px;
    font-family: MONOSPACE;
}

#welcome_container {
    background-size: cover;
    background-image: url(./../assets/images/background/homepage.png);
    position: absolute;
    top: 0px;
    padding-top: 10px;
    width: 100%;
    height: 100%;
    margin: 0px;
    text-align: center;
    background-color: black;
}

#name_input_container {
    font-family: monospace;
    margin-top: 10px;
    display: none;
}

#game_canvas {
    /*  width: 100%;
      height: 100%;
    */  

    cursor: initial;
    top: 50%;
    position: absolute;
    transform: translate3d( -50%, -50%, 0 );
    left: 50%;

    margin: 0px;
    touch-action: none;
    display: none !important;
}

#choose_class_container {
    color: white;
    margin: auto;
    position: absolute;
    top: 150px;
    left: 0px;
    right: 0px;
}

.character_class {
    border: solid 1px gray;
    padding: 20px;
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: top;
}

.character_class:hover {
    background-color: steelblue;
    cursor: pointer;
}

.disconnected_msg {
    display: none;
    position: absolute;
    width: 100%;
    font-size: 24px;
    color: white;
    background-color: black;
    z-index: 10;
    text-align: center;
    padding: 10px;
    top: 200px;
    font-family: monospace;
}

#chat_window_container {
    width: 300px;
    height: 210px;
    position: absolute;
    left: 20px;
    bottom: 285px;
}

#enter_to_chat {
    text-align: left;
    width: 100%;
    color: #ccc;
    position: absolute;
    bottom: 0px;
}

#chat_text_input {
    padding: 2px 5px;
    font-size: 14px;
    width: 175px;
    position: absolute;
    bottom: 0px;
    background-color: #999;
    opacity: 0.7;
    border: none;
    color: white;
}

#server_full_message {
    margin-top: 50px;
    color: red;
    font-size: 20px;
    width: 300px;
    margin: auto;
    padding-top: 50px;
}

#chat_text_input:focus {
    outline-width: 0;
}

.chat_message {
    color: white;
    font-size: 14px;
}

.chat_user {
    margin-right: 10px;
    color: #999;
}

#chat_message_list {
    position: relative;
    overflow-y: hidden;
    height: 190px;
    bottom: 20px;
}

#weapon_upgrades_container {
    padding: 10px;
    position: absolute;
    width: 100%;
    color: #aaa;
    width: 200px;
    height: 500px;
    overflow: hidden;
    bottom: 220px;
}

#upgrades_available_notice,
#upgrades_table {
    background-color: black;
    cursor: pointer;
    font-family: monospace;
}

#upgrades_table {
    opacity: 0.8;
    position: absolute;
    width: 200px;
    bottom: 40px;
    z-index: 10;
}

#upgrades_available_notice {
    display: inline-block;
    padding: 5px 10px;
    font-size: 15px;
    background-color: blueviolet;
    border: solid 3px black;
    width: 175px;
    position: absolute;
    bottom: 0px;
}

.upgrade_name {
    padding: 15px 5px;
}

#upgrades_remaining_count {
    display: inline-block;
    font-size: 12px;
    padding: 5px 8px;
    background-color: gray;
    color: white;
}

#upgrades_remaining_count.usable {
    background-color: #078c07;
    color: white;
    border: solid 2px;
    border-color: yellow;
}

.weapon_type {
    float: left;
    padding: 15px;
}

.weapon_type img {
    width: 32px;
    height: 32px;
    background-color: currentColor;
    padding: 5px;
    background-color: #333;
}

.upgrade_list {
    height: inherit;
    display: inline-block;
    width: calc(100% - 72px);
}

.upgrade_item {
    display: inline-block;
    height: inherit;
    width: 100%;
}

.upgrade_item.acquired {
    /*display: none;*/
/*            border: solid 1px gray;
    background-color: gray;
    color: white;
*/
}

.upgrade_description {
    color: lightgray;
    display: none;
}

.weapon_upgrade_column {
    height: 80px;
    overflow: hidden;
    border-bottom: solid 1px #222;
}

.weapon_upgrade_column:hover {
    border: solid 1px blueviolet;
    color: blueviolet;
}

.name_input_container {
    margin-top: 50px;
    margin-bottom: 50px;
}

.instruction {
    height: 30px;
    /*float: left;*/
    display: inline-block;
}

.control_key {
    border: solid 1px #333;
    color: gray;
    padding: 2px 5px;
    margin: 5px;
    border-radius: 5px;
}

.controls_label {
    font-size: 14px;
    font-family: arial;
    width: 400px;
    height: 50px;
    margin: auto;
}

.links_label {
    margin-top: 30px;
}

.links_label a {
    color: gray;
    /*text-decoration: none;*/
}

.links_label a:hover {
    text-decoration: underline;
}

#bomb_countdown {
    font-size: 60px;
    color: red;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#player_level {
    position: absolute;
    z-index: 2;
    color: #555;
    margin-left: 40%;
}

.player_name {
    min-width: 150px;
    max-width: 150px;
    display: inline-block;
    text-align: left;
    font-family: 'cc';
}

.player_wave {
    margin-left: 20px;
}

#in_game_message {
    background-color: black;
    position: absolute;
    width: 600px;
    height: 30px;
    z-index: 3;
    margin-left:-300px;
    left:50%;
    text-align: center;
    color: #ccc;
    font-family: monospace;
    font-size: 24px;
    top: 24px;
}

.btn {
    font-size: 30px;
    background-color: #888;
    color: white;
    border-radius: 5px;
    padding: 5px 10px ;
    text-decoration: none;
}

.loading_label {
    color: white;
    font-family: arial;
    font-size: 40px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#play_btn {
    background-color: #419753;
    font-family: monospace;
    font-size: 30px;
}

#play_btn:hover {
    background-color: #246431;
}


.homepage_title {
    font-size: 80px;
    margin: 10px;
    font-family: fantasy;
    color: gray;
}

#title_description, #question {
    font-size: 20px;
    color: lightgoldenrodyellow;
    margin-top: 0px;
    font-family: arial;
}

#question input[type='radio'] {
    height: 16px;
}

#player_map {
    position: absolute;
    width: 200px;
    height: 200px;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    background-color: black;
    opacity: 0.6;
}

#player_position,
.human_position,
.vampire_position {
    position: absolute;
    left: 50%;
    top: 20px;
    color: white;
    width: 3px;
    height: 3px;
}

#player_position {
    background-color: green;
    width: 5px;
    height: 5px;
}

.human_position {
    background-color: white;
}

.vampire_position {
    background-color: red;
}

.title_background {
    display: block;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

#title_screen_container {
    background: linear-gradient(rgba(0, 0, 50, 0.85), rgba(0, 0, 0, 0.85));
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding: 100px 0px;
    height: 100%;
    display: block;
    position: absolute;
    width: 100%;
    background-color: #1d1d79;
}

#name_input {
    display: none;
    font-size: 20px;
    padding: 3px 10px;
    border: solid 2px #777;
    background-color: #222;
    color: #ddd;
    width: 180px;
}

.player_score_row:hover {
    background-color: maroon; 
    /*opacity: 0.8;*/
}

#left_column_container {
    float: left;
    width: 230px;
    margin: 10px;
}

#how_to_play, #changelog {
    background-color: black;
    opacity: 0.5;
    color: #aaa;
    text-align: left;
    padding: 5px 20px;
    margin-bottom: 20px;
    font-size: 16px;
}

.instruction_list {
    padding: 0px 20px;
}

#player_experience {
    margin-bottom: 5px;
    display: block;
    height: 30px;
    font-family: monospace;
}

#player_experience_bar {
    background-color: lightgray;
    border: solid 1px gray;
    width: 50px;
    float: left;
    height: 20px;
    width: calc(100% - 100px);
    margin-left: 10px;
    position: relative;
}

#player_experience_bar_fill {
    position:absolute;
    background-color: steelblue;
    top:0;
    bottom:0;
    left:0;
    width: 100%;
}

#player_stamina {
    display: block;
    height: 30px;
    font-family: monospace;
}

#player_stamina_bar {
    border: solid 1px gray;
    width: 50px;
    float: left;
    height: 15px;
    width: calc(100% - 78px);
    margin-left: 10px;
    position: relative;
}

#player_stamina_bar_fill {
    position:absolute;
    background-color: #c6ea5d;
    top:0;
    bottom:0;
    left:0;
    width: 100%;
}

.fb-like {
    position: absolute !important;
    margin: 30px;
    z-index: 10;
}

#leaderboard {
    position: absolute;
    padding: 10px;
    background-color: #222;
    opacity: 0.9;
    color: #FFF;
    font-size: 16.1px;
    top: 70px;
    right: 25px;
    font-weight: bold;
    text-align: left;
    display: none;
    max-height: 300px;
    overflow-y: scroll;
}

#leaderboard .title {
    font-family: 'cc';
    font-size: 25px;
    display: block;
    margin-bottom: 5px;
    text-align: center;
}

#leaderboard .stats {
    margin-right: 10px;
    font-size: 16px;
    font-family: 'cc';
}

.ffa_leaderboard,
.coop_leaderboard {
    display: none;
}

body[data-mode='hardcore'] .ffa_leaderboard,
body[data-mode='coop'] .ffa_leaderboard,
body[data-mode='final'] .ffa_leaderboard,
body[data-mode='ffa'] .ffa_leaderboard {
    display: block;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    white;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    white;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    white;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    white;
}

.resources {
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    display: block;
    margin-top: 4px;
    z-index: 2;
    font-size: 12px;
}

#base_hud .resources {
    position: absolute;
    font-size: 18px;
    left: 20px;
    width: 220px;
    padding: 5px 10px;
    margin-left: -10px;
}

.resource_count {
    float: right;
    color: gold;
    font-weight: bold;
}

#game_caption {
    margin-top: 0px;
    margin-bottom: 0px;
    /*color: #7dffda;*/
    color: white;
    font-size: 48px;
    font-family: monospace;
}

#game_caption.dead {
    font-size: 48px;
}

#upgrade_menu,
#building_menu_tooltip {
    display: none;
    position: absolute;
    width: 300px;
    padding: 15px;
    background-color: #333;
    color: white;
    font-size: 18px;
    left: 0px;
    z-index: 10;
}

#building_menu_tooltip {
    z-index: 10;
}

#upgrade_menu {
    bottom: 0px;
}

.stats_type, .stats_before, .stats_after {
    display: inline-block;
}

.stats_type {
    margin-right: 20px; 
    width: 100px;
}

.stats_before {
    margin-right: 10px;
    width: 50px;
    float: right;
}

.stats_after {
    float: right;
}

.stats_after.changed {
    color: #3df73d;
}

.table_row {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table_col {
    display: table-cell;
    vertical-align: top;
    padding: 5px;
}

#upgrade_btn {
    background-color: #006e68;
}

#upgrade_btn, #sell_btn {
    border: solid 1px #222;
    padding: 10px;
    height: 60px;
    text-align: center;
    cursor: pointer;
}

#sell_btn {
    background-color: #666;
}

#upgrade_btn:hover {
    background-color: #275a58 !important;
}

#sell_btn:hover {
    background-color: #555;
}

#sell_btn.disabled {
    background-color: #222;
    pointer-events:none;
}

.action_label {
    font-size: 20px;
    font-family: 'cc';

    margin-bottom: 5px;
    display: block;
}

.entity_stats_target_growth {
    margin: 15px 15px;
    text-align: left;
    font-size: 14px;
}

.entity_name {
    font-size: 20px;
    font-weight: bold;
    background-color: #333;
    text-align: left;
    left: 0px;
    top: -45px;
    position: absolute;
    padding: 10px;
    width: 310px;
    border-bottom: solid 1px #555;
}

.entity_id {
    font-size: 14px;
}

#building_menu_tooltip .entity_name {
    position: relative;
    top: 0px;
    padding: 0px;
    margin-bottom: 10px;
}

.entity_description {
    color: #aaa;
    font-size: 14px;
}

.upgrade_cost {
    font-size: 16px;
}

.upgrade_cost_gold {
    color: gold;
    font-weight: bold;
}

#building_menu_tooltip .upgrade_cost_gold {
    float: left;
    margin-right: 10px;
}

.upgrade_cost_energy {
    color: #2cbc7b;
    font-weight: bold;
}

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

.tooltip.top {
    padding: 5px 0;
    margin-top: -3px;
}

.tooltip.top .tooltip-arrow {
    display: none;
    bottom: -15px;
    left: 50%;
    margin-left: -15px;
    border-width: 15px 15px 0;
    border-top-color: #333;
}

.tooltip-arrow {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.upgrade_cost .missing {
    color: red;
}

#upgrade_btn.disabled {
    cursor: not-allowed !important;
    background-color: black;
    opacity: 0.5 !important;
}

#entity_health {
    text-align: center;
    border: solid 2px;
    margin: 10px;
    padding: 10px;
}

.main_action_menu {
    z-index: 4;
    display: none;
    position: absolute;
    bottom: 25px;
    right: 25px;
}

.main_action_btn {
    border: solid 3px black;
    padding: 5px 10px;
    text-align: center;
    cursor: pointer;
    background-color: #fe6b1d;
    color: white;
    font-size: 1.5em;
}

.main_action_btn:hover {
    background-color: #9e3802;
}

#battle_btn,
#teleport_base_btn {
    display: none;
    bottom: unset;
    top: 4px;
    background-color: #0054ff;
    border: solid 3px black;
    font-size: 25px;
}

#battle_btn:hover,
#teleport_base_btn:hover,
.ffa_play_again_btn:hover,
.return_to_hangar_btn:hover {
    background-color: #274684;
}


.base_menu#top_black,
.base_menu#bottom_black {
    width: 100%;
    height: 40px;
    background-color: black;
    position: absolute;
    left: 0px;
}

#hangar_background {
/*    position: absolute;
    width: 100%;
    height: 100%;
    background-color: gold;
*/}

.base_menu#bottom_black {
    bottom: 0px;
}

#repair_menu,
#error_menu {
    text-align: center;
    display: none;
    color: lightcoral;
    position: absolute;
    left: 50%;
    top: 120px;
    font-size: 1.5em;
}

#repair_menu_content,
#error_menu_content {
    background-color: #361c1c;
    position: relative;
    left: -50%; 
    opacity: 1;
    padding: 10px 20px;
    border: solid 3px black;
    font-size: 20px;
    width: 350px;
}

#error_menu_content {
    /*background-color: #222; */
}

#repair_menu_content {
    z-index: 5;
}

#player_inventory_menu {
    position: absolute;
    bottom: 0px;
    display: none;
    width: 100%;
    text-align: center;
    background-color: black;
}

img[src=""] {
   display: none;
}


#player_inventory {
    position: relative;
    height: 40px;
    display: inline-table;
    margin: 7px;
}

.player_inventory_slot {
    text-align: center;
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 5px;
    display: inline-block;
    margin: 4px;
    background-color: #444;
    opacity: 0.8;
}

.player_inventory_slot[data-slot-id='0']:before {
    content: '0';
}

.player_inventory_slot[data-slot-id='1']:before {
    content: '1';
}

.player_inventory_slot[data-slot-id='2']:before {
    content: '2';
}

.player_inventory_slot[data-slot-id='3']:before {
    content: '3';
}

.player_inventory_slot[data-slot-id='4']:before {
    content: '4';
}

.player_inventory_slot[data-slot-id='5']:before {
    content: '5';
}

.player_inventory_slot[data-slot-id='6']:before {
    content: '6';
}

.player_inventory_slot[data-slot-id='7']:before {
    content: '7';
}

.player_inventory_slot[data-slot-id='8']:before {
    content: '8';
}

.player_inventory_slot[data-slot-id='9']:before {
    content: '9';
}

.player_inventory_slot[data-slot-id='p']:before {
    content: 'p';
}

.player_inventory_slot[data-slot-id='o']:before {
    content: 'o';
}

.player_inventory_slot[data-slot-id='i']:before {
    content: 'i';
}

.player_inventory_slot[data-slot-id='u']:before {
    content: 'u';
}

.player_inventory_slot[data-slot-id='y']:before {
    content: 'y';
}

.player_inventory_slot[data-slot-id='s']:before {
    /*content: 's';*/
}

.player_inventory_slot:after {
    content: attr(data-content);
}


.player_inventory_slot:before {
    color: #888;
    text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black;
    z-index: 1;
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 14px;
    font-family: monospace;
    font-weight: bold;
}

.player_inventory_slot:after {
    color: #ddd;
    text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black;
    z-index: 2;
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 14px;
    font-family:   monospace;
}

.player_inventory_slot:hover {
    background-color: #777;
}

.player_inventory_slot img {
    margin-top: 14px;
    width: 20px;
    height: 20px;
}

.bar_fill {
    position:absolute;
    background-color: darkgray;
    top:0;
    bottom:0;
    left:0;
    width: 100%;
    opacity: 0.9;
}

.level_stat .bar_fill {
    background-color: #df9a0f; 
}

.health_stat .bar_fill {
    background-color: #2cbc7b; 
}

.shield_stat .bar_fill {
    background-color: #1080c2; 
    width: 0%;
}

.energy_stat .bar_fill {
    background-color: #ec6627; 
    width: 0%;
}

.bar_container {
    width: 150px;
    height: 14px;
    border: solid 2px #444;
    position: relative;
    float: right;
    margin-left: 10px;
    text-align: center;
}

.bar_label {
    color: white;
    text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black;
    position: absolute;
    right: 5px;
    top: 2px;
    z-index: 2;
}

.stat_container .label {
    float: left;
    font-family: 'cc';
    font-size: 18px;
}

#base_hud {
    display: none;
}

#player_stats {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 10px;
    color: #FFF;
    display: none;
}

#player_stats .resources {
    display: block;
    font-size: 25px;
    font-family: 'cc';
}

#player_stats .tower_stat .label,
#player_stats .speed_stat .label {
    float: none;
}

#player_stats .shield_stat {
    /*display: none;*/
}

#player_stats.base {
    top: 50px;
}

#player_stats .tower_stat,
#player_stats .speed_stat  {
    display: none;
}

#player_stats.base .tower_stat,
#player_stats.base .speed_stat  {
    display: block;
}

#player_stats.base .speed_stat_value  {
    display: inline-block;
    margin-left: 25px;
}

#player_stats .tower_count_value  {
    display: inline-block;
    margin-left: 14px;
}

#player_stats.base .resources {
    display: none;
}


.stat_container {
    height: 20px;
    display: block;
    font-size: 12px;
}

.energy_stat {
    display: none;
}


.entity_name_label,
.entity_level {
    display: inline-block;
}

.entity_level {
    color: darkorange;
    font-size: 20px;
}


#ship_stats {
    display: block;
    top: 70px;
    position: absolute;
    color: white;
    left: 25px;
    width: 200px;
    font-size: 14px;
}

.ship_stat {
    float: right;
}

.building_count {
    color: #888;
    float: right;
    font-size: 20px;
    line-height: 25px;
}

#bottom_side_hud {
    position: absolute;
    bottom: 25px;
    right: 25px;
}

.bottom_action_container {
    float: right;
    margin-top: -40px;
}

#mini_map {
    border: solid 2px white;
    background-color: black;
    width: 150px;
    height: 150px;
}

.player_pos {
    width: 3px;
    height: 3px;
    background-color: white;
    position: absolute;
}

#sector_description_menu {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 25px;
    color: white;
}

#sector_description_menu_content {
    font-size: 1em;
}

#wave_level_menu {
    font-size: 1.6em;
    color: #fc4646;
}

#sector_description_menu_content {
    position: relative;
    left: -50%;
}

.wave_container {
    display: none;
    padding: 10px;
    text-align: center;
    left: -50%;
    position: relative;
}

#wave_remaining_time {
    display: none;
    color: #da3f3f;
}

#party_btn {
    display: none !important;
    position: absolute;
    bottom: 240px;
    left: 85px;
    width: 30px;
    height: 30px;
    background-image: url(./../assets/images/party_icon.png);
    background-size: contain;
    opacity: 0.8;
    background-color: black;
    border: solid 10px black;
    cursor: pointer;
}

#mute_btn,
#zoom_in_btn,
#zoom_out_btn,
#range_toggle_btn {
    display: inline-block;
    width: 28px;
    height: 28px;
    opacity: 0.7;
    background-image: url(./../assets/images/range_icon.png);
    background-size: contain;
    cursor: pointer;
    border: solid 2px black;
    background-color: black;
}

#mute_btn.on {
    background-image: url(./../assets/images/volume_on_icon.png);
}

#mute_btn.off {
    background-image: url(./../assets/images/volume_off_icon.png);
}

#range_toggle_btn {
    display: none;
}

#zoom_in_btn {
    background-image: url(./../assets/images/zoom_in_icon.png);
    right: 105px;
}

#zoom_out_btn {
    background-image: url(./../assets/images/zoom_out_icon.png);
    right: 65px;
}

#party_btn:hover,
#zoom_in_btn:hover,
#zoom_out_btn:hover,
#range_toggle_btn:hover {
    opacity: 1;
}

#pvp_end_container,
#death_screen_container {
    display: none;
    background-color: black;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 25;
    opacity: 0.9;
}

#pvp_end_container {
    opacity: 0.95;
}

#pvp_end_content,
#death_screen_content {
    color: white;
    font-size: 2.5em;
    width: 500px;
    height: 500px;
    text-align: center;
    background-color: black;
    opacity: 0.9;
    padding: 20px;
}

/* https://stackoverflow.com/a/14816807 */
.center {
    position:absolute; /*it can be fixed too*/
    left:0; right:0;
    top:0; bottom:0;
    margin:auto;

    /*this to solve "the content will not be cut when the window is smaller than the content": */
    max-width:100%;
    max-height:100%;
    overflow:auto;
}

#party_container {
    display: none;
    position: absolute;
    left: calc(50vw - (300px / 2));
    top: calc(50vh - (500px / 2));
    width: 300px;
    height: 500px;
    background-color: black;
    opacity: 0.8;
    color: white;
    padding: 20px;
    font-size: 1.5em;
}

#party_cancel_btn {
    position: absolute;
    right: -20px;
    top: -20px;
    width: 40px;
    height: 40px;
    background-image: url(./../assets/images/cancel_icon.png);
    background-size: contain;
    background-color: black;
    border-radius: 20px;
    cursor: pointer;
    opacity: 0.5;
}

#party_cancel_btn:hover {
    opacity: 1;
}

#party_name_input,
#create_party_btn {
    font-size: 0.8em;
    font-family: PixelForce;
}

#create_party_btn {
    cursor: pointer;
}

#create_party_btn:hover {
    background-color: #bbb;
}

#party_name_input {
    width: 180px;
    background-color: #222;
    border: solid 2px #555;
}

.party_create_container {
    position: absolute;
    bottom: 20px;
}

.party_list_container label {
    text-align: center;
    display: block;
}

.ffa_play_again_btn,
.return_to_hangar_btn {
    padding: 5px 10px;
    background-color: #0054ff;
    border: solid 2px white;
    color: white;
    font-size: 24px;
    font-family: PixelForce;
    margin-top: 25px;
    cursor: pointer;
}

#player_action_tooltip {
    display: none;
    position: absolute;
    opacity: 0.9;
    color: white;
}

#shortcut_btn,
#shortcut_description {
    display: inline-block;
    background-color: black;
    padding: 10px;
}

#shortcut_description {
    margin-left: 10px;
}

#performance_stats {
    position: absolute;
    color: white;
    bottom: 120px;
    right: 20px;
    font-family: arial;
    font-size: 16px;
    display: none;
    padding: 5px 10px;
    opacity: 0.8;
    background-color: black;
}

#performance_stats .value {
    color: gold;
    float: right;
    margin-left: 10px;
}

.error_message {
    color: yellow;
    font-family: monospace;
    font-size: 22px;
    margin-bottom: 20px;
}

/* https://loading.io/css/ */
.lds-ring {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border: 4px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#connecting_message {
    color: #aaa;
    font-family: monospace;
    font-size: 24px;
}

#region_selector {
    margin-top: 20px;
}

.ui_select {
    cursor: pointer;
    width: 150px;
    font-size: 16px;
    font-family: arial;
    background-color: #333;
    border: solid 1px #444;
    color: #999;
    height: 30px;
    text-align: center;
    text-align-last: center;
    border-radius: 8px;
}

#total_online_count {
    position: absolute;
    left: 20px;
    bottom: 60px;
    font-size: 22px;
    font-family: 'cc';
    color: #bbb;
}

#discord_button {
    position: absolute;
    top: 20px;
    right: 20px;
}

#discord_button img {
    width: 125px;
}

#firebaseui-auth-container {
    display: none;
    position: absolute;
    left: 0px;
    top: 100px;
}

.firebaseui-page-provider-sign-in {
    float: right;
    background-color: #222;
    border: solid 2px #444;
    width: 250px;
}

.firebaseui-card-content {
    padding: 10px;
    padding-bottom: 0px;
}

.firebaseui-idp-list {
    margin: 0px;
}

.firebaseui-idp-button.firebaseui-idp-google {
    background-color: #db4437;
}

.firebaseui-idp-button.firebaseui-idp-password {
    background-color: #444444;
}

.firebaseui-idp-google .firebaseui-idp-text {
    color: white;
}

#social_login_container {
    position: absolute;
    background-color: #222;
    border: solid 2px #444;
    padding: 10px;
    display: none;
    top: 100px;
    z-index: 10;
}

#social_login_container img {
    border: none;
    display: inline-block;
    height: 18px;
    vertical-align: middle;
    width: 18px;
}

.facebook_login_btn,
.google_login_btn {
    color: white;
    font-family: arial;
    background-color: #db4437;
    padding: 8px 16px;
    font-size: 14px;
    width: 185px;
    cursor: pointer;
}

.facebook_login_btn {
    background-color: #3b5998;
    margin-top: 10px;
}

.login_btn_label {
    vertical-align: middle;
    margin-left: 10px;
}

.login_error {
    display: none;
    font-size: 16px;
    width: 100px;
    text-align: left;
    background-color: #bc3131;
    padding: 10px;
    color: white;
}

.login_error_header {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
    color: mediumturquoise;
}

#home_user_account_container {
    padding: 0px;
    display: block;
    top: 10px;
    left: 10px;
    width: auto;
    text-align: left;
    border: none;
    margin-bottom: 5px;
}

#username_container {
    display: none;
}

#username_container label {
    color: #999;
}

#username_container label,
#username_container #username {
    display: inline-block;
}

#username_container #username {
    cursor: pointer;
    color: #4c79a4;
    font-size: 24px !important;
}

#logged_in_menu_container {
    display: none;
    width: 120px;
    margin-bottom: 10px;
}

.home_menu_container {
    font-family: 'cc';
    font-size: 24px;
    color: #999;
    padding: 10px;
    border: solid 2px #444;
}

.left_sidebar {
    width: 150px;
    display: inline-block;
    float: left;
    padding: 15px;
}

#login_btn {
    background-color: #923434;
    text-align: center;
    cursor: pointer;
    font-size: 25px;
}

#login_btn:hover {
    background-color: darkred;
}

#login_cookies {
    background-color: #a22b1c;
    padding: 10px;
    border-radius: 5px;
    font-size: 18px;
    color: white;
    width: 100px;
    text-align: left;
    display: none;
}

#auth_in_progress {
    display: none;
}

.modal_menu {
    display: none;
    width: 360px;
    text-align: center;
    left: calc(50vw - (400px / 2));
    top: calc(50vh - (500px / 2));
    height: auto;
    position: absolute;
    padding: 20px;
    border: solid 4px black;
    background-color: #111;
    color: gray;
    z-index: 11;
}

#username_form_container {
    font-family: 'cc';
    font-size: 28px;
    height: 150px;
    top: 120px;
    color: #ccc;
    margin-top: 20px;
    width: 315px;
    z-index: 20;
    border: solid 2px #444;
    font-size: 28px;
}

#username_form_container button {
    cursor: pointer;
}

.menu_input {
    background-color: #222;
    border: solid 2px #555;
    color: #aaa;
    padding-left: 10px;
    font-size: 20px;
}

#set_username_btn {
    font-family: 'PixelForce';
    font-size: 16px;
}

#username_form_description {
    margin-bottom: 10px;
}

.middle_container {
    float: left;
    width: calc(100% - 420px);
    padding-top: 40px;
}

#username_errors {
    color: red;
    margin-top: 10px;
}

#logout_btn {
    cursor: pointer;
    padding: 5px;
    width: 135px;
}

#logout_btn:hover {
    color: #4c79a4;
    border-color: #4c79a4;
}

#save_progress {
    position: absolute;
    color: white;
    left: 20px;
    bottom: 80px;
    font-family: 'cc';
    font-size: 28px;
    display: none;
}

#teleport_progress_container {
    position: absolute;
    margin-left: -125px;
    left: 50%;
    bottom: 30px;
    color: white;
    font-family: 'cc';
    text-align: center;
    font-size: 30px;
    display: none;
}

.teleport_countdown {

}

.teleport_duration_bar_container .bar_fill {
    background-color: #1a73e8;
}

.teleport_duration_bar_container {
    width: 250px;
    margin-left: 0px;
}

#region_select {
    width: 180px;
}

.entity_menu {
    display: none;
    position: absolute;
    bottom: 20px;
    left: 20px;
    border: solid 1px #333;
    background-color: #222;
    color: #ccc;
    padding: 10px;
    z-index: 5;
}

.entity_target_name {
    border-bottom: solid 1px #555;
    margin-bottom: 15px;
}

.entity_menu .entity_health_stat .bar_fill {
    background-color: red;
}

.entity_menu .entity_shield_stat .bar_fill {
    background-color: #1080c2;
}

#repair_btn {
    border: solid 1px black;
    background-color: #b31212;
    color: white;
    border-radius: 5px;
    font-size: 30px;
    font-family: 'cc';
    position: absolute;
    top: 65px;
    right: 25px;
    cursor: pointer;
    padding: 10px;
    display: none;
}

#repair_btn:hover {
    background-color: #dd1616;
}

#repair_btn img {
    width: 24px;
    vertical-align: middle;
}

.repair_cost {
    font-size: 20px;
    text-align: center;
    color: gold;
}

.mini_map_canvas {
    width: 100%;
}

.zoom_slider {
    position: absolute;
    bottom: 230px;
    left: 20px;
    display: none;
}

.zoom_slider input {
    width: 200px;
}

.cancel_btn {
    font-size: 0px;
    position: absolute;
    right: -12px;
    top: -12px;
    width: 28px;
    height: 28px;
    background-image: url(./../assets/images/cancel_icon.png);
    background-size: contain;
    background-color: white;
    border-radius: 20px;
    cursor: pointer;
    opacity: 0.5;
    z-index: 20;
}

.cancel_btn:hover {
    opacity: 1;
}

#upgrade_menu .cancel_btn {
    top: -55px;
}

#building_menu_tooltip .cancel_btn,
#upgrade_menu .cancel_btn {
    opacity: 0.8;
    border: solid 2px #888;
}

#gamepad_joystick {
    position: absolute;
    bottom: 65px;
    left: 25px;
    width: 100px;
    height: 100px;
    z-index: 3;
}

#building_menu_tooltip .cancel_btn {
    display: none;
}

body.mobile #building_menu_tooltip .cancel_btn {
    display: block;
} 

.play_spinner {
    display: none;
}

.ship_library,
.sector_picker {
    display: none;
    position: absolute;
    right: 0px;
    z-index: 10;
    background-color: #19283e;
    width: 300px;
    height: 100%;
    color: #ccc;
    text-align: center;
    padding-top: 50px;
    border: solid 2px black;
}

.sector_row {
    border: solid 2px black;
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    width: 230px;
    background-color: #191632;
    cursor: pointer;
}

.sector_row.selected,
.sector_row:hover {
    background-color: #3a6596;
}

.sector_list {
    display: none;
    width: 300px;
    margin: auto;
}

.teleport_to_sector_btn {
    display: inline-block;
    border: solid 2px black;
    padding: 5px 10px;
    margin-top: 15px;
    background-color: #ff4d00;
    color: white;
    cursor: pointer;
}

.sector_name {
    margin-right: 10px;
}

.sector_level {
    font-family: 'cc';
    color: #ff5353;
}

.sector_picker_header {

    margin-bottom: 20px;
    font-size: 22px;
}

.game_modes {

}

.game_mode_entry {
    border: solid 2px black;
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    width: 230px;
    background-color: #3a6596;
    cursor: pointer;
}

.game_mode_entry:hover {
   background-color: #05857a;
}

.game_mode_player_count {
    font-family: 'cc';
    color: #df8b28;
    display: none;
}

.ship_library .back_btn,
.sector_picker .back_btn {
    border: solid 2px #555;
    color: #aaa;
    background-color: #111;
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 30px;
    cursor: pointer;
}

.ship_library .back_btn img,
.sector_picker .back_btn img {
    width: 16px;
    opacity: 0.7;
}

.ship_library .back_btn:hover,
.sector_picker .back_btn:hover {
    background-color: #555;
}

.two_pvp_mode {
    display: none;
}

#notice_board {
    position: absolute;
    top: 230px;
    left: 20px;
}

.notice_board_row {
    border-radius: 5px;
    background-color: black;
    opacity: 0.8;
    color: #ccc;
    font-size: 20px;
    font-family: 'cc';
    margin-bottom: 5px;
    padding: 5px 10px;
    clear: both;
    float: right;
    display: inline-block;
}

.player_list_row {
    font-family: 'cc';
    color: #aaa;
    font-size: 18px;
    padding: 0px 5px;
    height: 20px;
}

.player_list_row .player_level {
    color: #4de6f7;
    width: 40px;
    margin-left: 10px;
    /*display: inline-block;*/
}

.player_list {
    text-align: right;
    max-height: 300px;
    overflow-y: scroll;
}

.game_mode_name {
    padding: 10px;
    padding-bottom: 0px;
}

.entity_action_btn {
    display: inline-block;
    float: right;
    margin-top: 5px;
    padding: 2px 5px;
    font-family: 'cc';

    border: solid 2px #bbb;
    background-color: #451e97;
    width: 72px;
    text-align: center;
    cursor: pointer;
}

.entity_action_btn:hover {
    background-color: blue;
}

.pvp_requests_menu {
    position: absolute;
    top: 150px;
    left: 20px;
}

.pvp_request {
    border: solid 2px #666;
    padding: 10px;
    color: white;
    font-family: 'cc';
    background-color: #444;
    position: absolute;
}

.pvp_request .request_details {
    width: 150px;
    margin-bottom: 5px;
}

.pvp_request .accept_btn {
    border: solid 1px black;
    display: inline-block;
    padding: 5px 10px;
    background-color: #398676;
    margin-right: 5px;
    cursor: pointer;
    font-size: 18px;
}

.pvp_request .accept_btn:hover {
    background-color: #086350;
}

.pvp_request .reject_btn {
    border: solid 1px black;
    display: inline-block;
    padding: 5px 10px;
    background-color: gray;
    cursor: pointer;
    font-size: 18px;
}

.pvp_request .reject_btn:hover {
    background-color: #555;
}

.player_list_row:hover {
    /*background-color: #555;*/
}

.duel_action_btn.sent {
    cursor: not-allowed;
    background-color: gray;
}

.win_label {
    color: #00ff00;
}

.lose_label {
    color: red;
}

.experience_points {
    color: white;
    font-size: 30px;
}

.level_up_notice {
    display: none;
}

.level_increase_container {
    width: 230px;
    margin: auto;
    font-size: 24px;
    display: inline-block;
}

.level_increase_container .label {
    font-size: 25px;
}

.level_increase_container .bar_container {
    height: 20px;
}

.level_increase_container .bar_label {
    font-size: 18px;
    font-family: 'cc';
}

.level_increase_container .bar_fill {
    background-color: gold;
}

.attack_player_btn {
    float: left;
    cursor: pointer;
    border: solid 2px violet;
    background-color: purple;
    margin-right: 10px;
    width: 14px;
    padding: 2px;
}

.attack_player_btn:hover {
    background-color: darkred;
    border: solid 2px red;
}

.player_list_row.sent .attack_player_btn {
    background-color: gray;
    border: solid 2px #aaa;
    cursor: not-allowed;
}

.player_list_row.sent .attack_player_btn:hover {
    background-color: gray;
    border: solid 2px #aaa;
}

.game_mode_description {
    font-family: 'cc';
    color: #57edff;
}

.ship_painting_container {
    color: white;
    position: absolute;
    top: 200px;
    left: 20px;
    font-family: 'cc';
    font-size: 18px;
}

.armor_color_picker_container span,
.platform_color_picker_container span {
    width: 110px;
    display: inline-block;
}

.ship_painting_container input {
    height: 15px;
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}

#ship_library_btn {
    top: 5px;
    bottom: unset;
    right: 160px;
    font-size: 24px;
    background-color: #898989;
}

#ship_library_btn:hover {
    background-color: #555;
}

.ship_entry {
    font-family: cc;
    border: solid 2px #4e5c7b;
    padding: 10px 0px;
    margin: 0px;
    cursor: pointer;
}

.ship_entry .ship_name {
    margin-right: 15px;
}

.ship_entry .ship_name,
.ship_entry .ship_level {
    display: inline-block;
    vertical-align: middle;
}

.ship_entry .ship_level {
    color: #4de6f7;
}

.ship_entry:hover {
    background-color: #666;
}

.ship_entry.selected {
    background-color: #555;
    border: solid 2px;
}

.add_ship_btn {
    margin-top: 20px;
    border: solid 2px black;
    color: white;
    background-color: #3a6596;
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 30px;
    cursor: pointer;
}

.add_ship_btn:hover {
    background-color: #05857a;
}

.black_input {
    background-color: black;
    border: none;
    color: #aaa;
    font-size: 20px;
    font-family: 'cc';
    vertical-align: middle;
    padding: 5px 10px;
    margin-left: 10px;
}

.ship_name_input {
    display: none;
    margin-right: 10px;
    margin-left: 0px;
    vertical-align: middle;
}

.rename_ship_btn {
    display: inline-block;
    margin-right: 10px;
    width: 18px;
    vertical-align: middle;
}

#ffa_btn {
    background-color: cornflowerblue;
    margin: 10px;
}

#ffa_btn:hover {
    background-color: #315596;
}

#ffa_timer {
    display: none;
    position: absolute;
    color: white;
    font-family: 'cc';
    left: 50%;
    margin-left: -20px;
    top: 20px;
    font-size: 24px;
    width: 65px;
    text-align: center;
    z-index: 10;
}

body[data-ffa='true'] #ffa_timer {
    display: block;
}

#ffa_timer label {
    color: mediumseagreen;
    font-size: 30px;
}

#ffa_timer .time_remaining {
    display: none;
}

#round_end_container {
    display: none;
    position: absolute;
    color: white;
    background-color: #111;
    width: 100%;
    height: 100%;
    border: solid 1px;
    text-align: center;
    z-index: 20;
    opacity: 0.9;
}

#round_end_container .title {
    font-size: 45px;
    color: #00ffe2;
    margin-top: 100px;
}

#round_end_container .results {
    margin: auto;
    text-align: left;
    font-family: 'cc';
    font-size: 30px;
    margin-top: 50px;
}
}

#round_end_container .results .rank {
    width: 80px;
}

#round_end_container .results .name {
    width: 200px;
}

#welcome_message {
    display: none;
    position: absolute;
    border: solid 3px #444;
    background-color: #222;
    color: white;
    width: 400px;
    font-family: 'cc';
    left: 50%;
    margin-left: -220px;
    top: 200px;
    padding: 15px;
}

.buy_ship_container .cancel_btn,
#welcome_message .cancel_btn {
    border: solid 3px #555;
    opacity: 0.9;
}

#welcome_message .highlight {
    color: #34ff52;
}

#debug_menu {
    display: none;
    position: absolute;
    left: 50px;
    bottom: 80px;
    border: solid 2px #555;
}

#debug_menu input {
    width: 300px;
}

.buy_ship_container {
    display: none;
    position: absolute;
    color: white;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    top: 50px;
    border: solid 2px #555;
    background-color: #222;
    padding: 10px;
}

.buy_ship_container .ship_item {
    width: 100px;
    font-family: 'cc';
    border: solid 2px #555;
    padding: 5px;
    background-color: black;
    display: inline-block;
    margin-left: 7px;
    margin-bottom: 7px;
    text-align: center;
}

.buy_ship_container .ship_item:hover {
    background-color: #555;
    cursor: pointer;
}

.buy_ship_container .ship_item.selected {
    border: solid 2px #ccc;
    background-color: #444;
}

.ffa_death_screen_content {
    display: none;
    color: white;
    width: 500px;
    height: 500px;
    font-family: 'cc';
    text-align: center;
}

.ffa_stats {
    text-align: left;
    width: 250px;
    margin: auto;
}

.ffa_stats .stat_entry {
}

.ffa_stats .stat_entry span {
    float: right;
    color: gold;
}

body[data-mode='ffa'] #death_screen_content {
    display: none;
}

body[data-mode='ffa'] .ffa_death_screen_content {
    display: block;
}

.ffa_death_screen_content .title {
    font-size: 40px;
    color: red;
}

.ffa_death_screen_content .ship_name {
    font-size: 25px;
    margin: 10px;
    color: orange;
}

.ffa_death_screen_content .ship_thumbnail {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

body[data-mode='base'] #player_inventory_menu {
    display: block;
}

body[data-mode='base'] #base_hud {
    display: block;
}

body[data-mode='base'] #bottom_side_hud {
    display: none;
}

body[data-mode='base'] #battle_btn ,
body[data-mode='hardcore'] #teleport_base_btn ,
body[data-mode='final'] #teleport_base_btn ,
body[data-mode='coop'] #teleport_base_btn {
    display: block;
}

body[data-mode='base'] .energy_stat {
    display: block;
}

body[data-mode='ffa'] #leaderboard {
    top: 20px;
}

.buy_ship_btn {
    display: none;
    position: absolute;
    bottom: 30px;
    left: 30px;
    font-family: 'cc';
    font-size: 24px;
    color: green;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

body[data-mode='ffa'] .buy_ship_btn {
    display: block;
}

.buy_ship_btn:hover {
    background-color: #333;
}

.buy_ship_btn img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.buy_ship_btn span {
    vertical-align: middle;
}

.ship_purchase_list {
    max-height: 300px;
    overflow-y: scroll;
}

.ship_purchase_list .ship_name {

}

.ship_purchase_list .ship_thumbnail {
    width: 75px;
    height: 75px;
    object-fit: contain;
}

.ship_purchase_list .ship_cost {
    color: gold;
}

.buy_ship_container .confirm_buy_btn {
    border: solid 1px;
    display: inline-block;
    float: right;
    padding: 4px 8px;
    background-color: darkcyan;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-top: 20px;
}

.buy_ship_container .title {
    margin-bottom: 15px;
    text-align: center;
}

.buy_ship_container .confirm_buy_btn:hover {
    background-color: #0c4c4c;
}

.skill_points_container {
    position: absolute;
    width: 500px;
    padding: 10px;
    color: white;
    font-family: 'cc';
    display: none;
    top: 120px;
    left: 10px;
}

.skill_points_container .attribute_container {
}

.skill_points_container .attribute_name {
    display: inline-block;
    vertical-align: middle;
    width: 105px;
}

.skill_points_container .attribute_value {
    display: inline-block;
    vertical-align: middle;
    background-color: #333;
    padding: 0px 5px;
    border-radius: 5px;
    border: solid 1px #888;
}

.skill_points_container .attribute_allocation {
    display: inline-block;
    vertical-align: middle;
}

.skill_points_container .skill_point {
    width: 10px;
    height: 16px;
    float: left;
    margin-right: 2px;
    background-color: #555;
    border-radius: 3px;
}

.skill_points_container .skill_point.allocated {
    background-color: #2cbc7b;
}

.add_skill_btn {
    width: 16px;
    height: 16px;
    cursor: pointer;
    vertical-align: middle;
    opacity: 0.5;
}

.add_skill_btn:hover {
    opacity: 1;
}

.remaining_skill_points {
    font-size: 24px;
    color: darkgoldenrod;
}

.remaining_skill_points label {

}

.remaining_skill_points .value {
    color: #2cbc7b;
}

.skill_points_container .attribute_container[data-key='zoom'] {
    display: none;
}

.credits_link,
.partners_link {
    position: absolute;
    bottom: 15px;
    left: 20px;
    font-family: 'cc';
    color: coral;
    text-decoration: none;
    font-size: 25px;
    border: solid 1px;
    padding: 2px 5px;
    border-radius: 5px;
}

.credits_link {
    left: 170px;
    border: none;
}

.credits_link:hover,
.partners_link:hover {
    cursor: pointer;
    color: #d16733;
}

.ffa_play_again_btn {

}

.ffa_death_action_container {
    display: none;
}
/* mobile portrait and landscape version */
@media only screen and (max-width: 500px), screen and (max-height: 450px) {

  .buy_ship_container {
      width: 98%;
      margin-left: 0px;
      left: 0px;
      padding: 0px;
  }

  .ship_item {
    width: 90px !important;
  }

  .sector_picker {
    width: 180px;
  }

  .game_mode_entry {
    width: 130px;
  }

  .game_mode_name {
    font-size: 16px;
  }

  .game_mode_description {
    font-size: 14px;
  }

  .middle_container {
    float: none;
    width: auto;
    clear: both;
  }

  #teleport_galaxy_btn, #teleport_base_btn {
    font-size: 14px;
    right: 5px;
  }

  .player_inventory_slot {
    width: 36px;
    height: 36px;
  }

  #base_hud .resources {
    font-size: 14px;
    width: 150px;
  }

  #player_stats {
    top: 0px;
    left: 0px;
  }

  .bar_container {
    width: 120px;
  }

  #teleport_progress_container {
    margin-left: -65px;
  }

  #leaderboard {
    width: 150px;
    font-size: 10px;
    right: 5px;
    top: 50px;
  }

  .player_list_row  {
    font-size: 12px;
    height: 14px;
  }

  .player_list_row .player_name {
    overflow-x: hidden;
    overflow-y: hidden;
    word-break: break-all;
    display: inline-block;
    white-space: nowrap;
    max-width: 30px;
    float: left;
  }

  .player_list_row .player_level {
    float: right;
    width: 12px;
  }

  .attack_player_btn {
    width: 10px;
  }

  #leaderboard .title {
    font-size: 16px;
  }

  #leaderboard .stats {
    font-size: 12px;
    margin-right: 5px;
  }

  .player_name {
    max-width: 80px;
    min-width: 80px;
  }

  body[data-ffa='true'] #ffa_timer {
    display: none;
  }

  #sector_description_menu {
    display: none !important;

  }

  #mini_map {
    width: 100px; 
    height: 100px;
  }

  #zoom_in_btn, #zoom_out_btn, #range_toggle_btn {
    bottom: 135px;
  }


  .entity_name {
    font-size: 12px;
    top: -40px;
  }

  #upgrade_menu .entity_name {
    width: 160px;
  }

  .entity_level {
    font-size: 14px;
  }

  .entity_description {
    font-size: 10px;
  }

  .entity_id {
    font-size: 12px;
  }

  .entity_stats_target_growth {
    margin: 6px 0px;
    font-size: 10px;
  }

  .stats_type {
    width: 50px;
  }

  .stats_before {
    width: 25px;
  }
  
  .upgrade_cost,
  .action_label {
    font-size: 10px;
    margin-bottom: 3px;
  }

  #upgrade_btn,
  #sell_btn {
    padding: 5px;
    font-size: 12px;
    height: unset;
    min-height: 32px;
  }

  #upgrade_menu {
    width: 150px;
  }

  .building_count {
    font-size: 14px;
    line-height: 14px;
  }

  .cancel_btn {
    width: 24px;
    height: 24px;
  }

}


/* portrait only */
@media only screen and (max-width: 500px) {
  .entity_name {
    width: 95vw;
  }

  #upgrade_menu {
    width: 92vw;
  }

  #upgrade_menu .cancel_btn {
    right: 0px;
  }

}

@media only screen and (max-height: 550px) {
  #leaderboard {
    max-height: 180px;
    overflow-y: scroll;
  }
}