/* CBR customizations of BS accordion styles */

.form-floating>.form-control-plaintext~label, 
.form-floating>.form-control:focus~label, 
.form-floating>.form-control:not(:placeholder-shown)~label, 
.form-floating>.form-select~label {
    opacity: .9 !important;
}

/* metadata pages */
h2#queries.neutral,
h2#jump.neutral,
h2.querynav {
  text-transform: uppercase;
  font-size: 0.9rem !important;
  margin-top: 0;
  font-weight: 600;
  padding-bottom: 0.2em !important;
  padding-top: 0.1em !important;
}

/* slightly wider than other about sections to accomodate two column layout*/
.page_width_center_research {
    display: block;
    max-width: 850px;
    width: 100%;
}

/* horizontal description list, use all together!!! research page*/
.dl-inline {
	margin-left: -0.5em;
	margin-right: -0.5em;
	padding-left: 0;
}
.dl-inline > dt {
	display: inline-block;
	margin-left: 0.5em;
    font-size: 85%;
    font-weight: 600 !important;
}
.dl-inline-item {
    display: inline-block;
    margin-left: .1rem;
    font-size: 85%;
}

/* darker link for colored backgrounds, like research page*/
a.dark_link,
a.dark_link:link,
a.dark_link:visited {
  color: #00668C; /*#006f95*/
  text-decoration: none;
}

a.dark_link:hover { 
  text-decoration: underline;
  color: #00668C; /*#006f95*/
}

a.email_link,
a.email_link:link,
a.email_link:visited {
  color: #00668C;
  text-decoration: none;
}

a.email_link:hover { 
  text-decoration: underline;
  color: #00668C;
}

.hanging {
    text-indent: -2.5em;
    margin-left: 2.5em;
    line-height: 1.1;
} 

.accordion {
border: unset !important;
box-shadow: unset !important;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-circle' viewBox='0 0 16 16'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3e%3cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3e%3c/svg%3e");
  transition: all 0.5s;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3e%3cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3e%3c/svg%3e");
}

.accordion-button {
    display: inline-flex !important;
    width: unset !important; /*100%;*/ 
	padding: 1rem 0.5rem !important;
  border-radius: 5px;
}

.accordion-button.disclosure {
    display: inline-flex !important;
    width: unset !important; /*100%;*/ 
	padding: 1rem 0.5rem !important;
  border-radius: 5px;
  background-color: var(--logo-cc-lightest);
  border: 1px solid var(--cbr-color);
}

.accordion-button.disclosure:not(.collapsed) {
    color: unset !important;
  background-color: var(--logo-cc-light);
    box-shadow: unset !important;
}

/*
.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: unset !important; 
    box-shadow: unset !important;
}
*/

.accordion-button:focus {
    border-color: var(--cbr-color) !important;
    box-shadow: 0 0 0 0.15rem rgba(94,120,128,1.0) !important;*/
}
.underover-red {
	text-decoration: underline overline #df0000; /*ADA red contrast with white*/
}

.list-group-item-nb {
    position: relative;
    display: block;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
    color: var(--bs-list-group-color);
    text-decoration: none;
    background-color: var(--bs-list-group-bg);
    /*border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);*/
}

.list-inline {
	list-style: none;
	margin-left: -0.5em;
	margin-right: -0.5em;
	padding-left: 0;
}
.list-inline > li {
	display: inline-block;
	margin-left: 0.5em;
	margin-right: 0.5em;
}



/*constrain image size when included in wide page query results */
figure.constrain .img-fluid {
  width: 100%;
  max-width: 1100px !important;
}

figure.constrain800 .img-fluid {
  width: 100%;
  max-width: 800px !important;
}

.lettering-wide {
	letter-spacing: 1.5px;
}

.toc-affix {
    /* both are important */ 
    position: sticky !important;
    top: 100px !important;
}

.toc-section {
  padding-top: 50px;
  border-bottom: 2px solid var(--logo-cc-light);
}

h2.toc-section,
h3.toc-section {
  padding-top: 50px;
  border-bottom: thick double var(--logo-cc-light);
}

.btntoolbarlabel {
  font-size: 1rem;
  font-weight: 400;
}

/* if page combines TOC and cbrforms, use "active-custom" for active button rather than "active" */
#cbrforms .btn.active-custom {
    background-color: #e6e6e6;
    font-weight: bold;
    background-image: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    background-color: #e6e6e6;
    outline: 0;
    z-index: 2;
}

.thm-img-rounded {
  border-radius: 8px;
  border: 1px solid gray;
  max-width:100%;
  padding: 0.5rem;
  margin-bottom: .5rem;
  margin-top: .5rem;
}

figure {
	padding-top: .35rem !important; /*necessary in combination with border & border-radius*/
	margin-top: 20px;
	margin-bottom: 1rem;
	padding-left: 10px;
	padding-right: 10px;
	display: inline-block; /* don't understand why this works(ish) but to align figcaption with image, does this mess up anything? */
	/*border-radius: 8px;
	border: 1px solid silver;*/
}
figure > figcaption {
	/* same as table caption */
	text-align: center;
	font-weight: bold;
	color: var(--cbr-gray);	
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	max-width: 800px; /* from typical image size*/
}
/* not accessible (is this true?), but that is okay because we don't want screen readers to read it, specifically for visual users */
/* added border to figure to help visually understand figure and caption
/*figcaption:before{
 content: "Caption: ";
 } */
/* BS5 decided a table caption should be after the table as default. idiots!!! IMHO*/
/* undoing all BS5 */
caption {
	display: table-caption;
	/*text-align: center;*/
	caption-side: top;
	font-weight: bold;
	color: var(--cbr-gray); 
	padding-left: 10px;
	padding-right: 10px;
}
caption.highlight {
	display: table-caption;
	text-align: left;
	caption-side: top;
	font-weight: bold;
	color: #000000;
	font-size: 1.1rem;
	padding-top: 15px;
	background-color: #eeeeee;
	border: 1px solid #ccc;
	border-radius: 0rem 0.375rem 0.375rem 0rem;
}

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