@font-face{
    font-family: 'Goodtime';
    src: url('/fonts/GOODTIME.TTF');
}

@font-face{
    font-family: 'zekton';
    src: url('/fonts/zekton.ttf');
}

@font-face{
    font-family: 'sf-pro-text-regular';
    src: url('/fonts/SF-Pro-Text-Regular.ttf');
}

body{
    margin:0;
    padding:0;
    font-family: verdana;
    min-height:100vh;
    color:#dae9ff;
    background-color:#242424;
    font-size:12pt;
    background-image:url('/img/background.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment: fixed;
}

button{
    border:none;
}

:link, :visited {
    text-decoration: none;
}

a {
    color: 
    #dde;
    font-weight: bold;
    text-decoration: none;
    outline: 0;
}

/* Main */

.main{
    position:relative;
    box-sizing:content-box;
    width:100%;
    height:100vh;
}

.top_safe_area{
    background-color:rgba(24, 35, 59, 0.9);
}

.main > .time{
    position:absolute;
    display:none;
    z-index:9999;
}

.main[data-viewport_type]{
    margin-left:50%;
    transform:translate(-50%);
}

.main::after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
    pointer-events:none;
    z-index:5000;
}

.main:not([data-environment="browser"]) .browser_header,
.main:not([data-environment="browser"]) .browser_footer{
    display:none;
}

.main > main{
    box-sizing:border-box;
    width:100%;
    height:100%;
    position:relative;
}

.main > main > .content{
    width:100%;
    height:100%;
    position:relative;
    background-image:url('/img/background.jpg');
    background-color:black;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

.main[data-viewport_type] > main > .content{
    overflow-y:hidden;
    display:flex;
    flex-direction:column;
}

.main > main > .content > .body_wrapper{
    width:100%;
    position:relative;
    padding-top:3em;
}

.main[data-viewport_type] > main > .content > .body_wrapper{
    box-sizing:border-box;
    display:block;
    flex:1;
    overflow-y:scroll;
    overflow-y: -moz-scrollbars-none;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
    padding-top:0em;
}

.main[data-viewport_type] > main > .content > .body_wrapper::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.main .bottom_safe_area{
    height:3em;
}

/* Main End */

/* Main Menu */

.main_menu{
    padding: 0;
    box-sizing:border-box;
    height:3em;
    position:fixed;
    width:100%;
    z-index:1000;
    background-color:rgba(24, 35, 59, 0.9);
    border-bottom:1px solid #111;
}

.main[data-viewport_type] .main_menu{
    position:relative;
}

.main_menu > button{
    font-size:2em;
    width:1.5em;
    height:1.5em;
    display:inline-block;
    background:transparent;
    padding:0;
}

.main_menu > button:first-child{
    float:left;
}

.main_menu > button:last-child{
    float:right;
}

.main_menu > div[data-id="active_planet"]{
    position:absolute;
    display:inline-block;
    box-sizing:border-box;
    padding:0.2em;
    color:#dae9ff;
}

.main_menu > div[data-id="active_planet"] > .entry > div.planet{
    width:2em;
    height:2em;
    background-position:center;
    background-repeat:no-repeat;
    background-size:100%;
    display:inline-block;
    margin-right:0.5em;
}

.main_menu > div[data-id="active_planet"] > .entry > span.details{
    display:inline-block;
    font-size:1em;
    bottom:0;
    text-align:left;
}

.hamburger_menu,
.bento_menu,
.home_menu{
    position:relative;
}

.hamburger_menu::before,
.bento_menu::before,
.home_menu::before{
    text-align:center;
    position:absolute;
    display:inline-block;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
    width:1em;
    height:1em;
}

.hamburger_menu::before{
    content:'☰';
    font-size:1.2em;
    top:45%;
    color:#dae9ff;
}

.bento_menu::before{
    content:'';
    background-image:url('/img/bento_menu.svg');
    display:inline-block;
    fill:#dae9ff;
}

.kebab_menu::before{
    content:'⠇';
    font-size:1.2em;
    top:45%;
    color:#dae9ff;
}

.home_menu::before{
    content:'';
    background-image:url('/img/home_button.png');
}

/* Main Menu End */

/* Body */

h1{
    font-family: zekton, sans-serif;
    text-align:center;
    font-size:1.5em;
    font-weight:bolder;
}

table.tb caption {
    background: 
        rgba(24, 35, 59, 0.5);
        border: 1px solid #111;
        border-bottom-color: rgb(17, 17, 17);
        border-bottom-style: solid;
        border-bottom-width: 1px;
    border-bottom: none;
    text-align: left;
    vertical-align: top;
    padding: 4px 6px;
    font-weight: bold;
}

table {
    border-spacing: 2px;
}

th {
    font-weight: bolder;
    text-align: center;
}

table.tb{
    font-size:0.8em;
    border-collapse: collapse;
    margin-top:1em;
}

table.tb tbody{
    background: rgba(24, 35, 59, 0.9);
}

table.tb td{
    border: 1px solid #111;
    background: rgba(24, 35, 59, 0.9);
    padding: 0.2em 0.5em;
}

table.tb tr.resBoxTitleRow{
    display:inline-block;
    width:50%;
}

table.tb tr.resBoxRow{
    display:inline-block;
    width:50%;
}

table.tb tr.resBoxTitleRow th{
    display:block;
    text-align:left;
    padding:0.2em;
    padding-left:0.5em;
    height:auto;
    border:none;
    border-bottom: 1px solid #111;
    background:transparent;
}

table.tb tr.resBoxRow td {
    background:transparent;
    border:none;
    border-bottom: 1px solid #111;
    text-align: right;
    vertical-align: top;
    padding:0.2em;
    padding-right:1em;
    display:block;
    border-collapse:collapse;
}

table.buildings{
    table-layout:fixed;
}

table.buildings td{
    display:inline-block;
    width:33.333%;
    margin:0;
}

table.buildings img{
    width:100%;
    transform:scale(1.1);
}

table.buildings td{
    position:relative;
    box-sizing:border-box;
    border: 1px solid #111;
    margin:0 -1px -1px 0;
    overflow:hidden;
}

.buildOverviewObjectTitle{
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(24, 35, 59, 0.9);
    border-bottom-right-radius:1.0em;
    z-index:10;
    margin:0;
    padding:0.2em;
    padding-right:1em;
    font-size:0.9em;
}

.buildOverviewObjectLevel{
    font-size:1.5em;
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    width:2.2em;
    height:1.8em;
    border-top-left-radius:1.3em;
    background-color:rgba(24, 35, 59, 0.9);
    text-align:right;
    padding-top:0.3em;
    padding-right:0.2em;
    box-sizing:border-box;
}

.tabMenu{
    margin-top:1em;
}

.tabMenu > a{
    background-color:rgba(24, 35, 59, 0.9);
    padding: 0.2em 0.5em;
    border-top: 1px solid #38435b;
    border-bottom: 1px solid #38435b;
    display:inline-block;
    margin:0;
}

/* Body End */

/* Resources */

.resmetal, .tb .resmetal,
.rescrystal, .tb .rescrystal,
.resplastic, .tb .resplastic,
.resfuel, .tb .resfuel,
.resfood, .tb .resfood,
.respeople, .tb .respeople,
.respower, .tb .respower{
    padding: 0 0.5em 0 1.66em;
    background-size:1.3em;
    background-position: 0 0;
    font-weight:bolder;
    box-sizing:border-box;
}
.tb .resmetalcolor,
.tb .rescrystalcolor,
.tb .resplasticcolor,
.tb .resfuelcolor,
.tb .resfoodcolor,
.tb .respeoplecolor,
.tb .respowercolor{
    text-align:right;
}

/* Resources End */

/* Footer Menu */

.footer_menu{
    display:block;
    position:fixed;
    bottom:0;
    width:100%;
    height:3.5em;
    background-color:rgba(24, 35, 59, 0.9);
    white-space:nowrap;
    padding: 0 5%;
    box-sizing:border-box;
    z-index:1000;
}

.main[data-viewport_type] .footer_menu{
    position:absolute;
}

.footer_menu > button{
    font-size:1em;
    width:25%;
    height:100%;
    margin:0;
    box-sizing:border-box;
    padding:1%;
    background:transparent;
    position:relative;
}

.footer_menu > button::before{
    content:'';
    display:block;
    position:relative;
    height:3em;
    width:3em;
    box-sizing:border-box;
    background-color:#888;
    border-radius:50%;
    left:50%;
    top:0;
    transform:translate(-50%,0);
}

/* Footer Menu End */

.tools{
    position:fixed;
    bottom:1em;
    left:1em;
}

.tools a,
.tools select{
    display:inline-block;
    margin-right:1em;
}

.tools a{
    width:4em;
    height:4em;
}

.tools button{
    display:block;
    width:100%;
    height:100%;
    background:transparent;
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
}
.tools button:hover,
.tools select:hover{
    cursor:pointer;
    opacity:0.8;
}
.tools button:active,
.tools select:active{
    opacity:0.5;
}
.tools button[data-id="orientation"][data-orientation_type="landscape"]{
    background-image:url('/img/change_orientation_to_portrait.png');
}
.tools button[data-id="orientation"][data-orientation_type="portrait"]{
    background-image:url('/img/change_orientation_to_landscape.png');
}
.tools select{
    background:transparent;
    border: 0.3em solid white;
    border-radius:0.5em;
    color:white;
    vertical-align:bottom;
    padding:0.5em;
    font-family: 'Segoe UI Light', sans-serif;
}