﻿input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
/*textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,*/
textarea:-webkit-autofill:focus,
/*select:-webkit-autofill,*/
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: black;
  -webkit-box-shadow: none;
  transition: background-color 5000s ease-in-out 0s;
   font-family: 'Roboto', sans-serif;
}

  input:-webkit-auto-fill, input:-webkit-auto-fill:hover, input:-webkit-auto-fill:focus {
    font-family: 'Roboto', sans-serif;
    }

input:-webkit-autofill:focus .form-group.input-material .form-control:focus ~ label, input:-webkit-autofill:hover .form-group.input-material .form-control:focus ~ label, input:-webkit-autofill .form-group.input-material .form-control:focus ~ label, input:-webkit-autofill .form-group.input-material .form-control[value]:not([value=""]) ~ label {
    top: -14px;
     font-size: .825rem;
     color: #939393;
      font-family: 'Roboto', sans-serif;
}

.input-material input:-webkit-autofill ~ label, .input-material input:-webkit-autofill:focus ~ label{
    top: -14px;
     font-size: .725rem;
     color: #939393;
      font-family: 'Roboto', sans-serif;
}
.loginbody {
    background-image: url('../images/body-image.jpg');
    background-size:cover;
    background-attachment:fixed;
    background-position:bottom;
     font-family: 'Roboto', sans-serif;
}
/* Login Material Floating Start*/
.form-group.input-material {
    position: relative;
    margin-top: 40px;
    margin-bottom: 15px;
     font-family: 'Roboto', sans-serif;
}
.form-group.input-material label {
      color: #939393;
      font-size: .965rem;
	  text-transform:uppercase;
      font-weight: normal;
      position: absolute;
      pointer-events: none;
      left: 50%;
	  transform:translateX(-50%);
      top: 2px;
      transition: 0.1s ease all;
      -moz-transition: 0.1s ease all;
      -webkit-transition: 0.1s ease all;
       font-family: 'Roboto Condensed', sans-serif;
}
.form-group.input-material .form-control {
      border: none;
      border-bottom: 1px solid #000;
      border-radius: 0px;
      background: transparent;
      padding-left: 5px;
      box-shadow: none;
      text-align:center;
          font-size: .965rem;
      text-transform: uppercase;
       font-family: 'Roboto', sans-serif;
       font-weight:bold !important;
      /* active state */
      /* invalid state */ }
.form-group.input-material .form-control:focus, .form-group.input-material .form-control[value]:not([value=""]) {
        border-bottom-color: #1e8acb;
        color: #000;
    text-align: center;
     font-family: 'Roboto', sans-serif;
     font-weight:bold;
}
      .form-group.input-material .form-control:focus ~ label, .form-group.input-material .form-control[value]:not([value=""]) ~ label {
        top: -14px;
        font-size: .725rem;
        color: #939393;
         font-family: 'Roboto', sans-serif;
      }
      .form-group.input-material .form-control:focus.invalid, .form-group.input-material .form-control.invalid, .form-group.input-material .form-control:focus.parsley-error, .form-group.input-material .form-control[value]:not([value=""]).parsley-error {
        border-bottom-color: #dc3545;
         font-family: 'Roboto', sans-serif;
      }
      .form-group.input-material .form-control:focus.invalid ~ label, .form-group.input-material .form-control.invalid ~ label, .form-group.input-material .form-control:focus.parsley-error ~ label, .form-group.input-material .form-control[value]:not([value=""]).parsley-error ~ label {
        color: #dc3545;
         font-family: 'Roboto', sans-serif;
      }
    .form-group.input-material .parsley-errors-list {
      color: #dc3545;
      list-style: none;
      font-size: 0.7em;
      padding-left: 5px;
       font-family: 'Roboto', sans-serif;
    }
  .fpr{
      margin:10px 0 40px;
          font-size: .85rem;
          font-family:'Roboto Condensed', sans-serif;
  }
  .fpr a{color:#000;}
  .fpr a:hover{color:#1e8acb;font-family:'Roboto Condensed', sans-serif;}

/* Login Material Floating End*/
.ldings{
    bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0;
    background:rgba(255,255,255,0.99);
}
.loadingsinner{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
#loadings {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1000;
                background-color:rgba(255,255,255,0.95);
            }
			
			#sleffect {
                animation: a-s .5s 2.5s 1 forwards;
                background-color: #f1f1f1;
                height: 3px;
                margin: 40px auto 20px;
                opacity: 0;
                overflow: hidden;
                position: relative;
                width: 300px
            }
#sleffect::before {
                animation: a-lb 20s 3s linear forwards;
                background-color: #1e8acb;
                content: '';
                display: block;
                height: 100%;
                position: absolute;
                transform: translateX(-300px);
                width: 100%
            }
        
            @keyframes a-lb {
                0% {
                    transform: translateX(-300px)
                }
                5% {
                    transform: translateX(-240px)
                }
                15% {
                    transform: translateX(-30px)
                }
                25% {
                    transform: translateX(-30px)
                }
                30% {
                    transform: translateX(-20px)
                }
                45% {
                    transform: translateX(-20px)
                }
                50% {
                    transform: translateX(-15px)
                }
                65% {
                    transform: translateX(-15px)
                }
                70% {
                    transform: translateX(-10px)
                }
                95% {
                    transform: translateX(-10px)
                }
                100% {
                    transform: translateX(-5px)
                }
            }
        
            @keyframes a-s {
                100% {
                    opacity: 1
                }
            }
        
            @keyframes a-h {
                100% {
                    opacity: 0
                }
            }
        
            @keyframes a-nt {
                100% {
                    transform: none
                }
            }

            .ldrmsg {
                color: #939393;
                font-size:1rem;
                letter-spacing: .25px;
                text-align: center;
            }
			
			.logoicon{
			text-align:center;
			}
            .ldglogoimg{
                height:130px;
            }