@import url("fonts/FiraCode-Retina.ttf");
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

/* --- Copy button --- */

/* --- Generic Code button --- */
/* --- Generic Code button --- */

.code-button {
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 8px;
    border-color: #4895ab;
    border: 0px;
    border-radius: 3px 3px 3px 3px;
    background-color: #4895ab;
    opacity: 0.35;
    padding-top:6px;
    position: fixed;
    bottom: 65px;
    right: 15px;
    z-index: 100;
    height: 40px;
    width: 52.25px;
    transition-property: all;
    transition-duration: 0s ease;
    transition-timing-function: ease;
    transition-delay: 0s;
    content:'Hide';
}

.cite-close-button {
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 8px;
    border-color: #4895ab;
    border: 0px;
    border-radius: 3px 3px 3px 3px;
    background-color: #4895ab;
    opacity: 0.35;
    padding-top:6px;
    position: top-right;

    float: right;
    font-weight: 700;
    line-height: 1;
    color: #000000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.75;
    z-index: 100;
    height: 40px;
    width: 52.25px;
    transition-property: all;
    transition-duration: 0s ease;
    transition-timing-function: ease;
    transition-delay: 0s;
    content:'Hide';
}


.code-button:focus {
    /* Avoid an ugly focus outline on click in Chrome,
       but darken the button for accessibility.
       See https://stackoverflow.com/a/25298082/1481479 */
    background-color:  #d46c5b;
    outline: 0;
    transition-property: all;
    transition-duration: 0s ease;
    transition-timing-function: ease;
    transition-delay: 0s;
    opacity: .5;
     color: #fff;
    transition: opacity 0s ease;
}


.cite-close-button:focus {
    /* Avoid an ugly focus outline on click in Chrome,
       but darken the button for accessibility.
       See https://stackoverflow.com/a/25298082/1481479 */
    background-color:  #d46c5b;
    outline: 0;
    transition-property: all;
    transition-duration: 0s ease;
    transition-timing-function: ease;
    transition-delay: 0s;
    opacity: .5;
     color: #fff;
    transition: opacity 0s ease;
}

.code-button:active {
   color: #fff;
    background-color: #d46c5b;
    transition-property: all;
    transition-duration: 0s ease;
    transition-timing-function: ease;
    transition-delay: 0s;
    opacity: 0.5;
    transition: opacity 0s ease;
    content:'Show';

}

.cite-close-button:active {
   color: #fff;
    background-color: #d46c5b;
    transition-property: all;
    transition-duration: 0s ease;
    transition-timing-function: ease;
    transition-delay: 0s;
    opacity: 0.5;
    transition: opacity 0s ease;
    content:'Show';

}
/* --- Generic Code button --- */


.code-folding-button {
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    border-color: #4895ab;
    border: 0px;
    border-radius: 3px 3px 3px 3px;
    background-color: #4895ab;
    opacity: 0.5;
    position: static;
    display: block;
    margin-top: 1px;
    margin-bottom: -31px;
    bottom: -32px;
    left: 100%;
    margin-left: 83.75%;
    z-index: 999;
    height: 30px;
    width: 52.25px;
    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    transition-delay: 0s;
    content:'Hide';
}


.code-folding-button:hover {
    background-color: #d46c5b;
    cursor: pointer;
    transition-property: all;
    transition-duration: 0.95s;
    transition-timing-function: ease;
    transition-delay: 0.9s ease;
    opacity: .7;
    transition: opacity .95s ease;
    overflow-wrap: normal;
    word-break: break-all;
    transform: translateX(0);
    transition-property: all;
    transition-duration: 0.95s;
    transition-timing-function: ease;
    transition-delay: 2s;
    transition: opacity .95s ease;
    cursor: pointer;
    border: 0;
    padding: 0;
    -webkit-tap-highlight-color: #4895ab;
    animation-name: bounce;
    -webkit-animation: 4s linear 0s infinite alternate move_eye;
    animation: 4s linear 0s infinite alternate move_eye;
    -webkit-appearance: button;
    overflow: visible;
    transition-animation: bounce 1s;
}

.code-folding-button:focus {
    /* Avoid an ugly focus outline on click in Chrome,
       but darken the button for accessibility.
       See https://stackoverflow.com/a/25298082/1481479 */
    background-color:  #d46c5b;
    outline: 0;
    transition-property: all;
    transition-duration: 0.95s;
    transition-timing-function: ease;
    transition-delay: 0s;
    opacity: .5;
    transition: opacity 0.95s ease;
}

.code-folding-button:active {
    background-color: #d46c5b;
    transition-property: all;
    transition-duration: 0.95s;
    transition-timing-function: ease;
    transition-delay: 0s;
    opacity: 0.5;
    transition: opacity 0.95s ease;
    content:'Show';
}

.copy-code-button {
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    border-color: #d46c5b;
    border: 0px solid;
    border-radius: 3px 3px 3px 3px;
    background-color: #d46c5b;
    opacity: 0.5;
    position: static;
    display: block;
    margin-top: 1px;
    margin-bottom: -31px;
    bottom: -32px;
    left: -60px;
    margin-left: 91.5%;
    height: 30px;
    width: 52.25px;
    z-index: 999;
    transition-property: all;
    transition-duration: 2.95s;
    transition-timing-function: ease;
    transition-delay: 2.7s ease;
    transition: opacity 2.95s ease;
    overflow-wrap: normal;
    word-break: break-all;
    transform: translateX(0);
    transition-property: all;
    transition-duration: 2.95s;
    transition-timing-function: ease;
    transition-delay: 2.9s;
    transition: opacity 2.95s ease;
    cursor: pointer;
    border: 0;
    padding: 0;
    -webkit-tap-highlight-color: #4895ab;
    animation-name: bounce;
    -webkit-animation: 4s linear 0s infinite alternate move_eye;
    animation: 4s linear 0s infinite alternate move_eye;
    -webkit-appearance: button;
    overflow: visible;
    transition-animation: bounce 1s;

}

.copy-code-button:hover {
    cursor: pointer;
    background-color: #4895ab;
    border-color: #d46c5b;
    overflow-wrap: normal;
    word-break: break-all;
    transform: translateX(0);
    transition-property: all;
    transition-duration: 0.95s;
    transition-timing-function: ease;
    transition-delay: 2s;
    opacity: .7;
    transition: opacity .95s ease;
    cursor: pointer;
    border: 0;
    padding: 0;
    -webkit-tap-highlight-color: #d46c5b;
    animation-name: bounce;
    -webkit-animation: 4s linear 0s infinite alternate move_eye;
    animation: 4s linear 0s infinite alternate move_eye;
    -webkit-appearance: button;
    overflow: visible;
    transition-animation: bounce 1s;
}

.copy-code-button:focus {
    /* Avoid an ugly focus outline on click in Chrome,
       but darken the button for accessibility.
       See https://stackoverflow.com/a/25298082/1481479 */
    background-color: #E6E6E6;
    outline: 0;
    border-color: #8c8c8c;
    transition-property: all;
    transition-duration: 2.95s;
    transition-timing-function: ease;
    transition-delay: 3s;
    transition: opacity 2.95s ease;
}

.copy-code-button:active {
    background-color: #D9D9D9;
    background-color: #D9D9D9;
    transition-property: all;
    transition-duration: 2.95s;
    transition-timing-function: ease;
    transition-delay: 3s;
    transition: opacity 2.95s ease
}

.codelabel {
    content: "Show";
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    border-color: #d46c5b;
    border: 0px solid;
    border-radius: 3px 3px 3px 3px;
    background-color: #4895ab;
    color: #FFFFFF;
    opacity: 0.5;
    position: static;
    display: block;
    margin-top: 1px;
    margin-bottom: -31px;
    bottom: -32px;
    right: -7px;
    left: 4px;
    margin-left:5px;
    margin-right: 88.5%;
    height: 30px;
    width: 40px;
    z-index: 999;

    -webkit-appearance: button;
    overflow: visible;
    transition-animation: bounce 1s;
}

.codeblocklabel{
  color: #444;
    opacity: 0.5;
}



@media only screen and (max-width: 1261px) {
@media only screen and (min-width: 761px) {


.code-folding-button {
  display:none;
}

.codelabel {
top: -5px;
bottom: 3px;
font-size: 9px;
   height: 28px;
   width: 40px;
left: -1px;
margin-right: 100%;
  position: relative;
}


.copy-code-button {
  position: relative;
  margin-left: 101%;
  top: -3px;
  right: -5px;
  font-size: 10px;
   height: 28px;
   width: 50px;
}


}
}

@media only screen and (max-width: 768px) {
.code-folding-button {
  display:none;
}

.code-button {
   height: 36px;
   font-size: 7px;
   width: 45px;
}

.codelabel {
top: -5px;
bottom: 3px;
font-size: 9px;
   height: 28px;
   width: 40px;
left: -1px;
margin-right: 100%;
  position: relative;
}

.copy-code-button {
  position: relative;
  margin-left: 101%;
  top: -3px;
  right: -5px;
  font-size: 9px;
   height: 28px;
   width: 50px;
}



}
.highlight pre {
    /* Avoid pushing up the copy buttons. */
  font-family: 'Fira Code', 'Inconsolata', monospace;
    margin: 0;
     background-color: transparent;
}

 pre {
  font-family: 'Fira Code', 'Inconsolata', monospace;
  font-style: "Retina";
  overflow-x: auto;

overflow-y:auto;
  border-width: 1px;
  border-color: #999999;
opacity:100%;
  padding-bottom: 50px;

}

code {
  font-family: 'Fira Code', 'Inconsolata', monospace;
    font-style: "Retina";
opacity:90%;
font-size: 14.5px;
  line-height: 2em;
color: #d46c5b;
background-color:  #d46c5b21;
padding:3px;
 border-width: 20px;
  border-radius: 5px;
  overflow-x: auto;
overflow-y:auto;
}

pre code {
  font-family: 'Fira Code', 'Inconsolata', monospace;
  overflow-x: auto;
opacity:100%;
  font-style: "Retina";
overflow-y:auto;

  font-size: 14.2px;
  line-height: 2.3em;
  background-color: transparent;

 margin-top: 30px;
  margin-left:-5px;
  margin-bottom:-30px;
  padding-bottom: 50px;
}

@media only screen and (max-width: 768px) {

pre {
      font-family: 'Fira Code', 'Inconsolata', monospace;

  font-size: 10px;
  line-height: 2em;
}

code {
      font-family: 'Fira Code', 'Inconsolata', monospace;
  font-size: 10px;
  line-height: 2em;
}

pre code {
      font-family: 'Fira Code', 'Inconsolata', monospace;

  font-size: 10px;
  line-height: 2em;
}

}

pre.highlight, .highlight > pre, td.code pre {
  background-color: transparent;
  border-width: 1px;
  border-color: #999999;
  border-radius: 0;
   font-family: 'Fira Code', 'Inconsolata', monospace;

}
code table, code table td, code table th, code table tbody, code table tr,
td.gutter pre {
  padding: 0;
  border: none;
  background-color: transparent;
  border-width: 1px;
  border-color: #999999;
  border-radius: 0;
}
.highlight > pre {
  padding: 0;
   background-color: transparent;
}
.highlight > pre.highlight {
  padding: 9.5px;
   background-color: transparent;
}
td.code pre {
  border-width: 1px;
   font-family: 'Fira Code', 'Inconsolata', monospace;
  border-color: #999999;
  border-radius: 0;
   background-color: transparent;
}
td.gutter {
  padding-top: 3px;
   background-color: transparent;
}


.chroma .ln {
  margin-right: 0.8em;
  padding: 0 0.4em 0 0.4em;
}
pre code.hljs {
  padding: 9.5px;
   font-family: 'Fira Code', 'Inconsolata', monospace;
   background-color: transparent;
     font-style: "Retina";
}

.highlight tr, .highlight pre {
  border: none;
   background-color: transparent;
}

.highlight div:first-child {
  border-radius: 4px;
}

.highlight td:first-child pre, .highlight pre {
   background-color: transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: unset;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: unset;
  overflow: hidden;
}

.highlight td:last-child pre, .highlight pre {
  border-radius: unset;
}

.highlight td:last-child pre code, .highlight pre code {
  white-space: pre;
   background-color: transparent;
}

@media only screen and (min-width: 1460px) {


.code-folding-button  .dropdown-menu {
   border-radius: 3px 3px 3px 3px;

}
.code-folding-button .btn.btn-default.btn-xs.dropdown-toggle {
    border-radius: 3px 3px 3px 3px;

}
.code-folding-button.open > .dropdown-menu {


}
.code-folding-button .dropdown-menu {


}
.code-folding-button .dropdown-menu li {

}

.code-folding-button {

}
.row {

}
.collapse {

}
.in {

}
.col-md-12 {

}
}
@media only screen and (max-width: 1460px) {
.code-folding-button .dropdown-menu {
  border-radius: 3px 3px 3px 3px;
}
.code-folding-button .btn.btn-default.btn-xs.dropdown-toggle {
   border-radius: 3px 3px 3px 3px;
}
.code-folding-button.open > .dropdown-menu {
   border-radius: 3px 3px 3px 3px;
}
.code-folding-button .dropdown-menu {

}
.code-folding-button .dropdown-menu li {

}

.row {

}
.collapse {

}
.in {

}
.col-md-12 {

}
}

.hasCopyButton {
  position: relative;
}

.btn-copy-ex {
  position: absolute;
  right: 0;
  top: 0;
  visibility: hidden;
}

.hasCopyButton:hover button.btn-copy-ex {
  visibility: visible;
}

/* headroom.js ------------------------ */

.headroom {
  will-change: transform;
  transition: transform 200ms linear;
}
.headroom--pinned {
  transform: translateY(0%);
}
.headroom--unpinned {
  transform: translateY(-100%);
}


.highlight-wrapper {
    position: relative;
}

.highlight-link {
    position: absolute;
    bottom: 0;
    right: 0;
}