#container {
    width: 100%;
    height: 100%;
}

input::-webkit-input-placeholder {
    color: #bfbfbf;
}

input::-moz-placeholder {
    color: #bfbfbf;
}

input::-ms-input-placeholder {
    color: #bfbfbf;
}

code {
    font-family: "Microsoft YaHei", sans-serif;
}

/*生成单个网址*/
.create .long span {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.create .domain,
.create .select-date {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.create .select-date span {
    width: 60px;
}

.create .select-date select {
    width: 120px;
}

.short-res {
    display: none;
}

.short-res .short {
    background: #fcfdfe;
    border-top: 1px solid rgba(77, 82, 89, 0.07);
    border-bottom: 1px solid rgba(77, 82, 89, 0.07);
    padding: 15px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.short-res #short-url {
    font-size: 16px;
    margin-right: 15px;
}

.short-res #short-qrcode {
    text-align: center
}

.short-res #short-qrcode img {
    width: 120px
}

/*网站还原*/
.restore-res {
    display: none;
    background: #fcfdfe;
    border-top: 1px solid rgba(77, 82, 89, 0.07);
    padding: 15px 24px;
    align-items: center;
    justify-content: center;
}

.short-res #urls {
    font-size: 16px;
    margin-right: 15px;
}

/*api接口*/
.my-api .key code {
    display: block;
}

.my-api .field,
.my-api .result {
    margin: 10px 0;
}

/*我的短链接*/
.short-qr {
    font-size: 24px;
}

.short-qrcode {
    width: 150px;
}

/*我的资料*/
.account .username,
.account .token,
.account .status,
.account .level,
.account .regtime {
    display: inline-block;
}

.account .token span {
    font-size: 14px;
}

/*登录注册*/
.signBg {
    width: 100%;
    min-height: 100vh;
    background-color: #f8f8fa;
    position: relative;
    padding-bottom: 80px;
}

.signupContainer {
    top: calc(50% - 280px);
    width: 1000px;
    margin: auto;
    padding: 0 10px;
}

.login-logo {
    margin: 40px 0;
    width: 251px;
    height: 60px;
    background-image: url('../img/icon/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.login .flex-box {
    width: 1000px;
    height: 550px;
    margin: 0 auto;
}

.login-left {
    width: 480px;
    height: 100%;
}

.login-right {
    background: #fff;
    box-shadow: 4px 0 12px 0 hsla(0, 0%, 89.4%, .5);
    width: 520px;
    height: 100%;
    padding: 60px 80px 60px 100px;
}

.login-right input {
    flex: 1;
    padding: 0 10px;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    outline: none !important;
    resize: none;
    height: 44px;
    line-height: 48px;
    width: 100%;
    border-radius: 0 !important;
}

.login-right .signTitle {
    font-size: 20px;
    font-weight: 500;
    color: #232735;
    line-height: 26px;
    margin-bottom: 15px;
    text-align: center;
}

.login-right .newPassword {
    text-align: right;
    height: 17px;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    cursor: pointer;
    margin-bottom: 100px;
}

.login-right .newPassword a {
    color: #969696;
}

.login-right .signSwitch {
    font-size: 12px;
    text-align: center;
}

.signBg .footer {
    text-align: center;
    color: rgb(144, 146, 152);
    font-size: 10px;
    width: 400px;
    position: absolute;
    bottom: 0px;
    left: calc(50% - 200px);
}

.login-right .inputCaptcha {
    position: relative;
}

.login-right .inputCaptcha .captchaBtn {
    position: absolute;
    top: 0;
    right: 0;
    letter-spacing: 0;
    line-height: 32px;
    height: 32px;
    font-size: 14px;
    padding: 0 15px;
}

.login-right .inputCaptcha .disabled  {
    cursor:  not-allowed;
}

#resetpwd {
    margin-top: 100px;
}

/*消息框*/
.my_alert-wrapper {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000001;
}

.my_alert-wrapper .my_alertBox {
    min-width: 380px;
    padding: 15px 15px 15px 20px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #edf2fc;
    overflow: hidden;
    opacity: 1;
    display: flex;
    margin: 0 auto 15px;
    -webkit-animation-name: slideDownUp;
    -webkit-animation-duration: .3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

.my_alert-wrapper .slideDownOut {
    -webkit-animation-name: slideDownOut;
    -webkit-animation-duration: .3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
}

@media only screen and (max-width: 800px) {
    .my_alertBox {
        width: 300px;
        left: calc(50% - 150px);
    }
}

.my_alertBox--error {
    background-color: #fef0f0 !important;
    color: #f56c6c;
    border: 1px solid #fde2e2;
}

.my_alertBox--error .icon-alert-error:before {
    content: "\F159";
}

.my_alertBox--info {
    background-color: #edf2fc;
    color: #909399;
    border: 1px solid #EBEEF5;
}

.my_alertBox--success {
    background-color: #f0f9eb !important;
    color: #67c23a;
    border: 1px solid #e1f3d8;
}
.my_alertBox--success .icon-alert-success:before {
    content: "\F5E0";
}


.my_alertBox--warning {
    background-color: #fdf6ec !important;
    color: #e6a23c;
    border: 1px solid #faecd8;
}

.my_alert-icon {
    font-size: 16px;
    display: flex;
    line-height: 1;
    margin-right: 10px;
    font: normal normal normal 16px/1 "Material Design Icons";
}

.my_alert-content {
    flex: 1;
    padding: 0 16px 0 0;
    font-size: 14px;
    line-height: 1;
    word-break: break-all;
}

.my_alert-closebtn {
    font-size: 16px;
    color: #c0c4cc;
    opacity: 1;
    width: 20px;
    cursor: pointer;
    font: normal normal normal 16px/1 "Material Design Icons";
}
.my_alert-closebtn:before {
    content: "\F156";
}

@-webkit-keyframes slideDownUp {
    0% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes slideDownOut {
    0% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }
}