body {
    background: #F4F5F5;
}

.page-create-post {
    max-width: 1200px;
    min-height: calc(100vh - 60px - 51px);
    margin: 0 auto;
    padding: 40px 0 80px;
    position: relative;
}

/* 头部 */
.create-title-container {
    display: flex;
    align-items: center;
}

.create-icon {
    width: 44px;
    height: 44px;
    background: #30BF64;
    border-radius: 100px;
    text-align: center;
    line-height: 44px;
    margin-right: 24px;
}

.create-icon .anticon-taolun {
    color: #FFFFFF;
    font-size: 24px;
}

.create-title .create-type {
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    color: rgba(0, 0, 0, 0.85);
    }

.create-title .create-desc {
    font-size: 14px;
    line-height: 19px;
    color: rgba(0, 0, 0, 0.65);
}

/* title */

.form-item {
    display: flex;
    background: #FFFFFF;
    align-items: center;
}

.form-item-name {
    padding: 20px 24px;
    font-weight: 600;
    font-size: 16px;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.85);
}

.form-item-value {
    flex: 1;
    background: #FFFFFF;
    display: flex;
    align-items: center;
}


.post-title-container {
    font-size: 0;
    margin-top: 32px;
    padding-right: 16px;
}

.post-title-input {
    border: none;
    padding: 20px 16px;
    font-size: 16px;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.85);
    /* width: calc(100% - 80px); */
    /* display: inline-block; */
}


.post-title-input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.45);
}

.post-title-input.error::-webkit-input-placeholder {
    color: #E64340;
}


/* quill 编辑器 */
._quill_wrapper {
    background: #FFFFFF;
    border-radius: 2px;
    margin: 20px 0;
}

#toolbar-container {
    background: #FFFFFF;
    border-radius: 2px;
    border: none;
}

#editor-container::before {
    content: '';
    display: block;
    height: 1px;
    background-color:  rgba(120, 130, 140, 0.13);
    margin: 0 14px;
}

#editor-container {
    height: 400px;
    background: #FFFFFF;
    border-radius: 2px;
    border: none;
    font-size: 16px;
    padding: 0 10px;
}

#create-post-quill .ql-toolbar.ql-snow{
    padding: 20px 16px ;
}

#create-post-quill .ql-snow .ql-editor img {
    max-height: 360px;
}

#page-create-post .ql-max-count{
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

#page-create-post .ql-max-count.ql-max-count-show {
    right: 24px;
}

.ql-editor.ql-blank::before{
    left: 25px;
    right: 25px;
}

/* 表单按钮 */

.form-action {
    margin-top: 32px;
}

.form-action .form-action-btn {
    padding: 8px 16px;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.043);
    border-radius: 2px;
    width: 120px;
    height: 40px;
}

.form-action .form-action-btn.submit{
    background: #00A13B;
    border: 1px solid #00A13B;
    font-size: 16px;
    color: #FFFFFF;
    position: absolute;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.form-action .form-action-btn.submit:hover{
    background: #008C33;
}

/* 发布成功弹窗 */
#wechat-follow-modal.modal,
#feedback-modal-tips.modal {
    text-align: center;
    padding: 0 !important;
}

#wechat-follow-modal.modal:before,
#feedback-modal-tips.modal:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog.wechat-follow-modal {
    width: 600px;
    height: 422px;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    margin: 0;
}

.modal-dialog.wechat-follow-modal .feedback-modal-close {
    position: absolute;
    right: 24px;
    top: 24px;
}

.modal-dialog.wechat-follow-modal .modal-content {
    padding: 48px;
}

.wechat-follow-content {
    text-align: center;
}

.wechat-follow-content h4 {
    font-size: 18px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 8px;
    font-weight: normal;
}

.wechat-follow-content .fa,
.wechat-follow-content .clifont.anticon-done {
    font-weight: normal;
    color: #00A13B;
    font-size: 24px;
    margin-right: 12px;
}

.wechat-follow-content .clifont.anticon-cli-warm-fill {
    color: #FF7D00;
    font-weight: normal;
    font-size: 24px;
    margin-right: 12px;
}

.modal-dialog.wechat-follow-modal p {
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
}

.modal-dialog.wechat-follow-modal .title {
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog.wechat-follow-modal p.sub-title.first {
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
}

.modal-dialog.wechat-follow-modal .sub-title + .sub-title {
    margin-top: 8px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 18px;
}

.modal-dialog.wechat-follow-modal .sub-title .bold {
    font-weight: bold;
}

#wechat-follow-modal img {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    display: block;
    margin-top: 32px;
}

.modal-dialog.wechat-follow-modal p.wechat-tip {
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.45);
}

#feedback-modal-tips .btn {
    margin-top: 32px;
}

#post-fail-modal .modal-dialog{
    height: fit-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 手机端 */
@media screen and (max-device-width: 450px) {
    .page-create-post {
        padding: 8px 0 140px ;
    }
    .mobile-title {
        font-weight: 700;
        font-size: 22px;
        line-height: 26px;
        color: rgba(0, 0, 0, 0.85);
        text-align: center;
    }

    .form-item-name {
        padding: 16px;
        font-weight: 500;
        font-size: 17px;
        white-space: nowrap;
    }

    .post-title-container {
        margin-top: 0;
    }

    .form-item {
        margin-right: 16px;
        margin-left: 16px;
        border-radius: 8px;
        overflow: hidden;
    }


    #toolbar-container {
        overflow-x: scroll;
        white-space: nowrap;
    }

    ._quill_wrapper {
        margin: 12px 16px;
        border-radius: 8px;
    }

    .post-title-input {
        padding: 16px 16px 16px 0;
    }

    #create-post-quill .ql-toolbar.ql-snow {
        padding: 16px;
        border-radius: 8px;
        padding-bottom: 300px;
        margin-bottom: -284px;
        /* overflow: visible; */
    }

    ::-webkit-scrollbar {
        display: none;
    }

    #editor-container{
        padding: 0;
        height: 424px;
        border-radius: 8px;
        padding-bottom: 36px;
    }

    .mobile-form-action {
        padding: 16px 22px 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFFFFF;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        border-top: 0.5px solid rgba(0, 0, 0, 0.1);
    }
    
    #editor-container::before{
        margin: 0 0 0 16px;
    }

    .form-action-btn.submit {
        width: 100%;
        height: 48px;
        background: #07C160;
        border-radius: 8px;
        font-weight: 500;
        font-size: 17px;
        line-height: 29px;
        text-align: center;
        color: #FFFFFF;
        border: none;
        position: relative;
    }

    .select-industry-tag {
        display: flex;
        align-items: center;
    }

    .weui-picker__bd {
        /* height: 168px; */
    }

    #showCategoryPicker.weui-cell:before {
        border: none;
    }
    #showCategoryPicker {
        background: #FFFFFF;
        border-radius: 8px;
        margin: 0 16px;
        line-height: 32px;
        padding: 0 16px 0 0;
    }

    .post_success,
    .post_fail {
        position: absolute;
        top: 0;
        height: 100%;
    }

    .post_success img {
        width: 128px;
        height: 128px;
        margin: 0 12px 12px;
    }

    .weui-msg__desc-primary {
        font-size: 15px;
        line-height: 150%;
        color: rgba(0, 0, 0, 0.65);
    }

    .ql-editor {
        font-size: 17px;
        padding-bottom: ;
    }
    
    .ql-editor.ql-blank::before{
        left: 15px;
        right: 15px;
        font-size: 17px;
        line-height: 24px;
        font-style: normal;
        color: rgba(0, 0, 0, 0.3);
    }

    .post-title-input::-webkit-input-placeholder {
        color: rgba(0, 0, 0, 0.3);
        font-size: 17px;
    }

    .ql-size.ql-picker {
        margin-left: -8px;
    }

    .ql-snow .ql-color-picker:not(:last-child),
    .ql-snow.ql-toolbar .ql-formats button:not(:last-child) {
        margin-right: 2px;
    }


    .weui-picker__group {
        font-size: 17px;
    }

    .weui-msg__opr-area:last-child {
        margin-bottom: 130px;
    }

    .standalone-container .ql-max-count {
        bottom: 12px;
        right: 16px;
    }

    #iKnow:hover,
    #iKnow:focus,
    #weui-picker-confirm:hover,
    #weui-picker-confirm:focus {
        color: white;
    }

    #weui-picker-confirm:hover,
    .form-action-btn.submit:hover {
        background: #06AE56;
    }

    #mobile-create-type-mask {
        z-index: 1200;
    }

    #create-post-quill .ql-snow .ql-editor img {
        max-height: 180px;
    }
}

/* 公用工具类 */
.initial-hidden,
.none {
    display: none;
}