/*---------------Login Page---------------*/
/*.login-page .form-frame {
    min-height:70vh;
}*/
.login-page .form-frame .login-frame {
    padding: 70px 20px 20px;
}
.login-page .form-frame .login-frame .inner {
    display:table;
    width:300px;
    margin:0px auto;
}
.login-page .form-frame .login-frame h4 {
    color: #989898;
    letter-spacing: 1px;
}

.login-page .form-group {
    position:relative;
    margin-bottom:0px;
}
.login-page .form-group label{
    font-size:18px;
    color:#989898;
}
.form-group .btn-showpassword {
    right: 0px;
    bottom: 0px;
    position: absolute;
    display: inline-block;
    height: 39px;
    width: 35px;
    border-radius: 0px 5px 5px 0px;
}
.login-page .form-frame .login-frame input:-webkit-autofill::first-line {
    font-family: 'THSarabunPSK', sans-serif !important;
    font-size: 20px;
}
.login-page .form-frame .login-frame input:-webkit-autofill,
.login-page .form-frame .login-frame input:-webkit-autofill:hover,
.login-page .form-frame .login-frame input:-webkit-autofill:focus {
    -webkit-text-fill-color: #737373;
    -webkit-box-shadow: inset 0px -1.2px 1px #fda8c8, 0 0 0px 1000px rgb(245 228 235 / 90%) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}
.login-page .form-frame .btn-main {
    width: 200px;
    max-width:100%;
    display: table;
    margin-top:10px;
    margin:20px auto 0px;
}
.text-danger {
    color: #bd0012 !important;
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
}
.btn-text {
    color: #DB5F8E;
    display:table;
    margin:20px auto 0px;
    font-weight:bold;
    letter-spacing:1px;
}
/*--------------------------------------------------------
    Start: Responsive
----------------------------------------------------------*/
@media (max-width: 1199px) and (min-height: 769px) {
}

    @media (max-width: 1199px) and (max-height: 769px) {
    }

    @media (max-width: 1199px) {
        .login-page .form-frame {
            min-height: 300px;
        }
        /*.sm-100 {
            max-width:100%;
        }*/
        .login-page .form-frame.item-middle {
            display: inline-block !important; 
        }
        .img-login {
            width:40%;
            display:table;
            margin:0 auto;
        }
    }

    @media (max-width: 991px) {
        .login-page .form-frame .login-frame {
            padding: 50px 20px 20px;
        }
    }
/* iPad*/
@media (max-width: 769px) {
}

@media (max-width: 769px) and (max-height: 481px) {
}

@media (max-width: 767px) {
    .img-login {
        width: auto;
        height: 150px;
    }
}
/* Smartphone*/
@media (max-width: 569px) {
}

@media (max-width: 481px) {
    .login-page .form-frame .login-frame {
        padding: 35px 15px 30px;
    }
}

@media (max-width: 414px) {
}
/* iPhone6*/
@media (max-width: 376px) {
    .login-page {
        padding:0px;
    }
    .login-page .form-frame .login-frame .inner {
        width: 100%;
    }

    .login-page .form-frame .btn-main {
        width: 230px;
    }
}
    /* iPhone4,5*/
    @media (max-width: 321px) {
       
    }
}
/*--------------------------------------------------------
    End: Responsive
----------------------------------------------------------*/