:root {
  --themeColor: rgb(12, 139, 186);
  --themeColor90: rgba(12, 139, 186, .9);
  --themeColor80: rgba(12, 139, 186, .8);
  --themeColor70: rgba(12, 139, 186, .7);
  --themeColor60: rgba(12, 139, 186, .6);
  --themeColor50: rgba(12, 139, 186, .5);
  --themeColor40: rgba(12, 139, 186, .4);
  --themeColor30: rgba(12, 139, 186, .3);
  --themeColor20: rgba(12, 139, 186, .2);
  --themeColor10: rgba(12, 139, 186, .1);

  --highlightColor: rgba(12, 139, 186, .4);
  --selectionColor: rgba(0, 0, 0, .1);
  --editorColor: rgba(101, 101, 101, .7);
  --editorColor80: rgba(101, 101, 101, .8);
  --editorColor60: rgba(101, 101, 101, .6);
  --editorColor50: rgba(101, 101, 101, .5);
  --editorColor40: rgba(101, 101, 101, .4);
  --editorColor30: rgba(101, 101, 101, .3);
  --editorColor10: rgba(101, 101, 101, .1);
  --editorColor04: rgba(101, 101, 101, .04);
  --editorBgColor: #f3f3f3;
  --deleteColor: #ff6969;
  --iconColor: rgba(101, 101, 101, .8);
  --codeBgColor: #d8d8d869;
  --codeBlockBgColor: rgba(12, 139, 186, .05);
  --footnoteBgColor: rgba(0, 0, 0, .03);
  --inputBgColor: rgba(0, 0, 0, .06);
  --focusColor: var(--themeColor);

  --buttonFontColor: var(--editorColor);
  --buttonBgColor: #ffffff;
  --buttonBorder: 1px solid #dcdfe6;
  --buttonShadow: none;
  --buttonFontColorHover: var(--buttonFontColor);
  --buttonBgColorHover: linear-gradient(#fafafa, #f5f5f5);
  --buttonBorderHover: var(--buttonBorder);
  --buttonFontColorActive: var(--buttonFontColor);
  --buttonBgColorActive: #f5f5f5;
  --buttonBorderActive: var(--buttonBorder);
  --buttonFocusBorder: 1px solid var(--themeColor);

  --buttonPrimaryFontColor: #ffffff;
  --buttonPrimaryBgColor: var(--themeColor);
  --buttonPrimaryBorder: none;
  --buttonPrimaryShadow: 0 0 8px 0 rgba(0, 0, 0, .1);
  --buttonPrimaryFontColorHover: var(--buttonPrimaryFontColor);
  --buttonPrimaryBgColorHover: var(--buttonPrimaryBgColor);
  --buttonPrimaryBorderHover: var(--buttonPrimaryBorder);
  --buttonPrimaryFontColorActive: var(--buttonPrimaryFontColor);
  --buttonPrimaryBgColorActive: var(--buttonPrimaryBgColor);
  --buttonPrimaryBorderActive: var(--buttonPrimaryBorder);
  --buttonPrimaryFocusBorder: none;
  --buttonPrimaryFocusShadow: inset 0 0 0 1px rgba(5, 66, 89, 0.5), 0 0 0 1px var(--themeColor);
  --tableBorderColor: #e5e5e5;

  --sideBarColor: rgba(101, 101, 101, .6);
  --sideBarIconColor: var(--iconColor);
  --sideBarTitleColor: rgba(101, 101, 101, 1);
  --sideBarTextColor: rgba(101, 101, 101, .4);
  --sideBarBgColor: rgba(248, 248, 248, 0.9);
  --sideBarItemHoverBgColor: rgba(101, 101, 101, .03);
  --itemBgColor: rgba(245, 245, 245, 0.6);

  --floatFontColor: rgba(101, 101, 101, .7);
  --floatBgColor: #ffffff;
  --floatHoverColor: rgba(101, 101, 101, .04);
  --floatBorderColor: rgba(0, 0, 0, .03);
  --maskColor: rgba(232, 232, 232, .8);
  /* --editorAreaWidth: 750px; */
  --editorAreaWidth:calc(90vw);
}

.editor-tabs {
  box-shadow: none !important;
}

.tabs-container > li {
  border-right: 1px solid #e5e5e5 !important;
  background: var(--editorBgColor) !important;
}

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

h1, h2, h3, h4, h5, h6 {
  color: var(--themeColor);
  text-align: center;
}

li.ag-bullet-list-item {
  position: relative;
  list-style: none;
}
li.ag-bullet-list-item::before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 2px;
  left: -18px;
  top: 15px;
  background: var(--editorColor);
}

blockquote.ag-paragraph {
  background: rgb(233, 233, 233);
}
blockquote.ag-paragraph::before {
  content: none;
}

li.ag-paragraph {
  color: var(--editorColor);
}

/*task list*/
li.ag-task-list-item {
  list-style-type: none;
  position: relative;
}
li.ag-task-list-item > input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 16px;
  height: 16px;
  top: .1em;
  transform: rotate(-90deg);
  margin: 0;
  left: -24px;
  transform-origin: center;
  transition: all .2s ease;
}
li.ag-task-list-item > input.ag-checkbox-checked {
  transform: rotate(0);
  opacity: .5;
}
li.ag-task-list-item > input[type=checkbox]::before {
  content: '';
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  display: inline-block;
  border: 2px solid var(--editorColor);
  border-radius: 2px;
  background-color: var(--editorBgColor);
  position: absolute;
  top: 0;
  left: 0;
  transition: all .2s ease;
}
li.ag-task-list-item > input.ag-checkbox-checked::before {
  border: transparent;
  background-color: var(--editorColor);
}
li.ag-task-list-item > input::after {
  content: '';
  transform: rotate(-45deg) scale(0);
  width: 9px;
  height: 5px;
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  position: absolute;
  display: inline-block;
  top: 1px;
  left: 5px;
  transition: all .2s ease;
}
li.ag-task-list-item > input.ag-checkbox-checked::after {
  transform: rotate(-45deg) scale(1);
}

/*horizontal line*/
p:not(.ag-active)[data-role="hr"]::before {
  content: '';
  position: absolute;
  width: 50%;
  display: block;
  left: 50%;
  top: 50%;
  height: 2px;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px dashed var(--editorColor50);
  transform: translateX(-50%) translateY(-50%);
}
