/* 20181128 L.M.v.Breda */
/* zo veel mogelijk normaliseren uiterlijk websides, gerelateerd gedrag verschillende browsers  */
/* https://scotch.io/tutorials/a-look-at-bootstrap-4s-new-reset-rebootcss */
/* "css/navigation.css";*/
/* kleurenschema https://color.adobe.com/ 
iets in de buurt huidige schema
RGB 11,23,38
RGB 23,37,63
RGB 78,92,115
RGB 243,237,213
RGB 243,213,165
*/

/* outside-in: margin, border, padding, content */
/* units: https://www.w3schools.com/cssref/css_units.asp */

/* bovenaan als eerste css definities van anderen ! :) */
/* LvB20190102 Al die correcties, slecht idee @import "bootstrap_reboot.css"; */
/* @import "bootstrap_reboot.css"; */
/* echter 
    - dan krijg dan allerlei ongewenst margin randen, welke zelfs bijn magin 0 niet verdwijnen :( 
    >> er zat een default margin op de body op nul gezet dus (opgelost)
    - en ook de hoogte van mijn invoervelden is ongelijk, wat op zich oplosbaar lijkt :( 
    - en de browsers laten slechts 95%? van de pagina breedte zien wat natuurlijk ook niet klopt !!
    geexpirimenteerd met <meta name="viewport" content="width=device-width, initial-scale=1"/> varianten
    nog niet gelukt dit op te lossen :(
    - bootstrap_css kapt een behoorlijk aantal % van de breedte af. (verminderd viewwide tot 94??? %)
*/
/*
    ************** Hoofdstuk appart Media Quiries*************

    Onderstaande media quiries werken op de body, en daarom heb je een probleem als je aan de body een eigen class meegeeft !!!! 
*/
/* Responsive layout - makes a two column-layout instead of four columns
@media (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

Responsive layout - makes the two columns stack on top of each other instead of next to each other
@media (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}
*/
/* situatie mobieltje 
http://vizdevices.yesviz.com/devices/s9 + / let op 1px per 3 a 4 echte pix .... viewport 412 x 846
*/
/* Samsung S7 
@media only screen and (min-device-width: 414px) and (orientation: portrait) { 
}
@media only screen and (min-device-width: 732px) and (orientation: landscape) { 
}
*/
/* Samsung S9+ 
@media only screen and (min-device-width: 412px) and (orientation: portrait) {
}
@media only screen and (min-device-width: 846px) and (orientation: landscape) { 
}
*/
/* Onderstaande grens gebaseerd op een S7 in landscape mode */
@media only screen and (max-width: 729px) {

    /* meta name="viewport" content="width=device-width, initial-scale=1.0";
    bv ook navigatie als dorpdown menu */
    body {
        background-color: pink;
    }

    div.small_header {
        display: initial;
    }

    div.large_header {
        display: none;
    }

    div.small_mobile {
        display: initial;
    }

    div.middle_tablet {
        display: none;
    }

    div.large_pc {
        display: none;
    }

    div.advertising_mob {
        display: initial;
    }

    div.advertising_pc {
        display: none;
    }

    div.advertising {
        display: initial;
    }

    div.multi-column1 {
        column-count: 1;
    }

    .ons_menu th:nth-child(3) {
        display: none;
    }

    .ons_menu td:nth-child(3) {
        display: none;
    }
}


/* situatie tablet (S7 landscape (732) zie ik als tablet) */
@media only screen and (min-width:730px) and (max-width: 1599px) {

    /* meta name="viewport" content="width=device-width, initial-scale=1.0";
    bv ook navigatie als dorpdown menu */
    body {
        background-color: aqua;
    }

    div.small_header {
        display: none;
    }

    div.large_header {
        display: initial;
    }

    div.small_mobile {
        display: none;
    }

    div.middle_tablet {
        display: initial;
    }

    div.large_pc {
        display: none;
    }

    div.advertising_mob_only {
        display: initial;
    }

    div.advertising_pc_only {
        display: initial;
    }

    div.do_not_print {
        display: initial;
    }

    div.multi-column1 {
        column-count: 2;
    }
}


/* situatie pc */
@media only screen and (min-width:1600px) {

    /* meta name="viewport" content="width=device-width, initial-scale=1.0";
    bv ook navigatie als dorpdown menu */
    body {
        background-color: grey;
    }

    div.small_header {
        display: none;
    }

    div.large_header {
        display: initial;
    }

    div.small_mobile {
        display: none;
    }

    div.middle_tablet {
        display: none
    }

    div.large_pc {
        display: initial;
    }

    div.advertising_mob_only {
        display: initial;
    }

    div.advertising_pc_only {
        display: initial;
    }

    div.do_not_print {
        display: initial;
    }

    div.multi-column1 {
        column-count: 3
    }
}


/* situatie printer */
@media print {
    body {
        background-color: white;
    }

    div.small_header {
        display: none;
    }

    div.large_header {
        display: initial;
    }

    div.small_mobile {
        display: none;
    }

    div.middle_tablet {
        display: none;
    }

    div.large_pc {
        display: initial;
    }

    div.advertising_mob_only {
        display: none;
    }

    div.advertising_pc_only {
        display: none;
    }

    div.do_not_print {
        display: initial;
    }

    div.multi-column1 {
        column-count: 3;
    }

}

/* ^^^^^bovenaan eerst de standaard CSS elementen ^^^^^^ */



/* LvB20190102 When the width and height are calculated in CSS, the border and padding 
    are calculated on the outside of that width and height, adding additional space even 
    if it's set to width:100%;. In order to counteract this, you simply need to set the 
    element with the border to box-sizing:border-box;. That brings both the border and the 
    padding inside of the width and height calculation. */

* {
    box-sizing: border-box;
}


object {
    /* bull shit dat dit ding eigen eigenschappen heeft
    text-align:center;
    padding: 0;
    */
}

header {
    /* z-index: 10 */
    background-color: rgba(240, 206, 113, 0.527);
    margin: 0;
}

body {
    margin: 0px;
    font-family: "Filson Soft",Helvetica,Arial,sans-serif;
    font-size: 14px;
}

p {
    /* background-color:rgba(240, 206, 113, 0.527); */
    /* margin-left: 20px; */
}

h1, h2, h3, h4, h5, h6, button, input[type=submit] {
    color: navy;
}

h1 {
    /* font-family: verdana; */
    /* text-align: center */
    /* padding-left: 80px; */
    font-size: 250%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

h2 {
    /* font-family: verdana; */
    /* text-align: center */
    /* padding-left: 80px; */
    font-size: 200%
}

h3 {
    /* font-family: verdana; */
    /* text-align: center */
    font-size: 150%
}


h6 {
    /* !!! Used As h2 but witch extra page break before when printing !!!  */
    page-break-before:always;
    font-size: 200%;
    margin-top: 20px;
    margin-bottom: 20px;
}



ul {
    list-style-type: none;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

ul a:hover {
    color: red;
    background-color: transparent;
    /* text-decoration: underline; */
}


figure {
    display: inline !important; /* becarefull important not so good idea */
    margin: 0 !important;
}

figcaption {
    font-style: italic;
    font-size: 85%;
}

div {

}

input {
    padding: 5px;
}

button {
    font-size: larger;
    font-weight: bold;
    font-style: italic;
    padding: 5px;
    background-color: lightgray;
}


textarea {
    word-break: keep-all; /* this prevents lines to break halfway a word */
    hyphens: auto; /* Adds a hyphen where the word breaks */
    padding: 5px;
}

table {
    page-break-inside: avoid;
    border: 1px solid black;
    border-collapse: collapse;
}


tr {
    background-color: rgb(245, 243, 223);
    text-align: start;
}

th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 10px;
    margin: 0;
    text-align: left;
    /* https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break */
    overflow-wrap: break-word; /* Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line. */
    word-break: keep-all; /* this prevents lines to break halfway a word */
    /* word-break: break-all; /* also words which would fit on a line :( :( */
    /* I decided to break long words on the server side (but it is discusting) */
    hyphens: auto; /* Adds a hyphen where the word breaks, bad support, but trying does not harm  */
} 



/* ^^^^^ dan een aantal specials ^^^^^^ */

#pagedef {
    width: 100%; /* very very strange, when defining 100% than the page becomes too width (margin =0!!) 
        I had to define 96%. The problem is was div! I had to force margin and padding to 0 using !Important !! 
        Now there is the next problem :( :( Strange but ^solved^ it with 96% here!
    */
    /* checker: https://codebeautify.org/cssvalidate 
        Using width with padding-left can sometimes make elements larger than you expect.
        Don't use width or height when using padding or border.
        Solution is simple force css to calculate the padding, border etc at the inside
    */
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 10px;

    /* A margin would be the background color of the parent element. 
        https://www.quora.com/How-do-I-change-the-margin-color-on-CSS
        But as Sachin said you can use border or outline to create a border around an element. 
         For example if you wanted a thick black border around photos you would use 
         img {border:12px solid #000000;} */
    /* Margin: 0;
    border: 0;
        border-color:
    padding: 0;
    */
    background-color: rgb(255, 230, 153);
    /* scrollbar-highlight-color: */
    font-family: "Filson Soft",Helvetica,Arial,sans-serif;
    /* font-family: 'Abril Fatface', cursive; *'/
    /* font-family: 'Permanent Marker', cursive; */
    /* font-family: verdana; */
    /* border: 1px solid black; */
    font-size: 100%;
}

#titlestyle_mob {
    /* font-family: verdana; */
    font-size: 300%;
    font-weight: bold;
    font-style: italic;
    line-height: 1.1em;
    color: navy;
}

#titlestyle_pc {
    /* font-family: verdana; */
    font-size: 450%;
    font-weight: bold;
    font-style: italic;
    line-height: 1.1em;
    color: navy;
}



.small_copy_right {
    font-size: 7px;
    font-style: italic;
    vertical-align: top;
    text-align: right;
    margin: 0;
    padding: 0;
    padding-right: 5px;
}
/*
   ************** allerlei algemene hulp classes **********
*/
.rond {
    border-radius: 50%;
}

.txt_field {
    text-align: left;
    vertical-align: text-top;
    /* https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break */
    /* word-wrap: break-word; /* word-wrap does not break words when too width, but will place a word on next line if possible */
    word-break: break-all; /* will break the word when is crosses the container body on every character position */
    hyphens: auto;
}

.floatright {
    float: right;
    margin: 0 0 10px 10px;
    /* border: 1px solid black; */
    padding: 2px;
}

.clearfloat {
    float: none;
}

/* floatfix */
.clearfix {
    overflow: auto;
}


.home_icon {
    height: 60px;
    width: 80px;
    margin: 0;
    border: 0;
    padding: 0;
}

.align_header_txt {
    text-align: center;
    margin: 0;
    border: none;
    padding-left: 5px;
    padding-right: 5px;
    width: 75%;
}

.cursivehead {
    text-align: left;
    color: black;
    font-size: 200%;
    font-style: italic;
    margin-top: 15px;
    margin-bottom: 10px;
}

.center_txt {
    text-align: center;
}


/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.left {
    float: left;
}

.right {
    float: right;
}


/*
    ****************  Reserveren ******************
*/


.frm_res form {
    background-color: rgb(245, 243, 223);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    margin: 2px 0;
    width: 100%;
    box-sizing: border-box;
}

.frm_res input {
    width: 100%;
    background-color: rgb(245, 243, 223);
}

.frm_res input[type=text] {
    max-width: 460px;
}

.frm_res input[type=number] {
    max-width: 140px;
}

.frm_res input[type=email] { 
        max-width: 460px;
    }

.frm_res input[type=tel] {
        max-width: 460px;
    }

.frm_res input[type=password] {
        max-width: 460px;
}


.frm_res input[type=date] {
        max-width: 140px;
    }

.frm_res input[type=time] {
        max-width: 100px;
    }

.frm_res input[type=radio] {
        max-width: 1em;
    }

.frm_res input[type=file] {
    max-width: 460px;
    height: 30px;
}

.frm_res select {
    width: 160px;
    height: 30px;
    background-color: rgb(245, 243, 223);
}

.frm_res textarea {
    width: 100%;
    max-width: 460px;
    height: 50px;
    background-color: rgb(245, 243, 223);
}

.frm_res input[type="submit"] {
    font-family: "Filson Soft",Helvetica,Arial,sans-serif;
    font-size: larger;
    font-weight: bold;
    font-style: italic;
    padding: 5px;
    background-color: lightgray;
    max-width: 12em;
}


/*
    ****************  Overzicht Reserveringen ******************
    https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody
*/


/* expiriment "fixed_header" (scrollen) */

.ovz_res {
    width: 100%; /* alleen met deze toevoeging krijg ik volle breedte*/
}

    .ovz_res table {
        width: 100%;
        table-layout: fixed;
        /* border-collapse: collapse;  does not work with block elements */
        /* border-spacing:0px; not working either */
        border: 1.5px;
        background-color: #84ed86;
        color: #761a9b;
        margin: 0;
    }

    .ovz_res thead {
        /* https://ourcodeworld.com/articles/read/658/removing-whitespaces-between-inline-block-elements-with-css */
        /* width: 100%; //* to remove inter box space It does not work since the spacing is comming back when defining font size at th level :(  */
        /*   !!!!!! dubieus https://jigsaw.w3.org/css-validator/validator   width: calc(100%-17px); 17px = scrollbar width CSS checker keurt dit af maar toch ... */
    }

    .ovz_res th {
        display: inline-block; /* required for body(!) vertical scroll */
        text-align: center;
        /* font-size: 100%; /* to restore the fontsize set to 0 in the head to remove interbox space :( :) it DOES NOT WORK now the spacing is comming back as wel! */  
        font-style: italic;
        font-size: larger;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 5px;
        padding-right: 5px;
        background-color: lightgray;
        border: none;
    }

    .ovz_res tbody {
        /* space between header and body, no idea why margin and padding do not change that */
        /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
        height: 400px;
        width: 100%;
        /*   !!!!!! dubieus https://jigsaw.w3.org/css-validator/validator  width: calc(100%-17px);  17px = scrollbar width */
        display: inline-block; /* required for vertical scroll (have to be block not table) */
        overflow-y: visible; /* Trigger vertical scroll    */
        overflow-x: hidden; /* Hide the horizontal scroll */
    }


    .ovz_res td {
        text-align: center;
        vertical-align: text-top; /* multi line rows (fields with more content */
        border: none;
    }

.ovz_res tbody tr:hover {
    background-color: aquamarine;
}

.ovz_res tbody .selected {
        background-color: brown;
        color: #FFF;
    }

    /* .ovz_res th:nth-child(1), td:nth-child(1) {
    width: 4%;
} werkt niet helaas !!
    net als .ovz_res th:nth-child(1), .ovz_res td:nth-child(1)
*/

    .ovz_res th:nth-child(1) {
        width: 4%;
    }

    .ovz_res th:nth-child(2) {
        width: 12%;
        text-align: left;
    }

    .ovz_res th:nth-child(3) {
        width: 0;
        padding: 0;
        display: none;
        text-align: left;
    }

    .ovz_res th:nth-child(4) {
        width: 9%;
    }

    .ovz_res th:nth-child(5) {
        width: 7%;
    }

    .ovz_res th:nth-child(6) {
        width: 5%;
    }

    .ovz_res th:nth-child(7) {
        width: 23%;
        text-align: left;
    }

    .ovz_res th:nth-child(8) {
        width: 5%;
    }

    .ovz_res th:nth-child(9) {
        width: 6%;
    }

    .ovz_res th:nth-child(10) {
        width: 6%;
    }

    .ovz_res th:nth-child(11) {
        width: 23%; /* hum hum firefox and edge does have space between the boxes, so you can not use 100% :(  Do not know why tis seems to be ok with ^td^ */
        /* soved with trick removing spaces insource see https://ourcodeworld.com/articles/read/658/removing-whitespaces-between-inline-block-elements-with-css */
        /* see https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements */
        /* potential solution seems to be to set the font size of the parent container to 0; font-size:0pt; */
        text-align: left;
    }

    .ovz_res th:nth-child(12) {
        width: 0;
        padding: 0;
        display: none;
        text-align: left;
    }

    .ovz_res th:nth-child(13) {
        width: 0;
        padding: 0;
        display: none;
        text-align: left;
    }

    .ovz_res th:nth-child(14) {
        width: 0;
        padding: 0;
        display: none;
        text-align: left;
    }


    .ovz_res td:nth-child(1) {
        width: 4%;
    }

    .ovz_res td:nth-child(2) {
        width: 12%;
        text-align: left;
    }

    .ovz_res td:nth-child(3) {
        width: 0;
        padding: 0;
        display: none;
        text-align: left;
    } 

    .ovz_res td:nth-child(4) {
        width: 9%;
    }

    .ovz_res td:nth-child(5) {
        width: 7%;
    }

    .ovz_res td:nth-child(6) {
        width: 5%;
    }

    .ovz_res td:nth-child(7) {
        width: 23%;
        text-align: left;
    }

    .ovz_res td:nth-child(8) {
        width: 5%;
    }

    .ovz_res td:nth-child(9) {
        width: 6%;
    }

    .ovz_res td:nth-child(10) {
        width: 6%;
    }

    .ovz_res td:nth-child(11) {
        width: 23%;
        text-align: left;
    }

    .ovz_res td:nth-child(12) {
        width: 0;
        padding: 0;
        text-align: left;
        display: none;
    }

    .ovz_res td:nth-child(13) {
        width: 0;
        padding: 0;
        text-align: left;
        display: none;
    }

    .ovz_res td:nth-child(14) {
        width: 0;
        padding: 0;
        text-align: left;
        display: none;
    }


/*    ****************  Onze Kaart  ******************  */
        .ons_menu {
    width: 100%;
}

.ons_menu table {
    width: 100%;
    table-layout: fixed;
    border: 1.5px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.ons_menu div {
    padding: 5px; /* div container needed since padding does not work on the table cells due to border collapse*/
}

.ons_menu tr:nth-child(1) {
    height: 25px;
    line-height: 1;
}

.ons_menu th {
    border: none;
    /* column-span werkt op css niveau niet. Ook niet -webkit-column-span: all;  Chrome, Safari, Opera */
    /* -webkit-column-span: all; */
    /* los van of ik dat wil ^column-span: all;^ werkt niet */
    /* workarround ter voorkoming zichtbaarheid noodzakelijke header cel */
    font-style: italic;
    font-size: larger;
    background-color: lightgray;
    white-space: pre-wrap;
}


    .ons_menu td {
        border: none;
        white-space: pre-wrap;
    }

.ons_menu th:nth-child(1) {
    width: 10%;
}

.ons_menu th:nth-child(2) {
    width: 20%;
}

.ons_menu th:nth-child(3) {
    width: 35%;
    text-align: left;
}

.ons_menu th:nth-child(4) {
    width: 30%;
}

    .ons_menu td:nth-child(1) {
        width: 10%;
    }


    .ons_menu td:nth-child(2) {
        width: 20%;
        vertical-align: top;
        text-align: left;
    }




    .ons_menu td:nth-child(3) {
        width: 35%;
        vertical-align: top;
        text-align: left;
    }

.ons_menu td:nth-child(4) {
    width: 30%;
}


.ons_menu img {
    width: 100%; /* relative to the parent element (in this case the table cell) */
    padding: 0;
    max-width: 250px; /* maar moet niet te groot worden :) */
    align-content: center;
}

    
/*
    ****************  Onze Kaart statisch / oud ******************
*/


/* ^fixed header^ tables as implented below do have folling issue: (20181210 I do not have a simple solution yet)
setting display:block breaks the auto alignment of header and body . Any solution to fix that 
    https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

*/


/* expiriment "scrol_table" */

/*     float: right; */
.scrol_table {
    padding-left: 3%;
    padding-right: 10%;
    width: 30%;
    height: 200px;
    border-radius: 3px;
    padding-bottom: 50px;
}

.scrol_table vscrollable {
    overflow-x: hidden;
    overflow-y: scroll;
    display: block;
    height: 100px;
}


/*     display: table; */
.scrol_table thead {
    display: block;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    border-color: #CCC;
    width: calc(100% - 1em);
}

.scrol_table th {
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #CCC;
    color: #333;
    background-color: #F0F0F0;
    font-weight: bold;
    text-align: center;
}

/*     display: table; */
.vscrollable tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}


.scrol_table td {
    overflow-wrap: break-word;
    font-size: 14px;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #CCC;
    text-align: center;
}


/* https://www.w3schools.com/css/css3_multiple_columns.asp */

.multi-column1 {
    column-gap: 40px;
    column-rule-color: lightblue;
    column-rule: 1px solid;
    text-align: justify;
}

h2.multi-column1 {
    column-span: all;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 35em; /* a bit widther than a text input field */
    height: 55em; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-title {
}

.modal-header {
}

.modal-fade {
    display: none;
    border: 5px solid black;
    padding: 10px;
}

.modal-body {
}

.modal-dialog {
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}




.menu_items {
    width: 100%; /* alleen met deze toevoeging krijg ik volle breedte*/
}

    .menu_items table {
        width: 100%;
        table-layout: fixed;
        /* border-collapse: collapse;  does not work with block elements */
        /* border-spacing:0px; not working either */
        border: 1.5px;
        background-color: #84ed86;
        color: #761a9b;
        margin: 0;
    }

    .menu_items thead {
        /* lets try if it belongs here */
        display: inline-table; /* essential, not that I understand why :( */
        width: 100%; /* essential */
    }

    .menu_items tbody {
        /* space between header and body, no idea why margin and padding do not change that */
        /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
        display: inline-block; /* only a block has a height and can scroll */
        height: 460px;
        overflow-y: visible; /* Trigger vertical scroll    */
        overflow-x: hidden; /* Hide the horizontal scroll */
    }


.menu_items th {
    text-align: center;
    font-style: italic;
    font-size: larger;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: lightgray;
    border: none;
}

.menu_items td {
    vertical-align: text-top; /* multi line rows (fields with more content */
}

.menu_items tbody tr:hover {
    background-color: aquamarine;
}

.menu_items tbody .selected {
    background-color: brown;
    color: #FFF;
}

    .menu_items th:nth-child(1) {
        width: 12%;
    }

    .menu_items th:nth-child(2) {
        width: 15%;
    }

    .menu_items th:nth-child(3) {
        width: 10%;
    }

    .menu_items th:nth-child(4) {
        width: 60%;
        text-align: left;
    }


    .menu_items td:nth-child(1) {
        width: 12%;
    }

    .menu_items td:nth-child(2) {
        width: 15%;
    }

    .menu_items td:nth-child(3) {
        width: 10%;
    }

    .menu_items td:nth-child(4) {
        width: 60%;
        text-align: left;
    }


/* The Modal (background) */
.menu-items-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 460px; /* a bit widther than a text input field */
    height: 60em; /* Full height */
    /* overflow: auto;  Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.menu-items-modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.btn-group button {
    cursor: pointer; /* Pointer/hand icon */
    float: left; /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
    background-color: #3e8e41;
}

/* 
    ************** not used *************
*/

/*    order: 0;
flex-grow: 0;
flex-shrink: 1;
align-self:  ;
flex-direction: column;
  justify-content: center;
  align-items: center;
 */


.flex_menu {
    display: flex;
    background-color: white;
    height: 80px;
    flex-wrap: wrap;
}

    .flex_menu > div {
        background-color: DodgerBlue;
        color: white;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }


/* flex container https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */

.flex_header_container {
    display: flex;
    /* parameter does effect the box positions, not the content of the boxes*/
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
}


.floating-panel {
    position:   absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
}

.small_picture canvas {
    height: 250px;
    width: 250px;
}