:root {
    /* oefit colors */
    --oefit_grey: #4c626c;
    --oefit_light_blue: #afdff8;
    --oefit_medium_blue: #448bac;
    --oefit_dark_blue: #30637a;
    --oefit_purple: #606aa1;
    --oefit_blue_purple: #4157a3;
    --oefit_dark_green: #4e7970;
    --oefit_turquoise: #578184;
    /* fhg colors */
    --fhg_green: #179c7d;
    --fhg_steel_blue: #005b7f;
    --fhg_silver_grey: #a6bbc8;
    --fhg_accent_orange: #f58220;
    /* fhg secondary colors */
    --fhg_yellow: #fdb913;
    --fhg_burgundy: #7c154d;
    --fhg_aqua: #39c1cd;
    --fhg_lime: #b2d235;
    --fhg_sand: #d3c7ae;
    --fhg_graphit: #1c3f52;
    --fhg_petrol: #008598;
    --fhg_red: #bb0056;
    
    /* Dashboard defaults */
    --text_color: black;
    --graph_label_color: black;
    --link_color: var(--oefit_grey);
    --default_background_color: white;
    --default_border_radius: 5px;
    --default_dashboard_bar_color: var(--oefit_medium_blue);
    --default_dashboard_button_color: var(--oefit_medium_blue);
    --default_option_color: var(--oefit_medium_blue);
    --default_border_color: var(--oefit_medium_blue);
    --default_dashboard_info_circle_color: var(--oefit_medium_blue);
    --default_dashboard_loading_color: var(--oefit_medium_blue);
    --default_graph_bar_color: var(--oefit_dark_green);
    --default_tooltip_background_color: black;
    --default_tooltip_text_color: white;
    --mobile_text_size: 0.85rem;

    /* Legacy stuff */
    --primary_color: #b9b779;
    --comparison_color: #578184;
    --second_comparison_color: #796265;
    --oefit_light_grey: #d9e1e5;
    --card_header_background_color: #83a8b9;
    --card_footer_background_color: White;
    --footer_line_color: #afdff8;
    --footer_button_color: #afdff8;
    --card_background_grey: #F8F8F8;
}

/* Design for links */
a,
a:visited {
    color: var(--link_color) !important;
}

a:hover,
a:focus {
    color: var(--link_color) !important;
}

#dashboard_link a,
#dashboard_link a:visited,
#dashboard_link a:hover,
#dashboard_link a:focus {
    color: var(--link_color) !important;
    text-decoration: underline !important;
    font-weight: 700;
}

/* Design for text */

.text_mobile {
    font-size: 0.85rem;
}

.text_same_line_height p {
    line-height: 1.45;
    margin-top: 0;
    margin-bottom: 0;
}


.trends-info-icon {
    color: var(--default_dashboard_info_circle_color);
    margin: 0 0.22rem;
    font-size: 1em;
    vertical-align: baseline;
}

/* Keep tooltip rounding consistent with dashboard defaults. */
.tooltip .tooltip-inner {
    background-color: var(--default_tooltip_background_color) !important;
    color: var(--default_tooltip_text_color) !important;
    opacity: 1 !important;
    border-radius: var(--default_border_radius) !important;
}

.tooltip.show {
    opacity: 1 !important;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--default_tooltip_background_color) !important;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--default_tooltip_background_color) !important;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--default_tooltip_background_color) !important;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--default_tooltip_background_color) !important;
}

html body .dash-tooltip,
html body .dash-table-tooltip {
    background-color: var(--default_tooltip_background_color) !important;
    color: var(--default_tooltip_text_color) !important;
    opacity: 1 !important;
    border-radius: var(--default_border_radius) !important;
}

#important_trends_text_before_icon_markdown_desktop,
#important_trends_text_after_icon_markdown_desktop,
#important_trends_text_before_icon_markdown_mobile,
#important_trends_text_after_icon_markdown_mobile {
    display: inline;
}

#important_trends_text_before_icon_markdown_desktop p,
#important_trends_text_after_icon_markdown_desktop p,
#important_trends_text_before_icon_markdown_mobile p,
#important_trends_text_after_icon_markdown_mobile p {
    display: inline;
    margin: 0;
}