div.label {
    display:inline-block;
    min-width:250px;
    font-style:italic;
}
form.filters {
    font-size:10pt;
}

form.filters > div.open-filter-opties {
    cursor:pointer;
}
form.filters > div.open-filter-opties div.filter-categorieen {
    display:inline-block;
}
form.filters > div.open-filter-opties div.filter-categorieen a { 
    text-decoration:none;
    cursor:pointer;
}
form.filters div.filter-panel {
    display:none;
    padding:20px;
}
form.filters > div.filter-opties .tabs.ui-widget-content {
    border:0;
}

#gebruikers-overzicht .fa-spinner {
    font-size:20px;
}
#gebruiker-gegevens-lidmaatschap input[type=radio] {
    width:22px;
}
.gebruiker-lidmaatschap-vertegenwoordigd {
    display:none;
    margin-left:24px;
}
.gebruiker-is-zzp,
.gebruiker-niet-zzp {
    display:none;
}
.gebruiker-is-zzp.active,
.gebruiker-niet-zzp.active {
    display:block;
}

ul#dossiers-lijst li:hover .fas.fa-trash {
    display:block;
    float:right;
    cursor: pointer;
    margin-right:20px;
}
ul#dossiers-lijst.bewerk-lijst.icoon-lijst li {
    padding-left:0;
}@-webkit-keyframes passing-through {
    0% {
	opacity: 0;
	-webkit-transform: translateY(40px);
	-moz-transform: translateY(40px);
	-ms-transform: translateY(40px);
	-o-transform: translateY(40px);
	transform: translateY(40px); }
    30%, 70% {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px); }
    100% {
	opacity: 0;
	-webkit-transform: translateY(-40px);
	-moz-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
	-o-transform: translateY(-40px);
	transform: translateY(-40px); } }
@-moz-keyframes passing-through {
    0% {
	opacity: 0;
	-webkit-transform: translateY(40px);
	-moz-transform: translateY(40px);
	-ms-transform: translateY(40px);
	-o-transform: translateY(40px);
	transform: translateY(40px); }
    30%, 70% {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px); }
    100% {
	opacity: 0;
	-webkit-transform: translateY(-40px);
	-moz-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
	-o-transform: translateY(-40px);
	transform: translateY(-40px); } }
@keyframes passing-through {
    0% {
	opacity: 0;
	-webkit-transform: translateY(40px);
	-moz-transform: translateY(40px);
	-ms-transform: translateY(40px);
	-o-transform: translateY(40px);
	transform: translateY(40px); }
    30%, 70% {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px); }
    100% {
	opacity: 0;
	-webkit-transform: translateY(-40px);
	-moz-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
	-o-transform: translateY(-40px);
	transform: translateY(-40px); } }
@-webkit-keyframes slide-in {
    0% {
	opacity: 0;
	-webkit-transform: translateY(40px);
	-moz-transform: translateY(40px);
	-ms-transform: translateY(40px);
	-o-transform: translateY(40px);
	transform: translateY(40px); }
    30% {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px); } }
@-moz-keyframes slide-in {
    0% {
	opacity: 0;
	-webkit-transform: translateY(40px);
	-moz-transform: translateY(40px);
	-ms-transform: translateY(40px);
	-o-transform: translateY(40px);
	transform: translateY(40px); }
    30% {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px); } }
@keyframes slide-in {
    0% {
	opacity: 0;
	-webkit-transform: translateY(40px);
	-moz-transform: translateY(40px);
	-ms-transform: translateY(40px);
	-o-transform: translateY(40px);
	transform: translateY(40px); }
    30% {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px); } }
@-webkit-keyframes pulse {
    0% {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1); }
    10% {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1); }
    20% {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1); } }
@-moz-keyframes pulse {
    0% {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1); }
    10% {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1); }
    20% {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1); } }
@keyframes pulse {
    0% {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1); }
    10% {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1); }
    20% {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1); } }
.dropzone, .dropzone * {
    box-sizing: border-box; }

.dropzone {
    min-height: 150px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    background: white;
    padding: 40px 54px; 
    height: calc(100vh - 54px);
}
.dropzone.dz-clickable {
    cursor: pointer; }
.dropzone.dz-clickable * {
    cursor: default; }
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
    cursor: pointer; }
.dropzone.dz-started .dz-message {
    display: none; }
.dropzone.dz-drag-hover {
    border-style: solid; }
.dropzone.dz-drag-hover .dz-message {
    opacity: 0.5; }
.dropzone .dz-message {
    text-align: center;
    margin: 2em 0; }
.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px; }
.dropzone .dz-preview:hover {
    z-index: 1000; }
.dropzone .dz-preview:hover .dz-details {
    opacity: 1; }
.dropzone .dz-preview.dz-file-preview .dz-image {
    border-radius: 20px;
    background: #999;
    background: linear-gradient(to bottom, #eee, #ddd); }
.dropzone .dz-preview.dz-file-preview .dz-details {
    opacity: 1; }
.dropzone .dz-preview.dz-image-preview {
    background: white; }
.dropzone .dz-preview.dz-image-preview .dz-details {
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear; }
.dropzone .dz-preview .dz-remove {
    font-size: 14px;
    text-align: center;
    display: block;
    cursor: pointer;
    border: none; }
.dropzone .dz-preview .dz-remove:hover {
    text-decoration: underline; }
.dropzone .dz-preview:hover .dz-details {
    opacity: 1; }
.dropzone .dz-preview .dz-details {
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    font-size: 13px;
    min-width: 100%;
    max-width: 100%;
    padding: 2em 1em;
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
    line-height: 150%; }
.dropzone .dz-preview .dz-details .dz-size {
    margin-bottom: 1em;
    font-size: 16px; }
.dropzone .dz-preview .dz-details .dz-filename {
    white-space: nowrap; }
.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: 1px solid rgba(200, 200, 200, 0.8);
    background-color: rgba(255, 255, 255, 0.8); }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
    overflow: hidden;
    text-overflow: ellipsis; }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
    border: 1px solid transparent; }
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 0 0.4em;
    border-radius: 3px; }
.dropzone .dz-preview:hover .dz-image img {
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-filter: blur(8px);
    filter: blur(8px); }
.dropzone .dz-preview .dz-image {
    border-radius: 20px;
    overflow: hidden;
    width: 120px;
    height: 120px;
    position: relative;
    display: block;
    z-index: 10; }
.dropzone .dz-preview .dz-image img {
    display: block; }
.dropzone .dz-preview.dz-success .dz-success-mark {
    -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview.dz-error .dz-error-mark {
    opacity: 1;
    -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px; }
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
    display: block;
    width: 54px;
    height: 54px; }
.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear; }
.dropzone .dz-preview.dz-complete .dz-progress {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in; }
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    -webkit-animation: pulse 6s ease infinite;
    -moz-animation: pulse 6s ease infinite;
    -ms-animation: pulse 6s ease infinite;
    -o-animation: pulse 6s ease infinite;
    animation: pulse 6s ease infinite; }
.dropzone .dz-preview .dz-progress {
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: absolute;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-top: -8px;
    width: 80px;
    margin-left: -40px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-transform: scale(1);
    border-radius: 8px;
    overflow: hidden; }
.dropzone .dz-preview .dz-progress .dz-upload {
    background: #333;
    background: linear-gradient(to bottom, #666, #444);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    -webkit-transition: width 300ms ease-in-out;
    -moz-transition: width 300ms ease-in-out;
    -ms-transition: width 300ms ease-in-out;
    -o-transition: width 300ms ease-in-out;
    transition: width 300ms ease-in-out; }
.dropzone .dz-preview.dz-error .dz-error-message {
    display: block; }
.dropzone .dz-preview.dz-error:hover .dz-error-message {
    opacity: 1;
    pointer-events: auto; }
.dropzone .dz-preview .dz-error-message {
    pointer-events: none;
    z-index: 1000;
    position: absolute;
    display: block;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    font-size: 13px;
    top: 130px;
    left: -10px;
    width: 140px;
    background: #be2626;
    background: linear-gradient(to bottom, #be2626, #a92222);
    padding: 0.5em 1.2em;
    color: white; }
.dropzone .dz-preview .dz-error-message:after {
    content: '';
    position: absolute;
    top: -6px;
    left: 64px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #be2626; }

#dropzone {
    margin-bottom: 3rem; 
}

.dropzone {
    border: 2px dashed #e71071;
    border-radius: 5px;
    background: white; }
.details-info-panel.upload .dropzone {
    height:auto;
}
.dropzone .dz-message {
    font-weight: 400; }
.dropzone .dz-message .note {
    font-size: 0.8em;
    font-weight: 200;
    display: block;
    margin-top: 1.4rem; }

*, *:before, *:after {
    /* box-sizing: border-box; */
}.a4 {
    position:relative;
    width:840px;
    min-height:1205px;
    background:white;
    margin:20px 20px 100px 20px;
    padding:20px;
    border:1px solid #ddd;
    background-size:cover;
    background-position:center center;
}
.a4 .logo img {
    max-width:60%;
}
.a4 .labels ul, .data ul {
    list-style:none;
    margin:0;
    padding:0;
}
.a4 .labels ul li, .data ul li {
    padding:0;
    margin:0;
    line-height:20px;
    height:16px;
    font-size:9pt;
    display:block;
    vertical-align:top;
}
.a4 .labels {
    position: absolute;
    left: 650px;
    top: 30px;
    z-index: 1;
    font-size: 9pt;
}
.a4 .labels img {
    width:15px;
    height:15px;
    vertical-align:top;
}
.a4 .data {
    position:absolute;
    right:30px;
    top:30px;
    z-index:1;
    text-align:right;
}
.a4 .footer  {
    position:absolute;
    left:30px;
    width:100%;
    bottom:20px;
    z-index:2;
    text-align:center;
    font-size:9pt;
    font-family: 'Source Sans Pro Light';
}
.a4 .footer p {
    margin:0;
    padding:0;
}
.a4 .footer img {
    display:block;
    width:300px;
    margin:auto;
    margin-bottom:10px;
}
.a4 .container.mt-5 {
    padding:30px;
    padding-top:60px;
    line-height:4mm;
}
.a4 table {
    padding:0;
    margin:0;
}
.a4 table tr {
    padding:0;
    margin:0;
}
.a4 table tr th {
    font-weight:normal;
    text-align:left;
    border-bottom:1px solid #000000;
}
.a4 table tr td {
    margin:0;
    padding:0;
}

.a4 table.factuurregels tr td {
    padding:0 5px;
}

.a4 table.factuurgegevens tr td.kolom1 {
    width:500px;
}
.a4 table.factuurgegevens tr td.kolom2 {
    width:170px;
}
.a4 table.factuurgegevens tr td.kolom3 {
    width:170px;
    text-align:right;
}
.a4 table.factuurregels tr th.kolom1 {
    width:100px;
    font-weight:bold;
    padding:3px;
}
.a4 table.factuurregels tr th.kolom2 {
    width:440px;
    font-weight:bold;
    padding:3px;
}
.a4 table.factuurregels tr th.kolom3 {
    width:100px;
    font-weight:bold;
    padding:3px;
}
.a4 table.factuurregels tr th.kolom4 {
    width:100px;
    font-weight:bold;
    padding:3px;
}
.a4 table.factuurregels tr td.kolom1 {
}
.a4 table.factuurregels tr td.kolom2 {
}
.a4 table.factuurregels tr td.kolom3 {
    text-align:left;
}
.a4 table.factuurregels tr td.kolom4 {
    text-align:left;
}
.a4 table.factuurregels tr td.kolom5 {
    width: 0px;
    display: inline-block;
}
.a4 table.factuurregels tr td.kolom3 div.euro,
.a4 table.factuurregels tr td.kolom4 div.euro,
.a4 table.factuurregels tr td.kolom5 div.euro {
    float:left;
}
.a4 table.factuurregels tr td.kolom3.totaallijn {
    border-bottom:1px solid #000000;
    
}
.a4 table.factuurregels tr td.kolom5.totaallijn {
    border-bottom:1px solid #000000;
    width:100%;
}
.a4 table.factuurregels tr td.kolom5.rijtotaal {
    position:relative;
}
.a4 table.factuurregels tr td.kolom5 i.fa-times {
    display:none;
    cursor:pointer;
}
.a4 table.factuurregels tr:hover td.kolom5 i.fa-times {
    display:block;
}

.a4 p.melding-rood {
    text-align:right;
}

.a4 div.melding-rood {
    display:inline-block;
    float:right;
    border:2px solid #ff9900;
    padding:10px;
    margin:10px 0;
}
.factuur-template {
    margin: 40px 0;
    padding: 40px;
    border: 1px solid #636363;
}
.factuur-template textarea,
.factuur-template input {
    text-align:left;
}

div.factuur-template .nieuwe-factuur-regel table tr td {
    padding:5px;
    vertical-align:top;
}

.factuur-template .factuur-prijs {
    display:inline-block;
}

.factuur-template .factuur-periodiek,
.factuur-template .factuur-eenmalig,
input[name='factuur[periodeTot]'] {
    display:none;
}


.factuur-template .button-factuur-bijlagen {
    display:none;
}

ul#factuur-bijlagen li .fa-times {
    cursor:pointer;
}

ul.bewerk-lijst li div.status {
    float:right;
    margin-right:20px;
    font-style:italic;
        
}

ul#facturen-openstaand li:hover .fas.fa-trash {
    display:block;
    float:right;
    cursor: pointer;
    margin-right:20px;
}

.kolom1,.kolom2,.kolom3,.kolom4,.kolom5 {
    padding:1px;
}
.kolom1.kolomheader,
.kolom2.kolomheader,
.kolom3.kolomheader,
.kolom4.kolomheader {
    width:100px;
    padding:1px;
    border-bottom: 1px solid #636363;
}
.kolom2.kolomheader {
    width:300px;
    max-width:100mm;
}

.kolom4.kolomheader {
    width:100px;
}
.euro {
    margin:0 5px 0 0;
}
a.factuur-link.openModal {
    display:block;
    font-weight:normal;
    padding-left:10px;
    padding-right:10px;
}
ul.bewerk-lijst > li a.factuur-link.openModal:hover {
    color:#000000;
}header {
    background-color:white;
    padding:10px;
}
nav#user-menu {
    display: inline-block;
    position: absolute;
    color: black;
    top: 0;
    right: 0;
    padding: 10px 30px 10px 10px;
    /* line-height: 30px; */
    min-width:390px;
}
nav#user-menu menu {
    height: 0;
    margin: 0;
    padding: 0;
}
nav#user-menu menu menuitem {
    line-height: 68px;
    cursor:pointer;
    padding: 0 10px;
    position:relative;
}
nav#user-menu menu menuitem {
    border-left:1px solid #202020;
}
nav#user-menu menu menuitem .counter {
    position:absolute;
    top:0;
    left:17px;
    margin-top:-5px;
    text-align:center;
    width:15px;
    height:15px;
    line-height:15px;
    
}
nav#user-menu menu menuitem:first-child {
    border-left:1px solid #fff;
}
a {
    cursor:pointer;
}
nav#user-menu menu menuitem a:link,
nav#user-menu menu menuitem a:visited,
nav#user-menu menu menuitem a:hover,
nav#user-menu menu menuitem a:active,
nav#user-menu menu menuitem a {
    color:#000;
    text-decoration:none;
}
nav#user-menu menu menuitem a,
nav#main-menu menu menuitem a:link,
nav#main-menu menu menuitem a:visited,
nav#main-menu menu menuitem a:hover,
nav#main-menu menu menuitem a:active,
nav#main-menu menuitem a {
    color:#666;
    text-decoration:none;
}
nav#main-menu menu {
    margin: 0;
    padding: 0;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
}
nav#main-menu menu menuitem {
    border-left:1px solid #e5e5e5;
	border-bottom: 2px solid #fff;
    padding:10px 30px;
    display: inline-block;
    margin:0;
    color:#858585;
}
nav#main-menu menu menuitem.active,
nav#main-menu menu menuitem:hover {
    border-bottom: 2px solid #000;
	cursor:pointer;
}
nav#main-menu menu menuitem.active a,
nav#main-menu menu menuitem.active a:link,
nav#main-menu menu menuitem.active a:visited,
nav#main-menu menu menuitem.active a:hover,
nav#main-menu menu menuitem.active a:active {
    color:#000;
}
nav#main-menu menu menuitem:first-child {
    border-left:1px solid #fff;
}
nav#main-menu {
    margin: 0;
    padding: 0;
    text-align: center;
    background: white;
    border-top: 1px solid #e5e5e5;
    flex-wrap: wrap
}

menuitem div.counter {
    display: inline-block;
    background: red;
    width: 20px;
    height: 20px;
    color: white;
    font-size: 9px;
    border-radius: 50% 50%;
    line-height: 20px;
    vertical-align: middle;
    margin-left: 5px;
}

.menu-box {
    position: absolute;
    top: 50px;
    left: 50%;
    transform:translate(-50%, 0);
    width: 300px;
    min-height: 200px;
    background-color: white;
    box-shadow: 0 0px 15px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 2;
    display:none;
}
.menu-box::after{
    content: '';
    position: absolute;
    left: 50%;
    transform:translate(-50%, 0);
    top: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #fff;
    clear: both;
    margin-top: -20px;
}
.menu-box #menu-instellingen-meer {
    background-color:#f5f5f5;
    line-height:40px;
    width:100%;
    text-align:center;
    position:absolute;
    bottom:0;
    display:block;
}
.menu-box #menu-instellingen-meer:hover {
    background-color:#e5e5e5;
} 
.menu-box-content {
    padding:15px;
}
.menu-box-content ul {
    list-style:none;
    padding:0;
    margin:0;
}
.menu-box-content ul li {
    padding:5px 0;
    border-bottom:1px dashed #f5f5f5;
}
nav#user-menu menu menuitem .menu-box-content {
    line-height: normal;
}

/* Submenu */
nav#main-menu menu menuitem {
    position:relative;
}
nav#main-menu menu menuitem .submenu {
    position: absolute;
    left: 0;
    top: 42px;
    background: white;
    z-index: 3;
    text-align:left;
    display:none;
}
nav#main-menu menu menuitem:hover .submenu {
    display:block;
}
nav#main-menu menu menuitem .submenu menuitem  {
    margin:0;
    display:block;
    border:0px solid #fff;
    border-bottom:2px solid #fff;
}
nav#main-menu menu menuitem .submenu menuitem:hover {
    border-bottom: 2px solid #000;
} 
nav#main-menu menu menuitem.has-submenu:hover {
    border-bottom:2px solid #fff;
}

menuitem i.fa-chevron-down {
    font-size:6pt;
    vertical-align: middle;
}

nav#user-menu-mobile,nav#user-menu-mobile-panel {
    display:none;
}
@media only screen and (max-width: 1024px) {
   
    header {
	position:relative;
    }
    header #logo img {
	max-width:50vw;
    }
    
    nav#main-menu menu {
	overflow: hidden;
    }

    nav#user-menu, nav#main-menu,nav#user-menu-mobile-panel {
	display:none;
    }
   
    nav#user-menu-mobile {
	display:block;
	position:absolute;
	top:50%;
	right:2.5vh;
	transform:translate(0,-50%);
	
    }
    
    nav#user-menu-mobile i.fas {
	cursor:pointer;
	font-size:2.5vh;
	margin:0 1vh;
    }
   nav#main-menu-mobile {
       position:absolute;
       left:0;
       width:80vw;
       background:white;
       padding:10vw
   }
   nav#main-menu, nav#user-menu-mobile-panel {
       position: fixed;
	z-index: 10000;
	height: 100vh;
	width: 100vw;
	background:white;
   }
   nav#main-menu menu,nav#main-menu menu menuitem {
       display:block;
       text-align: left;
       border-bottom:1px solid #e5e5e5;
   }
   nav#user-menu-mobile-panel menu {
       margin:0;
       padding:0;
   }
   nav#user-menu-mobile-panel menu menuitem {
       border-bottom:1px solid #e5e5e5;
       padding:10px 30px;
       display:block;
   }
      nav#user-menu-mobile-panel menu menuitem ul li {
	  padding:10px 10px;
      }
}
.fa-check.unchecked {
    color:#e5e5e5;
}
.fa-check.checked {
    color:#009900;
}

.fas.label,
.far.label {
    width:25px;
}

.fa.small,
.fas.small,
.far.small {
    font-size: 6pt;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}
.pricing-table-wrap {
    width:25%;
    display:inline-block;
    vertical-align:top;  
    margin: 20px 0;
    transition:all .3s;
}

.pricing-table-wrap.hover-effect:hover {
    transform: scale(1.03);
    transition:all .3s;
    cursor:pointer;
}
.pricing-table-wrap .button.fullwidth {
    margin: 20px 10px;
    width: calc(100% - 33px);
}
.pricing-table-wrap .button.fullwidth.dimmed,
.pricing-table-wrap ul.pricing-table-col-vinkjes li .first-table-item.dimmed {
    transform: scale(1);
    background:#a5a5a5;
}
.pricing-table-wrap:hover .button.fullwidth.dimmed,
.pricing-table-wrap:hover ul.pricing-table-col-vinkjes li .first-table-item.dimmed {
    background:#636363;;   
}
.pricing-table-wrap .button.fullwidth.shadow {
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important
}
.pricing-table-wrap.first {
     width:40%;
     max-width: 450px;
}
.pricing-table-wrap ul li {
    line-height:40px;
    border-left: 1px solid #636363;
    border-right: 1px solid #636363;
    border-bottom: 1px solid #636363;
    border-color:#757575;
    margin:0;
    padding:0;
    color: #303030;
    background:white;
}
.pricing-table-wrap ul.shadow {
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important
}
.pricing-table-wrap ul li.first {
    border-radius: 3px 3px 0 0;
}
.pricing-table-wrap ul li.last {
    border-radius:  0 0 3px 3px;
}

.pricing-table-wrap .first-table-item {
    min-height:50px;
}
.pricing-table-wrap ul {
    margin:0;
    padding:0;
    margin-left:10px;
    border-radius:3px;
}
.pricing-table-wrap ul.pricing-table-col-omschrijving {
    
}
.pricing-table-wrap ul.pricing-table-col-omschrijving li {
    border: 0px solid #636363;
    border-bottom: 1px dashed #636363;
}
.pricing-table-wrap ul.pricing-table-col-vinkjes li .first-table-item {
    background:#747474;    
    line-height:70px;
}
.pricing-table-wrap .first-table-item h3 {
    font-size: 18px;
    margin: 0;
    padding: 0;
    line-height: 60px;
    color:#fff;
}
.pricing-table-col-omschrijving {
    text-align:right;
}
.pricing-table-col-vinkjes {
    text-align:center;
    border-radius:3px;
}
.pricing-table-wrap ul.pricing-table-col-vinkjes  li.even {
    background-color: #f9f9f9;
}

.issuer {
    display:inline-block;
    padding:10px;
    border-radius:3px;
    border:1px solid #e5e5e5;
    margin:20px;
    text-align:center;
    width:80px;
    height:80px;
    vertical-align:top;
    overflow:hidden;
}
.issuer:hover {
    background:#f5f5f5;
    
    cursor:pointer;
}
.issuer img {
    margin:10px auto
}
.issuer.selected {
    border:1px solid #636363;
    
}

.button.betalen {
    display:none;
}ul {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    margin:0;
    padding:0;
    position:relative;
}

/* soorten lijsten */
ul.bewerk-lijst {
    padding: 0;
}
ul.bewerk-lijst > li {
    padding:10px 0;
}
ul.bewerk-lijst li i.fa-trash {
    display:none;
}
ul.bewerk-lijst > li > ul > li:hover i.fa-trash {
    display:inline-block;
    cursor:pointer;
}
ul.bewerk-lijst li i.fa-star,
table.bewerk-lijst tr i.fa-star {
    transition: all .1s ease-in-out; 
}
ul.bewerk-lijst li i.fa-star:hover,
table.bewerk-lijst tr i.fa-star:hover{
    transform: scale(1.4); 
    transition: all .1s ease-in-out; 
}
ul.bewerk-lijst li i.fa-star.small:hover,
table.bewerk-lijst tr i.fa-star.small:hover {
    transform: scale(1); 
}
ul.bewerk-lijst div.inline-block {
    vertical-align: top;
    
}
ul.bewerk-lijst div.inline-block i {
    margin:0;
}
ul.bewerk-lijst > li > div {
    display:inline-block;
}

ul.bewerk-lijst.icoon-lijst li {
    background-repeat:no-repeat;
    padding-left:40px;
    background-size: 20px 20px;
    background-position: 10px 10px;
}
ul.bewerk-lijst > li > div.status {
    float:right;
    font-size: 12px;
    vertical-align: middle;
    margin-top:2px;
    margin-right: 10px;

}
ul.bewerk-lijst > li > div.datum {
    font-style:italic;
    font-size: 12px;
    vertical-align: middle;
    margin-bottom:3px;
    width:140px;
}
ul.bewerk-lijst > li a {
    text-decoration:none;
    font-weight:bold;
    color:#000;
}
ul.bewerk-lijst > li a.button.small,
ul.bewerk-lijst > li a.button.small:hover {
    color:white;
    cursor:pointer;
    font-weight:normal;
}

ul.bewerk-lijst > li a:hover {
    color:#404040;
}
table.bewerk-lijst {
    border-spacing: 0px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
}
table.bewerk-lijst tr th {
    background-color:#636363;
    padding:5px 3px;
    color:white;
}
table.bewerk-lijst tr.rij:hover,
ul.bewerk-lijst > li:hover,
table.bewerk-lijst tr.rij.active,
ul.bewerk-lijst > li.active {
    background-color:#f5f5f5;
    cursor:pointer;
 
}
table.bewerk-lijst tr td {
    padding:5px 0;
}
table.bewerk-lijst tr.details,
table.bewerk-lijst tr.details td {
    background-color:#f5f5f5;
    padding:0;
}

table.bewerk-lijst tr.details div.details-panel {
    display:none;
    padding:5px 0;
}
table.bewerk-lijst tr.details div.details-panel h3 {
    font-size:20px;
}
table.bewerk-lijst tr.details div table tr td {
    vertical-align:top;
}
table.bewerk-lijst tr.details div table tr td label {
    display:inline-block;
    min-width:5vw;
    
}
ul.bewerk-lijst li.verwijderd {
    opacity:.4;
}
ul.bewerk-lijst li.verwijderd:after{
    border-top:1px solid black;
    display:block;
    content:"";
    margin-top: -25px;
    margin-bottom: 17px;
}
ul.vink-lijst {
    list-style:none;
    list-style-type: none;
    margin:0;
    padding:0
}
ul.vink-lijst > li > ul > li > ul {
    margin-left: 50px;
    display:none;
}
ul.link-lijst {
    list-style:none;
    list-style-type: none;
    margin:0;
    padding:0;
}
ul.link-lijst li {
    padding:5px 0;
    
}
ul.product-lijst {
    
}


ul.document-lijst {
    list-style:none;
    padding:0;
    margin:0;
}
ul.document-lijst li { 
    padding:5px 0;
    border-top:1px dashed #e5e5e5;
}
ul.document-lijst li .title {
    font-weight:bold;
}
ul.document-lijst li .date_created {
    padding-left:65px;
    font-style: italic;
    font-size:12px;
}
ul.document-lijst li.no-hover-effect .date_created {
    padding-left:35px;
}
ul.document-lijst li:first-child {
    border-top:1px dashed white;
}
ul.document-lijst li i.fa-bars, 
ul.document-lijst li i.fa-unlink {
    float:right;
    margin:0px;
    padding:15px;
    color:#e5e5e5;
    position:relative;
    padding-left: 50px;
}
ul.document-lijst li.no-hover-effect i.fa-unlink {
    color:#636363;
}
ul.document-lijst li.no-hover-effect i.fa-unlink:hover {
    color:#404040;
}
ul.document-lijst li:hover {
    background:#f5f5f5;
    cursor:pointer;
}
ul.document-lijst li.no-hover-effect:hover {
    background:none;
    cursor:default;
}
ul.document-lijst li:hover i.fa-bars {
    color:#404040;
    cursor:pointer;
}
ul.document-lijst li i.fa-bars div.submenu {
    width:200px;
    font-family:"open sans", HelveticaNeue, "Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif;
    font-size:15px;
    min-width:200px;
    min-height:30px;
    background: white;
    box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2), 0 5px 10px 0 rgba(0, 0, 0, 0.19);
    position:absolute;
    top:100%;
    right:0;
    display:none;
    z-index:2;
    padding:0;
}
ul.document-lijst li i.fa-bars div.submenu ul {
    padding:0;
    margin:0;
    list-style:none;
}
ul.document-lijst li i.fa-bars div.submenu ul li {
    margin:0;
    padding:15px;
}
ul.document-lijst li i.fa-bars:hover div.submenu {
    display:block;
}
ul.document-lijst .row .fas,
ul.document-lijst .row .far {
    cursor:pointer;
    display: inline-block;
    width:20px;
}
ul.document-lijst .row .far.fa-circle {
    
}
ul.document-lijst .row .fas.fa-check-circle {
    color:#009900;   
}

// vink lijsten
ul.vink-lijst.opties-hoofdcategorie {
    
}

div.kaartenbak {
    column-count: 3;
    padding:0 20px;
}
div.kaartenbak ul li {
    min-height:100px;
    display: inline-block;
    width: 100%;
    vertical-align:top;
}@font-face {
    font-family: "asap";
    src: url("../fonts/asap-regular.ttf");
}
@font-face {
    font-family: "asap";
    src: url("../fonts/asap-bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "asap";
    src: url("../fonts/asap-regular.ttf");
    font-weight: semibold;
}

/* HTML Elements */
body, html {
    color: #444;
    font-family:"open sans", HelveticaNeue, "Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif;
    margin:0;
    padding:0;
    height:100%;
    font-size:15px;
}
body {
    background-image: url(../images/omgevingshuis-back-blur.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: center center;
}
a,
a:link,
a:hover,
a:active,
a:visited {
    color: #636363;
    outline: 0;
    text-decoration: underline;
}
a:hover {
    text-decoration: underline;
}
h1,h2,h3,h4,h5 {
    font-family: 'asap','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif;
}
h1,h3 {
    font-weight: normal;
    line-height: initial;
    margin: 0 0 20px 0;
    font-size:40px;
}
h2 {
    padding: 0;
    margin: 0;
    font-weight: 300;
}
h3  {
    font-size:30px;
}
hr{
    border-top:1px solid #e5e5e5
}
section {
    max-width: 90vw;
    margin:auto;
    position: relative;
    padding:5vh;
    display:none;
}
section > article {
    display: tablecell;
    vertical-align:top;
    padding:30px;
    min-height:400px;
    color:#000000;
    background-color:#fff;
    border-radius: 3px;
}
section > article.fifty {
    width: calc(50% - 60px);
}
section > article.center {
    margin:auto;
}
section > h1 {
    color:white;
    margin: -20px 0px 70px 0px;
}
section > h1 > span.subtitle {
    font-size:15px;
}
article > h1 {
    margin:0;
    color:#222222;
}

article div {
    display:block;
}

i {
    font-size:14px;
    margin:0 5px;
}

p.hidden {
    display:none;
}
span.error,
p.error,
div.error {
    color:red;
}
p.errorBox,
div.errorBox {
    padding:20px;
    background: #fee5e5;
    display:inline-block;
}
div.errorBox a.button, p.errorBox a.button  {
    margin-left:20px;
}

sup.required,
form sup {
    color:red;
}
label {
    display: block;
    color: #000;
    padding: 5px 0;
    font-weight:bold;
}
@media only screen and (max-width: 1200px), (min-device-width: 768px) and (max-device-width: 1200px)  {
    section {
	display:block;
    }
    article,article.fifty {
	width:calc(100% - 60px);
	max-width:calc(100% - 60px);
	display:block;
	height:auto;
	min-height: max-content;
    }
}

@media only screen and (max-width: 768px) {
    section {
	display:block;
    }
    article,section > article.fifty {
	width:calc(100% - 60px);
	max-width:calc(100% - 60px);
	display:block;
	height:auto;
	min-height: max-content;
    }
}


/* BUTTONS */
.button,
a.button,
a.button:link,
a.button:hover,
a.button:active,
a.button:visited {
    color: #ffffff;
    background-color: #636363;
    text-decoration: none;
    display: inline-block;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius:3px;
    min-width: 139px;
    cursor: pointer;
    border-radius: 3px;
    padding: 7px 12px;
    width:auto;
    border:0px solid #fff;
    vertical-align: middle;
    font-size: 15px;
    line-height:25px
}
a.button.small,
a.button.small:link,
a.button.small:hover,
a.button.small:active,
a.button.small:visited  {
    line-height: 1em;
    min-width: auto;
    padding: 0px 6px;
    line-height:20px
}
a.button.small.right {
    float:right;
    
}
.button i {
    margin: 0 10px 0 5px;
}
.button:hover,
.button.small:hover {
    color: #ffffff;
    text-decoration:none;
    background-color:#707070;
}
.button.disabled,
.button.small.disabled {
    background:#909090;
}

section > .button, 
section > h1 > .button {
    color: #ffffff;
    background:none;
    text-decoration:none;
    padding:12px 15px;
    float:right;
    margin: -20px 0px 70px 0px;
}
section > .button:hover,
section > h1 > .button:hover {
    background:rgba(255,255,255,.3);
    cursor:pointer;
    padding:12px 15px;
    margin: -20px 0px 70px 0px;
}
section > h1 > .button {
    float:none;
    margin: 0 0 -10px 0;
    padding:6px 7px;
    min-width: initial;
}
section > h1 > .button:hover {
    margin: 0;
    padding:6px 7px;
    margin: 0 0 -10px 0;
    line-height:14px;
    min-width: initial;
}
section > h1 > .button i {
    margin:0 5px 0px 5px;
}
.button.submit.disabled {
    opacity:.5;
    cursor:default;
}

/* FORM ELEMENTS  */

input, textarea, select {
    font-size:15px;
}
input[type='text'],
input[type='input'], 
input[type='password'],
input[type='email'],
input[type='number'],
input[type='url'], 
input[type='tel'],
input[type='search'], 
textarea, 
select {
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;
    
    font-family: 'asap','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif;
    border-color: #e1e1e1;
    background-color: #f0f0f0;
    color: #444;
    padding: 10px;
}
input {
    border-radius: 3px;
    margin-top: 10px;
    border: 0px solid #fff;
    padding: 7px 10px;
}
input[type='text'].error,
input[type='input'].error, 
input[type='password'].error,
input[type='email'].error,
input[type='number'].error,
input[type='url'].error, 
input[type='tel'].error,
input[type='search'].error {
    background-color:#ffdcdc;
}
input.w25 {
    max-width:25px;
}
input.w50 {
    max-width:50px;
}
input.w75 {
    max-width:75px;
}
input.w100 {
    max-width:100px;
}
input.fw {
    width: calc(100% - 20px);
    margin: 10px 0;
}
input.hw {
    width: calc(50% - 22px);
    margin: 10px 0;
}
input.qw {
    width: calc(25% - 23px);
    margin: 10px 0;
}
.text_input {
    width: calc(100% - 60px);
    margin-bottom: 0;
    display: inline;
    min-width: 50px;
    padding: 13px;
    border-radius: 2px;
    border: 1px solid #e1e1e1;
}
textarea {
    width: calc(100% - 30px);
    min-height: 15vh;
    padding: 15px;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border:0px solid #fff;
}

/* COLUMNS */
.columns {
    columns:2;
    column-gap: 40px;
}
.column-one, .column-two {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    overflow:hidden;
}
.column-one > div, .column-two > div {
    margin-bottom:20px;
}
.column-one td,.column-two td {
    vertical-align:top;
}
ul.columns {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
@media only screen and (max-width: 768px)  {
    ul.columns {
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
	-moz-column-count: 1; /* Firefox */
	column-count: 1;
    }
}
@media only screen and (max-width: 1200px), (min-device-width: 768px) and (max-device-width: 1200px)  {
    ul.columns {
	-webkit-column-count:1; /* Chrome, Safari, Opera */
	-moz-column-count: 1; /* Firefox */
	column-count: 1;
    }
}
/* Font awesome override / add */
.fa.large, .fas.large {
    font-size:34px;
}
.fa.green,
.far.green,
.fas.green {
    color:#009900;
}
.fa.red,
.far.red,
.fas.red {
    color:#ff0000;
}
.fa.orange,
.far.orange,
.fas.orange {
    color:#ff9900;
}

/* Toggle Visibiliy Panels */
.toggleVisibilityPanel {
    padding:10px 0;
    margin:10px 0;
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
}

.right-panel,
.left-panel {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    max-width: 45%;
}

.yellow-label {
    background-color: cornsilk;
    border-radius:3px;
    padding:3px;
}
.spinnerWrapper {
    text-align:center;
}
.spinner {
    
}

.zoeken i.fa-search,
.open-filter-opties i.fa-filter {
    cursor:pointer;
}
form.filters > div.open-filter-opties {
    margin: 10px 0;
}
form.filters > div.open-filter-opties {
    display:inline-block;
}
form.filters > div.open-filter-opties div.filter-categorieen {
    display:none;
}
form.filters > div.open-filter-opties div.filter-categorieen {
    width:0;
    overflow:hidden;
}
form.filters > div.open-filter-opties div.filter-categorieen div {
    display: inline-block;
    width:auto;
    min-width: 300px;

}
.zoeken {
    display:inline-block;
}
.zoeken-icon, .zoeken-input, .filter-tijd {
    display:inline-block;
    vertical-align: middle;
}
.filter-tijd div div {
    min-width:300px;
    display:inline-block;
    vertical-align: middle;
}
.filter-tijd div,
.filter-categorieen,
.zoeken-input {
    width:0;
    display:none;
    vertical-align: middle;
}
.filter-tijd select,
.zoeken-input input.hw {
    margin:0;
    width:auto;
}a.button-mijn-documenten {
    color:#858585;
    float: right;
    margin-right: 20px;
}
.doc_row_connected {
    position:relative;
}
.doc_row_connected a.delete {
    display:inline-block;
    color:#858585;
}
#tabs {
    border-radius: 0 3px 3px 3px;
    border: 1px solid white;
}
#tabs > ul > li.hidden {
    display:none;
}
#close-upload {
    position: absolute;
    top: 4%;
    right: 3%;
    cursor: pointer;
    z-index: 2000;
}
.modal {
    position:fixed;
    z-index: 5000;
    top: 0;
    left: 0;
    width:100vw;
    height:100vh;
    padding:0;
    margin:0;
    background-color:rgba(0,0,0,.5);
    display:none;
}

.modal .popup {
    position:absolute;
    width:50%;
    height:80vh;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:#fff;
    border-radius:3px;
}
.modal.fullscreen .popup {
    position:absolute;
    z-index: 5000;
    top: 0;
    left: 0;
    width:100vw;
    height:100vh;
    transform:none;
    border-radius:0px;
}
.modal .popup .popup-header {
    background:#636363;
    line-height:50px;
    padding:0 20px;
    color:white;
    font-size:20pt;
    min-height:55px;
    border-radius:3px 3px 0 0;
} 
.modal .popup .popup-content {
    padding:30px;
    height: calc(80vh - 220px);
    overflow-y:scroll;
}
.modal .popup .popup-content textarea {
    text-align:left;
}
.modal.fullscreen .popup .popup-content {
    padding:30px 30px 100px 30px;
    height: calc(100vh - 200px);
    overflow-y:scroll;
}
.modal .popup .popup-content .a4 {
    margin:auto;
    margin-bottom: 120px;
}
.modal .popup .popup-header .close-popup {
    display:inline-block;
    color:#fff;
    cursor:pointer;
    float:right;
}
.modal-actions {
    position:fixed;
    bottom:0;
    left:0;
    width:calc(100% - 60px);
    background:#f5f5f5;
    border-top:1px solid #e5e5e5;
    line-height: 100px;
    padding: 0 30px;
    display:none;
    z-index: 50000;
}
.modal-actions .buttons {
    float:right;
    vertical-align:middle;
    margin:0;
}
.modal-actions .buttons .button {
    margin:0 10px;
}
.modal-header-button {
    display:inline-block;
    float:right;
    margin: 0 10px;
    cursor:pointer;
}
.overlay {
    width:calc(100% - 40px);
    height:100%;
    position:fixed;
    top:0;
    left:0;
    overflow:scroll;
    background:rgba(255,255,255,1);
    z-index:5;
    display:none;
    padding:20px;
}
.overlay#overlay-upload {
    z-index:6;
}
.overlay > div.box {
    position: relative;
    max-width: 980px;
    width: 980px;
    margin: auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.overlay > div.box.small {
    max-width: 400px;
    width: 400px;
    top: 100px;
    z-index: 2;
    position: fixed;
}
.overlay > div.box h1 {
    margin-top:0;
}
.lightbox-placeholder {
    position:relative;
}
.lightbox-placeholder i {
    cursor:pointer;
    position:absolute;
    top:50%;
    right:0;
    z-index:10001;
    transform:translateY(-50%);
}
.lightbox-placeholder i div {
    display:none;
}
.lightbox-placeholder i:hover div {
    display:block;
    position:absolute;
    bottom:0;
    right:0;
    transform:translate(-10px,-10px);
    background:white;
    border:1px solid #c5c5c5;
    border-radius: 3px;
    padding:20px 15px;
    max-width:400px;
    min-width:300px;
    box-shadow: 0px 0px 20px #e5e5e5;
}
.lightbox-placeholder i:hover div h4 {
    padding-top:0;
    margin-top:0;
}
.lightbox-placeholder i:hover div p {
    font-weight:normal;
}.notificatie-wrapper,.actie-wrapper,.details-info-panel {
    padding:10px;
    border:1px solid #e5e5e5;
    margin:20px 10px 0 0;
    min-width:50%;
    background:white;
}

.notificatie-wrapper ul {
    margin:0;
    padding:0;
    list-style:none;
}
.notificatie-wrapper ul li {
    margin:0;
    padding:10px 0;
    border-bottom:1px dashed #e5e5e5;
    position:relative
}
.notificatie-wrapper ul li .notificatie-verwijderen {
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
    display:none;
}
.notificatie-wrapper ul li:hover .notificatie-verwijderen {
    display:block;
}
form.notificatie-formulier {
    max-height: 30px;
    height: 30px;
    min-height: 30px;
    text-align: left;
    margin-top: 20px;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
    position:relative;
    display:block;
    max-height:inherit;
    min-height:inherit;
    height:auto;
    
}
form.notificatie-formulier textarea {
    min-height: inherit;
    max-height: inherit;
    position: relative;
    display: block;
    text-align:left;
    height: 40px;
}
form.notificatie-formulier .notificatie-opslaan {
    position:absolute;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    padding: 21px;
    min-width: 20px;
    height: 30px;
    line-height: 30px;
    top: -4px;
    right: -1px;
    width: 30px;
}
.notificatie-datum div {
    font-size:9pt;
    font-style:italic;
    color:#666;
    padding-top:5px;
}
.notificatie-notitie {
    padding: 10px 5px;
}
ul.bewerk-lijst.icoon-lijst.notificaties li  {
    padding-left:0;
}
ul.bewerk-lijst.icoon-lijst.notificaties li.rij div.bullet {
   width:8px;
   height:8px;
   border: 0px solid #fff;
   border-radius:50% 50%;
   display:inline-block;
   vertical-align:middle;
   margin:0 15px;
   background:#fff;
}

ul.bewerk-lijst.icoon-lijst.notificaties li.rij.nieuw div.bullet {
   background:#0056b3;
}
.offerteverzoek-weigeren-motiveren .annuleren {
    display:none;
}
.offerteverzoek-weigeren-motivatie {
    display:none;
}
.offerteverzoek-weigeren-motivatie textarea {
    text-align:left;
}

.notificatie-notificatie {
    padding:10px 5px 0px 5px;
}.notitie-wrapper,.details-info-panel {
    padding:10px;
    border:1px solid #e5e5e5;
    margin:20px 10px 0 0;
    min-width:50%;
    background:white;
}

.notitie-wrapper ul {
    margin:0;
    padding:0;
    list-style:none;
}
.notitie-wrapper ul li {
    margin:0;
    padding:10px 0;
    border-bottom:1px dashed #e5e5e5;
    position:relative
}
.notitie-wrapper ul li .notitie-verwijderen {
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
    display:none;
}
.notitie-wrapper ul li:hover .notitie-verwijderen {
    display:block;
}
form.notitie-formulier {
    max-height: 30px;
    height: 30px;
    min-height: 30px;
    text-align: left;
    margin-top: 20px;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
    position:relative;
    display:block;
    max-height:inherit;
    min-height:inherit;
    height:auto;
    
}
form.notitie-formulier textarea {
    min-height: inherit;
    max-height: inherit;
    position: relative;
    display: block;
    text-align:left;
    height: 40px;
}
form.notitie-formulier .notitie-opslaan {
    position:absolute;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    padding: 21px;
    min-width: 20px;
    height: 30px;
    line-height: 30px;
    top: -4px;
    right: -1px;
    width: 30px;
}
.notitie-datum div {
    font-size:9pt;
    font-style:italic;
    color:#666;
    padding-top:5px;
}
.notitie-notitie {
    padding: 10px 5px;
}.a4 {
    position:relative;
    width:840px;
    min-height:1205px;
    background:white;
    margin:20px;
    padding:20px;
    border:1px solid #ddd;
    background-size:cover;
    background-position:center center;
}
.a4 .logo img {
    max-width: 460px;
    width: 460px;
}
.a4 .a4-footer {
    position:absolute;
    bottom:20px;
    left:0;
    width:100%;
    text-align:center;
}
.a4 .a4-footer img {
    max-width:195px;
}
.a4 .labels ul, .data ul {
    list-style:none;
    margin:0;
    padding:0;
}
.a4 .labels ul li, .data ul li {
    padding:0;
    margin:0;
    line-height:20px;
    height:16px;
    font-size:9pt;
    display:block;
    vertical-align:top;
}
.a4 .labels {
    position: absolute;
    left: 650px;
    top: 30px;
    z-index: 1;
    font-size: 9pt;
}
.a4 .labels img {
    width:15px;
    height:15px;
    vertical-align:top;
}
.a4 .data {
    position:absolute;
    right:30px;
    top:30px;
    z-index:1;
    text-align:right;
}
.a4 .footer  {
    position:absolute;
    left:30px;
    width:100%;
    bottom:20px;
    z-index:2;
    text-align:center;
    font-size:9pt;
    font-family: 'Source Sans Pro Light';
}
.a4 .footer p {
    margin:0;
    padding:0;
}
.a4 .footer img {
    display:block;
    width:300px;
    margin:auto;
    margin-bottom:10px;
}
.a4 .container.mt-5 {
    padding:30px;
    padding-top:60px;
    line-height:4mm;
}
.a4 table {
    padding:0;
    margin:0;
}
.a4 table tr {
    padding:0;
    margin:0;
}
.a4 table tr th {
    font-weight:normal;
    text-align:left;
    border-bottom:1px solid #000000;
}
.a4 table tr td {
    margin:0;
    padding:0;
}


.offerteregels td.kolom1,
.offerteregels td.kolom2,
.offerteregels td.kolom3,
.offerteregels td.kolom4,
.offerteregels td.kolom5 {
    width:150px;
    padding:5px;
    /* border-bottom: 1px solid #636363;*/
}
.a4 table.offerteregels tr th {
    font-weight:bold;
    padding:3px;
}

.a4 table.offertegegevens tr th.kolom1 {
    width:100px;
}
.a4 table.offertegegevens tr th.kolom2 {
    width:440px;
}
.a4 table.offertegegevens tr th.kolom3 {
    width:170px;
}
.a4 table.offertegegevens tr th.kolom4 {
    width:170px;
}
.a4 table.offertegegevens tr th.kolom5 {
    
}

.a4 table.offerteregels tr td,
.a4 table.offertegegevens tr td {
    padding:0 5px;
}
.a4 table.offertegegevens tr td.kolom3 {
    text-align:right;
}
.a4 table.offerteregels tr td.kolom3 {
    text-align:left;
}
.a4 table.offerteregels tr td.kolom4 {
    text-align:left;
}
.a4 table.offerteregels tr td.kolom5 {
    width: 0px;
    display: inline-block;
}
.a4 table.offerteregels tr td div.euro {
    float:left;
}
.a4 table.offerteregels tr td.kolom3.totaallijn {
    border-bottom:1px solid #000000;
}
.a4 table.offerteregels tr td.kolom5.totaallijn {
    border-bottom:1px solid #000000;
    width:100%;
}
.a4 table.offerteregels tr td.kolom5.rijtotaal {
    position:relative;
}
.a4 table.offerteregels tr td.kolom5 i.fa-times {
    display:none;
    cursor:pointer;
}
.a4 table.offerteregels tr:hover td.kolom5 i.fa-times {
    display:block;
}

.a4 p.melding-rood {
    text-align:right;
}

.a4 div.melding-rood {
    display:inline-block;
    float:right;
    border:2px solid #ff9900;
    padding:10px;
    margin:10px 0;
}
.offerte-template {
    margin: 40px 0;
    padding: 40px;
    border: 1px solid #636363;
    background-repeat:no-repeat;
    background-size:cover;
}
.offerte-template textarea,
.offerte-template input {
    text-align:left;
}

div.offerte-template .nieuwe-offerte-regel table tr td {
    padding:5px;
    vertical-align:top;
}

.offerte-template .offerte-prijs {
    display:inline-block;
}

.offerte-template .offerte-periodiek,
.offerte-template .offerte-eenmalig,
input[name='offerte[periodeTot]'] {
    display:none;
}


.offerte-template .button-offerte-bijlagen {
    display:none;
}

ul#offerte-bijlagen li .fa-times {
    cursor:pointer;
}
a.offerte-link.openModal {
    display:block;
    font-weight:normal;
    padding-left:10px;
    padding-right:10px;
}
ul.bewerk-lijst > li a.offerte-link.openModal:hover {
    color:#000000;
}/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 20 jan. 2022, 13:06:01
    Author     : gerard
*/

.opdracht-status.open {
    color:#d5d5d5;
}
.opdracht-status.open i.fas.fa-check {
    color:#d5d5d5;
} 
.opdracht-status.afgerond {
    color:#404040;
}
.opdracht-status.afgerond i.fas.fa-check {
    color:#009900;
} 

a.offerte-link {
    width:100%;
}
div.offerte-geaccepteerd {
   color:#009900;
    font-size:10px;
    font-weight:bold;
    position:absolute;
    top:50%;
    right:15px;
    transform:translateY(-50%);
}.button-spacing {
  margin: 15px 0px;
}

table#orders {
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  padding: 1em;
}

table#orders > tbody > tr:hover {
  background-color: #eee;
}

table#orders > thead > tr > th,
table#orders > tbody > tr > td {
  padding: 8px;
}

table#orders > tbody > tr > td > a,
table#orders > tbody > tr > td > a:visited {
  text-decoration: none;
}

table#orders > tbody > tr > td > a:hover {
  text-decoration: underline;
}

#order > .order > h3 > span {
  color: #999;
}

#order > .order > table.orders th,
#order > .order > table.orders td {
  padding: 10px 30px;
}

#order > .order > table.orders {
  border-spacing: 0px;
}

#order > .order > table.orders > thead {
  background-color: #999;
  color: white;
  font-weight: bold;
}

#order > .order > table.orders > tbody > tr:nth-child(even) {
  background-color: #eee;
}

#order > .order > table.orders > tbody > tr:first-of-type > td {
  padding-top: 15px;
  padding-bottom: 15px;
}

#order > .order > table.orders > tbody > tr > td:first-of-type {
  font-weight: bold;
}

#order > .order > table.orders > tfoot {
  background-color: #ddd;
}

#order > .order > table.orders > thead > tr > th:nth-child(1) {
  max-width: 20px;
}

#order > .order > table.orders > tbody > tr > td > span,
#order > .order > table.orders > tfoot > tr > td > span {
  /* float: right; */
}

#order > .order > table.orders {
  width: 100%;
  table-layout: fixed;
}

#order > .order > table.orders th:first-child,
#order > .order > table.orders td:first-child {
  white-space: nowrap;
}

#order > .order > table.orders th:not(:first-child),
#order > .order > table.orders td:not(:first-child) {
  min-width: 1%;
  white-space: nowrap;
}

/* #order > .order > table.orders {
    width: 100%;
    table-layout: fixed;
}

#order > .order > table.orders th,
#order > .order > table.orders td {
    width: auto;
} */
/* 
#order > .order > table.orders td:nth-last-child(-n+3) {
    width: auto;
} {

}

#order > .order > table.orders th:last-child,
#order > .order > table.orders td:last-child {
    width: 1%;
    white-space: nowrap;
}
 */

.a4 table.overeenkomstregels tr td {
    padding:0 5px;
}

.a4 table.overeenkomstgegevens tr td.kolom1 {
    width:500px;
}
.a4 table.overeenkomstgegevens tr td.kolom2 {
    width:170px;
}
.a4 table.overeenkomstgegevens tr td.kolom3 {
    width:170px;
    text-align:right;
}
.a4 table.overeenkomstregels tr th.kolom1 {
    width:100px;
    font-weight:bold;
    padding:3px;
}
.a4 table.overeenkomstregels tr th.kolom2 {
    width:440px;
    font-weight:bold;
    padding:3px;
}
.a4 table.overeenkomstregels tr th.kolom3 {
    width:100px;
    font-weight:bold;
    padding:3px;
}
.a4 table.overeenkomstregels tr th.kolom4 {
    width:100px;
    font-weight:bold;
    padding:3px;
}
.a4 table.overeenkomstregels tr td.kolom1 {
}
.a4 table.overeenkomstregels tr td.kolom2 {
}
.a4 table.overeenkomstregels tr td.kolom3 {
    text-align:left;
}
.a4 table.overeenkomstregels tr td.kolom4 {
    text-align:left;
}
.a4 table.overeenkomstregels tr td.kolom5 {
    width: 0px;
    display: inline-block;
}
.a4 table.overeenkomstregels tr td.kolom3 div.euro,
.a4 table.overeenkomstregels tr td.kolom4 div.euro,
.a4 table.overeenkomstregels tr td.kolom5 div.euro {
    float:left;
}
.a4 table.overeenkomstregels tr td.kolom3.totaallijn {
    border-bottom:1px solid #000000;
    
}
.a4 table.overeenkomstregels tr td.kolom5.totaallijn {
    border-bottom:1px solid #000000;
    width:100%;
}
.a4 table.overeenkomstregels tr td.kolom5.rijtotaal {
    position:relative;
}
.a4 table.overeenkomstregels tr td.kolom5 i.fa-times {
    display:none;
    cursor:pointer;
}
.a4 table.overeenkomstregels tr:hover td.kolom5 i.fa-times {
    display:block;
}

.a4 p.melding-rood {
    text-align:right;
}

.a4 div.melding-rood {
    display:inline-block;
    float:right;
    border:2px solid #ff9900;
    padding:10px;
    margin:10px 0;
}
.overeenkomst-template {
    margin: 40px 0;
    padding: 40px;
    border: 1px solid #636363;
}
.overeenkomst-template textarea,
.overeenkomst-template input {
    text-align:left;
}

div.overeenkomst-template .nieuwe-overeenkomst-regel table tr td {
    padding:5px;
    vertical-align:top;
}

.overeenkomst-template .overeenkomst-prijs {
    display:inline-block;
}

.overeenkomst-template .overeenkomst-periodiek,
.overeenkomst-template .overeenkomst-eenmalig,
input[name='overeenkomst[periodeTot]'] {
    display:none;
}


.overeenkomst-template .button-overeenkomst-bijlagen {
    display:none;
}

ul#overeenkomst-bijlagen li .fa-times {
    cursor:pointer;
}:root {
    --color: rgba(122, 122, 122, .7);
    --color-light: rgba(122, 122, 122, .4);
    --border: 1px solid var(--color-light);
    --box: 1px 1px 5px var(--color);
}

[data-modal] > i {
    pointer-events: none;
}

#tabs:has(#products) {
    box-sizing: border-box;
}

#products {
    box-sizing: border-box;
    width: 100%;
    table-layout: fixed;
    padding: 0px 20px 20px 20px;
    border-spacing: unset;
}

#products > thead {
    text-align: left;
}

#products > thead > tr > th {
    padding: 20px 5px 20px 5px;
}

#products > thead > tr > th:nth-child(1) {
    width: 60px;
}

#products > thead > tr > th:nth-child(2) {
    width: 240px;
}

#products > thead > tr > th:last-of-type {
    width: 60px;
}

#products > thead > tr > th:nth-child(4),
#products > thead > tr > th:nth-child(5) {
    width: 120px;
}

#products > tbody > tr > td:nth-child(1) {
    padding-right: 10px;
}
#products > tbody > tr > td:nth-child(1) {
    text-align: right;
}

#products > tbody > tr > td {
    padding-left: 10px;
    padding-right: 10px;
}

#products > tbody > tr > td:last-of-type {
    text-align: right;
}

#products > tbody > tr:nth-child(even) {
    background: #eee;
}

#products > tbody > tr > td {
    padding: 10px 0px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal .popup .popup-content {
    overflow: auto;
}

label {
    cursor: pointer;
    color: #444;
    transition: all .1s ease;
}

label:hover:not(:focus) {
    color: #333;
}

label:hover + *:not(:focus) {
    box-shadow: var(--box);
}

label + * {
    transition: all .1s ease;
}

input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus),
label.file_label:hover:not(:focus) {
    box-shadow: var(--box);
}

input[type="text"],
input[type="currency"],
select,
textarea,
.file_label {
    background-color: #f0f0f0;
    border: 1px solid #e2e2e2;
    color: #444;
    padding: 10px;
    appearance: none;
    font-family: 'asap','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 400;
}

.file_label {
    cursor: pointer;
}

.file_label + input[type="file"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.modal-actions {
    display: block;
}

textarea {
    resize: vertical;
}

[editable] {
    position: relative;
}

#the_product {
    display: grid;

    grid-auto-columns: 1fr;
    grid-template-columns: 300px 1fr max-content;
    grid-template-rows: min-content 1fr;
    gap: 10px 10px;
    grid-template-areas:
        "image title price"
        "image description description";
}

#opties ul.vink-lijst label {
    display: inline-block;
    font-weight: normal;
    margin-left: 5px;
}

#opties ul ul {
    margin-left: 50px;
}

#the_product > .image { grid-area: image; min-height: 300px; background-color: #e2e2e2; }
#the_product > .title { grid-area: title; }
#the_product > .price { grid-area: price; }
#the_product > .description { grid-area: description; }

#the_product > .image > img { width: 100%; display: block; }
#the_product > .price > #price { font-size: 2rem; margin: 0; }

#the_product [editable]:not(:empty) {
    border-color: rgba(226, 226, 226, 0);
    border-style: solid;
    border-width: 1px;
    pointer-events: hover;
    user-select: none;
}

#the_product [editable]:not(:empty):hover {
    transition: border-color .5s ease;
    border-color: rgba(226, 226, 226, 1);
}

#the_product [editable]:not(:empty)::before {
    font-family: "Font Awesome 5 Free";
    cursor: pointer;
    font-weight: 400;
    font-size: 1rem;
    content: '\f044';
    float: right;
    margin-left: 10px;
    pointer-events: all;
    user-select: auto;
}

.loading {
    color: #787878;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}/* Profiel */
form[name="gebruiker-gegevens"] textarea {
    text-align:left;
    height:50px
}
#tabs {
    margin-bottom:50px;
}
#tabs > ul {
    position: absolute;
    top: 0;
    left: 0;
    margin: -41px 0 0 -4px;
}
#tabs > ul > li {
    -webkit-border-radius: 0x;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;	
}

#tabs > div {
    padding:10px;
}
.tab-panel {
    min-height:300px;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 8px 7px;
}
.tab-icon-placeholder {
    width:24px;
    display:inline-block;
}

.tabs.inside {
    border:0px solid #fff;
    width:100%;
}
.tabs.inside.ui-tabs .ui-tabs-panel{
    border-top: 1px solid #e5e5e5;
    padding:10px;
}
#tabs ul li.hidden {
    display:none;
}.ui-widget-content {
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #000;
    text-decoration: none;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-radius:0;
}
.ui-widget-header {
    border: 0px solid #aaaaaa;
    background: none;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #fff;
    background:white;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border:0px solid #fff;
}
.ui-effects-transfer {
    border: 1px dotted black;
  }
.container {
    position:relative;
    height:-moz-calc(100vh - 285px);
    height:-webkit-calc(100vh - 285px);
    height:calc(100vh - 285px);
    width:100%;
}
.inner-container {
    padding:30px;
    text-align:center;
}
.inner-container p {
    text-align:center;
}
#progressbar {
    position:absolute;
    top:0;
    left:50%;
    /*transform:translate(-50%, -50%);
    width:calc(80% - 40px);*/
    width:50%;

}
#progressbar .bar {
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    height:5px;
    background: #003b6f;
    width:140%;
}
#progressbar .dots {
    position:absolute;
    top:0;
    z-index:10;
    width: 140%;
    left: -70%;
}
#progressbar .dots .dot {
    background:white;
    border:6px solid #003b6f;
    width:20px;
    height:20px;
    position:absolute;
    top:50%;
    margin-top:-16px;
    border-radius:50% 50%;
    z-index:10;
}
#progressbar .dots .dot.active {
    background-color:#d66417;
}
#progressbar .dots .dot.done{
    background-color:#878787;
}
#progressbar .dots .dot.first { left:-16px; }

#progressbar .dots .dot.second { left:calc(25% - 16px); }
#progressbar .dots .dot.third { left:calc(50% - 16px); }
#progressbar .dots .dot.fourth { left:calc(75% - 16px); }
#progressbar .dots .dot.fifth { left:calc(100% - 16px); }

#omgevingshuis_wizard ul li:hover {
    background:none;
    background-color:none;
    cursor:default;
}
#omgevingshuis_wizard ul li a.selecteer_dienst,
#omgevingshuis_wizard ul li a.selecteer_dienst:link,
#omgevingshuis_wizard ul li a.selecteer_dienst:active,
#omgevingshuis_wizard ul li.selecteer_dienst:visited{
    display:block;
    padding:10px;
    text-decoration:none;
    text-align:left;
    background:none;
    background-color:none;
}
#omgevingshuis_wizard ul li.selecteer_dienst:hover  {
    background-color:#f8f8f8;
    cursor:pointer;
}

#omgevingshuis_wizard_tarief_panel {
    display:none;
}


i.dienst_logo,
i.dienst_logo i {
    border-radius: 50% 50%;
    display:inline-flex;
    position:relative;
    padding:7px;
    min-width:7px;
    min-height:7px;
    margin:0;
}
i.dienst_logo {
    vertical-align:top;
    margin-right:20px;
}
i.dienst_logo i.black i.white i.color {
    background-color:#0099ff;
}
i.dienst_logo i.black i.white {
    background-color:#fff;
}
i.dienst_logo i.black {
    background-color:#000;
}
ul li.selecteer_dienst {
    text-align:center;
}
ul li.selecteer_dienst h3 {
    display:inline-block;
    margin-bottom:0;
    padding-bottom:0;
}
ul li.selecteer_dienst h3 img {
    max-width: 250px;
}
ul li.selecteer_dienst p {
    margin: 10px 0;
}
ul li div.dienst_omschrijving {
    display:inline-block;
    vertical-align:top;
    width:auto;
    max-width:calc(100% - 100px);
    overflow: initial; 
    white-space: initial;
}
ul li div.dienst_omschrijving h3 {
    margin:0;
    padding:0;
    line-height: 30px;
}
ul li div.select_info,
ul li div.info_link {
    width:auto;
    max-width:none;
    display:inline-block;
    vertical-align: middle;
    margin-top: -10px;
}
ul li div.info_link a,
ul li div.info_link a:link,
ul li div.info_link a :active,
ul li div.info_link a:visited,
ul li div.info_link a:hover {
    color:#858585;
}

.dienst_omschrijving img {
    cursor:pointer;
}