.login-p {
  color:black !important; 
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight: 550 !important;
}

.login-p-2 {
  color:black !important; 
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight: 450 !important;
}

.fill-primary-color {
  fill: #42428a;
}

.login-button{
  height: 40px;
  font-size:20px;
  margin: 0px !important;
  width: 240px !important;
}

.login-error-warn {
  background-color:#FF5252;
  color:white; 
  font-size:16px; 
  border-radius:2px; 
  padding:8px 16px 8px 16px;
}

.img-login-bg {
  background: url(../../img/login-bg-1920x1080.jpg) no-repeat left center fixed !important; 
  height:100vh !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
}

.img-login-logo {
  margin-bottom:20px;
}

.left-of-page {
  position:absolute;
  top:50%;
  left:6%;
  transform:translate(-6%,-50%);
}

.login-form {
  font-size:20px;
}

.input-icon-person {
  background: rgba(224,224,224,0.4);
  color: white;
  padding: 12.5px 5px 13.5px 10px;
  border-radius: 2.5px 0px 0px 2.5px;
}

.input-icon-lock {
  background: rgba(224,224,224,0.4);
  color: white;
  padding: 12.5px 5px 13.5px 10px;
  border-radius: 1.5px 0px 0px 1.5px;
}

.login-form-input{
  width: 300px;
  height: 50px;
  background: rgba(224,224,224,0.4);
  font-size: 19px;
  color: white;
  outline: none;
  border: none;
  border-radius: 0px 1.5px 1.5px 0px;
} 

/* to avoid login input autofill yellow color. This makes it transparent */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-text-fill-color: black !important;
}

.login-form-input::-webkit-input-placeholder{
  color:white;
}

md-icon:hover.white-hover{
  fill: white;
}

/* Screen Resolutions
    1920x1080 16:9
    1600x900 16:9
    1366x768 16:9
    1280x1024 5:4
    1280x800 8:5
    1024x768 4:3 
*/

.img-login-bg {
  background: url(../../img/login-bg.png) no-repeat center center fixed !important; 
  height:100vh !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
}

@media screen and (max-width: 768px){
  .center-of-page {
    position:absolute;
    margin-top:55px;
    padding-right:30px;
    padding-left: 30px; 
    top:0%;
    left:50%;
    transform:translate(-50%,0%);
  }

  .img-login-bg {
    background: url(../../img/login-bg.png) no-repeat center center fixed !important; 
    height:150vh !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
  }

  .padding-mobile {
    padding-left:20px;
    padding-right: 20px;
  }
} 

@media screen and (max-width: 1024px){
  .login-form-input{
    width: 220px;
    height: 50px;
    background: rgba(224,224,224,0.4);
    font-size: 19px;
    color: white;
    outline: none;
    border: none;
    border-radius: 0px 1.5px 1.5px 0px;
  }
} 

/* 
@media screen and (max-width: 1920px){
  .img-login-bg {
    background: url(../../img/login-bg-1920x1080.jpg) no-repeat left top fixed !important; 
    height:100vh !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
  }
}
@media screen and (max-width: 1600px){
  .img-login-bg {
    background: url(../../img/login-bg-1600x900.jpg) no-repeat left top fixed !important; 
    height:100vh !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
  }
}
@media screen and (max-width: 1366px){
  .img-login-bg {
    background: url(../../img/login-bg-1366x768.jpg) no-repeat left top fixed !important; 
    height:100vh !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
  }
}
@media screen and (max-width: 1280px) and (max-height: 1024px){
  .img-login-bg {
    background: url(../../img/login-bg-1280x1024.jpg) no-repeat left center fixed !important; 
    height:100vh !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
  }
}
@media screen and (max-width: 1280px) and (max-height: 800px){
  .img-login-bg {
    background: url(../../img/login-bg-1280x800.jpg) no-repeat left center fixed !important; 
    height:100vh !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
  }

  .img-login-logo {
    height:160px; 
    width:160px;
    margin-bottom:150px; 
  }
  
  .left-of-page {
    position:absolute;
    top:50%;
    left:4%;
    transform:translate(-4%,-50%);
  }

  .login-form-input{
    width: 240px;
    height: 50px;
    background: rgba(224,224,224,0.2);
    font-size: 19px;
    color: white;
    outline: none;
    border: none;
    border-radius: 0px 1.5px 1.5px 0px;
  }
}
@media screen and (max-width: 1024px) and (max-height: 768px){
  .img-login-bg {
    background: url(../../img/login-bg-1024x768.jpg) no-repeat left center fixed !important; 
    height:100vh !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
  }  

  .img-login-logo {
    height:160px; 
    width:160px;
    margin-bottom:150px; 
  }
  
  .left-of-page {
    position:absolute;
    top:50%;
    left:4%;
    transform:translate(-4%,-50%);
  }

  .login-form-input{
    width: 240px;
    height: 50px;
    background: rgba(224,224,224,0.2);
    font-size: 19px;
    color: white;
    outline: none;
    border: none;
    border-radius: 0px 1.5px 1.5px 0px;
  }
} */