html * {box-sizing: border-box; font-size: 16px}
body {margin: 0; font-family: Arial, sans-serif}
button {padding: 0.3rem; cursor: pointer}

#app_container {height: 100vh; display: flex; flex-direction: column;}

#topbar {width: 100%; height: 5rem; display: flex; padding: 1rem 0.5rem }
#period {height: 100%; width: 600px; margin: 0rem 5rem}
#slider_period {height: 100%; width: 100%; position: relative; top: 10px} /* slider (parent element, for the slider itself see slider.css */

#nameplate {height: 100%; width: 24rem; color: white; font-size: 1.6rem; font-weight: bold; padding: 0.3rem 0.5rem}

.filler {flex-grow: 1}

#topbar_btns {height: 100%; flex-grow: 1; display: flex; justify-content: end; align-items: center; padding: 0.5rem 1rem 0.5rem 4rem}
#topbar_btns button {border: none; background: none; color: white; margin: 0rem 0.8rem; white-space: normal; min-width: 75px; max-width: 100px; font-weight: bold}
#topbar_btns .nameplate {justify-self: start}


#below_topbar {width: 100%; height: calc(100% - 5rem); display: flex}

#topbar {background-color: #1a6a98; box-shadow: 0 1px 3px 0 rgba(0,0,0,.16);}

#sidebar, #tabs {background-color: white} /* #0076b2 */

#sidebar {height: 100%; width: 400px; margin: 0px; position: relative; box-shadow:-2px 20px 25px 0 #555}
#sidebar:not(.collapsed) {min-width: 300px}
#sidebar.collapsed {width: 50px;}
#sidebar.collapsed * {display: none}
#sidebar.collapsed button {display: inline}

aside h2 {font-size:1.4rem; color: white; background:  #004663; margin: 0; padding: 1rem}

#btn_toggle_sidebar{width: 30px; height: 30px; display: block; color: white; border-radius: 8px; box-shadow: 0 3px 6px 0 rgba(0,0,0,.16); background: #1a6a98; font-size: 1.5rem; position: absolute; top: 50%; right: -15px; z-index: 1}
#btn_toggle_sidebar::before {content: "‹"; position: absolute; right: 12px}


#btn_toggle_sidebar.collapsed {background:  #414141; top: -1px; left: 0; width: 50px; height: 50px; padding: 10px; box-shadow: none; border-radius: 0px; font-size: 40px; display: block}
#btn_toggle_sidebar.collapsed::before {content: "›"; position: absolute; top:0px; left:20px}

#aside_scroll {height: 100%; overflow: auto; position: relative}

#station_searchbox {padding: 20px 10px; border: none}
#station_searchbox:focus {outline: none}
#zoek_icon{margin-left: 20px}

#stations {}

#stations > details > summary {background: #e2e2e2; padding: 1rem;}

summary {text-wrap: nowrap; font-size: 1.2rem; cursor:pointer}

/*.full, #zoekresultaten_list {max-height: 25rem; overflow: scroll}
.full a, #zoekresultaten a {font-size: 1.2rem; margin: 2rem; text-decoration: none; line-height: 2rem;}
a.highlighted {color: red; font-weight: bold} /* subset of #nameplate */
/* a::before {content: '•'; font-size: 2rem; padding: 0.2rem; margin-right: .5rem}*/ */


h1.red::before,     span.red::before {color: red}
h1.green::before,   span.green::before {color: lime}
h1.yellow::before,  span.yellow::before {color: yellow}
h1.gray::before,    span.gray::before {color: gray}

details span {tabindex: 0}

.full span, #zoekresultaten span {font-size: 1.2rem; margin: 2rem; text-decoration: none; line-height: 2rem; cursor:pointer}

span.highlighted {color: red; font-weight: bold} /* subset of #nameplate */
span::before {content: '•'; font-size: 2rem; padding: 0.2rem; margin-right: .5rem}

#sensors ins {margin-left: 2rem}


.magnet {display: inline; position: relative}
#sensors {position: absolute; top:-1.25rem; left: 0.5rem}


#right_of_stations {height: 100%; flex-grow: 1; display: flex; flex-direction: column}

#tabs {width: 100%; height: 4rem; display: flex;}

#tab_container {height: 100%; max-width: 80%; overflow-x: auto; display: flex; position: relative}
#station_vars {height: 100%; max-width: 50%; display: flex; flex-wrap: wrap}







.tab {padding: 1rem; border: 1px solid transparent; border-top-right-radius: 20px; margin-right: 0.5rem; background-color: #f1f1f1}
.tab:hover {background-color: #ddd}
.tab.active {background-color: #fff; border-color: #ccc #ccc transparent; font-weight: bold; border-width: 3px}




#main {width: 100%; flex-grow: 1; background-color: #f5f5f5; padding: 0rem 1rem; overflow:auto}
/* #main {box-shadow: 0 3px 6px 0 rgba(0,0,0,.16); margin: 10px} */

.mesa {box-shadow: 5px 10px 8px 0 rgba(0,0,0,.16); margin: 10px; background: white; float: left}


h1 {margin-top:0px}
h2 {margin-bottom: 0.2em}


#div_kaart, #div_graph, #div_tabel {width: 100%; height: 100%; display: none}

#main_foto img {max-height: 300px; max-width: 300px}

.error {font-weight: bold; border: 3px solid red}




.hidden {display: none}




/* HINTS AND MESSAGES */
#messages {position: fixed; top: 50%; left: 50%; max-width: 300px; display: flex; flex-direction: column;
background-color: rgba(0,0,0,0.2); align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 5px}

#hints {position: absolute; bottom: 10px; left: 10px; max-width: 500px; display: flex; flex-direction: column;
background-color: rgba(0,0,0,0.2); align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 5px}

.closable_box {background: white; padding: 0.5rem 1rem; margin: 1rem; border: 1px solid transparent; border-radius: 5px}
.message, .hint  {background: aquamarine; font-size: 1.2rem}

.btn_close {position: absolute; top: 7px; right: 6px;}


#messages .question {background: thistle}
.hint, .question .vraag {white-space: pre-wrap}
.hint li {font-size: 1.2rem}
.question .btns {display: flex; justify-content: space-around}
.question .btns button {margin: 0.5em; min-width: 6rem}

/* FOTO */
#main_foto img {margin: 5px}


/* USR */
#main_usr {display: flex}

#usr_left {display: flex; flex-direction: column; padding: 1em; overflow auto}
#usr_right {padding: 1em}

#usr_btn_save.changed {background-color: thistle}
#usr_btn_save.synced {background-color: palegreen}

#usr_bools {}
#usr_q_and_a {display: flex}
#usr_questions, #usr_answers {line-height: 2em; margin: 1em}

/* STATUS */
#main_status {overflow: scroll}
#main_status h1 {font-size: 1.5rem}
#main_status h1::before {content: '•'; font-size: 3rem; margin-right: .5rem; position: relative; top:7px}  /* colors defined earlier */

#status {display: flex}
#status_info {height: 100%}
#status_boorstaat, #status_pb {height: 100%; margin-left: 2rem}
#status_boorstaat img {max-width: 500px}

#status_pb img {height: 500px; width: 200px}
#status_pb {display: grid;
  grid-template-areas:
  "head head head head head head head head head head"
  "title_1 title_2 title_3 title_4 title_5 title_6 title_7 title_8 title_9 title_10"
  "pb_1 pb_2 pb_3 pb_4 pb_5 pb_6 pb_7 pb_8 pb_9 pb_10"
  "foot foot foot foot foot foot foot foot foot foot"}

#toggle_referentie_peil {grid-area: head}
#status_pb h2 {grid-row: 2; text-align: center}
#pb_remark {grid-area: foot; font: italic 1rem sans-serif}
#pb_img_1, #pb_svg_1 {grid-area: pb_1}
#pb_img_2, #pb_svg_2 {grid-area: pb_2}
#pb_img_3, #pb_svg_3 {grid-area: pb_3}
#pb_img_4, #pb_svg_4 {grid-area: pb_4}
#pb_img_5, #pb_svg_5 {grid-area: pb_5}
#pb_img_6, #pb_svg_6 {grid-area: pb_6}
#pb_img_7, #pb_svg_7 {grid-area: pb_7}
#pb_img_8, #pb_svg_8 {grid-area: pb_8}
#pb_img_9, #pb_svg_9 {grid-area: pb_9}
#pb_img_10, #pb_svg_10 {grid-area: pb_10}

#status_pb .peilbuis {stroke: white; stroke-width: 20px}
#status_pb .water {stroke: deepskyblue; stroke-width: 16px} /* rgba(28,163,236,0.5) opacity also possible */
#status_pb .sensor {stroke: gray; stroke-width: 7px}
#status_pb .kabel {stroke: black; stroke-width: 2px}
#status_pb .put {stroke: black; stroke-width: 6px; fill: none}
#status_pb .putdeksel {stroke: yellow; stroke-width: 3px; fill: none}
#status_pb .koker {stroke: silver; stroke-width: 3px; fill: none}
#status_pb .kokerPE {stroke: black; stroke-width: 5px; fill: none}
#status_pb .kokerkap {stroke: black; stroke-width: 3px}
#status_pb .kokerkapPE {stroke: black; stroke-width: 3px}

#status_pb .font_pb {font: 13px sans-serif}
#status_pb .label_background {stroke: black; stroke-width: 1px; fill: white}
#status_pb .label_lead {stroke: red; stroke-width: 2px}


/*
.grond{
  background:brown);
  background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}*/

/*
 * TABLE
 */
#main_tabel {display: flex; flex-direction: column}
#scroll_container {position: relative; border: 1px solid #ccc}
#visible_items {position: absolute; top: 0; left: 0; right: 0}



/*
 * OPTION SLIDER
 */
.option_slider{
  position: relative; display: inline-block; /* can have width/height, but not followed by a line-break */
  height: 24px; padding: 5px; margin: 5px; cursor: pointer; background-color: #ccc; border-radius: 24px;
}
.option_slider input {width:0; height: 0}  /* Hide default checkbox (still have the label to click) */

.option_slider_on, .option_slider_off {position: absolute; top: 0px; width: calc(50% + 3px); height: 100%; text-align: center; border-radius: 24px; padding-top: 2px; color: dimgray}
.option_slider_on {left: 0px}
.option_slider_off {right: 0px}

.option_slider input:checked~.option_slider_on, .option_slider input:not(:checked)~.option_slider_off  {background-color: #0076b2; color: white}

/*
 * TOGGLE SWITCH
 */
.toggle_switch {
  position: relative; display: inline-block; /* can have width/height, but not followed by a line-break */
  width: 50px; height: 24px; padding: 5px;
}
.toggle_switch input {width: 0; height: 0}  /* Hide default checkbox (still have the label to click) */

.toggle_slider {  /* The track */
  position: absolute; cursor: pointer; background-color: #ccc; border-radius: 24px; width: 100%; height: 100%; transition: background-color 0.2s}

.toggle_slider::before {  /* The circular slider */
  content: ""; position: absolute; height: 24px; width: 25px; background-color: #0076b2; border-radius: 50%; transition: transform 0.2s
}

/* Toggled state */
.toggle_switch input:checked+.toggle_slider {background-color: #4caf50}
.toggle_switch input:checked+.toggle_slider::before {transform: translateX(26px)}