g.graph-node {
    cursor: grab;
}

g.graph-node-inner > rect {
    rx: 8px;
    ry: 8px;
    fill: #1a1a1a;
    stroke: #333333;
    stroke-width: 2px;
}

g.graph-node:active {
    cursor: grabbing;
}

g.node-io > circle {
    fill: #1a1a1a;
    stroke: #333333;
    stroke-width: 2px;
}

g.node-io image {
    width: 24px;
    height: 24px;
}

foreignObject {
    overflow: visible;
    background-size: 200% 200%;
    background-position: center;
}

ul, li {
    padding: 0;
    margin: 0;
}

.amount {
    font-size: 8px;
    color: #f0f0f0;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 3px black, 0 0 3px black, 0 0 4px black, 0 0 4px black, 0 0 6px black;
}

.io-amount, .recipe-amount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
}

/* .io-amount > div {
    height: 100%;
    text-align: center;
} */

.recipe-amount > div {
    width: 100%;
    text-align: right;
}

.graph-edge {
    stroke: #90caf9;
    stroke-width: 1.0;
    fill: none;
}

.graph-root {
    width: 100%;
    height: 100%;
    flex: 1;
    display: block;
    background: #0f1117;
}

html, body {
    margin: 0;
    height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
}

.layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.footer {
    margin-top: auto;
}

.content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.thaw-provider {
    min-height: 100vh;
}

.header {
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.selectors {
    display: flex;
    flex-direction: right;
}

.selector {
    margin-left: 3px;
    margin-right: 3px;
}

.recipes, .input-items-selection {
    margin-right: 20px;
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    max-width: 1500px;
    width: 100%;
    max-height: 100%;
}

.recipe-list-toggles {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.recipe-picker {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.recipe-checkbox {
    display: flex;
    flex-direction: left;
    justify-content: left;
    align-items: center;
}

.recipe-outputs {
    width: 120px;
    margin-left: 5px;
    display: flex;
    flex-direction: left;
    justify-content: left;
    align-items: center;
}

.recipe-inputs {
    margin-right: 5px;
    display: flex;
    flex-direction: right;
    justify-content: right;
    align-items: center;
}

.recipe-io {
    display: flex;
    flex-direction: right;
}               

.recipe-io-sep {
    margin-left: 3px;
    margin-right: 3px;
}

.recipe-io-item {
    display: flex;
    flex-direction: right;
    justify-content: right;
    align-items: center;
    min-width: 50px;
    margin-left: 3px;
    margin-right: 3px;
}

.recipe-io-icon, .item-list-toggle-icon, .item-amount-input-icon {
    margin-left: 3px;
    margin-right: 3px;
    width: 20px;
    height: 20px;
}

.base-recipes,
.alternate-recipes, 
.input-ressources-selection,
.input-custom-selection, 
.item-picking-list {
    flex: 1;
    margin: 10px
}

.item-list-toggle {
    margin-right: 20px;
    display: flex;
    flex-direction: right;
    justify-content: right;
    align-items: center;
}

.input-ressources-selection-header, .recipe-list-header, .item-list-header {
    margin: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
}

.item-list-header {
    margin-right: 20px;
    justify-content: right;
}

.items-amount-inputs, .recipe-list-pickers, .item-list-toggles {
    display: flex;
    flex-direction: column;
    margin: 10px;
}

.item-amount-input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}

.item-amount-input-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.item-amount-input-amount {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-right: 10px;
}

.input-ressources-selection-toggles, .recipe-list-toggles {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-right: 10px;
}

.recipe-list,
.base-recipes,
.alternate-recipes, .item-picking-list, .input-custom-selection, .input-ressources-selection {
    max-height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.item-amount-input-draggable {
    cursor: grab;
}

.item-amount-input-grabbed {
    cursor: grabbing;
}

.items-amount-inputs-grabbed {
    user-select: none;
    cursor: grabbing;
}

.item-amount-input-grab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .item-amount-input-spin-button {
    width: 150px
} */