.node--unpublished .pattern {
    background-color: inherit;
}

.bg-dark+.bg-dark,
.region-main-content .bg-dark+.bg-dark,
.pattern:not(.bg-dark)+.pattern:not(.bg-dark),
.pattern + .pattern:first-of-type {
    padding-top: 0;
}


/* pullquote attribution for quote pattern */
.quoted-attribution {
    text-align: right;
    font-style: italic;
    font-size: smaller;
    margin-top: 1.25rem;
}

/* line flourish for pullquote pattern */
.quoted-content.secondary-color:before,
.quoted-content.secondary-color:after {
    background: #00a261;
}

/* line flourish for Content Intro kicker label pattern */
.kicker-label.secondary-color::after {
    background: #00a261;
}

/* subtext for the CTA single study pattern */
.page-title__subtext__cta {
    color: #fff;
    margin-bottom: 15px;
}

/* adding bottom margin to CTA full image box content - increased the bottom margin a bit due to the layout of the patterns on the homepage */
.full-image-box-content .container {
    margin-bottom: 125px;
}

/* adding classes for cta button for single study */
.readmore-secondary .bri-btn {
    background-color: #9fcf67;
}

.readmore-secondary .bri-btn:hover {
    background-color: #00a261
}

.paragraph--type--cta-clinical-study p {
    margin: 25px 0;
}

.full-image-box-content .container {
    min-height: inherit;
}

@media only screen and (max-width: 47.938rem) {
    .full-image-box-content__box {
        margin-top: 1.5625rem;
    }

    .cta-content {
        margin-top: -80px;
        background: rgba(255, 255, 255, .6);
    }

    .cta-header {
        padding: 25px 15px;
        color: black;
    }

    .page-title__subtext__cta {
        color: #4b4b4b;
    }
}

/* line flourish for headline pattern */
.accent-on-bottom.primary-color::after {
    background: #00b6de;
    content: "";
    display: block;
    height: 2px;
    margin-top: 15px;
    width: 85px;
}

/* If CTA background is light change text color */
.bg-light .call-to-action__content {
    color: #052530;
}

/* News - Add padding to the bottom of the news summary field */
.news-summary {
    padding-bottom: 25px;
}

.vertical-news-card__image::before {
    clip-path: polygon(0% 0%, 0% 100%, 12px 100%, 12px 12px, 100% 12px, 100% 0);
}

/* Blog image clipping */
.horizontal-blog-card__image::before {
    clip-path: polygon(0% 0%, 0% 100%, 12px 100%, 12px 12px, 100% 12px, 100% 0);
}

/* If CTA background is light change text color */
.bg-light .call-to-action__content {
    color: #052530;
}

/* Overriding the white color for the exloring column links */
.exploring-column-links li a {
    color: #00a261;
}

/* Adding background color at the section level */
.region-main-content section.bg-dark {
    padding-top: min(13vw, 95px);
    background: #052530;
}

.region-main-content section.bg-light {
    padding-top: min(13vw, 95px);
    background: #ffffff;
}

/* Rich text editor media styles */
.media.align-center {
    display: grid;
    justify-content: center;
}

.fluid-width-video-wrapper {
    display: inline-flex;
    width: 100%;
}

.region-main-content .media {
    margin: 30px 0;
}

.media iframe {
    background: #fff;
}

/* 1 Per Row */
.horizontal-landing-card img img {
    height: 230px;
}

.horizontal-landing-card__image::before {
    clip-path: polygon(0% 0%, 0% 100%, 12px 100%, 12px 12px, 100% 12px, 100% 0);
}

/* 2 Per Row Large */
.vertical-landing-card img {
    height: 100%;
}

.vertical-landing-card__image::before {
    clip-path: polygon(0% 0%, 0% 100%, 20px 100%, 20px 20px, 100% 20px, 100% 0);
}

/* 3 Per Row */
.vertical-ps-card__image::before {
    clip-path: polygon(0% 0%, 0% 100%, 12px 100%, 12px 12px, 100% 12px, 100% 0);
}

.staff-hero__image.flourish-secondary::before {
    background: linear-gradient(176.82deg, #48B5DB 0%, rgba(255, 255, 255, 0) 79.16%);
}

/* Remove padding for adjacent nested containers with other white bg sections */
#block-bri-content:has(.node section:last-of-type:not(.bg-dark))+.pattern:not(.bg-dark) {
    padding-top: 0;
}

/* CTA multiple studies */
.cta-content__box {
    background: #052530;
    width: 100%;
    max-width: 585px;
    margin-top: 25px;
    padding: 50px;
}

.cta-content__box .bri-btn {
    margin-top: 25px;
    width: fit-content;
}

/* Remove bullet from list items for feature publications */
li.feature-pubs {
    list-style-type: none;
}

/* Remove img height set by grid-card-list */

ul.grid-card-list.publication-list img {
    height: auto;
}

.pattern__footer a {
    appearance: none; /* Standard property */
    -webkit-appearance: none; /* Older WebKit browsers */
    -moz-appearance: none; /* Older Firefox versions */
    background-color: #9fcf67;
    border: 0;
    border-radius: 2px;
    color: #052530;
    cursor: pointer;
    display: inline-block;
    font: 700 .875rem/1.1 Overpass, arial, sans-serif;
    letter-spacing: 1px;
    padding: 15px 35px;
    text-align: center;
    transition: all .3s ease;
}

.pattern__footer a:hover {
    background-color: #00a261;
    text-decoration: none;
}

.btn-primary .pattern__footer a {
    background-color: #82d2e5;
}

.btn-primary .pattern__footer a:hover {
    background-color: #00b6de;
}

/* Styles for light bg profile cards */
.vertical-profile-card__image:before {
    background: linear-gradient(176.82deg, rgba(130, 200, 102, 1), transparent 79.16%);
}

.alternate-media-accent .vertical-profile-card:nth-child(2n) .vertical-profile-card__image:before {
    background: linear-gradient(176.82deg, rgba(0, 182, 221, 1), transparent 79.16%)
}

/* CTA full-width image change background color */

.full-image-box-content__box.bg-light {
    background: #fff;
}

/* if the CTA background is light add a blue border */
.full-image-box-content__box.border {
    border-style: solid;
    border-width: 2px;
    border-color: #052530;
}

/* If CTA background is light change title color and add border */
.full-image-box-content__box .headline.bg-light {
    color: #052530;
}

/* If CTA background is light change text color */
.subtext.bg-light {
    color: #4b4b4b;
}

/* Caption for full-width images */
.img-caption {
    padding-top: 5px;
    text-align: left;
    font-size: smaller;
    margin-left: 5px;
    padding-bottom: min(5px);
    font-style: italic;
}

/* Adjustment to section bg-dark for full-width image */
.region-main-content section.bg-dark.full-width-background {
    padding-top: 0;
    background: #052530;
}

/* General spacing for formatted text fields */
.field.text-formatted>*+* {
    margin-top: 1.5em;
}

/* Adjust for the fluid-width-video wrapper so it always stays behind a video */
.fluid-width-video-wrapper>* {
    z-index: 1;
}

/* Admin edit tabs styling */
#block-bri-primary-local-tasks.pattern {
    padding: 10px 0 0;
    border: 6px solid #f0f0f0;
    position: relative;
    z-index: 100;
    opacity: .9;
}

.pattern .tabs.primary {
    margin-bottom: 0;
}

/* Removing spacing after pattern header div for 3 row lab items */
.pattern__header_labs {
    margin-bottom: 15px;
}

/* Admin style to help visually see migrated images that need to be updated */
.blog-migration {
    display: inline-block;
    background: yellow;
    margin: 10px 0;
    padding: 10px;
}

/* Press Releases */
.technology .pattern__headline,
.press-release .pattern__headline {
    margin-bottom: 0;
}

/* News */
.container.content-image-row-grid.simple-news {
    grid-template-columns: 1fr;
}

.content-image-row__image::before {
    clip-path: polygon(0% 0%, 0% 100%, 25px 100%, 25px 25px, 100% 25px, 100% 0);
}

.center .content-image-row__image::before,
.content-image-row--feature-staff .content-image-row__image::before {
    clip-path: polygon(0% 0%, 0% 100%, 25px 100%, 25px 25px, 100% 25px, 100% 0);
}

/* Override */
.grid-3up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media only screen and (max-width:47.938rem) {
    .grid-3up {
        grid-template-columns: 1fr
    }
}

.publication-link-card.no-link:hover .headline {
    color: inherit;
}

/* Adding padding to unordered list items on the About Searching page */
.item-list ul {
    padding-top: 25px;
}

/* Override border color the details */
details {
    border: 1px solid #00a261;
    max-width: 768px;
}

/* Overrides for max-width and box sizing for search input field on search results page */

input[type="search"].search {
    box-sizing: inherit;
}

.form-field.search-results {
    max-width: 768px;
    margin-bottom: 15px;
}

/* Adding margin under submit button for search */
input[type="submit"].search {
    margin-bottom: 25px;
}

/* Added a border back to the fieldsets within the advanced search form */
.fieldset-search {
    border: solid 1px #a1a1a1;
    padding: 15px;
}

/* Adjusted the display for checkbox and radio input fields to override the in-line display */
input[type=checkbox]+label,
input[type=radio]+label .search {
    display: flex;
}

/* Removing padding from the first child and last child items in the search results */
.search-results-list li:first-child {
    margin-top: 0px;
}

/* Adding an additional class on pagination for search results */
.pagination.search {
    margin-top: 30px;
}

/* Adding a specific class for the section pattern class for the search results */
.pattern.search {
    padding-bottom: 0px;
}

/* Fixing the issue with long hyperlinks */
.rtecontent a:not([class]) {
    display: inline;
}

/* Adding some padding at the bottom of user search results */
h4.search-users {
    padding-bottom: 25px;
}

/* Adding some spacing back in after removing a default div in the form element template */
.field-label:not(:first-of-type) {
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Fixing the issue where trimmed text in a CTA clinical stud(ies) doesn't push the button to a new line */
.subtext.cta {
    display: grid;
}

/* Disabling auto hyphenation in the site */
.h1,
.h2,
.h3,
.h4,
h1,
h2,
h3,
h4,
li,
p {
    hyphens: none;
}

/* Adding top padding to the saml login block */
.text.user-login {
    margin-top: 30px;
}

/* Remove padding for saml login block with other page white bg section */
#block-samllogin {
    padding-top: 0;
    padding-bottom: 0;
}

/* Setting the media field to render at appropriate scale */
.field--media--oembed--video {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.media-oembed-content {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* Adjustments for the fluid video wrapper for remote videos */

#remote.fluid-width-video-wrapper {
    display: inline-flex;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.rtecontent>.fluid-width-video-wrapper:before {
    display: none;
    /* width: 100%; */
    /* padding-top: 56.25%; 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.rtecontent>.fluid-width-video-wrapper:after {
    display: none;
    /* width: 100%; */
    /* padding-top: 56.25%; 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Adjustments to the footer with the removal of the explore block */

footer.site-footer>.container {
    grid-template-columns: repeat(2, 1fr)
}

@media only screen and (min-width:48rem) and (max-width:63.938rem) {
    footer.site-footer>.container {
        grid-template-columns: repeat(1, 1fr)
    }
}

@media only screen and (max-width:47.938rem) {
    footer.site-footer>.container {
        grid-template-columns: 1fr
    }
}

/* Adding some padding to the top of the contact us webform */
form.contact {
    padding-top: 25px;
}

/* Adding some padding to the top of the Lead PI field in the technology content type */
h4.pi {
    padding-top: 25px;
}

/* Adding some styles to adjust for display/layout of fields on the available technologies landing page */

h5.pi-name {
    margin-right: 10px;
    display: inline-block;
    color: #052530;
    margin-bottom: -5px;
    padding-bottom: 15px;
}

.summary {
    padding-top: 10px;
    padding-bottom: 10px;
}

h3.technology-title:not(:first-of-type) {
    margin-top: 25px;
}

li.node-readmore {
    padding-left: 0em !important;
}

/* Minor adjustments for the sign-up form for "Join Our Research" */

.form-select.required {
    color: #4b4b4b;
}

legend.sign-up {
    padding-bottom: 15px;
}

.technology.view {
    padding-bottom: 50px;
    margin-top: -35px;
}

/* Accounting for and center orphan items in a grid specifically used in the By the Numbers pattern */

.grid-container--3up.numbers {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4rem 2rem;
    margin: 20px;
    padding: 20px;
    counter-reset: grid;
}

.grid-item {
    text-align: center;
    grid-column: span 2;

    &:last-child:nth-child(3n - 1) {
      grid-column-end: -2;
    }
  
    &:nth-last-child(2):nth-child(3n + 1) {
      grid-column-end: 4;
    }
  
    &:last-child:nth-child(3n - 2) {
      grid-column-end: 5;
    }
  
    h2 {
      margin-bottom: 0.25rem;
    }
} 

@media (max-width: 1024px) {
  .grid-container--3up.numbers {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-content: center;
  }

  .grid-container--3up.numbers > .grid-item {
    grid-column: auto;
  }

  .grid-container--3up.numbers > .grid-item:last-child:nth-child(3n - 1),
  .grid-container--3up.numbers > .grid-item:nth-last-child(2):nth-child(3n + 1),
  .grid-container--3up.numbers > .grid-item:last-child:nth-child(3n - 2) {
    grid-column-end: auto;
  }

  .grid-container--3up.numbers > .grid-item:only-child,
  .grid-container--3up.numbers > .grid-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}



.grid-item .field--name-field-callout-small {
    font-style: italic;
}

hr.secondary {
    border: 0;
    border-top: 2px solid;
    border-image: linear-gradient(to right, #00a261, #9fcf67) 1;
}

hr.primary {
    border: 0;
    border-top: 2px solid;
    border-image: linear-gradient(to right, #00b6de, #82d2e5) 1;
    margin: 3rem 0;
}

h2.h1.title-font.callout {
    font-size: clamp(2.25rem, 4.3vw + 1rem, 4.5rem);
    background: none;
    -webkit-text-fill-color: #00a261;
}

/* Removing hyphenation from the quoted-content class */

.quoted-content {
    hyphens: none;
}

/* Reducing the padding for the details wrapper for the webforms captcha for mobile display */
@media only screen and (max-width:47.938rem) {
    details>.details-wrapper {
        padding: .25em;
    }
}

/* Bringing lead pi name to show on same line as title */
.lead-pi {
    display: inline-block;
    margin-left: 10px;
}

/* Adding caption to the full-width image CTA */
.img-caption-cta {
    font-size: smaller;
    font-style: italic;
    position: absolute;
    right: .313rem;
    bottom: -2.188rem;
}

/* Adjustments for the caption for tablet and mobile displays */
@media only screen and (max-width:47.938rem) {
    .img-caption-cta {
        bottom: auto;
    }
}

@media only screen and (min-width:48rem) and (max-width: 63.938rem) {
    .img-caption-cta {
        bottom: -4.688rem;
        left: 2.375rem;
    }
}

.publication-link-card__content .journal {
    color: #00a261;
    font-size: 1.3rem;
}

ul.js-pager__items.pager.pager__items {
    padding-top: 3rem;
    padding-inline-start: 0px;
}

.grid-2up.bg-dark+.grid-2up.bg-dark {
    margin-top: min(12vw, 75px);
}

/* Create styles for updated clinical study template */
.pattern__headline.clinical-study {
    margin-bottom: 0;
}

.pattern__subheadline.clinical-study-subtitle {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: clamp(1.125rem, 3vw + 1rem, 1.5rem);
    font-style: italic;
    font-weight: 500;    
}

.rtecontent h5.study-contact,
.rtecontent h6.study-contact-email,
.rtecontent h6.study-contact-phone {
    margin-top: 0px;
}

.study-status {
    margin-bottom: 20px;
    font-weight: 700;
}

.study-contact {
    font-size: 20px;
}

.sponsor-label {
    font-size: 0.85rem;
    font-style: italic;
    display: block;
    opacity: 0.8;
    text-align: center;  /* Ensures both lines are centered */
    margin-bottom: 2px; /* Adds a tiny gap before the sponsor name */
    color: rgba(0, 0, 0, 0.7); /* Slightly lighter text */
  }

/* Removing the underline from the buttons in the RTE content */
.rtecontent a.bri-btn {
    text-decoration: none;
}

/* Making facebook videos be responsive */
.facebook-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
}

.facebook-embedded-content {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Removing the top padding that gets applied in the RTE for .media>div */
.media>div.fluid-width-video-wrapper {
    padding-top: 0;
}

/* Overrides for styles related to the Preview for node content */

.node-preview-container {
    position: inherit;
    z-index: auto;
    width: auto;
}

a.node-preview-backlink {
    font-weight: 600;
}

html[data-once*="node-preview"] .region-main-content section:not(.bg-dark) {
    background-color: lightyellow !important;
}

/* Overriding some existing styles and creating some additional ones in order to update patterns for "click on container" behavior */

a.container-link {
    text-decoration: none;
    color: inherit;
}

a.container-link:hover .text-link-btn::after {
    background: #00a261;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    transition: all .3s ease;
    width: 100%;
}

/* Overriding some existing styles and creating some additional ones in order to update the 1 per row pattern for "click on image" behavior */

a.image-link:hover+.horizontal-landing-card__content {
    position: relative;
}

a.image-link:hover+.horizontal-landing-card__content .text-link-btn::after {
    background: #00a261;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    transition: all .3s ease;
    width: 100%;
}

.readmore-secondary:hover .bri-btn {
    background-color: #00a261;
}

.readmore-primary:hover .bri-btn {
    background-color: #00b6de;
}

/* Override styles for the alternate banding on the labs, blog cards, new stories, and research projects to accommodate the wrapping of the cards with the <a> tag */

a.container-link:nth-child(2n) .horizontal-blog-card .horizontal-blog-card__image:before {
    background: linear-gradient(176.82deg, #48b5db, hsla(0, 0%, 100%, 0) 79.16%)
}

a.container-link:nth-child(2n) .horizontal-landing-card .horizontal-landing-card__image:before {
    background: linear-gradient(176.82deg, rgba(130, 200, 102, .5), transparent 79.16%)
}

a.container-link:nth-child(2n) .vertical-landing-card .vertical-landing-card__image:before {
    background: linear-gradient(176.82deg, #48b5db, hsla(0, 0%, 100%, 0) 79.16%)
}

a.container-link:nth-child(2n) .vertical-news-card .vertical-news-card__image:before {
    background: linear-gradient(176.82deg, #48b5db, hsla(0, 0%, 100%, 0) 79.16%);
}

a.container-link:nth-child(2n) .vertical-profile-card .vertical-profile-card__image:before {
    background: linear-gradient(176.82deg, #48b5db, hsla(0, 0%, 100%, 0) 79.16%)
}

a.container-link:nth-child(2n) .vertical-ps-card .vertical-ps-card__image:before {
    background: linear-gradient(176.82deg, #48b5db, hsla(0, 0%, 100%, 0) 79.16%);
}

/* Overriding some existing styles and creating some additional ones in order to update patterns for "click on image" behavior */

/* Change button styles on image hover for the Feature | Content Call-Out pattern */
.content-image-row__image:hover+.content-image-row__content .bri-btn {
    background-color: #00b6de;
}

.content-image-row__image:hover+.content-image-row__content .bri-btn.bri-btn--secondary {
    background-color: #00a261;
}

section.bg-dark a figcaption {
    color: #a1a1a1;
}

section.bg-light a figcaption {
    color: #4b4b4b;
}

/* Updating the display for the captions for images in the RTE */
.caption>figcaption {
    display: inherit;
}

/* Updates for the media images when flourishes are adding in the new RTE */
.media>.media__image {
    padding-top: 0;
}

/* Updates on the flourish added in the RTE to images when there is a caption */
.cke_widget_element figure.media.caption.media--with-accent .media__image:before {
    top: 0;
}

/* Adding margins to images in the RTE when there is a right/left aligned image with content which was impacted by the ".region-main .media class" */
figure.media.caption.align-left,
.media.align-left {
    margin-right: 20px;
}

figure.media.caption.align-right,
.media.align-right {
    margin-left: 20px;
}

/* Added a class to override the default display for img/picture when the section has the associated research-project class */
.research-project img,
.research-project picture {
    display: inline;
}

/* Revised the grid colunn count to 3 for research projects due to long short titles */
.exploring-column-links.research-project {
    --grid-column-count: 3;
}

/* Adding a border with a label to denote paragraphs (patterns) that have been unpublished */
.paragraph--unpublished {
    border: 5px solid #e53e3e;
}

section.paragraph--unpublished::before {
    content: "Unpublished";
    /* display: block; */
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(255, 0, 0, .6);
    padding: 10px;
    color: white;
    border: 1px solid maroon;
    font-style: italic;
}

/* Adding a category class as a label to the news card layout for news, external news, press releases */
.category {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px;
    background: rgba(230, 231, 232, .6);
    color: #052530;
    /* Change this to the desired text color */
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
}

/* Added vertical alignment to svg when used in the vertical news cards display */
.vertical-news-card__image svg {
    vertical-align: middle;
}

/* Apply styles to all subsequent .paragraph--unpublished elements after .node--unpublished + .pattern */
.node--unpublished+.pattern~section.paragraph--unpublished::before {
    content: "";
    display: none;
}

.node--unpublished+.pattern,
.node--unpublished+.pattern~section.paragraph--unpublished:not(.bg-dark),
.node--unpublished+.pattern~.field--name-paragraphs .pattern:not(.bg-dark) {
    border: none;
    background-color: #fff4f4;
}

.node--unpublished+.pattern~section.paragraph--unpublished.bg-dark,
.node--unpublished+.pattern~.field--name-paragraphs .pattern.bg-dark {
    border: none;
}

/* Setting the standard button properties for when we have side by side buttons - (currently used in the Clinical Study template) */
.rtecontent .buttons {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
    margin-top: 30px; /* Optional, if you want some space above */
}

/* Customizing the "View all news" on the Filtered News page and "View all blog posts" on the Filtered Blog Posts page */

.view-return-link {
    margin-left: -1rem;
  
    .text-link-btn {
      font-size: 0.975rem;
  
      &::before {
        content: '‹';
        display: inline-block;
        margin-right: 0.25em;
        font-size: 1.2em;
        vertical-align: baseline;
      }
    }
  
    &.top {
      margin-bottom: 1rem;
    }
  
    &.bottom {
      margin-top: 2rem;
    }
}
.filter-labels {
  font-size: 1rem;
  font-style: italic;
  margin-left: -1rem;
  margin-bottom: 0.75rem;

  /* Add this to scope styles properly */
  p {
    font-weight: 400;
    margin: 0; /* Prevent double spacing in some themes */
  }
}

/* For patterns and nodes which include the "image flop" field, if the value is equal to "yes" then this css is applied */
img.image-flop,
svg.image-flop {
  transform: rotateY(180deg);
}