:root {
    /* main background, dropdown backgrounds */
    --dark: #171717;
    /* tooltip background; should be same as dark, but with alpha channel */
    --dark-overlay: rgba(23, 23, 23, 0.8);
    /* visualization node backgrounds, button backgrounds */
    --medium: #212427;
    /* background of main visual area */
    --main: #272b30;
    /* input field backgrounds, collapsed dropdown borders */
    --light: #3a3f44;

    /* main foreground text color */
    --foreground: #c8c8c8;
    /* makes things stand out */
    --accent: #ff7200;
    /* slightly brighter than main foreground color */
    --bright: #f1fff2;
}
/* top-level/shared elements */
body {
    font-family: sans-serif;
    color: var(--foreground);
    background-color: var(--dark);
}
a {
    text-decoration: none;
    color: var(--accent);
}
a:active, a:hover {
    color: var(--bright);
}
input, select {
    color: var(--foreground);
    background-color: var(--light);
    padding: 0.25em;
    border: 1px solid var(--light);
    border-radius: 0.4em;
}
input:focus, select:focus {
    border-color: var(--accent);
    outline: none;
}
.right-align {
    text-align: right;
}
button.ui {
    color: var(--accent);
    background: linear-gradient(to bottom, var(--light), var(--medium));
    border: 2px outset var(--light);
    border-radius: 0.4em;
}
button.ui:active {
    border-style: inset;
}
button.ui:focus {
    border-color: var(--accent);
    outline: none;
}
img.icon {
    display: inline-block;
    vertical-align: middle;
}
.ignore {
    opacity: 0.3;
}
/* tooltips */
div.tooltip {
    opacity: 1;
    z-index: 20;
}
div.tooltip .frame {
    border: 2px solid var(--bright);
    border-radius: 5px;
    background-color: var(--dark-overlay);
    padding: 0.4em;
    text-align: left;
    opacity: 1;
    z-index: 20;
}
div.tooltip h3 {
    margin: 0;
}
div.tooltip h3:not(:last-child) {
    margin-bottom: 0.5em;
}
div.tooltip div.product {
    position: relative;
    display: inline-block;
    background-color: var(--light);
    margin-top: 5px;
}
div.tooltip div.product span.count {
    position: absolute;
    right: 1px;
    bottom: 1px;
    font-size: 12px;
    font-family: monospace;
    color: var(--bright);
    text-shadow: -1px -1px 0px var(--dark), -1px 1px 0px var(--dark), 1px -1px 0px var(--dark), 1px 1px 0px var(--dark);
}
div.tooltip img.ingredient {
    background-color: var(--light);
}
/* "recent changes" box */
.changecell {
    vertical-align: top;
}
.changebox {
    margin-left: 3em;
    padding: 1em;
    border: 2px solid var(--bright);
    font-family: monospace;
}
/* build targets */
.targetButton {
    height: 2em;
    width: 2em;
    padding: 0;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
    margin-right: 0.5em;
}
ul#targets {
    list-style-type: none;
    margin-top: 0;
}
ul#targets li {
    margin: 0.25em;
    border-radius: 0.5em;
}
label.selected {
    font-weight: bold;
    color: var(--bright);
}
/* settings */
table#settings {
    border-collapse: collapse;
}
tr.setting-section td {
    padding-top: 1em;
    padding-bottom: 0.5em;
}
tr.setting-section td span {
    color: var(--accent);
    font-style: italic;
}
tr.setting-section td hr {
    display: block;
    border: 1px solid var(--accent);
}
tr.setting-row td:first-child {
    padding-left: 3em;
}
td.setting-label {
    text-align: right;
}
div#miner_settings, div#alt_recipe_settings {
    padding-left: 3em;
}
.top, .top-icon {
    vertical-align: top;
}
.top-icon > div {
    height: 40px;
    line-height: 40px;
}
input.prec, input.mprod {
    width: 4em;
}
.radio-setting input[type="radio"] {
    display: none;
}
.radio-setting input[type="radio"] + label {
    cursor: pointer;
    background: var(--light);
    border-radius: 4px;
    display: inline-block;
    margin: 2px;
    padding: 2px;
}
.radio-setting input[type="radio"] + label:hover {
    background: var(--bright);
}
.radio-setting input[type="radio"]:checked + label {
    background: var(--accent);
}
.toggle-list .toggle {
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    border: 2px solid var(--light);
    margin: 2px;
    padding: 2px;
    background-color: var(--dark);
}
.toggle-list .toggle:hover {
    border-color: var(--bright);
}
.toggle-list .selected {
    border-color: var(--accent);
}
.toggle-list .selected:hover {
    /*border-color: var(--accent);*/
}
#resource_settings {
    border: 2px solid var(--light);
    border-radius: 5px;
    background-color: var(--dark);
}
#resource_settings .resource-tier {
    border: 1px solid transparent;
}
#resource_settings .resource-tier.highlight {
    border-color: var(--accent);
}
#resource_settings .bookend {
    background-color: var(--light);
}
#resource_settings .bookend.highlight {
    background-color: var(--accent);
}
#resource_settings .bookend * {
    pointer-events: none;
}
#resource_settings .middle {
    height: 10px;
    background-color: var(--light);
}
#resource_settings .middle.highlight {
    background-color: var(--accent);
}
#resource_settings .resource {
    display: inline-block;
    margin: 3px;
}
#resource_settings img.icon {
    display: block;
}
#resource_settings.dragging .resource-tier > * {
    pointer-events: none;
}
table.resource {
    border-collapse: collapse;
}
table.resource td {
    text-align: right;
}
table.resource input[type="radio"] {
    display: none;
}
table.resource input[type="radio"] + label {
    cursor: pointer;
    fill: var(--light);
}
table.resource input[type="radio"] + label:hover {
    fill: var(--bright);
}
table.resource input[type="radio"]:checked + label {
    fill: var(--accent);
}
/* tabs */
div.tabs {
    overflow: hidden;
}
div.tabs button.tab_button {
    color: var(--accent);
    background-color: inherit;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0.5em;
}
div.tabs button.tab_button:hover {
    background-color: var(--medium);
}
div.tabs button.active, div.tabs button.active:hover {
    color: var(--bright);
    background-color: var(--main);
}
button#debug_button {
    float: right;
}
div.tab {
    display: none;
    padding: 0.5em;
    background-color: var(--main);
}
/* visualizer */
div.graph {
    /*min-width: max-content;*/
}
div.graph_setting {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1em;
    margin-right: 1em;
}
#graph_type input[type="radio"] {
    display: none;
}
#graph_type input[type="radio"] + label:hover {
    color: var(--bright);
}
#graph_type input[type="radio"]:checked + label {
    color: var(--accent);
}
#graph_type input[type="radio"]:checked + label:hover {
    color: var(--accent);
}
g.node rect {
    /*stroke: var(--foreground);*/
    stroke-width: 1px;
}
g.overlay {
    cursor: pointer;
}
g.node .colon {
    stroke: none;
    fill: var(--foreground);
}
rect.nodeHighlight {
    stroke: var(--accent);
}
g.edgePathHighlight .highlighter {
    stroke: var(--accent);
}
svg.sankey g.edgePathHighlight .highlighter {
    stroke-opacity: 0.7;
}
g.edgePathHighlight rect.highlighter {
    fill-opacity: 1;
}
g.fuel path, path.fuel {
    stroke-dasharray: 10,5;
}
svg#graph {
    display: block;
}
svg#graph text, svg.test text {
    stroke: none;
    fill: var(--foreground);
    /*font: 12px sans-serif;*/
}
/* items tab */
#totals {
    border-collapse: collapse;
}
#totals.nosurplus .surplus {
    display: none;
}
.pad-right {
    padding-right: 1em;
}
tr.display-row td.pad, th.pad {
    padding-left: 1em;
}
tr.display-row .item-icon img {
    cursor: pointer;
}
tr.display-row td, tr.factory-header th, tr.breakdown-row td, tr.power-row td {
    padding-top: 8px;
    padding-bottom: 8px;
}
tbody.display-group > tr:first-child td, tr.power-row td {
    border-top: 1px solid var(--light);
}
tbody.display-group.multi td.leftmost {
    border-left: 1px solid var(--light);
}
tr.nobuilding td.building > *{
    display: none;
}
tr.nomodule td.module > *{
    display: none;
}
tr.noitem td.item > * {
    display: none;
}
td.belt-count-cell.hide {
    display: none;
}
span.beacon-container {
    background-color: var(--light);
    padding: 0.5em;
}
svg.popout {
    color: var(--accent);
    width: 16;
    height: 16;
}
/* breakdowns */
.breakdown-open .breakdown-arrow {
    transform: rotate(90deg);
}
.breakdown-arrow {
    color: var(--foreground);
    cursor: pointer;
    transition: transform 0.25s;
}
.breakdown-arrow:hover {
    color: var(--accent);
}
.breakdown {
    display: none;
    height: 0;
}
.breakdown.breakdown-open {
    display: table-row;
    height: auto;
    transition: height 0.25s;
}
.breakdown table {
    border-collapse: collapse;
    border-left: solid 0.5em var(--medium);
    border-right: solid 0.5em var(--medium);
    background: var(--medium);
    border-radius: 0.25em;
}
.usage-arrow {
    vertical-align: middle;
    rotate: 180deg;
}
.breakdown-first-output td {
    border-top: 1px solid var(--light);
}
/* dropdowns */
.dropdownWrapper .dropdown .search {
    display: none;
    width: 100%;
    padding-left: 0.4em;
    margin-bottom: 0.4em;
}
.dropdownWrapper.open .dropdown .search {
    display: block;
}
.dropdownWrapper.open div.itemDropdown {
    height: 400px;
    width: 380px;
    overflow-y: scroll;
    transition: height 0.3s;
}
/* about */
.about-content {
    max-width: 40em;
}
/* footer */
#footer {
    border-top: 3px solid var(--accent);
    padding-top: 2px;
    background-color: var(--medium);
}