kreise-toolbar {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    min-height: 20em;
    background-color: var(--toolbar-decent);
    border-top: 1pt black solid;
    border-bottom: 1pt black solid;
    padding: 1em;

    max-width: 100vw;

}

ul.toolbarItems {

    display: none;

}

/* those are the select box and the div.toolbarSelect menu */
#KreiseToolbarSelectorSelect {
    display: none;
}

#KreiseToolbarSelectorSelect {
    text-align: center;
}

#KreiseToolbarSelectorButtonsDiv {
    display: flex;
}

@media (max-width: 641px) {
    #KreiseToolbarSelectorSelect {
        display: block;
        width: 100%;
    }

    #KreiseToolbarSelectorButtonsDiv {
        display: none;
    }
}

div.toolbarSelectorButtons {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;

}

button.toolbarSelector {

    flex: 1 1 auto;
    min-width: 10em;
    max-width: 15em;
    padding: 0.5em 2em;

}

button.toolbarSelector.active {

    background-color: var(--background-decent);
}

.toolbar {
    display: none;
}

/* The 'active' class makes a toolbar visible */
.toolbar.active {
    padding: 1em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    /* Or 'block', or whatever its default visible state should be */
}

.toolbarSettingsTile {
    display: block;
    padding: 1em;
}

.wDepthSettingsTile {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-rows: 2em;
    column-gap: .5rem;
    row-gap: .25rem;
    align-items: center;
    align-content: flex-start;
}

.fovSettingsTile {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: 2em;
    column-gap: .5rem;
    row-gap: .25rem;
    align-items: center;
    align-content: flex-start;
}



/*
    This is your Scene select
*/

/* 
#KreiseBackgroundSelect {

    height: auto;
    width: 12em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0px solid var(--background-color);

    outline: 0px;
    background-color: transparent;
    padding: 0;
}
    */

button#KreiseFullscreenToggleButton {

    width: 15em;

}

button#KreiseFullscreenToggleButton.active {
    background-color: var(--background-decent);
}

button#KreiseBackgroundSwitchProjectionTypeButton {

    width: 15em;
}

button#KreiseBackgroundToggleWireframeButton {

    width: 15em;
}

button#KreiseBackgroundSlavetab {

    width: 15em;

}

#KreiseBackgroundSelect {

    width: 15em;
    text-align: center;
}

#KreiseBackgroundSelect option {

    color: var(--main-color);
    background-color: var(--background-color);

}

#KreiseDebugToggleOutlinesButton {

    width: 15em;

}