html {
	font-family: Arial; /*Comic Sans MS;*/
	font-size: 16px;
}

body{
	margin: 0;
	padding: 0;
}

* {
	box-sizing: border-box;
}

input, select {
	text-align:center;
	font-weight: 700;
	color: brown;
	padding: 5px 0;
	margin: 5px;
	background: transparent;
	border-radius: 5px;
}

input::placeholder {
	font-weight: 700;
	color: brown;
	background-color: transparent;
}

/* When the inputs get focus, do something */
input:focus, select:focus {
  color: #000;
  background-color: #E2EFDA;
  outline: none;
}

/* HEADING FOR ALL PAGES */
.head-body {
	display: table;
	padding: 1%;
	width: 100%;
	/* margin: 0 auto; */
}

.head-left {
	display: flex-start;
	float: left;
	justify-content: space-between;
	width: 30%;
	font-size: calc(.1rem + 1vw);
	text-align: left;
	font-weight: 400;
	color: blue;
}

.head-center {
	display: flex-start;
	float: left;
	justify-content: space-between;
	width: 40%;
	font-size: calc(.3rem + 1vw);
	text-align: center;
	font-weight: 600;
	color: red;
}

.head-right {
	display: flex-start;
	float: left;
	justify-content: space-between;
	width: 30%;
	font-size: calc(.1rem + 1vw);
	text-align: right;
	font-weight: 400;
	color: blue;
}

.head-right img {
	width: calc(3rem + 1vw);
	hight: calc(3rem + 1vh);
}

/* NAVIGATION BODY FOR INDEX.PHP AND AREA PAGES */
.nav-body {
	display: table;
	padding: 1%;
	width: 100%;
}

.nav-left {
	display: flex-start;
	flex-direction: column;
	float: left;
	justify-content: space-between;
	width: 20%;
	align-items: center;
	color: #FFF;
}

.nav-left-links ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.nav-left-links li {
	list-style: none;
}

.nav-left-links li a {
	display: block;
	background-color:green;
	color:yellow;
	font-size: calc(.1rem + 1vw);
	text-align: center;
	text-decoration: none;
	padding: .8rem 0;
	margin-bottom: 1em;
	border: none;
	border-radius: 1000vh;
	box-shadow: 0.1em 0.4em #000;
	overflow:hidden;
	opacity: 0.8;
	cursor: pointer;
	z-index: 9;
}

.nav-left-links li a:hover {
	background-color: #444;
}

.nav-center {
	display: flex;
	flex-direction: column;
	float: left;
	width: 60%;
	padding: 0 2%;
	align-items: justify;
	color: #000;
}

.nav-center-text {
	font-size: calc(.1rem + 1vw);
	font-weight: 800;
	margin: 1.5rem;
}

.nav-right {
	display: flex-end;
	flex-direction: column;
	float: right;
	justify-content: space-between;
	width: 20%;
	align-items: center;
	color: #FFF;
}

.nav-right-links ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.nav-right-links li {
	list-style: none;
}

.nav-right-links li a {
	display: block;
	background-color:green;
	color:yellow;
	font-size: calc(.1rem + 1vw);
	text-align: center;
	text-decoration: none;
	padding: .8rem 0;
	margin-bottom: 1em;
	border: none;
	border-radius: 1000vh;
	box-shadow: 0.1em 0.4em #000;
	overflow:hidden;
	opacity: 0.8;
	cursor: pointer;
	z-index: 9;
}

.nav-right-links li a:hover {
	background-color: #444;
}

.nav-right-links li a.cancel {
	background-color: red;
}

.nav-right-links li a.cancel:hover {
	background-color: #444;
}

/* CHANGE PASSWORD FORM - hidden by default in the index.php */
.form-popup {
  display: none;
  position: fixed;
  top: 40%;
  left: 50%;
  margin-left: -10vw;
  font-size: 1rem;
  border: 3px solid #004B35;
  padding-top:1.2rem;
  padding-left:1rem;
  padding-right:1rem;
  background-color: #FFF2EA;
  border-radius: 1rem;
  box-shadow: 0.5rem 1rem #004B35;
  z-index: 9;
  /* overflow:hidden; */
}

/* INFO POPUP FOR PASSWORD DIRECTIONS LINKS DESCRIPTION AND SCH/UPD TIPS */
.info {
  position: relative;
}

/* Info for index.php change password directions */
.info__pass {
	display: none;
	position: absolute;
	bottom: 7rem;
	left: 1rem;
	right: 1rem;
	font-weight:bold;
	font-size:1.5rem;
	color: yellow;
	padding: 0.5rem 0.5rem;
	text-align: center;
	background-color: #7DB9F7;
	border: .3em solid #FFFFA3;
	border-radius: 10px;
	box-shadow: 5px 8px #004B35;
	overflow: hidden;
}

.info:hover .info__pass {
  display: block;
}

/* Info for index.php and area's links */
.info__links {
	display: none;
	position: absolute;
	bottom: calc(2.5rem + 2.5vh);
	left:10%;
	width:80%;
	font-size: calc(.1rem + 1vw);
	font-weight: bold;
	color: yellow;
	padding: 0.5rem;
	text-align: center;
	background-color: #7DB9F7;
	border: .2rem solid #FFFFA3;
	border-radius: 10px;
	box-shadow: 5px 8px #004B35;
	overflow: hidden;
}

.info:hover .info__links {
  display: block;
}

/* Info for container tips and directions (main sch/upd registry) */
.info__txtbx {
	display: none;
	position: fixed;
	top: 10vh;
	left: 35%;
	max-width: 50%;
	font-weight: bold;
	font-size:1rem;
	color: yellow;
	text-align: center;
	word-wrap: normal;
	padding: .5rem .5rem;
	background-color: #7DB9F7;
	border: .3em solid #FFFFA3;
	border-radius: 10px;
	box-shadow: 5px 8px #004B35;
	overflow: hidden;
}

.info:hover .info__txtbx {
	display: block;
}

/* SUBMIT AND CANCEL BUTTONS */
.btn {
  background-color: #04AA6D;
  color: yellow;
  padding: 8px 15px;
  cursor: pointer;
  margin-bottom:5px;
  opacity: 0.8;
  border: none;
  border-radius: 1000vh;
  box-shadow: 0.2em 0.4em #004B35;
}

/* Add a red background color to buttons */
.cancel {
  background-color: red;
}

.btn:hover {
  opacity: 1;
}

/* Button used to open the SEARCH form at output's tables*/
.open-button {
  background-color:green;
  color:yellow;
  font-size: calc(.5rem + .5vw);
  padding: .3rem 1rem;
  border: none;
  border-radius: 1000vh;
  box-shadow: .1rem .4em #000;
  z-index: 9;
  overflow:hidden;
  cursor: pointer;
  opacity: 0.7;
}

.open-button:hover {
  opacity: 1;
}

/* POPUP ERROR MESSAGES at the center page */
#msg {
  display:table-cell;
  position:fixed;
  top:40%;
  left:40%;
  font-size: calc(.5rem + .5vw);
  padding-bottom:1rem;
  padding-left:1rem;
  padding-right:1rem;
  background-color:#FFF2EA;
  border:3px solid #004B35;
  border-radius: 1em;
  box-shadow: .2rem .5rem #000;
  z-index: 9;
  overflow:hidden;
}

/* TOP BAR FOR CELLPHONES */
.upper-button-bar {
	display: none;
	width: 100%;
	height: 50px;
	color: yellow;
	background: linear-gradient(225deg,#e91e63,#03a9f4);
	padding: 10px;
	margin-bottom: 10px;
}

.toggle-button {
	position: absolute;
	top: .75rem;
	right: 1rem;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
}

.toggle-button .bar {
	height: 3px;
	width: 100%;
	background-color: #FFF;
	border-radius: 10px;
}

@media (max-width:768px) {
	.upper-button-bar {
		display: flex;
	}

	.toggle-button {
		display: flex;
	}

	.head-body {
		display: none;
	}

	.nav-body {
		/* display: none; */
		display: block;
		padding-left: 20%;
	}

	.nav-center {
		display: none;
	}

	.nav-left, .nav-right {
		float: none;
		width: 100%;
	}

	.nav-left-links, .nav-right-links {
		width: 80%;
	}

	.nav-left-links li a, .nav-right-links li a {
		font-size: 1rem;
		padding: .5rem 1rem;
		z-index: 9;
	}

	.nav-body.active {
		display: block;
	}

	.celular {
		display: none;
	}
}