#canvas1 {
    position: absolute;
    top: 0; left: 0;
      width: 100%;
      height: 100%;
    background-image: url("../images/login_logo.f0eb7fdd05cc.png") ;
    background-repeat: no-repeat;
    max-width: 100%;
    height: auto;
    background-size: 100% 100%;
    z-index: -10;
}
 .layer {
    background: radial-gradient(#5a2596a8, #1c003ba8, #0d001bb2) bottom center/200% 200%;
    position: absolute;
    top: 0; left: 0;
      width: 100%;
      height: 100%;
    animation: colorChange 6s infinite alternate
}
@keyframes colorChange {
    to {
      background-position:top center;
    }
}

.form {
  font-family:"Roboto", sans-serif;
  position: relative;
  z-index: 1;
  background: #000000b2;
  opacity: 99%;
  max-width: 260px;
  margin: 220px auto 100px;
  padding: 10px 45px 30px 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5 px rgba(0, 0, 0, 0.24);
  border-radius: 10px;
}
::placeholder {
  color:#333333;
}
.input-container {
  display: flex;
  width: 100%;
  margin-bottom: 5px;
}
.icon {
  padding: 10px;
  color: white;
  text-align: center;
  font-size: 27px
}
.form p{
  font-size: 27px;
  padding: 1px;
  text-align: center;
  font-weight: bold;
  color:#ffffff;
}

.form input{
  outline: 0;
  border-radius: 10px;
  background: #ffffff;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  color:#000000;
}
.form input:hover{
  background-color: #d4cbfa;
  transition: all 1s ease 0s;
}
.form input:focus{
  background-color: #bbadfa;
  transition: all 1s ease 0s;
}
.form button{
  text-transform: uppercase;
  outline: 0;
  border-radius: 10px;
  background: #5b41ce;
  width: 60%;
  border: 0;
  padding: 15px;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
}
.form button:hover, .form button:active, .form button:focus{
  background-color: #4c00ff;
  transition: all 1s ease 0s;
}

.form .passwordlost, .form-reset-pswd .passwordlost, .form-reset-pswd .passwordlost{
  margin: 15px 0 0;
  color: rgb(141, 141, 141);
  font-size: 12px;
  text-decoration:none; 
}
.form .passwordlost:hover, .form .passwordlost:focus, .form-reset-pswd .passwordlost:hover, .form-reset-pswd .passwordlost:focus {
color: rgb(118, 63, 221);
transition: all 1s ease 0s;
}

.form .errormessage{
  color: red;
  font-size: 16px;
  font-weight: normal;
}

.form-reset-pswd {
  font-family:"Roboto", sans-serif;
  position: relative;
  z-index: 1;
  background: #000000b2;
  opacity: 99%;
  max-width: 280px;
  margin: 220px auto 100px;
  padding: 10px 45px 30px 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5 px rgba(0, 0, 0, 0.24);
  border-radius: 10px;
}
.form-reset-pswd p{
  font-size: 19px;
  padding: 6px;
  text-align:justify;
  font-weight: bold;
  color:#ffffff;
}

.form-reset-pswd label{
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-weight: bold;
}
.form-reset-pswd input{
  outline: 0;
  border-radius: 10px;
  background: #ffffff;
  width: 220px;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  color:#000000;
}
.form-reset-pswd input:hover{
  background-color: #d4cbfa;
  transition: all 1s ease 0s;
}
.form-reset-pswd input:focus{
  background-color: #bbadfa;
  transition: all 1s ease 0s;
}
.form-reset-pswd button{
  text-transform: uppercase;
  outline: 0;
  border-radius: 10px;
  background: #5b41ce;
  width: 60%;
  border: 0;
  padding: 15px;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
}
.form-reset-pswd button:hover, .form-reset-pswd button:active, .form-reset-pswd button:focus{
  background-color: #4c00ff;
  transition: all 1s ease 0s;
}

.psw-rst{
  font-family:"Roboto", sans-serif;
  position: relative;
  z-index: 1;
  background: #000000d3;
  opacity: 99%;
  max-width: 350px;
  margin: 220px auto 100px;
  padding: 10px 45px 30px 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5 px rgba(0, 0, 0, 0.24);
  border-radius: 10px;
}
.psw-rst h1{
  color: rgb(255, 255, 255);
  font-size: 24.6px;
  font-weight: bold;
}
.psw-rst h2{
  color: rgb(180, 180, 180);
  font-size: 15px;
  font-weight: normal;
  text-align:justify;
}
.psw-rst h3{
  color: rgb(155, 155, 155);
  font-size: 13px;
  font-weight:normal;
  font-style: italic;
  text-align:justify;
}

.success{
  padding: 10px;
  color: rgb(0, 190, 0);
  text-align: center;
  font-size: 55px;
  background-color: #ffffff;
  border-radius: 55px;
}

.psw-rst a{
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-weight: bold;
  text-decoration:none; 
}

.psw-rst a:hover, .psw-rst a:focus{
  color: rgb(112, 65, 201);
  transition: all 1s ease 0s;
}

.set-pswd-form {
  font-family:"Roboto", sans-serif;
  position: relative;
  z-index: 1;
  background: #000000b2;
  opacity: 99%;
  min-width: 220px;
  max-width: 600px;
  max-height: 490px;
  margin: 10% auto 100px;
  padding: 10px 45px 30px 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5 px rgba(0, 0, 0, 0.24);
  border-radius: 10px;
}
.set-pswd-form input{
  outline: 0;
  border-radius: 10px;
  background: #ffffff;
  width: 220px;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  color:#000000;
}
.set-pswd-form label { 
  display: inline-block; 
  width: 210px; 
  text-align: right; 
  font-size: 16px;
  color:#8f8f8f;
  font-style: italic;
}
.set-pswd-form input:hover{
  background-color: #d4cbfa;
  transition: all 1s ease 0s;
}
.set-pswd-form input:focus{
  background-color: #bbadfa;
  transition: all 1s ease 0s;
}
.set-pswd-form button{
  text-transform: uppercase;
  outline: 0;
  border-radius: 10px;
  background: #5b41ce;
  width: 220px;
  border: 0;
  padding: 15px;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
}
.set-pswd-form button:hover, set-pswd-form button:active, set-pswd-form button:focus{
  background-color: #4c00ff;
  transition: all 1s ease 0s;
}

.set-pswd-form li {
  color: #c9c9c9;
  font-size: 13px;

}
.set-pswd-form .error-msg{
  color: #c00000;
}