html, body {
  padding: 0;
  margin: 0; }

body {
  position: relative;
  height: 100%; }
  body header {
    background-color: #f5f5f5; }
    body header .title {
      font-size: 24px;
      padding-top: 23px;
      color: black; }
    body header .fhir-version {
      font-size: 10px;
      margin-top: 2px;
      color: black; }
      body header .title a {
        color: black;
        text-decoration: none; }
    body header .fhir-logo {
      margin-top: 0px;
      margin-bottom: 5px; }
    body header .synapxe-logo {
      text-align: right;
      margin-top: 20px; 
      margin-bottom: 5px; }
    body header .logout-link {
      text-align: right;
      margin-top: 0px; }
    body header .version-link {
      text-align: right;
      font-size: 10px;
      padding-top: 10px;
      color: black; }
  body .content {
    overflow: hidden;
    min-height: 100%;
    position: relative;
    height: auto !important;
    margin-bottom: -155px;
    padding-bottom: 155px; }
  body footer {
    background-color: #636363;
    color: #E0E0E0;
    height: 155px;
    position: relative;
    padding-top: 40px; }

.dynamic {
    display: none;
    background-color: transparent;
    color: transparent;
    padding: 5px;
    text-align: center;
    height: 30px;
}

    .dynamic.versions-banner.not-latest {
        background-color: #f0ad4e;
        color: #fff;
    }

    .dynamic.versions-banner.latest {
        background-color: #5cb85c;
        color: #fff;
    }

/* Wrapper */
.cool-tabs { margin: 0 auto; }
.cool-tabs * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

/* Tab header — remove Bootstrap's default bottom border, keep left-aligned */
.cool-tabs .nav-tabs {
  border-bottom: none;
  padding-left: 0;
  display: table;
}

/* Each tab item — display as table-cell to match, override Bootstrap float */
.cool-tabs .nav-tabs > li {
  display: table-cell;
  float: none;
}

/* Tab anchor — reset Bootstrap border/background, apply underline style */
.cool-tabs .nav-tabs > li > a {
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  margin-right: 0;
  padding: 5px 8px;
  color: rgba(0, 0, 0, 0.87);
  background-color: transparent;
  cursor: pointer;
}

/* Hover */
.cool-tabs .nav-tabs > li > a:hover {
  color: #59BFD9;
  background-color: transparent;
  border-color: transparent;
}

/* Active tab */
.cool-tabs .nav-tabs > li.active > a,
.cool-tabs .nav-tabs > li.active > a:hover,
.cool-tabs .nav-tabs > li.active > a:focus {
  border: none;
  border-bottom: 3px solid #59BFD9;
  color: #0D91BD;
  background-color: transparent;
  outline: none;
  box-shadow: none;
}

/* Focus/active ring suppression — all tabs */
.cool-tabs .nav-tabs > li > a:focus,
.cool-tabs .nav-tabs > li > a:active,
.cool-tabs .nav-tabs > li > a:focus-visible,
.cool-tabs .nav-tabs > li:focus,
.cool-tabs .nav-tabs > li:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Content container */
.cool-tabs .tab-content {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 20px 20px;
}

/* Individual panels — Bootstrap handles show/hide via .active, but set font/colour */
.cool-tabs .tab-content > .tab-pane {
  padding-top: 20px;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.87);
}

.navbar {
  background-color: #f5f5f5;
  margin-bottom: 0px;
}

#scrollBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #21305f; /* Set a background color */
  border: 2px solid #F8CA4D;
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 16px; /* Increase font size */
}

#scrollBtn:hover {
  background-color: #FBF9F9; /* Add a dark-grey background on hover */
  color: #21305f;
}