style.css

:root {
    --base-font-size: 15px;
    --theme-color: #298596;
    --content-max-width: 68em;
    --base-background-color: white;
    --base-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
    --strong-color: inherit;
    --cover-background-color: white;  
    --cover-background-image: none;
    --cover-heading-color: #01295c;
    --cover-heading-font-size-max: 1rem;
    --cover-blockquote-font-size: 1.0rem;
    --cover-blockquote-color: #01295c;
    --cover-button-border-radius: 8px;
    --cover-max-width: 90%;
    --navbar-menu-background: white;
    --sidebar-background: white;
    --heading-h1-font-weight: bold;
    --heading-h2-font-weight: bold;
    --heading-h2-padding: 0;
    --heading-h3-padding: 0;
    --heading-h4-padding: 0;
    --heading-h5-padding: 0;
    --heading-font-weight: bold;
    --heading-h1-margin: 0rem;
    --heading-h2-border-width: 0;
    --heading-h2-margin: 2rem 0 1rem 0;
    --heading-h3-margin: 1.875rem 0 0 0;
    --heading-h4-margin: 1.75rem 0 0 0;
    --sidebar-toggle-background: #ceedef;
    --sidebar-toggle-icon-color: #298596; 
    --sidebar-toggle-border-color: transparent;
    --sidebar-toggle-offset-top: calc(45px - (var(--sidebar-toggle-height) / 2));
    --sidebar-nav-link-font-weight--hover: unset;
    --sidebar-nav-indent: 10px;
    --link-color: #284472;
    --emoji-size: 1.125rem;
    --code-font-size: 0.85rem;
    --code-block-padding: 0.75rem;
    --code-inline-background: #f2f2f2;
    --blockquote-font-size: 0.95rem;
    --blockquote-em-font-style: italic;
    --notice-important-border-color: #e69810;
    --notice-important-background: #fcebd9;
    --notice-tip-border-color: #44638e;
    --kbd-padding: 0.35rem 0.5rem 0.35rem 0.35rem;
    --kbd-background: radial-gradient(white, #f2f2f2);
    --zoomimage-overlay-background: rgba(230,230,230,0.75);
}

/* Body, typography and containers */
body { 
    color: #454647;
}
.markdown-section {
    padding-top: 5px;
}
article h1 {
    page-break-inside: auto;
    page-break-before: always;
    break-inside: auto;
    page-break-before: always;
}

/* Github corner link*/
@media screen and (max-width: 768px) {
    .github-corner svg {
        height: 56px;
        width: 56px;
    }
}

/* Sidebar Logo */
.app-name-link img {
    padding: 4px 6px;
}

/* Search bar*/
.search input:focus {
    box-shadow: none !important;
    border-color: #898d8f !important;
}

/* Navbar menu */
.app-nav li ul {
    border-radius: 0;
    padding: 0;
}
.app-nav ul li>p {
    font-size: 1rem;
}

/* Cover page */
section.cover {
    border-bottom: 4px solid #298596;
}
section.cover .cover-main h1 {
    margin: 1.75rem 0 2.5rem;
}
section.cover .cover-main ul {
    margin: 3.5rem auto;
}
@media screen and (max-width: 768px) {
    section.cover .cover-main ul {
        display: none;
    }
}
section.cover .cover-main > p:last-child a:last-child:hover {
    opacity: 1;
}
section.cover img {
    max-width: 100%;
}

/* Headings */
.app-nav:not(:empty) ~ main .markdown-section {
    padding-top: 6rem;
}

.markdown-section h1 {
    border-bottom: 3px solid #298596;
    margin-bottom: 2rem;
}
.markdown-section h1 a>span {
    color: #01295c;
}
.markdown-section h1 a:hover {
    color: #01295c;
    cursor: pointer;
}
.markdown-section h1 a:hover,
.markdown-section h2 a:hover,
.markdown-section h3 a:hover,
.markdown-section h4 a:hover,
.markdown-section h5 a:hover {
    text-decoration: none !important;
}
.markdown-section .anchor span {
    color: #01295c;
}
.markdown-section kbd {
    position: relative;
    top: -0.15rem;
    font-size: 0.75rem;
    border-left-width: 2px;
    border-right-width: 3px;
    border-bottom-width: 4px;
    border-bottom-color: #cbcbcb;
    border-radius: 3px;
}
.markdown-section .warn {
    margin: 1rem 0;
}

/* Tabs */
.docsify-tabs__tab {
    border: none;
    cursor: pointer;
}
.docsify-tabs__tab.docsify-tabs__tab--active {
    box-shadow: none;
    border-bottom: 3px solid var(--docsifytabs-tab-highlight-color);
}

/* Sidebar */
.sidebar ul li a {
    padding: 6px 0;
    line-height: normal;
    text-overflow: initial;
    white-space: normal;
}
.sidebar ul li a,
.sidebar ul li p {
    font-size: 1rem;
    font-weight: 600;
}
.sidebar ul li ul a,
.sidebar ul li ul p {
    font-size: 0.875rem;
    font-weight: 400;
}
.sidebar ul li.active > a {
    border-right: 4px solid;
}
.sidebar ul li ul {
    margin-bottom: 14px;
}
.sidebar ul li .emoji {
    font-size: 1rem;
}

/* Content ----------------------- */

/* BLOCKQUOTE */
.content .markdown-section blockquote p {
    font-weight: 400;
}

/* MEDIUM IMAGES PLUGIN */
.medium-zoom-image.medium-zoom-image--opened {
    z-index: 99;
}
img.medium-zoom-image {
    height: auto;
}

/*IMAGE PLACEHOLDER */
.content img {
    color:#888;
    font-style: italic;
}
.content img:after {
    content:  '  🖼️ ';
    font-style: normal;
}

/* DETAILS */
.content .markdown-section details {
    padding:  0 1rem 0 1rem;
    margin-bottom: 0.5rem;
}
.content .markdown-section details summary {
    padding: 0.5rem;
    margin-left: -1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #44638e;
    font-weight: 500;
}
.content .markdown-section details summary:hover {
    cursor: pointer;
    background: #f2f2f2;
}

/* EM e STRONG */
.content .markdown-section em,
.content .markdown-section strong {
    color: inherit;
}

/* CODE */
.content .markdown-section code {
	color: #454647;
	background-color: #f2f2f2;
	border: 1px solid #dbdbdb;
	border-radius: 2px;
}
.content .markdown-section pre>code {
    color: inherit;
    background-color: inherit;
    border: inherit;
    border-radius: inherit;
}

/* PRE */
.content .markdown-section iframe {
    width: 100%;
}

/* PRE */
.content .markdown-section pre {
    background-color: #e6f6f8;
    max-height: 600px;
    overflow-y: auto;
}

/* TABLE */
.content .markdown-section table {
    font-size: 0.875rem;
}
.content .markdown-section table thead th {
    border: 0px solid #f2f2f2;
    border-bottom: 1px solid #cbcbcb;
    text-align: left;
}
.content .markdown-section table thead tr {
    border: none;
}
.content .markdown-section table td {
    border: 1px solid #f2f2f2;
    border-left: 0;
    border-right: 0;
}

/* UL LI not so special style */
.content .markdown-section ul label h1, 
.content .markdown-section ol label h1,
.content .markdown-section ul label h2, 
.content .markdown-section ol label h2,
.content .markdown-section ul label h3, 
.content .markdown-section ol label h3,
.content .markdown-section ul label h4, 
.content .markdown-section ol label h4,
.content .markdown-section ul label h5, 
.content .markdown-section ol label h5
.content .markdown-section ul label h6, 
.content .markdown-section ol label h6 {
	display: inline;
}
.content .markdown-section ul .task-list-item input, 
.content .markdown-section ol .task-list-item input {
	vertical-align: -0.125em;
}
.content .markdown-section ul:not(.task-list), 
.content .markdown-section .content .markdown-section ul:not(.task-list) {
	margin: .5em 0 .6em 0em;
	list-style: none;
}
.content .markdown-section ul:not(.task-list)>li:before, 
.content .markdown-section .content .markdown-section ul:not(.task-list)>li:before {
	content: '\25a0';
	padding-right: 0.75rem;
	color: #01295c;
}
.content .markdown-section ul:not(.task-list) li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ul:not(.task-list) li ul:not(.task-list) li:before,
.content .markdown-section ol li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ol li ul:not(.task-list) li:before {
	content: '\25a1';
	padding-right: 0.75rem;
	color: #01295c;
}
.content .markdown-section ul:not(.task-list) li ul:not(.task-list) li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ul:not(.task-list) li ul:not(.task-list) li ul:not(.task-list) li:before,
.content .markdown-section ul:not(.task-list) li ol li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ul:not(.task-list) li ol li ul:not(.task-list) li:before,
.content .markdown-section ol li ol li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ol li ol li ul:not(.task-list) li:before,
.content .markdown-section ol li ul:not(.task-list) li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ol li ul:not(.task-list) li ul:not(.task-list) li:before {
	content: '\23fa';
	padding-right: 0.75rem;
	color: #298596;
}
.content .markdown-section ul:not(.task-list) li ul:not(.task-list) li ul:not(.task-list) li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ul:not(.task-list) li ul:not(.task-list) li ul:not(.task-list) li ul:not(.task-list) li:before,
.content .markdown-section ul:not(.task-list) li ol li ul:not(.task-list) li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ul:not(.task-list) li ol li ul:not(.task-list) li ul:not(.task-list) li:before,
.content .markdown-section ol li ol li ul:not(.task-list) li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ol li ol li ul:not(.task-list) li ul:not(.task-list) li:before,
.content .markdown-section ol li ul:not(.task-list) li ul:not(.task-list) li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ol li ul:not(.task-list) li ul:not(.task-list) li ul:not(.task-list) li:before,

.content .markdown-section ul:not(.task-list) li ul:not(.task-list) li ol li ul:not(.task-list) li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ul:not(.task-list) li ul:not(.task-list) li ol li ul:not(.task-list) li:before,
.content .markdown-section ul:not(.task-list) li ol li ol li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ul:not(.task-list) li ol li ol li ul:not(.task-list) li:before,
.content .markdown-section ol li ol li ol li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ol li ol li ol li ul:not(.task-list) li:before,
.content .markdown-section ol li ul:not(.task-list) li ol li ul:not(.task-list) li:before, 
.content .markdown-section .content .markdown-section ol li ul:not(.task-list) li ol li ul:not(.task-list) li:before {
	content: '\1f786';
	padding-right: 0.75rem;
	color: #298596;
}

/* OL LI special style */
.content .markdown-section li:before,
.content .markdown-section .content .markdown-section li:before {
	color: #298596;
	font-weight: 600;
}
.content .markdown-section ol,
.content .markdown-section .content .markdown-section ol {
	padding: 0;
	counter-reset: li-counter;
	margin: 2em 0 1em 2em;
	list-style-type: none;
}
.content .markdown-section ol>li ,
.content .markdown-section .content .markdown-section ol>li {
    position: relative;
    margin-bottom: 14px;
    padding-left: 1.5em;
    min-height: 3em;
}
.content .markdown-section ol>li:before,
.content .markdown-section .content .markdown-section ol>li:before {
    position: absolute;
    top: -4px;
    left: -1.33em;
    width: 2.0rem;
    height: 2.0rem;
    font-size: 1.0rem;
    line-height: 2.0rem;
    text-align: center;
	color: #f5f5f5;
	border-radius: 50%;
	background-color: #4ea2ad;
	content: counter(li-counter);
	counter-increment: li-counter;
	font-weight: 600;
}
/* Second Level */
.content .markdown-section ol>li>ol,
.content .markdown-section ul:not(.task-list)>li>ol,
.content .markdown-section ol>li>ol>li>ol,
.content .markdown-section ul:not(.task-list)>li>ul:not(.task-list)>li>ol,
.content .markdown-section ol>li>ul:not(.task-list)>li>ol 
.content .markdown-section .content .markdown-section ol>li>ol,
.content .markdown-section .content .markdown-section ul:not(.task-list)>li>ol,
.content .markdown-section .content .markdown-section ol>li>ol>li>ol,
.content .markdown-section .content .markdown-section ul:not(.task-list)>li>ul:not(.task-list)>li>ol,
.content .markdown-section .content .markdown-section ol>li>ul:not(.task-list)>li>ol {
	padding: 0;
	counter-reset: li-counter;
	margin: 0.75em 0 0.6em 0.25em;
	list-style-type: none;
}
.content .markdown-section ol>li>ol>li,
.content .markdown-section ul:not(.task-list)>li>ol>li,
.content .markdown-section ol>li>ol>li>ol>li,
.content .markdown-section ul:not(.task-list)>li>ul:not(.task-list)>li>ol>li,
.content .markdown-section ol>li>ul:not(.task-list)>li>ol>li, 
.content .markdown-section .content .markdown-section ol>li>ol>li,
.content .markdown-section .content .markdown-section ul:not(.task-list)>li>ol>li,
.content .markdown-section .content .markdown-section ol>li>ol>li>ol>li,
.content .markdown-section .content .markdown-section ul:not(.task-list)>li>ul:not(.task-list)>li>ol>li,
.content .markdown-section .content .markdown-section ol>li>ul:not(.task-list)>li>ol>li {
    position: initial;
    margin-bottom: initial;
    padding-left: initial;
    min-height: initial;
}
.content .markdown-section ol>li>ol>li:before,
.content .markdown-section ul:not(.task-list)>li>ol>li:before,
.content .markdown-section ol>li>ol>li>ol>li:before,
.content .markdown-section ul:not(.task-list)>li>ul:not(.task-list)>li>ol>li:before,
.content .markdown-section ol>li>ul:not(.task-list)>li>ol>li:before,
.content .markdown-section .content .markdown-section ol>li>ol>li:before,
.content .markdown-section .content .markdown-section ul:not(.task-list)>li>ol>li:before,
.content .markdown-section .content .markdown-section ol>li>ol>li>ol>li:before,
.content .markdown-section .content .markdown-section ul:not(.task-list)>li>ul:not(.task-list)>li>ol>li:before,
.content .markdown-section .content .markdown-section ol>li>ul:not(.task-list)>li>ol>li:before {
    position: initial;
    top: initial;
    left: initial;
    width: initial;
    height: initial;
    font-size: initial;
    line-height: initial;
    text-align: initial;
	color: #298596;
	border-radius: initial;
	background-color: initial;
	content: counter(li-counter, lower-alpha);
	counter-increment: li-counter;
	font-weight: 600;
	padding-right: 1rem;
}
.content .markdown-section ol>li>ol>li:before,
.content .markdown-section ul:not(.task-list)>li>ol>li:before,
.content .markdown-section .content .markdown-section ol>li>ol>li:before,
.content .markdown-section .content .markdown-section ul:not(.task-list)>li>ol>li:before  {
	content: counter(li-counter, lower-alpha);
}
.content .markdown-section ol>li>ol>li>ol>li:before,
.content .markdown-section ul:not(.task-list)>li>ul:not(.task-list)>li>ol>li:before,
.content .markdown-section ol>li>ul:not(.task-list)>li>ol>li:before,
.content .markdown-section .content .markdown-section ol>li>ol>li>ol>li:before,
.content .markdown-section .content .markdown-section ul:not(.task-list)>li>ul:not(.task-list)>li>ol>li:before,
.content .markdown-section .content .markdown-section ol>li>ul:not(.task-list)>li>ol>li:before {
	content: counter(li-counter, lower-roman);
}


/* HOME PANEL */
@keyframes box-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }

.home-row {
    display: flex;
    flex-wrap: wrap;
}
.home-col {
    width: 25%;
    flex-basis: 25%;
    padding-left: 12px;
    padding-right: 12px;
    animation-name: box-enter;
    animation-duration: 2s;
}
@media screen and (max-width: 1160px){
    .home-col {
        width: 50%;
        flex-basis: 50%;
    }       
}
@media screen and (max-width: 768px){
    .home-col {
        width: 100%;
        flex-basis: 100%;
    }       
}

.home-panel {
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin-bottom: 30px;
    background-color: #fff;
}

.home-row .panel-heading {
    border: none;
    background: #298596 !important;
    color: white !important;
    font-weight: bold;
    font-size: 1.125rem;
    padding: 10px 13px;
}
.home-panel .panel-heading a,
.home-panel .panel-heading a:hover {
    color: white;
    text-decoration: none;
}
.home-panel .panel-body {
	padding: 24px;
	border: none;
	background: #4ea2ad;
	color: white;
	font-size: 1.875rem;
	height: 138px;
}
.home-panel p {
    margin: 0 !important;
}
.home-panel .panel-body pre {
    background: none;
    border: none;
    color: white;
    font-size: 2.125rem;
    text-align: center;
    padding: 0;
}
.home-panel .panel-body pre .fa {
	margin-left: calc(-50% + 14px);
}
.home-panel .list-group {
	border: none;
    background: #f2f2f2;
	padding: 10px !important;
    box-shadow: none;
    margin: 0 !important;
}
.home-panel .list-group .list-group-item {
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 15px;
}
.home-panel .list-group .list-group-item::before {
    display: none;
}
.home-panel .list-group .list-group-item p {
    margin: 0;
}
.home-panel .list-group .list-group-item a {
    text-decoration: none;
}

/* Share Links */
a.fab,
a.fab:hover {
    color: white;
}

/* Two columns lists */
.two-columns-list>ul,
.two-columns-list>ol {
    column-width: 380px;
    column-gap: 3em;
    padding-left: 0px;
}
.three-columns-list>ul,
.three-columns-list>ol {
    column-width: 220px;
    column-gap: 3em;
    padding-left: 0px;
}
.two-columns-list>ul>li,
.two-columns-list>ol>li, 
.three-columns-list>ul>li,
.three-columns-list>ol>li {
    break-inside: avoid;
    margin-bottom: 0.5em;
}

/* Page TOC */
.page_toc {
    margin-top: 120px;
    font-size: 0.875rem;
    padding: 0rem 1rem 0rem 0.25rem;
    overflow: auto;
    max-height: calc(100vh - 120px);
    max-width: 100%;
}
.page_toc ul a {
    font-weight: 400;
    color: #888888;
    word-wrap: anywhere;
}
.page_toc ul a:hover span {
    color: var(--theme-color, #298596);
}
.page_toc ul code {
    color: var(--link-color, #284472);
}
.page_toc .active {
    border-left: none;
    color: var(--theme-color, #298596);
    padding-left: 0px;
}
.page_toc .active::before {
    content: '';
    width: 3px;
    background-color: var(--theme-color, #298596);
    display: inline-block;
    height: 1.25rem;
    position: absolute;
    left: 0px;
}
@media screen and (max-width: 1300px) {
    .page_toc {
        margin-bottom: -120px;
    }
}