/*info*/
label {
    margin-bottom: unset;
}

pre {
    background-color: #f6f8fa;
    font-size: 14px;
    line-height: 18px;
    padding: 10px;
}

.main-info {
    display: flex;
    flex-direction: column;
}
.main-info .mi-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
}

.upload-attach-list .file-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.upload-attach-list .file-container .opr-del-btn {
    margin-right: 10px;
    display: flex;
    align-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}

.upload-attach-list .file-container .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-doc {
    background: #efefef no-repeat center url('/static/ticket/image/file_doc_47x47.png');
}

.attachment-docx {
    background: #efefef no-repeat center url('/static/ticket/image/file_doc_47x47.png');
}

.attachment-xls {
    background: #efefef no-repeat center url('/static/ticket/image/file_xls_47x47.png');
}

.attachment-xlsx {
    background: #efefef no-repeat center url('/static/ticket/image/file_xls_47x47.png');
}

.attachment-pdf {
    background: #efefef no-repeat center url('/static/ticket/image/file_pdf_47x47.png');
}

.attachment-txt {
    background: #efefef no-repeat center url('/static/ticket/image/file_txt_47x47.png');
}

.attachment-html {
    background: #efefef no-repeat center url('/static/ticket/image/file_html_47x47.png');
}

.attachment-zip {
    background: #efefef no-repeat center url('/static/ticket/image/file_zip_47x47.png');
}

.attachment-json {
    background: #efefef no-repeat center url('/static/ticket/image/file_json_47x47.png');
}

.attachment-video {
    background: #efefef no-repeat center url('/static/ticket/image/file_video_47x47.png');
}


.main-dialogue .md-list .mdl-con img {
    max-width: 100%;
}

@media screen and (min-width: 768px) {
    body {
        font-size: 14px;
        color: #444;
        min-width: 320px;
        background-color: #fafafa;
        margin: 0;
    }
    .main {
        max-width: 1200px;
        margin: 150px auto 70px auto;
        padding: 64px 100px 75px 100px;
        background: #fff;
        box-shadow: 0 0 1px 1px rgba(50, 50, 50, 0.1);
        position: relative;
    }

    /* main-info */
    .main-info .mi-box > label {
        width: 200px;
        font-size: 18px;
        color: #9b9b9b;
    }
    .main-info .mi-box > p {
        flex-grow: 1;
        font-size: 18px;
        color: #444;
        word-wrap: break-word;
        word-break: break-all;
        margin-block-start: 0;
        margin-block-end: 0;
    }
    /* main-info end*/

    /* main-dialogue */
    .main-dialogue {
        margin-top: 70px;
        display: flex;
        flex-direction: column;
    }
    .main-dialogue .md-title {
        padding-bottom: 15px;
        border-bottom: 1px solid #e9e9e9;
    }
    .main-dialogue .md-title > span {
        float: left;
        height: 36px;
        line-height: 36px;
        font-size: 24px;
        color: #444;
    }
    .main-dialogue .md-title .mdt-sum {
        margin-left: 5px;
        padding: 0 14px;
        background: #e1e1e1;
        color: #1f88ec !important;
    }
    .main-dialogue .md-list {
        display: flex;
        flex-direction: column;
    }
    .main-dialogue .md-list > div {
        overflow: hidden;
        padding: 40px 0 45px 0;
        border-bottom: 1px solid #e9e9e9;
    }
    .main-dialogue .md-list .mdl-info {
        height: 48px;
        line-height: 48px;
    }
    .main-dialogue .md-list .mdl-info .customer-head {
        float: left;
        width: 48px;
        height: 48px;
        background: no-repeat center url('/static/ticket/image/track_user.png');
    }
    .main-dialogue .md-list .mdl-info .cc-head {
        float: left;
        width: 48px;
        height: 48px;
        background: no-repeat center url('/static/ticket/image/dlg_cc.png');
    }
    .main-dialogue .md-list .mdl-info .customer-name {
        float: left;
        margin-left: 20px;
        font-size: 24px;
        color: #3184e7;
    }
    .main-dialogue .md-list .mdl-info .support-head {
        float: left;
        width: 48px;
        height: 48px;
        background: no-repeat center url('/static/ticket/image/track_magewell_support.png');
    }
    .main-dialogue .md-list .mdl-info .support-name {
        float: left;
        margin-left: 20px;
        font-size: 24px;
        color: #444;
    }
    .main-dialogue .md-list .mdl-info .mdli-update {
        float: right;
        font-size: 18px;
        color: #444;
    }
    .main-dialogue .md-list .mdl-con {
        overflow: hidden;
        width: 100%;
        margin-top: 20px;
        line-height: 28px;
        font-size: 18px;
        color: #444;
        word-wrap: break-word;
        word-break: normal;
    }


    .main-dialogue .md-list .mdl-con a {
        color: #1f88ec;
    }
    .main-dialogue .md-list .mdl-con a:hover {
        text-decoration: underline;
    }
    .mdl-attachment {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 15px;
    }
    .mdl-attachment .mdl-attachment-item {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        margin-right: 10px;
    }
    .attachment-image, .attachment-doc, .attachment-video, .attachment-docx, .attachment-xls, .attachment-xlsx, .attachment-pdf, .attachment-txt, .attachment-zip, .attachment-html, .attachment-json {
        position: relative;
        width: 190px;
        height: 140px;
        cursor: pointer;
    }
    .attachment-name {
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #444;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-wrap: nowrap;
    }
    .attachment-name>span {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        max-width: 172px;
    }
    .icon-download {
        display: none;
        width: 20px;
        height: 20px;
        background: no-repeat center url('/static/ticket/image/download_12x18.png');
    }
    .download:hover .attachment-name {
        color: #1f88ec;
    }
    .download:hover .icon-download {
        display: block;
    }
    .attachment-image {
        background: #efefef;
    }
    .attachment-image .attachment-image-con {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .attachment-image .el-image {
        width: 100%;
        height: 100%;
    }
    .attachment-download-mask {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0, 0.6);
    }
    /* main-dialogue end*/

    /* main-reply */
    .main-reply {
        overflow: hidden;
        margin-top: 65px;
    }
    .main-reply > div {
        overflow: hidden;
    }
    #reply_show {
        float: left;
        height: 24px;
        padding-left: 36px;
        background: no-repeat 0 0 url('/static/ticket/image/track_reply_2.png');
        line-height: 24px;
        font-size: 18px;
        color: #1f88ec;
        cursor: pointer;
    }
    #reply_show:hover {
        background-position: 0 -24px;
        color: #0763ba;
    }
    .rb-cancel, .rb-input {
        overflow: hidden;
    }
    #reply-cancel {
        float: left;
        height: 24px;
        padding-left: 36px;
        background: no-repeat left url('/static/ticket/image/track_cancel_reply.png');
        line-height: 24px;
        font-size: 18px;
        color: #808080;
        cursor: pointer;
        opacity: 0.6;
    }
    #reply-cancel:hover {
        opacity: 1;
    }
    .rb-input {
        margin-top: 20px;
    }
    .rb-tool {
        margin-top: 5px;
        font-size: 16px;
    }
    .rb-tool .el-upload__tip {
        font-size: 14px;
    }



    .rb-submit {
        margin-top: 30px;
        font-size: 18px;
        background: no-repeat -1000px url('/static/ticket/image/submitting_20x20.png');
    }
    /* main-reply end */


    /* main-bottom */
    .main-bottom {
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 100%;
        height: 15px;
        background: #fafafa repeat-x left url('/static/ticket/image/border_bottom.png');
    }
    /* main-bottom end */
}


@media screen and (max-width: 767px) {
    .main {
        margin: 70px 10px 40px 10px;
        padding: 30px 20px 52px 20px;
        background: #fff;
        box-shadow: 0 1px 2px 1px rgba(50, 50, 50, 0.1);
        position: relative;
    }
    /* main-info */
    .main-info .mi-box > label {
        width: 120px;
        font-size: 14px;
        color: #9b9b9b;
    }
    .main-info .mi-box > p {
        flex-grow: 1;
        font-size: 14px;
        color: #444;
        word-wrap: break-word;
        word-break: break-all;
        margin-block-start: 0;
        margin-block-end: 0;
    }
    /* main-info end*/

    /* main-dialogue */
    .main-dialogue {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
    }
    .main-dialogue .md-title {
        padding-bottom: 15px;
        border-bottom: 1px solid #e9e9e9;
    }
    .main-dialogue .md-title > span {
        float: left;
        height: 19px;
        line-height: 19px;
        font-size: 15px;
        color: #444;
    }
    .main-dialogue .md-title .mdt-sum {
        margin-left: 10px;
        padding: 0 6px;
        background: #e1e1e1;
        color: #1f88ec !important;
    }
    .main-dialogue .md-list {
        display: flex;
        flex-direction: column;
    }
    .main-dialogue .md-list > div {
        overflow: hidden;
        padding: 27px 0 30px 0;
        border-bottom: 1px solid #e9e9e9;
    }
    .main-dialogue .md-list .mdl-info {
        height: 24px;
        line-height: 24px;
    }
    .main-dialogue .md-list .mdl-info .customer-head {
        float: left;
        width: 24px;
        height: 24px;
        background: no-repeat center url('/static/ticket/image/track_user.png');
        background-size: 100%;
    }
    .main-dialogue .md-list .mdl-info .cc-head {
        float: left;
        width: 24px;
        height: 24px;
        background: no-repeat center url('/static/ticket/image/dlg_cc.png');
        background-size: 100%;
    }
    .main-dialogue .md-list .mdl-info .customer-name {
        float: left;
        margin-left: 10px;
        font-size: 15px;
        color: #3184e7;
    }
    .main-dialogue .md-list .mdl-info .support-head {
        float: left;
        width: 24px;
        height: 24px;
        background: no-repeat center url('/static/ticket/image/track_magewell_support.png');
        background-size: 100%;
    }
    .main-dialogue .md-list .mdl-info .support-name {
        float: left;
        margin-left: 10px;
        font-size: 15px;
        color: #444;
    }
    .main-dialogue .md-list .mdl-info .mdli-update {
        float: right;
        line-height: 28px;
        font-size: 12px;
        color: #444;
    }
    .main-dialogue .md-list .mdl-con {
        overflow: hidden;
        width: 100%;
        margin-top: 26px;
        line-height: 22px;
        font-size: 14px;
        color: #444;
        word-wrap: break-word;
        word-break: normal;
    }
    .main-dialogue .md-list .mdl-con a {
        color: #1f88ec;
    }
    .mdl-attachment {
        display: flex;
        flex-direction: row;
        padding-top: 15px;
        flex-wrap: wrap;
    }
    .mdl-attachment .mdl-attachment-item {
        display: flex;
        flex-direction: column;
        margin-top: 5px;
        margin-right: 5px;
    }
    .attachment-image, .attachment-doc, .attachment-video, .attachment-docx, .attachment-xls, .attachment-xlsx, .attachment-pdf, .attachment-txt, .attachment-zip, .attachment-html, .attachment-json {
        position: relative;
        width: 132px;
        height: 90px;
        cursor: pointer;
    }
    .attachment-name {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        flex-wrap: nowrap;
    }
    .attachment-name>span {
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 120px;
        overflow: hidden;
    }
    .icon-download {
        display: none;
    }
    .attachment-image {
        background: #efefef;
    }
    .attachment-image .attachment-image-con {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .attachment-image .el-image {
        width: 100%;
        height: 100%;
    }
    .attachment-download-mask {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0, 0.6);
    }
    /* main-dialogue end*/

    /* main-reply */
    .main-reply {
        overflow: hidden;
        margin-top: 27px;
    }
    .main-reply > div {
        overflow: hidden;
    }
    #reply_show {
        float: left;
        height: 20px;
        padding-left: 22px;
        background: no-repeat left url('/static/ticket/image/track_reply.png');
        background-size: auto 65%;
        line-height: 20px;
        font-size: 14px;
        color: #1f88ec;
        cursor: pointer;
    }
    .rb-cancel, .rb-input {
        overflow: hidden;
    }
    #reply-cancel {
        float: left;
        height: 20px;
        padding-left: 18px;
        background: no-repeat left url('/static/ticket/image/track_cancel_reply.png');
        background-size: auto 66%;
        line-height: 20px;
        font-size: 14px;
        color: #9b9b9b;
        cursor: pointer;
    }
    .rb-input {
        margin-top: 18px;
    }
    .rb-tool {
        margin-top: 5px;
        overflow: hidden;
        font-size: 12px;
    }
    .rb-tool .el-upload__tip {
        font-size: 14px;
    }

    .rb-submit {
        margin-top: 28px;
        font-size: 14px;
        color: #fff;
        background: no-repeat -1000px url('/static/ticket/image/submitting_20x20.png');
    }
    /* main-reply end */

    /* main-bottom */
    .main-bottom {
        position: absolute;
        left: 0;
        bottom: -13px;
        width: 100%;
        height: 15px;
        background: #fafafa repeat-x center url('/static/ticket/image/border_bottom.png');
    }
    /* main-bottom end */
}