:root {
	--Dark-color: #135013;
	--Normal-color: #008000;
	--Light-color: #2ecc71;
	--Button-cancel:red;
	
	--nav-button-activ:#5ca77d;
	--nav-active:#3e8e41;
	--nav-button: #abeac6;
}
* {
  box-sizing: border-box;
}
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
.row{
	margin: 10px 0px;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  float: left;
  #padding: 15px;
}
html{
	font-family: Arial, Helvetica, sans-serif;
}
body{
	margin: 0px;
	padding: 0px;
}
header{
	background-color: var(--Normal-color);
	text-align: center;
	padding: 10px;
}
main{
padding: 0px 0px 30px 0px;
}
main ul{
	padding: 0px;
	margin: 0px;
}
main li {
	list-style: none;
}
footer{
	background-color: var(--Normal-color); 
	bottom:0; 
	left: 0; 
	right: 0; 
	text-align: center; 
	padding: 10px;
}
input{
	font-size: 15px;
	border-color: var(--Normal-color);
	padding:5px;
	max-width: 200px;
}
select{
	font-size: 15px;
	border-color: var(--Normal-color);
	border-style: inset;
	border-width: medium;
	padding:5px;
	max-width: 200px;
	
}
input[type="submit"]{
	background-color: var(--Normal-color);
	color: white;
	#font-size: 15px;
	padding: 5px;
	border-radius: 5px;
	width:150px;
	margin:10px;
}
input[type="image"]{
	padding: 0px;
	border-radius: 10px;
}
textarea{
	font-size: 15px;
	border-color: var(--Normal-color);	
	width:200px;
	padding:5px;
}
.labeledinput
{
	padding: 10px;
}
.messageCHALLENGE{background-color:#baf5d5 ; color: black; }
.messageINFO{background-color:#99ff33 ; color: black; }
.messageWARN{background-color:#ffff66 ; color: black; }
.messageERROR{background-color:#ff9999 ; color: black;}

.galerieframe{height: 150px; width: 150px; position: relative; float: left}
.galerietumb{max-height: 100%; max-width: 100%; width: auto; height: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.questionlabel
{
	display:grid;
	padding: 10px;
}
.resultview
{
	border-style: inset;
    padding: 5px;
    border-color: var(--Normal-color);
    border-width: medium;
	border-radius: 20px;
	margin: 1px 0px;	
}
.foodproperty{height:20px; overflow: hidden;}
.foodproperty img{height:20px; overflow: hidden;}
.foodproperty label{vertical-align: bottom;}
.old{background-color:bisque;}
.near{background-color:khaki;}
.bad{background-color:coral;}
.dialog
{
	position: fixed;
    top: 20%;
    left: 25%;
    background-color: beige;
    width:  fit-content;
    border-style: solid;
    padding: 10px;
}
.dialog li
{
	list-style-type: none;
}
.dialog ul
{
	padding-inline-start: 15px;
}
.classtdgroup{text-align: center; border-radius: 10px;}
.tr{height: 35px}