@netfoundry/docusaurus-theme 0.1.0 → 0.1.2

package/css/legacy.css

@@ -0,0 +1,2346 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+    --light-gray: 148, 163, 184;
+    --ziti-color-blue: 0, 104, 249;
+    --ziti-color-red: 217, 15, 95;
+    --ziti-color-mid1: 72, 74, 172;
+    --ziti-color-mid2: 144, 44, 133;
+    --ziti-rgb-primary: rgb(var(--ziti-color-blue));
+    --ziti-rgb-primary-a: rgb(var(--ziti-color-blue), .1);
+    --ziti-rgb-red: rgb(217, 15, 95);
+    --ziti-rgb-secondary: rgb(var(--ziti-color-red));
+    --ziti-rgb-secondary-a: rgb(var(--ziti-color-red), .1);
+    --ziti-rgb-mid1: rgb(var(--ziti-color-mid1));
+    --ziti-rgb-mid1-a: rgb(var(--ziti-color-mid1), .1);
+    --ziti-rgb-mid2: rgb(var(--ziti-color-mid2));
+    --ziti-rgb-mid2-a: rgb(var(--ziti-color-mid2), .1);
+    --ifm-font-color-base: #252525;
+    --ifm-font-color-inverse: #94a3b8;
+    --ifm-font-family-monospace: "Consolas", monospace;
+    --ifm-font-family-sans: "Open Sans", sans-serif;
+    --ifm-font-family-sans-default: sans-serif;
+    --ziti-landing-max-width: 1200px;
+    --ziti-max-width: 1400px;
+    --ifm-navbar-height: 50px;
+    --ifm-leading: 35px;
+    --ifm-background-color: #f8fafc;
+    --ifm-background-surface-color: #f1f5f9;
+    --ifm-background-surface-color-dark: #e1d4ee;
+    --ifm-footer-background-color: #f0f0f0;
+    --ifm-color-banner: #edac15;
+    --ifm-color-primary: #0068f9;
+    --ifm-color-primary-dark: #8519e7;
+    --ifm-color-primary-darker: #7e17dc;
+    --ifm-color-primary-darkest: #6813b5;
+    --ifm-color-primary-light: #a14ded;
+    --ifm-color-primary-lighter: #a85aee;
+    --ifm-color-primary-lightest: #b776f1;
+    --ifm-heading-color: 0 36 81;
+    --code-block-color: var(--ifm-heading-color);
+    --lighter-code-block-color: color-mix(in srgb, var(--ifm-heading-color) 70%, white 30%);
+    --code-block-background-color: #ECEEEF;
+    --ifm-navbar-item-padding-horizontal: .5em;
+    --background-color-1: #ffd0d0;
+    --landing-banner-1: #e0e4ee;
+    --ifm-menu-color: #002451;
+    --ifm-toc-link-color: #252525;
+    --ifm-alert-foreground-color: #252525;
+    --ifm-code-font-size: 95%;
+    --ifm-paragraph-margin-bottom: 0;
+    --ifm-paragraph-margin-top: 0;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+    --logo-name: "ziti-logo-dark.svg";
+    --welcome-page-font-family: "Russo One", "Open Sans", Tahoma, Helvetica, sans-serif;
+    --title-font-family: "Russo One", "Open Sans", Tahoma, Helvetica, sans-serif;
+    --content-font-family: "Open Sans", Tahoma, Helvetica, sans-serif;
+    --h1-size: 50px;
+    --h2-size: 35px;
+    --h3-size: 25px;
+    --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 2%);
+    --ifm-tabs-color-active: var(--ifm-font-color-base);
+    --ifm-global-shadow-lw: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+    --ifm-menu-color-background-hover: #f1f5f9;
+    --ifm-menu-left-border-color: #002451;
+    --ifm-link-color: rgba(217, 15, 95, 0.98);
+    --ifm-breadcrumb-color-actives: rgba(217, 15, 95, 0.98);
+    --ifm-breadcrumb-color-active: color-mix(in srgb, var(--ifm-link-color) 75%, white 25%);
+    --radius-sm: 0.25rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1.0rem;
+    --space-xs: 0.5rem;
+    --space-sm: 1rem;
+    --space-md: 2rem;
+    --space-lg: 4rem;
+    --space-xl: 8rem;
+    --space-xxl: 16rem;
+
+    --ziti-code-block-border-thickness: 1px;
+    --ziti-code-block-background-color: rgb(243, 243, 243);
+    --ziti-code-block-border-color: rgb(197, 199, 201);
+    --ziti-code-block-font-color: rgb(57, 58, 52);
+    --ifm-code-padding-horizontal: 7px;
+    --nf-tab-color: 255, 182, 193;
+}
+@media (max-height: 1024px) {
+    /*for smaller screens, reduce space definitions*/
+    :root {
+        --space-sm: 1rem;
+        --space-md: 1rem;
+        --space-lg: 2rem;
+        --space-xl: 4rem;
+        --space-xxl: 8rem;
+    }
+}
+html:not([data-theme="dark"]) {
+    --ifm-leading: 15px;
+}
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+html[data-theme="dark"] {
+    --ifm-font-color-base: #94a3b8;
+    --ifm-leading: 15px;
+    --ifm-background-color: #111827;
+    --ifm-background-surface-color: #1f2937;
+    --ifm-background-surface-color-dark: #374151;
+    --ifm-footer-background-color: #1b263e;
+    --ifm-color-primary: #158eed;
+    --ifm-color-primary-dark: #b671fc;
+    --ifm-color-primary-darker: #ad5ffb;
+    --ifm-color-primary-darkest: #a34cfb;
+    --ifm-color-primary-light: #d3a9fd;
+    --ifm-color-primary-lighter: #ddbcfd;
+    --ifm-color-primary-lightest: #e6cffe;
+    --background-color-1: #434862;
+    --landing-banner-1: #38383a;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+    --logo-name: "ziti-logo-light.svg";
+    --ifm-heading-color: 148 163 184;
+    --ifm-menu-color: #ffffff;
+    --ifm-toc-link-color: #ffffff;
+    --code-block-color: var(--ifm-heading-color);
+    --code-block-background-color: #434862;
+    --ifm-alert-foreground-color: var(--ifm-font-color-base);
+    --ifm-docusaurus-collapse-button-bg-hover: rgba(255, 255, 255, 0.05);
+    --ifm-tabs-color-active: #e2e8f0;
+    --ifm-global-shadow-lw: 3px 3px 10px 0 rgb(31, 41, 55);
+    --ifm-menu-color-background-hover: #1f2937;
+    --ifm-menu-left-border-color: #94a3b8;
+    --ifm-link-color: rgba(21, 142, 237, 1);
+    --ifm-breadcrumb-color-active: color-mix(in srgb, var(--ifm-link-color) 75%, white 25%);
+
+    --ziti-text-muted: #8e8ea0;
+
+    --ziti-code-block-background-color: rgb(33, 47, 77);
+    --ziti-code-block-border-color: rgb(33, 47, 77);
+    --ziti-code-block-font-color: rgb(148, 163, 184);
+    --nf-tab-color: 67, 72, 98;
+}
+
+html[data-theme=dark] #Wizardly code {
+    color: rgba(117, 82, 136, 0.98) !important;
+}
+
+html[data-theme=dark] .wizardmodal .admonitionIcon_node_modules-\@docusaurus-theme-classic-lib-theme-Admonition-styles-module svg {
+    fill: rgba(0,0,0) !important;
+}
+
+@media (max-width: 767px) {
+    html[data-theme="dark"] {
+        --h1-size: 30px;
+        --h2-size: 25px;
+        --h3-size: 20px;
+    }
+}
+@media (max-width: 767px) {
+    html[data-theme="light"] {
+        --h1-size: 30px;
+        --h2-size: 25px;
+        --h3-size: 20px;
+    }
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Russo One';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/russoone/v14/Z9XUDmZRWg6M1LvRYsHOy8mJrrg.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Russo One';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/russoone/v14/Z9XUDmZRWg6M1LvRYsHOwcmJrrg.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Russo One';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/russoone/v14/Z9XUDmZRWg6M1LvRYsHOz8mJ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic */
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/opensans/v29/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/opensans/v29/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/opensans/v29/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
+* {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: var(--ifm-font-family-sans), sans-serif;
+}
+
+
+input[type="radio"]
+{
+    display: none;
+}
+
+input[type="radio"]+label {
+    appearance: none;
+    cursor: pointer;
+    display: inline-block;
+    padding-left: 34px;
+    position: relative;
+    vertical-align: middle;
+}
+
+input[type="radio"]:checked+label {
+    backface-visibility: hidden;
+    animation: checked 200ms ease 1;
+}
+
+input[type="radio"]+label:before {
+    background: none repeat scroll 0 0 rgba(255, 255, 255, 0);
+    border-radius: 100% 100% 100% 100%;
+    content: " ";
+    height: 7px;
+    left: 12px;
+    position: absolute;
+    top: 6px;
+    width: 7px;
+}
+
+input[type="radio"]+label:hover:before {
+    /* background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5); */
+    background: linear-gradient(90deg,#0068f9 0, #fc0147 100%) ;
+}
+
+input[type="radio"]:checked+label:before {
+    background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
+}
+
+
+
+input[type="radio"]+label:after {
+    border: 3px solid #FFFFFF;
+    border-radius: 100% 100% 100% 100%;
+    content: " ";
+    height: 15px;
+    left: 5px;
+    position: absolute;
+    top: -1px;
+    width: 15px;
+}
+
+input[type="radio"]:checked+label:after {
+    border-color: rgba(255, 255, 255, 1);
+}
+
+
+.header-github-link:hover {
+    opacity: 0.6;
+}
+.header-github-link::before {
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(60, 74, 94)' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+    content: "";
+    display: flex;
+    height: 1.25rem;
+    width: 1.25rem;
+}
+[data-theme="dark"] .header-github-link::before {
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(148, 163, 184)' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+.header-discourse-link:hover {
+    opacity: 0.6;
+}
+.header-discourse-link::before {
+    /*background: url('/img/discourse_icon.svg') no-repeat;*/
+    content: "";
+    display: flex;
+    height: 1.25rem;
+    width: 1.25rem;
+}
+[data-theme="dark"] .header-discourse-link::before {
+    /*background: url('/img/discourse_icon.svg') no-repeat;*/
+    content: "";
+    display: flex;
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+.header-netfoundry-link {
+    display: flex !important;
+}
+.header-netfoundry-link::after {
+    position: relative;
+    right: -3px;
+    top: 5px;
+}
+.header-netfoundry-link:hover {
+    opacity: 0.6;
+}
+.header-netfoundry-link::after {
+    /*background: url('/img/new-window.svg?v=3') no-repeat;*/
+    content: "";
+    display: flex;
+    height: 1.25rem;
+    width: 1.25rem;
+}
+[data-theme="dark"] .header-netfoundry-link::after {
+    /*background: url('/img/new-window.svg') no-repeat;*/
+    content: "";
+    display: flex;
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+
+/**
+ Footer
+ */
+.footer, .footer.container {
+    display: flex;
+    padding: calc(var(--ifm-spacing-vertical) * 0.2)
+    var(--ifm-footer-padding-horizontal);
+}
+
+.footer__links {
+    margin-bottom: 0.5rem;
+}
+
+.notification_new {
+    background: linear-gradient(90deg,#0068f9 0, #fc0147 100%) ;
+    border-radius: 5px;
+    color: #fff;
+    padding: 1px 8px;
+    font-weight: 700;
+    font-size: .9em;
+    display: inline-flex;
+    margin-right: 5px;
+    text-transform: uppercase;
+}
+
+@media (min-width: 1416px) {
+    .main-wrapper {
+        align-self: center;
+        width: 100%;
+        /*overflow: auto;*/
+        /*height: 100%;*/
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: var(--ifm-background-color);
+    }
+}
+
+.navbar .navbar__inner {
+    margin: 0 auto;
+    max-width: 1360px;
+}
+
+
+
+
+
+
+
+
+
+
+
+.sdkbutton-image {
+    margin: 0 auto;
+    max-width: 115px !important;
+    height: 80px;
+}
+
+.sdkbutton-text {
+    display: flex;
+    justify-content: center;
+}
+
+.sdkbutton-button {
+    height: 140px;
+    width: 140px;
+    font-size: 16px;
+    font-weight: bold;
+    background: rgba(222, 222, 222, 1);
+    padding: 0 !important;
+    cursor: pointer;
+    margin: 20px 20px;
+    text-align:center;
+    border: none;
+    border-radius: 15px;
+}
+
+.btn-hover {
+    width: 175px;
+    font-size: 16px;
+    font-weight: 600;
+    font-family: 'Open Sans', Tahoma, Helvetica, sans-serif;
+    cursor: pointer;
+    margin: 20px 20px;
+    height: 80px;
+    text-align:center;
+    border: none;
+    background-size: 300% 100%;
+    border-radius: 5px;
+    -moz-transition: all .2s ease-in-out;
+    -o-transition: all .2s ease-in-out;
+    -webkit-transition: all .2s ease-in-out;
+    transition: all .2s ease-in-out;  background: whitesmoke;
+    box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.75);
+    color:grey;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-decoration-line: none;
+}
+
+.col-lg-12 .sdkbutton-button:hover {
+    text-decoration-line: none !important;
+    color: black;
+    background: rgba(255, 255, 255, 0.9);
+    font-weight: bold;
+    box-shadow: 0 0 20px 0 rgba(0,104,249,1);
+    -moz-transition: all .15s ease-in-out;
+    -o-transition: all .15s ease-in-out;
+    -webkit-transition: all .15s ease-in-out;
+    transition: all .15s ease-in-out;
+}
+
+.col-lg-12 > .buttonrow  {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.btn-hover:focus {
+    outline: none;
+}
+
+.btn-hover:hover {
+    text-decoration-line: none !important;
+    color: black !important;
+    box-shadow: 0 0 20px 0 rgba(244,4,77,.5);
+    height: 80px;
+    background-position: 100% 0;
+    -moz-transition: all .15s ease-in-out;
+    -o-transition: all .15s ease-in-out;
+    -webkit-transition: all .15s ease-in-out;
+    transition: all .15s ease-in-out;
+}
+
+.centerrow {
+    justify-content: center;
+}
+
+.sdkbutton-button:focus {
+    outline: none;
+}
+
+.col-lg-12 .sdkbutton-button {
+    color:grey;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-decoration-line: none;
+}
+
+.leftdiv {
+    width: 110px;
+    height: 150px;
+    object-fit: cover;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    float: left;
+}
+.leftdiv img {
+    height: 220px;
+    width: 210px;
+    margin-top: -35px;
+}
+.rightdiv {
+    width: 110px;
+    height: 150px;
+    object-fit: cover;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    float: right;
+}
+.rightdiv img {
+    height: 220px;
+    width: 210px;
+    margin-top: -35px;
+}
+.flr {
+    float: right;
+}
+
+
+.wizardmodal #navbarDropdownItem {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+.wizardmodal #navbarDropdownImage {
+    padding-right: 5px;
+    height: 16px;
+}
+
+.wizardmodal .dropdown__menu {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    width: 180px;
+}
+
+.wizardmodal .text-divider {
+    display: flex;
+    align-items: center;
+}
+
+.wizardmodal .text-divider::before,
+.wizardmodal .text-divider::after {
+    content: '';
+    height: 1px;
+    background-color: silver;
+    flex-grow: 1;
+}
+.wizardmodal .text-divider p {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+/* highlight sidebar section headings */
+.theme-doc-sidebar-item-link-level-1.sidebar-title {
+    margin-top: 20px;
+    margin-left: 0;
+    font-weight: bold;
+}
+
+/* indent sidebar list items */
+div > aside > div > div > nav > ul > li  {
+    margin-left: 5px;
+}
+
+div > aside > div > nav > ul > li > a,
+div > aside > div > nav > ul > li > a:link,
+div > aside > div > nav > ul > li > a:hover,
+div > aside > div > nav > ul > li > a:visited,
+div > aside > div > nav > ul > li > a:active {
+    color: var(--ifm-font-color-base);
+    text-decoration: none;
+}
+
+
+/* DFinger Styles */
+
+/* @extend display-flex; */
+.display-flex,
+.form-flex,
+.form-date-group,
+.steps ul,
+.title,
+.title .step-number,
+.actions ul li a,
+.form-radio-flex,
+.form-find {
+    display: flex;
+    display: -webkit-flex;
+}
+
+.page-wrapper {
+    min-height: 100vh;
+}
+
+.bg-img-1 {
+    /*background: url("/img/bg-img-01.jpg") center center/cover no-repeat;*/
+}
+
+.whitez {
+    /*background: url("/img/whitez.svg");*/
+    background-position: center;
+    background-size: 55px;
+    background-repeat: no-repeat;
+    width: 65px;
+    height: 55px;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2013;
+    cursor: unset;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    transition: all 0.3s ease;
+}
+
+.whitez:hover {
+    filter: brightness(95%);
+    transition: all 0.3s ease;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.whitez:active {
+    filter: brightness(90%);
+    transition: opacity .3s cubic-bezier(.38, .41, .27, 1);
+    transform: scale(.97) !important;
+    transition: all 0.3s ease;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.wizardmodal .headertitle {
+    margin-top: 4px;
+    margin-bottom: 8px;
+    text-align: left;
+    color: #002451;
+    font-size: 36px;
+    display: inline-block;
+    line-height: initial;
+}
+
+.mt20 {
+    margin-top: 20px;
+}
+
+.wizardmodal .shadedRow {
+    background-color: var(--landing-banner-1);
+}
+
+.wizardmodal .container {
+    position: relative;
+    box-sizing: border-box;
+    margin: auto;
+}
+
+@media (min-width: 1200px) {
+    .wizardmodal .container {
+        width: 1387px;
+    }
+}
+
+@media (min-width: 768px) {
+    .wizardmodal .container {
+        padding-right: 15px;
+        padding-left: 15px;
+        margin-right: auto;
+        margin-left: auto;
+    }
+}
+
+.wizardmodal .row {
+    margin-right: -15px;
+    margin-left: -15px;
+    display: flex;
+    flex-direction: row;
+    margin: auto;
+}
+
+/* @extend list-type-ulli; */
+list-type-ulli,
+.steps ul,
+.actions ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.wizardmodal a:focus,
+.wizardmodal a:active {
+    text-decoration: none;
+    outline: none;
+    transition: all 300ms ease 0s;
+}
+
+.wizardmodal input,
+.wizardmodal select,
+.wizardmodal textarea {
+    outline: none;
+    appearance: unset !important;
+}
+
+.wizardmodal input::-webkit-outer-spin-button,
+.wizardmodal input::-webkit-inner-spin-button {
+    appearance: none !important;
+    margin: 0;
+}
+
+.wizardmodal input:focus,
+.wizardmodal select:focus,
+.wizardmodal textarea:focus {
+    outline: none;
+    box-shadow: none !important;
+}
+
+.wizardmodal input[type=checkbox] {
+    appearance: checkbox !important;
+}
+
+.wizardmodal input[type=radio] {
+    appearance: radio !important;
+}
+
+.clear {
+    clear: both;
+}
+
+.wizardmodal h2 {
+    font-size: 30px;
+    margin: 0;
+    color: #002451;
+}
+
+.wizardmodal h3 {
+    font-size: 24px;
+    margin: 0;
+}
+
+.wizardmodal a {
+    color: rgba(217, 15, 95, 0.98);
+    text-decoration: var(--ifm-link-decoration);
+    transition: 0.5s;
+}
+
+html[data-theme=dark] #Wizardly a {
+    color: rgba(217, 15, 95, 0.98);
+    text-decoration: var(--ifm-link-decoration);
+    transition: 0.5s;
+}
+
+html[data-theme=dark] .menu__link {
+    color: var(--ifm-font-color-base) !important;
+}
+
+.wizardmodal .menu__link--active {
+    color: rgba(217, 15, 95, 0.98) !important;
+    transition: 0.5s;
+}
+
+html[data-theme=dark] a {
+    color: var(--ifm-link-color);
+    transition: 0.5s;
+}
+
+html[data-theme=dark] .menu__link--active {
+    color: var(--ifm-link-color) !important;
+    transition: 0.5s;
+}
+
+.menu__link--active:hover {
+    color: rgba(117, 82, 136, 0.98);
+}
+
+.wizardmodal a:hover {
+    color: rgba(117, 82, 136, 0.98);
+    text-decoration: var(--ifm-link-hover-decoration);
+}
+
+html[data-theme=dark] .wizardmodal a:hover {
+    color: rgba(217, 15, 95, 0.98);
+    text-decoration: var(--ifm-link-hover-decoration);
+}
+
+.wizardmodal code a {
+    color: #FFF;
+}
+
+.wizardmodal a:hover {
+    filter: brightness(95%);
+    text-decoration: unset;
+    transition: all 0.3s ease;
+}
+
+.wizardmodal a:active,
+.wizardmodal a:focus {
+    filter: brightness(90%);
+    text-decoration: unset;
+    transform: translateY(1px);
+    transition: all 0.3s ease;
+}
+
+.wizardmodal .main {
+    padding: 50px 0;
+    padding-top: 12px;
+    position: relative;
+    z-index: 99;
+}
+
+.wizardmodal .ocontainer {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.wizardmodal .zcontainer {
+    max-width: var(--ziti-max-width);
+    min-width: 300px;
+    margin: 0 auto;
+    background: rgba(236, 238, 242, .85);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    border-radius: 15px;
+}
+
+#navbarDropdownImage {
+    height: 16px;
+    padding-right: 5px;
+}
+
+.wizardmodal fieldset {
+    padding: 0;
+    margin: 0;
+    border: none;
+    padding-left: 45px;
+    padding-right: 55px;
+    padding-top: 45px;
+}
+
+.wizardmodal p.desc {
+    margin: 0;
+    margin-bottom: 15px;
+    color: #252525;
+}
+
+.form-label {
+    display: block;
+    width: 100%;
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+.text-input {
+    font-size: 12px;
+    color: #999;
+    display: block;
+    margin-top: 5px;
+}
+
+.text-input span {
+    color: #222;
+    font-weight: bold;
+}
+
+input {
+    width: 100%;
+    display: block;
+    border: 1px solid #ebebeb;
+    height: 50px;
+    box-sizing: border-box;
+    padding: 0 var(--space-md);
+    color: #222;
+    font-weight: bold;
+    font-size: 14px;
+    font-family: var(--ifm-font-family-sans), var(--ifm-font-family-sans-default);
+    border-radius: 7px;
+}
+
+#steps-uid-0-p-0 .form-row,
+#steps-uid-0-p-0 .form-group,
+#steps-uid-0-p-0 .form-date {
+    width: 680px;
+}
+
+.form-flex {
+    margin: 0 -10px;
+}
+
+.form-flex .form-group {
+    width: 50%;
+    padding: 0 10px;
+}
+
+.form-group,
+.form-date {
+    margin-bottom: 18px;
+    position: relative;
+}
+
+.form-date-group {
+    border: 1px solid transparent;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -o-border-radius: 5px;
+    -ms-border-radius: 5px;
+}
+
+.form-date-group select {
+    border: 1px solid #ebebeb;
+    width: 100%;
+    box-sizing: border-box;
+    appearance: none !important;
+    -moz-appearance: none !important;
+    -webkit-appearance: none !important;
+    -o-appearance: none !important;
+    -ms-appearance: none !important;
+    position: relative;
+    background: 0 0;
+    z-index: 10;
+    cursor: pointer;
+    padding: 0 var(--space-md);
+    height: 50px;
+    font-size: 14px;
+    font-family: 'Open Sans';
+    color: #999;
+    box-sizing: border-box;
+    background-color: #fff;
+    color: #222;
+    font-weight: bold;
+    border-radius: 7px;
+}
+
+.form-date-item {
+    position: relative;
+    overflow: hidden;
+    width: 100px;
+    margin-right: 10px;
+}
+
+.vertical {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+}
+
+.vertical .steps {
+    float: left;
+    width: 25%;
+}
+
+.vertical .content {
+    float: right;
+    width: 75%;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    /*height: 890px;*/
+    /*overflow-y: auto;*/
+    /*height: calc(70vh - 134px);*/
+}
+
+.vertical .actions {
+    float: right;
+    width: 75%;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    padding-top: 25px;
+}
+
+.content {
+    /*height: 700px;*/
+}
+
+.wizardmodal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: 100vw;
+    z-index: 1000;
+    display: none;
+}
+
+.wizardmodal h1 {
+    padding-bottom: 0;
+    line-height: 52px;
+    color: #002451;
+}
+
+.wizardmodal .page-wrapper {
+    top: 0;
+    min-height: 100vh;
+    position: absolute;
+    left: 0;
+    right: 0;
+    backdrop-filter: blur(5px);
+}
+
+.wizard .main {
+    padding-top: 30px;
+}
+
+.wizardmodal .bg-img-1 {
+    opacity: 0.99;
+}
+
+.steps ul {
+    flex-direction: column;
+    -moz-flex-direction: column;
+    -webkit-flex-direction: column;
+    -o-flex-direction: column;
+    -ms-flex-direction: column;
+    position: relative;
+    padding-left: 30px;
+    padding-top: 40px;
+    overflow-y: auto;
+}
+
+.steps ul li {
+    padding-bottom: 30px;
+    position: relative;
+    z-index: 99;
+}
+
+.steps ul li a {
+    text-decoration: none;
+    color: #222;
+}
+
+.steps ul:after {
+    position: absolute;
+    content: '';
+    width: 2px;
+    background: #d4d3d9;
+    left: 54px;
+    height: 83%;
+    top: 50%;
+    transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    z-index: 9;
+}
+
+.wizardnav .title {
+    align-items: center;
+    -moz-align-items: center;
+    -webkit-align-items: center;
+    -o-align-items: center;
+    -ms-align-items: center;
+    display: grid;
+    grid-template-columns: 50px auto;
+    column-gap: 20px;
+    transition: .4s;
+}
+
+.wizardnav .title .step-number {
+    width: 50px;
+    height: 50px;
+    align-items: center;
+    -moz-align-items: center;
+    -webkit-align-items: center;
+    -o-align-items: center;
+    -ms-align-items: center;
+    justify-content: center;
+    -moz-justify-content: center;
+    -webkit-justify-content: center;
+    -o-justify-content: center;
+    -ms-justify-content: center;
+    border-radius: 50%;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    -o-border-radius: 50%;
+    -ms-border-radius: 50%;
+    background: #ebebeb;
+    color: #8797ab;
+    margin-right: 15px;
+    border: 5px solid #fff;
+    font-weight: bold;
+    transition: .4s;
+}
+
+.noscroll {
+    /*overflow: hidden !important;*/
+}
+
+@font-face {
+    font-family: 'Hand Of Sean';
+    /*src: url('/img/HandOfSeanDemo.eot');*/
+    /*src: url('/img/HandOfSeanDemo.eot?#iefix') format('embedded-opentype'),*/
+    /*url('/img/HandOfSeanDemo.woff2') format('woff2'),*/
+    /*url('/img/HandOfSeanDemo.woff') format('woff'),*/
+    /*url('/img/HandOfSeanDemo.ttf') format('truetype'),*/
+    /*url('/img/HandOfSeanDemo.svg#HandOfSeanDemo') format('svg');*/
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+
+#Wizardly .openWizard {
+    display: none;
+    /*background-image: url(/img/ziggysmalls.svg);*/
+    background-size: 80px;
+    background-repeat: no-repeat;
+    width: 165px;
+    padding-right: 80px;
+    height: 100px;
+    text-align: left;
+    background-position: right;
+    vertical-align: bottom;
+    padding-top: 25px;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    cursor: pointer;
+    border-radius: 20px;
+    transition: .5s;
+    font-family: "Hand Of Sean";
+    background-color: #002451;
+    color: #fad82c !important;
+    text-align: right;
+    z-index: 500;
+}
+
+@supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
+    .openWizard {
+        backdrop-filter: saturate(180%) blur(20px);
+        background-color: rgba(0, 36, 81, .95)
+    }
+}
+
+.openWizard:hover {
+    filter: brightness(75%);
+    transition: all 0.3s ease;
+}
+
+.openWizard:active {
+    filter: brightness(50%);
+    transform: translateY(1px);
+    transition: all 0.3s ease
+}
+
+.wizardnav .title .step-text {
+    font-weight: 600;
+    color: #8797ab;
+}
+
+.wizardnav {
+    cursor: pointer;
+    transition: .4s;
+}
+
+.wizardmodal .current .title .step-number {
+    background: #076bfe;
+    color: #fff;
+}
+
+.wizardmodal .current .title .step-text {
+    color: #002451;
+}
+
+.content h3 {
+    display: none;
+}
+
+.content,
+.actions {
+    background: #f8f8f8;
+}
+
+.actions {
+    padding-bottom: 25px;
+}
+
+.actions ul {
+    padding-left: 45px;
+    padding-right: 55px;
+}
+
+.actions ul .disabled {
+    display: none;
+}
+
+.actions ul li {
+    float: right;
+}
+
+.actions ul li:first-child {
+    float: left;
+}
+
+.actions ul li:first-child a {
+    background: #e8e8e8;
+    color: #999;
+    box-shadow: unset;
+}
+
+.actions ul li a, .actions ul li button {
+    width: 140px;
+    height: 50px;
+    color: #fff;
+    background: #076bfe;
+    box-shadow: 0 3px 9px #0273fb4d;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    border-width: 0;
+    font-weight: 600;
+    font-size: 15px;
+    cursor: pointer;
+    font-family: 'Open Sans';
+}
+
+.actions ul li a:hover, .actions ul li button:hover {
+    filter: brightness(95%);
+    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+}
+
+.actions ul li a:active, .actions ul li button:active {
+    filter: brightness(90%);
+    box-shadow: none;
+    transform: translateY(1px);
+    transition: all 0.3s ease;
+}
+
+.form-radio-flex {
+    flex-wrap: wrap;
+    -moz-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    -o-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    margin: 0 -15px;
+}
+
+.form-radio-flex .form-radio-item {
+    padding: 0 15px;
+    margin-bottom: 25px;
+}
+
+.form-radio-flex input {
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: -9999px;
+}
+
+.form-radio-flex input+label {
+    margin: 0;
+    width: 223px;
+    height: 133px;
+    box-sizing: border-box;
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    background-color: transparent;
+    border: 1px solid transparent;
+    text-align: center;
+    text-transform: none;
+    transition: border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
+}
+
+.form-radio-flex input+label img {
+    width: 100%;
+    height: 100%;
+}
+
+.form-radio-flex input:checked+label {
+    border: 1px solid #076bfe;
+    z-index: 1;
+}
+
+.form-radio-flex input:focus+label {
+    outline: none;
+}
+
+.form-radio-flex input:hover {
+    border: 1px solid #076bfe;
+}
+
+label.error {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+label.error:after {
+    font-family: 'Material-Design-Iconic-Font';
+    position: absolute;
+    content: '\f135';
+    right: 20px;
+    top: 50px;
+    font-size: 13px;
+    color: #f63726;
+}
+
+input.error {
+    border: 1px solid #f63726;
+}
+
+#find_bank {
+    padding: 0 55px;
+    width: 680px;
+    margin-right: 20px;
+}
+
+#find_bank::-webkit-input-placeholder {
+    font-weight: 400;
+}
+
+#find_bank::-moz-placeholder {
+    font-weight: 400;
+}
+
+#find_bank:-ms-input-placeholder {
+    font-weight: 400;
+}
+
+#find_bank:-moz-placeholder {
+    font-weight: 400;
+}
+
+.submit {
+    width: 150px;
+    background: #666;
+    color: #fff;
+    font-weight: 400;
+    cursor: pointer;
+}
+
+.submit:hover {
+    background-color: #4d4d4d;
+}
+
+.form-find {
+    position: relative;
+    padding-bottom: 70px;
+    border-bottom: 1px solid #ebebeb;
+}
+
+.form-icon {
+    position: absolute;
+    top: 12px;
+    left: 20px;
+    font-size: 18px;
+    color: #999;
+}
+
+.choose-bank-desc {
+    color: #666;
+    margin: 0;
+    padding-top: 30px;
+    padding-bottom: 35px;
+}
+
+#slider-margin {
+    height: 9px;
+    border: none;
+    box-shadow: none;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    -o-box-shadow: none;
+    -ms-box-shadow: none;
+    background: #e8e8e8;
+    border-radius: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    -o-border-radius: 0;
+    -ms-border-radius: 0;
+    position: relative;
+    margin-top: 110px;
+}
+
+#slider-margin .noUi-marker-horizontal.noUi-marker-large,
+#slider-margin .noUi-marker-horizontal.noUi-marker {
+    height: 0;
+}
+
+#slider-margin .noUi-connect {
+    background: #076bfe;
+}
+
+#slider-margin .noUi-connects {
+    border-radius: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    -o-border-radius: 0;
+    -ms-border-radius: 0;
+}
+
+#slider-margin .noUi-handle {
+    width: 15px;
+    height: 30px;
+    top: -12px;
+    background: #e8e8e8;
+    outline: none;
+    border: none;
+    right: -15px;
+    border: 1px solid #076bfe;
+    border-radius: 0;
+}
+
+#slider-margin .noUi-handle:after,
+#slider-margin .noUi-handle:before {
+    width: 0;
+}
+
+#slider-margin .noUi-handle .noUi-tooltip {
+    bottom: 33px;
+    border: none;
+    background: transparent;
+    font-size: 16px;
+    color: #076bfe;
+    padding: 0;
+}
+
+#slider-margin .noUi-pips {
+    width: 96%;
+}
+
+#slider-margin .noUi-pips .noUi-value {
+    top: -50px;
+    font-size: 16px;
+    color: #666;
+}
+
+#slider-margin .noUi-pips .noUi-value:before {
+    content: '$';
+}
+
+#slider-margin .noUi-pips .noUi-value-horizontal {
+    transform: none;
+    -moz-transform: none;
+    -webkit-transform: none;
+    -o-transform: none;
+    -ms-transform: none;
+}
+
+.your-money {
+    font-size: 16px;
+    color: #222;
+    margin: 0;
+    padding-top: 62px;
+}
+
+.your-money .money {
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.numberhide {
+    display: none;
+}
+
+@media screen and (max-width: 1475px) {
+
+    vertical .content {
+        width: 100%;
+    }
+
+    .main {
+        padding: 25px;
+        padding-top: 7px;
+    }
+
+}
+
+@media screen and (max-width: 1024px) {
+    .container {
+        width: calc(100% - 40px);
+        max-width: 100%;
+    }
+
+    .vertical .steps,
+    .vertical .content,
+    .vertical .actions {
+        float: right;
+        width: 100%;
+    }
+
+    #find_bank {
+        width: 100%;
+    }
+
+    .form-radio-flex input+label {
+        width: 190px;
+        height: 120px;
+    }
+
+    .vertical .steps {
+        display: none;
+        width: 350px;
+    }
+
+    .numberhide {
+        display: contents;
+    }
+
+
+}
+
+@media screen and (max-width: 992px) {
+    .content {
+        height: 900px;
+    }
+
+    .form-radio-flex input+label {
+        width: 100px;
+        height: 65px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+
+    #steps-uid-0-p-0 .form-row,
+    #steps-uid-0-p-0 .form-group,
+    #steps-uid-0-p-0 .form-date {
+        width: 100%;
+    }
+
+    .form-flex {
+        flex-direction: column;
+        -moz-flex-direction: column;
+        -webkit-flex-direction: column;
+        -o-flex-direction: column;
+        -ms-flex-direction: column;
+        margin: 0;
+    }
+
+    .form-flex .form-group {
+        padding: 0;
+    }
+
+    fieldset,
+    .actions ul {
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+
+    #slider-margin .noUi-pips {
+        width: 94%;
+    }
+}
+
+@media screen and (max-width: 480px) {
+
+    .form-date-group,
+    .form-find {
+        flex-direction: column;
+        -moz-flex-direction: column;
+        -webkit-flex-direction: column;
+        -o-flex-direction: column;
+        -ms-flex-direction: column;
+    }
+
+    .content {
+        height: 1050px;
+    }
+
+    #find_bank {
+        margin-bottom: 20px;
+    }
+
+    .actions ul li a {
+        width: 100px;
+    }
+
+    .form-radio-flex {
+        margin: 0 -5px;
+    }
+
+    .form-radio-flex .form-radio-item {
+        padding: 0 5px;
+    }
+
+    .form-radio-flex input+label {
+        width: 90px;
+        height: 61px;
+    }
+}
+
+/* Basic styling for .wizardmodal prettyprint */
+.wizardmodal .prettyprint {
+    font-family: "Menlo", "Monaco", "Consolas", monospace !important;
+    background: #002451;
+    background-color: #002451;
+    border-radius: 2px;
+    border: none !important;
+    padding: 20px !important;
+    font-size: 16px;
+    white-space: pre-wrap;
+    /* css-3 */
+    white-space: -moz-pre-wrap;
+    /* Mozilla, since 1999 */
+    white-space: -pre-wrap;
+    /* Opera 4-6 */
+    white-space: -o-pre-wrap;
+    /* Opera 7 */
+    word-wrap: break-word;
+    /* Internet Explorer 5.5+ */
+}
+
+/* Adds linenums to each line listed when .linenums class used */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 {
+    list-style-type: decimal;
+}
+
+/* Adds individual lines to .wizardmodal prettyprint */
+ol.linenums {
+    counter-reset: linenumber;
+}
+
+/* Adds single increments and disables the background for alternating line numbers */
+ol.linenums li {
+    list-style-type: none;
+    counter-increment: linenumber;
+    background: transparent !important;
+}
+
+ol.linenums li:before {
+    content: counter(linenumber);
+    float: left;
+    margin-left: -4em;
+    text-align: right;
+    width: 3em;
+}
+
+.wizardmodal h2 {
+    margin-bottom: 20px;
+}
+
+.wizardmodal pre {
+    text-wrap: wrap;
+    color: #fff;
+}
+
+.wizardmodal .token-line {
+    color: #fff !important;
+}
+
+.disabled-token-line {
+    color: #fff !important;
+}
+
+.wizardclose {
+    /*background-image: url(/img/close.svg);*/
+    height: 40px;
+    width: 40px;
+    position: absolute;
+    right: 0;
+    top: 10px;
+    background-size: contain;
+    cursor: pointer;
+    opacity: 1.0;
+    transition: 0.5s;
+}
+
+.wizardclose:hover {
+    opacity: 0.8;
+}
+
+.wizRow {
+    margin-top: 10px;
+}
+
+.wizardmodal pre .str,
+code .str {
+    color: #a4ff90 !important;
+}
+
+/* string  - green */
+.wizardmodal pre .kwd,
+code .kwd {
+    color: #fc568c !important;
+}
+
+/* keyword - dark pink */
+.wizardmodal pre .com,
+code .com {
+    color: #AEAEAE !important;
+    font-style: italic !important;
+}
+
+/* comment - gray */
+.wizardmodal pre .typ,
+code .typ {
+    color: #9dffff !important;
+}
+
+/* type - light blue */
+.wizardmodal pre .lit,
+code .lit {
+    color: #076bfe !important;
+}
+
+/* literal - blue */
+.wizardmodal pre .pun,
+code .pun {
+    color: #fff !important;
+}
+
+/* punctuation - white */
+.wizardmodal pre .pln,
+code .pln {
+    color: #fff !important;
+}
+
+/* plaintext - white */
+.wizardmodal pre .tag,
+code .tag {
+    color: #89bdff !important;
+}
+
+/* html/xml tag    - light blue */
+.wizardmodal pre .atn,
+code .atn {
+    color: #bdb76b !important;
+}
+
+/* html/xml attribute name  - khaki */
+.wizardmodal pre .atv,
+code .atv {
+    color: #65B042 !important;
+}
+
+/* html/xml attribute value - green */
+.wizardmodal pre .dec,
+code .dec {
+    color: #3387CC !important;
+}
+
+/* decimal - blue */
+
+.wizardmodal pre.wizardmodal .prettyprint,
+code.wizardmodal .prettyprint, .wizard .wizardmodal pre {
+    /* background-color: #0f2438 !important; */
+    background-color: #002451 !important;
+    border-radius: 8px !important;
+}
+
+.wizardmodal pre.wizardmodal .prettyprint, .wizardmodal pre {
+    margin: 1em auto !important;
+    white-space: pre-line !important;
+}
+
+
+/* Specify class=linenums on a .wizardmodal pre to get line numbering */
+ol.linenums {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    color: #AEAEAE !important;
+}
+
+/* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 {
+    list-style-type: none
+}
+
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {}
+
+@media print {
+
+    .wizardmodal pre .str,
+    code .str {
+        color: #060 !important;
+    }
+
+    .wizardmodal pre .kwd,
+    code .kwd {
+        color: #006 !important;
+        font-weight: bold !important;
+    }
+
+    .wizardmodal pre .com,
+    code .com {
+        color: #600 !important;
+        font-style: italic !important;
+    }
+
+    .wizardmodal pre .typ,
+    code .typ {
+        color: #404 !important;
+        font-weight: bold !important;
+    }
+
+    .wizardmodal pre .lit,
+    code .lit {
+        color: #044 !important;
+    }
+
+    .wizardmodal pre .pun,
+    code .pun {
+        color: #440 !important;
+    }
+
+    .wizardmodal pre .pln,
+    code .pln {
+        color: #000 !important;
+    }
+
+    .wizardmodal pre .tag,
+    code .tag {
+        color: #006 !important;
+        font-weight: bold !important;
+    }
+
+    .wizardmodal pre .atn,
+    code .atn {
+        color: #404 !important;
+    }
+
+    .wizardmodal pre .atv,
+    code .atv {
+        color: #060 !important;
+    }
+}
+
+.builderbox {
+    margin: auto;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 600;
+    color: #002451;
+}
+
+.builderbox .gray {
+    color: #0059df;
+}
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100000;
+    display: none;
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.builderbutton {
+    position: relative;
+    background-color: #ffffff;
+    border-radius: 35px;
+    width: 150px;
+    height: 150px;
+    display: block;
+    margin: auto;
+    box-shadow: 0 10px 18px 0 rgb(48 48 56 / 5%);
+    transition: all 0.3s ease;
+    transform: translate3d(0, 0, 0);
+    cursor: pointer;
+}
+
+.scrollcontainer {
+    overflow: scroll;
+    width: 100%;
+    height: 585px;
+    display: block;
+}
+
+.local {
+    position: relative;
+    background-color: #ffffff;
+    border-radius: 35px;
+    width: 150px;
+    height: 150px;
+    display: block;
+    margin: auto;
+    box-shadow: 0 10px 18px 0 rgb(48 48 56 / 5%);
+    transition: all 0.3s ease;
+    transform: translate3d(0, 0, 0);
+    cursor: pointer;
+    /*background-image: url("/img/local.png");*/
+    background-position: center;
+    background-size: 135px;
+    background-repeat: no-repeat;
+}
+
+.builderbutton.docker {
+    /*background-image: url("/img/docker.png");*/
+    background-position: center;
+    background-size: 135px;
+    background-repeat: no-repeat;
+}
+
+.builderbutton.compose {
+    /*background-image: url("/img/compose.png");*/
+    background-position: center;
+    background-size: 135px;
+    background-repeat: no-repeat;
+}
+
+.builderbutton.server {
+    /*background-image: url("/img/server.png");*/
+    background-position: center;
+    background-size: 135px;
+    background-repeat: no-repeat;
+}
+
+.builderbutton:hover {
+    filter: brightness(95%);
+    transition: all 0.3s ease;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.builderbutton:active {
+    filter: brightness(90%);
+    transition: opacity .3s cubic-bezier(.38, .41, .27, 1);
+    transform: scale(.97) !important;
+    transition: all 0.3s ease;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.buildertext {
+    margin-top: 12px;
+    margin-bottom: 50px;
+    display: block;
+}
+.builderrow {
+    display: inline-block;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+.hidden {
+    display: none;
+}
+
+code {
+    /*GENERIC CODE BLOCK*/
+    font-family: var(--ifm-font-family-monospace), monospace;
+    vertical-align: middle;
+    font-size: 87.5%;
+    font-weight: 600;
+    background: var(--ziti-code-block-background-color);
+    color: var(--ziti-code-block-font-color);
+    border-color: var(--ziti-code-block-border-color);
+}
+
+code p {
+}
+
+li a code {
+    font-family: var(--ifm-font-family-monospace), monospace;
+    vertical-align: middle;
+    font-size: 87.5%;
+    font-weight: 600;
+    padding: 2px 4px 2px 4px;
+
+    background-color: rgba(117, 82, 136, 0.2) !important;
+    border: 1px solid rgba(117, 82, 136, 0.98);
+    color: rgba(117, 82, 136, 0.98);
+}
+
+.tabItem_node_modules {
+    background-color: rgba(117, 82, 136, 0.2) !important;
+    border: 1px solid rgba(117, 82, 136, 0.98);
+    color: rgba(117, 82, 136, 0.98);
+
+}
+
+[class*="tabItem_"] {
+    background-color: rgb(142,142,142, .2);
+    position: relative;
+    padding: 5px 10px;
+    border-radius: 7px;
+}
+[class*="tabItem_"][role="tabpanel"] {
+    background-color: rgb(var(--nf-tab-color));
+    padding: 1em 0.5em;
+}
+
+
+.tabs__item:hover {
+    background-color: rgba(var(--nf-tab-color), 0.5);
+}
+
+.tabs__item {
+    background-color: rgba(225,225,225, 0.3);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-right: 10px;
+    pointer-events: all;
+}
+
+[hidden] {
+    display: none !important;
+}
+
+.tabs {
+    padding-left: 10px;
+}
+
+.tabs__item.tabs__item--active {
+    background-color: rgb(var(--nf-tab-color));
+    border-bottom-width: 0;
+    pointer-events: none;
+}
+
+.margin-top--md {
+    margin-top: 0 !important;
+}
+
+#Wizardly div {
+    color: rgba(44,55,65) !important;
+}
+
+#Wizardly .admonitionIcon_kALy svg {
+    fill: #000000 !important;
+}
+
+#Wizardly .alert--secondary {
+    --ifm-alert-foreground-color: #b122e326;
+}
+
+
+pre.off {
+    margin-top: 10px !important;
+}
+
+.details_node_modules-\@docusaurus-theme-classic-lib-theme-Details-styles-module {
+    --docusaurus-details-decoration-color: rgba(88, 172, 216, 0.98) !important;
+    border: 1px solid rgba(88, 172, 216, 0.98) !important;
+    background-color: rgba(88, 172, 216, 0.4);
+}
+
+.admonitionIcon_node_modules-\@docusaurus-theme-classic-lib-theme-Admonition-styles-module svg {
+    display: inline-block;
+    height: 1.6em;
+    width: 1.6em;
+}
+
+.admonition_node_modules-\@docusaurus-theme-classic-lib-theme-Admonition-styles-module {
+    margin-top: 1em;
+}
+
+.wizardmodal pre {
+    text-wrap: wrap;
+}
+
+.breadcrumbs__item--active .breadcrumbs__link {
+    font-weight: 700;
+}
+
+.footer {
+    background-color: var(--ifm-navbar-background-color);
+    width: 100%;
+}
+
+.pagination-nav__link {
+    border: 1px solid var(--ifm-color-emphasis-300);
+    filter: brightness(90%);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+.pagination-nav__link:hover {
+    filter: brightness(85%);
+    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+}
+
+.pagination-nav__link:active {
+    filter: brightness(75%);
+    box-shadow: none;
+    transform: translateY(1px);
+    transition: all 0.3s ease;
+}
+
+/* hide the clipboard copy button on code blocks of type "buttonless" */
+.language-buttonless div > button {
+    display: none;
+}
+
+.large-text {
+    font-size: 100px;
+}
+
+.admonition.example {
+    background-color: #f9f5ff; /* Light lavender background */
+    border-left: 4px solid #6c63ff; /* Purple border */
+    padding: 16px;
+    border-radius: 8px;
+    margin: 16px 0;
+}
+
+.admonition.example .admonition-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #5a54ff; /* Purple text */
+    margin-bottom: 8px;
+}
+
+.code-section {
+    border-left: 3px solid var(--code-block-color);
+    border-top: 1px solid var(--code-block-color);
+    border-right: 1px solid var(--code-block-color);
+    border-bottom: 1px solid var(--code-block-color);
+    margin: 16px 0;
+    background: var(--code-block-background-color);
+    border-radius: 4px;
+    padding-top: 5px;
+    padding-bottom: 1px;
+}
+
+.code-section-desc {
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.code-section-command {
+    margin-left: 12px;
+    margin-right: 12px;
+}
+
+.code-section-code {
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.code-section-results {
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.code-section pre {
+    background: var(--code-block-background-color);
+    color: var(--code-block-color);
+    _padding: 8px;
+    border-radius: 4px;
+}
+
+.code-section p {
+    color: var(--code-block-color);
+}
+
+.code-section-desc p {
+    font-size: 1.1em;
+    border-bottom: 1px groove var(--code-block-color);
+}
+
+.theme-doc-sidebar-item-category[class*="theme-doc-sidebar-item-category-level-"].menu__list-item:not(.menu__list-item--collapsed) > ul {
+    padding-left: 1px;
+    margin-left: 13px;
+    border-left: 2px solid  rgb(var(--code-block-color) / 15%);
+}
+
+p > img {
+    width: auto;
+    border-radius: 5px;  /* Optional: Rounded corners */
+    box-shadow: 5px 5px 5px rgba(30, 30, 20, 0.25); /* Optional: Adds shadow */
+}
+
+.alert {
+    --alert-dark-shadow: rgba(50, 30, 5, .5);
+    --ifm-global-shadow-lw: 3px 3px 10px 0 var(--alert-dark-shadow);
+    --ifm-alert-shadow: var(--ifm-global-shadow-lw);
+    --ifm-alert-border-color: var(--ziti-code-block-border-color);
+    --ifm-code-background: var(--ziti-code-block-background-color);
+    --ifm-alert-background-color:var(--ziti-code-block-background-color);
+    details {
+        border: var(--ziti-code-block-border-thickness) solid var(--ziti-code-block-border-color);
+    }
+    div {
+        background: var(--ziti-code-block-background-color);
+    }
+}
+.theme-code-block {
+    margin: 10px 0;
+    border: var(--ziti-code-block-border-thickness) solid var(--ziti-code-block-border-color);
+    > div > pre {
+        background: transparent !important;
+    }
+}
+
+pre code {
+    /*border-radius: 43px;*/
+    background: var(--ziti-code-block-background-color);
+    font-family: var(--ifm-font-family-monospace), monospace;
+}
+
+.token-line * {
+    font-family: var(--ifm-font-family-monospace), monospace;
+}
+
+
+html:not([data-theme="dark"]) {
+    .alert--success, .alert--success .theme-code-block, .alert--success .alert--info, .alert--success .alert--info .theme-code-block {
+        --ziti-code-block-border-color: rgb(23, 92, 10);
+        --ziti-code-block-background-color: rgb(208, 242, 205);
+        --ziti-code-block-font-color: rgb(76, 88, 75);
+    }
+    .alert--secondary, .alert--secondary .theme-code-block, .alert--secondary .alert--info, .alert--secondary .alert--info .theme-code-block {
+        --ziti-code-block-border-color: rgb(184, 91, 217);
+        --ziti-code-block-background-color: rgb(236, 218, 246);
+        --ziti-code-block-font-color: rgb(119, 58, 140);
+    }
+    .alert--danger, .alert--danger .theme-code-block, .alert--danger .alert--info, .alert--danger .alert--info .theme-code-block {
+        --ziti-code-block-border-color: rgb(207, 104, 104);
+        --ziti-code-block-background-color: rgb(244, 177, 177);
+        --ziti-code-block-font-color: rgb(130, 65, 65);
+    }
+    .alert--warning, .alert--warning .theme-code-block, .alert--warning .alert--info, .alert--warning .alert--info .theme-code-block {
+        --ziti-code-block-border-color: rgb(255, 146, 22);
+        --ziti-code-block-background-color: rgb(250, 229, 206);
+        --ziti-code-block-font-color: rgb(178, 102, 15);
+    }
+    .alert--info, .alert--info .theme-code-block, .alert--info .alert--info, .alert--info .alert--info .theme-code-block {
+        --ziti-code-block-border-color: rgb(6, 179, 212);
+        --ziti-code-block-background-color: rgb(200, 236, 245);
+        --ziti-code-block-font-color: rgb(3, 113, 133);
+    }
+}
+
+html[data-theme="dark"] {
+    .alert--success, .alert--success .theme-code-block, .alert--success .alert--info, .alert--success .alert--info .theme-code-block {
+        --ziti-code-block-border-color: rgb(26, 116, 8);
+        --ziti-code-block-background-color: rgb(34, 66, 31);
+        --ziti-code-block-font-color: rgb(73, 142, 66);
+    }
+    .alert--secondary, .alert--secondary .theme-code-block, .alert--secondary .alert--info, .alert--secondary .alert--info .theme-code-block, .alert--secondary section {
+        --ziti-code-block-border-color: rgb(98, 51, 127);
+        --ziti-code-block-background-color: rgb(40, 25, 67);
+        --ziti-code-block-font-color: rgb(157, 81, 203);
+    }
+    .alert--danger, .alert--danger .theme-code-block, .alert--danger .alert--info, .alert--danger .alert--info .theme-code-block {
+        --ziti-code-block-border-color: rgb(129, 32, 32);
+        --ziti-code-block-background-color: rgb(76, 31, 41);
+        --ziti-code-block-font-color: rgb(205, 50, 50);
+    }
+    .alert--warning, .alert--warning .theme-code-block, .alert--warning .alert--info, .alert--warning .alert--info .theme-code-block {
+        --ziti-code-block-border-color: rgb(121, 73, 22);
+        --ziti-code-block-background-color: rgb(64, 48, 35);
+        --ziti-code-block-font-color: rgb(197, 119, 35);
+    }
+    .alert--info, .alert--info .theme-code-block, .alert--info .alert--info, .alert--info .alert--info .theme-code-block {
+        --ziti-code-block-border-color: rgb(10, 117, 143);
+        --ziti-code-block-background-color: rgb(15, 55, 74);
+        --ziti-code-block-font-color: rgb(15, 179, 219);
+    }
+}
+
+.collapseSidebarButton {
+    background-color: #f5f5f5;
+}
+
+
+/* Example: Custom styles for the DocSidebar */
+:global(.doc-sidebar) {
+    background-color: #f5f5f5;
+    color: #333;
+}
+
+/* Custom styles for sidebar items */
+.doc-sidebar .menu__link {
+    font-size: 16px;
+    font-weight: bold;
+}
+.sidebar__scroll-top {
+    background-color: #ff5733;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+}
+
+.sidebar__scroll-top:hover {
+    background-color: #c04e2d;
+}
+
+aside .button {
+    /* render the button on the bottom of the left nav to render properly */
+    margin: 5px 25px;
+    padding: 5px 25px;
+    background: var(--ifm-background-color);
+}
+aside .button:hover {
+    /* render the button on the bottom of the left nav to render properly */
+    background: var(--ifm-background-color);
+}
+
+aside nav {
+    /* this selector gets the sidebar */
+    height: 100%;
+    /*margin-bottom: 70px;*/ /* only do this when it's small */
+}
+
+.main-wrapper {
+    display: flex;
+    flex-direction: column;
+    /*overflow: auto;*/
+    background: var(--ifm-background-color);
+    flex-grow: 1;
+
+    align-self: center;
+    width: 100%;
+    /*height: 100%;*/
+    align-items: center;
+}
+
+@media (max-height: 1200px) {
+    aside nav {
+        /* this selector gets the sidebar */
+        margin-bottom: 70px; /* with the hide menu button on small screens, it obscures the last menu item without this */
+    }
+}