base.css

:root {
--body-bg-color: #f6f6f6;
--body-color: #495057;
--main-area-bg-color: #fff;
--h-color: #444;
--a-color: #0645ad;
--toc-bg-color: #f6f6f6;
--card-border-color: rgba(0,0,0,.125);
--sumo-logo-shadow-color: rgba(0,0,0,.4);
--table-border-color: #dee2e6;
--thead-color: #dfd;
--table-stripe-color: rgba(0,0,0,.05);
--code-bg: #f8f9fa;
--code-border-color: #eaecf0;
--code-color: #333;
--note-conference-color: #000;
--note-conference-bg-color: #abdd8b;
--note-bg-color: #ffd;
--hTitles-color: #338033;
--hljs-bg: #eff0f1;
--hljs-color: #333;
--hljs-attribute-color: #000080;
--hljs-literal-color: #008080;
--hljs-comment-color: #998;
--hljs-symbol-color:  #990073;
--hljs-addition-bg: #dfd;
}

[data-theme="dark"] {
--body-bg-color: #1e1e1e;
--body-color: #f0f0f0;
--main-area-bg-color: #28292c;
--h-color: #fafafa;
--a-color: #699df3;
--toc-bg-color: #1e1e1e;
--card-border-color: #5a5b5e;
--sumo-logo-shadow-color: #fff;
--table-border-color: #fff;
--thead-color: #338033;
--table-stripe-color: rgba(255,255,255,.08);
--code-bg: #000;
--code-border-color: #aaa;
--code-color: #e7e7e9;
--note-conference-color: #abdd8b;
--note-conference-bg-color: #1f3627;
--note-bg-color: #fff5b1ff;
--hTitles-color: #abdd8b;
--hljs-bg: #000;
--hljs-color: #eee;
--hljs-attribute-color: #79b8ff;
--hljs-literal-color: #7bcc72;
--hljs-comment-color: #777;
--hljs-symbol-color: #b392f0;
--hljs-addition-bg: #1f3627;
}

body {
padding-top: 50px;
font-size: .95em;
line-height: 1.4;
background: #f6f6f6; /* for incompatible Browsers  */
background:var(--body-bg-color);
color: #495057; /* for incompatible Browsers  */
color: var(--body-color);

/* https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

body::before {
content: ' ';
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(../images/mkdocs-grid.png) repeat-x;
will-change: transform;
z-index: -1;
}

body > .container {
min-height: 400px;
}

ul.nav .main {
font-weight: 700;
}

.source-links {
float: right;
}

.breadcrumbs li {
display: inline-block;
}

ul.breadcrumbs {
padding-left: 0 !important;
}

.table-striped tbody tr:nth-of-type(2n+1) {
background-color: rgba(0,0,0,.05) !important; /* for incompatible Browsers  */
background-color: var(--table-stripe-color) !important;
}

.col-md-9 img {
max-width: 100%;
display: inline-block;
padding: 4px;
line-height: 1.428571429;
border-radius: 4px;
}

.toc {
background-color: #f6f6f6 !important; /* for incompatible Browsers  */
background-color: var(--toc-bg-color) !important;
}

.main-area {
background: #fff; /* for incompatible Browsers  */
background: var(--main-area-bg-color) !important;
padding:20px;
border-radius:8px 0 0 8px;
margin-top:5px;
}

/*
* The code below adds some padding to the top of the current anchor target so
* that, when navigating to it, the header isn't hidden by the navbar at the
* top.
*/
:target::before {
content: "";
display: block;
margin-top: -75px;
height: 75px;
pointer-events: none;
}

h1 {
color: #444; /* for incompatible Browsers  */
color: var(--h-color);
font-size: 1.9em;
font-weight: 700;
}

h2, h3, h4, h5, h6 {
color: #444; /* for incompatible Browsers  */
color: var(--h-color);
font-weight: 300;
}

hr {
border-top: 1px solid #aaa;
}

pre, .rst-content tt {
max-width: 100%;
background: #fff;
color: #333;
overflow-x: auto;
}

code.code-large, .rst-content tt.code-large {
font-size: 90%;
}

pre code {
display: block;
background: transparent;
border: none;
white-space: pre;
word-wrap: normal;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12px;
}

kbd {
padding: 2px 4px;
font-size: 0.85em;
color: #333;
background-color: #eee;
border-radius: 3px;
border: 1px solid #b4b4b4;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
display: inline-block;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}

a code {
color: #2fa4e7;
}

a:hover code, a:focus code {
color: #157ab5;
}

footer {
margin: 30px 0 10px 0;
text-align: center;
font-weight: 200;
}

.modal-dialog {
margin-top: 50px;
}

/*
* Side navigation
*
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
* sections of docs content.
*/

.bs-sidebar.affix { /* csslint allow: adjoining-classes */
/* csslint ignore:start */
position: -webkit-sticky;
position: sticky;
/* csslint ignore:end */
top: 80px;
}

.bs-sidebar.card { /* csslint allow: adjoining-classes */
padding: 0;
max-height: 90%;
overflow-y: auto;
}

/* Toggle (vertically flip) sidebar collapse icon */
.bs-sidebar .navbar-toggler span {
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}

.bs-sidebar .navbar-toggler.collapsed span { /* csslint allow: adjoining-classes */
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}

/* First level of nav */
.bs-sidenav {
padding-top: 0;
padding-bottom: 0;
border-radius: 5px;
width: 100%;
}

/* All levels of nav */
.bs-sidebar .nav > li > a {
display: block;
padding: 3px 15px;
z-index: 1;
}

.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
text-decoration: none;
border-right: 2px solid;
}

.bs-sidebar .nav > li > a.active,
.bs-sidebar .nav > li > a.active:hover,
.bs-sidebar .nav > li > a.active:focus {
font-weight: 700;
background-color: transparent;
border-right: 2px solid;
}

/* Nav: second level (shown on .active) */
.bs-sidebar .nav .nav {
display: none; /* Hide by default, but at >768px, show it */
margin-bottom: 8px;
}

.bs-sidebar .nav .nav > li > a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
font-size: 90%;
}

.headerlink {
font-family: 'FontAwesome', sans-serif;
font-size: 14px;
display: none;
padding-left: .5em;
}

h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink, h5:hover .headerlink, h6:hover .headerlink {
display:inline-block;
}

.card {
border: 1px solid var(--card-border-color);
}

.admonition {
padding: 15px;
margin-bottom: 10px;
border: 1px solid transparent;
border-radius: 4px;
text-align: left;
}

.admonition.caution { /* csslint allow: adjoining-classes */
color: #000;
background-color: #fc4;
border: 1px dashed #f80;
padding: .5em;
}

.admonition.convention { /* csslint allow: adjoining-classes */
color: #000;
background-color: #cfc;
border: 1px dashed #8f8;
padding: .5em;
}

.admonition.missing { /* csslint allow: adjoining-classes */
color: #000;
background-color: #ffc0a0;
border: 1px dashed #400;
padding: .5em;
}

.admonition.note { /* csslint allow: adjoining-classes */
color: #000;
background-color: #ffd; /* for incompatible Browsers  */
background-color: var(--note-bg-color);
border: 1px dashed #fc4;
padding: .5em;
}

.admonition.note2 { /* csslint allow: adjoining-classes */
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}

.admonition.conference { /* csslint allow: adjoining-classes */
color: var(--note-conference-color);
background-color: #abdd8b; /* for incompatible Browsers  */
background-color: var(--note-conference-bg-color);
border-color: #338033;
}

.admonition.incomplete {
color: #000;
background-color: #ffc0a0;
padding: .5em;
border: 1px dashed #400;
}

.admonition.danger { /* csslint allow: adjoining-classes */
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}

.admonition-title {
font-weight: 700;
text-align: left;
}


.dropdown-submenu {
position: relative;
}

.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
display: block;
}

.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}

.dropdown-submenu.pull-left { /* csslint allow: adjoining-classes */
float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu { /* csslint allow: adjoining-classes */
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}

table.gstl_50.gssb_c {
color: #495057 !important;
}

.navbar {
background-image: -webkit-linear-gradient(#589037,#338033 60%,#217831);
background-image: linear-gradient(#589037,#338033 60%,#217831);
background-repeat: no-repeat;
border-bottom: 1px solid #1b6618;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff589037',endColorstr='#ff217831',GradientType=0);
filter: none;
-webkit-box-shadow: 0 0 .2rem rgba(0,0,0,.1),0 .2rem .4rem rgba(0,0,0,.2);
box-shadow: 0 0 .2rem rgba(0,0,0,.1),0 .2rem .4rem rgba(0,0,0,.2);
padding: 0px;
}

.navbar-nav .active a, .navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav .active a:focus {
color: #fff;
background-color: #1b6618;
}

.navbar-toggler {
font-size: 1rem !important;
}

.navbar-light .navbar-toggler {
color: #495057; /* for incompatible Browsers  */
color: var(--body-color);
border-color: #495057; /* for incompatible Browsers  */
border-color: var(--body-color);
}

.dropdown-menu {
background-color: #abdd8b;
}

.container {
max-width: 1400px;
}

a.nav-link {
font-size: small;
}

.dropdown-item {
font-size: small;
}

.nav-link:after {
display: none !important;
}

a.no-arrow-link:after {
display: none !important;
}

.toc-scroll {
overflow-y: auto;
max-height: 80vh;
}

.admonition p {
margin-bottom: 0;
}

code {
background-color: #f8f9fa;
background-color: var(--code-bg);
border: 1px solid var(--code-border-color);
border-radius: 2px;
padding: 1px 4px;
font-family: monospace,monospace; /* little hack */
color: #333;
color: var(--code-color);
white-space: pre-wrap;
word-wrap: break-word;
}

.hljs {
background: var(--hljs-bg);
border-radius: 3px;
border: 1px solid #ddd !important;
padding: 12px 8px;
color: var(--hljs-color);
min-height: 37px;
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
color: var(--hljs-attribute-color);
font-weight:400;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: var(--hljs-literal-color);
}

.hljs-comment, .hljs-quote {
color: var(--hljs-comment-color);
}

.hljs-keyword, .hljs-selector-tag, .hljs-subst {
color: var(--hljs-color);
}

.hljs-symbol, .hljs-bullet {
color: var(--hljs-symbol-color);
}

.hljs-addition {
background: var(--hljs-addition-bg);
}

h1, h2 {
border-bottom: 1px solid #919699;
padding-bottom: 1px;
margin-bottom: .4em;
}

h2 {
font-size: 1.5em;
margin-top: 1em;
font-weight: 400;
}

h3 {
font-size: 1.2em;
font-weight: 700;
margin-top: .3em;
}

h4 {
font-size: .95em;
font-weight: 700;
margin-top: .3em;
}

h5 {
font-size: .94em;
font-weight: 700;
margin-top: .3em;
}

hTitles {
font-size: 1.8em;
font-weight: 700;
color: #338033; /* for incompatible Browsers  */
color: var(--hTitles-color);
margin-bottom: .5rem;
font-family: inherit;
line-height: 1.2;
margin-top: 10px;
}

.sumoLogo {
pointer-events:none;
border:10px;
border-color: #aaa;
margin-bottom: 10px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px rgba(0,0,0,.4); /* for incompatible Browsers  */
box-shadow: 0 0 8px var(--sumo-logo-shadow-color);
-webkit-box-shadow: 0 0 8px var(--sumo-logo-shadow-color);
-moz-box-shadow: 0 0 8px var(--sumo-logo-shadow-color);
}

ul {
list-style-position: outside;
}

table {
border: 1px solid #dee2e6; /* for incompatible Browsers  */
border: 1px solid var(--table-border-color);
}

td {
border: 1px solid #dee2e6;
}

td:nth-child(1) {
word-break: keep-all !important;
white-space: nowrap;
}

.cellNoWrap {
white-space:nowrap !important;
}

thead th {
vertical-align: center;
text-align: center;
background: #dfd; /* for incompatible Browsers  */
background: var(--thead-color);
word-break: keep-all !important;
}

.table th, .table td {
padding: .3rem;
}

a {
color: #0645ad;
color: var(--a-color);
}

.col-md-3 {
max-width: 20%;
}

.col-md-9 {
flex: 1 0 80%;
max-width: 80%;
}

@media (max-width: 768px) {
.col-md-3 {
max-width: 800px;
}
.col-md-9 {
max-width: 100%;
}
.main-area {
border-radius:0;
}
}

.gsc-above-wrapper-area-container {
border: none !important;
}

.gsc-control-cse {
padding: 0 !important;
}

.gsc-above-wrapper-area-container td {
border: none !important;
}

.gsc-search-box {
border: none !important;
}

.gsc-search-box td {
border: none !important;
}

a[href ^= "http"]:after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}

#goToTop {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: rgba(85,85,85,.5);
color: #fff;
cursor: pointer;
padding: 15px;
border-radius: 8px;
}

#goToTop:hover {
background-color: #555;
}

.modal-header {
background-color: #dfd;
}

.modal-title {
font-weight: 700;
color: #338033;
}

.task-list-item {
position: relative;
list-style-type: none;
}

/* COPY CODE BLOCKS - based on https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html */
.codehilite > pre {
position:relative;
}

.copyCodeButton {
position:absolute;
top:5px;
right:5px;

padding:.15rem;
background-color:#bcbabb30;
color: #1e1e1e;
border:ridge 1px #7b7b7c;
border-radius:5px;
text-shadow:#c4c4c4 0 0 2px;
}

.copyCodeButton:hover {
cursor:pointer;
background-color:#bcbabb;
}
/* ---- */

.tutorial-video {
width: 560px;
/* height: 315px; */
}

.video-container {
position: relative;
text-decoration: none;
display: inline-block;
text-align: center;
}

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.video-text {
background-color:rgba(0, 0, 0, 0.5);
color: #fff;
padding: 3px;
}