/* Primary (blue) #1961AC var(--bs-primary) huisstijlblauw */
/* Secondary (indigo) #003552 var(--bs-secondary) donkerblauw */
/* Info (cyan) #BFE6F7 var(--bs-info) licht blauw */
/* Success (green) #178711 var(--bs-success) */
/* Warning (yellow) #ffcd2a var(--bs-warning) */
/* Danger (red) #e83c61 var(--bs-danger) */
/* Ligth (gray-100) #f0f0f0 var(--bs-light) */
/* Dark (gray-800) #d6d8d9 var(--bs-dark) */
/* Breakpoints: <576px | SM: =576px | MD: =768px | LG: =992px | XL: =1200px | XXL: =1400px */
/* @media (max-width: 575px) { ... } */
/* @media (min-width: 576px) { ... } */
/* @media (min-width: 768px) { ... } */
/* @media (min-width: 992px) { ... } */
/* @media (min-width: 1200px) { ... } */
/* @media (min-width: 1400px) { ... } */


/* LOGO ---------------------------------------- */
.logo {
	text-align: center;
}

.logo {
  max-height: 70px;
}

/* LOGO KLEINER OP SMARTPHONES ---------------------------------------- */
 @media only screen and (max-width: 768px) {
    .logo {
        max-height: 60px;
    }
}

/* BODY ACHTERGRONDKLEIUR ---------------------------------------- */
body {
	background-color: #ededed !important;
}

/* ACHTERGRONDAFBEELDING ---------------------------------------- */
#achtergrond {
  background-image: url(/Afbeeldingen/Vormgeving/Achtergrond.png) !important;
  background-repeat: no-repeat;
  background-position: right 0px top 0px; 
  height: 700px; 
  z-index: -100 !important; 
}

/* ALLE LINKS VETTER (400 IS NORMAAL, 700 is VET ---------------------------------------- */
a {
    font-weight: 400 !important;
    color: var(--bs-primary);
    text-decoration: underline;
}

.contentbody a,
.toptaak a,
.subtaak a {
    font-weight: 600 !important;
}


/* UITZONDERINGEN ---------------------------------------- */
a.nav-link,
a.btn,
.btn,
.beheertools a,
.beheertools .btn,
.beheertools button {
  text-decoration: none !important;
  font-weight: 400 !important;
} 

.toptaak a,
.toptaak .btn,
.subtaken a {
    font-weight: 400 !important;
}

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

/* ALLE LINKS HOVER ---------------------------------------- */
a:hover,
button:hover {
	outline: 4px solid #ffba18;
    text-decoration: none;
}

/* UITZONDERINGEN ---------------------------------------- */
a.geenhover:hover {
	border: none !important;
	outline: none !important;
}

/* CONTENTBODY ---------------------------------------- */
#contentbody .bg-white {
	background-color: rgba(255, 255, 255, 0.7) !important;
}

@media only screen and (max-width: 576px) {
    #contentbody .bg-white {
        background-color: rgba(255, 255, 255, 0.9) !important;
    }
}

#contentbody .wit,
#contentbody .accordion-body.bg-white {
	background-color: rgba(255, 255, 255, 1) !important;
}

/* UITZONDERINGEN ONDERSTREPEN LINKS ---------------------------------------- */
.searchresults .list-group a,
.toptaak a,
.subtaak a,
.nieuwsoverzicht a {
	text-decoration: none;
}

.nieuwsoverzicht a:hover .card-title {
	text-decoration: underline;
}

.contentbody a.btn {
	font-weight: 400;
}

/* ICOONTJES UITLIJNEN TEKST ---------------------------------------- */
.icoontje {
	vertical-align: middle;
}


/* ICOONTJES IN TABELLEN ---------------------------------------- */
.contentbody table td .icoontje {
	vertical-align: middle; 
	margin: -5px 0px 0px 0px;
}

/* OPSOMMINGEN ---------------------------------------- */

.contentbody ul,
.contentbody .nummering ul,
.contentbody .\ ul,
.contentbody .tijdlijn ul,
.contentbody .tijdlijnklein ul,
ul.liveblog ul li {
  list-style-image: url("/Afbeeldingen/Icoontjes toptakensite/Bullet1.png");
}

.contentbody ul ul,
.contentbody .nummering ul ul,
.contentbody .nummeringklein ul ul,
.contentbody .tijdlijn ul ul,
.contentbody .tijdlijnklein ul ul,
ul.liveblog ul ul li {
  list-style-image: url("/Afbeeldingen/Icoontjes toptakensite/Bullet2.png");
}

.contentbody ul ul ul,
.contentbody .nummering ul ul ul,
.contentbody .nummeringklein ul ul ul,
.contentbody .tijdlijn ul ul ul,
.contentbody .tijdlijnklein ul ul ul,
ul.liveblog ul ul ul li {
  list-style-image: url("/Afbeeldingen/Icoontjes toptakensite/Bullet3.png");
}

.contentbody ul ul ul ul,
.contentbody .nummering ul ul ul ul,
.contentbody .nummeringklein ul ul ul ul,
.contentbody .tijdlijn ul ul ul ul,
.contentbody .tijdlijnklein ul ul ul ul,
ul.liveblog ul ul ul ul li  {
  list-style-image: url("/Afbeeldingen/Icoontjes toptakensite/Bullet4.png");
}


/* OPSOMMING OL ALS TIJDLIJN (GROTE VERSIE) ----------------------------------------------- */ 
.tijdlijn{
	position: relative;
    z-index: 0;
}

.tijdlijn>li::before{
	content:'';
	position: absolute;
	width: 1px;
	background-color: var(--bs-primary);
	top: 0;
	bottom: 0;
	left:-23px;
}

/*Circle*/
.tijdlijn>li::after{
    text-align: center;
    padding-top:8px;
	z-index: 10;
	content:counter(item);
	position: absolute;
	width: 40px;
	height: 40px;
	background-color: var(--bs-primary);
	border-radius: 50%;
	top:0;
	left:-43px;
  	font-weight: bold;
  	color: #ffffff;
}

/*Content*/
.tijdlijn>li{
	counter-increment: item;
	padding: 10px 10px;
	margin-left: 10px;
	min-height:70px;
	position: relative;
	list-style: none;
}

.tijdlijn>li:nth-last-child(1)::before{
	width: 0px;
}

/* OPSOMMING OL ALS TIJDLIJN (KLEINE VERSIE) ----------------------------------------------- */

.tijdlijnklein{
	position: relative;
    z-index: 0;
}

.tijdlijnklein>li::before{
	content:'';
	position: absolute;
	width: 1px;
	background-color: var(--bs-primary);
	top: 10px;
	bottom: 0;
	left:-15px;
}

/*Circle*/
.tijdlijnklein>li::after{
    text-align: center;
    padding-top: 0px;
	z-index: 10;
	content:counter(item);
	position: absolute;
	width: 30px;
	height: 30px;
	border: 3px solid var(--bs-primary);
	background-color: var(--bs-primary);
	border-radius: 50%;
	top: 0px;
	left:-30px;
  	font-weight: bold;
  	color: #ffffff;
}

/*Content*/
.tijdlijnklein>li{
	counter-increment: item;
	padding: 0px 20px 20px 20px;
	margin-left: 0px;
	min-height:40px;
	position: relative;
	list-style: none;
}

.tijdlijnklein>li:nth-last-child(1)::before{
	width: 0px;
}


/* OPSOMMING ALS TIJDLIJN VARIANT 2 ----------------------------------------------- */

ul.tijdlijn2  {
    list-style-image: none !important;
    position: relative;
}

ul.tijdlijn2:before {
    content: ' ';
    background: #cccccc;
    display: inline-block;
    position: absolute;
    left: 16px;
    width: 2px;
    height: 100%;
}

ul.tijdlijn2 > li {
    margin: 0px 0px 30px 2px;
    list-style-type: none !important;
}

ul.tijdlijn2 > li:before {
    content: ' ';
    background: #35811a;
    display: inline-block;
    position: absolute;
    margin-top: -3px;
    left: 0px;
    width: 35px;
    height: 35px;
    background: url('/afbeeldingen/icoontjes%20toptakensite/Liveblog.png') no-repeat top left;
}

/* OPSOMMING OL ALS NUMMERING (GROTE VERSIE) ----------------------------------------------- */

.nummering{
	position: relative;
    z-index: 0;
}


/*Circle*/
.nummering>li::after{
    text-align: center;
    padding-top:10px;
	z-index: 10;
	content:counter(item);
	position: absolute;
	width: 50px;
	height: 50px;
	border:3px solid var(--bs-primary);
	background-color: var(--bs-primary);
	border-radius: 50%;
	top:0;
	left:-43px;
  	font-weight: bold;
  	color: #ffffff;
}

/*Content*/
.nummering>li{
	counter-increment: item;
	padding: 10px 20px;
	margin-left: 10px;
	min-height:70px;
	position: relative;
	list-style: none;
}

.nummering>li:nth-last-child(1)::before{
	width: 0px;
}

/* OPSOMMING OL ALS NUMMERING (KLEINE VERSIE) ----------------------------------------------- */

.nummeringklein{
	position: relative;
    z-index: 0;
}

/*Circle*/
.nummeringklein>li::after{
    text-align: center;
    padding-top: 2px;
	z-index: 10;
	content:counter(item);
	position: absolute;
	width: 25px;
	height: 25px;
	border: 0px solid var(--bs-primary);
	background-color: var(--bs-primary);
	border-radius: 50%;
	top: 0px;
	left:-20px;
  	font-weight: bold;
    font-size: 0.8em;
  	color: #ffffff;
}

/*Content*/
.nummeringklein>li{ 
	counter-increment: item;
	padding: 0px 20px 0px 20px;
	margin-left: 0px;
	min-height:30px;
	position: relative;
	list-style: none;
}

.nummeringklein>li:nth-last-child(1)::before{
	width: 0px;
}


/* OPSOMMING ALS LIVEBLOG ----------------------------------------------- */

ul.liveblog  {
    list-style-image: none !important;
    position: relative;
}

ul.liveblog:before {
    content: ' ';
    background: #9fa6a6;
    display: inline-block;
    position: absolute;
    top: 2px;
    left: 16px;
    width: 2px;
    height: 100%;
}

ul.liveblog > li {
    margin: 0px 0px 60px 5px;
    list-style-type: none !important;
}

ul.liveblog > li:before {
    content: ' ';
    background: #35811a;
    display: inline-block;
    position: absolute;
    margin-top: 0px;
    left: 0px;
    width: 35px;
    height: 35px;
    background: url('/afbeeldingen/icoontjes%20toptakensite/Liveblog.png') no-repeat top left;
}

/* OPSOMMING PAGINERING ---------------------------------------- */

.pagination li.page-item {
	min-width: 35px;
  	margin: 5px 3px 0px 0px;
  	text-align: center;
  	list-style-image: none;
}


/* TABELLEN ---------------------------------------- */
.contentbody table {
	border-collapse: separate;
  	border-spacing: 0px 0px;
}

.contentbody table td {
	background-color: transparent !important;
}

/* MARGES ALINEA'S IN TABELLEN ---------------------------------------- */
.contentbody table td p {
	margin: 0;
}

/* HEADERS TABELLEN ---------------------------------------- */
table .thead-light th {
  	background-color: var(--bs-primary);
  	color: #ffffff;
}

table .thead-dark th {
  	background-color: var(--bs-secondary);
  	color: #ffffff;
}

.table thead, 
.table tbody {
	border: 0px !important;
}

/* LINKJES IN HEADER TABELLEN ---------------------------------------- */
table .thead-dark a {
  	color: #000000;
  	font-weight: bold;
  	text-decoration: underline;
}

table .thead-dark a {
  	color: #ffffff;
  	font-weight: bold;
  	text-decoration: underline;
}

/* CAPTIONS VAN TABELLEN VERBERGEN ----------------------------------------------- */
table caption {
    display: none;
}

/* TABEL REGELS TELLEN ---------------------------------------- */
table {
  	counter-reset: rowNumber;
}

table tr.regel {
  	counter-increment: rowNumber;
}

table tr.regel td:first-child::before {
	content: counter(rowNumber);
	min-width: 1em;
	margin-right: 5px;
	font-weight: bold;
	color: var(--bs-secondary);
}

/* TABELLEN MET KLEINER LETTERTYPE ---------------------------------------- */

table.small {
	font-size: 0.8em !important;
}

/* TOPTAKEN ---------------------------------------- */
.toptaak .btn  {
	align-items: center;
	justify-content: left;
	white-space: normal;
	text-align: left;
	min-height: 75px;
	line-height: 1em;
	padding: 15px 0px 0px 15px;
}

.toptaak .btn a {
	display: block;
    display: -webkit-flex;
	display: flex;
}

.toptaak .icoontje {
	margin: 0px 10px 0px 0px;
	float: left;
}

.toptaak .icoontje img {
	max-width: 40px;
    max-height: 40px;
}

.toptaken a:hover {
	background-color: #95d7f3;
}

/* SUBTAKEN ---------------------------------------- */
.subtaken img {
	max-width: 40px;
	margin: 0px 10px 0px 0px;
}

.subtaken a:hover {
	text-decoration: underline;
}


/* FONTAWESOME ICONEN TOP- EN SUBTAKEN -- */
.toptaak .fa-solid,
.subtaak .fa-solid {
	font-size: 35px !important;
}

/* AFBEELDINGEN IN CONTENTPAGINA"S ----------------------------------------------- */

img.linksuitlijnen, img.links {
	float: left;
	margin: 0px 20px 10px 0px;	
}

img.rechtsuitlijnen,img.rechts {
	float: right;
	margin: 0px 0px 10px 20px;	
}

/* FOCUS ALGEMEEN ----------------------------------------------- */
:link:focus-visible,
:visited:focus-visible,
.input-group input:focus-visible,
.input-group button:focus-visible,
.form input:focus-visible,
input:focus-visible,
textarea:focus-visible,
.form button:focus-visible,
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.btn:focus-visible,
.cookies input[type=checkbox]:focus-visible,
.logo:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible,
.accordion-button:focus-visible,
.fotogalerijthumbs .thumbs .thumbnail:focus-visible img,
#autocomplete a:focus-visible,
#autocomplete button:focus-visible,
#autocomplete label:focus-visible,
.skiplink:focus-visible,
.navbar-toggler-icon:focus-visible,
#leafletkaart button:focus-visible,
#leafletkaart a:focus-visible,
#leafletkaart #map:focus-visible {
    outline: 4px solid #D20019 !important;
    z-index: 10 !important;
}

*:-moz-focusring {
    outline: 4px solid #D20019 !important;
    z-index: 10 !important;
}

/* FOCUS UITZONDERINGEN ----------------------------------------------- */
#mainmenu *:focus-visible,
.footer a:focus-visible,
.cookiealert a:focus-visible,
.cookiealert .btn:focus-visible,
.creditsfototekst:focus-visible,
a.socialkanalen:focus-visible,
.zwevendeknop a.btn-circle.btn-lg:focus-visible,
a.navbar-toggler:focus-visible,
a.navbar-brand:focus-visible {
	outline: 4px solid #FFE700 !important;
}

/* SKIPLINKS ----------------------------------------------- */
.skiplink {
	position: absolute;
	top: -1000px;
	left: -1000px;
	height: 1px;
	width: 1px;
	text-align: left;
	overflow: hidden;
	z-index: 9;
}

a.skiplink:focus-visible {
	left: 15px;
	top: 10px;
	width: auto;
	height: auto;
	overflow: visible;
    z-index: 1000 !important
} 


/* AANPASSING INPUT-VELDEN FORMULIEREN EN ZOEKBOX ----------------------------------------------- */
.form-control {
	border: 1px solid var(--bs-secondary);
}

/* AANPASSING HOVER KNOPPEN, OA ZOEKMACHINE ----------------------------------------------- */
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
  	background-color: var(--bs-success);
}

/* AANPASSING LINKJES IN MENU, LIJSTEN EN KNOPPEN ----------------------------------------------- */
.nav-link:hover, .list-group-item:hover, .btn:hover {
	text-decoration: underline;
}

/* FOOTER ----------------------------------------------- */
.footer {
    background-image: linear-gradient(to left, rgba(0,53,82,1), rgba(0,53,82,0.8)) !important;
    clip-path: none !important;
    margin-bottom: 0px !important;
}

.footer a {
	text-decoration: underline;
	color: #ffffff;
}

.footer a:hover {
	background-color: var(--bs-primary);
	color: #ffffff;
  	padding: 2px 5px 2px 5px;
}

/* SOCIAL MEDIA KNOPPEN IN FOOTER ----------------------------------------------- */
.socialkanalen {
    width:  45px;
    height: 45px;
    padding: 8px 0px 0px 0px;
    border-radius: 40px;
    border: none;
    margin-right: 5px;
}

a.socialkanalen:hover {
	outline: 2px solid var(--bs-warning); 
}  

/* AANPASSINGEN KOPPEN | AFWIJKENDE KLEUR VOOR WCAG ----------------------------------------------- */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	color: var(--bs-primary);

}

/* AANPASSING WCAG, AFBREKEN BIJ 400% ZOOM ---------------------------------------- */
.contentbody .h1, 
.contentbody .h2, 
.contentbody .h3, 
.contentbody .h4, 
.contentbody .h5, 
.contentbody .h6, 
.contentbody h1, 
.contentbody h2, 
.contentbody h3, 
.contentbody h4, 
.contentbody h5, 
.contentbody h6 {
    word-break: break-word !important;
}

.contentbody h1 {
    font-size: 2.0em; 
	font-weight: 600;
}

@media only screen and (max-width: 768px) {
    .contentbody h1 {
         font-size: 1.8em; 
    }
}

.contentbody h1.h2 {
	font-size: 1.8em;
	margin: 25px 0px 10px 0px;
	font-weight: 600;
}

.contentbody h2 {	
  	font-size: 1.6em;
	margin: 25px 0px 10px 0px;
	font-weight: 600;
}

.contentbody h3,
.contentbody h2.h3 {
	font-size: 1.3em;
	margin: 25px 0px 10px 0px;
  	font-weight: 600;
}

.contentbody h4,
.contentbody h2.h4 {
	font-size: 1.1em;
	margin: 25px 0px 10px 0px;
    font-weight: 600;
}

.contentbody h5,
.contentbody h2.h5 {
	font-size: 1.0em;
	margin: 25px 0px 10px 0px;
    font-weight: 600;
}

/* HORIZONTALE LIJN IN CONTENT ----------------------------------------------- */
.contentbody hr {
	height: 1px;
    color: var(--bs-primary);
    background-color: var(--bs-primary);
    border: none;
    margin: 0px;
    opacity: 1;
}

/* NIEUWSOVERZICHT ACTUEEL ----------------------------------------------- */
.nieuwsoverzicht .nieuwsfoto img {
    max-height: 300px;
    width: 200px;
}

.nieuwsoverzicht .btn-primary {
    height: calc(100% - 35px) !important;
}

/* NIEUWSOVERZICHT HOMEPAGE ----------------------------------------------- */
img.nieuwsfotohp {
    width: 100vw;
    height: 175px;
    object-fit: cover;
    object-position: 0 0;
	clip-path: polygon(0 0, 100% 0, 100% 83%, 0% 100%);
	border-bottom-left-radius: 110px 70px !important;
    padding: 1px;
}

.nieuwsteksthp {
    position: relative;
    top: -35px; 
    line-height: 1.2em;
}

#nieuwsoverzichthomepage .btn-primary {
    height: calc(100% - 50px) !important;
}

/* NIEUWSBERICHTEN MET REDIRECT ICOONTJE EXTERNE LINKS GEVEN */
.nieuws a h2.extern::after,
.nieuws a h2.externelink::after,
.nieuwsoverzicht a h2.extern::after,
.nieuwsoverzicht a h2.externelink::after {
	content: url("/Afbeeldingen/Icoontjes%20toptakensite/Externe%20link wit.png") !important;
	display: inline-block;
	margin: 0px 0px 0px 5px;
}

/* API EVENEMENTEN GASTVRIJ WEERT ----------------------------------------------- */
img.eventimage {
	width: 325px;
}

li.event:hover {
    outline: 4px solid #ffba18 !important;
}

li.event:hover a.btn {
    outline: 0px !important;
}

#evenementenkalender .omschrijvingkort strong,
#evenementenkalender .omschrijvinglang strong {
	font-weight: normal !important; 
}

#evenementenkalender .omschrijvinglang {
    margin-bottom: 5px;
    padding-bottom: 5px;
    max-height: 150px;
    overflow:hidden;
    text-overflow: ellipsis;
    content: "";
    background: -webkit-linear-gradient(top,#000 70%, transparent);
   -webkit-background-clip: text;
   -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
}

/* KNOPPEN DELEN SOCIAL MEDIA ----------------------------------------------- */
.knopsocialmedia {
	background-repeat: no-repeat;
	padding: 10px 10px 30px 45px;
	height: 40px;
	margin: 0px 10px 0px 10px;
	float: left;
}

.facebook {
	background-image: url("/Afbeeldingen/Icoontjes%20toptakensite/Social%20media%20delen/Facebook.png");
}

.x {
	background-image: url("/Afbeeldingen/Icoontjes%20toptakensite/Social%20media%20delen/X.png");
}


.linkedin {
	background-image: url("/Afbeeldingen/Icoontjes%20toptakensite/Social%20media%20delen/Linkedin.png");
}


.whatsapp {
	background-image: url("/Afbeeldingen/Icoontjes%20toptakensite/Social%20media%20delen/Whatsapp.png");
}

.facebook, .x, .linkedin, .whatsapp {
	background-position: 3px 3px; 
}

/* MENU SUB-PAGINA'S ----------------------------------------------- */
.list-group-item-action:hover {
	background-color: #ffffff;
	color: #000000;
}

/* READSPEAKER VOORLEESFUNCTIE ----------------------------------------------- */
#xp1 button {
	color: var(--bs-secondary);
}

#xp1 .rsbtn_stop {
	color: #e1001a;
}

#xp1 .rsbtn_pause {
  	color: var(--bs-success);
  	padding-left: 28px;
}

#rsbtn_scrollcontrols {
	position: fixed !important;
	right: 80px !important;
	bottom: 30px !important;
}

#xp1.rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle, .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle {
    border-radius: 0;
    width: 20px;
    height: 26px;
    top: 1px;
    border: 0;
    border-right: 1px solid #677077;
    left: 1px;
}

.sync_sent_highlighted {
	background-color: #f9ec8a !important;
  	color: #000000 !important;
}

.sync_word_highlighted {
  	background-color: var(--bs-danger) !important;
    color: #ffffff !important;
}

/* ICOONTJE IN DOWNLOADS-OVERZICHTEN ----------------------------------------------- */
.downloads a {
	background: url("/afbeeldingen/Icoontjes toptakensite/Download.png") no-repeat;
	padding: 3px 0px 3px 30px;
    background-size: 20px 25px;
}

/* AFBEELDING IN DE KOP > ACHTERGROND WEGHALEN ----------------------------------------------- */ 
.uitklappenkop.afbeelding .collapsed {
	background-color: transparent;
}

.uitklappenkop.digitaal a,
.uitklappenkop.balie a {
	background: transparent;
}

/* KNOP ONLINE REGELEN DIGITAAL LOKET ----------------------------------------------- */ 
.onlineregelen .btn {
    font-size: 1.5em !important;
}

.onlineregelen.afspraak .btn {
    font-size: 1.1em !important;
}

.onlineregelen ul {
	list-style: none;
	padding: 0;
}

.onlineregelen li
 {
	margin: 15px 0px 0px 0px;
	padding: 0px 0px 0px 35px;
}

.onlineregelen li.afspraak {
	background: url("/Afbeeldingen/Icoontjes toptakensite/Online regelen/Afspraak.png") no-repeat left top; 
}

.onlineregelen li.iburgerzaken,
.onlineregelen li.Iburgerzaken,
.onlineregelen li.djuma,
.onlineregelen li.Djuma,
.onlineregelen li.Pip,
.onlineregelen li.pip,
.onlineregelen li.parkeerloket,
.onlineregelen li.Parkeerloket,
.onlineregelen li.externelink,
.onlineregelen li.extern {
	background: url("/Afbeeldingen/Icoontjes toptakensite/Online regelen/formulier.png") no-repeat left top;
}

.onlineregelen li.pdf {
	background: url("/Afbeeldingen/Icoontjes toptakensite/Online regelen/pdf.png") no-repeat left top; 
}

.onlineregelen li.mindervaliden {
	background: url("/Afbeeldingen/Icoontjes toptakensite/Online regelen/mindervaliden.png") no-repeat left top; 
}

/* KLIKBARE AFBEELDING (MODAL) -------------------------- */
.afbeeldingmodal {
  	padding: 5px; 
}	

.afbeeldingmodal p {
	padding: 0px 30px 5px 5px;
	background-image: url('/Afbeeldingen/Icoontjes toptakensite/Vergroten.png');
	background-repeat: no-repeat;
	background-position: 99% 0%;
    text-align: left; 
}

.afbeeldingmodal img:hover {
  	cursor: pointer;
}

.afbeeldingmodal img {
  	object-fit: cover;
}

.afbeeldingmodal .btn img {
	width: 30px;
	height: 100%;
}

.afbeeldingmodal,
.afbeeldingmodal .img-thumbnail {
	max-width: 500px; 
}

.modal-backdrop {
    background-color: #000000;
  	opacity: 0.9 !important;
}

/* FOTOGALERIJ (CAROUSEL OF THUMBNAILS) -------------------------- */
.foto .carousel-control-prev,
.foto .carousel-control-next{
	height: 50px;
	width: 50px;
    border-radius: 50%;
    background-color: #000000;
	position: absolute;
	top: 45%;
	margin: 0px 5px 0px 5px;
    opacity: 1.0;
    border: 2px solid #ffffff;
}

.foto .carousel-item .img-fluid {
	width: 90%;
}

.fotogalerijthumbs .img-thumbnail {
    overflow: hidden;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.fotogalerijthumbs #image-gallery-image,
.afbeeldingmodal .modal-body .img-thumbnail {	
	cursor: default;
    max-height: 80vh;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {	
	outline: 4px solid #ffba18;
}

/* CALL TO ACTION KNOPPEN -------------------------- */
.calltoaction {
    background-image: url("/afbeeldingen/Icoontjes toptakensite/Knoppen/Pijl rechts.png");
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: 10px 12px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background-color: var(--bs-success);
    color: #ffffff;
    padding: 10px 10px 10px 40px;
    display: inline-block;
    text-decoration: none !important;
    font-size: 1.1em;
    margin-bottom: 15px;
}

.calltoaction:hover {
    background-color: #35811a;
  	color: #ffffff;
	text-decoration: underline !important;
}

/* EXTRA INSTELLING VOOR ZOEKRESULTATEN UITGEBREID ZOEKEN -------------------------- */
.searchresults .list-group a:after {
	float: right; 
    position: absolute;
    top: 10px;
    right: 10px;
}

.searchresults li {
	list-style: none !important;
}

/* SIDEMENU -------------------------- */

.sidemenu .menuitems .list-group-item {
	background-color: transparent;
  	word-wrap: break-word;
}

.sidemenu .card-header {
  	background-color: transparent;
}

.sidemenu .list-group-item {
  	cursor: pointer;
}

.sidemenu h2.h5 {
	font-size: 1em;
}

/* COOKIES EN FORMULIER NIEUWSBRIEF CHECKBOX OF RADIO-BUTTONS -------------------------- */
.nieuwsbrief input[type="checkbox"],
.nieuwsbrief input[type="radio"],
.cookies input[type="checkbox"], 
.cookies input[type="radio"],
.contentbody input[type="checkbox"], 
.contentbody input[type="radio"] {
	height: 30px;
	width: 30px; 
    vertical-align: top;
    accent-color: var(--bs-success);
	margin: 0px 5px 0px 0px;
}

.nieuwsbrief input[type="radio"]:hover, 
.nieuwsbrief input[type="checkbox"]:hover, 
.nieuwsbrief label:hover,
.cookies input[type="radio"]:hover, 
.cookies input[type="checkbox"]:hover, 
.cookies label:hover {
    cursor: pointer;
}


/* TEST NIEUWSBRIEF VERBERGEN ---------------------------------------- */
#doelgroep_114733, 
label[for="doelgroep_114733"]
{
    display:none;
}

/* HAMBURGER MENU MOBIEL ANDERE AFBEELDING -------------------------- */
.navbar-dark .navbar-toggler-icon {
    background-image: url("/Afbeeldingen/Icoontjes Toptakensite/Knoppen/Menu.png");
	background-repeat: no-repeat;
}

.navbar-dark .navbar-toggler {
  border: none;
}


/* FORMULIEREN -------------------------- */
.invalid-feedback {
	color: #e1001a;
	font-size: 1em;
    font-weight: bold;
}

.valid-feedback {
	color: #077603;
	font-size: 1em;
    font-weight: bold;
}

form label.h3 {
	font-size: 1.3em;
}

form label.h2 {
	font-size: 1.3em;
}


/* ACHTERGROND INPUT-VELDEN IN CHROME -------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
} 

/* AANPASSINGEN TOEGANKELIJKHEID WCAG -------------------------- */
.formulier input {
	background-color: transparent !important;
}

input.zoeken {
	background-color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus-visible {
	background-color: #197814 !important;
}

/* ZOEKMACHINE AUTOCOMPLETE -------------------------- */
#autocomplete.bg-white {
	background-color: rgba(255, 255, 255, 1) !important;
}

.toptaakzoeken .btn a {
	display: block;
    display: -webkit-flex;
	display: flex;
}

.toptaakzoeken a {
	display: block;
	justify-content: left;
	white-space: normal;
	text-align: left;
	min-height: 75px;
	line-height: 1em;
	padding: 15px 15px 15px 35px;
	background-image: url("/Afbeeldingen/Icoontjes Toptakensite/Pagina.png");
	background-repeat: no-repeat;
	background-position: 10px 15px;
	color: var(--bs-primary);
    word-wrap: break-word;
}

.subtaakzoeken {
  	display: block;
	justify-content: left;
	white-space: normal;
	text-align: left;
	padding: 5px 5px 7px 30px; 
	background-image: url("/Afbeeldingen/Icoontjes Toptakensite/Pagina klein.png");
	background-repeat: no-repeat;
	background-position: 0px 5px;
	color: var(--bs-primary);
  	word-wrap: break-word; 
	font-size: 1.1em;
}

a.toptaakzoeken:hover,
a.subtaakzoeken:hover {
    display: block;
	justify-content: left;
	white-space: normal;
	text-align: left;
	padding: 5px 5px 7px 30px; 
	background-image: url("/Afbeeldingen/Icoontjes Toptakensite/Pagina klein.png");
	background-repeat: no-repeat;
	background-position: 0px 5px;
	color: var(--bs-primary);
  	word-wrap: break-word; 
	font-size: 1.1em;
  	background-color: var(--bs-info);
	color: #000000 !important;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

#autocomplete {
	display: none;
	overflow: hidden;
	text-overflow: ellipsis;
	position: absolute;
	z-index: 10000;
}

/* ZOEKMACHINE AUTOCOMPLETE IN DE NAVIGATIEBALK -------------------------- */
#autocomplete.navbar {
	display: none;
	overflow: hidden;
	text-overflow: ellipsis;
	background: #f1f1f1;
	position: absolute;
	z-index: 10000;
	padding: 10px;
	margin-right: 0px;
	border: 1px solid var(--bs-secondary);
	top: 70px;
	right: 0px;
	width: 718px;
}

#autocomplete.navbar .list-group {
  	width: 100%;
}

@media only screen and (max-width : 992px) {
	#autocomplete.navbar {
      position: relative;
      top: 10px;
      left: 0px;
      width: 100%; } 
}

/* ZOEKMACHINE ZOEKRESULTATEN  -------------------------- */
.searchresults .list-group-item:hover {
	text-decoration: none;
}

.searchresults .list-group-item:hover h2 {
	text-decoration: underline;
}

.searchresults .list-group-item h2 { 
	font-size: 1.3em;
}

.searchresults .list-group-item:hover {

}

/* ZOEKRESULTATEN LIJST FACETS -------------------------- */
.facet {
	width: 25px;
  	height: 25px;
  	font-size: 1em;
  	font-weight: bold;
}

.esfacet .list-group-item {
	margin: 0px 0px 5px 0px;
} 

.esfacet .list-group-item.active {
  	background: var(--bs-success);
    color: #ffffff;
    border-bottom: 1px solid #b2b4b2;
	border-top: 1px solid #b2b4b2;
}

/* PAGINERING -------------------------- */
.pagination>li>a, .pagination>li>span {
	border: 1px solid #b2b4b2;
	padding: 11px;
}

/* AANPASSING KLEINE SCHERMEN  -------------------------- */
@media (max-width: 992px) { 
  .pagination>li>a, .pagination>li>span {
      border: 1px solid #b2b4b2;
      padding: 10px;
  }
}

.pagination>li:first-of-type > a, .pagination>li.disabled:first-of-type > a  {
	border: 1px solid #b2b4b2;
}

.pagination>li:last-of-type > a {
	border: 1px solid #b2b4b2;
}

.pagination>li:hover a {
	background: var(--bs-secondary);
	color: #ffffff;
	border: 1px solid var(--bs-secondary);
}

/* COOKIEALERT -------------------------- */
.cookiealert {
	z-index: 20;
}

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

/* SMILEYS KLANTTEVREDENHEID -------------------------- */

  
.klanttevredenheid label > input[type = 'radio'] ~ span{
    cursor: pointer;
    height: 45px;
    display: inline-block;
    background-size: 45px 45px;
    background-repeat: no-repeat;
    padding-left: 45px;
    text-decoration: underline;
}
  
.klanttevredenheid label span:hover {
    text-decoration: none !important;
}

.tevreden {
    background-image: url('/Afbeeldingen/Icoontjes toptakensite/Klanttevredenheid/Tevreden-grijs.png');
}

.neutraal{
    background-image: url('/Afbeeldingen/Icoontjes toptakensite/Klanttevredenheid/Neutraal-grijs.png');
}
  
.ontevreden{
    background-image: url('/Afbeeldingen/Icoontjes toptakensite/Klanttevredenheid/Ontevreden-grijs.png');
}
  
.klanttevredenheid label > input[type = 'radio']:checked ~ span.tevreden{
     background-image: url('/Afbeeldingen/Icoontjes toptakensite/Klanttevredenheid/Tevreden.png');
}

.klanttevredenheid label > input[type = 'radio']:checked ~ span.neutraal{
    background-image: url('/Afbeeldingen/Icoontjes toptakensite/Klanttevredenheid/Neutraal.png');
}

.klanttevredenheid label > input[type = 'radio']:checked ~ span.ontevreden{
    background-image: url('/Afbeeldingen/Icoontjes toptakensite/Klanttevredenheid/Ontevreden.png');
}

#klanttevredenheidsmileys input[type="radio"] {
	height: 15px;
	width: 15px; 
    vertical-align: top;
    accent-color: var(--bs-success);
	margin: 0px 0px 0px 0px;
}

/* AANPASSINGEN ALERT-BOXEN TOEGANKELIJKHEID WCAG -------------------------- */
.alert-primary a,
.alert-secondary a,
.alert-warning a,
.alert-danger a,
.alert-primary h2,
.alert-secondary h2,
.alert-warning h2,
.alert-danger h2,
.alert-primary h3,
.alert-secondary h3,
.alert-warning h3,
.alert-danger h3,
.alert a {
  	color: var(--bs-primary) !important;
}

.alert-success h2,
.bg-success h2,
.bg-danger h2,
.alert-success h3,
.bg-success h3,
.bg-danger h3,
.alert-success h4,
.bg-success h4,
.bg-danger h4,
.alert-success h5,
.bg-success h5,
.bg-danger h5 {
  	color: #000000 !important;
}

/* TABELLEN ACHTERGRONDKLEUR AANPASSEN (MEER CONTRAST GRIJZE REGELS MET LINKS IVM TOEGANKELIJKHEID WCAG) -------------------------- */

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
	background-color: #FCFCFC;
}

.table-striped > tbody > tr > td a {
	color: #0470a7;
}

/* TABELLEN KLEINE SCHERMEN SCROLLBALK TONEN  -------------------------- */

@media(max-width:767px){
  .table-responsive{overflow-x:scroll;}
}

/* CURSOR BIJ KLIKBARE CARDS / AFBEELDINGEN -------------------------- */
.klikbaar:hover,
img.thumbnail:hover {
	cursor: pointer;
    z-index: 1;
}

/* ZWEVENDE KNOP NAAR BOVEN -------------------------- */
.zwevendeknop a.btn-circle.btn-lg {
    width:  55px;
    height: 55px;
    padding: 5px 0px 0px 0px;
    border-radius: 35px;
    position: fixed;
    right: 15px;
	bottom: 30px;
    z-index: 1000 !important;
}

/* LOSSE KNOP IN LETTERLIST NAAR BOVEN -------------------------- */
a.naarboven {
    width:  40px;
    height: 40px;
    padding: 5px;
    border-radius: 20px;
    float: right;
}

a.naarboven img {
	width: 20px;
}

/* STRIPES -------------------------- */

.stripesgeel {
	background: repeating-linear-gradient(135deg, var(--bs-warning), var(--bs-warning) 10px, #000000 10px, #000000 20px); 
  	height: 10px;
}  

.stripesrood {
	background: repeating-linear-gradient(135deg, #e1001a, #e1001a 10px, #ffffff 10px, #ffffff 20px); 
  	height: 10px;
    border: 1px solid #e1001a;
}  

.stripeslblauw {
	background: repeating-linear-gradient(135deg, var(--bs-primary), var(--bs-primary) 10px, #ffffff 10px, #ffffff 20px); 
  	height: 10px;
    border: 1px solid var(--bs-primary);
} 

.stripesdblauw {
	background: repeating-linear-gradient(135deg, var(--bs-secondary), var(--bs-secondary) 10px, #ffffff 10px, #ffffff 20px); 
  	height: 10px;
    border: 1px solid var(--bs-secondary);
}  

.stripeskermis {
	background: repeating-linear-gradient(135deg, #e60166, #e60166 10px, #6d2285 10px, #6d2285 20px); 
  	height: 10px;
    border: 1px solid var(--bs-secondary);
} 

/* QUOTES -------------------------- */
.quote::before {
    display: block;
    margin-top: 2.0rem;
    margin-bottom: 0rem;
    content: "\201C";
    color: #b2b4b2;
    font-size: 7rem;
    line-height: 0em; 
    font-family: Georgia, Roboto, "Segoe UI", Arial, Verdana;
}

/* UITKLAPPEN ACCORDION -------------------------- */
.accordion-header button {
	font-size: 0.8em;
    color: var(--bs-primary);
    font-weight: 500 !important; 
    text-decoration: underline;
}

.accordion-header button:hover {
	text-decoration: none;
    background-color: #f1faff;
    color: #000000 !important;
}

.accordion-item {
	background-color: transparent !important;
}


/*.accordion-button:not(.collapsed) {
	color: #000000;
    background-color: #ededed !important;
}
*/

/* ACHTERGROND ACCORDIONS TRANSPARANT MAKEN ---------------------------------------- */
#contentbody #accordion .accordion-item {
	background-color: transparent !important;
}

/* DIRECTORY TONEN -------------------------- */
#directorytonen h2 button.collapsed::before {
	content: url("/Afbeeldingen/Icoontjes Toptakensite/MapDicht.png");
        padding: 3px 10px 0px 0px;
}

#directorytonen h2 button::before {
    content: url("/Afbeeldingen/Icoontjes Toptakensite/MapOpen.png");
    padding: 3px 10px 0px 0px;
}

/* AANPASSINGEN KLEUREN TOEGANKELIJKHEID WCAG -------------------------- */
.text-danger {
	color: #e1001a !important;
}

/* GESELECTEERDE AFBEELDINGEN IN BIJV. MODALS GEEN KLEUR GEVEN -------------------------- */
img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* AFBEELDINGEN MET RAND 
img.border {
	padding: 3px !important;
}
-------------------------- */

/* RESET BUTTONS OA READSPEAKER - SAFARI BROWSERS -------------------------- */
	[type="button"],
    	[type="reset"],
        [type="submit"] {
            -webkit-appearance: none!important;
        }

/* EXTRA CLASSES FONTAWESOME -------------------------- */
.fa-outline {
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

/* GOOGLE TRANSLATE
.goog-te-combo {
	font-size: 1.5em;
  	background-color: #ededed;
  	font-weight: bold;
  	padding: 10px;
    border-radius: 20px;
}
*/

/* ICOONTJE EXTERNE LINKS -------------------------- */
img.externelink {
	 margin: -5px 0px 0px 5px;
}

/* ICOONTJE EXTERNE LINKS - UITZONDERINGEN (NIET TONEN) -------------------------- */
.toegankelijkheidknoppen img.externelink,
.socialkanalen img.externelink,
.knopsocialmedia a img.externelink,
.geenicoontje .externelink,
#readspeaker_button1 .externelink {
	display: none;
}

/* ICOONTJE EXTERNE LINKS - UITZONDERINGEN KNOPPEN, WIT ICOONTJE -------------------------- */
a.btn.btn-primary img.externelink,
a.btn.btn-secondary img.externelink,
a.btn.btn-success img.externelink,
a.btn.btn-danger img.externelink,
a.btn.btn-warning img.externelink,
a.btn.btn-dark img.externelink,
a.calltoaction img.externelink {
    margin-left: 10px;
    filter: invert(19%) sepia(100%) saturate(100%) hue-rotate(180deg) brightness(200%) contrast(100%);
}

/* NAVIGATIEMENU SUBSITES -------------------------- */
#menusubsite a.active,
.tab-button.active {
	background-color: var(--bs-primary) !important; 
    border-color: var(--bs-primary) !important;
}

/* LIJSTEN ZONDER OPSOMMINGSTEKEN -------------------------- */
ul.geenliststyle {
	list-style: none;
}

/* ACHTERFGRONDAFBEELDING KEPER -------------------------- */
#keper {
    background-image: url("/Afbeeldingen/Vormgeving/Keper.png") !important;
    background-position: bottom 0px left 0px !important;
    background-repeat: no-repeat !important;
    /*Prevent showing multiple background images*/
    background-attachment: fixed !important;
	/*    background-size: 100% !important;*/
}
  
@media only screen and (max-width: 576px) {
    #keper {
        background-size: 60% !important;
    }
}
  
@media only screen and (min-width: 576px) AND (max-width: 1600px)  {
    #keper {
        background-size: 20% !important;
    }
}

/* RONDE HOEKEN BIJ COMPONENTEN DIE GEEN BOOTSTRAP ROUNDED HEBBEN ---------------------------------------- */
#contentbody .card,
#contentbody .alert-danger,
#contentbody .alert-primary,
#contentbody .alert-light,
#contentbody .alert-warning,
#contentbody blockquote,
#contentbody .accordion-button,
#contentbody img.border.rounded,
#contentbody .ratio.ratio-16x9,
#contentbody .ratio.ratio-16x9 iframe {
	border-radius: 20px !important;
}

#contentbody .accordion-body {
	border-radius: 0px 0px 20px 20px !important;
	margin: 0px 5px 0px 5px;
}

/* MARGE TOEGANKELIJKHEID KNOPPEN ---------------------------------------- */
@media only screen and (min-width: 1200px) {
    #toegankelijkheid {
        margin-top: -40px !important;
    }
}

/* LEAFLET KAARTEN  -------------------------- */
#leafletkaart,
.leafletkaart {
	z-index: 0 !important;
}

#leafletkaart iframe,
.leafletkaart iframe {
	width: 100%;
	height: 100%;
}

#leafletkaart,
.leafletkaart{
	height: 60vh;
}

img.leaflet-tile, img.leaflet-marker-icon, img.leaflet-marker-shadow {
    /* work-around from here: https://github.com/Leaflet/Leaflet/issues/161 */
    outline: 1px solid transparent;
    /* work-around from here: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
    mix-blend-mode: normal !important;
}

/* HEADER FOTO -------------------------- */
#headerfotoimg,
#headerfotoimgnoscript {
	width: 100% !important;
	object-fit: cover !important;
}

/* AANPASSING KLEINE SCHERMEN  -------------------------- */
@media (max-width: 768px) { 
  
  #headerfotoimg, #headerfotoimgnoscript {
      height: 150px !important;
      object-fit: cover  !important;
      object-position: 50% 100% !important;
    }
  
}

/* ANIMATIE HEADERFOTO -------------------------- */
#headerfoto img {
    animation: fadeInAnimation ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}


/* WEGHALEN ACHTERGROND BIJ GEMARKEERDE WOORDEN (PER ONGELUK OPGESLAGEN CHECK U-VORM) -------------------------- */

mark {
	background-color: transparent;
}	


/* BEHEERTOOLS ---------------------------------------------- */

table#tabel th {
	position: sticky;
    top: 0;
    cursor: pointer;
}

/* DARK MODE KNOP IMAGE ----------------------------------------------- */

.toggledarkmodeswitch {
  width: 35px !important;
  height: 20px; 
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--bs-success) !important;
}

.toggledarkmodelabel {
	vertical-align: top;
}
  
.toggledarkmodeimage {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    vertical-align: top;
}

.toggledarkmodeimage.dark {
	background-image: url("/Afbeeldingen/Icoontjes toptakensite/Knoppen/Dark.png");
}

.toggledarkmodeimage.light {
	background-image: url("/Afbeeldingen/Icoontjes toptakensite/Knoppen/Light.png");
}

.toggledarkmode:hover,
.toggledarkmode label:hover {
   cursor: pointer !important;
}

/* AFBEELDING EN KLEUR VAN DE SWITCH KNOP ----------------------------------------------- */
.form-switch input.toggledarkmodeswitch.form-check-input { 
	background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"%3E%3Ccircle cx="10" cy="10" r="10" fill="%23003552" /%3E%3C/svg%3E') no-repeat 10% 2px;
	background-color: #ffffff;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}

.form-switch input.toggledarkmodeswitch.form-check-input:checked { 
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"%3E%3Ccircle cx="10" cy="10" r="10" fill="%23178711" /%3E%3C/svg%3E') no-repeat 90% 2px;
	background-color: #ffffff;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}

/* VERTICALE TABS ----------------------------------------------- */
.verticaltabs .active img {
	filter: brightness(0) invert(1) !important;
}

.verticaltabs .active {
	color: #ffffff !important;
}


/* DYSLEXIE KNOP  ----------------------------------------------- */
@font-face {
  font-family: "OpenDyslexicRegular";
  src: url('/designs/top/dyslexicfont/OpenDyslexic-Regular.otf') format('opentype'); 
}

@font-face {
  font-family: "OpenDyslexicBold";
  src: url('/designs/top/dyslexicfont/OpenDyslexic-Bold.otf') format('opentype'); 
}

@font-face {
  font-family: "OpenDyslexicBoldItalic";
  src: url('/designs/top/dyslexicfont/OpenDyslexic-BoldItalic.otf') format('opentype'); 
}

@font-face {
  font-family: "CarosSoftItalic";
  src: url('/Designs/krijghetvoorelkaar/webfont/CarosSoftItalic.woff2') format('opentype'); 
}  
  
.dyslexie {
    font-family: 'OpenDyslexicRegular', sans-serif;
}

.toggledyslexieswitch {
    width: 35px !important;
    height: 20px; 
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--bs-success) !important;
}

.toggledyslexielabel {
	vertical-align: top;
}
 
.toggledyslexieimage {
  	background-image: url("/Afbeeldingen/Icoontjes toptakensite/Knoppen/Dyslexie.png");
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    border-radius: 50%;
    vertical-align: top;
}

.toggledyslexie:hover,
.toggledyslexie label:hover {
   cursor: pointer !important;
}

/* AANPASSINGEN BIJ DYSLEXIE ----------------------------------------------- */
.dyslexie .toptaak .btn,
.dyslexie .subtaak .btn {
    min-height: 100px !important;
}

.dyslexie .toptaak .icoontje,
.dyslexie .subtaak .icoontje{
    margin-bottom: 20px;
}

/* AFBEELDING EN KLEUR VAN DE SWITCH KNOP ----------------------------------------------- */
.form-switch input.toggledyslexieswitch.form-check-input { 
	background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"%3E%3Ccircle cx="10" cy="10" r="10" fill="%23003552" /%3E%3C/svg%3E') no-repeat 10% 2px;
	background-color: #ffffff;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}

.form-switch input.toggledyslexieswitch.form-check-input:checked { 
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"%3E%3Ccircle cx="10" cy="10" r="10" fill="%23178711" /%3E%3C/svg%3E') no-repeat 90% 2px;
	background-color: #ffffff;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}

/* DARK MODE ----------------------------------------------- */
[data-bs-theme="dark"] body {
    background-color: #353535 !important;
  }

/* KLEUR KEPER RECHTSBOVEN ----------------------------------------------- */
[data-bs-theme="dark"] #achtergrond {
	filter: brightness(1) invert(1);
}
  
[data-bs-theme="dark"] #keper {
    background-image: url("/Afbeeldingen/Vormgeving/Keper dark mode.png") !important;
}
  
 /* WITTE KADERS IN BODYDEEL ----------------------------------------------- */
[data-bs-theme="dark"] #contentbody .bg-white {
	background-color: rgba(0, 0, 0, 0.3) !important;
}

/* TABELLEN IN BODY ----------------------------------------------- */
[data-bs-theme="dark"] table th,
[data-bs-theme="dark"] table td {
	background-color: transparent !important;
	color: #ffffff !important;
}

/* ICOONTJES TOP- EN SUBTAKEN WIT MAKEN ----------------------------------------------- */
[data-bs-theme="dark"] .toptaak img,
[data-bs-theme="dark"] .subtaak img {
	filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(180deg) brightness(200%) contrast(100%);
}

/* TOPTAKEN KNOPPEN ----------------------------------------------- */  
[data-bs-theme="dark"] .contentbody .toptaken a  {
	background-color: var(--bs-secondary) !important;
	border: 0px !important;
	color: #ffffff !important;
}
  
/* SUBTAKEN KNOPPEN ----------------------------------------------- */    
[data-bs-theme="dark"] .subtaak a {
	background-color: #424245 !important;
	color: #ffffff !important;
} 

/* KNOPPEN READSPEAKER EN GOOGLE TRANSLATE ----------------------------------------------- */
[data-bs-theme="dark"] #toegankelijkheid .btn {
	background-color: var(--bs-secondary) !important;
	color: #ffffff !important;
	border: 0px !important;
	margin: 0px 2px 0px 0px !important;
}
 
/* KNOPPEN READSPEAKER EN GOOGLE TRANSLATE PLAATJES KNOPPEN ----------------------------------------------- */
[data-bs-theme="dark"] #toegankelijkheid .btn img {
	filter: brightness(0) invert(1);
}

/* OMZETTEN DONKER BLAUWE KLEUR ----------------------------------------------- */ 
[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .footer.bg-secondary,
[data-bs-theme="dark"] .cookiealert.bg-secondary {
	background-color: var(--bs-secondary) !important;
}

/* OMZETTEN LICHT BLAUWE KLEUR ----------------------------------------------- */  
[data-bs-theme="dark"] .bg-secondary {
	background-color: var(--bs-primary) !important;
}

/* KOPPEN EN LINKJES WIT MAKEN */   
[data-bs-theme="dark"] .contentbody .bg-white h1,
[data-bs-theme="dark"] .contentbody .bg-white .h1,
[data-bs-theme="dark"] .contentbody .bg-white h2,
[data-bs-theme="dark"] .contentbody .bg-white .h2,
[data-bs-theme="dark"] .contentbody .bg-white h3,
[data-bs-theme="dark"] .contentbody .bg-white .h3,
[data-bs-theme="dark"] .contentbody .bg-white h4,
[data-bs-theme="dark"] .contentbody .bg-white .h4,
[data-bs-theme="dark"] .contentbody .bg-white h5,
[data-bs-theme="dark"] .contentbody .bg-white .h5,
[data-bs-theme="dark"] .contentbody .bg-white ul li,
[data-bs-theme="dark"] .contentbody .bg-white ul li a,
[data-bs-theme="dark"] .subtaak a,
[data-bs-theme="dark"] .toptaken,
[data-bs-theme="dark"] .subtaken,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .text-black {
	color: #ffffff !important;
}
  
/* KNOPPEN BEHEERTOOLS ----------------------------------------------- */    
[data-bs-theme="dark"] .beheertools.knoppen .btn,
[data-bs-theme="dark"] .beheertools.knoppen .toast {
	color: #000000 !important;
} 

/* RANDEN ----------------------------------------------- */  
[data-bs-theme="dark"] .border-secondary,
[data-bs-theme="dark"] .border-primary,
[data-bs-theme="dark"] .border-1 {
	border-color: #ffffff !important;
}

/* ICOONTJES AANPASSEN */
[data-bs-theme="dark"] #skiplinkinhoud .icoontje,
[data-bs-theme="dark"] .kruimelpad img,
[data-bs-theme="dark"] .downloadslink,
[data-bs-theme="dark"] .tijdlijn1,
[data-bs-theme="dark"] .tijdlijn2 {
		filter: brightness(3) invert(0);
}
  
[data-bs-theme="dark"] .tijdlijn2 .bg-success,
[data-bs-theme="dark"] .tijdlijn2 .bg-success {
		 background-color: #000000;
}

/* LINKJES IN BODYDEEL ----------------------------------------------- */ 
[data-bs-theme="dark"] #skiplinkinhoud * a {
	color: #ffffff;
	text-decoration: underline;
}

/* NIEUWS DATUM ----------------------------------------------- */ 
[data-bs-theme="dark"] .nieuwsteksthp span.text-black {
	color:  #000000 !important;
}
 
/* MODALS ----------------------------------------------- */  
[data-bs-theme="dark"] .modal h2,
[data-bs-theme="dark"] .modal h3,
[data-bs-theme="dark"] .modal h4,
[data-bs-theme="dark"] .modal h5,
[data-bs-theme="dark"] .modal  a {
	color: #ffffff;
}

[data-bs-theme="dark"] .modal  a {
  	text-decoration: underline;
}
  
[data-bs-theme="dark"] .afbeeldingmodal p  {
	filter: contrast(0) brightness(2);
}
    
/* KNOPPEN UITKLAPPEN ACCORDIONS ----------------------------------------------- */  
[data-bs-theme="dark"] #expand,
[data-bs-theme="dark"] #collapse {
	color: #ffffff;
} 

[data-bs-theme="dark"] button.uitklappen,
[data-bs-theme="dark"] button.inklappen 
{
	background-color: var(--bs-secondary) !important;
	border: 0px !important;
    color: #ffffff !important;
 
}
  
/* KRUIMELPAD ----------------------------------------------- */  
[data-bs-theme="dark"] .kruimelpad a {
	color: #ffffff;
	text-decoration: underline;
}

[data-bs-theme="dark"] .kruimelpad img {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(200%) contrast(100%);
}

/* OPSOMMINGEN IN BODYDEEL EN MODALS ----------------------------------------------- */
[data-bs-theme="dark"] #skiplinkinhoud ul,
[data-bs-theme="dark"] .modal ul {
	list-style-image: none;
}

[data-bs-theme="dark"] #skiplinkinhoud ul li::marker,
[data-bs-theme="dark"] .modal ul li::marker  {
	font-size: 1.2em;
}

/* ACCORDIONS ----------------------------------------------- */  
[data-bs-theme="dark"] #skiplinkinhoud .accordion-button {
	color: #000000;
	background-color: transparent;
}
   
[data-bs-theme="dark"] .accordion-button {
	color: #ffffff !important;
}

[data-bs-theme="dark"] .accordion-header button:hover {
    color: #ffffff !important;
}  
  
[data-bs-theme="dark"] #skiplinkinhoud .accordion-body {
	border-color: #ffffff;
}
  
/* ALLE ALERT-BOXEN IN BODYDEEL ----------------------------------------------- */
[data-bs-theme="dark"] #skiplinkinhoud div.alert {
	background-color: #000000;
	color: #ffffff !important;
}

[data-bs-theme="dark"] #skiplinkinhoud div.alert a {
	color: #ffffff;
}

/* QUOTES B&W ----------------------------------------------- */
[data-bs-theme="dark"] .quote::before {
    color: #ffffff !important;
}
  
[data-bs-theme="dark"] .quote {
    background-color: #404040 !important;
    color: #ffffff!important;
}

/* FORMULIER KLANTTEVREDENHEID ----------------------------------------------- */
[data-bs-theme="dark"] #klanttevredenheid.bg-primary {
    background-color: #404040 !important;
}
  
/* ICOONTJES EXTERNE LINKJES ----------------------------------------------- */
[data-bs-theme="dark"] .contentbody .bg-white img.externelink,
[data-bs-theme="dark"] .modal * img.externelink {
	filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(180deg) brightness(200%) contrast(100%) !important;
}

[data-bs-theme="dark"] .contentbody .toptaak img .externelink,
[data-bs-theme="dark"] .contentbody .subtaak img .externelink,
[data-bs-theme="dark"] .contentbody img .externelink,
[data-bs-theme="dark"] .contentbody img.externelink {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(0%) contrast(0%);
}

/* KNOPPEN ----------------------------------------------- */  
[data-bs-theme="dark"] .btn-info {
	background-color: var(--bs-secondary) !important;
	border: 0px !important;
    color: #ffffff !important;
} 

/* FORMULIEREN INPUT-VELDEN ----------------------------------------------- */  
[data-bs-theme="dark"] ::placeholder {
	color: #ffffff;
	opacity: 1;
	/* Firefox */
}

[data-bs-theme="dark"] ::-ms-input-placeholder {
	/* Edge 12 -18 */
	color: #ffffff;
}
  
[data-bs-theme="dark"] input, 
[data-bs-theme="dark"] .form-control {
	border: 1px solid #ffffff !important;
}  
  

/* KNOP ONLINE REGELEN DIGITAAL LOKET ---------------------------------- */
[data-bs-theme="dark"] .onlineregelen li.afspraak,
[data-bs-theme="dark"] .onlineregelen li.iburgerzaken,
[data-bs-theme="dark"] .onlineregelen li.Iburgerzaken,
[data-bs-theme="dark"] .onlineregelen li.djuma,
[data-bs-theme="dark"] .onlineregelen li.Djuma,
[data-bs-theme="dark"] .onlineregelen li.Pip,
[data-bs-theme="dark"] .onlineregelen li.pip,
[data-bs-theme="dark"] .onlineregelen li.parkeerloket,
[data-bs-theme="dark"] .onlineregelen li.Parkeerloket,
[data-bs-theme="dark"] .onlineregelen li.externelink,
[data-bs-theme="dark"] .onlineregelen li.extern,
[data-bs-theme="dark"] .onlineregelen li.pdf,
[data-bs-theme="dark"] .onlineregelen li.mindervaliden,
[data-bs-theme="dark"] .onlineregelen .icoontjedigid  {
		filter: brightness(0) invert(1) !important;
}
  
[data-bs-theme="dark"] .onlineregelen.afspraak .btn {
    background-color: #ffffff !important;
}

/* LOGO EVENEMENTEN HOMEPAGE ----------------------------------------------- */  
[data-bs-theme="dark"] #logoditisweert {
	filter: invert(80%) sepia(100%) saturate(100%) hue-rotate(180deg) brightness(200%) contrast(100%);
}

/* TELLEN TABELREGELS ----------------------------------------------- */  
[data-bs-theme="dark"] table tr.regel td:first-child::before {
	color: var(--bs-warning) !important;
}

/* ZOEKEN AUTOCOMPLETE  ----------------------------------------------- */  
[data-bs-theme="dark"] #autocomplete {
	background-color: #222222 !important;
}

[data-bs-theme="dark"] #autocomplete a {
	color: #ffffff !important;
}

[data-bs-theme="dark"] #autocomplete h2 {
	color: #ffffff !important;
}

/* ALERT-BOXEN ----------------------------------------------- */ 
[data-bs-theme="dark"] .bg-opacity-10,
[data-bs-theme="dark"] .bg-opacity-25,
[data-bs-theme="dark"] .bg-opacity-50,
[data-bs-theme="dark"] .bg-opacity-100 {
	background-color: #000000 !important;
	color: #ffffff !important;
}