dactyl.scss

// Bootstrap-derived SASS. Use a SASS compiler (such as sassc) to parse this
// and write the output to {repo_top}/assets/css/devportal.css
// Requires node_modules/bootstrap/scss/bootstrap to contain the Bootstrap
// source files. You can install these using yarn or npm and the included
// package.json file.

// Theme Colors ================================================================

$white:    #FFFFFF;
$gray-100: #E6E6E6;
$gray-200: #CCCCCC;
$gray-300: #B3B3B3;
$gray-400: #999999;
$gray-500: #808080;
$gray-600: #666666;
$gray-700: #4D4D4D;
$gray-800: #333333;
$gray-900: #1A1A1A;
$black:    #000000;

$code-color:    $gray-800;
$code-bg-color: $gray-100;
$body-color:    $black;
$navbar-light-color: $gray-600;
$breadcrumb-bg: $white;

$navbar-padding-y: 0;
$navbar-nav-link-padding-x: 1rem;

@import "_font.scss"; // webfont and font stack definitions
@import "_codehilite.scss"; // Styles for built-in code syntax highlighting

// Bootstrap v4 ================================================================
@import "node_modules/bootstrap/scss/bootstrap.scss";

@import "_left_nav.scss";

// Layout Styles ===============================================================
.navbar.fixed-top {
  border-bottom: 1px solid $gray-200;
}

.header-link:hover {
  color: $black;
}

// Dactyl Content Styles =======================================================

.dactyl-content {
  padding-bottom: 50px;

  // Hyperlinks ----------------------------------------------------------------
  a {
    text-decoration: underline;
  }

  /* Reduce external link icon size */
  .fa.fa-external-link:before {
    font-size: 80%;
  }

  blockquote {
    padding: 0.5rem;
    margin: 0.5rem 0.5rem 0.5rem 0;
    border-left: 0.5rem solid $gray-500;

    p:last-of-type {
      margin-bottom: 0;
    }
  }

  // Headings
  h1 {
    margin-top: 32px;
    line-height: 1.2;
    font-weight: 400;
  }
  h1:first-child {
    margin-top: 0;
    line-height: 1.2;
  }
  h1:first-child:before {
    margin-top: -80px;
  }
  h2 {
    margin-top: 72px;
    margin-bottom: 24px;
    font-weight: 400;
    line-height: 1.2;
  }
  h3 {
    margin-top: 24px;
    line-height: 1.2;
  }
  h4 {
    margin-top: 20px;
    line-height: 1.2;
  }
  h5 {
    margin-top: 16px;
    line-height: 1.2;
    font-weight: 700;
  }
  h6 {
    margin-top: 12px;
    line-height: 1.2;
    font-weight: 700;
  }

  // Hover anchors ---------------
  .hover_anchor {
    visibility: hidden;
    padding-left: 1rem;
    font-size: 60%;
  }

  h1,h2,h3,h4,h5,h6 {
    &:hover .hover_anchor {
      visibility: visible;
      text-decoration: none;
    }
  }


  // Images --------------------------------------------------------------------

  // Images should not exceed the main column
  img {
    max-width: 100%;
    height: auto;
  }
  // But badge images shouldn't be resized
  img.dactyl_badge {
      width: initial;
  }

  // Callouts ------------------------------------------------------------------

  .dactyl-callout {
    border-style: solid;
    border-radius: $border-radius;
    border-width: 1px;
    border-left-width: 4px;
    padding: 5px;
    padding-left: 25px;
    page-break-inside: avoid;
  }

  .dactyl-callout.tip, .dactyl-callout.ヒント {
    border-color: $success;

    & > strong:first-child:before,
    & > p strong:first-child:before {
      content: "\f058"; /* fontawesome check-circle icon */
      font-family: FontAwesome;
      color: $success;
      margin-left: -20px;
      padding-right: 5px;
    }
  }

  .dactyl-callout.note, .dactyl-callout.注記 {
    border-color: $info;

    & > strong:first-child:before,
    & > p strong:first-child:before {
      content: "\f05a"; /* fontawesome (i) info-circle icon */
      font-family: FontAwesome;
      color: $info;
      margin-left: -20px;
      padding-right: 5px;
    }
  }

  .dactyl-callout.caution,
  .dactyl-callout.注意 {
    border-color: $warning; /* "caution" is "warning" color; not a typo */

    & > strong:first-child:before,
    & > p strong:first-child:before {
      content: "\f071"; /* fontawesome /!\ exclamation-triangle icon */
      font-family: FontAwesome;
      color: $warning; /* not a typo */
      margin-left: -20px;
      padding-right: 5px;
    }
  }

  .dactyl-callout.warning,
  .dactyl-callout.警告 {
    border-color: $danger;

    & > strong:first-child:before,
    & > p strong:first-child:before {
      content: "\f057"; /* fontawesome (x) times-circle icon */
      font-family: FontAwesome;
      color: $danger;
      margin-left: -20px;
      padding-right: 5px;
    }
  }

  // Tables --------------------------------------------------------------------

  table {
    clear: right;
    margin-bottom: 48px;
  }

  table code {
    word-break: normal;
    white-space: nowrap;
  }

  th {
    border-bottom: 1px solid $black;
  }
  tr {
    border-bottom: 1px solid $gray-200;
  }

  th, td {
    padding: 0.2em;
    vertical-align: text-top;
    padding: 12px;
  }

  td:nth-child(1) {
    font-weight: bold;
  }

  // Lists ---------------------------------------------------------------------

  /* Some list items contain <p> tags, some don't. These styles make sure both
     kinds are spaced consistently. */
  li {
    margin: 12px 6px 6px 6px;
  }
  li p {
    margin: 0;
  }

  .curated-links ul,
  .curated-links ol,
  .children-display ul {
    padding-left: 0;
    margin-bottom: 0;
  }
  .level-1,
  .curated-links ul li {
    list-style-type: disc;
  }
  .level-1,
  .curated-links li {
    margin-left: 16px;
  }
  .level-2 {
    list-style-type: circle;
    margin-left: 30px;
  }
  .level-3 {
    list-style-type: square;
    margin-left: 45px;
  }
  .level-4 {
    margin-left: 60px;
  }
  .level-5 {
    margin-left: 75px;
    list-style-type: circle;
  }
  .level-6 {
    /* Probably not used */
    margin-left: 90px;
    list-style-type: square;
  }


  // Code Tabs -----------------------------------------------------------------

  .multicode {
    color: $code-color;
  }

  .multicode a.current {
    background-color: $code-bg-color;
    color: $code-color;
  }

  .multicode a,
  a.current {
    // The tabs themselves
    color: $black;
  }

  .multicode a:hover {
    color: $black;
    border-bottom: 1px solid $black;
    padding-bottom: 7px;
  }

  pre {
    overflow: visible;
    word-wrap: normal;
  }
  pre code {
    white-space: pre;
    border-radius: $border-radius;
    padding: 24px;
    display: block;
    overflow: auto;
    max-height: 24em;
    border-radius: 4px;
  }
  pre code, p code {
    color: $code-color;
    background: $code-bg-color;
  }
  p code {
    padding: 0.2rem;
  }
  .code_sample pre code.expanded {
    overflow: visible;
    max-height: none;
    position: absolute;
  }
  .code_sample .code_toggler {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .multicode {
    margin: 12px 0px 0px 0px;
    padding: 0 0 0 0;
    z-index: 1;
    padding-left: 10px;
    position: relative;
  }
  .multicode ul {
    margin: 0 !important;
    padding: 0;
  }
  .multicode pre {
    padding-top: 0;
    clear: both;
  }
  .multicode li {
    display: block;
    float: left;
    list-style-type: none;
    margin-right: 0px;
    margin-left: 0px;
  }
  .multicode ul > li:before {
    background: none;
    border: none;
  }
  .multicode a,
  a.current {
    padding-right: 32px;
    padding-left: 32px;
    padding-bottom: 10px;
    padding-top: 10px;
    margin: 0px;
    text-decoration: none;
    border-style: solid;
    border-color: transparent;
    border-width: 0.5px 0.5px 0 0.5px;
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .multicode a.current:hover {
    border-bottom: none;
    padding-bottom: 10px;
  }
  .multicode li:first-child {
    border-left: none;
  }
  .multicode li:last-child {
    border-right: none;
  }

}





/// TODO: clean up or remove everything below this line ========================
/* Left/right nav color scheme ------------------------------- */
aside li a {
  color: $gray-600;
  text-decoration: none;
  font-size: 1.05rem;
}
aside .sidenav_cat_title {
  color: $black;
}
aside a:hover,
aside .sidenav_cat_title:hover {
  color: $primary;
}

aside a.active,
aside a.active:hover {
  color: $primary;
  font-weight: 700;
}
aside a.active-parent {
  color: $gray-700;
  font-weight: 700;
}

.sidebar_pagelist {
  border-left: 1px solid $gray-200;
}
.sidebar_pagelist a,
.right-sidebar li a {
  display: block;
  margin-top: 5px;
  margin-left: -17px;
  padding: 4px 15px 4px 35px;
  text-indent: -20px;
  font-size: 0.9rem;
}
.sidebar_pagelist a:hover {
  padding-left: 34px;
  border-left: 1px solid $primary;
}
.sidebar_pagelist .active,
.sidebar_pagelist .active:hover {
  padding-left: 33px;
  border-left: 2px solid $primary;
}
.sidebar_pagelist .subpage {
  margin-left: 0;
  margin-top: 0;
  padding-left: 35px;
  border-left: 1px solid $gray-200;
}
.sidebar_pagelist .subpage:hover {
  padding-left: 35px;
  border-left: 1px solid $primary;
}
.sidebar_pagelist .active.subpage,
.sidebar_pagelist .active.subpage:hover {
  padding-left: 33px;
  border-left: 2px solid $primary;
}
.sidebar_pagelist li a .fa {
  display: inline;
}

.sidenav_cat_toggler {
  background-color: $gray-600;
}
.sidenav_cat_toggler:hover {
  background-color: $primary;
}

.right-sidebar .card-body {
  border-left: 1px solid $gray-200;
}

.sidenav_parent a {
  color: $black;
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 15px 16px 15px 10px;
}

.right-sidebar .level-1 a {
  color: $black;
}

.right-sidebar .level-3 {
  padding-left: 16px;
  border-left: 1px solid $gray-200;
  margin-bottom: 0;
  padding-bottom: 5px;
}

.right-sidebar .level-3 a {
  margin-top: 0;
  padding-bottom: 5px;
}

.right-sidebar li a:hover {
  text-decoration: none;
  border-left: 1px solid $primary;
  padding-left: 34px;
}

.right-sidebar {
  padding: 1rem;

  @media (max-width: 991px) {
    // On this size screen, the right sidebar becomes a block at top instead
    border-bottom: 1px solid $gray-200;
  }
}

/* main content area ----------------------------------- */
.sidebar-both .main, .sidebar-left .main {
  border-left: 1px solid $gray-200;

  @media (max-width: 767px) {
    // On this size screen, the left sidebar becomes a block at bottom instead
    border-left: none;
  }
}
.sidebar-both .main, .sidebar-right .main {
  border-right: 1px solid $gray-200;

  @media (max-width: 991px) {
    // On this size screen, the right sidebar becomes a block at top instead
    border-right: none;
  }
}

.main {
  // large tables/images can go over the edge. Better to horizontal scroll than
  // to overlap the right sidebar
  overflow-x: auto;
    z-index: 5;
    min-height: 700px;
}

/* Edit on GitHub link ------------------------------------------------------ */
.github-edit-wrap {
  border: 1px solid $gray-400;
  border-radius: $border-radius;
}
.github-edit-wrap:hover {
  border-color: $black;
}
.github-edit-wrap .github-edit {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNTE3OEEyQTk5QTAxMUUyOUExNUJDMTA0NkE4OTA0RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNTE3OEEyQjk5QTAxMUUyOUExNUJDMTA0NkE4OTA0RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTI4OTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTI5OTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+m4QGuQAAAyRJREFUeNrEl21ojWEYx895TDPbMNlBK46IUiNmPvHBSUjaqc0H8pF5+aDUKPEBqU2NhRQpX5Rv5jWlDIWlMCv7MMSWsWwmb3tpXub4XXWdPHvc9/Gc41nu+nedc7/8r/99PffLdYdDPsvkwsgkTBwsA/PADJCnzX2gHTwBt8Hl7p537/3whn04XoDZDcpBlk+9P8AFcAghzRkJwPF4zGGw0Y9QS0mAM2AnQj77FqCzrtcwB1Hk81SYojHK4DyGuQ6mhIIrBWB9Xm7ug/6B/nZrBHBegrkFxoVGpnwBMSLR9EcEcC4qb8pP14BWcBcUgewMnF3T34VqhWMFkThLJAalwnENOAKiHpJq1FZgI2AT6HZtuxZwR9GidSHtI30jOrbawxlVX78/AbNfhHlomEUJJI89O2MqeE79T8/nk8nMBm/dK576hZgmA3cp/R4l9/UeSxiHLVIlNm4nFfT0bxyuIj7LHRTKai+zdJobwMKzcZSJb0ePV5PKN+BqAAKE47UlMnERELMM3EdYP/yrd+XYb2mOiYBiQ8OQnoRBlXrl9JZix7D1pHTazu4MoyBcnYamqAjIMTR8G4FT8LuhLsexXYYjICBiqhQBvYb6fLZIJCjPypVvaOoVAW2WcasCnL2Nq82xHJNSqlCeFcDshaPK0twkAhosjZL31QYw+1rlMpWGMArl23SBsZZO58F2tlJXmjOXS+s4WGvpMiBJT/I2PInZ6lIs9/hBsNS1hS6BG0DSqmYEDRlCXQrmy50P1oDRKTSegmNbUsA0zDMwRhPJXeCE3vWLPQMvan6X8AgIa1vcR4AkGZkDR4ejJ1UHpsaVI0g2LInpOsNFUud1rhxSV+fzC9Woz2EZkWQuja7/B+jUrgtIMpy9YCW4n4K41YfzRneW5E1KJTe4B2Zq1Q5EHEtj4U3AfEzR5SVY4l7QYQPJdN2as7RKBF0BPZqqH4VgMAMBL8Byxr7y8zCZiDlnOcEKIPmUpgB5Z2ww5RdOiiRiNajUmWda5IG6WbhsyY2fx6m8gLcoJDJFkH219M3We1+cnda93pfycZpIJEL/s/wSYADmOAwAQgdpBAAAAABJRU5ErkJggg==);
  background-size: 24px 24px;
  background-position: left 12px center;
  background-repeat: no-repeat;
  padding: 8px 16px 8px 48px;
  color: $gray-600;
  text-decoration: none;
  display: block;
  line-height: 17px; /* Match search box height */
  font-family: $font-family-monospace;
  font-weight: 700;
}



/* Generic styles and colors --------------------- */

body {
  font-feature-settings: "liga", "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

pre, code {
  /* Disable ligatures on code-font, so, for example,
  </ doesn't become a diagonal arrow. */
  font-feature-settings: "liga" 0;
  font-variant-ligatures: none;
}



/* Top navigation ----------------------------------------------------------- */

.navbar.fixed-top {
  font-weight: 400;
}

.navbar .navbar-nav .nav-link {
  font-size: 1rem;
  line-height: 52px;
  text-decoration: none;
}

.navbar .navbar-nav .nav-link:hover {
  background-color: transparent;
  box-shadow: inset 0 -1px 0 0 #000;
  text-decoration: none;
}

.navbar .navbar-nav .active a {
  font-weight: 700;
  box-shadow: inset 0 -1px 0 0 #000;
}
.navbar .active-parent a {
  font-weight: 700;
  box-shadow: inset 0 -1px 0 0 #000;
}

@media (max-width: 991px) {
  .navbar .navbar-nav .nav-link {
    line-height: normal;
  }
  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .active a,
  .navbar .active-parent a {
    box-shadow: none;
  }
}

#navbar-search {
  position: relative;
}

#navbar-search .form-inline {
  min-width: 224px; /* more room for placeholder text */
}

#topsearchbar {
  padding-right: 40px;
  width: 100%;
  font-size: 0.875rem;
}

#navbar-search .btn,
#navbar-search .search-icon {
  position: absolute;
  right: 0;
}

/* Push content below fixed header ------------------------------------------ */
#main_content_wrapper {
  margin-top: 68px;
}

/* Fix so anchors don't jump under the fixed header ------------------------- */
.main h1:before,
.main h2:before,
.main h3:before,
.main h4:before,
.main h5:before,
.main h6:before,
#main_content_wrapper:before,
.interactive-block:before {
  display: block;
  content: " ";
  margin-top: -67px;
  height: 67px;
  visibility: hidden;
}


/* Footer ------------------------------------------------------------------- */

.dactyl-footer {
  border-top: 1px solid $gray-200;
}

.dactyl-footer .card-body {
  margin-top: -15px;
}

.dactyl-footer .card {
  padding-top: 24px;
}

.dactyl-footer h5 {
  font-size: 1rem;
}
.dactyl-footer li {
  font-size: 0.75rem;
}

.absolute_bottom_footer span {
  margin-right: 25px;
  font-size: 0.75rem;
}
.dactyl-footer .card-header h5 i {
  margin-left: 0.2em;
}

.dactyl-footer .card-grid .card {
  padding: 24px 48px 48px 48px;
}
.dactyl-footer .card-grid .card:first-child {
  padding-left: 0;
}
@media (max-width: 991px) {
  .dactyl-footer .card-grid .card {
    padding-left: 0;
  }
}


/* (Jump to) "Top" button --------------------------------------------------- */
.jump-to-top {
  display: none;
  position: fixed;
  bottom: 15px;
  right: 30px;
  font-weight: 700;
  z-index: 1000;
  color: white;
}
@media screen and (max-width: 767px) {
  .jump-to-top {
    bottom: 40px;
    right: 40px;
  }
}

/* Breadcrumbs -------------------------------------------------------------- */

.breadcrumb-item + .breadcrumb-item:before {
  content: "\f105"; /* fontawesome angle-right */
  font-family: FontAwesome;
  padding-right: 5px;
}
.breadcrumbs-wrap .breadcrumb {
  padding: 0;
  margin-bottom: 0;
}
.breadcrumb-item a {
  color: hsla(14.999999999999947, 1.98%, 39.61%, 1.00);
  text-decoration: none;
}
.breadcrumb-item a:hover {
  color: #000;
}

/* Right navigation --------------------------------------------------------- */

.right-sidebar .card {
  position: sticky;
  max-height: 85vh;
  top: 48px;
  overflow: auto;
  border: none;
}

.right-sidebar .card-header {
  border-bottom: none;
  background-color: white;
  padding: 0 0 10px 0;
}

.right-sidebar .card-header h4 {
  line-height: 20px;
  font-size: 1.2em;
  padding: 0;
  margin: 0;
}

.right-sidebar .card-body {
  padding: 0 0 0 16px;
  list-style-type: none;
}

.right-sidebar ul li {
  list-style-type: none;
  margin-bottom: 8px;
  margin-left: 0;
}

.right-sidebar .level-1 a,
.right-sidebar .separator {
  font-weight: 700;
}
.right-sidebar .level-2,
.right-sidebar .method {
  margin-left: 0;
}

/* Rest-tool stuff ---------------------------------------------------------- */
#request, #request_body,
#response, #response_body {
  background-color: $gray-200;
  border: 1px dotted $black;
  margin-bottom: 5px;
}

#tooltip {
  position:absolute;
  display:none;
  padding:8px 16px;
  border-radius:4px;
  background:#FBEFD5;//TODO: use bootstrap colors
  border:1px dotted #7A6943;
  color:#7A6943;
  font-family:'open sans';
  font-weight:300;
  font-size:14px;
  line-height:1.5em;
  max-width:300px;
  z-index:99;
}

.CodeMirror {
  background:inherit !important;
  color:inherit !important;
  height: auto !important;
  line-height:1.3 !important;
  font-size:14px !important;
}

.CodeMirror-selected {
  background:#ddd !important;
}

/* JSON property */
span.cm-string:first-of-type {
  font-weight:bold !important;
  color:#574C57 !important;
}

span.cm-string {
  color:#516E41 !important;
}

span.cm-number {
  color:#F05E1C !important;
}

span.cm-atom {
  color:#66327C !important;
}


#rest_url_wrapper {
    width: 100%;
}

#rest_url {
    width: auto;
    border: 0;
    background: none;
    vertical-align: top;
}

#rest_url .editable {
    font-weight: bold;
    font-family:'inconsolata',monospace;
    border-width: 0 0px 1px 0;
    border-style: dotted;
    background-color: $gray-200;
    border-color: $gray-800;
    border-radius: $border-radius;
    min-width: 5em;
    vertical-align: top;
}

#rest_url .non_editable {
    vertical-align: top;
    background-color: $white;
}

#rest_url_wrapper p {
    margin: 0;
}

#rest_url div {
    display: inline-block;
}

#rest_url input {
    margin: 0 !important;
}

#rest_url div label,
#rest_url div input {
    display: block;
}


/* SpinKit "Chase" loader -----------------------------------------------------
Copyright (c) 2020 Tobias Ahlin
MIT Licensed
https://github.com/tobiasahlin/SpinKit
Adapted for Dactyl Starter Kit
*/

.loader {
  display: none;
  margin-bottom: 5px;
}

.sk-chase {
  width: 40px;
  height: 40px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: $primary;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
  100% { transform: rotate(360deg); }
}

@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); }
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4);
  } 100%, 0% {
    transform: scale(1.0);
  }
}

/* Interactive blocks in tutorial contents ---------------------------------- */
/* I don't get it, but apparently setting padding or border on
   .interactive-block breaks the fixed-header anchor fix from lines 90-104.
   So the visual styles go on this inner div.
*/
.interactive-block-inner {
  border: 1px dashed #25A768;
  padding: 10px;
  margin: 5px;
}

.interactive-block-ui > button {
  margin: 10px 0;
}

.interactive-block .breadcrumb-wrap {
  margin-bottom: 5px;
}

.interactive-block .breadcrumb-item a {
  text-decoration: none;
}

.interactive-block .breadcrumb-item.current a {
  font-weight: bold;
}

.interactive-block .breadcrumb-item.active a {
  color: #43bded; /* TODO: adjust this color */
}

.interactive-block .breadcrumb-item.disabled a {
  color: #6B7075; /* TODO: adjust this color */
}

.interactive-block .breadcrumb-item.done a:after {
  content: "\f058"; /* fontawesome check-circle icon */
  font-family: FontAwesome;
  color: #6B7075; /* TODO: adjust this color */
  padding-right: 5px;
  padding-left: 5px;
}

.ws-console {
  height: 200px;
  overflow: auto;
}


/* Language selector -------------------------------------------------------- */

.language-selector {
  .nav-link {
    font-size: 16px;
  }

  .nav-link.active {
    color: $black;
    font-weight: bold;
  }
}

#navbarHolder .language-selector .btn {
  font-size: 0.875rem;
  padding: .375rem .75rem;
}


/* Responsive design for different viewscreens ------------------------------ */

@media (max-width: 991px) {

  .navbar-brand img {
    width: 120px;
  }

  .right-sidebar .card {
    padding-left: 0;
  }

  #main_content_body .container-fluid {
    padding-left: 0;
  }

  #page-toc-wrapper {
    position: static;
    display: block;
    clear: both;
    overflow-y: inherit;
    max-width: 100%;
    max-height: inherit;
    word-break: break-all;
  }
  .main {
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
  }
}


@media (max-width: 480px) {
  html {
    overflow-x: hidden !important;
  }
}
@media (max-width: 400px) {
  .navbar .navbar-brand .brand-text {
    margin-right: 0;
    letter-spacing: -0.08rem;
  }
  .navbar .navbar-brand {
    margin-right: 0;
  }
  .navbar .navbar-brand .logo {
    margin-right: 0;
    margin-left: -1rem;
  }

  .btn {
    white-space: normal;
  }
}

/* Print styles ------------------------------------------------------------- */
@media print {
    /* undo code tabs */
  .multicode > div {
    display: block !important;
  }
  .multicode > ul {
    display: none !important;
  }
  .multicode > em,
  .multicode > p > em {
    display: block !important;
    page-break-after: avoid;
  }
  .multicode > p {
    display: block !important;
  }
  /* wrap code, not scroll */
  pre {
    white-space: pre-wrap;
    max-height: none !important;
    overflow: visible;
    page-break-inside: auto;
    word-wrap: break-word;
  }
  pre code {
    white-space: pre-wrap !important;
  }
  /* Drop header, footer, sidebars */
  header,
  footer,
  aside {
    display: none;
  }
  /* Full-width content body */
  .dactyl-content, #main_content_body {
    position: static;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
  }
  #main_content_wrapper {
    margin-top: 0;
  }
  #main_content_body::before {
    display: none;
  }
  #main_content_wrapper .main {
    border: 0;
  }
  .main .row {
    display: block;
  }
  a[href^="#"]:after {
      display: none !important;
  }

  .main code {
      color: black;
  }

  .main .hljs {
      background: transparent;
  }

  .main pre {
    background: transparent;
    box-decoration-break: slice;
  }

  td, th {
    border: 1px solid;
    padding: 4px;
  }

  thead {
    background-color: #e0e0e0;
  }

  .pdf-cover-wrapper {
      page: pdf-cover;
  }
  .pdf-content-wrapper {
      page: pdf-content;
  }

  /* PDF cover page: full width and no page number*/
  @page pdf-cover {
    margin: 0;
    @bottom-right {
      content: none;
    }
    @bottom-left {
      content: none;
    }
  }
  .cover-page .title-area {
    position: absolute;
    top: 26%;
    left: 8%;
    font-size: 120px;
    max-width: 1300px;
    border-top: 20px solid black;
    border-bottom: 20px solid black;
  }

  /* PDF Page numbers */
  @page:right {
    @bottom-right {
      content: counter(page);
      font-size: 16px;
      color: #707070;
    }
  }

  @page:left {
    @bottom-right {
      content: counter(page);
      font-size: 16px;
      color: #707070;
    }
  }

}