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

  --highlightColor: rgba(104, 134, 170, .4);
  --selectionColor: rgba(0, 0, 0, .1);
  --editorColor: rgba(43, 48, 50, .7);
  --editorColor80: rgba(43, 48, 50, .8);
  --editorColor60: rgba(43, 48, 50, .6);
  --editorColor50: rgba(43, 48, 50, .5);
  --editorColor40: rgba(43, 48, 50, .4);
  --editorColor30: rgba(150, 150, 150, .8);
  --editorColor10: rgba(43, 48, 50, .1);
  --editorColor04: rgba(43, 48, 50, .04);
  --editorBgColor: #f7f7f7;
  --deleteColor: #ff6969;
  --iconColor: rgba(150, 150, 150, .8);
  --codeBgColor: #d8d8d869;
  --codeBlockBgColor: rgba(104, 134, 170, .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(53, 74, 99, 0.5), 0 0 0 1px var(--themeColor);
  --tableBorderColor: #e5e5e5;

  --sideBarColor: rgba(188, 193, 197, .8);
  --sideBarIconColor: rgba(175, 175, 175, .8);
  --sideBarTitleColor: rgba(255, 255, 255, 1);
  --sideBarTextColor: rgba(188, 193, 197, .4);
  --sideBarBgColor: rgba(69, 75, 80, 1);
  --sideBarItemHoverBgColor: rgba(255, 255, 255, .03);
  --itemBgColor: rgba(43, 48, 50, .5);

  --floatFontColor: rgba(43, 48, 50, .7);
  --floatBgColor: rgb(237, 237, 238);
  --floatHoverColor: rgba(43, 48, 50, .04);
  --floatBorderColor: rgba(0, 0, 0, .03);
  --maskColor: rgba(232, 232, 232, .8);
  /* --editorAreaWidth: 750px; */
  --editorAreaWidth:calc(90vw);
}

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

.tabs-container > li {
  background: none !important;
}
.tabs-container > li.active {
  border: 1px solid #dddddd;
  border-top: none;
  border-bottom: none;
  background: var(--floatBgColor) !important;
}
.tabs-container > li.active:after {
  top: 0 !important;
  bottom: auto !important;
  background: var(--themeColor) !important;
}

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

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: 100%;
  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%);
}
