input.date {width: 220px !important}
input.day2 {width:50px !important;}
input.month2 {width:50px !important;}
input.year4 {width:120px !important;}

@media print {
    i.fa, .print-no {
        display: none;
    }
}

/* WANNEER PAGINA NIET IN IFRAME GETOOND WORDT  */

.no-iframe-page {max-width: 800px;}
.no-iframe-logo { height: 90px; background: url("/custom/10656/logo.png") no-repeat 0px 10px; }
.no-iframe-header {margin: 0 0 10px 0; padding-bottom: 0px; border-bottom: 1px solid #9F1F63;}

/* GENERIEKE HTML ELEMENTEN */

/* ALGEMEEN */
*    {font-family: Arial, sans-serif; font-size: 14px; font-weight: 400; text-align: left; color: #4e484b;}
body {margin: 0; padding: 0 10px 10px 0;}
a {color: #9F1F63; text-decoration: none;}
hr   {width: 96%; border: #FFF 1px solid; margin-left: auto; margin-right: auto;}
h1, h1 span   {font-size: 1.15em; font-weight: 700;}
h2, h2 a, h2 span, h3 {font-size: 1.15em !important; font-weight: 700; margin: 16px 0 0 0; padding-bottom: 10px; margin-bottom: 10px;}
h1, h2, h2 a, h2 span, h3 {color: #9F1F63;}
h3 {margin: 2em 0 0.2em 0;}
span.small {font-size: 0.7em;}
.bold {font-weight: 700;}
.grey, td.grey span.text {color: #999999;}
i {color: inherit;}

/* Knoppen */
input.submitbutton {padding: 5px 10px; background-color: #9F1F63; color: #FFF; border: none; cursor: pointer;}
input.addone {min-width: 22em; padding: 5px 10px; background-color: #FFF; color: #9F1F63; border: #9F1F63 solid 1px; text-align: center; cursor: cell;}
input.addone:hover  {background-color: #9F1F63; color: #FFF; border: #9F1F63 solid 1px;}

/*************************
 * LOAD AND SAVE SESSION *
 *************************/
#loadsave {position:fixed; top:34px; right:1%; z-index: 0; max-width: 14em; background-color: #FAFAFA; border: #9F1F63 solid 1px; padding: 15px; font-size: 0.8em;}
#loadsave span, #loadsave a {font-size: 1em}
span#toggle {position:fixed; top:8px; right:1%; z-index: 1; display: inline-block; background-color: #FFF; color: #9F1F63; border: #9F1F63 solid 1px; padding: 4px; font-size: 1.1em;}
span#toggle:hover {background-color: #9F1F63; color: #FFF; cursor:pointer;}
a.load  {display: inline-block; width: 12em; margin-bottom: 1em; margin-top: 1em; padding: 5px 10px; background-color: #FFF; color: #007AFF; border: #007AFF solid 1px; text-align: center; cursor: pointer;}
a.load:hover  {background-color: #007AFF; color: #FFF; border: #007AFF solid 1px;}
a.save  {display: inline-block; width: 12em; padding: 5px 10px; background-color: #FFF; color: #4CD964; border: #4CD964 solid 1px; text-align: center; cursor: pointer;}
a.save:hover  {background-color: #4CD964; color: #FFF; border: #4CD964 solid 1px;}
span.savesession {color: #9F1F63; border: #9F1F63 solid 1px; padding: 4px;}

/*************************
 * TOOLTIP *
 *************************/
span.tooltip {display: inline-block; width: 1.2em; text-align: center; background-color: #FAFAFA; border: #EAEAEA solid 1px; color: #AAA; border-radius: 12px; margin-top: 5px; text-decoration: none; cursor: help;} 
span.tooltip strong {line-height:30px; font-weight: bold;} 
span.tooltip:hover {text-decoration:none;} 
span.tooltip span { position:absolute; color:#111; border:1px solid #DCA; background: #fffAF0 url("/custom/10655/tooltip-close.png") no-repeat 98% 10%; z-index:10; padding:14px 20px; margin-top:-30px; margin-left:28px; width:300px; line-height:16px; } 
span.tooltip span.left { width:280px; margin-top:-90px; margin-left:-280px;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;} 
span.tooltip span { border-radius:4px; box-shadow: 5px 5px 8px #CCC; }
span.tooltip, span.tooltip strong, span.tooltip span, span span.tooltip span {font-size: 14px;}

/* MIJN ACCOUNT */
/* Account - Inlogpagina */
p label.account {display: inline-block; width: 6em; float: none; padding-right: 1em;}
#retrievepw {display: inline-block; margin-bottom: 1em;}
#loginwrapper {width: 600px;}
#loginexternal {font-style: italic; vertical-align: top; border-style: none; border-left: solid 1px #f0f0f0;}
.loginexternal, .loginexternal h2 {text-align: right;}
.tisaccount ul {padding-left: 14px;}

/* Account - Vacature e-mailservice */
ul.emailprofile li {list-style-type: none;}
ul.emailprofile {padding-left: 0px;}

/* INSCHRIJFMETHODES BOXKLEUREN */
span.box {background-color: #FFFFFF; border-radius: 0px;}
span.box span {color: #4e484b; font-size: 0.9em;}
div.boxcontainer a.boxcontainerhover:hover span.box {background-color: #9F1F63;}
div.boxcontainer a.boxcontainerhover:hover span.box span {color: #FFFFFF;}
span.boxtitle {text-transform: uppercase; font-weight: 400;}
div.boxcontainer {width: 100%;}

/* REACTIEFORMULIER */
label span.prefix {display: none}
label.mandatory span.prefix {display: inline}
td.label {width: 18em;}
td.top {vertical-align: top;}
td.right {text-align: right;}
td span.left {float: left;}
td span.right {float: right;}
td.smallfont span, p.smallfont {font-size: 0.8em;}
tr.spacer {height: 0.5em;}
span.spacer1 {display: inline-block; width: 1em;}

span.info {font-style: italic; font-size: 0.7em; color: #555;}
td label.mandatory {color: #4e484b;}
td textarea, td input.text, td select, td input.file {width: 22em;}
td.small input.text, td.small select, td.small input.file {width: 11em;}
td.xsmall input.text, td.xsmall select {width: 6em;}
td input.day2, td input.month2 {width: 2em;}
td input.year4 {width: 4em;}
td textarea {height: 5em;}
td.small textarea {height: 3em;}
li.indented {margin-left: 1em; list-style-type: circle;}

/* Variabele invoerblokjes */
table.block {display: block; margin-bottom: 1em;}
table.block td.label {width: 16.5em;}
td.indented {padding-left: 1.5em;}

/* POWERED BY TANGRAM */
div#surrepad a {font-size: 0.8em; text-decoration: none; color: #c2c2c2;}