mark {
    background-color: #ff0;
    border-radius: 5px;
    padding-top: 0;
    padding-bottom: 0;
}

.indented {
    padding-left: 20px;
}

.theme-card img {
    width: 100%;
}

/* Scrollbar */

.slim-scroll::-webkit-scrollbar {
    width: 5px;
}

.slim-scroll::-webkit-scrollbar-thumb {
    background: #808080;
    border-radius: 20px;
}

.slim-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 20px;
}

.slim-scroll-blue::-webkit-scrollbar {
    width: 5px;
}

.slim-scroll-blue::-webkit-scrollbar-thumb {
    background: #00b0ef;
    border-radius: 20px;
}

.slim-scroll-blue::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 20px;
}

/* Layout containers */

#flex-body {
    display: flex;
    flex: 1;
    align-items: start;
}

#content-wrapper {
    flex: 1;
    margin: 0 auto;
    min-width: 0;
    max-width: 1000px;
    overflow-x: auto;
    padding: 0.8rem 20px 0 20px;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}

#site-nav,
#page-nav {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--sticky-header-height);
    flex: 0 0 auto;
    max-width: 300px;
    max-height: calc(100vh - var(--sticky-header-height));
    width: 300px;
}

#site-nav {
    border-right: 1px solid lightgrey;
    padding-bottom: 20px;
    z-index: 999;
}

.site-nav-top {
    margin: 0.8rem 0;
    padding: 0 12px 12px 12px;
}

.nav-component {
    overflow-y: auto;
}

#page-nav {
    border-left: 1px solid lightgrey;
}

@media screen and (max-width: 1299.98px) {
    #page-nav {
        display: none;
    }
}

/* Bootstrap medium(md) responsive breakpoint */
@media screen and (max-width: 991.98px) {
    #site-nav {
        display: none;
    }
}

/* Bootstrap small(sm) responsive breakpoint */
@media (max-width: 767.98px) {
    .indented {
        padding-left: 10px;
    }

    #content-wrapper {
        padding: 0 10px;
    }
}

/* Bootstrap extra small(xs) responsive breakpoint */
@media screen and (max-width: 575.98px) {
    #site-nav {
        display: none;
    }
}

/* ============= site specific ============= */

/* Hide site navigation when printing */
@media print {
    #site-nav {
        display: none;
    }

    #page-nav {
        display: none;
    }

    footer {
        display: none;
    }

    /* Reduce font size when printing */
    h1 {
        font-size: 1.2rem !important;
    }
    h2 {
        font-size: 1.0rem !important;
    }
    h3 {
        font-size: 0.9rem !important;
    }
    h4 {
        font-size: 0.8rem !important;
    }
    h5 {
        font-size: 0.7rem !important;
    }
    body {
        font-size: 0.65rem !important;
    }
    .btn {
        font-size: 0.65rem !important;
    }
    img {
        zoom: 0.8;  /* might not work on some browsers */
    }
}



.website-content {
    margin: 12px auto 40px auto;
    max-width: 800px;
    overflow: hidden;
    text-align:justify
}

.important {
    color: #980000;
}

.alt-java {
    display: block;
}

.alt-python {
    display: none;
}

.flat {
    display: none;
}

.indented-less {
    padding-left: 10px;
}

.indented {
    padding-left: 20px;
}

.indented-level1 {
    padding-left: 20px;
}

.indented-level2 {
    padding-left: 40px;
}

.indented-level3 {
    padding-left: 60px;
}

.indented-level4 {
    padding-left: 80px;
}

.bg-info {
    background-color: #17a2b8 !important;
}
.text-info {
    color: #17a2b8 !important;
}
.border-info {
    border-color: #17a2b8 !important;
}