:root {
    --c-primary: #af1818; /*  */
    --c-primary-dark: #770c00;
    --c-primary-light: #af181880;
    --c-darkred-t: #770c0099;
    --c-black: black;
    --c-dark: #272729;
    --c-darkgray: #27272980;
    --c-light: #fcfcfc;
    --c-light-gray: #f1f1f1;
    --c-gray: #d3d3d3;

    --c-bg-page: var(--c-light-gray); /* #a2525238 #a25252b0 #671d1d1a #290000*/
    --c-bg-content: var(--c-light);
    --c-bg-content-head: rgb(227, 227, 227); /* #00000012 */
    --c-shadow: #00000028;

    --c-navhead: var(--c-primary);
    --c-navtail: var(--c-dark);

    --c-text-dark: var(--c-black);
    --c-text-light: var(--c-light);

    --media-large: 48em;
    --sidebar-width: 16rem;
}

.testp:active {
    color: pink;
}

body {
    font-family: "Helvetica", sans-serif;
    background-color: var(--c-bg-page);
}

.content-text {
    font-size: 1rem;
}

.content-text-small {
    font-size: 0.9rem;
}

.content-text-tiny {
    font-size: 0.75rem;
}

#page-content {
    padding: 1rem 0.5rem;
}

.std-content-div {
    padding: 1rem 0.5rem 0.5rem 0.5rem;
}

.title-row {
    padding: 0 0 1rem 0;
}

.content-card {
    background-color: var(--c-bg-content);
    border: 1px solid var(--c-darkgray);
    box-shadow: 0px 0px 1px 1px var(--c-shadow);
    margin-bottom: 2rem;
}

.content-card-head{
    background-color: var(--c-bg-content);
    border-bottom: 1px solid var(--c-darkgray);
    padding: 1rem 1rem 0.5rem 1rem;
}

.card-tabs {
    margin-top: 1.5rem;
    margin-left: 0;
    margin-right: 0;
}

.card-tabs .nav-link {
    color: var(--c-text-dark);
    text-decoration: underline;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    min-width: 6rem;
    text-align: center;
    /*border-color: #cccccc #cccccc var(--c-darkgray);*/
    border-color: #cccccc;
    border-bottom: 1px solid var(--c-darkgray);
    background-color: var(--c-bg-page);
    margin-right: 0.25rem;
}

.card-tabs .nav-link.active {
    color: var(--c-primary);
    border-color: var(--c-darkgray) var(--c-darkgray) transparent;
    background-color: var(--c-bg-content);
}

.card-tabs .nav-link:hover:not(.active) {
    border-color: var(--c-darkgray) !important;
}

.nav-link:hover {
    cursor: pointer;
}


/* Styling for doc markdowns */

.doc-md h1 {
    padding-bottom: 1rem;
    font-size: 1.8rem;
}

.doc-md h2 {
    padding: 0.5rem 0 1rem 0;
    font-size: 1.5rem;
}

.doc-md h4 {
    padding: 0.5rem 0;
    font-size: 1.2rem;
}

.doc-md pre {
    max-height: 15rem;
    background-color: var(--c-gray);
}

.doc-md code {
    overflow: scroll;
    /*white-space: nowrap;*/
    background-color: var(--c-gray);
}

.table-wrapper {
    overflow: auto;
    max-width: 100%;
}

.doc-md thead {
    border-bottom: 1px solid black;
}

.doc-md th, .doc-md td {
    min-width: 4rem;
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    padding-right: 1rem;
}

.doc-md th {
    text-align: center;
}

.doc-md tr > td:hover {
    overflow: visible;
    white-space: unset;
}

.doc-md tr:nth-child(even){
    background-color: var(--c-gray);;
}

.doc-md tbody tr td:first-child {
    border-right: 1px solid black;
}


/*List groups*/

.list-group-select-title {
    font-weight: 500;
    background-color: var(--c-light-gray);
    /*color: var(--c-light);*/
    border-color: var(--c-gray);
}

.list-group-select-item {
    border-color: var(--c-gray);

}

.list-group-item.active {
    color: inherit;
    background-color: inherit;
    border-color: var(--c-gray);
    border-bottom: 4px solid var(--c-primary);
    /* box-shadow: 0px 0px 3px 0px inset var(--c-primary);*/
    padding-bottom: 5px;
}

/* dbc Table*/
.meta-table {
    width: fit-content;
}

.meta-table td {
    max-width: 24rem;
    font-size: 0.9rem;
}



/* Overrides */

/* For some markdown `code` formating that is messing with backgrounds */
.hljs {
    background: inherit;
}