/* CSS Document */
html,body {font-family: 'Nunito Sans', sans-serif; color: #161616; background-color: #F0F2F5;}
main {}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 700;}

/******************** kleuren ********************/
.bg-blauw {background-color: #1D5BC5;}
.bg-lblauw {background-color: #EBF7FD;}
.bg-geel {background-color: #FFE500;}
.bg-lgeel {background-color: #fffacc;}
.bg-grijs {background-color: #B6B6B6;}
.bg-dgrijs {background-color: #757575;}

.text-blauw {color: #1D5BC5;}
.text-lblauw {color: #EBF7FD;}
.text-geel {color: #FFE500;}
.text-grijs {color: #B6B6B6;}
.text-dgrijs {color: #757575;}
.text-roze {color: #d40074;}

.border-blauw {border-color: #1D5BC5 !important; border-width: 3px !important;}
.border-geel {border-color: #FFE500 !important; border-width: 3px !important;}

.alert.alert-primary p:last-of-type {margin-bottom: 0px;}

.btn-outline-grey {border: 1px solid #CCC; color: #101010;}
.btn-outline-grey:hover, .btn-outline-grey:focus {background-color: #7d00ff; border-color: #7d00ff; color: #FFF;}

.btn-blue {background-color: #1D5BC5; color: #FFF;}
.btn-blue:hover, .btn-blue:focus {background-color: #757575; color: #FFF;}

/******************** navbar *********************/
.navbar {background-color: #FFF; background-color: rgba(255,255,255,0.85); box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); padding-top: 0px; padding-bottom: 0px;}
.navbar .navbar-brand {padding: 10px 0px;}
.navbar .navbar-brand .logo {width: auto; height: 48px;}

/******************** knoppen ********************/
.btn-next {background-color: #757575; color: #FFF;}
.btn-next:hover, .btn-next:focus {background-color: #1D5BC5; color: #FFF;}
.btn-outline-jn {border-color: #1D5BC5; color: #1D5BC5; min-width: 100px; text-transform: uppercase; margin-right: 1rem;}
.btn-outline-jn:last-of-type {margin-right: 0;}
.btn-check:checked+.btn-outline-jn {color: #FFF !important; border-color: #1D5BC5; background-color: #1D5BC5 !important;}
.btn-check+.btn-outline-jn:hover, .btn-check+.btn-outline-jn:focus {border-color: #1D5BC5; color: #1D5BC5; background-color: #ebf7fd;}
.btn-download {background-color: #FFE500; color: #000; font-weight: 700;}
.btn-download:hover, .btn-download:focus {background-color: #1D5BC5; color: #FFF;}
.btn-outline-mk {border-color: #1D5BC5; color: #1D5BC5; min-width: 100px; text-transform: uppercase; margin-top: 0.5rem;}
.btn-check:checked+.btn-outline-mk {color: #FFF !important; border-color: #1D5BC5; background-color: #1D5BC5 !important;}
.btn-check+.btn-outline-mk:hover, .btn-check+.btn-outline-mk:focus {border-color: #1D5BC5; color: #1D5BC5; background-color: #ebf7fd;}

/******************* Tooltip ********************/
.tooltip.show {opacity: 1;}
.tooltip-inner {background-color: #1D5BC5; text-align: left;}
.tooltip-inner a {color: #FFF;}
.tooltip.bs-tooltip-right .tooltip-arrow::before {border-right-color: #1D5BC5 !important;}
.tooltip.bs-tooltip-left .tooltip-arrow::before {border-left-color: #1D5BC5 !important;}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {border-bottom-color: #1D5BC5 !important;}
.tooltip.bs-tooltip-top .tooltip-arrow::before {border-top-color: #1D5BC5 !important;}

/******************** header ********************/
.header {height: 250px; background-color: #1d5bc5; overflow: hidden;}
.header .img-header {height: 250px; object-fit: cover; width: 100%;}
.header .img-logo {width: 400px;}

/**************** inhoudsopgave *****************/
.inhoud .nav-link {font-size: 1.5rem; font-weight: 700; line-height: 1.5rem; padding-top: 1rem; padding-bottom: 1rem;}
.inhoud .nav-link.active {color: #161616;}
.inhoud .nav-link.disabled {color: #B6B6B6;}
.inhoud .nav-link.text-machine {font-size: 1rem; font-weight: 400; line-height: 1rem; padding: 0rem 0.25rem 0rem 1.5rem;}
.inhoud .nav-link.text-machine:before {content: '-'; position: absolute; left: 28px;}
.inhoud .text-smaller {font-size: 1.25rem; font-weight: 400;}

.vraagtabs .nav-link {font-size: 1.25rem; line-height: 1.2; padding-left: 0.75rem; padding-right: 0.75rem;}
.vraagtabs .nav-link.active {color: #1D5BC5; border-bottom: 3px solid #1D5BC5 !important; position: relative;}
.vraagtabs .nav-link.disabled {color: #B6B6B6;}

.vraagtabs .nav-link.active.item-p-w::after {content: ''; position: absolute; left: var(--p); bottom: -3px; width: var(--w); height: 1px; border-bottom: 3px solid #ffd200;}

/******************** Content ********************/
.img-sfeer {object-fit: cover; height: 100%;}

/****************** Resultaat *******************/
/*.resultaat .card {border: 1px solid #7d00ff; background-color: #fffde8; margin-top: 2rem;}*/
.resultaat .card .card-header {background-color: #757575;}
.resultaat .card .card-header h2 {font-size: 1.1rem; margin-bottom: 0px; color: #FFF;}
.resultaat .card .card-header h2 .bedrijf {color: #FFE500;}
.resultaat .card .card-body h3, .resultaat .card .card-body h5 {font-size: 1.1rem;}
.resultaat .card .card-body .border-top {border-top: 1px solid #757575 !important;}
.resultaat .card .card-body .sll {font-weight: 500;}
.resultaat .card .card-body .sll::after {background-color: #dee2e6; content: ''; flex: 1; margin-left: 1rem; margin-right: 1rem; margin-top: 4px; height: 1px;}
.resultaat .card .card-body .sll.text-warning, .bg-lgeel .text-warning {color: #ea940c !important}
.resultaat .card .card-body .sll.text-danger::after {background-image: linear-gradient(to right, #dc3545 40%, #FFF 20%); background-size: 10px 1px; background-repeat: repeat-x;}
.resultaat .card .card-body .sll.text-warning::after {background-image: linear-gradient(to right, #ea940c 40%, #FFF 20%); background-size: 10px 1px; background-repeat: repeat-x;}
.resultaat .card .card-body .sll.text-success::after {background-image: linear-gradient(to right, #198754 40%, #FFF 20%); background-size: 10px 1px; background-repeat: repeat-x;}
.resultaat .card .card-body .sl {background-color:  #343a40; font-size: 1.5rem; max-width: 58px; line-height: 1rem; padding: 8px 15px;}
.resultaat .card .card-body .sl .fas:before {background-color: #FFF; border-radius: 50%; border: 2px solid #FFF;}

.impactmeting .card .card-header {background-color: #1D5BC5;}
.impactmeting .card .card-header h2 {font-size: 1.1rem; margin-bottom: 0px; color: #FFF;}

@media screen and (max-width: 991px) {
	.header {height: 200px; overflow: hidden;}
	.header .img-header {height: 200px; object-fit: cover;}
	.header .img-logo {max-width: 80vw; top: 30% !important;}
	
	.headerrow h1 {font-size: 1.6rem; margin-bottom: 0px !important;}
	.headerrow h4 {font-size: 1.1rem;}
	
	.vraagtabs .nav-link {font-size: 1.1rem; padding-left: 0rem; padding-right: 0rem;}
}

/******************** Footer *********************/
.site-footer {padding: 64px 0 50px 0; color: #5a5a5a; background-color: #FFF; border-top: 30px solid #F0F2F5;}
.site-footer .socials .btn {line-height: 1; padding: 11px 9px 10px 9px; margin-right: 14px;}
.site-footer .contact-link, .site-footer .footer-link {color: #5a5a5a; text-decoration: none;}
.site-footer .contact-link:hover, .site-footer .contact-link:focus, .site-footer .footer-link:hover, .site-footer .footer-link:focus {color: #7d00ff;}
.site-footer .material-symbols-outlined {font-size: 18px; padding-top: 3px;}
.site-footer .footer-logos a {max-width: 90px;}
.site-footer .footer-logos a .img-fluid {max-height: 75px;}

.site-bottom {padding-top: 32px; padding-bottom: 32px; border-top: 1px solid #e6e6e6; color: #5a5a5a; background-color: #FFF;}

/********************* end **********************/