html {
	scrollbar-gutter: stable;
    scrollbar-width: thin;
}

/* Main Width */
.md-grid {
	max-width: 70rem;
	margin-top: 0;
}



/* Title Header Formatting */
@media (min-width: 1220px) {
    .md-header {
        background-color: rgba(255, 255, 255, 0);
        pointer-events: none;
    }
    .md-header__title {
        visibility: hidden;
    }
    .md-header .md-logo,
    .md-header .md-search,
    .md-header label[for="__drawer"],
    .md-header label[for="__search"] {
        pointer-events: auto;
    }
}

.md-search__form {
	border-radius: 5px;
}

.md-header--shadow {	
	box-shadow: none;
}

.md-header__ellipsis {
	display: none;
}

.md-nav__button {
	display: none !important;
}


/* special Menu entry for certian sizes when sidebar is gone but toc is still there  */
label.md-header__button.md-icon[for="__drawer"] .hamburger-fix {
	display: none;
}

@media (max-width: 1220px) {

	.md-header {	
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		background-color: rgba(243, 243, 243, 0.8);
	}
	.md-header--shadow {	
		box-shadow: 0 .2rem .4rem #00000024;
	}

	label.md-header__button.md-icon[for="__drawer"] {		
		background-color: transparent;
		color: rgb(0, 0, 0);
		border-radius: 5px;
		/* width: 100px; */
		display: flex;  /* Use flexbox to align the icon and text inline */
		align-items: center;  /* Align the items vertically */
	}
	label.md-header__button.md-icon[for="__drawer"] .hamburger-fix {
		display: block;
		font-family: 'Inter';
		font-size: 20px;
		padding-left: 10px;
		padding-right: 10px;
		color: rgb(0, 0, 0);
	}
}
/* special Menu END */

/* Footer */
.custom-footer {
	padding: 0.3em 0;
	background-color: rgb(255, 255, 255);
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: rgb(185, 185, 185);
	color: rgb(128, 128, 128);
	font-size: 1.2em;
	display: flex; 
	justify-content: space-between; 
	align-items: center;
	padding: 0px;
}
.custom-footer .left {
	padding-left: 32px;
}
.custom-footer .right {
	padding-right: 32px;
}
.custom-footer p {
    margin: 1.0em;
    line-height: 1.0;
}
/* Footer END */


/*  TOC EDIT ************************************************************** */
nav.md-nav .md-nav__title {
	background-color: rgb(243, 243, 243); 
	color:rgb(110, 110, 110);
	padding: 3px;
	padding-left: 10px;
	border-radius: 5px;
}

label.md-nav__link {
	background-color: rgb(243, 243, 243);
	color:rgb(110, 110, 110) !important;
	padding-left: 10px;
	padding: 3px;
	border-radius: 5px;
}

a.md-nav__link {
	line-height: 1.1;
	padding-left: 15px;
}

/* .md-sidebar {
	padding-top: 8px;
} */

.md-sidebar--secondary .md-nav__link {	/* Right page TOC sidebar */
    font-size: 1.0em;
    color: rgb(170, 170, 170);
}

.md-sidebar--primary a.md-nav__link[href*="index.html"] .md-ellipsis {
	font-weight: 700;
}

.md-sidebar--secondary nav.md-nav .md-nav__title {
	font-weight: 500;
}
/* TOC END */


/* Imprint */
.imprint {
	font-size: 0.8em;
}

.imprint a p {
	padding: 0px;
	margin: 0px;
}

/* Top Links */
.top-links {
	background-color: #eaeaea;
	border-radius: 4px;
	padding: 3px;
	padding-left: 12px;
	padding-right: 12px;
	line-height: 2.0;
}


/* Increase specificity for Chrome */
.md-content::-webkit-scrollbar {
    width: 10px;
}

.md-content::-webkit-scrollbar-thumb {
    background-color: red !important;
    border-radius: 10px; /* To ensure visibility */
}

.md-content::-webkit-scrollbar-thumb:hover {
    background-color: darkred !important;
}

/* Firefox */
.md-content {
    scrollbar-width: thin;
    scrollbar-color: red transparent;
}



/* Hides the top OmniStep title in the nav, as well as Table of contents on the right */
/* .md-nav__title {
	display: none !important;
} */


/* FONTS */
@font-face {
	font-family: 'IBMPlexSansVar';
	src: url('../fonts/IBMPlexSansVar-Roman.woff2') format('woff2');
	font-weight: 1 1000;
	font-stretch: 85% 100%;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-VariableFont.ttf') format('woff2');
	font-weight: 1 1000;
	font-stretch: 85% 100%;
	font-style: normal;
}

@font-face {
	font-family: 'RobotoMono';
	src: url('../fonts/RobotoMono-Variable.ttf') format('woff2');
	font-weight: 1 1000;
	font-stretch: 85% 100%;
	font-style: normal;
}

@font-face {
	font-family: 'IBMPlexMono';
	src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
	font-stretch: 85% 100%;
	font-style: normal;
}

:root {
	--md-text-font: 'Inter';
	--md-code-font: "RobotoMono";	
}

:root>* {
	--md-code-hl-color--light: #fff5554d;		/* code line highlight*/
	--md-code-bg-color: #fafafa;				/* code block background */ 
	--md-code-hl-string-color: rgb(194, 8, 8);
}

strong {
	font-weight: 550;
}

code {
	font-weight: 500;
	border-radius: 3px;
}


/* Headers */
.md-content h1 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;	
}

h2 {
	background-color: rgba(0, 0, 0, 0.035);
	border-color: rgb(205, 205, 205);
	padding-left: 5px;
	border-radius: 3px;
	font-weight: 500 !important;
}

h3 {
	background-color: rgba(0, 0, 0, 0.01);
	padding-left: 5px;
	border-radius: 3px;
	font-weight: 450 !important;
}

/* H3 FOLDING (with javascript) */
h3.fold {
	background-color: rgba(0, 0, 0, 0.035);
    cursor: pointer;
    user-select: none;
}
h3.fold::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    background: currentColor;
    opacity: 0.8;
    margin-left: 0.5em;
    margin-bottom: 0.15em;
    vertical-align: middle;
    transition: transform 0.2s;
    transform: rotate(-90deg);  /* default: closed */
}
h3.fold[data-fold="open"]::after {
    transform: rotate(0deg);
}

/* H3 Folding END */

img {
	border-radius: 3px;
}

.md-ellipsis {
	/*Sidebar font weight*/
	font-weight: 450;
}

/* h2 for the versions page */
.version-header {	
	font-family: var(--md-code-font);
	display: flex;
	justify-content: space-between;
	align-items:baseline;
}

/* Bullet Points */
.md-typeset ul ul {
	list-style-type: circle;
}

/* ************************************************************************ */
/* DOWNLOAD */
.download-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Center the boxes horizontally */
	gap: 30px;
	/* Space between the boxes */
}

.download-box {
	width: 200px;
	/* Adjust this to set the desired size */
	min-width: 300px;
	/* Minimum width before it stacks */
	box-sizing: border-box;
	padding: 10px;
	background-color: #292929;	
	border-radius: 5px;
	transition-duration: 0.2s;
	/* box-shadow: 0px 7px 20px 0px rgb(157 157 157); */
	/* box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */
}

.download-box a p {
	display: block;
	text-decoration: none;
	color: white;
	margin: 0px;
}

.download-box:hover {
	background-color: #087ee4;
}

.download-text {
	font-family: 'Inter';
	font-size: 1.0em;
	font-weight: 500;
	text-align: center;
	margin: 0px;
	color: white;
}
/* Download END */

/* ************************************************************************ */
/* Tables */
/* Style only Markdown-generated content tables */
.md-typeset table:not([class]):not([role]):not(pre table):not(.md-code__content table):not(.md-typeset__table) td {
	font-family: 'Inter';
	font-size: 1.2em;
	padding: 0.5em;
}

/* .md-typeset th {
	font-family: 'Inter';
	font-size: 1.2em;
	font-weight: 500 !important;
	padding: 0.5em !important;
} */






/* ************************************************************************ */
/* Old Style admonitions, copy pasted from docs */
.md-typeset .admonition,
.md-typeset details {
	font-size: 0.9em;
}

/* Custom Default Admonition MYNOTE */
.md-typeset .mynote {
	background-color: #ffffff;
	border: 1px solid #f4f4f4;
	font-family: 'Inter';
}
.md-typeset .mynote p {
	font-family: 'Inter';
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 0px;
	margin-bottom: 0px !important;
}

.md-typeset .mynote .admonition-title {
	background-color: #f4f4f4;
	color:#373737;
	border: none;
	font-family: 'Inter';
	font-weight: 550;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 2.5em;
}

.md-typeset .mynote .admonition-title::before {
	/* display: none; */
	padding-top: 1px;
	padding-bottom: 1px;
	top: 0.18rem;
	width: 0.8rem;
	background-color: #373737;
}
/* Custom Default Admonition MYNOTE END */

/* Separator */
.md-typeset hr {
	border-bottom: .05rem solid rgba(0, 0, 0, 0.271);
}

/* Keyboard Keys Formatting */
.md-typeset kbd {
	/* Better Key Shadows */
	box-shadow: 0 0rem 0px 0.04rem var(--md-typeset-kbd-border-color), 0 .1rem 0 0.04rem var(--md-typeset-kbd-border-color), 0 0.05rem 0.15rem 0px #eeeeee inset;
}

/* Code Highlighter JS Fix */
.highlight code span.ct {
  color: var(--md-code-hl-special-color);
}

/* API Docs Text */
.api-params {
    margin-left: 1.6rem;
    margin-top: 1em;
    margin-bottom: 0;
    text-transform: uppercase;
}
.api-values {
    margin-top: 0;
    margin-left: 3em;
    margin-bottom: 0;
    font-size: 0.8rem;
}
.api-values p {
    margin: 0.2em 0;
}
/* API Docs Foldout */
.md-typeset .apifold {
    background-color: #fafafa;
    border: none;
}
.md-typeset .apifold[open] {
    box-shadow: none;
}
.md-typeset .apifold summary {
    font-family: 'RobotoMono';
    font-weight: 400;
    font-size: 0.95em;
    color: var(--md-typeset-a-color);
    background-color: #fafafa;
    border-radius: 5px !important;
    padding-left: 12px;
}
.apifold .api-name {
    font-weight: 600;
}
.md-typeset .apifold ::before {
    display: none;
}

/* ************************************************************************ */
/* FAQ Docs Foldout */
.md-typeset .faqfold {
	background-color: #fafafa;
	border: none;
	margin: 0.8em;
}

.md-typeset .faqfold[open] {
	box-shadow: none;
}

.md-typeset .faqfold summary {	
	/* font-size: 0.9em; */
	background-color: #fafafa;
	border-radius: 5px !important;
	padding-left: 12px;
	font-weight: 500;
}

.md-typeset .faqfold ::before {
	display: none;
	/* icon */
}
/* FAQ Docs Foldout END */

/* ************************************************************************ */
/* Demo File Card */
.md-typeset .demofiles {
	background-color: #fafafa;
	border: none;
	margin: 0.8em;
	margin-left: 0px;
	margin-right: 0px;
}

.md-typeset .demofiles ::before {
	display: none;
	/* icon */
}

.md-typeset .demofiles[open] {
	box-shadow: none;
}

.md-typeset .demofiles .right-aligned {
	float: right;
	color: rgb(88, 88, 88);
	font-size: 0.8em;
	font-family: 'RobotoMono';
}

.md-typeset .demofiles summary {	
	/* font-size: 0.9em; */
	background-color: #fafafa;
	border-radius: 5px !important;
	font-family: var(--md-code-font);
	padding-left: 12px;
	font-weight: 500;
}

.admonition.demofiles {
	container-type: inline-size;
	background-color: rgb(247, 247, 247);
	border: none;
	border-radius: 5px;
}

.admonition.demofiles .admonition-title {
	background-color:  rgb(240, 240, 240);
	font-weight: 500;
	font-size: 1.1em;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 4px;
	padding-bottom: 4px;
	display: flex;
	justify-content: space-between;
	align-items:baseline;
}

.md-typeset .admonition.demofiles .admonition-title::before {
	display: none;
	content: "";
}

.md-typeset .admonition .right-aligned {
	float: right;
	color: rgb(88, 88, 88);
	font-size: 0.8em;
	font-family: 'RobotoMono';
}

.md-typeset .admonition .right-aligned .demo-tag {
	background-color: rgb(255, 255, 255);
	/* color:rgb(88, 88, 88); */
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 3px;
	margin-left: 8px;
}

.demo-container {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	/* This allows the text to move under the image when necessary */
}

.demo-image {
	max-width: 100%;
	width: 320px;
	height: auto;
	border-radius: 5px;
	margin-right: 20px;
}

.demo-video {
	width: 100%;
}

.demo-text {
	flex: 1;	/* Allows the text to take up remaining space */
}

@container (max-width: 640px) {
	.demo-container {
		flex-direction: column;
		text-align: left;
	}

	.demo-image {
		margin-right: 0;
		width: 100%;
		margin-bottom: 10px;
	}
}
/* Demo File Card END */

/* ************************************************************************ */
/* Script File Card */


/* Script File Card END */


/* Intro Video */
.intro-video-container {
	text-align: center;
}

.intro-video {
	width: 75%;
	text-align: center;
	margin-bottom: 0px;
	border-radius: 5px;
}

.intro-caption {
	font-family: 'Inter';
	font-size: 90%;
	text-align: center;
	font-style: italic;
	color: #373737;
	margin-top: 0px;
	margin-bottom: 25px;
}
/* Intro Video END */

/* VIDEO iFRAME Scaling*/
/* Styles for the responsive container */
.responsive-container {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
	/* 16:9 Aspect Ratio */
	width: 100%;
	/* Full width */
}

/* Styles for the iframe */
.responsive-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-bottom: 2em;
	border-radius: 5px;
}