.container {
    margin-top: 2%;
}

.container h1 {
    text-align: center;
}

.container .row {
    margin-top: 2%;
}


.active .nav-link {
    font-weight: bold;
}

.api-maker-div {
  padding-top: 2%;
  align-content: center;
}

.api-maker-div-bottom {
  padding-top: 2%;
  padding-bottom: 2%;
  align-content: center;
}
  
/* Style the tab */
.tab {
    overflow: hidden;
    background-color: #f1f1f1;
  }
  
  /* Style the buttons inside the tab */
  .tab button {
    background-color: inherit;
    float: left;
    border: 1px solid #ccc;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
  }


  /* Please see the article */

#insertJsonArea, #highlighting-json {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 10px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: 150px;
}
#insertJsonArea, #highlighting-json, #highlighting-json * {
  /* Also add text styles to highlighing tokens */
  font-size: 11pt;
  font-family: arial;
  line-height: 20pt;
  tab-size: 2;
}

  
#insertJsonArea, #highlighting-json {
  /* In the same place */
  position: absolute; 
  left: 0; 
  width: 30%;
  height: 80%;
  border: 1px solid #ccc;
}


/* Move the textarea in front of the result */

#insertJsonArea {
  z-index: 1;
}
#highlighting-json {
  z-index: 0;
}


/* Make textarea almost completely transparent */

#insertJsonArea {
  color: transparent;
  background: transparent;
  caret-color: black; /* Or choose your favourite color */
}

/* Can be scrolled */
#insertJsonArea, #highlighting-json {
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}

/* No resize on textarea */
#insertJsonArea {
  resize: none;
}


  /* Please see the article */

  #textAreaResult, #highlighting-dart {
    /* Both elements need the same text and space styling so they are directly on top of each other */
    margin: 10px;
    padding: 10px;
    border: 0;
    width: calc(100% - 32px);
    height: 300px;
  }
  #textAreaResult, #highlighting-dart, #highlighting-dart * {
    /* Also add text styles to highlighing tokens */
    font-size: 11pt;
    font-family: arial;
    line-height: 20pt;
    tab-size: 2;
  }
  
    
  #textAreaResult, #highlighting-dart {
    /* In the same place */
    position: absolute;
    left: 0; 

    margin-left: 35%;
    margin-right: auto; 
    width: 60%;
    height: 80%;
    border: 1px solid #ccc;
  }
  
  #tabMenu {
    text-align: center;
    margin-top: 2%;
    width: 100%;
  }
  
  /* Move the textarea in front of the result */
  
  #textAreaResult {
    z-index: 1;
  }
  #highlighting-dart {
    z-index: 0;
  }
  
  
  /* Make textarea almost completely transparent */
  
  #textAreaResult {
    color: transparent;
    background: transparent;
    caret-color: black; /* Or choose your favourite color */
  }
  
  /* Can be scrolled */
  #textAreaResult, #highlighting-dart {
    overflow: auto;
    white-space: nowrap; /* Allows textarea to scroll horizontally */
  }
  
  /* No resize on textarea */
  #textAreaResult {
    resize: none;
  }
  

/* Paragraphs; First Image */

p code {
  border-radius: 2px;
  background-color: #eee;
  color: #111;
}


/* Syntax Highlighting from prism.js starts below, partly modified: */

/* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism-funky&languages=markup */
/**
 * prism.js Funky theme
 * Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .4em .8em;
  margin: .5em 0;
  overflow: auto;
  /* background: url('data:image/svg+xml;charset=utf-8,<svg%20version%3D"1.1"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"100"%20height%3D"100"%20fill%3D"rgba(0%2C0%2C0%2C.2)">%0D%0A<polygon%20points%3D"0%2C50%2050%2C0%200%2C0"%20%2F>%0D%0A<polygon%20points%3D"0%2C100%2050%2C100%20100%2C50%20100%2C0"%20%2F>%0D%0A<%2Fsvg>');
  background-size: 1em 1em; - WebCoder49*/
  background: #eee; /* - WebCoder49 */
}

code[class*="language-"] {
  background: #eee;
  color: black;
  box-shadow: -.3em 0 0 .3em #eee, .3em 0 0 .3em #eee;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .2em;
  border-radius: .3em;
  box-shadow: none;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #aaa;
}

.token.punctuation {
  color: #999;
}

.token.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: #0cf;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: #0490fc;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.token.variable,
.token.inserted {
  color: yellowgreen;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: deeppink;
}

.token.regex,
.token.important {
  color: orange;
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.token.deleted {
  color: red;
}

/* Plugin styles: Diff Highlight */
pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix),
pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix) {
  background-color: rgba(255, 0, 0, .3);
  display: inline;
}

pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix),
pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix) {
  background-color: rgba(0, 255, 128, .3);
  display: inline;
}

/* End of prism.js syntax highlighting*/