.docs-topbar{
  background-color: #f7f9fc;
  height:110px;
  border-bottom: 1px solid #eeeeee;
  box-shadow: unset;
  align-items: start;
  flex-direction: column;
}

.flex-h.topbar-line-1 {
    height: 65px;
    width: 100%;
}

.flex-h.topbar-line-2 {
    height: 45px;
    width: 100%;
}
.flex-h.topbar-line-1 {
    height: 65px;
    width: 100%;
    align-items: center;
}

.flex-h.topbar-line-2 {
    height: 45px;
    width: 100%;
}

.docs-topbar .header-menu {
    margin-left: 24px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: proportional-nums;
}

.docs-topbar .header-box {
    padding-top: 8px;
    padding-bottom: 8px;
}

.header-box {}

a * {text-decoration: none;color: rgb(60 65 87);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Ubuntu";}

.header-menu .header-menu-item {
    padding-right: 20px;
}

.logo-section h2 {
    margin-left: 20px;
    font-weight: 500;
}

.logo-section img {
    height: 26px;
}

.docs-topbar .logo-section {
    margin-left: 24px;
    align-items: center;
}

input {}

.topbar-line-1input {}

.docs-topbar .searchbox {
    margin-left: 43px;
    height: 35px;
}

input[search] {
    padding: 10px 20px 10px 40px;
}

.flex-h.topbar-line-1 {
    height: 65px;
    width: 100%;
    align-items: center;
}

.flex-h.topbar-line-2 {
    height: 45px;
    width: 100%;
}

.docs-topbar .header-menu {
    margin-left: 24px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: proportional-nums;
}

.docs-topbar .header-box {
    padding-top: 8px;
    padding-bottom: 8px;
}

.header-box {}

a * {text-decoration: none;color: rgb(60 65 87);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Ubuntu";}

.header-menu .header-menu-item {
    padding-right: 20px;
}

.logo-section h2 {
    margin-left: 20px;
    font-weight: 500;
}

.logo-section img {
    height: 26px;
}

.docs-topbar .logo-section {
    margin-left: 45px;
    margin-right: 13px;
    align-items: center;
}

input {}

.topbar-line-1input {}

.docs-topbar .searchbox {
    margin-left: 43px;
    height: 35px;
}

.input-box input[search] {
    padding: 10px 20px 10px 40px;
}

.input-box:has([search]):before {
    color: rgb(60 65 87);
    font-family: var(--fa-style-family,"Font Awesome 6 Free");
    font-weight: var(--fa-style,900);
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    content: "\f002";
    position: absolute;
    left: 14px;
    font-size: 12px;
    top: 50%;
    transform: translate(0, -50%);
}

.input-box {
    position: relative;
}

.input-box ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(60 65 87 / 51%);
  opacity: 1; /* Firefox */
}

.input-box :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgb(60 65 87 / 51%);
}

.input-box ::-ms-input-placeholder { /* Microsoft Edge */
  color: rgb(60 65 87 / 51%);
}

.searchbox .input-box {
  width: 300px;
}

.input-box input {
  width: -webkit-fill-available;
  width: 100%;
}

.primary-container-shell {
  width: 100%;
  height: calc(100% - 110px);
  overflow:
  hidden;
  display: flex;
}

article h1, .title{
  font-size: 32px;
  color: black;
  font-weight: 700 !important;
  margin: 0;
  padding: 0;
}

.primary-container-shell .article-content-container {
    width: calc(100vw - 0px);
    display: flex;
    justify-content: center;
    flex: 1;
    overflow-y: scroll;
}

.article-content-container .content-container {
    max-width: 1175px;
    width: 100%;
}

.content-container article {
}

.article-title-box {
    padding-top: 20px;
}

.article-title-box .sub-title {
    font-size: 20px;
    padding-top: 20px;
}


.primary-container-shell.sidebar-open .sidebar {
    display: block;
    width: 300px;
    height: 100%;
    box-shadow: inset -1px 0 #e3e8ee;
    position: relative;
}

.sidebar .sidebar-content {
    padding-top: 20px;
    padding-left: 12px;
    padding-right: 12px;
    height: 100%;
}

button[regular]:hover {
    box-shadow: unset;
    background-color: unset;
}

button {}

button[regular] {
    font-weight: 500;
    font-size: 14px;
    padding-left: 12px;
    text-align: left;
    text-overflow: ellipsis;
    height: auto;
    padding-top: 7px;
    padding-bottom: 7px;
}

button[regular]:focus-visible {
    outline: none;
}

button[regular]:focus {
    box-shadow: none;
}

.flex-h.sidebar-button-item.sidebar-button-active button {
    color: #6d6df4 !important;
    font-weight: bold;
}

article h1, article h2, article h3, article h4 {
    margin-left: unset;
    font-weight: revert;
}

article h1:first-of-type {
    padding-top: 20px;
}

article hr {
    margin-top: 30px;
    margin-bottom: 50px;
    border-top: 1px solid #eaeaea;
    border-bottom: unset;
}

ul {
    font-weight: revert;
    list-style: revert;
    padding: revert;
    margin: revert;
}

.side-by-side {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

@screen and (max-width: 1000px){
  .side-by-side {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
.side-by-side .right {
    padding-left: 3rem;
}

.side-by-side .column{
    overflow: auto;
    padding-top: var(--default-vertical-spacing);
}

.side-by-side .left{
    padding-right: 3rem;
    border-right: 1px solid var(--toc-border);
}

.image-card {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sail-color-gray-100);
}

.image-card .card-image {
  margin-bottom: 20px;
  transition: box-shadow 0.2s ease-in-out;
  border-radius: 5px !important;
  overflow: hidden;
}

.image-card .card-image:hover {
  box-shadow: var(--card-hover-shadow);
}

.image-card .card-image img {
  object-fit: cover;
  width: 100%;
  display: block;
  min-height: 116px;
  height: 116px;
  border-radius: var(--card-border-radius);
}

@media (max-width: 1150px) {
  .ImageCard .Card-footer {
    // Hide product badges for image cards
    display: none;
  }
}

@media (max-width: 750px) {
  .Card .Card-image {
    display: none;
  }
}

.card-group{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 33%));
  grid-gap: 20px;
  margin-top: 20px;
}

article .image-card h2 {
    color: #5469d4;
}

article .image-card p {
    font-weight: 300;
    font-size: 14px;
    padding-top: 7px;
}

article>h2:first-of-type {
    padding-bottom: 20px;
    margin-top: 7px;
}

img.aside-image {
    word-wrap: break-word;
    margin-left: 20px;
    padding: 16px;
    border: 0;
    margin-top: 12px;
    margin-bottom: 12px;
    float: right;
}

.image-wrapper.aside-image-wrapper{
    word-wrap: break-word;
    text-align: center;
    box-sizing: border-box;
    text-align: center;
}

* {
    word-wrap: break-word;
}

article p {
    font-weight: revert;
    position: revert;
    margin: revert;
}

.link-card.flex.column {
    padding: 18px;
    border: 1px solid #e3e8ee;
    border-radius: 4px;
    transition: box-shadow .2s ease-in-out;
    cursor: pointer !important;
}

.link-card:hover {
    box-shadow: 0 0 0 1px rgba(50, 50, 93, 0.01), 0 7px 14px 0 rgba(50, 50, 93, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.02);
}

.link-card h3 {
    margin-top: 0px;
}

.link-card p {
    margin-bottom: 0px;
}

.link-card * {
    pointer: cursor;
}

.image-wrapper {
    padding-top: 30px;
    text-align: center;
}

.image-wrapper p {
    font-size: 12px;
    color: #585858;
}

article>h2:not(article>h2:first-of-type) {
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: unset;
}

.image-wrapper img {
    border-radius: 10px;
}

.article-content-container .right-box {
    width: 250px;
    display: block;
    position: sticky;
    top: 52px;
    padding-left: 50px;
    padding-right: 15px;
    flex: none;
    max-height: 600px;
    height: 100%;
}

.content-container .article-flex-box {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 25px;
    display: flex;
    position: relative;
}

span.table-of-contents-header {
    font-weight: 500;
    font-size: 13px;
}

.table-of-contents-item {padding: 10px 10px 10px 0px;cursor: pointer;font-size: 14px;}

.table-of-contents-list {
    margin-top: 5px;
    flex-direction: column;
}

@media screen and (max-width: 1200px) {
  .article-content-container .right-box {
    display: none;
  }
}

.flex-h.sidebar-folder-item:before {
}

.sidebar-folder-item .angle {
    color: gray;
    line-height: 5px;
    width: 7px;
    margin-left: 7px;
    transform: rotate(0deg);
    transition: transform 100ms ease-in;
}

.angle svg {
    color: #888888;
    background-color: white;
    fill: currentcolor;
}

.sidebar-folder-item {
    align-items: center;
}

.sidebar-button-item {
    margin-left: 10px;
}

.sidebar-folder-item button[regular] {
    padding-left: 8px;
}

.sidebar-folder-item .folder-list {
    padding-left: 20px;
}

.sidebar-folder .folder-list {
    padding-left: 20px;
}

.sidebar-folder .folder-list {
    padding-left: 5px;
    border-left: 1px dotted;
    margin-left: 11px;
    transition: max-height 200ms linear;
    max-height: 400px;
    overflow: hidden;
}

.sidebar-button-item button {
    font-weight: 300;
    color: #616161 !important;
}

.sidebar-folder-active button[regular] {
    color: black;
    font-weight: bold;
}

.sidebar-folder:not(.sidebar-folder-open) .sidebar-folder-item .angle {
    transform: rotate(-90deg);
}

.sidebar-folder:not(.sidebar-folder-open) .folder-list {
    max-height: 0 !important;
}

.folder-list .sidebar-button-item {
}

.folder-list .sidebar-button-item button[regular] {}

a.header-menu-item.active span {
    color: #4646e2;
    font-weight: bold;
}

.content-skeleton-wrapper {
  position: absolute;
  background-color: white;
  min-height: 350px;
  height:100%;
  z-index: 10;
  width: calc(100% - 100px);
}

.content-skeleton {
  animation-name: content-skeleton-animation;
  animation-delay: 20ms;
  animation-duration: 150ms;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  position: absolute;
  background-color: white;
  min-height: 350px;
  height:100%;
  z-index: 10;
  width: 100%;
  opacity:0;
  margin-top:30px;
}

.content-skeleton-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: transparent;
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation-name: content-skeleton-overlay-animation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  height: 100%;
  width: 100%;
}

@media (max-width: 800px) {
  .content-skeleton-header,
  .content-skeleton-subheader {
    display: none;
  }
}

@keyframes content-skeleton-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes content-skeleton-overlay-animation {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.content-skeleton-header {
    margin-top: 8px;
}

.content-skeleton-subheader {
    margin-top: 10px;
    margin-bottom: 50px;
}

.content-skeleton *:not(.content-skeleton-overlay, .box-a, .box-b) {
    background-color: #e3e8ee;
}

.Box-root.Margin-bottom--24 {}

.content-skeleton .box-a, .content-skeleton .box-b {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
}

.box-a>*, .box-b>* {
    margin-bottom: 8px;
}

.image-wrapper:not(.aside-image-wrapper) img {
    text-align: center;
}

.image-wrapper.aside-image-wrapper.image-aside-right img {
    float: right;
}

.image-wrapper.aside-image-wrapper.image-aside-left img {
    float: left;
}

.image-aside-left img.aside-image {
    margin-left: 0;
    margin-right: 20px;
    padding-left: 0px;
}

.image-wrapper.inline-image-wrapper {
    padding-top: 0px;
}

.image-wrapper.inline-image-wrapper.inline-float-left .inline-image {
    margin-right: 20px;
    margin-bottom: 20px;
}

.image-wrapper.inline-image-wrapper.inline-float-right .inline-image {
    margin-left: 20px;
    margin-bottom: 20px;
}

article a {
    color: #7878d0;
    font-weight: 600;
}

td .image-wrapper img {
    border-radius: unset;
}

.image-wrapper img.image.shadow {
    filter: drop-shadow(2px 4px 9px #00000024);
    background-color: #00000024;
}


.callout {
    margin-bottom: 12px;
    margin-top: 20px;
    margin: 0 1px;
    border-radius: 4px;
    background-color: #fffae7;
    border: 1px solid #adadad;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-right: 14px;
}

.callout i {
    width: fit-content;
    margin: 15px 20px;
}

.callout p {
    margin: unset;
    color: #3b3b3b;
}

.callout i.fa-exclamation-triangle {
    color: #d97917;
}

.sidebar-folder .sidebar-folder>.sidebar-folder-item button {
    color: #616161;
    font-weight: 300 !important;
}