/* html{font-size: 15px;} */

/* Header/Blog Title */
header {
    padding: 30px;
    text-align: center;
    background: white;
}

header h1 {
    font-size: 50px;
}

.navbar-brand {
    font-size: 12px;
}

/* Footer */
footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}

/* FLEXBOX
Before the Flexbox Layout module, there were four layout modes:
►Block, for sections in a webpage
►Inline, for text
►Table, for two-dimensional table data
►Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
voor meer info ► zie https://www.w3schools.com/css/css3_flexbox.asp
*/

/* FLEXBOX-CONTAINER = Parent Element
The flex container becomes flexible by setting the css-display of a class property to flex!
The flex container properties are:
►flex-direction
►flex-wrap
►flex-flow
►justify-content
►align-items
►align-content
*/
.flexbox-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}


/* FLEXBOX-ITEMS
The direct child elements of a flex container automatically becomes flexible (flex) items.
►order
►flex-grow
►flex-shrink
►flex-basis
►flex
►align-self
*/
.flexbox-item {
    margin-top: 20px;
    margin-left: 10px;
    padding: 15px;
    border: 5px double #333;
    border-radius: 15px;
}

.flexbox-lokalen-list, .flexbox-clusters-list {
    max-width: 1500px;
    flex-shrink: 0;
}

.flexbox-clusters-add, .flexbox-eisen-add, .flexbox-lokalen-add {
    flex-grow: 0.4;
    position: sticky;
    top: 0;
}

.flexbox-lokalen-fiche {
    flex-grow: 0.5;
}

.flexbox-clusters-fiche {
    flex-grow: 0.5;
}

.flexbox-objectenboom {
    flex-grow: 0.05;
}

/* TABLE */
table {
    max-width: 1400px;
    /* min-width: 1000px; */
    display: block;
    overflow-x: auto;
    /*white-space: nowrap;*/
}

table td {
    /*padding: 0.2em;*/
    border: solid 1px black;
}

.tbl-lokalen {
    padding: 0.2em;
    border: solid 1px black;
}

.tbl-elementeisen {
    max-width: 1200px;
}

.titelfiche th {
    padding: 10px 2px;
}

.tbl-list tr.spacer {
    height: 40px;
}

.tbl-list td, thead {
    border-bottom: solid 1px black;
}

/* .grijzeBg {
    background-color: grey;
} */