@import "fontawesome/css/all.min.css";
@import 'fonts/fonts.css';

:root {
    /* OHH colors from storybook */
    --ohh-red: #E3393B;
    --ohh-light-blue: #00C3D9;
    --ohh-medium-blue: #267D9C;
    --ohh-dark-blue: #353A57;
    --light-grey-blue: #EBF0F4;
    --ohh-hover-color-header: #CFE0E7;
    --dark-grey-blue: #9DC5D2;
    --input-grey-bg: #FAFAFA;
    --medium-grey: #ccc;
    --font-family: Proxima Nova, sans-serif;
    --font-family-header: Proxima Soft, sans-serif;

    /* https://build.fhir.org/ig/FHIR/ig-guidance/colors.html */
    --ig-status-text-color: #fff; /* 1. IG Title and status text color */
    --navbar-bg-color: var(--light-grey-blue); /* 2. Header container color */
    --footer-bg-color: var(--light-grey-blue); /* 3. Footer background color*/
    --footer-container-bg-color: var(--light-grey-blue); /* 4. Footer container color */
    --stripe-bg-color: var(--light-grey-blue); /* 5. Header strip color */
    --btn-hover-color: var(--ohh-hover-color-header); /* 6. Menu button hover color */
    --btn-active-color: var(--dark-grey-blue); /* 7. Menu button active color */
    --btn-text-color: var(--ohh-medium-blue); /* 8. Menu button text color */
    --btn-gradient-start-color: var(--dark-grey-blue); /* 9. Menu item gradient start color */
    --btn-gradient-end-color: var(--ohh-medium-blue); /* 10. Menu item gradient end  color */
    --btn-gradient-start-color-alpha: var(--light-grey-blue); /* 11. Menu item gradient start color (with alpha) */
    --btn-gradient-end-color-alpha: var(--ohh-medium-blue); /* 12. Menu item gradient end color (with alpha) */
    --link-color: var(--ohh-medium-blue); /* 13. Hyperlink text color */
    --link-hover-color: var(--ohh-medium-blue); /* 14. Hyperlink text hover color */
    --toc-box-bg-color: var(--light-grey-blue); /* 17.  TOC box background color */
    --toc-box-border: 1px solid var(--ohh-medium-blue); /* 18. TOC box border definition */
    --stu-note-background-color: #fef4d5; /* 19. (STU) Note box background color */
    --stu-note-border-left-color: var(--ohh-red); /* 20. (STU) Note box border color */
    --ig-header-color: rgba(var(--ohh-medium-blue), 0.1); /* 21. Header color (sides) */
    --ig-header-container-color: rgba(var(--ohh-medium-blue), 0.1); /* 22. Header container color (center) */
    --footer-nav-bg-color: var(--light-grey-blue); /* 23. Footer navigation background color*/
    --footer-text-color: var(--ohh-dark-blue); /* 24. Footer highlight font color */
    --footer-hyperlink-text-color: var(--ohh-medium-blue); /* 25. Footer hyperlinks font color */
    --footer-highlight-text-color: var(--ohh-dark-blue); /* 26. Footer highlight font color */
    --breadcrumb-bg-color: #fff; /* 27. Breadcrumb background color */
    --breadcrumb-text-color: var(--ohh-dark-blue); /* 28. Breadcrumb font color */
    --dragon-background-color: #ebe7ee; /* 29. Dragon background color */
    --dragon-font-color: #400070; /* 30. Dragon font color */
}

/* We don't publish usage statistics, so we need to hide the link since it is broken. */
#segment-content > div > div > div > div > p:nth-child(12) {
    display: none;
}

.navbar-inverse .navbar-nav li > a::after {
    margin-left: 5px;
}

.navbar-inverse .navbar-nav > .dropdown > a > .caret {
    border: none;
    margin-left: 5px;
    transform: rotate(45deg);
    height: 7px;
    width: 7px;
    border-right: 2px solid var(--ohh-medium-blue);
    border-bottom: 2px solid var(--ohh-medium-blue);
}

.navbar-inverse .navbar-nav > .dropdown > a:hover > .caret {
    border-right-color: var(--ohh-dark-blue);
    border-bottom-color: var(--ohh-dark-blue);
}

.navbar .navbar-nav > .dropdown > a .caret {
    border-right-color: var(--ohh-medium-blue);
    border-bottom-color: var(--ohh-medium-blue);
}

.navbar-inverse .navbar-nav > .dropdown > a:focus:hover > .caret {
    border-right-color: var(--ohh-dark-blue);
    border-bottom-color: var(--ohh-dark-blue);
}

.navbar .navbar-nav > .dropdown > a:focus .caret {
    border-right-color: var(--ohh-medium-blue);
    border-bottom-color: var(--ohh-medium-blue);
}

.stu-note::before {
    background-color: transparent;
    color: var(--ohh-red);
}

#ig-status p {
    color: var(--ohh-medium-blue);
}

#ig-status p span:first-child {
    font-family: var(--font-family-header);
    font-size: 24px !important;
    font-weight: 800;
    line-height: 140%;
    padding: 30px 40px 20px 40px;
    background: transparent url(../img/fhir-blue.png) 0 50% no-repeat;
}

#ig-status p span:last-child {
    display: none !important;
}

body,
table.grid td,
.hierarchy,
.navbar .nav > li > a,
td,
li,
p {
    font-family: var(--font-family);
    color: var(--ohh-dark-blue);
}

body,
p,
table.grid td,
li {
    font-size: 15px;
}
body {
    margin-top: 10px;
}

table.grid {
    width: 100%;
}

table.grid colgroup col {
    width: 30% !important;
}

h1, h2, h3 {
    font-family: var(--font-family-header);
}

h4, h5, h6 {
    font-family: var(--font-family);
}

h5:before, h4:before, h3:before, h2:before, h1:before {
    color: var(--medium-grey) !important;
}

h4 {
    font-size: 18px;
}

.hierarchy,
table.dict td,
td {
    font-size: 13px;
}

h5 em,
h4 em {
    margin-left: 10px;
}

p > img {
    float: none;
}

p > img.float-left {
    float: left;
}

body {
    min-height: 100dvh;
}

#segment-navbar > .container {
    max-width: 100%;
    height: 80px;
}

#publish-box {
    display: none;
}

#segment-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 15px;
}

@media (min-width: 1115px) {
    #segment-header {
        background: transparent url(../img/OHH-7.svg) 0 50% no-repeat;
    }
}

#segment-content {
    padding-bottom: 100px;
}

#home {
    margin-top: 5px;
}

.breadcrumb {
    padding-left: 0;
    margin-top: 10px;
}

.navbar-nav {
    height: 80px;
    display: flex;
    align-items: center;
}

.navbar-nav > li {
    white-space: nowrap;
    font-size: 22px;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--ohh-medium-blue);
}

.navbar-nav li > a {
    font-weight: 800;
}

.navbar-nav > li > a {
    font-size: 14px;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--ohh-medium-blue) !important;
    padding: 0 20px !important;
}

@media (min-width: 1006px) {
    .navbar-nav > li > a {
        font-size: 18px;
        padding: 0 20px !important;
    }
}
@media (min-width: 1115px) {
    .navbar-nav > li > a {
        font-size: 22px;
        padding: 0 30px !important;
    }
}

@media (min-width: 1370px) {
    .navbar-nav > li > a {
        padding: 0 40px !important;
    }
}

.navbar-nav > li > a:hover {
    color: var(--ohh-dark-blue) !important;
}

.navbar-nav > .dropdown > .dropdown-menu {
    background-color: var(--navbar-bg-color);
}

.navbar-nav > .dropdown > .dropdown-menu > li > a {
    color: var(--ohh-dark-blue)
}

.navbar-nav > .dropdown > .dropdown-menu > li > a:hover {
    background-color: var(--dark-grey-blue);
    background-image: none;
    color: var(--ohh-dark-blue);
}


.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    background-color: var(--input-grey-bg) !important;
    font-family: var(--font-family);
}

.ui-widget-header {
    background-color: var(--light-grey-blue);
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: var(--ohh-medium-blue);
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border-color: var(--ohh-medium-blue);
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border-color: var(--ohh-medium-blue);
    background: var(--ohh-hover-color-header) url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
    color: var(--ohh-dark-blue);
}

pre {
    overflow: auto;
}