:root {
    /* https://www.w3schools.com/colors/colors_converter.asp */

    --colororange1: #321d0b;
    --colororange2: #552a07;
    --colororange3: #b85300;
    --colororange4: #f56e00;
    --colororange5: #ff8f33;

    --colorblue1: hsl(203, 64%, 12%);
    --colorblue2: hsl(203, 85%, 18%);
    --colorblue3: hsl(203, 100%, 36%);
    --colorblue4: hsl(203, 100%, 48%);
    --colorblue5: hsl(203, 100%, 60%);

    --colortheme3: #009b9e;
    --colortheme4: darkturquoise;
    --colortheme5: turquoise;

    --colorgrey1: #262626;
    --colorgrey2: #4d4d4d;
    --colorgrey3: #808080;
    --colorgrey4: #b3b3b3;
    --colorgrey5: #d9d9d9;

    --colorred1: #430a0a;
    --colorred2: #740606;
    --colorred3: #b80000;
    --colorred4: #f50000;
    --colorred5: #ff3333;

    --color-bg: #26272b;

    --color-primary: var(--colortheme4);
    --color-text-on-primary: var(--colorgrey1);

    --color-primary-hover: var(--colortheme3);
    --color-text-on-primary-hover: var(--colorgrey1);

    --color-text: var(--colorgrey5);
    --color-text-high: white;
    --color-text-disabled: var(--colorgrey3);

    --color-links: var(--colorgrey4);
    --color-links-hover: var(--colorgrey5);

    --color-text-success: limegreen;
    --color-text-warning: var(--colororange5);
    --color-text-error: var(--colorred4);

    --colorborder: var(--colorgrey4);
    --colortableborder: var(--colorborder);

    /*--main-font: 'Fira Sans', sans-serif;*/
    --main-font: 'Roboto', sans-serif;
    --mono-font: 'Ubuntu Mono', 'Source Code Pro', 'Menlo', monospace;
}

a:link,
a:visited {
    color: var(--color-links);
}

a:hover,
a:active {
    color: var(--color-links-hover);
}

html, body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--main-font);
    font-size: 14px;
}

html {
    position: relative;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100%;
}

p {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 1.6em;
    margin: 0.8em 0;
}

h2 {
    font-size: 1.4em;
    margin: 0.6em 0;
}

h3 {
    font-size: 1.2em;
    margin: 0.6em 0;
}

.Viewport {
    position: absolute;
    min-height: 100%;
}

.ContentView {
    padding: 20px;
}

.Color--success {
    color: var(--color-text-success);
}

.Color--warning {
    color: var(--color-text-warning);
}

.Color--error {
    color: var(--color-text-error);
}

/* RoundedButton */

.RoundedButton,
.RoundedButton:link,
.RoundedButton:visited {
    display: inline-block;
    text-align: center;
    width: 0.6em;
    height: 0.6em;
    border: 0.6em solid var(--color-primary);
    border-radius: 1em;
    background-color: var(--color-primary);
    transition: all 0.3s;
    padding: 0;
    margin: 0;
    font-size: 0.75em;
    line-height: 0.6em;
    /*overflow: hidden;*/
    text-overflow: ellipsis;

    text-decoration: none;
    color: var(--color-text-on-primary);
}

.RoundedButton.is-active,
.RoundedButton:hover,
.RoundedButton:active {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-on-primary-hover);
}

/* Button */

.Button,
.Button:link,
.Button:visited {
    display: inline-block;
    padding: 0.4em 1em;
    text-align: center;
    border-radius: 5px;
    border-style: solid;
    border-width: 0;
    border-color: var(--colorgrey5);
    font-size: 1em;
    cursor: pointer;
    /*text-transform: uppercase;*/
    font-weight: normal;
    transition: all 0.3s;
    overflow: hidden;
    text-overflow: ellipsis;

    background-color: var(--colorgrey5);
    color: var(--colorgrey1);

    text-decoration: none;
}

.Button.is-active,
.Button:hover {
    background-color: var(--colorgrey4);
    color: var(--colorgrey1);
}

/* Button--primary */

.Button--primary,
.Button--primary:link,
.Button--primary:visited {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.Button--primary.is-active,
.Button--primary:hover,
.Button--primary:active {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary-hover);
    color: var(--color-text-on-primary-hover);
}

.Flex {
    display: flex;
    width: 100%;
}

.Flex-cell1 {
    flex: 1;
}

.Flex-cell2 {
    flex: 2;
}

.Flex-cell3 {
    flex: 3;
}

.Table {
    display: table;
    border-collapse: collapse;
}

.Table-row {
    display: table-row;
    /*background-color: var(--colorgrey3);*/
    border-right: 2px solid var(--colortableborder);
    border-bottom: 2px solid var(--colortableborder);
}

.Table-row--header {
    /*background-color: var(--colorgrey4);*/
    font-weight: bold;
}

.Table-row--alternative {
    /*background-color: var(--colorgrey4);*/
}

.Table-cell {
    display: table-cell;
    border-top: 2px solid var(--colortableborder);
    border-left: 2px solid var(--colortableborder);
    padding: 8px;
    vertical-align: middle;
}

.Table-cell--header {
    /*background-color: var(--colorgrey4);*/
    font-weight: bold;
}

.Table-cell--nowrap {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.Table-cell--right {
    text-align: right;
}

.Toolbar {
    padding-top: 10px;
}

.Sidebar {
    color: var(--color-text);
    min-width: 150px;
    max-width: 150px;
    padding-left: 15px;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator */
    box-shadow: 0 0 5px 0 var(--colorgrey2);
}

.Sidebar ul {
    list-style-type: none;
    margin-top: 5px;
    padding-left: 0;
    font-weight: bold;
}

.Sidebar li {
    line-height: 2em;
    padding-left: 0;
}

.TextInput {
    background-color: var(--colorgrey1);
    border: 3px solid var(--colorborder);
    border-radius: 5px;
    color: var(--colorgrey5);
    line-height: 1.5em;
}

textarea {
    background-color: var(--colorgrey1);
    border: 3px solid var(--colorborder);
    border-radius: 5px;
    color: var(--colorgrey5);
}

.SelectInput {
    background-color: var(--colorgrey1);
    border: 3px solid var(--colorborder);
    border-radius: 5px;
    color: var(--colorgrey5);
    line-height: 1.5em;
    height: 2em;
}

.Login {
    padding: 20px;
}

.Flash {
    display: block;
    padding: 10px;
    margin: 10px 0;
    background-color: white;
    border: 2px solid black;
    color: black;
    font-weight: bold;
}

.Flash-error {
    background-color: palevioletred;
    border: 2px solid darkred;
    color: darkred;
}

.Flash-warning {
    background-color: lightyellow;
    border: 2px solid orange;
    color: orange;
}

.Flash-info {
    background-color: lightblue;
    border: 2px solid darkblue;
    color: darkblue;
}

.Align-w70p {
    width: 70%;
}

/* partial source: https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/ */
:root {
    --space-unit: 1em;
    --space-xs:   calc(0.5 * var(--space-unit));
    --space-sm:   calc(0.75 * var(--space-unit));
    --space-md:   calc(1.25 * var(--space-unit));
    --space-lg:   calc(2 * var(--space-unit));
    --space-xl:   calc(3.25 * var(--space-unit));
}

.margin-xs { margin: var(--space-xs); }
.margin-sm { margin: var(--space-sm); }
.margin-md { margin: var(--space-md); }
.margin-lg { margin: var(--space-lg); }
.margin-xl { margin: var(--space-xl); }

.margin-t-xs { margin-top: var(--space-xs); }
.margin-t-sm { margin-top: var(--space-sm); }
.margin-t-md { margin-top: var(--space-md); }
.margin-t-lg { margin-top: var(--space-lg); }
.margin-t-xl { margin-top: var(--space-xl); }

.margin-b-xs { margin-bottom: var(--space-xs); }
.margin-b-sm { margin-bottom: var(--space-sm); }
.margin-b-md { margin-bottom: var(--space-md); }
.margin-b-lg { margin-bottom: var(--space-lg); }
.margin-b-xl { margin-bottom: var(--space-xl); }

.margin-v-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.margin-v-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.margin-v-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.margin-v-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.margin-v-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

.margin-h-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.margin-h-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.margin-h-md { margin-left: var(--space-md); margin-right: var(--space-md); }
.margin-h-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
.margin-h-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }

.padding-xs { padding: var(--space-xs); }
.padding-sm { padding: var(--space-sm); }
.padding-md { padding: var(--space-md); }
.padding-lg { padding: var(--space-lg); }
.padding-xl { padding: var(--space-xl); }