@font-face{ font-family:vacatures;    src:url( "../fonts/vacatures-9.eot"  ); } 
@font-face{ font-family:vacatures;    src:url( "../fonts/vacatures-9.woff"  ); } 
@font-face{ font-family:vacatures;    src:url( "../fonts/vacatures-9.ttf"  ); } 

body,html { margin: 0; padding: 0;font-size: 16px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }

.rounded{border-radius: 2px;}

div#header{
  background-color: #fff;
  height: 67px;
  position: sticky;
  z-index: 500;
  top: 0;
  width: 100%; 
  overflow: hidden;
}
#head-shadow{
  width: 100%;
  height: 20px;
  background-image: linear-gradient(lightgray, white);
}
button{cursor: pointer;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.annuleren{height: 30px;background-color:#F98787;}
.grayed{background-color:#A2A0A0!important;}
.smaller{height: 30px;}
.hasborder{border: 1px solid lightgray !important;}

#header .head{padding:10px;padding-top: 20px;color: gray;font-size: 18px;}
#header .left{float: left;}
#header .right{float: right;}
#head-vac{height: 40px;background-color: #fff;font-weight: 500;font-size: 14px;color: gray;border: 1px solid lightgray;}
#head-inl, #head-uitl{height: 40px;background-color: #fff;font-weight: 500;font-size: 14px;color: gray;border: none;}
#head-ins{height: 40px;background-color: #4386F4;font-weight: 500;font-size: 14px;color: white;border: none;}

a.none:link{text-decoration: none;color: gray;}
a.none:visited{text-decoration: none;color: gray;}
a.none:hover{text-decoration: none;color: gray;}
a.none:active{text-decoration: none;color: gray;}

a.blue:link{text-decoration: none;color: #4386F4;}
a.blue:visited{text-decoration: none;color: #4386F4;}
a.blue:hover{text-decoration: none;color: #455AB5;}
a.blue:active{text-decoration: none;color: #4386F4;}

a.white:link{text-decoration: none;color: #fff;}
a.white:visited{text-decoration: none;color: #fff;}
a.white:hover{text-decoration: none;color: #fff;}
a.white:active{text-decoration: none;color: #fff;}

#mid{min-height: auto;margin-bottom:200px;width:100%;}
#mid-head{font-size: min(max(18px, 3vw), 48px);color: white;text-align: center;padding: 10vw 10px 50px 10px;text-shadow: 0 1px 7px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.22);}
#mid-zoek{margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: center;width:754px;border: 1px solid #4386F4;border-radius: 3px;background-color: #fff;}
#zoek{height: 50px;margin-top: 3px;width:114px;background-color: #4386F4;font-size: 16px;color: white;border: none;}
#cv-up{height: 36px;width:120px;height:40px;background-color: #FFBF00;;font-size: 16px;color: black;border: none;margin-top:30px;}

.hero-image {
  background-image: url("../img/cover-2000x790.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 100%;
}
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
#mvt{width: 100%;}
#mvt td{margin: 2px;background-color: #EEEEEE;padding: 2px;}
td.nowrap{white-space: nowrap;}

.activecolor{
  background-color: green!important;
}
  
.input-pre{width:45px;display: inline-block;}
div#content{
  display: flex;
  top:0px;
  min-height: 500px;
  position: relative;
  width: 100%;
  bottom: 0;
}
div.recent-div{margin-left: 10px;}
span.rz-list{color: #4386F4;font-size: 12px;}

div#left{
	width: 10%;
}
div#mid{
}	
div#right{
	width: 10%;
}
div#left-overzicht{
	margin-left:10px;width: 20%;
}
div#mid-overzicht{
  width: 60%;
}	
div#right-overzicht{
	width: 20%;
  margin-left: 10px;
}
#mid-zoek-wat{background-color: white;width: 305px;padding-left: 10px;line-height: 3.5;}
#mid-zoek-waar{background-color: white;width: 315px;border-left: 1px solid lightgray;padding-left: 5px;line-height: 3.5;}
#mid-zoek-button{background-color: white;width: 118px;}
#input-wat{font-size: 1.2em;width: 250px;border: 1px solid lightgray;}
#input-waar{font-size: 1.2em;width: 250px;border: 1px solid lightgray;}
#promo-1{
	width: 340px;
}
#promo-2{
	width: auto;
	height:100px;
}
div.line{height: 15px;margin-bottom:10px;border-bottom: 1px solid #eee;}

.columns{
  display: flex;
}
ul{list-style-type: none;}
li{margin-top: 5px;}
a{white-space: nowrap;}

.uls{
  border: 1px solid gray;width: 210px;padding: 5px;margin-top: 1px;
  display: none;
}
.uls   li{text-wrap: none;}
.uls   li:hover{text-decoration: none;color:#4386F4;cursor: pointer;}
#keywordlist{
  min-width: 320px;
  padding-top: 10px;
}

#vacatures{
	display: flex;
	flex-wrap: wrap;
}

#vacancies-for-you{
  display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
#vac-1{width: 400px;line-height: 3;}
#vac-2{width: 500px;line-height: 3;}

a:link{color: gray;}
a:visited{color: gray;}
a:hover{color: gray;}
a:active{color: gray;}

@media screen and (max-width: 675px) {
#mid-head{color: white;text-align: center;padding: 10vw 10px 50px 10px;}
}
@media screen and (max-width: 775px) {
#mid-zoek{flex-direction:column;width: 80%}
#mid-zoek-wat{width: 95%;padding-left: 6px;}
#mid-zoek-waar{width: 95%;}
#mid-zoek-button{width: 100%;}
#zoek{width: 100%;}
#input-wat{ width: 200px;}
#input-waar{ width: 200px;}
}
@media screen and (max-width: 1200px) {
#mid-head{padding: 10vw 10px 50px 10px;}
}
/* login */
#login-content{
  width: 100%;
  position: absolute;
  top: 20vh;
}
#login{
  width: 350px;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
}
#login-head{
  font-size: 28px;
  margin-bottom: 20px;
}
#login input{
  width: 300px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid gray;
}
.login-row{
  margin-top: 5px;
  margin-bottom: 10px;
}
#login-message{
  margin-bottom: 10px;
  color: #FB4F4F;
}
/* aanmelden */
#aanmeld-content{
  width: 100%;
  display: table;
  position: absolute;
  top: 20vh;
}
#aanmeld-content .blok{
  width: 450px;display: table-cell;vertical-align: top;
  padding: 20px;
}
#aanmeld-head{
  font-size: 24px;
  margin-bottom: 20px;
}
#aanmeld-content input{
  width: 200px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid gray;
}
.default-button{
  height: 40px;background-color: #4386F4;font-weight: 500;
  font-size: 14px;color: white;border: none;margin: 5px;
  width: 130px;
}
#inlog-button{
  height: 30px;
  width: 70px;
  background-color: #4386F4;
  color: white;
  border: none;
}
.aanmeld-button{
  height: 30px;
  width: 100px;
  background-color: #4386F4;
  color: white;
  border: none;
}
.aanmeld-button:disabled, .aanmeld-button[disabled]{
  background-color: lightgray!important;
}
.blue-button{
  height: 30px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #4386F4;
  color: white;
  border: none;
  text-align: center;
  display: inline-block;
  line-height: 1.8;
}
.href-button{
  border: none;
  background-color: transparent;
}
/* inschrijving */
#inschrijven-content{
  width: 100%;
  display: table;
  top: 20vh;
  margin-bottom: 20px;
}
.page{
  width: 800px;
  display: block;
  margin: 0 auto;
  background-color: white;
  padding: 5px;
  -webkit-box-shadow: 10px 10px 66px 0px rgba(161,161,161,1);
-moz-box-shadow: 10px 10px 66px 0px rgba(161,161,161,1);
box-shadow: 10px 10px 66px 0px rgba(161,161,161,1);
}
.box-shadow{
  width: 400px;  -webkit-box-shadow: 10px 10px 66px 0px rgba(161,161,161,1);
-moz-box-shadow: 10px 10px 66px 0px rgba(161,161,161,1);
box-shadow: 10px 10px 66px 0px rgba(161,161,161,1);
}
.dtr{display: table-row;}
.dtd{display: table-cell;}
#vergeten-content{margin-top:200px;width: 400px;margin:0 auto;}
#inschrijven-content .blok{
  width: 360px;display: table-cell;vertical-align: top;
 }
#inschrijven-content .text{
  padding: 10px;
}
#inschrijven-content .img{
  width: 400px;
  display: table-row;
  background-color: white;
}
#inschrijven-head{
  font-size: 28px;
  margin-bottom: 20px;
}
#inschrijven input{
  width: 200px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid gray;
}
.short{
  width: 80px;
}
.inschrijven-button{
  height: 30px;
  width: 70px;
  background-color: #4386F4;
  color: white;
  border: none;
}
.small{
  height: 20px;
  width: 70px;
  background-color: #FD7070;
  color: black;
  margin-right: 30px;
}
.smalltxt{font-size: 12px;}
.inschrijven-row{
  margin-bottom: 10px;
}
#inschrijven-message{
  margin-bottom: 10px;
  color: #FB4F4F;
}
#inschrijven-content input{
  width: 200px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid gray;
}
div#message{
  margin-bottom: 5px;
  color: #B31818;
  font-weight: 600;
}
.taal-inschrijven-tabel{display: block;}
.input-bewijs{width: 40px;}
.taal-inschrijven-tabel select{width: 200px;}
/* Vacatures.php */
#vacature_edit input{
  width: 500px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid gray;
}
.kw{
  width: 180px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid gray;
}
#jdesc{
  border: 1px solid gray;
  margin-top: 5px;
  padding: 5px;
}
/* modal popup */
#gebruiksvoorwaarden{text-decoration: none;border:none;color: dodgerblue;background-color: white;}
#privacy{text-decoration: none;border:none;color: dodgerblue;background-color: white;}
 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
#table-body td{min-width: 30px;}
/*---------------- overzicht ------------------- */
.overzicht-blok{}
.overzicht-counts{color: gray;font-size: 14px;margin-bottom: 5px;margin-top: 5px;}
.overzicht-jobtitle{text-decoration: none;border:none;color: #4386F4;font-size: 18px;background-color: white;}
.overzicht-jobcategory{color: black;font-size: 16px;}
.overzicht-jobdescription{color: gray;font-size: 14px;}
.overzicht-client{color: lightgray;font-size: 14px;}
.overzicht-postdate{color: gray;}
.overzicht-divider{border: 1px solid #EDECEC;}

/*upload-cv-promo */
div#upload-cv-promo{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
    background-color: #FEF3C5;
	justify-content: space-evenly;
}

/* pagination */
.pagination{font-size: 18px;font-weight: 500;margin-bottom: 5px;background-color: #F3F3F3;padding: 3px;} 
.pagination-link{text-decoration: none;border:none;background-color: white;height: 25px;margin-right: 3px;}
.pagination-link:hover{background-color: dodgerblue;color: white;}
.active{border:none;background-color: dodgerblue;color: white;}

/*---------------- eigen gegevens ------------------- */
#mijn-content{
  width: 100%;
  display: block;
  position: absolute;
  top: 20vh;
}
#mijn{
  width: 350px;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
}

#tekst{
  width: 80%;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
}
/*---------------- admin ------------------- */
#resdiv{
  width: 200px;
}
.controls input{
  font-size: 16px;
  border: 1px solid gray;
  width: 200px;
  font-size: 1em;
}
.selectbox{
  padding: 5px;
}
.kopje{font-size: 1.3em;margin-top: 5px;margin-bottom: 5px;width: 180px;display: inline-block;}

/*---------------- select box ------------------- */
.box select {
  background-color: #fff;
  color: gray;
  padding: 2px;
  width: 150px;
  border: 1px solid gray;
  outline: none;
}

.box select option {
  padding: 5px;
}

#menu-left{
  display: flex;
  flex-wrap: wrap;
}
.sel-formulier{
  background-color: lightgray;
  margin-right: 5px;
  border: 1px solid gray;
  width: 200px;
  display: inline;
  padding: 5px;
}
#pauze{
  position: fixed;
  top: 50%;left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.greenborder{
  border: 1px solid green!important;
}
.redborder{
  border: 1px solid red!important;
}
.max_width{width: 70%;height: 60px;}