html { --devs-color-primary: #0C67C4; }
body { 
  position: relative; 
  font-family: "微软雅黑", "Helvetica Neue", "Lucida Grande", "Arial"; 
  font-size: 12px; 
  padding: 0; 
  margin: 0; 
}
pre {
  font-family: "微软雅黑", "Helvetica Neue", "Lucida Grande", "Arial"; 
  padding: 0; 
  margin: 0; 
}
pre, .el-table__body div {
  line-height: 1.5em;
}

.bodyBackground {
  background: #ECE9E9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ECE9E9));
  background: #ECE9E9 -moz-linear-gradient(top, #fff, #ECE9E9);
  background-repeat: no-repeat;
}

.positionRelative, .relative { position: relative; }
.positionAbsolute, .absolute { position: absolute; }

.hover:hover { background-color: #00000010; border-radius: 5px; }

.redBorder { border: 1px solid red; box-sizing: border-box;}
.blueBorder { border: 1px solid var(--devs-color-primary); box-sizing: border-box; }
.blackBorder { border: 1px solid #383838; box-sizing: border-box; }
.greenBorder { border: 1px solid #689A40; box-sizing: border-box; }
.whiteBorder { border: 1px solid white; box-sizing: border-box; }

.border, .border-red { border: 1px solid red; box-sizing: border-box; }
.border-blue { border: 1px solid blue; box-sizing: border-box; }
.border-green { border: 1px solid green; box-sizing: border-box; }
.border-black { border: 1px solid black; box-sizing: border-box; }
.border-yellow { border: 1px solid yellow; box-sizing: border-box; }
.border-gray { border: 1px solid gray; box-sizing: border-box; }
.border-purple { border: 1px solid purple; box-sizing: border-box; }
.border-white { border: 1px solid white; box-sizing: border-box; }
.border-useful { border: 1px solid #dcdfe6; box-sizing: border-box; }
.border-lightgray { border: 1px solid lightgray; box-sizing: border-box; }

.border-top { border-top: 1px solid red; box-sizing: border-box }
.border-right { border-right: 1px solid red; box-sizing: border-box }
.border-bottom { border-bottom: 1px solid red; box-sizing: border-box }
.border-left { border-left: 1px solid red; box-sizing: border-box }

.transparentBorder1 { border: 1px solid transparent; box-sizing: border-box }
.transparentBorder2 { border: 2px solid transparent; box-sizing: border-box }
.transparentBorder3 { border: 3px solid transparent; box-sizing: border-box }
.transparentBorder4 { border: 4px solid transparent; box-sizing: border-box }
.transparentBorder5 { border: 5px solid transparent; box-sizing: border-box }
.transparentBorder6 { border: 6px solid transparent; box-sizing: border-box }
.transparentBorder7 { border: 7px solid transparent; box-sizing: border-box }
.transparentBorder8 { border: 8px solid transparent; box-sizing: border-box }
.transparentBorder9 { border: 9px solid transparent; box-sizing: border-box }
.transparentBorder10 { border: 10px solid transparent; box-sizing: border-box }
.transparentBorder11 { border: 11px solid transparent; box-sizing: border-box }
.transparentBorder12 { border: 12px solid transparent; box-sizing: border-box }
.transparentBorder13 { border: 13px solid transparent; box-sizing: border-box }
.transparentBorder14 { border: 14px solid transparent; box-sizing: border-box }
.transparentBorder15 { border: 15px solid transparent; box-sizing: border-box }
.transparentBorder16 { border: 16px solid transparent; box-sizing: border-box }
.transparentBorder17 { border: 17px solid transparent; box-sizing: border-box }
.transparentBorder18 { border: 18px solid transparent; box-sizing: border-box }
.transparentBorder19 { border: 19px solid transparent; box-sizing: border-box }
.transparentBorder20 { border: 20px solid transparent; box-sizing: border-box }
.transparentBorder25 { border: 25px solid transparent; box-sizing: border-box }
.transparentBorder30 { border: 30px solid transparent; box-sizing: border-box }
.transparentBorder35 { border: 35px solid transparent; box-sizing: border-box }
.transparentBorder40 { border: 40px solid transparent; box-sizing: border-box }
.transparentBorder45 { border: 45px solid transparent; box-sizing: border-box }
.transparentBorder50 { border: 50px solid transparent; box-sizing: border-box }

.border-transparent, .border-color-transparent, .transparentBorder, .transparent-border { border-color: transparent }

.border0, .borderWidth0, .noBorder { border-width: 0 }

.border-circle, .borderCircle, .border-round, .borderRound { border-radius: 100%; overflow: hidden; }
.borderRadius1, .borderRound1 { border-radius: 1px; }
.borderRadius2, .borderRound2 { border-radius: 2px; }
.borderRadius3, .borderRound3 { border-radius: 3px; }
.borderRadius4, .borderRound4 { border-radius: 4px; }
.borderRadius5, .borderRound5 { border-radius: 5px; }
.borderRadius6, .borderRound6 { border-radius: 6px; }
.borderRadius7, .borderRound7 { border-radius: 7px; }
.borderRadius8, .borderRound8 { border-radius: 8px; }
.borderRadius9, .borderRound9 { border-radius: 9px; }
.borderRadius10, .borderRound10 { border-radius: 10px; }

.no-left-border, .noLeftBorder { border-left-width: 0; }
.no-top-border, .noTopBorder { border-top-width: 0; }
.no-right-border, .noRightBorder { border-right-width: 0; }
.no-bottom-border, .noBottomBorder { border-bottom-width: 0; }

.fullscreen { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; box-sizing: border-box; }

.page-main-content { width: 100%; height: 100%; /* border: 10px solid transparent; */ box-sizing: border-box; padding: 10px; }

.dev-column { display: flex !important; flex-flow: column; box-sizing: border-box; width: 100%; }
.dev-row { display: flex !important; flex-flow: row; box-sizing: border-box; }

.hide { display: none !important; }

.dev-items-center, .dev-row-items-center, .dev-column-items-center, .dev-flex-items-center { align-items: center }
.dev-items-start, .dev-row-items-start, .dev-column-items-start, .dev-flex-items-start { align-items: flex-start }
.dev-items-end, .dev-row-items-end, .dev-column-items-end, .dev-flex-items-end { align-items: flex-end }
.dev-items-strecth, .dev-row-items-strecth, .dev-column-items-strecth, .dev-flex-items-strecth,
.dev-items-stretch, .dev-row-items-stretch, .dev-column-items-stretch, .dev-flex-items-stretch { align-items: stretch }
.dev-items-baseline, .dev-row-items-baseline, .dev-column-items-baseline, .dev-flex-items-baseline { align-items: baseline }

.dev-content-center { align-content: center }
.dev-content-start { align-content: flex-start }
.dev-content-end { align-content: flex-end }
.dev-content-around { align-content: space-around }
.dev-content-between { align-content: space-between }
.dev-content-stretch { align-content: stretch }

.dev-justify-content-center { justify-content: center }
.dev-justify-content-start { justify-content: flex-start }
.dev-justify-content-end { justify-content: flex-end }
.dev-justify-content-around { justify-content: space-around }
.dev-justify-content-between { justify-content: space-between }
.dev-justify-content-evenly { justify-content: space-evenly }

.dev-grow, .flex-grow, .dev-flex-grow { flex-grow: 1; }

.dev-column > .dev-grow, .dev-column > .flex-grow, .dev-column > .dev-flex-grow { height: 0; }

.dev-wrap, .flex-wrap, .dev-row-wrap, .flex-row-wrap, .dev-flex-wrap { flex-wrap: wrap; row-gap: 10px }

.height0 { height: 0 }
.height100 { height: 100% }
.height100vh { height: 100vh }

.width0 { width: 0 }
.width100 { width: 100% }
.width100vw { width: 100vw }

.dev-gap1 { row-gap: 1px; column-gap: 1px; }
.dev-gap2 { row-gap: 2px; column-gap: 2px; }
.dev-gap3 { row-gap: 3px; column-gap: 3px; }
.dev-gap4 { row-gap: 4px; column-gap: 4px; }
.dev-gap5 { row-gap: 5px; column-gap: 5px; }
.dev-gap6 { row-gap: 6px; column-gap: 6px; }
.dev-gap7 { row-gap: 7px; column-gap: 7px; }
.dev-gap8 { row-gap: 8px; column-gap: 8px; }
.dev-gap9 { row-gap: 9px; column-gap: 9px; }
.dev-gap10 { row-gap: 10px; column-gap: 10px; }

.dev-gap0, .dev-nogap, .dev-flex-gap0, .dev-flex-nogap { column-gap: 0; row-gap: 0; }
.dev-row-gap0, .dev-row-nogap { row-gap: 0; }
.dev-column-gap0, .dev-column-nogap { column-gap: 0; }

.dev-row-gap5 { row-gap: 5px; }
.dev-column-gap5 { column-gap: 5px; }

.dev-row-gap10 { row-gap: 10px; }
.dev-column-gap10 { column-gap: 10px; }

.dev-gap15 { row-gap: 15px; column-gap: 15px; }
.dev-row-gap15 { row-gap: 15px; }
.dev-column-gap15 { column-gap: 15px; }

.dev-gap20 { row-gap: 20px; column-gap: 20px; }
.dev-row-gap20 { row-gap: 20px; }
.dev-column-gap20 { column-gap: 20px; }

.dev-gap25 { row-gap: 25px; column-gap: 25px; }
.dev-row-gap25 { row-gap: 25px; }
.dev-column-gap25 { column-gap: 25px; }

.dev-gap30 { row-gap: 30px; column-gap: 30px; }
.dev-row-gap30 { row-gap: 30px; }
.dev-column-gap30 { column-gap: 30px; }

.dev-gap35 { row-gap: 35px; column-gap: 35px; }
.dev-row-gap35 { row-gap: 35px; }
.dev-column-gap35 { column-gap: 35px; }

.dev-gap40 { row-gap: 40px; column-gap: 40px; }
.dev-row-gap40 { row-gap: 40px; }
.dev-column-gap40 { column-gap: 40px; }

.dev-gap45 { row-gap: 45px; column-gap: 45px; }
.dev-row-gap45 { row-gap: 45px; }
.dev-column-gap45 { column-gap: 45px; }

.dev-gap50 { row-gap: 50px; column-gap: 50px; }
.dev-row-gap50 { row-gap: 50px; }
.dev-column-gap50 { column-gap: 50px; }

.text-justify { text-align: justify; text-justify: distribute-all-lines; text-align-last: justify; }
.text-center, .textCenter, .centerText, .center-text, .textAlignCenter, .text-align-center { text-align: center; }
.text-right, .textRight, .rightText, .right-text, .textAlignRight, .text-align-right { text-align: right; }
.text-ellipsis, .textEllipsis, .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.overflowHidden, .overflowHide, .overflow { overflow: hidden; }

.opacity, .opacity0 { opacity: 0; }
.opacity1 { opacity: .1; }
.opacity2 { opacity: .2; }
.opacity3 { opacity: .3; }
.opacity4 { opacity: .4; }
.opacity5 { opacity: .5; }
.opacity6 { opacity: .6; }
.opacity7 { opacity: .7; }
.opacity8 { opacity: .8; }
.opacity9 { opacity: .9; }
.opacity10 { opacity: 1; }

.nowrap, .dev-nowrap { white-space: nowrap; }
.wrap, .text-wrap, .textWrap { white-space: pre-wrap; word-wrap: break-word; }

.padding1 { padding: 1px }
.padding2 { padding: 2px }
.padding3 { padding: 3px }
.padding4 { padding: 4px }
.padding5 { padding: 5px }
.padding6 { padding: 6px }
.padding7 { padding: 7px }
.padding8 { padding: 8px }
.padding9 { padding: 9px }
.padding10 { padding: 10px }
.padding15 { padding: 15px }
.padding20 { padding: 20px }
.padding25 { padding: 25px }
.padding30 { padding: 30px }
.padding0, .noPadding { padding: 0 !important; }

.margin1 { margin: 1px }
.margin2 { margin: 2px }
.margin3 { margin: 3px }
.margin4 { margin: 4px }
.margin5 { margin: 5px }
.margin6 { margin: 6px }
.margin7 { margin: 7px }
.margin8 { margin: 8px }
.margin9 { margin: 9px }
.margin10 { margin: 10px }
.margin15 { margin: 15px }
.margin20 { margin: 20px }
.margin25 { margin: 25px }
.margin30 { margin: 30px }
.margin0, .noMargin { margin: 0 !important; }

.noselect, .noSelect, .unselect, .unSelect { user-select: none; }

.canselect, .canSelect { user-select: text; }

.noevent, .noEvent, .unevent, .unEvent { pointer-events: none; }
.event, .Event, .allevent, .allEvent, .useevent, .useEvent { pointer-events: all; }

.font-size-12, .fontSize12 { font-size: 12px; }
.font-size-13, .fontSize13 { font-size: 13px; }
.font-size-14, .fontSize14 { font-size: 14px; }
.font-size-15, .fontSize15 { font-size: 15px; }
.font-size-16, .fontSize16 { font-size: 16px; }
.font-size-17, .fontSize17 { font-size: 17px; }
.font-size-18, .fontSize18 { font-size: 18px; }
.font-size-19, .fontSize19 { font-size: 19px; }
.font-size-20, .fontSize20 { font-size: 20px; }
.font-size-21, .fontSize21 { font-size: 21px; }
.font-size-22, .fontSize22 { font-size: 22px; }
.font-size-23, .fontSize23 { font-size: 23px; }
.font-size-24, .fontSize24 { font-size: 24px; }
.font-size-25, .fontSize25 { font-size: 25px; }
.font-size-26, .fontSize26 { font-size: 26px; }
.font-size-27, .fontSize27 { font-size: 27px; }
.font-size-28, .fontSize28 { font-size: 28px; }
.font-size-29, .fontSize29 { font-size: 29px; }
.font-size-30, .fontSize30 { font-size: 30px; }
.font-size-31, .fontSize31 { font-size: 31px; }
.font-size-32, .fontSize32 { font-size: 32px; }
.font-size-33, .fontSize33 { font-size: 33px; }
.font-size-34, .fontSize34 { font-size: 34px; }
.font-size-35, .fontSize35 { font-size: 35px; }
.font-size-36, .fontSize36 { font-size: 36px; }
.font-size-37, .fontSize37 { font-size: 37px; }
.font-size-38, .fontSize38 { font-size: 38px; }
.font-size-39, .fontSize39 { font-size: 39px; }
.font-size-30, .fontSize30 { font-size: 30px; }
.font-size-31, .fontSize31 { font-size: 31px; }
.font-size-32, .fontSize32 { font-size: 32px; }
.font-size-default, .fontSizeDefault, .defaultFontSize, .default-font-size, .font-size-small, .fontSizeSmall, .smallFontSize, .small-font-size { font-size: 12px; }
.font-size-middle, .fontSizeMiddle, .middleFontSize, .middle-font-size { font-size: 15px; }
.font-size-large, .fontSizeLarge, .largeFontSize, .large-font-size, .font-size-big, .fontSizeBig, .bigFontSize, .big-font-size { font-size: 18px; }
.font-bold, .fontBold { font-weight: bold; }

.cursorPointer, .cursor-pointer { cursor: pointer; }
.cursorDefault, .cursor-default { cursor: default; }

.vditor-outline__item--current {
  background-color: #ebffef;
  border-radius: 5px;
}

.canDragWindow { 
  -webkit-app-region: drag;
  user-select: none;
}
.unDragWindow { -webkit-app-region: no-drag }

*:focus-visible {
  outline-width: 0 !important;
}