.rNav {
    position: fixed;
    right: 50px;
    top: 225px;
}

.rNavHidden {
    display: none;
}

.shownOnSmall {
    display: none;
}

.shownOnMid {
    display: none;
}

@media screen and (max-device-width: 1279px), (max-width: 1279px) { /*and (min-device-width: 600px) {*/
    .shownOnFull { display: none; }
    .shownOnMid { display: table; }
    .shownOnSmall { display: none; }
    #unitsTable { width: 73% !important; }
    #unitsTable tr {
        height: 50px;
        min-height: 50px;
    }
}

/*@media screen and (max-device-width: 600px) {
    .shownOnFull { display: none; }
    .shownOnMid { display: none; }
    .shownOnSmall { display: table; }
}*/

@font-face {
    font-family: 'Cinzel';
    src: url(../fonts/Cinzel-Medium.otf);
    font-variant-numeric: tabular-nums;
}
@font-face {
    font-family: 'Cinzel';
    src: url(../fonts/Cinzel-ExtraBold.otf);
    font-variant-numeric: tabular-nums;
    font-weight: bold;
}

#shadowDiv {
    width: 100%;
    height: 100%;
    padding-bottom: 200px;
    padding-top: 20px;
}

.tooltip {
    position: relative;
}

.tooltip::before {
    white-space: pre;
    background-color: black;
    border: 3px solid white;
    color: white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    border-radius: 4px;
    content: attr(data-title);
    display: none;
    font: 400 13.3333px Arial;
    padding: 2px 5px;
    position: absolute;
    top: -20px;
    left: 5px;
    z-index: 1;
}

.tooltip:hover::before {
    display: block;
}

.tooltip::before:empty {
    display: none;
}

.achTooltip {
    position: relative;
}

.achTooltip::before {
    white-space: pre;
    background-color: black;
    border: 3px solid white;
    color: white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    border-radius: 4px;
    content: attr(data-title);
    display: none;
    font: 400 13.3333px Arial;
    padding: 2px 5px;
    max-width: 116px;
    min-width: 116px;
    text-align: center;
    white-space: pre-wrap;
    position: absolute;
    top: -20px;
    left: 0px;
    z-index: 1;
}

.achTooltip:hover::before {
    display: inline-block;
}

.achTooltip::before:empty {
    display: none;
}

.astralColors {
    font-size: 125%;
    color: #1c8a2e;
    font-variant-numeric: tabular-nums;
}

.normalColors {
    font-size: 125%;
    color: white;
    font-variant-numeric: tabular-nums;
}

.pageTab {
    min-height: 1024px;
}

html, body {
    margin: 0px;
    padding: 0px;
    
    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

body {
    color: white;
    background-color: black;
    font-family: 'Cinzel', serif;
    font-size: 13pt;
    overflow: auto;
    overflow: overlay;;
}

.scrollbar::-webkit-scrollbar {
    width: 12px;
    opacity: 0;
}

.scrollbar::-webkit-scrollbar-track {
    opacity: 0;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
    border: 1px double rgb(255, 255, 255, 0.4);
    border-radius: 9px;
    opacity: 0.5;
}

.hidden-scrollbar::-webkit-scrollbar-thumb {
    visibility: hidden !important;
}

#game {
    width: 1280px;
    margin: auto;
    display: none;
}

#help {
    width: 1024px;
    margin: auto;
    text-align: center;
}

#changelog {
    width: 1024px;
    margin: auto;
    text-align: center;
}

#helpDiv {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14pt;
    line-height: 125%;
    text-align: center;
    border: 1px solid white;
    max-height: 400px;;
    overflow-y: auto;
    padding: 10px;
}

.helpPageDiv {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14pt;
    line-height: 125%;
    text-align: center;
}

.changelogPageDiv {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14pt;
    line-height: 125%;
    text-align: center;
}

#popupContainer {
    position: fixed;
    top: 55px;
    right: 50%;
    height: 200px;
    -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
            transform: translateX(200%);
    pointer-events: none;
    z-index: 8;
}

.popup {
    position: absolute;
    left: 50%;
	top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: black;
    border: 3px solid white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    width: 300px;
    border-radius: 4px;
    z-index: 2;
    display: none;
}

.confPopup {
    position: fixed;
    left: 50%;
	top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: black;
    border: 3px solid white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    width: 400px;
    border-radius: 4px;
    z-index: 9;
}

.cPopup {
    position: absolute;
    left: 50%;
	top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: black;
    border: 3px solid white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    width: 350px;
    border-radius: 4px;
    z-index: 2;
}

.gPopup {
    position: fixed;
    left: 50%;
	top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: black;
    border: 3px solid white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    width: 320px;
    border-radius: 4px;
    z-index: 8;
    display: none;
}

.giPopup {
    position: fixed;
    left: 50%;
	top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: black;
    border: 3px solid white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    width: 330px;
    min-width: 330px;
    height: 235px;
    min-height: 235px;
    border-radius: 4px;
    z-index: 8;
}

.gePopup {
    position: fixed;
    left: 50%;
	top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: black;
    border: 3px solid white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    width: 330px;
    min-width: 330px;
    height: 235px;
    min-height: 235px;
    border-radius: 4px;
    z-index: 8;
}

.gSpecPopup {
    position: fixed;
    left: 50%;
	top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: black;
    border: 3px solid white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    width: 520px;
    min-width: 520px;
    height: 250px;
    min-height: 250px;
    padding: 10px;
    border-radius: 4px;
    z-index: 8;
}

.offPopup {
    position: absolute;
    text-align: center;
    background-color: black;
    border: 3px solid white;
    width: 300px;
    border-radius: 4px;
    z-index: 2;
    display: none;
}

.dPopup {
    position: fixed;
    top: 150px;
    right: 50px;
    text-align: center;
    background-color: black;
    border: 3px solid white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    width: 350px;
    border-radius: 4px;
    z-index: 8;
    min-height: 400px;
    max-height: 600px;
    overflow: auto;
    overflow: overlay;;
}

.dPopup::-webkit-scrollbar {
    width: 10px;
    opacity: 0;
}

.dPopup::-webkit-scrollbar-track {
    margin-top: 46px;
    opacity: 0;
}

.dPopup::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
    border: 1px double rgb(255, 255, 255, 0.4);
    border-radius: 9px;
    opacity: 0.5;
}

.bpopup {
    position: absolute;
    left: 50%;
	top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    background-color: black;
    border: 3px solid white;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    width: 300px;
    border-radius: 4px;
    padding: 10px;
    z-index: 2;
    display: block;
}

.optRow {
    margin: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.optButCell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.milestonePopup {
    position: fixed;
    right: 50px;
	top: 150px;
    text-align: center;
    background-color: black;
    border: 3px solid #661503;
    -webkit-box-shadow: 3px 3px #424242;
            box-shadow: 3px 3px #424242;
    height: 600px;
    width: 400px;
    overflow: auto;
    overflow: overlay;;
    border-radius: 4px;
    z-index: 8;
}

h1 {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 13pt;
}

h2 {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 16pt;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

h3 {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 18pt;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 13pt;
}

h5 {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 24pt;
}

h6 {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 15pt;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}

button:focus, select:focus {
    outline: none;
}

button > * {
    pointer-events: none;
}

option:active, option.active {
    background-color: white;
    color: black;
}

.zapBut {
    color: white;
    width: 360px;
    height: 100px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 18pt;
    font-weight: bold;
}

.zapBut.can {
    border: 1px solid #460573;
    background-color: #170424;
    cursor: pointer;
}

.zapBut.can:hover {
    background-color: #460573;
}

.zapBut.can:active {
    background-color: black;
    color: #460573;
}

.unitBut {
    color: white;
    font-style: bold;
    border-radius: 4px;
}

.unitBut.can {
    background-color: #170424;
    border: 1px solid #460573;
    cursor: pointer;
}

.unitBut.cant {
    background-color: #4b4b4b;
    border: 1px solid #4b4b4b;
}

.buyerTog {
    width: 180px;
    height: 35px;
}

.single {
    width: 180px;
    height: 35px;
}

.max {
    width: 120px;
    height: 35px;
}

.unitMax {
    color: white;
    background-color: #170424;
    font-style: bold;
    width: 120px;
    height: 35px;
    border: 1px solid #460573;
    cursor: pointer;
    border-radius: 4px;
}

.unitBut.can:hover {
    background-color: #460573;
} 

.unitButT {
    color: white;
    font-style: bold;
    border-radius: 4px;
}

.unitButT.can {
    background-color: #006ba0;
    border: 1px solid white;
    cursor: pointer;
}

.unitButT.cant {
    background-color: #4b4b4b;
    border: 1px solid #4b4b4b;
}

.unitMaxT {
    color: white;
    background-color: #006ba0;
    font-style: bold;
    width: 120px;
    height: 35px;
    border: 1px solid white;
    cursor: pointer;
    border-radius: 4px;
}

.unitButT.can:hover {
    background-color: white;
    color: #006ba0;
} 

#headerDisplayTable {
    table-layout: fixed;
    width: 1280px;
    text-align: center;
    border-collapse: collapse;
    margin: auto;
}

.dimensionRow {
    line-height: 35px;
    width: 85%;
    margin: 5px auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.dimensionHeader {
    line-height: normal !important;
    font-weight: 900;
    margin: 25px auto;
}

.dimensionElement {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.helpBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 75px;
    height: 25px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 10pt;
    margin: 10px;
}

.tabBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 140px;
    height: 45px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 15pt;
    margin: 2px;
    padding: 0px;
}

.tabButSmall {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 200px;
    height: 60px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 15pt;
}

.helpButSelected {
    background-color: black !important;
}

.helpButSelected:hover {
    background-color: #141414 !important;
}

.tabButSelected {
    background-color: black !important;
    cursor: default !important;
}

.tabButNotify {
    -webkit-box-shadow: 0px 0px 20px 10px goldenrod;
            box-shadow: 0px 0px 20px 10px goldenrod;
}

.tabButIndirectNotify {
    -webkit-box-shadow: 0px 0px 20px 10px silver;
            box-shadow: 0px 0px 20px 10px silver;
}

.tabBut:hover {
    background-color: #525252;
}

.navMenu {
    height: 50px;
    min-height: 50px;
    width: 1280px;
    min-width: 1280px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: auto;
}

.subNavMenu {
    height: 40px;
    min-height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 7px auto;
}

.displayBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 250px;
    height: 20px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 0px;
    font-family: 'Cinzel', serif;
    font-size: 10pt;
}

.displayBut:hover {
    background-color: #525252;
}

.displayButSkinny {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 200px;
    height: 20px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 5px;
    font-family: 'Cinzel', serif;
    font-size: 10pt;
}

.displayButSkinny:hover {
    background-color: #525252;
}

.respecButSkinny {
    color: white;
    background-color: #3b1a12;
    font-style: bold;
    width: 225px;
    height: 50px;
    border: 3px double white;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 5px;
    font-family: 'Cinzel', serif;
    font-size: 10pt;
}

.respecButSkinny:hover, .ethBut:hover {
    background-color: white;
    color: #3b1a12;
    border: 6px double #3b1a12;
}

.ethBut {
    color: white;
    background-color: #3b1a12;
    font-style: bold;
    height: 50px;
    border: 6px double white;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 5px;
    font-family: 'Cinzel', serif;
    font-size: 11pt;
}

.optBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 150px;
    height: 50px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 12pt;
    margin: 5px;
}

.confirmBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 100px;
    height: 40px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 12pt;
}

.favBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 150px;
    height: 50px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 12pt;
    margin: 2px;
}

.optionsTable {
    margin-top: 20px;
}

.statsTableText {
    width: 100%;
    text-align: center;
    margin: 25px auto;
}

.pastRunsTable {
    width: 60%; 
    margin: auto;
    text-align: center;
}

.statsTables {
    width: 740px;
    text-align: center;
    margin: auto;
}

.statsTableDiv {
    text-align: center;
    width: 600px;
    margin: auto;
}

.statsHeader {
    border-bottom: 1px solid white;
    font-weight: bold;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.statsRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.resourceCell, .resourceCellH {
    width: 50%;
    min-width: 50%;
    border-right: 1px solid white;
    font-weight: bold;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.totalCell, .totalCellH, .bestCell, .bestCellH {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.endBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 175px;
    height: 50px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 12pt;
    margin-top: 15px;
}

.confirmBut:hover, .optBut:hover, .endBut:hover {
    background-color: #525252;
}

.subTabBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 200px;
    height: 35px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 13pt;
    margin: 2px;
}

.subTabBut:hover {
    background-color: #525252;
}

.helpPageBut {
    color: white;
    background-color:black;
    font-style: bold;
    width: 350px;
    height: 100px;
    border: 1px solid#e8000d;
    margin: 10px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 24pt;
    border-radius: 4px;
}

.helpPageButSelected {
    color: white;
    background-color:#e8000d;
    font-style: bold;
    width: 350px;
    height: 100px;
    border: 1px solid#e8000d;
    margin: 10px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 24pt;
    border-radius: 4px;
}

.helpPageBut:hover {
    background-color: #e8000d;
}

.helpPageButSelected:hover {
    background-color:black;
}

.changelogPageBut {
    color: white;
    background-color:black;
    font-style: bold;
    width: 100px;
    height: 30px;
    border: 1px solid#e8000d;
    margin: 10px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 18pt;
    border-radius: 4px;
}

.changelogPageButSelected {
    color: white;
    background-color:#e8000d;
    font-style: bold;
    width: 100px;
    height: 30px;
    border: 1px solid#e8000d;
    margin: 10px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 18pt;
    border-radius: 4px;
}

.changelogSectionBut {
    color: white;
    background-color:black;
    font-style: bold;
    width: 200px;
    height: 75px;
    border: 1px solid#e8000d;
    margin: 10px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 18pt;
    border-radius: 4px;
}

.changelogSectionButSelected {
    color: white;
    background-color:#e8000d;
    font-style: bold;
    width: 200px;
    height: 75px;
    border: 1px solid#e8000d;
    margin: 10px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 18pt;
    border-radius: 4px;
}

.changelogPageBut:hover, .changelogSectionBut:hover {
    background-color: #e8000d;
}

.changelogPageButSelected:hover .changelogSectionButSelected:hover {
    background-color:black;
}

.buildBut {
    color: white;
    background-color: #042e0b;
    font-style: bold;
    width: 350px;
    height: 100px;
    border: 1px solid #085e16;
    margin: 10px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 13pt;
    border-radius: 4px;
}

.buildBut:hover {
    background-color: #085e16;
} 

.unclickableBuildBut {
    color: white;
    background-color: #4b4b4b;
    font-style: bold;
    width: 350px;
    height: 100px;
    border: 1px solid #4b4b4b;
    margin: 10px;
    font-family: 'Cinzel', serif;
    font-size: 13pt;
    border-radius: 4px;
}

.astralBut {
    color: white;
    background-color: #0b4014;
    width: 200px;
    height: 200px;
    border: 1px solid #085e16;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.astralOn {
    color: white;
    background-color: #085e16;
    width: 200px;
    height: 200px;
    border: 1px solid #0b4014;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.astralBut:hover {
    background-color: #085e16;
}

.astralOn:hover {
    background-color:  #0b4014;
}

.lockedFactory {
    text-decoration: line-through;
}

.buildingUpg, .factoryUpg, .necropolisUpg, .sunUpg, .vortexUpg {
    color: white;
    width: 220px;
    height: 120px;
    border-radius: 4px;
    margin: 20px;
    vertical-align: middle;
}

.buildingUpg.can {
    border: 1px solid #085e16;
    background-color: #042e0b;
    cursor: pointer;
}

.buildingUpg.can:hover {
    background-color: #085e16;
}

.buildingUpg.cant {
    background-color: #4b4b4b;
    border: 1px solid #4b4b4b;
}

.buildingUpg.bought {
    background-color:black;
    border: 1px solid #042e0b;
}

.unclickableBuildingUpg, .unclickFactoryUpg, .unclickNecropolisUpg, .unclickSunUpg, .unclickVortexUpg {
    color: white;
    background-color: #4b4b4b;
    width: 220px;
    height: 120px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
    margin: 10px;
    vertical-align: middle;
}

.boughtBuildingUpg, .boughtFactoryUpg, .boughtNecropolisUpg, .boughtSunUpg, .boughtVortexUpg {
    color: white;
    background-color:black;
    width: 220px;
    height: 120px;
    border: 1px solid #042e0b;
    border-radius: 4px;
    margin: 10px;
    vertical-align: middle;
}

.galaxyUpg {
    color: white;
    width: 175px;
    height: 175px;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.galaxyUpg.can {
    background-color: #661503;
    border: 1px solid #e32d05;
    cursor: pointer;
}

.galaxyUpg.can:hover {
    background-color: #e32d05;
}

.galaxyUpg.cant {
    background-color: #4b4b4b;
    border: 1px solid #4b4b4b;
}

.galaxyUpg.bought {
    background-color:black;
    border: 1px solid #661503;
}

.galaxyUpg.locked {
    background-color: transparent;
    border: 3px solid black;
    position: relative;
    z-index: 1;
}

.galaxyUpg.locked::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
    border-radius: 4px;
    opacity: 0.6; 
    z-index: -1;
    background: #4b4b4b url("../images/skull.png") no-repeat center;
}

.boughtGalaxyUpg {
    color: white;
    background-color:black;
    width: 175px;
    height: 175px;
    border: 1px solid #661503;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.unclickGalaxyUpg {
    color: white;
    background-color: #4b4b4b;
    width: 175px;
    height: 175px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.ethUpgTable {
    text-align: center;
    width: 75%;
    margin: auto;
    border: 1px solid #3b1a12;
}

.ethUpgRow {
    margin: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.ethUpgCell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.ethUpg {
    color: white;
    width: 220px;
    height: 130px;
    border-radius: 4px;
    margin: 20px 8px;
    padding: 0 15px;
}

.ethUpg.can {
    background-color: #3b1a12;
    border: 6px double white;
    cursor: pointer;
}

.ethUpg.cant {
    background-color: #4b4b4b;
    border: 1px solid #4b4b4b;
}

.ethUpg.can:hover {
    background-color: white;
    color: #3b1a12;
    border: 6px double #3b1a12;
}

.ethUpg.bought {
    background-color:black;
    border: 6px double #3b1a12;
}

.boughtEthUpg {
    color: white;
    background-color:black;
    width: 220px;
    height: 120px;
    border: 6px double #3b1a12;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.unclickableEthUpg {
    color: white;
    background-color: #4b4b4b;
    width: 220px;
    height: 120px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
}

/*.lockedGalaxyRow {
    color: white;
    position: relative;
    background-color: #4b4b4b;
    width: 175px;
    height: 175px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.lockedGalaxyRow:after {
    content: url("../images/xxx.png");
    position: absolute;
    top: 0px;
    right: 0px;
    width: 175px;
    height: 175px;
    z-index: 2;
    opacity: 0.95;
}

.lockedGalaxySpan {
    position: absolute;
    width: 150px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}*/

.lockedGalaxyUpg {
    color: white;
    background-color: transparent;
    width: 175px;
    height: 175px;
    border: 3px solid #40ff00;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
    z-index: 1;
}

.lockedGalaxyUpg::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
    border-radius: 4px;
    opacity: 0.6; 
    z-index: -1;
    background: #4b4b4b url("../images/skull.png") no-repeat center;
}

.lockedArkUpg {
    color: #e32d05;
    background: #4b4b4b url("../images/questionmark.png") no-repeat center;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 20pt;
    line-height: 95%;
    width: 200px;
    height: 120px;
    border: 3px solid #661503;
    border-radius: 4px;
}

.lockedArkUpg:after {
    content: "Complete Research Project " attr(res-num) " to unlock."
}

.arkUpg {
    color: white;
    width: 200px;
    height: 120px;
    border-radius: 4px;
}

.arkUpg.can {
    background-color: #661503;
    border: 1px solid #e32d05;
    cursor: pointer;
}

.arkUpg.cant {
    background-color: #4b4b4b;
    border: 1px solid #4b4b4b;
}

.arkUpg.bought {
    background-color:black;
    border: 1px solid #661503;
}

.arkUpg.locked {
    color: #e32d05;
    background: #4b4b4b url("../images/questionmark.png") no-repeat center;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 20pt;
    line-height: 95%;
    width: 200px;
    height: 120px;
    border: 3px solid #661503;
    border-radius: 4px;
}

.arkUpg.locked:after {
    content: "Complete Research Project " attr(extra-attr) " to unlock."
}

.unclickableArkUpg {
    color: white;
    background-color: #4b4b4b;
    width: 200px;
    height: 120px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
}

.boughtArkUpg {
    color: white;
    background-color:black;
    width: 200px;
    height: 120px;
    border: 1px solid #661503;
    border-radius: 4px;
}

.arkUpg.can:hover {
    background-color: #e32d05;
} 

.buttonTD {
    text-align: left;
}

.unclickableUnit {
    color: white;
    background-color: #4b4b4b;
    border: 1px solid #4b4b4b;
    font-style: bold;
    width: 180px;
    height: 35px;
    border-radius: 4px;
}

.unclickableMax {
    color: white;
    background-color: #4b4b4b;
    font-style: bold;
    width: 120px;
    height: 35px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
}

.unclickableUnitT {
    color: white;
    background-color: #4b4b4b;
    font-style: bold;
    width: 180px;
    height: 35px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
}

.unclickableMaxT {
    color: white;
    background-color: #4b4b4b;
    font-style: bold;
    width: 120px;
    height: 35px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
}

.spacePrestigeBut {
    color: white;
    background-color: #170424;
    width: 500px;
    height: 175px;
    border: 1px solid #460573;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.spacePrestige {
    color: white;
    width: 500px;
    height: 175px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.spacePrestige.can {
    background-color: #170424;
    border: 1px solid #460573;
    cursor: pointer;
}

.spacePrestige.can:hover {
    background-color: #460573;
}

.timePrestigeBut {
    color: white;
    background-color: #006ba0;
    width: 500px;
    height: 175px;
    border: 1px solid white;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.timePrestige {
    color: white;
    width: 500px;
    height: 175px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.timePrestige.can {
    background-color: #006ba0;
    border: 1px solid white;
    cursor: pointer;
}

.timePrestige.can:hover {
    background-color: white;
    color: #006ba0;
}

.galaxyPrestigeBut {
    color: white;
    background-color: #661503;
    width: 500px;
    height: 175px;
    border: 1px solid #e32d05;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.galaxyPrestige {
    color: white;
    width: 500px;
    height: 175px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.galaxyPrestige.can {
    background-color: #661503;
    border: 1px solid #e32d05;
    cursor: pointer;
}

.galaxyPrestige.can:hover {
    background-color: #e32d05;
}

.unclickablePrestige {
    color: white;
    background-color: #4b4b4b;
    width: 500px;
    height: 175px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.spacePrestige.cant, .timePrestige.cant, .galaxyPrestige.cant {
    background-color: #4b4b4b;
    border: 1px solid #4b4b4b;
}

.prestigeContainer {
    text-align: center;
}

.constrUpg {
    color: white;
    width: 200px;
    height: 120px;
    border-radius: 4px;
    margin: 10px;
}

.constrUpg.can {
    background-color: #7b3f00;
    border: 1px solid #db9448;
    cursor: pointer;
}

.constrUpg.cant {
    background-color: #4b4b4b;
    border: 1px solid #4b4b4b;
}

.unclickableConstrUpg {
    color: white;
    background-color: #4b4b4b;
    width: 200px;
    height: 120px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
    margin: 10px;
}

.constrUpg.can:hover {
    background-color: #db9448;
} 

.timeUpg {
    color: white;
    width: 200px;
    height: 140px;
    border-radius: 4px;
    margin: 10px 20px;
}

.timeUpg.can {
    background-color: #006ba0;
    border: 1px solid white;
    cursor: pointer;
}

.timeUpg.can:hover {
    background-color: white;
    color: #006ba0;
}

.timeUpg.cant {
    background-color: #4b4b4b;
    border: 1px solid #4b4b4b;
}

.timeUpg.bought {
    background-color:black;
    border: 1px solid #006ba0;
}

.constrMax {
    color: white;
    background-color: #7b3f00;
    font-style: bold;
    width: 120px;
    height: 35px;
    border: 1px solid #db9448;
    cursor: pointer;
    border-radius: 4px;
    margin: 10px;
}

.constrBut {
    color: white;
    background-color: #7b3f00;
    font-style: bold;
    height: 35px;
    border: 1px solid #db9448;
    cursor: pointer;
    border-radius: 4px;
    margin: 10px;
}

.constrMax:hover, .constrBut:hover {
    background-color: #db9448;
}

.unclickableTimeUpg {
    color: white;
    background-color: #4b4b4b;
    width: 200px;
    height: 140px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
    margin: 10px;
}

.boughtTimeUpg {
    color: white;
    background-color:black;
    width: 200px;
    height: 140px;
    border: 1px solid #006ba0;
    border-radius: 4px;
    margin: 10px;
}

.upgTable {
    width: 65%;
    margin: auto;
    margin-top: 20px;
    text-align: center;
    border-collapse: collapse;
}

.buildingsTable {
    border: 1px solid #085e16;
    width: 65%;
    margin: auto;
    margin-top: 20px;
    text-align: center;
}

.buildingUpgRow {
    margin: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.buildingUpgCell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.constrTable {
    border: 1px solid #7b3f00;
    width: 75%;
    margin: auto;
    margin-top: 20px;
    text-align: center;
}

.constrUpgHeader {
    margin: auto;
    text-align: center;
}

.constrUpgRow {
    margin: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.constrUpgCell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

#cUpgHeaderRow {
    border-left: 1px solid #7b3f00;
    border-top: 1px solid #7b3f00;
    border-right: 1px solid #7b3f00;
}

#cUpgRow {
    border-left: 1px solid #7b3f00;
    border-right: 1px solid #7b3f00;
}

#cUpgRow2 {
    border-left: 1px solid #7b3f00;
    border-bottom: 1px solid #7b3f00;
    border-right: 1px solid #7b3f00;
}

.noticeText {
    font-size: 15pt;
    font-weight: bold;
    color: #1c8a2e;
    text-align: center;
}

#exportText {
    width: 640px;
    max-width: 640px;
    height: 300px;
    margin: auto;
    background-color: #525252;
    overflow: auto;
}

#gImportText {
    min-width: 305px;
    width: 305px;
    height: 100px;
    min-height: 100px;
    margin: auto;
    background-color: #525252;
    overflow: auto;
    display: none;
}

#gExportText {
    min-width: 305px;
    width: 305px;
    height: 100px;
    min-height: 100px;
    margin: auto;
    margin-bottom: 20px;
    background-color: #525252;
    overflow: auto;
    display: none;
}

#favErrExportText {
    min-width: 305px;
    width: 305px;
    height: 100px;
    min-height: 100px;
    margin: auto;
    margin-bottom: 20px;
    background-color: #525252;
    overflow: auto;
    display: none;
}

.favRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 5px;
}

.favCell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.timeLabelLeft {
    width: 200px;
    height: 100px;
    line-height: 50px;
    border: 1px solid #006ba0;
    margin: 5px auto;
    color: #006ba0;
    font-size: 22pt;
    font-weight: bold;
    text-align: center;
}

.timeLabelRight {
    width: 200px;
    height: 100px;
    line-height: 50px;
    border: 1px solid #006ba0;
    margin: 5px auto;
    color: #006ba0;
    font-size: 22pt;
    font-weight: bold;
    text-align: center;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #525252;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    -webkit-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    border: 1px solid white;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #006ba0;
    cursor: pointer;
    border: 1px solid white;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #006ba0;
    cursor: pointer;
    border: 1px solid white;
}

.sliderLocked {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #525252;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    -webkit-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    border: 1px solid white;
}

.sliderLocked::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #525252;
    border: 1px solid white;
}

.sliderLocked::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #525252;
    border: 1px solid white;
}

.slideContainer {
    width: 70%;
}

.refineryBut {
    color: white;
    font-weight: bold;
    font-size: 12pt;
    width: 300px;
    height: 80px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    margin: 5px;
}

.refineryBut.can {
    background-color: #006ba0;
    border: 1px solid white;
    cursor: pointer;
}

.refineryBut.cant {
    border: 1px solid #4b4b4b;
    background-color: #4b4b4b;
}

.timeBut {
    color: white;
    font-style: bold;
    height: 35px;
    border-radius: 4px;
    margin: 5px;
    font-family: 'Cinzel', serif;
}

.timeBut.can {
    background-color: #006ba0;
    border: 1px solid white;
    cursor: pointer;
}

.timeBut.cant {
    border: 1px solid #4b4b4b;
    background-color: #4b4b4b;
}

.timeSliderBut {
    color: white;
    background-color: #006ba0;
    font-style: bold;
    width: 285px;
    height: 35px;
    border: 1px solid white;
    cursor: pointer;
    border-radius: 4px;
}

.timeSliderBut:hover, .timeBut.can:hover, .refineryBut.can:hover {
    background-color: white;
    color: #006ba0;
}

.unclickSliderBut {
    color: white;
    background-color: #4b4b4b;
    font-style: bold;
    width: 250px;
    height: 35px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
}

.timeUpgRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.timeUpgCell {
    border-left: 1px solid #006ba0;
    border-right: 1px solid #006ba0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.timeUpgTDs {
    border-left: 1px solid #006ba0;
    border-right: 1px solid #006ba0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.timeUpgTDs2 {
    border-left: 1px solid #006ba0;
    border-right: 1px solid #006ba0;
    display: none;
}

.timeUpgTable {
    border-top: 2px solid #006ba0;
    border-bottom: 2px solid #006ba0;
    border-left: 1px solid #006ba0;
    border-right: 1px solid #006ba0;
    height: 640px;
    margin: auto;
    margin-top: 20px;
    padding: 10px 0px;
    text-align: center;
}

.autobuyerTable {
    width: auto;
    text-align: center;
    margin: 5px auto;
}

.autobuyerRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.autobuyerCell {
    margin: 2px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.autobuyerOptions {
    color: white;
    background-color: black;
    position: relative;
    font-size: 11pt;
    width: 250px;
    min-height: 335px;;
    text-align: center;
    border: 1px solid #460573;
    border-radius: 4px;
}

.dimBuyerButtonRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.dimBuyerButtonCell {
    margin: 0px 7.5px 0px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.buyerPriBut {
    position: relative;
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    margin: auto;
    width: 125px;
    height: 40px;
    border: 1px solid #525252;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 20pt;
    cursor: pointer;
}

.buyerEnabledLock {
    position: relative;
    text-align: center;
    height: 0px;
}

.buyerEnabledBut {
    position: relative;
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 125px;
    height: 40px;
    border: 1px solid #525252;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 20pt;
    cursor: pointer;
}

.dimBuyerEnabledBut {
    position: relative;
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    margin: 0 auto 20px;
    width: 115px;
    height: 40px;
    border: 1px solid #525252;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 20pt;
    cursor: pointer;
}

.timeDimBuyerEnabledBut {
    position: relative;
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    margin: 0 auto 10px;
    width: 100px;
    height: 30px;
    border: 1px solid #525252;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 16pt;
    cursor: pointer;
}

.timeDimBuyerAllEnabledBut {
    position: relative;
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    margin: 0 auto 10px;
    width: 150px;
    height: 30px;
    border: 1px solid #525252;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 14pt;
    cursor: pointer;
}

.buyerSpeedLock {
    position: relative;
    text-align: center;
    height: 0px;
}

.buyerSpeedBut {
    position: relative;
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 125px;
    height: 40px;
    border: 1px solid #525252;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 20pt;
    cursor: pointer;
}

.buyerSpeedLock:after {
    content: "LOCKED";
    position: relative;
    width: 125px;
    height: 40px;
    right: 0px;
    bottom: 56px;
    padding: 4px 7px;
    background-color: #666666;
    color: white;
    font-size: 18pt;
    font-weight: bold;
    border-radius: 4px;
    z-index: 2;
}

.buyerBulkLock {
    position: relative;
    text-align: center;
    height: 0px;
}

.buyerBulkBut {
    position: relative;
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 125px;
    height: 40px;
    border: 1px solid #525252;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 20pt;
    cursor: pointer;
}

.buyerBulkLock:after {
    content: "LOCKED";
    position: relative;
    width: 125px;
    height: 40px;
    right: 0px;
    bottom: 56px;
    padding: 4px 7px;
    background-color: #666666;
    color: white;
    font-size: 18pt;
    font-weight: bold;
    border-radius: 4px;
    z-index: 2;
}

.buyerBulkContainerx2 {
    height: 75px;
    width: 50%;
    padding-left: 25%;
    padding-right: 25%;
    text-align: center;
}

.buyerAmountTextContainer {
    position: relative;
    text-align: center;
    width: 125px;
    height: 70px;
    margin: 0px auto;
}

.buyerAdvancedContainer {
    text-align: center;
    position: relative;
    width: 125px;
    height: 0px;
    margin: 0px auto;
}

.buyerAdvancedContainer:after {
    content: "LOCKED";
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 57px;
    left: 0px;
    background-color: #3d3d3d;
    border: 1px solid #a3a3a3;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 11px;
    padding-bottom: 13px;
    font-size: 14pt;
    font-weight: bold;
    opacity: 0.8;
    z-index: 2;
}

.buyerAmountContainer {
    width: 100%;
}

.buyerOptionsContainerHalf {
    width: 50%;
    margin: 0 auto;
}

.buyerOptionsContainer {
    width: 100%;
    margin: 0 auto 20px;
    text-align: center;
}

#sacrificeBuyerAmountsContainer {
    float: left;
}

#sacrificeBuyerAdvancedContainer {
    float: left;
}

#prestigeLockScreen:after {
    content: "LOCKED";
    position: absolute;
    font-size: 32pt;
    font-weight: bold;
    width: 248px;
    height: 213px !important;
    right: 0px;
    top: 0px;
    border-radius: 4px;
    padding-top: 120px;
    background-color: #3d3d3d;
    border: 1px solid #a3a3a3;
    opacity: 0.8;
    z-index: 2;
}

.buyerText {
    width: 80px;
    text-align: center;
    background-color: black;
    color: white;
    border: 1px solid #460573;
    margin-top: 20px;
    margin-bottom: 15px;
}

.buyerTextP {
    width: 80px;
    text-align: center;
    background-color: black;
    color: white;
    border: 1px solid #460573;
}

.buyerTextPHalf {
    width: 40px;
    text-align: center;
    background-color: black;
    color: white;
    border: 1px solid #460573;
}

.buyerTextT {
    width: 80px;
    text-align: center;
    background-color: black;
    color: white;
    border: 1px solid #006ba0;
}

.buyerList {
    width: 100px;
    background-color: black;
    color: white;
    border: 1px solid #460573;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}

.buyerDropdown {
    display: inline-block;
    background-color: black;
    color: white;
    border: 1px solid #460573;
}

.galDropdown {
    display: inline-block;
    background-color: black;
    color: white;
    border: 1px solid #e32d05;
}

.buyerRadio {
    height: 17px;
    width: 17px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
    background-color: white;
    cursor: pointer;
    display: inline-block;
}

.buyerRadio:checked {
    background-color: #170424;
    border: 1px solid white;
}

.buyerRadio:checked:hover {
    background-color: #170424;
    border: 1px solid white;
    opacity: 1;
    cursor: default;
}

.buyerRadio:hover {
    background-color: #170424;
    border: 1px solid white;
    opacity: 0.5;
}

.timeCheckbox {
    height: 17px;
    width: 17px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
    background-color: white;
    cursor: pointer;
}

.timeCheckbox:checked {
    background-color: #006ba0;
    border: 1px solid white;
}

.timeCheckbox:checked:hover {
    background-color: #006ba0;
    border: 1px solid white;
    opacity: 0.5;
}

.timeCheckbox:hover {
    background-color: white;
    opacity: 0.5;
}

.galaxyCheckbox {
    height: 17px;
    width: 17px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
    background-color: white;
    cursor: pointer;
}

.galaxyCheckbox:checked {
    background-color: #e32d05;
    border: 1px solid white;
}

.galaxyCheckbox:checked:hover {
    background-color: #e32d05;
    border: 1px solid white;
    opacity: 0.5;
}

.galaxyCheckbox:hover {
    background-color: white;
    opacity: 0.5;
}

.priorityContainer {
    text-align: center;
    position: relative;
    margin: 5px auto;
}

.buyerErrorContainer {
    position: absolute;
    left: 0;
    bottom: 0;
}

.confBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 50px;
    height: 50px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 12pt;
}

.saveLoadFavBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 75px;
    height: 50px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 12pt;
    margin: 0px 5px;
}

.renameFavBut {
    color: white;
    background-color: #1f1f1f;
    font-style: bold;
    width: 100px;
    height: 50px;
    border: 1px solid #525252;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 12pt;
    margin: 0px 5px;
}

.saveLoadFavBut:hover, .renameFavBut:hover {
    background-color: #525252;
}

#tabButtons {
    width: auto;
    margin: auto;
    margin-top: 25px;
    display: block;
}

.allAutoBut {
    color: white;
    background-color: #170424;
    font-style: bold;
    width: 180px;
    height: 35px;
    border: 1px solid #460573;
    cursor: pointer;
    border-radius: 4px;
}

.allAutoBut:hover {
    background-color: #460573;
}

.achTable {
    width: 60%;
    margin: auto;
    text-align: center;
}

.achRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.achievement {
    width: 125px;
    height: 125px;
    /*font-weight: bold;*/
    text-align: center;
    padding: 5px;
    margin: 8px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.achievement.locked {
    border: 1px solid grey;
    color: grey;
}

.achievement.unlocked {
    border: 1px solid gold;
    color: gold;
}

.achievementUnlocked {
    width: 125px;
    height: 125px;
    /*font-weight: bold;*/
    text-align: center;
    padding: 5px;
    margin: auto;
}

.achievement.new {
    -webkit-box-shadow: 0px 0px 10px 5px goldenrod;
            box-shadow: 0px 0px 10px 5px goldenrod;
}

.timeUnlockedNotify {
    -webkit-box-shadow: 0px 0px 5px 5px #006ba0;
            box-shadow: 0px 0px 5px 5px #006ba0;
}

.timeUnlockedButtonNotify {
    -webkit-box-shadow: 0px 0px 5px 10px #006ba0;
            box-shadow: 0px 0px 5px 10px #006ba0;
}

.achievement p, .achievementUnlocked p {
    vertical-align: middle;
}

.achUnlockPopup {
    -webkit-box-shadow: 0px 0px 10px 5px goldenrod;
            box-shadow: 0px 0px 10px 5px goldenrod;
    text-align: center;
    background-color: black;
    border: 3px solid white;
    width: 300px;
    margin: 10px;
    border-radius: 4px;
    z-index: 8;
}

.milesUnlockPopup {
    -webkit-box-shadow: 0px 0px 10px 5px #e32d05;
            box-shadow: 0px 0px 10px 5px #e32d05;
    text-align: center;
    background-color: black;
    border: 3px solid white;
    width: 300px;
    margin: 10px;
    border-radius: 4px;
    z-index: 8;
}

.savePopup {
    -webkit-box-shadow: 0px 0px 5px 2px white;
            box-shadow: 0px 0px 5px 2px white;
    text-align: center;
    background-color: black;
    border: 3px solid white;
    width: 300px;
    margin: 10px;
    border-radius: 4px;
    z-index: 8;
}

.autosavePopup {
    -webkit-box-shadow: 0px 0px 5px 2px white;
            box-shadow: 0px 0px 5px 2px white;
    text-align: center;
    background-color: black;
    border: 3px solid white;
    width: 300px;
    margin: 10px;
    border-radius: 4px;
    opacity: 0.4;
    z-index: 8;
}

.milestonesNotify {
    -webkit-box-shadow: 0px 0px 10px 5px #e32d05;
            box-shadow: 0px 0px 10px 5px #e32d05;
}

.projectNotify {
    -webkit-box-shadow: 0px 0px 20px 10px #e32d05;
            box-shadow: 0px 0px 20px 10px #e32d05;
}

#astralButResearch {
    color: white;
    background-color: #661503;
    font-style: bold;
    width: 150px;
    height: 35px;
    border: 1px solid #e32d05;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

#astralButInfResearch {
    color: white;
    background-color: #3b1a12;
    font-style: bold;
    width: 175px;
    height: 35px;
    border: 6px double white;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.galaxyBut {
    color: white;
    background-color: #661503;
    font-style: bold;
    height: 35px;
    border: 1px solid #e32d05;
    margin: 5px;
    padding: 0px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.galaxyBut:hover {
    background-color: #e32d05;
}

.galaxyNameBut4 {
    color: white;
    background-color: #661503;
    font-style: bold;
    width: 130px;
    height: 35px;
    border: 1px solid #e32d05;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.galImpExpBut {
    color: white;
    background-color: #661503;
    font-style: bold;
    width: 130px;
    height: 35px;
    border: 1px solid #e32d05;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    position: relative;
}

.galShowFavsBut {
    color: white;
    background-color: #661503;
    font-style: bold;
    width: 270px;
    height: 35px;
    border: 1px solid #e32d05;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

#favSavedNotice {
    color: white;
    background-color: #661503;
    font-style: bold;
    font-size: 18px;
    width: 100%;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    position: absolute;
    left: 0px;
	top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 2;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
    opacity: 0;
}

#favLoadNotice {
    color: white;
    background-color: #661503;
    font-style: bold;
    font-size: 18px;
    width: 100%;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    position: absolute;
    left: 0px;
	top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 2;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
    opacity: 0;
}

.galaxyNameBut2 {
    color: white;
    background-color: #661503;
    font-style: bold;
    width: 270px;
    height: 35px;
    border: 1px solid #e32d05;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

#astralButResearch:hover, .galaxyNameBut4:hover, .galaxyNameBut2:hover {
    background-color: #e32d05;
}

.unclickGalaxyBut {
    color: white;
    background-color: #4b4b4b;
    font-style: bold;
    width: 270px;
    height: 35px;
    border: 1px solid #4b4b4b;
    border-radius: 4px;
}

/*.galaxyTable {
    position: relative;
    text-align: center;
    margin: 20px 0px 0;
    width: 1020px;
    height: 550px;
    border: 1px solid #661503;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0px;
}*/

#galButs2 {
    text-align: center; 
    margin: auto;
    width: '100%';
}

#galButs4 {
    text-align: center; 
    margin: auto;
    width: '100%';
}

.galaxiesTable4Cont {
    width: 1588px;
    height: 1024px;
    position: relative;
    left: -154px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.galaxiesTable4 {
    width: 1588px;
    height: 1024px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.galaxiesTableCont {
    width: 1280px;
    height: 1024px;
    margin: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.galaxiesTable {
    width: 1280px;
    min-width: 1280px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.galaxyTable {
    text-align: center;
    margin: 20px 5px 0;
    width: 385px;
    border: 1px solid #661503;
    background-color: transparent;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.galaxyCell {
    max-width: 397px;
    width: 397px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.galaxyUpgRow {
    margin: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/*.leftGalaxyTD {
    width: 175px;
    height: 195px;
    margin: auto;
    position: relative;
    border-right: 3px solid #661503;
}*/

.leftGalaxyTD {
    margin: auto;
    position: relative;
}

.leftGalaxyCell {
    margin: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.rightGalaxyCell {
    margin: auto;
    border-left: 3px solid #661503;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.topGalaxyCell {
    width: 175px;
    height: 195px;
    margin: auto;
    border-bottom: 3px solid #661503;
    -webkit-box-flex: 0;
    -webkit-flex: 0;
        -ms-flex: 0;
            flex: 0;
}

.bottomGalaxyCell {
    width: 175px;
    height: 195px;
    margin: auto;
    border-top: 3px solid #661503;
    -webkit-box-flex: 0;
    -webkit-flex: 0;
        -ms-flex: 0;
            flex: 0;
}

/*.rightGalaxyTD {
    width: 175px;
    height: 195px;
    margin: auto;
    position: relative;
    border-left: 3px solid #661503;
}*/

.rightGalaxyTD {
    margin: auto;
    position: relative;
    border-left: 3px solid #661503;
}

#bottomBorderDiv {
    width: 175px;
    height: 195px;
    margin: auto;
    position: relative;
    border-top: 3px solid #661503;
}

.bottomBorderDiv {
    margin: auto;
    position: relative;
}

.rightBorderDiv {
    margin: auto;
    position: relative;
}

.leftBorderDiv {
    margin: auto;
    position: relative;
}

#topBorderDiv {
    width: 175px;
    height: 195px;
    margin: auto;
    position: relative;
    border-bottom: 3px solid #661503;
}

.topBorderDiv {
    margin: auto;
    position: relative;
}

.defNum {
    font-weight: bold;
    color: white;
    font-variant-numeric: tabular-nums;
    font-size: 125%;
}

.corpseNum {
    font-weight: bold;
    color: #6c00b4;
    font-variant-numeric: tabular-nums;
    font-size: 125%;
}

.brickNum {
    font-weight: bold;
    color: #1c8a2e;
    font-variant-numeric: tabular-nums;
    font-size: 125%;
}

.galNum {
    font-weight: bold;
    color: #cf2904;
    font-variant-numeric: tabular-nums;
    font-size: 125%;
}

.timeNum {
    color: #006ba0;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    font-size: 125%;
}

.ethNum {
    font-weight: bold;
    color: #661503;
    -webkit-text-stroke-width: .4px;
    -webkit-text-stroke-color: white;
    font-variant-numeric: tabular-nums;
    font-size: 125%;
}

.researchDiv {
    width: 300px;
    min-width: 300px;
    height: 400px;
    min-height: 400px;
    border: 1px solid #e32d05;
    border-radius: 4px;
    position: relative;
    text-align: center;
    margin: 2px;
}

.infResearchDiv {
    width: 750px;
    min-width: 750px;
    height: 290px;
    min-height: 290px;
    border: 6px double #3b1a12;
    border-radius: 4px;
    position: relative;
    text-align: center;
    margin: 25px auto;
}

#infResearchDisplayDiv {
    margin: 10px auto;
    text-align: center;
}

#researchDisplayDiv {
    margin: 10px auto;
    text-align: center;
}

.researchButton {
    color: white;
    background-color: #661503;
    font-weight: 900;
    width: 180px;
    height: 60px;
    border: 1px solid #e32d05;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 16pt;
    position: absolute;
    top: 320px;
    left: 146px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

.progressResearchButton {
    color: white;
    background-color: #4b4b4b;
    font-weight: 900;
    width: 180px;
    height: 60px;
    border: 3px solid #661503;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 16pt;
    position: absolute;
    top: 320px;
    left: 146px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

.researchButton:hover {
    background-color: #e32d05;
}

.completedResearchBut {
    color: #661503;
    background-color: black;
    font-weight: 900;
    width: 180px;
    height: 60px;
    border: 3px solid #661503;
    margin: 5px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 16pt;
    -webkit-text-stroke-width: .3px;
    -webkit-text-stroke-color: white;
    position: absolute;
    top: 320px;
    left: 146px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

.resConds {
    margin:5px;
    height: 110px;
    min-height: 110px;
}

.infResConds {
    height: 46px;
    min-height: 46px;
}

.resHR {
    border-color: rgb(102, 21, 3);
    width: 95%;
}

.infResHR {
    border-color: rgb(59, 26, 18);
    width: 95%;
}

.resReward {
    margin: 5px;
    height: 68px;
    min-height: 68px;
}

.infResReward {
    height: 27px;
    min-height: 27px;
}

.infResearchButton {
    color: white;
    background-color: #3b1a12;
    font-weight: 900;
    width: 185px;
    height: 80px;
    border: 6px double white;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 16pt;
    position: absolute;
    top: 190px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

.progressInfResearchButton {
    color: white;
    background-color: #4b4b4b;
    font-weight: 900;
    width: 185px;
    height: 80px;
    border: 6px double #3b1a12;
    margin: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 16pt;
    position: absolute;
    top: 190px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

#astralButInfResearch:hover, .infResearchButton:hover {
    background-color: white;
    color: #3b1a12;
    border: 6px double #3b1a12;
}

.completedInfResearchBut {
    color: #3b1a12;
    background-color: black;
    font-weight: 900;
    width: 185px;
    height: 80px;
    border: 6px double white;
    margin: 5px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 16pt;
    -webkit-text-stroke-width: .3px;
    -webkit-text-stroke-color: white;
    position: absolute;
    top: 190px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

.unclickInfResearchBut {
    color: white;
    background-color: #4b4b4b;
    font-weight: 900;
    width: 185px;
    height: 80px;
    border: 1px solid #4b4b4b;
    margin: 5px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 16pt;
    position: absolute;
    top: 190px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

.unclickResearchBut {
    color: white;
    background-color: #4b4b4b;
    font-weight: 900;
    width: 180px;
    height: 60px;
    border: 1px solid #4b4b4b;
    margin: 5px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 16pt;
    position: absolute;
    top: 320px;
    left: 146px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

.researchTable {
    width: auto;
    text-align: center;
    margin: 20px auto;
}

.researchRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.researchCell {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.resGoalText {
    font-size: 15pt;
    font-weight: 900;
    margin: 5px;
    width: 100%;
    position: absolute;
    top: 280px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

.infResGoal {
    margin: 5px;
    width: 100%;
    height: 27px;
    min-height: 27px;
}

.infResGoalText {
    font-size: 15pt;
    font-weight: 900;
    margin: 5px;
    width: 100%;
    position: absolute;
    top: 150px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

.arkImg {
    position: absolute;
    top: 300px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

.arkImgBuilt {
    position: absolute;
    top: 300px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

#arkSubTab {
    display: none;
    position: relative;
    width: 50%;
    width: 1280px;
    height: 1174px;
    min-height: 100px;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

#arkDescription {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

#thrustersBut {
    position: absolute;
    bottom: 260px;
    left: 50%;
    -webkit-transform: translateX(200%);
    -ms-transform: translateX(200%);
        transform: translateX(200%);
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
}

#enginesBut {
    position: absolute;
    bottom: 150px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
}

#navigationBut {
    position: absolute;
    top: 175px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
}

#torpedosBut {
    position: absolute;
    top: 450px;
    left: 50%;
    -webkit-transform: translateX(-175%);
    -ms-transform: translateX(-175%);
        transform: translateX(-175%);
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
}

#railgunsBut {
    position: absolute;
    top: 450px;
    left: 50%;
    -webkit-transform: translateX(75%);
    -ms-transform: translateX(75%);
        transform: translateX(75%);
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
}

#supportBut {
    position: absolute;
    bottom: 260px;
    left: 50%;
    -webkit-transform: translateX(-300%);
    -ms-transform: translateX(-300%);
        transform: translateX(-300%);
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
}

.leftRowCost {
    position: relative;
    width: 50px;
    left: -50px;
    top: 210px;
    margin: 0 0 0 0;
    font-size: 48pt;
    z-index: 2;
}

.rightRowCost {
    position: relative;
    width: 50px;
    left: 1620px;
    top: 125px;
    margin: 0 0 0 0;
    font-size: 48pt;
    z-index: 2;
}

#galaxiesSubTab {
    text-align: center;
    width: 1280px;
    height: 1280px;
}

.milestoneHeaderContainer {
    position: fixed;
    background-color: black;
    width: 399px;
    height: 51px;
    border-radius: 1px;
}

.milestonePopupHeader {
    color: #e32d05;
    background-color: black;
    font-size: 24pt;
    font-weight: 800;
    position: fixed;
    width: 394px;
    height: 40px;
    text-align: center;
    border: 1px solid #661503;
    border-radius: 1px;
    margin: 2px;
}

.milestonePopupHeaderX {
    color: white;
    background-color: transparent;
    font-size: 24pt;
    font-weight: 800;
    position: fixed;
    width: 384px;
    height: 40px;
    text-align: right;
    border: 1px solid #661503;
    padding-right: 10px;
    border-radius: 1px;font-family: 'Roboto', sans-serif;
    font-weight: 800;
    margin: 2px;
    z-index: 8;
}

.milestonePopupHeaderX a {
    color: white;
    text-decoration: none;
}

.headerHeaderContainer {
    position: fixed;
    background-color: black;
    width: 350px;
    height: 51px;
    border-radius: 1px;
}

.headerPopupHeader {
    color: white;
    background-color: black;
    font-size: 20pt;
    font-weight: 800;
    position: fixed;
    width: 294px;
    height: 40px;
    padding-right: 50px;
    text-align: center;
    border: 1px solid white;
    border-radius: 1px;
    margin: 2px;
}

.headerPopupHeaderX {
    color: white;
    background-color: transparent;
    font-size: 24pt;
    font-weight: 800;
    position: fixed;
    width: 330px;
    height: 40px;
    text-align: right;
    padding-right: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    margin: 2px;
    z-index: 8;
}

.headerPopupHeaderX a {
    color: white;
    text-decoration: none;
}

.milestonePopupHR {
    background-color: black;
    position: fixed;
    height: 1px;
    width: 394px;
    margin-top: 46px;
    margin-left: 2px;
    border: 1px solid #661503;
    border-radius: 1px;
}

.toggleButtonConfHead {
    min-width: 55px;
    width: 55px;
}

.toggleButtonConfDiv {
    min-width: 55px;
    width: 55px;
}

.confirmButtonsTable{
    height: 375px;
    width: 320px;
    margin: 50px 15px 5px;
    border-radius: 4px;
    border-radius: 1px;
}

.displayButtonsTable{
    width: 100%;
    height: 549px;
    width: 340px;
    margin-top: 51px;
    margin-right: 10px;
    border-radius: 4px;
    border-radius: 1px;
}

.toggleRow {
    width: 100%;
    height: 52px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.toggleText {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    line-height: 52px;
}

.milestoneTable {
    height: 876px;
    width: 394px;
    margin-top: 51px;
    border-radius: 4px;
    border-radius: 1px;
}

.milestoneTDH {
    background-color: black;
    color: #e32d05;
    width: 394px;
    height: 43px;
}

.milestoneTDHR {
    background-color: black;
    height: 0px;
    width: 394px;
    border: 1px double #661503;
}

.milestoneTD {
    padding-bottom: 25px;
    padding-top: 25px;
    height: 71px;
    width: 394px;
    min-width: 394px;
    border-radius: 1px;
    margin: 2px;
}

.milestoneTD.locked {
    border: 1px double #661503;
    background-color: #661503;
}

.milestoneTD.unlocked {
    border: 1px double #661503;
    background-color: black;
}

.milestoneReward {
    font-size: 11pt;
}

.milestoneReq {
    font-size: 16pt;
    font-weight: 900;
}

.milestoneReq.unlocked {
    text-decoration: line-through;
}

.milestoneTDUnlocked {
    padding-bottom: 10px;
    padding-top: 10px;
    height: 75px;
    border: 1px double #661503;
    background-color: black;
    border-radius: 1px;
}

.milestoneTDButton {
    height: 94px;
    border: 1px double #661503;
    background-color: black;
    border-radius: 1px;
}

.milestonePopup::-webkit-scrollbar {
    width: 10px;
    opacity: 0;
}

.milestonePopup::-webkit-scrollbar-track {
    opacity: 0;
    margin-top: 52px;
}

.milestonePopup::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
    border: 1px double rgb(255, 255, 255, 0.4);
    border-radius: 9px;
    opacity: 0.5;
}

#winScreen {
    width: 100%;
    height: 1024px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    z-index: 8;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
    display: none;
}

#winMessage {
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s;
    font-size: 16pt;
    color: #661503;
    font-weight: bold;
    -webkit-text-stroke-width: .3px;
    -webkit-text-stroke-color: white;
}

.fade-enter-active, .fade-leave-active {
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

.hotkeysDesc {
    font-size: 11pt;
    width: auto;
    margin: auto;
    text-align: center;
}

a.whiteLink {
    color: white;
}

a.emitterArrows {
    text-decoration: none;
    color: #006ba0;
    font-size: 22pt;
    line-height: 40px;
}

.emitterRowDiv {
    min-width: 115px;
    line-height: 40px;
    font-size: 14pt;
    text-align: center;
    display: inline-block;
}

.emitterRowText {
    min-width: 115px;
    font-size: 12pt;
    text-align: center;
    display: inline-block;
    margin-top: 5px;
}

.emittersHR {
    border-color: #006ba0;
    width: 165px;
    margin: 0px auto;
}