html,
body,
main {
  margin: 0;
  height: 100%;
}
[flex] {
  display: flex;
}
[row] {
  flex-direction: row;
}
[col] {
  flex-direction: column;
}
[grow] {
  flex-grow: 1;
}
[flex-end] {
  justify-content: flex-end;
}
[center-items] {
  align-items: center;
}
input {
  backgorund: #fff;
  border-radius: 3px;
  border: 1px solid #333;
  padding: 4px 8px;
  margin: 0;
}
button {
  background: transparent;
  border-radius: 2px;
  padding: 4px 8px;
  border: 1px solid;
  cursor: pointer;
  color: #333;
  transition: all 0.3s ease-in-out;
}
button:hover {
  color: #767676;
}
button.primary {
  background: #36c;
  border: 1px solid #36c;
  color: #fff;
}
button.primary:hover {
  background: #547ed4;
  border: 1px solid #547ed4;
}
button.danger {
  background: #c33;
  border: 1px solid #c33;
  color: #fff;
}
button.danger:hover {
  background: #d45454;
  border: 1px solid #d45454;
}
.field.hidden {
  display: none;
}
.field.danger input {
  border-color: #a44;
}
.field.danger label {
  color: #a44;
}
.quill-always-hidden-toolbar {
  display: none;
  visibility: hidden;
  width: 0;
  height: 0;
}
.quill-always-hidden-toolbar.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 1px solid #ccc;
}
#headings {
  font-family: Calibri, Helvetica, Arial, sans-serif;
  background: #f2f2f2;
  min-width: 230px;
}
#headings #headings-search {
  padding: 5px;
}
#headings #headings-search-text {
  width: 100%;
  box-sizing: border-box;
}
#headings #headings-list {
  direction: rtl;
  overflow-x: visible;
  overflow-y: auto;
  height: calc(100% - 38px - 33px);
  padding-right: 50px;
  margin-right: -50px;
}
#headings .heading-actions {
  align-items: center;
  position: relative;
}
#headings .action {
  cursor: pointer;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 0;
  padding: 10px 6px;
  line-height: 1;
  font-size: 0;
  height: 100%;
}
#headings .action .icon {
  pointer-events: none;
}
#headings .action.collapse .icon {
  transition: transform 0.3s ease-in-out;
  transform: rotateZ(90deg);
}
#headings .action:hover {
  background: rgba(0,0,0,0.1);
}
#headings .actions.is-expanded .action.menu {
  background: rgba(0,0,0,0.1);
}
#headings .heading-actions-dropdown {
  position: absolute;
  background: #fff;
  top: 90%;
  right: -5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#headings .heading-actions-dropdown .dropdown-action {
  padding: 10px;
}
#headings .heading-actions-dropdown .dropdown-action .icon {
  display: inline-block;
}
#headings .heading-actions-dropdown .dropdown-action .action-label {
  font-size: 14px;
  display: inline-block;
  white-space: nowrap;
  pointer-events: none;
}
#headings .heading-actions-dropdown .dropdown-action .icon + .action-label {
  margin-left: 10px;
}
#headings .heading-actions-dropdown:before {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 6px solid #ddd;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: none;
  top: -6px;
  right: 9px;
}
#headings .heading-actions-dropdown:after {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 5px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: none;
  top: -5px;
  right: 10px;
}
#headings .headings-title {
  padding-left: 5px;
  margin: 0;
  line-height: 1;
  align-self: center;
}
#headings .heading.is-collapsed .heading-list {
  display: none;
}
#headings .heading.is-collapsed .action.collapse .icon {
  transform: rotateZ(-90deg);
}
#headings.is-querying .heading {
  display: none;
}
#headings.is-querying .query-visible,
#headings.is-querying .query-match {
  display: block;
}
#headings.is-querying .query-match {
  background: rgba(189,182,42,0.5);
}
#headings.is-querying .query-match .heading {
  display: block;
}
#headings .user-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -2px;
  line-height: 1;
  left: 3px;
}
#headings .user-indicators .user-indicator {
  display: inline-block;
  margin: 0 3px 0 0;
  line-height: 1;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  padding: 0;
}
.gm-mode-enabled #headings .headings-heading {
  background: #111;
  color: #fff;
}
.gm-mode-enabled #headings .headings-heading svg,
.gm-mode-enabled #headings .headings-heading g,
.gm-mode-enabled #headings .headings-heading path {
  fill: #fff;
}
ul.heading-list {
  margin: 0;
  padding: 0;
  list-style: none;
  direction: ltr;
}
ul.heading-list .heading {
  position: relative;
}
ul.heading-list .heading[data-level="1"] .heading-text {
  font-size: 22px;
  font-weight: 600;
  color: #111;
}
ul.heading-list .heading[data-level="2"] .heading-text {
  font-size: 18px;
  font-weight: 500;
  color: #222;
}
ul.heading-list .heading[data-level="3"] .heading-text {
  font-size: 16px;
  font-weight: 600;
  color: #666;
}
ul.heading-list li {
  cursor: pointer;
  padding: 0 0 0 10px;
  border-radius: 3px;
}
ul.heading-list li:hover,
#headings:not(:hover) ul.heading-list li.is-active {
  background: rgba(0,0,0,0.05);
}
ul.heading-list .heading-text {
  padding: 10px;
  display: inline-block;
}
#breadcrumbs {
  font-family: Calibri, Helvetica, Arial, sans-serif;
  height: 38px;
  background: #f2f2f2;
}
#breadcrumbs .breadcrumbs-actions {
  list-style: none;
  padding: 0;
  margin: 0;
}
#breadcrumbs .breadcrumbs-actions .action {
  cursor: pointer;
  padding: 0 5px;
}
#breadcrumbs .breadcrumbs-actions .action:hover {
  background: #ddd;
}
#breadcrumbs .breadcrumbs-actions .action[disabled] {
  cursor: auto;
}
#breadcrumbs .breadcrumbs-actions .action[disabled] svg,
#breadcrumbs .breadcrumbs-actions .action[disabled] g,
#breadcrumbs .breadcrumbs-actions .action[disabled] path {
  fill: #555;
}
#breadcrumbs .breadcrumbs-actions .action[disabled]:hover {
  background: #f2f2f2;
}
.gm-mode-enabled #breadcrumbs {
  background: #111;
  color: #fff;
}
.gm-mode-enabled #breadcrumbs svg,
.gm-mode-enabled #breadcrumbs g,
.gm-mode-enabled #breadcrumbs path {
  fill: #fff;
}
.gm-mode-enabled #breadcrumbs .action:hover {
  background: #333;
}
.gm-mode-enabled #breadcrumbs .action[disabled] {
  cursor: auto;
}
.gm-mode-enabled #breadcrumbs .action[disabled] svg,
.gm-mode-enabled #breadcrumbs .action[disabled] g,
.gm-mode-enabled #breadcrumbs .action[disabled] path {
  fill: #aaa;
}
.gm-mode-enabled #breadcrumbs .action[disabled]:hover {
  background: #111;
}
#breadcrumbs-list {
  list-style: none;
  height: 100%;
  padding: 0;
  margin: 0;
}
#breadcrumbs-list li {
  display: flex;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 18px;
  height: 100%;
  box-sizing: border-box;
  align-items: center;
}
#breadcrumbs-list li.divider {
  color: #39c;
}
#modal {
  font-family: Calibri, Helvetica, Arial, sans-serif;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
}
#modal.is-visible {
  display: block;
}
#modal .modal-glass {
  background: #000;
  opacity: 0.33;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#modal .modal {
  position: fixed;
  min-width: 300px;
  min-height: 50px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 0 5px 1px rgba(0,0,0,0.15);
}
#modal .modal .modal-header {
  padding: 6px 12px;
  border-bottom: 1px solid #ccc;
  min-width: 300px;
}
#modal .modal .modal-header h1,
#modal .modal .modal-header h2,
#modal .modal .modal-header h3,
#modal .modal .modal-header h4,
#modal .modal .modal-header h5,
#modal .modal .modal-header h6 {
  margin: 0;
}
#modal .modal .modal-body {
  font-size: 18px;
  padding: 6px 12px;
  border-bottom: 1px solid #ccc;
  min-width: 300px;
}
#modal .modal .modal-footer {
  padding: 6px 12px;
  min-width: 300px;
  text-align: right;
}
#modal .modal .modal-footer .modal-action {
  margin-left: 6px;
  font-size: 14px;
  line-height: 1;
}
#modal .modal .modal-title {
  font-size: 20px;
}
#content {
  height: calc(100% - 38px);
}
#editor {
  height: calc(100% - 42px);
}
[d-dropdown] [d-dropdown-target] {
  display: none;
  z-index: 100;
}
[d-dropdown] [d-dropdown-target].dropdown-menu {
  position: absolute;
  background: #fff;
  top: 0;
  right: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
[d-dropdown] [d-dropdown-target].dropdown-menu .dropdown-action {
  display: block;
  padding: 10px;
}
[d-dropdown].is-expanded [d-dropdown-target] {
  display: block;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0) translate(50%, -100%);
}
[d-dropdown].is-expanded [d-dropdown-target].is-expanding {
  opacity: 1;
  transform: scale(1) translate(0, 0);
}
.tooltip-text {
  opacity: 0;
  display: block;
  pointer-events: none;
  position: absolute;
  background: #333;
  color: #fff;
  border-radius: 3px;
  padding: 3px 6px;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  z-index: 50;
  transform: translate(0, 0) scale(0);
}
.tooltip-text:before {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
[d-tooltip] {
  position: relative;
}
[d-tooltip].is-tooltip-visible .tooltip-text {
  opacity: 1;
}
[d-tooltip-bottom] .tooltip-text,
[d-tooltip] .tooltip-text {
  top: calc(100% + 3px);
  left: calc(50% - 1px);
  transform: translate(-50%, -25%) scale(0);
}
[d-tooltip-bottom] .tooltip-text:before,
[d-tooltip] .tooltip-text:before {
  border-bottom: 6px solid #333;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: none;
  top: -5px;
  left: calc(50% - 5px);
}
[d-tooltip-bottom].is-tooltip-visible .tooltip-text,
[d-tooltip].is-tooltip-visible .tooltip-text {
  transform: translate(-50%, 0) scale(1);
}
[d-tooltip-right] .tooltip-text {
  top: calc(50% - 1px);
  left: calc(100% + 3px);
  transform: translate(-50%, -50%) scale(0);
}
[d-tooltip-right] .tooltip-text:before {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #333;
  border-left: none;
  top: calc(50% - 5px);
  left: -5px;
}
[d-tooltip-right].is-tooltip-visible .tooltip-text {
  transform: translate(0, -50%) scale(1);
}
[d-tooltip-left] .tooltip-text {
  top: calc(50% - 1px);
  right: calc(100% + 3px);
  transform: translate(50%, -50%) scale(0);
  text-align: right;
  left: auto;
}
[d-tooltip-left] .tooltip-text:before {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #333;
  border-right: none;
  top: calc(50% - 5px);
  right: -5px;
  left: auto;
}
[d-tooltip-left].is-tooltip-visible .tooltip-text {
  transform: translate(0, -50%) scale(1);
}
[d-icon] {
  pointer-events: none;
}
#modal .autocomplete-input {
  position: relative;
}
#modal .autocomplete-input .autocomplete-suggestions {
  display: none;
  top: 100%;
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  left: 0;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  max-height: 300px;
  overflow-y: auto;
}
#modal .autocomplete-input .autocomplete-suggestions .autocomplete-suggestion {
  padding: 4px 8px;
  cursor: pointer;
  display: block;
  white-space: nowrap;
}
#modal .autocomplete-input .autocomplete-suggestions .autocomplete-suggestion:hover {
  background: #f2f2f2;
}
#modal .autocomplete-input.autocomplete-visible .autocomplete-suggestions {
  display: block;
}
#modal .autocomplete-input.is-filtering .autocomplete-suggestion {
  display: none;
}
#modal .autocomplete-input.is-filtering .autocomplete-suggestion.is-visible {
  display: block;
}
#modal.history-modal .history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#modal.history-modal .history-list .history-entry {
  cursor: pointer;
  padding: 6px 12px;
}
#modal.history-modal .history-list .history-entry:hover,
#modal.history-modal .history-list .history-entry.active {
  background: #f2f2f2;
}
#modal.confirm-modal .modal-body {
  display: none;
}
main {
  display: flex;
}
.main-child {
  padding: 10px;
}