/* Fonts Form Google Font ::- https://fonts.google.com/ -:: */
 @import url('https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Alegreya|Arima+Madurai|Dancing+Script|Dosis|Merriweather|Oleo+Script|Overlock|PT+Serif|Pacifico|Playball|Playfair+Display|Share|Unica+One|Vibur');
/* End Fonts */
/* Start Global rules */
 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
}
/* End Global rules */
/* Start body rules */
 body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"!important;
     overflow-y: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #dde5f4;
     height: 100vh;
}
/* |||||||||||||||||||||||||||||||||||||||||||||*/
/* //////////////////////////////////////////// */
/* End body rules */
/* Start form attributes */
 form.admin-login-form {
     width: 450px;
     min-height: 500px;
     height: auto;
     margin: 8% auto;
     background: #f1f7fe;
     display: flex;
     flex-direction: column;
     border-radius: 15px;
     box-shadow: 0 0 2em #e6e9f9;
}
/* form Container */
 form.admin-login-form .con {
     display: -webkit-flex;
     display: flex;
     -webkit-justify-content: space-around;
     justify-content: space-around;
     -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
     margin: 0 auto;
}
/* the header form form */
 .admin-login-form header {
     margin: 10% auto 10% auto;
     text-align: center;
}
/* Login title form form */
 .admin-login-form header h2 {
     font-size: 30px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"!important;
     color: #000000;
}
/* A welcome message or an explanation of the login form */
 .admin-login-form header p {
    letter-spacing: 0.05em;
}
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
 .admin-login-form .input-item {
     background: #fff;
     color: #333;
     padding: 14.5px 0px 15px 9px;
     border-radius: 5px 0px 0px 5px;
}
/* Show/hide password Font Icon */
 #eye {
     background: #fff;
     color: #333;
     margin: 5.9px 0 0 0;
     margin-left: -20px;
     padding: 15px 9px 19px 0px;
     border-radius: 0px 5px 5px 0px;
     float: right;
     position: relative;
     right: 5%;
     top: -.2%;
     z-index: 5;
     cursor: pointer;
}
/* inputs form */
 .admin-login-form input[class="form-input"]{
     width: 240px;
     height: 50px;
     margin-top: 2%;
     padding: 15px;
     font-size: 16px;
     color: #5E6472;
     outline: none;
     border: none;
     border-radius: 0px 5px 5px 0px;
     transition: 0.2s linear;
}
 .admin-login-form input[id="txt-input"] {
    width: 250px;
}
/* focus */
 .admin-login-form input:focus {
     transform: translateX(-2px);
     border-radius: 5px;
}
/* //////////////////////////////////////////// */
/* //////////////////////////////////////////// */
/* input[type="text"] {
    min-width: 250px;
}
 */
/* buttons */
 button.log-in {
     display: inline-block;
     color: #fff;
     width: 270px;
     height: 50px;
     padding: 0 20px;
     background: #3e4684;
     border-radius: 5px;
     outline: none;
     border: none;
     cursor: pointer;
     text-align: center;
     transition: all 0.2s linear;
     margin: 7% auto;
     letter-spacing: 0.05em;
}
/* Submits */
 .submits {
     width: 48%;
     display: inline-block;
     float: left;
     margin-left: 2%;
}
/* Forgot Password button FAF3DD */
 .frgt-pass {
    background: transparent;
}
/* Sign Up button */
 .sign-up {
    background: #B8F2E6;
}
/* buttons hover */
 @keyframes ani9 {
     0% {
         transform: translateY(3px);
    }
     100% {
         transform: translateY(5px);
    }
}
.login-err-cls {
    text-align: center;
    color: red;
}