@import "./font-awesome.min.css";

 .material-operation-tools:before,
 .material-operation-tools .tools-bar:before,
 .material-operation-tools:after,
 .material-operation-tools .tools-bar:after {
  content: "";
  display: table
}

 .material-operation-tools:after,
 .material-operation-tools .tools-bar:after {
  clear: both
}

 button,
 input,
 optgroup,
 select,
 textarea {
  color: inherit;
  font: inherit;
  margin: 0
}

 a {
  text-decoration: none
}

 .edui-default,
 .koleditor-styleCenter,
 .material-operation-tools,
 .kolAlert-dialog,
 .phone-preview {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif
}

 .phone-preview {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  max-height: 100%;
  overflow-y: auto !important
}

 .phone-preview .phont-perview-main {
  display: flex
}

 .phone-preview .phont-perview-main .left-tool {
  margin-right: 47px
}

 .phone-preview .phont-perview-main .left-tool .view-choose {
  width: 170px;
  height: 160px;
  box-sizing: border-box;
  padding: 25px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 10px
}

 .phone-preview .phont-perview-main .left-tool .view-choose button {
  border: 1px solid #d1dee4;
  background-color: #fff;
  color: #36aeea;
  font-size: 16px;
  width: 120px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  margin-top: 10px;
  cursor: pointer;
  outline: none
}

 .phone-preview .phont-perview-main .left-tool .view-choose button:nth-child(1) {
  margin-top: 0px
}

 .phone-preview .phont-perview-main .left-tool .view-choose button.active {
  background-color: #36aeea;
  border: none;
  color: #fff
}

 .phone-preview .phont-perview-main .left-tool .qrcode-view {
  width: 170px;
  height: 288px;
  box-sizing: border-box;
  padding: 22px;
  background-color: #fff;
  border-radius: 4px
}

 .phone-preview .phont-perview-main .left-tool .qrcode-view .title p {
  font-size: 12px;
  color: #333333;
  line-height: 1.2
}

 .phone-preview .phont-perview-main .left-tool .qrcode-view .title p:nth-child(1) {
  color: #36aeea;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 17px
}

 .phone-preview .phont-perview-main .left-tool .qrcode-view .qrcode {
  margin-top: 8px;
  margin-bottom: 14px
}

 .phone-preview .phont-perview-main .left-tool .qrcode-view>a {
  width: 120px;
  height: 30px;
  border: 1px solid #36aeea;
  background-color: #fff;
  border-radius: 15px;
  display: inline-block;
  text-align: center;
  line-height: 30px
}

 .phone-preview .phont-perview-main .right-view[data-type=fsType] {
  width: 378px;
  box-sizing: border-box;
  height: 772px;
  background-image: url(http://mcustom.365editor.com/static/images/phone01.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 73px;
  padding-left: 22px
}

 .phone-preview .phont-perview-main .right-view[data-type=fsType] div.preview_title {
  width: 333px;
  height: 40px;
  line-height: 40px;
  background-color: #21292c;
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 0px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box
}

 .phone-preview .phont-perview-main .right-view[data-type=fsType] iframe.preview_iframe,
 .phone-preview .phont-perview-main .right-view[data-type=fsType] #preview_body {
  width: 333px;
  height: 564px;
  overflow-x: hidden;
  overflow-y: scroll
}

 .phone-preview .phont-perview-main .right-view[data-type=fzType] {
  width: 405px;
  box-sizing: border-box;
  height: 788px;
  background-image: url(http://mcustom.365editor.com/static/images/phone02.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 75px;
  padding-left: 20px
}

 .phone-preview .phont-perview-main .right-view[data-type=fzType] div.preview_title {
  width: 363px;
  height: 40px;
  line-height: 40px;
  background-color: #21292c;
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 0px 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between
}

 .phone-preview .phont-perview-main .right-view[data-type=fzType] iframe.preview_iframe,
 .phone-preview .phont-perview-main .right-view[data-type=fzType] #preview_body {
  width: 363px;
  height: 602px;
  overflow-x: hidden;
  overflow-y: scroll
}

 .phone-preview .phont-perview-main .right-view[data-type=ffType] {
  width: 408px;
  box-sizing: border-box;
  height: 826px;
  background-image: url(http://mcustom.365editor.com/static/images/phone03.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 102px;
  padding-left: 23px
}

 .phone-preview .phont-perview-main .right-view[data-type=ffType] div.preview_title {
  width: 362px;
  height: 40px;
  line-height: 40px;
  background-color: #21292c;
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 0px 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between
}

 .phone-preview .phont-perview-main .right-view[data-type=ffType] iframe.preview_iframe,
 .phone-preview .phont-perview-main .right-view[data-type=ffType] #preview_body {
  width: 362px;
  height: 593px;
  overflow-x: hidden;
  overflow-y: scroll
}

 .phone-preview .phont-perview-main .close-btn {
  margin-left: 18px
}

 .bubble-slider {
  display: block;
  width: 100%;
  margin: 20px auto;
  padding: 20px;
  font-size: 16px
}

 .bubble-slider-wrap {
  display: block;
  width: 100%;
  height: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

 .bubble-slider-wrap:after,
 .bubble-slider-wrap:before {
  content: '';
  display: table
}

 .bubble-slider-wrap:after {
  clear: both
}

 .bubble-slider-track {
  position: absolute;
  left: 5px;
  right: 5px;
  margin-top: 18px;
  height: 2px;
  border-radius: 2px;
  background: #e5e5e5
}

 .bubble-slider-thumb {
  position: absolute;
  top: -8px;
  width: 20px;
  height: 20px;
  background: #595959;
  border-radius: 50%;
  cursor: ew-resize
}

 .bubble-slider-bubble {
  display: none;
  position: absolute;
  top: -30px;
  left: 10px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

 .bubble-slider-bubble span {
  padding: 5px 15px;
  display: inline-block;
  font-size: 25px;
  color: #bdc3c3;
  background: #343a3a;
  border-radius: 5px
}

 .bubble-slider-bubble-arrow {
  background: #343a3a;
  position: absolute;
  left: 50%;
  bottom: -3px;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

 .bubble-slider-minus {
  position: relative;
  float: left
}

 .bubble-slider-plus {
  position: relative;
  float: right
}

 .bubble-slider-minus,
 .bubble-slider-plus {
  top: 10px;
  width: 30px;
  height: 30px;
  color: #595959;
  font-size: 18px;
  border: 2px solid #e5e5e5;
  border-radius: 50%;
  cursor: pointer
}

 .bubble-slider-minus span {
  top: 45%
}

 .bubble-slider-minus span,
 .bubble-slider-plus span {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

 .bubble-slider-plus span {
  top: 50%
}

 .colpick {
  position: absolute;
  width: 346px;
  height: 170px;
  overflow: hidden;
  display: none;
  font-family: Arial, Helvetica, sans-serif;
  background: #f2f6fa;
  border: 1px solid #d2dae4;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  z-index: 20002;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none
}

 .colpick,
 .colpick * {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box
}

 .colpick_color {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 156px;
  height: 156px;
  overflow: hidden;
  outline: 1px solid #aaa;
  cursor: crosshair
}

 .colpick_color_overlay1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 156px;
  height: 156px;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#ffffff', endColorstr='#00ffffff');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')";
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))
}

 .colpick_color_overlay2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 156px;
  height: 156px;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00000000', endColorstr='#000000');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')";
  background: linear-gradient(to bottom, transparent, #000)
}

 .colpick_hsl .colpick_color_overlay1 {
  background: linear-gradient(to right, gray 0%, rgba(128, 128, 128, 0) 100%)
}

 .colpick_hsl .colpick_color_overlay2 {
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 50%, transparent 50%, #000 100%)
}

 .colpick_selector_outer {
  background: none;
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -6px 0 0 -6px;
  border: 1px solid black;
  border-radius: 50%
}

 .colpick_selector_inner {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid white;
  border-radius: 50%
}

 .colpick_hue {
  position: absolute;
  top: 6px;
  left: 175px;
  width: 19px;
  height: 156px;
  border: 1px solid #aaa;
  cursor: n-resize
}

.colpick_hue_arrs {
  position: absolute;
  left: -8px;
  width: 35px;
  height: 7px;
  margin: -7px 0 0 0
}

 .colpick_hue_larr {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid #858585
}

 .colpick_hue_rarr {
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid #858585
}

 .colpick_new_color {
  position: absolute;
  left: 207px;
  top: 6px;
  width: 60px;
  height: 27px;
  background: #f00;
  border: 1px solid #8f8f8f
}

 .colpick_current_color {
  position: absolute;
  left: 277px;
  top: 6px;
  width: 60px;
  height: 27px;
  background: #f00;
  border: 1px solid #8f8f8f
}

 .colpick_field,
 .colpick_hex_field {
  position: absolute;
  height: 20px;
  width: 60px;
  overflow: hidden;
  background: #e3eaf3;
  color: #b8b8b8;
  font-size: 12px;
  border: 1px solid #bdbdbd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

 .colpick_rgb_r {
  top: 40px;
  left: 207px
}

 .colpick_rgb_g {
  top: 67px;
  left: 207px
}

 .colpick_rgb_b {
  top: 94px;
  left: 207px
}

 .colpick_hsx_h {
  top: 40px;
  left: 277px
}

 .colpick_hsx_s {
  top: 67px;
  left: 277px
}

 .colpick_hsx_x {
  top: 94px;
  left: 277px
}

 .colpick_hex_field {
  width: 68px;
  left: 207px;
  top: 121px
}

 .colpick_focus {
  border-color: #999
}

 .colpick_field_letter {
  position: absolute;
  width: 12px;
  height: 20px;
  line-height: 20px;
  padding-left: 4px;
  background: #e3eaf3;
  border: 1px solid #bdbdbd;
  font-weight: bold;
  color: #777
}

 .colpick_field input,
.colpick_hex_field input {
  position: absolute;
  right: 11px;
  margin: 0;
  padding: 0;
  height: 20px;
  line-height: 20px;
  background: transparent;
  border: none;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  color: #555;
  text-align: right;
  outline: none
}

 .colpick_hex_field input {
  right: 4px
}

 .colpick_field_arrs {
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 21px;
  cursor: n-resize
}

 .colpick_field_uarr {
  position: absolute;
  top: 5px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #959595
}

 .colpick_field_darr {
  position: absolute;
  bottom: 5px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #959595
}

 .colpick_submit {
  position: absolute;
  left: 207px;
  top: 145px;
  width: 130px;
  height: 20px;
  line-height: 20px;
  background: #e3eaf3;
  border: 1px solid #bdbdbd;
  text-align: center;
  color: #555;
  font-size: 12px;
  font-weight: bold;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

 .colpick_submit:hover {
  background: #f3f3f3;
  border-color: #999;
  cursor: pointer
}

 .colpick_full_ns .colpick_submit,
 .colpick_full_ns .colpick_current_color {
  display: none
}

 .colpick_full_ns .colpick_new_color {
  width: 130px;
  height: 25px
}

 .colpick_full_ns .colpick_rgb_r,
 .colpick_full_ns .colpick_hsx_h {
  top: 42px
}

 .colpick_full_ns .colpick_rgb_g,
 .colpick_full_ns .colpick_hsx_s {
  top: 73px
}

 .colpick_full_ns .colpick_rgb_b,
 .colpick_full_ns .colpick_hsx_x {
  top: 104px
}

 .colpick_full_ns .colpick_hex_field {
  top: 135px
}

 .colpick_rgbhex .colpick_hsx_h,
 .colpick_rgbhex .colpick_hsx_s,
 .colpick_rgbhex .colpick_hsx_x {
  display: none
}

 .colpick_rgbhex {
  width: 282px
}

 .colpick_rgbhex .colpick_field,
 .colpick_rgbhex .colpick_submit {
  width: 68px
}

 .colpick_rgbhex .colpick_new_color {
  width: 34px;
  border-right: none
}

 .colpick_rgbhex .colpick_current_color {
  width: 34px;
  left: 240px;
  border-left: none
}

 .colpick_rgbhex_ns .colpick_submit,
.colpick_rgbhex_ns .colpick_current_color {
  display: none
}

 .colpick_rgbhex_ns .colpick_new_color {
  width: 68px;
  border: 1px solid #8f8f8f
}

 .colpick_rgbhex_ns .colpick_rgb_r {
  top: 42px
}

 .colpick_rgbhex_ns .colpick_rgb_g {
  top: 73px
}

 .colpick_rgbhex_ns .colpick_rgb_b {
  top: 104px
}

 .colpick_rgbhex_ns .colpick_hex_field {
  top: 135px
}

 .colpick_hex .colpick_hsx_h,
 .colpick_hex .colpick_hsx_s,
 .colpick_hex .colpick_hsx_x,
 .colpick_hex .colpick_rgb_r,
 .colpick_hex .colpick_rgb_g,
 .colpick_hex .colpick_rgb_b {
  display: none
}

 .colpick_hex {
  width: 206px;
  height: 201px
}

 .colpick_hex .colpick_hex_field {
  width: 72px;
  height: 25px;
  top: 168px;
  left: 80px
}

 .colpick_hex .colpick_hex_field div,
 .colpick_hex .colpick_hex_field input {
  height: 25px;
  line-height: 25px
}

 .colpick_hex .colpick_new_color {
  left: 9px;
  top: 168px;
  width: 30px;
  border-right: none
}

 .colpick_hex .colpick_current_color {
  left: 39px;
  top: 168px;
  width: 30px;
  border-left: none
}

 .colpick_hex .colpick_submit {
  left: 164px;
  top: 168px;
  width: 30px;
  height: 25px;
  line-height: 25px
}

 .colpick_hex_ns .colpick_submit,
 .colpick_hex_ns .colpick_current_color {
  display: none
}

 .colpick_hex_ns .colpick_hex_field {
  width: 80px
}

 .colpick_hex_ns .colpick_new_color {
  width: 60px;
  border: 1px solid #8f8f8f
}

 .colpick_dark {
  background: #161616;
  border-color: #2a2a2a
}

 .colpick_dark .colpick_color {
  outline-color: #333
}

 .colpick_dark .colpick_hue {
  border-color: #555
}

 .colpick_dark .colpick_field,
 .colpick_dark .colpick_hex_field {
  background: #101010;
  border-color: #2d2d2d
}

 .colpick_dark .colpick_field_letter {
  background: #131313;
  border-color: #2d2d2d;
  color: #696969
}

 .colpick_dark .colpick_field input,
 .colpick_dark .colpick_hex_field input {
  color: #7a7a7a
}

 .colpick_dark .colpick_field_uarr {
  border-bottom-color: #696969
}

 .colpick_dark .colpick_field_darr {
  border-top-color: #696969
}

 .colpick_dark .colpick_focus {
  border-color: #444
}

 .colpick_dark .colpick_submit {
  background: #131313;
  border-color: #2d2d2d;
  color: #7a7a7a
}

 .colpick_dark .colpick_submit:hover {
  background-color: #101010;
  border-color: #444
}

 .overflow-hidden {
  overflow: hidden
}

 .koleditor-styleCenter {
  border: 1px solid #dddee1;
  border-radius: 4px 4px 0 0;
  margin: 0 4px;
  font-size: 14px;
  box-sizing: border-box;
  overflow: hidden;
  display: none
}

 .koleditor-styleCenter .koleditor-styleCenter-header {
  background: #f9fafc
}

 .koleditor-styleCenter .koleditor-styleCenter-title {
  padding-left: 10px;
  color: #4c637b;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 600;
  background-color: #ebeff5
}

 .koleditor-styleCenter .koleditor-styleCenter-title .koleditor-styleCenter-icon {
  width: 32px;
  display: inline-block;
  margin-right: 6px
}

 .koleditor-styleCenter .koleditor-styleCenter-title .koleditor-styleCenter-icon img {
  width: 100%;
  vertical-align: middle
}

 .koleditor-styleCenter .koleditor-styleCenter-title .fa-refresh {
  float: right;
  font-size: 18px;
  color: #2bb1fe;
  margin-top: 15px;
  margin-right: 10px;
  cursor: pointer;
  transition: all .3s ease-in-out
}

 .koleditor-styleCenter .koleditor-styleCenter-title .fa-refresh:hover {
  transform: rotate(180deg)
}

 .koleditor-styleCenter .koleditor-styleCenter-label ul {
  padding: 0;
  margin: 0
}

 .koleditor-styleCenter .koleditor-styleCenter-label ul li {
  display: inline-block;
  color: #666666;
  font-size: 14px;
  margin: 6px 8px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  border-bottom: 2px solid transparent;
  box-sizing: border-box
}

 .koleditor-styleCenter .koleditor-styleCenter-label ul li.active,
 .koleditor-styleCenter .koleditor-styleCenter-label ul li:hover {
  color: #00a0e9
}

 .koleditor-styleCenter .koleditor-styleCenter-label ul li.active {
  border-bottom: 2px solid #00a0e9
}

.koleditor-styleCenter .koleditor-styleCenter-label .koleditor-styleCenter-label-fail {
  height: 45px;
  line-height: 58px;
  color: #2bb1fe;
  text-align: center
}

.koleditor-styleCenter .koleditor-styleCenter-search {
  padding: 2px 10px 10px;
  position: relative
}

.koleditor-styleCenter .koleditor-styleCenter-search input {
  width: 100%;
  font-size: 14px;
  border-radius: 5px;
  outline: none;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #bfc6cc;
  padding: 0 56px 0 12px
}

.koleditor-styleCenter .koleditor-styleCenter-search input::placeholder {
  color: #879eb6;
  opacity: 1
}

.koleditor-styleCenter .koleditor-styleCenter-search input:focus {
  border-color: #2bb1fe;
  box-shadow: 0 0 3px #2bb1fe
}

.koleditor-styleCenter .koleditor-styleCenter-search span {
  background-color: #fff;
  color: #00a0e9;
  border: none;
  outline: none;
  position: absolute;
  right: 18px;
  font-size: 14px;
  top: 7px;
  cursor: pointer
}

.koleditor-styleCenter .koleditor-styleCenter-search span .fa-search {
  transition: all .3s ease-in-out
}

.koleditor-styleCenter .koleditor-styleCenter-search span:hover .fa-search {
  transform: scale(1.1)
}

.koleditor-styleCenter .koleditor-styleCenter-inner {
  position: relative
}

.koleditor-styleCenter .koleditor-styleCenter-list {
  overflow-y: auto;
  background: #f9fafc;
  position: relative
}

.koleditor-styleCenter .koleditor-styleCenter-list .style-item {
  position: relative;
  overflow: hidden;
  background: #fff;
  margin: 5px;
  padding: 5px 10px;
  cursor: pointer;
  min-height: 60px;
  border-radius: 5px;
  transition: all .2s ease-in-out
}

.koleditor-styleCenter .koleditor-styleCenter-list .style-item:hover {
  box-shadow: 2px 4px 6px rgba(204, 204, 204, 0.5)
}

.koleditor-styleCenter .koleditor-styleCenter-list .style-item img {
  max-width: 100%
}

.koleditor-styleCenter .koleditor-styleCenter-list .koleditor-styleCenter-inner-nodata {
  width: 100%;
  height: 200px;
  margin-top: 40px;
  color: #2bb1fe;
  padding-top: 172px;
  text-align: center;
  box-sizing: border-box;
  color: #4c637b;
  font-weight: 600;
  font-size: 16px;
  background: url("http://mcustom.365editor.com/static/images/nodata.png") no-repeat center center/auto 100%
}

.koleditor-styleCenter .koleditor-styleCenter-inner .koleditor-styleCenter-inner-loading {
  position: absolute;
  background: rgba(255, 255, 255, 0.1)
}

.koleditor-monitor {
  background-color: #d2dae4;
  color: #666666;
  font-size: 14px;
  padding: 0px 10px;
  height: 30px;
  line-height: 30px
}

.koleditor-tools {
  position: absolute;
  display: none;
  right: -125px;
  top: 0;
  z-index: 20001
}

.koleditor-tools a,
.koleditor-tools li {
  background-color: #f4f4f4;
  display: block;
  width: 115px;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #231815;
  font-size: 14px;
  line-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  text-align: center;
  position: relative;
  cursor: pointer
}

.koleditor-tools a i,
.koleditor-tools li i {
  margin-right: 10px;
  font-size: 19px
}

.koleditor-styleCenter-inner-loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 999999
}

.koleditor-styleCenter-inner-loading #preloader_1 {
  position: relative;
  margin: 0 auto;
  width: 42px;
  height: 42px;
  top: 50%;
  margin-top: -21px;
  animation: preloader_1 5s infinite linear
}

.koleditor-styleCenter-inner-loading #preloader_1 span {
  width: 20px;
  height: 20px;
  position: absolute;
  background: red;
  display: block;
  animation: preloader_1_span 1s infinite linear
}

.koleditor-styleCenter-inner-loading #preloader_1 span:nth-child(1) {
  background: #2ecc71
}

.koleditor-styleCenter-inner-loading #preloader_1 span:nth-child(2) {
  left: 22px;
  background: #9b59b6;
  animation-delay: .2s
}

 .koleditor-styleCenter-inner-loading #preloader_1 span:nth-child(3) {
  top: 22px;
  background: #3498db;
  animation-delay: .4s
}

 .koleditor-styleCenter-inner-loading #preloader_1 span:nth-child(4) {
  top: 22px;
  left: 22px;
  background: #f1c40f;
  animation-delay: .6s
}

 @keyframes preloader_1 {
  from {
    -ms-transform: rotate(0deg)
  }

  to {
    -ms-transform: rotate(360deg)
  }
}

 @keyframes preloader_1_span {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(0.5)
  }

  100% {
    transform: scale(1)
  }
}

 .material-operation-tools {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 20002
}

 .material-operation-tools .tools-bar {
  display: inline-block;
  width: auto;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  background-color: rgba(76, 99, 123, 0.95);
  border-radius: 35px;
  -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  margin-bottom: 5px
}

 .material-operation-tools li.operation-item,
 .material-operation-tools li.operation-split {
  display: inline-block;
  vertical-align: top;
  list-style: none;
  position: relative
}

 .material-operation-tools .bubbleTips {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  top: -50px;
  color: #fff
}

 .material-operation-tools .bubbleTips em {
   padding-left: 10px;
   padding-right: 10px;
   text-align: center;
  display: inline-block;
  font-style: normal;
}

.material-operation-tools .bubbleTips i {
  top: 35px;
  position: absolute;
  color: rgba(0, 0, 0, 0.8)
}

.material-operation-tools a {
  display: inline-block;
  height: 30px;
  line-height: 28px;
  padding: 0 8px;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  margin-left: 3px;
  transition: all .3s ease
}

.material-operation-tools a:hover {
  background: rgba(32, 160, 255, 0.6);
  color: #fff
}

.material-operation-tools a i {
  font-size: 18px;
  vertical-align: middle
}

.material-operation-tools .choose-insert-row {
  display: none;
  position: absolute;
  top: 30px;
  width: 100px;
  background-color: rgba(76, 99, 123, 0.95);
  border-radius: 4px;
  padding: 5px;
  -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  z-index: 999
}

.material-operation-tools .choose-insert-row li {
  height: 30px;
  line-height: 30px;
  list-style: none;
  text-align: left;
  padding: 0 5px;
  color: #fff;
  border-bottom: 1px #666 solid;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: all .3s ease
}

.material-operation-tools .choose-insert-row li:hover {
  background: rgba(32, 160, 255, 0.6)
}

.material-operation-tools li.operation-split {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(170, 170, 170, 0.8);
  margin: 10px 5px 0 5px
}

.material-operation-tools .colorPicker-alone {
  float: left;
  margin: 5px 5px 0 5px;
  height: 25px;
  width: 25px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px #fff solid;
  cursor: pointer;
  background: #13CE66
}

.material-operation-tools .set-all-color {
  display: none;
  position: absolute;
  top: 30px;
  right: -130px;
  width: 312px;
  background-color: rgba(76, 99, 123, 0.95);
  border-radius: 4px;
  padding: 5px 10px;
  -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  z-index: 999
}

.material-operation-tools .set-style,
.material-operation-tools .set-imgwidth {
  display: none;
  position: absolute;
  top: 30px;
  right: -50px;
  width: 310px;
  background-color: rgba(76, 99, 123, 0.95);
  border-radius: 4px;
  padding: 5px 10px;
  -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  z-index: 999
}

.material-operation-tools .set-style li,
.material-operation-tools .set-imgwidth li {
  position: relative;
  list-style: none;
  height: 40px;
  line-height: 40px
}

.material-operation-tools .set-style li .prop-name,
.material-operation-tools .set-imgwidth li .prop-name {
  float: left;
  display: inline-block;
  padding: 0 5px;
  width: 80px;
  color: #fff;
  font-size: 16px
}

.material-operation-tools .set-style li .prop-name i,
.material-operation-tools .set-imgwidth li .prop-name i {
  font-size: 18px;
  margin-right: 5px
}

.material-operation-tools .set-style li .fill-item,
.material-operation-tools .set-imgwidth li .fill-item {
  float: left;
  position: relative;
  width: 150px
}

.material-operation-tools .set-style li .fill-item input,
.material-operation-tools .set-imgwidth li .fill-item input {
  display: none
}

.material-operation-tools .set-style li input,
.material-operation-tools .set-imgwidth li input {
  padding-left: 5px;
  background: transparent;
  border: 1px #ccc solid;
  float: right;
  border-radius: 4px;
  outline: none;
  color: #fff
}

.material-operation-tools .set-style li .company,
.material-operation-tools .set-imgwidth li .company {
  font-style: normal;
  position: absolute;
  top: 0;
  right: 20px;
  color: #aaa
}

.material-operation-tools .set-font-line-height {
  display: none;
  position: absolute;
  top: 30px;
  width: 100px;
  background-color: rgba(76, 99, 123, 0.95);
  border-radius: 4px;
  padding: 5px;
  -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  z-index: 999
}

.material-operation-tools .set-font-line-height li {
  list-style: none
}

.material-operation-tools .set-font-line-height input#setLineHeight {
  padding-left: 5px;
  width: 90%;
  background: transparent;
  border: 1px #ccc solid;
  border-radius: 4px;
  outline: none;
  color: #fff;
  text-align: left
}

.material-operation-tools .set-font-line-height .company {
  font-style: normal;
  position: absolute;
  top: 5px;
  right: 22px;
  color: #aaa
}

.material-operation-tools .set-font-size-item .set-font-size {
  display: none;
  position: absolute;
  top: 30px;
  width: 50px;
  max-height: 120px;
  overflow-y: auto;
  background-color: rgba(76, 99, 123, 0.95);
  border-radius: 4px;
  padding: 5px;
  -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3)
}

.material-operation-tools .set-font-size-item .set-font-size li {
  height: 30px;
  line-height: 30px;
  list-style: none;
  text-align: left;
  padding: 0 5px;
  color: #fff;
  border-bottom: 1px #666 solid;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: all .3s ease
}

.material-operation-tools .set-font-size-item .set-font-size li:hover {
  background: rgba(32, 160, 255, 0.6)
}

.material-operation-tools .set-font-size-item input {
  width: 38px;
  height: 20px;
  line-height: 20px;
  padding-left: 5px;
  background: transparent;
  border: 1px #ccc solid;
  border-radius: 4px;
  outline: none;
  color: #fff;
  text-align: right
}

.material-operation-tools .colorPicker-alone-font-color {
  float: left;
  margin: 5px 5px 0 5px;
  height: 25px;
  width: 25px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px #fff solid;
  cursor: pointer;
  background: #f0f0f0
}

.material-operation-tools .colorPicker-alone-font-bg-color {
  float: left;
  margin: 5px 5px 0 5px;
  height: 25px;
  width: 25px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px #fff solid;
  cursor: pointer;
  background: #f0f0f0
}

.material-operation-tools .colorPicker-alone-image-border-color {
  float: left;
  margin: 5px 5px 0 5px;
  height: 25px;
  width: 25px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px #fff solid;
  cursor: pointer;
  background: #f0f0f0
}

.material-operation-tools .input-val-small {
  width: 40px;
  height: 25px;
  margin: 5px 5px 0 0
}

.material-operation-tools .input-val-big {
  width: 190px;
  height: 25px;
  margin: 5px 5px 0 0
}

.material-operation-tools .senior-image-tools {
  color: #fff
}

.material-operation-tools .senior-image-tools input {
  padding-left: 5px;
  background: transparent;
  border: 1px #ccc solid;
  border-radius: 4px;
  outline: none;
  color: #fff;
  text-align: right
}

.material-operation-tools .set-image-border {
  display: none;
  position: absolute;
  top: 30px;
  right: -50px;
  width: 220px;
  background-color: rgba(76, 99, 123, 0.95);
  border-radius: 4px;
  padding: 5px 10px;
  -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  z-index: 999
}

.material-operation-tools .set-image-border li {
  position: relative;
  list-style: none;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px
}

.material-operation-tools .set-image-border li .prop-name {
  float: left;
  display: inline-block;
  padding: 0 5px;
  width: 50px;
  color: #fff;
  font-size: 16px
}

.material-operation-tools .set-image-border li .prop-name i {
  font-size: 18px;
  margin-right: 5px
}

.material-operation-tools .set-image-border li .fill-item {
  float: left;
  position: relative;
  width: 160px
}

.material-operation-tools .set-image-border li .fill-item input {
  width: 95%
}

.material-operation-tools .set-image-border li select {
  width: 100%;
  height: 30px;
  padding: 0 12px;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 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;
  outline: none;
  position: relative;
  z-index: 99
}

.material-operation-tools .set-image-border li select option {
  color: #333
}

.material-operation-tools .set-image-border li input {
  padding-left: 5px;
  background: transparent;
  border: 1px #ccc solid;
  border-radius: 4px;
  outline: none;
  color: #fff;
  text-align: left;
  position: relative;
  z-index: 99
}

.material-operation-tools .set-image-border li #set-image-border-radius-unit {
  position: absolute;
  top: 5px;
  right: 0;
  width: 60px;
  border: 0
}

.material-operation-tools .set-image-shadow {
  display: none;
  position: absolute;
  top: 30px;
  right: -50px;
  width: 220px;
  background-color: rgba(76, 99, 123, 0.95);
  border-radius: 4px;
  padding: 5px 10px;
  -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 2px 3px 6px rgba(0, 0, 0, 0.3);
  z-index: 999
}

.material-operation-tools .set-image-shadow li {
  position: relative;
  list-style: none;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px
}

.material-operation-tools .set-image-shadow li .prop-name {
  float: left;
  display: inline-block;
  padding: 0 5px;
  width: 50px;
  color: #fff;
  font-size: 16px
}

.material-operation-tools .set-image-shadow li .prop-name i {
  font-size: 18px;
  margin-right: 5px
}

.material-operation-tools .set-image-shadow li .fill-item {
  float: left;
  position: relative;
  width: 160px
}

.material-operation-tools .set-image-shadow li .fill-item .bubble-slider {
  display: none
}

.material-operation-tools .set-image-shadow li .fill-item input {
  width: 95%
}

.material-operation-tools .set-image-shadow li select {
  width: 100%;
  height: 30px;
  padding: 0 12px;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 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;
  outline: none
}

.material-operation-tools .set-image-shadow li input {
  padding-left: 5px;
  background: transparent;
  border: 1px #ccc solid;
  border-radius: 4px;
  outline: none;
  color: #fff;
  text-align: left
}

.material-operation-tools .set-image-shadow li .company {
  font-style: normal;
  position: absolute;
  top: 0px;
  right: 22px;
  color: #aaa
}

.material-operation-tools .set-image-shadow li #set-image-border-radius-unit {
  position: absolute;
  top: 5px;
  right: 0;
  width: 60px;
  border: 0
}

.edui-default .edui-for-cleardoc .edui-icon {
  background: url("http://mcustom.365editor.com/static/images/cleardoc.png") center no-repeat !important;
  background-size: 14px 14px !important
}