:root {
    --tile-size: 6.0vh;
    --global-cursor: default;
    cursor: var(--global-cursor);
}
body {
    background-color: darkgray;
    font-family: sans-serif;
}
label {
    font-weight: bold;
    margin-right: 3px;
}
button {
    border-radius: 5px;
    border: 1px solid darkgray;
    padding: 5px;
    font-size: small;
    cursor: pointer;
}
#reset {
    background-color: red;
    color: whitesmoke;
    font-weight: bold;
    border: 1px solid red;
}
input {
    margin-bottom: 2%;
    border-radius: 5px;
    border: 1px solid darkgray;
}
#zoom {
    margin-bottom: 0;
}
hr {
    width: 100%
}
.center {
    text-align: center;
}
#settings > * > *{
    margin-bottom: 10px
}
#toolbar-settings > select {
    margin: 4px
}
#editor {
    display: flex;
    align-items: center;
}
select {
    border-radius: 5px;
    border: 1px solid darkgray;
    padding: 5px;
    font-size: small;
}
#secondary-container {
    padding: 2%;
    margin-left: 8px;
    flex: 15;
    background-color: whitesmoke;
    height: 90vh;
    overflow-y: scroll;
    overflow-x: hidden;
    border-radius: 5px;
}
#item-info-container {
    min-height: 25%;
}
#level-container {
    flex: 85;
    align-items: center;
    display: flex;
    justify-content: center;
    height: 90vh;
    box-shadow: 3px 2px 3px darkgray;
    overflow: scroll;
    background-color: whitesmoke;
}
#level-visual {
    flex-grow: 0;
    margin: auto;
}
#toolbar, #sprite-toolbar {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    align-content: start;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    background-color: lightgray;
}

#tools, #tiles {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    align-content: start;
    justify-content: center;
}
.toolbar-item {
    max-width: 6vh;
    min-width: 6vh;
    max-height: 6vh;
    min-height: 6vh;
    flex: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    font-size: 0;
}

.alt-sprite {
    margin: 2px;
}
.attribute {
    margin-bottom: 8px;
}
#selector, #alternatives-selector {
    min-width: 6vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../../static/tiles/Selector.png");
    min-height: 6vh;
    z-index: 1;
}
#level {
    margin: auto;
    background-size: var(--tile-size);
    background-clip: content-box;
    flex-grow: 0;
}
.row {
    display: flex;
}
.box {
    background-size: contain;
    background-repeat: no-repeat;
    box-sizing: border-box;
    outline: 1px dashed gray;
    flex: 1;
    min-width: var(--tile-size);
    padding-bottom: var(--tile-size);
    font-size: 0;
    cursor: pointer;
}
#csv-editor {
    width: 95%;
    height: 85%;
    margin: 3% auto auto;
}
#csv-entry {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    font-family: monospace;
    font-size: 12px;
    box-shadow: 1px 1px 3px darkgray;
}
.alert {
    background-color: #cf2929;
    padding: 10px;
    border-radius: 10px;
    transition: opacity 5s;
    margin-bottom: 2px;
    color: whitesmoke;
}
#alert-container {
    position: absolute;
    right: 0;
    margin: 8px;
}
#customizer > * {
    margin-bottom: 8px;
}
#level-visual {
    margin: auto;
}
.alert > button {
    margin-left: 10px;
    background-color: transparent;
    border: 2px solid whitesmoke;
    color: whitesmoke;
}
.alert > button:hover {
    background-color: whitesmoke;
    color: #cf2929;
}
#ur-container > button {
    margin: 3px;
    font-size: 24px;
    background-color: transparent;
    border: none;
}
#top-bar {
    position: fixed;
    display: flex;
    justify-content: center;
    background-color: whitesmoke;
    z-index: 1;
    align-items: center;
    border-radius: 10px;
    margin: 3px;
    padding-left: 3px;
    padding-right: 3px;
    box-shadow: 1px 1px 3px darkgray;
}
#top-bar > div > * {
    margin-left: 3px;
    margin-right: 3px;
    user-select: none;
}
#top-bar > div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3px;
    margin-right: 3px;
    user-select: none;
}
.sep {
    width: 1px;
    background-color: darkgray;
    color: transparent;
    height: 95%;
}
#tb-drag {
    cursor: grab;
}
#tb-drag:active {
    cursor: grabbing;
}
.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}