/* -> Text */

/* --> Title changes */

h4 {
    color: var(--blue);
    font-weight: bold;
}

.red-text {
    color: var(--red);
}

/* -> Lists */

/* --> Simple, normal */

.list ul h4 {
    font-size: medium;
    font-weight: bold;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
}

.list ul li {
    color: var(--blue);
}

.list ul p {
    color: var(--black);
    margin-left: 0;
}

/* --> Pseudo lists */

.pseudolist {
    padding: 0;
    list-style: none;
    max-width: 32rem;
    margin: 0 auto;
}

.pseudolist > li > p:first-child {
    font-weight: bold;
    color: var(--gray);
    margin-bottom: 0;
}

.pseudolist > li > p {
    font-size: large;
}

.pseudolist li:first-child {
    margin-top: 1rem;
}

/* --> Div list */

.divlist {
    margin: 1rem;
    font-size: large;
}

.bold {
    font-weight: bold;
    color: var(--blue);
}

.bold.red-text {
    color: var(--red);
}

.divlist > div::before {
    content: "· ";
}

/* --> Doc list */

.doclist h4::before {
    content: "· ";
}


/* -> Diagram */

.diagram-wrapper {
    margin: 0 1rem 1rem;
}

.diagram {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 0 auto;
    border: var(--grid-gap) solid var(--gray-light);
    border-radius: 1rem;
    text-align: center;
}

.diagram > div {
    width: 100%;
    max-width: 40rem;
    padding: 1rem;
}

.diagram > div ~ div {
    border-top: var(--grid-gap) solid var(--gray-light);
}


/* -> Tables */

/* --> Main table display */

.table-wrapper {
    display: flex;
    flex-direction: column;
    background-color: var(--gray-light);
    border-top: var(--grid-gap) solid var(--gray-light);
}

/* -->Table titles */

.table-wrapper > h4 {
    background-color: var(--blue);
    color: var(--white);
    font-size: large;
    font-weight: bold;
    border-bottom: var(--grid-gap) solid var(--gray-light);
}

table thead {
    background-color: var(--blue);
    color: var(--white);
}

table thead tr ~ tr {
    border-top: var(--grid-gap) solid var(--gray-light);
}

/* --> ul table */

.table-wrapper > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-auto-rows: 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--grid-gap);
}

.table-wrapper li {
    background-color: var(--white);
}

.table-wrapper p {
    margin: 0.25rem;
    text-align: center;
    height: 3rem;
}

.table-wrapper img {
    object-fit: contain;
    max-height: 5rem;
    margin-bottom: 0.5rem;
}

/* --> "Table" tables */

table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    border-top: var(--grid-gap) solid var(--gray-light);
}

table tbody tr > th:first-child {
    text-align: start;
}

table caption {
    caption-side: top;
    background-color: var(--blue);
    color: var(--white);
    text-align: center;
    font-weight: bold;
    border-top: var(--grid-gap) solid var(--gray-light);
}

table tbody tr:nth-child(odd) {
    background-color: var(--gray-light);
}

/* ---> Scrollable tables */

.scroll {
    width: calc(100vw - 2 * var(--grid-gap));
    max-width: 100%;
    overflow-x: scroll;
}

.scroll table {
    min-width: 32rem;
}

/* ---> Small width tables */

.table-small {
    max-width: 32rem;
}

/* --> Table flex (various tables in a single section) */

.table-flex {
    display: flex;
    justify-content: space-evenly;
    gap: calc(var(--grid-gap) * 2);
}

@media (max-width: 32rem) {
    .table-flex {
        flex-wrap: wrap;
    }
}

/* --> ST rowspans */

.ST1 {
    background-color: var(--white);
}

.ST2 {
    background-color: var(--gray-light);
}

.ST1and2 {
    background: linear-gradient(var(--white), var(--gray-light));
}

/* -> Layout */

.center {
    text-justify: center;
}


/* -> Image img pictures */

.img-wide {
    height: 30vh;
}