/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

/* General styles */

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.hidden {
	display: none;
}


body {
    font-size: 16px;
    margin: 0px;
  	color: #333;
	background-color: rgb(236, 250, 255);	
}

h1,h2,h3 {
    font-family: 'Verdana', sans-serif;
    font-weight: 400;
}

h1 {
	
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1.7rem;
	color: #4c4c4c;
	text-transform: uppercase;
}

.error {
	color: red;
}

.screen-container h1 {
    font-size: 1.4rem;
    text-align: center;
}

h2            {font-size: 1rem;}
h3            {font-size: 0.8rem;}
p,label,td    {font-size: 0.73rem; line-height: 1.2rem;}

header {
	width: 100%;
    height: 130px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center 20px;
    background-size: auto 53px;
}

header h1 {
    text-align: center;
    position: absolute;
    bottom: 0px;
    width: 100%;
    margin: 1.3rem 0rem;
}

#container {
	
}
/*
#language-nav {
	width: 30px;
    padding-top: 2px;
    display: block;
    position: absolute;
    top: 0px;
    right: 20px;
    background-color: #f2f2f2;
    padding-bottom: 4px;
    border-radius: 0px 0px 5px 5px;
}

#languages {
	margin:0px;
    padding: 0px;
    height: 23px;
    overflow: hidden; 
}
	
#languages.open {
   overflow: none;
   height: auto;
}

.language {
	width: 22px;
    height: 16px;    
    display: block;
    margin: 0px 3px 6px 3px;
}

.language img {
    position: relative;
}
*/
#language-nav {
	/*! width: 30px; */
    width: auto;
    padding-top: 2px;
    display: block;
    position: absolute;
    top: 0px;
    right: 20px;
    background-color: #f2f2f2;
    padding-bottom: 4px;
    border-radius: 0px 0px 5px 5px;
}

#languages {
	margin:0px;
    padding: 0px;
    height: 23px;
/*     overflow: hidden;  */
}
	
/* #languages.open {
   overflow: none;
   height: auto;
} */

.language {
	width: 22px;
    height: 16px;    
    float:left;
    margin: 0px 3px 6px 3px;
}

.language img {
    position: relative;
}

/*correction for bigger flags*/
#language-nav {
	width: 80px;
    background-color: transparent;
}	

#languages {
    height: 46px;
}

.language {
	width: 44px;
    height: 44px;
}
.language img {
	width:60px;
	height: 40px;
	object-fit: cover;
	border: 1px solid black;	
}    
/*end correction*/

.screen {
	background-color: #ffffff;
    border-top: 1px solid #bcdee7;
    border-bottom: 1px solid #bcdee7;
    margin-bottom: 40px;
}

.screen.clean {
    border: none;
}

.screen h2 {
    margin-top: 0.625em;
}

.screen-container {
    padding: 30px;
    position: relative;
    width: 260px;
    margin: 0px auto;
}

.close-button,
.help-icon {
	background-color: #169040;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    border-radius: 0.53rem;
    display: block;
    position: absolute;
    top: 20px;
    top: 5px;
    right: 20px;
    line-height: 1.14rem;
    width: 1.06rem;
    height: 1.06rem;
    cursor: pointer;
}

.close-button {
    background-color: #b7c2c5;
    top: 10px;
    line-height: 1rem;
    display: none;    
}

.help-close {
	font-size: 0.75rem;
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    padding-right: 25px;
    background-image: url('/css/img/icons/navigation/arrow-up.png');
    background: none,
            url('/css/img/icons/navigation/arrow-up.svg') no-repeat;
    background-repeat: no-repeat;
    background-position: right center;
    line-height: 19px;
    cursor: pointer;
    color: #333;
}

.help-content {
    display: none;
    position: absolute;
    position: fixed;
	top: 0px;
    left:0px;
    background-color:#d4eaf0;
    width: 100%;
    height: 100%;
}

.help-content .message {
	border: 1px solid #BCDEE7;
    background-color: #ffffff;    
    position: relative;
    padding: 0px 30px;
}

label {
     line-height: 1.5rem;
}

input {
    border: 1px solid #888888;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.8rem;
    padding-left: 7px;
    padding-left: 15px;
    padding-right: 15px;    
    border-radius: 10px;
}
input.openquestion {
	width:385px;
}

.horizontal label {
	float:left;
    width: 35%;
    width: 43%;    
    margin-right: 5%;    
    overflow:hidden;
    height: 26px;   
}

.horizontal .check-holder,
.horizontal input {
	float:left;
    width: 55%;
    width: 45%;    
}

.horizontal input.zip_nr,
.horizontal input.zip_text,
.horizontal input.dob_day,
.horizontal input.dob_month,
.horizontal input.dob_year {
	width: 4%;
	min-width: 25px;
	margin-right: 2%;
}

.horizontal input.dob_year {
	min-width: 35px;
	width: 5%;	
	margin-right: 0%;
}

.horizontal input.zip_nr {
	min-width: 35px;
	width: 5%;	
}


.horizontal .check-holder input + label {
	width: auto;
}


/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  padding-left: 34px;  
  line-height: 31px;
  
}

[type="checkbox"]:not(:checked) + label {
    background: url('/css/img/icons/form-elements/default-unchecked.png') no-repeat;
    background: none,
            url('/css/img/icons/form-elements/default-unchecked.svg') no-repeat;
    
}

[type="checkbox"]:checked + label {
    background: url('/css/img/icons/form-elements/default-checked.png') no-repeat;
    background: none,
            url('/css/img/icons/form-elements/default-checked.svg') no-repeat;
    
}

/* Base for label styling */
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
        t/op: -9999px;
        l/eft: -9999px;
        visibility: hidden;  
}
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  padding-left: 34px;  
  line-height: 31px;
  
}

[type="radio"]:not(:checked) + label {
     background: url('/css/img/icons/form-elements/radio-unchecked.png') no-repeat;
    background: none,
            url('/css/img/icons/form-elements/radio-unchecked.svg') no-repeat;
    
}

[type="radio"]:checked + label {
    background: url('/css/img/icons/form-elements/radio-checked.png') no-repeat;
    background: none,
            url('/css/img/icons/form-elements/radio-checked.svg') no-repeat;

    
}


/* Andere opties

classic-checked.png
classic-checked.svg
classic-small-bw-checked.png
classic-small-bw-checked.svg
classic-small-bw-unchecked.png
classic-small-bw-unchecked.svg
classic-small-checked.png
classic-small-checked.svg
classic-small-unchecked.png
classic-small-unchecked.svg
classic-unchecked.png
classic-unchecked.svg
rond-simpel-checked.png
rond-simpel-checked.svg
rond-simpel-unchecked.png
rond-simpel-unchecked.svg
rounded-corner-checked.png
rounded-corner-checked.svg
rounded-corner-unchecked.png
rounded-corner-unchecked.svg

*/

/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1.5);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}

a {
	color:#5396A8;
}

.horizontal p {
	width: 100%;
	float:left;
}

input.clearme {
	color: #cccccc;
}

input.cleared {
	color: #000000;
}

.horizontal label,
.horizontal input {
    margin-bottom: 1rem;
}

.horizontal input[type="submit"] {
    position: absolute;
    bottom: -36px;
    right: 30px;
}

.options-bottom a,
input[type="submit"] {
	
/*  background-color: #cce6ed; */
    border: 0px;
    border-radius: 20px;
    width: auto;
/*     min-width: 110px; */
    height: 40px;
    font-size: 1rem;
    background-color:#3aab47;
    background-color:#297432;
	color: #fff;
}

.options-bottom a {
	line-height: 2.6rem;
	text-decoration: none;
	padding: 0px 24px;
	color: #333;
}

.start,
.cancel {
	position: absolute;
    bottom: -36px;   
    margin-bottom: 1rem;
    background-color: #D5E6DE;
	padding-left: 1rem;
	padding-right: 1rem;
/* 	border-radius: 0.75rem; */
	border-radius: 22px;
	color: #40A061;
	text-decoration: none;
/* 	font-size: 0.81rem; */
	height: 40px;
	font-size: 1rem;
 	line-height: 2.5rem;
}

.cancel {
	background-color: #e5e5e5; 
	color: #a4a4a4;   
	left: 30px;
}

.start {
	right: 30px;
}


.horizontal .alternative {
    display: block;
    margin: 20px auto 40px auto;
    width: 90px;
    padding: 0px 5px;
    background-color: #ffffff;
    border: 1px solid #bcdee7;
    font-size: 0.8125rem;
    border-radius: 20px;
    color: #aaaaaa;
    height: 25px;
    line-height: 25px;
    text-align: center;
    text-decoration: none;   
}

table {
    width: 100%;
}

footer {
	width: 320px;
    margin: 0px auto 0px auto;
    padding-bottom: 40px;
}

#logo-mcafee {
    padding-left: 100px;   
    background: url('/css/img/logos/mcafee-secure.png') no-repeat;
    background: none,
            url('/css/img/logos/mcafee-secure.svg') no-repeat;
    width: 95px;
    height: 2rem;
    background-repeat: no-repeat;
    margin: 0px auto;
    margin-bottom: 20px;
}

#logo-mcafee a {
	text-decoration: none;
}

#logo-mcafee span {
    display: block;
    padding-left: 15px;
    font-size: 0.49rem;
    line-height: 0.9rem;
    text-transform: uppercase;
    color: #888888;
    background: url('/css/img/logos/checkmark.png') no-repeat;
    background: none,
            url('/css/img/logos/checkmark.svg') no-repeat;
    background-position: left;
}

#link-privacy {    
    height: 1.625rem;
    border-right: 1px solid #b2b2b2;
    width: 139px;
    text-align: right;    
    padding-right: 20px;
    float:left;
}

#link-privacy a {
	color: #bbbbbb;
    font-size: 0.56rem;
    line-height: 1.625rem;
    text-transform: uppercase;
}

#logo-digital-elections {
    width: 136px;
    text-align: right;
    margin-left: 20px;
    float: left;
    height: 1.525rem;
    background-position: left;
    background-repeat:no-repeat;

/* 2 column version */
	/*
	background: url('/css/img/logos/digitalelections.png') no-repeat;
    background: none,
            url('/css/img/logos/digitalelections.svg') no-repeat;
*/

	display: none;		
   
}



.template-stembiljet .screen-container {
    padding: 0px;
    width: 100%;
    padding-bottom: 30px;
}

.template-stembiljet .screen-container > * {
    margin-left: 30px;
    margin-right: 30px;    
}

.template-stembiljet .screen-container .help-icon {
	margin-right: 0px;
}

.template-stembiljet .screen-container form  {
    margin:0px;    
    padding-bottom: 30px;
}

#candidates label {
	width: auto;
}

.candidatelist a {
	outline: none;
}

.candidatelist h3 {	
    padding: 5px 30px;
    float: left;
	width: 100%;
	box-sizing: padding-box;
	 box-sizing: border-box;
}

.candidatelist h3 a {
    width: 100%;
    display: block;
    color: #333;
    font-weight: 100;
}

.candidatelist h3 span {
    display: none;
    font-size: 0.73rem;
    line-height: 1.2rem;
}

.candidatelist h3.open {
    background-color:#e5f2f6;    
}

.candidatelist ul {
    padding: 0px;
    list-style-type: none;
    margin-bottom: 10px;
    clear:both;
}

.candidatelist ul li {
    padding: 5px 30px 0px 30px;
    width: 100%;
    box-sizing: padding-box;
    box-sizing: border-box;
    float: left;
    font-size: 0.7875rem;    
    position: relative;
}

.candidatelist ul li a {
    color: #333;
    line-height: 1.5rem;
}

.candidatelist ul li.open {
    padding-bottom: 5px;
    background-color:#e5f2f6;    

}

.candidatelist ul li.open .close-button {
    display: block;    
}

.candidatelist ul label {
    margin-right: 5px;
}

.candidate-pamflet {
    padding-left: 30px;
    padding-top: 20px;
    display: none;
}

#candidate-slider .candidate-pamflet,
.candidatelist ul li.open .candidate-pamflet {
    display: block;   
}

.candidatelist ul li.open .candidate-pamflet .name {
	display: none;	
}

.candidate-pamflet figure  {
    width: 60px;
    height: 60px;
    overflow: hidden;
    display: block;
    position: relative;
    border-radius: 5px;
}

.candidate-pamflet figure .img-container {
    width: 100px;
    height: 60px;
    position: absolute;
    left: -20px;   
    text-align: center;
}

.candidate-pamflet figure img {
    display: inline-block; 
    vertical-align: middle;
    min-width: 80px;  
    max-width: 100px;
}

.candidate-pamflet table {
    margin-top:10px;    
}

.candidate-pamflet table td,
.candidate-pamflet table th {
    font-weight: 100;
    line-height: 1rem;
    font-style: italic;
}

.candidate-pamflet .description {
    font-family: 'Verdana';    
}

.candidate-pamflet .description p {
    line-height: 1rem;
}

.template-stembiljet input[type="submit"] {	
	background-color: #169040;
	width: 100px;
    color: #fff;
    float:none;
    position: absolute;
    right: 30px;
    bottom: -38px;   
}

.template-stembiljet input[type="submit"]:disabled {
    background-color: #555555;
    color: #aaaaaa;
    opacity: 1;

}

.template-stembiljet .button-watch-next,
.template-stembiljet .button-watch-previous,
.template-stembiljet .button-cancel {
    background-color: #cccccc;
	width: 100px;
    color: #fff;
    position: absolute;
    left: 30px;
    bottom: -38px;
    border: 0px none;
    border-radius: 20px;
    text-align: center;
    text-decoration: none;
    min-width: 110px;
    height: 40px;
    font-size: 1rem;
    line-height: 2.4rem;
    margin-bottom: 16px
}

.template-stembiljet .button-watch-previous,
.template-stembiljet .button-watch-next {
	background-color: #333;
	left: 10px;	
}

.template-stembiljet .button-watch-next {
	left: auto;
	right: 10px;
}

#candidate-slider .message .candidate-pamflet {
    height: 340px;
}

#candidate-slider .message figure {
    float:left;
    width: 20%;
}

#candidate-slider .message .info {
    float:left;
    width: 80%;
}

#candidate-slider .message th {
	text-align: left;
}

#candidate-slider nav {
    width: 200px;
    margin: 60px auto 0px auto;
    padding-bottom: 10px;
}

#candidate-slider nav span{
    display: block;
    width: 65px;
    height: 21px;
    line-height: 24px;
    background-repeat: no-repeat; 
    cursor: pointer;
}

#candidate-slider nav span.previous {
    text-align: right;
    padding-right: 30px;
    background-image: none, url("/css/img/icons/navigation/arrow-left.svg");
    background-position: right;
    float:left;
}

#candidate-slider nav span.next {
    text-align: left;
    padding-left: 30px;
    background-image: none, url("/css/img/icons/navigation/arrow-right.svg");
    background-position: left;
    float:right;
}

textarea {
	width: 400px;
	height: 150px;
	margin-bottom: 40px;
	padding: 9px;
	font-size: 0.9rem;
	border-radius:10px;
    border: 1px solid #888888;
}	

.survey-question {
    margin-top: 50px;
}

.likert-question,
.mc-question {
    list-style-type: none;
    padding: 0px;
    line-height: 2rem;
}

.likert-question li {
    float:left;
    width: 100%;
}


.likert-question li [type="radio"]:not(:checked) + label, 
.likert-question li [type="radio"]:checked + label {
    width: 100%;
    float:left;
    padding-bottom: 34px;
    padding-left: 0px;
    padding-right: 0px;
    background-position: bottom center;
    text-align: center;
    margin-bottom: 1rem;    
}

table.legend td {
    border: 1px solid #ccc;
    padding: 5px 8px;
    line-height: 25px;
}


.because-question {
    width: 30%;
    float:left;    
}

.reasoning {
    width: 70%;
    float:left;  
}

.reasoning label {
    width: 100%;
    display: block;
}

.reasoning textarea {
    padding: 8px;
    font-size: 14px;
}

.mc-question label, .mc-question input {
    margin-bottom: 1rem;
}

.mc-question label {
    float: left;
    width: 100%;
}

.options-bottom a,
.options-bottom input[type="submit"],
.options-top input[type="submit"],
.options-top .pager {
     position: absolute;
}

.options-top .pager {
	border-radius: 22px;
	width: 40px;
	height: 40px;
	font-size: 1rem;
	background-color: #e9510e;
	color: #fbfbfb;
	text-align: center;
	line-height: 2.5rem;    
}


.options-top .previous,
.options-top .pager {
    top: -19px;    
}

.options-bottom .save-answers,
.options-bottom .save,
.options-bottom .previous,
.options-bottom .next {
    bottom: -19px;    
}

.options-bottom .save {
    right: 240px;  
    background-color: #133e6d;
    color: #fff;
    
}
.options-top .pager,
.options-bottom .next {
    right: 30px;    
}

.start,
.options-bottom .next {
   background-color:#3aab47;
   background-color:#297432;
   color: #fff;
}

.options-top .previous,
.options-bottom .previous {
    left: 30px;
}


.options .previous {
    background-color: #e6eff2;
    color: #a4a4a4; 
}

.options-bottom .save-answers {
/* 	background-color: #b5b5b5; */
	color: #fff; 
}

.options input[type="submit"]:disabled {
    background-color: #555555;
    color: #aaaaaa;
    opacity: 1;

}

ul.sortable span.drag-drop {
	padding-left: 25px;
	background-image: url('/css/img/icon-drag-drop.png');
	background-repeat: no-repeat;
	background-position: 7px center;
}

ul.sortable li {
	cursor:move; 
	border:1px dashed;
	padding-top:10px;
}
ul.sortable input.sortable-sequence {  
	border: none; 
	width: 10px;
	font-weight: 400;
	font-size: 16px;
	cursor:move;
	padding-right: 0px;
}
.sortable-background {
	background-color: rgb(236, 250, 255);
}

/* Too large for mobile */
/* styles only applicable from 590px = 36.875em @16px base font-size */
@media all and (min-width: 36.875em) {

    h1            {/*! font-size: 1.375rem; */}
    h2            {font-size: 1.125rem;}
    h3            {font-size: 1rem;}
    p,label,td    {font-size: 0.75rem; line-height: 1.2rem;}
    
	header {
	    height: 160px;
	    background-size: auto 70px;
	}

    header h1 {   
       margin: 1.25rem 0rem;
    }

    .screen {
        border: 1px solid #bcdee7;
        width: 550px;
        margin: 0px auto 40px auto;
        border-radius: 20px;
    }
    
    .screen-container {
        width: 490px;
    }
    
    .horizontal .alternative {
    	left: 41%;  
        position: absolute;       
        bottom: -55px;
	}
    
    footer{
        padding-top:40px;
        height: 2rem;
		width: 550px;
	}
    
    .help-content .message {
        width: 490px;
        padding: 30px;
        border-radius: 20px;
        margin: 0px auto;         
    }
    
    #logo-mcafee {
       float:left;
/*        margin: 0px 0px 0px 40px; */
       margin: 0px 0px 0px 108px; /* 2 colum version */
       
       border-right: 1px solid #b2b2b2;        
       padding-right: 20px;
    }
    
    #link-privacy {
        float:left;
        text-align: left;
        padding-left: 20px;
        width: auto;
/*         width: 97px;  */

/* 2 colum version */       
        width: 120px;   
        border: none;
    } 
    
    .candidatelist {
		float: left;
	}
	
	.candidatelist.cols-2 {
		width: 50%;	
	}
    
    .likert-question li {
        float:left;
        width: 20%;
    }
    
    .likert-question.col3 li { width: 33.33%;}
    .likert-question.col4 li { width: 25%;}        
    .likert-question.col5 li { width: 20%;}
    .likert-question.col6 li { width: 16.66%;}
    .likert-question.col7 li { width: 14.28%;}    
	
}

/* General size */
/* styles only applicable from 870px = 54.375em @16px base font-size */
@media all and (min-width: 54.375em) {

    h2 {font-size: 1.345rem;}
	p,label,td    {font-size: 0.89rem; line-height: 1.2rem;}

	.screen {
        width: 830px;
    }

	.screen-container {
        width: 664px;
        padding-left: 83px;
        padding-right: 83px;
    }
	
	footer{
        padding-top:140px;
	}
    
    .help-content .message {
        margin: 0px auto;         
        width: 664px;
		padding-left: 83px;
		padding-right: 83px;
    }
    
    .candidatelist.cols-3 {
		width: 33.33%;	
	}
	
	.candidatelist.cols-4 {
		width: 25%;	
	}  
    
}








/* Old styles */


@media all and (min-width: 740px) {

    .frontpage #logo,
    .stembiljet #logo {
    	background-size: 100px;
    	display: block;
    }

	#customer {
		background-size: 120px;
    	display: block;		
	}
}




@media all and (min-width: 980px) {

     #customer,
    .frontpage #logo,
    .stembiljet #logo {
    	background-size: auto;	
    }
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
.captcha{
	
	width: 300px;
	margin: auto;
}

@media screen and (max-width: 870px){
	horizontal div.captcha{width: 234px; float: left;} #rc-imageselect, .g-recaptcha {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;} 
	
		.options.options-bottom{
			display:flex;
			flex-direction: column;		
		}
		.options.options-bottom input{
			position: relative!important;
			left:0px;
			right:0px;
			margin-bottom: 4px;
			width: 250px;
			margin:4px auto;
		}
	}