@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* WHO Content IGs */
:root {
  --ig-status-text-color: #00376d;
  /* 1. IG Title and status text color */
  --navbar-bg-color: #00477d;
  /* 2. Header container color */
  --footer-bg-color: #505050;
  /* 3. Footer background color*/
  --footer-container-bg-color: #00477d;
  /* 4. Footer container color */
  --btn-hover-color: #0070A1;
  /* 6. Menu button hover color */
  --ig-header-color: #f6f7f9;
  --toc-box-border: navy;
  --toc-box-bg-color: #f6f7f9;
  --must-color: #4d0000;
  --should-color: #4d4000;
  --may-color: #00004d;
}


/* Generic settings common to all content IGs */
:root {
  --stripe-bg-color: #999999;
  /* 5. Header strip color */
  --btn-active-color: #0078d4;
  /* 7. Menu button active color */
  --btn-text-color: #e6e6e6;
  /* 8. Menu button text color */
  --stu-note-background-color: #fff2ff;
  /* 19. (STU) Note box background color */
  --stu-note-border-left-color: #ffa0ff;
  /* 20. (STU) Note box border color */
}

#hl7-nav {
  line-height: 50px;
  float: left;
  margin-top: 4px;
}

#hl7-nav a {
  color: inherit;
}

#hl7-logo {
  float: left;
  margin-left: 6px;
}

#hl7-search {
  line-height: 50px;
  float: right;
  margin-top: 4px;
  color: maroon;
}

#hl7-search a {
  color: inherit;
}

#project-nav {
  flex: 0 0 auto;
  /* Do not grow or shrink, and use auto basis */
  margin-right: auto;
  /* This will push everything else to the right */

  line-height: 50px;
  float: left;
  margin-top: 4px;
  margin-bottom: 4px;
  color: #808080;
  display: flex;
  /* Use flexbox for alignment */
  align-items: center;
  /* Centers the content vertically */
  justify-content: flex-start;
  /* Aligns the content to the left */
  padding: 0 20px;
}

#project-logo {
  float: left;
  margin-left: 3px;

}

#who-logo {
  display: flex;
  /* Apply flexbox for the logo container as well */
  align-items: center;
  /* Center align the items vertically */
}


/* ----------note-to-balloters styling------*/

.note-to-balloters::before {
  white-space: pre;
  content: "Note To Balloters\A ";
  #background-color: yellow;
  color: red;
  font-weight: bold;
}

.note-to-balloters,
.stu-note {
  margin: 5px;
  padding: 10px;
  border-left-style: solid;
  display: flow-root;
}

.stu-note::before {
  white-space: pre;
  content: "STU Note\A ";
  #background-color: yellow;
  color: red;
  font-weight: bold;
}


dl dd {
  padding-left: 20px;
}

dl dl {
  padding-left: 20px;
}

table.checklist {
  width: 100%;
}


table.checklist td.checklist-section {
  width: 10%;
}

table.checklist td.checklist-required {
  width: 8%;
}

table.checklist td.checklist-description {
  width: 30%;
}

table.checklist td.checklist-artifacts {
  width: 30%;
}

table.checklist th {
  background-color: CornflowerBlue;
}

table.checklist td {
  background-color: LightBlue;
}

table.checklist tr {
  border-top: 1px solid CornflowerBlue;
}


figure img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figure figcaption {
  border-top: 1px solid CornflowerBlue;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4px;
}


em {
  color: ForestGreen;
  text-decoration: underline;
}









.dropdown-menu>li {
  position: relative;
}

.dropdown-menu>li>ul {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: 0;
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

/* Styles for dropdown menu to support one more dropdown level */

.dropdown-menu>li:hover>ul,
.dropdown-menu>li:focus>ul {
  display: block;
}

.dropdown-menu>li>a {
  display: block;
  padding: 8px 25px 8px 15px;
  /* Adjust padding to make space for the caret */
  color: #333;
  text-decoration: none;
  position: relative;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-color: #f8f9fa;
}

/* Existing caret styles */
.nav .caret,
.dropdown-menu>li>a.dropdown-toggle::after {
  border-top-color: #428bca;
  border-bottom-color: #428bca;
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  /* Pointing right */
  content: "";
}

.nav a:hover .caret {
  border-top-color: #2a6496;
  border-bottom-color: #2a6496;
}


/* Adjust padding for dropdown submenu items */
.dropdown-menu>li>ul>li>a {
  display: block;
  padding: 8px 50px 8px 15px;
  /* Add extra padding on the right */
  color: #333;
  text-decoration: none;
}

.dropdown-menu>li>ul>li>a:hover,
.dropdown-menu>li>ul>li>a:focus {
  background-color: #f8f9fa;
}

.dropdown-menu>li>ul>li:hover>a::after,
.dropdown-menu>li>ul>li.dropdown-submenu:hover>a::after {
  display: none;
  /* Remove the caret completely */
}

.dropdown-menu>li>ul>li>ul {
  display: none;
}

.dropdown-menu>li>a {
  display: block;
  padding: 8px 35px 8px 15px;
  /* Adjust padding to make space for the caret */
  color: #333;
  text-decoration: none;
  position: relative;
}

.dropdown-menu>li>a {
  padding: 8px 35px 8px 15px;
  /* Adjust padding to make space for the caret */
  color: #333;
  text-decoration: none;
  position: relative;
}

.nav>li>a.dropdown-toggle {
  padding-right: 25px;
  padding-left: 15px;
}

/* Style the caret for submenu items */

.dropdown-menu>li>ul>li>a.dropdown-toggle::after {
  content: "";
  border-top: 6px solid transparent;
  border-right: 6px solid;
  border-bottom: 6px solid transparent;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
}

:root {
  --showtodo: "off";
  --display-todo: none;
  /* Default display value */
}

/* If --showtodo is set to "on", modify the --display-todo variable */
[data-showtodo="on"] {
  --display-todo: block;
}

.todo {
  display: var(--display-todo);
  background-color: #ffe0e0;
  /* Very light pink */
}


h1,
h2,
h3,
h4,
h5,
h6 {
  padding-top: 1.2em;
}

.full-width {
  width: 100%;
}


.navbar-right-container {
  display: flex;
  align-items: center;
  /* Vertically center the items */
  justify-content: flex-end;
  /* Align items to the end (right) */
  height: 100%;
  /* Make sure the container stretches full height */
}

/* Style for the language selector to auto-margins push it to the right */
.language-selector {
  margin-left: auto;
  /* This pushes the language selector to the right */
}


.header-container {
  display: flex;
  justify-content: space-between;
  /* This will put space between the two children divs */
  align-items: center;
  /* This will vertically center the contents */
}

.language-selector {
  background-color: #00477d;
  /* Blue background */
  color: white;
  /* White text */
  display: flex;
  align-items: center;
  padding: 5px 10px;
  /* Adjust padding as needed */
  border-radius: 5px;
  /* Optional: if you want rounded corners */
}

.language-selector label {
  margin-right: 10px;
  /* Spacing between label and the select box */
}

.language-selector select {
  background-color: #00477d;
  /* Blue background */
  color: white;
  /* White text */
  border: none;
  /* Remove default border */
  -webkit-appearance: none;
  /* Remove default arrow from webkit browsers */
  -moz-appearance: none;
  /* Remove default arrow from Mozilla browsers */
  appearance: none;
  /* Remove default arrow */
  padding: 5px;
  /* Adjust padding as needed */
  margin-right: 5px;
  /* Space before the icon */
}

.language-selector .fa-caret-down {
  color: white;
  /* White icon */
}

/* Optional: add custom styles for the select box on focus */
.language-selector select:focus {
  outline: none;
  /* Removes the default focus outline */
}


body {
  font-family: 'Noto Sans', sans-serif !important;
  height: fit-content !important
}

td,
p, li {
  font-family: 'Noto Sans', sans-serif !important;
  /* font-weight: 500; */
}





.container {
  width: 100% !important;
  max-width: none !important;
  /* Reset any max-width that might be applied elsewhere */
  background-color: var(--toc-box-bg-color) !important;
  color: #000 !important;
  padding: 0 20px
    /* Add 20px padding on all sides */
}

@media (min-width: 2200px) {
  .container {
    max-width: 1980px !important;
    /* Set the max width to 1980px for screens wider than 2200px */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

body {
  background-color: var(--toc-box-bg-color) !important;
}

.nav-collapse,
.collapse,
.navbar-inverse-collapse {
  background-color: #cec
}


.navbar {
  background-color: #757 !important
}

#segment-navbar .navbar .container {
  background-color: var(--navbar-bg-color) !important;
  /* Overrides the default color for the container inside the navbar */
}

/* 
.navbar-inverse {
  background-color: var(--navbar-bg-color) !important;;
} */


#segment-header>.container {
  background-color: var(--ig-header-container-color) !important;
  /* Overrides the default color for the container inside the header */
  position: relative;
  /* To make z-index effective */
  z-index: 10;
  /* Higher than the z-index (if any) of the element below */
  box-shadow: 0px 6px 8px var(--shadow-color, rgba(130, 130, 13, 0.1)) !important;
  /* Assuming you define --shadow-color */
}


div.markdown-toc {
  float: right;
  /* or 'float: right;' depending on where you want the TOC to appear */
  /*margin-right: 20px;*/
  /* This adds space between the TOC and the text wrapping around it */
  /* background-color: unset; */
  padding: 3px;
  border: 2px solid var(--toc-box-border);
}



.markdown-toc ul {
  margin: 0px 3px;
  padding: 0 0 0 15px;

}



.markdown-toc ul li {
  border-top: 1px solid var(--toc-box-border);
  line-height: 1.5;
  margin-bottom: -4px;
  margin-top: -4px;
  /* Overlap borders between items */
  padding: 7px;
  list-style-type: none;
}

/* Add a bottom border to the last item */
.markdown-toc ul li:last-child {
  border-bottom: 1px solid var(--toc-box-border);
}


#segment-footer>.container {
  background-color: var(--footer-container-bg-color) !important;
  color: var(--footer-text-color) !important;
}

/* Ensure the navbar doesn't collapse into the space */
#segment-navbar {
  flex: 1 100%;
}

#segment-breadcrumb>div #segment-navbar>.container,
#segment-content>div {
  padding: 0 25px;
}

#ig-status {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  /* Needed for layering */
}

#ig-status p {
  background-color: white;
  /* White background for the text */
  padding: 10px 17px;
  /* Add some padding around the text */
  border-radius: 5px;
  /* Optional: for rounded corners */
  position: relative;
  /* Ensure it's above the watermark */
  z-index: 2;
  /* Higher z-index to be on top */
}


#ig-status.ig-status-draft {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150px' height='150px'><rect width='800%' height='100%' fill='transparent' /><text transform='translate(30, 50) rotate(-35)' fill='rgba(245,45,45,0.5)' font-family='Arial' font-weight='bold' font-size='20'>DRAFT</text></svg>");
  background-size: calc(50% / 5) 100px;
  background-repeat: repeat-x;
}


#ig-status.ig-status-retired {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150px' height='150px'><rect width='800%' height='100%' fill='transparent' /><text transform='translate(30, 60) rotate(-35)' fill='rgba(245,45,45,0.5)' font-family='Arial' font-weight='bold' font-size='20'>RETIRED</text></svg>");
  background-size: calc(50% / 5) 100px;
  background-repeat: repeat-x;
}




.info-box {
  border: 2px solid #004080;
  border-radius: 7px;
  padding: 10px;
  margin: 10px 0;
  background-color: #f0f0f0;
  position: relative;
  font-size: 0.9em;
  line-height: 1.6;  
}

.info-title {
  font-weight: bold;
  color: #004080;
  margin-bottom: 10px;
  display: flex;
  align-items: center; /* Ensure the text and icon align vertically */
  /* padding-left: 30px; */
}

.info-box .info-title:before {
  font-family: 'Font Awesome 5 Free';
  content: ""; /* This will be dynamically filled based on the class */
  margin-right: 10px;
  display: block;
  width: 20px; /* Ensure sufficient space for the icon */
  text-align: center;
}

.info-box.must {
  border-color: var(--must-color);
}

.info-box.must .info-title,
.info-box.must .info-title:before {
  color: var(--must-color);
}

.info-box.should {
  border-color: var(--should-color);
}

.info-box.should .info-title,
.info-box.should .info-title:before {
  color: var(--should-color);
}

.info-box.may {
  border-color: var(--may-color);
}

.info-box.may .info-title,
.info-box.may .info-title:before {
  color: var(--may-color);
}
.info-box.must .info-title:before {
  content: "\f023"; /* Lock icon for "must" */
}

.info-box.should .info-title:before {
  content: "\f164"; /* Thumbs up icon for "should" */
}

.info-box.may .info-title:before {
  content: "\f05a"; /* Information circle icon for "may" */
}

.info-box pre {
  display: inline-block; /* Inline-block makes it flow in line but respect whitespace */
  background: #e1e1e1;  /* Light grey background for distinction */
  padding: 2px 4px;      /* Padding around the text */
  margin: 0 2px;         /* Margins for spacing */
  border-radius: 4px;    /* Rounded corners */
  vertical-align: middle; /* Adjusts the vertical alignment to match baseline of surrounding text */
  white-space: pre-wrap; /* Allows text to wrap if necessary */
}