/* required */
.mergely-column textarea {
  width: 80px;
  height: 200px;
}
.mergely-column {
  float: left;
}
.mergely-margin {
  float: left;
}
.mergely-canvas {
  float: left;
  width: 28px;
}

/* resizeable */
.mergely-resizer {
  width: 100%;
  /* min-height: 700px; */
  height: calc(100svh - 48px - 26px - 68px - 50px);
}
.mergely-full-screen-0 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.mergely-full-screen-8 {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  right: 8px;
  overflow: hidden;
}

/* style configuration */
.mergely-column {
  border: 1px solid rgba(221, 221, 221, 0.1);
}
.mergely-active {
  border: 1px solid rgba(163, 209, 255, 0.3);
}

.mergely.a,
.mergely.d,
.mergely.c {
  color: #000;
}

.mergely.a.rhs.start {
  border-top: 1px solid rgba(163, 209, 255, 0.3);
}
.mergely.a.lhs.start.end,
.mergely.a.rhs.end {
  border-bottom: 1px solid rgba(163, 209, 255, 0.3);
}
.mergely.a.rhs {
  background-color: rgba(56, 156, 255, 0.3);
}
.mergely.a.lhs.start.end.first {
  border-bottom-width: 0;
  border-top: 1px solid rgba(163, 209, 255, 0.3);
}

.mergely.d.lhs {
  background-color: rgba(195, 54, 54, 0.45);
}
.mergely.d.lhs.end,
.mergely.d.rhs.start.end {
  border-bottom: 1px solid rgba(249, 232, 232, 0.3);
}
.mergely.d.rhs.start.end.first {
  border-bottom-width: 0;
  border-top: 1px solid rgba(249, 232, 232, 0.3);
}
.mergely.d.lhs.start {
  border-top: 1px solid rgba(249, 232, 232, 0.3);
}

.mergely.c.lhs,
.mergely.c.rhs {
  /* background-color: #fafafa; */
  background-color: rgba(250, 250, 250, 0.2);
}
.mergely.c.lhs.start,
.mergely.c.rhs.start {
  border-top: 1px solid #a3a3a3;
}
.mergely.c.lhs.end,
.mergely.c.rhs.end {
  border-bottom: 1px solid #a3a3a3;
}

.mergely.ch.a.rhs {
  background-color: rgba(0, 156, 255, 0.5);
  color: #9cdcfe;
}
.mergely.ch.d.lhs {
  background-color: rgba(252, 0, 47, 0.34);
  text-decoration: line-through;
  color: rgb(252, 112, 112) !important
}

.mergely.current.start {
  /* border-top: 1px solid #000 !important; */
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.mergely.current.end {
  /* border-bottom: 1px solid #000 !important; */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.mergely.current.lhs.a.start.end,
.mergely.current.rhs.d.start.end {
  border-top-width: 0 !important;
}

.mergely.current.lhs.a.start.end.empty,
.mergely.current.rhs.d.start.end.empty {
  border-top-width: 1px !important;
  border-bottom-width: 0px !important;
}

/* Line number on left */
.mergely.current.CodeMirror-linenumber {
  color: #ffd602;
  font-weight: bold;
  background-color: unset;
}
.CodeMirror-linenumber {
  cursor: pointer;
}
.CodeMirror-code {
  /* color: #717171; Orignal text */
  color: white; /*Orignal text */
}
span.CodeMirror-selectedtext {
  background: none !important;
}