/***********************************************************************************
 * WINIPP-V?.CSS 
 * 
 * A collection of CSS definitions specific to the WiNIPP section of the QID website 
 * 
 * 2024-09-26: Created 
 * 2025-09-19: Switched to v2 
 *             Added training module quizzes (copied from crc.css) 
 *             Added ip-training-quiz to bring back the close button in dialogs 
 *             Added cdc-training-box 
 *             Modified to start accomodating both single and multiple select 
 *              questions, plus feedback text 
 * 2025-11-24: Switched to v3 
 *             Modified quizzes to work with more verbose questions and feedback 
 *             Added classes for IP Training (transcripts, objectives, quizzes) 
 * 2025-12-03: Added classes for course navigation 
 * 2026-02-10: Switched to v4 
 *             Added classes for CSS only tabs 
 * 2026-10-27: Switched to v5 
 *             Modified site navigation to show unavailable and current 
 *             Added UTI Toolkit styles
 ***********************************************************************************/


/***********************************************************************************
 * HTML Tags 
 ***********************************************************************************/
h1, h2 {
  color: #002060;
}
h2+p, h3+p, h4+p, h5+p { 
  margin-top: .8em;; 
}

h1.cohort-2 {
  color: #a02321;
}
h2.cohort-2 {
  border: 1px solid; 
  border-width: 1px 0px; 
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
  position: relative; 
  margin: 0 0 .5em 0; 
  padding: .5em .5em .5em .5em; 
  font-weight: bold; 
  font-size: 1.075rem; 
  line-height: 1.1em; 
  text-align: center;
  border-color: #581312; 
  background: #a02321; 
  color: #ffffff;
}
h2.cohort-2.blue {
  border-color: #0d2b6b; 
  background: #002060; 
}


/***********************************************************************************
 * Header 
 ***********************************************************************************/
header { 
	background-color: #ffffff; /*#D2ECF7;*/ 
	background: linear-gradient(180deg, #ffffff, #ffffff); /*linear-gradient(180deg, #D2ECF7, #E3F3FA); */
}


/***********************************************************************************
 * Site Identification (logo/tagline) 
 ***********************************************************************************/
#site-identification { 
	justify-content: flex-start; 
}
#site-logo {
  min-width: 0;
  min-height: 3rem;
}
#site-logo img { 
  /*height: 9rem;*/
  width: 9.5rem;
  padding: .5em .7em .3em 1em; 
}
#site-tagline { 
	font-size: 1.9rem; 
	margin: 0 0 0 0; 
	font-weight: bold; 
	text-align: left; 
  color: #a02321;
}
#site-sub-project { 
	font-size: 1.7rem; 
	margin: 0 0 0 0; 
	font-weight: bold; 
	text-align: left; 
  color: #002060;
}

@media only screen and (max-width: 700px) { 
  #site-logo {
    min-width: auto;
  }
	#site-tagline { 
		font-size: 1.5rem; 
	}
  #site-sub-project { 
		font-size: 1.3rem; 
	}
}

@media only screen and (max-width: 600px) { 
	#site-tagline { 
		font-size: 1.3rem; 
	}
  #site-sub-project { 
		font-size: 1.1rem; 
	}
}


/***********************************************************************************
 * Site Navigation 
 ***********************************************************************************/
#site-navigation-container { 
  box-shadow: none;
}
#site-navigation {
  line-height: 2.5em;
}
#site-navigation label:hover, #site-navigation a:hover { 
  background-color: #002060;
}
#site-navigation .ddm-menu > .ddm-ul > .ddm-li > .ddm-ul { 
	background-color: #a02321; 
}
#site-navigation .ddm-menu .ddm-toggle-on { 
  background-color: #002060 !important; 
}
#site-navigation .ddm-menu .ddm-ul .ddm-li:hover { 
  background-color: #002060; 
}
#site-navigation .ddm-menu .ddm-toggle-on label:hover { 
  background-color: #002060; 
}
#site-navigation span.unavailable { 
  display: block;
  color: #aaaaaa; 
}
#site-navigation a.unavailable:hover, #site-navigation span.unavailable:hover {
  background-color: #bbbbbb;
  color: #888888;
  text-shadow: 1px 1px 1px #999999;
}
#site-navigation a.current-section {
  background-color: #002060;
}


/***********************************************************************************
 * You Are Here (Breadcrumbs and User Identification) 
 ***********************************************************************************/
#you-are-here-container { 
  box-shadow: none;
}


/***********************************************************************************
 * Page Content 
 ***********************************************************************************/
#page-content { 
  line-height: 1.5em; 
}


/***********************************************************************************
 * WiNIPP Subsite Navigation 
 ***********************************************************************************/
#subsite-navigation-container { 
  width: 100%; 
  background-color: #ffffff; 
  color: #000000;
  box-shadow: 0px 2px 0px #747474, 0px -2px 0px #747474; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: space-around; 
}
#subsite-navigation { 
  width: 1000px; 
  margin: 0 auto; 
  padding: 0; 
  line-height: 2em; 
  /* width: auto; == centered */
}  
#subsite-navigation label, #subsite-navigation a { 
  color: #000000; 
}
#subsite-navigation label:hover, #subsite-navigation a:hover { 
  color: #000000; 
}
#subsite-navigation .ddm-menu .ddm-ul .ddm-li:hover {
  background-color: #b5b5b5;
}
#subsite-navigation .ddm-menu .ddm-ul li:hover { 
  background-color: #b5b5b5; 
}
#subsite-navigation .ddm-menu > .ddm-ul > .ddm-li > .ddm-ul { 
  background-color: #d7d7d7; 
}
#subsite-navigation .ddm-menu > .ddm-ul > .ddm-li > .ddm-ul > .ddm-li { 
  border-top: 1px solid #ffffff; 
}
#subsite-navigation .ddm-menu .ddm-toggle-on { 
  background-color: #d7d7d7 !important; 
}
#subsite-navigation .ddm-menu .ddm-toggle-on label:hover { 
  background-color: #b5b5b5; 
}

@media only screen and (max-width: 1000px) { 
	#subsite-navigation { 
    width: 100%; 
    margin: 0 0; 
  } 
}

@media only screen and (max-width: 900px) { 
	#subsite-navigation-container { 
    justify-content: flex-start; 
  }
	#subsite-navigation .ddm-menu > .ddm-ul > .ddm-li > .ddm-ul > .ddm-li { 
    border-top: none; 
  }
}


/***********************************************************************************
 * Course Navigation 
 ***********************************************************************************/
#course-sidebar-navigation {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items:  flex-start;
  grid-gap: 1em;
  
}
#course-sidebar-navigation #course-list {
  flex-basis: 15em;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: .9em;
  padding-top: 2em;
}
#course-sidebar-navigation #course-list a {
  display: block;
  margin: 0 0;
  padding: .3em .3em .3em .3em;
  line-height: 1.3em;
  text-decoration: none;
}
#course-sidebar-navigation #course-list a+a {
  border-top: 1px solid #000000;
}
#course-list a, #course-list a:visited {
  color: #000000;
}
#course-list a:hover, #course-list a:active {
  background-color: #a02321;
  color: #ffffff;
}
#course-list a.current-course, #course-list a.current-course:visited {
  background-color: #002060;
  color: #ffffff;
}

#course-navigation {
  margin-top: 2em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

@media only screen and (max-width: 600px) { 
	#course-sidebar-navigation { 
    display: block;
  }
	#course-sidebar-navigation #course-list { 
    display: none;
  }
} 


/***********************************************************************************
 * Collapsible Content - H2 Header 
 ***********************************************************************************/
h2.collapsible-open {  
  border-color: #581312; 
  background: #a02321; 
  color: #ffffff;
}
h2.collapsible-closed { 
  border-color: #0d2b6b; 
  background: #002060; 
  color: #ffffff; 
}
h2.collapsible-open:hover { 
  border-color: #581312; 
  background: #a02321; 
  color: #000000; 
}
h2.collapsible-closed:hover { 
  border-color: #581312; 
  background: #a02321; 
  color: #ffffff;
}


/***********************************************************************************
 * Pure CSS Tabs - if works well, use on entire QID website? 
 ***********************************************************************************/
.tabs-container {
  display: flex;
  flex-wrap: wrap;
}

.tabs-container > input[type="radio"] {
  order: 1;
  display: none;
}

.tabs-container > label {
  order: 1;
  cursor: pointer;
  color: #000000;
  padding: .2em .5em;
  background-color: #cccccc;
  border: 1px solid #666666;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
  z-index: 99;
}

.tabs-container .tab-content {
  order: 2;
  display: none;
  width: 100%;
  border: 1px solid #666666;
  margin-top: -1px;
  margin-bottom: 1em;
  padding: 0 .5em;
}

.tabs-container.no-border .tab-content {
  border-left-width: 0;
  border-bottom-width: 0;
  border-right-width: 0;
}

.tabs-container > input[type="radio"]:checked + label {
  color: #000000;
  background-color: #ffffff;
  border-bottom-color: #ffffff;
}

.tabs-container > input[type="radio"]:checked + label + .tab-content {
  display: block;
}


/***********************************************************************************
 * Email Us button 
 ***********************************************************************************/
a.email-button {
  background-color: #a02321;
  border: 1px solid #581312;
  border-radius: .3em;
  padding: .5em 1em;
  color: #ffffff;
  text-decoration: none;
}
a.email-button:hover {
  color: #000000;
}

a.email-icon img {
  max-width: 3.2em;
  margin-top: 2em;
}


/***********************************************************************************
 * Resource blocks 
 ***********************************************************************************/
#winipp-resources .resource {
  margin: 0 0 2em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  grid-gap: 1em;
}
#winipp-resources .resource a.name, #winipp-resources .resource span.name { 
  width: 18em;
  min-width: 18em;
  text-align: center;
  font-weight: bold;
  padding: .5em; 
  background-color: #002060; /*#D2ECF7;*/ 
  border-radius: 1em;
  /*border: 5px double #0C84AD;*/ 
  font-size: 1em; 
  /*line-height: 1.4em;*/
  display: flex;
  align-items: center;
  justify-content: center;
  /*height: 6em;*/
  min-height: 5em;
}
#winipp-resources .resource a.name, #winipp-resources .resource span.name { 
  color: #ffffff; /*#000000;*/ 
  text-decoration: none; 
}
#winipp-resources .resource a.name:hover { 
  background-color: #a02321; /*#8fd0eb;*/
}
#winipp-resources .resource .description p:first-child {  
  margin-top: 0;
}

#winipp-resources .resource.unavailable a.name, #winipp-resources .resource.unavailable a.name:hover, #winipp-resources .resource.unavailable span.name {
  background-color: #cccccc;
  color: #aaaaaa;
}


@media only screen and (max-width: 900px) { 
	/*
  #winipp-resources .resource {
    align-items: flex-start;
  }
  #winipp-resources .resource a.name, #winipp-resources .resource span.name { 
    height: 10em;
  }
  */
}

@media only screen and (max-width: 600px) { 
	#winipp-resources .resource {
    flex-wrap: wrap;
  }
  #winipp-resources .resource a.name, #winipp-resources .resource span.name, #winipp-resources .resource .description { 
    width: 100%; 
    min-width: 100%;
  }
}


/***********************************************************************************
 * Resource blocks - Cohort 2
 ***********************************************************************************/
.winipp-resources .resource {
  margin: 1em 0 2em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  grid-gap: 1em;
}
.winipp-resources .resource a.icon, .winipp-resources .resource span.icon { 
  width: 10em;
  min-width: 10em;
  text-align: center;
  font-weight: bold;
  padding: .5em; 
  font-size: 1em; 
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 5em;
}
.winipp-resources .resource a.icon, .winipp-resources .resource span.icon { 
  color: #002060;
  text-decoration: none;
}
.winipp-resources .resource a.icon:hover, .winipp-resources .resource span.icon:hover { 
  color: #a02321;
}
.winipp-resources .resource a.icon img {
  max-height: 5em;
}
.winipp-resources .resource a.icon.cover img {
  max-height: 8em;
  border: 1px solid #0d2b6b;
}
.winipp-resources .resource .description p:first-child {  
  margin-top: 0;
}

.winipp-resources .resource.unavailable a.icon, .winipp-resources .resource.unavailable a.icon:hover, .winipp-resources .resource.unavailable span.icon {
  background-color: #cccccc;
  color: #aaaaaa;
}


@media only screen and (max-width: 900px) { 
	/*
  .winipp-resources .resource {
    align-items: flex-start;
  }
  .winipp-resources .resource a.icon, #winipp-resources .resource span.icon { 
    height: 10em;
  }
  */
}

@media only screen and (max-width: 600px) { 
  /*
	.winipp-resources .resource {
    flex-wrap: wrap;
  }
  .winipp-resources .resource a.icon, .winipp-resources .resource span.icon, .winipp-resources .resource .description { 
    width: 100%; 
    min-width: 100%;
  }
  */
}


/***********************************************************************************
 * Videos 
 ***********************************************************************************/
h2.video-series {
  margin-bottom: 1em;
}
.training-video-container { 
  display: flex;
  flex-flow: column;
}
.training-video-container .description {
  padding-bottom: 2em;
}
.training-video-container .video {
  text-align: center;
}
.training-video-container .video iframe { 
  /*width: 712px;
  height: 400px;*/
  aspect-ratio: 16/9;
  width: 100% !important;
  max-width: 712px;
}
.training-video-container .video .video-powerpoint { 
  font-size: .9em;
  margin: 0 auto;
  width: 712px;
  text-align: left;
}
.training-video-container .video .video-affirmation { 
  margin: 0 auto;
  width: 712px;
  text-align: left;
}

.training-video-container .video-transcript {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
.training-video-container .video-transcript h3 {
  font-size: 1em;
  margin-bottom: .2em;
}
.training-video-container .video-transcript p {
  margin: 0 0 0 0;
}
.training-video-container .video-transcript p+p {
  margin-top: .2em;
}

.training-video-container .video-with-quiz {
  display: flex;
  flex-flow: row;
  grid-gap: 2em;
  align-items: center;
}
.training-video-container .video-with-quiz .video {
  width: 90%;
  max-width: 712px;
}

@media only screen and (max-width: 750px) { 
	.training-video-container .video iframe { 
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
  
  .training-video-container .video-with-quiz {
    flex-flow: column;
  }
}


/***********************************************************************************
 * Affirmation Checkboxes 
 ***********************************************************************************/
label.affirmation-checkbox {
  display: inline-block;
  margin-left: 1.6em;
  text-indent: -1.6em;
  font-weight: bold;
}


/***********************************************************************************
 * Training Module Quiz 
 ***********************************************************************************/
.training-quiz { 
  font-size: 1rem; 
}

.training-quiz .quiz-results { 
  font-weight: bold;
}

.training-quiz .quiz-question { 
  padding-bottom: 1em;
}
.training-quiz .quiz-question .quiz-question-number {  }
.training-quiz .quiz-question .quiz-question-text {  }
.training-quiz .quiz-question .quiz-question-options {  } 
.training-quiz .quiz-question .quiz-question-options .quiz-question-option {
  display: flex;
  flex-flow: row nowrap;
}
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-input { 
  padding-right: .3em;
}
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-prefix { 
  padding-right: .3em;
}
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-icon { 
  padding-right: .3em;
  width: 1.3em;
  min-width: 1.3em;
}
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-icon img { 
  width: 100%;
}
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-text {  }
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-text .quiz-question-option-feedback { 
  font-style: italic;
  color: #666666;
}
.training-quiz .quiz-question .quiz-question-feedback { 
  font-style: italic;
  color: #666666;
  padding-top: 1em;
}

.training-quiz .quiz-show-answer { 
  font-size: 90%; 
}
.training-quiz .quiz-validation-message { 
  color: #990000; 
  font-weight: bold; 
  margin-bottom: .5em;
  text-align: right;
}

.training-quiz .quiz-show-all-answers { 
  min-height: 1px; 
}
.training-quiz .quiz-show-all-answers+.quiz-show-all-answers { 
  border-top: 1px solid #cccccc; 
  margin-top: 0; 
  padding-top: 0; 
}

.ip-training-quiz .ui-dialog-titlebar .ui-dialog-titlebar-close { 
  display: block; 
}


/***********************************************************************************
 * UTI Toolkit Videos 
 ***********************************************************************************/
table.media-module { 
  width: 85%; 
  margin-left: auto;
  margin-right: auto; 
  margin-top: 2em; 
}
table.media-module td.media-video { 
  width: 502px; 
}
table.media-module td.media-video p { 
  text-align: center; 
  margin-bottom: .5em; 
}
table.media-module td.media-video iframe { 
  width: 500px; 
  height: 281px; 
  border: 5px solid #000000; 
}
table.media-module td.media-video-buttons { 
  vertical-align: middle; 
  text-align: center; 
  padding-left: 10px; 
  font-size: 1.2em; 
}
table.media-module td.media-video-buttons a { 
  display: block; 
}
table.media-module td.media-video-buttons a+a { 
  display: block; 
  margin-top: .5em; 
}
table.media-module td.media-video-buttons a.document-button { 
  font-size: 90%; 
  width: 100%; 
  max-width: 260px; 
  box-sizing: border-box; 
}
table.media-module td.media-video-buttons .ui-button { 
  padding: .3em .3em; 
}
.media-video-links { 
  width: 85%; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 0; 
  font-size: 90%; 
}
.media-video-links p { 
  margin-top: 0px; 
  margin-bottom: 0px; 
}
.media-video-links p+p { 
  margin-top: .5em; 
}

@media only screen and (max-width: 600px) { 
	table.media-module { 
    width: 100%; 
    margin-top: 1em; 
  }
	table.media-module td.media-video { 
    display: block; 
    width: 100%; 
  }
	table.media-module td.media-video div { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
  }
	table.media-module td.media-video div iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
  }
	table.media-module td.media-video-buttons { 
    display: block; 
    width: 100%; 
  }
}


/***********************************************************************************
 * UTI Toolkit - Case Studies 
 ***********************************************************************************/
.case-study { 
  margin-left: 4em; 
  margin-top: 1em; 
}
.case-study+.case-study { 
  margin-top: .5em; 
}
.case-study-print-link { 
  text-align: right; 
  font-size: .9em; 
  margin-bottom: 1em; 
}
.case-study-presentation { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: space-between; 
  align-items: stretch; 
  align-content: flex-start; 
}
.case-study-presentation-description { 
  border: 2px solid #000000; 
  width: 49%; 
  padding: 1em; 
}
.case-study-presentation-vitals { 
  border: 2px solid #000000; 
  width: 49%; 
  padding: 1em; 
}
.case-study-presentation-vitals-heading { 
  text-align: center; 
  font-weight: bold; 
}
.case-study-answer-link { 
  text-decoration: underline; 
  color: #0000ee; 
}
.case-study-answer-link:hover { 
  cursor: pointer; 
}
.case-study-answer-link:visited { 
  color: #551a8b; 
}
.case-study-answer { 
  background-color: #f3f3f3; 
  padding: 1em; 
} 
.case-study-answer-communication-script { 
  border: 1px solid #000000; 
  padding: 1em; 
}
.case-study-answer-communication-script-header { 
  margin: 1em auto 1em auto; 
  width: 250px; 
  border: 2px solid #000000; 
  font-weight: bold; 
  text-align: center; 
  padding: .6em; 
}
.case-study-answer-communication-script-resident { 
  float: left; 
  margin: 1em 0; 
}
.case-study-answer-communication-script-provider { 
  float: right; 
  margin: 1em 0; 
}
.case-study-answer-communication-script-date { 
  clear: both; 
  margin: 1em 0; 
}
.case-study-answer-communication-script-footer { 
  border: 2px solid #000000; 
  font-weight: bold; 
  padding: .6em; 
}

@media only screen and (max-width: 600px) { 
	.case-study { 
    margin-left: 1em; 
  }
}


/***********************************************************************************
 * Misc 
 ***********************************************************************************/
.cdc-training-box {
  border: 1px solid #000000;
  background-color: #e6e6e6;
  padding: 0 1em;
}

.pre-post-test-buttons {
  text-align: right;
  margin: 1em 0;
}

.course-objectives h2 {
  font-size: 1.075rem;
  font-style: italic;
  margin: .5em 0 0 0;
  color: #000000;
}
.course-objectives p {
  margin: 0 0 0 0;
}
.course-objectives ol {
  margin-top: .2em;
}

.training-activity h3 {
  margin: 2em 0 .2em 0;
}
.training-activity h3+p {
  margin-top: .2em;
}

.instruction-text {
  color: #a02321;
}


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