:root
{
	--achtergrond: #fff;
	--accent: #8000c0; /* blueviolet;*/
	--border: #ccc;
}

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	-o-box-sizing: inherit;
	-ms-box-sizing: inherit;
	box-sizing: inherit;
}

*
{
/*	text-shadow: 1px 1px 3px #ddd; Open Sans, Corbel, Trebuchet MS,*/
	font-family: Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
#main
{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border: 0px solid grey;
        color: #444;
        font-size: 16px;
        padding: 6px;
}
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
#main
{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border: 0px solid grey;
        color: #444;
        font-size: 16px;
        padding-top: 20px;
}
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
#main
{
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        border: 0px solid grey;
        color: #444;
        font-size: 16px;
        padding-top: 20px;
}
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
#main
{
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        border: 0px solid grey;
        color: #444;
        font-size: 16px;
        padding-top: 20px;
}
}


#formulier
{
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding: 3px;
	margin-top: 20px;
}

table
{
	width: 100%;
	border-collapse: collapse;
}

.border
{
	border: 0.7px solid var(--border); 
}

.borderbottom
{
	border-bottom: 0.7px solid var(--border); 
}

.uitslag, .aanmelden
{
	margin-top: 20px;
	margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
	max-width: 600px;
}

#header
{
	display: block;
}
#header h3
{
}

#header img
{
	float: left;
	width: 64px;
	margin-bottom: 10px;
	margin-right: 12px;
	margin-top: 0px;
}

#footer
{
	border-top: 0.7px solid var(--border);
	padding-bottom: 20px;
	font-size: 10px;
	margin-top: 10px;
}

.mini
{
	font-size: 13px;
}

h3
{
	padding: 2px;
	text-align:left; 
}

p
{
	color: #333;
	text-align: left;
	padding: 2px;
}

p.big
{
	font-size: 32px;
}

p.clear
{
	clear: both;
}

.bold
{
	font-weight: bold;
}

a
{
	color: #333;
	padding: 0px;
	background-color: transparent;
}

.red
{
	color: #c00;
}

.right
{
	text-align: right;
}

.left
{
	text-align: left;
}

.center
{
	text-align: center;
}

th
{
	vertical-align: text-top;
/*	border-bottom: 1px solid var(--border);*/
	padding: 3px;
}

td
{
	padding: 3px;
}
tr.hoog
{
	height: 50px;
}

td.up
{
	border-top: 1px solid var(--border);
}

input
{
	-webkit-appearance: none;
	font-size: 16px;
	padding: 5px;
	width: 100%;
	border-radius: 0;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: #eee;
}

input[type=submit]
{
	-webkit-appearance: none;
        border-radius: 0;
        border: 0;
        background-color: var(--accent);//#008FD5;
	color: white;
}

.aanmelden
{
	width: 100%;
}

.w20
{
	min-width: 40px;
	max-width: 60px;
	text-align: right;
}

.w40
{
	width: 30%;
	text-align: right;
}

.w60
{
	width: 70%;
}

h2
{
	color: red;
	text-align: center;
}

.logo
{
	float: right;
}

/* tooltips */

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px solid #ccc; /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext {
	visibility: hidden;
	min-width: 190px;
	text-align: left;
	padding: 5px ;
	border-radius: 6px;
	opacity: 0.95;
	margin-left: 10px;
	margin-top: -5px;
	position: absolute;
	z-index: 1;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

.tooltipaccent
{
	background-color: var(--accent);
	color: #fff;
}

/* chart.js */

#chart
{
	overflow: scroll;
}

canvas#voortgang
{
	//display: none;
	width: 100%;
	border: 1px solid #888;
	image-rendering: pixelated;
}