body {
    position: relative;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* possibly to pass to base for uniform font family */
    background-color: white;
    margin: 0;
    padding: 0;
}

#page-container {
    position: relative;
    min-height: 100vh;
}

#content-wrap {
    padding-bottom: 3rem;    /* Footer height + footer padding */
    padding-left: 1rem;
    padding-right: 1rem;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;            /* Footer height */
    padding-bottom: 0.25rem;
    padding-top: 0.25rem;
}

footer p {
    margin: 0;
    font-size: small;
    color: gray;
    text-align: center;
}

a:link {
    color: black;
    text-decoration: underline dotted gray;
    cursor: pointer;
}

.error {
    color: red;
}

option {
    background-color: aliceblue;
}
option:hover {
    color: red;
    background-color: lavender;
}

input[type="checkbox"] {
    width: 2em;
    height: 2em;
    vertical-align: middle;
}

input[type="image"] {
    width: 2em;
    vertical-align: middle;
}

input[name="year"] {
    width: 4em;
}

/*Cause that's smoother*/
input[type='number'], input[type='text'], input[type='date'], input[type='datetime-local'], input[type='email'], input[type='password'], select {
    border: 1px solid black;
    border-radius: 0.25em;
    padding: 0.5em 1em;
    margin: 0.25em;
}

input:hover {
    background-color: aliceblue;
    border: 1px solid black;
    border-radius: .25em;
}


.hidden {
    display: none !important; /* to override display already defined */
}

.clickable {
    cursor: pointer;
}

.btn {
    margin: 0.25em;
    background-color: transparent;
    padding: .5em 1.5em;
    border-radius: 1em;
    border: 1px solid black;
    cursor: pointer;
}

.btn.imp {
    font-weight: bolder;
    border-radius: 0.5em;
}

.btn.imp:hover {
    background-color: lavenderblush;
}

.btn.imp:active {
    background-color: mistyrose;
}

.btn:hover {
    background-color: mintcream;
}

.btn:active {
    background-color: lavender;
}


input[type="number"].currency-value {
    width: 5em;
}

.currency-value:after {
    content: "€"; /* Tr */
}

/* Menu */

header {
    padding: .5em;
    background-color: aliceblue;
    border: 1px solid gray;
    border-radius: 0 0 2em 2em;
}

.menu {
    display: flex;
    flex-direction: row; /* small devices column */
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.menu a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: large;
}

.menu>* {
    margin: 0.25em;
    padding: 0.4em 1.5em;
    background-color: white;
    border: 1px solid black;
    border-radius: 0.5em;
}

.menu>*:hover {
    background-color: mintcream;
}

.menu>*:active {
    background-color: lavender;
}

.menu>*.selected {
    background-color: honeydew;
}

/* end Menu */

/* Add global things here */


/* To make flex arrays */
/* todo : add rules for table headers instead of adding them outside table container */
.table-container {
    max-height: 30em;
    overflow-y: auto;
}

.flex-table {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
}

.flex-row {
    flex-grow: 1;
    text-align: center;
    vertical-align: middle;
}

.flex-row.w0 {
    width: fit-content;
}

.flex-row.w4 {
    width: 25%;
}

.flex-row.w5 {
    width: 20%;
}

.flex-row.w6 {
    width: calc(100%/6);
}

/* Order arrow headers in tables */

.orderable::after {
    content: 'O';
}

.orderable.asc::after {
    content: 'A';
}

.orderable.dsc::after {
    content: 'V';
}