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;
	}
}