/*通用*/
body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
html,body{ margin:0; padding:0; background:#797979; overflow:hidden; font-size:14px; font-family:'微软雅黑'; color:#eee; }
ul,li{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none; }
table,td{ border:0; padding:0;}
.but{ background:#7a7a7a; color:#eee; font-size:12px; line-height:12px; padding:2px 5px 2px 5px; }
.but{ border-radius:3px; border:1px #3f3f3f solid; letter-spacing:1px; cursor:pointer; }
#debugDiv{position:absolute; background:#fff; color:#000; padding:5px; top:40px; left:10px; display:none; }
.win{ position:absolute; z-index:999; background:#eee; border:1px #666666 solid; border-radius:5px; }
.win{ -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);  -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);  box-shadow: 2px 2px 2px rgba(0,0,0,0.4); }
.win{ left:10px; top:10px; display:none; }
.win .titleBar{ margin:1px 1px 0 1px; background:#595959; color:#fff; height:30px; line-height:30px;  border-radius:4px 4px 0 0;}
.win .titleBar{ border-bottom:1px #666666 solid; cursor:default; }
.win .titleBar span{ float:left; margin-left:5px; }
.win .titleBar i{ float:right; width:20px; height:20px; border-radius:3px; margin:5px 5px 0 0; background:#ccc url(images/close.png); }
.win .titleBar i:hover{ background-color:#fff;  }
.win .body{ color:#333; }
.winLoad{ text-align:center; padding:30px 70px 30px 110px; background:url(images/ajax.gif) 60px 25px no-repeat; }

.mask{ position:absolute; z-index:900; background:#000; opacity:0.5; display:none; }

#tip{ position:absolute; z-index:100; left:0; top:0; background:#000; border-radius:5px; padding:10px 20px 10px 20px; display:none; opacity:0.7; }
#addCustomTip{ position:absolute; z-index:100; left:0; top:80px; background:#ff0000; color:#fff; border-radius:5px; padding:10px 20px 10px 20px; opacity:0.9; display:none; }
#customAttribute{ position:absolute; z-index:120; left:80px; top:80px; border:1px solid #575757; display:none; }
#customAttribute .heads{ background:#7b7b7b; border-top:1px solid #9b9b9b; border-bottom:1px solid #575757; height:8px; }
#customAttribute .mains{ background:#eeeeee; padding:5px;}

/*顶部*/
.head{ border-bottom:1px #353535 solid; }
.head .logo{ float:left; margin:8px 0 0 5px; width:16px; height:17px; }
.head .main{ height:33px; background:#595959; border-bottom:1px #8e8e8e solid; }
.head ul{ float:left; padding:5px 0 0 5px; }
.head li{ float:left; margin:2px 5px 0 0; cursor:default;  }
.head li span{ height:20px; line-height:20px; border:1px #595959 solid; padding:1px 7px 1px 7px; }
.head li span:hover{background:#707070; border:1px #2c2c2c solid; border-radius:5px; }
.head li .current,.head li .current:hover{background:#393939; border:1px #2c2c2c solid; border-radius:5px; }
 
.head li ul{ position:absolute; z-index:10; background:#cfcfcf; border:1px #434343 solid; margin:1px 0 0 0px; padding:2px; display:none; border-radius:4px; }
.head li ul{ -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.4); -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.4); box-shadow: 2px 2px 2px rgba(0,0,0,0.4);}
.head li ul li{ float:none; cursor:default; color:#333; margin:0; padding:0; padding-left:5px; height:30px; line-height:30px; width:200px; }
.head li ul li i{ float:right; color:#999; font-size:12px; margin-right:12px; }
.head li ul li:hover{ background:#5a81bd; color:#fff; }
.head li ul .line{ height:1px; border-top:#969696 solid 1px; background:#ebebeb; margin:2px 0 2px 0 ; }

.head .userInfo{ float:right; padding:6px 8px 0 0 ; cursor:default; }
.userMenu{ display:none; }

#filename{ position:absolute; text-align:center; line-height:33px; }

/*预览界面*/
.preview{ height:327px; overflow-x:auto; overflow-y:scroll;}
.preview .page{width:1000px; height:1415px; border:1px #666 solid; margin:20px auto 30px auto; background:#fff; }
.preview .page{ -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);  -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);  box-shadow: 2px 2px 2px rgba(0,0,0,0.4); }
.preview .svgList{ width:1000px; margin:auto; position:relative; padding-bottom:30px; }
#playerLine{ background:#1a8b00; border-radius:5px; width:18px; height:45px; opacity:0.5; position:absolute; display:none; }
#cursor{ background:url(images/cursor.gif); border-radius:2px; width:2px; height:35px; position:absolute; display:none; }

/*编辑器*/
.editor{ height:250px; background:#333333; }
.editor .line{ border-top:1px #454545 solid;}
.editor .line .main{ border:1px #6a6a6a solid; border-width:1px 0 1px 0; background:#595959; height:3px; }
.editor .body{ height:242px; }

/*底部工具条*/
.foot{ border-top:1px #282828 solid;}
.foot .main{ border-top:1px #4a4a4a solid; height:28px; background:#3a3a3a; }

.foot ul{ float:left; }
.foot li{ float:left; width:70px; text-align:center; line-height:28px; cursor:default; border-right:1px #282828 solid; letter-spacing:1px; }
.foot .current{ background:#535353;}

.foot .softInfo{ float:right; line-height:28px; color:#aaa; margin-right:10px; font-size:12px; }

/*编辑器颜色高亮样式*/
.editor_common{ width:3000px; height:2000px; font-size:16px; font-family:'微软雅黑','宋体'; padding:10px; padding-right:0; border:0;}
.editor_common{line-height:27px; position:absolute; color:#ccc; overflow:hidden;}
.editor_common{ min-width:100%; min-height:100%; box-sizing:border-box; }
.editor_text{ background:#333; outline:none; resize:none; }
.editor_div{ pointer-events:none; text-shadow: 2px 0px 0px #333,-2px 0px 0px #333,0px 2px 0px #333,0px -2px 0px #333;}
.num{ color:#ff9c00; }
.kuohu{ color:#0051FF; }
.dakuohu{ color:#00fff6; }
.xiaojiexian{ color:#ff0000; }
.hangtou{ color:#0C0; }
.zhushi{ color:#666; }
.qu{ color:#7a7a7a; }
.fenye{ color:#FF0; }



::-webkit-scrollbar{ width: 16px; height: 16px; background-color: #424242;}
::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #424242; }
::-webkit-scrollbar-thumb{ border-radius: 3px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #7e7e7e; }


/*文件浏览器*/
.fileBrow{ background:#ffffff; border:1px #b8b8b8 solid; float:left; margin:5px; border-radius:3px;  }


.fileBrow ::-webkit-scrollbar{ width: 12px; height: 16px; background-color: #424242;}
.fileBrow ::-webkit-scrollbar-track{ -webkit-box-shadow:none; background-color: #eee; }
.fileBrow ::-webkit-scrollbar-thumb{ border-radius: 0px; -webkit-box-shadow:none; background-color: #ccc; }

.fileBrow .item{ background:#eee; height:30px; line-height:28px; padding:0 0 0 5px;}
.fileBrow .folderName{ float:left; }
.fileBrow .newFolder{ float:right; font-size:12px; line-height:12px; padding:3px 4px 3px 4px; margin:5px 5px 0 0; cursor:pointer; border:1px #eee solid;  }
.fileBrow .newFolder:hover{ border-radius:3px; border:1px #333333 solid; background:#999; color:#FFF; }

.fileBrow .loadTip{ text-align:center; padding:40px 0 0 0; color:#CCC; background:url(images/ajax2.gif) no-repeat center 20px;}

.fileCateList{ width:200px; height:350px; }
.fileCateList .list{ width:200px; height:320px; overflow:auto; overflow-x:hidden; }
.fileCateList .list li{ height:25px;}
.fileCateList .list li .name{ float:left; font-size:14px; line-height:18px; cursor:default; margin-top:4px; padding:0 2px 0 2px; border:#fff solid 1px; }
.fileCateList .list li .current{ border:#66a7e8 solid 1px; background:#d1e8ff; border-radius:3px; }
.fileCateList .list li .icon{ float:left; background:url(images/icon.png) no-repeat; width:20px; height:25px;}

.fileBrowsMenu{ display:none; position:absolute; left:0; top:0; background:#cfcfcf; border:1px #434343 solid; padding:2px; border-radius:4px; width:120px; }
.fileBrowsMenu li{ height:25px; line-height:23px; cursor:default; padding:0 3px 0 3px; }
.fileBrowsMenu li:hover{ background:#5a81bd; color:#fff; }

.folderDiv{ position:absolute; margin:0; padding:10px; border:#666 solid 1px; background:#f0f0f0; border-radius:5px; display:none; }
.folderDiv{ -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);  -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);  box-shadow: 2px 2px 2px rgba(0,0,0,0.4); }
.folderDiv .name{ width:150px; }
.newFolderDiv{ left:160px; top:190px; }
.reFolderDiv{ left:170px; top:190px; }
.reFileDiv{ left:160px; top:190px; }
.fileMoveDiv{ left:180px; top:190px; }
.fileMoveDiv select{ width:150px; }



.fileList{ width:500px; height:310px; margin:5px 5px 0 0;}
.fileList .item ul li{ float:left; }
.fileList .item .fileName{ width:300px; }
.fileList .list{ height:276px; overflow:auto; overflow-x:hidden; padding:2px 0 2px 0; }
.fileList .list ul li{ width:100%; height:26px; }
.fileList .list .icon{ float:left; background:url(images/icon.png) 0 -40px no-repeat; width:20px; height:25px; }
.fileList .list .name{ float:left; cursor:default; border:#fff solid 1px; padding:0 1px 0 1px; }
.fileList .list .lastEdit{ float:right; width:197px; }
.fileList .list .current{ border:#66a7e8 solid 1px; background:#d1e8ff; border-radius:3px; }

.customSymbolList{ margin:5px; width:570px; display:table; }
.customSymbolList div{ display:table; }
.customSymbolList img{ float:left; margin:3px; cursor:pointer; border:1px #CCCCCC solid; border-radius:4px; width:30px; height:30px; }

/* Modern workspace shell */
html, body {
  background: #d9e8fb;
  color: #152235;
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
}

.modern-bg {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(246, 250, 255, 0.9), rgba(142, 183, 235, 0.55)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 32%);
  pointer-events: none;
}

.head {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 14px;
  z-index: 20;
  border: 0;
}

.head .main {
  height: 48px;
  background: rgba(219, 234, 255, 0.72);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px 18px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  color: #132033;
}

.head .brand {
  float: left;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px 0 10px;
  color: #132033;
}

.head .logo {
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 8px;
}

.app-logo {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: linear-gradient(145deg, #ff6b5c, #d82f31);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 16px rgba(207, 64, 56, .24);
}

.app-logo::before {
  content: "";
  position: absolute;
  right: -3px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9e8fb;
  box-shadow: inset 1px -1px 0 rgba(90, 124, 166, .08);
}

.app-logo::after {
  content: "";
  position: absolute;
  left: 9px;
  top: -5px;
  width: 11px;
  height: 8px;
  border-radius: 12px 2px 12px 2px;
  background: linear-gradient(135deg, #6bd86e, #1f9b56);
  transform: rotate(-24deg);
}

.head ul {
  padding-top: 10px;
}

.head li span {
  color: #132033;
  border: 0;
  font-size: 15px;
}

.head li span:hover,
.head li .current,
.head li .current:hover {
  background: rgba(255,255,255,.62);
  border: 0;
  border-radius: 8px;
}

.head li ul {
  background: rgba(244, 249, 255, .96);
  border: 1px solid rgba(118, 150, 190, .45);
  color: #152235;
}

.head .userInfo {
  color: #132033;
  line-height: 34px;
}

.but {
  background: transparent;
  border: 0;
  color: #f18b22 !important;
  font-weight: 600;
}

#filename {
  top: 20px;
  z-index: 30;
  color: #0e1a2b;
  font-weight: 700;
  line-height: 36px;
}

.modern-toolbar {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 70px;
  z-index: 15;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: rgba(223, 237, 255, .72);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 36px rgba(62, 105, 159, .18), inset 0 1px 0 rgba(255,255,255,.8);
}

.modern-toolbar button,
.preview-actions button,
.editor-tabs button,
.modern-sidebar h3 button {
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 10px;
  background: rgba(255,255,255,.58);
  color: #1d2f47;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(88, 126, 172, .15);
}

.modern-toolbar button:hover,
.preview-actions button:hover,
.editor-tabs button:hover,
.modern-sidebar h3 button:hover {
  background: rgba(255,255,255,.84);
}

.modern-toolbar .primary {
  color: #1666e8;
  border-color: rgba(88, 151, 246, .45);
  background: rgba(241, 247, 255, .88);
}

.modern-toolbar .muted {
  color: #8a9ab1;
}

.toolbar-sep {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,.8);
  margin: 0 4px;
}

.modern-sidebar {
  position: absolute;
  left: 28px;
  top: 158px;
  width: 242px;
  z-index: 5;
  overflow: hidden;
}

.modern-sidebar section {
  background: rgba(223, 237, 255, .62);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 12px 30px rgba(62, 105, 159, .14), inset 0 1px 0 rgba(255,255,255,.75);
}

.modern-sidebar h3 {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #102139;
}

.modern-sidebar h3 button {
  float: right;
  width: 36px;
  height: 34px;
  padding: 0;
  font-size: 22px;
}

.modern-sidebar li {
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: #30445f;
  cursor: pointer;
}

.modern-sidebar li.active,
.modern-sidebar li:hover {
  background: rgba(255,255,255,.7);
  color: #1670ff;
}

.modern-sidebar .help {
  color: #526985;
  line-height: 1.7;
}

.modern-sidebar .help p {
  margin: 0 0 10px 0;
}

.modern-sidebar .help a {
  color: #1670ff;
}

.editor,
.preview {
  position: absolute;
  top: 158px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 14px;
  background: rgba(215, 231, 253, .68);
  box-shadow: 0 14px 35px rgba(62, 105, 159, .18), inset 0 1px 0 rgba(255,255,255,.78);
  overflow: hidden;
}

.editor {
  left: 290px;
  right: calc(50% + 12px);
}

.preview {
  left: calc(50% + 16px);
  right: 28px;
  overflow: auto;
}

.editor.editor-wide {
  left: 290px;
  right: 28px;
}

.preview.preview-wide {
  left: 290px;
  right: 28px;
}

.editor-tabs {
  height: 56px;
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 0 14px;
}

.editor-tabs .tab {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  background: rgba(255,255,255,.72);
  border-bottom: 3px solid #2d84ff;
  border-radius: 10px 10px 0 0;
  color: #13233a;
  font-weight: 600;
}

.editor .line {
  display: none !important;
}

.editor .body {
  margin: 0 12px 12px 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #f7fbff;
  box-shadow: inset 0 0 0 1px rgba(120, 157, 204, .22);
}

#editFrame {
  display: block;
  background: #f7fbff;
}

body:not(.dark-mode) .editor_text {
  background: #f7fbff;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: #1d5fd6;
}

body:not(.dark-mode) .editor_div {
  color: #233852;
  text-shadow: none;
}

body:not(.dark-mode) .num {
  color: #b86900;
}

body:not(.dark-mode) .kuohu {
  color: #2865d9;
}

body:not(.dark-mode) .dakuohu {
  color: #008b8f;
}

body:not(.dark-mode) .xiaojiexian {
  color: #d22d3c;
}

body:not(.dark-mode) .hangtou {
  color: #149952;
}

body:not(.dark-mode) .zhushi {
  color: #8a98aa;
}

body:not(.dark-mode) .qu {
  color: #4e6580;
}

body:not(.dark-mode) .fenye {
  color: #9f6500;
}

.preview .panel-title {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 58px;
  line-height: 58px;
  padding-left: 24px;
  color: #13233a;
  font-size: 16px;
  font-weight: 700;
  background: rgba(215, 231, 253, .88);
}

.preview-actions {
  position: sticky;
  top: 10px;
  float: right;
  z-index: 3;
  margin: 10px 18px 0 0;
  display: flex;
  gap: 10px;
}

.preview .svgList {
  padding-top: 24px;
}

.preview .page {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(49, 80, 124, .22);
}

.foot {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 20;
  border: 0;
}

.foot .main {
  height: 48px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 18px;
  background: rgba(131, 177, 229, .42);
  color: #233852;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
}

.foot li {
  line-height: 48px;
  border-right: 1px solid rgba(255,255,255,.45);
  color: #20344e;
}

.foot .current {
  background: rgba(255,255,255,.42);
}

.foot .softInfo {
  line-height: 48px;
  color: #233852;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #36c667;
  margin-right: 8px;
}

.win {
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(20, 38, 66, .25);
  background: rgba(245, 250, 255, .86);
  backdrop-filter: blur(22px) saturate(1.5);
  color: #16263d;
  overflow: hidden;
}

.win .titleBar {
  background: rgba(213, 229, 250, .86);
  border: 0;
  color: #13233a;
  font-weight: 600;
}

.win .body {
  color: #16263d;
  background: rgba(245, 250, 255, .86);
}

.win table {
  border-color: transparent !important;
  border-collapse: separate;
  border-spacing: 0 8px;
  color: inherit;
}

.win td,
.win th,
.win label,
.win p,
.win div {
  color: inherit;
}

.win input[type="text"],
.win input[type="password"],
.win input[type="number"],
.win textarea,
.win select,
.folderDiv input,
.folderDiv select,
.fileBrow input,
.fileBrow select {
  min-height: 28px;
  box-sizing: border-box;
  border: 1px solid rgba(100, 133, 176, .32);
  border-radius: 7px;
  background: rgba(255,255,255,.72);
  color: #13233a;
  outline: none;
  padding: 3px 8px;
}

.win textarea {
  min-height: 80px;
}

.win input:focus,
.win textarea:focus,
.win select:focus,
.folderDiv input:focus,
.folderDiv select:focus {
  border-color: rgba(45, 132, 255, .62);
  box-shadow: 0 0 0 3px rgba(45, 132, 255, .14);
}

.win input[type="button"],
.win button,
.folderDiv input[type="button"],
.fileBrow input[type="button"] {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(100, 133, 176, .32);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: #1d2f47;
  cursor: pointer;
}

.win input[type="button"]:hover,
.win button:hover,
.folderDiv input[type="button"]:hover,
.fileBrow input[type="button"]:hover {
  background: rgba(255,255,255,.92);
  border-color: rgba(45, 132, 255, .42);
  color: #1666e8;
}

.folderDiv,
.fileBrow {
  color: #16263d;
  background: rgba(245, 250, 255, .9);
  border-color: rgba(100, 133, 176, .28);
}

.head li ul,
.folderMenu,
.fileMenu,
.fileBrowsMenu {
  backdrop-filter: blur(24px) saturate(1.6);
  background: rgba(244, 250, 255, .78) !important;
  border-color: rgba(255,255,255,.8) !important;
  box-shadow: 0 18px 45px rgba(38, 68, 104, .22) !important;
}

.head li ul li:hover,
.fileBrowsMenu li:hover {
  background: rgba(55, 127, 242, .72);
  border-radius: 7px;
}

body.dark-mode {
  background: #0d1420;
  color: #ecf4ff;
}

body.dark-mode .modern-bg {
  background:
    radial-gradient(circle at 16% 8%, rgba(99, 146, 214, .28), rgba(13, 20, 32, 0) 34%),
    radial-gradient(circle at 84% 18%, rgba(84, 130, 190, .18), rgba(13, 20, 32, 0) 28%),
    linear-gradient(135deg, #0d1420 0%, #142236 46%, #182b42 100%);
}

body.dark-mode .app-logo::before {
  background: #0d1420;
}

body.dark-mode .head .main,
body.dark-mode .modern-toolbar,
body.dark-mode .modern-sidebar section,
body.dark-mode .editor,
body.dark-mode .preview,
body.dark-mode .foot .main {
  background: rgba(24, 38, 58, .72);
  border-color: rgba(170, 203, 242, .16);
  box-shadow: 0 22px 52px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.1);
}

body.dark-mode .head .brand,
body.dark-mode .head li span,
body.dark-mode #filename,
body.dark-mode .head .userInfo,
body.dark-mode .preview .panel-title,
body.dark-mode .modern-sidebar h3,
body.dark-mode .editor-tabs .tab {
  color: #edf5ff;
}

body.dark-mode .modern-sidebar li,
body.dark-mode .modern-sidebar .help,
body.dark-mode .foot .main,
body.dark-mode .foot .softInfo,
body.dark-mode .foot li {
  color: #c8d7ec;
}

body.dark-mode .modern-sidebar li.active,
body.dark-mode .modern-sidebar li:hover,
body.dark-mode .editor-tabs .tab,
body.dark-mode .modern-toolbar button,
body.dark-mode .preview-actions button,
body.dark-mode .editor-tabs button,
body.dark-mode .modern-sidebar h3 button {
  background: rgba(124, 169, 230, .13);
  border-color: rgba(172, 207, 247, .18);
  color: #e8f2ff;
}

body.dark-mode .modern-toolbar .primary {
  background: rgba(76, 132, 218, .2);
  color: #92bdff;
  border-color: rgba(146, 189, 255, .34);
}

body.dark-mode .editor .body {
  background: #111c2b;
  box-shadow: inset 0 0 0 1px rgba(172, 207, 247, .1);
}

body.dark-mode #editFrame {
  background: #111c2b;
}

body.dark-mode .editor_text {
  background: #111c2b;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: #72a8ff;
}

body.dark-mode .editor_div {
  color: #d8e6f7;
  text-shadow: none;
}

body.dark-mode .preview .panel-title {
  background: rgba(24, 38, 58, .88);
}

body.dark-mode .head li ul,
body.dark-mode .folderMenu,
body.dark-mode .fileMenu,
body.dark-mode .fileBrowsMenu,
body.dark-mode .win {
  background: rgba(24, 38, 58, .88) !important;
  color: #e9f2ff;
  border-color: rgba(172, 207, 247, .18) !important;
}

body.dark-mode .head li ul li,
body.dark-mode .fileBrowsMenu li,
body.dark-mode .folderMenu li,
body.dark-mode .fileMenu li {
  color: #dceaff;
}

body.dark-mode .head li ul li i,
body.dark-mode .fileBrowsMenu li i,
body.dark-mode .folderMenu li i,
body.dark-mode .fileMenu li i {
  color: #9fb3cc;
}

body.dark-mode .head li ul li:hover,
body.dark-mode .fileBrowsMenu li:hover,
body.dark-mode .folderMenu li:hover,
body.dark-mode .fileMenu li:hover {
  background: rgba(91, 145, 224, .34);
  color: #ffffff;
}

body.dark-mode .head li ul li:hover i,
body.dark-mode .fileBrowsMenu li:hover i,
body.dark-mode .folderMenu li:hover i,
body.dark-mode .fileMenu li:hover i {
  color: #d9e8ff;
}

body.dark-mode .head li ul .line,
body.dark-mode .fileBrowsMenu .line,
body.dark-mode .folderMenu .line,
body.dark-mode .fileMenu .line {
  background: rgba(199, 220, 247, .16);
  border-top-color: rgba(232, 242, 255, .32);
}

body.dark-mode .win .body,
body.dark-mode .fileBrow {
  color: #e9f2ff;
  background: rgba(24, 38, 58, .88);
}

body.dark-mode .win .titleBar {
  background: rgba(72, 92, 120, .78);
  color: #f2f7ff;
}

body.dark-mode .win table {
  color: #e9f2ff;
}

body.dark-mode .win input[type="text"],
body.dark-mode .win input[type="password"],
body.dark-mode .win input[type="number"],
body.dark-mode .win textarea,
body.dark-mode .win select,
body.dark-mode .folderDiv input,
body.dark-mode .folderDiv select,
body.dark-mode .fileBrow input,
body.dark-mode .fileBrow select {
  background: rgba(226, 238, 255, .1);
  color: #eef6ff;
  border-color: rgba(172, 207, 247, .2);
}

body.dark-mode .win input[type="text"]:focus,
body.dark-mode .win input[type="password"]:focus,
body.dark-mode .win input[type="number"]:focus,
body.dark-mode .win textarea:focus,
body.dark-mode .win select:focus,
body.dark-mode .folderDiv input:focus,
body.dark-mode .folderDiv select:focus {
  border-color: rgba(146, 189, 255, .58);
  box-shadow: 0 0 0 3px rgba(91, 145, 224, .2);
}

body.dark-mode .win input[type="button"],
body.dark-mode .win button,
body.dark-mode .folderDiv input[type="button"],
body.dark-mode .fileBrow input[type="button"] {
  background: rgba(226, 238, 255, .12);
  color: #edf5ff;
  border-color: rgba(172, 207, 247, .2);
}

body.dark-mode .win input[type="button"]:hover,
body.dark-mode .win button:hover,
body.dark-mode .folderDiv input[type="button"]:hover,
body.dark-mode .fileBrow input[type="button"]:hover {
  background: rgba(91, 145, 224, .28);
  color: #ffffff;
  border-color: rgba(146, 189, 255, .42);
}

body.dark-mode .fileBrow .item,
body.dark-mode .folderDiv {
  background: rgba(19, 31, 48, .86);
  color: #e9f2ff;
  border-color: rgba(172, 207, 247, .18);
}

body.dark-mode .fileCateList .list li .name,
body.dark-mode .fileList .list li .name,
body.dark-mode .fileInfo,
body.dark-mode .win label,
body.dark-mode .win td,
body.dark-mode .win p {
  color: #dceaff;
}

body.dark-mode .fileCateList .list li .current,
body.dark-mode .fileList .list .current {
  background: rgba(91, 145, 224, .28);
  border-color: rgba(146, 189, 255, .46);
  color: #ffffff;
}

body.dark-mode .toolbar-sep {
  background: rgba(199, 220, 247, .34);
}

body.dark-mode .modern-sidebar .help a {
  color: #8fbaff;
}

body.dark-mode .modern-sidebar li.active,
body.dark-mode .modern-sidebar li:hover {
  color: #ffffff;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: rgba(255,255,255,.1);
  color: #eef6ff;
  border: 1px solid rgba(255,255,255,.16);
}

@media (max-width: 900px) {
  .modern-sidebar {
    display: none;
  }
  .editor,
  .preview,
  .editor.editor-wide,
  .preview.preview-wide {
    left: 20px;
    right: 20px;
  }
  .editor {
    top: 150px;
    height: 42vh !important;
  }
  .preview {
    top: calc(150px + 42vh + 14px);
    height: calc(100vh - 150px - 42vh - 96px) !important;
  }
  .modern-toolbar {
    overflow-x: auto;
  }
}