/* Document
 * ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
 * ========================================================================== */

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 * 3. Show the overflow in Edge 18- and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  color: inherit; /* 2 */
  height: 0; /* 1 */
  overflow: visible; /* 3 */
}

/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */

/**
 * 1. Correct table border color inheritance in all Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */

table {
  border-color: inherit; /* 1 */
  text-indent: 0; /* 2 */
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

button,
input,
select {
  margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */

button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Show the overflow in Edge 18- and IE.
 */

input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 */

textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:-moz-ui-invalid {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct display in Edge 18- and IE.
 */

details {
  display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* User interaction
 * ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

@charset "UTF-8";
@keyframes mobile-animate-in {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: scaleY(-1) translateY(0px);
  }
}
@keyframes mobile-animate-out {
  0% {
    transform: scaleY(-1) translateY(0px);
  }
  50% {
    transform: scaleY(-1) translateY(-20px);
  }
  100% {
    transform: scaleY(1) translateY(0px);
  }
}
.sidebar {
  flex-shrink: 0;
  width: 270px;
  background-color: #F9F9F9;
  z-index: 1000;
}
.sidebar .mobile-nav {
  display: none;
}
.sidebar .mobile-nav nav {
  flex-direction: column;
  align-items: start;
  padding: 0;
  border: none;
  margin-bottom: 10px;
}
.sidebar .mobile-nav nav .navbar-brand {
  display: none;
}
.sidebar .mobile-nav nav .navbar-links {
  flex-direction: column;
  align-items: start;
  margin-bottom: 14px;
}
.sidebar .mobile-nav nav .nav-item {
  padding: 5px 0;
}
.sidebar .mobile-nav nav .navbar-next-steps {
  width: 100%;
}
.sidebar .mobile-nav nav .navbar-next-steps > :first-child {
  flex: 1;
}
.sidebar .mobile-header {
  display: none;
}
.sidebar .page-heading {
  margin-left: 10px;
  font-weight: bold;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sidebar .page-heading p {
  margin: 0;
  line-height: 1.3em;
  color: #5A5A5A;
}
.sidebar .page-heading .breadcrumbs {
  flex: 1;
  padding: 0;
  display: flex;
  font-size: 0.7em;
}
.sidebar .page-heading .breadcrumbs a, .sidebar .page-heading .breadcrumbs span {
  color: #aaaaaa;
}
.sidebar .page-heading .breadcrumbs > * {
  margin: 0 5px;
}
.sidebar .page-heading .breadcrumbs > *:first-child {
  margin-left: 0;
}
.sidebar .page-heading .breadcrumbs > *:last-child {
  margin-right: 0;
}
.sidebar .page-heading a {
  font-size: inherit;
}
.sidebar .search {
  position: relative;
  margin-bottom: 15px;
}
.sidebar .sidebar-wrap {
  top: 10px;
  max-height: calc(100vh - 20px);
  position: sticky;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar .search-load-area {
  margin-right: 10px;
}
.sidebar a {
  color: #434343;
  display: flex;
  align-items: center;
}
.sidebar h2 {
  font-size: 0.7em;
  color: #D5D5D5;
  margin-top: 17px;
  margin-bottom: 5px;
}
.sidebar h2 > a {
  color: inherit;
  font-size: inherit;
}
.sidebar .sidebar-wrap > h2:first-child {
  margin-top: 0px;
}

.sidebar-back {
  display: flex;
  margin-bottom: 20px;
  margin-top: 10px;
  margin-left: -17px;
}
.sidebar-back svg {
  color: #ccc;
  margin-right: 2px;
}

.sidebar-content {
  padding: 15px;
}

.sidebar-groups {
  margin-left: 15px;
}

.sidebar-items {
  margin-bottom: 20px;
}
.sidebar-items.hidden {
  margin-bottom: 0px;
}

.sidebar-items:last-child {
  padding-bottom: 20px;
}

.sidebar-item {
  padding: 5px 0;
}
.sidebar-item img {
  margin-right: 4px;
  width: 16px;
}
.sidebar-item .root-link {
  display: flex;
}
.sidebar-item .root-link > a {
  flex: 1;
}
.sidebar-item .toggler {
  width: 15px;
  margin-right: 5px;
  margin-left: -20px;
  transition: transform 0.3s;
  align-items: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.sidebar-item .toggler svg {
  width: 10px;
  fill: #ccc;
  transform: rotate(-90deg);
}
.sidebar-item.selected .root-link a {
  pointer-events: none;
  font-weight: 900;
}
.sidebar-item.toggled .toggler svg {
  transform: rotate(0deg);
}
.sidebar-item:not(.toggled) .sidebar-sub-items.loaded {
  height: 0px !important;
}
.sidebar-item.level-2 a {
  margin-left: 8px;
  font-size: 14px;
  line-height: 1.2em;
  color: #8E8E8E;
}

.sidebar-sub-items {
  overflow: hidden;
  padding-left: 8px;
  transition: height 0.3s;
}
.sidebar-sub-items .sidebar-sub-item:first-child {
  padding-top: 8px;
}
.sidebar-sub-items .level-2 a {
  padding-left: 10px;
  border-left: 1px solid #eee;
}

.sidebar-sub-item a {
  font-size: 0.9em;
  line-height: 1.2em;
  padding: 5px 0;
  color: #8E8E8E;
}

.extra-info {
  flex: 0.5;
  padding: 20px;
}
.extra-info .github-area {
  display: flex;
  padding: 10px;
  align-items: center;
  background-color: #f3f3f3;
  border-radius: 20px;
  box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px 0px;
}
.extra-info .lib-repo {
  flex: 1;
  padding-left: 3px;
}
.extra-info .lib-version {
  flex: 0;
  background-color: #ae4931;
  padding: 4px 8px;
  color: white;
  border-radius: 10px;
}

@media (max-width: 666px) {
  .search {
    display: none;
  }
  .sidebar {
    width: 100%;
    overflow: hidden;
    height: 60px;
    position: fixed;
    transition: height 0.25s;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
  }
  .sidebar .sidebar-wrap {
    max-height: 100%;
  }
  .sidebar .expand-area {
    transform: scaleY(1);
    transition: 0.3s ease-out;
    width: 35px;
  }
  .sidebar .mobile-header {
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
    background-color: #F9F9F9;
    display: flex;
    padding: 0 10px;
    align-items: center;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 60px;
    z-index: 1000;
  }
  .sidebar .mobile-nav {
    display: flex;
  }
  .sidebar .mobile-nav nav {
    display: flex;
  }
  .expanded .sidebar {
    height: 100vh;
    padding-bottom: 40px;
    box-shadow: 0px 10px 40px rgb(0, 0, 0);
  }
  .expanded .content-wrap {
    touch-action: none;
    overflow: hidden;
  }
  .sidebar-content {
    margin-top: 35px;
    width: 100%;
    font-size: 1.2em;
  }
  .sidebar-groups {
    margin-left: 25px;
    padding-bottom: 60px;
  }
  .sidebar-item .toggler {
    width: 25px;
    height: 27px;
    margin-left: -30px;
  }
  .sidebar-item .toggler svg {
    width: 0.65em;
  }
}
/*! zenburn syntax highlighting - from http://userstyles.org/styles/88895/github-zenburn */
.highlight, .highlight pre, .highlight table {
  background: #383838 !important;
  color: #656555 !important;
}

.highlight .hll {
  background-color: #656555 !important;
}

.highlight .err {
  color: #f0dfaf !important;
  background-color: #6f6f6f !important;
}

.highlight .cs {
  color: #dca3a3 !important;
  background-color: #8c5353 !important;
}

.highlight .nf {
  color: #93e0e3 !important;
}

.highlight .c, .highlight .cm, .highlight .c1 {
  color: #5c888b !important;
}

.highlight .g, .highlight .l, .highlight .x, .highlight .ge, .highlight .gs, .highlight .ld, .highlight .ni,
.highlight .nl, .highlight .nx, .highlight .py, .highlight .n, .highlight .go,
.highlight .h {
  color: #6ca0a3 !important;
}

.highlight .k {
  color: #f0dfaf !important;
}

.highlight .s1 {
  color: #bc8383 !important;
}

.highlight .nb, .highlight .bp {
  color: #8cd0d3 !important;
}

.highlight .nc, .highlight .nn {
  color: #7cb8bb !important;
}

.highlight .o, .highlight .p, .highlight .na, .highlight .ne {
  color: #dcdccc !important;
}

.highlight .gp, .highlight .w, .highlight .gh, .highlight .gu {
  color: #656555 !important;
}

.highlight .cp, .highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .se,
.highlight .sh, .highlight .si, .highlight .ss, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp,
.highlight .kr, .highlight .kt, .highlight .nt, .highlight .ow {
  color: #8fb28f !important;
}

.highlight .gr, .highlight .gt, .highlight .m, .highlight .mf, .highlight .mh, .highlight .mi,
.highlight .mo, .highlight .sr, .highlight .il {
  color: #9c6363 !important;
}

.highlight .no, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .nd,
.highlight .sx {
  color: #dfaf8f !important;
}

.source-header {
  background: #5f5e5e;
  color: #b1b1b1;
  display: flex;
  padding: 5px 14px;
  font-size: 0.8em;
  border-radius: 5px 5px 0px 0px;
  align-items: center;
}
.source-header .lang {
  flex: 1;
}

.highlight {
  display: block;
  padding: 15px;
  position: relative;
  border-radius: 0px 0px 5px 5px;
}

.clipboard {
  width: 20px;
  height: 20px;
  background: url(/images/clipboard-5ae0b4b1.svg);
  margin-left: 10px;
  stroke: #b1b1b1;
  cursor: pointer;
}

div.highlight {
  overflow-x: auto;
}

code {
  background: #FDF8F5;
  color: black;
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-weight: 500;
  font-size: 0.9em;
}
.highlight > code {
  color: beige;
  background: transparent;
  padding: 0;
}

.highlight > code {
  white-space: pre;
}

.code-source {
  padding: 5px 5px 0px;
  color: rgba(255, 255, 255, 0.6392156863);
  font-size: 0.8em;
}

@media (max-width: 666px) {
  div.highlight-wrap {
    margin: 0 !important;
  }
  div.highlight-wrap .highlight, div.highlight-wrap .source-header {
    padding-left: 15px;
    border-radius: 0px !important;
  }
  div.highlight-wrap .source-header {
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 0;
  }
}
.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

.tippy-box {
  position: relative;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  outline: 0;
  transition-property: transform, visibility, opacity;
}

.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333;
}

.tippy-arrow:before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.tippy-content {
  position: relative;
  padding: 5px 9px;
  z-index: 1;
}

.aa-DetachedOverlay {
  z-index: 1000 !important;
}

.aa-DetachedFormContainer {
  height: 60px;
  display: flex;
  align-items: center;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

.aa-DetachedCancelButton {
  height: 100%;
}

.aa-PanelLayout {
  padding: 0 !important;
}

.aa-Form:focus-within {
  border-color: #cb6047 !important;
}

.aa-Item {
  padding: 5px 10px !important;
}
.aa-Item .aa-ItemIcon {
  display: none;
}

* {
  box-sizing: border-box;
}

html, input {
  font-family: "Lato", sans-serif;
  font-display: optional;
}

html, body, .root {
  height: 100%;
}

body {
  margin: 0;
  touch-action: pan-y;
}

a {
  color: #cb6047;
  text-decoration: none;
}
a:hover {
  color: #ef9c89;
}

p {
  color: #808080;
  line-height: 28px;
}

br.clearer {
  clear: both;
}

strong {
  color: #5A5A5A;
}

h1 {
  margin-top: 0px;
  padding-top: 30px;
}
h1 + small {
  margin-top: -10px;
  display: block;
  font-size: 1em;
}

img.narrow {
  width: 50%;
}

.root {
  display: flex;
  flex-direction: column;
}

footer {
  text-align: center;
  color: #b3b3b3;
  clear: left;
  padding-top: 60px;
}
footer a {
  color: #b3b3b3;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "“" "”" "‘" "’";
}
blockquote p {
  margin: 0;
}

nav {
  width: 100%;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ededed;
}
nav .navbar-brand {
  width: 255px;
}
nav .navbar-links, nav .navbar-next-steps {
  display: flex;
  align-items: center;
}
nav .navbar-links {
  flex: 1;
}
nav .navbar-next-steps {
  padding-right: 30px;
}
nav .nav-item {
  padding: 0.8rem 0.5rem;
}
nav .cta-nav {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  color: #fff;
  background-color: #65a9a4;
  border-color: #65a9a4;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
nav a {
  color: #828282;
}
nav .active {
  border-bottom: 3px solid #ea5937;
  margin-bottom: -3px;
}
nav .active a {
  color: black;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.prop-list {
  border-bottom: 1px solid #e6e6e6;
}
.prop-list dt {
  border-top: 1px solid #e6e6e6;
  margin-left: -5px;
  padding-top: 20px;
  padding-bottom: 5px;
}
.prop-list dt code {
  background-color: transparent;
  border: none;
  font-weight: bold;
}
.prop-list dd {
  color: #808080;
  margin: 0;
  padding-bottom: 20px;
  line-height: 28px;
}

article {
  display: flex;
  flex: 1;
}
article.loading .content {
  transition: opacity 0.5s;
  opacity: 0.3;
}
article.loading .loader {
  animation: appear 0.3s ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
}

.panel {
  border-radius: 0.375rem;
  padding: 1rem;
}
.panel .panel-content {
  display: flex;
}
.panel .icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 3px;
}
.panel .panel-text {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.panel .panel-text p {
  margin: 0;
  margin-left: 5px;
}
.panel.info {
  background-color: rgb(239, 246, 255);
}
.panel.info .icon {
  background-color: rgb(96, 165, 250);
  -webkit-mask-image: url(/images/icons/info-4ce302f0.svg);
  mask-image: url(/images/icons/info-4ce302f0.svg);
}
.panel.info .panel-text p, .panel.info .panel-text strong {
  color: rgb(29, 78, 216);
}
.panel.success {
  background-color: rgb(236, 253, 245);
}
.panel.success .icon {
  background-color: rgb(52, 211, 153);
  -webkit-mask-image: url(/images/icons/success-1e32330d.svg);
  mask-image: url(/images/icons/success-1e32330d.svg);
}
.panel.success .panel-text p, .panel.success .panel-text strong {
  color: rgb(4, 120, 87);
}

.more-info .content {
  position: sticky;
  top: 10px;
}

.content-wrap {
  flex: 1 0 0;
  width: 1px;
  padding-bottom: 40px;
}

.breadcrumbs {
  padding: 20px 0;
  padding-bottom: 15px;
  padding-left: 30px;
  color: #5D5D5D;
  font-weight: 700;
  max-width: 780px;
}
.breadcrumbs a, .breadcrumbs span {
  color: #909090;
}
.breadcrumbs img {
  margin-right: 4px;
  margin-left: 3px;
}

.content {
  max-width: 900px;
}
.content.with-package-info {
  max-width: unset;
}
.content > * {
  margin-left: 30px;
  margin-right: 30px;
}
.content > h4, .content > h3, .content > h2 {
  padding-top: 20px;
}
.content > h4 a, .content > h3 a, .content > h2 a {
  float: left;
  padding-right: 4px;
  margin-top: 3px;
  margin-left: -20px;
  line-height: 1;
}
.content > h4 .anchor, .content > h3 .anchor, .content > h2 .anchor {
  fill: #aaa;
  visibility: hidden;
}
.content > h4:hover .anchor, .content > h3:hover .anchor, .content > h2:hover .anchor {
  visibility: visible;
}
.content .content-body {
  display: flex;
  flex-wrap: wrap-reverse;
}
.content .content-body .content-left {
  max-width: 900px;
}
.content .content-body .content-right {
  max-width: 200px;
}
.content .content-body .content-right .package-info {
  border: 1px solid #ededed;
  border-radius: 3px;
  padding: 1px 5px;
}
.content .content-body .content-right .package-info p {
  line-height: 16px;
  font-size: small;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content .content-body .content-right .package-info span {
  padding-left: 5px;
  color: #ea5937;
}
.content table {
  width: 100%;
  border-radius: 5px;
  border-collapse: collapse;
}
.content table td {
  padding: 10px;
  color: #5a5a5a;
}
.content table td:first-child {
  white-space: nowrap;
}
.content table tr:nth-child(2n) {
  background-color: #f0f0f0;
}
.content table th {
  text-align: left;
  padding: 10px;
  min-width: 70px;
  color: #5d5d5d;
  border-bottom: 1px solid #ddd;
}
.content table code {
  overflow-wrap: anywhere;
}
.content p > img {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-left: -5px;
  width: calc(100% + 5px);
}
.content p > img[alt=Deploy] {
  width: initial;
}
.content ul {
  padding-left: 25px;
}
.content li {
  line-height: 1.5em;
  padding: 3px;
  color: #676767;
}
.content li::marker {
  color: #333;
}
.content hr {
  border: 1px solid #ececec;
}
.content h2 {
  padding-top: 1.2rem;
}
.content img[src="/images/screenshots/check_ins-23739335.png"] {
  width: 100%;
}
.content .floating-right {
  float: right;
  margin-left: 30px;
  margin-bottom: 20px;
  width: 50%;
}
.content .floating-left {
  float: left;
  width: 50%;
  margin-bottom: 20px;
  margin-right: 30px;
}
.content p > img.no-shadow {
  box-shadow: none;
}

.api .content table {
  margin: 30px 0px;
}
.api .content table thead {
  display: none;
}
.api .content table br {
  display: block;
  padding-top: 10px;
}
.api .content table tr {
  flex-wrap: wrap;
  display: flex;
  padding: 20px 0;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  align-items: baseline;
}
.api .content table tr td {
  margin: 0;
  padding: 0;
}
.api .content table tr td:first-child {
  font-weight: bold;
  margin-right: 5px;
}
.api .content table tr td:nth-child(2) {
  color: #9a9a9a;
  font-size: 0.8em;
}
.api .content table tr td:last-child {
  flex-basis: 100%;
  color: #9a9a9a;
  margin-top: 8px;
  font-size: 0.9em;
  line-height: 1.5em;
}
.api .content table tr td:last-child:empty {
  display: none;
}
.api .content table tr:last-child {
  border-bottom: 1px solid #e6e6e6;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-gap: 10px;
  margin-left: 20px;
  margin-right: 20px;
}
.cards .column {
  display: flex;
  align-items: center;
}
.cards .column .icon {
  margin-right: 10px;
}
.cards.side-by-side {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.cards .heading {
  font-weight: bold;
  color: black;
}
.cards .description {
  margin-top: 5px;
  color: #aaa;
  font-size: 0.8em;
}
.cards .url {
  margin-top: 10px;
}
.cards a {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 15px;
  background-color: #fff;
  border-radius: 10px;
}
.cards .icon {
  display: block;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.loader {
  position: fixed;
  display: flex;
  opacity: 0;
  width: 100%;
  z-index: 100;
  top: 200px;
  justify-content: center;
  padding-left: 230px;
  pointer-events: none;
}
.loader svg {
  background: rgba(255, 255, 255, 0.9);
  width: 90px;
  height: 90px;
  border-radius: 50px;
}
.loader #bolt {
  animation: pulse 4s ease-in-out infinite;
  animation-delay: 0.6s;
  transform-origin: center;
}
.loader #edges {
  animation: pulse 4s ease-in-out infinite;
  transform-origin: center;
}

@media (min-width: 1660px) {
  .content .content-body .content-right {
    max-width: 300px;
  }
}
@media (min-width: 666px) {
  nav {
    height: 65px;
  }
}
@media (max-width: 1024px) {
  .extra-info {
    display: none;
  }
}
@media (max-width: 666px) {
  .content .floating-right, .content .floating-left {
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .content img {
    margin: 0;
    width: 100%;
  }
  .content h2 a.anchor, .content h3 a.anchor {
    visibility: visible;
    display: inline;
    float: none;
    margin-left: 0;
  }
  .loader {
    padding-left: 0px;
  }
  .cards {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
  }
  .content-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    margin-top: 60px;
    padding-bottom: 100px;
  }
  .content > * {
    margin-left: 15px;
    margin-right: 15px;
  }
  .breadcrumbs {
    padding-left: 15px;
  }
  nav {
    display: none;
  }
  article {
    flex-direction: column;
  }
  body:not(.api) .content > .table-wrap {
    margin: 0;
    min-width: 100%;
    max-width: 100%;
    padding-top: 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  body:not(.api) .content > .table-wrap td {
    font-weight: bold;
    padding: 5px 10px;
  }
  body:not(.api) .content > .table-wrap td:before {
    content: attr(data-header) ": ";
    width: 100%;
    display: inline-block;
    font-size: 0.8em;
    color: #b9b9b9;
    margin-bottom: 0.4em;
  }
  body:not(.api) .content > .table-wrap thead {
    display: none;
  }
  body:not(.api) .content > .table-wrap tbody tr:first-child {
    padding-top: 0px;
  }
  body:not(.api) .content > .table-wrap tr {
    display: flex;
    flex-direction: column;
    padding: 10px 5px;
  }
}
@media (max-width: 1430px) {
  .content .content-body .content-right {
    max-width: 900px;
    width: 900px;
  }
}
.highlight [data-config-target] {
  background-color: #666;
  color: beige;
}