@keyframes color-change {
    0%,to {
        color: #f1fa8c
    }

    50% {
        color: #f55
    }
}

@keyframes shake {
    0%,10% {
        transform: skewX(-1deg)
    }

    15%,5% {
        transform: skewX(1deg)
    }

    20%,to {
        transform: skewX(0deg)
    }

    10%,90% {
        transform: translate3d(-1px,0,0)
    }

    20%,80% {
        transform: translate3d(2px,0,0)
    }

    30%,50%,70% {
        transform: translate3d(-4px,0,0)
    }

    40%,60% {
        transform: translate3d(4px,0,0)
    }
}

@keyframes bang {
    to {
        box-shadow: -154px -131.66666667px #0fc,-243px -325.66666667px #ff0d00,71px -294.66666667px #7f0,154px 7.33333333px #00ff73,159px 65.33333333px #ff00f7,191px -207.66666667px #ffd000,123px -232.66666667px #0059ff,-96px 18.33333333px #2600ff,93px 76.33333333px #00eaff,-94px -388.66666667px #00ff59,-92px -107.66666667px #ff8400,-7px -20.66666667px #3c00ff,37px -197.66666667px #ea00ff,249px -148.66666667px #f02,-112px -249.66666667px #ff0040,-191px -374.66666667px #ff7300,249px -12.66666667px #30f,-238px -366.66666667px #00fffb,-76px -186.66666667px #00ffe6,242px 60.33333333px #00d5ff,-69px -217.66666667px #0095ff,222px -155.66666667px #0037ff,164px -410.66666667px #ff004d,-228px 2.33333333px #ff9d00,-201px -352.66666667px #f0d,75px -378.66666667px #00ff6a,-141px -375.66666667px #f07,-75px -362.66666667px #8000ff,-162px -287.66666667px #0f8,-152px -260.66666667px #00b3ff,180px -205.66666667px #005eff,-110px -16.66666667px #ff00d5,-128px -298.66666667px #00ffc4,141px -197.66666667px #00f7ff,73px -109.66666667px #f60,164px -347.66666667px #00c8ff,-178px -307.66666667px #0026ff,133px .33333333px #bf0,13px 37.33333333px #7bff00,-168px -198.66666667px #0df,-155px -70.66666667px #80f,167px -111.66666667px #ffc800,98px -353.66666667px #00fffb,65px -235.66666667px #ff0059,186px -122.66666667px #ff0009,-124px -385.66666667px #ff007b,6px -251.66666667px #ff00bf,66px -309.66666667px #0dff00,169px -119.66666667px #ff4800,-232px -137.66666667px #5eff00,171px -173.66666667px #f05
    }
}

@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0
    }
}

@keyframes position {
    0%,19.9% {
        margin-top: 10%;
        margin-left: 40%
    }

    20%,39.9% {
        margin-top: 40%;
        margin-left: 30%
    }

    40%,59.9% {
        margin-top: 20%;
        margin-left: 70%
    }

    60%,79.9% {
        margin-top: 30%;
        margin-left: 20%
    }

    80%,99.9% {
        margin-top: 30%;
        margin-left: 80%
    }
}

@keyframes noise {
    0% {
        transform: translateX(0,0)
    }

    10%,30%,to {
        transform: translate(-100px,100px)
    }

    20% {
        transform: translate(150px,-100px)
    }

    40%,80% {
        transform: translate(100px,-150px)
    }

    50% {
        transform: translate(-100px,200px)
    }

    60% {
        transform: translate(-200px,-100px)
    }

    70% {
        transform: translateY(50px,100px)
    }

    90% {
        transform: translate(0,200px)
    }
}

#city-gift .hgift {
    background-color: initial;
    background-image: repeating-linear-gradient(90deg,#b22222,#b22222 10px,beige 0,beige 12px,#228b22 0,#228b22 18px,gold 0,gold 20px,#dc143c 0,#dc143c 30px),repeating-linear-gradient(#b22222,#b22222 10px,beige 0,beige 12px,#228b22 0,#228b22 18px,gold 0,gold 20px,#dc143c 0,#dc143c 30px);
    background-blend-mode: multiply
}

#city-gift .hgift>span {
    color: #ebdbb2;
    text-shadow: 2px 2px #000
}

html.dark {
    background-color: #1f2424
}

html.dark body,html.dark h2,html.dark h3 {
    color: #fff
}

html.dark a {
    color: #1abc9c
}

html.dark .button.has-text-advanced,html.dark .has-text-advanced {
    color: #00ac95
}

html.dark .button.has-text-alert,html.dark .has-text-alert {
    color: #af5d00
}

html.dark .button.has-text-caution,html.dark .has-text-caution {
    color: orange
}

html.dark .button.has-text-danger,html.dark .has-text-danger {
    color: #f14668
}

html.dark .has-text-fade {
    color: #5e5e5e
}

html.dark .has-text-flair {
    color: #91006c
}

html.dark .button.has-text-info,html.dark .has-text-info {
    color: #167df0
}

html.dark .has-text-label {
    color: #ffff9e
}

html.dark .button.has-text-special,html.dark .has-text-special {
    color: #91006c
}

html.dark .button.has-text-success,html.dark .has-text-success {
    color: #48c774
}

html.dark .button.has-text-warning,html.dark .has-text-warning,html.dark .modal-card-head p {
    color: #ffdd57
}

html.dark .has-text-danger-pulse {
    color: #ffdd57;
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

html.dark .challenge .simButton {
    border-color: #48c774
}

html.dark .challenge .configList {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around
}

html.dark .challenge .configList>div {
    margin: 0 .25rem;
    width: 10rem
}

html.dark .challenge .configList>div>input,html.darkNight .challenge .configList>div>input,html.dracula .challenge .configList>div>input,html.gruvboxDark .challenge .configList>div>input,html.gruvboxDarkRG .challenge .configList>div>input,html.gruvboxLight .challenge .configList>div>input,html.light .challenge .configList>div>input,html.night .challenge .configList>div>input,html.orangeSoda .challenge .configList>div>input,html.redgreen .challenge .configList>div>input {
    height: 1.25rem;
    text-align: center;
    padding: 0
}

html.dark .popper .has-text-label {
    color: #10f
}

html.dark .popper .has-text-success {
    color: #1c7e21
}

html.dark .popper .has-text-warning {
    color: #776425
}

html.dark .popper .divide-line {
    border-top: #ccc solid .0625rem
}

html.dark .main>div.popper,html.dark body .modal>div.popper {
    background-color: #f5f5f5;
    border: .0625rem solid #000;
    color: #363636
}

html.dark .main>div.popper>div,html.dark body .modal>div.popper>div {
    border-top: solid .0625rem #000
}

html.dark .main>div.popper>div:first-child,html.dark body .modal>div.popper>div:first-child {
    border-top: none
}

html.dark .main>div.popper .has-text-dark,html.dark body .modal>div.popper .has-text-dark {
    color: #363636
}

html.dark .main>div.popper .split,html.dark body .modal>div.popper .split {
    display: flex
}

html.dark .main>div.popper .split>div,html.dark body .modal>div.popper .split>div {
    flex-wrap: nowrap
}

html.dark .main>div.popper .split>div:nth-of-type(2),html.dark body .modal>div.popper .split>div:nth-of-type(2),html.light .main>div.popper .split>div:nth-of-type(2),html.light body .modal>div.popper .split>div:nth-of-type(2) {
    border-left: solid .0625rem #000;
    margin-left: .375rem;
    padding-left: .375rem
}

html.dark .shipPopper .divider {
    border-bottom: solid .0625rem #000
}

html.dark .sliderbar>span {
    position: relative;
    display: inline-block;
    width: 5%;
    bottom: 1.125rem;
    margin: 0 .375rem
}

html.dark .sliderbar .b-slider {
    display: inline-block;
    width: 80%
}

html.dark .sliderbar .b-slider .b-slider-track {
    height: 1rem
}

html.dark .sliderbar .is-primary .b-slider-fill {
    background: #48c774
}

html.dark .sliderbar.thin>span {
    bottom: .625rem
}

html.dark .sliderbar.thin .b-slider {
    margin-top: .5rem;
    margin-bottom: .5rem
}

html.dark .msgQueueFilters span,html.dark .tabs a {
    color: #fff
}

html.dark .msgQueueFilters span.is-active,html.dark .tabs li.is-active a {
    border-bottom-color: #1abc9c;
    color: #1abc9c
}

html.dark .msgQueueFilters span:hover,html.dark .tabs a:hover {
    border-bottom-color: #f2f2f2;
    color: #f2f2f2
}

.main #msgQueueHeader h2,.main .bldQueue h2,.main .bldQueue.right h2,.main .resQueue h2,html.dark .tabs>ul,html.darkNight .tabs>ul,html.dracula .tabs>ul,html.gruvboxDark .tabs>ul,html.gruvboxDarkRG .tabs>ul,html.gruvboxLight .tabs>ul,html.light .tabs>ul,html.night .tabs>ul,html.orangeSoda .tabs>ul,html.redgreen .tabs>ul {
    border-bottom: solid .0625rem
}

html.dark .button {
    background-color: #282f2f;
    color: #fff
}

html.dark .button.is-light,html.light {
    background-color: #fff
}

html.dark .button.is-hovered,html.dark .button:hover {
    background-color: #3a4344;
    color: #f2f2f2
}

html.dark .button.is-focused,html.dark .button:focus {
    border-color: #dbdbdb
}

html.dark .basic-button {
    border: #ccc solid .0625rem
}

html.dark .basic-button:hover {
    border: #eee solid .0625rem;
    background-color: #3a4344
}

html.dark .text-button:hover {
    cursor: pointer;
    color: #f2f2f2;
    text-decoration: underline
}

html.dark .label {
    color: #dbdee0
}

html.dark .checkbox:hover,html.dark .radio:hover {
    color: #1abc9c
}

html.dark .dropdown-content {
    background-color: #1f2424
}

html.dark .b-tooltip.is-right:before {
    border-right: 5px solid #f2f2f2
}

html.dark .b-tooltip.is-left:before {
    border-left: 5px solid #f2f2f2
}

html.dark .b-tooltip.is-bottom:before {
    border-bottom: 5px solid #f2f2f2
}

html.dark .b-tooltip.is-primary .tooltip-content {
    background: #f2f2f2;
    border: .0625rem solid #f5f5f5;
    color: #000
}

html.dark .add,html.dark .sub {
    border: #ccc solid .0625rem;
    transition: all 200ms ease
}

html.dark .add:hover,html.dark .sub:hover {
    background-color: #3a4344;
    color: #f2f2f2
}

html.dark .current {
    border-top: #ccc solid .0625rem;
    border-bottom: #ccc solid .0625rem
}

html.dark .current.infoOnly {
    border: #ccc solid .0625rem
}

html.dark .promoBar,html.dark .topBar {
    background-color: #3a4344
}

html.dark .pause,html.dark .play {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

html.dark .play {
    bottom: .125rem;
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-left: .375rem solid #48c774;
    border-bottom: .25rem solid transparent
}

html.dark .pause {
    box-sizing: content-box;
    bottom: .0625rem;
    width: .125rem;
    height: .625rem;
    border-right: .125rem solid #f14668;
    border-left: .125rem solid #f14668
}

html.dark .meter.low {
    color: #c00
}

html.dark .meter.neutral {
    color: #c0ce00
}

html.dark .buildList .hl-ca,html.dark .main .content .action a.button.hl-ca .aTitle,html.dark .meter.high {
    color: #00af0f
}

html.dark .buildList .hl-cna,html.dark .main .content .action a.button.hl-cna .aTitle {
    color: #c20000
}

html.dark .graphContainer span.special:hover .gear,html.dark .msgQueue span.special:hover .gear {
    fill: #d4af37
}

html.dark .main .content .action a.button span.count,html.dark .main .content .divider h2,html.dark .modal .action a.button span.count {
    background: #1f2424
}

html.dark .main .content .action div.special,html.dark .modal .action div.special {
    background: #1f2424;
    border: .0625rem solid #282f2f
}

html.dark .graphContainer span.special .gear,html.dark .main .content .action div.special .gear,html.dark .modal .action div.special .gear,html.dark .msgQueue span.special .gear {
    fill: #ad5f12
}

html.dark .main .content .action div.special:hover {
    border: .0625rem solid #3a4344
}

html.dark .main .content .action div.special:hover .gear {
    fill: #d4af37
}

html.dark .main .content .action span.off,html.dark .main .content .action span.on {
    background: #1f2424;
    border: .0625rem solid #282f2f;
    color: #00af0f
}

html.dark .main .content .action span.on.altwarn,html.dark .main .content .action span.on.warn {
    color: #af5d00
}

html.dark .main .content .action span.off {
    color: #c20000
}

html.dark .main .content .action span.off:hover,html.dark .main .content .action span.on:hover,html.dark .modal .action div.special:hover {
    border: .0625rem solid #3a4344
}

html.dark .main .content .action.hl .button {
    border: solid 1px #00af0f
}

html.dark .main .content .action.cna a.button,html.dark .modal .action.cna a.button {
    background: #181818
}

html.dark .main .content .action.cna a.button.hl-ca .aTitle,html.dark .modal .action a.button.hl-ca .aTitle,html.dark .modal .action.cna a.button.hl-ca .aTitle {
    color: #00af0f
}

html.dark .main .content .action.cna a.button.hl-cna .aTitle,html.dark .modal .action a.button.hl-cna .aTitle,html.dark .modal .action.cna a.button.hl-cna .aTitle {
    color: #c20000
}

html.dark .main .content .action.cna .off,html.dark .main .content .action.cna .on,html.dark .main .content .action.cna .special,html.dark .modal .action.cna .off,html.dark .modal .action.cna .on,html.dark .modal .action.cna .special {
    border-color: #181818
}

html.dark .main .content .action.cna .oldTech span.aTitle,html.dark .modal .action.cna .oldTech span.aTitle {
    color: #fff
}

html.dark .main .content .action.cnam span.aTitle,html.dark .modal .action.cnam span.aTitle {
    color: #975f5f
}

html.dark .main .content .enemyFortress {
    background-color: #282f2f
}

html.dark .main .content .green,html.dark .main .content .synth {
    box-shadow: 0 0 6px #48c774
}

html.dark .main .content .green>span,html.dark .main .content .synth>span {
    text-shadow: 1px 1px #48c774
}

html.dark .main .content .red {
    box-shadow: 0 0 6px #f14668
}

html.dark .main .content .red>span {
    text-shadow: 1px 1px #f14668
}

html.dark .main .content .yellow {
    box-shadow: 0 0 6px #ffdd57
}

html.dark .main .content .yellow>span {
    text-shadow: 1px 1px #ffdd57
}

html.dark .main .content .orange {
    box-shadow: 0 0 6px orange
}

html.dark .main .content .orange>span {
    text-shadow: 1px 1px orange
}

html.dark .main .content .purple {
    box-shadow: 0 0 6px #91006c
}

html.dark .main .content .purple>span {
    text-shadow: 1px 1px #91006c
}

html.dark .main .content .blue,html.dark .main .content .precog {
    box-shadow: 0 0 6px #167df0
}

html.dark .main .content .blue>span,html.dark .main .content .precog>span {
    text-shadow: 1px 1px #167df0
}

html.dark .main .content .cna .precog>span {
    text-shadow: none
}

html.dark .main .garrison .header,html.dark .main .government .header {
    border-bottom: .0625rem solid #ccc
}

html.dark .main .market-header {
    border-bottom: #ccc solid 1px
}

html.dark .main .galaxyTrade {
    border-top: #ccc solid 1px
}

html.dark .powerGrid {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem
}

html.dark .powerGrid .circuit {
    min-width: 18.5rem;
    cursor: pointer
}

html.dark .powerGrid .circuit.inactive {
    display: none
}

html.dark .powerGrid .circuit>span {
    display: inline-block
}

html.dark .powerGrid .circuit>span:first-child {
    width: 1.5rem
}

html.dark .powerGrid .circuit .struct {
    width: 12rem
}

html.dark .powerGrid .circuit .off,html.dark .powerGrid .circuit .on {
    min-width: 2rem;
    text-align: center
}

html.dark .powerGrid .circuit .off {
    color: #f14668
}

html.dark .powerGrid .circuit .on {
    color: #48c774
}

html.dark .gridHeader {
    border-top: #ccc solid .0625rem;
    margin: .25rem 0 .25rem 1rem;
    padding-top: .25rem
}

html.dark .powerGridHead {
    display: flex;
    justify-content: space-between
}

html.dark .powerGridHeader {
    margin-left: 1rem;
    margin-bottom: .5rem
}

html.dark .resetPowerGrid {
    margin-left: 1rem;
    margin-top: .75rem
}

html.dark .resetPowerGrid .button {
    height: 1.5rem
}

html.dark .fort .patrol .check {
    background-color: #000
}

html.dark .market-item .order {
    border: #ccc solid .0625rem;
    transition: all 200ms ease
}

html.dark .market-item .order:hover {
    border: #eee solid .0625rem;
    background-color: #3a4344
}

html.dark .inactive-row,html.dark .market-item.alt,html.dark .resource.alt {
    background-color: #0f1414
}

html.dark .resource.showBar.alt,html.dark .resource.showBar.prime {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#000 calc(var(--percent-full) + 1px),#000 100%)
}

html.dark .resource .bar {
    cursor: pointer
}

html.dark .modal .actionSpace {
    background-color: #1f2424
}

html.dark .modal-card-body,html.dark .modal-card-foot,html.dark .modal-card-head {
    background-color: #282f2f
}

html.dark .industry,html.dark .modalBox {
    background: #282f2f
}

html.dark .industry .divide,html.dark .industry .market-item,html.dark .industry .smelting,html.dark .modalBox .divide,html.dark .modalBox .market-item,html.dark .modalBox .smelting {
    border-top: #ccc solid .0625rem
}

html.dark .industry {
    background: 0 0
}

html.dark .industry .header,html.dark .industry p,html.dark .modalBox p {
    border-bottom: #ccc solid .0625rem
}

html.dark .industry .avail span {
    margin: 0 2.5rem 0 2.125rem
}

html.dark .govTask {
    margin-top: .25rem
}

html.dark .govTask .button {
    height: 1.5rem;
    margin-left: .5rem
}

html.dark .fileImport {
    background-color: #1f2424
}

html.dark .star1 {
    fill: #1f2424;
    stroke: #fff
}

html.dark .star1 path {
    stroke: #fff
}

html.dark .star1 path.bolden,html.darkNight .star1 path.bolden,html.dracula .star1 path.bolden,html.gruvboxDark .star1 path.bolden,html.gruvboxDarkRG .star1 path.bolden,html.gruvboxLight .star1 path.bolden,html.light .star1 path.bolden,html.night .star1 path.bolden,html.orangeSoda .star1 path.bolden,html.redgreen .star1 path.bolden {
    stroke-width: 8px
}

html.dark .star2 {
    fill: #fff
}

html.dark .star3 {
    fill: #cd7f32
}

html.dark .star4 {
    fill: silver
}

html.dark .modal .action div.special:hover .gear,html.dark .star5 {
    fill: #d4af37
}

html.dark .refresh svg {
    fill: #00ac95
}

html.dark .bldQueue::-webkit-scrollbar-track,html.dark .dropdown-content::-webkit-scrollbar-track,html.dark .hscroll::-webkit-scrollbar-track,html.dark .resTabs>.tabs::-webkit-scrollbar-track,html.dark .resTabs>section::-webkit-scrollbar-track,html.dark .sticky::-webkit-scrollbar-track,html.dark .vscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #1f2424
}

html.dark .bldQueue::-webkit-scrollbar,html.dark .dropdown-content::-webkit-scrollbar,html.dark .resTabs>.tabs::-webkit-scrollbar,html.dark .resTabs>section::-webkit-scrollbar,html.dark .sticky::-webkit-scrollbar,html.dark .vscroll::-webkit-scrollbar {
    width: 6px;
    background-color: #1f2424
}

html.dark .hscroll::-webkit-scrollbar {
    height: 8px;
    background-color: #1f2424
}

html.dark .bldQueue::-webkit-scrollbar-thumb,html.dark .dropdown-content::-webkit-scrollbar-thumb,html.dark .hscroll::-webkit-scrollbar-thumb,html.dark .resTabs>.tabs::-webkit-scrollbar-thumb,html.dark .resTabs>section::-webkit-scrollbar-thumb,html.dark .sticky::-webkit-scrollbar-thumb,html.dark .vscroll::-webkit-scrollbar-thumb {
    background-color: #f5f5f5
}

html.dark .bldQueue,html.dark .hscroll,html.dark .resTabs>.tabs,html.dark .resTabs>section,html.dark .sticky,html.dark .vscroll {
    scrollbar-color: #f5f5f5 #1f2424
}

html.dark .buttonList .is-selected,html.dark .modal .buttonList .is-selected {
    border-color: #00af0f
}

html.dark .modal .action span.off,html.dark .modal .action span.on {
    background: #1f2424;
    border: .0625rem solid #282f2f;
    color: #00af0f
}

html.dark .modal .action span.on.altwarn,html.dark .modal .action span.on.warn {
    color: #af5d00
}

html.dark .modal .action span.off {
    color: #c20000
}

html.dark .modal .action span.off:hover,html.dark .modal .action span.on:hover {
    border: .0625rem solid #3a4344
}

html.dark .modal .action.hl .button {
    border: solid 1px #00af0f
}

html.dark .pop-desc .has-text-caution {
    color: #a30500
}

html.dark .popper .grad-from-left {
    background-image: linear-gradient(90deg,#f14668 45%,#363636 55%)
}

html.dark .popper .grad-from-left-warn {
    background-image: linear-gradient(90deg,#af5d00 45%,#f14668 55%)
}

html.dark .popper .grad-from-right {
    background-image: linear-gradient(90deg,#363636 45%,#f14668 55%)
}

html.light body,html.light h2,html.light h3 {
    color: #000
}

html.light a {
    color: #4a4a4a
}

html.light .button.has-text-advanced,html.light .has-text-advanced {
    color: #0098a3
}

html.light .button.has-text-alert,html.light .has-text-alert {
    color: #743e00
}

html.light .button.has-text-caution,html.light .has-text-caution {
    color: #966100
}

html.light .button.has-text-danger,html.light .has-text-danger {
    color: #470303
}

html.light .has-text-fade {
    color: #5e5e5e
}

html.light .has-text-flair {
    color: #91006c
}

html.light .button.has-text-info,html.light .has-text-info {
    color: #167df0
}

html.light .has-text-label {
    color: #10f
}

html.light .button.has-text-special,html.light .has-text-special {
    color: #91006c
}

html.light .button.has-text-success,html.light .has-text-success {
    color: #082412
}

html.light .button.has-text-warning,html.light .has-text-warning {
    color: #7a6304
}

html.light .has-text-danger-pulse {
    color: #7a6304;
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

html.light .challenge .simButton {
    border-color: #082412
}

html.light .challenge .configList {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around
}

html.light .challenge .configList>div {
    margin: 0 .25rem;
    width: 10rem
}

html.light .popper .has-text-label {
    color: #10f
}

html.light .popper .has-text-success {
    color: #1c7e21
}

html.light .modal-card-head p,html.light .popper .has-text-warning {
    color: #7a6304
}

html.light .popper .divide-line {
    border-top: #4e4e4e solid .0625rem
}

html.light .main>div.popper,html.light body .modal>div.popper {
    background-color: #f5f5f5;
    border: .0625rem solid #000;
    color: #363636
}

html.light .main>div.popper>div,html.light body .modal>div.popper>div {
    border-top: solid .0625rem #000
}

html.light .main>div.popper>div:first-child,html.light body .modal>div.popper>div:first-child {
    border-top: none
}

html.light .main>div.popper .has-text-dark,html.light body .modal>div.popper .has-text-dark {
    color: #363636
}

html.light .main>div.popper .split,html.light body .modal>div.popper .split {
    display: flex
}

html.light .main>div.popper .split>div,html.light body .modal>div.popper .split>div {
    flex-wrap: nowrap
}

html.light .shipPopper .divider {
    border-bottom: solid .0625rem #000
}

html.light .sliderbar>span {
    position: relative;
    display: inline-block;
    width: 5%;
    bottom: 1.125rem;
    margin: 0 .375rem
}

html.light .sliderbar .b-slider {
    display: inline-block;
    width: 80%
}

html.light .sliderbar .b-slider .b-slider-track {
    height: 1rem
}

html.light .sliderbar .is-primary .b-slider-fill {
    background: #082412
}

html.light .sliderbar.thin>span {
    bottom: .625rem
}

html.light .sliderbar.thin .b-slider {
    margin-top: .5rem;
    margin-bottom: .5rem
}

html.light .msgQueueFilters span,html.light .tabs a {
    color: #000
}

html.light .msgQueueFilters span.is-active,html.light .tabs li.is-active a {
    border-bottom-color: #b86bff;
    color: #b86bff
}

html.light .msgQueueFilters span:hover,html.light .tabs a:hover {
    border-bottom-color: #363636;
    color: #363636
}

html.light .button {
    background-color: #fff;
    color: #000
}

html.light .button.is-light,html.night {
    background-color: #000
}

html.light .button.is-hovered,html.light .button:hover {
    background-color: #ccc;
    color: #363636
}

html.light .button.is-focused,html.light .button:focus {
    border-color: #000
}

html.light .basic-button {
    border: #000 solid .0625rem
}

html.light .basic-button:hover {
    border: #333 solid .0625rem;
    background-color: #ccc
}

html.light .text-button:hover {
    cursor: pointer;
    color: #363636;
    text-decoration: underline
}

html.light .checkbox:hover,html.light .label,html.light .radio:hover {
    color: #363636
}

html.light .dropdown-content {
    background-color: #fff
}

html.light .b-tooltip.is-right:before {
    border-right: 5px solid #f2f2f2
}

html.light .b-tooltip.is-left:before {
    border-left: 5px solid #f2f2f2
}

html.light .b-tooltip.is-bottom:before {
    border-bottom: 5px solid #f2f2f2
}

html.light .b-tooltip.is-primary .tooltip-content {
    background: #f2f2f2;
    border: .0625rem solid #f5f5f5;
    color: #000
}

html.light .add,html.light .sub {
    border: #000 solid .0625rem;
    transition: all 200ms ease
}

html.light .add:hover,html.light .sub:hover {
    background-color: #ccc;
    color: #363636
}

html.light .current {
    border-top: #000 solid .0625rem;
    border-bottom: #000 solid .0625rem
}

html.light .current.infoOnly {
    border: #000 solid .0625rem
}

html.light .promoBar,html.light .topBar {
    background-color: #c7c7c7
}

html.light .pause,html.light .play {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

html.light .play {
    bottom: .125rem;
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-left: .375rem solid #082412;
    border-bottom: .25rem solid transparent
}

html.light .pause {
    box-sizing: content-box;
    bottom: .0625rem;
    width: .125rem;
    height: .625rem;
    border-right: .125rem solid #470303;
    border-left: .125rem solid #470303
}

html.light .meter.low {
    color: #c00
}

html.light .meter.neutral {
    color: #c0ce00
}

html.light .meter.high {
    color: #00af0f
}

html.light .buildList .hl-ca,html.light .main .content .action a.button.hl-ca .aTitle {
    color: #008f0c
}

html.light .buildList .hl-cna,html.light .main .content .action a.button.hl-cna .aTitle {
    color: maroon
}

html.light .graphContainer span.special:hover .gear,html.light .msgQueue span.special:hover .gear {
    fill: #4a5354
}

html.light .main .content .action a.button span.count,html.light .main .content .divider h2 {
    background: #fff
}

html.light .main .content .action div.special,html.light .modal .action div.special {
    background: #fff;
    border: .0625rem solid #3a4344
}

html.light .graphContainer span.special .gear,html.light .main .content .action div.special .gear,html.light .modal .action div.special .gear,html.light .msgQueue span.special .gear {
    fill: #3a4344
}

html.light .main .content .action div.special:hover {
    border: .0625rem solid #000
}

html.light .main .content .action div.special:hover .gear {
    fill: #4a5354
}

html.light .main .content .action span.on {
    background: #fff;
    border: .0625rem solid #000;
    color: #008f0c
}

html.light .main .content .action span.on.altwarn,html.light .main .content .action span.on.warn {
    color: #743e00
}

html.light .main .content .action span.off {
    background: #fff;
    border: .0625rem solid #000;
    color: maroon
}

html.light .main .content .action span.off:hover,html.light .main .content .action span.on:hover,html.light .modal .action div.special:hover {
    border: .0625rem solid #000
}

html.light .main .content .action.hl .button {
    border: solid 1px maroon
}

html.light .main .content .action.cna a.button,html.light .modal .action.cna a.button {
    background: #ddd
}

html.light .main .content .action.cna a.button.hl-ca .aTitle,html.light .modal .action a.button.hl-ca .aTitle,html.light .modal .action.cna a.button.hl-ca .aTitle {
    color: #008f0c
}

html.light .main .content .action.cna a.button.hl-cna .aTitle,html.light .modal .action a.button.hl-cna .aTitle,html.light .modal .action.cna a.button.hl-cna .aTitle {
    color: maroon
}

html.light .main .content .action.cna .off,html.light .main .content .action.cna .on,html.light .main .content .action.cna .special,html.light .modal .action.cna .off,html.light .modal .action.cna .on,html.light .modal .action.cna .special {
    border-color: #000
}

html.light .main .content .action.cna .oldTech span.aTitle,html.light .modal .action.cna .oldTech span.aTitle {
    color: #000
}

html.light .main .content .action.cnam span.aTitle,html.light .modal .action.cnam span.aTitle {
    color: #900
}

html.light .main .content .enemyFortress {
    background-color: #fff
}

html.light .main .content .green,html.light .main .content .synth {
    box-shadow: 0 0 6px #082412
}

html.light .main .content .green>span,html.light .main .content .synth>span {
    text-shadow: 1px 1px #082412
}

html.light .main .content .red {
    box-shadow: 0 0 6px #470303
}

html.light .main .content .red>span {
    text-shadow: 1px 1px #470303
}

html.light .main .content .yellow {
    box-shadow: 0 0 6px #7a6304
}

html.light .main .content .yellow>span {
    text-shadow: 1px 1px #7a6304
}

html.light .main .content .orange {
    box-shadow: 0 0 6px #966100
}

html.light .main .content .orange>span {
    text-shadow: 1px 1px #966100
}

html.light .main .content .purple {
    box-shadow: 0 0 6px #91006c
}

html.light .main .content .purple>span {
    text-shadow: 1px 1px #91006c
}

html.light .main .content .blue,html.light .main .content .precog {
    box-shadow: 0 0 6px #167df0
}

html.light .main .content .blue>span,html.light .main .content .precog>span {
    text-shadow: 1px 1px #167df0
}

html.light .main .content .cna .precog>span {
    text-shadow: none
}

html.light .main .garrison .header,html.light .main .government .header {
    border-bottom: .0625rem solid #4e4e4e
}

html.light .main .market-header {
    border-bottom: #4e4e4e solid 1px
}

html.light .main .galaxyTrade {
    border-top: #4e4e4e solid 1px
}

html.light .powerGrid {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem
}

html.light .powerGrid .circuit {
    min-width: 18.5rem;
    cursor: pointer
}

html.light .powerGrid .circuit.inactive {
    display: none
}

html.light .powerGrid .circuit>span {
    display: inline-block
}

html.light .powerGrid .circuit>span:first-child {
    width: 1.5rem
}

html.light .powerGrid .circuit .struct {
    width: 12rem
}

html.light .powerGrid .circuit .off,html.light .powerGrid .circuit .on {
    min-width: 2rem;
    text-align: center
}

html.light .powerGrid .circuit .off {
    color: #470303
}

html.light .powerGrid .circuit .on {
    color: #082412
}

html.light .gridHeader {
    border-top: #4e4e4e solid .0625rem;
    margin: .25rem 0 .25rem 1rem;
    padding-top: .25rem
}

html.light .powerGridHead {
    display: flex;
    justify-content: space-between
}

html.light .powerGridHeader {
    margin-left: 1rem;
    margin-bottom: .5rem
}

html.light .resetPowerGrid {
    margin-left: 1rem;
    margin-top: .75rem
}

html.light .resetPowerGrid .button {
    height: 1.5rem
}

html.light .fort .patrol .check {
    background-color: #fff
}

html.light .market-item .order {
    border: #000 solid .0625rem;
    transition: all 200ms ease
}

html.light .market-item .order:hover {
    border: #333 solid .0625rem;
    background-color: #ccc
}

html.light .inactive-row,html.light .market-item.alt,html.light .resource.alt {
    background-color: #ddd
}

html.light .resource.showBar.prime {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#bfbfbf calc(var(--percent-full) + 1px),#bfbfbf 100%)
}

html.light .resource.showBar.alt {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#9d9d9d calc(var(--percent-full) + 1px),#9d9d9d 100%)
}

html.light .resource .bar {
    cursor: pointer
}

html.light .modal .actionSpace,html.light .modal-card-body,html.light .modal-card-foot,html.light .modal-card-head {
    background-color: #fff
}

html.light .industry,html.light .modal .action a.button span.count,html.light .modalBox {
    background: #fff
}

html.light .industry p,html.light .modalBox p {
    border-bottom: #4e4e4e solid .0625rem
}

html.light .industry .divide,html.light .industry .market-item,html.light .industry .smelting,html.light .modalBox .divide,html.light .modalBox .market-item,html.light .modalBox .smelting {
    border-top: #4e4e4e solid .0625rem
}

html.light .industry .avail span {
    margin: 0 2.5rem 0 2.125rem
}

html.light .govTask {
    margin-top: .25rem
}

html.light .govTask .button {
    height: 1.5rem;
    margin-left: .5rem
}

html.light .fileImport {
    background-color: #fff
}

html.light .star1 {
    fill: #fff;
    stroke: #000
}

html.light .star1 path {
    stroke: #000
}

html.light .star2 {
    fill: #000
}

html.light .star3 {
    fill: #cd7f32
}

html.light .star4 {
    fill: silver
}

html.light .star5,html.night .graphContainer span.special:hover .gear,html.night .msgQueue span.special:hover .gear {
    fill: #d4af37
}

html.light .refresh svg {
    fill: #0098a3
}

html.light .bldQueue::-webkit-scrollbar-track,html.light .dropdown-content::-webkit-scrollbar-track,html.light .hscroll::-webkit-scrollbar-track,html.light .resTabs>.tabs::-webkit-scrollbar-track,html.light .resTabs>section::-webkit-scrollbar-track,html.light .sticky::-webkit-scrollbar-track,html.light .vscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #f5f5f5
}

html.light .bldQueue::-webkit-scrollbar,html.light .dropdown-content::-webkit-scrollbar,html.light .resTabs>.tabs::-webkit-scrollbar,html.light .resTabs>section::-webkit-scrollbar,html.light .sticky::-webkit-scrollbar,html.light .vscroll::-webkit-scrollbar {
    width: 6px;
    background-color: #f5f5f5
}

html.light .hscroll::-webkit-scrollbar {
    height: 8px;
    background-color: #f5f5f5
}

html.light .bldQueue::-webkit-scrollbar-thumb,html.light .dropdown-content::-webkit-scrollbar-thumb,html.light .hscroll::-webkit-scrollbar-thumb,html.light .resTabs>.tabs::-webkit-scrollbar-thumb,html.light .resTabs>section::-webkit-scrollbar-thumb,html.light .sticky::-webkit-scrollbar-thumb,html.light .vscroll::-webkit-scrollbar-thumb {
    background-color: #000
}

html.light .bldQueue,html.light .hscroll,html.light .resTabs>.tabs,html.light .resTabs>section,html.light .sticky,html.light .vscroll {
    scrollbar-color: #000 #f5f5f5
}

html.light .buttonList .is-selected {
    border-color: #008f0c
}

html.light .modal .action div.special:hover .gear {
    fill: #4a5354
}

html.light .modal .action span.off,html.light .modal .action span.on {
    background: #fff;
    border: .0625rem solid #000;
    color: #008f0c
}

html.light .modal .action span.on.altwarn,html.light .modal .action span.on.warn {
    color: #743e00
}

html.light .modal .action span.off {
    color: maroon
}

html.light .modal .action span.off:hover,html.light .modal .action span.on:hover {
    border: .0625rem solid #000
}

html.light .modal .action.hl .button {
    border: solid 1px maroon
}

html.light body {
    font-weight: 500
}

html.light .button,html.light .button:hover {
    border: solid .0625rem #000
}

html.light .topBar .calendar .wi-thermometer-exterior {
    color: #00d6b2
}

html.light .topBar .calendar .wi-day-sunny,html.light .topBar .calendar .wi-day-windy {
    color: #fffb00
}

html.light .topBar .calendar .wi-cloud,html.light .topBar .calendar .wi-cloudy-gusts {
    color: #dfe2d3
}

html.light .topBar .calendar .wi-rain,html.light .topBar .calendar .wi-storm-showers {
    color: #00b0e6
}

html.light .topBar .calendar .wi-snow,html.light .topBar .calendar .wi-snow-wind,html.night .main>div.popper .has-text-dark,html.night body,html.night body .modal>div.popper .has-text-dark,html.night h2,html.night h3 {
    color: #fff
}

html.light .main .content .action a.button span.count,html.light .modal .action a.button span.count {
    border-bottom: .0625rem solid #000;
    border-left: .0625rem solid #000
}

html.light .main .content .action.cna:not(.cnam) span.aTitle,html.light .modal .action.cna:not(.cnam) span.aTitle {
    color: #282828
}

html.light .industry {
    background: 0 0
}

html.light .industry .smelting {
    border-top: 0
}

html.light .industry .header {
    border-bottom: #4e4e4e solid .0625rem
}

html.light .progress::-moz-progress-bar,html.light .progress::-webkit-progress-value {
    background-color: #898989
}

html.light .popper .grad-from-left {
    background-image: linear-gradient(90deg,#470303 45%,#363636 55%)
}

html.light .popper .grad-from-left-warn {
    background-image: linear-gradient(90deg,#743e00 45%,#470303 55%)
}

html.light .popper .grad-from-right {
    background-image: linear-gradient(90deg,#363636 45%,#470303 55%)
}

html.light .modal .buttonList .is-selected {
    border-color: #008f0c
}

html.light .modal .buttonList .is-focused {
    color: #000
}

html.night a {
    color: #1abc9c
}

html.night .button.has-text-advanced,html.night .has-text-advanced {
    color: #00ac95
}

html.night .button.has-text-alert,html.night .has-text-alert {
    color: #af5d00
}

html.night .button.has-text-caution,html.night .has-text-caution {
    color: orange
}

html.night .button.has-text-danger,html.night .has-text-danger {
    color: #f14668
}

html.night .has-text-fade {
    color: #5e5e5e
}

html.night .has-text-flair {
    color: #d39753
}

html.night .button.has-text-info,html.night .has-text-info {
    color: #167df0
}

html.night .has-text-label {
    color: #ffff9e
}

html.night .button.has-text-special,html.night .has-text-special {
    color: #e500b4
}

html.night .button.has-text-success,html.night .has-text-success {
    color: #48c774
}

html.night .button.has-text-warning,html.night .has-text-warning {
    color: #ffdd57
}

html.night .has-text-danger-pulse {
    color: #ffdd57;
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

html.night .challenge .simButton {
    border-color: #48c774
}

html.night .challenge .configList {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around
}

html.night .challenge .configList>div {
    margin: 0 .25rem;
    width: 10rem
}

html.night .popper .has-text-label {
    color: #ffff9e
}

html.night .popper .has-text-success {
    color: #23d160
}

html.night .modal-card-head p,html.night .popper .has-text-warning {
    color: #ffdd57
}

html.night .popper .divide-line {
    border-top: #ccc solid .0625rem
}

html.night .main>div.popper,html.night body .modal>div.popper {
    background-color: #0f0f0f;
    border: .0625rem solid #999;
    color: #fff
}

html.night .main>div.popper>div,html.night body .modal>div.popper>div {
    border-top: solid .0625rem #999
}

html.night .main>div.popper>div:first-child,html.night body .modal>div.popper>div:first-child {
    border-top: none
}

html.night .main>div.popper .split,html.night body .modal>div.popper .split {
    display: flex
}

html.night .main>div.popper .split>div,html.night body .modal>div.popper .split>div {
    flex-wrap: nowrap
}

html.darkNight .main>div.popper .split>div:nth-of-type(2),html.darkNight body .modal>div.popper .split>div:nth-of-type(2),html.night .main>div.popper .split>div:nth-of-type(2),html.night body .modal>div.popper .split>div:nth-of-type(2),html.redgreen .main>div.popper .split>div:nth-of-type(2),html.redgreen body .modal>div.popper .split>div:nth-of-type(2) {
    border-left: solid .0625rem #999;
    margin-left: .375rem;
    padding-left: .375rem
}

html.night .shipPopper .divider {
    border-bottom: solid .0625rem #999
}

html.night .sliderbar>span {
    position: relative;
    display: inline-block;
    width: 5%;
    bottom: 1.125rem;
    margin: 0 .375rem
}

html.night .sliderbar .b-slider {
    display: inline-block;
    width: 80%
}

html.night .sliderbar .b-slider .b-slider-track {
    height: 1rem
}

html.night .sliderbar .is-primary .b-slider-fill {
    background: #48c774
}

html.night .sliderbar.thin>span {
    bottom: .625rem
}

html.night .sliderbar.thin .b-slider {
    margin-top: .5rem;
    margin-bottom: .5rem
}

html.night .msgQueueFilters span,html.night .tabs a {
    color: #fff
}

html.night .msgQueueFilters span.is-active,html.night .tabs li.is-active a {
    border-bottom-color: #1abc9c;
    color: #1abc9c
}

html.night .msgQueueFilters span:hover,html.night .tabs a:hover {
    border-bottom-color: #f2f2f2;
    color: #f2f2f2
}

html.night .button {
    background-color: #282f2f;
    color: #fff
}

html.night .button.is-light {
    background-color: #fff
}

html.night .button.is-hovered,html.night .button:hover {
    background-color: #3a4344;
    color: #f2f2f2
}

html.night .button.is-focused,html.night .button:focus {
    border-color: #dbdbdb
}

html.night .basic-button {
    border: #ccc solid .0625rem
}

html.night .basic-button:hover {
    border: #eee solid .0625rem;
    background-color: #3a4344
}

html.night .text-button:hover {
    cursor: pointer;
    color: #f2f2f2;
    text-decoration: underline
}

html.night .label {
    color: #dbdee0
}

html.night .checkbox:hover,html.night .radio:hover,html.redgreen a {
    color: #1abc9c
}

html.night .dropdown-content {
    background-color: #1f2424
}

html.night .b-tooltip.is-right:before {
    border-right: 5px solid #999
}

html.night .b-tooltip.is-left:before {
    border-left: 5px solid #999
}

html.night .b-tooltip.is-bottom:before {
    border-bottom: 5px solid #999
}

html.night .b-tooltip.is-primary .tooltip-content {
    background: #0f0f0f;
    border: .0625rem solid #999;
    color: #fff
}

html.night .add,html.night .sub {
    border: #ccc solid .0625rem;
    transition: all 200ms ease
}

html.night .add:hover,html.night .sub:hover {
    background-color: #3a4344;
    color: #f2f2f2
}

html.night .current {
    border-top: #ccc solid .0625rem;
    border-bottom: #ccc solid .0625rem
}

html.night .current.infoOnly {
    border: #ccc solid .0625rem
}

html.night .promoBar,html.night .topBar {
    background-color: #3a4344
}

html.night .pause,html.night .play {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

html.night .play {
    bottom: .125rem;
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-left: .375rem solid #48c774;
    border-bottom: .25rem solid transparent
}

html.night .pause {
    box-sizing: content-box;
    bottom: .0625rem;
    width: .125rem;
    height: .625rem;
    border-right: .125rem solid #f14668;
    border-left: .125rem solid #f14668
}

html.night .meter.low {
    color: #c00
}

html.night .meter.neutral {
    color: #c0ce00
}

html.night .buildList .hl-ca,html.night .main .content .action a.button.hl-ca .aTitle,html.night .meter.high {
    color: #00af0f
}

html.night .buildList .hl-cna,html.night .main .content .action a.button.hl-cna .aTitle {
    color: #c20000
}

html.night .graphContainer span.special .gear,html.night .main .content .action div.special .gear,html.night .modal .action div.special .gear,html.night .msgQueue span.special .gear {
    fill: #ad5f12
}

html.darkNight .main .content .action a.button span.count,html.darkNight .main .content .divider h2,html.darkNight .modal .action a.button span.count,html.night .main .content .action a.button span.count,html.night .main .content .divider h2,html.night .modal .action a.button span.count,html.redgreen .main .content .action a.button span.count,html.redgreen .main .content .divider h2,html.redgreen .modal .action a.button span.count {
    background: #000
}

html.night .main .content .action div.special,html.night .modal .action div.special {
    background: #000;
    border: .0625rem solid #282f2f
}

html.night .main .content .action div.special:hover {
    border: .0625rem solid #3a4344
}

html.night .main .content .action div.special:hover .gear {
    fill: #d4af37
}

html.night .main .content .action span.off,html.night .main .content .action span.on {
    background: #000;
    border: .0625rem solid #282f2f;
    color: #00af0f
}

html.night .main .content .action span.on.altwarn,html.night .main .content .action span.on.warn {
    color: #af5d00
}

html.night .main .content .action span.off {
    color: #c20000
}

html.night .main .content .action span.off:hover,html.night .main .content .action span.on:hover,html.night .modal .action div.special:hover {
    border: .0625rem solid #3a4344
}

html.night .main .content .action.hl .button {
    border: solid 1px #00af0f
}

html.darkNight .main .content .action.cna a.button,html.darkNight .modal .action.cna a.button,html.night .main .content .action.cna a.button,html.night .modal .action.cna a.button,html.redgreen .main .content .action.cna a.button,html.redgreen .modal .action.cna a.button {
    background: #181818
}

html.night .main .content .action.cna a.button.hl-ca .aTitle,html.night .modal .action a.button.hl-ca .aTitle,html.night .modal .action.cna a.button.hl-ca .aTitle {
    color: #00af0f
}

html.night .main .content .action.cna a.button.hl-cna .aTitle,html.night .modal .action a.button.hl-cna .aTitle,html.night .modal .action.cna a.button.hl-cna .aTitle {
    color: #c20000
}

html.night .main .content .action.cna .off,html.night .main .content .action.cna .on,html.night .main .content .action.cna .special,html.night .modal .action.cna .off,html.night .modal .action.cna .on,html.night .modal .action.cna .special {
    border-color: #181818
}

html.night .main .content .action.cna .oldTech span.aTitle,html.night .modal .action.cna .oldTech span.aTitle,html.redgreen .main>div.popper .has-text-dark,html.redgreen body,html.redgreen body .modal>div.popper .has-text-dark,html.redgreen h2,html.redgreen h3 {
    color: #fff
}

html.night .main .content .action.cnam span.aTitle,html.night .modal .action.cnam span.aTitle {
    color: #975f5f
}

html.night .main .content .enemyFortress {
    background-color: #282f2f
}

html.night .main .content .green,html.night .main .content .synth {
    box-shadow: 0 0 6px #48c774
}

html.night .main .content .green>span,html.night .main .content .synth>span {
    text-shadow: 1px 1px #48c774
}

html.night .main .content .red {
    box-shadow: 0 0 6px #f14668
}

html.night .main .content .red>span {
    text-shadow: 1px 1px #f14668
}

html.night .main .content .yellow {
    box-shadow: 0 0 6px #ffdd57
}

html.night .main .content .yellow>span {
    text-shadow: 1px 1px #ffdd57
}

html.night .main .content .orange {
    box-shadow: 0 0 6px orange
}

html.night .main .content .orange>span {
    text-shadow: 1px 1px orange
}

html.night .main .content .purple {
    box-shadow: 0 0 6px #e500b4
}

html.night .main .content .purple>span {
    text-shadow: 1px 1px #e500b4
}

html.night .main .content .blue,html.night .main .content .precog {
    box-shadow: 0 0 6px #167df0
}

html.night .main .content .blue>span,html.night .main .content .precog>span {
    text-shadow: 1px 1px #167df0
}

html.night .main .content .cna .precog>span {
    text-shadow: none
}

html.night .main .garrison .header,html.night .main .government .header {
    border-bottom: .0625rem solid #ccc
}

html.night .main .market-header {
    border-bottom: #ccc solid 1px
}

html.night .main .galaxyTrade {
    border-top: #ccc solid 1px
}

html.night .powerGrid {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem
}

html.night .powerGrid .circuit {
    min-width: 18.5rem;
    cursor: pointer
}

html.night .powerGrid .circuit.inactive {
    display: none
}

html.night .powerGrid .circuit>span {
    display: inline-block
}

html.night .powerGrid .circuit>span:first-child {
    width: 1.5rem
}

html.night .powerGrid .circuit .struct {
    width: 12rem
}

html.night .powerGrid .circuit .off,html.night .powerGrid .circuit .on {
    min-width: 2rem;
    text-align: center
}

html.night .powerGrid .circuit .off {
    color: #f14668
}

html.night .powerGrid .circuit .on {
    color: #48c774
}

html.night .gridHeader {
    border-top: #ccc solid .0625rem;
    margin: .25rem 0 .25rem 1rem;
    padding-top: .25rem
}

html.night .powerGridHead {
    display: flex;
    justify-content: space-between
}

html.night .powerGridHeader {
    margin-left: 1rem;
    margin-bottom: .5rem
}

html.night .resetPowerGrid {
    margin-left: 1rem;
    margin-top: .75rem
}

html.night .resetPowerGrid .button {
    height: 1.5rem
}

html.night .fort .patrol .check {
    background-color: #000
}

html.night .market-item .order {
    border: #ccc solid .0625rem;
    transition: all 200ms ease
}

html.night .market-item .order:hover {
    border: #eee solid .0625rem;
    background-color: #3a4344
}

html.night .inactive-row,html.night .market-item.alt,html.night .resource.alt {
    background-color: #1b1b1b
}

html.night .resource.showBar.prime {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#1a1a1a calc(var(--percent-full) + 1px),#1a1a1a 100%)
}

html.night .resource.showBar.alt {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#000 calc(var(--percent-full) + 1px),#000 100%)
}

html.night .resource .bar {
    cursor: pointer
}

html.night .modal .actionSpace {
    background-color: #000
}

html.night .modal-card-body,html.night .modal-card-foot,html.night .modal-card-head {
    background-color: #282f2f
}

html.night .industry,html.night .modalBox {
    background: #282f2f
}

html.night .industry .divide,html.night .industry .market-item,html.night .industry .smelting,html.night .modalBox .divide,html.night .modalBox .market-item,html.night .modalBox .smelting {
    border-top: #ccc solid .0625rem
}

html.night .industry {
    background: 0 0
}

html.night .industry .header,html.night .industry p,html.night .modalBox p {
    border-bottom: #ccc solid .0625rem
}

html.night .industry .avail span {
    margin: 0 2.5rem 0 2.125rem
}

html.night .govTask {
    margin-top: .25rem
}

html.night .govTask .button {
    height: 1.5rem;
    margin-left: .5rem
}

html.night .fileImport,html.redgreen {
    background-color: #000
}

html.night .star1 {
    fill: #000;
    stroke: #fff
}

html.darkNight .star1 path,html.gruvboxLight .star1 path,html.night .star1 path,html.redgreen .star1 path {
    stroke: #fff
}

html.night .star2 {
    fill: #fff
}

html.night .star3 {
    fill: #cd7f32
}

html.night .star4 {
    fill: silver
}

html.night .modal .action div.special:hover .gear,html.night .star5,html.redgreen .graphContainer span.special:hover .gear,html.redgreen .msgQueue span.special:hover .gear {
    fill: #d4af37
}

html.darkNight .refresh svg,html.night .refresh svg,html.redgreen .refresh svg {
    fill: #00ac95
}

html.night .bldQueue::-webkit-scrollbar-track,html.night .dropdown-content::-webkit-scrollbar-track,html.night .hscroll::-webkit-scrollbar-track,html.night .resTabs>.tabs::-webkit-scrollbar-track,html.night .resTabs>section::-webkit-scrollbar-track,html.night .sticky::-webkit-scrollbar-track,html.night .vscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #1f2424
}

html.night .bldQueue::-webkit-scrollbar,html.night .dropdown-content::-webkit-scrollbar,html.night .resTabs>.tabs::-webkit-scrollbar,html.night .resTabs>section::-webkit-scrollbar,html.night .sticky::-webkit-scrollbar,html.night .vscroll::-webkit-scrollbar {
    width: 6px;
    background-color: #1f2424
}

html.night .hscroll::-webkit-scrollbar {
    height: 8px;
    background-color: #1f2424
}

html.night .bldQueue::-webkit-scrollbar-thumb,html.night .dropdown-content::-webkit-scrollbar-thumb,html.night .hscroll::-webkit-scrollbar-thumb,html.night .resTabs>.tabs::-webkit-scrollbar-thumb,html.night .resTabs>section::-webkit-scrollbar-thumb,html.night .sticky::-webkit-scrollbar-thumb,html.night .vscroll::-webkit-scrollbar-thumb {
    background-color: #727272
}

html.night .bldQueue,html.night .hscroll,html.night .resTabs>.tabs,html.night .resTabs>section,html.night .sticky,html.night .vscroll {
    scrollbar-color: #727272 #1f2424
}

html.night .buttonList .is-selected,html.night .modal .buttonList .is-selected {
    border-color: #00af0f
}

html.night .modal .action span.off,html.night .modal .action span.on {
    background: #000;
    border: .0625rem solid #282f2f;
    color: #00af0f
}

html.night .modal .action span.on.altwarn,html.night .modal .action span.on.warn {
    color: #af5d00
}

html.night .modal .action span.off {
    color: #c20000
}

html.night .modal .action span.off:hover,html.night .modal .action span.on:hover {
    border: .0625rem solid #3a4344
}

html.night .modal .action.hl .button,html.redgreen .main .content .action.hl .button {
    border: solid 1px #00af0f
}

html.night .popper .grad-from-left {
    background-image: linear-gradient(90deg,#f14668 45%,#fff 55%)
}

html.night .popper .grad-from-left-warn {
    background-image: linear-gradient(90deg,#af5d00 45%,#f14668 55%)
}

html.night .popper .grad-from-right {
    background-image: linear-gradient(90deg,#fff 45%,#f14668 55%)
}

html.redgreen .button.has-text-advanced,html.redgreen .has-text-advanced {
    color: #00ac95
}

html.redgreen .button.has-text-alert,html.redgreen .has-text-alert {
    color: #af5d00
}

html.redgreen .button.has-text-caution,html.redgreen .has-text-caution {
    color: orange
}

html.redgreen .button.has-text-danger,html.redgreen .has-text-danger {
    color: #90c
}

html.redgreen .has-text-fade {
    color: #5e5e5e
}

html.redgreen .has-text-flair {
    color: #0f0
}

html.redgreen .button.has-text-info,html.redgreen .has-text-info {
    color: #167df0
}

html.redgreen .button.has-text-special,html.redgreen .has-text-label,html.redgreen .has-text-special {
    color: #ffff9e
}

html.redgreen .button.has-text-success,html.redgreen .has-text-success {
    color: #0f0
}

html.redgreen .button.has-text-warning,html.redgreen .has-text-warning,html.redgreen .modal-card-head p {
    color: #fc0
}

html.redgreen .has-text-danger-pulse {
    color: #fc0;
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

html.redgreen .challenge .simButton {
    border-color: #0f0
}

html.redgreen .challenge .configList {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around
}

html.redgreen .challenge .configList>div {
    margin: 0 .25rem;
    width: 10rem
}

html.redgreen .popper .has-text-label {
    color: #ffff9e
}

html.redgreen .popper .has-text-success {
    color: #23d160
}

html.redgreen .popper .has-text-warning {
    color: #ffdd57
}

html.redgreen .popper .divide-line {
    border-top: #ccc solid .0625rem
}

html.redgreen .main>div.popper,html.redgreen body .modal>div.popper {
    background-color: #0f0f0f;
    border: .0625rem solid #999;
    color: #fff
}

html.redgreen .main>div.popper>div,html.redgreen body .modal>div.popper>div {
    border-top: solid .0625rem #999
}

html.redgreen .main>div.popper>div:first-child,html.redgreen body .modal>div.popper>div:first-child {
    border-top: none
}

html.redgreen .main>div.popper .split,html.redgreen body .modal>div.popper .split {
    display: flex
}

html.redgreen .main>div.popper .split>div,html.redgreen body .modal>div.popper .split>div {
    flex-wrap: nowrap
}

html.redgreen .shipPopper .divider {
    border-bottom: solid .0625rem #999
}

html.redgreen .sliderbar>span {
    position: relative;
    display: inline-block;
    width: 5%;
    bottom: 1.125rem;
    margin: 0 .375rem
}

html.redgreen .sliderbar .b-slider {
    display: inline-block;
    width: 80%
}

html.redgreen .sliderbar .b-slider .b-slider-track {
    height: 1rem
}

html.redgreen .sliderbar .is-primary .b-slider-fill {
    background: #0f0
}

html.redgreen .sliderbar.thin>span {
    bottom: .625rem
}

html.redgreen .sliderbar.thin .b-slider {
    margin-top: .5rem;
    margin-bottom: .5rem
}

html.redgreen .msgQueueFilters span,html.redgreen .tabs a {
    color: #fff
}

html.redgreen .msgQueueFilters span.is-active,html.redgreen .tabs li.is-active a {
    border-bottom-color: #1abc9c;
    color: #167df0
}

html.redgreen .msgQueueFilters span:hover,html.redgreen .tabs a:hover {
    border-bottom-color: #f2f2f2;
    color: #f2f2f2
}

html.redgreen .button {
    background-color: #282f2f;
    color: #fff
}

html.redgreen .button.is-light {
    background-color: #fff
}

html.redgreen .button.is-hovered,html.redgreen .button:hover {
    background-color: #3a4344;
    color: #f2f2f2
}

html.redgreen .button.is-focused,html.redgreen .button:focus {
    border-color: #dbdbdb
}

html.redgreen .basic-button {
    border: #ccc solid .0625rem
}

html.redgreen .basic-button:hover {
    border: #eee solid .0625rem;
    background-color: #3a4344
}

html.redgreen .text-button:hover {
    cursor: pointer;
    color: #f2f2f2;
    text-decoration: underline
}

html.redgreen .label {
    color: #dbdee0
}

html.darkNight a,html.redgreen .checkbox:hover,html.redgreen .radio:hover {
    color: #1abc9c
}

html.redgreen .dropdown-content {
    background-color: #1f2424
}

html.redgreen .b-tooltip.is-right:before {
    border-right: 5px solid #999
}

html.redgreen .b-tooltip.is-left:before {
    border-left: 5px solid #999
}

html.redgreen .b-tooltip.is-bottom:before {
    border-bottom: 5px solid #999
}

html.redgreen .b-tooltip.is-primary .tooltip-content {
    background: #0f0f0f;
    border: .0625rem solid #999;
    color: #fff
}

html.redgreen .add,html.redgreen .sub {
    border: #ccc solid .0625rem;
    transition: all 200ms ease
}

html.redgreen .add:hover,html.redgreen .sub:hover {
    background-color: #3a4344;
    color: #f2f2f2
}

html.redgreen .current {
    border-top: #ccc solid .0625rem;
    border-bottom: #ccc solid .0625rem
}

html.redgreen .current.infoOnly {
    border: #ccc solid .0625rem
}

html.redgreen .promoBar,html.redgreen .topBar {
    background-color: #3a4344
}

html.redgreen .pause,html.redgreen .play {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

html.redgreen .play {
    bottom: .125rem;
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-left: .375rem solid #0f0;
    border-bottom: .25rem solid transparent
}

html.redgreen .pause {
    box-sizing: content-box;
    bottom: .0625rem;
    width: .125rem;
    height: .625rem;
    border-right: .125rem solid #90c;
    border-left: .125rem solid #90c
}

html.redgreen .meter.low {
    color: #167df0
}

html.redgreen .meter.neutral {
    color: #00af0f
}

html.redgreen .meter.high {
    color: #fff
}

html.redgreen .buildList .hl-ca,html.redgreen .main .content .action a.button.hl-ca .aTitle {
    color: #00af0f
}

html.redgreen .buildList .hl-cna,html.redgreen .main .content .action a.button.hl-cna .aTitle {
    color: #c20000
}

html.redgreen .graphContainer span.special .gear,html.redgreen .main .content .action div.special .gear,html.redgreen .modal .action div.special .gear,html.redgreen .msgQueue span.special .gear {
    fill: #ad5f12
}

html.redgreen .main .content .action div.special,html.redgreen .main .content .action span.on,html.redgreen .modal .action div.special {
    background: #000;
    border: .0625rem solid #282f2f
}

html.redgreen .main .content .action div.special:hover {
    border: .0625rem solid #3a4344
}

html.redgreen .main .content .action div.special:hover .gear {
    fill: #d4af37
}

html.redgreen .main .content .action span.on {
    color: #0f0
}

html.redgreen .main .content .action span.on.altwarn,html.redgreen .main .content .action span.on.warn {
    color: #af5d00
}

html.redgreen .main .content .action span.off {
    background: #000;
    border: .0625rem solid #282f2f;
    color: #90c
}

html.redgreen .main .content .action span.off:hover,html.redgreen .main .content .action span.on:hover,html.redgreen .modal .action div.special:hover {
    border: .0625rem solid #3a4344
}

html.redgreen .main .content .action.cna a.button.hl-ca .aTitle,html.redgreen .modal .action a.button.hl-ca .aTitle,html.redgreen .modal .action.cna a.button.hl-ca .aTitle {
    color: #00af0f
}

html.redgreen .main .content .action.cna a.button.hl-cna .aTitle,html.redgreen .modal .action a.button.hl-cna .aTitle,html.redgreen .modal .action.cna a.button.hl-cna .aTitle {
    color: #c20000
}

html.redgreen .main .content .action.cna .off,html.redgreen .main .content .action.cna .on,html.redgreen .main .content .action.cna .special,html.redgreen .modal .action.cna .off,html.redgreen .modal .action.cna .on,html.redgreen .modal .action.cna .special {
    border-color: #181818
}

html.redgreen .main .content .action.cna .oldTech span.aTitle,html.redgreen .modal .action.cna .oldTech span.aTitle {
    color: #fff
}

html.redgreen .main .content .action.cnam span.aTitle,html.redgreen .modal .action.cnam span.aTitle {
    color: #975f5f
}

html.redgreen .main .content .enemyFortress {
    background-color: #282f2f
}

html.redgreen .main .content .green,html.redgreen .main .content .synth {
    box-shadow: 0 0 6px #0f0
}

html.redgreen .main .content .green>span,html.redgreen .main .content .synth>span {
    text-shadow: 1px 1px #0f0
}

html.redgreen .main .content .red {
    box-shadow: 0 0 6px #90c
}

html.redgreen .main .content .red>span {
    text-shadow: 1px 1px #90c
}

html.redgreen .main .content .yellow {
    box-shadow: 0 0 6px #fc0
}

html.redgreen .main .content .yellow>span {
    text-shadow: 1px 1px #fc0
}

html.redgreen .main .content .orange {
    box-shadow: 0 0 6px orange
}

html.redgreen .main .content .orange>span {
    text-shadow: 1px 1px orange
}

html.redgreen .main .content .purple {
    box-shadow: 0 0 6px #ffff9e
}

html.redgreen .main .content .purple>span {
    text-shadow: 1px 1px #ffff9e
}

html.redgreen .main .content .blue,html.redgreen .main .content .precog {
    box-shadow: 0 0 6px #167df0
}

html.redgreen .main .content .blue>span,html.redgreen .main .content .precog>span {
    text-shadow: 1px 1px #167df0
}

html.redgreen .main .content .cna .precog>span {
    text-shadow: none
}

html.redgreen .main .garrison .header,html.redgreen .main .government .header {
    border-bottom: .0625rem solid #ccc
}

html.redgreen .main .market-header {
    border-bottom: #ccc solid 1px
}

html.redgreen .main .galaxyTrade {
    border-top: #ccc solid 1px
}

html.redgreen .powerGrid {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem
}

html.redgreen .powerGrid .circuit {
    min-width: 18.5rem;
    cursor: pointer
}

html.redgreen .powerGrid .circuit.inactive {
    display: none
}

html.redgreen .powerGrid .circuit>span {
    display: inline-block
}

html.redgreen .powerGrid .circuit>span:first-child {
    width: 1.5rem
}

html.redgreen .powerGrid .circuit .struct {
    width: 12rem
}

html.redgreen .powerGrid .circuit .off,html.redgreen .powerGrid .circuit .on {
    min-width: 2rem;
    text-align: center
}

html.redgreen #powerStatus .has-text-warning,html.redgreen .powerGrid .circuit .off {
    color: #90c
}

html.redgreen .powerGrid .circuit .on {
    color: #0f0
}

html.redgreen .gridHeader {
    border-top: #ccc solid .0625rem;
    margin: .25rem 0 .25rem 1rem;
    padding-top: .25rem
}

html.redgreen .powerGridHead {
    display: flex;
    justify-content: space-between
}

html.redgreen .powerGridHeader {
    margin-left: 1rem;
    margin-bottom: .5rem
}

html.redgreen .resetPowerGrid {
    margin-left: 1rem;
    margin-top: .75rem
}

html.redgreen .resetPowerGrid .button {
    height: 1.5rem
}

html.redgreen .fort .patrol .check {
    background-color: #000
}

html.redgreen .market-item .order {
    border: #ccc solid .0625rem;
    transition: all 200ms ease
}

html.redgreen .market-item .order:hover {
    border: #eee solid .0625rem;
    background-color: #3a4344
}

html.redgreen .inactive-row,html.redgreen .market-item.alt,html.redgreen .resource.alt {
    background-color: #1b1b1b
}

html.redgreen .resource.showBar.prime {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#1a1a1a calc(var(--percent-full) + 1px),#1a1a1a 100%)
}

html.redgreen .resource.showBar.alt {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#000 calc(var(--percent-full) + 1px),#000 100%)
}

html.redgreen .resource .bar {
    cursor: pointer
}

html.redgreen .modal .actionSpace {
    background-color: #000
}

html.redgreen .modal-card-body,html.redgreen .modal-card-foot,html.redgreen .modal-card-head {
    background-color: #282f2f
}

html.redgreen .industry,html.redgreen .modalBox {
    background: #282f2f
}

html.redgreen .industry .divide,html.redgreen .industry .market-item,html.redgreen .industry .smelting,html.redgreen .modalBox .divide,html.redgreen .modalBox .market-item,html.redgreen .modalBox .smelting {
    border-top: #ccc solid .0625rem
}

html.redgreen .industry {
    background: 0 0
}

html.redgreen .industry .header,html.redgreen .industry p,html.redgreen .modalBox p {
    border-bottom: #ccc solid .0625rem
}

html.redgreen .industry .avail span {
    margin: 0 2.5rem 0 2.125rem
}

html.redgreen .govTask {
    margin-top: .25rem
}

html.redgreen .govTask .button {
    height: 1.5rem;
    margin-left: .5rem
}

html.darkNight,html.redgreen .fileImport {
    background-color: #000
}

html.redgreen .star1 {
    fill: #000;
    stroke: #fff
}

html.redgreen .star2 {
    fill: #fff
}

html.redgreen .star3 {
    fill: #cd7f32
}

html.redgreen .star4 {
    fill: silver
}

html.darkNight .graphContainer span.special:hover .gear,html.darkNight .msgQueue span.special:hover .gear,html.redgreen .modal .action div.special:hover .gear,html.redgreen .star5 {
    fill: #d4af37
}

html.redgreen .bldQueue::-webkit-scrollbar-track,html.redgreen .dropdown-content::-webkit-scrollbar-track,html.redgreen .hscroll::-webkit-scrollbar-track,html.redgreen .resTabs>.tabs::-webkit-scrollbar-track,html.redgreen .resTabs>section::-webkit-scrollbar-track,html.redgreen .sticky::-webkit-scrollbar-track,html.redgreen .vscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #1f2424
}

html.redgreen .bldQueue::-webkit-scrollbar,html.redgreen .dropdown-content::-webkit-scrollbar,html.redgreen .resTabs>.tabs::-webkit-scrollbar,html.redgreen .resTabs>section::-webkit-scrollbar,html.redgreen .sticky::-webkit-scrollbar,html.redgreen .vscroll::-webkit-scrollbar {
    width: 6px;
    background-color: #1f2424
}

html.redgreen .hscroll::-webkit-scrollbar {
    height: 8px;
    background-color: #1f2424
}

html.redgreen .bldQueue::-webkit-scrollbar-thumb,html.redgreen .dropdown-content::-webkit-scrollbar-thumb,html.redgreen .hscroll::-webkit-scrollbar-thumb,html.redgreen .resTabs>.tabs::-webkit-scrollbar-thumb,html.redgreen .resTabs>section::-webkit-scrollbar-thumb,html.redgreen .sticky::-webkit-scrollbar-thumb,html.redgreen .vscroll::-webkit-scrollbar-thumb {
    background-color: #727272
}

html.redgreen .bldQueue,html.redgreen .hscroll,html.redgreen .resTabs>.tabs,html.redgreen .resTabs>section,html.redgreen .sticky,html.redgreen .vscroll {
    scrollbar-color: #727272 #1f2424
}

html.redgreen .buttonList .is-selected {
    border-color: #00af0f
}

html.redgreen .modal .action span.off,html.redgreen .modal .action span.on {
    background: #000;
    border: .0625rem solid #282f2f;
    color: #0f0
}

html.redgreen .modal .action span.on.altwarn,html.redgreen .modal .action span.on.warn {
    color: #af5d00
}

html.redgreen .modal .action span.off {
    color: #90c
}

html.redgreen .modal .action span.off:hover,html.redgreen .modal .action span.on:hover {
    border: .0625rem solid #3a4344
}

html.darkNight .main .content .action.hl .button,html.darkNight .modal .action.hl .button,html.redgreen .modal .action.hl .button {
    border: solid 1px #00af0f
}

html.redgreen .main>div.popper .has-text-danger,html.redgreen body .modal>div.popper .has-text-danger {
    color: #a0a
}

html.redgreen .trade .has-text-danger {
    color: #a0f
}

html.redgreen .trade .has-text-warning {
    color: #fff
}

html.redgreen .topBar .calendar .wi-thermometer-exterior {
    color: #00e6d2
}

html.redgreen .topBar .calendar .wi-thermometer {
    color: #fffb00
}

html.redgreen .mad {
    background: repeating-linear-gradient(45deg,#8a8b49,#8a8b49 10px,#000 10px,#000 20px)
}

html.redgreen .armed .mad {
    background: repeating-linear-gradient(45deg,#fbfd84,#fbfd84 10px,#000 10px,#000 20px)
}

html.redgreen .popper .grad-from-left {
    background-image: linear-gradient(90deg,#90c 45%,#fff 55%)
}

html.redgreen .popper .grad-from-left-warn {
    background-image: linear-gradient(90deg,#af5d00 45%,#90c 55%)
}

html.redgreen .popper .grad-from-right {
    background-image: linear-gradient(90deg,#fff 45%,#90c 55%)
}

html.redgreen .modal .buttonList .is-selected {
    border-color: #00af0f
}

html.darkNight .main>div.popper .has-text-dark,html.darkNight body,html.darkNight body .modal>div.popper .has-text-dark,html.darkNight h2,html.darkNight h3 {
    color: #b8b8b8
}

html.darkNight .button.has-text-advanced,html.darkNight .has-text-advanced {
    color: #00ac95
}

html.darkNight .button.has-text-alert,html.darkNight .has-text-alert {
    color: #af5d00
}

html.darkNight .button.has-text-caution,html.darkNight .has-text-caution {
    color: orange
}

html.darkNight .button.has-text-danger,html.darkNight .has-text-danger {
    color: #f14668
}

html.darkNight .has-text-fade {
    color: #5e5e5e
}

html.darkNight .has-text-flair {
    color: #d39753
}

html.darkNight .button.has-text-info,html.darkNight .has-text-info {
    color: #167df0
}

html.darkNight .has-text-label {
    color: #ffff9e
}

html.darkNight .button.has-text-special,html.darkNight .has-text-special {
    color: #e500b4
}

html.darkNight .button.has-text-success,html.darkNight .has-text-success {
    color: #48c774
}

html.darkNight .button.has-text-warning {
    color: #ffdd57
}

html.darkNight .has-text-danger-pulse {
    color: #ffdd57;
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

html.darkNight .challenge .simButton {
    border-color: #48c774
}

html.darkNight .challenge .configList {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around
}

html.darkNight .challenge .configList>div {
    margin: 0 .25rem;
    width: 10rem
}

html.darkNight .popper .has-text-label {
    color: #ffff9e
}

html.darkNight .popper .has-text-success {
    color: #23d160
}

html.darkNight .modal-card-head p,html.darkNight .popper .has-text-warning {
    color: #ffdd57
}

html.darkNight .popper .divide-line {
    border-top: #ccc solid .0625rem
}

html.darkNight .main>div.popper,html.darkNight body .modal>div.popper {
    background-color: #0f0f0f;
    border: .0625rem solid #999;
    color: #b8b8b8
}

html.darkNight .main>div.popper>div,html.darkNight body .modal>div.popper>div {
    border-top: solid .0625rem #999
}

html.darkNight .main>div.popper>div:first-child,html.darkNight body .modal>div.popper>div:first-child {
    border-top: none
}

html.darkNight .main>div.popper .split,html.darkNight body .modal>div.popper .split {
    display: flex
}

html.darkNight .main>div.popper .split>div,html.darkNight body .modal>div.popper .split>div {
    flex-wrap: nowrap
}

html.darkNight .shipPopper .divider {
    border-bottom: solid .0625rem #999
}

html.darkNight .sliderbar>span {
    position: relative;
    display: inline-block;
    width: 5%;
    bottom: 1.125rem;
    margin: 0 .375rem
}

html.darkNight .sliderbar .b-slider {
    display: inline-block;
    width: 80%
}

html.darkNight .sliderbar .b-slider .b-slider-track {
    height: 1rem
}

html.darkNight .sliderbar .is-primary .b-slider-fill {
    background: #48c774
}

html.darkNight .sliderbar.thin>span {
    bottom: .625rem
}

html.darkNight .sliderbar.thin .b-slider {
    margin-top: .5rem;
    margin-bottom: .5rem
}

html.darkNight .msgQueueFilters span,html.darkNight .tabs a {
    color: #b8b8b8
}

html.darkNight .msgQueueFilters span.is-active,html.darkNight .tabs li.is-active a {
    border-bottom-color: #1abc9c;
    color: #1abc9c
}

html.darkNight .msgQueueFilters span:hover,html.darkNight .tabs a:hover {
    border-bottom-color: #f2f2f2;
    color: #f2f2f2
}

html.darkNight .button {
    background-color: #282f2f;
    color: #ccc
}

html.darkNight .button.is-light {
    background-color: #b8b8b8
}

html.darkNight .button.is-hovered,html.darkNight .button:hover {
    background-color: #3a4344;
    color: #f2f2f2
}

html.darkNight .button.is-focused,html.darkNight .button:focus {
    border-color: #dbdbdb
}

html.darkNight .basic-button {
    border: #ccc solid .0625rem
}

html.darkNight .basic-button:hover {
    border: #eee solid .0625rem;
    background-color: #3a4344
}

html.darkNight .text-button:hover {
    cursor: pointer;
    color: #f2f2f2;
    text-decoration: underline
}

html.darkNight .label {
    color: #dbdee0
}

html.darkNight .checkbox:hover,html.darkNight .radio:hover {
    color: #1abc9c
}

html.darkNight .dropdown-content {
    background-color: #1f2424
}

html.darkNight .b-tooltip.is-right:before {
    border-right: 5px solid #999
}

html.darkNight .b-tooltip.is-left:before {
    border-left: 5px solid #999
}

html.darkNight .b-tooltip.is-bottom:before {
    border-bottom: 5px solid #999
}

html.darkNight .b-tooltip.is-primary .tooltip-content {
    background: #0f0f0f;
    border: .0625rem solid #999;
    color: #b8b8b8
}

html.darkNight .add,html.darkNight .sub {
    border: #ccc solid .0625rem;
    transition: all 200ms ease
}

html.darkNight .add:hover,html.darkNight .sub:hover {
    background-color: #3a4344;
    color: #f2f2f2
}

html.darkNight .current {
    border-top: #ccc solid .0625rem;
    border-bottom: #ccc solid .0625rem
}

html.darkNight .current.infoOnly {
    border: #ccc solid .0625rem
}

html.darkNight .promoBar,html.darkNight .topBar {
    background-color: #3a4344
}

html.darkNight .pause,html.darkNight .play {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

html.darkNight .play {
    bottom: .125rem;
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-left: .375rem solid #48c774;
    border-bottom: .25rem solid transparent
}

html.darkNight .pause {
    box-sizing: content-box;
    bottom: .0625rem;
    width: .125rem;
    height: .625rem;
    border-right: .125rem solid #f14668;
    border-left: .125rem solid #f14668
}

html.darkNight .meter.low {
    color: #c00
}

html.darkNight .meter.neutral {
    color: #c0ce00
}

html.darkNight .buildList .hl-ca,html.darkNight .main .content .action a.button.hl-ca .aTitle,html.darkNight .meter.high,html.darkNight .modal .action a.button.hl-ca .aTitle {
    color: #00af0f
}

html.darkNight .buildList .hl-cna,html.darkNight .main .content .action a.button.hl-cna .aTitle,html.darkNight .modal .action a.button.hl-cna .aTitle {
    color: #c20000
}

html.darkNight .graphContainer span.special .gear,html.darkNight .main .content .action div.special .gear,html.darkNight .modal .action div.special .gear,html.darkNight .msgQueue span.special .gear {
    fill: #ad5f12
}

html.darkNight .main .content .action div.special,html.darkNight .modal .action div.special {
    background: #000;
    border: .0625rem solid #282f2f
}

html.darkNight .main .content .action div.special:hover,html.darkNight .modal .action div.special:hover {
    border: .0625rem solid #3a4344
}

html.darkNight .main .content .action div.special:hover .gear,html.darkNight .modal .action div.special:hover .gear {
    fill: #d4af37
}

html.darkNight .main .content .action span.on,html.darkNight .modal .action span.on {
    background: #000;
    border: .0625rem solid #282f2f;
    color: #00af0f
}

html.darkNight .main .content .action span.on.altwarn,html.darkNight .main .content .action span.on.warn,html.darkNight .modal .action span.on.altwarn,html.darkNight .modal .action span.on.warn {
    color: #af5d00
}

html.darkNight .main .content .action span.off,html.darkNight .modal .action span.off {
    background: #000;
    border: .0625rem solid #282f2f;
    color: #c20000
}

html.darkNight .main .content .action span.off:hover,html.darkNight .main .content .action span.on:hover,html.darkNight .modal .action span.off:hover,html.darkNight .modal .action span.on:hover {
    border: .0625rem solid #3a4344
}

html.darkNight .main .content .action.cna a.button.hl-ca .aTitle,html.darkNight .modal .action.cna a.button.hl-ca .aTitle {
    color: #00af0f
}

html.darkNight .main .content .action.cna a.button.hl-cna .aTitle,html.darkNight .modal .action.cna a.button.hl-cna .aTitle {
    color: #c20000
}

html.darkNight .main .content .action.cna .off,html.darkNight .main .content .action.cna .on,html.darkNight .main .content .action.cna .special,html.darkNight .modal .action.cna .off,html.darkNight .modal .action.cna .on,html.darkNight .modal .action.cna .special {
    border-color: #181818
}

html.darkNight .main .content .action.cna .oldTech span.aTitle,html.darkNight .modal .action.cna .oldTech span.aTitle {
    color: #fff
}

html.darkNight .main .content .action.cnam span.aTitle,html.darkNight .modal .action.cnam span.aTitle {
    color: #975f5f
}

html.darkNight .main .content .enemyFortress {
    background-color: #282f2f
}

html.darkNight .main .content .green,html.darkNight .main .content .synth {
    box-shadow: 0 0 6px #48c774
}

html.darkNight .main .content .green>span,html.darkNight .main .content .synth>span {
    text-shadow: 1px 1px #48c774
}

html.darkNight .main .content .red {
    box-shadow: 0 0 6px #f14668
}

html.darkNight .main .content .red>span {
    text-shadow: 1px 1px #f14668
}

html.darkNight .main .content .yellow {
    box-shadow: 0 0 6px #ffdd57
}

html.darkNight .main .content .yellow>span {
    text-shadow: 1px 1px #ffdd57
}

html.darkNight .main .content .orange {
    box-shadow: 0 0 6px orange
}

html.darkNight .main .content .orange>span {
    text-shadow: 1px 1px orange
}

html.darkNight .main .content .purple {
    box-shadow: 0 0 6px #e500b4
}

html.darkNight .main .content .purple>span {
    text-shadow: 1px 1px #e500b4
}

html.darkNight .main .content .blue,html.darkNight .main .content .precog {
    box-shadow: 0 0 6px #167df0
}

html.darkNight .main .content .blue>span,html.darkNight .main .content .precog>span {
    text-shadow: 1px 1px #167df0
}

html.darkNight .main .content .cna .precog>span {
    text-shadow: none
}

html.darkNight .main .garrison .header,html.darkNight .main .government .header {
    border-bottom: .0625rem solid #ccc
}

html.darkNight .main .market-header {
    border-bottom: #ccc solid 1px
}

html.darkNight .main .galaxyTrade {
    border-top: #ccc solid 1px
}

html.darkNight .powerGrid {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem
}

html.darkNight .powerGrid .circuit {
    min-width: 18.5rem;
    cursor: pointer
}

html.darkNight .powerGrid .circuit.inactive {
    display: none
}

html.darkNight .powerGrid .circuit>span {
    display: inline-block
}

html.darkNight .powerGrid .circuit>span:first-child {
    width: 1.5rem
}

html.darkNight .powerGrid .circuit .struct {
    width: 12rem
}

html.darkNight .powerGrid .circuit .off,html.darkNight .powerGrid .circuit .on {
    min-width: 2rem;
    text-align: center
}

html.darkNight .powerGrid .circuit .off {
    color: #f14668
}

html.darkNight .powerGrid .circuit .on {
    color: #48c774
}

html.darkNight .gridHeader {
    border-top: #ccc solid .0625rem;
    margin: .25rem 0 .25rem 1rem;
    padding-top: .25rem
}

html.darkNight .powerGridHead {
    display: flex;
    justify-content: space-between
}

html.darkNight .powerGridHeader {
    margin-left: 1rem;
    margin-bottom: .5rem
}

html.darkNight .resetPowerGrid {
    margin-left: 1rem;
    margin-top: .75rem
}

html.darkNight .resetPowerGrid .button {
    height: 1.5rem
}

html.darkNight .fort .patrol .check {
    background-color: #000
}

html.darkNight .market-item .order {
    border: #ccc solid .0625rem;
    transition: all 200ms ease
}

html.darkNight .market-item .order:hover {
    border: #eee solid .0625rem;
    background-color: #3a4344
}

html.darkNight .inactive-row,html.darkNight .market-item.alt,html.darkNight .resource.alt {
    background-color: #1b1b1b
}

html.darkNight .resource.showBar.prime {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#1a1a1a calc(var(--percent-full) + 1px),#1a1a1a 100%)
}

html.darkNight .resource.showBar.alt {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#000 calc(var(--percent-full) + 1px),#000 100%)
}

html.darkNight .resource .bar {
    cursor: pointer
}

html.darkNight .modal .actionSpace {
    background-color: #000
}

html.darkNight .modal-card-body,html.darkNight .modal-card-foot,html.darkNight .modal-card-head {
    background-color: #282f2f
}

html.darkNight .industry,html.darkNight .modalBox {
    background: #282f2f
}

html.darkNight .industry .divide,html.darkNight .industry .market-item,html.darkNight .industry .smelting,html.darkNight .modalBox .divide,html.darkNight .modalBox .market-item,html.darkNight .modalBox .smelting {
    border-top: #ccc solid .0625rem
}

html.darkNight .industry {
    background: 0 0
}

html.darkNight .industry .header,html.darkNight .industry p,html.darkNight .modalBox p {
    border-bottom: #ccc solid .0625rem
}

html.darkNight .industry .avail span {
    margin: 0 2.5rem 0 2.125rem
}

html.darkNight .govTask {
    margin-top: .25rem
}

html.darkNight .govTask .button {
    height: 1.5rem;
    margin-left: .5rem
}

html.darkNight .fileImport {
    background-color: #000
}

html.darkNight .star1 {
    fill: #000;
    stroke: #fff
}

html.darkNight .star2 {
    fill: #fff
}

html.darkNight .star3 {
    fill: #cd7f32
}

html.darkNight .star4 {
    fill: silver
}

html.darkNight .star5 {
    fill: #d4af37
}

html.darkNight .bldQueue::-webkit-scrollbar-track,html.darkNight .dropdown-content::-webkit-scrollbar-track,html.darkNight .hscroll::-webkit-scrollbar-track,html.darkNight .resTabs>.tabs::-webkit-scrollbar-track,html.darkNight .resTabs>section::-webkit-scrollbar-track,html.darkNight .sticky::-webkit-scrollbar-track,html.darkNight .vscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #1f2424
}

html.darkNight .bldQueue::-webkit-scrollbar,html.darkNight .dropdown-content::-webkit-scrollbar,html.darkNight .resTabs>.tabs::-webkit-scrollbar,html.darkNight .resTabs>section::-webkit-scrollbar,html.darkNight .sticky::-webkit-scrollbar,html.darkNight .vscroll::-webkit-scrollbar {
    width: 6px;
    background-color: #1f2424
}

html.darkNight .hscroll::-webkit-scrollbar {
    height: 8px;
    background-color: #1f2424
}

html.darkNight .bldQueue::-webkit-scrollbar-thumb,html.darkNight .dropdown-content::-webkit-scrollbar-thumb,html.darkNight .hscroll::-webkit-scrollbar-thumb,html.darkNight .resTabs>.tabs::-webkit-scrollbar-thumb,html.darkNight .resTabs>section::-webkit-scrollbar-thumb,html.darkNight .sticky::-webkit-scrollbar-thumb,html.darkNight .vscroll::-webkit-scrollbar-thumb {
    background-color: #727272
}

html.darkNight .bldQueue,html.darkNight .hscroll,html.darkNight .resTabs>.tabs,html.darkNight .resTabs>section,html.darkNight .sticky,html.darkNight .vscroll {
    scrollbar-color: #727272 #1f2424
}

html.darkNight .buttonList .is-selected,html.darkNight .modal .buttonList .is-selected {
    border-color: #00af0f
}

html.darkNight .has-text-warning {
    color: #d6b220
}

html.darkNight input,html.darkNight select,html.darkNight textarea {
    background: #b8b8b8
}

html.darkNight .popper .grad-from-left {
    background-image: linear-gradient(90deg,#f14668 45%,#b8b8b8 55%)
}

html.darkNight .popper .grad-from-left-warn {
    background-image: linear-gradient(90deg,#af5d00 45%,#f14668 55%)
}

html.darkNight .popper .grad-from-right {
    background-image: linear-gradient(90deg,#b8b8b8 45%,#f14668 55%)
}

html.gruvboxLight {
    background-color: #fbf1c7
}

html.gruvboxLight .main>div.popper .has-text-dark,html.gruvboxLight body,html.gruvboxLight body .modal>div.popper .has-text-dark,html.gruvboxLight h2,html.gruvboxLight h3 {
    color: #3c3836
}

html.gruvboxLight a {
    color: #427b58
}

html.gruvboxLight .button.has-text-advanced,html.gruvboxLight .has-text-advanced {
    color: #458588
}

html.gruvboxLight .button.has-text-alert,html.gruvboxLight .has-text-alert {
    color: #af5d00
}

html.gruvboxLight .button.has-text-caution,html.gruvboxLight .has-text-caution {
    color: #af3a03
}

html.gruvboxLight .button.has-text-danger,html.gruvboxLight .has-text-danger {
    color: #9d0006
}

html.gruvboxLight .has-text-fade {
    color: #898b87
}

html.gruvboxLight .has-text-flair {
    color: #8f3f71
}

html.gruvboxLight .button.has-text-info,html.gruvboxLight .has-text-info,html.gruvboxLight .has-text-label {
    color: #076678
}

html.gruvboxLight .button.has-text-special,html.gruvboxLight .has-text-special {
    color: #8f3f71
}

html.gruvboxLight .button.has-text-success,html.gruvboxLight .has-text-success {
    color: #79740e
}

html.gruvboxLight .button.has-text-warning,html.gruvboxLight .has-text-warning {
    color: #b57614
}

html.gruvboxLight .has-text-danger-pulse {
    color: #b57614;
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

html.gruvboxLight .challenge .simButton {
    border-color: #79740e
}

html.gruvboxLight .challenge .configList {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around
}

html.gruvboxLight .challenge .configList>div {
    margin: 0 .25rem;
    width: 10rem
}

html.gruvboxLight .popper .has-text-label {
    color: #076678
}

html.gruvboxLight .popper .has-text-success {
    color: #79740e
}

html.gruvboxLight .modal-card-head p,html.gruvboxLight .popper .has-text-warning {
    color: #b57614
}

html.gruvboxLight .popper .divide-line {
    border-top: #3c3836 solid .0625rem
}

html.gruvboxLight .main>div.popper,html.gruvboxLight body .modal>div.popper {
    background-color: #fbf1c7;
    border: .0625rem solid #3c3836;
    color: #3c3836
}

html.gruvboxLight .main>div.popper>div,html.gruvboxLight body .modal>div.popper>div {
    border-top: solid .0625rem #3c3836
}

html.gruvboxLight .main>div.popper>div:first-child,html.gruvboxLight body .modal>div.popper>div:first-child {
    border-top: none
}

html.gruvboxLight .main>div.popper .split,html.gruvboxLight body .modal>div.popper .split {
    display: flex
}

html.gruvboxLight .main>div.popper .split>div,html.gruvboxLight body .modal>div.popper .split>div {
    flex-wrap: nowrap
}

html.gruvboxLight .main>div.popper .split>div:nth-of-type(2),html.gruvboxLight body .modal>div.popper .split>div:nth-of-type(2) {
    border-left: solid .0625rem #3c3836;
    margin-left: .375rem;
    padding-left: .375rem
}

html.gruvboxLight .shipPopper .divider {
    border-bottom: solid .0625rem #3c3836
}

html.gruvboxLight .sliderbar>span {
    position: relative;
    display: inline-block;
    width: 5%;
    bottom: 1.125rem;
    margin: 0 .375rem
}

html.gruvboxLight .sliderbar .b-slider {
    display: inline-block;
    width: 80%
}

html.gruvboxLight .sliderbar .b-slider .b-slider-track {
    height: 1rem
}

html.gruvboxLight .sliderbar .is-primary .b-slider-fill {
    background: #79740e
}

html.gruvboxLight .sliderbar.thin>span {
    bottom: .625rem
}

html.gruvboxLight .sliderbar.thin .b-slider {
    margin-top: .5rem;
    margin-bottom: .5rem
}

html.gruvboxLight .msgQueueFilters span,html.gruvboxLight .tabs a {
    color: #3c3836
}

html.gruvboxLight .msgQueueFilters span.is-active,html.gruvboxLight .tabs li.is-active a {
    border-bottom-color: #427b58;
    color: #427b58
}

html.gruvboxLight .msgQueueFilters span:hover,html.gruvboxLight .tabs a:hover {
    border-bottom-color: #689d6a;
    color: #689d6a
}

html.gruvboxLight .button {
    background-color: #d5c4a1;
    color: #3c3836
}

html.gruvboxLight .button.is-light {
    background-color: #3c3836
}

html.gruvboxLight .button.is-hovered,html.gruvboxLight .button:hover {
    background-color: #d5c4a1;
    color: #689d6a
}

html.gruvboxLight .button.is-focused,html.gruvboxLight .button:focus {
    border-color: #3c3836
}

html.gruvboxLight .basic-button {
    border: #3c3836 solid .0625rem
}

html.gruvboxLight .basic-button:hover {
    border: #427b58 solid .0625rem;
    background-color: #f2e5bc
}

html.gruvboxLight .text-button:hover {
    cursor: pointer;
    color: #689d6a;
    text-decoration: underline
}

html.gruvboxLight .label {
    color: #3c3836
}

html.gruvboxLight .checkbox:hover,html.gruvboxLight .radio:hover {
    color: #427b58
}

html.gruvboxLight .dropdown-content {
    background-color: #d5c4a1
}

html.gruvboxLight .b-tooltip.is-right:before {
    border-right: 5px solid #fbf1c7
}

html.gruvboxLight .b-tooltip.is-left:before {
    border-left: 5px solid #fbf1c7
}

html.gruvboxLight .b-tooltip.is-bottom:before {
    border-bottom: 5px solid #fbf1c7
}

html.gruvboxLight .b-tooltip.is-primary .tooltip-content {
    background: #fbf1c7;
    border: .0625rem solid #3c3836;
    color: #000
}

html.gruvboxLight .add,html.gruvboxLight .sub {
    border: #3c3836 solid .0625rem;
    transition: all 200ms ease
}

html.gruvboxLight .add:hover,html.gruvboxLight .sub:hover {
    background-color: #d5c4a1;
    color: #689d6a
}

html.gruvboxLight .current {
    border-top: #3c3836 solid .0625rem;
    border-bottom: #3c3836 solid .0625rem
}

html.gruvboxLight .current.infoOnly {
    border: #3c3836 solid .0625rem
}

html.gruvboxLight .main .content .enemyFortress,html.gruvboxLight .promoBar,html.gruvboxLight .topBar {
    background-color: #d5c4a1
}

html.gruvboxLight .pause,html.gruvboxLight .play {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

html.gruvboxLight .play {
    bottom: .125rem;
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-left: .375rem solid #79740e;
    border-bottom: .25rem solid transparent
}

html.gruvboxLight .pause {
    box-sizing: content-box;
    bottom: .0625rem;
    width: .125rem;
    height: .625rem;
    border-right: .125rem solid #9d0006;
    border-left: .125rem solid #9d0006
}

html.gruvboxLight .meter.low {
    color: #9d0006
}

html.gruvboxLight .meter.neutral {
    color: #af3a03
}

html.gruvboxLight .meter.high {
    color: #076678
}

html.gruvboxLight .buildList .hl-ca,html.gruvboxLight .main .content .action a.button.hl-ca .aTitle,html.gruvboxLight .modal .action a.button.hl-ca .aTitle {
    color: #79740e
}

html.gruvboxLight .buildList .hl-cna,html.gruvboxLight .main .content .action a.button.hl-cna .aTitle,html.gruvboxLight .modal .action a.button.hl-cna .aTitle {
    color: #9d0006
}

html.gruvboxLight .graphContainer span.special:hover .gear,html.gruvboxLight .msgQueue span.special:hover .gear {
    fill: #f09d51
}

html.gruvboxLight .main .content .action a.button span.count,html.gruvboxLight .main .content .divider h2,html.gruvboxLight .modal .action a.button span.count {
    background: #fbf1c7
}

html.gruvboxLight .main .content .action div.special,html.gruvboxLight .modal .action div.special {
    background: #fbf1c7;
    border: .0625rem solid #3c3836
}

html.gruvboxLight .graphContainer span.special .gear,html.gruvboxLight .main .content .action div.special .gear,html.gruvboxLight .modal .action div.special .gear,html.gruvboxLight .msgQueue span.special .gear {
    fill: #427b58
}

html.gruvboxLight .main .content .action div.special:hover,html.gruvboxLight .modal .action div.special:hover {
    border: .0625rem solid #d5c4a1
}

html.gruvboxLight .main .content .action div.special:hover .gear,html.gruvboxLight .modal .action div.special:hover .gear {
    fill: #f09d51
}

html.gruvboxLight .main .content .action span.on,html.gruvboxLight .modal .action span.on {
    background: #fbf1c7;
    border: .0625rem solid #3c3836;
    color: #79740e
}

html.gruvboxLight .main .content .action span.on.altwarn,html.gruvboxLight .main .content .action span.on.warn,html.gruvboxLight .modal .action span.on.altwarn,html.gruvboxLight .modal .action span.on.warn {
    color: #af5d00
}

html.gruvboxLight .main .content .action span.off,html.gruvboxLight .modal .action span.off {
    background: #fbf1c7;
    border: .0625rem solid #3c3836;
    color: #9d0006
}

html.gruvboxLight .main .content .action span.off:hover,html.gruvboxLight .main .content .action span.on:hover,html.gruvboxLight .modal .action span.off:hover,html.gruvboxLight .modal .action span.on:hover {
    border: .0625rem solid #d5c4a1
}

html.gruvboxLight .main .content .action.hl .button,html.gruvboxLight .modal .action.hl .button {
    border: solid 1px #79740e
}

html.gruvboxLight .main .content .action.cna a.button,html.gruvboxLight .modal .action.cna a.button {
    background: #a89984
}

html.gruvboxLight .main .content .action.cna a.button.hl-ca .aTitle,html.gruvboxLight .modal .action.cna a.button.hl-ca .aTitle {
    color: #79740e
}

html.gruvboxLight .main .content .action.cna .off,html.gruvboxLight .main .content .action.cna .on,html.gruvboxLight .main .content .action.cna .special,html.gruvboxLight .modal .action.cna .off,html.gruvboxLight .modal .action.cna .on,html.gruvboxLight .modal .action.cna .special {
    border-color: #3c3836
}

html.gruvboxLight .main .content .action.cna .oldTech span.aTitle,html.gruvboxLight .modal .action.cna .oldTech span.aTitle {
    color: #3c3836
}

html.gruvboxLight .main .content .action.cna a.button.hl-cna .aTitle,html.gruvboxLight .main .content .action.cnam span.aTitle,html.gruvboxLight .modal .action.cna a.button.hl-cna .aTitle,html.gruvboxLight .modal .action.cnam span.aTitle {
    color: #9d0006
}

html.gruvboxLight .main .content .green,html.gruvboxLight .main .content .synth {
    box-shadow: 0 0 6px #79740e
}

html.gruvboxLight .main .content .green>span,html.gruvboxLight .main .content .synth>span {
    text-shadow: 1px 1px #79740e
}

html.gruvboxLight .main .content .red {
    box-shadow: 0 0 6px #9d0006
}

html.gruvboxLight .main .content .red>span {
    text-shadow: 1px 1px #9d0006
}

html.gruvboxLight .main .content .yellow {
    box-shadow: 0 0 6px #b57614
}

html.gruvboxLight .main .content .yellow>span {
    text-shadow: 1px 1px #b57614
}

html.gruvboxLight .main .content .orange {
    box-shadow: 0 0 6px #af3a03
}

html.gruvboxLight .main .content .orange>span {
    text-shadow: 1px 1px #af3a03
}

html.gruvboxLight .main .content .purple {
    box-shadow: 0 0 6px #8f3f71
}

html.gruvboxLight .main .content .purple>span {
    text-shadow: 1px 1px #8f3f71
}

html.gruvboxLight .main .content .blue,html.gruvboxLight .main .content .precog {
    box-shadow: 0 0 6px #076678
}

html.gruvboxLight .main .content .blue>span,html.gruvboxLight .main .content .precog>span {
    text-shadow: 1px 1px #076678
}

html.gruvboxLight .main .content .cna .precog>span {
    text-shadow: none
}

html.gruvboxLight .main .garrison .header,html.gruvboxLight .main .government .header {
    border-bottom: .0625rem solid #3c3836
}

html.gruvboxLight .main .market-header {
    border-bottom: #3c3836 solid 1px
}

html.gruvboxLight .main .galaxyTrade {
    border-top: #3c3836 solid 1px
}

html.gruvboxLight .powerGrid {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem
}

html.gruvboxLight .powerGrid .circuit {
    min-width: 18.5rem;
    cursor: pointer
}

html.gruvboxLight .powerGrid .circuit.inactive {
    display: none
}

html.gruvboxLight .powerGrid .circuit>span {
    display: inline-block
}

html.gruvboxLight .powerGrid .circuit>span:first-child {
    width: 1.5rem
}

html.gruvboxLight .powerGrid .circuit .struct {
    width: 12rem
}

html.gruvboxLight .powerGrid .circuit .off,html.gruvboxLight .powerGrid .circuit .on {
    min-width: 2rem;
    text-align: center
}

html.gruvboxLight .powerGrid .circuit .off {
    color: #9d0006
}

html.gruvboxLight .powerGrid .circuit .on {
    color: #79740e
}

html.gruvboxLight .gridHeader {
    border-top: #3c3836 solid .0625rem;
    margin: .25rem 0 .25rem 1rem;
    padding-top: .25rem
}

html.gruvboxLight .powerGridHead {
    display: flex;
    justify-content: space-between
}

html.gruvboxLight .powerGridHeader {
    margin-left: 1rem;
    margin-bottom: .5rem
}

html.gruvboxLight .resetPowerGrid {
    margin-left: 1rem;
    margin-top: .75rem
}

html.gruvboxLight .resetPowerGrid .button {
    height: 1.5rem
}

html.gruvboxLight .fort .patrol .check {
    background-color: #000
}

html.gruvboxLight .market-item .order {
    border: #3c3836 solid .0625rem;
    transition: all 200ms ease
}

html.gruvboxLight .market-item .order:hover {
    border: #689d6a solid .0625rem;
    background-color: #d5c4a1
}

html.gruvboxLight .inactive-row,html.gruvboxLight .market-item.alt,html.gruvboxLight .resource.alt {
    background-color: #f9f5d7
}

html.gruvboxLight .resource.showBar.prime {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#f6df80 calc(var(--percent-full) + 1px),#f6df80 100%)
}

html.gruvboxLight .resource.showBar.alt {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#efe494 calc(var(--percent-full) + 1px),#efe494 100%)
}

html.gruvboxLight .resource .bar {
    cursor: pointer
}

html.gruvboxLight .modal .actionSpace,html.gruvboxLight .modal-card-body,html.gruvboxLight .modal-card-foot,html.gruvboxLight .modal-card-head {
    background-color: #fbf1c7
}

html.gruvboxLight .industry,html.gruvboxLight .modalBox {
    background: #fbf1c7
}

html.gruvboxLight .industry .divide,html.gruvboxLight .industry .market-item,html.gruvboxLight .industry .smelting,html.gruvboxLight .modalBox .divide,html.gruvboxLight .modalBox .market-item,html.gruvboxLight .modalBox .smelting {
    border-top: #3c3836 solid .0625rem
}

html.gruvboxLight .industry {
    background: 0 0
}

html.gruvboxLight .industry .header,html.gruvboxLight .industry p,html.gruvboxLight .modalBox p {
    border-bottom: #3c3836 solid .0625rem
}

html.gruvboxLight .industry .avail span {
    margin: 0 2.5rem 0 2.125rem
}

html.gruvboxLight .govTask {
    margin-top: .25rem
}

html.gruvboxLight .govTask .button {
    height: 1.5rem;
    margin-left: .5rem
}

html.gruvboxLight .fileImport {
    background-color: #fbf1c7
}

html.gruvboxLight .star1 {
    fill: #fbf1c7;
    stroke: #fff
}

html.gruvboxLight .star2 {
    fill: #fff
}

html.gruvboxLight .star3 {
    fill: #cd7f32
}

html.gruvboxLight .star4 {
    fill: silver
}

html.gruvboxLight .star5 {
    fill: #d4af37
}

html.gruvboxDark .refresh svg,html.gruvboxDarkRG .refresh svg,html.gruvboxLight .refresh svg {
    fill: #458588
}

html.gruvboxLight .bldQueue::-webkit-scrollbar-track,html.gruvboxLight .dropdown-content::-webkit-scrollbar-track,html.gruvboxLight .hscroll::-webkit-scrollbar-track,html.gruvboxLight .resTabs>.tabs::-webkit-scrollbar-track,html.gruvboxLight .resTabs>section::-webkit-scrollbar-track,html.gruvboxLight .sticky::-webkit-scrollbar-track,html.gruvboxLight .vscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #fbf1c7
}

html.gruvboxLight .bldQueue::-webkit-scrollbar,html.gruvboxLight .dropdown-content::-webkit-scrollbar,html.gruvboxLight .resTabs>.tabs::-webkit-scrollbar,html.gruvboxLight .resTabs>section::-webkit-scrollbar,html.gruvboxLight .sticky::-webkit-scrollbar,html.gruvboxLight .vscroll::-webkit-scrollbar {
    width: 6px;
    background-color: #fbf1c7
}

html.gruvboxLight .hscroll::-webkit-scrollbar {
    height: 8px;
    background-color: #fbf1c7
}

html.gruvboxLight .bldQueue::-webkit-scrollbar-thumb,html.gruvboxLight .dropdown-content::-webkit-scrollbar-thumb,html.gruvboxLight .hscroll::-webkit-scrollbar-thumb,html.gruvboxLight .resTabs>.tabs::-webkit-scrollbar-thumb,html.gruvboxLight .resTabs>section::-webkit-scrollbar-thumb,html.gruvboxLight .sticky::-webkit-scrollbar-thumb,html.gruvboxLight .vscroll::-webkit-scrollbar-thumb {
    background-color: #3c3836
}

html.gruvboxLight .bldQueue,html.gruvboxLight .hscroll,html.gruvboxLight .resTabs>.tabs,html.gruvboxLight .resTabs>section,html.gruvboxLight .sticky,html.gruvboxLight .vscroll {
    scrollbar-color: #3c3836 #fbf1c7
}

html.gruvboxLight .buttonList .is-selected,html.gruvboxLight .modal .buttonList .is-selected {
    border-color: #79740e
}

html.gruvboxLight .notification,html.gruvboxLight input,html.gruvboxLight select,html.gruvboxLight textarea {
    background: #d5c4a1
}

html.gruvboxLight .popper .grad-from-left {
    background-image: linear-gradient(90deg,#9d0006 45%,#3c3836 55%)
}

html.gruvboxLight .popper .grad-from-left-warn {
    background-image: linear-gradient(90deg,#af5d00 45%,#9d0006 55%)
}

html.gruvboxLight .popper .grad-from-right {
    background-image: linear-gradient(90deg,#3c3836 45%,#9d0006 55%)
}

html.gruvboxDark {
    background-color: #282828
}

html.gruvboxDark .main>div.popper .has-text-dark,html.gruvboxDark body,html.gruvboxDark body .modal>div.popper .has-text-dark,html.gruvboxDark h2,html.gruvboxDark h3 {
    color: #ebdbb2
}

html.gruvboxDark a {
    color: #8ec07c
}

html.gruvboxDark .button.has-text-advanced,html.gruvboxDark .has-text-advanced {
    color: #458588
}

html.gruvboxDark .button.has-text-alert,html.gruvboxDark .has-text-alert {
    color: #af5d00
}

html.gruvboxDark .button.has-text-caution,html.gruvboxDark .has-text-caution {
    color: #fe8019
}

html.gruvboxDark .button.has-text-danger,html.gruvboxDark .has-text-danger {
    color: #fb4934
}

html.gruvboxDark .has-text-fade {
    color: #898b87
}

html.gruvboxDark .has-text-flair {
    color: #d3869b
}

html.gruvboxDark .button.has-text-info,html.gruvboxDark .has-text-info {
    color: #83a598
}

html.gruvboxDark .has-text-label {
    color: #458588
}

html.gruvboxDark .button.has-text-special,html.gruvboxDark .has-text-special {
    color: #d3869b
}

html.gruvboxDark .button.has-text-success,html.gruvboxDark .has-text-success {
    color: #b8bb26
}

html.gruvboxDark .button.has-text-warning,html.gruvboxDark .has-text-warning {
    color: #fabd2f
}

html.gruvboxDark .has-text-danger-pulse {
    color: #fabd2f;
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

html.gruvboxDark .challenge .simButton {
    border-color: #b8bb26
}

html.gruvboxDark .challenge .configList {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around
}

html.gruvboxDark .challenge .configList>div {
    margin: 0 .25rem;
    width: 10rem
}

html.gruvboxDark .popper .has-text-label {
    color: #458588
}

html.gruvboxDark .popper .has-text-success {
    color: #b8bb26
}

html.gruvboxDark .modal-card-head p,html.gruvboxDark .popper .has-text-warning {
    color: #fabd2f
}

html.gruvboxDark .popper .divide-line {
    border-top: #665c54 solid .0625rem
}

html.gruvboxDark .main>div.popper,html.gruvboxDark body .modal>div.popper {
    background-color: #282828;
    border: .0625rem solid #665c54;
    color: #ebdbb2
}

html.gruvboxDark .main>div.popper>div,html.gruvboxDark body .modal>div.popper>div {
    border-top: solid .0625rem #665c54
}

html.gruvboxDark .main>div.popper>div:first-child,html.gruvboxDark body .modal>div.popper>div:first-child {
    border-top: none
}

html.gruvboxDark .main>div.popper .split,html.gruvboxDark body .modal>div.popper .split {
    display: flex
}

html.gruvboxDark .main>div.popper .split>div,html.gruvboxDark body .modal>div.popper .split>div {
    flex-wrap: nowrap
}

html.gruvboxDark .main>div.popper .split>div:nth-of-type(2),html.gruvboxDark body .modal>div.popper .split>div:nth-of-type(2),html.gruvboxDarkRG .main>div.popper .split>div:nth-of-type(2),html.gruvboxDarkRG body .modal>div.popper .split>div:nth-of-type(2) {
    border-left: solid .0625rem #665c54;
    margin-left: .375rem;
    padding-left: .375rem
}

html.gruvboxDark .shipPopper .divider {
    border-bottom: solid .0625rem #665c54
}

html.gruvboxDark .sliderbar>span {
    position: relative;
    display: inline-block;
    width: 5%;
    bottom: 1.125rem;
    margin: 0 .375rem
}

html.gruvboxDark .sliderbar .b-slider {
    display: inline-block;
    width: 80%
}

html.gruvboxDark .sliderbar .b-slider .b-slider-track {
    height: 1rem
}

html.gruvboxDark .sliderbar .is-primary .b-slider-fill {
    background: #b8bb26
}

html.gruvboxDark .sliderbar.thin>span {
    bottom: .625rem
}

html.gruvboxDark .sliderbar.thin .b-slider {
    margin-top: .5rem;
    margin-bottom: .5rem
}

html.gruvboxDark .msgQueueFilters span,html.gruvboxDark .tabs a {
    color: #ebdbb2
}

html.gruvboxDark .msgQueueFilters span.is-active,html.gruvboxDark .tabs li.is-active a {
    border-bottom-color: #8ec07c;
    color: #8ec07c
}

html.gruvboxDark .msgQueueFilters span:hover,html.gruvboxDark .tabs a:hover {
    border-bottom-color: #689d6a;
    color: #689d6a
}

html.gruvboxDark .button {
    background-color: #3c3836;
    color: #ebdbb2
}

html.gruvboxDark .button.is-light {
    background-color: #ebdbb2
}

html.gruvboxDark .button.is-hovered,html.gruvboxDark .button:hover {
    background-color: #504945;
    color: #689d6a
}

html.gruvboxDark .button.is-focused,html.gruvboxDark .button:focus {
    border-color: #665c54
}

html.gruvboxDark .basic-button {
    border: #3c3836 solid .0625rem
}

html.gruvboxDark .basic-button:hover {
    border: #8ec07c solid .0625rem;
    background-color: #1d2021
}

html.gruvboxDark .text-button:hover {
    cursor: pointer;
    color: #689d6a;
    text-decoration: underline
}

html.gruvboxDark .label {
    color: #ebdbb2
}

html.gruvboxDark .checkbox:hover,html.gruvboxDark .radio:hover,html.gruvboxDarkRG a {
    color: #8ec07c
}

html.gruvboxDark .dropdown-content {
    background-color: #3c3836
}

html.gruvboxDark .b-tooltip.is-right:before {
    border-right: 5px solid #282828
}

html.gruvboxDark .b-tooltip.is-left:before {
    border-left: 5px solid #282828
}

html.gruvboxDark .b-tooltip.is-bottom:before {
    border-bottom: 5px solid #282828
}

html.gruvboxDark .b-tooltip.is-primary .tooltip-content {
    background: #282828;
    border: .0625rem solid #3c3836;
    color: #ebdbb2
}

html.gruvboxDark .add,html.gruvboxDark .sub {
    transition: all 200ms ease
}

html.gruvboxDark .add:hover,html.gruvboxDark .sub:hover {
    background-color: #504945;
    color: #689d6a
}

html.gruvboxDark .promoBar,html.gruvboxDark .topBar {
    background-color: #504945
}

html.gruvboxDark .pause,html.gruvboxDark .play {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

html.gruvboxDark .play {
    bottom: .125rem;
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-left: .375rem solid #b8bb26;
    border-bottom: .25rem solid transparent
}

html.gruvboxDark .pause {
    box-sizing: content-box;
    bottom: .0625rem;
    width: .125rem;
    height: .625rem;
    border-right: .125rem solid #fb4934;
    border-left: .125rem solid #fb4934
}

html.gruvboxDark .meter.low {
    color: #fb4934
}

html.gruvboxDark .meter.neutral {
    color: #fe8019
}

html.gruvboxDark .meter.high {
    color: #83a598
}

html.gruvboxDark .buildList .hl-ca,html.gruvboxDark .main .content .action a.button.hl-ca .aTitle,html.gruvboxDark .modal .action a.button.hl-ca .aTitle {
    color: #b8bb26
}

html.gruvboxDark .buildList .hl-cna,html.gruvboxDark .main .content .action a.button.hl-cna .aTitle,html.gruvboxDark .modal .action a.button.hl-cna .aTitle {
    color: #fb4934
}

html.gruvboxDark .graphContainer span.special:hover .gear,html.gruvboxDark .msgQueue span.special:hover .gear {
    fill: #8ec07c
}

html.gruvboxDark .main .content .action a.button span.count,html.gruvboxDark .main .content .divider h2,html.gruvboxDark .modal .action a.button span.count {
    background: #282828
}

html.gruvboxDark .main .content .action div.special,html.gruvboxDark .modal .action div.special {
    background: #282828;
    border: .0625rem solid #3c3836
}

html.gruvboxDark .graphContainer span.special .gear,html.gruvboxDark .main .content .action div.special .gear,html.gruvboxDark .modal .action div.special .gear,html.gruvboxDark .msgQueue span.special .gear {
    fill: #f09d51
}

html.gruvboxDark .main .content .action div.special:hover,html.gruvboxDark .modal .action div.special:hover {
    border: .0625rem solid #504945
}

html.gruvboxDark .main .content .action div.special:hover .gear,html.gruvboxDark .modal .action div.special:hover .gear {
    fill: #8ec07c
}

html.gruvboxDark .main .content .action span.on,html.gruvboxDark .modal .action span.on {
    background: #282828;
    border: .0625rem solid #3c3836;
    color: #b8bb26
}

html.gruvboxDark .main .content .action span.on.altwarn,html.gruvboxDark .main .content .action span.on.warn,html.gruvboxDark .modal .action span.on.altwarn,html.gruvboxDark .modal .action span.on.warn {
    color: #af5d00
}

html.gruvboxDark .main .content .action span.off,html.gruvboxDark .modal .action span.off {
    background: #282828;
    border: .0625rem solid #3c3836;
    color: #fb4934
}

html.gruvboxDark .main .content .action span.off:hover,html.gruvboxDark .main .content .action span.on:hover,html.gruvboxDark .modal .action span.off:hover,html.gruvboxDark .modal .action span.on:hover {
    border: .0625rem solid #504945
}

html.gruvboxDark .main .content .action.hl .button,html.gruvboxDark .modal .action.hl .button {
    border: solid 1px #b8bb26
}

html.gruvboxDark .main .content .action.cna a.button,html.gruvboxDark .modal .action.cna a.button,html.gruvboxDarkRG .main .content .action.cna a.button,html.gruvboxDarkRG .modal .action.cna a.button {
    background: #1d2021
}

html.gruvboxDark .main .content .action.cna a.button.hl-ca .aTitle,html.gruvboxDark .modal .action.cna a.button.hl-ca .aTitle {
    color: #b8bb26
}

html.gruvboxDark .main .content .action.cna .off,html.gruvboxDark .main .content .action.cna .on,html.gruvboxDark .main .content .action.cna .special,html.gruvboxDark .modal .action.cna .off,html.gruvboxDark .modal .action.cna .on,html.gruvboxDark .modal .action.cna .special {
    border-color: #3c3836
}

html.gruvboxDark .main .content .action.cna .oldTech span.aTitle,html.gruvboxDark .modal .action.cna .oldTech span.aTitle,html.gruvboxDarkRG .main>div.popper .has-text-dark,html.gruvboxDarkRG body,html.gruvboxDarkRG body .modal>div.popper .has-text-dark,html.gruvboxDarkRG h2,html.gruvboxDarkRG h3 {
    color: #ebdbb2
}

html.gruvboxDark .main .content .action.cna a.button.hl-cna .aTitle,html.gruvboxDark .main .content .action.cnam span.aTitle,html.gruvboxDark .modal .action.cna a.button.hl-cna .aTitle,html.gruvboxDark .modal .action.cnam span.aTitle {
    color: #fb4934
}

html.gruvboxDark .main .content .enemyFortress {
    background-color: #3c3836
}

html.gruvboxDark .main .content .green,html.gruvboxDark .main .content .synth {
    box-shadow: 0 0 6px #b8bb26
}

html.gruvboxDark .main .content .green>span,html.gruvboxDark .main .content .synth>span {
    text-shadow: 1px 1px #b8bb26
}

html.gruvboxDark .main .content .red {
    box-shadow: 0 0 6px #fb4934
}

html.gruvboxDark .main .content .red>span {
    text-shadow: 1px 1px #fb4934
}

html.gruvboxDark .main .content .yellow {
    box-shadow: 0 0 6px #fabd2f
}

html.gruvboxDark .main .content .yellow>span {
    text-shadow: 1px 1px #fabd2f
}

html.gruvboxDark .main .content .orange {
    box-shadow: 0 0 6px #fe8019
}

html.gruvboxDark .main .content .orange>span {
    text-shadow: 1px 1px #fe8019
}

html.gruvboxDark .main .content .purple {
    box-shadow: 0 0 6px #d3869b
}

html.gruvboxDark .main .content .purple>span {
    text-shadow: 1px 1px #d3869b
}

html.gruvboxDark .main .content .blue,html.gruvboxDark .main .content .precog {
    box-shadow: 0 0 6px #83a598
}

html.gruvboxDark .main .content .blue>span,html.gruvboxDark .main .content .precog>span {
    text-shadow: 1px 1px #83a598
}

html.gruvboxDark .main .content .cna .precog>span {
    text-shadow: none
}

html.gruvboxDark .main .garrison .header,html.gruvboxDark .main .government .header {
    border-bottom: .0625rem solid #665c54
}

html.gruvboxDark .main .market-header {
    border-bottom: #665c54 solid 1px
}

html.gruvboxDark .main .galaxyTrade {
    border-top: #665c54 solid 1px
}

html.gruvboxDark .powerGrid {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem
}

html.gruvboxDark .powerGrid .circuit {
    min-width: 18.5rem;
    cursor: pointer
}

html.gruvboxDark .powerGrid .circuit.inactive {
    display: none
}

html.gruvboxDark .powerGrid .circuit>span {
    display: inline-block
}

html.gruvboxDark .powerGrid .circuit>span:first-child {
    width: 1.5rem
}

html.gruvboxDark .powerGrid .circuit .struct {
    width: 12rem
}

html.gruvboxDark .powerGrid .circuit .off,html.gruvboxDark .powerGrid .circuit .on {
    min-width: 2rem;
    text-align: center
}

html.gruvboxDark .powerGrid .circuit .off {
    color: #fb4934
}

html.gruvboxDark .powerGrid .circuit .on {
    color: #b8bb26
}

html.gruvboxDark .gridHeader {
    border-top: #665c54 solid .0625rem;
    margin: .25rem 0 .25rem 1rem;
    padding-top: .25rem
}

html.gruvboxDark .powerGridHead {
    display: flex;
    justify-content: space-between
}

html.gruvboxDark .powerGridHeader {
    margin-left: 1rem;
    margin-bottom: .5rem
}

html.gruvboxDark .resetPowerGrid {
    margin-left: 1rem;
    margin-top: .75rem
}

html.gruvboxDark .resetPowerGrid .button {
    height: 1.5rem
}

html.gruvboxDark .fort .patrol .check {
    background-color: #000
}

html.gruvboxDark .market-item .order {
    border: #3c3836 solid .0625rem;
    transition: all 200ms ease
}

html.gruvboxDark .market-item .order:hover {
    border: #689d6a solid .0625rem;
    background-color: #504945
}

html.gruvboxDark .inactive-row,html.gruvboxDark .market-item.alt,html.gruvboxDark .resource.alt {
    background-color: #1d2021
}

html.gruvboxDark .resource.showBar.prime {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#020202 calc(var(--percent-full) + 1px),#020202 100%)
}

html.gruvboxDark .resource.showBar.alt {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#000 calc(var(--percent-full) + 1px),#000 100%)
}

html.gruvboxDark .resource .bar {
    cursor: pointer
}

html.gruvboxDark .modal .actionSpace,html.gruvboxDark .modal-card-body,html.gruvboxDark .modal-card-foot,html.gruvboxDark .modal-card-head {
    background-color: #282828
}

html.gruvboxDark .industry,html.gruvboxDark .modalBox,html.gruvboxDarkRG .main .content .action a.button span.count,html.gruvboxDarkRG .main .content .divider h2,html.gruvboxDarkRG .modal .action a.button span.count {
    background: #282828
}

html.gruvboxDark .industry .divide,html.gruvboxDark .industry .market-item,html.gruvboxDark .industry .smelting,html.gruvboxDark .modalBox .divide,html.gruvboxDark .modalBox .market-item,html.gruvboxDark .modalBox .smelting {
    border-top: #665c54 solid .0625rem
}

html.gruvboxDark .industry {
    background: 0 0
}

html.gruvboxDark .industry .header,html.gruvboxDark .industry p,html.gruvboxDark .modalBox p {
    border-bottom: #665c54 solid .0625rem
}

html.gruvboxDark .industry .avail span {
    margin: 0 2.5rem 0 2.125rem
}

html.gruvboxDark .govTask {
    margin-top: .25rem
}

html.gruvboxDark .govTask .button {
    height: 1.5rem;
    margin-left: .5rem
}

html.gruvboxDark .fileImport,html.gruvboxDarkRG {
    background-color: #282828
}

html.gruvboxDark .star1 {
    fill: #282828;
    stroke: #3c3836
}

html.gruvboxDark .star1 path,html.gruvboxDarkRG .star1 path {
    stroke: #3c3836
}

html.gruvboxDark .star2 {
    fill: #3c3836
}

html.gruvboxDark .star3 {
    fill: #cd7f32
}

html.gruvboxDark .star4 {
    fill: silver
}

html.gruvboxDark .star5 {
    fill: #d4af37
}

html.gruvboxDark .bldQueue::-webkit-scrollbar-track,html.gruvboxDark .dropdown-content::-webkit-scrollbar-track,html.gruvboxDark .hscroll::-webkit-scrollbar-track,html.gruvboxDark .resTabs>.tabs::-webkit-scrollbar-track,html.gruvboxDark .resTabs>section::-webkit-scrollbar-track,html.gruvboxDark .sticky::-webkit-scrollbar-track,html.gruvboxDark .vscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #282828
}

html.gruvboxDark .bldQueue::-webkit-scrollbar,html.gruvboxDark .dropdown-content::-webkit-scrollbar,html.gruvboxDark .resTabs>.tabs::-webkit-scrollbar,html.gruvboxDark .resTabs>section::-webkit-scrollbar,html.gruvboxDark .sticky::-webkit-scrollbar,html.gruvboxDark .vscroll::-webkit-scrollbar {
    width: 6px;
    background-color: #282828
}

html.gruvboxDark .hscroll::-webkit-scrollbar {
    height: 8px;
    background-color: #282828
}

html.gruvboxDark .bldQueue::-webkit-scrollbar-thumb,html.gruvboxDark .dropdown-content::-webkit-scrollbar-thumb,html.gruvboxDark .hscroll::-webkit-scrollbar-thumb,html.gruvboxDark .resTabs>.tabs::-webkit-scrollbar-thumb,html.gruvboxDark .resTabs>section::-webkit-scrollbar-thumb,html.gruvboxDark .sticky::-webkit-scrollbar-thumb,html.gruvboxDark .vscroll::-webkit-scrollbar-thumb {
    background-color: #3c3836
}

html.gruvboxDark .bldQueue,html.gruvboxDark .hscroll,html.gruvboxDark .resTabs>.tabs,html.gruvboxDark .resTabs>section,html.gruvboxDark .sticky,html.gruvboxDark .vscroll {
    scrollbar-color: #3c3836 #282828
}

html.gruvboxDark .buttonList .is-selected,html.gruvboxDark .modal .buttonList .is-selected {
    border-color: #b8bb26
}

html.gruvboxDark .notification,html.gruvboxDark input,html.gruvboxDark select,html.gruvboxDark textarea {
    background: #ebdbb2
}

html.gruvboxDark .add,html.gruvboxDark .current.infoOnly,html.gruvboxDark .sub {
    border: #665c54 solid .0625rem
}

html.gruvboxDark .current {
    border-top: #665c54 solid .0625rem;
    border-bottom: #665c54 solid .0625rem
}

html.gruvboxDark .popper .grad-from-left {
    background-image: linear-gradient(90deg,#fb4934 45%,#ebdbb2 55%)
}

html.gruvboxDark .popper .grad-from-left-warn {
    background-image: linear-gradient(90deg,#af5d00 45%,#fb4934 55%)
}

html.gruvboxDark .popper .grad-from-right {
    background-image: linear-gradient(90deg,#ebdbb2 45%,#fb4934 55%)
}

html.gruvboxDarkRG .switch input[type=checkbox]:checked+.check {
    background: #a28cdf
}

html.gruvboxDarkRG .button.has-text-advanced,html.gruvboxDarkRG .has-text-advanced {
    color: #458588
}

html.gruvboxDarkRG .button.has-text-alert,html.gruvboxDarkRG .has-text-alert {
    color: #af5d00
}

html.gruvboxDarkRG .button.has-text-caution,html.gruvboxDarkRG .has-text-caution {
    color: #9ab8ff
}

html.gruvboxDarkRG .button.has-text-danger,html.gruvboxDarkRG .has-text-danger {
    color: #c409bb
}

html.gruvboxDarkRG .has-text-fade {
    color: #898b87
}

html.gruvboxDarkRG .has-text-flair {
    color: #0f0
}

html.gruvboxDarkRG .button.has-text-info,html.gruvboxDarkRG .has-text-info {
    color: #83a598
}

html.gruvboxDarkRG .has-text-label {
    color: #458588
}

html.gruvboxDarkRG .button.has-text-special,html.gruvboxDarkRG .has-text-special {
    color: #ffff9e
}

html.gruvboxDarkRG .button.has-text-success,html.gruvboxDarkRG .has-text-success {
    color: #0f0
}

html.gruvboxDarkRG .button.has-text-warning,html.gruvboxDarkRG .has-text-warning,html.gruvboxDarkRG .modal-card-head p {
    color: #fc0
}

html.gruvboxDarkRG .has-text-danger-pulse {
    color: #fc0;
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

html.gruvboxDarkRG .challenge .simButton {
    border-color: #0f0
}

html.gruvboxDarkRG .challenge .configList {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around
}

html.gruvboxDarkRG .challenge .configList>div {
    margin: 0 .25rem;
    width: 10rem
}

html.gruvboxDarkRG .popper .has-text-label {
    color: #458588
}

html.gruvboxDarkRG .popper .has-text-success {
    color: #b8bb26
}

html.gruvboxDarkRG .popper .has-text-warning {
    color: #fabd2f
}

html.gruvboxDarkRG .popper .divide-line {
    border-top: #665c54 solid .0625rem
}

html.gruvboxDarkRG .main>div.popper,html.gruvboxDarkRG body .modal>div.popper {
    background-color: #282828;
    border: .0625rem solid #665c54;
    color: #ebdbb2
}

html.gruvboxDarkRG .main>div.popper>div,html.gruvboxDarkRG body .modal>div.popper>div {
    border-top: solid .0625rem #665c54
}

html.gruvboxDarkRG .main>div.popper>div:first-child,html.gruvboxDarkRG body .modal>div.popper>div:first-child {
    border-top: none
}

html.gruvboxDarkRG .main>div.popper .split,html.gruvboxDarkRG body .modal>div.popper .split {
    display: flex
}

html.gruvboxDarkRG .main>div.popper .split>div,html.gruvboxDarkRG body .modal>div.popper .split>div {
    flex-wrap: nowrap
}

html.gruvboxDarkRG .shipPopper .divider {
    border-bottom: solid .0625rem #665c54
}

html.gruvboxDarkRG .sliderbar>span {
    position: relative;
    display: inline-block;
    width: 5%;
    bottom: 1.125rem;
    margin: 0 .375rem
}

html.gruvboxDarkRG .sliderbar .b-slider {
    display: inline-block;
    width: 80%
}

html.gruvboxDarkRG .sliderbar .b-slider .b-slider-track {
    height: 1rem
}

html.gruvboxDarkRG .sliderbar .is-primary .b-slider-fill {
    background: #0f0
}

html.gruvboxDarkRG .sliderbar.thin>span {
    bottom: .625rem
}

html.gruvboxDarkRG .sliderbar.thin .b-slider {
    margin-top: .5rem;
    margin-bottom: .5rem
}

html.gruvboxDarkRG .msgQueueFilters span,html.gruvboxDarkRG .tabs a {
    color: #ebdbb2
}

html.gruvboxDarkRG .msgQueueFilters span.is-active,html.gruvboxDarkRG .tabs li.is-active a {
    border-bottom-color: #8ec07c;
    color: #82bdff
}

html.gruvboxDarkRG .msgQueueFilters span:hover,html.gruvboxDarkRG .tabs a:hover {
    border-bottom-color: #689d6a;
    color: #689d6a
}

html.gruvboxDarkRG .button {
    background-color: #3c3836;
    color: #ebdbb2
}

html.gruvboxDarkRG .button.is-light {
    background-color: #ebdbb2
}

html.gruvboxDarkRG .button.is-hovered,html.gruvboxDarkRG .button:hover {
    background-color: #504945;
    color: #689d6a
}

html.gruvboxDarkRG .button.is-focused,html.gruvboxDarkRG .button:focus {
    border-color: #665c54
}

html.gruvboxDarkRG .basic-button {
    border: #3c3836 solid .0625rem
}

html.gruvboxDarkRG .basic-button:hover {
    border: #8ec07c solid .0625rem;
    background-color: #1d2021
}

html.gruvboxDarkRG .text-button:hover {
    cursor: pointer;
    color: #689d6a;
    text-decoration: underline
}

html.gruvboxDarkRG .label {
    color: #ebdbb2
}

html.gruvboxDarkRG .checkbox:hover,html.gruvboxDarkRG .radio:hover {
    color: #8ec07c
}

html.gruvboxDarkRG .dropdown-content {
    background-color: #3c3836
}

html.gruvboxDarkRG .b-tooltip.is-right:before {
    border-right: 5px solid #282828
}

html.gruvboxDarkRG .b-tooltip.is-left:before {
    border-left: 5px solid #282828
}

html.gruvboxDarkRG .b-tooltip.is-bottom:before {
    border-bottom: 5px solid #282828
}

html.gruvboxDarkRG .b-tooltip.is-primary .tooltip-content {
    background: #282828;
    border: .0625rem solid #3c3836;
    color: #ebdbb2
}

html.gruvboxDarkRG .add,html.gruvboxDarkRG .sub {
    transition: all 200ms ease
}

html.gruvboxDarkRG .add:hover,html.gruvboxDarkRG .sub:hover {
    background-color: #504945;
    color: #689d6a
}

html.gruvboxDarkRG .promoBar,html.gruvboxDarkRG .topBar {
    background-color: #504945
}

html.gruvboxDarkRG .pause,html.gruvboxDarkRG .play {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

html.gruvboxDarkRG .play {
    bottom: .125rem;
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-left: .375rem solid #0f0;
    border-bottom: .25rem solid transparent
}

html.gruvboxDarkRG .pause {
    box-sizing: content-box;
    bottom: .0625rem;
    width: .125rem;
    height: .625rem;
    border-right: .125rem solid #c409bb;
    border-left: .125rem solid #c409bb
}

html.gruvboxDarkRG .meter.low {
    color: #ffe940
}

html.gruvboxDarkRG .meter.neutral {
    color: #9ab8ff
}

html.gruvboxDarkRG .meter.high {
    color: #83a598
}

html.gruvboxDarkRG .buildList .hl-ca,html.gruvboxDarkRG .main .content .action a.button.hl-ca .aTitle,html.gruvboxDarkRG .modal .action a.button.hl-ca .aTitle {
    color: #b8bb26
}

html.gruvboxDarkRG .buildList .hl-cna,html.gruvboxDarkRG .main .content .action a.button.hl-cna .aTitle,html.gruvboxDarkRG .modal .action a.button.hl-cna .aTitle {
    color: #ffe940
}

html.gruvboxDarkRG .graphContainer span.special:hover .gear,html.gruvboxDarkRG .msgQueue span.special:hover .gear {
    fill: #8ec07c
}

html.gruvboxDarkRG .main .content .action div.special,html.gruvboxDarkRG .modal .action div.special {
    background: #282828;
    border: .0625rem solid #3c3836
}

html.gruvboxDarkRG .graphContainer span.special .gear,html.gruvboxDarkRG .main .content .action div.special .gear,html.gruvboxDarkRG .modal .action div.special .gear,html.gruvboxDarkRG .msgQueue span.special .gear,html.orangeSoda .graphContainer span.special:hover .gear,html.orangeSoda .msgQueue span.special:hover .gear {
    fill: #f09d51
}

html.gruvboxDarkRG .main .content .action div.special:hover,html.gruvboxDarkRG .modal .action div.special:hover {
    border: .0625rem solid #504945
}

html.gruvboxDarkRG .main .content .action div.special:hover .gear,html.gruvboxDarkRG .modal .action div.special:hover .gear {
    fill: #8ec07c
}

html.gruvboxDarkRG .main .content .action span.on,html.gruvboxDarkRG .modal .action span.on {
    background: #282828;
    border: .0625rem solid #3c3836;
    color: #0f0
}

html.gruvboxDarkRG .main .content .action span.on.altwarn,html.gruvboxDarkRG .main .content .action span.on.warn,html.gruvboxDarkRG .modal .action span.on.altwarn,html.gruvboxDarkRG .modal .action span.on.warn {
    color: #af5d00
}

html.gruvboxDarkRG .main .content .action span.off,html.gruvboxDarkRG .modal .action span.off {
    background: #282828;
    border: .0625rem solid #3c3836;
    color: #c409bb
}

html.gruvboxDarkRG .main .content .action span.off:hover,html.gruvboxDarkRG .main .content .action span.on:hover,html.gruvboxDarkRG .modal .action span.off:hover,html.gruvboxDarkRG .modal .action span.on:hover {
    border: .0625rem solid #504945
}

html.gruvboxDarkRG .main .content .action.hl .button,html.gruvboxDarkRG .modal .action.hl .button {
    border: solid 1px #b8bb26
}

html.gruvboxDarkRG .main .content .action.cna a.button.hl-ca .aTitle,html.gruvboxDarkRG .modal .action.cna a.button.hl-ca .aTitle {
    color: #b8bb26
}

html.gruvboxDarkRG .main .content .action.cna .off,html.gruvboxDarkRG .main .content .action.cna .on,html.gruvboxDarkRG .main .content .action.cna .special,html.gruvboxDarkRG .modal .action.cna .off,html.gruvboxDarkRG .modal .action.cna .on,html.gruvboxDarkRG .modal .action.cna .special {
    border-color: #3c3836
}

html.gruvboxDarkRG .main .content .action.cna .oldTech span.aTitle,html.gruvboxDarkRG .modal .action.cna .oldTech span.aTitle,html.orangeSoda .main>div.popper .has-text-dark,html.orangeSoda body,html.orangeSoda body .modal>div.popper .has-text-dark,html.orangeSoda h2,html.orangeSoda h3 {
    color: #ebdbb2
}

html.gruvboxDarkRG .main .content .action.cna a.button.hl-cna .aTitle,html.gruvboxDarkRG .main .content .action.cnam span.aTitle,html.gruvboxDarkRG .modal .action.cna a.button.hl-cna .aTitle,html.gruvboxDarkRG .modal .action.cnam span.aTitle {
    color: #ffe940
}

html.gruvboxDarkRG .main .content .enemyFortress {
    background-color: #3c3836
}

html.gruvboxDarkRG .main .content .green,html.gruvboxDarkRG .main .content .synth {
    box-shadow: 0 0 6px #0f0
}

html.gruvboxDarkRG .main .content .green>span,html.gruvboxDarkRG .main .content .synth>span {
    text-shadow: 1px 1px #0f0
}

html.gruvboxDarkRG .main .content .red {
    box-shadow: 0 0 6px #c409bb
}

html.gruvboxDarkRG .main .content .red>span {
    text-shadow: 1px 1px #c409bb
}

html.gruvboxDarkRG .main .content .yellow {
    box-shadow: 0 0 6px #fc0
}

html.gruvboxDarkRG .main .content .yellow>span {
    text-shadow: 1px 1px #fc0
}

html.gruvboxDarkRG .main .content .orange {
    box-shadow: 0 0 6px #9ab8ff
}

html.gruvboxDarkRG .main .content .orange>span {
    text-shadow: 1px 1px #9ab8ff
}

html.gruvboxDarkRG .main .content .purple {
    box-shadow: 0 0 6px #ffff9e
}

html.gruvboxDarkRG .main .content .purple>span {
    text-shadow: 1px 1px #ffff9e
}

html.gruvboxDarkRG .main .content .blue,html.gruvboxDarkRG .main .content .precog {
    box-shadow: 0 0 6px #83a598
}

html.gruvboxDarkRG .main .content .blue>span,html.gruvboxDarkRG .main .content .precog>span {
    text-shadow: 1px 1px #83a598
}

html.gruvboxDarkRG .main .content .cna .precog>span {
    text-shadow: none
}

html.gruvboxDarkRG .main .garrison .header,html.gruvboxDarkRG .main .government .header {
    border-bottom: .0625rem solid #665c54
}

html.gruvboxDarkRG .main .market-header {
    border-bottom: #665c54 solid 1px
}

html.gruvboxDarkRG .main .galaxyTrade {
    border-top: #665c54 solid 1px
}

html.gruvboxDarkRG .powerGrid {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem
}

html.gruvboxDarkRG .powerGrid .circuit {
    min-width: 18.5rem;
    cursor: pointer
}

html.gruvboxDarkRG .powerGrid .circuit.inactive {
    display: none
}

html.gruvboxDarkRG .powerGrid .circuit>span {
    display: inline-block
}

html.gruvboxDarkRG .powerGrid .circuit>span:first-child {
    width: 1.5rem
}

html.gruvboxDarkRG .powerGrid .circuit .struct {
    width: 12rem
}

html.gruvboxDarkRG .powerGrid .circuit .off,html.gruvboxDarkRG .powerGrid .circuit .on {
    min-width: 2rem;
    text-align: center
}

html.gruvboxDarkRG .powerGrid .circuit .off {
    color: #c409bb
}

html.gruvboxDarkRG .powerGrid .circuit .on {
    color: #0f0
}

html.gruvboxDarkRG .gridHeader {
    border-top: #665c54 solid .0625rem;
    margin: .25rem 0 .25rem 1rem;
    padding-top: .25rem
}

html.gruvboxDarkRG .powerGridHead {
    display: flex;
    justify-content: space-between
}

html.gruvboxDarkRG .powerGridHeader {
    margin-left: 1rem;
    margin-bottom: .5rem
}

html.gruvboxDarkRG .resetPowerGrid {
    margin-left: 1rem;
    margin-top: .75rem
}

html.gruvboxDarkRG .resetPowerGrid .button {
    height: 1.5rem
}

html.gruvboxDarkRG .fort .patrol .check {
    background-color: #000
}

html.gruvboxDarkRG .market-item .order {
    border: #3c3836 solid .0625rem;
    transition: all 200ms ease
}

html.gruvboxDarkRG .market-item .order:hover {
    border: #689d6a solid .0625rem;
    background-color: #504945
}

html.gruvboxDarkRG .inactive-row,html.gruvboxDarkRG .market-item.alt,html.gruvboxDarkRG .resource.alt {
    background-color: #1d2021
}

html.gruvboxDarkRG .resource.showBar.prime {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#020202 calc(var(--percent-full) + 1px),#020202 100%)
}

html.gruvboxDarkRG .resource.showBar.alt {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#000 calc(var(--percent-full) + 1px),#000 100%)
}

html.gruvboxDarkRG .resource .bar {
    cursor: pointer
}

html.gruvboxDarkRG .modal .actionSpace,html.gruvboxDarkRG .modal-card-body,html.gruvboxDarkRG .modal-card-foot,html.gruvboxDarkRG .modal-card-head {
    background-color: #282828
}

html.gruvboxDarkRG .industry,html.gruvboxDarkRG .modalBox {
    background: #282828
}

html.gruvboxDarkRG .industry .divide,html.gruvboxDarkRG .industry .market-item,html.gruvboxDarkRG .industry .smelting,html.gruvboxDarkRG .modalBox .divide,html.gruvboxDarkRG .modalBox .market-item,html.gruvboxDarkRG .modalBox .smelting {
    border-top: #665c54 solid .0625rem
}

html.gruvboxDarkRG .industry {
    background: 0 0
}

html.gruvboxDarkRG .industry .header,html.gruvboxDarkRG .industry p,html.gruvboxDarkRG .modalBox p {
    border-bottom: #665c54 solid .0625rem
}

html.gruvboxDarkRG .industry .avail span {
    margin: 0 2.5rem 0 2.125rem
}

html.gruvboxDarkRG .govTask {
    margin-top: .25rem
}

html.gruvboxDarkRG .govTask .button {
    height: 1.5rem;
    margin-left: .5rem
}

html.gruvboxDarkRG .fileImport {
    background-color: #282828
}

html.gruvboxDarkRG .star1 {
    fill: #282828;
    stroke: #3c3836
}

html.gruvboxDarkRG .star2 {
    fill: #3c3836
}

html.gruvboxDarkRG .star3 {
    fill: #cd7f32
}

html.gruvboxDarkRG .star4 {
    fill: silver
}

html.gruvboxDarkRG .star5 {
    fill: #d4af37
}

html.gruvboxDarkRG .bldQueue::-webkit-scrollbar-track,html.gruvboxDarkRG .dropdown-content::-webkit-scrollbar-track,html.gruvboxDarkRG .hscroll::-webkit-scrollbar-track,html.gruvboxDarkRG .resTabs>.tabs::-webkit-scrollbar-track,html.gruvboxDarkRG .resTabs>section::-webkit-scrollbar-track,html.gruvboxDarkRG .sticky::-webkit-scrollbar-track,html.gruvboxDarkRG .vscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #282828
}

html.gruvboxDarkRG .bldQueue::-webkit-scrollbar,html.gruvboxDarkRG .dropdown-content::-webkit-scrollbar,html.gruvboxDarkRG .resTabs>.tabs::-webkit-scrollbar,html.gruvboxDarkRG .resTabs>section::-webkit-scrollbar,html.gruvboxDarkRG .sticky::-webkit-scrollbar,html.gruvboxDarkRG .vscroll::-webkit-scrollbar {
    width: 6px;
    background-color: #282828
}

html.gruvboxDarkRG .hscroll::-webkit-scrollbar {
    height: 8px;
    background-color: #282828
}

html.gruvboxDarkRG .bldQueue::-webkit-scrollbar-thumb,html.gruvboxDarkRG .dropdown-content::-webkit-scrollbar-thumb,html.gruvboxDarkRG .hscroll::-webkit-scrollbar-thumb,html.gruvboxDarkRG .resTabs>.tabs::-webkit-scrollbar-thumb,html.gruvboxDarkRG .resTabs>section::-webkit-scrollbar-thumb,html.gruvboxDarkRG .sticky::-webkit-scrollbar-thumb,html.gruvboxDarkRG .vscroll::-webkit-scrollbar-thumb {
    background-color: #3c3836
}

html.gruvboxDarkRG .bldQueue,html.gruvboxDarkRG .hscroll,html.gruvboxDarkRG .resTabs>.tabs,html.gruvboxDarkRG .resTabs>section,html.gruvboxDarkRG .sticky,html.gruvboxDarkRG .vscroll {
    scrollbar-color: #3c3836 #282828
}

html.gruvboxDarkRG .buttonList .is-selected,html.gruvboxDarkRG .modal .buttonList .is-selected {
    border-color: #b8bb26
}

html.gruvboxDarkRG .notification,html.gruvboxDarkRG input,html.gruvboxDarkRG select,html.gruvboxDarkRG textarea {
    background: #ebdbb2
}

html.gruvboxDarkRG .add,html.gruvboxDarkRG .current.infoOnly,html.gruvboxDarkRG .sub {
    border: #665c54 solid .0625rem
}

html.gruvboxDarkRG .current {
    border-top: #665c54 solid .0625rem;
    border-bottom: #665c54 solid .0625rem
}

html.gruvboxDarkRG .popper .grad-from-left {
    background-image: linear-gradient(90deg,#c409bb 45%,#ebdbb2 55%)
}

html.gruvboxDarkRG .popper .grad-from-left-warn {
    background-image: linear-gradient(90deg,#af5d00 45%,#c409bb 55%)
}

html.gruvboxDarkRG .popper .grad-from-right {
    background-image: linear-gradient(90deg,#ebdbb2 45%,#c409bb 55%)
}

html.orangeSoda {
    background-color: #131516
}

html.orangeSoda a {
    color: #f06543
}

html.orangeSoda .button.has-text-advanced,html.orangeSoda .has-text-advanced {
    color: #00ac95
}

html.orangeSoda .button.has-text-alert,html.orangeSoda .has-text-alert {
    color: #af5d00
}

html.orangeSoda .button.has-text-caution,html.orangeSoda .has-text-caution {
    color: #f09d51
}

html.orangeSoda .button.has-text-danger,html.orangeSoda .has-text-danger {
    color: #c21e83
}

html.orangeSoda .has-text-fade {
    color: #898b87
}

html.orangeSoda .has-text-flair {
    color: #91006c
}

html.orangeSoda .button.has-text-info {
    color: #167df0
}

html.orangeSoda .has-text-label {
    color: #35a7ff
}

html.orangeSoda .button.has-text-special,html.orangeSoda .has-text-special {
    color: #91006c
}

html.orangeSoda .button.has-text-success,html.orangeSoda .has-text-success {
    color: #35a7ff
}

html.orangeSoda .button.has-text-warning,html.orangeSoda .has-text-warning {
    color: #f06543
}

html.orangeSoda .has-text-danger-pulse {
    color: #f06543;
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

html.orangeSoda .challenge .simButton {
    border-color: #35a7ff
}

html.orangeSoda .challenge .configList {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around
}

html.orangeSoda .challenge .configList>div {
    margin: 0 .25rem;
    width: 10rem
}

html.orangeSoda .popper .has-text-label,html.orangeSoda .popper .has-text-success {
    color: #35a7ff
}

html.orangeSoda .popper .has-text-warning {
    color: #f06543
}

html.orangeSoda .popper .divide-line {
    border-top: #313638 solid .0625rem
}

html.orangeSoda .main>div.popper,html.orangeSoda body .modal>div.popper {
    background-color: #292929;
    border: .0625rem solid #313638;
    color: #ebdbb2
}

html.orangeSoda .main>div.popper>div,html.orangeSoda body .modal>div.popper>div {
    border-top: solid .0625rem #313638
}

html.orangeSoda .main>div.popper>div:first-child,html.orangeSoda body .modal>div.popper>div:first-child {
    border-top: none
}

html.orangeSoda .main>div.popper .split,html.orangeSoda body .modal>div.popper .split {
    display: flex
}

html.orangeSoda .main>div.popper .split>div,html.orangeSoda body .modal>div.popper .split>div {
    flex-wrap: nowrap
}

html.orangeSoda .main>div.popper .split>div:nth-of-type(2),html.orangeSoda body .modal>div.popper .split>div:nth-of-type(2) {
    border-left: solid .0625rem #313638;
    margin-left: .375rem;
    padding-left: .375rem
}

html.orangeSoda .shipPopper .divider {
    border-bottom: solid .0625rem #313638
}

html.orangeSoda .sliderbar>span {
    position: relative;
    display: inline-block;
    width: 5%;
    bottom: 1.125rem;
    margin: 0 .375rem
}

html.orangeSoda .sliderbar .b-slider {
    display: inline-block;
    width: 80%
}

html.orangeSoda .sliderbar .b-slider .b-slider-track {
    height: 1rem
}

html.orangeSoda .sliderbar .is-primary .b-slider-fill {
    background: #35a7ff
}

html.orangeSoda .sliderbar.thin>span {
    bottom: .625rem
}

html.orangeSoda .sliderbar.thin .b-slider {
    margin-top: .5rem;
    margin-bottom: .5rem
}

html.orangeSoda .msgQueueFilters span,html.orangeSoda .tabs a {
    color: #ebdbb2
}

html.orangeSoda .msgQueueFilters span.is-active,html.orangeSoda .tabs li.is-active a {
    border-bottom-color: #f06543;
    color: #f06543
}

html.orangeSoda .msgQueueFilters span:hover,html.orangeSoda .tabs a:hover {
    border-bottom-color: #d09376;
    color: #d09376
}

html.orangeSoda .button {
    background-color: #1c2021;
    color: #ebdbb2
}

html.orangeSoda .button.is-light {
    background-color: #ebdbb2
}

html.orangeSoda .button.is-hovered,html.orangeSoda .button:hover {
    background-color: #313638;
    color: #d09376
}

html.orangeSoda .button.is-focused,html.orangeSoda .button:focus {
    border-color: #313638
}

html.orangeSoda .basic-button {
    border: #313638 solid .0625rem
}

html.orangeSoda .basic-button:hover {
    border: #f06543 solid .0625rem;
    background-color: #292929
}

html.orangeSoda .text-button:hover {
    cursor: pointer;
    color: #d09376;
    text-decoration: underline
}

html.orangeSoda .label {
    color: #ebdbb2
}

html.orangeSoda .checkbox:hover,html.orangeSoda .modal-card-head p,html.orangeSoda .radio:hover {
    color: #f06543
}

html.orangeSoda .dropdown-content {
    background-color: #1c2021
}

html.orangeSoda .b-tooltip.is-right:before {
    border-right: 5px solid #d09376
}

html.orangeSoda .b-tooltip.is-left:before {
    border-left: 5px solid #d09376
}

html.orangeSoda .b-tooltip.is-bottom:before {
    border-bottom: 5px solid #d09376
}

html.orangeSoda .b-tooltip.is-primary .tooltip-content {
    background: #d09376;
    border: .0625rem solid #313638;
    color: #000
}

html.orangeSoda .add,html.orangeSoda .sub {
    border: #313638 solid .0625rem;
    transition: all 200ms ease
}

html.orangeSoda .add:hover,html.orangeSoda .sub:hover {
    background-color: #313638;
    color: #d09376
}

html.orangeSoda .current {
    border-top: #313638 solid .0625rem;
    border-bottom: #313638 solid .0625rem
}

html.orangeSoda .current.infoOnly {
    border: #313638 solid .0625rem
}

html.orangeSoda .promoBar,html.orangeSoda .topBar {
    background-color: #313638
}

html.orangeSoda .pause,html.orangeSoda .play {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

html.orangeSoda .play {
    bottom: .125rem;
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-left: .375rem solid #35a7ff;
    border-bottom: .25rem solid transparent
}

html.orangeSoda .pause {
    box-sizing: content-box;
    bottom: .0625rem;
    width: .125rem;
    height: .625rem;
    border-right: .125rem solid #c21e83;
    border-left: .125rem solid #c21e83
}

html.orangeSoda .meter.low {
    color: #c21e83
}

html.orangeSoda .meter.neutral {
    color: #38618c
}

html.orangeSoda .buildList .hl-ca,html.orangeSoda .main .content .action a.button.hl-ca .aTitle,html.orangeSoda .meter.high {
    color: #35a7ff
}

html.orangeSoda .buildList .hl-cna,html.orangeSoda .main .content .action a.button.hl-cna .aTitle {
    color: #c21e83
}

html.orangeSoda .graphContainer span.special .gear,html.orangeSoda .main .content .action div.special .gear,html.orangeSoda .modal .action div.special .gear,html.orangeSoda .msgQueue span.special .gear {
    fill: #f06543
}

html.orangeSoda .main .content .action a.button span.count,html.orangeSoda .main .content .divider h2 {
    background: #131516
}

html.orangeSoda .main .content .action div.special,html.orangeSoda .modal .action div.special {
    background: #131516;
    border: .0625rem solid #313638
}

html.orangeSoda .main .content .action div.special:hover {
    border: .0625rem solid #313638
}

html.orangeSoda .main .content .action div.special:hover .gear {
    fill: #f09d51
}

html.orangeSoda .main .content .action span.off,html.orangeSoda .main .content .action span.on {
    background: #131516;
    border: .0625rem solid #313638;
    color: #35a7ff
}

html.orangeSoda .main .content .action span.on.altwarn,html.orangeSoda .main .content .action span.on.warn {
    color: #af5d00
}

html.orangeSoda .main .content .action span.off {
    color: #c21e83
}

html.orangeSoda .main .content .action span.off:hover,html.orangeSoda .main .content .action span.on:hover,html.orangeSoda .modal .action div.special:hover {
    border: .0625rem solid #313638
}

html.orangeSoda .main .content .action.hl .button {
    border: solid 1px #35a7ff
}

html.orangeSoda .main .content .action.cna a.button,html.orangeSoda .modal .action.cna a.button {
    background: #181818
}

html.orangeSoda .main .content .action.cna a.button.hl-ca .aTitle,html.orangeSoda .modal .action.cna a.button.hl-ca .aTitle {
    color: #35a7ff
}

html.orangeSoda .main .content .action.cna .off,html.orangeSoda .main .content .action.cna .on,html.orangeSoda .main .content .action.cna .special,html.orangeSoda .modal .action.cna .off,html.orangeSoda .modal .action.cna .on,html.orangeSoda .modal .action.cna .special {
    border-color: #313638
}

html.orangeSoda .main .content .action.cna .oldTech span.aTitle,html.orangeSoda .modal .action.cna .oldTech span.aTitle {
    color: #ebdbb2
}

html.orangeSoda .main .content .action.cna a.button.hl-cna .aTitle,html.orangeSoda .main .content .action.cnam span.aTitle,html.orangeSoda .modal .action.cna a.button.hl-cna .aTitle,html.orangeSoda .modal .action.cnam span.aTitle {
    color: #c21e83
}

html.orangeSoda .main .content .enemyFortress {
    background-color: #1c2021
}

html.orangeSoda .main .content .green,html.orangeSoda .main .content .synth {
    box-shadow: 0 0 6px #35a7ff
}

html.orangeSoda .main .content .green>span,html.orangeSoda .main .content .synth>span {
    text-shadow: 1px 1px #35a7ff
}

html.orangeSoda .main .content .red {
    box-shadow: 0 0 6px #c21e83
}

html.orangeSoda .main .content .red>span {
    text-shadow: 1px 1px #c21e83
}

html.orangeSoda .main .content .yellow {
    box-shadow: 0 0 6px #f06543
}

html.orangeSoda .main .content .yellow>span {
    text-shadow: 1px 1px #f06543
}

html.orangeSoda .main .content .orange {
    box-shadow: 0 0 6px #f09d51
}

html.orangeSoda .main .content .orange>span {
    text-shadow: 1px 1px #f09d51
}

html.orangeSoda .main .content .purple {
    box-shadow: 0 0 6px #91006c
}

html.orangeSoda .main .content .purple>span {
    text-shadow: 1px 1px #91006c
}

html.orangeSoda .main .content .blue,html.orangeSoda .main .content .precog {
    box-shadow: 0 0 6px #167df0
}

html.orangeSoda .main .content .blue>span,html.orangeSoda .main .content .precog>span {
    text-shadow: 1px 1px #167df0
}

html.orangeSoda .main .content .cna .precog>span {
    text-shadow: none
}

html.orangeSoda .main .garrison .header,html.orangeSoda .main .government .header {
    border-bottom: .0625rem solid #313638
}

html.orangeSoda .main .market-header {
    border-bottom: #313638 solid 1px
}

html.orangeSoda .main .galaxyTrade {
    border-top: #313638 solid 1px
}

html.orangeSoda .powerGrid {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem
}

html.orangeSoda .powerGrid .circuit {
    min-width: 18.5rem;
    cursor: pointer
}

html.orangeSoda .powerGrid .circuit.inactive {
    display: none
}

html.orangeSoda .powerGrid .circuit>span {
    display: inline-block
}

html.orangeSoda .powerGrid .circuit>span:first-child {
    width: 1.5rem
}

html.orangeSoda .powerGrid .circuit .struct {
    width: 12rem
}

html.orangeSoda .powerGrid .circuit .off,html.orangeSoda .powerGrid .circuit .on {
    min-width: 2rem;
    text-align: center
}

html.orangeSoda .powerGrid .circuit .off {
    color: #c21e83
}

html.orangeSoda .modal .action a.button.hl-ca .aTitle,html.orangeSoda .powerGrid .circuit .on {
    color: #35a7ff
}

html.orangeSoda .gridHeader {
    border-top: #313638 solid .0625rem;
    margin: .25rem 0 .25rem 1rem;
    padding-top: .25rem
}

html.orangeSoda .powerGridHead {
    display: flex;
    justify-content: space-between
}

html.orangeSoda .powerGridHeader {
    margin-left: 1rem;
    margin-bottom: .5rem
}

html.orangeSoda .resetPowerGrid {
    margin-left: 1rem;
    margin-top: .75rem
}

html.orangeSoda .resetPowerGrid .button {
    height: 1.5rem
}

html.orangeSoda .fort .patrol .check {
    background-color: #000
}

html.orangeSoda .market-item .order {
    border: #313638 solid .0625rem;
    transition: all 200ms ease
}

html.orangeSoda .market-item .order:hover {
    border: #d09376 solid .0625rem;
    background-color: #313638
}

html.orangeSoda .inactive-row,html.orangeSoda .market-item.alt,html.orangeSoda .resource.alt {
    background-color: #292929
}

html.orangeSoda .resource.showBar.prime {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#000 calc(var(--percent-full) + 1px),#000 100%)
}

html.orangeSoda .resource.showBar.alt {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#030303 calc(var(--percent-full) + 1px),#030303 100%)
}

html.orangeSoda .resource .bar {
    cursor: pointer
}

html.orangeSoda .modal .actionSpace,html.orangeSoda .modal-card-body,html.orangeSoda .modal-card-foot,html.orangeSoda .modal-card-head {
    background-color: #131516
}

html.orangeSoda .industry,html.orangeSoda .modal .action a.button span.count,html.orangeSoda .modalBox {
    background: #131516
}

html.orangeSoda .industry .divide,html.orangeSoda .industry .market-item,html.orangeSoda .industry .smelting,html.orangeSoda .modalBox .divide,html.orangeSoda .modalBox .market-item,html.orangeSoda .modalBox .smelting {
    border-top: #313638 solid .0625rem
}

html.orangeSoda .industry {
    background: 0 0
}

html.orangeSoda .industry .header,html.orangeSoda .industry p,html.orangeSoda .modalBox p {
    border-bottom: #313638 solid .0625rem
}

html.orangeSoda .industry .avail span {
    margin: 0 2.5rem 0 2.125rem
}

html.orangeSoda .govTask {
    margin-top: .25rem
}

html.orangeSoda .govTask .button {
    height: 1.5rem;
    margin-left: .5rem
}

html.orangeSoda .fileImport {
    background-color: #131516
}

html.orangeSoda .star1 {
    fill: #131516;
    stroke: #fff
}

html.dracula .star1 path,html.orangeSoda .star1 path {
    stroke: #fff
}

html.orangeSoda .star2 {
    fill: #fff
}

html.orangeSoda .star3 {
    fill: #cd7f32
}

html.orangeSoda .star4 {
    fill: silver
}

html.orangeSoda .star5 {
    fill: #d4af37
}

html.orangeSoda .refresh svg {
    fill: #00ac95
}

html.orangeSoda .bldQueue::-webkit-scrollbar-track,html.orangeSoda .dropdown-content::-webkit-scrollbar-track,html.orangeSoda .hscroll::-webkit-scrollbar-track,html.orangeSoda .resTabs>.tabs::-webkit-scrollbar-track,html.orangeSoda .resTabs>section::-webkit-scrollbar-track,html.orangeSoda .sticky::-webkit-scrollbar-track,html.orangeSoda .vscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #131516
}

html.orangeSoda .bldQueue::-webkit-scrollbar,html.orangeSoda .dropdown-content::-webkit-scrollbar,html.orangeSoda .resTabs>.tabs::-webkit-scrollbar,html.orangeSoda .resTabs>section::-webkit-scrollbar,html.orangeSoda .sticky::-webkit-scrollbar,html.orangeSoda .vscroll::-webkit-scrollbar {
    width: 6px;
    background-color: #131516
}

html.orangeSoda .hscroll::-webkit-scrollbar {
    height: 8px;
    background-color: #131516
}

html.orangeSoda .bldQueue::-webkit-scrollbar-thumb,html.orangeSoda .dropdown-content::-webkit-scrollbar-thumb,html.orangeSoda .hscroll::-webkit-scrollbar-thumb,html.orangeSoda .resTabs>.tabs::-webkit-scrollbar-thumb,html.orangeSoda .resTabs>section::-webkit-scrollbar-thumb,html.orangeSoda .sticky::-webkit-scrollbar-thumb,html.orangeSoda .vscroll::-webkit-scrollbar-thumb {
    background-color: #313638
}

html.orangeSoda .bldQueue,html.orangeSoda .hscroll,html.orangeSoda .resTabs>.tabs,html.orangeSoda .resTabs>section,html.orangeSoda .sticky,html.orangeSoda .vscroll {
    scrollbar-color: #313638 #131516
}

html.orangeSoda .buttonList .is-selected,html.orangeSoda .modal .buttonList .is-selected {
    border-color: #35a7ff
}

html.orangeSoda .modal .action a.button.hl-cna .aTitle,html.orangeSoda .pop-desc .has-text-caution {
    color: #c21e83
}

html.orangeSoda .modal .action div.special:hover .gear {
    fill: #f09d51
}

html.orangeSoda .modal .action span.off,html.orangeSoda .modal .action span.on {
    background: #131516;
    border: .0625rem solid #313638;
    color: #35a7ff
}

html.orangeSoda .modal .action span.on.altwarn,html.orangeSoda .modal .action span.on.warn {
    color: #af5d00
}

html.orangeSoda .modal .action span.off {
    color: #c21e83
}

html.orangeSoda .modal .action span.off:hover,html.orangeSoda .modal .action span.on:hover {
    border: .0625rem solid #313638
}

html.orangeSoda .modal .action.hl .button {
    border: solid 1px #35a7ff
}

html.orangeSoda .has-text-info {
    color: #f09d51
}

html.orangeSoda .notification,html.orangeSoda input,html.orangeSoda select,html.orangeSoda textarea {
    background: #ebdbb2
}

html.orangeSoda .popper .grad-from-left {
    background-image: linear-gradient(90deg,#c21e83 45%,#ebdbb2 55%)
}

html.orangeSoda .popper .grad-from-left-warn {
    background-image: linear-gradient(90deg,#af5d00 45%,#c21e83 55%)
}

html.orangeSoda .popper .grad-from-right {
    background-image: linear-gradient(90deg,#ebdbb2 45%,#c21e83 55%)
}

html.dracula {
    background-color: #282a36
}

html.dracula .main>div.popper .has-text-dark,html.dracula body,html.dracula body .modal>div.popper .has-text-dark,html.dracula h2,html.dracula h3 {
    color: #f8f8f2
}

html.dracula a {
    color: #bd93f9
}

html.dracula .button.has-text-advanced,html.dracula .has-text-advanced {
    color: #8be9fd
}

html.dracula .button.has-text-alert,html.dracula .has-text-alert {
    color: #e0a361
}

html.dracula .button.has-text-caution,html.dracula .has-text-caution {
    color: #ffa26c
}

html.dracula .button.has-text-danger,html.dracula .has-text-danger {
    color: #f55
}

html.dracula .has-text-fade {
    color: #6272a4
}

html.dracula .has-text-flair {
    color: #ff79c6
}

html.dracula .button.has-text-info,html.dracula .has-text-info {
    color: #bd93f9
}

html.dracula .has-text-label {
    color: #7dcbdd
}

html.dracula .button.has-text-special,html.dracula .has-text-special {
    color: #ff79c6
}

html.dracula .button.has-text-success,html.dracula .has-text-success {
    color: #50fa7b
}

html.dracula .button.has-text-warning,html.dracula .has-text-warning {
    color: #f1fa8c
}

html.dracula .has-text-danger-pulse {
    color: #f1fa8c;
    -webkit-animation: color-change 5s infinite;
    -moz-animation: color-change 5s infinite;
    -o-animation: color-change 5s infinite;
    -ms-animation: color-change 5s infinite;
    animation: color-change 5s infinite
}

html.dracula .challenge .simButton {
    border-color: #50fa7b
}

html.dracula .challenge .configList {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around
}

html.dracula .challenge .configList>div {
    margin: 0 .25rem;
    width: 10rem
}

html.dracula .popper .has-text-label {
    color: #7dcbdd
}

html.dracula .popper .has-text-success {
    color: #50fa7b
}

html.dracula .modal-card-head p,html.dracula .popper .has-text-warning {
    color: #f1fa8c
}

html.dracula .popper .divide-line {
    border-top: #44475a solid .0625rem
}

html.dracula .main>div.popper,html.dracula body .modal>div.popper {
    background-color: #1a1c24;
    border: .0625rem solid #44475a;
    color: #f8f8f2
}

html.dracula .main>div.popper>div,html.dracula body .modal>div.popper>div {
    border-top: solid .0625rem #44475a
}

html.dracula .main>div.popper>div:first-child,html.dracula body .modal>div.popper>div:first-child {
    border-top: none
}

html.dracula .main>div.popper .split,html.dracula body .modal>div.popper .split {
    display: flex
}

html.dracula .main>div.popper .split>div,html.dracula body .modal>div.popper .split>div {
    flex-wrap: nowrap
}

html.dracula .main>div.popper .split>div:nth-of-type(2),html.dracula body .modal>div.popper .split>div:nth-of-type(2) {
    border-left: solid .0625rem #44475a;
    margin-left: .375rem;
    padding-left: .375rem
}

html.dracula .shipPopper .divider {
    border-bottom: solid .0625rem #44475a
}

html.dracula .sliderbar>span {
    position: relative;
    display: inline-block;
    width: 5%;
    bottom: 1.125rem;
    margin: 0 .375rem
}

html.dracula .sliderbar .b-slider {
    display: inline-block;
    width: 80%
}

.ShipYardTab #shipList .compact button,html.dracula .sliderbar .b-slider .b-slider-track {
    height: 1rem
}

html.dracula .sliderbar .is-primary .b-slider-fill {
    background: #50fa7b
}

html.dracula .sliderbar.thin>span {
    bottom: .625rem
}

html.dracula .sliderbar.thin .b-slider {
    margin-top: .5rem;
    margin-bottom: .5rem
}

html.dracula .msgQueueFilters span,html.dracula .tabs a {
    color: #f8f8f2
}

html.dracula .msgQueueFilters span.is-active,html.dracula .tabs li.is-active a {
    border-bottom-color: #bd93f9;
    color: #bd93f9
}

html.dracula .msgQueueFilters span:hover,html.dracula .tabs a:hover {
    border-bottom-color: #9573c5;
    color: #9573c5
}

html.dracula .button {
    background-color: #3f4253;
    color: #f8f8f2
}

html.dracula .button.is-light {
    background-color: #f8f8f2
}

html.dracula .button.is-hovered,html.dracula .button:hover {
    background-color: #44475a;
    color: #9573c5
}

html.dracula .button.is-focused,html.dracula .button:focus {
    border-color: #44475a
}

html.dracula .basic-button {
    border: #44475a solid .0625rem
}

html.dracula .basic-button:hover {
    border: #bd93f9 solid .0625rem;
    background-color: #1a1c24
}

html.dracula .text-button:hover {
    cursor: pointer;
    color: #9573c5;
    text-decoration: underline
}

html.dracula .label {
    color: #f8f8f2
}

html.dracula .checkbox:hover,html.dracula .radio:hover {
    color: #bd93f9
}

html.dracula .dropdown-content {
    background-color: #3f4253
}

html.dracula .b-tooltip.is-right:before {
    border-right: 5px solid #282828
}

html.dracula .b-tooltip.is-left:before {
    border-left: 5px solid #282828
}

html.dracula .b-tooltip.is-bottom:before {
    border-bottom: 5px solid #282828
}

html.dracula .b-tooltip.is-primary .tooltip-content {
    background: #282828;
    border: .0625rem solid #44475a;
    color: #f8f8f2
}

html.dracula .add,html.dracula .sub {
    transition: all 200ms ease
}

html.dracula .add:hover,html.dracula .sub:hover {
    background-color: #44475a;
    color: #9573c5
}

html.dracula .promoBar,html.dracula .topBar {
    background-color: #6272a4
}

html.dracula .pause,html.dracula .play {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

html.dracula .play {
    bottom: .125rem;
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-left: .375rem solid #50fa7b;
    border-bottom: .25rem solid transparent
}

html.dracula .pause {
    box-sizing: content-box;
    bottom: .0625rem;
    width: .125rem;
    height: .625rem;
    border-right: .125rem solid #f55;
    border-left: .125rem solid #f55
}

html.dracula .meter.low {
    color: #f55
}

html.dracula .meter.neutral {
    color: #ffa26c
}

html.dracula .meter.high {
    color: #bd93f9
}

html.dracula .buildList .hl-ca,html.dracula .main .content .action a.button.hl-ca .aTitle,html.dracula .modal .action a.button.hl-ca .aTitle {
    color: #50fa7b
}

html.dracula .buildList .hl-cna,html.dracula .main .content .action a.button.hl-cna .aTitle,html.dracula .modal .action a.button.hl-cna .aTitle {
    color: #f55
}

html.dracula .graphContainer span.special:hover .gear,html.dracula .msgQueue span.special:hover .gear {
    fill: #bd93f9
}

html.dracula .main .content .action a.button span.count,html.dracula .main .content .divider h2,html.dracula .modal .action a.button span.count {
    background: #282a36
}

html.dracula .main .content .action div.special,html.dracula .modal .action div.special {
    background: #282a36;
    border: .0625rem solid #44475a
}

html.dracula .graphContainer span.special .gear,html.dracula .main .content .action div.special .gear,html.dracula .modal .action div.special .gear,html.dracula .msgQueue span.special .gear {
    fill: #f09d51
}

html.dracula .main .content .action div.special:hover,html.dracula .modal .action div.special:hover {
    border: .0625rem solid #6272a4
}

html.dracula .main .content .action div.special:hover .gear,html.dracula .modal .action div.special:hover .gear {
    fill: #bd93f9
}

html.dracula .main .content .action span.on,html.dracula .modal .action span.on {
    background: #282a36;
    border: .0625rem solid #44475a;
    color: #50fa7b
}

html.dracula .main .content .action span.on.altwarn,html.dracula .main .content .action span.on.warn,html.dracula .modal .action span.on.altwarn,html.dracula .modal .action span.on.warn {
    color: #af5d00
}

html.dracula .main .content .action span.off,html.dracula .modal .action span.off {
    background: #282a36;
    border: .0625rem solid #44475a;
    color: #f55
}

html.dracula .main .content .action span.off:hover,html.dracula .main .content .action span.on:hover,html.dracula .modal .action span.off:hover,html.dracula .modal .action span.on:hover {
    border: .0625rem solid #6272a4
}

html.dracula .main .content .action.hl .button,html.dracula .modal .action.hl .button {
    border: solid 1px #50fa7b
}

html.dracula .main .content .action.cna a.button,html.dracula .modal .action.cna a.button {
    background: #1a1c24
}

html.dracula .main .content .action.cna a.button.hl-ca .aTitle,html.dracula .modal .action.cna a.button.hl-ca .aTitle {
    color: #50fa7b
}

html.dracula .main .content .action.cna .off,html.dracula .main .content .action.cna .on,html.dracula .main .content .action.cna .special,html.dracula .modal .action.cna .off,html.dracula .modal .action.cna .on,html.dracula .modal .action.cna .special {
    border-color: #44475a
}

html.dracula .main .content .action.cna .oldTech span.aTitle,html.dracula .modal .action.cna .oldTech span.aTitle {
    color: #f8f8f2
}

html.dracula .main .content .action.cna a.button.hl-cna .aTitle,html.dracula .main .content .action.cnam span.aTitle,html.dracula .modal .action.cna a.button.hl-cna .aTitle,html.dracula .modal .action.cnam span.aTitle {
    color: #f55
}

html.dracula .main .content .enemyFortress {
    background-color: #3f4253
}

html.dracula .main .content .green,html.dracula .main .content .synth {
    box-shadow: 0 0 6px #50fa7b
}

html.dracula .main .content .green>span,html.dracula .main .content .synth>span {
    text-shadow: 1px 1px #50fa7b
}

html.dracula .main .content .red {
    box-shadow: 0 0 6px #f55
}

html.dracula .main .content .red>span {
    text-shadow: 1px 1px #f55
}

html.dracula .main .content .yellow {
    box-shadow: 0 0 6px #f1fa8c
}

html.dracula .main .content .yellow>span {
    text-shadow: 1px 1px #f1fa8c
}

html.dracula .main .content .orange {
    box-shadow: 0 0 6px #ffa26c
}

html.dracula .main .content .orange>span {
    text-shadow: 1px 1px #ffa26c
}

html.dracula .main .content .purple {
    box-shadow: 0 0 6px #ff79c6
}

html.dracula .main .content .purple>span {
    text-shadow: 1px 1px #ff79c6
}

html.dracula .main .content .blue,html.dracula .main .content .precog {
    box-shadow: 0 0 6px #bd93f9
}

html.dracula .main .content .blue>span,html.dracula .main .content .precog>span {
    text-shadow: 1px 1px #bd93f9
}

html.dracula .main .content .cna .precog>span {
    text-shadow: none
}

html.dracula .main .garrison .header,html.dracula .main .government .header {
    border-bottom: .0625rem solid #44475a
}

html.dracula .main .market-header {
    border-bottom: #44475a solid 1px
}

html.dracula .main .galaxyTrade {
    border-top: #44475a solid 1px
}

html.dracula .powerGrid {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem
}

html.dracula .powerGrid .circuit {
    min-width: 18.5rem;
    cursor: pointer
}

html.dracula .powerGrid .circuit.inactive {
    display: none
}

html.dracula .powerGrid .circuit>span {
    display: inline-block
}

html.dracula .powerGrid .circuit>span:first-child {
    width: 1.5rem
}

html.dracula .powerGrid .circuit .struct {
    width: 12rem
}

html.dracula .powerGrid .circuit .off,html.dracula .powerGrid .circuit .on {
    min-width: 2rem;
    text-align: center
}

html.dracula .powerGrid .circuit .off {
    color: #f55
}

html.dracula .powerGrid .circuit .on {
    color: #50fa7b
}

html.dracula .gridHeader {
    border-top: #44475a solid .0625rem;
    margin: .25rem 0 .25rem 1rem;
    padding-top: .25rem
}

html.dracula .powerGridHead {
    display: flex;
    justify-content: space-between
}

html.dracula .powerGridHeader {
    margin-left: 1rem;
    margin-bottom: .5rem
}

html.dracula .resetPowerGrid {
    margin-left: 1rem;
    margin-top: .75rem
}

.main .govOffice .options .storage .control input,html.dracula .resetPowerGrid .button {
    height: 1.5rem
}

html.dracula .fort .patrol .check {
    background-color: #000
}

html.dracula .market-item .order {
    border: #44475a solid .0625rem;
    transition: all 200ms ease
}

html.dracula .market-item .order:hover {
    border: #9573c5 solid .0625rem;
    background-color: #6272a4
}

html.dracula .inactive-row,html.dracula .market-item.alt,html.dracula .resource.alt {
    background-color: #1d2021
}

html.dracula .resource.showBar.prime {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#07080a calc(var(--percent-full) + 1px),#07080a 100%)
}

html.dracula .resource.showBar.alt {
    background-image: linear-gradient(to right,transparent 0%,transparent calc(var(--percent-full) - 1px),#000 calc(var(--percent-full) + 1px),#000 100%)
}

.main #msgQueueHeader .special,html.dracula .resource .bar {
    cursor: pointer
}

html.dracula .modal .actionSpace,html.dracula .modal-card-body,html.dracula .modal-card-foot,html.dracula .modal-card-head {
    background-color: #282a36
}

html.dracula .industry,html.dracula .modalBox {
    background: #282a36
}

html.dracula .industry .divide,html.dracula .industry .market-item,html.dracula .industry .smelting,html.dracula .modalBox .divide,html.dracula .modalBox .market-item,html.dracula .modalBox .smelting {
    border-top: #44475a solid .0625rem
}

html.dracula .industry {
    background: 0 0
}

html.dracula .industry .header,html.dracula .industry p,html.dracula .modalBox p {
    border-bottom: #44475a solid .0625rem
}

html.dracula .industry .avail span {
    margin: 0 2.5rem 0 2.125rem
}

html.dracula .govTask {
    margin-top: .25rem
}

html.dracula .govTask .button {
    height: 1.5rem;
    margin-left: .5rem
}

html.dracula .fileImport {
    background-color: #282a36
}

html.dracula .star1 {
    fill: #282a36;
    stroke: #fff
}

html.dracula .star2 {
    fill: #fff
}

html.dracula .star3 {
    fill: #cd7f32
}

html.dracula .star4 {
    fill: silver
}

html.dracula .star5 {
    fill: #d4af37
}

html.dracula .refresh svg {
    fill: #8be9fd
}

html.dracula .bldQueue::-webkit-scrollbar-track,html.dracula .dropdown-content::-webkit-scrollbar-track,html.dracula .hscroll::-webkit-scrollbar-track,html.dracula .resTabs>.tabs::-webkit-scrollbar-track,html.dracula .resTabs>section::-webkit-scrollbar-track,html.dracula .sticky::-webkit-scrollbar-track,html.dracula .vscroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #282a36
}

html.dracula .bldQueue::-webkit-scrollbar,html.dracula .dropdown-content::-webkit-scrollbar,html.dracula .resTabs>.tabs::-webkit-scrollbar,html.dracula .resTabs>section::-webkit-scrollbar,html.dracula .sticky::-webkit-scrollbar,html.dracula .vscroll::-webkit-scrollbar {
    width: 6px;
    background-color: #282a36
}

html.dracula .hscroll::-webkit-scrollbar {
    height: 8px;
    background-color: #282a36
}

html.dracula .bldQueue::-webkit-scrollbar-thumb,html.dracula .dropdown-content::-webkit-scrollbar-thumb,html.dracula .hscroll::-webkit-scrollbar-thumb,html.dracula .resTabs>.tabs::-webkit-scrollbar-thumb,html.dracula .resTabs>section::-webkit-scrollbar-thumb,html.dracula .sticky::-webkit-scrollbar-thumb,html.dracula .vscroll::-webkit-scrollbar-thumb {
    background-color: #44475a
}

html.dracula .bldQueue,html.dracula .hscroll,html.dracula .resTabs>.tabs,html.dracula .resTabs>section,html.dracula .sticky,html.dracula .vscroll {
    scrollbar-color: #44475a #282a36
}

html.dracula .buttonList .is-selected,html.dracula .modal .buttonList .is-selected {
    border-color: #50fa7b
}

html.dracula .notification,html.dracula input,html.dracula select,html.dracula textarea {
    background: #f8f8f2
}

html.dracula .add,html.dracula .current.infoOnly,html.dracula .sub {
    border: #44475a solid .0625rem
}

html.dracula .current {
    border-top: #44475a solid .0625rem;
    border-bottom: #44475a solid .0625rem
}

html.dracula .popper .grad-from-left {
    background-image: linear-gradient(90deg,#f55 45%,#f8f8f2 55%)
}

html.dracula .popper .grad-from-left-warn {
    background-image: linear-gradient(90deg,#e0a361 45%,#f55 55%)
}

html.dracula .popper .grad-from-right {
    background-image: linear-gradient(90deg,#f8f8f2 45%,#f55 55%)
}

html {
    overflow-y: hidden;
    box-sizing: border-box;
    font-size: 16px
}

body,button,input,select,textarea {
    font-family: "Lato",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Helvetica","Arial",sans-serif
}

body {
    line-height: initial;
    touch-action: manipulation
}

html.large_all {
    font-size: 18px
}

.content h2,.content h3,h2,h3 {
    font-size: 1rem;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 0
}

.is-sr-only,.main .graphControls div h2 {
    margin: 0
}

div,span {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.button,a {
    transition: all 200ms ease
}

.button.right {
    float: right
}

a {
    cursor: pointer;
    text-decoration: none
}

.tabs a {
    border-bottom: none;
    padding: .5em 1em;
    vertical-align: top
}

.arpa ul,.content li,.main .hellReports .reportDisplay .reportStats h2,.resTabs ul {
    margin-top: 0
}

.block:not(:last-child),.box:not(:last-child),.breadcrumb:not(:last-child),.content:not(:last-child),.highlight:not(:last-child),.level:not(:last-child),.list:not(:last-child),.message:not(:last-child),.notification:not(:last-child),.progress:not(:last-child),.subtitle:not(:last-child),.table-container:not(:last-child),.table:not(:last-child),.title:not(:last-child) {
    margin-bottom: 1rem
}

.tabs:not(:last-child) {
    margin-bottom: .5rem;
    overflow: hidden
}

.modal .animation-content {
    overflow: hidden
}

@media only screen and (max-width: 113rem) {
    .actionWidth {
        max-width:38rem
    }
}

@media only screen and (max-width: 88.5rem) {
    .actionWidth {
        max-width:51rem
    }
}

@media only screen and (max-width: 76.375rem) {
    .actionWidth {
        max-width:38rem
    }
}

@media only screen and (max-width: 59rem) {
    .actionWidth {
        max-width:25rem
    }
}

@media only screen and (max-width: 48rem) {
    .actionWidth {
        max-width:38rem
    }
}

@media only screen and (max-width: 45rem) {
    .actionWidth {
        max-width:25rem
    }
}

@media only screen and (max-width: 32rem) {
    .actionWidth {
        max-width:12rem
    }
}

.keyMap,.msgInput {
    width: 7.5rem;
    display: inline-block;
    height: 1.25rem;
    margin-bottom: .25rem;
    text-align: center
}

.keyMap input,.msgInput input {
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: center
}

.add {
    display: inline-block;
    margin-right: .25rem;
    padding: 0 .375rem;
    border-radius: 0 .375rem .375rem 0;
    line-height: 1rem;
    cursor: pointer
}

.add span:first-child,.sub span:first-child {
    position: relative;
    bottom: .0625rem
}

.current,.sub {
    display: inline-block;
    line-height: 1rem
}

.sub {
    outline: 0;
    margin-left: .125rem;
    padding: 0 .375rem;
    border-radius: .375rem 0 0 .375rem;
    cursor: pointer
}

.current {
    min-width: 5rem;
    text-align: center;
    font-size: .875rem;
    padding: 0 .125rem;
    cursor: default
}

.current.infoOnly {
    border-radius: .375rem;
    padding: 0 .5rem
}

.factory .current svg {
    width: unset
}

.zero {
    cursor: pointer;
    margin-left: .75rem
}

.zero:hover {
    text-decoration: underline
}

.localization {
    margin-bottom: 1rem
}

.basic-button {
    display: inline-block;
    font-size: .875rem;
    margin: 0 .25rem;
    padding-top: .125rem;
    border-radius: .375rem;
    line-height: 1rem;
    height: 1.375rem;
    min-width: 4rem;
    text-align: center;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.tradeOffer .trade-offer {
    margin: 0;
    padding: .125rem 0
}

.tradeOffer .trade-offer .offer-item {
    width: 7.5rem
}

.tradeOffer .trade-offer .offer-vol {
    width: 4.5rem;
    border-right: 1px solid;
    margin-right: .125rem
}

#egg4 {
    right: 0
}

.doublePane {
    display: flex;
    align-items: center;
    justify-content: center
}

.doublePane>div {
    width: 50%
}

.doublePane>div.left {
    width: 70%
}

.doublePane>div.right {
    width: 30%
}

.doublePane,.main .content .tabs ul,.topPad {
    margin-top: .5rem
}

.main {
    margin: 1rem 1rem 1.25rem;
    overflow-y: hidden
}

.main .leftColumn {
    height: calc(100vh - 2.45rem)
}

.main .leftColumn .colHeader {
    display: flex;
    justify-content: space-between
}

.main>.columns {
    margin-bottom: 0
}

.main .localization,.main .queue,.main .theme {
    margin-bottom: 1rem
}

.main .localization i,.main .queue i,.main .theme i {
    margin-left: .25rem;
    padding-bottom: .25rem
}

.main .govOffice .options .bal_storage .ccmOption .field-body .control label,.main .localization .dropdown button,.main .queue .dropdown button,.main .theme .dropdown button {
    height: 1.5rem;
    padding: 0 .75rem
}

.main>.columns>:first-child {
    min-width: 18rem
}

.main .sep {
    margin: 0 .5rem
}

.main .race {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 0;
    width: 100%
}

.main .race>span {
    cursor: default
}

.main .race .power {
    text-align: right
}

.main .race .morale,.main .race .morale-contain {
    text-align: center
}

.main .queueCol div.bldQueue:first-child {
    margin-top: 2.625rem
}

.main .bldQueue,.main .msgQueue {
    resize: vertical;
    height: 7rem;
    border-top: solid .0625rem;
    border-bottom: solid .0625rem;
    overflow-y: auto
}

.main .bldQueue.right,.main .msgQueue.right {
    height: auto;
    border-bottom: none;
    padding: 1rem
}

.main .msgQueue {
    font-size: .75rem
}

.main .msgQueue.right {
    height: calc(100vh - 9rem)
}

.main #msgQueueHeader span {
    font-size: 1rem;
    margin-left: 1rem
}

.main #msgQueueFilters {
    padding: .25rem 0;
    border-bottom: solid .0625rem;
    font-size: .875rem
}

.main #msgQueueFilters span {
    cursor: pointer
}

.main #msgQueueFilters span:not(:last-child) {
    margin-right: 2rem
}

.main #pausequeue,.main #pauserqueue {
    margin-left: 1rem
}

.main .bldQueue,.main .bldQueue.right {
    padding-top: .25rem
}

.main .bldQueue li,.main .bldQueue.right li,.main .resQueue .buildList li {
    display: inline-block;
    height: 1rem;
    padding: 0 .25rem 0 0
}

.main .bldQueue li:not(:last-child) .queued:after,.main .bldQueue.right li:not(:last-child) .queued:after {
    content: " -> "
}

.main .bldQueue li:not(:last-child) .qany:after,.main .bldQueue.right li:not(:last-child) .qany:after {
    content: ", "
}

.main .resQueue .buildList,.main .resQueue h2 {
    margin-left: 2rem;
    margin-top: 0
}

.main .govOffice .spyopConfig li:not(:last-child):after,.main .resQueue .buildList li:not(:last-child) .queued:after {
    content: " -> "
}

.main .resQueue .buildList li:not(:last-child) .qany:after {
    content: ", "
}

.main .resTabs>section {
    position: sticky;
    top: 1rem;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    height: calc(100vh - 10rem)
}

.main .govTabs2>section {
    height: calc(100vh - 15rem)
}

.main .resources {
    margin-top: .25rem;
    padding-right: .25rem;
    height: calc(100vh - 5rem)
}

@media only screen and (max-width: 88.5rem) {
    .main .resources {
        height:calc(100vh - 16.5rem)
    }
}

@media only screen and (max-width: 48rem) {
    .main .resources {
        display:relative
    }
}

.main .resources .resource {
    display: flex;
    cursor: default
}

.main .resources .resource div {
    width: 70%;
    display: flex;
    justify-content: space-between
}

.main .resources .resource>:nth-child(2) {
    text-align: center;
    width: 4%
}

.main .resources .resource .interact {
    cursor: pointer
}

.main .resources .resource>:nth-child(3) {
    text-align: right;
    width: 26%
}

.main .resources .resource .craftable {
    width: 30%;
    text-align: right
}

.main .resources .resource .craftable>span {
    display: inline;
    margin-left: .25rem
}

.main .evolving {
    margin-top: 1rem;
    max-width: 51rem
}

@media only screen and (max-width: 113rem) {
    .main .evolving {
        max-width:38rem
    }
}

@media only screen and (max-width: 88.5rem) {
    .main .evolving {
        max-width:51rem
    }
}

@media only screen and (max-width: 76.375rem) {
    .main .evolving {
        max-width:38rem
    }
}

@media only screen and (max-width: 59rem) {
    .main .evolving {
        max-width:25rem
    }
}

@media only screen and (max-width: 48rem) {
    .main .evolving {
        max-width:38rem
    }
}

@media only screen and (max-width: 45rem) {
    .main .evolving {
        max-width:25rem
    }
}

@media only screen and (max-width: 32rem) {
    .main .evolving {
        max-width:12rem
    }
}

.main .evolving .progress {
    height: 1.2rem
}

.main .evolving::after {
    display: block;
    position: relative;
    top: -1.375rem;
    content: "Evolving";
    text-align: center;
    color: #af8d07;
    margin-bottom: -1.25rem
}

.main .content .settings {
    margin-left: 1rem;
    height: calc(100vh - 6.5rem)
}

.main .content .tab-content {
    padding: 0 .25rem 0 0
}

.main .content>.tab-content {
    padding: 0 .25rem 0 1rem
}

.main .content .tab-item {
    padding: 0 0 0 1rem
}

.main .content #oldTech {
    margin-bottom: 4rem
}

.main .content .mtab {
    height: calc(100vh - 10rem)
}

.main .content .action,.modal .action {
    display: inline-block;
    position: relative
}

.main .content .action .aTitle,.modal .action .aTitle {
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1rem
}

.main .content .action a.button,.modal .action a.button {
    width: 12.625rem;
    margin: .375rem .375rem 0 0
}

.main .content .action span.oldTech,.modal .action span.oldTech {
    width: 12.625rem;
    cursor: default;
    display: inline-flex;
    margin: 0 1rem 0 0
}

.main .content .action a.button span.count,.main .content .action span.oldTech span.count,.modal .action a.button span.count,.modal .action span.oldTech span.count {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    height: 1.0625rem;
    line-height: .875rem;
    padding: 0 .25rem;
    border-radius: 0 .25rem 0 .4375rem;
    overflow: hidden
}

.main .content .action span.off,.main .content .action span.on,.modal .action span.off,.modal .action span.on {
    position: absolute;
    cursor: pointer;
    display: block;
    height: 1.0625rem;
    line-height: .8125rem;
    padding: 0 .25rem;
    overflow: hidden
}

.main .content .action div.special,.modal .action div.special {
    position: absolute;
    cursor: pointer;
    display: block;
    padding: 0 .25rem;
    overflow: hidden
}

.main .content .action div.special,.modal .action div.special {
    height: 1.125rem;
    line-height: .9375rem;
    top: .5rem;
    left: 0;
    border-radius: .25rem 0 .4375rem 0;
    width: 1.1875rem
}

.main .content .action div.special svg,.modal .action div.special svg {
    position: relative;
    left: -.125rem
}

.main .content .action span.on,.modal .action span.on {
    bottom: 0;
    right: .375rem;
    border-radius: .4375rem 0 .25rem 0
}

.main .content .action span.on .flair,.modal .action span.on .flair {
    position: relative;
    left: .25rem;
    top: 0
}

.main .content .action span.off,.modal .action span.off {
    bottom: 0;
    left: 0;
    border-radius: 0 .4375rem 0 .25rem
}

.main .content .action span.off .flair,.modal .action span.off .flair {
    position: relative;
    left: .125rem;
    top: 0
}

.main .content .action div.repair,.modal .action div.repair {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .25rem
}

.main .content .action div.repair .progress,.modal .action div.repair .progress {
    height: .25rem;
    background: 0 0
}

.main .content .action .flair,.modal .action .flair {
    position: absolute;
    right: .625rem;
    top: .5rem;
    height: .5rem;
    line-height: .5rem;
    margin: 0;
    padding: 0
}

.main .content .action .flair:nth-of-type(2),.modal .action .flair:nth-of-type(2) {
    right: .625rem;
    top: 1.1875rem
}

.main .content .action .flair:nth-of-type(3),.modal .action .flair:nth-of-type(3) {
    right: .625rem;
    top: 1.875rem
}

.main .content .action .flair:nth-of-type(4),.modal .action .flair:nth-of-type(4) {
    right: 1.3125rem;
    top: .5rem
}

.main .content .action .flair:nth-of-type(5),.modal .action .flair:nth-of-type(5) {
    right: 1.3125rem;
    top: 1.1875rem
}

.main .content .action .flair:nth-of-type(6),.modal .action .flair:nth-of-type(6) {
    right: 1.3125rem;
    top: 1.875rem
}

.main .content .action.disabled,.modal .action.disabled {
    display: none
}

.main .content .enemyFortress {
    display: inline-block;
    position: relative;
    min-width: 17.375rem;
    height: 3.125rem;
    margin: .375rem .375rem 0 0;
    border-radius: .25rem
}

.main .content .enemyFortress .fortRow>span,.main .fort .training span,.main .garrison .training>span,.main .job .job_label span {
    display: inline-block
}

.main .content .enemyFortress .fortRow :first-child {
    margin-left: .5rem;
    margin-right: 0;
    float: left
}

.main .content .enemyFortress .fortRow :last-child {
    margin-left: .25rem;
    margin-right: .5rem;
    float: right
}

.main .content .enemyFortress .second {
    line-height: 2rem
}

.main .content .enemyFortress .second a.button {
    height: 1.5rem;
    margin-top: .25rem;
    padding-left: .25rem;
    padding-right: .25rem;
    min-width: 4.5rem
}

.main .content .challenge,.main .content .geck {
    width: 100%;
    text-align: center
}

@media only screen and (max-width: 113rem) {
    .main .content .challenge {
        max-width:38rem
    }
}

@media only screen and (max-width: 88.5rem) {
    .main .content .challenge {
        max-width:51rem
    }
}

@media only screen and (max-width: 76.375rem) {
    .main .content .challenge {
        max-width:38rem
    }
}

@media only screen and (max-width: 59rem) {
    .main .content .challenge {
        max-width:25rem
    }
}

@media only screen and (max-width: 48rem) {
    .main .content .challenge {
        max-width:38rem
    }
}

@media only screen and (max-width: 45rem) {
    .main .content .challenge {
        max-width:25rem
    }
}

@media only screen and (max-width: 32rem) {
    .main .content .challenge {
        max-width:12rem
    }
}

.main .content .challenge .simButton {
    margin-top: .5rem
}

.main .content .divider {
    width: 100%;
    text-align: center;
    border-bottom: .0625rem solid;
    margin: .625rem 0
}

.main .content .divider h2 {
    position: relative;
    bottom: -.5rem;
    padding: 0 .625rem
}

.main .jobList {
    max-width: 19rem
}

.main .job {
    margin-left: .5rem;
    display: flex;
    min-width: 18rem;
    align-items: center
}

.main .job .controls {
    margin-bottom: 1px
}

.main .job .controls .sub {
    border-right: 0
}

.main .job .job_label {
    cursor: default;
    display: flex;
    align-items: center
}

.main .job .job_label :first-child {
    margin-right: .5rem;
    margin-bottom: 0;
    width: 10rem;
    font-size: 1rem;
    font-weight: 400;
    display: inline-block
}

.main .job .job_label :nth-child(2) {
    min-width: 4.5rem;
    text-align: center
}

.main .job .job_label .count>span {
    margin-left: 1rem;
    width: 1rem
}

.main .job .job_label .count svg {
    width: 1rem
}

.main .armHead>span,.main .sshifter {
    margin-left: 1rem
}

.main .sshifter button {
    height: 1.5rem;
    margin-left: .25rem
}

.main .foundry {
    margin-top: 1rem
}

.main #civics {
    padding: .5rem
}

.main .civics {
    padding-top: 0;
    padding-bottom: 0
}

.main .civics .revolution {
    margin-left: .375rem
}

.main .government,.main .hellReports .reportDisplay p {
    margin-bottom: 0
}

.main .government .header {
    margin-bottom: .5rem
}

.main .government .govType {
    margin-bottom: .25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.main .government .govType>div:first-child {
    margin-right: .5rem
}

.main .government .foreign button,.main .government .govType button {
    margin-top: .25rem;
    height: 1.75rem;
    line-height: 1.75rem;
    padding: 0 .5rem
}

.main .government .taxRate {
    height: 1.25rem;
    display: flex
}

.main .government .taxRate :first-child {
    cursor: default;
    display: inline-block;
    line-height: 1.25rem
}

.main .government .foreign {
    margin-bottom: 1rem
}

.main .government .foreign .gaction {
    display: inline-block;
    width: 8rem
}

.main .government .foreign .glabel {
    display: inline-block;
    width: 9rem
}

.main .government .foreign .glevel {
    display: inline-block;
    width: 8rem
}

.main .fort {
    width: 100%;
    min-height: 1rem;
    margin: .25rem 0;
    padding: .25rem 0;
    border-top: 1px solid;
    border-bottom: 1px solid
}

.main .fort .current {
    position: relative;
    bottom: .0625rem
}

.main .fort>div {
    margin-top: .25rem
}

.main .fort>div:first-child {
    margin-top: 0
}

.main .fort>div:first-child span:nth-child(1) {
    margin-right: .5rem
}

.main .fort .defense,.main .garrison button.first {
    margin-right: .5rem
}

.main .fort .training progress {
    display: inline-block;
    width: 90%
}

.main .fort .patrol {
    position: relative;
    top: 4px;
    left: 4px
}

.main #c_garrison.garrison,.main .fort .merctip {
    margin-top: .25rem
}

.main .fort .merc,.main .fort .observe {
    height: 1.25rem;
    margin-left: .25rem;
    line-height: 0
}

.main .fort .training .observe {
    bottom: .25rem
}

.main .fort .bunks {
    margin: .25rem 0 .125rem
}

.main .garrison .header {
    margin-bottom: .5rem
}

.main .garrison .bunks {
    margin: .75rem .75rem 0
}

.main .garrison .bunk {
    margin-bottom: 0;
    margin-right: .5rem
}

.main .garrison .bunk>div {
    padding-bottom: 0
}

.main .garrison .bunk .hire {
    padding-left: 0;
    margin-top: 1rem
}

.main .garrison .barracks {
    margin-bottom: .25rem
}

.main .garrison .training {
    margin-bottom: .75rem
}

.main .garrison .training>progress {
    display: inline-block;
    width: calc(100% - 4rem)
}

.main .garrison button {
    height: 2rem;
    line-height: 1rem
}

.main .garrison .war {
    padding-right: 0;
    margin: .75rem .75rem 0
}

.main .garrison .war .tactics {
    margin: .5rem 0;
    height: 1.25rem;
    display: flex
}

.main .garrison .war .tactics>:first-child {
    display: inline-block;
    line-height: 1.125rem;
    width: 4.75rem
}

.main .garrison .launch {
    min-width: 10rem;
    margin-top: .75rem;
    margin-right: .5rem;
    text-align: center
}

.main .garrison .launch .campaign {
    width: 10rem;
    white-space: normal;
    margin-top: .5rem
}

.main #c_garrison.garrison>div:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.main .fleet {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 1rem;
    margin: .25rem 0;
    padding: .25rem 0;
    border-top: 1px solid;
    border-bottom: 1px solid
}

.main .fleet .area {
    width: 8rem
}

.main .fleet .area>span {
    display: inline-block;
    min-width: 8rem;
    white-space: nowrap
}

.main .fleet .area .ship {
    text-align: center
}

.main .fleet .area .ship .current {
    min-width: 2.5rem;
    width: 2.5rem;
    font-size: 1rem
}

.main .pirate {
    margin-right: .75rem;
    margin-left: .75rem
}

.industry p,.main .militaryTab .garrison .battle,.modalBox p {
    margin-bottom: .5rem
}

.main .militaryTab .garrison .battle .launch,.main .militaryTab .garrison .battle .war {
    margin: .25rem 0 0 .75rem
}

.main .militaryTab .garrison .columns {
    flex-wrap: wrap
}

.main .mechTab,.main .militaryTab {
    margin-left: 1rem
}

.main #hellTabs>section {
    height: 100vh
}

.main .hellReports {
    display: flex;
    justify-content: space-between
}

.main #hellAnalysis,.main .hellReports>div {
    height: calc(100vh - 10rem)
}

.main .hellReports .reportList {
    top: 0;
    width: 25%;
    box-sizing: border-box;
    border-right: .0625rem solid;
    margin-right: 1rem
}

.main .hellReports .reportDisplay {
    width: 75%;
    font-size: .9rem
}

.main .hellReports .reportDisplay span:not(:last-child) {
    margin-right: .5rem
}

.main .hellReports .reportDisplay .reportStats {
    padding-bottom: .5rem;
    border-bottom: .0625rem solid;
    margin-bottom: .5rem
}

.main .hellReports .reportDisplay .reportStats h2:not(:last-child) {
    margin-right: 1rem
}

.main .hellReports .right {
    margin-left: .5rem;
    padding-left: .5rem;
    border-left: .0625rem solid
}

.main .hellAnalysis {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.main .hellAnalysis .analysisColumn {
    width: 50%;
    margin: 0 10px
}

.main .hellAnalysis .analysisColumn:not(:last-child) {
    border-right: .0625rem solid
}

.main .hellAnalysis h2:not(:first-child) {
    margin: 0 0 0 1rem
}

.main #hellAnalysis>div:not(:last-child) {
    margin-bottom: .5rem;
    border-bottom: .0625rem solid;
    padding-bottom: .5rem
}

.main .graphingArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%
}

.main .graphContainer {
    width: 45%
}

.main .graphControls div {
    display: flex;
    justify-content: space-between
}

.main .graphControls .graphTitle {
    justify-content: center
}

.main .graph {
    margin: 1%;
    padding: 3%;
    border: .0625rem solid
}

.main .mechAssembly {
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    border-bottom: .0625rem solid
}

.main .mechAssembly .button {
    height: 2rem
}

.main .gFort,.main .mechAssembly .bayOptions {
    margin-top: .5rem
}

.main .mechAssembly .bayOptions .dropdown {
    margin: 0 .5rem .25rem 0
}

.main .mechAssembly .mechAssemble {
    margin: 1rem 0 0
}

.main .mechAssembly .checkbox {
    margin-left: .5rem;
    bottom: -.25rem
}

.main .mechList .mechRow .gearList {
    display: inline-flex
}

.main .mechList .mechRow .gearList.titan {
    display: inline-grid
}

.main .mechList .mechRow .gearList>div {
    margin: 0 .125rem
}

.main .gFort {
    padding-top: .5rem;
    border-bottom: 0
}

.main .gFort .pad {
    margin-right: .25rem
}

.main .mad {
    margin-top: 1rem;
    max-width: 28rem;
    padding: 1rem;
    border: .0625rem solid #fff;
    border-radius: .5rem;
    background: repeating-linear-gradient(45deg,#fbfd84,#fbfd84 10px,#000 10px,#000 20px)
}

.main .mad .warn {
    background: #000;
    color: #fff;
    border-radius: .5rem;
    padding: .25rem;
    font-size: .75rem;
    text-align: center;
    margin-bottom: .25rem
}

.main .mad .defcon {
    display: inline-block;
    width: 50%;
    text-align: center
}

.main .armed .mad {
    border-color: #8f0000;
    background: repeating-linear-gradient(45deg,#8f0000,#8f0000 10px,#000 10px,#000 20px)
}

.main .pad {
    margin-left: 1rem
}

.main .market-header {
    padding-bottom: .5rem;
    margin: .5rem 1rem
}

.main .market-header .trade {
    position: relative;
    bottom: -.125rem;
    margin-left: 1rem
}

.main #achievePanel>div,.main .market-header .b-numberinput {
    width: 100%
}

.main .market-header .market {
    margin-left: 1rem;
    margin-right: 1rem
}

.main .market-header .market .button,.main .market-header .market input {
    height: 1.6875rem
}

.main .market-header .help {
    margin-left: 1rem
}

.main .galaxyTrade {
    margin-right: 0
}

.main .trade-header {
    margin: .5rem 0;
    justify-content: center
}

.main .trade-offer {
    margin: 0;
    padding: .125rem 0
}

.main .trade-offer .offer-item {
    width: 7.5rem
}

.main .trade-offer .offer-vol {
    width: 4.5rem;
    border-right: 1px solid;
    margin-right: .125rem
}

.main .setting {
    margin: 0 .25rem .5rem 0
}

.main .importExport,.main .stringPack {
    margin-top: 1rem
}

.main #customFile,.main #stringPackFile {
    margin-top: .75rem
}

.main .reset {
    margin-top: 3rem
}

.main .reset .notification {
    margin-top: .5rem
}

.main .cstat {
    margin-top: 1rem
}

.main .achievement {
    position: relative;
    border: .0625rem solid;
    padding: .125rem;
    margin: .125rem 0;
    width: 100%
}

.main .achievement span,span.inline {
    display: inline-block
}

.main .achievement span>span.row {
    display: block
}

.main .achievement>:first-child {
    margin-left: .5rem;
    width: 100%
}

.main .achievement>:nth-child(2),.main .achievement>div.perk {
    margin-left: .5rem
}

.main .achievement .flair {
    display: block;
    position: absolute;
    right: .1875rem;
    top: .1875rem;
    height: .5rem;
    line-height: .5rem;
    margin: 0;
    padding: 0
}

.main .achievement .flair:nth-of-type(2) {
    right: .1875rem;
    top: 1.375rem
}

.main .achievement .flair:nth-of-type(3) {
    right: 1.3125rem;
    top: .1875rem
}

.main .achievement .flair:nth-of-type(4) {
    right: 1.3125rem;
    top: 1.375rem
}

.main .achievement .flair:nth-of-type(5) {
    right: 2.4375rem;
    top: .1875rem
}

.main .achievement .flair:nth-of-type(6) {
    right: 2.4375rem;
    top: 1.375rem
}

.main .achievement .star1,.main .achievement .star2,.main .achievement .star3,.main .achievement .star4,.main .achievement .star5 {
    width: 1rem
}

.main .governor.candidates,.main>div.popper .modal_bd,body .modal>div.popper .modal_bd {
    display: table;
    width: 100%
}

.main .governor .appoint {
    display: table-row
}

.main .governor .appoint>span {
    display: table-cell
}

.main .governor .appoint.header>span {
    padding-bottom: .5rem
}

.main .governor .appoint button {
    height: 1.5rem;
    margin-bottom: .25rem
}

.main .govOffice .head {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.main .govOffice .head .fire button {
    display: block;
    line-height: 1rem;
    padding: 0 .5rem
}

.main .govOffice .tConfig {
    margin-top: .5rem
}

.main .govOffice .spyopConfig {
    margin-left: 0
}

.main .govOffice .spyopConfig li {
    cursor: pointer;
    display: inline-block;
    height: 1rem;
    padding: 0 .25rem 0 0
}

.main .govOffice .options {
    margin-top: 1rem
}

.main .govOffice .options .storage {
    display: flex;
    clear: right
}

.main .govOffice .options .storage>div {
    width: 50%
}

.main .govOffice .options .storage .control {
    margin-right: 1rem
}

.main .govOffice .options .hRow>:first-child,.main .govOffice .options .hRow>:nth-child(2) {
    display: inline-block
}

.main .govOffice .options .hRow>:nth-child(2) {
    float: right
}

.main .govOffice .options .bal_storage {
    display: inline-flex;
    flex-wrap: wrap
}

.main .govOffice .options .bal_storage .ccmOption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 50%
}

.main .govOffice .options .bal_storage .ccmOption>span {
    display: inline-block;
    width: 7.5rem;
    overflow-wrap: anywhere;
    line-height: 1rem
}

.main .govOffice .options .bal_storage .ccmOption .field-body .field {
    display: flex;
    flex-wrap: wrap;
    width: 5rem
}

.main .govOffice .options .bal_storage .ccmOption .field-body .control {
    width: .5625rem;
    margin-right: 1rem
}

.main .govOffice .options .bal_storage .ccmOption:not(.m) .field-body .b3 label {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.main .govOffice .options .bal_storage .ccmOption:not(.m) .field-body .b5 label {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.main .govOffice .options .bal_storage .ccmOption.m {
    height: 2.125rem;
    line-height: 2.125rem
}

.main .govOffice .options .bal_storage .ccmOption.m .field-body .control label {
    height: 1rem;
    font-size: .75rem
}

.main .govOffice .options .bal_storage .ccmOption.m .field-body .b1 label {
    border-bottom-left-radius: 0
}

.main .govOffice .options .bal_storage .ccmOption.m .field-body .b3 label {
    border-top-right-radius: 4px
}

.main .govOffice .options .bal_storage .ccmOption.m .field-body .b4 label {
    border-bottom-left-radius: 4px
}

.main .govOffice .options .bal_storage .ccmOption.m .field-body .b6 label {
    border-top-right-radius: 0
}

.main .govOffice .options .trash .has-addons {
    display: initial
}

.main .govOffice .options .trash .has-addons .trashButton {
    cursor: pointer
}

.main #perksPanel .achievement {
    margin: .25rem 0
}

.main .city,.main .space,.main .tech {
    margin-top: .625rem
}

.main .city:first-child,.main .space:nth-child(2),.main .tech:first-child {
    margin-top: 0
}

.main .regionControl,.main .regionSupport {
    margin-left: .5rem
}

.main .space,.main>div.popper div.aTable span,body .modal>div.popper div.aTable span {
    display: flex
}

.main .space .syndThreat {
    margin-left: 1rem
}

.large_log .main .msgQueue {
    font-size: 1rem
}

.large_all .main .content .action a.button,.large_all .main .content .action span.oldTech,.large_all .modal .action a.button,.large_all .modal .action span.oldTech {
    width: 11.75rem;
    margin: .25rem .25rem 0 0
}

.large_all .main .content .action span.on,.large_all .modal .action span.on {
    right: .25rem
}

.large_all .main .content .action div.special,.large_all .modal .action div.special {
    top: .25rem
}

.large_all .main .msgQueue {
    font-size: .9rem
}

.graphCreator>div:not(:last-child) {
    margin-bottom: .5rem;
    border-bottom: .0625rem solid;
    padding-bottom: .5rem
}

.pylon .current {
    width: 5.25rem
}

.modalBody .gap {
    margin: 0 .25rem .5rem
}

.modalBody.max40 {
    max-width: 40rem
}

.modalBody .wrap {
    max-width: 25.5rem;
    margin: 0 auto
}

.popper {
    z-index: 100000
}

.popper .craft-elm {
    white-space: nowrap
}

.popper .grad-from-left,.popper .grad-from-left-warn,.popper .grad-from-right {
    background-clip: text;
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent
}

.storage-header {
    margin-bottom: .25rem
}

.storage-header button {
    font-size: .875rem
}

.storage-header .crate {
    margin-left: 13rem
}

.storage-header .container {
    margin-left: 3rem
}

.market-item {
    margin: .125rem 0 0 1rem;
    display: flex;
    cursor: default
}

.market-item .res {
    cursor: default;
    margin-right: .5rem;
    width: 8rem
}

.market-item .buy,.market-item .res,.market-item .sell {
    display: inline-flex
}

.market-item .sell {
    margin-left: .5rem
}

.market-item .route {
    position: relative;
    bottom: 1px
}

.market-item .order {
    display: inline-block;
    font-size: .875rem;
    margin: 0 .25rem;
    padding-top: .125rem;
    border-radius: .375rem;
    line-height: 1rem;
    height: 1.375rem;
    text-align: center;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-width: 4.5rem
}

.market-item .trade {
    margin-left: 1rem;
    min-width: 9.375rem
}

.market-item .trade .current {
    width: 3rem
}

.market-item .trade .add,.market-item .trade .sub {
    position: relative;
    top: .0625rem;
    padding: 0 .375rem;
    line-height: 1rem
}

.arpa .tabs>ul,.market-item .trade .mass,.resTabs .tabs>ul {
    margin-left: 1rem
}

.market-item .crtTotal,.market-item .tradeTotal.nt {
    margin-left: 11.5rem
}

.market-item .cntTotal {
    margin-left: 2.0625rem
}

.market-item .cntTotal span:nth-child(2),.market-item .crtTotal span:nth-child(2) {
    display: inline-block;
    width: 6rem;
    text-align: center
}

.market-item .tradeTotal {
    margin-left: 23.25rem
}

.modal .actionSpace {
    padding: .25rem;
    min-width: 38rem;
    border-radius: .5rem
}

.modal .actionSpace .action a.button {
    margin: .25rem
}

.modal .modalBody {
    max-height: calc(100vh - 5rem)
}

.modal .msgInput .checkbox {
    margin: 0 3rem
}

.modal .msgInput .checkbox .control-label {
    padding: 0
}

.modal .msgInputApply {
    margin-top: 1rem
}

.modal .modal-background {
    background-color: transparent
}

.modal .modal-content {
    box-shadow: 0 0 1rem #000;
    border-radius: 1rem
}

.modal .genus_selection>section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between
}

.main>div.popper,body .modal>div.popper {
    margin-top: .125rem;
    text-align: center;
    padding: .5rem .75rem;
    max-width: 18rem;
    border-radius: .25rem;
    line-height: 1.3125rem
}

.main>div.popper div.aTable,body .modal>div.popper div.aTable {
    columns: 2
}

.main>div.popper.breakdown,body .modal>div.popper.breakdown {
    max-width: initial
}

.main>div.popper .modal_bd :first-child,body .modal>div.popper .modal_bd :first-child {
    display: table-cell;
    text-align: left;
    padding-right: .5rem
}

.main>div.popper .modal_bd :nth-child(2),body .modal>div.popper .modal_bd :nth-child(2) {
    display: table-cell;
    text-align: right
}

.main>div.popper .modal_bd.sum,body .modal>div.popper .modal_bd.sum {
    border-top: .0625rem solid
}

.main>div.popper .resBreakdown .parent,body .modal>div.popper .resBreakdown .parent {
    display: flex
}

.main>div.popper .resBreakdown .parent div.col,body .modal>div.popper .resBreakdown .parent div.col {
    padding-left: .5rem;
    margin-left: .5rem;
    border-left: 1px solid
}

.main>div.popper>.flair,body .modal>div.popper>.flair {
    margin-top: .5rem;
    font-size: .75rem;
    text-align: right;
    line-height: .75rem
}

.main>div.popper.flair,body .modal>div.popper.flair {
    padding-bottom: .25rem
}

.main>div.popper .flexAround,body .modal>div.popper .flexAround {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

.main>div.popper .example,body .modal>div.popper .example {
    text-align: left;
    white-space: pre
}

.main>div.popper .pGeoList .pGeo,body .modal>div.popper .pGeoList .pGeo {
    min-width: 49%
}

.infoBox {
    max-width: 50rem;
    margin-bottom: .5rem;
    margin-right: .5rem;
    padding: .25rem .5rem
}

.infoBox h2 {
    margin-bottom: .25rem;
    border-bottom: .0625rem solid
}

.infoBox div {
    margin-bottom: .5rem;
    clear: both
}

.infoBox .type {
    display: flex;
    justify-content: space-between
}

.infoBox .type>span:nth-child(1) {
    display: block;
    text-align: left
}

.infoBox .type>span:nth-child(2) {
    display: block;
    text-align: right
}

.infoBox .desc {
    text-align: left
}

.infoBox .condense {
    margin: 0
}

.main>div.popper.wide,body .modal>div.popper.wide {
    max-width: initial
}

.arpa .tabs,.resTabs .tabs {
    overflow-x: auto
}

.industry,.modalBox {
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
    min-height: 9.5rem
}

.industry .market-item,.modalBox .market-item {
    display: block;
    margin-top: .5rem;
    padding-top: .5rem;
    margin-left: 0
}

.industry .crates .crateHead,.modalBox .crates .crateHead {
    margin-bottom: .5rem
}

.industry .crates .crateHead :first-child,.modalBox .crates .crateHead :first-child,.popper .soldierEvaluation>div :first-child {
    margin-right: 1rem
}

.industry .crates .crateHead :last-child,.modalBox .crates .crateHead :last-child {
    margin-left: 1rem
}

.industry .crates button,.industry .smelting button,.modalBox .crates button,.modalBox .smelting button {
    font-size: .875rem;
    margin: 0 .25rem;
    height: 1.8rem
}

.industry .divide,.modalBox .divide {
    margin-top: .5rem;
    padding-top: .5rem
}

.industry .current,.modalBox .current {
    position: relative;
    bottom: .0625rem
}

.industry .smelting,.modalBox .smelting {
    margin: .5rem 0 .75rem;
    padding-top: .5rem
}

.industry .smelting .button.steel,.modalBox .smelting .button.steel {
    white-space: pre
}

.industry .factory :first-child,.modalBox .factory :first-child {
    display: inline-block;
    width: 8rem;
    text-align: left
}

.industry .crateModal,.modalBox .crateModal {
    margin-bottom: 1.25rem
}

.industry .flexAround,.modalBox .flexAround {
    margin-top: .25rem;
    display: flex;
    justify-content: space-evenly
}

.industry .fanatic section,.industry .flexWrap,.modalBox .fanatic section,.modalBox .flexWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly
}

.industry .flexWrap>div,.modalBox .flexWrap>div {
    margin-bottom: .25rem
}

button[disabled] {
    pointer-events: none;
    cursor: not-allowed
}

.modalBox .trade-offer {
    margin: 0;
    padding: .125rem 0
}

.modalBox .trade-offer .offer-item {
    width: 7.5rem
}

.modalBox .trade-offer .offer-vol {
    width: 4.5rem;
    border-right: 1px solid;
    margin-right: .125rem
}

.modalBox .market-item {
    display: flex;
    justify-content: center
}

.modalBox .trade-header {
    border-top: 0;
    padding-top: 0
}

.industryTab,.psychicTab,.supernaturalTab {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.industry {
    margin-bottom: .5rem;
    border-bottom: .0625rem solid;
    border-top: .0625rem solid;
    width: 27.5rem
}

.industry .header {
    margin-bottom: .25rem;
    padding-bottom: .25rem;
    width: 100%
}

.industry .gap {
    margin-top: .5rem;
    width: 100%
}

.promoBar,.topBar {
    display: inline-flex;
    height: 1.2rem;
    line-height: 1.2rem;
    width: 100%;
    position: fixed
}

.topBar {
    top: 0;
    z-index: 10
}

.topBar .calendar {
    margin: 0 auto
}

.topBar .calendar .temp {
    margin-left: .125rem;
    font-size: .875rem
}

.topBar .calendar .weather {
    font-size: .8125rem
}

.topBar .calendar .moon {
    font-size: .875rem;
    color: #fff
}

.topBar .calendar .wi-thermometer-exterior {
    color: #00d6b2
}

.topBar .calendar .wi-thermometer {
    color: #f10202
}

.topBar .calendar .wi-day-sunny,.topBar .calendar .wi-day-windy {
    color: #d0ff00
}

.topBar .calendar .wi-cloud,.topBar .calendar .wi-cloudy-gusts {
    color: #9ea387
}

.topBar .calendar .wi-rain,.topBar .calendar .wi-storm-showers {
    color: #00d6b2;
    position: relative;
    bottom: .125rem
}

.topBar .calendar .wi-snow,.topBar .calendar .wi-snow-wind {
    color: #fff;
    position: relative;
    bottom: .125rem
}

.topBar .calendar .atime,.topBar .planetWrap {
    margin-left: 1rem
}

.topBar .calendar .infoTimer {
    margin-right: 1rem
}

.topBar .calendar .astro {
    font-size: .8125rem;
    margin-right: .25rem
}

.topBar .planetWrap .pet,.topBar .planetWrap .simulation,.topBar .planetWrap .universe {
    border-left: 1px solid;
    margin-left: .75rem;
    padding-left: .75rem
}

.topBar .planetWrap .pet {
    cursor: pointer
}

.topBar .flair {
    display: inline-block;
    text-align: left
}

.topBar .flair svg {
    position: relative;
    top: .125rem;
    left: .25rem
}

.topBar .pet .black {
    fill: #000;
    filter: drop-shadow(0 0 2px #fff)
}

.topBar .pet .black.patched,.topBar .pet .black.stripe,.topBar .pet .brown.patched,.topBar .pet .cream.stripe,.topBar .pet .gray.patched,.topBar .pet .gray.stripe,.topBar .pet .orange.stripe,.topBar .pet .white.patched,.topBar .pet .white.stripe {
    fill: url(#PetGradient)
}

.topBar .pet .black.stripe #PetGradient .stop1 {
    stop-color: #000
}

.topBar .pet .black.stripe #PetGradient .stop2 {
    stop-color: #4e4e4e
}

.topBar .pet .black.patched #PetGradient .stop1 {
    stop-color: #000
}

.topBar .pet .black.patched #PetGradient .stop2 {
    stop-color: #424242
}

.topBar .pet .orange {
    fill: #e25f08;
    filter: drop-shadow(0 0 2px #000)
}

.topBar .pet .orange.stripe #PetGradient .stop1 {
    stop-color: #e25f08
}

.topBar .pet .orange.stripe #PetGradient .stop2 {
    stop-color: #ccb9ad
}

.topBar .pet .gray,.topBar .pet .white {
    fill: #575757;
    filter: drop-shadow(0 0 2px #000)
}

.topBar .pet .gray.stripe #PetGradient .stop1 {
    stop-color: #575757
}

.topBar .pet .gray.stripe #PetGradient .stop2 {
    stop-color: #202020
}

.topBar .pet .gray.patched #PetGradient .stop1 {
    stop-color: #575757
}

.topBar .pet .gray.patched #PetGradient .stop2 {
    stop-color: #665237
}

.topBar .pet .white {
    fill: #f0efef
}

.topBar .pet .white.stripe #PetGradient .stop1 {
    stop-color: #f0efef
}

.topBar .pet .white.stripe #PetGradient .stop2 {
    stop-color: #f5dec4
}

.topBar .pet .white.patched #PetGradient .stop1 {
    stop-color: #f0efef
}

.topBar .pet .white.patched #PetGradient .stop2 {
    stop-color: #b8ab9b
}

.topBar .pet .brown,.topBar .pet .cream {
    fill: #bd8754;
    filter: drop-shadow(0 0 2px #000)
}

.topBar .pet .cream.stripe #PetGradient .stop1 {
    stop-color: #bd8754
}

.topBar .pet .cream.stripe #PetGradient .stop2 {
    stop-color: #f5dec4
}

.topBar .pet .brown {
    fill: #996f48
}

.topBar .pet .brown.patched #PetGradient .stop1 {
    stop-color: #996f48
}

.topBar .pet .brown.patched #PetGradient .stop2 {
    stop-color: #af9a85
}

.topBar .version {
    margin-right: 1rem
}

.promoBar {
    bottom: 0
}

.promoBar .left {
    display: inline-block;
    width: 15rem;
    margin-left: .25rem
}

.promoBar .right {
    position: absolute;
    text-align: right;
    margin-right: 1rem;
    right: 0
}

.promoBar .right span {
    margin: 0 .5rem
}

.arpaProject,.promoBar .right,.promoBar .right .external-links li {
    display: inline-block
}

.promoBar .right .external-links li+li:before {
    content: " | "
}

.arpaProject {
    border: solid .0625rem;
    padding: .5rem;
    width: 20rem;
    margin: 0 1rem 1rem 0
}

.arpaProject .head {
    margin-bottom: .25rem;
    padding-bottom: .5rem;
    border-bottom: solid .0625rem
}

.arpaProject .head>span {
    display: inline-block;
    width: 40%
}

.arpaProject .head>span:first-child {
    display: inline-block;
    width: 60%
}

.arpaProject .head .rank {
    text-align: right
}

.arpaProject .head .pbar {
    position: relative;
    margin-top: .5rem
}

.arpaProject .head .pbar .progress {
    margin-bottom: 0
}

.arpaProject .head .pbar .progress-value {
    position: absolute;
    display: block;
    top: -.1875rem;
    left: 49%
}

.arpaProject .buy {
    text-align: center
}

.arpaProject .buy .button {
    height: 1.5rem;
    width: 19%;
    line-height: .75rem
}

.arpaProject .buy :first-child {
    width: 24%
}

.ShipYardTab,.ShipYardTab .assemble>span {
    margin-left: 1rem
}

.ShipYardTab .button {
    height: 2rem
}

.ShipYardTab .stats {
    display: flex
}

.ShipYardTab #shipYardCosts,.ShipYardTab .stats>div,.genome button {
    margin-left: .5rem
}

.ShipYardTab .registry {
    line-height: 1.25rem
}

.ShipYardTab .registry .nameplate {
    display: inline-block;
    width: 8rem;
    height: 1.25rem
}

.ShipYardTab .registry .nameplate input {
    height: 1.25rem
}

.ShipYardTab #shipList .shipRow,.ShipYardTab .shipBayOptions .dropdown {
    margin-left: .5rem;
    margin-top: .25rem
}

.ShipYardTab #shipList {
    margin-top: .25rem
}

.ShipYardTab #shipList .shipRow {
    display: grid;
    padding-top: .25rem;
    border-top: 1px solid;
    grid-template-columns: auto 10rem
}

.ShipYardTab #shipList .shipRow .name {
    display: inline-block;
    min-width: 5rem
}

.ShipYardTab #shipList .shipRow .row1,.ShipYardTab #shipList .shipRow .row2,.ShipYardTab #shipList .shipRow .row3 {
    grid-column-start: 1
}

.ShipYardTab #shipList .shipRow .location {
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 3
}

.ShipYardTab #shipList .shipRow .pad {
    margin: 0 .5rem 0 0
}

.ShipYardTab .assemble {
    margin: 1rem 0 0 .5rem;
    line-height: 2rem
}

.ShipYardTab .assemble>span>label.checkbox {
    margin-right: 0;
    top: .25rem
}

.ShipYardTab .solarMap {
    float: right;
    margin-right: 1rem
}

.genome {
    margin-bottom: 1rem
}

.genome .progress {
    margin-top: .25rem;
    margin-bottom: .5rem
}

.genome button.seq {
    margin-left: 0
}

.geneticTraits .trait.major {
    margin-top: .5rem
}

.geneticTraits .trait .gene {
    min-width: 5rem;
    padding-bottom: .125rem
}

.geneticTraits .trait.indent {
    margin-left: 4.5rem
}

.geneticTraits .traitListing {
    display: flex;
    flex-wrap: wrap
}

.geneticTraits .traitListing>.traitRow {
    width: 25rem
}

.geneticTraits .traitRow>span {
    vertical-align: middle
}

.geneticTraits .traitRow .basic-button {
    height: 100%
}

.main>div.popper.wide.w22,body .modal>div.popper.wide.w22 {
    max-width: 22rem
}

.main>div.popper.wide.w25,body .modal>div.popper.wide.w25 {
    max-width: 25rem
}

.main>div.popper.wide.w30,body .modal>div.popper.wide.w30 {
    max-width: 30rem
}

#trick6 {
    width: 4rem;
    text-align: center
}

body.nuke {
    color: #000;
    transition: color 2s,text-shadow 3s;
    text-shadow: 0-2px 4px #fff,0-2px 10px #ff3,0-10px 20px #f90,0-20px 40px #c33
}

div.mininuke,div.nuke {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    transition: all 2s;
    opacity: 0
}

div.mininuke {
    position: absolute;
    overflow: hidden
}

div.mininuke.burn,div.nuke.burn {
    opacity: 1
}

div.bigbang.burn::before,div.mininuke.burn::before,div.nuke.burn::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 50%
}

div.mininuke.burn::before,div.nuke.burn::before {
    top: 60%;
    left: 30%;
    background: #000
}

div.mininuke.burn.b::before,div.nuke.burn.b::before {
    transition: width 3s,height 3s,top 3s,left 3s;
    background: #000;
    width: 180%;
    height: 180%;
    top: -30%;
    left: -30%;
    box-shadow: 0-2px 4px #fff,0-2px 10px #ff3,0-10px 20px #f90,0-20px 40px #c33,inset 0-20px 40px #fff,inset 0-20px 100px #ff3,inset 0-40px 200px #f90,inset 0-80px 400px #c33
}

div.mininuke.burn.b::before {
    transition: width 2s,height 2s,top 2s,left 2s
}

div.nuke.burn {
    background: #000
}

div.mininuke.burn.c::before {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s,opacity 2s linear
}

div.bigbang {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    transition: all 1s;
    opacity: 0
}

div.bigbang.burn {
    opacity: 1
}

div.bigbang.burn::before {
    top: 50%;
    left: 50%;
    background: #fff
}

div.bigbang.burn.b::before {
    transition: width 2s,height 2s,top 2s,left 2s;
    background: #fff;
    width: 180%;
    height: 180%;
    top: -30%;
    left: -30%;
    box-shadow: 0-2px 4px #fff,0-2px 10px #ff3,0-10px 20px #f90,0-20px 40px #c33,inset 0-20px 40px #fff,inset 0-20px 100px #ff3,inset 0-40px 200px #f90,inset 0-80px 400px #c33
}

div.bigbang.burn.c::before {
    transition: width 2s,height 2s,top 2s,left 2s,background-color 2s;
    background: #000;
    width: 180%;
    height: 180%;
    top: -30%;
    left: -30%;
    box-shadow: 0-2px 4px #000,0-2px 10px #000,0-10px 20px #000,0-20px 40px #000,inset 0-20px 40px #000,inset 0-20px 100px #000,inset 0-40px 200px #000,inset 0-80px 400px #000
}

.earthquake {
    animation: 3.8s shake infinite alternate
}

.celestialLab .fields,.celestialLab .sequence .genus_selection section,.celestialLab .sequence .planet_selection section,.celestialLab .sequence .res_selection section {
    margin-top: .5rem
}

.celestialLab .fields .entity,.celestialLab .fields .name {
    display: inline-block;
    width: 10rem;
    margin-right: 1rem
}

.celestialLab .fields .entity {
    width: 20rem
}

.celestialLab .fields .control {
    margin: .25rem 0
}

.celestialLab .fields .help {
    margin-top: 0;
    position: absolute;
    right: .25rem;
    top: -1rem
}

.celestialLab .sequence {
    display: flex;
    margin-top: .5rem
}

.celestialLab .sequence .genus_selection {
    width: 10rem
}

.celestialLab .sequence .genus_selection button {
    padding: 1rem .5rem
}

.celestialLab .sequence .trait_selection {
    margin-top: .5rem;
    display: flex;
    flex-wrap: wrap
}

.celestialLab .sequence .planet_selection section>div,.celestialLab .sequence .trait_selection>div {
    width: 11.5rem
}

.celestialLab .sequence .trait_selection.summary>div {
    width: 23rem
}

.celestialLab .sequence .trait_selection.summary .field {
    display: flex;
    justify-content: space-between;
    padding-right: .5rem
}

.celestialLab .sequence .trait_selection.summary .field .rc {
    display: inline-block;
    min-width: 7rem;
    text-align: center
}

.celestialLab .sequence .planet_selection,.celestialLab .sequence .res_selection {
    margin-left: 2rem
}

.celestialLab .sequence .res_selection section>div,.popper .soldierEvaluation>div {
    display: flex;
    justify-content: space-between
}

.celestialLab .sequence .res_selection section>div>div:first-child {
    margin-right: .25rem
}

.celestialLab .sequence>div .field:not(:last-child) {
    margin-bottom: 0
}

.celestialLab .buttons {
    display: flex;
    justify-content: space-evenly
}

.celestialLab .create {
    margin-top: 1rem;
    text-align: center
}

.celestialLab .genus,.celestialLab .resetLab {
    margin-bottom: .75rem;
    text-align: center
}

.celestialLab .genus>button,.celestialLab .resetLab>button {
    margin-top: .25rem;
    width: 8.5rem
}

.bulletlistqueuestyle.bldQueue li,.bulletlistqueuestyle.bldQueue.right li,.listqueuestyle.bldQueue li,.listqueuestyle.bldQueue.right li,.numberedlistqueuestyle.bldQueue li,.numberedlistqueuestyle.bldQueue.right li {
    margin: .25rem 0;
    display: list-item
}

.bulletlistqueuestyle.bldQueue li:not(:last-child) .queued:after,.bulletlistqueuestyle.bldQueue.right li:not(:last-child) .queued:after,.listqueuestyle.bldQueue li:not(:last-child) .queued:after,.listqueuestyle.bldQueue.right li:not(:last-child) .queued:after,.numberedlistqueuestyle.bldQueue li:not(:last-child) .queued:after,.numberedlistqueuestyle.bldQueue.right li:not(:last-child) .queued:after {
    content: ""
}

.numberedlistqueuestyle.bldQueue li,.numberedlistqueuestyle.bldQueue.right li {
    list-style-type: numeric;
    list-style-position: inside
}

.bulletlistqueuestyle.bldQueue li,.bulletlistqueuestyle.bldQueue.right li {
    list-style-type: disc;
    list-style-position: inside
}

.sticky {
    position: sticky;
    height: 100vh
}

.sticky,.vscroll {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    top: 1rem;
    bottom: 0
}

.hscroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap
}

#evolution {
    height: calc(100vh - 6rem)
}

.bldQueue,.hscroll,.resTabs>.tabs,.resTabs>section {
    scrollbar-width: thin
}

.modal .modal-content {
    width: initial;
    min-width: 42rem
}

.modal .modal-content .fuels {
    margin-top: .5rem
}

.modal .modal-content .avail span {
    margin: 0 2.5rem 0 2.125rem
}

.popper {
    pointer-events: none
}

.popper .touchButton {
    pointer-events: all;
    height: 1.25rem;
    margin-bottom: .25rem
}

.popper .soldierEvaluation>div.head {
    display: block;
    text-align: center
}

#powerStatus {
    white-space: nowrap
}

.pyro>.after,.pyro>.before {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff,0 0#fff;
    -moz-animation: 1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards
}

.pyro>.after {
    -moz-animation-delay: 1.25s,1.25s,1.25s;
    -webkit-animation-delay: 1.25s,1.25s,1.25s;
    -o-animation-delay: 1.25s,1.25s,1.25s;
    -ms-animation-delay: 1.25s,1.25s,1.25s;
    animation-delay: 1.25s,1.25s,1.25s;
    -moz-animation-duration: 1.25s,1.25s,6.25s;
    -webkit-animation-duration: 1.25s,1.25s,6.25s;
    -o-animation-duration: 1.25s,1.25s,6.25s;
    -ms-animation-duration: 1.25s,1.25s,6.25s;
    animation-duration: 1.25s,1.25s,6.25s
}

.noise {
    position: absolute;
    top: -500px;
    right: -500px;
    bottom: -500px;
    left: -500px;
    background: url(/lib/noise.png)0 0;
    background-size: 320px 320px;
    opacity: .35;
    animation: noise 1s steps(8,end) infinite both
}

.noise-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    overflow: hidden;
    z-index: 10
}

.noise-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(ellipse at center,transparent 0,rgba(0,0,0,.75) 100%)
}

.signal-lost-bottom,.signal-lost-top {
    width: 100%;
    height: 0%;
    opacity: .9;
    background: #000;
    position: absolute;
    z-index: 100
}

.signal-lost-top {
    top: 0
}

.signal-lost-bottom {
    bottom: 0
}

.refresh {
    position: relative;
    display: inline-block;
    height: 1rem;
    width: 1rem;
    font-size: 1rem;
    cursor: pointer;
    margin-left: .5rem;
    top: .2rem
}

.font-overlay {
    z-index: 999;
    position: absolute;
    top: 1rem
}