html, body { width:100%; height:100%; margin:0; background-color:#fff; color:#000; }
body { font:80% Verdana, Arial, Helvetica, sans-serif; }

* { box-sizing:border-box; }

h1, h2 { font-size:120%; }
h1 span { cursor:pointer; }
h2 { margin:5px 0 15px 0; }

h2 a.next_month, h2 a.prev_month { font-size:60%; }
h2 a { vertical-align: bottom; display: inline-block; }
h3 { font-size:90%; margin:0; }
p { margin:5px 0 10px 0; clear:both; }
a { color:#000; }
div { position:relative; }
dl { width:100%; max-width:300px; margin:2px 0 0px 0; }
dt, dd { margin:0px; padding:0px; }
dt { width:170px; display:inline-block; }
dd { display:inline-block; clear:right; }
dl .sum { border-top:solid #000 1px; font-weight:bold; }

em { font-size:90%; }

ul { margin:0 0 0 20px;}
li { list-style:square; margin:3px 0; }

sup {
    color: red;
    margin-top: -8px;
    display: inline-block;
}

svg.icon {
    height: 17px;
    width: 18px;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}

svg.bluesky {
    fill: #fff;
}

svg.caret {
    fill: #000;
    height:17px;
    width:12px;
    margin-right:5px;
}
svg.caret.right {
    transform: rotate(180deg);
    margin-right:0;
    margin-left: 5px;
}

pre { font-size:13px; }

label { width:150px; padding:2px 0; min-height:18px; line-height:16px; }

form { margin:0; padding:0; }
input, textarea,select { font-family:verdana,arial, Helvetica, sans-serif; border:solid #000 1px; background-color:#fff; }
select { margin-right:5px; }

legend { font-weight:bold; padding:0px 5px; margin:0; color:#000; }

fieldset{ border:solid #000 1px; padding:0px 10px 10px 10px; position:relative;}

div.field-button-wrapper { text-align:right; }
div.field-button-wrapper input { height:16px; padding:2px; }
div.field-button-wrapper input.submit { height:22px; padding:0 8px;}

div.field-button-wrapper.search-city { width:400px; }
div.field-button-wrapper.search-city input{ left:125px; width:160px; }
div.field-button-wrapper.search-city input.submit { left:300px; width:80px; }


.left { text-align:left; }

form#searchWrapper { display:inline-block; width:55%; vertical-align:top; padding:3px 5px; }
fieldset#zoeken { }
fieldset#zoeken, form { border:none; margin:0; padding:0; }
input.submit { padding:0 10px; background-color:#e5e5e5; }

div.field-button-wrapper.select-month { }
div.field-button-wrapper.select-month select { margin:0 3px 0 0; display:inline-block; }
div.field-button-wrapper.select-month select.station { width:160px; border:solid #fff 1px; }
div.field-button-wrapper.select-month select.year{ border:solid #fff 1px; }
div.field-button-wrapper.select-month select.month{ border:solid #fff 1px; }
div.field-button-wrapper.select-month input.submit { width:70px; }

#weersverwachting_zoeken { width:540px; }
#weersverwachting_zoeken legend { margin:3px 5px 10px 5px; }
#weersverwachting_zoeken input { }


table { width:100%; border:solid #000 1px; border-collapse:collapse; }
tr.fc td:nth-child(-n+4) { color:#565656; font-weight:bold; font-style:italic; }
tr.fc.black td { color:#000; }
tr.lg { color:gray; }
tr.black { color:#000; font-weight: bold;}
tr.weekend { background-color:#EAEAEA; }
tr.current td { font-weight:bold; }

th { padding:1px 4px; background-color:gray; color:#fff; text-align:right; font-size:90%; border: solid gray 1px; } /*writing-mode:tb-rl;*/
tr.header th { text-align:center; }
th span { cursor:pointer; }
td { padding:0.25em 0.3em; border:solid #bbb 1px; text-align:center;}

tr.black td.n { font-weight:bold; }

.button { border:solid #000 1px; margin:1px; }

.update { position:absolute; right:10px; top:6px; }

#container { margin:0 auto; min-height:100%; position:relative; background-color:#F8F8F8; min-width:490px; max-width:980px; border:solid #000 1px; }

#datum { display:none; }
#header { width:100%; background-color:#424242; color:#fff; font-weight:bold; text-align:left; }
#header h1 { display:inline-block; width:44%; margin:0; padding:5px 10px; text-align:left; }
#header a { color:#fff; text-decoration:none; }

#navi { position:absolute; padding:5px; background-color:#fff; border:solid #000 1px; top:0; left:0; z-index:1000;}
#navi table { position:relative; }
#navi td { padding:0; }
#navi a { text-decoration:none; display:block; width:42px; height:18px; color:#000; }
#navi a:hover { background-color:#CCCCCC; }


#right-text { _width:175px; min-width:175px; max-width:300px; position:absolute; top:20px; left:910px; right:10px; text-align:justify; display:none;}

#stats { margin:0px; width:100%; min-height:100%; position:relative; }
#stats .gem { height:20px;  font-weight:bold; background-color:black; color:#fff; }
#content { width:100%; height:100%; vertical-align:top; }
#top-content { display:inline-block; margin:0; vertical-align:top; padding:1em; width:100%; min-height:426px; }
#left-items { display:inline-block; margin:0; width:60%; min-width:490px; vertical-align:top; padding:1em; }
#maandgem, #lopendemaand, #dagstats, #zonduur, #maanden, table.monthTable { margin:10px 0 0 0; position:relative; }
#lopendemaand { }
#dagstats table { width:100%; }
#dagstats h2 { margin-top:0; }

#act_temp, #verw_temp, #act_rain { border:solid #000 0px; display:none; width:569px; position:fixed; top:25px; left: 50%; transform: translateX(-50%); z-index: 100; background-color:#fff; box-shadow:7px 7px 10px #444;}
#act_temp img, #verw_temp img { cursor:pointer; display:block; }
#act_temp span { cursor:pointer; margin-left:1px; display:inline-block; padding:0.5em 1em; border:solid #333 1px; background-color:#444; color:#fff; }
#act_temp span:hover,
#act_temp span:active { background-color:#999; }
#act_temp div.close { text-align:right; padding:5px; cursor:pointer; }
.left { width:100%; margin:10px 0; }
#totnu { position:relative; margin-top:0.6em; }
#totnu table { position:relative;}
#totnu-periode { clear:both; }

table.monthTable {
    width:auto;
    display:inline-block;
    margin:10px 0 10px 8px;
    vertical-align:top;
}
table.monthTable th { width: 300px; }
table.monthTable tr.title th { text-align: left; padding-bottom:7px; }
table.monthTable td { width: 100px; }

#totnu-periode dl { width:340px; clear:both; height:50px;}
#totnu-periode dl dt { width:50px; height:25px; }
#totnu-periode dl dd { width:250px; height:25px; clear:none;}

#right-items { display:inline-block; margin-bottom:10px; width:40%; vertical-align:top; padding:1em; }
#right-items div.inner-wrapper { }
#grafieken { padding:10px; position:relative;}
#grafiek { width:480px; padding:0px 0; float:left; border:solid #000 1px; border-bottom-width:2px; border-left-width:2px; position:relative; background-color:#F1F1F1;  }
#grafiek div { width:3px; height:3px; position:absolute; background-color:red; }
#grafiek .min { background-color:blue; }
#grafiek .gem { background-color:green; height:3px;}
#grafiek .fc { background-color:gray; }

#grafiek .grafieklijn { position:absolute; float:left; background:transparent; }
#grafiek .grafieklijn div { position:absolute; height:1px; width:1px; background-color:red; }

.x-as { width:480px; padding:0 0 0 15px; float:left; font:normal 80% Arial; }
.x-as div { width:16px; float:left; text-align:center; }

.y-as { width:15px; height:212px; margin:-5px 0; float:left; font:normal 80% Arial; }
.y-as .max { height:200px; }
#grafiek div.mediaan { width:480px; height:1px; background-color:#969696; position:absolute; }

.tableOverflow {
    overflow-x: scroll;
/*    mask-image: linear-gradient(to right, rgba(255,0,0,1) 96%, rgba(255,0,0,0.4));*/

}

.tableBorder {
    border:solid #000 1px;
    margin-bottom:10px;
}

#lopendemaandTable { width:100%; min-width: 820px; border: none;
  border-collapse: separate;
  border-spacing: 0;
}
#lopendemaandTable td { border:none; text-align: right; padding-right:0.7em; padding-left:0.1em; }
#lopendemaandTable tr.weekend td { border-bottom: solid #EAEAEA 1px; border-left: solid #EAEAEA 1px; }
#lopendemaandTable th { text-align: right; padding:0.3em; padding-right:0.7em; padding-left:0.1em; }
#lopendemaandTable tr.header th { text-align: center; padding:0.3em; }
#lopendemaandTable tr td a { display:block; }
#lopendemaandTable tr th.cur { text-align: right; padding-right:0.7em; padding-left:0.1em; }
#lopendemaandTable tr th.extr,
#lopendemaandTable tr td.extr { border-left: solid #666 2px; }
#lopendemaandTable tfoot tr td.extr { border-left: solid #333 2px; }

#lopendemaandTable col { border: none; }
#lopendemaandTable col.day { min-width:50px; }
#lopendemaandTable colgroup.days { border-right:solid #000 3px; border-left:none;}
/*#lopendemaandTable colgroup.days col.day { position: sticky; left:0; }*/
#lopendemaandTable colgroup.extremes { border-left:solid #000 2px;  }/*width:105px;*/
#lopendemaandTable tfoot td { border-bottom: solid #000 1px; }

#lopendemaandTable tr.header>th:first-child,
#lopendemaandTable tr>td:first-child {
  position: sticky;
  left: 0;
  border-right:solid #666 1px;
  z-index: 2;
}
#lopendemaandTable tbody tr>td:first-child { background-color: #F8F8F8; }
#lopendemaandTable tbody tr.weekend>td:first-child { background-color: #EAEAEA; }
#lopendemaandTable tfoot tr>td:first-child { border-right: solid #333 1px; background-color: #000; }
#lopendemaandTable tfoot tr>td:first-child:after { border-bottom: solid #000 1px; }
#lopendemaandTable tr>th.extr,
#lopendemaandTable tr>td:nth-child(2n+5) { padding-right:0.15em; }
#lopendemaandTable tr>th:nth-child(2n+6),
#lopendemaandTable tr>td:nth-child(2n+6) { padding-left:0.15em; }


.clear { clear:both; height:0px; font-size:0px; line-height:0px; }
#footer { background-color:#9e9d9d; width:100%; display: flex; }
#footer div { margin:7px; }
#footer div.credits { font-size:70%; margin-top:9px; }
#footer div.icons { height:16px; min-width:81px; }
#footer div.icons a { display: block; color:#fff; font-size:90%; text-decoration: none; }
#footer div.icons a svg { width:17px; }

#dagstats_screen { width:600px; min-height:300px; position:fixed; top:25px; left: 50%; transform: translateX(-50%); border:solid 2px #424242; background-color:#F8F8F8; text-align:center; cursor:move; z-index: 10; }
#dagstats_screen .wrapper { width:100%; padding:0 10px 10px 10px; float:left; text-align:left; }
#dagstats_screen h1 { margin:8px 0 0 0; width:66%; text-align: left; }
#dagstats_screen .close { width:20%; text-align: right; cursor: pointer; font-size:22px; font-weight: bold; margin-top:5px;  }
#dagstats_screen h3 { margin:15px 0 5px 0; }
#dagstats_screen th { width:45%; padding:3px 6px; border:none; }
#dagstats_screen td { text-align:left; padding:3px 6px; border:none; }

#dagstats_screen .head { padding:2px 15px; display: flex; }
#dagstats_screen .head div { width:30%;  }

.foot .query { float:left; }
.foot .close { float:right; cursor:pointer; }

#footer #parsetime { padding:5px 0;}
#parsetime table { margin:0;width:100%; }
#parsetime table td { text-align:left; }

#winddirection { overflow:hidden; }

#send-note { width:95%; padding:10px; margin:10px; border:solid #000 1px; background-color:#e5e5e5; border-bottom:solid gray 5px; border-right:solid gray 5px; position:relative; z-index:1000; }
#send-note fieldset { border:none; margin:0; padding:0; }
#send-note h2 { margin-top:0px; }
.form label { width:250px; float:left; }
.form input { border:solid #000 1px; margin:1px 0; width:268px; }
.form textarea { border:solid #000 1px; width:268px; }
#send-note input.submit{ width:140px; }
input.close { margin-left:3px; width:110px; }

.link { text-decoration:underline; cursor:pointer; }
 
#current-temp-wrapper { position:absolute; left:405px; top:7px; font-size:80%; font-weight:normal; margin-right:10px; }
#current-temp-wrapper a { float:left; width:140px; height:12px; position:relative; text-align:left; background-color:#424242; overflow:hidden; padding:0 4px 3px 4px; z-index:2000; }
#current-temp-wrapper a:hover { height:auto; }
#current-temp-wrapper dl { margin:4px 0; padding:0; border-top:solid #fff 1px; }
#current-temp-wrapper dt { margin:0; padding:0; width:100px; clear:left; }
#current-temp-wrapper dd { clear:right; }

div.extra ins { }
div.extra { padding:20px 2px 10px 2px; text-align:center; }
div.extra div.adLabel { text-align:center; color:#999; font-size:10px; margin:0 0 5px 0; }
span.hour { color:#999; }

a.next_year { text-decoration:none; font-size:75%; }

#forecast-type { float:right; margin-top:-30px; }
#forecast-type a { border:solid #333 1px; text-decoration:none; padding:1px 3px; margin:0 3px; }
#forecast-type a.current { background-color:#333; color:#fff; }
#forecast-type a:hover { background-color:#999; }

img.loadingImg { position:absolute; left:50%; top:50%; }
p.currentWeather { width:100%; text-decoration:underline; cursor:pointer; padding:5px 0; }
p.currentWeather:hover,
p.currentWeather:active { background-color:#e5e5e5; }

.aWrapper { display: none; }

#heatWaves { max-width:600px; }
#heatWaves th { text-align:left; }
#heatWaves th.period { width:40%; }
#heatWaves th.numberOfDays { width:25%; }
#heatWaves th.max { width:35%; }
#heatWaves td { text-align:left; }
#heatWaves tbody td:first-child { min-width: 40px; min-width: 50px; text-align:right; padding-right:10px; }
#heatWaves td.record { font-weight:bold; }
#heatWaves tfoot td { font-weight:bold; }
#heatWaves a { text-decoration-color: #999; }
#heatWaves tr.ongoing { font-style: italic; }
#heatWaves tr.ongoing td { background-color: #e5e5e5; }

#detailedWeatherData { display: flex; }
#detailedWeatherData .filter { max-width: 400px; }
#detailedWeatherData .data { max-width: 300px; }
#detailedWeatherData .data th { text-align: center; }
#detailedWeatherData label { display:block; width:100%; margin:5px 0; }
#detailedWeatherData select { max-width:220px; }

#ccWrapper {
    height:100%;
    width:100%;
    background-color: rgba(0, 0, 0, 0.75);
    position:fixed;
    top:0;
    left:0;
    z-index:8888;
    display:none;
}
#cc {
    margin:0 auto;
    max-width:500px;
    min-height:450px;
    border:solid #000 1px;
    background-color:#fff;
    position:absolute;
    top:100px;
    right:0;
    left:0;
    box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
    padding:10px 20px;
    font-size:1.05em;
    line-height:1.4em;
    z-index:9999;
}
#cc h1 { background-color:#666; color:#fff; padding:8px 10px; }
#cc form input {
    padding:10px 15px;
    background-color:#3F8F4B;
    color:#fff;
    cursor:pointer;
    margin:10px 0 20px 0;
    border-radius:2px;
    border:none;
    font-weight:bold;
}

@media screen and (max-width: 835px) {
    body { font-size:100%; }
    #container { border:none; }
    #top-content,
    #left-items { width:100%; padding:0.5em; padding-top:0; }
    table { font-size:80%; }

    #right-items { width:100%; min-width:360px; padding:0.5em; padding-top:0; }
    #act_temp { width:100%; }
    #act_temp span { font-size:75%; padding:0.5em 0.9em; }
    #act_temp img{ width:100%; }
    #dagstats_screen { width:100%; }
}