Styles refactoring (#1278)

14 files changed, 2141 insertions, 165 deletions

diff --git a/docs/_static/css/breadcrumbs.css b/docs/_static/css/breadcrumbs.css
new file mode 100644
index 00000000..bdc91993
--- /dev/null
+++ b/docs/_static/css/breadcrumbs.css
@@ -0,0 +1,165 @@
+.wy-breadcrumbs {
+
+  & > li,
+  & > li a {
+    color: #636A6D;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 500;
+    letter-spacing: -0.5px;
+    height: 26px;
+  }
+
+  & > li a {
+    padding: 0 5px 0 0;
+  }
+
+  & > li:nth-child(1) {
+    visibility: hidden;
+    position: relative;
+    padding-left: 0;
+  }
+
+  & > li > .icon-home::after {
+    content: url('../images/breadcrumbs-icon.svg');
+    visibility: visible;
+    top: 6px;
+    position: absolute;
+  }
+
+  & > li > .icon-home::before {
+    padding-right: 0;
+    content: 'Home';
+    visibility: visible;
+    font-family: 'Roboto', sans-serif;
+    letter-spacing: -0.5px;
+    font-weight: 500;
+  }
+
+  & > li:nth-child(n + 1) {
+    font-weight: 500;
+    position: relative;
+  }
+
+  & > li:nth-child(n + 1)::before {
+    display: none;
+  }
+
+  & > li:nth-last-child(2) {
+    color: #121010;
+  }
+
+  & > li:nth-last-child(2)::after,
+  & > li:nth-last-child(1)::after {
+    display: none !important
+  }
+
+  & > li:nth-child(n + 1)::after {
+    content: url('../images/breadcrumbs-icon.svg');
+    top: 0;
+    position: absolute;
+    width: 20px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+  }
+  
+  & > li:last-of-type:has(a),
+  & > li:last-of-type:has(a) a {
+    font-family: 'Archivo', sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: #fff;
+    background-color: #121010;
+    display: flex;
+    align-items: center;
+  }
+  
+  & > li:last-of-type:has(a) {
+    padding: 7px 10px;
+    border-radius: 4px;
+    height: 30px;
+  }
+  
+  & > li:last-of-type:has(a) a {
+    max-height: 100%;
+  }
+  
+  & > li:last-of-type:has(a) a::before {
+    content: url('../images/github.svg');
+    margin-right: 4px;
+    display: flex;
+    align-items: center;
+  }
+  
+  & > li:last-of-type::before {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 375px) {
+
+  .wy-breadcrumbs {
+    & > li > .icon-home::after {
+      right: -2px;
+    }
+
+    & > li:nth-child(n + 1)::after {
+      right: -13px;
+    }
+  }
+
+  .wy-breadcrumbs > li {
+    padding: 5px 5px 5px 0;
+  }
+
+  .wy-breadcrumbs > li,
+  .wy-breadcrumbs > li a {
+    font-size: 14px;
+  }
+
+  .wy-breadcrumbs > li > .icon-home::before {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 376px) {
+  .wy-breadcrumbs {
+    & > li > .icon-home::after {
+      right: -8px;
+    }
+
+    & > li:nth-child(n + 1)::after {
+      right: -13px;
+    }
+  }
+
+  .wy-breadcrumbs > li {
+    padding: 5px 5px 5px 10px;
+  }
+
+  .wy-breadcrumbs > li,
+  .wy-breadcrumbs > li a {
+    font-size: 16px;
+  }
+
+  .wy-breadcrumbs > li > .icon-home::before {
+    font-size: 16px;
+  }
+}
+
+@media screen and (max-width: 991px) {
+  li.wy-breadcrumbs-aside {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  ul.wy-breadcrumbs:has(li + li + li + li) li.wy-breadcrumbs-aside {
+    margin: 24px 0 16px;
+    max-width: 140px;
+    float: none;
+  }
+}
diff --git a/docs/_static/css/code-snippets.css b/docs/_static/css/code-snippets.css
new file mode 100644
index 00000000..0ae5464d
--- /dev/null
+++ b/docs/_static/css/code-snippets.css
@@ -0,0 +1,229 @@
+.rst-content {
+  & div[class^=highlight],
+  & pre.literal-block {
+    border: none;
+    background: linear-gradient(#FF9000, #FFBF12);
+    border-radius: 8px;
+    padding-left: 5px;
+  }
+
+  & div[class^=highlight] div[class^=highlight],
+  & pre.literal-block div[class^=highlight] {
+    background: #525659 !important;
+    border-radius: 0;
+    border: none;
+    padding: 0;
+    position: relative;
+  }
+
+  & .linenodiv pre, 
+  & div[class^=highlight] pre, 
+  & pre.literal-block {
+    font-size: 16px;
+    font-family: 'Roboto Mono', monospace;
+    font-weight: 400;
+    letter-spacing: -0.04em;
+    color: #fff;
+    line-height: 1.2;
+    overflow-x: scroll;
+    scroll-behavior: smooth;
+  }
+
+  & .linenodiv pre::-webkit-scrollbar, 
+  & div[class^=highlight] pre::-webkit-scrollbar, 
+  & pre.literal-block::-webkit-scrollbar {
+    height: 3px;
+    color: #99A0A5 transparent;
+  }
+
+  & .linenodiv pre::-webkit-scrollbar-track, 
+  & div[class^=highlight] pre::-webkit-scrollbar-track, 
+  & pre.literal-block::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 8px;
+    margin: 0 18px;
+  }
+
+  & .linenodiv pre::-webkit-scrollbar-thumb, 
+  & div[class^=highlight] pre::-webkit-scrollbar-thumb, 
+  & pre.literal-block::-webkit-scrollbar-thumb {
+    background-color: #99A0A5;
+    border-radius: 8px;
+    margin: 0 10px;
+  }
+
+}
+
+/* copy code div */
+.highlight > .copyDiv {
+  display: flex;
+  align-items: center;
+  transition: transform linear 250ms, width linear 250ms;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  padding: 5px 12px;
+  justify-content: end;
+  background-color: #393C3F;
+  height: 32px;
+  margin-top: 4px;
+}
+
+.copiedNotifier > span {
+  font-size: 14px !important;
+  color: #fff !important;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+.highlight {
+
+  & .kn {
+    color: #ccffda;
+  }
+  
+  & .nn {
+    color: #d0eefb;
+  }
+  
+  & .o {
+    color: #e6e6e6;
+  }
+  
+  & .s2 {
+    color: #dbe6f0;
+  }
+  
+  & .s1 {
+    color: #dbe6f0;
+  }
+  
+  & .nb {
+    color: #ccffda;
+  }
+  
+  & .c1 {
+    color: #dcebef;
+    font-style: italic;
+  }
+  
+  & .nt {
+    color: #8db1fe;
+    font-weight: bold;
+  }
+  
+  & .k {
+    color: #ccffda;
+    font-weight: bold;
+  }
+  
+  & .se {
+    color: #dbe6f0;
+    font-weight: bold;
+  }
+  
+  & .nv {
+    color: #eed7f4;
+  }
+  
+  & .gh {
+    color: #ccccff;
+    font-weight: bold;
+  }
+  
+  & .gd {
+    color: #ffcccc;
+  }
+  
+  & .gi {
+    color: #ccffcc;
+  }
+  
+  & .gu {
+    color: #ffc2ff;
+    font-weight: bold;
+  }
+  
+  & .na {
+    color: #81c0ff;
+  }
+  
+  & .s {
+    color: #dbe6f0;
+  }
+  
+  & .ni {
+    color: #f4d4cd;
+    font-weight: bold;
+  }
+  
+  & .cm {
+    color: #d5e7ec;
+    font-style: italic;
+  }
+  
+  & .cp {
+    color: #c2ffd3;
+  }
+  
+  & .mi {
+    color: #cef3e0;
+  }
+  
+  & .nf {
+    color: #c5d4fc;
+  }
+  
+  & .kc {
+    color: #c2ffd3;
+    font-weight: bold;
+  }
+  
+  & .ch {
+    color: #d5e7ec;
+    font-style: italic;
+  }
+  
+  & .mf {
+    color: #d6f5e6;
+  }
+  
+  & .go {
+    color: #e6e6e6;
+  }
+  
+  & .m {
+    color: #d6f5e6;
+  }
+}
+
+.rst-content blockquote {
+  margin: 0
+}
+
+@media screen and (max-width: 991px) {
+  .rst-content .linenodiv pre, 
+  .rst-content div[class^=highlight] pre, 
+  .rst-content pre.literal-block {
+    padding: 16px 20px;
+  }
+
+  .copyDiv > p {
+    margin: 0 10px 0 0;
+    color: #fff;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .rst-content .linenodiv pre, 
+  .rst-content div[class^=highlight] pre, 
+  .rst-content pre.literal-block {
+    padding: 24px 36px 18px;
+  }
+
+  .copyDiv > p {
+    display: none;
+  }
+}
diff --git a/docs/_static/css/configuration/index.css b/docs/_static/css/configuration/index.css
new file mode 100644
index 00000000..a759ea45
--- /dev/null
+++ b/docs/_static/css/configuration/index.css
@@ -0,0 +1,23 @@
+#configuration-guide > div > ul > li {
+  list-style: none !important;
+  position: relative;
+}
+
+#configuration-guide > div > ul > li::before {
+  content: '';
+  position: absolute;
+  top: 9px;
+  left: -15px;
+  width: 6px;
+  height: 6px;
+  background-color: #000;
+  border-radius: 50%;
+}
+
+#configuration-guide .toctree-l1 > a {
+  color: #FD8F01;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: -0.5px;
+}
\ No newline at end of file
diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index e934fb54..cdb036d2 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -1,215 +1,535 @@
-div.card-header {
-  font-weight: bold;
-  background: #fdab10;
-}
-
-span.opcmd,
-span.cfgcmd {
-    font-weight: bold;
-    background-color: transparent;
-    border: none;
-    padding: 0;
-    font-size: 100% !important;
-    max-width: 100%;
-    color: #000;
-    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
-}
-
-span.cfgcmd:before {
-  content: "#";
-  margin-right: 0px;
-}
-
-td a.cmdlink span.cfgcmd:before,
-td a.cmdlink span.opcmd:before  {
-  content: "";
+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;
 }
 
-td a.cmdlink,
-td a.cmdlink {
-  margin-left: 0px;
-}
+.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;
+	}
 
-tr td p {
-  margin-bottom:0px
- }
+	#vyos-user-guide .container > .docutils > .p-2 {
+		max-width: 100%;
+		&:nth-child(2n) {
+			margin-left: 0;
+		}
 
-span.opcmd:before {
-  content: "$";
-  margin-right: 0px;
-}
+		& .card-body .card-text {
+			min-height: 80px;
+		}
+	}
 
-.cfgcmd-heading {
-    display: inline-block;
-    margin: 6px 0;
-    font-size: 90%;
-    line-height: normal;
-    background: #f0d481;
-    color: #2980B9;
-    border-top: solid 3px #6ab0de;
-    border-top-width: 3px;
-    border-top-style: solid;
-    border-top-color: #FF9302;
-    padding: 6px;
-}
+	.wy-nav-content-wrap-opened-sidebar {
+		max-width: 100%;
+		margin-left: unset;
+	}
 
-.opcmd-heading {
-    display: inline-block;
-    margin: 6px 0;
-    font-size: 90%;
-    line-height: normal;
-    background: #e7f2fa;
-    color: #2980B9;
-    border-top: solid 3px #6ab0de;
-    border-top-width: 3px;
-    border-top-style: solid;
-    border-top-color: rgb(106, 176, 222);
-    padding: 6px;
-}
+	dl.footnote > dt {
+		padding-left: 0 !important;
+	}
 
-.opcmd-body,
-.cfgcmd-body {
-    margin: 6px 0;
-    padding-left: 12px;
+	.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;
+	}
 
-.cfgcmd-heading .cmdlink:after,
-.opcmd-heading .cmdlink:after{
-    content: "";
-    font-family: FontAwesome
-}
-
+	p.devwarning {
+		margin: 10px 10px 10px 10px;
+	}
 
-.cfgcmd-heading:not(:hover) .cmdlink,
-.opcmd-heading:not(:hover) .cmdlink {
-    display: none;
-}
+	#vyos-user-guide .container {
+		max-width: none;
+	}
 
-.defaultvalue{
-  font-size: 90%;
-  color: gray;
-  margin-bottom: 5px;
+	.wy-nav-content-wrap .wy-nav-content {
+		padding: 0 0 26px 0;
+	}
 
-}
+	.wy-grid-for-nav {
+		padding: 80px 15px 0;
+		max-width: 738px;
+	}
 
-a.cmdlink {
-    font-size: 80%;
-    margin-left: 6px;
+	.rst-content > div > hr {
+		display: none;
+	}
 }
 
-a.cmdlink span{
-    color: #2980B9;
-}
+@media screen and (min-width: 768px) {
+	.wy-nav-content-wrap {
+		width: calc(100% - 292px);
+	}
 
-a.cmdlink span:hover{
-    color: #3091d1;
+	.rst-content > div > hr {
+		margin: 16px 0 26px 0;
+	}
 }
 
-.wy-nav-content {
-  max-width : none;
-}
+@media screen and (min-width: 768px) and (max-width: 991px) {
+	.wy-nav-content {
+		padding: 25px 0 27px 40px;
+	}
 
-.wy-tray-container li.wy-tray-item-info {
-  background : #409ad5;
-}
+	.wy-nav-content-wrap {
+		max-width: calc(100% - 294px);
+	}
 
-.wy-table-responsive {
-  overflow : visible !important;
+	.wy-grid-for-nav {
+		max-width: 738px;
+		padding: 70px 15px 0;
+	}
 }
 
-.wy-table-responsive table td {
-  white-space : normal !important;
-}
+@media screen and (min-width: 992px) and (max-width: 1266px) {
+	.wy-nav-content {
+		padding: 25px 0 27px 40px;
+	}
 
-.wy-menu-vertical header,
-.wy-menu-vertical p.caption {
-  color : #ffcc00 !important;
-}
+	.wy-nav-content-wrap {
+		max-width: calc(100% - 294px);
+	}
 
-.wy-menu-vertical li.current a {
-  color : #040077 !important;
+	.wy-grid-for-nav {
+		max-width: calc(100% - 130px);
+	}
 }
 
-.wy-menu-vertical li ul li a {
-  color : #ffffff !important;
-}
+@media screen and (min-width: 1266px) {
+	.wy-nav-content {
+		padding: 25px 0 27px 40px;
+	}
 
-.wy-menu-vertical a {
-  color : #ffffff !important;
-}
+	.wy-nav-content-wrap {
+		max-width: calc(100% - 294px);
+	}
 
-.wy-menu-vertical a:active {
-  background-color : #409ad5 !important;
+	.wy-grid-for-nav {
+		max-width: 1140px;
+	}
 }
 
-.wy-side-nav-search {
-  background-color : #ffffff !important;
-}
+@media screen and (min-width: 1500px) {
+	.wy-nav-content {
+		padding: 25px 0 27px 40px;
+	}
 
-.wy-side-nav-search img {
-  background-color : #ffffff !important;
-}
+	.wy-nav-content-wrap {
+		max-width: calc(100% - 294px);
+	}
 
-.wy-side-nav-search > div.version {
-  color : #000000 !important;
+	.wy-grid-for-nav {
+		max-width: 1340px;
+	}
 }
 
-.wy-side-nav-search>a,
-.wy-side-nav-search .wy-dropdown>a {
- color:#000000;
- font-size:100%;
- font-weight:bold;
- display:inline-block;
- padding:4px 6px;
- margin-bottom:.809em
-}
+@media screen and (max-height: 500px) {
+	.rst-versions {
+		margin-top: 10px;
+	}
 
-.wy-nav-top {
-  background-color : #ffffff;
+	.closeButtonDivLine {
+		bottom: 45px;
+	}
 }
 
-.wy-nav-top img {
-  background-color : #000000 !important;
-}
+@media screen and (min-height: 501px) and (max-height: 1000px) {
+	.rst-versions {
+		margin-top: 10px;
+	}
 
-.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-ok,
-.rst-content table.docutils td.coverage-ok {
-  color: green;
-  text-align: center;
+	.closeButtonDivLine {
+		bottom: 55px;
+	}
 }
 
-.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-fail,
-.rst-content table.docutils td.coverage-fail {
-  color: red;
-  text-align: center;
+@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;
+	}
 
-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;
+	.closeButtonDivLine {
+		bottom: 75px;
+	}
 }
 
+@media screen and (min-height: 1601px) {
+	.rst-versions {
+		margin-top: 35px;
+	}
 
-@media screen and (max-width: 768px) {
-  .wy-nav-top{
-    background-color: #fdab10;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  p.devwarning {
-    margin: 10px 10px 10px 10px;
-  }
+	.closeButtonDivLine {
+		bottom: 85px;
+	}
 }
\ No newline at end of file
diff --git a/docs/_static/css/headers.css b/docs/_static/css/headers.css
new file mode 100644
index 00000000..48b78a41
--- /dev/null
+++ b/docs/_static/css/headers.css
@@ -0,0 +1,134 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Archivo', sans-serif !important;
+  font-weight: 700 !important;
+  letter-spacing: -0.02em !important;
+  display: flex;
+  color: #121010;
+  margin-bottom: 15px !important;
+}
+
+h2,
+h3,
+h4,
+h5 {
+  margin-top: 15px !important;
+}
+
+h1:has(a) > a,
+h2:has(a) > a,
+h3:has(a) > a,
+h4:has(a) > a,
+h5:has(a) > a {
+  display: flex !important;
+  position: relative;
+  padding-left: 5px;
+} 
+
+@media screen and (max-width: 767px) {
+  h1 {
+    font-size: 28px !important;
+  }
+  
+  h2 {
+    font-size: 22px !important;
+  }
+  
+  h3 {
+    font-size: 20px !important;
+  }
+  
+  h4 {
+    font-size: 18px !important;
+  } 
+  
+  h5 {
+    font-size: 16px !important;
+  } 
+}
+
+@media screen and (min-width: 768px) {
+  h1 {
+    font-size: 48px !important;
+  }
+  
+  h2 {
+    font-size: 34px !important;
+  }
+  
+  h3 {
+    font-size: 24px !important;
+  }
+  
+  h4 {
+    font-size: 22px !important;
+  } 
+
+  h5 {
+    font-size: 20px !important;
+  }
+}
+
+@media screen and (max-width: 991px) {
+  h1 {
+    margin-top: 15px;
+  } 
+
+  a.headerlink {
+    opacity: 1 !important;
+    color: transparent;
+  }
+
+  h1:has(a):hover > a::after,
+  h2:has(a):hover > a::after,
+  h3:has(a):hover > a::after,
+  h4:has(a):hover > a::after,
+  h5:has(a):hover > a::after {
+    content: none !important;
+    display: none !important;
+  }
+
+  h1:has(a) > a::before,
+  h2:has(a) > a::before,
+  h3:has(a) > a::before,
+  h4:has(a) > a::before,
+  h5:has(a) > a::before {
+    content: url('../images/cmnd-link-icon.svg');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 25%;
+    height: 100%;
+    width: 20px;
+    z-index: 2;
+    background-color: transparent;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  h1:has(a):hover > a::after,
+  h2:has(a):hover > a::after,
+  h3:has(a):hover > a::after,
+  h4:has(a):hover > a::after,
+  h5:has(a):hover > a::after {
+    content: url('../images/cmnd-link-icon.svg');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 20px;
+    z-index: 2;
+    background-color: transparent;
+  }
+
+  a.headerlink {
+    color: transparent;
+  }
+}
+
diff --git a/docs/_static/css/hints.css b/docs/_static/css/hints.css
new file mode 100644
index 00000000..fd7553f5
--- /dev/null
+++ b/docs/_static/css/hints.css
@@ -0,0 +1,123 @@
+div {
+  &.note,
+  &.hint,
+  &.warning,
+  &.error,
+  &.seealso,
+  &.tip {
+    border-radius: 8px;
+
+    & > .admonition-title {
+      padding: 5px 8px;
+      border-radius: 6px;
+      font-family: 'Archivo', sans-serif !important;
+      font-size: 14px !important;
+      letter-spacing: -0.02em !important;
+      font-weight: 600 !important;
+      margin: -12px -16px 12px;
+    }
+
+    & > .admonition-title::before {
+      content: url('../images/note-icon.svg');
+    }
+
+    & > .highlight-none {
+      margin-top: 10px;
+    }
+
+    & > p:nth-child(1n+2) {
+      font-family: 'Roboto', sans-serif;
+      font-size: 16px;
+      letter-spacing: -0.5px;
+      color: #525659;
+      font-weight: 400;
+      margin: 10px 0 0 0  !important;
+    }
+  }
+
+  &.note,
+  &.seealso {
+    background-color: #F5FCFF !important;
+  }
+
+  &.note:has(a.reference),
+  &.hint:has(a.reference),
+  &.warning:has(a.reference),
+  &.error:has(a.reference),
+  &.seealso:has(a.reference),
+  &.tip:has(a.reference) {
+    & a.reference,
+    & a.reference span {
+      color: #508EEB !important;
+    }
+  }
+
+  &.note,
+  &.seealso {
+    & > .admonition-title {
+      background-color: #CCEFFB !important;
+      color: #356E81 !important;
+    }
+  }
+
+  &.hint,
+  &.tip {
+    background-color: #F7FDFB !important;
+
+    & > .admonition-title {
+      background-color: #C6F0E3 !important;
+      color: #3F6461 !important;
+    }
+  }
+
+  &.warning,
+  &.error {
+    background-color: #FDF7F7 !important;
+
+    & > .admonition-title {
+      background-color: #F0C6C6 !important;
+      color: #8E2F2F !important;
+    }
+  }
+
+}
+
+#running-on-bare-metal div.note > p:nth-child(2) {
+  padding: 8px 12px 0 12px;
+}
+
+@media screen and (max-width: 575px) {
+  div.note,
+  div.hint,
+  div.warning,
+  div.error,
+  div.seealso,
+  div.tip {
+    padding: 24px 32px !important;
+    border-radius: 8px;
+  }
+}
+
+@media screen and (min-width: 576px) and (max-width: 991px) {
+  div.note,
+  div.hint,
+  div.warning,
+  div.error,
+  div.seealso,
+  div.tip {
+    padding: 24px 32px !important;
+    border-radius: 8px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  div.note,
+  div.hint,
+  div.warning,
+  div.error,
+  div.seealso,
+  div.tip {
+    padding: 24px 32px !important;
+    border-radius: 8px;
+  }
+}
diff --git a/docs/_static/css/installation/running-on-bare-metal.css b/docs/_static/css/installation/running-on-bare-metal.css
new file mode 100644
index 00000000..25ad7bbb
--- /dev/null
+++ b/docs/_static/css/installation/running-on-bare-metal.css
@@ -0,0 +1,11 @@
+.toctree-l1 {
+  background-color: transparent;
+}
+
+.current > .current > .internal {
+  background-color: #fff;
+  color: #FD8F01;
+  border: transparent;
+  padding: 11px 12px 11px 28px;
+  border: none !important;
+}
\ No newline at end of file
diff --git a/docs/_static/css/leftSidebar.css b/docs/_static/css/leftSidebar.css
new file mode 100644
index 00000000..87112121
--- /dev/null
+++ b/docs/_static/css/leftSidebar.css
@@ -0,0 +1,371 @@
+nav.wy-nav-side {
+  padding-bottom: 1em !important;
+}
+
+.wy-nav-side {
+  padding: 20px 19px;
+  width: 294px;
+  height: calc(100vh - 50px);
+}
+
+.wy-form input {
+  height: 32px;
+}
+
+.wy-form input::placeholder {
+  font-family: 'Archivo', sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  letter-spacing: -0.02em;
+}
+
+.wy-side-nav-search {
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0;
+
+  & > .icon-home,
+  & > .version {
+    display: none
+  }
+
+  & input {
+    border-color: #C4C9CC;
+
+    &::placeholder {
+      color: #8D9499;
+    }
+  }
+}
+
+.wy-nav-side,
+.wy-nav-side .wy-side-nav-search {
+  background-color: #F6F7F7
+}
+
+ul.current > li.toctree-l1[aria-expanded=false] > a.current {
+  padding-left: 25px;
+  color: #FD8F01;
+
+  & button.toctree-expand::before {
+    content: '+';
+    color: #FD8F01;
+  }
+}
+
+ul.current > li.toctree-l1[aria-expanded=false] > a.internal:has( + ul[aria-expanded=false]) {
+  padding-left: 25px;
+  color: #FD8F01;
+
+  & button.toctree-expand::before {
+    content: '+';
+    color: #FD8F01;
+  }
+}
+
+ul.current > li.toctree-l1.current > ul > li.toctree-l2[aria-expanded=false]:has(ul > li > a.current) > a.internal {
+  color: #FD8F01;
+  padding-top: 11px;
+  padding-bottom: 11px;
+  padding-right: 12px;
+}
+
+ul.current > li.toctree-l1.current > 
+  ul > li.toctree-l2.current > ul > li.toctree-l3[aria-expanded=false]
+  > a.current {
+  color: #FD8F01;
+  padding-top: 11px;
+  padding-bottom: 11px;
+  padding-right: 12px;
+}
+
+ul.current > li.toctree-l1.current > 
+  ul > li.toctree-l2.current > ul > li.toctree-l3[aria-expanded=false]:has(ul > li.toctree-l4 > a.current)
+  > a.internal {
+  color: #FD8F01;
+  padding-top: 11px;
+  padding-bottom: 11px;
+  padding-right: 12px;
+}
+
+.toctree-l2 > ul > li.toctree-l3.current {
+  padding-left: 0 !important;
+  background-color: #fff;
+}
+
+.wy-menu-vertical {
+  width: 100%;
+  max-width: 292px;
+
+  & a {
+    color: #121010;
+    font-family: 'Archivo', sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    letter-spacing: -0.02em;
+    padding: 11px 12px;
+  }
+
+  & p.caption {
+    color: #8D9499;
+    font-family: 'Archivo', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: -0.02em;
+    padding: 5px 12px;
+    margin-top: 6px;
+    margin-bottom: 4px;
+    text-transform: none;
+  }
+  
+  & li.toctree-l1.current > a {
+    background-color: #fff;
+    color: #FD8F01;
+    border: transparent;
+    padding: 11px 12px;
+  }
+  
+  & > ul.current > li.toctree-l1.current > a.internal:has(+ ul) {
+    padding-left: 25px !important;
+  }
+  
+  & > ul.current > li.toctree-l1.current > a.current {
+    padding-left: 12px;
+  }
+  
+  & li.toctree-l1.current .toctree-l2 > a {
+    background-color: #fff;
+    border: transparent;
+  }
+  
+  & li.toctree-l1.current .toctree-l2 > a.internal {
+    padding-left: 35px !important;
+  }
+  
+  & li.toctree-l1.current .toctree-l2.current > a.internal:first-of-type {
+    color: #fdab10;
+  }
+  
+  & li.toctree-l1.current .toctree-l2 > a:hover {
+    background-color: #E1E4E5;
+  }
+  
+  & li.toctree-l1.current .toctree-l2 > a.current {
+    color: #fdab10;
+    padding: 11px 12px 11px 35px;
+  }
+  
+  & li.toctree-l1.current .toctree-l2 > a:hover {
+    background-color: #E1E4E5;
+  }
+  
+  & li.toctree-l2.current > a, 
+  & li.toctree-l2.current li.toctree-l3 > a {
+    background: #fff;
+    border: none;
+    padding-left: 50px;
+  }
+  
+  & li.toctree-l2.current li.toctree-l3 > a.current,
+  & li.toctree-l2.current li.toctree-l3.current > a.internal {
+    padding-left: 50px !important;
+    color: #fdab10;
+  }
+
+  & li.toctree-l3.current li.toctree-l4 > a {
+    background: #fff;
+    padding-left: 65px !important;
+    border-right: none;
+  }
+  
+  & li.toctree-l3.current li.toctree-l4 > a.current {
+    color: #fdab10;
+  }
+}
+
+.wy-menu-vertical a:hover,
+.wy-menu-vertical > ul.current > li.toctree-l1.current > a:hover,
+.wy-menu-vertical li.toctree-l1.current .toctree-l2 > a:hover,
+.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a:hover,
+.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a:hover {
+  background-color: #E1E4E5;
+}
+
+.wy-menu-vertical ul li .current > a {
+  padding: 11px 12px !important;
+}
+
+.wy-menu-vertical > ul.current[aria-expanded=true] > li.toctree-l1:has(a[aria-expanded=false]) > a {
+  padding-left: 25px;
+}
+
+.wy-menu-vertical > ul.current[aria-expanded=true] > li.toctree-l1:not(:has( ~ li:only-child a)) > a:has(.toctree-expand) {
+  padding-left: 25px;
+}
+
+.wy-side-scroll {
+  /* that makes scroll possible to the end of div */
+  height: 94%;
+}
+
+.wy-nav-top {
+  display: none;
+}
+
+.openLeftSidebarMenuButton {
+	width: 24px;
+	height: 24px;
+	cursor: pointer;
+	transition: transform 250ms linear;
+}
+
+.openLeftSidebarMenuButton:hover,
+.closeLeftSidebarMenuButton:hover {
+	transform: scale(1.05);
+}
+
+div.wy-nav-content > div.rst-content > div:has(div.openLeftSidebarMenuButton) {
+	display: flex;
+}
+
+div.wy-nav-content
+	> div.rst-content
+	> div:has(div.openLeftSidebarMenuButton)
+	> .wy-breadcrumbs {
+	margin-left: 20px;
+	width: 100%;
+}
+
+.closeButtonDivLine {
+	width: 100%;
+	display: flex;
+	position: sticky;
+	height: 30px;
+	justify-content: flex-end;
+}
+
+.closeLeftSidebarMenuButton {
+  width: 83px;
+  height: 32px;
+  margin-right: -6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #FFBF12;
+  border-radius: 4px;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  letter-spacing: -0.5px;
+  font-weight: 400;
+  color: #FFF;
+  cursor: pointer;
+  align-self: flex-end;
+	transition: transform 250ms linear;
+
+  &::before {
+    content: url('../images/close-sidebar-icon.svg');
+    height: 100%;
+    display: flex;
+    align-items: center;
+    width: 14px;
+    margin-right: 10px;
+    margin-top: 3px;
+  }
+}
+
+.additionalStylesForShift {
+  display: block !important;
+  padding-bottom: 10px !important;
+}
+
+.overlay {
+	background-color: #E7E7E7;
+}
+
+.wy-body-for-nav:has(.overlay) {
+  background-color: rgb(209,209,209);
+}
+
+.display_none {
+	display: none !important;
+}
+
+@media screen and (max-width: 575px) {
+  .wy-menu-vertical {
+    padding: 10px 0 0 0;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .wy-side-nav-search {
+    max-width: 256px;
+  }
+
+  .wy-menu-vertical {
+    padding: 10px 35px 0 0;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .wy-nav-side {
+    border-radius: 0;
+    position: fixed;
+    top: 60px;
+  }
+
+  .wy-side-scroll::-webkit-scrollbar {
+    display: none
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .wy-nav-side {
+    border-radius: 16px;
+    position: fixed;
+    left: unset;
+    top: 70px;
+    min-height: unset;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .wy-nav-side {
+    height: calc(100vh - 60px);
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .wy-nav-side {
+    height: calc(100vh - 73px);
+  }
+}
+
+@media screen and (max-height: 300px) {
+  .wy-side-scroll {
+    height: 78%;
+  }
+}
+
+@media screen and (min-height: 301px) and (max-height: 400px) {
+  .wy-side-scroll {
+    height: 82%;
+  }
+}
+
+@media screen and (min-height: 401px) and (max-height: 500px) {
+  .wy-side-scroll {
+    height: 88%;
+  }
+}
+
+@media screen and (min-height: 501px) and (max-height: 700px) {
+  .wy-side-scroll {
+    height: 90%;
+  }
+}
+
+@media screen and (min-height: 701px) {
+  .wy-side-scroll {
+    height: 94%;
+  }
+}
\ No newline at end of file
diff --git a/docs/_static/css/linkButtons.css b/docs/_static/css/linkButtons.css
new file mode 100644
index 00000000..11a48e64
--- /dev/null
+++ b/docs/_static/css/linkButtons.css
@@ -0,0 +1,57 @@
+.rst-footer-buttons {
+  .fa-arrow-circle-left {
+    padding-left: 25px;
+  } 
+
+  .fa-arrow-circle-left::before {
+    content: url('../images/arrow-left.svg');
+    position: absolute;
+    top: 10px;
+    left: 15px;
+  }
+
+  & > .btn-neutral {
+    background: #fff !important;
+    min-width: 90px;
+    height: 40px;
+    border: 2px solid #FD8F01;
+    color: #121010 !important;
+    font-family: 'Archivo', sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    position: relative;
+    text-align: left;
+    box-shadow: none;
+    transition: transform 250ms linear;
+    display: flex;
+    align-items: center;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-radius: 4px;
+
+    &:hover,
+    &:active {
+      transform: scale(1.05);
+      /* padding-left: 16px; */
+    }
+
+    &:focus {
+      outline: none;  
+    }
+
+    .fa-arrow-circle-right::before {
+      content: url('../images/arrow-right.svg');
+      position: absolute;
+      top: 10px;
+      right: 15px;
+    }
+  }
+}
+
+p > a.reference.external,
+p > a,
+#partaker-i5 > p > a.external {
+  color: #FD8F01;
+  word-break: break-word;
+}
diff --git a/docs/_static/css/lists.css b/docs/_static/css/lists.css
new file mode 100644
index 00000000..140663c9
--- /dev/null
+++ b/docs/_static/css/lists.css
@@ -0,0 +1,56 @@
+.simple > li,
+.compound > ul > li,
+.simple > li > ul > li,
+#installation-and-image-management > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#running-vyos-in-virtual-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#running-vyos-in-virtual-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3,
+#running-vyos-in-cloud-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#running-vyos-in-cloud-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3,
+#configuration-blueprints > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#configuration-blueprints > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3,
+#contributing > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#contributing > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3 {
+  list-style: none !important;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: -15px;
+    width: 6px;
+    height: 6px;
+    background-color: #000;
+    border-radius: 50%;
+  }
+}
+
+.simple > li a,
+.compound > ul > li a,
+.simple > li > ul > li a {
+  color: #FD8F01;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: -0.5px;
+  height: 26px;
+}
+
+.simple > li > ul > li p {
+  color: #525659;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: -0.5px;
+  height: 26px;
+}
+
+#site-to-site ul,
+#troubleshooting ol,
+#troubleshooting ul {
+  margin-bottom: 0 !important;
+}
+
+.rst-content:has(#troubleshooting) .rst-footer-buttons {
+  margin-top: 20px !important;
+}
\ No newline at end of file
diff --git a/docs/_static/css/scrolls.css b/docs/_static/css/scrolls.css
new file mode 100644
index 00000000..26cfe413
--- /dev/null
+++ b/docs/_static/css/scrolls.css
@@ -0,0 +1,20 @@
+.wy-table-responsive {
+  scrollbar-color: #99A0A5 transparent;
+  scroll-behavior: smooth;
+
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 8px;
+    margin: 0 10px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background-color: #99A0A5;
+    border-radius: 8px;
+    margin: 0 10px;
+  }
+}
diff --git a/docs/_static/css/separate-commands.css b/docs/_static/css/separate-commands.css
new file mode 100644
index 00000000..5547c4ad
--- /dev/null
+++ b/docs/_static/css/separate-commands.css
@@ -0,0 +1,116 @@
+.rst-content code.literal {
+  border: unset;
+  background-color: unset;
+  border: 1px solid rgba(253, 143, 1, 0.2);
+  background-color: #FFF4E6;
+  font-family: 'Archivo', sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  color: #121010 !important;
+  border-radius: 4px;
+  padding: 3px 6px;
+  word-break: break-all;
+
+  & > span.pre:nth-child(n+ 2) {
+    padding-left: 5px;
+  }
+}
+
+div.opcmd-heading,
+div.cfgcmd-heading,
+table .opcmd,
+table .cfgcmd {
+  padding: 0;
+  display: flex;
+  background-color: unset;
+  border: none;
+  border-radius: 8px 0 0 8px;
+}
+
+div.opcmd-heading,
+div.cfgcmd-heading {
+  margin-bottom: 15px;
+}
+
+div.opcmd-heading,
+table .opcmd {
+  border-left: 5px solid #B8E9F9;
+}
+
+div.cfgcmd-heading,
+table .cfgcmd {
+  border-left: 5px solid #FD8F01;
+}
+
+span {
+  &.opcmd,
+  &.cfgcmd {
+    display: flex;
+    padding: 4px 8px 8px 30px;
+    align-items: center;
+    color: #121010 !important;
+    font-family: 'Roboto Mono', monospace !important;
+    letter-spacing: -0.04em !important;
+    font-weight: 500 !important;
+    position: relative;
+    word-break: break-all;
+
+    &::before {
+      content: url('../images/cmnd-link-dollar-icon.svg');
+      display: flex;
+      padding-right: 8px;
+      align-items: center;
+      position: absolute;
+      top: 6px;
+      left: 8px;
+    }
+  }
+
+  &.opcmd {
+    background-color: #EBF9FF;
+  }
+  
+  &.cfgcmd {
+    background-color: #FFF4E6;
+  }
+}
+
+span.opcmd,
+span.cfgcmd {
+  font-size: 16px !important;
+}
+
+table span.opcmd,
+table span.cfgcmd {
+  font-size: 13px !important;
+}
+
+.opcmd-heading > a.cmdlink,
+.cfgcmd-heading > a.cmdlink {
+  display: flex;
+
+  &::after {
+    display: flex;
+    align-items: center;
+    content: '';
+    height: 100%;
+    align-items: center;
+    padding-right: 12px;
+    padding-top: 3px;
+    border-radius: 0 8px 8px 0;
+  }
+}
+
+.opcmd-heading:hover a.cmdlink:after,
+.cfgcmd-heading:hover a.cmdlink:after {
+  content: url('../images/cmnd-link-icon.svg');
+  padding-right: 10px;
+}
+
+.opcmd-heading a.cmdlink:after {
+  background-color: #EBF9FF;
+}
+
+.cfgcmd-heading a.cmdlink:after {
+  background-color: #FFF4E6;
+}
\ No newline at end of file
diff --git a/docs/_static/css/tables.css b/docs/_static/css/tables.css
new file mode 100644
index 00000000..7a106d56
--- /dev/null
+++ b/docs/_static/css/tables.css
@@ -0,0 +1,231 @@
+.wy-table-responsive {
+  overflow : auto !important ;
+  width: 100%;
+
+  & table {
+    border: none !important;
+
+
+    & td {
+      white-space : normal  !important;
+    }
+
+    & > caption:hover a {
+      position: relative;
+
+      &::after {
+        content: url('../images/cmnd-link-icon.svg');
+        position: absolute;
+        top: 0;
+        right: -3px;
+        z-index: 2;
+        background-color: #fff;
+        width: 20px;
+        height: 100%;
+      }
+    }
+  }
+}
+
+#coverage table.docutils td.coverage-ok p {
+  color: green;
+  text-align: center;
+}
+
+#coverage table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-fail p,
+#coverage table.docutils td.coverage-fail p {
+  color: red;
+  text-align: center;
+}
+
+#coverage a.paginate_button.current,
+#coverage a.paginate_button.next,
+#coverage a.paginate_button.previous {
+  color: #FD8F01 !important;
+  background-color: none;
+  background: none;
+}
+
+#coverage a.paginate_button {
+  margin-left: 0;
+  border: unset;
+  border-radius: 8px;
+  transition: background-color 250ms linear, color 250ms linear;
+}
+
+#coverage a.paginate_button:hover,
+#coverage a.paginate_button.current:hover,
+#coverage a.paginate_button.next:hover,
+#coverage a.paginate_button.previous:hover {
+  background-color: #E1E4E5 !important;
+  background: none;
+  border: unset;
+  color: #121010 !important;
+}
+
+.selectDiv {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 11111;
+  background-color: red;
+}
+
+#table-cfgcmd_wrapper,
+#table-opcmd_wrapper {
+  & label {
+    color: #121010 !important;
+    font-family: 'Archivo', sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  } 
+
+  & option {
+    color: #8D9499 !important;
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: -0.02em;
+  }
+
+  & select {
+    height: 40px;
+    width: 80px;
+    padding: 10px 14px;
+    margin: 0 10px;
+    border-radius: 4px;
+    border: 1px solid #C6C9CC !important;
+    color: #8D9499;
+    font-size: 16px;
+    position: relative;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url("../images/select-arrow.svg");
+    background-repeat: no-repeat;
+    background-position: right 18px top 50%;
+  }
+
+  & input {
+    margin-left: 16px;
+    height: 40px;
+    padding: 10px 14px;
+    width: 245px;
+    border: 1px solid #C6C9CC !important;
+    color: #8D9499;
+    font-size: 16px;
+  }
+
+  & .wy-table-responsive {
+    padding-top: 24px;
+  }
+}
+
+@media screen and (max-width: 575px) {
+  #table-cfgcmd_wrapper,
+  #table-opcmd_wrapper {
+    & label {
+      & input {
+        margin-top: 10px
+      }
+    }
+  }
+}
+
+thead tr th {
+  padding: 10px 16px !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  max-height: 40px;
+
+  & p {
+    color: #121010 !important;
+    font-family: 'Archivo', sans-serif;
+    font-size: 14px !important;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    margin-right: 3px;
+  }
+}
+
+.rst-content table.docutils td, 
+.wy-table-bordered-all td {
+  border-left: none !important;
+}
+
+.rst-content table.docutils th:nth-child(2n), 
+.rst-content table.field-list th:nth-child(2n), 
+.wy-table td, .wy-table th:nth-child(2n) {
+  border-radius: 8px 8px 0 0 ;
+}
+
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.docutils td:nth-child(2n), 
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.docutils th:nth-child(2n), 
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.field-list td:nth-child(2n), 
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.field-list th:nth-child(2n), 
+.wy-grid-for-nav:has(nav.display_none) .wy-table td, 
+.wy-grid-for-nav:has(nav.display_none) .wy-table th:nth-child(2n) {
+  background-color: #FAFAFA !important; 
+}
+
+.wy-grid-for-nav:has(nav.shift) .wy-nav-content-wrap-closed-sidebar .rst-content table th,
+.wy-grid-for-nav:has(nav.shift) .wy-nav-content-wrap-closed-sidebar .rst-content table td {
+	background-color: #E7E7E7 !important;
+}
+
+.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td, 
+.wy-table-backed, 
+.wy-table-odd td, 
+.wy-table-striped tr:nth-child(2n-1) td {
+  background-color: unset;
+}
+
+tbody tr td {
+  & p {
+    color: #525659 !important;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px !important;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+  }
+
+  &.coverage-ok {
+    & p {
+      color: transparent !important;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      position: relative;
+
+      &::before {
+        content: url('../images/check.svg');
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+      }
+    }
+  }
+}
+
+.dataTables_info {
+  color: #121010 !important;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px !important;
+  font-weight: 400;
+  letter-spacing: -0.5px;
+}
+
+.paginate_button {
+  font-family: 'Archivo', sans-serif;
+  font-size: 16px !important;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+}
\ No newline at end of file
diff --git a/docs/_static/css/text.css b/docs/_static/css/text.css
new file mode 100644
index 00000000..f1179534
--- /dev/null
+++ b/docs/_static/css/text.css
@@ -0,0 +1,120 @@
+.docutils .card-header p {
+  font-family: 'Archivo', sans-serif;
+  font-weight: 600;
+  font-size: 18px;
+  letter-spacing: -0.05em;
+  padding-bottom: 18px;
+  color: #121010;
+}
+
+p,
+blockquote > div > dl,
+blockquote > div > dd,
+#container dl,
+#firewall dl,
+#high-availability dl,
+#development td,
+#development th,
+caption.caption-text,
+.simple > dt,
+div.line-block,
+.paginate_button,
+.dataTables_info,
+#operational-commands label,
+.card-body .card-text,
+#search-results a {
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  letter-spacing: -0.5px;
+  font-weight: 400;
+  color: #525659;
+  line-height: 1.6;
+}
+
+p > strong {
+  color: #121010;
+}
+
+.card-body .card-text {
+  padding-bottom: 22px;
+  display: block;
+}
+
+.simple > dt {
+  font-weight: 600;
+}
+
+#dual-hub-dmvpn-with-vyos td > p,
+#route-based-redundant-site-to-site-vpn-to-azure-bgp-over-ikev2-ipsec td > p,
+#route-based-site-to-site-vpn-to-azure-bgp-over-ikev2-ipsec td > p,
+#development td p,
+#development th p {
+  font-size: 14px !important;
+}
+
+#development #writing-good-commit-messages > ul.simple > li > ul {
+
+  & > li:nth-child(2) {
+    padding-bottom: 23px;
+  }
+
+  & > li:nth-child(2) {
+    padding-bottom: 53px;
+  }
+}
+
+#installation-and-image-management > div > p > span {
+  font-family: 'Archivo', sans-serif;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-size: 24px;
+  color: #121010;
+}
+
+.caption-text {
+  text-align: left;
+  font-family: 'Roboto', sans-serif;
+}
+
+p .caption-text {
+  color: #8D9499;
+  font-family: 'Roboto', sans-serif;
+}
+
+aside.footnote  .label {
+  & > a[role=doc-backlink] {
+    color: #fd8f01;
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+  }
+}
+
+aside.footnote > p {
+  padding-bottom: 15px !important;
+}
+
+#about a .external,
+#a-note-on-copyright > dl.brackets > dt,
+#a-note-on-copyright > dl.brackets > dt > .brackets > a,
+a.footnote-reference.brackets,
+#search-results a {
+  color: #FD8F01;
+}
+
+#history p {
+  padding-bottom: 22px;
+  margin-bottom: 0;
+  font-size: 16px;
+}
+
+#a-note-on-copyright > dl p {
+  padding-bottom: 12px;
+}
+
+#search-results a {
+  font-size: 19px;
+}
+
+#specify-custom-config-file {
+  padding-top: 15px;
+}
\ No newline at end of file