:focus
{
  outline:none;
}

/* pagination */
.paginationwidget
{
  clear:both;
  width:100%;
  height:45px;
}
html.col2 .paginationwidget
{
  width:640px;
}
html.mobile .paginationwidget
{
  width:320px;
}
.paginationwidget div.bar
{
  position:relative;
  top:0;
  background-color: #f5faff;
  margin-right:20px;
  height:45px;
  text-align:right;
}
.paginationwidget a.backtotop
{
  display:inline-block;
  font: 16px/16px "LinotypeUniversW02-Cn", Arial;
  position:absolute;
  top:15px;
  left:25px;
  text-transform: uppercase;
  text-decoration: none;
  color:#333;
}
.paginationwidget a.backtotop:hover
{
  text-decoration: underline;
}
html.mobile .paginationwidget a.backtotop
{
  display:none;
}
.paginationwidget ul
{
  margin:0;
  padding:0;
  display:inline-block;
  list-style-type: none;
}
.paginationwidget ul li
{
  line-height:25px;
  text-align: center;
  border-left:1px solid #dce1e6 !important;
  float:left;
  display:inline-block;
}
.paginationwidget ul li a, .paginationwidget ul li span.active, .paginationwidget ul li span.dots
{
  display:block;
  min-width:20px;
  padding:10px;
  height:25px;
}
.paginationwidget ul li a, .paginationwidget ul li span.dots
{
  position:relative;
  text-decoration: none;
  background-color: transparent;
  color:#333;
}
.paginationwidget ul li a:hover
{
  background-color: #faffff;
  transition: color 0.3s, background-color 0.3s;
}
.paginationwidget ul li span.active
{
  background-color: white;
}
.paginationwidget ul li.prevpage, .paginationwidget ul li.nextpage
{
  width:40px;
  overflow:hidden;
}
.paginationwidget ul li.prevpage span.schemeimg
{
  background-image: url(../img/common/16-arrow_left.png);
  top:-8px;
  left:-10px;
}
.paginationwidget ul li.nextpage span.schemeimg
{
  background-image: url(../img/common/16-arrow_right.png);
  top:-8px;
  left:-10px;
}

/* form elements */
/* ----------------------------------------------------------------------

   Body - forms

*/

.wideblock form
{
  padding:10px 0;
}
form.ut-twocol-form
{
  padding: 0;
}

.wideblock div.formline
{
  padding:10px 24px;
}
.wideblock div.formbuttonline
{
  padding:10px 24px;
}
.whwp-survey
{
  margin-top:20px;
}
.whwp-survey .whwp-question
{
  padding-top:10px;
}
.whwp-survey p.whwp-title
{
  font: 26px "LinotypeUniversW02-Cn", Arial;
}
.whwp-survey .whwp-questiongroup .whwp-title
{
  font: 22px "LinotypeUniversW02-Cn", Arial;
  margin-top:20px;
}

form input[type="reset"]
{
  cursor:pointer;
  margin:0;
  padding:0;
  width:16px;
  height:16px;
  background:transparent url(../img/common/emptyfield.png) 0 0 no-repeat;
  border: 0 solid transparent;
}

/**/

/*
All form controls have the same width
See 'Last designs/Corporate/output/Styleguide/UT-4-styleguide-content.jpg'

in ut-twocol-forms and widgets -> 100%
normaal in contentvlak (webpack) etc -> 280px

We override the 100% for .docblock, but restore to 100% again if whe're in a .ut-twocol-forms
*/

  select
, .wh-pulldown
{
  width: 100%;
  max-width: 280px;
}

.wh-calendar + .wh-pulldown-values
{
  width: 120px;
}

  form input[type="text"]:not(.nodefaultstyle)
, form input[type="email"]
, form input[type="tel"]
, form input[type="password"]
, form input[type="date"]
, form input[type="search"]:not(.nodefaultstyle)
, form textarea
, form .-wh-calendar-popup
{
  width: 100%;
  height: 45px;
  padding:12px 17px !important;
  font:15px/19px Arial;
  color:#777;
  margin:0;
  background-color: #f5faff;
  resize: none;
  border: 1px solid !important;
}

/* Arnold: not sure why border needed to be !important at all, it conflicts
   with .error - but it seemed safer not to break anything now */
  form input[type="text"]:not(.nodefaultstyle):not(.error)
, form input[type="email"]:not(.error)
, form input[type="tel"]:not(.error)
, form input[type="password"]:not(.error)
, form input[type="date"]:not(.error)
, form input[type="search"]:not(.nodefaultstyle):not(.error)
, form textarea:not(.error)
, form .-wh-calendar-popup:not(.error)
{
  border-color:  #dce1e6 !important;
}

input[type="search"]::-webkit-search-cancel-button
{
  display:none;
}

form textarea
{
  height:120px;
}

  input[type="text"]:not(.nodefaultstyle)
, input[type="email"]
, input[type="tel"]
, input[type="password"]
, input[type="date"]
, textarea
, .-wh-calendar-popup
, .button
, button
, input.submit
, form input[type="submit"]
, form button.submit
, form button[type="submit"]
{
  max-width: 280px;
  width: 100%;
}


/* buttons */

.buttonbar > button
{
  width: auto;
  margin-right: 40px;
}

.buttonbar > button.last
{
  margin: 0;
}


.button.disabled
,button.disabled
,button[disabled]
{
  opacity: 0.5;
  cursor: default;
}

.button.autowidth
,button.autowidth
{
  width: auto;
}


/* iconholder within a <button> is used 2x by loginpage.witty and 1x by videocolleges.witty,
   should be deprecated?
   Added by Vlaai: it's also used in many other widgets, TGS researchprogramme amongst others
*/

  form input.submit
, form input[type="submit"]
, form button.submit
, form button[type="submit"]
, .button/*.submit*/
, button
{
  display:inline-block;
  height: 45px;
  padding: 0 22px;
  margin-top:10px;
  text-align: center;
  font: 20px/21px "LinotypeUniversW02-Cn", Arial;
  text-transform: uppercase;
  cursor:pointer;
  border:0 none !important;
  text-decoration: none;
  line-height: 45px;
  -webkit-appearance: none;
  border-radius:0;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

 .button .iconholder
,button .iconholder
{
  top:0;
  left:0;
  width: 45px;
  height: 45px;
  position:absolute;
}

 .button .label
,button .label
{
  margin-left: 45px;
  text-align: center;
  display: inline-block;
}
#headercta .button .label /* not sure if this hsould apply to all button s*/
{
  line-height:50px;
}
 .button .icon
,button .icon
{
  display: inline-block;
  vertical-align: middle;
}

form input[type="file"]
{
  display:inline-block;
  text-align: center;
  font: 13px/14px "LinotypeUniversW02-Cn", Arial;
  text-transform: uppercase;
  cursor:pointer;
  border:0 none !important;
  text-decoration: none;
}


  form input[type="text"]:not(.nodefaultstyle):focus
, form input[type="email"]:focus
, form input[type="tel"]:focus
, form input[type="password"]:focus
, form input[type="date"]:focus
, form textarea:focus
{
  border-color:#777777 !important;
  color:#333;
  background-color: #ffffff;
}




form input.error, form textarea.error
{
  border-color:red !important;
  color:red !important;
}

form .remark
{
  text-align: right;
  font-size:15px;
}


form:after, .whwp-formgroup:after, .whwp-option:after
{
  content:"";
  display:block;
  clear:both;
}
.whwp-dategroup, .whwp-timegroup
{
  white-space: nowrap;
}
 form .whwp-dategroup input[type="text"]
,form .whwp-timegroup input[type="text"]
{
  width:118px;
}
 html.mobile form .whwp-dategroup input[type="text"]
,html.mobile form .whwp-timegroup input[type="text"]
{
  width:37px;
}
form .whwp-dategroup input.whwp-year
{
  width:201px;
}
html.mobile form .whwp-dategroup input.whwp-year
{
  width:70px;
}



/* IE10/11 only workaround -> We hide the default checkbox/radiobutton so only our custom background-image is visible.
   Not needed for Edge, IE<10 always dump their checkbox/radio over the element
*/
  input[type="checkbox"]::-ms-check
, input[type="radio"]::-ms-check
{
  border: 0;
/*
  border-radius: 0;
  background-color: transparent;
  background-image: none;
*/
  color: transparent;
}



/* checkbox */
input[type="checkbox"]
{
  vertical-align: middle;
  margin-top: -1px;
  -webkit-appearance: none;

  border: 0;
  border-radius: 0;
}
input[type="checkbox"]:checked
{
}

  input[type="checkbox"]
, .wh-checkbox
{
  background: transparent url(../img/common/checkbox.png) no-repeat 0 0;
  height: 24px;
  width: 24px;
  margin: 0 10px 4px 0; /* FIXME: bad use of margin, this will affect vertical alignment */
}
  input[type="checkbox"][disabled]
, .wh-checkbox.disabled
{
  background-position: 0 -48px;
}
  input[type="checkbox"][disabled]:checked
, .wh-checkbox.disabled.checked
{
  background-position: 0 -72px;
}
  input[type="checkbox"]:checked
, .wh-checkbox.checked
{
  background-position: 0 -24px;
}

/* radiobutton */
input[type="radio"]
{
  vertical-align: middle;
  margin-top: -1px;
  -webkit-appearance: none;

  border: 0;
  border-radius: 0;
}

  input[type="radio"]
, .wh-radio
{
  background: transparent url(../img/common/radiobutton.png) no-repeat 0 0;
  height: 24px;
  width: 24px;
  margin: 0 10px 4px 0; /* FIXME: bad use of margin, this will affect vertical alignment */
}
  input[type="radio"][disabled]
, .wh-radio.disabled
{
  background-position: 0 -48px;
}
  input[type="radio"].checked
, .wh-radio.disabled.checked
{
  background-position: 0 -72px;
}
  input[type="radio"]:checked
, .wh-radio.checked
{
  background-position: 0 -24px;
}



/* ----------------------------------------------------------------------

   Pulldown (custom & native)

*/

select
{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  border-radius: 0; /* Chrome */
  background: #f5faff url("../img/common/16-arrow_down.png") no-repeat 0 0;
}
select::-ms-expand /* hide the arrow in IE10/11 */
{
  display: none;
}
@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
/*
       background-image: none !important;
       border:0;
*/
    }
}

  select
, .wh-pulldown
{
  position: relative;
  display: inline-block;

  height: 45px;
  border: 1px solid #dce1e6 !important;

  font:15px/19px Arial;
  color:#777;
  background-color: #f5faff;
  outline: none;
  vertical-align: bottom;
}

  select:focus
, .wh-pulldown:focus
, .wh-pulldown.wh-pulldown.active /* in case of native controls our focus is actually on the invisible native component, so for this situation we need this class */
{
  border-color:#777 !important;
  color:#333;
}

  select.error
, .wh-pulldown.error
{
  border-color:red !important;
}



  .wh-pulldown:focus span.value
, .wh-pulldown.active span.value
{
  opacity:1;
}

/* FIXME: why 2x :after ?? */
.wh-pulldown .arrow:after
{
  content: none;
}
div.wh-pulldown:after
{
  content:"";
  display:block;
  clear:both;
}

.wh-pulldown.error .value
{
  color:red;
}


select
{
  /* !! don't use important on generic form elements */
  padding:12px 48px 12px 17px;
}

select.-wh-calendar-selectmonth
{
  padding-right: 17px;
}

.wh-pulldown .value,
html.mobile .wideblock .wh-pulldown .value
{
  padding:12px 48px 12px 17px !important;
  display:block;

/*
Since the pulldown array has float right the browser
will generate ellipsis on the title when it reaches the arrow.
This way we don't need set set an explicit width.
  float:left;
  width:177px;
*/

  height:43px;
  overflow:hidden;
  text-overflow: ellipsis;
}

.wh-pulldown .arrow
{
  border-left-color: inherit;
  border-left-width: 1px;
  border-left-style: solid;


  display:block;
  /*float:right;*/
  position:absolute;
  top:0;
  right:0;
  width:43px;
  height:43px;
  background:#f5faff url("../img/common/16-arrow_down.png") no-repeat;
}



/* ----------------------------------------------------------------------

   Pulldown menu (custom)

*/

.wh-pulldown-values
{
  z-index: 100;
  border:1px solid #dce1e6 !important;
  border-top:0 transparent !important;
  background-color: white;
  color:#777777;
  width:246px;
  padding:0;
}

/*
the current value of the pulldown
Highlighting is is confusing. We already show the active option in the pulldown component,
the options menu should only show the selection.
.wh-menu-active
{
  background-color: #eee !important;
}
*/

/* the highlighted option (through hover or keyboard navigation) */
  .wh-menu-selected /*legacy pulldown*/
, .wh-menu-hover/*legacy pulldown*/
, .wh-pulldown-values li.selected
, .wh-pulldown-values li.hover
{
  background-color: #eee !important;
}

html.mobile div.wh-pulldown-values
{
  margin-top:2px;
}

html.mobile div.wh-pulldown-values.wideblock
{
  margin-top:2px;
  width: 278px
}

.wh-pulldown-values.wh-scrollableview .wh-scroller-vertical
{
  width:8px;
  height:30px;
  right:6px;
  background-color:#aaa;
  opacity:0.2;
  border-radius:3px;
  visibility:visible;
  z-index:9;
  position:absolute;
}

.wh-pulldown-values li
{
  padding:9px 17px;
  display: block;
/*
  overflow:hidden;
  text-overflow: ellipsis;
*/
  white-space: normal;
  border-bottom:1px solid #dce1e6;
}
html.mobile .wh-pulldown-values.wideblock li
{
  width: 244px
}
.wh-pulldown-values li::last-child
{
  border-bottom:0 none;
}
/*
DON'T style plain :hover, since we don't want a visible :hover when using keyboard navigation

div.wh-pulldown-values li:hover
{
  background-color:#f5faff;
  color:#333;
}
*/

  html.scheme1 .wh-pulldown .arrow
, html.scheme1 .-wh-calendar-popup .-wh-calendar-icon
{
  background-position:  -9px -330px;
}
  html.scheme1 select:not([disabled])
{
  background-position: right -330px;
}
  html.scheme1 .cat .wh-pulldown .arrow
, html.scheme1 .cat .-wh-calendar-popup .-wh-calendar-icon
{
  background-position:  -9px -394px;
}
  html.scheme1 .cat select:not([disabled])
{
  background-position: right -394px;
}
  html.scheme2 .wh-pulldown .arrow
, html.scheme2 .-wh-calendar-popup .-wh-calendar-icon
{
  background-position:  -9px -522px;
}
  html.scheme2 select:not([disabled])
{
  background-position: right -522px;
}
  html.scheme2 .cat .wh-pulldown .arrow
, html.scheme2 .cat .-wh-calendar-popup .-wh-calendar-icon
{
  background-position:  -9px -586px;
}
  html.scheme2 .cat select:not([disabled])
{
  background-position: right -586px;
}
  html.scheme3 .wh-pulldown .arrow
, html.scheme3 .-wh-calendar-popup .-wh-calendar-icon
{
  background-position:  -9px -714px;
}
  html.scheme3 select:not([disabled])
{
  background-position: right -714px;
}
  html.scheme3 .cat .wh-pulldown .arrow
, html.scheme3 .cat .-wh-calendar-popup .-wh-calendar-icon
{
  background-position:  -9px -778px;
}
  html.scheme3 .cat select:not([disabled])
{
  background-position: right -778px;
}
  html.scheme4 .wh-pulldown .arrow
, html.scheme4 .-wh-calendar-popup .-wh-calendar-icon
{
  background-position:  -9px -906px;
}
  html.schema4 select:not([disabled])
{
  background-position: right -906px;
}
  html.scheme4 .cat .wh-pulldown .arrow
, html.scheme4 .cat .-wh-calendar-popup .-wh-calendar-icon
{
  background-position:  -9px -970px;
}
  html.scheme4 .cat select:not([disabled])
{
  background-position: right -970px;
}
  html.scheme5 .wh-pulldown .arrow
, html.scheme5 .-wh-calendar-popup .-wh-calendar-icon
{
  background-position: -9px -1098px;
}
  html.scheme5 select:not([disabled])
{
  background-position: right -1098px;
  border: 1px solid #FF0;
}
  html.scheme5 .cat .wh-pulldown .arrow
, html.scheme5 .cat .-wh-calendar-popup .-wh-calendar-icon
{
  background-position: -9px -1162px;
}
  html.scheme5 .cat select:not([disabled])
{
  background-position: right -1162px;
}
html select[disabled]
{
  background-position: right -202px;
}

/* disabled state */
html .wh-pulldown.disabled .arrow
{
  background-position:  -9px -202px !important;
}
select.disabled
{
  background-position: right -202px !important;
}



/* ----------------------------------------------------------------------

   Gender selection

*/

div.genderselector
{
  padding-bottom:2px;
}
div.genderselector > span
{
  vertical-align: bottom;
}
div.genderselector span.selected
{
  background:#ffffff;

  /*
  border-width:1px;
  border-style:solid;
  padding: 9px;
  */
  border-width: 0;
  padding: 10px;
}
div.genderselector span.notselected
{
  padding: 10px;
  cursor:pointer;
  opacity: 0.4;

  border: 1px solid #DCE1E6 !important;
  padding: 9px;
  background-color: #FFFFFF;

}
/*
div.genderselector span.notselected span.schemeimg_24
{
  background-position: -20px -20px !important;
}
*/
div.genderselector span.selectable
{
  display:inline-block;
  width:45px;
  height:45px;
}
div.genderselector span.selectable[data-value="male"] span.schemeimg_24
{
  background-image: url('../img/common/24-man.png');
}
div.genderselector span.selectable[data-value="female"] span.schemeimg_24
{
  background-image: url('../img/common/24-vrouw.png');
}
div.genderselector span.currentvalue
{
  line-height:48px;
  display:inline-block;
  vertical-align:top;
  padding-left:6px;
  color:#777777;
}



/* ----------------------------------------------------------------------

   Webpack forms

*/

 html.mobile .whwp form input[type="text"]
,html.mobile .whwp form input[type="email"]
,html.mobile .whwp form input[type="tel"]
,html.mobile .whwp form input[type="password"]
,html.mobile .whwp form input[type="date"]
,html.mobile .whwp form textarea
{
  width:244px;
}

  form .whwp-formgroup .whwp-option .wh-checkbox
, form .whwp-formgroup .whwp-option .wh-radio
{
  margin-right:5px;
  display:inline-block;
  vertical-align: middle;
}

.whwp-option input[type="text"]
{
  margin-top:5px;
}

.whwp-option
{
  display:block;
  padding-bottom:5px;
  margin-bottom:5px;
}


/* Formsapi versions of forms */
 form.wh-form > div.fieldgroup
,form.wh-form div.formsubsection > div.fieldgroup
{
  margin-top:10px;
}
form.wh-form div.fieldgroup > label
{
  display:block;
}
form.wh-form div.fieldgroup > label > span
{
  display:inline-block;
  vertical-align: top;
  margin-left:6px;
}

  form.wh-form .valid input
, form.wh-form .valid .wh-pulldown
, form.wh-form .valid .-wh-datetimefield
, form.wh-form .valid .wh-pulldown .arrow
{
  background-color: #ffffff;
}
/* the background color was only meant for textual fields,
   so remove it again for non-textual fields */
  form.wh-form .valid input[type="checkbox"]
, form.wh-form .valid input[type="radio"]
{
  background-color: transparent;
}

form.wh-form .invalid input[type]
, form.wh-form .invalid textarea
, form.wh-form .invalid .wh-pulldown
, form.wh-form .invalid .-wh-datetimefield
{
  border-color:red !important;
}
form.wh-form .invalid label
{
  color: red !important;
}
form.wh-form .error-holder
{
  display:none; /* hide errors, the borders will do */
}

/* Read only forms (PLD) */
span.formreadonlylabel
{
  display: inline-block;
  min-width: 140px;
}



/* ----------------------------------------------------------------------

   Calendar

*/

.-wh-calendar-popup
{
  display:inline-block;
  border:1px solid #000000;
  cursor:pointer;
  padding:0 0 0 5px;
  height:19px;
  line-height:23px;
  width:110px;
  margin:0;
  font-family: 'Roboto', sans-serif;
  background: #dcdcdc;
  position:relative;
}

.-wh-calendar-popup .-wh-calendar-icon
{
  position:absolute;
  right:0;
  top:0px;
  height:43px;
  width:43px;
  background: transparent url("../img/common/16-arrow_down.png") no-repeat;
  border-left: 1px solid #dce1e6 !important
}

/* calendar styling */
#-wh-calendar-popup
{
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 10pt;
  border: 1px solid #DCE1E6;
}

.-wh-calendar-head
{
  background-color:#F5FAFF;
  border-left:1px solid #DCE1E6;
  border-right:1px solid #DCE1E6;
  border-bottom:1px solid #DCE1E6;

  padding: 5px 5px;

  height: auto; /* calendar css sets fixed height */

  text-align: center;
  margin:0 -1px;
}

#-wh-calendar .-wh-calendar
{
  margin: 5px auto 5px auto;
}

.-wh-calendar-head select
{
  width: 120px;
  height: 32px; /* i.p.v. 43px */
  padding-top: 0;
  padding-bottom: 0;
  line-height: 32px;

  -webkit-appearance: menulist-button;
  -moz-appearance: menulist-button;
  appearance: menulist-button;

  background-image: none;
}

.-wh-calendar-weeknr
{
  font-size:13px;
  color:#444;
  border-right:1px solid #DCE1E6;
}
.-wh-calendar th,
.-wh-calendar td
{
  padding:0 5px;
  width:22px;
  font-size:12px;
  font-weight: normal;
  line-height:22px;
}
.-wh-calendar th
{
  border-bottom:1px solid #DCE1E6;
  height:32px;
  color:#444;
}
.-wh-calendar td
{
  color:#606060;
  height:22px;
}
.-wh-calendar-weekdays
{
  margin-bottom:10px;
}
.-wh-calendar th
{
  padding-top: 0;
}
.-wh-calendar tr.firstrow td
{
  padding-top:10px;
}
.-wh-calendar tr.lastrow td
{
  padding-bottom:0px;
}
.-wh-calendar td.lastcol
{
  padding-right:10px;
}


.-wh-calendar td.-wh-calendar-day
{
  cursor:pointer;
}
.-wh-calendar td.-wh-calendar-day span
{
  border:1px solid transparent;
  padding:0 2px;
}
.-wh-calendar td.-wh-calendar-day:hover span
{
  background-color: #F5FAFF;
  border-radius:4px;
  border:1px solid #DCE1E6;
}
 .-wh-calendar td.-wh-calendar-selected span
,.-wh-calendar td.-wh-calendar-selected:hover span
{
  color:#ffffff;
  border-radius:4px;
  border:1px solid transparent;
}
.wh-calendar-prev, .wh-calendar-next
{
  cursor:pointer;
  position:absolute;
  top:11px;
  padding:0 2px;
  width:6px;
  height:10px;
}
.-wh-calendar-prev
{
  left:10px;
  background: transparent url(../img/common/arrow-left.png) 0 0 no-repeat;
}
.-wh-calendar-next
{
  right:10px;
  background: transparent url(../img/common/arrow-right.png) 0 0 no-repeat;
  content: ">";
}
.-wh-calendar-buttonbar
{
  position:relative;
  background-color:#F5FAFF;
  border-top:1px solid #DCE1E6;
  border-left:1px solid #DCE1E6;
  border-right:1px solid #DCE1E6;
  margin:0 -1px;
  height:28px;
  padding:2px 12px;
}

.wh-calendar-today,
.wh-calendar-today:hover
{
  position:absolute;
  top:2px;
  right:69px;
}
.wh-calendar-empty
{
  position:absolute;
  top:2px;
  right:2px;
}
.wh-calendar-cancel
{
  color: #000;
  cursor: pointer;
  position: absolute;
  right: 8px;
}



/* autocomplete */
.wh-autocomplete-values
{
  background-color: #f5faff;
  min-width:248px;
  border:1px solid #dce1e6;
  color:#333;
}
.wh-autocomplete-values li
{
  padding:3px 15px;
}



/* wrapper round .schemeimg */
.iconholder
{
  overflow: hidden;
  position: relative;
}
.schemeimg_32, .schemeimg_24, .schemeimg_16, .schemeimg
{
  background-repeat: no-repeat;
  position:absolute;
  display:block;
}
.schemeimg_32
{
  width:32px;
  height:32px;
}
.schemeimg_24
{
  width:24px;
  height:24px;
}
.schemeimg_16
{
  background-repeat: no-repeat;
  width:16px;
  height:16px;
}

.schemeimg
{
  background-repeat: no-repeat;
  width:64px;
  height:64px;
  position:absolute;
  display:block;
}



/* ==========================================================================

   ut-two-colform

ut-twocol-form is used for:
    - OpenDagen registratie
    - Research Programmes Eligibility Request formulier

- use autocomplete="off" for specific input's (we *don't* globally declare it on a <form>)

    <form class="wh-form ut-twocol-form"
          data-gtm-submit='{"event":"formulier-submit","form":"eligibilityrequest"}'
          >

      <div class="panel">
        <div class="panel_description">
          <div class="header schemefontcolor">[gettid widgets.eligibilityrequest.hdr_uploadproposal]</div>
        </div>
        <div class="panel_content">

          <div class="fieldgroup">
            <input type="text" name="" placeholder="" required />
          </div>

        </div>
      </div>

    </form>

*/

.ut-twocol-form
{

}


.ut-twocol-form .panel
{
  font-size: 0;
  margin-left:-20px;
}
.ut-twocol-form .panel:after
{
  display:block;
  content:"";
  clear:both;
}

  .ut-twocol-form .panel .panel_description
, .ut-twocol-form .panel .panel_content
{
  display: inline-block;
  vertical-align: top;
  width:300px;
  float:left;
}
.ut-twocol-form .panel .panel_content
{
  font-size: 15px;
  padding: 25px 25px 25px 25px;
  margin-left:20px;
  min-height:47px; /* at minimum, we must match the panel_description in height) */
  margin-bottom:10px;
}
html.mobile .ut-twocol-form .panel .panel_content
{
  padding: 10px;
}

.ut-twocol-form .panel .panel_description
{
  padding: 25px 25px 0 25px;
  margin-bottom: 10px;
  margin-left:20px;
}

.ut-twocol-form .panel .panel_content.fullwidth
{
  width: 100%;
}

.ut-twocol-form .panel .panel_content.fullwidth #odform_prevpage
{
  float: left;
  margin-left: 45px;
}

.ut-twocol-form .panel .panel_content.fullwidth #odform_submit
{
  float: right;
  margin-right: 45px;
}



html.mobile .ut-twocol-form .panel .panel_description,
html.mobile .ut-twocol-form .panel .panel_content
{
  display: block;
  width: auto;
  float: none;
}
html.mobile .ut-twocol-form .panel .panel_description,
html.mobile .ut-twocol-form .panel .panel_content
{
  padding: 10px;
}

.ut-twocol-form .panel .header
{
  font: normal 20px "LinotypeUniversW02-Cn", Arial;
  text-transform: uppercase;
}

.ut-twocol-form .panel .header.big
{
  font-size: 26px;
}

.ut-twocol-form .panel_description
{
  font: normal 26px "LinotypeUniversW02-Cn", Arial;
}

.ut-twocol-form .fieldgroup /*.question*/
{
  margin-top: 25px;
  margin-bottom: 25px;
}

  form.ut-twocol-form input[type="text"]
, form.ut-twocol-form input[type="email"]
, form.ut-twocol-form select
, form.ut-twocol-form .wh-pulldown
, form.ut-twocol-form .-wh-datetimefield /* old field */
{
  width: 100%;
  max-width: none;
}

.ut-twocol-form .wh-inputgroup label + label
{
  margin-top: 10px;
}

.ut-twocol-form label.option
{
  margin: 5px 5px 0 0;
  vertical-align: middle;
}




/* styling the iscrol bar a bit */
.iScrollVerticalScrollbar
{

}
.iScrollIndicator
{
  background: rgba(34, 34, 34, 0.498039) !important;
  border: 1px solid rgba(119, 119, 119, 0.901961) !important;
}