@font-face {
	font-family: Asana;
	src: url("fonts/Asana-Math.otf") format("opentype");
}

@font-face {
	font-family: Asana-Math;
	src: url("fonts/Asana-math-mode.otf") format("opentype");
}

@font-face {
	font-family: Asana-Mathbb;
	src: url("fonts/types-generated/Asana-mathbb.otf") format("opentype");
}

@font-face {
	font-family: Asana-Mathit;
	src: url("fonts/types-generated/Asana-mathit.otf") format("opentype");
}

@font-face {
	font-family: Asana-Mathcal;
	src: url("fonts/types-generated/Asana-mathcal.otf") format("opentype");
}

@font-face {
	font-family: Asana-Mathscr;
	src: url("fonts/types-generated/Asana-mathscr.otf") format("opentype");
}

@font-face {
	font-family: Asana-Mathfrak;
	src: url("fonts/types-generated/Asana-mathfrak.otf") format("opentype");
}

@font-face {
	font-family: Asana-Mathsf;
	src: url("fonts/types-generated/Asana-mathsf.otf") format("opentype");
}

@font-face {
	font-family: Asana-Mathtt;
	src: url("fonts/types-generated/Asana-mathtt.otf") format("opentype");
}

@font-face {
	font-family: Asana-Mathrm;
	src: url("fonts/types-generated/Asana-mathrm.otf") format("opentype");
}

@font-face {
	font-family: 'FontAwesome';
	src: url('fonts/icomoon.eot');
	src: url('fonts/icomoon.eot') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/**
Latin Modern
**/

@font-face {
	font-family: LatinModern;
	src: url("fonts/latinmodern-math.otf") format("opentype");
}

@font-face {
	font-family: LatinModern-Math;
	src: url("fonts/latinmodern-math-mode.otf") format("opentype");
}

@font-face {
	font-family: LatinModern-Mathbb;
	src: url("fonts/types-generated/latinmodern-mathbb.otf") format("opentype");
}

@font-face {
	font-family: LatinModern-Mathit;
	src: url("fonts/types-generated/latinmodern-mathit.otf") format("opentype");
}

@font-face {
	font-family: LatinModern-Mathcal;
	src: url("fonts/types-generated/latinmodern-mathcal.otf") format("opentype");
}

@font-face {
	font-family: LatinModern-Mathscr;
	src: url("fonts/types-generated/latinmodern-mathscr.otf") format("opentype");
}

@font-face {
	font-family: LatinModern-Mathfrak;
	src: url("fonts/types-generated/latinmodern-mathfrak.otf") format("opentype");
}

@font-face {
	font-family: LatinModern-Mathsf;
	src: url("fonts/types-generated/latinmodern-mathsf.otf") format("opentype");
}

@font-face {
	font-family: LatinModern-Mathtt;
	src: url("fonts/types-generated/latinmodern-mathtt.otf") format("opentype");
}

@font-face {
	font-family: LatinModern-Mathrm;
	src: url("fonts/types-generated/latinmodern-mathrm.otf") format("opentype");
}

/***********************************************************/

/**
Thicker Latin Modern
**/

@font-face {
	font-family: ThickerLm;
	src: url("fonts/thickerlm-math.otf") format("opentype");
}

@font-face {
	font-family: ThickerLm-Math;
	src: url("fonts/thickerlm-math-mode.otf") format("opentype");
}

@font-face {
	font-family: ThickerLm-Mathbb;
	src: url("fonts/types-generated/thickerlm-mathbb.otf") format("opentype");
}

@font-face {
	font-family: ThickerLm-Mathit;
	src: url("fonts/types-generated/thickerlm-mathit.otf") format("opentype");
}

@font-face {
	font-family: ThickerLm-Mathcal;
	src: url("fonts/types-generated/thickerlm-mathcal.otf") format("opentype");
}

@font-face {
	font-family: ThickerLm-Mathscr;
	src: url("fonts/types-generated/thickerlm-mathscr.otf") format("opentype");
}

@font-face {
	font-family: ThickerLm-Mathfrak;
	src: url("fonts/types-generated/thickerlm-mathfrak.otf") format("opentype");
}

@font-face {
	font-family: ThickerLm-Mathsf;
	src: url("fonts/types-generated/thickerlm-mathsf.otf") format("opentype");
}

@font-face {
	font-family: ThickerLm-Mathtt;
	src: url("fonts/types-generated/thickerlm-mathtt.otf") format("opentype");
}

@font-face {
	font-family: ThickerLm-Mathrm;
	src: url("fonts/types-generated/thickerlm-mathrm.otf") format("opentype");
}

/***********************************************************/

/* Computer Modern */

@font-face {
	font-family: 'Computer Modern Sans';
	src: url('fonts/others-text-mode/computer-modern/Sans/cmunss.otf') format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Sans';
	src: url('fonts/others-text-mode/computer-modern/Sans/cmunsx.otf') format("opentype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Sans';
	src: url('fonts/others-text-mode/computer-modern/Sans/cmunsi.otf') format("opentype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Computer Modern Sans';
	src: url('fonts/others-text-mode/computer-modern/Sans/cmunso.otf') format("opentype");
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Computer Modern Serif';
	src: url('fonts/others-text-mode/computer-modern/Serif/cmunrm.otf') format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Serif';
	src: url('fonts/others-text-mode/computer-modern/Serif/cmunbx.otf') format("opentype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Serif';
	src: url('fonts/others-text-mode/computer-modern/Serif/cmunti.otf') format("opentype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Computer Modern Serif';
	src: url('fonts/others-text-mode/computer-modern/Serif/cmunbi.otf') format("opentype");
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('fonts/others-text-mode/computer-modern/Typewriter/cmuntt.otf') format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('fonts/others-text-mode/computer-modern/Typewriter/cmuntb.otf') format("opentype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('fonts/others-text-mode/computer-modern/Typewriter/cmunit.otf') format("opentype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Computer Modern Typewriter';
	src: url('fonts/others-text-mode/computer-modern/Typewriter/cmuntx.otf') format("opentype");
	font-weight: bold;
	font-style: italic;
}

/**/

/**
Sans Math + Liberation Font
**/

@font-face {
	font-family: Sans;
	src: url("fonts/Sans-Math.otf") format("opentype");
}

@font-face {
	font-family: Sans-Math;
	src: url("fonts/Sans-Math-mode.otf") format("opentype");
}

@font-face {
	font-family: Sans-Bold;
	src: url("fonts/types-generated/Sans-bold.otf") format("opentype");
	font-weight: bold;
}

@font-face {
	font-family: Sans-Mathbb;
	src: url("fonts/types-generated/Asana-mathbb.otf") format("opentype");
}

@font-face {
	font-family: Sans-Mathit;
	src: url("fonts/types-generated/Sans-mathit.otf") format("opentype");
}

@font-face {
	font-family: Sans-Mathcal;
	src: url("fonts/types-generated/Asana-mathcal.otf") format("opentype");
}

@font-face {
	font-family: Sans-Mathscr;
	src: url("fonts/types-generated/Asana-mathscr.otf") format("opentype");
}

@font-face {
	font-family: Sans-Mathfrak;
	src: url("fonts/types-generated/Asana-mathfrak.otf") format("opentype");
}

@font-face {
	font-family: Sans-Mathsf;
	src: url("fonts/types-generated/Asana-mathsf.otf") format("opentype");
}

@font-face {
	font-family: Sans-Mathtt;
	src: url("fonts/types-generated/Asana-mathtt.otf") format("opentype");
}

@font-face {
	font-family: Sans-Mathrm;
	src: url("fonts/types-generated/Asana-mathrm.otf") format("opentype");
}

@font-face {
	font-family: Sans-Mathbf;
	src: url("fonts/types-generated/Sans-mathbf.otf") format("opentype");
	font-weight: bold;
}


compositeblock {
  display: inline-block;
  position: relative;
  text-align: left;
  unicode-bidi: isolate;
}
compositeblock.middle {
  vertical-align: middle;
}
latex-symbol-icon {
  display: inline-block;
  padding: 2px;
  border: 1px solid transparent;
  cursor: pointer;
}
latex-symbol-icon:hover,
latex-symbol-icon.selected {
  background: white;
  border: 1px solid lightgray;
}
inline {
  display: inline-block;
}
base-line-indicator {
  display: inline-block;
  overflow: hidden;
  width: 0px;
  height: inherit;
}

math-type .constant-text > constant-text {
  margin-left: 0.2em;
  margin-right: 0.2em;
}
math-type .constant-text > constant-text.close-left {
  margin-left: 0;
}
math-type .constant-text > constant-text.close-right {
  margin-right: 0;
}



/**different context*/
/**different context*/
math-type ref-tag {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 8;
  cursor: pointer;
}
math-type ref-tag > label {
  cursor: pointer;
}
math-type ref-tag:hover {
  text-decoration: underline;
}
math-type ref-tag.line-tag {
  transition: background 0.4s;
}
math-type ref-tag.empty-line-tag {
  opacity: 0.5;
  animation: fadein 0.5s;
}
math-type tr.math-row ref-tag {
  left: calc(100% + 20px);
  right: unset;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}







.color-picker no-color-select {
  display: block;
  text-align: center;
  /* width: 100%; */
  /* height: 20px; */
  background: white;
  border: 1px solid lightgray;
  margin-bottom: 2px;
  color: gray;
  padding: 2px;
  cursor: default;
  border-radius: 0;
  padding-bottom: 2px;
  margin-bottom: 3px;
  margin-left: -1px;
  margin-right: -1px;
  font-size: 13px;
}
.color-picker no-color-select:hover {
  color: black;
}
.color-picker color-select {
  position: absolute;
  top: 30px;
  left: 0px;
  background: white;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type editarea.no-area-container,
math-type editarea.text-mode,
math-type area-container,
math-type .print-as-area-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
math-type editarea.no-area-container > line,
math-type editarea.text-mode > line,
math-type area-container > line,
math-type .print-as-area-container > line {
  min-width: 0.3em;
  position: relative;
  display: block;
  width: 100%;
  align-items: baseline;
  flex-wrap: wrap;
  box-sizing: border-box;
  flex-wrap: nowrap;
  line-height: 1.2;
  white-space: nowrap;
}
math-type editarea.no-area-container > line block,
math-type editarea.text-mode > line block,
math-type area-container > line block,
math-type .print-as-area-container > line block {
  white-space: pre;
}
math-type editarea.no-area-container > line.single-block > blocks > baselineblock,
math-type editarea.text-mode > line.single-block > blocks > baselineblock,
math-type area-container > line.single-block > blocks > baselineblock,
math-type .print-as-area-container > line.single-block > blocks > baselineblock {
  display: none;
}
math-type editarea.no-area-container > line > blocks,
math-type editarea.text-mode > line > blocks,
math-type area-container > line > blocks,
math-type .print-as-area-container > line > blocks {
  /**
            Different between inline and inline-block is about whether Section Text will be wrap in next wrapped line 
            */
  display: inline-block;
  text-align: left;
}
math-type editarea.no-area-container > line.root,
math-type editarea.text-mode > line.root,
math-type area-container > line.root,
math-type .print-as-area-container > line.root,
math-type editarea.no-area-container > line.text-mode,
math-type editarea.text-mode > line.text-mode,
math-type area-container > line.text-mode,
math-type .print-as-area-container > line.text-mode {
  display: block;
  font-style: normal;
}
math-type editarea.no-area-container > line.root > prefix,
math-type editarea.text-mode > line.root > prefix,
math-type area-container > line.root > prefix,
math-type .print-as-area-container > line.root > prefix,
math-type editarea.no-area-container > line.text-mode > prefix,
math-type editarea.text-mode > line.text-mode > prefix,
math-type area-container > line.text-mode > prefix,
math-type .print-as-area-container > line.text-mode > prefix {
  white-space: pre;
  display: inline-block;
  cursor: default;
  text-align: left;
}
math-type editarea.no-area-container > line.root > blocks,
math-type editarea.text-mode > line.root > blocks,
math-type area-container > line.root > blocks,
math-type .print-as-area-container > line.root > blocks,
math-type editarea.no-area-container > line.text-mode > blocks,
math-type editarea.text-mode > line.text-mode > blocks,
math-type area-container > line.text-mode > blocks,
math-type .print-as-area-container > line.text-mode > blocks {
  /** should not wrap here*/
  align-items: baseline;
  box-sizing: border-box;
}
math-type editarea.no-area-container > line.root > blocks > block,
math-type editarea.text-mode > line.root > blocks > block,
math-type area-container > line.root > blocks > block,
math-type .print-as-area-container > line.root > blocks > block,
math-type editarea.no-area-container > line.text-mode > blocks > block,
math-type editarea.text-mode > line.text-mode > blocks > block,
math-type area-container > line.text-mode > blocks > block,
math-type .print-as-area-container > line.text-mode > blocks > block {
  white-space: pre-wrap;
  white-space: break-spaces;
}
math-type editarea.no-area-container > line.root.full-line-block-inside > prefix,
math-type editarea.text-mode > line.root.full-line-block-inside > prefix,
math-type area-container > line.root.full-line-block-inside > prefix,
math-type .print-as-area-container > line.root.full-line-block-inside > prefix,
math-type editarea.no-area-container > line.text-mode.full-line-block-inside > prefix,
math-type editarea.text-mode > line.text-mode.full-line-block-inside > prefix,
math-type area-container > line.text-mode.full-line-block-inside > prefix,
math-type .print-as-area-container > line.text-mode.full-line-block-inside > prefix {
  float: left;
  vertical-align: top;
}
math-type editarea.no-area-container > line.root.full-line-block-inside > blocks,
math-type editarea.text-mode > line.root.full-line-block-inside > blocks,
math-type area-container > line.root.full-line-block-inside > blocks,
math-type .print-as-area-container > line.root.full-line-block-inside > blocks,
math-type editarea.no-area-container > line.text-mode.full-line-block-inside > blocks,
math-type editarea.text-mode > line.text-mode.full-line-block-inside > blocks,
math-type area-container > line.text-mode.full-line-block-inside > blocks,
math-type .print-as-area-container > line.text-mode.full-line-block-inside > blocks {
  display: block;
  width: 100%;
}
math-type editarea.no-area-container > line.root.full-line-block-inside > blocks > baselineblock,
math-type editarea.text-mode > line.root.full-line-block-inside > blocks > baselineblock,
math-type area-container > line.root.full-line-block-inside > blocks > baselineblock,
math-type .print-as-area-container > line.root.full-line-block-inside > blocks > baselineblock,
math-type editarea.no-area-container > line.text-mode.full-line-block-inside > blocks > baselineblock,
math-type editarea.text-mode > line.text-mode.full-line-block-inside > blocks > baselineblock,
math-type area-container > line.text-mode.full-line-block-inside > blocks > baselineblock,
math-type .print-as-area-container > line.text-mode.full-line-block-inside > blocks > baselineblock {
  display: inline-block;
  float: left;
}
math-type editarea.no-area-container > line.root.has-rtl.align-justify,
math-type editarea.text-mode > line.root.has-rtl.align-justify,
math-type area-container > line.root.has-rtl.align-justify,
math-type .print-as-area-container > line.root.has-rtl.align-justify,
math-type editarea.no-area-container > line.text-mode.has-rtl.align-justify,
math-type editarea.text-mode > line.text-mode.has-rtl.align-justify,
math-type area-container > line.text-mode.has-rtl.align-justify,
math-type .print-as-area-container > line.text-mode.has-rtl.align-justify {
  direction: rtl;
}
math-type editarea.no-area-container > line.root.section,
math-type editarea.text-mode > line.root.section,
math-type area-container > line.root.section,
math-type .print-as-area-container > line.root.section,
math-type editarea.no-area-container > line.text-mode.section,
math-type editarea.text-mode > line.text-mode.section,
math-type area-container > line.text-mode.section,
math-type .print-as-area-container > line.text-mode.section {
  text-align: left;
}
math-type editarea.no-area-container > line.root.section > blocks,
math-type editarea.text-mode > line.root.section > blocks,
math-type area-container > line.root.section > blocks,
math-type .print-as-area-container > line.root.section > blocks,
math-type editarea.no-area-container > line.text-mode.section > blocks,
math-type editarea.text-mode > line.text-mode.section > blocks,
math-type area-container > line.text-mode.section > blocks,
math-type .print-as-area-container > line.text-mode.section > blocks {
  /**
                    Different between inline and inline-block is about whether Section Text will be wrap in next wrapped line 
                    */
  display: inline;
}
math-type editarea.no-area-container > line.root.section.has-rtl,
math-type editarea.text-mode > line.root.section.has-rtl,
math-type area-container > line.root.section.has-rtl,
math-type .print-as-area-container > line.root.section.has-rtl,
math-type editarea.no-area-container > line.text-mode.section.has-rtl,
math-type editarea.text-mode > line.text-mode.section.has-rtl,
math-type area-container > line.text-mode.section.has-rtl,
math-type .print-as-area-container > line.text-mode.section.has-rtl {
  direction: rtl;
}
math-type editarea.no-area-container > line.root.section.has-rtl > prefix,
math-type editarea.text-mode > line.root.section.has-rtl > prefix,
math-type area-container > line.root.section.has-rtl > prefix,
math-type .print-as-area-container > line.root.section.has-rtl > prefix,
math-type editarea.no-area-container > line.text-mode.section.has-rtl > prefix,
math-type editarea.text-mode > line.text-mode.section.has-rtl > prefix,
math-type area-container > line.text-mode.section.has-rtl > prefix,
math-type .print-as-area-container > line.text-mode.section.has-rtl > prefix {
  direction: rtl;
  order: 1;
}
math-type editarea.no-area-container > line.root.theorem,
math-type editarea.text-mode > line.root.theorem,
math-type area-container > line.root.theorem,
math-type .print-as-area-container > line.root.theorem,
math-type editarea.no-area-container > line.text-mode.theorem,
math-type editarea.text-mode > line.text-mode.theorem,
math-type area-container > line.text-mode.theorem,
math-type .print-as-area-container > line.text-mode.theorem {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}
math-type editarea.no-area-container > line > prefix,
math-type editarea.text-mode > line > prefix,
math-type area-container > line > prefix,
math-type .print-as-area-container > line > prefix {
  text-align: right;
}
math-type editarea.no-area-container > line.has-indent,
math-type editarea.text-mode > line.has-indent,
math-type area-container > line.has-indent,
math-type .print-as-area-container > line.has-indent {
  display: flex;
  justify-content: flex-start;
}
math-type editarea.no-area-container > line.has-rtl.has-indent > prefix,
math-type editarea.text-mode > line.has-rtl.has-indent > prefix,
math-type area-container > line.has-rtl.has-indent > prefix,
math-type .print-as-area-container > line.has-rtl.has-indent > prefix {
  direction: rtl;
  order: 1;
}
math-type editarea.no-area-container > line.has-rtl.has-indent.indent-0,
math-type editarea.text-mode > line.has-rtl.has-indent.indent-0,
math-type area-container > line.has-rtl.has-indent.indent-0,
math-type .print-as-area-container > line.has-rtl.has-indent.indent-0 {
  padding-left: 0;
  padding-right: 30px;
}
math-type editarea.no-area-container > line.has-rtl.has-indent.indent-1,
math-type editarea.text-mode > line.has-rtl.has-indent.indent-1,
math-type area-container > line.has-rtl.has-indent.indent-1,
math-type .print-as-area-container > line.has-rtl.has-indent.indent-1 {
  padding-left: 0;
  padding-right: 65px;
}
math-type editarea.no-area-container > line.has-rtl.has-indent.indent-2,
math-type editarea.text-mode > line.has-rtl.has-indent.indent-2,
math-type area-container > line.has-rtl.has-indent.indent-2,
math-type .print-as-area-container > line.has-rtl.has-indent.indent-2 {
  padding-left: 0;
  padding-right: 105px;
}
math-type editarea.no-area-container > line.has-rtl.has-indent.indent-3,
math-type editarea.text-mode > line.has-rtl.has-indent.indent-3,
math-type area-container > line.has-rtl.has-indent.indent-3,
math-type .print-as-area-container > line.has-rtl.has-indent.indent-3 {
  padding-left: 0;
  padding-right: 145px;
}
math-type editarea.no-area-container > line.has-rtl.has-indent.indent-4,
math-type editarea.text-mode > line.has-rtl.has-indent.indent-4,
math-type area-container > line.has-rtl.has-indent.indent-4,
math-type .print-as-area-container > line.has-rtl.has-indent.indent-4 {
  padding-left: 0;
  padding-right: 185px;
}
math-type editarea.no-area-container > line.indent-0,
math-type editarea.text-mode > line.indent-0,
math-type area-container > line.indent-0,
math-type .print-as-area-container > line.indent-0 {
  padding-left: 30px;
}
math-type editarea.no-area-container > line.indent-1,
math-type editarea.text-mode > line.indent-1,
math-type area-container > line.indent-1,
math-type .print-as-area-container > line.indent-1 {
  padding-left: 65px;
}
math-type editarea.no-area-container > line.indent-2,
math-type editarea.text-mode > line.indent-2,
math-type area-container > line.indent-2,
math-type .print-as-area-container > line.indent-2 {
  padding-left: 105px;
}
math-type editarea.no-area-container > line.indent-3,
math-type editarea.text-mode > line.indent-3,
math-type area-container > line.indent-3,
math-type .print-as-area-container > line.indent-3 {
  padding-left: 145px;
}
math-type editarea.no-area-container > line.indent-4,
math-type editarea.text-mode > line.indent-4,
math-type area-container > line.indent-4,
math-type .print-as-area-container > line.indent-4 {
  padding-left: 185px;
}
math-type editarea.no-area-container > line.math-container-selected,
math-type editarea.text-mode > line.math-container-selected,
math-type area-container > line.math-container-selected,
math-type .print-as-area-container > line.math-container-selected {
  outline: 1px solid rgba(93, 92, 92, 0.3);
}
math-type editarea.no-area-container > line.math-container,
math-type editarea.text-mode > line.math-container,
math-type area-container > line.math-container,
math-type .print-as-area-container > line.math-container {
  font-family: 'Asana';
  justify-content: center;
  text-align: center;
  text-align-last: auto;
  display: flex;
}
math-type editarea.no-area-container > line.math-container block,
math-type editarea.text-mode > line.math-container block,
math-type area-container > line.math-container block,
math-type .print-as-area-container > line.math-container block {
  white-space: pre;
}
math-type editarea.no-area-container > line.align-center,
math-type editarea.text-mode > line.align-center,
math-type area-container > line.align-center,
math-type .print-as-area-container > line.align-center {
  text-align: center;
  text-align-last: auto;
}
math-type editarea.no-area-container > line.align-center.has-indent,
math-type editarea.text-mode > line.align-center.has-indent,
math-type area-container > line.align-center.has-indent,
math-type .print-as-area-container > line.align-center.has-indent {
  justify-content: center;
}
math-type editarea.no-area-container > line.align-center.section,
math-type editarea.text-mode > line.align-center.section,
math-type area-container > line.align-center.section,
math-type .print-as-area-container > line.align-center.section {
  text-align: center;
  text-align-last: auto;
}
math-type editarea.no-area-container > line.align-center > blocks,
math-type editarea.text-mode > line.align-center > blocks,
math-type area-container > line.align-center > blocks,
math-type .print-as-area-container > line.align-center > blocks {
  text-align: center;
  text-align-last: auto;
}
math-type editarea.no-area-container > line.align-justify,
math-type editarea.text-mode > line.align-justify,
math-type area-container > line.align-justify,
math-type .print-as-area-container > line.align-justify {
  text-align: justify;
}
math-type editarea.no-area-container > line.align-justify.section,
math-type editarea.text-mode > line.align-justify.section,
math-type area-container > line.align-justify.section,
math-type .print-as-area-container > line.align-justify.section {
  text-align: justify;
}
math-type editarea.no-area-container > line.align-justify > blocks,
math-type editarea.text-mode > line.align-justify > blocks,
math-type area-container > line.align-justify > blocks,
math-type .print-as-area-container > line.align-justify > blocks {
  text-align: justify;
}
math-type editarea.no-area-container > line.align-left,
math-type editarea.text-mode > line.align-left,
math-type area-container > line.align-left,
math-type .print-as-area-container > line.align-left {
  text-align: left;
}
math-type editarea.no-area-container > line.align-left > blocks,
math-type editarea.text-mode > line.align-left > blocks,
math-type area-container > line.align-left > blocks,
math-type .print-as-area-container > line.align-left > blocks {
  text-align: left;
}
math-type editarea.no-area-container > line.align-right,
math-type editarea.text-mode > line.align-right,
math-type area-container > line.align-right,
math-type .print-as-area-container > line.align-right {
  text-align: right;
}
math-type editarea.no-area-container > line.align-right.has-indent,
math-type editarea.text-mode > line.align-right.has-indent,
math-type area-container > line.align-right.has-indent,
math-type .print-as-area-container > line.align-right.has-indent {
  justify-content: flex-end;
}
math-type editarea.no-area-container > line.align-right.section,
math-type editarea.text-mode > line.align-right.section,
math-type area-container > line.align-right.section,
math-type .print-as-area-container > line.align-right.section {
  text-align: right;
}
math-type editarea.no-area-container > line.align-right > blocks,
math-type editarea.text-mode > line.align-right > blocks,
math-type area-container > line.align-right > blocks,
math-type .print-as-area-container > line.align-right > blocks {
  text-align: right;
}
math-type editarea.no-area-container > line > blocks > block,
math-type editarea.text-mode > line > blocks > block,
math-type area-container > line > blocks > block,
math-type .print-as-area-container > line > blocks > block {
  display: inline;
}
math-type editarea.no-area-container,
math-type area-container {
  align-items: initial;
}
math-type editarea.root-editor {
  align-items: initial;
  display: block;
  color: black;
  fill: black;
  stroke: black;
  border-color: black;
}
math-type editarea.root-editor.read-only {
  cursor: default;
}
math-type editarea.root-editor.read-only block {
  cursor: default;
}
math-type editarea.root-editor > area-container {
  display: block;
}
math-type area-container {
  width: 100%;
}
math-type block {
  cursor: text;
}
math-type editarea {
  box-sizing: border-box;
  display: flex;
  overflow-x: visible;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
}
math-type editarea block {
  cursor: text;
}
math-type editarea.high-order {
  position: relative;
  z-index: 10;
}
math-type editarea.selected {
  outline: 1px solid rgba(93, 92, 92, 0.3);
}
math-type editarea.bordered {
  outline: 1px solid rgba(93, 92, 92, 0.3);
}
math-type editarea.center > area-container > line,
math-type editarea.center > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}
math-type editarea.left > area-container > line,
math-type editarea.left > line {
  justify-content: flex-start;
  text-align: left;
}
math-type editarea.right > area-container > line,
math-type editarea.right > line {
  justify-content: flex-end;
  text-align: right;
}
math-type editarea > area-baseline {
  width: 0;
  overflow: hidden;
  display: inline-block;
  float: left;
}
math-type setting.mt-common-dialog.line-tag-setting {
  transform: translate(0, -100%);
  position: absolute;
  font-family: serif;
  font-size: 11px;
  top: -4px;
  left: -10px;
  outline: none;
}
math-type setting.mt-common-dialog.line-tag-setting i {
  font-style: normal;
  padding: 1px 3px;
}
baselineblock {
  height: 0px;
  display: inline-block;
  width: 0;
  overflow: hidden;
}
baselineblock.inline {
  display: inline;
}
emptyblock {
  white-space: pre;
}
composite {
  display: inline-block;
}
block.Binary {
  padding: 0 0.2em;
}
block.Relation {
  padding: 0 0.3em;
}
block.Punctuation {
  padding-right: 0.2em;
}




check-box-wrapper {
  display: block;
  font-size: 11px;
  color: gray;
  cursor: pointer;
}
check-box-wrapper.disabled {
  color: lightgray;
}
check-box-wrapper.disabled check-box-rect {
  border: 1px solid #e2e1e1;
  color: lightgray;
}
check-box-wrapper.disabled check-box-rect:hover {
  border: 1px solid #e2e1e1;
}
check-box-wrapper.mobile-tablet check-box-rect {
  margin-top: -3px;
  width: 16px;
  height: 15px;
  font-size: 13px;
}
check-box-wrapper.mobile-tablet check-box-rect > i {
  left: 2px;
  top: 1px;
}
check-box-wrapper check-box-rect {
  width: 1.4em;
  height: 1.35em;
  border: 1px solid #c3c2c2;
  position: relative;
  display: inline-flex;
  font-size: 11px;
  color: green;
  background: white;
  justify-content: center;
  align-items: center;
}
check-box-wrapper check-box-rect:hover {
  border: 1px solid gray;
}
check-box-wrapper.unchecked check-box-rect > i {
  visibility: hidden;
}

vcomposed-symbol {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
}
vcomposed-symbol > start {
  display: block;
  float: left;
  overflow: hidden;
  margin-bottom: -0.02em;
}
vcomposed-symbol > middle-center {
  overflow: hidden;
  margin-top: -0.02em;
  margin-bottom: -0.02em;
}
vcomposed-symbol > middle {
  display: block;
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  margin-top: -0.02em;
  margin-bottom: -0.02em;
}
vcomposed-symbol > middle > fixed {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
vcomposed-symbol > middle > fixed > inside {
  display: block;
  overflow: hidden;
}
vcomposed-symbol > end {
  margin-top: -0.02em;
  display: block;
  overflow: hidden;
}


.open-brace,
.close-brace {
  padding: 0 0.1em;
  width: 0.5em;
  min-width: 0.5em;
}
.open-brace > start,
.close-brace > start {
  min-height: 0.75em;
  height: 0.75em;
}
.open-brace > middle-center,
.close-brace > middle-center {
  min-height: 0.6em;
  height: 0.6em;
}
.open-brace > end,
.close-brace > end {
  min-height: 0.75em;
  height: 0.75em;
}
.open-bracket,
.close-bracket {
  width: 0.43em;
  min-width: 0.43em;
}
.open-bracket > start,
.close-bracket > start {
  height: 0.5em;
  min-height: 0.5em;
}
.open-bracket > end,
.close-bracket > end {
  height: 0.7em;
  min-height: 0.7em;
}
.open-parenthesis,
.close-parenthesis {
  width: 0.45em;
  min-width: 0.45em;
}
.open-parenthesis > start,
.close-parenthesis > start {
  min-height: 0.85em;
  height: 0.85em;
}
.open-parenthesis > end,
.close-parenthesis > end {
  min-height: 0.8em;
  height: 0.8em;
}
.open-floor,
.close-floor {
  width: 0.45em;
  min-width: 0.45em;
}
.open-floor > end,
.close-floor > end {
  height: 0.35em;
  min-height: 0.35em;
}
.open-ceil,
.close-ceil {
  width: 0.45em;
  min-width: 0.45em;
}
.open-ceil > start,
.close-ceil > start {
  height: 0.5em;
  min-height: 0.5em;
}
.open-vert,
.close-vert {
  width: 0.3em;
  min-width: 0.3em;
}
.open-Vert,
.close-Vert {
  width: 0.5em;
  min-width: 0.5em;
}
.open-uparrow,
.close-uparrow {
  width: 0.45em;
  min-width: 0.45em;
}
.open-uparrow > start,
.close-uparrow > start {
  height: 0.5em;
  min-height: 0.5em;
}
.open-downarrow,
.close-downarrow {
  width: 0.45em;
  min-width: 0.45em;
}
.open-downarrow > end,
.close-downarrow > end {
  height: 0.4em;
  min-height: 0.4em;
}
.open-updownarrow,
.close-updownarrow {
  width: 0.45em;
  min-width: 0.45em;
}
.open-updownarrow > start,
.close-updownarrow > start {
  height: 0.5em;
  min-height: 0.5em;
}
.open-updownarrow > end,
.close-updownarrow > end {
  height: 0.4em;
  min-height: 0.4em;
}
.open-Uparrow,
.close-Uparrow {
  width: 0.7em;
  min-width: 0.7em;
}
.open-Uparrow > start,
.close-Uparrow > start {
  height: 0.5em;
  min-height: 0.5em;
}
.open-Downarrow,
.close-Downarrow {
  width: 0.7em;
  min-width: 0.7em;
}
.open-Downarrow > end,
.close-Downarrow > end {
  height: 0.5em;
  min-height: 0.5em;
}
.open-Updownarrow,
.close-Updownarrow {
  width: 0.6em;
  min-width: 0.6em;
}
.open-Updownarrow > start,
.close-Updownarrow > start {
  height: 0.5em;
  min-height: 0.5em;
}
.open-Updownarrow > end,
.close-Updownarrow > end {
  height: 0.5em;
  min-height: 0.5em;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
opensymbolblock,
closesymbolblock,
.middle-vert-symbol {
  display: inline-flex;
  align-items: center;
  position: relative;
  text-align: left;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}
opensymbolblock.normal,
closesymbolblock.normal,
.middle-vert-symbol.normal {
  margin-top: 0;
  margin-bottom: 0;
}
opensymbolblock > hidden-span,
closesymbolblock > hidden-span,
.middle-vert-symbol > hidden-span {
  visibility: hidden;
  width: 0px;
}
opensymbolblock[type='brace'],
closesymbolblock[type='brace'],
.middle-vert-symbol[type='brace'] {
  margin-left: 0.05em;
  margin-right: 0.05em;
  overflow: visible;
}
opensymbolblock[type='brace'] > svg,
closesymbolblock[type='brace'] > svg,
.middle-vert-symbol[type='brace'] > svg {
  overflow: visible;
  width: 0.5em;
  height: 100%;
}
opensymbolblock[type='parenthesis'] > svg,
closesymbolblock[type='parenthesis'] > svg,
.middle-vert-symbol[type='parenthesis'] > svg {
  width: 0.5em;
  height: 100%;
}
opensymbolblock[type='bracket'] > svg,
closesymbolblock[type='bracket'] > svg,
.middle-vert-symbol[type='bracket'] > svg {
  width: 0.5em;
  height: 100%;
}
opensymbolblock[type='angle'].sm-1 > svg,
closesymbolblock[type='angle'].sm-1 > svg,
.middle-vert-symbol[type='angle'].sm-1 > svg {
  width: 0.3em;
}
opensymbolblock[type='angle'].sm-2 > svg,
closesymbolblock[type='angle'].sm-2 > svg,
.middle-vert-symbol[type='angle'].sm-2 > svg {
  width: 0.45em;
}
opensymbolblock[type='angle'] > svg,
closesymbolblock[type='angle'] > svg,
.middle-vert-symbol[type='angle'] > svg {
  width: 0.6em;
  height: 100%;
}
opensymbolblock[type='slash'] > svg,
closesymbolblock[type='slash'] > svg,
.middle-vert-symbol[type='slash'] > svg {
  width: 0.7em;
  height: 100%;
}
opensymbolblock > bracket-span,
closesymbolblock > bracket-span,
.middle-vert-symbol > bracket-span {
  display: block;
}
opensymbolblock > vcomposed-symbol,
closesymbolblock > vcomposed-symbol,
.middle-vert-symbol > vcomposed-symbol,
opensymbolblock > bracket-span,
closesymbolblock > bracket-span,
.middle-vert-symbol > bracket-span {
  height: 100%;
  width: 100%;
  font-style: normal;
}
opensymbolblock > brace-span,
closesymbolblock > brace-span,
.middle-vert-symbol > brace-span {
  visibility: hidden;
  display: inline-block;
  padding: 0 0.1em;
}
opensymbolblock,
.middle-vert-symbol {
  margin-left: 0.07em;
}
opensymbolblock.normal,
.middle-vert-symbol.normal {
  margin-left: 0;
}
opensymbolblock[type='vert'],
.middle-vert-symbol[type='vert'],
opensymbolblock.middle-vert-symbol,
.middle-vert-symbol.middle-vert-symbol {
  margin-left: 0.05em;
  margin-right: 0.05em;
}
opensymbolblock[type='vert'] > svg,
.middle-vert-symbol[type='vert'] > svg,
opensymbolblock.middle-vert-symbol > svg,
.middle-vert-symbol.middle-vert-symbol > svg {
  width: 0.4em;
  height: 100%;
}
opensymbolblock[type='parenthesis'] > svg,
.middle-vert-symbol[type='parenthesis'] > svg {
  margin-right: -0.1em;
}
closesymbolblock {
  margin-right: 0.07em;
}
closesymbolblock.normal {
  margin-right: 0;
}
closesymbolblock[type='vert'] {
  margin-left: 0.05em;
  margin-right: 0.05em;
}
closesymbolblock[type='vert'] > svg {
  width: 0.4em;
  height: 100%;
}
closesymbolblock[type='parenthesis'] > svg {
  margin-left: -0.1em;
}

opensymbolblock[type=empty] > empty,
closesymbolblock[type=empty] > empty {
  width: 2px;
  height: 100%;
  display: block;
}
opensymbolblock[type=empty] > empty.normal-size,
closesymbolblock[type=empty] > empty.normal-size {
  height: 1em;
}
opensymbolblock[type=empty] > empty.line-selected,
closesymbolblock[type=empty] > empty.line-selected {
  background-color: lightgray;
}

.dirac-bracket-symbol > div > .oangle,
.dirac-bracket-symbol > div > .cangle {
  align-self: stretch;
  width: 0.55em;
  position: relative;
  margin-top: 0.1em;
  margin-bottom: -0.1em;
}
.dirac-bracket-symbol > div > .oangle > svg,
.dirac-bracket-symbol > div > .cangle > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.dirac-bracket-symbol > div > .vert {
  align-self: stretch;
  width: 0.25em;
  position: relative;
  margin-top: 0.1em;
  margin-bottom: -0.1em;
}
.dirac-bracket-symbol > div > .vert > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.dirac-bracket-symbol > div > editarea.first {
  min-width: 0.3em;
  padding-right: 0.1em;
}
.dirac-bracket-symbol > div > editarea.last {
  min-width: 0.3em;
  padding-left: 0.1em;
}
.dirac-bracket-symbol > div > editarea.middle {
  min-width: 0.3em;
  padding-left: 0.1em;
  padding-right: 0.1em;
}

cancel-symbol > editarea {
  display: inline-flex;
}
cancel-symbol > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type compositeblock.frac-slashed-symbol.frac-inline {
  font-size: 0.75em;
}
math-type compositeblock.fraction-symbol {
  margin-left: 0.1em;
  margin-right: 0.1em;
  vertical-align: baseline;
}
math-type compositeblock.fraction-symbol.frac-inline {
  font-size: 0.75em;
}
math-type compositeblock.fraction-symbol > .enumerator {
  float: left;
  width: 100%;
  clear: both;
}
math-type compositeblock.fraction-symbol > .denominator {
  margin-top: -5px;
  float: left;
  width: 100%;
}
math-type compositeblock.fraction-symbol > .frac-line {
  clear: both;
  pointer-events: none;
}
math-type compositeblock.fraction-symbol > .frac-line > inline {
  display: inline-block;
  width: 100%;
  vertical-align: 0.25em;
  border-bottom: solid 1px;
}
math-type compositeblock.fraction-symbol > editarea {
  border: 0px;
  min-width: 0.6em;
  text-align: center;
  text-align-last: auto;
}
math-type compositeblock.fraction-symbol > editarea > area-container > line,
math-type compositeblock.fraction-symbol > editarea > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}
math-type compositeblock.fraction-symbol > editarea-line {
  text-align: center;
  text-align-last: auto;
}

.stackrel-icon {
  margin: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.stackrel-icon .square {
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
}
.stackrel-icon .distance {
  margin-top: 3px;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .stackrel-symbol.selected {
  outline: 1px solid rgba(93, 92, 92, 0.3);
}
math-type .stackrel-symbol > .cur-value {
  clear: both;
  display: inline-flex;
  width: 100%;
}
math-type .stackrel-symbol > .top {
  float: left;
  clear: both;
  width: 100%;
  font-size: 0.7em;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .underset-symbol > .center {
  display: inline-flex;
  width: 100%;
}
math-type .underset-symbol > .bottom {
  float: left;
  display: block;
  width: 100%;
  font-size: 0.7em;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .over-under-set-symbol.selected {
  outline: 1px solid rgba(93, 92, 92, 0.3);
}
math-type .over-under-set-symbol > .top {
  display: flex;
  float: left;
  clear: both;
  width: 100%;
}
math-type .over-under-set-symbol > .top > line {
  font-size: 0.7em;
}
math-type .over-under-set-symbol > .middle {
  display: inline-flex;
  width: 100%;
  clear: both;
}
math-type .over-under-set-symbol > .middle.select {
  border-bottom: none;
}
math-type .over-under-set-symbol > .bottom {
  display: flex;
  float: left;
  width: 100%;
}
math-type .over-under-set-symbol > .bottom > line {
  font-size: 0.7em;
}

expandable-component.thickness item-option.thickness-option {
  width: 40px;
  height: 12px;
}
expandable-component.thickness svg {
  stroke: gray;
  stroke-width: 1px;
  fill: none;
}
expandable-component.thickness thickness {
  position: relative;
  display: flex;
  height: 100%;
}
expandable-component.thickness thickness > svg.thickness {
  width: 25px;
  height: 100%;
  position: static;
}
expandable-component.thickness thickness > svg.thickness line {
  stroke: gray;
  stroke-width: 1px;
}
expandable-component.thickness thickness > svg.thickness path {
  fill: #d2cfcf;
  stroke: none;
}



/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .textcircled > div > editarea {
  text-align: center;
  text-align-last: auto;
}
math-type .textcircled > div > editarea > area-container > line,
math-type .textcircled > div > editarea > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
.math-container-symbol {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  display: inline-flex;
}
.math-container-symbol.inline {
  margin-top: 0px;
  margin-bottom: 0px;
}
.math-container-symbol.selected {
  background-color: rgba(76, 175, 80, 0.05);
  outline: 1px solid #c1d4c1;
}
.math-container-symbol.display {
  display: block;
}
.math-container-symbol.display.selected {
  background-color: rgba(76, 175, 80, 0.05);
  outline: none;
}
.math-container-symbol.display > editarea {
  width: 100%;
  flex-grow: 1;
  display: block;
  text-align: center;
  text-align-last: auto;
}
.math-container-symbol.display > editarea > area-container > line,
.math-container-symbol.display > editarea > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}
.math-container-symbol.display > editarea > area-container > line {
  padding-top: 8px;
  padding-bottom: 8px;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
.math-container-symbol > editarea.multiline {
  display: block;
  flex-grow: 1;
  text-align: center;
  text-align-last: auto;
}
.math-container-symbol > editarea.multiline > area-container > line,
.math-container-symbol > editarea.multiline > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}
.math-container-symbol > editarea.multiline > line:last-child {
  justify-content: flex-end;
  text-align: right;
}
.math-container-symbol > editarea.multiline > line:first-child {
  justify-content: flex-start;
  text-align: left;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .icon-sqrt,
.auto-complete-external-area .icon-sqrt {
  display: flex;
  margin: auto;
  font-size: 12px;
}
math-type .icon-sqrt .square,
.auto-complete-external-area .icon-sqrt .square {
  margin-top: 3px;
  margin-right: -6px;
}
math-type .icon-sqrt .square-expand,
.auto-complete-external-area .icon-sqrt .square-expand {
  background-color: #f7f7f7;
}
math-type .icon-sqrt .align-end,
.auto-complete-external-area .icon-sqrt .align-end {
  margin-top: 8px;
}
math-type .icon-sqrt .line,
.auto-complete-external-area .icon-sqrt .line {
  width: 10px;
  border-top: solid 1px black;
  margin-top: 6px;
}
math-type .icon-sqrt .big-square,
.auto-complete-external-area .icon-sqrt .big-square {
  margin-top: 11px;
  margin-left: -8px;
}
math-type .sqrt-symbol {
  white-space: nowrap;
  align-items: stretch;
  position: relative;
}
math-type .sqrt-symbol > add {
  opacity: 0.5;
  background-color: #f7f7f7;
  border: 1px solid #c3c2c2;
  color: gray;
  display: block;
  position: absolute;
  font-size: 0.6em;
  cursor: pointer;
  margin-left: -0.4em;
  z-index: 999;
  opacity: 0.7;
  left: 50%;
  top: -0.5em;
  left: 0.5em;
}
math-type .sqrt-symbol > add:hover {
  border-color: gray;
  opacity: 1;
}
math-type .sqrt-symbol > add > i {
  display: block;
  height: 1em;
  padding: 0.1em 0.15em;
  padding-bottom: 0;
  width: 0.8em;
}
math-type .sqrt-symbol text {
  fill: black;
}
math-type .sqrt-symbol > sqrt-edit {
  position: relative;
  order: 3;
  display: inline-block;
  align-self: flex-end;
}
math-type .sqrt-symbol > sqrt-edit > sqrt-symbol-line {
  overflow: visible;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
math-type .sqrt-symbol > sqrt-edit > sqrt-symbol-line > svg {
  overflow: visible;
  width: 100%;
  height: 1em;
}
math-type .sqrt-symbol > sqrt-edit > area-container > line {
  width: 1em;
  position: relative;
}
math-type .sqrt-symbol > sqrt-edit > editarea,
math-type .sqrt-symbol > sqrt-edit > editarea-line {
  z-index: 2;
  display: inline-block;
  min-width: 0.5em;
  margin-left: 1em;
}
math-type .sqrt-symbol > sqrt-top {
  position: relative;
  z-index: 2;
  vertical-align: bottom;
  padding-bottom: 0.95em;
  align-self: flex-end;
  display: inline-block;
}
math-type .sqrt-symbol > sqrt-top.selected {
  outline: 1px solid rgba(93, 92, 92, 0.3);
}
math-type .sqrt-symbol > sqrt-top > editarea {
  font-size: 0.7em;
  border: none 0px;
  min-width: 0.5em;
  display: flex;
  float: right;
  text-align: center;
  text-align-last: auto;
}
math-type .sqrt-symbol > sqrt-top > editarea > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}





/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
image-viewer {
  width: 100%;
}
image-viewer.inline {
  width: auto;
}
image-viewer .image-content {
  cursor: pointer;
  text-align: left;
}
image-viewer detail list-items-options div {
  border: 1px solid transparent;
  cursor: pointer;
  margin-left: 3px;
  padding: 0 2px 0 2px;
}
image-viewer detail list-items-options div:hover {
  background-color: white;
  border: 1px solid lightgray;
}
image-viewer detail list-items-options div.selected {
  background-color: white;
  border: 1px solid lightgray;
}
image-viewer image-container {
  display: flex;
  flex-direction: column;
}
image-viewer image-container img {
  position: absolute;
}
image-viewer image-container.center {
  align-items: center;
}
image-viewer image-container.left {
  align-items: flex-start;
}
image-viewer image-container.right {
  align-items: flex-end;
}
.resize-box {
  position: absolute;
  width: 8px;
  height: 8px;
  border-width: 1px;
  border-color: gray;
  border-style: solid;
  background-color: white;
  z-index: 999;
}
.resize-box.mobile-tablet {
  width: 16px;
  height: 16px;
}
.resize-box.hide {
  display: none;
}
topleft {
  top: 0;
  left: 0;
  margin-left: -5px;
  margin-top: -5px;
  cursor: nwse-resize;
}
topleft.mobile-tablet {
  margin-left: -8px;
  margin-top: -8px;
}
topright {
  top: 0;
  right: 0;
  margin-right: -5px;
  margin-top: -5px;
  cursor: nesw-resize;
}
topright.mobile-tablet {
  margin-right: -8px;
  margin-top: -8px;
}
topmiddle {
  top: 0;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
  cursor: ns-resize;
}
topmiddle.mobile-tablet {
  margin-left: -8px;
  margin-top: -8px;
}
leftmiddle {
  top: 50%;
  left: 0;
  margin-left: -5px;
  margin-top: -5px;
  cursor: ew-resize;
}
leftmiddle.mobile-tablet {
  margin-left: -8px;
  margin-top: -8px;
}
rightmiddle {
  top: 50%;
  right: 0;
  margin-right: -5px;
  margin-top: -5px;
  cursor: ew-resize;
}
rightmiddle.mobile-tablet {
  margin-right: -8px;
  margin-top: -8px;
}
bottomleft {
  bottom: 0;
  left: 0;
  margin-left: -5px;
  margin-bottom: -5px;
  cursor: nesw-resize;
}
bottomleft.mobile-tablet {
  margin-left: -8px;
  margin-bottom: -8px;
}
bottomright {
  bottom: 0;
  right: 0;
  margin-right: -5px;
  margin-bottom: -5px;
  cursor: nwse-resize;
}
bottomright.mobile-tablet {
  margin-right: -8px;
  margin-bottom: -8px;
}
bottommiddle {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  margin-bottom: -5px;
  cursor: ns-resize;
}
bottommiddle.mobile-tablet {
  margin-left: -8px;
  margin-bottom: -8px;
}
.ghost-viewer {
  outline: 1px dotted gray;
  width: 100%;
  height: 100%;
  display: block;
}

compositeblock.image-container {
  position: relative;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}
compositeblock.image-container > image-viewer {
  display: block;
}
compositeblock.image-container.inline {
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;
}
.image-caption > line.text-mode:first-child {
  display: inline;
}
.image-caption > line.text-mode:first-child > blocks {
  display: inline;
}
.add-caption {
  opacity: 0.85;
  text-align: "center";
  color: #1155cc;
  cursor: pointer;
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
  font-size: 13px;
  background: white;
  border: 1px solid lightgray;
  padding: 5px;
}
.add-caption:hover {
  opacity: 1;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .power-index-symbol-container {
  margin-right: 0.06em;
  margin-left: 0.03em;
}
math-type .power-index-symbol-container.has-power > .power-value {
  margin-left: 0.04em;
}
math-type .power-index-symbol-container > .power-value,
math-type .pre-script-symbol-container > .power-value {
  /*margin-bottom: -2px;*/
  float: left;
  clear: both;
  text-align: left;
}
math-type .power-index-symbol-container > .power-value.small > line,
math-type .pre-script-symbol-container > .power-value.small > line {
  margin-bottom: -0.35em;
}
math-type .power-index-symbol-container > .power-value > line,
math-type .pre-script-symbol-container > .power-value > line {
  font-size: 0.7em;
}
math-type .power-index-symbol-container > .power-value > area-container > line,
math-type .pre-script-symbol-container > .power-value > area-container > line,
math-type .power-index-symbol-container > .power-value > line,
math-type .pre-script-symbol-container > .power-value > line {
  justify-content: flex-start;
  text-align: left;
}
math-type .power-index-symbol-container > middle-base,
math-type .pre-script-symbol-container > middle-base {
  display: block;
  clear: both;
  height: 1em;
}
math-type .power-index-symbol-container > middle-base > inline,
math-type .pre-script-symbol-container > middle-base > inline {
  display: inline-block;
}
math-type .power-index-symbol-container > .index-value,
math-type .pre-script-symbol-container > .index-value {
  float: left;
  text-align: left;
}
math-type .power-index-symbol-container > .index-value > line,
math-type .pre-script-symbol-container > .index-value > line {
  font-size: 0.7em;
}
math-type .power-index-symbol-container > .index-value > area-container > line,
math-type .pre-script-symbol-container > .index-value > area-container > line,
math-type .power-index-symbol-container > .index-value > line,
math-type .pre-script-symbol-container > .index-value > line {
  justify-content: flex-start;
  text-align: left;
}
math-type .power-index-symbol-container > editarea-block.index-value,
math-type .pre-script-symbol-container > editarea-block.index-value,
math-type .power-index-symbol-container > editarea-line.index-value,
math-type .pre-script-symbol-container > editarea-line.index-value {
  font-size: 0.7em;
}
math-type .power-index-symbol-container > editarea-block.power-value,
math-type .pre-script-symbol-container > editarea-block.power-value,
math-type .power-index-symbol-container > editarea-line.power-value,
math-type .pre-script-symbol-container > editarea-line.power-value {
  font-size: 0.7em;
}
math-type .pre-script-symbol-container > .power-value {
  float: right;
}
math-type .pre-script-symbol-container > .index-value {
  float: right;
}
.icon-power-index-symbol {
  display: flex;
  margin: auto;
  width: 20px;
  padding-bottom: 6px;
}
.icon-power-index-symbol .square-up {
  margin-top: 4px;
}
.icon-power-index-symbol .square-down {
  margin-top: 14px;
  margin-left: -6px;
}
.icon-power-index-symbol .align-end {
  margin-top: 4px;
}
.icon-power-symbol {
  display: flex;
  margin: auto;
  width: 20px;
  padding-bottom: 6px;
}
.icon-power-symbol .square {
  margin-top: 4px;
}
.icon-power-symbol .align-end {
  margin-top: 4px;
}
.icon-index-symbol {
  display: flex;
  margin: auto;
  width: 20px;
  padding-bottom: 6px;
}
.icon-index-symbol .square {
  margin-top: 14px;
  margin-left: 0px;
}
.icon-index-symbol .align-end {
  margin-top: 4px;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
.matrix-symbol.matrix-like > matrix > table > tbody > tr > td {
  padding-bottom: 0.1em;
  padding-top: 0.1em;
}
.matrix-symbol.matrix-like > matrix > table > tbody > tr.hline {
  border-top: 1px solid;
}
.matrix-symbol.matrix-like > matrix > table > tbody > tr:last-child.last-hline {
  border-bottom: 1px solid;
}
.matrix-symbol {
  /* must be flex to have vertical center align , unless figure out another way */
  display: inline-flex;
  align-items: center;
}
.matrix-symbol > matrix > table > tbody > tr > td > .sbd {
  position: absolute;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  pointer-events: none;
  background: none;
}
.matrix-symbol.selected > matrix > table > tbody > tr > td > .sbd {
  border-top: 1px solid rgba(93, 92, 92, 0.15);
  border-left: 1px solid rgba(93, 92, 92, 0.15);
}
.matrix-symbol.selected > matrix > table > tbody > tr > td > .sbd.sbd-lr {
  border-bottom: 1px solid rgba(93, 92, 92, 0.15);
}
.matrix-symbol.selected > matrix > table > tbody > tr > td > .sbd.sbd-lc {
  border-right: 1px solid rgba(93, 92, 92, 0.15);
}
.matrix-symbol > base-line-indicator {
  height: inherit;
  margin-top: -0.18em;
}
.matrix-symbol matrixclosesymbol,
.matrix-symbol matrixopensymbol {
  font-style: normal;
  color: black;
  position: relative;
}
.matrix-symbol matrixclosesymbol > span,
.matrix-symbol matrixopensymbol > span {
  visibility: hidden;
  display: inline-block;
}
.matrix-symbol matrixclosesymbol > svg,
.matrix-symbol matrixopensymbol > svg {
  overflow: visible;
  font-size: 15px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.matrix-symbol matrixclosesymbol > svg text,
.matrix-symbol matrixopensymbol > svg text {
  fill: black;
}
.matrix-symbol > matrix.matrix > table > tbody > tr > td {
  padding: 0 0.3em;
}
.matrix-symbol > matrix {
  display: flex;
  position: relative;
  float: left;
  align-items: flex-start;
  break-inside: avoid;
}
.matrix-symbol > matrix > svg {
  width: 0.6em;
  /*init height, willl be changed by inline style*/
  height: 3px;
  overflow: visible;
  align-self: flex-start;
}
.matrix-symbol > matrix > vcomposed-symbol {
  height: inherit;
  align-self: stretch;
}
.matrix-symbol > matrix > table {
  border: 1px solid transparent;
  border-collapse: collapse;
}
.matrix-symbol > matrix > table > tbody > tr {
  box-sizing: border-box;
}
.matrix-symbol > matrix > table > tbody > tr.smaller {
  font-size: 0.75em;
}
.matrix-symbol > matrix > table > tbody > tr > td {
  position: relative;
  border: 1px dotted transparent;
  box-sizing: border-box;
  padding: 0 0.3em;
  vertical-align: baseline;
}
.matrix-symbol > matrix > table > tbody > tr > td > .editor-cell {
  display: inline-block;
  width: 100%;
}
.matrix-symbol > matrix > table > tbody > tr > td.vline {
  border-left: 1px solid;
}
.matrix-symbol > matrix > table > tbody > tr > td:last-child.last-vline {
  border-right: 1px solid;
}
.matrix-symbol > matrix > table > tbody > tr > td > .editor-cell {
  min-width: 0.5em;
  text-align: center;
  text-align-last: auto;
}
.matrix-symbol > matrix > table > tbody > tr > td > .editor-cell > area-container > line,
.matrix-symbol > matrix > table > tbody > tr > td > .editor-cell > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}
.matrix-symbol > matrix.matrix > table {
  margin-left: -0.2em;
  margin-right: -0.2em;
}
.matrix-symbol > matrix.matrix > table > tbody > tr > td > .editor-cell {
  text-align: center;
  text-align-last: auto;
}
.matrix-symbol > matrix.matrix > table > tbody > tr > td > .editor-cell > area-container > line,
.matrix-symbol > matrix.matrix > table > tbody > tr > td > .editor-cell > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}
.matrix-symbol > matrix.array > table > tbody > tr > td > .editor-cell.left {
  text-align: left;
}
.matrix-symbol > matrix.array > table > tbody > tr > td > .editor-cell.left > area-container > line,
.matrix-symbol > matrix.array > table > tbody > tr > td > .editor-cell.left > line {
  justify-content: flex-start;
  text-align: left;
}
.matrix-symbol > matrix.array > table > tbody > tr > td > .editor-cell.center {
  text-align: center;
  text-align-last: auto;
}
.matrix-symbol > matrix.array > table > tbody > tr > td > .editor-cell.center > area-container > line,
.matrix-symbol > matrix.array > table > tbody > tr > td > .editor-cell.center > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}
.matrix-symbol > matrix.array > table > tbody > tr > td > .editor-cell.right {
  text-align: right;
}
.matrix-symbol > matrix.array > table > tbody > tr > td > .editor-cell.right > area-container > line,
.matrix-symbol > matrix.array > table > tbody > tr > td > .editor-cell.right > line {
  justify-content: flex-end;
  text-align: right;
}
.matrix-symbol > matrix.gathered > table > tbody > tr > td:nth-child(2n+3) {
  padding-left: 1em;
}
.matrix-symbol > matrix.gathered line {
  text-align: center;
  text-align-last: auto;
}
.matrix-symbol > matrix.aligned > table > tbody > tr > td {
  padding: 0;
}
.matrix-symbol > matrix.aligned > table > tbody > tr > td:nth-child(2n+3) {
  padding-left: 1em;
}
.matrix-symbol > matrix.aligned > table > tbody > tr > td:nth-child(2n+1) > .editor-cell {
  text-align: right;
}
.matrix-symbol > matrix.aligned > table > tbody > tr > td:nth-child(2n+1) > .editor-cell > area-container > line,
.matrix-symbol > matrix.aligned > table > tbody > tr > td:nth-child(2n+1) > .editor-cell > line {
  justify-content: flex-end;
  text-align: right;
}
.matrix-symbol > matrix.aligned > table > tbody > tr > td:nth-child(2n) > .editor-cell {
  text-align: left;
}
.matrix-symbol > matrix.aligned > table > tbody > tr > td:nth-child(2n) > .editor-cell > area-container > line,
.matrix-symbol > matrix.aligned > table > tbody > tr > td:nth-child(2n) > .editor-cell > line {
  justify-content: flex-start;
  text-align: left;
}
.matrix-symbol > matrix > border-design {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 10;
}
.matrix-symbol > matrix > border-design > border-line {
  cursor: pointer;
  position: absolute;
  /*border:1px solid gray;*/
}
.matrix-symbol > matrix > border-design > border-line > horizontal-line {
  border-top: 1px solid #eceaea;
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  margin-top: 0;
  left: 0;
}
.matrix-symbol > matrix > border-design > border-line > vertical-line {
  border-left: 1px solid #eceaea;
  display: block;
  position: absolute;
  left: 50%;
  width: 1px;
  height: 100%;
  top: 0;
}
.matrix-symbol > matrix > border-design > border-line > vertical-line.enabled {
  border-top: 1px solid;
}
.matrix-symbol > matrix > border-design > border-line:hover > horizontal-line {
  border-top: 1px solid gray;
}
.matrix-symbol > matrix > border-design > border-line:hover > vertical-line {
  border-left: 1px solid gray;
}
.matrix-symbol > matrix > border-design > border-line.enabled > horizontal-line {
  border-top: 1px solid;
}
.matrix-symbol > matrix > border-design > border-line.enabled > vertical-line {
  border-left: 1px solid;
}
.matrix-symbol > matrix > setting {
  padding: 7px;
  position: absolute;
  top: -6px;
  font-family: "Segoe UI", Arial, Verdana, sans-serif;
  transform: translate(0, -100%);
  left: 0;
}
.matrix-symbol > matrix > setting > main-setting {
  display: flex;
  flex-direction: row;
}
.matrix-symbol > matrix > setting > main-setting styled-select {
  display: block;
  background-color: white;
}
.fa-table.array-settings {
  border: 1px solid lightgray;
  padding: 3px 5px;
  font-size: 14px;
  color: gray;
  cursor: pointer;
  /*margin-left: 5px;*/
}
.fa-table.array-settings:hover {
  color: black;
  background: white;
}
.matrix-icon {
  display: flex;
}
.matrix-icon .square {
  margin-top: 2px;
}
.matrix-icon .display-flex {
  display: flex;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
.matrix-symbol.case-symbol > matrix > table > tbody > tr > td,
.matrix-symbol.square-case-symbol > matrix > table > tbody > tr > td {
  padding: 0 0.2em;
}
.matrix-symbol.case-symbol > matrix > table > tbody > tr > td.non-select,
.matrix-symbol.square-case-symbol > matrix > table > tbody > tr > td.non-select {
  user-select: none;
  width: 0.2em;
  padding: 0;
}
.matrix-symbol.case-symbol > matrix > table > tbody > tr > td > .editor-cell,
.matrix-symbol.square-case-symbol > matrix > table > tbody > tr > td > .editor-cell {
  text-align: left;
}
.matrix-symbol.case-symbol > matrix > table > tbody > tr > td > .editor-cell > area-container > line,
.matrix-symbol.square-case-symbol > matrix > table > tbody > tr > td > .editor-cell > area-container > line,
.matrix-symbol.case-symbol > matrix > table > tbody > tr > td > .editor-cell > line,
.matrix-symbol.square-case-symbol > matrix > table > tbody > tr > td > .editor-cell > line {
  justify-content: flex-start;
  text-align: left;
}
.case-icon {
  display: flex;
  font-size: 18px;
  line-height: 18px;
}
.case-icon .square {
  margin-top: 2px;
}
.case-icon .display-flex {
  display: flex;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
.matrix-symbol.dr-case-symbol > matrix > table > tbody > tr > td {
  padding: 0 0.2em;
}
.matrix-symbol.dr-case-symbol > matrix > table > tbody > tr > td.selected {
  border: 1px solid #e0e0e0;
}
.matrix-symbol.dr-case-symbol > matrix > table > tbody > tr > td > .editor-cell {
  text-align: left;
}
.matrix-symbol.dr-case-symbol > matrix > table > tbody > tr > td > .editor-cell > area-container > line,
.matrix-symbol.dr-case-symbol > matrix > table > tbody > tr > td > .editor-cell > line {
  justify-content: flex-start;
  text-align: left;
}
.case-icon {
  display: flex;
  font-size: 18px;
  line-height: 18px;
}
.case-icon .square {
  margin-top: 2px;
}
.case-icon .display-flex {
  display: flex;
}

.array-icon .square {
  margin-top: 2px;
}
.array-icon .display-flex {
  display: flex;
}

.matrix-like.binom > .binom > table > tbody > tr > td {
  padding: 0;
}
.matrix-like.binom > .binom > table > tbody > tr > td line {
  text-align: center;
  text-align-last: auto;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
.matrix-symbol.align-symbol {
  /*display flex because to make sure it's spend whole line*/
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}
.matrix-symbol.align-symbol.selected {
  background-color: rgba(76, 175, 80, 0.05);
}
.matrix-symbol.align-symbol > matrix > setting > main-setting {
  margin-bottom: 0px;
}
.matrix-symbol.align-symbol > matrix > bulb {
  left: 50%;
}
.matrix-symbol.align-symbol > matrix > setting {
  margin-left: 20px;
}
.matrix-symbol.align-symbol > matrix.align {
  width: 100%;
  display: block;
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td {
  padding: 0;
  vertical-align: baseline;
  border: 1px solid transparent;
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td > .editor-cell {
  /* should align start and area-container level (instead of line level)
                as for lazy rendering, we need to have exact line width */
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td > .editor-cell > area-container {
  align-items: flex-start;
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td > .editor-cell > area-container > line {
  width: auto;
  text-align: left;
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td.align-right > .editor-cell {
  /* should align start and area-container level (instead of line level)
                as for lazy rendering, we need to have exact line width */
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td.align-right > .editor-cell > area-container {
  align-items: flex-end;
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td.align-right > .editor-cell > area-container > line {
  width: auto;
  text-align: right;
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td.non-select {
  border: none;
  user-select: none;
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td.expand {
  width: 100%;
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td.selected {
  border: 1px solid #e0e0e0;
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td > .editor-cell {
  min-width: 1.5em;
}
.matrix-symbol.align-symbol > matrix > table > tbody > tr > td > tupple {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
.matrix-symbol.gather-symbol {
  /*display flex because to make sure it's spend whole line*/
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}
.matrix-symbol.gather-symbol.selected {
  background-color: rgba(76, 175, 80, 0.05);
}
.matrix-symbol.gather-symbol > matrix.gather {
  width: 100%;
  display: block;
}
.matrix-symbol.gather-symbol > matrix > setting > main-setting {
  margin-bottom: 0px;
}
.matrix-symbol.gather-symbol > matrix > bulb {
  left: -1em;
}
.matrix-symbol.gather-symbol > matrix > setting {
  margin-left: 20px;
}
.matrix-symbol.gather-symbol > matrix > table > tbody > tr > td {
  padding: 0;
  vertical-align: baseline;
  border: 1px solid transparent;
  text-align: center;
  text-align-last: auto;
}
.matrix-symbol.gather-symbol > matrix > table > tbody > tr > td.non-select {
  user-select: none;
  width: 1.5em;
  border: none;
}
.matrix-symbol.gather-symbol > matrix > table > tbody > tr > td.expand {
  width: 100%;
}
.matrix-symbol.gather-symbol > matrix > table > tbody > tr > td.selected {
  border: 1px solid #e0e0e0;
}
.matrix-symbol.gather-symbol > matrix > table > tbody > tr > td line {
  text-align: center;
  text-align-last: auto;
}
.matrix-symbol.gather-symbol > matrix > table > tbody > tr > td > .editor-cell {
  min-width: 1.5em;
  /* should align start and area-container level (instead of line level)
                as for lazy rendering, we need to have exact line width */
}
.matrix-symbol.gather-symbol > matrix > table > tbody > tr > td > .editor-cell > area-container {
  align-items: center;
}
.matrix-symbol.gather-symbol > matrix > table > tbody > tr > td > .editor-cell > area-container > line {
  width: auto;
}
.matrix-symbol.gather-symbol > matrix > table > tbody > tr > td > tupple {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

math-type compositeblock.table-symbol {
  width: 100%;
  display: flex;
}
math-type compositeblock.table-symbol.cap-above {
  flex-direction: column;
}
math-type .matrix-symbol > matrix.table {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}
math-type .matrix-symbol > matrix.table > table {
  table-layout: fixed;
  border: unset;
  width: 100%;
}
math-type .matrix-symbol > matrix.table > table > tbody > tr > td {
  vertical-align: top;
  padding: 0;
  position: relative;
}
math-type .cell-border-box {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 100%;
  height: 100%;
}
.table-caption > line.text-mode:first-child {
  display: inline;
}
.table-caption > line.text-mode:first-child > blocks {
  display: inline;
}

editarea.lttb.text-mode > line.text-mode > blocks {
  text-align: inherit;
}



math-type compositeblock.table-of-content {
  display: block;
  width: 100%;
}
math-type compositeblock.table-of-content > toc-wrapper {
  position: relative;
  width: 100%;
  display: block;
  cursor: default;
}
math-type compositeblock.table-of-content > toc-wrapper .toc-setting-icons {
  display: none;
  position: absolute;
  left: -65px;
  width: 70px;
  top: -20px;
  bottom: 0;
  font-size: 1em;
  z-index: 999;
  padding-top: 20px;
}
math-type compositeblock.table-of-content > toc-wrapper .toc-setting-icons > .icon-refresh,
math-type compositeblock.table-of-content > toc-wrapper .toc-setting-icons > .icon-settings {
  border: 1px solid #c3c2c2;
  padding: 0.3em;
  padding-top: 0.1em;
  line-height: 1.2;
  padding-bottom: 0;
  cursor: pointer;
  background-color: #f7f7f7;
  color: gray;
  width: 12px;
  display: inline-block;
  margin-left: 5px;
}
math-type compositeblock.table-of-content > toc-wrapper:hover .toc-setting-icons {
  display: block;
}
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode {
  width: 100%;
  cursor: default;
  display: block;
}
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode {
  display: block;
  width: auto;
  cursor: default;
  padding-left: 1em;
  padding-right: 15px;
  font-style: unset;
}
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode > a > blocks,
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode > blocks {
  display: block;
}
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode > a > prefix,
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode > prefix {
  display: none;
}
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode.has-rtl {
  padding-left: 15px;
  padding-right: 1em;
}
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode.has-rtl > a > blocks,
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode.has-rtl > blocks {
  text-align: right;
}
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode.has-rtl a > blocks > compositeblock.toc-page-number-symbol,
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode.has-rtl > blocks > compositeblock.toc-page-number-symbol {
  float: left;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  padding-right: 0.5em;
}
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode > block,
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode > a > block,
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode > blocks > block,
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode a > blocks > block {
  white-space: pre-wrap;
  white-space: break-spaces;
  cursor: pointer;
  font-style: unset;
}
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode > a > blocks > compositeblock.toc-page-number-symbol,
math-type compositeblock.table-of-content > toc-wrapper > editarea.toc-ea.text-mode > line.text-mode > blocks > compositeblock.toc-page-number-symbol {
  float: right;
  padding-left: 0.5em;
  margin-right: 0;
}

.icon-integral-symbol {
  margin: auto 4px auto auto;
  display: flex;
  flex-direction: row-reverse;
  font-size: 12px;
}
.icon-integral-symbol .square-up {
  border-width: 1px;
  margin-top: 0px;
}
.icon-integral-symbol .square-down {
  border-width: 1px;
  margin-top: 21px;
  margin-left: -10px;
}
.icon-integral-symbol .align-end {
  margin-top: 6px;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .limit-type {
  position: relative;
}
math-type .limit-type > add {
  opacity: 0.5;
  background-color: #f7f7f7;
  border: 1px solid #c3c2c2;
  color: gray;
  display: block;
  position: absolute;
  font-size: 0.6em;
  cursor: pointer;
  margin-left: -0.4em;
  z-index: 999;
  opacity: 0.7;
  top: -0.5em;
  left: 50%;
  top: -1.4em;
  left: 0.6em;
  align-items: flex-start;
}
math-type .limit-type > add:hover {
  border-color: gray;
  opacity: 1;
}
math-type .limit-type > add > i {
  display: block;
  height: 1em;
  padding: 0.1em 0.15em;
  padding-bottom: 0;
  width: 0.8em;
}
math-type .limit-type > .to,
math-type .limit-type > .from {
  float: left;
  clear: both;
}
math-type .limit-type > .to > line,
math-type .limit-type > .from > line,
math-type .limit-type > .to > editarea > line,
math-type .limit-type > .from > editarea > line {
  font-size: 0.7em;
}
math-type .limit-type > editarea-line,
math-type .limit-type > editarea-block {
  font-size: 0.7em;
}
math-type .limit-type > symbol {
  display: block;
  clear: both;
  pointer-events: none;
}
math-type .limit-type > symbol > span {
  white-space: nowrap;
  pointer-events: none;
}
math-type .limit-type > setting {
  background-color: #f7f7f7;
  border: 1px solid #c3c2c2;
  color: gray;
  opacity: 0.5;
  opacity: 1;
  position: absolute;
  left: 50%;
  top: -2em;
  font-size: 0.6em;
  margin-left: -0.6em;
  padding: 0 0.2em;
  cursor: pointer;
}
math-type .limit-type > setting:hover {
  border-color: gray;
  opacity: 1;
}
math-type .limit-type > setting:hover {
  border: 1px solid gray;
}
math-type .limit-type > setting > i {
  transform: rotate(-60deg);
}
math-type .limit-type.limit-kind > setting > i {
  transform: rotate(45deg);
}
math-type .limit-type.limit-kind > symbol {
  text-align: center;
  text-align-last: auto;
}
math-type .limit-type.limit-kind > .from,
math-type .limit-type.limit-kind > .to {
  width: 100%;
  text-align: center;
  text-align-last: auto;
}
math-type .limit-type.limit-kind > .from > line,
math-type .limit-type.limit-kind > .to > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}
math-type .limit-type.limit-kind > empty.from {
  height: 0;
  margin-top: -0.75em;
}
math-type .limit-type.limit-kind > empty.from > editarea.selected > line,
math-type .limit-type.limit-kind > empty.from > editarea-block.selected,
math-type .limit-type.limit-kind > empty.from > editarea-line.selected {
  background-color: white;
  text-align: center;
  text-align-last: auto;
}
math-type .limit-type.limit-kind > empty.to {
  height: 0;
  text-align: center;
  text-align-last: auto;
}
math-type .limit-type.limit-kind > empty.to > editarea.selected > line,
math-type .limit-type.limit-kind > empty.to > editarea-block.selected,
math-type .limit-type.limit-kind > empty.to > editarea-line.selected {
  background-color: white;
  text-align: center;
  text-align-last: auto;
}
math-type .integral-like-symbol.inline > symbol {
  font-size: 1em;
}
math-type .integral-like-symbol.int-ml {
  margin-left: -0.5em;
}
math-type .integral-like-symbol.oint-ml {
  margin-left: -0.3em;
}
math-type .integral-like-symbol > symbol {
  font-size: 1.5em;
}
math-type .integral-like-symbol > symbol > span {
  line-height: 1.4em;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .limit-type.lim-like-symbol {
  margin-left: 0.2em;
  margin-right: 0.2em;
}
math-type .limit-type.lim-like-symbol.close-left {
  margin-left: 0;
}
math-type .limit-type.lim-like-symbol.close-right {
  margin-right: 0;
}
math-type .limit-type.lim-like-symbol.limit-kind > empty.from > editarea {
  margin-top: -0.4em;
}
math-type .lim-like-symbol > add {
  left: 50%;
  top: -1em;
}
math-type .lim-like-symbol > symbol.inf {
  text-decoration: underline;
}
math-type .lim-like-symbol > symbol.sup {
  text-decoration: overline;
}
math-type .lim-like-symbol.non-limit-kind > editarea.from,
math-type .lim-like-symbol.non-limit-kind > editarea.to {
  margin-left: 1.47em;
}
math-type .lim-like-symbol.non-limit-kind > editarea.from.from-lim,
math-type .lim-like-symbol.non-limit-kind > editarea.to.to-lim {
  margin-left: 1.5435em;
}
math-type .lim-like-symbol.non-limit-kind > editarea.from.from-liminf,
math-type .lim-like-symbol.non-limit-kind > editarea.to.to-liminf {
  margin-left: 3.15em;
}
math-type .lim-like-symbol.non-limit-kind > editarea.from.from-limsup,
math-type .lim-like-symbol.non-limit-kind > editarea.to.to-limsup {
  margin-left: 3.528em;
}
math-type .lim-like-symbol.non-limit-kind > editarea.from.from-sup,
math-type .lim-like-symbol.non-limit-kind > editarea.to.to-sup {
  margin-left: 1.6905em;
}
math-type .lim-like-symbol.non-limit-kind > editarea.from.from-varlimsup,
math-type .lim-like-symbol.non-limit-kind > editarea.to.to-varlimsup {
  margin-left: 1.5435em;
}
math-type .lim-like-symbol.non-limit-kind > editarea-block.from,
math-type .lim-like-symbol.non-limit-kind > editarea-block.to {
  margin-left: 2.072em;
}
math-type .lim-like-symbol.non-limit-kind > editarea-block.from.from-lim,
math-type .lim-like-symbol.non-limit-kind > editarea-block.to.to-lim {
  margin-left: 2.1756em;
}
math-type .lim-like-symbol.non-limit-kind > editarea-block.from.from-liminf,
math-type .lim-like-symbol.non-limit-kind > editarea-block.to.to-liminf {
  margin-left: 4.44em;
}
math-type .lim-like-symbol.non-limit-kind > editarea-block.from.from-limsup,
math-type .lim-like-symbol.non-limit-kind > editarea-block.to.to-limsup {
  margin-left: 4.9728em;
}
math-type .lim-like-symbol.non-limit-kind > editarea-block.from.from-sup,
math-type .lim-like-symbol.non-limit-kind > editarea-block.to.to-sup {
  margin-left: 2.3828em;
}
math-type .lim-like-symbol.non-limit-kind > editarea-block.from.from-varlimsup,
math-type .lim-like-symbol.non-limit-kind > editarea-block.to.to-varlimsup {
  margin-left: 2.1756em;
}



/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .limit-type.summation-like-symbol.limit-kind > empty.from {
  margin-top: -0.3em;
}
math-type .limit-type.summation-like-symbol.limit-kind > empty.from > editarea,
math-type .limit-type.summation-like-symbol.limit-kind > empty.from > editarea-block {
  margin-top: -0.2em;
}
math-type .summation-like-symbol.inline > add {
  top: -1.1em;
}
math-type .summation-like-symbol.inline > symbol {
  font-size: 1em;
}
math-type .summation-like-symbol.inline > symbol > span {
  vertical-align: 0.15em;
}
math-type .summation-like-symbol {
  padding-right: 0.15em;
}
math-type .summation-like-symbol > symbol {
  font-size: 1.5em;
}
math-type .summation-like-symbol > symbol > span {
  vertical-align: 0.1em;
  line-height: 1.4em;
}
math-type .summation-like-symbol > add {
  top: -1.5em;
}
math-type .summation-like-symbol > .custom-symbol {
  font-weight: bold;
}

hcomposed-symbol {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
hcomposed-symbol > start {
  display: block;
  float: left;
  overflow: hidden;
}
hcomposed-symbol > middle {
  display: block;
  flex-grow: 1;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
hcomposed-symbol > middle > fixed {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
hcomposed-symbol > middle > fixed > inside {
  display: inline-block;
  overflow: hidden;
}
hcomposed-symbol > end {
  display: block;
  overflow: hidden;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .arrow-like-symbol {
  padding: 0 0.2em;
}
math-type .arrow-like-symbol > arrow-like-simple > add {
  opacity: 0.5;
  background-color: #f7f7f7;
  border: 1px solid #c3c2c2;
  color: gray;
  display: block;
  position: absolute;
  font-size: 0.6em;
  cursor: pointer;
  margin-left: -0.4em;
  z-index: 999;
  opacity: 0.7;
  top: -0.5em;
  left: 50%;
  left: 0.8em;
  top: -0.7em;
}
math-type .arrow-like-symbol > arrow-like-simple > add:hover {
  border-color: gray;
  opacity: 1;
}
math-type .arrow-like-symbol > arrow-like-simple > add > i {
  display: block;
  height: 1em;
  padding: 0.1em 0.15em;
  padding-bottom: 0;
  width: 0.8em;
}
math-type .arrow-like-symbol > middle {
  display: block;
  text-align: center;
  text-align-last: auto;
  clear: both;
  width: 100%;
  position: relative;
}
math-type .arrow-like-symbol > middle > inside {
  display: inline-block;
  height: 0.55em;
  width: 100%;
}
math-type .arrow-like-symbol > middle > inside > hcomposed-symbol {
  position: absolute;
  top: 0.4em;
  left: 0;
}
math-type .arrow-like-symbol > editarea.sright-1 {
  padding-left: 0.55em;
  padding-right: 0.25em;
}
math-type .arrow-like-symbol > editarea.sleft-1 {
  padding-left: 0.25em;
  padding-right: 0.55em;
}
math-type .arrow-like-symbol > editarea.small-margin {
  padding-left: 0.4em;
  padding-right: 0.4em;
}
math-type .arrow-like-symbol > editarea.large-padding {
  margin: 0 1.3em;
}
math-type .arrow-like-symbol > editarea > line {
  font-size: 0.7em;
}
math-type .arrow-like-symbol > .top {
  float: left;
  width: 100%;
  clear: both;
  margin-bottom: -0.5em;
  z-index: 1;
  position: relative;
}
math-type .arrow-like-symbol > .top.space-1,
math-type .arrow-like-symbol > .top.up-space-1-lower-space-2 {
  margin-bottom: -0.4em;
}
math-type .arrow-like-symbol > .bottom {
  margin-top: -0.45em;
  float: left;
  width: 100%;
}
math-type .arrow-like-symbol > .bottom.space-1,
math-type .arrow-like-symbol > .bottom.lower-space-1 {
  margin-top: -0.35em;
}
math-type .arrow-like-symbol > .bottom.space-2,
math-type .arrow-like-symbol > .bottom.up-space-1-lower-space-2 {
  margin-top: -0.25em;
}

.over-icon {
  margin: auto;
  width: 12px;
  font-size: 13px;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .over-arrow-symbol > arrow-symbol {
  display: block;
  margin-right: -0.05em;
  position: relative;
}
math-type .over-arrow-symbol > arrow-symbol > hcomposed-symbol {
  position: absolute;
}
math-type .over-arrow-symbol > arrow-symbol > arrow-wrapper {
  margin-right: -0.2em;
}
math-type .over-arrow-symbol > editarea {
  display: inline-flex;
  text-align: center;
  text-align-last: auto;
}
math-type .over-arrow-symbol > editarea > area-container > line,
math-type .over-arrow-symbol > editarea > line {
  justify-content: center;
  text-align: center;
  text-align-last: auto;
}
math-type .over-arrow-symbol > editarea-block {
  min-width: 0.5em;
  text-align: center;
  text-align-last: auto;
  display: inline-block;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .over-line-symbol {
  margin-left: 0.05em;
  margin-right: 0.05em;
}
math-type .over-line-symbol > editarea {
  display: inline-flex;
  min-width: 0.5em;
}
math-type .over-line-symbol > editarea-line {
  min-width: 0.5em;
  display: inline-block;
  text-align: center;
  text-align-last: auto;
}
math-type .over-line-symbol > line-border {
  display: block;
  position: relative;
}
math-type .over-line-symbol > line-border > hcomposed-symbol {
  position: absolute;
}
math-type .over-line-symbol > line-border > svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

brace-top-wrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
  font-family: Asana-Math, Asana;
}
brace-top-wrapper > middle-wrapper {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
brace-top-wrapper > middle-wrapper > fixed {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
brace-top-wrapper > middle-wrapper > fixed > middle-inside {
  overflow: hidden;
}
brace-top-wrapper first,
brace-top-wrapper middle,
brace-top-wrapper last {
  overflow: hidden;
  position: relative;
}
brace-top-wrapper first {
  min-width: 0.7em;
  width: 0.7em;
}
brace-top-wrapper > middle {
  min-width: 0.6em;
  width: 0.6em;
}
brace-top-wrapper > last {
  min-width: 0.7em;
  width: 0.7em;
}
bracket-top-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: Asana-Math, Asana;
}
bracket-top-wrapper > first,
bracket-top-wrapper middle,
bracket-top-wrapper last {
  overflow: hidden;
  position: relative;
}
bracket-top-wrapper > first {
  height: 0.5em;
  min-height: 0.5em;
}
bracket-top-wrapper middle-wrapper {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
bracket-top-wrapper middle-wrapper > fixed {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
bracket-top-wrapper middle-wrapper > fixed > middle {
  display: block;
  overflow: hidden;
}
bracket-top-wrapper > last {
  height: 0.65em;
  min-height: 0.65em;
}
parenthesis-top-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: Asana-Math, Asana;
}
parenthesis-top-wrapper > first,
parenthesis-top-wrapper middle,
parenthesis-top-wrapper last {
  overflow: hidden;
  position: relative;
  height: 1em;
  min-height: 1em;
}
parenthesis-top-wrapper > first {
  min-height: 0.9em;
  height: 0.9em;
}
parenthesis-top-wrapper middle-wrapper {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
parenthesis-top-wrapper middle-wrapper > fixed {
  position: absolute;
  top: 0;
  left: 0;
}
parenthesis-top-wrapper middle-wrapper > fixed > middle {
  display: block;
  overflow: hidden;
}
parenthesis-top-wrapper > last {
  min-height: 1em;
  height: 1em;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .over-brace-symbol {
  position: relative;
}
math-type .over-brace-symbol > add {
  opacity: 0.5;
  background-color: #f7f7f7;
  border: 1px solid #c3c2c2;
  color: gray;
  display: block;
  position: absolute;
  font-size: 0.6em;
  cursor: pointer;
  margin-left: -0.4em;
  z-index: 999;
  opacity: 0.7;
  top: -0.5em;
  left: 50%;
  top: -1.5em;
  margin-left: -0.6em;
}
math-type .over-brace-symbol > add:hover {
  border-color: gray;
  opacity: 1;
}
math-type .over-brace-symbol > add > i {
  display: block;
  height: 1em;
  padding: 0.1em 0.15em;
  padding-bottom: 0;
  width: 0.8em;
}
math-type .over-brace-symbol > top-brace {
  pointer-events: none;
  display: block;
  min-width: 1.1em;
  position: relative;
  clear: both;
  margin-bottom: -0.1em;
  font-style: normal;
  font-weight: normal;
}
math-type .over-brace-symbol > top-brace > brace-top-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
math-type .over-brace-symbol > editarea {
  display: inline-flex;
  width: 100%;
  align-self: center;
  clear: both;
}
math-type .over-brace-symbol > editarea.overValue {
  font-size: 0.7em;
  float: left;
  width: 100%;
  margin-bottom: 0.1em;
}

.icon-hat {
  margin: auto;
  width: 12px;
  font-size: 12px;
}
.icon-hat .square {
  margin-top: -3px;
}

.under-arc-symbol {
  display: inline-block;
}
.under-arc-symbol > editarea {
  display: inline-flex;
}
.under-arc-symbol > symbol {
  display: block;
  width: 100%;
  position: relative;
}
.under-arc-symbol > symbol > svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .under-line-symbol > editarea {
  display: inline-flex;
}
math-type .under-line-symbol > line-border {
  display: block;
  position: relative;
  float: left;
  width: 100%;
}
math-type .under-line-symbol > line-border > svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type compositeblock.under-brace-symbol {
  display: inline-flex;
  flex-flow: column;
  position: relative;
}
math-type compositeblock.under-brace-symbol > add {
  opacity: 0.5;
  background-color: #f7f7f7;
  border: 1px solid #c3c2c2;
  color: gray;
  display: block;
  position: absolute;
  font-size: 0.6em;
  cursor: pointer;
  margin-left: -0.4em;
  z-index: 999;
  opacity: 0.7;
  top: -0.5em;
  left: 50%;
  top: 3em;
}
math-type compositeblock.under-brace-symbol > add:hover {
  border-color: gray;
  opacity: 1;
}
math-type compositeblock.under-brace-symbol > add > i {
  display: block;
  height: 1em;
  padding: 0.1em 0.15em;
  padding-bottom: 0;
  width: 0.8em;
}
math-type compositeblock.under-brace-symbol > bottom-brace {
  pointer-events: none;
  display: block;
  position: relative;
  min-width: 1.3em;
  font-style: normal;
  font-weight: normal;
}
math-type compositeblock.under-brace-symbol > bottom-brace > brace-top-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
math-type compositeblock.under-brace-symbol > editarea {
  margin-left: 0.15em;
  margin-right: 0.15em;
  align-self: center;
}
math-type compositeblock.under-brace-symbol > editarea.underValue {
  font-size: 0.7em;
}
.under-brace-icon {
  width: 12px;
  margin: auto;
  font-size: 12px;
}
.under-brace-icon .brace-wrapper {
  margin-top: -14px;
}


math-type .operator-name > editarea {
  margin-left: 0.2em;
  margin-right: 0.2em;
  display: inline-flex;
}
math-type .operator-name > editarea.close-left {
  margin-left: 0;
}
math-type .operator-name > editarea.close-right {
  margin-right: 0;
}

.math-group > editarea {
  float: left;
}
.group-icon .rectangle {
  width: 23px;
  height: 12px;
  border-style: solid;
  border-width: 1px;
  text-align: center;
  border-color: gray;
  font-family: fantasy;
  color: black;
  padding-top: 1px;
  font-size: 9px;
  line-height: 14px;
  vertical-align: middle;
  margin: auto;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type compositeblock.over-symbol {
  position: relative;
}
math-type compositeblock.over-symbol > symbol {
  font-family: Asana-Math, Asana, Arial;
  height: 8em;
  display: block;
  text-align: center;
  text-align-last: auto;
  position: relative;
}
math-type compositeblock.over-symbol > symbol > inner {
  display: block;
  position: absolute;
  text-align: center;
  text-align-last: auto;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
math-type compositeblock.over-symbol > symbol.dot > inner.left-sign,
math-type compositeblock.over-symbol > symbol.ring > inner.left-sign {
  transform: translate(-0.07em, 0);
}
math-type compositeblock.over-symbol > symbol.dot > inner.right-sign,
math-type compositeblock.over-symbol > symbol.ring > inner.right-sign {
  transform: translate(0.2em, 0);
}
math-type compositeblock.over-symbol > symbol.dot > inner,
math-type compositeblock.over-symbol > symbol.ring > inner {
  transform: translate(0.05em, 0);
}
math-type compositeblock.over-symbol > symbol.small-hat > inner.left-sign,
math-type compositeblock.over-symbol > symbol.small-tilde > inner.left-sign {
  transform: translate(-0.04em, 0);
}
math-type compositeblock.over-symbol > symbol.small-hat > inner.right-sign,
math-type compositeblock.over-symbol > symbol.small-tilde > inner.right-sign {
  transform: translate(0.15em, 0);
}
math-type compositeblock.over-symbol > symbol.small-hat > inner.ignore-shift,
math-type compositeblock.over-symbol > symbol.small-tilde > inner.ignore-shift {
  transform: translate(0, 0);
}
math-type compositeblock.over-symbol > symbol.small-hat > inner,
math-type compositeblock.over-symbol > symbol.small-tilde > inner {
  transform: translate(0.05em, 0);
}
math-type compositeblock.over-symbol > symbol.acute > inner.left-sign {
  transform: translate(-0.04em, 0);
}
math-type compositeblock.over-symbol > symbol.acute > inner.right-sign {
  transform: translate(0.25em, 0);
}
math-type compositeblock.over-symbol > symbol.acute > inner {
  transform: translate(0.1em, 0);
}
math-type compositeblock.over-symbol > symbol.grave,
math-type compositeblock.over-symbol > symbol.breve,
math-type compositeblock.over-symbol > symbol.acute {
  font-family: 'Times New Roman', Times, serif;
}
math-type compositeblock.over-symbol > symbol.grave > inner.left-sign,
math-type compositeblock.over-symbol > symbol.breve > inner.left-sign,
math-type compositeblock.over-symbol > symbol.check > inner.left-sign {
  transform: translate(-0.07em, 0);
}
math-type compositeblock.over-symbol > symbol.grave > inner.right-sign,
math-type compositeblock.over-symbol > symbol.breve > inner.right-sign,
math-type compositeblock.over-symbol > symbol.check > inner.right-sign {
  transform: translate(0.17em, 0);
}
math-type compositeblock.over-symbol > symbol.ddddot {
  min-width: 0.9em;
}
math-type compositeblock.over-symbol > symbol.dddot {
  min-width: 0.7em;
}

.math-xx > editarea {
  float: left;
}

math-type .big-delimiter-symbol {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0.1em 0;
}
math-type .big-delimiter-symbol big-delimiter.big-open {
  margin-left: 0.09em;
}
math-type .big-delimiter-symbol big-delimiter.big-close {
  margin-right: 0.07em;
}
math-type .big-delimiter-symbol > base-line-indicator {
  height: inherit;
}
math-type .big-delimiter-symbol > big-delimiter > svg {
  height: 100%;
  width: 100%;
}
math-type .big-delimiter-symbol > big-delimiter > bulb {
  left: -10px;
}
math-type .big-delimiter-symbol > big-delimiter > setting {
  width: 158px;
  display: flex;
  position: absolute;
  left: 0;
  top: -40px;
}
math-type .big-delimiter-symbol > big-delimiter > setting > .select-box-container {
  margin-right: 4px;
}
math-type .big-delimiter-symbol > big-delimiter > setting > .select-box-container:last-child {
  margin-right: 0px;
}

select-buttons {
  font-size: 13px;
  color: gray;
  display: block;
}
select-buttons > sb-item {
  display: inline-block;
  padding: 2px 2px;
  cursor: pointer;
  border: 1px solid transparent;
  /*box-sizing: border-box;*/
}
select-buttons > sb-item.selected {
  background-color: white;
  border: 1px solid lightgray;
}
select-buttons > sb-item:hover {
  border: 1px solid lightgray;
}
select-buttons > sb-item.disabled {
  opacity: 0.3;
  cursor: default;
  border: 1px solid transparent;
}
select-buttons > sb-item.disabled:hover {
  background-color: inherit;
  border: 1px solid transparent;
}

tabs-container tab-item {
  color: gray;
}
tabs-container tab-item:hover {
  color: black;
}

expandable-component.button-action {
  cursor: pointer;
  color: gray;
  fill: gray;
}
expandable-component.button-action:hover,
expandable-component.button-action.selected {
  color: black;
  fill: black;
}
expandable-component.button-action:hover label-display,
expandable-component.button-action.selected label-display {
  border: 1px solid #e2e0e0;
}
expandable-component.button-action label-display {
  font-size: 12px;
  padding-top: 5px;
  display: flex;
  border: 1px solid transparent;
  padding-left: 2px;
  padding-right: 2px;
  margin-top: 0px;
  padding-bottom: 4px;
  cursor: pointer;
}
expandable-component.button-action label-display > i {
  padding-left: 5px;
  padding-top: 1px;
}
expandable-component.button-action label-item-container > label-item:hover {
  background-color: #bfe4bd;
}
expandable-component.button-action label-item-container > label-item.ignore-select {
  background-color: inherit;
  cursor: default;
}
expandable-component.button-action.button-style label-display {
  background: white;
  border: 1px solid lightgray;
}
expandable-component.button-action.button-style:hover,
expandable-component.button-action.button-style.selected {
  color: gray;
}
expandable-component.button-action.button-style:hover label-display,
expandable-component.button-action.button-style.selected label-display {
  background: #f7f6f6;
}

g.group-box-move {
  opacity: 0.2;
}
g.group-box-move:hover {
  opacity: 0.8;
}




.math-diagram .intersections-group {
  stroke-width: 2px;
  stroke: black;
  fill: transparent;
  cursor: move;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type compositeblock.math-diagram > math-diagram {
  background: white;
}
math-type compositeblock.math-diagram {
  cursor: default;
  width: 100%;
  /** display block as if inline block, it will be disapear in some cases*/
  display: block;
}
math-type compositeblock.math-diagram .connection-point {
  cursor: crosshair;
}
math-type compositeblock.math-diagram .connection-point g {
  fill-opacity: 0.6;
}
math-type compositeblock.math-diagram .connection-point:hover g {
  fill-opacity: 1;
}
math-type compositeblock.math-diagram .text-diagram-editor editarea.text-mode.non-wrap > line.text-mode {
  font-size: unset;
}
math-type compositeblock.math-diagram .text-diagram-editor editarea.text-mode.non-wrap > line.text-mode > block {
  white-space: pre;
}
math-type compositeblock.math-diagram .text-diagram-editor editarea.text-mode.non-wrap > line.text-mode > blocks > block {
  white-space: pre;
}
math-type compositeblock.math-diagram > math-diagram {
  border: 1px solid transparent;
}
math-type compositeblock.math-diagram > math-diagram > clip-region > zoom-region {
  display: block;
  width: 100%;
  height: 100%;
}
math-type compositeblock.math-diagram > math-diagram > clip-region > zoom-region > svg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
math-type compositeblock.math-diagram .add-label {
  fill: gray;
}
math-type compositeblock.math-diagram .add-label:hover {
  fill: black;
}
math-type compositeblock.math-diagram .diagram-editor {
  margin: 0 2px;
}
math-type compositeblock.math-diagram .control-point-guide {
  stroke: lightgray;
  stroke-width: 0.5px;
  pointer-events: none;
}
math-type compositeblock.math-diagram .connection-group {
  stroke: black;
  fill: none;
}
math-type compositeblock.math-diagram .arrow-line {
  cursor: move;
}
math-type compositeblock.math-diagram .mobile-tablet .shape .transparent,
math-type compositeblock.math-diagram .mobile-tablet .composite-shape .transparent {
  stroke-width: 10px;
}
math-type compositeblock.math-diagram .shape,
math-type compositeblock.math-diagram .composite-shape {
  stroke-width: 1px;
  fill: none;
  cursor: move;
}
math-type compositeblock.math-diagram .shape .transparent,
math-type compositeblock.math-diagram .composite-shape .transparent {
  pointer-events: visiblePainted;
  stroke-width: 6px;
  stroke: transparent;
  stroke-dasharray: none;
  fill: none;
}
math-type compositeblock.math-diagram .mobile-tablet .connection.transparent,
math-type compositeblock.math-diagram .mobile-tablet .connection.transparent > line,
math-type compositeblock.math-diagram .mobile-tablet .connection.transparent > path {
  stroke-width: 10px;
}
math-type compositeblock.math-diagram .connection {
  stroke-width: 1px;
  fill: none;
  cursor: move;
}
math-type compositeblock.math-diagram .connection.transparent,
math-type compositeblock.math-diagram .connection.transparent > line,
math-type compositeblock.math-diagram .connection.transparent > path {
  pointer-events: visiblePainted;
  stroke-width: 6px;
  stroke: transparent;
  stroke-dasharray: none;
  fill: none;
}
math-type compositeblock.math-diagram .frame {
  stroke-width: 1px;
  fill: transparent;
}
math-type math-diagram {
  display: block;
  position: relative;
  width: 100%;
  height: 300px;
}
math-type math-diagram position-container {
  position: absolute;
  width: 1px;
  height: 1px;
  display: block;
}
math-type math-diagram dg-editor-container {
  position: absolute;
  min-width: 0.85em;
  border-collapse: border-box;
}
math-type math-diagram coverlayer {
  position: absolute;
  background: transparent;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: move;
}
math-type math-diagram connection-point {
  position: absolute;
  display: block;
  height: 6px;
  width: 6px;
  background: lightgray;
  border: 1px solid gray;
  bottom: -10px;
  left: 50%;
  margin-left: -3px;
  cursor: e-resize;
}
math-type .diagram-caption > line.text-mode:first-child {
  display: inline;
}
math-type .diagram-caption > line.text-mode:first-child > blocks {
  display: inline;
}


.plot-input-style-settings {
  opacity: 0.5;
}
.plot-input-style-settings:hover {
  opacity: 1;
}

.psa-cn .ps-hint {
  opacity: 0;
  transition: opacity 0.3s linear;
}
.psa-cn:hover .ps-hint {
  opacity: 0.6;
}

.role-toolbar-wrapper.dg-full-view tool-bar too-bar-container {
  justify-content: start;
  width: auto;
  min-width: 0;
}
.role-toolbar-wrapper.dg-full-view diagram-settings {
  width: auto;
}

.dg-items-bar-container item {
  display: inline-block;
  padding: 3px;
  fill: gray;
  stroke: gray;
}
.dg-items-bar-container item,
.dg-items-bar-container item-option {
  border: 1px transparent solid;
}
.dg-items-bar-container item:hover,
.dg-items-bar-container item-option:hover {
  border: 1px #c4c1c1 solid;
  background: white;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type compositeblock.theorem {
  display: block;
}
math-type compositeblock.theorem.selected {
  outline: 1px solid rgba(93, 92, 92, 0.3);
}
math-type theorem-name {
  min-width: 20px;
  display: inline;
}
math-type theorem-name > line.text-mode:first-child {
  display: inline;
}
math-type editarea.text-mode.edit-theorem-content {
  min-width: 100px;
  display: inline;
  font-style: italic;
}
math-type editarea.text-mode.edit-theorem-content > line.text-mode:first-child {
  display: inline;
}
math-type editarea.text-mode.edit-theorem-content > line.text-mode:first-child > blocks {
  display: inline;
}
math-type editarea.text-mode.edit-theorem-content > line.text-mode > block {
  font-style: italic;
}
math-type editarea.text-mode.edit-theorem-content > line.text-mode > blocks > block {
  font-style: italic;
}
math-type editarea.text-mode.edit-theorem-content.normal > line.text-mode > block {
  font-style: normal;
}
math-type editarea.text-mode.edit-theorem-content.normal > line.text-mode > blocks > block {
  font-style: normal;
}
math-type editarea.text-mode.edit-theorem-content .qed-symbol {
  line-height: 1em;
}
.deletable {
  cursor: pointer;
}
.deletable:hover {
  color: red;
}

.regular-checkbox:hover {
  background-color: #f3f2f2;
}

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none !important;
  }
}
math-type .code-section prefix.code-line-number {
  color: #a9a7a7;
  width: 2.5em;
  display: inline-block;
  flex-shrink: 0;
}
math-type .code-section prefix.code-line-number.prefix-l10 {
  width: 1.5em;
}
math-type .code-section prefix.code-line-number.prefix-l100 {
  width: 2em;
}
math-type .code-section .code-line-blocks-container {
  white-space: pre-wrap;
  white-space: break-spaces;
}
math-type .code-section .code-line-blocks-container block.token {
  white-space: pre-wrap;
  white-space: break-spaces;
}
math-type .code-section line.text-mode.code-section-line {
  display: flex;
  flex-direction: row;
  line-height: 1.5;
}

/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
.code-section.theme-default editarea {
  color: black;
}
.code-section.theme-default .token.comment,
.code-section.theme-default .token.prolog,
.code-section.theme-default .token.doctype,
.code-section.theme-default .token.cdata {
  color: slategray;
}
.code-section.theme-default .token.punctuation {
  color: #999;
}
.code-section.theme-default .namespace {
  opacity: 0.7;
}
.code-section.theme-default .token.property,
.code-section.theme-default .token.tag,
.code-section.theme-default .token.boolean,
.code-section.theme-default .token.number,
.code-section.theme-default .token.constant,
.code-section.theme-default .token.symbol,
.code-section.theme-default .token.deleted {
  color: #905;
}
.code-section.theme-default .token.selector,
.code-section.theme-default .token.attr-name,
.code-section.theme-default .token.string,
.code-section.theme-default .token.char,
.code-section.theme-default .token.builtin,
.code-section.theme-default .token.inserted {
  color: #690;
}
.code-section.theme-default .token.operator,
.code-section.theme-default .token.entity,
.code-section.theme-default .token.url,
.code-section.theme-default .language-css .token.string,
.code-section.theme-default .style .token.string {
  color: #9a6e3a;
}
.code-section.theme-default .token.atrule,
.code-section.theme-default .token.attr-value,
.code-section.theme-default .token.keyword {
  color: #07a;
}
.code-section.theme-default .token.function,
.code-section.theme-default .token.class-name {
  color: #DD4A68;
}
.code-section.theme-default .token.regex,
.code-section.theme-default .token.important,
.code-section.theme-default .token.important1,
.code-section.theme-default .token.variable {
  color: #e90;
}
.code-section.theme-default .token.important,
.code-section.theme-default .token.bold,
.code-section.theme-default .token.bold1 {
  font-weight: bold;
}
.code-section.theme-default .token.italic,
.code-section.theme-default .token.italic1 {
  font-style: italic;
}
.code-section.theme-default .token.entity {
  cursor: help;
}

/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
.code-section.theme-tomorrow-night {
  /**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */
}
.code-section.theme-tomorrow-night editarea {
  caret-color: #ccc;
}
.code-section.theme-tomorrow-night editarea {
  color: #ccc;
}
.code-section.theme-tomorrow-night .token.comment,
.code-section.theme-tomorrow-night .token.block-comment,
.code-section.theme-tomorrow-night .token.prolog,
.code-section.theme-tomorrow-night .token.doctype,
.code-section.theme-tomorrow-night .token.cdata {
  color: #999;
}
.code-section.theme-tomorrow-night .token.punctuation {
  color: #ccc;
}
.code-section.theme-tomorrow-night .token.tag,
.code-section.theme-tomorrow-night .token.attr-name,
.code-section.theme-tomorrow-night .token.namespace,
.code-section.theme-tomorrow-night .token.deleted {
  color: #e2777a;
}
.code-section.theme-tomorrow-night .token.function-name {
  color: #6196cc;
}
.code-section.theme-tomorrow-night .token.boolean,
.code-section.theme-tomorrow-night .token.number,
.code-section.theme-tomorrow-night .token.function {
  color: #f08d49;
}
.code-section.theme-tomorrow-night .token.property,
.code-section.theme-tomorrow-night .token.class-name,
.code-section.theme-tomorrow-night .token.constant,
.code-section.theme-tomorrow-night .token.symbol {
  color: #f8c555;
}
.code-section.theme-tomorrow-night .token.selector,
.code-section.theme-tomorrow-night .token.important,
.code-section.theme-tomorrow-night .token.important1,
.code-section.theme-tomorrow-night .token.atrule,
.code-section.theme-tomorrow-night .token.keyword,
.code-section.theme-tomorrow-night .token.builtin {
  color: #cc99cd;
}
.code-section.theme-tomorrow-night .token.string,
.code-section.theme-tomorrow-night .token.char,
.code-section.theme-tomorrow-night .token.attr-value,
.code-section.theme-tomorrow-night .token.regex,
.code-section.theme-tomorrow-night .token.variable {
  color: #7ec699;
}
.code-section.theme-tomorrow-night .token.operator,
.code-section.theme-tomorrow-night .token.entity,
.code-section.theme-tomorrow-night .token.url {
  color: #67cdcc;
}
.code-section.theme-tomorrow-night .token.important,
.code-section.theme-tomorrow-night .token.bold,
.code-section.theme-tomorrow-night .token.bold1 {
  font-weight: bold;
}
.code-section.theme-tomorrow-night .token.italic,
.code-section.theme-tomorrow-night .token.italic1 {
  font-style: italic;
}
.code-section.theme-tomorrow-night .token.entity {
  cursor: help;
}
.code-section.theme-tomorrow-night .token.inserted {
  color: green;
}

editor-container > math-type.dark-mode {
  background: #1e1e1e;
}
math-type.dark-mode {
  background: #1e1e1e;
}
math-type.dark-mode.math-type-for-print {
  -webkit-print-color-adjust: exact;
}
math-type.dark-mode editarea.root-editor {
  color: #e0e0e0;
  fill: #e0e0e0;
  stroke: #e0e0e0;
  border-color: #e0e0e0;
}
math-type.dark-mode editarea.root-editor {
  background: #1e1e1e;
}
math-type.dark-mode .math-container-symbol.selected,
math-type.dark-mode .math-container-symbol.display.selected {
  background-color: #2a352a;
}
math-type.dark-mode .matrix-symbol.gather-symbol.selected {
  background-color: #2a352a;
}
math-type.dark-mode .matrix-symbol.gather-symbol > matrix > table > tbody > tr > td.selected {
  border: 1px solid #525252;
}
math-type.dark-mode .matrix-symbol.align-symbol.selected {
  background-color: #2a352a;
}
math-type.dark-mode .matrix-symbol.align-symbol > matrix > table > tbody > tr > td.selected {
  border: 1px solid #525252;
}
math-type.dark-mode .matrix-symbol.matrix-like.selected {
  background-color: #2a352a;
}
math-type.dark-mode .matrix-symbol.matrix-like > matrix > table > tbody > tr.selected:not(.hline) {
  border-top: 1px solid #525252;
}
math-type.dark-mode .matrix-symbol.matrix-like > matrix > table > tbody > tr:last-child.selected {
  border-bottom: 1px solid #525252;
}
math-type.dark-mode .matrix-symbol > matrix > table > tbody > tr > td.selected:not(.vline) {
  border-left: 1px solid #525252;
}
math-type.dark-mode .matrix-symbol > matrix > table > tbody > tr > td:last-child.selected {
  border-right: 1px solid #525252;
}
math-type.dark-mode .matrix-symbol.case-symbol > matrix > table > tbody > tr > td.selected {
  border: 1px solid #525252;
}
math-type.dark-mode selection-wrapper > selection {
  background-color: rgba(33, 150, 243, 0.25);
}
math-type.dark-mode selection-wrapper.inactive > selection {
  background-color: rgba(255, 255, 255, 0.27);
}
math-type.dark-mode editarea.selected {
  outline: 1px solid rgba(177, 174, 174, 0.3);
}
math-type.dark-mode compositeblock.math-diagram > math-diagram {
  background: #1e1e1e;
}
container-layer.dark-mode editor-container {
  background: #1e1e1e;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
editor-container > math-type {
  background: white;
  outline: 1px solid lightgray;
}
math-type {
  display: block;
  position: relative;
  padding: 20px;
  color: black;
  padding-top: 15px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  cursor: text;
  text-align: initial;
}
math-type .rcnt {
  color: white;
  font-size: 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
}
math-type > .mt-sa {
  position: absolute;
  top: 0;
  left: -100px;
  right: -100px;
  bottom: -400px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}
math-type.math-only compositeblock.math-container-symbol {
  width: 100%;
}
math-type.math-only compositeblock.math-container-symbol.selected {
  outline: none;
  background: none;
}
math-type.math-only compositeblock.math-container-symbol > editarea {
  width: 100%;
}
math-type.math-only compositeblock.math-container-symbol > editarea > line {
  justify-content: flex-start;
}
math-type > input:not([type]),
math-type input[type="text"] {
  width: 50px;
}
math-type composition-indicator {
  display: block;
  position: absolute;
  height: 2px;
  min-width: 2px;
  border-bottom: 2px solid gray;
  left: 0;
  top: 0;
}
math-type .focus-element {
  outline: none;
  overflow: hidden;
  width: 0px;
  height: 0px;
  top: 0px;
  left: 0px;
  display: block;
  position: absolute;
  font-size: 40px;
}
.scroll-without-scrollbar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}
.scroll-without-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
#root,
.main-container {
  width: 100%;
  color: #212121;
}
.sub-text-cursor,
.text-cursor {
  position: absolute;
  color: green;
  /*font-size: 1.2em;*/
  pointer-events: none;
  border-left: 2px solid green;
  display: block;
  top: 0px;
  left: 0px;
  z-index: 10;
}
.sub-text-cursor {
  opacity: 0.4;
}
math-edit-container {
  display: block;
  outline: none;
  position: relative;
  font-family: 'Asana';
}
.root-editor {
  min-height: 500px;
  box-sizing: border-box;
}
.root-editor.restricted-view {
  min-height: unset;
}
.root-editor.test-view {
  min-height: 100px;
}
.menu {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "HelveticaNeue-Medium", sans-serif;
  font-size: 14px;
  display: inline-block;
  transform: scale(1, 1.5);
  -webkit-transform: scale(1, 1.5);
  /* Safari and Chrome */
  -moz-transform: scale(1, 1.5);
  /* Firefox */
  -ms-transform: scale(1, 1.5);
  /* IE 9+ */
  -o-transform: scale(1, 1.5);
  /* Opera */
}
.setting-group-options {
  font-size: 13px;
  color: gray;
  fill: gray;
}
.setting-group-options > i,
.setting-group-options > svg.icon {
  padding: 3px;
  cursor: pointer;
  border: 1px solid transparent;
  /*box-sizing: border-box;*/
}
.setting-group-options > i.selected,
.setting-group-options > svg.icon.selected {
  background-color: white;
  border: 1px solid lightgray;
}
.setting-group-options > i:hover,
.setting-group-options > svg.icon:hover {
  border: 1px solid lightgray;
}
.setting-group-options > i.disabled,
.setting-group-options > svg.icon.disabled {
  opacity: 0.3;
}
.setting-group-options > i.disabled:hover,
.setting-group-options > svg.icon.disabled:hover {
  background-color: inherit;
  border: 1px solid transparent;
}
math-type .math-text,
math-type .normal-text,
math-type .raw-latex {
  font-family: arial, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
math-type .math-text editarea.text-mode > line.text-mode > blocks > block,
math-type .normal-text editarea.text-mode > line.text-mode > blocks > block,
math-type .raw-latex editarea.text-mode > line.text-mode > blocks > block {
  white-space: nowrap;
}
.mt-common-dialog {
  box-shadow: 1px 1px 1px 0px #e0dddd;
  background-color: #f7f7f7;
  border: 1px lightgray solid;
  z-index: 14;
  padding: 6px;
  cursor: default;
  font-family: "Segoe UI", Arial, Verdana, sans-serif;
}
disabled-layer {
  display: block;
  position: absolute;
  left: 0;
  top: 1px;
  right: 0;
  bottom: 2px;
  background: rgba(247, 247, 247, 0.66);
  /** consider export button z-index when change this one*/
  z-index: 500;
}
math-type tag-container tag-select-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
math-type tag-container tag-box-select {
  position: absolute;
  display: block;
  background-color: green;
  opacity: 0;
  cursor: pointer;
  z-index: 15;
}
math-type tag-container tag-box-select:hover {
  opacity: 0.2;
}
math-type tag-container tag-box-gap {
  position: absolute;
  display: block;
  background-color: white;
  opacity: 0.9;
  z-index: 15;
}
.setting-popup-zindex {
  z-index: 11;
}
svg.selectable {
  cursor: pointer;
  border: 1px solid transparent;
}
svg.selectable.selected {
  background: white;
  border: solid 1px lightgray;
}
svg.selectable:hover {
  border: solid 1px lightgray;
}


@media print {
  @page {
    margin: 0;
  }
  /**
    Convert Preview into main print area
    */
  .math-type-doc,
  .docs-container,
  .modal-dialog-root-container,
  instructions-container {
    display: none !important;
  }
  .print-preview-container {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    z-index: 99999 !important;
  }
  .print-container {
    position: static !important;
    overflow: hidden;
  }
  .print-preview-controls-container {
    display: none !important;
  }
  .math-type-no-print {
    display: none !important;
  }
  area-container.print-page-level {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    break-inside: avoid !important;
  }
  .area-container-border {
    border: none !important;
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    display: none !important;
  }
  #print-container {
    background-color: transparent !important;
  }
  #print-container > math-type {
    background-color: transparent !important;
  }
  #print-container > math-type > math-edit-container > editarea {
    background-color: transparent !important;
  }
  /*-----------------------------*/
  header,
  .export-bar-container {
    display: none !important;
  }
  math-type {
    padding: 0 !important;
  }
  .print-remove-background {
    background-color: transparent !important;
  }
  document-info-bar {
    display: none !important;
  }
  document-sidebar-container {
    display: none !important;
  }
  body {
    position: relative !important;
  }
  page,
  #root,
  body,
  html {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    background: white !important;
    overflow: visible !important;
  }
}
.print-background.math-type-for-print {
  -webkit-print-color-adjust: exact;
}
@media print {
  outline: none !important;
  .npm__react-simple-code-editor__textarea {
    display: none !important;
  }
  math-diagram {
    border: none !important;
  }
  .no-border-on-print {
    border: none !important;
  }
  .setting-select {
    display: none !important;
  }
  .no-print,
  ref-tag.empty-line-tag,
  .text-cursor,
  .sub-text-cursor,
  selection-wrapper,
  message-box-container,
  connection-controls,
  .control-point-guide,
  tool-bar,
  items-bar,
  document-sidebar,
  resize-bar,
  diagram-expander,
  warning-error-region,
  loading-layer,
  resizing-info,
  toc-refresh {
    display: none !important;
  }
  .no-print-outline {
    outline: none !important;
  }
  .selected {
    background: unset !important;
  }
  .math-container-symbol.selected {
    background: unset !important;
  }
  .matrix-symbol.align-symbol {
    background: unset !important;
  }
  .matrix-symbol.gather-symbol {
    background: unset !important;
  }
  tr.selected,
  td.selected {
    border: unset !important;
  }
  tr.selected.hline {
    border-top: 1px solid black !important;
  }
  tr.selected.last-hline {
    border-bottom: 1px solid black !important;
  }
  td.selected.vline {
    border-left: 1px solid black !important;
  }
  td.selected.last-vline {
    border-right: 1px solid black !important;
  }
  .selected {
    outline: unset !important;
  }
  container-layer {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    height: initial !important;
    overflow: visible !important;
  }
  editor-container {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: 100% !important;
  }
  content-area {
    padding: 0px !important;
    margin: 0;
    background: transparent !important;
  }
  vcomposed-symbol.non-safari > start {
    margin-bottom: -0.05em !important;
  }
  vcomposed-symbol.non-safari > middle-center {
    margin-top: -0.05em;
    margin-bottom: -0.05em !important;
  }
  vcomposed-symbol.non-safari > middle {
    margin-top: -0.05em;
    margin-bottom: -0.05em !important;
  }
  vcomposed-symbol.non-safari > end {
    margin-top: -0.05em !important;
  }
}
.math-type-for-print {
  outline: none !important;
}
.math-type-for-print .npm__react-simple-code-editor__textarea {
  display: none !important;
}
.math-type-for-print math-diagram {
  border: none !important;
}
.math-type-for-print .no-border-on-print {
  border: none !important;
}
.math-type-for-print .setting-select {
  display: none !important;
}
.math-type-for-print .no-print,
.math-type-for-print ref-tag.empty-line-tag,
.math-type-for-print .text-cursor,
.math-type-for-print .sub-text-cursor,
.math-type-for-print selection-wrapper,
.math-type-for-print message-box-container,
.math-type-for-print connection-controls,
.math-type-for-print .control-point-guide,
.math-type-for-print tool-bar,
.math-type-for-print items-bar,
.math-type-for-print document-sidebar,
.math-type-for-print resize-bar,
.math-type-for-print diagram-expander,
.math-type-for-print warning-error-region,
.math-type-for-print loading-layer,
.math-type-for-print resizing-info,
.math-type-for-print toc-refresh {
  display: none !important;
}
.math-type-for-print .no-print-outline {
  outline: none !important;
}
.math-type-for-print .selected {
  background: unset !important;
}
.math-type-for-print .math-container-symbol.selected {
  background: unset !important;
}
.math-type-for-print .matrix-symbol.align-symbol {
  background: unset !important;
}
.math-type-for-print .matrix-symbol.gather-symbol {
  background: unset !important;
}
.math-type-for-print tr.selected,
.math-type-for-print td.selected {
  border: unset !important;
}
.math-type-for-print tr.selected.hline {
  border-top: 1px solid black !important;
}
.math-type-for-print tr.selected.last-hline {
  border-bottom: 1px solid black !important;
}
.math-type-for-print td.selected.vline {
  border-left: 1px solid black !important;
}
.math-type-for-print td.selected.last-vline {
  border-right: 1px solid black !important;
}
.math-type-for-print .selected {
  outline: unset !important;
}
.math-type-for-print container-layer {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  height: initial !important;
  overflow: visible !important;
}
.math-type-for-print editor-container {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: 100% !important;
}
.math-type-for-print content-area {
  padding: 0px !important;
  margin: 0;
  background: transparent !important;
}
.math-type-for-print vcomposed-symbol.non-safari > start {
  margin-bottom: -0.05em !important;
}
.math-type-for-print vcomposed-symbol.non-safari > middle-center {
  margin-top: -0.05em;
  margin-bottom: -0.05em !important;
}
.math-type-for-print vcomposed-symbol.non-safari > middle {
  margin-top: -0.05em;
  margin-bottom: -0.05em !important;
}
.math-type-for-print vcomposed-symbol.non-safari > end {
  margin-top: -0.05em !important;
}
.justify-single-line {
  display: inline-block;
  text-align-last: justify;
  width: 100%;
}
.rtl-on-line-level {
  direction: rtl;
}

math-type modal-dialog.import-latex math-type editarea.root-editor {
  min-height: 100px;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
math-type .mobile-keys-support-region {
  position: fixed;
  top: 84px;
  left: 45px;
  color: gray;
  z-index: 11609;
  opacity: 0.9;
  display: flex;
  width: auto;
  z-index: 600;
  cursor: pointer;
}
math-type .mobile-keys-support-region.is-android {
  top: unset;
  bottom: 4px;
  left: 17px;
}
math-type .mobile-keys-support-region.select-only {
  top: 40px;
  left: 25px;
}
math-type .mobile-keys-support-region.select-only .btn-suggestion-box-mobile {
  display: none;
}



.special-symbol-dialog__special-char {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
  outline: none;
}
.special-symbol-dialog__special-char:hover {
  background: #bfe4bd;
}

/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**different context*/
/**different context*/
context-menu-container {
  position: fixed;
  left: 100px;
  top: 300px;
  z-index: 13;
  box-shadow: 2px 2px 3px 0px #c3c3c3;
  border: 1px solid lightgray;
  width: 200px;
  background: white;
  cursor: default;
  outline: none;
  font-family: "Segoe UI", Arial, Verdana, sans-serif;
}
context-menu-container ct-item {
  display: block;
  padding: 6px 9px;
  font-size: 13px;
  color: gray;
}
context-menu-container ct-item.disabled {
  color: lightgray;
}
context-menu-container ct-item:hover {
  background: #eae9e9;
}
context-menu-container ct-item.hidden {
  display: none;
}
context-menu-container ct-icon {
  width: 20px;
  display: inline-block;
}
context-menu-container ct-separator {
  width: 100%;
  display: block;
  height: 1px;
  margin-top: 2px;
  margin-bottom: 2px;
  border-top: 1px solid lightgray;
}

/* Collection default theme */
/* Grid default theme */
/* Table default theme */









/* List default theme */



math-type .symbol-container,
.auto-complete-external-area .symbol-container {
  display: flex;
  flex-direction: row;
  min-height: 25px;
  padding-left: 4px;
  padding-right: 12px;
  align-items: center;
  cursor: pointer;
}
math-type .symbol-container.selected,
.auto-complete-external-area .symbol-container.selected {
  background-color: #bfe4bd;
}
math-type .symbol-friendly-name,
.auto-complete-external-area .symbol-friendly-name {
  flex-grow: 1;
  font-family: Asana;
  /*padding-top: 6px;*/
}
math-type .symbol-icon,
.auto-complete-external-area .symbol-icon {
  /*padding-top: 6px;*/
  margin-right: 15px;
  min-width: 20px;
  text-align: center;
}
math-type .short-cut,
.auto-complete-external-area .short-cut {
  text-align: center;
  color: gray;
  /*vertical-align: middle;*/
  /*line-height: 20px;*/
  margin: 0 2px 0 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
math-type .short-cut span,
.auto-complete-external-area .short-cut span {
  font-size: 10px;
}
math-type .hidden,
.auto-complete-external-area .hidden {
  display: none;
}







/**different context*/
/**different context*/
selection-wrapper {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  user-select: none;
  pointer-events: none;
  z-index: 9;
}
selection-wrapper > selection {
  display: block;
  position: absolute;
  background-color: rgba(0, 126, 255, 0.15);
  user-select: none;
  width: 100px;
  height: 100px;
  transform-origin: 0 0;
}
selection-wrapper.inactive > selection {
  background-color: rgba(58, 57, 57, 0.13);
}

region-highlight-container {
  user-select: none;
  pointer-events: none;
  display: block;
  position: absolute;
  width: 0px;
  height: 0px;
  top: 0;
  left: 0;
  border: 1px solid lightgoldenrodyellow;
  opacity: 0.2;
}
region-highlight-container > rhc-all > rh-rect {
  display: block;
  position: absolute;
  background: orange;
}
region-highlight-container > rh-selected-rect {
  display: block;
  position: absolute;
  background: red;
}

.math-template-btb.btn-normal {
  background: transparent;
  margin-left: 0;
  font-size: 12px;
  border: none;
}
.math-template-btb.btn-normal:hover {
  background: white;
}
.math-template-name-item:hover {
  background: #f7f7f7;
}

.math-template-tree .tree-node-name {
  white-space: nowrap;
}
.math-template-tree .tree-node-name:hover {
  background: #f7f7f7;
}

math-type compositeblock.bib-bibliography {
  width: 100%;
  display: block;
}
math-type compositeblock.bib-cite {
  display: inline;
  white-space: break-spaces;
}
math-type compositeblock.bib-cite > editarea.text-mode {
  display: inline;
}
math-type compositeblock.bib-cite > editarea.text-mode > line.text-mode {
  display: inline;
}
math-type compositeblock.bib-cite > editarea.text-mode > line.text-mode > blocks {
  display: inline;
}
.csl-context {
  white-space: pre-wrap;
}
.csl-context.csl-cite div {
  display: inline;
}
.csl-context div.csl-left-margin {
  float: left;
}
.csl-context div.csl-block {
  font-weight: bold;
}
.csl-context div.csl-right-inline {
  margin-left: 2.5em;
}
.csl-context div.csl-indent {
  margin-top: 0.5em;
  margin-left: 2em;
  padding-bottom: 0.2em;
  padding-left: 0.5em;
  border-left: 5px solid #ccc;
}

.caption-ref-select .role-item:hover {
  background: #edf9ec;
}

.footnote-mt-container {
  position: relative;
}
.footnote-mt-container .more-option-box {
  position: absolute;
  left: -25px;
  top: 0;
  width: 30px;
  bottom: 0;
  display: none;
}
.footnote-mt-container .more-option-box > div {
  background: #f7f7f7;
  border: 1px solid #d6d3d3;
  padding: 0 0.2em;
  cursor: pointer;
  color: gray;
  display: inline-block;
}
.footnote-mt-container.hover-select:hover .more-option-box {
  display: block;
}
.mt-doc-fn > math-edit-container > editarea > area-container > line > first-line-prefix {
  padding-right: 0.3em;
}
.mt-doc-fn > math-edit-container > editarea > area-container > line.has-rtl {
  direction: rtl;
}
.mt-doc-fn > math-edit-container > editarea > area-container > line.has-rtl > first-line-prefix {
  padding-left: 0.3em;
}
.blocks-inline > math-edit-container > editarea > area-container > line > blocks {
  display: inline;
}

.lang-name:hover {
  background: #f7f7f7;
}
.lang-name.selected {
  background: #e1e8f5;
}
.custom-lange-area input::placeholder,
.custom-lange-area textarea::placeholder {
  color: lightgray;
}

.page-print-item {
  position: relative;
}
.page-print-item:hover .page-print-item-hover {
  display: block;
}
.page-print-item-hover {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  background: #f7f6f6;
  z-index: 10;
  padding: 5px;
  font-size: 0.8em;
  white-space: nowrap;
  color: gray;
  border: 1px solid lightgray;
}

.settings-show-hide {
  background: rgba(255, 255, 255, 0.61);
}
.settings-show-hide:hover {
  background: white;
}
.group-symbol-collapsed {
  display: block;
  border: 1px dotted lightgray;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}
.role-math-mode-group.math-mode-group-expanded .settings-show-hide,
.role-text-mode-group-inline.text-mode-group-inline-expanded .settings-show-hide {
  display: none;
}
.role-math-mode-group.math-mode-group-expanded:hover,
.role-text-mode-group-inline.text-mode-group-inline-expanded:hover {
  outline: 1px solid lightgray;
}
.role-math-mode-group.math-mode-group-expanded:hover .settings-show-hide,
.role-text-mode-group-inline.text-mode-group-inline-expanded:hover .settings-show-hide {
  display: flex;
}

math-type compositeblock.text-super-script-symbol,
math-type compositeblock.text-sub-script-symbol {
  display: inline;
}
math-type compositeblock.text-super-script-symbol > editarea.text-mode,
math-type compositeblock.text-sub-script-symbol > editarea.text-mode {
  display: inline;
}
math-type compositeblock.text-super-script-symbol > editarea.text-mode > line.text-mode,
math-type compositeblock.text-sub-script-symbol > editarea.text-mode > line.text-mode {
  display: inline;
}
math-type compositeblock.text-super-script-symbol > editarea.text-mode > line.text-mode > blocks,
math-type compositeblock.text-sub-script-symbol > editarea.text-mode > line.text-mode > blocks {
  display: inline;
}
math-type .text-super-script-symbol {
  vertical-align: super;
}
math-type .text-sub-script-symbol {
  vertical-align: sub;
}

compositeblock.section-ref {
  display: inline;
}
compositeblock.section-ref > .section-ref-border {
  display: inline;
  white-space: pre-wrap;
}
compositeblock.section-ref > div {
  display: inline;
}



icon-dropdown-items icon-dropdown-item:hover {
  background: #eae9e9;
}
icon-dropdown ii-icon {
  fill: gray;
}
icon-dropdown:hover {
  color: #4e4d4d;
}
icon-dropdown:hover ii-icon {
  fill: #4e4d4d;
}

resizable-container {
  display: block;
  position: relative;
  min-height: 0;
  flex-shrink: 0;
}





a.fce {
  cursor: pointer;
}
a.fce:hover svg {
  fill: #2d4373;
}
a.fce svg {
  fill: #3b5998;
}
a.fce i {
  text-align: center;
  color: white;
}
a.gg {
  cursor: pointer;
}
a.gg:hover svg {
  fill: #c23321;
}
a.gg svg {
  fill: #dd4b39;
}
a.gg i {
  text-align: center;
  color: white;
}
a.twr {
  cursor: pointer;
}
a.twr:hover svg {
  fill: #2795e9;
}
a.twr svg {
  fill: #55acee;
}
a.twr i {
  text-align: center;
  color: white;
}
a.gh {
  cursor: pointer;
}
a.gh:hover svg {
  fill: #2b2b2b;
}
a.gh svg {
  fill: #444;
}
a.gh i {
  text-align: center;
  color: white;
}





modal-dialog.swift.document-name modal-container.mt-common-dialog {
  width: 500px;
  max-width: 95vw;
}
modal-dialog.swift.document-name document-name {
  width: 100%;
  display: flex;
  flex-direction: column;
}
modal-dialog.swift.document-name document-name label {
  display: block;
  font-size: 13px;
}
modal-dialog.swift.document-name document-name textarea {
  width: auto;
  display: block;
  margin: 5px 0px;
  height: 39px;
  outline: none;
  border: 1px solid lightgray;
  resize: vertical;
}

.dock-tab-content {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: none;
}
.dock-tab-content.active {
  display: flex;
}

quick-start editarea.root-editor {
  min-height: 100px;
}
quick-start > qs-math-type-container > math-type:hover {
  border: 1px solid gray;
}
quick-start > qs-math-type-container > math-type tool-bar {
  display: none;
}
quick-start > qs-math-type-container > math-type items-bar {
  display: none;
  left: -60px;
  top: 0px;
  box-shadow: 0px 1px 2px 0px #4c4949;
}





/**we use alpha as we have problem with background (without alpha) in Electron version (older Chrome) **/
/* z-index region*/
/**Context Level 1*/
/**both Level 1 and 2 Context */
/**Context Level 2 inside docsContainerZIndex*/
document-info-container document-info-bar {
  display: block;
  position: absolute;
  right: 15px;
  bottom: 5px;
  background: #f7f7f7;
  box-shadow: 1px 1px 1px 0px #e0dddd;
  border: 1px lightgray solid;
  font-size: 12px;
  padding: 0px;
  color: gray;
  opacity: 0.8;
  z-index: 4;
}
document-info-container document-info-bar:hover {
  opacity: 1;
}
document-info-container modal-container button.ok.btn-primary {
  display: none;
}
.Popover-body {
  font-size: 12px;
  padding: 10px;
  background: #4CAF50;
  box-shadow: #888686 1px 1px 1px 1px;
  color: white;
  max-width: 250px;
}
.Popover-tip {
  fill: #4CAF50;
}

/**Context Level 1*/
/**both Level 1 and 2 Context */
/**Context Level 2 inside docsContainerZIndex*/
.doc-toolbar-container {
  position: relative;
  background: #f7f7f7;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px lightgray solid;
  margin-left: -2px;
  z-index: 6;
}
.doc-toolbar-container > tool-bar {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  padding-left: 0px;
  min-width: 770px;
  width: 770px;
  margin: auto;
  background: transparent;
  box-shadow: none;
  border: none;
  height: 35px;
}


[class^="fa-"], [class*=" fa-"] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-plus:before {
  content: "\f067";
}
.fa-user:before {
  content: "\f007";
}
.fa-check:before {
  content: "\f00c";
}
.fa-close:before {
  content: "\f00d";
}
.fa-remove:before {
  content: "\f00d";
}
.fa-times:before {
  content: "\f00d";
}
.fa-search-plus:before {
  content: "\f00e";
}
.fa-search-minus:before {
  content: "\f010";
}
.fa-cog:before {
  content: "\f013";
}
.fa-gear:before {
  content: "\f013";
}
.fa-trash-o:before {
  content: "\f014";
}
.fa-file-o:before {
  content: "\f016";
}
.fa-refresh:before {
  content: "\f021";
}
.fa-font:before {
  content: "\f031";
}
.fa-bold:before {
  content: "\f032";
}
.fa-italic:before {
  content: "\f033";
}
.fa-align-left:before {
  content: "\f036";
}
.fa-align-center:before {
  content: "\f037";
}
.fa-align-right:before {
  content: "\f038";
}
.fa-dedent:before {
  content: "\f03b";
}
.fa-outdent:before {
  content: "\f03b";
}
.fa-indent:before {
  content: "\f03c";
}
.fa-image:before {
  content: "\f03e";
}
.fa-photo:before {
  content: "\f03e";
}
.fa-picture-o:before {
  content: "\f03e";
}
.fa-pencil:before {
  content: "\f040";
}
.fa-edit:before {
  content: "\f044";
}
.fa-pencil-square-o:before {
  content: "\f044";
}
.fa-share-square-o:before {
  content: "\f045";
}
.fa-arrows:before {
  content: "\f047";
}
.fa-chevron-left:before {
  content: "\f053";
}
.fa-chevron-right:before {
  content: "\f054";
}
.fa-times-circle:before {
  content: "\f057";
}
.fa-info-circle:before {
  content: "\f05a";
}
.fa-arrow-left:before {
  content: "\f060";
}
.fa-arrow-right:before {
  content: "\f061";
}
.fa-arrow-up:before {
  content: "\f062";
}
.fa-arrow-down:before {
  content: "\f063";
}
.fa-mail-forward:before {
  content: "\f064";
}
.fa-share:before {
  content: "\f064";
}
.fa-exclamation-circle:before {
  content: "\f06a";
}
.fa-exclamation-triangle:before {
  content: "\f071";
}
.fa-warning:before {
  content: "\f071";
}
.fa-chevron-up:before {
  content: "\f077";
}
.fa-chevron-down:before {
  content: "\f078";
}
.fa-folder:before {
  content: "\f07b";
}
.fa-folder-open:before {
  content: "\f07c";
}
.fa-twitter:before {
  content: "\f099";
}
.fa-twr:before {
  content: "\f099";
}
.fa-facebook:before {
  content: "\f09a";
}
.fa-fce:before {
  content: "\f09a";
}
.fa-facebook-f:before {
  content: "\f09a";
}
.fa-github:before {
  content: "\f09b";
}
.fa-gh:before {
  content: "\f09b";
}
.fa-cut:before {
  content: "\f0c4";
}
.fa-scissors:before {
  content: "\f0c4";
}
.fa-copy:before {
  content: "\f0c5";
}
.fa-files-o:before {
  content: "\f0c5";
}
.fa-bars:before {
  content: "\f0c9";
}
.fa-navicon:before {
  content: "\f0c9";
}
.fa-reorder:before {
  content: "\f0c9";
}
.fa-list-ul:before {
  content: "\f0ca";
}
.fa-list-ol:before {
  content: "\f0cb";
}
.fa-strikethrough:before {
  content: "\f0cc";
}
.fa-underline:before {
  content: "\f0cd";
}
.fa-table:before {
  content: "\f0ce";
}
.fa-magic:before {
  content: "\f0d0";
}
.fa-caret-down:before {
  content: "\f0d7";
}
.fa-caret-right:before {
  content: "\f0da";
}
.fa-sort-desc:before {
  content: "\f0dd";
}
.fa-sort-down:before {
  content: "\f0dd";
}
.fa-clipboard:before {
  content: "\f0ea";
}
.fa-paste:before {
  content: "\f0ea";
}
.fa-angle-double-left:before {
  content: "\f100";
}
.fa-angle-double-right:before {
  content: "\f101";
}
.fa-angle-double-up:before {
  content: "\f102";
}
.fa-angle-double-down:before {
  content: "\f103";
}
.fa-circle:before {
  content: "\f111";
}
.fa-mail-reply:before {
  content: "\f112";
}
.fa-reply:before {
  content: "\f112";
}
.fa-exclamation:before {
  content: "\f12a";
}
.fa-eraser:before {
  content: "\f12d";
}
.fa-ellipsis-h:before {
  content: "\f141";
}
.fa-ellipsis-v:before {
  content: "\f142";
}
.fa-file:before {
  content: "\f15b";
}
.fa-file-text:before {
  content: "\f15c";
}
.fa-google:before {
  content: "\f1a0";
}
.fa-gg:before {
  content: "\f1a0";
}
.fa-trash:before {
  content: "\f1f8";
}
.fa-i-cursor:before {
  content: "\f246";
}
.fa-hand-paper-o:before {
  content: "\f256";
}
.fa-hand-stop-o:before {
  content: "\f256";
}