pre, .pre  {
  overflow-x: auto;
  overflow-y: hidden;
  overflow:   scroll;
}

code {
    padding: 0.2em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(27,31,35,0.05);
    border-radius: 3px;
}


pre  code {
  display: block;
  padding: 1.5em 1.5em;
  font-size: .875rem;
  line-height: 2;
  overflow-x: auto;
}


pre {
  background-color: #fff;
  color: #333;
  white-space: pre;
  hyphens: none;
  position: relative;
  border-width: 1px;
  border-color: #ccc;
  border-style: solid;
}

/* The Pygments highlighter comes with its own styles. */
.highlight pre {
  background-color: inherit;
  color: inherit;
  padding: 0.5em;
  font-size: .875rem;
}


/*We are adding the copy button content here so we can change it with javascript. See the "Clipboard scripts"*/
.copy:after {
  content: "Copy"
}
.copied:after {
  content: "Copied"
}

@media (--breakpoint-large) {
  .full-width, pre.expand:hover
  {
  /*width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;*/
  /*width: 60vw;*/
  /*position: relative;
  left: 50%;
  right: 50%;*/
  /*margin-left: -30vw;*/
  margin-right: -30vw;
  max-width: 100vw;
  }
}

.code-block .line-numbers-rows {
    background: #2f3a46;
    border: none;
    bottom: -50px;
    color: #98a4b3;
    left: -178px;
    padding: 50px 0;
    top: -50px;
    width: 138px
}

.code-block .line-numbers-rows>span:before {
    color: inherit;
    padding-right: 30px
}
