code {
  color: $color_purple;
  font-size: 1em;
  font-weight: bold;
  border: initial;
  background-color: rgba(255, 255, 255, 0);
  padding: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.box-dark pre {
  padding: 0;
  margin: 0;
}

.box-code, pre  { // White Box
	width: 100%;
	padding: $percent_xs;
	border-radius: 4px;
	background-color: $color-dark;
  margin: 0 0 1rem;
}

.custom-box-margin {
  padding: 16px 0px;
}

.box-code-overwrite {
  height: $percent_sm;
  line-height: $percent_sm;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

.box-code code, pre code, .box-dark code {
  color: white;
  font-weight: normal;
}

//highlighter

.hljs{
   display: block;
   overflow-x: auto;
   background-color: $color-dark;
}

.hljs,.hljs-subst,.hljs-section {
   color: white;
}

.hljs-comment{
   color: #b6b6b3
}

.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{
   color: #2ae5ff;
}

.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{
   color: #ffa1fe;
}
.hljs-title {
  color: #2ae5ff;
}
.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{
   color: #9b78ff;
}
.hljs-literal{
   color: #65f0b1;
}
.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{
   color: #2ae5ff;
}
.hljs-meta{
   color: #fc81ad;
}
.hljs-meta-string{
   color:#ff3e85;
}
.hljs-emphasis{
   font-style:italic
}
.hljs-strong{
   font-weight:bold
}