/* =========================================================
   VIIcode Login Page
   PC / Tablet / Mobile Responsive
   ========================================================= */


/* =========================================================
   基础
   ========================================================= */

.login-bg-wrapper{
    width:100%;
    min-height:calc(100vh - 180px);

    background:#000;
    color:#fff;

    overflow-x:hidden;
}


.login-bg-wrapper *,
.login-bg-wrapper *::before,
.login-bg-wrapper *::after{
    box-sizing:border-box;
}


/* =========================================================
   页面容器

   浏览器宽度变化时：
   小屏 = 页面宽度 92%
   大屏 = 最大 1180px
   ========================================================= */

.login-container{
    width:min(92%,1180px);
    max-width:1180px;

    margin:0 auto;

    padding:0;
}


/* =========================================================
   主区域
   ========================================================= */

.login-content{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    padding:
        clamp(50px,7vw,110px)
        0
        clamp(60px,8vw,120px);

    float:none !important;

    position:relative;

    min-height:0 !important;
}


/* =========================================================
   PC：左右两栏

   两个模块永远 1 : 1
   浏览器缩小时自动一起缩
   ========================================================= */

.login-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:
        clamp(
            40px,
            7vw,
            100px
        );

    width:100%;

    margin:0;

    padding:0;

    align-items:stretch;
}


/* =========================================================
   左右卡片
   ========================================================= */

.login-card{
    display:flex;

    width:100%;
    min-width:0;

    margin:0;

    padding:0;

    background:transparent;

    position:relative;
}


.login-card-inner{
    display:flex;
    flex-direction:column;

    width:100%;

    padding:
        clamp(
            25px,
            3vw,
            42px
        );

    border:1px solid rgba(255,255,255,.18);

    background:#020202;
}


/* =========================================================
   标题
   ========================================================= */

.login-title{
    width:100%;

    margin:
        0
        0
        clamp(
            20px,
            2.5vw,
            32px
        );

    padding:0;

    color:#fff;

    font-size:
        clamp(
            24px,
            2.3vw,
            32px
        );

    font-weight:400;

    line-height:1.3;

    text-align:left;
}


/* =========================================================
   注册说明
   ========================================================= */

.login-desc{
    width:100%;

    margin:
        0
        0
        clamp(
            30px,
            4vw,
            50px
        );

    padding:0;

    color:#ccc;

    font-size:
        clamp(
            14px,
            1.2vw,
            16px
        );

    line-height:1.8;
}


/* =========================================================
   左侧创建账户按钮

   左卡片内容少，
   按钮自然保持在合理位置
   ========================================================= */

.register-card .login-btn{
    margin-top:auto;
    align-self:flex-start;
}


/* =========================================================
   Form
   ========================================================= */

.login-form{
    display:flex;

    flex-direction:column;

    width:100%;

    margin:0;

    padding:0;
}


/* =========================================================
   form group
   ========================================================= */

.login-form .form-group{
    width:100%;

    margin:
        0
        0
        clamp(
            18px,
            2vw,
            24px
        );

    padding:0;
}


/* =========================================================
   label

   清除原来 Bootstrap col-sm-4
   ========================================================= */

.login-form .control-label{
    display:block;

    width:100% !important;

    max-width:100% !important;

    margin:
        0
        0
        8px;

    padding:0 !important;

    float:none !important;

    color:#fff;

    font-size:
        clamp(
            13px,
            1.1vw,
            15px
        );

    font-weight:400;

    line-height:1.4;
}


/* =========================================================
   输入框
   ========================================================= */

.login-form .form-control{
    display:block;

    width:100% !important;
    max-width:100% !important;

    height:
        clamp(
            42px,
            3.5vw,
            46px
        );

    margin:0 !important;

    padding:
        9px
        12px;

    background:#fff;

    border:1px solid #ddd;

    border-radius:0;

    color:#222;

    font-size:14px;

    line-height:1.4;

    box-shadow:none !important;

    float:none !important;
}


.login-form .form-control:focus{
    border-color:#999;

    outline:none;

    box-shadow:none !important;
}


.login-form .form-control::placeholder{
    color:#999;
}


/* =========================================================
   忘记密码
   ========================================================= */

.forgotten-wrapper{
    width:100%;

    margin:
        -3px
        0
        clamp(
            20px,
            2.5vw,
            28px
        );
}


.forgotten{
    display:inline-block;

    margin:0;

    padding:0;

    float:none !important;

    color:#aaa !important;

    font-size:14px;

    line-height:1.4;

    text-decoration:none !important;
}


.forgotten:hover{
    color:#fff !important;
}


/* =========================================================
   按钮
   ========================================================= */

.login-bg-wrapper .login-btn{
    display:inline-flex !important;

    align-items:center;
    justify-content:center;

    width:auto;

    min-width:
        clamp(
            130px,
            12vw,
            160px
        );

    height:
        clamp(
            42px,
            3.5vw,
            46px
        );

    margin:0;

    padding:
        8px
        clamp(
            22px,
            2vw,
            30px
        );

    background:#fff;

    border:1px solid #fff;

    border-radius:0;

    color:#000;

    font-size:
        clamp(
            13px,
            1.1vw,
            15px
        );

    font-weight:400;

    line-height:1;

    text-align:center;

    float:none !important;

    position:static !important;

    transform:none !important;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.login-bg-wrapper .login-btn:hover,
.login-bg-wrapper .login-btn:focus{
    background:#ddd;

    border-color:#ddd;

    color:#000;
}


/* =========================================================
   Alert
   ========================================================= */

.login-bg-wrapper .alert{
    width:100%;

    margin:
        0
        0
        20px;

    padding:
        12px
        15px;

    border-radius:0;

    font-size:14px;

    line-height:1.5;
}


/* =========================================================
   登录 tabs
   ========================================================= */

.login-tabs{
    display:flex;

    width:100%;

    margin:
        0
        0
        25px;

    padding:0;

    border-bottom:1px solid #333;
}


.login-tabs > li{
    float:none;

    margin:0;
}


.login-tabs > li > a{
    margin:0;

    padding:
        10px
        18px;

    border:0 !important;

    border-radius:0;

    background:transparent !important;

    color:#888;
}


.login-tabs > li.active > a,
.login-tabs > li > a:hover{
    background:transparent !important;

    color:#fff !important;

    border-bottom:1px solid #fff !important;
}


/* =========================================================
   防止旧 Bootstrap float 干扰
   ========================================================= */

.login-bg-wrapper .pull-left,
.login-bg-wrapper .pull-right{
    float:none !important;
}


/* =========================================================
   1200 以下
   ========================================================= */

@media(max-width:1200px){

    .login-container{
        width:calc(100% - 50px);
    }


    .login-layout{
        gap:
            clamp(
                30px,
                5vw,
                60px
            );
    }

}


/* =========================================================
   Tablet
   768px - 991px

   仍然左右布局
   ========================================================= */

@media(max-width:991px) and (min-width:768px){

    .login-container{
        width:calc(100% - 36px);
    }


    .login-content{
        padding:
            clamp(
                40px,
                6vw,
                65px
            )
            0;
    }


    .login-layout{
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:
            clamp(
                20px,
                3vw,
                35px
            );
    }


    .login-card-inner{
        padding:
            clamp(
                20px,
                2.5vw,
                28px
            );
    }


    .login-title{
        font-size:
            clamp(
                21px,
                2.8vw,
                26px
            );
    }

}


/* =========================================================
   Mobile
   <=767px

   左右变上下
   ========================================================= */

@media(max-width:767px){

    .login-container{
        width:100%;

        padding:
            0
            15px;
    }


    .login-content{
        width:100% !important;

        padding:
            30px
            0
            45px;
    }


    .login-layout{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        gap:20px;

        width:100%;
    }


    .login-card{
        width:100%;
    }


    .login-card-inner{
        width:100%;

        padding:
            24px
            20px;
    }


    .login-title{
        margin-bottom:18px;

        font-size:
            clamp(
                21px,
                5.5vw,
                26px
            );
    }


    .login-desc{
        margin-bottom:25px;

        font-size:14px;
    }


    .login-form .form-group{
        margin-bottom:18px;
    }


    .login-form .form-control{
        width:100% !important;

        height:44px;
    }


    /* 手机按钮占满 */
    .login-bg-wrapper .login-btn{
        width:100%;

        min-width:0;

        height:44px;
    }


    .register-card .login-btn{
        width:100%;

        align-self:stretch;
    }


    .forgotten-wrapper{
        margin-bottom:20px;
    }

}


/* =========================================================
   手机 <=508px
   ========================================================= */

@media(max-width:508px){

    .login-container{
        padding:
            0
            12px;
    }


    .login-content{
        padding:
            25px
            0
            35px;
    }


    .login-layout{
        gap:16px;
    }


    .login-card-inner{
        padding:
            21px
            16px;
    }


    .login-title{
        font-size:
            clamp(
                20px,
                5.8vw,
                24px
            );
    }

}