/* PG Editor CSS */

/* general editor: ge */
.ge-noa {
  text-decoration: none;
}
.ge-queue {
  height: 22.5px;
}
.ge-queue-btn {
  background-color: var(--pg2-dark);
  border: none;
  border-radius: 8px;
}
.ge-queue-btn:hover {
  background-color: var(--pg2);
  border: none;
}
.ge-queue-count {}

/* containers */
.ge-editor-mar {
  width: 20%;
  min-height: 10px;
  /*background-color: blue;*/
}
.ge-editor-marsmall {
  width: 4%;
  min-height: 10px;
  /*background-color: red;*/
}
.ge-editor-main {
  padding: 32px 0px;
}

.ge-editor-block {
  width: 100%;
  padding: 8px;
  background-color: var(--bg0-dark);
  border-radius: 8px;
  margin-bottom: 32px;
}
.ge-editor-block .inner {
  display: flex;
}

.ge-editor-label {
  display: inline-block;
  padding-right: 8px;
}
.ge-editor-label .label-inner {
  vertical-align: middle;
}
.ge-editor-value {
  display: inline-block;
  flex: 1;
}

.ge-editor-row {
  display: block;
}
.ge-editor-row .label-inner {
  display: block;
}

.ge-editor-input {
  width: 100%;
  color: var(--txt);
  background-color: var(--bg1-light);
  border: 1px solid var(--bg0);
}

#ge-editor-title {
  font-size: 22px;
}
#ge-editor-descr,
#ge-editor-tags {
  resize: vertical;
  min-height: 120px;
  margin-top: 8px;
}

.ge-editor-body {
  background-color: var(--bg1);
  margin-top: 8px;
}
.ge-editor-bodycont {}

#ge-editor-tag-out {
  margin-top: 22.5px;
  padding: 8px;
}
#ge-editor-tags {
  font-family: 'Roboto Mono';
}

/* suneditor.js */
.ge-editor-bodycont .sun-editor {
  width: unset !important;
  font-family: var(--font-mini) !important;
  background-color: var(--bg0) !important;
  color: var(--txt) !important;
  border-color: var(--bg0-light) !important;
}

.ge-editor-bodycont .sun-editor .se-toolbar {
  background-color: var(--bg1-light) !important;
  outline-color: var(--bg0-light) !important;
}
.ge-editor-bodycont .sun-editor .se-btn-module-border {
  border-color: var(--bg3-light) !important;
}
.ge-editor-bodycont .sun-editor button {
  fill: var(--txt) !important;
  color: var(--txt) !important;
}
.ge-editor-bodycont .sun-editor button:hover {
  background-color: var(--bg3-light) !important;
}
.ge-editor-bodycont .sun-editor .se-btn:enabled.on {
  background-color: var(--bg3) !important;
  border-color: var(--bg3-light) !important;
}
.ge-editor-bodycont .sun-editor .se-list-layer {
  background-color: var(--bg0) !important;
  border-color: var(--bg3-light) !important;
}
.ge-editor-bodycont .sun-editor .se-btn-list.default_value {
  background-color: var(--bg0) !important;
  border-color: var(--bg3-light) !important;
}
.ge-editor-bodycont .sun-editor .se-list-inner .se-list-basic li button.active {
  background-color: var(--highlight);
  border-color: var(--highlight-dark);
}
.ge-editor-bodycont .sun-editor-editable {
  font-family: var(--font-mini) !important;
  font-size: 14px !important;
  background-color: var(--bg0) !important;
  color: var(--txt) !important;
}
.ge-editor-bodycont .sun-editor-editable .__se__t-code, .sun-editor .__se__t-code {
  color: var(--txt) !important;
  background-color: var(--bg1-light) !important;
}
.ge-editor-bodycont .sun-editor .se-selector-table {
  background-color: var(--bg0) !important;
  border-color: var(--bg3-light) !important;
}
.ge-editor-bodycont .se-dialog-content,
.ge-editor-bodycont .se-dialog-content div,
.ge-editor-bodycont .se-dialog-content label,
.ge-editor-bodycont .se-dialog-content input,
.ge-editor-bodycont .sun-editor .se-input-select,
.ge-editor-bodycont .sun-editor .se-input-form,
.ge-editor-bodycont .sun-editor .se-dialog-tabs button,
.ge-editor-bodycont .sun-editor-editable figure figcaption {
  background-color: var(--bg0) !important;
  color: var(--txt) !important;
}
.ge-editor-bodycont .sun-editor .se-dialog-tabs button.active,
.ge-editor-bodycont .sun-editor .se-controller .se-btn-group button:enabled.on {
  background-color: var(--bg0-dark) !important;
}
.ge-editor-bodycont  .sun-editor .se-controller .se-btn-group button:enabled.active {
  background-color: var(--bg1-light) !important;
}

.ge-editor-bodycont .sun-editor .se-btn-primary {
  background-color: var(--highlight) !important;
  color: var(--txt) !important;
}
.ge-editor-bodycont .sun-editor .se-submenu .se-form-group input {
  background-color: var(--bg1) !important;
  color: var(--txt) !important;
}
.ge-editor-bodycont .se-controller .se-controller-link,
.ge-editor-bodycont .sun-editor .se-arrow,
.ge-editor-bodycont .sun-editor .se-controller {
  background-color: var(--bg0) !important;
  color: var(--txt) !important;
  border-color: var(--bg3-light) !important;
}
.ge-editor-bodycont .sun-editor .se-resizing-bar,
.ge-editor-bodycont .sun-editor .se-resizing-bar .se-navigation {
  background-color: var(--bg0) !important;
  color: var(--txt) !important;
  border-color: var(--bg3-light) !important;
}
.ge-editor-bodycont .sun-editor .se-controller .se-arrow.se-arrow-up {
  border-color: var(--bg0) !important;
}
.ge-editor-bodycont .sun-editor .se-list-layer.se-list-format ul h1,
.ge-editor-bodycont .sun-editor .se-list-layer.se-list-format ul h2,
.ge-editor-bodycont .sun-editor .se-list-layer.se-list-format ul h3,
.ge-editor-bodycont .sun-editor .se-list-layer.se-list-format ul h4,
.ge-editor-bodycont .sun-editor .se-list-layer.se-list-format ul h5,
.ge-editor-bodycont .sun-editor .se-list-layer.se-list-format ul h6 {
  color: var(--txt) !important;
}
.ge-editor-bodycont .sun-editor-editable pre,
.ge-editor-bodycont .sun-editor .se-list-layer.se-list-format ul pre {
  color: var(--txt) !important;
  background-color: var(--bg1-light) !important;
}

.ge-editor-bodycont .se-char-counter::after {
  content: ' bytes';
}

/* FULL SCREEN EDITOR */
.ge-editor-bodycont .sun-editor[style*="position: fixed; top: 0px;"] {
  background-color: var(--bg1) !important;
}
@media (min-width:993px) { /* large */
  .ge-editor-bodycont .sun-editor[style*="position: fixed; top: 0px;"] .se-wrapper {
    width: 60% !important;
    margin: auto !important;
  }
}
@media (max-width:992px) and (min-width:601px) { /* medium */
  .ge-editor-bodycont .sun-editor[style*="position: fixed; top: 0px;"] .se-wrapper {
    width: 70% !important;
    margin: auto !important;
  }
}
@media (max-width:600px) { /* small */
  .ge-editor-bodycont .sun-editor[style*="position: fixed; top: 0px;"] .se-wrapper {
    width: 90% !important;
    margin: auto !important;
  }
}

/* HACKY LINES */
body {
  counter-reset: line;
}
.ge-editor-bodycont .sun-editor .se-wrapper .se-wrapper-wysiwyg > *:hover {
  background-color: var(--bg0-dark) !important;
}

.ge-editor-bodycont .sun-editor .se-wrapper .se-wrapper-wysiwyg > *::before {
  counter-increment: line;
}

.ge-editor-lines { /* given n; */
  --ln-amt: 14px; /* 8n + 6 */
  --ln-amt-mar: 26px; /* ln-amt + 12 */
  --ln-amt-inv: -26px; /* -ln-amt */
}
.ge-editor-lines .sun-editor .se-wrapper .se-wrapper-wysiwyg {
  padding-left: 0px !important;
}
.ge-editor-lines .sun-editor .se-wrapper .se-wrapper-wysiwyg > * {
  margin-left: var(--ln-amt-mar);
  position: relative;
}
.ge-editor-lines .sun-editor .se-wrapper .se-wrapper-wysiwyg > *::before {
  content: counter(line);

  display: inline-block;
  position: absolute;
  left: var(--ln-amt-inv);
  width: var(--ln-amt);

  font-size: 12px;
  text-align: right;
  color: var(--pg4-light) !important;
  padding-top: 3px;
}

/* PG FORMATS */
.ge-editor-bodycont .pg-var-input {
  display: inline-block;
  background-color: var(--bg1) !important;
  padding: 0px 4px;
  border-radius: 8px;
}
.ge-editor-bodycont .pg-var-input .icon,
.ge-p-char i, .ge-p-char em, .pg-var-input i, .pg-var-input em {
  font-family: 'Font Awesome 5 Free'; /* little fix */
  display: inline-block;
}
.ge-editor-bodycont .pg-var-input .input-cont {
  display: inline-block;
}
.ge-editor-bodycont .pg-var-input .input {
  color: var(--txt) !important;
  background-color: var(--bg1-light) !important;
  width: 120px;
  max-height: 480px;
  overflow-y: auto;
  border: none;
  margin: 2px 4px;
}
.ge-editor-bodycont .tooltip {
  font-size: 14px;
  padding: 4px;
  user-select: none;
  padding: 4px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.pg-editing .ge-editor-bodycont .pg-var-input .display {
  display: none;
}

.ge-qchar-list {
  position: absolute;
  z-index: 2147483648;
  max-width: 256px;
  padding: 8px;
  border: 2px solid var(--bg3-light);
  border-radius: 4px;
}
.ge-qchar-list button {
  border: 2px solid var(--txt);
  border-radius: 8px;
  margin-bottom: 16px;
  width: 100%;
  text-align: left;
}
.ge-p-char {
  padding: 2px 4px !important;
  background-color: var(--bg1);
  border-radius: 8px;
}
.pg-cha-span {
  padding: 0 8px !important;
  margin-left: 8px !important;
}
.ge-remove {
  margin-left: 8px !important;
}

.ge-summary-large,
.ge-summary-small {
  background-color: var(--bg1-light);
  margin: 16px;
  padding: 8px;
  padding-bottom: 16px;
  border-radius: 8px;
}

.ge-upload-bottom {
  padding: 8px;
  margin-top: 32px;
  text-align: right;
}
.ge-upload-top {
  margin: 32px auto;
  display: block;
}

.ge-importer-dragndrop {
  width: 100%;
  padding-top: 45px;
  min-height: 120px;
  background-color: #086;
  border: 3px dotted #fff;
  border-radius: 15px;
  text-align: center;
  transition: background-color 0.6s;
}
.ge-importer-dragndrop::after {
  content: "Drag & drop here!";
}
.ge-importer-dragndrop.active {
  border: 3px solid #fff;
  background-color: #33A;
  transition: all 0.6s;
}
.ge-importer-dragndrop.active::after {
  content: "Drop it like it's hot!";
}

.ge-link-cont {
  /*user-select: all;*/
  padding: 16px 16px;
  background-color: var(--bg0-dark);
}
.ge-link-left {
  text-align: left;
}
.ge-select-all {
  user-select: all;
}

.icon i, .icon em {
  font-family: 'Font Awesome 5 Free' !important;
}