.mailBox.displaynone {
    display: none !important;
}

.mailBox {
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid #ccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background: #f5f5f5;
    overflow: hidden;
    z-index: auto;
}

.mailBox .clear {
    clear: both;
}

.mailBox .leftList {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    background: #fff;
    top: 0;
    overflow: hidden;
    border-right: 1px solid #ccc;
}

.mailBox .leftList .mailCategory {
    position: absolute;
    left: 0;
    right: 0px;
    top: 130px;
    bottom: 0;
    overflow: hidden;
    /*padding-top: 10px;*/
}

.mailBox .leftList .mailCategory .mailCategoryView {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    /*padding-right: 10px;*/
}

.mailBox .leftList .mailCategory .mailCategoryView sup {
    top: 0;
    right: 5px;
    height: 20px;
    border-radius: 10px;
    min-width: 20px;
    color: #ee6b65;
    line-height: 18px;
    text-align: center;
    padding: 0 6px;
    font-size: 12px;
    white-space: nowrap;
    transform-origin: -10% center;
    z-index: 10;
    font-weight: bold;
}

.mailBox .leftList .mailCategory .mailCategoryView sup.count {
    right: 0;
}

.mailBox .leftList .mailCategory .mailCategoryView::-webkit-scrollbar {
    width: 0;
}

.mailBox .categoryTop {
    height: 40px;
    overflow: hidden;
    line-height: 40px;
    padding-left: 30px;
    font-size: 12px;
    color: #666;
    position: relative;
    cursor: pointer;
    font-weight: bold;
}

.mailBox .categoryTop.selected {
    background: #d0e5f5;
    font-weight: bold;
}

.mailBox .categoryTop span {
    font-size: 13px;
}

.mailBox .categoryTop span.caption {
    position: absolute;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    font-size: 12px;
    width: calc(100% - 70px);
}

.mailBox .categoryTop .angle {
    width: 12px;
    height: 12px;
    font-size: 12px;
    position: absolute;
    line-height: 12px;
    left: 10px;
    color: #666;
    top: 14px;
    margin: 0;
    cursor: pointer;
    font-weight: bold;
}

.mailBox .categoryItem .angle {
    width: 12px;
    height: 12px;
    font-size: 12px;
    position: absolute;
    line-height: 12px;
    left: 10px;
    color: #666;
    top: 14px;
    margin: 0;
    cursor: pointer;
}

.mailBox .categoryTop .icon.add, .mailBox .categoryTop .icon.search, .mailBox .categoryTop .icon.chart {
    right: 5px;
    left: inherit;
    opacity: 0.6;
    font-weight: normal;
    position: absolute;
    display: inline-table;
}

.mailBox .categoryTop .icon.search.files {
    right: 38px;
}

.mailBox .categoryTop .icon.config {
    right: 22px;
    left: inherit;
    font-weight: normal;
    position: absolute;
    display: inline-table;
    background-size: 14px;
    height: 100%;
    top: 0;
}

.mailBox .categoryBox {
    /*padding-bottom: 10px;*/
    /* border-bottom: 1px solid #e5e5e5; */
}

.mailBox .categorySearch {
    width: 200px;
    padding: 0 10px 5px 10px;
    position: relative;
}

.mailBox .categorySearch .icon {
    position: absolute;
    left: 14px;
    top: 6px;
    color: #999;
}

.mailBox .categorySearch input {
    padding-left: 20px;
}

.mailBox .categoryBox.selected {
    background: #d0e5f5;
    color: #666;
}

.mailBox .mailCategoryView .divider {
    /*height: 11px;*/
    width: 100%;
    border-top: 1px solid #e5e5e5;
}

.mailBox .categoryList {
    width: 100%;
}

.mailBox .categoryList .categoryItem {
    height: 40px;
    line-height: 40px;
    width: 100%;
    padding-left: 30px;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    position: relative;
}

.mailBox .categoryList .categoryItem.selected {
    background: #d0e5f5;
    font-weight: bold;
}

.mailBox .categoryList .categoryItem .caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 50px);
    height: 100%;
    float: left;
}

.mailBox .categoryList .categoryItem:hover i.trash {
    display: inline-table;
}

.mailBox .categoryList .categoryItem:hover i.pencil {
    display: inline-table;
}

.mailBox .categoryList .categoryItem i.trash {
    float: right;
    right: 5px;
    position: relative;
    color: #999;
    display: none;
}

.mailBox .categoryList .categoryItem i.pencil {
    float: right;
    right: 7px;
    position: relative;
    padding-left: 5px;
    color: #999;
    display: none;
}

.mailBox .categoryList .categoryItem .caption span.circle {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 2px;
    margin-right: 8px;
    position: relative;
    top: 2px;
}

.mailBox .categoryList .categoryItem .count {
    padding-left: 2px;
}

.mailBox .categoryList .categoryItem .count .icon {
    color: #ee6b65;
    background: #fff;
    margin: 0;
    font-size: 18px;
}

.mailBox .categoryList .categoryItem.selected .count .icon {
    background: #d0e5f5;
}

.mailBox .leftList .dispatcher {
    height: 130px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
}

.mailBox .leftList .dispatcher .dispatcherItem {
    width: 50%;
    height: 100%;
    position: relative;
    float: left;
    cursor: pointer;
}

.mailBox .leftList .dispatcher .dispatcherItem[data-type="receipts"] .wait {
    height: 60px;
    width: 60px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    top: 10px;
    overflow: hidden;
    border-radius: 100%;
    background: #999;
    z-index: 2;
    display: none;
    text-align: center;
    line-height: 60px;
    font-size: 32px;
    font-weight: bold;
    padding: 0;
    color: #fff;
}

.mailBox .leftList .dispatcher .dispatcherItem[data-type="receipts"].disabled {
    opacity: .7;
    cursor: no-drop !important;
}

.mailBox .leftList .dispatcher .dispatcherItem[data-type="receipts"].disabled .wait {
    display: block
}

.mailBox .leftList .dispatcher .dispatcherItem[data-type="receipts"].disabled .icon {
    display: none;
}

.mailBox .leftList .dispatcher .dispatcherItem .icon {
    height: 60px;
    width: 60px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    top: 10px;
    border-radius: 100%;
    overflow: hidden;
    background: #7ec7ff;
    padding: 13px;
}

.mailBox .leftList .dispatcher .dispatcherItem .icon img {
    width: 34px;
    height: 34px;
}

.mailBox .leftList .dispatcher .dispatcherItem.mailSend .icon {
    background: #ff7e87;
}

.mailBox .leftList .dispatcher .dispatcherItem .title {
    height: 30px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    line-height: 30px;
}

.mailBox .rightList {
    position: absolute;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.mailBox .rightList .rightContent {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.mailBox .rightList .rightContent.mainMail {
    padding: 10px;
}

.rightContent.mailWrite {
    height: 100%;
    padding: 10px;
}

.mailEmpty {
    background: #fff url(../images/mail/mailMiss.png) center no-repeat !important;
    background-size: 240px 240px !important;
}

.mailBox .rightList .rightContent.mainMail .mailGrid {
    width: 100%;
    min-height: calc(100% - 75px);
    height: calc(100% - 75px);
    max-height: calc(100% - 75px);
    position: relative;
    overflow: hidden;
    /* overflow-y: auto; */
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
}

.mailBox .rightList .rightContent.mainMail .mailpager {
    text-align: right;
    height: 25px;
    margin-top: 10px;
}

.mailBox .rightList .rightContent.mainMail .mailpager .paperitem {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    color: rgba(0, 0, 0, .87);
    border-radius: 4px;
    padding: 0 6px;
    margin-left: 4px;
    border: 1px solid rgba(34, 36, 38, .15);
    background: #fff;
    cursor: pointer;
}

.mailBox .rightList .rightContent.mainMail .mailpager .paperitem.readonly {
    color: rgba(0, 0, 0, .3);
    cursor: default;
}

.mailBox .rightList .rightContent.mainMail .mailpager .paperitem.paperNum,
.mailBox .rightList .rightContent.mainMail .mailpager .paperitem.paperSize {
    border: none;
    background: none;
    cursor: default;
}

.mailBox .rightList .rightContent.mainMail .mailpager .input.ui,
.mailBox .rightList .rightContent.mainMail .mailpager .input.ui input {
    min-width: 20px;
    height: 25px;
    min-height: 25px;
    display: inline-block;
    width: 30px;
    margin-left: 2px;
    padding: 0;
    text-align: center;
    top: -0.5px;
    position: relative;
}

.mailBox .rightList .head {
    padding: 0 10px 0 0;
    width: 100%;
    height: 40px;
    background: white;
    border-bottom: #ccc 1px solid;
    position: relative
}

.mailBox .rightList .head .breadcrumb {
    height: 100%;
    line-height: 40px;
    padding: 0 10px;
    /*overflow: hidden;*/
}

.mailBox .rightList .head .breadcrumb .divider {
    margin: 0;
}

.mailBox .rightList .head .breadcrumb .section,
.mailBox .rightList .head .breadcrumb .right.angle {
    height: 40px;
    display: block;
    float: left;
    line-height: 40px
}

.mailBox .rightList .head .breadcrumb .right.angle {
    margin: 0 4px;
}

.mailBox .rightList .head .breadcrumb .section.active {
    color: #333;
    cursor: default;
}

.mailBox .rightList .head .mailSetting {
    height: 40px;
    position: absolute;
    right: 10px;
    line-height: 40px;
    color: #666;
    cursor: pointer;
    font-size: 18px;
    top: 0;
    margin: 0;
}

.mailBox .rightList .toolBox {
    margin: 0 0 10px 0;
    height: 30px;
}

.mailBox .rightList .tool.ui.menu {
    height: 30px;
    min-height: 30px;
    box-shadow: none;
    /* border-radius: 0; */
    border-color: #ccc;
    width: auto;
    float: left;
    margin: 0;
    margin-right: 10px;
}

.mailBox .rightList .tool.ui.menu:last-child {
    margin-right: 0;
}

.mailBox .rightList .tool.ui.menu .button {
    font-size: 12px;
    border: none;
    background: #fff;
    border-right: 1px solid rgba(34, 36, 38, .15);
    height: 28px;
    line-height: 28px;
    padding: 0 6px;
    cursor: pointer;
}

.mailBox .rightList .tool.ui.menu .button:first-child {
    border-radius: 4px 0 0 4px;
}

.mailBox .rightList .tool.ui.menu .button.active {
    background: #d0e5f5;
}

.mailBox .rightList .tool.ui.menu .button:last-child {
    border-right: none;
    border-radius: 0 4px 4px 0;
}

.mailBox .rightList .tool.ui.menu.right {
    float: right;

}

.mailBox .rightList .tool.ui.menu .item {
    padding: 0;
    cursor: pointer;
}

.mailBox .rightList .tool.ui.menu .item > span {
    display: block;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    border-right: 1px solid #ccc;
}

.mailBox .rightList .tool.ui.menu .item > span.circle {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 3px;
    padding: 0;
    margin-right: 5px;
    border: none;
    position: relative;
    top: 2px;
}

.mailBox .rightList .tool.ui.menu .item > span > .icon {
    margin: 0
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown {
    border: none;
    border-radius: 0;
    border-right: 1px solid #ccc;
    padding: 0 18px 0 10px;
    height: 28px;
    min-height: 28px;
    line-height: 28px;
    position: relative;
    text-align: center;
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown.more {
    border-right: none;
    min-width: 24px;
    padding: 0 !important;
    width: 24px;
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown.detailmore {
    padding: 0 8px !important;
    width: auto;
    border-right: 0;
    min-width: 30px;
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown.more .menu,
.mailBox .rightList .tool.ui.menu .item .ui.dropdown.detailmore .menu {
    border-radius: 4px;
    border-top: 1px solid rgba(34, 36, 38, .35);
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown.theme {
    min-width: 80px;
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown .dropdown.icon,
.mailBox .rightList .tool.ui.menu .item .ui.dropdown.more > .icon {
    display: block;
    font-size: 12px;
    width: 12px;
    height: 12px;
    position: absolute;
    right: 3px;
    top: 8px;
    padding: 0;
    margin: 0;
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown.more > .icon {
    right: 5px;
    top: 1px;
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown .text {
    width: 100%;
    height: 100%;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown .menu,
.mailBox .head .ui.dropdown .menu {
    top: 100%;
    left: -1px;
    right: -1px;
    margin-top: 0.5rem;
    width: auto;
    max-height: 300px;
    overflow-y: auto;
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown.theme .menu {
    left: 0px;
    right: 0px;
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown .menu .item,
.mailBox .head .ui.dropdown .menu .item {
    padding: 0 10px !important;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.mailBox .head .ui.dropdown .menu .item {
    max-width: 200px;
}

.mailBox .rightList .tool.ui.menu .item .input {
    position: relative;
    border: none;
}

.mailBox .rightList .tool.ui.menu .item .input input {
    padding: 0 6px;
    height: 28px;
    min-height: 28px;
    line-height: 28px;
    padding-left: 30px;
    /* border-right: 1px solid #e5e5e5 !important; */
    border: none;
}

.mailBox .rightList .tool.ui.menu .item .input .icon {
    position: absolute;
    left: 8px;
    top: 6px;
    color: #999;
    margin-top: 0px;
    font-size: 14px;
}

.mailBox .rightList .mailcontent {
    /* position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 10px; */
    height: 100%;
    overflow: hidden;
}

/* .mailBox .rightList .rightContent .gridSumMenu {
    left: 0;
    border: none;
    bottom: 0px;
} */

.mailcontent .mailitem {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: 40px;
    min-height: 40px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    cursor: pointer;
    width:100%;
    display:block;
}

.mailcontent .mailInbox .mailitem:hover {
    border-left: 1px solid #7ec7ff;
    background: #f5f5f6;
}

.mailcontent .mailInbox .mailitem.unread .addresser,
.mailcontent .mailInbox .mailitem.unread .theme,
.mailcontent .mailInbox .mailitem.unread .time,
.mailcontent .mailInbox .mailitem.unread .size {
    font-weight: bold;
}

/*.mailcontent .mailitem {*/
/*border-top: none;*/
/*}*/

/*.mailcontent .mailitem:nth-child(even) {*/
/*background: #f5f5f6;*/
/*}*/

.mailcontent .mailitem.selected {
    /*background: #fff;*/
    border-left: 1px solid #7ec7ff;
    background: #f5f5f6;
}

/*.mailcontent .mailitem.unread {*/
/*border-left: 2px solid red;*/
/*}*/

/*.mailcontent .mailitem.isread {*/
/*border-left: 2px solid #7ec7ff;*/
/*}*/

.mailcontent .mailitem.mailhead {
    height: 40px;
    background: #fff;
    padding-right:10px;
}

.mailcontent .mailitem .item {
    padding: 0 5px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 0;
    color: #666;
    font-family: "微软雅黑"
}

.mailcontent .mailitem .item .content {
    color: #666 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mailcontent .mailitem .item .content-type {
    color: #999;
    min-width: 50px;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mailcontent .mailitem .item .labels {
    color: #fff;
    margin: 0 4px;
    border-radius: 3px;
    height: 20px;
    line-height: 20px;
    display: inline-flex;
}

.mailcontent .mailitem .item .labels > span {
    padding: 0 4px;
    text-align: center;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mailcontent .mailitem .item .labels > i.close {
    display: none;
    height: 100%;
}

.mailcontent .mailitem.mailhead .item {
    height: 40px;
    line-height: 40px;
    color: #333;
}

.mailcontent .mailitem .item.size {
    width: 60px;
   float: left;
   position: relative;
    text-align: right;
    display: block;
    padding-right: 5px;
    text-align: left;
}
.mailcontent .mailitem .item.time {
    width: 90px;
    float: right;
    position: relative;
    text-align: right;
    display: block;
    padding-right: 5px;
    text-align: left;
}

.mailcontent .mailitem .item.time strong {
    font-size: 12px;
    color: #666;
}

.mailcontent .mailitem .item.addresser {
    width: 130px;
    float: left;
    position: relative;
}
.mailcontent .mailitem.mailhead .item.addresser{
    width: calc(20% + 47px);
}

.mailcontent .mailitem .item.check {
    width: 35px;
    text-align: center;
    padding-left: 10px;
    padding-right: 0;
    float: left;
    display: flex;
    position: relative;
}

.mailcontent .mailitem .item.check .ui.checkbox label:before {
    top: 0 !important;
}

.mailcontent .mailitem .item.customer {
    float: left;
    position: relative;
    width:calc(20% - 83px)
}

.mailcontent .mailitem .item.icons {
    width: 100px;
    float: left;
    position: relative;
}

.mailcontent .mailitem .item.icons .iconitem {
    display: block;
    position: absolute;
    background-image: url(../images/mail/mail-icons.png);
}

/* 紧急 */
.mailcontent .mailitem .item.icons .iconitem.exigence {
    background-position: -5px -185px;
    width: 8px;
    height: 10px;
    top: 10px;
    left: 0px;
}

.mailcontent .mailitem .item.icons .iconitem.unread {
    background-position: -2px -3px;
    width: 14px;
    height: 12px;
    top: 10px;
    left: 14px;
}

.mailcontent .mailitem .item.icons .iconitem.accessory {
    background-position: -5px -169px;
    width: 8px;
    height: 10px;
    top: 11px;
    left: 36px;
}

.mailcontent .mailitem .item.theme {
    position: relative;
    float: left;
    width:calc(80% - 332px)
}

.mailcontent .mailitem.selected .item.theme {
    /* overflow:visible; */
}

.bg_purple {
    background: #9252ea
}

.mailcontent .mailitem .item span.attach {
    display: inline-block;
    height: 100%;
    color: #999;
    width: 16px;
    margin-right: 4px;
}

.mailcontent .mailitem .item span.attach:last-child {
    margin-right: 0;
}

.mailcontent .mailitem .item span.attach.send0 {
    background: url(../images/mail/mail_send0.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.send1 {
    background: url(../images/mail/mail_send1.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.send2 {
    background: url(../images/mail/mail_send2.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.send3 {
    background: url(../images/mail/mail_send3.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.approval1 {
    background: url(../images/mail/approval1.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.approval2 {
    background: url(../images/mail/approval2.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.approval3 {
    background: url(../images/mail/approval3.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.reply {
    background: url(../images/mail/reply.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.attachment {
    background: url(../images/mail/attach.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.process {
    background: url(../images/mail/process.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.remark {
    background: url(../images/mail/remark.png) no-repeat center;
    background-size: 12px;
    width: 22px;
    margin: 0 2px;
}

.mailcontent .mailitem .item span.attach.customer {
    width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 5px;
    font-weight: normal;
}

.mailcontent .mailitem .item span.attach.reply1 {
    background: url(../images/mail/reply1.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.fw {
    background: url(../images/mail/fw.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.issue {
    background: url(../images/mail/issue.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.fworre {
    background: url(../images/mail/fworre.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.red {
    background: url(../images/mail/red.png) no-repeat center;
    background-size: 16px;
}

.mailcontent .mailitem .item span.attach.track {
    background: url(../images/mail/track.png) no-repeat center;
    background-size: 16px;
}

i.approval {
    background: url(../images/mail/approval.png) no-repeat center;
    background-size: 16px;
    top: 1px;
    position: relative;
}

i.label {
    background: url(../images/mail/label.png) no-repeat center;
    background-size: 16px;
    top: 1px;
    position: relative;
}

i.unread {
    background: url(../images/mail/unread.png) no-repeat center;
    background-size: 16px;
    top: 1px;
    position: relative;
}

i.mailpush {
    background: url(../images/mail/push.png) no-repeat center;
    background-size: 16px;
    top: 1px;
    position: relative;
}

i.mailremark {
    background: url(../images/mail/remark.png) no-repeat center;
    background-size: 12px;
    margin-top: 2px;
    position: absolute;
}

i.mailCensus {
    background: url(../images/mail/census.png) no-repeat center;
    background-size: 16px;
    top: 1px;
    right: 4px;
    opacity: 0.8;
    font-weight: normal;
    position: absolute;
    height: 100%;
    display: inline-table;
}

i.timess {
    background: url(../images/mail/time.png) no-repeat center;
    background-size: 16px;
    height: 16px;
    position: relative;
    top: 2px;
}

i.back {
    background: url(../images/mail/back.png) no-repeat center;
    background-size: 18px;
    top: 2px;
    position: relative;
}

i.config {
    background: url(../images/mail/config.png) no-repeat center;
    background-size: 18px;
    top: 2px;
    position: relative;
}

i.attachs {
    background: url(../images/mail/attach.png) no-repeat center;
    background-size: 13px;
    top: 2px;
    position: relative;
    margin: 0;
}

.mailcontent .mailitem .item span.attach .icon {
    font-size: 12px;
    padding: 0;
    margin-right: 2px;
}

.mailcontent .mailInbox {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    bottom: 0px;
    /* height: auto; */
    overflow: hidden;
    overflow-y: auto;
    padding-right: 10px;
}
.mailcontent .mailInbox .mailitem{
    width: 100%;
}

.mailEditorBox {
    height: 100%;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    padding: 0 10px;
    border: 1px solid #ccc;
    background: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.mailEditorBox .topeditor {
    min-height: 50px;
    width: 100%;
    padding: 5px 0;
    padding-top: 40px;
}

.mailEditorBox .topeditor .sendmenu {
    height: 40px;
    overflow: hidden;
    /* padding-top: 5px; */
    background: #f5f5f6;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
}

.mailEditorBox .topeditor .sendmenu .item {
    float: left;
    padding: 0 8px;
    text-align: center;
    /* height: 30px;
    line-height: 30px; */
    cursor: pointer;
    position: relative;
    font-size: 12px;
    /* color: #666; */
}

.mailEditorBox .topeditor .sendmenu .item.button {
    /* border: 1px solid #ccc;
    background: #fff;
    color: #333;
    border-radius: 4px;
    margin-right: 10px; */
}

.mailEditorBox .topeditor .sendmenu .item.button.right {
    float: right;
    margin-right: 0;
}

.mailEditorBox .topeditor .sendmenu .item.button.primary {
    /* border: 1px solid #0099CC;
    background: #0099CC;
    color: #fff; */
}

.mailEditorBox .topeditor .sendmenu .item.time {
    padding-left: 20px;
}

.mailEditorBox .topeditor .sendmenu .item.time .icon {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 12px;
    margin: 0;
}

.mailEditorBox .topeditor .sendmenu .item {
    border: none;
    color: rgba(0, 0, 0, .87);
    height: 40px;
    line-height: 40px;
    padding: 0 8px;
}

.mailEditorBox .topeditor .sendmenu .item:first-child {
    padding-left: 5px;
}

.mailEditorBox .topeditor .sendmenu .item:last-child {
    padding-right: 5px;
}

.mailEditorBox .topeditor .sendmenu .item:hover {
    background: rgba(0, 0, 0, .03);
}

.mailEditorBox .maileditor .ui textarea {
    resize: none;
    max-height: inherit;
}

.mailEditorBox .editorItem {
    min-height: 32px;
    position: relative;;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 10px 0px 80px;
    height: auto;
}

.mailEditorBox .editorItem .ui.selection {
    background: inherit;
    border: none;
    width: auto;
    box-shadow: none;
    height: 40px;
    padding-left: 0;
}

.mailEditorBox .editorItem .ui.selection > .text {
    top: 5px;
    position: relative;
}

.mailEditorBox .editorItem .ui.selection .menu {
    border-top-width: thin !important;
    width: auto;
    min-width: inherit;
}

.mailEditorBox .editorItem .ui.selection:hover {
    box-shadow: none;
}

.mailEditorBox .editorItem .ui.input {
    width: 100%;
}

.mailEditorBox .editorItem[name='subject'] input {
    font-weight: bold;
    font-size: 14px;
}

.mailEditorBox .editorItem .ui.input input {
    box-shadow: none;
    border: none;
    border-radius: 0;
    height: 40px;
    line-height: 40px;
    padding: 0;
    width: 100%;
    background: none;
}

.mailEditorBox .editorItem .caption {
    height: 40px;
    line-height: 40px;
    position: absolute;
    width: 70px;
    left: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mailEditorBox .editorItem .caption.userSelect {
    cursor: pointer;
}

.cke_screen_reader_only {
    display: none;
}

/* mailImport插件样式相关 */
.mailEditorBox .editorItem .mailImport {
    width: 100%;
    height: auto;
    min-height: 40px;
    overflow: hidden;
    cursor: text;
}

.mailEditorBox .editorItem .mailImport ul {
    position: absolute;
    max-height: 300px;
    overflow-y: auto;
    top: 42px;
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15);
    background: white;
    border: 1px solid rgba(34, 36, 38, .15);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1;
}

.mailEditorBox .editorItem .mailImport ul::-webkit-scrollbar {
    width: 3px;
}

.mailEditorBox .editorItem .mailImport ul li {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mailEditorBox .editorItem .mailImport ul li.active {
    background: rgba(0, 0, 0, .03);
    color: rgba(0, 0, 0, .95);
    font-weight: 700;
}

.mailEditorBox .editorItem .mailImport ul li:hover {
    background: rgba(0, 0, 0, .03);
    color: rgba(0, 0, 0, .95);
    cursor: pointer;
}

.mailEditorBox .editorItem .mailImport .mailInsert {
    height: 40px;
    max-width: 100%;
    width: 2px;
    float: left;
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
}

.mailEditorBox .editorItem .mailImport .mailPrompt {
    height: 40px;
    line-height: 40px;
    display: inline-block;
    float: left;
}

.mailEditorBox .editorItem .mailImport .mailaddress {
    height: 32px;
    margin: 4px 4px 4px 0;
    float: left;
    background-color: #d0e5f5;
    color: #333;
    padding-right: 20px;
    padding-left: 8px;
    line-height: 32px;
    position: relative;
    border-radius: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mailEditorBox .editorItem .mailImport .mailaddress input {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    max-width: 100%;
}

.mailEditorBox .editorItem .mailImport .mailaddress.error {
    color: #c30 !important;
    background: #EDB8B8 !important;
}

.mailEditorBox .editorItem .mailImport .mailaddress.active {
    background: rgba(0, 205, 255, .2);
}

.mailEditorBox .editorItem .mailImport .mailaddress .username {
    display: inline-block;
    height: 100%;
    margin-right: 2px;
}

.mailEditorBox .editorItem .mailImport .mailaddress .close {
    position: absolute;
    display: inline-table;
    width: 14px;
    height: 14px;
    font-size: 12px;
    right: 4px;
    top: 0px;
    margin: 0;
}

.mailEditorBox .editormenu {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
}

.mailEditorBox .editormenu > .item {
    float: left;
    height: 30px;
    margin: 5px 0;
    width: auto;
    line-height: 30px;
    font-size: 12px;
    position: relative;
}

.mailEditorBox .editormenu > .item .icon {
    color: #666;
    margin: 0;
}

.mailEditorBox .editormenu .item label:before {
    top: 7px !important;
}

.mailEditorBox .editormenu .item label {
    font-size: 12px;
    padding-left: 22px;
}

.mailEditorBox .editormenu .item.border {
    border-left: 1px solid #ccc;
    padding-left: 5px;
}

.mailEditorBox .editormenu .item .button {
    line-height: 30px;
    cursor: pointer;
}

.mailEditorBox .editormenu .item .button .icon {
    margin: 0;
    padding-left: 5px;
    width: 20px;
    height: 20px;
}

.mailEditorBox .editormenu .item > input[type='file'] {
    width: 0;
    height: 0;
    position: absolute;
    display: none;
}

.mailEditorBox .editormenu .item .ui.checkbox {
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
}

.mailEditorBox .editormenu .item .ui.checkbox:last-child {
    padding-right: 5px;
}

.mailEditorBox .editormenu .item .ui.checkbox input {
    top: 7px;
    left: 5px;
}

.mailEditorBox .editormenu .item > span {
    position: relative;
    display: inline-block;
    padding-left: 4px;
}

.mailEditorBox .editormenu .item .ui.dropdown.send {
    border: none;
    box-shadow: none;
    padding: 0 22px 0 2px;
    height: 30px;
    line-height: 30px;
    background: none;
    position: relative;
    display: inline-block;
    width: auto;
    min-height: 30px;
    color: #333;
    /*margin: 0 4px;*/
}

.mailEditorBox .editormenu .item .ui.dropdown.send .menu {
    width: auto;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    min-width: max-content;
}

.mailEditorBox .editormenu .item .ui.dropdown.send .menu .item {
    padding: 0 10px !important;
    width: 100%;
    min-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 35px;
    height: 35px;
}

.mailEditorBox .editormenu .item .ui.dropdown.send input {
    padding: 0;
    height: 30px;
    line-height: 30px;
    width: 100%;
    color: #333;
}

.mailEditorBox .editormenu .item .ui.dropdown.send .text {
    line-height: 30px;
    color: #333;
}

.mailEditorBox .editormenu .item .ui.dropdown.send .icon.dropdown {
    padding: 0;
    width: 12px;
    height: 12px;
    position: absolute;
    right: 4px;
    top: 50%;
    margin: 0;
    margin-top: -5px;
}

.mailEditorBox .editormenu .item .ui.dropdown.signature {
    width: auto;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0px 30px 0 10px;
    line-height: 30px;
}

.mailEditorBox .editormenu .item .ui.dropdown.signature .icon {
    top: 7px;
}

.mailEditorBox .editormenu .item .ui.dropdown.signature .menu .item {
    height: 30px;
    line-height: 30px;
    width: 100%;
    padding: 0 8px !important;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mailEditorBox .editormenu .item.right {
    float: right;
    cursor: pointer;
}

.bookMarkBox {
    position: absolute;
    top: 100%;
    left: 100%;
    margin-left: -190px;
    height: auto;
    width: 190px;
    background: white;
    border: 1px solid #ccc;
    overflow: hidden;
    z-index: 5000;
    padding-top: 2px;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.bookMarkBox.left {
    left: 0;
    margin-left: 0;
}

.bookMarkBox .item {
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #e5e5e5;
}

.bookMarkBox .item .color {
    height: 12px;
    width: 12px;
    position: relative;
    display: inline-block;
    top: -15px;
    border-radius: 3px;
}

.bookMarkBox .ui.checkbox {
    height: 40px !important;
    line-height: 40px !important;
    padding-left: 10px !important;
    padding-right: 3px;
}

.bookMarkBox .ui.checkbox label:before {
    top: 11px !important;
}

.bookMarkBox .item .ui.checkbox input {
    top: 12px !important;
    left: 10px !important;
}

.bookMarkBox .item .ui.input {
    height: 39px;
    left: 50px;
    display: inline-block;
    position: absolute;
    line-height: 40px;
    right: 54px;
}

.bookMarkBox .item .ui.input input {
    min-width: 20px;
    padding: 0 5px;
    box-shadow: none;
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    top: -1px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bookMarkBox .item .ui.input.max {
    right: 10px;
    left: 35px;
}

.bookMarkBox .item > .icon.alternate {
    float: right;
    width: 20px;
    height: 20px;
    margin: 0;
    line-height: 24px;
    position: relative;
    right: 5px;
    top: 8px;
    color: #666;
    cursor: pointer;
}

.bookMarkBox .button {
    text-align: center;
    border: none;
    cursor: pointer;
    border-top: 1px solid #e5e5e5;
}

.bookMarkBox .button.primary {
    background: #7ec7ff;
    color: #fff;
    border: none;
}

.bookMarkBox div.add {
    cursor: pointer;
    text-align: center;
    position: relative;
}

.bookMarkBox div.add i.add {
    margin: 0;
}

.mailEditorBox .editorAttach,
.mailPreview .editorAttach {
    overflow: hidden;
    height: auto;
    margin-top: -5px;
}

.mailPreview .editorAttach {
    border-top: none;
}

.mailPreview .editorAttach.mailBottomAttach {
    padding-top: 10px;
}

.mailEditorBox .editorAttach .attachItem,
.mailPreview .editorAttach .attachItem {
    height: 40px;
    min-width: 200px;
    width: auto;
    max-width: 400px;
    margin: 5px 5px 0 0;
    float: left;
    position: relative;
    background-color: #E3EAF4;
    border-radius: 3px;
    overflow: hidden;
    padding-left: 46px;
    padding-right: 36px;
    cursor: pointer;
}

.mailPreview .editorAttach .attachItem.unDwon .caption {
    right: 10px;
}

.mailEditorBox .editorAttach .attachItem .tag,
.mailPreview .editorAttach .attachItem .tag {
    height: 24px;
    line-height: 24px;
    padding: 0 5px;
    color: #fff;
    border-radius: 4px;
    position: absolute;
    left: 5px;
    top: 8px;
    max-width: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mailPreview .editorAttach .attachItem .tag {
    padding: 5px;
}

.mailEditorBox .editorAttach .attachItem .caption,
.mailPreview .editorAttach .attachItem .caption {
    /* left: 50px;
    position: absolute;
    right: 30px;
    top: 0; */
    height: 40px;
    line-height: 40px;
    max-width: 300px;
}

.mailEditorBox .editorAttach .attachItem .caption .detail,
.mailPreview .editorAttach .attachItem .caption .detail {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    font-weight: bold;
    font-size: 12px;
}

.mailPreview .editorAttach .attachItem .caption .detail {
    text-align: center;
    height: 20px;
    line-height: 20px;
    display: block;
}

.mailPreview .editorAttach .attachItem .caption span {
    display: block;
    text-align: center;
    height: 20px;
    line-height: 20px;
    color: #999;
}

.mailPreview .editorAttach .attachItem .caption .detail a {
    cursor: pointer;
    color: #333;
}

.mailEditorBox .editorAttach .attachItem .caption .detail span,
.mailPreview .editorAttach .attachItem .caption .detail span {
    color: #666;
    font-weight: normal;
}

.mailEditorBox .editorAttach .attachItem .caption .progress,
.mailPreview .editorAttach .attachItem .caption .progress {
    width: 100%;
    border-radius: 4px;
    background: #CCCCCC;
    display: inline-block;
    height: 24px;
    margin: 8px 0;
}

.mailEditorBox .editorAttach .attachItem .caption .progress .process,
.mailPreview .editorAttach .attachItem .caption .progress .process {
    transition: "width" 0.2s;
    height: 100%;
    width: 100%;
    background: rgb(10, 198, 200);
    display: block;
    border-radius: 4px;
}

.mailEditorBox .editorAttach .attachItem .attachtool,
.mailPreview .editorAttach .attachItem .attachtool {
    width: 30px;
    height: 40px;
    right: 0;
    top: 0;
    position: absolute;
}

.mailEditorBox .editorAttach .attachItem .attachtool .attachtoolitem,
.mailPreview .editorAttach .attachItem .attachtool .attachtoolitem {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    width: 30px;
    text-align: center;
    float: right;
}

.mailEditorBox .editorAttach .attachItem .attachtool .attachtoolitem a,
.mailPreview .editorAttach .attachItem .attachtool .attachtoolitem a {
    color: #333;
}

.mailEditorBox .editorAttach .attachItem .attachtool .attachtoolitem .icon,
.mailPreview .editorAttach .attachItem .attachtool .attachtoolitem .icon {
    color: #555;
    font-size: 13px;
}

.mailEditorBox .editorAttach .attachItem:hover .icon.close,
.mailPreview .editorAttach .attachItem:hover .icon.close {
    color: #da251d;
}

.rightContent .mailDetailContent {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    overflow-y: auto;
    background: #fff;
}

.rightContent .mailDetailContent .detailHead {
    min-height: 100px;
    border-bottom: 1px solid #ccc;
    padding: 0 20px 20px 20px;
    width: 100%;
    background: #f5f5f6;
}

.rightContent .mailDetailContent .detailBody {
    height: auto;
    width: 100%;
    background: #fff;
}

.rightContent .mailDetailContent .detailHead .theme.row {
    height: 40px;
    font-size: 18px;
    color: #555;
    font-weight: bold;
    line-height: 40px;
}

.rightContent .mailDetailContent .detailHead .row {
    font-size: 12px;
    color: #999;
    height: 26px;
    line-height: 26px;
}

.rightContent .mailDetailContent .detailHead .row span {
    color: #666;
}

.rightContent .mailDetailContent .detailHead .row span span.attach {
    display: table-cell;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.rightContent .mailDetailContent .detailHead .row span.addr {
    font-size: 14px;
    font-weight: bold;
    color: #555;
}

.rightContent .datailAttach {
    margin: 0 20px;
    height: auto;
    overflow: hidden;
    background: #dde7f9;
    padding: 30px 2px 2px 2px;
    position: relative;
}

.rightContent .datailAttach .head {
    height: 30px;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    line-height: 30px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    background: none;
    padding: 0 10px;
}

.rightContent .datailAttach .head span {
    font-size: 12px;
    font-weight: normal;
    color: #666;

}

.rightContent .datailAttach .datailAttachBox {
    width: 100%;
    height: auto;
    background: #fff;
}

.rightContent .datailAttach .datailAttachBox .attachTool {
    height: 30px;
    line-height: 30px;
    overflow: hidden;
}

.rightContent .datailAttach .datailAttachBox .attachTool .item {
    padding: 0 8px;
    float: left;
    font-size: 12px;
    color: #333;
    cursor: pointer;
}

.rightContent .datailAttach .datailAttachBox .attachTool .item.caption {
    font-weight: bold;
    line-height: 28px;
}

.rightContent .datailAttach .datailAttachBox .attachContent {
    padding: 0 8px;
}

.rightContent .datailAttach .datailAttachBox .attachContent .attachItem {
    height: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0 10px 0 50px
}

.rightContent .datailAttach .datailAttachBox .attachContent .attachItem .img {
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    width: 40px;
}

.rightContent .datailAttach .datailAttachBox .attachContent .attachItem .img img {
    max-width: 40px;
    max-height: 40px;
}

.rightContent .datailAttach .datailAttachBox .attachContent .attachItem .content .name {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rightContent .datailAttach .datailAttachBox .attachContent .attachItem .content .name .size {
    color: #666;
}

.rightContent .datailAttach .datailAttachBox .attachContent .attachItem .content .tool {
    height: 20px;
    line-height: 20px;
    overflow: hidden;
}

.rightContent .datailAttach .datailAttachBox .attachContent .attachItem .content .tool .item {
    float: left;
    margin-right: 10px;
    cursor: pointer;
}

.rightContent .mailDetailContent .quickReply {
    width: 100%;
    height: 42px;
    padding: 6px 20px;
    margin: 10px 0;
    background: #dde7f9;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.rightContent .mailDetailContent .quickReply .ui.input {
    width: 100%;
    height: 100%;
}

.rightContent .mailDetailContent .quickReply .ui.input input {
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    line-height: 30px;
}

.mailBox.config .leftList {
    width: 160px;
}

.mailBox.config .leftList .head {
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    background: #f5f5f6;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 12px;
    font-weight: bold;
}

.mailBox.config .leftList .ui.top.attached.tabular.menu {
    margin: 0;
    border: none;
    height: auto;
    display: block;
    padding: 10px 0;

}

.mailBox.config .leftList .ui.top.attached.tabular.menu .item {
    display: block;
    border: none;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #333 !important;
    background: #fff;
    box-shadow: none;
    padding: 0 20px;
    border-radius: 0 !important;
}

.mailBox.config .leftList .ui.top.attached.tabular.menu .item.active {
    background: #0099FF;
    color: #fff !important;
    font-weight: normal;
}

.mailBox.config .rightList {
    left: 160px;
}

.mailBox.config .rightList .ui.bottom.attached.tab.segment {
    background: none;
    border: none;
    border-radius: 0;
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 10px;
    overflow-y: auto;
}

.mailBox.config .Edit {
    padding: 40px 0 0 0;
}

.mailBox.config .Edit .editHeader {
    top: 0;
    padding: 0
}

.mailBox.config .Edit .editHeader .ui.menu.editMenu .item.ui.input.config i {
    top: 13px;
}

.mailBox.config .Edit .accountContent {
    position: absolute;
    top: 42px;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
}

.mailBox.config .Edit .accountContent .configitem .tag {
    color: #fff;
    background: #389aff;
    font-size: 12px;
    height: 20px;
    width: auto;
    padding: 0 5px;
    border-radius: 6px;
    position: absolute;
    right: 2px;
    bottom: 30px;
    -webkit-transform: scale(0.8);
    text-align: center;
    line-height: 20px;
}

.mailBox.config .Edit .accountContent .configitem .tag.green {
    background: #33ab50;
}

.mailBox.config .Edit .accountContent .configitem .tag.red {
    background: #FF7E87;
}

.mailBox.config .Edit .accountContent .configitem .tag.lightgreen {
    background: #28b1b0;
}

.ui.modal {
    overflow: inherit;
}

.ui.modal.mailAccountSetting {
    width: 600px !important;
    margin-left: -300px !important;
    overflow:visible!important;
}

.package_load {
    padding-top: 10px;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
}

.ui.modal.mailAccountSetting.mailBlackList,
.ui.modal.mailAccountSetting.mailReceive {
    width: 400px !important;
    margin-left: -200px !important;
}

.ui.modal.mailAccountSetting.mailMerge {
    width: 600px !important;
    margin-left: -300px !important;
}

.ui.modal.mailAccountSetting.mailApproval {
    width: 500px !important;
    margin-left: -250px !important;
}

.ui.modal.mailAccountSetting.mailReceive .formRow .ui.dropdown {
    width: 214px;
}

.ui.modal.mailAccountSetting.mailSend .formRow .ui.dropdown {
    width: 414px;
}

.ui.modal .mailContent {
    background: #fff;
    border: 1px solid #d4d4d5;
    padding: 1em;
    border-radius: .28571429rem;
    height: 440px;
    overflow-y: auto;
}

.ui.modal.mailAccountSetting .AccountSettingContent {
    padding: 10px;
}

/*.ui.modal.mailAccountSetting .AccountSettingContent .ui.checkbox {*/
    /*width: calc(100% - 140px);*/
/*}*/

.ui.modal.mailAccountSetting .AccountSettingContent .ui.checkbox label {
    padding-top: 6px;
    top: 1px;
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui.modal.mailAccountSetting .AccountSettingContent .ui.toggle.checkbox label {
    height: 100%;
}

.ui.modal.mailAccountSetting .SendSettingContent {
    padding: 10px;
}

.ui.modal.mailAccountSetting .SendSettingContent .ui.bottom.attached.tab.segment {
    overflow-y: auto;
}

.ui.modal.mailAccountSetting .ui.segment {
    min-height: 150px;
    max-height: 500px;
    overflow-y: auto;
}

.ui.modal.mailAccountSetting .ui.segment .account_network {
    border: 1px solid #d4d4d5;
    border-radius: .28571429rem;
    padding: 15px 5px;
}

.ui.modal.mailAccountSetting .ui.segment .account_network .formRow {
    width: 50%;
    display: inline-block;
}

.ui.modal.mailAccountSetting .accountUserList {
    width: 100%;
    height: 100%;
    max-height: 400px;
    position: relative;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid #ccc;
    border-bottom: none;
    overflow: hidden;
    overflow-y: auto;
}

.ui.modal.mailAccountSetting .accountUserList .ui.menu {
    height: 30px;
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #ccc;
    box-shadow: none;
    min-height: 30px;
}

.ui.modal.mailAccountSetting .accountUserList .ui.menu .item {
    padding: 0 10px !important;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.ui.modal.mailAccountSetting .accountUserList .ui.menu .item.name {
    width: 140px;
}

.ui.modal.mailAccountSetting .accountUserList .ui.menu .right.menu {
    height: 30px;
}

.ui.modal.mailAccountSetting .accountUserList .ui.menu .right.menu .item {
    margin-right: 2px;
    padding: 0 !important;
    height: 30px;
}

.ui.modal.mailAccountSetting .accountUserList .fixhead .ui.button {
    background: #EAEEF2;
    color: #34495E;
    font-weight: normal;
    border: 1px solid #B9C8D4;
    height: 24px;
    padding: 0 8px !important;
    line-height: 24px;
    font-size: 12px !important;
}

.ui.modal.mailAccountSetting .accountUserList .rowbox {
    /*position: absolute;*/
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    overflow-y: auto
}

.ui.modal.mailAccountSetting .accountUserList .rowbox .item.location {
    width: 410px;
}

.ui.modal.mailFastSetting {
    height: auto;
    width: 500px !important;
    margin-left: -250px !important;
}

.ui.modal.mailFastSetting .fastSettingContent {
    height: 225px;
    padding: 10px;
}

.ui.modal.mailFastSetting .fastSettingContent.isAdmin {
    height: 265px;
}

.ui.modal.mailBlackSetting, .ui.modal.mailTagSetting {
    height: auto;
    width: 500px !important;
    margin-left: -250px !important;
}

.ui.modal.mailTagSetting .pushTagSettingContent {
    padding: 10px;
}

.ui.modal.mailTagSetting .pushTagSettingContent .mailContent {
    height: 90px;
}

.ui.modal.mailBlackSetting .blackSettingContent {
    height: 235px;
    padding: 10px;
}

.ui.modal.mailSignatureSetting .signatureSettingContent {
    height: 460px;
    padding: 10px;
}

.ui.modal.mailtemplateSetting .templateSettingContent {
    height: 460px;
    padding: 10px;
}

.ui.modal.mailtemplateSetting .templateSettingContent.isAdmin {
    height: 500px;
}

.ui.modal.mailtemplateSetting .templateSettingContent.isAdmin .mailContent {
    height: 480px;
}

.ui.modal .formRow .ui.dropdown {
    min-height: unset !important;
    min-width: unset !important;
}

#relationshipConfig.ui.modal .formRow .ui.max {
    width: 210px;
}

#relationshipConfig.ui.modal .formRow .ui.multiples {
    width: calc(100% - 110px);
    height: auto;
    padding: 0 5px;
}

#relationshipConfig.ui.modal .formRow .ui.maxs {
    width: 330px;
}

#relationshipConfig.ui.modal .formRow .ui.right {
    left: 330px;
    width: 200px;
}

#relationshipConfig.ui.modal .formRow {
    height: 38px;
}

#relationshipConfig.ui.modal .formRow.top {
    height: 63px;
}

#relationshipConfig.ui.modal .formRow.top .name {
    height: 20px;
    line-height: 20px;
    width: 210px;
    display: inline-block;
    position: relative;
    left: 110px;
    text-align: center;
    font-size: 12px;
}

#relationshipConfig.ui.modal .formRow.top .ui {
    top: 25px;
}

.ui.modal .formRow .ui.dropdown.max {
    width: 240px;
}

.ui.modal .formRow .ui.dropdown.keywords {
    left: 370px;
    width: 140px;
}

.ui.modal .formRow .ui.dropdown.number {
    left: 450px;
    width: 60px;
    padding: 0 20px 0 0;
}

.ui.modal .formRow .ui.dropdown.where {
    left: 225px;
    width: 135px;
}

.ui.modal .formRow .ui.dropdown.value {
    left: 225px;
    width: 285px;
}

.ui.modal .formRow .ui.dropdown.style {
    width: 135px;
}

.ui.modal .formRow .ui.button.editUser {
    width: auto;
    left: 386px;
    margin: 0;
}

.ui.modal .formRow .ui.button.dong_1 {
    position: absolute;
    left: 520px;
    top: 0;
    height: 30px;
    padding: 8px 10px;
    margin: 0;
    width: 35px;
    line-height: inherit;
}

.ui.modal .mailTraceContent .formRow .ui.button.dong_1 {
    left: 540px;
}

.ui.modal .mailTraceContent .formRow .ui.button.change {
    left: 450px;
    font-size: 12px;
    background: #0099CC!important;
    font-weight: normal;
    color: white;
    width: 80px;
    padding: 0 16px;
}

.ui.modal .formRow .ui.button.dong {
    position: absolute;
    left: 380px;
    top: 0;
    height: 30px;
    padding: 8px 10px;
    margin: 0;
    width: 35px;
    line-height: inherit;
}

.ui.modal .formRow.big .ui.dropdown.min-small {
    width: 100px !important;
}

.ui.modal .formRow.big.checkbox {
    width: 50%;
    float: left;
}

.ui.modal .formRow.big.checkbox span {
    max-width: 200px;
}

.ui.modal .formRow.big.checkbox .ui.checkbox {
    left: 200px;
}

.mailBox.config .rightList .accountHead {
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    background: white;
    border-radius: 4px;
    height: auto;
    position: absolute;
    top: 0px;
    z-index: 999;
}

.mailBox.config .rightList .accountHead .head {
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    padding: 0 10px;
    background: #f5f5f6;
    border-bottom: 1px solid #ccc;
}

.mailBox.config .rightList .accountHead .row .column {
    text-align: center;
    padding: 10px;
}

.mailBox.config .signatureSetting .editHeader,
.mailBox.config .templateSetting .editHeader {
    top: 94px;
}

.mailBox.config .signatureSetting .accountContent,
.mailBox.config .templateSetting .accountContent {
    top: 136px;
}

.mailBox.config .rightList .accountHead .row .caption {
    display: inline-block;
    text-align: right;
}

.mailBox.config .rightList .personal {
    width: 100%;
    height: auto;
    padding: 20px;
}

.mailBox.config .rightList .personal .head {
    background: initial;
    font-size: 14px;
    font-weight: bold;
    border: none;
}

.mailBox.config .rightList .personal .content {
    padding: 0 10px;
}

.mailBox.config .rightList .personal .content .caption {
    display: inline-block;
    text-align: right;
    min-width: 120px;
}

.mailBox.config .rightList .personal .content .row {
    min-height: 40px;
    height: auto;
    position: relative;
}

.mailBox.config .rightList .personal .content .row .caption {
    width: 180px;
    float: left;
    height: 40px;
    line-height: 40px;
    text-align: right;
    color: #333;
}

.mailBox.config .rightList .personal .content .row .ui.input {
    height: 100%;
    width: calc(100% - 180px);
    float: left;
    padding-left: 10px;
}

.mailBox .cke textarea {
    border: none;
    border-radius: inherit;
}

.mailPreview {
    position: fixed;
    right: 0;
    top: 50px;
    bottom: 10px;
    background: #fff;
    border-right: none;
    z-index: 8888;
    width: 850px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    /*border-top-left-radius: 3px;*/
    /*border-bottom-left-radius: 3px;*/
    display: none;
}
.mailPreview .mailPreviewBackTop{
    position: fixed;
    bottom: 140px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 100%;
    text-align: center;
    cursor: pointer;
    display:none;
}
.mailPreview .mailPreviewBackTop .icon{
    margin: 0;
    width: 14px;
    height: 14px;
    line-height: 14px;
    margin-top: 6px;
}

.mailPreview .rightHandle {
    position: absolute;
    width: 15px;
    height: 45px;
    background: url(../images/mail/rightHandle.png) no-repeat;
    background-size: 100%;
    left: -8px;
    top: 50%;
    margin-top: -45px;
    z-index: 9999;
    cursor: pointer;
}

.mailPreview .mailmain {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: calc(100% - 60px);
}

.mailPreview .close {
    cursor: pointer;
    z-index: 1;
    opacity: .8;
    width: 15px;
    height: 2.25rem;
    padding: .625rem 0 0;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #ccc;
    font-size: 20px;
}

.mailPreview .expand {
    cursor: pointer;
    z-index: 1;
    width: 15px;
    height: 2.25rem;
    padding: .625rem 0 0;
    position: absolute;
    right: 35px;
    top: 10px;
    font-size: 15px;
    color: #ccc;
}

.mailPreview .refresh {
    cursor: pointer;
    z-index: 1;
    width: 15px;
    height: 2.25rem;
    padding: .625rem 0 0;
    position: absolute;
    right: 60px;
    top: 10px;
    font-size: 15px;
    color: #ccc;
}

.mailPreview .close:hover {
    color: #da251d !important;
}

.mailPreview .theme {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    padding-right: 75px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mailPreview .mailFrom {
    height: auto;
    position: relative;
    padding: 10px;
    margin: 0 10px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.mailPreview .mailApproval {
    height: auto;
    position: relative;
    padding: 10px;
    margin: 0 10px;
    border-bottom: 1px solid #e5e5e5;
}

.mailPreview .mailUser {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 120px;
    width: 80px;
    padding-top: 90px;
}

.mailPreview .mailUser .head {
    height: 80px;
    width: 80px;
    background: #0099CC;
    border-radius: 100%;
    overflow: hidden;
    color: #fff;
    line-height: 80px;
    position: absolute;
    top: 20px;
    left: 0;
    font-size: 40px;
    text-align: center;
}

.mailPreview .mailUser .ui.button {
    height: 30px;
    margin: 0;
    width: 80px;
    padding: 0;
    line-height: 30px;
    font-family: "微软雅黑";
    font-weight: normal;
}

.mailPreview .mailInfo {
    position: relative;
    height: auto;
    margin: 0 auto;
}

.mailPreview .mailMoreItem {
    position: absolute;
    right: 0;
    cursor: pointer;
    z-index: 2;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.mailPreview .mailMoreItem .ui.pointing.dropdown.link.item {
    padding: 3px 3px 3px 8px !important;
}

.mailPreview .mailMoreItem > .ui.dropdown {
    /*height: 20px;*/
    /*line-height: 20px;*/
    padding: 0 !important;
}

.mailPreview .mailMoreItem > .ui.dropdown > .menu {
    right: -5px;
    left: unset;
}

.mailPreview .mailMoreItem > .ui.dropdown > .menu .item {
    padding: 10px 20px !important;
    min-width: 120px;
    font-size: 12px;
    color: rgba(0, 0, 0, .87) !important;
    font-weight: normal;
    background: #fff;
}

.mailBox .divider {
    margin: 0 !important;
}

.mailPreview .divider {
    margin: 0 !important;
}

.mailPreview .mailMoreItem > .ui.dropdown > .menu .item:hover {
    background: rgba(0, 0, 0, .05);
}

.mailPreview .mailMoreItem > .ui.dropdown > .menu .icon {
    margin: 0;
    width: auto;
    padding-left: 5px;
    right: 10px;
    position: absolute;
}

.mailPreview .mailMoreItem > .ui.dropdown > .menu .menu {
    left: unset !important;
    right: 100% !important;
}

.mailPreview .mailMoreItem > .ui.dropdown > .menu:after {
    left: unset !important;
    right: 20px;
}

.mailPreview .mailInfo .mailInfoItem {
    position: relative;
    display: inline-block;
    width: 100%;
}

.mailPreview .mailInfo .mailInfoItem[data-type='from_add'] {
    width: calc(100% - 60px);
}

.mailPreview .mailInfo .mailInfoItem .caption {
    width: 75px;
    line-height: 34px;
    height: 34px;
    color: #999;
    font-size: 12px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mailPreview .mailInfo .mailInfoItem .detail {
    color: #444;
    width: calc(100% - 75px);
    min-height: 34px;
    line-height: 34px;
    font-size: 12px;
    float: left;
}

.mailPreview .mailInfo .mailInfoItem .detail .textarea {
    width: 50%;
    min-width: 500px;
    height: 130px;
    border-radius: 5px;
    background-color: #ffffe1;
    border: 1px solid #e5e5e5;
    line-height: normal;
    padding: 10px 10px 40px 10px;
}

.mailPreview .mailInfo .mailInfoItem .detail .textarea .remind {
    float: right;
    height: 30px;
    line-height: 30px;
    color: #666;
}

.mailPreview .mailInfo .mailInfoItem .detail .textarea .remind.error {
    color: red;
}

.mailPreview .mailInfo .mailInfoItem .detail .remark {
    width: 50%;
    min-width: 400px;
    border-radius: 5px;
    background-color: #ffffe1;
    border: 1px solid #e5e5e5;
    line-height: normal;
    padding: 10px;
}

.mailPreview .mailInfo .mailInfoItem .detail .remark .content {
    padding-left: 18px;
}

.mailPreview .mailInfo .mailInfoItem .detail .remark .content .deal {
    padding-top: 5px;
}

.mailPreview .mailInfo .mailInfoItem .detail .remark .content .deal a {
    cursor: pointer;
    padding-right: 10px;
}

.mailPreview .mailInfo .mailInfoItem .detail .textarea > textarea {
    width: 100%;
    border-radius: 4px;
    resize: none;
    height: 100%;
    padding: 5px;
    margin-bottom: 1px;
}

.mailPreview .mailInfo .mailInfoItem .detail .textarea .confirm {
    height: 30px;
    padding: 5px 10px;
    color: #fff;
    background: #0099CC;
    font-weight: normal;
    font-size: 12px;
}

.mailPreview .mailInfo .mailInfoItem .detail .textarea .cancel {
    height: 30px;
    padding: 5px 10px;
    background: white;
    font-size: 12px;
    background: #EAEEF2;
    color: #34495E;
    font-weight: normal;
    border: 1px solid #B9C8D4;
}

.mailPreview .mailInfo .mailInfoItem .detail span.look {
    color: #0099FF;
    cursor: pointer;
    position: absolute;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mailPreview .mailInfo .mailInfoItem .detail span.files {
    color: #999;
}

.mailPreview .mailInfo .mailInfoItem .detail .atc_files {
    height: 34px;
    width: calc(100% - 100px);
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mailPreview .mailInfo .mailInfoItem .detail span.address {
    cursor: pointer;
    height: 30px;
    float: left;
    background-color: #d0e5f5;
    color: #333;
    padding: 0 8px;
    line-height: 30px;
    position: relative;
    border-radius: 50px;
    margin: 2px 5px 2px 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mailPreview .mailInfo .mailInfoItem .detail span.cue {
    height: 30px;
    float: left;
    color: #999;
    line-height: 30px;
    position: relative;
    margin: 2px 0;
}

.mailPreview .mailInfo .mailInfoItem .showAll {
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 34px;
}

.mailPreview .mailInfo .mailInfoItem .showAll > span {
    height: 100%;
    display: inline-block;
    color: #999;
    padding: 0 10px;
    cursor: pointer;
}

.mailPreview .mailInfo .mailInfoItem .showAll > span:hover {
    color: #666;
}

.mailPreview .mailbody {
    position: relative;
    padding: 10px 20px;
    min-height: 300px;
}

.mailPreview .mailbody>.iframe {
    height: calc(100% - 20px);
    position: absolute;
    width: calc(100% - 40px);
    z-index: 9999;
}

.mailPreview .fastReply {
    padding: 10px 20px;
    position: relative;
    width: 100%;
    height: 130px;
}

.mailPreview .fastReply textarea {
    height: 60px;
    border: 1px solid #e5e5e5;
    width: 100%;
    resize: none;
    padding: 8px;
    line-height: 16px;
    font-size: 12px;
    color: #444;
    display: block;
    margin-bottom: 10px;
    border-radius: 3px;
}

.mailPreview .fastReply .ui.button {
    color: #fff;
    background: #0099CC;
    border-radius: 0;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    font-weight: normal;
    margin: 0;
    font-size: 14px;
    float: right;
    border-radius: 5px;
}

.mailPreview .iframe-move {
    left: -8px;
    width: 8px;
    height: 100%;
    position: absolute;
    border-left: 1px solid #ccc;
    background-color: #f5f5f5;
    cursor: col-resize;
    z-index: 24;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.ui.small.modal.mailTraceModal {
    width: 600px !important;
    margin-left: -300px !important;
    border: 1px solid #ccc;
    height: 600px;
    overflow-y: inherit;
}

.mailTraceModal .mailTraceContent {
    height: 498px;
    overflow-y: auto;
}

.mailTraceModal .mailTraceContent::-webkit-scrollbar {
    width: 3px;
}

.mailTraceModal .ui.button.left {
    float: left;
    top: 8px;
    position: relative;
    margin-left: 3px;
}

.mailTraceModal .mailTraceContent .save.button {
    background: #0099CC !important;
    font-weight: normal;
    padding: 0 16px !important;
    height: 34px;
    line-height: 34px;
    border: 1px solid #0099CC;
    color: #fff;
    font-size: 12px;
    float: right;
}

.mailTraceModal .mailTraceContent span[name='error'] {
    min-height: 34px;
    line-height: 34px;
    width: calc(100% - 70px);
    display: -webkit-inline-box;
    color: #db2828;
}

.mailTraceModal .mailTraceContent .name {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
}

.mailTraceModal .mailTraceContent .footer,
.mailTraceModal .mailTraceContent .content,
.mailTraceModal .mailTraceContent .mail,
.mailTraceModal .mailTraceContent .tree {
    padding-top: 8px;
    padding-right: 10px;
    padding-left: 10px;
    border-top: 1px solid rgba(34,36,38,.15);
}

.mailTraceModal .mailTraceContent .footer:first-child {
    border-top: none;
}

.mailTraceModal .mailTraceContent .footer a {
    cursor: pointer;
}

.mailTraceModal .mailTraceContent .infomation {
    margin: 10px;
    height: 124px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
}

.mailTraceModal .mailTraceContent .infomation .formRow {
    height: 38px;
}

.mailTraceModal .mailTraceContent .infomation .formRow.left {
    width: 50%;
    float: left;
}

.mailTraceModal .mailTraceContent .infomation .formRow .ui.input {
    width: calc(100% - 140px);
    line-height: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inherit;
    text-align: left;
}

.mailTraceModal .mailTraceContent .footer ul {
    list-style: decimal;
    margin: 10px 0;
    padding-left: 30px;
}

.mailTraceModal .mailTraceContent .footer ul li {
    padding: 5px 0;
}

.mailTraceModal .mailTraceContent .mailTraceTable {
    width: 100%;
    border: 1px solid #ccc;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
    padding-top: 30px;
    position: relative;
    background: #fff;
}

.mailTraceModal .mailTraceContent .mailTraceTable .row {
    height: 30px;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #ccc
}

.mailTraceModal .mailTraceContent .mailTraceTable .row .time {
    position: absolute;
    left: 0;
    width: 180px;
    border-right: 1px solid #ccc
}

.mailTraceModal .mailTraceContent .mailTraceTable .row .ip {
    position: absolute;
    left: 180px;
    width: 120px;
    border-right: 1px solid #ccc
}

.mailTraceModal .mailTraceContent .mailTraceTable .row .position {
    position: absolute;
    left: 300px;
    right: 0;
}

.mailTraceModal .mailTraceContent .mailTraceTable .row .item {
    top: 0;
    padding: 0 10px;
    line-height: 30px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.mailTraceModal .mailTraceContent .mailTraceTable .mailTraceHead.row {
    position: absolute;
    top: 0;
    left: 0;
    background: #f5f5f6;
}

.mailTraceModal .mailTraceContent .mailTraceTable .mailTraceHead.row .item {
    color: #444;
}

.mailTraceModal .mailTraceContent .mailTraceTable .mailTraceBody {
    height: 100%;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
}

.ui.small.modal.delayedTx {
    width: 600px !important;
    margin-left: -300px !important;
    border: 1px solid #ccc;
    height: 200px;
    overflow-y: inherit !important;
}

.ui.small.modal.delayedTx .delayedTxContent {
    height: 100px;
    padding: 10px;
    position: relative;
}

.ui.small.modal.delayedTx .delayedTxContent .delayedTxItem {
    height: 30px;
    position: relative;
    padding-left: 65px;
    top: 25px;
}

.ui.small.modal.delayedTx .delayedTxContent .delayedTxItem .delayedTxTime {
    float: left;
    padding-right: 15px;
}

.ui.small.modal.delayedTx .delayedTxContent .delayedTxItem .ui.dropdown > .text {
    position: relative;
    top: -10px;
}

.ui.small.modal.delayedTx .delayedTxContent .delayedTxItem .ui.dropdown .menu .item {
    font-size: 12px;
    padding: 10px !important;
}

.ui.small.modal.delayedTx .delayedTxContent .delayedTxItem .ui.dropdown {
    line-height: 30px;
    height: 30px;
    min-height: 30px;
    width: 295px;
}

.ui.small.modal.delayedTx .delayedTxContent .delayedTxItem .ui.input input {
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    line-height: 30px;
    border: 1px solid #ccc !important;
    width: 200px;
}

.ui.small.modal.delayedTx .delayedTxContent .delayedTxReceiver {
    position: absolute;
    top: 50px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding-left: 65px;
}

.ui.small.modal.delayedTx .delayedTxContent .delayedTxItem .caption,
.ui.small.modal.delayedTx .delayedTxContent .delayedTxReceiver .caption {
    height: 30px;
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    overflow: hidden;
    line-height: 30px;
    color: #444;
}

.ui.small.modal.delayedTx .delayedTxContent .delayedTxReceiver .delayedTxReceiverArea {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.delayedTx .actions .message {
    display: inline-block;
    line-height: 30px;
    font-size: 12px;
    color: #666;
    margin-right: 8px;
}

.delayedTx .actions .message span {
    color: #0099CC;
    padding: 0 2px;
    font-weight: bold;
}

.mailLoading {
    position: absolute;
    z-index: 5005;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    display: block;
    background: #fff;
}

.mailLoading > .spinner.loading.icon {
    font-size: 64px;
    position: absolute;
    top: 50%;
    margin-top: -32px;
    left: 50%;
    margin-left: -32px;
}

.mailRightMenu {
    position: fixed;
    z-index: 85000;
    width: auto;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #e5e5e5;
}

.mailRightMenu .item {
    cursor: pointer;
    padding: 0 16px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #666;
}

.mailRightMenu .item.border {
    border-top: 1px solid #e5e5e5;
}

.mail-loading {
    background-color: #fff;
    border-radius: 20px;
    width: 200px;
    height: 200px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.mailBox .mainMail .ui.pointing.dropdown > .menu:after {
    left: 30px !important;
}

.formRow .ui.checkbox.relative {
    position: relative;
    padding-right: 10px;
}

.formRow .ui.checkbox.relative:last-child {
    padding-right: 0;
}

.formRow .ui.checkbox.relative label {
    padding-top: 5.5px;
}

.formRow .group-check {
    position: absolute;
    top: 0;
}

.formRow span.title {
    line-height: 30px;
    padding: 0 20px;
    color: #666;
}

/* mailCard */
.mailCard {
    width: 314px;
    height: 123px;
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    left: 100px;
    top: 100px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    /*display: none;*/
}

.mailCard .content {
    position: relative;
    height: 90px;
    border-bottom: 1px solid #ccc;
    padding: 20px 10px 20px;
    padding-left: 60px;
}

.mailCard .content .head {
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    line-height: 40px;
    text-align: center;
    background: #76dac8;
    color: white;
    font-size: 18px;
    left: 10px;
    top: 25px;
}

.mailCard .content .name {
    height: 30px;
    width: 100%;
    line-height: 30px;
    color: #666;
    font-weight: bold;
    position: relative;
}

.mailCard .content .name span {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
}

.mailCard .content .name i {
    cursor: pointer;
    margin: 0;
    height: 14px;
    width: 14px;
    vertical-align: top;
    font-size: 12px;
    line-height: 30px;
    margin-top: 1px;
}

.mailCard .content .name i:before {
    top: 0;
}

.mailCard .content .detail {
    height: 20px;
    width: 100%;
    line-height: 20px;
    color: #666;
    font-size: 12px;
    padding-right: 60px;
    position: relative;
}

.mailCard .content .detail div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mailCard .content .detail span {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    color: #333;
    font-weight: normal;
    cursor: pointer;
    background-color: #d0e5f5;
    border-radius: 4px;
    padding: 0 5px;
}

.mailCard .tool {
    height: 30px;
    overflow: hidden;
}

.mailCard .tool .item {
    width: 78px;
    float: left;
    border-right: 1px solid #ccc;
    background: #f5f5f6;
    color: #666;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.mailCard .tool .item.disabled {
    color: #999;
}

.mailCard .tool .item:last-child {
    border: none;
}

.mailCard .tabtool {
    height: 20px;
    position: absolute;
    right: 8px;
    top: 4px;
    width: 40px;
    overflow: hidden;
}

.mailCard .tabtool .item {
    height: 20px;
    width: 20px;
    cursor: pointer;
    float: left;
    line-height: 20px;
    text-align: center;
    color: #666;
}

.mailCard .tabtool .item.right {
    float: right;
}

.mailCard .tabtool .item .icon {
    margin: 0;
}

.TRACKIMG {
    width: 0px;
    height: 0px;
}

.mail-pre {
    white-space: pre-line;
}

.mailPreview .mailBottomAttach .attachItem {
    height: 160px;
    width: 130px;
    min-width: 130px;
    margin: 10px 10px 0 0;
    padding: 0;
    padding-top: 120px;
}

.mailPreview .editorAttach.mailBottomAttach .attachItem .tag {
    right: auto;
    top: 0;
    left: 0;
    left: 50%;
    margin-left: -70px;
    height: 120px;
    width: 140px;
    max-width: 140px;
    display: block;
    line-height: 160px;
    text-align: center;
    background-size: 100% 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mailPreview .editorAttach.mailBottomAttach .attachItem .tag img {
    max-width: 120px;
    max-height: 120px;
}

.mailPreview .editorAttach.mailBottomAttach .attachItem .caption {
    left: 5px;
    bottom: 0;
    top: auto;
    right: 5px;
    padding: 0 5px;
}

.mailPreview .editorAttach.mailBottomAttach .attachItem .attachtool {
    width: 100%;
    height: 30px;
    right: 0;
    top: 0;
    position: absolute;
    display: none;
}

.mailPreview .editorAttach.mailBottomAttach .attachItem:hover .attachtool {
    display: block;
}

.mailPreview .editorAttach.mailBottomAttach .attachItem .attachtool .attachtoolitem {
    height: 30px;
    line-height: 30px;
}

.mailPreview .editorAttach.mailBottomAttach .attachItem .attachtool .attachtoolitem[btn="search"] {
    float: left;
}

/* 邮件推送 */
.SendInformation .toolBox .btn {
    color: #fff;
    border: 1px solid #09c;
    background-color: #09c;
    font-size: 12px;
    border-radius: 0px;
    padding: 7px 10px;
    height: 30px;
    line-height: 14px;
    float: right;
    margin-left: 10px;
    border-radius: 4px;
}

.SendInformation .toolBox .tool.ui.menu {
    float: right;
    margin-right: 0;
    margin-left: 10px;
}

.SendInformation .toolBox .tool.ui.menu .item .input {
    width: 180px;
}

.SendInformation .toolBox .tool.ui.menu .item .input.max {
    width: 240px;
}

.SendInformation .toolBox .tool.ui.menu .item .input input {
    padding-left: 10px;
    border-radius: 0;
    height: 27px;
    min-height: 27px;
}

.SendInformation .toolBox .tool.ui.menu .item .column {
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #ccc;
    padding: 0 5px;
}

.SendInformation .toolBox .tool.ui.menu .item .column i.icon {
    margin: 0;
}

.SendInformation .mailGrid .mailcontent {
    padding: 10px;
}

.SendInformation .mailGrid .mailcontent .tabular.menu {
    height: 30px;
    min-height: 30px;
    margin: 0;
}

.SendInformation .mailGrid .mailcontent .tabular.menu .item.active {
    border-top: 1px solid red;
    border-radius: 0 !important;
    font-weight: normal;
}

.SendInformation .tool.ui.menu .item .ui.dropdown.send .menu,
.PushInformation .tool.ui.menu .item .ui.dropdown.send .menu {
    width: auto;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    min-width: max-content;
    margin: 0;
}

.SendInformation .mailGrid .mailcontent .tabular.menu .item {
    height: 30px;
}

.SendInformation .mailGrid .mailcontent .tab.segment {
    border: none;
}

.SendInformation .mailGrid .mailcontent .explain {
    padding: 10px;
    color: #090;
    background-color: #F2FFEA;
}

.SendInformation .mailGrid .mailcontent .more {
    padding: 5px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.SendInformation .mailitem.mailhead {
    border: 1px solid #e5e5e5;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: unset;
}

.SendInformation .mailitem.mailhead:not(:first-child) {
    border-top: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.SendInformation .mailitem.mailhead:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.SendInformation .mailitem.mailhead .item.push {
    width: 14%;
    position: relative;
}

.SendInformation .mailitem.mailhead .item.Statistics {
    width: 14%;
    position: relative;
}

.SendInformation .mailitem.mailhead .item.Invalid {
    width: 50%;
    position: relative;
}

.SendInformation .mailitem.mailhead .item.Statistics.max {
    width: 24%;
}

.SendInformation .mailitem.mailhead .item.track {
    width: 10%;
    position: relative;
}

.SendInformation .mailitem.mailhead .item.push:first-child {
    width: 16%;
}

.SendInformation .mailGrid .mailTable {
    margin-bottom: 10px;
}

.SendInformation .ui.tabular.menu ~ .bottom.attached.segment {
    height: calc(100% - 30px);
    overflow-y: auto;
}

.SendInformation .ui.tabular.menu ~ .bottom.attached.segment::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.SendInformation .mailLoading {
    top: 40px;
}

.SendInformation .mailcontent .mailitem.mailhead .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    float: left;
}

.mailBox .rightList .tool.ui.menu .item .ui.dropdown.send {
    border: none;
    box-shadow: none;
    padding: 0 20px 0 10px;
    height: 30px;
    line-height: 30px;
    background: none;
    position: relative;
    display: inline-block;
    width: auto;
    min-height: 30px;
    color: #333;
}

.SendInformation .mailGrid {
    min-height: calc(100% - 40px) !important;
    height: calc(100% - 40px) !important;
    max-height: calc(100% - 40px) !important;
}

.PushInformation .mailitem .item.pushlist {
    width: 15%;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    display: block;
}

.PushInformation .mailitem .item.pushlist.min {
    width: 5%;
    text-align: center;
}

.PushInformation .mailitem .item.pushlist.max {
    width: 65%;
    display: flex;
}

.PushInformation .ui.checkbox {
    top: 4px;
    left: 5px;
}

.PushInformation .ui.checkbox label:before {
    top: 0 !important;
}

.protectModal .protectModalContent .rightcontent .ui.button.lead {
    padding: 5px;
    margin-left: 5px;
    background: #0099CC !important;
    font-weight: normal;
    border: 1px solid #0099CC;
    color: #fff;
    text-shadow: none;
    font-size: 12px;
}

.protectModal .protectModalContent .rightcontent .example {
    display: inline-flex;
    position: relative;
    width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.protectModal .protectModalContent .rightcontent .example a {
    cursor: pointer;
}

.mailRemark, .mailCustomer {
    width: 314px;
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    left: 100px;
    top: 100px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    border: 1px solid #e5e5e5;
    padding: 10px;
    /*display: none;*/
}

.mailCustomer {
    width: auto;
}

.mailCustomer .name {
    line-height: 30px;
    height: 30px;
    cursor: pointer;
}

.mailRemark .mailremark {
    background-size: 30px;
    width: 30px;
    height: 30px;
}

.mailRemark .content {
    padding-left: 38px;
}

.mailRemark .content .head {
    font-size: 15px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
}

.mailRemark .content .name {
    padding: 5px 0;
}

.mailRemark .content .detail {
    padding-top: 5px;
    float: right;
}

.mailRemark .content .detail > a {
    cursor: pointer;
    padding-left: 10px;
}

.mail-remark-area {
    width: 100%;
    border-radius: 4px;
    resize: none;
    line-height: normal;
    height: 80px;
    font-size: 12px;
    padding: 5px;
}

.mail-remark-span {
    display: block;
    text-align: right;
    line-height: 30px;
    height: 30px;
    color: #666;
}

.mail-remark-span.error {
    color: red;
}

.cursor {
    cursor: pointer;
}

@media screen and (max-width: 1124px) {
    .mailBox .rightList .tool.ui.menu {
        margin-right: 4px;
    }

    .mailBox .rightList .tool.ui.menu .item .ui.dropdown {
        padding-left: 4px;
    }

    .mailBox .rightList .tool.ui.menu .item .input input {
        width: 120px;
    }
}

@media screen and (max-width: 900px) {
    .mailPreview {
        width: 500px !important;
    }
}

@media screen and (max-width: 600px) {
    .mailPreview {
        position: absolute;
        width: 100% !important;
    }
}