dhcp-ha: correction of dhcp HA example and option (#1646)

(cherry picked from commit 102eb9d462d7dcaaba71c1b7e27cf91fda84a21f)

Co-authored-by: factor2431 <factor2431@outlook.com>

.github/reviewers.yml

@@ -1,3 +0,0 @@
----
-'**/*':
-  - rebortg

.github/vyos-linter.py

@@ -1,177 +0,0 @@
-import os
-import re
-import ipaddress
-import sys
-import ast
-
-IPV4SEG  = r'(?:25[0-5]|(?:2[0-4]|1{0,1}[0-9]){0,1}[0-9])'
-IPV4ADDR = r'\b(?:(?:' + IPV4SEG + r'\.){3,3}' + IPV4SEG + r')\b'
-IPV6SEG  = r'(?:(?:[0-9a-fA-F]){1,4})'
-IPV6GROUPS = (
-    r'(?:' + IPV6SEG + r':){7,7}' + IPV6SEG,                  # 1:2:3:4:5:6:7:8
-    r'(?:\s' + IPV6SEG + r':){1,7}:',                           # 1::                                 1:2:3:4:5:6:7::
-    r'(?:' + IPV6SEG + r':){1,6}:' + IPV6SEG,                 # 1::8               1:2:3:4:5:6::8   1:2:3:4:5:6::8
-    r'(?:' + IPV6SEG + r':){1,5}(?::' + IPV6SEG + r'){1,2}',  # 1::7:8             1:2:3:4:5::7:8   1:2:3:4:5::8
-    r'(?:' + IPV6SEG + r':){1,4}(?::' + IPV6SEG + r'){1,3}',  # 1::6:7:8           1:2:3:4::6:7:8   1:2:3:4::8
-    r'(?:' + IPV6SEG + r':){1,3}(?::' + IPV6SEG + r'){1,4}',  # 1::5:6:7:8         1:2:3::5:6:7:8   1:2:3::8
-    r'(?:' + IPV6SEG + r':){1,2}(?::' + IPV6SEG + r'){1,5}',  # 1::4:5:6:7:8       1:2::4:5:6:7:8   1:2::8
-    IPV6SEG + r':(?:(?::' + IPV6SEG + r'){1,6})',             # 1::3:4:5:6:7:8     1::3:4:5:6:7:8   1::8
-    r':(?:(?::' + IPV6SEG + r'){1,7}|:)',                     # ::2:3:4:5:6:7:8    ::2:3:4:5:6:7:8  ::8       ::
-    r'fe80:(?::' + IPV6SEG + r'){0,4}%[0-9a-zA-Z]{1,}',       # fe80::7:8%eth0     fe80::7:8%1  (link-local IPv6 addresses with zone index)
-    r'::(?:ffff(?::0{1,4}){0,1}:){0,1}[^\s:]' + IPV4ADDR,     # ::255.255.255.255  ::ffff:255.255.255.255  ::ffff:0:255.255.255.255 (IPv4-mapped IPv6 addresses and IPv4-translated addresses)
-    r'(?:' + IPV6SEG + r':){1,4}:[^\s:]' + IPV4ADDR,          # 2001:db8:3:4::192.0.2.33  64:ff9b::192.0.2.33 (IPv4-Embedded IPv6 Address)
-)
-IPV6ADDR = '|'.join(['(?:{})'.format(g) for g in IPV6GROUPS[::-1]])  # Reverse rows for greedy match
-
-MAC = r'([0-9A-F]{2}[:-]){5}([0-9A-F]{2})'
-
-NUMBER = r"([\s']\d+[\s'])"
-
-
-def lint_mac(cnt, line):
-    mac = re.search(MAC, line, re.I)
-    if mac is not None:
-        mac = mac.group()
-        u_mac = re.search(r'((00)[:-](53)([:-][0-9A-F]{2}){4})', mac, re.I)
-        m_mac = re.search(r'((90)[:-](10)([:-][0-9A-F]{2}){4})', mac, re.I)
-        if u_mac is None and m_mac is None:
-            return (f"Use MAC reserved for Documentation (RFC7042): {mac}", cnt, 'error')
-
-
-def lint_ipv4(cnt, line):
-    ip = re.search(IPV4ADDR, line, re.I)
-    if ip is not None:
-        ip = ipaddress.ip_address(ip.group().strip(' '))
-        # https://docs.python.org/3/library/ipaddress.html#ipaddress.IPv4Address.is_private
-        if ip.is_private:
-            return None
-        if ip.is_multicast:
-            return None
-        if ip.is_global is False:
-            return None
-        return (f"Use IPv4 reserved for Documentation (RFC 5737) or private Space: {ip}", cnt, 'error')
-
-
-def lint_ipv6(cnt, line):
-    ip = re.search(IPV6ADDR, line, re.I)
-    if ip is not None:
-        ip = ipaddress.ip_address(ip.group().strip(' '))
-        if ip.is_private:
-            return None
-        if ip.is_multicast:
-            return None
-        if ip.is_global is False:
-            return None
-        return (f"Use IPv6 reserved for Documentation (RFC 3849) or private Space: {ip}", cnt, 'error')
-
-
-def lint_AS(cnt, line):
-    number = re.search(NUMBER, line, re.I)
-    if number:
-        pass
-        # find a way to detect AS numbers
-
-
-def lint_linelen(cnt, line):
-    line = line.rstrip()
-    if len(line) > 80:
-        return (f"Line too long: len={len(line)}", cnt, 'warning')
-
-def handle_file_action(filepath):
-    errors = []
-    try:
-        with open(filepath) as fp:
-            line = fp.readline()
-            cnt = 1
-            test_line_lenght = True
-            start_vyoslinter = True
-            indentation = 0
-            while line:
-                # search for ignore linter comments in lines
-                if ".. stop_vyoslinter" in line:
-                    start_vyoslinter = False
-                if ".. start_vyoslinter" in line:
-                    start_vyoslinter = True
-                if start_vyoslinter:
-                    # ignore every '.. code-block::' for line lenght
-                    # rst code-block have its own style in html the format in rst
-                    # and the build page must be the same
-                    if test_line_lenght is False:
-                        if len(line) > indentation:
-                            #print(f"'{line}'")
-                            #print(indentation)
-                            if line[indentation].isspace() is False:
-                                test_line_lenght = True
-
-                    if ".. code-block::" in line:
-                        test_line_lenght = False
-                        indentation = 0
-                        for i in line:
-                            if i.isspace():
-                                indentation = indentation + 1
-                            else:
-                                break
-                    
-                    err_mac = lint_mac(cnt, line.strip())
-                    # disable mac detection for the moment, too many false positives
-                    err_mac = None
-                    err_ip4 = lint_ipv4(cnt, line.strip())
-                    err_ip6 = lint_ipv6(cnt, line.strip())
-                    if test_line_lenght:
-                        err_len = lint_linelen(cnt, line)
-                    else:
-                        err_len = None
-                    if err_mac:
-                        errors.append(err_mac)
-                    if err_ip4:
-                        errors.append(err_ip4)
-                    if err_ip6:
-                        errors.append(err_ip6)
-                    if err_len:
-                        errors.append(err_len)
-                
-                line = fp.readline()
-                cnt += 1
-            
-            # ensure linter was not stop on top and forgot to tun on again
-            if start_vyoslinter == False:
-                errors.append((f"Don't forgett to turn linter back on", cnt, 'error'))
-    finally:
-        fp.close()
-
-    if len(errors) > 0:
-        '''
-        "::{$type} file={$filename},line={$line},col=$column::{$log}"
-        '''
-        print(f"File: {filepath}")
-        for error in errors:
-            print(f"::{error[2]} file={filepath},line={error[1]}::{error[0]}")
-        print('')
-        return False
-
-
-def main():
-    bool_error = True
-    print('start')
-    try:
-        files = ast.literal_eval(sys.argv[1])
-        for file in files:
-                if file[-4:] in [".rst", ".txt"] and "_build" not in file:
-                    if handle_file_action(file) is False:
-                        bool_error = False
-    except Exception as e:
-        for root, dirs, files in os.walk("docs"):
-            path = root.split(os.sep)
-            for file in files:
-                if file[-4:] in [".rst", ".txt"] and "_build" not in path:
-                    fpath = '/'.join(path)
-                    filepath = f"{fpath}/{file}"
-                    if handle_file_action(filepath) is False:
-                        bool_error = False
-
-    return bool_error
-
-
-if __name__ == "__main__":
-    if main() == False:
-        exit(1)

.github/workflows/auto-author-assign.yml

@@ -3,25 +3,12 @@ on:
   pull_request_target:
     types: [opened, reopened, ready_for_review, locked]
 
+
 permissions:
   pull-requests: write
+  contents: read
 
 jobs:
-  # https://github.com/marketplace/actions/auto-author-assign
   assign-author:
-    runs-on: ubuntu-latest
-    steps:
-      - name: "Assign Author to PR"
-        uses: toshimaru/auto-author-assign@v1.3.5
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-
-  # https://github.com/shufo/auto-assign-reviewer-by-files
-  assign_reviewer:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Request review based on files changes and/or groups the author belongs to
-        uses: shufo/auto-assign-reviewer-by-files@v1.1.1
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          config: .github/reviewers.yml
+    uses: vyos/.github/.github/workflows/assign-author.yml@feature/T6349-reusable-workflows
+    secrets: inherit

.github/workflows/check-pr-conflicts.yml

@@ -0,0 +1,14 @@
+
+name: "PR Conflicts checker"
+on:
+  pull_request_target:
+    types: [synchronize]
+
+permissions:
+  pull-requests: write
+  contents: read
+
+jobs:
+  check-pr-conflict-call:
+    uses: vyos/.github/.github/workflows/check-pr-merge-conflict.yml@feature/T6349-reusable-workflows
+    secrets: inherit

.github/workflows/lint-doc.yml

@@ -0,0 +1,10 @@
+name: Lint Doc
+on:
+  pull_request:
+
+jobs:
+  lint-doc:
+    uses: vyos/.github/.github/workflows/lint-doc.yml@feature/T6349-reusable-workflows
+    secrets: inherit
+    
+    

.github/workflows/main.yml

@@ -1,27 +0,0 @@
-name: Linting
-on:
-  pull_request:
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v2
-
-    - name: File Changes
-      id: file_changes
-      uses: trilom/file-changes-action@v1.2.3
-
-    - name: Set up Python
-      uses: actions/setup-python@v2
-      with:
-        python-version: '3.x'
-
-    - name: run python based linter
-      run: python .github/vyos-linter.py '${{ steps.file_changes.outputs.files_modified }}'
-
-    env:
-      GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-    
-    

.github/workflows/pr-conflicts.yml

@@ -1,19 +0,0 @@
-name: "PR Conflicts checker"
-on:
-  pull_request_target:
-    types: [synchronize]
-
-jobs:
-  Conflict_Check:
-    name: 'Check PR status: conflicts and resolution'
-    runs-on: ubuntu-22.04
-    steps:
-      - name: check if PRs are dirty
-        uses: eps1lon/actions-label-merge-conflict@releases/2.x
-        with:
-          dirtyLabel: "state: conflict"
-          removeOnDirtyLabel: "state: conflict resolved"
-          repoToken: "${{ secrets.GITHUB_TOKEN }}"
-          commentOnDirty: "This pull request has conflicts, please resolve those before we can evaluate the pull request."
-          commentOnClean: "Conflicts have been resolved. A maintainer will review the pull request shortly."
-

.gitignore

@@ -7,6 +7,7 @@ venv/
 ENV/
 .venv
 Pipfile.lock
+Pipfile
 
 # put various editor ignores here
 .vscode/

.readthedocs.yml

@@ -18,8 +18,8 @@ sphinx:
 #  configuration: mkdocs.yml
 
 # Optionally build your docs in additional formats such as PDF
-#formats:
-#  - pdf
+formats:
+  - pdf
 
 # Optionally set the version of Python and requirements required to build your docs
 python:

CODEOWNERS

@@ -0,0 +1,2 @@
+# * @vyos/reviewers
+* @rebortg

README.md

@@ -90,12 +90,14 @@ If the `vyos/vyos-documentation` container could not be found locally it will be
 automatically fetched from Dockerhub.
 
 ```bash
-$ docker run --rm -it -v "$(pwd)":/vyos -w /vyos/docs \
-  -e GOSU_UID=$(id -u) -e GOSU_GID=$(id -g) vyos/vyos-documentation make html
+$ git clone https://github.com/vyos/vyos-documentation.git
 
-# sphinx autobuild
-$ docker run --rm -it -p 8000:8000 -v "$(pwd)":/vyos -w /vyos/docs -e \
-  GOSU_UID=$(id -u) -e GOSU_GID=$(id -g) vyos/vyos-documentation make livehtml
+$ cd vyos-documentation
+
+$ docker run --rm -it -v "$(pwd)":/vyos -w /vyos/docs -e GOSU_UID=$(id -u) -e GOSU_GID=$(id -g) vyos/vyos-documentation make html
+
+# For sphinx autobuild
+$ docker run --rm -it -p 8000:8000 -v "$(pwd)":/vyos -w /vyos/docs -e GOSU_UID=$(id -u) -e GOSU_GID=$(id -g) vyos/vyos-documentation make livehtml
 ```
 
 ### Test the docs
@@ -103,13 +105,11 @@ $ docker run --rm -it -p 8000:8000 -v "$(pwd)":/vyos -w /vyos/docs -e \
 To test all files, run:
 
 ```bash
-$ docker run --rm -it -v "$(pwd)":/vyos -w /vyos/docs \
-  -e GOSU_UID=$(id -u) -e GOSU_GID=$(id -g) vyos/vyos-documentation vale .
+$ docker run --rm -it -v "$(pwd)":/vyos -w /vyos/docs -e GOSU_UID=$(id -u) -e GOSU_GID=$(id -g) vyos/vyos-documentation vale .
 ```
 
 to test a specific file (e.g. `quick-start.rst`)
 
 ```bash
-$ docker run --rm -it -v "$(pwd)":/vyos -w /vyos/docs -e GOSU_UID=$(id -u) \
-  -e GOSU_GID=$(id -g) vyos/vyos-documentation vale quick-start.rst
+$ docker run --rm -it -v "$(pwd)":/vyos -w /vyos/docs -e GOSU_UID=$(id -u) -e GOSU_GID=$(id -g) vyos/vyos-documentation vale quick-start.rst
 ```

docker/Dockerfile

@@ -1,7 +1,7 @@
 # Must be run with --privileged flag
 # Recommended to run the container with a volume mapped
 # in order to easy exprort images built to "external" world
-FROM debian:11
+FROM debian:12
 LABEL authors="VyOS Maintainers <maintainers@vyos.io>"
 
 ENV DEBIAN_FRONTEND noninteractive
@@ -27,16 +27,14 @@ RUN apt-get update && apt-get install -y \
     curl \
     dos2unix
 
-
-
-RUN pip3 install Sphinx
-RUN pip3 install sphinx-rtd-theme
-RUN pip3 install sphinx-autobuild
-RUN pip3 install sphinx-notfound-page
-RUN pip3 install lxml
-RUN pip3 install myst-parser
-RUN pip3 install sphinx-panels
-
+RUN pip3 install --break-system-packages \
+    Sphinx \
+    sphinx-rtd-theme \
+    sphinx-autobuild \
+    sphinx-notfound-page \
+    lxml \
+    myst-parser \
+    sphinx_design
 
 # Cleanup
 RUN rm -rf /var/lib/apt/lists/*
@@ -44,13 +42,11 @@ RUN rm -rf /var/lib/apt/lists/*
 EXPOSE 8000
 
 # Allow password-less 'sudo' for all users in group 'sudo'
-RUN sed "s/^%sudo.*/%sudo\tALL=(ALL) NOPASSWD:ALL/g" -i /etc/sudoers && \
-    chmod a+s /usr/sbin/useradd /usr/sbin/groupadd /usr/sbin/gosu /usr/sbin/usermod
-
+RUN sed "s/^%sudo.*/%sudo\tALL=(ALL) NOPASSWD:ALL/g" -i /etc/sudoers
 
 COPY entrypoint.sh /usr/local/bin/entrypoint.sh
 
-# we need to convert the entrypoint with appropriate line endings, else
+# We need to convert the entrypoint with appropriate line endings, else
 # there will be an error:
 #     standard_init_linux.go:175: exec user process caused
 #     "no such file or directory"

docker/entrypoint.sh

@@ -23,10 +23,10 @@ if ! grep -q $NEW_GID /etc/group; then
     groupadd --gid $NEW_GID $USER_NAME
 fi
 
-useradd --shell /bin/bash --uid $NEW_UID --gid $NEW_GID --non-unique --create-home $USER_NAME
+useradd --shell /bin/bash --uid $NEW_UID --gid $NEW_GID --non-unique --create-home $USER_NAME --key UID_MIN=500
 usermod --append --groups sudo $USER_NAME
-sudo chown $NEW_UID:$NEW_GID /home/$USER_NAME
+chown $NEW_UID:$NEW_GID /home/$USER_NAME
 export HOME=/home/$USER_NAME
 
 # Execute process
-exec /usr/sbin/gosu $USER_NAME "$@"
+/usr/sbin/gosu $USER_NAME "$@"

docs/404.rst

@@ -8,4 +8,5 @@ Try using the search box or go to the release homepage:
 
   * `1.2.x (crux) <https://docs.vyos.io/en/crux/>`_
   * `1.3.x (equuleus) <https://docs.vyos.io/en/equuleus/>`_
-  * `rolling release (sagitta) <https://docs.vyos.io/en/latest/>`_
+  * `1.4.x (sagitta) <https://docs.vyos.io/en/sagitta/>`_
+  * `rolling release (circinus) <https://docs.vyos.io/en/latest/>`_

docs/_ext/vyos.py

@@ -530,7 +530,7 @@ def strip_cmd(cmd, debug=False):
         if c == "]":
             appearance = appearance - 1
 
-    # only if all [..] will be delete if appearance > 0 there is a syntax errror
+    # only if all [..] will be delete if appearance > 0 there is a syntax error
     if appearance == 0:
         cmd = cmd_new
     
@@ -545,7 +545,7 @@ def strip_cmd(cmd, debug=False):
         if c == ">":
             appearance = appearance - 1
 
-    # only if all <..> will be delete if appearance > 0 there is a syntax errror
+    # only if all <..> will be delete if appearance > 0 there is a syntax error
     if appearance == 0:
         cmd = cmd_new
 

docs/_html_extra/robots.txt

@@ -0,0 +1,7 @@
+User-agent: atlassian-bot
+Allow: /
+
+User-agent: *
+Disallow: # Allow everything
+
+Sitemap: https://docs.vyos.io/sitemap.xml

docs/_include/interface-evpn-uplink.txt

@@ -0,0 +1,11 @@
+.. cfgcmd:: set interfaces {{ var0 }} <interface> evpn uplink
+
+  When all the underlay links go down the PE no longer has access
+  to the VxLAN +overlay. To prevent blackholing of traffic the
+  server/ES links are protodowned on the PE.
+
+  A link can be setup for uplink tracking via the following example:
+
+  .. code-block:: none
+
+    set interfaces {{ var0 }} {{ var1 }} evpn uplink

docs/_include/vyos-1x

@@ -1 +1 @@
-Subproject commit 3d9a0b02d031a97b099ef6fe4ba07d7ce7eb958e
+Subproject commit f980f8b8010a9681c387d47c476254c89b0c4a25

docs/_locale/de/configuration.pot

@@ -12421,8 +12421,8 @@ msgid "Sometimes option lines in the generated OpenVPN configuration require quo
 msgstr "Sometimes option lines in the generated OpenVPN configuration require quotes. This is done through a hack on our config generator. You can pass quotes using the ``"`` statement."
 
 #: ../../configuration/service/dhcp-server.rst:771
-msgid "Sort the output by the specified key. Possible keys: expires, iaid_duid, ip, last_comm, pool, remaining, state, type (default = ip)"
-msgstr "Sort the output by the specified key. Possible keys: expires, iaid_duid, ip, last_comm, pool, remaining, state, type (default = ip)"
+msgid "Sort the output by the specified key. Possible keys: expires, duid, ip, last_comm, pool, remaining, state, type (default = ip)"
+msgstr "Sort the output by the specified key. Possible keys: expires, duid, ip, last_comm, pool, remaining, state, type (default = ip)"
 
 #: ../../configuration/service/dhcp-server.rst:566
 msgid "Sort the output by the specified key. Possible keys: ip, hardware_address, state, start, end, remaining, pool, hostname (default = ip)"
@@ -13647,8 +13647,8 @@ msgid "The hostname or IP address of the master"
 msgstr "The hostname or IP address of the master"
 
 #: ../../configuration/service/dhcp-server.rst:700
-msgid "The identifier is the device's DUID: colon-separated hex list (as used by isc-dhcp option dhcpv6.client-id). If the device already has a dynamic lease from the DHCPv6 server, its DUID can be found with ``show service dhcpv6 server leases``. The DUID begins at the 5th octet (after the 4th colon) of IAID_DUID."
-msgstr "The identifier is the device's DUID: colon-separated hex list (as used by isc-dhcp option dhcpv6.client-id). If the device already has a dynamic lease from the DHCPv6 server, its DUID can be found with ``show service dhcpv6 server leases``. The DUID begins at the 5th octet (after the 4th colon) of IAID_DUID."
+msgid "The identifier is the device's DUID: colon-separated hex list (as used by isc-dhcp option dhcpv6.client-id). If the device already has a dynamic lease from the DHCPv6 server, its DUID can be found with ``show service dhcpv6 server leases``."
+msgstr "The identifier is the device's DUID: colon-separated hex list (as used by isc-dhcp option dhcpv6.client-id). If the device already has a dynamic lease from the DHCPv6 server, its DUID can be found with ``show service dhcpv6 server leases``."
 
 #: ../../configuration/vpn/dmvpn.rst:237
 msgid "The individual spoke configurations only differ in the local IP address on the ``tun10`` interface. See the above diagram for the individual IP addresses."

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

docs/_static/css/code-snippets.css

@@ -0,0 +1,233 @@
+.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
+}
+
+.rst-content div:has(ul + blockquote) blockquote {
+  margin: 15px 0 15px 24px
+}
+
+@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;
+  }
+}

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

docs/_static/css/custom.css

@@ -1,193 +1,3 @@
-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: "";
-}
-
-td a.cmdlink,
-td a.cmdlink {
-  margin-left: 0px;
-}
-
-tr td p {
-  margin-bottom:0px
- }
-
-span.opcmd:before {
-  content: "$";
-  margin-right: 0px;
-}
-
-.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;
-}
-
-.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;
-}
-
-.opcmd-body,
-.cfgcmd-body {
-    margin: 6px 0;
-    padding-left: 12px;
-}
-
-
-
-.cfgcmd-heading .cmdlink:after,
-.opcmd-heading .cmdlink:after{
-    content: "";
-    font-family: FontAwesome
-}
-
-
-.cfgcmd-heading:not(:hover) .cmdlink,
-.opcmd-heading:not(:hover) .cmdlink {
-    display: none;
-}
-
-.defaultvalue{
-  font-size: 90%;
-  color: gray;
-  margin-bottom: 5px;
-
-}
-
-a.cmdlink {
-    font-size: 80%;
-    margin-left: 6px;
-}
-
-a.cmdlink span{
-    color: #2980B9;
-}
-
-a.cmdlink span:hover{
-    color: #3091d1;
-}
-
-.wy-nav-content {
-  max-width : none;
-}
-
-.wy-tray-container li.wy-tray-item-info {
-  background : #409ad5;
-}
-
-.wy-table-responsive {
-  overflow : visible !important;
-}
-
-.wy-table-responsive table td {
-  white-space : normal !important;
-}
-
-.wy-menu-vertical header,
-.wy-menu-vertical p.caption {
-  color : #ffcc00 !important;
-}
-
-.wy-menu-vertical li.current a {
-  color : #040077 !important;
-}
-
-.wy-menu-vertical li ul li a {
-  color : #ffffff !important;
-}
-
-.wy-menu-vertical a {
-  color : #ffffff !important;
-}
-
-.wy-menu-vertical a:active {
-  background-color : #409ad5 !important;
-}
-
-.wy-side-nav-search {
-  background-color : #ffffff !important;
-}
-
-.wy-side-nav-search img {
-  background-color : #ffffff !important;
-}
-
-.wy-side-nav-search > div.version {
-  color : #000000 !important;
-}
-
-.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
-}
-
-.wy-nav-top {
-  background-color : #ffffff;
-}
-
-.wy-nav-top img {
-  background-color : #000000 !important;
-}
-
-.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;
-}
-
-.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;
-
-}
-
-
 p.devwarning {
 	top: 10px;
 	position: sticky;
@@ -197,19 +7,529 @@ p.devwarning {
 	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;
+	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;
 }
 
-
-@media screen and (max-width: 768px) {
-  .wy-nav-top{
-    background-color: #fdab10;
-  }
+/* main page */
+.wy-body-for-nav {
+	background: #fff;
+  overflow-y: hidden
 }
 
-@media screen and (max-width: 768px) {
-  p.devwarning {
-    margin: 10px 10px 10px 10px;
-  }
+.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;
+	}
 }

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

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

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

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

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

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

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

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

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

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

docs/_static/images/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 10.5L5.32396 10.5L10.1836 16.0076L7.93407 17.9924L-0.000432575 9L7.93406 0.0075688L10.1836 1.99243L5.32396 7.5L18 7.5L18 10.5Z" fill="#FFAE12"/>
+</svg>

docs/_static/images/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-4.58639e-07 10.5L12.676 10.5L7.81642 16.0076L10.0659 17.9924L18.0004 9L10.0659 0.0075688L7.81642 1.99243L12.676 7.5L-3.27505e-07 7.5L-4.58639e-07 10.5Z" fill="#FFAE12"/>
+</svg>

docs/_static/images/breadcrumbs-icon.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L5 5L1 9" stroke="#8D9499" stroke-width="2"/>
+</svg>

docs/_static/images/check.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 6L8 12L18 2" stroke="#FFAE12" stroke-width="3"/>
+</svg>

docs/_static/images/close-sidebar-icon.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 10.5L5.32396 10.5L10.1836 16.0076L7.93407 17.9924L-0.000432575 9L7.93406 0.0075688L10.1836 1.99243L5.32396 7.5L18 7.5L18 10.5Z" fill="#FFF"/>
+</svg>