/*-----------------------------------------------------------*/
  /* INHOUD */
						/*  regel 09:  Account contact, registreren  */ 
						/*  regel 95:  Kalender                      */
						/*  regel 198: Winkelwagen                   */
						/*  regel 223: Mediaqueries 768, 1024, 1280  */
/*----------------------------------------------------------*/

textarea, input:not([type="radio"]) { width: 100%; }

input              { font-family: 'Raleway', sans-serif; }
input[type="text"] { height: 2.3rem; }

/* aside gedeelte */
.accountOpties li            { padding: 1.5rem 0; border-bottom: 2px solid var(--blue_5); }
.accountOpties li:last-child { border: none; }

.accountOpties li a {
	font-weight: 600;
	color: var(--blue_3);
	letter-spacing: 0.03rem;
	text-transform: uppercase;
	padding-left: 1rem; }

.accountOpties li a.orange { color: var(--orange_3); }

.aanhef, .radioBtnForm { font-size: 1rem; color: var(--orange_3); }

/* headers*/
legend {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--blue_3);
	text-transform: uppercase; } 

label {
	font-weight: 500;
	color: var(--blue_3);
	padding: 0.5rem 0;
	display: block; }

fieldset#inloggen { margin-top: 4rem; }

/* ! voor account formulier ! */
form div { padding: 0.8rem 0; flex: 1 0 auto; }

/* opmaak velden */
form input, textarea {
	font-size: 1rem; 
	border: 1px solid var(--orange_3);
	border-radius: 3px;
	padding: 0.5rem; }

/* opmaak velden */
input:focus {
	border: 1px solid var(--blue_3);
	outline: 1px solid var(--blue_3); }

.radioBtnForm { padding-bottom: 0; }

.landnaam { padding-top: 0; }


/*-------CONTACT FORM----------------------------*/
fieldset.contact, fieldset.registreren { 
	display: flex;
	flex-flow: column;
	align-items: center; } 

fieldset.contact .radioBtnForm { text-align: left; }
#verzenden.btn { width: 50%; }


/*-------REGISTREER FORM-------------------------*/
fieldset.contact div, 
fieldset.registreren div { width: 100%; padding: 0 0 1rem 0; }

fieldset.registreren .aantal, 
fieldset.registreren .aanmeldenRegistratie { display: flex; justify-content: flex-end;}

/* dropdown optie registratie aantal personen */
select {
  width: 4rem;
	padding-left: 0.8rem;
	margin-left: 1rem;
	padding: 0.5rem 0 0.5rem 0.8rem;
	border: 1px solid var(--orange_3); }

.registreren div:first-child { padding: 0; }

/* voor filmpje */
.registreren .trailer {width: 100%; }


/*-------KALENDER--------------------------------*/
/* maand en jaar */
.ui-datepicker select.ui-datepicker-month-year { width: 100%; }

/* maand en jaar */
.ui-datepicker .ui-datepicker-title {
	text-align: center;
	line-height: 1.5rem;
	margin: 0 2.3em; }

/* maand en jaar */
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: 0.2em 0.4rem; }

/* maand en jaar */
.ui-datepicker-title span {
	font-family: 'Merriweather';
	font-size: 1.3rem;
  color: var(--orange_4);
	height: 30px;
	display: inline-flex; }

/* kalender tabel */
.ui-datepicker table {
	width: 100%;
	font-size: .7em;
	border-collapse: collapse;
	margin: 0 0 0.2em 0; }

/* maand datum nummer */
.ui-datepicker th {
	font-size: 0.8rem;
	font-weight: bold;
	text-align: center; }

/* ma, di, woe, do, vr, za, zo */
th {
  font-size: 1rem;
  text-align: left;
  text-transform: none;
	background-color: var(--orange_4); 
  border-bottom: 2px solid var(--orange_2); }

/*1, 2, 3, 4, 5, 6, 7 enz*/
td {
  font-size: 0.9rem;
  vertical-align: top;
  padding: 0.3rem; }

/* ma, di, woe, do, vr, za, zo */
th span{ font-size: 1rem; 
	font-weight: 600; 
	color: var(--orange_2); 
	padding: 0.5rem; }

.ui-datepicker { padding: 0.2em 0.25em 0.1em 0.2em; display: none; }

/*next en prev met hovers*/
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { width: 1.8em; height: 1.8em; position: absolute; top: 2px; }

.ui-datepicker .ui-datepicker-prev { left: 2px; }
.ui-datepicker .ui-datepicker-next { right: 2px; }

.ui-datepicker .ui-datepicker-prev-hover, 
.ui-datepicker .ui-datepicker-next-hover { cursor:pointer; }

.ui-datepicker .ui-datepicker-prev-hover { left: 1px; }
.ui-datepicker .ui-datepicker-next-hover { right: 1px; }

.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {
	font-family: 'Merriweather';
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--orange_5);
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -8px; }

/* 1, 2, 3, 4, 5, 6, 7 enz */
.ui-datepicker td a, .ui-datepicker td span {
	color: var(--orange_2); 
	justify-content: center; }

/* hover 1,2,3,4,5,6,7 enz */
.ui-state-default:hover { color: var(--blue_1); }

.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }

/*achtergrond kleur */
.ui-datepicker-calendar { background-color: var(--orange_5); }

#ui-datepicker-div { 
	min-width: 330px;
	border-radius: 3px; 
	background-color: var(--orange_2);
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5); }


/*-------WINKELWAGEN-----------------------------*/
.chartWrapper, .chartProduct, 
.chartPrijs, .chartAantal { display: flex; flex-flow: column; padding: 0 0 1rem 0; }

.chartWrapper { margin: 1rem 0 3rem 0; width: 100%; }/**/

.chartAantal { 
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0; }

.chartPrijs { 
	border-top: 2px solid var(--blue_5);
	border-bottom: 2px solid var(--blue_5); }

.chartPrijs h2 { align-self: flex-end; font-weight: 300; padding: 0; }

fieldset.aantalPers, .verwijder { display: flex; align-items: baseline; }

.verwijder       { padding-left: 1rem; }
.verwijder span  { font-size: 1.5em; color: var(--blue_3); padding-right: 0.5rem; }

.chartTotaal {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/*====================================================*/
   /* MEDIA QUERIE 768 */
/*====================================================*/
@media screen and (min-width: 768px){
	
	.formulierWrapper aside {
    flex-basis: 100%;
    border-top: 2px solid var(--blue_3);
    border-bottom: 2px solid var(--blue_3); 	}
	
	fieldset {
		display: flex;
		justify-content: flex-start;
		align-items: baseline; }
		
	fieldset.contact div, fieldset.registreren div { width: 60%; }
	
	#aanmeldenRegistratie { flex: 0 0 57%; }
	
	/* ! voor account formulier ! */
	form div { padding: 0.8rem; flex: 1 0 auto; }
	
	.accountOpties    { width: 100%; text-align: center; }
	.accountOpties li { border: none;}
	.accountOpties ul { display: flex; justify-content: space-evenly;	}	
	
	form .tussenvoegsel, 
	form .geboortedatum,
	form .huisnummer,
	form .postcode { flex: 0 0 20%; }
	
	form .bedrijfsnaam, 
	form .straatnaam,
	form .telefoon,
	form .email,
	.radioBtnForm,
	form .landnaam { flex: 0 0 40%; }

	.radioBtnForm, .landnaam { padding: 0.8rem; }
	
	fieldset.plaatsnaam { display: flex; }
	.landnaam           { align-self: flex-end; }	
	
	.aanmelden         { display: flex; justify-content: flex-start; }
	#aanmelden, #reset { width: 25%; margin: 0 1.7rem 0 0; }
	
	
/*-------WINKELWAGEN-----------------------------*/
	.chartProduct     { padding: 0;}
	.chartProduct img { width: 35%; height: 100%; margin: 0; } /**/
	.chartItems       { padding-left: 2rem; }

	.chartProduct, .chartPrijs { 
		display: flex; 
		flex-flow: row nowrap; 
		justify-content: space-between; }
	
	.verwijder     { padding-left: 6rem; }
	.chartAantal   { flex-basis: 60%; }
	.chartPrijs    { margin: 1rem 0 0 0; }	
	.chartPrijs h2 { align-self: center; }
	
	
	
	
} /* eind */


/*====================================================*/
   /* MEDIA QUERIE 1024 */
/*====================================================*/
@media screen and (min-width: 1024px){
	
	#aanmeldenRegistratie { flex: 0 0 42%; }


/*-------KALENDER-----------------------------*/
	.ui-datepicker .ui-datepicker-header           { padding: 0.2rem 1.8rem; }
	.ui-datepicker select.ui-datepicker-month-year { width: 130%; }
	.ui-datepicker-title span                      { font-size: 1.4rem; }	
	.ui-datepicker table                           { font-size: 1rem; }	
	.ui-datepicker th                              { font-size: 1rem; padding: 0.2rem 0; }
	
	td { font-size: 1rem; }
	
	
/*-------WINKELWAGEN-----------------------------*/	
	.chartWrapper  { display: flex; flex-flow: row nowrap; }
	.chartProduct  { flex-basis: 60%; justify-content: flex-start; }
	.chartPrijs    { flex-basis: 40%; flex-flow: column wrap; justify-content: flex-start; margin: 0; }
	.chartItems    { padding-left: 3rem; padding-right: 2rem; }
	.verwijder     { padding: 0; }
	.chartPrijs h2 { align-self: flex-end; }
	
} /* eind */


/*====================================================*/
   /* MEDIA QUERIE 1280 */
/*====================================================*/
@media screen and (min-width: 1280px){
	
	.formulierWrapper aside {
    flex-basis: 32%;
    border-top: none;
    border-bottom: none; }
		
	.accountOpties ul             { flex-flow: column nowrap; }
	.accountOpties li             { border-bottom: 2px solid var(--blue_5); margin: 0; }
	.accountOpties li:first-child { border-top: 2px solid var(--blue_5); }	
	.accountOpties li:last-child  { border-bottom: 2px solid var(--blue_5); }	
	.formulierWrapper { display: flex; flex-flow: row nowrap; }
	
	.accountOpties { 
		width: 100%; 
		text-align: left; 
		padding: 0; 
		margin: 0; }

	#aanmelden, #reset    { margin-right: 5rem; }	
	#aanmeldenRegistratie { flex: 0 0 33%; margin: 0; }
	
} /* eind */