@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&display=swap');

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


/* WANNEER PAGINA NIET IN IFRAME GETOOND WORDT  */
.no-iframe-body {margin: 0; padding: 0; max-width: 100%; height: 100%;}
.no-iframe-page {max-width: 100%;}
.no-iframe-content {max-width: 980px; min-height: 60%; margin: 30px auto 0 auto; padding: 0px 5px; background: rgb(255, 255, 255); /* Fall-back for browsers that don't support rgba */ background: rgba(255, 255, 255, .98); color: #333;}
.csbs .no-iframe-content {padding-top: 5px;}
.no-iframe-logo {max-width: 980px; margin: 0 auto; height: 130px; background: url("https://www.tangram-tis.nl/custom/10404/logo.gif") no-repeat 0px 10px;}
.no-iframe-header {height: 120px; width: 100%; margin-bottom: 0px; padding-top: 0px; border-bottom: 3px solid #E75012;}

body:not(.no-iframe-body) div.header {display:none;}

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

.submitbutton, a.actionlink, input.flatbutton, .flipbase-button {color: #FFFFFF;}
.submitbutton, a.actionlink {text-transform: uppercase;}
a:hover, .history a:hover * {color: #E75012;}
.submitbutton:hover, .button a:hover, a.actionlink:hover, input.flatbutton:hover, .photocontainer:hover, button:hover, button:hover span, .flipbase-button:hover {background-color: #FFFFFF; border: 1px solid #E75012; box-sizing: border-box;}
.button a, .button a:hover, div#upload-cv-div {border: none;}
div.centered *, button, .button, .button a, .submitbutton:hover, .button a:hover, a.actionlink:hover, input.flatbutton:hover, button:hover, button:hover span, .flipbase-button:hover {color: #E75012;}
.csbs h2, .vdtl h2, .vsbs h2, .covv h2, 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(0, 0, 0, 1);}
button, .button {border: 1px solid #E75012;}
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: #E75012; color: #FFFFFF;}
#boxcontainer-textkernel .button:hover {background-color: #E75012;}

#agreementtext {
    font-size: 14px;
    color: #555;
    display: block;
    padding-left: 18px;
    margin-top: -18px;
}

#agreementtext a {
    font-size: 14px;
}

input[type='checkbox'] {margin-left: 0;}


/* Afronding van knoppen en inputs, standaard rechte hoeken */
.submitbutton {
  border-radius: 32px;
}

div.button, #formsubmitbutton {
    margin: 0px 0;
}

.submitbutton {
    padding: 19px 0;
    text-transform: none;
    font-size: 14px;
}

.margintop {margin-top: 3em;}

.cv button[id*="browse-container"] {
    border: 2px solid #CCC;
    color: #989898;
}

.cv button[id*="browse-container"]:hover {background-color: #989898; color: #FFFFFF; border-color: #989898;}

.cv .file.mandatory span.prefix {
    color: #B2B2B2;
}




input.text, input[type="text"], input.date, input[type="date"], select, input.account, textarea {
    border-width: 0 0 2px 0; 
}


.cv button.file {
    max-width: 100%;
}

.cvlabel {padding-top: 48px;}
input.text, input[type="text"] {height: 52px;}
.cv button {height: 56px;}
.cv label {font-size: 16px;}

input.text:focus, input[type=text]:focus, input.date:focus, input[type="date"]:focus, select:focus, input.account:focus, textarea:focus {
    border: 2px solid rgba(151, 151, 151, 1);
    border-width: 0 0 2px 0; 
}

.csbs label, .vsbs label {
    color: #333;
}

span.prefix {color: #CCC;}
span.file-uploaded {padding-top: 32px; color: #538f00;}

.hidelabel .mandatory span.prefix {
    margin: 2.5em 0 0 5px;
}

.attachments {margin-top: 2em;}

::-webkit-input-placeholder {
  color: #333;  opacity: 1 !important; font-size: 16px;
}

:-moz-placeholder { /* Firefox 18- */
  color: #333; opacity: 1 !important; font-size: 16px;
}

::-moz-placeholder {  /* Firefox 19+ */
  color: #333; opacity: 1 !important; font-size: 16px;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {  
  color: #333;  opacity: 1 !important;  font-size: 16px;
}

div#surrepad {margin-top: 2em;}


@media only screen and (min-width: 641px) {
  .reaction .cv label {visibility: visible;}
}

/*  GRID ABOVE 641 PIXELS */
@media only screen and (min-width: 641px) {
  .cvlabel {display: inline-block;}
  .cv label {visibility: hidden;}
  .noreaction .cv label {visibility: visible;}
  .noreaction .cv buttonx[id*="browse-container"] {margin: -8px 0px 0px 0px;}
  .cvlabel span.prefix {display: inline-block; color: #B2B2B2; visibility: visible;}
  .reaction .col.email, .reaction #vacoverig .col.homephone {margin-top: 1.9%;}
  .reaction .group2 {margin-top: 1.9%;}
}

@media only screen and (max-width: 1023px) {
 .span_3_of_8, .span_2_of_8, .span_1_of_8 {width: 49%;}
}

/*  GRID BELOW 641 PIXELS */
@media only screen and (max-width: 640px) {
  .cvlabel {display: none;}
  .cv label {visibility: visible; padding-left: 4px;}
  .cv {margin-top: 6%;}
  .cv .file.mandatory span.prefix {display: inline-block; color: #B2B2B2;}
}

@media only screen and (max-width: 640px) {
  .span_7_of_8, .span_6_of_8, .span_5_of_8, .span_4_of_8, .span_3_of_8, .span_2_of_8, .span_1_of_8 {width: 99%;}
}