/*--------------------------------------------------
    [TRANSITION]
----------------------------------------------------*/
/* Cubic Bezier Transition */
/***
Login page
***/
/* bg color */
.login {
    background: #437bc8 url('../img/bg_new.png') no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    display:flex;
    position:relative;
    height:100vh;
    width:100vw;
    /*flex-direction:column;*/
    align-items:center;
    justify-content:center;
}

    .login a {
        /* color: #edf4f8 !important; */
    }

    .login .logo {
        display:none;
        margin: 0 auto;
        margin-top: 180px;
        padding: 15px;
        text-align: center;
    }
    .login .mainlogin {
       /* display: flex;
        align-items: center;
        flex-direction: column;
        justify-content:center;
        position: absolute;
        width: 100rem;
        height: 60rem;*/
        /* background: url('../img/loginmain_new1.png') center no-repeat;
        background-size: 90% 90%;*/
        /*margin: 5% 5% 0 15%;*/
    }


    .login .contentNew {
        /*position:fixed;*/
        width: 100%;
        height: 100%;
        /*margin: 40px auto 40px auto;*/
        /*margin: 12% 0% 5% 22%;*/
        /* top:25vh;
        left:21vw;*/
        background: url('../img/loginmain_new1.png') center no-repeat;
        /*background-size: 90% 90%;*/
        /*background-color:#fff;*/
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
    }

    .login .content {
        /*position:fixed;*/
        width: 100rem;
        /*height: 100rem;*/
        /*margin: 40px auto 40px auto;*/
        /*margin: 12% 0% 5% 22%;*/
        /* top:25vh;
        left:21vw;*/
        /*background: url('../img/loginmain_new1.png') center no-repeat;*/
        /*background-size: 90% 90%;*/
        /*background-color:#fff;*/
        display: flex;
        flex-direction: row;
        /*align-items: center;*/ 
        animation:fadein 1s ease-out;
    }
        .login .content .right {
            width: 55%;
            height:100%;
            /*position:relative;*/
          /*  background: url('../img/right.png') center no-repeat;
            background-size:100% 100%;*/
        }


        .login .forget-content {
            width: 800px;
            margin: 40px auto 40px auto;
        }

    .login .form-title {
        margin-bottom: 20px;
    }

    .login .form-title {
        color: #edf4f8;
        font-size: 19px;
        font-weight: 400 !important;
    }

    .login .form-subtitle {
        color: #c9dce9;
        font-size: 17px;
        font-weight: 300 !important;
        padding-left: 10px;
    }

    .login .content h4 {
        color: #555;
    }

    .login .content .hint {
        color: #b7d1e2;
        padding: 0;
        font-size: 14px;
        margin: 15px 0 7px 0;
    }

    .login .content .login-form {
        width: 45%;
        height: 100%;
        padding: 52px 60px;
        position: relative;
        background-color: #fff;
    }
    .login .content .forget-form {
        padding: 0px;
        margin: 0px; 
    }

    .login .content .form-control {
        border: none;
        background-color: #6ba3c8;
        border: 1px solid #6ba3c8;
        height: 43px;
        color: #000;
    }

        .login .content .form-control:focus, .login .content .form-control:active {
            border: 1px solid #83b8db;
        }

        .login .content .form-control::-moz-placeholder {
            color: #000000c3;
            opacity: 1;
        }

        .login .content .form-control:-ms-input-placeholder {
            color: #000000c3;
        }

        .login .content .form-control::-webkit-input-placeholder {
            color: #000000c3;
        }

    .login .content select.form-control {
        padding-left: 9px;
        padding-right: 9px;
    }

    .login .content .forget-form {
        display: none;
    }

    .login .content .register-form {
        display: none;
    }

    .login .content .form-title {
        font-weight: 300;
        margin-bottom: 25px;
    }

    .login .content .form-actions {
        clear: both;
        border: 0px;
        padding: 0px 30px 25px 30px;
        margin-left: -30px;
        margin-right: -30px;
    }

.form-actions .forget-password-block {
    padding-top: 7px;
}

.login-options {
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 50px;
    border-top: 1px solid #69a0c4;
    border-bottom: 1px solid #69a0c4;
}

    .login-options h4 {
        margin-top: 8px;
        font-weight: 600;
        font-size: 15px;
        color: #b7d1e2 !important;
    }

.login .forget-password {
    font-size: 14px;
}

.login-options .social-icons {
    float: right;
    padding-top: 3px;
}

    .login-options .social-icons li a {
        border-radius: 15px 15px 15px 15px !important;
        -moz-border-radius: 15px 15px 15px 15px !important;
        -webkit-border-radius: 15px 15px 15px 15px !important;
    }

.login .content .forget-form .form-actions {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 20px;
}

.login .content .register-form .form-actions {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0px;
}

.login .content .form-actions .checkbox {
    margin-top: 8px;
    display: inline-block;
}

.login .content .form-actions .btn {
    margin-top: 1px;
}

.login .btn-primary {
    background-color: #36baa1;
    border: 1px solid #72a9cc;
    color: #fff;
    font-size: 18px;
    font-family: "Microsoft YaHei";
    padding: 10px 25px !important;
}

    .login .btn-primary:hover {
        border: 1px solid #00a3d3;
        background-color: #66c47cd5;
        color: #fff;
    }

.login .btn-default {
    background-color: #00b8ee;
    border: 1px solid #72a9cc;
    color: #fff;
    font-size: 18px;
    font-family: "Microsoft YaHei";
    padding: 10px 25px !important;
}

    .login .btn-default:hover {
        border: 1px solid #00a3d3;
        background-color: #4bcbf1;
        color: #fff;
    }

.login .content .forget-password {
    color: #d7eaf7;
    font-size: 15px;
}

.login .content .rememberme {
    margin-top: 8px;
}

.login .content .check {
    color: #c9dce9 !important;
}

.login .content .create-account {
    text-align: center;
    margin-top: 20px;
}

    .login .content .create-account p a {
        font-weight: 300;
        font-size: 16px;
        color: #ffffff;
    }

    .login .content .create-account a {
        display: inline-block;
        margin-top: 5px;
    }

/* footer copyright */
.login .copyright {
    text-align: center;
    margin: 10px auto 30px 0;
    padding: 10px;
    color: #ccc;
    font-size: 13px;
}

@media (max-width: 1400px) {
    .login .logo {
        margin-top: 100px;
    }
}

@media (max-width: 480px) {
    /***
  Login page
  ***/
    .login .logo {
        margin-top: 30px;
        padding: 0px;
    }

    .login .content {
        /*width: 100rem;
        display: flex;
        flex-direction:column;
        align-items:center;*/

        display:grid;
        grid-template-columns:1fr;
        height:auto;
        max-width:450px;
    }
        .login .content .login-form{
            width:100%; 
        }

        .login .content .right {
            width: 100%;
            height: 100%;  
        }
        .login .content h3 {
            font-size: 22px;
        }

    .login .checkbox {
        font-size: 13px;
    }
}

.result-message {
    font-size: 18px;
    font-weight: 700;
    position: relative;
    padding-bottom: 40px;
}

.result-title-btn {
    width: 140px;
    margin-top: 20px;
}

@media (max-width:1920px) {
    .login-copyright {
        color: #ccc;
    }
}

@media (max-width:1440px) {
    .login-copyright {
        color: #ccc;
    }
}

@media (max-width:1366px) {
    .login-copyright {
        color: #ccc;
    }
}

@media (max-width:1280px) {
    .login-copyright {
        color: #ccc;
    }
}

@media (max-width:1024px) {
    .login-copyright {
        color: #ccc;
    }
}

@media (max-width:800px) {
    .login-copyright {
        color: #ccc;
    }
}

@keyframes fadein{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}