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 */
    }
}

.important {
    color: #980000;
}

.alt-java {
    display: block;
}

.alt-python {
    display: none;
}

.flat {
    display: none;
}

.print-only {
    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;
}

.callout {
    position: relative;
    z-index: 1000;
    padding: 1rem;
    background-color: #e6fff2;
    border: 1px solid #198754;
    border-radius: 0.5rem;
    max-width: 600px;
}

/* Outer triangle (border color) */
.callout::after {
    content: "";
    position: absolute;
    bottom: -16px; /* slightly below the inner one */
    left: 20px;
    border-width: 16px 12px 0;
    border-style: solid;
    border-color: #198754 transparent transparent transparent;
}

/* Inner triangle (background color), slightly smaller to create "border" effect */
.callout::before {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 22px;
    border-width: 14px 10px 0;
    border-style: solid;
    border-color: #e6fff2 transparent transparent transparent;
    z-index: 1;
}