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

body { position: relative }	/* needed for scrollspy */
body { min-height: 100% }
body, .navbar-default { background: #fdfdfd }

body #header { min-height: 4.5em }

/* set page body to white when printing */
@media print {
   body.bg-light { background: white !important }
}

.navbar-brand { height: 2.6rem }
.navbar-brand > img { display: inline; vertical-align: bottom; max-height: 2.5rem; max-width: 60vw }

h1, h1.h2, h1.h3 { color: #c14d00; margin-bottom: 1em; margin-top: 0 }
@media (max-width: 767px) {
   h1, h1.h2, h1.h3 { margin-top: 0.3em }
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { text-wrap: balance }

.navbar { margin-bottom: 0 }
.navbar-brand { padding: 8px 0 0 }
.navbar-toggle { margin-top: 0 }

.breadcrumb-and-search-bar form input.form-control[type="text"] { min-width: 23vw; border-radius: 0; border-color: #c14d00 }

main#content { margin-top: 1.5rem; margin-top: max(1.5rem, 5vw) }

/* darken slightly, add underlines, or increase contrast for accessibility, to meet WCAG AA */
.navbar-light .navbar-nav .nav-item .nav-link, .navbar-light .navbar-text { color: rgba(0,0,0,.7) } /* was 0.6 */
.text-muted, .figure-caption { color: #6B747C !important }	   /* was #6c757d */
a, a:focus, a:hover, a.page-link, a.btn-link { color: #0071ad }	   /* was #007bff */
.btn-primary, .page-item.active .page-link  { background-color: #0072ed; border-color: #0072ed } /* was #007bff */
.text-danger  { color: #d12435 !important }			   /* was #dc3545 */
.text-success { color: #1e7c33 !important }			   /* was #28a745 */
a:not(.btn):not(:hover):not(:focus) {
  text-decoration: underline;
  text-decoration-thickness: 0.1rem;
  text-decoration-color: rgba(0, 0, 0, 0.05);
}

/* we want breadcrumb separators to be ">" not "/" */
header .breadcrumb > li + li:before { content: " > "; margin-left: 0.3rem; margin-right: 0.3rem }
header .breadcrumb { background-color: inherit }

/* breadcrumb can be too long on narrow screens, so we reduce the font size, hide the first item, and remove the > before the second item */
@media (max-width: 575px) {
    .condition-page header .breadcrumb { display: none !important }
    header .breadcrumb { font-size: 0.7em }
    header .breadcrumb li:nth-child(1), #navbar--breadcrumb--link-1, header .breadcrumb li:nth-child(2):before { display: none }
}

/* Oxford comma separated list featuring "and" at end of sentence */
.comma-list .comma-list-item:after { content: ', ' } /* comma-space after items */
.comma-list .comma-list-item:last-child:after { content: none } /* no comma after last item */
.comma-list:not(.comma-list--without-and) .comma-list-item:not(:only-of-type):nth-last-of-type(1):before { content: 'and ' } /* if there are multiple items, last item prefixed with "and" */
.comma-list:not(.comma-list--without-and) .comma-list-item:nth-of-type(1):nth-last-of-type(2):after { content: ' ' } /* if there are only two items, no comma after first item either */

/* #header-search { margin: 20px 0; float: right; min-width: 60% } */

#footer--body { border-top: 1px solid #052049; margin-top: 3em; padding: 1em }

.fa-small-icon { font-size: 70% }

.javascript-enabled .hide-if-javascript-enabled { display: none }
.hide-unless-mobile { display: none !important }
body.mobile-device .hide-unless-mobile { display: block }
body.mobile-device .hide-unless-mobile { display: revert }

.hide-long-content { hyphens: auto }

/* paras that look like headings should have reasonable line heights for accessibility */
p.h1, p.h2, p.h3, p.h4, p.h5, p.h6 { line-height: 1.5 }

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

.home-page .navbar .breadcrumb-and-search-bar, .home-page #search #search-body { display: none }
.home-page.running-a-search #search #search-body { display: block }

.home-page #hero-image { margin-bottom: 3rem }
@media (max-height: 500px) {
   .home-page #hero-image { display: none !important }
}

.home-page.ran-at-least-one-search .hide-after-running-a-search { display: none }

.home-page.running-a-search .hide-when-search-results-showing { display: none !important }

.home-page .show-when-search-results-showing-block { display: none }
.home-page .show-when-search-results-showing-flex { display: none }
.home-page.running-a-search .show-when-search-results-showing-block { display: block }
.home-page.running-a-search .show-when-search-results-showing-flex { display: flex }

.home-page .show-when-search-results-showing { display: none }
.home-page.running-a-search .show-when-search-results-showing { display: block }

.home-page #search #search-body { display: none }
.home-page.running-a-search #search #search-body { display: block }

.static-content-callout--container { justify-content: center; padding-top: 3em }
.static-content-callout--item { display: block; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid transparent; background-clip: padding-box; padding: 1rem;  }
a.static-content-callout--item { background-color: #333; color: #fff; min-height: 8em }
.static-content-callout--item:hover, a.static-content-callout--item a:focus { text-decoration: none }

.static-content-callout--item h4 { font-weight: normal }
@media (min-width: 900px) {
    .static-content-callout--item { flex-grow: 1; flex-basis: 50%; align-self: stretch }
    .static-content-callout--container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; align-content: stretch }
}

/* colors darkened two shades by http://www.hexcolortool.com/ */
.static-content-callout--item:nth-child(4n+0) { background-color: #005998 } /* was #178CCB */
.static-content-callout--item:nth-child(4n+1) { background-color: #007079 } /* was #18A3AC */
.static-content-callout--item:nth-child(4n+2) { background-color: #447100 } /* was #90BD31 */
.static-content-callout--item:nth-child(4n+3) { background-color: #c14d00 } /* was #F48024 */


/* ############################################################################ */
/* BROWSE PAGE */
/* ############################################################################ */

.browse-page h1 + #browse-conditions-view { margin-left: 0; margin-top: 1em; margin-bottom: 1em }

.browse-page .browse-condition-cluster--conditions { margin-left: 2em; line-height: 1.7 }
.browse-page .browse-condition-cluster--name { border-bottom: 1px solid #eee; margin-bottom: 0.5em; margin-top: 1em }
.browse-page .browse-condition-cluster--block { margin-bottom: 1.5em }
.browse-page .browse-condition-cluster--condition { margin-right: 1.5em }
.browse-condition-cluster--condition a { white-space: nowrap }

/* ############################################################################ */
/* TRIAL LISTS, AS USED ON CONDITION PAGE, HEALTHY BROWSE, ETC. */
/* ############################################################################ */

.trials-list-header--explanatory-paragraph { max-width: 45em; margin-bottom: 3rem }

/* normalize heights a bit */
.trials-list--filter-container .card-body > * { line-height: 2rem }

.trials-list--number-of-trials-shown.text-success { font-weight: 500 }

#trials-list .trials-list--trial { margin-bottom: 1.5rem }

#trials-list .trials-list--trial-joinable { background: #ffffff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) }
#trials-list .trials-list--trial-not-joinable { background: #fdfdfd; box-shadow: 0 .125rem .25rem rgba(0,0,0,.025) }
#trials-list .trials-list--trial:hover { background: #ffffff; border-color: #337ab7 !important }

/* flatten summary HTML so it looks like one inline paragraph. these are all p/ul/ol's */
#trials-list .trials-list--trial-summary { font-size: 90%; display: block }
#trials-list .trials-list--trial-summary p, #trials-list .trials-list--trial-summary ul, #trials-list .trials-list--trial-summary ol, #trials-list .trials-list--trial-summary li { display: inline; margin: 0; padding: 0 }
#trials-list .trials-list--trial-summary p::after, #trials-list .trials-list--trial-summary li::after { content: " " }
#trials-list .trials-list--trial-summary li::before { content: " * " }
#trials-list .trials-list--trial-summary { margin-bottom: 0.5rem }
#trials-list .trials-list--trial-summary > *:nth-child(n+2) { display: none } /* but hide all but the first item :-( */


/* erase margin at top and bottom of block */
#trials-list .trials-list--trial h2 { margin-top: 0; padding-top: 0; margin-bottom: 1rem }
#trials-list .trials-list--trial-details:last-child, #trials-list .trials-list--trial-details:last-child *:last-child { margin-bottom: 0; padding-bottom: 0 }


/* ############################################################################ */
/* CONDITION PAGE */
/* ############################################################################ */

.condition-page #condition-header--clinical-trial-counts { display: block }
.condition-page .trials-list--trial-details { margin-bottom: 2rem; margin-left: 2rem }
.condition-page #trials-list .trials-list--trial-joinable + .trials-list--trial-not-joinable { margin-top: 4rem; }


/* ############################################################################ */
/* TRIAL PAGE */
/* ############################################################################ */

/* trial pages have I'm interested button at bottom -- add extra space */
@media (max-width: 991px) {
   .trial-page footer { margin-bottom: 10rem !important }
}

.trial-page #main-column { position: relative }

.trial-page .location-is-institutional .location-name { font-weight: bold }
.trial-page #location li.location, .trial-page #pis li.pi { margin-bottom: 0.7em }
.trial-page .locations-list--only-one-location, .trial-page .pis-list--only-one-pi { list-style-type: none; padding-left: 1rem }

.trial-page #summary { margin-bottom: 2em }
.trial-page #summary .alert { margin-bottom: 2em }
.trial-page #summary--tagline { margin-top: 0.5em; color: #c14d00; line-height: 1 }

.trial-page h1 { color: inherit }

.trial-page #sidebar { position: -webkit-sticky; position: sticky; top: 1rem }
.trial-page #sidebar .nav > .active > a, .trial-page #sidebar .nav > .active:hover > a, .trial-page #sidebar .nav > .active:focus > a { font-weight: bold; font-size: 110%; background-color: transparent; background-color: #e5e3e9 }
.trial-page #contact-modal p.text-muted { padding-top: 1em }

.trial-page a.readmore-toggle { margin: 0 0.5em 0.5em 0.5em; padding-top: 0; display: block; text-align: right; text-decoration: underline; border-top: 1px dashed #ccc }
.trial-page .limit-block-height { max-height: 15em }

/* we also use some inline hidden-print classes */
@media print {
   .trial-page .limit-block-height { height: auto !important }
   .trial-page .readmore-toggle { display: none !important }
   .trial-page #contact-button-bottom-container { display: none !important }
   .trial-page #faq { display: none !important }
   .trial-page footer { display: none !important }
}

.trial-page #key-points-bullets { font-size: 1.125rem }
.trial-page #key-points-bullets dt { text-align: right }
.trial-page #key-points-bullets dt i { color: #c14d00 }

.trial-page .page-header { border-bottom: none; margin-top: 0; padding-top: 0 }

.trial-page #trial-details-container .trial-details-block { padding-top: 2em; padding-bottom: 2em; border-top: 1px solid #ccc }

.trial-page #trial-details-container .trial-details-block > * { margin-left: 4% }
.trial-page #trial-details-container .trial-details-block > h2, .trial-page #trial-details-container .trial-details-block > h3, .trial-page #trial-details-container .trial-details-block #key-points-bullets { margin-left: 0 }
.trial-page #trial-details-container .trial-details-block > h2 + * { margin-top: 2rem }

.trial-page #trial-details-container #details dl dd { margin-bottom: 0.1rem }

.trial-page .pi-name .pi-institution-name { text-transform: uppercase }

.trial-page h2, .trial-page #sidebar h3 { color: #c14d00 }
.trial-page h3 { padding-bottom: 0.3em; margin-bottom: 0; margin-top: 1.5em; text-transform: uppercase }

.trial-page h3 + p, .trial-page h3 + div { margin-left: 1rem }

.trial-page #pi-photos-block figure { display: none; max-width: 5rem }
.trial-page #pi-photos-block figure:first-of-type { display: block }
.trial-page #pi-photos-block figure figcaption { font-size: 80%; text-align: center }

.trial-page #contact-button-bottom-container { position: fixed; bottom: 0; left: 0; z-index: 1; width: 100%; padding: 0.5em; background: inherit }
.trial-page #contact-button-bottom { padding: 1em 0.5em }

.trial-page #share-links         { display: none; margin: 1rem 1rem 2rem 1rem }
.trial-page #share-links ul li   { grayscale: 1; display: inline-block; margin-right: 0.1em }
.trial-page #share-links ul a { color: #999; margin-right: 0.7em }
.trial-page #share-links--email:hover    i { color: #0071ad }
.trial-page #print-button-sidebar:hover  i { color: #0071ad }

.trial-page #faq li { margin-bottom: 0.7em }


/* ###################################################################### */
/* SEARCH CONTENT ON HOME PAGE */
/* ###################################################################### */

/* search box and stuff around it */
.home-page #search #search-input-label, .home-page #search #search-input input { font-size: 28px; padding: 0.2em }
.home-page #search #search-input input::placeholder { text-overflow: ellipsis; color: #ccc }
.home-page #search #search-input-label { color: #c14d00; font-weight: bold }
.home-page #search #search-examples-line { color: #686868; padding-top: 0.5em; text-wrap: balance }

/* spacing around toggle checkbox buttons */
.home-page #search #search-filters .ais-ToggleRefinement-label { font-weight: normal; font-size: 0.9em }
.home-page #search #search-filters .ais-ToggleRefinement-checkbox { margin-right: 0.5em }

/* institutional filters under search box */
.home-page #search-filters--institution-names { margin-top: 0.75rem }
.home-page #search-filters--institution-names .ais-RefinementList-count { display: none }
.home-page #search-filters--institution-names .ais-RefinementList-item { display: inline-block; margin-right: 0.6rem }

/* space below core search box */
.home-page #search header { margin-bottom: 2rem }
.home-page.running-a-search #search header { margin-bottom: 0 }


/* highlighted content in search results */
.home-page #search #hits .hit-content mark { font-style: inherit; color: inherit; padding: 0; background: #fbdde0 }

/* a subset of reset.css, via https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/reset.css */
.ais-Breadcrumb-list, .ais-CurrentRefinements-list, .ais-HierarchicalMenu-list, .ais-Hits-list, .ais-Results-list, .ais-InfiniteHits-list, .ais-InfiniteResults-list, .ais-Menu-list, .ais-NumericMenu-list, .ais-Pagination-list, .ais-RatingMenu-list, .ais-RefinementList-list, .ais-ToggleRefinement-list { margin: 0; padding: 0; list-style: none; }

/* search results hits */
.home-page #search .hit-type-condition .hit-name { font-weight: bold }
.home-page #search #hits { padding: 1rem 0; border-top: 2px solid #eee }
.home-page #search .hit { padding: 0.5rem 0; border-bottom: 1px solid #eee }
.home-page #search .hit-content { display: inline-block; vertical-align: top }
.home-page #search .hit-content .hit-price, .hit-content .hit-name { font-weight: normal; margin-top: 0 }
.home-page #search .hit-content .hit-description { color: #999 }

.home-page #search .hit-content .hit-quoted-snippet { font-style: italic }
.home-page #search .hit-content .hit-quoted-snippet:before { content: '"…' }
.home-page #search .hit-content .hit-quoted-snippet:after  { content: '…"' }

/* featured browsable conditions, like the ones on UC Cancer */
.home-page #featured-browsable-conditions-block { margin-bottom: 0.5em; margin-top: 1.5em }
.home-page #featured-browsable-conditions-block ul { column-count: 6; column-width: 10em; column-gap: 1.5em; margin-top: 2em; margin-bottom: 1em }
.home-page #featured-browsable-conditions-block ul li { margin-left: 0.9em; font-size: 110%; margin-bottom: 0.5em; break-inside: avoid }
@media (max-width: 991px) {
   .home-page #featured-browsable-conditions-block ul li { margin-left: 0.9em; font-size: 100%; margin-bottom: 0.3em }
}

/* CUSTOM */

.home-page #search .type-condition .hit-name { color: red; font-weight: bold }

.home-page #search #search-powered-by-algolia { text-align: right }
.home-page #search #search-powered-by-algolia img { height: 1em }

/* ###################################################################### */
/* STATIC CONTENT */
/* ###################################################################### */

.static-page li p { margin: 0 }
.static-page .content--overview { max-width: 50em }