@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700');

/* Basis steunkleur instellen, layout met borders in plaats van fill, gekopieerd van PIN 10771 */
.button a:hover div.centered * {color: #0abbbd;}
a, .accountmenu a, .history a, button, a.maillink {color: #0abbbd;}
.submitbutton, a.actionlink, input.flatbutton, #fotolink-image, .photocontainer, .flipbase-button {background-color: #0abbbd; border: 1px solid #0abbbd; box-sizing: border-box; transition: all .3s;}

.submitbutton, a.actionlink, input.flatbutton, .flipbase-button {color: #FFFFFF; transition: all .3s;}
.submitbutton, a.actionlink {text-transform: uppercase;}
a:hover, .history a:hover * {color: #343F4B;}
.submitbutton:hover, .button a:hover, a.actionlink:hover, input.flatbutton:hover, .photocontainer:hover, button:hover, button:hover span, .flipbase-button:hover {background-color: #0abbbd; border: 1px solid #0abbbd; box-sizing: border-box;}
button:hover, button:hover span {border: 1px solid #AAA;}
.button a, .button a:hover, div#upload-cv-div {border: none;}
.button, .button a, .button a:hover, a.actionlink:hover, input.flatbutton:hover, button:hover, button:hover span, .flipbase-button:hover {color: #343F4B;}
button, div.centered * {color: #AAA;}
.submitbutton:hover {color: #343F4B;}
.csbs h2, .vdtl h2, .vsbs h2, .covv h2 {border-bottom: 1px solid #EEEEEE;}
div.header {border-bottom: 0px solid #EEEEEE;}
input.text:focus, input[type=text]:focus, input.date:focus, input[type="date"]:focus, select:focus, input.account:focus, textarea:focus {border: 1px solid rgba(52, 63, 75, 1);}
button, .button {border: 1px solid #DADADA;}
button, .button, .button a, div#upload-cv-div {background-color: #FFFFFF;}
button, .button, .button a {transition: all .3s;}
button:hover, .button:hover, .button a:hover {background-color: #DADADA; color: #343F4B;}
#boxcontainer-textkernel .button:hover {background-color: #DADADA;}

body {
    background-color: #FFFFFF;
}

/* Standaardfontdefinitie */
* {font-family: Ubuntu, "Open Sans", Arial, Helvetica, sans-serif; font-size: 16px;}
.submitbutton, a.actionlink, .button, input.flatbutton, .button a, button, select, option {font-family: FontAwesome, Ubuntu, "Open Sans", Arial, sans-serif;}
h1 span.category:before {font-family: FontAwesome, Ubuntu, "Open Sans";}
div.error, p.error {font-family: 'Roboto Mono', Courier, Arial;}

h1, h1 span, h1 span a {margin: 0; font-weight: 700; font-size: 18px; text-transform: none; color: #555;}
h2, h2 a, h2 span {font-weight: bold; margin: 4px 0 0 0; color: #555;}

/* TAALSWITCH  */

div.togglelanguage {
  position: static;
  float: right;
  width: 80px;
  margin: 5px 0;
  text-align: center;
  padding: 6px;
  border: 1px solid #DADADA;
}

.no-iframe-body div.togglelanguage {
  top: 20px;
  right: 20px; 
}

div.togglelanguage a, div.togglelanguage i.fa {
  font-size: 0.8em;
}

a.language:hover {
  cursor: pointer;
  background-color: #EAEAEA;
}

body[contentlanguage="nl"] a.language.nl, body[contentlanguage="en"] a.language.en {
  padding: 2px 6px;
  color: white;
  background-color: #2D3945;
}


.upload label {color: #4F4F4F;}
span.label.mandatory, span.label {
  float: left;
  padding: 0px 2px;
  color: #4F4F4F;
}

.upload span.label.mandatory, .upload span.label {
  float: none;
  padding: 0px;
}

span.prefix, .csbs label, .csbs span.label {font-size: 11px; font-weight: 500; line-height: 21px; color: #4F4F4F;}
:not(.account)::-webkit-input-placeholder {font-size: 10px; opacity: 0 !important;}
:not(.account):-moz-placeholder {font-size: 10px; opacity: 0 !important;}
:not(.account)::-moz-placeholder {font-size: 10px; opacity: 0 !important;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {font-size: 10px; opacity: 1 !important;}

select, option {font-size: 14px;}
select.empty {text-align: right; font-size: 1.4em;} 

.empty.validationerror::-webkit-input-placeholder {
  visibility: visible; color: #F00;  opacity: 1 !important; 
}

.empty.validationerror:-moz-placeholder { /* Firefox 18- */
  visibility: visible; color: #F00; opacity: 1 !important; 
}

.empty.validationerror::-moz-placeholder {  /* Firefox 19+ */
  visibility: visible; color: #F00; opacity: 1 !important;  
}

.empty.validationerror:-ms-input-placeholder {  
  visibility: visible; color: #F00;  opacity: 1 !important;
}

input.text.empty.validationerror:focus, input[type=text].empty.validationerror:focus, input.date.empty.validationerror:focus, input[type="date"].empty.validationerror:focus, select.empty.validationerror:focus, input.account.empty.validationerror:focus, textarea.empty.validationerror:focus, button.empty.validationerror:focus {
  border: 1px solid rgba(255, 0, 0, 1) !important;
}

textarea.validationerror:not(.empty), select.validationerror:not(.empty), select.codes.validationerror:not(.empty), input.text.validationerror:not(.empty), input.date.validationerror:not(.empty), input.file.validationerror:not(.empty), input.validationerror:not(.empty) {
  background-color: #FFFFFF !important;
}

.hidelabel .mandatory span.prefix {margin-top: 2.6em; margin-left: 3px; line-height: 8px; padding-right: 0px;}
.hidelabel .memo.mandatory span.prefix {margin-top: 2.6em; margin-left: 3px;}
:not(.ddmmyyyy) input.date.mandatory.empty, :not(.ddmmyyyy) input.mandatory.empty[type="date"], input.text.mandatory.empty, input.mandatory.empty[type="text"], select.mandatory.empty, input.mandatory.account.empty, textarea.mandatory.empty, input.text, input[type="text"], input.date, input[type="date"], select, input.account, textarea {
  padding-left: 6px;
}

.ddmmyyyy span.dateinput input.mandatory:first-of-type {
  padding-left: 6px;  
}

input.text.empty:focus, input.empty[type=text]:focus, input.date.empty:focus, input.empty[type="date"]:focus, input.account.empty:focus, textarea.empty:focus, input.date.empty.day2:focus, input.date.empty.month2:focus, input.date.empty.year4:focus {
  padding-left: 8px;
}

input.text.empty.mandatory:focus, input.empty.mandatory[type=text]:focus, input.date.empty.mandatory:focus, input.empty.mandatory[type="date"]:focus, input.account.empty.mandatory:focus, textarea.empty.mandatory:focus, span.dateinput input.mandatory:first-of-type:focus {
  padding-left: 8px;
}

.ddmmyyyy span.dateinput input.mandatory:first-of-type:focus {
  padding-left: 8px;  
}

span#publish_date {float: right;}

#job_action_buttons .span_2_of_8  { width: 32.3%; }

/*  GRID SPECIFIC FOR CURRENT IFRAME WIDTH */
@media only screen and (max-width: 719px) and (min-width: 717px)
 {

  .account .span_2_of_8, .account .span_4_of_8  { width: 32.3%; }

}