//
// Style Markdown content
//

.td-content {
    order: 1;

    p, li, td {
        font-weight: $font-weight-body-text;
    }

    > h1 {
        font-weight: $font-weight-bold;
        margin-bottom: .5rem;
        color: $secondary;
    }

    > h2 {
        font-weight: $font-weight-bold;
        margin-bottom: 1rem;
    }

    > h2:not(:first-child) {
        margin-top: 3rem;
    }

    > h2 + h3 {
         margin-top: 1rem;
    }

    > h3, > h4, > h5, > h6 {
        margin-bottom: 1rem;
        margin-top: 2rem;
        font-weight: $font-weight-bold;
    }

    img {
        @extend .img-fluid;
    }

    > table {
        @extend .table-striped;

        @extend .table-responsive;

        @extend .table;
    }

    > blockquote {
        padding: 0 0 0 1rem;
        margin-bottom: $spacer;
        color: $gray-600;
        border-left: 6px solid $secondary;
    }

    > ul li, > ol li {
        margin-bottom: .25rem;
    }

    strong {
        font-weight: $font-weight-bold;
    }

    > pre, > .highlight, > .lead, > h1, > h2, > ul, > ol, > p, > blockquote, > dl dd, .footnotes, > .alert {
        @extend .td-max-width-on-larger-screens;
    }

    a, a:visited {
        color: $secondary;
        text-decoration: none;
    }

    a:hover {
        color: $primary;
        text-decoration: none;;
    }

    .alert {
        background-color: white;
        border-color: $highlight2;
    }

    a.btn {
        background-color: $highlight1;
        text-decoration: none;
        color: white;
    }

    .alert:not(:first-child) {
        margin-top: 2 * $spacer;
        margin-bottom: 2 * $spacer;
    }

    .lead {
        margin-bottom: 1.5rem;
        font-weight: $font-weight-bold;
    }

    .highlight i.fas {
        // To prevent the margin change when doing mouseover.
        display: inline !important;
    }

    .highlight {
        margin: 0.5rem 0;
    }
}

.text-white a, .text-white a:visited {
    color: white;
    text-decoration: none;
}

.text-white a:hover {
    color: white;
    text-decoration: underline;
}

.td-breadcrumbs a, .td-breadcrumbs a:visited {
    color: $secondary;
    text-decoration: none;
}

.td-breadcrumbs a:hover {
    color: $primary;
    text-decoration: none;
}

.td-title {
    margin-top: 1rem;
    margin-bottom: .5rem;

    @include media-breakpoint-up(sm) {
        font-size: 3rem;
    }
}

.card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.card {
    flex: 1 0;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
}

.card h5 {
    color: $secondary;
}

.td-page-meta {
    
    a, a:visited {
        color: $secondary;
        text-decoration: none;
    }

    a:hover {
        color: $primary;
        text-decoration: none;
    }
}

nav#TableOfContents {
    margin-top: 1.5em;
}

.tab-content {
    
    max-width: 100%  !important;

    .tab-pane {
        background-color: white !important;
        max-width: 100%  !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }
}

.img-scarf {
    height: 1px ;
    width: 1px;
}

footer > .mx-sm-5 {
    margin-left: auto !important;
    margin-right: auto !important;
}