/*reset.css*/
body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select {
    margin: 0;
    padding: 0
}

.bodyStyle {
    font: 12px "宋体", "Arial Narrow", HELVETICA;
    background: #fff;
    -webkit-text-size-adjust: 100%
}

a {
    color: #172c45;
    text-decoration: none
}

em {
    font-style: normal
}

li {
    list-style: none
}

img {
    border: 0;
    vertical-align: middle
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

input[type="text"] {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    box-sizing: border-box;
}

input[type="text"]:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    -webkit-user-select: auto !important;
}

footer button {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}

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

header, .fixed-full-layout .header, .new-autograph-header {
    font-size: 14px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    background-color: #eee;
    color: #666;
    display: flex;
    width: 100%;
}

header > div, .fixed-full-layout .header, .new-autograph-header {
    background-color: #eee;
    box-shadow: 2px 2px 2px #888888;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 0px;
}

header .header-center {
    width: 100px !important;
    position: absolute !important;
    left: 50% !important;
    margin-left: -50px !important;
    background-color: transparent !important;
    box-shadow: 0 0 0 !important;
}

header .header-center .disable {
    pointer-events: none;
    user-select: none;
    cursor: not-allowed !important;
    opacity: 0.2;
}

.more-page .about-header {
    display: block;
}


header .title,
.more-page .about-header .title,
.check-Sign .head .title {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

header .left {
    float: left;
}

header .right {
    float: right;
}


/*头部开始*/
header .base {
    display: flex;
}


header .painter .title,
header .annotation .title,
header .revision .title,
header .new-autograph-header .title,
.property-header .title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

/*头部主入口*/
header .base > a, div[class*='header'] > a {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
}

header .base a:hover {
    color: #172c45 !important;
}

header .base .div-icon {
    min-width: 40px;
    max-width: 160px;
    position: absolute;
    right: 0;
}

header .base .div-icon.expand {
    position: absolute;
    left: 0;
}

header .base .savebtn {
    min-width: 40px;
    max-width: 320px;
    position: absolute;
    right: 0;
}

header .savebtn a.disabled img:nth-child(1),
header .savebtn a img:nth-child(2) {
    display: none;
}

header .savebtn a.disabled img:nth-child(2) {
    display: inline-block;
}

header .base .a-icon {
    display: inline-block;
    text-align: center;
}

header .base .span-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
    display: inline-block;
}

header .about .content {
    margin-top: 40px;
    height: 100%;
    width: 100%;
}

/*头部主入口结束*/


/*头部结束*/

/*悬浮菜单开始*/
.div-extra {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 40px;
    z-index: 2;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, .15), -2px -2px 15px rgba(0, 0, 0, .15);
    border-radius: 5px;
    overflow: hidden;
}

.div-extra .ul-more {
    font-size: 14px;
    text-align: left;
    width: 120px;
    background-color: #fff;
    color: #666;
    display: none;
}

.div-extra .ul-more > li {
    line-height: 40px;
}

.div-extra .ui-more-item {
    display: flex;
    align-items: center;
    color: #000;
}

.div-extra li:last-child span {
    border-bottom: none;
}

.div-extra .ui-more-item img {
    width: 20px;
    height: 20px;
    margin: 0 8px;
}

.div-extra .ul-more span {
    flex: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.div-extra .ul-more a:hover {
    color: #666;
    text-decoration: none;
}

.div-extra .ul-more a:focus {
    outline: 0;
}

.div-extra .ul-more i {
    display: inline-block;
    width: 16px;
    text-align: center;
}

.div-extra #div-placeholder {
    position: absolute;
    top: 8px;
    right: 5px;
    font-size: 14px;
    color: #888888;
    display: none;
}

.div-extra .div-search-content {
    width: 240px;
    background-color: #eee;
    padding: 5px;
}

.div-extra .div-search-control {
    text-align: left;
    margin-top: 5px;
}

.div-extra .div-search-control button {
    margin-right: 10px;
}

.div-extra .div-search-content input {
    box-sizing: border-box;
    padding-right: 50px !important;
}

/*悬浮菜单结束*/


/*工具按钮*/
.tools {
    position: absolute;
    top: 40px;
    bottom: 100px;
    left: 0;
    right: 0;
}

/* page */
.tools .side {
    width: 56px;
    text-align: center;
    position: fixed;
    right: 0;
    bottom: 100px;
    z-index: 2;
}

.tools .side > button {
    border-radius: 50%;
    padding: 1px !important;
    width: 40px;
    height: 40px;
    line-height: 1 !important;
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    margin: 3px 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

.tools .page {
    position: fixed;
    bottom: 100px;
    width: auto;
    z-index: 2;
    left: 5%;
    height: 30px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    padding: 0 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tools .first {
    width: 24px;
    height: 32px;
    background: url("../image/to_top.png") no-repeat center;

}

.tools .last {
    width: 24px;
    height: 32px;
    background: url("../image/to_bottom.png") no-repeat center;
}

/* page */

body > footer {
    font-size: 16px;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    color: #666;
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    border-top: 1px solid #ddd;
}

body > footer > div {
    height: 100%;
    background-color: #eee;
    position: absolute;
    justify-content: space-around;
    width: 100%;
    bottom: 0px;
}


body > footer > div > button.addBackground {
    background-color: #bdbdc1;
    border-color: #bdbdc1;
}

body > footer > .base > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 30px;
}

body > footer > .base > a:hover {
    text-decoration: none;
}

body > footer > .base i {
    text-align: center;
}


.expand-tab {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background: white;
    z-index: 3;
    top: 0px;
    bottom: 0;
    display: none;
}


.main-right .show {
    margin-top: 0px;
}

.main-right .show > ul {
    margin: 10px;
}

.main-right .show > #bookmark {
    line-height: normal;
    border-bottom: 1px solid #ccc;
    padding: 10px 0 10px 10px;
    line-height: 16px;
}

#bars {
    display: inline-block;
    width: 45px;
    text-align: center;
    height: 45px;
    line-height: 45px;
    font-size: 34px;
    color: #38935f;
}

#bars:hover {
    color: #48b978;
}

.border {
    border-top: 1px solid #fff;
}

.left-list .li-div {
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #fff;
}

.left-list .li-div > a {
    display: inline-block;
    width: 100%;
    height: auto;
}

.left-list .li-div > a:hover {
    text-decoration: none;
}

/*.main-left .a-icon {*/
/*    display: inline-block;*/
/*    width: 100%;*/
/*    height: 50px;*/
/*    line-height: 50px;*/
/*    text-align: center;*/
/*}*/

/*ztree打开*/
/*.ztree li span {*/
/*    font-size: 16px;*/
/*}*/

.ztree li span.button.bottom_open {
    background-position: 0;
    background-image: url('../../../image/treeopen.png');
}

.ztree li span.button.bottom_close {
    background-position: 0;
    background-image: url('../../../image/treeclose.png');
}

.ztree li span.button.center_open {
    background-position: 0;
    background-image: url('../../../image/treeopen.png');
}

.ztree li span.button.center_close {
    background-position: 0;
    background-image: url('../../../image/treeclose.png');
}

.ztree li span.button.noline_open {
    background-position: 0;
    background-image: url('../../../image/treeopen.png');
    margin-top: 1px;
}

.ztree li span.button.noline_close {
    background-position: 0;
    background-image: url('../../../image/treeclose.png');
    margin-top: 1px;
}

.about-content, .expand-tab.about .about-content {
    position: absolute;
    height: 100%;
    width: 100%;
}

.about-content .about-view {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    padding: 5px 0;
    font-size: 14px;
}

.about-view > .view-up {
    height: 110px;
    text-align: center;
    padding: 50px 0;
    margin-bottom: 20px;
}

.about-view > .view-up > p {
    font-size: 24px;
    font-weight: bold;
}

.about-view > .view-up > button {
    margin-top: 30px;
}

.view-down > div {
    overflow: hidden;
    display: inline-block;
}

.about-view > .view-down {
    height: 70px;
    text-align: center;
    padding: 60px;
}

.view-down > div > img {
    float: left;
}

.view-down > div > div {
    float: left;
    padding: 0 8px;
    text-align: left;
}

.view-down .down-up {
    font-size: 15px;
    font-weight: bold;
}

.view-down .down-down {
    color: #888888;
}

.about-content .about-bottom {
    height: 80px;
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.about-bottom > div {
    text-align: center;
}

.about-bottom .open-allow {
    font-size: 13px;
    text-decoration: underline;
}

.open-main, .expand-tab.about .about-main {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 4;
    background: white;
    display: none;
}

.more-page div[class*='-content'] {
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    font-size: 12px;
}

.more-page .new-autograph .new-autograph-content {
    bottom: 50px;
    overflow: hidden;
}

.open-main .content-title {
    padding: 10px 0;
    font-size: 12px;
}

.content-show > div {
    border-bottom: 1px solid #666;
    padding: 10px 0;
}

.open-main p {
    margin: 5px 0;
}

.property nav {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.property .property-header {
    box-shadow: none;
}

.property-header .a-icon {
    position: relative;
    z-index: 2;
}

.property-header .title {
    z-index: 1;
}

.property .property-show {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    overflow: hidden;
    font-size: 14px;
}

.property .property-show > div {
    padding-left: 15px;
}

.property .flex-box {
    padding-right: 15px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    line-height: 40px;
}

.property .flex-box .explain-label {
    width: 100px;
}

.property nav > a {
    display: block;
    overflow: hidden;
    font-size: 14px;
    line-height: 40px;
    background-color: #eee;
    color: #666;
    border: 3px solid #fff;
    box-sizing: border-box;
    width: 25%;
    float: left;
    text-align: center;
}

.property nav > a:hover {
    text-decoration: none;
    background-color: #eee;
    color: #666;
}

.property .nav-active {
    color: red !important;
}

.property .property-show > div > div {
    display: flex !important;
    justify-content: space-between;
}

.layui-tree {
    display: block !important;
}

.explain .explain-label {
    display: inline-block;
    width: auto;
    white-space: pre;
    flex-shrink: 0;
}


.explain .explain-content {
    color: #666;
    width: 100%;
}

.metadata > div {
    display: block !important;
}


/*header .autograph, header .painter, header .annotation, header .revision {
    display: flex;
}*/
header a {
    width: 40px;
    height: 40px;
    text-align: center;
    display: inline-block;
}

header a.close {
    color: red;
}

header a.check {
    color: chartreuse;
}

header a.check:hover, header a.close:hover {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

header .edit {
    z-index: 3;
    text-align: right;
}

/*header .disabled {*/
/*    opacity: .2!important;*/
/*}*/

span.fontClass {
    display: inline-block;
    float: left;
    height: 40px;
    width: 40px;
}

/*高亮*/
.annot-content {
    font-size: 14px;
    font-weight: normal;
    width: 100%;
    background-color: #eee;
    position: absolute;
    /*top: 43px;*/
    left: 0px;
    box-sizing: border-box;
    z-index: 4;
}

.annot-content .color-content {
    height: 50px;
    text-align: center;
    display: none;
}

.annot-content .color-content > a {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 10px;
}

.annot-content .color-content > .active {
    border: 2px solid #888888;
}


/*矩形 粗细 不透明*/
.underscore-content {
    height: 260px;
}

.width-content, .opacity-content, .pcolor-content {
    display: none;
    padding: 10px;
}

.annot-content .underscore-content-color > a {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 13px;
}

.underscore-content-color {
    height: 50px;
    text-align: center;
}

.underscore-content-color > .active {
    border: 2px solid #888888;
}


/*粗细滑动条*/
.underscore-content {
    height: 260px;
}

.width-content > p, .underscore-content-size {
    text-align: center;
    line-height: 16px;
}

.width-content, .opacity-content, .pcolor-content {
    display: none;
    text-align: left;
}

.width-content > .underscore-content-size > div {
    display: inline-block;
}

.annot-content > .pcolor-content > p, .lineType-content > p {
    text-align: left;
    line-height: 16px;
}

.progress-lamp {
    margin-left: 10px;
}


/*不透明度*/
.opacity-content > .underscore-content-transparent {
    display: flex;
    justify-content: space-around;
    padding: 5px 3px;
    height: 75px;
}

.underscore-content-transparent > a {
    /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    line-height: 30px;
}

.underscore-content-transparent > a:hover {
    text-decoration: none;
}

.underscore-content-transparent span {
    text-align: center;
}

.transparent1 {
    display: inline-block;
    width: 45px;
    height: 45px;
    background-color: rgba(50, 255, 0, 0.25);
    border-radius: 50%;
}

.transparent2 {
    display: inline-block;
    width: 45px;
    height: 45px;
    background-color: rgba(50, 255, 0, 0.50);
    border-radius: 50%;
}

.transparent3 {
    display: inline-block;
    width: 45px;
    height: 45px;
    background-color: rgba(50, 255, 0, 0.75);
    border-radius: 50%;
}

.transparent4 {
    display: inline-block;
    width: 45px;
    height: 45px;
    background-color: rgba(50, 255, 0, 1);
    border-radius: 50%;
}

/*线型*/
.line-content > .color-wrapper, .line-content > .size-wrapper, .lineType-content {
    padding: 10px;
}

.lineType-content {
    display: none;
}

.lineType-content > .footer-delete-content-linetype {
    height: auto;
    text-align: center;
    line-height: 20px;
}

/*箭头*/
.arrowType-content {
    display: none;
}

.annot-content > .arrowType-content {
    padding: 10px;
}

.arrowType-content > p, .pcolor-content > p, .width-content > p, .lineType-content > p, .opacity-content > p, .handwriting-content > .color-wrapper > p {
    text-align: left;
    line-height: 16px;
}

.red-border {
    border-bottom-color: red !important;
}

.footer-delete-content-arrow {
    display: flex;
    justify-content: space-around;
    padding: 5px 3px;
}

.arrowType-content {
    height: 42px !important;
}

.arrowType-content > .footer-delete-content-arrow {
    line-height: 16px !important;
}

.red-color-start, .red-color-end {
    color: red !important;
}


/*笔迹 文本 橡皮*/
.handwriting-content {
    display: none;
}

.color-wrapper {
    text-align: left;
}

.handwriting-content > .color-wrapper, .handwriting-content > .size-wrapper, .handwriting-content > .font-wrapper {
    padding: 10px;
}


.text-content-color {
    height: 50px;
    text-align: center;
}

.text-content-color > a {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 13px;
}

.text-content-color > .active {
    border: 2px solid #888888;
}

.handwriting-content > .size-wrapper > a {
    display: inline-block;
}

.handwriting-content > .size-wrapper {
    text-align: left;
    line-height: 16px !important;
    height: 16px;
}

.text-content-color > .text-yellow {
    background-color: #ffff00;
}

.text-content-color > .text-green {
    background-color: #66cc66;
}

.text-content-color > .text-blue {
    background-color: #408dff;
}

.text-content-color > .text-pink {
    background-color: #ff3399;
}

.text-content-color > .text-red {
    background-color: #ff0000;
}

.text-content-color > .text-black {
    background-color: #999999;
}


header .painter, header .annotation, header .revision {
    display: block;
    overflow: hidden;
}

header .autograph, header .painter, header .annotation, header .revision {
    z-index: 4;
    text-align: right;
}

footer > div {
    display: flex;
}

footer .edit {
    z-index: 2;
    display: flex;
    overflow: hidden;
}

footer .edit a {
    font-size: 14px;
    background: #efefef;
    height: 100%;
    font-weight: bold;
    text-align: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

footer .edit a img {
    display: block;
    margin: 0 auto;
}

footer .edit a:active {
    background: #e7e4e7;
}


footer .autograph, footer .painter, footer .annotation, footer .revision {
    z-index: 3;
}

footer .autograph canvas {
    border: 1px solid #888888;
}

.more-page .more-autograph {
    z-index: 5;
}

.more-page .new-autograph {
    z-index: -1;
}

.more-page .active, footer .active {
    z-index: 6;
}

.autograph-content {
    overflow: scroll;
}

.autograph-content .line-wrapper {
    width: 100%;
    height: 90px;
    overflow: hidden;
    font-size: 28px;
    border-bottom: 1px solid #aaa;
}

.autograph-content .line-scroll-wrapper {
    white-space: nowrap;
    height: 90px;
    clear: both;
}

.autograph-content .line-btn-delete {
    float: left;
    width: 90px;
    height: 90px;
}

.autograph-content .line-btn-delete button {
    width: 100%;
    height: 100%;
    background: red;
    border: none;
    font-size: 24px;
    font-family: 'Microsoft Yahei';
    color: #fff;
}

.autograph-content .line-normal-wrapper {
    display: inline-block;
    height: 100%;
    box-sizing: border-box;
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

.autograph-content .line-normal-icon-wrapper {
    float: left;
    width: 60px;
    height: 100%;
    margin-right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.autograph-content .line-normal-icon-wrapper img {
    width: 120px;
    height: 120px;
}

.autograph-content .line-normal-avatar-wrapper {
    width: 100px;
    height: 124px;
    float: left;
    margin-left: 12px;
}

.autograph-content .line-normal-avatar-wrapper img {
    width: 92px;
    height: 92px;
    border-radius: 60px;
}

.autograph-content .line-normal-left-wrapper {
    float: left;
    overflow: hidden;
    height: 100%;
}

.autograph-content .line-normal-info-wrapper {
    float: left;
    margin-left: 10px;
}

.autograph-content .line-normal-user-name {
    height: 28px;
    line-height: 28px;
    color: #4e4e4e;
    margin-top: 7px;
}

.autograph-content .line-normal-msg {
    height: 28px;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #4e4e4e;
    margin-top: 11px;
}

.autograph-content .line-normal-time {
    height: 28px;
    line-height: 28px;
    color: #999;
    margin-top: 11px;
}

.new-autograph-content {
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}

.new-autograph-content canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.new-autograph-content > footer {
    position: absolute;
    justify-content: space-between;
}


footer .new-autograph {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
}

footer .painter {
    display: flex;
    justify-content: space-between;
}

footer .painter .left {
    float: left;
}

footer .painter .right {
    float: right;
}


footer .annotation, footer .revision {
    align-items: center;
}

footer .painter > div > a {
    display: inline-block;
    padding: 0 10px;
}

footer .painter .shade {
    position: absolute;
    width: 100%;
    bottom: 51px;
    background: rgba(238, 238, 238, 0.5);
}

footer .painter .shade > i {
    position: absolute;
    text-align: center;
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
}


footer .painter i, footer > .new-autograph i {
    vertical-align: text-bottom;
}

footer > .new-autograph > div a {
    display: inline-block;
    padding: 0 10px;
}

footer > .new-autograph .fa-sort-up {
    display: inline-block;
    height: 8px;
}

footer .painter .fa-sort-up {
    display: inline-block;
    height: 8px;
}

footer .annotation > .annotation-more {
    background: rgba(249, 249, 249, 1);
    color: #666;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #ddd;
    z-index: 3;
    box-sizing: border-box;
    display: none;
    line-height: 1;
    text-align: left;
}

footer .BGColor {
    color: #cd0200;
    /*text-decoration: underline;*/
    background: none;
    -webkit-tap-highlight-color: transparent;
}

footer .painter .BGColor {
    color: #006599;
}

body .about-header {
    display: block;
}

.edit-name > img,
.fa-eraser > img,
.revoke > img,
.forward > img,
.painter > img,
.eraser > img {
    display: none;
}

.edit-name.BGColor > img.active, .edit-name:not(.BGColor) > img:not(.active),
.fa-eraser.BGColor > img.active, .fa-eraser:not(.BGColor) > img:not(.active),
.revoke.disabled > img.active, .revoke:not(.disabled) > img:not(.active),
.forward.disabled > img.active, .forward:not(.disabled) > img:not(.active),
.painter.BGColor > img.active, footer .painter:not(.BGColor) > img:not(.active),
.eraser.BGColor > img.active, footer .eraser:not(.BGColor) > img:not(.active) {
    display: inline-block;
}

header .BGColor {
    color: #cd0200;
    /*text-decoration: underline;*/
    background: none;
    -webkit-tap-highlight-color: transparent;
}

.annotation .edit-note-more {
    width: 30px;
    height: 50px;
}

.annotation .edit-note-more img {
    margin: 0 auto;
}

.annotation button,
.revision button {
    margin: 10px 10px 0 0;
    padding: 6px 12px;
    background: #ccc;
    border-color: #ccc;
    color: rgba(0, 0, 0, 0.7);
}

.annotation button.addBackground,
.revision button.addBackground {
    background: rgba(0, 101, 153, 1);
    color: #fff;
    border-color: rgba(0, 101, 153, 1);
}

.annotation > button,
.revision > button {
    margin: 0;
}

.annotation-more button:first-child {
    margin-left: 0;
}

.annotation-more > div {
    padding: 15px;
}

.annotation-more .tips {
    line-height: 16px;
}

.painter .painter-extra {
    font-size: 14px;
    font-weight: normal;
    width: 100%;
    background-color: #eee;
    position: absolute;
    bottom: 50px;
    padding: 10px 0 0;
    box-sizing: border-box;
}

.painter .painter-eraserList {
    font-size: 14px;
    font-weight: normal;
    width: 100%;
    height: 100px;
    background-color: #eee;
    position: absolute;
    bottom: 50px;
    padding: 10px 0px;
    box-sizing: border-box;
    text-align: center;
}

.painter .painter-eraserList .painter-eraserBtn > .active {
    color: #cd0200
}

.painter .painter-size {
    display: flex;
    justify-content: space-around;
}

.painter .painter-size > a {
    display: block;
    width: 16.66%;
    float: left;
    line-height: 30px;
    text-align: center;
}

.painter .painter-size > a span {
    display: block;
}

.painter .painter-size > .active {
    color: #cd0200
}

.painter .painter-size > a:hover {
    text-decoration: none;
}

.painter .painter-size i {
    text-align: center;
}

.painter .painter-color {
    text-align: center;
}

.painter .painter-color > a {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 10px;
}

footer a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 20px;
}


footer a:hover {
    text-decoration: none;
}

footer a i {
    text-align: center;
}

footer .painter > a {
    width: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}


/*layer*/
.write-name-up {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 20px 10px;
    align-items: flex-start;
    box-sizing: border-box !important;
}

.write-name-up .btn-wrap {
    width: 50%;
    height: 80px;
    position: relative;
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.write-name-up .btn-wrap canvas {
    border: 1px solid #D2D2D2;
    border-radius: 5px;
}

.write-name-up .btn-wrap:nth-child(odd) {
    padding-right: 10px;
}

.write-name-up .btn-wrap:nth-child(even) {
    padding-left: 10px;
}

.btn-wrap > .close {
    width: 20px;
    height: 20px;
    position: absolute;
    background-image: url("../../../image/svg/close-white.svg");
    background-size: 40% 40%;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #FF0000;
    border-radius: 50%;
    display: none;
    z-index: 10;
    top: 5px;
}

.btn-wrap:nth-child(odd) .close {
    right: 15px;
}

.btn-wrap:nth-child(even) .close {
    right: 5px;
}

.write-name-down,
.write-name-cancel {
    position: relative;
    z-index: 10;
    display: flex;
    height: 40px;
    padding: 10px 20px;
    box-shadow: -1px 0 10px rgb(0 0 0 / 15%);
}

.write-name-down .control {
    flex: 1;
    font-size: 14px;
}

.write-name-down .btn-wrap-del {
    margin-right: 10px;
}

.write-name-down .btn-wrap-add {
    margin-left: 10px;
}

.write-name-down span,
.wrap-close {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    background: #EEEEEE;
    color: #000;
}

.write-name-down .btn-wrap-del span {
    border-color: #FF0500;
    color: #FF0500;
    background: #fff;
}

.write-name-cancel {
    text-align: center;
    display: none;
}

body .layui-m-layer {
    z-index: 5;
}

.check-Sign {
    width: 100%;
    height: 100%;
    z-index: 3;
    display: none;
    position: absolute;
    overflow: auto;
    background: white;
    top: 0px;
}

.check-Sign span {
    color: black;
}

.check-Sign .error {
    color: red;
}

.check-Sign .head {
    font-size: 18px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    background-color: #eee;
    color: #666;
    position: absolute;
    width: 100%;
    box-shadow: 2px 2px 2px #888888;
    display: block;
}

.head > a {
    display: inline-block;
}

.head > a, .head > div {
    padding: 0 10px;
}

.check-Sign .content {
    z-index: 3;
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    padding: 5px;
    font-size: 14px;
}

.check-Sign .content-item {
    padding: 15px 5px;
    border-bottom: 1px solid #666;
}

.check-Sign .content-item > div {
    padding: 3px 0;
}

.check-Sign .name- {
    overflow: hidden;
}

.check-Sign .name- > div:nth-child(1) {
    float: left;
}

.check-Sign .name- > div:nth-child(2) {
    float: right;
}

.check-Sign .name- > div > span {
    margin: 0 3px;
    font-size: 16px;
    font-weight: bold;
}

.check-Sign .name- button {
    border-radius: 4px;
    margin: 0 3px;
}

.name- > div:first-child {
    min-width: 55%;
    max-width: 65%;
}

.check-Sign .valid {
    color: green;
}

.check-Sign .invalid {
    color: red;
}

.check-Sign .unknown {
    color: #999;
}

.check-Sign a:hover {
    color: #172c45;
    text-decoration: none;
}

.describe {
    font-weight: bold;
}

.describe- {
    color: #999;
}

.more- > a {
    text-decoration: underline;
    color: blue;
}

.content-item > div {
    margin: 10px 0;
}

/* 文档属性 */
.property-header {
    position: relative;
    overflow: hidden;
}

.property-header .left {
    float: left;
}

.property-header .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 压缩包 */
.compress-container {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    z-index: 4;
    background: #fff;
}

.compress-container .head {
    height: 44px;
    line-height: 44px;
    padding: 0 15px 0 0;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%);
    font-size: 14px;
    box-sizing: border-box;
    overflow: hidden;
}

.compress-container .head .back {
    display: block;
    float: left;
    width: 20px;
    height: 100%;
    padding: 0 15px;
    text-align: center;
    margin-top: -2px;
}

.compress-container .name {
    flex: 1;
    white-space: nowrap;
    overflow-x: auto;
}

.compress-container .main-view {
    flex: 1;
    box-sizing: border-box;
    padding: 0 15px;
    overflow: auto;
    height: calc(100% - 44px);
}

.compress-container .iframe-container {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
}

.compress-container .iframe-container .iframe-head {
    line-height: 40px;
    height: 40px;
    background-color: #eee;
    box-shadow: 2px 2px 2px #888888;
    display: none;
    position: relative;
}

.compress-container .icon {
    display: inline-block;
    width: 40px;
    line-height: 40px;
    text-align: center;
}

.compress-container .flex-box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.compress-container .iframe-container .iframe-main {
    flex: 1;
}

.compress-container iframe {
    border: none;
    width: 100%;
    height: 100%;
}

.compress-container .item {
    line-height: 55px;
    height: 55px;
    color: rgba(0, 0, 0, .85);
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    padding-left: 20px;
    padding-right: 70px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.compress-container .item .name {
    width: 100%;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.compress-container .item > img {
    margin-left: -100%;
    position: relative;
    right: 20px;
}

.compress-container .item .sizeunit {
    width: 70px;
    height: 100%;
    position: relative;
    margin-left: -70px;
    right: -70px;
    float: right;
    text-align: right;
}

.compress-container .a-icon {
    padding-right: 10px;
    line-height: 30px;
}

#password-container {
    margin: 0 20px 20px;
}

#password-container input {
    outline: none;
    line-height: 32px;
    border: 1px solid #888888;
    width: 260px;
    padding: 0 10px;
}

#password-container .error {
    font-size: 12px;
    color: red;
}

body.user-select #container {
    user-select: auto !important;
}

.watermark-item {
    backface-visibility: hidden;
    line-height: 1 !important;
}

.watermark-item-text:after {
    content: attr(data-content);
}

/* 侧边栏ui优化 */
a,
.switch,
span {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.ztree li a.curSelectedNode {
    border: none;
    background: none;
}

.ztree li a {
    padding: 0;
}

.ztree li a:hover {
    text-decoration: none;
}

.main-right .ztree li span.button.switch {
    position: absolute;
    top: 0;
    left: 0;
}

.ztree li span.button.switch {
    height: 44px;
    width: 30px;
    background-position: center;
    background-size: 14px 14px;
}

.tree-item-container {
    display: block;
    position: relative;
    overflow: hidden;
    padding-left: 30px;
}

.tree-item-container .tree-container {
    display: block;
    width: 100%;
    padding-right: 20px;
    box-sizing: border-box;
}

.tree-item-container .node_name {
    display: block;
    line-height: 44px;
    position: relative;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#outline.ztree {
    padding-right: 0;
}

.expand-main {
    position: absolute;
    height: 100%;
    width: 100%;
    padding-left: 64px;
    box-sizing: border-box;
}

.expand-main .gray {
    color: rgb(153, 153, 153);
}

.main-right {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.main-left {
    background: #fff;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 64px;
}

.main-right .show {
    height: 100%;
    overflow: auto;
}

.main-right .show #bookmark-tree {
    margin-top: 36px;
}

.main-right .show .container {
    padding: 10px;
    overflow-y: auto;
}

.main-right .container .ztree {
    background: #fff;
    padding: 0;
}

.main-right .container .ztree a {
    height: 44px;
    line-height: 44px;
}

.main-right #bookmark-tree .ztree a {
    height: auto;
    word-break: break-all;
    padding: 10px 0;
}

.main-left a {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*height: 64px;*/
    /*font-size: 12px;*/
    display: block;
    width: 64px;
    height: 64px;
    text-align: center;
    line-height: 24px;
}

.main-left a:focus,
.main-left a:active,
.main-left a.active,
.main-right .show {
    background: rgb(245, 245, 245);
}

.main-left a img {
    width: 20px;
    height: 20px;
    margin-top: 15px;
}

#bookmark-tree li {
    padding: 0 60px 0 36px;
    position: relative;
    background: #fff;
    margin-bottom: 10px;
    font-size: 14px;
}

#bookmark-tree li span {
    font-size: 14px;
}

#bookmark-tree li .chk {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#bookmark-tree .switch {
    display: none;
}

#bookmark-tree .node_name {
    flex: 1;
    white-space: break-spaces;
    padding-right: 10px;
    margin-right: 0;
}

#bookmark-tree .ztree > li > a {
    display: block;
    line-height: 20px;
}

#bookmark-tree .ztree > li span.button.chk {
    margin: 0 10px;
}

#bookmark-tree .page.gray {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.bookmark-button-group {
    background: #fff;
}

.bookmark-button-group {
    padding: 10px;
    overflow: hidden;
    position: fixed;
    display: block;
    top: 0;
    left: 60px;
    width: calc(100% - 64px);
    z-index: 9;
}

.bookmark-button-group .bookmark {
    float: right;
}

.bookmark-button-group .bookmark a {
    font-size: 18px;
    padding: 4px;
    margin-right: 10px;
}

#bookmark.ztree {
    background: none;
}

#outline .page {
    margin-right: 0;
    position: absolute;
    line-height: 44px;
    right: 0;
    top: 0;
}

#annot {
    background: none;
}

#annot > li {
    margin-bottom: 10px;
}

#annot > li > a {
    background: #fff;
    display: block;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

#annot > li > a span {
    font-size: 14px;
}

#annot > li > ul {
    padding: 0 !important;
    background: #fff;
}

#annot > li > ul a,
#attachment a {
    display: block;
    box-sizing: border-box;
    padding: 10px 0 0 40px;
    height: auto;
    line-height: 1;
    position: relative;
}

#annot > li > ul a .icon {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
}

#annot .info-container,
#attachment .info-container {
    line-height: 20px;
    border-bottom: 1px solid rgba(225, 225, 225, 1);
    padding: 0 10px 10px 0;
}

#annot ul li:last-child .info-container {
    border-bottom: none;
}

#annot .info-container .info
#attachment .info-container .info {
    display: flex;
    justify-content: space-between;
}

#annot > li > a .icon {
    width: 12px;
    height: 12px;
    transform: rotate(90deg);
    margin-left: 5px;
}

#annot > li > a.open .icon {
    transform: rotate(-90deg);
}

#thumblist {
    padding-right: 0;
    overflow: hidden;
}

#thumblist > .thumb {
    float: left;
    padding-right: 10px;
    box-sizing: border-box;
}

#thumblist > .thumb > div {
    background-color: white;
    background-image: url(../../../image/loading.gif);
    background-repeat: no-repeat;
    background-position: center;
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

#thumblist > .thumb > div img {
    background: white;
    width: 100%;
    height: auto;
}

#thumblist > .thumb > div svg {
    background: white;
    width: 100%;
    height: auto;
}

#thumblist > .thumb .page {
    display: block;
    text-align: center;
    padding: 10px 0;
}

#attachment {
    background: none;
}

#attachment a {
    display: block;
    margin-bottom: 10px;
    background: #fff;
}

#attachment a > img {
    position: absolute;
    top: 10px;
    left: 10px;
}

#attachment .icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0px;
}

#attachment .info {
    position: relative;
    padding-right: 30px;
}

#attachment .info div {
    flex: 1;
    white-space: normal;
}

#attachment .info-container {
    border: none;
}

.iframe-container {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
}

.iframe-container .iframe-head {
    line-height: 40px;
    height: 40px;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #eee;
    box-shadow: 2px 2px 2px #888888;
    display: none;
    position: absolute;
}

.iframe-container .flex-box {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.iframe-container .flex-box.showHeader {
    padding-top: 40px;
}

.iframe-container .iframe-main {
    height: 100%;
    width: 100%;
    background: #fff;
}

.iframe-container iframe {
    border: none;
    width: 100%;
    height: 100%;
}

.iframe-container .icon {
    display: inline-block;
    width: 40px;
    line-height: 40px;
    text-align: center;
}

body .layui-m-layer-download-skin {
    width: 80%;
    border-radius: 5px !important;
}

body .layui-m-layer-download-skin h3 {
    margin: 0;
    padding-top: 20px;
    height: 40px;
    line-height: 40px;
}

body .layui-m-layer-download-skin .layui-m-layercont {
    padding: 10px 10px 20px;
    color: #999;
    text-align: center;
}

body .layui-m-layer-download-skin .layui-m-layerbtn {
    display: block;
    padding: 15px 0;
    height: 20px;
    line-height: 20px;
    border-top: 0 none;
    background-color: #fff;
}

body .layui-m-layer-download-skin .layui-m-layerbtn span {
    float: left;
    width: 50%;
    box-sizing: border-box;
}

body .layui-m-layer-download-skin .layui-m-layerbtn span[yes] {
    color: #417ff9;
}

#outline-tree .ztree,
#customtag-tree .ztree {
    padding: 0 10px;
}

/* 文本框 */
.freetext-container {
    padding: 10px;
    min-height: 16px;
    position: absolute;
    top: 100px;
    z-index: 900;
    box-sizing: border-box;
    word-break: break-all;
}

.freetext-container .input {
    display: inline-block;
    padding: 0;
    width: 2px;
    box-shadow: none !important;
    height: auto;
    background: none;
    border: none;
}

.freetext-slide {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid #424242;
    border-radius: 4px;
    background: #fff;
    display: none;
}

.freetext-slide-left {
    left: 0;
    transform: translate(-50%, -50%);
}

.freetext-slide-right {
    right: 0;
    transform: translate(50%, -50%);
}

.freetext-container.select {
    background: #EBEBEB;
    border: 1px dashed #417FF9;
}

.freetext-container.select .freetext-slide {
    display: block;
}

/* 文本框工具栏 */
.freetext-tools {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
}

.freetext-tools {
    display: none;
}

.freetext-tools.active {
    display: block;
}

.freetext-tools .tools-container .item-container {
    display: flex;
    justify-content: space-between;
    background: #F9F9F9;
    position: static;
}

.freetext-tools .tools-container .item-container > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.freetext-tools .subtools span {
    display: inline-block;
    padding: 3px;
    margin: 10px;
}

.freetext-tools .subtools span.active {
    background: #EBEBEB;
}

.freetext-tools img {
    width: 20px;
    height: 20px;
}

.freetext-tools {
    padding: 0 20px 20px;
    background: #fff;
    box-shadow: 0 -2px 15px rgb(0 0 0 / 15%);
    border-top: 1px solid #eee;
}

.freetext-tools .title {
    font-size: 12px;
    color: rgba(0, 0, 0, .4);
    line-height: 24px;
    margin-top: 20px;
}

.freetext-tools .item-container {
    display: flex;
    border: 1px solid #D2D2D2;
    border-radius: 5px;
    height: 40px;
    align-items: center;
}

.freetext-tools .subtools .item-container {
    justify-content: center;
}

.freetext-tools .subtools span {
    margin: 0 15px;
}

.freetext-tools .align .item-container {
    justify-content: space-evenly;
}

.freetext-tools .size span {
    font-size: 14px;
    text-align: center;
    padding: 0 10px;
    color: #000;
}

.freetext-tools .size .item-container {
    overflow: auto;
    white-space: nowrap;
}

.freetext-tools .color .item-container {
    border: none;
    justify-content: space-between;
}

.freetext-tools .color .item-container span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.freetext-tools .color .item-container span.active {
    background-image: url("../../../image/svg/freetext-select.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
}

.freetext-tools .size .item-container span.active {
    color: #417FF9;
}

/* 文档属性 字体 */
.doc-font.ztree {
    padding: 0;
}

.doc-font.ztree li span.switch.button {
    height: 36px;
    width: 36px;
}

.doc-font.ztree li a {
    height: 36px;
    line-height: 36px;
}

.doc-font.ztree li a span {
    font-size: 14px;
    font-family: '宋体';
}

footer .annotation,
footer .revision {
    display: flex;
    text-align: center;
}

footer .revision > button {
    margin: 0 15px;
}

footer .annotation > a {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.setting-container {
    position: fixed;
    z-index: 7;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: none;
    display: none;
}

.setting-container .mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .7);
}

.setting-container .bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.setting-container .footer {
    background: #fbf8fb;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.setting-container .footer > div {
    flex: 1;
    text-align: center;
}

.setting-container .footer span {
    line-height: 48px;
    border-bottom: 2px solid transparent;
    display: inline-block;
}

.setting-container .footer .active span {
    color: #006599;
    border-color: #006599;
}

.setting-content {
    background: #fff;
    padding: 15px;
}

.setting-content .painter-color,
.setting-content .painter-size,
.setting-content .painter-eraserBtn {
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
}

.setting-content .painter-color {
    display: flex;
    margin: 5px 0 10px;
    justify-content: center;
}

.setting-content .painter-color a {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0 15px
}

.setting-content .painter-color a.active {
    background-image: url("../../../image/svg/freetext-select.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
}

.setting-content .painter-size {
    margin-top: 5px;
}

.setting-content .painter-size,
.setting-content .painter-size .link-container {
    display: flex;
    width: 100%;
    justify-content: space-around;
    box-sizing: border-box;
}

.setting-content .painter-size .type {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.setting-content .painter-size .type:first-child {
    border-right: 1px solid #D2D2D2;
}

.setting-content .painter-size .link-container {
    margin-bottom: 10px;
}

.setting-content .painter-size .link-container a {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.setting-content .painter-size .link-container .active {
    background-color: #EAEAEA;
}

.setting-content .painter-eraserBtn {
    display: flex;
    margin-top: 10px;
    justify-content: space-evenly;
}

.setting-content .painter-eraserBtn .a-icon {
    padding: 7px 15px;
    text-align: center;
}

.setting-content .painter-eraserBtn .a-icon.active {
    background: rgba(234, 234, 234, 1);
}

.setting-content .painter-eraserBtn .text {
    font-size: 14px;
    margin-top: 2px;
}

.tips {
    color: rgba(0, 0, 0, .4);
    font-size: 12px;
    font-weight: bold;
}

/*fix */
.doc-font.ztree li span.button.switch {
    width: 20px;
    height: 40px;
}

.doc-font.ztree li a {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}


.fixed-full-layout {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 6;
    padding-top: 40px;
}

.fixed-full-layout .body {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    bottom: 0;
}

.freetext-edit-container .save {
    padding: 0 10px;
}

.freetext-edit-toast {
    display: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    font-size: 16px;
    width: 158px;
}

.freetext-cancel-toast {
    margin-left: 13px;
    color: #f17a00;
    font-size: 16px;
}

.freetext-edit-container .save.disable {
    opacity: 0.7;
}

.freetext-edit-container .body textarea {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    border: none;
    outline: 0;
    padding: 10px;
    font-size: 14px;
    box-shadow: none;
    resize: none;
}

.freetext-edit-container .freetext-size {
    position: absolute;
    line-height: 30px;
    width: 70px;
    text-align: center;
    border-radius: 15px;
    right: 30px;
    bottom: 30px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
}

.rDocument .rPage .rActive.cur {
    z-index: 2000;
}

/* 页面跳转兼容低版本浏览器 */
.jump-container {
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 60px;
    box-sizing: border-box !important;
    background: #eee;
}

.jump-container #pageCancle,
.jump-container #pageSubmit {
    position: absolute;
    background-color: #eee;
    color: black;
    border: none;
    height: 32px;
    line-height: 32px;
    top: 4px;
    padding: 0;
    width: 50px;
}

.jump-container #pageCancle {
    left: 0;
}

.jump-container #pageSubmit {
    right: 0;
}

.jump-container .icon {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 8px;
    left: 10px;
}

.jump-container > div {
    position: relative;
    border-radius: 14px;
    height: 30px;
    top: 5px;
    background: #fff;
    padding-left: 40px;
    box-sizing: border-box;
}

.jump-container #pageValue {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: none;
    background: none;
    outline: 0;
}

span.acwxc {
    overflow: hidden;
    border: none;
    display: block;
    white-space: pre;
}

.rDocument > .arrow {
    position: fixed;
    top: 50%;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
    z-index: 1000;
    background-color: rgba(0, 0, 0, .3);
    background-size: 20px 20px;
    background-position: center center;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    overflow: hidden;
    text-indent: -1000px;
}

.rDocument > .arrow:hover {
    background-color: rgba(0, 0, 0, .5);
}

.rDocument > .arrow.prev {
    left: 20px;
    background-image: url("../../../image/svg/arrow-left.svg");
}

.rDocument > .arrow.next {
    right: 20px;
    background-image: url("../../../image/svg/arrow-right.svg");
}

/* 画布工具 */
#tools-menu,
#editMenu,
#toolsForOp {
    position: absolute;
    background: rgba(37, 37, 37, 0.9000);
    border-radius: 4px;
    z-index: 2000;
    pointer-events: auto !important;
}

#tools-menu,
#editMenu {
    visibility: hidden;
}

#toolsForOp {
    display: none;
}

#tools-menu::after,
#editMenu::after {
    content: '';
    position: absolute;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(37, 37, 37, 0.9000) transparent transparent transparent;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
}

#tools-menu.bottom::after,
#editMenu.bottom::after {
    top: -10px;
    border-color: transparent transparent rgba(37, 37, 37, 0.9000) transparent;
}

#tools-menu .item,
#editMenu .item,
#toolsForOp .item {
    color: #fff;
    display: inline-block;
    text-align: center;
    width: 62px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    box-sizing: border-box;
    position: relative;
}

#tools-menu .item::before,
#editMenu .item::before {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: rgba(255, 255, 255, .2);
}

#tools-menu .item:last-child::before,
#editMenu .item:last-child::before {
    width: 0;
}

/* 邮件预览 */
.email-container {
    font-family: '微软雅黑';
    padding-top: 10px;
    min-height: 100vh;
    box-sizing: border-box;
}

.email-container .space {
    display: inline-block;
    width: 1px;
    height: 16px;
    vertical-align: middle;
    background-color: gray;
    margin: 0 12px;
}

.email-container h3 {
    color: #333;
    font-size: 20px;
    line-height: 1.6;
    margin: 0 10px 10px;
    font-weight: normal;
}

.email-container .email-head {
    font-size: 14px;
    color: #333;
    padding: 10px 10px;
}

.email-container .email-head .item {
    position: relative;
    margin-bottom: 5px;
    min-height: 20px;
    line-height: 1.6;
    word-break: break-all;
}

.email-container .email-head .item .content {
    display: inline-block;
    word-break: break-all;
    text-indent: 3px;
}

.email-container .attachments .comma {
    margin-right: 12px;
}

.email-container .attachments .comma:last-child {
    display: none;
}

.email-container .email-head .item .title {
    margin-right: 3px;
}

.email-container .email-head .item span a {
    color: #008aea;
}

.email-container .email-body {
    padding: 15px;
    border-top: 1px dashed #a2a9b6;
    overflow: auto;
}

#qrcode {
    margin-bottom: -24px;
    margin-top: -5px;
}

#qrcode .qrcode-text {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    margin: 20px auto 35px;
}

#qrcode .qrcode-btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0;
    background: #F5F5F5;
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
}

.toast-div {
    position: fixed;
    z-index: 10;
    width: 60%;
    left: 20%;
    top: 10%;
}

.toast-div .toast-span {
    display: inline-block;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px 0;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif;
}

.toast-div .toast-close {
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: 5px;
    top: 10px;
    font-weight: 600;
}

#exportPanel #closeExportPanel {
    position: absolute;
    right: 10px;
    top: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

#exportPanel #closeExportPanel > img {
    width: 8px;
}

#exportPanel .export-title {
    font-size: 18px;
    color: #000000;
    line-height: 50px;
    margin-top: -20px;
}

#exportPanel .export-content {
    margin-bottom: -15px;
    margin-top: 20px;
}

#exportPanel .export-content .export-item {
    display: inline-block;
    width: 50%;
}

#exportPanel .export-content .export-item .export-item-img {
    margin-bottom: 12px;
}

#exportPanel .export-content .export-item .export-item-img img {
    width: 32px;
}