/* CBR Custom Styles from Drupal 7 site, still relevant
*
* OLD 2021 Green: #3A6152; gradient 154734 -> 3A6152
* 
*/

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

/* https://cbr.washington.edu/papers */
.biblio-title {
/*
  font-weight: bold;
*/
}

figure {
	padding-top: .5rem !important;
	margin-top: 0;
	margin-bottom: 1.5rem;
}
/* match table caption */
figcaption {
	/*font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.2;*/
	font-weight: bold;
	color: var(--cbr-color); 
}

/* https://cbr.washington.edu/dart/cs/php/rpt/meta_inventory.php?proj=BON */
/* https://cbr.washington.edu/dart/metadata/adult end of page in glossary section*/
/* not indented without adding spec here */
dd {
    padding-left: .75rem;
}

/* https://cbr.washington.edu/dart/query/river_graph_text */
.data-courtesy {
	margin-bottom: .5rem;
}

/* https://cbr.washington.edu/dart/query/adult_hrt */
.query-select {
	padding-top: .5rem !important;
	font-size: 1.25rem;
	margin-top: 0;
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
}

/* https://cbr.washington.edu/dart/query/adult_hrt ing query results table */
/* slightly smaller than BS btn-sm */
.btn-xs {
	padding: .25rem .5rem;
	font-size: .75rem;
}

div.inline {
    display: inline-block;
}

/* BS5 moved a table caption after the table as default.*/
/* override BS5 */
caption {
  display: table-caption;
  text-align: left;
  caption-side: top;
  font-weight: bold;
  color: var(--cbr-color);
  font-size: 1.1rem;
  padding-top: 10px;
}

caption.highlight {
  display: table-caption;
  text-align: left;
  caption-side: top;
  font-weight: bold;
  color: var(--cbr-color);
  
  font-size: 1.1rem;
  padding-top: 15px;
  background-color: #eeeeee;
    border: 1px solid #ccc;
    border-radius: 0rem 0.375rem 0.375rem 0rem;
}

.icon-style {
font-size: 0.75rem; 
color: var(--cbr-dark);
font-weight: 700;
}


ul {
list-style: square;
}

a.external {
background: url('/cbr_img/external-link-icon.png') center right no-repeat;   
padding-right: 15px;
}

a.popup {
/* has code in script.js */
background: url('/cbr_img/icon_popup.png') center right no-repeat;
padding-right: 15px
}

span.popup {
/* display popup icon */
background: url('/cbr_img/icon_popup.png') center right no-repeat;
padding-right: 15px
}

a.newtab {
background: url('/cbr_img/icon_popup.png') center right no-repeat;
padding-right: 15px
}
/* 2023 trial, I think better to include icon code in html so can include aria and color*/
a.inventory {
background: url('/cbr_img/bs-icons/icons/info-circle-fill.svg ') center right no-repeat;
padding-right: 35px
}

/* indenting styled like a reference in a paper */
.ref {text-indent: -30px; margin-left: 30px;}
/* second line indent for predictions page*/
.collapse-indent {text-indent: -45px; margin-left: 45px;}

/* used on form pages, span/calendar year display*/
/* XXX old bootstrap, convert to new CSS rem, etc*/
/* see /dart/query/adult_daily as example */
/*
.input-append .add-on {
    display: inline-block;
    width: auto;
    min-width: 16px;
    height: 18px;
    padding: 4px 5px;
    font-weight: normal;
    line-height: 18px;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    vertical-align: middle;
    background-color: #eeeeee;
    border: 1px solid #ccc;
*/

/*from bootstrap 5 with some edits*/
/*.input-group-text */
/* append, square-off top-left bottom-left */
/* border-radius: top-left | top-right | bottom-right | bottom-left */
.input-add-on {
    /*display: flex;*/
    display: inline-block;
    align-items: center;
    padding: 0.375rem 0.375rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    color: #000000;
    text-align: center;
    white-space: nowrap;
    background-color: #eeeeee;
    border: 1px solid #ccc;
    border-radius: 0rem 0.375rem 0.375rem 0rem;
}
/* prepend square-off top-right bottom-right*/
.input-add-on-pre {
    /*display: flex;*/
    display: inline-block;
    align-items: center;
    padding: 0.375rem 0.375rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    color: #000000;
    text-align: center;
    white-space: nowrap;
    background-color: #eeeeee;
    border: 1px solid #ccc;
    border-radius: 0.375rem 0rem 0rem 0.375rem;
}

.allcaps {
  text-transform: uppercase;
}


/* from kit, do we want? * in use research */
div#header-links li,
div.subheader-links li {
  float: left;
  list-style: none;
  font-size: .75rem;
  font-weight: 500;
}

div#header-links ul a,
div.subheader-links ul a {
  color: #6c757d;
  text-decoration: underline;
}

div#header-links ul a:hover,
div.subheader-links ul a:hover {
  color: #9f9e9e;
}

div#header-links ul,
div.subheader-links ul {
  list-style: none;
  margin: 0;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

div#header-links {
  margin-bottom: 1rem;
}

div.subheader-links {
  margin-bottom: 1rem;
}

div.subheader-links div {
  margin-bottom: 0;
}

/******************************************/
/* application pages from Kit development */
/* don't know if we need it all           */
div.field--name-field-cover-image {
  float: right !important;
  margin-left: 1rem;
}

div.field--name-field-cover-image img {
  max-width: 265px !important;
  max-height: 343px !important;
}

/*app-v revisions block*/
#block-views-block-applicationversions-block {
  clear: both;
  z-index: 10;
}

span.field.field--name-title {
  margin-bottom: 1rem;
}

div.field.field--name-field-current-version {
  margin-bottom: 1rem;
}

div.field.field--name-field-manual {
  margin-bottom: 1rem;
}

div.field.field--name-field-training-videos {
  margin-bottom: 1rem;
}

div.field.field--name-field-file-attachments {
  margin-bottom: 1rem;
}

div.field.field--name-field-application {
  margin-bottom: 1rem;
}

div.field.field--name-field-version {
  margin-bottom: 1rem;
}

div.field.field--name-field-enhancements {
  margin-bottom: 1rem;
}

div.field.field--name-field-bug-fixes {
  margin-bottom: 1rem;
}

div.field.field--name-field-features {
  margin-bottom: 1rem;
}

div.field.field--name-field-distribution {
  margin-bottom: 1rem;
}

div.field.field--name-field-version {
  margin-bottom: 1rem;
}

#block-views-block-desktopapplications-block h2 {
  font-size: 1.25rem !important;
  margin-bottom: .75rem !important;
}

#block-views-block-desktopapplications-block h2::before {
  display: none !important;
}

/*end*/
/*app pages rules*/
div.block-views-blockapplicationversions-block-1 h2 {
  font-weight: bold;
  font-size: 1.2rem;
}





/******************************************/
/* Actual cbr2 theme aka d7 */
 
.themecolor {
	color: #3A6152;
}

/* hover over link and show image */
.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }
/* DART highlight text with box of webtheme (green), text is white */
/* used for Basin Condition categories on DART front page */
.hlite_text { background-color: #3A6152; color: #ffffff; font-size: 115%; padding-bottom: 5px; padding-top: 5px;}

.left {
float: left;
padding-right: 10px;
padding-bottom: 5px;
}

.right {
float: right;
padding-left: 10px;
padding-bottom: 5px;
}





div.error {
background-image: none;
background-color: inherit;
}

ol.lower-alpha {
list-style-type:lower-alpha;
} 


.highlights-title {
color: #08C;
}

.highlights .views-field-body {

}

.node-type-app .field,
.node-app-version .field{
margin-bottom: 1em;
}

.portrait {
font-weight: bold;
text-align: center;
background-color: #e5e5e5;
padding-top: 15px;
padding-bottom: 5px;
}
.portrait a:hover,
.portrait a:link,
.portrait a:visited,
.portrait a:active {text-decoration: none; }


/*
* Applications
*/

.field-name-field-cover-image {
float: right;
}

/*
* Checklist
*/

.checklist dl.form {
float: left;
width: 100%;
}

.checklist dl.form dt {
clear: left;
float:left;
font-weight: bold;
width: 8em;
margin-bottom: 1em;
}

.checklist dl.form dd {
float: left;
border-bottom: 1px solid #999;
width: 16em;
margin: 0;
padding: 0;
}

.checklist dl.form dd:before {
content: "\0000a0 "; /* 2610 is hex for character entity ☐ \0000a0 is   */
}

.checklist li {
list-style: none;
}

.checklist li:before {
content: "\2610\0000a0\0000a0 "; /* 2610 is hex for character entity ☐ \0000a0 is   */
}

.checklist dl {
margin-left: 1em;
}

.checklist dt {
float: left;
width: 10em;
}

.checklist dt, .checklist dd {
}

/*
* More Custom Styles
* mostly DART pages and DART generated output
*/

/* .mindent {text-indent: -20px; margin-left: 20px;} */
.mindent {text-indent: 0px; margin-left: 0px;}

.center {text-align: center;}

.number {text-align: right;}

.bold {font-weight: bold;}
.italic {font-style: italic;}

.red {color: #ff0000;}
.blue {color: #0000ff;}
.green {color: #00CC00;}

.ltyellow {background-color: #ffffee;}
.ltgray {background-color: #d9d9d9;}
.ltltgray {background-color: #e8e8e8;}
.highlight-gray {background-color: #cccccc;}

.ltblue {background-color: #eeffff;} /* blue */
.ltgreen {background-color: #eeffee;} /* green */
.ltred {background-color: #FFB2B2;} /* red */
.ltsalmon {background-color: #FDC2BB;} /* salmon */
.ltpurple {background-color: #D8BFD8;} /* purple */
.ltbl {background-color: #c9daf9;} /* med blue */
.ltgr {background-color: #99FFCC;} /* med greeen */
.ltsherbet {background-color: #FFEE99;} /* sherbet */
.ltaqua {background-color: #D8FFFF;} /* aqua */
.ltorange {background-color: #ffcc66;} /* orange */
.ltpink {background-color: #ffccff;} /* pink */

/* geographically themed background colors */
.mainstem { background-color: #FADADD; } /* pale pink */
.snake { background-color: #eeffff; } /* pale blue */
.upcol { background-color: #ffffee; } /* pale yellow */
.yakima { background-color: #eeffee; } /* pale green */
.pitNkps {background-color: #ffddff;}
.pitNuc {background-color: #dddd99;}
.pitNmc {background-color: #ccddff;}
.pitNsa {background-color: #ddbbaa;}
.pitNcl {background-color: #ddbbdd;}
.pitNus {background-color: #eecccc;}
.pitNlc {background-color: #aaddaa;}
.pitNyk {background-color: #eeffee;}
.pitNwl {background-color: #ddddff;}
.pitNls {background-color: #ffddaa;}
.pitNcm {background-color: #cccccc;}
.pitNad {background-color: #ffcc66;}

table.stickyheader
{
	border: 1px solid black;
	border-collapse: collapse;
}
table.stickyheader thead {
	padding: 5px;
	border: 1px solid black;
	background: #cccccc; /* necessary, else it is transparent*/
	position: sticky;
	top: 140px; /* Don't forget this, required for the stickiness, need space for navbar */
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
table.stickyheader th {
	padding: 5px;
	border: 1px solid black;
}
table.stickyheader td {
	padding: 5px;
	border: 1px solid black;
}

table.dart-table,
table.dart-table-number
{
border: 1px solid black;
border-collapse: collapse;
  padding-bottom: 8px;
}
table.dart-table th, 
table.dart-table td,
table.dart-table-number th, 
table.dart-table-number td {
padding: 5px;
border: 1px solid black;
}
table.dart-table-number td {
text-align: right;
}
table.header-border th
{
border-bottom: 1px solid black;
border-top: 1px solid black;
}

tr.header-highlight 
{
background: #eee;
}

tr.even, th.even, td.even {
background: #fff;
}

tr.odd, th.odd, td.odd {
background: #f9f9f9;
}

td.number {text-align: right;} /* necessary for number style in tables */

th.doubleleft, th.doubleleft, table.dart-table td.doubleleft, td.doubleleft { border-left-style: double; border-left-width: 3px;}
th.doubleright, th.doubleright, table.dart-table td.doubleright, td.doubleright { border-right-style: double; border-right-width: 3px;}
th.doubletop, th.doubletop, table.dart-table td.doubletop, td.doubletop { border-top-style: double; border-top-width: 3px;}
th.doublebottom, th.doublebottom, table.dart-table td.doublebottom, td.doublebottom { border-bottom-style: double; border-bottom-width: 3px;}


.survey-link {
background-color: #FFEEEE;
border-bottom: 1px dotted #333333;
border-top: 1px dotted #333333;
margin-bottom: 1em;
padding: 0.25em 10px;
}

.survey-link p {
font-size: 0.9em;
padding: 0;
margin: 0;
}



/* add margin */
.addmargin
{
margin-top: 15px;
margin-bottom: 15px;
}

/* add padding */
.addpadding
{
padding-top: 15px;
padding-bottom: 15px;
}

/* tooltips (tooltip already exists somewhere)*/
.tooltips {
position: relative;
display: inline-block;
border-bottom: 1px dotted blue;
}

.tooltips .tooltipstext {
visibility: hidden;
left: 105%;
width: 400px;
top: -5px;
background-color: gray;
color: #fff;
text-align: left;
border-radius: 4px;
padding: 4px 2px;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.tooltips:hover .tooltipstext {
visibility: visible;
}

.tooltips .linespecial {
color: #FFFFFF;
font-size: 14px;
line-height: 14px;
font-weight: normal;
}
/* end */