* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

body {background-color: #fff; color: black; font-size: 14px; font-family: Helvetica, sans-serif;}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */


:root {
    /* COLORS */
    --dark-grey: #454545; --middle-grey: #999; --light-grey: #f1f1f1;
    --base-blue: #3ba7cf;
    --dark-blue: #008dc1;
    --thin-blue: #cbf1ff;
    --green: green; --clear-green: #4caf50; --pale-green: #b7ffa9;
    --dark-red: #cb0000; --red: #e30000; --pale-red: #ff7171; --thin-red: #ffd0aa;
    
/*    --edit-item: #f1e49a;*/
    --edit-item: #f8f4d2;/*#fffacc;*/

    
    --main-header-shadow-color: rgba(0, 0, 0, 0.9);

    /* MAIN HEADER */
    --main-header-menu-width: 500px;
    --main-header-menu-button-height: 40px;
    --main-header-menu-button-width: 80px;
    
    --main-page-body-width: 1024px;

    /* TRASITION */
    --main-header-transition: all 0.35s ease;
    
}

h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}
h1, h2, h3, h4, h5, h6 {color: #777; font-weight:700; margin:10px 0}

hr {border:0; border-top: 1px solid #ececec; margin:20px 0;}

a, a:link, a:active, a:visited {color: inherit; text-decoration: none; cursor: pointer;}
a:hover {color: #3ba7cf; text-decoration: none;}



input[type="text"], input[type="date"], input[type="datetime"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="time"], input[type="url"], textarea, select {
	-webkit-transition: all 0.10s ease-in-out;
	-moz-transition: all 0.10s ease-in-out;
	-ms-transition: all 0.10s ease-in-out;
	-o-transition: all 0.10s ease-in-out;
	outline: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	/*width: 100%;*/
	background: white;
	/*margin-bottom: 4%;*/
	border: 1px solid #ccc;
	padding: 6px 10px 6px 10px;
    border-radius: 5px;
/*    line-height: 22px;*/
}

select {padding: 5px 10px 6px 5px; /*line-height: 22px;*/}

input[type="text"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="time"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="url"]:focus, /*textarea:focus,*/ select:focus {
	box-shadow: 0 0 5px var(--base-blue);
	border: 1px solid var(--base-blue);
}

input[type="submit"], input[type="button"], button, .button {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	/*width: 100%;*/
	padding: 7px 12px 7px 12px;
	background: var(--base-blue);
	border-style: none;
	color: white;
    font-weight: 700;
    font-size: 0.9em;
    border-radius: 5px;
    margin: 0px 5px 0px 0px;
    transition: var(--main-header-transition);
}

input[type="submit"] {
	background: var(--clear-green);
}

input[type="submit"]:hover, input[type="button"]:hover, button:hover, .button:hover {background: #ddd; color: black;}


input[type="checkbox"], input[type="radio"] {margin: 0px 0px 0px -8px; padding: 0px 0px 0px -8px;}

input[type="text"]:disabled {
    background: #efefef;
}

.button-stripped {
	background: transparent;
	border-style: none;
	color: black;
    transition: var(--main-header-transition);
}

.button-stripped:hover {
    background: #f1f1f1;
}

.button-back {
    cursor: pointer;
    position: fixed;
    display: block;
    top: 100px;
    font-size: 1.8em;
	background: white;
    z-index: 12;
    padding: 15px 15px 15px 0px;
    color: var(--base-blue);
}    

.button-back:hover {
    color: #000;
}

.button-back-popup {
    cursor: pointer;
    padding: 0px 5px 0px 0px;
    color: var(--base-blue);
}    

.button-back-popup:hover {
    color: #000;
}



.button-in-row {
    cursor: pointer; margin: -3px 0px; padding: 3px 8px;
}

.page-body {padding: 70px 0px 0px 0px; display: block; width: 100%; min-height: 100vh; height: 100%; max-width: var(--main-page-body-width); background-color: white;  color: black; line-height: 1em; 
}    
    
.color-white {color: #fff;}
.color-green {color: var(--green);}
.color-clear-green {color: var(--clear-green);}
.color-pale-green {color: var(--pale-green);}
.color-blue {color: var(--base-blue);}
.color-dark-blue {color: var(--dark-blue);}
.color-red {color: var(--red);}
.color-pale-red {color: var(--pale-red);}
.color-grey {color: #666;}
.color-light-grey {color: #aaa;}

.border-blue {border-color: var(--base-blue) !important;}

.padding-auto {padding-top: auto; padding-bottom: auto;}

.background-green {background: var(--green);}
.background-clear-green {background: var(--clear-green);}
.background-red {background: var(--red);}
.background-blue {background: var(--base-blue);}
.background-grey {background: #999;}

.field-mandatory {background: #d7f4ff !important;}
.field-alert {background: #ffd0aa !important; }

.width-5-pc   {width:  5%;}
.width-10-pc  {width: 10%;}
.width-15-pc  {width: 15%;}
.width-20-pc  {width: 20%;}
.width-25-pc  {width: 25%;}
.width-30-pc  {width: 30%;}
.width-35-pc  {width: 35%;}
.width-40-pc  {width: 40%;}
.width-45-pc  {width: 45%;}
.width-50-pc  {width: 50%;}
.width-55-pc  {width: 55%;}
.width-60-pc  {width: 60%;}
.width-65-pc  {width: 65%;}
.width-70-pc  {width: 70%;}
.width-75-pc  {width: 75%;}
.width-80-pc  {width: 80%;}
.width-85-pc  {width: 85%;}
.width-90-pc  {width: 90%;}
.width-95-pc  {width: 95%;}
.width-100-pc {width:100%;}

.width-50-px  {width:  50px;}
.width-75-px  {width:  75px;}
.width-80-px  {width:  80px;}
.width-100-px {width: 100px;}
.width-110-px {width: 110px;}
.width-150-px {width: 150px;}
.width-200-px {width: 200px;}
.width-300-px {width: 300px;}


.text-align-left   {text-align: left;}
.text-align-center {text-align: center;}
.text-align-right  {text-align: right;}
.large {font-size: 1.4em}
.small {font-size: 0.8em}
.bold {font-weight: 700} 
.pointer {cursor: pointer;}
.no-wrap {white-space: nowrap;}

.vertical-align-top {vertical-align: top !important;}
.vertical-align-middle {vertical-align: middle !important;}
.vertical-align-bottom {vertical-align: bottom !important;}

.margin-top {margin-top: 6px !important;}
.margin-right {margin-right: 6px !important;}
.margin-bottom {margin-bottom: 6px !important;}
.margin-left {margin-left: 6px !important;}

.add-margin-top {margin-top: 20px !important;}
.add-margin-right {margin-right: 20px !important;}
.add-margin-bottom {margin-bottom: 20px !important;}
.add-margin-left  {margin-left: 20px !important;}

.padding-top {padding-top: 6px !important;}
.padding-right {padding-right: 6px !important;}
.padding-bottom {padding-bottom: 6px !important;}
.padding-left {padding-left: 6px !important;}


.add-padding-right {padding-right: 20px;}

.padding-auto {padding-top: auto; padding-bottom: auto;}


.no-pointer-events {pointer-events: none !important;}
.no-border {border: 0 !important;}
.display-none {display: none}
.display-table {display: table !important}
.display-inline-block {display: inline-block;}

.field-label {color: #777; font-weight: 700; padding-bottom: 4px;}

.field-row {display: table; margin-bottom: 0px; padding: 4px 0px 4px 0px; }
.field-label, .field-data {display: inline-block; min-width: 100%;}

.date-field {width: 100px;}

.table {display: table;}

.table-header {display: none; background: white; color: #777; margin-bottom: 0px; border-bottom: 1px solid var(--base-blue); padding: 8px 0px 8px 0px; line-height: 24px;}
.table-title-header {color: #777; display: inline-block; min-width: 100%; vertical-align: top; font-weight: 700; font-size: 1em; padding: 0px 8px;}
.table-title-row {color: #777; display: inline-block; min-width: 100%; vertical-align: bottom; font-weight: 700; font-size: 0.8em; padding: 0px 0px; margin-bottom: 0px;}
.table-row {display: table; margin-bottom: 0px; border-bottom: 1px solid #eee; padding: 0px 0px 0px 0px; transition: var(--main-header-transition); height: 32px; }
.table-td {display: inline-block; min-width: 100%; vertical-align: top; margin-bottom: 4px; padding: 8px 8px 8px 8px;}

/*.table-row-entry-line {display: table; background: #f1f1f1; margin-bottom: 0px; border-bottom: 1px solid #eee; padding: 8px 0px 8px 0px; transition: var(--main-header-transition);}*/
.table-row-add {display: none; background: #f1f1f1; margin-bottom: 0px; border-bottom: 1px solid #eee; padding: 8px 0px 8px 0px; transition: var(--main-header-transition);}
.table-row-clean {display: table; margin-bottom: 0px; padding: 0px; cursor: none;}
.table-row-quiet {display: table; margin-bottom: 0px; padding: 0px; border-bottom: 1px solid #eee;}

.table-row:hover {background: #eee}
/*.table-row-entry-line:hover, .table-row-add:hover {background: #e5e5e5}*/


.line-blue {width: 100%; border-bottom: 1px solid var(--base-blue); margin: 10px 0px}
.line-grey {width: 100%; border-bottom: 1px solid #aaa; margin: 10px 0px}


.link {cursor: pointer;}
.link:hover {color: val(--base-blue) !important; text-decoration: underline !important;}

/*
.spanSign { width: 10px; display: inline-block; margin-left: 5px; margin-right: 5px;}

.template-link {display: inline-block;}
*/
.main-top {
    position: fixed;
    width: 100%;
    background: #111;
    height: 70px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 10px var(--main-header-shadow-color);   

}

.div-topmenu-item-container {
    display: inline-block; width: 300px; height: 70px; float: right; padding-right: 10px;
}

.topmenu-icon {
    margin-right: 5px; color: #008db5;    
}

.div-topmenu-item {
    display: inline-block; float: right; margin: 11px 1px; padding: 15px; border-radius: 8px; cursor: pointer;
    transition: var(--main-header-transition);
}

.div-topmenu-item:hover {
    background-color: #ddd;
    color: black;
}

.div-form {
     width: 100%; overflow-x: hidden; overflow-y: auto; color: #000; background-color: #fff; padding: 15px; 
}

.naam-onderneming {
    font-size: 1.5em; font-weight: bold; margin-top: 10px; margin-bottom: 20px; color: var(--edit-item);
}

.menu-left-row-edit {
    padding-left: 1em; margin-bottom: 8px; display: table; width: 100%;
}

.menu-left-edit-rubriek {
    font-size: 1.0em; font-weight: normal; margin-top: 2px; margin-bottom: 10px; color: #999; text-transform: uppercase; 
}

.menu-left-edit-item {
    display: table-cell; width: 60%; color: #60dbff; padding-left: 15px; 
}

.menu-left-edit-amount {
    display: table-cell; width: 40%; text-align: right; color: #ccc;
}

.menu-left-edit-subtotal {
    display: table-cell; width: 60%; color: #eee; font-weight: bold; padding-left: 15px;
}

.form-title {
    color: #666; font-size: 1.3em; font-weight: bold; margin: 0px 0px 30px 0px; width: 100%; background-color: #efefef; padding: 15px; border-radius: 8px;
}

.form-sub-title {
    color: #008db5; font-size: 1.1em; font-weight: bold; margin-top: 30px; margin-bottom: 10px;
}

.form-sub-sub-title {
    color: #008db5; font-size: 1.0em; font-weight: bold; margin-top: 30px; margin-bottom: 10px; line-height: 1.5em;
}

.form-column-title {
    color: #000; font-size: 1.0em; font-weight: normal; vertical-align: top; padding: 0px 0px 10px 0px; text-align: center; font-weight: normal;
}

.form-column-input {
    vertical-align: top; text-align: center;
}

.form-buttons {
    width: 100%; text-align: right; margin-top: 30px;
}

.toelichting {
    background-color: var(--edit-item); margin-top: 3px; margin-bottom: 30px; padding: 12px 15px 12px 15px; font-size: 0.9em; border-radius: 8px; border: 0px solid #ddd;
}

.tip {
    background-color: var(--edit-item); margin-bottom: 20px; padding: 15px; font-size: 0.9em; border-radius: 8px; display: none;
}

.input-amount {
    text-align: right; width: 70%; max-width: 150px; /*margin: 0px 10px 0px 10px;*/
}

.amount-icon {
    color: #999; margin: 2px;
}

.title-icon {
    margin: 0px 20px 0px 0px;
}

.span-ok-volgende {
    margin: 0px 0px 0px 0px; float: right; text-align: right; font-size: 1.2em;
/*    float: right; margin: -6px -10px 0px 0px;*/
}
.span-ok-volgende:hover {
    cursor: pointer !important;
}


.back-icon {
    margin: 0px 40px 0px 0px;
    color: #008db5;
    cursor: pointer;
    padding: 10px 40px 10px 10px;
    margin: -10px -10px;
    transition: var(--main-header-transition);
}

.back-icon:hover {
    color: #000;
}

.forward-icon {
    margin: 0px 0px 0px 40px;
/*    color: #fff;*/
    padding: 5px 10px 5px 40px;
    margin: -10px -10px;
/*    transition: var(--main-header-transition);*/
}

.forward-icon:hover {
/*    color: #000;*/
}



.menu-icon {
    margin: 0px 2px 0px 0px; color: #666;
}

.form-container-medium {
    width: 100%; max-width: 800px; padding: 0px 0px 20px 0px;
}

.div-rapport {
    font-size: 1.0em; max-width: 768px;
}

.rapport-title {
    font-weight: bold; font-size: 1.4em; margin-bottom: 30px;
}

.rapport-bedrijfsnaam {
    font-weight: bold; font-size: 1.2em; margin-bottom: 80px;
}

.rapport-paragraaf {
    font-weight: normal; font-size: 1.1em; margin-top: 80px; margin-bottom: 20px; text-transform: uppercase; 
}

.rapport-rubriek {
    font-weight: bold; font-size: 1.0em; margin-bottom: 10px; 
}

.table-rapport {
    width: 100%; margin-bottom: 20px; 
}

.table-rapport tr {
    line-height: 1.8em; 
}

.table-td-rubriek-rapport {
    width: 55%; padding-left: 0px; font-weight: bold; column-span: all;
}

.table-td-text-rapport {
    width: 55%; padding-left: 20px; vertical-align: top;
}

.table-td-text-grandtotal-rapport {
    width: 75%; padding-left: 0px; font-size: 1.1em; font-weight: bold;  vertical-align: top;
}

.table-td-grandtotal-rapport {
    width: 25%; text-align: right; font-size: 1.1em; font-weight: bold;  vertical-align: bottom; border-top: 1px solid gray;
}

.table-td-sub-rapport {
    width: 20%; text-align: right; vertical-align: bottom;
}

.table-td-empty-total-rapport {
    width: 20%; 
}

.table-td-sign-total-rapport {
    width: 5%; text-align: center;
}

.table-td-total-rapport {
    width: 20%; text-align: right; font-weight: normal;  vertical-align: bottom; border-top: 1px solid gray;
}

.div-modal-small {
    display: none;
    position: fixed;
    top: 260px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50%; 
    background-color: rgba(255, 255, 255, 1);
    /*rgba(255, 208, 170, 1);  /* rgba(241, 241, 241, 1);*/
    border: 1px solid #bbb;
    text-align: center; 
    padding: 20px; 
    margin-bottom: 10px;
    min-height: 50px;
    min-width: 200px;
    max-width: 400px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 10000;
    border-radius: 5px;
}

.div-modal-medium {
    display: none;
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50%; 
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #bbb;
    text-align: left; 
    padding: 15px; 
    margin-bottom: 10px;
    min-height: 300px;
    min-width: 500px;
    max-width: 800px;
    height: calc(100vh - 140px); overflow-x: hidden; overflow-y: auto;    
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 10000;
    border-radius: 5px;
}

.div-modal-medium-block {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50%; 
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #bbb;
    text-align: left; 
    padding: 15px; 
    margin-bottom: 10px;
    min-height: 300px;
    min-width: 500px;
    max-width: 800px;
    height: calc(100vh - 140px); overflow-x: hidden; overflow-y: auto;    
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 10000;
    border-radius: 5px;
}


.close-button {
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    color: #008db5;
    top: -8px;
    right: -2px;    
    cursor: pointer;
    padding: 20px 20px 20px 20px;
    border-radius: 50px;
/*    transition: var(--main-header-transition);*/
}

.close-button:hover {
    color: #000;
}


.div-background {
    width: 100%; 
    height: calc(100vh); 
    background-color: black; 
    opacity: 0.4; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
}

.div-modal-background {
    display: none;
    width: 100%; 
    height: 100%; 
    background-color: black; 
    opacity: 0.4; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
}


/*
.div-modal-background:hover {
    width: 100%; 
    height: calc(100vh); 
    background-color: black; 
    opacity: 0.5; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
}
*/

.modal-message {
/*    background-color: rgba(255, 255, 255, 1);*/
    color: #333;
    font-size: 1em;
    font-weight: normal;
    margin: 0px 0px 25px 0px;
    
}

.message-container {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50%; 
    background-color: var(--thin-red); 
    border: 1px solid #bbb;
    text-align: center; 
    padding: 6px; 
    margin-bottom: 10px;
    min-height: 100px;
    min-width: 280px;
    max-width: 500px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 20;
    border-radius: 5px;
}

.text-popup {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80%; 
    height: 300px;
    background-color: #f1f1f1; 
    border: 1px solid #bbb;
    padding: 5px; 
/*    margin-bottom: 30px;*/
    min-height: 100px;
    min-width: 280px;
    max-width: 500px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 10;
    border-radius: 5px;
    display: none;
   
}

.text-popup-textarea {
  width: 100%;
  height: 85%;
/*  height: calc(100% - 44px);*/
  padding: 5px 5px;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;*/
  background-color: #fff;
  resize: none;
}

.message-text {display: block; padding: 20px;} 
.message-buttons {display: block; margin: 5px;} 

.common-grey-box {
    background-color: #f2f2f2; 
    width: 100%; 
    margin: 20px 20px 20px 0px; 
    padding: 10px 20px 10px 20px; 
    border-radius: 10px;
    /*border: 1px solid var(--base-blue);*/
}  

.common-bordered-box {
    width: 100%; 
    margin: 20px 20px 20px 0px; 
    padding: 10px 20px 10px 20px; 
    border-radius: 10px;
    border: 1px solid #eee
}  

.fieldset-light-grey {
    border-radius: 10px;
    border: 1px solid #eee
    
    
}


/* MEDIA QUERIES MAIN HEADER */
@media (min-width: 768px) {
    .main-header-menu {display: flex;}
    .side-menu {display: none;}
    .side-menu-main-item {display: none;}
    .main-header-side-menu-button {display: none;}
    .field-label, .field-data {display: table-cell;}   
    .table-header {display: table;}
    .table-title-row {display: none; margin-bottom: 0px;}
    .table-td, .field-label, .field-data {display: table-cell; min-width: 0px; margin-bottom: 0px;}
    .table-title-header {display: table-cell; min-width: 0px;}
    .display-small-only {display: none;}
}

@media (max-width: 767px) {
    .page-body {padding: 105px 15px 15px 15px;}
/*    .table-row {width: 100%; font-size: 1.1em;}
    .table-row-clean {width: 100%; font-size: 1.1em;}*/
    .table-title-row {margin-bottom: -4px;}
    .field-label {margin-bottom: 4px;}
    .display-wide-only {display: none;}
}