/* Use iphone 5/SE as minimum */
@media only screen and (min-width: 360px) {
	html, body {
		font-family: 'Roboto', 'Lato', 'Ubuntu', sans-serif;
		line-height: 1.6;
		width: 100%;
		margin: auto;
		/*background-color: #e6f9ff;*/
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
		-moz-text-size-adjust:none;
		text-size-adjust:none;
	}

	.container {
		margin: 0; 
		padding: 0;
		width: 100%;
		/*background-color: #e6f9ff;*/
		background-image: url("../images/bg-color/bg-image.jpg");
		cursor: pointer;
	}

	h1 {font-size: 1.2em;}

	h2 {font-size: 1.1em;}

	h3 {font-size: 1.05em;}
	
	#welcome_header div {
		display: inline-block;
		text-align: center;
		width: 95%; 
		margin: auto;
	}
	
	#welcome_header img {
		height: 55px;
	}

	#welcome_header span {
	 	display: inline-block; 
	 	vertical-align: middle; 
	 	color: red; 
	 	font-size: 1.3em; 
	 	font-weight: bolder;
	}

	.sticky {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		width: 100%;
	}

	#robo_test {
		width: 120px;
		font-weight: bolder;
		font-size: 1.1em;
		text-align: center;
	}

	#robo_answer {
		width: 120px;
		font-weight: bolder;
		font-size: 1.1em;
		text-align: center;
	}	

	#hamburger {
		color: white;
		background-color: black;
		font-size: 1.5em;
		text-align: center;
		width: 35px;
		margin: 5px;
		padding: 10px 6px;
		border: none;  	
	}
	
	.menu {
		display: none;
		flex-flow: column nowrap;
		justify-content:space-between;
		list-style-type: none;
		position: fixed; 
		z-index: 10;
		padding-top: 0;		
		top: 50px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #333;
		width: 150px;
		-webkit-animation-name: animateleft;
		-webkit-animation-duration: 0.4s;
		animation-name: animateleft;
		animation-duration: 0.4s;
	}

	.menu li {
		float: left;
	}

	.menu li, .menu a {
		font-size: 1em;
	}

	.menu a, .dropbtn {
		display: block;
		color: white;
		text-align: left;
		padding: 4px 4px 2px 4px;
		text-decoration: none;
	}

	.menu a:hover, .dropdown:hover .dropbtn {
		background-color: green;
	}

	.dropdown {
		display: block;
	}

	.dropdown-content {
		display: none;
		position: fixed;
		top: 90px; 
		left: 115px;
		background-color: green; 
		min-width: 50px;
		box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.3s;
	}

	.dropdown-content a {
		color: white; 
		padding: 4px 4px 2px 4px;
		text-decoration: none;
		display: block;
		text-align: left;
	}

	.dropdown-content a:hover {
		background-color: #80ff80;
		color: black;
	}

	.dropdown:hover .dropdown-content {
		display: block;
	}

	ol {list-style-type: lower-alpha;}

	input{
		font-size: 1em;
		margin: 5px 0;
    	padding: 12px 8px;
		border: 1px solid darkgreen;
		border-radius: 5px;
	}

	input:hover, textarea:hover {background-color: #ffff66;}

	.data_input {
		width: 310px;
		font-size: 1em;
		margin: 0 0 6px 0;
		padding: 4px;
		border: 1px solid darkgreen;
		border-radius: 5px;
	}

	textarea {
		width: 340px;
		height: 225px;
		margin: 0;
		padding: 6px;
		box-sizing: border-box;
		border: 2px solid #ccc;
		border-radius: 10px;
		background-color: white;
		resize: none;
		font-size: 1.3em;
	}

	button {
	  	background-color: darkgreen;
	  	border: none;
	  	border-radius: 5px;
	  	margin: 5px;
	  	padding: 12px 8px;
	  	text-align: center;
	  	display: inline-block;
	  	font-size: 1em;
	  	color: white;
	  	cursor: grab;
	}

	button:hover {
	  	background-color: #4CAF50;
	  	color: white;
	}

	.toggle_pswd {
		position: relative;
		text-align: center;
	  	display: inline-block;
	  	font-size: 1.2em;
	  	font-weight: bold;
	}

	.green_border {
		border: 3px solid darkgreen;
	}	

	.bolder {
		font-weight: bolder;
	}

	.center_align {text-align: center;}

	.red {color: red;}

	.show {display: block;}

	.hide {display: none;}

	.bg_blue {
		background-color: blue;
	}

	.bg_red {
		background-color: red;
	}

	.bg_black {
		background-color: black;
	}

	.modal_warning {
		color: red;
		font-size: 1.3em;
		font-weight: bolder;
	}
	
	.modal {
		display: none; 
		position: fixed; 
		z-index: 20;
		padding-top: 50px;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0,0.4);
	}

	.modal-content {
		position: relative;
		margin: auto;
		padding: 0;
		width: 325px;
		background-color: #f2f2f2;
		border: 5px solid red;
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.4s;
	}

	.modal header {
		text-align:center;
	}
	/* Add Animation */
	@-webkit-keyframes animatetop {
		from {top:-300px; opacity:0} 
		to {top:0; opacity:1}
	}

	@keyframes animatetop {
		from {top:-300px; opacity:0}
		to {top:0; opacity:1}
	}
	
	@-webkit-keyframes animateleft {
		from {left:-300px; opacity:0} 
		to {left:0; opacity:1}
	}

	@keyframes animateleft {
		from {left:-300px; opacity:0}
		to {left:0; opacity:1}
	}

	/* width */
	::-webkit-scrollbar {
	  width: 10px;
	}
	/* Track */
	::-webkit-scrollbar-track {
	  box-shadow: inset 0 0 5px black; /*grey*/
	  border-radius: 0;
	}
	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: black; /*#b3b3b3;*/
	  border-radius: 0;
	}

	.list_update {
		border: 5px solid red;
  		border-radius: 5px;
  		width: 95%;
  		margin: 0;
	}

	.list_update p {padding: 0 10px;}

	.list_update p:first-child {
		padding: 20px 10px 0 10px;
	}

	.list_update span {
		display: inline-block;
		width: 125px;
		font-weight: bolder;
	}

	.list_update_input {
		display: inline-block;
		width: 175px;
		font-size: 1em;
		margin: 0 0 6px 0;
		padding: 4px;
		border: 1px solid darkgreen;
		border-radius: 5px;
	}

	.list_update textarea {
		display: inline-block;
		width: 310px;
		height: 64px;
	}

	.par_signin_options {
		width: 350px; 
		text-align: center;
		margin: 15px auto; 
		padding: 8px;
	}
}

@media only screen and (min-width: 540px) {
	.container {
		padding: 10px;
	}

	h1 {font-size: 1.3em;}

	#welcome_header span {
	 	font-size: 1.5em; 
	}

	#signin_options {
		margin-left: 50px;
	}

	#hamburger {display: none;}

	.menu {
		display: flex;
		flex-flow: row nowrap;
		justify-content:space-between;
		list-style-type: none;
		position: relative;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #333;
		width: 100%;
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.4s;
	}

	.menu li {float: left;}

	.menu li, .menu a {font-size: 1.05em;}

	.menu a, .dropbtn {
		display: inline-block;
		color: white;
		text-align: center;
		padding: 10px;
		text-decoration: none;
	}

	.dropdown {display: inline-block;}

	.dropdown-content {
		display: none;
		position: fixed;
		left: auto;
		background-color: green;
		min-width: 50px;
		box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
		z-index: 1;
		-webkit-animation-name: animatetop;
		-webkit-animation-duration: 0.4s;
		animation-name: animatetop;
		animation-duration: 0.4s;
	}

	.dropdown-content a {
		color: white;
		padding: 6px 8px;
		text-decoration: none;
		display: block;
		text-align: left;
	}

	.dropdown-content a:hover {
		background-color: #80ff80;
		color: black;
	}

	#robo_answer {
		font-size: 1em;
		width: 85px;
		padding: 12px 8px;
	}

	.data_input {
		width: 520px;
		font-size: 1em;
		margin: 0 0 6px 0;
		padding: 4px;
		border: 1px solid darkgreen;
		border-radius: 5px;
	}

	textarea {
		width: 535px;
		height: 150px;
	}

	.list_update {
		border: 5px solid red;
  		border-radius: 5px;
  		width: 550px;
  		margin: 0;
	}

	.list_update p {padding: 0 10px;}

	.list_update p:first-child {
		padding: 20px 10px 0 10px;
	}

	.list_update span {
		display: inline-block;
		width: 220px;
		font-weight: bolder;
	}	

	.list_update_input {
		display: inline-block;
		width: 295px;
		font-size: 1em;
		margin: 0 0 6px 0;
		padding: 4px;
		border: 1px solid darkgreen;
		border-radius: 5px;
	}

	.list_update textarea {
		display: inline-block;
		width: 525px;
		height: 35px;
	}

	.par_signin_options {
		width: 420px; 
		text-align: center;
		margin: 15px auto; 
		padding: 8px;
	}
}

@media only screen and (min-width: 800px) {
	#welcome_header span {
	 	font-size: 1.6em; 
	}
	
	.dropdown-content {
		display: none;
		position: fixed;
		left: auto;
		background-color: black;
		min-width: 50px;
		box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
		z-index: 1;
		-webkit-animation-name: none;
		animation-name: none;
	}

	#robo_answer {width: 100px;}

	.modal-content {width: 500px;}

	textarea {
		width: 600px;
		height: 175px;
	}
}

@media only screen and (min-width: 1024px) {
	html, body {
		width: 1024px;
		margin: auto;
	}
}

@media only screen and (min-width: 1280px) {
	
}

@media only print {
	br {height: 0; width: 0;}
	
	h1 {color: black;}
	
	button,
	select,
	.notes,
	.hide,
	.search_names_in_tbl {display: none;}

	.show {display: block;}

	ul li input {border: none;}
}