/*
 Theme Name: sdss.org Wordpress theme
 Theme URI: https://github.com/sdss/sdss_org_wp_theme
 description: Theme for the website of the Sloan Digital Sky Survey (www.sdss.org)
 Author: Jordan Raddick
 Author URI: https://www.jordanraddick.com
 Template: galaxis
 Version: 2.4.3
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Tags: 
 Text Domain: sdss_org_wp_theme
 Version updates (see .versions for older versions):
  *** 2.4. Blue-signaled DR18 menu, removed TO DO text, added tip and remember classes
  *** 2.4.1. Added widget area for News
  *** 2.4.2. Load news sidebar by default so it shows up on category page
  *** 2.4.3. Added class "scroller" to make tables scrollbarable
 */
/* ##################### 1. Fonts ##################### 
/*-------------------------------------------------------------- 
## Add font: Monda from Google Fonts (https://fonts.googleapis.com/css2?family=Monda)
-------------------------------------------------------------- */
/* vietnamese */
@font-face {
    font-family: 'Monda';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/monda/v14/TK3tWkYFABsmjspuPho7vA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext  */
@font-face {
    font-family: 'Monda';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/monda/v14/TK3tWkYFABsmjspvPho7vA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Monda';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/monda/v14/TK3tWkYFABsmjsphPho.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ##################### 2. Global styles ##################### */
p, ul {
    /* color: #7A7A7A;*/
    line-height: 1.45;
}

.entry-title {
    
    /*    background-color: blue;
    margin-bottom: 0.1em !important;*/
}

.entry-content {
    
}
h2 {
}
    h2:first-child {
        margin-top: 0.1em;
    }

/* Keep default link color as blue but make visited links purple */
a:visited {
    color: #551A8B;
}

.explore-button { /* Used for the "Explore X" buttons on Mappers page  */
    text-align: center;
    width: 100%;
    margin: auto;
}

.img-responsive {
    width: 100%;
    height: auto;
}

figcaption {
    background-color: #ecf0f1;
    line-height: 1.5;
    text-align: left !important;
    padding: 8px;
    font-size: 0.925rem;
}


/*--------------------------------------------------------------
# 2.1. Utilities: change top and bottom margins of content container, and clear floats
--------------------------------------------------------------*/
.u-b-margin {
    margin-bottom: 0.25rem;
}

.u-t-margin {
    margin-top: 0.25rem;
}


.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* ##################### 3. Header ##################### */


/* ##################### 3.1. Logo branding ##################### */
/*--------------------------------------------------------------
## Embiggened branding, takes up only 20% of width
-------------------------------------------------------------- */
.site-branding {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    max-width: 81%;
    margin-right: 0;
    word-break: break-word;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

@media screen and (min-width: 1025px) {
    .site-branding {
        max-width: 20%;
        flex-basis: 20%;
        margin-right: 1.5rem;
    }
}
.site-branding .custom-logo-link img {
    display: block;
    max-height: 82px;
    max-width: 175px;
    width: auto;
    height: auto;
}

/* ##################### 3.2. Main nav menu (takes up 75% of width)  ##################### */

.main-navigation {
    flex-grow: 1;
    text-align: right;
}
@media screen and (min-width: 1025px) {
    .main-navigation {
        flex-basis: 75%;
        text-align: center;
    }
}

/* ##################### 3.3. Secondary nav menu (for Data pages) ##################### */

#secondary-navigation {
}

.secondary-menu-container {
    background-color: #fff;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 0;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    height: auto;
}

.previous-dr {
    background-color: #dcf3ff;
    border: none;
}


.secondary-menu {
    margin: 0 0 0 auto;
    list-style-type: none;
}

    .secondary-menu a {
        color: black;
    }


@media screen and (max-width: 870px) {

    .secondary-menu {
    }

        .secondary-menu > li {
            width: 100%;
            border-bottom: 2px solid black;
            text-align: center;
        }

        .secondary-menu > li:last-child {
            border-bottom: none;
        }

}

@media screen and (min-width: 870px) {
    .secondary-menu {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        height: auto;
        overflow-x: hidden;
    }

        .secondary-menu > li {
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            text-align: center;
        }
}
    /* ##################### 3.4. Breadcrumbs and search bar ##################### */
    #breadsearch {
    }

        #breadsearch .gx-card-content {
            min-height: 65px;
            padding: 0;
            margin-top: 5px;
            margin-bottom: 0;
        }

        #breadsearch .crumbs {
            width: 50%;
            float: left;
            margin-top: auto;
            margin-bottom: auto;
            margin-top: 2px;
            padding-top: 8px;
        }

    @media screen and (max-width: 550px) {
        #breadsearch .crumbs {
            visibility: hidden;
            width: 0;
            height: 0;
        }
    }

    #breadsearch .crumbs .pr-breadcrumb {
        padding-left: 15px;
        font-size: 18px;
    }

    #breadsearch .crumbs ul {
        margin-top: 10px;
        margin-left: 0;
        list-style: none;
        padding-left: 15px;
        margin-bottom: 0;
    }

    @media screen and (max-width: 700px) {
        #breadsearch .crumbs ul {
            padding-top: 0px;
        }
    }

    #breadsearch .crumbs ul li {
        display: inline;
        font-size: 18px;
    }

    @media screen and (max-width: 700px) {
        #breadsearch .crumbs ul li {
            font-size: 14px;
        }
    }




    /* Add a slash symbol (/) before/behind each list item   */
    #breadsearch .crumbs ul li + li:before {
        padding: 8px;
        color: black;
        content: " >> ";
    }

    /* Add a color to all links inside the list  */
    #breadsearch .crumbs ul li a {
        color: #0275d8;
        text-decoration: none;
    }

        /* Add a color on mouse-over  */
        #breadsearch .crumbs ul li a :hover {
            color: #01447e;
            text-decoration: underline;
        }

    #breadsearch .searcher {
        width: 50%;
        margin: 2px 0px 0px auto;
    }

    @media screen and (max-width: 550px) {
        #breadsearch .searcher {
            width: 100%;
        }
    }

    #breadsearch .searcher .widget_search {
        height: inherit;
    }


        #breadsearch .searcher .widget_search .wp-block-search {
            margin: 0px 0px 0px 0px;
            max-width: 100%;
        }

            #breadsearch .searcher .widget_search .wp-block-search .wp-block-search__inside-wrapper {
                padding: 10px;
                border: none;
                margin: 0px 0px 0px 0px;
            }

    /* ##################### 3.5. Special message area ##################### */

    .site-topbar {
        background-color: #1291ee;
        color: white;
        font-size: larger;
        padding-left: 20px;
    }

.site-topbar-text > a {
    font-weight: bold;
    /*color: lightpink !important;
    align-content: baseline;
    
    text-decoration: underline;*/
}

    .site-topbar__left {
        text-align: center;
        padding: .3rem 0;
        flex-basis: 100%;
        flex-grow: 0;
    }

    @media screen and (min-width: 530px) {
        .site-topbar__left {
            text-align: left;
        }
    }


    /* ##################### 4. Footer #####################  */
    .site-footer {
        background-color: white;
    }

        .site-footer .footmenu {
        }

            .site-footer .footmenu .footmenu-label {
                margin-bottom: 0;
            }

            .site-footer .footmenu a {
                color: #6256A3;
                text-decoration: none;
            }

        .site-footer .footlogos {
            margin-top: 20px;
        }

            .site-footer .footlogos p {
                color: #6256A3;
                text-transform: uppercase;
                font-size: larger;
                letter-spacing: .5px;
            }

        .site-footer .toc {
            visibility: hidden;
            width: 0;
            height: 0;
        }

    .site-footer__text {
        background-color: #333;
    }



    /* ##################### 5. Sidebars ##################### */


    .sidebar__inner .widget_block .gx-card-content {
        border: none;
        padding: 0;
    }

    .sidebar-newslist {
    }

        .sidebar-newslist:before {
            content: "News";
            font-family: inherit;
            font-family: Poppins, sans-serif;
            font-size: 1.2em;
            line-height: 1.5;
            font-weight: 600;
            clear: both;
            word-break: break-word;
            word-wrap: break-word;
        }

        .sidebar-newslist li {
        }

            .sidebar-newslist li:first-child {
                margin-top: 0.3em;
                padding-top: 0.7em;
                border-top: 1px solid #ebebeb;
            }

    .sidebar-science-results {
    }

    .sidebar-science-results-in-page {
        background-color: purple;
    }

    .notlink {
        color: #272727;
        text-decoration: none;
        font-weight: bold;
    }

    .private {
        background-color: pink;
    }


    /* ##################### 6. Home page ##################### */
    .home-spacer {
        background-color: #867dba;
        margin-left: -50px;
        margin-right: -50px;
        height: 40px !important;
    }

    .homeslidertext {
        color: #FFF !important;
        font-family: 'Monda', sans-serif;
        text-transform: uppercase;
        font-size: 44px;
        font-weight: bold;
        line-height: 1.1em;
        text-shadow: -5px 5px 5px rgb(0 0 0 / 30%);
    }


    @media screen and (max-width: 800px) {
        .homeslidertext {
            max-height: 118px !important;
            font-size: large;
        }
    }


    #home-summary {
        text-align: center;
        line-height: 1.45;
    }

    .press-releases-header {
        color: #663399;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

        .press-releases-header a {
            font-family: inherit;
            text-transform: inherit;
            color: inherit;
            text-decoration: none;
        }

    .joinus-title {
        padding-left: 5%;
        padding-right: 5%;
    }

    .joinus-text {
        padding-left: 5%;
        padding-right: 5%;
        margin-top: 0;
        line-height: 1.5;
    }


    .slidercaption p, h3 {
        font-family: 'Monda', sans-serif;
        letter-spacing: .5px;
    }

    .slidercaption a {
        text-decoration: none !important;
        font-family: inherit;
        text-transform: inherit;
        color: inherit;
        text-decoration: none;
        letter-spacing: .5px;
    }

    @media screen and (max-width: 800px) {
        .slidercaption {
            max-height: 118px !important;
            /*border: 5px solid red;
    vertical-align: text-bottom;*/
        }

            .slidercaption .caption {
                height: 100%;
                padding: 0 !important;
                vertical-align: bottom !important;
            }

            .slidercaption p {
                visibility: hidden;
                max-height: 0;
            }
    }


    /* ##################### 7. Mapper Summary reusable block ##################### */
    .mapper-summary {
    }

        .mapper-summary .mapper-info {
            padding: 10px;
            text-align: center;
        }


            .mapper-summary .mapper-info .title {
                color: #6051A2;
                text-transform: uppercase;
                letter-spacing: .8px;
                padding-bottom: 0px;
                margin-bottom: 5px;
            }

                .mapper-summary .mapper-info .title a {
                    text-decoration: none;
                    color: inherit;
                }

            .mapper-summary .mapper-info .program-head-label {
                margin-bottom: 0;
            }

    /*        .mapper-summary .mapper-info .program-head-name {
        background-color: orange;
    }*/


    /* ##################### 8. Data pages (DR18 and beyond) ##################### */


    .helpbox {
        border: 1px solid black;
        padding: 10px;
    }

    /* ##################### 9. Back to top control ##################### */
    .back-to-top {
        background-color: #5f52a2;
        width: 100px;
    }

        .back-to-top:hover {
            background-color: #999;
        }

        .back-to-top:active {
            background-color: #fff;
        }


    /* ##################### 10. Within-page TOC #####################  */

    .toc {
        border: 2px solid black;
        border-radius: 8px;
        width: 30%;
        margin: 0 10px 10px 10px;
        /*background-color: #ecf0f1;*/
    }

    .toc-left {
        float: left;
    }

    .toc-right {
        float: right;
    }

    .toc-label {
        color: #3d0096;
        font-size: large;
        font-weight: bold;
        height: 100%;
        padding: 0 5px 1px 10px;
    }

    .toc-label-accordion, .toc-label-inner {
        border-bottom: 2px solid black;
    }

        .toc-label-accordion:after {
            color: black;
            content: "+";
            font-weight: bold;
            font-size: larger;
        }


    .toc ul {
        list-style-type: none;
        margin: 5px 10px 5px 10px;
    }

        .toc ul li {
            padding-top: 3px;
            padding-bottom: 5px;
            margin-left: 0;
        }

            .toc ul li:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            .toc ul li a {
                color: #0275d8;
                text-decoration: none;
                font-weight: normal;
            }

    .forh2 {
        margin-left: 20px;
        margin-bottom: 0;
        border-bottom: 1px solid black;
    }

    .forh3 {
        list-style-type: ">";
        margin-left: 9px !important;
        padding-left: 5px;
        font-size: small;
    }

    .forh4 {
        list-style-type: ">>";
        margin-left: 20px !important;
        padding-left: 4px;
        font-size: smaller;
    }

    .forh5 {
        list-style-type: ">>>";
        margin-left: 14px !important;
        padding-left: 4px;
        font-size: x-small;
    }

    .forh6 {
        list-style-type: ">>>>";
        margin-left: 9px !important;
        padding-left: 4px;
        font-size: xx-small;
    }

    .sdss-to-top { /* not to be confused with back-to-top class */
        background-color: #5f52a2;
        padding: 10px 20px 10px 20px;
        display: inline;
        font-size: 1.1em;
        border-radius: 15px;
        float: right;
        /*    position: absolute;
    right: 0;
    
    transform: translateY(-50%);*/
    }

        .sdss-to-top:hover {
            background-color: #999;
        }


        .sdss-to-top a {
            color: #fff;
            text-decoration: none;
        }

            .sdss-to-top a:active {
                background-color: #999;
            }


/* ##################### 11. Publications #####################  */

.authors-short {
    display: inline;
}

.authors-all {
    display: none;
}

/* #################### 12. New/updated/todo ######################## */

.todo {
    display:inline-block;
    margin: 2px 2px 1.5em 10px;
    padding:6px 1em;
    color: white;
    background-color: #ED7014;
    border: none;
    font-weight: 700;
    vertical-align: middle;
}    

    .todo::before {
        padding: 4px;
    }    

/* DR19 */

.newdr19 {
    position: relative;
    vertical-align:top;
    margin: 2px 12px 2px 10px;
   /* box-shadow:.3rem 0.3rem .6rem .1em #333333aa;*/
    border-radius:1em;
    padding: .3em 1.2em .4em;
    font-size: .6em;
    font-weight: 600;
    color:#efefef;
    background-color: #6051a2;
    border: none;
    border-radius: 1em;
    text-transform:uppercase;
}

    .newdr19::before {
     content: "New for DR19";   
}

.updatedr19 {
    position: relative;
    vertical-align:top;
    margin: 2px 12px 2px 10px;
    border-radius:1em;
    padding: .3em 1.2em .4em;
    font-size: .6em;
    font-weight: 600;
    color:#efefef;
    background-color: #332B57;
    border: none;
    border-radius: 1em;
    text-transform:uppercase;
}

    .updatedr19::before {
    content: "Updated for DR19";
    
    }

    
    /* ##################### 13. Press Releases ##################### */
    .contacts {
        border: 2px solid #867dba;
        width: 30%;
        float: right;
        margin: 10px;
        padding: 10px;
        padding-left: 20px;
        padding-bottom: 0;
    }

        .contacts h2 {
            margin-top: 5px;
        }

        .contacts p {
            /*line-height: 1.6;*/
        }

    .pr-date {
        font-weight: bold;
    }

    .pr-caption {
        background-color: orange;
        line-height: 1.5;
    }


    /* ##################### 14. Value-added catalogs #####################  */

    .vaclist {
        display: flex;
        flex-flow: row wrap;
        flex-basis: 100%;
    }

.vac {
    /*display: inline-block;*/
    display: inline;
    margin: 10px 5px 10px 5px;
    border: 3px solid black;
    border-radius: 25px;
    padding: 15px;
    width: 48%;
}


    @media screen and (max-width: 900px) {
        .vac {
            width: 100%;
        }
    }

        .vac h2 {
            font-size: 1.37em; /* make vac h2 the size of h3 without changing semantic structure */
            margin-bottom: 0;
        }

        .vac a {
            text-decoration: none;
        }

    .vac-description {
        /*margin: 10px;*/
    }

    single-vac {
    }

    .single-vac h2 {
        margin-bottom: 0;
    }

    .single-vac h3 {
        margin-bottom: 5px;
    }


    .single-vac-description {
        font-weight: bold;
    }

        .single-vac-description p {
            margin-bottom: 0;
        }

    .single-vac-abstract {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .vac-authors {
        font-style: italic;
    }

    .vac-authors-full {
        font-style: italic;
        margin-top: 10px;
        margin-bottom: 10px;
    }


    .vac-tags {
        display: flex;
        flex-flow: row wrap;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .vac-tag {
        background-color: #cccccc;
        vertical-align: central;
        display: inline;
        padding: 0.2em 0.6em 0.3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        border-radius: 0.25em;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 5px;
    }

    .vac-dr {
        background-color: #2C3E50;
    }

    .vac-dr-latest {
        background-color: #6256a3;
    }

    .vac-survey {
        background-color: #f0ad4e;
    }

    .vac-cas-marvin {
        background-color: #5cb85c;
    }

    .vac-category {
        background-color: #5bc0de;
    }

    .vac-object {
        background-color: #d9534f;
    }

    .vac-table {
    }

        .vac-table a {
            color: white;
        }

    .vac-box {
        background-color: #396c8f;
        border-radius: 6px; /*0 6px 0 6px;*/
        padding: 6px;
        margin-bottom: 6px;
    }

        .vac-box a {
            color: white;
        }

    .vac-sas {
        background-color: #336699;
        color: white;
        overflow: auto;
        padding-left: 10px;
        margin-bottom: 10px;
    }

    .vac-datamodel {
        background-color: #993399;
        color: white;
        overflow: auto;
        padding-left: 10px;
        margin-bottom: 10px;
    }


    .vac-cas-info {
        padding: 10px;
        border: 2px solid black;
        border-radius: 5px;
        margin-top: 10px;
    }

    .vac-cas-info-title {
        vertical-align: middle;
        margin: 0;
    }

        .vac-cas-info-title h3 {
            display: inline;
            vertical-align: middle;
        }

    .vac-cas-info ul {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .vac-tags-cas-info {
        display: inline-flex;
        height: 100%;
        margin-left: 5px;
        vertical-align: middle;
    }

    .vac-www {
        font-weight: bold;
        font-size: 1.1em;
        text-align: center;
        border: 2px solid black;
        border-radius: 10px;
        overflow-wrap: break-word;
        padding: 10px;
        line-height: 1.25;
    }

    .vac-back-to-list {
        border-radius: 9999px;
        color: #fff;
        background-color: #32373c;
        box-shadow: none;
        font-size: 1.125em;
        padding: calc(0.667em + 2px) calc(1.333em + 2px);
    }

        .vac-back-to-list a {
            display: inline-block;
            text-align: center;
            word-break: break-word;
            box-sizing: border-box;
            text-decoration: none;
            color: #fff;
        }


/* ##################### 14.1. VAC Search controls #####################  */

.vac-search-controls {
    background-color: #276591;
    border-radius: 1.5rem;
    padding: 0.4rem 0 1rem 0rem;
}

.vac-search-title {
    font-weight: bold;
    font-size: larger;
    color: white;
    text-align: center;
    line-height: 1.3;

    margin-bottom: 0.1rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.vac-counts {
    color: white;
    font-style: italic;
    text-align: center;
    margin-top: 0.1rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.vac-filter-all-checkboxes {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0;
    padding: 0 10px 10px 10px;
}

.vac-filter {
    display: flex;
    flex-basis: 100%;
    flex-flow: row wrap;
    padding: 5px;
    margin: 5px 5px 10px 5px;
}

.vac-filter-title {
    padding: 0 10px;
    text-align: center;
    color: white;
    line-height: 1.3;
    width: 100%;
    margin: 0 auto;
    font-weight: bold;
    padding-bottom: 0.25rem;
}

.vac-filter-checkbox-list {
    color: white;
    display: flex;
    flex-basis: 100%;
    flex-flow: row wrap;
}

.vac-filter-checkbox-with-label {
    margin: 0;
    white-space: nowrap;
    padding-left: 5px;
    accent-color: white;
}
    .vac-filter-checkbox-with-label > label {
        padding-left: 8px;
    }


    .vac-filter-checkbox-with-label-survey {
        min-width: 50%;
        max-width: 100%;
    }

    .vac-filter-checkbox-with-label-objclass {
        min-width: 33%;
        max-width: 100%;
        text-align: center;
        margin:auto;
    }



.vac-filter-bulk-select {
    display: flex;
    flex-basis: 100%;
    flex-flow: row wrap;
    min-width: 50%;
    max-width: 100%;
    margin: 5px;
}

    .vac-filter-bulk-select > .clear-all-filters {
        margin: 5px auto;
        background-color: white;
    }

    .vac-filter-bulk-select > .select-all-catalogs {
        margin: 5px auto;
        background-color: white;
    }

    .vac-filter-bulk-select a {
        color:black;
    }

        .vac-filter-bulk-select a:hover {
            color: #44b0fc;
        }


/* ########### 15. Mouseover tooltips (from https://www.w3schools.com/css/css_tooltip.asp) ######## */
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    width: auto;
}

    .tooltip .anchortext {
    }

    /* Tooltip text */
    .tooltip .tooltiptext {
        display: none;
        background-color: black;
        color: #fff;
        font-size: 90%;
        position: fixed;
        width: auto;
        padding: 0.5rem 1rem;
        text-align: center;
        border-radius: 6px;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        display: block;
        overflow-y: visible;
    }



/* ##################### 16. Glossary alphabetical index  #####################  */

.glossaryindex {
    /*background-color: aqua;*/
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
}
.glossaryindexitem {
    /*background-color: cornsilk; */
    padding: 8px;
    width: auto;
}
    .glossaryindexitem > a {
        color: #1291ee;
        text-decoration: none;
    }



.sdss-recent-posts {
    /*background-color: aquamarine;*/
}

    .sdss-recent-posts div {
        /*border: 5px dotted black;*/
    }

    .sdss-recent-posts li {
        /*background-color: silver;
        */
    }

        .sdss-recent-posts li time {
            /*background-color: tomato;
            */
        }

        .sdss-recent-posts li .wp-block-latest-posts__post-excerpt {
            /*background-color: rosybrown;
            */
        }

        .sdss-recent-posts li .more-link-container {
            /*background-color: orange;
            */
        }
            .sdss-recent-posts li .more-link-container .more-link {
                /*border: 1px solid red;
                */
            }

        .sdss-recent-posts li .wp-block-latest-posts__featured-image {
            /*border: 3px solid navajowhite;
            background-color: navajowhite;*/
            float: right;
            margin-left: 0.5rem;
        }

            .sdss-recent-posts li .wp-block-latest-posts__featured-image img {
                /*border: 3px solid yellow;*/
            }


/* ##################### 17. SDSS People  #####################  */

#people-flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: stretch;
    gap: 1em;
}

.people-flex {
    flex-basis: 48%;
    height: 100%;
    background-color: #ffffff;
    border: 4px solid #ffffff;
    border-radius: 4px;
}

@media screen and (max-width: 700px) {
    .people-flex {
        flex-basis: 100%;
    }
}

.people-flex img {
    width: 100%;
    height: auto;

}

.people-flex a {
    font-size: 1rem; 
    text-decoration: none;
    text-align: center;
}

.people-flex .gx-card-content {
    border: none;
    padding: 0.6rem;
}

.personphoto {
    width: 33%;
    height: auto;
    float: right;
    margin-left: 1rem;
}

/* ##################### 18. Tip and remember classes requested by JJ  #####################  */

.remember {
    padding: 1rem;
    border: 0.25rem solid red;
    border-radius: 0.5rem;
    width:auto;
}

.tip {
    margin-left: 1rem;
    padding: 1rem;
    background-color: #ffffb2;
    float:right;
    width:40%;
    border-radius: 0.5rem;
}

.scroller > table {
    overflow: auto;
}