@charset "UTF-8"; /* first 8 lines must remain like this, filename: new.css */
:root {
	--color1: #e0f3fb;
	--color2: #4cbae6;
	--color3: #1987b3;
	--color4: #1a3e4c;
	--color5: #092834;

	--color1b: #e0f3fb5f;
	--color2b: #4cbae65f;
	--color3b: #1987b35f;
	--color4b: #1a3e4c5f;	
	--color5b: #0928345f;

	--grijs: gray;
	--donkergrijs: dimgray;
	--klimaat: #d6f8fb;
	--nginxvpn: #dddddd;

	--colorvpn1: #FFFFFF;
	--colorvpn2: #A4CFE0;
	--colorvpn3: #58A7C6;
	--colorvpn4: #2F6F89;
	--colorvpn5: #0D3849;
} 

body {
	background-color: var(--color4);
	color: var(--color2);
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 90%;
	padding-bottom: 20px;
	height: 100%;
	margin: 0;
	background-position-x: left; 
	background-image: url("meetlat200px.svg"); 
	background-repeat: no-repeat; 
}

.bold {
	/* color: var(--color1); */
	font-weight: bold;
}
.bottom{
	position: absolute;
	bottom: 45px;
	left: auto;
	right: auto;
}
.bottomtextontop{
	position: fixed;
	bottom: 20px;
	width: 100%;
	text-align: center;
	color: silver;
	font-size: x-small; 
	z-index: 150; 
}
.boxshadow{
	box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
}
.kortelijnlinks{
	text-align: left;
	margin-left: 0;
	width: 150px;
	color: orangered;
}
.arrayblokweergave{
	padding: 5px;
	color: dimgray;
	background-color: rgba(255, 255, 255, 0.5);
}
.arrayblokweergaveactive{
	padding: 5px;
	color: black;
	background-color: rgba(255, 255, 255, 0.5);
}
.midden{
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
}

.tekstgrootinline{
	font-size: 1.5em;
	display: inline;
	min-width: 180px;
	height: auto;
}

.tekstlinks{
	text-align: left;
}
.tekstrechts{
	text-align: right;
}
.tekstverdelen{
	text-align: justify;
}
.tekstmidden{
	text-align: center;
}
.tekstKlein{
	font-size: 0.625em;
}
.emojiGroot{
	font-size: 1.625em;
}
.boven {
	padding: 10px;
	width: 100%;
	height:100%;
	color: var(--color3);
	background-color: var(--color5);
}

.beneden {
	padding: 10px;
	width: 100%;
	height: 50px;
	color: var(--color2);
	background-color: var(--color4);
}


.blokVolleBreedte{
	display: block;
	width: 100%;
	height: auto;
}


.blacklisted, .blacklistedAuto{
	font-size: 0.8125em;
	color: gray;
	background-color: var(--color5);
	text-align: left;
	padding-left: 5px;
}
.blacklistedAuto{
	color: var(--color2);
}
.blacklistBlock, .blacklistBlockAuto{
	font-size: 0.8125em;
	min-width:max-content;
	max-width: 400px;
	max-height: 200px;
	float:left;
	position: relative;
	top: 0;
	left: 0;
	word-wrap: none;
	overflow: auto;
}
.flexAlignItems{
	display: flex;
	align-items: center;
	justify-content: left;
}

.flexcolumCenter{
	display: flex;
	flex-direction: column;
	scroll-snap-type: y mandatory;
	scroll-snap-align: center;
}
.flexcolum{
	display: flex;
	flex-direction: column;
	scroll-snap-type: y mandatory;
}
.flexcolumReverse{
	display: flex;
	flex-direction: column-reverse;
	scroll-snap-type: y mandatory;
}
.flexcolumEigen{
	display: flex;
	flex-direction: initial;
}
.lastBlackListed{
	font-size: 0.8125em;
	word-wrap: none;
	overflow: hidden; 
	white-space: nowrap; 
	display: block; 
	text-overflow: ellipsis;
}
.requestBLcolums {
	column-count: 3;
}
.requestBLlog{
	position: static;
	width: auto;
	height: auto;
	padding: 5px;
}

.weerColor1{
	color: var(--color2);
}
.weerColor2{
	color: var(--color3);
}
.weerColor3{
	color: var(--color1);
}
.weerIconSmall{
	width: 24px;
	height: 24px;
}

.chartImageContainer, .chartImageContainerIphone {
	position: relative; 
	left: 0;
	float: left;
	text-align: center;
	color: var(--color1);
	text-shadow: 1px 1px var(--color4);
}
.chartImageContainerIphone {
	color: var(--color4);
	text-shadow: 1px 1px var(--color1);
}
.erbovenoptitel{color: var(--color1);padding-left: 5px;}
.textOverlayCentered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tekstblokMidden{
	margin: auto;
	max-width: 875px;
	border: 1px solid var(--color4);
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 0.8125em;
}
.tekstblokMiddenGroot{
	margin: auto;
	max-width: 890px;
	border: 1px solid var(--color4);
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	max-height: 780px;

}
#huidigewaarden{
	width: 100%;
}
#viewerHeader{
	height:	auto;
	display: grid;
	grid-template-columns: auto auto auto ;
	padding: auto;
}
#viewerHeader > div{
	padding: 2px;
}

#toppart, #bottompart{
	max-width: 1100px; 
}
#charts{
	max-width: 1100px; 
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 1px;
}
#charts > div{
	padding: 1px;
	margin-left: auto;
	margin-right: auto;
}

.debugheader{
	color: var(--color1);
	padding: 5px;
	margin-left: auto;
	margin-right: auto;
	font-weight: bold;
	background-color: var(--color3);
}
.down{
	z-index: 2;
}

.blockcenter300px{
	display: block;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}
.blockcenter, .blockcenter800{
	display: block;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.blockcenter880{
	display: block;
	width: 880px;
	margin-left: auto;
	margin-right: auto;
}
.blocktext{
	display:inline;
}
.blocktextinline{
	display: inline-block;
}
.block200{
	display: block;
	width: 200px;
}
.block300{
	display: block;
	width: 300px;
}
.block380{
	display: block;
	width: 380px;
}

#linksFiles{
	max-width: 1100px;
	height:	auto;
	display: grid;
	gap: 10px;
	grid-template-columns: auto auto auto auto;
	padding: 10px;
}
#linksFiles > div{
	background-color: var(--color4);
	opacity: 0.7;
	margin-left: auto;
	min-width: 100%;
	margin-right: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 10px;
}
#linksFiles > div:hover{
	background-color: var(--color4);
	opacity: 1;
}
#linksFiles > div a:hover{
	color: var(--color1);
}

#tabellen{
	max-width: 1100px; 
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 3px;
	padding: 1px;
}
#tabellen > div{
	padding: 1px;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--color4);
}
#LinkerkolomBoven{
	width:auto;
}
#LinkerkolomOnder{
	width: auto;
}
.middenButton{
	padding-top: 10px;
	margin: auto;
	width:fit-content;
}
.middenGroot{
	padding-top: 100px;
	text-align: center;
	font-size: 1.125em;
}
.middenKlein{
	padding-top: 50px;
	text-align: center;
	font-size: 0.8125em;
}
.middenPadding25{
	padding: 25px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.middenSVG{
	padding-top: 200px;
	margin: auto;
	width: 300px;
}

.screenOpen {
	background-color: var(--color3);
	background-position-x: left; 
	background-image: url("./screenOpen.svg"); 
	background-repeat: no-repeat; 
}
.screenClosed {
	background-color: var(--color4);
	background-position-x: left; 
	background-image: url("./screenClosed.svg"); 
	background-repeat: no-repeat; 
}
.solarsvg{
	width: auto;
	margin: 0;
	height: 12px;
}
.solarsvggroot{
	width:auto;
	height: 40px;
	/* margin-bottom: auto;
	margin-top: auto; */
	margin-right: auto;
	margin-left: auto;
	float: none;
}

.svgcontainer{
	padding-top: 20px;
	position: relative;
	text-align: center;
	color: var(--color1);
}
.svgtextcentered{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-25%);
	background-color: var(--color5);
	opacity: 0.9925;
	padding-left: 3px;
	padding-right: 3px;
	box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
}
.svgsolarpanel{
	width: 600px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.svgchart{
	width: 600px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.titleZPicon{
	display: flex;
	max-width: fit-content;
	max-height: fit-content;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2px;
	margin-bottom: 2px;
}
.titleImageBlock{
	padding: 1px;
}
.titleInfoBlock{
	height: 100%;
	display: flex;
	padding: 1px;
	text-align: center;
	flex-direction: column;
	justify-content: space-between;
	color: var(--color1);
}
.titleTextBlock{
	position: absolute;
	color: var(--color1);
	top: 1px;
	left: 1px;
	display: inline-block;
	height: 36px;
	text-align: center;
	width: 100%;
	margin-bottom: 2px;
	margin-top: 2px;
}
div.polaroid, div.polaroid9_3_5 {
	max-width: 360px;
	background-color: var(--color4);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-bottom: 5px;
}
div.polaroid9_3_5{
	max-width: 100%;
}
div.polaroidtable {
	min-width: 25%;
	float: left;
	background-color: var(--color4);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin: 5px;
	height: auto;
}

div.polaroid img{
	background-color: #666;
	height: 153px;
	width: 360px;
}

.tekstlabel{
	text-align: center;
	padding: 3px 3px;
	font-size: 0.8125em;
}

.item1{
	text-align: center;
}
.item2{
	text-align: center;
}
.item3{
	text-align: center;
}
.itemIM1 { grid-area: header; }
.itemIM2 { grid-area: menu; }
.itemIM3 { grid-area: main; }
.itemIM4 { grid-area: right; }
.itemIM5 { grid-area: footer; }

.fullwidth{
	width: 100%;
	margin-bottom: 5px;
}

.grid-charts, .grid-charts60auto, .grid-tables, .grid-text, .grid-text2, .grid-textmidden, .grid-textmidden-2, .grid-textmidden-3 {
	float:none;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-auto-columns: 50%;
	grid: auto / auto auto;
	grid-gap: 2px;
	background-color: inherit;
}
.grid-charts60auto {
	grid: auto / 60% auto;
}
.grid-raincharts{
	grid: auto / 50% 50%;
	float:none;
	max-width: 1010px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-auto-columns: 50%;
	grid-gap: 2px;
	background-color: inherit;
}
.grid-tables, .grid-text{
	grid-auto-columns: 33%;
	grid: auto / auto auto auto;
}
.grid-textmidden-2{
	grid-auto-columns: 50%;
	grid: auto / auto auto;
	margin-top: 5px;
}
.grid-textmidden-3{
	grid-auto-columns: 33%;
	grid: auto / 33% 33% 33%;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	height: 100px;
	width: 890px;
	z-index: 100;
}
.grid-text2, .grid-textmidden, .grid-textmidden-2{
	max-width: 1010px;
	position:relative;
	left: 0px;
	top: 0px;
	z-index:99;
	grid-gap: 8px;
}
.grid-textmidden, .grid-textmidden-3{
	max-width: 890px;
}
.grid-charts > div, .grid-tables > div {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.grid-raincharts > div {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.grid-text > div{
	text-align: left;
	margin-right: auto;
	max-width: 750px;
}
.grid-text2 > div {
	text-align: left;
	margin-left: 3px;
	margin-right: auto;
	width: 450px;
}
.grid-text-ds{
	float:none;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-auto-columns: 50%;
	grid: auto / auto auto;
	grid-gap: 2px;
	background-color: inherit;
}
.grid-text-ds > div{
	text-align: left;
	margin-left: 3px;
	margin-right: auto;
	width: fit-content;
}
.grid-textmidden > div {
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}
.grid-textmidden-2 > div {
	margin-left: auto;
	margin-right: auto;
}
.grid-textmidden-3 > div {
	margin-left: auto;
	margin-right: auto;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: var(--color3);
  padding: 10px;
}

.grid-container > div {
  background-color: var(--color4);
  text-align: left;
  padding: 20px 0;
  
}

#toptxtimg{
	max-width: 1100px;
	height: auto;
	display: grid;
	grid-template-columns: auto;
}

#toptxtimg div{
	padding-left: 5px;
	align-items: top;
}

.viewWidth5center{
	font-size: 5vw;
	text-align: center;
	padding: 70px 0;
}
.unfold:hover + .collapsed{
	display: block;
}
.collapsed{
	display: none;
}
.cntdwn, .emojirechts{
	float: right;
}
.emojilinks{
	float: left;
}
.debugcoloryellow{
	color: yellow;
}
.debugcolorwhite{
	color: whitesmoke;
}
.debugXML{
	color: var(--color1);
	background-color: var(--color5);
	font-size: 1.125em;
	padding: 5px;
}
.debugReceiverCtrl1, .debugReceiverCtrl2{
	color: var(--color1);
	background-color: var(--color5);
	opacity: 0.8;
	z-index: 2000;
	position: fixed;
	top: 65px;
	right: 45px;
	width: auto;
	height: auto;
	padding: 5px;
}
.debugReceiverCtrl2{
	top: 95px;
}
.debug {
	color: var(--color1);
	background-color: var(--color5);
	opacity: 0.8;
	z-index: 123;
	position: fixed;
	top: 90px;
	left: 45px;
	width: auto;
	height: auto;
	padding: 5px;
	display: none;
}

.debug_touch {
	color: var(--color1);
	top: 0;
	background-color: transparent;
	opacity: 0.7;
	z-index: 98;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	height: auto;
	padding: 5px;
	display: none;
}

.dotJS {
	background-color: limegreen;
	opacity: 0.7;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}

.dotJS2{
	opacity: 0.7;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	background-color: green;
}

.grootmidden {
	font-size: 10em;
	text-align: center;
}

a {
	text-decoration:none;
	color:inherit;
}

.meetwaarden{
	color: var(--color1);
}

a:hover{
	text-decoration:none;
	color:white;
}

a:visited{
	text-decoration:none;
	color:inherit;
}

.colorDSstatusText {
	color: var(--color1);
}

.enelogicStyle{
	width: auto;
	overflow: auto;
	white-space: pre-wrap;
	margin: 5px;
	font-size: 1em;
	color: var(--color1);
}

.enelogicStyle3Columns{
	column-count: 1;
	column-gap: 40px;
	column-rule-style: solid;
}

h1 {
	color: var(--color2);
	text-align: center;
	font-size: 1.69em;
	margin: 2px;
}

p {
  font-size: inherit;
}



* {box-sizing: border-box;}

.hidden{
	display: hidden;
}

.introSlides {
	display: none;
}

img {
	vertical-align: middle;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
}

.img-left .svg-left{
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}

.img-left-nm {
	float: left;
	
}
.img-right-nm{
	float:inline-end;
}
.svg-left{
	margin-right: 15px;
	margin-bottom: 15px;
}

.img-right{
	float: right;
	margin-right: 10px;
}

.img-center{
  margin: auto;
  width: 80%;
  padding: 10px;
}

.grayscale {/* for index. */
	filter: grayscale(100%);
}

/* Slideshow container */
.slideshow-container {
	background-color: var(--color4);
	color: var(--color5);
	max-width: 600px;
	position: relative;
	margin: auto;
	height: auto;
}

/* Ruimte voor slideshow */
#slides {
	background-color: var(--color4);
	color: var(--color5);
	padding-top: 25px;
	width: 100%;
}
.statusBar, .statusBarRood{
	width: auto;
	height: auto;
	position: absolute;
	left:auto;
	top:auto;
	text-align: left;
	padding-left: 2px;
	padding-right: 2px;
	background-color: var(--color4);
	opacity: 0.6;
	font-size: 0.65em;
}

.statusBarRood {
	background-color: tomato;
	color: WhiteSmoke;
	font-size: 0.85em;
	opacity: 0.9;
}

.musicBar, .musicBarColored, .musicBarDark{
	width: 96%;
	height: auto;
	position: absolute;
	top: -22px;
	left: 2%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.8em;
	color: var(--color1);
	background-color: transparent;
	opacity: 0.95;
	z-index: 98;
	padding: 1px;
}
.musicBarColored{
	color: DarkOrange;
}
.musicBarHidden{
	display: none;
}
.musicBarDark{
	color: var(--color5);

}
.gestures{
	height: auto;
	width: auto;
	display: block;
	position: relative;
	top: o;
}

.domoBox{
	height: auto;
	width: 364px;
	display: flex;
	justify-content: space-evenly;
	margin-top: 1px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1px;
}

.largeEmoji, .largeSvg, .smallEmoji, .smallEmojiFont{
	font-size: 2em;
	display: inline-block;
	text-align: center;
	margin-right: 5px;
	padding: 5px;
}
.smallEmoji{
	font-size: 1.125em;
}
.smallEmojiFont{
	font-size: 1.125em;
	text-align: left;
}
.emojimaxvol{
	opacity: 0.5;
}
.hideBasisIPsFileContent{
	top: 130px;
	left: 25px;
	position: fixed;
	color: var(--color1);
	font-size: small;
	background-color: var(--grijs);
	opacity: 0.98;
	z-index: 98;
	max-width: 600px;
	height: auto;
	padding: 5px;
	display: none;
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);	
}
.hoverBasisIPsFileContent:hover + .hideBasisIPsFileContent{
	display: block;
}
.hideFileContent{
	top: 5px;
	right: 5px;
	position: relative;
	color: var(--color1);
	background-color: var(--color4);
	opacity: 0.95;
	z-index: 98;

	max-width: 600px;
	height: auto;
	padding: 1px;
	display: none;
}
.hoverFileContent:hover + .hideFileContent{
	display: block;
}
.hide1, .hide2, .hide3, .hide4, .hideDomo120, .hideDomo240, .hideDomo241, .hideDomo242, .hideDomo243, .hideDomo658, .hideDomo1387, .hideDomo2530, .hideDomo2806{
	top: 5px;
	right: 5px;
	position: fixed;
	color: var(--color1);
	background-color: var(--color4);
	opacity: 0.95;
	z-index: 100;
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
	height: auto;
	padding: 1px;
	display: none;
}
.hide3, .hide4, .hideDomo242{
	top: 5px;
	left: 0;
	max-width: 370px;
	color: var(--color1);
}
.hide4, .hideDomo120, .hideDomo240, .hideDomo241, .hideDomo242, .hideDomo243, .hideDomo658{
	padding: 5px;
}
.hidechart1, .hidechart2, .hidechart3{
	top: 10px;
	left: 10px;
	position: fixed;
	color: var(--color1);
	background-color: var(--color5);
	opacity: 0.95;
	z-index: 98;
	margin:auto;
	width: auto;
	height: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: none;
}
.hideDivPivpnTxt{
	position: fixed;
	top: 35%;
	left: 30px;
	font-size: 0.625em;
	width: 100%;
	height: auto;
	padding: 1px;
	display: none;
	z-index: 150;
}

.hoverDiv1, .hoverDiv2, .hoverDiv3, .hoverDiv4, .hoverDomo120, .hoverDomo240, .hoverDomo241, .hoverDomo242, .hoverDomo243, .hoverDomo658, .hoverDomo1387, .hoverDomo2530, .hoverDomo2806, .hoverDivPivpnTxt {
	font-style: inherit;
}

.hoverDiv1:hover + .hide1{
	display: block;
}
.hoverDiv2:hover + .hide2{
	display: block;
}
.hoverDiv3:hover + .hide3{
	display: block;
}
.hoverDiv4:hover + .hide4{
	display: block;
}

.hoverDomo120:hover + .hideDomo120{
	display: block;
}
.hoverDomo240:hover + .hideDomo240{
	display: block;
}
.hoverDomo241:hover + .hideDomo241{
	display: block;
}
.hoverDomo242:hover + .hideDomo242{
	display: block;
}
.hoverDomo243:hover + .hideDomo243{
	display: block;
}
.hoverDomo658:hover + .hideDomo658{
	display: block;
}
.hoverDomo1387:hover + .hideDomo1387{
	display: block;
}
.hoverDomo2530:hover + .hideDomo2530{
	display: block;
}
.hoverDomo2806:hover + .hideDomo2806{
	display: block;
}
.hoverItem1:hover + .hidechart1{
	display: block;
}
.hoverItem2:hover + .hidechart2{
	display: block;
}
.hoverItem3:hover + .hidechart3{
	display: block;
}
.hoverDivPivpnTxt:hover + .hideDivPivpnTxt{
	display: block;
}

.debughidden{
	top: 50px;
	left: 50px;
	display: none;
	width: 80%;
	height: 25px;
}
.debugWeer{
	margin: 5px;
	color: gray;
}
.debugWeerValue{
	color: #CCCCCC;
}
a .testhidden{
	display: none;
	color: transparent;
	font-size: 0.8125em;
	z-index: 5;
}

a:hover .testhidden{
	display: block;
	color: var(--color2);
}

a:hover .testhidden .selected {
	color: var(--color1);
}

.selected {
	color: var(--color1);
}

.zindex2{
	z-index: 2;
}

/* Caption text */
.text {
  color: var(--color2);
  font-size: 1em;
  padding: 5px 5px;
  bottom: 8px;
  width: 100%;
  height: auto;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: var(--color1);
	text-shadow: 1px 1px #999;
	opacity: 0.7;
	font-size: 1.2em;
	font-weight: bold;
  padding: 12px 12px;
  position: absolute;
  top: 0;
	z-index: 1
}

/* The dots/bullets/indicators */
.dot0, .dot {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: var(--color5);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 1s ease;
}

.fading{
	animation:fading 10s infinite
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}

.gradient, .gradientDark {
	background: linear-gradient(to top, var(--color4),var(--color3));/*basiselement*/
	width: 1010px;
	color:var(--color2);
	margin-left: auto;
	margin-right: auto;

}
.gradientDark{
	max-width: 1064px;
	background: linear-gradient(to top, var(--color5),var(--color4));/*basiselement*/
}
.header {
  overflow: hidden;
  padding: 0;
  font-size: 1em;
  background: linear-gradient(to left, var(--color4) ,var(--color2));
  color: var(--color1);
  text-shadow: 1px 1px 8px black;
  width: 100%;
	z-index: 1;
}

.header h1 {
  font-size: 1.5em;
	margin: 1px;
}

.inhoud {
	background-color: inherit;
	color: var(--color4);
	width: 100%;
	height: inherit;
	text-align: justify;
	text-justify: inter-word;
	padding: 3px;
}

.cnwn{
	color: var(--color4);
	margin: 9px;
	float: right;
	top: 0;
}
.blockcenterReceiver{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	position:sticky;	
	left:0;
	top: 35px;
	z-index:99;
}
.blockKnoppen{
	float: inline-start;
}
.blockBanners{
	float: none;
	display: inline-block;
}
.buttonOnTop, .buttonOnTopRounded{
	border: none;
	padding: 2px;
	max-width: 100px;
	max-height: 18px;
	color: var(--color4);
	background-color: var(--color2);
	margin: 5px;
	position: fixed;
	z-index: 1999;
	right: 0;
	top: 50px;
	opacity: 0.7;
}
.buttonOnTopRounded{
	border-radius: 5px;
}
.buttonInline{
	border: none;
	padding: 2px;
	max-width: 100px;
	background-color: var(--color2);
	color: var(--color4);
	margin: 5px;
	z-index: 1999;
	opacity: 0.7;
}
.buttonInlineRounded, .buttonInlineRoundedLeft, .buttonInlineRoundedRight, .buttonInlineRoundedRightOnTop, .buttonInlineRoundedAlert, .buttonInlineRoundedWarning, .buttonInlineRoundedTimeOut,
 .buttonInlineRoundedLeftGreen, .buttonInlineRoundedLeftOrange, .buttonInlineRoundedLeftYellow, .buttonInlineRoundedLeftGreenYellow, .buttonInlineRoundedLeftRed, .buttonInlineRoundedRightAuto,
  .buttonInlineRoundedReceiverSource, .buttonInlineRoundedReceiverSourceTV, .buttonInlineRoundedReceiverInfo, .buttonInlineRoundedReceiverVolume, .buttonInlineRoundedReceiverSurround, .buttonTemp, .buttonTempGeenUpdate30min, .buttonDruk, .buttonInlineRoundedClimate, .buttonInlineRoundedNginxVPN{
	border: none;
	padding: 2px;
	max-width: 110px;
	min-height: 20px;
	color: var(--color5);
	margin: 2px;
	z-index: 1999;
	opacity: 0.8;
	border-radius: 5px;
	max-height: 18px;
	/* float: inline-end; */
	background-color: greenyellow;
	overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis;
	display: inline-block;
}

/* receiver info */
.buttonInlineRoundedReceiverInfo{
	background-color: var(--color1);
	color: var(--color5);
	float: inline-start;
}
.buttonInlineRoundedReceiverInfo:hover{
	background-color: var(--color2);
	color: var(--color1);
	overflow: visible;
	z-index: 2000;
}
.buttonInlineRoundedClimate{
	background-color: var(--klimaat);
	color: var(--color5);
	float: inline-start;
}
.buttonInlineRoundedClimate:hover{
	background-color: var(--color2);
	color: var(--klimaat);
	overflow: visible;
	z-index: 2000;
}
.buttonInlineRoundedNginxVPN{
	background-color: var(--nginxvpn);
	color: var(--color4);
	float: inline-start;
}
.buttonInlineRoundedNginxVPN:hover{
	background-color: var(--color3);
	color: var(--nginxvpn);
	overflow: visible;
	z-index: 2000;
}
/* receiver surround */
.buttonInlineRoundedReceiverSurround{
	background-color: lightseagreen;
	color: var(--color5);
	float: inline-start;
	min-width: 50px;
}
.buttonInlineRoundedReceiverSurround:hover {
	background-color: darkseagreen;
	color: var(--color1);
	overflow: visible;
	z-index: 2000;
}

/* receiver volume */
.buttonInlineRoundedReceiverVolume{
	background-color: darkseagreen;
	color: var(--color5);
	float: inline-start;
	min-width: 50px;
}
.buttonInlineRoundedReceiverVolume:hover{
	background-color: var(--color3);
	color: var(--color1);
	overflow: visible;
	z-index: 2000;
}

/* receiver source */
.buttonInlineRoundedReceiverSource, .buttonInlineRoundedReceiverSourceTV{
	background-color: gold;
	color: var(--color5);
	float: inline-start;
	min-width: 60px;
}
.buttonInlineRoundedReceiverSourceTV{
	background-color: var(--color1);
	color: FireBrick;
}
.buttonInlineRoundedReceiverSource:hover{
	overflow: visible;
	background-color: goldenrod;
	color: var(--color1);
}
.buttonInlineRoundedReceiverSourceTV:hover{
	overflow: visible;
	background-color: FireBrick;
	color: var(--color1);
}
.tvWnkOff{
	background-color: var(--color3);
	filter: blur(1px);
}

.buttonTempiPhone, .buttonTempiPhoneOffline {
	border: none;
	padding: 2px;
	font-size: 1.125em;
	max-width: 99px;
	margin: 2px;
	z-index: 1999;
	opacity: 0.7;
	border-radius: 5px;
	max-height: 36px;
	color: var(--color1);
	background-color: var(--color3);
	max-width: 100%;
	float: inline-start;
	padding: 3px;
}
.buttonTempiPhoneOffline{
	color: var(--color1);
	background-color: gray;
}
.buttonInlineRoundedLeft{
	float: inline-start;
	background-color: var(--color1);
	color: var(--color5);
}
.buttonInlineRoundedRightOnTop{
	background-color: var(--color3);
	color: var(--color5);
	float: none;
	position: fixed;
	right: 0;
	top: 50px;
}
.buttonInlineRoundedRightOnTop:hover{
	background-color: var(--color3);
	color: var(--color1);
}
.buttonInlineRoundedRight{
	float: inline-end;
	background-color: var(--color3);
	color: var(--color5);
}
.buttonInlineRoundedRight:hover{
	background-color: var(--color3);
	color: var(--color1);
}
.buttonInlineRoundedRightAuto{
	float: inline-end;
	background-color: yellowgreen;
	color: var(--color5);
}
.buttonInlineRoundedRightAuto:hover{
	background-color: rgba(255, 255, 0, 0.5);
	color: var(--color5);
}

.buttonInlineRoundedLeftGreen{
	background-color: yellowgreen;
	color: var(--color5);
	float: inline-start;
}
.buttonInlineRoundedLeftOrange{
	background-color: orange;
	color: rgb(131, 73, 3);
	float: inline-start;
}
.buttonInlineRoundedLeftYellow{
	background-color: yellow;
	color: var(--color5);
	float: inline-start;
}
.buttonInlineRoundedLeftGreenYellow{
	background-color: greenyellow;
	color: green;
	float: inline-start;
}
.buttonInlineRoundedLeftRed{
	background-color: red;
	color: var(--color1);
	float: inline-start;
}
.buttonInlineRoundedAlert{
	background-color: red;
}
.buttonInlineRoundedWarning{
	background-color: yellow;
}
.buttonInlineRoundedTimeOut{
	background-color: red;
	color: yellow;
}
.buttonNR {
	font-size: 1.125em;
	height: 20;
}
.buttonTemp{
	color: var(--color1);
	background-color: var(--color3);
	max-width: 100%;
	float: inline-start;
	padding: 3px;
}
.buttonSpace{height: 24px;width:100%;}
.buttonTempGeenUpdate30min{
	color: var(--color1);
	background-color: gray;
	max-width: 100%;
	float: inline-start;
	padding: 3px;
}
.buttonDruk{
	color: var(--color1);
	background-color: dodgerblue;
	max-width: 100%;
	float: inline-start;
	padding: 3px;
}
.cnwnmbl{
	display: none;
	z-index: 1999;
	color: var(--color5);
	text-align: center;
	float: right;
}

.content {
  background-color: transparent;
  color: var(--color4);
	margin-left: auto;
	margin-right: auto;
	width: 1010px;
	height: 100%;
	z-index: 1;
}

#content {
	position: relative;
	height: auto;

}

#contentIndex {
	position: relative;
	top: 5px;
}

.heightMargin{ margin-top: 5px;}
.heigth100{
	width: 100%;
	height: 100px;
}
.max-height300{
	height: 100px;
}
.maatblokjeLinks, .maatblokjeRechts{
	width: 150px;
	height: 15px;
	float: left;
	z-index: 99;
	background-color: red;
}

.maatblokjeRechts{
	float: right;
}

.main, .mainLogging {
	background-color: inherit;/*basiselement was inherit*/
	color:var(--color2);
	height: auto;
	padding-left: 3px;
	padding-right: 3px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.nopadding{
	padding: 0;
}
.main{
	float: left;
	width:66%;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	margin-left: 0;
	margin-right: 0;
}
.mainLogging {
	max-width: 1010px;
	float:none;
	margin-left: auto;
	margin-right: auto;
}
.mainLogLine{
	max-width: 1010px;
	white-space: wrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.main h2 {
	color: var(--color2);
}

.main a {
	color:white;
	text-decoration: none;
}
.main a:visited {
	color:white;
	text-decoration: none;
}
.main a:hover {
	color:white;
	text-decoration: none;
}
.main a:active {
	color:white;
	text-decoration: none;
}

.right {
	background-color: inherit;
	color:var(--color2);
	float:right;
	width:34%;
	height: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	margin-top:0px;
	margin-left:0px;
	margin-bottom: 20px;
	text-align:center;
}

.right h2 {
	color: var(--color1);
}
.column3 {
  float: left;
  width: 33.33%;
  padding: 50px;
}

.kolommen{
	padding: 5px;
	column-count: 3;
	column-width: 32%;
	max-height: fit-content;
}

#tabkolommen {
	columns: 30% 3;
	font-size: 0.8125em;
}
#tabkolommen2 {
	columns: 300px 2;
}
#tabkolommen3 {
	columns: 200px 3;
}
.transparentbackground{
	background-color: transparent;
	color: var(--color2);
}

#filler {
	color: darkred;
}

.footer, .footerDebug{
	padding: 2px;
	text-align: center;
	background: var(--color3);
	color: var(--color1);
	font-size: 0.625em;
	position:fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 99;
}
.footerDebug{
	background: #67782b;
	opacity: 0.8	;
	font-size: 0.8125em;
	color: var(--color1);
}
.footer a:link, .footer a:visited, .footer a:hover, .footer a:active {
	color:var(--color1);
	text-decoration: none;
}

.spacer {
	width: 100%;
	height: 50px;
}
.spacerFooter {
	width: 100%;
	height: 0;
}
.spacerMenu, .spacerMenu2 {
	width: 100%;
	height: 35px;
	margin-bottom: 5px;
	z-index: -1;
}
.spacerMenu2{
	height: 25px;
}
.spacerId {
  	width: 100%;
	height: 40px;
}
.spacerBottom{
	width: 100%;
	height: 120px;
}
.onderwerpGrid {
	margin-left: auto;
	margin-right: auto;
	background-color: var(--color3);
	color: var(--color2);
	width: 100%;
}

.onderwerpGrid .titel {
	color: var(--color5);
}

.evenonderwerpGrid {
	margin-left: auto;
	margin-right: auto;
	background-color: var(--color4);
	color: var(--color2);
	width: 100%;
}

.evenonderwerpGrid .titel {
	color: var(--color1);
}

#tekst01{
	margin-top: 0;
	width: 40%;
	float: left;
}

#tekst02{
	margin-top: 0;
	width: 40%;
	float: right;
}
.pijltje{
	width:auto;
	height: auto;
	float: inline-start;
	color: var(--color5);
}
.fotoSpace {
	width: 480px;
	height: auto;
	float: left;
	margin: 5px;
	text-align: center;
	color: var(--color3);
	background-color: var(--color4);
	box-shadow: 5px 5px 10px 6px var(--color5);
	padding-top: 20px;
}
.fotoGrid {
  display: grid;
  grid-template-columns: auto auto;
	max-height: 100%;
}

.fotoGrideven {
  display: grid;
  grid-template-columns: auto auto;
	max-height: 100%;
}

.kiekje {
	box-shadow: 1px 4px 6px 2px black;
}

.onderwerpGrid .kiekje{
	box-shadow: 1px 4px 6px 2px black;
}

.evenonderwerpGrid .kiekje{
	box-shadow: 1px 4px 6px 2px black;
}

.voorproef {
	max-height: 100%;
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 15px;
	margin-bottom: 5px;
	padding: 0;
}

.tekst {
	padding: 10px;
	margin: 5px;
}
.tekstvak390{
	width: 390px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.tekstvakDkimSpfReport{
	max-width:fit-content;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.tekstvak700{
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}
.tekstvak800{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.tekstvak600{
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.tekstvak_bmaxh100pix {
	width: 100%;
	height: 100px;
	overflow: auto;
}
.tekstvakMidden{
	max-width: 100%;
	padding: 3px;
	height: 140px;
	overflow: auto;
	color: var(--color2);
}
.tekstvakKlein{
	max-width: 100%;
	padding: 3px;
	height: 95px;
	overflow: auto;
	color: var(--color2);
}
.tekstvakGroot, .tekstvakGrootDomo{
	width: 880px;
	max-width: 100%;
	max-height: 700px;
	overflow: auto;
	color: var(--color2);
	margin-right: auto;
}
.tekstvakGrootDomo{
	max-height: 730px;
}
.tekstvakGrootDS{
	width: 880px;
	max-width: 100%;
	padding: 3px;
	max-height: 950px;
	overflow: auto;
	color: var(--color2);
	margin-left: auto;
	margin-right: auto;
}
.tekstvak_bmaxh200pix {
	width: 100%;
	height: 100px;
	overflow: auto;
}
.tekstvak_bmaxh800pix, .tekstvak_bmaxh960pix {
	width: 100%;
	height: 860px;
	overflow: auto;
}
.tekstvak_bmaxh960pix{
	height: 960px;
}
.tekstvak_bmaxh300pix {
	width: 100%;
	height: 300px;
	overflow: auto;
}


.titel {
	font-size: 1.125em;
	font-style: normal;
	text-align: center;
}

.w3-third {
  width:33%;
	float: left;
}

.width100procentRnd {
  max-height: 100%;
	width: auto;
}


#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 30; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  top:  0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  position: relative;
  background-color: var(--color5);
  margin: auto;
  padding: 0;
  width: auto;
  height: auto;
  max-width: 1000px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: var(--color3);
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0.1)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0.1)}
  to {transform:scale(1)}
}

@-webkit-keyframes zoomOut {
  from {-webkit-transform:scale(1)}
  to {-webkit-transform:scale(0.1);display: none;}
}

@keyframes zoomOut {
  from {transform:scale(1)}
  to {transform:scale(0.1);display: none;}
}

@-webkit-keyframes fading{
	0%{opacity:0}
	50%{opacity:1}
	100%{opacity:0}
}

@keyframes fading{
	0%{opacity:0}
	50%{opacity:1}
	100%{opacity:0}
}

@-webkit-keyframes fade {
  from {opacity: .01}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .01}
  to {opacity: 1}
}

/* The Close Button */
.close {
  cursor: pointer;
  position: relative;
  right: 0;
	top: 0;
  width: auto;
	padding: 12px 12px;
	position: absolute;

  color: var(--color1);
  font-weight: bold;
  font-size: 1.2em;
  transition: 0.6s ease;
  border-radius: 0 0 0 3px;
  user-select: none;
  z-index: 11;
}

.close:hover,
.close:focus {
  background-color: var(--color5);
  text-decoration: none;
  cursor: pointer;
}

.lightboxSlides, .lightboxSlides2 {
	margin-left: auto;
	margin-right: auto;
	display: none;
}

.mySlides {
  display: none;
}

.myButton {
	box-shadow:inset 0px 1px 0px 0px var(--color4);
	background-color: var(--color4);
	border-radius:4px;
	border:1px solid var(--color5);
	display:inline-block;
	cursor:pointer;
	color: var(--color5);
	font-family:Arial;
	font-size: 1em;
	font-weight:bold;
	padding:4px 18px;
	text-decoration:none;
	text-shadow:0px 1px 0px var(--color4);
}
.myButton:hover {
	color: var(--color3);
	background-color:var(--color5);
}
.myButton:active {
	position:relative;
	top:1px;
}

.cursor {
  cursor: pointer;
}

.paddingTopBottom{
	padding-top: 5px;
	padding-bottom: 5px;
}
.paddingLeftRight{
	padding-left: 5px;
	padding-right: 5px;
}
.preNginx{
	word-wrap: break-word; 
	white-space: pre-wrap;
	padding: 5px;
}
/* Next & previous buttons */
.prev,.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: var(--color1);
  font-weight: bold;
  font-size: 1.2em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,.next:hover {
	background-color: var(--color5);
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,.demo:hover {
	background-color: var(--color2);
	opacity: 1;
}

img.hover-shadow {
	transition: 0.3s;
}

.hover-shadow:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.colorBar, .colorMeters{
	width: 100%;
	height: auto;
	margin: 3px;
	padding: 10px;
	display: block;

	text-align: center;
	background: linear-gradient(to right, var(--color4),var(--color3));
	color: var(--color1);
}

.colorMeters{
	justify-content: space-between;
}

.balk{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.blok{
	width: 19%;
	margin-right: auto;
	margin-top: 2px;
	margin-bottom: 0;
}

.clearFloatTransparent {
	clear: both;
	text-align: center;
	color: var(--color1);
}
.titleChart{
	float: none;
	height: 38px;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	/* display: inline-block; */
	position: relative;
}
.clearFloatTransparent{
	color: transparent;
}
.floatimgleft{
	float: left;
}
.floatimgright{
	float: right;
}
.floattableleft{
	float: left;
	margin-left: 5px;
	font-size: 0.8125em;
}
.floattableleft2{
	float: left;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.8125em;
}
.floattableright{
	float: right;
	margin-right: 5px;
	font-size: 0.8125em;
}
.floattableright2{
	float: right;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.8125em;
}

.floatimgrightheight125{
	width: 400px;
	height: 175px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
	float: right;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
}
.floatimgrightheightMaxWidth50{
	max-width: 50%;
	height: auto;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
	float: right;
	margin-right: 5px;
	margin-bottom: 5px;
}
.floatimgrightheightMaxWidth100{
	max-width: 100%;
	height: auto;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
	float: right;
	margin-right: 5px;
	margin-bottom: 5px;
}
.colorBlock1,.colorBlock2,.colorBlock3,.colorBlock4,.colorBlock5{
	float: left;
	display: block;
	text-align: center;
	margin-left: 1px;
	margin-right: 1px;
	padding: 5px;
	text-decoration: none;
	font-size: 0.8125em;
	font-weight:bold;
	border: none;
	border-radius: 3px 3px 3px 3px;
	}
.colorBlock1{
	color: var(--color4);
	background-color: var(--color1);
}
.colorBlock2{
	color: var(--color5);
	background-color: var(--color2);
}
.colorBlock3{
	color: var(--color1);
	background-color: var(--color3);
}
.colorBlock4{
	color: var(--color2);
	background-color: var(--color4);
}
.colorBlock5{
	color: var(--color3);
	background-color: var(--color5);
}

.colorHeader{
    color: var(--color2);
    background-color: var(--color4);
	font-size: 2.25em;
	text-shadow: 1px 1px #555;
}

.iframeNetwerkStatusStyle {
	border:none;
	background-color:transparent;
	width:100%;
	height:23px;
}

#pings{
    table-layout: fixed;
    font-size: 0.8125em;
}

.padding1{
	padding: 1px;
}
.logwidth1100{
	max-width: 1100px;
	background-color: inherit;

}
.logwidth1250{
	max-width: 1250px;
	background-color: inherit;
	padding-left: 5px;
	padding-right: 5px;

}
.loglineHeader{
	font-family: 'Courier New', Courier, monospace;
	color:var(--colorvpn3);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.loglineIndent{
	overflow-wrap: break-word;
	white-space: wrap;
	overflow: auto;
	text-indent: -15px;
	padding-left: 15px;
	font-family: 'Courier New', Courier, monospace;
}

.fonteigenAPs{
	font-size: inherit;
}
.fontItalicSmall, .fontItalic{
	font-style: italic;
}
.fontInherit{
	font-size: inherit;
}

.fontNormal{
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
}

.fontSmall, .fontItalicSmall{
    font-size: 0.8125em ;
}
.fontLucida{
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.fontxsmall{
	font-size: 0.625em;
}
.fontxxsmall{
	font-size: 0.625em;
}
.fontSmaller{
	font-size: 0.8125em;
}
.fontMedium{
	font-size: 1em;
}
.fontLarge{
	font-size: 1.125em;
}
.fontIcon{
	font-size: 20px;
	margin-right: 1px;
	display: inline;
}
.fontWeerIcon{
	width: 24px;
	height: 24px;
	margin-right: 1px;
	float: inline-start;
}

.hr-dsindex{
	font-size: 0.125em;
	min-width: 265px;
	float: left;
}
.width55{
    width:55px;
}

.width125{
    width:125px;
}
.width225{
	width: 225px;
}
.width255{
	min-width: 255px;
}
.width300{
	width: 300px;
}
.width390{
	width: 384px;
}
.width99procent{
	max-width: 99%;
}

.width100procent{
    margin: auto;
    width: 100%;
}
.width100procentfixedbottom{
	display: inline-block;
	z-index: 100;
	width: 100%;
	position: fixed;
	bottom: 55px;
	/* left: 100px; */
	/* justify-self: center; */
	/* background-image: linear-gradient(to bottom, rgba(9,40,52,0), rgba(9,40,52,1), rgba(9,40,52,1), rgba(9,40,52,1)); */
}
.synoindex{
	font-size: normal;
}
.synobublok{
	width: 99%;
	max-height: fit-content;
}
.synobulog{
	padding-left: 2em;
	text-indent: -2em;
	overflow-x: hidden;
	white-space: wrap;
	text-overflow: ellipsis;
}
.diskspace{
	width: 305px;
	height: auto;
	margin-bottom: 10px;
	margin-top: 5px;
}
.dsiheader{
	color: var(--color1);
	font-size: larger;
	margin-top: 10px;
	margin-bottom: 5px;
}
.httpheader{
	color: var(--color1);
	margin-top: 10px;
	margin-bottom: 5px;
}
.httpok{
	color: greenyellow;
}
.httpredirect{
	color: orange;
}
.httperror{
	color: red;
}
.httpcode{
	background-color: var(--color1b);
	color: var(--color1);
	padding: 2px;
}
.ipversion{
	color: silver;
}
.serverip{
	color: lightgoldenrodyellow;
}
.localip{
	color: lightsteelblue;
}
.redirect{
	color: skyblue;
}
.prewidth{
	width: 90%;
	white-space: wrap;
	overflow-wrap: normal;
}
.dsigray{
	color: whitesmoke;
}
.diskstationOnTop{
	position: fixed;
	top: 1px;
	right: 70px;
	z-index: 125;
	opacity: 0.9;
	width: auto;
	height: auto;
}
.diskstationOnTop:hover{
	right: 62px;
	z-index: 130;
}
.domoticzStatusOnTop{
	position: fixed;
	top: 1px;
	right: 104px;
	z-index: 125;
	opacity: 0.8;
	width: auto;
	height: auto;
}
.domoticzStatusOnTop:hover{
	right: 96px;
	z-index: 130;
}
.experiaBoxOnTop{
	position: fixed;
	top: 1px;
	right: 36px;
	z-index: 125;
	opacity: 0.9;
	width: auto;
	height: auto;
}
.experiaBoxOnTop:hover{
	right: 26px;
	z-index: 130;
}
.ringvoordeurOnTop{
	position: fixed;
	top: 1px;
	/* right: 156px; */
	right: 1px;
	z-index: 125;
	opacity: 0.9;
	width: auto;
	height: auto;
}
.ringvoordeurOnTop:hover{
	/* right: 152px; */
	right: 1px;
	z-index: 130;
}
.ringtuinOnTop{
	position: fixed;
	top: 1px;
	/* right: 138px; */
	right: 18px;
	z-index: 125;
	opacity: 0.9;
	width: auto;
	height: auto;
}
.ringtuinOnTop:hover{
	/* right: 134px; */
	right: 14px;
	z-index: 130;
}
.fingStatusOnTop{
	position: fixed;
	top: 1px;
	right: 1px;
	z-index: 125;
	opacity: 0.8;
	width: auto;
	height: auto;
}
.fingStatusOnTop:hover{
	right: 1px;
	z-index: 130;
}
.spacerwifichartsvg{
	width: 100%;
	height: 218px;
	background-image: linear-gradient(to bottom, rgba(9,40,52,0), rgba(9,40,52,1), rgba(9,40,52,1), rgba(9,40,52,1));
}
.width100procentfixedtop{
	width:100%;
	position: fixed;
	top: 0;
	padding-top: 60px;
	left:0;
	background-image: linear-gradient(to top, rgba(9,40,52,0), rgba(9,40,52,1), rgba(9,40,52,1), rgba(9,40,52,1));
}
.max-width-1330{
	max-width: 1330px;
}
.kwadrantbreedte{
	max-width: 1010px;
}
.max-width-550{
	max-width: 550px;
}

.max-width-820{
	max-width:820px;
}
.max-width-880{
	max-width:880px;
}

.max-width-150{
	max-width:150px;
	float: right;
}
.max-width-50procent{
	max-width: 50%;
}
.max-width-100procent{
	max-width: 100%;
	height: auto;
	margin-left: 0px;
	margin-bottom: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.max-width-100procent-nm{
	max-width: 100%;
	height: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.Overflow{
	overflow: auto;
	text-overflow: ellipsis;
}
.rechthoek, .rechthoeksmal{
	margin: auto;
	height: auto;
	max-width: 200px;
	background-color: var(--color5);
	opacity: 0.85;
	padding: 3px;	
	margin-top: 3px;
	margin-bottom: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.rechthoeksmal{
	color: inherit;
	height: 30px;
}
.rechthoekAirco, .rechthoekCookies{
	font-size: 70%;
	height: auto;
	max-width: 100%;
	background-color: var(--color5);
	opacity: 0.85;
	padding: 5px;	
	margin-top: 3px;
	margin-bottom: 5px;
	margin-right: 8px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.rechthoekCookies{max-width: 250px;}
.hoverCookies{
	font-size: 0.8125em;
}
.hideCookies{
	top: 130px;
	left: 25px;
	position: fixed;
	color: var(--color1);
	font-size: small;
	background-color: var(--grijs);
	opacity: 0.95;
	z-index: 10000;
	margin-left: auto;
	margin-right: auto;
	width: 700px;
	height: auto;
	padding: 5px;
	display: none;
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);	
}
.hoverCookies:hover + .hideCookies{
	display: block;
}
.whitelist, .issuedCookies{
	color: var(--color1);
	background-color: var(--grijs);
	text-align: left;
	margin-left: 5px;
	margin-right: 5px;
}
.hideWhitelist{
	top: 130px;
	left: 25px;
	position: fixed;
	color: var(--color1);
	background-color: var(--grijs);
	opacity: 0.95;
	z-index: 10000;
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
	height: auto;
	padding: 5px;
	overflow: auto;
	display: none;
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);	
}
.hoverWhitelist{
	font-size: inherit;
}
.hoverWhitelist:hover + .hideWhitelist{
	display: block;
}
.hideCookiesIssued{
	top: 130px;
	left: 25px;
	position: fixed;
	color: var(--color1);
	background-color: var(--grijs);
	opacity: 0.95;
	z-index: 10000;
	margin-left: auto;
	margin-right: auto;
	max-width: 1010px;
	height: auto;
	padding: 5px;
	overflow: auto;
	display: none;
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);	
}
.hoverCookiesIssued{
	font-size: inherit;
}
.hoverCookiesIssued:hover + .hideCookiesIssued{
	display: block;
}
.inline{
	display: inline;
}
.inlineblock{
	display: inline-block;
}

.textblok {
	max-width: 185px;
}
.textellipsis, .Datum, .datum, .tekstellipsisCinema{
	max-width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tekstellipsisCinema{
	z-index: 105;
}
.Datum, .datum{
	max-width: 80px;
}
.ellipsis{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.tekstellipsisCinema{
	max-width: 175px;
}
.textellipsis{
	max-width: 100%;
	text-align: left;
}
.textellipsis:hover, .tekstellipsisCinema:hover {
	background-color: var(--color5);
	overflow: visible;
}
td.textellipsis, td.Datum, td.datum {
	overflow: hidden;
}
td.textellipsis:hover, td.Datum:hover, td.datum:hover {
	overflow: visible;
	color: var(--color1);
	text-shadow: 1px 1px 3px var(--color4);
	z-index: +1;
}
.enelogicStylecUrlVerbose{
	color: YellowGreen;
	width: 90%;
	overflow: auto;
	white-space: pre-wrap;
	font-size:	inherit;
}
.enelogicStylecUrlVerboseHeader{
	color: yellow;
	width: 90%;
	overflow: auto;
	white-space: pre-wrap;
	font-size:	inherit;
}
.Response{
	font-size: 0.625em;
}
.laatsteInvoer, .laatsteInvoerOK, .laatsteInvoerFout, .laatsteInvoerNieuwer, .laatsteInvoerOuder{
	font-size: 0.8125em;
	color: lightgray;
	margin: 5px;
}
.laatsteInvoerOK{
	color: green;
}
.laatsteInvoerFout{
	color: DarkOrange;
}
.laatsteInvoerNieuwer{
	color: goldenrod;
}
.laatsteInvoerOuder{
	color: gold;
}
.Response a:visited{
	color: var(--color1);
	}

.ResponseDark{
	font-size: 0.625em;
}

a.ResponseDark{
	color: var(--color5);
}
a.Dark{
	color: var(--color5);
}
.iframeWeer5dagen{
	width:310px;
	height:310px;
	border:none;
	margin:auto;
}

.beeldhouder{
	max-width: 100%; height: auto; 
	margin: auto;
	padding: 2px;
}
.beeldhouder2{
	max-width: 100%; 
	height: auto; 
	margin: 1px;
	margin-left: auto;
	margin-right: auto;
}
.beeldhouderVT{
	display: block;
	max-width: 100%; 
	margin: auto;
	padding: 2px;
	height: auto;
	margin-bottom: 2px;
}
.beeldhouderVTcenter{
	display: block;
	max-width: 100%; 
	margin-left: auto;
	margin-right: auto;
	padding: 2px;
	height: auto; 
}
.beeldhouderVTiPhone{
	max-width: 100%; 
	margin: auto;
	padding: 0;
	height: auto; 
	margin-right: 1px;
	margin-left: 1px;
	margin-bottom: 2px;
}
.beeldhouderVTplaceholder{
	width: 100%;
	min-height: 400px;
}
.beeldhouderVTplaceholderiPhone{
	width: 100%;
	min-height: 300px;
}
.MarginAuto{
	margin:auto;
}
.marginMidden{
	margin-left: auto;
	margin-right: auto;
}
.margin2px{
	margin: 2px;
}
.margin5px{
	margin: 5px;
}
.margin-left5px{
	margin-left: 5px;
}
.margin-right5px{
	margin-right: 5px;
	margin-bottom: 2px;
}
.iFrameEhvWeerIconnew{
	float:right;
	margin-left:5px;
	width:35px;
	margin-right:0;
	height:40px;
	margin-top: 0;
}

.limit300x150, .limit310x310centreer, .limit300x150centreer {
	display: block;
	font-size: 0.8125em;
	max-width:300px;
	max-height:150px;
}
.limit300x150{
	color: var(--color2);
}
.limit310x310centreer, .limit300x150centreer{
	margin-left: auto;
	margin-right: auto;
}

.divalignCenter {
	margin: auto;
}

.divalignLeft {
	margin-left: 5;
	margin-right: auto;
}

.textalignLeft {
	text-align: left;
}

.textalignCenter {
	text-align: center;
}

.textalignRight {
	text-align: right;
}

.textfloatLeft {
	float: left;
}

.textfloatRight {
	float: right;
}
.valignTop {
	vertical-align: top;
}

.AlignCenterCollr777{
	text-align:center; color:#777;
}

.style1,.style2,.style3,.style4{
	font-size: 0.8125em;
}
.style1,.style1 a,.style1 a:visited{
	color:#ff0000; background-color:#eedddd;

}
.style2,.style2 a,.style2 a:visited{
	color:#ff9900;
	}
.style3,.style3 a,.style3 a:visited{
	color:#ffff66;
	}
.style4,.style4 a,.style4 a:visited{
	color:#88ff88;
}

.oranje{
	color:orangered;
	font-size: 0.8125em;
}

.posflow{
	position: sticky;
	top: 0;
	text-overflow: ellipsis;
}

.button {
	float: left;
  	display: block;
	background-color:var(--color4);
	color:var(--color1);
	text-align: center;
	padding: 5px;
	text-decoration: none;
	font-size: 0.8125em;
	border: none;
	width:118px;
	margin-top:1px;
	margin-right:1px;

}
.button:hover {
	padding-left: 4px;
	padding-top: 4px;
	text-shadow: 1px 1px var(--color3);
	border-left: 1px var(--color4);
	border-top: 1px var(--color4);
	background-color:var(--color5);
	color:var(--color1);
}

.button:visited {
	color: var(--color2);
}

.imgbuttonRound{
	float: left;
  	display: block;
	border: none;
	width: 122px;
	height: 24px;
	margin-right:2px;
	margin-bottom: 2px;
}
.buttonRound, .buttonRoundSmall {
	float: left;
  	display: block;
	background-color:white;
	color:var(--color5);
	text-align: center;
	padding: 4px;
	text-decoration: none;
	font-size: 0.8125em;
	font-weight: bold;
	border: none;
	border-radius: 12px;
	height: 24px;
	width: 122px;
	margin-right:2px;
	margin-bottom: 2px;
}
.buttonRoundSmall{
	width: 81px;
}

.buttonRound:hover, .buttonRoundSmall:hover {
	background-color:var(--color2);
}

.buttonRound:visited, .buttonRoundSmall:visited {
	background-color:var(--color3);	
}

.buttonsmall {
	float: left;
  	display: block;
	background-color:var(--color4);
	color:var(--color1);
	text-align: center;
	padding: 5px;
	text-decoration: none;
	font-size: 0.8125em;
	border: none;
	width:88px;
	margin-top:1px;
	margin-right:1px;

}
.buttonsmall:hover {
	padding-left: 4px;
	padding-top: 4px;
	text-shadow: 1px 1px var(--color3);
	border-left: 1px var(--color4);
	border-top: 1px var(--color4);
	background-color:var(--color5);
	color:var(--color1);
}

.buttonsmall:visited {
	color: var(--color2);
}

.buttonM {
	float: left;
  	display: block;
	background-color:var(--color5);
	color:var(--color2);
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-decoration: none;
	font-size: 0.8125em;
	font-weight:bold;
	border: none;
	width:78px;
	margin-top:1px;
	margin-right:1px;
}

.buttonM:hover {
	padding-left: 4px;
	padding-top: 4px;
	text-shadow: 1px 1px var(--color1);
	border-left: 1px var(--color1);
	border-top: 1px var(--color1);
	background-color:var(--color3);
	color:var(--color4);
}

.buttonM2 {
	display: none;
}

.backgroundcolorgray{
	background-color: var(--grijs);
}

.backgroundiframe{
	background: transparent;
}

.backgroundNginxMonitor {
	background-color: var(--color3);
	color:var(--color1);
}

.BackGroundInherit{
	background-color:inherit;
}

.BackGroundDark{
	background-color: var(--color5);
	overflow: auto;
}
.iCookiesColorExpired{
	color: var(--donkergrijs);
	font-style: italic;
}

.iCookiesColorBasis{
	color: var(--color5);
	background-color: rgba(0, 0, 139, 0.3);
}
.iCookiesColorAdded{
	color: var(--color5);
	background-color: rgba(0, 128, 0, 0.3);
}
.iCookiesColorBeide{
	color: var(--color5);
	/* background-color: rgba(30, 143, 255, 0.3); */
}
.iCookiesColorCheck{
	color: red;
	background-color: rgba(255, 0, 0, 0.3);
}
.iCookiesColorEigen{
	color: darkgreen;
	background-color: rgba(0, 128, 0, 0.3);
}
.iCookiesColorRed{
	color: red;
}
.iCookieHeaderColor{
	color: var(--color4);
}
.iCookieHeaderColorHuidig{
	color: var(--color5);
	background-color: rgba(0, 128, 0, 0.3);
}
.iCookiesHeaderHide{
	display: none;
}
.iCookieHelpColor{
	color: var(--color4);
}
.iCookiesHide{
	display: none;
}
.iCookiesHR{
	margin: 1px;
	padding: 0;
}
.iCookiesScrollCenter{
	scroll-snap-align: center;
}
.iCookiesScrollSnapY{
	scroll-snap-type: y mandatory;
}
.iCookiesSubHeader{
	display: block;
}
.iCookiesWeergaveVak{
	background-color: lightgray;
	color: var(--color5);
	padding: 3px;
	text-align: left;
	margin-bottom: 25px;
	max-height: 255px;
	overflow: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.iCookiesWeergaveVakHeader{
	background-color: lightgray;
	color: var(--color5);
	padding: 3px;
	text-align: left;
	margin-top: 5px;
	max-height: 250px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.imaxHeight100{max-height: 100%;}
.imaxWidthContent{max-width: fit-content;}
.imaxWidthNarrow{max-width: 400px;}
.iCookieWeergaveItem {
	scroll-snap-align: start;
	scroll-margin-block-start: 0;
}
.iCookiesWeergaveVak h1 {
	color:var(--color4);
}
.netwerkstatus{
	background-color: transparent; font-size: 0.8125em;
}

.WeerIconNew{
	position:absolute;width:28px;height:28px;z-index:1;left:0px;top:23px;font-size: 0.8125em;color:#666;
}

h2 {
	margin:5px;
	text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.header h1 {
    font-size: 2.25em;
		margin: 5px;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.meteoblueweer{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 350px;
    height: 280px;
		border: none;

}

.colorset0 {
	background-color:var(--color1);
	color:var(--color3);
}
.colorset1 {
	background-color:var(--color2);
	color:var(--color4);
}
.colorset2 {
	background-color:var(--color3);
	color:var(--color5);
}
.colorset3 {
	background-color:var(--color4);
	color:var(--color1);
}
.colorset4 {
	background-color:var(--color5);
	color:var(--color2);
}
.colorset5 {
	background-color:var(--color3);
	table-layout: fixed;
	margin-left: 15px;
	color:var(--color1);
}
.colorset6 {
	background-color:var(--color4);
	color:var(--color2);
}
.colorset7 {
	background-color:var(--color5);
	color:var(--color3);
}
.colorset8 {
	background-color:var(--color1);
	color:var(--color4);
}
.colorset9 {
	background-color:var(--color2);
	color:var(--color5);
}

.dimbuienradargadget {
	filter:brightness(75%);
}

.opacity0p5 {
	opacity: 0.5;
}

.BT01 {
	color: #CCCCCC;
	}
.WifiSPP1,.WifiSPP1 a:link,.WifiSPP1 a:visited {
	color: #cdcd00;
	}
.WifiRep,.WifiRep a:link,.WifiRep a:visited {
	color: #cd4f39;
	}
.STB1,.STB1 a:link,.STB1 a:visited {
	color: #CCCCCC;
	}
.STB2,.STB2 a:link,.STB2 a:visited {
	color: #FFD700;
	}
.Ring,.Ring a:link,.Ring a:visited {
	color: #666666;
	}
.HD01,.HD01 a:link,.HD01 a:visited {
	color: chocolate;
	}
.HD02,.HD02 a:link,.HD02 a:visited {
	color: olive;
	}
.RTR1,.RTR1 a:link,.RTR1 a:visited {
	color: #9966FF;
	}
.DSE {
	color: #990000;
	}
.Google,.Google a:link,.Google a:visited {
	color: #ff0000;
	}
.KPN,.KPN a:link,.KPN a:visited {
	color: #009900;
	}
.UPC {
	color: #003399;
	}
.Tweakers {
	color: #990033;
	}
.Facebook,.Facebook a:link,.Facebook a:visited {
	color: #0066ff;
}
.OpenDNS {
	color: #0000bb;
	}
.alert {
	background-color:#FF3333;
	border: thin solid var(--color3);
	color:#ff9999;
	text-align: right;
}

.alert a {
	background-color:#FF3333;
	border:inherit;
	color:#ff9999;
	text-decoration: none;
}

.alert a:visited {
	background-color:#FF3333;
	border: thin solid var(--color3);
	color:#ff9999;
	text-decoration: none;
}

.resp-container-old {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.resp-container {
	color: inherit;
    position: relative;
    overflow: hidden;
	padding-top: 60%;
}

.resp-container2 {
	background-color: transparent;
	color: inherit;
    position: relative;
    overflow: hidden;
    padding-top: 75%;
	margin:auto;
}

.resp-iframe {
	background-color: transparent;
	color: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pivpn-c{
	font-size: 1em;
	color: var(--colorvpn2);
	
}
.pivpn-c-h{
	font-size: 0.8125em;
	font-weight: bold;
	color: var(--colorvpn1);
}
.iframePivpn{
	height:250px;
	width:1220px;
	color: var(--color1);
	background-color: var(--color4);
}

.containerif {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */

}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  color: var(--color1);
  background-color: var(--color4);
}

.iframeReceiverControl{
	height:auto;
	width:100%;
	border:none;
}
.inputOK {
	color: gray;
	background-color: var(--color5);
}

.cacherefresh {
	color: limegreen;
	background-color: olive;
	text-align: center;
}
.tablealigncenter{
	margin-left: auto;
	margin-right: auto;
}

.tablealert {
	color: firebrick;
	background-color: IndianRed;
	text-align: center;
}

.tablePing {
	font-size: 0.8125em;
	margin:auto;
	background-color:#999;
}

.tableEnergie,.tablePingResponse{
	font-size: 0.625em;
	font-style: normal;
	text-align: right;
	background-color: var(--color3);
	color: var(--color2);
	border: thin;
	border-radius: 3px;
	margin:auto;
	margin-bottom: 2px;
	padding: 0;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.tablePingResponse{	
	margin-bottom: 3px;
}

.tableEnergie tr,.tablePingResponse tr {
	background-color: var(--color4);
	padding: 0;
	color: var(--color2);
	border-radius: 3px;
	text-align: right;
	z-index: -1;
}

.tableEnergie th,.tablePingResponse th {
	color: var(--color1);
	border-radius: 3px;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
}

.tablePingResponse tr:hover {
	color: var(--color4);
	background-color:var(--color2);
}

.tableEnergie tr a,.tablePingResponse tr a {
	color: var(--color2);
}

.tableEnergie tr a:hover,.tablePingResponse tr a:hover {
	color: var(--color4);
	background-color:var(--color2);
}

.tableEnergie td,.tablePingResponse td {
		border-radius: 3px;
}

.Elektra1 ,.E1 ,.Elektra2 ,.E2 ,.Opgewekt ,.Gas ,.Water{
	font-style: inherit;
}
.Elektra1 ,.E1 ,.E, .OE1, .OE {
	color: yellowgreen;
}
.Elektra2 ,.E2, .OE2 {
	color: olivedrab;
}
.ElektraRetour1 ,.ER1, .OER1, .OER{
	color: darkgoldenrod;
}
.ElektraRetour2 ,.ER2 , .OER2 ,.VRZP{
	color: gold;
}
.Opgewekt, .OZP {
	color: goldenrod;
}
.Gas ,.G, .OG {
	color: firebrick;
}
.GD{
	color: #d17a7a;
}
.TG{
	color: darkorange;
}
.TN{
	color: deepskyblue;
}
.TX{
	color: red;
}
.Water ,.W {
	color: deepskyblue;
}
.gelukt{
	color: yellowgreen;
}
.tenieuw, .nieuw{
	color: dodgerblue;
}
.teoud, .verwerkt{
	color: Olive;
}
.tableheader {
	color: var(--color2);
}

.colorvpn1{color:var(--colorvpn1);background-color: var(--colorvpn5);}
.colorvpn2{color:var(--colorvpn2);background-color: var(--colorvpn5);}
.colorvpn3{color:var(--colorvpn3);background-color: var(--colorvpn5);}
.colorvpn4{color:var(--colorvpn4);background-color: var(--colorvpn5);}

.colorbackup1{color:var(--colorvpn1);}
.colorbackup2{color:var(--colorvpn2);}
.colorbackup3{color:var(--colorvpn3);}
.colorbackup4{color:var(--colorvpn4);}
.colorbackupWarning {color: orange;}
.colorbackupError {color: red;}

.tablepivpn, .tablenginxerror {
	background-color: var(--colorvpn4);
	color: var(--colorvpn2);
	border: none;
	text-align: left;
	font-size: 1em;
}
.tablenginxerror{
	font-size: 0.8125em;
	width: 333px;
	margin-bottom: 10px;
	margin-right: 2px;
}
.tableDivOverflowX {
	overflow-x:auto;
	max-height: 200px;
	overflow: scroll;
}
.tablepivpn th, .tablenginxerror th{
	color: var(--colorvpn5);
	font-weight: bold;
	background-color: var(--colorvpn3);
	max-width:100px;
}
.tablepivpn tr:nth-child(odd), .tablenginxerror tr:nth-child(odd){
	background-color: var(--colorvpn4)	;
}
.tablepivpn td, .tablenginxerror td{
	background-color: var(--colorvpn5);
	vertical-align: top;
}
.minWidth230{
	min-width:230px;
}
.minWidth450{
	min-width: 450px;;
}
.minWidth600{
	min-width: 600px;
}
.minWidth800{
	min-width: 800px;
}
.maxWidthMinContent{
	max-width: min-content;
}
.maxWidth100{
	max-width: 100px;
}
.maxWidth150{
	max-width: 150px;
}

.maxWidth230, .maxWidth250, .maxWidth330, .maxWidth380{
	max-width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.maxWidth230{
	max-width: 230px;
}
.maxWidth330{
	max-width: 330px;
}
.maxWidth380{
	max-width: 380px;
	overflow: scroll;
}
.tablepivpn td:hover, .tablenginxerror td:hover{
	color: var(--colorvpn4);
	background-color: var(--colorvpn2);
}

.tablerow{
	background-color: var(--color5);
	border: none;
	color: var(--color2);
	text-align: right;
}

.tablerow tr:nth-child(odd){
	background-color: var(--color4);
}

.tablerow td:hover {
	background-color:var(--color3);
}



.tablerow a {
	text-decoration: none;
	color: var(--color3);
}
.tablerow a:visited {
	text-decoration: none;
	color: var(--color3);
}
.tablerow a:hover {
	text-decoration: underline;
	color: var(--color1);
}
.tablerowPing {
	background-color: var(--color2);
	text-align: right;
}

.tablerow-mw{
	background-color: var(--color5);
	width:	100%;
	border: none;
	color: var(--color1);
}
.tablerow-mw tr:nth-child(odd){
	background-color: var(--color4);
}
.tablerow-mw a {
	text-decoration: none;
	color: var(--color5);
}
.tablerow-mw a:visited {
	text-decoration: none;
	color: var(--color2);
}
.tablerow-mw a:hover {
	text-decoration: underline;
	color: var(--color2);
}

.tablebackground {
	font-style: inherit;
}

.tableSmallFont {
	font-size: 0.8125em;
}

.tableMediumFont {
	font-size: 1em;
}

.tablebackground table{
	background-color: var(--color3);
}

.tablebackground tr th,.tablebackground tr td{
	border-collapse: collapse;
	padding: 2px;
	margin: 0;
}

.tablebackground th {
	background-color: var(--color3);
}

.tablebackground tr:nth-child(even){
	background-color: var(--color4);
}

.tablebackground tr:nth-child(odd){
	background-color: var(--color5);
}

.tablebackground tr:hover ,.tablebackground tr td:hover ,.tablebackground tr a:hover ,.tablebackground tr td a:hover  {
	color: var(--color5);
	background-color: var(--color3);
}

tr a {
	text-decoration:none;
	color:inherit;
}

#pings tr {
	background-color: var(--color4);
	border: thin #0C3;
	color: var(--color2);
	text-align: right;
}

#pings th {
	color: var(--color1);
	text-overflow: ellipsis;
}

#pings tr:hover {
	color: var(--color4);
	background-color:var(--color2);
}

#pings tr a {
	color: inherit;

}

#pings tr a:hover {
	color: var(--color4);
	background-color:var(--color2);
}

img.center{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.width480floatLeft{
	width: 480px;
	float: left;
	margin: 5px;
	text-align: center;
}
.imgHfixedCenter{
	max-height: 270px;
	width: auto;
    display: block;
	margin-left: auto;
	margin-right: auto;
}

.clearLeft{
	clear: left;
}
.img300px{
	max-width: 33%;
	height: auto;
	margin-left: auto;
    margin-right: auto;
    display: block;
}
.img10procent{
	height: auto;
	width: 150px;
}
.image75procent{
	height: auto;
	width: 600px;
}
.image100procent{
	height: auto;
	width: 800px;
}
.image200px{
	height: auto;
	width: 200px;
}
.img-logo, .img-logo-right{
	margin-top: 1px;
	margin-bottom: 1px;
	margin-right: 1px;
	margin-left: 1px;
	width: auto;
	height: 15px;
	float: left;
}
.img-logo-right{
	float: right;
}
.imagekader{
	position: relative;
	top: 0;
	left: 0;
	background-color: #092834;
	width: 1010px;
	height: 750px;
}
.imageblur100widthbg{
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	filter: blur(5px);
	z-index: 5;
}
.imageOnTop100height{
	position: absolute;
	top: 0;
	height: 100%;
	width: auto;
	z-index: 6;
}
.imageOnTopRight{
	position: absolute;
	top: 66px;
	right: 0;
	height: 100%;
	width: auto;
	z-index: 6;
}
.imagecenter{
	display: flex;
	justify-content: center;
}
.transparent{
	color: transparent;
}


.svg-vdb-fill-color-cpuloadavg-medium{
	fill: rgba(178, 34, 34, 0.5);
}
.svg-vdb-fill-color-cpuloadavg-high{
	fill: rgba(178, 34, 34, 1);
}
.svg-vdb-fill-color-cpuloadavg-normal {
	fill: var(--color4);
}
.svg-vdb-fill-color-cpuloadavg-low {
	fill: var(--color5);
}

.svg-vdb-stroke-color-cputemp{
	fill: var(--color4);
}
.svg-vdb-stroke-color-cputemp-needle{
	stroke: silver;
}

.svg-vdb-stroke-color-cputemp-streepje20{
	stroke:	green;
}
.svg-vdb-stroke-color-cputemp-streepje40{
	stroke:	red;
}

.svg-vdb-text-description, .svg-vdb-text-description-hoog, .svg-vdb-text-description-loadcpu, .svg-vdb-text-description-rx, .svg-vdb-text-description-tx {
	fill: var(--color1);
	font-size: 1px;
	text-anchor: middle;
}

.svg-vdb-fill-color-rx{
	fill:	YellowGreen;
}

.svg-vdb-fill-color-tx{
	fill:	DeepSkyBlue;
}

.svg-vdb-text-description-loadcpu {
	font-size: 15px;
}
.svg-vdb-text-description-hoog{
	fill: firebrick;
}
.svg-vdb-text-diskusage{
	fill: var(--color1);
	font-size: 2px;
	text-anchor:middle;
}

.svg-vdb-text-cpuloadavg-normal{
	fill: var(--color1);
	font-size: 37px;
	font-weight: normal;
	text-anchor: middle;
}

.svg-vdb-stroke-color-diskusage {
	stroke: var(--color2);
}

.svg-vdb-stroke-color-diskusage-total{
	stroke: var(--color1);
}
.svg-vdb-stroke-color-diskusage-high{
	stroke: darkorange;
}
.svg-vdb-stroke-color-diskusage-toohigh{
	stroke: firebrick;
}.svg-vdb-stroke-color-diskusage-normal{
	stroke: lawngreen;
}
.svg-vdb-fill-color-diskIO{
	fill:	var(--color2);
}

.svg-vdb-fill-color-diskIO-high{
	fill:	rgba(178, 34, 34,0.8);
}
.svg-vdb-text-color-diskIO-high{
	fill:	red;
	font-size: 1px;
	text-anchor: middle;
}
.svg-vdb-fill-color-memory{
	fill:	var(--color3);
}

.svg-vdb-fill-color-swap{
	fill:	steelblue;
}

.svg-vdb-logo-20 {
	margin: auto;
	width: auto;
	height: 18px;
	float: right;
}

.svg-vdb-logo-28 {
	fill: var(--color1);
	margin: auto;
	width: auto;
	height: 34px;
	float: right;
}


.svg-hamburger-menu-40, .svg-vdb-logo-40 {
	fill: var(--color4);
	stroke: none;
}
.svg-hamburger-menu-40:hover,.svg-hamburger-menu-40:focus{
	fill: var(--color3);
}
.svg-hamburger-menu-40{
	margin-top: 7px;
	margin-bottom: 7px;
	margin-right: 7px;
	margin-left: 7px;
	width: auto;
	height: 21px;
	float: left;
	z-index: -1;
}


.svg-vdb-logo-40, .svg-vdb-logo-40-links, .svg-vdb-logo-30-rechts {
	margin-top: 1px;
	margin-bottom: 1px;
	margin-right: 6px;
	margin-left: 1px;
	width: 33px;
	height: 33px;
	float: right;
	fill: var(--color1);
}
.svg-vdb-logo-30-rechts{
	width: 24px;
	height: 24px;
	fill: var(--color1);
}
.svg-vdb-logo-40-links {
	float: left;
}

.svg-vdb-logo-100 {
	margin: 3px;
	width: 100px;
	height: auto;
	fill: var(--color1);
	stroke: none;
	float: right;
}

.svg-vdb-logo-150 ,.svg-vdb-logo-150-right {
	margin: 5px;
	margin-bottom: 29px;
	width: 150px;
	height: auto;
	fill: var(--color5);
	stroke: none;
	float: left;
}

.svg-vdb-logo-150-right {
	float: right;
}

.svg-vdb-logo-100-right{
	margin: 25px;
	width: 100px;
	height: auto;
	fill: var(--color2);
	stroke: none;
	float: right;
}
.svg-vdb-logo-100-right-blue{
	margin: 25px;
	width: 100px;
	height: auto;
	fill: var(--color3);
	stroke: black;
	float: right;
}
.svg-vdb-logo-200-right{
	margin: 25px;
	width: 200px;
	height: auto;
	fill: var(--color);
	stroke: none;
	float: right;
}
.svg-vdb-logo-300 {
	margin: 3px;
	width: 200px;
	height: auto;
	fill: var(--color5);
	stroke: none;
	float: right;
}
.svg-vdb-logo-300-center {
	margin: 3px;
	width: 300px;
	height: auto;
	fill: var(--color5);
	stroke: none;
}
.svg-vdb-logo-400 ,.svg-vdb-logo-400-right{
	margin: auto;
	max-width: 350px;
	height: auto;
	fill: var(--color5);
	stroke: var(--color1);
	float: left;
}
.svg-vdb-logo-400-right{
	float: right;
}
.svg-vdb-logo-welkom{
	width: 350px;
	height: auto;
	fill: var(--color5);
	stroke: none;
	float: none;
}
.svg-vdb-logo-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.svg-schip {
	margin: 2px;
	width: 50px;
	height: auto;
	fill: var(--color5);
	stroke: none;
	float: right;
	transition: width 1s, fill 1.5s ease;
}

a:hover .svg-schip {
	width: 55px;
	fill: var(--color4);
}

.svg-schip-color5{
	margin: 2px;
	width: 100px;
	height: auto;
	fill: var(--color1);
	stroke: none;
	float: left;
}

.svg-size-100-left-visible{
	background-color: transparent;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 3px;
	margin-right: 3px;
	width: 155px;
	height: 207px;
	stroke: none;
	float: left;
	background-color: var(--color2);
	fill: var(--color4);
}

.svg-size-100,.svg-size-100-left,.svg-size-100-right{
	background-color: transparent;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 3px;
	margin-right: 3px;
	width: 25px;
	height: auto;
	fill: none;
	stroke: none;
	transition: width 0.5s, background-color 0.5s, fill 0.5s ease;
}

.svg-size-100 {
	margin-left: auto;
	margin-right: auto;

}

.svg-size-100-left{
	float: left;
}

.svg-size-100-right{
	float: right;
}

a:hover .svg-size-100{
	background-color: var(--color2);
	fill: var(--color4);
	width: 100px;
}

a:hover .svg-size-100-left{
	background-color: var(--color2);
	fill: var(--color4);
	width: 175px;
}

a:hover .svg-size-100-right{
	background-color: var(--color2);
	fill: var(--color4);
	width: 175px;
}

.hide-me-from-older-browsers {
  display: none;
  visibility: hidden;
}

svg g.hide-me-from-older-browsers {
  display: inline;
  visibility: visible;
}

.svgratios{
	margin: 5px;
	margin-right: 25px;
	width: 288px;
	height: auto;
	fill: none;
	stroke-width: 0.55;
	float: right;
}

.circleFillLogoOnline{
		fill: var(--color4)
}

.circleFillLogoOnlineScaled{
	fill: var(--color1)
}

.svgstrokecolor1{
	stroke: tomato;
}

.svgstrokecolor2{
	stroke: orange;
}

.svgstrokecolor3{
	stroke: dodgerblue;
}

.svgstrokecolor4{
	stroke: mediumseagreen;
}

.svgstrokecolor5{
	stroke: gray;
}

.svgstrokecolor6{
	stroke: slateblue;
}

.svg16x32{
	width: 16px;
	height: 32px;
}
.svg16x32:hover{
	width: 24px;
	height: 48px;
}
.svg32x32{
	width: 32px;
	height: 32px;
}
.svg32x32:hover{
	width: 48px;
	height: 48px;
}
.textcolor00 {
	color: var(--color2);
}

.textcolororange{
	color: orange;
	background-color: var(--color5);
}
.textcolorred{
	color: red;
}
.textcolor1, .textcolortomato{
	color: tomato;

}

.textcolor2, .textcolororange_nb{
	color: orange;
}

.textcolor3, .textcolorblue{
	color: dodgerblue;
}

.textcolor4, .textcolorgreen{
	color: mediumseagreen;
}

.textcolor5, .textcolorgray{
	color: gray;
}
.textcoloryellow{
	color: yellow;
}
.textcolor6{
	color: slateblue;
}
.textcolor7{
	color: darkgray;
}
.textcolor8{
	color: WhiteSmoke;
	font-weight: lighter;
}
.topvensterlink{
	position: static;
	bottom: 0;
	text-align: center;
	margin-bottom: 2px;
}
.lefttopvensterlink{
	float: left;
	text-align: left;
	margin-left: 5px;
	margin-bottom: 2px;
}
.righttopvensterlink{
	float: right;
	text-align: right;
	margin-right: 5px;
	margin-bottom: 2px;
}
.linkspadding{
	color: dodgerblue;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* dropdown menu part */
.dropbtn {
	background-color: transparent;
	color: var(--color4);
	padding: 0;
	margin: auto;
	height: auto;
	width: auto;
	cursor: pointer;
	display: block;
	border: none;
	float: left;
	transition: all 0.7s;
	z-index: 0;
}

.dropbtn:hover, .dropbtn:focus {
	color: var(--color3);
}

.dropdown {
  float: left;
  color:var(--color4);
  background-color: var(--color2);
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
	transition: all 1.5s ease;
}

.dropdown-content {
	display: none;
	position: absolute;
	left: 10px;
	top: 10px;
	opacity: 0;
	color: var(--color1);
	background-color: var(--color4);

	font-size: 1em;
	width: 275px;
	height: auto;
	transition: all 0.7s ease;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius: 3px 3px 3px 3px;
	transition: all 0.4s ease;
}

.dropdown-content a {
	padding: 5px 5px;
	color: inherit;
	text-align: left;
	text-decoration: none;
	display: block;
	border-radius: 3px 3px 3px 3px;
}

.dropdown-content a:hover {
	color: var(--color5);
	background-color: var(--color2);
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	opacity: 0.97;
}

.dropbtn:hover .dropdown-content {
	opacity: 0.97;
	z-index: auto;
}

.dropdown-content .active {
	color: var(--color1);
	background-color: var(--color3);
	opacity: 1;
}


/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  height: auto;
}
.column8 {
  float: left;
  width: 12.5%;
  height: auto;
}
.column a {
  float: none;
  display: block;
  text-align: left;
}

.column a:hover {
	color: var(--color5);
	background-color: var(--color2);
	opacity: 0.97;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.show {
	display: block;
	background: linear-gradient(to right, var(--color4),var(--color3));
	z-index: auto;
}
.hide {
	display: none;
}

.camouflageMain a:visited{
	color: var(--color4);
}

@keyframes fadeshow {
  from {
		opacity: 0;
	}
  to {
		opacity: 1;
	}
}
@keyframes fadehide {
  from {
		opacity: 0;
	}
  to {
		opacity: 1;
	}
}

.demolinkhidden{
	margin: auto;
	color: var(--color2);
}
.viewer{
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 2%;
	width: 94%;
	height: 94%;
	font-size: 0.8125em;
	color: var(--color2);
}
.hblActive a:visited {color: dodgerblue;}
.hblActive a:hover {color: dodgerblue;}
.hblActive a:active {color: dodgerblue;}
.hblActive a:visited {color: dodgerblue;}
.hblInactive a:visited {color: inherit;}
.hblInactive a:hover {color: inherit;}
.hblInactive a:active {color: inherit;}
.hblInactive a:visited {color: inherit;}

/* bgcolors */
.color0 {
	color: black;
}
.color1{
	color: var(--color1);
}
.color2{
	color: var(--color2);
}
.color3{
	color: var(--color3);
}
.color4{
	color: var(--color4);
}
.color4b{
	color: slategray;
}
.color5{
	color: var(--color5);
}
.color5b{
	color: rgba(var(--color5), 0.8);
}
.color6 {
	color: dodgerblue;
}
.color7 {
	color: Orange;
}
.color7b {
	color: darkorange;
	text-shadow: 1px 1px var(--color5);
}
.color8 {
	color:yellow;
}
.color9 {
	color: gray;
}
.color9b {
	color: lightgray;
}
.color9c {
	color: dimgray;
}
.colorgold{
	color: gold;
}
.zpopbrengsthoog{
	font-weight: bold;
	color: dimgray;
}
.zpopbrengstmedium{
	font-weight: bolder;
	color: black;
}
.colorgoldshadow{
	color: gold;
	text-shadow: 1px 1px var(--color5);
}
.colorgoldenrod{
	color: goldenrod;
}
.colorgoldenrodshadow{
	color: goldenrod;
	text-shadow: 1px 1px var(--color5);
}
.colordarkgoldenrod{
	color: darkgoldenrod;
}
.colordarkgoldenrodshadow{
	color: darkgoldenrod;
	text-shadow: 1px 1px var(--color5);	
}
.colorGas{
	background-color: #ff3030;
}
.colorElektraDal{
	background-color: deepskyblue;
}
.colorElektraNormaal{
	color: var(--color1);
	background-color: #00688b;
}
.colorElektraTerug{
	background-color: #548b54;
}
.colorElektraZPopbrengst{
	background-color: gold;
}
.colorElektraZPlevering{
	background-color: goldenrod;
}
.colorElektraZPdirectverbruik{
	background-color: darkgoldenrod;
}
.debugInfoOnTop{
	position: fixed;
	top: 100px;
	left: 50px;
	font-size: small;
	color: var(--color1);
	background-color: var(--color5);
	z-index: 125;
	opacity: 0.95;
	width: auto;
	height: auto;
	border-style: solid;
	border-width: 0.15cap;
	border-color: var(--color4);
}
.screenresOnTop{
	position: fixed;
	padding: 5px;
	top: 50px;
	left: 400px;
	font-size: small;
	color: var(--color5);
	font-weight: bold;
	background-color: orange;
	z-index: 125;
	opacity: 0.8;
	width: 210px;
	text-align: center;
	height: fit-content;
}
.buttonsOnTop{
	position: fixed;
	padding: 2px;
	top: 90px;
	left: 5px;
	border: none;
	border-radius: 5px;
	font-size: small;
	color: var(--color5);
	background-color: var(--color2);
	z-index: 125;
	opacity: 0.8;
	width: fit-content;
	text-align: center;
	height: fit-content;
}
.buttonWifiDebug{
	border: none;
	padding: 2px;
	max-width: 110px;
	min-height: 20px;
	margin: 2px;
	border-radius: 5px;
	max-height: 18px;
	overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis;
	display: block;
	float: left;
	background-color: var(--color3);
	color: var(--color1);
}
.buttonSpacerDebug{
	border: none;
	padding: 2px;
	max-width: 110px;
	min-height: 20px;
	margin: 2px;
	border-radius: 5px;
	max-height: 18px;
	overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis;
	display: block;
	float: left;
	background-color: var(--color1);
	color: var(--color5);
}
.lowlight{
	text-shadow: 0 0 1px var(--color5);
	background-color: var(--color3b);
}
.APiconImg{
	width: 10px;
	height: 10px;
}
.APlegendOnTop{
	position: fixed;
	padding: 5px;
	top: 120px;
	right: 50px;
	font-size: small;
	color: var(--color5);
	/* font-weight: bold; */
	background-color: var(--color4);
	z-index: 125;
	opacity: 0.8;
	width: fit-content;
	text-align: left;
	height: fit-content;
}
#energietabel th{
	color: var(--color5);
	background-color: var(--color3);
}
#energietabel tr{
	color: var(--color5);
	background-color: var(--color2);
}
.colorDomoLogLevels{
	padding-left: 5px;
	color: var(--color1);
}
.colorDomoLogLevel1{
	padding-left: 5px;
	padding-right: 5px;
	color: var(--color2);
}
.colorDomoLogLevel2{
	padding-left: 5px;
	padding-right: 5px;
	color: var(--color3);	
}
.colorDomoLogLevel4{
	padding-left: 5px;
	padding-right: 5px;
	color: orangered;
	background-color: floralwhite;
}
.colorDomoLogLevel4geen{
	padding-left: 5px;
	padding-right: 5px;
	color: var(--color4);	
}
.colorDomoLogLevel4weinig{
	padding-left: 5px;
	padding-right: 5px;
	color: orangered;
}
.colorDomoStatus{
	padding-left: 5px;
	color: slategray;	
}
.colorAP-meterkast{
	color: whitesmoke;
}
.colorAP-ringPro{
	color: #999999;
}
.colorAP-slaapkamer {
	color: orange;
}
.colorAP-woonkamer {
	color: greenyellow;
}
.colorAP-zolder {
	color: skyblue;
}
.colorAP-tuin {
	color: olivedrab;
}
.colorAP-JoyPanemTV{
	color: #66B032;
}
.colorAP-EKTS-wnkmr{
	color: #66B032;
}
.colorAP-EKTS-mtrkst{
	color: #ffff00;
}

.colorgreen{
	color: #02c302;
}
.colorregenboog1{
	color: #ff0000;
}
.colorregenboog2{
	color: #ff8800;
}
.colorregenboog3{
	color: #ffff00;
}
.colorregenboog4{
	color: #00ff00;
}
.colorregenboog5{
	color: blue;
}
.colorregenboog6{
	color: indigo;
}
.colorregenboog7{
	color: violet;
}
.fontitalic{
	font-style: italic;
}
.bgcolor1{
	background-color: var(--color1);
}
.bgcolor2{
	background-color: var(--color2);
}
.bgcolor3{
	background-color: var(--color3);
}
.bgcolor4{
	background-color: var(--color4);
}
.bgcolor5{
	background-color: var(--color5);
}
.bgcolornginxvpn{
	background-color: #b0b0b0;
}
.bgcolorklimaat{
	background-color: #75ecfc;
}
.bgcolorGreen{
	background-color: darkgreen;
}
.bgcolorYellow{
	background-color: yellow;
}
.bgcolorOrange{
	background-color: orange;
}
.bgcolorRed{
	background-color: red;
}
.bgcolorActiveButton{
	background-color: dodgerblue;
}
.border{
	border-width: 1px;
	border-color: var(--color5);
}
.energieChart{
	max-width: 100%;
	min-width: 100px;
	height: auto;
	margin-right: 2px;
	margin-bottom: 2px;
}
.energiecolumns2{
	column-count: 2;
	column-gap: 20px;
}

.footerbumper{
	width: 100%;
	height: 23px;
}
.klimaatbumper{
	width: 100%;
	height: 130px;
}

.rechthoekaircobovenop{
	position: fixed; 
	bottom: 25px; 
	max-width: 890px;
	height: 100px;
}
.weerrechthoekpositie{
	width: 100%;
	position: relative;
	top: 0px;
	left: 0px;
	background-color: var(--color5);
	z-index: 1000;
	font-size: 0.625em;
	margin: auto;
	height: auto;
	background-color: var(--color5);
	opacity: 0.85;
	padding: 3px;	
	margin-top: 3px;
	margin-bottom: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.tijdinbeeld{
	float: right;
	font-size: 0.625em;
	margin: 3px;
	color: var(--color3);
	z-index: 101;
}

.schip{
	height: 100%;
}
.schipOverlayText{
	position: absolute;
	top: 25%;
	left: 25%;
	font-size: 1em;

	background-color: var(--color4);
	transform: translate(-25%,-25%);
	-ms-transform: translate(-25%,-25%);
}
.schipOverlayText a:active, .schipOverlayText a:visited{
	color: orange;
}
.grafieken{
	max-width: 1600px;
}
.wifibackground{
	background-color: gray;
}
.wifibutton{
	background-color: var(--color4);
	border: none;
	border-radius: 5px;
	color: var(--color1);
	max-width: 100px;
	min-height: 20px;
	max-height: 18px;
	margin: 5px;
	/* margin-left: auto;
	margin-right: auto; */
	opacity: 0.7;
	overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis;
	padding: 2px;
	z-index: 199;
	box-shadow: 2px 2px 5px 5px var(--color5);
	position: fixed;
	top: 36px;
	right: 35px;
}
.wifibutton:hover{
	background-color: var(--color3);
	color: var(--color5);
}
.wifibuttonchart{
	background-color: var(--color4);
	border: none;
	border-radius: 5px;
	color: var(--color1);
	max-width: 100px;
	min-height: 20px;
	max-height: 18px;
	margin: 5px;
	opacity: 0.7;
	overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis;
	padding: 2px;
	z-index: 199;
	box-shadow: 2px 2px 5px 5px var(--color5);
	position: fixed;
	top: 36px;
	right:125px;
}
.wifibuttonchart:hover{
	background-color: var(--color3);
	color: var(--color5);
}
.wificolorchannel{
	color: #b3d7e5;
	padding-top: 4px;
	padding-bottom: 1px;
}
.wificolorssid{
	color: #67afcb;
}
.wificolorrssi{
	color: #419bbe;
}
.wififont, .wififont2, .wififontWRV{
	font-size: 1em;
}
.wifireport-grid2{
	margin-top: 10px;
	float:none;
	max-width: 908px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-auto-columns: 50%;
	grid: auto / auto auto;
	grid-gap: 8px;
} 
.wifireport-grid2 div{
	text-align: left;
	width: 450px;
	padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	background-color: var(--color4);
}
.wifitekstheader{
	font-size: 1.2em;
	font-weight: bold;
	color: var(--color1);
	padding-left: 3px;
	padding-bottom: 3px;
	background-color: transparent;
}
/* responsive */

@media screen and (max-width:2048px) {
  /* For desktops: */
	.header {width:100%;}
	.Datum, .datum{max-width: 50px;}
	.content {width: 1200px;margin-left: auto;margin-right: auto;}
	.gradient {max-width: 1200px;}
	.fotoGrid,.fotoGrideven {display: grid;grid-template-columns: 50% 50%;}
	#menulist{max-width: 1200px;}
	.grafieken{max-width: 1200px;}
	.grid-charts{max-width: 1200px;}
	.grid-tables{max-width: 1200px;}
	.mainLogging{max-width: 1200px}
	.blockcenterReceiver{max-width: 1200px;}
	.tablenginxerror{width:396px;}
	.grid-text{max-width: 1200px;}
}
@media screen and (max-width:1200px) {
  /* For desktops: */
	.header {width:100%;}
	.Datum, .datum{max-width: 50px;}
	.content {width: 1010px;margin-left: auto;margin-right: auto;}
	.gradient {max-width: 1010px;}
	.fotoGrid,.fotoGrideven {display: grid;grid-template-columns: 50% 50%;}
	#menulist{max-width: 1010px;}
	.grafieken{max-width: 800px;}
	.grid-charts{max-width: 1010px;}
	.grid-tables{max-width: 1010px;}
	.mainLogging{max-width: 1010px}
	.blockcenterReceiver{max-width: 1010px;}
	.tablenginxerror{width:333px;}
	.grid-text{max-width: 1010px;}
}
@media screen and (max-width:768px) {
  /* For tablets: */
  	#charts, #tabellen, #viewerHeader, #linksFiles{grid-template-columns: auto auto;}
	.viewer {margin-top: 48px;}
	.Datum, .datum{max-width: 50px;}
	.midden{max-width: 100%;}
	.header {width:100%;}
	.content {width: 100%;margin-left: auto;margin-right: auto;}
	.cntdwnmbl{display: inline;margin-left: auto;margin-right: auto;}
	.gradient {width: 100%;}
	.fotoGrid,.fotoGrideven {display: grid;grid-template-columns: 50% 50%;}
	#tekst01,#tekst02 {width: 40%}
	.blockcenterReceiver{max-width: 600px;}
}

@media screen and (max-width:600px) {
	/* For mobile phones: */
	img {max-width: 100%; height: auto;}

  	#charts, #tabellen, #viewerHeader, #linksFiles{grid-template-columns: auto;}
	#energietabel th{color: var(--color2);background-color: var(--color5);}
	#energietabel tr{color: var(--color5);background-color: var(--color1);}
	#LinkerkolomOnder{width: 390px;margin-left:0;left:0;}
	#tekst01,#tekst02 {float:none;width: 90%}
	.APlegendOnTop{top: 220px;right: 10px;}
	.beeldhouderVTplaceholder{min-height: 150px;}
	.blacklistBlock{min-width:max-content; margin-left: auto; margin-right: auto;font-size: 1.125em;}
	.blockcenterReceiver{max-width: 100%;}
	.blockKnoppen{float: inline-start;}
	.blok{width: 20%;	margin: 0;}
	.bottomtextontop{bottom: 25px;font-size: small;}
	.buttonNR {font-size: 0.5em;height: 25;}
	.buttonInlineRoundedReceiverInfo, .buttonInlineRoundedReceiverSource, .buttonInlineRoundedReceiverSourceTV, .buttonInlineRoundedReceiverVolume, .buttonInlineRoundedReceiverSurround{font-size: 0.8125em; padding: 2px; min-width: 60px;}
	/* .buttonInlineRoundedReceiverInfo{max-width: 55px;} */
	.buttonTempiPhone{padding: 2px;font-size: 1em;max-width: 95px;height:20px;}
	.buttonSpace{height: 0;width:100%;}
	.buttonTemp, .buttonDruk {color: var(--color1); background-color: var(--color4);}
	.chartImageContainer{position: relative; left: 0;}
	.cntdwnmbl{display: inline;margin-left: auto;margin-right: auto;}

	.content {width: 100%;margin-bottom: 35px;}
	.column {width: 100%; height: auto;}
	.column8 {float: left; width: 12.5%; height: auto;}
	.diskstationOnTop{top:72px;}
	.domoticzStatusOnTop{top:72px;}
	.dropdown-content,.main,.right,.footer,.footerDebug,.evenonderwerpGrid,.onderwerpGrid {font-size: 1.06em;}
	.energiecolumns2{column-count: 1;column-gap: 0;}
	.erbovenoptitel{position:relative;top:-15;left:0;color:var(--color1);background-color: var(--color4);}
	.experiaBoxOnTop{top:72px;}
	.fingStatusOnTop{top:72px;}
	.flexAlignItems{justify-content: center;}
	.fonteigenAPs{font-size: 0.8125em;}
	.fontLucida{font-size: small;}
	.fotoGrid,.fotoGrideven {display: grid;grid-template-columns: 100%;}
	.fullwidth{margin-bottom: 0;}
	.grafieken{max-width: 390px;}
	.grid-charts , .grid-tables, .grid-text, .grid-text2, .grid-textmidden, .grid-textmidden-2, .grid-textmidden-3{width: 390px;grid-auto-columns: 100%;grid: auto / auto;margin-left: 0;margin-right: 0;}
	.grid-charts60auto {grid: auto / auto;width: 390px;}
	.grid-raincharts {grid-auto-columns: 100%;grid: auto / auto;margin-left: 0;margin-right: 0;}
	.header, .main, .right, .balk {width:100%;}
	.heightMargin{ margin-top: 0;}
	.hideCookies{top: 175px;left: 25px;max-width:90%;}
	.hideCookiesIssued{top: 175px;left: 25px;max-width:90%;}
	.hideWhitelist{top: 175px;left: 25px;max-width:90%;}
	.hideDomo1, .hideDomo2, .hideDomo3{top: 5px;}
	.hidechart1, .hidechart2, .hidechart3{top: 5px; left:0; margin-left: auto; margin-right: auto;}
	.iCookieHeaderColor{color:gray;font-size: small;margin: 0;padding: 0;}
	.iCookieHeaderColorHuidig{color:gray;font-size: small;margin: 0;padding: 0;}
	.iCookiesHeaderHide{display: inline-block;}
	.iCookieHelpColor{color: var(--color4);}
	.iCookiesSubHeader{display: none;}
	.iCookiesWeergaveVak{background-color: lightgray;color: var(--color5);max-height: 180px;}
	.iCookiesWeergaveVak h1 {color:dimgray;}
	.imageOnTopRight{position:relative;	top:0; display: flex; justify-content: center; align-items: center;}
	.imaxWidthContent{max-width: 100%;}
	.img10procent{height: auto;width: 76px;}
	.img-left-nm {float: left; position:relative; left: 0;}
	.image75procent{height: auto;width: 380px;}
	.image100procent{height: auto;width: 380px;}
	.kiekje{margin-top: 0;}
	.kolommen{column-count: 1; column-width: 80%;}
	.loglineIndent{max-width: 380px;}
	.klimaatbumper{height: 0;}
	.kwadrantbreedte{width: inherit;max-width: 390px;}
	.midden{max-width: 100%;}
	.modal{top:  40px;}
	.rechthoekAirco{font-size: 1em;	padding: 2px; margin-top: 1px;}
	.requestBLcolums {column-count: 1;}
	.requestBLlog {position: fixed;bottom: 0;left:0;z-index: 2001;background-color: var(--color5);max-height: 55px;}
	.right {padding-bottom: 35px; margin-bottom: 35px;}
	.ringtuinOnTop{top:72px;}
	.ringvoordeurOnTop{top:72px;}
	.screenresOnTop{left: 90px;}
	.slideshow-container {max-width: inherit;}
	.spacerFooter {height: 23px;}
	.spacerId {width: 100%; height: 70px;}
	.spacerMenu {width: 100%; height: 105px;}
	.spacerwifichartsvg{height: 0;}
	.svgsolarpanel{width:380px;height: auto;}
	.svgchart{width: 380px;}
	.svg-vdb-logo-400 ,.svg-vdb-logo-400-right{float: none;margin-left: auto;margin-right: auto;}
	.synobublok{max-height: fit-content;}
	.synobulog{white-space: wrap;}
	.synoindex{padding-left: 2em;text-indent: -2em;overflow-x: hidden;white-space: wrap;}
	.tekstvak600{width: 100%}
	.tekstvak700{width: 100%}
	.tekstvakGroot{max-height:550px;}
	.tekstvakGrootDomo{max-height: 450px;}
	.tekstvakGrootDS{max-height: 450px;}
	.tekstblokMidden{width: 390px;margin: 0;}
	.tekstblokMiddenGroot{border: 0;max-width: 390px;padding: 1px;margin-top: 0px;margin-bottom: 23px;max-height: 600px;}
	.width100procentfixedbottom{display: none;position:static;bottom: 0;left:0;height:325px;}
	.width100procentfixedtop{position: static;top: 0;left:0;padding-top:0;}
	.wifireport-grid2{grid: auto / auto;}
	.wifireport-grid2 div{width: 390px;}
	.textellipsis{max-width: 100px;}
	.textfloatLeft {float: none;}
	.tijdinbeeld{display: none;}
	.text {font-size: 1em;}
	.tekstgrootinline{font-size: 1.25em; display: inline; width: 300px;}
	.viewer {margin-top: 68px;}
	.w3-third {width:100%;float: left;}
	.rechthoekaircobovenop{position: static; top: 0; right: 0; }
	.weerrechthoekpositie{position: static; top: 0; left: 0; font-size: 1em; max-width: 390px;z-index: 0;margin-left: auto;margin-right: auto;}
	.width255, .width300{width: 100%;}
	.width480floatLeft{	width: 390px;}
	.wifibutton{top: 72px;}
}