*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body, html, .login_form {
  height: 100%;
  
}

p {
            margin-top: 10px;
            text-align: center;
            <?php echo $notificationStyle; ?>
            padding: 10px;
            border-radius: 5px;
        }

body {
  background  :url(../images/bg.jpeg) #d3d3d3;
  background-color: rgba(211,211,211,0.5);
  color:#fff;
  font-family: helvetica, sans-serif;
  Padding:12px;
 /* Center and scale the image nicely */
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  backdrop-filter:blur(5px);
  text-shadow: -2px -2px 0 #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px 2px 0 #000;

}

body a{
text-decoration:none;
font-weight:bold;
    color: rgb(251, 249, 247);
    text-shadow: -1px -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px 1px 0 #000;
}

body a:hover {
  color:rgba(61, 12, 153, 0.912);
  font-variant:small-caps;
}

/* Alert box styles when executing a command and it's successful or not */
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

.alert.success {background-color: #4CAF50;}
.alert.info {background-color: #87037c;}
.alert.warning {background-color: #ff9800;}

.login_form {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: center;
  -moz-box-flex: center;
  -webkit-flex: center;
  -ms-flex: center;
  flex: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
}

.footer {
    width:100%;
    background:black;
    padding: 1rem;
  text-align: center;
  position:relative;
}
  
.footer a{
			color:white;
      text-shadow: -1px -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px 1px 0 #000;
}
  .footer a:hover{
		color:rgb(235, 119, 25);
}

.login-wrapper {
  max-width: 600px;
  width: 100%;
  height:100%;
  padding-top:10%;
}

.logo {
  text-align: center;
}
.logo img {
  max-width: 100%;
  width: 100%;
  margin: 1em auto 2em;
  background:white;
  padding:14px;
  border-radius:12px;
  text-align:center;
}

h1{
    font-variant:small-caps;
    padding:5px;
    width:94%;
    margin: 1em 3% 1em;
    text-align:center;
    background:rgb(18, 2, 73);
     border-radius: 5px;
    color: white;
    text-shadow: -2px -2px 0 #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px 2px 0 #000;
}
form {
  background  : #220e5a;
  background-size: cover;
  backdrop-filter:blur(5px);
  background-position: center;
  padding: 2em 1em;
  font-family: helvetica, sans-serif;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
form label {
  color: #fff;
  margin: 0 3% 0.25em;
  display: block;
  font-family: helvetica, sans-serif;
}
form input{
  width: 94%;
  padding: 0.5em 0.25em;
  margin: 0 3% 1em;
  font-size: 1.2em;
  border: 2px solid #000;
  outline: none;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
      
 form select{
  padding: 0.5em 0.5em;
  margin: 0 3% 1em;
  font-size: 1.2em;
  border: 2px solid #000;
  outline: none;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}     
      
 .section{
  background: #000;
  padding: 2em 1em;
  font-family: helvetica, sans-serif;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
      
      }
form input.select {
  padding-right: 4rem;
}
form input:focus {
  border: 2px solid rgb(78, 82, 78);
}
form select:focus {
  border: 2px solid #d15e00;
}      
form button {
  width: 40%;
  margin: 2em 3% 0;
  border: none;
  background: rgb(223, 122, 7);
  padding: 0.5em 0;
  font-size: 1.25em;
  clear: both;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  outline: none;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  cursor: pointer;
  font-variant:small-caps;
  font-weight:bold;
  color: white;
  text-shadow: -2px -2px 0 #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px 2px 0 #000;
}
form button:focus, form button:hover {
  background: #262626;
  color:#fff;
  font-variant:small-caps;
}

.hide-show {
  width: 94%;
  margin: -3.62em 3% 0 1.5%;
  position: relative;
  z-index: 5;
  display: none;
}
.hide-show span {
  background: #27047a;
  font-size: 1em;
  padding: 0.5em;
  float: right;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
}