@media only screen and (min-device-width: 601px) {
body {
	background: #95A1A3;
	display: flex;
	justify-content: center;
	align-items: center;
	/*height: 100vh;*/
	flex-direction: column;
	}
}

@media only screen and (max-device-width: 600px) {
  body {
	background: #95A1A3;

	justify-content: center;
	align-items: center;
	height: 100vh;
	flex-direction: column;
  }
}



*{
	font-family: sans-serif;
	box-sizing: border-box;
}

@media only screen and (min-device-width: 601px) {
	form {
		width: 500px;
		border: 2px solid #ccc;
		padding: 30px;
		background: #fff;
		border-radius: 15px;
	}
}

@media only screen and (max-device-width: 600px) {
	form {
		border: 2px solid #ccc;
		padding: 30px;
		background: #fff;
		border-radius: 15px;
	}
}

@media only screen and (min-device-width: 601px) {
	h2 {
		text-align: center;
		margin-bottom: 40px;
	}
}

@media only screen and (max-device-width: 600px) {
	h2 {
		text-align: center;
		margin-bottom: 40px;
		font-size: 50px;
	}
}


@media only screen and (min-device-width: 601px) {
	input {
		display: block;
		border: 2px solid #ccc;
		width: 95%;
		padding: 10px;
		margin: 10px auto;
		border-radius: 5px;
	}
}

@media only screen and (max-device-width: 600px) {
	input {
		display: block;
		border: 2px solid #ccc;
		width: 95%;
		padding: 10px;
		margin: 10px auto;
		border-radius: 5px;
		font-size: 50px;
	}
}

@media only screen and (min-device-width: 601px) {
	label {
		color: #888;
		font-size: 18px;
		padding: 10px;
	}
}

@media only screen and (max-device-width: 600px) {
	label {
	color: #888;
	font-size: 50px;
	padding: 10px;
	}
}
	
	
@media only screen and (min-device-width: 601px) {
	button {
		float: right;
		background: #555;
		padding: 10px 15px;
		color: #fff;
		border-radius: 5px;
		margin-right: 10px;
		border: none;
		
	}
	button:hover{
		opacity: .7;
	}
}

@media only screen and (max-device-width: 600px) {
	button {
		/*float: right;*/
		background: #555;
		padding: 10px 15px;
		color: #fff;
		border-radius: 5px;
		margin-right: 10px;
		border: none;
		font-size: 50px;
	}
	button:hover{
		opacity: .7;
	}
}

@media only screen and (min-device-width: 601px) {
.error {
	background: #F2DEDE;
	color: #A94442;
	padding: 10px;
	width: 95%;
	border-radius: 5px;
	margin: 20px auto;
	}
}

@media only screen and (max-device-width: 600px) {
.error {
	background: #F2DEDE;
	color: #A94442;
	padding: 10px;
	width: 95%;
	border-radius: 5px;
	margin: 20px auto;
	font-size: 50px;
	}
}

@media only screen and (min-device-width: 601px) {
.success {
	background: #D4EDDA;
	color: #40754C;
	padding: 10px;
	width: 95%;
	border-radius: 5px;
	margin: 20px auto;
	}
}

@media only screen and (max-device-width: 600px) {
.success {
	background: #D4EDDA;
	color: #40754C;
	padding: 10px;
	width: 95%;
	border-radius: 5px;
	margin: 20px auto;
	font-size: 50px;
	}
}

@media only screen and (min-device-width: 601px) {
	h1 {
		text-align: center;
		color: #fff;
	}
}

@media only screen and (max-device-width: 600px) {
	h1 {
		font-size: 50px;
		text-align: center;
		color: #fff;
	}
}

@media only screen and (min-device-width: 601px) {
	.ca {
		font-size: 14px;
		display: inline-block;
		padding: 10px;
		text-decoration: none;
		color: #444;
	}
	.ca:hover {
		text-decoration: underline;
	} 
}

@media only screen and (max-device-width: 600px) {
	.ca {
		font-size: 30px;
		display: inline-block;
		padding: 10px;
		text-decoration: none;
		color: #444;
	}
	.ca:hover {
		text-decoration: underline;
	} 
}

@media only screen and (min-device-width: 601px) {
	select {
	display: block;
		border: 2px solid #ccc;
		width: 95%;
		padding: 10px;
		margin: 10px auto;
		border-radius: 5px;
		
	}
}

@media only screen and (max-device-width: 600px) {
	select {
	display: block;
		border: 2px solid #ccc;
		width: 95%;
		padding: 10px;
		margin: 10px auto;
		border-radius: 5px;
		font-size: 50px;
		
	}
}

/**** styling for the table */
@media only screen and (min-device-width: 601px) {
	table {
	font-family: Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 100%;
	}
}

@media only screen and (max-device-width: 600px) {
	table {
		font-family: Arial, Helvetica, sans-serif;
		border-collapse: collapse;
		width: 100%;
		height: 20%;
		font-size: 40px;
	}
}




 td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

 tr:nth-child(even){background-color: #f2f2f2;}

 tr:hover {background-color: #ddd;}

 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}


 @media only screen and (min-device-width: 601px) {
	.navigation button {
		float: right;
		background: #555;
		padding: 10px 15px;
		color: #fff;
		border-radius: 5px;
		margin-right: 10px;
		border: none;
		width:100%;
	}
	button:hover{
		opacity: .7;
	}
}

 @media only screen and (max-device-width: 600px) {
	.navigation button {

	}
 }

.choices input[type="radio"]{
  float:left;
}


fieldset {
      overflow: hidden
    }
    
    .some-class {
      float: left;
      clear: none;
    }
    
    label {
      float: left;
      clear: none;
      display: block;
      padding: 0px 1em 0px 8px;
    }
    
    input[type=radio],
    input.radio {
      float: left;
      clear: none;
      margin: 2px 0 0 2px;
    }
	
	
	#moodSelector label {
		
		color: black;
		font-size: 18px;
	}
	
	
	#moodSelector  input {
		width: 10%;
	}
	
	
	.moodTitle {
	
	color: #3d3d3d;
	font-size: 23px; 
	padding-left:10px;

	}
	
		
		.showOnMobile {
			display: none;
		}
	
	@media only screen and (max-device-width: 600px) {
		
		.showOnMobile {
			display: block;
		}
		
		
		#moodSelector label {
		
		color: black;
		font-size: 50px;
	}
	
	
	#moodSelector  input {
		width: 10%;
	}
	
	.moodTitle {
	
	color: #3d3d3d;
	font-size: 50px; 
	padding-left:10px;

	}
	
	 input[type=radio],
    input.radio {
      float: left;
      clear: none;
      margin: 2px 0 0 2px;
	
	  height: 30px;
    }
	
		
	}
	
	
	
/*/