/*
Theme Name: Confocal
Author: Shaffer
Author URI:https://ricardoshaffer.com/
Description: A lightweight Custom SWPG Theme created for OSTR.
Version: 1.0.0


*/
@charset "UTF-8"; @charset "UTF-8";*,:after,:before {
    box-sizing: border-box
}
/*(7) Sites:*/
/*- CCMC : CCR Confocal Microscopy Core */
/*- EIB: Experimental Immunology Branch */
/*- LCBG: Laboratory of Cancer Biology and Genetics Microscopy Core */
/*- LCMB: Laboratory of Cellular and Molecular Biology */
/*- LRBG: Laboratory of Receptor Biology and Gene Expression */
/*- HITIF: NCI High-Throughput Imaging Facility (HiTIF) */
/*- OMAC: Optical Microscopy and Analysiz Laboratory -> 12/18/28 from OMAL TO OMAC*/
:root{
    --transparent: transparent;
    --white: white;
    --black: black;
    --text-color: #00314c;
    --header-color: #1c5e86;
    --site-bg: #fdf9f6;
    --secondary-site-bg: #f1e4da;
    --primary-action: #005961;
    --nci-grey: #706f6f;
    --nci-grey-light: #e1e1e1;
    --nci-grey-dark: #606060;
    --primary-accent: #2dc799;  //--nci-secondary-green
    --nci-secondary-green: #2dc799;
    --nci-secondary-purple: #6254a3;
    --nci-red: #bb0e3d;
    --nci-secondary-dark-green: #1e7158;
    --nci-secondary-maroon: #82368c;
    --nci-secondary-orange: #ff5f00;
    --banner-gradient-start: #00456fb8;
    --banner-gradient-end: #500e55bf;
    --ccmc: #0f496a;
    --ccmc: #0f496a;
    --eib: #0d95a1;
    --lcbg: #005961;
    --lcmb: #6254a3;
    --lrbg: #d55200;
    --hitif: #82368c;
    --omac: #bb0e3d;
    --primary-accent-faint: color-mix(in srgb, #2dc799 35%, var(--transparent));

}
:root .ccmc {
    --primary-accent: #0f496a;
    --primary-accent-faint: color-mix(in srgb, #0f496a 35%, var(--transparent));
}
:root .eib {
    --primary-accent: #0d95a1;
    --primary-accent-faint: color-mix(in srgb, #0d95a1 35%, var(--transparent));
}
:root .lcbg {
    --primary-accent: #005961;
    --primary-accent-faint: color-mix(in srgb, #005961 35%, var(--transparent));
}
:root .lcmb {
    --primary-accent: #6254a3;
    --primary-accent-faint: color-mix(in srgb, #6254a3 35%, var(--transparent));
}
:root .lrbg {
    --primary-accent: #d55200;
    --primary-accent-faint: color-mix(in srgb, #d55200 35%, var(--transparent));
}
:root .hitif {
    --primary-accent: #82368c;
    --primary-accent-faint: color-mix(in srgb, #82368c 35%, var(--transparent));
}
:root .omac {
    --primary-accent: #bb0e3d;
    --primary-accent-faint: color-mix(in srgb, #bb0e3d 35%, var(--transparent));
}
:root .lmig{
    --primary-accent-faint: color-mix(in srgb, var(--primary-accent) 35%, var(--transparent));
}

html {
    color: var(--text-color);
    /*background-color:var(--site-bg);*/
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    cursor: default;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    word-break: break-word;
    height: 100%;
}
main{
    flex-grow: 1;
    position: relative;
    min-height: 100vh;
}
body{
    color: var(--text-color);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--site-bg);
    font-family: -apple-system, BlinkMacSystemFont, system-ui, ui-sans-serif,'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}
* {
    box-sizing: border-box;
}
dd{
    margin-bottom:auto;
}
dt{
    margin: 0.75rem 0 0 0;
}
.hidden{
    visibility: hidden;
    font-size: 1px !important;
}
.no-display{
    display:none;
}
@media(max-width:768px){
    .mobile-hidden{
        visibility: hidden;
    }
    .mobile-none{
        display: none;
    }
}
@media(min-width:768px){
    img.mobile-hidden{
        max-height: 350px;
    }
}


/*COLORS*/
.bg-gray{
    background-color: var(--secondary-site-bg);
}
[class*="white-text"], [class*="white-text"]{
    color: white;
}
.white{
    color: white;
}
[class^="force-white"]{
    color: white !important;
}
.white-fill{
    fill: white;
}
[class*="-sat-100"]{
    opacity:0;
}
[class*="-sat-90"]{
    opacity:0.90;
}
[class*="-sat-80"]{
    opacity:0.8;
}
[class*="-sat-70"]{
    opacity:0.70;
}
[class*="-sat-60"]{
    opacity:0.60;
}
[class*="sat-50"]{
    opacity:0.50;
}
[class*="-sat-40"]{
    opacity:0.40;
}
[class*="-sat-30"]{
    opacity:0.30;
}
[class*="-sat-20"]{
    opacity:0.20;
}
[class*="-sat-10"]{
    opacity:0.10;
}
[class*="-sat-05"]{
    opacity:0.05;
}
h1, h2, h3, h4, h5, h6, .card-title{
    color: var(--header-color);
}
@media(max-width:768px){
    .white-mobile{
        color: white !important;
    }
    .mobile-width{
        display: contents;
    }
    .desktop-width{
        display: none;
    }
    [class^=".top-neg"]{
        top: 0 !important;
    }

}
@media(min-width:769px){
    .mobile-width{
        display: none;
    }
    .desktop-width{
        display: contents;
    }
    .top-neg-20{
        top: -20px;
    }
    .top-neg-40{
        top: -48px;
    }
    .top-neg-60{
        top: -64px;
    }
    .top-neg-80{
        top: -88px;
    }
    .top-neg-100{
        top:-100px;
    }
}

.list-border{
    border-bottom: 2px solid var(--text-color);
}

a, a span, footer a, header a {
    text-decoration: underline rgba(255,255,255,0);
    transition: text-decoration-color 240ms;
    color: var(--primary-action);
    transition: color .2s, text-underline-offset .2s, text-decoration-color .2s;
    text-underline-offset: .2em;
    text-decoration: underline;
    text-decoration-thickness: .1em;
    -webkit-text-decoration-color: var(--primary-accent);
    -webkit-text-decoration-color: var(--primary-accent);
    text-decoration-color: var(--primary-accent);
}
a:hover, a span:hover, a span:focus, footer a:hover, footer a:focus, header a:hover, header a:focus {
    transition: color .2s, text-underline-offset .2s, text-decoration-color .2s;
    text-underline-offset: .3em;
}

.content-middle{
    align-content: center !important;
}
/*TEXT*/
details summary strong{
    color: var(--primary-action) !important;
}
.balance{
    white-space: unset;
    text-wrap: balance;
}
.title-description {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0.5px;
}
.mission-statement p{
    font-size: 16px;
    line-height: 1.5;
    font-weight: 350;
    letter-spacing: 0.35px;
}
.opening-text {
    font-size:24px;
    line-height:1.6;
    font-weight:400;
}
@media(max-width:576px){
    .mobile-hide{
        display:none;
    }
}

.no-link{
    text-decoration: unset;
}
.current_site{
    visibility: visible !important;
    font-size: inherit !important;
    color: color-mix(in srgb, var(--white) 75%, var(--transparent)) !important;
}
/*SPACING*/

@media(min-width:768px){
    .container{
        /*max-width: calc(100% - 120px) !important;*/
    }
    .row-min-height-125{
        height:125px;
    }
}
.relative{
    position: relative;
}
.z-index-10{
    z-index: 10;
}
.grid{
    display: grid;
}
@media(min-width:768px){
    .grid-desktop{
        display:grid;
    }
}
.grid-gap{
    gap: 2rem;
}
.grid-col-2{
    grid-template-columns: auto auto;
}
.grid-col-3{
    grid-template-columns: auto auto auto;
}
.grid-fixed-cols{
    grid-template-columns: 50% 50%;
}
.grid-col-4{
    grid-template-columns: auto auto auto auto;
}
.grid-column-one{
    grid-column: 1;
}
.grid-column-two{
    grid-column: 2;
}
.grid-column-two-span-two{
    grid-column: 2 /span 2;
}
.grid-column-two-span-three{
    grid-column: 2 /span 3;
}
.flex-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    justify-content: center;
}
@media(max-width:768px){
    .flex-column-mobile{
        height:unset;
        position:absolute;
        z-index:11;

    }
    #home_page .flex-column-mobile{

    }
}
.mt-25{
    margin-top:2.5rem;
}

.justify-self-center{
    justify-self: center;
}
.margin-auto{
    margin: auto;
}
.fit-content{
    width:fit-content;
}
.align-left{
    text-align:left;
    justify-content:start;
}

/*NCI BANNER*/
#core_facility_banner{
    background-color: var(--primary-action);
}
#core_facility_banner a#facility_link {
    color: color-mix(in srgb, var(--primary-action) 20%, var(--white));
    text-decoration: unset;
    font-size: 16px;
    font-weight: 600;
}
#top_nci_banner {
    text-align: center;
    background-color: var(--nci-grey-light);
}
#top_nci_banner a#nci_link {
    color: var(--nci-grey-dark);
    text-decoration: unset;
    font-size: 14px;
    font-weight: 600;
}
#top_nci_banner a#nci_link:hover{
    color:var(--primary-action);
}

/*PAGE BANNER*/

.full-banner{
    min-height: 250px;
    background-position: 50% 70%;
    z-index: 10;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-image: url(/wp-content/themes/confocal-theme/assets/images/confocal-banner-trans.png);
    /*background-image:url("https://crtp.ccr.cancer.gov/wp-content/uploads/2022/12/shutterstock_1078190600-b-scaled-1.jpg");*/
}
.apply-mask{
    -webkit-mask-image: url(#mask);
    mask-image: url(#mask);
}
mask {
    mask-type: alpha;
}
.full-banner .h4{
    color: color-mix(in srgb, var(--header-color) 15%, var(--white));
    font-weight: 300;
    letter-spacing: 1px;
}

.rounded-partial{
    border-radius: 250% 180% 280% 172%;
}
.rounded-partial:after{
    border-radius: 250% 180% 280% 172%;
}
@media(min-width:768px){
    .full-banner:not(.secondary_banner .full-banner, .secondary_home_banner .full-banner){
        min-height: 350px;
    }
    .full-banner-height{
       min-height: 350px;
        text-align:right;
    }
}
.banner-shape-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: 10;
}
.banner-shape-divider-bottom svg{
    position: relative;
    display: block;
    width: calc(100% + 1.4px);
    height: 4.5rem;
}
.banner-shape-divider-bottom .white-fill{
    fill:white;
}
.full-banner:after, .banner-filter:after {
    content: '';
    background-image: linear-gradient(to bottom right, var(--primary-accent-faint), rgba(28, 0, 158, 0.50));
    position: absolute;
    z-index: 9;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
}
.action-container{
    position:relative;
    z-index:11;
}
.action-container:after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
     filter: blur(10px);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid color-mix(in srgb, var(--primary-action)35%, var(--transparent));
}
@media(max-width:768px){
    .rounded-clip-bottom{
        clip-path:ellipse(100% 100% at 50% 0%) !important;
    }
}
.rounded-clip-bottom{
    clip-path:ellipse(75% 100% at 50% 0%);
}
.banner-title{
    width: auto;
}
@media(min-width:768px){
    .banner-title{
        line-height: 4rem;
        text-shadow: 0 0 4rem color-mix(in srgb, var(--primary-accent)30%, var(--transparent));
    }
}
h1.banner-title{
    font-size: calc(1.5rem + 1.5vw);
    font-weight: 700;
}
h1.banner-title > span{
    color: color-mix(in srgb, var(--header-color)70%, var(--white));
}
h2.banner-title{
    font-weight: 600;
    font-size: calc(1.2rem + 1.5vw);
}
h3.banner-title{
    font-weight: 600;
    font-size: calc(1rem + 1.5vw);
}
.secondary_banner .full-banner, .secondary_home_banner .full-banner{
    min-height:350px !important;
}
.secondary_banner .action-container:after,
.secondary_home_banner .action-container:after{
    background: unset;
}
.secondary_banner h1.banner-title,
.secondary_home_banner h1.banner-title{
    font-size: calc(1.1rem + 1.5vw);
    text-shadow: 0 0 1rem var(--text-color);
}

/*IMAGES*/
img.rounded-image{
    width:100%;
}
img {
    max-width:100%;
}
@media(min-width:782px){
    img:not(img[class^="rounded-"], img#logo, img.site-list-img){
        border-radius: 2rem;
    }
}
@media(max-width:781px){
    img:not(img[class^="rounded-"], img#logo, img.site-list-img){
        border-radius: 0.75rem;
    }
}

/*NAVIGATION*/

@media(min-width:992px){
    #main_menu > li.dropdown:hover .dropdown-menu:not(#main_menu li.dropdown:hover .dropdown-menu ul.dropdown-menu) {
        display: block;
    }
    #main_menu{
        display: inline-flex;
        flex-direction: row;
        justify-content: space-evenly;
        /*width: 100%;*/
    }
    form#navigation_search_box{
        float: right;
        margin: auto 0 auto auto !important;
    }
}
.current_site_top_nav{
    position:relative;
    float: left;
    padding: 2px 4px;
    background: color-mix(in srgb, var(--primary-accent) 80%, var(--black));
    background: var(--primary-accent);
    color: white;
    border-radius: 0.25rem 0 0 0.25rem;
    text-shadow: 0px 0px 4px color-mix(in srgb, var(--primary-accent) 35%, var(--black));
    margin-left: 0.75rem;
}
.current_site_top_nav svg{
        filter:drop-shadow(0px 0px 2px rgb(0 0 0 / 0.4));
}
.current_site_top_nav a,
.current_site_top_nav_2 a{
    text-decoration-color: white;
    text-decoration-thickness: 0.8px;
}
.current_site_top_nav:after,
.current_site_top_nav_2:after{
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    top: 0;
    left: 100%;
    border-top: 14px solid transparent;
    border-left: 12px solid color-mix(in srgb, var(--primary-accent) 80%, var(--black));
    border-left: 12px solid var(--primary-accent);
    border-bottom: 14px solid transparent;
    content: '';

}
.current_site_top_nav_2{
    position: relative;
    float: left;
    padding: 2px 4px 2px 17px;
    background: color-mix(in srgb, var(--primary-accent) 80%, var(--black));
    background: var(--primary-accent);
    color: white;
    border-radius: 0.25rem 0 0 0.25rem;
    text-shadow: 0px 0px 4px color-mix(in srgb, var(--primary-accent) 35%, var(--black));
    margin-left: 0.75rem;
}
.current_site_top_nav_2:before{
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0;
     height: 0;
     border-left: 14px solid var(--primary-accent);
     /*border-left: 14px solid color-mix(in srgb, var(--white) 90%, var(--primary-accent));*/
     border-left: 14px solid #f9f1ea;
     border-top: 14px solid var(--transparent);
     border-bottom: 14px solid var(--transparent);
 }
a.nav-link:hover,
a.nav-link:focus{
    text-decoration: unset !important;
}
.nav-item.active, .nav-item,
.multisite-drawer .col:has(a)
{
    position:relative;

}
.nav-item:hover::after, .nav-item.active:after,
.nav-item:focus::after, .multisite-drawer .col:has(a):focus::after,
.multisite-drawer .col:has(a):hover::after
{
    transform: translateY(-100%);
    opacity:1;
}
.nav-item:after,
.multisite-drawer .col:has(a):after{
    background-color: var(--primary-accent);
    content: "";
    height: 3px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 85%;
    transition: transform .15s, opacity .20s;
    width: 85%;
    margin: auto;
}
.multisite-drawer .col:has(a):after{
    width:100%;
}
input.nav-search{
    border: none;
    outline: none;
    background-color: var(--white);
    box-shadow: inset -1px 5px 8px color-mix(in srgb, var(--secondary-site-bg) 90%, var(--black));
    transition: 300ms ease-in-out;
}

input.nav-search:focus {
    background-color: white;
    transform: scale(1.05);
    box-shadow: 6px 6px 30px color-mix(in srgb, var(--secondary-site-bg) 90%, var(--black)),
    -13px -13px 100px #ffffff;
}

@media(min-width: 768px){
    .nav-search{
        height:42px;
        margin:auto;
    }
    .nav-item{
        padding: 0.3rem 0.2rem 0.3rem 0.2rem;
        font-size: 15px;
    }
    .navbar-nav{
        /*background-color: color-mix(in srgb, var(--primary-action)5%, var(--transparent));*/
        /*background-color: var(--site-bg);*/
        /*border-radius: 2rem;*/
    }
    #main_menu .menu-item.active{
        /*background-color: color-mix(in srgb, var(--primary-action)20%, var(--transparent));*/
        /*border-radius: 2rem;*/
    }
}
#main_menu{
    text-wrap: nowrap;
    flex-wrap: wrap;
}
.nav-link.active{
    color: var(--primary-action) !important;
}
.nav-link{
    color: var(--text-color);
    font-weight:600;
}
/*Breadcrumbs*/
.breadcrumb-item.active{
    color: inherit;
}

/* Drawer Navigation*/
#facility_container{
    padding-top:0.15rem;
}
.nav-font-size a{
    font-size:18px !important;
}
#ostr_banner{
    background: var(--text-color);
    padding: 0.4rem 0 0.4rem 0;
}
#ostr_banner a{
    font-weight:600;
}
/*.secondary_top_nav{*/
/*    cursor:pointer;*/
/*}*/
.top_ccr_banner {
    cursor: pointer;
    float:right;
    border: none;
    text-align: left;
    outline: none;
    font-size: 20px;
    position: relative;
    padding-right: 0.75rem;
    color: var(--white);
    text-shadow: 0px 0px 4px color-mix(in srgb, var(--primary-accent) 15%, var(--black));
}
@media(min-width:768px){
    .top_ccr_banner{
        padding-left: 0.25rem;
        left: 50%;
        position: absolute;
    }
}
.network_nav{
    box-shadow: 0px 3px 3px 0 #d4c9c0;
    position:relative;
    background-color: var(--primary-accent);
    background-color: color-mix(in srgb, var(--white) 90%, var(--primary-accent));
    background-color: #f4f0ed;
    background-color: #f9f1ea;
    text-align: center;
    font-weight: 400;
    /*color: color-mix(in srgb, var(--white) 70%, var(--transparent));*/
    color: var(--text-color);
    padding-top: 0.25rem;
    paddinb-bottom:0.25rem;
}
.network_nav:after{
    /*content: "";*/
    position: absolute;
    width: 0;
    height: 0;
    bottom: -1em;
    left: 50%;
    box-sizing: border-box;
    border: 0.5em solid black;
    border-color: transparent transparent var(--primary-accent) var(--primary-accent);
    transform-origin: 0 0;
    transform: rotate(-45deg);

    box-shadow: -3px 3px 3px 0 #d4c9c0;
}
.wp-block-button__link, .wp-block-button{
    width: unset !important;
}
button.top_ccr_banner:after{
    background-color: var(--primary-accent);
    content: "";
    height: 3px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 100%;
    transition: transform .15s, opacity .20s;
    width: 85%;
    margin: auto;
}
.top_ccr_banner:hover::after {
    transform: translateY(-100%);
    opacity: 1;
}
 .network_nav.active .multisite-drawer {
    min-height: 250px;
    max-height:375px;
    transition: all 0.3s ease-in-out;
    /*transition: ease .5s;*/
}

.network_nav .multisite-drawer {
    padding: 0 18px;
    min-height: 0;
    max-height:0;
    transition: ease .5s;
    overflow: hidden;
    border-radius: 0px;
    background: var(--header-color);
    box-shadow: inset 0px 8px 5px color-mix(in srgb, var(--header-color)75%, var(--black)),
    inset 0px 1px 6px color-mix(in srgb, var(--header-color)80%, var(--white));
    color: white;
}
.network_nav .multisite-drawer .row{
    text-align: left;
}
.network_nav .multisite-drawer a:not(.network_nav .multisite-drawer a:hover){

    text-decoration: unset;
}
.network_nav .multisite-drawer a:hover{
    text-decoration:underline;
}

/*CARDS*/
.card.personnel-card:hover, .card.personnel-card:hover .card-title {
    text-decoration: unset !important;
    cursor: default !important;
}
.card.personnel-card{
    border: unset !important;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 100%;
    background:transparent;
}
.personnel-card .card-body{
    padding-left: 0;
}
.personnel-card .personnel-image{
    object-fit: cover;
    width: 150px;
    height: 200px;
}
.personnel-card .card-text span{
    display:block;
}


.col:has(.neo-card){
    height: 100%;
}
.neo-card{
    height: 100% !important;
}
a:has(.col .neo-card){
    margin-bottom: 2rem;
}
.neo-card{
    border-radius: 32px;
    background: var(--secondary-site-bg);
    box-shadow: -12px 12px 24px color-mix(in srgb, var(--secondary-site-bg) 90%, var(--black)), 12px -12px 24px color-mix(in srgb, var(--secondary-site-bg) 60%, var(--white));
    border: unset;
    height: 100%;
}
.neo-card:hover,
.neo-card:focus{
    border-radius: 32px;
    background: var(--secondary-site-bg);
    box-shadow: inset -5px 5px 6px color-mix(in srgb, var(--secondary-site-bg) 90%, var(--black)), inset 6px -6px 8px color-mix(in srgb, var(--secondary-site-bg) 60%, var(--white));
    border: unset;
    height: 100%;
}
/*SERVICE CARD*/

.service-card{
    background-color: var(--primary-accent);
    color: white !important;
    text-shadow: 0 0 3px #00000085;
}
.service-card .contact-icon{
    font-size: 4rem;
    color: white;
}
@media(min-width:768px){
    .service-card .contact-icon{
        font-size:5vw;
    }
}


/*LISTS*/
footer .list-group-item, header .list-group-item{
    background-color: var(--transparent);
    color:var(--primary-action);
    border: unset !important;
}
footer p{
    color:var(--text-color);
}
/* HEADER */

header .top_ccr_banner a{
    font-weight: 500;
    /*color: color-mix(in srgb, var(--white) 85%, var(--transparent));*/
    color: var(--header-color);
    /*text-decoration: unset;*/
}
/* FOOTER */
footer{
    background-color: color-mix(in srgb, var(--primary-action) 20%, var(--transparent));
    background-color: var(--secondary-site-bg);
}
footer .nci-logo-text{
    margin-block-start: 1em;
}
footer .nci-logo-text p.header{
    font-size: 1.25rem;
    line-height: 0;
    font-weight: 700;
    display:inline;
}
footer .nci-logo-text p.byline{
    font-size: 0.88rem;
}
footer .byline{
    font-size:20px;
    font-weight: 600;
}
/*footer a{*/
/*    color: var(--primary-action);*/
/*    text-decoration: unset;*/
/*}*/

/*BUTTONS*/
.search-button{
    background-color: var(--primary-action);
    color: white;
}
.mail-button{
    color:var(--text-color);
    background: transparent;
    font-size:18px;
}
.primary-outline{
    border-radius:2rem;
    background: transparent;
    border:1px solid var(--primary-action);
    font-size:18px;
    transition: .4s ease-in-out;
}
.primary-outline .icon-link{
    text-decoration:unset;
    color: var(--primary-action);
}
.primary-outline .icon-link>.bi{
    width:unset;
    height:unset;
}
.primary-outline:hover{
    background-color: var(--primary-action);
}
.primary-outline:hover .icon-link{
    color: var(--white);
}


.primary-outline-white{
    border-radius:2rem;
    background: transparent;
    border:1px solid var(--white);
    font-size:18px;
    transition: .4s ease-in-out;
}
.primary-outline-white .icon-link{
    text-decoration:unset;
    color: var(--white);
}
.primary-outline-white .icon-link>.bi{
    width:unset;
    height:unset;
}
.primary-outline-white:hover{
    background-color: var(--primary-action);
    border:1px solid color-mix(in srgb, var(--primary-action) 20%, var(--white));
}
.primary-outline-white:hover .icon-link{
    color: var(--white);
}
.primary-btn, .wp-block-button__link{
    border-radius:2rem;
    background: transparent;
    border:1px solid var(--primary-accent);
    font-size:18px;
    transition: .4s ease-in-out;
    background: var(--primary-accent);
    color: white;
    width: max-content;
}
.primary-btn .primary-outline-icon-link{
    text-decoration: unset;
}
.primary-btn .icon-link{
    text-decoration:unset;
    color: var(--white);
    text-shadow: 0 0 0.2rem color-mix(in srgb, var(--primary-accent) 80%, var(--black));
}
.btn.primary-btn:hover, .wp-block-button__link:hover{
    background: var(--primary-accent);
}

.primary-btn .bi{
    display: flex;
}

/*BORDERS*/
.left-responsive-border{
    border-left:1px solid var(--white);
}
@media(max-width:768px){
    .left-responsive-border{
        border-left: unset;
        border-top:1px solid var(--white)
    }
}
.gradient-border-bottom:before {
    height: 0.25rem;
    width: 100%;
    content: "";
    background-image: linear-gradient(to right,var(--primary-accent) 5%, #0127c5);
    position: absolute;
    border: 0 solid #e5e7eb;
    box-sizing: border-box;
    padding-botttom: 0.5rem;
    border-radius: 0.15rem;
    top: 100%;
}
.banner-title.gradient-border-bottom:before{
    /*margin-top: 5rem;*/
    /*top:unset;*/
}

/*ICONS*/
.card-icon {
    height: 3rem;
    width: 3rem;
    align-content: flex-end;
    font-size: 1.5rem;
    place-items: center;
    text-align: center;
    border-radius: 1.5rem;
    transition: border 1s ease-in-out;
    transition: 0.4s;
    display: flex;
    justify-content: center;
    margin: 6px 0px 6px 6px;
}
.card-icon svg, .card-icon i {
    vertical-align: middle !important;
    filter:drop-shadow(-1px 1px 2px rgb(0 0 0 / 0.10)) drop-shadow(3px -2px 2px rgb(255 255 255 / 0.5));
}
.green-icon{
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, var(--primary-accent)20%, var(--transparent));
    background-color: color-mix(in srgb, var(--primary-accent)40%, var(--transparent));
    color: var(--primary-accent);
}
.purple-icon{
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, var(--nci-secondary-purple)20%, var(--transparent));
    background-color: color-mix(in srgb, var(--nci-secondary-purple)40%, var(--transparent));
    color: var(--nci-secondary-purple);
}
.maroon-icon{
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, var(--nci-secondary-maroon)20%, var(--transparent));
    background-color: color-mix(in srgb, var(--nci-secondary-maroon)40%, var(--transparent));
    color: var(--nci-secondary-maroon);
}
.orange-icon{
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, var(--nci-secondary-orange)20%, var(--transparent));
    background-color: color-mix(in srgb, var(--nci-secondary-orange)40%, var(--transparent));
    color: var(--nci-secondary-orange);
}
.red-icon{
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, var(--nci-red)20%, var(--transparent));
    background-color: color-mix(in srgb, var(--nci-red)40%, var(--transparent));
    color: var(--nci-red);
}
.dark-green-icon {
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, var(--nci-secondary-dark-green) 20%, var(--transparent));
    background-color: color-mix(in srgb, var(--nci-secondary-dark-green) 40%, var(--transparent));
    color: var(--nci-secondary-dark-green);
}
.blue-icon{
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, var(--nci-turquoise)20%, var(--transparent));
    background-color: color-mix(in srgb, var(--nci-turquoise)40%, var(--transparent));
    color: var(--nci-turquoise);
}
.forest-green-icon{
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, #407263 20%, var(--transparent));
    background-color: color-mix(in srgb, #407263 40%, var(--transparent));
    color: #407263;
}
.dark-green-icon{
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, #247379 20%, var(--transparent));
    background-color: color-mix(in srgb, #247379 40%, var(--transparent));
    color: #247379;

}
.card:hover{
    cursor: pointer;
}
.card:hover .card-icon {
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, var(--primary-action) 20%, var(--transparent)), -2px 2px 3px  color-mix(in srgb, var(--primary-action) 80%, var(--black));
    background-color: color-mix(in srgb, var(--primary-action) 80%, var(--transparent));
    color: color-mix(in srgb, var(--primary-action) 10%, var(--white));
}
.card:hover .card-icon svg{
    filter: drop-shadow(-4px 3px 1px rgb(0 0 0 / 0.4));
}
.card:hover .card-title{
    text-underline-offset: 0.2em;
    text-decoration: underline;
    text-decoration-color: var(--primary-action);
    text-decoration-thickness: 2px;
}
.card .card-title{
    color: var(--text-color);
}
.card.neo-card:hover .card-title{
    text-decoration: unset !important;
}



/*LANDING PROVIDER CARDS */
a.provider-url{
    text-decoration: unset;
}
.provider-card{
    border-radius: 0.5rem;
    background: white;
    box-shadow: 16px 16px 32px #d9d9d9, -16px -16px 32px #ffffff;
    box-shadow: 13px 13px 26px #e3e3e3, -13px -13px 26px #ffffff, inset -2px -2px 4px -2px #fbfbfb;
    box-shadow:4px 4px 16px #e3e3e3, -10px -10px 18px #ffffff, inset -2px -2px 4px -2px #fbfbfb;
    box-shadow: 13px 13px 26px #b3becc, -13px -13px 26px #ffffff, inset -2px -2px 4px -2px #d5e3f5;
    transition: 0.4s;
    border: 1px solid color-mix(in srgb, var(--primary-action) 20%, var(--white));
}
.provider-card .card-body{
    display: flex;
    padding: 0;
}
.provider-card .card-image{
    display: inline-block;
    width: 25%;
    background-color: color-mix(in srgb, var(--primary-action) 20%, var(--white));
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px 0px 0px 8px;
}
.provider-card .card-title{
    padding:1rem;
    color: var(--primary-action);
    align-self: center;
}
.provider-card:hover, provider-card:active{
    cursor: pointer;
    box-shadow: inset 6px 6px 8px color-mix(in srgb, var(--header-color) 25%, var(--white)), inset -8px -8px 16px #ffffff;
    border:1px solid var(--primary-action);
}
.provider-card .card-image{
    align-items: center !important;
    display: flex;
    justify-content: center;
}
.provider-card:hover .card-title{
    text-decoration:unset;
}
.provider-card .provider-icon.round{
    height: 3rem;
    width: 3rem;
    border-radius: 1.5rem;
    background: var(--primary-action);
    display: flex;
    align-self: center;
    place-items: center;
    text-align: center;
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, var(--primary-action) 60%, var(--white));
}
.provider-card .provider-icon.square{
    height: 3rem;
    width: 3rem;
    border-radius: 0.5rem;
    background: var(--primary-action);
    display: flex;
    align-self: center;
    place-items: center;
    text-align: center;
    box-shadow: 0px 0px 0px 6px color-mix(in srgb, var(--primary-action) 60%, var(--white));
}
.provider-card .provider-icon{
    font-size:1.5rem;
    color: color-mix(in srgb, var(--primary-action) 15%, var(--white));
    margin: 1rem;
}
.provider-card .provider-icon svg{
    margin:auto;
}
.provider-card .content-container{
    width: 75%;
}
.provider-card .card-text{
    margin:1rem;
}
@media(max-width:576px) {
    .provider-card .content-container {
        width: 100%;
    }

    .provider-card .card-image {
        width: 100%;
    }

    .provider-card .card-body {
        display: inline;
        padding: 0;

    }

    .provider-card .card-image {
        border-radius: 8px 8px 0px 0px;
    }
}
/*SEARCH RESULTS*/
.search-result.highlight{
    /*background-color: color-mix(in srgb, var(--header-color) 5%, var(--white));*/
    border-radius: 1rem;
}
.search-result{
    padding: 0.5rem;
}

/*Tables*/
table td{
    display: flex;
    align-items: flex-start;
}

/*OVERWRITES*/
.has-vivid-cyan-blue-background-color{
    background-color:var(--primary-action) !important;
}
.rounded-banner-image{
    object-fit: cover;
    width: 350px;
    height: 350px;
    border-radius: 50% !important;
    box-shadow: 0px 0px 0px 12px var(--primary-accent);
}
/** Container Filters */
.blur-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    /* Enable GPU Rendering */
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.blur {
    /* All the background image supports */
    transform: translate(0px, 0px, 0px);
    background-image: -webkit-linear-gradient(bottom left, rgb(43 40 50 / 0%) 0%, rgba(83, 86, 99, 0.8) 45%, rgb(69 77 91 / 18%) 60%);
    background-image: -moz-linear-gradient(bottom left, rgba(43, 40, 50, 0.8) 0%, rgba(83, 86, 99, 0.8) 45%, rgba(69, 77, 91, 0.6) 60%);
    background-image: -o-linear-gradient(bottom left, rgba(43, 40, 50, 0.8) 0%, rgba(83, 86, 99, 0.8) 45%, rgba(69, 77, 91, 0.6) 60%);
    background-image: linear-gradient(to top right, rgb(2 152 166 / 32%) 0%, rgb(71 86 147 / 5%) 45%, rgb(39 80 132 / 18%) 60%);
    position: absolute;
    width: 100%;
    height: 100%;

    /* blur filters */
    -webkit-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);

    /* positioning and removing edges */
    top: -70px;
    right: -70px;
    left: -70px;
    padding: 70px;
}

.blur:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1001;

    /* Setting the gradient. Adds depth, and glass like effect. */
    background-image: -webkit-linear-gradient(289deg, rgb(104 174 154) 0%, rgb(28 81 164) 46%, rgb(237 237 237) 50%);
    background-image: -moz-linear-gradient(289deg, rgba(43, 40, 50, 0.8) 0%, rgba(43, 40, 50, 0.4) 46%, rgba(0, 0, 0, 0.05) 50%);
    background-image: -o-linear-gradient(289deg, rgba(43, 40, 50, 0.8) 0%, rgba(43, 40, 50, 0.4) 46%, rgba(0, 0, 0, 0.05) 50%);
    background-image: linear-gradient(-19deg, rgb(141 204 209 / 22%) 0%, rgb(171 147 229 / 40%) 46%, rgb(255 255 255 / 26%) 50%);

    /* Blur to add depth. High to create smooth transition */
    -webkit-filter: blur(70px);
    -o-filter: blur(70px);
    filter: blur(70px);
}
/** Landing Page Cards */
.card.landing-card{
    position:relative;
    z-index:11;
    position: relative;
    z-index: 11;
    border-radius: 1.25rem;

}
.card.landing-card:not(.card.landing-card a){
    cursor: default !important;
}
.card.landing-card a{
    cursor:pointer;
}
.card.landing-card.hitif{
 background-image: url('https://confocal.ccr.cancer.gov/wp-content/uploads/2023/01/HiTIF_landing_background.bmp');
}
.card.landing-card.lcmb{
    background-image: url("https://confocal.ccr.cancer.gov/wp-content/uploads/2021/08/cropped-shutterstock_385454602.jpg");
}
.card.card-landing{
    background-size: cover;
    background-repeat: no-repeat;
}
.card.landing-card .card-content:after{
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background: rgb(252 255 255 / 19%);
    border-radius: 1.25rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid
    color-mix(in srgb, var(--primary-action) 35%, var(--transparent));
    /*margin: 1.5rem;*/
    display: block;
}
.card.landing-card .card-body{
    margin: 1rem;
    z-index: 14;
}
.card.landing-card p{
    color: white;
}
.card.landing-card .card-title{
    font-size: 1.75rem;
    font-weight:500;
    white-space: pre-wrap;
    line-height:1.1;
    font-size: 36px;
    letter-spacing: -0.5px;
    text-wrap: balance;
    text-shadow:0 0 2rem color-mix(in srgb, var(--text-color) 85%, var(--transparent));

}
.card.landing-card:after{
    content: '';
    /* background-image: linear-gradient(to right, rgb(22 0 78 / 90%), rgb(43 0 255 / 15%)); */
    background-image: linear-gradient(to right, var(--banner-gradient-start), var(--banner-gradient-end));
    /* background-image: linear-gradient(to right, #500e55bf, #00456fb8); */
    /* background-image: linear-gradient(to right, rgb(41 7 60 / 87%), rgb(18 16 75 / 44%)); */
    /* background-image: radial-gradient(circle at top right, #ff8a0036, #05269380, #12104b); */
    /* background-image: radial-gradient(circle at top right, #00314c, #85b6d485, #ffffff); */
    position: absolute;
    z-index: -1;
    /*backdrop-filter: blur(3px);*/
    /*-webkit-backdrop-filter: blur(3px);*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    border-radius: 1.25rem;
    transition: background-image 0.5s ease-in-out;
}
.card.landing-card:hover::after{
    content: '';
    background-image: linear-gradient(to right, rgba(0, 69, 111, 0.65), rgba(80, 14, 85, 0.50));
    position: absolute;
    z-index: 12;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    border-radius: 1.25rem;
    transition: background-image 0.5s ease-in-out;
}
/** Landing Page Microsites Section */
.microsites-container {

    background: radial-gradient(at bottom right, #1C3D87, #1c8777);
    background: #0D4A52;
    background-image: url(/omal/wp-content/uploads/sites/7/2024/10/Picture2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle !important;
    margin: unset;
    padding: unset;
    background-position-y: bottom;
    position:relative;
}
.microsites-container:after{
    content: '';
    background-image: linear-gradient(to right, rgb(80 14 85 / 69%), rgba(0, 69, 111, 0.25));
    background-image: linear-gradient(to right, rgb(62 24 137 / 68%), rgb(40 116 123));
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
}
.microsites-container .top-layer{
    z-index: 21;
    position: relative;
}
.microsites-container h2.h3{
    font-size: calc(0.9rem + 0.8vw);
    color: var(--white);
}
.microsites-container li h3{
    color: var(--white);
    font-size: calc(0.9rem + 0.5vw);
    font-weight: 350;
}
.microsites-container .list-group-item {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: calc(0.9rem + 0.5vw);
    font-weight: 350;
    display:flex;
}
.microsites-container .list-group-item img{
    height: 80%;
    align-items: center;
    filter: drop-shadow(-3px 3px 2px rgb(0 0 0 / 0.3)) drop-shadow(3px -2px 2px rgb(255 255 255 / 0.2));
    padding-right:1rem;
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}
@media(max-width:768px){
    .microsites-container .list-group-item img{
        height:50px;
        padding-right:0.5rem;
    }

}
@media(min-width:768px){
    .microsites-container .list-group-item{
        height:calc(1.5rem + 3vw);
    }

}
.microsites-container .list-group-item:hover{
    color: var(--white);
    text-shadow: 0 0 1rem var(--text-color);
    cursor: pointer;
    text-underline-offset: 6px;
    text-decoration: underline 1px var(--primary-accent);
}
.microsites-container .list-group-item{
    text-decoration: underline 0px rgba(255,255,255,0);
    transition: text-decoration-color 300ms;
}
/*.microsites-container .description-col{*/
/*    background-image: url(/wp-content/themes/confocal-theme/assets/images/confocal-landing-white.png);*/
/*    background-size: contain;*/
/*    background-repeat: no-repeat;*/
/*    vertical-align: middle !important;*/
/*    background-position-y: bottom;*/
/*}*/
.microsites-container .description-col{
    margin:auto;
}
.microsites-container .card.landing-card .card-content{
    z-index:13;
    position:relative;
}
.microsites-container .card.landing-card{
    background: transparent;
    /* position: relative; */
    /* z-index: 11; */
    /* position: relative; */
    /* z-index: 11; */
    border-radius: 1.25rem;
    padding: 0;
    margin: 0;
    border: unset;
}
.microsites-container .card.landing-card .card-content:after{
    background-color: transparent;
}
.microsites-container .card.landing-card:after{
    background:rgb(106 216 219 / 8%);
}
[data-facility="ccmc"] {
        background-color: color-mix(in srgb, var(--ccmc) 35%, var(--transparent));

}
[data-facility="eib"] {
    background-color: color-mix(in srgb, var(--eib) 35%, var(--transparent));

}
[data-facility="lcbg"] {
    background-color: color-mix(in srgb, var(--lcbg) 35%, var(--transparent));

}
[data-facility="lcmb"] {
    background-color: color-mix(in srgb, var(--lcmb) 35%, var(--transparent));

}
[data-facility="lrbg"] {
    background-color: color-mix(in srgb, var(--lrbg) 35%, var(--transparent));

}
[data-facility="hitif"] {
    background-color: color-mix(in srgb, var(--hitif) 35%, var(--transparent));

}
[data-facility="omac"] {
    background-color: color-mix(in srgb, var(--omac) 35%, var(--transparent));

}

@media(min-width:768px){
    .microsites-container .row{
        min-height: 450px;
    }
}
.microsites-container .button-outline{
    border: 0.2rem solid white;
    border-radius: 2rem;
    background: transparent;
    font-size: 1.25rem;
    color: white;
    text-decoration: unset;
    transition: .2s cubic-bezier(0,.5,.5,1);
}
.microsites-container .card.landing-card .card-footer{
    margin-left: 0.8rem;
    border: unset;
    background: none;
}
.microsites-container .card.landing-card .card-text{
    margin: 1.25rem auto 1.25rem auto;
    padding: 0.75rem 0 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    white-space: pre-wrap;
    line-height: 1.3;
    font-weight:450;
    font-size:20px;
}

.microsites-container .card:hover .card-title{
    text-decoration: none;

}
/*WP overrides*/

@media(min-width:782px){
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
        flex-basis: 0;
        flex-grow: 1;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    .organizers .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
        display:block;
    }
    #contact-us-section  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
        justify-content: flex-start;
    }
}
.organizers p:not(.organizers p:last-child) {
    margin-bottom: 0 !important;
}

.organizers p > em {
    margin-bottom: 0 !important;
}
details summary{
    margin-bottom:1rem;
}

.wp-block-group{
    margin:2rem 0;
}


/*// MAPS*/
.google-maps{
    min-height:250px;
    width:100%;
}
@media(min-width:768px){
    .google-maps {
        height: 400px;
        width: 100%;
    }
}
/* WORDPRESS OVERWRITES */
.wp-block-media-text>.wp-block-media-text__content{
    padding: 0;
    align-self: unset;
}
.wp-block-media-text{
    padding: 0;
}
.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content{
    padding-right:1.25rem;
}
.wp-block-media-text>.wp-block-media-text__content:not(.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content){
    padding-left:1.25rem;
}
.wp-block-media-text__media{
    display:contents;
}
/* Banner for Shutdown */
.notice-banner {
    background-color: #002e4d !important;
}
.notice-banner, .notice-banner p{
    color: #e9f6ff !important;
    font-size: 18px;
    text-align: center;
    margin: unset;
    padding: 0.5rem;
    font-weight:600;
}
.notice-banner a{
    color: #b9e2ff !important;
}