html, body, #app {
    overscroll-behavior-y: none;
    height: 100%;
    overflow: hidden;
}

body {
    background: #f8f8f8;
    font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
    padding: 8px;
    color: #222;
}

#app {max-width: 600px;
      margin: 0 auto;}

.space {
    margin-bottom: 16px;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.right {text-align: right}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.nodes, .tech-tree-area {
    padding-top: 16px;
}

.node {
    margin-bottom: 4px;
}

.button {
    cursor: pointer;
    box-sizing: border-box;
    display: inline-block;
    padding: 1px 6px;
    border: solid 1px #222;
    border-radius: 2px;
}

.disabled {
    opacity: 0.25
}

.button .resource-img {
    position: relative;
    top: 2px;
}

.tabs {
    display: flex;
    flex-direction: row;
}

.left-tab, .right-tab {
    padding: 6px 32px;
    border: solid 1px #888;
    border-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: pointer;
}

.tabs img {
    display: block;
}

.left-tab.selected {
    background: #f8f8f8;
    border-right: 0;
}

.left-tab.not-selected {
    background: #ddd;
    border-right: 0;
    border-bottom-right-radius: 8px;
    box-shadow: inset -2px -1px 1px 0 #222;
}

.right-tab.selected {
    background: #f8f8f8;
    border-left: 0;
}

.right-tab.not-selected {
    background: #ddd;
    border-left: 0;
    border-bottom-left-radius: 8px;
    box-shadow: inset 2px -1px 1px 0 #222;
}

.filler {
    flex-grow: 1;
    border-bottom: solid 1px #888;
}

#p5nodes {
    margin-bottom: 16px;
}