@font-face {
    font-family: "iconfont"; /* Project id 3559670 */
    src: url("iconfont.woff2?t=1667531544868") format("woff2"),
    url("iconfont.woff?t=1667531544868") format("woff"),
    url("iconfont.ttf?t=1667531544868") format("truetype");
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sv-edit-data:before {
    content: "\e655";
}

.sv-shimmer:before {
    content: "\e6d6";
}

.sv-origin:before {
    content: "\e6ac";
}

.sv-zIndex:before {
    content: "\e603";
}

.sv-structure:before {
    content: "\ec6f";
}

.sv-list:before {
    content: "\e742";
}

.sv-grid:before {
    content: "\e849";
}

.sv-flow:before {
    content: "\e611";
}

.sv-switch:before {
    content: "\e6f6";
}

.sv-theme:before {
    content: "\e644";
}

.sv-element:before {
    content: "\e615";
}

.sv-pdf:before {
    content: "\e67a";
}

.sv-browser:before {
    content: "\e726";
}

.sv-font-big:before {
    content: "\eb04";
}

.sv-font-small:before {
    content: "\eb05";
}

.sv-font-bold:before {
    content: "\ec83";
}

.sv-font-tiny:before {
    content: "\e6c1";
}

.sv-options:before {
    content: "\e607";
}

.sv-close:before {
    content: "\e646";
}

.sv-clone:before {
    content: "\ec7a";
}

.sv-cut:before {
    content: "\e643";
}

.sv-preview:before {
    content: "\e61c";
}

.sv-zoom-in:before {
    content: "\e60f";
}

.sv-zoom-out:before {
    content: "\e610";
}

.sv-edit:before {
    content: "\e6b9";
}

.sv-paste:before {
    content: "\e6c0";
}

.sv-copy:before {
    content: "\e6c2";
}

.sv-unlock:before {
    content: "\e6e7";
}

.sv-lock:before {
    content: "\e6e8";
}

.sv-zIndex-plus:before {
    content: "\e715";
}

.sv-zIndex-minus:before {
    content: "\e716";
}

.sv-zIndex-top:before {
    content: "\e71f";
}

.sv-sigh:before {
    content: "\e724";
}

.sv-ask:before {
    content: "\e725";
}

.sv-dev-code:before {
    content: "\e733";
}

.sv-bug:before {
    content: "\e73f";
}

.sv-zIndex-bottom:before {
    content: "\e71d";
}

.sv-new:before {
    content: "\e64d";
}

.sv-clear:before {
    content: "\e62d";
}

.sv-base:before {
    content: "\e7d0";
}

.sv-export:before {
    content: "\eabf";
}

.sv-import:before {
    content: "\eac0";
}

.sv-add:before {
    content: "\eaf3";
}

.sv-printer:before {
    content: "\eabe";
}

.sv-save:before {
    content: "\eabd";
}

.sv-more:before {
    content: "\e625";
}

.sv-menu:before {
    content: "\e628";
}

.sv-nav-right:before {
    content: "\e629";
}

.sv-nav-up:before {
    content: "\e62a";
}

.sv-nav-left:before {
    content: "\e62b";
}

.sv-nav-down:before {
    content: "\e62c";
}

.sv-setting:before {
    content: "\e62e";
}

.sv-delete:before {
    content: "\e630";
}

.sv-undo:before {
    content: "\e631";
}

.sv-redo:before {
    content: "\e632";
}

.sv-refresh:before {
    content: "\e634";
}

.sv-history:before {
    content: "\e635";
}

.sv-html:before {
    content: "\e633";
}

.sv-longText:before {
    content: "\e64c";
}

.sv-table:before {
    content: "\ec15";
}

.sv-qrcode:before {
    content: "\e642";
}

.sv-image:before {
    content: "\e8ba";
}

.sv-barcode:before {
    content: "\eb64";
}

.sv-text:before {
    content: "\e60b";
}

.sv-vline:before {
    content: "\e63a";
}

.sv-oval:before {
    content: "\eb99";
}

.sv-rect:before {
    content: "\e620";
}

.sv-hline:before {
    content: "\e60a";
}

.sv-print-c:before {
    content: "\e602";
}

.sv-print:before {
    content: "\e601";
}

.sv-c:before {
    content: "\e600";
}

.sv-vertical:before {
    content: "\e706";
}

.sv-distributeHor:before {
    content: "\e707";
}

.sv-right:before {
    content: "\e708";
}

.sv-left:before {
    content: "\e709";
}

.sv-distributeVer:before {
    content: "\e70f";
}

.sv-bottom:before {
    content: "\e710";
}

.sv-top:before {
    content: "\e711";
}

.sv-horizontal:before {
    content: "\e712";
}

.sv-rotate:before {
    content: "\e66f";
}

.sv-butongbu:before {
    content: "\e636";
}

.sv-synchronization:before {
    content: "\e676";
}
/* 重写全局 hiprint 样式 */
.hiprint-headerLine,
.hiprint-footerLine {
    border-color: purple !important;
}

.hiprint-headerLine:hover,
.hiprint-footerLine:hover {
    border-top: 3px dashed purple !important;
}

.hiprint-headerLine:hover:before {
    content: "页眉线";
    left: calc(50% - 18px);
    position: relative;
    background: #ffff;
    top: -14px;
    color: purple;
    font-size: 12px;
}

.hiprint-footerLine:hover:before {
    content: "页脚线";
    left: calc(50% - 18px);
    position: relative;
    color: purple;
    background: #ffff;
    top: -14px;
    font-size: 12px;
}
/* 区域 */
.left {
    background: white;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    padding: 10px 0;
    box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
    overflow: auto;
}
.center {
    margin: 0 10px;
    background: white;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    padding: 20px;
    box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
    overflow: auto;
}
.right {
    background: white;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    padding: 10px 0;
    box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
    overflow: auto;
}
/* 左侧拖拽元素样式 */
.title {
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    margin: 10px 0 0 24px;
}
.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 4px 10px;
    margin: 10px 8px 4px 8px;
    width: 38%;
    min-height: 60px;
    border-radius: 4px;
    box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
}
.item .iconfont {
    font-size: 1.5rem;
}
.item span {
    font-size: 14px;
}

/* scrollbar */
::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}
::-webkit-scrollbar-corner {
    height: 4px;
    width: 4px;
}
::-webkit-scrollbar-thumb {
    background: purple;
    border-radius: 2px;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );
}
::-webkit-scrollbar-thumb:hover {
    background: purple;
}

/* flex */
.flex-row {
    display: flex;
}
.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.align-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}

.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-3 {
    flex: 3;
}
.flex-4 {
    flex: 4;
}
.flex-5 {
    flex: 5;
}

.ml-10 {
    margin-left: 10px;
}
.mr-10 {
    margin-right: 10px;
}
.mt-10 {
    margin-top: 10px;
}
.mb-10 {
    margin-bottom: 10px;
}

button:hover {
    opacity: 1;
}
button i {
    font-size: 16px !important;
}
.circle,
.circle-4 {
    border-radius: 4px !important;
}
.circle-10 {
    border-radius: 10px !important;
}

/* modal */
.modal {
    padding: 0;
    margin: 0;
}
.modal .mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    background-color: #00000073;
}
.modal .wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: auto;
    background-color: #00000073;
    outline: 0;
}
.modal .wrap .box {
    position: relative;
    margin: 10% auto;
    width: 40%;
    background: #fff;
    border-radius: 4px;
    z-index: 1001;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
.modal-box__header {
    padding: 10px 14px;
    border-bottom: 1px solid #e9e9e9;
}
.modal-box__footer {
    text-align: end;
}
.modal-box__footer button {
    min-width: 100px;
}
.modal-box__footer button:not(:last-child) {
    margin-right: 10px;
}