p.devwarning {
	top: 10px;
	position: sticky;
	margin: 10px 10px 10px 310px;
	padding: 5px 10px;
	border-radius: 4px;
	letter-spacing: 1px;
	color: #000;
	text-align: center;
	background: #d40
		repeating-linear-gradient(
			135deg,
			transparent,
			transparent 56px,
			rgba(255, 255, 255, 0.2) 56px,
			rgba(255, 255, 255, 0.2) 112px
		);
	background-color: #fdab10;
}

/* main page */
.wy-body-for-nav {
	background: #fff;
  overflow-y: hidden
}

.wy-grid-for-nav {
	margin: 0 auto;
	position: relative;
	padding-top: 80px;
	display: flex;

	&:has(nav.wy-nav-side.shift) {
		background: #E7E7E7;
	}

	&:not(:has(nav.shift)) > section > div.overlay {
		background-color: transparent
	}
	
	&:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li a::before,
	&:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li a::after,
	&:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li::before,
	&:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li::after {
		background-color: #fff;
	}
}

.wy-nav-content-wrap {
	width: 100%;
	margin-left: auto;
	background-color: transparent;
}

.wy-nav-content {
	max-width: 100%;
	background-color: transparent;

	&.overlay > div > div[role=navigation] .wy-breadcrumbs > li a::before,
	&.overlay > div > div[role=navigation] .wy-breadcrumbs > li a::after,
	&.overlay > div > div[role=navigation] .wy-breadcrumbs > li::before,
	&.overlay > div > div[role=navigation] .wy-breadcrumbs > li::after,
	&.overlay > div > div.document div.sd-card,
	&.overlay > div > div.document div.sd-card-title {
		background-color: #E7E7E7;
	} 

	&.overlay > div.rst-content > footer > .rst-footer-buttons > a {
		background-color: #E7E7E7 !important;
	}

}

/* main-page content */
#vyos-user-guide {
	& .sd-container-fluid {
		padding-left: 0;
		padding-right: 0;
	}
	
	& .sd-container-fluid > .docutils > .sd-col {
		max-width: 387px;
		box-shadow: none;
		flex: none;
		width: 100% !important;
		padding: 0 !important;
		margin-top: 0 !important;
	
		& .sd-card-body .sd-card-text {
			min-height: 120px;
		}
	}
	
	& > div.sd-container-fluid {
		margin-top: 30px;

		& > div.docutils {
			margin: 0;
			display: grid;
		}
	}
	
	& > .pb-4 {
		padding-bottom: 1.4rem !important;
	}
}

div.sd-card-title {
	font-weight: bold;
	background: #fff;
	border: none;
	font-family: 'Archivo', sans-serif;
}

.sd-card {
	background: #fff;
	border: none;
	border-bottom: 1px solid #ffae12;
	border-radius: 0;
	box-shadow: none !important;
}

.sd-card-body {
	padding: 0;
}

.sd-card-title,
.sd-card-text {
	padding: 0;
}

.internal > .std-ref,
.line > .external {
	color: #fd8f01;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	letter-spacing: -0.5px;
	font-weight: 400;
}

img {
	height: auto !important;
	border: 1px solid #C4C9CC;
	margin-bottom: 20px !important;
	border-radius: 8px;
}

footer {
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.5px;
	color: #636a6d;

	& > a {
		color: #fd8f01;
		font-family: 'Roboto', sans-serif;
		font-size: 16px;
		letter-spacing: -0.5px;
		font-weight: 400;
	}

	& > hr {
		display: none;
	}
	
	& p {
		margin-top: 105px;
		text-align: center;
		font-family: 'Roboto', sans-serif;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: -0.5px;
		color: #636a6d;

		&:has(a) > a,
		&:has(a) > a:visited {
			color: #636a6d;
		}
	}
	
}

.rst-versions {
	position: static;
	background: transparent;
	width: 262px;
	display: block;

	&.shift-up {
		background: #525659;
		z-index: 100;
		position: absolute;
		left: 19px;
		bottom: 30px;
		border-radius: 6px;
		overflow: hidden;
	}
	
	& .rst-current-version {
		background-color: #525659;
		color: #01D38E; 
		border-radius: 6px;
		width: 264px;
		font-family: 'Roboto', sans-serif;
		letter-spacing: -0.5px;
	}

	& .rst-current-version span.fa-book {
		color: #fff !important;
		font-family: 'Roboto', sans-serif;
		letter-spacing: -0.5px;
	}
}

.rst-other-versions {
	& dt {
		color: #808080;
		font-family: 'Roboto', sans-serif;
		font-size: 16px;
		letter-spacing: -0.5px;
	}
	
	& small {
		font-family: 'Roboto', sans-serif;
		color: #fff;

		& a {
			font-family: 'Roboto', sans-serif;
			letter-spacing: -0.5px;
			color: #fd8f01;
		}
	}
	
}

div#rtd-sidebar {
	display: none;
}

.wy-nav-content-opened-sidebar {
	padding: 25px 0 27px 40px;
}

.wy-nav-content-wrap-opened-sidebar {
	max-width: calc(100% - 294px);
	margin-left: 294px;
}

.wy-nav-content-closed-sidebar {
	padding: 26px 0 !important;
}

.wy-nav-content-wrap-closed-sidebar {
	max-width: 100% !important;
	width: 100% !important;
}

html {
  scroll-padding-top: 90px !important;
}

.overlayDiv {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 111;
	background-color: #121010;
	opacity: 0.1;
}

.iframe-container {
  position: relative;
  width: 100%;
  background-color: #f0f0f0; 
	z-index: 201;
	overflow: hidden;

	&::-webkit-scrollbar {
		display: none;
	}
	
	& iframe {
		width: 100%;
		height: 100%;
		border: none;
		overflow: hidden;

		&::-webkit-scrollbar {
			display: none;
		}
	}
	
}

@media screen and (min-width: 320px) and (max-width: 575px) {
	#vyos-user-guide .container > .row {
		grid-gap: 0px 15px
	}
}

@media screen and (max-width: 575px) {
	.wy-nav-content-wrap,
	.wy-nav-content-wrap.shift {
		max-width: 100%;
		width: 100%
	}

	.wy-nav-content-wrap.shift {
		padding: 70px 15px 0;
		overflow: auto;
	}

	.wy-nav-side {
		display: none;
		min-height: unset;
	}

	.wy-nav-side.shift {
		display: inherit;
		width: 100%;
		max-width: 320px;
	}

	#vyos-user-guide .container > .docutils > .p-2 {
		max-width: 100%;
		&:nth-child(2n) {
			margin-left: 0;
		}

		& .card-body .card-text {
			min-height: 80px;
		}
	}

	.wy-nav-content-wrap-opened-sidebar {
		max-width: 100%;
		margin-left: unset;
	}

	dl.footnote > dt {
		padding-left: 0 !important;
	}

	.wy-grid-for-nav {
		padding: 80px 20px 0;
		max-width: 738px;
	}
}

@media screen and (min-width: 575px) and (max-width: 768px) {
	.wy-nav-content-wrap,
	.wy-nav-content-wrap.shift {
		max-width: 100%;
		width: 100%
	}

	.wy-nav-content-wrap.shift {
		padding: 70px 15px 0;
		overflow: auto;
		width: calc(100% - 294px);

	}

	.wy-nav-side {
		display: none;
		min-height: unset;
	}

	.wy-nav-side.shift {
		display: inherit;
		width: 294px;
	}
}

@media screen and (min-width: 575px) {
	#vyos-user-guide div.sd-container-fluid > div.docutils {
		grid-gap: 30px;
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 767px) {
	.wy-nav-content-wrap,
	.wy-nav-content-wrap.shift {
		margin: 0 auto;
	}

	.wy-nav-top {
		background-color: #fdab10;
	}

	p.devwarning {
		margin: 10px 10px 10px 10px;
	}

	#vyos-user-guide .container {
		max-width: none;
	}

	.wy-nav-content-wrap .wy-nav-content {
		padding: 0 0 26px 0;
	}

	.wy-grid-for-nav {
		padding: 80px 15px 0;
		max-width: 738px;
	}

	.rst-content > div > hr {
		display: none;
	}
}

@media screen and (min-width: 768px) {
	.wy-nav-content-wrap {
		width: calc(100% - 292px);
	}

	.rst-content > div > hr {
		margin: 16px 0 26px 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.wy-nav-content {
		padding: 25px 0 27px 40px;
	}

	.wy-nav-content-wrap {
		max-width: calc(100% - 294px);
	}

	.wy-grid-for-nav {
		max-width: 738px;
		padding: 70px 15px 0;
	}
}

@media screen and (min-width: 992px) and (max-width: 1266px) {
	.wy-nav-content {
		padding: 25px 0 27px 40px;
	}

	.wy-nav-content-wrap {
		max-width: calc(100% - 294px);
	}

	.wy-grid-for-nav {
		max-width: calc(100% - 130px);
	}
}

@media screen and (min-width: 1266px) {
	.wy-nav-content {
		padding: 25px 0 27px 40px;
	}

	.wy-nav-content-wrap {
		max-width: calc(100% - 294px);
	}

	.wy-grid-for-nav {
		max-width: 1140px;
	}
}

@media screen and (min-width: 1500px) {
	.wy-nav-content {
		padding: 25px 0 27px 40px;
	}

	.wy-nav-content-wrap {
		max-width: calc(100% - 294px);
	}

	.wy-grid-for-nav {
		max-width: 1340px;
	}
}

@media screen and (max-height: 500px) {
	.rst-versions {
		margin-top: 10px;
	}

	.closeButtonDivLine {
		bottom: 45px;
	}
}

@media screen and (min-height: 501px) and (max-height: 1000px) {
	.rst-versions {
		margin-top: 10px;
	}

	.closeButtonDivLine {
		bottom: 55px;
	}
}

@media screen and (min-height: 1001px) and (max-height: 1300px) {
	.rst-versions {
		margin-top: 10px;
	}

	.closeButtonDivLine {
		bottom: 60px;
	}
}

@media screen and (min-height: 1301px) and (max-height: 1600px) {
	.rst-versions {
		margin-top: 25px;
	}

	.closeButtonDivLine {
		bottom: 75px;
	}
}

@media screen and (min-height: 1601px) {
	.rst-versions {
		margin-top: 35px;
	}

	.closeButtonDivLine {
		bottom: 85px;
	}
}

/* Cookiebot consent dialog — safety net (defense-in-depth).
   Cookiebot delivers its dialog styling as a constructed stylesheet on
   document.adoptedStyleSheets. The adoptedStyleSheets shim in layout.html keeps that
   sheet from being dropped by another library (e.g. ReadTheDocs' readthedocs-addons.js,
   which reassigns the whole list with a destructive replace). As a backstop, these
   rules live in a regular stylesheet — which cascades *before* adopted stylesheets, so
   Cookiebot's own CSS overrides every one of them whenever its sheet is present, and
   they have no effect on the normal styled banner. They only take effect if that sheet
   is ever absent, keeping the dialog a contained, scrollable, centered panel instead of
   falling back to position:static and expanding to full page height. Only properties
   Cookiebot itself sets are used here, so there is verifiably no leak into the good state. */
#CybotCookiebotDialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 920px;
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
	z-index: 2147483631;
}