@font-face {
    font-family: Roboto;
    src: url(RobotoMono-VariableFont_wght.ttf);
}

* {
	font-family: Roboto;
    table-align: center;
	text-align: center;

    text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, 
    #000 0px 0px 2px, #000 0px 0px 2px, #000 0px 0px 2px, 
    #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px;
    -webkit-font-smoothing: antialiased;
}

* { scrollbar-color: auto !important; scrollbar-width: auto !important; }

body {
    color: white;
    background: #0052af;
	overflow: hidden;
	font-size: 20px;
	margin: 0px;
	user-select: none;
}

table, tr {
    display: flex;
    justify-content: center;
}

h1 {
    display: inline;
    font-size: 40px;
}

h2 {
	display: inline;
    font-size: 30px;
}

h3 {
	display: inline;
    font-size: 25px;
}

button {
    margin: 2px;
    font-size: 20px;
    border: solid 3px black;
    background-color: lightgray;
    color: white;
    cursor: pointer;
    padding: 4px 10px;
}

button.locked {
    cursor: default;
    background-color: #555 !important;
}

button:not(.locked):hover {
    background-color: #eee !important;
}

.table_center {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.table_space {
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
}

.table_between {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.table_left {
    display: flex;
    justify-content: start;
    flex-flow: row wrap;
}

.soft {
	color: hsl(237, 15%, 47%);
	font-weight: bold;
	text-shadow: 0px 1px 0px hsl(252, 19%, 57%);
	pointer-events: none;
}

#main_app {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 170px);
    height: calc(100% - 220px);
    transform: translateX(-50%) translateY(calc(-50% + 25px));

    background-color: #fff2;
    padding: 10px;
}

#main_app > div {
    width: 100%;
    height: 100%;
}

#grass_div {
    position: relative;
    width: 700px;
    border: solid 2px black;
    background-color: #29b146;
    height: 45px;
    padding: 0 10px;
    font-size: 32px;
}

#grass_div > div {
    text-align: right;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 20px);
    align-items: center;
}

#grass-image {
    width: 60px;
    height: 60px;
    border: solid 2px black;
    border-radius: 50%;
    background-color: #73ff91;
    background-image: url(images/Curr/Grass.png);
    background-size: 80px;
    background-position: center;
}

body.planetoid #grass_div {
    background-color: #7b00ac;
}

body.planetoid #grass-image {
    background-color: #9626ff;
    background-image: url(images/Curr/Planetoid.png);
}

.smallAmt,
#grassGain {
    color: lightgray;
    font-size: 16px;
    height: 16px;
}

#grassOverflow {
    color: red;
    position: absolute;
    top: calc(100% - 10px); right: 0px;
    font-size: 14px;
    font-weight: bold;
}

#grass_canvas {
    width: calc(100% - 4px);
    height: calc(100% - 64px);
    border: solid 2px black;
    background-color: #186834;
}

#grass_canvas.planetoid {
    background-color: #480058;
}

#level {
    position: relative;
    width: 400px;
    border: solid 2px black;
    background-color: #2968b1;
    height: 35px;
    font-size: 25px;
    padding: 0 10px;
}

body.planetoid #level {
    background-color: #8421bd;
}

body.planetoid #level .cyan,
body.planetoid #level_div .cyan {
    color: magenta;
}

#tier {
    position: relative;
    width: 400px;
    border: solid 2px black;
    background-color: #afb129;
    height: 35px;
    font-size: 25px;
    padding: 0 10px;
}

#astral {
    position: relative;
    width: 400px;
    border: solid 2px black;
    background-color: #8a29b1;
    height: 35px;
    font-size: 25px;
    padding: 0 10px;
}

#level_div {
    position: relative;
    width: calc(100% - 34px);
    border: solid 2px black;
    background-color: #143357;
    font-size: 25px;
    height: 85px;
    margin: 5px 15px;
}

body.planetoid #level_div {
    background-color: #421457;
}

#tier_div {
    position: relative;
    width: calc(100% - 34px);
    border: solid 2px black;
    background-color: #575614;
    font-size: 25px;
    height: 108px;
    margin: 5px 15px;
}

#astral_div {
    position: relative;
    width: calc(100% - 34px);
    border: solid 2px black;
    background-color: #3c1457;
    font-size: 25px;
    height: 85px;
    margin: 5px 15px;
}

#tier_div > div,
#level_div > div,
#astral_div > div {
    position: absolute;
}

#level_bar {
    height: 100%;
    background-color: #2968b1;
    transition: width 0.2s;
}

body.planetoid #level_bar {
    background-color: #7429b1;
}

#tier_bar {
    height: 100%;
    background-color: #b1a829;
    transition: width 0.2s;
}

#astral_bar {
    height: 100%;
    background-color: #6f29b1;
    transition: width 0.2s;
}

#tier_info,
#level_info,
#astral_info {
    width: 100%;
}

#grass_cap_div {
    position: relative;
    width: calc(100% - 24px);
    margin-top: 5px;
    border: solid 2px black;
    background-color: #29b146;
    height: 45px;
    padding: 0 10px;
}

#grass_cap_div > div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 20px);
    align-items: center;
    font-size: 28px;
}

.cyan {
    color: skyblue;
}

#charger_div,
.upgs_div {
    position: relative;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    border: solid 2px black;
    background-color: #c5c5c5;
    margin: 10px;
}

#charger_div {
    background-color: #ffd900;
}

.buyAllUpg {
    padding: 2px 10px;
}

.upg_desc.grass,
.upgs_div.grass {
    background-color: #186834;
}

.upg_desc.perk,
.upgs_div.perk {
    background-color: #1fa4c5;
}

.upg_desc.auto,
.upgs_div.auto,
.upg_desc.assembler,
.upgs_div.assembler {
    background-color: #811919;
}

.reset_div.pp,
.reset_req.pp,
.upg_desc.pp,
.upgs_div.pp,
.chal_div.pp {
    background-color: #159edd;
}

.reset_div.crystal,
.reset_req.crystal,
.upg_desc.crystal,
.upgs_div.crystal,
.chal_div.crystal {
    background-color: #97245a;
}

.reset_div.decel,
.reset_req.decel,
.upg_desc.aGrass,
.upgs_div.aGrass,
.reset_div.ap,
.reset_req.ap,
.upg_desc.ap,
.upgs_div.ap {
    background-color: #242697;
}

.reset_div.oil,
.reset_req.oil,
.upg_desc.oil,
.upgs_div.oil {
    background-color: #2b2b2b;
}

.upg_desc.rocket,
.upgs_div.rocket {
    background-color: #2D5B62;
}

.reset_div.rocket_part,
.reset_req.rocket_part {
    background-color: #4F4836;
}

.upg_desc.momentum,
.upgs_div.momentum {
    background-color: #AA7C00;
}

.reset_div.gal,
.reset_req.gal {
    background-color: #505;
}

.upg_desc.moonstone,
.upgs_div.moonstone {
    background-color: #003380;
}

.reset_div.sac,
.reset_req.sac,
.upg_desc.dm,
.upgs_div.dm {
    border-color: #ffa4d9;
    background-color: #305;
}

.reset_div.recel,
.reset_req.recel,
.upg_desc.unGrass,
.upgs_div.unGrass {
    background-color: #549e00;
}

.reset_div.np,
.reset_req.np,
.upg_desc.np,
.upgs_div.np {
    background-color: #8fcc00;
}

.reset_div.cloud,
.reset_req.cloud,
.upg_desc.cloud,
.upgs_div.cloud {
    background-color: #fffabb;
}

.reset_div.enterPlanetoid,
.reset_req.enterPlanetoid,
.reset_div.formRing,
.reset_req.formRing,
.upg_desc.planetarium,
.upgs_div.planetarium,
.reset_div.astro,
.reset_req.astro,
.upg_desc.astro,
.upgs_div.astro {
    border-color: #ab00b1;
    background-color: #4b007c;
}

.upg_desc.observ,
.upgs_div.observ {
    border-color: #0038b1;
    background-color: #1b007c;
}

.reset_div.astralPrestige {
    background-color: #333;
}

.upgs_div.cs,
.upg_desc.cs {
    background-color: #111;
}

.reset_div.planetary,
.reset_req.planetary,
#milestone_div_planetary,
#milestone_div_planetary .milestone_ctns > div.bought,
.upg_desc.planet,
.upgs_div.planet {
    background: linear-gradient(0deg, rgba(0,212,255,1) 0%, rgba(0,21,139,1) 100%);
}

.reset_div.constellation,
.reset_req.constellation,
.upg_desc.constellation,
.upgs_div.constellation {
    background-color: #7700ff;
    box-shadow: inset 0px 0px 30px #e1b3ff, inset 0px 0px 30px #e1b3ff;
    border-color: #e1b3ff;
}

.reset_div.gj,
.reset_req.gj,
#milestone_div_gj,
#milestone_div_gj .milestone_ctns > div.bought {
    background-color: #222 !important;
}

.upg_desc.stardust,
.upgs_div.stardust,
.upg_desc.star,
.upgs_div.star {
    border-color: #57005a;
    background-color: #290044;
}

.upgs_ctn {
    height: calc(100% - 84px);
    width: calc(100% - 24px);

    border: solid 2px black;
    background-color: #272727;
    margin: 0 10px;

    overflow-x: auto;
    overflow-y: hidden;

    display: flex;

    flex-wrap: nowrap;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background-color: #0000;
}

*::-webkit-scrollbar-thumb {
    background-color: #b6b6b6;
    border-radius: 10px;
    border: solid 2px black;
}

.upg_ctn {
    flex-shrink: 0;
    position: relative;
    margin: 2px;
    cursor: pointer;
}

.upg_ctn:hover > img.img_desc {
    transform: translateX(-50%) scale(1.06);
}

.upg_ctn > img.img_desc {
    position: absolute;
    top: 10%;
    width: 80%;
    height: 80%;
    left: 50%;

    transform: translateX(-50%);
    transition: transform 0.2s;

    pointer-events: none;
}

.upg_ctn > img.img_res {
    position: absolute;
    bottom: 10%;
    width: 30%;
    height: 30%;
    left: 10%;

    transition: transform 0.2s;

    pointer-events: none;
}

.upg_cost {
    position: absolute;
    bottom: 0%;
    left: 50%;
    width: 100%;
    font-size: 1.1vw;
    transform: translateX(-50%);
    color: lime;
    pointer-events: none;
}

.upg_amt {
    position: absolute;
    top: 0%;
    left: 50%;
    width: 100%;
    font-size: 1.3vw;
    transform: translateX(-50%);
    color: yellow;
    pointer-events: none;
}

.red,
.upg_cost.locked,
.scu_cost.locked,
.su_cost.locked {
    color: red;
}

.upg_desc {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #c5c5c5;
    top: 0;
    font-size: 18px;
}

.yellow {
    color: gold;
}

.green {
    color: lime;
}

.darkgreen {
    color: green;
}

.lightgray {
    color: lightgray;
}

.lightblue {
    color: lightblue;
}

.black {
    color: #222;
}

.magenta {
    color: magenta;
}

.cyan {
    color: cyan;
}

.darkblue {
    color: #7812ff;
}

#lunar_obelisk_div,
#void_obelisk_div,
.reset_div {
    position: relative;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    border: solid 2px black;
    background-color: #c5c5c5;
    margin: 10px;
}

.reset_div > div {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 18px;
}

.reset_req {
    background-color: #c5c5c5;
}

.reset_req > div {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

#map_div_opt {
    font-size: 16px;
}

.chal_div {
    position: relative;
    width: 450px;
    height: 240px;
    padding: 5px;
    margin: 5px;
    border: solid 2px black;
    background-color: #c5c5c5;
    font-size: 16px;
    cursor: pointer;
}

@keyframes implode {
    0% {transform:scale(1); filter:blur(0px)}
    50% {transform:scale(0); filter:blur(5px)}
    100% {transform:scale(1); filter:blur(0px)}
}

.milestone_div {
    position: relative;
    width: calc(100% - 44px);
    height: calc(100% - 44px);
    border: solid 2px black;
    background-color: #c5c5c5;
    margin: 10px;
    padding: 10px;
}

#milestone_div_agh,
#milestone_div_agh .milestone_ctns > div {
    background-color: #505;
}

#milestone_div_gs,
#milestone_div_gs .milestone_ctns > div,
.reset_div.gs,
.reset_req.gs,
.reset_div.fun,
.reset_req.fun,
.upg_desc.funnyMachine,
.upgs_div.funnyMachine,
.upg_desc.fundry,
.upgs_div.fundry,
.upg_desc.sfrgt,
.upgs_div.sfrgt {
    background-color: #ffff79;
}

.reset_div.timewarp,
.reset_req.timewarp {
    background-color: #ffa600;
}

.reset_div.supernova,
.reset_req.supernova {
    background: radial-gradient(circle, #ffa500 0%, #ffc65c 25%, #ffa500 50%, #ffc65c 75%, #ffa500 100%);
    border-color: #ff6;
}

.reset_div.hsj,
.reset_req.hsj,
.reset_div.hsj2,
.reset_req.hsj2,
#milestone_div_hsj,
#milestone_div_hsj .milestone_ctns > div.bought {
    background: linear-gradient(45deg, #c5c5c5, #ffff79, #222);
}

.milestone_ctns {
    width: calc(100% - 4px);
    height: calc(100% - 37px);
    border: solid 2px black;
    background-color: #272727;
    overflow-y: auto;
    margin-top: 5px;
}

.milestone_ctns > div {
    width: calc(100% - 14px);
    padding: 5px;
    border: solid 2px black;
    background-color: #c5c5c5;
    font-size: 16px;
}

.milestone_ctns > div.bought {
    background-color: limegreen !important;
}

#gh_mil_ctns, #gs_mil_ctns, #planetary_mil_ctns {
    height: 100%;
}

#charge_mil {
    width: calc(100% - 24px);
    height: calc(100% - 84px);
    border: solid 2px black;
    background-color: #272727;
    overflow-y: auto;
    margin: 0 10px;
    font-size: 16px;
}

#charge_mil > div {
    width: 100%;
    color: grey;
}

#charge_mil > div.green {
    color: lime;
}

#fog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: #001c3b;
    opacity: 0.25;
    z-index: 1;
}

#star_chart_div {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

#star_chart_canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.sc_upg_div {
    position: relative;
    margin: 3px;
    width: 140px;
    height: 140px;
}

.sc_upg_ctn {
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.sc_upg_div > div:not(.choosed):hover > img.img_desc {
    transform: translateX(-50%) scale(1.06);
}

.sc_upg_div > div.choosed > img.img_desc {
    transform: translateX(-50%) scale(1.2);
}

.sc_upg_div > div > img.img_desc {
    position: absolute;
    top: 13%;
    width: 80%;
    height: 80%;
    left: 50%;

    transform: translateX(-50%);
    transition: transform 0.2s;

    pointer-events: none;
}

.sc_upg_div > div > img.img_res {
    position: absolute;
    bottom: 10%;
    width: 30%;
    height: 30%;
    left: 10%;

    transition: transform 0.2s;

    pointer-events: none;
}

.scu_cost {
    font-weight: bold;
    position: absolute;
    bottom: 0%;
    left: 50%;
    width: 100%;
    font-size: 14px;
    transform: translateX(-50%);
    color: lime;
    pointer-events: none;
}

.scu_amt {
    position: absolute;
    top: 0%;
    left: 50%;
    width: 100%;
    font-size: 20px;
    transform: translateX(-50%);
    color: yellow;
    pointer-events: none;
}

#sc_desc_div {
    width: 100%;
    background-color: #fff1;
    padding: 5px 0;
    margin-bottom: 3px;
    font-size: 16px;
}

#stats_div {
    border: solid 4px black;
    padding: 10px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    background-color: #222;

    overflow-y: auto;
}

#stats_tab_div {
    width: calc(100% - 10px);
    padding: 5px;
    background-color: #333;
    height: 150px;
    overflow-x: auto;
    overflow-y: hidden;

    display: flex;
    justify-content: start;

    border-radius: 10px;
}

.stats_tab_btn {
    min-width: 200px;
    height: calc(100%-15px);

    border-radius: 10px;
    border: solid 3px black;
    background-color: #222;
    flex-shrink: 0;

    margin: 5px;
    padding: 5px;

    cursor: pointer;
}

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

.stats_tab_btn > img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background-color: #fff1;
    margin-bottom: 3px;

    pointer-events: none;
}

.stats_tab_btn > div {
    font-size: 20px;
}

#stats_desc_div {
    min-height: 400px;
}

#stats_desc {
    font-size: 16px;
}

#lunar_obelisk_div {
    width: calc(100% - 44px);
    height: calc(100% - 44px);
    padding: 10px;
    background-color: #005bd1;
    box-shadow: inset 0px 0px 30px #b3f0ff, inset 0px 0px 30px #b3f0ff;
    border-color: #b3f0ff;
}

#void_obelisk_div {
    width: calc(100% - 44px);
    height: calc(100% - 44px);
    padding: 10px;
    background-color: #3c0053;
    box-shadow: inset 0px 0px 30px #f6b3ff, inset 0px 0px 30px #f6b3ff;
    border-color: #f6b3ff;
}

#lop_table {
    height: calc(100% - 144px);
    width: calc(100% - 4px);
    border: solid 2px black;
    background-color: #272727;
    overflow-y: scroll;
}

#lop_table > div,
#void_table > div {
    width: 100%;
    height: 120px;

    margin: 5px 0px;
}

#void_table {
    height: calc(100% - 64px);
    width: calc(100% - 4px);
    border: solid 2px black;
    background-color: #272727;
    overflow-y: scroll;
}

.lop_btn {
    position: relative;
    width: calc(100% - 8px);
    height: 88px;

    border: solid 4px white;
    background-color: #004094;
    border-radius: 10px;

    cursor: pointer;
}

.lop_btn * {
    pointer-events: none;
}

.lop_btn > img {
    position: absolute;
    top: 44px;
    left: 60px;

    width: 88px;
    height: 88px;

    transform: translate(-50%, -50%) scale(1.33);
}

.lop_btn > div {
    position: absolute;
    top: 50%;
    left: 120px;
    width: calc(100% - 120px);
    font-size: 16px;
    transform: translateY(-50%)
}

.lop_progress {
    width: calc(100% - 4px);
    height: 20px;

    border: solid 2px black;
    background-color: #002c66;
    border-radius: 10px;

    font-size: 14px;
}

#void_table .lop_btn {
    border: solid 4px darkmagenta;
    background-color: #2c003a;
}

#void_table .lop_progress {
    background-color: #2c003a;
}

#constellation_grid > .table_center {
    margin: auto;
    width: 630px;
}

.cs-grid {
    position: relative;
    width: 86px;
    height: 86px;
    border: solid 2px #00439b;
    background-color: black;

    font-size: 12px;
}

.cs-grid > img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.cs-grid > div {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}

#cs_btn_table {
    width: 100%;
    height: 50px;
    background-color: #0006;
    overflow-y: scroll;
}

#cs_btn_table > button {
    font-size: 16px;
    padding: 2px;
    border-width: 1px;
    width: 40px;
}

#cs_build_table {
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: scroll;
}

.cs-building {
    position: relative;
    width: calc(100% - 20px);
    height: 100px;
    margin: 5px 10px;
    background-color: #0004;
}

.cs-building > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    cursor: pointer;
}

.cs-building > div {
    position: absolute;
    top: 0;
    left: 100px;
    width: calc(100% - 100px);
    min-height: 100px;
}

#constellation_select > img {
    width: 75px;
    height: 75px;
}

#cs_effects,
#cs_presets,
#cs_dark {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.cs-preset {
    position: relative;
    width: calc(100% - 20px);
    min-height: 120px;
    margin: 5px 10px;
    background-color: #0004;
}

.cs-preset > button {
    font-size: 16px;
}

#offline_box, #map {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #0008;
    z-index: 2;
}

#offline_box > div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 200px;
    padding: 10px 20px;
    background-color: #0052af;
    border: solid 4px black;
    transform: translate(-50%, -50%);
    font-size: 16px;
}

#offline_progress {
    position: relative;
    width: calc(100% - 4px);
    height: 25px;
    border: solid 2px black;
    background-color: #aaa;
    margin: 10px 0px;
}

#offline_bar {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background-color: #0a0;
}

#map_name {
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: 50%;
    z-index: -1;
}

#map_table {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#map_table tr {
    display: table-row;
}

#map_table td {
    display: table-cell;
    width: 120px;
    height: 80px;
}

#map_table button {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-size: 12px;
}

.solar-upgs-bg {
    position: relative;

    border: solid 4px #ff0;
    box-shadow: inset 0px 0px 20px #ff0;
    padding: 4px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background: linear-gradient(90deg, #ff0 0%, #fa0 60px, #000 150px, #000 100%);

    display: flex;
}

#map_div_star > .solar-upgs-bg > div {
    position: relative;
    height: 100%;
}

.solar-tab-btn {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0px; padding: 0px;
}

.stb-img-icon {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%; height: 100%;

    background-size: 100px;
    background-position: center;
}

.solar-tab-btn.locked > .stb-img-icon {
    display: none;
}

.stb-img-locked {
    position: absolute;
    display: none;
    top: 0px; left: 0px;
    width: 100%; height: 100%;

    background-image: url(images/Icons/Lock.png);
    background-size: 100%;

    color: red;
    font-weight: bold;
    font-size: 14px;

    z-index: 1;
}

.solar-tab-btn.locked > .stb-img-locked {
    display: initial;
}

.solar_upg_div {
    position: relative;
    margin: 3px;
    width: 180px;
    height: 180px;
}

.solar_upg_ctn {
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.solar_upg_ctn.locked {
    cursor: default;
}

.solar_upg_ctn:not(.choosed):not(.locked):hover > img.img_desc {
    transform: translateX(-50%) scale(1.06);
}

.solar_upg_ctn.choosed > img.img_desc {
    transform: translateX(-50%) scale(1.2);
}

.solar_upg_ctn > img.img_desc {
    position: absolute;
    top: 13%;
    width: 80%;
    height: 80%;
    left: 50%;

    transform: translateX(-50%);
    transition: transform 0.2s;

    pointer-events: none;
}

.solar_upg_ctn > img.img_res {
    position: absolute;
    bottom: 10%;
    width: 30%;
    height: 30%;
    left: 10%;

    transition: transform 0.2s;

    pointer-events: none;
}

.solar_upg_ctn.locked > img.img_res,
.solar_upg_ctn.locked > .su_cost,
.solar_upg_ctn.locked > .su_amt {
    display: none;
}

.solar_upg_ctn.locked > img.img_lock,
.solar_upg_ctn.locked > .su_req {
    display: initial;
}

.solar_upg_ctn > img.img_lock {
    display: none;

    position: absolute;
    bottom: 0px;
    width: 85%;
    height: 85%;
    left: 50%;

    transform: translateX(-50%);

    pointer-events: none;
}

.su_cost {
    font-weight: bold;
    position: absolute;
    bottom: 0%;
    left: 50%;
    width: 100%;
    font-size: 18px;
    transform: translateX(-50%);
    color: lime;
    pointer-events: none;
}

.su_amt {
    position: absolute;
    top: 0%;
    left: 50%;
    width: 100%;
    font-size: 24px;
    transform: translateX(-50%);
    color: yellow;
    pointer-events: none;
}

.su_req {
    display: none;

    position: absolute;
    top: 10%;
    left: 50%;
    width: 100%;
    font-size: 36px;
    transform: translateX(-50%);
    color: red;
    pointer-events: none;
    font-weight: bold;
}

#solar_upgs_res {
    position: absolute;
    top: 0px;
    left: 5px;
    font-size: 16px;
    text-align: left;
}

#su_desc_div {
    position: absolute;
    bottom: 5px;
    width: 100%;
    background-color: #fff1;
    padding: 5px 0;
    margin-bottom: 3px;
    font-size: 16px;
}

#sn_tier_div {
    position: relative;
    width: 300px;
    height: 100%;
    overflow: hidden;
}

#sn_tier_div > div {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#sn_tier {
    position: relative;

    width: 160px;
    height: 160px;
    background-image: url('images/Bases/SupernovaBase.png');
    background-size: 160px;
    margin: auto;
}

#sn_tier > div {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 80px;

    font-weight: bold;
    text-shadow: none;
    background: -webkit-linear-gradient(#ff0,#ff0,#fa0,#ff0,#ff0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #000;
}

#sn_milestones {
    width: calc(100% - 300px);
    height: 100%;
    overflow-y: scroll;
}

.sn-milestone {
    width: 100%;
    background: linear-gradient(45deg, #10004b, #000);
    margin: 3px 0;
    padding: 5px 0;
    font-size: 16px;
}

.sn-milestone > h3 {
    text-shadow: none;
    background: -webkit-linear-gradient(left,#00ffbf,#ff0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reset_div.sunrise,
.reset_req.sunrise {
    background-color: #fc0;
    border-color: lightyellow;
}

.reset_div.sunset,
.reset_req.sunset {
    background-color: #f80;
    border-color: #fff895;
}

.reset_div.twilight,
.reset_req.twilight {
    background-color: #5b0e88;
    border-color: #cf95ff;
}

.solarian-div {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding: 5px;
    border: solid 5px yellow;
    background: linear-gradient(45deg, black, #001, black, #001, black);
    background-size: 500px 500px;
    box-shadow: inset 0px 0px 30px yellow, inset 0px 0px 30px yellow;
}

#solarian_stage {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
}

#stage_enemy {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}

#stage_player {
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0px;
}

.progress-bar {
    --percent: 50%;
    
    position: relative;
    margin: auto;
    width: 400px;
    height: 30px;
    border: solid 2px black;
    background-color: #111;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    min-width: 0px;
    width: var(--percent);
    max-width: 100%;
    background-color: limegreen;
}

.progress-bar > div {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    z-index: 1;
}

#enemy_bar {
    width: 100%;
    font-size: 16px;
}
#enemy_bar.progress-bar {
    background-color: #300;
}

#attack_bar.progress-bar {
    background-color: #033;
}
#attack_bar.progress-bar::after {
    background-color: #099;
}

.stage-stat {
    position: relative;
    width: 300px;
    height: 75px;
    align-content: center;
}

.stage-stat > img {
    position: absolute;
    top: 0px; left: 0px;
    width: 75px; height: 75px;
}

.stage-stat > div {
    font-size: 24px;
    position: absolute;
    top: 50%; left: 80px;
    width: 220px; max-height: 75px;
    transform: translateY(-50%);
    text-align: left;
}

#enemy_soul {
    color: cyan;
}

#sol_offense {
    color: #f44;
}

.solarian-list {
    width: calc(100% - 40px);
    height: calc(100% - 70px);
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 20px;
    margin-top: 0px;
}

.solarian-list.forming {
    height: calc(100% - 150px);
}

.material-div {
    position: relative;
    width: 100%;
    height: 120px;
    margin: 5px 0px;
}

.material-div.display {
    height: 90px;
}

.material-div > img {
    position: absolute;
    top: 0px; left: 0px;
    width: 90px; height: 90px;
    transform: scale(1.2);
}

.material-name {
    position: absolute;
    bottom: 30px; right: 0px;
    text-align: right;
    font-size: 18px;
    color: #888;
}

.material-div.display .material-name {
    bottom: 0px;
}

.material-amount {
    position: absolute;
    top: 45px; left: 90px;
    width: calc(100% - 90px); max-height: 90px;
    text-align: left;
    font-size: 28px;
    transform: translateY(-50%);
}

.material-amount > span {
    font-size: 18px;
    color: #888;
}

.material-div > .progress-bar {
    position: absolute;
    top: 90px; left: 0px;
    width: calc(100% - 4px);
    height: 26px;
    background-color: #003a26;
}

.material-div > .progress-bar::after {
    background-color: #03c07e;
}

.material-div > .progress-bar > div {
    font-size: 18px;
}

.forming-div {
    position: relative;
    width: 100%;
    height: 180px;
    margin: 5px 0px;
}

.forming-title {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%;
    font-size: 20px;
}

.forming-div > img {
    position: absolute;
    top: 20px; left: 0px;
    width: 90px; height: 90px;
}

.forming-div > button {
    position: absolute;
    top: 20px; right: 50px;
    width: 288px; height: 40px;
}

.forming-div > .progress-bar {
    position: absolute;
    left: 100px;
    width: calc(100% - 494px);
    height: 31px;
}

.forming-div .f-level {
    top: 30px;
    background-color: #003a05;
}

.forming-div .f-level::after {
    background-color: #03c00d;
}

.forming-div .f-rank {
    top: 65px;
    background-color: #00333a;
}

.forming-div .f-rank::after {
    background-color: #03bac0;
}

.forming-res {
    position: absolute;
    top: 110px; left: 0px;
    width: 100%;
    height: 70px;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    justify-content: start;
}

.forming-res > div {
    position: relative;
    flex-shrink: 0;
    width: 200px;
    height: 50px;
}

.forming-res > div > img {
    position: absolute;
    top: 0px; left: 0px;
    width: 50px; height: 50px;
}

.forming-res > div > div {
    position: absolute;
    top: 25px; left: 50px;
    width: calc(100% - 50px); max-height: 25px;
    text-align: left;
    font-size: 16px;
    transform: translateY(-50%);
}

.forming-boost {
    position: absolute;
    top: 60px;
    right: 0px;
    width: 388px;
    height: 50px;
    font-size: 14px;
}

#forming_tab_table {
    display: flex;
    justify-content: left;

    width: 100%;
    height: 80px;
    overflow-y: hidden;
    overflow-x: auto;
}

#forming_tab_table > button {
    display: block;
    width: 20%;
    flex-shrink: 0;
}

#fb_stats {
    background-color: lightcoral;
}
#fb_stats:hover {
    background-color: #d46363 !important;
}

#fb_basic {
    background-color: yellow;
}
#fb_basic:hover {
    background-color: gold !important;
}

#fb_collect {
    background-color: orange;
}
#fb_collect:hover {
    background-color: darkorange !important;
}

#fb_restore {
    background-color: lightblue;
}
#fb_restore:hover {
    background-color: #56d5ff !important;
}

#fb_dark {
    background-color: #3f003f;
}
#fb_dark:hover {
    background-color: #4b004b !important;
}

#fb_fund {
    background-color: #00804f;
}
#fb_fund:hover {
    background-color: #30b884 !important;
}

#fb_adv {
    background-color: #15ff00;
}
#fb_adv:hover {
    background-color: #00b909 !important;
}

.level-color {
    color: #00ff0d;
}

.rank-color {
    color: #00f7ff;
}

.compression-div {
    width: 480px;
    height: 180px;
    border: solid 4px white;
    padding: 5px 10px;
    margin: 5px;
}

.compression-div:nth-child(1) {
    background-color: #ffd70044;
}

.compression-div:nth-child(2) {
    background-color: #bbff0044;
}

.compression-div:nth-child(3) {
    background-color: #00f7ff44;
}

.compression-div:nth-child(4) {
    background-color: #a7fcff44;
}

.compression-div:nth-child(5) {
    background-color: #fdff6d44;
}

.compression-div:nth-child(6) {
    background-color: #d4d4d444;
}

#star_btn {
    width: 400px;
    height: 80px
}

.star-milestone {
    position: relative;
    width: 400px; height: 150px;
    margin: 5px; padding: 5px;
    color: black;
    font-weight: bold;
    background-color: white;
    overflow: hidden;
}

.star-milestone.achieved {
    background-color: lightskyblue;
}

.star-milestone > div {
    position: absolute;
    text-shadow: none;
}

.star-milestone b {
    text-shadow: none;
}

.sm-tier {
    bottom: -45px;
    right: -10px;
    font-size: 180px;
    font-weight: bold;
    color: #0006;
    z-index: 0;

    transform: rotate(-10deg);
}

.sm-bonus {
    top: 10px;
    width: 100%;
    font-size: 16px;
}

.sm-req {
    bottom: 5px;
    left: 5px;
    width: calc(100% - 10px);
    text-align: left;
    font-size: 14px;
}

#collecting_tab_table {
    display: flex;
    justify-content: center;

    width: 100%;
    height: 80px;
}

#collecting_tab_table > button {
    display: block;
    width: 100%;
}

#l_map_tabs {
    overflow-x: hidden;
    overflow-y: scroll;
}

#l_map_tabs > button {
    margin: 0px;
    display: block;
    width: 100%;
    height: 80px;
}

#lunarian_map {
    position: absolute;
    height: 100%;
    right: 0px;
}

#lunarian_map_desc {
    position: relative;
    width: 100%; height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

#lunarian_buttons {
    min-height: 50px;
}

.lunar_di {
    display: inline-block;
    margin: 5px;
    background-color: #fff1;
}

.lunar_di > img {
    width: 100px; height: 100px;
    filter: brightness(0);
}

.lunar_di.discovered > img {
    filter: brightness(1);
}

#lunar_inventory {
    display: flex;
    justify-content: start;
    flex-flow: row wrap;
    width: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

.lunar-item {
    position: relative;
    width: 410px;
    height: 160px;
    margin: 5px;
    border: solid 2px white;
    border-radius: 10px;
    background-color: black;
}

.lunar-item > img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 140px;
    height: 140px;
}

.item-level {
    position: absolute;
    top: 140px;
    left: 0px;
    width: 140px;
    height: 20px;
    font-size: 14px;
}

.item-upgrade {
    position: absolute;
    top: 140px;
    left: 150px;
    width: 250px;
    height: 20px;
    font-size: 14px;
    background-color: green;
    border-radius: 5px;

    cursor: pointer;
}

.item-upgrade.locked {
    background-color: darkred;
    cursor: default;
}

.item-upgrade.maxed {
    background-color: mediumvioletred;
    cursor: default;
}

.item-name {
    position: absolute;
    top: 0px;
    left: 140px;
    width: 270px;
    height: 20px;
    font-weight: bold;
    font-size: 14px;
}

.item-desc {
    position: absolute;
    top: 20px;
    left: 140px;
    width: 270px;
    height: 120px;
    text-align: left;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 12px;
}

#drag_stats {
    position: absolute;
    top: 0px;
    left: 0px;
}

.drag-div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    background-color: #0008;
}

.drag-div * {
    text-shadow: none;
}

.drag-top {
    position: relative;
    width: 100%;
    height: 24px;
    font-size: 18px;
    display: flex;
}

.drag-top > img {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.drag-top > div {
    width: calc(100% - 48px);
}

.drag-list {
    font-size: 16px;
    width: 100%;
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.drag-item {
    width: 100%;
    position: relative;
    height: 60px;
}

.drag-item * {
    pointer-events: none;
}

.drag-item > img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 60px;
    height: 60px;
}

.drag-item > div {
    position: absolute;
    top: 50%;
    left: 60px;
    width: calc(100% - 60px);
    max-height: 60px;
    transform: translateY(-50%);
}

.drag-small-text {
    font-size: 12px;
    color: lightgray;
}

.synthesis-slot {
    position: relative;
    width: calc(100% - 10px);
    height: 100px;
    margin: 5px;
    font-size: 16px;
}

.ss-name {
    position: absolute;
    top: 50%;
    left: 0px;
    z-index: 1;
    transform: translateY(-50%);
}

.ss-icon {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px; height: 100px;
}

.ss-mid {
    position: absolute;
    top: 50%;
    left: 110px;
    width: calc(100% - 320px);
    transform: translateY(-50%);
}

.ss-btn {
    position: absolute;
    top: 50px;
    right: 0px;
    width: 196px; height: 32px;
    padding: 0px 0px;
    font-size: 16px;
}

.ss-mid > .progress-bar {
    width: 100%;
}

.ss-progress::after {
    background-color: lightgray;
}

.ss-level {
    position: absolute;
    bottom: 50px;
    right: 0px;
    width: 200px;
    font-size: 16px;
}

.synthesis-insert {
    position: relative;
    width: calc(100% - 14px);
    height: 100px;
    margin: 5px;
    font-size: 16px;
    background-color: gray;
    border: solid 2px black;
    cursor: pointer;
}

.si-desc {
    position: absolute;
    top: 50%;
    left: 100px;
    width: calc(100% - 100px);
    transform: translateY(-50%);
}

.si-desc > button {
    font-size: 16px;
}

.ss-req {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 100%;
    font-size: 24px;
}