/* ======NOTES======
===Common colors===
DEP Blue: #244F71
DEP Blue + luminance 38: #365e80
DEP Blue + luminance 42: #41678a
Desaturated Blue-Green-Gray (primary): #768A88
Medium Bright Blue (primary): #0189B2
Light Bright Blue (primary): #39BDC7
Brown (secondary): #816B3B
Tan (secondary): #E7DAAC

2026 heading, from main DEP: #336666
2026 hyperlink, from entire NJ.gov: #00008B

===WPBakery card-like settings===
Settings from cards, use hex version before rgba version copied from main website:
    border: 1px solid #dfdfdf; 
    border-color: rgba(0,0,0,.125);
    border-radius: 6px; /* or, if allowed */  border-radius: .25rem;
    padding: 1.25rem;

=Miscellaneous=
Keep the ID #primary in front of changes to headings or other general tags. This is the main container for the page content we edit. Leaving this out of custom list or hyperlink styling, for instance, affects surrounding parts of the template.

======END NOTES====== */

/* ======BASE CUSTOMIZATIONS====== */
/* ===Body=== */

#primary p {
    font-size: 1.125em;
}

html:root {
    font-size: 1em;
}

/* ===HEADERS=== */
#primary h1 {
    /*color: #336666;*/ /*Change title heading color here if needed*/
    text-wrap: balance;
}

#primary h2, h3, h4, h5, h6 {
/*Wait until template is updated, may not need to change any fonts*/
   color: #336666; /*This is the 2021-2022 "DEP Blue"*/
   text-wrap: balance;
}

#primary h1 {
/*    font-size: 3.75em;
    font-weight: 700;*/
}

#primary h2 {
    font-size: 2.5em;
    font-weight: 700;
}

#primary h3 {
    font-size: 2em;
    font-weight: 500;
}

#primary h4 {
    font-size: 1.5em;
    font-weight: 500;
}

#primary h5 { /* WPBakery Cards use this for title text; separate .card-title styling set up below */
    color: #365e80;
    font-size: 1.1em;
    font-weight: 500;
}

#primary h6 {
    color: #365e80;
    font-size: 1em;
    font-weight: 500;
}

/* Special headings */
#primary .card-title {
    color: black;
}

/* Restores underlines to the default appearance of hyperlinks in regular text in our content area. Remove if addressed by a WordPress template update. Class .wpb-content-wrapper is here to exclude the breadcrumb links, which are in a list under #primary but outside of content that is editable in WPBakery. */
#primary .wpb-content-wrapper p a:link, #primary table .wpb-content-wrapper a:link, #primary .wpb-content-wrapper blockquote a:link {
    text-decoration: underline;
}

#primary .wpb-content-wrapper li a:link {
    text-decoration: underline;
}

#primary .vc_tta-tabs-list li a:link { /*Remove underline from select WPBakery widgets*/
    text-decoration: none !important;
}

/*Fix accordion and similar link/icon colors until this gets updated in the DEP template */
/* Overriding this from template CSS: Alter accordion text color and active font-weight */
#primary .vc_tta-color-white.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-title > a, .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-title > a {
    color: #00008B; }
/* Overriding this from template CSS: Alter accordion icon active color */
#primary .vc_tta-color-white.vc_tta-style-classic .vc_tta-controls-icon::before { color: #00008B; border-color: #00008B; }


/* ===LISTS=== */
/* Sitewide lists */

ul {
    list-style-type: square;
}

ul li::marker {
    color: #336666;
}

#primary li {
    font-size: inherit;
}

/* ===TERMS/DEFINITIONS== */

/* In-line term tags */
dfn {
    color: #516A51;
    padding-left: 0.05em;
    padding-right: 0.05em;
}

/* Definition Lists */
#primary dl {
/*    margin-left: 12px;*/ /*overall indent for the definition list. TBD if we add additional flair to mark the block*/
/*This sets an overall radius if we style this like the cards*/
    border-radius: .25rem;
    background-color: white;
    border: 1px solid rgba(0,0,0,.125);
    /*width: 95%;*/
}

#primary dt { /*Term*/
    /*color: #516A51;*/
    font-family: "Roboto", "Calibri", "Arial", sans-serif;
    font-size: 1.5em;
    font-weight: 500;
    background-color: rgba(231, 216, 172, .75);
/*    border: 1px solid rgba(0,0,0,.125);*/
    padding: 6px;
    padding-left: 12px; /*For inset when list border is enabled*/
    padding-right: 12px; /*For inset when list border is enabled*/
    /*font-weight: bold*/

}

#primary dd { /*Definition text*/
    color: black;
    margin-bottom: 12px; /*Makes bottom of list appear even when border is enabled */
    padding-bottom: 12px;
    padding-top: 12px;
    margin-left: 12px; /*For inset when list border is enabled*/
    margin-right: 12px; /*For inset when list border is enabled*/
    padding-left: 2em; /*This is for the indent*/
/*    background-color: white;
    border: 1px solid rgba(0,0,0,.125);*/
}

#primary dd footer {
   text-align: right;
}

#primary dd footer::before {
    content: "\2014  ";
}

/* ===QUOTATIONS AND CITATIONS=== */

/* Citations */
/* Use  to mark up publication titles */
cite {
    color: #603341;
    font-weight: 400;
    font-style: normal;
}

cite::before {
    content: open-quote;
}

cite::after {
    content: attr(data-before);
    content: close-quote;
}

a:link cite{
    text-decoration: underline;
}

a:hover cite{
    color: #ED1C24;
    text-decoration: underline;
}

footer cite {
    font-weight: 500;
}


/* Blockquotes */
/* This gives  text a custom card-like border */
blockquote {
    color: #365e80;
    background-color: white;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 6px;
    padding: 1.5rem; /*18px;*/
    margin-left:6px;
    margin-right: 6px;
    margin-top: 0.1em;
}

blockquote * {
    clear: none;
/*    margin-left: 1em;
    margin-right: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;*/
}

blockquote::before {
    content: open-quote;
    float: left;
    display: block;
    margin-top: -0.7em;
    margin-left: -0.425em;
    /*margin-left: -1em;*/
}

blockquote::after {
    content: close-quote;
    text-align: right;
    float: right;
    display: block;
    /*margin-right: -1em;*/
    margin-top: -0.3em;
    margin-right: -0.425em;
}

blockquote::before, blockquote::after {
    font-size: 6em;
    color: #dfdfdf; /*rgba(0,0,0,.125);*/
    font-family: "Roboto Slab", Georgia, serif;
    font-weight: 500;
/*    margin-left: 0.5rem;
    margin-right: 0.5rem;*/
}

blockquote q {
    /*font-size: 1.5em;*/
    /*font-family: "Roboto Condensed", "Calibri", "Arial", sans-serif;*/
    font-weight: 500;
    text-align: justify;
}

blockquote footer {
    font-size: 1em;
    font-weight: 400;
    font-family: "Roboto Condensed", "Calibri", "Arial", sans-serif;
    text-align: right;
}

blockquote footer cite { /* This reverts a cited title in the block quote footer to double quotes */
    quotes: '“' '”';
}

blockquote footer::before { /* This adds an em dash before the citation at the bottom of the block quote */
    content: "\2014  ";
}
#primary .vc_message_box blockquote { /*Exception for message boxes*/
    color: black;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}

#primary .vc_message_box blockquote::before {
    content: none;
    margin: 0;
}

#primary .vc_message_box blockquote::after {
    content: none;
    margin: 0;
}

/* Dialog/commands */

#primary code {
    font-weight: 400;
    color: #387C2B;
    background-color: white;
    padding-left: 0.1em;
    padding-right: 0.1em;
    margin-left: 0.1em;
    margin-right: 0.1em;
}

/* Style footer tag in legal excerpts put into WPBakery accordions */
.LegalExcerpts footer {
    font-size: 0.75em;
    padding-bottom: 1em;
}

/* ===TABLES=== */
/* Base table design */
#primary table caption {
    font-family: Roboto,"Helvetica Neue", Arial, sans-serif;
    font-size: 0.8em;
    color: black;
    text-align: right;
}

#primary table td {
    font-size: 0.9em;
    font-weight: 400;
}

#primary table td li { /*Reduces indent for lists within a table*/
    margin-left: -1.25em;
}

#primary table caption::before {
    content: "Table. ";
    font-style: oblique;
    color: #244F71;
}

#primary table {
    color: black;
    background-color: white;
    border: 1px solid #dfdfdf; 
    border-color: rgba(0,0,0,.125);
    hyphens: auto;
}

#primary thead {
    color: black;
    background-color: rgba(231, 216, 172, .75);
    border: 1px solid #dfdfdf; 
    border-color: rgba(0,0,0,.125);
}

#primary tbody th { /*This tints headers in the body*/
    background-color: rgba(165,180,152, .25);
}

#primary tbody th a { /*This adds a hover state that */
    color: #244F71;
    text-decoration-line: underline;
}

#primary tbody td a { /*This adds a hover state that */
    text-decoration-line: underline;
}

#primary tbody th a:hover { /*This darkens hyperlinks for better contrast*/
    color: #ED1C24;
    text-decoration-line: underline;
}

#primary tr {
    border: 1px solid #dfdfdf; 
    border-color: rgba(0,0,0,.125);
}

#primary th {
    padding: 0.25em;
    padding-left: 0.5em;
}

#primary td {
    color: black;
    border: 1px solid #dfdfdf;
    padding: 0.5em;
    vertical-align: top;
    margin-left: 0.5em;
}

@media screen and (max-width: 768px) {
#primary table {
    font-family: "Roboto Condensed", "Arial Narrow", Roboto, Arial, sans-serif; /* Swap to narrower variant of Roboto for skinnier windows/screens */
}
}

/* ===DEFINITION LIST WITHIN TABLE CELL=== */
#primary td dl {
    border-radius: 0;
    margin: 1vw;
}

#primary .wpb_text_column td dl:last-child { /* This overrides a WPBakery style that keeps zeroing out the bottom margin */
    margin-bottom: 1vw;
}
#primary td dt {
    font-size: 1em;
    padding: 4px;
    background-color: #efefef;
}

#primary td dd {
    font-size 1em;
    margin: 0px;
    padding: 4px;
}

/* ======WPBAKERY STYLE EDITS====== */
/* Be careful here--the style names are not self-explanatory and often do not match the name in the UI */
/* ===WPBakery cards=== */


/* ======CUSTOM STYLES====== */
/* ===Custom WPBakery card image styles=== */

.card-custom-icon {
    max-height: 49.566px;
    margin-top: 1.25rem;
    margin-left: auto;
}

.card-custom-image {
    width: 100%;
    height: 100%;
}

.card-custom-padded-image {
    padding: 1.25em;
}

/* Fix DEP and other logos that run against the edges of cards */
.CardPadImage {
    padding: 2em;
}

/* Reduced and padded card logo, do not use with horizontal card! */
.CardReducedImage {
    padding: 2em;
    width: 65%;
    height: 65%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Custom image styles */
.svg-img {
    width: 100% !important;
    height: 100% !important;
}

/* WPBakery message/information boxes */
/* Font settings for ALL boxes */
.vc_color-info.vc_message_box, .vc_color-warning.vc_message_box, .vc_color-danger.vc_message_box, .vc_color-success.vc_message_box {
    color: black;
    font-size: 0.9em;
}

.vc_color-info.vc_message_box {
    border-color: #39BDC7;
}

.vc_color-warning.vc_message_box {
    border-color: #FDB813;
}

.vc_color-danger.vc_message_box {
    border-color: #ED1C24;
}

.vc_color-success.vc_message_box {
    border-color: #69AB43;
}

/* ===Custom Tables== */
/* Table with custom styles for symbols */
.TableInline {
    margin-left: 6px;
}

.TableYear {
    text-align: right;
    color: #244F71;
    font-weight: bold;
    padding-right: 12px;
    width: 8em;
}

.TableKey {
    /*Styled like WPBakery cards*/
    display: block;
    float: right;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
    padding: 0.5rem;
    margin-bottom: .75rem; /*This keeps it from coming too close to the next object */
    background-color: white;
    border: 1px solid #dfdfdf; 
    border-color: rgba(0,0,0,.125);
    border-radius: 0rem;
    font-size: 0.9rem;

}

.TableKey::before {
    content: "Symbol Key. ";
    font-style: oblique;
    color: #244F71;
}

/* Staff directory and/or multi-level table */
#primary .table-section1 {
    background-color: #244F71;
    padding-left: 1em;
    font-size: 1.5em;
    color: white;
}

#primary .table-section2 {
    background-color: #768A88;
    background-color: rgba(82,106,82,.25);
    padding-left: 1.5em;
    font-size: 1.25em;
    font-weight: 500;
}

#primary .table-section2 * {
    color: black;
}

#primary .table-section3 {
    background-color: none;
    border-bottom: 2px solid black;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-weight: 400;
    font-size: 0.9em;
    padding-left: 2.5em;
}

#primary .table-section3 * {
    color: black;
}

/* Staff directory tables*/

#primary .table-title, #primary .table-title-staff, #primary .table-title-admin, #primary .table-title-office {
    font-family: Roboto,"Helvetica Neue", Arial, sans-serif;
    text-align: left;
    font-weight: 500;
    caption-side: top;
    padding-left: 1em;
}

#primary .table-title {
    background-color: #0189B2;
    color: white;
}

#primary .table-title h1, #primary .table-title h2, #primary .table-title h3, #primary .table-title h4, #primary .table-title h5, #primary .table-title h6 {
    background-color: #0189B2;
    font-size: 1.25em;
    font-size: calc(1.25em + 0.25vw);
    color: white;
}


#primary .table-title-staff {
    background-color: #E7DAAC;
    background-color: rgba(253,185,19,.4);
    color: black;
    font-size: 1.5em;
}

#primary .table-title-admin {
    background-color: #387C2B;
    background-color: rgba(56,124,43,.9);
    color: white;
    font-size: 1.5em;
}

#primary .table-title-office {
    background-color: #244F71;
    color: white;
    font-size: 1.5em;
}

#primary .table-title::before, #primary .table-title-admin::before, #primary .table-title-office::before, #primary .table-title-staff::before {
    content: none;
}

#primary .staff-name, #primary .reviewer-range {
    width: auto;
    text-align: left;
    font-weight: normal;
    background-color: white;
    padding-left: 1.25em;
    font-size: 1em;
    font-size: calc(1em + 0.25vw)
}


#primary .staff-contact, #primary .reviewer-name {
    min-width: 14ch;
    width: 30%;
    max-width: 50%;
    text-align: center;
    font-weight: bold;
    background-color: white;
    color: #244F71;
    font-size: 1em;
    font-size: calc(1em + 0.5vw);
    letter-spacing: 0.05vw;
}

#primary .reviewer-range {
    font-size: calc(0.9em + 0.1vw);
}

#primary .reviewer-range ol, #primary .reviewer-range ul {
    padding-left: 1.1em;
    font-weight: normal;
    font-size: calc(0.8em + 0.1vw);
}

#primary .reviewer-name {
    font-size: calc(1em + 0.1vw);
    text-align: left;
}

#primary .reviewer-name ol, #primary .reviewer-name ul {
    margin-left: 1.1em;
}

#primary .reviewer-name li, #primary .reviewer-name li {
    text-align: left;
}   

#primary .agency-subsection {
    color: white;
    background-color: #39BDC7;
}

#primary .agency-subsection h5 {
    color: white;
}

/* ===Callout Boxes=== */
/* Base callot box styles */
.hpo-callout-box-gold, .hpo-callout-box-paleblue, .hpo-callout-box-chartreuse, .hpo-callout-box-lightred, .hpo-callout-box-tan {
/* Main colors/content formatting */
    background-color: white; /*Fallback color for older browsers*/
    color: black;
/* Padding/margins */
    padding: 1em;
    padding: calc(0.75em + 0.5vmax);
    margin-top: 0px; /*32px;*/
    margin-bottom: 32px;
    margin-left: 3px;
    margin-right: 5px;
/* Main border settings */
    border: 1px solid black;
    border-radius: 6px;    
/* Faux 3D effect */
    box-shadow: 3px 4px 7px 2px rgba(0, 0, 0, 0.25); /*Was 3px 5px 15px 1px rgba(0, 0, 0, 0.25); */
}

/* Callout box fill/border/gradient colors */

.hpo-callout-box-gold {
    background-image: linear-gradient(to bottom right, white, #FFEDC4);
    border-color: #FDB813; /*DO NOT add a RGBA version with transparency if using a gradient! */
}

.hpo-callout-box-paleblue {
    background-image: linear-gradient(to bottom right, white, #CEE5E5);
    border-color: #9DCBCB; /*DO NOT add a RGBA version with transparency if using a gradient! */
}

.hpo-callout-box-chartreuse {
    background-image: linear-gradient(to bottom right, white, #E5EFB8);
    border-color: #B5D134; /*DO NOT add a RGBA version with transparency if using a gradient! */
}

.hpo-callout-box-lightred {
    background-image: linear-gradient(to bottom right, white, #F9B0B2);
    border-color: #ED1C24;
}

.hpo-callout-box-tan {
    background-image: linear-gradient(to bottom right, white, #E7DAAC);
    border-color: #E7DAAC;
}

/* Tweaks to elements inside callout boxes */

/* Callout box headings */
.hpo-callout-box-nobox h2, .hpo-callout-box-gold h2, .hpo-callout-box-paleblue h2, .hpo-callout-box-chartreuse h2, .hpo-callout-box-lightred h2, .hpo-callout-box-tan h2 {
    font-family: "Roboto", "Calibri", "Arial", sans-serif;
    font-weight: 700;
    font-size: 3.75em; /*fallback size, if needed*/
    font-size: calc(2em + 2vw);
}

.hpo-callout-box-nobox h3, .hpo-callout-box-gold h3, .hpo-callout-box-paleblue h3, .hpo-callout-box-chartreuse h3, .hpo-callout-box-lightred h3, .hpo-callout-box-tan h3 {
    font-family: "Roboto", "Calibri", "Arial", sans-serif;
    font-weight: 700;
    font-size: 2.5em;
}

.hpo-callout-box-nobox h4, .hpo-callout-box-gold h4, .hpo-callout-box-paleblue h4, .hpo-callout-box-chartreuse h4, .hpo-callout-box-lightred h4, .hpo-callout-box-tan h4 {
    font-family: "Roboto", "Calibri", "Arial", sans-serif;
    font-weight: 500;
    font-size: 2em;
}

.hpo-callout-box-nobox h5, .hpo-callout-box-gold h5, .hpo-callout-box-paleblue h5, .hpo-callout-box-chartreuse h5, .hpo-callout-box-lightred h5, .hpo-callout-box-tan h5 {
    font-family: "Roboto", "Calibri", "Arial", sans-serif;
    font-weight: 500;
    font-size: 1.375em;
}

/* Images/captions inside callout boxes*/
.hpo-callout-box-nobox figcaption, .hpo-callout-box-gold figcaption, .hpo-callout-box-paleblue figcaption, .hpo-callout-box-chartreuse figcaption, .hpo-callout-box-lightred figcaption, .hpo-callout-box-tan figcaption {
    color: black;
    color: rgba(0,0,0, 0.75);    
}

/* Quotes inside callout boxes */
#primary .hpo-callout-box-nobox blockquote, #primary .hpo-callout-box-gold blockquote, #primary .hpo-callout-box-paleblue blockquote, #primary .hpo-callout-box-chartreuse blockquote, #primary .hpo-callout-box-lightred blockquote, #primary .hpo-callout-box-tan blockquote {
    color: black;
    /*border: 1px solid white;*/
    border-style: none;
    border-radius: .25rem;
    padding: 0;
    padding-left: 5em;
    padding-right: 5em;
    display: block;
    position: relative;
    background-color: rgba(255,255,255, .75);
}

#primary .hpo-callout-box-nobox blockquote::before, #primary .hpo-callout-box-gold blockquote::before, #primary .hpo-callout-box-paleblue blockquote::before, #primary .hpo-callout-box-chartreuse blockquote::before, #primary .hpo-callout-box-lightred blockquote::before, #primary .hpo-callout-box-tan blockquote::before {
    color: rgba(118, 138, 136, .25);
    font-size: 8em;
    font-family: "Roboto Slab", Georgia, Serif;
    content: open-quote;
    vertical-align: text-top;
    position: absolute;
    margin-left: -0.375em;
    margin-top: -0.625em;
    /*text-shadow: 1px 1px 3px rgba(0,0,0, .25);*/
}

#primary .hpo-callout-box-nobox blockquote::after, #primary .hpo-callout-box-gold blockquote::after, #primary .hpo-callout-box-paleblue blockquote::after, #primary .hpo-callout-box-chartreuse blockquote::after, #primary .hpo-callout-box-lightred blockquote::after, #primary .hpo-callout-box-tan blockquote::after {
    color: rgba(118, 138, 136, .25);
    font-size: 8em;
    font-family: "Roboto Slab", Georgia, Serif;
    content: close-quote;
    vertical-align: text-bottom;
    position: absolute;
    bottom: 0px;
    right: 0px;
    margin-right: -0.125em;
    margin-bottom: -1em;
    /*text-shadow: 1px 1px 3px rgba(0,0,0, .25);*/
}

/* Definition lists in callout boxes */
#primary .hpo-callout-box-nobox dl, #primary .hpo-callout-box-gold dl, #primary .hpo-callout-box-paleblue dl, #primary .hpo-callout-box-chartreuse dl, #primary .hpo-callout-box-lightred dl, #primary .hpo-callout-box-tan dl {
    /*box-shadow: inset 1px 1px 5px rgba(0,0,0,.25);*/
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.125);
    /*border-color: rgba(0,0,0,.2);*/
}

#primary .hpo-callout-box-nobox dt, #primary .hpo-callout-box-gold dt, #primary .hpo-callout-box-paleblue dt, #primary .hpo-callout-box-chartreuse dt, #primary .hpo-callout-box-lightred dt, #primary .hpo-callout-box-tan dt {
    background-color: #f5f5f5;
}

#primary .hpo-callout-box-nobox dd, #primary .hpo-callout-box-gold dd, #primary .hpo-callout-box-paleblue dd, #primary .hpo-callout-box-chartreuse dd, #primary .hpo-callout-box-lightred dd, #primary .hpo-callout-box-tan dd {
}

/* Make card stand out slightly from callout boxes */
.hpo-callout-box-gold .card-body, .hpo-callout-box-paleblue .card-body, .hpo-callout-box-chartreuse .card-body, .hpo-callout-box-lightred .card-body, .hpo-callout-box-tan .card-body {
    box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.125);  
}

/* Stylized callout text, optionally used within boxes */
.hpo-callout-text p, .hpo-callout-text li {
    font-size: 1.125em;
    line-height: 1.5em;
}

.hpo-callout-text ol, .hpo-callout-text ul, .hpo-callout-text li {
    font-size: 1.125em;
    line-height: 1.5em;
}


.hpo-callout-text p {
    hyphens: auto;
}

.hpo-intro-paragraph p, .hpo-intro-nodrop p {
    font-size: 1.125em;
    hyphens: auto;
}

.hpo-intro-paragraph li, .hpo-intro-nodrop li {
    font-size: 1.125em;
}

.hpo-intro-paragraph p::first-line, .hpo-intro-nodrop p::first-line {
    font-size: 1.375em;
    line-height: 1.5em;
    text-indent: 1em;
    color: #244F71;
    font-family: "Roboto", "Calibri", "Arial", sans-serif;
    font-weight: 500;
}

.hpo-intro-paragraph p::first-letter {
    font-size: 2.5em;
    font-weight: bold;
    /*padding-right: 0.1em;*/
}

/* ==WPBakery custom post grid styles== */
/* Custom Post Grid styles */
.hpo-postgrid-container, .hpo-postgrid-container-important, .hpo-postgrid-container-pinned { /* Apply to WPBakery Row elements that contain post grids we want to visually separate from the surrounding content */
    padding: 1.25rem;
    padding-bottom: .25rem;
    /* padding-bottom: 0.5rem; */
    margin: 1px;
    margin-bottom: 2em; /*This keeps it from coming too close to the next object */
    background-color: white;
    border: 1px solid #dfdfdf; 
    border-color: rgba(0,0,0,.125);
    border-radius: .25rem;
}

/* Boxes for displaying condensed notices in card-like boxes */
.hpo-postgrid-container-important { /* Apply to WPBakery Row elements that contain post grids we want to visually separate from the surrounding content */
/*    background-color: hsl(358, 85%, 95%);
    border-color: rgba(237,28,36,0.5);*/
    /*background-color: hsl(70.7,63.1%,75%);
    border-color: rgba(56, 124, 43, 0.25); Removed custom border/background after reverting to white box */
}

.hpo-postgrid-container-pinned { /* Apply to WPBakery Row elements that contain post grids we want to visually separate from the surrounding content */
/*    background-color: hsl(42, 98%, 93%);
    border-color: rgba(129,107,60,0.5);*/
/*    background-color: #387C2B;
    border-color: rgba(0, 0, 0, 0.125); Removed custom border/background after reverting to white box */
}

/* Created 2024, fix corners of top image not getting cropped by post grid's rounded corners */
.rounded-post-grid {
    overflow: hidden;
    border-collapse: separate; 
}

.rounded-top-image {
    border-radius: 5px 5px 0 0;
}

/* Style specific elements */
#primary .postgrid-excerpt p {
    font-size: calc(0.8em + 0.5cqw) !important;
}

/*==Turn a 2-column row into a fake horizontal card. Assumed setup is with a stanalone icon in the left column, then content in the right.== */
.faux-horizontal-card {
    display: block;
    padding-left: 0px;
    padding-right: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    margin: 0px;
    margin-bottom: 2em; /*This keeps it from coming too close to the next object */
    background-color: white;
    border: 1px solid #dfdfdf; 
    border-color: rgba(0,0,0,.125);
    border-radius: .25rem;
    box-sizing: border-box;
}

.faux-horizontal-card .card-icon {
    height: 48px;
    padding-bottom: 0.75em;
}

.faux-horizontal-card .vc_column-inner {
    padding: 0px;
    padding-left: 1.25rem; /*For single-column on mobile*/
}

.faux-horizontal-card p {
    min-height: 2.75em;
}

.faux-horizontal-card .card-button {
    margin-bottom: 0px;
    margin-right: 0px;
}

.faux-horizontal-card .wpb_content_element {
    margin: 0px;
}

/* Container for post widgets on home page or a specific section */
#HomeFeedsBox {
/*    background-color: #F3F0EF; */
    padding: 12px;
}

#HomeFeedsBox .vc_general { /* This affects any standalone buttons in this Section */
    margin-right: 3px;
}

.FeedHeading {
    color: #244F71;
    font-weight: bold;
    font-style: normal;
    font-size: 1.2em;
    font-size: calc(1em + 0.25vw);
}

.FeedDate {
    color: #41678a;
    font-style: normal;
    font-size: 0.9em;
}

.FeedHighlight {
    font-size: 1.2em;
}

.FeedExcerpt {
    font-size: 0.9em;
}

.FeedCategories {
    font-size: 0.8em;
}

/* Text overlaying a post's featured image thumbnail */

.CardOverlayTitle h4 {
    font-size: calc(1em + 0.15vw) !important;
}

/* Highlight v2 card */
.HighlightOverlayTitle h4 {
    font-size: calc(1em + 0.75vw) !important;
}

/* Legal Notices box text */
.legal-notices-title h4::before {
    content: "▪";
    display: inline-block;
    padding-right: 0.5em;
    font-size: 1em;
    text-wrap: wrap;
}

.legal-notices-title h4 {
    text-indent: -0.5em;
    padding-left: 1em;
    font-size: calc(1em + 0.15vw) !important;
}

.legal-notices-date {
    padding-left: calc(1em + 0.15vw);
    font-size: 0.9em;
}

.hpo-postgrid-container-pinned h4, .hpo-postgrid-container-pinned .legal-notices-date div {
    /*color: white !important; Removed after changing to more neutral background */
}

/* Improve contrast for Post Grid filter items */

.vc_grid-filter>.vc_grid-filter-item { /* Set a default background for all filter items. */
    background-color: white;
    border: 1px solid rgba(0,0,0,.125);
}

.hpo-postgrid-container .vc_grid-filter>.vc_grid-filter-item, .vc_tta-panels-container .vc_grid-filter>.vc_grid-filter-item { /* Set a different background for all filter items within class .hpo-postgrid-container. or a panel-type widget*/
    background-color: rgba(0,0,0,.05);
    border: none;
}

.hpo-postgrid-recessed .vc_grid-filter>.vc_grid-filter-item { /* Set a default background for the shaded background used in the publication/media preview Post Grids. */
    background-color: white;
    border: 1px solid rgba(0,0,0,.125);
}

.vc_grid-filter.vc_grid-filter-color-grey>.vc_grid-filter-item.vc_active { /* Edit color of pill shape around selected filter item */
    background-color: #565656;
}

.vc_grid-filter.vc_grid-filter-color-grey>.vc_grid-filter-item.vc_active>span { /* Edit text within selected filter item */
    font-weight: bold;
    color: white;
}

.vc_grid-filter.vc_grid-filter-color-grey>.vc_grid-filter-item:hover { /* Edit color of pill shape around hover filter item */
    background-color: #9DCBCB;
}

.vc_grid-filter.vc_grid-filter-color-grey>.vc_grid-filter-item:hover>span { /* Edit text within hover filter item */
    color: black;
}

/*===Recreate the banner overlay using a WPBakery row===*/
/* Button background: rgb(0, 123, 255)*/
/* At 60% saturation: #65afff */
/* At 40% saturation: #99caff */

#primary .banner-section {
    min-height: 750px;
}

#primary .banner-section .wpb_content_element {
    margin-bottom: 0;
}

#primary .banner-overlay {
    padding-bottom: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: 24px;
    color: white;
    background-color: black;
    background-color: rgba(0,0,0,0.5); /* Was 0.4 */
}

#primary .banner-overlay h2 {
    font-family: "Roboto Slab", serif;
    text-align: center;
    color: white;
}

#primary .banner-overlay p {
    text-align: center;
    text-wrap: balance;
}

#primary .banner-overlay ul, #primary .banner-overlay ol {
    margin-left: 10vw;
    margin-right: 10vw;
}

#primary .banner-overlay p a:link, #primary .banner-overlay li a:link {
    color: hsl(211.18, 100%, 90%) !important;
    /*color: #99caff; Old/base*/
}

#primary .banner-overlay li {
    padding-bottom: 0.5em;
    text-wrap: pretty;
}

#primary .banner-overlay ul li::marker {
    color: #99caff;
}

/* Buttons in banner */

/* Apply button-container ID to a ul, with links as li */
#primary #button-container { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#primary #button-container ul {
    padding-left: 0;
    margin-left: 1.5rem; /* To re-center from margin-right padding added by template button styles */
    display: contents;
    list-style-type: none;
    list-style-position: inside !important;
}

#primary #button-container li {
    list-style: none;
    display: block;
    text-align: center;
    padding: none;
    margin: none;
    text-wrap: normal !important;
    text-wrap-style: normal !important;
}

#primary .banner-overlay .banner-button {
    text-align: center;
}

#primary #button-container li a:link, #primary #button-container li a:visited { /* Change default and visited button text color within our custom banner ID */
    color: white !important;
    text-decoration: none;
}

.btn-primary { /* Enable if needed. Changes the default button state to a darker color until the template gets updated to a darker combo. */
/*	background-color: #00669d; */ 
/*	border-color: #00669d; */ 
/*	box-shadow: 0 0 0px 2px white; */ 
}

/*All buttons in banner*/

#primary .banner-overlay .banner-button a { /* Add vertical spacing between buttons in mobile/narrow views */
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

#primary .banner-overlay .banner-button a::last { /* Add vertical spacing between buttons in mobile/narrow views */
    margin-bottom: 0;
}

/* Caption in banner, TBD if keeping */
#primary .banner-caption {
    padding-top: 0.8em;
    color: white;
    font-size: 0.8em;
    font-weight: 500;
    text-wrap: balance;
}

#primary .banner-caption a {
    color: hsl(211.18, 100%, 90%) !important;
    text-decoration: underline;
    /*color: #99caff; Old/base*/
}

#primary .banner-overlay footer {
    color: white;
    font-size: 0.9em;
    text-align: center;
    padding-top: 0.75em;
}

#primary .banner-overlay footer a {
    color: hsl(211.18, 100%, 90%) !important;
    text-decoration: underline;
}

#primary .banner-overlay p a {
    color: hsl(211.18, 100%, 90%);
    text-decoration: underline;
    /*color: #99caff; Old/base*/
}

#primary .banner-overlay cite {
    color: silver;
}

#primary .banner-overlay dfn {
    color: hsl(70.7, 63.05%, 80%) !important;
}

/* Banner caption underneath */

#primary #banner-caption-row {
    margin-top: 0;
    padding-top: 0.5rem;
}

#primary .banner-caption-under {
    font-size: 0.8rem;
    font-weight: 400;
    text-wrap: pretty; /* This is for better display on mobile */
    text-align: justify;
    text-align-last: center;
    hyphens: auto;
}

/* Make "Back to top" text darker so it doesn't fail contrast tests */
#myBtn {
    color: #565656;
}