/* FIRST RESETTING STYLES FOR OPTION PAGES */


/*KLEURENCODES IN CONTENT EN STYLES:  licht roze: #DB6FC9; licht groen #007272  licht blauw #0063C6;  licht bruin #F9DEC6  roze #FFB3BA   groen: #26A69A #3D8148 #00796B #056772 #3D8148  blauw: #056772  #006CBD  #398145  grijs:  #4D5A75    */


html, body { margin:0; border:0; padding:0;	font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:14px}

table; tr, th, td,  { display: table; border-collapse:collapse; border-spacing:0; height:10px; border:0; padding:0; margin:0; text-align:left ;vertical-align: top }

img {border:0;	padding:0;	margin:0; }

div, span, blockquote, iframe, h1, h2, h3, h4, h5, h6, ul; ol, li, p, a, {display:block ;border:0; padding:0; margin:0; vertical-align: top;}

a:link {color: #FFFFFF; text-decoration: none}

article, aside, figure, footer, header, section {display:block;}

flex: none


/* GLOBAL STYLES */

body {background-color: #E4E4E4;}

section {background-color:#FF9148;}

div {background-color:inherit;}

div a {overflow:auto; }
	
div p {overflow:auto; }

hr {background-color:inherit;}


/*KLEURENCODES:  licht roze: #DB6FC9; licht groen #007272  licht blauw #0063C6;  licht bruin #F9DEC6  oud roze #FFB3BA      */

.pagecolor_B {
    margin: 0;
    padding: 0;
    /* Meervoudige diagonale overgangen tussen oranje en oude roze en perzik */
    background: linear-gradient(
      135deg,
      #ff9148 0%,     /* basis oranje */
      #ff9148 5%,     /* basis oranje */
      #ff9aa2 20%,    /* bloesem */         
      #FFA566 35%,    /* abrikoos, perzik */ 
      #ff9148 50%     /* basis oranje */
      #FFA566 65%,    /* abrikoos, perzik */     
      #ff9aa2 80%,    /* bloesem */
      #ff9148 95%    /* basis oranje */
      #ff9148 100%,     /* basis oranje */
    );
    background-attachment: fixed; /* zorgt voor stabiele achtergrond op tablets/pc */
    background-size: cover;
  }


.pagecolor_D {
    margin: 0;
    padding: 0;
    /* Zachte diagonale overgang met oranje als basis */
    background: linear-gradient(
      135deg,
      #ff9148 5%,     /* basis oranje */
      #FF9F5A 25%,    /* lichter oranje */         
      #FFA566 50%,    /* abrikoos, perzik */      
      #FF9F5A 75%,    /* lichter oranje */
      #ff9148 95%    /* basis oranje */
    );
    background-attachment: fixed; /* zorgt voor stabiele achtergrond op tablets/pc */
    background-size: cover;
  }

.pagecolor_R {
  margin: 0;
  padding: 0;
  /* cirkelvormige overgang radiaal vanuit het midden */
  background: radial-gradient(
    circle at center,
    #ffa566 0%,     /* abrikoos in het midden */
    #FF9F5A 40%,    /* lichter oranje */
    #ff9148 100%    /* basis oranje naar de randen */
  );
  background-attachment: fixed;
  background-size: cover;
}



/*ID-CONTAINERS & HEADINGS @ PAGE CONTENT*/

.header { 
	display: flex; 
	justify-content: space-between; 
	margin-left: 18px; 
	margin-right: 18px;
	margin-top:9px;
	margin-bottom:-21px;
}

.info-tekst {
	font-size:12px;	
}

#content-titels { width:99%;	
	padding:1px;
	height: auto; 	
	text-align: center;	 
}


/* TABLE POSITION and CELL STYLES */

.table-left {
	border-collapse: collapse;
	margin-left: 3px;
	float: left;
	width: auto;	
}

.table-right {
	border-collapse: collapse;
	margin-right: 3px;
	float: right;
	width: auto;	 
}



/* TABEL HOOFDING */

.table-heading {
	width: 100%;
	height:39px;
	background-color: #EBD2AF;
	border: 1px solid #F38A45;
	text-align: center;
	font-family: "Bookman Old Style";
	font-size: large;
	letter-spacing: 3px;
	font-weight: bold;
	font-style:normal;
	color: #4275AB;
	padding:1px;
	margin-bottom:9px;
	margin-top:6px;
}								


/* HEADER TAGS */

h3 {
	font-family: "Bookman Old Style";
	font-size: large;
	letter-spacing: 1px;
	font-weight: normal;
	font-style:italic;	
	color: #FFFFFF;	
	margin-top:9px;
	margin-bottom:6px;	
}


/* NOT IN USE */

h4 {
	font-family: "Bookman Old Style";
	font-size: large;
	letter-spacing: 3px;
	font-weight: bold;
	font-style:normal;
	color: #4275AB;
	margin-bottom:9px;
	margin-top:6px;
}

	

/* DOORLOPENDE TEKST in TABEL-RIJEN */ 

.table-row-A {
	width: 100%;
	height:auto;
	background-color: #EBD2AF;
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: left;
  	text-indent:0px;
	line-height:200%;
	padding-left:12px;
	padding-bottom: 3px;
	padding-top:3px;
	padding-right:3px;
}


.table-row-C {
	width: 100%;
	height:auto;
	background-color: #EBD2AF;
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: left;
  	text-indent:0px;
	line-height:175%;
	padding-left:12px;
	padding-bottom: 3px;
	padding-top:3px;
	padding-right:3px;
}


.table-link {
	width: 100%;
	height:auto;
	background-color: #FCEDE1; 
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: center;
  	text-indent:0px;
	line-height:170%;
	padding-left:3px;
	padding-bottom: 5px;
	padding-top:5px;
	padding-right:3px;
	font-family: "Trebuchet MS";
	font-size: medium;
	letter-spacing: 2px;
	font-weight: normal;
	font-style:italic;	
	margin-bottom:1px;
	margin-top:1px;
}


/* Lichte achtergrond #FCEDE1  */


h5 {
	font-family: "Trebuchet MS";
	font-size: small;
	letter-spacing: 1px;
	font-weight: normal;
	font-style:italic;	
	color: #4E2E26;
	margin-bottom:2px;
	margin-top:1px;
}


h6 {
	font-family: "Calibri";
	font-size: small;
	letter-spacing: 1px;
	font-weight: 500;
	font-style: normal;	
	color: #002466;
	text-align: center;
	padding:3px;
	margin-bottom:1px;
	margin-top:1px;
}


.T6 {
	font-family: "Calibri";
	font-size: small;
	letter-spacing: 1px;
	font-weight: 500;
	font-style: normal;	
	color: #002466;
	text-align: center;
	padding:3px;
	margin-bottom:1px;
	margin-top:1px;
}



/* KALENDER TABELLEN */

.kalender-rooster-center {
	height: auto;
	background-color: #EBD2AF;
	border: none;
	border-width: 1px;
	border-color: #F38A45;
	text-align: center;
	text-indent: 1px;
	padding-left: 3px;
	padding-bottom: 3px;
	padding-top: 3px;
	padding-right: 3px;
}


.kalender-field-head {
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size: x-small;
	font-weight:bold;
	height:30px;
	border-style: solid;
	border-width: 1px;
	border-spacing:15px;
	text-align:center;
}


.kalender-row {
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size: x-small;
	border-style: solid;
	border-width: 1px;
	border-spacing:15px;
	height:15px;
}


.field-OK {
	background-color: #8ADC8A;	
}		
		

.field-Onrijp {
	background-color: #D88975;
}


.field-Leeg {
	background-color:
}							


.field-Groei {
	background-color:#FFBFC6;
}		


.field-Diepvries {
	background-color: #C6F0FF;
}							

.field-Zonuren {
	background-color: #FFC95A
}


.field-content {
	background-color: #659AD3;
	color: #FFFFFF;
}


/* BERICHTEN en NADRUK  in RESERVATIE   #398145 #008040 #FFBFC6 */



.titel-nadrukkelijk {
	width: 100%;
	height: auto;
	background-color: #EBD2AF;
	border: 1px solid #F38A45;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	letter-spacing: 3px;
	font-weight: bold;
	color:#0000FF;
	padding-bottom: 7px;
	padding-top: 7px;
}


/* TOPICS in THEMA van WEB-ETALAGE */


.topic-bericht {
	border-collapse: collapse;
	margin: 1px;
	text-align:center;
	font-family:"Trebuchet MS";
	letter-spacing: 1px;
	font-style:italic;
	font-size: medium;
	color: navy;
	width: 99%;	
}


.topic-titel {
	border-collapse: collapse;
	margin-left: 1px;
	font-family:"Trebuchet MS";
	letter-spacing: 1px;
	font-style:italic;
	font-size: large;
	font-weight: 500;
	float: left;
	padding:12px;
	width: 90%;	
}


.topic-rooster {
	width: 400px;
	height:auto;
	background-color: #EBD2AF;
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: left;
  	text-indent:1px;
  	font-family: "Georgia";
  	font-size: small;
  	letter-spacing: 1px;
  	font-weight: normal;
	font-style:italic;  	
	line-height:200%;
  	padding-left:1px;
	padding-bottom: 3px;
	padding-top:3px;
	padding-right:1px;	
}


.topic-link {
	width: 100%;
	height:auto;
	background-color: #FCF0E7; 
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	text-align: center;
  	text-indent:0px;
	line-height:100%;
	padding-left:1px;
	padding-bottom: 9px;
	padding-top:9px;
	padding-right:1px;
	font-family: "Trebuchet MS";
	font-size: medium;
	letter-spacing: 1px;
	font-weight: normal;
	font-style:italic;	
	margin-bottom:1px;
	margin-top:1px;
	margin-top:1px; 
	margin-bottom:1px; 
}



/*  RADAR DIAGRAM */



.zoom {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.zoom:hover {
  transform: scale(1.5);
  z-index: 10;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}



/* RECEPT ETIKET in WEBSHOP ETALAGE NIEUW  */


.fruitsoort {
	display:block;
	float:left;
	border-collapse: collapse;
	background-color:#FFA2BD;
	margin-left: 1px;
	font-family:"Trebuchet MS";
	letter-spacing: 1px;
	font-style:italic;
	font-size: x-large;
	font-weight: 500;
	color:#FFFFFF;
	padding-left:36px;
	padding-bottom:6px;
	padding-top:3px;
	padding-right:1px;
	width: 97%;	
}


.fruitslagzin {
	display:block;
	float:left;
	border-collapse: collapse;
	margin-left:72px;
	margin-top:2px;
	margin-bottom:24px;
	font-family:"Trebuchet MS";
	letter-spacing: 1px;
	font-style:italic;
	font-size: large;
	font-weight: 500;
	width: 90%;	
}


.recept-artikel {
            border: 1px;
            border-collapse: collapse;
            margin-top: 18px;
			margin-right: 9px;
			margin-bottom: 18px;
			margin-left: 12px;
            float: left;
            min-width: 270px;
            cursor: pointer;
        }

.recept-cachet {
            width: 100%;
            height: 39px;
            background-color: #DEFFFF;
            border: 1px solid #F38A45;
            text-align: center;
            font-family: "Georgia";
            font-size: large;
            letter-spacing: 1px;
            font-weight: normal;
            font-style: italic;
            padding: 9px;
            color: #F33C96;
            transition: background-color 0.3s ease;
        }


.recept-etiket {
            width: 100%;
            background-color: #CFD8E4;
            border: 1px solid #F38A45;
            text-align: left;
            text-indent: 1px;
            line-height: 120%;
            padding: 3px;
        }


.verzend-knop:hover {
            background-color: #d36f2f;
        }



/* RECEPT ETIKET in WEBSHOP ETALAGE  OLD  */



.recept-tabel {
	border: 1px;
	border-collapse: collapse;
	margin-top: 18px;
	margin-right: 9px;
	margin-bottom: 18px;
	margin-left: 12px;
	float: left;
	min-width: 270px;
}

.recept-rooster-left {
	width: 100%;
	background-color: #CFD8E4;
	border: 1px solid #F38A45;
   	text-align: left;
  	text-indent: 1px;
  	line-height: 120%;
	padding: 3px;	
}


.recept-cachet {
	width: 100%;
	height:39px;
	background-color:#DEFFFF;
	border: 1px solid #F38A45; 
	text-align: center;
	font-family: "Georgia";
  	font-size: large;
  	letter-spacing: 1px;
  	font-weight: normal;
	font-style:italic;  	
	padding:3px;
	color:#F33C96;
}


.recept-karakter {
	width: 100%;
	background-color: #DEE1D8;
	border: 1px solid #F38A45;
	text-align: center;
	font-family: "Trebuchet MS";
  	font-size: medium;
  	letter-spacing: 1px;
  	font-weight: normal;
	font-style:italic;	
	padding: 9px;
	color: #F33C96;
}							


/* border-spacing:15px; */

.recept-column-heads {
	height: 27px;
	font-family: Verdana;
	font-size: x-small;
	font-weight: bold;
	letter-spacing: 1px;
	border: 1px solid;
	text-align:center;
}


ul { 
	border-collapse: collapse;
	list-style-position: inside;
	list-style-type: circle;
	padding-left: 6px;
	padding-top: 1px;
	padding-bottom: 1px;
	margin: 0;
}
		

.recept-foto {
	border: 1px;
	border-collapse: collapse;
	margin-top: 15px;
	margin-right: 6px;
	margin-bottom: 12px;
	margin-left: 6px;
	float: left;
	min-width: 180px;
}



.recept-etiket {
	text-align: left;
  	background-color: #F3D5D8;
  	font-family: "Calibri";
  	font-style: normal;
	font-size: small;
	color: #006666;
	min-width: 100px;
	padding-right: 10px;
}


/* WEBSHOP PALET  former colors:  #EAE7D5 #DEFFFF #DEE1D8  */

/* structuur van drie kolommen vertikaal naast elkaar houden en beide even hoog */



.palet-table {
	border:1px;
	background-color:#EBD2AF;
	border-collapse: collapse;
	margin-left: 3px;
	margin-top: 12px;
	margin-right: 18px;
	margin-bottom:24px;
	float: left;
	width: 415px;	
}


.palet-rooster {
	width: 30%;
	height:auto;
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	padding-left:3px;
	padding-bottom:3px;
	padding-top:3px;
	padding-right:3px;	
}



.palet-fruit-titel {
	width: 100%;
	height:39px;
	background-color:#DEFFFF;
	border: 1px solid #F38A45; 
	text-align: center;
	font-family: "Georgia";
  	font-size: large;
  	letter-spacing: 1px;
  	font-weight: normal;
	font-style:italic;  	
	padding:3px;
	color:#F33C96;
}							



.palet-column-heads {
	height:27px;
	background-color:#FFCFD2;
	font-family: "Verdana";
	color: #4E6348;
	font-size: x-small;
	font-weight:bold;
	letter-spacing:1px;
	line-height: 125%;
	border-spacing:3px 9px;
	text-align:center;
}


/* TABEL in WEBSHOP 'select options'  COLORS  #EBD2AF  #FFC0C3  */
/*background-color:#DEFFFF;  #546951 #F799BC  #F33C96   */
/* roze tinten: #FFB3BA   #FFB9C0   #FFBFC6 #F0DDC9 #ECCFAE  */


.select-container {
	column-count:10;
	column-gap: 3px;
	column-fill: balance;
	columns:auto;
	padding: 0;
	margin: 0;
}


.select-table {
	border:1px;
	background-color:#F0DDC9;
	border-collapse: collapse;
	margin-top:18px;
	margin-left: 18px;	
	margin-right: 18px;
	margin-bottom:12px;
	float: left;
	width: auto;	
}


.select-rooster {
	height:auto;
	border: solid;
  	border-width: 1px;
  	border-color:#F38A45;
  	padding:3px;	
}


.select-main-titel {
	width: 100%;
	height:auto;
	background-color: #FCEDE1;
	border: 1px solid #F38A45; 
	text-align: center;
	font-family: "Trebuchet MS";
	font-size: small;
	letter-spacing: 1px;
	font-weight: normal;
	font-style:italic;	
	color: #4E2E26;
	line-height: 180%;
	padding: 6px;	
}							


.option-column-head {
	height:42px;
	background-color:#FFCFD2;
	font-family: "Verdana";
	color: #4E6348;
	font-size: x-small;
	font-weight:bold;
	letter-spacing:1px;
	line-height: 125%;
	border-spacing:3px 9px;
	text-align:center;
}


.select-inter-row {
	 height:33px;	 
}


.select-nota {
	font-family:"Verdana";
	color: #002466;
	font-size: small;
	font-weight:bold;
	line-height: 125%;
	letter-spacing:1px;
	text-indent:6px;	
}
	

.select-tip-row {
	height:auto;	
}
	
	
.select-input-row {
	height:39px;
}


.select-answers-pluk {
	font-family: "Georgia";
  	font-size: small;
  	letter-spacing: 1px;
  	font-weight: normal;
	font-style:italic; 
	color: #002466;
	line-height: 125%;
	text-align: left;
	padding-left: 12px;
	alignment-adjust: middle;
	background-color: #EDEDED;
	height:30px;
}


.select-answers {
	font-family: "Georgia";
  	font-size: small;
  	letter-spacing: 1px;
  	font-weight: normal;
	font-style:italic; 
	color: #002466;
	line-height: 125%;
	text-align: left;
	padding-left: 12px;
	alignment-adjust: middle;
	background-color: #EDEDED;
	height:42px;
}


.select-question {
	font-family: "Georgia";
  	font-size: small;
  	letter-spacing: 1px;
  	font-weight: normal;
	font-style:italic; 
	color: #002466;
	line-height: 125%;
	padding: 6px;  /* geen padding voor betere verwerking in browsers */
	background-color: #EDEDED;
	overflow: hidden; /* Om ervoor te zorgen dat de tekst niet buiten de box komt */ 
	white-space: normal; /* Zorgt ervoor dat de tekst afgebroken wordt */ 
	word-wrap: break-word; /* Zorgt ervoor dat de tekst binnen de box afgebroken wordt */ 
	text-align: left; /* Zorgt ervoor dat de tekst links wordt uitgelijnd */ 
	vertical-align: top; /* Zorgt ervoor dat de tekst bovenaan wordt uitgelijnd */
	box-sizing: border-box; /* Inclusief padding en border in de hoogte en breedte */
	height: 80px; /* Aangepast op basis van twee rijen van 42px */
}


.select-links {
	font-family: "Trebuchet MS";
	font-size: small;
  	letter-spacing: 1px;
  	font-weight: normal;
	font-style:italic; 
	color: #002466;
	line-height:1.25;  /* Dit maakt de regels hoger */
	text-align: left;
	padding: 15px 6px 3px 9px;
	alignment-adjust: middle;
	background-color: #EDEDED;
}


.select-links li {
    margin-bottom: 6px; /* Voeg een marge onder elk lijstitem toe */
    padding-bottom: 6px; /* Voeg een opvulling onder elk lijstitem toe */
}


.select-option-row {
	height:42px;
	vertical-align:middle;		
}

 	
.input-box { 
	width: 100%; /* Zorg ervoor dat de breedte van de input 100% van de container inneemt */ 
	height: calc(100% - 12px); /* Zorg ervoor dat de hoogte van de input 100% minus padding inneemt */ 
	box-sizing: border-box; /* Zorgt ervoor dat padding en border worden meegenomen in de breedte en hoogte */
	padding: 6px; 
}


.dropbox {
	margin-top: 12px;
	padding: 12px 6px 9px 6px;
	background-color: #F0DDC9;
  	text-align: center;
  	height: 24px;  	
}


.dropbox-pluk {
	padding: 6px;
	background-color: #F0DDC9;
  	text-align: center;  	
  	width: auto;
}


/* SCREENSHOT WEERGEVEN  */

.responsive-image { 
	max-width: 100%; 
	height: auto; 
	display: block;
}


/* HYPERLINKS & MOUSE OVER */

/* If the link is unvisited you see this color*/
a:link {
        color: #4E2E26;
        text-decoration: underline;
        }
  
/* If the link is visited you see this color*/
a:visited {
        background-color:ivory;
        color:#4E2E26;
        padding:5px 2px 5px 2px;
        }
 
/* On placing mouse over the link */
       
a:hover  {
	background-color:#81FFFF;
	color:#CC0C66;
	padding:5px 2px 5px 2px;
	}


/* Buttons */

.button {
	margin-left:50px;
	background-color:#87CFC3; 
	font-size: 18px;
	padding: 9px 12px 9px 12px;
	border-radius: 6px;	
}


.button:hover {
    background-color: #008CBA; /* Blue */
    color: white;
}