/*------------------------------------
  Colors
------------------------------------*/

.swatch-blue {
  background-color: #1c6be1;
}
.swatch-cyan {
  background-color: #00dffc;
}
.swatch-teal {
  background-color: #21c87a;
}
.swatch-yellow {
  background-color: #ffbc42;
}
.swatch-red {
  background-color: #da4b48;
}
.swatch-purple {
  background-color: #796eff;
}

.bg-gray-100 {
  background-color: #f5f8fb;
}
.bg-gray-150 {
  background-color: #bfc3ca;
}
.bg-gray-200 {
  background-color: #8f95a0;
}
.bg-gray-300 {
  background-color: #e3e6f0;
}
.bg-gray-400 {
  background-color: #d4d7dd;
}
.bg-gray-600 {
  background-color: #8c98a4;
}
.bg-gray-700 {
  background-color: #646f79;
}

/*------------------------------------
  Header
------------------------------------*/
 .u-header.u-header--sticky-top-lg {
  z-index: 102;
}

.bg-dark .navbar-expand-lg .u-header__navbar-brand {
  border-right-color: rgba(255,255,255, .15);
}

@media (max-width: 767px) {
  .u-header__navbar-brand {
    width: 7rem;
  }
}

@media (max-width: 767px) {
  .u-icon {
    background-color: rgba(246,249,252, .1);
  }
}

.fd-header-toggle {
  line-height: 1;
  padding-right: 0;
  color: #151b26;
}

.bg-dark .fd-header-toggle {
  color: #fff;
}

/*------------------------------------
  Sidebar
------------------------------------*/
.fd-sidebar {
  order: 0;
  z-index: 100;
  top: 4.6rem;
}
@media (max-width: 767px) {
  .fd-sidebar {
    position: relative;
    top: 0;
    border-bottom: 1px solid rgba(0,0,0, .1);
    margin-bottom: 2rem;
  }
}
@media (min-width: 768px) {
  .fd-sidebar {
    padding-top: 3.6rem;
  }
}
@media (min-width: 783px) {
  .fd-sidebar {
    padding-top: 0;
  }
}
@media (min-width: 768px) {
  .fd-sidebar {
    flex: 0 1 320px;
    position: sticky;
    height: calc(100vh - 4.6rem);
    border-right: 1px solid rgba(0,0,0, .1);
  }
}

.fd-search {
  position: relative;
  padding: 1rem 15px;
  margin-right: -15px;
  margin-left: -15px;
  border-bottom: 1px solid rgba(0,0,0, .05);
}
@media (max-width: 400px) {
  .form-control {
    width: 83%;
  }
}
.fd-search__cat {
  margin-left: .35714rem;
  opacity: .3;
}

.fd-search-docs-toggle {
  line-height: 1;
  color: #212529;
}

.fd-navside {
  padding-top: 1rem;
  padding-bottom: 2rem;
  margin: 0 -15px 3rem;
}
@media (min-width: 768px) {
  .fd-navside {
    display: block !important;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
  }
}
.fd-navside__title {
  display: block;
  margin: .35rem 1.5rem;
  color: #1e2022;
  cursor: pointer;
}
.fd-navside__block.active {
  margin-bottom: 1rem;
}
.fd-navside__block.active:not(:first-child) {
  margin-top: 1rem;
}
.fd-navside__links {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.fd-navside__links > li > a {
  display: block;
  padding: .25rem 2rem;
  font-size: 90%;
  color: rgba(0,0,0, .65);
}
.fd-navside__links > li > a.active {
  color: #21c87a;
  font-weight: 500;
}
.fd-navside__links > li > a:hover {
  color: rgba(0,0,0, 1);
}
.fd-navside__links > li > a.active:hover {
  color: #21c87a;
}

/*------------------------------------
  Toc
------------------------------------*/
.fd-toc {
  position: sticky;
  top: 4.6rem;
  height: calc(100vh - 4.6rem);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  overflow-y: auto;
  order: 2;
  font-size: .875rem;
}

.fd-toc-section-nav {
  padding-left: 0;
  padding-bottom: .5rem;
  border-left: 1px solid #eee;
  margin-bottom: 0;
}

.fd-toc-entry {
  display: block;
}
.fd-toc-entry a,
.fd-toc-entry a:active {
  display: block;
  padding: .125rem 1.5rem;
  color: #8f95a0;
}
.fd-toc-entry.active > a,
.fd-toc-entry a:hover {
  color: #21c87a;
}
.fd-toc-section-nav ul {
  padding-left: 1rem;
}

/*------------------------------------
  Content
------------------------------------*/
.fd-content {
  order: 1;
  min-height: 100vh;
}

@media (min-width: 992px) {
  .fd-content > ul,
  .fd-content > ol,
  .fd-content > p {
    max-width: 90%;
  }
}

/* Lead */
@media (min-width: 576px) {
  .fd-lead {
    max-width: 90%;
    margin-bottom: 1rem;
  }
}

/* Example */
.fd-example {
  position: relative;
  padding: 1.5rem;
  margin-right: 0;
  margin-left: 0;
  border: solid #f7f7f9;
  border-width: .2rem;
}
.fd-example::after {
  content: "";
  display: block;
  clear: both;
}
@media (min-width: 576px) {
  .fd-example {
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    border-width: .2rem;
  }
}

/* Highlight & Сlipboard */
.fd-clipboard {
  position: relative;
  display: none;
  float: right;
}
@media (min-width: 768px) {
  .fd-clipboard {
    display: block;
  }
}

.highlight {
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: #f7f7f9;
}
.fd-clipboard + .highlight {
  margin-top: 0;
}
.fd-content .highlight {
  margin-right: -15px;
  margin-left: -15px;
}
@media (min-width: 576px) {
  .fd-content .highlight {
    margin-right: 0;
    margin-left: 0;
  }
}
@media (min-width: 576px) {
  .highlight {
    padding: 1.5rem;
  }
}

/* Callout */
.fd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left: .25rem solid rgb(238,238,238);
  border-radius: .25rem;
}
.fd-callout-warning {
  border-left-color: #f0ad4e;
}
.fd-callout-warning h3,
.fd-callout-warning h5 {
  color: #f0ad4e !important;
}
.fd-callout-danger {
  border-left-color: #de4437;
}
.fd-callout-danger h3 {
  color: #de4437 !important;
}
.fd-callout-info {
  border-left-color: #00dffc;
}
.fd-callout-info h4 {
  color: #00dffc !important;
}


/*------------------------------------
  AnchorJS Link
------------------------------------*/
[data-anchorjs-icon]::after {
  content: attr(data-anchorjs-icon);
}
.anchorjs-link {
  padding-left: .2rem;
  font-size: 90%;
  color: rgba(33, 200, 122, .5) !important;
  transition: color .16s linear;
  opacity: 0;
}
.anchorjs-link:hover {
  color: rgba(33, 200, 122, 1) !important;
}
h2:hover .anchorjs-link,
h3:hover .anchorjs-link {
  opacity: 1;
}

/*------------------------------------
  jQuery UI
------------------------------------*/
.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 1px;
  z-index: 9991;
}
.ui-autocomplete .left {
  float: left;
}
.ui-autocomplete .right {
  float: right;
}
.ui-autocomplete .ui-menu-item {
  padding: 0;
}
.ui-autocomplete .ui-menu-item-wrapper {
  display: block;
  color: inherit;
  background-color: transparent;
  border-color: transparent;
  padding: 7px 15px;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active, .ui-autocomplete .ui-menu-item-wrapper:hover {
  color: #fff;
  background-color: #21c87a;
  text-decoration: none;
}
.ui-autocomplete .ui-menu-item:hover {
  color: #fff;
  background-color: #21c87a;
}
.ui-autocomplete .ui-menu-item:hover .ui-menu-item-wrapper {
  background-color: transparent;
  border-color: transparent;
}
.ui-autocomplete-category {
  padding: 5px 15px;
  margin: 0;
  font-weight: bold;
}
.jvectormap-container {
  width: 100%;
  height: 100%;
}

/*------------------------------------
  Markup
------------------------------------*/
.code-toolbar {
  position: relative
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  padding: 1.5rem;
  background: #f7f7f9;
}
code[class*="language-"],
pre[class*="language-"] {
  color: #212529;
  text-shadow: none;
  white-space: pre-wrap;
}
.token.punctuation,
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #2f6f9f;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #4f9fcf;
}
.token.atrule,
.token.attr-value,
.token.function {
  color: #d44950;
}

div.code-toolbar > .toolbar {
  top: 10px;
  right: 10px;
  opacity: 1;
}
div.code-toolbar > .toolbar a {
  padding: .3rem .7rem !important;
  color: inherit;
  background-color: transparent;
  box-shadow: none;
  transition: all .2s ease-in-out;
}
div.code-toolbar > .toolbar a:hover {
  background-color: #21c87a;
  color: #fff !important;
}
/* div.code-toolbar > .toolbar a::before {
  content: "Copy to clipboard";
  position: absolute;
  bottom: 100%;
  right: 0;
  padding: 3px 7px;
  margin-bottom: 5px;
  background-color: rgba(0,0,0, .8);
  white-space: nowrap;
  font: 13px Arial, sans-serif;
  color: #fff;
  border-radius: 3px;
  transition: all .4s ease-in-out;
  opacity: 0;
}
div.code-toolbar > .toolbar a:hover::before {
  opacity: 1;
} */

.navbar-expand .u-header__sub-menu {
  border-left: none;
}

/*------------------------------------
  Tables
------------------------------------*/
/*.fd-content > table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
}

@media (max-width:991.98px) {
  .fd-content > table {
    display: block;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .fd-content > table.table-bordered {
    border: 0;
  }
}

.fd-content > table > tbody > tr > td,
.fd-content > table > tbody > tr > th,
.fd-content > table > tfoot > tr > td,
.fd-content > table > tfoot > tr > th,
.fd-content > table > thead > tr > td,
.fd-content > table > thead > tr > th {
  padding: .75rem;
  vertical-align: top;
  border: 1px solid #dee2e6;
}

.fd-content > table > tbody > tr > td {
  color: #8f95a0;
}

.fd-content > table > tbody > tr > td > p:last-child,
.fd-content > table > tbody > tr > th > p:last-child,
.fd-content > table > tfoot > tr > td > p:last-child,
.fd-content > table > tfoot > tr > th > p:last-child,
.fd-content > table > thead > tr > td > p:last-child,
.fd-content > table > thead > tr > th > p:last-child {
  margin-bottom: 0;
}

.fd-content > table td:first-child > code {
  white-space: nowrap;
}

.fd-example-type .table .type-info {
  color: #999;
  vertical-align: middle;
}

.fd-example-type .table td {
  padding: 1rem 0;
  border-color: #eee;
}

.fd-example-type .table tr:first-child td {
    border-top: 0;
}*/

/*------------------------------------
  Example Type
------------------------------------*/

.fd-example-type h1,
.fd-example-type h2,
.fd-example-type h3,
.fd-example-type h4,
.fd-example-type h5,
.fd-example-type h6 {
  margin-top: 0;
  margin-bottom: 0;
}

/*------------------------------------
  Offsetting between blocks
------------------------------------*/

.fd-example > .form-control + .form-control {
  margin-top: .5rem;
}

.fd-example > .alert + .alert,
.fd-example > .nav + .nav,
.fd-example > .navbar + .navbar,
.fd-example > .progress + .btn,
.fd-example > .progress + .progress {
  margin-top: 1rem;
}

/*------------------------------------
  Scroll Nav Example
------------------------------------*/

.scroll-nav-example {
  position: relative;
  height: 200px;
  margin-top: .5rem;
  overflow: auto;
}

/*------------------------------------
  Fullscreen
------------------------------------*/

.u-fullscreen {
  z-index: 103;
}

/*------------------------------------
  Search Classic
------------------------------------*/

.u-search-classic[aria-labelledby] {
  opacity: 0;
}

.u-search-classic[aria-labelledby][role="tabpanel"] {
  opacity: 1;
}

.u-search-classic[aria-labelledby].u-unfold--css-animation,
.u-search-classic[aria-labelledby].u-unfold--jquery-slide {
  opacity: 1;
}

.u-search-classic.u-unfold--css-animation.u-unfold--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}