body 
{
  background-color: #FDF4E3; /* RAL 9010 = #FDF4E3*/
  font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
}


.logo
{

background-color: transparent;

margin-left: 2.0vw;
width: 7vw; /* GROOTTE LOGO */
height: 9vw;
/*vertical-align: bottom;*/
z-index: 1000;
}




.ehbod
{
 position: absolute;
 font-weight: bold;
 text-align: left;
 top: 1.5vw;
 left: 10.0vw;
 font-size: 1.5vw;
 line-height: 1.5vw;
 color: #2374BF;
 z-index: 1;	
}

.slogan
{
  position: absolute; 	
  color: black;
  font-weight: bold;
  font-size: 1.0vw;
  top: 4.8vw;
  left: 10.0vw;
  z-index: 1;
}




#main_title
{
  color: #73929A;
  font-size: 1.8vw;
  font-weight: bold;
  font-style: normal;
  text-align: center;
  line-height: 0.7;
}



h1
{
  font-size: 1.3vw;	
}

p
{
  display: inline;
}

label
{

 
}

.nectar
{
  display: none;

}







.star
{
  color: red;
  font-size: 0.8vw;	
}


.canvas
{
  width: 50%;	
  margin-left: auto;
  margin-right: auto;	
  border: 0.0vw solid grey;	
  background-color: #e6e6e6;
  font-size: 0.8vw;
  box-shadow: 0 0.2vw 1.0vw 0 rgba(0, 0, 0, 0.2), 0 1.0vw 3.0vw 0 rgba(0, 0, 0, 0.19);
  
}

.canvas-header
{
  position: relative;
  border: 0.1vw solid grey;
  background-color: white;
}



.phpecho
{
	color: red;
	font-size = 8.0px;
	margin-left: 45%;
	margin-top: -12%;
	z-index: 1;	
}



table
{
  table-layout: fixed;
  background-color: #F2F5F6;
  /*border-collapse: collapse;*/
  font-size: 0.8vw;
  margin-left: auto;
  margin-right: auto;
  width: 80%;

}


th
{
 border: 0.vw  solid grey;
 background-color: #F2F5F6;
 text-align: left;
 padding-left: 0.5vw;
 color: blue;
}


td
{

  border: 0.0vw solid grey;
  padding-left: 1.0vw;
  background-color: #F2F5F6;
  padding: 0.2vw;
  padding-left: 0.5vw;
  color: black; /*#394847;*/
  text-align: left;
  font-size: 1.0vw;
  width: 20vw;  
}


table td:nth-child(1)	
{
  width: 70%;	
}	




.input_field
{
  width: 91%;		
}


input[type=radio] 
{
  width: 50%;
  color: purple;
}


.td_gender
{
  padding-left: 0.35vw	
}



.label_gender
{
  font-weight: bold;
  width: 4%;
}


.input_name
{
  width: 91% ;
}


.send_button 
{
  background-color: green;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  margin-left: 10%;
}




.notice-container 
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FDF4E3;
    z-index: 1000;
}

.notice-box 
{
	font-size:1.0vw;	
    background: lightblue;
    padding: 20px 40px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(255,0,0,0.2);
}

.notice-list
{
	font-size:1.0vw;
	list-style-type:none;
	text-align: left;	
}


.notice-button
{
	font-size:1.0vw;	
}


@media screen and (max-width: 768px) 
{
	br
    {
		line-height: 0.1vh;
	}
	
	.logo
	{
	 top: 1.3vw;
	 left: 1.5vw;
	 width: 7vw; /* GROOTTE LOGO */
	}		
	

	.ehbod
	{
	 position: absolute;
	 font-weight: bold;
	 text-align: left;
	 top: 1.5vw;
	 left: 12.0vw;
	 font-size: 2.0vw;
	 line-height: 2.0vw;
	}

	.slogan
	{
	  position: absolute; 	
	  font-size: 1.8vw;
	  top: 6.0vw;
	  left: 12.0vw;
	  z-index: 1;
	}	
	
	
	#main_title
	{
	  font-size: 4.8vw;
	  text-align: left;
	  line-height: 0.7;
	}	
	

	.canvas-header
	{
	  border: 0.1vw solid grey;
	  background-color: white;
	}

	.canvas
	{
	  width: 90%;	
	  top: 10%;
	  font-size: 1.8vw;	  
	}	
	
	table
	{
	  margin-top: 10%;	
      font-size: 0.8vw;
	  width: 95%;	  
	}  

	th
	{
	  font-size: 2.5vw;
	}
	
	table td
	{
	  font-size: 2.5vw;
	}
	


	.input_name
	{
	  width: 96%;
	}

	input[type=radio] 
	{
	  width: 70%;
	  margin-left: 0.2vw;
	}

	
	h1
	{
	   font-size: 3.3vw;	
	}

	.star
	{
	  color: red;
	  font-size: 2.0vw;	
	}
	
	.send_button
	{
		margin-left: 3.0vw;
		font-size:4.0vw;
	}

	.notice-container 
	{
		width: 100%;
		height: 100vh;
	}

	.notice-box 
	{
		font-size:4.0vw;
	}
	
	.notice-list
	{
		font-size:2.0vw;
	}


	.notice-button
	{
		font-size:3.0vw;	
	}

}