.docs-page header { position: fixed; width: 100%;  backdrop-filter: blur(10px);}

/* ================================================================================== */
/* == Content ======================================================================= */
/* ================================================================================== */

.docs-page main { float: right; width: calc(100vw - 300px); margin-left: 300px; padding: 110px 0 0 0; overflow: hidden; }

.docs-page article { padding: calc(var(--space) / 2); }
.docs-page .docs-post-inner { max-width: 800px; margin: 0 auto; }

@media only screen and (max-width: 1000px) {
	.docs-page .sidebar,
	.docs-page .sidebar:after,
	.docs-page .toc { width: 200px !important; }
	.docs-page article { width: calc(100% - 250px); }
}
@media only screen and (max-width: 800px) {
	.docs-page main { padding: 130px 50px 50px 50px; }
	.docs-page .sidebar { display: none; }
	.docs-page article { float: none; width: 100%; }
}
@media only screen and (max-width: 500px) {
	.docs-page main { padding: 110px 30px 30px 30px; }
}
@media only screen and (max-width: 400px) {
	.docs-page main { padding: 110px 25px 25px 25px; }
}




/*Page Title*/
.docs-page h1 { font-size: 2.75rem;
  line-height: 1.2em;
  margin-top: 0;
  margin-bottom: 4rem; }

.page-title { position: relative; }
.page-title .cnd-sort { position: absolute; top: 10px; right: 0; }

/*Breadcrumbs*/
.breadcrumbs { 
	list-style: none; 
	overflow: hidden; 
	text-shadow: none;
	margin-bottom: 40px;
	border: 1px solid rgba(0,115,233, 0.35);
	display: inline-block;
	border-radius: 4px;
}
.breadcrumbs ol { margin: 0 !important; padding: 0; }
.breadcrumbs li { 
	float: left; margin: 0 !important; padding: 0 !important;
}
.breadcrumbs li:before { display: none;}
.breadcrumbs li a {
	color: #fff;
	text-decoration: none; 
	padding: 10px 0 10px 55px;
	background: #F3F5FA;
	backgr/ound: var(--primary-color);
	backg/round: #fff;
	background: rgba(0,115,233, 0.85);
	position: relative; 
	display: block;
	float: left;
}
.breadcrumbs li a:after { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 30px solid rgba(0,115,233, 0.8);
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	left: 100%;
	z-index: 2; 
}	
.breadcrumbs li a:before { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	bo/rder-left: 30px solid #dbdff6;
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	mar/gin-left: 1px;
	left: 100%;
	z-index: 1; 
}	
.breadcrumbs li:only-child  a { padding-left: 20px !important; }
.breadcrumbs li:first-child a {	padding-left: 20px; }
.breadcrumbs li:nth-child(2) a       { background:        rgba(0,115,233, 0.5);; }
.breadcrumbs li:nth-child(2) a:after { border-left-color: rgba(0,115,233, 0.4); }
.breadcrumbs li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
.breadcrumbs li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumbs li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
.breadcrumbs li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumbs li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
.breadcrumbs li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumbs li:last-child a {
	background: #537FED;
	color: #fff;
	/*pointer-events: none;*/
	/*cursor: default;*/
	background: none; color: #326FB0; padding-right: 23px; padding-left: 45px;
	background: rgba(0,115,233, 0.15);
}
.breadcrumbs li:last-child a:after { border: 0; }
.breadcrumbs li a:hover { text-decoration: underline; }



/* ================================================================================== */
/* == Sidebar ======================================================================= */
/* ================================================================================== */


.docs-page .sidebar { width: 300px; height: 100vh; padding: 120px 1.5rem 1.5rem 1.5rem; background: rgba(255,255,255,0.8); border-right: 1px solid var(--border-color); position: fixed; top: 0; left: 0; font-size: 14px; z-index: 2; }
.docs-page .sidebar strong { display: block; margin-bottom: 1rem; font-size: 15px; color: var(--text-darkest); }

/*Table of Contents*/
.toc { overflow-y: auto; }
.toc > .toc-list { overflow: hidden; position: relative; }
.toc > .toc-list li { list-style: none; padding: 0; margin-bottom: 1em; }
.toc > .toc-list li li { padding-left: 1em; }
.toc > .toc-list li li:first-child { margin-top: 1em;}
.toc-list { margin: 0; padding: 0; }
a.toc-link { color: currentColor; height: 100%; }
.is-collapsible { max-height: 1000px; overflow: hidden; transition: all 300ms ease-in-out; }
.is-collapsed { max-height: 0; }
.is-collapsed:has(:focus) { max-height: 1000px; }
.is-position-fixed { position: fixed !important; top: 0; }
a.is-active-link { font-weight: 700; color: var(--primary-color); }
/* .toc-link::before { background-color: #eee; content: " "; display: inline-block; height: inherit; left: 0; margin-top: -1px; position: absolute; width: 2px; }
.is-active-link::before { background-color: #54bc4b; } */




/* ================================================================================== */
/* == Article Styles ================================================================ */
/* ================================================================================== */

/* .page-title h1 { font-size: 32px; color: #000; font-weight: 700; margin: 0; padding: 0; } */

/* Reset doc styles from main site article styles */
.docs-post, .docs-post p, .docs-post ul, .docs-post ol, .docs-post li,
.docs-post h1, .docs-post h2, .docs-post h3, .docs-post h4, .docs-post h5 {
	margin: 0; padding: 0;
}

.docs-post { line-height: 1.6; font-size: 16px; color: #3c4257; }
.docs-post p {  margin: 0.75rem 0; }
.docs-post sup { font-size: 60% !important; }

.docs-post h1,
.docs-post h2,
.docs-post h3,
.docs-post h4,
.docs-post h5,
.docs-post h6 { font-weight: 700; color: #1a1f36; margin: 0.75rem 0; }

.docs-post h2 { margin-top: 2rem; }
.docs-post h3 { margin-top: 1.25rem; margin-top: 2rem; font-size: 16px; }
.docs-post h4,
.docs-post h5,
.docs-post h6 { font-size: 16px; font-weight: 600; margin-top: 1.875rem; margin-bottom: -0.75rem; }

/*Lists*/
.docs-post ul,
.docs-post ol { list-style: none; padding: 0; margin: 0.75rem 0; }
.docs-post ul li,
.docs-post ol li { padding-left: 2em; }
.docs-post ul > li,
.docs-post ol > li { position: relative; margin: 0.125rem 0; }
.docs-post ul ul,
.docs-post ol ol { margin: 0.125rem 0; }
.docs-post ul > li:before { content: ""; position: absolute; width: 0.375em; height: 0.375em; left: 0.5em; top: 0.55em; border-radius: 50%; background: #c1c9d2; }
.docs-post ol { counter-reset: listitem; }
.docs-post ol > li:before { counter-increment: listitem; content: counter(listitem); background: rgb(74 85 101 / 10%); color: #697386; font-size: 12px; font-weight: 500; line-height: 20px; text-align: center; height: 20px; width: 20px; border-radius: 10px; position: absolute; left: 0; top: 3px; }

/* Section */
.docs-post .section { position: relative; margin-top: 3rem; padding-bottom: 2rem; border-top: 1px solid #e3e8ee; border-bottom: 1px solid #e3e8ee; border-top: 1px solid rgba(0,0,0,0.07); border-bottom: 1px solid rgba(0,0,0,0.07); }
.docs-post .section ~ .section { margin-top: 0; border-top: none; }
.docs-post .section .section-header h2 { font-size: 32px; }
.docs-post .section .section-header + .section-block { border-top: none; }
.docs-post .section .section-block { border-top: 1px dotted #e3e8ee; border-top: 1px dotted rgba(0,0,0,0.07); margin-top: 2rem; padding-bottom: 0.05rem; }
.docs-post .section .section-block h3 { font-size: 24px; }
.docs-post .section .section-block h4 { margin: 1.875rem 0 0 0; }
.docs-post .section .section-block h4 + table,
.docs-post .section .section-block h4 + pre { margin-top: 0.5rem !important; }


/*Table*/
.docs-post table { border-spacing: 0; border-collapse: collapse; width: 100%; margin: 1.2rem 0; }
.docs-post td,
.docs-post th { padding: 0.75rem; border: 1px solid #ebeef1; }
.docs-post table thead { font-size: 13px; color: #3C425B; text-transform: uppercase; padding: 0; line-height: 15px; }
.docs-post table tbody tr:nth-child(2n+1) td { background: #f7fafc; }
.docs-post table tbody,
.docs-post table tbody td,
.docs-post table tbody td p { font-size: 14px; line-height: 1.325; vertical-al///ign: top; }
.docs-post table tbody td p { margin: 0; }
.docs-post table ul,
.docs-post table ol { margin: 0; }

/*Code*/
.docs-post sup { top: -0.5em; }
.docs-post sub { bottom: -0.25em; }
.docs-post pre,
.docs-post code { font-size: 13px; font-family: 'Droid Sans Mono', monospace !important; }
.docs-post pre {
	padding: 0.75em 0 !important;
	margin: 1.2rem 0 !important;
	box-shadow: -1px 0px 0px 0px #2F62A5, 0px 0px 0px 1px #ebeef1 !important;
	border-left: 10px solid #2F62A5 !important;
	background-color: #fdfdfd !important;
	background-image: linear-gradient(#fff 50%, #f7fafc 50%) !important;
}
.docs-post .endpoint { display: inline-block; background: rgba(35,157,239, 0.25); border: 1px solid rgba(35,157,239, 0.25);  color: #239DEF; color: #326FB0; text-shadow: none; padding: 1px 15px 1px 0; border-radius: 6px 3px 3px 6px; margin: -0.75rem 0 0.25rem; }
.docs-post .endpoint strong { background: #326FB0; color: #fff; padding: 5px 10px; margin: 0 5px 0 -1px; border-radius: 3px 0 0 3px; }

/*Images*/
.docs-post .voImage { margin: 2rem 0; }
.docs-post .voImage img { display: block; max-width: 100%; height: auto; }
.docs-post .voImage.center {  margin: 1.4em auto; }
.docs-post .voImage .caption { background: #F3F5F9; padding: 1em; font-size: .8rem; line-height: 1.45; }



/* ================================================================================== */
/* == Docs Index ==================================================================== */
/* ================================================================================== */

.docs-landing-page .page-body { width: 100% !important; }
.docs-landing-page .docs-index-inner,
.docs-landing-page .docs-post-inner { max-width: 1250px; margin: 0 auto; padding: calc(var(--space) / 2); }

.docs-landing-page .page-title { margin-bottom: 4rem;}
.docs-landing-page .page-title h1 { margin-bottom: 1rem; }


.docs-post-array ul { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 16px; }
.docs-post-array li { 
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px, rgba(0, 0, 0, 0.09) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
	border-radius: 12px;
	width: calc(33% - 1.5rem); margin-bottom: 3rem;
	padding: 1.5rem;
	text-decoration: none;
	transition: all .2s;
	position: relative;
}
.docs-post-array li .thumbnail { width: 100%; border: 1px solid var(--border-color); overflow: hidden; border-radius: 6px; margin-bottom: 1rem; }
.docs-post-array li .thumbnail img { display: block; width: 100%;}
.docs-post-array li h2 { font-size: 1.5rem; margin: 0 0 0.75rem 0; }
.docs-post-array li h2 a { color: var(--text-darkest); }


/* Private Documentation */
.private-note { color: var(--primary-color); border: 1px solid var(--primary-color); padding: calc(var(--space) / 3); border-radius: calc(var(--radius) / 2); background: rgba(0, 115, 233, 0.2); background: rgba(0, 115, 233, 0.2) url(../../img/lock-blue.svg) no-repeat 33px 33px; background-size: 24px; padding-left: 63px; font-weight: 500; font-size: 16px; margin-bottom: calc(var(--space) / 2); }
.private-note a { text-decoration: underline; }