#doc-section {
  border-top: solid 10px hsl(200,30%,30%);
}

.doc-editor,#doc-editor {
  position: absolute ;
  top: 0px ;
  bottom: 0px ;
  left: 0 ;
  width: 50% ;
}
.doc-splitbar {
  background: hsl(200,7%,28%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
}

.doc-view {
  background: #222 ;
  position: absolute ;
  bottom: 0 ;
  top: 0 ;
  right: 0 ;
  width: 50% ;
  background: hsl(30,50%,80%);
  overflow: auto ;
}
.doc-view::-webkit-scrollbar-track {
  background: rgba(0,0,0,.15);
  border-radius: 5px;
  margin: 4px 2px;
}

.doc-view::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.25);
  border-radius: 5px;
  margin: 4px 1px;
}
.doc-render{
  padding: 40px ;
  color: rgba(0,0,0,.8);
  font-family: Helvetica,sans-serif;
  user-select: text ;
}
.doc-render h1,.doc-render h2,.doc-render h3,.doc-render h4,.doc-render h5,.doc-render h6 {
  color: rgba(0,0,0,.8);
  font-family: Helvetica,sans-serif;
}

.doc-render h1 {
  margin: 0 ;
  padding: 40px 0 10px 0 ;
}
.doc-render h2 {
  margin: 0 ;
  padding: 30px 0 10px 0 ;
}
.doc-render h3 {
  margin: 0 ;
  padding: 20px 0 10px 0 ;
}
.doc-render .doc-render h4,.doc-render h5,.doc-render h6 {
  margin: 0 ;
  padding: 10px 0 10px 0 ;
}
.doc-render hr {
  margin: 40px 0 ;
  border: solid 2px rgba(128,128,128,.5);
}
.doc-render p {
  margin: 0 0 10px 0 ;
}
.doc-render h5 {
  font-size: 15px ;
  background: rgba(0,0,0,.1);
  border-radius: 5px ;
  padding: 5px ;
  margin-top: 20px ;
  margin-bottom: 10px ;
}


.doc-render table {
  border-radius: 3px ;
  margin-bottom: 20px ;
}

.doc-render table,tr,td {
  border-collapse: collapse;
}

.doc-render tr,td,th {
  border: solid 1px rgba(0,0,0,.1);
  padding: 10px ;
}
.doc-render th {
  font-weight: bold ;
  background: rgba(0,0,0,.05);
}
.doc-render code {
  background: rgba(0,0,0,.1);
  padding: 2px 5px ;
  border-radius: 3px ;
  font-family: "Ubuntu Mono";
  line-height: 1.2em;
  font-size: 14px ;
}
.doc-render pre code {
  display: block ;
  background: rgba(0,0,0,.7);
  color: rgba(255,255,255,.9);
  padding: 10px ;
  border-radius: 3px ;
  color: rgba(255,255,255,.8);
  padding: 5px ;
  border-radius: 3px ;
  font-family: "Ubuntu Mono";
  line-height: 1.2em;
  white-space: pre-wrap ;
}
.doc-render a {
  text-decoration: none ;
  color: hsla(200,100%,30%,.8);
}

.doc-render img {
  max-width: 100% ;
}

#doceditor-start-tutorial {
  position: absolute ;
  right: 20px ;
  top: 20px ;
  padding: 10px 20px ;
  color: white ;
  background: hsl(200,50%,40%);
  border-radius: 5px ;
  cursor: pointer ;
}

#doceditor-start-tutorial i {
  margin-right: 10px ;
}