* {
	margin: 0;
}

header {
	width : 100%;
	height : 90px;
	text-align : center;
}
.main {
  background-color: dodgerblue;
  height: 180px;
  text-align:center;
  background-color: #FFFAF0;
}

button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

button:hover {
  background: #bbb;
}

input[type=text] {
  padding: 12px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 75%;
  background: #f1f1f1;
}

input[type=text]:hover {
  background: #f1f1f1;
}

/* alert css */

.alert {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top : -100px;

  box-shadow: 0 32px 48px 0 rgba(0, 0, 0, 0.5);
  width: 500px;
  height : 200px;
  background: white;
  padding: 10px;
  text-align:center;
}
.alert input[type=submit] {
  width: 50%;
  background-color: dodgerblue;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}
.alert input[type=submit]:hover {
  background-color: #45a049;
}

.loader {
  visibility : hidden;
  position: fixed;
  top: 45%;
  left: 45%;
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  z-index:2;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader-background {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

footer {
	width : 100%;
	height : 100px;
	text-align : center;
}