:root {
    --spacing: 5px;

    --text-primary: #333;
    --text-disabled: #999;
    --text-secondary: #666;
    
    --text-menubar-primary: #333;
    --text-menubar-secondary: #666;

    --bg-active: #dde1e5;
    --bg-hover: #cdcfd2;
    --bg-menuselect: #dddddd;
    --bg-menubar-top: #cccccc;
    --bg-menubar-bot: #888888;
    --bg-toolbar: orange;
    --bg-core: plum;
    --border-menubar: #999;
}

body {
    margin: 0;
    font-family: "IBM Plex Sans", sans-serif;
    color: var(--text-primary);
}

button, input[type=submit]{
    margin: 0;
    height: 24px;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-active);
    border-radius: 5px;
    padding: 4px 10px;
    border: 0;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;

    /* No text selection inside the button */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
button:disabled{
    color: var(--text-disabled);
    cursor: auto;
}
button:hover:enabled, input[type=submit]:hover:enabled{
    background: var(--bg-hover);
}
input {
    height: 24px;
    font-size: 16px;
    border-radius: 5px;
    border: 0;
    margin: 0;
    padding: 0px 6px;
}
input[type="radio"] {
    margin-top: -1px;
    vertical-align: middle;
}
.container-column{
    display: flex;
    flex-flow: column;
}
.container-row{
    display: flex;
    flex-flow: row;
}
.root {
    /* As flex parent */
    display: flex;
    flex-flow: column;

    background-color: yellowgreen;
    /* min-height: 100vh; */
    height: 100%;
    min-height: 0;
}
.toolbar {
    display: flex;
    align-items: center;
    padding: var(--spacing);
    gap: 8px;
    background-color: var(--bg-toolbar);
}
.core {
    /* As flex child */
    flex-grow: 1;

    /* As flex parent */
    display: flex;
    flex-flow: column;

    /* NOTE: min-height is subtle, but critical.
     *       Without setting it to zero a window resize (to a smaller height)
     *       will not cause the core to automatically size
     *       down, and thus the contained child canvas will also not get sized down.
     */
    min-height: 0;
    background-color: var(--bg-core);
}
.menubar {
    color: var(--text-menubar-primary);
    display: flex;
    padding: 0px 6px 0px 4px;
    background-image: linear-gradient(var(--bg-menubar-top), var(--bg-menubar-bot));
    border-bottom: var(--border-menubar) 1px solid;
    font-size: 16px;
}
.menubar .title{
    margin: var(--spacing);
    font-weight: 900;
}
.menubar .version{
    color: var(--text-menubar-secondary);
    margin: var(--spacing);
    padding-right: 10px;
    font-style: italic;
}
.menuitem{
    padding: 0px 9px;
    
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
.menuitem a{
    text-decoration: None;
    color: var(--text-primary);
}
/* Active menu tab */
.active{
    background-color: var(--bg-menuselect);
}