* {
  box-sizing: border-box;
}

/* html {
  scroll-behavior: smooth;
} */

/* set system variables */
/* usage: var(--cbr--expand--border)*/
:root {
  --cbr-color: #024c63;
  --cbr-text: #000000;
  --cbr-hov-color: #21687d;
  --cbr-spec-tools: #9fc6d4;
  --cbr-nav-bg: #f6fefe; /*#f6fefe; fafafa */
  --cbr-navlink: #015D79;
  --cbr-dark: #01394a;
  --cbr-darkest: #002934;
  --cbr-footer-darkest: #012d3a;
  --cbr-link: #027CA2; /* #0280A7 meets WRIA 4.5 contrast with black and white not nav-bg https://webaim.org/resources/contrastchecker/ */
  --cbr-graygreen: #e4e9e8;
  --cbr-ltgraygreen: #d4d8d7;
  --cbr-tan: #f4f1e7;
  --cbr-green: #edf5ee;
  --cbr-putty: #eeefe9;
  --cbr--expand--bg: #f7f7f7;
  --cbr--expand--border: #cbcbcb;
  --cbr-darkestgray: #333333;
  --cbr-darkgray6: #666666;
  --cbr-darkgray: #999999;
  --cbr-warmgray: #6a6969;
  --cbr-bluegray: #dde9ed;
  --cbr-bluegray-border: #bbc8cd;
  --cbr-navmenu-dropnborder: #71acbd;
  --cbr-footer-alt1: #ccf5f5; /* rgb(204, 245, 245) */
   --cbr-footer-link: #b8e8e8; /*   color: rgb(184, 232, 232);*/
	--cbr-footer-alt: #ebfafa; /*     color: rgb(235, 250, 250); */
	--cbr-test: #c933d6;
  }

/** fonts and weights
 * font-family: 'Alegreya SC', serif;
 * https://fonts.google.com/specimen/Alegreya+SC?query=alegreya
 * 400 = regular
 * 500 = medium
 * 700 = bold
 * font-family: 'Alegreya', serif;
 * 400 = regular
 * 500 = medium
 * 600 = semibold
 * 700 = bold
 * Lucida Sans only 400 and 600
 * Roboto 400, 500, 700, 900
**/

/* Style the body */

.notdone {
background-color: pink
}

ul.two {
column-count: 2;
column-gap:20px;
}
ul.two li{
  padding:2px;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
  /*line-height: 1.5;*/ /* accessibility from MDN */
  color: #000; /* default text black */
}

h1 {
  margin-top: 0;
  font-size: 1.8rem;
  font-weight: 800;
  padding-bottom: 5px;
}

h2 {
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: 600;
  padding-bottom: 5px;
}

/* landing page, styled as h1 */
.page-node-type-navmenu-landing-page h1#pageTitle
{
    margin-top: 0 !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    padding-bottom: 5px !important;
}

/* default pages, styled as h2 */
.page-node-type-basic-centered-page h1#pageTitle,
.page-node-type-app h1#pageTitle,
.section-analysis h1#pageTitle,
.section-dart h1#pageTitle,
.section-tools h1#pageTitle,
.section-trends h1#pageTitle
{
    margin-top: 0 !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    padding-bottom: 5px !important;
}

/* hack for search results because I can't figure out custom twig location*/
/* default from core is "h2", I want h3 styling */
h3,
#search-page h2 {
  margin-top: 0;
  font-size: 1.3rem;
  font-weight: 600;
  padding-bottom: 0.25em;
  padding-top: 0.5em;
/*
  line-height: 1.6;
*/
}

/* inseason result pages, can we make it better ??? */
h3 + h3 {
  padding-top: 0em;
}
h4 {
  /*margin-top: 0;*/
  font-size: 1.2rem;
  font-weight: 500;
  padding-top: 5px;
  padding-bottom: 5px;
}
h5 {
  /*margin-top: 0;*/
  font-size: 1.1rem;
  font-weight: 500;
  padding-top: 8px;
  padding-bottom: 5px;
}
h6, .h6 {
  font-size: 1rem;
  font-weight: 400;
}

h3.sitemap {
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
}

/* display,margin are crossed out when "inspect" due to using in conjunction with hN */
/* for use on About section pages only */
h2.about_section_heading,
h3.about_section_heading,
h4.about_section_heading {
/*  display: block;
  margin: 0;*/
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: "Alegreya SC", serif;
  border-bottom: 1px solid var(--cbr--expand--border);
}

/* for use on Nav Menu Landing pages only */
h2.section_heading,
h3.section_heading,
h4.section_heading {
  font-family: "Alegreya SC", serif;
}
/* for use on Nav Menu Landing pages only */
h2.box_section_heading,
h3.box_section_heading,
h4.box_section_heading {
  display: block;
  margin: 0;
  padding-left: 1em;
  font-family: "Alegreya SC", serif;
}

h2.cbr_hdr_uline,
h3.cbr_hdr_uline,
h4.cbr_hdr_uline {
  border-bottom: 1px solid var(--cbr--expand--border);
}

h2#querynotes,
h3#querynotes,
h4#querynotes,
h5#querynotes {
  /*mimic h5*/
  font-size: 1.1rem;
  font-weight: 500;
  padding-top: 8px;
  padding-bottom: 5px;
}

h2.neutral,
h3.neutral,
h4.neutral,
h5.neutral {
  /*mimic h4*/
  font-size: 1.2rem;
  font-weight: 500;
  padding-top: 5px;
  padding-bottom: 5px;
}

body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1.5; /* accessibility from MDN */
  color: #000; /* default text black */
  margin: 0;
  position: relative;
  font-weight: 400;
}

/* small text */
.small 
{
font-size: 0.9rem;
}

/* extra small text */
.xsmall 
{
font-size: 0.8rem;
}

/* larger text */
.larger
{
font-size: 1.2rem;
}

.float-left {
  margin-top: 0;
  float: left;
  padding-right: 20px;
}

p {
  padding-top: 5px;
margin-bottom: 15px;
  line-height: 1.5; /*accessibility from MDN */
/*
	max-width: 100%;
*/
}

/* https://webaim.org/resources/contrastchecker/ link color with white bg and black surrounding*/
a,
a:link,
a:visited {
  color: var(--cbr-link);
  text-decoration: none;
}

a:hover { 
  text-decoration: underline;
  color: var(--cbr-link);
}
/* section heading is the link */
/* used Status & Trends landing page */
a.section_heading_link,
a.section_heading_link:link,
a.section_heading_link:visited {
  color: black;
  text-decoration: none;
}

a.section_heading_link:hover { 
  text-decoration: underline;
  color: black;
}

button.tagline {
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 1rem;
  border: 2px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.152);
  padding: 10px;
}
.tools {
  color: #ffffff;
}

/*
a.link {
  color: var(--cbr-dark);
  font-size: 0.9rem;
}
*/

.nav-link {
  color: var(--cbr-navlink);
}
.nav-link:hover { 
  text-decoration: underline;
  color: var(--cbr-link);
}
.cbr-crumb {
  margin-left: auto;
  margin-right: auto;
}

.cbr-crumb {
  justify-content: center;
  padding: 5px 18px;
  max-width: 1200px;
}

/* mod 2025 for accessibility */
.cbr-crumb-light {
  background-color: #FAFAFA; /*#eeeeee;*/
  padding: 2px 31px;
  border-radius: 3px;
  /* border ? matches #cbrforms .form-actions*/
  /*border: 1px solid #ddd;*/
  border: 1.5px solid #ccc;
}

/* like cbr-crumb-light, minimal padding, used in query results */
.cbr_results_section {
  background-color: #eeeeee;
  border-radius: 3px;
  padding-left: 3px;
  padding-bottom: 3px;
  /* border ? matches #cbrforms .form-actions*/
  border: 1px solid #ddd;
}

.caret{
  background-image:url("/cbr_img/angle_right_icon.png");
  background-repeat: no-repeat;
  background-size: 16px auto;
  background-position: right 3em center;
}

/* Column container */
main {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 3px solid #fcfbfb;
}

main#basicPageCbr {
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  border-bottom: 3px solid #fcfbfb;
}

#basicPageCbr div.views-element-container {
  margin: auto;
  width: 100%;
  max-width: 900px;
  padding: 10px 20px 30px 20px;
}
  
section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex: 100%;
}


/* Main column */

.content {
  flex: 70%;
  padding: 10px 30px 30px 30px;
}

.content_page {
  flex: 1;
  padding: 0px 30px 30px 30px;
}

.basicContent {
  flex: 1;
  padding: 0;
}

.genAud {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.genAudLandContent {
  display: block;
  max-width: 1200px;
  width: 100%;
  padding: 10px 20px 30px 20px;
}

.genAudContent {
  display: block;
  max-width: 1200px;
  padding: 10px 20px 30px 20px;
}

.cbrBlockAfterContent {
  display: block;
  max-width: 1000px;
  width: 100%;
  margin-bottom: 5px;
}

.genPageContent {
  flex: 70%;
  max-width: 1200px;
  padding: 10px 30px 30px 30px;
    width: 100%;
    min-height: 300px;

}

.genPageMinContent {
  flex: 70%;
  max-width: 800px;
  padding: 10px 30px 30px 30px;
    width: 100%;
    min-height: 300px;

}

.row-people-pics {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 20px;
}

.gallery_CBR {
  flex-wrap: wrap;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
}

.people-card {
  font-family: "Alegreya SC", serif;
  vertical-align: top;
  width: fit-content;
  padding: 10px;
  margin: 0;
  /* background-color: #c2e7f8;
border: 2px solid rgb(153, 195, 234); */
}

.people-card img {
  max-width: 150px; /*SLI downsized from 200 so 4 fit in row*/
  padding: 0;
  border-radius: 8px;
}

p.people-card-text {
  color: #0f2030;
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 0;
  padding: 0px 5px 0px 5px;
}

h4.people-hdr {
  color: #0f2030;
  font-size: 1.1rem;
  line-height: 1.5rem;
  font-weight: 500;
  margin: 0;
  padding: 10px 5px 0px 5px;
}

#appPageLayout {
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  padding: 0px;
}

.cbrAppInfo {
  min-width: 400px;
  flex: 1;
}

.cbrAppInfo strong {
}

.cbrAppImg {
  min-width: 200px;
  flex: 1;
}

.cbrAppImg img {
  border: 1px solid grey;
}

.cbrPopup {
  margin-left: 40px;
}

/* START RESEARCH PAGE CSS */

.cbr_research1,
.cbr_research2,
.cbr_research3,
.cbr_research4 {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  flex-direction: row;
  gap: 40px;
  background-color: var(--cbr-graygreen);
  border-radius: 8px;
  padding: 20px 30px 5px;
  margin-bottom: 20px;
  border: 1px solid var(--cbr--expand--border);
}

.cbr_research1 {
  background-color: var(--cbr-graygreen);
}

.cbr_research2 {
   background-color: var(--cbr-tan); 
}

.cbr_research3 {
 background-color: var(--cbr-green);
}

.cbr_research4 {
  background-color: var(--cbr-putty);
}

.cbr_research_hdr {
  margin: 0;
  font-family: "Alegreya", serif;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 700;
  color: #000; /* default text black */
}

.cbr_research_box_text {
  padding: 0;
  margin: 0;
  display: block;
  flex: 1;
  min-width: 47%;
}

.cbr_research_box_img {
  margin: 0;
  display: block;
  flex: 1;
  min-width: 47%;
}

.cbr_researcher {
  font-family: "Alegreya", serif;
  font-size: 1.2rem;
  border-bottom: 1px solid #6a6969;
  margin-bottom: 15px;
}

.cbr_researcher_tags {
  width: 100%;
  border-top: 1px solid #999999;
}

.cbr_researcher_tags a {
  color: #999999 !important;
  font-size: 0.9rem;
  display: inline-block;
  padding: 5px 5px;
}

.cbr_wrap {
  overflow-wrap:  anywhere;
  word-wrap:  anywhere;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

/* 
.cbr_illu_1 {
  margin-top: 20px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
*/
/* prefer this one*/
.cbr_illu_2 {
  margin-top: 0px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.learn_more {
  padding: 30px 10px 0px 10px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.2;
}

/* END RESEARCH PAGE CSS */

/* search */
.search-result { }
.search-snippet-info { }
.search-snippet { }
.search-info { }

/* search end */


/* Start Dart Landing Page Styles */

/* Collapse styles */

ul li .cbr_expand_icon:before,
ul li .cbr_expand_icon:after {
  transition: all 0.25s ease-in-out;
}

.cbr_expand_box {
  transition: all 0.5s ease-in-out;
}

ul.cbr_expand {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
ul.cbr_expand li {
  position: relative;
  margin-top: 10px;
}

.cbr_expand_box {
  position: relative;
  overflow: hidden;
  opacity: 1;
  transform: translate(0, 0);
  z-index: 2;
}

ul.cbr_expand li .cbr_expand_icon {
  position: absolute;
  transform: translate(0, 0);
  margin-top: 25px;
  margin-right: 25px;
  right: 0;
}
ul.cbr_expand li .cbr_expand_icon:before,
ul.cbr_expand li .cbr_expand_icon:after {
  content: "";
  position: absolute;
  background-color: #505050;
  width: 3px;
  height: 9px;
}
ul.cbr_expand li .cbr_expand_icon:before {
  transform: translate(-2px, 0) rotate(45deg);
}
ul.cbr_expand li .cbr_expand_icon:after {
  transform: translate(2px, 0) rotate(-45deg);
}
/*
ul.cbr_expand li input[type="checkbox"] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
*/

/* do we have to duplicate almost everything to make the distinction between single-column 100% span and multi-column don't span ? */
/* edits for two columns, expecting accordion to be char symbol following ahref */
ul.cbr_expand li input[type="checkbox"] {
  position: absolute;
  cursor: pointer;
  width: 10%; /* gah!!!! 100% width will overflow onto second column and obscure ahref */
  height: 60%; /*100%;*/ /* modified to help with overflow onto second column links */
  z-index: 1;
  opacity: 0;
}
ul.cbr_expand li input[type="checkbox"]:checked ~ .cbr_expand_box {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, -1%);
}
ul.cbr_expand li input[type="checkbox"]:checked ~ .cbr_expand_icon:before {
  transform: translate(2px, 0) rotate(45deg);
}
ul.cbr_expand li input[type="checkbox"]:checked ~ .cbr_expand_icon:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

/* expand icon 2 */

ul.cbr_expand li .cbr_expand_icon_2 {
  color: var(--cbr-color);
  font-weight: 500;
  font-size: 0.9rem;
  display: inline;
  position: relative;
  transform: translate(0, 0);
}

/* switched this to icon image in order to have multi-column and keep icon with link
 * the clickable item must be on the same line as the link or it will not work
 * didn't picking up color, but that is "good" since it is separate action from link
 * use with <span class="">&nbsp;&nbsp;&nbsp;&nbsp;</span> see Tools for example
 * needs characters to display over
 * the whole thing is a hack hack hack
 */
ul.cbr_expand li .cbr_expand_icon_plus {
  display: inline;
  position: relative;
  transform: translate(0, 0);
  background-image: url('/themes/custom/cbr/assets/bs-icons/icons/plus-circle.svg');
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 1rem 1rem;
  vertical-align: .125em;
}


/* End Collapse styles */

/* Jump to links */

*/
.cbr_jump_link a {
  padding: 5px 20px;
  color: #000000;
  font-size: 0.9rem;
  line-height: 1.3rem;
  font-weight: 600;
}

.cbr_jumpTo {
  display: block;
  position: relative;
  top: -150px;
}

/* End Jump to links */

/* Responsive Border Boxes */

/* cbr_expand_Center -- centers and flexes content items within */
.cbr_expand_Center {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
  padding: 0px 15px 0px 15px;
}

/* Three responsive box types -- _1 allows children to flex, _2 & _3 do not, _3 assumes 5X width of _2 */

.expand_box_1 {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  flex-direction: row;
  min-width: 200px;
  max-width: 1158px;
}

/*250*/
.expand_box_2 {
  flex: 1;
  min-width: 200px;
  max-width: 1158px;
}
/*250*/
.expand_box_3 {
  flex: 5;
  min-width: 200px;
  max-width: 1158px;
}

/* Creates bottom to container box  */

.cbr_expand_Btm {
  margin: 0;
  display: flex;
  flex: 1;
  background-color: var(--cbr--expand--bg);
  padding: 0px 15px 15px 15px;
  border-bottom: 1px solid var(--cbr--expand--border);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}


.expand_box_top {
  margin: 0;
  display: block;
  flex: 1;
  height: auto;
  background-image: linear-gradient(rgb(5, 101, 130), rgb(3, 69, 90));
  border-radius: 8px;
}

.expand_box_btm {
  margin: 0;
  display: block;
  flex: 1;
  background-color: white;
  padding: 15px;
  border-bottom: 1px solid var(--cbr--expand--border);
  border-left: 1px solid var(--cbr--expand--border);
  border-right: 1px solid var(--cbr--expand--border);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* in use on DART landing page, elsewhere? */
h2.cbr_white_hdr,
h4.cbr_white_hdr,
h3.cbr_white_hdr {
  height: 50px;
  width: 100%;
  z-index: 9;
  margin: 0;
  color: #ffffff;
  font-size: 1.3rem;
  font-family: "Alegreya SC", serif;
  padding: 10px 0 0 17px;
  text-shadow: 0px 0px 20px var(--cbr-color);
}

/* Additional properties -- each item below adds properties to expand boxes */

.cbr_frame_top {
  border-left: 1px solid var(--cbr--expand--border);
  border-right: 1px solid var(--cbr--expand--border);
  border-top: 1px solid var(--cbr--expand--border);
  background-color: var(--cbr--expand--bg);
  border-radius: 8px;
}

.cbr_frame_btm {
  background-color: var(--cbr--expand--bg);
  padding: 0px 15px 15px 15px;
  border-bottom: 1px solid var(--cbr--expand--border);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.cbr_margin {
  margin-top: 20px;
}

.cbr_padding {
  padding: 10px 15px;
}
.cbr_padding_2 {
  padding: 20px 20px;
}

.cbr_expand_100 {
  min-width: 100%;
}

.cbr_border {
  border-radius: 5px;
  border: 1px solid var(--cbr--expand--border);
}

.cbr_bg_white {
  background-color: #fff;
}

.cbr_bg_grey {
  background-color: var(--cbr--expand--bg);
}

.cbr_gap {
  gap: 20px;
}

/* End Additional properties */

.cbr_NavCat {
  padding: 15px 20px 0px 35px;
  margin-right: auto;
  font-family: "Alegreya SC", serif;
  font-size: 1.2rem;
  color: var(--cbr-darkestgray);
}

.cbr_dart_links {
  display: block;
  color: #000000;
  font-size: 0.8rem;
  line-height: 1.3rem;
}

.cbr_dart_links a {
  display: block;
  color: #000000;
  font-size: 0.8rem;
  line-height: 1.3rem;
}
.cbr_dart_links a.cbr_NavCat {
  font-size: 1.2rem;
}

.cbr_data_links a {
  display: block;
  color: var(--cbr-link);
  font-size: 1.0rem; /*0.9rem;*/
  line-height: 1.6rem;
}

/* DART landing and other places */
ul.link_list_topic {
	padding-left:10px;
} 
ul.link_list_topic li {
    font-size: 0.9rem !important;
    line-height: 1.5;
    font-weight: 400;
}
ul.link_list_topic li:not(:last-child) {
    margin-bottom: 10px;
}

ul.link_list_topic,
ul.link_list,
ul.link_list_none {
	color: var(--cbr-link);
}
ul.link_list_none {
	list-style-type:none;
}  
ul.link_list,
ul.link_list_none li {
  line-height: 1.5rem;
}
/* didn't work unless I specific not last each time*/
ul.link_list li:not(:last-child),
ul.link_list_none li:not(:last-child) {
    margin-bottom: 8px;
}

/* start override bootstrap carousel */
.carousel-control-prev-icon {
    background-image: url(/img/prev.png);
}
.carousel-control-next-icon {
    background-image: url(/img/next.png);
}
/* change long dashes to dots */
.carousel-indicators button {
    height: 10px !important;
    width: 10px !important;
    margin: 0 3px !important;
    border-radius: 100%;
    background-color: #333333 !important;
}
/* end override bootstrap carousel */

.cbr_section_hdr {
  padding: 15px 20px 10px 0px;
  margin-right: auto;
  font-family: "Alegreya SC", serif;
  font-size: 1.2rem;
  /*color: #292f39;*/ /*not readable*/
}

p.cbr_center {
  text-align: center;
}

.cbr_expand_img {
  border: 1px solid var(--cbr--expand--border);
  width: 100%;
  border-radius: 5px;
}

/* Hover images -- Styles for image hover effect */

.cbr_img_scale {
  height: 50px;
  flex: 1;
  min-width: 250px;
  max-width: 1158px;
  border-radius: 5px 5px 0px 0px;
  background-image: linear-gradient(rgb(5, 101, 130), rgb(3, 69, 90));
  /* overflow: hidden; */
}

.cbr_img_scale h2 {
  /* position: absolute; */
  height: 80px;
  width: auto;
  z-index: 9;
  margin: 0;
  color: #ffffff;
  font-size: 1.2rem;
  font-family: "Alegreya SC", serif;
  padding: 10px 0 0 17px;
  text-shadow: 0px 0px 20px var(--cbr-color);
}

.cbr_img_scale_BG {
  top: 0;
  left: 0;
  max-width: 100%;
  background-position: center;
  transition: 1s;
  opacity: 0;
}

/* .cbr_img_scale_BG:hover,
p:hover + .cbr_img_scale_BG {
  opacity: 0;
  transform: scale(1.1);
  transition: 1s;
} */

/* End Hover images */

/* One style for Analysis _ Tools Landing Page */

.cbr_tool_links {
  display: block;
  font-size: 1.0rem;
  line-height: 1.3rem;
}
.cbr_tool_links a {
  display: inline;
  font-size: 1.0rem;
  line-height: 1.5rem;
}

/* Start People Page Styles */

.cbr_people_img {
  border: 1px solid var(--cbr--expand--border);
/*
  max-width: 180px; YES ? NO ?
*/
  border-radius: 5px;
  margin-bottom: 5px;
}

a.cbr_people_name {
  display: block;
  margin: 0;
  padding: 7px 0px 11px 0px;
  color: #292f39;
  font-family: "Alegreya SC", serif;
  font-size: 1.2rem;
  font-style: normal;
  line-height: 1rem;
}

.people_title {
  color: #0f2030;
  font-size: 1rem;
  line-height: 1.5rem;
  padding-bottom: 30px;
}

/* End People Page Styles */

/* Start People Bio Page Styles */

.cbr_people_img_2 {
  max-width: 200px;
  border: 1px solid var(--cbr-bluegray-border);
  border-radius: 5px;
}

.cbr_people_bgcolor {
  background-color: var(--cbr-bluegray);
  border: 1px solid var(--cbr-bluegray-border);
  border-radius: 5px;
}


/* used on People individual staff pages, extra space between list items since no decoration*/
ul.people-list {
	list-style-type:none;
} 
ul.people-list li {
	padding-top: 10px;
}
ul.people-list li:not(:last-child) {
	padding-top: 10px;
    margin-bottom: 1px;
}

.people-desc {
  padding: 5px 0px 0px 10px;
font-size: 1.1rem;
}
.people-desc-title {
  padding: 10px 0px 0px 10px;
font-weight: bold;
font-size: 1.2rem;
}

/* End People Bio Page Styles */

/* Start About Page Styles */

.about_box {
  flex: 1;
}

.about_box p {
  text-align: left;
}

.cbr_page_width {
  max-width: 75%;
}

.page_width_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
}
/* constrant page width General Audience pages */
.page_width_center {
  display: block;
  max-width: 800px;
  width: 100%;
}

.landing-desc {
  display: block;
  /*max-width: 800px;*/
  width: 100%;
  font-size:.9rem;
  border-top: 3px solid var(--cbr-spec-tools);
  border-bottom: 3px solid var(--cbr-spec-tools);
  margin-bottom: 20px;
  padding: 3px 10px;
}
/* constrant page width General Audience pages */
/* special case for people page */
.people_width_center {
  display: block;
  max-width: 900px;
  width: 100%;
}

.text_black {
color: black important!;
}

/* DATA/DART query pages and output, not specific to query forms */

/* https://tigger.cbr.washington.edu/dart/query/adult_hrt */
/* okay if single line in help but needs vertical alignment for multiple lines of help text */
.help-block {
	font-style: italic;
    padding-top: 0.9rem;
    padding-bottom: 0.25rem;
    padding-left: 20px;
}

/* https://tigger.cbr.washington.edu/dart/query/adult_hrt */
.help-inline {
    display: inline-block;
font-style: italic;
    padding-left: 20px; /* creates gap between icon and text */
    margin-left: 5px; /* creates leading gap between preceeding line element and icon/text */
  vertical-align: middle;
}