body, html { margin: 0; padding: 0; font-size: 14px; height: 100%; }

.font1 { font-family: Poppins; }
.page { position: relative; min-height: 100%; }

/* .background-image { background: url(../../images/Mojave.jpg); background-size: cover; display: block; width: 100%; height: 100vh; } */
.background-image { background: #eeeeee; display: block; width: 100%; height: 100vh; }
.login-page { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: auto; background: #fff; border-radius: 5px; }
.login-header { height: 80px; display: block; padding: 5px 20px; }  /*background: #2F323D; */
.login-header img { height: 80px; margin: auto; display: block; }
.form-holder { padding: 20px 30px; }
.form-holder .form-group { position: relative; margin-bottom: 30px; }
.form-group p { font-size: 100% !important; }
.input-material { width: 100%; padding: 10px 0px; font-size: 110%; color: #000; border: none; border-bottom: 1px solid #eee; transition: background 0s ease-out 0s; }
.input-material:focus { outline: none; border-bottom: 1px solid #fb9678; }
.input-material ~ label { font-size: 90%; color: #E32828; }
.button-material { font-size: 16px; transition: all 0.3s; border: none; background: #03a9f3; border-radius: 60px; padding: 10px 0px; width: 100%; color: #fff; font-weight: 400; cursor: pointer; }
.button-material:hover { background: #0097DB; }
.btn-forget-pwd { text-align: right; display: block; }

.has-shadow { -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05); }


@media screen and (max-width: 700px){
  .login-page { max-width: 320px; }
  .login-header img { width: 200px; }
}