@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:  var(--navbar-bg-color);
  }

  
  .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 */
  }
  
  
  
  .feedback {
      color: #e0e0e0;
      padding:1px ;
      font-size: 80%;
      background-size: 17px 17px;
      background-position: left center;
      background-repeat: no-repeat;
      margin-left: 7px;
      padding-left: 7px;
      padding-right: 7px;
      float: right ; /* none or right */
      border-radius: 6px; 
      border: 0.5px solid #ffffff;
    }
    
    .feedback:hover  {
      color: #101010;
      border: 0.5px solid #777;
      background-color: #f7f7f7;
    }
    
    .feedback:after {  /* 'feedback:before' or after for icon before or after text  */
      content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguMzE4NzIgMCAwIC4zMTg3MiAtMi4xNDYxIC0yLjE3NTcpIiBmaWxsPSIjODgyMjIyIj48cGF0aCBkPSJtNTUuNzM2IDEzLjYzNi00LjM2OC00LjM2MmMtMC40NTEtMC40NTEtMS4wNDQtMC42NzctMS42MzYtMC42NzdzLTEuMTg0IDAuMjI1LTEuNjM1IDAuNjc2bC0zLjQ5NCAzLjQ4NCA3LjYzOSA3LjYyNiAzLjQ5NC0zLjQ4M2MwLjkwMy0wLjkwMiAwLjkwMy0yLjM2NSAwLTMuMjY0eiIvPjxwb2x5Z29uIHBvaW50cz0iMjEuOTIyIDM1LjM5NiAyOS41NjIgNDMuMDIzIDUwLjYwNyAyMi4wMTcgNDIuOTY3IDE0LjM5Ii8+PHBvbHlnb24gcG9pbnRzPSIyNy45MTMgNDQuNjU0IDIwLjI3MyAzNy4wMjggMTguNjQyIDQ2LjI4Ii8+PHBhdGggZD0ibTQxLjM5MyA1MC40MDNoLTI4LjgwNnYtMjguODA2aDIwLjMyOWw1LjAxLTVoLTI3LjEwNmMtMS43NzkgMC0zLjIzNCAxLjQ1NS0zLjIzNCAzLjIzNHYzMi4zMzljMCAxLjc3OSAxLjQ1NSAzLjIzNCAzLjIzNCAzLjIzNGgzMi4zMzljMS43NzkgMCAzLjIzNC0xLjQ1NSAzLjIzNC0zLjIzNHYtMjMuMTIxbC01IDQuOTkxeiIvPjwvZz48L3N2Zz4K')!important;
    }
    
    .feedback:before {  /* 'feedback:before' or after for icon before or after text  */
      content: none !important;
      padding-left: 3px;
      padding-right: 3px;
    }
  
    .feedback-dropdown a {
      display: block;
      padding: 5px;
      text-decoration: none;
      color: black;
  }
  
  .feedback-dropdown a:hover {
      background-color: #f0f0f0;  /* Light gray background */
      color: #000;  /* Black text */
      cursor: pointer;
  }