* { box-sizing: border-box; }
body {
  margin: 0;
  overscroll-behavior-x: none;
}
.rules-grid {
  height: 100%;
  display: grid;
}
.rules-overlay {
  position: fixed;
  width: 100vw;
  height: 100svh;
  z-index: 999999;
}
.rules-grid-item {
  border: 2px solid gray;
  cursor: row-resize;
  position: relative;
  z-index: 1;
  top: 0 !important;
  left: 0 !important;
}
.rules-grid-item:hover {
  border: 6px solid gray;
}
.elements-tab {
  font-family: monospace;
  font-size: 14px;
  white-space: pre;
  line-height: 1.6;
  padding: 10px;
  background: #111;
  color: #eee;
  overflow: auto;
  height: 100%;
}
.node {
  cursor: pointer;
  padding-left: 16px;
}
.collapsed > .el-children {
  display: none;
}
.highlight-locked {
  background: blue;
}
.iframeConsole {
  font-family: monospace;
  font-size: 13px;
  background: #1e1e1e;
  color: #ddd;
  padding: 8px;
  overflow-y: auto;
}
.entry { margin-bottom: 6px; }
.time { color: #777; }
.level-log { color: #ccc; }
.level-warn { color: #e5c07b; }
.string { color: #98c379; }
.number { color: #d19a66; }
.boolean { color: #56b6c2; }
.null, .undefined { color: #c678dd; }
.function {
  color: #61afef;
  cursor: pointer;
}
.dom-node { color: #e5c07b; }
.object-key { color: #abb2bf; }
.level-error, .level-error .object-key { color: #e06c75; }
.collapsible { cursor: pointer; }
.children { margin-left: 15px; }
.stack-line {
  font-family: monospace;
  padding-left: 1em;
  white-space: pre;
}
.stack-line.clickable {
  cursor: pointer;
  color: #4ea1ff;
  text-decoration: underline;
}
.stack-line.clickable:hover {
  color: #1e90ff;
}
.entry > span { margin-left: 7px; }
.entry > span:first-child { margin-left: 0; }
.code-snippet {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 0.5em;
  margin: 0.25em 0;
  border-radius: 4px;
  overflow-x: auto;
  text-decoration: none !important;
}
.words-code {
  display: grid;
  grid-template-columns: min-content auto;
  background-color: #1f1f1f;
  height: 100%;
}
.line-numbers {
  text-align: end;
  overflow: hidden;
  font-family: monospace;
  font-size: 12px;
  padding: 10px;
  color: #617668;
}
.words-code-insert {
  white-space: nowrap;
  resize: none;
  height: 100%;
  margin: 0;
  outline: 0;
  border: 0;
  width: 100%;
  background-color: inherit;
  color: transparent;
  caret-color: gray;
  font-family: monospace;
  font-size: 12px;
  padding: 10px 0 10px 2px;
  border-left: 1px solid #3e3e3e;
}
.highlight-container {
  position: relative;
}
.highlight {
  white-space: pre;
  background-color: inherit;
  color: #9CDCFE;
  width: 100%;
  font-size: 12px;
  font-family: monospace;
  padding: 10px 0 10px 2px;
  border-left: 1px solid #3e3e3e;
  pointer-events: none;
  position: absolute;
  top: 0;
  height: 100%;
  overflow: auto;
}
.highlight-rule {
  margin-left: 3px;
  width: calc(1ch + 1px);
  position: absolute;
  font-family: monospace;
  left: 79ch;
  background: #ffb10038;
  height: 100%;
  top: 0;
  font-size: 12px;
}
@container (max-width: 79ch) {
  .highlight-rule { display: none; }
}
.wc-white-line {
  background: red;
  color: white;
}
.token.operator, .token.entity, .token.url, .language-css .token.string,
.style .token.string { background: transparent !important; }
.yr-comment { color: gray !important; }
.yr-trigger, .yr-section, .yr-macro { color: #e90; }
.yr-html-selector { color: #569CD6; }
.fit { display: inline-block; }
.grid { display: grid; }
.flex { display: flex; }
.pool { display: grid; }
.insert { outline: 0; }
.dropdown {
  cursor: pointer;
  outline: 0;
}
.handle {
  cursor: pointer;
  outline: 0;
}
.full-height { height: 100%; }
.togglerarrow-icons { padding-right: 5px; }
.full-width { width: 100% !important; }
.dashboard-wrappers {
  height: 100%;
  display: grid;
  grid-template-rows: auto min-content min-content;
}
.dashboard-wrappers .dashboard-handle {
  background: transparent;
  color: white;
  border: 1px solid gray;
  margin: 0;
}
.dashboard-wrappers .dashboard-handle:hover,
.dashboard-wrappers .active-dashboard-handle { background: #5d5d5d; }
.preview-frame {
  background: white;
  width: 100%;
  height: 100%;
}
.dashboard-wrapper {
  display: grid;
  height: 100%;
}
.dashboard-container {
  overflow: auto;
}
.preview-container {
  overflow: auto;
  max-width: 100vw;
}
.preview-wrapper {
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
  background: white;
  color: black;
}
.__NKwBbZqf {
  background-color: #000000 !important;
}
.__gXRCwuxF {
  background-color: #000000 !important;
  height: 450px !important;
  border: 5px solid lightgray !important;
  border-radius: 10px !important;
}
.hidden {
  display: none !important;
  /*position: absolute !important;
  z-index: -9999 !important;
  top: -20404px !important;
  opacity: 0 !important;*/
}