html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 50px 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}
.centered hr {
    margin: 15px -200px 10px;
    border: 0;
    border-top: 1px solid #c9c7c7;
}
/*
----------------------------------------TOP Navigation Bar---------------------------------
*/
ul.topnav {
  top:0;
  height: 50px;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #1d229f;
  position:fixed;
  z-index: 1;
  list-style-type: none;
    overflow: hidden;
    color: white;
}

ul.topnav li {
    float: left;
}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
    background-color: #111;
}

ul.topnav li a.active {
    background-color: #4CAF50;
}

ul.topnav li.right {
    float: right;
}
/*
----------------------------------------FOOTER Bar--------------------------------------
*/
footer {
  background-color: #37302a;;
}
#footer_menu {
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translate(-50%, 1%);
}
#footer_menu {
  color: #edf2f9;
}

/*
----------------------------------------Login page--------------------------------------
*/
.vertical-container {
  height: 100%;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
        align-items: center;
  -webkit-justify-content: center;
        justify-content: center;
}

table#login {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-collapse: collapse;
}