/* dark / light mode */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: #dbdbdb;
}

html.dark .hidden-dark {
    display: none;
}

.hidden-light {
    display: none;
}

html.dark .hidden-light {
    display: inherit;
}

html.dark hr {
    border-color: #111;
}

html.dark .docs-sidebar .nav>li>a {
    color: #eee;
}

html.dark .dark-text hr {
    border-color: #fcfcfc;
}

html.dark strong {
    color: #fcfcfc;
}

html.dark .intro1 {
    background-color: #0c0c0c;
}

html.dark .intro1 a {
    color: #F16811 !important;
}

html.dark a {
    color: #CC8548;
}

html.dark a:hover {
    color: #F16811;
}

html.dark .intro2 {
    background-color: #F16811;
    border-color: #DE7844;
}

html.dark .btn-primary {
    background-color: #F16811;
    border-color: #DE7844;
    color: #000;
}

html.dark .btn-primary:hover {
    background-color: #DE7844;
    border-color: #F16811;
}

html.dark .btn-info {
    background-color: #ABABAB;
    border-color: #9A9A9A;
    color: #000;
}

html.dark .btn-info:hover {
    background-color: #9A9A9A;
    border-color: #ABABAB;
}

#mode {
    cursor: pointer;
    position: fixed;
    right: 16px;
    top: 96px;
    z-index: 1;
    border-radius: 16px;
    line-height: 0;
}

#mode svg {
    width: 20px;
    padding: 12px;
    box-sizing: content-box;
}

html.dark #mode .light {
    display: none;
}

html #mode .light {
    display: block;
}

html.dark #mode .dark {
    display: block;
}

html #mode .dark {
    display: none;
}

/*Docs*/

.body {
    position: relative;
}

.sub-title {
    font-size: 30px;
    margin-top: 50px;
    margin-bottom: 10px;
    padding-bottom: 0;
}

.sub-title a {
    font-size: 16px;
}

.section.docs-header {
    padding: 25px;
    border-bottom: 1px solid var(--zup-border-color);
    position: fixed;
    width: 100%;
    background: var(--zup-background);
    z-index: 9999;
}

.section.docs-wrapper {
    padding-top: 80px;
}

.affix {
    position: static;
}

@media (min-width: 992px) {
    .affix,
    .affix-bottom {
        width: 213px
    }
    .affix {
        position: fixed;
        top: 20px
    }
    .affix-bottom {
        position: absolute
    }
    .affix .bs-docs-sidenav,
    .affix-bottom .bs-docs-sidenav {
        margin-top: 0;
        margin-bottom: 0
    }
}

@media (min-width: 1200px) {
    .affix,
    .affix-bottom {
        width: 270px
    }
}

/* LOGO */
.logo-wrapper {
    gap: 10px;
    align-items: center;
}

.logo-wrapper h1 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 500;
}

/* SIDEBAR */


/* all links */
.docs-sidebar .nav>li> a {
    color: var(--zup-color-text);
    border-left: 2px solid transparent;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 400;
}

/* nested links */
.docs-sidebar .nav .nav>li>a {
    position: relative;
    left: -2px;
    padding-left: 30px;
    font-size: 14px;
    padding-right: 0;
}

/* hover links */ 
.docs-sidebar .nav>li:not(.active)>a:hover {
    color: var(--zup-color-title);
    text-decoration: none;
    background-color: transparent;
    border-left-width: 2px;
    border-left-color: var(--zup-color-primary);
}
/* focus links */
.docs-sidebar .nav>li>a:focus {
    text-decoration: none;
    background-color: transparent;
}
/* active links */
.docs-sidebar .nav>.active>a {
    color: var(--zup-color-title);
    text-decoration: none;
    background-color: transparent;
    border-left-color: var(--zup-color-primary);
}
/* all active links */
.docs-sidebar .nav>.active>a, 
.docs-sidebar .nav>.active:hover>a,
.docs-sidebar .nav>.active:focus>a {
    font-weight: 600;
}
/* nested active links */
.docs-sidebar .nav .nav>.active>a, 
.docs-sidebar .nav .nav>.active:hover>a,
.docs-sidebar .nav .nav>.active:focus>a {
    font-weight: 500;
}

@media (min-width: 992px) {
    .docs-sidebar .nav ul {
        display: none;
        padding-bottom: 10px;
    }
    .docs-sidebar .nav>.active>ul {
        display: block;
    }
}

.docs-sidebar .nav>.active>ul {
    border-left: 2px solid var(--zup-border-color);
}