:root {
--green: #5C9D33;
    --blue: #5C9D33;
    --bluebar: #5C9D33;
    --darkgrey: #424851;
    --grey: #97989f;
    --lightblue: #e8f1c8;
    --lightlightblue: #e8f1c8;
    --orange: #F4B821;
    --red: #B82B2B;
    --yellow: #eed93a;
    --white: #ffffff;
    --black: #000000;
    --forminputgrey: #000000;
}

header 
{
	    height: 125px!important;
}
label.infoLabel {
    color: #ffffff;
    background-color: var(--green);
}
@media screen and (max-width: 360px)
{
    header {	width: 100%;     }
	.contentcontainer, .top-line,  .navbar, .cd-multi-steps , nav{
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}

    .blok {
        width: 100%;
        margin-left: 5px;
        margin-right:5px;
    }
}
@media screen and (max-width: 440px){
	header {height:auto!important;}
	.top-line {height:30px!important; padding:0!important;}
	.top-line .contentcontainer1 span:first-child {float:left; text-align:left; width:36%!important;}
	.top-line .contentcontainer1 span:nth-child(2) {float:left; width:28%; text-align:center;}
	.top-line .contentcontainer1 span:nth-child(3) {text-align:right!important; float:left!important; width:36%!important;}

	.navbar-header {width:100%; text-align:center; padding:0; }
	.navbar-mainmenu {float:none!important; margin:10px auto 5px!important;}
	#ctl00_ctl00_Content_Content_vragenPanel { min-height: auto; }
	.hiddenonmobile {display:none;}
	.contentcontainer {padding-left:15px!important; padding-right:15px!important}
	.contentcontainer .clearfix h1:first-child {display:none;}
	.aanmeldenlinks {width:100%!important; max-width:100%!important; margin-right:0!important;}
	.aanmeldenlinks h2 {margin-bottom:-30px!important;}
	.aanmeldenlinks emInfo {display:none!Important;}
	.aanmeldenrechts {margin-right:0!important; padding-left:0!important; border-left:none!important;}
	.closeonmobile { text-align:right; float:left; width:100%; display:inline-block!important; font-size: 2em; color: var(--blue);}
	.column input[type=text], .column input[type=password], .aanmeldenrechts input[type="text"], .aanmeldenrechts input[type="password"] {
		max-width:300px!important; 
		width:300px!important;
		}
	.column label {width:auto!important;}
	a#ctl00_Content_WachtwoordVergetenButton { float:right!important; margin-left:0; display:inline-block!important;}
	.toggle-password, .toggle-password::before, .toggle-password-a, .toggle-password-a::before  { display:none!Important;}
	.inlogButton {width:auto; display:inline-block; margin-top:-30px!important; margin-bottom:40px!important; float:left;}
	.cd-multi-steps {margin-top:0!important; background-color:var(--blue)!important; max-width:74%!important; padding-left:10px!important; padding-right:10px!important; }
	.cd-multi-steps li {margin:0.2em 0 0!important;}
	.akteRowDiv div { width: 100%!important;}
	.leftbar {
		width: 31%!important;
		float: left;
		padding: 0!important;
		border-right: 1px solid var(--green);
	}
	.rightbar {
		width: 65%!important;
		float: left;
		padding: 0!important;
		margin-left: 2%;
	}
	.inspringDiv {
		padding-left:15px!important; padding-right:5px!important;
	}
	
	table.rowTable td:first-child, table.mg tr td:first-child {text-align:left!important;}
	table.mg tr {background-color: var(--lightlightblue);}
	table.mg tr td.email {font-size:85%;}
	table.rowTable td, table.rowTable td:first-child { width: 100%!important; float: left!important;}
	.deleteButton:before, .removeRowButton:before, .playButton:before {display:inline-block!important; padding:0!important; margin-bottom: 2px!important; margin-right:5px;}
	.greenButton, .orangeButton {padding:8px 16px!important;}
	a.playButton, a.deleteButton {min-width:150px!important;}
	a.vorigeButton, a.volgendeButton {display:inline-block!important;}
	a.volgendeButton {text-align:right;}
	a.opslaanButton {display:inline-block!important;}
	.akteRowDiv div:empty {min-height:0px!important;}
	div#ctl00_ctl00_Content_Content_vragenPanel {width:100%!important;}
	.vraag {display:block;}
	.container.right {min-height:35px!important;}
	.helpcontainer {width: 150px!important; top: 115px!important; margin-right: -192px!important;}
	.helpPanel {min-height:auto!important; margin-top:0!important; margin-bottom:30px!important;}
	.helpPanel span:before {font-size:40px!important;}
	.verplichtevelden {display:block!important; float:left; clear:both!important;}
	#ctl00_ctl00_Content_Content_VorigeButton, #ctl00_ctl00_Content_Content_VolgendeButton {clear:none!important;}
	#ctl00_ctl00_Content_Content_VorigeButton {margin-right:10px;}	
	#ctl00_ctl00_Content_Content_OverzichtPanel {width:100%!important;}
	#ctl00_ctl00_UserMenu_MenuPanel {
		display: block!important;
		float: left!important;
		clear: both!important;
		margin-top: 10px!important;
	}
	.top-usermenu {float:left!important;}
	.offNotaris {width:100%!important; margin-bottom:5px!important;}
	.offNotarisAdres {width:40%!important; height:45px!important;}
	.offNotarisPostcode {width:20%!important}
	.offNotarisPlaats {}
	.offMeerInfo {width:100%!important; height:40px!important;}
	.notarisKantoorInfo {width:100%!important; margin-bottom:10px;}
	.kantoorImage {float:left!important;width:50%!important;}
	.kantoorImage img {max-width:90%!important;}
	.logoImage {width:50%!important; float:left!important; text-align:right!important; clear:right!important;}
	.logoImage img {max-width:90%!important;}
	.notaryContact {width:50%!important; margin-left:0!important; margin-right:0!important; height:200px!important;}
	textarea {width:100%!important;}
	.footer-line {width:100%!important; padding-left:0!important; box-sizing:border-box!important; position:relative!important;}
	.footer-line .container {width:auto!important; padding-left:15px;}
	.footer-line .container p {display:block;}
}

@media only screen and (max-width: 768px) and (min-width: 441px)  {
	.leftbar {width:30%!important; border-right: 1px solid var(--green)!important;}
	.rightbar {width:68%!important;}
}

@media screen and (min-width: 361px)
{
    header {	width: 100%;     }
	.contentcontainer, .top-line,  .navbar, .cd-multi-steps , nav{
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
    .blok {
        width: 460px;
        margin-left: 5px;
        margin-right:5px;  }

}

@media screen and (min-width: 481px)
{
	header {	width: 100%;     }
  .contentcontainer, .top-line, .navbar, .cd-multi-steps, nav  { width: 100%; }
  .blok { width: 32%; }
  #ctl00_ctl00_Content_Content_vragenPanel { min-height: 400px; }
}

@media screen and (min-width: 1025px)
{
	header {	width: 100%;     }
    .contentcontainer, .top-line, .navbar, .cd-multi-steps, nav  {
		width: 1170px;
	}

    .blok {
        width: 24%;
    }


}



html {overflow-y: scroll;}

body {
    font-family: "roboto", "sans serif";
    padding: 0;
    margin: 0;
	margin-top: 10px;
}

h1, h2 {
    color: var(--blue);
    /*font-size: 18px;*/
}
h1 {font-size:22px}
h2 {
    font-size: 16px;
}

a {
    color: var(--blue);
}

hr {
    clear: both;
    width: 90%;
    float: left;
    margin-bottom: 20px;
}

.akteLinkjes a {
    text-decoration: none!important;
}

.akteLinkjes a:hover {
    text-decoration: underline!important;
}

.akteLinkjes a:before {
    content: "\f101\00a0\00a0";
    font-family: FontAwesome;
    text-decoration: none!important;
}

.column .label
{
    width: 125px;
    display: inline-block;

}

.column input[type=text],
.column input[type=password]
{
    width: 350px;
}

.column input[type=checkbox]
{
    width: 15px!important;
}

.column label[for*="ctl00_Content"] {
    padding-left: 3px;
    width: 475px!important;
    max-width:100%!important;
}


.formitem input[type=email], .container input[type=email], .container select,
.formitem input[type=tel],
.formitem input[type=number],
.formitem input[type=text], .container input[type=text],
.formitem input[type=password], .container input[type=password],
textarea,

.formulieritem input[type=email], .formulieritem input[type=text]
 {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: var(--forminputgrey);
    position: relative;
    height: 30px;
    width: 350px;
    padding-left: 10px;
	border: 1px solid black;
    outline:none;
}


textarea {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
}

.container select {
    width: 257px;
    height: 29px;
    top: 0px;
    left: 2px;
}

input[type='checkbox'],
.formitem input[type=checkbox],
.container input[type=checkbox]
 {
    width: 15px;
    margin-right: 0px;
    background: #fff;
    border:1px solid #aaa;
    box-shadow: 0 0 2px #aaa;
    vertical-align: top;
}

.formitem input[type=email]:focus,
.formitem input[type=text]:focus,
.formitem input[type=password]:focus,
.container input[type=email]:focus,
.container input[type=text]:focus,
.container input[type=password]:focus
 {
    background: #fff;
    border:1px solid #aaa;
    box-shadow: 0 0 3px #019fe0;
   /* width: 250px;*/
}

textarea {
    width: 400px;
    min-height: 100px;
    resize: none;
}

.greenButton, .orangeButton, .redButton {
	color: black;
    background-color: var(--orange);
    font-weight: 600;
    padding: 10px 18px;
    text-transform: uppercase;
	cursor:pointer;
	border:0;
	font-size: 90%;
	border-radius:5px;
}
.greenButton:hover, .orangeButton:hover {background-color:#fed600!important;}
/*.greenButton:hover,
.greenButton:focus,
.orangeButton:hover,
.orangeButton:focus {
    color: #FFFFFF!important;
    text-decoration: none!important;
}*/

.redButton {
    background-color: var(--red);
}

    .editButton {
        margin-top: 30px;
        float: right !important;
        display: inline !important;
    }

.editButton:after {
    content: "\f040";
    font-family: FontAwesome;
    padding-left: 7px;
}

.verwijderButton, .removeRowButton {
	color: black;
    background-color: var(--lightlightblue);
    font-weight: 600;
    padding: 10px 18px;
    text-transform: uppercase;
	cursor:pointer;
	border:0;
	margin-top: 10px;
	margin-bottom:10px;
	font-size: 90%;
	border-radius:5px;
}

.invalid {
    background: url(../gfx/error-icon.png) #E8F1C8 no-repeat!important;
    background-position: right 5px center!important;
}

.valid {
    background: url(../gfx/ok-icon.png) #E8F1C8  no-repeat!important;
    background-position: right 5px center!important;
}

.emInfo {
    font-size: 12px;
}

.headerRow {
    font-weight:bold;
}

table td {
    padding-right:10px;
    vertical-align: top;
    padding-bottom: 5px;
}

span.seperator {
    /*display: inline-block;*/
    width: 20px;
}

.container select::-ms-expand {
    background-color: white;
    border: 1px solid white;
    border-right: 3px solid white;
}

input.date::-ms-clear {
    display:none;
}

.pickerSpan {
    position:relative;
    margin-left: -20px;
    display: inline-block;
    color: #aaa;
    width: 20px;

}

.ui-datepicker-title {
    text-transform:uppercase;
}

.ui-state-default{
    background: #eeeeee!important;
}


a.ui-state-default {
    border: none!important;

}

.ui-datepicker td span, .ui-datepicker td a {
    text-align: center!important;
    font-weight: normal!important;
    font-size: 14px;
    width: 35px;
    padding-top: 13px!important;
    padding-bottom: 13px!important;
}

.ui-state-highlight {
    border-radius: 50%;
    border: 5px;
    border-color: red!important;
    background: #8cc058!important;
    font-weight: bold!important;
}

.ui-datepicker{
    padding: 0px!important;
    margin-left: -2px;
    margin-top: 10px;
    border-top-color:#8cc058!important;
}

.ui-datepicker:before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: 50%;
    margin: 0 0 0 -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 11px 11px 11px;
    border-color: transparent transparent #8cc058;
}

.ui-datepicker-header{
    background: #8cc058!important;
    padding-bottom: 10px!important;
}

.aui-datepicker .aui-datepicker-next span {
    background: none!important;
}


.ui-datepicker .ui-datepicker-header .ui-datepicker-prev, .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    cursor: pointer!important;
    display: inline-block;
    width: 13px;
    height: 21px;
    margin: 12px 8px 0 8px;
    background: transparent url(jquery-ui/images/jquery-ui-datepicker-arrows.png) 0 0 no-repeat;
    background-size: 26px;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    background-position: -13px 0;
}

.ui-datepicker .ui-datepicker-title {
    padding-top: 5px;
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}

.ui-widget-header .ui-icon{
    background:none;
}

.opslaanButton {background-color:var(--lightlightblue);}
.opslaanButton:hover {background-color:var(--lightlightblue)!important;}

.opslaanButton::before {
    content: "\f04d";
    font-family: FontAwesome;
    color: black;
    padding-right: 10px;
    padding-top: 3px;
}

.vorigeButton::before {
    content: "\f053";
    font-family: FontAwesome;
    color: black;
    padding-right: 10px;
    padding-top: 3px;
}

.volgendeButton::after {
    content: "\f054";
    font-family: FontAwesome;
    color: black;
    padding-left: 10px;
    padding-top: 3px;
}

.mailButton::before {
    content: "\f003";
    font-family: FontAwesome;
    color: black;
    padding-right: 10px;
    padding-top: 3px;
}

.tableView {
    width: 100%;
    margin-bottom: 25px;
}

.tableView ul {
    list-style: none;
    float: left;
    padding: 0px;
    margin-right: 1%;
    width: 32%;
}

.tableView ul li {
    line-height: 22px;
}

.formitem input[type=email].validationError, .container input[type=email].validationError, .container select.validationError,
.formitem input[type=text].validationError, .container input[type=text].validationError, .validationError,
.formitem input[type=password].validationError, .container input[type=password].validationError,
.formulieritem input[type=text].validationError {
    background: #FBE3E4;
    border:1px solid #FBC2C4;
    box-shadow: 0 0 2px #aaa;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    color: var(--forminputgrey);
    position: relative;
    height: 24px;
    width: 250px;
    padding-left: 5px;
}


.formitem input[type=checkbox].validationError, .container input[type=checkbox].validationError {
    width: 20px;
    margin-right: 0px;
    background: #FBC2C4;
    border:1px solid #aaa;
    box-shadow: 0 0 2px #aaa;
    vertical-align: top;

}

.alignRight {
    text-align: right;
    width: 100px;
}

.kostentable {
    padding: 0px;
    margin: 0px;
    border-spacing: 0px;
    border-collapse: separate;
}

.kostentable tr td:first-child
{
    width: 400px;

}

.clearfix {
    clear: both;
}

header {
  margin: 0 auto;
}

.navbar {
    margin: 0 auto;
}

.top-line {
   height: 35px;
    font-size: 14px;
    color: var(--black);
    float: right;
    margin: 0 auto;
}

    .top-line a {
        color: var(--black);
    }

.top-line p span {
    margin-right: 10px;
}

.top-line p span i {
    margin-right: 5px;
    color: black;
}

.footer-line {
    float: left;
    clear: both;
    width: 100%;
    max-width:100%;
    background-color: var(--bluebar);
    color: var(--white);
    padding-bottom: 20px;
    padding-top: 0px;
    padding-left: 10px;
    height: 40px;
    margin: 0px;
    position:fixed;
     bottom:0px;
     z-index: 1000;
}

.navbar-header img {

}

.contentcontainer {
/*    width: 1170px;*/
    margin: 0 auto;
    margin-bottom: 30px;
}


.helpPanel {
/*    border: 1px solid var(--blue);*/
	  font-size:0.9em;
    background-color: var(--lightlightblue);
    width: 100%;
  /*  min-height: 300px;*/
    min-height:100px;
    float: right;
    margin-top: 30px;
    margin-bottom: 10px;
    padding: 10px;
}


.helpPanel span:before
{
    content: "\f05a";
    font-family: FontAwesome;
    color: var(--blue);
    position: relative;
    top: 0px;
    float: right;
    font-size: 65px;

}

.helpPanel span {
    width: 99%;
    display: inline-block;
   /* margin-top:-60px;*/
}


.helpQuestion {
    cursor: help;
}

.helpQuestion:after {
    content: "\00a0\00a0\f05a";
    font-family: FontAwesome;
    color: var(--blue);

}

.usermenu
{
    list-style: none;
    color: var(--black);
    z-index: 10;
	padding:0;
	margin-top:0;
}
#ctl00_ctl00_Label1 {font-size:14px!important; font-weight:bold;}
.usermenu a {
    color: var(--black);
}

.usermenu ul
{
    display:none;
    margin-top: 0px;
}

.usermenu li
{
    cursor: default;
    position: relative;
}

.usermenu li:hover ul, .usermenu ul:hover {
  display: block;
  position:absolute;
  right: 0px;
  z-index: 50;
	width: 150px;
  text-align: right;
  background-color: var(--lightblue);
  list-style: none;
	margin:5px 0 0 0;
  padding: 0px;
  padding-top: 15px!important;
}

.usermenu li:hover ul li {
  line-height: 18px;
  position: relative;
	padding: 5px;
}

.usermenu li:hover ul li a {
	color: var(--black);
}


.usermenu li ul {
  z-index: 1000;
  margin-top:4px;
}

.usermenu ul li:hover, .usermenu ul li:hover a {
/*  background-color: var(--blue); */
/*  color: white;*/
}

.usermenu a {
  display: inline-block!important;
  text-decoration: none!important;
}

.content
{
  position:relative;
  clear: both;
  z-index: 10!important;
}

.groenebalk {
  clear:both;
  float:left;
  width:100%;
  /*min-height: 35px;*/
  height:110px;
  background-color: var(--bluebar);
  margin-bottom: 15px;
  margin-top: -4px;
	margin-left: auto;
	margin-right: auto;
  z-index:1!important;
}

nav{
	margin: 0 auto;
}

.navbar-collapse {
    float: left;
	width:100%;
	padding-right: 0!important;
	margin-right: 0!important;
}

.socialicon
{
	margin-right: 10px;
	padding-top: 10px;
    clear: none!important;
}

.socialicon img
{
	height: 24px;
	width: 24px;
}

.notarisKantoorInfoNotes {
    clear: both;
	float: left;
	width: 100%;
}

.notarisKantoorInfo
{
    clear: both;
	float: left;
	width: 40%;
}


.logoImage {
    	width: 20%;
        float: left;
}


.kantoorImage {
	float: right;
    width: 30%;
}


.logoImage img
{
	float: left;
	margin-bottom: 20px;
}

.odd, .even
{
	border-bottom: 1px solid black;
        background: var(--lightlightblue);
	padding: 10px;
}

.even {
        background: #d3e8a2;
}

.notaryContacts
{
	float: left;
	clear: both;
	width: 100%;
	padding-top: 10px;
}


.notaryContact
{
	float: left;
	width: 20%;
    margin-left: 5px;
    margin-right: 5px;
}

.notaryTable{
    width:100%;
}


.notaryTable td a {
    clear: both;
    float:left;
    margin-top: 5px;
}

.notaryTable td {
    padding-top:20px;
    padding-bottom: 20px;
    width: 100%;
    border-bottom: 2px solid var(--blue);
}

.attention {
    padding: 10px;
    padding-top:0px;
    background-color: var(--lightblue);
}

.attention input[type=checkbox] {
    margin-bottom: 10px!important;
    margin-right: 10px;
}

a[disabled=disabled] {
    display:none;
}


.modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.2;
        filter: alpha(opacity=200);
        -moz-opacity: 0.2;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Arial;
        font-size: 14px;
        /*border: 5px solid #67CFF5;*/
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }

.inline20 {
    display: inline-block;
    margin-right:20px;
    margin-left:10px;
    margin-top:30px;
}

input[disabled=disabled], select[disabled=disabled] {
   color: black!important;
   background-color: #CFCFCF!important;
   border: none!important;
   font-size:14px!important;
}

input[readonly=readonly]  {
   color: gray!important;
   background-color: white!important;
   border: none!important;
   font-size:14px!important;
   font-style:italic;
}

input[readonly=readonly]:focus {
   color: gray;
   background-color: white!important;
   border: none;
}

span[disabled=disabled] label {
    color: gray!important;
    font-style: italic!important;
}

.formulieritem label {
    display: inline-block;
    width: 175px;
}

.formulieritem {
    float: left;
    clear: both;
    margin-bottom: 15px;
}

.formulieritem input {
    width: 305px!important;
}

.formulieritem input[type=checkbox] {
    width: 15px!important;
}


.formulieritem .small {
    width: 100px!important;
}

.formulieritem .medium {
    width: 200px!important;
}

.akteRowDiv {
    margin-bottom: 20px;
    float: left;
    clear: both;
	width: 100%;
	background-color: var(--lightlightblue);

}

.akteRowDiv
{
}

.akteRowDiv div:empty
{
	background-color: var(--white);
	min-height: 219px;
}

.fullWidth:empty
{
	min-height: 0px!important;
}


.akteRowDiv div {
    width: 50%;
    float: left;
}

.akteRowDiv div.fullWidth {
    width: 100%;
    clear: both;
}

table.mg {
    padding: 0;
    margin: 0;
    width: 100%;
}
table.mg td {
    width: 50%!important;
    float: left;
}
table.mg tr {background-color:var(--lightlightblue);}
table.mg tr td:first-child{
    clear: both;
    float: left;
    display: inline-block;
    width:100%;
    background-color: var(--lightlightblue);
	font-weight:bold;

    padding-left: 10px;
    padding-top: 5px;
    text-align: right;
}

table.mg tr td:last-child{
    background-color: var(--lightlightblue);
    /*width: 50%;*/
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

table.rowTable {
    width: 100%;
}

table.rowTable td:first-child {
    width: 25%;
    text-align: right;
	font-weight:bold;
}

table.rowTable td
{
    width: 25%;
  background-color: var(--lightlightblue);
  padding: 10px;
  padding-top: 20px;
  border-top: 1px solid #5C9D33;
}

table.rowTable td a {
    color: black;
    text-decoration: underline;
}

table.rowTable td a:before {
    font-family: "FontAwesome";
    content: "\f019";
    padding-right: 10px;

}

table.mg a {

}

.deleteButton:before, .removeRowButton:before {
    font-family: "FontAwesome";
    content: "\f014";
    padding-right: 10px;
}

.playButton:before {
    font-family: "FontAwesome";
    content: "\f04b";
    padding-right: 10px;
}

.offerte span label {
    width: 45%;
    display: inline-block;
    /*padding-bottom: 5px;*/
    padding-left: 5px;
}

#ctl00_ctl00_Content_Content_vragenPanel span
{
	font-size: 110%;
	padding-bottom: 10px;
}

#ctl00_ctl00_Content_Content_vragenPanel h1
{
	font-weight: normal!important;
	font-size: 140%;
}

.cd-multi-steps
{
		float: left; width:auto;

}

.blauw {
    background-color: #004C97;
}

.oranje {
    background-color: #E8770D;
}

.groen {
    background-color: var(--blue);
}

.roze {
    background-color: #F21852;
}

.lichtgroen {
    background-color: #5C9D33;
}

.paars {
    background-color: #B51D48;
}

.geel {
    background-color: #F2B900;
}

.lichtblauw {
    background-color: #0594D5;
}

.blok {
    padding-top:10px;
    padding-bottom: 10px;
    float:left;
    height: 170px;
    margin-bottom: 10px;
    text-align: center;
    padding-left: 2px;
    padding-right: 2px;
}

.akteRow {
    clear: both;
    height: 150px;
}

.blok a, .blok span {
    color: white;
    font-weight:bold;
    text-align: center;
}

.sub {
    padding-top: 20px;
    height: 150px;
}

h1, h2 {
    clear: both;
}

.notarisRow {
    clear: both;
    padding-top: 25px;
    border-top: 1px solid var(--blue);
    width: 100%;
}

.notarisRow div {
    float: left;
    margin-right: 20px;
}

.offNotaris {
    width: 35%;

}

.offCheckbox {
    width:3%;
    cursor: pointer;
}
.offCheckbox label
{
    padding-bottom: 0px!important;
    margin-bottom: 0px!important;
    cursor: default;
}

.offCheckbox span {
}

.offNotarisAdres {
    width: 20%;
}

.offNotarisPostcode {
    width: 10%;
}

.offNotarisPlaats {
    font-weight: bold;
    width: 20%;
}

.offMeerInfo {
    float: right;
}

.offMeerInfo a {
    text-decoration: none;
    font-size: 48px;
    font-weight: bold;
    color: var(--blue);
    width: 2%;
    position:relative;
    top: -25px;
}

.accordion {
    float:left;
    clear:both;
    width: 100%;
    cursor: pointer;
}


.accordionContent {
    display:none;
    background-color: var(--lightblue);
    float: left;
    width: 100%;
    padding: 20px;
}

.accordionContent a.greenButton {
    clear:both!important;
    float:left!important;
    display:block!important;
    margin-top: 20px;
}

.sessionExpire {
    display: none;
}

.registerUser {
    display: none;
}

.pageContentContainer {
    background-color:var(--lightlightblue);
    margin: 20px;
    padding: 20px;
    padding-top: 60px;
    margin-bottom:50px;

}

.pageContentContainer h2 {
    font-size: 18px;

}

.pageContentNummer {
    padding: 0px;
    margin: -40px;
    margin-top: -80px;
    background-color: var(--blue);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    width:50px;
    height:50px;
    color: white;
    text-align:center;
    font-weight:bold;
    font-size: 24px;
    line-height:50px;
}

.priceTableHeader h2 {
    margin-bottom: 0px!important;
    display: inline-block;
}

.priceTableContainer .plus {
    color: #5C9D33;
    font-weight: bold;
    font-size: 24px;
    padding-top: 5px;
    width: 30px;
    display: inline-block;
}

.alignRight {
    text-align: right!important;
    width: 150px;
}

table {
    width: 100%;
}

.bold {
    font-weight: bold;
}

.hideDefault {
    display: none;
}

.priceTableHeader {
    background-color: var(--lightlightblue);
    padding-left: 10px;
    cursor: pointer;
    padding-bottom:10px;
}

.oddRow {
    background-color: #ededed;
}

td {
    padding-top:20px;
    padding-bottom:20px;
    padding-left: 5px;
}

table {
    border: 0;
    border-spacing: 0;
}

/*.addRowButton {
    display: inline-block;
  background: #5C9D33;
  color: var(--white)!important;
  padding: 10px 12px;
  margin-left: 5px;
  margin-bottom:10px;
	font-weight: bold;
	font-size: 18px;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
    border: 0px solid #b82b2b;

}*/
.addRowButton {
    display: inline-block;
    background: #5C9D33;
    color: var(--white)!important;
    padding: 10px 18px;
    margin-left: 5px;
    margin-bottom: 2px;
    font-weight: bold;
    font-size: 90%;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
}

.addRowButton:before {
    content: "\f067";
    font-family: FontAwesome;
    color: white;
    padding-right: 10px;
    padding-top: 3px;
}
/*.helpcontainer {width:25%; float:right;}*/
.helpcontainer {width: 280px; position: fixed; top: 350px; right:50%; margin-right:-570px;}
#ctl00_ctl00_Content_Content_OverzichtPanel {width:75%; float:left;}
.top-usermenu {float:right;}
.notaryImage {
  margin-top:5px;
  width:110px;
  background-image: url(/img/notaris-overlay.png);
    }
.notaryImage img {border-radius:50%; width:110px; height:110px;}
.closeonmobile {display:none;}
.hiddenonmobile {width:280px!important;}
.aanmeldenlinks {margin-right:0%}
.aanmeldenrechts {margin-right:-1%; padding-left:3%; border-left:1px solid var(--blue);}
::placeholder {color:#999999; font-family: "roboto", "sans serif"; }

#ctl00_Content_BestaandeGebruikerPanel .formitem input[type=text],#ctl00_Content_nieuweGebruikerPanel .formitem input[type=text], #ctl00_Content_BestaandeGebruikerPanel .formitem input[type=password],#ctl00_Content_nieuweGebruikerPanel .formitem input[type=password] {border-top-left-radius:0; border-bottom-left-radius:0;}
.welkom {
	width:100%; 
	padding:20px; 
	background-color:var(--lightlightblue); 
	overflow:hidden; 
	margin-bottom:30px}
.welkom h2 {font-size:2em; margin-top:0; margin-bottom:25px;}
.welkomlinks {float:left; width:75%; margin-right:5%;}
.welkomrechts {float:left; width:20%}
.welkomrechts ul {margin-top:50px;}
.welkomrechts ul li {height:30px;}
.welkomrechts ul li a, .welkomrechts ul li a:visited {color:var(--blue);}
.welkomrechts ul li a:hover {color:var(--bluebar); border-bottom: 2px solid var(--bluebar);}
.welkomrechts ul li i.fa {margin-right:10px;}

.field-icon {
  position: relative;
  z-index: 2;
  right:30px;
}

.mijngegevens .container {width:100%;}
.mijngegevens label {margin-bottom: 5px;}
.mijngegevens .half {
    width: 75% !important;
    min-height: 50px;
    height: 50px;
}
.geg_voornaam {width:50%;}
.geg_voornaam input {width:100%;}
.geg_voorletters, .geg_tussenvoegsel {width:20%;}
    .geg_voorletters input, .geg_tussenvoegsel input, .geg_huisnummer input {
        width: 120px !important;
    }
.geg_achternaam {width:60%;}
.geg_achternaam input {width:100%!important;}
.geg_adres {width:75%; float:left;}
.geg_adres input {width:100%!important;}
.geg_huisnummer {width:25%; float:left;}
 .geg_telefoon {width:50%;}
.geg_telefoon input {width:100%;}
.geg_postcode {width:25%;}
.geg_postcode input {width:100%!important;}
.geg_woonplaats {width:75%}
.geg_woonplaats input {width:100%!important;}
.geg_idsoort, .geg_idnummer, .geg_gebdatum, .geg_gebplaats {width:50%;}
.geg_gebdatum input, .geg_gebplaats input {width:100%}
.geg_ww, .geg_hhww {width:50%;}
.geg_ww input, .geg_hhww input {width:100%;}
.geg_organisatie {width:50%;}
.geg_organisatie input {width:100%!important;}

.navbar-mainmenu {float:right!important; text-align:right; padding-right:0!important; margin-top:50px; padding-bottom:0!important; }
.navbar-mainmenu ul {list-style-type: none;}
.navbar-mainmenu ul li {padding:5px 10px; float:left; margin-right:20px;}
.navbar-mainmenu ul li:last-child {margin-right:0;}
.navbar-mainmenu ul li a, .navbar-mainmenu ul li a:visited {color: var(--black); font-weight:bold; font-size: 14px}
.navbar-mainmenu ul li a:active, .navbar-mainmenu ul li a:hover {color: var(--black); border-bottom: 2px solid var(--bluebar);}

.klantenvertellenKop {float:right!important; background-image:url('/img/klantenvertellenachtergrondheader-transparant.png');  width:80px!important; height:94px!important; padding:25px 0 0 30px; font-weight:600; color:#464343; font-size:1.9em; margin-top:10px;}
.klantenvertellenKop .price {float:left; margin-top:-5px; margin-left:-3px; letter-spacing: -0.1em;}
.klantenvertellenKop sup {
    position: relative;
    top: 0.1em;
    left: -0;
    font-size: 60%;
    display: inline-block;
    margin-left:-8px!important;
}

@media screen and (max-width: 1024px) {
  .toggle-password-a {margin-right:185px!important;}
  .toggle-password {margin-right:215px!important;}
  .mijngegevens .half {width:75%!important;}
  .helpcontainer {width:25%!important; float:left!important; margin-right:-500px!important;}
  .aanmeldenlinks .formitem:nth-child(3), .aanmeldenrechts .formitem:nth-child(3) {height:41px!important}
  .klantenvertellenKop sup {margin-left:-8px!important}
}

@media screen and (max-width: 768px) {
  .navbar-header {padding-right:10px!important;}
  .navbar-mainmenu {float:right!important;}
  .groenebalk .contentcontainer {width:100%;}
  .helpcontainer {width:25%!important; float:left!important; margin-right:-365px!important;}
  .klantenvertellenKop sup.decimal {margin-left:-9px!important;}
  .toggle-password {margin-right:85px!important;}
  .toggle-password-a {margin-right:62px!important;}
}

@media screen and (max-width: 420px) {
  .navbar-mainmenu {width:100%; text-align: justify; margin-top:20px;}
  .navbar-mainmenu ul li {margin-right:40px;}
  .mijngegevens .half {width:100%!important;}
  .geg_voornaam {width:100%;}
  .geg_voorletters, .geg_tussenvoegsel {width:50%!important}
  .geg_achternaam {width:100%;}
  .geg_postcode {width:30%!important;}
  .geg_woonplaats {width:70%!important;}
  .geg_postcode input {width:100%!important;}
  .geg_idsoort select, .geg_idnummer input {width:100%!important;}
  .geg_gebdatum input, .geg_gebplaats input {width:100%!important;}
  .geg_ww input, .geg_hhww input {width:100%!important;}
  .geg_organisatie  {width:75%;}
  .column label[for*="ctl00_Content"] {width:80%!important;}
  .toggle-password-a {margin-right:145px!important;}
  .welkomrechts ul li {height:75px!important;}
  .helpcontainer {margin-right:-160px!important; width:50%!important;}
}

.btwprijs {
    font-size: 70%;
}

.prijs {
    margin-bottom: 15px;
}

.price
{
    margin-right: 10px;
    margin-left: 10px;
}

.extraKostenPanel {
border: 1px solid #c0c0c0;
margin-top: 20px;
width: 100%;
clear:both;
display:block;
padding: 40px 20px 20px 20px;

}

.extraKostenPanel .omschrijving {
width: 90%;
display: inline-block;}

.extraKostenPanel .prijs
{
width: 10%;
text-align: right!important;
display:inline-block;
padding-right: 10px;
}

.extraKostenPanel ul
{
padding: 20px 0px 20px 0px; }
@media screen and (max-height:500px) {
  .helpcontainer {top:10px!important}

}
.absolute i
{
	position: absolute;
}

.absolute{
	width:100%;
	margin-bottom:10px;
}

.icon {
	padding-left:10px;
	   padding-top: 6px;
   color: #999999;
   width: 70px;
   text-align: left;
   z-index:1;
}

.text-input {
   width: 100%;
   padding: 10px;
   text-indent:25px;
   font-size: 20px;
   font-weight: 500;
}

.hide 
{
	display:none;
}

.conceptAktePanel {
	margin-bottom:30px;
}

.conceptLoading {
padding-top: 20px; }

.OverzichtPanel {
	float:left;
	width: 75%;
	margin-top: 20px;
}

tr:last-child td  {
	padding-top:20px!important;
}

.ui-widget-header {
	border: 1px solid var(--blue)!important;
	background: var(--blue) url(images/ui-bg_gloss-wave_35_8cc058_500x100.png) 50% 50% repeat-x!important;;
}

label.omschrijving {
	display:inline-block;
	width: 500px;
}

label.prijs {
	display:inline-block;
	text-align: right;
	width: 60px;
	margin-bottom:0px;
}

#ctl00_ctl00_Content_Content_ExtraKostenPanel label
{
	display:inline-block;
	margin:10px 0px;
}

#ctl00_ctl00_Content_Content_ExtraKostenPanel ul
{margin-bottom:20px;}

#ctl00_ctl00_Content_Content_KostenPanel tr td:first-child {
	padding-left: 0px;
}

#ctl00_ctl00_Content_Content_ExtraKostenPanel ul label
{
	margin-bottom:0px;
}


.leftbar {
    width: 18%;
    float: left;
    padding: 20px 20px 20px 20px;
    margin-right:2%;
    box-sizing:border-box;
}

    .leftbar a {
        margin-bottom: 10px!important;
        display:block;
        color: var(--black);
    }

.rightbar {
    width: 80%;
    float: left;
    padding: 20px 20px 20px 20px;
}

    .fa-fw {
        margin-right: 5px;

    }

.productLink
{
    clear:both;
    float:left;
    font-weight:bold;
    color: var(--black);
    margin-bottom: 10px;
    text-decoration: underline;
}

.productPanel {
    clear: both;
    float: left;
    width: 100%;
}

.productPanel:not(:first-child) {
    margin-top: 30px;
}

.productPanel:not(:last-child) {
    border-bottom: 1px solid var(--black);
    padding-bottom: 20px;
}

.downloadsPanel{
    margin-top: 20px;
    margin-bottom: 20px;
    float:left; 
    clear:both;
}

.inspringDiv {
    clear: both;
    float: left;
    padding-left: 30px;
    padding-right: 30px;
    color: var(--black);
}
        .inspringDiv label, .inspringDiv a.downloadLink {
            display: block;
            margin-bottom: 5px;
            color: var(--black);
        }

        .inspringDiv a.downloadLink {
            color: var(--blue);
        }

            .inspringDiv a {
            color: var(--black);
            margin-bottom: 5px;
            display: inline-block;
        }

            .inspringDiv label a {
                margin-bottom: 0px;
            }

                /*.inspringDiv a.greenButton, .inspringDiv a.deleteButton {
                    color: var(--white);
                    text-decoration: none;
                    display: inline !important;
                }*/
        .buttonPanel {
            float: left;
            clear: both;
            margin-top: 20px;
            padding-bottom:10px;
        }
.buttonPanel a {
    margin-right: 20px;
}

hr.seperator {
    width: 100%!important;
    border-top: 1px solid var(--black);
}

.floatRight{
    float:right;
}
.downloadLink,
.overeenkomstenPanel a{
    text-decoration: none;
}
    .downloadLink:hover,
    .overeenkomstenPanel a:hover{
        text-decoration: underline;
    }


    .downloadLink:before,
    .overeenkomstenPanel a:before{
        font-family: "FontAwesome";
        content: "\f105";
        padding-right: 10px;
        font-weight: bold;
        text-decoration: underline;
        display: inline-block;
    }
    .downloadLink:before,
    .downloadLink:hover:before,
    .overeenkomstenPanel a:before,
    .overeenkomstenPanel a:hover:before{
        text-decoration: none;
    }

.notarisInfoPanel {
    float:left;
    clear:both;
}

.overeenkomstenPanel {
    float: left;
    clear: both;
    margin-top:20px;
}

    .overeenkomstenPanel label
    { display:block;}


    .overeenkomstenPanel a {
        clear: both;
        display: inline-block;
        color: var(--blue);
    }

.loadingButton:after {
	content: "\f110";
	font-family: "FontAwesome";
	display:inline-block;
	margin-left:10px;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;	
    pointer-events: none;
}

.groenVinkje {
    background-color: var(--orange);
}

    .groenVinkje:before {
        content: "\f00c";
        font-family: "FontAwesome";
        display: inline-block;
        margin-right: 10px;
    }

    a.greenButton {
        padding-top: 9px;
        padding-bottom: 10px;
    }

.actieList p
{
    margin:0;
}

.actieList {
    clear:both;
    float:left;
}

#ctl00_ctl00_Content_Content_ABNPanel
{
	min-height: 80px;
}


	.bevestigClass {
		margin-top: -35px;
		margin-left: 60px;
	}
	
	div.seperator {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid black;
}


.PromotiePanel {
    border: 1px solid #003c68;
    padding: 25px;
    background-color: #d5ecf2;
}

.PromotiePanel a {
    font-weight: bold;
}


.PromotiePanel {
    border: 1px solid #003c68;
    padding: 25px;
    background-color: #d5ecf2;
}

.PromotiePanel a {
    font-weight: bold;
}

.DoelstellingExtraPanel {
    clear:both;
    float:left;
}

    .DoelstellingExtraPanel .formitem {
        width: 100%;
        padding-bottom: 10px!important;
    }
        .DoelstellingExtraPanel .formitem label {
            display:inline-block!important;
            width: 150px;
        }
    .DoelstellingExtraPanel a {
        clear: both;
        float: left;
        background-color: var(--blue)!important;
    }

.doelstellingVerzoek {
    clear:both;
    float:left;
}
.doelstellingVerzoek br {
    display:none;
}

.doelstellingVerzoek label {
    margin-right: 20px;
}

.doelstellingVerzoekPanel {
    margin-top: 20px;
}

#growls.default {
    left: 30%;
    top: 30%;
}

.growl-medium {
    height: 200px;
    width: 500px!important;
}

div.blok {
    cursor:pointer;
}