.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: var(--nictiz-orange);
  background-image: none;
  color: #ffffff;
}

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

.nav a:hover .caret {
  border-top-color: var(--nictiz-orange);
  border-bottom-color: var(--nictiz-orange);
}


/* 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: var(--nictiz-orange);
  background-image: none;
  color: #ffffff;
}

.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);
}

/* ============================================================
   Nictiz color scheme (orange-led)

   The fhir2.base.template themes the whole site through CSS
   custom properties, so overriding them here recolors the
   navbar, footer, links, callouts and tables from one place.

   Palette:
     --nictiz-orange       #E5670B  primary highlight
     --nictiz-orange-dark  #C4560A  links, borders, active state
     --nictiz-orange-tint  #FCEFE7  light backgrounds, callouts
     --nictiz-grey-light   #F0EEE9  section backgrounds, zebra rows
     --nictiz-grey-mid     #DAD7CE  panel fills, rules
     --nictiz-grey-dark    #595955  footer, dark table headers
   ============================================================ */

:root {
  --nictiz-orange: #E5670B;
  --nictiz-orange-dark: #C4560A;
  --nictiz-orange-tint: #FCEFE7;
  --nictiz-grey-light: #F0EEE9;
  --nictiz-grey-mid: #DAD7CE;
  --nictiz-grey-dark: #595955;

  /* Links - Nictiz orange */
  --link-color: var(--nictiz-orange-dark);
  --link-hover-color: var(--nictiz-orange);

  /* Top navbar - light orange bar; nav text is dark grey (rule below), and
     hover / open dropdown / current page all use solid orange with white text.
     --btn-hover-color is the hover background; --btn-active-color is the
     open/active background (the base default is a red #da0c23). */
  --navbar-bg-color: var(--nictiz-orange-tint);
  --btn-hover-color: var(--nictiz-orange);
  --btn-active-color: var(--nictiz-orange);

  /* Footer - dark warm grey */
  --footer-bg-color: var(--nictiz-grey-dark);
  --footer-container-bg-color: var(--nictiz-grey-dark);
  --footer-text-color: #ffffff;
  --footer-hyperlink-text-color: #ffffff;
  --footer-highlight-text-color: var(--nictiz-orange-tint);
  --footer-nav-bg-color: var(--nictiz-grey-light);

  /* Callouts / STU notes / publish + toc boxes - orange tint, not purple/yellow */
  --stu-note-background-color: var(--nictiz-orange-tint);
  --stu-note-border-left-color: var(--nictiz-orange);
  --publish-box-bg-color: var(--nictiz-orange-tint);
  --toc-box-bg-color: var(--nictiz-grey-light);
  --toc-box-border: 1px solid var(--nictiz-orange);

  /* Breadcrumb - warm grey */
  --breadcrumb-bg-color: var(--nictiz-grey-light);

  /* Top band: the title/logo row (--ig-header-*), the thin stripe above it,
     and the navbar all share the light orange so they read as one band that
     spans the full width (left and right aligned). */
  --ig-header-color: var(--nictiz-orange-tint);
  --ig-header-container-color: var(--nictiz-orange-tint);
  --stripe-bg-color: var(--nictiz-orange-tint);
  --ig-status-text-color: var(--nictiz-grey-dark);

  /* Standard IG Publisher chrome: the base template fills buttons, tab hovers
     and other gradients with a blue gradient (#428bca -> #357ebd). Recolour it
     to orange so the built-in components match the rest of the IG.
     The *-alpha values use the template's #AARRGGBB form. */
  --btn-gradient-start-color: var(--nictiz-orange);
  --btn-gradient-end-color: var(--nictiz-orange-dark);
  --btn-gradient-start-color-alpha: #ffE5670B;
  --btn-gradient-end-color-alpha: #ffC4560A;
}

/* Headings - dark grey */
h1, h2, h3, h4, h5 {
  color: var(--nictiz-grey-dark);
}

/* FHIR logo in the top-right of the header band, balancing the Nictiz logo on
   the left. Links to the FHIR spec; the trademark notice is in its title.
   margin-top centres the 42px wordmark against the taller (55px) Nictiz logo. */
#fhir-logo-link {
  float: right;
  margin-top: 15px;
  margin-right: 3px;
  line-height: 50px;
}

body {
  font-size: 13px;
}

/* Full-width light-orange title bar + navbar band with one orange accent line
   along the bottom edge (placed on the full-width segment so it spans edge to
   edge and lines up with the header above it). */
#segment-header {
  background-color: var(--nictiz-orange-tint);
}
#segment-navbar {
  background-color: var(--nictiz-orange-tint);
  border-bottom: 3px solid var(--nictiz-orange);
}
/* Nav links: dark grey on the light-orange bar - this overrides the global
   orange `a` colour so menu items never read as "darkish red". */
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a:link,
.navbar-inverse .navbar-nav > li > a:visited {
  color: var(--nictiz-grey-dark);
}
/* Hover, open dropdown and the current page: solid orange with white text. */
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: var(--nictiz-orange);
}
/* Navbar dropdown carets: the base template colours the resting caret light
   grey (#e6e6e6), which is nearly invisible on the light-orange bar. Make it
   dark grey at rest; hover and open states stay white (base default). */
.navbar-inverse .navbar-nav > .dropdown > a .caret {
  border-top-color: var(--nictiz-grey-dark);
  border-bottom-color: var(--nictiz-grey-dark);
}

/* The current page's item inside an open dropdown gets the base template's
   ".active" treatment, which paints a blue gradient background-image. Clear it
   so the highlighted item is a clean solid orange like the hover state. */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  background-color: var(--nictiz-orange);
  background-image: none;
}
#segment-breadcrumb,
#segment-content {
    background-color: white;
}

/* Tables.
   Content tables (Markdown / hand-written) use <thead>; the dense FHIR tree
   and differential tables do not - so scoping the orange header to
   `thead > tr > th` styles only content tables and leaves the tree tables alone. */
#segment-content table.grid > thead > tr > th {
  background-color: var(--nictiz-orange);
  color: #ffffff;
}
table.requirements-table th {
  background-color: var(--nictiz-orange);
  color: white;
}
table.requirements-table tbody tr:nth-child(odd) {
  background-color: var(--nictiz-grey-light);
}
table.obligation tr:first-child,
table.binding tr:first-child {
  background-color: var(--nictiz-grey-dark);
  color: #ffffff;
}

/* Artifact-page tabs (Content / Detailed Descriptions / Mappings / ...).
   The base template draws their borders and active-tab outline in a maroon
   (#955159); recolour to orange so they match the rest of the IG. The active
   tab text already follows --btn-active-color (orange). */
.nav-tabs,
.nav-tabs li a:hover,
.nav-tabs li a:focus {
  border-bottom-color: var(--nictiz-orange);
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--nictiz-orange-dark);
  border-color: var(--nictiz-orange) var(--nictiz-orange) transparent;
}

dd {
 margin-left: 2em;
}

div#hl7-nav {
    display: flex; align-items: center; margin: 0.5em;
}
div#hl7-nav a#hl7-logo {
    /*margin-right: 3em;*/
}
div#hl7-nav div#ig-status {
  display: table-cell;
    width: 100%;
    text-align: center;
}

th, td {
  padding: 5px 7px;
  text-align: left;
  vertical-align: top;
  border-bottom: 2px solid var(--nictiz-grey-mid);
}

th {
  color: var(--nictiz-orange);
  font-weight: 700;
  border-top: 2px solid var(--nictiz-grey-mid);
}

.dict td {
  /* Erase table borders for tables used within the detailed documentation of elements */
  border-bottom: none;
}

/* Header: the base template puts the logo (#hl7-nav) and the IG title
   (#ig-status) one under the other, so the logo floats above the title.
   On wider screens, put them on one row: logo on the left, title centred.
   The container's clearfix pseudo-elements would become grid items, so they
   are hidden. Narrow screens keep the stacked layout. */
@media (min-width: 768px) {
  #segment-header > .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  #segment-header > .container::before,
  #segment-header > .container::after {
    display: none;
  }
  #segment-header #hl7-nav {
    grid-column: 1;
    grid-row: 1;
    margin: 0.5em 0;
  }
  #segment-header #ig-status {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
  }
  #segment-header #ig-status p {
    margin: 0;
  }
}

/* Styling for the requirements */
.requirements-narrative ul {
  padding: 0 0 0 12px;
}

.req-origin-nl::before {
  content: url("../../assets/images/nl.svg");
  display: inline-block;
  width: 20px;
  margin-right: 0.4em;
  vertical-align: middle;
}

.req-origin-eu::before {
  content: url("../../assets/images/eu.svg");
  display: inline-block;
  width: 20px;
  margin-right: 0.4em;
  vertical-align: middle;
}

.req-not-addressed {
  background: var(--nictiz-grey-light);
  color: var(--nictiz-grey-dark);
}