/**
paars #5420ad
licht-paars #ddddFF

oranje #ffa300
licht-oranje #ffe0a9

groen #0de876
licht-groen #a4face

blauw #00b7ff
licht-blauw #9fe4ff

rood #ff272c
licht rood #ffadaf

*/


html {
	width: 100%; 
	height: 100%;
	color: #5420ad;
	background: #FFFFFF;
	font-family: 'Sansita', sans-serif ,font-weight:400; 
	font-style:italic;
	font-size: 18px;
}


.center300 {
    margin: auto;
    width: 300px;
}

.center970 {
    margin: auto;
    width: 970px;
}
.center900 {
    margin: auto;
    width: 900px;
}

.center850 {
    margin: auto;
    width: 850px;
}

.center750 {
    margin: auto;
    width: 750px;
}

.center700 {
    margin: auto;
    width: 700px;
}
.center600 {
    margin: auto;
    width: 600px;
}

.center670 {
    margin: auto;
    width: 670px;
}

.center500 {
    margin: auto;
    width: 500px;
}

.center400 {
    margin: auto;
    width: 400px;
}

.width970 {
	   width: 970px;
}

.width850 {
	   width: 850px;
}

.width700 {
	   width: 700px;
}

.width750 {
	   width: 750px;
}
.width730 {
	   width: 730px;
}
.width650 {
	   width: 650px;
}

.width600 {
	   width: 600px;
}

.width500 {
	   width: 500px;
}

.width200 {
	   width: 200px;
}

.width150 {
	   width: 150px;
}


/* Button in het midden, geen animatie */
.buttoncenter {
	width:100%;
}
.buttoncenter img {
	display: block;
    margin: auto;	
}

/* Button in het midden, WEL animatie */
.buttonanimate {
	width:100%;
}

.buttonanimate img {
    -ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Safari */
    transform: scale(1, 1);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
	display: block;
    margin: auto;	
}
.buttonanimate img:hover {
    -ms-transform: scale(1.5, 1.5); /* IE 9 */
    -webkit-transform: scale(1.5, 1.5); /* Safari */
    transform: scale(1.5, 1.5);
}

/* Button Links, WEL animatie */
.buttonanimateleft img {
    -ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Safari */
    transform: scale(1, 1);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.buttonanimateleft img:hover {
    -ms-transform: scale(1.5, 1.5); /* IE 9 */
    -webkit-transform: scale(1.5, 1.5); /* Safari */
    transform: scale(1.5, 1.5);
}

.cursorpointer {	
    cursor:pointer;
}

/*************************/
/* Headers               */
/*************************/
H1 {
	font-size: 48px;
}

H2 {
	font-size: 28px;
}

H3 {
	font-size: 18px;
}

H4 {
	font-size: 14px;
}

H5 {
	font-size: 10px;
}


/*************************/
/* Default Tables        */
/*************************/
table {
	border-collapse: collapse;
	border-style: none;
}
th {
	text-align: left;
}
td {
	border-collapse: collapse;
	border-style: none;
}
table.textleft td {
	text-align: left;
}

td.textright  {
	text-align: right;
}

td.aligntop {
	vertical-align: top;	
}

table.linebreak td { 
	word-wrap: break-word;
    word-break: break-all;
    white-space: normal;	    
    overflow-wrap: break-word;
    table-layout: fixed;
}

table.border td{
	border: 1px solid black;
}

/*************************/
/* Links                 */
/*************************/
A {
	text-decoration: none; /* Niet onderstrepen              */
}

A:link {
	color: #00b7ff;
}

A:visited {
	color: #00b7ff;
}

A:hover {
	color: #ffa300;
}

A:active {
	color: #00b7ff;
}

A.no-ancher {
	text-decoration: none; /* Niet onderstrepen              */
}


/*************************/
/* contextmenu      */
/*************************/
A.movevraag:link {
	color: #00b7ff;
}

A.movevraag:visited {
	color: #00b7ff;
}

A.movevraag:hover {
	color: #ffa300;
}

A.movevraag:active {
	color: #00b7ff;
}

/*************************/
/* inlog hoofdpagina      */
/*************************/

div.rounded {
    border-radius: 25px;
	-webkit-border-radius: 25px;
    padding : 5px;
}

div.kwizbeheer {
	width: 290px;
	background-color: #ffffff;
	border: 2px solid #ffa300;
}
div.voorwaarden {
	background-color: #ffffff;
	border: 2px solid #ffa300;
	text-align: center;
}

div.kwizclient {
	width: 290px;
	background-color: #ffffff;
	border: 2px solid #0de876;
}

div.kwizmelding {
	border: 2px solid #ff272c;
}


div.kwizformulier {
	background-color: #ffe0a9;
	border: 2px solid #ffa300;
}

div.smalpaars {
	border: 2px solid #5420ad;
	text-align: center;
}

h2.centertext {
  text-align: center;
}
h1.centertext {
  text-align: center;
}
/*************************/
/* Table topmenu beheer  */
/*************************/

table.topmenu td {
    border-left: 2px solid #5420ad;
    border-right: 2px solid #5420ad;
    text-align: center;
}


/*************************/
/* 5 star rating         */
/*************************/


.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}


/*************************/
/* Lijst kwizzen         */
/*************************/
table.lijst tr:nth-child(even){
	background: #ffffff;
}
table.lijst tr:nth-child(odd){
	background: #eeeeee;
}

table.lijst th {
	background: #ffe0a9;
	text-align: left;
	font-weight: bold;
}

/*************************/
/* Div deelnemers        */
/*************************/
#ingelogdedeelnemers {
	min-height: 100px;
	font-weight: bold;
	font-size: 22px;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
  display: inline-block;
  margin: 25px;    	
}

/*************************/
/* Lijsten               */
/*************************/
div.lijst:nth-of-type(even){
	background: #ffffff;
}
div.lijst:nth-of-type(odd){
	background: #eeeeee;
}
div.lijstheader {
	background: #ffe0a9;
	text-align: left;
	font-weight: bold;
}
div.lijstfooter {
	background: #ffe0a9;
	text-align: left;
}


/*************************/
/* Progressbar           */
/*************************/

#progressBar {
  width: 90%;
  max-width:700px;  
  margin: 10px auto;
  height: 22px;
  background-color: #a4face;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#slider {
  position: absolute;	
  height: 22px;
  background-color: #0de876;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#placeholder{
  position: absolute;	
  height: 22px;
  background-color: #dddddd;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#counter{
  position: relative;	
  text-align: center;  
  height: 22px;
  margin: auto;
  width: 200px;
  font-weight: bold;
  font-size: 22px;
  
}

/*************************/
/* Rondes                */
/*************************/
.divronde {
	border: 1px solid #5420ad;
  -webkit-border-radius: 5px;
  border-radius: 5px;
    padding : 1px;
}

div.rondenaam {
	background: #ffe0a9;
	text-align: left;
 -webkit-border-radius: 5px;
  border-radius: 5px;
    padding : 1px;
}


/*************************/
/* Vraagedit             */
/*************************/
table.showvraag td {
  vertical-align: top;
  text-align: left;
}

#divformedit {
  border: 1px solid #5420ad;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}



/*************************/
/* Antwoorden            */
/*************************/
div.antwoord {
	text-align: center;
	font-size: 200%;
  	width: 300px;
  	margin: 10px auto;
 -webkit-border-radius: 10px;
  border-radius: 10px;
}
div.antwoordklein {
	-webkit-border-radius: 10px;
  	border-radius: 10px;
	float: left;
	margin: 5px;
	padding-right : 5px;
	padding-left : 5px;
}
div.antwoord1 {
	background: #ffffff;
	border: 2px solid #5420ad;
}
div.antwoord2 {
	background: #ffffff;
	border: 2px solid #ffa300;
}
div.antwoord3 {
	background: #ffffff;
	border: 2px solid #0de876;
}
div.antwoord4 {
	background: #ffffff;
	border: 2px solid #00b7ff;
}

div.antwoordklik {
	cursor:pointer;
}
	
div.antwoordverstuur {
	text-align: center;
	font-size: 100%;
  	width: 300px;
  	margin: 10px auto;
 -webkit-border-radius: 10px;
  border-radius: 10px;
	
	background: #ffffff;
	border: 2px solid #0de876;
	cursor:pointer;
}

img.showvraag {
	max-width:200px;
	max-height:100px;
	height: auto;
	width:auto;
	display: block;
    margin: auto;		
}


/*************************/
/* Radio buttons         */
/*************************/

input[type="radio"] {
	display:none;
}
input[type="radio"] + label {
	text-align: center;
	display:inline-block;
     vertical-align:top;
    cursor:pointer;
    background-repeat: no-repeat;
}

input[type="radio"].soortvraag + label {
    background-image: url(../images/radiobuttonuit.png);
    width:20px;
    height:20px;
    background-size: 20px 20px;
    margin:-1px 4px 0px 0px;
}

input[type="radio"].soortvraag:checked + label {
     background-image: url(../images/radiobuttonaan.png);
}


input[type="radio"].speloptie + label {
    background-image: url(../images/radiobuttonuit.png);
    width:20px;
    height:20px;
    background-size: 20px 20px;
    margin:-1px 4px 0px 0px;
}

input[type="radio"].speloptie:checked + label {
     background-image: url(../images/radiobuttonaan.png);
}


/*************************/
/* checkbox              */
/*************************/

input[type=checkbox] {
	display:none;
}

input[type=checkbox].hidden + label {
	display:none;
}

input[type="checkbox"].antwoord + label {
    background-image: url(../images/onwaar.png);
    width:25px;
    height:25px;
    background-size: 25px 25px;
    margin:-1px 4px 0px 5px;
}

input[type="checkbox"].antwoord:checked + label {
     background-image: url(../images/waar.png);
}
 
input[type=checkbox] + label {
	text-align: center;
	display:inline-block;
    width:20px;
    height:20px;
    margin:-1px 4px 0px 0px;
    vertical-align:top;
    cursor:pointer;
    background-image: url(../images/checkboxuit.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

input[type=checkbox]:checked + label {
     background-image: url(../images/checkboxaan.png);
}

/*************************/
/* resultaat Client     */
/*************************/
div.event {
	text-align: center;
  	width: 300px;
  	margin: 10px auto;
 -webkit-border-radius: 10px;
  border-radius: 10px;
}
div.goed {
	font-size: 150%;
	background: #ffffff;
	border: 2px solid #0de876;
}
div.fout {
	font-size: 150%;
	background: #ffffff;
	border: 2px solid #ff272c;
}
div.melding {
	background: #ffffff;
	border: 2px solid #ffa300;
}
div.klaar {
	background: #ffffff;
	border: 2px solid #ffa300;
}

/*************************/
/* popup window          */
/*************************/
 .showcss{ display:block;}
 .hidecss{ display:none;}


.ui-dialog > .ui-widget-header {
	background: #ffe0a9;
}

.ui-dialog > .ui-widget-content {
	font-family: 'Sansita', sans-serif ,font-weight:900; font-style:italic;
	font-size: 16px;	
	color: #5420ad;
	outline: none;	
	font-weight: bold;	
}

.ui-button,  .ui-button-text .ui-button {  
	font-size: 16px !important; 
	font-family: 'Sansita', sans-serif ,font-weight:900; font-style:italic !important;
	color: #5420ad !important;
}

/*************************/
/* Losse elementen       */
/*************************/
.fontbold {
	font-weight: bold;
}

.center {
	text-align: center;
}

.noborder {
	border: none;
}

p.error {
	color: #FF0000;
}

input {
	font-family: 'Sansita', sans-serif ,font-weight:900; font-style:italic;
	font-size: 16px;	
	color: #5420ad;
	outline: none;	
	font-weight: bold;	
}


input[type=text] {
	padding:5px; 
	border:2px solid #ddddFF; 
	-webkit-border-radius: 10px;
    border-radius: 10px;
}

input[type=text]:focus {
	border-color:#5420ad; 
}

input[type=password] {
	padding:5px; 
	border:2px solid #ddddFF; 
	-webkit-border-radius: 10px;
    border-radius: 10px;
}


input[type=password]:focus {
	border-color:#5420ad; 
}

select {
	padding:5px 15px; 
	background-color: Transparent;
	border:2px solid #5420ad; 
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
	font-family: 'Sansita', sans-serif ,font-weight:900; font-style:italic;
}
	

/*************************/
/* audio upload          */
/*************************/
	
.progress 
{
  display:none; 
  position:relative; 
  width:720px; 
  border: 3px solid #0de876; 
  padding: 1px; 
  border-radius: 3px; 
}
.bar 
{ 
  background-color: #a4face; 
  width:0%; 
  height:20px; 
  border-radius: 3px; 
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}