/**
 * Dracula Theme originally by Zeno Rocha [@zenorocha]
 * https://draculatheme.com/
 *
 * Ported for PrismJS by Albert Vallverdu [@byverdu]
 */
.markdown-section pre, .markdown-section pre>code {
  color: #F8FAFC;
  padding: 0.25rem 0;
  font-size:  14px !important;
}

.markdown-section code,
.markdown-section pre {
  color: #F8FAFC;
  background: none;
  font-family: 'Fira Code',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.6;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

.markdown-section pre[data-lang="twig"], .markdown-section pre[data-lang="html"] {
  line-height: 2;
}

/* Code blocks */
.markdown-section pre {
  padding: 1em ;
  margin: .5em 0;
  overflow: auto;
  border: 0;
  border-radius: 0.5rem;
}

.markdown-section *::-webkit-scrollbar {
    appearance: none;
    width: 7px;
    height: 7px;
}
.markdown-section *::-webkit-scrollbar-thumb {
    height: 50px;
    border-radius: 4px;
    background-color: #64748B;
}
.markdown-section output:after, .markdown-section pre:after {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.6;
  bottom: 0.5rem;
  top: auto;
}
.codecopy .codecopy-btn {
  opacity: 0.2;
  background-color:  transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg  fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z'%3E%3C/path%3E%3Cpath d='M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z'%3E%3C/path%3E%3C/svg%3E") !important;
  background-size:  20px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: 0.2s;
}

.codecopy:hover .codecopy-btn {
  background-color: transparent;
  opacity:  0.6;
}
.codecopy .codecopy-btn:hover {
  opacity: 0.9;
}
.codecopy-btn-icon {
  opacity: 0;
}
.markdown-section pre {
  background: #1E293B;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  white-space: normal;
}

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

.token.punctuation {
  color: #94A3B8;
}


.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #F472B6;
}

.token.boolean,
.token.number {
  color: #C084FC;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #94A3B8;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: #5fcaec;
}

.token.keyword {
  color: #8be9fd;
  font-weight: normal;
}

.token.regex,
.token.important {
  color: #ffb86c;
}

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

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}