/***********************************************************************************
 * AGILE-V?.CSS 
 * 
 * A collection of CSS definitions specific to the AGILE section of the QID website 
 * 
 * 2022-06-06: Created 
 * 2022-10-28: Moved user identification and breadcrumbs to the same line 
 *             Customized object navigation arrows 
 * 2022-11-08: Added styling for search interface and admin tools 
 * 2022-11-09: Split off Admin Tools styles into agile-admin-v0.css 
 * 2022-12-16: Changed to v1 
 * 2023-12-14: Changed to v2 
 *             Changed structure of user identification and breadcrumbs 
 ***********************************************************************************/


/***********************************************************************************
 * Header 
 ***********************************************************************************/
header { 
	background-color: #97b196; 
	background: linear-gradient(180deg, #97b196, #c1d0c0); 
}


/***********************************************************************************
 * Site Identification (logo/tagline) 
 ***********************************************************************************/
#site-identification { 
	justify-content: flex-start; 
}
#site-logo {
  min-width: 0;
  min-height: 2.8rem;
}
#site-tagline { 
	font-size: 1.575rem; 
	margin: 0 0 0 .3em; 
	font-style: italic; 
	font-weight: bold; 
	text-align: center; 
	white-space: nowrap; 
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
}

@media only screen and (max-width: 700px) { 
	#site-tagline { 
		font-size: 1rem; 
	}
}

@media only screen and (max-width: 600px) { 
	#site-tagline { 
		font-size: .75rem; 
	}
}


/***********************************************************************************
 * Site Navigation 
 ***********************************************************************************/
#site-navigation-container { 
	background-color: #4B634A; 
	box-shadow: 0px 2px 0px #1a3919, 0px -2px 0px #1a3919;  
}
#site-navigation label, #site-navigation a { 
	color: #ffffff; 
}
#site-navigation label:hover, #site-navigation a:hover { 
	color: #ffffff; 
}
#site-navigation .ddm-menu > .ddm-ul > .ddm-li > .ddm-ul { 
	background-color: #445A43; 
}
#site-navigation .ddm-menu .ddm-toggle-on { 
	background-color: #445A43 !important; 
}


/***********************************************************************************
 * You Are Here (Breadcrumbs and User Identification) 
 ***********************************************************************************/
#you-are-here-container { 
  box-shadow: 0px -2px 0px #1a3919;
}


/***********************************************************************************
 * Collapsible Content - H2 Header 
 ***********************************************************************************/
h2.collapsible-open { 
  border-color: #827f7d; 
  background: #97b196; 
  color: #ffffff; 
}
h2.collapsible-closed { 
  border-color: #858280; 
  background: #8f8f8f; 
  color: #ffffff; 
}
h2.collapsible-open:hover, h2.collapsible-closed:hover { 
  color: #333333; 
}


/***********************************************************************************
 * Filterable Table 
 ***********************************************************************************/
.filterable th { 
  border-color: #ffffff;
  background-color: #4b634a; 
  color: #ffffff;  
}
.filterable td { 
  border-color: #ffffff; 
  border-bottom-color: #4b634a; 
}


/***********************************************************************************
 * Object Navigation 
 ***********************************************************************************/
.object-navigation .previous-arrow a, .object-navigation .next-arrow a { 
	color: #4b634a;
}


/***********************************************************************************
 * Environment Selection Box
 ***********************************************************************************/
#environment-box {
  margin: .5em 0 1em 0;
  padding: .3em .5em .3em .5em;
  background-color: #fcfcfc;
  border: 1px solid #cecece;
  border-radius: 3px;
}
#environment-dropdowns {
  display: flex;
  line-height: 1.8em;
}
#environment-box select {
  margin-right: 1em;
}
#selected-environment {
  display: none;
}
#selected-environment span {
  display: inline-block;
  margin: .2em 1em .2em 0;
}


/***********************************************************************************
 * Selection Buttons 
 ***********************************************************************************/
.selection-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: .5em;
}
.selection-buttons .left-buttons input {
  font-size: .7em;
}


/***********************************************************************************
 * Object Lists 
 ***********************************************************************************/
.object-list { 
	padding: 0 .3em 1em .3em;
}
.object-list .domain {
	background-color: #bfbfbf;
	font-weight: bold;
	display: flex; 
	flex-direction: row; 
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items:  flex-start;
	padding: .3em .3em;
	margin: 1em 0 .5em 0;
}
.object-list .object-item { 
	display: flex; 
	flex-direction: row; 
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items:  flex-start;
	padding: 0 .3em;
}
.object-list .object-icons { 
	width: 3em; 
	padding-right: .5em;
}
.object-list .object-icons img {
	width: 1.5em;
}
.object-list .object-name { 
	min-width: 25em; 
	padding-right: 1em;
}
.object-list .object-description { 
	width: 55em
}
.object-list .object-description p { 
	margin: 0 0 0 0;
}
.object-list .object-description p+p { 
	margin-top: 1em;
}
.object-list .object-item+.object-item {
	border-top: 1px solid #666666;
	margin-top: .5em;
	padding-top: .5em;
}
.object-list .generic-open+div {
  padding-left: 0;
}


/***********************************************************************************
 * Selected Determinants 
 ***********************************************************************************/
.selected-determinants { 
  font-size: .8em;
  padding: 0 0 1.5em 1em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.selected-determinant { 
  white-space: nowrap;
  background-color: #949494;
  color: #ffffff;
  border-radius: 5px;
  padding: .2em .4em;
  margin: .3em;
}


/***********************************************************************************
 * Strategy Result Summary 
 ***********************************************************************************/
.result-summary { 
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  align-content: flex-start;
  border-bottom: 4px solid #444444;
  padding-bottom: .3em;
}
.result-count {

}

#show-more-strategies {
  font-size: .8em;
}
.result-options {
  font-size: .8em;
  text-align: left;
}
.result-options select {
  font-size: .8em;
}
.disabled-more {
  color: #cccccc;
}


/***********************************************************************************
 * Strategy Result List 
 ***********************************************************************************/
.strategies-by-rank { 

}
.strategy {
  border-bottom: 1px solid #555555; 
  padding: .5em .5em; 
}
.strategy-name {
  padding-bottom: .2em;
  font-weight: bold;
}
.strategy-buttons button {
  font-size: .7em;
}
.strategy-description p {
  margin: 0 0;
}
.strategy-description p+p {
  margin-top: 1em;
}
.strategy-tags {
  font-size: .8em; 
}
.determinant-detail {
  display: flex;
  flex-wrap: wrap;
}

.score-high {
  background-color: #8fc36c;
  border: 1px solid #70ad47;
  border-radius: 5px;
  padding: .1em .3em;
  margin: .1em .2em;
}
.score-med {
  background-color: #f9f98e;
  border: 1px solid #f6f659;
  border-radius: 5px;
  padding: .1em .3em;
  margin: .1em .2em;
}
.score-low {
  background-color: #e7e7e7;
  border: 1px solid #b2b2b2;
  border-radius: 5px;
  padding: .1em .3em;
  margin: .1em .2em;
}
.score-none {
  background-color: #f9f9f9;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  padding: .1em .3em;
  margin: .1em .2em;
  text-decoration: line-through;
}


/***********************************************************************************
 * Hover Help Tips 
 ***********************************************************************************/
.help-tip {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
  background-color: #bcbcbc;
  border-radius: 50%;
  width: 1.1em;
  height: 1.1em;
  font-size: .8em;
  line-height: 1.2em;
  cursor: default;
  margin: 0 0 0 0;
  text-indent: 0;
}

.help-tip:before {
  content: '?';
  font-weight: bold;
  color: #ffffff;
}

.help-tip:hover span {
  display: block; 
  z-index: 99;
  transform-origin: 100% 0%;
  -webkit-animation: fadeIn 0.3s ease-in-out;
  animation: faceIn 0.3s ease-in-out;
}

.help-tip span {
  display: none;
  text-align: left;
  background-color: #6a6a6a;
  padding: 5px;
  width: 350px;
  position: absolute;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  left: -.4px;
  top: 25px;
  color: #ffffff;
  font-size: 1.3em;
  line-height: 1.4;
}

.help-tip span:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-bottom-color: #6a6a6a;
  left: 6px;
  top: -20px;
}

.help-tip span:after {
  width: 100%;
  height: 40px;
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
}

.help-tip span p {
  margin: 0 0 0 0;
}

.help-tip span ul {
  margin-top: .3em;
}

h3 .help-tip span {
  font-style: italic;
  font-weight: normal;
  font-size: 1.1em;
}


/***********************************************************************************
 * Click Help Tips 
 ***********************************************************************************/
.help-tip-2 {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
}

.help-tip-2.show-tip span.help-tip-content {
  display: block; 
  z-index: 99;
  transform-origin: 100% 0%;
  -webkit-animation: fadeIn 0.3s ease-in-out;
  animation: faceIn 0.3s ease-in-out;
}

.help-tip-2 span.help-tip-content {
  display: none;
  text-align: left;
  background-color: #6a6a6a;
  padding: 5px;
  width: 350px;
  position: absolute;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  left: -11.4px;
  top: 25px;
  color: #ffffff;
  font-size: 1em;
  line-height: 1.4;
  white-space: normal;
}

.help-tip-2 span.help-tip-content:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-bottom-color: #6a6a6a;
  left: 6px;
  top: -20px;
}

.help-tip-2 span.help-tip-content:after {
  width: 100%;
  height: 40px;
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
}

.help-tip-2 span.help-tip-content p {
  margin: 0 0 0 0;
}

.help-tip-2 span.help-tip-content ul {
  margin-top: .3em;
}

h3 .help-tip-2 span {
  font-style: italic;
  font-weight: normal;
  font-size: 1.1em;
}


/***********************************************************************************
 * Icons 
 ***********************************************************************************/
.more-info-icon { 
  font-size: .8em;
  display: inline-block;
  background-color: #0000ee;
  background-color: #666666;
  border-radius: 50%;
  text-align: center;
  width: 1.2em;
  line-height: 1.2em;
}
.more-info-icon a {
  text-decoration: none;
  color: #ffffff;
}

.critical-toggle-icon {
  font-size: .8em;
  display: inline-block;
  background-color: #0000ee;
  background-color: #666666;
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  width: 1.2em;
  line-height: 1.2em;
}
.critical-toggle-icon.is-critical {
  background-color: #990000;
}

.selected-determinants .more-info-icon, .selected-determinants .critical-toggle-icon {
  cursor: pointer;
}


/***********************************************************************************
 * Sticky Content 
 ***********************************************************************************/
.sticky-test { 
  background-color: #ffffff;
  padding: .3em 0 0 .3em;
  position: sticky;
  top: 0;
}


/***********************************************************************************
 * Feedback Form 
 ***********************************************************************************/
#agile-feedback #contact-fields {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  gap: 2em;
  margin-bottom: 1em;
}
#agile-feedback #contact-fields div {
  width: 50%;
}
#agile-feedback #contact-fields input[type=text] { 
  width: 100%; 
}
#agile-feedback textarea { 
  width: 100%; 
  height: 15em; 
}
#agile-feedback #feedback-buttons {
  margin-top: 1em;
}
#agile-feedback #feedback-messages {
  color: #ff0000;
  font-weight: bold;
  margin: .5em 0;
}


/***********************************************************************************
 * Print Styles
 ***********************************************************************************/
@media only print { 
  .do-not-print, #server-identification, #global-navigation .nav-links, #site-navigation .ddm-menu, footer, 
  input[type=submit], .result-options, .result-options-instructions, .project-overview, #environment-dropdowns, 
  .determinant-info-tip, .more-info-icon {
    display: none !important;
  }
  
  #user-identification {
    visibility: hidden;
  }
  
  #global-navigation, #site-navigation {
    height: 1rem;
  }
  
  #site-identification {
    padding-left: 1em;
  }
  
  #selected-environment {
    display: block;
  }
  
  .strategy {
    page-break-inside: avoid;
  }
  
  .strategy-buttons {
    display: none;
  }
  
  #show-more-strategies {
    display: none;
  }
}


/***********************************************************************************
 * End of AGILE-V?.CSS 
 ***********************************************************************************/