html {
    background-image: url(../static/blue_space_with_planets_by_darkdissolution-updCont.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgb(9, 15, 24);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

:root {
    --playerbase_color: #f8f3bc;
    --mining_color: #ac9483;
}

background- {
    display: flex;
    justify-content: center;
}

map-with-interface- {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    width: calc(100vh - 2.4em);
}

@media (min-aspect-ratio: 1) {
    background- {
        height: 100vh;
        width: 100vw;
    }
}

@media (max-aspect-ratio: 1) {
    background- {
        height: 100vw;
        width: 100vh;
    }
}

map- {
    width: 100%;
    height: 100%;
    user-select: none;
    touch-action: none;
}

.panzoom-parent-galaxy {
    position: relative;
    box-sizing: border-box;

    background-color: black;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../static/Sirius_Map.png);
    background-size: cover;
    border: 0.2em rgb(25, 47, 96) solid;
    height: 100%;

    /*plugin adds on its own*/
    overflow: hidden;
    user-select: none;
    touch-action: none;
}

.panzoom-parent-system {
    background: rgb(9, 12, 21);

    position: relative;
    box-sizing: border-box;
    border: 0.2em rgb(25, 47, 96) solid;
    height: 100%;
}

.panzoom {
    box-sizing: border-box;

    height: 100%;
    top: 2.4em;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;

    /*plugin adds on its own*/
    cursor: move;
    user-select: none;
    touch-action: none;
    transform-origin: 50% 50%;
    transition: none;
    transform: scale(1) translate(0px, 0px);
}

menu- {
    display: grid;
    row-gap: 2px;
    grid-template-columns: 14.28% 14.28% 14.28% 14.28% 14.28% 14.28% 14.28%;
    grid-template-rows: 30% 70%;
    background: #000 url(../static/nnwall.jpg) repeat scroll 0% 0%;
    box-shadow: 0em 0em 0.5em 0em #1EA6C5;
    border: 0.2em solid #1EA6C5;
    color: #FFF;
    min-height: 60px;
}

/* .button_galaxy {
    grid-row: span 2 / span 2;
    grid-column-start: 6;
    grid-row-start: 1;
} */

.disabled {
    color: #AAA;
}

.toggle-input {}

menu- div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

menu- .top {
    margin-top: 5px;
}

menu- .bottom {
    margin-bottom: 5px;
}


centeralizer- {
    height: 100%;
    width: 100%;
    position: absolute;
}

system- {
    position: absolute;
    height: 0.65em;
    width: 0.65em;
    margin-top: -0.325em;
    margin-left: -0.325em;
    border-color: white;
}

.jumphole {
    position: absolute;
    height: 1.5em;
    width: 1.5em;
    margin-top: -0.75em;
    margin-left: -0.75em;
    border-color: white;
    /* box-shadow: 0 0 0.7em 1em rgba(250, 0, 0, 0.1) inset; */
}

.jumphole img {
    /* box-shadow: 0 0 0.7em 0.3em rgba(250, 0, 0, 0.1); */
}

.tradelane {
    position: absolute;
    height: 0.75em;
    width: 0.75em;
    margin-top: -0.375em;
    margin-left: -0.375em;
    border-color: white;
    box-shadow: 0 0 0.7em 0.2em rgba(137, 136, 136, 0.15);
}

.zoomedOut .tradelane img {
    visibility: hidden;
}

.zoomedOut .tradelane {
    background: gray;
    height: 0.2em;
    width: 0.3em;
    margin-top: -0.1em;
    margin-left: -0.15em;
}

.zoomedOut .base img {
    visibility: hidden;
}

.zoomedOut .base {
    height: 0.25em;
    width: 0.25em;
    margin-top: -0.125em;
    margin-left: -0.125em;
    background: white;
}

.zoomedOut .playerbase {
    height: 0.25em;
    width: 0.25em;
    margin-top: -0.125em;
    margin-left: -0.125em;
    background: var(--playerbase_color);
}

.zoomedOut .mining,
.zoomedIn .mining {
    height: 0.25em;
    width: 0.25em;
    margin-top: -0.125em;
    margin-left: -0.125em;
    background: var(--mining_color);
}

.star {
    position: absolute;
    border-color: white;
    border-radius: 50%;
}

.base {
    position: absolute;
    border-color: white;

    height: 0.75em;
    width: 0.75em;
    margin-top: -0.375em;
    margin-left: -0.375em;
}

.playerbase {
    position: absolute;
    border-color: white;

    height: 0.75em;
    width: 0.75em;
    margin-top: -0.375em;
    margin-left: -0.375em;
}

.mining {
    position: absolute;
    border-color: white;

    height: 0.75em;
    width: 0.75em;
    margin-top: -0.375em;
    margin-left: -0.375em;
}

.planet {
    position: absolute;
    border-color: white;
    height: 0.75em;
    width: 0.75em;
    margin-top: -0.375em;
    margin-left: -0.375em;
    border-radius: 50%;
}

.wreck {
    position: absolute;
    width: 0.4em;
    height: 0.4em;
    margin-top: -0.2em;
    margin-left: -0.2em;
}

.wreck img {
    position: absolute;
}

.planet img {
    border-radius: 50%;
}

.jumphole,
.tradelane,
.star,
.base,
.planet,
.wreck,
.zone,
.playerbase,
.mining,
.zone {
    cursor: pointer;
}

.jumphole,
.base,
.playerbase,
.mining {
    z-index: 100;
}

.tradelane,
.star,
.planet,
.wreck {
    z-index: 99;
}

.jumphole img,
.tradelane img,
.base img,
.planet img,
.wreck img,
.playerbase img,
.mining img {
    width: 100%;
    height: 100%;
}

/* .contents div[data-ids-info]:hover,
.contents div[data-jump-dest]:hover,
.contents div.mineable:hover  */
system-:hover,
.jumphole:hover,
.tradelane:hover,
.star:hover,
.base:hover,
.playerbase:hover,
.planet:hover,
.wreck:hover,
.zone:hover,
.mining:hover {
    box-shadow: 0em 0em 0.4em 0.2em rgb(237, 112, 7), inset 0em 0em 0.15em 0em rgb(237, 112, 7) !important;
    color: rgb(255, 167, 6);
}

system-:hover system-label,
.jumphole:hover system-label,
.tradelane:hover system-label,
.star:hover system-label,
.base:hover system-label,
.playerbase:hover system-label,
.mining:hover system-label,
.planet:hover system-label,
.wreck:hover system-label,
.zone:hover system-label {
    box-shadow: 0em 0em 0.4em 0.2em rgb(237, 112, 7), inset 0em 0em 0.15em 0em rgb(237, 112, 7);
    color: rgb(255, 167, 6);
}

.playerbase system-label {
    color: var(--playerbase_color);
}

.mining system-label {
    color: var(--mining_color);
}

.atmosphere {
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 0, 0.3);
    z-index: -1;
    box-sizing: border-box;
}

.zoomedOut .jumphole img {
    visibility: hidden;
}

.zoomedOut .jumphole {
    background: red;
    box-shadow: 0em 0em 0.6em 0.4em rgba(256, 0, 0, 0.5);
}

.zoomedOut .jumphole.jh_jumpgate {
    background: gray;
    box-shadow: 0em 0em 0.6em 0.4em rgba(128, 128, 128, 0.5);
}

.zoomedOut .jumphole.jh_unstable_cargo_limit {
    background: rgba(219, 72, 55, 0.9);
    box-shadow: 0em 0em 0.6em 0.4em rgba(219, 72, 55, 0.5);
}

.zoomedOut .jumphole.jh_fighter_only {
    background: rgba(1, 255, 13, 0.9);
    box-shadow: 0em 0em 0.6em 0.4em rgba(1, 255, 13, 0.5);
}

.zoomedOut .jumphole.jh_alien {
    background: rgba(152, 69, 255, 0.9);
    box-shadow: 0em 0em 0.6em 0.4em rgba(152, 69, 255, 0.5);
}

.zoomedOut .jumphole.jh_unknown {
    background: rgba(247, 4, 255, 0.849);
}

.zoomedOut .jumphole {
    border-radius: 100%;
    width: 0.5em;
    height: 0.5em;
    margin-top: -0.25em;
    margin-left: -0.25em;
}

.zoomedIn .jumphole img {
    visibility: inherit;
}

cycle- {
    border-color: #2299F5;
    border-width: 3px;
    border-radius: 100%;
    border-style: solid;
    background-color: rgb(36, 36, 36);
    left: -25%;
    top: -25%;
    position: absolute;
    height: 0.65em;
    width: 0.65em;
}

system-label-wrap {
    color: transparent;
    /* make the text invisible */
    user-select: none;
    /* prevent selection of the text */
    position: absolute;
    left: 50%;

    font-family: var(--font-family);
    font-size: 0.8rem;
    position: absolute;
    display: inline-block;
    top: 1em;
    white-space: nowrap;
}

map-.system system-label-wrap {
    font-size: 1.0rem;
}

.zoomed08 map-.system system-label-wrap {
    font-size: 0.8rem;
}

.zoomed06 map-.system system-label-wrap {
    font-size: 0.6rem;
}

.zoomed04 map-.system system-label-wrap {
    font-size: 0.4rem;
}

system-label {
    margin-left: 0px;
    left: -50%;
    position: absolute;
    display: inline-block;
    top: 0.3em;
    white-space: nowrap;
    text-shadow: 0em 0em 0.3em black !important;
    color: white;
}



system-title {
    position: absolute;
    bottom: 0.1em;
    color: white;
    text-align: center;
    width: 100%;
    font-family: var(--font-family);
    font-size: 3em;
    padding: 0;
    margin: 0;
    color: rgb(135, 195, 224);

    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

connection- {
    position: absolute;
    z-index: -1;
}

line- {
    position: absolute;
    width: 0.125em;
    background-color: rgba(69, 150, 255, 0.9);
    display: block;
}