:root {
    --half-width: calc(50% - 2rem);
    --full-width: calc(100% - 2rem);
}

body {
    font-family: 'IBM Plex Mono', monospace;
    padding: 1rem;
}

/* Configurator */

.configurator {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem;
}

.configurator__select {
    padding: 0.5rem 3rem 0.5rem 0.5rem;
}

.configurator__group {
    display: block;
    border: none;
    margin: 0 1rem 2rem 1rem;
    padding: 0;
    width: var(--full-width);
}

.configurator__group--map,
.configurator__group--mode {
    width: var(--half-width);
}

.configurator__group-label {
    display: block;
    margin-bottom: 1rem;
}

.configurator__tabular-input {
    background: none;
    border: none;
    display: block;
    font: inherit;
    padding: 0.5em;
    width: 100%;
}

.configurator__controls {
    margin: 2rem 0;
}

/* Map */

.map {
    position: relative;
}

.map__canvas {
    width: 800px;
}

.map__stats {
    color: white;
    left: 1rem;
    position: absolute;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    top: 1rem;
}

.map__stat {
    margin-bottom: 0.5rem;
}

.map__stat--inspector {}
.map__stat--end {}

/* Tables */

.table {
    border-collapse: collapse;
    width: 100%;
}

.table__row {}

.table__body .table__row:nth-child(odd) {
    background-color: #F8F8F8;
}

.table__header,
.table__data {
    border: 1px solid grey;
}

.table__header {
    padding: 0.5em;
}