body {
    color: #999;
    background-color: #ECEFF5;
    background-size: cover;
    background-repeat: no-repeat;
}

.login-wrapper {
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.login-wrapper>* {
    display: inline-block;
    vertical-align: middle;
}

/* 过滤部分浏览器的明文密码显示 */
input[type="password"]::-ms-reveal {
    display: none;
}

/* --- 海报 --- */
.bg-box {
    width: 750px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    z-index: 1;
    transform: translateX(40px);
    font-size: 0;
    line-height: 1;
}

.bg-box>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 海报 end --- */
/* --- 登录框 --- */
.card-box {
    position: relative;
    z-index: 2;
    width: 350px;
}

@media (min-width: 768px) and (max-width: 992px) {
    .card-box {
        width: 320px;
    }

    .bg-box {
        width: 500px;
    }
}

.card {
    white-space: normal;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    min-height: 400px;
    border-radius: 8px;
    margin-bottom: 0;
}

.card-body {
    padding: 40px;
}



/* --- 登录框 end --- */
/* --- 表单 --- */
.login-title {
    font-size: 17px;
    color: #4A7EFC;
    font-weight: 700;
    letter-spacing: 4px;
}

.login-des {
    font-size: 15px;
    letter-spacing: 2px;
}

.login-des>span {
    position: relative;
    padding-bottom: 15px;
}

.login-des>span::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 2px;
    background-image: linear-gradient(45deg, #7F7EFD 0%, #53a5fd 51%, #6990FD 100%);
    border-radius: 2px;
}

/* --- 表单 end --- */
/* --- 输入框 --- */
.icon-input-group {
    position: relative;
}

.icon-input-group>.form-control {
    padding-left: 40px;
    border-radius: 6px;
}

.icon-input-group>.input-prefix {
    width: 40px;
    height: 100%;
    text-align: center;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
    z-index: 1;
    font-size: 0;
}

.icon-input-group>.input-prefix::before {
    height: 100%;
    content: '';
    display: inline-block;
    vertical-align: middle;
}

.icon-input-group>.input-prefix>i {
    color: #808695;
    font-size: 16px;
    vertical-align: middle;
}

.has-error .icon-input-group>.input-prefix>i {
    color: #e74c3c;
}

/* 输入框的右侧图标 */
.input-valid-icon {
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
}

.input-valid-icon a {
    color: inherit;
}

input:valid~.input-valid-icon {
    opacity: 0.8;
    visibility: visible;
}

input:valid~.input-valid-icon:hover {
    opacity: 1;
}

/* --- 输入框 end --- */
/* -- 验证错误 -- */

.help-block .n-bottom {
    vertical-align: text-top;
}

.help-block .n-bottom .msg-wrap {
    position: relative;
    margin-top: 0;
}

.has-primary .help-block,
.has-primary .control-label,
.has-primary .radio,
.has-primary .checkbox,
.has-primary .radio-inline,
.has-primary .checkbox-inline,
.has-primary.radio label,
.has-primary.checkbox label,
.has-primary.radio-inline label,
.has-primary.checkbox-inline label {
    color: #4A7EFC;
}

.has-primary .form-control {
    border-color: #4A7EFC;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-primary .form-control:focus {
    border-color: #4A7EFC;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 175, 233, .6);
}

.has-primary .input-prefix>i {
    color: #4A7EFC;
}

/* --- 验证错误 end --- */
/* --- 按钮 --- */
.btn-submit,
.btn-submit:hover,
.btn-submit:focus,
.btn-submit.active {
    outline: unset !important;
    outline-offset: unset !important;
    color: #fff;
    background-image: linear-gradient(45deg, #7F7EFD 0%, #53a5fd 51%, #6990FD 100%) !important;
}

.btn-submit {
    background-size: 200% auto;
    transition: 0.5s;
    border: 0px;
    font-weight: 700;
}

.btn-submit:hover {
    background-position: right center;
}

.btn-submit:active {
    transform: scale(0.95);
}

/* --- 按钮 end --- */
/*  -- 验证码 --- */
.captcha-img-box {
    position: relative;
    padding-right: 40px;
}

.captcha-img-box>.captcha-img-icon {
    width: 40px;
    height: 100%;
    text-align: center;
    position: absolute;
    white-space: nowrap;
    right: 0;
    top: 0;
    z-index: 1;
    font-size: 0;
    line-height: 1;
}

.captcha-img-box>.captcha-img-icon a {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
}

.captcha-img-box>.captcha-img-icon::before {
    height: 100%;
    content: '';
    display: inline-block;
    vertical-align: middle;
}

.captcha-img {
    width: 100%;
    display: block;
    height: 46px;
    border-radius: 4px;
    overflow: hidden;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #d6d6e7;
}

#captcha-modal-bg {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*  -- 验证码 end --- */
/* -- 上下波拉背景 -- */
.svgwave {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: -1;
}

#gradient stop {
    stop-color: #dce0f4;
}

.svgwave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.path-0 {
    animation: pathAnim-0 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes pathAnim-0 {
    0% {
        d: path("M 0,400 L 0,150 C 143.85714285714286,116.53571428571428 287.7142857142857,83.07142857142857 392,87 C 496.2857142857143,90.92857142857143 560.9999999999999,132.25 659,148 C 757.0000000000001,163.75 888.2857142857144,153.92857142857144 1024,150 C 1159.7142857142856,146.07142857142856 1299.8571428571427,148.03571428571428 1440,150 L 1440,400 L 0,400 Z");
    }

    25% {
        d: path("M 0,400 L 0,150 C 99.85714285714286,168.64285714285714 199.71428571428572,187.28571428571428 317,180 C 434.2857142857143,172.71428571428572 569.0000000000001,139.5 709,125 C 848.9999999999999,110.50000000000001 994.2857142857142,114.71428571428572 1117,122 C 1239.7142857142858,129.28571428571428 1339.857142857143,139.64285714285714 1440,150 L 1440,400 L 0,400 Z");
    }

    50% {
        d: path("M 0,400 L 0,150 C 127.5,174.39285714285714 255,198.78571428571428 384,204 C 513,209.21428571428572 643.5,195.25 755,165 C 866.5,134.75 959,88.21428571428572 1070,83 C 1181,77.78571428571428 1310.5,113.89285714285714 1440,150 L 1440,400 L 0,400 Z");
    }

    75% {
        d: path("M 0,400 L 0,150 C 89.14285714285714,112.46428571428572 178.28571428571428,74.92857142857143 298,85 C 417.7142857142857,95.07142857142857 567.9999999999999,152.75 690,184 C 812.0000000000001,215.25 905.7142857142858,220.07142857142858 1026,210 C 1146.2857142857142,199.92857142857142 1293.142857142857,174.96428571428572 1440,150 L 1440,400 L 0,400 Z");
    }

    100% {
        d: path("M 0,400 L 0,150 C 143.85714285714286,116.53571428571428 287.7142857142857,83.07142857142857 392,87 C 496.2857142857143,90.92857142857143 560.9999999999999,132.25 659,148 C 757.0000000000001,163.75 888.2857142857144,153.92857142857144 1024,150 C 1159.7142857142856,146.07142857142856 1299.8571428571427,148.03571428571428 1440,150 L 1440,400 L 0,400 Z");
    }
}
/* -- 上下波拉背景 end -- */