/****************************************************
 
	Design: Autosoft BV - www.autosoft.eu
	Code & CSS: Autosoft BV - www.autosoft.eu
	
****************************************************/


/* DEFINE BASE COLORS */
:root { 
	--ACprimary: 	#CC0000; /* Main color accent */	/* var(--ACprimary) */
	--ACsecondary:	#666666; /* 2nd color  */		/* var(--ACsecondary) */
}


	
/********** DARK THEME **********//********** DARK THEME **********//********** DARK THEME **********//********** DARK THEME **********/

#loader-wrapper { background: black;	}

#occasionlijstwrapper { color: #efefef; }

#occasionlijstwrapper div.nav { color: #efefef; }
#occasionlijstwrapper div.nav  b { color: #ffffff; }
#occasionlijstwrapper div.displaymode a ,
#occasionlijstwrapper div.nav a,
#occasionlijstwrapper div.nav span { 
	color: #efefef; background: rgba(55,55,55,0.6);
	-webkit-box-shadow: 0 0 8px 0 #000000;
	box-shadow: 0 0 8px 0 #000000;
	}
	
#occasionlijstwrapper div.nav span {
	box-shadow: 0 0 0 0 #000000;
	-webkit-box-shadow: 0 0 0 0 #000000;
	}
	
#occasionlijstwrapper div.displaymode a:hover,
#occasionlijstwrapper div.nav a:hover,
#occasionlijstwrapper div.nav a.activePage,
#occasionlijstwrapper div.nav a.activePage:hover {
	-webkit-box-shadow: 0 0 14px 0 #000000;
	box-shadow: 0 0 14px 0 #000000;
	color: #ffffff; 
	}

#occasionlijstwrapper .occasionresult {
    background: rgba(55,55,55,0.4);
    -webkit-box-shadow: 0 0 8px 0 #000000;
    box-shadow: 0 0 8px 0 #000000;
    border: 1px solid #000000;
}

#occasionlijstwrapper .occasionresult:hover {
	-webkit-box-shadow: 0 0 14px 0 #000000;
	box-shadow: 0 0 14px 0 #000000;
}

#occasionlijstwrapper .occasionresult .merkmodel .uitvoering {color: #cccccc;}
#occasionlijstwrapper .occasionresult:hover .merkmodel .uitvoering {color: #cccccc;}
#occasionlijstwrapper .occasiongrid.max .merkmodel .uitvoering {color: #cccccc;}

#occasionlijstwrapper .occasionlist .gegevens .opties ul { color: #cccccc; }
#occasionlijstwrapper .occasionresult .gegevens .basics .value,
#occasionlijstwrapper .occasionresult:hover .gegevens .basics .value { color: #cccccc; }
#occasionlijstwrapper .occasiongrid.max .gegevens .basics .value,
#occasionlijstwrapper .occasiongrid.max:hover .gegevens .basics .value { color: #cccccc; }



#occasionlijstwrapper  .occasionlist .gegevens .basics .label.bouwjaar,
#occasionlijstwrapper  .occasionlist .gegevens .basics .label.brandstof,
#occasionlijstwrapper  .occasionlist .gegevens .basics .label.kmstand,
#occasionlijstwrapper  .occasiongrid .gegevens .basics .label.bouwjaar,
#occasionlijstwrapper  .occasiongrid .gegevens .basics .label.brandstof,
#occasionlijstwrapper  .occasiongrid .gegevens .basics .label.kmstand, 
#occasionlijstwrapper  .occasiongrid.max .gegevens .basics .label.bouwjaar,
#occasionlijstwrapper  .occasiongrid.max .gegevens .basics .label.brandstof,
#occasionlijstwrapper  .occasiongrid.max .gegevens .basics .label.kmstand {
	-webkit-filter: invert(1); filter: invert(1);
	}
	
@media screen and (max-width: 500px) { 

	#occasionlijstwrapper .occasiongrid.max  .merkmodel { background: rgba(0,0,0,0.6); color: #ffff; } 
	#occasionlijstwrapper .occasiongrid.max:hover .merkmodel {color: #ffff; }
	#occasionlijstwrapper .occasiongrid.max .merkmodel .uitvoering { color: #cccccc; } 
	#occasionlijstwrapper .occasiongrid.max .gegevens  { height: auto; position: relative; margin-top: 0; background: rgba(0,0,0,0.6);}
	#occasionlijstwrapper .occasiongrid.max .gegevens .basics { color: #cccccc; }
					
	}
	
	
/* detailpagina */

.ac-wrapper.detailpagina { color: #efefef; }

.secondarycolor, .ac-wrapper.detailpagina .secondarycolor { color: #ffffff; }

.ac-wrapper.detailpagina .block, 
.ac-wrapper.detailpagina .mainblock  {
	border: 1px solid #111111;
	background: rgba(55,55,55,0.4);
}

.ac-wrapper.detailpagina .afleverpakketten .tab-content .block { background: #000000; }

.ac-wrapper.detailpagina .altvoertuig { background: #000000; }
.ac-wrapper.detailpagina .altvoertuig .altfotowrapper { border: 1px solid #000000; }
	
.ac-wrapper.detailpagina hr { border-bottom: 1px solid rgba(255,255,255,0.05); }

.ac-wrapper.detailpagina .interesseslide { background: rgba(55,55,55,0.75); }

.ac-wrapper.detailpagina a.interestlink,
.ac-wrapper.detailpagina a.fullinterestlink { 
	color: #efefef; border: 1px solid #ffffff; 
	background: rgba(55,55,55,0.25);
}

.ac-wrapper.detailpagina a.interestlink:hover,
.ac-wrapper.detailpagina a.fullinterestlink:hover { 
	color: var(--ACprimary);	background: rgba(55,55,55,0.85); 
	}
	

.ac-wrapper.detailpagina .nawdetails a.whatsapplink,
.ac-wrapper.detailpagina .nawdetails a.belonslink,
.ac-wrapper.detailpagina .nawdetails a.printlink {
		-webkit-box-shadow: 0 0 4px 0 #000000;
		box-shadow: 0 0 4px 0 #000000;
		}
		
.ac-wrapper.detailpagina .button.dark { color: #000000; background: #efefef; }
.ac-wrapper.detailpagina .button.dark:hover { color: #000000; background: #efefef; }


.ac-wrapper.detailpagina #interesseform ,
.ac-wrapper.detailpagina #fullinteresseform { background: rgba(0,0,0,0.75); }
.ac-wrapper.detailpagina .interesseformcontent { 
	background: white; 
	border: 1px solid white; 
	border: 2px solid #222222;
	-webkit-box-shadow: 0 0 12px 0 #000000;
	box-shadow: 0 0 12px 0 #000000;
}


.ac-wrapper.detailpagina .interesseformcontent input[type=text],
.ac-wrapper.detailpagina .interesseformcontent input[type=tel],
.ac-wrapper.detailpagina .interesseformcontent input[type=email], 
.ac-wrapper.detailpagina .interesseformcontent select, 
.ac-wrapper.detailpagina .interesseformcontent textarea {
	border: 1px solid #666666; background:#111111; color: #ffffff;
}

.ac-wrapper.detailpagina .interesseformcontent input[type=text]:focus,
.ac-wrapper.detailpagina .interesseformcontent input[type=tel]:focus,
.ac-wrapper.detailpagina .interesseformcontent input[type=email]:focus, 
.ac-wrapper.detailpagina .interesseformcontent select:focus, 
.ac-wrapper.detailpagina .interesseformcontent textarea:focus {
	border: 1px solid #ffffff;
}

.ac-wrapper.detailpagina a { color: #ffffff;}
.ac-wrapper.detailpagina a:hover { color: #ffffff;}

.ac-wrapper.detailpagina .fotorama { background: rgba(55,55,55,0.4); }

.ac-wrapper.detailpagina .fotorama__nav__shaft > div:last-child { -webkit-filter: invert(1); filter: invert(1); }
.ac-wrapper.detailpagina .fotorama__nav__shaft > div:last-child  .fotorama__thumb { background-color: black; background-color: rgba(55,55,55,0.2); }


.ac-wrapper.detailpagina .interesseformcontent .formwrap, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent .formwrap { background: #ffffff;}
.ac-wrapper.detailpagina .interesseformcontent .formwrap p, .ac-wrapper.detailpagina #fullinteresseform .interesseformcontent .formwrap p { color: #333333;}
	
.ac-wrapper.detailpagina.dark .primarycolor { 
	color: var(--ACprimary); 
	}

.ac-wrapper.detailpagina a.interestlink:hover,
.ac-wrapper.detailpagina a.fullinterestlink:hover { 
	color: var(--ACprimary);
	}
	
	
/* searchfilter */

#occasionlijstwrapper .searchFilter ul, 
#occasionlijstwrapper .searchFilter ol, 
#occasionlijstwrapper .searchFilter .ulPrijs, 
#occasionlijstwrapper .searchFilter .ulKmstand {
    border: 1px solid #000000;
    background: rgba(55,55,55,0.4);
    margin-left: 0;
    -webkit-box-shadow: 0 0 8px 0 #000000;
    box-shadow: 0 0 8px 0 #0000000;
	}
	
#occasionlijstwrapper .searchFilter ul:hover, #occasionlijstwrapper .searchFilter ol :hover,
#occasionlijstwrapper .searchFilter .ulPrijs:hover, #occasionlijstwrapper .searchFilter .ulKmstand:hover { 
	-webkit-box-shadow: 0 0 8px 0 #000000;
	box-shadow: 0 0 8px 0 #000000;
	}
	
#occasionlijstwrapper .searchFilter  select { color: #333333; }

#occasionlijstwrapper .searchFilter p.deleteFilter, #occasionlijstwrapper .searchFilter p.deelFilter,
#occasionlijstwrapper .searchFilter li.meer, #occasionlijstwrapper .searchFilter li.minder, 
#occasionzoekfilter .searchFilter button.button {background: rgba(55,55,55,0.6);}
#occasionlijstwrapper .searchFilter p.deleteFilter:hover, #occasionlijstwrapper .searchFilter p.deelFilter:hover,
#occasionlijstwrapper .searchFilter li.meer:hover, #occasionlijstwrapper .searchFilter li.minder:hover, 
#occasionzoekfilter .searchFilter button.button:hover {background: rgba(55,55,55,0.9);}

#occasionlijstwrapper .searchFilter ul:hover, 
#occasionlijstwrapper .searchFilter ol :hover,
#occasionlijstwrapper .searchFilter .ulPrijs:hover, 
#occasionlijstwrapper .searchFilter .ulKmstand:hover { 
	border-bottom: 1px solid var(--ACprimary);
	}
	
#occasionlijstwrapper .searchFilter p.deleteFilter:hover, 
#occasionlijstwrapper .searchFilter p.deelFilter:hover, 
#occasionlijstwrapper .searchFilter li.meer:hover, 
#occasionlijstwrapper .searchFilter li.minder:hover { 
	border-bottom: 1px solid var(--ACprimary);
	}
	
#occasionlijstwrapper .searchFilter li.meer:before,
#occasionlijstwrapper .searchFilter li.minder:before,
#occasionlijstwrapper .searchFilter p.deelFilter:before {color: #ffffff;}


#occasionlijstwrapper .ui-widget-content {
    background: #000000;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
}

#occasionlijstwrapper .ui-state-default,
#occasionlijstwrapper .ui-widget-content .ui-state-default,
#occasionlijstwrapper .ui-widget-header .ui-state-default { 
	border: 2px solid var(--ACprimary);
	}
	
#occasionlijstwrapper .ui-state-active,
#occasionlijstwrapper .ui-widget-content .ui-state-active,
#occasionlijstwrapper .ui-widget-header .ui-state-active { 
	border: 4px solid var(--ACprimary); 
	}
	
#occasionzoekfilter .searchFilter button.button:hover { 
	border-bottom: 1px solid var(--ACprimary); 
	}

#filterbutton, #closefilterbutton, #detailpaginaback { 
	background: #111111;
	-webkit-box-shadow: 0 0 8px 0 #000000;
    box-shadow: 0 0 8px 0 #000000;
	}
	
	#detailpaginabackbutton {
		background: rgba(255,255,255,0.04);
	}
	
@media screen and (max-width: 800px) { 
	#occasionzoekfilter { 
		background: #111111;
		-webkit-box-shadow: 0 0 8px 0 #000000;
		box-shadow: 0 0 8px 0 #000000;
	}
	
	#detailpaginabackbutton {
		background: #111111;
	}
	
}
	
/* Klant overrides
-------------------------------------------------------------- */

.ac-wrapper .block.full.pull { background: rgba(255,255,255,0.8)!important; }

.ac-wrapper h5, .ac-wrapper p.title {
    font-weight: normal!important;
    font-size: 1.2em!important;
}

@media screen and (max-width: 900px) {
	.ac-wrapper.detailpagina .merkmodel h2 span {text-align: center!important;}
	}
	
a#occtoplink {
    background: rgba(55,55,55,0.5);
	-webkit-box-shadow: 0 0 8px 0 #000000; 
    box-shadow: 0 0 8px 0 #000000;
	display: none!important;
}


@media screen and (max-width: 480px) {
	.ac-wrapper h1, .ac-wrapper h2, .ac-wrapper h3, .ac-wrapper h4, .ac-wrapper h5, .ac-wrapper h6, .ac-wrapper p.title 
	{text-align: center!important; margin-bottom: 0!important; line-height: auto!important;}
}


#occasionlijstwrapper .occasiongrid .merkmodel {
    margin-bottom: 6px;
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
	
}

.topcta a.primarycolor { background: #333333; color: #ffffff; }


a#detailpaginabackbutton:hover {
    color: #ffffff!important;
}

@media screen and (max-width: 800px) {
	#filterbutton, #detailpaginabackbutton {
		margin-bottom: 50px;
	}
}

/****************************************************
 
	Design: Autosoft BV - www.autosoft.eu
	Code & CSS: Autosoft BV - www.autosoft.eu
	
****************************************************/