/**
 * Retrieves a color value from the $material-colors Sass map
 * Inspired by https://github.com/nilskaspersson/Google-Material-UI-Color-Palette/
 *
 * @function
 * @param {string} color-name             - quoted, lower-case, dasherized color
 *                                          name (e.g. 'pink', 'amber')
 * @param {string} [color-variant='500']  - quoted, lowercase color variant (e.g.
 *                                          '200', 'a100')
 */
code[class*="language-"], pre[class*="language-"] {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  white-space: pre;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  font-family: "Source Code Pro", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.5;
  color: #ed7375;
  text-shadow: none;
  background: none;
  text-align: left;
  word-spacing: normal;
  overflow: auto;
  background: #f5f2f0;
}

code[class*="language-"]::-moz-selection, pre[class*="language-"]::-moz-selection {
  text-shadow: none;
  text-shadow: none;
  background: #b3d4fc;
  background: #b3d4fc;
}

code[class*="language-"]::selection, pre[class*="language-"]::selection {
  text-shadow: none;
  text-shadow: none;
  background: #b3d4fc;
  background: #b3d4fc;
}

pre[class*="language-"] {
  padding: 6px;
  margin: .5em 0;
}

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

.token.comment {
  color: slategray;
}

.token.prolog {
  color: slategray;
}

.token.doctype {
  color: slategray;
}

.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #999999;
}

.namespace {
  opacity: .7;
}

.token.property {
  color: #990055;
}

.token.tag {
  color: slategray;
}

.token.boolean {
  color: #990055;
}

.token.number {
  color: #990055;
}

.token.constant {
  color: #990055;
}

.token.symbol {
  color: #990055;
}

.token.deleted {
  color: #990055;
}

.token.selector {
  color: #669900;
}

.token.attr-name {
  color: #669900;
}

.token.string {
  color: #669900;
}

.token.char {
  color: #669900;
}

.token.builtin {
  color: #669900;
}

.token.inserted {
  color: #669900;
}

.token.operator {
  color: #a67f59;
}

.token.entity {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
  cursor: help;
}

.token.url {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
}

.language-css .token.string {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
}

.style .token.string {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
}

.token.atrule {
  color: #0077aa;
}

.token.attr-value {
  color: #0077aa;
}

.token.keyword {
  color: #0077aa;
}

.token.function {
  color: #dd4a68;
}

.token.regex {
  color: #ee9900;
}

.token.important {
  color: #ee9900;
  font-weight: bold;
}

.token.variable {
  color: #ee9900;
}

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

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

@media print {
  code[class*="language-"] {
    text-shadow: none;
  }
  pre[class*="language-"] {
    text-shadow: none;
  }
}

#app div.prism-show-language {
  background-color: transparent;
  position: relative;
  text-align: right;
  width: 20%;
  left: 80%;
}

#app div.prism-show-language div.prism-show-language-label {
  color: #b0bec5;
  font-size: 12px;
  padding: 6px 10px 0 0;
  background-color: transparent;
}

#app .prism-show-language + pre[class*="language-"] {
  margin-top: 0;
}

#app .line-numbers .line-numbers-rows {
  top: -2px;
  font-size: 100%;
  left: -3.8em;
  width: 3em;
  /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#app .line-numbers .line-numbers-rows > span:before {
  color: rgba(0, 0, 0, 0.2);
}

#app pre.code-toolbar > .toolbar {
  opacity: 1;
}

#app pre.code-toolbar > .toolbar > .toolbar-item:first-child {
  border-left: none;
}

#app pre.code-toolbar > .toolbar a, #app pre.code-toolbar > .toolbar button, #app pre.code-toolbar > .toolbar span {
  color: #bbbbbb;
  font-size: .8rem;
  padding: 0.2rem .7rem;
  background: white;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
  border-radius: 0;
}

#app pre.code-toolbar > .toolbar a, #app pre.code-toolbar > .toolbar button {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

#app pre.code-toolbar > .toolbar span {
  box-shadow: none;
}

#app pre.code-toolbar:hover > .toolbar {
  opacity: 1;
}

#app pre.code-toolbar:hover > .toolbar a, #app pre.code-toolbar:hover > .toolbar button {
  opacity: 1;
}