style.css

.overlay {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: gray;
  color: white;
  opacity: 1;
  transition: 0.5s;
  visibility: visible;
}
.overlay.hidden {
  opacity: 0;
  visibility: hidden;
}
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0px; opacity:1 }
}

body {
  padding:50px 80px;
  font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}

input[type=text], input[type=password], select {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  border-radius:10px;
}

input[type=text]:focus, input[type=password]:focus, select:focus {
  border: 3px solid #4CAF50;
}

/*
input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 8px 0px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  width: 200px;
  height: 45px;
  border-radius:10px;
  display: inline-block;
  box-shadow: 0 9px #999;
}
*/

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

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

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

.center {
  margin: auto;
  width: 200px;

  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}