:root {
  /*editor*/
  --themeColor: #f48237;
  --themeColor90: rgba(244, 130, 55, .9);
  --themeColor80: rgba(244, 130, 55, .8);
  --themeColor70: rgba(244, 130, 55, .7);
  --themeColor60: rgba(244, 130, 55, .6);
  --themeColor50: rgba(244, 130, 55, .5);
  --themeColor40: rgba(244, 130, 55, .4);
  --themeColor30: rgba(244, 130, 55, .3);
  --themeColor20: rgba(244, 130, 55, .2);
  --themeColor10: rgba(244, 130, 55, .1);

  --highlightColor: rgba(244, 130, 55, .4);
  --selectionColor: rgba(255, 255, 255, .2);
  --editorColor: rgba(171, 178, 191, .8);
  --editorColor80: rgba(171, 178, 191, 1);
  --editorColor60: rgba(171, 178, 191, .9);
  --editorColor50: rgba(171, 178, 191, .9);
  --editorColor40: rgba(171, 178, 191, .9);
  --editorColor30: rgba(171, 178, 191, .8);
  --editorColor10: rgba(171, 178, 191, .5);
  --editorColor04: rgba(171, 178, 191, .04);
  --editorBgColor: #34393f;
  --deleteColor: #ff6969;
  --iconColor: rgba(255, 255, 255, .56);
  --codeBgColor: #d8d8d869;
  --codeBlockBgColor: #3f454c;
  --footnoteBgColor: rgba(66, 67, 68, .5);
  --inputBgColor: rgba(0, 0, 0, .1);
  --focusColor: var(--themeColor);

  --buttonFontColor: rgba(255, 255, 255, .6);
  --buttonBgColor: #58606a;
  --buttonBorder: 1px solid #383d44;
  --buttonShadow: none;
  --buttonFontColorHover: var(--buttonFontColor);
  --buttonBgColorHover: #646d78;
  --buttonBorderHover: var(--buttonBorder);
  --buttonFontColorActive: var(--buttonFontColor);
  --buttonBgColorActive: #4a5159;
  --buttonBorderActive: var(--buttonBorder);

  --buttonPrimaryFontColor: #ffffff;
  --buttonPrimaryBgColor: var(--themeColor);
  --buttonPrimaryBorder: none;
  --buttonPrimaryShadow: none;
  --buttonPrimaryFontColorHover: var(--buttonPrimaryFontColor);
  --buttonPrimaryBgColorHover: #f5914f;
  --buttonPrimaryBorderHover: var(--buttonPrimaryBorder);
  --buttonPrimaryFontColorActive: var(--buttonPrimaryFontColor);
  --buttonPrimaryBgColorActive: #f3731f;
  --buttonPrimaryBorderActive: var(--buttonPrimaryBorder);
  --buttonPrimaryFocusBorder: none;
  --buttonPrimaryFocusShadow: inset 0 0 0 1px rgba(145, 75, 29, 0.6), 0 0 0 1px var(--themeColor);
  --tableBorderColor: #4f585e;

  /*marktext*/
  --sideBarColor: rgba(255, 255, 255, .6);
  --sideBarIconColor: var(--iconColor);
  --sideBarTitleColor: rgba(255, 255, 255, 1);
  --sideBarTextColor: rgba(255, 255, 255, .4);
  --sideBarBgColor: rgba(26, 33, 41, 0.9);
  --sideBarItemHoverBgColor: rgba(255, 255, 255, .03);
  --itemBgColor: rgba(71, 78, 86, 0.6);

  --floatFontColor: rgba(171, 178, 191, .8);
  --floatBgColor: #3c4650;
  --floatHoverColor: rgba(255, 255, 255, .04);
  --floatBorderColor: rgba(0, 0, 0, .03);
  --floatShadow: rgba(0, 0, 0, 0.2);
  --maskColor: rgba(0, 0, 0, .7);
  /* --editorAreaWidth: 750px; */
  --editorAreaWidth:calc(90vw);
}

.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);
}

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

.tabs-container > li {
  background: none !important;
}
.tabs-container > li.active {
  background: var(--floatBgColor) !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;
}
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");
*/
