.skipnav {
  position: absolute;
  top: -100px;
  z-index: 1200;
  display: block;
  width: 12em;
  max-width: 100%;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  text-align: center;
  background: #f0f0f0;
  border: 2px solid #474747;
}

.skipnav:focus {
  top: .5rem;
  left: 50%;
  margin-left: -6em;
  color: #000;
}

.cf-header {
  color: #fff;
  background-color: #246;
}

.cf-header .navbar-brand {
  margin-right: .5rem;
}

.cf-header .navbar-brand-logo {
  display: inline-block;
  width: 2rem;
  height: 2rem;
}

@media (max-width: 61.9375em) {
  .cf-header .navbar-collapse .navbar-nav {
    padding-top: .5rem;
  }
  .cf-header .navbar-collapse .nav-link {
    padding-left: .5rem;
  }
}

@media (min-width: 48em) {
  @supports ((position: -webkit-sticky) or (position: sticky)) {
    .cf-header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1045;
    }
    .cf-content > h1[id]::before,
    .cf-content > h2[id]::before,
    .cf-content > h3[id]::before,
    .cf-content > h4[id]::before,
    .cf-content > h5[id]::before {
      position: relative;
      z-index: -1;
      display: block;
      height: 4.5rem;
      margin-top: -4.5rem;
      visibility: hidden;
      content: "";
    }
  }
}

.cf-header-social {
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: center;
      align-items: center;
}

.cf-header-social .nav-link {
  padding-right: .5rem;
  padding-left: .5rem;
}

.cf-header-social .dropdown-menu {
  position: absolute !important;
  float: left !important;
}

.cf-header-menu {
  display: inline-block;
  margin-top: -.25rem;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: .75;
}

.cf-header-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

.home-icons .fa {
  font-size: 3.5rem;
  vertical-align: middle;
}

.home-icons .fa + .fa {
  margin-left: .5rem;
}

.home-feature > .small {
  margin-top: -.75rem;
}

@media (min-width: 48em) {
  .home-feature {
    margin-top: 2.2rem;
  }
}

.btn-start {
  padding: .75rem 2rem;
  margin-bottom: .25rem;
  font-weight: 600;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
  border-width: 2px;
  box-shadow: 2px 2px 0.2rem rgba(0, 0, 0, 0.35);
}

.btn-start:focus, .btn-start:hover {
  color: #222;
  background-color: rgba(255, 255, 255, 0.9);
}

.jumbotron-home {
  padding: 2rem 1.5rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
  background-image: linear-gradient(135deg, #0c5782 0%, #117cba 100%);
}

.jumbotron-home .logo-home {
  display: block;
  width: 100%;
  margin: 0 auto;
  -webkit-filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.15));
          filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.15));
}

.jumbotron-home h1, .jumbotron-home h2 {
  font-weight: bold;
  color: #fff;
}

.jumbotron-home .lead {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.jumbotron-home .splash-home {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

@media (max-width: 61.9375em) {
  .jumbotron-home .container {
    width: 100%;
  }
}

.container-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.5);
}

@media (min-width: 48em) {
  .container-divider.col, .container-divider[class*="col-"] {
    border-top: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.5);
  }
}

.jumbotron-docs {
  padding: .5rem .375rem;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.9);
  background-image: linear-gradient(135deg, #0c5782 0%, #117cba 100%);
}

@media (min-width: 36em) {
  .jumbotron-docs {
    padding: 1rem .5rem;
  }
}

.jumbotron-docs .lead {
  margin-bottom: .25rem;
}

.anchorjs-link {
  transition: opacity .2s ease-in-out .1s;
}

.anchorjs-link:focus, .anchorjs-link:hover {
  color: inherit;
  text-decoration: none;
}

.cf-clipboard {
  position: relative;
  z-index: 2;
  display: block;
  float: right /*rtl:ignore*/;
  line-height: 1;
}

.cf-clipboard + .highlight {
  margin-top: 0;
}

.cf-clipboard .tooltip {
  white-space: nowrap;
}

.btn-clipboard {
  position: absolute;
  top: 0;
  right: 0 /*rtl:ignore*/;
}

#markdown-toc ul {
  padding-left: 2rem;
  margin-top: .25rem;
  margin-bottom: .25rem;
}

.cf-sidebar {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #f7f7f7;
  border-bottom: 1px solid #c2c2c2;
}

@media (min-width: 48em) {
  .cf-sidebar {
    padding-bottom: 3rem;
    border-right: 1px solid #c2c2c2;
    border-bottom: 0;
  }
}

.cf-sidebar .cf-sidebar-header {
  margin-bottom: .75rem;
}

.cf-sidebar .nav-link {
  display: block;
  padding: .15rem .5rem;
}

.cf-sidebar .nav-link.active {
  color: #fff;
  background-color: #0c5782;
}

@media (max-width: 61.9375em) {
  .cf-sidebar .nav-link {
    display: inline-block;
  }
}

#markdown-toc {
  font-size: .9375rem;
}

@media (min-width: 75em) {
  #contents,
  #markdown-toc {
    display: none;
  }
}

.cf-toc {
  -ms-flex-order: 2;
      order: 2;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: .875rem;
}

.cf-toc .section-toc {
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: 1rem;
  margin-bottom: 0;
  list-style: none;
  border-left: 1px solid #8ac;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .cf-toc .section-toc {
    position: -webkit-sticky;
    position: sticky;
    top: 4.375rem;
    max-height: calc(100vh - 4.375rem);
    overflow-y: auto;
    overflow-x: visible;
  }
}

.cf-toc .section-toc ul {
  padding-left: .875rem;
  list-style: none;
}

.cf-toc .section-toc li {
  position: relative;
  padding: .0625rem 0;
}

.cf-toc .section-toc .active::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1rem;
  display: block;
  width: .1875rem;
  font-size: 5rem;
  line-height: .5rem;
  content: " ";
  background-color: #246;
}

.cf-toc .section-toc .section-toc-h3 {
  padding-left: .875rem;
}

.cf-toc .section-toc .section-toc-h4 {
  padding-left: 1.75rem;
}

.cf-toc .section-toc .section-toc-h5 {
  padding-left: 2.625rem;
}

.cf-title {
  font-size: 3rem;
}

.cf-title + p {
  font-size: 1.15rem;
  font-weight: 600;
}

.cf-content {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

@media (min-width: 48em) {
  .cf-content {
    padding-top: 1.5rem;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }
}

.cf-content > h2 {
  margin-top: 2.5rem;
}

.cf-content > h3 {
  margin-top: 1.5rem;
}

h2 > code,
h3 > code,
h4 > code {
  font-weight: 500;
}

.cf-example {
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #e1e1e8;
  border-radius: .25rem .25rem 0 0;
}

.cf-example + .cf-clipboard + .highlight {
  border-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

@media (min-width: 36em) {
  .cf-example {
    padding: 1.5rem;
  }
}

.cf-example::after {
  display: block;
  clear: both;
  content: "";
}

.cf-example-bottom {
  margin-bottom: 1rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.highlight {
  position: relative;
  margin-bottom: 1rem;
  color: #393939;
  background-color: #f8f8f8;
  border: 1px solid #e1e1e8;
  border-radius: .25rem;
}

.highlight pre {
  direction: ltr /*rtl:ignore*/;
  padding: 1.65rem 1rem .5rem;
  margin: 0;
  text-align: left /*rtl:ignore*/;
  background-color: transparent;
  border: 0;
}

.highlight pre code {
  font-size: inherit;
  color: #3f3f3f;
}

.cf-content > table:not(.table) {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  border: 1px solid #a3a3a3;
}

.cf-content > table:not(.table) th,
.cf-content > table:not(.table) td {
  padding: 0.75rem;
  vertical-align: top;
  border: 1px solid #a3a3a3;
}

.cf-content > table:not(.table) thead th,
.cf-content > table:not(.table) thead td {
  vertical-align: bottom;
  border-bottom-width: 2px;
}

.cf-content > table:not(.table) tbody + tbody {
  border-top: 2px solid #a3a3a3;
}

.cf-content > table:not(.table) .table {
  background-color: #fff;
}

.table-grunt tr th:first-child,
.table-grunt tr td:first-child {
  white-space: nowrap;
}

.cf-callout {
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid #a3a3a3;
  border-left-width: .5rem;
  border-radius: 0.25rem;
}

.cf-callout .h3, .cf-callout .h4, .cf-callout .h5, .cf-callout .h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.25rem;
}

.cf-callout p:last-child,
.cf-callout ul:last-child {
  margin-bottom: 0;
}

.cf-callout + .cf-callout {
  margin-top: -.25rem;
}

.cf-callout-primary {
  background-color: #dbe3f5;
  border-color: #718ed6;
}

.cf-callout-primary .h3, .cf-callout-primary .h4, .cf-callout-primary .h5, .cf-callout-primary .h6 {
  color: #0f389e;
}

.cf-callout-secondary {
  background-color: #eaeaea;
  border-color: #acacac;
}

.cf-callout-secondary .h3, .cf-callout-secondary .h4, .cf-callout-secondary .h5, .cf-callout-secondary .h6 {
  color: #636363;
}

.cf-callout-info {
  background-color: #dbebf5;
  border-color: #70b0d6;
}

.cf-callout-info .h3, .cf-callout-info .h4, .cf-callout-info .h5, .cf-callout-info .h6 {
  color: #0e699e;
}

.cf-callout-success {
  background-color: #dbeddc;
  border-color: #70b874;
}

.cf-callout-success .h3, .cf-callout-success .h4, .cf-callout-success .h5, .cf-callout-success .h6 {
  color: #0e7414;
}

.cf-callout-warning {
  background-color: #f7edd9;
  border-color: #dfb866;
}

.cf-callout-warning .h3, .cf-callout-warning .h4, .cf-callout-warning .h5, .cf-callout-warning .h6 {
  color: #ab7400;
}

.cf-callout-danger {
  background-color: #f7dddb;
  border-color: #de776e;
}

.cf-callout-danger .h3, .cf-callout-danger .h4, .cf-callout-danger .h5, .cf-callout-danger .h6 {
  color: #aa190c;
}

.cf-callout-dep > p + ul {
  margin-top: -1rem;
}

.palette {
  margin-bottom: 1rem;
}

.palette-base,
.palette-item {
  padding: .5rem 1rem;
  font-size: .875rem;
}

.palette-base {
  margin-bottom: .25rem;
}

.topLink a {
  display: inline-block;
  padding: .15rem .5rem;
  font-size: .875rem;
  color: #c3c3c3;
  text-decoration: none;
  white-space: nowrap;
  background: #424242;
  border-radius: .5rem .5rem 0 0;
}

.topLink a:hover,
.topLink a:focus {
  color: #fff;
}

.topLink .caret {
  border-top: 0;
  border-bottom: 0.3125rem solid;
}

.topLink.affix-top,
.topLink.affix {
  position: fixed;
  bottom: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.topLink.affix-top {
  visibility: hidden;
}

.topLink.affix-bottom {
  position: absolute;
}

.cf-feed {
  padding: 2rem 0;
  margin-top: 2rem;
  text-align: center;
  background-image: linear-gradient(135deg, #117cba 0%, #0c5782 100%);
}

.cf-feed a {
  color: rgba(255, 255, 255, 0.9);
}

.cf-feed a:focus, .cf-feed a:hover {
  color: white;
}

.cf-docs-keys dt {
  float: left;
  width: 4.5rem;
  min-height: 1.75rem;
  overflow: hidden;
  clear: left;
  text-align: center;
  white-space: nowrap;
}

.cf-docs-keys dd {
  min-height: 1.75rem;
  margin-left: 5rem;
}

.cf-docs-keys dd::after {
  display: block;
  clear: both;
  content: "";
}

.cf-team a {
  text-decoration: none;
}

.cf-team .github-btn {
  float: right;
  width: 180px;
  height: 1.25rem;
  margin-top: .25rem;
  border: 0;
}

.cf-textalt {
  text-align: center;
}

.cf-textalt div div {
  padding: .5rem 1rem;
}

.docsearch {
  width: 100% !important;
  padding-left: 1.5rem;
}

.docsearch-wrapper {
  position: relative;
  width: 11rem;
  margin-left: .5rem;
  clear: both;
}

@media (max-width: 66em) {
  .docsearch-wrapper {
    width: 10rem;
  }
}

@media (max-width: 35.9375em) {
  .docsearch-wrapper {
    width: 5.5rem;
  }
}

.docsearch-wrapper::before {
  position: absolute;
  top: 50%;
  left: .25rem;
  z-index: 1;
  display: block;
  width: 1rem;
  height: 1rem;
  margin-top: -.5rem;
  content: " ";
  background: url("/assets/img/magnifying-glass.svg") no-repeat center;
  background-size: 1rem 1rem;
}

@media (min-width: 36em) {
  .algolia-autocomplete .ds-dropdown-menu {
    min-width: 450px;
  }
}

.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
  margin-top: 6px;
  border-bottom: 1px solid #858585;
}

.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion.suggestion-layout-simple,
.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
  background-color: rgba(69, 142, 225, 0.1);
}

.algolia-autocomplete .algolia-docsearch-suggestion {
  padding: 0;
}

.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
  padding: 2px 6px;
  margin-top: 0;
  font-weight: bold;
  color: #292929;
  background-color: #a0cbe3;
  border-top: 1px solid #858585;
  border-bottom: 0;
}

.algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
  display: table !important;
  padding: 0;
}

.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
  display: table-cell !important;
  float: none !important;
  padding: 6px 10px;
  color: #383838;
  background-color: #f0f0f0;
}

.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column::before {
  background: #858585;
}

.algolia-autocomplete .algolia-docsearch-suggestion--content {
  display: table-cell !important;
  float: none !important;
  padding: 6px 10px;
  background-color: #fff;
}

.algolia-autocomplete .algolia-docsearch-suggestion--content::before {
  background: #858585;
}

.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
  background-color: rgba(143, 187, 237, 0.2);
}

.algolia-autocomplete .algolia-docsearch-suggestion--title {
  margin-bottom: 0;
}

.algolia-autocomplete .algolia-docsearch-footer {
  margin-top: 8px;
}

.cf-example-container {
  min-width: 16rem;
  max-width: 25rem;
  margin-right: auto;
  margin-left: auto;
}

.cf-example-container-fluid {
  max-width: none;
}

.cf-example-container-header {
  height: 3rem;
  margin-bottom: .5rem;
  background-color: #d1ddfb;
  border-radius: .25rem;
}

.cf-example-container-sidebarL {
  float: left;
  width: 4rem;
  height: 8rem;
  background-color: #ffc44a;
  border-radius: .25rem;
}

.cf-example-container-sidebarR {
  float: right;
  width: 8rem;
  height: 8rem;
  background-color: #f46d62;
  border-radius: .25rem;
}

.cf-example-container-body {
  height: 8rem;
  margin-right: 8.5rem;
  margin-left: 4.5rem;
  background-color: #4684c1;
  border-radius: .25rem;
}

.cf-example-row .row + .row {
  margin-top: 1rem;
}

.cf-example-row .row > [class^="col-"],
.cf-example-row .row .col {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(34, 68, 102, 0.15);
  border: 1px solid rgba(34, 68, 102, 0.2);
}

.cf-example-row-grid .row {
  background-color: rgba(34, 68, 102, 0.05);
}

.cf-example-row-flex .row {
  border: 1px solid rgba(34, 68, 102, 0.5);
}

.cf-example-row-flex-v .row {
  height: 7rem;
  border: 1px solid rgba(34, 68, 102, 0.5);
}

.example-container {
  width: 800px;
  width: 100%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

.example-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem;
}

.example-content-main {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 36em) {
  .example-content-main {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 48em) {
  .example-content-main {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 62em) {
  .example-content-main {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 75em) {
  .example-content-main {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 36em) {
  .example-content-main {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 62em) {
  .example-content-main {
    -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

.example-content-secondary {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 36em) {
  .example-content-secondary {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 48em) {
  .example-content-secondary {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 62em) {
  .example-content-secondary {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 75em) {
  .example-content-secondary {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 36em) {
  .example-content-secondary {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 62em) {
  .example-content-secondary {
    -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

.cf-example > .form-control + .form-control,
.cf-example > .custom-select + .custom-select {
  margin-top: .5rem;
}

.cf-example > .btn-group + .btn-group,
.cf-example > .btn-group + br + .btn-group {
  margin-top: .5rem;
}

.card-deck-col {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  margin-right: -1rem;
  margin-bottom: 0;
  margin-left: -1rem;
}

.card-deck-col .card {
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  width: calc(100% - 2rem);
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
}

@media (min-width: 35em) {
  .card-deck-col .card {
    width: calc(50% - 2rem);
  }
}

@media (min-width: 62em) {
  .card-deck-col .card {
    width: calc(25% - 2rem);
  }
}

.cf-example > .list-group {
  max-width: 25rem;
}

.cf-example .fixed-top,
.cf-example .sticky-top {
  position: static;
  margin: -1rem -1rem 1rem;
}

@media (min-width: 36em) {
  .cf-example .fixed-top,
  .cf-example .sticky-top {
    margin: -1.5rem -1.5rem 1rem;
  }
}

.cf-example .fixed-bottom {
  position: static;
  margin: 1rem -1rem -1rem;
}

@media (min-width: 36em) {
  .cf-example .fixed-bottom {
    margin: 1rem -1.5rem -1.5rem;
  }
}

.cf-example .pagination {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.cf-example > .progress + .progress,
.cf-example > .progress + .btn {
  margin-top: 1rem;
}

.cf-example > [class*="bg-"]:not(.navbar):not(.progress),
.cf-example .d-table-cell {
  padding: .5rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.cf-example > .close {
  float: none;
}

.cf-example > .valign-top,
.cf-example > .valign-middle,
.cf-example > .valign-bottom {
  padding: .25em;
  margin-bottom: .5em;
  background-color: #f0f0f0;
}

.cf-example-dropdown {
  height: 19em;
}

.cf-example-dropdown > .dropdown::after {
  display: block;
  clear: both;
  content: "";
}

.cf-example-dropdown > .dropdown > .dropdown-toggle {
  float: left;
}

.cf-example-dropdown > .dropdown > .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: .25rem;
  clear: left;
}

.cf-example > .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: .25rem;
  clear: left;
}

.cf-example > .dropdown + .dropdown,
.cf-example > .btn-group + .btn-group,
.cf-example > .dropdown + .btn-group,
.cf-example > .btn-group + .dropdown {
  margin-top: .5rem;
}

.cf-example > .modal {
  position: static;
  display: block;
}

.cf-example-tooltip,
.cf-example-popover {
  background-color: #f0f0f0;
}

.cf-example-tooltip .tooltip,
.cf-example-popover .popover {
  position: relative;
  display: block;
  float: left;
  width: 16rem;
  margin: 1.25rem;
}

.cf-example-tooltip .tooltip {
  width: auto;
  padding: 4px;
  margin: 1rem;
  opacity: .9;
}

.container-viewport {
  position: relative;
  height: 150px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

.container-viewport .viewport-text {
  position: absolute;
  top: 65px;
  left: 50px;
  font-weight: bold;
}

.container-viewport .tooltip,
.container-viewport .popover {
  min-width: 250px;
  max-width: 500px;
}

.container-viewport .tooltip .tooltip-body {
  min-width: 250px;
  max-width: 500px;
  min-height: 100px;
  text-align: left;
}

.container-viewport .btn-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

.container-viewport .btn-drag {
  position: absolute;
  bottom: 0;
  left: 120px;
}

.cf-example-scrollspy {
  position: relative;
  height: 12rem;
  margin-top: .5rem;
  overflow: auto;
}

.cf-example-scrollspy2 {
  position: relative;
  height: 20rem;
  margin-top: .5rem;
  overflow: auto;
}

.cf-example > [data-cfw="slider"] .slider {
  width: 12rem;
}

.cf-example > [data-cfw="slider"] .slider-vertical {
  width: auto;
  height: 12rem;
  margin-left: 1rem;
}

.cf-example > [data-cfw="slider"] input {
  width: 3em;
  font-weight: normal;
}

.cf-example > [data-cfw="slider"] select {
  font-weight: normal;
}

@media (min-width: 62em) {
  .cf-example-tabResponsive h4 {
    display: none;
  }
  .cf-example-tabResponsive .collapse {
    display: block;
    visibility: visible;
  }
}

@media (max-width: 61.9375em) {
  .cf-example-tabResponsive .nav-tabs {
    display: none;
  }
  .cf-example-tabResponsive .tab-pane {
    display: block;
    visibility: visible;
  }
}

.cf-example-flex > div div {
  background-color: rgba(34, 68, 102, 0.05);
  border: 1px solid rgba(34, 68, 102, 0.2);
}

.cf-example > .heading {
  width: 3rem;
  height: 3rem;
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  background-image: url("../brand/figuration-solid.svg");
  border: 0;
}

.hll {
  background-color: #ffc;
}

.c {
  color: #999;
}

.k {
  color: #069;
}

.o {
  color: #555;
}

.cm {
  color: #999;
}

.cp {
  color: #099;
}

.c1 {
  color: #999;
}

.cs {
  color: #999;
}

.gd {
  background-color: #fcc;
  border: 1px solid #c00;
}

.ge {
  font-style: italic;
}

.gr {
  color: #f00;
}

.gh {
  color: #030;
}

.gi {
  background-color: #cfc;
  border: 1px solid #0c0;
}

.go {
  color: #aaa;
}

.gp {
  color: #009;
}

.gu {
  color: #030;
}

.gt {
  color: #9c6;
}

.kc {
  color: #069;
}

.kd {
  color: #069;
}

.kn {
  color: #069;
}

.kp {
  color: #069;
}

.kr {
  color: #069;
}

.kt {
  color: #078;
}

.m {
  color: #f60;
}

.s {
  color: #d44950;
}

.na {
  color: #4f9fcf;
}

.nb {
  color: #366;
}

.nc {
  color: #0a8;
}

.no {
  color: #360;
}

.nd {
  color: #99f;
}

.ni {
  color: #999;
}

.ne {
  color: #c00;
}

.nf {
  color: #c0f;
}

.nl {
  color: #99f;
}

.nn {
  color: #0cf;
}

.nt {
  color: #2f6f9f;
}

.nv {
  color: #033;
}

.ow {
  color: #000;
}

.w {
  color: #bbb;
}

.mf {
  color: #f60;
}

.mh {
  color: #f60;
}

.mi {
  color: #f60;
}

.mo {
  color: #f60;
}

.sb {
  color: #c30;
}

.sc {
  color: #c30;
}

.sd {
  font-style: italic;
  color: #c30;
}

.s2 {
  color: #c30;
}

.se {
  color: #c30;
}

.sh {
  color: #c30;
}

.si {
  color: #a00;
}

.sx {
  color: #c30;
}

.sr {
  color: #3aa;
}

.s1 {
  color: #c30;
}

.ss {
  color: #fc3;
}

.bp {
  color: #366;
}

.vc {
  color: #033;
}

.vg {
  color: #033;
}

.vi {
  color: #033;
}

.il {
  color: #f60;
}

.css .o,
.css .o + .nt,
.css .nt + .nt {
  color: #999;
}

.language-bash::before {
  color: #009;
  content: "$ ";
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.language-powershell::before {
  color: #009;
  content: "PM> ";
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.table .highlight pre {
  white-space: normal;
}

.cfw-table th small,
.responsive-utilities th small {
  display: block;
  font-weight: normal;
  color: #999;
}

.responsive-utilities tbody th {
  font-weight: normal;
}

.responsive-utilities td {
  text-align: center;
}

.responsive-utilities .is-visible {
  color: #0e7414;
  background-color: #dbeddc !important;
}

.responsive-utilities .is-hidden {
  color: #666;
  background-color: #f8f8f8 !important;
}

.responsive-utilities-test {
  margin-top: .25rem;
}

.responsive-utilities-test .col-6 {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.responsive-utilities-test span {
  display: block;
  padding: 1rem .5rem;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  border-radius: .25rem;
}

.visible-on .col-6 > .not-visible,
.hidden-on .col-6 > .not-visible {
  color: #666;
  border: 1px solid #a3a3a3;
}

.visible-on .col-6 .visible,
.hidden-on .col-6 .visible {
  color: #0e7414;
  background-color: #dbeddc;
  border: 1px solid #70b874;
}

@media (max-width: 35.9375em) {
  .d-xs-only {
    display: none !important;
  }
}

@media (min-width: 36em) and (max-width: 47.9375em) {
  .d-sm-only {
    display: none !important;
  }
}

@media (min-width: 48em) and (max-width: 61.9375em) {
  .d-md-only {
    display: none !important;
  }
}

@media (min-width: 62em) and (max-width: 74.9375em) {
  .d-lg-only {
    display: none !important;
  }
}

@media (min-width: 75em) {
  .d-xl-only {
    display: none !important;
  }
}

.player-fulldisplay .player-transcript {
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  width: 25%;
  height: 80%;
}

.player {
  display: none;
  -ms-flex-align: center;
      align-items: center;
  margin-bottom: 20px;
  white-space: nowrap;
}

.player.ready {
  display: -ms-flexbox;
  display: flex;
}

.player-control > .off {
  display: none;
}

.player-time-current,
.player-time-remainder,
.player-time-duration {
  display: inline-block;
  width: 34px;
  text-align: center;
}

.player-time-remainder:before {
  display: inline-block;
  content: "-";
  line-height: inherit;
}

.player-seek {
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100px;
  vertical-align: middle;
}

.player-seek.progress {
  vertical-align: middle;
}

.player-seek .progress-bar {
  transition-duration: 0s;
}

.player-seek label {
  display: none;
}

.player-seek .slider.slider-horizontal {
  width: 100px;
}

.player-mute {
  display: inline-block;
}

.player-mute.disabled {
  display: none;
}

.player-mute .player-mute-on {
  display: none;
}

.player-mute .player-mute-off {
  display: inline-block;
}

.player-mute.active .player-mute-on {
  display: inline-block;
}

.player-mute.active .player-mute-off {
  display: none;
}

.player-volume {
  display: inline-block;
}

.player-volume.disabled {
  display: none;
}

.player-volume label {
  display: none;
}

.player-volume .slider.slider-horizontal {
  width: 80px;
}

.player-fullscreen {
  display: inline-block;
}

.player-fullscreen .player-fullscreen-on {
  display: none;
}

.player-fullscreen .player-fullscreen-off {
  display: inline-block;
}

.player-fullscreen.active .player-fullscreen-on {
  display: inline-block;
}

.player-fullscreen.active .player-fullscreen-off {
  display: none;
}

.player-wrapper {
  margin-top: 5px;
}

.player-fulldisplay {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100%;
  margin: 0;
  padding: 0;
  background: #000000;
}

.player-fulldisplay .player-wrapper {
  position: absolute;
  left: 0;
  bottom: 20px;
  right: 0;
  margin-top: 0;
  text-align: center;
}

/*
.player-fulldisplay video {
    width: 100% !important;
    max-width: 100%;
    height: 100% !important;
    max-height: 100%;
}
*/
.player-fulldisplay .player {
  display: inline-block;
  background-color: #fff;
  color: #222;
  border-radius: 5px;
  padding: 5px;
  margin: 0;
}

.player-caption-wrapper {
  display: inline-block;
}

.player-caption-wrapper .player-caption-off {
  display: none;
}

.player-caption-wrapper.active .player-caption-off {
  display: block;
}

.player-script-wrapper {
  display: inline-block;
  color: #333;
}

.player-script-wrapper .player-script-off {
  display: none;
}

.player-script-wrapper.active .player-script-off {
  display: block;
}

.player-script-scroll-check {
  position: relative;
}

.player-script-scroll-check .player-script-scroll-check-icon {
  position: absolute;
  top: 50%;
  left: 5px;
  margin-top: -0.7em;
  color: #5cb85c;
}

.player-script-scroll-check .player-script-scroll-check-icon:before {
  display: block;
  font-family: 'FontAwesome';
  color: #d9534f;
  content: "\f00d";
}

.player-script-scroll-check.active .player-script-scroll-check-icon:before {
  color: #5cb85c;
  content: "\f00c";
}

.player-fulldisplay.player-inactive {
  cursor: none;
}

.player-fulldisplay.player-inactive .player {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1.0s, opacity 1.0s;
}

.player-fulldisplay.player-inactive.player-paused .player {
  visibility: visible;
  opacity: 1;
  transition: all 0.1s;
}

.player-notime .player-time-current,
.player-notime .player-time-duration,
.player-notime .player-seek,
.player-live .player-time-duration,
.player-live .player-seek {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.player-transcript {
  display: none;
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.player-transcript-active {
  background-color: #FF6;
}

.player-transcript-seekpoint:hover {
  background: #CF6;
  cursor: pointer;
}

.player-scriptshow .player-transcript {
  display: block;
}

.player-scriptshow:-moz-full-screen video {
  width: 74% !important;
  height: auto !important;
}

.player-scriptshow:-webkit-full-screen video {
  width: 74% !important;
  height: auto !important;
}

.player-scriptshow:-ms-fullscreen video {
  position: -ms-device-fixed !important;
  width: 74% !important;
  height: auto !important;
}

.player-scriptshow:fullscreen video {
  width: 74% !important;
  height: auto !important;
}

.player-unstarted .embed-fluid:hover {
  cursor: pointer;
}

.player-unstarted .embed-fluid:after {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin-top: -35px;
  margin-left: -35px;
  padding: 2px 7px 3px;
  font-family: 'FontAwesome';
  font-size: 66px;
  line-height: 1;
  color: #fff;
  content: "\f144";
  background-color: #000;
  border-radius: 50% 50%;
  filter: alpha(opacity=75);
  opacity: 0.75;
  pointer-events: none;
}

.player-unstarted .embed-fluid:hover:after {
  filter: alpha(opacity=100);
  opacity: 1;
}

.player-description {
  background-color: #fff;
  border: 1px solid #e3e3e3;
  padding: .5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.player-description-seekpoint:hover {
  background: #CF6;
  cursor: pointer;
}

.player-describe {
  display: inline-block;
}

.player-describe.disabled {
  display: none;
}

.player-describe > .on {
  display: none;
}

.player-describe > .off {
  display: inline-block;
}

.player-describe.active > .on {
  display: inline-block;
}

.player-describe.active > .off {
  display: none;
}

.player-caption-display {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  display: block;
  padding: .25rem;
  max-width: 100%;
  font-size: .9375rem;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: .25rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.player-fulldisplay .player-caption-display {
  bottom: 5rem;
  padding: .5rem 1rem;
  font-size: 1.25rem;
}