:root {
  /*editor*/
  --themeColor: #409eff;
  --themeColor90: rgba(64, 158, 255, .9);
  --themeColor80: rgba(64, 158, 255, .8);
  --themeColor70: rgba(64, 158, 255, .7);
  --themeColor60: rgba(64, 158, 255, .6);
  --themeColor50: rgba(64, 158, 255, .5);
  --themeColor40: rgba(64, 158, 255, .4);
  --themeColor30: rgba(64, 158, 255, .3);
  --themeColor20: rgba(64, 158, 255, .2);
  --themeColor10: rgba(64, 158, 255, .1);

  --highlightColor: rgba(102, 177, 255, .6);
  --selectionColor: rgba(102, 177, 255, .3);
  --editorColor: rgba(255, 255, 255, .7);
  --editorColor80: rgba(255, 255, 255, .8);
  --editorColor60: rgba(255, 255, 255, .6);
  --editorColor50: rgba(255, 255, 255, .5);
  --editorColor40: rgba(255, 255, 255, .4);
  --editorColor30: rgba(255, 255, 255, .3);
  --editorColor10: rgba(255, 255, 255, .1);
  --editorColor04: rgba(255, 255, 255, .04);
  --editorBgColor: #282828;
  --deleteColor: #409eff;
  --iconColor: rgba(255, 255, 255, .56);
  --codeBgColor: #424344;
  --codeBlockBgColor: #424344;
  --footnoteBgColor: rgba(66, 67, 68, .3);
  --inputBgColor: #2f3336;

  --focusColor: var(--themeColor);

  --buttonFontColor: rgba(255, 255, 255, .6);
  --buttonBgColor: #424344;
  --buttonBorder: 1px solid rgba(0, 0, 0, 0.2);
  --buttonShadow: none;
  --buttonFontColorHover: var(--buttonFontColor);
  --buttonBgColorHover: #4f5051;
  --buttonBorderHover: 1px solid rgba(0, 0, 0, 0.3);
  --buttonFontColorActive: var(--buttonFontColor);
  --buttonBgColorActive: #333434;
  --buttonBorderActive: var(--buttonBorder);

  --buttonPrimaryFontColor: #ffffff;
  --buttonPrimaryBgColor: var(--themeColor);
  --buttonPrimaryBorder: none;
  --buttonPrimaryShadow: none;
  --buttonPrimaryFontColorHover: var(--buttonPrimaryFontColor);
  --buttonPrimaryBgColorHover: #5aabff;
  --buttonPrimaryBorderHover: var(--buttonPrimaryBorder);
  --buttonPrimaryFontColorActive: var(--buttonPrimaryFontColor);
  --buttonPrimaryBgColorActive: #2791ff;
  --buttonPrimaryBorderActive: var(--buttonPrimaryBorder);
  --buttonPrimaryFocusBorder: none;
  --buttonPrimaryFocusShadow: inset 0 0 0 1px rgba(24, 26, 31, 0.5), 0 0 0 1px var(--themeColor);
  --tableBorderColor: #363839;

  /*marktext*/
  --sideBarColor: rgba(255, 255, 255, .6);
  --sideBarIconColor: var(--iconColor);
  --sideBarTitleColor: rgba(255, 255, 255, .8);
  --sideBarTextColor: rgba(255, 255, 255, .4);
  --sideBarBgColor: #1e1e1e;
  --sideBarItemHoverBgColor: rgba(255, 255, 255, .03);
  --itemBgColor: #3f3f3f;

  --floatFontColor: rgba(255, 255, 255, .7);
  --floatBgColor: #3f3f3f;
  --floatHoverColor: rgba(255, 255, 255, .04);
  --floatBorderColor: rgba(0, 0, 0, .05);
  --floatShadow: rgba(0, 0, 0, 0.2);
  --maskColor: rgba(0, 0, 0, .7);
  /* --editorAreaWidth: 750px; */
  --editorAreaWidth:calc(90vw);
}

::-webkit-scrollbar {
  background: var(--editorBgColor);
}

.ag-front-menu .submenu,
.ag-float-wrapper {
  box-shadow: 0 4px 8px 0 var(--floatShadow) !important;
}

.title-bar .frameless-titlebar-button > div > svg {
  fill: #ffffff;
}
.title-bar .frameless-titlebar-minimize:hover,
.title-bar .frameless-titlebar-toggle:hover {
  background-color: rgb(255, 255, 255, .05);
}

.side-bar {
  border-right: 1px solid #1d1d1d !important;
}

.recent-files-projects a,
.open-project a {
  box-shadow: none !important;
}

.editor-tabs {
  box-shadow: none !important;
}
.editor-tabs:after {
  position: absolute;
  content: '';
  border-bottom: 1px solid #1d1d1d;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.editor-tabs ul.tabs-container:after {
  position: absolute;
  content: '';
  border-bottom: 1px solid #1d1d1d;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.tabs-container > li,
.tabs-container > li.active {
  background: var(--editorBgColor) !important;
}

.open-project button,
.recent-files-projects button {
  box-shadow: none !important;
}

/* ------------------------------------ */

:not(pre) > code[class*="language-"],
pre:not(.CodeMirror-line),
pre[class*="language-"],
pre.ag-paragraph {
  background: var(--codeBlockBgColor) !important;
  border: none !important;
}
p:not(.ag-active)[data-role="hr"]::before {
  border-top: 2px dashed var(--editorColor10) !important;
  background: none !important;
}
figure.ag-active.ag-container-block > div.ag-container-preview {
  box-shadow: 0 3px 8px 0 var(--floatShadow) !important;
}

/*
 * Prism.js theme (override light theme)
 */

/* @import url("prismjs/dark.theme.css"); */

