html,
body {
    padding: 0;
    margin: 0;
    position: relative;
    height: 100%;
    background-color: #E8EAEF;
    scroll-behavior: smooth;
}



.list-group{
    display:inline-block;
    padding-left:30px;
 }

/* body .content{
  min-height: 60% !important;
} */
body header {
    background-color: #21305f;
}

body header .title {
    font-size: 24px;
    padding-top: 34px;
    color: white;
    text-align: right;
}

body header .title a {
    color: white;
    text-decoration: none;
}

body header .nhswales-logo {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
}

body header .fhir-logo {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
}

body header .fhir-logo-size {
    width: 350px;
}

body header .navbar-default {
    text-align: center;
    background-color: #21305f;
    color: white
}

.nav {
    text-align: center;
}

.navbar {
    margin-bottom: 0px;
    border-bottom: 3px solid #F8CA4D;
}

.nav.navbar-nav li a {
    color: white;
}

.nav.nav-stacked {
    margin-top: 20px;
    border-top: 1px dotted #F8CA4D;
    border-bottom: 1px dotted #F8CA4D;
    width: 262px;
}

.nav.nav-stacked li a {
    text-align: left;
}

table.regular{
    background-color: #FBF9F9;
}

body .main{
  width: 100%;
  margin: 0;
  background-color: white;
}

body .content {
    overflow: hidden;
    min-height: 600px;
    position: relative;
    height: auto !important;
    margin-bottom: -155px;
    padding-bottom: 155px;
}

body footer {
    background-color: #E8EAEF;
    color: #101B42;
    min-height: 19%;
    padding-top: 20px;
    border-top: 2px solid #97AAC0;
    width:100%;
    position:relative;
    bottom:0;
    left:0;
    padding-bottom: 15px;
}

.tagactive{
    background-color: green;
    padding: 3px;
    color: white;
    float: right;
}

.tagdraft{
    background-color: Orange;
    padding: 3px;
    color: #fff;
    float: right;
}

.tagexperimental{
    background-color: red;
    padding: 3px;
    color: #fff;
    float: right;
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
  transition: 0.3s;
  border-radius: 10px; /* 5px rounded corners */
  display: table-cell;
  margin: 20px;
  min-height: 120px !important;
  /*padding: 30px*/
}

/* Add rounded corners to the top left and the top right corner of the image */
.card img {
  border-radius: 10px 10px 0 0;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
}


/* 
    This is in support of having a side panel built off the dynamic index function.
    SHould have same look as Nav classes - EOS
*/

.guidancesidepanel {
    border-top: 1px dotted #F8CA4D;
    border-bottom: 1px dotted #F8CA4D;
    padding: 0px;
}

.guidancesidepanel > ul {
    padding: 0px;
}

.guidancesidepanel > ul > li {
    display: none;
}

.guidancesidepanel > ul > ul {
    display: block;
    padding: 0px;
}

.guidancesidepanel > ul > ul {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.guidancesidepanel > ul > ul > li {
    padding-left: 5px;
}

.guidancesidepanel > ul > ul > li > a {
    padding: 10px 20px;
    display: block;
    position: relative;
    text-align: left;
}

.guidancesidepanel > ul > ul > li > a:hover {
    text-decoration: none;
    background-color: #eee;
}

#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;
}



@media (min-width: 450px) {
    
    body header .nhswales-logo {
        text-align: center;
        margin-top: 10px;
    }

    body header .hl7-logo {
        display: none;
    }

    
    .card {
        display: block;
        padding-top: 10px;
    }
    

    body header .title {
        font-size: 18px;
        padding-top: 10px;
        color: white;
        text-align: center;
    }

    body footer .logo {
        justify-content: center;
        text-align: center;
    }

    body footer .links {
        justify-content: center;
        text-align: center;
        padding-top: 20px;
    }

    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
    
    /* .nav.navbar-nav li .dropdown-menu li a {
        color: #F8CA4D;
        text-align: centre;
    } */
}
@media (max-width: 767px){
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: 275px;
        margin-top: 0;
        border: 0;
        box-shadow: none;
        background-color: #F8CA4D;
    }
}

@media (min-width: 768px) {
    .nav.navbar-nav li .dropdown-menu li a {
        color: #21305f;
    }
 }

@media (min-width: 992px) { 
    
    body header .hl7-logo {
        display: block;
        text-align: right;
        margin-top: 23px;
    }
    
    body footer .logo {
        float: left;
    }
    
    body header .title {
        font-size: 24px;
        padding-top: 34px;
        color: white;
        text-align: right;
    }

    .card {
        display: table-cell;
        padding-top: 5px;
    }

    body footer .links {
        padding-top: 5px;
        float:right;
        text-align: right;
    }

    .nav.navbar-nav li .dropdown-menu li a {
        color: #21305f;
    }

}



#div.warning {
    display: block;
    background-color: #fcf8e3;
    border-color: #faebcc;
    border-width: 1px;
    border-style: solid;
    color: #8a6d3b;
    padding: 15px;
    border-radius: 4px;
}

div.warning {
    display: block;
    background-color: #fcf8e3;
    border-color: #FF0000;
    border-width: 3px;
    border-style: solid;
    color: #8a6d3b;
    padding: 15px;
    border-radius: 4px;
}
span.url {
    background-color: #f9f2f4;
    color: #c7254e;
    border-radius: 4px;
}

.tab-wrap{ margin:0 auto;}
.tab-wrap .tab-head{ text-align:left; display:table; padding-left: 0px;}
.tab-wrap *{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.tab-wrap .tablink{display:table-cell;border-bottom:3px solid transparent;padding:5px 8px;color:rgba(0,0,0,0.87); cursor:pointer;}
.tab-wrap .tablink:hover{color: #59BFD9 }
.tab-wrap .tablink.tab-active{border-color:#59BFD9; color:#0D91BD;}
.tab-wrap .tab-main{border:1px solid rgba(0,0,0,0.1); padding:0 20px 20px; }
.tab-wrap .tabcontent{display:none;padding-top:20px; font-size:15px; color:rgba(0,0,0, 0.87);}
.tab-wrap .tabcontent.active{display:block}


.tt {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
}

.tt .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tt .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tt:hover .tooltiptext {
  visibility: visible;
}

.ImplementWarn:before {
  content: "Important: ";
  font-weight: bold;
  color: black
}

.ImplementWarn:after {
  content: "Some of the content in this FHIR Implementation Guide is under development. Please ensure that you check the status of the resources you plan on using.";
  color: black
}


.ClinicalWarn:before {
  content: "Important: ";
  font-weight: bold;
  color: black
}

.ClinicalWarn:after {
  content: "Clinical examples are undergoing review and will be updated in a future release. For illustrative purposes only, do not use to guide implementation.";
  color: black
}


.ExperiWarn:before {
  content: "Important: ";
  font-weight: bold;
  color: black
}

.ExperiWarn:after {
  content: "These are currently experimental profiles that are under review. These pages will be updated in a future release.";
  color: black
}

.ExtLinkWarn:before {
  content: "Important: ";
  font-weight: bold;
  color: black
}


.ExtLinkWarn:after {
  content: "Some of the links provided on this page are resources external to NHS Wales. While every effort has been made to ensure the information provided is appropriate at the time of publication we cannot guarantee the veracity of the content. The content contained on these sites are the responsibility of the owner and may change without warning. Links may also cease to work if the creator has decided to withdraw the page and we would ask you to inform the data standards team via the help and support page if you come across this.";
  color: black
}

 /* Equal width table cell */
table#resourceIndex {
  width: 100%;
    td.resource {
        width: 27%;
    }  
    td.status{
        width: 6%;
    }
}