#detailable-content {

  figure.highlight {
    font-size: .9rem;
    position: relative !important;
    margin: 1em 0 !important;
    border-radius: 2px !important;
    line-height: 1.1em !important;
    background-color: #f8f8f8 !important;
    overflow-x: scroll !important;
    font-variant-ligatures: common-ligatures historical-ligatures !important;
  }

  figure.highlight table, figure.highlight tr, figure.highlight td {
    text-align: left !important;
    width: 100% !important;
    border-collapse: collapse !important;
    padding: 0 !important;
    margin: 0 !important
  }

  figure.highlight .gutter {
    display: none !important
  }

  figure.highlight .code pre {
    padding: 1.2em 1.4em !important;
    line-height: 1.5em !important;
    margin: 0 !important
  }

  figure.highlight.html .code:after, figure.highlight.js .code:after, figure.highlight.bash .code:after, figure.highlight.css .code:after, figure.highlight.scss .code:after, figure.highlight.diff .code:after, figure.highlight.java .code:after, figure.highlight.xml .code:after, figure.highlight.python .code:after, figure.highlight.json .code:after, figure.highlight.swift .code:after, figure.highlight.ruby .code:after, figure.highlight.perl .code:after, figure.highlight.php .code:after, figure.highlight.c .code:after, figure.highlight.cpp .code:after {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    color: #ccc !important;
    text-align: right !important;
    font-size: 0.75em !important;
    padding: 5px 10px 0 !important;
    line-height: 15px !important;
    height: 15px !important;
    font-weight: 600 !important
  }

  figure.highlight.html .code:after {
    content: "HTML"
  }

  figure.highlight.js .code:after {
    content: "JS"
  }

  figure.highlight.bash .code:after {
    content: "BASH"
  }

  figure.highlight.css .code:after {
    content: "CSS"
  }

  figure.highlight.scss .code:after {
    content: "SCSS"
  }

  figure.highlight.diff .code:after {
    content: "DIFF"
  }

  figure.highlight.java .code:after {
    content: "JAVA"
  }

  figure.highlight.xml .code:after {
    content: "XML"
  }

  figure.highlight.python .code:after {
    content: "PYTHON"
  }

  figure.highlight.json .code:after {
    content: "JSON"
  }

  figure.highlight.swift .code:after {
    content: "SWIFT"
  }

  figure.highlight.ruby .code:after {
    content: "RUBY"
  }

  figure.highlight.perl .code:after {
    content: "PERL"
  }

  figure.highlight.php .code:after {
    content: "PHP"
  }

  figure.highlight.c .code:after {
    content: "C"
  }

  figure.highlight.java .code:after {
    content: "JAVA"
  }

  figure.highlight.cpp .code:after {
    content: "CPP"
  }

  figure.highlight.cpp .code:after {
    content: 'C++'
  }

  figure.highlight figcaption {
    color: gray;
    font-style: italic;
    padding: .4em 1.4em;
    border-bottom: 1px solid #eeeeee;
  }

  figure.highlight figcaption > * {
    margin-right: 5px;
  }

  pre {
    color: #525252 !important
  }

  pre .function .keyword, pre .constant {
    color: #0092db !important
  }

  pre .keyword, pre .attribute {
    color: #e96900 !important
  }

  pre .number, pre .literal {
    color: #ae81ff !important
  }

  pre .tag, pre .tag .title, pre .change, pre .winutils, pre .flow, pre .lisp .title, pre .clojure .built_in, pre .nginx .title, pre .tex .special {
    color: #2973b7 !important
  }

  pre .symbol, pre .symbol .string, pre .value, pre .regexp {
    color: #42b983 !important
  }

  pre .title {
    color: #83B917 !important
  }

  pre .tag .value, pre .string, pre .subst, pre .haskell .type, pre .preprocessor, pre .ruby .class .parent, pre .built_in, pre .sql .aggregate, pre .django .template_tag, pre .django .variable, pre .smalltalk .class, pre .javadoc, pre .django .filter .argument, pre .smalltalk .localvars, pre .smalltalk .array, pre .attr_selector, pre .pseudo, pre .addition, pre .stream, pre .envvar, pre .apache .tag, pre .apache .cbracket, pre .tex .command, pre .prompt {
    color: #42b983 !important
  }

  pre .comment, pre .java .annotation, pre .python .decorator, pre .template_comment, pre .pi, pre .doctype, pre .shebang, pre .apache .sqbracket, pre .tex .formula {
    color: #b3b3b3 !important
  }

  pre .deletion {
    color: #BA4545 !important
  }

  pre .coffeescript .javascript, pre .javascript .xml, pre .tex .formula, pre .xml .javascript, pre .xml .vbscript, pre .xml .css, pre .xml .cdata {
    opacity: 0.5 !important
  }

}
