/**** General ****/
html,
body {
	font-size:16px;
	background-color: #fdfdfd;
	color: #111;
}

header,
main,
footer {
	display:block;
	width:100%;
}

header,
footer {
	background-color:#fdfdfd;
}

header {
	position: sticky;
	padding-top: 0.2rem;
	top: 0;
	z-index: 1;
}

main {
	margin-bottom:0;
}

main:has( + footer) {
	margin-bottom:3rem;
}

footer {
	position:fixed;
	bottom:0;
	padding:.5rem;
	z-index:1;
	box-shadow:0px 0px 5px 0px;
}

h1 {
	font-size:1.4rem;
}

@media (min-width: 768px) {
	h1 {
		font-size:1.5rem;
	}
}

@media (min-width: 992px) {
	header,
	footer {
		height:3rem;
		padding:.5rem;
	}
	
	h1 {
		margin:0;
	}
	
	main {
		padding:1rem 0;
	}
}

@media (min-width: 1200px) {
	main:has( + footer) {
		margin-bottom:0;
	}
	
	footer {
		position:relative;
		box-shadow:none;
	}
}

.cta {
	width: 80%;
	margin: 0 10%;
}

footer a.cta:nth-of-type(2) {
	margin-top:1rem;
}

@media (min-width: 768px) {
	.cta {
		width: auto;
		max-width: 30%;
		margin: 0;
	}
	
	footer a.cta:nth-of-type(2) {
		margin-top:0;
		margin-left:1rem;
	}
}

/**** Overzicht ****/
footer.overzicht {
	display:none;
}

.providers > div {
	
}

.providers > div.datum {
	display:none;
}

label {
	position: relative;
	width:100%;
	padding:.8rem;
	margin-bottom:1rem;
	border: 1px solid #000;
	border-radius:.25rem;
	background-color: #fff6;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor:pointer;
}

/* Hide the browser's default checkbox */
label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	height: 1.6rem;
	width: 1.6rem;
	border: 1.5px solid #dcdcdc;
	border-radius:50%;
	background-color: #eee;
}

/* On mouse-over, add a grey background color */
label:hover input ~ .checkmark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
label input:checked ~ .checkmark {
	background-color: #2196F3;
	border-color: #1871b8;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
label input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
label .checkmark:after {
	left: 35%;
	top: 18%;
	width: .45rem;
	height: .75rem;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

label .suppliername {
	margin-left:2rem;
	display:block;
}

label .suppliername:first-letter {
	font-weight:bold;
}

label:has(input:checked) {
	background-color:#deefff;
}

/**** Vandaag & Morgen ****/
.back {
	height:1.85rem;
	line-height:.9rem;
	border:1px solid #333;
	background:lightgrey;
	text-decoration:none;
}

table thead {
	position:sticky;
	top:2.475rem;
	border-width: 1px;
	background-color:#e7e9ec;
	z-index:1;
}

@media (min-width: 992px) {
	table thead {
		top:3rem;
	}
}

.vandaag table tbody tr {
	opacity:0.4;
}

.vandaag table tbody tr#active {
	opacity:1;
	background-color:#15a9d640;
	font-weight:bold;
}

.vandaag table tbody tr#active ~ tr {
	opacity:1;
}

table tr th,
table tr td {
	padding:0 0.25rem;
	border:1px solid #000;
}

table.enever tr th {
	background-color: #ff000015;
}

table tr td.worst {
	border-left:3px solid #8b0000;
}

table tr td.bad {
	border-left:3px solid #f62217;
}

table tr td.medium {
	border-left:3px solid #fdbd01;
}

table tr td.good {
	border-left:3px solid #e2f516;
}

table tr td.great,
table tr td.negative {
	border-left:3px solid #4cc417;
}

table tr td.negative {
	color:#46b316;
}

table tr td.uur:after {
	content:':00';
}

table tr td.prijs:before {
	content:'€ ';
	opacity:0.5;
}

table tr td.prijs:after {
	content:' /kWh';
	font-size:.75rem;
	opacity:0.33;
}

.debug > p {
	position: absolute;
	color:#fdfdfd;
}

.vandaag .providers h2,
.morgen .providers h2 {
	position:relative;
	font-size:1.2rem;
}

.vandaag .providers h2:after,
.morgen .providers h2:after {
	content: '>';
	position:absolute;
	display:inline;
	right:.75rem;
	height:1.5rem;
	width:1.5rem;
	line-height:1;
	text-align:center;
	border-radius:50%;
	background-color: #eee;
	box-shadow: 0 0 5px -2px;
	transition: transform .15s;
}

.vandaag .providers h2.open:after,
.morgen .providers h2.open:after {
	transform: rotate(90deg);
}

.vandaag .providers .toggle-content,
.morgen .providers .toggle-content {
	display:none;
}

@media (min-width: 992px) {
	.vandaag .providers h2:after,
	.morgen .providers h2:after {
		display:inline-block;
		right:unset;
		margin-left:1rem;
	}
}

.vandaag .providers .provider,
.morgen .providers .provider {
	display:inline-block;
	margin-right: 1rem;
	margin-bottom:1rem;
}

@media (min-width: 992px) {
	.vandaag .providers .provider,
	.morgen .providers .provider {
		display:block;
		margin-bottom:.5rem;
		margin-right:0;
		white-space:nowrap;
	}
}

.vandaag .provider a,
.morgen .provider a {
	padding:.25rem .5rem;
	background-color:#97a4b0;
}

.vandaag .provider a:after,
.morgen .provider a:after {
	content: '\00BB';
	margin-left:.25rem;
}

/*	INSTALL BUTTON */

.install-button {
	display: none;
	position: fixed;
	width: 90%;
	bottom: 0;
	left: 5%;
	padding: .25rem;
	border: none;
	background-color: #eef6;
	text-align: center;
	font-size: 0.7rem;
}

@media (min-width: 600px) {
	.install-button {
		font-size: 14px;
	}
}

.install-button.ios {
	bottom: 1rem;
}

.install-button.ios:after {
	content: '';
	position: absolute;
	left: calc(50% - 1rem);
	top: 100%;
	width: 0;
	height: 0;
	border-left: 1rem solid transparent;
	border-right: 1rem solid transparent;
	border-top: 1rem solid;
	border-top-color: #eef6;
	clear: both;
}

.install-button svg {
	width: 1rem;
	stroke: #666;
}

.install-button.ios > span.hidebanner {
	position:absolute;
	top: 50%;
	transform: translate(0%, -50%);
	padding: 15px 7.5px;
	float: right;
	right: 5%;
}


/* INSTALL PROMPT MESSAGE */

.overlay-msg-box {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #00000080;
	z-index: 100;
}

.overlay-msg-box-content {
	display: inline-block;
	position: absolute;
	padding: 1rem 1.5rem;
	top: 50%;
	transform: translate(0, -50%);
	background-color: #f3f3f3;
}

.overlay-msg-box-content p {
	margin-bottom: 1rem;
}

.overlay-msg-box-content p svg {
	stroke: #000;
}

.overlay-msg-box-btn {
	display: inline-block;
	text-align: center;
	cursor: pointer;
}

.overlay-msg-box-btn.add {
	float: right;
}

.overlay-msg-box-btn.cancel {
	background-color: transparent !important;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	color: #333;
}

.overlay-msg-box-btn.ok {
	display: block;
}