:root {
    --ecoji-pink: #FF48AC;
    --ecoji-blue: #45B4FF;
    --ecoji-shrimp: rgb(255, 169, 175);
}

body {
    color: #cccccc;
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans",
        "Droid Sans", "Helvetica Neue", sans-serif;
    line-height: 1.7;
    font-size: 16px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
    background-color: #222222;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
    background-size: 200px 240px;
}

@media (min-width:991px) and (min-height: 800px) {
    body {
        background-image: url(/images/right-background.svg);
    }
}

a {
    color: var(--ecoji-blue);
}

a:hover {
    color: var(--ecoji-pink);
}

.article,
.sideaffix {
    margin-top: 80px;
}

.article {
    margin-bottom: 115px;
}

.sideaffix {
    font-size: 16px;
    max-height: 100%;
    overflow: hidden;
    top: 0px;
    bottom: 10px;
    position: fixed;
}

.sideaffix.shiftup {
    bottom: 70px;
}

h1 {
    font-weight: 600;
    font-size: 32px;
}

h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.8;
}

h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.8;
}

h5 {
    font-size: 14px;
    padding: 10px 0px;
}

.article.grid-right {
    margin-left: 0 !important;
}
.article.grid-right > .col-md-10 {
    padding-left: 0 !important;
}

article h1,
article h2,
article h3,
article h4 {
    margin-top: 35px;
    margin-bottom: 15px;
}

article h1:first-child {
    margin-top: 0px;
}

article h4 {
    padding-bottom: 8px;
    border-bottom: 2px solid #ddd;
}

.navbar-brand {
    margin-right: 20px;
}

.navbar {
    border: none;
}

.subnav {
    border-top: 1px solid #ddd;
    background-color: #333337;
}

.navbar-inverse {
    background-color: #111111;
    z-index: 100;
}

.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-text {
    color: #ccc;
    background-color: #111111;
    border-bottom: 3px solid transparent;
    padding-bottom: 12px;
}

.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
    color: var(--ecoji-shrimp);
    background-color: #111111;
    border-bottom: 3px solid #333337;
    transition: all ease 0.25s;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
    color: var(--ecoji-shrimp);
    background-color: #111111;
    border-bottom: 3px solid var(--ecoji-shrimp);
    transition: all ease 0.25s;
    font-weight: bold;
}

.navbar-form .form-control {
    border: none;
    border-radius: 0;
}

.toc .level1>li {
    font-weight: 400;
}

.toc .nav>li>a {
    color: #ccd5dc;
}

.sidefilter {
    background-color: #2d2d30;
    border-left: none;
    border-right: none;
}

.sidefilter {
    background-color: #2d2d30;
    border-left: none;
    border-right: none;
}

.toc-filter {
    padding: 10px;
    margin: 0;
    background-color: #2d2d30;
}

.toc-filter>input {
    border: none;
    border-radius: unset;
    background-color: #333337;
    padding: 5px 0 5px 20px;
    font-size: 90%
}

.toc-filter>.clear-icon {
    position: absolute;
    top: 17px;
    right: 15px;
}

.toc-filter>input:focus {
    color: #ccd5dc;
    transition: all ease 0.25s;
}

.toc-filter>.filter-icon {
    display: none;
}

.sidetoc>.toc {
    background-color: transparent;
    overflow-x: hidden;
}

.sidetoc {
    background-color: transparent;
    border: none;
}

.alert {
    background-color: inherit;
    border: none;
    padding: 10px 0;
    border-radius: 0;
}

.alert>p {
    margin-bottom: 0;
    padding: 5px 10px;
    border-bottom: 1px solid;
    background-color: #212123;
}

.alert>h5 {
    padding: 10px 15px;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: bold;
    border-top: 2px solid;
    background-color: #212123;
    border-radius: none;
}

.alert>ul {
    margin-bottom: 0;
    padding: 5px 40px;
}

.alert-info{
    color: #1976d2;
}

.alert-warning{
    color: #f57f17;
}

.alert-danger{
    color: #d32f2f;
}

pre {
    padding: 10px;
    margin: 0 0 10px;
    font-size: inherit;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #111111;
    border-radius: 5px;
    border: none;
    color: #bbb;
}

code{
    background: #111111 !important;
    border-radius: 3px;
    color: #bbb;
}

.hljs{
    color: #bbb;
}

.toc .nav > li.active > .expand-stub::before, .toc .nav > li.in > .expand-stub::before, .toc .nav > li.in.active > .expand-stub::before, .toc .nav > li.filtered > .expand-stub::before {
    content: "▾";
}

.toc .nav > li > .expand-stub::before, .toc .nav > li.active > .expand-stub::before {
    content: "▸";
}

.affix ul ul > li > a:before {
    content: "|";
}

.breadcrumb .label.label-primary {
    background: #444;
    border-radius: 0;
    font-weight: normal;
    font-size: 100%;
}

#breadcrumb .breadcrumb>li a {
    border-radius: 0;
    font-weight: normal;
    font-size: 85%;
    display: inline;
    padding: 0 .6em 0;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    color: #999;
}
#breadcrumb .breadcrumb>li a:hover{
    color: #c5c5de;
    transition: all ease 0.25s;
}

.breadcrumb > li + li:before {
    content: "→";
    font-size: 75%;
    color: #111111;
    padding: 0;
}

.toc .level1>li {
    font-weight: 600;
    font-size: 130%;
    padding-left: 5px;
}

.footer {
    border-top: none;
    background-color: #111111;
    padding: 15px 0;
    font-size: 90%;
}

.toc .nav > li > a:hover, .toc .nav > li > a:focus {
    color: #fff;
    transition: all ease 0.1s;
}

.form-control {
    background-color: #333337;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input#search-query:focus {
    color: #c5c5de;
}

.table-bordered, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 1px solid rgb(58, 58, 58);
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgb(31, 31, 31);
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 10px;
    font-size: 110%;
    border-left: 5px solid #69696e;
    color: #69696e;
}

.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
    background-color: #333337;
    border-color: #333337;
}

.breadcrumb>li, .pagination {
    display: inline;
}