* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

li,
ul,
ol {
    list-style: none;
}

.clear {
    clear: both;
}

button {
    outline: none;
}

header.head-box {
    width: 100vw;
    min-width: 340px;
    height: 65px;
    line-height: 65px;
    background-image: linear-gradient(to right, #0085be, #1e42b6);
    /* padding: 0 20px;
    box-sizing: border-box; */
}

:root header.head-box {
    background: #0e65ba;
}

/*ie9 hack*/

header.head-box .logo-img {
    float: left;
    width: 93px;
    height: 22px;
    margin-top: 22px;
    margin-left: 10px;
    /* box-sizing: border-box; */
}

header.head-box .right-box {
    float: right;
    /* min-width: 80px; */
    height: 65px;
    margin-right: 15px;
}

header.head-box .right-box li {
    height: 65px;
    float: left;
}

header.head-box .right-box .avater-img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

header.head-box .right-box .text {
    color: #fff;
}

header.head-box .right-box .logo-img {
    margin-right: 10px;
}

.wrap {
    width: 100%;
    height: auto;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -163px;
}

.wrap .jm-img {
    /**width: 330px;*/
    height: 193px;
}

.wrap .title {
    margin: 26px auto;
    font-weight: bold;
}

.wrap .jm-times {
    padding-bottom: 26px;
}

.btnBox .btn-item {
    padding: 8px 15px;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    background-color: #1385ee;
    color: #fff;
    text-align: center;
    margin-right: 10px;
}

/* 邮件模版部分 */

.jm-mail {
    width: 750px;
    height: auto;
    margin: 0 auto;
    background-color: #fff;
}

.jm-mail .mail-bg {
    width: 100%;
}

.tableBox {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.tableBox .title {
    margin: 34px auto;
    text-align: center;
    width: 100%;
    font-size: 26px;
    color: #333;
}

.tableBox .jm-table {
    width: 100%;
}

.tableBox .jm-table th,
.tableBox .jm-table td {
    height: 48px;
    text-align: center;
}

.tableBox .jm-table td .blueColor {
    color: #1baaec;
    text-decoration: none;
}

.tableBox .jm-table tr:nth-child(2n-1) {
    background-color: #f0f5f8;
}

.floatLoadDiv {
    position: relative;
    margin-top: -33px;
    left: 863px;
    width: 85px;
    height: 35px;
    overflow: hidden;
    z-index: 1;
    padding: 0px;
    opacity: 0;
}

.toast_ok,
.toast_error {
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    line-height: 24px;
    padding: 5px;
    box-sizing: border-box;
}

.toast_text {
    display: inline-block;
}

.toast_error_em,
.toast_ok_em {
    display: none;
}

#successTip .detail {
    padding-bottom: 26px;
    width: 250px;
    margin: 0 auto;
    font-weight: bold;
}

input::placeholder {
    color: #ddd;
}

.bodyBox {
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
    /* width: 100vw; */
    max-width: 700px;
    min-height: 500px;
    margin: 22px auto;
    border-radius: 4px;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

#defaultView {
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
}

.bodyBox .topImg {
    width: 100%;
    max-width: 700px;
}

.contentBox {
    /* max-width: 400px; */
    box-sizing: border-box;
    margin: 10px auto;
}

.mw400 {
    max-width: 400px;
}

.contentBox p {
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    text-align: left;
}

.bodyUl {
    margin: 0 auto;
    font-size: 14px;
    box-sizing: border-box;
}

.bodyUl li {
    margin: 15px 0;
    box-sizing: border-box;
    line-height: 24px;
    text-align: left;
}

.bodyUl li span {
    display: inline-block;
    word-break: break-all;
}

.btnBox {
    width: 100%;
    padding: 10px 0 70px;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
}

.btnItem {
    width: 122px;
    height: 36px;
    line-height: 36px;
    background-color: #1385ee;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    border: none;
    margin-right: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.save_draft, .confirm_btn {
    background-color: #e5f1ff;
    color: #0076FF;
}
.save_draft, .direct_submit, .edit_again, .confirm_btn {
    border-radius: 36px;
}  

.btnItem.goFileListBtn{
    border: 1px solid #1385ee;
    background: none;
    color: #1385ee;
}
/* .btnItem2 {
    padding: 0 32px;
} */

/* .btnItem3 {
    padding: 0 44px;
} */

/* .btnItem:hover {
    background-color: #0078e6;
} */
.btnItem.goFileListBtn:hover{
    border: 1px solid #0078e6;
    color: #0078e6;
}
.btnItem.btnItem3{
    background-color: #0078e6;
}
.footBox {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    /* position: fixed;
left: 0; */
    bottom: 0;
}

.footBox .imgCloud {
    vertical-align: middle;
}

.footBox .text {
    color: #999;
    padding-left: 5px;
}

.contentBox .title {
    font-size: 16px;
    color: #333;
    padding: 20px 0;
    font-weight: bold;
    text-align: left;
}

.bodyBoxUlts {
    margin: 15px auto 15px;
    text-align: left;
}

.bodyBoxUlts .names {
    display: inline-block;
    min-width: 80px;
    float: left;
}

.bodyBoxUlts .upType {
    color: #999;
    /* float: right; */
    font-size: 12px;
    display: inline-block;
    position: relative;
    display: inline-block;
    float: left;
    line-height: 21px;
    height: 21px;
}

.bodyBoxUlts .inputBox {
    padding: 5px 0px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.bodyBoxUlts .docMentent {
    width: 100%;
    text-align: left;
    position: relative;
}

.bodyBoxUlts .docMentent .i-help {
    position: absolute;
    top: 5px;
    right: -20px;
    color: #999;
}

.bodyBoxUlts::after {
    content: "";
    display: block;
    clear: both;
}

.J-dropdown {
    border: 1px solid #ddd;
}

.tipsBox {
    display: none;
    position: absolute;
    top: 15px;
    right: 18px;
    line-height: 22px;
}

.fileTypeTip:hover+.tipsBox {
    display: block;
}

.upType .tipsBox p {
    /* content: attr(data-target); */
    position: absolute;
    border-radius: 4px;
    bottom: 30px;
    min-width: 220px;
    overflow: hidden;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    z-index: 9003;
    text-align: left;
    left: -100px;
}

.trangle {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    position: absolute;
    left: 7px;
    border: 1px solid rgba(0, 0, 0, .05);
    bottom: 23px;
    border-left: none;
    border-top: none;
    background-color: #fff;
    z-index: 9005;
}

#uploadedPage {
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
}

.detailLi {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.imgLogo {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.imgIcon {
    width: 14px;
    height: 14px;
}

.docMententItem {
    margin-left: 112px;
}

.contentUl {
    width: 528px;
    overflow: auto;
}

.contentUl li {
    float: left;
    color: #999;
    font-size: 12px;
    width: 230px;
}

.contentUl li .names {
    width: 65px;
    text-align: right;
    display: inline-block;
}

.bodyBoxUlts .names .dot {
    color: #db4d4d;
}

.contentUl li .contex {
    box-sizing: border-box;
    min-width: 187px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    display: inline-block;
    vertical-align: bottom;
}

.codeBox {
    height: auto;
    margin: 0 auto;
}

.codeBox .codeUl {
    width: auto;
    min-height: 100px;
    margin-left: 85px;
    margin-bottom: 20px;
    position: relative;
}

.codeBox .codeUl li {
    width: 70px;
    height: 70px;
    border-radius: 4px;
    border: 1px solid #ddd;
    text-align: center;
    padding: 0;
    margin-right: 12px;
    float: left;
    line-height: 68px;
    position: relative;
}

.codeBox .codeUl li .i-reduce {
    position: absolute;
    right: -7px;
    top: -8px;
    line-height: 14px;
}

.codeBox .codeUl li .i-new {
    font-size: 25px;
}

.codeBox .codeUl li .codeImg {
    width: 44px;
    height: 68px;
}

.acidUlWrap .codeBox .codeUl li .codeImg {
    width: 40px;
    height: 40px;
    margin: 5px auto;
    display: inherit;
}

.acidUlWrap .codeBox .codeUl li p {
    height: 20px;
    line-height: 17px;
    color: #333;
    overflow: hidden;
    font-size: 12px;
    padding-top: 6px;
}

.voidNameTips {
    color: #db4d4d;
    padding-left: 10px;
    display: none;
    text-align: left;
    box-sizing: border-box;
}

@media screen and (max-width:520px) {

    .contentUl,
    .contentUl li,
    .bodyBoxUlts {
        width: auto;
    }

    .contentUl li {
        text-align: left;
        float: inherit;
    }

    .bodyBoxUlts .names {
        /* float: left; */
        display: block;
        float: initial;
    }

    /* #userNameBox {
        margin-bottom: 10px;
    } */
    /* .bodyBoxUlts .nameInputBox{
        display: inline-block;
        width: 100%;
        margin: 5px 0;

    } */
    .bodyBoxUlts .inputBox {
        display: inline-block;
        width: 100% !important;
        margin: 5px 0;
        padding: 8px !important;
        box-sizing: border-box;
    }

    #taskTitle {
        padding-bottom: 10px !important;
    }

    #userNameBox {
        display: inline-block;
        margin-top: 5px;
        margin-bottom: 10px;
        width: 100%;
    }

    .bodyUl li {
        line-height: 20px;
        max-width: 353px;
    }



    /* .codeBox .codeUl li:nth-child(5) {
        margin-right: 20px;
    } */
    .codeWraps {
        height: auto;
        display: block !important;
    }

    .bodyBoxUlt::after {
        content: "";
        clear: both;
        display: inline-block;
    }

    .codeBox {
        max-width: 353px;
    }

    .codeBox .codeUl {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        /* grid-template-columns: 68px 68px 68px; */
        /* column-gap:10px; */
        margin-left: 0;
        width: 100%;
    }

    .codeBox .codeUl li {
        margin-right: 18px;
        float: inherit;
    }

    .bodyBoxUlts {
        padding: 0;
        max-width: 353px;
    }

    /* .bodyBoxUlts .upType {
        margin-left: 83px;
        margin-top: 5px;
    } */

    .contentUl li {
        width: 100%;
        text-align: left;
        height: 25px;
    }

    .imgPreview {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        vertical-align: middle;
    }

    .voidNameTips {
        display: none;
        color: #db4d4d;
        padding-left: 0;
        text-align: left;
        box-sizing: border-box;
    }
}

/* @media screen and (max-width:390px){
    .codeBox .codeUl li{
        margin-right: 5px;
    }
} */

#slideWrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9998;
}

#hsReportUl li img {
    vertical-align: middle;
}

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

.emptyTip {
    color: #db4d4d;
    text-align: left;
    box-sizing: border-box;
    position: absolute;
    bottom: -10px;
    left: 0;
    display: none;
}

.i-plus {
    padding: 0 27px;
}

.upBox {
    width: 80px;
    padding: 4px;
    border-radius: 4px;
    /* box-shadow: 0 0 10px rgb(0 0 0 / 20%); */
    background: #fff;
}

.upBox p {
    color: #1385ee;
    line-height: 30px;
    box-sizing: border-box;
}

.upBox p span {
    cursor: pointer;
}

.upBox label {
    color: #1385ee;
    cursor: pointer;
}

.menuPops {
    position: absolute;
    z-index: 10;
    width: 82px;
    color: #666;
    font-size: 14px;
    background-color: #fff;
    animation: menus .2s ease-out;
    border-radius: 4px;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    top: -82px;
    left: 0x;
}

.tipsTop {
    position: absolute;
    top: -6px;
    width: 0;
    height: 0;
    border: 1px solid transparent;
    content: '';
    border-width: 6px;
    border-style: solid;
    border-color: #fff #fff transparent transparent;
    transform: rotate(135deg);
    box-shadow: -9px 5px 22px 4px rgb(0 0 0 / 5%);
}

.menuPops {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.codeWraps {
    max-height: 370px !important
}

.bodyBoxUlts .inputBox {
    line-height: 0;
    height: 28px;
}

.specialColumn .typeStyle {
    line-height: 0;
    height: 28px;
}

.codeBox .codeUl .plus .menuPops {
    width: 88px;
}

.inputBox::-webkit-input-placeholder {
    padding-top: 10px;
}

.i-selectall:before {
    color: #60c26b;
}

#detailFail {
    min-height: 200px;
}

#attachTemplateBox {
    font-size: 12px;
    overflow: hidden;
}

.attachTitle {
    float: left;
    color: #999;
    height: 24px;
    line-height: 24px;
}

#attachTemplate {
    float: left;
}

#attachTemplate li {
    margin: 0;
}

/* 打印店需求新增样式 */
.trafficBox{
    display: none;
    margin: 20px auto;
    border-radius: 30px;
    height: 33px;
    align-items: center;
    /* background-color: #fef4e8; */
    /* color: #E1963C; */
    justify-content: center;
}
.trafficBox .trafficImg{
    margin: 0 5px 1px 10px;
    width: 15px;
    height: 15px;
}
.trafficBox.trafficBox2{
    background-color: #f1f6ff;
    justify-content: center;
    color: #6B768D;
}
.trafficBox.trafficBox2 .texts{
    display: block;
    text-align: left;
}
.trafficBox.trafficBox2 a{
    color: #0076FF;
    margin-right: 10px;
    margin-left: 10px;
}

.draft_success_tip, .draft_fail_tip {
    text-align: center;
}

#upload_loading {
    width: 160px;
    height: 100px;
    border-radius: 5px;
    padding-top: 15px;
    box-sizing: border-box;
    background: #4e4e4e;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}
.upload_loading_img {
    width: 35px;
    height: 35px;
    margin-bottom: 10px;
}
#upload_loading_tip {
    color: #fff;
    font-size: 16px;
    line-height: 30px;
}